:root { --bg:#f4f5f7; --fg:#15171a; --card:#fff; --muted:#5b6470; --line:#d9dde3; --accent:#1f6feb; --danger:#c62828; --ok:#1b7f3b; --warn:#9a6700; }
@media (prefers-color-scheme: dark) { :root { --bg:#0e1013; --fg:#e8eaed; --card:#171a1f; --muted:#9aa3ad; --line:#2a2f37; --accent:#4c8dff; --danger:#ef5350; --ok:#43c06a; --warn:#e0a84a; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
.wrap { max-width: 560px; margin: 0 auto; padding: 16px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.top { display:flex; justify-content:space-between; align-items:center; gap:12px; }
h1 { font-size: 1.4rem; margin: 8px 0 12px; }
h2 { font-size: 1.05rem; margin: 0 0 10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin:12px 0; }
label { display:block; margin:10px 0; font-size:.92rem; color:var(--muted); }
label input, label select { display:block; width:100%; margin-top:4px; padding:12px; font-size:1rem; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:8px; min-height:44px; }
input[readonly] { width:100%; padding:12px; font-size:.9rem; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:8px; }
.check { display:flex; gap:10px; align-items:center; color:var(--fg); min-height:44px; }
.check input { width:22px; height:22px; margin:0; min-height:0; }
button { font:inherit; border:1px solid var(--line); background:var(--card); color:var(--fg); border-radius:10px; padding:10px 14px; min-height:44px; cursor:pointer; }
button.big { width:100%; font-size:1.05rem; margin-top:8px; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.danger { background:var(--danger); border-color:var(--danger); color:#fff; }
button.small { flex:1; }
button.link { border:0; background:none; color:var(--accent); min-height:44px; padding:0 4px; }
button:disabled { opacity:.5; cursor:not-allowed; }
.row { display:flex; gap:10px; margin-top:8px; }
.row .big { margin-top:0; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.chip { padding:6px 10px; border-radius:999px; border:1px solid var(--line); font-size:.88rem; }
.chip[data-s="ok"] { border-color:var(--ok); color:var(--ok); }
.chip[data-s="warn"] { border-color:var(--warn); color:var(--warn); }
.chip[data-s="bad"] { border-color:var(--danger); color:var(--danger); }
.muted { color:var(--muted); font-size:.88rem; margin:6px 0; }
.err { color:var(--danger); font-size:.92rem; margin:8px 0; word-break:break-word; }
.banner { background:var(--card); border:1px solid var(--warn); color:var(--warn); border-radius:10px; padding:10px 12px; margin:10px 0; font-size:.92rem; }
.list { list-style:none; padding:0; margin:0 0 8px; font-size:.92rem; }
.list li { padding:8px 0; border-bottom:1px solid var(--line); word-break:break-all; }

video { width: 100%; max-height: 70vh; background: #000; border-radius: 8px; margin: 8px 0; }