/* === IP 短视频咨询系统 — 浅色专业主题 === */
:root {
    --primary: #4F46E5;
    --primary-light: #6366F1;
    --primary-lighter: #EEF2FF;
    --primary-dark: #3730A3;
    --success: #059669;
    --success-light: #ECFDF5;
    --error: #DC2626;
    --error-light: #FEF2F2;
    --bg: #F8FAFC;
    --bg-card: #FFFFFF;
    --bg-input: #F1F5F9;
    --border: #E2E8F0;
    --text: #0F172A;
    --text-sec: #64748B;
    --text-muted: #94A3B8;
    --shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --radius: 12px;
    --font: 'Inter','Noto Sans SC',-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}
.app-container{display:flex;flex-direction:column;min-height:100vh}

/* Header */
.header{background:rgba(255,255,255,0.85);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;backdrop-filter:blur(12px)}
.header-content{max-width:960px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px}
.logo-text{font-size:16px;font-weight:600;letter-spacing:-0.02em}
.header-badge{font-size:11px;font-weight:600;color:var(--primary);background:var(--primary-lighter);padding:4px 10px;border-radius:100px;letter-spacing:0.05em;text-transform:uppercase}

/* Main */
.main-content{flex:1;max-width:960px;width:100%;margin:0 auto;padding:32px 24px}
.view{display:none;animation:fadeIn 0.4s ease}
.view.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* Input View */
.input-container{max-width:680px;margin:0 auto}
.input-hero{text-align:center;margin-bottom:36px}
.input-hero h1{font-size:28px;font-weight:700;letter-spacing:-0.03em;margin-bottom:8px}
.subtitle{font-size:15px;color:var(--text-sec)}
.form-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)}
.form-group{margin-bottom:24px}
.form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:8px;letter-spacing:-0.01em}
.form-group input[type="password"]{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:8px;font-size:14px;font-family:var(--font);background:var(--bg-input);color:var(--text);outline:none;transition:0.2s}
.form-group input[type="password"]:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,0.12);background:var(--bg-card)}

/* Mode Selector */
.mode-selector{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mode-card{position:relative;display:flex;align-items:center;gap:12px;padding:16px;border:1.5px solid var(--border);border-radius:var(--radius);cursor:pointer;transition:0.2s;background:var(--bg-card)}
.mode-card:hover{border-color:var(--primary-light);background:var(--primary-lighter)}
.mode-card.selected{border-color:var(--primary);background:var(--primary-lighter);box-shadow:0 0 0 3px rgba(79,70,229,0.1)}
.mode-card input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.mode-icon{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--bg);color:var(--text-sec);transition:0.2s}
.mode-card.selected .mode-icon{background:var(--primary);color:white}
.mode-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.mode-title{font-size:14px;font-weight:600}
.mode-desc{font-size:11px;color:var(--text-muted);white-space:nowrap}
.mode-check{flex-shrink:0;color:var(--primary);opacity:0;transform:scale(0.8);transition:0.2s}
.mode-card.selected .mode-check{opacity:1;transform:scale(1)}

/* Textarea */
textarea{width:100%;padding:14px;border:1.5px solid var(--border);border-radius:8px;font-size:13px;font-family:var(--font);line-height:1.7;background:var(--bg-input);color:var(--text);resize:vertical;min-height:200px;outline:none;transition:0.2s}
textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(79,70,229,0.12);background:var(--bg-card)}
textarea::placeholder{color:var(--text-muted)}
.textarea-footer{display:flex;justify-content:flex-end;margin-top:6px}
#char-count{font-size:12px;color:var(--text-muted)}

/* Buttons */
.btn-primary{width:100%;padding:13px 24px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:white;border:none;border-radius:8px;font-size:15px;font-weight:600;font-family:var(--font);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:0.2s;box-shadow:0 2px 8px rgba(79,70,229,0.25)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(79,70,229,0.35)}
.btn-primary:disabled{opacity:0.6;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary:hover .btn-arrow{transform:translateX(3px)}
.btn-secondary{width:100%;padding:12px 24px;background:var(--bg-card);color:var(--text);border:1.5px solid var(--border);border-radius:8px;font-size:14px;font-weight:500;font-family:var(--font);cursor:pointer;transition:0.2s;margin-top:16px}
.btn-secondary:hover{border-color:var(--text-sec);background:var(--bg)}
.error-message{margin-top:16px;padding:12px 16px;background:var(--error-light);border:1px solid #FECACA;border-radius:8px;color:var(--error);font-size:13px;font-weight:500}

/* Progress View */
.progress-container{max-width:780px;margin:0 auto}
.progress-header{text-align:center;margin-bottom:36px}
.progress-header h2{font-size:22px;font-weight:700;letter-spacing:-0.02em;margin-bottom:6px}
.steps-container{display:flex;align-items:center;justify-content:center;margin-bottom:32px;padding:24px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 1px 2px rgba(0,0,0,0.05);overflow-x:auto;flex-wrap:wrap;gap:4px}
.step-item{display:flex;align-items:center}
.step-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;border:2px solid var(--border);color:var(--text-muted);background:var(--bg);transition:0.4s}
.step-circle.active{border-color:var(--primary);background:var(--primary);color:white;box-shadow:0 0 0 4px rgba(79,70,229,0.15);animation:pulse 2s infinite}
.step-circle.done{border-color:var(--success);background:var(--success);color:white}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(79,70,229,0.15)}50%{box-shadow:0 0 0 8px rgba(79,70,229,0.08)}}
.step-line{width:20px;height:2px;background:var(--border);transition:0.4s}
.step-line.done{background:var(--success)}

