:root { color-scheme: dark; --bg:#0b1020; --panel:#111827; --panel2:#172033; --text:#e5e7eb; --muted:#94a3b8; --line:#263247; --accent:#38bdf8; --danger:#f87171; --ok:#4ade80; }
    * { box-sizing: border-box; }
    body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background:var(--bg); color:var(--text); min-height:100vh; overflow:auto; }
    header { height:58px; display:flex; align-items:center; gap:1rem; padding:0 1rem; border-bottom:1px solid var(--line); background:#0f172a; }
    header h1 { font-size:1.05rem; margin:0; letter-spacing:.02em; }
    header form { display:flex; gap:.5rem; align-items:center; margin-left:auto; }
    button, input::file-selector-button { background:var(--accent); color:#00111f; border:0; border-radius:8px; padding:.55rem .8rem; font-weight:700; cursor:pointer; }
    input[type=file] { color:var(--muted); max-width:380px; }
    .layout { min-height:calc(100vh - 58px); height:calc(100vh - 58px); display:grid; grid-template-columns: 340px minmax(0, 1fr); }
    aside { min-height:0; border-right:1px solid var(--line); background:var(--panel); overflow:auto; }
    main { min-width:0; min-height:0; display:grid; grid-template-rows:auto auto minmax(0, 1fr); background:#0b1120; overflow:hidden; }
    .toolbar { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; border-bottom:1px solid var(--line); background:var(--panel2); }
    .toolbar .title { font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:160px; }
    .toolbar a { color:var(--accent); text-decoration:none; }
    .search { width:min(280px, 30vw); border:1px solid #334155; border-radius:8px; padding:.45rem .6rem; background:#020617; color:var(--text); }
    mark.search-hit { background:#facc15; color:#111827; border-radius:3px; padding:0 .08rem; }
    mark.search-hit.active { background:#fb923c; outline:2px solid #fed7aa; }
    .ai-answer { white-space:pre-wrap; line-height:1.5; background:#020617; border:1px solid #334155; border-radius:10px; padding:.75rem; }
    .settings-card textarea { width:100%; border:1px solid #334155; border-radius:8px; padding:.6rem .7rem; background:#020617; color:var(--text); resize:vertical; }
    .audio { padding:.65rem 1rem; border-bottom:1px solid var(--line); background:#0d1526; display:flex; gap:.75rem; align-items:center; }
    .audio audio { width:min(720px, 100%); }
    .viewer { min-height:0; height:100%; overflow:hidden; display:flex; flex-direction:column; }
    iframe { width:100%; height:100%; border:0; background:white; }
    .transcript-pane { box-sizing:border-box; flex:1 1 auto; min-height:0; height:100%; overflow-y:scroll; overflow-x:auto; padding:1rem 1.25rem 5rem; line-height:1.55; overscroll-behavior:contain; scrollbar-color:#475569 #0f172a; }
    .segment { display:grid; grid-template-columns: 135px 120px minmax(0, 1fr); gap:.75rem; padding:.45rem .5rem; border-bottom:1px solid rgba(148,163,184,.14); border-left:4px solid var(--speaker-color, #64748b); }
    .segment .time { appearance:none; background:#020617; color:#e0f2fe; border:1px solid #334155; border-radius:6px; padding:.25rem .4rem; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-weight:700; cursor:pointer; text-align:left; }
    .segment .time:hover { background:#0f172a; color:#ffffff; border-color:#38bdf8; }
    .segment .speaker { color:var(--speaker-color, #bbf7d0); font-weight:800; text-shadow:0 1px 1px #020617; }
    .segment .text { color:var(--text); white-space:pre-wrap; min-width:0; }
    pre.raw { box-sizing:border-box; flex:1 1 auto; min-height:0; height:100%; overflow-y:scroll; overflow-x:auto; margin:0; padding:1rem 1rem 5rem; white-space:pre-wrap; color:var(--text); background:#08111f; scrollbar-color:#475569 #0f172a; }
    .empty { padding:2rem; color:var(--muted); }
    .job { border-bottom:1px solid var(--line); padding:.45rem .55rem; }
    .job-summary { display:grid; grid-template-columns:28px minmax(0, 1fr); gap:.3rem; align-items:center; }
    .collapse-toggle { padding:.25rem .35rem; border-radius:6px; background:#0f172a; color:var(--muted); border:1px solid #263247; }
    .job.collapsed .collapse-toggle { transform:rotate(-90deg); }
    .job-open { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:.45rem; background:transparent; color:var(--text); border:1px solid transparent; padding:.35rem .35rem; text-align:left; }
    .job-open:hover { background:#1e293b; border-color:#334155; }
    .job-details { padding:.25rem .25rem .35rem 2rem; }
    .job.collapsed .job-details { display:none; }
    .status { font-size:.72rem; text-transform:uppercase; border-radius:999px; padding:.15rem .45rem; color:#052e16; background:var(--ok); height:max-content; }
    .status.failed { color:#450a0a; background:var(--danger); }
    .job-title { font-weight:800; margin:.15rem 0 .2rem; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .job-notes { color:var(--muted); font-size:.78rem; line-height:1.25; white-space:pre-wrap; margin:.2rem 0 .5rem; }
    .job-actions { display:flex; gap:.4rem; margin:.45rem 0; }
    .mini { padding:.32rem .5rem; border-radius:6px; font-size:.75rem; }
    .mini.danger { background:#7f1d1d; color:#fee2e2; }
    .group-label { color:var(--muted); font-size:.72rem; text-transform:uppercase; margin:.55rem 0 .25rem; }
    .file { display:block; width:100%; text-align:left; background:transparent; color:var(--text); border:1px solid transparent; border-radius:7px; padding:.4rem .5rem; cursor:pointer; font-weight:500; }
    .file:hover, .file.active { background:#1e293b; border-color:#334155; }
    .file.audio-file { color:#bfdbfe; }
    .progress-wrap { margin:.45rem 0 .55rem; }
    .progress-meta { display:flex; justify-content:space-between; gap:.5rem; color:var(--muted); font-size:.75rem; margin-bottom:.25rem; }
    .progress { height:9px; background:#020617; border:1px solid #334155; border-radius:999px; overflow:hidden; }
    .progress-bar { height:100%; width:0%; background:linear-gradient(90deg,#38bdf8,#4ade80); transition:width .25s ease; }
    .progress-bar.failed { background:linear-gradient(90deg,#fb7185,#f87171); }
    .task-bars { display:grid; gap:.35rem; margin:.5rem 0 .6rem; }
    .task-row { display:grid; grid-template-columns: 112px 1fr 42px; align-items:center; gap:.45rem; font-size:.72rem; color:var(--muted); }
    .task-row .progress { height:7px; }
    .task-row.complete { color:#bbf7d0; }
    .task-row.failed { color:#fecaca; }
    .error { color:#fecaca; font-size:.8rem; line-height:1.3; }
    .secondary { background:#1e293b; color:var(--text); border:1px solid #334155; }
    .settings-panel { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:1rem; background:rgba(2,6,23,.72); }
    .login-panel { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:1rem; background:rgba(2,6,23,.92); }
    .settings-panel[hidden], .login-panel[hidden] { display:none; }
    .settings-card, .login-card { width:min(680px, 100%); display:grid; gap:1rem; padding:1rem; border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:0 24px 80px rgba(0,0,0,.4); }
    .login-card { width:min(420px, 100%); }
    .settings-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
    .login-card h2 { margin:0; }
    .login-card label { display:grid; gap:.35rem; color:var(--muted); font-size:.86rem; font-weight:700; }
    .login-card input { width:100%; border:1px solid #334155; border-radius:8px; padding:.7rem .8rem; background:#020617; color:var(--text); }
    .settings-head h2 { margin:0; }
    .settings-section { display:grid; gap:.75rem; padding-top:.75rem; border-top:1px solid var(--line); }
    .settings-section h3 { margin:0; font-size:.95rem; }
    .settings-tabs { display:flex; gap:.4rem; border-bottom:1px solid var(--line); padding-bottom:.5rem; }
    .settings-tab { background:#0f172a; color:var(--muted); border:1px solid #334155; }
    .settings-tab.active { background:var(--accent); color:#00111f; }
    .settings-tab-panel { display:grid; gap:.85rem; }
    .settings-tab-panel[hidden] { display:none; }
    .checkbox-row { display:flex !important; grid-template-columns:auto 1fr; align-items:center; gap:.55rem !important; }
    .checkbox-row input { width:auto !important; }
    .totp-qr { display:grid; gap:.5rem; justify-items:start; padding:.65rem; border:1px solid #334155; border-radius:10px; background:#020617; }
    .totp-qr svg { width:180px; height:180px; background:white; border-radius:8px; padding:.4rem; }
    .totp-qr a { color:var(--accent); }
    .users-list { display:grid; gap:.6rem; }
    .user-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.75rem; align-items:center; padding:.6rem; border:1px solid #334155; border-radius:10px; background:#020617; }
    .user-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.35rem; }
    .settings-card label { display:grid; gap:.35rem; color:var(--muted); font-size:.86rem; font-weight:700; }
    .settings-card input, .settings-card select { width:100%; border:1px solid #334155; border-radius:8px; padding:.6rem .7rem; background:#020617; color:var(--text); }
    .model-row { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap:.5rem; }
    .settings-actions { display:flex; justify-content:flex-end; gap:.6rem; }
    @media (max-width: 650px) { .model-row { grid-template-columns:1fr; } }
    @media (max-width: 850px) { .layout { grid-template-columns: 1fr; grid-template-rows: 260px 1fr; } aside { border-right:0; border-bottom:1px solid var(--line); } header { flex-wrap:wrap; height:auto; min-height:58px; padding:.7rem 1rem; } }
    .muted { color:var(--muted); }
    .processing-title { margin-top:0; }
    .speaker-color-0 { --speaker-color:#60a5fa; }
    .speaker-color-1 { --speaker-color:#34d399; }
    .speaker-color-2 { --speaker-color:#f472b6; }
    .speaker-color-3 { --speaker-color:#fbbf24; }
    .speaker-color-4 { --speaker-color:#a78bfa; }
    .speaker-color-5 { --speaker-color:#fb7185; }
    .speaker-color-6 { --speaker-color:#2dd4bf; }
    .speaker-color-7 { --speaker-color:#f97316; }

.pct-0 { width:0%; }
.pct-1 { width:1%; }
.pct-2 { width:2%; }
.pct-3 { width:3%; }
.pct-4 { width:4%; }
.pct-5 { width:5%; }
.pct-6 { width:6%; }
.pct-7 { width:7%; }
.pct-8 { width:8%; }
.pct-9 { width:9%; }
.pct-10 { width:10%; }
.pct-11 { width:11%; }
.pct-12 { width:12%; }
.pct-13 { width:13%; }
.pct-14 { width:14%; }
.pct-15 { width:15%; }
.pct-16 { width:16%; }
.pct-17 { width:17%; }
.pct-18 { width:18%; }
.pct-19 { width:19%; }
.pct-20 { width:20%; }
.pct-21 { width:21%; }
.pct-22 { width:22%; }
.pct-23 { width:23%; }
.pct-24 { width:24%; }
.pct-25 { width:25%; }
.pct-26 { width:26%; }
.pct-27 { width:27%; }
.pct-28 { width:28%; }
.pct-29 { width:29%; }
.pct-30 { width:30%; }
.pct-31 { width:31%; }
.pct-32 { width:32%; }
.pct-33 { width:33%; }
.pct-34 { width:34%; }
.pct-35 { width:35%; }
.pct-36 { width:36%; }
.pct-37 { width:37%; }
.pct-38 { width:38%; }
.pct-39 { width:39%; }
.pct-40 { width:40%; }
.pct-41 { width:41%; }
.pct-42 { width:42%; }
.pct-43 { width:43%; }
.pct-44 { width:44%; }
.pct-45 { width:45%; }
.pct-46 { width:46%; }
.pct-47 { width:47%; }
.pct-48 { width:48%; }
.pct-49 { width:49%; }
.pct-50 { width:50%; }
.pct-51 { width:51%; }
.pct-52 { width:52%; }
.pct-53 { width:53%; }
.pct-54 { width:54%; }
.pct-55 { width:55%; }
.pct-56 { width:56%; }
.pct-57 { width:57%; }
.pct-58 { width:58%; }
.pct-59 { width:59%; }
.pct-60 { width:60%; }
.pct-61 { width:61%; }
.pct-62 { width:62%; }
.pct-63 { width:63%; }
.pct-64 { width:64%; }
.pct-65 { width:65%; }
.pct-66 { width:66%; }
.pct-67 { width:67%; }
.pct-68 { width:68%; }
.pct-69 { width:69%; }
.pct-70 { width:70%; }
.pct-71 { width:71%; }
.pct-72 { width:72%; }
.pct-73 { width:73%; }
.pct-74 { width:74%; }
.pct-75 { width:75%; }
.pct-76 { width:76%; }
.pct-77 { width:77%; }
.pct-78 { width:78%; }
.pct-79 { width:79%; }
.pct-80 { width:80%; }
.pct-81 { width:81%; }
.pct-82 { width:82%; }
.pct-83 { width:83%; }
.pct-84 { width:84%; }
.pct-85 { width:85%; }
.pct-86 { width:86%; }
.pct-87 { width:87%; }
.pct-88 { width:88%; }
.pct-89 { width:89%; }
.pct-90 { width:90%; }
.pct-91 { width:91%; }
.pct-92 { width:92%; }
.pct-93 { width:93%; }
.pct-94 { width:94%; }
.pct-95 { width:95%; }
.pct-96 { width:96%; }
.pct-97 { width:97%; }
.pct-98 { width:98%; }
.pct-99 { width:99%; }
.pct-100 { width:100%; }

.speaker-color-0 { --speaker-color:#60a5fa; }
.speaker-color-1 { --speaker-color:#34d399; }
.speaker-color-2 { --speaker-color:#f472b6; }
.speaker-color-3 { --speaker-color:#fbbf24; }
.speaker-color-4 { --speaker-color:#a78bfa; }
.speaker-color-5 { --speaker-color:#fb7185; }
.speaker-color-6 { --speaker-color:#2dd4bf; }
.speaker-color-7 { --speaker-color:#f97316; }