/* Optional cosmetic theme. Disable #welvura-refresh to restore the original cascade.
   Responsive geometry, state visibility, game effects and scrolling stay with their owners. */
@import url("welvura-refresh-account.css?v=4");
@import url("welvura-refresh-cases.css?v=10");

:root {
  --refresh-bg: #232333;
  --refresh-panel: #303047;
  --refresh-raised: #3a3a55;
  --refresh-input: #272739;
  --refresh-accent: #aa96f4;
  --refresh-text: #f5f3ff;
  --refresh-muted: #b8b6d0;
  --refresh-shadow: 0 8px 24px rgba(14, 12, 30, .12);
  --wv-bg: var(--refresh-bg);
  --wv-bg-deep: #202030;
  --wv-sidebar: var(--refresh-panel);
  --wv-header: var(--refresh-panel);
  --wv-panel: var(--refresh-panel);
  --wv-panel-2: var(--refresh-raised);
  --wv-panel-3: #46445f;
  --wv-input: var(--refresh-input);
  --wv-violet: var(--refresh-accent);
  --wv-violet-2: #8470ec;
  --wv-violet-soft: rgba(170, 150, 244, .14);
  --wv-text: var(--refresh-text);
  --wv-soft: #cfccdf;
  --wv-muted: var(--refresh-muted);
  --muted: var(--refresh-muted);
  --muted-hi: #cfccdf;
  --grad-btn: linear-gradient(115deg, #a34ef4, #7265fd);
  --grad-vio: var(--grad-btn);
  --item-card: #383b5a;
  --item-card-hover: #414362;
  --item-muted: #b8bdd4;
  --card-stage: transparent;
  --wv-shadow: var(--refresh-shadow);
  --wv-shadow-soft: 0 4px 16px rgba(14, 12, 30, .10);
}

/* Chrome: keep the existing brand, ribbon geometry and native mobile navigation. */
html body { color: var(--refresh-text); }
html .top { background: var(--refresh-bg) !important; box-shadow: none !important; border: 0 !important; }
html .rail { background: var(--refresh-panel) !important; box-shadow: none !important; border: 0 !important; }
html .top .online { background: var(--refresh-panel) !important; color: var(--refresh-muted) !important; box-shadow: none !important; }
html .top .meta-plus, html .top .meta-login {
  background: var(--grad-btn) !important; border: 0 !important; border-radius: 11px !important;
  box-shadow: 0 5px 16px rgba(123, 83, 237, .22) !important;
}
html .user-menu, html .tb-dropdown-menu {
  background: var(--refresh-panel) !important; border: 0 !important;
  border-radius: 14px !important; box-shadow: 0 16px 44px rgba(12, 10, 25, .32) !important;
}
html .um-links button { color: var(--refresh-muted) !important; }
html .um-links button svg { color: var(--refresh-accent) !important; }
html .um-links button:hover, html .tb-dropdown-item:hover { background: var(--refresh-raised) !important; color: var(--refresh-text) !important; }
html .um-links .um-out { color: #e4a0af !important; }

/* Shared panels and typography. No generic display/height rules: hidden states stay hidden. */
html #view-upgrade .panel,
html #view-upgrade #wheelPanel.panel.center,
html .profile-card, html .profile-main-panel,
html .doc, html .auth-card, html .case-detail,
html .wd-unavailable-card {
  background: var(--refresh-panel) !important; border: 0 !important;
  border-radius: 16px !important; box-shadow: var(--refresh-shadow) !important;
}
html #view-upgrade .panel-head { border: 0 !important; }
html #view-upgrade .panel-head h2,
html #view-upgrade .mode-title,
html #view-cases .cs-head h2,
html #view-casepage .casepage-title,
html .doc h1, html .doc h2 {
  color: var(--refresh-accent) !important; letter-spacing: -.015em !important;
}
html #view-upgrade .panel-head h2 { font-weight: 650 !important; }
html #view-upgrade .panel-head > span,
html .acc-total b, html .acc-badge {
  border: 0 !important; background: var(--refresh-raised) !important;
  color: #d8cef9 !important; box-shadow: none !important;
}
html #view-upgrade .tools input,
html .tb-search, html .tb-price,
html .pane-input-wrap, html .pf-field input,
html .promo-redeem-input-wrap {
  border: 0 !important; background: var(--refresh-input) !important;
  border-radius: 10px !important; box-shadow: none !important;
  color: var(--refresh-text) !important;
}
html input::placeholder { color: #aca8c2 !important; opacity: 1; }
html .pane-input-wrap input { background: transparent !important; }
html .case-toolbar, html .acc-tabs, html .profile-tabs-nav,
html .hist-subtabs, html .upgrade-workflow {
  background: var(--refresh-panel) !important; border: 0 !important;
  border-radius: 14px !important; box-shadow: none !important;
}
html .tb-btn, html .tb-dropdown-btn,
html #view-upgrade .chips button {
  background: var(--refresh-raised) !important; border: 0 !important;
  color: var(--refresh-muted) !important; border-radius: 10px !important;
  box-shadow: none !important;
}
html .acc-tab, html .profile-tab-btn, html .hist-sub {
  border: 0 !important; box-shadow: none !important; color: var(--refresh-muted) !important;
}
html .acc-tab.on, html .profile-tab-btn.active, html .hist-sub.on,
html .upgrade-workflow button[aria-pressed="true"],
html #view-upgrade .chips button.on {
  background: #aa96f4 !important; color: #221d38 !important;
  border-radius: 10px !important; box-shadow: none !important;
}
html .hist-sub.on .hs-n { background: #343047 !important; color: #fff !important; border: 0 !important; }
html .tb-btn.on, html .tb-dropdown-item.selected { background: #4c426e !important; color: #eee7ff !important; }
html .btn-go:not(:disabled), html .meta-login:not(:disabled) {
  background: var(--grad-btn) !important; border: 0 !important;
  box-shadow: 0 6px 18px rgba(118, 75, 221, .2) !important;
}
html .btn-sellall { box-shadow: none !important; }

/* One material for every item family. Rarity belongs to the root, never a footer. */
html #view-upgrade .skin,
html #view-inv .icard,
html #view-casepage .drop-tile,
html .spinner .spinner-item,
html #histList .ccard, html #histList .htile,
html .ticker .drop-card {
  background-color: var(--item-card) !important;
  background-image: linear-gradient(145deg, rgba(170,150,244,.035), transparent 60%) !important;
  border: 0 !important; border-radius: 12px !important; box-shadow: none !important;
}
html .ticker .drop-card {
  background-image: url("ui/offgrader-mark-subtle.svg"), linear-gradient(145deg, rgba(170,150,244,.035), transparent 60%) !important;
  background-position: 13px center, 0 0 !important;
  background-size: 60px auto, auto !important;
  background-repeat: no-repeat, no-repeat !important;
}
html #view-upgrade .skin::before,
html #view-inv .icard::before,
html #view-casepage .drop-tile::before,
html .spinner .spinner-item::before,
html #histList .ccard::before, html #histList .htile::before {
  inset: 0 !important; width: auto !important; height: auto !important;
  background: radial-gradient(ellipse 125% 85% at 50% 108%, color-mix(in srgb, var(--rc, var(--c, var(--r-common))) 58%, transparent), color-mix(in srgb, var(--rc, var(--c, var(--r-common))) 22%, transparent) 48%, transparent 78%) !important;
  opacity: .9 !important; border: 0 !important;
}
html #view-upgrade .skin::after,
html #view-inv .icard::after,
html #view-casepage .drop-tile::after,
html .spinner .spinner-item::after,
html #histList .ccard::after, html #histList .htile::after {
  height: 6px !important; left: 23% !important; right: 23% !important;
  border: 0 !important; border-radius: 6px 6px 0 0 !important;
}
html #view-upgrade .skin .art,
html #view-upgrade .skin:hover .art,
html #view-upgrade .skin.sel .art,
html #view-inv .icard .ic-art,
html #view-inv .icard .ic-top,
html #view-inv .icard .ic-w, html #view-inv .icard .ic-sn,
html #view-casepage .drop-tile b, html #view-casepage .drop-tile small,
html .spinner-item b, html .drop-card .drop-copy,
html .duel-slot .duel-art, html .duel-slot .duel-copy small {
  background-color: transparent !important; border: 0 !important; box-shadow: none !important;
}
html #view-upgrade .skin .n,
html #view-inv .icard .ic-w,
html #view-casepage .drop-tile b,
html .spinner-item .wn, html .drop-card .drop-copy small,
html #histList .htile-w { color: var(--item-muted) !important; }
html #view-upgrade .skin .s,
html #view-inv .icard .ic-sn,
html #view-casepage .drop-tile small,
html .spinner-item .sn, html .drop-card .drop-name,
html #histList .htile-s { color: var(--refresh-text) !important; }
html #view-upgrade .skin.sel,
html #view-upgrade .skin.sel:hover {
  background-color: color-mix(in srgb, var(--rc) 10%, var(--item-card)) !important;
  transform: none !important;
  box-shadow: inset 0 0 0 2px var(--rc), inset 0 0 24px color-mix(in srgb, var(--rc) 14%, transparent) !important;
}
html #view-upgrade .skin.sel .art::before { content: none !important; display: none !important; }
html #view-upgrade .balance-slider-panel { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html #view-upgrade .duel-slot {
  background-color: var(--item-card) !important;
  border: 0 !important; box-shadow: none !important; border-radius: 12px !important;
}
html #view-inv .ic-get { background: rgba(170,150,244,.19) !important; color: #eee5ff !important; }
html #view-inv .ic-sell { background: rgba(199,103,126,.22) !important; color: #ffc3d0 !important; }

