:root{--bg:#f6f6f4;--card:#fff;--line:#e5e5e1;--tx:#171717;--mut:#6b6b66;--acc:#171717;--on-acc:#fff;--ok:#1f7a5a;--bad:#c2362b;--warn:#a86b00;color-scheme:light}
@media(prefers-color-scheme:dark){:root{--bg:#0e0e0d;--card:#181817;--line:#2a2a28;--tx:#f2f2ef;--mut:#9a9a94;--acc:#f2f2ef;--on-acc:#0e0e0d;--ok:#4cc194;--bad:#f0675b;--warn:#e0a63c;color-scheme:dark}}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
header{display:flex;align-items:center;gap:.6rem;padding:max(1rem,env(safe-area-inset-top)) 1.2rem .4rem;max-width:640px;margin:0 auto}
header h1{font-size:1rem;font-weight:600;margin:0;flex:1;letter-spacing:.01em}.logo{width:22px;height:22px;fill:none;stroke:var(--tx);stroke-width:2}
main{padding:0 1.2rem 6.5rem;max-width:640px;margin:0 auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.1rem;margin:.75rem 0}
.card h2{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--mut);margin:0 0 .7rem;font-weight:600}
.big{font-size:1.75rem;font-weight:600;letter-spacing:-.02em;margin:.1rem 0}.mut{color:var(--mut);font-size:.9rem}.ok{color:var(--ok)}.bad{color:var(--bad)}.warn{color:var(--warn)}
button{font:inherit;font-weight:500;color:var(--tx);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.65rem 1rem;cursor:pointer;min-height:44px;transition:background .15s,border-color .15s}
button:hover{border-color:var(--mut)}
button.primary{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
button.ghost{background:none;border:0;color:var(--mut);padding:.4rem .6rem;min-height:auto}
button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--tx);outline-offset:2px}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}.row>*{flex:1}
.hold{position:relative;width:100%;min-height:72px;border-radius:12px;border:1px solid var(--bad);background:var(--card);color:var(--bad);overflow:hidden;font-weight:600;user-select:none;-webkit-user-select:none;touch-action:none}
.hold::before{content:"";position:absolute;inset:0;background:var(--bad);transform-origin:left;transform:scaleX(var(--p,0));opacity:.22}
.hold span{position:relative}
input,select{font:inherit;color:var(--tx);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;min-height:44px;width:100%}
label{display:block;font-size:.85rem;color:var(--mut);margin:.55rem 0 .2rem}
.chk{display:flex;gap:.55rem;align-items:center;margin:.35rem 0;color:var(--tx);font-size:.95rem}.chk input{width:18px;height:18px;min-height:auto;accent-color:var(--tx)}
nav{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
nav[hidden]{display:none}nav button{flex:1;max-width:210px;border:0;border-radius:0;background:none;color:var(--mut);min-height:54px}nav button.on{color:var(--tx);font-weight:600}
.logline{display:flex;gap:.7rem;font-size:.85rem;padding:.4rem 0;border-bottom:1px solid var(--line)}.logline:last-child{border:0}.logline time{color:var(--mut);white-space:nowrap}
#toast{position:fixed;left:50%;bottom:5rem;transform:translateX(-50%) translateY(1rem);background:var(--tx);color:var(--bg);padding:.6rem 1rem;border-radius:10px;opacity:0;transition:.2s;pointer-events:none;max-width:90vw;font-size:.9rem}
#toast.show{opacity:1;transform:translateX(-50%)}
#pwahint{position:fixed;inset:0;background:#0007;display:flex;align-items:flex-end;justify-content:center;z-index:9}#pwahint[hidden]{display:none}
.sheet{background:var(--card);border-radius:18px 18px 0 0;padding:1.3rem;width:100%;max-width:520px;position:relative}.sheet h2{margin:0 0 .4rem;font-size:1.1rem}.sheet .x{position:absolute;right:.6rem;top:.6rem}
.sheet ol{padding-left:1.2rem}.sheet li{margin:.45rem 0}.sheet svg{vertical-align:-3px}
.center{text-align:center;padding:3.5rem 0}
.fine{font-size:.85rem}.fine summary{cursor:pointer;color:var(--mut)}details.card{padding:.8rem 1.1rem}details[open] summary{margin-bottom:.4rem}
.overlay{position:fixed;inset:0;background:#0007;display:flex;align-items:flex-end;justify-content:center;z-index:10}.sheet input{margin:.35rem 0}
input:disabled{opacity:.6}