*{margin:0;padding:0;box-sizing:border-box}body,html{height:100vh;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;background-color:#f5f5f5}.header{background:linear-gradient(135deg,#667eea,#764ba2);color:white;padding:20px 40px;box-shadow:0 2px 8px rgba(0,0,0,.1)}.header h1{font-size:24px;font-weight:600;margin-bottom:5px}.header p{font-size:14px;opacity:.9}.main-container{display:flex;height:calc(100vh - 84px)}.chat-panel{background-color:#ffffff;border-right:1px solid #e0e0e0}.chat-panel,.message-list{flex:1 1;display:flex;flex-direction:column}.message-list{overflow-y:auto;padding:20px;gap:16px}.message-list::-webkit-scrollbar{width:6px}.message-list::-webkit-scrollbar-thumb{background-color:#d0d0d0;border-radius:3px}.message{display:flex;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.system{justify-content:flex-start}.message.user{justify-content:flex-end}.message-bubble{max-width:70%;padding:12px 16px;border-radius:16px;line-height:1.5;word-wrap:break-word}.message.system .message-bubble{background-color:#f3f4f6;color:#1f2937;border-top-left-radius:4px}.message.user .message-bubble{background-color:#667eea;color:white;border-top-right-radius:4px}.voice-badge{font-size:12px;opacity:.8}.input-area{padding:20px;background-color:#fafafa;border-top:1px solid #e0e0e0;display:flex;gap:12px;align-items:flex-end}.input-wrapper{flex:1 1;display:flex;flex-direction:column;gap:8px}.input-box{width:100%;min-height:48px;max-height:120px;padding:12px;border:2px solid #d1d5db;border-radius:12px;font-size:15px;font-family:inherit;resize:vertical;outline:none;transition:border-color .2s}.input-box:focus{border-color:#667eea}.input-box:disabled{background-color:#f5f5f5;cursor:not-allowed}.char-count{font-size:12px;color:#9ca3af;text-align:right}.btn{width:48px;height:48px;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;transition:all .2s;outline:none}.btn:hover:not(:disabled){transform:scale(1.05)}.btn:active:not(:disabled){transform:scale(.95)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-voice{background-color:#f3f4f6;color:#4b5563}.btn-voice.recording{background-color:#ef4444;color:white;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.btn-send{background-color:#667eea;color:white}.preview-panel{flex:1 1;background-color:#f9fafb;padding:32px;overflow-y:auto}.preview-title{font-size:20px;font-weight:600;color:#1f2937;margin-bottom:24px;text-align:center}.panel-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:24px;gap:24px;max-width:800px;margin:0 auto}.panel-card{background-color:white;border-radius:12px;overflow:hidden;border:2px dashed #d1d5db;transition:all .3s;position:relative}.panel-card.active{border:4px solid #667eea;box-shadow:0 0 0 4px rgba(102,126,234,.2);animation:pulseCard 2s infinite}@keyframes pulseCard{0%,to{box-shadow:0 0 0 4px rgba(102,126,234,.2)}50%{box-shadow:0 0 0 8px rgba(102,126,234,.1)}}.panel-card.completed{border:2px solid #10b981}.panel-image{width:100%;aspect-ratio:1;background-color:#e5e7eb;display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:14px;position:relative}.panel-image img{width:100%;height:100%;object-fit:cover}.panel-image .loading{display:flex;flex-direction:column;align-items:center;gap:12px}.spinner{width:40px;height:40px;border:4px solid #e5e7eb;border-top-color:#667eea;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.panel-number{position:absolute;top:12px;left:12px;width:36px;height:36px;background-color:#667eea;color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:10}.panel-description{padding:16px;background-color:white;min-height:60px}.panel-description h3{font-size:14px;font-weight:600;color:#374151;margin-bottom:6px}.panel-description p{font-size:13px;color:#6b7280;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}@media (max-width:768px){.main-container{flex-direction:column}.chat-panel{border-right:none;border-bottom:1px solid #e0e0e0}.panel-grid{gap:16px}}