:root {
  --ink: #f3eadb; --muted: #a89d8d; --bg: #11100e; --panel: #1a1713;
  --line: #332d25; --gold: #d6a84b; --ember: #b9422f;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 70% -10%, #3b2118 0, transparent 32rem), var(--bg); font: 15px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; }
button, input, select { font: inherit; color: inherit; }
button, select { cursor: pointer; }
.topbar { position: sticky; top: 0; z-index: 20; height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 0 4vw; background: rgba(17,16,14,.86); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; text-transform: uppercase; letter-spacing: .08em; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 42px; border: 1px solid #735d38; background: linear-gradient(145deg,#3c3123,#17130f); color: var(--gold); font-family: Georgia,serif; font-size: 21px; transform: skew(-5deg); box-shadow: inset 0 0 12px #000; }
.brand strong,.brand small { display:block; }.brand strong {font-size:13px}.brand small { color: var(--muted); font-size: 9px; margin-top: 2px; }
.header-actions { display:flex; gap:10px; }
.upgrade-toggle{display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--line);color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.upgrade-toggle input{width:15px;height:15px;accent-color:var(--gold)}.upgrade-toggle:has(input:checked){color:var(--ink);border-color:#76654c;background:#241e17}
.view-switch { display:flex; border:1px solid var(--line); padding:3px; background:#0f0e0c; }.view-switch button{padding:6px 11px;color:var(--muted)}.view-switch button.active{background:#342a20;color:var(--ink)}
button { border: 0; border-radius: 3px; background: none; }
.ghost,.selected-trigger,.primary { padding: 10px 14px; border: 1px solid var(--line); }
.selected-trigger,.primary { background: var(--ember); border-color:#d25b46; font-weight:700; box-shadow: 0 4px 18px #0005; }
.selected-trigger span { display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; margin-left:7px; border-radius:20px; background:#1a0d0a; }
main { width: min(1450px, 92vw); margin: 0 auto; padding-bottom: 80px; }
.hero { min-height: 150px; display:flex; flex-direction:column; justify-content:center; border-bottom: 1px solid var(--line); }
.eyebrow { margin:0 0 10px; color:var(--gold); text-transform:uppercase; letter-spacing:.2em; font-size:11px; font-weight:800; }
h1 { max-width: 850px; margin:0; font: 500 clamp(36px,5vw,60px)/1 Georgia,serif; letter-spacing:-.035em; }
.controls { display:grid; grid-template-columns: minmax(240px,2fr) repeat(3,minmax(145px,1fr)) auto; gap:10px; padding:22px 0 16px; }
.controls label { position:relative; display:flex; flex-direction:column; gap:4px; padding:8px 12px; border:1px solid var(--line); background:#171512; }
.controls label>span,.sort-label { color:var(--muted); text-transform:uppercase; font-size:9px; letter-spacing:.13em; }
input,select { width:100%; padding:0; background:none; border:0; outline:0; }
select { color:var(--ink); }.search-wrap kbd { position:absolute; right:12px; bottom:10px; padding:1px 6px; border:1px solid #50473c; border-radius:3px; color:#81776a; font-size:11px; }
.clear-filters { border:1px solid var(--line); color:var(--muted); padding:0 17px; }.clear-filters:hover,.ghost:hover { border-color:#76654c;color:var(--ink); }
.results-row { display:flex; justify-content:space-between; align-items:center; margin:6px 0 18px; color:var(--muted); }.results-row strong {color:var(--ink)}
.sort-controls{display:flex;align-items:center;gap:8px}.sort-label { display:flex; align-items:center; gap:9px; }.sort-label select { width:auto; color:var(--ink); font-size:12px; }.sort-direction{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);color:var(--gold);font-size:18px}.sort-direction:hover{border-color:#76654c}
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:18px 13px; }
.card { position:relative; min-width:0; padding:0; text-align:left; background:transparent; border:1px solid transparent; overflow:visible; transition:transform .15s,filter .15s; }
.card:hover { transform:translateY(-5px); filter:drop-shadow(0 14px 13px #000c); }.card.selected { filter:drop-shadow(0 0 5px var(--gold)); }
.card-art { aspect-ratio: 0.714; overflow:hidden; }.card-art img { display:block; width:100%; height:100%; object-fit:contain; transition:transform .2s; }.card:hover img { transform:scale(1.018); }
.check { position:absolute; top:9px; right:9px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#17120ed9; border:1px solid #6a5841; opacity:0; transform:scale(.8); transition:.15s; }.card.selected .check { opacity:1; transform:scale(1); background:var(--gold); color:#19120a; border-color:#ffe5a0; font-weight:900; }.card:hover .check {opacity:1}
.load-more { display:block; margin:34px auto; padding:12px 28px; border:1px solid #594a36; }.empty { text-align:center; padding:80px 0; color:var(--muted); }.empty span {font-size:42px;color:#66594a}.empty h2{margin:8px 0 0;color:var(--ink);font-family:Georgia,serif}
.tray { position:fixed; z-index:50; top:0; right:0; width:min(480px,100vw); height:100dvh; display:flex; flex-direction:column; padding:26px; background:#171411; border-left:1px solid #493d2f; transform:translateX(105%); transition:transform .25s ease; box-shadow:-20px 0 50px #0008; }.tray.open{transform:none}.scrim{position:fixed;z-index:40;inset:0;background:#0009;opacity:0;pointer-events:none;transition:.2s}.scrim.open{opacity:1;pointer-events:auto}
.tray-head {display:flex;justify-content:space-between;align-items:start;padding-bottom:18px;border-bottom:1px solid var(--line)}.tray h2{margin:0;font:28px Georgia,serif}.tray h2 span{color:var(--gold)}.icon-btn{font-size:30px;color:var(--muted)}
.tray-list { overflow:auto; flex:1; padding:10px 0; }.tray-item {display:grid;grid-template-columns:50px 1fr auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid #29241e}.tray-item img{width:50px;height:70px;object-fit:contain;background:#0c0b0a}.tray-item strong{display:block;font-family:Georgia,serif}.tray-item small{color:var(--muted);text-transform:capitalize}.qty{display:flex;align-items:center;border:1px solid var(--line)}.qty button{width:28px;height:30px;color:var(--muted)}.qty span{width:22px;text-align:center;font-weight:700}.remove{color:#845e55!important;font-size:18px}
.tray-empty{margin:auto;text-align:center;color:var(--muted)}.tray-empty div{font-size:35px;color:var(--gold)}.tray-empty p{margin:8px 0 0;color:var(--ink);font:22px Georgia,serif}.tray-empty span{font-size:12px}.tray-footer{padding-top:16px;border-top:1px solid var(--line)}.summary{display:flex;justify-content:space-between;color:var(--muted);margin-bottom:13px}.summary strong{color:var(--ink);font-size:20px}.tray-actions{display:grid;grid-template-columns:1fr 2fr;gap:10px}.primary{padding:12px}
.toast { position:fixed; z-index:100; left:50%; bottom:24px; transform:translate(-50%,20px); padding:10px 16px; background:#eee3d1; color:#201913; border-radius:3px; opacity:0; pointer-events:none; transition:.2s; box-shadow:0 8px 30px #0009; }.toast.show{opacity:1;transform:translate(-50%,0)}
.selection-stage{padding:30px 0;scroll-margin-top:84px}.selection-toolbar{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:25px}.selection-toolbar h2{margin:0;font:36px Georgia,serif}.stage-controls{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.stage-controls label{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.12em}.stage-controls input{width:150px}.stage-controls select{min-width:105px;padding:10px;border:1px solid var(--line);background:#171512}.selected-canvas{--card-size:320px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;gap:0;min-height:360px;padding:18px;background:#0d0c0b;border:1px solid #2b251e;overflow:hidden}.selected-canvas.light{background:#ddd7ca}.selected-canvas.transparent{background-color:transparent;background-image:linear-gradient(45deg,#1a1815 25%,transparent 25%),linear-gradient(-45deg,#1a1815 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1a1815 75%),linear-gradient(-45deg,transparent 75%,#1a1815 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.stage-card{flex:0 0 var(--card-size);width:var(--card-size);margin:0 -12px 0 0;filter:drop-shadow(0 8px 8px #000b)}.stage-card:last-child{margin-right:0}.stage-card img{display:block;width:100%;height:auto}.stage-empty{text-align:center;padding:90px 20px;color:var(--muted)}.stage-empty>span{font-size:38px;color:var(--gold)}.stage-empty h2{margin:8px 0 4px;color:var(--ink);font:28px Georgia,serif}.stage-empty .primary{margin-top:20px}.exit-clean{position:fixed;z-index:200;right:16px;top:16px;padding:9px 13px;background:#111c;color:#eee;border:1px solid #777;opacity:.15}.exit-clean:hover{opacity:1}
body.clean-mode{background:#0d0c0b}.clean-mode .topbar,.clean-mode .selection-toolbar,.clean-mode .tray,.clean-mode .scrim{display:none!important}.clean-mode main{width:100%;padding:0;margin:0}.clean-mode .selection-stage{padding:0}.clean-mode .selected-canvas{min-height:100vh;border:0;padding:24px}.clean-mode .exit-clean{display:block!important}.clean-mode .selected-canvas.transparent{background-image:none;background:transparent}
@media (max-width:800px){.ghost#copyLink{display:none}.hero{min-height:120px}.controls{grid-template-columns:1fr 1fr}.search-wrap{grid-column:1/-1}.clear-filters{min-height:50px}.card-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:11px}.topbar{padding:0 4vw}.tray{padding:21px}main{width:94vw}.selection-toolbar{align-items:start;flex-direction:column}.stage-controls{width:100%}.selected-canvas{padding:16px}}
@media (max-width:460px){.controls{grid-template-columns:1fr 1fr}.controls label:nth-of-type(4){grid-column:1/2}.card-grid{grid-template-columns:repeat(2,1fr)}.brand small{display:none}.upgrade-toggle{padding:0 8px}.upgrade-toggle span{display:none}}