:root{--bg:#f5f5f7;--card:#fff;--ink:#1d1d1f;--sub:#6e6e73;--line:#d2d2d7;--accent:#0071e3;--ok:#34c759;--sos:#ff3b30;--chip:#e8e8ed}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#000;--card:#1c1c1e;--ink:#f5f5f7;--sub:#a1a1a6;--line:#38383a;--accent:#2997ff;--chip:#2c2c2e}}
*{box-sizing:border-box}[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;line-height:1.6}
main{max-width:640px;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 16px 80px}
h1{font-size:32px;margin:6px 0 2px;letter-spacing:.01em}h2{font-size:20px;margin:26px 0 8px}
.sub{color:var(--sub);font-size:14px}
.card{background:var(--card);border-radius:18px;padding:16px;margin:12px 0;overflow-wrap:anywhere}
.btn{display:block;width:100%;border:0;border-radius:14px;padding:14px;font:inherit;font-weight:600;font-size:17px;color:#fff;background:var(--accent);cursor:pointer;margin:10px 0;text-align:center;text-decoration:none}
.btn.gray{background:var(--chip);color:var(--ink)}.btn:disabled{opacity:.45}
input,select{width:100%;font:inherit;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);margin:4px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.tile{background:var(--card);border-radius:20px;padding:14px;min-height:118px;position:relative}
.tile .ic{font-size:30px;line-height:1}.tile b{display:block;margin-top:8px;font-size:16px}
.tile .st{font-size:13px;color:var(--sub);margin-top:2px}
.tile .dot{position:absolute;top:14px;right:14px;width:10px;height:10px;border-radius:50%;background:var(--ok)}
.row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);align-items:center}
.row:last-child{border-bottom:0}.row span:first-child{min-width:0}
.sw{position:relative;width:51px;height:31px;flex:none}.sw input{opacity:0;width:0;height:0}
.sw i{position:absolute;inset:0;background:var(--chip);border-radius:31px;transition:.2s}
.sw i::after{content:"";position:absolute;width:27px;height:27px;left:2px;top:2px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:.2s}
.sw input:checked+i{background:var(--ok)}.sw input:checked+i::after{transform:translateX(20px)}
.ev{font-size:14px;padding:8px 0;border-bottom:1px solid var(--line)}.ev:last-child{border-bottom:0}.ev time{color:var(--sub);font-size:12px;display:block}
.pill{display:inline-block;font-size:12px;padding:2px 10px;border-radius:999px;background:var(--chip);color:var(--sub)}
.pill.in{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.big{font-size:40px;font-weight:700;text-align:center;margin:20px 0 6px}
.msg{font-size:26px;font-weight:700;text-align:center;min-height:2.4em}
.msg.ng{color:var(--sos)}.msg.ok{color:var(--ok)}
#tx{position:fixed;inset:0;z-index:50;display:none;align-items:flex-end;justify-content:center;background:#000;color:#888;font-size:13px;padding:24px;text-align:center}
#tx.on{display:flex}