/* Inventory — quiet, warm, uncluttered. One accent, soft surfaces, generous spacing. */
:root{
  --bg:#f5f3ef;--card:#fffefc;--ink:#22211f;--ink2:#4a4844;--mute:#8a877f;--line:#e8e4dc;--line2:#f0ede7;
  --acc:#2f6f5e;--acc-ink:#fff;--acc2:#e9f2ee;--acc3:#cfe3db;--gold:#c9973b;--bad:#b4442f;--warn:#b7791f;
  --r:14px;--r2:10px;--shadow:0 1px 2px rgba(34,33,31,.04),0 4px 14px rgba(34,33,31,.05);
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
@media (prefers-color-scheme:dark){:root{--bg:#151514;--card:#1d1d1b;--ink:#ecebe6;--ink2:#c9c7c0;--mute:#8f8c84;--line:#2e2d2a;--line2:#262523;
  --acc:#6cc4a9;--acc-ink:#0f1f1a;--acc2:#1c2f29;--acc3:#24433a;--shadow:0 1px 2px rgba(0,0,0,.3)}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15.5px/1.45 var(--font);letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{letter-spacing:-.02em;font-weight:650}h2{font-size:22px}h3{font-size:17px}
code{font:13px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--line2);padding:1px 5px;border-radius:5px}

/* top bar */
.topbar{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line2)}
.topbar .in{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.brand .mark{width:26px;height:26px;border-radius:8px;background:var(--acc);display:grid;place-items:center;color:var(--acc-ink)}
.topnav{display:flex;gap:4px;margin-left:8px}
.topnav a{color:var(--ink2);padding:7px 11px;border-radius:9px;font-size:14.5px}
.topnav a.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow);font-weight:600}
.topnav a:hover{text-decoration:none;background:var(--line2)}
.topbar .sp{flex:1}.who{color:var(--mute);font-size:13.5px}.topbar .out{font-size:13.5px;color:var(--mute)}
/* bottom tab bar on phones */
.tabbar{display:none}
@media(max-width:720px){
  .topnav{display:none}.topbar .who{display:none}.topbar .whoami{font-size:11px;padding:2px 8px}.topbar .in>.out{display:none}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:10;background:color-mix(in srgb,var(--card) 92%,transparent);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--mute);padding:4px 0;border-radius:10px}
  .tabbar a.on{color:var(--acc);font-weight:600}.tabbar a:hover{text-decoration:none}
  .tabbar svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  body{padding-bottom:78px}
}
svg.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}

main{max-width:1100px;margin:0 auto;padding:18px 16px 28px}
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:6px 2px 14px}
.page-h h2{margin:0}.page-h .sub{color:var(--mute);font-size:13.5px;margin-top:2px}
.card{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.card.flat{box-shadow:none}
.section{margin:22px 2px 10px;display:flex;align-items:center;gap:10px;color:var(--ink2);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em}
.section .n{color:var(--mute);font-weight:500}.section::after{content:"";flex:1;height:1px;background:var(--line)}
details.group>summary{list-style:none;cursor:pointer}details.group>summary::-webkit-details-marker{display:none}

button,.btn{font:inherit;font-size:14.5px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--r2);padding:9px 14px;cursor:pointer;
  transition:background .15s,border-color .15s,transform .05s}
button:hover{border-color:var(--acc3)}button:active{transform:scale(.98)}
button.pri,.btn.pri{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-weight:600}
button.pri:hover{filter:brightness(1.05)}button.ghost{background:transparent;border-color:transparent;color:var(--ink2)}
button.big{width:100%;padding:15px;font-size:17px;border-radius:12px}button:disabled{opacity:.45;cursor:default}
button.icon{padding:8px 10px;min-width:40px}
input,select,textarea{font:inherit;font-size:16px;width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r2);background:var(--card);color:var(--ink);
  transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc2)}
label{display:block;font-size:12.5px;color:var(--mute);margin:12px 0 5px;font-weight:500}
.row{display:flex;gap:8px;align-items:center}.row>*{flex:1}.row>.fit{flex:0 0 auto}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:var(--card);font-size:14px;color:var(--ink2)}
.chip.on{background:var(--acc2);border-color:var(--acc3);color:var(--acc);font-weight:600}
.seg{display:inline-flex;background:var(--line2);border-radius:11px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;padding:6px 12px;font-size:13.5px;color:var(--ink2);border-radius:9px}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow);font-weight:600}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
@media(max-width:420px){.grid{grid-template-columns:1fr 1fr;gap:10px}}
.tile{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;display:block;
  box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s;position:relative}
.tile:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 6px 18px rgba(34,33,31,.08)}
.tile img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--line2)}
.tile .cap{padding:8px 10px 10px}.tile .nm{font-size:14px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .lc{font-size:12.5px;color:var(--mute);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .dot{position:absolute;top:8px;left:8px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--card)}
.tile.sel{outline:3px solid var(--acc);outline-offset:-3px}
.tile .tick{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:var(--acc);color:var(--acc-ink);display:none;place-items:center;font-size:14px}
.tile.sel .tick{display:grid}

.mute{color:var(--mute);font-size:13.5px}.err{color:var(--bad)}.ok{color:var(--acc)}
.thumbs{display:flex;gap:8px;flex-wrap:wrap}.thumbs img{width:74px;height:74px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:3px 9px;border-radius:999px;background:var(--acc2);color:var(--acc);font-weight:600;white-space:nowrap}
.badge.gray{background:var(--line2);color:var(--ink2)}.badge.gold{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold)}
.row>.badge{flex:0 0 auto}
#toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:12px;display:none;z-index:60;
  max-width:90vw;box-shadow:0 8px 30px rgba(0,0,0,.18);font-size:14.5px}
@media(min-width:721px){#toast{bottom:24px}}
table{width:100%;border-collapse:collapse}td,th{padding:9px 8px;border-bottom:1px solid var(--line2);text-align:left;font-size:14px}th{color:var(--mute);font-weight:500;font-size:12.5px}

/* progress + small rewards */
.bar{height:6px;border-radius:99px;background:var(--line2);overflow:hidden}.bar>i{display:block;height:100%;background:var(--acc);border-radius:99px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.ring{--p:0;width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:12px;font-weight:650;color:var(--ink2);
  background:radial-gradient(closest-side,var(--card) 76%,transparent 78% 100%),conic-gradient(var(--acc) calc(var(--p)*1%),var(--line2) 0)}
.empty{text-align:center;padding:34px 16px;color:var(--mute)}.empty .big{font-size:34px;margin-bottom:6px}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.pop{animation:pop .35s ease-out}
@keyframes fadeup{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.fade{animation:fadeup .25s ease-out}
.celebrate{position:fixed;inset:0;pointer-events:none;z-index:70;display:grid;place-items:center}
.celebrate div{background:var(--card);border-radius:20px;padding:18px 26px;box-shadow:0 20px 60px rgba(0,0,0,.18);font-weight:650;font-size:17px;animation:pop .35s ease-out;text-align:center}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}