:root{
  color-scheme:dark;
  --bg:#14171c;--panel:#1b1f26;--card:#21262f;--card-hi:#262c37;--border:#2d333d;--text:#e6e8ec;--muted:#8a929e;
  --accent:#e08b3f;--accent-2:#f0a860;--lock:#c0483f;--ok:#4caf6d;--pending:#d6a83a;--chat-w:300px;
  /* Real rendered height of the sticky page <header> (measured at ~87px,
     rounded up a little for safety since it can vary slightly with
     content). Anything that also sticks below the header — like
     .inv-side — should offset from this instead of guessing, or it'll
     scroll up underneath the header instead of stopping below it. */
  --header-h:88px;
}
/* Reserves the vertical scrollbar's gutter space always, whether or not
   the current page's content is actually tall enough to need it. Without
   this, pages with long/async-loaded content (admin tables, my-inventory
   grids, withdraw stock, settings forms) intermittently cross the
   viewport-height threshold that shows/hides the native scrollbar —
   which changes window.innerWidth, which changes applyResponsiveScale()'s
   computed chat width (common.js), which visibly resized the chat
   sidebar depending on how much had loaded so far. Reserving the gutter
   unconditionally means window.innerWidth is constant regardless of
   content length, so that resize/rescale never gets triggered by this.
   Unsupported browsers (older Safari) just fall back to prior behavior. */
html{scrollbar-gutter:stable;}
*{box-sizing:border-box;}
body {
  margin: 0;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  /* ── Premium dark background ──
     Base is near-black with a very slight blue-charcoal tint so it never
     reads as flat/pure black. Three soft radial layers add depth: a cool
     glow upper-right, a faint warm accent glow lower-left (ties to the
     orange/gold brand color at very low opacity), and a subtle vignette
     that darkens the corners so content in the center pops. All gradients
     are large, soft-edged ellipses — no noise, no repeating patterns. */
  background-color: #0a0b0f;
  background-image:
    radial-gradient(ellipse 900px 600px at 78% -10%, rgba(60, 90, 140, 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 700px 500px at 8% 100%, rgba(224, 139, 63, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 1200px 900px at 50% 40%, #12141a 0%, #0a0b0f 70%),
    radial-gradient(ellipse 1600px 1000px at 50% 50%, transparent 55%, rgba(0,0,0,0.5) 100%);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  padding-bottom: 120px;
  margin-left: var(--chat-w);
  transition: margin-left .15s;
  /* Makes body's *actual* rendered width (which already shrinks by
     --chat-w when the chat sidebar is open, since margin-left eats
     into a width:auto block) queryable by descendants below via
     @container. This is what lets the nav-toggle breakpoint react
     correctly whether chat is open or closed, instead of only ever
     checking raw viewport width. */
  container-type: inline-size;
  container-name: page-shell;
}
a{color:var(--accent-2);}
.display,h1,h2{font-family:'Arial Narrow','Roboto Condensed','Segoe UI',sans-serif;text-transform:uppercase;letter-spacing:1.2px;}

/* login */
body.login{margin-left:0;display:flex;align-items:center;justify-content:center;padding:40px 16px;}
.login-box{width:400px;max-width:100%;}
.login-box .brand{font-size:34px;text-align:center;margin-bottom:6px;}
.login-box .lead{text-align:center;color:var(--muted);margin-bottom:24px;font-size:14px;}
.steam-btn{display:block;text-align:center;background:#1b2838;border:1px solid var(--border);border-radius:10px;padding:16px;color:#fff;text-decoration:none;font-weight:800;margin-bottom:18px;}
.steam-btn:hover{filter:brightness(1.1);}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:18px 0;}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--border);}

/* ── Modern Frosted Header ──
   Fix for balance/volume/bell dropping to a second row on narrower
   viewports: the header no longer wraps as a whole. Instead
   `.header-nav` (the game links) is the flexible/shrinkable piece —
   it scrolls horizontally on its own when space runs out — while
   `.brand` and `.header-right` stay fixed-size and pinned in place. */
header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  padding: 14px 28px;
  background: linear-gradient(180deg, rgba(23, 27, 33, 0.85) 0%, rgba(16, 19, 24, 0.75) 100%); /* Translucent base */
  backdrop-filter: blur(14px); /* Glassmorphism effect */
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06); /* Softer border */
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
  position: sticky;
  top: 0;
  /* Must stay above .chat (z-index:45) and .chat-toggle (z-index:46).
     The chat sidebar is position:fixed and spans top:0 to bottom:0, so
     on narrow viewports — where the <760px rule below resets body's
     margin-left to 0 but leaves .chat pinned at left:0 with a higher
     z-index — chat was painting directly over the header, hiding the
     logo. Keeping header above it guarantees the top bar is always
     visible, at any width or chat state. Stays below true overlays
     (.overlay/.cmodal-overlay at 50/200) so modals still cover it. */
  z-index: 47;
}
.brand{font-family:'Arial Narrow','Roboto Condensed',sans-serif;font-size:26px;font-weight:800;letter-spacing:2px;text-transform:uppercase;cursor:pointer;flex-shrink:0;}
.brand span{color:var(--accent);}
/* Balance / volume / bell / profile: never shrink or wrap — always
   stay as one row pinned to the right edge of the header. */
.header-right{display:flex;align-items:center;gap:16px;flex-wrap:nowrap;flex-shrink:0;margin-left:auto;}
.balance-chip{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:4px 10px;text-align:right;}
.balance-chip .lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;}
.balance-chip .val{font-size:18px;font-weight:800;color:var(--ok);}
.header-deposit-btn{
  display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#201404;
  font-size:12.5px;font-weight:800;padding:8px 14px;border-radius:8px;text-decoration:none;
  white-space:nowrap;margin-left:12px;transition:filter .12s,transform .1s;
}
.header-deposit-btn:hover{filter:brightness(1.1);transform:translateY(-1px);}
.games-link{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:9px 14px;color:var(--text);text-decoration:none;font-weight:700;font-size:13px;white-space:nowrap;}
.games-link:hover{background:var(--card-hi);border-color:var(--accent);}
/* ── Modern underline-tab nav ──
   Ditched the "filled pill" look — it read as boxy/dated. Container is
   now just a faint divider strip (no heavy background box), links sit
   directly on it, and the active tab is marked by a slim glowing
   underline + brightened icon/text instead of a solid fill chip. This
   is the cleaner, more current pattern (think modern SaaS dashboards /
   game launchers) rather than old-school button tabs. */
.header-nav {
  display: inline-flex;
  align-items: center;
  gap: calc(2px * var(--nav-scale, 1));
  background: transparent;
  border-radius: 0;
  padding: 0;
  backdrop-filter: none;
  border: none;
  box-shadow: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  /* Tabs shrink in place (font/padding scaled down via --nav-scale,
     computed by fitHeaderNav() in common.js) so every game stays
     visible on one row instead of getting scrolled/clipped out of
     view. Horizontal overflow stays hidden as a safety net only —
     vertical must stay visible, or the Jackpot/Coinflip nav
     glow+badge notifications (which intentionally bleed slightly
     above/below the link) get silently clipped. */
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: visible;
}
/* Slim, text-forward tabs — no border/box by default. All sizing below
   is driven by --nav-scale (1 = full size; set on .header-nav by
   fitHeaderNav() in common.js), so tabs shrink together to fit the
   available width instead of overflowing or getting clipped. */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--nav-scale, 1));
  background: transparent;
  border: none;
  border-radius: 8px 8px 0 0;
  padding: calc(10px * var(--nav-scale, 1)) calc(16px * var(--nav-scale, 1));
  font-weight: 600;
  font-size: calc(13px * var(--nav-scale, 1));
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
  letter-spacing: 0.3px;
  position: relative;
  flex-shrink: 0;
}
/* Underline indicator, hidden until hover/active. Animates in from
   the center for a subtle, premium feel rather than a hard cut. */
.nav-link::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-link i {
  font-size: calc(13px * var(--nav-scale, 1));
  opacity: 0.6;
  transition: opacity 0.2s;
}
/* Hover: just a text-color shift + faint top-lit wash, no border box. */
.nav-link:hover {
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
}
.nav-link:hover::after {
  transform: scaleX(0.6);
  opacity: 0.55;
}
.nav-link:hover i {
  opacity: 1;
}
/* Active: bright text + full glowing underline. Glow comes from a
   layered text-shadow-free box-shadow on the pseudo-element via the
   parent, kept subtle so it reads premium rather than neon. */
.nav-link.nav-active {
  background: linear-gradient(180deg, rgba(224,139,63,0.10) 0%, transparent 100%);
  color: var(--accent-2);
}
.nav-link.nav-active::after {
  transform: scaleX(1);
  opacity: 1;
  box-shadow: 0 0 10px rgba(224,139,63,0.75), 0 0 2px rgba(224,139,63,0.9);
}
.nav-link.nav-active i {
  opacity: 1;
  color: var(--accent);
}

/* ── Nav overflow → dropdown arrow ──
   Below this width the balance/volume/bell/profile group starts
   crowding the game-mode links. Instead of scrolling the nav
   sideways, we hide it and swap in a single arrow button that opens
   a glass dropdown panel with the full link list — nothing is lost,
   it just tucks away until asked for.

   This uses a CONTAINER query (@container), not a viewport media
   query. A media query only sees raw browser-window width, so it had
   no idea the chat sidebar was already eating 300px — the arrow used
   to appear far too late while chat was open. The container query
   measures body's actual rendered width (which already shrinks by
   --chat-w when chat is open, see the `container-type` rule on body
   above), so the same threshold now correctly triggers sooner
   whenever chat is open, and later when it's closed — no separate
   chat-open/closed case needed.

   NOTE: tabs now shrink-to-fit on their own via --nav-scale (see
   fitHeaderNav() in common.js), so this dropdown is no longer the
   primary way we handle a crowded header — it's just a last-resort
   fallback for genuinely small/mobile widths, where even the smallest
   readable tab size wouldn't fit all games on one row. Lowered from
   1500px to 640px accordingly; raise again only if fitHeaderNav's
   min scale still clips on real small screens. */
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  flex-shrink:0;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:9px;
  color:var(--muted);
  cursor:pointer;
  transition: all .18s ease;
}
.nav-toggle:hover{color:var(--text);background:rgba(255,255,255,0.08);border-color:rgba(224,139,63,0.35);}
.nav-toggle i{font-size:13px;transition:transform .2s ease;}
.nav-toggle.open{color:var(--accent-2);border-color:rgba(224,139,63,0.4);background:rgba(224,139,63,0.08);}
.nav-toggle.open i{transform:rotate(180deg);}

@container page-shell (max-width: 640px){
  /* Swap: inline scrolling nav hides, arrow button appears */
  .header-nav{display:none;}
  .nav-toggle{display:inline-flex;}

  /* When opened, .header-nav (two classes = higher specificity than
     the media-query rule above) becomes a floating glass dropdown
     anchored under the header, full game list stacked vertically. */
  .header-nav.nav-open{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    position:absolute;
    top:100%;
    left:20px;
    right:20px;
    margin-top:8px;
    padding:8px;
    max-height:min(70vh, 480px);
    overflow-y:auto;
    overflow-x:hidden;
    background: linear-gradient(180deg, rgba(27,31,38,0.98) 0%, rgba(18,21,26,0.98) 100%);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 25;
  }
  .header-nav.nav-open .nav-link{
    border-radius:9px;
    padding:11px 14px;
  }
  .header-nav.nav-open .nav-link::after{ display:none; } /* no underline indicator in dropdown */
  .header-nav.nav-open .nav-link:hover{
    background: rgba(255,255,255,0.06);
    color: var(--text);
  }
  .header-nav.nav-open .nav-link.nav-active{
    background: rgba(224,139,63,0.12);
    color: var(--accent-2);
  }
  .header-nav.nav-open .nav-link.nav-active i{ color:var(--accent); }
}

/* ── Jackpot nav notification: lights up the Jackpot link with a pulsing
   glow + small badge when a deposit happens while you're on another page. ── */
