:root{--bg: #0e1016;--panel: #171a24;--panel-2: #1d2130;--border: #262b3d;--text: #e6e8f0;--muted: #9aa1b5;--accent: #6366f1;--accent-2: #8b5cf6;--danger: #f87171;--ok: #34d399;--radius: 14px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,Roboto,Helvetica Neue,Arial,sans-serif;background:radial-gradient(1200px 500px at 80% -10%,rgba(99,102,241,.18),transparent 60%),radial-gradient(900px 400px at 0% 110%,rgba(139,92,246,.12),transparent 60%),var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}.app{min-height:100%;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;border-bottom:1px solid var(--border);background:#0e1016b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:baseline;gap:10px}.brand-icon{font-size:22px}.brand h1{margin:0;font-size:20px;letter-spacing:.5px;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}.brand-sub{color:var(--muted);font-size:13px}.topbar-note{font-size:12px}main{flex:1;padding:24px 28px;max-width:1280px;width:100%;margin:0 auto}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}@media(max-width:960px){.workspace{grid-template-columns:1fr}}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;font-size:14px}.panel-title{font-weight:600;word-break:break-all}.upload-wrap{max-width:720px;margin:8vh auto 0;text-align:center}.upload-zone{border:2px dashed var(--border);border-radius:20px;padding:56px 32px;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}.upload-zone:hover,.upload-zone.dragging{border-color:var(--accent);background:#6366f10f}.upload-zone.dragging{transform:scale(1.01)}.upload-zone.has-error{border-color:var(--danger)}.upload-icon{font-size:52px;margin-bottom:12px}.upload-zone h2{margin:0 0 8px;font-size:20px}.muted{color:var(--muted);font-size:13px}.error-text{color:var(--danger);font-size:13px;margin:10px 0 0}.steps{list-style:none;padding:0;margin:28px 0 0;text-align:left;display:grid;gap:12px}.steps li{display:flex;align-items:center;gap:10px;color:var(--text);font-size:14px}.steps b{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:13px;flex-shrink:0}.transcript-panel{min-height:480px;display:flex;flex-direction:column}.transcript-list{display:flex;flex-direction:column;gap:6px;max-height:66vh;overflow-y:auto;padding:2px}.empty-transcript{padding:60px 20px;text-align:center}.sentence-row{display:grid;grid-template-columns:44px 110px minmax(0,1fr);align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}.sentence-row:hover{background:var(--panel-2)}.sentence-row.selected{border-color:var(--border)}.sentence-row.active{background:linear-gradient(90deg,#6366f138,#8b5cf614);border-color:var(--accent)}.sentence-index{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.sentence-time{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}.sentence-row.active .sentence-index,.sentence-row.active .sentence-time{color:var(--accent-2)}.sentence-text{font-size:15px;line-height:1.55;color:var(--text)}.sentence-row.active .sentence-text{color:#fff}.field{margin-bottom:12px}.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}select{width:100%;background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:14px;outline:none}select:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin:4px 0 14px;cursor:pointer}.primary-btn{width:100%;padding:12px;border:none;border-radius:12px;font-size:15px;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));cursor:pointer;transition:filter .15s,opacity .15s}.primary-btn:hover:not(:disabled){filter:brightness(1.1)}.primary-btn:disabled{opacity:.5;cursor:not-allowed}.progress-wrap{margin-top:14px}.progress-bar{height:8px;border-radius:999px;background:var(--panel-2);overflow:hidden}.progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .3s}.progress-text{margin-top:6px;word-break:break-all}.player-controls{display:flex;flex-direction:column;gap:12px}.controls-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.play-btn{width:56px;height:56px;border-radius:50%;border:none;font-size:20px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));cursor:pointer;box-shadow:0 6px 20px #6366f159;transition:transform .15s,filter .15s}.play-btn:hover{transform:scale(1.06);filter:brightness(1.1)}.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);font-size:15px;cursor:pointer}.icon-btn:hover:not(:disabled){border-color:var(--accent)}.icon-btn:disabled{opacity:.35;cursor:not-allowed}.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--border);background:var(--panel-2);color:var(--muted);font-size:13px;cursor:pointer;transition:color .15s,border-color .15s}.chip.on{color:var(--text);border-color:var(--accent);background:#6366f11f}.chip select{width:auto;padding:2px 6px;font-size:13px}.hint{margin-top:12px;line-height:1.7}kbd{display:inline-block;padding:1px 6px;border-radius:6px;border:1px solid var(--border);border-bottom-width:2px;background:var(--panel-2);font-size:12px;font-family:inherit}.actions{display:flex;gap:10px}.actions .ghost-btn{flex:1}.ghost-btn{padding:9px 12px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text);font-size:13px;cursor:pointer;transition:border-color .15s,background .15s}.ghost-btn:hover:not(:disabled){border-color:var(--accent);background:#6366f114}.ghost-btn.danger:hover:not(:disabled){border-color:var(--danger);background:#f8717114}.ghost-btn:disabled{opacity:.4;cursor:not-allowed}.foot{text-align:center;padding:18px;border-top:1px solid var(--border);font-size:12px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}::-webkit-scrollbar-thumb:hover{background:#343b55}