@import"https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{font-family:Noto Sans TC,system-ui,-apple-system,sans-serif;color:#1a2332;background-color:#f4f6f9;-webkit-font-smoothing:antialiased}body{min-height:100dvh}#root{max-width:1100px;margin:0 auto;padding:1.5rem 1rem}.landing{display:flex;flex-direction:column;gap:2.5rem}.landing-header{text-align:center;padding:2rem 1rem 0;display:flex;flex-direction:column;align-items:center;gap:.6rem}.landing-logo{margin-bottom:.25rem}.landing-title{font-size:2rem;font-weight:700;letter-spacing:-.02em;color:#1a2332}.landing-tagline{font-size:1rem;font-weight:500;color:#1976d2}.landing-desc{font-size:.9rem;color:#6b7a8d;max-width:480px;line-height:1.6}.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.mode-card{display:flex;align-items:flex-start;gap:1rem;padding:1.5rem;background:#fff;border:2px solid transparent;border-radius:16px;cursor:pointer;text-align:left;transition:border-color .18s,box-shadow .18s,transform .15s;box-shadow:0 2px 8px #0000000f;position:relative}.mode-card:hover{border-color:var(--mode-color);box-shadow:0 6px 20px #0000001a;transform:translateY(-2px)}.mode-card:active{transform:translateY(0)}.mode-icon{font-size:2.2rem;flex-shrink:0;margin-top:2px}.mode-card-body{flex:1}.mode-card-title{font-size:1.1rem;font-weight:700;color:var(--mode-color);margin-bottom:2px}.mode-card-subtitle{font-size:.78rem;color:#9aa3ad;margin-bottom:6px;font-weight:500}.mode-card-desc{font-size:.85rem;color:#4a5568;line-height:1.55}.mode-card-arrow{font-size:1.1rem;color:#c0cad4;align-self:center;flex-shrink:0;transition:color .18s,transform .18s}.mode-card:hover .mode-card-arrow{color:var(--mode-color);transform:translate(4px)}.landing-footer{text-align:center;font-size:.78rem;color:#9aa3ad;padding-bottom:1rem}.session-runner{display:flex;flex-direction:column;gap:1rem}.session-header{display:flex;align-items:center;gap:1rem;padding-bottom:.25rem;border-bottom:1px solid #e8ecf0}.back-btn{padding:6px 14px;border-radius:8px;border:1px solid #dde2e8;background:#fff;color:#4a5568;font-size:.875rem;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap;flex-shrink:0}.back-btn:hover:not(:disabled){background:#f4f6f9;border-color:#c0cad4}.back-btn:disabled{opacity:.45;cursor:not-allowed}.session-title-row{display:flex;align-items:center;gap:.6rem}.session-icon{font-size:1.6rem}.session-title{font-size:1.2rem;font-weight:700;color:#1a2332;line-height:1.2}.session-subtitle{font-size:.78rem;color:#9aa3ad;font-weight:500}.variant-toggle{display:flex;gap:.5rem;flex-wrap:wrap}.variant-btn{padding:8px 18px;border-radius:20px;border:2px solid #dde2e8;background:#fff;color:#4a5568;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .16s}.variant-btn:hover{border-color:var(--mode-color);color:var(--mode-color)}.variant-btn.active{background:var(--mode-color);border-color:var(--mode-color);color:#fff}.config-inputs{display:flex;flex-direction:column;gap:.6rem}.text-input{padding:9px 13px;border-radius:8px;border:1px solid #dde2e8;font-size:.9rem;font-family:inherit;background:#fff;color:#1a2332;transition:border-color .15s;resize:vertical;width:100%}.text-input:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 3px #1976d21a}.text-input:disabled{background:#f8f9fa;color:#9aa3ad;cursor:not-allowed}.textarea-input{min-height:80px;line-height:1.5}.controls-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.primary-btn{padding:10px 22px;border-radius:8px;border:none;color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;transition:opacity .15s,transform .12s;font-family:inherit}.primary-btn:hover{opacity:.88;transform:translateY(-1px)}.primary-btn:active{transform:translateY(0)}.secondary-btn{padding:10px 16px;border-radius:8px;border:1px solid #dde2e8;background:#fff;color:#4a5568;font-size:.875rem;font-weight:500;cursor:pointer;transition:background .15s;font-family:inherit}.secondary-btn:hover{background:#f4f6f9}.media-row{display:flex;gap:1rem;flex-wrap:wrap}.video-col{flex:1 1 300px}.video-preview{width:100%;border-radius:12px;background:#000}.frame-status{font-size:.78rem;color:#6b7a8d;margin-top:4px}.transcript-col{flex:1 1 300px;max-height:380px;overflow-y:auto;background:#fff;border-radius:12px;padding:1rem;box-shadow:0 1px 4px #00000012}.transcript-heading{font-size:.95rem;font-weight:600;margin-bottom:.6rem;color:#1a2332}.utterance{margin-bottom:6px;font-size:.875rem;line-height:1.5}.speaker-tag{font-weight:600}.speaker-tag.ai{color:#1976d2}.speaker-tag.student{color:#2e7d32}.emotion-tag{color:#9aa3ad;font-size:.78rem}.interim-text{color:#bbb;font-size:.82rem;font-style:italic}.empty-transcript{color:#bbb;font-size:.875rem}.error-box{padding:10px 14px;background:#fdecea;color:#b71c1c;border-radius:8px;font-size:.875rem}.video-preset-section{display:flex;flex-direction:column;gap:.5rem}.video-section-label{font-size:.82rem;font-weight:600;color:#6b7a8d;text-transform:uppercase;letter-spacing:.05em}.video-preset-row{display:flex;gap:.5rem;flex-wrap:wrap}.video-field-group{display:flex;flex-direction:column;gap:4px}.video-field-label{font-size:.82rem;font-weight:600;color:#4a5568}.video-lang-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7a8d' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}.video-drop-zone{border:2px dashed #dde2e8;border-radius:16px;padding:2rem 1.5rem;text-align:center;cursor:pointer;transition:border-color .18s,background .18s;background:#fafbfc}.video-drop-zone:hover{border-color:#1976d2;background:#f0f7ff}.video-drop-zone.has-file{border-color:#7c3aed;background:#f8f5ff}.video-drop-info{display:flex;align-items:center;justify-content:center;gap:1rem}.video-drop-icon{font-size:2rem}.video-drop-title{font-size:1rem;font-weight:600;color:#1a2332;margin-bottom:2px}.video-drop-hint{font-size:.82rem;color:#9aa3ad}.video-filename{font-size:.95rem;font-weight:600;color:#7c3aed;margin-bottom:2px;word-break:break-all}.video-filesize{font-size:.78rem;color:#9aa3ad}.video-progress-section{background:#fff;border-radius:12px;padding:1.25rem;box-shadow:0 1px 4px #00000012;display:flex;flex-direction:column;gap:.75rem}.video-progress-header{display:flex;justify-content:space-between;align-items:center}.video-progress-phase{font-size:.9rem;font-weight:600;color:#1a2332}.video-progress-pct{font-size:.9rem;font-weight:600;color:#6b7a8d}.video-progress-bar-track{height:8px;background:#e8ecf0;border-radius:999px;overflow:hidden}.video-progress-bar-fill{height:100%;border-radius:999px;transition:width .4s ease}.video-progress-label{font-size:.82rem;color:#6b7a8d}.video-phase-steps{display:flex;gap:.5rem;flex-wrap:wrap}.video-phase-step{display:flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;background:#f4f6f9;font-size:.78rem;color:#9aa3ad;transition:background .18s,color .18s}.video-phase-step.done{background:#e8f5e9;color:#2e7d32}.video-phase-step.active{background:#e3f2fd;color:#1976d2;font-weight:600}.video-phase-dot{font-size:.75rem;font-weight:700;width:16px;text-align:center}.video-phase-name{white-space:nowrap}.video-tab-switcher{display:flex;gap:0;background:#f0f2f5;border-radius:12px;padding:4px;width:fit-content}.video-tab-btn{padding:8px 20px;border-radius:9px;border:none;background:transparent;font-family:inherit;font-size:.88rem;font-weight:500;color:#6b7a8d;cursor:pointer;transition:background .18s,color .18s,box-shadow .18s;white-space:nowrap}.video-tab-btn:hover:not(:disabled){color:#1a2332;background:#fff9}.video-tab-btn.active{background:var(--tab-color, #7c3aed);color:#fff;font-weight:600;box-shadow:0 2px 8px #0000001f}.video-tab-btn:disabled{opacity:.5;cursor:not-allowed}.youtube-notice{display:flex;align-items:flex-start;gap:.5rem;background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:.75rem 1rem;font-size:.82rem;color:#92400e;line-height:1.5}.youtube-notice-icon{flex-shrink:0;font-size:1rem;margin-top:1px}.youtube-url-input{font-size:.9rem}.youtube-analysing{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:2rem 1rem}.youtube-spinner{width:40px;height:40px;border:3px solid #e8ecf0;border-top:3px solid #7c3aed;border-radius:50%;animation:yt-spin .8s linear infinite}@keyframes yt-spin{to{transform:rotate(360deg)}}.youtube-analysing-label{font-size:.95rem;font-weight:600;color:#1a2332}.youtube-analysing-hint{font-size:.82rem;color:#9aa3ad}@media(max-width:600px){.landing-title{font-size:1.6rem}.mode-grid{grid-template-columns:1fr}.session-title{font-size:1rem}#root{padding:1rem .75rem}}