:root { --bg:#0e0f14; --panel:#14161d; --text:#e8e8ef; --accent:#ff4d88; --rarity-common:#cfcfcf; --rarity-uncommon:#23e09a; --rarity-rare:#4ea1ff; --rarity-epic:#c678ff; --rarity-legendary:#ffb020; }
* { box-sizing: border-box; }
html,body { margin:0; font-family:Inter,ui-sans-serif,system-ui,sans-serif; background:linear-gradient(180deg,#0a0b10,#13141d); color:var(--text); }
.header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #22262f; background:rgba(10,11,16,.6); backdrop-filter: blur(12px); position:sticky; top:0; z-index:10; }
.logo { font-weight:900; letter-spacing:.08em; font-size:18px; background:linear-gradient(90deg,#ff4d88,#7a5cff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav { display:flex; gap:8px; }
.nav button { background:transparent; border:1px solid #2a2e38; color:#cdd0d8; padding:8px 12px; border-radius:10px; cursor:pointer; }
.nav button.active { background:#1b1d26; border-color:#3a3f4d; color:white; }
.user { display:flex; align-items:center; gap:10px; }
#balance { font-variant-numeric:tabular-nums; color:#ffd166; font-weight:700; }
.btn { background:#1b1d26; border:1px solid #2a2e38; color:white; padding:10px 12px; border-radius:10px; cursor:pointer; }
.btn-primary { background:linear-gradient(90deg,#ff4d88,#9b59ff); border:0; }
.page { display:none; padding:18px; }
.page.active { display:block; }
.case-grid, .inventory-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.case, .item { background:var(--panel); border:1px solid #232733; border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:8px; position:relative; overflow:hidden; transition:transform .2s; }
.case:hover, .item:hover { transform:translateY(-2px); }
.case .price, .item .value { color:#ffd166; font-weight:700; font-variant-numeric:tabular-nums; }
.rarity-common { border-top:3px solid var(--rarity-common); }
.rarity-uncommon { border-top:3px solid var(--rarity-uncommon); }
.rarity-rare { border-top:3px solid var(--rarity-rare); }
.rarity-epic { border-top:3px solid var(--rarity-epic); }
.rarity-legendary { border-top:3px solid var(--rarity-legendary); }
dialog { background:transparent; border:0; }
dialog::backdrop { background:rgba(0,0,0,.55); }
.modal { background:var(--panel); border:1px solid #2a2e38; padding:16px; border-radius:16px; min-width:320px; display:flex; flex-direction:column; gap:10px; }
.trade-slots { display:flex; gap:8px; flex-wrap:wrap; min-height:90px; }
.trade-slot { width:72px; height:72px; border:1px dashed #2a2e38; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#6b7280; font-size:12px; }
#history-list { display:flex; flex-direction:column; gap:8px; }
.history-row { background:var(--panel); border:1px solid #232733; padding:10px 12px; border-radius:12px; display:flex; justify-content:space-between; }