:root{
  --bg:#0e1016; --panel:#171a24; --panel2:#1e2230; --line:#2a2f40;
  --text:#eef1f7; --muted:#9aa3b8; --accent:#ffcb05; --accent2:#3b6cff;
  --green:#37c978; --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}

.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 18px;background:rgba(14,16,22,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav-search{flex:1 1 180px;max-width:360px;margin:0}
.nav-search input{width:100%;padding:9px 14px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;color:var(--text);font-size:14px;outline:none}
.nav-search input:focus{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(59,108,255,.18)}
@media(max-width:640px){ .nav-search{order:3;flex-basis:100%;max-width:none;margin:4px 0 0} }
.brand{font-weight:800;font-size:19px;letter-spacing:.3px;display:inline-flex;align-items:center;gap:6px}
.brand-mark{color:var(--accent)}
.brand-accent{color:var(--accent)}
.tag{color:var(--muted);font-size:13px}
.back{margin-left:auto;color:var(--muted);font-size:14px}

.wrap{max-width:1080px;margin:0 auto;padding:22px 16px 60px}
.hero{text-align:center;padding:40px 0 18px}
.hero h1{font-size:clamp(26px,5vw,44px);line-height:1.12;margin:0 0 14px;font-weight:800;letter-spacing:-.5px}
.hero .grad{background:linear-gradient(90deg,var(--accent2),#7a3bff);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{color:var(--muted);font-size:16px;max-width:600px;margin:0 auto 24px;line-height:1.5}
.searchbox{max-width:620px;margin:0 auto;position:relative}
.searchbox input{width:100%;padding:16px 46px 16px 18px;font-size:17px;color:var(--text);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);outline:none}
.searchbox input:focus{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(59,108,255,.25)}
.q-clear{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:28px;height:28px;
  border:none;border-radius:50%;background:var(--panel2);color:var(--muted);cursor:pointer;
  font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center}
.q-clear:hover{color:var(--text);background:var(--line)}
.results-info{color:var(--muted);font-size:13px;margin:2px 0 -6px}
.search-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0 2px}
.search-filters select{background:var(--panel);border:1px solid var(--line);color:var(--text);
  border-radius:9px;padding:8px 11px;font-size:13px;font-weight:600;cursor:pointer;max-width:200px}
.search-filters select:focus{border-color:var(--accent2);outline:none}
.search-filters #f-clear{align-self:center}
.mv-ranges{display:flex;gap:6px;margin:8px 0 4px}
.mvr{padding:5px 14px;border:1px solid var(--line);border-radius:20px;color:var(--muted);
  font-size:13px;font-weight:700;text-decoration:none}
.mvr:hover{border-color:var(--green);color:var(--text)}
.mvr.active{background:var(--green);border-color:var(--green);color:#04110a}
/* price-drop alert form */
.alertform{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;margin:0 0 16px}
.af-lead{font-size:14px;margin-bottom:10px}
.af-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.af-cur{font-weight:800;color:var(--muted)}
.af-row input{padding:9px 11px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;color:var(--text);font-size:14px}
.af-row input[type=number]{width:110px}.af-row input[type=email]{flex:1;min-width:150px}
.af-msg{font-size:13px;color:var(--green);margin-top:8px}
.af-fine{font-size:11px;color:var(--muted);margin-top:8px}
/* most-valuable list */
.val-list{display:flex;flex-direction:column;gap:6px}
.val-row{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px}
.val-row:hover{border-color:var(--accent2)}
.val-rank{flex:0 0 28px;text-align:center;font-weight:800;color:var(--muted);font-size:14px}
.val-thumb{flex:0 0 40px;height:56px;display:flex;align-items:center;justify-content:center}
.val-thumb img{max-height:56px;max-width:40px;border-radius:4px}
.val-meta{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.val-meta b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.val-meta span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.val-price{flex:0 0 auto;font-weight:800;color:var(--green);font-size:17px}
/* set-page most-valuable strip */
.set-gems{display:flex;gap:10px;overflow-x:auto;padding:4px 0 10px;margin-bottom:6px}
.set-gem{flex:0 0 auto;width:96px;text-align:center;text-decoration:none}
.set-gem img{width:76px;border-radius:6px}
.set-gem .sg-n{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.set-gem .sg-p{font-size:13px;font-weight:800;color:var(--green)}
.value-chart{grid-column:1/-1;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:10px}
.vc-head{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:4px}
.vc-since{font-weight:500}
.grid{transition:opacity .15s ease}
.grid.loading-dim{opacity:.45}
.hero-chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:13px;color:var(--muted)}
.hint{color:var(--muted);font-size:13px;margin-top:12px}
.crumbs{color:var(--muted);font-size:13px;margin-bottom:16px}
.crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--accent2)}
.crumbs span{color:var(--text)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .12s ease,border-color .12s ease}
.card:hover{transform:translateY(-3px);border-color:var(--accent2)}
.thumb{aspect-ratio:.72;display:flex;align-items:center;justify-content:center;background:var(--panel2);padding:10px}
.thumb img{max-width:100%;max-height:100%;border-radius:6px}
.meta{padding:10px 12px 12px}
.name{font-weight:700;font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{color:var(--muted);font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.price{color:var(--green);font-weight:800;font-size:16px;margin-top:8px}
.price .pending,.pending{color:var(--muted);font-weight:600;font-size:12px}
.loading{grid-column:1/-1;text-align:center;color:var(--muted);padding:30px}

.featured{margin-top:38px}
.featured h2{font-size:18px;margin:0 0 6px}

/* card detail */
.detail-grid{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start}
.big-thumb{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.big-thumb img{width:100%;border-radius:10px;display:block}
.detail-info h1{margin:0;font-size:26px}
.detail-info .sub{font-size:14px;margin-top:4px}
.headline-price{margin:18px 0}
.headline-price .big{font-size:34px;font-weight:800;color:var(--green)}
.headline-price .big.muted{color:var(--muted)}
.headline-price .variant{color:var(--muted);font-size:13px;margin-left:8px}
.metric-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mchip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);
  color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  cursor:pointer;line-height:1.1;transition:border-color .12s,background .12s}
.mchip b{font-size:15px;font-weight:800;color:var(--text);text-transform:none;letter-spacing:0}
.mchip:hover{border-color:var(--green)}
.mchip.active{border-color:var(--green);background:color-mix(in srgb,var(--green) 12%,var(--panel2))}
.mchip.active b{color:var(--green)}
.ptable{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:14px}
.ptable th{color:var(--muted);text-align:right;font-weight:600;padding:6px 10px;border-bottom:1px solid var(--line)}
.ptable th:first-child{text-align:left}
.ptable td{text-align:right;padding:6px 10px;border-bottom:1px solid var(--panel2)}
.ptable td.v{text-align:left;color:var(--muted)}
.ptable td.mk{color:var(--green);font-weight:700}
.buy{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0}
.btn{padding:14px 20px;border-radius:12px;font-weight:700;font-size:15px}
.btn.tcg{background:var(--accent);color:#1a1400}
.btn.ebay{background:var(--panel2);color:var(--text);border:1px solid var(--line)}
.btn.store{background:var(--panel2);color:var(--text);border:1px solid var(--line)}
.buy-label{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin:16px 0 4px}
.buy.actions{margin-top:8px}
.more-stores{color:var(--muted);font-size:13px;margin:10px 0 2px}
.more-stores a{color:var(--text);font-weight:600}
.more-stores a:hover{color:var(--accent2)}
.eu{font-size:10px;background:var(--accent2);color:#fff;padding:1px 5px;border-radius:5px;vertical-align:middle;font-weight:800;margin-left:3px}
.btn:hover{filter:brightness(1.08)}
.cm{color:var(--muted);font-size:13px;margin-top:8px}

/* price history chart */
.pricehist{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:18px 0}
.ph-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.ph-title{font-weight:700;font-size:14px}
.ph-since{color:var(--muted);font-size:12px}
.ph-ranges{display:flex;gap:6px;margin:10px 0 4px}
.phr{padding:4px 12px;border:1px solid var(--line);border-radius:20px;background:transparent;
  color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;transition:all .12s}
.phr:hover{border-color:var(--green);color:var(--text)}
.phr.active{background:var(--green);border-color:var(--green);color:#04110a}
#ph-chart{position:relative;touch-action:pan-y}
.spark .pdot{fill-opacity:.55}
.ph-hair{position:absolute;top:0;height:150px;width:1px;background:var(--muted);opacity:.45;pointer-events:none}
.ph-tip{position:absolute;pointer-events:none;z-index:3;background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;padding:4px 9px;white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.35);line-height:1.25}
.ph-tip b{display:block;color:var(--text);font-weight:800;font-size:13px}
.ph-tip span{color:var(--muted);font-size:10px}
.spark{display:block;margin:2px 0}
.ph-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:14px}
.ph-stats>div{font-size:15px;font-weight:600}
.ph-stats .k{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px;font-weight:600}
.pricehist.building .hint{margin:6px 0 0}
.ph-note{color:var(--muted);font-size:11px;margin:12px 0 0;opacity:.8}
/* Chrono24-style fair-price band (uses TCGplayer low/market/high — no history needed) */
.market-band{margin:16px 0 4px}
.mb-bar{position:relative;height:8px;border-radius:6px;
  background:linear-gradient(90deg,var(--panel2),color-mix(in srgb,var(--green) 30%,var(--panel2)))}
.mb-fill{position:absolute;left:0;top:0;height:100%;border-radius:6px 0 0 6px;
  background:color-mix(in srgb,var(--green) 45%,transparent)}
.mb-mark{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--green);
  border:2px solid var(--bg);transform:translate(-50%,-50%);box-shadow:0 0 0 1px var(--green)}
.mb-ebay{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:#f0b400;
  border:2px solid var(--bg);transform:translate(-50%,-50%)}
.mb-ends{display:flex;justify-content:space-between;margin-top:8px;color:var(--muted);font-size:11px}
.mb-ends span:nth-child(2){color:var(--green);font-weight:700}
.mb-signal{margin-top:10px;font-size:13px;color:var(--muted)}
.mb-signal b{color:var(--text)}
.mb-signal.good b{color:var(--green)}
.mb-signal.warn b{color:#e5534b}

/* sold/graded links + richer card details */
.sold-links{display:flex;gap:16px;flex-wrap:wrap;margin:2px 0 6px}
.sold-links a{color:var(--muted);font-size:13px;font-weight:600}
.sold-links a:hover{color:var(--accent2)}
.btn.wish{background:var(--panel2);color:var(--text);border:1px solid var(--line);cursor:pointer}
.btn.wish.on{background:#3a2036;border-color:#ff7ac4;color:#ff9ed4}
.carddetails{margin-top:30px;border-top:1px solid var(--line);padding-top:22px}
.fact-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.fact{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.fact .k{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.set-symbol{height:16px;vertical-align:middle}
.cd-block{margin-bottom:20px}
.cd-block h3{font-size:14px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 10px}
.attack{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.atk-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.atk-head b{font-size:15px}
.atk-dmg{font-weight:800;color:var(--accent)}
.atk-type{color:var(--muted);font-size:12px}
.atk-cost{color:var(--muted);font-size:12px;margin-top:4px}
.attack p{margin:6px 0 0;font-size:14px;color:var(--text);line-height:1.5}
.cd-wr{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:18px}
.cd-wr .k{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.4px;font-weight:700;margin-bottom:3px}
.cd-wr>div{font-weight:600}
.flavor{font-style:italic;color:var(--muted);font-size:14px;line-height:1.6;border-left:3px solid var(--line);padding-left:14px;margin:6px 0 0}

/* card FAQ (SEO content depth) */
.faq{margin-top:30px;border-top:1px solid var(--line);padding-top:22px}
.faq h2{font-size:14px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 14px}
.faq-item{margin:0 0 16px}
.faq-q{font-size:15px;font-weight:600;margin:0 0 4px;color:var(--fg,inherit)}
.faq-a{font-size:14px;line-height:1.6;color:var(--muted);margin:0}

/* other printings */
.printings{margin-top:30px;border-top:1px solid var(--line);padding-top:22px}
.printings h3{font-size:14px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 14px}

/* search: load more */
#loadmore-wrap{text-align:center;margin-top:20px}

/* set sort tools */
.set-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.set-tools label{color:var(--muted);font-size:13px;display:inline-flex;align-items:center;gap:8px}
.set-tools select{background:var(--panel);border:1px solid var(--line);border-radius:9px;color:var(--text);
  padding:7px 10px;font-size:13px;font-weight:600;cursor:pointer}

/* branded error page */
.errpage{text-align:center;padding:56px 0 40px}
.err-code{font-size:66px;font-weight:800;line-height:1;
  background:linear-gradient(90deg,var(--accent2),#7a3bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.errpage h1{margin:8px 0 8px}
.errpage .searchbox{margin:22px auto 0}
.err-links{color:var(--muted);font-size:14px;margin-top:18px}
.err-links a{color:var(--accent2)}

.foot{margin-top:64px;border-top:1px solid var(--line);background:var(--panel)}
.foot-grid{max-width:1080px;margin:0 auto;padding:36px 16px 22px;display:grid;
  grid-template-columns:2fr 1fr 1fr;gap:30px}
.foot-brand .brand{font-weight:800;font-size:18px;margin-bottom:10px}
.foot-brand p{color:var(--muted);font-size:13px;max-width:430px;line-height:1.6}
.foot-links h4{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 10px}
.foot-links a{display:block;color:var(--text);font-size:14px;padding:3px 0}
.foot-links a:hover{color:var(--accent2)}
.foot-legal{border-top:1px solid var(--line)}
.foot-legal p{max-width:1080px;margin:0 auto;padding:16px;color:var(--muted);font-size:12px;line-height:1.6}
@media(max-width:640px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1} }

@media(max-width:640px){
  .detail-grid{grid-template-columns:1fr}
  .big-thumb{max-width:260px;margin:0 auto}
}

/* sets browsing */
.set-series{margin:6px 0 28px}
.set-series>h2{font-size:15px;margin:0 0 12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.set-tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;
  display:flex;flex-direction:column;align-items:center;text-align:center;transition:transform .12s ease,border-color .12s ease}
.set-tile:hover{transform:translateY(-3px);border-color:var(--accent2)}
.set-logo{height:56px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.set-logo img{max-height:56px;max-width:100%}
.set-tile .set-name{font-weight:700;font-size:14px}
.set-meta{color:var(--muted);font-size:12px;margin-top:4px}
.set-head{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.set-hero-logo{max-height:78px;margin-bottom:2px}
.set-completion{width:100%;max-width:360px;margin-top:6px}
.setbar{height:8px;background:var(--panel2);border-radius:99px;overflow:hidden}
.setbar-fill{height:100%;background:var(--green);width:0}
.set-completion span{display:block;color:var(--muted);font-size:12px;margin-top:5px}
.card.owned{border-color:var(--green)}
.card.owned::after{content:"✓ owned";position:absolute;top:8px;left:8px;background:var(--green);color:#04210f;
  font-size:10px;font-weight:800;padding:2px 6px;border-radius:7px}

/* nav + badges */
.nav{margin-left:auto;display:flex;gap:16px;align-items:center;font-size:14px;flex-wrap:wrap;justify-content:flex-end}
.nav a{color:var(--muted);font-weight:600}
.nav a.active,.nav a:hover{color:var(--text)}
.navtoggle{display:none;margin-left:auto;background:var(--panel2);border:1px solid var(--line);
  color:var(--text);font-size:20px;line-height:1;padding:6px 12px;border-radius:10px;cursor:pointer}
@media(max-width:640px){
  .navtoggle{display:block}
  .nav{margin-left:0;flex-basis:100%;order:4;display:none;flex-direction:column;align-items:stretch;
    gap:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-top:8px;overflow:hidden}
  .nav.open{display:flex}
  .nav a{padding:13px 16px;border-bottom:1px solid var(--line);font-size:15px}
  .nav a:last-child{border-bottom:none}
}
/* below-fold ad slot */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* set-list grade toggle */
.grade-toggle{display:inline-flex;gap:6px;margin-left:auto}
.gt{padding:5px 12px;border:1px solid var(--line);border-radius:20px;background:transparent;
  color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;transition:all .12s}
.gt:hover{border-color:var(--green);color:var(--text)}
.gt.active{background:var(--green);border-color:var(--green);color:#04110a}
.card .price sup.est{font-size:8px;color:var(--muted);margin-left:2px;vertical-align:super}
/* graded values (Ungraded / PSA 9 / PSA 10) */
.graded{margin:18px 0}
.graded-title{font-weight:700;font-size:15px}
.graded-row{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.gcard{flex:1 1 120px;min-width:110px;display:flex;flex-direction:column;gap:3px;padding:12px 14px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;transition:border-color .12s}
.gcard.raw{background:var(--panel2);border-color:color-mix(in srgb,var(--green) 40%,var(--line))}
.gcard:hover{border-color:var(--accent2)}
.glabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.gprice{font-size:20px;font-weight:800;color:var(--text)}
.gcard.raw .gprice{color:var(--green)}
.gprice sup{font-size:9px;font-weight:700;color:var(--muted);margin-left:2px;vertical-align:super}
.gsold{font-size:11px;color:var(--accent2);font-weight:600}
.graded-note{color:var(--muted);font-size:11px;margin:10px 0 0;opacity:.85;max-width:60ch}
/* homepage new-sets row */
.setrow{display:flex;gap:10px;overflow-x:auto;padding:4px 0 8px;-webkit-overflow-scrolling:touch}
.setpill{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;width:120px;
  padding:12px 10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;text-align:center}
.setpill img{height:34px;max-width:100px;object-fit:contain}
.setpill span{font-size:12px;font-weight:600;color:var(--muted);line-height:1.2}
.setpill:hover{border-color:var(--accent2)}.setpill:hover span{color:var(--text)}
/* homepage methodology / trust block */
.methodology{margin:32px 0 8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.methodology h2{margin:0 0 8px}
.methodology p{color:var(--muted);font-size:14px;line-height:1.7;max-width:70ch;margin:0}
.ad-slot{margin:22px 0;text-align:center;min-height:90px}
.ad-label{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);opacity:.6;margin-bottom:4px}
.badge{display:inline-block;min-width:18px;padding:1px 6px;border-radius:20px;background:var(--accent2);
  color:#fff;font-size:11px;font-weight:800;text-align:center;vertical-align:middle}

/* add button on card tiles */
.card{position:relative}
.addbtn{position:absolute;top:8px;right:8px;z-index:2;width:30px;height:30px;border:none;border-radius:9px;
  background:rgba(59,108,255,.92);color:#fff;font-size:19px;font-weight:800;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center}
.addbtn:hover{background:var(--accent2)}
.addbtn.added{background:var(--green)}
.btn.add{background:var(--accent2);color:#fff;border:none;cursor:pointer}
.btn.add.added{background:var(--green)}

/* portfolio header + stats */
.port-head h1{margin:0 0 6px}
.port-stats{display:flex;flex-wrap:wrap;gap:22px;margin:14px 0 24px;padding:16px 18px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.stat .k{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.stat .v{font-size:24px;font-weight:800;margin-top:2px}
.v.green,.green{color:var(--green)}
.v.red,.red{color:#ff5d6c}

/* tables */
.col-table{width:100%;border-collapse:collapse;font-size:14px}
.col-table th{color:var(--muted);text-align:left;font-weight:600;padding:10px;border-bottom:1px solid var(--line)}
.col-table td{padding:10px;border-bottom:1px solid var(--panel2);vertical-align:middle}
.col-table td.val{font-weight:800;color:var(--green)}
.cardcell{display:flex;align-items:center;gap:10px}
.cardcell img{width:34px;border-radius:4px}
.cardcell a{display:flex;flex-direction:column;line-height:1.2}
.cardcell span{color:var(--muted);font-size:12px}
.qi,.ci{width:78px;padding:7px 8px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--text);font-size:14px}
.qi{width:58px}
.x{background:transparent;border:none;color:var(--muted);font-size:16px;cursor:pointer}
.x:hover{color:#ff5d6c}

/* traffic stats bars */
.statbars{display:flex;gap:5px;align-items:stretch;height:130px;margin:18px 0;padding:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.statbar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.sb-fill{background:var(--accent2);border-radius:4px 4px 0 0;min-height:2px}
.sb-n{text-align:center;font-size:10px;color:var(--text);margin-top:3px}
.sb-d{text-align:center;font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden}

/* premium waitlist (fake-door demand test) */
.btn.alert{background:var(--panel2);color:var(--text);border:1px solid var(--line);cursor:pointer}
.btn.alert:hover{border-color:#ff9ed4;color:#ff9ed4}
.prebanner{background:linear-gradient(90deg,rgba(59,108,255,.14),rgba(122,59,255,.14));
  border:1px solid var(--line);border-radius:var(--radius);padding:13px 16px;margin:0 0 16px;font-size:14px}
.prebanner a{color:var(--accent2);font-weight:700;white-space:nowrap}
.premodal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:18px}
.premodal[hidden]{display:none}   /* must beat the display:flex above, or `hidden` never hides it */
.prebox{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;max-width:420px;width:100%;padding:26px 24px}
.preclose{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer}
.prebadge{display:inline-block;background:linear-gradient(90deg,var(--accent2),#7a3bff);color:#fff;font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px;letter-spacing:.3px}
.prebox h3{margin:12px 0 4px;font-size:22px}
.presub{color:var(--muted);font-size:14px;margin:0 0 14px}
.prefeat{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:9px}
.prefeat li{font-size:14px;line-height:1.4}
.preprice{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13px;color:var(--muted);text-align:center;margin-bottom:14px}
.preprice b{color:var(--text)}
#preform{display:flex;flex-direction:column;gap:9px}
#preform input{padding:12px 14px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;color:var(--text);font-size:15px;outline:none}
#preform input:focus{border-color:var(--accent2)}
#prebtn{padding:13px;background:var(--accent2);color:#fff;border:none;border-radius:10px;font-weight:700;font-size:15px;cursor:pointer}
#prebtn:hover{filter:brightness(1.08)}
.prefine{color:var(--muted);font-size:11.5px;margin-top:10px;line-height:1.5;text-align:center}
.premsg{color:var(--green);font-size:14px;font-weight:600;text-align:center;margin-top:10px}

/* trending in search */
.trend-h{font-size:16px;margin:24px 0 12px}.trend-h small{color:var(--muted);font-weight:500;font-size:13px}
.trend-h.up{color:var(--green)}
.trend-list{display:flex;flex-direction:column;gap:6px}
.trend-row{display:grid;grid-template-columns:40px 1fr 100px 56px;align-items:center;gap:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 14px;
  color:var(--text);text-decoration:none;transition:border-color .12s ease}
.trend-row:hover{border-color:var(--accent2)}
.trend-thumb{display:flex;align-items:center;justify-content:center;height:52px}
.trend-thumb img{max-width:40px;max-height:52px;border-radius:4px}
.trend-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trend-price{color:var(--muted);font-weight:600;font-size:12px;margin-left:2px}
.trend-bar{height:7px;background:var(--panel2);border-radius:99px;overflow:hidden}
.trend-bar>span{display:block;height:100%;background:var(--accent2);border-radius:99px}
.trend-rise,.trend-int{text-align:right;font-weight:800;font-size:14px}
.trend-int{color:var(--muted)}
.seeall{font-size:13px;font-weight:600;color:var(--accent2);margin-left:8px;text-decoration:none}
.trend-chips{display:flex;flex-wrap:wrap;gap:8px}
.tchip{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 14px;
  font-size:14px;font-weight:600;color:var(--text);text-decoration:none}
.tchip:hover{border-color:var(--accent2)}
.tchip b{font-weight:800;margin-left:4px}
@media(max-width:560px){.trend-row{grid-template-columns:40px 1fr 60px 48px;gap:8px}}

/* biggest movers */
.movers-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.mover-panel h2{font-size:16px;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.mover-panel h2.up{color:var(--green)}
.mover-panel h2.down{color:#ff5d6c}
.col-table td.prices{color:var(--muted);font-size:13px;white-space:nowrap}
.col-table td.prices b{color:var(--text)}
.col-table td.pct{text-align:right;font-weight:800;white-space:nowrap}
@media(max-width:720px){ .movers-cols{grid-template-columns:1fr} }

/* collection/wishlist toolbar + tabs */
.col-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:2px 0 18px}
.tabs{display:flex;gap:6px}
.tab{padding:8px 14px;border-radius:10px;font-weight:700;font-size:14px;color:var(--muted);border:1px solid transparent}
.tab:hover{color:var(--text)}
.tab.active{background:var(--panel);border-color:var(--line);color:var(--text)}
.tool-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn-sm{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px 12px;
  font-size:13px;font-weight:600;color:var(--text);cursor:pointer;display:inline-block}
.btn-sm:hover{border-color:var(--accent2)}
.io-status{color:var(--green);font-size:13px}
.col-table td .move{padding:5px 9px}

/* sealed add form */
.sealed-add{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 24px}
.sealed-add input{padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--text);font-size:14px}
.sealed-add #s-name{flex:1;min-width:220px}
.sealed-add input[type=number]{width:120px}
.sealed-add button{padding:12px 20px;background:var(--accent2);color:#fff;border:none;border-radius:10px;font-weight:700;cursor:pointer}

.empty{text-align:center;color:var(--muted);padding:40px 10px}
.empty a{color:var(--accent2)}