:root{
  --bg:#f4f4f1; --card:#ffffff; --sunk:#eeeeea; --text:#15171a; --dim:#686c72; --faint:#9b9fa4; --border:#e4e4df;
  --accent:#0f6b62; --accent-bg:#e2eeeb; --on-accent:#ffffff; --ink:#16191c; --on-ink:#f1f1ec;
  --green:#1f8a4c; --green-bg:#e4f2e9; --brk:#bf5f1e; --brk-bg:#f9e9dc;
  --amber:#a66f12; --amber-bg:#f8efd9; --red:#c03a2d; --red-bg:#f9e5e2; --grey:#80858a; --grey-bg:#eeeeeb;
  --shadow:0 1px 2px rgba(20,23,26,.05),0 8px 24px -12px rgba(20,23,26,.12);
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Consolas,monospace;
  --top:env(safe-area-inset-top,0px); --bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0c0e10; --card:#15181b; --sunk:#1b1f22; --text:#ecedea; --dim:#9aa0a5; --faint:#6c7277; --border:#262a2e;
    --accent:#4db3a5; --accent-bg:#132825; --on-accent:#08120f; --ink:#ecedea; --on-ink:#101315;
    --green:#56c283; --green-bg:#142a1d; --brk:#e58a4a; --brk-bg:#2d1d12;
    --amber:#d8a847; --amber-bg:#2b2413; --red:#e86c5e; --red-bg:#301a17; --grey:#8d9398; --grey-bg:#1e2225;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.dimtxt{color:var(--faint)}

.app{min-height:100%;display:flex;flex-direction:column;max-width:520px;margin:0 auto}
.head{padding:calc(16px + var(--top)) 20px 6px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.head small{font-size:12.5px;color:var(--dim);display:block}
.head b{font-size:20px;font-weight:600;letter-spacing:-.02em}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--on-ink);display:grid;place-items:center;font-weight:600;font-size:13px;flex:none}
.content{flex:1;padding:12px 16px 20px;display:flex;flex-direction:column;gap:12px}
.nav{position:sticky;bottom:0;display:flex;justify-content:space-around;padding:8px 12px calc(10px + var(--bottom));background:var(--card);border-top:1px solid var(--border)}
.nav button{border:0;background:none;padding:6px 18px;font-size:11.5px;font-weight:500;color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:3px}
.nav button[aria-pressed="true"]{color:var(--text)}
.nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.card{background:var(--card);border-radius:20px;padding:16px;box-shadow:var(--shadow)}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--dim);font-weight:500}
.field select,.field input{font:inherit;font-size:16px;color:var(--text);background:var(--sunk);border:1px solid transparent;border-radius:12px;padding:12px;width:100%}
.punch{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:6px 0 4px}
.state{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:999px}
.state::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st-off{color:var(--grey);background:var(--grey-bg)} .st-working{color:var(--green);background:var(--green-bg)} .st-break{color:var(--brk);background:var(--brk-bg)}
.clock{font-family:var(--mono);font-size:44px;font-weight:500;letter-spacing:-.04em;margin-top:6px}
.sub{color:var(--dim);font-size:13px}
.ring{width:156px;height:156px;border-radius:50%;border:0;margin:18px auto 6px;display:grid;place-items:center;font-size:18px;font-weight:600;position:relative;background:var(--accent);color:var(--on-accent);transition:transform .15s}
.ring:active{transform:scale(.97)}
.ring::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1.5px solid var(--accent);opacity:.3}
.ring span{display:block;font-size:11.5px;font-weight:500;opacity:.85;margin-top:2px}
.btn{border:0;border-radius:14px;padding:15px;font-size:16px;font-weight:600;width:100%}
.btn.go{background:var(--accent);color:var(--on-accent)}
.btn.brk{background:var(--brk-bg);color:var(--brk)}
.btn.out{background:var(--ink);color:var(--on-ink)}
.btn.ghost{background:var(--sunk);color:var(--text)}
.btn:disabled{opacity:.5}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.loc{display:flex;gap:12px;align-items:flex-start;font-size:13px}
.loc .dot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:none}
.dot.on{background:var(--green);box-shadow:0 0 0 4px var(--green-bg);animation:pulse 2s infinite}
.dot.pause{background:var(--brk);box-shadow:0 0 0 4px var(--brk-bg)}
.dot.off{background:var(--grey)}
@keyframes pulse{50%{box-shadow:0 0 0 7px var(--green-bg)}}
.loc b{display:block;font-size:14px;font-weight:600}
.loc span{color:var(--dim)}
.list div{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}
.list div:last-child{border-bottom:0}
.list em{font-style:normal;color:var(--dim)}
.chip{display:inline-block;font-size:11px;font-weight:500;padding:2px 7px;border-radius:6px;margin-left:4px}
.c-amber{color:var(--amber);background:var(--amber-bg)} .c-red{color:var(--red);background:var(--red-bg)}
.banner{display:flex;gap:10px;align-items:center;background:var(--amber-bg);color:var(--amber);border-radius:14px;padding:11px 14px;font-size:13px;font-weight:500}
.note{font-size:12.5px;color:var(--dim);text-align:center;padding:4px 12px}
.linkbtn{border:0;background:none;color:var(--dim);text-decoration:underline;text-underline-offset:3px;padding:8px;font-size:14px}

/* login */
.login{flex:1;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:calc(24px + var(--top)) 20px calc(24px + var(--bottom))}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.brand .mark{width:44px;height:44px;border-radius:13px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:14px}
.brand b{font-size:22px;font-weight:600;letter-spacing:-.02em;display:block}
.brand small{color:var(--dim)}
.error{color:var(--red);font-size:14px;margin:0;min-height:1.2em}

/* punch overlay */
.overlay{position:fixed;inset:0;background:rgba(8,10,11,.93);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px;z-index:10}
.cam{width:170px;height:170px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:#1f2524 center/cover no-repeat}
.overlay b{font-size:18px;font-weight:600}
.checks{display:flex;flex-direction:column;gap:9px;font-size:14px;text-align:left;font-family:var(--mono);min-width:230px}
.checks div{opacity:.35;transition:opacity .25s}
.checks div.done{opacity:1}
.checks div.fail{opacity:1;color:#f3a196}

.toast{position:fixed;left:16px;right:16px;bottom:calc(84px + var(--bottom));margin:0 auto;max-width:480px;background:var(--text);color:var(--bg);padding:12px 16px;border-radius:12px;font-size:14px;font-weight:500;z-index:20;box-shadow:var(--shadow)}
.toast.err{background:var(--red);color:#fff}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}