:root{
  --bg:#0a0e17; --panel:#111827; --line:#22314b; --ink:#e8eef7; --muted:#8ea3bf;
  --gold:#f5c451; --accent:#5ad1ff; --ok:#57e08a; --danger:#ff5a5a;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 700px at 70% -10%,#16233b,var(--bg));color:var(--ink);
  font-family:"Inter",system-ui,Segoe UI,Arial,sans-serif;min-height:100vh}
header{display:flex;align-items:center;gap:16px;padding:14px 22px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(10,14,23,.86);backdrop-filter:blur(8px);z-index:5;flex-wrap:wrap}
.logo{font-weight:800;letter-spacing:.18em;font-size:18px;cursor:pointer}.logo b{color:var(--gold)}
header nav{display:flex;gap:8px;margin-left:8px}
.nav{background:transparent;border:1px solid transparent;color:var(--muted);border-radius:9px;padding:8px 12px;
  font-size:13px;font-weight:600;cursor:pointer}
.nav:hover{color:var(--ink)} .nav.on{background:#12233a;border-color:var(--line);color:var(--accent)}
.count{background:var(--accent);color:#05121b;border-radius:999px;font-size:10px;padding:1px 6px;margin-left:3px}
header .tag{margin-left:auto;color:var(--muted);font-size:12px;letter-spacing:.04em}
.mut{color:var(--muted);font-weight:400}.sm{font-size:12px;line-height:1.5}
.view{display:none}.view.on{display:block}
/* layout */
.wrap{display:grid;grid-template-columns:360px 1fr;gap:26px;padding:26px;max-width:1180px;margin:0 auto}
.fwrap{display:grid;grid-template-columns:340px 1fr;gap:26px;padding:26px;max-width:1180px;margin:0 auto}
@media(max-width:840px){.wrap,.fwrap{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;height:fit-content}
.panel h2{margin:0 0 10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
label{display:block;font-size:11px;color:var(--muted);margin:11px 0 4px}
input,select{width:100%;background:#0b1220;border:1px solid var(--line);color:var(--ink);border-radius:9px;
  padding:9px 11px;font-size:14px;font-family:inherit}
input[type=color]{padding:3px;height:38px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
button{flex:1;min-width:110px;background:#0e1a2b;color:var(--accent);border:1px solid #234;border-radius:10px;
  padding:11px 10px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
button:hover{filter:brightness(1.15);transform:translateY(-1px)}
button.primary{background:linear-gradient(90deg,#1a7fb0,#5ad1ff);color:#05121b;border:none}
button.gold{background:linear-gradient(90deg,#caa032,#f5c451);color:#1a1400;border:none}
button.ok{background:linear-gradient(90deg,#2f9d63,#57e08a);color:#04140b;border:none}
button.danger{background:#2a0f12;color:var(--danger);border-color:#5a2327}
/* stage + card */
.stage{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:6px}
.card-outer{perspective:1200px}
.card{--tiltx:0deg;--tilty:0deg;--primary:#1f6feb;--secondary:#e5484d;width:340px;height:476px;border-radius:20px;
  position:relative;transform:rotateX(var(--tiltx)) rotateY(var(--tilty));transition:transform .1s;transform-style:preserve-3d;
  background:linear-gradient(160deg,var(--primary),#0a0e17 60%);overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
.card .scene{position:absolute;inset:0}
.card .scene.stadium{background:linear-gradient(180deg,var(--primary) 0%,#0a1428 55%),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 2px,transparent 2px 26px)}
.card .scene.night{background-image:radial-gradient(2px 2px at 30% 20%,#fff,transparent),radial-gradient(1px 1px at 60% 40%,#9cf,transparent),linear-gradient(180deg,var(--primary),#050a14 65%)}
.card .scene.abstract{background:conic-gradient(from 120deg at 60% 30%,var(--primary),var(--secondary),var(--primary))}
.card .scene.spotlight{background:radial-gradient(circle at 50% 30%,var(--primary),#05080f 70%)}
.card .art{position:absolute;inset:9px;border-radius:14px;background-size:cover;background-position:center top;
  -webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.card .art.ph{display:flex;align-items:center;justify-content:center;font-size:70px;color:rgba(255,255,255,.22)}
.card .frame{position:absolute;inset:9px;border-radius:14px;border:2px solid rgba(255,255,255,.18);box-shadow:inset 0 0 40px rgba(0,0,0,.5)}
.card.r-1of1 .frame,.card.r-legendary .frame{border-color:var(--gold);box-shadow:inset 0 0 40px rgba(0,0,0,.5),0 0 0 1px var(--gold)}
.card .uni{position:absolute;left:0;right:0;bottom:150px;height:70px;filter:blur(2px);opacity:.5;
  background:linear-gradient(90deg,transparent,var(--secondary) 30%,var(--primary) 70%,transparent)}
.card .pos{position:absolute;top:16px;left:16px;background:var(--secondary);color:#fff;font-weight:800;font-size:12px;
  letter-spacing:.08em;padding:5px 10px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.card .rare{position:absolute;top:16px;right:16px;font-size:10px;font-weight:800;letter-spacing:.14em;padding:5px 9px;
  border-radius:999px;background:rgba(0,0,0,.4);border:1px solid var(--gold);color:var(--gold)}
.card .serial{position:absolute;top:44px;right:16px;font-size:10px;color:var(--muted);letter-spacing:.1em}
.card .sig{position:absolute;bottom:152px;right:16px;font-family:"Segoe Script","Brush Script MT",cursive;font-size:24px;
  color:#fff;opacity:0;transform:rotate(-6deg);text-shadow:0 1px 6px rgba(0,0,0,.6);transition:.4s}
.card.signed .sig{opacity:.92}
.card .badge{position:absolute;bottom:150px;left:16px;font-size:9px;color:var(--gold);border:1px solid var(--gold);
  border-radius:6px;padding:2px 6px;opacity:0;letter-spacing:.08em}.card.signed .badge{opacity:.9}
.card .plate{position:absolute;left:0;right:0;bottom:0;padding:16px 18px 18px;background:linear-gradient(transparent,rgba(3,7,14,.92) 30%)}
.card .name{font-size:26px;font-weight:800;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.card .team{font-size:12px;color:var(--muted);margin-top:5px;letter-spacing:.06em}
.card .stats{display:flex;gap:14px;margin-top:12px}
.card .stat{flex:1;text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:6px 4px}
.card .stat .v{font-size:17px;font-weight:800;color:#fff}.card .stat .l{font-size:8.5px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
.card .foil{position:absolute;inset:0;border-radius:20px;pointer-events:none;opacity:0;mix-blend-mode:color-dodge;
  background:linear-gradient(115deg,transparent 30%,rgba(255,0,180,.5),rgba(0,220,255,.5),rgba(120,255,120,.5),transparent 70%);
  background-size:300% 300%;transition:opacity .3s}
.card.foil-on .foil{opacity:.55;animation:shine 3.5s linear infinite}
@keyframes shine{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.hint{color:var(--muted);font-size:12px;text-align:center;max-width:340px}
.pipe{display:flex;gap:8px;font-size:10.5px;color:var(--muted);flex-wrap:wrap;justify-content:center}
.pipe span{padding:4px 9px;border:1px solid var(--line);border-radius:999px}.pipe .done{border-color:var(--ok);color:var(--ok)}
/* grids */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;padding:0 26px 40px;max-width:1180px;margin:0 auto}
.fgrid-wrap{padding-right:26px}.froster-hd,.chd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.chd{padding:8px 26px 0;max-width:1180px;margin:0 auto}
.thumb{cursor:pointer;transition:.15s}.thumb:hover{transform:translateY(-4px)}
.thumb .card{width:190px;height:266px}.thumb .card .name{font-size:16px}.thumb .card .stat .v{font-size:12px}.thumb .card .sig{font-size:15px;bottom:88px}
.thumb .card .pos,.thumb .card .rare{font-size:8px;padding:3px 6px}.thumb .card .uni{bottom:86px;height:40px}.thumb .card .plate{padding:10px}
.thumb .card .stats{gap:6px;margin-top:7px}.thumb .card .serial{font-size:8px}
.empty{text-align:center;color:var(--muted);padding:60px 20px;font-size:14px}
/* modal */
.modal{position:fixed;inset:0;background:rgba(4,8,14,.8);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:20;padding:20px}
.modal.on{display:flex}
.modal-in{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;max-width:760px;width:100%;
  display:grid;grid-template-columns:auto 1fr;gap:26px;position:relative}
@media(max-width:680px){.modal-in{grid-template-columns:1fr;justify-items:center}}
.mclose{position:absolute;top:12px;right:12px;flex:none;min-width:0;width:34px;height:34px;border-radius:50%}
.modal-side{min-width:0}.modal-side h2{margin:6px 0 12px;font-size:20px;color:var(--ink)}
.cert{background:#0b1220;border:1px solid var(--line);border-radius:10px;padding:12px;font-size:11px;line-height:1.6;word-break:break-all;color:var(--muted)}
.cert b{color:var(--ok)}.cert .hash{color:var(--accent);font-family:Consolas,monospace}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#0e1a2b;border:1px solid var(--accent);color:var(--accent);
  padding:11px 18px;border-radius:12px;font-size:14px;opacity:0;transition:.25s;pointer-events:none;z-index:30;max-width:90vw;text-align:center}
.toast.on{opacity:1}