:root{--bg:#0a1424;--panel:#0f1d33;--panel2:#152741;--text:#e6edf7;--muted:#93a4bd;--gold:#4d8fe0;--gold2:#7fb6ff;--bronze:#2a5aa0;--red:#ef5b5b;--amber:#f0b44c;--green:#3fbf8a;--border:#223a5e;--radius:12px;--mana-w:#f8f6d8;--mana-u:#0e68ab;--mana-b:#150b00;--mana-r:#d3202a;--mana-g:#00733e;--mana-c:#ccc2c0;--mana-b-show:#5b4f45}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.45}
a{color:var(--gold2)}
header.top{background:linear-gradient(135deg,#1b1610,#141820);border-bottom:1px solid var(--border);padding:14px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;position:sticky;top:0;z-index:10}
header.top h1{font-size:1.15rem;margin:0;letter-spacing:.3px}
header.top h1 span{color:var(--gold)}
header.top nav{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
header.top nav a,header.top nav button{background:none;border:1px solid transparent;color:var(--muted);padding:7px 12px;border-radius:8px;cursor:pointer;font:inherit;text-decoration:none}
header.top nav a.active,header.top nav button.active,header.top nav a:hover,header.top nav button:hover{color:var(--text);border-color:var(--border);background:var(--panel)}
main{max-width:1200px;margin:0 auto;padding:18px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px}
.panel h2{margin:0 0 12px;font-size:1.05rem}
.grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.stat{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:12px}
.stat .k{color:var(--muted);font-size:.8rem}
.stat .v{font-size:1.35rem;font-weight:650;margin-top:2px}
.stat .s{color:var(--muted);font-size:.75rem;margin-top:2px}
form.row,.row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
label{display:flex;flex-direction:column;font-size:.8rem;color:var(--muted);gap:4px;flex:1 1 140px;min-width:0}
input,select,textarea{background:#0c0e12;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:9px 10px;font:inherit;width:100%}
textarea{min-height:38px}
input:focus,select:focus,textarea:focus{outline:2px solid #6b5420;border-color:var(--gold)}
button,.btn{background:var(--gold);color:#06142b;border:0;border-radius:8px;padding:9px 14px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block;white-space:nowrap}
button.secondary,.btn.secondary{background:var(--panel2);color:var(--text);border:1px solid var(--border)}
button.danger{background:#3a1d1a;color:#ffb4a8;border:1px solid #5a2a24}
button.small{padding:5px 9px;font-size:.8rem}
button:disabled{opacity:.5;cursor:not-allowed}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{padding:8px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
td.num,th.num{text-align:right;white-space:nowrap}
tr.low td{background:rgba(227,166,58,.07)}
tr.out td{background:rgba(224,96,79,.09)}
.badge{display:inline-block;font-size:.7rem;padding:2px 7px;border-radius:99px;border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.badge.low{color:var(--amber);border-color:#6b4f1c}
.badge.out{color:var(--red);border-color:#6b2a22}
.badge.foil{color:#b9a6ff;border-color:#4a3f80}
.badge.etched{color:#8fd3ff;border-color:#2c5670}
.muted{color:var(--muted)}
.small{font-size:.8rem}
.empty{color:var(--muted);text-align:center;padding:26px 10px;border:1px dashed var(--border);border-radius:10px}
.msg{padding:10px 12px;border-radius:8px;margin:10px 0;font-size:.9rem}
.msg.ok{background:#14271c;border:1px solid #24503a}
.msg.bad{background:#2a1614;border:1px solid #5a2a24}
.msg.info{background:#1a1f2b;border:1px solid #2c3550}
.hidden{display:none!important}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.card{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:4px}
.card .n{font-weight:650}
.card .p{font-size:1.15rem;color:var(--gold2);font-weight:700;margin-top:auto}
.groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.group{background:linear-gradient(160deg,#221c12,#1a1d25);border:1px solid var(--border);border-radius:12px;padding:14px;cursor:pointer;text-decoration:none;color:var(--text);display:block}
.group:hover{border-color:var(--gold)}
.group h3{margin:0 0 4px;font-size:1rem}
.printings{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;max-height:520px;overflow:auto}
.printing{display:flex;gap:10px;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:8px;cursor:pointer;text-align:left;color:var(--text);font-weight:400}
.printing.sel{border-color:var(--gold)}
.printing img{width:64px;border-radius:4px;flex:none}
.quote{display:grid;grid-template-columns:auto 1fr;gap:16px}
.quote img{width:170px;border-radius:8px}
.big{font-size:2rem;font-weight:750;color:var(--gold2)}
dl.kv{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;margin:8px 0;font-size:.88rem}
dl.kv dt{color:var(--muted)}
dialog{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:12px;max-width:640px;width:calc(100% - 24px)}
dialog::backdrop{background:rgba(0,0,0,.6)}
footer{color:var(--muted);font-size:.78rem;text-align:center;padding:20px}
@media (max-width:640px){main{padding:10px}.quote{grid-template-columns:1fr}.quote img{width:140px}header.top nav{margin-left:0;width:100%}th,td{padding:6px}.hide-sm{display:none}}
/* ---------- storefront v2 ---------- */
.shop-head{position:sticky;top:0;z-index:20;background:#12141a;border-bottom:1px solid var(--border)}
.shop-head .bar{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 16px}
.logo{display:flex;align-items:center;gap:9px;color:var(--text);text-decoration:none;font-weight:750;white-space:nowrap}
.logo svg{flex:none}
.logo small{display:block;font-weight:400;color:var(--muted);font-size:.7rem}
.searchbox{position:relative;flex:1;min-width:0}
.searchbox input{padding:11px 14px;border-radius:99px;background:#0b0d11}
.suggest{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--panel);border:1px solid var(--border);border-radius:10px;overflow:hidden;z-index:30}
.suggest a{display:block;padding:8px 12px;color:var(--text);text-decoration:none;font-size:.9rem}
.suggest a:hover,.suggest a.on{background:var(--panel2)}
.cartbtn{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:99px;text-decoration:none;white-space:nowrap}
.cartbtn b{color:var(--gold2)}
.cartbtn .cnt{background:var(--gold);color:#06142b;border-radius:99px;font-size:.7rem;padding:1px 6px;font-weight:700}
.shop-nav{max-width:1280px;margin:0 auto;display:flex;gap:2px;padding:0 10px 8px;overflow-x:auto;scrollbar-width:none}
.shop-nav a{color:var(--muted);text-decoration:none;padding:6px 11px;border-radius:8px;white-space:nowrap;font-size:.9rem}
.shop-nav a:hover,.shop-nav a.active{color:var(--text);background:var(--panel2)}
.wrap{max-width:1280px;margin:0 auto;padding:16px}
.hero{border-radius:16px;padding:34px 26px;background:radial-gradient(1200px 300px at 10% 0%,#3a2a10 0,transparent 60%),linear-gradient(120deg,#1d1810,#141a26 60%,#1a1426);border:1px solid var(--border);margin-bottom:18px}
.hero h2{font-size:1.9rem;margin:0 0 6px}
.hero p{color:var(--muted);margin:0 0 16px;max-width:620px}
.sec{margin:22px 0}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.sec-h h2{margin:0;font-size:1.15rem}
.carousel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,220px);gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.carousel>*{scroll-snap-align:start}
.tile{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:7px}
.tile .img{display:block;aspect-ratio:488/680;border-radius:9px;overflow:hidden;background:#0b0d11;position:relative}
.tile .img img{width:100%;height:100%;object-fit:cover;display:block}
.noimg{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:.8rem;text-align:center;padding:10px}
.soldout{position:absolute;inset:0;background:rgba(10,10,12,.62);display:flex;align-items:center;justify-content:center;font-weight:800;letter-spacing:2px;color:#fff;font-size:1.1rem}
.soldout span{border:2px solid #fff;padding:4px 10px;transform:rotate(-8deg)}
.tile .nm{font-weight:650;font-size:.9rem;line-height:1.25;color:var(--text);text-decoration:none}
.tile .nm:hover{color:var(--gold2)}
.ctabs{display:flex;gap:4px;flex-wrap:wrap}
.ctab{padding:3px 8px;font-size:.75rem;border-radius:6px;background:var(--panel2);border:1px solid var(--border);color:var(--text);font-weight:600}
.ctab.sel{border-color:var(--gold);color:var(--gold2)}
.ctab.oos{opacity:.4;text-decoration:line-through}
.pline{display:flex;justify-content:space-between;align-items:baseline}
.pline .pr{font-size:1.1rem;font-weight:750;color:var(--gold2)}
.pline .av{font-size:.75rem;color:var(--muted)}
.buy{display:flex;gap:6px}
.stepper{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.stepper button{background:var(--panel2);color:var(--text);padding:6px 9px;border-radius:0}
.stepper input{width:38px;text-align:center;border:0;border-radius:0;padding:6px 2px;background:#0b0d11}
.buy .add{flex:1;padding:7px 8px}
.results-layout{display:grid;grid-template-columns:250px 1fr;gap:16px}
.sidebar{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px;align-self:start;position:sticky;top:110px;max-height:calc(100vh - 130px);overflow:auto}
.sidebar details{border-bottom:1px solid var(--border);padding:8px 0}
.sidebar summary{cursor:pointer;font-weight:600;font-size:.88rem}
.sidebar .opts{display:flex;flex-direction:column;gap:3px;margin-top:6px;max-height:220px;overflow:auto}
.sidebar label.ck{flex-direction:row;align-items:center;gap:7px;color:var(--text);font-size:.85rem;flex:none}
.sidebar label.ck input{width:auto}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.toolbar select{width:auto}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.seg button{border-radius:0;background:var(--panel2);color:var(--muted);padding:7px 11px}
.seg button.on{background:var(--gold);color:#06142b}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:12px}
.pager{display:flex;gap:6px;justify-content:center;margin:16px 0;flex-wrap:wrap}
.pager button{min-width:38px}
.crumb{font-size:.85rem;color:var(--muted);margin-bottom:10px}
.crumb a{color:var(--muted)}
.pdp{display:grid;grid-template-columns:minmax(240px,380px) 1fr;gap:22px}
.pdp .bigimg{width:100%;border-radius:16px;display:block}
.oracle{white-space:pre-wrap;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:10px;font-size:.9rem}
.legal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px;font-size:.8rem}
.legal span{padding:3px 7px;border-radius:6px;background:var(--panel2);display:flex;justify-content:space-between}
.legal .legal-legal{color:var(--green)}.legal .legal-not_legal{color:var(--muted)}.legal .legal-banned{color:var(--red)}.legal .legal-restricted{color:var(--amber)}
.tiles4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.fmt{border-radius:12px;padding:18px;border:1px solid var(--border);text-decoration:none;color:var(--text);background:linear-gradient(150deg,#1a2030,#141820)}
.fmt:hover,.group:hover{border-color:var(--gold)}
.fmt h3{margin:0 0 4px}
.setlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px}
.setlist a{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:8px;background:var(--panel);border:1px solid var(--border);color:var(--text);text-decoration:none;font-size:.88rem}
.setlist a:hover{border-color:var(--gold)}
.filter-toggle{display:none}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--gold);padding:10px 16px;border-radius:10px;z-index:50;font-size:.9rem}
.st-found{color:var(--green)}.st-partial{color:var(--amber)}.st-missing{color:var(--red)}
@media (max-width:860px){.results-layout{grid-template-columns:1fr}.sidebar{position:static;max-height:none;display:none}.sidebar.open{display:block}.filter-toggle{display:inline-block}.pdp{grid-template-columns:1fr}.pdp .bigimg{max-width:320px;margin:0 auto}}
@media (max-width:640px){.shop-head .bar{flex-wrap:wrap}.searchbox{order:3;flex-basis:100%}.logo small{display:none}.hero h2{font-size:1.4rem}.rgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.carousel{grid-auto-columns:minmax(165px,175px)}.tile{padding:7px}.buy{flex-wrap:wrap}.buy .add{flex-basis:100%}}

/* ---- MTG five-colour theme ---- */
body{background:radial-gradient(1200px 500px at 50% -200px,#16305a 0%,var(--bg) 70%) fixed}
header.shop-head,header.top{background:linear-gradient(180deg,#12264a,#0b1830);border-bottom:0;position:sticky;top:0;z-index:10}
header.shop-head::after,header.top::after{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--mana-w) 0 20%,var(--mana-u) 20% 40%,var(--mana-b-show) 40% 60%,var(--mana-r) 60% 80%,var(--mana-g) 80% 100%);box-shadow:0 1px 0 var(--gold) inset}
.logo span{color:var(--gold2);font-family:Georgia,"Times New Roman",serif;letter-spacing:.4px}
.logo small{color:var(--muted);font-style:italic}
button,.btn{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#06142b;box-shadow:0 1px 0 #fff3 inset,0 0 0 1px var(--bronze)}
button:hover,.btn:hover{filter:brightness(1.08)}
.panel,.card,.group,.stat{border-color:var(--border);box-shadow:0 0 0 1px #0006}
.card:hover,.group:hover{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 6px 18px #0008}
.badge.foil{color:#e8c46a;border-color:var(--bronze)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--bronze);border-color:var(--gold)}
footer{border-top:1px solid var(--border);color:var(--muted)}
a{color:var(--gold2)}

header.shop-head::after,header.top::after{background:linear-gradient(90deg,#1d4f91,#4d8fe0,#7fb6ff,#4d8fe0,#1d4f91);box-shadow:none}
.hero,.group{background:linear-gradient(160deg,#13284a,#0d1a30)}