/* ShelfDex — dark collector-binder theme */
:root{
  --bg:#0c0d12; --bg2:#12131b; --card:#171923; --card2:#1e202e;
  --line:#262839; --ink:#f2f1ec; --dim:#bcc0cf; --faint:#9c9fb2;
  --gold:#f5b942; --gold2:#ffd97a; --green:#3ddc84; --red:#ff6b6b;
  --dvd:#38bdf8; --bluray:#5b8cff; --uhd:#b388ff; --vhs:#ffb74d; --cd:#3ddc84;
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(91,140,255,.14), transparent 60%),
    radial-gradient(900px 480px at -10% 0%, rgba(245,185,66,.10), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;
  padding-bottom:124px;
}
a{color:var(--gold2)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;
  background:rgba(12,13,18,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;gap:10px;align-items:center}
.brand-icon{width:38px;height:38px;border-radius:10px}
.brand-name{font-size:21px;font-weight:800;letter-spacing:.2px;line-height:1}
.brand-sub{font-size:11px;color:var(--dim);margin-top:3px}
.points-pill{
  display:flex;align-items:center;gap:5px;
  background:linear-gradient(135deg,#2a2210,#1c1a12);
  border:1px solid #6b5518;color:var(--gold2);
  padding:7px 12px;border-radius:999px;font-weight:800;font-size:15px;
}
.points-star{color:var(--gold);font-size:12px}
.points-label{font-size:11px;color:var(--dim);font-weight:600}

.demo-banner{
  margin:12px 16px 0;padding:9px 12px;border-radius:12px;
  background:#241d0d;border:1px dashed #8a6d1f;color:#f3d489;
  font-size:12.5px;display:flex;gap:10px;align-items:center;justify-content:space-between;
}
.demo-banner .btn{white-space:nowrap;flex:none}
.banner-x{flex:none;color:#f3d489;font-size:16px;padding:2px 6px;opacity:.75}

/* ---------- layout ---------- */
main{max-width:1060px;margin:0 auto;padding:16px}
.view-title{font-size:24px;font-weight:800;letter-spacing:.2px}
.view-sub{color:var(--dim);font-size:13.5px;margin:4px 0 16px;line-height:1.45}
.section-title{font-size:15px;font-weight:800;margin:22px 0 10px;letter-spacing:.3px;text-transform:uppercase;color:var(--dim)}

/* ---------- hero stat ---------- */
.hero-stat{
  background:linear-gradient(135deg,var(--card2),var(--card));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin-bottom:16px;position:relative;overflow:hidden;
}
.hero-stat::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.05) 45%,transparent 60%);
  pointer-events:none;
}
.hero-stat .hero-label{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:1.2px;font-weight:700}
.hero-stat .hero-value{font-size:40px;font-weight:800;color:var(--gold2);line-height:1.1;margin:2px 0}
.hero-stat .hero-note{font-size:12.5px;color:var(--dim);line-height:1.5}
.hero-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.chip{
  background:var(--bg2);border:1px solid var(--line);border-radius:999px;
  padding:5px 11px;font-size:12px;color:var(--dim)
}
.chip b{color:var(--ink)}

