:root{
  --bg:#eef0ef;
  --panel:#ffffff;
  --ink:#14161a;
  --ink-soft:#5a5e5c;
  --line-soft:#c9cdc9;
  --accent:#1f6f5c;
  --accent-soft:#eaf1ef;
  --bad:#9c2b1f;
  --bad-soft:#f6e9e7;
  --mono:'IBM Plex Mono', 'Courier New', monospace;
  --sans:'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
}
*{ box-sizing:border-box; }
html{ color-scheme:light only; }
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:#154d40; }
button, input, select{ font:inherit; }
input[type="range"]{ accent-color:var(--accent); }
.hidden{ display:none !important; }

@keyframes fadeUp{ from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes slideIn{ from{transform:translateX(100%);} to{transform:translateX(0);} }
@keyframes popIn{ from{opacity:0;transform:scale(.9);} to{opacity:1;transform:scale(1);} }
@keyframes shakeX{ 0%,100%{transform:translateX(0);} 20%{transform:translateX(-8px);} 40%{transform:translateX(7px);} 60%{transform:translateX(-5px);} 80%{transform:translateX(3px);} }

.wordmark{ font-family:var(--mono); font-size:.75rem; letter-spacing:.15em; color:var(--accent); text-transform:uppercase; }

/* ---------- brand logo (lysto + caret) ---------- */
@keyframes lystoBlink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
.brand-logo{
  font-family:var(--mono); font-weight:600; letter-spacing:-.04em;
  color:var(--ink); display:inline-flex; align-items:center; line-height:1;
  font-size:1.6rem; text-transform:none;
}
.brand-logo__caret{
  display:inline-block; width:.34em; height:.82em; background:var(--accent);
  margin-left:.06em; border-radius:1px; animation:lystoBlink 1.05s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce){
  .brand-logo__caret{ animation:none; }
}

/* ---------- buttons ---------- */
.btn-primary{
  background:var(--ink); color:var(--bg); border:1px solid var(--ink);
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; font-size:.8rem;
  padding:.8rem 2rem; cursor:pointer;
  transition:background-color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.btn-primary:hover{ background:var(--accent); border-color:var(--accent); }
.btn-primary:active{ transform:scale(.95); }
.btn-primary.disabled{ opacity:.4; pointer-events:none; }

.btn-secondary{
  background:var(--panel); color:var(--ink); border:1px solid var(--ink);
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; font-size:.78rem;
  padding:.75rem 1.6rem; cursor:pointer;
  transition:background-color .25s ease, color .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.btn-secondary:hover{ background:var(--ink); color:var(--bg); }
.btn-secondary.disabled{ opacity:.4; pointer-events:none; color:var(--line-soft); border-color:var(--line-soft); cursor:not-allowed; }

.btn-small{
  background:var(--ink); color:var(--bg); border:1px solid var(--ink);
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.05em; font-size:.66rem;
  padding:.45rem .8rem; cursor:pointer;
}
.btn-small:hover{ background:var(--accent); border-color:var(--accent); }

.btn-add{
  background:var(--ink); color:var(--bg); border:1px solid var(--ink);
  font-family:var(--mono); text-transform:uppercase; font-size:.78rem;
  padding:.7rem 1.1rem; cursor:pointer; transition:background-color .2s ease;
}
.btn-add:hover{ background:var(--accent); border-color:var(--accent); }

.link-btn{
  font-family:var(--mono); font-size:.85rem; color:var(--ink-soft); cursor:pointer;
  transition:color .2s ease; background:none; border:none; padding:0;
}
.link-btn:hover{ color:var(--ink); }

.item-link{
  display:inline-block; border:1px solid var(--accent); color:var(--accent);
  font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.03em;
  padding:.25rem .5rem; text-decoration:none; background:var(--panel);
}
.item-link:hover{ background:var(--accent); color:#fff; }

/* ---------- landing ---------- */
#screen-landing{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem;
}
.landing-inner{ text-align:center; animation:fadeUp .5s cubic-bezier(.22,.61,.36,1); max-width:640px; }
.landing-title{ font-size:2.2rem; font-weight:700; line-height:1.2; margin-bottom:.6rem; }
.landing-sub{ font-family:var(--mono); font-size:.85rem; color:var(--ink-soft); margin-bottom:2.6rem; }
.landing-cards{ display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:center; }
.landing-card{
  display:block; box-sizing:border-box; width:260px; border:1px solid var(--ink); background:var(--panel);
  padding:2rem 1.6rem; text-align:left; cursor:pointer;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.landing-card:hover{ transform:translateY(-4px); box-shadow:0 16px 30px -18px rgba(20,22,26,.4); }
.landing-card .eyebrow{ font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:.8rem; }
.landing-card .title{ font-size:1.2rem; font-weight:700; margin-bottom:.5rem; color:var(--ink); }
.landing-card .desc{ font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); }

/* ---------- onboarding / creator step shell ---------- */
.step-shell{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem; position:relative; }
.step-back{
  position:absolute; top:2.2rem; left:2.2rem; font-family:var(--mono); font-size:.85rem; color:var(--ink-soft);
  cursor:pointer; transition:color .2s ease; background:none; border:none;
}
.step-back:hover{ color:var(--ink); }
.step{ text-align:center; animation:fadeUp .5s cubic-bezier(.22,.61,.36,1); }
.step.narrow{ max-width:480px; }
.step.mid{ max-width:560px; }
.step.wide{ max-width:640px; }
.step-title{ font-size:1.5rem; font-weight:700; margin-bottom:.4rem; }
.step-sub{ font-family:var(--mono); font-size:.8rem; color:var(--ink-soft); margin-bottom:1.8rem; }

.dots{ display:flex; gap:.5rem; margin-top:3rem; }
.dot{ width:7px; height:7px; border:1px solid var(--ink); transition:background-color .3s ease; }
.dot.active{ background:var(--ink); }

.dial{ cursor:grab; touch-action:none; }
/* fixed min-width + tabular digits so the readout (and everything around
   it) doesn't shift as the number of digits changes mid-spin */
.dial-value{ font-family:var(--mono); font-size:2.2rem; margin-top:1rem; min-width:9ch; text-align:center; font-variant-numeric:tabular-nums; }
.metric .value{ font-variant-numeric:tabular-nums; }
.metric .value.budget{ min-width:7ch; }
.zone-bar{ display:flex; gap:1.2rem; margin:1.2rem auto 0; width:320px; justify-content:center; }
.zone{
  flex:1; font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.05em;
  text-align:center; padding-bottom:.4rem; border-bottom:2px solid var(--line-soft); color:#8a8f8d;
  transition:border-color .3s ease, color .3s ease;
}
.zone.active{ border-bottom-color:var(--accent); color:var(--ink); font-weight:600; }
.skip-link{
  background:none; border:none; cursor:pointer; font-family:var(--mono); font-size:.72rem;
  color:var(--ink-soft); border-bottom:1px solid var(--line-soft); padding:.2rem 0;
  transition:color .2s ease, border-color .2s ease;
}
.skip-link:hover{ color:var(--accent); border-bottom-color:var(--accent); }

.card-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-bottom:2.4rem; }
.card-grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.8rem; margin-bottom:2.4rem; }
.pick-card{
  border:1px solid var(--ink); padding:1rem 1.1rem; cursor:pointer; text-align:left;
  background:var(--panel); color:var(--ink); transition:background-color .22s ease, color .22s ease;
}
.pick-card.active{ background:var(--ink); color:var(--bg); }
.pick-card .label{ font-size:.95rem; font-weight:600; }
.pick-card .desc{ font-family:var(--mono); font-size:.7rem; margin-top:.25rem; color:var(--ink-soft); }
.pick-card.active .desc{ color:#cfe0da; }

/* ---------- gate (ID + PIN) ---------- */
.gate-input{
  width:100%; box-sizing:border-box; border:1px solid var(--ink); background:var(--panel);
  font-size:1rem; padding:.9rem 1rem; text-align:center;
}
.pin-dots-wrap{ display:flex; gap:.8rem; justify-content:center; margin-bottom:1.2rem; }
.pin-dot{ width:16px; height:16px; border-radius:50%; border:1px solid var(--ink); transition:background-color .15s ease; background:transparent; }
.pin-dot.filled{ background:var(--ink); }
.pin-dots-wrap.shake{ animation:shakeX .4s ease; }
.pin-error{ font-family:var(--mono); font-size:.78rem; color:var(--bad); margin-bottom:1.6rem; animation:fadeIn .2s ease; }
.pin-error-spacer{ height:1.4rem; margin-bottom:1.6rem; }
.pin-hidden-input{ position:absolute; opacity:0; width:1px; height:1px; top:0; left:0; }
.keypad{ display:grid; grid-template-columns:repeat(3,64px); gap:.6rem; justify-content:center; margin:0 auto; }
.keypad-key{
  border:1px solid var(--ink); background:var(--panel); font-size:1.1rem; font-family:var(--mono);
  height:56px; display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none;
  transition:background-color .15s ease, color .15s ease;
}
.keypad-key:hover{ background:var(--accent-soft); }
.keypad-key.empty{ visibility:hidden; }

/* ---------- main / wishlist screens ---------- */
#screen-optimizer-main, #screen-optimizer-wishlist, #screen-creator{ max-width:1080px; margin:0 auto; padding:2.4rem 2rem 4rem; animation:fadeIn .4s ease; }
#screen-creator{ max-width:560px; padding-top:2.6rem; }

.main-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:2.5rem; }
.main-header .actions{ display:flex; gap:1.2rem; }
.main-header .actions .link-btn{ text-transform:uppercase; letter-spacing:.05em; font-size:.72rem; }

.dial-stats{ display:flex; flex-wrap:wrap; gap:3rem; align-items:center; justify-content:center; margin-bottom:2.6rem; }
.metrics{ display:flex; gap:1px; background:var(--ink); border:1px solid var(--ink); }
.metric{ background:var(--panel); padding:1.1rem 1.6rem; }
.metric.flex1{ flex:1; }
.metric .label{ text-transform:uppercase; font-size:.66rem; letter-spacing:.05em; color:var(--ink-soft); }
.metric .value{ font-family:var(--mono); font-size:1.5rem; margin-top:.2rem; }

.section-head{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line-soft); padding-bottom:.6rem; margin-bottom:.4rem; }
.section-head .label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); }
.section-note{ font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); margin-bottom:1.4rem; }
select{ border:1px solid var(--ink); background:var(--panel); color:var(--ink); font-family:var(--sans); font-size:.85rem; padding:.4rem .6rem; }

