:root{
  color-scheme: light dark;
  --bg:#f4f5f7; --surface:#fbfbfc; --surface-2:#eceef2; --surface-3:#e2e5ec;
  --ink:#15171c; --ink-2:#44495a; --ink-3:#656b7f;
  --rule:#d8dbe3; --rule-soft:#e6e8ee;
  --focus:#2f6fd0;
  --shadow:0 1px 2px rgba(20,24,35,.05), 0 8px 24px -12px rgba(20,24,35,.14);
  --shadow-lift:0 2px 4px rgba(20,24,35,.06), 0 18px 40px -18px rgba(20,24,35,.22);
  /* Accent: dark cherry, after the bag that started this. Actions and the brand mark only. */
  --accent:#8e2236; --accent-bg:#f6e6e9; --on-accent:#fbfbfc;
  /* State: under the alert price. */
  --deal:#1d6b3a; --deal-bg:#e3f3e8;

  --text-xs:0.6875rem; --text-sm:0.8125rem; --text-base:1rem; --text-md:1.125rem;
  --text-lg:1.375rem; --text-xl:1.75rem;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;
  --space-8:32px; --space-12:48px;
  --radius-sm:4px; --radius:8px; --radius-lg:12px; --radius-pill:999px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --press-scale: 0.96;

  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12141a; --surface:#191c24; --surface-2:#21252f; --surface-3:#2a2f3b;
    --ink:#e7e9f0; --ink-2:#a9b0c2; --ink-3:#858ca3;
    --rule:#2e333f; --rule-soft:#242831;
    --focus:#76a9f0;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.6);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 22px 46px -20px rgba(0,0,0,.8);
    --accent:#f08a9b; --accent-bg:#2c1a1f; --on-accent:#12141a;
    --deal:#7fd49b; --deal-bg:#17291f;
  }
}
:root[data-theme="dark"]{
  --bg:#12141a; --surface:#191c24; --surface-2:#21252f; --surface-3:#2a2f3b;
  --ink:#e7e9f0; --ink-2:#a9b0c2; --ink-3:#858ca3;
  --rule:#2e333f; --rule-soft:#242831;
  --focus:#76a9f0;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.6);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 22px 46px -20px rgba(0,0,0,.8);
  --accent:#f08a9b; --accent-bg:#2c1a1f; --on-accent:#12141a;
  --deal:#7fd49b; --deal-bg:#17291f;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100dvh; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:var(--text-base); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
main{
  max-width:640px; margin:0 auto;
  padding: calc(var(--space-4) + env(safe-area-inset-top)) var(--space-4) calc(var(--space-12) + env(safe-area-inset-bottom));
}
h1,h2{ font-family:var(--font-display); font-weight:650; letter-spacing:-0.02em; line-height:1.15; margin:0; text-wrap:balance; }
h1{ font-size:var(--text-xl); }
h2{ font-size:var(--text-lg); }
p{ margin:0; }
a{ color:inherit; }
.mono, .price{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.muted{ color:var(--ink-2); }
.small{ font-size:var(--text-sm); }
.label{ font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--ink-2); font-weight:600; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* header */
.top{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-6); }
.brand{ display:flex; align-items:center; gap:var(--space-2); }
.brand svg{ color:var(--accent); flex:none; }

/* controls */
button, .btn{
  font:inherit; font-size:var(--text-sm); font-weight:600; min-height:44px; padding:var(--space-2) var(--space-4);
  border-radius:var(--radius); border:1px solid var(--rule); background:var(--surface); color:var(--ink);
  cursor:pointer; touch-action:manipulation; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  transition: transform 150ms var(--ease-out), background-color 150ms ease, border-color 150ms ease;
}
button:active:not(:disabled), .btn:active{ transform:scale(var(--press-scale)); }
button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible, .card:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
}
button:disabled{ opacity:.55; cursor:default; }
.primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.ghost{ background:transparent; border-color:transparent; color:var(--ink-2); }
.danger{ color:var(--accent); }
@media (hover:hover){
  button:hover:not(:disabled):not(.primary), .btn:hover{ background:var(--surface-2); }
  .primary:hover:not(:disabled){ filter:brightness(1.08); }
}
input, textarea{
  font:inherit; font-size:var(--text-base); color:var(--ink); background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--radius); padding:var(--space-2) var(--space-3);
  min-height:44px; width:100%;
}
input::placeholder, textarea::placeholder{ color:var(--ink-3); }

/* add form */
.add{ background:var(--surface); border:1px solid var(--rule-soft); border-radius:var(--radius-lg);
  padding:var(--space-4); box-shadow:var(--shadow); display:grid; gap:var(--space-2); margin-bottom:var(--space-8); }
