/* Tally — the mockup's CSS (docs/mockup.html is the design source), plus the
   app-only additions at the end. Tokens on :root for light + dark; dark
   follows the system unless :root[data-theme] forces one. */
[hidden]:not([hidden=until-found i]){display:none!important}
body{margin:0}
/* Layout: a hand-kept squared notebook. Phone = one column + bottom tab bar; desktop = two facing pages per tab. */
:root{
  --bg:#EEF2EC; --grid:#D9E2D6; --paper:#FBFCF8; --ink:#1E2650; --muted:#5E6676; --line:#B9C3B6;
  --wine:#7B1E3A; --wine-soft:#F1DDE3; --beer:#9A6200; --beer-soft:#F6E7C6;
  --alt:#2F6B3F; --alt-soft:#DCEBDD; --bad:#D0342C; --bad-soft:#F8DDD9; --occ:#2B4FA3; --occ-soft:#DEE5F5;
  --vac:#6B7380; --vac-soft:#E4E7E2; --hl:#F4E04D;
  --f-display:"Kalam", "Segoe Print", "Bradley Hand", cursive;
  --f-body:"Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  --f-mono:"Courier Prime", "Courier New", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141A22; --grid:#1E2732; --paper:#19212B; --ink:#E6E9EF; --muted:#9AA4B2; --line:#34404E;
  --wine:#E58BA4; --wine-soft:#3A2230; --beer:#E8B655; --beer-soft:#3A2F17;
  --alt:#7CC98E; --alt-soft:#1D3325; --bad:#FF7A6E; --bad-soft:#40211F; --occ:#8EA9F0; --occ-soft:#1F2B48;
  --vac:#9AA4B2; --vac-soft:#25303C; --hl:#6B5E12; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141A22; --grid:#1E2732; --paper:#19212B; --ink:#E6E9EF; --muted:#9AA4B2; --line:#34404E;
  --wine:#E58BA4; --wine-soft:#3A2230; --beer:#E8B655; --beer-soft:#3A2F17;
  --alt:#7CC98E; --alt-soft:#1D3325; --bad:#FF7A6E; --bad-soft:#40211F; --occ:#8EA9F0; --occ-soft:#1F2B48;
  --vac:#9AA4B2; --vac-soft:#25303C; --hl:#6B5E12; color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--bg)}
body{background-color:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:10px calc(96px + env(safe-area-inset-bottom,0px))}
.wrap{max-width:1080px;margin:0 auto;display:grid;gap:20px}
.page{display:grid;gap:20px}
@media(min-width:880px){.page.two{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start;gap:28px}}
h1,h2,h3{margin:0;text-wrap:balance}
h1{font-family:var(--f-display);font-size:2.1rem;font-weight:700;line-height:1;position:relative;display:inline-block;z-index:0}
h1::after{content:"";position:absolute;left:-2px;right:-6px;bottom:2px;height:.38em;background:var(--hl);z-index:-1;transform:rotate(-1.2deg);opacity:.85}
h2{font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
h3{font-family:var(--f-display);font-size:1.3rem;font-weight:700;line-height:1.15}
.eyebrow{font-family:var(--f-mono);font-size:.78rem;color:var(--muted)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.hand{font-family:var(--f-display);font-weight:700}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px dashed var(--ink);outline-offset:2px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.datenav{display:flex;align-items:center;gap:6px}
.iconbtn{border:1.5px solid var(--ink);background:var(--paper);border-radius:2px;min-width:40px;height:40px;padding:0 10px;font-size:1rem;font-weight:700;box-shadow:2px 2px 0 var(--ink)}
.iconbtn:active{transform:translate(2px,2px);box-shadow:none}
.col{display:grid;gap:18px;min-width:0;align-content:start}
.panel{background:var(--paper);border:1.5px solid var(--ink);border-radius:2px;padding:16px;display:grid;gap:12px;min-width:0}
.panel.quiet{border-style:dashed;border-color:var(--line)}


/* Day header */
.dayhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.dayname{font-family:var(--f-display);font-size:1.6rem;font-weight:700;line-height:1.1}
.chip{display:inline-block;border:2px solid currentColor;border-radius:3px;padding:3px 9px;font-family:var(--f-mono);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;transform:rotate(-4deg);white-space:nowrap}
.chip.clean{color:var(--alt)} .chip.ok{color:var(--wine)} .chip.occ{color:var(--occ)}
.chip.vac{color:var(--vac)} .chip.bad{color:var(--bad)} .chip.none{color:var(--muted);border-style:dashed}
.rule{font-size:.88rem;color:var(--muted)}

/* Streak strip on today */
.strip{display:flex;align-items:center;gap:14px;background:var(--ink);color:var(--paper);border-radius:2px;padding:10px 14px;border:0;text-align:left;width:100%}
.strip .num{font-family:var(--f-display);font-size:2.3rem;font-weight:700;line-height:.9;min-width:1.4ch;text-align:center}
.strip .t{display:grid;gap:4px;flex:1;min-width:0;font-size:.86rem}
.strip .bar{height:6px;background:color-mix(in srgb,var(--paper) 25%,transparent);border-radius:3px;overflow:hidden}
.strip .bar i{display:block;height:100%;background:var(--hl)}

/* Counter: tally marks */
.counter{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);padding-block:10px}
.big{font-family:var(--f-display);font-size:3.2rem;font-weight:700;line-height:.9}
.meter{flex:1 1 100%;min-height:44px}
.meter svg{height:44px;width:auto;max-width:100%;display:block}

/* Tap tiles */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tile{border:1.5px solid var(--ink);border-radius:2px;padding:12px;text-align:left;display:grid;gap:2px;min-height:96px;align-content:space-between;box-shadow:3px 3px 0 var(--ink);transition:transform .06s,box-shadow .06s}
.tile:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.tile:disabled{opacity:.4;box-shadow:none}
.tile .n{font-weight:700;font-size:1.02rem}
.tile .s{font-family:var(--f-mono);font-size:.74rem;color:var(--muted)}
.tile .c{font-family:var(--f-display);font-size:1.7rem;font-weight:700;line-height:1}
.t-wine{background:var(--wine-soft)} .t-wine .c{color:var(--wine)}
.t-b5{background:var(--beer-soft)} .t-b5 .c{color:var(--beer)}
.t-b3{background:var(--paper);background-image:repeating-linear-gradient(-45deg,var(--beer-soft) 0 6px,transparent 6px 12px)} .t-b3 .c{color:var(--beer)}
.t-alt{background:var(--alt-soft);border-style:dashed} .t-alt .c{color:var(--alt)}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1.5px solid var(--ink);background:var(--paper);border-radius:2px;padding:8px 14px;font-weight:700;font-size:.9rem}
.btn.primary{background:var(--ink);color:var(--paper)}
.btn:disabled{opacity:.4;cursor:default}
.checkin{border:2px solid var(--alt);background:var(--alt-soft);color:var(--ink);border-radius:2px;padding:14px;display:grid;gap:2px;text-align:left;box-shadow:3px 3px 0 var(--alt)}
.checkin:active{transform:translate(3px,3px);box-shadow:none}
.checkin b{font-family:var(--f-display);font-size:1.35rem;line-height:1.1;color:var(--alt)}
.checkin span{font-size:.84rem;color:var(--muted)}
.closed{display:flex;align-items:center;gap:12px;border:1.5px dashed var(--alt);padding:10px 12px;color:var(--alt);font-weight:700}
.closed .chip{color:var(--alt)}

/* Craving + segments */
.scale{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));border:1.5px solid var(--ink)}
.scale button{border:0;border-right:1px solid var(--line);background:var(--paper);height:42px;font-family:var(--f-mono);font-size:.92rem;padding:0;border-radius:0}
.scale button:last-child{border-right:0}
.scale button.sel{color:var(--paper);font-weight:700}
.scale-legend{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.72rem;color:var(--muted)}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1.5px solid var(--ink)}
.seg button{border:0;border-right:1px solid var(--line);background:var(--paper);padding:9px 6px;font-size:.9rem;font-weight:700;border-radius:0}
.seg button:last-child{border-right:0}
.seg button.sel{background:var(--ink);color:var(--paper)}
.log{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--f-mono);font-size:.82rem}
.log button{border:0;background:none;padding:2px 0;border-bottom:1px dotted var(--muted);border-radius:0}
.notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.notes label,.field{display:grid;gap:2px;font-family:var(--f-mono);font-size:.74rem;color:var(--muted)}
.notes input,.field input,.field select{font-family:var(--f-display);font-size:1.15rem;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--line);border-radius:0;padding:2px 0;min-width:0;width:100%}
.callout{display:grid;gap:6px}
.callout h2{color:var(--bad)}
.callout p{margin:0;font-size:.92rem}
#lapsePanel{border-color:var(--bad);box-shadow:3px 3px 0 var(--bad)}

