/* V22 stability/professional pass */
:root{--v22-pro-bg:#0d1117;--v22-pro-panel:#161b22;--v22-pro-panel2:#0f141b;--v22-pro-border:#30363d;--v22-pro-border-hover:#484f58;--v22-pro-text:#e6edf3;--v22-pro-muted:#8b949e;--v22-pro-link:#58a6ff}
html,body{background:var(--v22-pro-bg)!important}
body{color:var(--v22-pro-text)}
.site-shell{background:var(--v22-pro-bg)!important}
/* Scrap the experimental floating/AI-looking layers. */
.v22-mode-dock,.v22-focus-rail,.v22-quick,.v22-staff-launch,.v22-staff-modal,.v22-pet,.v22-pet-trail,.v22-ambient,.v22-scene,.v22-settings{display:none!important}
body.v22-fancy-buttons .v22-decor-btn:before,.v22-ultra-case:after{display:none!important}
/* Simple project-style surfaces. */
.topbar,.side-menu,.arena-card,.guess-panel,.case-card,.inventory-card,.skin-card,.settings-console,.moderator-console,.admin-console,.operation-page>*,.upgrader-page>*,.leaderboard-section,.my-clips-page,.v15-modal,.v20-login{background:var(--v22-pro-panel)!important;border-color:var(--v22-pro-border)!important;box-shadow:none!important;backdrop-filter:none!important}
.topbar{border-bottom:1px solid var(--v22-pro-border)!important}
.side-menu{border-right:1px solid var(--v22-pro-border)!important}
.page-title,.section-heading,.leaderboard-heading{border-color:var(--v22-pro-border)!important}
/* Buttons: one consistent system, subtle hover, no neon sweep. */
button,.v22-decor-btn,.v15-primary,.case-preview-button,.case-open-button,.lock-button{box-shadow:none!important;filter:none!important;text-shadow:none!important;transition:background-color .12s ease,border-color .12s ease,color .12s ease,transform .08s ease!important}
button:not(:disabled):hover,.v22-decor-btn:not(:disabled):hover{transform:none!important;border-color:var(--v22-pro-border-hover)!important}
button:not(:disabled):active{transform:translateY(1px)!important}
.v22-btn-icon{background:transparent!important;border:0!important;box-shadow:none!important;color:inherit!important;min-width:14px;padding:0!important}
/* Reduce gradients and loud glow while keeping rarity identity. */
.home-stage,.arena-wrap,.cases-page,.inventory-page,.operation-page,.upgrader-page,.settings-page,.moderation-page,.admin-page,.leaderboard-section,.my-clips-page{background-image:none!important}
.home-orbit,.hero-grid,.banner-crosshair,.empty-crosshair{opacity:.18!important}
.home-rating-card,.home-tools button,.center-mode,.mode-switch button,.setting-card,.setting-toggle,.admin-summary article,.staff-capabilities span{background:var(--v22-pro-panel2)!important;border-color:var(--v22-pro-border)!important;box-shadow:none!important}
.center-mode:hover,.home-tools button:hover,.setting-toggle:hover,.setting-card:hover{background:#1c2128!important}
.center-mode strong,.page-title em,.section-heading em,.leaderboard-heading em{color:var(--v22-pro-link)!important;text-shadow:none!important}
/* Keep category identity as restrained borders rather than giant colored backgrounds. */
.center-mode.ranked{border-left:3px solid #58a6ff!important}.center-mode.quick{border-left:3px solid #3fb950!important}.center-mode.hardcore{border-left:3px solid #d29922!important}.center-mode.survival{border-left:3px solid #f85149!important}.center-mode.duel{border-left:3px solid #a371f7!important}
.case-card{border-top:2px solid color-mix(in srgb,var(--yellow) 55%,var(--v22-pro-border))!important}
.v22-ultra-case{background:var(--v22-pro-panel)!important;border-color:#6e7681!important;box-shadow:none!important}
.v22-ultra-badge{background:#21262d!important;border-color:#6e7681!important;color:#e3b341!important;text-shadow:none!important}
/* Professional typography and spacing. */
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important}
h1,h2,h3,.brand,.home-rating-card strong{letter-spacing:-.02em!important}
.eyebrow,.staff-capabilities span,.v22-build-chip{letter-spacing:.08em!important}
.page-title small,.panel-heading p,.case-card p,.settings-spotlight p{color:var(--v22-pro-muted)!important}
/* Inputs look like normal project controls. */
input,select,textarea{background:#0d1117!important;border-color:var(--v22-pro-border)!important;color:var(--v22-pro-text)!important;box-shadow:none!important}
input:focus,select:focus,textarea:focus{border-color:#58a6ff!important;box-shadow:0 0 0 2px #1f6feb40!important;outline:none!important}
/* Preserve useful rarity color without bloom. */
.rarity-mil-spec{color:#79c0ff!important}.rarity-restricted{color:#a371f7!important}.rarity-classified{color:#d2a8ff!important}.rarity-covert{color:#ff7b72!important}.rarity-gold,.rarity-jackpot{color:#e3b341!important;text-shadow:none!important}
.inventory-card[data-rarity],.skin-card[data-rarity]{box-shadow:none!important}
.v22-skin-art{filter:drop-shadow(0 6px 10px #0007)!important}
/* Price health stays because it is functional, but not glass/neon. */
.v22-price-status{background:var(--v22-pro-panel)!important;border-color:var(--v22-pro-border)!important;box-shadow:none!important;backdrop-filter:none!important}
.v22-price-status>span i{box-shadow:none!important}.v22-price-status>span.live i{animation:none!important}
/* Built-in staff panels are the only admin UI now. */
.admin-console,.moderator-console{max-width:1180px;margin-inline:auto}
.admin-tabs,.moderator-toolbar nav{background:#0d1117!important;border:1px solid var(--v22-pro-border)!important;border-radius:6px!important;padding:3px!important}
.admin-tabs button,.moderator-toolbar nav button{border-radius:5px!important}
.admin-tabs button.active,.moderator-toolbar nav button.active{background:#21262d!important;color:var(--v22-pro-text)!important}
@media(max-width:800px){.topbar{padding-inline:10px!important}.home-stage,.arena-wrap,.cases-page,.inventory-page,.upgrader-page,.operation-page,.settings-page,.admin-page,.moderation-page{padding-inline:12px!important}}

/* V22 media + case-flow repair */
html.v22-modal-open,html.v22-modal-open body{overflow:hidden!important}
.case-spin-backdrop,.case-reveal-backdrop,.case-preview-backdrop{position:fixed!important;inset:0!important;z-index:120000!important;width:100vw!important;height:100dvh!important;min-height:100dvh!important;margin:0!important;padding:16px!important;display:grid!important;place-items:center!important;overflow:hidden!important;background:rgba(3,8,12,.82)!important;backdrop-filter:blur(10px)!important}
.case-spinner,.case-batch-reveal,.case-preview-modal{position:relative!important;inset:auto!important;margin:0!important;width:min(1240px,calc(100vw - 32px))!important;max-width:1240px!important;max-height:calc(100dvh - 32px)!important;overflow:auto!important;overscroll-behavior:contain!important;border-radius:16px!important;box-shadow:0 24px 90px rgba(0,0,0,.62)!important}
.case-spinner{width:min(1080px,calc(100vw - 32px))!important}
.case-spinner-stack{max-height:min(68dvh,660px)!important;overflow:auto!important;padding-right:4px!important}
.case-batch-reveal>div:not(.case-reveal-actions){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;gap:10px!important}
.case-batch-reveal>div:not(.case-reveal-actions)>article{min-width:0!important;max-width:none!important}
.case-batch-reveal .skin-image,.case-batch-reveal article img{max-height:150px!important;object-fit:contain!important}
.case-reveal-actions{position:sticky!important;bottom:0!important;z-index:3!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;padding-top:12px!important;background:linear-gradient(180deg,transparent,#0d151b 30%)!important}
.case-reveal-actions button{min-height:48px!important;border-radius:9px!important;font-weight:900!important}
.case-reveal-actions .case-sell-all{border-color:#45b777!important;background:#133023!important;color:#7ce6a6!important}
.v22-site-confirm{position:fixed;inset:0;z-index:150000;display:grid;place-items:center;padding:18px;background:rgba(3,8,12,.82);backdrop-filter:blur(10px)}
.v22-site-confirm>div{width:min(460px,calc(100vw - 36px));padding:20px;border:1px solid #344750;border-radius:14px;background:#0d151b;box-shadow:0 28px 100px rgba(0,0,0,.7)}
.v22-site-confirm small{display:block;color:#7f939d;font-size:9px;font-weight:900;letter-spacing:.14em}.v22-site-confirm h3{margin:7px 0 8px;font:900 24px var(--font-display);color:#f0f5f7}.v22-site-confirm p{margin:0;color:#aab9c0;font-size:12px;line-height:1.55}.v22-site-confirm footer{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}.v22-site-confirm button{min-height:42px;border:1px solid #3a4c56;border-radius:8px;background:#131e25;color:#dbe4e8;font-size:9px;font-weight:950;letter-spacing:.08em}.v22-site-confirm [data-yes]{border-color:#5b8fa3;background:#19303a;color:#bcecff}.v22-site-confirm [data-yes].danger{border-color:#7b4747;background:#2a1717;color:#ffb4ad}
img[data-image-proxy="1"]{opacity:.98}
@media(max-width:800px){.case-spin-backdrop,.case-reveal-backdrop,.case-preview-backdrop{padding:8px!important}.case-spinner,.case-batch-reveal,.case-preview-modal{width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important}.case-reveal-actions{grid-template-columns:1fr 1fr!important}.case-batch-reveal>div:not(.case-reveal-actions){grid-template-columns:repeat(2,minmax(0,1fr))!important}}

.v22-site-prompt input[data-value]{width:100%;height:44px;margin-top:14px;padding:0 12px;border:1px solid #3a4c56;border-radius:8px;background:#0a1116;color:#edf4f6;font:600 12px Inter,sans-serif;outline:none}.v22-site-prompt input[data-value]:focus{border-color:#5b8fa3;box-shadow:0 0 0 3px rgba(91,143,163,.12)}.v22-site-prompt input[data-value].invalid{border-color:#a65353;box-shadow:0 0 0 3px rgba(166,83,83,.12)}


/* V22 real-media recovery: a live case modal must never be clipped by the app shell. */
html.v22-case-layer-active body,html.v22-case-layer-active .site-shell,html.v22-case-layer-active .site-shell main,html.v22-case-layer-active .cases-page{overflow:visible!important;transform:none!important;filter:none!important;perspective:none!important;contain:none!important;isolation:auto!important}
.case-spin-backdrop,.case-reveal-backdrop,.case-preview-backdrop{z-index:500000!important;visibility:visible!important;opacity:1!important}
.case-spin-backdrop .case-spinner,.case-spin-backdrop .case-spinner-window,.case-spin-backdrop .case-spinner-track,.case-reveal-backdrop .case-batch-reveal{visibility:visible!important;opacity:1!important}
.v22-site-confirm{z-index:510000!important}
img[data-image-proxy="1"]{background:transparent!important}

/* V28 RELEASE THEME INTEGRATION
   Keep the clean/professional surface system, but let the equipped theme tint the
   entire product. Home stays strongest; navigation, pages, cases and upgrader use
   a deliberately softer version of the same palette. */
.site-shell[class*="cosmetic-theme-"]{
  --v28-theme-a:var(--v17-a,#f6c945);
  --v28-theme-b:var(--v17-b,#5ac8e6);
  --v28-theme-bg1:var(--v17-1,#071017);
  --v28-theme-bg2:var(--v17-2,#132331);
  --v28-panel:color-mix(in srgb,#161b22 78%,var(--v28-theme-bg1) 22%);
  --v28-panel-2:color-mix(in srgb,#0f141b 76%,var(--v28-theme-bg2) 24%);
  --v28-panel-soft:color-mix(in srgb,#111820 84%,var(--v28-theme-bg2) 16%);
  --v28-border:color-mix(in srgb,#30363d 82%,var(--v28-theme-a) 18%);
  --v28-border-strong:color-mix(in srgb,#30363d 68%,var(--v28-theme-a) 32%);
  --v28-marker:color-mix(in srgb,var(--yellow,#f6c945) 72%,#fff);
  background:
    radial-gradient(ellipse at 9% 5%,color-mix(in srgb,var(--v28-theme-a) 10%,transparent),transparent 34%),
    radial-gradient(ellipse at 92% 58%,color-mix(in srgb,var(--v28-theme-b) 8%,transparent),transparent 40%),
    linear-gradient(135deg,var(--v28-theme-bg1),color-mix(in srgb,var(--v28-theme-bg1) 78%,var(--v28-theme-bg2)),var(--v28-theme-bg1))!important;
}
.site-shell[class*="cosmetic-theme-"] main{background:transparent!important}
.site-shell[class*="cosmetic-theme-"] .topbar{
  background:
    radial-gradient(circle at 12% -80%,color-mix(in srgb,var(--v28-theme-a) 12%,transparent),transparent 42%),
    linear-gradient(90deg,color-mix(in srgb,#0b1016 88%,var(--v28-theme-bg1)),color-mix(in srgb,#0b1016 90%,var(--v28-theme-bg2)))!important;
  border-color:var(--v28-border)!important;
}
.site-shell[class*="cosmetic-theme-"] .side-menu{
  background:
    radial-gradient(circle at 0 0,color-mix(in srgb,var(--v28-theme-a) 16%,transparent),transparent 34%),
    radial-gradient(circle at 100% 65%,color-mix(in srgb,var(--v28-theme-b) 8%,transparent),transparent 38%),
    linear-gradient(160deg,color-mix(in srgb,#0a1117 82%,var(--v28-theme-bg1)),color-mix(in srgb,#0a1117 88%,var(--v28-theme-bg2)))!important;
  border-color:var(--v28-border-strong)!important;
}
.site-shell[class*="cosmetic-theme-"] .side-menu nav button:hover,
.site-shell[class*="cosmetic-theme-"] .side-menu nav button.active{
  background:color-mix(in srgb,var(--v28-panel-2) 86%,var(--v28-theme-a) 14%)!important;
  border-color:var(--v28-border-strong)!important;
}

/* Theme tint for the actual working surfaces. Accent strength stays around 6-12%,
   so dark themes still read as dark instead of turning every card neon. */
.site-shell[class*="cosmetic-theme-"] :is(
  .arena-card,.guess-panel,.case-card,.case-open-count,.case-disclaimer,.case-odds,
  .inventory-card,.skin-card,.inventory-head,.inventory-summary>span,
  .upgrader-console,.upgrade-input,.upgrade-core,.upgrade-target,
  .settings-console,.setting-card,.setting-toggle,.moderator-console,.admin-console,
  .admin-summary article,.leaderboard-section,.my-clips-page,.operation-page>*,
  .v15-modal,.v20-login
){
  background:
    radial-gradient(circle at 10% 0,color-mix(in srgb,var(--v28-theme-a) 7%,transparent),transparent 36%),
    linear-gradient(145deg,var(--v28-panel),var(--v28-panel-2))!important;
  border-color:var(--v28-border)!important;
}
.site-shell[class*="cosmetic-theme-"] .upgrader-page>*{
  background:
    radial-gradient(circle at 88% 8%,color-mix(in srgb,var(--v28-theme-b) 7%,transparent),transparent 34%),
    linear-gradient(145deg,var(--v28-panel),var(--v28-panel-2))!important;
  border-color:var(--v28-border)!important;
}
.site-shell[class*="cosmetic-theme-"] :is(.case-preview-modal,.case-spinner,.case-batch-reveal){
  background:
    radial-gradient(circle at 50% 0,color-mix(in srgb,var(--v28-theme-a) 8%,transparent),transparent 32%),
    linear-gradient(180deg,var(--v28-panel),var(--v28-panel-2))!important;
  border-color:var(--v28-border-strong)!important;
}
.site-shell[class*="cosmetic-theme-"] :is(.case-spinner-stack,.case-spinner-window){
  background:
    linear-gradient(90deg,#0009,transparent 16% 84%,#0009),
    linear-gradient(180deg,color-mix(in srgb,var(--v28-panel-soft) 94%,var(--v28-theme-a) 6%),var(--v28-panel-2))!important;
  border-color:var(--v28-border)!important;
}
.site-shell[class*="cosmetic-theme-"] .case-reveal-actions{
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--v28-panel-2) 95%,var(--v28-theme-a) 5%) 30%)!important;
}
.site-shell[class*="cosmetic-theme-"] :is(.case-spin-backdrop,.case-reveal-backdrop,.case-preview-backdrop){
  background:
    radial-gradient(circle at 50% 36%,color-mix(in srgb,var(--v28-theme-a) 7%,transparent),transparent 34%),
    rgba(3,8,12,.86)!important;
}

/* The landing marker is functional UI, not decoration. Never let a dark theme hide it. */
.case-spinner-window:after{
  width:3px!important;
  background:var(--v28-marker,#fff)!important;
  opacity:1!important;
  box-shadow:0 0 0 1px #000d,0 0 8px 2px var(--yellow,#f6c945),0 0 22px 3px color-mix(in srgb,var(--yellow,#f6c945) 55%,transparent)!important;
}
.spinner-pointer{
  opacity:1!important;
  filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 6px var(--yellow,#f6c945))!important;
}
.spinner-pointer.top{border-top-color:var(--v28-marker,#fff)!important}
.spinner-pointer.bottom{border-bottom-color:var(--v28-marker,#fff)!important}