/* Catalogue: preserve actual artwork and its current full-bleed composition. */
html #view-cases .gcard, html #view-cases .gcard.bare {
  background: var(--refresh-raised) !important; border: 0 !important;
  border-radius: 16px !important; box-shadow: var(--refresh-shadow) !important;
}
html #view-cases .gcard-bar { background: transparent !important; }
html #view-cases .gcard-name, html #view-cases .gcard.bare .gcard-name { color: #d3c4ff !important; }
html #view-cases .card-heart { background: var(--refresh-panel) !important; box-shadow: none !important; }
html #view-cases .gcard.faved .card-heart { background: #aa5280 !important; color: #fff !important; }
html #view-casepage .casepage-head { border: 0 !important; box-shadow: none !important; }
html #view-casepage .cp-idle-case,
html #view-casepage .spinner-frame { background-color: var(--refresh-panel) !important; }
html #view-casepage .cp-qty button,
html #view-casepage .back-btn, html #view-casepage .casepage-fav {
  border: 0 !important; box-shadow: none !important;
}
html #view-casepage .casepage-drops h2 { color: var(--refresh-accent) !important; }

/* Compact histories: shared nested surfaces, keep status tints and the rarity connector. */
html #histList .ucard { background: var(--refresh-panel) !important; border: 0 !important; }
html #histList .ucard.win { box-shadow: inset 0 0 42px rgba(53,214,127,.06) !important; }
html #histList .ucard.lose { box-shadow: inset 0 0 42px rgba(255,112,112,.06) !important; }
html #histList .uc-foot, html #histList .uc-footer { background: var(--refresh-input) !important; border: 0 !important; }
html #ipane-wd .wd-info-item,
html #ipane-wd .wd-hist-row,
html #ipane-wd .wd-hist-empty,
html #ipane-wd .wd-hist-empty-card {
  background: var(--refresh-panel) !important; color: var(--refresh-muted) !important;
  border: 0 !important; box-shadow: none !important;
}
html #ipane-wd .wdh-detail-cell, html #ipane-wd .wdh-collapse,
html #ipane-wd .whr-img {
  background: var(--refresh-raised) !important; border: 0 !important; box-shadow: none !important;
}
html #ipane-wd .wdh-detail-cell small { color: var(--refresh-muted) !important; }

