:root{--ink:#111;--bg:#fff;--card:#f3f1ea;--line:#222;--green:#0a5c2e;--red:#a4001f;--gold:#ffd23f;--blue:#0b3d91;--warn:#fff0b3}
*{box-sizing:border-box}
html{font-size:20px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.35}
main{max-width:46rem;margin:0 auto;padding:.75rem 1rem 4rem}
a{color:var(--blue);font-weight:600}
h1{font-size:1.5rem;margin:.6rem 0}h2{font-size:1.2rem;margin:1.4rem 0 .5rem}
header.top{background:#111;color:#fff;padding:.6rem 1rem;display:flex;gap:.75rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
header.top a,header.top button{color:#fff}
nav.tabs{display:flex;gap:.4rem;flex-wrap:wrap;padding:.5rem 1rem;background:var(--gold);border-bottom:3px solid #111}
nav.tabs a{color:#111;text-decoration:none;padding:.5rem .8rem;border:2px solid #111;border-radius:.5rem;background:#fff}
nav.tabs a.on{background:#111;color:#fff}
.card{background:var(--card);border:2px solid var(--line);border-radius:.75rem;padding:.8rem;margin:.7rem 0}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}.row>*{flex:0 1 auto}
.grow{flex:1 1 10rem!important}
label{display:block;font-weight:700;margin:.6rem 0 .2rem}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=datetime-local],select,textarea{width:100%;font:inherit;font-size:1.1rem;padding:.7rem;border:2px solid #111;border-radius:.5rem;background:#fff;color:#111}
input[inputmode=numeric]{letter-spacing:.3em;font-size:1.4rem}
button,.btn{font:inherit;font-weight:800;font-size:1.1rem;min-height:3.2rem;padding:.6rem 1.1rem;border:3px solid #111;border-radius:.6rem;background:#fff;color:#111;cursor:pointer;text-decoration:none;display:inline-block;text-align:center}
button.big{width:100%;min-height:6rem;font-size:1.9rem;margin:.4rem 0}
button.in{background:var(--green);color:#fff}button.out{background:var(--red);color:#fff}
button.sw{background:var(--gold);color:#111}
button.small{min-height:2.6rem;font-size:1rem;padding:.3rem .8rem}
button.danger{background:var(--red);color:#fff}
.timer{font-size:3.2rem;font-weight:800;font-variant-numeric:tabular-nums;text-align:center}
.status{font-size:1.3rem;font-weight:800;text-align:center}.on-clock{color:var(--green)}.off-clock{color:#444}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips input{position:absolute;opacity:0}
.chips label{margin:0;padding:.55rem 1rem;border:2px solid #111;border-radius:2rem;background:#fff;font-weight:700}
.chips input:checked+label{background:#111;color:#fff}
.chips input:focus+label{outline:3px solid var(--blue)}
.flash{padding:.7rem 1rem;border:3px solid #111;border-radius:.6rem;margin:.7rem 0;font-weight:700;background:#d9f2e0}
.flash.err{background:#ffd6d6}
.flag{display:inline-block;background:var(--warn);border:2px solid #111;border-radius:.4rem;padding:0 .4rem;font-weight:800;font-size:.9rem}
.void{text-decoration:line-through;color:#555}
.muted{color:#333;font-size:.9rem}
table{border-collapse:collapse;width:100%}th,td{border-bottom:2px solid #bbb;padding:.4rem .3rem;text-align:left;font-variant-numeric:tabular-nums}
th{background:#eee}td.n,th.n{text-align:right}
.scroll{overflow-x:auto}
.entry{border-bottom:2px solid #bbb;padding:.5rem 0}
.entry b{font-size:1.1rem}
.queue{display:none;background:var(--warn);border:3px solid #111;border-radius:.6rem;padding:.6rem 1rem;margin:.7rem 0;font-weight:700}
.queue.show{display:block}
details summary{cursor:pointer;font-weight:700;padding:.4rem 0}