.error-state{ border-left:4px solid var(--bad); background:var(--bad-soft); padding:.9rem 1.1rem; font-size:.9rem; margin-bottom:1.6rem; }

.combo-list{ display:flex; flex-direction:column; gap:1rem; }
.combo-card{ border:1px solid var(--ink); background:var(--panel); transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
.combo-card:hover{ transform:translateY(-3px); box-shadow:0 12px 26px -16px rgba(20,22,26,.4); }
.combo-card.pick{ border-width:2px; }
.combo-head{ padding:1.2rem 1.3rem; cursor:pointer; }
.combo-top{ display:flex; justify-content:space-between; align-items:baseline; }
.combo-price{ font-family:var(--mono); font-size:1.5rem; }
.combo-caret{ font-family:var(--mono); color:var(--accent); font-size:1.1rem; }
.pick-tag{ font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.combo-meta{ font-size:.82rem; color:var(--ink-soft); margin-top:.3rem; }
.combo-names{ font-size:.78rem; color:var(--ink-soft); margin-top:.4rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bullet-row{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.7rem; }
/* Reason chips: bumped up from .66rem outline-only, which tested as hard to
   read. Slightly larger, tinted fill and a touch more weight so they read as
   the card's headline "why", not fine print. Sharp corners, as everywhere. */
.bullet{
  font-family:var(--mono); font-size:.74rem; font-weight:500; line-height:1.3;
  color:var(--accent); background:rgba(31,111,92,.09);
  border:1px solid var(--accent); padding:.3rem .6rem;
}

.combo-body{ max-height:0; opacity:0; overflow:hidden; padding:0 1.3rem; border-top:1px solid transparent; transition:max-height .4s cubic-bezier(.22,.61,.36,1), opacity .3s ease, padding .3s ease; }
.combo-body.open{ max-height:1400px; opacity:1; padding:.75rem 1.3rem .9rem; border-top:1px solid var(--line-soft); }
.item-row{ display:flex; align-items:center; gap:.6rem; padding:.5rem 0; border-bottom:1px solid var(--line-soft); }
.item-row .name-col{ flex:1; min-width:0; }
.item-row .name-col .name{ font-size:.82rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.item-row .name-col .note{ font-size:.7rem; color:var(--ink-soft); font-style:italic; margin-top:.1rem; }
.item-row .price-col{ font-family:var(--mono); font-size:.82rem; width:64px; text-align:right; flex-shrink:0; }
.item-row .action-col{ width:174px; flex-shrink:0; display:flex; justify-content:flex-end; }
.reserve-actions{ display:flex; gap:.4rem; }
.reserve-btn{
  background:var(--panel); border:1px solid var(--ink); font-family:var(--mono); font-size:.66rem;
  text-transform:uppercase; padding:.25rem .5rem; cursor:pointer; white-space:nowrap; transition:background-color .2s ease, color .2s ease;
}
.reserve-btn:hover{ background:var(--ink); color:var(--bg); }
.reserve-edit{ display:flex; gap:.3rem; align-items:center; animation:popIn .25s cubic-bezier(.34,1.56,.64,1); }
.reserve-edit input{ width:76px; border:1px solid var(--ink); font-size:.72rem; padding:.25rem .4rem; }
.reserve-edit .confirm{ background:var(--accent); color:#fff; border:1px solid var(--accent); font-size:.75rem; padding:.2rem .5rem; cursor:pointer; }
.reserve-edit .cancel{ background:var(--panel); color:var(--ink-soft); border:1px solid var(--line-soft); font-size:.7rem; padding:.2rem .5rem; cursor:pointer; }
.reserved-tag{ display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; font-family:var(--mono); font-size:.64rem; color:var(--accent); animation:popIn .3s cubic-bezier(.34,1.56,.64,1); }
.undo-btn{
  background:var(--panel); border:1px solid var(--line-soft); color:var(--ink-soft);
  font-family:var(--mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.03em;
  padding:.2rem .45rem; cursor:pointer; transition:border-color .2s ease, color .2s ease;
}
.undo-btn:hover{ border-color:var(--ink); color:var(--ink); }

.load-more-wrap{ text-align:center; margin-top:1.4rem; }
.view-wishlist-wrap{ margin-top:2.8rem; text-align:center; }
.browse-section{ margin-top:2.6rem; }

.wl-back{ font-family:var(--mono); font-size:.85rem; color:var(--ink-soft); cursor:pointer; margin-bottom:2.2rem; transition:color .2s ease; background:none; border:none; }
.wl-back:hover{ color:var(--ink); }
.wl-headline{ font-size:2.4rem; font-weight:700; line-height:1.15; margin-bottom:2.2rem; max-width:640px; }
.wl-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:1.1rem; align-items:stretch; }
.wl-card{ border:1px solid var(--ink); background:var(--panel); padding:1.4rem 1.3rem; height:100%; display:flex; flex-direction:column; transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, opacity .3s ease; }
.wl-card:hover{ transform:translateY(-3px); box-shadow:0 12px 26px -16px rgba(20,22,26,.4); }
.wl-card.reserved{ opacity:.55; }
.wl-card .top-row{ margin-bottom:.6rem; }
.wl-card .reserved-label{ font-family:var(--mono); font-size:.6rem; letter-spacing:.05em; color:var(--ink-soft); }
.wl-card .name{ font-size:1rem; font-weight:600; line-height:1.3; }
.wl-card.reserved .name{ text-decoration:line-through; }
.wl-card .note{ font-size:.75rem; color:var(--ink-soft); font-style:italic; margin-top:.4rem; }
.wl-card .bottom{ margin-top:auto; padding-top:1.1rem; }
.wl-card .price{ font-family:var(--mono); font-size:1.3rem; margin-bottom:.6rem; }
/* Why a price is approximate, stated outright instead of hidden behind a
   hover tooltip (which does not exist on touch). Quiet, but readable. */
.wl-card .price-note{
  font-family:var(--mono); font-size:.68rem; color:var(--ink-soft);
  margin-top:-.35rem; margin-bottom:.7rem; line-height:1.3;
}
.wl-card .actions{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }

/* ---------- admin panel ---------- */
.admin-overlay{ position:fixed; inset:0; background:rgba(20,22,26,.55); z-index:50; animation:fadeIn .25s ease; }
.admin-panel{ position:fixed; top:0; right:0; bottom:0; width:420px; max-width:90vw; background:var(--panel); border-left:1px solid var(--ink); z-index:51; padding:2rem; overflow-y:auto; animation:slideIn .3s cubic-bezier(.22,.61,.36,1); }
.admin-head{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line-soft); padding-bottom:.7rem; margin-bottom:1.6rem; }
.admin-head .title{ font-size:.9rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.admin-close{ cursor:pointer; font-family:var(--mono); color:var(--ink-soft); background:none; border:none; font-size:1rem; }
.admin-section-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:.7rem; }
.admin-status{ border:1px solid var(--accent); background:var(--accent-soft); padding:.9rem 1rem; font-family:var(--mono); font-size:.72rem; color:var(--accent); margin-bottom:1.6rem; }
.admin-record{ font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); background:#f6f6f4; border:1px solid var(--line-soft); padding:.7rem .9rem; margin-bottom:1.6rem; }
.admin-empty{ font-family:var(--mono); font-size:.7rem; color:var(--ink-soft); opacity:.6; margin-bottom:1.6rem; }
.admin-reservation-row{ display:flex; justify-content:space-between; font-size:.78rem; padding:.4rem 0; border-bottom:1px solid var(--line-soft); }
.admin-reservation-row .name{ font-family:var(--mono); color:var(--accent); }
.weights-note{ font-family:var(--mono); font-size:.7rem; color:var(--ink-soft); line-height:1.4; margin:0 0 1rem; }
.weight-block{ margin-bottom:.9rem; }
.weight-row{ display:flex; justify-content:space-between; font-size:.85rem; margin-bottom:.15rem; }
.weight-row .val{ font-family:var(--mono); color:var(--accent); }

/* ---------- creator ---------- */
.progress-track{ height:3px; background:var(--line-soft); position:sticky; top:0; z-index:10; }
.progress-fill{ height:3px; background:var(--accent); transition:width .4s cubic-bezier(.22,.61,.36,1); }
.creator-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:2.2rem; }

.text-input-wrap{ max-width:320px; margin:0 auto 1.6rem; }
.text-input{ width:100%; box-sizing:border-box; border:1px solid var(--ink); background:var(--panel); font-size:1rem; padding:.8rem 1rem; text-align:center; }

.suggestion-chips{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:1.4rem; }
.suggestion-chip{ border:1px dashed var(--line-soft); padding:.45rem .9rem; font-size:.8rem; font-family:var(--mono); cursor:pointer; transition:background-color .2s ease, color .2s ease, border-color .2s ease; background:var(--panel); color:var(--ink); }
.suggestion-chip.active{ border:1px solid var(--ink); background:var(--ink); color:var(--bg); }

.add-link-row{ display:flex; gap:.6rem; margin-bottom:.6rem; }
.add-link-row input.link{ flex:1; box-sizing:border-box; border:1px solid var(--ink); background:var(--panel); font-size:.85rem; padding:.7rem .8rem; font-family:var(--mono); }
/* Indeterminate fetch indicator. Same visual language as the creator's
   progress bar (3px, flat, accent) rather than a spinner, which would sit
   badly in a design with no rounded corners anywhere. */
.link-loading{ height:3px; background:var(--line-soft); margin-bottom:.6rem; overflow:hidden; }
.link-loading .bar{ height:3px; width:40%; background:var(--accent); animation:linkScan 1.1s ease-in-out infinite; }
@keyframes linkScan{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(350%); } }
.link-note{ font-family:var(--mono); font-size:.72rem; padding:.5rem .7rem; margin-bottom:.6rem; border-left:3px solid var(--accent); background:var(--accent-soft); color:var(--ink); line-height:1.45; }
.link-note.bad{ border-left-color:var(--bad); background:var(--bad-soft); }
.add-divider{ font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); opacity:.7; margin:.8rem 0 .6rem; }
.add-row{ display:flex; gap:.6rem; margin-bottom:1.6rem; }
.add-row input.name{ flex:1; box-sizing:border-box; border:1px solid var(--ink); background:var(--panel); font-size:.9rem; padding:.7rem .8rem; }
.add-row input.price{ width:90px; box-sizing:border-box; border:1px solid var(--ink); background:var(--panel); font-size:.9rem; padding:.7rem .8rem; }

.item-list{ border-top:1px solid var(--line-soft); margin-bottom:2rem; }
.item-list-row{ display:flex; justify-content:space-between; align-items:center; padding:.8rem 0; border-bottom:1px solid var(--line-soft); animation:popIn .25s cubic-bezier(.34,1.56,.64,1); }
.item-list-row .name{ font-size:.9rem; }
.item-list-row .right{ display:flex; align-items:center; gap:1rem; }
.item-list-row .price{ font-family:var(--mono); font-size:.9rem; }
.item-list-row .price-wrap{ font-family:var(--mono); font-size:.9rem; display:inline-flex; align-items:center; gap:.15rem; }
.item-list-row .price-edit{
  width:72px; border:1px solid transparent; background:transparent; font-family:var(--mono);
  font-size:.9rem; padding:.25rem .35rem; text-align:right; transition:border-color .2s ease, background-color .2s ease;
}
.item-list-row .price-edit:hover{ border-color:var(--line-soft); background:var(--panel); }
.item-list-row .price-edit:focus{ outline:none; border-color:var(--accent); background:var(--panel); }
.item-list-row .remove{ cursor:pointer; color:var(--line-soft); font-size:.9rem; transition:color .2s ease; }
.item-list-row .remove:hover{ color:var(--bad); }
.empty-note{ font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); opacity:.6; margin-bottom:2rem; }

