:root { --ink:#16202c; --muted:#4a5a6a; --bg:#f5f7fa; --card:#fff; --line:#d5dce4; --brand:#0b3d6b; --brand-ink:#fff; --danger:#a42424; --ok:#146c43; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink); background:var(--bg); }
.top { background:var(--card); border-bottom:1px solid var(--line); padding:12px 20px; display:flex; align-items:center; gap:12px; }
.logo-text { font-weight:700; font-size:1.4rem; color:var(--brand); }
main { max-width:820px; margin:0 auto; padding:24px 16px 48px; }
h1 { font-size:1.65rem; line-height:1.25; margin:.2em 0 .4em; }
h2 { font-size:1.1rem; margin:.1em 0 .6em; }
.lead { color:var(--muted); font-size:1.05rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin:18px 0; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
button { font:inherit; padding:.7em 1.3em; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; min-height:44px; }
button.primary { background:var(--brand); color:var(--brand-ink); border-color:var(--brand); font-weight:600; }
button.danger { background:var(--danger); color:#fff; border-color:var(--danger); font-weight:600; }
button:disabled { opacity:.55; cursor:not-allowed; }
button:focus-visible, input:focus-visible, a:focus-visible, select:focus-visible { outline:3px solid #f0a500; outline-offset:2px; }
.statusbox { min-height:3.5em; }
.status { font-weight:600; margin:.2em 0; }
.detail { color:var(--muted); margin:.2em 0; }
body[data-state="in_progress"] .status::before { content:"●"; color:var(--danger); margin-right:.45em; animation:pulse 1.4s infinite; }
body[data-state="saved"] .status { color:var(--ok); }
body[data-state="mic_denied"] .status, body[data-state="connection_failed"] .status, body[data-state="persistence_failed"] .status { color:var(--danger); }
@keyframes pulse { 50% { opacity:.25; } }
@media (prefers-reduced-motion:reduce) { body[data-state="in_progress"] .status::before { animation:none; } }
.transcript { list-style:none; margin:0; padding:0; max-height:340px; overflow:auto; }
.line { display:flex; gap:10px; padding:6px 0; border-bottom:1px dashed var(--line); }
.who { flex:0 0 5.5em; font-weight:600; color:var(--muted); }
.line.user .who { color:var(--brand); }
.scores { display:grid; grid-template-columns:1fr auto; gap:6px 18px; margin:0 0 12px; }
.scores dt { color:var(--muted); } .scores dd { margin:0; font-weight:700; text-align:right; }
footer { text-align:center; padding:12px; font-size:.9rem; } footer a { color:var(--muted); }
table { width:100%; border-collapse:collapse; background:#fff; } th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); font-size:.95rem; }
th { background:#eef2f6; } .table-wrap { overflow-x:auto; }
.filters { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin:12px 0; } .filters label { display:flex; flex-direction:column; font-size:.85rem; color:var(--muted); }
input, select { font:inherit; padding:.45em .6em; border:1px solid var(--line); border-radius:6px; min-height:40px; }
.badge { padding:2px 8px; border-radius:999px; font-size:.8rem; background:#e7edf3; } .badge.saved { background:#d9f0e3; } .badge.failed, .badge.abandoned { background:#f6dcdc; } .badge.pending, .badge.ended { background:#fff0cc; }
pre.kv { white-space:pre-wrap; word-break:break-word; margin:0; font-family:inherit; }
.pager { display:flex; gap:10px; align-items:center; margin:12px 0; }