:root{
  --bg:#f3f5f7; --card:#ffffff; --text:#13202b; --muted:#4c5b69; --line:#d5dde4;
  --brand:#0a6c74; --brand-ink:#ffffff; --brand-soft:#e1f2f3;
  --danger:#c62828; --danger-ink:#ffffff; --danger-soft:#fdecea;
  --warn:#7a4e00; --warn-soft:#fff3d1;
  --ok:#1b6e3a; --ok-soft:#e5f4ea;
  --info-soft:#e7f0fa;
  --c1:#0a6c74; --c2:#c2571a; --band:rgba(10,108,116,.13);
  --radius:16px; --scale:1;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f151b; --card:#18212a; --text:#e9eff4; --muted:#a6b4c0; --line:#2b3947;
    --brand:#3bb6c0; --brand-ink:#04191b; --brand-soft:#123a3e;
    --danger:#ef5350; --danger-ink:#1c0606; --danger-soft:#3a1717;
    --warn:#ffcc66; --warn-soft:#3b2f10;
    --ok:#6fd194; --ok-soft:#14301f; --info-soft:#14283b;
    --c1:#3bb6c0; --c2:#ff9d5c; --band:rgba(59,182,192,.18);
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
a.row{color:inherit;text-decoration:none}
html{font-size:calc(18px * var(--scale));-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:1rem/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding-bottom:calc(78px + env(safe-area-inset-bottom))}
a{color:var(--brand)}
.topbar{position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.6rem;padding:.5rem 1rem;padding-top:calc(.5rem + env(safe-area-inset-top))}
.ttl{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;column-gap:.5rem;row-gap:.15rem}
.topbar h1{font-size:min(1.05rem,4.6vw);margin:0;flex:0 1 auto;min-width:0;line-height:1.15;overflow-wrap:break-word}
.back{display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:12px;border:2px solid var(--line);text-decoration:none;color:var(--text);font-size:1.3rem}
.sos{background:var(--danger);color:var(--danger-ink);text-decoration:none;font-weight:700;padding:.5rem .75rem;border-radius:12px;min-height:44px;display:grid;place-items:center;font-size:min(.9rem,4vw);white-space:nowrap;flex:none}
main{max-width:720px;margin:0 auto;padding:1rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;margin:0 0 .9rem}
h2{font-size:1.2rem;margin:.2rem 0 .6rem}
h3{font-size:1.05rem;margin:1rem 0 .4rem}
p{margin:.4rem 0}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.btn{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:56px;padding:.6rem 1.1rem;border-radius:14px;border:2px solid var(--brand);background:transparent;color:var(--brand);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;width:100%;margin:.3rem 0}
.btn.primary{background:var(--brand);color:var(--brand-ink)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:var(--danger-ink)}
.btn.small{min-height:44px;width:auto;font-size:.9rem;padding:.3rem .9rem;margin:0}
.btn.ghost{border-color:var(--line);color:var(--text)}
.btns{display:flex;gap:.6rem;flex-wrap:wrap}
.btns .btn{flex:1 1 9rem}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.7rem}
.tile{overflow-wrap:anywhere}
.tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.2rem;min-height:84px;padding:.8rem .75rem;font-size:.95rem;border-radius:var(--radius);border:2px solid var(--line);background:var(--card);color:var(--text);font:inherit;font-weight:700;text-decoration:none;cursor:pointer;text-align:left;width:100%}
.tile small{font-weight:400;color:var(--muted)}
.tile.brand{background:var(--brand-soft);border-color:var(--brand)}
.banner{border-radius:14px;padding:.8rem 1rem;margin:0 0 .8rem;border-left:6px solid}
.banner b{display:block}
.banner.danger{background:var(--danger-soft);border-color:var(--danger)}
.banner.warn{background:var(--warn-soft);border-color:var(--warn)}
.banner.ok{background:var(--ok-soft);border-color:var(--ok)}
.banner.info{background:var(--info-soft);border-color:var(--brand)}
.row{display:flex;align-items:center;gap:.8rem;padding:.75rem 0;border-bottom:1px solid var(--line);cursor:pointer}
.row:last-child{border-bottom:0}
.row .grow{flex:1;min-width:0}
.check{width:34px;height:34px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;font-weight:700;color:transparent}
.done .check{background:var(--ok);border-color:var(--ok);color:#fff}
.done .label{color:var(--muted);text-decoration:line-through}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:.3rem .9rem;border-radius:999px;border:2px solid var(--line);background:transparent;color:var(--text);font:inherit;font-size:.9rem;cursor:pointer;margin:0 .35rem .4rem 0}
.chip.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600}
.tag{display:inline-block;padding:.05rem .5rem;border-radius:8px;font-size:.78rem;font-weight:700;margin-left:.3rem}
.tag.danger{background:var(--danger-soft);color:var(--danger)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.syncbadge{flex:none;font-size:min(.75rem,3.2vw);font-weight:700;padding:.15rem .5rem;border-radius:8px;white-space:nowrap}
.syncbadge.ok{color:var(--ok);background:var(--ok-soft)}
.syncbadge.warn{color:var(--warn);background:var(--warn-soft)}
.syncbadge.danger{color:var(--danger);background:var(--danger-soft)}
.syncbadge.info{color:var(--brand);background:var(--info-soft)}
body.gate .tabs{display:none}
.pairing-code{font-size:2.2rem;font-weight:800;letter-spacing:.12em;text-align:center;font-variant-numeric:tabular-nums;margin:.6rem 0;overflow-wrap:anywhere}
.tabs{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:20}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:.5rem .1rem;color:var(--muted);text-decoration:none;font-size:min(.8rem,3.4vw);min-height:60px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabs a.on{color:var(--brand);font-weight:700}
.tabs svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.field{margin:0 0 1rem}
.field>label,.field>.lbl{display:block;font-weight:600;margin-bottom:.3rem}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=tel],input[type=datetime-local],textarea,select{width:100%;min-height:56px;font:inherit;padding:.5rem .8rem;border:2px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text)}
textarea{min-height:90px}
input:focus,textarea:focus,select:focus{outline:3px solid var(--brand);border-color:var(--brand)}
.choices{display:flex;flex-wrap:wrap;gap:.5rem}
.choices label{position:relative;display:block;margin:0;font-weight:400}
.choices input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.choices span{display:block;padding:.6rem 1rem;border:2px solid var(--line);border-radius:12px;min-height:48px;display:flex;align-items:center}
.choices input:checked+span{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600}
.choices input:focus-visible+span{outline:3px solid var(--brand);outline-offset:2px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.6rem}
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheet-box{background:var(--card);width:100%;max-width:720px;max-height:92vh;overflow:auto;border-radius:20px 20px 0 0;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom))}
.sheet-box h2{margin-top:0}
#toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--text);color:var(--bg);padding:.7rem 1.2rem;border-radius:24px;max-width:calc(100vw - 2rem);z-index:60;opacity:0;pointer-events:none;transition:opacity .2s;font-weight:600}
#toast.show{opacity:1}
#toast.has-action{pointer-events:auto;padding:.2rem .4rem .2rem 1.2rem}
.toast-btn{background:transparent;border:0;color:inherit;font:inherit;font-weight:700;text-decoration:underline;min-height:44px;padding:0 .8rem;cursor:pointer}
details{border-bottom:1px solid var(--line);padding:.2rem 0}
details:last-child{border-bottom:0}
summary{cursor:pointer;font-weight:600;padding:.7rem 0;min-height:48px}
summary::marker{color:var(--brand)}
.article h3{margin-top:1.1rem}
.article ul{padding-left:1.2rem;margin:.3rem 0}
.article li{margin:.3rem 0}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:.45rem .4rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.8rem;color:var(--muted);font-weight:600}
.scroll-x{overflow-x:auto}
.chart{width:100%;height:auto;display:block}
.chart text{fill:var(--muted);font-size:13px}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart .band{fill:var(--band)}
.chart .ref{stroke:var(--danger);stroke-dasharray:5 4;stroke-width:1.5}
.chart .s1{stroke:var(--c1);fill:none;stroke-width:2.5;stroke-linejoin:round}
.chart .s2{stroke:var(--c2);fill:none;stroke-width:2.5;stroke-linejoin:round}
.chart .d1{fill:var(--c1)}
.chart .d2{fill:var(--c2)}
.legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:var(--muted);margin:.3rem 0}
.legend i{display:inline-block;width:14px;height:4px;border-radius:2px;margin-right:.35rem;vertical-align:middle}
.legend .l1{background:var(--c1)}.legend .l2{background:var(--c2)}
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(4.2rem,1fr));gap:.4rem;text-align:center;margin:.4rem 0}
.stat div{background:var(--bg);border-radius:10px;padding:.4rem;font-size:.85rem;min-width:0}
.stat b{display:block;font-size:1.05rem}
.demo{background:var(--warn-soft);color:var(--warn);text-align:center;font-weight:700;padding:.3rem;font-size:.85rem}
.big{font-size:1.4rem;font-weight:700}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,summary:focus-visible,.chip:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:8px}
.sheet-box:focus{outline:none}
.card.link{display:block;color:inherit;text-decoration:none;cursor:pointer}
.card.accent{border-color:var(--danger);border-width:2px}
.tag.info{background:var(--info-soft);color:var(--brand)}
.steps{display:flex;gap:4px;margin:.5rem 0}
.steps i{flex:1;height:8px;border-radius:4px;background:var(--line)}
.steps i.on{background:var(--ok)}
.steps i.cur{background:var(--brand)}
.timeline{border-left:3px solid var(--line);margin:.4rem 0 .6rem .5rem;padding-left:.9rem}
.timeline .ev{margin:0 0 .7rem;position:relative}
.timeline .ev::before{content:"";position:absolute;left:-1.3rem;top:.4rem;width:10px;height:10px;border-radius:50%;background:var(--brand)}
.pre{white-space:pre-wrap;background:var(--bg);border:1px dashed var(--line);border-radius:12px;padding:.8rem}
@media print{
  .topbar,.tabs,.noprint,#toast{display:none!important}
  body{background:#fff;color:#000;padding:0;font-size:11pt}
  :root{--card:#fff;--text:#000;--line:#999;--muted:#333}
  .card{border:1px solid #999;break-inside:avoid}
  main{max-width:none;padding:0}
}