/* Layout: phone column, bottom tabs; Today = tap-to-tick product tiles, Shelf = wooden shelves holding illustrated bottles */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --ink:#2D1F26; --muted:#7D6670; --line:#F0E1E8;
  --accent:#C2577A; --accent-ink:#5A1B37; --pista:#F4A6C0; --soft:#FDEEF4;
  --good:#2F8A6B; --good-soft:#E1F2EC; --warn:#A8651B; --warn-soft:#F8EAD6; --bad:#B23A3A; --bad-soft:#F7E0DE;
  --wall:#FDF5F8; --wood:#B98A64; --wood-dark:#8E6444; --glass:#FFFFFF;
  --c-cleanser:#9FC3A8; --c-toner:#E9B9C8; --c-serum:#E3A25B; --c-moist:#F1D8DF; --c-spf:#F3D36B; --c-oil:#C9A15A; --c-mask:#B7A6D6; --c-other:#D7C4BD; --c-scrub:#C7B08F; --c-lip:#C2405E; --c-gloss:#E07A92; --c-makeup:#D9A58A; --c-hair:#8FB8B0; --c-hair2:#C9B3DA; --cap:#3B2A31;
  --display:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#151013; --surface:#211A1E; --ink:#F6EAF0; --muted:#B9A3AD; --line:#3B2B33;
  --accent:#F2A9C4; --accent-ink:#3A0F22; --pista:#E58DAE; --soft:#3A2230;
  --good:#7FD1B0; --good-soft:#18302A; --warn:#E3AE68; --warn-soft:#3A2B18; --bad:#EE8F86; --bad-soft:#3D1F1E;
  --wall:#1E161A; --wood:#7A5639; --wood-dark:#5A3E29; --glass:#3A2D33; --cap:#120C0F; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#151013; --surface:#211A1E; --ink:#F6EAF0; --muted:#B9A3AD; --line:#3B2B33;
  --accent:#F2A9C4; --accent-ink:#3A0F22; --pista:#E58DAE; --soft:#3A2230;
  --good:#7FD1B0; --good-soft:#18302A; --warn:#E3AE68; --warn-soft:#3A2B18; --bad:#EE8F86; --bad-soft:#3D1F1E;
  --wall:#1E161A; --wood:#7A5639; --wood-dark:#5A3E29; --glass:#3A2D33; --cap:#120C0F; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45}
.wrap{max-width:560px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:18px 110px}
h1{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:1.7rem;line-height:1.1;margin:0}
h2{font-family:var(--display);font-weight:700;letter-spacing:-.01em;font-size:1.25rem;margin:0}
.eyebrow{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}
.muted{color:var(--muted)} .meta{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.streak{display:flex;align-items:baseline;gap:6px;background:var(--soft);color:var(--accent);border-radius:999px;padding:6px 12px;font-weight:700;font-size:.85rem}
.streak b{font-family:var(--display);font-weight:700;font-size:1.3rem;font-variant-numeric:tabular-nums}
section.view{display:grid;gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:12px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .between{justify-content:space-between} .grow{flex:1;min-width:0}
button{font:inherit;cursor:pointer;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:8px 14px;font-weight:600;font-size:.88rem}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.primary{background:var(--pista);color:var(--accent-ink);border-color:var(--pista)}
button.ghost{background:transparent;border-color:transparent;color:var(--accent);padding:6px 8px}
button.danger{color:var(--bad);border-color:var(--bad-soft)}
.chip{display:inline-block;font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--soft);color:var(--accent);white-space:nowrap}
.chip.good{background:var(--good-soft);color:var(--good)} .chip.warn{background:var(--warn-soft);color:var(--warn)} .chip.bad{background:var(--bad-soft);color:var(--bad)}
.chip.plain{background:transparent;border:1px solid var(--line);color:var(--muted)}

/* Today tiles */
.stylechip{margin-top:6px;padding:4px 10px;font-size:.78rem;background:var(--soft);color:var(--accent);border-color:transparent}
.styles{display:grid;gap:10px}
.stylecard{display:flex;align-items:center;gap:12px;text-align:left;border-radius:14px;padding:14px;font-weight:500}
.stylecard b{display:block;font-family:var(--display);font-weight:700;font-size:1.2rem}
.stylecard[aria-pressed="true"]{border-color:var(--accent);background:var(--soft)}
.sflag{font-size:1.8rem;line-height:1}
.ghost-tile{border-style:dashed;background:transparent;color:var(--muted);opacity:.85}
.ghost-tile svg{opacity:.45}
.slot-h{display:flex;justify-content:space-between;align-items:baseline}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.tile{position:relative;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);padding:10px 6px 8px;display:grid;justify-items:center;gap:4px;font-weight:600;font-size:.8rem;text-align:center;min-width:0}
.tile svg{width:46px;height:68px}
.tile span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.tile[aria-pressed="true"]{border-color:var(--good);background:var(--good-soft)}
.tile .tick{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-size:.75rem;color:transparent;background:var(--surface)}
.tile[aria-pressed="true"] .tick{background:var(--good);border-color:var(--good);color:var(--surface)}
@media (prefers-reduced-motion:no-preference){.tile{transition:transform .12s ease,background .2s} .tile:active{transform:scale(.95)}}
.dots{display:grid;grid-template-columns:repeat(14,1fr);gap:5px}
.dot{aspect-ratio:1;max-width:100%;border-radius:50%;background:var(--line)}
.dot.half{background:linear-gradient(90deg,var(--pista) 50%,var(--line) 50%)} .dot.full{background:var(--pista)}
.dot.today{outline:2px solid var(--ink);outline-offset:1px}
.alert{display:flex;align-items:center;gap:10px;border-radius:14px;padding:10px 12px;background:var(--warn-soft);color:var(--warn);font-weight:600;font-size:.88rem;border:0;width:100%;text-align:left}
.alert.new{background:var(--soft);color:var(--accent)}

