/*
 * GAM User Area — Glass shell + balance pill + toast stack.
 *
 * Depends on assets/css/gam-design-system.css (--gam-* tokens).
 * Loaded only on the 5 WC My-Account endpoints (signup, manage, cash,
 * voting, referral) and the dashboard. Append-only — does NOT redefine
 * existing classes.
 *
 * Mobile-first; sidebar collapses to off-canvas <640px.
 */

/* ============================================================
   Local extension tokens (glass + glow), inherit from base theme.
   ============================================================ */

:root {
    /* Solid surfaces — clean, minimalist. No blur/glass effects. */
    --gam-ua-glass-bg:     #ffffff;
    --gam-ua-glass-border: #e2e8f0;
    --gam-ua-glass-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);

    /* Shell background — flat, no gradients */
    --gam-ua-bg-fallback:  #f1f5f9;

    /* Sidebar */
    --gam-ua-sidebar-w:    188px;
    --gam-ua-sidebar-w-mob: 86vw;
    --gam-ua-content-max: 1080px;

    /* Focus ring */
    --gam-ua-glow: 0 0 0 3px var(--gam-accent-ring);
}

@media (prefers-color-scheme: dark) {
    :root {
        --gam-ua-glass-bg:     #1e293b;
        --gam-ua-glass-border: #334155;
        --gam-ua-glass-shadow: 0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
        --gam-ua-bg-fallback:  #0f172a;
    }
}
.gam-force-dark {
    --gam-ua-glass-bg:     #1e293b;
    --gam-ua-glass-border: #334155;
    --gam-ua-glass-shadow: 0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
    --gam-ua-bg-fallback:  #0f172a;
}
/* Force-light always overrides OS dark-mode — must come after dark media query. */
.gam-force-light {
    --gam-ua-glass-bg:     #ffffff;
    --gam-ua-glass-border: #e2e8f0;
    --gam-ua-glass-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --gam-ua-bg-fallback:  #f1f5f9;
}

/* ============================================================
   Glass primitive — reusable surface.
   ============================================================ */

.gam-glass {
    background: var(--gam-ua-glass-bg);
    border: 1px solid var(--gam-ua-glass-border);
    border-radius: var(--gam-radius-md, 8px);
    box-shadow: var(--gam-ua-glass-shadow);
}

/* ============================================================
   Shell layout — sidebar + main with topbar.
   ============================================================ */

.gam-ua-shell {
    position: relative;
    display: grid;
    grid-template-columns: var(--gam-ua-sidebar-w) 1fr;
    gap: 0;
    min-height: calc(100vh - 220px);
    background: var(--gam-ua-bg-fallback);
    border: none;
    border-radius: 0;
    overflow: visible;
    color: var(--gam-text);
    font-family: var(--gam-font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

.gam-ua-shell *,
.gam-ua-shell *::before,
.gam-ua-shell *::after { box-sizing: border-box; }

/* Hidden checkbox drives the off-canvas sidebar on mobile. */
.gam-ua-nav-toggle-input { position: absolute; opacity: 0; pointer-events: none; }

/* ============================================================
   Sidebar
   ============================================================ */

.gam-ua-sidebar {
    align-self: stretch;
    position: sticky;
    top: 0;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 5;
    border-right: 1px solid var(--gam-ua-glass-border);
    border-radius: 0;
    border-top: none;
    border-bottom: none;
    border-left: none;
    box-shadow: none;
    background: var(--gam-ua-glass-bg);
}

.gam-ua-brand {
    display: flex;
    align-items: center;
    gap: var(--gam-space-2, 8px);
    padding: 0 var(--gam-space-2, 8px) var(--gam-space-3, 12px);
    border-bottom: 1px solid var(--gam-border);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.gam-ua-brand__mark {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--gam-accent);
    flex: 0 0 auto;
}
.gam-ua-brand__name {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--gam-text);
}

.gam-ua-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gam-ua-nav__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    color: var(--gam-text-2);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid transparent;
    transition: background-color 120ms ease, color 120ms ease;
}
.gam-ua-nav__item:hover,
.gam-ua-nav__item:focus-visible {
    color: var(--gam-text);
    background: color-mix(in srgb, var(--gam-text) 6%, transparent);
    outline: none;
}
.gam-ua-nav__item.is-active {
    color: var(--gam-accent);
    background: color-mix(in srgb, var(--gam-accent) 9%, transparent);
    border-color: transparent;
    font-weight: 600;
}
.gam-ua-nav__icon {
    flex: 0 0 auto;
    width: 20px;
    text-align: center;
    font-size: 1rem;
    line-height: 1.4;
}

/* ============================================================
   Main + topbar
   ============================================================ */

.gam-ua-main {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    background: var(--gam-ua-bg-fallback);
}

.gam-ua-content {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 auto;
}

.gam-ua-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    position: sticky;
    top: 0;
    z-index: 4;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--gam-ua-glass-border);
    box-shadow: none;
    background: var(--gam-ua-glass-bg);
}
.gam-ua-topbar__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gam-text);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.01em;
}
.gam-ua-topbar__right {
    display: flex;
    align-items: center;
    gap: var(--gam-space-3, 12px);
    flex: 0 0 auto;
}

