:root { color-scheme:dark; --bg:#050814; --panel:rgba(11,18,34,.84); --line:rgba(255,255,255,.13); --text:#f7fbff; --muted:#9aa8b8; --gold:#f0bd42; --teal:#28d6c2; }
        * { box-sizing:border-box; }
        body { margin:0; min-height:100vh; font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif; color:var(--text); background:radial-gradient(circle at 14% 0%, rgba(40,214,194,.24), transparent 32%), radial-gradient(circle at 88% 8%, rgba(240,189,66,.18), transparent 30%), linear-gradient(180deg,#07111f,#050814 58%,#03050b); }
        body::before { position:fixed; inset:0; z-index:-1; content:""; background:linear-gradient(90deg, transparent 0 96px, rgba(255,255,255,.025) 96px 97px), linear-gradient(0deg, transparent 0 96px, rgba(255,255,255,.018) 96px 97px); mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 84%); pointer-events:none; }
        a { color:#7df8e8; text-decoration:none; font-weight:1000; }
        .wrap { width:min(1180px, calc(100% - 28px)); margin:0 auto; padding:28px 0 56px; }
        .top { display:flex; justify-content:space-between; gap:14px; align-items:center; margin-bottom:18px; }
        .brand { color:#fff7c2; font-size:28px; font-weight:1000; letter-spacing:.14em; text-transform:uppercase; }
        .top-links { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
        .btn { min-height:38px; display:inline-flex; align-items:center; justify-content:center; padding:0 13px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(255,255,255,.06); }
        .btn.active { color:#061916; border-color:transparent; background:#42d8ca; }
        .hero, .panel { border:1px solid var(--line); border-radius:28px; background:linear-gradient(145deg, rgba(255,255,255,.075), rgba(5,8,20,.58)); box-shadow:0 24px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06); }
        .hero { position:relative; overflow:hidden; padding:clamp(24px,4vw,38px); background:radial-gradient(circle at 12% 0%, rgba(40,214,194,.24), transparent 34%), radial-gradient(circle at 90% 10%, rgba(240,189,66,.22), transparent 30%), linear-gradient(145deg, rgba(18,29,52,.94), rgba(5,8,20,.88)); }
        .kicker { display:inline-flex; align-items:center; min-height:28px; padding:0 11px; border:1px solid rgba(240,189,66,.34); border-radius:999px; color:#fff7c2; background:rgba(240,189,66,.10); font-size:11px; font-weight:1000; letter-spacing:.14em; text-transform:uppercase; }
        h1 { margin:14px 0 0; max-width:820px; color:#fff; font-size:clamp(40px,8vw,76px); line-height:.92; letter-spacing:-.05em; }
        h2 { margin:0; color:#fff7c2; }
        p { margin:0; }
        .muted { color:var(--muted); line-height:1.6; }
        .hero p { max-width:760px; margin-top:14px; }
        .stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-top:18px; }
        .stat { min-height:112px; padding:16px; border:1px solid rgba(255,255,255,.12); border-radius:22px; background:rgba(255,255,255,.055); }
        .stat span { display:block; color:#9fb0aa; font-size:11px; font-weight:1000; letter-spacing:.12em; text-transform:uppercase; }
        .stat b { display:block; margin-top:9px; color:#fff7c2; font-size:38px; line-height:1; }
        .filters { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
        .panel { padding:20px; margin-top:18px; }
        .collection-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:16px; }
        .item { position:relative; overflow:hidden; min-height:275px; display:grid; grid-template-rows:auto 1fr; gap:12px; padding:14px; border:1px solid color-mix(in srgb, var(--rarity) 44%, rgba(255,255,255,.12)); border-radius:24px; background:linear-gradient(145deg, var(--rarity-bg), rgba(255,255,255,.035)); }
        .item::after { position:absolute; inset:auto -30% -45% 42%; height:180px; content:""; border-radius:999px; background:var(--rarity); opacity:.10; filter:blur(28px); pointer-events:none; }
        .item img { position:relative; z-index:1; width:100%; height:132px; object-fit:cover; border:1px solid rgba(255,255,255,.13); border-radius:18px; background:rgba(0,0,0,.20); }
        .item-body { position:relative; z-index:1; display:grid; gap:9px; align-content:start; }
        .item h3 { margin:0; color:#fff; font-size:20px; }
        .rarity-common { --rarity:#9aa8b8; --rarity-bg:rgba(154,168,184,.12); }
        .rarity-rare { --rarity:#54b6ff; --rarity-bg:rgba(84,182,255,.14); }
        .rarity-epic { --rarity:#b879ff; --rarity-bg:rgba(184,121,255,.16); }
        .rarity-legendary { --rarity:#f0bd42; --rarity-bg:rgba(240,189,66,.18); box-shadow:0 0 26px rgba(240,189,66,.16); }
        .rarity-mythic { --rarity:#ff624d; --rarity-bg:rgba(255,98,77,.17); animation:mythicGlow 2.2s ease-in-out infinite alternate; }
        .rarity-chip { justify-self:start; display:inline-flex; align-items:center; min-height:24px; padding:0 9px; border:1px solid color-mix(in srgb, var(--rarity) 58%, transparent); border-radius:999px; color:var(--rarity); background:var(--rarity-bg); font-size:11px; font-weight:1000; letter-spacing:.12em; text-transform:uppercase; }
        .meta { display:flex; flex-wrap:wrap; gap:7px; }
        .meta span { display:inline-flex; min-height:25px; align-items:center; padding:0 8px; border:1px solid rgba(255,255,255,.11); border-radius:999px; color:#dbe7e3; background:rgba(255,255,255,.055); font-size:11px; font-weight:900; }
        .empty { padding:24px; border:1px dashed rgba(255,255,255,.16); border-radius:22px; color:var(--muted); }
        @keyframes mythicGlow { from { box-shadow:0 0 18px rgba(255,98,77,.14); } to { box-shadow:0 0 36px rgba(240,189,66,.25), 0 0 28px rgba(255,98,77,.16); } }
        @media (prefers-reduced-motion: reduce) { .rarity-mythic { animation:none !important; } }
        @media (max-width:760px) { .top { align-items:flex-start; flex-direction:column; } }