/* Finance: local tokens cover all wizard steps, including price and process screens. */
html #view-deposit {
  --dp-card: var(--refresh-panel); --dp-sub: var(--refresh-raised);
  --dp-inset: var(--refresh-input); --dp-text: var(--refresh-text);
  --dp-soft: #cfccdf; --dp-muted: var(--refresh-muted);
}
html #view-deposit .deposit-page-title h1,
html #view-withdraw .wd-head h1 { color: var(--refresh-accent) !important; text-transform: none !important; }
html #view-deposit .deposit-page-title,
html #view-withdraw .wd-head {
  background: var(--refresh-panel) !important;
  border-radius: 16px !important; padding: 20px 24px !important;
  border: 0 !important; box-shadow: none !important;
}
html #view-deposit .deposit-page-title > span { background: var(--refresh-raised) !important; color: var(--refresh-accent) !important; box-shadow: none !important; }
html #view-deposit .deposit-payments-panel,
html #view-deposit .deposit-amount-panel { border-radius: 16px !important; }
html #view-deposit .deposit-page-method { border-radius: 12px !important; }
html #view-withdraw {
  --wd-card: var(--refresh-panel); --wd-sub: var(--refresh-raised);
  --wd-panel-hi: var(--refresh-raised); --wd-panel-lo: var(--refresh-raised);
  --wd-cell: var(--refresh-raised); --wd-input: var(--refresh-input);
}
html #view-withdraw .wd-card,
html #view-withdraw .wd-process { box-shadow: var(--refresh-shadow) !important; border-radius: 16px !important; }
html #view-withdraw .wd-avrow, html #view-withdraw .wd-last,
html #view-withdraw .wd-steptile,
html #view-withdraw .wd-confirm-row { box-shadow: none !important; }
html #view-withdraw .wd-sub, html #view-withdraw .wd-head p,
html #view-withdraw .wd-avtext span,
html #view-withdraw .wd-lasttext span { color: var(--refresh-muted) !important; }
html #view-withdraw .wd-step:not(.on):not(.done) { color: var(--refresh-muted) !important; }
html #view-withdraw .wd-price-fields > small,
html #view-withdraw .wd-process-summary-cell small { color: var(--refresh-muted) !important; }
html #view-withdraw .wd-confirm-row { background: var(--refresh-raised) !important; }
html #view-withdraw .wd-confirm-row:hover { background: #45425f !important; }