/* Shelf */
.cabinet{background:linear-gradient(180deg,#FFFFFF 0%,var(--wall) 100%);border-radius:18px;padding:14px 12px 4px;display:grid;gap:0}
.shelf{display:grid;grid-template-columns:repeat(4,1fr);align-items:end;gap:4px;padding:0 4px;min-height:118px}
.shelf-name{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--muted);padding:2px 4px 0}
.plank{height:16px;border-radius:3px;background:repeating-linear-gradient(92deg,rgba(120,80,40,0) 0,rgba(120,80,40,.07) 6px,rgba(120,80,40,0) 13px),linear-gradient(180deg,#E8C99D 0%,#D6AE78 55%,#B98B55 100%);margin:-6px -6px 16px;box-shadow:0 14px 20px rgba(90,60,25,.22),inset 0 1px 0 rgba(255,245,225,.9),inset 0 -3px 0 rgba(90,55,20,.25);position:relative;z-index:0}
.bottle{background:none;border:0;border-radius:10px;padding:4px 0 2px;display:grid;justify-items:center;gap:2px;font-size:.68rem;font-weight:600;color:var(--ink);min-width:0}
.bottle svg{width:54px;height:84px;position:relative;z-index:1}
.bottle span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.bottle .sd{width:7px;height:7px;border-radius:50%;background:var(--good)}
.bottle .sd.warn{background:var(--warn)} .bottle .sd.bad{background:var(--bad)}
.bottle[aria-pressed="true"]{background:var(--surface)}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.75rem;color:var(--muted)}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}
.basket{border:1.5px dashed var(--accent);border-radius:16px;padding:12px;display:grid;gap:10px;background:var(--soft)}
.newrow{display:flex;align-items:center;gap:10px}
.newrow svg{width:34px;height:50px;flex:none}
.detail{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.detail svg{width:64px;height:96px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:.85rem;font-variant-numeric:tabular-nums}
.facts dt{color:var(--muted)} .facts dd{margin:0}
.gauge{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.gauge i{display:block;height:100%;border-radius:99px;background:var(--good)} .gauge i.warn{background:var(--warn)} .gauge i.bad{background:var(--bad)}
.item + .item{border-top:1px solid var(--line)}
.irow{width:100%;display:flex;align-items:center;gap:12px;background:none;border:0;border-radius:0;padding:10px 2px;text-align:left;font-weight:500}
.irow svg{width:30px;height:45px;flex:none}
.irow .big{font-size:1.15rem;white-space:nowrap}
.chev{color:var(--muted);width:1em;text-align:center;font-size:1.1rem}
.idet{display:grid;gap:10px;padding:0 2px 14px 44px}
.big{font-weight:700;letter-spacing:-.01em;font-family:var(--display);font-size:1.6rem;line-height:1.1;color:var(--good);font-variant-numeric:tabular-nums}
.big.warn{color:var(--warn)} .big.bad{color:var(--bad)}
.deal{font-size:.84rem;background:var(--soft);border-radius:10px;padding:8px 10px}
.deal a{color:var(--accent);font-weight:600}

form{display:grid;gap:12px}
label{display:grid;gap:4px;font-size:.8rem;font-weight:600;color:var(--muted)}
input,select,textarea{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 11px;width:100%;min-width:0}
textarea{min-height:64px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.scale{display:flex;gap:6px} .scale button{flex:1;padding:9px 0;font-size:1.05rem}
.scale button[aria-pressed="true"]{background:var(--pista);color:var(--accent-ink);border-color:var(--pista)}
.hist{display:grid;gap:10px}
.hrow{display:grid;grid-template-columns:4.5em 1fr;gap:10px;font-size:.84rem}
.bars{display:grid;gap:4px} .bar{display:flex;align-items:center;gap:8px}
.bar span{width:3em;color:var(--muted);font-size:.74rem} .bar i{height:6px;border-radius:99px;background:var(--pista)}
.tabs{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));z-index:5}
.tabs div{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.snapcard{grid-template-columns:auto 1fr;align-items:center}
.spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent)}
@media (prefers-reduced-motion:no-preference){.spin{animation:sp 0.9s linear infinite}}
@keyframes sp{to{transform:rotate(360deg)}}
.found{display:flex;align-items:center;gap:10px;font-size:.9rem;padding:4px 0}
.found input{width:20px;height:20px;flex:none;accent-color:var(--accent)}
.found svg{width:26px;height:40px;flex:none}
.stepchips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.stepchips button{white-space:nowrap;flex:none}
.stepchips button[aria-pressed="true"]{background:var(--pista);color:var(--accent-ink);border-color:var(--pista)}
.brand{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--line)}
.brand b{font-size:1.02rem}
.stores{display:flex;gap:8px;flex-wrap:wrap}
.stores a{font-weight:600;font-size:.84rem;color:var(--accent);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.tabs button{border:0;border-radius:0;background:transparent;color:var(--muted);padding:13px 0 12px;font-size:.85rem}
.tabs button[aria-selected="true"]{color:var(--accent);box-shadow:inset 0 2px 0 var(--accent)}
.notice{font-size:.84rem;background:var(--warn-soft);color:var(--warn);border-radius:10px;padding:10px 12px}
.empty{text-align:center;padding:22px 10px;color:var(--muted)}

/* Login */
.login{min-height:70vh;display:grid;align-content:center;gap:18px;max-width:420px;margin:0 auto}
.login .logo{width:64px;height:64px;border-radius:18px;background:var(--pista);display:grid;place-items:center}
.login h1{font-size:2rem}
.login p{margin:0;color:var(--muted)}
.why{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.why li{padding-left:30px;position:relative;font-size:.95rem}
.why li::before{content:"\2713";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--soft);color:var(--accent);display:grid;place-items:center;font-size:.72rem;font-weight:700}
.account{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.84rem;color:var(--muted)}

.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:#fff;color:#1f1f1f;font:inherit;font-weight:600;cursor:pointer}
.gbtn:disabled{opacity:.6}
.or{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--muted);font-size:.8rem}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}

