/* Design v2 (owner request, 9 Nov 2026): dark navy look with a top navigation, a hero with a fan of cards, a stats strip and side panels, in the style of the mockup the
   owner supplied, but with calmer colours (medium blue, not neon; navy surfaces, not black). Loaded after app.css: tokens first, then the shell, then the home page. Every other
   page inherits the tokens and the shared components (.card, .btn, .tile, .seg, tables...), so all sections share the same look. */

/* ---------- tokens ---------- */
:root[data-theme="dark"] {
  --bg:#0b1322; --surface:#111c31; --surface2:#182843; --line:#243a5e; --fg:#e7eefa; --mut:#9bb0cf;
  --accent:#3f8ae6; --accent2:#4c9af0; --grad:linear-gradient(135deg,#4a96ee,#2f6fd0); --gold:#e8b84a; --ok:#5ccb8c; --bad:#f08080; --warn:#f0c860; --warnbg:#3a3014;
  --shadow:0 1px 2px rgba(0,0,0,.28),0 6px 18px rgba(2,8,20,.32); --shadow-hover:0 2px 4px rgba(0,0,0,.34),0 14px 34px rgba(2,8,20,.5);
  --r:14px; --side:0px; --top:66px;
}
:root:not([data-theme="dark"]) {
  --accent:#2f78d8; --accent2:#2a6fca; --grad:linear-gradient(135deg,#3d89e6,#2a65c4); --side:0px; --top:66px;
}
body { background:radial-gradient(1100px 520px at 78% -80px, color-mix(in srgb,var(--accent) 16%,transparent), transparent 70%), var(--bg); }
.btn { background:var(--grad); border:1px solid color-mix(in srgb,var(--accent) 60%,#fff 0%); box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 22%,transparent) }
.btn.ghost { background:color-mix(in srgb,var(--surface) 70%,transparent); border:1px solid var(--line); box-shadow:none } .btn.green { box-shadow:none } .btn.add { background:var(--grad); border-color:transparent }
.btn.login { text-transform:none; letter-spacing:0; font-size:14px; height:40px; padding:0 18px; box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 28%,transparent) }
.card, .tile, .toolbar, .panel, .stats .st { background:color-mix(in srgb,var(--surface) 92%,transparent); border-color:var(--line) }
.tile { border-radius:14px } .tile:hover { border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 14%,transparent) }
.seg { background:var(--surface2); border:1px solid var(--line) } .seg button.on { background:var(--accent); color:#fff; box-shadow:none }
input, select { background:color-mix(in srgb,var(--surface) 80%,var(--bg)); border-color:var(--line) } input:focus, select:focus { border-color:var(--accent2); outline:0 }
.price { color:var(--ok) } .tile .price { font-size:19px }
.tag.foil { background:linear-gradient(90deg,#d9a93a,#e89a3c) }

/* ---------- shell: top navigation ---------- */
.side { display:none !important } .app { display:block } .main { min-width:0 }
.topbar { position:sticky; top:0; height:var(--top); padding:0 28px; gap:22px; background:color-mix(in srgb,var(--bg) 88%,transparent); border-bottom:1px solid var(--line); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px) }
.tb-brand { display:flex !important; font-size:20px; flex:none } .tb-brand span { display:inline !important } .tb-brand img { width:40px; height:40px }
.topbar .nav { display:flex; flex-direction:row; gap:4px; width:auto; padding:0; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none } .topbar .nav::-webkit-scrollbar { display:none }
.topbar .nav a { flex-direction:row; gap:8px; padding:0 14px; height:40px; align-items:center; border-radius:10px; font-size:14.5px; font-weight:700; color:var(--mut); white-space:nowrap; border:1px solid transparent }
.topbar .nav a .ni { display:inline-grid; place-items:center; width:22px; height:22px; font-size:inherit } .topbar .nav a .ni img { width:22px; height:22px; object-fit:contain } .topbar .nav a .ni svg { width:20px; height:20px }
.topbar .nav a:hover { color:var(--fg); background:color-mix(in srgb,var(--accent) 10%,transparent) }
.topbar .nav a.on { color:#fff; background:color-mix(in srgb,var(--accent) 30%,transparent); border-color:color-mix(in srgb,var(--accent) 70%,transparent); box-shadow:0 0 16px color-mix(in srgb,var(--accent) 22%,transparent) }
.tb-title { display:none } .tb-actions { margin-left:auto }
.tb-ico, .tb-status, .tb-ubtn { background:color-mix(in srgb,var(--surface) 80%,transparent); border-color:var(--line) }
.tb-bal { background:color-mix(in srgb,var(--surface) 80%,transparent) }
.content { max-width:1480px; margin:0 auto; padding:22px 28px 150px }
.pagehead { margin:2px 0 18px } .pagehead h1 { font-size:26px; letter-spacing:-.3px } .pagehead p { color:var(--mut); font-size:14px; margin-top:2px }
body[data-page="buy"] .pagehead { display:none }
.bar { left:0 } .sitefoot { left:0 } .cbanner { left:16px; width:min(720px, calc(100vw - 32px)) }

/* ---------- home page ---------- */
.hero2 { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:20px; align-items:center; border:1px solid var(--line); border-radius:20px; padding:34px 38px; margin-bottom:16px; overflow:hidden; position:relative;
  background:radial-gradient(700px 300px at 85% 40%, color-mix(in srgb,var(--accent) 24%,transparent), transparent 70%), linear-gradient(135deg,color-mix(in srgb,var(--surface) 96%,transparent),color-mix(in srgb,var(--bg) 94%,transparent)); box-shadow:var(--shadow) }
.hero2 h1 { font-size:clamp(30px,4.2vw,50px); line-height:1.08; letter-spacing:-.8px; margin:0 0 14px } .hero2 h1 em { font-style:normal; color:var(--accent2) }
.hero2 p { color:var(--mut); font-size:16px; max-width:520px; line-height:1.55 }
.hero2-cta { display:flex; flex-wrap:wrap; gap:12px; margin:22px 0 22px } .btn.big { height:48px; padding:0 24px; font-size:15px; border-radius:12px }
.trust { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 26px } .trust li { display:flex; flex-direction:column; font-size:13px; padding-left:12px; border-left:2px solid color-mix(in srgb,var(--accent) 60%,transparent) } .trust b { font-size:13.5px } .trust span { color:var(--mut) }
.hero2-fan { position:relative; height:290px; min-width:0 }
.fancard { position:absolute; bottom:6px; width:158px; height:224px; border-radius:14px; overflow:hidden; border:2px solid color-mix(in srgb,var(--accent2) 55%,var(--line)); background:var(--surface2); box-shadow:0 14px 30px rgba(0,0,0,.45), 0 0 22px color-mix(in srgb,var(--accent) 22%,transparent); transition:transform .25s, z-index 0s; display:block; color:#fff; text-decoration:none }
.fancard img { width:100%; height:100%; object-fit:cover; object-position:center; display:block } .fancard span { position:absolute; left:0; right:0; bottom:0; padding:22px 8px 8px; font-size:12px; font-weight:800; text-align:center; background:linear-gradient(transparent,rgba(5,10,20,.88)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fc0 { left:4%; transform:rotate(-17deg) translateY(14px); z-index:1 } .fc1 { left:21%; transform:rotate(-8deg) translateY(4px); z-index:2 } .fc2 { left:38%; width:178px; height:252px; transform:rotate(0deg); z-index:4; bottom:14px } .fc3 { left:57%; transform:rotate(8deg) translateY(4px); z-index:3 } .fc4 { left:73%; transform:rotate(16deg) translateY(14px); z-index:2 }
.fancard:hover { z-index:6; transform:translateY(-10px) rotate(0deg) scale(1.05) }

.stats { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin-bottom:22px; background:color-mix(in srgb,var(--surface) 92%,transparent); border:1px solid var(--line); border-radius:16px; overflow:hidden }
.stats .st { display:flex; align-items:center; gap:14px; padding:16px 20px; min-width:0; border:0; border-radius:0; border-right:1px solid var(--line); box-shadow:none; background:none }
.stats .st:last-child { border-right:0 } .stats .sti { color:var(--accent2); flex:none; display:grid; place-items:center }
.stats .st b { display:block; font-size:21px; line-height:1.15 } .stats .st > div > span { color:var(--mut); font-size:13px; font-weight:500; text-transform:none; letter-spacing:0 }

.buygrid { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:22px; align-items:start } .buymain { min-width:0 }
.sechead { display:flex; justify-content:space-between; align-items:center; margin:2px 0 10px } .sechead h2 { font-size:22px; display:flex; align-items:center; gap:10px } .hbar { display:inline-block; width:4px; height:22px; border-radius:3px; background:var(--accent2) } .sechead a { font-size:14px; font-weight:700; text-decoration:none }
.filterbar { background:transparent } .toolbar { box-shadow:none }
.buyside { display:flex; flex-direction:column; gap:16px; position:sticky; top:calc(var(--top) + 14px) }
.panel { border:1px solid var(--line); border-radius:16px; padding:16px 18px; box-shadow:var(--shadow) } .panel h3 { font-size:17px; display:flex; align-items:center; gap:10px; margin:0 0 12px } .panel h3 .hbar { height:18px }
.mo { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent); font-size:14px } .mo:last-child { border-bottom:0 } .moi { width:26px; text-align:center } .mo span:nth-child(2) { flex:1; color:var(--mut) } .mo b { color:var(--fg) }
.how { list-style:none; counter-reset:s; margin:0; padding:0; display:flex; flex-direction:column; gap:14px } .how li { counter-increment:s; display:grid; grid-template-columns:34px 1fr; column-gap:12px; font-size:14px } .how li::before { content:counter(s); grid-row:1 / span 2; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-weight:800; background:color-mix(in srgb,var(--accent) 24%,transparent); border:1px solid color-mix(in srgb,var(--accent) 60%,transparent) } .how span { color:var(--mut); font-size:13px }

@media (max-width:1100px) { .buygrid { grid-template-columns:minmax(0,1fr) } .buyside { position:static; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)) } }
@media (max-width:900px) { .hero2 { grid-template-columns:minmax(0,1fr); padding:24px 20px } .hero2-fan { height:230px } .fancard { width:112px; height:160px } .fc2 { width:128px; height:182px } .stats { grid-template-columns:repeat(2,minmax(0,1fr)) } .stats .st { border-bottom:1px solid var(--line) } }
@media (max-width:760px) {
  .topbar { height:auto; flex-wrap:wrap; padding:10px 12px; gap:8px } .tb-brand span { display:none !important } .topbar .nav { order:3; flex:1 0 100%; width:100% } .tb-actions { margin-left:auto }
  .content { padding:14px 14px 160px } .bar { bottom:0 } .filterbar { top:0 }
}
.topbar .nav a[data-page="status"] { display:none }   /* the status pill next to the cart already links to the status page */
.topbar .nav a { padding:0 12px }
body[data-page="set"] .pagehead { display:none }

/* The Casino button stands out: its own violet-to-pink colour (the rest of the navigation is blue) */
.topbar .nav a[data-page="casino"] { color:#fff; background:linear-gradient(135deg,#8e5be0,#d1478a); border-color:color-mix(in srgb,#e06aa6 70%,transparent); box-shadow:0 0 16px rgba(209,71,138,.32) }
.topbar .nav a[data-page="casino"]:hover { color:#fff; filter:brightness(1.1); background:linear-gradient(135deg,#9a68ea,#dc528f) }
.topbar .nav a[data-page="casino"].on { box-shadow:0 0 0 2px rgba(255,255,255,.35), 0 0 20px rgba(209,71,138,.5) }
.topbar .nav a[data-page="casino"] .ni svg, .topbar .nav a[data-page="casino"] .casino-ico { color:#fff }

/* The side bar is gone, so nothing sits above the footer bar any more: it stays at the very bottom on phones too */
@media (max-width:760px) {
  .sitefoot { bottom:0 } .bar { bottom:38px } .content { padding-bottom:120px } #toast { bottom:96px } .cbanner { bottom:50px }
}

/* Phones: filter button rows (Sell tiers, Buy borders...) wrap instead of making the page scroll sideways */
@media (max-width:760px) { .seg { max-width:100%; flex-wrap:wrap } .seg button { flex:1 1 auto } }

/* Hero: the Casino button has a design of its own (violet to pink, chip icon), not the blue / outline of the other buttons */
.btn.big.casino { background:linear-gradient(135deg,#8e5be0,#d1478a); border:1px solid rgba(224,106,166,.7); color:#fff; gap:9px; box-shadow:0 6px 22px rgba(209,71,138,.38) } .btn.big.casino:hover { filter:brightness(1.1) }
.btn.big.casino svg { flex:none }

/* Filters stay right under the menu while scrolling (the offset --tbh is the measured height of the top bar, set in app.js) */
.filterbar { top:var(--tbh,66px); background:var(--bg); z-index:25; padding:8px 0 10px; margin-bottom:8px; box-shadow:0 10px 14px -12px rgba(0,0,0,.6) } .toolbar { background:var(--surface) }
#toolbar { position:sticky; top:var(--tbh,66px); z-index:25; background:var(--bg); box-shadow:0 10px 14px -12px rgba(0,0,0,.6) } #toolbar .filterbar { position:static; box-shadow:none; margin-bottom:0 }
#p-value .vtools { position:sticky; top:var(--tbh,66px); z-index:25; background:var(--bg); padding:8px 0; box-shadow:0 10px 14px -12px rgba(0,0,0,.6) }
.buyside { top:calc(var(--tbh,66px) + 14px) }
@media (max-width:760px) { .filterbar { top:var(--tbh,60px) } }
@media (max-width:760px) { .toolbar { gap:6px; padding:8px } .toolbar .count { display:none } .toolbar select, .toolbar .search { flex:1 1 42% } .toolbar .switch span { font-size:12.5px } }   /* the pinned filter bar takes less of the phone screen */

/* "Not marketable" tag: a soft pill with a slashed-circle icon (amber outline on a dark glass), bottom-left of the item picture, instead of the loud red block */
.tag.nm { top:auto; left:10px; bottom:10px; display:inline-flex; align-items:center; gap:5px; padding:3px 10px 3px 8px; font-size:10.5px; font-weight:700; letter-spacing:.2px; text-transform:none; color:#ffd88a; background:rgba(14,22,40,.72); border:1px solid rgba(255,200,110,.45); box-shadow:0 2px 8px rgba(0,0,0,.28); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px) }
.tag.nm svg, .tag2.nm svg { flex:none; opacity:.95 }
.tag2.nm { display:inline-flex; align-items:center; gap:5px; padding:2px 9px 2px 7px; font-weight:700; color:#ffd88a; background:color-mix(in srgb,#f0b24a 12%,transparent); border:1px solid color-mix(in srgb,#f0b24a 45%,transparent) }

/* Keys left the menu: a box of its own next to Normal / Foil on the Buy page opens the TF2 keys */
.keybox { display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 16px; border-radius:10px; text-decoration:none; font-weight:700; font-size:14px; color:var(--fg); background:var(--surface2); border:1px solid var(--line) } .keybox:hover { border-color:var(--accent2); color:var(--accent2) } .keybox svg { color:#e8b84a }

/* Casino page: the games come first (no page title above them) and every game is a tile with its own React logo and its name */
body[data-page="casino"] .pagehead { display:none }
#casTabs.seg { background:none; border:0; padding:0; gap:12px; display:flex; flex-wrap:wrap; max-width:100% }
#casTabs .cg-tile, #casTabs button { flex:1 1 150px; min-width:0; height:auto; display:flex; align-items:center; gap:12px; padding:10px 16px; border-radius:14px; background:color-mix(in srgb,var(--surface) 90%,transparent); border:1px solid var(--line); color:var(--fg); font-weight:800; font-size:16px; box-shadow:var(--shadow); transition:transform .15s, border-color .15s, box-shadow .15s }
#casTabs button:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 55%,var(--line)) }
#casTabs button.on { background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 26%,var(--surface)),var(--surface)); border-color:var(--accent2); box-shadow:0 0 0 1px var(--accent2), 0 8px 24px color-mix(in srgb,var(--accent) 25%,transparent); color:var(--fg) }
#casTabs .cg-logo { width:44px; height:44px; flex:none; filter:drop-shadow(0 3px 5px rgba(0,0,0,.35)) } #casTabs .cg-tile:hover .cg-logo { animation:cg-wiggle .5s ease-in-out } @keyframes cg-wiggle { 25% { transform:rotate(-9deg) scale(1.08) } 75% { transform:rotate(9deg) scale(1.08) } }
@media (max-width:760px) { #casTabs button { flex:1 1 44%; padding:8px 12px; font-size:15px } #casTabs .cg-logo { width:36px; height:36px } }
#casTabs.seg { flex:1 1 100% } .casfair { margin-left:auto; white-space:nowrap; flex:none; padding-left:12px }