/* Account, transactions, promo forms and information pages. */
html .profile-stat-box, html .sound-toggle-item,
html .promo-creator-card, html .promo-redeem-strip {
  background: var(--refresh-raised) !important; border: 0 !important;
  border-radius: 12px !important; box-shadow: none !important;
}
html .profile-nickname, html .ps-val { color: var(--refresh-text) !important; }
html .ps-label, html .pane-field-label, html .pc-desc,
html .profile-id-row, html .pbc-empty { color: var(--refresh-muted) !important; }
html .profile-tabs-nav { border-radius: 12px !important; }
html .tx-table th { color: var(--refresh-muted) !important; background: var(--refresh-input) !important; }
html .tx-table td { border-color: transparent !important; }
html .doc { padding: clamp(20px, 3vw, 36px) !important; color: #d3d0e2 !important; }
html .doc h1 { font-size: clamp(23px, 3vw, 32px) !important; line-height: 1.25 !important; }
html .doc h2 { line-height: 1.4 !important; }
html .doc a { color: #c9b8ff !important; text-underline-offset: 3px; }
html .doc details { background: var(--refresh-raised) !important; border: 0 !important; border-radius: 12px !important; }
html .doc summary { color: var(--refresh-text) !important; }
html .overlay .auth-card {
  background: var(--refresh-panel) !important; color: var(--refresh-text) !important;
  border: 0 !important; border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(12,10,25,.35) !important;
}
html .auth-card-top { background: var(--refresh-input) !important; border: 0 !important; }
html .auth-card-bottom { background: var(--refresh-panel) !important; }
html .overlay, html #authModal { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html .auth-title { color: var(--refresh-accent) !important; }
html .auth-disclaimer { color: var(--refresh-muted) !important; }
html .auth-disclaimer a { color: #cfbbff !important; }
html .wd-unavailable-card { background: var(--refresh-panel) !important; }
html .site-footer { background: var(--refresh-panel) !important; border: 0 !important; box-shadow: none !important; }
html .site-footer .site-footer-link { color: var(--refresh-muted) !important; }
html .site-footer .site-footer-link:hover { color: var(--refresh-text) !important; }

/* Page rhythm and type share the same hierarchy across account and public views. */
html main .page-head {
  background: var(--refresh-panel) !important; border: 0 !important;
  border-radius: 16px !important; padding: 22px 26px !important;
  margin: 0 0 18px !important;
}
html main .page-head h1 {
  color: var(--refresh-accent) !important; font-size: clamp(24px, 2.2vw, 30px) !important;
  font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -.025em !important;
}
html main .page-head p { color: var(--refresh-muted) !important; line-height: 1.6 !important; margin-top: 6px !important; }
html main > :is(#view-faq, #view-tos, #view-privacy, #view-cookie) { max-width: 1040px !important; }
html main > :is(#view-faq, #view-tos, #view-privacy, #view-cookie) .doc { max-width: none !important; width: 100% !important; }
html .doc { font-size: 15px !important; line-height: 1.8 !important; }
html .doc h3 { color: #d4c5ff !important; font-size: 18px !important; line-height: 1.5 !important; }
html #view-faq .doc { padding: 0 !important; background: transparent !important; box-shadow: none !important; }
html #view-faq .doc details { margin: 0 0 10px !important; background: var(--refresh-panel) !important; }
html #view-faq .doc details[open] { background: var(--refresh-raised) !important; }
html #view-faq .doc summary { padding: 18px 22px !important; font-size: 15px !important; line-height: 1.5 !important; }
html #view-faq .doc details p { margin: 0 !important; padding: 0 22px 22px !important; color: #d3d0e2 !important; }
html #view-upgrade .panel-head h2, html #view-upgrade .mode-title { font-size: 16px !important; }
html .acc-tab { text-transform: none !important; letter-spacing: 0 !important; }
html .btn-go:disabled,
html #view-upgrade #go:disabled,
html #view-deposit #depositPageSubmit:disabled {
  background: #424158 !important; color: #b8b4cd !important;
  opacity: 1 !important; filter: none !important; box-shadow: none !important;
  cursor: not-allowed !important;
}
html .btn-go:disabled::before,
html #view-upgrade #go:disabled::before,
html #view-deposit #depositPageSubmit:disabled::before { display: none !important; }

/* The duel cards remain equal-height with either empty or populated text. */
html #view-upgrade #wheelPanel.panel.center > .duel-summary {
  align-items: stretch !important; margin: 0 !important;
}
html #view-upgrade #wheelPanel.panel.center .duel-summary .duel-slot {
  align-self: stretch !important; display: flex !important; flex-direction: column !important;
  justify-content: center !important; margin: 0 !important;
  border: 0 !important; box-shadow: none !important;
}
html #view-upgrade #wheelPanel .duel-copy { color: #c5bddc !important; }
html #view-upgrade #upgradeInventory > .balance-slider-panel {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
html #view-upgrade .skin.sel { outline: none !important; }
html #view-upgrade .skin.sel:focus-visible { outline: 2px solid #d9caff !important; outline-offset: -4px !important; }
html #view-upgrade .skin::after { background: var(--rc, var(--r-common)) !important; opacity: 1 !important; }
html .profile-main-panel { align-self: start !important; min-height: 0 !important; }
html .profile-layout { gap: 20px !important; }
html .profile-tabs-nav { margin-bottom: 24px !important; }
html .profile-tab-btn { font-size: 14px !important; font-weight: 600 !important; }
html .settings-section-divider { border: 0 !important; background: transparent !important; margin: 22px 0 !important; }
html .sound-settings-grid { gap: 12px !important; }
html .profile-best-card .pbc-content { border: 0 !important; box-shadow: none !important; }

/* Large, readable payment choices instead of a mostly empty equal-height column. */
html #view-deposit .deposit-page { max-width: 1040px !important; }
html #view-deposit .deposit-page-grid { align-items: start !important; gap: 20px !important; }
html #view-deposit .deposit-payments-panel { height: auto !important; align-self: start !important; }
html #view-deposit .deposit-payments-panel,
html #view-deposit .deposit-amount-panel { padding: 24px !important; min-height: 0 !important; }
html #view-deposit .deposit-page-methods { grid-template-columns: 1fr !important; gap: 12px !important; }
html #view-deposit .deposit-page-method {
  min-height: 88px !important; padding: 16px 44px 16px 16px !important; gap: 16px !important;
}
html #view-deposit .deposit-method-logo { width: 48px !important; height: 48px !important; flex: 0 0 48px !important; border-radius: 12px !important; }
html #view-deposit .deposit-method-logo svg { width: 30px !important; height: 30px !important; }
html #view-deposit .deposit-page-method b { font-size: 16px !important; }
html #view-deposit .deposit-page-method small { font-size: 13px !important; line-height: 1.5 !important; color: #b8b6d0 !important; }
html #view-deposit .deposit-page-method:has(input:checked) {
  background: #514669 !important; box-shadow: inset 4px 0 0 #aa96f4 !important;
}
html #view-deposit .deposit-page-presets { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
html #view-deposit .deposit-page-presets button { min-height: 44px !important; font-size: 13px !important; }
html #view-deposit .deposit-block-title h2, html #view-deposit .deposit-amount-title h2 { font-size: 16px !important; }
html #view-deposit .deposit-checkout-column { gap: 14px !important; }

@media (min-width: 1200px) {
  html #view-upgrade .upgrade-grid { min-height: 0 !important; }
  html #view-upgrade #wheelPanel.panel.center { gap: 10px !important; padding: 16px !important; }
  html #view-upgrade #wheelPanel.panel.center > .wheel-stage {
    width: min(100%, clamp(208px, 18vw, 256px)) !important; margin: 0 auto !important;
  }
  html #view-upgrade .panel:not(.center) .skins { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html #view-upgrade :is(.skin, .skin:hover, .skin.sel, .skin.sel:hover) { min-height: 160px !important; }
  html #view-upgrade #wheelPanel.panel.center .duel-summary .duel-slot { min-height: 104px !important; }
  html #view-upgrade #wheelPanel.panel.center .duel-art { height: 44px !important; }
  html #view-upgrade #wheelPanel.panel.center .duel-art img { max-height: 44px !important; }
}
@media (min-width: 961px) {
  html .profile-layout { grid-template-columns: 280px minmax(0, 1fr) !important; }
  html .profile-main-panel { padding: 26px !important; }
}
@media (max-width: 760px) {
  html main .page-head { padding: 18px !important; border-radius: 14px !important; }
  html #view-faq .doc summary { padding: 16px !important; }
  html #view-faq .doc details p { padding: 0 16px 18px !important; }
  html .doc { font-size: 14px !important; }
  html #view-deposit .deposit-payments-panel,
  html #view-deposit .deposit-amount-panel { padding: 16px !important; }
  html #view-deposit .deposit-page-method { min-height: 76px !important; gap: 12px !important; }
  html #view-deposit .deposit-page-method b { font-size: 15px !important; }
  html .profile-tab-btn { font-size: 12px !important; }
}

