:root { --bg:#f4f6f5; --card:#fff; --ink:#14201d; --muted:#5b6b66; --brand:#0f766e; --danger:#b42318; --line:#dfe6e3; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#0e1513; --card:#17211e; --ink:#e8f0ed; --muted:#9bb0a9; --brand:#2dd4bf; --danger:#f97066; --line:#2a3834; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width:560px; margin:0 auto; padding:16px; }
h1 { font-size:1.4rem; margin:8px 0 12px; }
h2 { font-size:1.05rem; margin:16px 0 8px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:14px; }
.card > h2:first-child { margin-top:0; }
.muted { color:var(--muted); font-size:.92rem; }
.error { color:var(--danger); }
code { background:var(--bg); padding:1px 6px; border-radius:6px; font-size:.9em; }
ul, ol { padding-left:1.2rem; }
li { margin:6px 0; }
input[type=tel], input[type=text], textarea { width:100%; padding:12px; font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:10px; margin:6px 0 10px; }
button { font:inherit; font-weight:600; padding:12px 16px; border:0; border-radius:10px; background:var(--brand); color:#fff; min-height:44px; cursor:pointer; }
@media (prefers-color-scheme: dark) { button { color:#06201b; } }
button.secondary { background:transparent; color:var(--brand); border:1px solid var(--brand); }
button.danger { background:transparent; color:var(--danger); border:1px solid var(--danger); }
button:disabled { opacity:.5; cursor:default; }
.row { display:flex; gap:10px; flex-wrap:wrap; }
.check { display:flex; gap:10px; align-items:flex-start; margin:10px 0; }
.check input { margin-top:5px; width:18px; height:18px; flex:none; }
.check span { flex:1; min-width:0; }
.code { font:700 2.4rem/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing:.15em; text-align:center; padding:14px 0; background:var(--bg); border-radius:12px; user-select:all; }
.dot { display:inline-block; width:12px; height:12px; border-radius:50%; background:#22c55e; vertical-align:middle; }
.dot.off { background:#9ca3af; }
.dot.warn { background:#f59e0b; }
pre { white-space:pre-wrap; background:var(--bg); padding:12px; border-radius:10px; font:inherit; font-size:.92rem; }
table { width:100%; border-collapse:collapse; font-size:.92rem; }
th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
.tabs { display:flex; gap:6px; margin:0 0 14px; position:sticky; top:0; z-index:5; background:var(--bg); padding:8px 0; border-bottom:1px solid var(--line); }
.tab { flex:1; background:transparent; color:var(--muted); border:1px solid var(--line); border-radius:10px; padding:10px 6px; font-weight:600; }
.tab.active { background:var(--brand); border-color:var(--brand); color:#fff; }
@media (prefers-color-scheme: dark) { .tab.active { color:#06201b; } }
select { width:100%; padding:12px; font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:10px; margin:6px 0 12px; }
.clockrow { display:flex; gap:12px; margin:8px 0 12px; }
.clockrow > div { flex:1; background:var(--bg); border-radius:12px; padding:10px 12px; }
.clock { font:700 1.9rem/1.2 ui-monospace, Menlo, Consolas, monospace; }
.adj { align-items:center; gap:10px; }
.adjval { min-width:64px; text-align:center; font:700 1.1rem ui-monospace, Menlo, Consolas, monospace; }
progress { width:100%; height:10px; margin:4px 0 10px; accent-color:var(--brand); }
.steps { list-style:none; padding:0; margin:12px 0 0; }
.step { display:flex; gap:12px; align-items:flex-start; margin:0; padding:12px 0; border-top:1px solid var(--line); }
.step .tick { flex:none; width:24px; height:24px; border-radius:50%; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; margin-top:2px; }
.step.done .tick { background:var(--brand); border-color:var(--brand); }
@media (prefers-color-scheme: dark) { .step.done .tick { color:#06201b; } }
.step.done b { text-decoration:line-through; opacity:.7; }
.step .example { align-items:center; margin:6px 0; gap:8px; flex-wrap:wrap; }
.step code { font-size:.95em; word-break:break-word; }
button.small { padding:6px 12px; min-height:34px; font-size:.85rem; }
[hidden] { display:none !important; }