/* Progress */
.hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:end}
.hero .num{font-family:var(--f-display);font-size:5rem;font-weight:700;line-height:.8;color:var(--alt)}
.hero .lbl{font-family:var(--f-display);font-size:1.25rem;font-weight:700;line-height:1.1}
.goal{grid-column:1/-1;display:grid;gap:6px;margin-top:8px}
.goalbar{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:3px}
.goalbar i{height:16px;border:1.5px solid var(--alt);border-radius:1px}
.goalbar i.on{background:var(--alt)}
.week{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.wd{border:1.5px solid var(--line);aspect-ratio:1;max-width:100%;display:grid;place-items:center;align-content:center;gap:0;font-family:var(--f-mono);font-size:.78rem;color:var(--muted)}
.wd b{font-family:var(--f-display);font-size:1.7rem;line-height:1}
.wd.win{border-color:var(--alt);background:var(--alt-soft);color:var(--alt)}
.wd.miss{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}
.wd.today{border-style:dashed;border-color:var(--ink);color:var(--ink)}
/* Weeks: the main unit of progress */
.weekcard{display:grid;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.weekcard:last-child{border-bottom:0}
.weekcard.big{background:var(--paper);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:16px;gap:14px;border-radius:2px}
.weekcard.big .eyebrow{background:var(--hl);color:var(--ink);justify-self:start;padding:1px 8px;font-weight:700}
.wc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.wc-head>div{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.wc-n{font-family:var(--f-display);font-weight:700;font-size:1.6rem;line-height:1}
.big .wc-n{font-size:3rem}
.wc-d{font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}
.wdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.wday{border:1.5px solid var(--line);background:var(--paper);border-radius:2px;padding:4px 0;display:grid;justify-items:center;gap:0;min-width:0}
.wday span{font-family:var(--f-mono);font-size:.66rem;color:var(--muted)}
.wday b{font-family:var(--f-display);font-size:1.1rem;line-height:1.2;min-height:1.2em}
.big .wday{padding:8px 0}.big .wday b{font-size:1.6rem}
.wday.wkend{margin-left:6px}
.wday.clean{background:var(--alt-soft);border-color:var(--alt);color:var(--alt)}
.wday.ok{background:var(--wine-soft);border-color:var(--wine);color:var(--wine)}
.wday.occ{background:var(--occ-soft);border-color:var(--occ);color:var(--occ)}
.wday.vac{background:var(--vac-soft);color:var(--vac)}
.wday.bad{background:var(--bad);border-color:var(--bad);color:var(--paper)}.wday.bad span{color:var(--paper)}
.wday.pend{border:1.5px dashed var(--ink)}
.wday.future,.wday.pre{border-style:dashed;background:transparent}
.wday.today{outline:2px solid var(--ink);outline-offset:1px}
.wc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px dashed var(--line);padding-top:8px}
.wc-stats div{display:grid;gap:0}
.wc-stats b{font-family:var(--f-display);font-size:1.4rem;line-height:1}
.big .wc-stats b{font-size:2.1rem}
.wc-stats .over b{color:var(--bad)}
.wc-stats small{font-size:.6em;color:var(--muted)}
.wc-stats span{font-size:.74rem;color:var(--muted)}
.wk-s{font-family:var(--f-mono);font-size:.72rem;font-weight:700;text-transform:uppercase;border:2px solid currentColor;padding:2px 7px;transform:rotate(-4deg);white-space:nowrap}
.big .wk-s{font-size:.9rem;padding:4px 10px}
.wk-s.win{color:var(--alt)}.wk-s.part{color:var(--beer)}.wk-s.bad{color:var(--bad)}.wk-s.now{color:var(--ink);border-style:dashed}
/* Month calendar */
.cal{display:grid;grid-template-columns:30px repeat(7,minmax(0,1fr));gap:3px;align-items:stretch}
.ch{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);text-align:center;padding-bottom:2px}
.ch.we{color:var(--ink);font-weight:700}
.cw{font-family:var(--f-display);font-weight:700;font-size:.9rem;color:var(--muted);display:grid;place-items:center;border-radius:2px}
.cw.won{color:var(--alt)}
.cw.cur{background:var(--hl);color:var(--ink)}
.cd{aspect-ratio:1;max-width:100%;border:1px solid var(--line);background:var(--paper);border-radius:1px;padding:2px 3px;display:grid;grid-template-rows:auto 1fr;text-align:left;min-width:0}
.cd .dn{font-family:var(--f-mono);font-size:.66rem;color:var(--muted);line-height:1}
.cd b{font-family:var(--f-display);font-size:1.15rem;line-height:1;align-self:center;justify-self:center}
.cd.clean{background:var(--alt-soft);border-color:var(--alt);color:var(--alt)}
.cd.ok{background:var(--wine-soft);border-color:var(--wine);color:var(--wine)}
.cd.occ{background:var(--occ-soft);border-color:var(--occ);color:var(--occ)}
.cd.vac{background:var(--vac-soft);color:var(--vac)}
.cd.bad{background:var(--bad);border-color:var(--bad);color:var(--paper)}.cd.bad .dn{color:var(--paper)}
.cd.future,.cd.pre{background:transparent;border-style:dashed}
.cd.pend{border:1.5px dashed var(--ink)}
.cd.out{opacity:.38}
.cd.curw{box-shadow:inset 0 -3px 0 var(--hl)}
.cd.today{outline:2px solid var(--ink);outline-offset:1px}
.weeks{display:grid}
.wk{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.7fr)) auto;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.wk-n{display:grid;min-width:0}.wk-n b{font-family:var(--f-display);font-size:1.2rem;line-height:1}.wk-n span{font-family:var(--f-mono);font-size:.72rem;color:var(--muted)}
.wk-v{display:grid;text-align:center}.wk-v b{font-family:var(--f-display);font-size:1.25rem;line-height:1}.wk-v span{font-family:var(--f-mono);font-size:.66rem;color:var(--muted)}
.wk-s{font-family:var(--f-mono);font-size:.7rem;font-weight:700;text-transform:uppercase;border:1.5px solid currentColor;padding:2px 6px;transform:rotate(-3deg);white-space:nowrap}
.wk-s.win{color:var(--alt)}.wk-s.part{color:var(--beer)}.wk-s.bad{color:var(--bad)}.wk-s.now{color:var(--muted);border-style:dashed}
@media(max-width:420px){.wk{grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,.6fr))}.wk-s{grid-column:1/-1;justify-self:start}}
.gains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gains div{padding:10px 6px;display:grid;gap:2px;border-right:1px solid var(--line)}
.gains div:last-child{border-right:0}
.gains b{font-family:var(--f-display);font-size:1.6rem;line-height:1;color:var(--alt)}
.gains span{font-size:.74rem;color:var(--muted)}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.badge{display:grid;justify-items:center;gap:6px;text-align:center;padding:4px}
.seal{width:72px;height:72px;border-radius:50%;border:2.5px dashed var(--line);display:grid;place-items:center;font-family:var(--f-mono);font-size:.76rem;color:var(--muted);transform:rotate(-6deg)}
.badge.on .seal{border:3px double var(--alt);color:var(--alt);background:var(--alt-soft);font-family:var(--f-display);font-size:1.25rem;font-weight:700}
.badge .bt{font-size:.78rem;font-weight:700;line-height:1.2}
.badge .bd{font-family:var(--f-mono);font-size:.68rem;color:var(--muted)}
.grid8{display:grid;grid-template-columns:40px repeat(7,minmax(0,1fr));gap:3px;align-items:center}
.grid8 .h{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);text-align:center}
.grid8 .w{font-size:.7rem;color:var(--muted);font-family:var(--f-mono)}
.cell{aspect-ratio:1;max-width:100%;border-radius:0;border:1px solid var(--line);padding:0;font-family:var(--f-display);font-weight:700;font-size:.95rem;display:grid;place-items:center;background:var(--paper);color:var(--muted)}
.cell.clean{background:var(--alt-soft);color:var(--alt);border-color:var(--alt)}
.cell.ok{background:var(--wine-soft);color:var(--wine);border-color:var(--wine)}
.cell.occ{background:var(--occ-soft);color:var(--occ);border-color:var(--occ)}
.cell.vac{background:var(--vac-soft);color:var(--vac)}
.cell.bad{background:var(--bad);color:var(--paper);border-color:var(--bad)}
.cell.future{background:transparent;border:1px dashed var(--line)}
.cell.cur{outline:2px solid var(--ink);outline-offset:1px}
.legend{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:.76rem;color:var(--muted)}
.legend i{display:inline-block;width:11px;height:11px;margin-right:4px;vertical-align:-1px}
.chart svg{width:100%;height:auto;display:block}
.small{font-size:.8rem;color:var(--muted);margin:0}