@media (hover: hover) and (pointer: fine) {
  html #view-upgrade .skin:not(.sel):hover,
  html #view-inv .icard:hover,
  html #view-casepage .drop-tile:hover,
  html #histList .ccard:hover, html #histList .htile:hover {
    background-color: color-mix(in srgb, var(--rc, var(--c, var(--r-common))) 9%, var(--item-card-hover)) !important;
    background-image: linear-gradient(145deg, rgba(170,150,244,.1), transparent 60%) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--rc, var(--c, var(--r-common))) 12%, rgba(14,12,30,.15)) !important;
  }
  html #view-cases .gcard:hover { box-shadow: 0 10px 24px rgba(14,12,30,.24) !important; }
}

@media (max-width: 620px) {
  html #view-inv #ipane-wd .wdh-collapse { height: 44px !important; min-height: 44px !important; }
}

/* Shared dialogs and footer use the same spacing and text hierarchy as pages. */
html #userMenu { padding: 6px !important; }
html #userMenu .um-links button {
  min-height: 48px !important; padding: 12px 14px !important;
  border-radius: 10px !important; font-size: 14px !important;
}
html #userMenu .um-links .um-out { margin-top: 4px !important; }
html .overlay .wd-unavailable-card {
  padding: 32px 28px !important;
  background: var(--refresh-panel) !important;
  box-shadow: 0 20px 60px rgba(12, 10, 25, .32) !important;
}
html .wd-unavailable-card::before { display: none !important; content: none !important; }
html .wd-unavailable-card h2 {
  color: var(--refresh-text) !important;
  font-size: 26px !important; line-height: 1.25 !important;
  letter-spacing: -.025em !important; font-weight: 700 !important;
}
html .wd-unavailable-card > p { color: var(--refresh-muted) !important; line-height: 1.65 !important; }
html .wd-unavailable-icon {
  width: 60px !important; height: 60px !important;
  background: #4b354c !important; color: #f4a9b8 !important;
  font-size: 30px !important; box-shadow: none !important;
}
html .wd-unavailable-card .wd-unavailable-support,
html .wd-unavailable-card .support-email {
  background: var(--refresh-raised) !important; border: 0 !important;
  border-radius: 12px !important; min-height: 48px !important;
  color: #d6c8ff !important; box-shadow: none !important;
}
html .wd-unavailable-card .support-email { font-size: 16px !important; }
html .support-mail-icon { color: var(--refresh-accent) !important; }
html .overlay .auth-card-top {
  padding: 24px !important; min-height: 112px !important; height: auto !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
html .auth-card .auth-brand-wrap { margin: 0 !important; padding: 0 !important; }
html .auth-card .auth-top-logo { width: 190px !important; max-width: 100% !important; height: auto !important; }
html .auth-card .auth-card-bottom { padding: 26px !important; }
html .auth-card .auth-title { margin: 0 0 22px !important; font-size: 26px !important; line-height: 1.25 !important; }
html .auth-card .auth-btns-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px !important; margin-bottom: 20px !important; }
html .auth-card .auth-btn-icon {
  width: 100% !important; min-width: 0 !important; height: 56px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 8px !important; padding: 10px !important; border-radius: 12px !important;
  border: 0 !important; font-size: 13px !important; font-weight: 600 !important;
}
html .auth-card .auth-btn-icon svg { width: 22px !important; height: 22px !important; flex: 0 0 22px; }
html .auth-card .auth-btn-icon::after { content: attr(title); position: static !important; font: inherit; }
html .auth-card .auth-google { color: #302b40 !important; }
html .auth-card .auth-tg { color: #fff !important; }
html .auth-card .auth-disclaimer { margin: 0 !important; font-size: 13px !important; line-height: 1.7 !important; }
html .auth-card .auth-disclaimer a { text-decoration: underline; text-underline-offset: 3px; }
html .site-footer { padding-top: 28px !important; padding-inline: 28px !important; }
html .site-footer .site-footer-columns { margin-left: 0 !important; gap: 28px !important; }
html .site-footer .site-footer-title { color: var(--refresh-accent) !important; font-size: 14px !important; font-weight: 600 !important; margin-bottom: 8px !important; }
html .site-footer .site-footer-link { font-size: 14px !important; line-height: 1.6 !important; }
html .site-footer .site-footer-list { gap: 8px !important; }
html .site-footer .site-footer-logo:hover { transform: none !important; }
@media (max-width: 960px) {
  html .site-footer { flex-direction: column !important; gap: 24px !important; }
  html .site-footer .site-footer-columns { width: 100%; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  html .site-footer { padding-top: 24px !important; padding-inline: 20px !important; }
  html .site-footer .site-footer-columns { grid-template-columns: 1fr; gap: 20px !important; }
  html .site-footer .site-footer-link { display: flex; align-items: center; min-height: 44px !important; padding: 8px 0 !important; }
  html .site-footer .site-footer-list { gap: 0 !important; }
  html .overlay .wd-unavailable-card { padding: 28px 20px !important; }
  html .auth-card .auth-card-bottom { padding: 22px 20px !important; }
}

/* Controls stay still; feedback is a small color change, not a ripple or lift. */
html button > .ripple { display: none !important; animation: none !important; }
html body :is(button, .deposit-page-method, .wd-upload) {
  transition-property: background-color, color, border-color !important;
  transition-duration: 100ms !important;
  transition-timing-function: ease !important;
}
html body :is(.btn-go, .btn-fast, .btn-alt, .btn-ghost, .meta-plus, .meta-avatar, .meta-login,
  .auth-close, .auth-btn-icon, .mini, .tb-btn, .ic-get, .ic-sell, .btn-sellall,
  .wd-upload, .wd-avatar-choice, .wd-offer, .wd-detail-close, .wd-unavailable-close,
  .wd-unavailable-support, .chips button, .deposit-page-presets button,
  .wd-price-copy-field button, .site-footer-nav button, .rail .tab svg):is(:hover, :active, :not(:hover)),
html #view-deposit .deposit-page-method,
html #view-deposit .deposit-page-presets button:is(:hover, :active, :not(:hover)),
html #view-deposit .deposit-page-submit,
html #view-deposit .deposit-page-submit:hover:not(:disabled),
html #view-casepage:not(.is-opening):not(.has-result) :is(#cpOpen, #cpFast),
html #view-casepage:not(.is-opening):not(.has-result) :is(#cpOpen, #cpFast):is(:hover, :active),
html #view-casepage.has-result :is(#cpSell, #cpAgain),
html #view-casepage.has-result :is(#cpSell, #cpAgain):is(:hover, :active) {
  transition: background-color var(--refresh-control-duration, 100ms) ease, color var(--refresh-control-duration, 100ms) ease, border-color var(--refresh-control-duration, 100ms) ease !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}
html body :is(.btn-go, .btn-fast, .btn-alt)::before,
html #view-casepage:not(.is-opening):not(.has-result) #cpFast::before {
  content: none !important; display: none !important;
}
html #go.btn-go.spinning { animation: none !important; }
html #view-casepage:not(.is-opening):not(.has-result) #cpFast:hover {
  background: linear-gradient(135deg, #f3c55f 0%, #e7a73f 58%, #da8e31 100%) !important;
}
html body :is(.meta-plus, .meta-login, .auth-btn-icon, .mini, .tb-btn,
  .btn-go, .btn-alt, .ic-get, .ic-sell, .btn-sellall):active:not(:disabled) {
  filter: brightness(.97) !important;
}
@media (prefers-reduced-motion: reduce) {
  html body { --refresh-control-duration: 0s; }
  html body :is(button, .deposit-page-method, .wd-upload) { transition: none !important; }
}

/* Clear keyboard focus is intentional, unlike decorative one-pixel panel borders. */
html :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid #d9caff !important; outline-offset: 3px !important;
}
html .pane-input-wrap:focus-within, html .tb-search:focus-within {
  box-shadow: 0 0 0 2px #aa96f4 !important;
}
@media (max-width: 760px) {
  html #view-deposit .deposit-page-title,
  html #view-withdraw .wd-head { padding: 16px !important; border-radius: 14px !important; }
  html #view-deposit .deposit-page-title h1 { line-height: 1.2 !important; }
  html .doc { padding: 20px 16px !important; border-radius: 14px !important; }
  html .site-footer { border-radius: 14px 14px 0 0 !important; }
}
@media (max-width: 760px) and (min-height: 700px) and (orientation: portrait) {
  html #view-upgrade #wheelPanel.panel.center {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  html #view-upgrade #wheelPanel.panel.center > .mode-row,
  html #view-upgrade #wheelPanel.panel.center > .wheel-stage,
  html #view-upgrade #wheelPanel.panel.center > .duel-summary,
  html #view-upgrade #wheelPanel.panel.center > #go { grid-column: 1 / -1 !important; }
  html #view-upgrade #wheelPanel.panel.center > .wheel-stage {
    width: min(100%, 10rem) !important;
    margin: 2px auto !important;
  }
  html #view-upgrade #wheelPanel.panel.center > .chips {
    grid-column: auto !important; min-width: 0 !important; gap: 4px !important;
  }
  html #view-upgrade #wheelPanel.panel.center > .chips button { padding-inline: 2px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html #view-cases .gcard:hover .gcard-art > img,
  html #view-cases .gcard:hover .gcard-art > img.art-hero {
    transform: none !important; transition: none !important;
  }
}