.add .row{ display:flex; gap:var(--space-2); }
.add .row > :first-child{ flex:1; }
.add .extra{ display:grid; grid-template-columns:1fr 9rem; gap:var(--space-2); }
.field{ display:grid; gap:var(--space-1); }
.err{ color:var(--accent); font-size:var(--text-sm); }

/* list */
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin:0 0 var(--space-3); }
.list{ display:grid; gap:var(--space-3); margin-bottom:var(--space-8); }
.card{
  display:grid; grid-template-columns:64px 1fr auto; gap:var(--space-3); align-items:center;
  background:var(--surface); border:1px solid var(--rule-soft); border-radius:var(--radius-lg);
  padding:var(--space-3); color:inherit; text-decoration:none; box-shadow:var(--shadow);
  transition: transform 150ms var(--ease-out);
}
.card:active{ transform:scale(0.98); }
.thumb{ width:64px; height:64px; border-radius:var(--radius-sm); background:var(--surface-2); object-fit:cover;
  display:grid; place-items:center; font-family:var(--font-display); font-size:var(--text-lg); color:var(--ink-2); overflow:hidden; }
.card .title{ font-weight:600; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card .meta{ font-size:var(--text-sm); color:var(--ink-2); line-height:1.4; margin-top:2px; }
.card .right{ text-align:right; display:grid; gap:2px; justify-items:end; }
.card .price{ font-size:var(--text-md); font-weight:500; }
.chip{ display:inline-block; font-size:var(--text-xs); font-weight:600; letter-spacing:.04em; padding:2px var(--space-2);
  border-radius:var(--radius-pill); background:var(--surface-2); color:var(--ink-2); white-space:nowrap; }
.chip.deal{ background:var(--deal-bg); color:var(--deal); }
.chip.accent{ background:var(--accent-bg); color:var(--accent); }
.bought .card{ box-shadow:none; background:transparent; }

.pulse{ display:inline-flex; align-items:center; gap:var(--space-2); }
.pulse::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); animation:blink 1.4s ease-in-out infinite; }
@keyframes blink{ 50%{ opacity:.25; } }
.skel{ background:var(--surface-2); border-radius:var(--radius-sm); height:12px; animation:blink 1.4s ease-in-out infinite; }

/* empty / gate */
.empty{ padding:var(--space-8) var(--space-4); text-align:left; display:grid; gap:var(--space-2); }
.empty p{ max-width:46ch; color:var(--ink-2); text-wrap:pretty; }
.gate{ min-height:70dvh; display:grid; align-content:center; gap:var(--space-4); }
.gate .names{ display:grid; gap:var(--space-3); }
.gate .names button{ min-height:56px; font-size:var(--text-md); justify-content:flex-start; }

/* detail */
.back{ margin:0 0 var(--space-4) calc(-1 * var(--space-3)); }
.hero{ display:grid; grid-template-columns:96px 1fr; gap:var(--space-4); align-items:start; margin-bottom:var(--space-6); }
.hero .thumb{ width:96px; height:96px; border-radius:var(--radius); }
.hero h1{ font-size:var(--text-lg); }
.hero .ids{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--ink-2); margin-top:var(--space-1); word-break:break-word; }
.strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-2); margin-bottom:var(--space-6); }
.stat{ background:var(--surface); border:1px solid var(--rule-soft); border-radius:var(--radius); padding:var(--space-3); display:grid; gap:2px; }
.stat .price{ font-size:var(--text-md); }
.stat.deal{ background:var(--deal-bg); border-color:transparent; }
.stat.deal .price, .stat.deal .label{ color:var(--deal); }
.summary{ display:grid; gap:var(--space-2); margin-bottom:var(--space-6); max-width:62ch; text-wrap:pretty; }
.finds{ list-style:none; margin:0 0 var(--space-6); padding:0; border-top:1px solid var(--rule); }
.finds li{ border-bottom:1px solid var(--rule); }
.finds a{ display:grid; grid-template-columns:1fr auto; gap:var(--space-1) var(--space-3); padding:var(--space-3) 0; text-decoration:none; min-height:44px; }
.finds .src{ font-weight:600; }
.finds .sub{ font-size:var(--text-sm); color:var(--ink-2); line-height:1.4; grid-column:1 / -1; }
.finds .price{ text-align:right; font-weight:500; }
.finds .gone{ opacity:.6; }
.finds .gone .price{ text-decoration:line-through; }
.actions{ display:grid; gap:var(--space-3); }
.actions .row{ display:flex; gap:var(--space-2); flex-wrap:wrap; }
.target{ display:flex; gap:var(--space-2); align-items:end; }
.target .field{ flex:1; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}
@media (max-width:360px){
  .add .extra{ grid-template-columns:1fr; }
  .stat{ padding:var(--space-2); }
}