.drag-row{
  display:flex; align-items:center; gap:.8rem; padding:.8rem .5rem; border-bottom:1px solid var(--line-soft);
  background:var(--bg); cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
}
.drag-row.dragging{
  cursor:grabbing; background:var(--panel);
  box-shadow:0 10px 22px -12px rgba(20,22,26,.4); position:relative; z-index:2;
}
.drag-row.dragging .drag-handle{ color:var(--accent); }
.drag-rank{ width:24px; height:24px; border:1px solid var(--ink); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.7rem; flex-shrink:0; }
.drag-name{ flex:1; font-size:.9rem; }
.drag-price{ font-family:var(--mono); font-size:.85rem; color:var(--ink-soft); }
.drag-handle{ font-size:1.1rem; color:var(--line-soft); cursor:grab; }

.batch-row{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.8rem; align-items:center; }
.batch-label{ font-family:var(--mono); font-size:.66rem; text-transform:uppercase; color:var(--ink-soft); margin-right:.3rem; }
.batch-chip{ border:1px dashed var(--line-soft); padding:.35rem .7rem; font-size:.7rem; font-family:var(--mono); color:var(--ink-soft); cursor:pointer; background:var(--panel); }
.batch-chip:hover{ border-color:var(--ink); color:var(--ink); }