/* Minimal upgrader panels and the approved artwork-first card material. */
html #view-upgrade .panel,
html #view-upgrade #wheelPanel.panel.center {
  background: #303047 !important; border-radius: 12px !important;
  border: 0 !important; box-shadow: none !important;
}
html #view-upgrade .panel .panel-head,
html #view-upgrade #wheelPanel .mode-row {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
html #view-upgrade .panel .panel-head h2,
html #view-upgrade #wheelPanel .mode-title {
  color: #aa96f4 !important; font-size: 18px !important;
  font-weight: 600 !important; letter-spacing: 0 !important;
}
html #view-upgrade .panel .panel-head > span {
  background: #3c3a54 !important; color: #bcb0e8 !important;
  border-radius: 6px !important; padding: 5px 7px !important; font-size: 11px !important;
}
html #view-upgrade .tools input { background: #272739 !important; border-radius: 8px !important; }
html #view-upgrade .panel > .panel-foot { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html #view-upgrade #wheelPanel .chips button {
  background: #3b3b55 !important; color: #b8b0cd !important;
  border-radius: 7px !important; box-shadow: none !important;
}
html #view-upgrade #wheelPanel .chips button.on {
  background: #aa96f4 !important; color: #28213b !important;
}
html #view-upgrade #wheelPanel #go { border-radius: 9px !important; }
html #view-upgrade :is(.skin, .skin:hover, .skin.sel, .skin.sel:hover) {
  aspect-ratio: .74 !important; height: auto !important; min-height: 0 !important;
  padding: 10px 8px 14px !important;
  grid-template-rows: auto minmax(3.5rem, 1fr) auto auto !important;
}
html #view-upgrade :is(.skin, .skin:hover, .skin.sel, .skin.sel:hover)::before {
  background: radial-gradient(ellipse 130% 100% at 50% 100%, color-mix(in srgb, var(--rc, var(--r-common)) 32%, transparent), transparent 78%) !important;
  opacity: 1 !important;
}
html #view-upgrade :is(.skin, .skin:hover, .skin.sel, .skin.sel:hover)::after {
  left: 24% !important; right: 24% !important; height: 5px !important;
}
html #view-upgrade :is(.skin, .skin:hover, .skin.sel, .skin.sel:hover) .art {
  background-image: url("ui/offgrader-mark-subtle.svg") !important;
  background-position: center !important; background-repeat: no-repeat !important;
  background-size: 72% auto !important; background-color: transparent !important;
}
html #view-upgrade :is(.skin, .skin:hover, .skin.sel, .skin.sel:hover) .art img {
  inset: 0 !important; width: 100% !important; height: 100% !important;
  object-fit: contain !important; max-width: none !important; max-height: none !important;
  filter: drop-shadow(0 5px 7px rgba(8, 10, 20, .22)) !important;
}
@media (min-width: 1200px) {
  html #view-upgrade #wheelPanel.panel.center > .wheel-stage { width: min(100%, 220px) !important; }
}
@media (max-width: 760px) {
  html #view-upgrade .panel .panel-head h2,
  html #view-upgrade #wheelPanel .mode-title { font-size: 17px !important; }
  html #view-upgrade :is(.skin, .skin:hover, .skin.sel, .skin.sel:hover) { padding: 8px 6px 12px !important; }
}