/* ---------- tiles ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.tile{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;text-align:left;width:100%;
}
.tile-art{
  aspect-ratio:4/3;position:relative;display:flex;align-items:flex-end;padding:11px;
  background:linear-gradient(150deg,hsl(var(--hue,220) 45% 27%),hsl(var(--hue,220) 55% 12%));
  overflow:hidden;
}
.tile-art::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 9px);
}
.tile-initials{
  position:absolute;top:2px;right:8px;
  font-size:64px;font-weight:800;color:rgba(255,255,255,.16);line-height:1;
}
.tile-art-title{
  position:relative;font-size:16.5px;font-weight:800;line-height:1.22;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.65);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.tile-art .fmt{position:absolute;top:9px;left:10px;background:rgba(5,6,10,.55)}
.tile-body{padding:10px 11px 12px;display:flex;flex-direction:column;gap:3px;flex:1}
.tile-title{font-size:14px;font-weight:700;line-height:1.3}
.tile-meta{font-size:11.5px;color:var(--dim)}
.tile-floor{margin-top:auto;padding-top:6px;font-size:13px;font-weight:800;color:var(--gold2)}
.tile-floor.thin{color:var(--vhs)}
.tile-floor.none{color:var(--faint);font-weight:600;font-size:12px}
.fmt{
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:.6px;
  padding:2.5px 7px;border-radius:5px;text-transform:uppercase;vertical-align:1px;
}
.fmt-DVD{background:rgba(56,189,248,.16);color:var(--dvd)}
.fmt-Blu-ray{background:rgba(91,140,255,.18);color:var(--bluray)}
.fmt-4K{background:rgba(179,136,255,.18);color:var(--uhd)}
.fmt-VHS{background:rgba(255,183,77,.16);color:var(--vhs)}
.fmt-CD{background:rgba(61,220,132,.15);color:var(--cd)}

/* ---------- sets ---------- */
.set-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:14px;
}
.set-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.set-name{font-size:18px;font-weight:800}
.set-blurb{font-size:12.5px;color:var(--dim);margin-top:2px}
.set-count{font-size:13px;font-weight:800;color:var(--gold2);white-space:nowrap}
.progress{height:9px;border-radius:99px;background:var(--bg2);border:1px solid var(--line);overflow:hidden;margin:12px 0}
.progress > div{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--gold2))}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:9px}
.slot{
  border:1px solid var(--line);border-radius:12px;padding:9px 10px;font-size:12.5px;
  background:var(--card2);line-height:1.35;min-height:88px;
}
.slot .slot-title{font-weight:700;font-size:13px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.slot .slot-sub{color:var(--dim);font-size:11.5px;margin-top:2px}
.slot.missing{background:transparent;border-style:dashed;color:var(--faint)}
.slot.missing .slot-title{color:var(--dim);font-weight:600}
.badge-complete{
  display:inline-block;background:linear-gradient(135deg,#6b5518,#3d2f08);color:var(--gold2);
  border:1px solid var(--gold);border-radius:999px;padding:4px 11px;font-size:12px;font-weight:800;
}

/* ---------- badges ---------- */
.badges{display:flex;gap:9px;flex-wrap:wrap}
.badge{
  border:1px solid var(--line);background:var(--card);border-radius:12px;
  padding:10px 12px;font-size:12.5px;min-width:128px;flex:1;
}
.badge .b-ico{
  width:42px;height:42px;border-radius:50%;font-size:20px;
  border:1.5px solid var(--gold);
  background:radial-gradient(circle at 35% 30%, #453610, #1c1a12);
  display:flex;align-items:center;justify-content:center;
}
.badge .b-name{font-weight:800;margin:3px 0 1px}
.badge .b-sub{color:var(--dim);font-size:11.5px;line-height:1.35}
.badge.locked{opacity:.42;filter:grayscale(.7)}

/* ---------- buttons & forms ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;flex:none;
  background:linear-gradient(135deg,var(--gold),#d99a26);color:#191203;
  font-weight:800;border-radius:12px;padding:12px 18px;font-size:15px;border:1px solid #8a6d1f;
}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--gold2);border:1px solid #6b5518}
.btn-plain{background:var(--card2);color:var(--ink);border:1px solid var(--line)}
.btn-small{padding:7px 12px;font-size:13px;border-radius:9px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.input{
  width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--ink);
  border-radius:12px;padding:13px 14px;font-size:16px;
}
.input:focus{outline:2px solid var(--gold);outline-offset:0;border-color:transparent}
label.lbl{display:block;font-size:12px;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.8px;margin:14px 0 6px}

/* ---------- scan ---------- */
.scan-stage{
  border:1px dashed #45465e;border-radius:var(--radius);background:var(--card);
  padding:18px;text-align:center;
}
#scanVideo{width:100%;max-height:300px;border-radius:12px;background:#000;display:none}
.scan-samples{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sample-chip{
  border:1px solid var(--line);background:var(--card2);border-radius:999px;
  padding:7px 12px;font-size:12.5px;color:var(--dim)
}
.sample-chip b{color:var(--ink)}
.result-card{
  margin-top:16px;background:linear-gradient(160deg,var(--card2),var(--card));
  border:1px solid var(--gold);border-radius:var(--radius);padding:18px;
}
.result-card.plain{border-color:var(--line)}
.result-title{font-size:20px;font-weight:800;line-height:1.25}
.kv{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv:last-of-type{border-bottom:none}
.kv .k{color:var(--dim)}
.kv .v{font-weight:700;text-align:right}
.honesty{
  margin-top:10px;font-size:12.5px;line-height:1.5;color:#f3d489;
  background:#241d0d;border:1px solid #6b5518;border-radius:10px;padding:9px 11px;
}
.method-note{font-size:12px;color:var(--faint);line-height:1.55;margin-top:14px}

/* ---------- value ---------- */
.fund-row{display:grid;grid-template-columns:minmax(118px,1.15fr) 1fr 74px;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.fund-row:last-child{border-bottom:none}
.fund-name{font-weight:700}
.fund-frac{color:var(--faint);font-weight:600;font-size:12px;margin-left:6px;white-space:nowrap}
.fund-bar{flex:1;height:8px;background:var(--bg2);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.fund-bar > div{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2))}
.fund-val{flex:0 0 86px;text-align:right;font-weight:800;color:var(--gold2)}
.table-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.table-row:last-child{border-bottom:none}
.table-row .t-sub{color:var(--dim);font-size:12px}

/* ---------- bolo ---------- */
.quest{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:11px;display:flex;gap:13px;align-items:flex-start;
}
.quest-art{
  flex:0 0 46px;height:60px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:17px;color:rgba(255,255,255,.85);
  background:linear-gradient(150deg,hsl(var(--hue,220) 45% 26%),hsl(var(--hue,220) 55% 13%));
}
.quest-main{flex:1;min-width:0}
.quest-title{font-weight:800;font-size:15.5px;line-height:1.3}
.quest-sub{color:var(--dim);font-size:12.5px;margin:2px 0 8px}
.buy-links{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.buy-links a{
  text-decoration:none;font-size:12.5px;font-weight:700;color:var(--ink);text-align:center;
  border:1px solid var(--line);background:var(--card2);border-radius:999px;padding:6px 4px;white-space:nowrap;
}
.buy-links a:active{border-color:var(--gold)}
.quest-floor{text-align:right;font-weight:800;color:var(--gold2);font-size:15px;white-space:nowrap}
.quest-floor .qf-sub{display:block;font-weight:600;color:var(--faint);font-size:11px;margin-top:2px}

/* ---------- tab bar ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;background:rgba(14,15,21,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:7px 2px;font-size:11px;font-weight:700;color:var(--dim);border-radius:12px;
}
.tab .tab-ico{font-size:19px;line-height:1}
.tab.active{color:var(--gold2);background:rgba(245,185,66,.08)}
.empty{
  border:1px dashed var(--line);border-radius:var(--radius);padding:26px 18px;
  text-align:center;color:var(--dim);font-size:14px;line-height:1.55;
}
.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:104px;z-index:50;
  background:#22243a;border:1px solid var(--gold);color:var(--ink);
  padding:11px 18px;border-radius:999px;font-size:14px;font-weight:700;
  box-shadow:0 10px 34px rgba(0,0,0,.55);max-width:88vw;text-align:center;
}
#scanResult{scroll-margin-top:74px}
.vf{font-size:58px;line-height:1;color:var(--gold2)}
@media (min-width:760px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  main{padding:22px}
  .tabbar{left:50%;right:auto;transform:translateX(-50%);width:580px;
    border-left:1px solid var(--line);border-right:1px solid var(--line);
    border-radius:18px 18px 0 0}
}
@media (min-width:1024px){
  .quests{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .quests .quest{margin-bottom:0}
  .scan-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
}