/* Settings + account */
.settings{display:grid;gap:10px}
.srow{display:grid;grid-template-columns:1fr 64px 60px 60px;gap:8px;align-items:center;font-size:.84rem}
.srow input,.sfield input{font-family:var(--f-mono);font-size:.9rem;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--line);border-radius:0;padding:4px 2px;min-width:0;width:100%}
.sfield{display:grid;grid-template-columns:1fr 150px;gap:8px;align-items:center;font-size:.88rem}
.list{display:grid;border-top:1px solid var(--line)}
.li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.li .who{display:grid;gap:0;min-width:0}
.li .who b{font-size:.95rem}
.li .who span{font-family:var(--f-mono);font-size:.74rem;color:var(--muted)}
.tag{font-family:var(--f-mono);font-size:.7rem;border:1px solid currentColor;padding:1px 6px;border-radius:2px;color:var(--muted)}
.tag.admin{color:var(--wine)} .tag.ex{color:var(--occ);border-style:dashed}
.invite{font-family:var(--f-mono);font-size:.82rem;background:var(--bg);border:1px dashed var(--ink);padding:10px;word-break:break-all}

/* Login */
.login{max-width:400px;margin:4vh auto 0;display:grid;gap:18px;text-align:center}
.fp{width:120px;height:120px;margin:0 auto;border:1.5px solid var(--ink);border-radius:50%;background:var(--paper);display:grid;place-items:center;box-shadow:3px 3px 0 var(--ink)}
.fp:active{transform:translate(3px,3px);box-shadow:none}
.fp svg{width:64px;height:64px}
.linkbtn{background:none;border:0;text-decoration:underline;color:var(--muted);font-size:.86rem;padding:0}

