:root{--bg:#0f1115;--card:#1a1d24;--card2:#232733;--text:#eef0f4;--muted:#9aa3b2;--border:#2c313d;--accent:#4f8cff;--accent-text:#fff;--neg:#ff6b6b;--pos:#3ecf8e;--warn:#f5b942;--radius:16px;font-size:16px}
html.text-large{font-size:18px}
html.text-xl{font-size:20px}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.45;-webkit-font-smoothing:antialiased;min-height:100vh;transition:background .2s}
#app{max-width:520px;margin:0 auto;padding:16px 16px calc(92px + env(safe-area-inset-bottom))}
header.top{display:flex;justify-content:space-between;align-items:center;padding:4px 2px 14px}
.brand{font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.brand span{color:var(--accent)}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:14px}
.hero .big{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;margin-top:2px;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:.82rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.stat{background:var(--card2);border-radius:12px;padding:10px 8px;min-width:0}
.stat b{display:block;font-size:.9rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stat span{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.neg{color:var(--neg)}
.pos{color:var(--pos)}
.warn{margin-top:12px;background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--text);border-left:3px solid var(--warn);padding:8px 10px;border-radius:8px;font-size:.88rem}
.warnbox{border-color:var(--warn)}
.btn{appearance:none;border:0;background:var(--accent);color:var(--accent-text);font:inherit;font-weight:700;padding:12px 16px;border-radius:12px;cursor:pointer;width:100%;transition:transform .05s,opacity .15s}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn.danger{background:var(--neg);color:#fff}
.btn.sm{padding:8px 12px;font-size:.85rem;width:auto}
.btn:disabled{opacity:.4;cursor:default}
.row{display:flex;gap:10px;margin-bottom:14px}
h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:18px 2px 10px}
.card h3:first-child{margin-top:0}
.shift{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:10px;cursor:pointer}
.shift:hover{border-color:var(--accent)}
.shift-top{display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{font-size:.72rem;padding:3px 8px;border-radius:999px;background:var(--card2);color:var(--muted)}
.chip.flag{background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--text)}
.chip.bad{background:color-mix(in srgb,var(--neg) 20%,transparent);color:var(--text)}
.clock{display:flex;align-items:center;justify-content:space-between;gap:12px}
.clock .btn{width:auto;min-width:128px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--pos);margin-right:6px;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}
nav.tabs{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--border);display:flex;justify-content:center;padding-bottom:env(safe-area-inset-bottom);z-index:10}
nav.tabs .in{display:flex;max-width:520px;width:100%}
nav.tabs button{flex:1;background:none;border:0;color:var(--muted);font:inherit;font-size:.68rem;padding:10px 0 9px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
nav.tabs button svg{width:22px;height:22px}
nav.tabs button.on{color:var(--accent);font-weight:700}
.empty{text-align:center;padding:28px 16px;color:var(--muted);border:1px dashed var(--border);border-radius:14px}
label{display:block;font-size:.78rem;color:var(--muted);margin:10px 0 4px}
input,select,textarea{width:100%;font:inherit;color:var(--text);background:var(--card2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
input[type=color]{padding:2px;height:42px;width:80px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.fgrid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 10px}
.ftime{display:grid;grid-template-columns:1fr 1fr 4.6rem;gap:0 8px}
.ftime input{padding:10px 8px}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:flex-end;justify-content:center;z-index:20}
#modal.open{display:flex}
#modal .sheet{background:var(--bg);width:100%;max-width:520px;max-height:92vh;overflow:auto;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--border)}
.sheet h2{font-size:1.15rem;margin-bottom:6px}
.ded-row{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px;margin-top:8px}
.ded-row label:first-child{margin-top:0}
.ded-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:.82rem}
.ded-foot label{margin:0;display:flex;gap:8px;align-items:center;color:var(--text);font-size:.82rem}
.link{background:none;border:0;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;padding:6px 0}
.link.neg{color:var(--neg)}
.preview{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:6px 12px;margin-top:14px}
.preview:empty{display:none}
.bar-row{display:grid;grid-template-columns:40px 1fr 96px;align-items:center;gap:10px;padding:6px 0;font-size:.85rem;font-variant-numeric:tabular-nums}
.bar{height:10px;background:var(--card2);border-radius:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:6px}
.pager{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px}
.pager strong{font-size:1rem;text-align:center}
.kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);font-size:.92rem;font-variant-numeric:tabular-nums}
.kv:last-child{border-bottom:0}
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.swatch{border:2px solid var(--border);border-radius:12px;padding:10px;cursor:pointer;font:inherit;font-size:.8rem;text-align:left}
.swatch.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.swatch i{display:block;height:18px;border-radius:6px;margin-bottom:6px}
.seg{display:flex;background:var(--card2);border-radius:10px;padding:3px}
.seg button{flex:1;background:none;border:0;color:var(--muted);font:inherit;font-size:.88rem;padding:8px;border-radius:8px;cursor:pointer}
.seg button.on{background:var(--card);color:var(--text);font-weight:700}
details.period summary{list-style:none;cursor:pointer}
details.period summary::-webkit-details-marker{display:none}
details.period[open] summary{padding-bottom:10px;border-bottom:1px solid var(--border)}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:999px;font-size:.88rem;opacity:0;transition:opacity .2s;pointer-events:none;z-index:50;max-width:90vw;text-align:center}
#toast.show{opacity:1}
#lock{position:fixed;inset:0;background:var(--bg);display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:40;padding:24px}
#lock.open{display:flex}
#lock input{max-width:220px;text-align:center;font-size:1.6rem;letter-spacing:.4em}
#print{display:none}
@media (max-width:360px){.grid3{grid-template-columns:1fr 1fr}.fgrid3{grid-template-columns:1fr 1fr}}
@media print{
  #app,nav.tabs,#modal,#toast,#lock{display:none!important}
  body{background:#fff}
  #print{display:block;color:#000;background:#fff;font:11px/1.4 system-ui,sans-serif;padding:8mm}
  #print h1{font-size:18px;margin-bottom:2px}
  #print h2{font-size:13px;margin:16px 0 4px}
  #print table{width:100%;border-collapse:collapse;margin-top:6px}
  #print th,#print td{border-bottom:1px solid #ccc;padding:4px 6px;text-align:left;vertical-align:top}
  #print th{background:#f2f2f2}
  #print .n{text-align:right;white-space:nowrap}
  #print .foot{margin-top:14px;color:#555}
}

/* ---- phase 2: deductions ---- */
.ded-checks{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.ded-checks label{margin:0;display:flex;gap:8px;align-items:center;color:var(--text);font-size:.85rem}
.ded-checks label[hidden]{display:none}
.ded-flags{display:flex;flex-wrap:wrap;gap:4px}
.flagbanner{cursor:pointer}
.flagrow{border-bottom:1px solid var(--border);padding:10px 0}
.flagrow:last-of-type{border-bottom:0}
.flagrow summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer}
.flagrow summary::-webkit-details-marker{display:none}
.fl-dot{width:10px;height:10px;border-radius:50%;background:var(--warn);flex:none}
.fl-main{display:flex;flex-direction:column;flex:1;min-width:0}
.fl-law{color:var(--muted);white-space:nowrap}
.legend{display:flex;gap:14px;align-items:center;margin-top:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.bar-row.wide{grid-template-columns:7.5rem 1fr 5.5rem}
.action-list{display:flex;flex-direction:column;gap:8px}
.action{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;color:var(--text);font:inherit;cursor:pointer}
.action:hover{border-color:var(--accent)}
.action strong::after{content:' ›';color:var(--accent)}
.ded-item{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:10px;cursor:pointer}
details.rights{padding:12px 14px;margin-bottom:10px}
details.rights summary{cursor:pointer}
.rights-body{font-size:.9rem;margin-top:8px}
.rights-body p,.rights-body ul,.rights-body ol{margin:0 0 8px}
.rights-body ul,.rights-body ol,details.rights ul{padding-left:20px}
.rights-body li{margin-bottom:4px}
.rights a,details.rights a{color:var(--accent)}
#print code{font-size:9px;word-break:break-all}

/* ---- v0.3: two flag levels, owed card ---- */
.chip.q{background:color-mix(in srgb,var(--q) 18%,transparent);color:var(--text)}
.flagrow.question .fl-dot{background:var(--q)}
.flaggroup+.flaggroup{margin-top:14px}
.fg-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--warn);font-weight:700;margin-bottom:2px}
.fg-title.q{color:var(--q)}
.warn.q{background:color-mix(in srgb,var(--q) 14%,transparent);border-left-color:var(--q)}
.qbox{border-color:var(--q)}
.owed{border-color:var(--warn)}
.owed .big{font-size:2rem;font-weight:800;letter-spacing:-.02em;margin-bottom:6px;font-variant-numeric:tabular-nums}