.shelf.labels{min-height:0;align-items:start;margin:-8px 0 14px}
.tag{background:none;border:0;padding:0 2px;display:grid;justify-items:center;gap:2px;min-width:0;font:inherit;color:var(--ink);cursor:pointer}
.tag span{font-size:.62rem;font-weight:600;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag b{font-size:.68rem;font-weight:600;line-height:1.2;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tag .pill{font-style:normal;font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:999px;background:#FCE4EE;color:#8C2F57;white-space:nowrap}
.tag .pill.warn{background:#FFE7C2;color:#7A4300}.tag .pill.bad{background:#FBD5CF;color:#8A2416}

/* Quick add sheet */
.sheet-bg{position:fixed;inset:0;background:rgba(40,15,30,.35);z-index:40}
.sheet{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,560px);background:var(--surface);border-radius:20px 20px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));display:grid;gap:12px;z-index:41;box-shadow:0 -10px 30px rgba(40,15,30,.18);animation:sheetUp .22s ease-out}
.sheet h2{margin:0}.sheet .row svg{width:30px;height:46px}
@keyframes sheetUp{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}

/* Calendar nudge */
.calnudge{background:var(--soft);border:0;gap:10px}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:999px;padding:10px 16px;font-weight:700;font-size:.92rem}
a.btn.primary{background:var(--accent);color:#fff}
a.ghost{text-decoration:none;font-weight:600;color:var(--accent-ink);padding:10px 6px;font-size:.9rem}

/* ---------- New look (Day 5) ---------- */
body{background:linear-gradient(180deg,var(--bg) 0%,var(--wall) 100%) fixed}
h1{font-weight:800}
.head h1{font-size:1.65rem}
.streak{align-items:center;gap:4px;padding:7px 12px;color:#8C2F57;background:#FCE4EE}
.streak b{font-size:1.05rem}.streak span{font-size:.8rem}
.gnote{display:flex;gap:10px;align-items:center;border-radius:18px;padding:12px 14px;background:linear-gradient(120deg,#F7BFD3,#FDE3EC);color:#5A1B37;font-weight:600;font-size:.92rem}
.gnote i{font-style:normal;font-size:1.25rem}
.gnote.soft{background:linear-gradient(120deg,#FFE7C2,#FFF3DF);color:#7A4300}
.ringcard{display:flex;align-items:center;gap:14px;background:var(--surface);border-radius:20px;padding:12px 14px;box-shadow:0 6px 20px rgba(120,50,80,.08)}
.ringcard svg{width:62px;height:62px;flex:none;color:var(--accent-ink)}
.ringcard b{font-size:1.02rem}
.card{border:0;border-radius:22px;box-shadow:0 6px 20px rgba(120,50,80,.08)}
.slotcard h2{font-size:1.05rem}
.tiles{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.tile{border-radius:16px;border:1px solid #F3E2E9;background:linear-gradient(180deg,#FFFAFC,#FAEEF3);padding:8px 4px 7px;font-size:.74rem}
.tile svg{width:44px;height:66px}
.tile[aria-pressed="true"]{background:linear-gradient(180deg,#FCE6EF,#F8D3E1);border-color:#F0B4CA}
.tile .tick{width:19px;height:19px;font-size:.66rem;top:5px;right:5px}
.tile[aria-pressed="true"] .tick{background:#B23E6C;border-color:#B23E6C;color:#fff}
.ghost-tile{background:#fff;border:1px dashed #F7BFD3;opacity:.7}
@media (prefers-reduced-motion:no-preference){
  .tile.pop{animation:pop .42s cubic-bezier(.3,1.6,.5,1)}
  .tile.pop .tick{animation:tickin .42s ease-out}
  .tile.pop svg{animation:glow .6s ease-out}
}
@keyframes pop{0%{transform:scale(.92)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes tickin{0%{transform:scale(0)}70%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes glow{0%{filter:drop-shadow(0 0 0 rgba(240,150,185,0))}40%{filter:drop-shadow(0 0 10px rgba(240,150,185,.9))}100%{filter:drop-shadow(0 0 0 rgba(240,150,185,0))}}
.facecard{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:center;background:var(--surface);border-radius:20px;padding:12px 14px;box-shadow:0 6px 20px rgba(120,50,80,.08)}
.facecard.big{border:2px solid #F7BFD3}
.fc-ic{width:46px;height:46px;border-radius:14px;background:#FCE4EE;display:grid;place-items:center;font-size:1.3rem;flex:none}
.fix{display:flex;gap:12px;align-items:center;background:var(--surface);border-radius:18px;padding:10px 12px;box-shadow:0 4px 14px rgba(120,50,80,.07)}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ba-pic{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4;background:#FBF0F4;margin:0;padding:0;border:0}
.ba-pic img{width:100%;height:100%;object-fit:cover;display:block}
.ba-pic span{position:absolute;left:8px;bottom:8px;background:rgba(255,255,255,.92);color:#2D1F26;border-radius:999px;padding:2px 9px;font-size:.7rem;font-weight:800}
.ba-pic.empty{display:grid;place-items:center;align-content:center;gap:4px;border:1.5px dashed #F7BFD3;color:var(--accent);font-weight:700;font-size:.82rem;text-align:center}
.ba-pic.empty b{font-size:1.6rem}.ba-pic.empty span{position:static;background:none;padding:0 8px;font-size:.78rem}
.weekstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center;font-size:.7rem;color:var(--muted);font-weight:700}
.weekstrip i{display:block;height:26px;border-radius:9px;background:#F8EEF2;margin-top:3px}
.weekstrip i.f{background:#E1779C}.weekstrip i.h{background:#F6C9D8}.weekstrip i.t{outline:2px solid var(--ink);outline-offset:1px}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:#5A1B37;color:#fff;border-radius:999px;padding:10px 18px;font-weight:700;font-size:.9rem;z-index:60;box-shadow:0 8px 24px rgba(40,15,30,.25);white-space:nowrap}
.tabs{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:0;border:0;border-radius:24px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 28px rgba(80,30,55,.16);max-width:536px;margin:0 auto}
.tabs button{display:grid;justify-items:center;gap:2px;padding:9px 0 8px;font-size:.72rem;font-weight:700}
.tabs button b{font-size:1.05rem;line-height:1;padding:3px 14px;border-radius:12px}
.tabs button[aria-selected="true"]{box-shadow:none;color:#8C2F57}
.tabs button[aria-selected="true"] b{background:#FCE4EE}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tabs{background:rgba(26,32,24,.94)}:root:not([data-theme="light"]) .tile{background:var(--surface);border-color:var(--line)}}
.facecard .row{grid-column:1/-1}
.ba-pic:only-child{grid-column:1/-1;aspect-ratio:2/1}
body[data-view="check"] .head{display:none}
.mgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.mday{aspect-ratio:1;border-radius:9px;background:#F8EEF2;display:grid;place-items:center;font-size:.68rem;font-weight:700;color:var(--muted)}
.mday.f{background:#E1779C;color:#fff}.mday.h{background:#F6C9D8;color:#8C2F57}.mday.fut{background:transparent;border:1px dashed #F1DDE6}.mday.t{outline:2px solid var(--ink);outline-offset:1px}
.mday.blank{background:transparent}
.ba-del{position:absolute;top:6px;right:6px;padding:3px 9px;font-size:.72rem;font-weight:800;border:0;background:rgba(255,255,255,.9);color:#8A2416;border-radius:999px}
/* Custom routine */
.pickchips{display:flex;flex-wrap:wrap;gap:7px}
.pickchips button{padding:7px 12px;font-size:.84rem}
.pickchips button[aria-pressed="true"]{background:#FCE4EE;border-color:#E1779C;color:#8C2F57}
.qq{display:grid}
.why{display:flex;gap:10px;align-items:flex-start;padding:4px 0}
.why svg{width:28px;height:44px;flex:none}
.appt{display:flex;gap:12px;align-items:center;background:linear-gradient(120deg,#FCE4EE,#FFF4F8);border-radius:18px;padding:11px 13px}
.appt .d{background:#fff;border-radius:12px;padding:5px 10px;text-align:center;font-weight:800;font-size:1.05rem;line-height:1.1}
.appt .d small{display:block;font-size:.6rem;color:var(--muted)}
.tnote{font-size:.8rem;background:#FFF4F8;color:#8C2F57;border-radius:10px;padding:6px 9px}
/* Sign-in page */
.login{min-height:88vh;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:14px;max-width:400px;margin:0 auto;text-align:center;padding:24px 0}
.lmark{width:64px;height:64px;border-radius:20px;background:linear-gradient(140deg,#F7BFD3,#E1779C);display:grid;place-items:center;font-size:30px;color:#fff;margin:0 auto}
.login h1{font-size:2.1rem;font-weight:800}
.ltag{margin:0 auto;max-width:300px;color:var(--muted);font-size:1rem;line-height:1.45}
.lshelf{margin:6px 10px 10px}
.lbottles{display:flex;justify-content:center;align-items:flex-end;gap:2px}
.lbottles svg{width:50px;height:78px;position:relative;z-index:1}
.lplank{height:12px;border-radius:3px;margin:-6px 18px 0;background:linear-gradient(180deg,#E8C99D,#B98B55);box-shadow:0 10px 16px rgba(90,60,25,.2)}
.login .gbtn{padding:14px 16px;border-radius:16px;font-weight:800;font-size:1rem;box-shadow:0 4px 14px rgba(120,50,80,.1)}
.login form{display:grid;gap:10px}
.login form input{padding:12px 14px;border-radius:14px}
.login button.primary{padding:12px;border-radius:14px;font-weight:800}
.login button.ghost{align-self:center}
.lfine{margin:0}.lfine a{color:var(--accent)}
.edbtn{padding:2px 8px;font-size:.8rem}
.tile.editing{border:1.5px dashed #E1779C;background:#fff}
.tile.editing .tick{color:#8C2F57;background:#FCE4EE;border-color:#F7BFD3}
/* Get started + undo */
.startcard{gap:8px}
.sstep{display:flex;gap:10px;align-items:center;padding:6px 0}
.sstep i{font-style:normal;width:24px;height:24px;border-radius:50%;border:1.5px solid #F7BFD3;display:grid;place-items:center;font-size:.75rem;font-weight:800;color:#fff;flex:none}
.sstep.done i{background:#B23E6C;border-color:#B23E6C}
.sstep.done b{color:var(--ink)}
.donechip{background:#FCE4EE;color:#8C2F57;font-weight:800;font-size:.72rem;padding:3px 10px}
.sstep button.primary,.sstep a.btn.sm{padding:6px 14px;font-size:.82rem}
.toast button{margin-left:10px;background:transparent;border:0;color:#FDE3EC;font-weight:800;padding:0 4px;text-decoration:underline}
/* Restock */
.restock{gap:10px}
.rsrow{display:grid;gap:8px;padding:8px 0;border-top:1px solid var(--line)}
.rsrow:first-of-type{border-top:0}
.rshead{display:flex;gap:10px;align-items:center}
.rshead svg{width:32px;height:50px;flex:none}
.restock .stores a{background:#FCE4EE;border-color:#F7BFD3;color:#8C2F57;font-weight:700}
.viewtog{display:flex;gap:6px;background:#FCE4EE;border-radius:999px;padding:4px;justify-self:start}.viewtog button{border:0;background:transparent;padding:6px 14px;font-size:.82rem;font-weight:700;color:#8C2F57}.viewtog button[aria-pressed="true"]{background:#fff;box-shadow:0 2px 8px rgba(120,50,80,.12)}
.shelf-name{font-size:.82rem;letter-spacing:.02em;text-transform:none;color:#8C2F57;font-weight:800}
body.setup .tabs,body.setup .streak{display:none!important}
.welcome{min-height:60vh;display:grid;place-items:center;align-content:center;gap:22px;text-align:center}
.bigdot{display:grid;justify-items:center;gap:12px;background:none;border:0;box-shadow:none;padding:0}
.bigdot .dc{width:170px;height:170px;border-radius:50%;display:grid;place-items:center;font-size:70px;background:linear-gradient(140deg,#F7B4CB,#D9628E);box-shadow:0 14px 34px rgba(140,47,87,.25)}
.bigdot .dl{font-size:1.4rem;font-weight:800;color:#5A1B37}
body.locked .tabs button:not(#t-today){filter:grayscale(1);opacity:.4}
body.locked .streak{display:none}
.statcard{display:flex;align-items:center;gap:16px}.statcard svg{width:120px;height:120px;flex:none}.statcard b{font-size:1.1rem}
.ckplus{width:34px;height:34px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:1.1rem;font-weight:800;background:#D9628E;color:#fff;border:0}
.ckplus.done{background:#FCE4EE}
.mini{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:18px;padding:10px 12px;box-shadow:0 4px 14px rgba(140,47,87,.07)}
.mini .mi{width:40px;height:40px;border-radius:12px;background:#FCE4EE;display:grid;place-items:center;font-size:1.15rem;flex:none}
.mini .grow{display:grid}.mini button{white-space:nowrap}
.ckplus{position:relative;width:40px;height:40px;font-size:1.25rem;background:#FCE4EE;color:#5A1B37}
.ckplus i{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;background:#D9628E;color:#fff;font-style:normal;font-size:.8rem;font-weight:800;display:grid;place-items:center;line-height:1}
.statcard{margin-bottom:12px}.statcard svg{width:96px;height:96px}
.halves{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.half{display:grid;justify-items:start;align-content:start;gap:4px;text-align:left;background:var(--surface);border:0;border-radius:18px;padding:12px;box-shadow:0 4px 14px rgba(140,47,87,.07);font-size:.9rem;color:#5A1B37}
.half .mi{width:36px;height:36px;border-radius:11px;background:#FCE4EE;display:grid;place-items:center;font-size:1.05rem;margin-bottom:2px}
.half .meta{font-size:.76rem}.half [data-ba]{color:#C2557F;font-weight:700;text-decoration:underline}
.hscard{display:grid;justify-items:center;text-align:center;gap:10px;border-radius:24px;padding:22px 18px;background:linear-gradient(160deg,#FFE3EC,#F7B4CB);box-shadow:0 10px 26px rgba(140,47,87,.15)}
.hscard .hsic{width:72px;height:72px;border-radius:22px;background:#fff;display:grid;place-items:center;font-size:2.2rem;box-shadow:0 6px 16px rgba(140,47,87,.15)}
.hscard h2{margin:0;font-size:1.3rem;color:#5A1B37}.hscard p{margin:0;color:#7A3B57}
.hsteps{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:8px;width:100%}
.hsteps li{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:12px 14px;text-align:left;font-size:1rem;color:#3A1424}
.hsteps li span{width:30px;height:30px;border-radius:50%;background:#D9628E;color:#fff;font-weight:800;display:grid;place-items:center;flex:none}
.hscard .big{width:100%;padding:14px;font-size:1.05rem}
#style-chip,.hschip{display:inline-flex!important;vertical-align:middle}.hschip{margin-left:6px;background:#fff;border:1px solid #F4A6C0}.hschip[hidden],#style-chip[hidden]{display:none!important}
#hs-sheet{position:fixed;inset:0;z-index:80;background:rgba(58,20,36,.35);display:grid;align-items:end;padding:12px}
#hs-sheet[hidden]{display:none}
#hs-sheet .sheetin{max-width:520px;margin:0 auto;width:100%}
.chiprow{display:flex;gap:8px;flex-wrap:wrap;margin:-6px 0 2px}.chiprow .hschip{margin-left:0}
body[data-view="check"] .chiprow,body.setup .chiprow{display:none}
.calcard{display:grid;gap:12px}.calcard h2{margin:0}.calcard .big{text-align:center;padding:14px;font-size:1.05rem}
.more summary{color:var(--muted);font-size:.85rem;cursor:pointer}.more{display:grid;gap:6px}.more[open]{padding-bottom:4px}.more a,.more button{justify-self:start;padding-left:0}
.wkchip{padding:5px 10px;font-size:.78rem;font-weight:700;border-radius:999px;background:#FCE4EE;color:#8C2F57;border:0}
.daychips{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;width:100%}.daychips button{padding:10px 0;border-radius:12px;font-weight:700;font-size:.85rem;background:#fff;border:0;color:#5A1B37}
.daychips button[aria-pressed="true"]{background:#D9628E;color:#fff}
.wktime{width:100%;text-align:left;color:#5A1B37;font-weight:700}.wktime input{width:100%;margin-top:4px}
.wkchip{justify-self:start}
.accrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);border:0;border-radius:20px;padding:14px 14px;box-shadow:0 6px 20px rgba(140,47,87,.08);color:#3A1424}
.accrow .ai{width:44px;height:44px;border-radius:14px;background:#FCE4EE;display:grid;place-items:center;font-size:1.35rem;flex:none}
.accrow .at{display:grid;flex:1;min-width:0}.accrow .at b{font-size:1.05rem}
.accrow .abar{width:56px;height:8px;border-radius:999px;background:#FCE4EE;overflow:hidden;flex:none}.accrow .abar i{display:block;height:100%;background:#D9628E;border-radius:999px}
.accrow .chev{font-size:1.6rem;color:#C2557F;line-height:1}
.accrow.done .ai{background:#D9628E}.accrow.warn .ai{background:#FFE7C2}
.slotcard.open,.restock.open{position:relative}.acchead{position:absolute;top:10px;right:12px;padding:4px 10px;font-size:.75rem;border-radius:999px;background:#FCE4EE;color:#8C2F57;border:0;z-index:2}
.slotcard.open .slot-h{padding-right:70px}.restock.open .slot-h{padding-right:70px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .accrow,:root:not([data-theme="light"]) .accrow b,:root:not([data-theme="light"]) .half,:root:not([data-theme="light"]) .half b,:root:not([data-theme="light"]) .statcard b,:root:not([data-theme="light"]) .statcard p{color:#fff!important}
:root:not([data-theme="light"]) .statcard text{fill:#fff}
:root:not([data-theme="light"]) .accrow .meta,:root:not([data-theme="light"]) .half .meta{color:#F3D3E0}
:root:not([data-theme="light"]) .hschip{background:transparent;color:#fff;border-color:#F4A6C0}
:root:not([data-theme="light"]) .half [data-ba]{color:#F7B4CB}
:root:not([data-theme="light"]) .tabs{background:rgba(40,24,32,.95)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #style-chip{background:#FCE4EE!important;color:#8C2F57!important;border-color:#FCE4EE}:root:not([data-theme="light"]) .hschip{background:#fff!important;color:#C2557F!important;border-color:#F4A6C0}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .slotcard{background:linear-gradient(180deg,#FFFFFF 0%,var(--wall) 100%);color:#3A1424;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 10px 30px rgba(247,180,203,.18)}:root:not([data-theme="light"]) .slotcard h2,:root:not([data-theme="light"]) .slotcard b{color:#3A1424}:root:not([data-theme="light"]) .slotcard .meta{color:#7A5566}:root:not([data-theme="light"]) .slotcard .tile{background:linear-gradient(180deg,#FFFFFF,#FCEFF4);border-color:#F3D3E0;color:#3A1424}:root:not([data-theme="light"]) .slotcard .tile[aria-pressed="true"]{background:linear-gradient(180deg,#FDE3EC,#F7C6D8);border-color:#EFA3BF}:root:not([data-theme="light"]) .slotcard .tile span{color:#3A1424}:root:not([data-theme="light"]) .slotcard .ghost-tile{background:#fff}:root:not([data-theme="light"]) .slotcard .edbtn{color:#C2557F}:root:not([data-theme="light"]) .slotcard .tnote{background:#FCE4EE;color:#5A1B37}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .slotcard .tile .tick{background:#fff;border-color:#E8B8CA}:root:not([data-theme="light"]) .slotcard .tile[aria-pressed="true"] .tick{background:#B83E6E;border-color:#B83E6E;color:#fff}}
.slotcard .tile[aria-pressed="false"]{background:linear-gradient(180deg,#F6F4F5,#EAE6E8)!important;border-color:#DED8DB!important}
.slotcard .tile[aria-pressed="false"] svg{filter:grayscale(1);opacity:.6}
.slotcard .tile[aria-pressed="false"] span{color:#8E8589!important}
.firstadd{display:grid;gap:8px;background:var(--surface);border-radius:20px;padding:14px;box-shadow:0 6px 20px rgba(140,47,87,.08)}.firstadd b{font-size:1.05rem}
.facecard .grow > b{color:var(--ink);font-size:1.05rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bigdot .dl{color:#fff}:root:not([data-theme="light"]) .welcome .meta{color:#F3D3E0}}
.accrow.bell .ai{background:#FFE7C2}
#hs-sheet{z-index:200!important;overflow-y:auto;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))!important}#hs-sheet .sheetin{position:relative;max-height:calc(100dvh - 40px);overflow-y:auto}.sheetx{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:0;background:#fff;color:#5A1B37;font-size:1rem;font-weight:800;z-index:2;box-shadow:0 2px 8px rgba(90,27,55,.15)}