.gam-ua-user {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gam-text-2);
    font-size: 0.9rem;
}
.gam-ua-user__avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--gam-border);
}
.gam-ua-user__name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gam-ua-topbar__logout {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    color: var(--gam-text-3, #64748b);
    text-decoration: none;
    font-size: 1rem;
    transition: background 150ms ease, color 150ms ease;
    margin-left: -4px;
}
.gam-ua-topbar__logout:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* ============================================================
   Balance pill — auto-updated by gam-balance-bus.js
   ============================================================ */

.gam-balance-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 6px 10px;
    border-radius: 8px;
    background: #16a34a;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.82rem;
    text-decoration: none;
    border: 1px solid #15803d;
    box-shadow: 0 1px 3px rgba(22,163,74,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
    transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
    white-space: nowrap;
}
.gam-balance-pill:hover,
.gam-balance-pill:focus-visible {
    background: #15803d;
    box-shadow: 0 3px 10px rgba(22,163,74,0.35);
    transform: translateY(-1px);
    color: #fff;
    outline: none;
}
.gam-balance-pill__icon {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75rem; line-height: 1;
    flex: 0 0 auto;
}
.gam-balance-pill__icon::after { content: "💎"; font-size: 0.65rem; }
.gam-balance-pill__amount { font-variant-numeric: tabular-nums; font-weight: 700; }
.gam-balance-pill__label  { opacity: 0.8; font-size: 0.78em; font-weight: 500; }

.gam-balance-pill.is-pulsing {
    animation: gam-balance-pulse 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes gam-balance-pulse {
    0%   { transform: scale(1);    filter: brightness(1); }
    25%  { transform: scale(1.08); filter: brightness(1.3); }
    60%  { transform: scale(0.98); filter: brightness(1); }
    100% { transform: scale(1);    filter: brightness(1); }
}

/* ============================================================
   Toast stack (used by PR-2..PR-5; safe placeholder in PR-1)
   ============================================================ */

.gam-toast-stack {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
    pointer-events: none;
}
.gam-toast-stack > .gam-toast { pointer-events: auto; }

/* Individual toast bubbles. Variants: success | error | info (default). */
.gam-toast {
    min-width: 220px;
    max-width: 360px;
    padding: 12px 16px 12px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--gam-text);
    background: var(--gam-surface);
    border: 1px solid var(--gam-border);
    box-shadow: 0 10px 30px -6px rgba(0,0,0,0.25), 0 4px 8px rgba(0,0,0,0.08);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transform: translateY(8px);
    opacity: 0;
    animation: gam-toast-in 220ms ease-out forwards;
}
.gam-toast.is-leaving {
    animation: gam-toast-out 200ms ease-in forwards;
}
.gam-toast__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
}
.gam-toast--success { border-color: rgba(16,185,129,0.45); }
.gam-toast--success .gam-toast__icon { background: rgba(16,185,129,0.15); color: #059669; }
.gam-toast--error   { border-color: rgba(239,68,68,0.45); }
.gam-toast--error   .gam-toast__icon { background: rgba(239,68,68,0.15);  color: #dc2626; }
.gam-toast--info    .gam-toast__icon { background: rgba(99,102,241,0.15); color: #4f46e5; }
.gam-toast__msg     { flex: 1 1 auto; min-width: 0; word-wrap: break-word; }
.gam-toast__close {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    border-radius: 4px;
}
.gam-toast__close:hover { opacity: 1; }

@keyframes gam-toast-in {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes gam-toast-out {
    from { transform: translateY(0);   opacity: 1; }
    to   { transform: translateY(-8px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .gam-toast,
    .gam-toast.is-leaving { animation-duration: 1ms; }
}

/* ============================================================
   Hamburger toggle (mobile only)
   ============================================================ */

.gam-ua-nav-toggle-btn {
    display: none;
    width: 36px; height: 36px;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--gam-border);
    flex: 0 0 auto;
}
.gam-ua-nav-toggle-btn span {
    display: block;
    width: 18px; height: 2px;
    background: var(--gam-text);
    border-radius: 2px;
    transition: transform 200ms ease, opacity 200ms ease;
}
.gam-ua-nav-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 6;
    cursor: pointer;
}

/* ============================================================
   Responsive — collapse to off-canvas at <= 768px
   ============================================================ */

@media (max-width: 768px) {
    .gam-ua-shell {
        grid-template-columns: 1fr;
    }
    .gam-ua-nav-toggle-btn { display: inline-flex; }

    .gam-ua-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: var(--gam-ua-sidebar-w-mob);
        max-width: 320px;
        z-index: 7;
        transform: translateX(-105%);
        transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
        border-radius: 0 8px 8px 0;
        overflow-y: auto;
    }
    .gam-ua-nav-toggle-input:checked ~ .gam-ua-sidebar { transform: translateX(0); }
    .gam-ua-nav-toggle-input:checked ~ .gam-ua-nav-scrim { display: block; }

    .gam-ua-topbar { position: static; }
    .gam-ua-user__name { display: none; }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    .gam-ua-nav__item,
    .gam-balance-pill,
    .gam-ua-sidebar { transition: none !important; }
    .gam-balance-pill.is-pulsing { animation: none !important; }
}

/* ============================================================
   Dashboard welcome hero (PR-2)
   Used by render_my_account_dashboard().
   ============================================================ */

.gam-ua-welcome {
    display: flex;
    align-items: center;
    gap: var(--gam-space-4, 16px);
    padding: var(--gam-space-5, 20px) var(--gam-space-5, 20px);
    margin-bottom: var(--gam-space-4, 16px);
    flex-wrap: wrap;
}
.gam-ua-welcome__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid var(--gam-ua-glass-border);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    flex: 0 0 auto;
    object-fit: cover;
}
.gam-ua-welcome__text {
    flex: 1 1 auto;
    min-width: 0;
}
.gam-ua-welcome__title {
    margin: 0 0 4px;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--gam-text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gam-ua-welcome__subtitle {
    margin: 0;
    color: var(--gam-text-2);
    font-size: 0.95rem;
}

@media (max-width: 540px) {
    .gam-ua-welcome { gap: 12px; padding: 16px; }
    .gam-ua-welcome__avatar { width: 48px; height: 48px; }
    .gam-ua-welcome__title { font-size: 1.2rem; }
    .gam-ua-welcome__subtitle { font-size: 0.85rem; }
    .gam-ua-welcome .gam-balance-pill { margin-left: auto; }
}

/* ============================================================
   Staggered entrance — applied to a container; its direct
   children fade+slide in sequentially. Cheap (compositor-only).
   ============================================================ */

.gam-ua-stagger-in > * {
    opacity: 0;
    transform: translateY(8px);
    animation: gam-ua-stagger-fade 380ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.gam-ua-stagger-in > *:nth-child(1) { animation-delay: 0ms; }
.gam-ua-stagger-in > *:nth-child(2) { animation-delay: 70ms; }
.gam-ua-stagger-in > *:nth-child(3) { animation-delay: 140ms; }
.gam-ua-stagger-in > *:nth-child(4) { animation-delay: 210ms; }
.gam-ua-stagger-in > *:nth-child(5) { animation-delay: 280ms; }
.gam-ua-stagger-in > *:nth-child(n+6) { animation-delay: 340ms; }

@keyframes gam-ua-stagger-fade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gam-ua-stagger-in > * {
        opacity: 1;
        transform: none;
        animation: none;
    }
}

/* ============================================================
   Glass-mode tweaks for existing stat cards (PR-2)
   When .gam-glass is added to .gam-card, drop its old solid
   background so the frost shows through; keep the accent border.
   ============================================================ */

.gam-card.gam-glass {
    /* gam-design-system.css gives .gam-card a solid surface; override
       to let the glass come through, but only when both classes coexist. */
    background: var(--gam-ua-glass-bg);
}
.gam-card.gam-glass.gam-card--accent-top {
    /* Preserve the accent top-border when glass is overlaid. */
    border-top-width: 3px;
}

/* ============================================================
   Password strength meter (PR-3)
   Used by signup form. Fully progressive — without JS, the bar
   simply doesn't render (width 0).
   ============================================================ */

.gam-pwstrength {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.gam-pwstrength__bar {
    flex: 1 1 auto;
    height: 6px;
    background: color-mix(in srgb, var(--gam-text-3) 25%, transparent);
    border-radius: 999px;
    overflow: hidden;
}
.gam-pwstrength__fill {
    display: block;
    width: 0;
    height: 100%;
    background: var(--gam-text-3);
    border-radius: 999px;
    transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1),
                background-color 240ms ease;
}
.gam-pwstrength__label {
    flex: 0 0 auto;
    min-width: 56px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gam-text-2);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Score-driven coloring of bar + label */
[data-gam-pwstrength][data-gam-pwstrength-score="1"] .gam-pwstrength__fill { background: var(--gam-error); }
[data-gam-pwstrength][data-gam-pwstrength-score="2"] .gam-pwstrength__fill { background: var(--gam-warning); }
[data-gam-pwstrength][data-gam-pwstrength-score="3"] .gam-pwstrength__fill { background: var(--gam-info); }
[data-gam-pwstrength][data-gam-pwstrength-score="4"] .gam-pwstrength__fill { background: var(--gam-success); }
[data-gam-pwstrength][data-gam-pwstrength-score="1"] .gam-pwstrength__label { color: var(--gam-error); }
[data-gam-pwstrength][data-gam-pwstrength-score="2"] .gam-pwstrength__label { color: var(--gam-warning); }
[data-gam-pwstrength][data-gam-pwstrength-score="3"] .gam-pwstrength__label { color: var(--gam-info); }
[data-gam-pwstrength][data-gam-pwstrength-score="4"] .gam-pwstrength__label { color: var(--gam-success); }

@media (prefers-reduced-motion: reduce) {
    .gam-pwstrength__fill { transition: none; }
}

/* ============================================================
   Cashpoints transfer — busy state on submit (PR-4)
   ============================================================ */

[data-gam-cashtransfer-submit].is-busy {
    cursor: progress;
    opacity: 0.85;
    position: relative;
}
[data-gam-cashtransfer-submit].is-busy::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: gam-spin 700ms linear infinite;
}
@keyframes gam-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    [data-gam-cashtransfer-submit].is-busy::after { animation: none; }
}

/* ============================================================
   REDESIGN 2025 — hide WC default sidebar on all account pages.
   GAM shell provides its own navigation.
   ============================================================ */

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .ct-acount-nav {
    display: none !important;
}
/* Force content to take full flex width — WC sets flex-basis so we override */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce .woocommerce-MyAccount-content {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    flex-basis: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
}
/* Outer WC wrapper: remove the outer padding that creates white margins.
   Also override WordPress is-layout-constrained which sets width: --theme-block-width
   (narrower than viewport) causing the element to be left-aligned. */
.woocommerce-account .woocommerce,
.woocommerce-account .ct-woo-account {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* ============================================================
   Dark sidebar override — slate/dark always for game portal look.
   Navigation lives on a dark sidebar; content area stays light.
   ============================================================ */

.gam-ua-sidebar {
    background: #1e293b;
    border-right-color: #0f172a;
    align-self: stretch;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
@media (prefers-color-scheme: dark) {
    .gam-ua-sidebar { background: #0f172a; border-right-color: #020617; }
}
.gam-force-dark .gam-ua-sidebar { background: #0f172a; border-right-color: #020617; }

/* Brand area on dark sidebar */
.gam-ua-brand {
    padding-bottom: 16px;
    border-bottom-color: rgba(255,255,255,0.1);
}
.gam-ua-brand__name { color: #f1f5f9; font-size: 0.875rem; }
.gam-ua-brand__sub  { font-size: 0.68rem; color: #64748b; font-weight: 500; letter-spacing: 0.04em; margin-top: 1px; }

/* Brand logo block (RO badge) */
.gam-ua-brand__logo {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    letter-spacing: 0.02em;
    flex: 0 0 auto;
    box-shadow: 0 2px 8px rgba(37,99,235,0.5);
}

/* Nav items on dark sidebar */
.gam-ua-nav__item {
    color: #94a3b8;
    padding: 9px 12px;
}
.gam-ua-nav__item:hover,
.gam-ua-nav__item:focus-visible {
    color: #f1f5f9;
    background: rgba(255,255,255,0.08);
}
.gam-ua-nav__item.is-active {
    color: #ffffff;
    background: rgba(37,99,235,0.28);
    border-color: transparent;
    border-left: 3px solid #2563eb;
    padding-left: 9px; /* compensate for 3px border */
}
/* Nav icon — emoji, not tiny dot */
.gam-ua-nav__icon {
    width: 1.4rem; height: auto;
    border-radius: 0; background: none;
    margin: 0; opacity: 1;
    font-size: 1.05rem; line-height: 1;
    flex: 0 0 1.4rem; text-align: center;
}

/* Sidebar footer — avatar + username + logout */
.gam-ua-sidebar__footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; gap: 8px;
}
.gam-ua-sidebar__avatar {
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    flex: 0 0 auto;
}
.gam-ua-sidebar__userinfo { flex: 1 1 auto; min-width: 0; }
.gam-ua-sidebar__username {
    font-size: 0.78rem; font-weight: 600; color: #f1f5f9;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gam-ua-sidebar__role { font-size: 0.68rem; color: #64748b; }
.gam-ua-sidebar__logout {
    flex: 0 0 auto; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; color: #64748b;
    text-decoration: none; font-size: 1rem;
    transition: background 150ms ease, color 150ms ease;
}
.gam-ua-sidebar__logout:hover { background: rgba(239,68,68,0.2); color: #f87171; }

/* ============================================================
   Light mode overrides — when gam-force-light is applied.
   All the dark-sidebar rules above are overridden back to light.
   ============================================================ */

.gam-force-light .gam-ua-sidebar {
    background: var(--gam-ua-glass-bg, #ffffff);
    border-right-color: var(--gam-ua-glass-border, #e2e8f0);
    scrollbar-color: rgba(0,0,0,0.12) transparent;
}
.gam-force-light .gam-ua-brand {
    border-bottom-color: var(--gam-border, #e2e8f0);
}
.gam-force-light .gam-ua-brand__name { color: var(--gam-text, #0f172a); }
.gam-force-light .gam-ua-brand__sub  { color: var(--gam-text-2, #475569); }
.gam-force-light .gam-ua-nav__item  { color: var(--gam-text-2, #475569); }
.gam-force-light .gam-ua-nav__item:hover,
.gam-force-light .gam-ua-nav__item:focus-visible {
    color: var(--gam-text, #0f172a);
    background: color-mix(in srgb, var(--gam-text, #0f172a) 6%, transparent);
}
.gam-force-light .gam-ua-nav__item.is-active {
    color: var(--gam-accent, #2563eb);
    background: color-mix(in srgb, var(--gam-accent, #2563eb) 9%, transparent);
    border-left-color: var(--gam-accent, #2563eb);
}
.gam-force-light .gam-ua-sidebar__footer {
    border-top-color: var(--gam-border, #e2e8f0);
}
.gam-force-light .gam-ua-sidebar__avatar {
    border-color: var(--gam-border-2, #cbd5e1);
}
.gam-force-light .gam-ua-sidebar__username { color: var(--gam-text, #0f172a); }
.gam-force-light .gam-ua-sidebar__role     { color: var(--gam-text-2, #475569); }
.gam-force-light .gam-ua-sidebar__logout   { color: var(--gam-text-2, #475569); }
.gam-force-light .gam-ua-sidebar__logout:hover {
    background: var(--gam-error-pale, #fee2e2);
    color: var(--gam-error, #ef4444);
}
.gam-force-light .gam-ua-topbar__logout { color: var(--gam-text-2, #475569); }
.gam-force-light .gam-ua-topbar__logout:hover {
    background: var(--gam-error-pale, #fee2e2);
    color: var(--gam-error, #ef4444);
}

.gam-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 680px)  { .gam-stat-grid { grid-template-columns: 1fr; } }
@media (min-width: 681px) and (max-width: 900px) { .gam-stat-grid { grid-template-columns: repeat(2, 1fr); } }

.gam-stat-value {
    font-size: 2rem; font-weight: 800; color: var(--gam-text);
    font-variant-numeric: tabular-nums; line-height: 1.1; margin: 6px 0 4px;
}
.gam-stat-label {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--gam-text-2); font-weight: 600;
}
.gam-stat-sub { font-size: 0.8rem; color: var(--gam-text-2); margin-bottom: 12px; }

/* ============================================================
   Account cards (manage page — gam-account-card-modern)
   ============================================================ */

.gam-account-card-modern {
    background: var(--gam-surface, #fff);
    border: 1px solid var(--gam-border, #e2e8f0);
    border-radius: 10px; overflow: hidden;
}
.gam-account-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--gam-border, #e2e8f0);
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    background: var(--gam-surface-2, #f8fafc);
}
.gam-account-header.vip   { border-top: 3px solid var(--gam-gold, #d97706); }
.gam-account-header.banned { border-top: 3px solid var(--gam-error, #ef4444); }
.gam-account-name {
    margin: 0 0 6px; font-size: 0.95rem; font-weight: 700; color: var(--gam-text);
}
.gam-account-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.gam-badge-active { background: var(--gam-success-pale); color: var(--gam-success); border: 1px solid currentColor; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.gam-badge-banned { background: var(--gam-error-pale);   color: var(--gam-error);   border: 1px solid currentColor; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.gam-badge-vip    { background: var(--gam-gold-pale);    color: var(--gam-gold);    border: 1px solid currentColor; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.gam-badge-info   { background: var(--gam-info-pale);    color: var(--gam-info);    border: 1px solid currentColor; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.gam-char-count   { font-size: 0.8rem; color: var(--gam-text-2); font-weight: 500; white-space: nowrap; }

.gam-account-stats {
    padding: 12px 18px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    border-bottom: 1px solid var(--gam-border);
}
@media (max-width: 560px) { .gam-account-stats { grid-template-columns: 1fr 1fr; } }
.gam-stat-item { display: flex; align-items: center; gap: 8px; }
.gam-stat-icon  { font-size: 1.2rem; flex: 0 0 auto; }
.gam-stat-content { min-width: 0; }
.gam-stat-item .gam-stat-label { font-size: 0.68rem; color: var(--gam-text-2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.gam-stat-item .gam-stat-value { font-size: 0.95rem; font-weight: 700; color: var(--gam-text); font-variant-numeric: tabular-nums; }

.gam-account-info-compact {
    padding: 10px 18px;
    display: flex; flex-direction: column; gap: 3px;
    border-bottom: 1px solid var(--gam-border);
}
.gam-info-row   { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; }
.gam-info-label { color: var(--gam-text-2); flex: 0 0 auto; min-width: 90px; }
.gam-info-value { color: var(--gam-text); font-weight: 500; }

/* Characters section */
.gam-characters-section,
.gam-password-section {
    padding: 12px 18px;
    border-bottom: 1px solid var(--gam-border);
}
.gam-characters-section:last-child,
.gam-password-section:last-child { border-bottom: none; }
.gam-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.gam-section-header h4 { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--gam-text); }
.gam-toggle-btn {
    background: none; border: 1px solid var(--gam-border); border-radius: 6px;
    padding: 3px 8px; cursor: pointer; color: var(--gam-text-2); font-size: 0.72rem;
}
.gam-toggle-btn:hover { background: var(--gam-surface-2); }
.gam-characters-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px;
}
.gam-character-card {
    background: var(--gam-surface-2, #f8fafc);
    border: 1px solid var(--gam-border); border-radius: 8px; padding: 12px;
}
.gam-char-header { margin-bottom: 8px; }
.gam-char-name  { font-weight: 700; font-size: 0.875rem; color: var(--gam-text); }
.gam-char-class { font-size: 0.72rem; color: var(--gam-accent); font-weight: 600; margin-top: 2px; }
.gam-char-stats { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.gam-char-stat  { display: flex; justify-content: space-between; font-size: 0.72rem; }
.gam-char-stat .label { color: var(--gam-text-2); }
.gam-char-stat .value { font-weight: 700; color: var(--gam-text); font-variant-numeric: tabular-nums; }
.gam-btn-fix {
    display: block; width: 100%; padding: 6px 10px;
    background: var(--gam-surface); border: 1px solid var(--gam-border); border-radius: 6px;
    font-size: 0.72rem; color: var(--gam-text); cursor: pointer; text-align: center;
}
.gam-btn-fix:hover { background: var(--gam-warning-pale); border-color: var(--gam-warning); }
.gam-no-chars { color: var(--gam-text-2); font-size: 0.8rem; text-align: center; padding: 8px 0; }
.gam-input-sm {
    width: 100%; padding: 7px 10px;
    border: 1px solid var(--gam-border); border-radius: 6px;
    font-size: 0.8rem; background: var(--gam-surface); color: var(--gam-text);
}
.gam-input-sm:focus { outline: none; border-color: var(--gam-accent); box-shadow: 0 0 0 3px var(--gam-accent-ring); }

/* Password form within account card */
.gam-password-form .gam-form-group { margin-bottom: 10px; }
.gam-password-form label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--gam-text-2); margin-bottom: 4px; }
.gam-password-form input[type="password"] {
    width: 100%; padding: 8px 12px;
    border: 1px solid var(--gam-border); border-radius: 6px;
    font-size: 0.875rem; background: var(--gam-surface); color: var(--gam-text);
}
.gam-password-form input[type="password"]:focus { outline: none; border-color: var(--gam-accent); box-shadow: 0 0 0 3px var(--gam-accent-ring); }
.gam-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 18px; background: var(--gam-accent); color: #fff;
    border: none; border-radius: 8px; font-size: 0.875rem; font-weight: 600;
    cursor: pointer; text-decoration: none; transition: background 160ms ease;
}
.gam-btn-primary:hover  { background: var(--gam-accent-hover); color: #fff; }
.gam-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.gam-btn-secondary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; background: var(--gam-surface); color: var(--gam-accent);
    border: 1px solid var(--gam-border); border-radius: 8px;
    font-size: 0.875rem; font-weight: 600; cursor: pointer; text-decoration: none;
    transition: background 160ms ease, border-color 160ms ease;
}
.gam-btn-secondary:hover { background: var(--gam-accent-pale); border-color: var(--gam-accent); color: var(--gam-accent); }
.gam-accounts-grid { display: flex; flex-direction: column; gap: 16px; }
.gam-manage-empty-page { display: flex; flex-direction: column; gap: 16px; }

/* ============================================================
   Balance hero — cashpoints + voting pages
   ============================================================ */

.gam-balance-hero {
    background: var(--gam-surface); border: 1px solid var(--gam-border);
    border-radius: 10px; padding: 20px 22px; margin-bottom: 16px;
}
.gam-balance-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.balance-icon {
    width: 52px; height: 52px; border-radius: 12px;
    background: var(--gam-accent-pale); color: var(--gam-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; font-weight: 900; flex: 0 0 auto;
}
.gam-vote-icon-badge   { background: var(--gam-arcane-pale); color: var(--gam-arcane); }
.gam-manage-icon-badge { background: var(--gam-success-pale); color: var(--gam-success); }
.balance-content { flex: 1 1 auto; min-width: 0; }
.balance-label    { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gam-text-2); font-weight: 700; margin-bottom: 3px; }
.balance-amount   { font-size: 2.25rem; font-weight: 800; color: var(--gam-text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.balance-subtitle { font-size: 0.8rem; color: var(--gam-text-2); margin-top: 3px; }
.balance-action   { flex: 0 0 auto; }
.gam-btn-topup, .gam-btn-hero {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px; background: var(--gam-accent); color: #fff;
    border: none; border-radius: 8px; font-size: 0.875rem; font-weight: 600;
    text-decoration: none; cursor: pointer; transition: background 160ms ease;
}
.gam-btn-topup:hover, .gam-btn-hero:hover { background: var(--gam-accent-hover); color: #fff; }

/* ============================================================
   Two-column layout (cashpoints, voting)
   ============================================================ */

.gam-two-column-layout {
    display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start;
}
@media (max-width: 900px) { .gam-two-column-layout { grid-template-columns: 1fr; } }
.gam-main-content, .gam-content-card {
    background: var(--gam-surface); border: 1px solid var(--gam-border);
    border-radius: 10px; overflow: hidden; margin-bottom: 16px;
}
.gam-content-card:last-child { margin-bottom: 0; }
.gam-content-card .gam-card-header {
    padding: 13px 18px; border-bottom: 1px solid var(--gam-border); background: var(--gam-surface-2);
    flex-direction: column; align-items: flex-start; gap: 3px;
}
.gam-content-card .gam-card-header h3 {
    margin: 0 0 2px; font-size: 0.9rem; font-weight: 700; color: var(--gam-text);
    background: none; -webkit-text-fill-color: var(--gam-text);
}
.gam-content-card .gam-card-header p { margin: 0; font-size: 0.78rem; color: var(--gam-text-2); }
.gam-content-card .gam-card-body,
.gam-sidebar-content { padding: 16px 18px; }

/* ============================================================
   Forms within the shell
   ============================================================ */

.gam-modern-form .gam-form-field, .gam-field { margin-bottom: 16px; }
.gam-modern-form label, .gam-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.83rem; font-weight: 700; color: var(--gam-text); margin-bottom: 6px;
}
.gam-label-icon  { font-size: 1rem; }
.gam-field-hint  { display: block; font-size: 0.72rem; color: var(--gam-text-2); margin-top: 4px; }
.gam-modern-form select,
.gam-modern-form input[type="number"],
.gam-modern-form input[type="text"],
.gam-modern-form input[type="password"],
.gam-input {
    width: 100%; padding: 10px 14px;
    border: 1px solid var(--gam-border); border-radius: 8px;
    font-size: 0.875rem; background: var(--gam-surface); color: var(--gam-text);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.gam-modern-form select:focus,
.gam-modern-form input:focus,
.gam-input:focus { outline: none; border-color: var(--gam-accent); box-shadow: 0 0 0 3px var(--gam-accent-ring); }
.gam-btn-large {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 22px; background: var(--gam-accent); color: #fff;
    border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 700;
    cursor: pointer; transition: background 160ms ease;
}
.gam-btn-large:hover    { background: var(--gam-accent-hover); color: #fff; }
.gam-btn-large:disabled { opacity: 0.55; cursor: not-allowed; }
.gam-cashtransfer-message { min-height: 16px; margin: 4px 0; }

/* ============================================================
   Voting page — vote site cards
   ============================================================ */

.gam-voting-page, .gam-cash-page { display: flex; flex-direction: column; gap: 16px; }
.gam-vote-sites-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 14px; padding: 16px 18px;
}
.gam-vote-site-card {
    background: var(--gam-surface); border: 1px solid var(--gam-border);
    border-radius: 10px; padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.gam-vote-site-card.available { border-top: 3px solid var(--gam-success); }
.gam-vote-site-card.available:hover { box-shadow: var(--gam-shadow-sm); }
.vote-site-header { display: flex; gap: 10px; align-items: flex-start; }
.vote-site-icon   { font-size: 1.5rem; flex: 0 0 auto; }
.vote-site-name   { font-size: 0.875rem; font-weight: 700; color: var(--gam-text); margin: 0 0 4px; }
.vote-site-reward { display: flex; align-items: center; gap: 4px; font-size: 0.78rem; color: var(--gam-gold); font-weight: 700; }
.vote-site-meta   { display: flex; gap: 10px; flex-wrap: wrap; }
.vote-meta-item   { display: flex; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--gam-text-2); }
.gam-vote-button {
    width: 100%; padding: 10px 14px;
    background: var(--gam-success); color: #fff;
    border: none; border-radius: 8px; font-size: 0.875rem; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background 160ms ease;
}
.gam-vote-button:hover       { background: #059669; }
.gam-vote-button[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* "Coming Soon" vote card */
.gam-vote-coming-soon-card .gam-vote-soon-body { display: flex; gap: 20px; align-items: flex-start; padding: 20px; }
.gam-vote-soon-icon  { flex: 0 0 auto; }
.gam-vp-badge-lg {
    display: flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--gam-arcane-pale); color: var(--gam-arcane);
    font-size: 1rem; font-weight: 900;
}
.gam-vote-soon-title { font-size: 1rem; font-weight: 700; color: var(--gam-text); margin: 0 0 6px; }
.gam-vote-soon-desc  { font-size: 0.875rem; color: var(--gam-text-2); margin: 0 0 14px; }
.gam-vote-perks-row  { display: flex; flex-wrap: wrap; gap: 10px; }
.gam-vote-perk-item  { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--gam-text-2); }
.gam-vote-perk-icon  { color: var(--gam-gold); }

/* ============================================================
   Info cards row (voting tips, cashpoints help)
   ============================================================ */

/* ============================================================
   Cash Shop layout — main + sidebar
   ============================================================ */

/* Top row: Transfer + How to Get CP — equal height, buttons aligned bottom */
.gam-cash-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: stretch;
}
@media (max-width: 780px) { .gam-cash-top-row { grid-template-columns: 1fr; } }

/* Cards inside top-row: flex column so body can fill remaining space */
.gam-cash-top-row .gam-card {
    display: flex;
    flex-direction: column;
}
/* Card bodies inside top-row: flex: 1 + flex column so button reaches bottom */
.gam-cash-top-row .gam-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
/* Form fills vertical space */
.gam-cash-top-row .gam-cash-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* Transfer button pinned to bottom */
.gam-cash-top-row .gam-cash-form .gam-btn-large { width: 100%; margin-top: auto; }
/* How-to list fills vertical space */
.gam-cash-top-row .gam-cash-steps-list { flex: 1; }
/* How-to button pinned to bottom — same size as transfer button */
.gam-cash-top-row .gam-cash-howto-btn {
    margin-top: auto !important;
    padding: 12px 18px !important;
    font-size: 0.875rem !important;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Balance grid below top row */
.gam-cash-balance-grid {
    padding: 10px 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
@media (max-width: 600px) { .gam-cash-balance-grid { grid-template-columns: repeat(2, 1fr); } }

/* Info row: 2 cards */
.gam-cash-info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: stretch;
}
.gam-cash-info-row .gam-card {
    display: flex;
    flex-direction: column;
}
.gam-cash-info-row .gam-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
@media (max-width: 780px) { .gam-cash-info-row { grid-template-columns: 1fr; } }

/* How-to ordered list */
.gam-cash-steps-list {
    margin: 0; padding-left: 20px;
    display: flex; flex-direction: column; gap: 2px;
}
.gam-cash-steps-list li {
    font-size: 0.78rem; color: var(--gam-text-2, #64748b);
    padding: 4px 0;
    border-bottom: 1px solid var(--gam-border, #e2e8f0);
}
.gam-cash-steps-list li:last-child { border-bottom: none; }

/* Rules list */
.gam-cash-rules-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column;
}
.gam-cash-rules-list li {
    font-size: 0.75rem; color: var(--gam-text-2, #64748b);
    padding: 5px 0;
    border-bottom: 1px solid var(--gam-border, #e2e8f0);
}
.gam-cash-rules-list li:last-child { border-bottom: none; }

/* Support card accent */
.gam-cash-support-card { border-left: 3px solid var(--gam-warning, #f59e0b) !important; }
.gam-cash-support-text {
    font-size: 0.75rem; color: var(--gam-text-2, #64748b);
    margin: 0 0 10px; line-height: 1.5;
}

/* Full-width button modifier */
.gam-btn--block { display: flex !important; width: 100%; justify-content: center; }

/* Cash Shop card headers: icon + text inline, left-aligned */
.gam-cash-page .gam-card-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.gam-cash-page .gam-card-header > span:first-child { font-size: 1rem; flex-shrink: 0; }
.gam-cash-page .gam-card-header > span:last-child  { font-size: 0.85rem; font-weight: 700; color: var(--gam-text, #0f172a); }

.gam-info-cards-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; align-items: stretch;
}
.gam-info-card {
    background: var(--gam-surface); border: 1px solid var(--gam-border);
    border-radius: 10px; padding: 16px;
    display: flex; flex-direction: column;
}
.gam-info-card-header, .gam-tip-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.gam-info-card-header h4, .gam-tip-header h4, .gam-info-card h4 {
    margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--gam-text);
}
.info-icon, .tip-icon { font-size: 1.1rem; }
.gam-steps-list { padding-left: 16px; margin: 0; font-size: 0.78rem; color: var(--gam-text-2); line-height: 1.9; }
.gam-info-list  { list-style: none; padding: 0; margin: 0; font-size: 0.78rem; color: var(--gam-text-2); }
.gam-info-list li { display: flex; gap: 6px; padding: 3px 0; }
.list-icon { color: var(--gam-accent); }
.gam-action-card { background: var(--gam-accent-pale); border-color: color-mix(in srgb, var(--gam-accent) 40%, transparent); }
.gam-action-card h4 { color: var(--gam-accent); }
.gam-action-card p  { margin: 6px 0 10px; font-size: 0.78rem; color: var(--gam-text-2); }
.benefits-list { display: flex; flex-direction: column; gap: 4px; }
.benefit-item  { font-size: 0.78rem; color: var(--gam-text-2); }

/* ============================================================
   Cashpoints — accounts balance grid
   ============================================================ */

.gam-accounts-balance-grid { display: flex; flex-direction: column; gap: 8px; }
.gam-balance-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--gam-border);
}
.gam-balance-item:last-child { border-bottom: none; }
.balance-item-icon    { font-size: 1rem; flex: 0 0 auto; }
.balance-item-content { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; }
.balance-item-name    { font-size: 0.875rem; font-weight: 700; color: var(--gam-text); }
.balance-item-amount  { font-size: 0.875rem; font-weight: 700; color: var(--gam-accent); font-variant-numeric: tabular-nums; }
.balance-item-amount span { opacity: 0.7; font-weight: 500; font-size: 0.8em; }

/* ============================================================
   Referral dashboard
   ============================================================ */

.gam-ref-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px;
}
@media (max-width: 560px) { .gam-ref-stats { grid-template-columns: 1fr 1fr; } }
.gam-ref-stat-card {
    background: var(--gam-surface); border: 1px solid var(--gam-border);
    border-radius: 10px; padding: 18px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.gam-ref-stat-icon   { font-size: 1.4rem; }
.gam-ref-stat-number { font-size: 1.75rem; font-weight: 800; color: var(--gam-text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.gam-ref-stat-label  { font-size: 0.72rem; color: var(--gam-text-2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.gam-ref-stat-pending .gam-ref-stat-number { color: var(--gam-warning); }
.gam-ref-stat-success .gam-ref-stat-number { color: var(--gam-success); }

.gam-howto-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px; margin: 12px 0;
}
.gam-howto-step {
    background: var(--gam-surface-2); border: 1px solid var(--gam-border);
    border-radius: 8px; padding: 14px; text-align: center;
}
.gam-howto-icon  { font-size: 1.75rem; margin-bottom: 8px; }
.gam-howto-title { font-size: 0.8rem; font-weight: 700; color: var(--gam-text); margin-bottom: 4px; }
.gam-howto-desc  { font-size: 0.72rem; color: var(--gam-text-2); line-height: 1.5; }
.gam-howto-footer { font-size: 0.78rem; color: var(--gam-text-2); padding: 10px 0 0; border-top: 1px solid var(--gam-border); }

/* ============================================================
   Manage page hero (old balance-hero class)
   ============================================================ */

.gam-manage-hero { margin-bottom: 0; }

/* ============================================================
   Universal compact page header — used on all 6 account pages.
   Uses the system accent color (--gam-accent) as single source.
   ============================================================ */
.gam-page-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--gam-accent, #2563eb) 6%, var(--gam-surface, #fff));
    border: 1px solid color-mix(in srgb, var(--gam-accent, #2563eb) 16%, var(--gam-border, #e2e8f0));
    border-left: 4px solid var(--gam-accent, #2563eb);
    margin-bottom: 14px;
}
.gam-ph-icon {
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 10px;
    background: color-mix(in srgb, var(--gam-accent, #2563eb) 12%, transparent);
    color: var(--gam-accent, #2563eb);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; overflow: hidden;
}
.gam-ph-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.gam-ph-text { flex: 1 1 auto; min-width: 0; }
.gam-ph-title { font-size: 0.95rem; font-weight: 700; color: var(--gam-text, #0f172a); display: block; margin: 0; }
.gam-ph-sub { font-size: 0.75rem; color: var(--gam-text-2, #64748b); display: block; margin-top: 2px; }
.gam-ph-action { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.gam-ph-stat { font-size: 0.8rem; color: var(--gam-text-2, #64748b); white-space: nowrap; }
.gam-ph-stat b { font-size: 1.05rem; font-weight: 700; color: var(--gam-accent, #2563eb); }

/* ── Overview header badges ── */
.gam-ph-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--gam-accent, #2563eb) 10%, var(--gam-surface, #fff));
    border: 1px solid color-mix(in srgb, var(--gam-accent, #2563eb) 20%, var(--gam-border, #e2e8f0));
    color: var(--gam-text-2, #475569);
    white-space: nowrap;
}
.gam-ph-badge b { font-weight: 700; color: var(--gam-accent, #2563eb); }

/* ── Overview bottom 2-column row ── */
.gam-ov-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}
@media (max-width: 640px) {
    .gam-ov-bottom-row { grid-template-columns: 1fr; }
}

/* ── Quick Links list ── */
.gam-ov-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 6px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.gam-ov-link:hover { background: color-mix(in srgb, var(--gam-accent, #2563eb) 6%, transparent); }
.gam-ov-link + .gam-ov-link { border-top: 1px solid var(--gam-border, #e2e8f0); }
.gam-ov-link__icon { font-size: 1.15rem; width: 28px; text-align: center; flex-shrink: 0; }
.gam-ov-link__body { flex: 1 1 auto; min-width: 0; }
.gam-ov-link__body strong { display: block; font-size: 0.82rem; font-weight: 600; color: var(--gam-text, #0f172a); }
.gam-ov-link__body span  { display: block; font-size: 0.72rem; color: var(--gam-text-2, #64748b); margin-top: 1px; }
.gam-ov-link__arr { font-size: 0.85rem; color: var(--gam-text-2, #94a3b8); flex-shrink: 0; }

/* ── Player Guide steps ── */
.gam-ov-guide-item {
    display: flex;
    gap: 10px;
    padding: 8px 0;
}
.gam-ov-guide-item + .gam-ov-guide-item { border-top: 1px solid var(--gam-border, #e2e8f0); }
.gam-ov-guide-step {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--gam-accent, #2563eb);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.gam-ov-guide-item strong { display: block; font-size: 0.82rem; font-weight: 600; color: var(--gam-text, #0f172a); margin-bottom: 2px; }
.gam-ov-guide-item p { margin: 0; font-size: 0.72rem; color: var(--gam-text-2, #64748b); line-height: 1.45; }
.gam-ov-guide-item p a { color: var(--gam-accent, #2563eb); }

/* Override manage-accounts.css gradient text on card headers. */
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--gam-text) !important;
    color: var(--gam-text) !important;
}

/* Quick action buttons — add left-border accent on hover for visual hierarchy */
.gam-quick-action-btn {
    border-left: 3px solid transparent;
    transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.gam-quick-action-btn:hover {
    border-left-color: var(--gam-accent);
    transform: translateX(2px);
}

/* Dashboard welcome section — make avatar larger and add accent ring */
.gam-ua-welcome__avatar {
    border: 2px solid var(--gam-border);
    border-radius: 50%;
}

/* Topbar — subtle bottom shadow to separate from content */
.gam-ua-topbar {
    box-shadow: 0 1px 0 var(--gam-border), 0 4px 8px rgba(0,0,0,0.04);
}

/* Sidebar — ensure the dark bg extends to full shell height via grid stretch */
.gam-ua-shell { align-items: stretch; }

/* Content area top padding for breathing room */
.gam-ua-content { padding-top: 24px; }

/* Transfer Cash/Vote heading: ensure correct text style inside shell */
.gam-ua-shell .gam-card-header h3 {
    background: none !important;
    -webkit-text-fill-color: var(--gam-text) !important;
    color: var(--gam-text) !important;
    font-size: 0.95rem !important;
}
.gam-ua-shell .gam-card-header p {
    color: var(--gam-text-2);
    font-size: 0.8rem;
    margin: 0;
}

/* Welcome back section — make the balance pill inside the welcome card more prominent */
.gam-ua-welcome {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
}
.gam-ua-welcome__info { flex: 1 1 auto; min-width: 0; }
.gam-ua-welcome__name { font-size: 1.2rem; font-weight: 800; color: var(--gam-text); margin-bottom: 3px; }
.gam-ua-welcome__sub  { font-size: 0.82rem; color: var(--gam-text-2); }

/* Stat cards — ensure proper spacing and visual differentiation */
.gam-card--accent-top {
    border-top-width: 3px;
    border-top-style: solid;
}
.gam-card--accent-top:nth-child(1) { border-top-color: var(--gam-accent); }
.gam-card--accent-top:nth-child(2) { border-top-color: var(--gam-arcane, #7c3aed); }
.gam-card--accent-top:nth-child(3) { border-top-color: var(--gam-success); }

/* Account badge (active/banned) — ensure visibility */
.gam-badge-active { background: #d1fae5 !important; color: #065f46 !important; }
.gam-badge-banned { background: #fee2e2 !important; color: #991b1b !important; }
.gam-badge-vip    { background: #fef3c7 !important; color: #92400e !important; }

/* Two-column layout: give it padding so it doesn't bleed to edges */
.gam-two-column-layout { padding-bottom: 8px; }

/* ============================================================
   Account area polish pass: compact overview, centered signup form,
   dynamic brand badge, and softer shadows inside the user shell.
   ============================================================ */

.gam-ua-shell .gam-glass,
.gam-ua-shell .gam-card,
.gam-ua-shell .gam-content-card,
.gam-ua-shell .gam-main-content,
.gam-ua-shell .gam-account-card-modern,
.gam-ua-shell .gam-balance-hero {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

.gam-ua-shell .gam-hero-title,
.gam-ua-shell .gam-hero-content h2,
.gam-ua-shell .gam-balance-card .balance-amount,
.gam-ua-shell .gam-account-name {
    text-shadow: none !important;
}

.gam-ua-shell .gam-hero::before,
.gam-ua-shell .gam-hero::after,
.gam-ua-shell .gam-balance-card::before {
    display: none !important;
}

.gam-ua-brand__logo {
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.22);
    text-transform: uppercase;
}

.gam-ua-brand__text {
    min-width: 0;
}

.gam-ua-brand__name,
.gam-ua-brand__sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gam-balance-pill {
    padding: 5px 11px 5px 9px;
    font-size: 0.8rem;
    box-shadow: 0 1px 2px rgba(22,163,74,0.18);
}

.gam-balance-pill:hover,
.gam-balance-pill:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(22,163,74,0.30);
}

.gam-ua-topbar {
    min-height: 54px;
    box-shadow: 0 1px 0 var(--gam-border) !important;
}

.gam-ua-content {
    padding: 20px 24px 24px;
}

.gam-dashboard-wrapper {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.gam-ua-welcome {
    flex-wrap: nowrap;
    padding: 14px 18px;
    margin-bottom: 14px;
}

.gam-ua-welcome__avatar {
    width: 52px;
    height: 52px;
    box-shadow: none;
}

.gam-ua-welcome__title {
    font-size: 1.12rem;
    letter-spacing: 0;
}

.gam-ua-welcome__subtitle {
    font-size: 0.84rem;
}

.gam-stat-grid {
    gap: 12px;
}

.gam-stat-grid .gam-card-body {
    padding: 16px 18px;
}

.gam-stat-value {
    font-size: 1.65rem;
}

.gam-quick-action-btn {
    min-height: 44px;
}

.gam-create-page {
    max-width: 100%;
    margin: 0;
}

.gam-create-page .gam-hero.gam-create-hero {
    margin-bottom: 14px;
    padding: 16px 18px;
    border: 1px solid var(--gam-border);
    border-radius: 8px;
    background: var(--gam-surface) !important;
    color: var(--gam-text);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

.gam-create-page .gam-hero-inner {
    gap: 16px;
}

.gam-create-page .gam-hero-title {
    color: var(--gam-text) !important;
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 6px;
    text-shadow: none !important;
}

.gam-create-page .gam-hero-subtitle {
    max-width: 660px;
    color: var(--gam-text-2);
    font-size: 0.95rem;
    line-height: 1.55;
}

.gam-create-page .gam-hero-eyebrow {
    margin-bottom: 6px;
}

.gam-create-count {
    min-width: 112px;
    padding: 10px 12px;
    background: var(--gam-accent-pale);
    border-color: color-mix(in srgb, var(--gam-accent) 22%, transparent);
    color: var(--gam-accent);
}

.gam-create-count-number {
    font-size: 1.35rem;
}

.gam-create-count-label {
    font-size: 0.66rem;
}

.gam-create-layout {
    grid-template-columns: 1fr 320px;
    justify-content: stretch;
    gap: 20px;
}

/* Single-column create layout (new) */
.gam-create-single {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gam-create-form-card,
.gam-create-sidebar .gam-card,
.gam-create-tip {
    margin-bottom: 14px;
}

.gam-create-form-card .gam-card-header,
.gam-create-sidebar .gam-card-header {
    padding: 14px 20px;
}

.gam-create-form-card .gam-card-body {
    padding: 20px 24px;
}

.gam-create-sidebar .gam-card-body {
    padding: 16px 20px;
}

.gam-create-form {
    gap: 16px;
}

.gam-create-form label.gam-label {
    font-size: 0.9rem !important;
    font-weight: 700;
    margin-bottom: 6px;
}

.gam-create-form .gam-input {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.95rem !important;
    border-radius: 8px;
}

.gam-create-submit {
    min-height: 46px;
    padding: 10px 24px;
    font-size: 0.95rem !important;
    width: 100%;
}

/* Requirements horizontal row */
.gam-create-rules-row {
    display: flex;
    gap: 0;
    border: 1px solid var(--gam-border, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
    background: var(--gam-surface, #fff);
}
.gam-create-rule-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 0.78rem;
}
.gam-create-rule-item + .gam-create-rule-item {
    border-left: 1px solid var(--gam-border, #e2e8f0);
}
.gam-create-rule-item .gam-create-rules__icon { font-size: 1rem; flex-shrink: 0; }
.gam-create-rule-item strong { display: block; font-weight: 600; color: var(--gam-text, #0f172a); }
.gam-create-rule-item span  { display: block; color: var(--gam-text-2, #64748b); margin-top: 1px; }

/* Existing accounts strip */
.gam-create-existing-card { border-radius: 8px !important; }
.gam-create-existing-body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px !important;
}
.gam-create-existing-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gam-text-2, #64748b);
    white-space: nowrap;
}

.gam-create-rules {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.gam-create-rules li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--gam-border, #e2e8f0);
}

.gam-create-rules li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.gam-create-rules__icon {
    font-size: 1rem;
    flex: 0 0 auto;
    margin-top: 1px;
}

.gam-create-rules li div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gam-create-rules li strong {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gam-text, #0f172a);
    display: block;
}

.gam-create-rules li span {
    font-size: 0.78rem;
    color: var(--gam-text-2, #64748b);
    display: block;
}

/* Inline security tip inside form */
.gam-create-inline-tip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: color-mix(in srgb, #0ea5e9 8%, transparent);
    border: 1px solid color-mix(in srgb, #0ea5e9 25%, transparent);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--gam-text-2, #475569);
    line-height: 1.45;
}

.gam-create-inline-tip__icon {
    font-size: 1rem;
    flex: 0 0 auto;
}

/* Count badge in sidebar card header */
.gam-create-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: var(--gam-accent, #2563eb);
    color: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

/* Card header sub-text */
.gam-card-header-sub {
    font-size: 0.78rem;
    color: var(--gam-text-2, #64748b);
    font-weight: 400;
    margin-top: 1px;
    display: block;
}

/* Form card header: stack title + sub vertically */
.gam-create-form-card .gam-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

@media (max-width: 1024px) {
    .gam-dashboard-wrapper,
    .gam-create-page {
        max-width: 100%;
    }
}

@media (max-width: 820px) {
    .gam-create-layout {
        grid-template-columns: minmax(0, 620px);
    }
}

@media (max-width: 540px) {
    .gam-ua-content {
        padding: 14px;
    }

    .gam-ua-welcome {
        flex-wrap: nowrap;
        padding: 14px;
    }

    .gam-create-page .gam-hero.gam-create-hero {
        padding: 14px;
    }

    .gam-create-page .gam-hero-inner {
        align-items: stretch;
    }
}

/* ============================================================
   User area alignment pass: narrow sidebar + one content rhythm.
   Keeps every account page on the same visual grid.
   ============================================================ */

.gam-ua-shell {
    grid-template-columns: var(--gam-ua-sidebar-w) minmax(0, 1fr);
}

.gam-ua-sidebar {
    padding: 16px 8px;
    gap: 12px;
}

.gam-ua-brand {
    gap: 8px;
    padding: 0 6px 12px;
    letter-spacing: 0;
}

.gam-ua-brand__logo {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 0.62rem;
    box-shadow: none;
}

.gam-ua-brand__name {
    font-size: 0.8rem;
    line-height: 1.2;
}

.gam-ua-brand__sub {
    font-size: 0.58rem;
    letter-spacing: 0;
    line-height: 1.2;
}

.gam-ua-nav {
    gap: 3px;
}

.gam-ua-nav__item {
    gap: 8px;
    min-height: 34px;
    padding: 7px 8px;
    font-size: 0.78rem;
}

.gam-ua-nav__item.is-active {
    padding-left: 7px;
}

.gam-ua-nav__icon {
    flex-basis: 1.18rem;
    width: 1.18rem;
    font-size: 0.95rem;
}

.gam-ua-sidebar__footer {
    gap: 7px;
    padding-top: 10px;
}

.gam-ua-sidebar__avatar {
    width: 30px;
    height: 30px;
}

.gam-ua-sidebar__username {
    font-size: 0.74rem;
}

.gam-ua-sidebar__role {
    font-size: 0.62rem;
}

.gam-ua-content {
    align-items: center;
    padding: 18px 22px 26px;
}

.gam-ua-content > *:not(script):not(style) {
    width: 100%;
    max-width: var(--gam-ua-content-max);
}

.gam-dashboard-wrapper,
.gam-create-page,
.gam-cash-page,
.gam-voting-page,
.gam-referral-wrap,
.gam-accounts-grid,
.gam-manage-empty-page,
.gam-manage-hero {
    width: 100%;
    max-width: var(--gam-ua-content-max);
    margin-left: auto;
    margin-right: auto;
}

.gam-create-page {
    --gam-form-main-w: 100%;
    --gam-form-side-w: 320px;
}

.gam-create-layout {
    grid-template-columns: 1fr var(--gam-form-side-w);
    justify-content: stretch;
    align-items: start;
    gap: 20px;
}

.gam-create-main,
.gam-create-form-card,
.gam-create-form {
    width: 100%;
}

.gam-ua-shell .gam-modern-form,
.gam-ua-shell .gam-password-form {
    max-width: 560px;
}

/* Create account & Cash Shop forms: full width, no cap */
.gam-ua-shell .gam-create-form,
.gam-ua-shell .gam-cash-form {
    max-width: 100%;
}

.gam-ua-shell .gam-modern-form,
.gam-ua-shell .gam-create-form {
    display: grid;
    gap: 12px;
}

.gam-ua-shell .gam-modern-form .gam-form-field,
.gam-ua-shell .gam-create-form .gam-field,
.gam-ua-shell .gam-field {
    margin-bottom: 0;
}

.gam-ua-shell .gam-input,
.gam-ua-shell .gam-modern-form select,
.gam-ua-shell .gam-modern-form input[type="number"],
.gam-ua-shell .gam-modern-form input[type="text"],
.gam-ua-shell .gam-modern-form input[type="password"] {
    min-height: 40px;
    padding: 9px 12px;
    border-radius: 7px;
    font-size: 0.84rem;
}

/* Create form inputs: bigger */
.gam-ua-shell .gam-create-form .gam-input {
    min-height: 50px !important;
    padding: 13px 16px !important;
    font-size: 1rem !important;
    border-radius: 10px !important;
    border-color: var(--gam-border-2, #cbd5e1) !important;
}

.gam-ua-shell .gam-label,
.gam-ua-shell .gam-modern-form label {
    margin-bottom: 5px;
    font-size: 0.8rem;
}

/* Create form labels: bigger */
.gam-ua-shell .gam-create-form .gam-label {
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    color: var(--gam-text, #0f172a) !important;
}

.gam-ua-shell .gam-field-hint {
    margin-top: 4px;
    font-size: 0.7rem;
}

.gam-content-card .gam-card-body,
.gam-sidebar-content,
.gam-main-content .gam-card-body {
    padding: 14px 16px;
}

/* Create form card body: more spacious */
.gam-create-form-card .gam-card-body {
    padding: 28px 32px !important;
}

.gam-content-card .gam-card-header,
.gam-sidebar-content .gam-card-header,
.gam-main-content .gam-card-header {
    padding: 11px 16px;
}

/* Create form card header: bigger */
.gam-create-form-card .gam-card-header {
    padding: 16px 24px !important;
    font-size: 1rem !important;
}

/* Create submit button: full-width, tall, prominent */
.gam-ua-shell .gam-create-submit {
    width: 100% !important;
    min-height: 54px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    border-radius: 10px !important;
    margin-top: 8px !important;
}

.gam-two-column-layout {
    grid-template-columns: minmax(0, 1fr) 288px;
    gap: 16px;
}

.gam-main-content,
.gam-content-card,
.gam-balance-hero,
.gam-account-card-modern,
.gam-ref-stat-card,
.gam-vote-site-card,
.gam-info-card {
    border-radius: 8px;
}

.gam-balance-hero,
.gam-create-page .gam-hero.gam-create-hero,
.gam-ua-welcome {
    padding: 14px 16px;
}

.gam-balance-card {
    gap: 14px;
}

.balance-icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    font-size: 1.15rem;
}

.balance-amount {
    font-size: 1.75rem;
}

.balance-subtitle,
.balance-label {
    font-size: 0.74rem;
}

.gam-btn-topup,
.gam-btn-hero,
.gam-create-submit,
.gam-btn-large {
    min-height: 40px;
    padding: 9px 15px;
    border-radius: 7px;
    font-size: 0.84rem;
}

.gam-vote-sites-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    padding: 14px 16px;
}

@media (max-width: 1180px) {
    .gam-ua-content > *:not(script):not(style),
    .gam-dashboard-wrapper,
    .gam-create-page,
    .gam-cash-page,
    .gam-voting-page,
    .gam-referral-wrap,
    .gam-accounts-grid,
    .gam-manage-empty-page,
    .gam-manage-hero {
        max-width: 100%;
    }
}

@media (max-width: 900px) {
    .gam-create-layout,
    .gam-two-column-layout {
        grid-template-columns: minmax(0, 640px);
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .gam-ua-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .gam-ua-content {
        padding: 14px;
    }
}

/* ============================================================
   HORIZONTAL NAV REDESIGN — sidebar → top nav strip
   Removes the separate left-column dark panel. Navigation moves
   to an integrated horizontal tab bar, content fills full width.
   Overrides all previous sidebar + shell rules via !important.
   ============================================================ */

/* Shell: single column, centered card with max-width */
.gam-ua-shell {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto 1fr !important;
    min-height: 0 !important;
    background: var(--gam-surface, #fff) !important;
    border: 1px solid var(--gam-ua-glass-border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    max-width: 1100px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Sidebar becomes a horizontal nav strip at the top */
.gam-ua-sidebar {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
    align-self: auto !important;
    flex-direction: row !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0 !important;
    background: #1e293b !important;
    border-right: none !important;
    border-bottom: 1px solid #0f172a !important;
    border-left: none !important;
    border-top: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    scrollbar-width: none !important;
    overflow-x: auto !important;
}
.gam-ua-sidebar::-webkit-scrollbar { display: none !important; }

/* Hide brand (logo/site name) — site header already handles this */
.gam-ua-brand {
    display: none !important;
}

/* Hide sidebar footer (avatar/logout) — topbar already has these */
.gam-ua-sidebar__footer {
    display: none !important;
}

/* Nav: horizontal flex row */
.gam-ua-nav {
    flex-direction: row !important;
    gap: 0 !important;
    flex: 1 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}
.gam-ua-nav::-webkit-scrollbar { display: none !important; }

/* Nav items: horizontal tabs */
.gam-ua-nav__item {
    padding: 10px 15px !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    white-space: nowrap !important;
    font-size: 0.82rem !important;
    gap: 6px !important;
    color: rgba(255,255,255,0.6) !important;
    background: transparent !important;
}
.gam-ua-nav__item:hover,
.gam-ua-nav__item:focus-visible {
    color: #fff !important;
    background: rgba(255,255,255,0.07) !important;
    border-bottom-color: rgba(255,255,255,0.25) !important;
    outline: none !important;
}
.gam-ua-nav__item.is-active {
    color: #fff !important;
    background: rgba(96,165,250,0.15) !important;
    border-bottom: 3px solid #60a5fa !important;
    border-left: none !important;
    padding-left: 15px !important;
    font-weight: 600 !important;
}

/* Icons: emoji in horizontal nav */
.gam-ua-nav__icon {
    font-size: 0.88rem !important;
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    background: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
}

/* Topbar: still visible, sits below the nav strip */
.gam-ua-topbar {
    position: static !important;
    padding: 8px 16px !important;
    border-bottom-color: var(--gam-ua-glass-border) !important;
    background: var(--gam-surface, #fff) !important;
    min-height: 44px !important;
}

/* Hide the hamburger — sidebar is always a top strip now */
.gam-ua-nav-toggle-btn { display: none !important; }
.gam-ua-nav-scrim      { display: none !important; }

/* Content area: tighten padding */
.gam-ua-content {
    padding: 16px 20px !important;
    gap: 14px !important;
    background: var(--gam-ua-bg-fallback, #f1f5f9) !important;
}

/* Main area fills full width */
.gam-ua-main {
    background: var(--gam-ua-bg-fallback, #f1f5f9) !important;
    min-width: 0 !important;
}

/* Compact welcome hero */
.gam-ua-welcome {
    padding: 12px 16px !important;
    margin-bottom: 8px !important;
    gap: 12px !important;
    background: var(--gam-surface, #fff) !important;
    border-radius: 8px !important;
    border: 1px solid var(--gam-ua-glass-border) !important;
}
.gam-ua-welcome__title  { font-size: 1.15rem !important; }
.gam-ua-welcome__avatar { width: 44px !important; height: 44px !important; }

/* Compact stat grid */
.gam-stat-grid { gap: 10px !important; }

/* Responsive: very small screens */
@media (max-width: 520px) {
    .gam-ua-nav__label  { display: none; }
    .gam-ua-nav__icon   { font-size: 1.1rem !important; }
    .gam-ua-nav__item   { padding: 10px 12px !important; }
    .gam-ua-content     { padding: 12px !important; }
}

/* Fix: manage-accounts.css adds a global margin-bottom:25px to .gam-card-header.
   Remove it inside the shell so card header sits flush against card body. */
.gam-ua-shell .gam-card-header {
    margin-bottom: 0 !important;
    padding: 12px 16px !important;
}
.gam-ua-shell .gam-card-body {
    padding: 16px !important;
}
/* Quick Actions grid: compact gap */
.gam-ua-shell .gam-quick-actions-grid {
    gap: 10px !important;
}

/* ============================================================
   LIGHT MODE — horizontal nav overrides.
   When admin sets theme_mode=light the shell gets gam-force-light.
   All the dark nav strip colors above are reversed to clean light.
   ============================================================ */

/* Nav strip: white surface, light border */
.gam-force-light .gam-ua-sidebar {
    background: var(--gam-ua-glass-bg, #ffffff) !important;
    border-bottom: 1px solid var(--gam-border, #e2e8f0) !important;
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
}

/* Nav tab items: dark text on light background */
.gam-force-light .gam-ua-nav__item {
    color: var(--gam-text-2, #475569) !important;
    border-bottom-color: transparent !important;
    background: transparent !important;
}
.gam-force-light .gam-ua-nav__item:hover,
.gam-force-light .gam-ua-nav__item:focus-visible {
    color: var(--gam-text, #0f172a) !important;
    background: color-mix(in srgb, var(--gam-text, #0f172a) 5%, transparent) !important;
    border-bottom-color: var(--gam-border-2, #cbd5e1) !important;
}
.gam-force-light .gam-ua-nav__item.is-active {
    color: var(--gam-accent, #2563eb) !important;
    background: color-mix(in srgb, var(--gam-accent, #2563eb) 8%, transparent) !important;
    border-bottom: 3px solid var(--gam-accent, #2563eb) !important;
    border-left: none !important;
    padding-left: 15px !important;
    font-weight: 700 !important;
}

/* Topbar: hide the title (active tab already shows the current section).
   Keep the CP pill + user avatar — they are useful context. */
.gam-force-light .gam-ua-topbar__title {
    display: none !important;
}
/* Lift the topbar right section (CP + user) up into the nav strip row by
   making the topbar itself absolutely positioned relative to the shell.
   This puts CP + username on the SAME horizontal line as the nav tabs. */
.gam-force-light .gam-ua-shell {
    position: relative !important;
}
.gam-force-light .gam-ua-topbar {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    padding: 0 16px !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
}
/* Nav strip: fixed height + reserve right space so tabs don't overlap the pill */
.gam-force-light .gam-ua-sidebar {
    height: 52px !important;
    align-items: center !important;
    padding-right: 220px !important;
}
/* Topbar: same height as nav strip so CP + username are vertically centered */
.gam-force-light .gam-ua-topbar {
    height: 52px !important;
}
/* CP pill + user: proper gap and color */
.gam-force-light .gam-ua-topbar__right {
    gap: 10px !important;
}
.gam-force-light .gam-ua-user {
    color: var(--gam-text-2, #475569) !important;
    font-size: 0.85rem !important;
}
/* Content and main area: light background */
.gam-force-light .gam-ua-content {
    background: var(--gam-ua-bg-fallback, #f1f5f9) !important;
}
.gam-force-light .gam-ua-main {
    background: var(--gam-ua-bg-fallback, #f1f5f9) !important;
}

/* ============================================================
   LIGHT MODE — button color overrides
   Match each button to its card accent color.
   ============================================================ */

/* Vote & Earn: purple/violet (matches Vote Points card top border) */
.gam-force-light .gam-btn--secondary {
    color: #7c3aed !important;
    border-color: #7c3aed !important;
    background: transparent !important;
}
.gam-force-light .gam-btn--secondary:hover {
    background: #f5f3ff !important;
    color: #6d28d9 !important;
    border-color: #6d28d9 !important;
    transform: translateY(-1px) !important;
}

/* Manage Accounts: green (matches Accounts card top border) */
.gam-force-light .gam-btn--ghost {
    color: #059669 !important;
    border-color: #6ee7b7 !important;
    background: transparent !important;
}
.gam-force-light .gam-btn--ghost:hover {
    background: #ecfdf5 !important;
    color: #065f46 !important;
    border-color: #34d399 !important;
    transform: translateY(-1px) !important;
}

/* Quick Actions: each button gets its own accent color via CSS var */
.gam-force-light .gam-quick-action-btn {
    border-left: 3px solid var(--qa-accent, #2563eb) !important;
    background: color-mix(in srgb, var(--qa-accent, #2563eb) 5%, transparent) !important;
    transition: background 140ms ease, transform 140ms ease !important;
}
.gam-force-light .gam-quick-action-btn:hover {
    background: color-mix(in srgb, var(--qa-accent, #2563eb) 12%, transparent) !important;
    transform: translateX(3px) !important;
    border-left-color: var(--qa-accent, #2563eb) !important;
}
.gam-force-light .gam-quick-actions-grid .gam-quick-action-btn:nth-child(1) { --qa-accent: #f59e0b; } /* Make Donation — amber */
.gam-force-light .gam-quick-actions-grid .gam-quick-action-btn:nth-child(2) { --qa-accent: #6366f1; } /* Donations History — indigo */
.gam-force-light .gam-quick-actions-grid .gam-quick-action-btn:nth-child(3) { --qa-accent: #0891b2; } /* Search Game Items — cyan */

/* Ensure [hidden] attribute always hides elements even when CSS sets display:flex/grid.
   manage-accounts.css sets .gam-error { display: flex } which overrides UA [hidden] rule. */
.gam-ua-shell [hidden],
.gam-referral-wrap [hidden],
.gam-cash-page [hidden],
.gam-voting-page [hidden] {
    display: none !important;
}

/* ============================================================
   Manage — Accordion Account List
   ============================================================ */
.gam-accounts-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Each account item */
.gam-acc-item {
    border-radius: 10px;
    border: 1px solid var(--gam-border, #e2e8f0);
    background: var(--gam-surface, #fff);
    overflow: hidden;
    transition: box-shadow 150ms ease, border-color 150ms ease;
}
.gam-acc-item:hover { box-shadow: var(--gam-shadow-sm, 0 1px 4px rgba(0,0,0,.08)); }
.gam-acc-item--banned { border-color: #ef4444; }
.gam-acc-item--vip { border-color: #f59e0b; }

/* ── Header row (always visible) ── */
.gam-acc-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    cursor: pointer;
    user-select: none;
    min-height: 52px;
}
.gam-acc-row:focus-visible { outline: 2px solid var(--gam-accent, #2563eb); outline-offset: -2px; }
.gam-acc-row-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 140px;
}
.gam-acc-row-icon { font-size: 1rem; flex: 0 0 auto; }
.gam-acc-row-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gam-text, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

/* Status tags */
.gam-acc-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.gam-acc-tag--active  { background: #dcfce7; color: #166534; }
.gam-acc-tag--banned  { background: #fee2e2; color: #991b1b; }
.gam-acc-tag--vip     { background: #fef3c7; color: #92400e; }

/* Meta pills row */
.gam-acc-row-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    flex-wrap: wrap;
    min-width: 0;
}
.gam-acc-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    background: var(--gam-surface-2, #f8fafc);
    border: 1px solid var(--gam-border, #e2e8f0);
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--gam-text-2, #64748b);
    white-space: nowrap;
}
.gam-acc-pill--login { font-style: italic; }

/* Chevron */
.gam-acc-chevron {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gam-text-2, #94a3b8);
    font-size: 0.75rem;
}

/* ── Detail panel ── */
.gam-acc-detail {
    border-top: 1px solid var(--gam-border, #e2e8f0);
    background: var(--gam-surface-2, #f8fafc);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Stats grid */
.gam-acc-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.gam-acc-stat-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: var(--gam-surface, #fff);
    border: 1px solid var(--gam-border, #e2e8f0);
    border-radius: 8px;
}
.gam-acc-stat-lbl {
    font-size: 0.7rem;
    color: var(--gam-text-2, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.gam-acc-stat-val {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gam-text, #0f172a);
}
.gam-acc-stat-cell--banned .gam-acc-stat-val { color: #dc2626; }
.gam-acc-stat-cell--vip    .gam-acc-stat-val { color: #d97706; }

/* Sub-sections (Characters, Password) */
.gam-acc-sub {
    background: var(--gam-surface, #fff);
    border: 1px solid var(--gam-border, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
}
.gam-acc-sub-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--gam-text, #0f172a);
    text-align: left;
}
.gam-acc-sub-header:hover { background: var(--gam-surface-2, #f8fafc); transform: none !important; }
.gam-acc-sub-count { font-weight: 500; color: var(--gam-text-2, #64748b); }
.gam-acc-sub-body { padding: 12px 14px; border-top: 1px solid var(--gam-border, #e2e8f0); }

/* Character table inside sub-body */
.gam-chars-table { display: flex; flex-direction: column; gap: 8px; }
.gam-char-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    background: var(--gam-surface-2, #f8fafc);
    border: 1px solid var(--gam-border, #e2e8f0);
    border-radius: 6px;
    flex-wrap: wrap;
}
.gam-char-row-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }
.gam-char-row-name { font-weight: 700; font-size: 0.85rem; color: var(--gam-text, #0f172a); }
.gam-char-row-class { font-size: 0.75rem; color: var(--gam-accent, #2563eb); background: var(--gam-accent-pale, #eff6ff); padding: 1px 6px; border-radius: 4px; }
.gam-char-row-stats { font-size: 0.75rem; color: var(--gam-text-2, #64748b); }
.gam-char-fix-form { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.gam-char-fix-pw {
    padding: 5px 10px; border: 1px solid var(--gam-border, #e2e8f0); border-radius: 6px;
    font-size: 0.78rem; width: 140px; background: var(--gam-surface, #fff); color: var(--gam-text, #0f172a);
}
.gam-char-fix-btn {
    padding: 5px 10px; border: 1px solid var(--gam-border, #e2e8f0); border-radius: 6px;
    font-size: 0.78rem; background: var(--gam-surface, #fff); color: var(--gam-text, #0f172a);
    cursor: pointer; white-space: nowrap;
}
.gam-char-fix-btn:hover { background: var(--gam-surface-2, #f8fafc); }
.gam-acc-empty { font-size: 0.82rem; color: var(--gam-text-2, #64748b); margin: 0; }

/* Password form */
.gam-acc-pwd-form { margin: 0; }
.gam-acc-pwd-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: end;
}
.gam-acc-pwd-btn { white-space: nowrap; align-self: end; }

@media (max-width: 760px) {
    .gam-acc-row { flex-wrap: wrap; }
    .gam-acc-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .gam-acc-pwd-row { grid-template-columns: 1fr; }
    .gam-acc-row-meta { display: none; } /* hide meta on small screens - visible in expanded detail */
}
@media (max-width: 500px) {
    .gam-acc-stats-grid { grid-template-columns: 1fr 1fr; }
    .gam-char-fix-form { flex-direction: column; align-items: stretch; }
    .gam-char-fix-pw { width: 100%; }
}

/* Light-mode overrides for acc items — no colored border on open items */

/* ============================================================
   Cash page — form and balance grid improvements
   ============================================================ */

/* Form lives directly in .gam-content-card (no .gam-card-body) — add padding, remove 560px cap */
.gam-content-card > .gam-modern-form {
    padding: 20px 22px 24px;
    max-width: 100% !important;
}

/* Labels — slightly larger for readability */
.gam-content-card > .gam-modern-form label {
    font-size: 0.875rem;
}

/* Inputs — taller, bigger font */
.gam-content-card > .gam-modern-form select,
.gam-content-card > .gam-modern-form input[type="number"],
.gam-content-card > .gam-modern-form input[type="text"] {
    min-height: 46px;
    font-size: 0.9rem;
    padding: 10px 14px;
}

/* Submit button — full-width, prominent */
.gam-content-card > .gam-modern-form .gam-btn-large {
    width: 100%;
    min-height: 50px;
    font-size: 0.95rem;
    margin-top: 4px;
    justify-content: center;
}

/* Balance grid: accounts list directly in .gam-content-card — add padding */
.gam-content-card > .gam-accounts-balance-grid {
    padding: 14px 18px;
}

/* Redesign accounts balance grid: compact 2-column cards */
.gam-accounts-balance-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.gam-balance-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    background: var(--gam-surface-2, #f8fafc);
    border: 1px solid var(--gam-border, #e2e8f0);
    border-bottom: 1px solid var(--gam-border, #e2e8f0); /* override old reset */
    border-radius: 8px;
}

.balance-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--gam-accent-pale, #eff6ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex: 0 0 auto;
}

.balance-item-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gam-text, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.balance-item-amount {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gam-accent, #2563eb);
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}

.balance-item-amount span {
    opacity: 0.6;
    font-weight: 500;
    font-size: 0.75em;
}

@media (max-width: 640px) {
    .gam-accounts-balance-grid {
        grid-template-columns: 1fr;
    }
}