/* ---- v0.4: discreet mode, quick-hide, switches ---- */
.top-right{display:flex;align-items:center;gap:10px}
.hide-btn{background:var(--card2);border:1px solid var(--border);color:var(--text);border-radius:10px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer}
.hide-btn svg{width:18px;height:18px}
#cover{position:fixed;inset:0;background:#f7f7f5;color:#222;z-index:60;display:none;font-family:system-ui,sans-serif}
#cover.open{display:block}
.cover-in{max-width:520px;margin:0 auto;padding:28px 18px}
.cover-title{font-size:1.9rem;font-weight:700;margin-bottom:18px;user-select:none;cursor:default}
.cover-note{background:#fff;border:1px solid #e6e6e2;border-radius:12px;padding:12px 14px;margin-bottom:10px}
.cover-note .muted{color:#888}
.cover-hint{margin-top:24px;color:#aaa}
.switch-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:0;color:var(--text);cursor:pointer}
.switch-row>span{display:flex;flex-direction:column;gap:2px}
.switch-row input{width:22px;height:22px;flex:none}

/* ---- v0.5: tip payouts ---- */
.tipcard .mid{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tipcard .shift-top{align-items:center}
.payout-list{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.payout-row{display:grid;grid-template-columns:22px 1fr auto auto;gap:10px;align-items:center;margin:0;padding:10px 12px;background:var(--card);border:1px solid var(--border);border-radius:12px;color:var(--text);font-size:.9rem;font-variant-numeric:tabular-nums;cursor:pointer}

/* ---- v0.6: sticky notes ---- */
nav.tabs button{font-size:.62rem;padding:10px 0 9px}
.fab{position:fixed;right:max(16px,calc(50% - 244px));bottom:calc(76px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:6px;background:#fde68a;color:#3b2f05;border:0;border-radius:999px;padding:12px 16px 12px 13px;font:inherit;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.35);cursor:pointer;z-index:9}
.fab svg{width:18px;height:18px}
.note-search{margin-bottom:10px}
.note-filters{margin:0 0 14px}
.note-filters .chip{border:0;cursor:pointer;font:inherit;font-size:.75rem;padding:5px 10px}
.note-filters .chip.on{background:var(--accent);color:var(--accent-text)}
.note-board{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sticky{background:var(--note);color:#2b2410;border-radius:4px 4px 14px 4px;padding:14px 12px 10px;box-shadow:0 4px 12px rgba(0,0,0,.28);transform:rotate(var(--tilt));cursor:pointer;position:relative;min-height:120px;display:flex;flex-direction:column;transition:transform .15s}
.sticky::before{content:'';position:absolute;top:-7px;left:50%;width:42px;height:14px;margin-left:-21px;background:rgba(255,255,255,.55);border-radius:2px;transform:rotate(-2deg)}
.sticky:hover{transform:rotate(0) scale(1.02)}
.sticky-cat{font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;opacity:.7;font-weight:700;margin-bottom:4px}
.sticky-title{font-weight:800;font-size:.95rem;line-height:1.25;margin-bottom:4px}
.sticky-text{font-size:.86rem;line-height:1.4;white-space:pre-wrap;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;flex:1}
.sticky-text.full{display:block;-webkit-line-clamp:unset;overflow:visible}
.sticky-foot{font-size:.64rem;opacity:.65;margin-top:8px}
.sticky.big{cursor:default;margin:6px 0 14px;min-height:0}
.sticky.big:hover{transform:none}
.sticky-people{font-size:.82rem;margin-top:10px}
.note-stamps{margin-bottom:10px}
.versions{padding:12px 14px}
.versions summary{cursor:pointer}
.version{border-top:1px solid var(--border);padding:10px 0 4px;margin-top:10px}
.note-colours{display:flex;gap:8px;padding-top:4px}
.nc{margin:0;cursor:pointer}
.nc input{position:absolute;opacity:0;pointer-events:none}
.nc span{display:block;width:30px;height:30px;border-radius:8px;background:var(--c);border:2px solid transparent}
.nc input:checked+span{border-color:var(--text);box-shadow:0 0 0 2px var(--bg) inset}
@media print{.fab{display:none!important}}

/* ---- v0.6.1: Note button in the Home row instead of floating ---- */
.home-actions{gap:8px}
.home-actions .btn{width:auto;flex:1 1 0;min-width:0;padding:12px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-actions .btn:first-child{flex:1.25 1 0}
.home-actions .note-btn{flex:0 0 auto;background:#fde68a;color:#3b2f05;padding:12px 14px}

/* ---- v0.8: photo evidence ---- */
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.photo-strip:empty{display:none}
.photo-thumb{border:1px solid var(--border);background:var(--card);border-radius:10px;padding:0;overflow:hidden;cursor:pointer;color:var(--text);font:inherit;text-align:left}
.photo-thumb img{display:block;width:100%;height:84px;object-fit:cover}
.photo-thumb span{display:block;font-size:.66rem;line-height:1.3;padding:5px 6px;color:var(--muted)}
.photo-btns .btn{font-size:.78rem;padding:7px 10px}
#photo-viewer{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:30;display:none;align-items:center;justify-content:center;padding:16px}
#photo-viewer.open{display:flex}
.photo-view{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:12px;max-width:520px;width:100%;max-height:94vh;overflow:auto}
.photo-view img{display:block;width:100%;max-height:58vh;object-fit:contain;border-radius:10px;background:#000;margin-bottom:8px}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:.8rem}
.ev-photos{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.ev-photos figure{margin:0;break-inside:avoid}
.ev-photos img{width:100%;max-height:220px;object-fit:contain;border:1px solid #ccc}
.ev-photos figcaption{font-size:9px;line-height:1.35}
.ev-photos code{font-size:7px;word-break:break-all}

/* ---- v0.9: goals ---- */
.goal-row{display:flex;gap:8px;align-items:center}
.goal-row input{flex:1}
.goal-row .btn{flex:none;white-space:nowrap}
.chip.goal-hit{background:color-mix(in srgb,var(--pos) 20%,transparent);color:var(--text)}
.chip.goal-near{background:var(--card2);color:var(--text)}
.chip.goal-miss{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--text)}
.goalbar{height:10px;background:var(--card2);border-radius:6px;overflow:hidden;margin:10px 0 8px}
.goalbar i{display:block;height:100%;background:var(--pos);border-radius:6px}
.goal-day{display:grid;grid-template-columns:34px 1fr 78px;gap:10px;align-items:center;padding:6px 0;font-variant-numeric:tabular-nums}
.goal-day>span:last-child{text-align:right;line-height:1.25}
.goal-bars{display:flex;flex-direction:column;gap:3px}
.goal-bars i{display:block;height:7px;border-radius:4px}
.goal-bars i.g{background:var(--muted);opacity:.55}
.goal-bars i.a.up{background:var(--pos)}
.goal-bars i.a.down{background:var(--warn)}

/* ---- v0.9.1: install guide ---- */
.installcard{cursor:pointer;border-color:var(--accent)}
.installcard .shift-top{align-items:center}
.installcard .btn{flex:none;pointer-events:none}
.install-steps{padding-left:22px;margin:14px 0}
.install-steps li{margin-bottom:12px;line-height:1.5}
.ii{width:18px;height:18px;vertical-align:-4px;display:inline-block}