/* Layout: phone HUD shell — sticky header, angular clipped panels, fixed neon tab dock */
:root{
  --bg:#07080f; --panel:#0e1120; --panel2:#151a2e; --fg:#e9ecff; --muted:#7f88b3; --line:#232a48;
  --accent:#00e5ff; --accent2:#ff2bd6; --accent-ink:#04060c; --good:#39ff9e; --bad:#ff4d6d;
  --pkm:#ffd23f; --pkmjp:#ff5fa8; --mtg:#ff8a3d; --op:#ff2b55;
  --surface:var(--panel); --sunk:var(--panel2);
  --display:"Chakra Petch","Arial Narrow",system-ui,sans-serif;
  --body:"Chakra Petch",system-ui,-apple-system,sans-serif;
  --mono:"Share Tech Mono",ui-monospace,Menlo,monospace;
  --cut:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  --cut-s:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.45;
  background-image:radial-gradient(ellipse 80% 40% at 50% -10%,#00e5ff1f,transparent 70%),radial-gradient(ellipse 60% 40% at 110% 30%,#ff2bd614,transparent 70%),linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);
  background-size:auto,auto,28px 28px,28px 28px;background-attachment:fixed}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.app{max-width:480px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:linear-gradient(var(--bg) 70%,transparent);padding-block:14px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.14em;text-transform:uppercase}
.brand span{color:var(--accent);text-shadow:0 0 12px #00e5ff99}
.sample{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent2);border:1px solid #ff2bd666;padding:3px 9px;clip-path:var(--cut-s)}
h2{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:24px 0 10px;display:flex;align-items:center;gap:10px}
h2::before{content:"//";color:var(--accent)}
h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.screen{display:flex;flex-direction:column}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:12px;color:var(--muted)}
.lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* panels */
.value,.list,.set,.match,.chart,.kv{background:linear-gradient(160deg,var(--panel2),var(--panel));clip-path:var(--cut);position:relative}
.value{padding:18px}
.value::after,.match::after{content:"";position:absolute;top:0;left:0;width:60px;height:2px;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.value .big{font-family:var(--display);font-weight:700;font-size:42px;line-height:1.05;letter-spacing:.01em;text-shadow:0 0 22px #00e5ff40}
.value .delta{color:var(--good);font-family:var(--mono);font-size:13px}
.value svg{width:100%;height:70px;display:block;margin-top:12px;filter:drop-shadow(0 0 6px #00e5ff88)}
.split{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}
.split div{border-left:2px solid var(--c);padding-left:8px;min-width:0}
.split b{display:block;font-size:15px;font-weight:600}
.split small{color:var(--muted);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.chip{flex:none;border:1px solid var(--line);background:var(--panel);color:var(--muted);padding:7px 13px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;clip-path:var(--cut-s);transition:color .15s,background .15s}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.list{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:11px 14px;border:0;border-bottom:1px solid var(--line);cursor:pointer;background:none;text-align:left;color:inherit;font:inherit;width:100%;transition:background .15s}
.row:last-child{border-bottom:0}
.row:hover{background:#00e5ff0d}
.row:focus-visible,.chip:focus-visible,.btn:focus-visible,.tab:focus-visible,.alt:focus-visible,.back:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.row .t{min-width:0}
.row .t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.row .p{text-align:right}
.row .p b{display:block;font-weight:600}
.up{color:var(--good);font-family:var(--mono);font-size:12px}.dn{color:var(--bad);font-family:var(--mono);font-size:12px}
.thumb{width:44px;aspect-ratio:63/88;max-width:100%;background:linear-gradient(160deg,var(--c) 0 38%,var(--panel2) 38%);border:1px solid var(--c);position:relative;display:block;box-shadow:0 0 10px color-mix(in srgb,var(--c) 35%,transparent);clip-path:var(--cut-s)}
.thumb::after{content:"";position:absolute;inset:18% 12% 30%;background:color-mix(in srgb,var(--c) 28%,var(--bg))}
.thumb.sealed{aspect-ratio:1/1;background:linear-gradient(135deg,var(--c) 0 55%,color-mix(in srgb,var(--c) 45%,var(--bg)) 55%)}
.thumb.sealed::after{inset:30% 20%}
.thumb.graded{border-color:#c9d1ff;background:linear-gradient(#c9d1ff33 0 22%,var(--c) 22% 50%,var(--panel2) 50%)}
.thumb.graded::after{inset:30% 14% 12%}
.badge{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:0 5px;margin-right:6px;border:1px solid var(--accent2);color:var(--accent2)}
.badge.graded{border-color:var(--accent);color:var(--accent)}
/* sets */
.sets{display:flex;flex-direction:column;gap:10px}
.set{padding:13px 15px;display:flex;flex-direction:column;gap:9px}
.set .top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.set .top b{font-weight:600;min-width:0}
.bar{height:6px;background:var(--bg);overflow:hidden;position:relative}
.bar i{display:block;height:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 40%,transparent),var(--c));box-shadow:0 0 10px var(--c)}
.set .meta{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:12px;color:var(--muted)}
/* scan */
.viewer{position:relative;aspect-ratio:3/4;max-width:100%;overflow:hidden;background:radial-gradient(circle at 50% 45%,#141a30,#05060b);margin-top:6px;clip-path:var(--cut);border:1px solid var(--line)}
.viewer .card{position:absolute;left:50%;top:48%;width:58%;aspect-ratio:63/88;transform:translate(-50%,-50%) rotate(-3deg);border-radius:10px;background:linear-gradient(160deg,#ffd23f 0 40%,#22263a 40%);box-shadow:0 10px 30px #000a}
.viewer .reticle{position:absolute;left:50%;top:48%;width:66%;aspect-ratio:63/88;transform:translate(-50%,-50%);
  background:linear-gradient(var(--accent),var(--accent)) top left/22px 2px,linear-gradient(var(--accent),var(--accent)) top left/2px 22px,linear-gradient(var(--accent),var(--accent)) top right/22px 2px,linear-gradient(var(--accent),var(--accent)) top right/2px 22px,linear-gradient(var(--accent),var(--accent)) bottom left/22px 2px,linear-gradient(var(--accent),var(--accent)) bottom left/2px 22px,linear-gradient(var(--accent),var(--accent)) bottom right/22px 2px,linear-gradient(var(--accent),var(--accent)) bottom right/2px 22px;background-repeat:no-repeat;filter:drop-shadow(0 0 6px var(--accent))}
.viewer .reticle::before{content:"";position:absolute;left:6%;right:6%;bottom:6%;height:12%;border:1px dashed var(--accent2);box-shadow:0 0 12px #ff2bd666}
.viewer .reticle::after{content:"";position:absolute;left:0;right:0;height:2px;top:0;background:var(--accent);box-shadow:0 0 14px 3px #00e5ffaa;opacity:.85}
.viewer .hint{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.viewer .hint span{background:#05060bcc;padding:5px 10px;border:1px solid #00e5ff44}
.viewer .mode{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.viewer .mode button{border:1px solid #ffffff22;padding:6px 11px;font:inherit;font-size:12px;font-weight:600;background:#05060bcc;color:#c9d1ff;cursor:pointer;clip-path:var(--cut-s)}
.viewer .mode button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.match{padding:16px;display:flex;flex-direction:column;gap:14px;margin-top:12px}
.conf{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--good);border:1px solid currentColor;padding:2px 8px;white-space:nowrap;text-shadow:0 0 8px #39ff9e88}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cmp figure{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.cmp figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center}
.ph{aspect-ratio:63/88;max-width:100%;position:relative;overflow:hidden;clip-path:var(--cut-s)}
.ph.shot{background:linear-gradient(160deg,#ffd23f 0 40%,#22263a 40%);filter:saturate(.75) brightness(.85)}
.ph.shot::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(#0000 0 3px,#0003 3px 4px);z-index:1}
.ph.db{background:linear-gradient(160deg,var(--c) 0 40%,var(--panel2) 40%);border:1px solid var(--c);box-shadow:inset 0 0 20px color-mix(in srgb,var(--c) 30%,transparent)}
.ph::after{content:"";position:absolute;inset:16% 10% 34%;background:#ffffff1a}
.ph.slab{border:6px solid #c9d1ff40;border-top-width:28px}
.ph.box{aspect-ratio:1/1}
.alts{display:flex;gap:8px;overflow-x:auto;margin-top:6px;padding-bottom:2px;scrollbar-width:none}
.alt{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px;border:1px solid var(--line);background:var(--bg);cursor:pointer;color:inherit;font:inherit;clip-path:var(--cut-s)}
.alt.on{border-color:var(--accent);box-shadow:inset 0 0 12px #00e5ff33}
.alt .mono{font-size:10px;text-align:center;line-height:1.3}
.field{display:block;width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line);background:var(--bg);color:var(--accent);font-size:14px;box-sizing:border-box;clip-path:var(--cut-s)}
.field:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.actions{display:flex;gap:8px}
.btn{flex:1;padding:13px;font:inherit;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:13px;cursor:pointer;border:1px solid var(--line);background:var(--bg);color:var(--fg);clip-path:var(--cut-s)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 0 18px #00e5ff66}
.qty{display:flex;align-items:center;gap:12px}
.qty button{width:34px;height:34px;border:1px solid var(--line);background:var(--bg);color:var(--accent);font-size:18px;cursor:pointer;clip-path:var(--cut-s)}
/* detail */
.detail .hero{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:start}
.detail .hero .thumb{width:110px}
.detail h1{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.1;margin:2px 0 4px;text-wrap:balance}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-top:16px}
.kv div{background:var(--panel);padding:11px 13px}
.kv small{display:block;color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.kv b{font-weight:600}
.chart{padding:14px}
.chart svg{width:100%;height:150px;display:block;filter:drop-shadow(0 0 6px #00e5ff88)}
.back{background:none;border:0;color:var(--accent);font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:0;cursor:pointer}
/* tab dock */
nav{position:fixed;left:0;right:0;bottom:0;z-index:6;background:#07080fee;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
nav::before{content:"";position:absolute;top:-1px;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
nav .in{max-width:480px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);align-items:end}
.tab{background:none;border:0;color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:9px 0 11px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.tab svg{width:22px;height:22px}
.tab[aria-current="page"]{color:var(--accent);text-shadow:0 0 8px #00e5ff88}
.tab[aria-current="page"] svg{filter:drop-shadow(0 0 5px var(--accent))}
.tab.scan .disc{width:56px;height:56px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink);display:grid;place-items:center;margin-top:-26px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);filter:drop-shadow(0 0 12px #00e5ffaa)}
.toast{position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--panel2);color:var(--accent);border:1px solid var(--accent);padding:9px 16px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;z-index:9;box-shadow:0 0 20px #00e5ff44;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}
.settings .list .row{grid-template-columns:1fr auto;cursor:default}
  .bar i{transition:width .6s cubic-bezier(.2,.8,.2,1)}
  .viewer .reticle::after{animation:sweep 2.4s ease-in-out infinite}
  @keyframes sweep{0%,100%{top:2%}50%{top:96%}}
  .screen{animation:in .25s ease-out}
  @keyframes in{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}


/* ---------- additions for the working app ---------- */
.brands{display:flex;flex-direction:column;gap:10px}
.brand-tile{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:12px;text-align:left;padding:20px 18px;border:1px solid color-mix(in srgb,var(--c) 45%,var(--line));background:linear-gradient(120deg,color-mix(in srgb,var(--c) 22%,var(--panel)),var(--panel) 65%);color:var(--fg);font:inherit;cursor:pointer;clip-path:var(--cut);overflow:hidden;text-decoration:none}
.brand-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c);box-shadow:0 0 14px var(--c)}
.brand-tile:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.bt-name{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.06em;text-transform:uppercase}
.brand-tile .mono{grid-column:1}
.bt-arrow{grid-column:2;grid-row:1/3;align-self:center;font-size:28px;color:var(--c);text-shadow:0 0 10px var(--c)}
.brand-head{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:.06em;text-transform:uppercase;margin:10px 0 12px;text-shadow:0 0 18px color-mix(in srgb,var(--c) 60%,transparent);border-left:3px solid var(--c);padding-left:10px}
.search{display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid var(--line);background:var(--panel);clip-path:var(--cut-s)}
.search svg{width:18px;height:18px;color:var(--accent);flex:none}
.search input{flex:1;min-width:0;background:none;border:0;color:var(--fg);font:inherit;font-size:16px;padding:12px 0}
.search input:focus{outline:none}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 12px #00e5ff33}

/* real card images */
.thumb{overflow:hidden}
.thumb img,.ph img,.gcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.thumb.sealed img,.ph.box img,.gcard.sealed img{object-fit:contain;background:var(--panel2)}
.thumb.has-img::after,.ph.has-img::after{display:none}
.ph{background:var(--panel2)}
.ph.shot img{object-fit:cover}
.big-img{position:relative;width:100%;max-width:300px;margin:0 auto;aspect-ratio:63/88;clip-path:var(--cut);background:var(--panel2);border:1px solid var(--c, var(--line));box-shadow:0 0 30px color-mix(in srgb,var(--c, var(--accent)) 30%,transparent)}
.big-img.sealed{aspect-ratio:1/1}
.big-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.noimg{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--muted);text-align:center;padding:6px;z-index:0}

/* set binder grid */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gcard{position:relative;aspect-ratio:63/88;background:var(--panel2);clip-path:var(--cut-s);border:0;padding:0;cursor:pointer;color:inherit;font:inherit;display:block;width:100%}
.gcard.missing img{filter:grayscale(1) brightness(.35)}
.gcard .tag{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:space-between;gap:4px;padding:3px 6px;font-family:var(--mono);font-size:10px;background:#05060bd9;color:var(--muted)}
.gcard .tag b{color:var(--good);font-weight:400}
.gcard:not(.missing){outline:1px solid color-mix(in srgb,var(--c) 70%,transparent);outline-offset:-1px}
.gcard:focus-visible{outline:2px solid var(--accent)}

/* forms */
.form{display:flex;flex-direction:column;gap:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.two>*{min-width:0}
.field{display:block;width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;box-sizing:border-box;clip-path:var(--cut-s)}
textarea.field{min-height:70px;resize:vertical}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px}
.switch{width:46px;height:26px;border:1px solid var(--line);background:var(--bg);position:relative;cursor:pointer;flex:none;clip-path:var(--cut-s)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:var(--muted);transition:transform .15s}
.switch[aria-checked="true"]{border-color:var(--accent2)}
.switch[aria-checked="true"]::after{transform:translateX(20px);background:var(--accent2);box-shadow:0 0 8px var(--accent2)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 50%,var(--line))}
.btn.small{flex:none;padding:9px 14px;font-size:12px}
.btn:disabled{opacity:.5;cursor:default}
.btn.block{width:100%;display:block;text-align:center;text-decoration:none}
a.btn{text-decoration:none;display:inline-block;text-align:center}

/* status + banners */
.banner{display:flex;gap:12px;align-items:center;padding:12px 14px;margin-top:12px;background:color-mix(in srgb,var(--accent2) 10%,var(--panel));border:1px solid #ff2bd655;clip-path:var(--cut-s);font-size:14px}
.banner.info{background:color-mix(in srgb,var(--accent) 8%,var(--panel));border-color:#00e5ff44}
.banner b{color:var(--fg)}
.banner .grow{flex:1;min-width:0}
.empty{text-align:center;padding:36px 16px;color:var(--muted);display:flex;flex-direction:column;gap:12px;align-items:center}
.empty b{font-family:var(--display);font-size:20px;color:var(--fg);letter-spacing:.04em}
.progress{height:4px;background:var(--bg);margin-top:8px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.spinner{width:18px;height:18px;border:2px solid #00e5ff33;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{height:62px;background:linear-gradient(90deg,var(--panel),var(--panel2),var(--panel));background-size:200% 100%;animation:shimmer 1.2s infinite;clip-path:var(--cut-s)}
@keyframes shimmer{to{background-position:-200% 0}}
.price-rows{display:flex;flex-direction:column;gap:1px;background:var(--line);clip-path:var(--cut-s)}
.price-rows div{display:flex;justify-content:space-between;padding:10px 12px;background:var(--panel)}
.price-rows span{color:var(--muted)}
.sel{appearance:none;background:var(--panel);color:var(--fg);border:1px solid var(--line);padding:7px 28px 7px 12px;font:inherit;font-size:13px;clip-path:var(--cut-s);background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(-45deg,transparent 50%,var(--accent) 50%);background-size:5px 5px;background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%;background-repeat:no-repeat}
.rowbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}

/* scanner */
.viewer video,.viewer img.still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.viewer .shutter{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);width:68px;height:68px;border:0;background:transparent;cursor:pointer;z-index:3;padding:0}
.viewer .shutter span{position:absolute;inset:0;background:linear-gradient(135deg,var(--accent),var(--accent2));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.viewer .shutter span::after{content:"";position:absolute;inset:6px;background:var(--bg);clip-path:inherit}
.viewer .shutter span::before{content:"";position:absolute;inset:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);z-index:1}
.viewer .busy{position:absolute;inset:0;display:grid;place-items:center;background:#05060bb3;z-index:4;font-family:var(--mono);color:var(--accent);letter-spacing:.1em;text-transform:uppercase;font-size:12px}
.viewer .busy div{display:flex;flex-direction:column;align-items:center;gap:10px}
.viewer.no-cam{display:grid;place-items:center;text-align:center;padding:24px}
.viewer.no-cam .msg{display:flex;flex-direction:column;gap:12px;align-items:center;color:var(--muted);max-width:280px}
.viewer.no-cam .msg b{color:var(--fg)}
.viewer .reticle.box{aspect-ratio:4/3;width:80%}
.viewer .reticle.box::before{display:none}
.kindbar{display:flex;gap:6px;margin-top:10px}
.kindbar .chip{flex:1;text-align:center}
.cands{display:flex;gap:8px;overflow-x:auto;margin-top:6px;padding-bottom:2px;scrollbar-width:none}
.cand{flex:none;width:72px;display:flex;flex-direction:column;gap:4px;padding:6px;border:1px solid var(--line);background:var(--bg);cursor:pointer;color:inherit;font:inherit;clip-path:var(--cut-s);text-align:left}
.cand.on{border-color:var(--accent);box-shadow:inset 0 0 12px #00e5ff33}
.cand .thumb{width:58px}
.cand .mono{font-size:9px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.read{font-family:var(--mono);font-size:11px;color:var(--muted)}
.read b{color:var(--accent);font-weight:400}
.lock{min-height:70vh;display:flex;flex-direction:column;justify-content:center;gap:14px;max-width:320px;margin:0 auto;width:100%}
.lock .brand{text-align:center;font-size:28px}
nav .in{grid-template-columns:1fr 1fr 76px 1fr 1fr}
.tab{text-decoration:none}
.tab.scan{justify-self:center;width:76px}

/* scanner layout: frame up top, shutter below it, hint under the viewer */
.viewer .reticle{top:44%;width:62%}
.viewer .shutter{bottom:14px}
.scanhint{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);text-align:center;margin-top:10px}

/* art index progress */
.artprog{display:flex;flex-direction:column;gap:10px;font-weight:400}
.aprow{display:flex;flex-direction:column;gap:5px}
.aptop{display:flex;flex-direction:column;gap:2px;font-size:13px}
.aptop b{font-weight:600}
.aptop .mono{font-size:11px}
.aprow .bar{height:6px}

/* rarity symbols + printing tags */
.rar{display:inline-flex;align-items:center;gap:4px;margin-right:7px;vertical-align:middle;font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase}
.rar .rglyph{display:inline-flex;gap:1px}
.rar svg{width:11px;height:11px;fill:currentColor;filter:drop-shadow(0 0 2px currentColor)}
.rar .rlabel{color:inherit;opacity:.95}
.rar-black{color:#e9ecff}
.rar-silver{color:#c9d6e8}
.rar-gold{color:#ffd23f}
.rar-orange{color:#ff8a3d}
.rar-purple{color:#c084fc}
.rar-pink{color:#ff5fa8}
.rar-bw{color:#ffffff}
.rar-rainbow{color:#ff2bd6}
.rar-rainbow svg{fill:url(#rainbow)}
.badge.sub-holo{border-color:#00e5ff;color:#00e5ff}
.badge.sub-reverse{border-color:#c084fc;color:#c084fc}
.badge.sub-normal{border-color:var(--muted);color:var(--muted)}
.legend{margin-top:10px;color:var(--muted);font-size:13px}
.legend summary{cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.legendgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-top:10px}
.legendgrid>div{display:flex;align-items:center;gap:8px;min-width:0}
.legendgrid .rar{margin:0}

/* printing picker */
.prints{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.print{display:flex;flex-direction:column;gap:4px;text-align:left;padding:9px 11px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;cursor:pointer;clip-path:var(--cut-s)}
.print.on{border-color:var(--accent);box-shadow:inset 0 0 14px #00e5ff22}
.print .ptop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.print .ptop b{font-weight:600}
.print .pdesc{font-size:12px;color:var(--muted);line-height:1.35}
.print .badge{margin:0}

/* ---------- desktop layout (≥900px): side rail, wide grids, two-column detail ---------- */
@media (min-width:900px){
  body{font-size:15px}
  .app{max-width:1280px;margin:0;padding-left:236px;padding-right:36px;padding-bottom:48px}
  header{padding-block:22px 14px}
  .brand{font-size:24px}
  nav{top:0;bottom:0;right:auto;left:0;width:204px;border-top:0;border-right:1px solid var(--line);padding:26px 12px 20px;background:#0a0c16f2}
  nav::before{top:0;left:0;right:0;width:auto;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 12px var(--accent)}
  nav .in{display:flex;flex-direction:column;gap:4px;max-width:none;margin:0;align-items:stretch}
  .tab{flex-direction:row;justify-content:flex-start;gap:12px;align-items:center;padding:11px 12px;font-size:12px;letter-spacing:.14em;clip-path:var(--cut-s);transition:background .15s,color .15s}
  .tab:hover{background:#ffffff08;color:var(--fg)}
  .tab[aria-current="page"]{background:#00e5ff14;box-shadow:inset 2px 0 0 var(--accent)}
  .tab.scan{width:auto;justify-self:auto;margin-block:6px}
  .tab.scan .disc{width:34px;height:34px;margin:0;flex:none}
  .tab.scan .disc svg{width:18px;height:18px}
  .toast{bottom:28px;left:calc(50% + 102px)}
  /* collection */
  .value{padding:24px 28px}
  .value .big{font-size:56px}
  .value svg{height:110px}
  .split{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
  .chips{flex-wrap:wrap}
  .row{grid-template-columns:58px 1fr auto;gap:16px;padding:12px 18px}
  .row .thumb{width:58px}
  /* search + sets */
  .brands{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  .brand-tile{padding:26px 22px}
  .bt-name{font-size:28px}
  .sets{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  .grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
  .gcard .tag{font-size:11px;padding:5px 8px}
  .legendgrid{grid-template-columns:repeat(4,1fr)}
  .prints{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
  .kv{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
  .two{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  /* product detail: image pinned left, everything else in a column on the right */
  .detail{display:grid;grid-template-columns:340px minmax(0,1fr);column-gap:36px;align-content:start}
  .detail>*{grid-column:2;min-width:0}
  .detail>.back{grid-column:1/-1}
  .detail>.big-img{grid-column:1;grid-row:3/span 40;max-width:none;width:100%;position:sticky;top:84px;align-self:start}
  .detail:not(:has(>.big-img)){grid-template-columns:minmax(0,1fr)}
  .detail:not(:has(>.big-img))>*{grid-column:1}
  .detail h1{font-size:36px}
  .detail .hero{grid-template-columns:220px 1fr;gap:28px}
  .detail .hero .thumb{width:220px}
  .chart svg{height:220px}
  /* scanner */
  .viewer{max-width:560px;width:100%;margin:6px auto 0}
  .kindbar{max-width:560px;margin-inline:auto;width:100%}
  .cands{flex-wrap:wrap}
  .cmp{max-width:620px}
  .lock{min-height:60vh}
}
@media (min-width:1500px){
  .app{max-width:1500px}
  .grid{grid-template-columns:repeat(8,minmax(0,1fr))}
  .brands{grid-template-columns:repeat(4,1fr)}
  .sets{grid-template-columns:repeat(3,1fr)}
}

/* set rows with a cover card (Search tab) */
nav .in{grid-template-columns:repeat(5,1fr)}
.tab{font-size:9px;letter-spacing:.08em}
/* search bar with the camera on the left */
.searchrow{display:flex;gap:8px;align-items:stretch}
.searchrow .search{flex:1;min-width:0}
.cambtn{flex:none;width:50px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--accent-ink);text-decoration:none;clip-path:var(--cut-s);box-shadow:0 0 14px #00e5ff55}
.cambtn svg{width:24px;height:24px}

.gear{width:36px;height:36px;display:grid;place-items:center;color:var(--muted);border:1px solid var(--line);clip-path:var(--cut-s);background:var(--panel)}
.gear svg{width:18px;height:18px}
.gear[aria-current="page"]{color:var(--accent);border-color:var(--accent);box-shadow:0 0 10px #00e5ff44}
.set.cov{display:grid;grid-template-columns:48px 1fr;gap:12px;text-decoration:none;color:inherit;padding:11px 13px}
.set.cov .cover{width:48px;aspect-ratio:63/88;background:var(--bg);border:1px solid var(--line);position:relative;overflow:hidden;clip-path:var(--cut-s)}
.set.cov .cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.set.cov.none .cover img{filter:grayscale(.6) brightness(.7)}
.set.cov .body{display:flex;flex-direction:column;gap:7px;min-width:0}
.set.cov .top b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- scanner v2: full-bleed viewfinder, result sheet, session tray ---------- */
:root{--navh:80px}
body.on-scan header{background:linear-gradient(#07080fcc,transparent);pointer-events:none}
body.on-scan header a,body.on-scan header .gear{pointer-events:auto}
body.on-scan .app{padding-bottom:0}
.scanner .vf{position:fixed;left:0;right:0;top:0;bottom:calc(var(--navh) + env(safe-area-inset-bottom,0px));background:radial-gradient(circle at 50% 40%,#141a30,#05060b 70%);overflow:hidden;z-index:4}
.scanner .vf video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scanner .vf.no-cam{display:grid;place-items:center}
.scanner .vf .msg{display:flex;flex-direction:column;gap:12px;align-items:center;color:var(--muted);max-width:280px;text-align:center;padding:24px;z-index:1}
.scanner .vf .msg b{color:var(--fg)}
.scanner .vftop{position:absolute;top:calc(env(safe-area-inset-top,0px) + 58px);left:0;right:0;display:flex;justify-content:center;z-index:3}
.seg2{display:flex;gap:2px;padding:3px;background:#05060bcc;border:1px solid #ffffff22;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.seg2 button{padding:7px 16px;font:inherit;font-size:13px;font-weight:600;color:#c9d1ff;background:none;border:0;cursor:pointer}
.seg2 button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.scanner .reticle{position:absolute;left:50%;top:40%;width:72%;aspect-ratio:63/88;transform:translate(-50%,-50%);z-index:2;
  background:linear-gradient(var(--accent),var(--accent)) top left/26px 2px,linear-gradient(var(--accent),var(--accent)) top left/2px 26px,linear-gradient(var(--accent),var(--accent)) top right/26px 2px,linear-gradient(var(--accent),var(--accent)) top right/2px 26px,linear-gradient(var(--accent),var(--accent)) bottom left/26px 2px,linear-gradient(var(--accent),var(--accent)) bottom left/2px 26px,linear-gradient(var(--accent),var(--accent)) bottom right/26px 2px,linear-gradient(var(--accent),var(--accent)) bottom right/2px 26px;background-repeat:no-repeat;filter:drop-shadow(0 0 8px var(--accent))}
.scanner .reticle::after{content:"";position:absolute;left:0;right:0;height:2px;top:0;background:var(--accent);box-shadow:0 0 14px 3px #00e5ffaa;opacity:.85}
.scanner .reticle.slab{width:80%;aspect-ratio:3/4.4}
.scanner .reticle.box{width:80%;aspect-ratio:4/3}
.scanner .hint{position:absolute;left:0;right:0;bottom:206px;text-align:center;z-index:2;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.scanner .hint span{background:#05060bcc;padding:6px 12px;border:1px solid #00e5ff44}
.scanner .controls{position:absolute;left:0;right:0;bottom:104px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 28px;z-index:3}
.scanner .ctl{width:48px;height:48px;display:grid;place-items:center;background:#05060bcc;border:1px solid #ffffff22;color:#c9d1ff;clip-path:var(--cut-s);justify-self:start;cursor:pointer;padding:0}
.scanner .ctl.r{justify-self:end}
.scanner .ctl[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}
.scanner .ctl svg{width:22px;height:22px}
.scanner .shutter{width:78px;height:78px;position:relative;border:0;background:none;padding:0;cursor:pointer}
.scanner .shutter span{position:absolute;inset:0;background:linear-gradient(135deg,var(--accent),var(--accent2));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);filter:drop-shadow(0 0 16px #00e5ff99)}
.scanner .shutter span::after{content:"";position:absolute;inset:6px;background:var(--bg);clip-path:inherit}
.scanner .shutter span::before{content:"";position:absolute;inset:13px;background:linear-gradient(135deg,var(--accent),var(--accent2));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);z-index:1}
.scanner .shutter:active span::before{inset:16px}
.scanner .busy{position:absolute;inset:0;display:grid;place-items:center;background:#05060bb3;z-index:5;font-family:var(--mono);color:var(--accent);letter-spacing:.1em;text-transform:uppercase;font-size:12px}
.scanner .busy div{display:flex;flex-direction:column;align-items:center;gap:10px}
.scanner .upcbox{position:absolute;left:16px;right:16px;bottom:206px;z-index:3}
.scanner .upcbox form{display:grid;grid-template-columns:1fr auto;gap:8px}
.scanner .tray{position:fixed;left:0;right:0;bottom:calc(var(--navh) + env(safe-area-inset-bottom,0px));z-index:5;padding:8px 16px;background:#07080fdd;border-top:1px solid #ffffff10;display:flex;align-items:center;gap:10px;backdrop-filter:blur(8px)}
.scanner .tray .cards{display:flex;gap:6px}
.scanner .tray .cards a{width:30px;aspect-ratio:63/88;position:relative;display:block;overflow:hidden;border:1px solid var(--line)}
.scanner .tray .cards img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scanner .tray .sum{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.scanner .tray .sum b{color:var(--good);font-weight:400}
.scanner .tray .x{background:none;border:0;color:var(--muted);font-size:14px;padding:4px 6px;cursor:pointer}
.scanner .dim{position:fixed;inset:0;background:#05060b99;z-index:6;opacity:0;pointer-events:none;transition:opacity .2s}
.scanner .dim.on{opacity:1;pointer-events:auto}
.scanner .sheet{position:fixed;left:0;right:0;bottom:calc(var(--navh) + env(safe-area-inset-bottom,0px));max-height:calc(100% - var(--navh) - 56px);overflow:auto;background:var(--panel);border-top:1px solid var(--line);z-index:7;padding:0 16px 18px;animation:sheetin .28s cubic-bezier(.2,.8,.2,1)}
.scanner .sheet::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
@keyframes sheetin{from{transform:translateY(40px);opacity:.5}to{transform:none;opacity:1}}
.scanner .grab{width:40px;height:4px;background:var(--line);margin:10px auto 12px}
.scanner .shead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.scanner .src{font-family:var(--mono);font-size:11px;color:var(--muted)}
.scanner .conf.bad{color:var(--bad);text-shadow:none}
.scanner .cmp{margin-top:12px}
.scanner .ph.db{outline:1px solid var(--c);outline-offset:-1px;box-shadow:0 0 18px color-mix(in srgb,var(--c) 30%,transparent)}
.scanner .stitle{margin-top:14px}
.scanner .stitle b{font-size:19px;font-weight:700;display:block}
.scanner .stitle .mono{margin-top:3px}
.scanner #scanform{margin-top:12px}
.scanner .links{display:flex;justify-content:space-between;margin-top:16px}
.scanner .cands{margin-top:6px}
.scanner .reticle::after{animation:sweep 2.4s ease-in-out infinite}

/* slab value lookup */
.slabq{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid var(--line);background:var(--bg);clip-path:var(--cut-s)}
.gradegrid{display:flex;flex-wrap:wrap;gap:6px}
.gradegrid .chip{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:6px 10px;line-height:1.2}
.gradegrid .chip small{font-family:var(--mono);font-size:11px;color:var(--good)}
.badge.cert{border-color:var(--line);color:var(--muted);text-transform:none;letter-spacing:0}
.lock .btn{flex:none}
.lock .lbl{display:block;margin-bottom:0}
button.gcard{border:0;padding:0;font:inherit;text-align:left}
button.gcard.missing:active{filter:brightness(1.3)}
.gcard.missing .tag span:last-child{color:var(--accent)}

/* owned copies on a card page */
.list.owned .orow{grid-template-columns:1fr auto auto;cursor:default;gap:10px}
.oqty{display:flex;align-items:center;gap:6px}
.oqty button{width:32px;height:32px;border:1px solid var(--line);background:var(--bg);color:var(--accent);font-size:16px;cursor:pointer;clip-path:var(--cut-s)}
.oqty button[aria-label="Remove"]{color:var(--muted);font-size:13px}
.oqty button:disabled{opacity:.4}
.oqty b{min-width:22px;text-align:center}
.oedit{color:var(--muted);font-size:22px;line-height:1;padding:0 2px;text-decoration:none}

/* ---------- graded slabs: a clear case with the grader's label ---------- */
.thumb.graded{background:none;border:0;box-shadow:none;clip-path:none;aspect-ratio:auto}
.thumb.graded::after{display:none}
.slab{display:block;position:relative;width:100%;aspect-ratio:72/115;border-radius:7%/4.5%;padding:24% 9% 9%;box-sizing:border-box;
  background:linear-gradient(160deg,#3a4160 0%,#1a1f33 45%,#262c45 100%);box-shadow:inset 0 0 0 1px #ffffff40,inset 0 0 14px #0006,0 4px 14px #0008}
.slab{--glow:#8fb8ff;animation:slabglow 3.2s ease-in-out infinite;overflow:hidden}
.slab::after{content:"";position:absolute;inset:-40% -60%;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,#ffffff10 44%,#ffffff55 50%,#ffffff10 56%,transparent 62%);animation:slabsheen 3.2s ease-in-out infinite}
@keyframes slabglow{0%,100%{box-shadow:inset 0 0 0 1px #ffffff40,inset 0 0 14px #0006,0 4px 14px #0008,0 0 0 0 transparent}
  50%{box-shadow:inset 0 0 0 1px #ffffff80,inset 0 0 14px #0006,0 4px 14px #0008,0 0 16px 2px var(--glow)}}
@keyframes slabsheen{0%{transform:translateX(-45%)}60%,100%{transform:translateX(45%)}}
.slab-psa{--glow:#ff4d5e}.slab-bgs{--glow:#e4c25a}.slab-cgc{--glow:#4d8cff}.slab-sgc{--glow:#c9a227}.slab-tag{--glow:#2ecc71}.slab-ace{--glow:#ff5252}

.slab .slcard{position:absolute;left:9%;right:9%;top:24%;bottom:9%;background:#0b0d1a;overflow:hidden;border-radius:3%/2%;box-shadow:0 0 0 1px #ffffff18,0 2px 8px #0008}
.slab .slcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.slab .slabel{position:absolute;left:6%;right:6%;top:5%;height:16%;display:flex;align-items:center;justify-content:space-between;padding:0 7%;background:#fff;color:#111;font-family:var(--display);font-weight:700;overflow:hidden;border-radius:2px}
.slab .slabel .co{font-size:.55em;letter-spacing:.06em}
.slab .slabel .gr{font-size:.95em;font-family:var(--mono)}
.slab .slabel .sn{display:none}
.slab.big{font-size:22px;max-width:300px;margin:0 auto;padding-top:22%}
.slab.big .slabel{height:14%;padding:0 5%}
.slab.big .slabel .sn{display:flex;flex-direction:column;flex:1;min-width:0;margin:0 10px;font-family:var(--body);font-weight:600;font-size:.42em;line-height:1.2}
.slab.big .slabel .sn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slab.big .slabel .sn span:last-child{font-weight:400;opacity:.75;font-size:.9em}
.slab.big .slcard{top:22%}
/* grader colour schemes (text only, no logos) */
.slab-psa .slabel{background:#fff;color:#111;border-top:3px solid #d41e2f}
.slab-psa .slabel .co{color:#d41e2f}
.slab-bgs .slabel{background:#141414;color:#e4c25a}
.slab-cgc .slabel{background:#0f2a66;color:#fff}
.slab-sgc .slabel{background:#111;color:#fff;border-top:3px solid #c9a227}
.slab-tag .slabel{background:#f6f6f6;color:#111;border-top:3px solid #1b7f4c}
.slab-ace .slabel{background:#1a1a1a;color:#f2f2f2;border-top:3px solid #c62828}
.slabbox{display:block;width:150px}
.detail .hero.hero-slab{grid-template-columns:150px 1fr}
.row .thumb.graded{width:44px}
.list.owned .thumb.graded{width:36px}
.slab:not(.big){font-size:8px}
.slab:not(.big) .slabel{padding:0 6%;border-top-width:2px}
.slab:not(.big) .slabel .co{font-size:6.5px;letter-spacing:0}
.slab:not(.big) .slabel .gr{font-size:8px}

/* social */
.member{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.member:last-child{border-bottom:0}
.avatar{width:44px;height:44px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:18px;color:var(--accent-ink);background:linear-gradient(135deg,var(--accent),var(--accent2));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.member .t b{display:block;font-weight:600}
.member .t .mono{display:block}
.member .n{text-align:right;font-family:var(--mono);font-size:12px;color:var(--muted)}
.member .n b{display:block;color:var(--fg);font-weight:600;font-size:15px}
.profhead{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:center}
.profhead .avatar{width:56px;height:56px;font-size:22px}

.avatar{overflow:hidden;position:relative;flex:none}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avbtn{position:relative;background:none;border:0;padding:0;cursor:pointer}
.avedit{position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--accent);color:var(--accent);font-size:12px;clip-path:var(--cut-s)}
.stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);clip-path:var(--cut-s);margin-top:4px}
.stats4>div{background:var(--panel);padding:10px 8px;text-align:center}
.stats4 small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stats4 b{display:block;font-size:16px;font-weight:600;margin-top:2px}

/* home: 3-line chart, range picker, most valuable grid */
.chart3{width:100%;height:110px;display:block;margin-top:12px}
.legend3{display:flex;gap:14px;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.legend3 span{display:flex;align-items:center;gap:6px}
.legend3 i{width:14px;height:2px;background:var(--c);box-shadow:0 0 6px var(--c)}
.ranges{display:flex;gap:4px;margin-top:12px;padding:3px;background:var(--bg);clip-path:var(--cut-s)}
.rng{flex:1;padding:7px 0;font:inherit;font-size:12px;font-weight:600;color:var(--muted);background:none;border:0;cursor:pointer}
.rng[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);clip-path:var(--cut-s)}
.value .delta.dn{color:var(--bad)}
.topgrid .gcard .tag{justify-content:space-between}
.topgrid .gcard .tag .up{color:var(--good)}.topgrid .gcard .tag .dn{color:var(--bad)}
.topgrid .gcard .art .slab{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:6%/4%}

/* ---------- social feed ---------- */
.feed .search{margin-bottom:10px}
.feedtabs{margin-bottom:12px;display:flex;gap:2px;padding:3px;background:var(--bg);border:1px solid var(--line)}.feedtabs button{flex:1;padding:9px;font:inherit;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--muted);background:none;border:0;cursor:pointer}.feedtabs button.on,.csaud .seg2 button.on{background:var(--accent);color:var(--accent-ink)}
.freqs{margin-bottom:12px;padding:10px 12px;background:var(--panel);border:1px solid var(--accent);clip-path:var(--cut-s)}.freq{display:flex;align-items:center;gap:10px;padding:8px 0}.freq .t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2;color:inherit;text-decoration:none}.freq .mono{font-size:11px}
.compose{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--panel);border:1px solid var(--line);clip-path:var(--cut-s);margin-bottom:14px}
.compose .cwhat{flex:1;text-align:left;background:var(--bg);border:1px solid var(--line);color:var(--muted);font:inherit;font-size:14px;padding:10px 12px;min-width:0;cursor:pointer}
.compose .cphoto{width:40px;height:40px;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));border:0;color:#fff;clip-path:var(--cut-s);cursor:pointer}
.compose .cphoto svg,.pact svg,.csadd svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.posts{display:flex;flex-direction:column;gap:12px}
.post{background:var(--panel);border:1px solid var(--line);clip-path:var(--cut-s);padding:12px 12px 6px}
.phead{display:flex;align-items:center;gap:10px}.phead>a{flex:none}.phead .pwho{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}.phead .pwho b{font-size:15px}.phead .mono{font-size:11px;color:var(--muted)}
.aud{color:var(--accent);font-weight:600}
.pmore{background:none;border:0;color:var(--muted);font-size:18px;letter-spacing:-1px;padding:4px 6px;cursor:pointer}
.ptext{margin:10px 0 0;font-size:15px;line-height:1.45;overflow-wrap:anywhere}
.pimgs{display:grid;gap:4px;margin-top:10px}.pimgs img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--bg);cursor:zoom-in}
.pimgs.n1 img{aspect-ratio:4/5;object-fit:contain;background:#0b0d16}.pimgs.n2,.pimgs.n3,.pimgs.n4{grid-template-columns:1fr 1fr}.pimgs.n3 img:first-child{grid-column:span 2;aspect-ratio:2}
.pcard{display:flex;align-items:center;gap:10px;margin-top:10px;padding:8px 10px;background:var(--bg);border:1px solid var(--line);color:inherit;text-decoration:none}
.pcard .thumb{width:38px;height:53px;flex:none;position:relative;overflow:hidden;background:var(--panel2)}.pcard .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pcard .t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}.pcard .t b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pcard .mono{font-size:11px;color:var(--muted)}.pcard>.num{font-weight:700}
.pbar{display:flex;align-items:center;gap:4px;margin-top:8px;padding-top:6px;border-top:1px solid var(--line);flex-wrap:wrap}
.pact{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--muted);font:inherit;font-size:13px;padding:8px 8px;cursor:pointer}.pact.on{color:var(--pkmjp)}.pact.on svg{fill:currentColor}
.preacts{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;position:relative}
.react{display:inline-flex;align-items:center;gap:4px;background:var(--bg);border:1px solid var(--line);color:inherit;font:inherit;font-size:13px;padding:4px 8px;border-radius:999px;cursor:pointer}.react.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,var(--bg))}.react.add{color:var(--muted);padding:4px 10px}
.rpick{position:absolute;right:0;bottom:36px;display:flex;gap:2px;padding:4px;background:var(--panel2);border:1px solid var(--line);box-shadow:0 8px 24px #000a;z-index:3}.rpick button{background:none;border:0;font-size:20px;padding:4px 6px;cursor:pointer}
.pcomments{border-top:1px solid var(--line);margin-top:4px;padding-top:10px;display:flex;flex-direction:column;gap:10px}.pcomments[hidden]{display:none}
.pc{display:flex;gap:8px;font-size:14px}.pc p{margin:2px 0 0;line-height:1.4;overflow-wrap:anywhere}.pc .mono{font-size:11px;color:var(--muted)}.pcx{background:none;border:0;color:var(--muted);font-size:14px;padding:0 4px;cursor:pointer}
.pcnew{display:flex;gap:8px;margin-bottom:6px}.pcnew input{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);color:inherit;font:inherit;padding:8px 10px}
.csheet{position:fixed;inset:0;background:#000a;z-index:40;display:flex;align-items:flex-end}.csheet[hidden]{display:none}
.cs{width:100%;max-width:480px;margin:0 auto;max-height:92vh;overflow:auto;background:var(--panel);border-top:1px solid var(--line);padding:12px 16px calc(24px + env(safe-area-inset-bottom,0px))}
.cshead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.csaud{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.csaud .mono{font-size:11px}.csaud .seg2 button{padding:6px 10px;font-size:12px}
.csbody{display:flex;gap:10px}.csbody textarea{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);color:inherit;font:inherit;font-size:15px;padding:10px;resize:none}
.csimgs{display:flex;gap:8px;margin-top:10px;align-items:center;flex-wrap:wrap}.csimg{position:relative}.csimg img{width:64px;height:88px;object-fit:cover;display:block}
.csimg button,.cscard button{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--fg);color:var(--bg);border:0;font-size:14px;line-height:1;cursor:pointer}
.cscard{position:relative;display:flex;align-items:center;gap:8px;padding:4px 8px 4px 4px;background:var(--bg);border:1px solid var(--line);font-size:12px;max-width:100%}.cscard .thumb{width:30px;height:42px;position:relative;overflow:hidden;flex:none}.cscard .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.csadd{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);color:inherit;font:inherit;font-size:13px;padding:10px 12px;cursor:pointer}
.cspick{margin-top:10px;max-height:40vh;overflow:auto;border:1px solid var(--line)}.cspick[hidden]{display:none}
.friendbtn{display:inline-flex;align-items:center;gap:6px;margin-top:8px;background:var(--bg);border:1px solid var(--accent);color:var(--accent);font:inherit;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;white-space:nowrap;cursor:pointer}
.friendbtn.is{border-color:var(--line);color:var(--muted)}
.lightbox{position:fixed;inset:0;z-index:50;background:#000d;display:grid;place-items:center;cursor:zoom-out}.lightbox img{max-width:100vw;max-height:100vh;object-fit:contain}
.profval{margin-top:12px;margin-bottom:4px}.profval .big{font-size:36px}
.toprow{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;margin:0 -2px;scroll-snap-type:x proximity;scrollbar-width:none}.toprow::-webkit-scrollbar{display:none}
.toprow .gcard{flex:0 0 96px;scroll-snap-align:start}.toprow .gcard .tag{font-size:9px;padding:2px 4px}.toprow .gcard .slab{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:6%/4%}.toprow .gcard .slab:not(.big){font-size:6px}
.toprow .gcard .tag .up{color:var(--good)}.toprow .gcard .tag .dn{color:var(--bad)}
.toprow .gcard{clip-path:none;border-radius:4px;overflow:hidden}.toprow .gcard img{border-radius:4px}
.topgrid .gcard{clip-path:none;aspect-ratio:auto;background:none;outline:0!important;display:flex;flex-direction:column}
.topgrid .gcard .art{position:relative;aspect-ratio:63/88;width:100%;background:var(--panel2);border-radius:4px;overflow:hidden;outline:1px solid color-mix(in srgb,var(--c) 70%,transparent);outline-offset:-1px}
.topgrid .gcard .art img,.topgrid .gcard .art .noimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.topgrid .gcard .tag{position:static;background:none;padding:4px 2px 0;font-size:11px}.topgrid .gcard .tag .num:first-child{color:var(--fg)}
.topgrid .gcard{text-decoration:none}.topgrid .gcard .tag{font-weight:600}
/* Card scans carry white rounded corners; clip them so only the art shows. */
.thumb img,.ph img,.gcard img,.slcard img,.pcard .thumb img,.cscard .thumb img{border-radius:4.5%/3.2%;transform:scale(1.012)}
.gcard .art,.pcard .thumb,.cscard .thumb{overflow:hidden}
/* Home: most valuable, two-up showcase */
.topgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 12px}.topgrid .gcard{min-width:0}
.topgrid .gcard .art{border-radius:6px;outline:0;box-shadow:0 6px 18px #0009,0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent),0 0 18px color-mix(in srgb,var(--c) 25%,transparent)}
.topgrid .gcard .art .slab{border-radius:7%/4.5%}
.topgrid .gcard .cap{display:flex;flex-direction:column;padding:8px 2px 0;line-height:1.2;min-width:0}
.topgrid .gcard .cap b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topgrid .gcard .cap .mono{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topgrid .gcard .tag{padding:3px 2px 0;font-size:12px;align-items:baseline}.topgrid .gcard .tag .num:first-child{font-size:14px;font-weight:700}
/* Back button: big enough to hit with a thumb */
.backbtn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px 0 8px;margin-left:-4px;background:var(--panel);border:1px solid var(--line);clip-path:var(--cut-s);font-size:12px;font-weight:700;text-decoration:none}
.backbtn svg{width:20px;height:20px;flex:none}.backbtn:active{background:color-mix(in srgb,var(--accent) 18%,var(--panel))}
/* Sort / Filter buttons + option sheet */
.sfbar{display:flex;gap:8px}
.sfbtn{flex:1;display:flex;align-items:center;gap:10px;min-height:46px;padding:6px 12px;background:var(--panel);border:1px solid var(--line);clip-path:var(--cut-s);color:inherit;font:inherit;text-align:left;cursor:pointer;min-width:0}
.sfbtn svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.sfbtn span{display:flex;flex-direction:column;line-height:1.15;min-width:0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sfbtn small{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400}
.sfbtn.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}
.opt{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:46px;padding:0 4px;background:none;border:0;border-bottom:1px solid var(--line);color:inherit;font:inherit;font-size:15px;text-align:left;cursor:pointer}
.opt:last-of-type{border-bottom:0}
.opt i{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none}
.opt[aria-checked="true"]{color:var(--accent);font-weight:600}.opt[aria-checked="true"] i{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 45%,transparent 50%)}
.quicktog{margin-top:10px;padding:10px 12px;background:var(--panel);border:1px solid var(--line);clip-path:var(--cut-s)}.quicktog>span{display:flex;flex-direction:column;line-height:1.2}.quicktog b{font-size:14px}.quicktog small{font-size:11px;color:var(--muted)}
/* Scanner: instant add + confirmation flash */
.vftop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.instant{padding:7px 12px;font:inherit;font-size:12px;font-weight:700;letter-spacing:.04em;color:#c9d1ff;background:#05060bcc;border:1px solid #ffffff22;backdrop-filter:blur(8px);cursor:pointer;white-space:nowrap}
.instant.on{color:#04060c;background:var(--accent);border-color:var(--accent);box-shadow:0 0 14px #00e5ff88}
.added{position:absolute;left:16px;right:16px;bottom:120px;z-index:6;display:flex;align-items:center;gap:12px;padding:10px 12px;background:#05060be6;border:1px solid var(--good);box-shadow:0 0 18px #39ff9e55;animation:addin .25s ease-out;transition:opacity .4s,transform .4s}
.added .t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}.added .t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.added .mono{color:var(--good);font-size:11px}
.added .ok{width:30px;height:30px;display:grid;place-items:center;background:var(--good);color:#04060c;font-weight:900;border-radius:50%}
.added.out{opacity:0;transform:translateY(8px)}
@keyframes addin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.scanner .controls{grid-template-columns:1fr auto 1fr}
.scanner .ctl.z{justify-self:end;font-family:var(--mono);font-size:13px;font-weight:700;margin-left:8px}
.scanner .controls .ctl.r{justify-self:end}.scanner .controls .ctl.r:not([hidden])~.ctl.z{justify-self:end}
.scanner .controls>.ctl.r,.scanner .controls>.ctl.z{grid-column:3}.scanner .controls>.ctl.z{transform:translateX(-56px)}
.scanner .controls>.ctl.r[hidden]~.ctl.z{transform:none}

/* whole card visible inside a slab, never cropped */
.slab .slcard img,.topgrid .gcard .art .slcard img,.tcard .art .slcard img,.thumb .slcard img,.pcard .thumb .slcard img{object-fit:contain!important;transform:none!important;border-radius:3%/2%}