:root {
  --ink: #e8edf2;
  --muted: #9aa8b6;
  --line: #344352;
  --paper: #111820;
  --surface: #1a232d;
  --accent: #e98a52;
  --accent-dark: #f0a06f;
  --teal: #45b8b0;
  --danger: #e06a6a;
  --shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
:root[data-theme="light"] {
  --ink: #17212b;
  --muted: #657383;
  --line: #dfe5eb;
  --paper: #f5f7fa;
  --surface: #ffffff;
  --accent: #e06b32;
  --accent-dark: #b94e20;
  --teal: #127c78;
  --danger: #b93737;
  --shadow: 0 8px 24px rgba(20, 38, 56, .07);
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; transition: color .16s ease, background-color .16s ease; }
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--accent-dark); }
.shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { background: #0b1117; color: #eaf0f4; padding: 24px 16px; display: flex; flex-direction: column; gap: 28px; }
.brand { display: flex; align-items: center; gap: 11px; color: #fff; font-weight: 750; font-size: 21px; letter-spacing: -.02em; }
.brand-logo { width: 42px; height: 42px; padding: 4px; border-radius: 10px; display: grid; place-items: center; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.18); overflow: hidden; flex: 0 0 42px; }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--accent); font-size: 16px; }
.brand small { display: block; color: #aab8c5; font-size: 11px; font-weight: 500; letter-spacing: .03em; }
.nav { display: grid; gap: 5px; }
.nav a { color: #b9c6d1; padding: 11px 12px; border-radius: 7px; display: flex; align-items: center; gap: 10px; font-weight: 560; }
.nav a:hover, .nav a.active { color: #fff; background: rgba(255,255,255,.1); }
.nav-icon { width: 20px; text-align: center; opacity: .8; font-size: 15px; }
.sidebar-footer { margin-top: auto; border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; color: #aab8c5; font-size: 12px; }
.sidebar-footer strong { color: #fff; display: block; margin-bottom: 3px; }
.main { min-width: 0; }
.topbar { height: 68px; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 34px; }
.topbar h1 { font-size: 20px; margin: 0; letter-spacing: -.02em; }
.user-chip { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: 13px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #d9ecea; color: var(--teal); display: grid; place-items: center; font-weight: 700; }
.content { max-width: 1480px; padding: 30px 34px 50px; margin: 0 auto; }
.eyebrow { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.page-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-end; margin-bottom: 24px; }
.page-head h2 { margin: 4px 0 0; font-size: 30px; letter-spacing: -.035em; }
.page-head p { color: var(--muted); margin: 7px 0 0; }
.actions { display:flex; gap: 9px; flex-wrap: wrap; }
.btn { border: 1px solid var(--line); border-radius: 6px; padding: 9px 14px; background: var(--surface); color: var(--ink); font-weight: 650; display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.btn:hover { border-color: #b6c3cf; color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn-primary { color:#fff; background:var(--accent); border-color:var(--accent); }
.btn-primary:hover { color:#fff; background:var(--accent-dark); border-color:var(--accent-dark); }
.btn-teal { color:#fff; background:var(--teal); border-color:var(--teal); }
.btn-danger { color:#fff; background:var(--danger); border-color:var(--danger); }
.btn-sm { padding: 6px 10px; font-size: 13px; }
.grid { display:grid; gap: 18px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); }
.panel-pad { padding: 20px; }
.metric { padding: 18px 20px; }
.metric-label { color:var(--muted); font-size:13px; }
.metric-value { font-size: 29px; line-height:1.15; font-weight: 750; margin-top: 7px; }
.metric-note { margin-top: 8px; font-size:12px; color:var(--muted); }
.section-title { display:flex; justify-content:space-between; align-items:center; padding: 16px 20px; border-bottom:1px solid var(--line); }
.section-title h3 { font-size:16px; margin:0; }
.section-caption { display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.page-index .section-title, .page-progress .section-title, .page-transcribtion_settings .section-title { background:#1c3440; border-bottom-color:#3b6170; }
.page-index .section-title h3, .page-progress .section-title h3, .page-transcribtion_settings .section-title h3 { color:#9bd8ed; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; }
th { color:var(--muted); text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; background:#202b35; }
th, td { padding: 12px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:hover { background:#25313c; }
.badge { display:inline-flex; align-items:center; border-radius: 999px; padding: 3px 9px; font-size:11px; font-weight:700; }
.badge-success { color:#8ee2d8; background:#164740; }.badge-muted { color:#c0cad4; background:#35414d; }.badge-warn { color:#ffd48d; background:#543d1f; }
.empty { padding: 38px 20px; text-align:center; color:var(--muted); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
label { display:block; font-size:13px; font-weight:650; margin-bottom:6px; }
input, select, textarea { width:100%; padding:10px 11px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); font:inherit; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(18,124,120,.15); border-color:var(--teal); }
.alert { padding:12px 14px; border-radius:6px; margin-bottom:16px; border:1px solid transparent; }.alert-danger { color:#ffaeae; background:#4b2529; border-color:#7c3f46; }.alert-success { color:#9be4d8; background:#173e39; border-color:#327369; }.alert-info { color:#9bd8ed; background:#1d3747; border-color:#3b6170; }
.modal { width:min(620px, calc(100% - 32px)); padding:0; border:0; background:transparent; }.modal::backdrop { background:rgba(23,33,43,.44); }.modal-card { margin:0; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 20px 54px rgba(20,38,56,.25); }.modal-head,.modal-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; }.modal-head { border-bottom:1px solid var(--line); }.modal-head h3 { margin:0; font-size:17px; }.modal-body { padding:20px; }.modal-actions { justify-content:flex-end; border-top:1px solid var(--line); }.icon-btn { display:inline-grid; width:32px; height:32px; place-items:center; padding:0; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); cursor:pointer; }.station-blocks { display:grid; gap:10px; margin:20px 0 0; padding:0; border:0; }.station-blocks legend { padding:0; font-size:13px; font-weight:650; }.station-block-row { display:grid; grid-template-columns:28px minmax(0,1fr) minmax(0,1fr); gap:10px; align-items:end; }.station-block-row > strong { height:42px; display:grid; place-items:center; color:var(--muted); background:#edf0f3; border-radius:6px; }.station-block-row label { margin:0; }
.upload-zone { border:2px dashed #4b5d6c; border-radius:8px; padding:44px 24px; text-align:center; background:#202b35; }.upload-zone:hover { border-color:var(--teal); background:#1d3737; }
.upload-zone input { max-width:420px; margin:18px auto 0; }
.result-card { padding:18px 20px; border-bottom:1px solid var(--line); }.result-card:last-child { border-bottom:0; }.result-card.result-block-tone-a { background:#173734; }.result-card.result-block-tone-b { background:#3b2e1e; }.result-card h3 { margin:0 0 6px; font-size:17px; }.result-card p { margin:6px 0; color:var(--muted); }.meta { display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.result-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }.result-card-head h3 { min-width:0; }.result-card-head form { flex:0 0 auto; margin:0; }.result-card.result-archived { opacity:.78; background:#252d35; }
.result-occurrences { display:grid; gap:7px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }.result-occurrences details { padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:#202b35; }.result-occurrences p { white-space:pre-wrap; }
.task-list { display:grid; gap:10px; padding:16px 20px; }.task { border:1px solid var(--line); border-radius:7px; padding:12px; display:flex; justify-content:space-between; gap:12px; align-items:center; }.task.block-tone-a { background:#173734; border-color:#286b64; }.task.block-tone-b { background:#3b2e1e; border-color:#86643a; }.task small { color:var(--muted); }.progress { height:7px; background:#2a3540; border-radius:8px; overflow:hidden; margin-top:8px; }.progress > span { display:block; height:100%; background:var(--teal); }
.monitor-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 14px; margin-bottom:18px; }.monitor-search { flex:1; max-width:520px; display:flex; align-items:center; gap:10px; color:var(--muted); }.monitor-search input { border:0; padding:8px 0; background:transparent; }.monitor-search input:focus { outline:0; }.monitor-summary { color:var(--muted); font-size:13px; white-space:nowrap; }.station-panel { min-width:0; }.station-heading { min-width:0; }.station-heading h3 { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.station-task-count { color:var(--muted); display:block; font-size:12px; margin-top:2px; }.task-row[hidden] { display:none; }.show-all-btn { border:0; border-top:1px solid var(--line); background:transparent; color:var(--teal); width:100%; padding:10px; font:600 13px inherit; cursor:pointer; }.show-all-btn:hover { background:#f5fbfa; }
.task-time { display:flex; align-items:center; gap:7px; min-height:23px; }.status-icon { display:inline-grid; place-items:center; width:20px; height:20px; font-size:15px; }.status-label { font-size:12px; color:var(--muted); }.status-cancelled { color:var(--danger); }.status-waiting { color:#b07920; }.status-transcribing,.status-analyzing { color:var(--teal); }.status-recording { color:#b34242; }.status-error { color:var(--danger); animation:status-alert 1.1s ease-in-out infinite; }.status-completed { color:#27826f; }.status-transcribing i,.status-analyzing i { animation:status-spin 1.2s linear infinite; }.task-message { color:var(--muted); display:block; min-height:18px; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }@keyframes status-spin{to{transform:rotate(360deg)}}@keyframes status-alert{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.16)}}
.stream-toggle { border:1px solid #bcd8d5; color:var(--teal); background:#f4fbfa; border-radius:6px; min-width:94px; padding:7px 10px; display:inline-flex; align-items:center; justify-content:center; gap:5px; font:600 13px inherit; cursor:pointer; transition:background .16s ease, border-color .16s ease, color .16s ease; }
.stream-toggle:hover { background:#e2f3f0; border-color:#8dbeb9; }.stream-toggle.is-playing { background:var(--teal); border-color:var(--teal); color:#fff; }.stream-status { display:inline-block; color:var(--muted); font-size:12px; margin-left:8px; min-width:92px; }
.stream-toggle.is-unavailable, .stream-toggle.is-unavailable:hover { color:#fff; background:var(--danger); border-color:var(--danger); cursor:not-allowed; opacity:.95; }.stream-toggle.is-unavailable + .stream-status { color:var(--danger); }
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.dashboard-activity { margin-bottom:18px; }
.dashboard-status-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:8px; padding:12px 16px 16px; }
.dashboard-status { min-width:0; display:grid; grid-template-columns:24px minmax(0,1fr); grid-template-rows:auto auto; column-gap:8px; padding:9px 10px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:#202b35; }
.dashboard-status:hover { border-color:#536675; background:#25313c; color:var(--ink); }
.dashboard-status-icon { grid-row:1 / span 2; width:22px; height:22px; display:grid; place-items:center; font-size:15px; }
.dashboard-status-main { min-width:0; display:flex; align-items:baseline; gap:6px; }
.dashboard-status-main strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.dashboard-status-main small { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.dashboard-status-count { grid-column:2; display:flex; flex-wrap:wrap; gap:4px 8px; color:var(--muted); font-size:11px; line-height:1.25; }
.status-count { white-space:nowrap; }
.status-count.status-recording { color:#c83232; }.status-count.status-transcribing,.status-count.status-analyzing { color:var(--teal); }
.status-count.status-error { color:var(--danger); }.status-count.status-completed { color:#27826f; }.status-count.status-cancelled { color:var(--danger); }
.dashboard-status-icon.status-recording { position:relative; color:#d83e3e; }
.dashboard-status-icon.status-recording i { display:none; }
.dashboard-status-icon.status-recording::before { content:""; width:13px; height:13px; border-radius:50%; background:#df3f3f; box-shadow:0 0 0 3px rgba(223,63,63,.16); animation:dashboard-recording-pulse 1.35s ease-in-out infinite; }
.dashboard-status-icon.status-waiting { color:#b07920; }
.dashboard-clock { width:22px; height:22px; overflow:visible; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.dashboard-clock > circle:first-child { stroke-width:1.7; }
.dashboard-clock line { stroke:currentColor; }
.dashboard-clock .clock-minute { stroke-width:1.8; }
.dashboard-clock .clock-hour { stroke-width:2.3; }
.dashboard-clock .clock-center { fill:currentColor; stroke:none; }
@keyframes dashboard-recording-pulse { 0%,100% { transform:scale(.82); opacity:.72; } 50% { transform:scale(1.16); opacity:1; } }
:root[data-theme="light"] .sidebar { background:#17212b; }
:root[data-theme="light"] .page-index .section-title, :root[data-theme="light"] .page-progress .section-title, :root[data-theme="light"] .page-transcribtion_settings .section-title { background:#eaf5fb; border-bottom-color:#c9e2ef; }
:root[data-theme="light"] .page-index .section-title h3, :root[data-theme="light"] .page-progress .section-title h3, :root[data-theme="light"] .page-transcribtion_settings .section-title h3 { color:#17658a; }
:root[data-theme="light"] th { background:#fbfcfd; }
:root[data-theme="light"] tbody tr:hover { background:#fcfdfd; }
:root[data-theme="light"] .badge-success { color:#14665e; background:#dff2ee; }:root[data-theme="light"] .badge-muted { color:#627080; background:#edf0f3; }:root[data-theme="light"] .badge-warn { color:#8e5c16; background:#fff0d3; }
:root[data-theme="light"] .alert-danger { color:#8d2929; background:#fde9e7; border-color:#f5c7c3; }:root[data-theme="light"] .alert-success { color:#1d6558; background:#e1f3ef; border-color:#bce4db; }:root[data-theme="light"] .alert-info { color:#245c80; background:#e5f1f8; border-color:#c6deed; }
:root[data-theme="light"] .upload-zone { border-color:#c5d1dc; background:#fbfcfd; }:root[data-theme="light"] .upload-zone:hover { background:#f4fbfa; }
:root[data-theme="light"] .result-card.result-block-tone-a { background:#e9f6f3; }:root[data-theme="light"] .result-card.result-block-tone-b { background:#fff3df; }:root[data-theme="light"] .result-card.result-archived { background:#f1f3f5; }
:root[data-theme="light"] .result-occurrences details { background:#fbfcfd; }
:root[data-theme="light"] .task.block-tone-a { background:#e9f6f3; border-color:#a9d7cf; }:root[data-theme="light"] .task.block-tone-b { background:#fff3df; border-color:#e9c98d; }:root[data-theme="light"] .progress { background:#edf0f3; }
:root[data-theme="light"] .dashboard-status { background:#fbfcfd; }:root[data-theme="light"] .dashboard-status:hover { border-color:#b6c3cf; background:#fff; }
.theme-toggle { color:var(--muted); }
.theme-toggle:hover { color:var(--teal); border-color:var(--teal); }
:root:not([data-theme="light"]) .avatar { background:#254942; color:#9ee3dc; }
:root:not([data-theme="light"]) .station-block-row > strong { background:#2a3540; color:var(--muted); }
:root:not([data-theme="light"]) .stream-toggle { border-color:#3c7771; color:#8ee2d8; background:#173734; }
:root:not([data-theme="light"]) .stream-toggle:hover { background:#1e4944; border-color:#59ada4; }
@media (max-width: 980px) { .shell { grid-template-columns: 1fr; }.sidebar { padding:13px 16px; gap:12px; }.nav { display:flex; overflow:auto; }.nav a { white-space:nowrap; }.sidebar-footer { display:none; }.topbar { padding:0 18px; }.content { padding:24px 18px 40px; }.grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { .grid-4,.grid-2,.form-grid { grid-template-columns:1fr; }.page-head { display:block; }.page-head .actions { margin-top:14px; }.topbar h1 { font-size:17px; }.content { padding-top:20px; }.metric-value { font-size:25px; } th,td { padding:10px 11px; }.station-block-row { grid-template-columns:28px minmax(0,1fr); }.station-block-row > strong { grid-row:span 2; height:100%; } }