.nav-link-jackpot{position:relative;}
.nav-link-jackpot.jp-nav-glow{background:rgba(232,200,64,.14);border-color:#e8c840;animation:jpNavGlow 1.3s ease-in-out infinite;}
@keyframes jpNavGlow{
  0%,100%{box-shadow:0 0 0 rgba(232,200,64,0);}
  50%{box-shadow:0 0 20px rgba(232,200,64,.9);}
}
.jp-nav-badge{
  position:absolute;top:-8px;right:-8px;width:15px;height:15px;border-radius:50%;
  background:#e8c840;border:2px solid #171b21;opacity:0;transform:scale(0);
  box-shadow:0 0 8px rgba(232,200,64,.8);
  transition:opacity .2s ease,transform .2s cubic-bezier(.22,1.6,.36,1);
}
.jp-nav-badge.show{opacity:1;transform:scale(1);animation:jpNavBadgePulse 1.3s ease-in-out infinite;}
@keyframes jpNavBadgePulse{0%,100%{transform:scale(1);}50%{transform:scale(1.4);}}
/* ── Coinflip nav notification: same pattern as Jackpot above, lights up
   the Coinflip link when someone joins a flip you created while you're
   elsewhere on the site. ── */
.nav-link-coinflip{position:relative;}
.nav-link-coinflip.cf-nav-glow{background:rgba(232,200,64,.14);border-color:#e8c840;animation:jpNavGlow 1.3s ease-in-out infinite;}
.cf-nav-badge{
  position:absolute;top:-8px;right:-8px;width:15px;height:15px;border-radius:50%;
  background:#e8c840;border:2px solid #171b21;opacity:0;transform:scale(0);
  box-shadow:0 0 8px rgba(232,200,64,.8);
  transition:opacity .2s ease,transform .2s cubic-bezier(.22,1.6,.36,1);
}
.cf-nav-badge.show{opacity:1;transform:scale(1);animation:jpNavBadgePulse 1.3s ease-in-out infinite;}
.currency-switcher{display:inline-flex;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:3px;}
.currency-switcher button{border:none;background:transparent;color:var(--muted);font-weight:700;font-size:13px;padding:7px 11px;border-radius:7px;cursor:pointer;}
.currency-switcher button.active{background:var(--accent);color:#201404;}
.profile{position:relative;}
.profile-btn{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:6px 12px 6px 6px;cursor:pointer;}
.profile-btn img{width:32px;height:32px;border-radius:7px;} .profile-btn .nm{font-weight:700;font-size:14px;} .profile-btn .caret{color:var(--muted);font-size:11px;}
.menu{position:absolute;right:0;top:52px;min-width:170px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:6px;display:none;box-shadow:0 12px 30px rgba(0,0,0,.4);}
.menu.open{display:block;} .menu a{display:block;padding:10px 12px;border-radius:7px;color:var(--text);text-decoration:none;font-size:14px;font-weight:600;}
.menu a:hover{background:var(--card-hi);} .menu .sep{height:1px;background:var(--border);margin:5px 0;} .menu a.danger{color:#ff8a80;}

/* notification bell */
.bell{position:relative;}
.bell-btn{position:relative;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px 11px;font-size:16px;cursor:pointer;color:var(--text);transition:box-shadow .2s,border-color .2s;}
.sound-toggle-btn{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px 11px;font-size:16px;cursor:pointer;color:var(--text);transition:border-color .2s,color .2s;}
.sound-toggle-btn:hover{border-color:var(--accent);color:var(--accent);}
.bell.has-unread .bell-btn{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok),0 0 14px rgba(76,175,109,.7);animation:bellpulse 1.4s ease-in-out infinite;}
@keyframes bellpulse{0%,100%{box-shadow:0 0 0 1px var(--ok),0 0 8px rgba(76,175,109,.5);}50%{box-shadow:0 0 0 1px var(--ok),0 0 18px rgba(76,175,109,.9);}}
.bell-dot{position:absolute;top:4px;right:5px;width:9px;height:9px;border-radius:50%;background:var(--ok);display:none;}
.bell.has-unread .bell-dot{display:block;}

/* ── Notification dropdown — full remake: no emoji, colored icon badges
   per category, a cleaner card-row layout, unread shown as a subtle
   left-accent + dot rather than a full-row background tint. ── */
.notif-menu {
  width: 380px;
  right: 0;
  top: 52px;
  max-height: 65vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
  padding: 4px;
}
.notif-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  padding: 12px 14px 10px;
  font-weight: 800;
}
.notif-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  transition: background .12s ease;
}
.notif-item:hover { background: var(--card-hi); cursor: pointer; }
.notif-item.unread::before {
  content: ''; position: absolute; left: 3px; top: 12px; bottom: 12px;
  width: 3px; border-radius: 3px; background: var(--accent);
}
.notif-item.unread { background: rgba(232,145,43,0.05); }
.notif-ic-badge {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.notif-ic-badge.tone-pos    { background: rgba(76,175,109,.14); color: var(--ok, #4caf6d); }
.notif-ic-badge.tone-neg    { background: rgba(248,113,113,.14); color: #f87171; }
.notif-ic-badge.tone-accent { background: rgba(232,145,43,.14); color: var(--accent); }
.notif-body { flex: 1; min-width: 0; }
.notif-msg {
  font-size: 13px; line-height: 1.45; color: var(--text);
  word-wrap: break-word;
}
.notif-msg b { color: var(--accent); font-weight: 700; }
.notif-item .nt {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
  letter-spacing: 0.2px;
}
.notif-empty{
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--muted); font-size: 13px; padding: 32px 12px;
}
.notif-empty i { font-size: 22px; opacity: .5; }
.tip-confirm{margin-top:12px;} .tip-confirm p{font-size:14px;margin:0 0 10px;}

/* admin badge */
.admin-badge{display:inline-block;font-size:9px;font-weight:900;letter-spacing:.6px;padding:2px 6px;border-radius:5px;
  background:linear-gradient(135deg,#f0a860,#e08b3f);color:#201404;vertical-align:middle;margin-left:6px;text-shadow:none;}
.chat-admin-badge{margin-left:0;margin-right:6px;}
.uc .admin-badge{margin-left:8px;}

/* admin panel + withdraw specific bits */
.wd-row{background:var(--card);border:1px solid var(--border);border-radius:9px;padding:12px 14px;margin-bottom:10px;}
.wd-row .top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.wd-row .items{font-size:12px;color:var(--muted);margin-top:6px;}
.wd-row .actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.wd-row .actions button{padding:8px 14px;border-radius:7px;border:none;font-weight:800;font-size:12px;cursor:pointer;background:var(--card-hi);color:var(--text);border:1px solid var(--border);}
.wd-row .actions button.remove{background:var(--lock);color:#fff;border:none;}
.wd-row .actions button.btn-sent{background:var(--ok);color:#08130c;border:none;}
.wd-row .actions button.btn-cancel{background:var(--lock);color:#fff;border:none;}
.wd-row .trade-link{font-size:12px;word-break:break-all;}
.user-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:9px;padding:10px 14px;margin-bottom:8px;font-size:13px;}
.user-row button{padding:7px 12px;border-radius:7px;border:none;font-weight:800;font-size:12px;cursor:pointer;background:var(--accent);color:#201404;}
.user-row button.remove{background:var(--lock);color:#fff;}
.user-row button:disabled{opacity:.4;cursor:not-allowed;}

/* transactions page tabs */
.tabs, .ptabs {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.2); /* Deeper inset background */
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 12px; /* Smoother rounding */
  padding: 4px;
  gap: 4px;
}

.tab-btn, .ptab-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-btn:hover, .ptab-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

.tab-btn.active, .ptab-btn.active {
  background: var(--card-hi);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* stock management rows */
.stock-row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--border);border-radius:9px;padding:10px 14px;margin-bottom:8px;}
.stock-row img{width:40px;height:40px;flex:0 0 40px;}
.stock-row .info{flex:1;font-size:13px;}
.stock-row .info b{display:block;margin-bottom:2px;}
.stock-row button{padding:7px 12px;border-radius:7px;border:none;font-weight:800;font-size:12px;cursor:pointer;background:var(--accent);color:#201404;}
.stock-row button.unhide{background:var(--ok);color:#08130c;}

/* stock grid: multiple compact cards per row instead of one long scrolling list */
.stock-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;}
.stock-card{background:var(--card);border:1px solid var(--border);border-top:3px solid var(--quality,var(--border));border-radius:10px;padding:12px 10px 10px;text-align:center;}
.stock-card .img-wrap{height:56px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-radius:6px;}
.stock-card img{max-width:56px;max-height:56px;position:relative;z-index:1;}
.stock-card .name{font-size:11px;font-weight:700;height:28px;overflow:hidden;margin:6px 0 4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.stock-card .price-line{font-size:11px;color:var(--muted);margin-bottom:2px;}
.stock-card .withdraw-price{font-size:13px;font-weight:800;margin-bottom:6px;}
.stock-card .flags{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin-bottom:8px;min-height:18px;}
.stock-card .flags .hint{font-size:9px;}
.stock-card .actions{display:flex;gap:5px;}
.stock-card .actions button{flex:1;padding:6px 4px;border-radius:6px;border:none;font-weight:800;font-size:10px;cursor:pointer;background:var(--accent);color:#201404;}
.stock-card .actions button.unhide{background:var(--ok);color:#08130c;}

/* betting-style odds badge (visual entertainment only — nothing is ever paid out) */
.odds-badge{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:20px;background:rgba(224,139,63,.15);color:var(--accent-2);}

/* leaderboard rows */
.lb-row{display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:9px;padding:9px 14px;margin-bottom:6px;font-size:13px;}
.lb-rank{font-weight:900;color:var(--accent);margin-right:8px;}

/* admin chat history rows */
.chat-log-row{padding:8px 10px;border-bottom:1px solid var(--border);font-size:13px;}
.chat-log-row .who{font-weight:800;color:var(--accent-2);margin-right:6px;}
.chat-log-row .tm{font-size:11px;color:var(--muted);margin-left:8px;float:right;}

.wrap{max-width:1120px;margin:0 auto;padding:24px 20px 0;}

/* ── Inventory page layout ──
   Two columns: the item grid owns the left and starts flush with the top
   of the page; every control (tabs, search, sort, refresh, selection
   actions, total) lives in a sidebar to its right, sticky so it stays
   reachable while a long inventory scrolls.

   Visual direction: the old sidebar was a flat dark inset bar that read as
   part of the same shadowy furniture as the rest of the admin-style chrome.
   This version gives the sidebar its own surface — a soft frosted panel a
   step lighter than the page, with a hairline border and a faint glow —
   so it reads as a distinct, modern control surface rather than more dark
   background. Accent color (the site's existing orange) is reserved for
   the one state that matters: the active tab and the two selection
   actions. Everything else stays neutral so nothing competes with the
   item cards. */
.inv-layout{display:flex;align-items:flex-start;gap:22px;padding:20px 28px 0;}
.inv-main{flex:1 1 auto;min-width:0;}
/* top was 20px, measured against nothing — but the page's own header is
   ALSO sticky (top:0, z-index:47) at ~87px tall, so a sidebar sticking at
   just 20px slides its own top ~65px (exactly the tab buttons) underneath
   that header on scroll, instead of stopping below it. --header-h is a
   deliberately generous estimate of the header's height (it can vary a
   little with content), plus a small gap so the sidebar never touches it. */
.inv-side{
  flex:0 0 260px;width:260px;position:sticky;top:calc(var(--header-h, 88px) + 12px);z-index:10;
  display:flex;flex-direction:column;gap:14px;
}

/* ── Panel surface ──
   Shared by the tab switcher, the control rail, and the bulk-action tray
   so the sidebar reads as one material split into sections, not three
   different components glued together. */
.inv-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),var(--panel);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 24px rgba(0,0,0,.18);
}

/* tabs: a segmented control filling the sidebar width */
.inv-side .tabs{
  display:flex;width:100%;gap:2px;padding:4px;
}
.inv-side .tab-btn{
  flex:1;padding:10px 8px;font-size:12px;font-weight:800;white-space:nowrap;
  border-radius:11px;color:var(--muted);letter-spacing:.2px;
}
.inv-side .tab-btn i{margin-right:6px;opacity:.85;}
.inv-side .tab-btn:hover{background:rgba(255,255,255,.05);color:var(--text);}
.inv-side .tab-btn.active{
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  color:#201404;box-shadow:0 4px 14px rgba(224,139,63,.28);
}
.inv-side .tab-btn.active i{opacity:1;}

.inv-controls{display:flex;flex-direction:column;gap:12px;min-width:0;}

/* ── Control rail ──
   Rows separated by hairlines instead of a nested dark inset box, so the
   whole sidebar feels like one calm surface with quiet internal structure. */
.inv-rail{display:flex;flex-direction:column;padding:6px;gap:2px;}
.inv-row{display:flex;align-items:center;gap:6px;}
.inv-row .inv-chip{flex:1;}
.inv-sep{height:1px;background:rgba(255,255,255,.06);margin:5px 8px;}

/* search: pill-shaped, brightens on focus rather than boxing up at rest */
.inv-search{
  display:flex;align-items:center;gap:9px;padding:0 12px;height:38px;
  border-radius:11px;border:1px solid transparent;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.inv-search i{font-size:12px;color:var(--muted);transition:color .16s ease;}
.inv-search input{width:100%;min-width:0;border:none;background:none;color:var(--text);font-size:13.5px;font-family:inherit;padding:0;caret-color:var(--accent-2);color-scheme:dark;}
.inv-search input::placeholder{color:var(--muted);}
.inv-search input:focus{outline:none;}
.inv-search input::selection{background:rgba(224,139,63,.35);color:var(--text);}
/* Chrome/Edge paint autofilled fields with a hardcoded pale-yellow chip
   background + black text via an internal UA style that normal background
   rules can't override — this neutralizes it with a same-color inset
   box-shadow (the trick that actually works) and forces the text color. */
.inv-search input:-webkit-autofill,
.inv-search input:-webkit-autofill:hover,
.inv-search input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  box-shadow:0 0 0 1000px transparent inset,0 0 0 1000px var(--card) inset;
  transition:background-color 9999s ease-in-out 0s;
}
.inv-search:hover{background:rgba(255,255,255,.03);}
/* A hard 1px solid ring around the whole pill read as an old-school form-
   validation outline, and a zero-blur box-shadow "ring" (however faint)
   draws the exact same crisp rectangle — so this uses real blur radius to
   diffuse the color outward instead of tracing an edge. Paired with a
   barely-there hairline so the field still has *some* definition. */
.inv-search:focus-within{background:rgba(255,255,255,.055);border-color:rgba(224,139,63,.3);box-shadow:0 0 14px 2px rgba(224,139,63,.16);}
.inv-search:focus-within i{color:var(--accent-2);}

/* sort: native select stripped back to a label + chevron */
.inv-sort{position:relative;display:flex;align-items:center;border-radius:11px;transition:background .16s ease;}
.inv-sort:hover{background:rgba(255,255,255,.03);}
.inv-sort select{width:100%;appearance:none;-webkit-appearance:none;border:none;background:none;color:var(--text);font-size:13px;font-family:inherit;font-weight:600;height:38px;padding:0 30px 0 12px;cursor:pointer;}
.inv-sort select:focus{outline:none;}
.inv-sort:focus-within{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(224,139,63,.5);}
.inv-sort i{position:absolute;right:12px;font-size:9px;color:var(--muted);pointer-events:none;}
.inv-sort option{background:var(--card);color:var(--text);}

/* The <select> above is only kept around as a data source / change-event
   emitter for existing JS — enhanceSortSelect() in inventory.js hides it
   and builds the real, fully-themed control below. A native select's open
   popup is drawn by the OS/browser shell rather than the page, so no CSS
   here can ever reach it (that mismatch was the "old-school" white flyout
   with blue highlight). This custom version is real DOM the page owns
   end to end, so it always matches. */
.inv-native-select{position:absolute;opacity:0;pointer-events:none;width:0;height:0;padding:0;border:0;}

.inv-sort-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  height:38px;padding:0 12px;border:none;background:none;border-radius:11px;
  color:var(--text);font-size:13px;font-family:inherit;font-weight:600;cursor:pointer;
}
.inv-sort-btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:1px;}
.inv-sort-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.inv-sort-btn i.fa-chevron-down{position:static;transition:transform .16s ease;}
.inv-sort.open .inv-sort-btn i.fa-chevron-down{transform:rotate(180deg);color:var(--accent-2);}

.inv-sort-list{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
  margin:0;padding:6px;list-style:none;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)),var(--card);
  border:1px solid rgba(255,255,255,.09);border-radius:12px;
  box-shadow:0 14px 32px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.04) inset;
  animation:inv-sort-pop .14s ease;
}
@keyframes inv-sort-pop{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
.inv-sort-list li{
  padding:9px 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;
}
.inv-sort-list li:hover,.inv-sort-list li:focus{background:rgba(255,255,255,.06);outline:none;}
.inv-sort-list li[aria-selected="true"]{background:linear-gradient(180deg,var(--accent-2),var(--accent));color:#201404;}
.inv-sort-list li[aria-selected="true"]:hover{filter:brightness(1.05);}


/* icon-only refresh, spun from JS so a fast cached reload still registers */
.inv-icon-btn{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border:none;border-radius:11px;background:none;color:var(--muted);font-size:13px;cursor:pointer;transition:all .16s ease;}
.inv-icon-btn:hover{background:rgba(255,255,255,.06);color:var(--text);}
.inv-icon-btn.is-spinning i{animation:inv-spin .6s ease-in-out;}
@keyframes inv-spin{to{transform:rotate(360deg);}}

/* chips: quiet pill buttons, only "Sell selected" carries the accent */
.inv-chip{
  height:38px;padding:0 14px;border-radius:11px;
  border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);
  color:var(--text);font-size:12.5px;font-weight:700;font-family:inherit;
  cursor:pointer;white-space:nowrap;transition:all .16s ease;
}
.inv-chip:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);}
.inv-chip.accent{background:linear-gradient(180deg,var(--accent-2),var(--accent));border-color:transparent;color:#201404;box-shadow:0 4px 14px rgba(224,139,63,.22);}
.inv-chip.accent:hover{filter:brightness(1.06);}
.inv-chip:disabled{opacity:.4;cursor:not-allowed;filter:none;box-shadow:none;}

.inv-total{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px 6px;font-size:12px;color:var(--muted);}
.inv-total b{color:var(--text);font-weight:800;font-size:14px;}
.inv-rail .legend{flex:1;padding:0 8px;font-size:11px;}

/* Selection actions: only appear once something is selected, in their own
   accent-tinted panel below the rail so Sell/Withdraw read as a distinct
   contextual step, not two more buttons in the regular list. Growth is
   downward into empty sidebar space so nothing above ever moves. */
.inv-bulk{
  display:flex;flex-direction:column;gap:6px;overflow:hidden;
  max-height:180px;opacity:1;padding:10px;
  background:linear-gradient(180deg,rgba(224,139,63,.10),rgba(224,139,63,.03));
  border:1px solid rgba(224,139,63,.22);border-radius:16px;
  transition:max-height .24s ease,opacity .18s ease,padding .24s ease,border-color .24s ease,margin .24s ease;
}
.inv-bulk[data-active="false"]{max-height:0;opacity:0;padding-top:0;padding-bottom:0;border-color:transparent;margin-top:-14px;pointer-events:none;}
.inv-sel{padding:2px 4px 4px;font-size:12px;font-weight:800;color:var(--accent-2);}

/* keyboard users get a visible ring on every control */
/* Buttons get a hard focus-visible ring for keyboard nav — but Chromium
   always treats a clicked text field as focus-visible too (typing after a
   click is expected), so if this selector included inputs it would draw a
   second hard rectangle directly on top of .inv-search's own soft glow
   below. Scoped to buttons only; the search field and sort control already
   show their own focus state. */
.inv-side button:focus-visible{outline:2px solid var(--accent-2);outline-offset:1px;}

/* Below this the sidebar can't hold its own column, so it moves above the
   grid and the rail lays back out horizontally. */
@media (max-width:900px){
  .inv-layout{flex-direction:column;padding:14px 14px 0;gap:14px;}
  .inv-side{position:static;flex:none;width:100%;order:-1;top:auto;}
  .inv-main{width:100%;}
  .inv-rail{flex-direction:row;flex-wrap:wrap;align-items:center;}
  .inv-search{flex:1 1 160px;}
  .inv-sort{flex:0 1 190px;}
  .inv-sep{display:none;}
  .inv-row{flex:0 0 auto;}
  .inv-total{margin-left:auto;}
  .inv-bulk{flex-direction:row;align-items:center;flex-wrap:wrap;max-height:120px;}
  .inv-bulk[data-active="false"]{margin-top:0;}
}
@media (prefers-reduced-motion:reduce){
  .inv-rail *,.inv-bulk,.inv-side .tab-btn{transition:none!important;animation:none!important;}
}

/* ── Recent Withdrawals ──
   Lives inside the sidebar column (one instance per tab, nested in that
   tab's .inv-controls) rather than as a full-width panel below the grid.
   Rows are two lines (full-width title on top, meta+status below) because
   at this 260px column width a single line has to fight the status badge
   for space, which truncates larger amounts.

   The row/status classes are prefixed `wdh-` (withdrawal history) rather
   than reusing the shorter `wd-` names, because `.wd-row` was already a
   different, unrelated component elsewhere (admin's withdrawal queue) —
   sharing the name meant its rules leaked in as an unwanted margin here. */
.inv-recent{padding:6px;}
.inv-recent-head{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 6px;}
.inv-recent-head h2{margin:0;font-size:13px;letter-spacing:.3px;}

/* Rows scroll within a capped height rather than letting the sidebar grow
   to match however many withdrawals exist — but taller than before (was
   260px) so noticeably more history is visible before you need to scroll
   this inner list at all. */
.inv-recent-list{max-height:480px;overflow-y:auto;}

.wdh-row{
  display:flex;flex-direction:column;gap:4px;width:100%;
  padding:10px 8px;border:none;border-radius:9px;background:none;
  color:var(--text);font-family:inherit;text-align:left;cursor:pointer;
  transition:background .14s ease;
}
.wdh-row:hover{background:rgba(255,255,255,.04);}
.wdh-row:not(:last-child){border-bottom:1px solid rgba(255,255,255,.05);}
.wdh-row-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.wdh-row-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.wdh-row-title{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wdh-row-meta{font-size:11px;color:var(--muted);}
.wdh-row-top > i.fa-chevron-right{font-size:10px;color:var(--muted);flex:0 0 auto;}

.wdh-status{flex:0 0 auto;padding:3px 8px;border-radius:20px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;}
.wdh-status-pending{background:rgba(214,168,58,.15);color:var(--pending);}
.wdh-status-ok{background:rgba(76,175,109,.15);color:var(--ok);}
.wdh-status-err{background:rgba(192,72,63,.15);color:#ff8a80;}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.panel h2{font-size:14px;margin:0 0 14px;}
label.fl{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin:0 0 8px;}
input.fld{width:100%;padding:11px 12px;border-radius:8px;border:1px solid var(--border);background:#12151a;color:var(--text);font-size:14px;}
input.fld:focus{outline:none;border-color:var(--accent);} input.fld:disabled{opacity:.5;}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;} .row>div{flex:1;min-width:200px;}
.btn{padding:11px 18px;border:none;border-radius:8px;background:var(--accent);color:#201404;font-weight:800;font-size:14px;cursor:pointer;white-space:nowrap;}
.btn:hover{filter:brightness(1.08);} .btn:disabled{opacity:.5;cursor:not-allowed;filter:none;} .btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text);}
.hint{font-size:12px;color:var(--muted);margin-top:8px;} .note{font-size:13px;margin-top:10px;min-height:18px;} .note.ok{color:var(--ok);} .note.err{color:#ff8a80;}
.tag{display:inline-block;font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.4px;}
.tag.ok{background:rgba(76,175,109,.15);color:var(--ok);} .tag.no{background:rgba(214,168,58,.15);color:var(--pending);}
.toggle{display:flex;align-items:center;gap:12px;} .toggle input{width:18px;height:18px;}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.toolbar h2{font-size:15px;margin:0;} .toolbar .right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.search,.sort{padding:9px 12px;border-radius:8px;border:1px solid var(--border);background:#12151a;color:var(--text);font-size:13px;} .search{width:180px;}
.btn-refresh{padding:9px 14px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text);font-weight:700;font-size:13px;cursor:pointer;}
.legend{font-size:12px;color:var(--muted);} .legend b{color:var(--lock);}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;min-height:120px;}
.state-msg{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 0;}
.spinner{width:34px;height:34px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px;}
@keyframes spin{to{transform:rotate(360deg)}}
.item-card{position:relative;background:var(--card);border:1px solid var(--border);border-top:3px solid var(--quality);border-radius:10px;padding:12px 10px 10px;text-align:center;cursor:pointer;transition:transform .12s,border-color .12s,background .12s,box-shadow .12s;}
.item-card:hover{transform:translateY(-3px);background:var(--card-hi);}
.item-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 8px 22px rgba(224,139,63,.22);background:#2a2418;}
.item-card .img-wrap{height:70px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-radius:6px;} .item-card img{max-width:70px;max-height:70px;position:relative;z-index:1;}
/* Unusual effect preview — fills the icon square behind the item's own
   icon, same idea as backpack.tf's item cards. See common.js for the
   fetch/lookup logic and withUnusualEffectBackdrop() which builds this markup. */
.unusual-effect-backdrop{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;opacity:.85;}
.item-name{font-size:11px;font-weight:600;margin:8px 0 4px;color:var(--quality);height:30px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.item-price{font-size:13px;font-weight:800;margin:0;}
.count-badge{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.6);border:1px solid var(--border);color:var(--text);font-size:11px;font-weight:800;padding:2px 7px;border-radius:20px;}
.item-card .check{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#201404;font-size:14px;font-weight:900;line-height:22px;opacity:0;transform:scale(.4);transition:all .15s;}
.item-card.selected .check{opacity:1;transform:scale(1);}
.qty{display:inline-flex;align-items:center;gap:8px;margin-top:6px;}
.qty button{width:24px;height:24px;border-radius:6px;border:1px solid var(--border);background:var(--card-hi);color:var(--text);font-weight:900;cursor:pointer;line-height:1;}
.qty .q{font-size:12px;font-weight:800;min-width:40px;}
.item-card.untradable{cursor:not-allowed;} .item-card.untradable:hover{transform:none;background:var(--card);}
.item-card.untradable img{filter:grayscale(1) brightness(.65);} .item-card.untradable .item-name,.item-card.untradable .item-price{opacity:.45;}
.lock-overlay{position:absolute;inset:0;border-radius:9px;background:repeating-linear-gradient(45deg,rgba(192,72,63,.10) 0 10px,rgba(0,0,0,0) 10px 20px),rgba(15,17,20,.35);display:flex;align-items:flex-start;justify-content:center;padding-top:26px;pointer-events:none;}
.lock-badge{background:var(--lock);color:#fff;font-size:10px;font-weight:800;padding:4px 8px;border-radius:20px;}

/* ── Withdrawal detail popup — item cards ──
   Reuses the exact same .item-card visual language as the item grids
   (quality-colored top border, image with its Unusual effect backdrop,
   strange-part/spell badges, price) instead of plain text rows — same
   approach Crafter uses for previewing items pulled from your inventory.
   Just smaller, since a popup shows 1-6 items, not a full grid. */
.wd-detail-modal{width:520px;}
.wd-detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;}
.wd-mini-card{cursor:default;padding:9px 7px 8px;}
.wd-mini-card:hover{transform:none;background:var(--card);}
.wd-mini-card .img-wrap{height:48px;}
.wd-mini-card .img-wrap img{max-width:48px;max-height:48px;}
.wd-mini-card .item-name{font-size:10px;height:26px;margin:6px 0 3px;}
.wd-mini-card .item-price{font-size:11.5px;}

/* Explicit reason a Pending row has no Cancel button (a live Steam trade
   offer, nothing on our side to retract) — its own small notice instead of
   a clause buried in the muted sub-line, so it reads as expected rather
   than something missing/broken. */
.wd-no-cancel-notice{
  display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:10px 12px;
  background:rgba(214,168,58,.08);border:1px solid rgba(214,168,58,.2);border-radius:10px;
  font-size:12px;color:var(--pending);line-height:1.4;
}
.wd-no-cancel-notice::before{content:"\2139";flex:0 0 auto;font-weight:900;font-size:14px;}

.deposits h2{font-size:14px;margin:0 0 12px;}
.dep-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:9px;padding:11px 14px;margin-bottom:8px;font-size:13px;}
.dep-row .meta{color:var(--muted);font-size:12px;}
.badge{font-size:11px;font-weight:800;padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.4px;}
.badge.pending{background:rgba(214,168,58,.15);color:var(--pending);} .badge.accepted{background:rgba(76,175,109,.15);color:var(--ok);}
.badge.declined,.badge.canceled,.badge.expired,.badge.invalid_items{background:rgba(192,72,63,.15);color:var(--lock);}

.deposit-bar{position:fixed;bottom:0;left:var(--chat-w);right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;background:rgba(18,21,26,.96);border-top:1px solid var(--border);backdrop-filter:blur(6px);transition:left .15s;}
.deposit-info{font-size:14px;} .deposit-info b{color:var(--accent-2);} .deposit-total{font-size:20px;font-weight:800;}
.deposit-btn{padding:13px 26px;border:none;border-radius:10px;cursor:pointer;background:var(--accent);color:#201404;font-weight:800;font-size:15px;} .deposit-btn:disabled{opacity:.45;cursor:not-allowed;}
.deposit-btn.ghost-btn{background:transparent;border:1px solid var(--border);color:var(--text);}

.overlay{position:fixed;inset:0;z-index:50;background:rgba(8,10,13,.72);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;}
.overlay.open{display:flex;}
.modal{width:430px;max-width:calc(100vw - 40px);background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:26px;box-shadow:0 24px 60px rgba(0,0,0,.5);}
.modal h3{margin:0 0 4px;font-size:18px;} .modal .sub{color:var(--muted);font-size:13px;margin:0 0 20px;}
.steps{list-style:none;margin:0;padding:0;} .steps li{display:flex;align-items:center;gap:12px;padding:10px 0;color:var(--muted);font-size:14px;}
.steps li .dot{width:24px;height:24px;border-radius:50%;flex:0 0 24px;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;}
.steps li.active{color:var(--text);} .steps li.active .dot{border-color:var(--accent);}
.steps li.active .dot::after{content:'';width:12px;height:12px;border-radius:50%;border:2px solid var(--accent);border-top-color:transparent;animation:spin .7s linear infinite;}
.steps li.done{color:var(--text);} .steps li.done .dot{border-color:var(--ok);background:var(--ok);color:#08130c;} .steps li.done .dot::after{content:'✓';}
.steps li.error{color:#ff8a80;} .steps li.error .dot{border-color:var(--lock);background:var(--lock);color:#fff;} .steps li.error .dot::after{content:'!';}
.result{margin-top:18px;display:none;} .result.show{display:block;} .result p{font-size:14px;line-height:1.5;}
.result .ok-title{color:var(--ok);font-weight:800;font-size:16px;} .result .err-title{color:#ff8a80;font-weight:800;font-size:16px;} .result .wait{color:var(--pending);font-weight:700;}
.modal-actions{display:flex;gap:10px;margin-top:18px;}
.modal-actions a,.modal-actions button{flex:1;text-align:center;text-decoration:none;padding:11px 14px;border-radius:9px;font-weight:700;font-size:14px;cursor:pointer;border:none;}
.btn-primary{background:var(--accent);color:#201404;} .btn-ghost{background:transparent;border:1px solid var(--border) !important;color:var(--text);}

/* user popup */
.uc{display:flex;gap:14px;align-items:center;margin-bottom:14px;} .uc img{width:64px;height:64px;border-radius:10px;border:1px solid var(--border);background:var(--card);}
.uc .un{font-weight:800;font-size:18px;} .uc .ui{font-size:12px;color:var(--muted);}
.urow{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid var(--border);font-size:14px;} .urow span{color:var(--muted);}
/* Same fix already applied in crates.js/settings.js: the site-wide
   .bolt-icon rule is sized (2.4em) for the big header balance display —
   inheriting that in this popup's small rows/cards made it balloon to a
   wildly inconsistent size next to 12-14px text. Pin it to a small fixed
   pixel size per context instead. */
.urow b .bolt-icon { width: 16px !important; height: 16px !important; margin-left: 0 !important; vertical-align: middle !important; }
.up-stat-val .bolt-icon { width: 15px !important; height: 15px !important; margin-left: 0 !important; vertical-align: middle !important; }
.up-game-val .bolt-icon { width: 16px !important; height: 16px !important; margin-left: 0 !important; vertical-align: middle !important; }
.tip-box{margin-top:16px;border-top:1px solid var(--border);padding-top:14px;} .tip-box .row2{display:flex;gap:8px;margin-top:8px;}
.tip-box input{flex:1;padding:10px 11px;border-radius:8px;border:1px solid var(--border);background:#12151a;color:var(--text);}

/* chat dock */
.chat{position:fixed;top:0;left:0;bottom:0;width:var(--chat-w);z-index:45;background:#12151a;border-right:1px solid var(--border);display:flex;flex-direction:column;}
.chat.hidden{display:none;}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);}
.chat-head .t{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:1px;} .chat-head .t b{color:var(--accent);}
.chat-head button{background:transparent;border:none;color:var(--muted);font-size:18px;cursor:pointer;}
.chat-msgs{flex:1;overflow-y:auto;padding:12px 14px;}
.cmsg{margin-bottom:10px;font-size:13px;line-height:1.35;word-break:break-word;}
.cmsg .who{font-weight:800;color:var(--accent-2);margin-right:6px;cursor:pointer;} .cmsg .who:hover{text-decoration:underline;}
.cmsg .tm{font-size:10px;color:var(--muted);margin-left:6px;}
.chat-input{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border);}
.chat-input input{flex:1;padding:9px 11px;border-radius:8px;border:1px solid var(--border);background:#0e1115;color:var(--text);font-size:13px;}
.chat-input button{padding:9px 14px;border:none;border-radius:8px;background:var(--accent);color:#201404;font-weight:800;cursor:pointer;}
.chat-resizer{position:absolute;top:0;right:-3px;width:8px;height:100%;cursor:ew-resize;}
.chat-toggle{position:fixed;left:12px;bottom:14px;z-index:46;display:none;background:var(--accent);color:#201404;border:none;border-radius:10px;padding:11px 16px;font-weight:800;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.4);}
@media(max-width:760px){body{margin-left:0;} .chat{width:min(85vw,320px);} .deposit-bar{left:0;}}
.cmodal-overlay{position:fixed;inset:0;z-index:200;background:rgba(8,10,13,.78);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;}
.cmodal-overlay.open{display:flex;}
.cmodal{width:400px;max-width:calc(100vw - 40px);background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:28px;box-shadow:0 28px 70px rgba(0,0,0,.6);animation:cmodal-in .15s ease;}
@keyframes cmodal-in{from{transform:scale(.94);opacity:0;}to{transform:scale(1);opacity:1;}}
.cmodal-icon{font-size:32px;margin-bottom:12px;text-align:center;}
.cmodal-title{font-size:17px;font-weight:800;margin:0 0 8px;text-align:center;}
.cmodal-body{font-size:13px;color:var(--muted);margin:0 0 22px;text-align:center;line-height:1.55;}
.cmodal-actions{display:flex;gap:10px;}
.cmodal-actions button{flex:1;padding:12px 14px;border-radius:9px;font-weight:700;font-size:14px;cursor:pointer;border:none;transition:filter .12s;}
.cmodal-actions button:hover{filter:brightness(1.1);}
.cmodal-btn-confirm{background:var(--accent);color:#201404;}
.cmodal-btn-confirm.danger{background:var(--lock);color:#fff;}
.cmodal-btn-cancel{background:transparent;border:1px solid var(--border) !important;color:var(--text);}
/* ── Strange Parts hover tooltip (shared by deposit/my-inventory/withdraw/admin) ── */
.strange-parts-tip{position:fixed;z-index:99999;display:none;background:#1b1f26;border:1px solid #CF6A32;border-radius:9px;padding:11px 13px;box-shadow:0 10px 28px rgba(0,0,0,.55);font-size:12px;color:#e8e8e8;max-width:280px;pointer-events:none;font-family:inherit;}
.strange-parts-tip .sp-tip-head{font-weight:700;color:#CF6A32;font-size:12px;margin-bottom:2px;}
.strange-parts-tip .sp-tip-sub{color:#9a9a9a;font-size:10px;margin-bottom:7px;}
.strange-parts-tip .sp-tip-effect{color:#8650AC;font-weight:600;font-size:13px;margin-bottom:7px;}
.strange-parts-tip .sp-tip-rows{display:flex;flex-direction:column;gap:4px;}
.strange-parts-tip .sp-tip-row{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.strange-parts-tip .sp-tip-name{color:#ddd;}
.strange-parts-tip .sp-tip-bonus{color:#4caf7d;font-weight:700;white-space:nowrap;font-size:11px;}
.strange-parts-tip .sp-tip-unknown{color:#777;font-style:italic;white-space:nowrap;font-size:11px;}
.strange-parts-tip .sp-tip-total{margin-top:8px;padding-top:8px;border-top:1px solid #333;font-weight:700;color:#4caf7d;}
/* Unusual effect tooltips get a purple accent instead of the default
   Strange-quality orange — orange specifically means Strange in TF2, so
   reusing it for Unusuals (which have nothing to do with Strange) was
   the actual bug, not just a preference. */
.strange-parts-tip.is-unusual{border-color:#8650AC;}
.strange-parts-tip.is-unusual .sp-tip-head{color:#8650AC;}

/* ── Withdrawal request details: Coinflip-style item picker ── */
.wd-detail-modal{width:640px;max-width:calc(100vw - 32px);}
#wdDetailList{max-height:430px!important;overflow-y:auto!important;padding:2px 2px 4px;scrollbar-width:thin;}
.wd-cf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:7px;}
.wd-cf-slot{
  --qc:#4d4b2a;
  background:radial-gradient(120% 90% at 50% 28%,color-mix(in srgb,var(--qc) 28%,#1c1c24),#1c1c24 75%);
  border:1px solid #34343f;border-radius:8px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;isolation:isolate;cursor:default;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.wd-cf-slot:hover{border-color:#c98a18;transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.4);z-index:2;}
.wd-cf-slot .unusual-effect-backdrop{position:absolute;inset:0;z-index:0;background-size:117% auto;background-position:center;background-repeat:no-repeat;opacity:.85;}
.wd-cf-slot img{position:relative;z-index:1;width:70%;height:70%;object-fit:contain;transition:transform .15s ease;}
.wd-cf-slot:hover img{transform:scale(1.05);}
.wd-cf-qc{position:absolute;top:5px;left:5px;bottom:5px;width:3px;z-index:2;background:var(--qc);border-radius:3px;opacity:.9;box-shadow:0 0 6px var(--qc);}
.wd-cf-price{position:absolute;left:3px;right:3px;bottom:3px;z-index:4;background:color-mix(in srgb,#1c1c24 78%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#ffb020;font-size:10px;font-weight:800;padding:2px 5px;border-radius:8px;line-height:1.3;text-align:center;}
.wd-cf-price .bolt-icon{width:2em!important;height:2em!important;vertical-align:-.62em!important;}
.wd-cf-placeholder{font-size:28px;color:var(--muted);opacity:.5;position:relative;z-index:1;}
.wd-cf-slot .value-badges{z-index:5;}
@media(max-width:560px){.wd-cf-grid{grid-template-columns:repeat(3,1fr);gap:5px}.wd-detail-modal{width:96vw}.wd-cf-price{font-size:9px;}}


/* ═══════════════════════════════════════════════════════════════
   Admin · unified withdrawals — modern fulfillment workspace
   ═══════════════════════════════════════════════════════════════ */
.admin-wd-shell{--awd-slot:#1c2028;--awd-slot-hi:#242a34;--awd-border:#303743;--awd-gold:#f0a860;display:flex;flex-direction:column;gap:14px;}
.admin-wd-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:20px 22px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(135deg,rgba(224,139,63,.10),rgba(255,255,255,.018) 42%,rgba(70,110,170,.07)),var(--panel);box-shadow:0 12px 30px rgba(0,0,0,.2);}
.admin-wd-eyebrow{display:flex;align-items:center;gap:7px;color:var(--accent-2);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:5px;}
.admin-wd-hero h2{margin:0;font-size:26px;letter-spacing:.8px;}
.admin-wd-hero p{margin:7px 0 0;max-width:760px;color:var(--muted);font-size:12px;line-height:1.55;}
.admin-wd-refresh{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;padding:9px 13px;border:1px solid var(--border);border-radius:9px;background:var(--card);color:var(--text);font-weight:800;font-size:11px;cursor:pointer;transition:.14s ease;}
.admin-wd-refresh:hover{border-color:rgba(224,139,63,.55);background:var(--card-hi);transform:translateY(-1px);}
.admin-wd-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.admin-wd-stat{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;border:1px solid var(--border);border-radius:12px;background:rgba(27,31,38,.82);}
.admin-wd-stat span{font-size:10px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.7px;}
.admin-wd-stat b{font-size:19px;}.admin-wd-stat.value b{color:var(--accent-2);}
.admin-wd-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 2px;}
.admin-wd-filters{display:flex;gap:5px;padding:4px;border:1px solid rgba(255,255,255,.05);border-radius:10px;background:rgba(0,0,0,.18);}
.admin-wd-filters button{display:flex;align-items:center;gap:6px;border:none;border-radius:7px;background:transparent;color:var(--muted);padding:7px 11px;font-size:11px;font-weight:800;cursor:pointer;transition:.13s ease;}
.admin-wd-filters button:hover{color:var(--text);background:rgba(255,255,255,.04);}.admin-wd-filters button.active{background:var(--card-hi);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.25);}
.admin-wd-search{width:min(340px,100%);display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid var(--border);border-radius:9px;background:var(--card);color:var(--muted);}
.admin-wd-search:focus-within{border-color:rgba(224,139,63,.6);box-shadow:0 0 0 3px rgba(224,139,63,.08);}.admin-wd-search input{width:100%;border:none;outline:none;background:none;color:var(--text);padding:9px 0;font:inherit;font-size:11.5px;}
.admin-wd-list{display:flex;flex-direction:column;gap:12px;}
.admin-wd-request{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 34%),var(--panel);box-shadow:0 7px 20px rgba(0,0,0,.16);}
.admin-wd-accent{height:3px}.admin-wd-accent.myitems{background:linear-gradient(90deg,#8b5cf6,#a78bfa 45%,transparent)}.admin-wd-accent.stock{background:linear-gradient(90deg,#e08b3f,#f0a860 45%,transparent)}
.admin-wd-request-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;border-bottom:1px solid rgba(255,255,255,.055);}
.admin-wd-user{display:flex;align-items:center;gap:10px;min-width:0}.admin-wd-avatar-letter{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:linear-gradient(145deg,var(--card-hi),var(--card));border:1px solid var(--border);font-size:14px;font-weight:900;color:var(--accent-2);flex:0 0 auto;}
.admin-wd-user-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.admin-wd-user-line strong{font-size:13px;}.admin-wd-meta{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:9.5px;margin-top:3px;}
.admin-wd-kind{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border-radius:999px;font-size:8.5px;font-weight:900;text-transform:uppercase;letter-spacing:.55px;border:1px solid;}.admin-wd-kind.myitems{color:#bca7ff;background:rgba(139,92,246,.12);border-color:rgba(167,139,250,.28)}.admin-wd-kind.stock{color:#f0b777;background:rgba(224,139,63,.11);border-color:rgba(224,139,63,.28)}
.admin-wd-summary{display:flex;align-items:center;gap:14px;flex:0 0 auto;color:var(--muted);font-size:10.5px}.admin-wd-summary b{color:var(--text)}.admin-wd-total{font-size:15px;font-weight:900;color:var(--accent-2);white-space:nowrap;}
.admin-wd-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;padding:14px 15px;background:rgba(7,9,12,.16);}
.admin-wd-item{--qc:#4d4b2a;position:relative;min-width:0;height:148px;display:flex;flex-direction:column;align-items:center;overflow:hidden;isolation:isolate;border:1px solid var(--awd-border);border-radius:9px;background:radial-gradient(120% 90% at 50% 28%,color-mix(in srgb,var(--qc) 24%,var(--awd-slot)),var(--awd-slot) 75%);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;}
.admin-wd-item:hover{border-color:color-mix(in srgb,var(--qc) 66%,var(--awd-border));transform:translateY(-2px);box-shadow:0 9px 20px rgba(0,0,0,.32);z-index:3}.admin-wd-qc{position:absolute;top:6px;left:6px;bottom:6px;width:3px;border-radius:3px;background:var(--qc);box-shadow:0 0 7px var(--qc);z-index:4;}
.admin-wd-item-img{position:relative;width:100%;height:82px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto}.admin-wd-item-img>.unusual-effect-backdrop{position:absolute;inset:0;z-index:0;background-size:115% auto;background-position:center;background-repeat:no-repeat;opacity:.78}.admin-wd-item-img img{position:relative;z-index:2;width:70%;height:70%;object-fit:contain;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));transition:transform .15s ease}.admin-wd-item:hover .admin-wd-item-img img{transform:scale(1.05)}
.admin-wd-item-placeholder{font-size:26px;color:var(--muted);opacity:.5}.admin-wd-item-name{width:100%;padding:0 8px;font-size:9.5px;line-height:1.22;font-weight:800;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.admin-wd-item-effect{width:100%;padding:2px 7px 0;color:#b89ae8;font-size:8px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.admin-wd-item-foot{margin-top:auto;width:calc(100% - 6px);min-height:28px;display:flex;align-items:center;justify-content:center;gap:4px;padding:3px 5px;border-radius:7px 7px 0 0;background:rgba(10,12,16,.72);backdrop-filter:blur(4px);}.admin-wd-item-price{font-size:9px;font-weight:900;color:var(--awd-gold);white-space:nowrap}.admin-wd-item-source{font-size:7.5px;color:var(--muted);white-space:nowrap}.admin-wd-item .bolt-icon{width:1.7em!important;height:1.7em!important;vertical-align:-.48em!important;}
.admin-wd-item .value-badges{top:5px!important;right:5px!important}.admin-wd-item .value-badge{font-size:8px!important;}
.admin-wd-request-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 15px;border-top:1px solid rgba(255,255,255,.045);background:rgba(0,0,0,.12)}.admin-wd-trade{display:inline-flex;align-items:center;gap:6px;color:var(--accent-2);font-size:10.5px;font-weight:800;text-decoration:none}.admin-wd-trade:hover{text-decoration:underline}.admin-wd-trade.disabled{color:var(--muted);opacity:.65}.admin-wd-actions{display:flex;gap:7px;align-items:center}.admin-wd-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:8px;padding:8px 12px;font-size:10.5px;font-weight:900;cursor:pointer;transition:.13s ease}.admin-wd-btn:disabled{opacity:.45;cursor:wait}.admin-wd-btn.sent{background:linear-gradient(180deg,#5bc17c,#45a968);color:#07150c}.admin-wd-btn.sent:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}.admin-wd-btn.cancel{background:rgba(192,72,63,.14);border:1px solid rgba(224,90,82,.32);color:#ff8580}.admin-wd-btn.cancel:hover:not(:disabled){background:rgba(192,72,63,.24);transform:translateY(-1px)}
.admin-wd-empty{min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px dashed var(--border);border-radius:14px;color:var(--muted);text-align:center}.admin-wd-empty i{font-size:24px;color:var(--ok);opacity:.8}.admin-wd-empty b{font-size:12px;color:var(--text)}.admin-wd-empty span{font-size:10.5px;}
@media(max-width:800px){.admin-wd-stats{grid-template-columns:1fr}.admin-wd-toolbar,.admin-wd-request-head,.admin-wd-request-foot{align-items:stretch;flex-direction:column}.admin-wd-search{width:100%}.admin-wd-filters{overflow-x:auto}.admin-wd-summary{justify-content:space-between}.admin-wd-actions{width:100%}.admin-wd-btn{flex:1}.admin-wd-items{grid-template-columns:repeat(auto-fill,minmax(98px,1fr));}}


/* ============================================================
   ADMIN WORKSPACE — unified modern visual system
   Presentation-only layer; existing controls/IDs remain intact.
   ============================================================ */
body.admin-modern-page{background:#0c0f14;}
body.admin-modern-page>.wrap{max-width:1740px!important;padding-bottom:54px;}
body.admin-modern-page #adminTabs{position:sticky;top:8px;z-index:80;width:100%;display:flex!important;gap:3px!important;padding:5px!important;background:rgba(11,14,19,.88)!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:14px!important;backdrop-filter:blur(16px);box-shadow:0 14px 36px rgba(0,0,0,.25);}
body.admin-modern-page #adminTabs .tab-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 12px!important;border-radius:9px!important;font-size:11.5px!important;white-space:nowrap;transition:.15s ease!important;}
body.admin-modern-page #adminTabs .tab-btn i{font-size:10px;opacity:.7;}
body.admin-modern-page #adminTabs .tab-btn:hover{background:rgba(255,255,255,.055)!important;transform:translateY(-1px);}
body.admin-modern-page #adminTabs .tab-btn.active{background:linear-gradient(180deg,#252b35,#1d232c)!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 4px 12px rgba(0,0,0,.28)!important;}
body.admin-modern-page #adminTabs .tab-btn.active i{color:var(--accent);opacity:1;}
.admin-modern-tab{padding-top:14px;}
.admin-section-hero{display:flex;align-items:center;gap:15px;padding:18px 20px;margin:0 0 12px;border:1px solid rgba(255,255,255,.075);border-radius:15px;background:linear-gradient(130deg,rgba(255,255,255,.035),rgba(255,255,255,.012));box-shadow:0 12px 30px rgba(0,0,0,.15);}
.admin-section-hero-icon{width:44px;height:44px;flex:0 0 44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(232,145,43,.20),rgba(232,145,43,.07));border:1px solid rgba(232,145,43,.24);color:var(--accent);font-size:17px;box-shadow:inset 0 1px rgba(255,255,255,.06);}
.admin-section-kicker{font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:1.7px;color:var(--accent);margin-bottom:3px;}
.admin-section-hero h2{margin:0!important;font-size:20px!important;letter-spacing:-.2px;}
.admin-section-hero p{margin:4px 0 0;color:var(--muted);font-size:11.5px;line-height:1.45;}
.admin-ui-panel,.admin-modern-tab>.panel,.admin-modern-tab>details.panel{border-radius:14px!important;border:1px solid rgba(255,255,255,.075)!important;background:linear-gradient(180deg,rgba(30,35,44,.94),rgba(24,29,37,.94))!important;box-shadow:0 8px 24px rgba(0,0,0,.13)!important;padding:16px 18px!important;margin-bottom:11px!important;}
.admin-modern-tab>details.panel{padding:0!important;overflow:hidden;}
.admin-modern-tab>details.panel>summary{background:rgba(255,255,255,.018);transition:background .15s;}
.admin-modern-tab>details.panel>summary:hover{background:rgba(255,255,255,.04);}
.admin-modern-tab h2{font-size:13.5px;letter-spacing:.1px;}
.admin-panel-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px rgba(232,145,43,.45);margin-right:7px;vertical-align:2px;}
.admin-modern-tab .hint{line-height:1.45;}
.admin-modern-tab .fld,.admin-modern-tab .modern-input,.admin-modern-tab select,.admin-modern-tab textarea{background:#11161d!important;border-color:rgba(255,255,255,.10)!important;border-radius:9px!important;transition:border-color .15s,box-shadow .15s!important;}
.admin-modern-tab .fld:focus,.admin-modern-tab .modern-input:focus,.admin-modern-tab select:focus,.admin-modern-tab textarea:focus{outline:none!important;border-color:rgba(232,145,43,.65)!important;box-shadow:0 0 0 3px rgba(232,145,43,.10)!important;}
.admin-modern-tab .btn,.admin-modern-tab button{transition:transform .12s,filter .12s,background .12s,border-color .12s;}
.admin-modern-tab .btn:hover:not(:disabled),.admin-modern-tab button:hover:not(:disabled){transform:translateY(-1px);}
.admin-workspace-nav{position:sticky;top:62px;z-index:55;display:flex;gap:6px;flex-wrap:wrap;margin:0 0 11px;padding:7px;background:rgba(14,18,24,.88);border:1px solid rgba(255,255,255,.07);border-radius:12px;backdrop-filter:blur(12px);}
.admin-workspace-nav button{border:1px solid transparent;background:transparent;color:var(--muted);border-radius:8px;padding:7px 11px;font-size:10.5px;font-weight:750;cursor:pointer;display:flex;align-items:center;gap:6px;}
.admin-workspace-nav button:hover{color:var(--text);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.06);}
.admin-workspace-nav button i{color:var(--accent);font-size:10px;}

/* withdrawal lifetime stats */
.admin-wd-finance{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));gap:7px;padding:0 16px 12px;}
.admin-wd-finance>div{padding:9px 10px;border:1px solid rgba(255,255,255,.065);border-radius:9px;background:rgba(255,255,255,.018);display:flex;flex-direction:column;gap:2px;}
.admin-wd-finance span{font-size:9px;text-transform:uppercase;letter-spacing:.65px;color:var(--muted);font-weight:800;}
.admin-wd-finance b{font-size:12px;color:var(--text);}
.admin-wd-finance .pos b{color:#62d394}.admin-wd-finance .neg b{color:#ff7272}

/* Crates: turn the huge admin surface into a navigable workspace */
.admin-crates-workspace #crateSeriesList{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))!important;gap:7px!important;max-height:430px!important;padding:2px 5px 2px 0!important;scrollbar-width:thin;}
.admin-crates-workspace #crateSeriesList>div{border-radius:10px!important;transition:transform .14s,border-color .14s,background .14s;}
.admin-crates-workspace #crateSeriesList>div:hover{transform:translateY(-1px);border-color:rgba(232,145,43,.28)!important;}
.admin-crates-workspace #csFormPanel[open],.admin-crates-workspace #lootItemsPanel{scroll-margin-top:118px;}
.admin-crates-workspace #lootItemsPanel{border-color:rgba(232,145,43,.20)!important;box-shadow:0 10px 30px rgba(0,0,0,.18)!important;}
.admin-crates-workspace #lootItemsPanel h2{position:sticky;top:108px;z-index:20;background:linear-gradient(180deg,#1d232c 72%,rgba(29,35,44,.93));padding:10px 0;margin-top:-6px;}
.admin-crates-workspace #csBulkToolsPanel.admin-danger-zone{border-color:rgba(248,113,113,.15)!important;background:linear-gradient(180deg,rgba(73,28,31,.18),rgba(24,29,37,.96))!important;}
.admin-crates-workspace #csBulkToolsPanel.admin-danger-zone>summary{color:#ff9a9a;}
.admin-crates-workspace #csBulkToolsPanel.admin-danger-zone>summary .text-accent{color:#ff7777!important;}
.admin-crates-workspace input[type=checkbox],.admin-daily-workspace input[type=checkbox]{accent-color:var(--accent);}

/* Daily crates: denser cards and clearly separated testing/economics zones */
.admin-daily-workspace>.panel{overflow:hidden;}
.admin-daily-workspace [id*="dc"] .row{gap:8px;}
.admin-daily-workspace #lecTableBody{scroll-margin-top:120px;}
.admin-daily-workspace table{border-collapse:separate;border-spacing:0 4px;}
.admin-daily-workspace table tr{background:rgba(255,255,255,.018);}

/* Lists/tables across all admin pages */
.admin-modern-tab table{width:100%;}
.admin-modern-tab th{font-size:9px!important;text-transform:uppercase;letter-spacing:.75px;color:var(--muted)!important;font-weight:850!important;}
.admin-modern-tab td{border-color:rgba(255,255,255,.055)!important;}
.admin-modern-tab .user-row,.admin-modern-tab .stock-row,.admin-modern-tab .lb-row,.admin-modern-tab .wd-row{background:rgba(255,255,255,.018)!important;border-color:rgba(255,255,255,.065)!important;border-radius:10px!important;}
.admin-modern-tab .user-row:hover,.admin-modern-tab .stock-row:hover,.admin-modern-tab .lb-row:hover{background:rgba(255,255,255,.032)!important;border-color:rgba(255,255,255,.10)!important;}

@media(max-width:900px){
  body.admin-modern-page #adminTabs{position:relative;top:auto;overflow-x:auto;flex-wrap:nowrap!important;}
  .admin-workspace-nav{position:relative;top:auto;overflow-x:auto;flex-wrap:nowrap;}
  .admin-wd-finance{grid-template-columns:repeat(2,1fr);}
  .admin-section-hero{padding:14px;}
}

/* ── TF2 Bolt brand mark ─────────────────────────────────────────────
   Original bolt/gear emblem: readable at favicon-ish size, distinctive
   without depending on an image request or external asset. */
.brand{
  display:inline-flex!important;align-items:center;gap:8px;
  font-family:'Arial Narrow','Roboto Condensed',sans-serif;
  font-size:25px;font-weight:900;letter-spacing:1.25px;text-transform:uppercase;
  cursor:pointer;flex-shrink:0;white-space:nowrap;line-height:1;
}
.brand-mark{
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 34px;filter:drop-shadow(0 4px 8px rgba(225,133,23,.26));
  transition:transform .16s ease,filter .16s ease;
}
.brand-mark svg{width:100%;height:100%;display:block;overflow:visible;}
.brand:hover .brand-mark{transform:rotate(-4deg) scale(1.055);filter:drop-shadow(0 5px 12px rgba(232,145,43,.42));}
.brand-tf2{color:var(--text,#eee7dc);letter-spacing:.5px;}
.brand-bolt{color:var(--accent,#e8912b);font-style:italic;letter-spacing:.4px;text-shadow:0 0 16px rgba(232,145,43,.16);}
.brand-centered{justify-content:center;width:100%;}
.login-box .brand{font-size:31px;gap:10px;text-align:center;margin-bottom:6px;}
.login-box .brand-mark{width:42px;height:42px;flex-basis:42px;}
@media(max-width:720px){.brand{font-size:21px;gap:6px}.brand-mark{width:30px;height:30px;flex-basis:30px}}

/* ═══════════════════════════════════════════════════════════════════════
   Profile layout selector + 2026 Modern Dashboard
   Scoped to .profile-page so the rest of TF2 Bolt is untouched.
   ═══════════════════════════════════════════════════════════════════════ */
.profile-page .pf-modern-hero,
.profile-page .pf-modern-sidebar-rank,
.profile-page .pf-profile-rail{display:none;}

.profile-page .pf-layout-choice{padding:16px;margin-bottom:14px;}
.profile-page .pf-layout-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.profile-page .pf-layout-option{appearance:none;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);border-radius:13px;padding:13px;display:flex;align-items:center;gap:12px;color:var(--text);text-align:left;cursor:pointer;transition:.16s ease;position:relative;}
.profile-page .pf-layout-option:hover{border-color:rgba(224,139,63,.35);background:rgba(255,255,255,.045);transform:translateY(-1px);}
.profile-page .pf-layout-option.selected{border-color:rgba(224,139,63,.58);background:linear-gradient(135deg,rgba(224,139,63,.12),rgba(224,139,63,.025));box-shadow:0 0 0 1px rgba(224,139,63,.08),0 8px 28px rgba(0,0,0,.18);}
.profile-page .pf-layout-option>span:nth-child(2){display:flex;flex-direction:column;gap:3px;min-width:0;}
.profile-page .pf-layout-option b{font-size:13px;}
.profile-page .pf-layout-option small{font-size:10.5px;color:var(--muted);line-height:1.35;}
.profile-page .pf-layout-option em{position:absolute;right:10px;top:9px;font-style:normal;text-transform:uppercase;letter-spacing:.6px;font-size:8.5px;font-weight:900;color:var(--accent);opacity:0;}
.profile-page .pf-layout-option.selected em{opacity:1;}
.profile-page .pf-layout-preview{width:76px;height:52px;border-radius:8px;flex:0 0 76px;background:#0d1119;border:1px solid rgba(255,255,255,.08);display:grid;gap:3px;padding:5px;overflow:hidden;}
.profile-page .pf-layout-preview i{display:block;border-radius:3px;background:rgba(255,255,255,.09);}
.profile-page .pf-layout-preview.classic{grid-template-columns:20px 1fr;grid-template-rows:12px 1fr 1fr;}
.profile-page .pf-layout-preview.classic i:first-child{grid-row:1/4;background:rgba(224,139,63,.22);}
.profile-page .pf-layout-preview.classic i:nth-child(2){grid-column:2;}
.profile-page .pf-layout-preview.modern{grid-template-columns:1fr 1fr 26px;grid-template-rows:12px 1fr 1fr;}
.profile-page .pf-layout-preview.modern i:first-child{grid-column:1/4;background:linear-gradient(90deg,rgba(224,139,63,.34),rgba(96,165,250,.12));}
.profile-page .pf-layout-preview.modern i:nth-child(4){grid-column:3;grid-row:2/4;background:rgba(224,139,63,.15);}

/* Classic: keep the established compact page behaviour. */
.profile-page.pf-classic-layout .pf-profile-layout{display:block;}
.profile-page.pf-classic-layout .pf-profile-primary>.panel{margin-bottom:14px;}
.profile-page.pf-classic-layout .pf-overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;}
.profile-page.pf-classic-layout .pf-detailed-games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;}
.profile-page.pf-classic-layout .pf-account-overview .pf-card-head,
.profile-page.pf-classic-layout .pf-games-panel .pf-card-head{display:flex;}

/* ── Modern Dashboard ── */
.profile-page.pf-modern-layout{--pf-blue:#69a7ff;--pf-green:#35d58b;--pf-red:#ff6f72;--pf-purple:#b778ff;}
.profile-page.pf-modern-layout .wrap{max-width:1480px!important;padding-top:14px;}
.profile-page.pf-modern-layout .pf-main-column{min-width:680px!important;}
.profile-page.pf-modern-layout #pfSidebar{width:248px!important;}
.profile-page.pf-modern-layout #pfSidebar .modern-card{background:linear-gradient(180deg,rgba(23,29,40,.94),rgba(14,18,26,.96));border-color:rgba(135,164,215,.12);}
.profile-page.pf-modern-layout #pfProfileCard{padding:15px!important;min-height:92px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 14px 34px rgba(0,0,0,.22);}
.profile-page.pf-modern-layout #pfAvatarFrame{width:58px!important;height:58px!important;border-radius:50%!important;box-shadow:0 0 0 2px var(--accent),0 0 20px rgba(224,139,63,.15)!important;}
.profile-page.pf-modern-layout #pfAvatarFrame img,
.profile-page.pf-modern-layout #pfAvatarEmoji{border-radius:50%!important;}
.profile-page.pf-modern-layout #pfNickname{font-size:16px!important;}
.profile-page.pf-modern-layout .pf-modern-sidebar-rank{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-top:-6px;border-left:1px solid rgba(255,255,255,.07);border-right:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);border-radius:0 0 11px 11px;background:rgba(13,18,27,.92);}
.profile-page.pf-modern-layout .pf-modern-level-ring{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) 65%,rgba(255,255,255,.08) 0);position:relative;flex:0 0 34px;}
.profile-page.pf-modern-layout .pf-modern-level-ring:before{content:'';position:absolute;inset:3px;border-radius:50%;background:#10151e;}
.profile-page.pf-modern-layout .pf-modern-level-ring span{position:relative;font-size:10px;font-weight:900;color:#fff;}
.profile-page.pf-modern-layout .pf-modern-level-copy{display:flex;flex-direction:column;min-width:0;}
.profile-page.pf-modern-layout .pf-modern-level-copy b{font-size:10px;color:var(--accent-2);letter-spacing:.5px;}
.profile-page.pf-modern-layout .pf-modern-level-copy span{font-size:9.5px;color:var(--muted);margin-top:2px;}
.profile-page.pf-modern-layout #pfSidebar>.panel:nth-of-type(2){display:none!important;}
.profile-page.pf-modern-layout #pfSidebar .ptab-btn{min-height:39px;border-radius:8px;padding:6px 8px;}
.profile-page.pf-modern-layout #pfSidebar .ptab-btn>i{width:25px;height:25px;flex-basis:25px;background:transparent;}
.profile-page.pf-modern-layout #pfSidebar .ptab-btn.active{background:linear-gradient(90deg,rgba(224,139,63,.18),rgba(58,74,108,.12));box-shadow:inset 0 0 24px rgba(224,139,63,.035);}

.profile-page.pf-modern-layout .pf-level-card{display:none;}
.profile-page.pf-modern-layout .pf-modern-hero{display:flex;align-items:center;gap:14px;min-height:88px;margin-bottom:14px;padding:17px 20px;overflow:hidden;position:relative;background:
  radial-gradient(420px 160px at 75% 5%,rgba(60,105,190,.20),transparent 70%),
  linear-gradient(115deg,rgba(29,45,76,.9),rgba(18,24,36,.96));border-color:rgba(103,142,208,.18);}
.profile-page.pf-modern-layout .pf-modern-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 54%,rgba(224,139,63,.04),transparent);pointer-events:none;}
.profile-page.pf-modern-layout .pf-modern-hero-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#ffb242,#e58020);color:#1b1108;font-size:18px;box-shadow:0 6px 20px rgba(224,139,63,.2);}
.profile-page.pf-modern-layout .pf-modern-hero h1{font-family:'Plus Jakarta Sans','Segoe UI',sans-serif;text-transform:none;letter-spacing:-.5px;margin:0;font-size:23px;}
.profile-page.pf-modern-layout .pf-modern-hero p{margin:4px 0 0;font-size:11px;color:#91a0b7;}
.profile-page.pf-modern-layout .pf-modern-hero-rank{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;position:relative;z-index:1;}
.profile-page.pf-modern-layout .pf-modern-hero-rank span{font-size:12px;font-weight:900;color:var(--accent-2);letter-spacing:.8px;}
.profile-page.pf-modern-layout .pf-modern-hero-rank small{font-size:8px;color:var(--muted);letter-spacing:1.2px;margin-top:2px;}

.profile-page.pf-modern-layout .pf-profile-layout{display:grid;grid-template-columns:minmax(0,1fr) 278px;gap:14px;align-items:start;}
.profile-page.pf-modern-layout .pf-profile-primary{display:flex;flex-direction:column;gap:14px;min-width:0;}
.profile-page.pf-modern-layout .pf-profile-primary>.panel{margin:0!important;}
.profile-page.pf-modern-layout .pf-profile-rail{display:flex;flex-direction:column;gap:12px;min-width:0;}
.profile-page.pf-modern-layout .pf-profile-layout .modern-card{border-radius:13px;background:linear-gradient(165deg,rgba(26,33,46,.95),rgba(15,20,29,.97));border-color:rgba(130,156,204,.12);box-shadow:0 10px 30px rgba(0,0,0,.16);}
.profile-page.pf-modern-layout .pf-account-overview,
.profile-page.pf-modern-layout .pf-games-panel{padding:15px;}
.profile-page.pf-modern-layout .pf-card-head h2{font-family:'Plus Jakarta Sans','Segoe UI',sans-serif;text-transform:none;letter-spacing:0;font-size:13px!important;}

.profile-page.pf-modern-layout .pf-overview-grid{display:grid;grid-template-columns:repeat(5,minmax(112px,1fr));gap:9px;}
.profile-page.pf-modern-layout .pf-overview-card{border:1px solid rgba(255,255,255,.065);border-radius:11px;padding:11px;min-width:0;display:flex;align-items:flex-start;gap:9px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));}
.profile-page.pf-modern-layout .pf-overview-icon{width:29px;height:29px;border-radius:8px;display:grid;place-items:center;flex:0 0 29px;background:rgba(255,255,255,.055);font-size:14px;}
.profile-page.pf-modern-layout .pf-overview-card>div{min-width:0;display:flex;flex-direction:column;}
.profile-page.pf-modern-layout .pf-overview-card>div>span{font-size:8.7px;color:#8f9aab;white-space:nowrap;}
.profile-page.pf-modern-layout .pf-overview-card b{font-size:12.5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.profile-page.pf-modern-layout .pf-overview-card b .bolt-icon{width:14px!important;height:14px!important;vertical-align:-3px!important;margin-left:2px!important;}
.profile-page.pf-modern-layout .pf-overview-card small{font-size:8px;margin-top:4px;color:#6f7b8d;}
.profile-page.pf-modern-layout .pf-overview-card.deposit .pf-overview-icon{color:var(--pf-green);background:rgba(53,213,139,.12);}
.profile-page.pf-modern-layout .pf-overview-card.withdraw .pf-overview-icon{color:var(--pf-red);background:rgba(255,111,114,.11);}
.profile-page.pf-modern-layout .pf-overview-card.profit .pf-overview-icon{color:var(--pf-green);background:rgba(53,213,139,.11);}
.profile-page.pf-modern-layout .pf-overview-card.loss .pf-overview-icon{color:var(--pf-purple);background:rgba(183,120,255,.12);}
.profile-page.pf-modern-layout .pf-overview-card.wagered .pf-overview-icon{color:var(--accent-2);background:rgba(224,139,63,.13);}
.profile-page.pf-modern-layout .pf-overview-card.profit b{color:var(--pf-green);}
.profile-page.pf-modern-layout .pf-overview-card.loss b{color:#ff7277;}

.profile-page.pf-modern-layout .pf-trade-card{padding:15px;}
.profile-page.pf-modern-layout .pf-trade-status{margin-left:auto;font-size:9px;font-weight:800;border-radius:20px;padding:4px 8px;color:#ffb26d;background:rgba(224,139,63,.1);border:1px solid rgba(224,139,63,.16);}
.profile-page.pf-modern-layout .pf-trade-status.ok{color:#53db94;background:rgba(53,213,139,.1);border-color:rgba(53,213,139,.18);}
.profile-page.pf-modern-layout .pf-trade-row .modern-input{height:39px;background:#0e1420;border-color:rgba(121,151,205,.2);}
.profile-page.pf-modern-layout .pf-info-strip{border-color:rgba(65,145,255,.20);background:rgba(44,109,210,.08);}

.profile-page.pf-modern-layout .pf-detailed-games-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;}
.profile-page.pf-modern-layout .pf-detailed-game-card{position:relative;overflow:hidden;border-radius:11px;border:1px solid rgba(255,255,255,.075);background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));padding:10px;min-width:0;}
.profile-page.pf-modern-layout .pf-detailed-game-card:after{content:'';position:absolute;width:80px;height:80px;border-radius:50%;right:-38px;top:-38px;background:currentColor;opacity:.04;}
.profile-page.pf-modern-layout .pf-dg-head{display:flex;align-items:center;gap:7px;margin-bottom:7px;}
.profile-page.pf-modern-layout .pf-dg-icon{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);font-size:13px;}
.profile-page.pf-modern-layout .pf-dg-head b{font-size:10.5px;}
.profile-page.pf-modern-layout .pf-dg-profit{font-size:12px;font-weight:900;margin-bottom:8px;}
.profile-page.pf-modern-layout .pf-dg-profit.pos{color:#43d88f;}.profile-page.pf-modern-layout .pf-dg-profit.neg{color:#ff7479;}
.profile-page.pf-modern-layout .pf-dg-profit .bolt-icon{width:13px!important;height:13px!important;vertical-align:-3px!important;margin-left:2px!important;}
.profile-page.pf-modern-layout .pf-dg-profit span{display:block;font-size:7.5px;text-transform:uppercase;letter-spacing:.7px;color:#6f7988;margin-top:1px;}
.profile-page.pf-modern-layout .pf-dg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 8px;border-top:1px solid rgba(255,255,255,.055);padding-top:7px;}
.profile-page.pf-modern-layout .pf-dg-grid span{display:flex;flex-direction:column;min-width:0;}
.profile-page.pf-modern-layout .pf-dg-grid small{font-size:7.5px;color:#6e7a8b;}
.profile-page.pf-modern-layout .pf-dg-grid b{font-size:8.8px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.profile-page.pf-modern-layout .pf-dg-grid .bolt-icon{width:10px!important;height:10px!important;vertical-align:-2px!important;margin-left:1px!important;}
.profile-page.pf-modern-layout .game-coinflip{color:#c78aff;border-color:rgba(183,120,255,.25);}.profile-page.pf-modern-layout .game-jackpot{color:#ffb342;border-color:rgba(255,179,66,.25);}.profile-page.pf-modern-layout .game-roulette{color:#ff6c73;border-color:rgba(255,108,115,.25);}.profile-page.pf-modern-layout .game-payload{color:#50d7ac;border-color:rgba(80,215,172,.23);}.profile-page.pf-modern-layout .game-crates{color:#65a0ff;border-color:rgba(101,160,255,.25);}.profile-page.pf-modern-layout .game-crafter{color:#f49a47;border-color:rgba(244,154,71,.25);}.profile-page.pf-modern-layout .game-matches{color:#8fa7ff;border-color:rgba(143,167,255,.23);}

.profile-page.pf-modern-layout .pf-rank-card{padding:14px;text-align:center;background:radial-gradient(circle at 50% 20%,rgba(226,157,48,.12),transparent 42%),linear-gradient(165deg,rgba(24,32,47,.98),rgba(12,17,25,.98));}
.profile-page.pf-modern-layout .pf-rail-label{text-align:left;font-size:11px;font-weight:800;color:#e8ecf4;margin-bottom:8px;}
.profile-page.pf-modern-layout .pf-rank-emblem{width:82px;height:68px;margin:0 auto 3px;position:relative;display:grid;place-items:center;color:#efab38;font-size:56px;filter:drop-shadow(0 5px 11px rgba(224,139,63,.25));}
.profile-page.pf-modern-layout .pf-rank-star{position:absolute;font-size:19px;color:#fff0a4;text-shadow:0 1px 4px #9a5800;}
.profile-page.pf-modern-layout .pf-rank-name{font-size:17px;font-weight:1000;color:#f4b33d;text-transform:uppercase;letter-spacing:.6px;}
.profile-page.pf-modern-layout .pf-rank-xp{font-size:9px;color:#7f8b9d;margin-top:2px;}
.profile-page.pf-modern-layout .pf-rank-bar{height:6px;border-radius:8px;background:#0c1119;border:1px solid rgba(255,255,255,.08);overflow:hidden;margin-top:10px;}
.profile-page.pf-modern-layout .pf-rank-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#e8892c,#ffc347);box-shadow:0 0 9px rgba(240,168,60,.45);transition:width .3s;}
.profile-page.pf-modern-layout .pf-rank-next{font-size:8.5px;color:#798598;text-align:left;margin-top:5px;}
.profile-page.pf-modern-layout .pf-rank-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.065);font-size:8.5px;color:#778397;}
.profile-page.pf-modern-layout .pf-rank-meta b{color:#bac4d3;font-size:9px;}

.profile-page.pf-modern-layout .pf-quick-card{padding:13px;}
.profile-page.pf-modern-layout .pf-quick-card>a,.profile-page.pf-modern-layout .pf-quick-card>button{width:100%;display:grid;grid-template-columns:22px 1fr 12px;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);color:#cbd3df;border-radius:8px;padding:8px;margin-top:6px;text-decoration:none;text-align:left;font:inherit;font-size:9.5px;cursor:pointer;}
.profile-page.pf-modern-layout .pf-quick-card>a:hover,.profile-page.pf-modern-layout .pf-quick-card>button:hover{background:rgba(255,255,255,.05);border-color:rgba(224,139,63,.24);}
.profile-page.pf-modern-layout .pf-quick-card>a>i:first-child,.profile-page.pf-modern-layout .pf-quick-card>button>i:first-child{color:var(--accent);}
.profile-page.pf-modern-layout .pf-quick-card>a>i:last-child,.profile-page.pf-modern-layout .pf-quick-card>button>i:last-child{font-size:8px;color:#6f7c90;}

.profile-page.pf-modern-layout .pf-activity-card{padding:13px;}
.profile-page.pf-modern-layout .pf-activity-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:4px;}
.profile-page.pf-modern-layout .pf-activity-head .pf-rail-label{margin:0;}.profile-page.pf-modern-layout .pf-activity-head span{display:block;font-size:8px;color:#697587;margin-top:2px;}
.profile-page.pf-modern-layout .pf-activity-head button{background:none;border:none;color:var(--accent-2);font-size:8px;cursor:pointer;padding:2px 0;}
.profile-page.pf-modern-layout .pf-activity-row{display:grid;grid-template-columns:27px 1fr auto;align-items:center;gap:7px;padding:8px 0;border-top:1px solid rgba(255,255,255,.05);min-width:0;}
.profile-page.pf-modern-layout .pf-activity-icon{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.045);font-size:12px;}
.profile-page.pf-modern-layout .pf-activity-row>div{min-width:0;}.profile-page.pf-modern-layout .pf-activity-row b{display:block;font-size:8.7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#c8d0dc;}.profile-page.pf-modern-layout .pf-activity-row small{font-size:7.5px;color:#667285;}
.profile-page.pf-modern-layout .pf-activity-row strong{font-size:8.3px;white-space:nowrap;}.profile-page.pf-modern-layout .pf-activity-row strong.pos{color:#43d88f}.profile-page.pf-modern-layout .pf-activity-row strong.neg{color:#ff7479}.profile-page.pf-modern-layout .pf-activity-row strong.neu{color:#9aa6b8}
.profile-page.pf-modern-layout .pf-activity-row .bolt-icon{width:10px!important;height:10px!important;vertical-align:-2px!important;margin-left:1px!important;}
.profile-page.pf-modern-layout .pf-trade-reminder{padding:13px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(135deg,rgba(27,74,146,.35),rgba(23,41,73,.65));border-color:rgba(67,139,245,.28);}
.profile-page.pf-modern-layout .pf-trade-reminder div{display:flex;flex-direction:column;gap:4px;}.profile-page.pf-modern-layout .pf-trade-reminder b{font-size:10px;}.profile-page.pf-modern-layout .pf-trade-reminder span{font-size:8.3px;color:#91a5c6;line-height:1.35;}.profile-page.pf-modern-layout .pf-trade-reminder>i{font-size:24px;color:#ffad37;opacity:.9;}

/* Modern treatment also carries through the other settings tabs without
   changing any of their functionality or IDs. */
.profile-page.pf-modern-layout [data-ptab-content]:not([data-ptab-content="profile"])>.panel,
.profile-page.pf-modern-layout [data-ptab-content]:not([data-ptab-content="profile"]) .pf-cat-panel{border-radius:13px;border-color:rgba(130,156,204,.12);background:linear-gradient(165deg,rgba(25,31,43,.95),rgba(15,20,29,.97));box-shadow:0 10px 30px rgba(0,0,0,.13);}
.profile-page.pf-modern-layout .pf-opt{border-radius:11px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));}
.profile-page.pf-modern-layout .pp-row{padding:10px 2px;}
.profile-page.pf-modern-layout .pf-history-nav{background:radial-gradient(380px 120px at 95% 0,rgba(96,105,255,.08),transparent 72%),linear-gradient(165deg,rgba(25,31,43,.95),rgba(15,20,29,.97));}

@media(max-width:1240px){
  .profile-page.pf-modern-layout .pf-profile-layout{grid-template-columns:1fr;}
  .profile-page.pf-modern-layout .pf-profile-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  .profile-page.pf-modern-layout .pf-activity-card{grid-column:1/3;}
  .profile-page.pf-modern-layout .pf-overview-grid{grid-template-columns:repeat(3,minmax(120px,1fr));}
}
@media(max-width:980px){
  .profile-page.pf-modern-layout .pf-main-column{min-width:0!important;width:100%;}
  .profile-page.pf-modern-layout #pfSidebar{position:static!important;width:100%!important;max-height:none!important;}
  .profile-page.pf-modern-layout .pf-detailed-games-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:700px){
  .profile-page .pf-layout-options{grid-template-columns:1fr;}
  .profile-page.pf-modern-layout .pf-modern-hero-rank{display:none;}
  .profile-page.pf-modern-layout .pf-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .profile-page.pf-modern-layout .pf-profile-rail{grid-template-columns:1fr;}
  .profile-page.pf-modern-layout .pf-activity-card{grid-column:auto;}
}
@media(max-width:480px){
  .profile-page.pf-modern-layout .pf-detailed-games-grid,.profile-page.pf-modern-layout .pf-overview-grid{grid-template-columns:1fr;}
  .profile-page .pf-layout-preview{display:none;}
}


/* ======================================================================
   PROFILE — MOCKUP-FAITHFUL MODERN DASHBOARD
   Overrides the earlier compact Modern Dashboard only. Classic is unchanged.
   ====================================================================== */
.profile-page .pf-modern-footer{display:none;}
.profile-page.pf-modern-layout{--pf-orange:#ff9e2f;--pf-line:#26364d;background:radial-gradient(900px 520px at 95% 12%,rgba(29,69,126,.17),transparent 60%),radial-gradient(720px 500px at 8% 90%,rgba(240,123,24,.08),transparent 64%),linear-gradient(180deg,#070b12 0%,#09101a 55%,#070b12 100%);padding-bottom:0!important;color:#eef3fb;}
.profile-page.pf-modern-layout .pf-settings-shell{width:calc(100% - 60px)!important;max-width:1476px!important;margin:18px auto 16px!important;padding:0!important;}
.profile-page.pf-modern-layout .pf-settings-layout{display:grid!important;grid-template-columns:250px minmax(0,1fr)!important;gap:20px!important;align-items:start!important;}
.profile-page.pf-modern-layout .pf-main-column{min-width:0!important;width:100%!important;}
.profile-page.pf-modern-layout #pfSidebar{width:250px!important;position:sticky!important;align-self:start!important;overflow:hidden auto!important;border:1px solid #243249!important;border-radius:12px!important;background:linear-gradient(180deg,#101a2a 0%,#0c1420 100%)!important;box-shadow:0 18px 48px rgba(0,0,0,.34)!important;scrollbar-width:thin;scrollbar-color:#334159 transparent;}
.profile-page.pf-modern-layout #pfSidebar>.panel,.profile-page.pf-modern-layout #pfSidebar>.pf-modern-sidebar-rank{margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;}
.profile-page.pf-modern-layout #pfProfileCard{min-height:326px!important;padding:190px 18px 16px!important;position:relative!important;overflow:hidden!important;background:linear-gradient(180deg,transparent 0 43%,rgba(9,16,27,.12) 58%,#0e1827 72%,#0e1827 100%),url('/uploads/profile-modern/sidebar-soldier.png') top center/100% 172px no-repeat,#0e1827!important;}
.profile-page.pf-modern-layout #pfProfileCard:after{content:'';position:absolute;left:0;right:0;top:0;height:172px;box-shadow:inset 0 -34px 38px -28px #0e1827;pointer-events:none;}
.profile-page.pf-modern-layout #pfProfileCard #pfBanner{display:none!important;}
.profile-page.pf-modern-layout #pfProfileCard>div:last-child{display:block!important;position:relative!important;z-index:3!important;}
.profile-page.pf-modern-layout #pfProfileCard>div:last-child>div:first-child{margin-top:-52px!important;margin-bottom:-2px!important;width:78px!important;}
.profile-page.pf-modern-layout #pfProfileCard #pfAvatarFrame{width:78px!important;height:78px!important;border-radius:50%!important;padding:3px!important;background:#0b1220!important;box-shadow:0 0 0 3px var(--pf-orange),0 8px 24px rgba(0,0,0,.45)!important;}
.profile-page.pf-modern-layout #pfProfileCard #pfAvatar,.profile-page.pf-modern-layout #pfProfileCard #pfAvatarEmoji{border-radius:50%!important;}
.profile-page.pf-modern-layout #pfProfileCard #pfAvatarEmoji{font-size:34px!important;}
.profile-page.pf-modern-layout #pfProfileCard>div:last-child>div:last-child{margin-top:12px!important;}
.profile-page.pf-modern-layout #pfNickname{font-size:20px!important;line-height:1.15!important;font-weight:900!important;letter-spacing:-.25px!important;color:#f4f7fb!important;}
.profile-page.pf-modern-layout #pfSteamId{font-size:11.5px!important;color:#93a4bb!important;margin-top:5px!important;}
.profile-page.pf-modern-layout .pf-modern-sidebar-rank{padding:5px 18px 15px!important;display:grid!important;grid-template-columns:34px 1fr!important;gap:10px!important;align-items:center!important;}
.profile-page.pf-modern-layout .pf-modern-level-ring{width:34px!important;height:34px!important;border:2px solid var(--pf-orange)!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:#101a29!important;color:#fff!important;font-size:11px!important;font-weight:900!important;box-shadow:0 0 0 3px rgba(255,158,47,.08)!important;}
.profile-page.pf-modern-layout .pf-modern-level-copy{min-width:0!important;display:block!important;}
.profile-page.pf-modern-layout .pf-modern-level-line{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;}
.profile-page.pf-modern-layout .pf-modern-level-line b{font-size:10px!important;color:#fff!important;letter-spacing:.55px!important;}
.profile-page.pf-modern-layout .pf-modern-level-line span{font-size:9px!important;color:#94a5bc!important;white-space:nowrap!important;}
.profile-page.pf-modern-layout .pf-modern-sidebar-progress{height:7px!important;border-radius:8px!important;background:#1b283b!important;overflow:hidden!important;margin-top:6px!important;border:1px solid rgba(255,255,255,.05)!important;}
.profile-page.pf-modern-layout .pf-modern-sidebar-progress i{display:block!important;width:0;height:100%!important;border-radius:8px!important;background:linear-gradient(90deg,#ff9e2f,#f7bd46)!important;box-shadow:0 0 10px rgba(255,158,47,.38)!important;}
.profile-page.pf-modern-layout .pf-modern-rank-caption{display:block!important;font-size:9px!important;color:#76869b!important;margin-top:5px!important;text-transform:uppercase!important;letter-spacing:.7px!important;}
.profile-page.pf-modern-layout .pf-sidebar-wager{display:none!important;}
.profile-page.pf-modern-layout .pf-sidebar-nav-card{padding:5px 10px 10px!important;border-top:1px solid rgba(255,255,255,.055)!important;}
.profile-page.pf-modern-layout #pfSidebar .ptabs{gap:2px!important;}
.profile-page.pf-modern-layout #pfSidebar .ptab-btn{min-height:42px!important;padding:8px 10px!important;border-radius:8px!important;border:1px solid transparent!important;font-size:13px!important;font-weight:650!important;color:#bdc8d8!important;gap:10px!important;}
.profile-page.pf-modern-layout #pfSidebar .ptab-btn>i{width:24px!important;height:24px!important;background:transparent!important;font-size:14px!important;border-radius:6px!important;}
.profile-page.pf-modern-layout #pfSidebar .ptab-btn:nth-child(1)>i{color:#ff9e2f!important}.profile-page.pf-modern-layout #pfSidebar .ptab-btn:nth-child(2)>i{color:#f27d8b!important}.profile-page.pf-modern-layout #pfSidebar .ptab-btn:nth-child(3)>i{color:#68a8ff!important}.profile-page.pf-modern-layout #pfSidebar .ptab-btn:nth-child(4)>i{color:#79b9ff!important}.profile-page.pf-modern-layout #pfSidebar .ptab-btn:nth-child(5)>i{color:#8f91ff!important}.profile-page.pf-modern-layout #pfSidebar .ptab-btn:nth-child(6)>i{color:#ffb33d!important}.profile-page.pf-modern-layout #pfSidebar .ptab-btn:nth-child(7)>i{color:#6aa9ff!important}.profile-page.pf-modern-layout #pfSidebar .ptab-btn:nth-child(8)>i,.profile-page.pf-modern-layout #pfSidebar .ptab-btn:nth-child(9)>i{color:#7f94ae!important}
.profile-page.pf-modern-layout #pfSidebar .ptab-btn.active{color:#fff!important;background:linear-gradient(90deg,rgba(255,158,47,.18),rgba(255,158,47,.045))!important;border-color:rgba(255,158,47,.35)!important;box-shadow:inset 3px 0 #ff9e2f,0 6px 18px rgba(0,0,0,.16)!important;}
.profile-page.pf-modern-layout #pfSidebar .ptab-btn.active:before{display:none!important}.profile-page.pf-modern-layout #pfSidebar .ptab-btn.active>i{background:transparent!important;color:#ffad42!important;box-shadow:none!important;}
.profile-page.pf-modern-layout .pf-sidebar-logout-card{padding:12px!important;border-top:1px solid rgba(255,255,255,.055)!important;}
.profile-page.pf-modern-layout .pf-sidebar-logout-card .ptab-btn{border:1px solid #2c3b51!important;justify-content:flex-start!important;text-decoration:none!important;color:#b9c5d6!important;}
.profile-page.pf-modern-layout .pf-modern-hero{display:flex!important;align-items:center!important;gap:18px!important;height:104px!important;min-height:104px!important;margin:0 0 16px!important;padding:20px 28px!important;border:1px solid #263852!important;border-radius:12px!important;background:linear-gradient(90deg,#12213a 0%,#12213a 37%,rgba(18,33,58,.83) 56%,rgba(18,33,58,.18) 83%,rgba(18,33,58,.05) 100%),url('/uploads/profile-modern/hero-industrial.png') right center/auto 100% no-repeat,#12213a!important;box-shadow:0 12px 34px rgba(0,0,0,.23)!important;}
.profile-page.pf-modern-layout .pf-modern-hero:after{display:none!important}.profile-page.pf-modern-layout .pf-modern-hero-icon{width:44px!important;height:44px!important;border-radius:11px!important;font-size:21px!important;flex:0 0 44px!important;background:linear-gradient(145deg,#ffad39,#f18920)!important;box-shadow:0 7px 18px rgba(255,150,35,.24)!important;}
.profile-page.pf-modern-layout .pf-modern-hero h1{margin:0!important;font-size:29px!important;line-height:1.1!important;font-weight:900!important;letter-spacing:-.7px!important;color:#fff!important}.profile-page.pf-modern-layout .pf-modern-hero p{font-size:12.5px!important;margin:6px 0 0!important;color:#a8b9d2!important}.profile-page.pf-modern-layout .pf-modern-hero-rank,.profile-page.pf-modern-layout .pf-level-card{display:none!important;}
.profile-page.pf-modern-layout .pf-profile-layout{display:grid!important;grid-template-columns:minmax(0,1fr) 318px!important;gap:18px!important;align-items:start!important}.profile-page.pf-modern-layout .pf-profile-primary{display:flex!important;flex-direction:column!important;gap:16px!important;min-width:0!important}.profile-page.pf-modern-layout .pf-profile-rail{display:flex!important;flex-direction:column!important;gap:16px!important;min-width:0!important;}
.profile-page.pf-modern-layout .pf-profile-layout .modern-card{border:1px solid #27364d!important;border-radius:12px!important;background:linear-gradient(155deg,#111b2b 0%,#0e1725 100%)!important;box-shadow:0 12px 32px rgba(0,0,0,.18)!important;}
.profile-page.pf-modern-layout .pf-card-head{margin-bottom:14px!important;gap:10px!important}.profile-page.pf-modern-layout .pf-card-head h2{font-size:15px!important;line-height:1.2!important;text-transform:none!important;letter-spacing:0!important;color:#f5f7fb!important}.profile-page.pf-modern-layout .pf-card-head p{font-size:11px!important;color:#8798b1!important;margin-top:3px!important}.profile-page.pf-modern-layout .pf-head-icon{width:32px!important;height:32px!important;flex:0 0 32px!important;border-radius:8px!important;background:rgba(255,158,47,.12)!important;border:1px solid rgba(255,158,47,.2)!important;color:#ff9e2f!important;font-size:14px!important;}
.profile-page.pf-modern-layout .pf-account-overview{min-height:190px!important;padding:19px 20px 18px!important}.profile-page.pf-modern-layout .pf-overview-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:11px!important}.profile-page.pf-modern-layout .pf-overview-card{min-height:114px!important;border-radius:10px!important;border:1px solid #2a3950!important;padding:14px 13px!important;display:flex!important;align-items:flex-start!important;gap:11px!important;background:linear-gradient(145deg,#17243a,#121d2f)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important}.profile-page.pf-modern-layout .pf-overview-icon{width:38px!important;height:38px!important;flex:0 0 38px!important;border-radius:50%!important;display:grid!important;place-items:center!important;font-size:17px!important}.profile-page.pf-modern-layout .pf-overview-card.balance .pf-overview-icon{background:rgba(255,169,49,.16)!important}.profile-page.pf-modern-layout .pf-overview-card.deposit .pf-overview-icon{background:rgba(48,196,140,.15)!important;color:#45d79f!important}.profile-page.pf-modern-layout .pf-overview-card.withdraw .pf-overview-icon{background:rgba(255,101,111,.15)!important;color:#ff707a!important}.profile-page.pf-modern-layout .pf-overview-card.profit .pf-overview-icon,.profile-page.pf-modern-layout .pf-overview-card.loss .pf-overview-icon{background:rgba(174,105,255,.15)!important;color:#b877ff!important}.profile-page.pf-modern-layout .pf-overview-copy{min-width:0!important;flex:1!important}.profile-page.pf-modern-layout .pf-overview-card .pf-overview-copy>span{font-size:10.5px!important;color:#9aabc1!important;display:block!important}.profile-page.pf-modern-layout .pf-overview-card .pf-overview-copy>b{font-size:18px!important;line-height:1.15!important;margin:5px 0 0!important;color:#f4f7fb!important;display:block!important;white-space:nowrap!important}.profile-page.pf-modern-layout .pf-overview-card.loss .pf-overview-copy>b{color:#ff6d78!important}.profile-page.pf-modern-layout .pf-overview-card.profit .pf-overview-copy>b{color:#4bdd9f!important}.profile-page.pf-modern-layout .pf-overview-card .pf-overview-copy>small{font-size:9px!important;color:#6e8098!important;margin-top:5px!important;display:block!important}.profile-page.pf-modern-layout .pf-overview-card .bolt-icon{width:16px!important;height:16px!important;vertical-align:-4px!important;margin-left:2px!important}.profile-page.pf-modern-layout .pf-overview-action{display:flex!important;align-items:center!important;justify-content:center!important;height:29px!important;margin-top:9px!important;border-radius:6px!important;background:linear-gradient(180deg,#ffac36,#f08a1c)!important;color:#2a1606!important;text-decoration:none!important;font-size:10px!important;font-weight:900!important;box-shadow:0 4px 12px rgba(235,128,26,.2)!important;}
.profile-page.pf-modern-layout .pf-trade-card{min-height:190px!important;padding:19px 20px!important}.profile-page.pf-modern-layout .pf-trade-card .pf-card-head{margin-bottom:14px!important}.profile-page.pf-modern-layout .pf-trade-status{margin-left:auto!important;font-size:10px!important;border-radius:12px!important;padding:4px 9px!important}.profile-page.pf-modern-layout .pf-trade-row{gap:10px!important;align-items:end!important}.profile-page.pf-modern-layout .pf-trade-row .fl{font-size:10px!important;letter-spacing:.8px!important;margin-bottom:7px!important;color:#8ea0b9!important}.profile-page.pf-modern-layout .pf-trade-row input{height:46px!important;padding:0 14px!important;font-size:12.5px!important;border-radius:8px!important;background:#0c1524!important;border-color:#2c3d57!important;color:#fff!important}.profile-page.pf-modern-layout .pf-trade-row button{height:46px!important;min-width:106px!important;border-radius:8px!important;font-size:12px!important}.profile-page.pf-modern-layout .pf-info-strip{min-height:34px!important;margin-top:10px!important;border-radius:7px!important;padding:7px 10px!important;font-size:9.5px!important}.profile-page.pf-modern-layout .pf-info-strip a{margin-left:auto!important;font-size:9.5px!important;}
.profile-page.pf-modern-layout .pf-games-panel{padding:19px 20px 18px!important;min-height:330px!important}.profile-page.pf-modern-layout .pf-games-head{display:flex!important;align-items:center!important}.profile-page.pf-modern-layout .pf-games-head>div:nth-child(2){min-width:0!important}.profile-page.pf-modern-layout .pf-game-periods{margin-left:auto!important;display:flex!important;gap:6px!important}.profile-page.pf-modern-layout .pf-game-periods span{padding:6px 14px!important;border-radius:18px!important;border:1px solid #33445f!important;color:#fff!important;background:linear-gradient(180deg,#bc681e,#8d430c)!important;font-size:9.5px!important}.profile-page.pf-modern-layout .pf-detailed-games-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}.profile-page.pf-modern-layout .pf-detailed-game-card{min-height:122px!important;padding:11px 11px 10px!important;border-radius:10px!important;background:linear-gradient(145deg,#151f31,#101927)!important}.profile-page.pf-modern-layout .pf-dg-head{gap:8px!important;margin-bottom:6px!important}.profile-page.pf-modern-layout .pf-dg-icon{width:30px!important;height:30px!important;font-size:14px!important}.profile-page.pf-modern-layout .pf-dg-head b{font-size:10.5px!important}.profile-page.pf-modern-layout .pf-dg-profit{font-size:12.5px!important;margin-bottom:6px!important}.profile-page.pf-modern-layout .pf-dg-profit span{font-size:7px!important}.profile-page.pf-modern-layout .pf-dg-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px 6px!important;padding-top:6px!important}.profile-page.pf-modern-layout .pf-dg-grid small{font-size:7px!important}.profile-page.pf-modern-layout .pf-dg-grid b{font-size:8.2px!important}.profile-page.pf-modern-layout .pf-dg-grid .bolt-icon,.profile-page.pf-modern-layout .pf-dg-profit .bolt-icon{width:9px!important;height:9px!important;vertical-align:-2px!important}.profile-page.pf-modern-layout .game-overall{color:#66d7ff!important;border-color:rgba(102,215,255,.28)!important;}
.profile-page.pf-modern-layout .pf-rank-card{min-height:400px!important;padding:18px 14px!important;text-align:center!important;background:linear-gradient(180deg,#121d2e,#0d1624)!important}.profile-page.pf-modern-layout .pf-rail-label{font-size:13px!important;font-weight:850!important;color:#f0f4fa!important;margin-bottom:11px!important}.profile-page.pf-modern-layout .pf-rank-emblem{width:205px!important;height:105px!important;margin:14px auto 4px!important;background:url('/uploads/profile-modern/rank-emblem.png') center/contain no-repeat!important;filter:drop-shadow(0 7px 15px rgba(240,154,40,.24))!important}.profile-page.pf-modern-layout .pf-rank-emblem>i,.profile-page.pf-modern-layout .pf-rank-emblem>.pf-rank-star{display:none!important}.profile-page.pf-modern-layout .pf-rank-name{font-size:20px!important;letter-spacing:.7px!important;color:#ffb33c!important;margin-top:3px!important}.profile-page.pf-modern-layout .pf-rank-xp{font-size:10px!important;color:#9aa9bf!important;margin-top:4px!important}.profile-page.pf-modern-layout .pf-rank-bar{height:11px!important;margin-top:19px!important;background:#0a111d!important;border-color:#32425a!important}.profile-page.pf-modern-layout .pf-rank-next{font-size:9.5px!important;margin-top:7px!important;color:#8596ae!important}.profile-page.pf-modern-layout .pf-rank-meta{margin-top:28px!important;padding:16px 4px 0!important;font-size:9.5px!important}.profile-page.pf-modern-layout .pf-rank-meta b{font-size:10.5px!important;color:#e2e8f0!important}.profile-page.pf-modern-layout .pf-quick-card{min-height:176px!important;padding:15px!important}.profile-page.pf-modern-layout .pf-quick-card>a,.profile-page.pf-modern-layout .pf-quick-card>button{min-height:38px!important;grid-template-columns:24px 1fr 12px!important;gap:8px!important;padding:8px 10px!important;margin-top:7px!important;border-radius:8px!important;font-size:10.5px!important}.profile-page.pf-modern-layout .pf-trade-reminder{min-height:124px!important;padding:16px 14px!important;overflow:hidden!important;position:relative!important;background:linear-gradient(125deg,#0b397a 0%,#0f438d 55%,#1264c4 100%)!important;border-color:#296dc2!important}.profile-page.pf-modern-layout .pf-trade-reminder>div{position:relative!important;z-index:2!important;width:55%!important}.profile-page.pf-modern-layout .pf-trade-reminder b{font-size:15px!important;line-height:1.15!important;color:#fff!important}.profile-page.pf-modern-layout .pf-trade-reminder span{font-size:10px!important;line-height:1.45!important;color:#c5dcff!important;margin-top:8px!important}.profile-page.pf-modern-layout .pf-trade-reminder img{position:absolute!important;right:-2px!important;bottom:-1px!important;height:123px!important;width:auto!important;object-fit:contain!important;z-index:1!important;}
.profile-page.pf-modern-layout .pf-activity-wide{margin-top:16px!important;padding:18px 20px!important}.profile-page.pf-modern-layout .pf-activity-head{margin-bottom:8px!important}.profile-page.pf-modern-layout .pf-activity-head span{font-size:10px!important}.profile-page.pf-modern-layout .pf-activity-head button{font-size:10px!important;color:#ffae41!important}.profile-page.pf-modern-layout #pfRecentActivity{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px 18px!important}.profile-page.pf-modern-layout .pf-activity-row{grid-template-columns:32px 1fr auto!important;padding:9px 0!important}.profile-page.pf-modern-layout .pf-activity-icon{width:30px!important;height:30px!important;font-size:13px!important}.profile-page.pf-modern-layout .pf-activity-row b{font-size:9.5px!important}.profile-page.pf-modern-layout .pf-activity-row small{font-size:8px!important}.profile-page.pf-modern-layout .pf-activity-row strong{font-size:9px!important;}
.profile-page.pf-modern-layout .pf-modern-footer{min-height:70px!important;display:grid!important;grid-template-columns:1.1fr 1.25fr 1fr auto!important;align-items:center!important;gap:24px!important;padding:12px max(30px,calc((100% - 1476px)/2 + 30px))!important;border-top:1px solid #1b2839!important;background:linear-gradient(180deg,rgba(9,15,25,.96),#070b12)!important;color:#9eacc0!important}.profile-page.pf-modern-layout .pf-footer-brand,.profile-page.pf-modern-layout .pf-footer-play{display:flex!important;align-items:center!important;gap:10px!important}.profile-page.pf-modern-layout .pf-footer-brand .brand-mark,.profile-page.pf-modern-layout .pf-footer-play .brand-mark{width:36px!important;height:36px!important}.profile-page.pf-modern-layout .pf-footer-brand span{display:flex!important;flex-direction:column!important;gap:2px!important}.profile-page.pf-modern-layout .pf-footer-brand b{font-size:10px!important;color:#eef3fa!important}.profile-page.pf-modern-layout .pf-footer-brand small{font-size:8px!important;color:#74849a!important}.profile-page.pf-modern-layout .pf-footer-links{display:flex!important;justify-content:center!important;gap:18px!important}.profile-page.pf-modern-layout .pf-footer-links button{background:none!important;border:0!important;color:#8fa0b8!important;font-size:8.8px!important;cursor:pointer!important;padding:5px!important}.profile-page.pf-modern-layout .pf-footer-law{font-size:8.8px!important;text-align:center!important}.profile-page.pf-modern-layout .pf-malta-dot{width:25px!important;height:25px!important;border-radius:50%!important;display:inline-grid!important;place-items:center!important;background:#0f3271!important;border:1px solid #1b64d5!important;color:#ffd055!important;margin-right:7px!important}.profile-page.pf-modern-layout .pf-footer-play{font-size:8.8px!important;white-space:nowrap!important}.profile-page.pf-modern-layout .pf-footer-play .brand-mark{width:24px!important;height:24px!important}.profile-page.pf-modern-layout .pf-footer-play b{display:grid!important;place-items:center!important;width:28px!important;height:28px!important;border:1px solid #d34f4f!important;border-radius:50%!important;color:#ff7b7b!important;font-size:9px!important;margin-left:7px!important;}
.profile-page.pf-modern-layout header.modern-header{min-height:73px!important;padding:9px 28px!important;background:rgba(7,12,20,.92)!important;border-bottom-color:#1b2a3d!important}.profile-page.pf-modern-layout header .brand{font-size:27px!important}.profile-page.pf-modern-layout header .brand-mark{width:45px!important;height:45px!important}.profile-page.pf-modern-layout header .header-nav{align-self:stretch!important;border-bottom:0!important}.profile-page.pf-modern-layout header .nav-link{flex-direction:column!important;justify-content:center!important;gap:4px!important;padding:7px 13px!important;font-size:9.5px!important;min-width:62px!important;border-radius:0!important}.profile-page.pf-modern-layout header .nav-link i{font-size:14px!important}.profile-page.pf-modern-layout header .nav-link:after{height:2px!important;left:8px!important;right:8px!important}.profile-page.pf-modern-layout header .balance-chip{min-height:43px!important;border-radius:9px!important;padding:5px 11px!important;background:#101a28!important}.profile-page.pf-modern-layout header .balance-chip .val{font-size:15px!important}.profile-page.pf-modern-layout header .balance-chip .bolt-icon{width:26px!important;height:26px!important;vertical-align:-8px!important}.profile-page.pf-modern-layout header .header-deposit-btn{width:38px!important;height:38px!important;padding:0!important;display:grid!important;place-items:center!important;overflow:hidden!important;font-size:0!important;margin-left:0!important;border-radius:9px!important}.profile-page.pf-modern-layout header .header-deposit-btn i{display:none!important}.profile-page.pf-modern-layout header .header-deposit-btn:after{content:'+'!important;font-size:20px!important;font-weight:900!important;color:#fff!important;}
@media(max-width:1320px){.profile-page.pf-modern-layout .pf-settings-shell{width:calc(100% - 32px)!important}.profile-page.pf-modern-layout .pf-profile-layout{grid-template-columns:minmax(0,1fr) 290px!important}.profile-page.pf-modern-layout .pf-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.profile-page.pf-modern-layout .pf-account-overview{min-height:auto!important}}
@media(max-width:1060px){.profile-page.pf-modern-layout .pf-settings-layout{grid-template-columns:220px minmax(0,1fr)!important;gap:14px!important}.profile-page.pf-modern-layout #pfSidebar{width:220px!important}.profile-page.pf-modern-layout .pf-profile-layout{grid-template-columns:1fr!important}.profile-page.pf-modern-layout .pf-profile-rail{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}.profile-page.pf-modern-layout .pf-trade-reminder{grid-column:1/3!important}.profile-page.pf-modern-layout .pf-detailed-games-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.profile-page.pf-modern-layout #pfRecentActivity{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:800px){.profile-page.pf-modern-layout .pf-settings-shell{width:calc(100% - 20px)!important;margin-top:10px!important}.profile-page.pf-modern-layout .pf-settings-layout{display:block!important}.profile-page.pf-modern-layout #pfSidebar{position:static!important;width:100%!important;max-height:none!important;margin-bottom:12px!important}.profile-page.pf-modern-layout #pfProfileCard{min-height:220px!important;padding-top:120px!important;background-size:100% 120px!important}.profile-page.pf-modern-layout .pf-sidebar-nav-card .ptabs{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}.profile-page.pf-modern-layout .pf-modern-hero{height:auto!important;min-height:88px!important;padding:16px!important}.profile-page.pf-modern-layout .pf-modern-hero h1{font-size:23px!important}.profile-page.pf-modern-layout .pf-profile-rail{grid-template-columns:1fr!important}.profile-page.pf-modern-layout .pf-trade-reminder{grid-column:auto!important}.profile-page.pf-modern-layout #pfRecentActivity{grid-template-columns:1fr!important}.profile-page.pf-modern-layout .pf-modern-footer{grid-template-columns:1fr!important;text-align:center!important;justify-items:center!important}}
@media(max-width:560px){.profile-page.pf-modern-layout .pf-overview-grid,.profile-page.pf-modern-layout .pf-detailed-games-grid{grid-template-columns:1fr!important}.profile-page.pf-modern-layout .pf-trade-row{display:block!important}.profile-page.pf-modern-layout .pf-trade-row button{width:100%!important;margin-top:8px!important}.profile-page.pf-modern-layout .pf-info-strip{display:block!important}.profile-page.pf-modern-layout .pf-info-strip a{display:block!important;margin-top:7px!important}}


/* ======================================================================
   PROFILE LAYOUT SAFETY PASS — Classic truly remains the original layout.
   This block intentionally comes last so Modern cannot leak into Classic.
   ====================================================================== */
.profile-page .pf-modern-sidebar-art{display:none;}

.profile-page.pf-classic-layout .pf-settings-shell{
  max-width:1200px!important;
  width:auto!important;
  margin:0 auto!important;
  padding:24px 18px!important;
}
.profile-page.pf-classic-layout .pf-settings-layout{
  display:flex!important;
  gap:16px!important;
  align-items:flex-start!important;
  flex-wrap:wrap!important;
}
.profile-page.pf-classic-layout #pfSidebar{
  width:260px!important;
  flex:0 0 260px!important;
  position:sticky!important;
  top:12px!important;
  align-self:flex-start!important;
  max-height:calc(100vh - 24px)!important;
  overflow-y:auto!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.profile-page.pf-classic-layout .pf-main-column{flex:1!important;min-width:280px!important;width:auto!important;}
.profile-page.pf-classic-layout #pfProfileCard{min-height:0!important;padding:16px!important;background:var(--panel)!important;border-radius:12px!important;overflow:hidden!important;}
.profile-page.pf-classic-layout #pfProfileCard>div:last-child{display:flex!important;align-items:center!important;gap:12px!important;}
.profile-page.pf-classic-layout #pfProfileCard>div:last-child>div:first-child{width:auto!important;margin:0!important;}
.profile-page.pf-classic-layout #pfAvatarFrame{width:52px!important;height:52px!important;border-radius:10px!important;padding:2px!important;background:none!important;box-shadow:0 0 0 2px var(--accent,#e8912b)!important;}
.profile-page.pf-classic-layout #pfProfileCard #pfAvatar,
.profile-page.pf-classic-layout #pfProfileCard #pfAvatarEmoji{border-radius:8px!important;}
.profile-page.pf-classic-layout #pfNickname{font-size:15px!important;color:var(--text)!important;}
.profile-page.pf-classic-layout #pfSteamId{font-size:11px!important;margin-top:2px!important;color:var(--muted)!important;}
.profile-page.pf-classic-layout .pf-modern-sidebar-art,
.profile-page.pf-classic-layout .pf-modern-sidebar-rank,
.profile-page.pf-classic-layout .pf-modern-hero,
.profile-page.pf-classic-layout .pf-profile-rail,
.profile-page.pf-classic-layout .pf-modern-footer{display:none!important;}
.profile-page.pf-classic-layout .pf-sidebar-wager{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  padding:14px 16px!important;margin-top:10px!important;border-radius:12px!important;
}
.profile-page.pf-classic-layout .pf-sidebar-nav-card{padding:8px!important;margin-top:10px!important;border-radius:12px!important;}
.profile-page.pf-classic-layout .pf-sidebar-logout-card{padding:4px!important;margin-top:10px!important;border-radius:12px!important;}
.profile-page.pf-classic-layout .pf-sidebar-logout-card .ptab-btn{display:block!important;text-decoration:none!important;}
.profile-page.pf-classic-layout .pf-level-card{display:block!important;margin-bottom:14px!important;}
.profile-page.pf-classic-layout .pf-profile-layout{display:block!important;}
.profile-page.pf-classic-layout .pf-profile-primary{display:flex!important;flex-direction:column!important;gap:0!important;}
.profile-page.pf-classic-layout .pf-account-overview{order:1!important;padding:16px!important;margin-bottom:14px!important;}
.profile-page.pf-classic-layout .pf-games-panel{order:2!important;padding:16px!important;margin-bottom:14px!important;}
.profile-page.pf-classic-layout .pf-trade-card{order:3!important;margin-bottom:0!important;}
.profile-page.pf-classic-layout .pf-card-head{margin-bottom:12px!important;}
.profile-page.pf-classic-layout .pf-card-head h2{font-size:14px!important;text-transform:none!important;letter-spacing:0!important;}
.profile-page.pf-classic-layout .pf-card-head p{font-size:11px!important;color:var(--muted)!important;}
.profile-page.pf-classic-layout .pf-overview-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;gap:10px!important;}
.profile-page.pf-classic-layout .pf-detailed-games-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;gap:10px!important;}
.profile-page.pf-classic-layout .pf-game-periods,
.profile-page.pf-classic-layout .pf-trade-status{display:none!important;}
.profile-page.pf-classic-layout .pf-layout-choice,
.profile-page.pf-classic-layout .pf-art-choice{margin-bottom:14px!important;}
@media(max-width:760px){
  .profile-page.pf-classic-layout .pf-settings-layout{display:block!important;}
  .profile-page.pf-classic-layout #pfSidebar{position:static!important;width:100%!important;max-height:none!important;margin-bottom:14px!important;}
}

/* Personalization: selectable Modern Dashboard artwork. */
.profile-page .pf-art-choice{padding:16px;margin-bottom:14px;}
.profile-page .pf-art-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.profile-page .pf-art-option{appearance:none;position:relative;display:grid;grid-template-columns:92px minmax(0,1fr);gap:11px;align-items:center;text-align:left;color:var(--text);background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:9px;cursor:pointer;transition:border-color .15s,background .15s,transform .15s;}
.profile-page .pf-art-option:hover{transform:translateY(-1px);border-color:rgba(224,139,63,.34);background:rgba(255,255,255,.04);}
.profile-page .pf-art-option.selected{border-color:rgba(224,139,63,.62);background:linear-gradient(135deg,rgba(224,139,63,.12),rgba(255,255,255,.02));box-shadow:0 0 0 1px rgba(224,139,63,.08);}
.profile-page .pf-art-preview{display:block;width:92px;height:58px;border-radius:8px;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 0 24px rgba(0,0,0,.22);}
.profile-page .pf-art-none{display:grid;place-items:center;background:linear-gradient(145deg,#131a24,#0c1119);color:var(--muted);font-size:18px;}
.profile-page .pf-art-option>span:nth-child(2){display:flex;flex-direction:column;gap:3px;min-width:0;}
.profile-page .pf-art-option b{font-size:12.5px;}
.profile-page .pf-art-option small{font-size:10.5px;line-height:1.35;color:var(--muted);}
.profile-page .pf-art-option em{position:absolute;right:8px;top:7px;opacity:0;font-style:normal;text-transform:uppercase;letter-spacing:.6px;font-size:8px;font-weight:900;color:var(--accent);}
.profile-page .pf-art-option.selected em{opacity:1;}
@media(max-width:650px){.profile-page .pf-art-options{grid-template-columns:1fr;}}

/* ======================================================================
   MODERN DASHBOARD — make the sidebar and right rail visibly match the
   original mockup rather than merely borrowing its colors.
   ====================================================================== */
.profile-page.pf-modern-layout #pfSidebar{overflow:hidden!important;max-height:none!important;}
.profile-page.pf-modern-layout #pfProfileCard{
  min-height:276px!important;
  padding:164px 18px 14px!important;
  background:#0e1827!important;
}
.profile-page.pf-modern-layout .pf-modern-sidebar-art{
  display:block;position:absolute;z-index:0;left:0;top:0;width:100%;height:154px;
  object-fit:cover;object-position:center 20%;filter:saturate(1.04) contrast(1.03);
}
.profile-page.pf-modern-layout #pfProfileCard:before{
  content:'';position:absolute;z-index:1;left:0;right:0;top:0;height:176px;
  background:linear-gradient(180deg,rgba(6,10,17,.02) 35%,rgba(14,24,39,.28) 67%,#0e1827 100%);
  pointer-events:none;
}
.profile-page.pf-modern-layout #pfProfileCard:after{display:none!important;}
.profile-page.pf-modern-layout #pfProfileCard>div:last-child{position:relative!important;z-index:3!important;}
.profile-page.pf-modern-layout #pfProfileCard>div:last-child>div:first-child{margin-top:-46px!important;}
.profile-page.pf-modern-layout .pf-sidebar-nav-card{padding:2px 10px 8px!important;}
.profile-page.pf-modern-layout #pfSidebar .ptab-btn{min-height:38px!important;padding:6px 9px!important;font-size:12px!important;}
.profile-page.pf-modern-layout .pf-sidebar-logout-card{padding:9px 12px 11px!important;}
.profile-page.pf-modern-layout .pf-rank-emblem{width:205px!important;height:86px!important;background:url('/uploads/profile-modern/rank-emblem.png') center/contain no-repeat!important;margin:12px auto 7px!important;}
.profile-page.pf-modern-layout .pf-rank-card{min-height:350px!important;}
.profile-page.pf-modern-layout .pf-trade-reminder img{filter:drop-shadow(-6px 8px 10px rgba(0,0,0,.22));}

/* Stronger mockup-like card depth + stat colors without touching Classic. */
.profile-page.pf-modern-layout .pf-account-overview,
.profile-page.pf-modern-layout .pf-trade-card,
.profile-page.pf-modern-layout .pf-games-panel,
.profile-page.pf-modern-layout .pf-profile-rail>.panel{box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 12px 30px rgba(0,0,0,.23)!important;}
.profile-page.pf-modern-layout .pf-overview-card{min-height:112px!important;align-items:flex-start!important;}
.profile-page.pf-modern-layout .pf-detailed-game{min-height:148px!important;}


/* ======================================================================
   PROFILE POLISH V2 — fit, readability, generated art controls.
   ====================================================================== */
.profile-page.pf-generated-bg-active{
  background-color:#070b12;
  background-image:linear-gradient(180deg,rgba(6,10,16,.92),rgba(6,10,16,.86)),var(--pf-generated-page-bg);
  background-size:cover,cover;
  background-position:center top,center top;
  background-attachment:fixed,fixed;
}

.profile-page .pf-generated-choice{padding:16px;margin-bottom:14px;}
.profile-page .pf-generated-avatar-options{grid-template-columns:repeat(2,minmax(0,1fr));}
.profile-page .pf-generated-avatar-option{grid-template-columns:72px minmax(0,1fr);}
.profile-page .pf-generated-avatar-option .pf-art-preview{width:72px;height:72px;border-radius:16px;}
.profile-page .pf-generated-banner-option,
.profile-page .pf-generated-bg-option{grid-template-columns:128px minmax(0,1fr);}
.profile-page .pf-generated-banner-option .pf-art-preview,
.profile-page .pf-generated-bg-option .pf-art-preview{width:128px;height:64px;border-radius:10px;}
@media(max-width:760px){
  .profile-page .pf-generated-avatar-options,
  .profile-page .pf-generated-banner-options,
  .profile-page .pf-generated-bg-options{grid-template-columns:1fr;}
}

/* Modern: make the entire layout breathe better and improve stat legibility. */
.profile-page.pf-modern-layout .pf-settings-shell{max-width:1530px!important;padding:14px 16px 20px!important;}
.profile-page.pf-modern-layout .pf-settings-layout{grid-template-columns:240px minmax(0,1fr)!important;gap:14px!important;}
.profile-page.pf-modern-layout #pfSidebar{width:240px!important;}
.profile-page.pf-modern-layout .pf-profile-layout{grid-template-columns:minmax(0,1fr) 258px!important;gap:12px!important;}
.profile-page.pf-modern-layout .pf-games-panel{padding:16px!important;}
.profile-page.pf-modern-layout .pf-detailed-games-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;}
.profile-page.pf-modern-layout .pf-detailed-game-card{padding:13px!important;min-height:176px!important;}
.profile-page.pf-modern-layout .pf-dg-head{gap:9px!important;margin-bottom:8px!important;}
.profile-page.pf-modern-layout .pf-dg-icon{width:32px!important;height:32px!important;font-size:15px!important;}
.profile-page.pf-modern-layout .pf-dg-head b{font-size:13px!important;}
.profile-page.pf-modern-layout .pf-dg-profit{font-size:18px!important;margin-bottom:10px!important;line-height:1.1;}
.profile-page.pf-modern-layout .pf-dg-profit span{font-size:8.6px!important;margin-top:3px!important;}
.profile-page.pf-modern-layout .pf-dg-grid{gap:7px 10px!important;padding-top:8px!important;}
.profile-page.pf-modern-layout .pf-dg-grid small{font-size:9px!important;}
.profile-page.pf-modern-layout .pf-dg-grid b{font-size:10.7px!important;}
.profile-page.pf-modern-layout .pf-quick-card>a,
.profile-page.pf-modern-layout .pf-quick-card>button{font-size:11px!important;padding:10px!important;border-radius:10px!important;}
.profile-page.pf-modern-layout .pf-trade-reminder{align-items:stretch!important;}
.profile-page.pf-modern-layout .pf-trade-reminder b{font-size:14px!important;line-height:1.1;}
.profile-page.pf-modern-layout .pf-trade-reminder span{font-size:10.5px!important;}
.profile-page.pf-modern-layout .pf-trade-reminder img{width:118px!important;min-width:118px!important;height:118px!important;object-fit:cover!important;object-position:center!important;border-radius:12px!important;}
.profile-page.pf-modern-layout .pf-overview-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
.profile-page.pf-modern-layout .pf-overview-card{min-height:118px!important;padding:12px!important;}
.profile-page.pf-modern-layout .pf-overview-card b{font-size:14px!important;}
.profile-page.pf-modern-layout .pf-overview-card>div>span{font-size:9.5px!important;}
.profile-page.pf-modern-layout .pf-overview-card small{font-size:8.5px!important;}
.profile-page.pf-modern-layout .pf-rank-card{min-height:334px!important;}
.profile-page.pf-modern-layout header.modern-header{padding:10px 18px!important;gap:12px!important;background:rgba(8,12,20,.94)!important;}
.profile-page.pf-modern-layout header .header-nav{align-self:center!important;padding:6px!important;gap:6px!important;border:1px solid rgba(255,255,255,.05)!important;border-radius:14px!important;background:rgba(16,24,37,.76)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;}
.profile-page.pf-modern-layout header .nav-link{flex-direction:column!important;gap:5px!important;min-width:68px!important;padding:8px 10px!important;border-radius:11px!important;border:1px solid transparent!important;background:rgba(255,255,255,.015)!important;font-size:9.8px!important;}
.profile-page.pf-modern-layout header .nav-link:hover{background:rgba(255,255,255,.05)!important;border-color:rgba(255,255,255,.05)!important;transform:translateY(-1px);}
.profile-page.pf-modern-layout header .nav-link.nav-active{background:linear-gradient(180deg,rgba(224,139,63,.2),rgba(33,42,58,.95))!important;border-color:rgba(224,139,63,.35)!important;}
.profile-page.pf-modern-layout header .nav-link::after{display:none!important;}
.profile-page.pf-modern-layout header .balance-chip{display:flex!important;align-items:center!important;gap:10px!important;padding:6px 12px!important;border-radius:12px!important;background:linear-gradient(180deg,#101925,#0d1420)!important;}
.profile-page.pf-modern-layout header .balance-chip .lbl{font-size:9px!important;}
.profile-page.pf-modern-layout header .balance-chip .val{font-size:16px!important;}
.profile-page.pf-modern-layout header .profile-btn{background:linear-gradient(180deg,#111927,#0d1420)!important;border-radius:12px!important;}

/* Classic: keep the familiar layout but make the sidebar fit on one view. */
.profile-page.pf-classic-layout #pfSidebar{
  width:240px!important;
  flex:0 0 240px!important;
  top:10px!important;
  height:calc(100vh - 20px)!important;
  max-height:calc(100vh - 20px)!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
}
.profile-page.pf-classic-layout #pfProfileCard{padding:12px!important;}
.profile-page.pf-classic-layout #pfProfileCard>div:last-child{gap:10px!important;}
.profile-page.pf-classic-layout #pfAvatarFrame{width:44px!important;height:44px!important;}
.profile-page.pf-classic-layout #pfNickname{font-size:14px!important;}
.profile-page.pf-classic-layout #pfSteamId{font-size:10px!important;}
.profile-page.pf-classic-layout .pf-sidebar-wager{padding:12px 14px!important;margin-top:0!important;}
.profile-page.pf-classic-layout .pf-sidebar-nav-card{padding:6px!important;margin-top:0!important;display:flex!important;flex:1 1 auto!important;overflow:hidden!important;}
.profile-page.pf-classic-layout .pf-sidebar-nav-card .ptabs{display:flex!important;flex-direction:column!important;gap:5px!important;width:100%!important;}
.profile-page.pf-classic-layout #pfSidebar .ptab-btn{min-height:35px!important;padding:7px 9px!important;font-size:12px!important;border-radius:10px!important;}
.profile-page.pf-classic-layout #pfSidebar .ptab-btn>i{width:24px!important;height:24px!important;flex-basis:24px!important;}
.profile-page.pf-classic-layout .pf-sidebar-logout-card{padding:3px!important;margin-top:0!important;}
.profile-page.pf-classic-layout .pf-sidebar-logout-card .ptab-btn{min-height:37px!important;}

@media(max-width:1320px){
  .profile-page.pf-modern-layout .pf-profile-layout{grid-template-columns:1fr!important;}
  .profile-page.pf-modern-layout .pf-profile-rail{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:1120px){
  .profile-page.pf-modern-layout .pf-settings-layout{grid-template-columns:220px minmax(0,1fr)!important;}
  .profile-page.pf-modern-layout #pfSidebar{width:220px!important;}
  .profile-page.pf-modern-layout .pf-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .profile-page.pf-modern-layout .pf-detailed-games-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:760px){
  .profile-page.pf-classic-layout #pfSidebar{position:static!important;height:auto!important;max-height:none!important;}
}


/* ======================================================================
   PROFILE POLISH V3 — closer-to-mockup header + safer classic fitting.
   ====================================================================== */
/* Modern header: more like the original mockup, with icon-top game pills. */
.profile-page.pf-modern-layout header.modern-header{
  min-height:74px!important;
  border-bottom:1px solid rgba(76,102,145,.22)!important;
  background:linear-gradient(180deg,rgba(5,8,14,.96),rgba(8,13,22,.92))!important;
  box-shadow:0 14px 28px rgba(0,0,0,.28)!important;
}
.profile-page.pf-modern-layout header .brand{font-size:28px!important;gap:10px!important;}
.profile-page.pf-modern-layout header .brand-mark{width:42px!important;height:42px!important;flex-basis:42px!important;}
.profile-page.pf-modern-layout header .header-nav{
  gap:4px!important;
  padding:4px 6px!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.012))!important;
}
.profile-page.pf-modern-layout header .nav-link{
  min-width:64px!important;
  padding:7px 9px!important;
  font-size:9px!important;
  font-weight:700!important;
  line-height:1.1!important;
  letter-spacing:.15px!important;
  color:#c8d3e5!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important;
}
.profile-page.pf-modern-layout header .nav-link i{
  font-size:13px!important;
  margin-bottom:1px!important;
  color:#9eb1d0!important;
}
.profile-page.pf-modern-layout header .nav-link:hover i{color:#ffd18a!important;}
.profile-page.pf-modern-layout header .nav-link.nav-active i{color:#ffb03b!important;}
.profile-page.pf-modern-layout header .nav-link.nav-active{
  color:#ffbd57!important;
  box-shadow:inset 0 -2px 0 rgba(255,164,40,.75), inset 0 0 22px rgba(255,163,36,.08)!important;
}
.profile-page.pf-modern-layout header .header-right{gap:8px!important;}
.profile-page.pf-modern-layout header .balance-chip{
  min-height:40px!important;
  padding:6px 12px!important;
  position:relative!important;
}
.profile-page.pf-modern-layout header .balance-chip:before{
  content:'';
  width:24px;height:24px;flex:0 0 24px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffd36c,#f59d22 62%,#b05c0a 100%);
  box-shadow:0 0 0 2px rgba(255,188,74,.18),0 4px 10px rgba(236,151,34,.25);
  display:inline-block;
  margin-right:8px;
}
.profile-page.pf-modern-layout header .balance-chip .lbl{display:none!important;}
.profile-page.pf-modern-layout header .balance-chip .val{font-size:15px!important;font-weight:900!important;color:#fff1cf!important;}
.profile-page.pf-modern-layout header #tokenDisplay{margin-left:0!important;gap:8px!important;font-size:11px!important;color:#b7c3d8!important;}
.profile-page.pf-modern-layout header #tokenDisplay>span{display:inline-flex!important;align-items:center!important;gap:4px!important;padding:0 1px!important;}
.profile-page.pf-modern-layout header .header-deposit-btn{
  width:36px!important;height:36px!important;border-radius:11px!important;
  background:linear-gradient(180deg,#f1a53a,#d97d17)!important;border:0!important;
  box-shadow:0 8px 18px rgba(217,125,23,.25)!important;
}
.profile-page.pf-modern-layout header .profile-btn{
  padding:5px 10px 5px 5px!important;
  border-radius:12px!important;
}
.profile-page.pf-modern-layout header .profile-btn img{width:34px!important;height:34px!important;border-radius:50%!important;}
.profile-page.pf-modern-layout header .profile-btn .nm{font-size:13px!important;}

/* Modern page fit pass */
.profile-page.pf-modern-layout #pfProfileCard{min-height:262px!important;padding:150px 16px 12px!important;}
.profile-page.pf-modern-layout .pf-modern-sidebar-art{height:142px!important;object-position:center 24%!important;}
.profile-page.pf-modern-layout #pfProfileCard:before{height:165px!important;}
.profile-page.pf-modern-layout .pf-modern-sidebar-rank{padding:9px 11px!important;gap:9px!important;}
.profile-page.pf-modern-layout .pf-rank-card{padding:12px!important;min-height:320px!important;}
.profile-page.pf-modern-layout .pf-rank-emblem{width:190px!important;height:78px!important;}
.profile-page.pf-modern-layout .pf-trade-reminder{padding:12px!important;min-height:126px!important;}
.profile-page.pf-modern-layout .pf-trade-reminder img{width:104px!important;min-width:104px!important;height:104px!important;}
.profile-page.pf-modern-layout .pf-detailed-games-grid{gap:10px!important;}
.profile-page.pf-modern-layout .pf-detailed-game-card{min-height:168px!important;padding:12px!important;}
.profile-page.pf-modern-layout .pf-dg-profit{font-size:17px!important;}
.profile-page.pf-modern-layout .pf-dg-grid b{font-size:10.3px!important;}
.profile-page.pf-modern-layout .pf-dg-grid small{font-size:8.6px!important;}

/* Classic page: aggressively compact sidebar so all tabs + logout fit. */
.profile-page.pf-classic-layout .pf-settings-shell{padding:18px 14px!important;}
.profile-page.pf-classic-layout .pf-settings-layout{gap:14px!important;align-items:flex-start!important;}
.profile-page.pf-classic-layout #pfSidebar{
  width:228px!important;
  flex:0 0 228px!important;
  height:calc(100vh - 16px)!important;
  max-height:calc(100vh - 16px)!important;
  gap:6px!important;
}
.profile-page.pf-classic-layout #pfProfileCard{padding:10px!important;border-radius:11px!important;}
.profile-page.pf-classic-layout #pfAvatarFrame{width:40px!important;height:40px!important;}
.profile-page.pf-classic-layout #pfNickname{font-size:13px!important;}
.profile-page.pf-classic-layout #pfSteamId{font-size:9.5px!important;}
.profile-page.pf-classic-layout .pf-sidebar-wager{padding:10px 12px!important;border-radius:11px!important;}
.profile-page.pf-classic-layout .pf-sidebar-wager span:first-child{font-size:11px!important;}
.profile-page.pf-classic-layout .pf-sidebar-wager span:last-child{font-size:12px!important;}
.profile-page.pf-classic-layout .pf-sidebar-nav-card{padding:5px!important;border-radius:11px!important;}
.profile-page.pf-classic-layout .pf-sidebar-nav-card .ptabs{gap:4px!important;}
.profile-page.pf-classic-layout #pfSidebar .ptab-btn{
  min-height:31px!important;
  padding:5px 8px!important;
  font-size:11.2px!important;
  font-weight:700!important;
  border-radius:9px!important;
}
.profile-page.pf-classic-layout #pfSidebar .ptab-btn>i{
  width:20px!important;height:20px!important;flex-basis:20px!important;
  font-size:11px!important;margin-right:4px!important;
}
.profile-page.pf-classic-layout .pf-sidebar-logout-card{padding:2px!important;border-radius:11px!important;}
.profile-page.pf-classic-layout .pf-sidebar-logout-card .ptab-btn{min-height:33px!important;}

@media(max-height:860px){
  .profile-page.pf-classic-layout #pfSidebar{width:220px!important;flex-basis:220px!important;}
  .profile-page.pf-classic-layout #pfSidebar .ptab-btn{min-height:29px!important;font-size:10.8px!important;padding:4px 7px!important;}
  .profile-page.pf-classic-layout .pf-sidebar-nav-card .ptabs{gap:3px!important;}
  .profile-page.pf-classic-layout #pfAvatarFrame{width:36px!important;height:36px!important;}
  .profile-page.pf-classic-layout #pfNickname{font-size:12.5px!important;}
}
@media(max-height:760px){
  .profile-page.pf-classic-layout #pfSidebar .ptab-btn{min-height:27px!important;font-size:10.2px!important;}
  .profile-page.pf-classic-layout .pf-sidebar-wager{padding:8px 10px!important;}
}


/* ======================================================================
   PROFILE V5 — final behavior requested: classic no-scroll; modern header
   keeps the Bolt coin identity; generated art lives inside existing
   Personalization categories instead of separate panels.
   ====================================================================== */
.profile-page .pf-generated-choice{display:none!important;}
.profile-page .pf-image-avatar-preview{width:52px!important;height:52px!important;border-radius:11px!important;}
.profile-page .pf-cat-panel .banner-preview{height:42px!important;background-position:center!important;background-size:cover!important;}

/* Classic sidebar: content-sized, no internal scrollbar, logout directly under tabs. */
.profile-page.pf-classic-layout #pfSidebar{
  width:228px!important;
  flex:0 0 228px!important;
  position:sticky!important;
  top:10px!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
}
.profile-page.pf-classic-layout .pf-sidebar-nav-card{
  display:block!important;
  flex:0 0 auto!important;
  padding:5px!important;
  margin:0!important;
}
.profile-page.pf-classic-layout .pf-sidebar-nav-card .ptabs{gap:3px!important;}
.profile-page.pf-classic-layout #pfSidebar .ptab-btn{
  min-height:28px!important;
  padding:4px 7px!important;
  font-size:10.7px!important;
  border-radius:8px!important;
}
.profile-page.pf-classic-layout #pfSidebar .ptab-btn>i{
  width:19px!important;height:19px!important;flex-basis:19px!important;
  font-size:10.5px!important;margin-right:3px!important;
}
.profile-page.pf-classic-layout .pf-sidebar-logout-card{
  flex:0 0 auto!important;
  padding:2px!important;
  margin:0!important;
}
.profile-page.pf-classic-layout .pf-sidebar-logout-card .ptab-btn{min-height:30px!important;}
.profile-page.pf-classic-layout #pfProfileCard{padding:9px 10px!important;}
.profile-page.pf-classic-layout .pf-sidebar-wager{padding:9px 11px!important;margin:0!important;}

/* Modern header: clean mockup-style right side. No legacy token strip. */
.profile-page.pf-modern-layout header #tokenDisplay{display:none!important;}
.profile-page.pf-modern-layout header.modern-header{
  min-height:72px!important;
  padding:9px 18px!important;
  gap:12px!important;
  background:linear-gradient(180deg,rgba(6,10,17,.97),rgba(8,13,21,.95))!important;
  border-bottom:1px solid rgba(76,103,148,.20)!important;
}
.profile-page.pf-modern-layout header .header-nav{
  padding:4px!important;gap:4px!important;border-radius:14px!important;
  background:rgba(14,21,32,.72)!important;
  border:1px solid rgba(255,255,255,.045)!important;
}
.profile-page.pf-modern-layout header .nav-link{
  min-width:64px!important;padding:7px 10px!important;gap:4px!important;
  border-radius:10px!important;font-size:9.4px!important;
}
.profile-page.pf-modern-layout header .nav-link i{font-size:13px!important;}
.profile-page.pf-modern-layout header .header-right{gap:9px!important;}
.profile-page.pf-modern-layout header .balance-chip{
  min-height:42px!important;padding:5px 11px!important;gap:5px!important;
  background:linear-gradient(180deg,#111a27,#0d141f)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:11px!important;
}
.profile-page.pf-modern-layout header .balance-chip:before{display:none!important;content:none!important;}
.profile-page.pf-modern-layout header .balance-chip .val{
  display:flex!important;align-items:center!important;gap:4px!important;
  font-size:15px!important;color:#f2f5fa!important;font-weight:900!important;
}
.profile-page.pf-modern-layout header .balance-chip .bolt-icon{
  display:inline-block!important;width:30px!important;height:30px!important;
  object-fit:contain!important;vertical-align:middle!important;margin-left:4px!important;
  filter:drop-shadow(0 3px 7px rgba(224,139,63,.30));
}
.profile-page.pf-modern-layout header .header-deposit-btn{
  width:38px!important;height:38px!important;border-radius:10px!important;
  background:linear-gradient(180deg,#f2a33b,#d97918)!important;
  box-shadow:0 6px 16px rgba(224,139,63,.24)!important;
}
.profile-page.pf-modern-layout header .icon-btn{
  width:38px!important;height:38px!important;border-radius:10px!important;
  background:#111923!important;border:1px solid rgba(255,255,255,.07)!important;
}
.profile-page.pf-modern-layout header .profile-btn{
  min-height:42px!important;padding:4px 9px 4px 5px!important;
  background:#111923!important;border-color:rgba(255,255,255,.07)!important;
}
.profile-page.pf-modern-layout header .profile-btn img{width:34px!important;height:34px!important;border-radius:50%!important;}

@media(max-height:820px) and (min-width:761px){
  .profile-page.pf-classic-layout #pfSidebar .ptab-btn{min-height:26px!important;padding:3px 6px!important;font-size:10.2px!important;}
  .profile-page.pf-classic-layout #pfProfileCard{padding:8px!important;}
  .profile-page.pf-classic-layout .pf-sidebar-wager{padding:8px 10px!important;}
}


/* ======================================================================
   PROFILE V6 — sticky Classic fix + conditional Modern-art picker +
   site-wide Modern header matching the original concept more closely.
   ====================================================================== */

/* Classic sidebar must stop BELOW the sticky site header. The previous
   top:10px put it under the header as soon as the page scrolled. */
.profile-page.pf-classic-layout #pfSidebar{
  top:calc(var(--header-h, 88px) + 10px)!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}

/* The artwork selector is specifically a Modern Dashboard setting. */
.profile-page.pf-classic-layout .pf-art-choice{display:none!important;}
.profile-page.pf-modern-layout .pf-art-choice{display:block!important;}

/* ----------------------------------------------------------------------
   SITE-WIDE MODERN HEADER
   The Profile layout selection doubles as the site's UI style choice.
   All normal pages use the shared headerHtml(), so no per-game JS rewrite
   is needed. This class is applied before paint by views.js.
   ---------------------------------------------------------------------- */
html.tf2bolt-modern-ui header.modern-header{
  min-height:72px!important;
  padding:8px 20px!important;
  gap:18px!important;
  flex-wrap:nowrap!important;
  background:linear-gradient(180deg,rgba(8,11,18,.985),rgba(8,12,20,.965))!important;
  border-bottom:1px solid rgba(114,137,176,.15)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.32)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
html.tf2bolt-modern-ui header .brand{
  font-size:27px!important;
  gap:9px!important;
  letter-spacing:.8px!important;
}
html.tf2bolt-modern-ui header .brand-mark{
  width:40px!important;height:40px!important;flex-basis:40px!important;
}

/* Mockup-style game row: no old giant rounded container; icon over label,
   warm active underline and only a very subtle hover wash. */
html.tf2bolt-modern-ui header .header-nav{
  align-self:stretch!important;
  display:flex!important;
  align-items:stretch!important;
  gap:2px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-bottom:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
html.tf2bolt-modern-ui header .nav-link{
  min-width:62px!important;
  height:auto!important;
  align-self:stretch!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
  gap:4px!important;
  padding:7px 11px 8px!important;
  border:0!important;
  border-radius:8px 8px 0 0!important;
  background:transparent!important;
  color:#9da9bb!important;
  font-size:9.5px!important;
  font-weight:650!important;
  letter-spacing:.1px!important;
  box-shadow:none!important;
  position:relative!important;
}
html.tf2bolt-modern-ui header .nav-link i{
  font-size:13px!important;
  opacity:.78!important;
  color:#a7b0bf!important;
  transition:color .15s,opacity .15s,transform .15s!important;
}
html.tf2bolt-modern-ui header .nav-link:hover{
  color:#e7ebf1!important;
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent)!important;
}
html.tf2bolt-modern-ui header .nav-link:hover i{
  opacity:1!important;
  transform:translateY(-1px)!important;
  color:#d7deea!important;
}
html.tf2bolt-modern-ui header .nav-link::after{
  content:''!important;
  display:block!important;
  position:absolute!important;
  left:12px!important;right:12px!important;bottom:0!important;
  height:2px!important;
  border-radius:2px 2px 0 0!important;
  background:linear-gradient(90deg,#d97615,#ffb03b)!important;
  transform:scaleX(0)!important;
  opacity:0!important;
  box-shadow:0 0 9px rgba(255,159,41,.45)!important;
  transition:transform .16s,opacity .16s!important;
}
html.tf2bolt-modern-ui header .nav-link.nav-active{
  color:#ffb14a!important;
  background:linear-gradient(180deg,rgba(224,139,63,.055),transparent)!important;
}
html.tf2bolt-modern-ui header .nav-link.nav-active i{
  color:#ff9f28!important;
  opacity:1!important;
}
html.tf2bolt-modern-ui header .nav-link.nav-active::after{
  transform:scaleX(1)!important;
  opacity:1!important;
}

/* Right side mirrors the concept: Bolt balance, +, bell, avatar. Legacy
   token counters are hidden only in Modern UI; their underlying data stays. */
html.tf2bolt-modern-ui header #tokenDisplay{display:none!important;}
html.tf2bolt-modern-ui header .header-right{
  gap:8px!important;
  margin-left:auto!important;
  align-items:center!important;
}
html.tf2bolt-modern-ui header .balance-chip{
  min-height:42px!important;
  display:flex!important;
  align-items:center!important;
  padding:5px 11px!important;
  background:linear-gradient(180deg,#111824,#0d131d)!important;
  border:1px solid rgba(255,255,255,.085)!important;
  border-radius:10px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 5px 16px rgba(0,0,0,.18)!important;
}
html.tf2bolt-modern-ui header .balance-chip:before{display:none!important;content:none!important;}
html.tf2bolt-modern-ui header .balance-chip .lbl{display:none!important;}
html.tf2bolt-modern-ui header .balance-chip .val{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  font-size:15px!important;
  font-weight:900!important;
  color:#f3f5f8!important;
  line-height:1!important;
}
/* Keep the TF2 Bolt coin — it is the brand identity. Put it before the value
   without changing formatPrice() site-wide. */
html.tf2bolt-modern-ui header .balance-chip .bolt-icon{
  order:-1!important;
  width:29px!important;height:29px!important;
  margin:0!important;
  vertical-align:middle!important;
  object-fit:contain!important;
  border-radius:50%!important;
  filter:drop-shadow(0 3px 7px rgba(224,139,63,.32))!important;
}
html.tf2bolt-modern-ui header .header-deposit-btn{
  width:36px!important;height:36px!important;
  min-width:36px!important;
  display:grid!important;place-items:center!important;
  padding:0!important;margin-left:0!important;
  border-radius:9px!important;
  background:linear-gradient(180deg,#f6a638,#dd7b18)!important;
  color:#fff!important;
  box-shadow:0 5px 15px rgba(224,139,63,.27)!important;
  font-size:0!important;
}
html.tf2bolt-modern-ui header .header-deposit-btn i{display:none!important;}
html.tf2bolt-modern-ui header .header-deposit-btn:after{
  content:'+'!important;font-size:20px!important;font-weight:900!important;line-height:1!important;
}
/* The concept has no legacy sound control in the primary action cluster.
   Keep the control functional in Classic; Modern simply declutters it. */
html.tf2bolt-modern-ui header .volume-control{display:none!important;}
html.tf2bolt-modern-ui header .icon-btn{
  width:36px!important;height:36px!important;
  border-radius:9px!important;
  background:transparent!important;
  border:1px solid transparent!important;
  color:#93a2b8!important;
}
html.tf2bolt-modern-ui header .icon-btn:hover{
  color:#dce4f0!important;
  background:rgba(255,255,255,.04)!important;
  border-color:rgba(255,255,255,.055)!important;
}
html.tf2bolt-modern-ui header .profile-btn{
  min-height:42px!important;
  padding:4px 8px 4px 4px!important;
  background:transparent!important;
  border-color:transparent!important;
  border-radius:11px!important;
}
html.tf2bolt-modern-ui header .profile-btn:hover{background:rgba(255,255,255,.04)!important;}
html.tf2bolt-modern-ui header .profile-btn img{
  width:36px!important;height:36px!important;
  border-radius:50%!important;
  box-shadow:0 0 0 2px rgba(224,139,63,.28)!important;
}
html.tf2bolt-modern-ui header .profile-btn .nm,
html.tf2bolt-modern-ui header .profile-btn .admin-badge{display:none!important;}
html.tf2bolt-modern-ui header .profile-btn .caret{margin-left:2px!important;}

/* At normal desktop widths, allow the existing shrink-to-fit logic to work.
   On true mobile, fall back to the existing nav dropdown implementation. */
@container page-shell (max-width:640px){
  html.tf2bolt-modern-ui header .header-nav{display:none!important;}
  html.tf2bolt-modern-ui header .header-nav.nav-open{display:flex!important;}
  html.tf2bolt-modern-ui header .volume-control{display:none!important;}
}

/* ======================================================================
   PROFILE V7 — restore site-wide volume control in Modern UI.
   Keep it in the same primary-action cluster on every page, including
   Profile Settings, while preserving the existing vertical slider popup.
   ====================================================================== */
html.tf2bolt-modern-ui header .volume-control{
  display:inline-flex!important;
  position:relative!important;
  align-items:center!important;
  flex:0 0 auto!important;
}
html.tf2bolt-modern-ui header .volume-control .sound-toggle-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:36px!important;
  height:36px!important;
  padding:0!important;
  border-radius:9px!important;
  color:#9eacc0!important;
  background:rgba(255,255,255,.025)!important;
  border:1px solid rgba(255,255,255,.055)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important;
}
html.tf2bolt-modern-ui header .volume-control .sound-toggle-btn:hover{
  color:#eef3fa!important;
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(255,255,255,.09)!important;
}
html.tf2bolt-modern-ui header .volume-control .sound-toggle-btn i{
  font-size:13px!important;
}


/* ======================================================================
   TF2 BOLT — SITE-WIDE MODERN MODE V1
   Everything below is scoped to html.tf2bolt-modern-ui so Classic remains
   the existing site. This layer harmonizes every game/workspace with the
   Modern Profile visual language without touching game logic or IDs.
   ====================================================================== */
html.tf2bolt-modern-ui{
  --m-bg:#070c14;
  --m-bg-2:#0b1220;
  --m-panel:#101927;
  --m-panel-2:#141f30;
  --m-panel-3:#182539;
  --m-border:rgba(119,151,202,.16);
  --m-border-hi:rgba(145,177,226,.27);
  --m-text:#eef4ff;
  --m-muted:#8493aa;
  --m-soft:#aebbd0;
  --m-orange:#f49a32;
  --m-orange-2:#ffc04f;
  --m-green:#45d391;
  --m-red:#ff686d;
  --m-blue:#62a8ff;
  --m-purple:#b67cff;
  --m-shadow:0 16px 42px rgba(0,0,0,.26);
  --m-shadow-soft:0 8px 25px rgba(0,0,0,.18);
}
html.tf2bolt-modern-ui body{
  font-family:'Plus Jakarta Sans','Segoe UI',sans-serif!important;
  color:var(--m-text)!important;
  background-color:var(--m-bg)!important;
  background-image:
    radial-gradient(900px 500px at 72% -80px,rgba(44,89,160,.18),transparent 62%),
    radial-gradient(700px 520px at 8% 92%,rgba(240,145,47,.07),transparent 64%),
    linear-gradient(180deg,#080d15 0,#070b12 45%,#060a10 100%)!important;
}
html.tf2bolt-modern-ui body>.wrap,
html.tf2bolt-modern-ui .dep-wrap,
html.tf2bolt-modern-ui .mx-wrap,
html.tf2bolt-modern-ui .md2-wrap{
  max-width:1580px!important;
  padding-left:22px!important;
  padding-right:22px!important;
}
html.tf2bolt-modern-ui .panel,
html.tf2bolt-modern-ui .modern-card,
html.tf2bolt-modern-ui .tf-panel,
html.tf2bolt-modern-ui .inv-panel{
  background:linear-gradient(160deg,rgba(20,31,48,.97),rgba(12,19,30,.98))!important;
  border-color:var(--m-border)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),var(--m-shadow-soft)!important;
}
html.tf2bolt-modern-ui .panel:hover,
html.tf2bolt-modern-ui .modern-card:hover{border-color:rgba(132,166,220,.23);}
html.tf2bolt-modern-ui .fld,
html.tf2bolt-modern-ui .modern-input,
html.tf2bolt-modern-ui input.search,
html.tf2bolt-modern-ui select,
html.tf2bolt-modern-ui textarea{
  background:#0b1421!important;
  color:var(--m-text)!important;
  border-color:rgba(123,157,211,.18)!important;
  border-radius:10px!important;
}
html.tf2bolt-modern-ui .fld:focus,
html.tf2bolt-modern-ui .modern-input:focus,
html.tf2bolt-modern-ui input.search:focus,
html.tf2bolt-modern-ui select:focus,
html.tf2bolt-modern-ui textarea:focus{
  border-color:rgba(244,154,50,.62)!important;
  box-shadow:0 0 0 3px rgba(244,154,50,.10)!important;
  outline:none!important;
}
html.tf2bolt-modern-ui .btn,
html.tf2bolt-modern-ui .btn-primary,
html.tf2bolt-modern-ui .btn-ghost,
html.tf2bolt-modern-ui .btn-refresh,
html.tf2bolt-modern-ui .modern-btn-sub{
  border-radius:10px!important;
  font-family:inherit!important;
  font-weight:750!important;
}
html.tf2bolt-modern-ui .btn-primary,
html.tf2bolt-modern-ui .btn-primary-glow{
  background:linear-gradient(180deg,#ffad42,#e98722)!important;
  border-color:rgba(255,190,84,.45)!important;
  color:#171006!important;
  box-shadow:0 8px 20px rgba(222,126,25,.18)!important;
}
html.tf2bolt-modern-ui .btn-primary:hover,
html.tf2bolt-modern-ui .btn-primary-glow:hover{filter:brightness(1.06);transform:translateY(-1px);}
html.tf2bolt-modern-ui .btn-ghost,
html.tf2bolt-modern-ui .btn.ghost,
html.tf2bolt-modern-ui .btn-refresh,
html.tf2bolt-modern-ui .modern-btn-sub{
  background:rgba(255,255,255,.025)!important;
  border:1px solid rgba(129,160,208,.14)!important;
  color:#c7d3e5!important;
}
html.tf2bolt-modern-ui .btn-ghost:hover,
html.tf2bolt-modern-ui .btn.ghost:hover,
html.tf2bolt-modern-ui .btn-refresh:hover,
html.tf2bolt-modern-ui .modern-btn-sub:hover{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(244,154,50,.34)!important;
}
html.tf2bolt-modern-ui .display{font-family:'Plus Jakarta Sans','Segoe UI',sans-serif!important;text-transform:none!important;letter-spacing:-.35px!important;}
html.tf2bolt-modern-ui .hint,
html.tf2bolt-modern-ui .sub{color:var(--m-muted)!important;}
html.tf2bolt-modern-ui .text-accent{color:var(--m-orange)!important;}
html.tf2bolt-modern-ui .tabs.modern-tabs{gap:5px!important;background:rgba(5,10,17,.32)!important;padding:4px!important;border:1px solid rgba(125,156,206,.10)!important;border-radius:11px!important;}
html.tf2bolt-modern-ui .tabs.modern-tabs .tab-btn{border-radius:8px!important;color:#93a2b9!important;}
html.tf2bolt-modern-ui .tabs.modern-tabs .tab-btn.active{color:#fff!important;background:linear-gradient(180deg,rgba(244,154,50,.20),rgba(244,154,50,.09))!important;box-shadow:inset 0 0 0 1px rgba(244,154,50,.24)!important;}
html.tf2bolt-modern-ui .modal.modern-modal{
  background:linear-gradient(160deg,#152135,#0d1625)!important;
  border:1px solid rgba(128,162,218,.23)!important;
  border-radius:16px!important;
  box-shadow:0 28px 80px rgba(0,0,0,.55)!important;
}
html.tf2bolt-modern-ui .overlay{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:rgba(3,7,13,.70)!important;}

/* Header — visual order mirrors the original Modern mockup while hrefs stay unchanged. */
html.tf2bolt-modern-ui header.modern-header{
  min-height:69px!important;
  padding:7px 18px!important;
  gap:12px!important;
  background:linear-gradient(180deg,rgba(9,13,21,.98),rgba(8,12,19,.95))!important;
  border-bottom:1px solid rgba(110,141,192,.15)!important;
  box-shadow:0 9px 30px rgba(0,0,0,.34)!important;
}
html.tf2bolt-modern-ui header .header-nav{gap:2px!important;padding:0 4px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;}
html.tf2bolt-modern-ui header .nav-link{min-width:61px!important;padding:7px 9px 8px!important;gap:4px!important;border:0!important;border-radius:7px!important;background:transparent!important;color:#94a2b8!important;font-size:9.2px!important;box-shadow:none!important;}
html.tf2bolt-modern-ui header .nav-link i{font-size:13px!important;color:#8290a6!important;}
html.tf2bolt-modern-ui header .nav-link:hover{background:rgba(255,255,255,.035)!important;color:#e9eef8!important;}
html.tf2bolt-modern-ui header .nav-link.nav-active{color:#ffb546!important;background:rgba(244,154,50,.035)!important;}
html.tf2bolt-modern-ui header .nav-link.nav-active i{color:#ff9d2b!important;filter:drop-shadow(0 0 7px rgba(244,154,50,.45));}
html.tf2bolt-modern-ui header .nav-link::after{height:2px!important;left:10px!important;right:10px!important;background:linear-gradient(90deg,transparent,#ff9c29 25%,#ffb846 75%,transparent)!important;box-shadow:0 0 9px rgba(255,157,41,.62)!important;}
html.tf2bolt-modern-ui header .nav-link[href="/jackpot"]{order:1}html.tf2bolt-modern-ui header .nav-link[href="/coinflip"]{order:2}html.tf2bolt-modern-ui header .nav-link[href="/roulette"]{order:3}html.tf2bolt-modern-ui header .nav-link[href="/payload"]{order:4}html.tf2bolt-modern-ui header .nav-link[href="/crates"]{order:5}html.tf2bolt-modern-ui header .nav-link[href="/games"]{order:6}html.tf2bolt-modern-ui header .nav-link[href="/crafter"]{order:7}
html.tf2bolt-modern-ui header .balance-chip{height:39px!important;min-width:118px!important;padding:4px 10px!important;border-radius:10px!important;background:linear-gradient(180deg,#111a27,#0c141f)!important;border-color:rgba(124,156,207,.17)!important;box-shadow:inset 0 1px rgba(255,255,255,.03)!important;}
html.tf2bolt-modern-ui header .balance-chip .val{font-size:13px!important;color:#fff0cf!important;gap:5px!important;}
html.tf2bolt-modern-ui header .balance-chip .bolt-icon{width:26px!important;height:26px!important;margin:0 4px 0 0!important;vertical-align:middle!important;order:-1!important;}
html.tf2bolt-modern-ui header .header-deposit-btn{width:34px!important;height:34px!important;border-radius:9px!important;background:linear-gradient(180deg,#f7a337,#dd7d17)!important;box-shadow:0 6px 15px rgba(221,125,23,.24)!important;}
html.tf2bolt-modern-ui header .volume-control{display:inline-flex!important;}
html.tf2bolt-modern-ui header .volume-control .sound-toggle-btn,
html.tf2bolt-modern-ui header .bell-btn{width:34px!important;height:34px!important;border-radius:9px!important;background:#111925!important;border:1px solid rgba(123,154,203,.16)!important;}
html.tf2bolt-modern-ui header .profile-btn{height:39px!important;padding:3px 7px!important;border:1px solid rgba(123,154,203,.16)!important;background:#101925!important;border-radius:10px!important;}
html.tf2bolt-modern-ui header .profile-btn img{width:31px!important;height:31px!important;border-radius:50%!important;}
html.tf2bolt-modern-ui header .profile-btn .nm,
html.tf2bolt-modern-ui header .profile-btn .admin-badge{display:none!important;}

/* Chat gets the same shell without changing any chat functionality. */
html.tf2bolt-modern-ui .chat{background:linear-gradient(180deg,#0e1724,#0a111c)!important;border-right-color:rgba(113,145,198,.15)!important;box-shadow:14px 0 34px rgba(0,0,0,.18)!important;}
html.tf2bolt-modern-ui .chat-head{background:rgba(255,255,255,.025)!important;border-bottom-color:rgba(116,149,204,.12)!important;}
html.tf2bolt-modern-ui .chat-input-row input{background:#0b1420!important;border-color:rgba(122,154,205,.16)!important;}

/* Deposit */
html.tf2bolt-modern-ui .dep-wrap{padding-top:20px!important;}
html.tf2bolt-modern-ui .dep-shell{gap:16px!important;}
html.tf2bolt-modern-ui .dep-toolbar{padding:13px 14px!important;margin-bottom:12px!important;border:1px solid var(--m-border)!important;border-radius:13px!important;background:linear-gradient(160deg,rgba(20,31,48,.94),rgba(12,19,30,.94))!important;box-shadow:var(--m-shadow-soft)!important;}
html.tf2bolt-modern-ui .dep-toolbar h2{font-size:19px!important;margin:0!important;}
html.tf2bolt-modern-ui .dep-sort-group{background:#0d1622!important;border-color:rgba(125,157,208,.16)!important;border-radius:9px!important;}
html.tf2bolt-modern-ui .dep-sort-btn{color:#8f9db3!important;padding:8px 10px!important;}
html.tf2bolt-modern-ui .dep-sort-btn.active{color:#ffb34d!important;background:rgba(244,154,50,.10)!important;}
html.tf2bolt-modern-ui .dep-right{width:265px!important;top:82px!important;gap:11px!important;}
html.tf2bolt-modern-ui .dep-right .panel{border-radius:13px!important;padding:14px!important;}
html.tf2bolt-modern-ui .dep-grid{gap:8px!important;}
html.tf2bolt-modern-ui .dep-grid .item-card,
html.tf2bolt-modern-ui .inventory-page .item-card{
  border-radius:11px!important;
  border-color:rgba(124,157,210,.14)!important;
  background:radial-gradient(120% 90% at 50% 20%,rgba(65,94,135,.18),transparent 60%),linear-gradient(160deg,#131d2c,#0e1622)!important;
  box-shadow:0 7px 20px rgba(0,0,0,.18)!important;
}
html.tf2bolt-modern-ui .dep-grid .item-card:hover,
html.tf2bolt-modern-ui .inventory-page .item-card:hover{border-color:rgba(244,154,50,.45)!important;box-shadow:0 12px 28px rgba(0,0,0,.30)!important;transform:translateY(-2px)!important;}
html.tf2bolt-modern-ui .deposit-bar{background:rgba(12,20,32,.91)!important;border:1px solid rgba(134,165,216,.17)!important;border-radius:14px!important;box-shadow:0 16px 38px rgba(0,0,0,.34)!important;backdrop-filter:blur(16px)!important;}

/* Inventory / Withdraw */
html.tf2bolt-modern-ui .inv-layout{max-width:1580px!important;margin:18px auto 0!important;padding:0 22px!important;gap:16px!important;}
html.tf2bolt-modern-ui .inv-main{min-width:0!important;}
html.tf2bolt-modern-ui .inv-side{width:286px!important;top:82px!important;gap:10px!important;}
html.tf2bolt-modern-ui .inv-panel{border-radius:13px!important;}
html.tf2bolt-modern-ui .inv-tab-btn{min-height:40px!important;border-radius:9px!important;}
html.tf2bolt-modern-ui .inv-search,
html.tf2bolt-modern-ui .inv-sort{background:#0b1421!important;border-color:rgba(122,154,207,.16)!important;border-radius:9px!important;}
html.tf2bolt-modern-ui .inv-chip,
html.tf2bolt-modern-ui .inv-icon-btn{border-radius:8px!important;background:rgba(255,255,255,.025)!important;border-color:rgba(124,156,207,.14)!important;}
html.tf2bolt-modern-ui .inv-chip.accent{background:rgba(244,154,50,.15)!important;border-color:rgba(244,154,50,.33)!important;color:#ffc05b!important;}
html.tf2bolt-modern-ui .inv-recent-list{scrollbar-color:rgba(244,154,50,.35) transparent;}

/* Matches */
html.tf2bolt-modern-ui .mx-wrap{padding-top:18px!important;}
html.tf2bolt-modern-ui .mx-shell{gap:16px!important;grid-template-columns:auto!important;}
html.tf2bolt-modern-ui .mx-sidebar{width:200px!important;top:82px!important;padding:13px!important;border:1px solid var(--m-border)!important;border-radius:14px!important;background:linear-gradient(160deg,#101a29,#0c141f)!important;box-shadow:var(--m-shadow-soft)!important;}
html.tf2bolt-modern-ui .mx-title{font-size:18px!important;}
html.tf2bolt-modern-ui .mx-tab,
html.tf2bolt-modern-ui .mx-game-btn{border-radius:9px!important;padding:8px 10px!important;}
html.tf2bolt-modern-ui .mx-tab.active,
html.tf2bolt-modern-ui .mx-game-btn.active{background:rgba(244,154,50,.12)!important;color:#ffb44c!important;}
html.tf2bolt-modern-ui .mx-main{min-width:0!important;}
html.tf2bolt-modern-ui .matchup-row,
html.tf2bolt-modern-ui .match-card,
html.tf2bolt-modern-ui .mc-card{background:linear-gradient(160deg,#121d2c,#0d1622)!important;border-color:rgba(123,156,209,.14)!important;border-radius:13px!important;box-shadow:var(--m-shadow-soft)!important;}
html.tf2bolt-modern-ui .matchup-row:hover,
html.tf2bolt-modern-ui .match-card:hover{border-color:rgba(244,154,50,.30)!important;transform:translateY(-1px)!important;}
html.tf2bolt-modern-ui .mx-right{width:285px!important;top:82px!important;}
html.tf2bolt-modern-ui .mxr-tabs,
html.tf2bolt-modern-ui .mxr-panel,
html.tf2bolt-modern-ui .mxr-watcher{background:linear-gradient(160deg,#111b2a,#0d1521)!important;border-color:var(--m-border)!important;border-radius:13px!important;}

/* Match detail */
html.tf2bolt-modern-ui .md2-wrap{padding-top:18px!important;max-width:1260px!important;}
html.tf2bolt-modern-ui .md2-header{padding:22px!important;border-radius:16px!important;background:radial-gradient(650px 220px at 50% -40%,rgba(73,120,199,.19),transparent 64%),linear-gradient(160deg,#142136,#0c1522)!important;}
html.tf2bolt-modern-ui .md2-team img{width:70px!important;height:70px!important;border:2px solid rgba(123,157,211,.20)!important;box-shadow:0 8px 20px rgba(0,0,0,.28)!important;}
html.tf2bolt-modern-ui .md2-series-score{font-size:36px!important;}
html.tf2bolt-modern-ui .md2-tab{border-radius:9px!important;}
html.tf2bolt-modern-ui .md2-tab.active{background:linear-gradient(180deg,#ffad42,#e98722)!important;color:#171006!important;}
html.tf2bolt-modern-ui .md2-odds-box{border-radius:13px!important;background:#0f1927!important;border-color:rgba(127,160,212,.17)!important;}
html.tf2bolt-modern-ui .md2-betslip{background:linear-gradient(160deg,#152238,#0d1624)!important;border-color:rgba(126,159,212,.24)!important;border-radius:15px!important;box-shadow:0 24px 60px rgba(0,0,0,.45)!important;}

/* Coinflip */
html.tf2bolt-modern-ui body.coinflip-page{
  --cf-bg:#080d15!important;--cf-panel:#101927!important;--cf-panel-hi:#152133!important;--cf-slot:#121c2a!important;--cf-slot-hover:#19263a!important;--cf-border:rgba(120,151,202,.14)!important;--cf-border-hi:rgba(141,174,225,.25)!important;--cf-cream:#edf3ff!important;--cf-tan-muted:#8494ac!important;--cf-gold:#ffad39!important;--cf-gold-dim:#d98624!important;
}
html.tf2bolt-modern-ui .cf-shell{max-width:1480px!important;margin:18px auto!important;gap:14px!important;}
html.tf2bolt-modern-ui .cf-create,
html.tf2bolt-modern-ui .cf-list,
html.tf2bolt-modern-ui .cf-game-card,
html.tf2bolt-modern-ui .cf-modal{border-radius:14px!important;box-shadow:var(--m-shadow-soft)!important;}
html.tf2bolt-modern-ui .cf-list-head{background:rgba(255,255,255,.018)!important;border-bottom-color:rgba(123,155,207,.11)!important;}
html.tf2bolt-modern-ui .cf-flip-card{border-radius:12px!important;background:linear-gradient(160deg,#131e2e,#0e1724)!important;border-color:rgba(127,158,207,.14)!important;}
html.tf2bolt-modern-ui .cf-flip-card:hover{border-color:rgba(244,154,50,.34)!important;transform:translateY(-2px)!important;box-shadow:0 12px 28px rgba(0,0,0,.28)!important;}
html.tf2bolt-modern-ui .cf-btn{border-radius:10px!important;}

/* Jackpot */
html.tf2bolt-modern-ui body.jackpot-page{
  --jp-bg:#080d15!important;--jp-panel:#101927!important;--jp-panel-hi:#152133!important;--jp-slot:#121c2a!important;--jp-border:rgba(121,153,205,.14)!important;--jp-border-hi:rgba(143,175,224,.24)!important;--jp-cream:#edf3ff!important;--jp-muted:#8493aa!important;--jp-gold:#ffad39!important;--jp-gold-dim:#d98727!important;
}
html.tf2bolt-modern-ui .jp-shell{max-width:1480px!important;margin:18px auto!important;padding:0 20px 28px!important;}
html.tf2bolt-modern-ui .jp-topbar{border-radius:14px!important;background:radial-gradient(600px 100px at 50% 0,rgba(244,154,50,.10),transparent 70%),linear-gradient(160deg,#131f30,#0d1622)!important;}
html.tf2bolt-modern-ui .jp-main-row{gap:13px!important;}
html.tf2bolt-modern-ui .jp-pot-wrap,
html.tf2bolt-modern-ui .jp-deposit-panel,
html.tf2bolt-modern-ui .jp-roster-panel{border-radius:14px!important;}
html.tf2bolt-modern-ui .jp-inv-item{border-radius:10px!important;background:#101a28!important;border-color:rgba(124,156,207,.14)!important;}
html.tf2bolt-modern-ui .jp-player{border-radius:11px!important;background:linear-gradient(160deg,#141f30,#0e1723)!important;}

/* Roulette */
html.tf2bolt-modern-ui body.roulette-page{
  --rl-bg:#080d15!important;--rl-panel:#101927!important;--rl-panel-hi:#152133!important;--rl-slot:#121c2a!important;--rl-border:rgba(120,152,204,.14)!important;--rl-border-hi:rgba(144,176,225,.24)!important;--rl-cream:#edf3ff!important;--rl-muted:#8493aa!important;--rl-gold:#ffad39!important;--rl-gold-dim:#d98727!important;
}
html.tf2bolt-modern-ui .rl-shell{max-width:1460px!important;margin:18px auto!important;padding:0 20px 28px!important;}
html.tf2bolt-modern-ui .rl-layout{gap:14px!important;}
html.tf2bolt-modern-ui .rl-banner{border-radius:14px!important;background:radial-gradient(550px 130px at 50% -20%,rgba(244,154,50,.13),transparent 70%),linear-gradient(160deg,#141f30,#0e1724)!important;}
html.tf2bolt-modern-ui .rl-reel-wrap,
html.tf2bolt-modern-ui .rl-bet-bar-wrap,
html.tf2bolt-modern-ui .rl-autobet-panel,
html.tf2bolt-modern-ui .rl-fair-panel{border-radius:13px!important;}
html.tf2bolt-modern-ui .rl-bet-seg{border-radius:9px!important;}
html.tf2bolt-modern-ui .rl-reel-cell{border-radius:8px!important;box-shadow:inset 0 1px rgba(255,255,255,.08)!important;}
html.tf2bolt-modern-ui .rl-sidebar{width:280px!important;}

/* Payload */
html.tf2bolt-modern-ui body.payload-page{
  --pd-bg:#080d15!important;--pd-panel:#101927!important;--pd-panel-hi:#152133!important;--pd-slot:#121c2a!important;--pd-border:rgba(120,152,204,.14)!important;--pd-border-hi:rgba(144,176,225,.24)!important;--pd-cream:#edf3ff!important;--pd-muted:#8493aa!important;--pd-gold:#ffad39!important;--pd-gold-dim:#d98727!important;
}
html.tf2bolt-modern-ui .pd-shell{max-width:1460px!important;margin:18px auto!important;padding:0 20px 28px!important;}
html.tf2bolt-modern-ui .pd-layout{gap:14px!important;}
html.tf2bolt-modern-ui .pd-banner{border-radius:14px!important;background:radial-gradient(600px 150px at 52% -30%,rgba(98,168,255,.13),transparent 70%),linear-gradient(160deg,#141f30,#0e1724)!important;}
html.tf2bolt-modern-ui .pd-track-wrap{border-radius:15px!important;border-color:rgba(130,162,214,.20)!important;box-shadow:inset 0 1px rgba(255,255,255,.025),0 14px 35px rgba(0,0,0,.25)!important;}
html.tf2bolt-modern-ui .pd-bettors-panel,
html.tf2bolt-modern-ui .pd-top-crashes-panel,
html.tf2bolt-modern-ui .pd-autoplay{border-radius:13px!important;}
html.tf2bolt-modern-ui .pd-sidebar{width:280px!important;}
html.tf2bolt-modern-ui .pd-mult-num{text-shadow:0 6px 30px rgba(244,154,50,.22)!important;}

/* Crates */
html.tf2bolt-modern-ui body.crates-page{
  --cr-bg:#080d15!important;--cr-panel:#101927!important;--cr-panel-hi:#152133!important;--cr-slot:#121c2a!important;--cr-border:rgba(120,152,204,.14)!important;--cr-border-hi:rgba(144,176,225,.24)!important;--cr-cream:#edf3ff!important;--cr-muted:#8493aa!important;--cr-gold:#ffad39!important;--cr-gold-dim:#d98727!important;
}
html.tf2bolt-modern-ui .cr-shell{max-width:1480px!important;margin:18px auto!important;padding:0 20px 30px!important;}
html.tf2bolt-modern-ui .cr-topbar{min-height:59px!important;padding:10px 14px!important;background:linear-gradient(160deg,#131f30,#0d1622)!important;border:1px solid var(--m-border)!important;border-radius:14px!important;box-shadow:var(--m-shadow-soft)!important;}
html.tf2bolt-modern-ui .cr-crate-grid{gap:11px!important;}
html.tf2bolt-modern-ui .cr-crate-card{border-radius:13px!important;background:radial-gradient(120% 90% at 50% 18%,rgba(68,97,141,.19),transparent 64%),linear-gradient(160deg,#131e2d,#0d1622)!important;border-color:rgba(125,157,208,.15)!important;box-shadow:0 8px 22px rgba(0,0,0,.18)!important;}
html.tf2bolt-modern-ui .cr-crate-card:hover{transform:translateY(-3px)!important;border-color:rgba(244,154,50,.40)!important;box-shadow:0 16px 34px rgba(0,0,0,.30)!important;}
html.tf2bolt-modern-ui .cr-open-layout{gap:14px!important;}
html.tf2bolt-modern-ui .cr-unbox-panel,
html.tf2bolt-modern-ui .cr-info-panel,
html.tf2bolt-modern-ui .cr-hero-wrap,
html.tf2bolt-modern-ui .cr-your-item{border-radius:14px!important;}
html.tf2bolt-modern-ui .cr-mode-btn,
html.tf2bolt-modern-ui .cr-qty-btn{border-radius:9px!important;}

/* Crafter */
html.tf2bolt-modern-ui body.crafter-page{
  --tf-bg:#080d15!important;--tf-panel:#101927!important;--tf-panel-hi:#152133!important;--tf-slot:#121c2a!important;--tf-slot-hover:#19263a!important;--tf-border:rgba(120,152,204,.14)!important;--tf-border-hi:rgba(144,176,225,.24)!important;--tf-cream:#edf3ff!important;--tf-tan-muted:#8493aa!important;--tf-gold:#ffad39!important;--tf-gold-dim:#d98727!important;--tf-blue-info:#74b2ff!important;
}
html.tf2bolt-modern-ui .crafter-page-wrap{max-width:1500px!important;margin:18px auto!important;padding:0 20px 28px!important;}
html.tf2bolt-modern-ui .crafter-page .tf-panel{border-radius:14px!important;}
html.tf2bolt-modern-ui .cr-forge-scene{border-radius:16px!important;background:radial-gradient(circle at 50% 58%,rgba(244,154,50,.12),transparent 37%),linear-gradient(180deg,#101a29,#0b131e)!important;}
html.tf2bolt-modern-ui .tf2-craft-btn{border-radius:11px!important;}
html.tf2bolt-modern-ui .tf2-slot,
html.tf2bolt-modern-ui .stock-slot,
html.tf2bolt-modern-ui .my-slot{border-radius:10px!important;background:#111b29!important;border-color:rgba(124,156,207,.15)!important;}

/* Transactions / History */
html.tf2bolt-modern-ui body.transactions-page>.wrap{max-width:1260px!important;padding-top:20px!important;}
html.tf2bolt-modern-ui .tx-row{background:linear-gradient(160deg,#121d2c,#0d1622)!important;border-color:rgba(124,156,208,.14)!important;border-radius:13px!important;box-shadow:0 6px 18px rgba(0,0,0,.14)!important;}
html.tf2bolt-modern-ui .tx-row:hover{border-color:rgba(244,154,50,.30)!important;box-shadow:0 10px 26px rgba(0,0,0,.24)!important;}
html.tf2bolt-modern-ui .tx-icon{border-radius:10px!important;background:#152133!important;border-color:rgba(128,161,214,.14)!important;}
html.tf2bolt-modern-ui .tx-summary-chip,
html.tf2bolt-modern-ui .tx-detail-cell{background:rgba(255,255,255,.025)!important;border:1px solid rgba(124,156,207,.10)!important;border-radius:9px!important;}
html.tf2bolt-modern-ui .tx-item-chip{background:#111b29!important;border-color:rgba(125,157,209,.14)!important;border-radius:8px!important;}
html.tf2bolt-modern-ui .tx-all-row{background:linear-gradient(160deg,#111b29,#0d1622)!important;border-color:rgba(124,156,208,.12)!important;border-radius:11px!important;}

/* Admin — harmonize with Modern site shell while keeping its existing workspace redesign. */
html.tf2bolt-modern-ui body.admin-page,
html.tf2bolt-modern-ui body.admin-modern-page{background:#070c14!important;}
html.tf2bolt-modern-ui body.admin-modern-page #adminTabs{top:77px!important;background:rgba(11,18,29,.92)!important;border-color:rgba(124,156,208,.13)!important;}
html.tf2bolt-modern-ui .admin-section-hero,
html.tf2bolt-modern-ui .admin-ui-panel,
html.tf2bolt-modern-ui .admin-modern-tab>.panel{background:linear-gradient(160deg,#121d2c,#0d1622)!important;border-color:rgba(124,156,208,.14)!important;}

/* Responsive: Modern stays usable instead of simply shrinking desktop cards. */
@media(max-width:1180px){
  html.tf2bolt-modern-ui .mx-shell{gap:12px!important;}
  html.tf2bolt-modern-ui .mx-sidebar{width:180px!important;}
  html.tf2bolt-modern-ui .mx-right{width:255px!important;}
  html.tf2bolt-modern-ui .dep-right{width:240px!important;}
  html.tf2bolt-modern-ui .inv-side{width:260px!important;}
}
@media(max-width:980px){
  html.tf2bolt-modern-ui .dep-shell{flex-direction:column!important;}
  html.tf2bolt-modern-ui .dep-right{position:static!important;width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  html.tf2bolt-modern-ui .inv-layout{display:block!important;}
  html.tf2bolt-modern-ui .inv-side{position:static!important;width:100%!important;margin-top:14px!important;}
  html.tf2bolt-modern-ui .mx-shell{display:block!important;}
  html.tf2bolt-modern-ui .mx-sidebar,html.tf2bolt-modern-ui .mx-right{position:static!important;width:100%!important;margin-bottom:12px!important;}
}
@media(max-width:720px){
  html.tf2bolt-modern-ui body>.wrap,html.tf2bolt-modern-ui .dep-wrap,html.tf2bolt-modern-ui .mx-wrap,html.tf2bolt-modern-ui .md2-wrap{padding-left:12px!important;padding-right:12px!important;}
  html.tf2bolt-modern-ui .dep-right{grid-template-columns:1fr!important;}
  html.tf2bolt-modern-ui header .balance-chip{min-width:92px!important;}
}


/* ======================================================================
   RELEASE HOLD + VOLUME FIX
   Modern Dashboard is temporarily unavailable. The volume popup geometry
   lives in the render-blocking shared stylesheet so it is vertical BEFORE
   common.js loads; this prevents the horizontal range-input flash on navigation.
   ====================================================================== */
.volume-control{position:relative;display:inline-flex;align-items:center;}
.volume-slider-pop{
  position:absolute!important;top:calc(100% + 6px)!important;left:50%!important;
  transform:translateX(-50%)!important;width:36px!important;height:120px!important;
  padding:8px 0!important;display:none;align-items:center!important;justify-content:center!important;
  background:#151c27!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:11px!important;
  box-shadow:0 10px 28px rgba(0,0,0,.48)!important;z-index:1000!important;overflow:visible!important;
}
.volume-slider-pop::before{content:'';position:absolute;left:0;right:0;top:-8px;height:8px;}
.volume-control:hover .volume-slider-pop,.volume-slider-pop.open{display:flex!important;}
.volume-slider-vertical{
  -webkit-appearance:none!important;appearance:none!important;
  position:absolute!important;left:50%!important;top:50%!important;
  width:88px!important;height:4px!important;margin:0!important;padding:0!important;
  transform:translate(-50%,-50%) rotate(-90deg)!important;transform-origin:center!important;
  border:0!important;border-radius:999px!important;outline:0!important;cursor:pointer!important;
  background:rgba(255,255,255,.14);writing-mode:horizontal-tb!important;
}
.volume-slider-vertical::-webkit-slider-thumb{-webkit-appearance:none!important;width:14px;height:14px;border-radius:50%;background:var(--accent,#e8912b);border:0;box-shadow:0 1px 5px rgba(0,0,0,.55);cursor:pointer;margin-top:-5px!important;}
.volume-slider-vertical::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent,#e8912b);border:0;box-shadow:0 1px 5px rgba(0,0,0,.55);cursor:pointer;}
.volume-slider-vertical::-webkit-slider-runnable-track{height:4px;background:transparent;border:0;}
.volume-slider-vertical::-moz-range-track{height:4px;background:transparent;border:0;}

.profile-page .pf-layout-option.pf-layout-coming-soon,
.profile-page .pf-layout-option.pf-layout-coming-soon:hover{
  cursor:not-allowed!important;opacity:.48!important;filter:saturate(.25)!important;
  transform:none!important;background:rgba(255,255,255,.018)!important;
  border-color:rgba(255,255,255,.065)!important;box-shadow:none!important;
}
.profile-page .pf-layout-option.pf-layout-coming-soon .pf-layout-preview{opacity:.55;}
.profile-page .pf-coming-soon-badge{
  display:inline-flex;align-items:center;margin-left:7px;padding:3px 7px;border-radius:999px;
  border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.045);
  color:#a7afba;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.7px;vertical-align:2px;
}
.profile-page .pf-art-choice{display:none!important;}


/* Critical chat-language sizing belongs in render-blocking CSS as well.
   common.js used to add this only after first paint, which let the flag
   briefly render at its full intrinsic size while navigating pages. */
.chat-lang-flag{
  width:16px!important;
  height:12px!important;
  min-width:16px!important;
  max-width:16px!important;
  object-fit:cover!important;
  border-radius:2px;
  flex:0 0 16px;
  display:inline-block;
}
.chat-lang-current .chat-lang-flag,
.chat-lang-option .chat-lang-flag{
  width:16px!important;
  height:12px!important;
}