/* Output Preview */
.output-preview{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.output-header{padding:12px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg)}
.output-label{font-size:12px;font-weight:600;color:var(--text-sec);text-transform:uppercase;letter-spacing:0.05em}
.output-agent-name{font-size:12px;font-weight:600;color:var(--primary);background:var(--primary-lighter);padding:3px 10px;border-radius:100px}
.output-content{padding:20px;max-height:420px;overflow-y:auto;font-size:13px;line-height:1.8;white-space:pre-wrap;word-break:break-word}
.cursor-blink{animation:blink 1s infinite;color:var(--primary);font-weight:300}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* Result View */
.result-container{max-width:780px;margin:0 auto}
.result-header{text-align:center;margin-bottom:32px}
.result-success-icon{margin-bottom:16px}
.result-header h2{font-size:22px;font-weight:700;letter-spacing:-0.02em;margin-bottom:6px}
.download-actions{display:flex;gap:12px;margin-bottom:28px}
.btn-download{flex:1;padding:12px 20px;border:1.5px solid var(--border);border-radius:8px;background:var(--bg-card);color:var(--text);font-size:14px;font-weight:500;font-family:var(--font);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:0.2s}
.btn-download:hover{border-color:var(--text-sec);background:var(--bg)}
.btn-download-primary{background:var(--primary);border-color:var(--primary);color:white;box-shadow:0 2px 8px rgba(79,70,229,0.25)}
.btn-download-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.report-preview{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:16px}
.report-preview-header{padding:12px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg);font-size:13px;font-weight:600;color:var(--text-sec)}
.btn-copy{padding:5px 14px;border:1px solid var(--border);border-radius:6px;background:var(--bg-card);color:var(--text-sec);font-size:12px;font-weight:500;font-family:var(--font);cursor:pointer;transition:0.2s}
.btn-copy:hover{border-color:var(--primary);color:var(--primary)}
.report-content{padding:24px;max-height:600px;overflow-y:auto;font-size:13px;line-height:1.8;white-space:pre-wrap;word-break:break-word}
.loading-spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,0.3);border-radius:50%;border-top-color:white;animation:spin 0.7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Upload Zone */
.upload-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:28px 20px;text-align:center;cursor:pointer;transition:all 0.25s ease;background:var(--bg)}
.upload-zone:hover{border-color:var(--primary);background:rgba(79,70,229,0.03)}
.upload-zone.drag-over{border-color:var(--primary);background:rgba(79,70,229,0.06);transform:scale(1.01)}
.upload-icon{color:var(--text-muted);margin-bottom:8px}
.upload-zone:hover .upload-icon{color:var(--primary)}
.upload-text{font-size:14px;font-weight:500;color:var(--text);margin-bottom:4px}
.upload-hint{font-size:12px;color:var(--text-muted)}

/* File List */
.file-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.file-item{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--bg);border:1px solid var(--border);border-radius:8px;font-size:13px;animation:fadeIn 0.3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.file-item-info{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:500}
.file-item-icon{color:var(--primary);flex-shrink:0}
.file-item-size{color:var(--text-muted);font-size:12px;font-weight:400}
.file-item-remove{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:2px 6px;border-radius:4px;font-size:16px;line-height:1;transition:0.2s}
.file-item-remove:hover{color:#ef4444;background:rgba(239,68,68,0.08)}

/* Input Divider */
.input-divider{display:flex;align-items:center;gap:12px;margin:16px 0}
.input-divider::before,.input-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.input-divider span{font-size:12px;color:var(--text-muted);white-space:nowrap}

/* Footer */
.footer{text-align:center;padding:20px 24px;border-top:1px solid var(--border);background:var(--bg-card)}
.footer p{font-size:12px;color:var(--text-muted)}

/* Responsive */
@media(max-width:640px){.main-content{padding:20px 16px}.form-card{padding:20px}.mode-selector{grid-template-columns:1fr}.input-hero h1{font-size:22px}.step-circle{width:26px;height:26px;font-size:10px}.step-line{width:12px}.download-actions{flex-direction:column}}