:root { --bg:#f5f6f8; --fg:#15181c; --muted:#5f6873; --card:#ffffff; --line:#e1e4e8; --accent:#1458c4; --accent-fg:#ffffff;
        --ok:#127a3f; --bad:#b3261e; --warn:#8a5a00; --rec:#c62828; --shadow:0 1px 2px rgba(0,0,0,.06); }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1215; --fg:#e8eaed; --muted:#9aa3ad; --card:#1a1e23; --line:#2b3138;
        --accent:#5b9bff; --accent-fg:#0b1220; --ok:#4cc27a; --bad:#ff7b72; --warn:#e3b341; --rec:#ef5350; --shadow:none; } }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
main { max-width:640px; margin:0 auto; padding:12px 16px 40px; }
header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 0 8px; }
.head-right { display:flex; align-items:center; gap:8px; }
h1 { font-size:1.2rem; margin:0; font-weight:700; }
h2 { font-size:1rem; margin:0 0 6px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; margin:12px 0; box-shadow:var(--shadow); }
.status { font-size:1.25rem; font-weight:700; font-variant-numeric:tabular-nums; }
.sub { color:var(--muted); font-size:.9rem; margin-top:2px; min-height:1.35em; }
.stack { display:grid; gap:10px; }
.row { display:flex; gap:10px; align-items:center; }
.row > .btn { flex:1; }
label { display:block; font-weight:600; font-size:.95rem; }
input[type=email], input[type=password] { display:block; width:100%; font:inherit; min-height:48px; padding:10px 12px; margin-top:6px;
  border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--fg); }
fieldset { border:none; padding:0; margin:0 0 14px; }
legend { font-weight:600; font-size:.95rem; margin-bottom:8px; }
.seg { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.seg3 { grid-template-columns:repeat(3, 1fr); }
.toggle-row { margin-top:12px; }
.toggle { display:flex; align-items:center; gap:12px; min-height:48px; flex:1; font-weight:600; cursor:pointer; }
.toggle input { width:24px; height:24px; accent-color:var(--accent); flex:none; }
/* preview while recording: "mini" keeps the video rendering (frame callbacks keep firing) but invisible */
video#preview.mini { position:fixed; right:8px; bottom:8px; width:2px; height:2px; max-height:none; opacity:0.01; pointer-events:none; border-radius:0; }
video#preview.small { position:fixed; right:12px; bottom:12px; width:96px; max-height:none; z-index:50; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.4); }
.choice { position:relative; }
.choice input { position:absolute; opacity:0; }
.choice span { display:flex; align-items:center; justify-content:center; min-height:48px; border-radius:12px; border:1px solid var(--line); font-weight:600; cursor:pointer; }
.choice input:checked + span { border-color:var(--accent); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.choice input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
button { font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.btn { min-height:52px; width:100%; border-radius:14px; border:1px solid var(--line); background:var(--card); color:var(--fg); font-weight:600; padding:10px 16px; }
.btn.primary { background:var(--accent); border-color:transparent; color:var(--accent-fg); }
.btn.rec { background:var(--rec); color:#fff; }
.btn.small { min-height:44px; width:auto; padding:6px 14px; font-size:.9rem; margin:8px 8px 0 0; }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.icon { min-width:44px; min-height:44px; border-radius:22px; border:1px solid var(--line); background:var(--card); color:var(--muted);
  font-size:1.15rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.linkbtn { background:none; border:none; color:var(--accent); font-weight:600; min-height:44px; padding:0 4px; }
.hint { color:var(--muted); font-size:.88rem; margin:-2px 4px 0; }
video { width:100%; max-height:38vh; background:#000; border-radius:12px; display:block; }
.stats { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin:12px 0 4px; }
.stats div { display:flex; flex-direction:column; min-width:0; }
.stats .wide { grid-column:1 / -1; }
.label { color:var(--muted); font-size:.8rem; }
.big { font-size:1.4rem; font-weight:700; font-variant-numeric:tabular-nums; }
.muted { color:var(--muted); font-size:.9rem; overflow-wrap:anywhere; }
.error { color:var(--bad); font-weight:600; margin:0; }
.warn { color:var(--warn); font-weight:600; min-height:0; margin:4px 0; }
.warn:empty { display:none; }
.pill { font-size:.8rem; padding:3px 10px; border-radius:99px; border:1px solid var(--line); color:var(--muted); }
.pill.on { color:var(--ok); border-color:var(--ok); } .pill.off { color:var(--bad); border-color:var(--bad); }
ul#sessionList { list-style:none; padding:0; margin:0; }
ul#sessionList li { display:flex; gap:12px; align-items:flex-start; border-top:1px solid var(--line); padding:12px 0; }
ul#sessionList li:first-child { border-top:none; }
ul#sessionList li > div { min-width:0; flex:1; }
ul#sessionList b { display:block; font-weight:600; }
.mark { width:28px; height:28px; flex:none; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:var(--muted); background:color-mix(in srgb, var(--muted) 14%, transparent); }
.mark.ok { color:var(--ok); background:color-mix(in srgb, var(--ok) 14%, transparent); }
.mark.bad { color:var(--bad); background:color-mix(in srgb, var(--bad) 14%, transparent); }
.mark.warn { color:var(--warn); background:color-mix(in srgb, var(--warn) 16%, transparent); }
details summary { cursor:pointer; min-height:44px; display:flex; align-items:center; color:var(--muted); font-weight:600; font-size:.9rem; }
details.more { margin-top:4px; }
#flash { position:fixed; inset:0; background:#fff; z-index:1000; display:none; }
.sheet-bg { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:500; display:none; align-items:flex-end; justify-content:center; }
.sheet-bg.open { display:flex; }
.sheet { background:var(--card); color:var(--fg); width:100%; max-width:640px; max-height:85vh; overflow:auto; border-radius:20px 20px 0 0;
  padding:8px 20px 28px; padding-bottom:calc(28px + env(safe-area-inset-bottom)); }
.sheet-head { display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:var(--card); padding-top:8px; }
.sheet h2 { font-size:1.1rem; margin:0; }
.sheet ol { padding-left:1.25rem; } .sheet li { margin:.45rem 0; }
.sheet p { color:var(--muted); font-size:.92rem; }
[hidden] { display:none !important; }