/* Bottom tab bar */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--paper);border-top:1.5px solid var(--ink);
  padding:6px max(16px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.tabs .in{max-width:520px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.tabs button{border:0;background:none;padding:8px 4px;display:grid;justify-items:center;gap:2px;font-size:.78rem;font-weight:700;color:var(--muted);border-radius:2px}
.tabs button svg{width:22px;height:22px}
.tabs button.sel{color:var(--ink);background:var(--hl)}

/* Toast + overlays */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:2px;font-size:.88rem;z-index:30;display:flex;gap:12px;align-items:center;box-shadow:3px 3px 0 var(--wine);max-width:calc(100% - 32px)}
.toast button{background:none;border:0;color:var(--paper);text-decoration:underline;font-weight:700;padding:0}
.overlay{position:fixed;inset:0;background:var(--bg);z-index:40;display:grid;place-items:center;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px;
  padding:calc(24px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));overflow:auto}
.ov{max-width:440px;width:100%;display:grid;gap:18px;text-align:center;background:var(--paper);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:24px 20px}
.clock{font-family:var(--f-mono);font-size:4rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.mantra{font-family:var(--f-display);font-size:1.5rem;font-weight:700;min-height:3.4em;display:grid;place-items:center;text-wrap:balance;line-height:1.2}
.steps{text-align:left;display:grid;gap:6px;font-size:.92rem;margin:0;padding-left:1.4em}
.steps li::marker{color:var(--muted);font-family:var(--f-mono)}
.stampov{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 82%,transparent);padding:24px max(20px,env(safe-area-inset-left,0px))}
.stamp{border:5px double var(--alt);color:var(--alt);background:var(--paper);padding:20px 26px;text-align:center;display:grid;gap:6px;transform:rotate(-7deg);max-width:340px;animation:thud .32s cubic-bezier(.2,1.6,.4,1) both}
.stamp .st{font-family:var(--f-mono);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:1.05rem}
.stamp .sn{font-family:var(--f-display);font-weight:700;font-size:3.6rem;line-height:.9}
.stamp .ss{font-family:var(--f-display);font-size:1.15rem;color:var(--ink);text-wrap:balance}
.stamp .sx{font-size:.84rem;color:var(--muted)}
@keyframes thud{from{transform:rotate(-14deg) scale(1.9);opacity:0}to{transform:rotate(-7deg) scale(1);opacity:1}}
.sync{font-family:var(--f-mono);font-size:.74rem;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- App additions (not in the mockup) ---- */
a{color:inherit}
a.btn,a.iconbtn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ink)}
a.btn.primary{color:var(--paper)}
.tabs a{display:grid;justify-items:center;gap:2px;padding:8px 4px;font-size:.78rem;font-weight:700;color:var(--muted);border-radius:2px;text-decoration:none}
.tabs a svg{width:22px;height:22px}
.tabs a[aria-current="page"]{color:var(--ink);background:var(--hl)}
form{margin:0}
form.inline{display:inline}
.stack{display:grid;gap:14px}
.field input[type=password],.field input[type=text]{font-family:var(--f-mono);font-size:1rem}
.error-msg{color:var(--bad);font-weight:700;margin:0;font-size:.9rem}
.notice-msg{color:var(--alt);margin:0;font-size:.9rem}
.login details{display:grid;gap:14px}
.login summary{list-style:none;cursor:pointer;text-decoration:underline;color:var(--muted);font-size:.86rem}
.login summary::-webkit-details-marker{display:none}
.login details[open] summary{margin-bottom:14px}
.login form{display:grid;gap:14px;text-align:left}
.login .field{text-align:left}
.fp-label{font-size:1.3rem}
.env{font-family:var(--f-mono);font-size:.7rem;color:var(--occ);border:1px dashed var(--occ);padding:1px 6px;border-radius:2px}
.copyrow{display:flex;gap:8px;flex-wrap:wrap}