.tap-row{ padding:.9rem 0; border-bottom:1px solid var(--line-soft); }
.tap-row-head{ display:flex; justify-content:space-between; margin-bottom:.5rem; }
.tap-row-head .name{ font-size:.88rem; }
.tap-row-head .price{ font-family:var(--mono); font-size:.8rem; color:var(--ink-soft); }
.tap-options{ display:flex; gap:.35rem; flex-wrap:wrap; }
.tap-option{
  flex:1; min-width:60px; text-align:center; border:1px solid var(--line-soft); padding:.5rem .3rem; font-size:.68rem;
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.02em; cursor:pointer; user-select:none;
  background:var(--panel); color:var(--ink-soft);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tap-option.active{ border-color:var(--ink); background:var(--ink); color:var(--bg); }

.finish-sheet{ border-top:1px solid var(--line-soft); text-align:left; }
.finish-row{ display:flex; justify-content:space-between; align-items:center; gap:1.2rem; padding:1.1rem 0; border-bottom:1px solid var(--line-soft); }
.finish-q .t{ font-size:.92rem; font-weight:600; }
.finish-q .h{ font-family:var(--mono); font-size:.7rem; color:var(--ink-soft); margin-top:.25rem; line-height:1.4; }
.yesno{ display:flex; gap:.35rem; flex-shrink:0; }
.yesno .tap-option{ flex:none; min-width:56px; }
.currency-select{
  /* appearance:none is required — iOS/Android round native selects and ignore
     border-radius otherwise. We re-add a small caret so it still reads as a
     dropdown, and stay sharp-cornered on every platform. */
  -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0;
  border:1px solid var(--ink); font-family:var(--mono);
  font-size:.78rem; padding:.45rem 1.1rem .45rem .5rem; cursor:pointer; flex-shrink:0;
  background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Cpath d='M0 0h8L4 6z' fill='%2314161a'/%3E%3C/svg%3E") no-repeat right .4rem center;
}
/* the per-item picker sitting inside the manual add row */
.currency-select.compact{ font-size:.75rem; padding:.7rem 1rem .7rem .4rem; width:92px; }
.item-list-row .price-wrap .cur{ color:var(--ink-soft); }

/* Borderless photos (design decision): no frame — the sampled mat colour is
   the only "edge". White-backdrop photos sit as clean blocks on the panel,
   coloured ones read as solid colour blocks. Sharp corners, solid fills. */
.item-thumb{ width:38px; height:38px; object-fit:contain; background:#fff; flex-shrink:0; }
.item-list-row .left{ display:flex; align-items:center; gap:.7rem; min-width:0; }
/* Square box on purpose: most product photography is square, so a landscape
   box manufactured side-bars on nearly every image. Square means the common
   case letterboxes not at all, and the mat only has to work for the genuinely
   odd-shaped ones. */
.wl-thumb-wrap{ width:100%; aspect-ratio:1/1; overflow:hidden; background:#fff; margin-bottom:.8rem; }
.wl-thumb{ width:100%; height:100%; object-fit:contain; display:block; background:transparent; }

.pairing-form{ border:1px solid var(--line-soft); padding:1.1rem; margin-bottom:1.8rem; }
.pair-type-row{ display:flex; gap:.4rem; margin-bottom:.7rem; }
.pair-type-opt{ flex:1; text-align:center; border:1px solid var(--line-soft); padding:.5rem .3rem; font-size:.68rem; font-family:var(--mono); text-transform:uppercase; cursor:pointer; background:var(--panel); color:var(--ink-soft); transition:background-color .2s ease, color .2s ease, border-color .2s ease; }
.pair-type-opt.active{ border-color:var(--ink); background:var(--ink); color:var(--bg); }
.pair-select-row{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.pair-select-row select{ flex:1; min-width:120px; border:1px solid var(--ink); background:var(--panel); font-size:.82rem; padding:.5rem .4rem; }
.pair-verb{ font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); }
.pairing-list{ border-top:1px solid var(--line-soft); margin-bottom:1.6rem; }
.pairing-row{ display:flex; justify-content:space-between; align-items:center; padding:.7rem 0; border-bottom:1px solid var(--line-soft); }
.pairing-row .text{ font-size:.85rem; }
.pairing-row .remove{ cursor:pointer; color:var(--line-soft); font-size:.9rem; transition:color .2s ease; }
.pairing-row .remove:hover{ color:var(--bad); }

.notes-row{ margin-bottom:1.2rem; }
.notes-row-head{ display:flex; justify-content:space-between; margin-bottom:.4rem; }
.notes-row-head .name{ font-size:.88rem; font-weight:600; }
.notes-row-head .price{ font-family:var(--mono); font-size:.8rem; color:var(--ink-soft); }
.notes-row input{ width:100%; box-sizing:border-box; border:1px solid var(--line-soft); background:var(--panel); font-size:.85rem; padding:.6rem .7rem; transition:border-color .2s ease; }
.notes-row input:focus{ outline:none; border-color:var(--accent); }
.notes-row input::placeholder{ font-family:var(--mono); font-size:.76rem; color:#9aa09d; }

.share-box{ border:2px solid var(--ink); background:var(--panel); padding:1.4rem 1.5rem; margin-bottom:2rem; }
.share-box-label{ font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:.7rem; }
.share-box-row{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:.6rem; }
.share-name{ font-size:1.3rem; font-weight:700; }
.share-code{ font-family:var(--mono); font-size:1.6rem; letter-spacing:.1em; color:var(--accent); margin-top:.2rem; }

.edit-code-box{ border:1px dashed var(--bad); background:var(--bad-soft); padding:1rem 1.2rem; margin-bottom:2rem; }
.edit-code-label{ font-family:var(--mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.06em; color:var(--bad); margin-bottom:.6rem; }
.edit-code-row{ display:flex; justify-content:space-between; align-items:center; gap:.6rem; flex-wrap:wrap; }
.edit-code-value{ font-family:var(--mono); font-size:1.3rem; letter-spacing:.1em; color:var(--ink); }
.edit-code-hint{ font-family:var(--mono); font-size:.68rem; color:var(--ink-soft); margin-top:.6rem; line-height:1.4; }

.done-row{ padding:.9rem 0; border-bottom:1px solid var(--line-soft); }
.done-row-head{ display:flex; justify-content:space-between; align-items:baseline; }
.done-row-head .name{ font-size:.92rem; font-weight:600; }
.done-row-head .price{ font-family:var(--mono); font-size:.9rem; }
.done-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem; }
.done-tag{ font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); border:1px solid var(--line-soft); padding:.15rem .4rem; }
.done-tag.top{ color:var(--accent); border-color:var(--accent); }
.done-note{
  font-size:.78rem; color:var(--ink); background:var(--accent-soft);
  border-left:3px solid var(--accent); padding:.45rem .65rem; margin-top:.55rem; line-height:1.45;
}

/* ==========================================================================
   MOBILE ONLY (<=640px) — desktop styles above are untouched. The item-row
   layout in particular was unusable on phones: thumb + name + a fixed
   64px price column + a fixed 150px action column left almost no room for
   the name, so every word wrapped onto its own line. Everything below
   restructures for narrow screens without changing a single desktop rule.
   ========================================================================== */
@media (max-width:640px){
  .card-grid2, .card-grid3{ grid-template-columns:1fr; }
  #screen-optimizer-main, #screen-optimizer-wishlist, #screen-creator{ padding:1.5rem 1rem 3rem; }
  #screen-creator{ padding-top:1.75rem; }
  .landing-cards{ flex-direction:column; align-items:center; }
  .step-shell{ padding:1.5rem 1rem; }

  /* headings: same hierarchy, sized to actually fit */
  .ob-title{ font-size:1.6rem; }
  .step-title{ font-size:1.3rem; }
  .wl-headline{ font-size:1.7rem; margin-bottom:1.6rem; }
  .landing-title{ font-size:1.7rem; }
  .share-code, .edit-code-value{ font-size:1.25rem; }

  /* dial: scale the whole SVG down via the host, not the SVG's own
     width/height attributes, so it never overflows a narrow viewport */
  #ozDialHost1, #ozDialHost2{ max-width:200px; margin:0 auto; }
  #ozDialHost1 svg, #ozDialHost2 svg{ width:100%; height:auto; display:block; }
  .dial-value{ font-size:1.6rem; }
  .zone-bar{ width:100%; max-width:280px; gap:.6rem; }

  /* top stat row: dial + metrics strip no longer forced side-by-side */
  .dial-stats{ flex-direction:column; gap:1.2rem; margin-bottom:1.8rem; }
  .metrics{ width:100%; }
  .metric{ padding:.8rem .6rem; flex:1; }
  .metric .value{ font-size:1.15rem; }
  .metric .value.budget{ min-width:0; }

  .main-header{ flex-wrap:wrap; gap:.6rem; margin-bottom:1.6rem; }

  /* the actual fix: item rows stack into two lines instead of squeezing
     thumb + name + price + actions into one, which is what forced the
     name column down to near-zero width and wrapped every word */
  .item-row{
    flex-wrap:wrap; align-items:flex-start; padding:.7rem 0; row-gap:.5rem;
  }
  .item-row .name-col{ flex:1 1 100%; order:1; min-width:0; }
  .item-row .price-col{ order:2; width:auto; text-align:left; font-size:.9rem; }
  .item-row .action-col{ order:3; width:auto; margin-left:auto; justify-content:flex-end; }
  .item-thumb{ order:0; }

  .combo-head{ padding:1rem; }
  .combo-body.open{ padding:.7rem 1rem .8rem; }
  .combo-names{ white-space:normal; }
  .combo-top{ flex-wrap:wrap; gap:.4rem; }

  .wl-grid{ grid-template-columns:1fr 1fr; gap:.7rem; }
  .wl-card{ padding:1rem .9rem; }
  .wl-card .actions{ width:100%; }

  .finish-row{ flex-direction:column; align-items:flex-start; gap:.7rem; }
  .yesno{ align-self:flex-start; }

  .add-row{ flex-wrap:wrap; }
  .add-row input.name{ flex:1 1 100%; }
  .add-row input.price{ flex:1; width:auto; }
  .add-row .currency-select.compact{ flex:1; width:auto; }
  .add-row .btn-add{ flex:1; }

  .drag-row{ gap:.5rem; }
  .drag-name{ font-size:.85rem; }

  .admin-panel{ width:100%; padding:1.5rem; }

  .keypad{ grid-template-columns:repeat(3, 1fr); max-width:220px; margin:0 auto; }
  .keypad-key{ height:52px; }
}