html[data-theme="glass"] {
/* ── Premium Glass colour system (2026) ─────────────────────────
ONE design language for everyone. Surfaces, glass and the page
background are permanently neutral (OLED-deep with the faintest
deep-violet undertone). Only the ACCENT is personalised — the
four --gg-accent* custom properties below are overwritten on
by theme.js per the player's saved choice. Everything
premium (buttons, tabs, glows, borders, charts, highlights)
derives from them, so switching accent recolours the whole UI
without ever touching the layout or tinting the background. */
/* Accent layer — DEFAULT = luxury Emerald. Soft, deep, rich.
theme.js replaces these at runtime for other accents. */
--gg-accent: #10b981; /* primary accent */
--gg-accent-deep: #059669; /* deep gradient anchor */
--gg-accent-2: #34d399; /* glow accent */
--gg-accent-3: #6ee7b7; /* highlight accent */
--gg-accent-rgb: 16, 185, 129; /* primary, for rgba() */
--gg-accent-deep-rgb: 5, 150, 105; /* deep, for rgba() */
--gg-accent-2-rgb: 52, 211, 153; /* glow, for rgba() */
--gg-accent-3-rgb: 110, 231, 183; /* highlight, for rgba() */
/* Neutral surfaces — identical for every accent */
--gg-bg: #05060A; /* page background — almost OLED black */
--gg-bg-2: #0A0B14; /* secondary background */
--gg-card: #10111C; /* card surface */
--gg-elevated: #151728; /* elevated card surface */
--gg-black: #05060A; /* legacy alias → page background */
--gg-navy: #0A0B14; /* legacy alias → secondary background */
--gg-graphite: #10111C; /* legacy alias → card */
--gg-panel: rgba(16, 17, 28, 0.66);
--gg-panel-strong: rgba(21, 23, 40, 0.82);
/* Fixed neutral ambient — the background's faint deep-violet
undertone. Never follows the accent, so the page stays calm. */
--gg-ambient-1: rgba(76, 29, 149, 0.10); /* deep violet */
--gg-ambient-2: rgba(49, 46, 129, 0.10); /* deep indigo */
--gg-ambient-3: rgba(88, 28, 135, 0.09); /* deep magenta */
/* Accent-derived helpers (auto-follow the chosen accent) */
--gg-glass-border: rgba(var(--gg-accent-3-rgb), 0.085); /* almost invisible */
--gg-glass-border-strong: rgba(var(--gg-accent-2-rgb), 0.3);
--gg-royal: var(--gg-accent); /* legacy name → accent primary */
--gg-violet: var(--gg-accent-2); /* legacy name → accent glow */
--gg-highlight: var(--gg-accent-3); /* legacy name → accent highlight */
--gg-soft-glow: rgba(var(--gg-accent-2-rgb), 0.28);
--gg-mint: var(--gg-accent-2);
--gg-purple: var(--gg-accent-2);
/* Functional colours (fixed meaning, never personalised) */
--gg-indigo: #6366f1;
--gg-cyan: #22d3ee;
--gg-blue: #3b82f6;
--gg-gold: #F6C453; /* VIP / rewards only */
--gg-emerald: #22C55E; /* success only */
--gg-error: #EF4444;
--gg-text: #F8FAFC; /* off-white, never pure white */
--gg-muted: #9CA3AF; /* secondary text */
--gg-faint: #6B7280; /* muted text */
--gg-shadow: 0 34px 100px rgba(0, 0, 0, 0.72);
}
/* Page background — permanently neutral. Almost-black with the
faintest fixed deep-violet undertone and very soft, almost
invisible lighting. This NEVER follows the accent, so the app
stays calm and comfortable for long sessions regardless of the
colour a player chooses. */
html[data-theme="glass"] {
background:
radial-gradient(circle at 16% -12%, var(--gg-ambient-1), transparent 38rem),
radial-gradient(circle at 94% 6%, var(--gg-ambient-3), transparent 34rem),
linear-gradient(150deg, var(--gg-bg), var(--gg-bg-2) 56%, #05060A);
}
html[data-theme="glass"] body {
position: relative;
min-height: 100vh;
background:
radial-gradient(circle at 80% 16%, var(--gg-ambient-1), transparent 32rem),
radial-gradient(circle at 10% 90%, var(--gg-ambient-2), transparent 30rem),
linear-gradient(160deg, var(--gg-bg), var(--gg-bg-2) 58%, #0B0C16) !important;
color: var(--gg-text) !important;
letter-spacing: 0;
}
/* Very slow ambient drift across the whole page — environmental, not
emissive, and intentionally accent-independent. */
html[data-theme="glass"] body::after {
content: "";
position: fixed;
inset: -20%;
z-index: -2;
pointer-events: none;
background:
radial-gradient(38rem 38rem at 22% 16%, var(--gg-ambient-1), transparent 70%),
radial-gradient(34rem 34rem at 84% 78%, var(--gg-ambient-2), transparent 72%);
animation: ggPageDrift 38s ease-in-out infinite alternate;
}
@keyframes ggPageDrift {
0% { transform: translate3d(0, 0, 0) scale(1); }
100% { transform: translate3d(-2.4%, 2%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
html[data-theme="glass"] body::after { animation: none; }
}
html[data-theme="glass"] body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.88), transparent 82%);
}
html[data-theme="glass"] ::selection {
color: #0a0716;
background: var(--gg-violet);
}
html[data-theme="glass"] ::-webkit-scrollbar-track { background: rgba(7, 6, 15, 0.92) !important; }
html[data-theme="glass"] ::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--gg-violet), var(--gg-royal)) !important;
border-radius: 999px !important;
}
html[data-theme="glass"] .glass,
html[data-theme="glass"] .glass-card,
html[data-theme="glass"] .stat-card,
html[data-theme="glass"] .profile-card,
html[data-theme="glass"] .club-swipe-card,
html[data-theme="glass"] .empty-state,
html[data-theme="glass"] .modal-box,
html[data-theme="glass"] .admin-table,
html[data-theme="glass"] .form-input,
html[data-theme="glass"] .input-field,
html[data-theme="glass"] .otp-input,
html[data-theme="glass"] .toast > div,
html[data-theme="glass"] select,
html[data-theme="glass"] textarea,
html[data-theme="glass"] input[type="text"],
html[data-theme="glass"] input[type="tel"],
html[data-theme="glass"] input[type="email"],
html[data-theme="glass"] input[type="password"],
html[data-theme="glass"] input[type="number"],
html[data-theme="glass"] input[type="date"],
html[data-theme="glass"] input[type="search"] {
backdrop-filter: blur(22px) saturate(1.3) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.3) !important;
}
html[data-theme="glass"] .glass,
html[data-theme="glass"] .glass-card,
html[data-theme="glass"] .stat-card,
html[data-theme="glass"] .profile-card,
html[data-theme="glass"] .empty-state,
html[data-theme="glass"] .modal-box,
html[data-theme="glass"] .club-swipe-card {
position: relative;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.025) 42%, rgba(5, 9, 16, 0.24)),
var(--gg-panel) !important;
border: 1px solid var(--gg-glass-border) !important;
box-shadow: var(--gg-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
html[data-theme="glass"] .glass::after,
html[data-theme="glass"] .glass-card::after,
html[data-theme="glass"] .stat-card::after,
html[data-theme="glass"] .profile-card::after,
html[data-theme="glass"] .club-swipe-card::after,
html[data-theme="glass"] .modal-box::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 28%, transparent 72%, rgba(var(--gg-accent-2-rgb), 0.1));
opacity: 0.42;
}
html[data-theme="glass"] header.glass,
html[data-theme="glass"] .sticky.glass {
background: rgba(4, 9, 16, 0.72) !important;
border-bottom-color: rgba(var(--gg-accent-2-rgb), 0.18) !important;
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.34), inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="glass"] .btn-primary,
html[data-theme="glass"] button.bg-brand-600,
html[data-theme="glass"] a.bg-brand-600,
html[data-theme="glass"] .club-tab.active,
html[data-theme="glass"] .nav-tab.active,
html[data-theme="glass"] .period-btn.active {
color: #f7f5ff !important;
background:
linear-gradient(135deg, var(--gg-royal), var(--gg-accent-deep) 52%, var(--gg-indigo)) !important;
border-color: rgba(var(--gg-accent-2-rgb), 0.5) !important;
box-shadow: 0 16px 40px rgba(91, 33, 182, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
html[data-theme="glass"] .btn-primary:hover,
html[data-theme="glass"] button.bg-brand-600:hover,
html[data-theme="glass"] a.bg-brand-600:hover {
filter: brightness(1.06);
transform: translateY(-1px);
}
html[data-theme="glass"] .btn-ghost,
html[data-theme="glass"] .btn-secondary,
html[data-theme="glass"] .period-btn,
html[data-theme="glass"] .club-tab,
html[data-theme="glass"] .nav-tab,
html[data-theme="glass"] button.border,
html[data-theme="glass"] a.border {
background: rgba(12, 22, 34, 0.58) !important;
border-color: rgba(var(--gg-accent-2-rgb), 0.17) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html[data-theme="glass"] .btn-ghost:hover,
html[data-theme="glass"] .btn-secondary:hover,
html[data-theme="glass"] .period-btn:hover,
html[data-theme="glass"] .club-tab:hover,
html[data-theme="glass"] .nav-tab:hover,
html[data-theme="glass"] button.border:hover,
html[data-theme="glass"] a.border:hover {
color: var(--gg-mint) !important;
border-color: var(--gg-glass-border-strong) !important;
background: rgba(var(--gg-accent-2-rgb), 0.1) !important;
}
html[data-theme="glass"] .form-input,
html[data-theme="glass"] .input-field,
html[data-theme="glass"] .otp-input,
html[data-theme="glass"] select,
html[data-theme="glass"] textarea,
html[data-theme="glass"] input[type="text"],
html[data-theme="glass"] input[type="tel"],
html[data-theme="glass"] input[type="email"],
html[data-theme="glass"] input[type="password"],
html[data-theme="glass"] input[type="number"],
html[data-theme="glass"] input[type="date"],
html[data-theme="glass"] input[type="search"] {
color: var(--gg-text) !important;
background: rgba(5, 12, 21, 0.7) !important;
border: 1px solid rgba(var(--gg-accent-2-rgb), 0.2) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="glass"] .form-input:focus,
html[data-theme="glass"] .input-field:focus,
html[data-theme="glass"] .otp-input:focus,
html[data-theme="glass"] select:focus,
html[data-theme="glass"] textarea:focus,
html[data-theme="glass"] input:focus {
outline: none !important;
border-color: var(--gg-mint) !important;
box-shadow: 0 0 0 3px rgba(var(--gg-accent-2-rgb), 0.16), 0 0 32px rgba(99, 102, 241, 0.14) !important;
}
html[data-theme="glass"] .admin-table,
html[data-theme="glass"] table {
border-color: rgba(var(--gg-accent-2-rgb), 0.12) !important;
}
html[data-theme="glass"] .admin-table th,
html[data-theme="glass"] table th {
color: rgba(244, 255, 249, 0.74) !important;
background: rgba(var(--gg-accent-2-rgb), 0.055) !important;
border-color: rgba(var(--gg-accent-2-rgb), 0.12) !important;
}
html[data-theme="glass"] .admin-table td,
html[data-theme="glass"] table td {
border-color: rgba(var(--gg-accent-2-rgb), 0.08) !important;
}
html[data-theme="glass"] .admin-table tr:hover td,
html[data-theme="glass"] table tbody tr:hover td {
background: rgba(var(--gg-accent-2-rgb), 0.055) !important;
}
html[data-theme="glass"] .text-brand-300,
html[data-theme="glass"] .text-brand-400,
html[data-theme="glass"] .text-brand-500,
html[data-theme="glass"] .text-emerald-300,
html[data-theme="glass"] .text-emerald-400 {
color: #34d399 !important; /* deposit / positive accent stays emerald */
}
html[data-theme="glass"] .text-yellow-300,
html[data-theme="glass"] .text-yellow-400,
html[data-theme="glass"] .text-amber-300,
html[data-theme="glass"] .text-amber-400 {
color: var(--gg-gold) !important;
}
html[data-theme="glass"] .text-blue-300,
html[data-theme="glass"] .text-blue-400 {
color: #60a5fa !important; /* transfer — electric blue */
}
html[data-theme="glass"] .text-cyan-300,
html[data-theme="glass"] .text-cyan-400,
html[data-theme="glass"] .text-teal-300,
html[data-theme="glass"] .text-teal-400 {
color: var(--gg-cyan) !important;
}
html[data-theme="glass"] .text-purple-300,
html[data-theme="glass"] .text-purple-400,
html[data-theme="glass"] .text-indigo-300,
html[data-theme="glass"] .text-indigo-400 {
color: var(--gg-purple) !important;
}
html[data-theme="glass"] .bg-dark-950,
html[data-theme="glass"] .bg-dark-900,
html[data-theme="glass"] .bg-dark-850,
html[data-theme="glass"] .bg-dark-800,
html[data-theme="glass"] .bg-slate-950,
html[data-theme="glass"] .bg-slate-900 {
background-color: rgba(8, 15, 25, 0.72) !important;
}
html[data-theme="glass"] .border-dark-900,
html[data-theme="glass"] .border-dark-800,
html[data-theme="glass"] .border-dark-700,
html[data-theme="glass"] .border-slate-800,
html[data-theme="glass"] .border-slate-700 {
border-color: rgba(var(--gg-accent-2-rgb), 0.14) !important;
}
html[data-theme="glass"] .glow-green,
html[data-theme="glass"] .glow-green-sm,
html[data-theme="glass"] .glow-green-hover:hover,
html[data-theme="glass"] .border-glow {
box-shadow: 0 0 0 1px rgba(var(--gg-accent-2-rgb), 0.16), 0 18px 52px rgba(var(--gg-accent-deep-rgb), 0.2), 0 0 70px rgba(99, 102, 241, 0.1) !important;
}
html[data-theme="glass"] .spinner {
border-color: rgba(var(--gg-accent-2-rgb), 0.18) !important;
border-top-color: var(--gg-mint) !important;
}
html[data-theme="glass"] .swipe-slide.slide-center .club-swipe-card,
html[data-theme="glass"] .profile-card:hover,
html[data-theme="glass"] .stat-card:hover {
transform: translateY(-4px);
border-color: rgba(var(--gg-accent-2-rgb), 0.42) !important;
box-shadow: 0 26px 90px rgba(0, 0, 0, 0.5), 0 0 54px rgba(var(--gg-accent-deep-rgb), 0.18) !important;
}
html[data-theme="glass"] .swipe-dot {
background: rgba(143, 163, 180, 0.36) !important;
}
html[data-theme="glass"] .swipe-dot.active {
background: linear-gradient(90deg, var(--gg-mint), var(--gg-cyan)) !important;
box-shadow: 0 0 24px rgba(99, 102, 241, 0.34);
}
html[data-theme="glass"] .modal-backdrop,
html[data-theme="glass"] #loadingOverlay {
background:
radial-gradient(circle at 50% 30%, rgba(var(--gg-accent-deep-rgb), 0.13), transparent 30rem),
rgba(3, 7, 13, 0.84) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
html[data-theme="glass"] body.dashboard-page #appWrapper > nav,
html[data-theme="glass"] body.dashboard-page #profileBar {
left: 0;
right: 0;
margin: 10px auto 0;
width: min(calc(100% - 20px), 76rem);
border: 1px solid rgba(var(--gg-accent-2-rgb), 0.18) !important;
border-radius: 22px !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.035)),
rgba(5, 12, 22, 0.68) !important;
box-shadow: 0 22px 70px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
backdrop-filter: blur(24px) saturate(1.28) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.28) !important;
}
html[data-theme="glass"] body.dashboard-page #profileBar {
top: 82px !important;
}
html[data-theme="glass"] body.dashboard-page #appWrapper > nav a,
html[data-theme="glass"] body.dashboard-page #appWrapper > nav button,
html[data-theme="glass"] body.dashboard-page #profileBar button {
border-radius: 999px !important;
}
html[data-theme="glass"] .dashboard-stage {
position: relative;
padding-top: 2rem !important;
padding-bottom: 5rem !important;
}
html[data-theme="glass"] .dashboard-stage::before,
html[data-theme="glass"] .dashboard-stage::after {
content: "";
position: fixed;
pointer-events: none;
border-radius: 999px;
filter: blur(4px);
opacity: 0.86;
z-index: -1;
}
html[data-theme="glass"] .dashboard-stage::before {
width: 34rem;
height: 34rem;
right: -14rem;
top: 10rem;
background: radial-gradient(circle, rgba(99, 102, 241, 0.18), transparent 68%);
animation: ggAmbientFloat 12s ease-in-out infinite;
}
html[data-theme="glass"] .dashboard-stage::after {
width: 26rem;
height: 26rem;
left: -10rem;
bottom: 4rem;
background: radial-gradient(circle, rgba(var(--gg-accent-deep-rgb), 0.2), transparent 70%);
animation: ggAmbientFloat 14s ease-in-out infinite reverse;
}
html[data-theme="glass"] .dashboard-welcome {
position: relative;
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(18rem, 25rem);
gap: 1.2rem;
align-items: stretch;
margin-bottom: 1.65rem;
}
html[data-theme="glass"] .dashboard-welcome-copy,
html[data-theme="glass"] .dashboard-balance-card,
html[data-theme="glass"] .dashboard-panel,
html[data-theme="glass"] .dashboard-action-card {
position: relative;
overflow: hidden;
border: 1px solid rgba(var(--gg-accent-2-rgb), 0.17) !important;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.03) 42%, rgba(8, 13, 24, 0.34)),
rgba(9, 19, 31, 0.66) !important;
box-shadow: 0 24px 82px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
backdrop-filter: blur(26px) saturate(1.32) !important;
-webkit-backdrop-filter: blur(26px) saturate(1.32) !important;
}
html[data-theme="glass"] .dashboard-welcome-copy::after,
html[data-theme="glass"] .dashboard-balance-card::after,
html[data-theme="glass"] .dashboard-panel::after,
html[data-theme="glass"] .dashboard-action-card::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background: linear-gradient(115deg, rgba(255, 255, 255, 0.18), transparent 24%, transparent 72%, rgba(var(--gg-accent-2-rgb), 0.1));
opacity: 0.44;
}
html[data-theme="glass"] .dashboard-welcome-copy {
border-radius: 30px;
min-height: 14.5rem;
padding: clamp(1.5rem, 4vw, 2.4rem);
display: flex;
flex-direction: column;
justify-content: flex-end;
}
html[data-theme="glass"] .dashboard-welcome-copy::before {
content: "";
position: absolute;
width: 18rem;
height: 18rem;
right: -5rem;
top: -7rem;
border-radius: 999px;
background: radial-gradient(circle, rgba(var(--gg-accent-2-rgb), 0.2), transparent 68%);
}
html[data-theme="glass"] .dashboard-kicker {
position: relative;
z-index: 1;
color: rgba(var(--gg-accent-2-rgb), 0.78);
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.16em;
}
html[data-theme="glass"] .dashboard-welcome h1,
html[data-theme="glass"] .dashboard-section-heading h2 {
position: relative;
z-index: 1;
margin: 0;
color: #f7fff9;
letter-spacing: 0;
}
html[data-theme="glass"] .dashboard-welcome h1 {
margin-top: 0.5rem;
font-size: clamp(2.3rem, 6vw, 4.8rem);
line-height: 0.94;
font-weight: 900;
}
html[data-theme="glass"] .dashboard-welcome p {
position: relative;
z-index: 1;
margin-top: 1rem;
max-width: 35rem;
color: rgba(244, 255, 249, 0.62);
font-size: 0.96rem;
line-height: 1.65;
}
html[data-theme="glass"] .dashboard-balance-card {
border-radius: 30px;
padding: 1.35rem;
transform: translateY(1.1rem);
border-color: rgba(var(--gg-accent-2-rgb), 0.32) !important;
background:
radial-gradient(circle at 20% 10%, rgba(var(--gg-accent-2-rgb), 0.22), transparent 35%),
linear-gradient(145deg, rgba(var(--gg-accent-deep-rgb), 0.18), rgba(99, 102, 241, 0.08) 48%, rgba(5, 9, 18, 0.74)) !important;
box-shadow: 0 34px 100px rgba(0, 0, 0, 0.5), 0 0 78px rgba(var(--gg-accent-deep-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
html[data-theme="glass"] .dashboard-balance-top,
html[data-theme="glass"] .dashboard-balance-foot {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
color: rgba(244, 255, 249, 0.62);
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.12em;
}
html[data-theme="glass"] .dashboard-balance-refresh {
width: 2rem;
height: 2rem;
display: grid;
place-items: center;
color: var(--gg-mint);
border: 1px solid rgba(var(--gg-accent-2-rgb), 0.18) !important;
background: rgba(255, 255, 255, 0.075) !important;
}
html[data-theme="glass"] .dashboard-hero-balance {
position: relative;
z-index: 1;
margin: 1.6rem 0 1.3rem;
color: #ffffff;
font-size: clamp(2.8rem, 8vw, 5rem);
line-height: 0.9;
font-weight: 900;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
text-shadow: 0 0 34px rgba(var(--gg-accent-2-rgb), 0.22);
}
html[data-theme="glass"] .dashboard-live-pill,
html[data-theme="glass"] .dashboard-action-pill {
display: inline-flex;
width: fit-content;
align-items: center;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.075);
}
html[data-theme="glass"] .dashboard-live-pill {
padding: 0.28rem 0.6rem;
color: var(--gg-mint);
box-shadow: 0 0 22px rgba(var(--gg-accent-2-rgb), 0.12);
}
html[data-theme="glass"] .dashboard-section-heading {
display: flex !important;
align-items: end;
justify-content: space-between;
margin: 0 0 0.9rem;
}
html[data-theme="glass"] .dashboard-section-heading h2 {
margin-top: 0.25rem;
font-size: clamp(1.45rem, 4vw, 2rem);
font-weight: 850;
}
html[data-theme="glass"] .dashboard-actions-grid {
gap: 1rem !important;
}
html[data-theme="glass"] .dashboard-action-card {
min-height: 10.25rem;
border-radius: 26px !important;
isolation: isolate;
transform: translateZ(0);
transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, filter 220ms ease !important;
}
html[data-theme="glass"] .dashboard-action-card::before {
content: "";
position: absolute;
inset: -1px;
z-index: -1;
border-radius: inherit;
opacity: 0.52;
background: radial-gradient(circle at 18% 12%, var(--action-glow, rgba(var(--gg-accent-2-rgb), 0.24)), transparent 38%);
}
html[data-theme="glass"] .dashboard-action-card:hover {
transform: translateY(-5px) scale(1.01) !important;
border-color: var(--action-border, rgba(var(--gg-accent-2-rgb), 0.42)) !important;
box-shadow: 0 32px 92px rgba(0, 0, 0, 0.5), 0 0 54px var(--action-shadow, rgba(var(--gg-accent-2-rgb), 0.14)) !important;
}
html[data-theme="glass"] .dashboard-action-card:active {
transform: translateY(-1px) scale(0.985) !important;
}
html[data-theme="glass"] .dashboard-action-icon {
position: relative;
border-radius: 18px !important;
background: linear-gradient(145deg, color-mix(in srgb, var(--action-accent, var(--gg-accent-2)) 26%, transparent), rgba(255, 255, 255, 0.045)) !important;
border-color: var(--action-border, rgba(var(--gg-accent-2-rgb), 0.24)) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 16px 36px var(--action-shadow, rgba(var(--gg-accent-2-rgb), 0.12));
}
html[data-theme="glass"] .dashboard-action-pill {
margin-top: 0.6rem !important;
padding: 0.34rem 0.62rem;
color: rgba(244, 255, 249, 0.58) !important;
font-weight: 700;
}
html[data-theme="glass"] .dashboard-action-deposit {
--action-accent: #22C55E;
--action-border: rgba(var(--gg-accent-2-rgb), 0.4);
--action-glow: rgba(var(--gg-accent-deep-rgb), 0.24);
--action-shadow: rgba(var(--gg-accent-deep-rgb), 0.18);
}
html[data-theme="glass"] .dashboard-action-withdrawal,
html[data-theme="glass"] .dashboard-action-winnings {
--action-accent: #f5c76b;
--action-border: rgba(245, 199, 107, 0.42);
--action-glow: rgba(245, 199, 107, 0.22);
--action-shadow: rgba(245, 199, 107, 0.16);
}
html[data-theme="glass"] .dashboard-action-transfer {
--action-accent: #22d3ee;
--action-border: rgba(99, 102, 241, 0.44);
--action-glow: rgba(99, 102, 241, 0.24);
--action-shadow: rgba(99, 102, 241, 0.17);
}
html[data-theme="glass"] .dashboard-action-recovery,
html[data-theme="glass"] .dashboard-action-join,
html[data-theme="glass"] .dashboard-action-support {
--action-accent: #67e8f9;
--action-border: rgba(103, 232, 249, 0.4);
--action-glow: rgba(99, 102, 241, 0.2);
--action-shadow: rgba(99, 102, 241, 0.14);
}
html[data-theme="glass"] .dashboard-action-credit {
--action-accent: #9b5cff;
--action-border: rgba(155, 92, 255, 0.48);
--action-glow: rgba(155, 92, 255, 0.24);
--action-shadow: rgba(155, 92, 255, 0.17);
}
html[data-theme="glass"] .dashboard-action-card svg {
color: var(--action-accent, currentColor) !important;
}
html[data-theme="glass"] .dashboard-panel {
border-radius: 28px !important;
}
html[data-theme="glass"] .dashboard-panel > div:first-child {
position: relative;
z-index: 1;
background: rgba(255, 255, 255, 0.035);
border-bottom-color: rgba(var(--gg-accent-2-rgb), 0.13) !important;
}
html[data-theme="glass"] body.dashboard-page #modalDeposit {
--finance-accent: #34d399;
--finance-accent-2: #22C55E;
--finance-rgb: 52, 211, 153;
--finance-shadow: rgba(16, 185, 129, 0.22);
}
html[data-theme="glass"] body.dashboard-page #modalWithdraw {
--finance-accent: #f5c76b;
--finance-accent-2: #f59e0b;
--finance-rgb: 245, 199, 107;
--finance-shadow: rgba(245, 158, 11, 0.24);
}
html[data-theme="glass"] body.dashboard-page #modalTransfer,
html[data-theme="glass"] body.dashboard-page #modalTransferLocked {
--finance-accent: #60a5fa;
--finance-accent-2: #3b82f6;
--finance-rgb: 96, 165, 250;
--finance-shadow: rgba(59, 130, 246, 0.24);
}
html[data-theme="glass"] body.dashboard-page #modalRecovery {
--finance-accent: #67e8f9;
--finance-accent-2: #0891b2;
--finance-rgb: 103, 232, 249;
--finance-shadow: rgba(99, 102, 241, 0.22);
}
html[data-theme="glass"] body.dashboard-page #modalSeatUnits,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsInfo,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsLocked {
--finance-accent: #c4a5ff;
--finance-accent-2: #9b5cff;
--finance-rgb: 196, 165, 255;
--finance-shadow: rgba(155, 92, 255, 0.26);
}
html[data-theme="glass"] body.dashboard-page #modalDeposit,
html[data-theme="glass"] body.dashboard-page #modalWithdraw,
html[data-theme="glass"] body.dashboard-page #modalTransfer,
html[data-theme="glass"] body.dashboard-page #modalTransferLocked,
html[data-theme="glass"] body.dashboard-page #modalRecovery,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsInfo,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsLocked {
background:
radial-gradient(circle at 50% 12%, rgba(var(--finance-rgb), 0.18), transparent 28rem),
rgba(2, 6, 12, 0.78) !important;
}
html[data-theme="glass"] body.dashboard-page #modalDeposit .modal-box,
html[data-theme="glass"] body.dashboard-page #modalWithdraw .modal-box,
html[data-theme="glass"] body.dashboard-page #modalTransfer .modal-box,
html[data-theme="glass"] body.dashboard-page #modalTransferLocked .modal-box,
html[data-theme="glass"] body.dashboard-page #modalRecovery .modal-box,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits .modal-box,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsInfo .modal-box,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsLocked .modal-box {
border-radius: 30px !important;
border-color: rgba(var(--finance-rgb), 0.28) !important;
background:
radial-gradient(circle at 18% 0%, rgba(var(--finance-rgb), 0.2), transparent 34%),
linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.034) 46%, rgba(5, 9, 17, 0.66)),
rgba(8, 16, 27, 0.72) !important;
box-shadow: 0 34px 110px rgba(0, 0, 0, 0.58), 0 0 80px var(--finance-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
backdrop-filter: blur(30px) saturate(1.34) !important;
-webkit-backdrop-filter: blur(30px) saturate(1.34) !important;
}
html[data-theme="glass"] body.dashboard-page #modalDeposit .modal-box > div:first-child,
html[data-theme="glass"] body.dashboard-page #modalWithdraw .modal-box > div:first-child,
html[data-theme="glass"] body.dashboard-page #modalTransfer .modal-box > div:first-child,
html[data-theme="glass"] body.dashboard-page #modalTransferLocked .modal-box > div:first-child,
html[data-theme="glass"] body.dashboard-page #modalRecovery .modal-box > div:first-child,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits .modal-box > div:first-child,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsInfo .modal-box > div:first-child,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsLocked .modal-box > div:first-child {
min-height: 5.8rem;
border-bottom-color: rgba(var(--finance-rgb), 0.18) !important;
background:
linear-gradient(135deg, rgba(var(--finance-rgb), 0.16), rgba(255, 255, 255, 0.045)),
rgba(6, 13, 23, 0.86) !important;
}
html[data-theme="glass"] body.dashboard-page #modalDeposit .animated-top-border::before,
html[data-theme="glass"] body.dashboard-page #modalWithdraw .animated-top-border::before,
html[data-theme="glass"] body.dashboard-page #modalTransfer .animated-top-border::before,
html[data-theme="glass"] body.dashboard-page #modalRecovery .animated-top-border::before,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits .animated-top-border::before {
height: 3px;
background: linear-gradient(90deg, transparent, var(--finance-accent), var(--finance-accent-2), transparent);
}
html[data-theme="glass"] body.dashboard-page #modalDeposit h3,
html[data-theme="glass"] body.dashboard-page #modalWithdraw h3,
html[data-theme="glass"] body.dashboard-page #modalTransfer h3,
html[data-theme="glass"] body.dashboard-page #modalTransferLocked h3,
html[data-theme="glass"] body.dashboard-page #modalRecovery h3,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits h3,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsInfo h3,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsLocked h3 {
font-size: 1.25rem;
letter-spacing: 0;
color: #ffffff !important;
text-shadow: 0 0 28px rgba(var(--finance-rgb), 0.18);
}
html[data-theme="glass"] body.dashboard-page #modalDeposit .modal-box > div:first-child .w-8,
html[data-theme="glass"] body.dashboard-page #modalWithdraw .modal-box > div:first-child .w-8,
html[data-theme="glass"] body.dashboard-page #modalTransfer .modal-box > div:first-child .w-8,
html[data-theme="glass"] body.dashboard-page #modalRecovery .modal-box > div:first-child .w-8,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits .modal-box > div:first-child .w-8,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsInfo .modal-box > div:first-child .w-8 {
width: 2.65rem !important;
height: 2.65rem !important;
border-radius: 18px !important;
border-color: rgba(var(--finance-rgb), 0.35) !important;
background: linear-gradient(145deg, rgba(var(--finance-rgb), 0.23), rgba(255, 255, 255, 0.055)) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 18px 36px var(--finance-shadow) !important;
}
html[data-theme="glass"] body.dashboard-page #modalDeposit .modal-box > div:first-child svg,
html[data-theme="glass"] body.dashboard-page #modalWithdraw .modal-box > div:first-child svg,
html[data-theme="glass"] body.dashboard-page #modalTransfer .modal-box > div:first-child svg,
html[data-theme="glass"] body.dashboard-page #modalTransferLocked .modal-box > div:first-child svg,
html[data-theme="glass"] body.dashboard-page #modalRecovery .modal-box > div:first-child svg,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits .modal-box > div:first-child svg,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsInfo .modal-box > div:first-child svg,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsLocked .modal-box > div:first-child svg {
color: var(--finance-accent) !important;
}
html[data-theme="glass"] body.dashboard-page #modalDeposit label,
html[data-theme="glass"] body.dashboard-page #modalWithdraw label,
html[data-theme="glass"] body.dashboard-page #modalTransfer label,
html[data-theme="glass"] body.dashboard-page #modalRecovery label,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits label {
color: rgba(244, 255, 249, 0.64) !important;
letter-spacing: 0.12em;
}
html[data-theme="glass"] body.dashboard-page #modalDeposit .form-input,
html[data-theme="glass"] body.dashboard-page #modalWithdraw .form-input,
html[data-theme="glass"] body.dashboard-page #modalTransfer .form-input,
html[data-theme="glass"] body.dashboard-page #modalRecovery .form-input,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits .form-input {
min-height: 3.25rem;
border-radius: 18px !important;
border-color: rgba(var(--finance-rgb), 0.22) !important;
background: rgba(3, 9, 17, 0.56) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 30px rgba(0, 0, 0, 0.18) !important;
}
html[data-theme="glass"] body.dashboard-page #modalDeposit .form-input:focus,
html[data-theme="glass"] body.dashboard-page #modalWithdraw .form-input:focus,
html[data-theme="glass"] body.dashboard-page #modalTransfer .form-input:focus,
html[data-theme="glass"] body.dashboard-page #modalRecovery .form-input:focus,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits .form-input:focus {
border-color: rgba(var(--finance-rgb), 0.68) !important;
box-shadow: 0 0 0 3px rgba(var(--finance-rgb), 0.14), 0 0 36px var(--finance-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="glass"] body.dashboard-page #modalDeposit #bankCard,
html[data-theme="glass"] body.dashboard-page #modalDeposit #receiptDropzone,
html[data-theme="glass"] body.dashboard-page #modalDeposit #scanSteps > div,
html[data-theme="glass"] body.dashboard-page #modalWithdraw #wdLastDepositInfo > div,
html[data-theme="glass"] body.dashboard-page #modalWithdraw #wdSavedAccountsList > *,
html[data-theme="glass"] body.dashboard-page #modalTransfer #trTargetPreview,
html[data-theme="glass"] body.dashboard-page #modalRecovery #recoveryTierRatesCard,
html[data-theme="glass"] body.dashboard-page #modalRecovery #recoveryVipInfoContent,
html[data-theme="glass"] body.dashboard-page #modalRecovery #recoveryStepEligible .bg-dark-800,
html[data-theme="glass"] body.dashboard-page #modalRecovery #recoveryStepNotEligible .bg-dark-800,
html[data-theme="glass"] body.dashboard-page #modalRecovery #recoveryStepPending .bg-dark-800,
html[data-theme="glass"] body.dashboard-page #modalRecovery #recoveryStepSuccess .bg-dark-800,
html[data-theme="glass"] body.dashboard-page #modalRecovery #recoveryStepBalanceHigh .bg-dark-800,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits .bg-dark-800,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsInfo [data-accordion-group] > div,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsLocked [data-accordion-group] > div,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsLocked .locked-progress-hint {
border: 1px solid rgba(var(--finance-rgb), 0.18) !important;
border-radius: 20px !important;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
rgba(8, 18, 30, 0.58) !important;
box-shadow: 0 18px 54px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="glass"] body.dashboard-page #modalDeposit #receiptDropzone {
border-style: solid !important;
padding: 1.35rem !important;
}
html[data-theme="glass"] body.dashboard-page #modalDeposit #receiptDropzone:hover,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsInfo [data-accordion-group] > div:hover,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsLocked [data-accordion-group] > div:hover {
border-color: rgba(var(--finance-rgb), 0.42) !important;
transform: translateY(-1px);
}
html[data-theme="glass"] body.dashboard-page #modalDeposit button,
html[data-theme="glass"] body.dashboard-page #modalWithdraw button,
html[data-theme="glass"] body.dashboard-page #modalTransfer button,
html[data-theme="glass"] body.dashboard-page #modalTransferLocked button,
html[data-theme="glass"] body.dashboard-page #modalRecovery button,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits button,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsInfo button,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsLocked button {
border-radius: 999px !important;
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease, background 180ms ease !important;
}
html[data-theme="glass"] body.dashboard-page #modalDeposit #depSubmitBtn,
html[data-theme="glass"] body.dashboard-page #modalWithdraw #wdSubmitBtn,
html[data-theme="glass"] body.dashboard-page #modalTransfer #trSubmitBtn,
html[data-theme="glass"] body.dashboard-page #modalRecovery #recoveryCheckBtn,
html[data-theme="glass"] body.dashboard-page #modalRecovery #recoverySubmitBtn,
html[data-theme="glass"] body.dashboard-page #modalRecovery #recoverySuccessCloseBtn,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits #suRequestBtn,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits .modal-close-btn,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsInfo .modal-close-btn,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsLocked .modal-close-btn {
position: relative;
overflow: hidden;
color: #06110e !important;
background: linear-gradient(135deg, var(--finance-accent), var(--finance-accent-2)) !important;
border: 1px solid rgba(var(--finance-rgb), 0.48) !important;
box-shadow: 0 18px 42px var(--finance-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}
html[data-theme="glass"] body.dashboard-page #modalDeposit #depSubmitBtn::before,
html[data-theme="glass"] body.dashboard-page #modalWithdraw #wdSubmitBtn::before,
html[data-theme="glass"] body.dashboard-page #modalTransfer #trSubmitBtn::before,
html[data-theme="glass"] body.dashboard-page #modalRecovery #recoveryCheckBtn::before,
html[data-theme="glass"] body.dashboard-page #modalRecovery #recoverySubmitBtn::before,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits #suRequestBtn::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 0 35%, rgba(255, 255, 255, 0.36) 48%, transparent 62% 100%);
transform: translateX(-120%);
transition: transform 520ms ease;
}
html[data-theme="glass"] body.dashboard-page #modalDeposit #depSubmitBtn:hover::before,
html[data-theme="glass"] body.dashboard-page #modalWithdraw #wdSubmitBtn:hover::before,
html[data-theme="glass"] body.dashboard-page #modalTransfer #trSubmitBtn:hover::before,
html[data-theme="glass"] body.dashboard-page #modalRecovery #recoveryCheckBtn:hover::before,
html[data-theme="glass"] body.dashboard-page #modalRecovery #recoverySubmitBtn:hover::before,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits #suRequestBtn:hover::before {
transform: translateX(120%);
}
html[data-theme="glass"] body.dashboard-page #modalDeposit button:hover,
html[data-theme="glass"] body.dashboard-page #modalWithdraw button:hover,
html[data-theme="glass"] body.dashboard-page #modalTransfer button:hover,
html[data-theme="glass"] body.dashboard-page #modalTransferLocked button:hover,
html[data-theme="glass"] body.dashboard-page #modalRecovery button:hover,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits button:hover,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsInfo button:hover,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsLocked button:hover {
transform: translateY(-1px);
filter: brightness(1.05);
}
html[data-theme="glass"] body.dashboard-page #modalDeposit button:active,
html[data-theme="glass"] body.dashboard-page #modalWithdraw button:active,
html[data-theme="glass"] body.dashboard-page #modalTransfer button:active,
html[data-theme="glass"] body.dashboard-page #modalTransferLocked button:active,
html[data-theme="glass"] body.dashboard-page #modalRecovery button:active,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits button:active,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsInfo button:active,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsLocked button:active {
transform: translateY(0) scale(0.985);
}
html[data-theme="glass"] body.dashboard-page #modalSeatUnits .text-orange-400,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsInfo .text-orange-400,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsLocked .text-orange-400 {
color: var(--finance-accent) !important;
}
html[data-theme="glass"] body.dashboard-page #modalRecovery .text-purple-400,
html[data-theme="glass"] body.dashboard-page #modalRecovery .text-brand-400 {
color: var(--finance-accent) !important;
}
@media (prefers-reduced-motion: no-preference) {
html[data-theme="glass"] body.dashboard-page #modalDeposit:not(.hidden) .modal-box,
html[data-theme="glass"] body.dashboard-page #modalWithdraw:not(.hidden) .modal-box,
html[data-theme="glass"] body.dashboard-page #modalTransfer:not(.hidden) .modal-box,
html[data-theme="glass"] body.dashboard-page #modalTransferLocked:not(.hidden) .modal-box,
html[data-theme="glass"] body.dashboard-page #modalRecovery:not(.hidden) .modal-box,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits:not(.hidden) .modal-box,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsInfo:not(.hidden) .modal-box,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsLocked:not(.hidden) .modal-box {
animation: ggFinanceModalIn 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
}
@keyframes ggFinanceModalIn {
from { opacity: 0; transform: translateY(18px) scale(0.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
html[data-theme="glass"] #recentRequestsList,
html[data-theme="glass"] #recentRequestsEmpty,
html[data-theme="glass"] #recentRequestsLoading {
position: relative;
z-index: 1;
}
html[data-theme="glass"] .lock-overlay {
backdrop-filter: blur(14px) saturate(1.2);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
}
@keyframes ggAmbientFloat {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.74; }
50% { transform: translate3d(1.5rem, -1rem, 0) scale(1.06); opacity: 0.96; }
}
@media (max-width: 760px) {
html[data-theme="glass"] body.dashboard-page #appWrapper > nav {
margin-top: 6px;
width: min(calc(100% - 12px), 76rem);
border-radius: 18px !important;
}
html[data-theme="glass"] body.dashboard-page #profileBar {
top: 76px !important;
margin-top: 6px;
width: min(calc(100% - 12px), 76rem);
border-radius: 18px !important;
}
html[data-theme="glass"] .dashboard-stage {
padding-top: 1.15rem !important;
}
html[data-theme="glass"] .dashboard-welcome {
grid-template-columns: 1fr;
gap: 0.9rem;
}
html[data-theme="glass"] .dashboard-welcome-copy,
html[data-theme="glass"] .dashboard-balance-card {
border-radius: 24px;
}
html[data-theme="glass"] .dashboard-welcome-copy {
min-height: 12rem;
}
html[data-theme="glass"] .dashboard-balance-card {
transform: none;
}
html[data-theme="glass"] .dashboard-action-card {
min-height: 9.4rem;
border-radius: 22px !important;
}
}
@media (prefers-reduced-motion: no-preference) {
html[data-theme="glass"] .glass,
html[data-theme="glass"] .glass-card,
html[data-theme="glass"] .stat-card,
html[data-theme="glass"] .profile-card,
html[data-theme="glass"] .club-swipe-card,
html[data-theme="glass"] .btn-primary,
html[data-theme="glass"] .btn-ghost,
html[data-theme="glass"] .nav-tab,
html[data-theme="glass"] .club-tab,
html[data-theme="glass"] .period-btn {
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease, filter 180ms ease;
}
}
@media (max-width: 640px) {
html[data-theme="glass"] body {
background-size: auto, auto, auto, auto !important;
}
html[data-theme="glass"] .glass,
html[data-theme="glass"] .glass-card,
html[data-theme="glass"] .stat-card,
html[data-theme="glass"] .profile-card,
html[data-theme="glass"] .modal-box {
border-radius: 18px !important;
}
}
/* Phase 5: premium player experience */
html[data-theme="glass"] body.vip-page {
background:
radial-gradient(circle at 50% -12%, rgba(245, 199, 107, 0.23), transparent 34rem),
radial-gradient(circle at 92% 14%, rgba(155, 92, 255, 0.13), transparent 26rem),
linear-gradient(145deg, #06070d, #0a101d 52%, #11100b) !important;
}
html[data-theme="glass"] .vip-stage,
html[data-theme="glass"] .referral-stage {
position: relative;
}
html[data-theme="glass"] .vip-stage::before,
html[data-theme="glass"] .referral-stage::before {
content: "";
position: fixed;
inset: 4rem 0 auto;
height: 22rem;
pointer-events: none;
background: radial-gradient(closest-side at 50% 20%, rgba(245, 199, 107, 0.16), transparent 72%);
opacity: 0.86;
}
html[data-theme="glass"] .vip-page-hero {
position: relative;
overflow: hidden;
margin-bottom: 2rem !important;
padding: clamp(1.3rem, 4vw, 2.1rem);
border: 1px solid rgba(245, 199, 107, 0.27);
border-radius: 30px;
background:
radial-gradient(circle at 12% 10%, rgba(245, 199, 107, 0.2), transparent 20rem),
radial-gradient(circle at 90% 0%, rgba(255, 255, 255, 0.1), transparent 18rem),
linear-gradient(140deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035) 48%, rgba(27, 18, 5, 0.44)),
rgba(12, 18, 28, 0.74);
box-shadow: 0 32px 105px rgba(0, 0, 0, 0.5), 0 0 74px rgba(245, 199, 107, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.15);
backdrop-filter: blur(26px) saturate(1.35);
-webkit-backdrop-filter: blur(26px) saturate(1.35);
}
html[data-theme="glass"] .vip-page-hero .brand-gradient,
html[data-theme="glass"] body.vip-page .vip-hero .w-16,
html[data-theme="glass"] body.vip-page .vip-hero .w-14 {
background: linear-gradient(135deg, #fff4bd, #f5c76b 45%, #b98220) !important;
color: #1d1403 !important;
box-shadow: 0 18px 46px rgba(245, 199, 107, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
html[data-theme="glass"] body.vip-page .vip-hero {
border-radius: 30px;
border-color: rgba(245, 199, 107, 0.26);
background:
radial-gradient(circle at 16% 4%, rgba(245, 199, 107, 0.2), transparent 24rem),
radial-gradient(circle at 88% 6%, rgba(255, 244, 189, 0.12), transparent 20rem),
linear-gradient(150deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.03) 46%, rgba(19, 12, 4, 0.5)),
rgba(9, 15, 26, 0.74);
box-shadow: 0 32px 98px rgba(0, 0, 0, 0.52), 0 0 70px rgba(245, 199, 107, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.16);
transform: translateZ(0);
}
html[data-theme="glass"] body.vip-page .progress-bar-fill {
background: linear-gradient(90deg, #f5c76b, #fff4bd, #f6c453);
box-shadow: 0 0 22px rgba(245, 199, 107, 0.38);
}
html[data-theme="glass"] body.vip-page .vip-chip,
html[data-theme="glass"] body.vip-page .vip-tier-row {
border-color: rgba(245, 199, 107, 0.17);
background: rgba(255, 255, 255, 0.055);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html[data-theme="glass"] body.vip-page .vip-tier-row.is-current {
border-color: rgba(245, 199, 107, 0.54);
background: linear-gradient(90deg, rgba(245, 199, 107, 0.16), rgba(255, 255, 255, 0.04));
box-shadow: 0 18px 48px rgba(245, 199, 107, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.13);
}
html[data-theme="glass"] body.referral-page {
background:
radial-gradient(circle at 18% -8%, rgba(var(--gg-accent-2-rgb), 0.22), transparent 32rem),
radial-gradient(circle at 90% 4%, rgba(245, 199, 107, 0.14), transparent 26rem),
linear-gradient(145deg, #05070d, #07111f 48%, #081a16) !important;
}
html[data-theme="glass"] body.referral-page .hero-card {
border-radius: 32px;
border-color: rgba(var(--gg-accent-2-rgb), 0.26);
background:
radial-gradient(circle at 17% 0%, rgba(var(--gg-accent-2-rgb), 0.2), transparent 22rem),
radial-gradient(circle at 86% 18%, rgba(245, 199, 107, 0.15), transparent 18rem),
linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03) 44%, rgba(2, 19, 15, 0.52)),
rgba(7, 17, 31, 0.76);
box-shadow: 0 34px 105px rgba(0, 0, 0, 0.48), 0 0 72px rgba(var(--gg-accent-deep-rgb), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.15);
backdrop-filter: blur(28px) saturate(1.32);
-webkit-backdrop-filter: blur(28px) saturate(1.32);
}
html[data-theme="glass"] body.referral-page .stat-card,
html[data-theme="glass"] body.referral-page .glass-card,
html[data-theme="glass"] body.referral-page [data-panel="overview"] > div,
html[data-theme="glass"] body.referral-page [data-panel="transfer"] .glass-card {
border-radius: 24px !important;
}
html[data-theme="glass"] body.referral-page .tabbar {
border-color: rgba(var(--gg-accent-2-rgb), 0.22);
background: rgba(5, 12, 21, 0.72);
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
html[data-theme="glass"] body.referral-page .tab-btn.active,
html[data-theme="glass"] body.referral-page .btn-brand,
html[data-theme="glass"] body.referral-page .btn-gold {
border-radius: 999px;
color: #f7f5ff;
background: linear-gradient(135deg, var(--gg-accent-2), var(--gg-accent-deep) 50%, #f5c76b) !important;
box-shadow: 0 16px 38px rgba(var(--gg-accent-deep-rgb), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
html[data-theme="glass"] body.referral-page .code-display {
border-color: rgba(var(--gg-accent-2-rgb), 0.34) !important;
background:
linear-gradient(135deg, rgba(var(--gg-accent-2-rgb), 0.11), rgba(245, 199, 107, 0.07)),
rgba(3, 9, 17, 0.76) !important;
text-shadow: 0 0 28px rgba(var(--gg-accent-2-rgb), 0.24);
}
html[data-theme="glass"] .weekly-winners-trigger {
border-radius: 16px !important;
border-color: rgba(245, 199, 107, 0.32) !important;
background: linear-gradient(145deg, rgba(245, 199, 107, 0.17), rgba(255, 255, 255, 0.04)) !important;
box-shadow: 0 14px 34px rgba(245, 199, 107, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
html[data-theme="glass"] .weekly-winners-panel {
border-left: 1px solid rgba(245, 199, 107, 0.25);
background:
radial-gradient(circle at 50% 0%, rgba(245, 199, 107, 0.16), transparent 18rem),
linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
rgba(7, 13, 24, 0.88) !important;
box-shadow: -30px 0 90px rgba(0, 0, 0, 0.55), 0 0 70px rgba(245, 199, 107, 0.13);
backdrop-filter: blur(26px) saturate(1.25);
-webkit-backdrop-filter: blur(26px) saturate(1.25);
}
html[data-theme="glass"] .weekly-winners-table,
html[data-theme="glass"] .weekly-winner-row {
border-color: rgba(245, 199, 107, 0.16) !important;
background: rgba(255, 255, 255, 0.045) !important;
}
html[data-theme="glass"] .weekly-winner-row {
margin-bottom: 0.4rem;
padding: 0.65rem 0.75rem !important;
border: 1px solid rgba(245, 199, 107, 0.12);
border-radius: 16px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
html[data-theme="glass"] .award-winnings-card {
min-height: 8.8rem;
border-color: rgba(245, 199, 107, 0.42) !important;
background:
radial-gradient(circle at 86% 2%, rgba(255, 244, 189, 0.18), transparent 12rem),
linear-gradient(135deg, rgba(245, 199, 107, 0.18), rgba(245, 158, 11, 0.07), rgba(255, 255, 255, 0.04)) !important;
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45), 0 0 60px rgba(245, 199, 107, 0.14) !important;
}
html[data-theme="glass"] .award-winnings-modal {
background: radial-gradient(circle at 50% 10%, rgba(245, 199, 107, 0.18), transparent 30rem), rgba(2, 6, 12, 0.78) !important;
}
html[data-theme="glass"] .award-winnings-modal .modal-box {
border-radius: 30px !important;
border-color: rgba(245, 199, 107, 0.32) !important;
background:
radial-gradient(circle at 22% 0%, rgba(245, 199, 107, 0.2), transparent 32%),
linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.034) 46%, rgba(30, 17, 3, 0.62)),
rgba(8, 16, 27, 0.76) !important;
box-shadow: 0 36px 112px rgba(0, 0, 0, 0.6), 0 0 82px rgba(245, 199, 107, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}
html[data-theme="glass"] .award-winnings-modal input,
html[data-theme="glass"] .award-winnings-modal button {
border-radius: 18px !important;
}
html[data-theme="glass"] .award-winnings-modal #winClaimSubmitBtn {
border-radius: 999px !important;
background: linear-gradient(135deg, #fff4bd, #f5c76b 48%, #f59e0b) !important;
box-shadow: 0 18px 42px rgba(245, 199, 107, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
html[data-theme="glass"] .notif-dropdown {
width: min(24rem, calc(100vw - 1.5rem)) !important;
padding: 0.45rem;
border-radius: 24px !important;
border-color: rgba(var(--gg-accent-2-rgb), 0.2) !important;
background:
radial-gradient(circle at 18% 0%, rgba(var(--gg-accent-2-rgb), 0.12), transparent 16rem),
rgba(7, 13, 24, 0.92) !important;
box-shadow: 0 28px 84px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
backdrop-filter: blur(28px) saturate(1.3);
-webkit-backdrop-filter: blur(28px) saturate(1.3);
}
html[data-theme="glass"] .notification-card {
margin: 0.45rem 0;
border: 1px solid rgba(var(--gg-accent-2-rgb), 0.12);
border-radius: 18px;
background: rgba(255, 255, 255, 0.045) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
html[data-theme="glass"] .notification-card.is-unread {
border-color: rgba(var(--gg-accent-2-rgb), 0.34);
background: linear-gradient(135deg, rgba(var(--gg-accent-2-rgb), 0.11), rgba(255, 255, 255, 0.04)) !important;
}
html[data-theme="glass"] .notification-card.is-approved {
border-color: rgba(var(--gg-accent-deep-rgb), 0.32);
}
html[data-theme="glass"] .notification-card.is-rejected,
html[data-theme="glass"] .notification-card.is-warning {
border-color: rgba(248, 113, 113, 0.34);
}
@media (prefers-reduced-motion: no-preference) {
html[data-theme="glass"] .vip-page-hero,
html[data-theme="glass"] body.vip-page .vip-hero,
html[data-theme="glass"] body.referral-page .hero-card,
html[data-theme="glass"] body.referral-page .stat-card,
html[data-theme="glass"] .award-winnings-card,
html[data-theme="glass"] .notification-card {
animation: ggPremiumAppear 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
html[data-theme="glass"] .award-winnings-card:hover,
html[data-theme="glass"] .notification-card:hover,
html[data-theme="glass"] .weekly-winner-row:hover,
html[data-theme="glass"] body.referral-page .stat-card:hover,
html[data-theme="glass"] body.vip-page .vip-tier-row:hover {
transform: translateY(-2px);
}
}
@keyframes ggPremiumAppear {
from { opacity: 0; transform: translateY(14px) scale(0.99); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 640px) {
html[data-theme="glass"] .vip-page-hero,
html[data-theme="glass"] body.vip-page .vip-hero,
html[data-theme="glass"] body.referral-page .hero-card {
border-radius: 24px;
}
html[data-theme="glass"] .notif-dropdown {
right: -3.4rem !important;
}
}
/* Phase 6: final player polish */
html[data-theme="glass"] body.profile-page main {
position: relative;
}
html[data-theme="glass"] body.profile-page main::before {
content: "";
position: fixed;
width: 34rem;
height: 34rem;
right: -12rem;
top: 8rem;
pointer-events: none;
border-radius: 999px;
background: radial-gradient(circle, rgba(var(--gg-accent-2-rgb), 0.16), transparent 70%);
animation: ggAmbientFloat 13s ease-in-out infinite;
}
html[data-theme="glass"] body.profile-page nav {
border-bottom-color: rgba(var(--gg-accent-2-rgb), 0.16) !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025)),
rgba(4, 9, 16, 0.76) !important;
box-shadow: 0 20px 64px rgba(0, 0, 0, 0.36), inset 0 -1px 0 rgba(255, 255, 255, 0.08);
backdrop-filter: blur(24px) saturate(1.25) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.25) !important;
}
html[data-theme="glass"] body.profile-page .profile-hero {
overflow: hidden;
border-radius: 32px !important;
border-color: rgba(var(--gg-accent-2-rgb), 0.28) !important;
background:
radial-gradient(circle at 13% 0%, rgba(var(--gg-accent-2-rgb), 0.22), transparent 22rem),
radial-gradient(circle at 88% 10%, rgba(155, 92, 255, 0.16), transparent 19rem),
linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.034) 45%, rgba(4, 14, 24, 0.58)),
rgba(8, 16, 27, 0.72) !important;
box-shadow: 0 34px 108px rgba(0, 0, 0, 0.5), 0 0 82px rgba(var(--gg-accent-deep-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}
html[data-theme="glass"] body.profile-page .profile-hero h1 {
letter-spacing: 0;
text-shadow: 0 0 34px rgba(var(--gg-accent-2-rgb), 0.18);
}
html[data-theme="glass"] body.profile-page .avatar-ring,
html[data-theme="glass"] body.profile-page .avatar-ring-sm {
border: 1px solid rgba(var(--gg-accent-2-rgb), 0.34);
box-shadow: 0 0 0 4px rgba(var(--gg-accent-2-rgb), 0.08), 0 22px 52px rgba(0, 0, 0, 0.38), 0 0 44px rgba(var(--gg-accent-deep-rgb), 0.16) !important;
}
html[data-theme="glass"] body.profile-page .profile-tabs {
top: 74px;
border-color: rgba(var(--gg-accent-2-rgb), 0.22);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.028)),
rgba(5, 12, 22, 0.76);
box-shadow: 0 20px 64px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
html[data-theme="glass"] body.profile-page .profile-tab {
color: rgba(244, 255, 249, 0.58);
transition: transform 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
html[data-theme="glass"] body.profile-page .profile-tab.active {
color: #06110e;
background: linear-gradient(135deg, var(--gg-mint), var(--gg-emerald) 50%, var(--gg-cyan));
box-shadow: 0 14px 36px rgba(var(--gg-accent-deep-rgb), 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
html[data-theme="glass"] body.profile-page .profile-tab:hover:not(.active) {
color: var(--gg-mint);
background: rgba(var(--gg-accent-2-rgb), 0.095);
}
html[data-theme="glass"] body.profile-page h2 {
letter-spacing: 0.12em;
}
html[data-theme="glass"] body.profile-page #statsGrid .glass-card,
html[data-theme="glass"] body.profile-page #linkedIdsList .glass-card,
html[data-theme="glass"] body.profile-page #vipPerIdCards .glass-card,
html[data-theme="glass"] body.profile-page #sec2faContent > div,
html[data-theme="glass"] body.profile-page [data-recovery-step],
html[data-theme="glass"] body.profile-page .profile-appearance-panel label {
border-color: rgba(var(--gg-accent-2-rgb), 0.18) !important;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.092), rgba(255, 255, 255, 0.025)),
rgba(8, 18, 30, 0.58) !important;
box-shadow: 0 18px 56px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}
html[data-theme="glass"] body.profile-page .profile-appearance-panel > div > .glass-card {
max-width: 46rem;
margin-inline: auto;
border-radius: 30px !important;
}
html[data-theme="glass"] body.profile-page .profile-appearance-panel label {
border-radius: 22px !important;
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
html[data-theme="glass"] body.profile-page .profile-appearance-panel label:has(input:checked) {
border-color: rgba(var(--gg-accent-2-rgb), 0.46) !important;
box-shadow: 0 24px 70px rgba(var(--gg-accent-deep-rgb), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
html[data-theme="glass"] body.profile-page .profile-appearance-panel label:hover {
transform: translateY(-2px);
}
html[data-theme="glass"] body.profile-page .profile-history-panel > .glass-card {
overflow: hidden;
border-radius: 30px !important;
}
html[data-theme="glass"] body.profile-page .profile-history-panel .grid.grid-cols-3 {
padding: 0.8rem;
border: 1px solid rgba(var(--gg-accent-2-rgb), 0.14);
border-radius: 22px;
background: rgba(255, 255, 255, 0.04);
}
html[data-theme="glass"] body.profile-page #txList > div {
border-radius: 20px !important;
}
html[data-theme="glass"] body.profile-page #txList > div:not(.text-center) {
padding: 1rem !important;
border: 1px solid rgba(var(--gg-accent-2-rgb), 0.15) !important;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.024)),
rgba(7, 16, 27, 0.62) !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
html[data-theme="glass"] body.profile-page #txList > div:not(.text-center):hover {
transform: translateY(-2px);
border-color: rgba(var(--gg-accent-2-rgb), 0.34) !important;
box-shadow: 0 22px 64px rgba(0, 0, 0, 0.36), 0 0 44px rgba(var(--gg-accent-deep-rgb), 0.1);
}
html[data-theme="glass"] .status-badge,
html[data-theme="glass"] [class*="status-"],
html[data-theme="glass"] .type-badge,
html[data-theme="glass"] [class*="type-"] {
border-radius: 999px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
html[data-theme="glass"] .status-approved {
background: rgba(var(--gg-accent-deep-rgb), 0.16) !important;
border-color: rgba(var(--gg-accent-2-rgb), 0.34) !important;
}
html[data-theme="glass"] .status-pending,
html[data-theme="glass"] .status-processing {
background: rgba(245, 199, 107, 0.14) !important;
border-color: rgba(245, 199, 107, 0.32) !important;
}
html[data-theme="glass"] .status-rejected,
html[data-theme="glass"] .toast.error {
background: rgba(127, 29, 29, 0.22) !important;
border-color: rgba(248, 113, 113, 0.36) !important;
}
html[data-theme="glass"] body.dashboard-page #bankCard,
html[data-theme="glass"] body.dashboard-page #receiptDropzone,
html[data-theme="glass"] body.dashboard-page #scanSteps > div,
html[data-theme="glass"] body.dashboard-page #wdSavedAccountsList > div,
html[data-theme="glass"] body.dashboard-page #wdLastDepositInfo > div,
html[data-theme="glass"] body.dashboard-page #trTargetPreview,
html[data-theme="glass"] body.dashboard-page #transferLockedContent,
html[data-theme="glass"] body.dashboard-page #modalJoinRequest .modal-box,
html[data-theme="glass"] body.dashboard-page #modalConfirm .modal-box,
html[data-theme="glass"] body.dashboard-page #modalSuccess .modal-box,
html[data-theme="glass"] body.dashboard-page #modalInfo .modal-box,
html[data-theme="glass"] body.dashboard-page #modalAnnouncementsList .modal-box,
html[data-theme="glass"] body.dashboard-page #modalLinkId .modal-box,
html[data-theme="glass"] body.dashboard-page #modalUnlinkId .modal-box {
border-color: rgba(var(--gg-accent-2-rgb), 0.2) !important;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.025)),
rgba(8, 18, 30, 0.66) !important;
box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
backdrop-filter: blur(26px) saturate(1.28) !important;
-webkit-backdrop-filter: blur(26px) saturate(1.28) !important;
}
html[data-theme="glass"] body.dashboard-page #bankCard {
border-color: rgba(var(--gg-accent-2-rgb), 0.32) !important;
background:
radial-gradient(circle at 86% 0%, rgba(99, 102, 241, 0.13), transparent 13rem),
linear-gradient(145deg, rgba(var(--gg-accent-2-rgb), 0.12), rgba(255, 255, 255, 0.028)),
rgba(6, 15, 26, 0.72) !important;
}
html[data-theme="glass"] body.dashboard-page #bankCard::before {
content: "Payment Method";
display: inline-flex;
margin-bottom: 0.65rem;
padding: 0.24rem 0.6rem;
border: 1px solid rgba(var(--gg-accent-2-rgb), 0.18);
border-radius: 999px;
color: rgba(var(--gg-accent-2-rgb), 0.84);
background: rgba(var(--gg-accent-2-rgb), 0.08);
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
html[data-theme="glass"] body.dashboard-page #bankQr,
html[data-theme="glass"] body.dashboard-page #qrCode,
html[data-theme="glass"] body.dashboard-page img[src*="qr"],
html[data-theme="glass"] body.dashboard-page canvas[id*="qr" i] {
padding: 0.65rem;
border: 1px solid rgba(99, 102, 241, 0.28);
border-radius: 24px;
background: linear-gradient(145deg, #f8fffc, #c7fff0);
box-shadow: 0 22px 64px rgba(99, 102, 241, 0.18);
}
html[data-theme="glass"] body.dashboard-page #receiptDropzone {
border-style: solid !important;
border-radius: 24px !important;
}
html[data-theme="glass"] body.dashboard-page #receiptDropzone:hover {
transform: translateY(-2px);
border-color: rgba(var(--gg-accent-2-rgb), 0.46) !important;
}
html[data-theme="glass"] body.dashboard-page #clubSupportBtn {
min-height: 8.5rem;
border-color: rgba(103, 232, 249, 0.34) !important;
background:
radial-gradient(circle at 14% 0%, rgba(103, 232, 249, 0.16), transparent 14rem),
linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
rgba(7, 16, 27, 0.66) !important;
}
html[data-theme="glass"] body.dashboard-page #recentRequestsList > div,
html[data-theme="glass"] body.referral-page #transferHistory > div,
html[data-theme="glass"] body.referral-page #earningsList > div,
html[data-theme="glass"] body.referral-page #referralList > div {
margin: 0.55rem;
border: 1px solid rgba(var(--gg-accent-2-rgb), 0.13) !important;
border-radius: 18px !important;
background: rgba(255, 255, 255, 0.045) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
html[data-theme="glass"] .empty-state,
html[data-theme="glass"] #recentRequestsEmpty,
html[data-theme="glass"] #notifEmpty,
html[data-theme="glass"] .text-center.py-8.text-dark-500,
html[data-theme="glass"] .text-center.py-10.text-dark-500,
html[data-theme="glass"] .text-center.py-12.text-dark-500 {
border: 1px dashed rgba(var(--gg-accent-2-rgb), 0.2);
border-radius: 22px;
background:
radial-gradient(circle at 50% 0%, rgba(var(--gg-accent-2-rgb), 0.08), transparent 14rem),
rgba(255, 255, 255, 0.035) !important;
}
html[data-theme="glass"] .loading-spinner,
html[data-theme="glass"] .spinner {
border-color: rgba(var(--gg-accent-2-rgb), 0.2) !important;
border-top-color: var(--gg-mint) !important;
filter: drop-shadow(0 0 12px rgba(var(--gg-accent-2-rgb), 0.25));
}
html[data-theme="glass"] .toast,
html[data-theme="glass"] #toast,
html[data-theme="glass"] #toastInner {
border-color: rgba(var(--gg-accent-2-rgb), 0.25) !important;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025)),
rgba(5, 12, 22, 0.9) !important;
box-shadow: 0 24px 72px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
backdrop-filter: blur(24px) saturate(1.25);
-webkit-backdrop-filter: blur(24px) saturate(1.25);
}
html[data-theme="glass"] .modal-backdrop,
html[data-theme="glass"] .modal-overlay {
background:
radial-gradient(circle at 50% 18%, rgba(var(--gg-accent-2-rgb), 0.12), transparent 30rem),
rgba(2, 6, 12, 0.78) !important;
backdrop-filter: blur(14px) saturate(1.18) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.18) !important;
}
html[data-theme="glass"] body.dashboard-page #modalSuccess .modal-box {
border-color: rgba(var(--gg-accent-2-rgb), 0.34) !important;
background:
radial-gradient(circle at 50% 0%, rgba(var(--gg-accent-2-rgb), 0.16), transparent 18rem),
linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.034) 46%, rgba(4, 20, 17, 0.58)),
rgba(8, 16, 27, 0.78) !important;
}
html[data-theme="glass"] body.dashboard-page #modalSuccess .w-14,
html[data-theme="glass"] body.dashboard-page #modalSuccess .w-16 {
background: linear-gradient(135deg, #22C55E, #16a34a) !important;
color: #04130b !important;
box-shadow: 0 18px 46px rgba(34, 197, 94, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.44);
}
html[data-theme="glass"] body.dashboard-page #modalInfo .modal-box,
html[data-theme="glass"] body.dashboard-page #modalConfirm .modal-box {
border-radius: 30px !important;
}
html[data-theme="glass"] button,
html[data-theme="glass"] a,
html[data-theme="glass"] label,
html[data-theme="glass"] select {
-webkit-tap-highlight-color: transparent;
}
html[data-theme="glass"] button:active,
html[data-theme="glass"] a:active {
transform: translateY(0) scale(0.985);
}
@media (prefers-reduced-motion: no-preference) {
html[data-theme="glass"] .profile-tab-panel:not(.hidden),
html[data-theme="glass"] body.dashboard-page #recentRequestsList > div,
html[data-theme="glass"] body.referral-page #transferHistory > div,
html[data-theme="glass"] body.profile-page #txList > div,
html[data-theme="glass"] .empty-state {
animation: ggPremiumAppear 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
html[data-theme="glass"] .modal-backdrop:not(.hidden) .modal-box,
html[data-theme="glass"] .modal-overlay:not(.hidden) .modal-box {
animation: ggFinanceModalIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
}
@media (max-width: 760px) {
html[data-theme="glass"] body.profile-page .profile-hero,
html[data-theme="glass"] body.profile-page .profile-history-panel > .glass-card,
html[data-theme="glass"] body.profile-page .profile-appearance-panel > div > .glass-card {
border-radius: 24px !important;
}
html[data-theme="glass"] body.profile-page .profile-history-panel .grid.grid-cols-3 {
grid-template-columns: 1fr;
}
}
/* Final luxury direction: darker smoked glass, violet identity, restrained feature accents */
html[data-theme="glass"] {
--gg-black: #05060A;
--gg-navy: #0A0B14;
--gg-graphite: #10111C;
--gg-violet-deep: #1b1232;
--gg-indigo: #34206f;
--gg-panel: rgba(16, 17, 28, 0.78);
--gg-panel-strong: rgba(21, 23, 40, 0.9);
--gg-glass-border: rgba(var(--gg-accent-3-rgb), 0.085);
--gg-glass-border-strong: rgba(var(--gg-accent-2-rgb), 0.28);
--gg-emerald: #22C55E;
--gg-mint: var(--gg-accent-2);
--gg-cyan: #7dd3fc;
--gg-gold: #F6C453;
--gg-purple: var(--gg-accent-2);
--gg-blue: #60a5fa;
--gg-text: #F8FAFC;
--gg-muted: #9CA3AF;
--gg-shadow: 0 34px 100px rgba(0, 0, 0, 0.72);
color-scheme: dark;
}
html[data-theme="glass"],
html[data-theme="glass"] body {
background:
radial-gradient(circle at 18% -18%, rgba(88, 28, 135, 0.16), transparent 32rem),
radial-gradient(circle at 88% 8%, rgba(30, 38, 84, 0.13), transparent 28rem),
radial-gradient(circle at 44% 104%, rgba(60, 40, 110, 0.12), transparent 34rem),
linear-gradient(145deg, #05060A 0%, #07080F 42%, #0A0B14 72%, #06070C 100%) !important;
color: var(--gg-text) !important;
}
html[data-theme="glass"] body::before {
background:
linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
background-size: 72px 72px;
opacity: 0.48;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 78%);
}
html[data-theme="glass"] ::selection {
color: #f4f1ff;
background: rgba(var(--gg-accent-deep-rgb), 0.72);
}
html[data-theme="glass"] ::-webkit-scrollbar-track { background: #070811 !important; }
html[data-theme="glass"] ::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--gg-accent-2), var(--gg-accent-deep)) !important;
border: 2px solid #070811;
}
html[data-theme="glass"] .glass,
html[data-theme="glass"] .glass-card,
html[data-theme="glass"] .stat-card,
html[data-theme="glass"] .profile-card,
html[data-theme="glass"] .club-swipe-card,
html[data-theme="glass"] .empty-state,
html[data-theme="glass"] .modal-box,
html[data-theme="glass"] .admin-table,
html[data-theme="glass"] .form-input,
html[data-theme="glass"] .input-field,
html[data-theme="glass"] .otp-input,
html[data-theme="glass"] .toast > div,
html[data-theme="glass"] select,
html[data-theme="glass"] textarea,
html[data-theme="glass"] input[type="text"],
html[data-theme="glass"] input[type="tel"],
html[data-theme="glass"] input[type="email"],
html[data-theme="glass"] input[type="password"],
html[data-theme="glass"] input[type="number"],
html[data-theme="glass"] input[type="date"],
html[data-theme="glass"] input[type="search"] {
backdrop-filter: blur(14px) saturate(1.08) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
}
html[data-theme="glass"] .glass,
html[data-theme="glass"] .glass-card,
html[data-theme="glass"] .stat-card,
html[data-theme="glass"] .profile-card,
html[data-theme="glass"] .empty-state,
html[data-theme="glass"] .modal-box,
html[data-theme="glass"] .club-swipe-card,
html[data-theme="glass"] .dashboard-welcome-copy,
html[data-theme="glass"] .dashboard-balance-card,
html[data-theme="glass"] .dashboard-panel,
html[data-theme="glass"] .dashboard-action-card {
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.018) 46%, rgba(4, 5, 12, 0.28)),
var(--gg-panel) !important;
border-color: var(--gg-glass-border) !important;
box-shadow: var(--gg-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.075) !important;
}
html[data-theme="glass"] .glass::after,
html[data-theme="glass"] .glass-card::after,
html[data-theme="glass"] .stat-card::after,
html[data-theme="glass"] .profile-card::after,
html[data-theme="glass"] .club-swipe-card::after,
html[data-theme="glass"] .modal-box::after,
html[data-theme="glass"] .dashboard-welcome-copy::after,
html[data-theme="glass"] .dashboard-balance-card::after,
html[data-theme="glass"] .dashboard-panel::after,
html[data-theme="glass"] .dashboard-action-card::after {
background: linear-gradient(122deg, rgba(255, 255, 255, 0.075), transparent 30%, transparent 76%, rgba(var(--gg-accent-2-rgb), 0.045));
opacity: 0.32;
}
html[data-theme="glass"] header.glass,
html[data-theme="glass"] .sticky.glass,
html[data-theme="glass"] body.dashboard-page #appWrapper > nav,
html[data-theme="glass"] body.dashboard-page #profileBar,
html[data-theme="glass"] body.profile-page nav,
html[data-theme="glass"] body.profile-page .profile-tabs,
html[data-theme="glass"] body.referral-page .tabbar {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.015)),
rgba(8, 9, 18, 0.82) !important;
border-color: rgba(178, 154, 255, 0.14) !important;
box-shadow: 0 22px 68px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
backdrop-filter: blur(16px) saturate(1.08) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}
html[data-theme="glass"] .btn-primary,
html[data-theme="glass"] button.bg-brand-600,
html[data-theme="glass"] a.bg-brand-600,
html[data-theme="glass"] .club-tab.active,
html[data-theme="glass"] .nav-tab.active,
html[data-theme="glass"] .period-btn.active,
html[data-theme="glass"] body.profile-page .profile-tab.active {
color: #f4f1ff !important;
background:
linear-gradient(135deg, rgba(var(--gg-accent-2-rgb), 0.88), rgba(91, 66, 173, 0.9) 52%, rgba(42, 31, 96, 0.96)) !important;
border-color: rgba(196, 181, 253, 0.32) !important;
box-shadow: 0 16px 36px rgba(38, 26, 86, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}
html[data-theme="glass"] .btn-ghost,
html[data-theme="glass"] .btn-secondary,
html[data-theme="glass"] .period-btn,
html[data-theme="glass"] .club-tab,
html[data-theme="glass"] .nav-tab,
html[data-theme="glass"] button.border,
html[data-theme="glass"] a.border {
background: rgba(13, 14, 25, 0.7) !important;
border-color: rgba(178, 154, 255, 0.13) !important;
color: rgba(235, 234, 244, 0.76) !important;
}
html[data-theme="glass"] .btn-ghost:hover,
html[data-theme="glass"] .btn-secondary:hover,
html[data-theme="glass"] .period-btn:hover,
html[data-theme="glass"] .club-tab:hover,
html[data-theme="glass"] .nav-tab:hover,
html[data-theme="glass"] button.border:hover,
html[data-theme="glass"] a.border:hover,
html[data-theme="glass"] body.profile-page .profile-tab:hover:not(.active) {
color: #d8d0ff !important;
border-color: rgba(196, 181, 253, 0.28) !important;
background: rgba(var(--gg-accent-2-rgb), 0.075) !important;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="glass"] .form-input,
html[data-theme="glass"] .input-field,
html[data-theme="glass"] .otp-input,
html[data-theme="glass"] select,
html[data-theme="glass"] textarea,
html[data-theme="glass"] input[type="text"],
html[data-theme="glass"] input[type="tel"],
html[data-theme="glass"] input[type="email"],
html[data-theme="glass"] input[type="password"],
html[data-theme="glass"] input[type="number"],
html[data-theme="glass"] input[type="date"],
html[data-theme="glass"] input[type="search"] {
color: rgba(241, 240, 248, 0.92) !important;
background: rgba(6, 7, 14, 0.76) !important;
border-color: rgba(178, 154, 255, 0.14) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}
html[data-theme="glass"] .form-input:focus,
html[data-theme="glass"] .input-field:focus,
html[data-theme="glass"] .otp-input:focus,
html[data-theme="glass"] select:focus,
html[data-theme="glass"] textarea:focus,
html[data-theme="glass"] input:focus {
border-color: rgba(var(--gg-accent-2-rgb), 0.58) !important;
box-shadow: 0 0 0 3px rgba(var(--gg-accent-deep-rgb), 0.15), 0 14px 34px rgba(0, 0, 0, 0.26) !important;
}
html[data-theme="glass"] .admin-table,
html[data-theme="glass"] table,
html[data-theme="glass"] .border-dark-900,
html[data-theme="glass"] .border-dark-800,
html[data-theme="glass"] .border-dark-700,
html[data-theme="glass"] .border-slate-800,
html[data-theme="glass"] .border-slate-700 {
border-color: rgba(178, 154, 255, 0.11) !important;
}
html[data-theme="glass"] .admin-table th,
html[data-theme="glass"] table th {
color: rgba(235, 234, 244, 0.64) !important;
background: rgba(var(--gg-accent-2-rgb), 0.045) !important;
border-color: rgba(178, 154, 255, 0.1) !important;
}
html[data-theme="glass"] .admin-table td,
html[data-theme="glass"] table td {
border-color: rgba(178, 154, 255, 0.07) !important;
}
html[data-theme="glass"] .admin-table tr:hover td,
html[data-theme="glass"] table tbody tr:hover td {
background: rgba(var(--gg-accent-2-rgb), 0.045) !important;
}
html[data-theme="glass"] .text-brand-300,
html[data-theme="glass"] .text-brand-400,
html[data-theme="glass"] .text-brand-500 {
color: var(--gg-accent-3) !important;
}
html[data-theme="glass"] .text-emerald-300,
html[data-theme="glass"] .text-emerald-400 {
color: #86efac !important;
}
html[data-theme="glass"] .text-blue-300,
html[data-theme="glass"] .text-blue-400 {
color: #93c5fd !important;
}
html[data-theme="glass"] .text-cyan-300,
html[data-theme="glass"] .text-cyan-400 {
color: #a5f3fc !important;
}
html[data-theme="glass"] .text-purple-300,
html[data-theme="glass"] .text-purple-400,
html[data-theme="glass"] .text-indigo-300,
html[data-theme="glass"] .text-indigo-400 {
color: var(--gg-accent-3) !important;
}
html[data-theme="glass"] .glow-green,
html[data-theme="glass"] .glow-green-sm,
html[data-theme="glass"] .glow-green-hover:hover,
html[data-theme="glass"] .border-glow {
box-shadow: 0 18px 54px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(178, 154, 255, 0.12) !important;
}
html[data-theme="glass"] .spinner,
html[data-theme="glass"] .loading-spinner {
border-color: rgba(178, 154, 255, 0.18) !important;
border-top-color: var(--gg-accent-2) !important;
filter: none !important;
}
html[data-theme="glass"] .swipe-slide.slide-center .club-swipe-card,
html[data-theme="glass"] .profile-card:hover,
html[data-theme="glass"] .stat-card:hover {
transform: translateY(-2px);
border-color: rgba(196, 181, 253, 0.24) !important;
box-shadow: 0 26px 76px rgba(0, 0, 0, 0.58), 0 18px 58px rgba(41, 29, 88, 0.18) !important;
}
html[data-theme="glass"] .modal-backdrop,
html[data-theme="glass"] .modal-overlay,
html[data-theme="glass"] #loadingOverlay {
background:
radial-gradient(circle at 50% 18%, rgba(82, 59, 161, 0.13), transparent 30rem),
rgba(3, 4, 10, 0.84) !important;
backdrop-filter: blur(10px) saturate(1.02) !important;
-webkit-backdrop-filter: blur(10px) saturate(1.02) !important;
}
html[data-theme="glass"] .dashboard-stage::before {
background: radial-gradient(circle, rgba(75, 57, 143, 0.18), transparent 72%);
opacity: 0.42;
}
html[data-theme="glass"] .dashboard-stage::after {
background: radial-gradient(circle, rgba(27, 42, 96, 0.16), transparent 72%);
opacity: 0.36;
}
html[data-theme="glass"] .dashboard-welcome-copy::before {
background: radial-gradient(circle, rgba(111, 81, 199, 0.16), transparent 70%);
}
html[data-theme="glass"] .dashboard-kicker,
html[data-theme="glass"] .dashboard-live-pill {
color: rgba(196, 181, 253, 0.82) !important;
box-shadow: none;
}
html[data-theme="glass"] .dashboard-welcome h1,
html[data-theme="glass"] .dashboard-section-heading h2,
html[data-theme="glass"] body.profile-page .profile-hero h1 {
color: rgba(244, 243, 250, 0.94) !important;
text-shadow: none !important;
}
html[data-theme="glass"] .dashboard-welcome h1 {
font-size: clamp(2rem, 5.2vw, 4.1rem);
line-height: 1;
font-weight: 820;
}
html[data-theme="glass"] .dashboard-welcome p,
html[data-theme="glass"] .dashboard-balance-top,
html[data-theme="glass"] .dashboard-balance-foot,
html[data-theme="glass"] .dashboard-action-pill,
html[data-theme="glass"] body.profile-page .profile-tab {
color: rgba(235, 234, 244, 0.58) !important;
}
html[data-theme="glass"] .dashboard-balance-card {
border-color: rgba(196, 181, 253, 0.2) !important;
background:
radial-gradient(circle at 22% 8%, rgba(113, 84, 211, 0.16), transparent 36%),
linear-gradient(145deg, rgba(59, 43, 130, 0.22), rgba(18, 22, 39, 0.74) 54%, rgba(6, 7, 14, 0.88)) !important;
box-shadow: 0 34px 96px rgba(0, 0, 0, 0.62), 0 22px 70px rgba(47, 34, 105, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
}
html[data-theme="glass"] .dashboard-hero-balance {
color: rgba(249, 248, 255, 0.96) !important;
text-shadow: none !important;
}
html[data-theme="glass"] .dashboard-balance-refresh {
color: var(--gg-accent-3);
border-color: rgba(196, 181, 253, 0.17) !important;
background: rgba(255, 255, 255, 0.055) !important;
}
html[data-theme="glass"] .dashboard-action-card::before {
opacity: 0.24;
}
html[data-theme="glass"] .dashboard-action-card:hover {
transform: translateY(-3px) scale(1.005) !important;
box-shadow: 0 30px 82px rgba(0, 0, 0, 0.58), 0 18px 54px var(--action-shadow, rgba(75, 57, 143, 0.12)) !important;
}
html[data-theme="glass"] .dashboard-action-icon {
background: linear-gradient(145deg, color-mix(in srgb, var(--action-accent, var(--gg-accent-2)) 18%, transparent), rgba(255, 255, 255, 0.035)) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 12px 30px rgba(0, 0, 0, 0.22) !important;
}
html[data-theme="glass"] .dashboard-action-deposit,
html[data-theme="glass"] body.dashboard-page #modalDeposit {
--action-accent: #34d399;
--action-border: rgba(52, 211, 153, 0.28);
--action-glow: rgba(52, 211, 153, 0.12);
--action-shadow: rgba(52, 211, 153, 0.08);
}
html[data-theme="glass"] .dashboard-action-withdrawal,
html[data-theme="glass"] .dashboard-action-winnings,
html[data-theme="glass"] body.dashboard-page #modalWithdraw {
--action-accent: #e7bd68;
--action-border: rgba(231, 189, 104, 0.32);
--action-glow: rgba(231, 189, 104, 0.12);
--action-shadow: rgba(231, 189, 104, 0.08);
}
html[data-theme="glass"] .dashboard-action-transfer,
html[data-theme="glass"] body.dashboard-page #modalTransfer,
html[data-theme="glass"] body.dashboard-page #modalTransferLocked {
--action-accent: #60a5fa;
--action-border: rgba(96, 165, 250, 0.32);
--action-glow: rgba(96, 165, 250, 0.12);
--action-shadow: rgba(96, 165, 250, 0.08);
}
html[data-theme="glass"] .dashboard-action-recovery,
html[data-theme="glass"] .dashboard-action-join,
html[data-theme="glass"] .dashboard-action-support,
html[data-theme="glass"] body.dashboard-page #modalRecovery {
--action-accent: #a5f3fc;
--action-border: rgba(165, 243, 252, 0.28);
--action-glow: rgba(165, 243, 252, 0.1);
--action-shadow: rgba(165, 243, 252, 0.07);
}
html[data-theme="glass"] .dashboard-action-credit,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsInfo,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsLocked {
--action-accent: var(--gg-accent-2);
--action-border: rgba(var(--gg-accent-2-rgb), 0.34);
--action-glow: rgba(var(--gg-accent-2-rgb), 0.14);
--action-shadow: rgba(var(--gg-accent-2-rgb), 0.09);
}
html[data-theme="glass"] body.dashboard-page #modalDeposit {
--finance-accent: #34d399;
--finance-accent-2: #15803d;
--finance-rgb: 52, 211, 153;
--finance-shadow: rgba(52, 211, 153, 0.11);
}
html[data-theme="glass"] body.dashboard-page #modalWithdraw {
--finance-accent: #e7bd68;
--finance-accent-2: #b7791f;
--finance-rgb: 231, 189, 104;
--finance-shadow: rgba(231, 189, 104, 0.12);
}
html[data-theme="glass"] body.dashboard-page #modalTransfer,
html[data-theme="glass"] body.dashboard-page #modalTransferLocked {
--finance-accent: #60a5fa;
--finance-accent-2: #2563eb;
--finance-rgb: 96, 165, 250;
--finance-shadow: rgba(96, 165, 250, 0.11);
}
html[data-theme="glass"] body.dashboard-page #modalRecovery {
--finance-accent: #a5f3fc;
--finance-accent-2: #0891b2;
--finance-rgb: 165, 243, 252;
--finance-shadow: rgba(165, 243, 252, 0.1);
}
html[data-theme="glass"] body.dashboard-page #modalSeatUnits,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsInfo,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsLocked {
--finance-accent: var(--gg-accent-3);
--finance-accent-2: #6d5bd0;
--finance-rgb: 196, 181, 253;
--finance-shadow: rgba(var(--gg-accent-2-rgb), 0.12);
}
html[data-theme="glass"] body.dashboard-page #modalDeposit,
html[data-theme="glass"] body.dashboard-page #modalWithdraw,
html[data-theme="glass"] body.dashboard-page #modalTransfer,
html[data-theme="glass"] body.dashboard-page #modalTransferLocked,
html[data-theme="glass"] body.dashboard-page #modalRecovery,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsInfo,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsLocked {
background:
radial-gradient(circle at 50% 10%, rgba(var(--finance-rgb), 0.08), transparent 28rem),
rgba(3, 4, 10, 0.84) !important;
}
html[data-theme="glass"] body.dashboard-page #modalDeposit .modal-box,
html[data-theme="glass"] body.dashboard-page #modalWithdraw .modal-box,
html[data-theme="glass"] body.dashboard-page #modalTransfer .modal-box,
html[data-theme="glass"] body.dashboard-page #modalTransferLocked .modal-box,
html[data-theme="glass"] body.dashboard-page #modalRecovery .modal-box,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits .modal-box,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsInfo .modal-box,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsLocked .modal-box,
html[data-theme="glass"] .award-winnings-modal .modal-box {
background:
radial-gradient(circle at 16% 0%, rgba(var(--finance-rgb, 196, 181, 253), 0.09), transparent 34%),
linear-gradient(150deg, rgba(255, 255, 255, 0.064), rgba(255, 255, 255, 0.018) 48%, rgba(5, 6, 13, 0.72)),
rgba(10, 12, 22, 0.86) !important;
border-color: rgba(var(--finance-rgb, 196, 181, 253), 0.18) !important;
box-shadow: 0 36px 104px rgba(0, 0, 0, 0.66), 0 18px 58px var(--finance-shadow, rgba(var(--gg-accent-2-rgb), 0.1)), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(16px) saturate(1.08) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}
html[data-theme="glass"] body.dashboard-page #modalDeposit .modal-box > div:first-child,
html[data-theme="glass"] body.dashboard-page #modalWithdraw .modal-box > div:first-child,
html[data-theme="glass"] body.dashboard-page #modalTransfer .modal-box > div:first-child,
html[data-theme="glass"] body.dashboard-page #modalTransferLocked .modal-box > div:first-child,
html[data-theme="glass"] body.dashboard-page #modalRecovery .modal-box > div:first-child,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits .modal-box > div:first-child,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsInfo .modal-box > div:first-child,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsLocked .modal-box > div:first-child {
background: rgba(9, 10, 18, 0.88) !important;
border-bottom-color: rgba(var(--finance-rgb), 0.13) !important;
}
html[data-theme="glass"] body.dashboard-page #modalDeposit #depSubmitBtn,
html[data-theme="glass"] body.dashboard-page #modalWithdraw #wdSubmitBtn,
html[data-theme="glass"] body.dashboard-page #modalTransfer #trSubmitBtn,
html[data-theme="glass"] body.dashboard-page #modalRecovery #recoveryCheckBtn,
html[data-theme="glass"] body.dashboard-page #modalRecovery #recoverySubmitBtn,
html[data-theme="glass"] body.dashboard-page #modalRecovery #recoverySuccessCloseBtn,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits #suRequestBtn,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits .modal-close-btn,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsInfo .modal-close-btn,
html[data-theme="glass"] body.dashboard-page #modalSeatUnitsLocked .modal-close-btn,
html[data-theme="glass"] .award-winnings-modal #winClaimSubmitBtn,
html[data-theme="glass"] body.referral-page .tab-btn.active,
html[data-theme="glass"] body.referral-page .btn-brand,
html[data-theme="glass"] body.referral-page .btn-gold {
color: #f8f7ff !important;
background:
linear-gradient(135deg, color-mix(in srgb, var(--finance-accent, var(--gg-accent-2)) 76%, #ffffff 10%), var(--finance-accent-2, #5b42ad)) !important;
border-color: rgba(var(--finance-rgb, 196, 181, 253), 0.32) !important;
box-shadow: 0 16px 38px var(--finance-shadow, rgba(var(--gg-accent-2-rgb), 0.12)), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}
html[data-theme="glass"] body.dashboard-page #modalDeposit #depSubmitBtn::before,
html[data-theme="glass"] body.dashboard-page #modalWithdraw #wdSubmitBtn::before,
html[data-theme="glass"] body.dashboard-page #modalTransfer #trSubmitBtn::before,
html[data-theme="glass"] body.dashboard-page #modalRecovery #recoveryCheckBtn::before,
html[data-theme="glass"] body.dashboard-page #modalRecovery #recoverySubmitBtn::before,
html[data-theme="glass"] body.dashboard-page #modalSeatUnits #suRequestBtn::before {
background: linear-gradient(105deg, transparent 0 38%, rgba(255, 255, 255, 0.18) 50%, transparent 62% 100%);
}
html[data-theme="glass"] body.vip-page {
background:
radial-gradient(circle at 50% -12%, rgba(231, 189, 104, 0.12), transparent 32rem),
radial-gradient(circle at 88% 10%, rgba(93, 66, 173, 0.13), transparent 28rem),
linear-gradient(145deg, #05050a, #090b15 54%, #11100b) !important;
}
html[data-theme="glass"] .vip-stage::before,
html[data-theme="glass"] .referral-stage::before {
background: radial-gradient(closest-side at 50% 20%, rgba(231, 189, 104, 0.08), transparent 74%);
opacity: 0.64;
}
html[data-theme="glass"] .vip-page-hero,
html[data-theme="glass"] body.vip-page .vip-hero {
background:
radial-gradient(circle at 12% 8%, rgba(231, 189, 104, 0.11), transparent 21rem),
radial-gradient(circle at 90% 0%, rgba(var(--gg-accent-2-rgb), 0.08), transparent 19rem),
linear-gradient(140deg, rgba(255, 255, 255, 0.064), rgba(255, 255, 255, 0.018) 50%, rgba(23, 16, 9, 0.4)),
rgba(11, 13, 22, 0.82) !important;
border-color: rgba(231, 189, 104, 0.2) !important;
box-shadow: 0 34px 98px rgba(0, 0, 0, 0.62), 0 18px 56px rgba(122, 83, 24, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="glass"] .vip-page-hero .brand-gradient,
html[data-theme="glass"] body.vip-page .vip-hero .w-16,
html[data-theme="glass"] body.vip-page .vip-hero .w-14 {
background: linear-gradient(135deg, #f2d38a, #c89435 52%, #7c5518) !important;
box-shadow: 0 16px 38px rgba(231, 189, 104, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}
html[data-theme="glass"] body.referral-page {
background:
radial-gradient(circle at 18% -8%, rgba(111, 81, 199, 0.16), transparent 32rem),
radial-gradient(circle at 90% 4%, rgba(231, 189, 104, 0.1), transparent 26rem),
linear-gradient(145deg, #05050a, #090d19 48%, #0d0b16) !important;
}
html[data-theme="glass"] body.referral-page .hero-card {
background:
radial-gradient(circle at 16% 0%, rgba(var(--gg-accent-2-rgb), 0.13), transparent 22rem),
radial-gradient(circle at 86% 16%, rgba(231, 189, 104, 0.1), transparent 18rem),
linear-gradient(145deg, rgba(255, 255, 255, 0.064), rgba(255, 255, 255, 0.018) 46%, rgba(16, 11, 26, 0.52)),
rgba(11, 13, 24, 0.84) !important;
border-color: rgba(196, 181, 253, 0.18) !important;
box-shadow: 0 34px 98px rgba(0, 0, 0, 0.6), 0 18px 56px rgba(87, 61, 166, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="glass"] .notif-dropdown,
html[data-theme="glass"] .toast,
html[data-theme="glass"] #toast,
html[data-theme="glass"] #toastInner {
border-color: rgba(96, 165, 250, 0.18) !important;
background:
radial-gradient(circle at 18% 0%, rgba(96, 165, 250, 0.08), transparent 16rem),
rgba(8, 10, 19, 0.94) !important;
box-shadow: 0 28px 82px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.075) !important;
}
html[data-theme="glass"] .notification-card,
html[data-theme="glass"] .notification-card.is-unread {
border-color: rgba(96, 165, 250, 0.18);
background: rgba(255, 255, 255, 0.04) !important;
}
html[data-theme="glass"] body.profile-page main::before {
background: radial-gradient(circle, rgba(93, 66, 173, 0.13), transparent 72%);
opacity: 0.58;
}
html[data-theme="glass"] body.profile-page .profile-hero {
background:
radial-gradient(circle at 13% 0%, rgba(var(--gg-accent-2-rgb), 0.13), transparent 22rem),
radial-gradient(circle at 88% 10%, rgba(46, 60, 128, 0.12), transparent 19rem),
linear-gradient(145deg, rgba(255, 255, 255, 0.064), rgba(255, 255, 255, 0.018) 45%, rgba(8, 11, 23, 0.58)),
rgba(10, 12, 22, 0.84) !important;
border-color: rgba(196, 181, 253, 0.18) !important;
box-shadow: 0 34px 98px rgba(0, 0, 0, 0.62), 0 18px 58px rgba(87, 61, 166, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="glass"] body.profile-page .avatar-ring,
html[data-theme="glass"] body.profile-page .avatar-ring-sm,
html[data-theme="glass"] body.profile-page .profile-appearance-panel label:has(input:checked) {
border-color: rgba(196, 181, 253, 0.32) !important;
box-shadow: 0 20px 52px rgba(0, 0, 0, 0.42), 0 12px 38px rgba(87, 61, 166, 0.12) !important;
}
html[data-theme="glass"] body.dashboard-page #bankCard,
html[data-theme="glass"] body.dashboard-page #receiptDropzone,
html[data-theme="glass"] body.dashboard-page #scanSteps > div,
html[data-theme="glass"] body.dashboard-page #wdSavedAccountsList > div,
html[data-theme="glass"] body.dashboard-page #wdLastDepositInfo > div,
html[data-theme="glass"] body.dashboard-page #trTargetPreview,
html[data-theme="glass"] body.dashboard-page #transferLockedContent,
html[data-theme="glass"] body.dashboard-page #modalJoinRequest .modal-box,
html[data-theme="glass"] body.dashboard-page #modalConfirm .modal-box,
html[data-theme="glass"] body.dashboard-page #modalSuccess .modal-box,
html[data-theme="glass"] body.dashboard-page #modalInfo .modal-box,
html[data-theme="glass"] body.dashboard-page #modalAnnouncementsList .modal-box,
html[data-theme="glass"] body.dashboard-page #modalLinkId .modal-box,
html[data-theme="glass"] body.dashboard-page #modalUnlinkId .modal-box,
html[data-theme="glass"] body.profile-page #statsGrid .glass-card,
html[data-theme="glass"] body.profile-page #linkedIdsList .glass-card,
html[data-theme="glass"] body.profile-page #vipPerIdCards .glass-card,
html[data-theme="glass"] body.profile-page #sec2faContent > div,
html[data-theme="glass"] body.profile-page [data-recovery-step],
html[data-theme="glass"] body.profile-page .profile-appearance-panel label,
html[data-theme="glass"] body.profile-page #txList > div:not(.text-center),
html[data-theme="glass"] body.dashboard-page #recentRequestsList > div,
html[data-theme="glass"] body.referral-page #transferHistory > div,
html[data-theme="glass"] body.referral-page #earningsList > div,
html[data-theme="glass"] body.referral-page #referralList > div,
html[data-theme="glass"] .empty-state,
html[data-theme="glass"] #recentRequestsEmpty,
html[data-theme="glass"] #notifEmpty {
border-color: rgba(178, 154, 255, 0.12) !important;
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.014)),
rgba(10, 12, 22, 0.74) !important;
box-shadow: 0 18px 58px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}
html[data-theme="glass"] body.dashboard-page #bankCard::before {
color: rgba(196, 181, 253, 0.84);
border-color: rgba(196, 181, 253, 0.16);
background: rgba(var(--gg-accent-2-rgb), 0.065);
}
html[data-theme="glass"] body.dashboard-page #bankQr,
html[data-theme="glass"] body.dashboard-page #qrCode,
html[data-theme="glass"] body.dashboard-page img[src*="qr"],
html[data-theme="glass"] body.dashboard-page canvas[id*="qr" i] {
border-color: rgba(165, 243, 252, 0.24);
background: linear-gradient(145deg, #f6f7fb, #d9e1f2);
box-shadow: 0 20px 54px rgba(0, 0, 0, 0.34);
}
html[data-theme="glass"] .empty-state,
html[data-theme="glass"] #recentRequestsEmpty,
html[data-theme="glass"] #notifEmpty,
html[data-theme="glass"] .text-center.py-8.text-dark-500,
html[data-theme="glass"] .text-center.py-10.text-dark-500,
html[data-theme="glass"] .text-center.py-12.text-dark-500 {
border-color: rgba(178, 154, 255, 0.16) !important;
background:
radial-gradient(circle at 50% 0%, rgba(var(--gg-accent-2-rgb), 0.055), transparent 14rem),
rgba(255, 255, 255, 0.028) !important;
}
html[data-theme="glass"] .status-approved {
background: rgba(52, 211, 153, 0.12) !important;
border-color: rgba(52, 211, 153, 0.24) !important;
}
html[data-theme="glass"] .status-pending,
html[data-theme="glass"] .status-processing {
background: rgba(231, 189, 104, 0.12) !important;
border-color: rgba(231, 189, 104, 0.24) !important;
}
html[data-theme="glass"] .status-rejected,
html[data-theme="glass"] .toast.error {
background: rgba(127, 29, 29, 0.18) !important;
border-color: rgba(248, 113, 113, 0.28) !important;
}
@keyframes ggAmbientFloat {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.38; }
50% { transform: translate3d(1rem, -0.75rem, 0) scale(1.025); opacity: 0.5; }
}
/* Dashboard refinement: flagship hero, balance centerpiece, integrated navigation */
html[data-theme="glass"] body.dashboard-page #appWrapper > nav,
html[data-theme="glass"] body.dashboard-page #profileBar,
html[data-theme="glass"] body.profile-page nav {
background:
linear-gradient(180deg, rgba(13, 14, 25, 0.82), rgba(8, 9, 17, 0.66)),
rgba(7, 8, 15, 0.74) !important;
border-color: rgba(210, 202, 255, 0.09) !important;
box-shadow: 0 10px 34px rgba(0, 0, 0, 0.34), inset 0 -1px 0 rgba(255, 255, 255, 0.035) !important;
backdrop-filter: blur(18px) saturate(1.02) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.02) !important;
}
html[data-theme="glass"] .nav-play-btn,
html[data-theme="glass"] body.profile-page #navReferralBtn,
html[data-theme="glass"] body.profile-page #navSuperAdminBtn,
html[data-theme="glass"] body.dashboard-page #navCounterBtn,
html[data-theme="glass"] body.dashboard-page #navAdminBtn,
html[data-theme="glass"] body.dashboard-page #navSuperAdminBtn,
html[data-theme="glass"] body.dashboard-page #navAnnouncementsBtn,
html[data-theme="glass"] body.dashboard-page #bellBtn,
html[data-theme="glass"] body.dashboard-page #switchProfileBtn,
html[data-theme="glass"] body.dashboard-page #backToProfilesBtn {
border-radius: 12px !important;
color: rgba(235, 234, 244, 0.7) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.014)),
rgba(13, 14, 24, 0.58) !important;
border: 1px solid rgba(196, 181, 253, 0.105) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 8px 22px rgba(0, 0, 0, 0.2) !important;
transition: transform 180ms ease, color 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease !important;
}
html[data-theme="glass"] .nav-play-btn:hover,
html[data-theme="glass"] body.profile-page #navReferralBtn:hover,
html[data-theme="glass"] body.profile-page #navSuperAdminBtn:hover,
html[data-theme="glass"] body.dashboard-page #navCounterBtn:hover,
html[data-theme="glass"] body.dashboard-page #navAdminBtn:hover,
html[data-theme="glass"] body.dashboard-page #navSuperAdminBtn:hover,
html[data-theme="glass"] body.dashboard-page #navAnnouncementsBtn:hover,
html[data-theme="glass"] body.dashboard-page #bellBtn:hover,
html[data-theme="glass"] body.dashboard-page #switchProfileBtn:hover,
html[data-theme="glass"] body.dashboard-page #backToProfilesBtn:hover {
color: rgba(246, 244, 255, 0.94) !important;
border-color: rgba(213, 205, 255, 0.22) !important;
background: rgba(25, 23, 42, 0.62) !important;
transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.28) !important;
}
html[data-theme="glass"] .club-tabs-scroll,
html[data-theme="glass"] .nav-tabs,
html[data-theme="glass"] body.profile-page .profile-tabs,
html[data-theme="glass"] body.referral-page .tabbar {
gap: 0.25rem;
padding: 0.28rem !important;
border-radius: 16px !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
rgba(8, 9, 18, 0.56) !important;
border: 1px solid rgba(196, 181, 253, 0.105) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 34px rgba(0, 0, 0, 0.24) !important;
}
html[data-theme="glass"] .club-tab,
html[data-theme="glass"] .nav-tab,
html[data-theme="glass"] body.profile-page .profile-tab,
html[data-theme="glass"] body.referral-page .tab-btn {
min-height: 2.35rem;
padding: 0.56rem 0.86rem !important;
border-radius: 11px !important;
color: rgba(235, 234, 244, 0.56) !important;
background: transparent !important;
border: 1px solid transparent !important;
box-shadow: none !important;
font-weight: 600;
letter-spacing: 0;
transition: transform 180ms ease, color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}
html[data-theme="glass"] .club-tab.active,
html[data-theme="glass"] .nav-tab.active,
html[data-theme="glass"] body.profile-page .profile-tab.active,
html[data-theme="glass"] body.referral-page .tab-btn.active {
color: rgba(247, 245, 255, 0.95) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.025)),
rgba(var(--gg-accent-2-rgb), 0.105) !important;
border-color: rgba(213, 205, 255, 0.18) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.085), 0 10px 28px rgba(0, 0, 0, 0.24) !important;
}
html[data-theme="glass"] .club-tab:hover,
html[data-theme="glass"] .nav-tab:hover,
html[data-theme="glass"] body.profile-page .profile-tab:hover:not(.active),
html[data-theme="glass"] body.referral-page .tab-btn:hover:not(.active) {
color: rgba(235, 234, 244, 0.86) !important;
background: rgba(255, 255, 255, 0.035) !important;
border-color: rgba(196, 181, 253, 0.12) !important;
transform: translateY(-1px);
}
html[data-theme="glass"] .dashboard-stage {
position: relative;
isolation: isolate;
}
html[data-theme="glass"] .dashboard-welcome {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.92fr);
gap: clamp(1rem, 3vw, 2rem);
align-items: stretch;
position: relative;
margin: 0 0 1.7rem;
padding: clamp(1rem, 2.4vw, 1.35rem);
border-radius: 34px;
overflow: hidden;
background:
radial-gradient(circle at 82% 12%, rgba(var(--gg-accent-2-rgb), 0.13), transparent 20rem),
radial-gradient(circle at 18% 86%, rgba(70, 57, 136, 0.12), transparent 24rem),
linear-gradient(135deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.012) 45%, rgba(5, 6, 13, 0.28)),
rgba(8, 9, 17, 0.68);
border: 1px solid rgba(220, 214, 255, 0.11);
box-shadow: 0 34px 96px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html[data-theme="glass"] .dashboard-welcome::before,
html[data-theme="glass"] .dashboard-welcome::after {
content: "";
position: absolute;
pointer-events: none;
border-radius: 999px;
filter: blur(2px);
opacity: 0.72;
z-index: 0;
}
html[data-theme="glass"] .dashboard-welcome > * {
position: relative;
z-index: 1;
}
html[data-theme="glass"] .dashboard-welcome::before {
width: 34rem;
height: 34rem;
right: -15rem;
top: -18rem;
background: radial-gradient(circle, rgba(93, 73, 177, 0.22), transparent 68%);
animation: ggHeroDrift 18s ease-in-out infinite;
}
html[data-theme="glass"] .dashboard-welcome::after {
width: 26rem;
height: 18rem;
left: -10rem;
bottom: -10rem;
background: radial-gradient(circle, rgba(37, 49, 103, 0.2), transparent 70%);
animation: ggHeroDrift 22s ease-in-out infinite reverse;
}
html[data-theme="glass"] .dashboard-welcome-copy {
min-height: 16rem;
border-radius: 28px !important;
padding: clamp(1.35rem, 3.2vw, 2.5rem) !important;
overflow: hidden;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.015) 42%, rgba(10, 11, 20, 0.34)),
rgba(11, 12, 22, 0.58) !important;
border: 1px solid rgba(226, 220, 255, 0.105) !important;
box-shadow: 0 24px 72px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
html[data-theme="glass"] .dashboard-welcome-copy::before {
width: 18rem;
height: 18rem;
right: -8rem;
top: -7rem;
background: radial-gradient(circle, rgba(196, 181, 253, 0.12), transparent 72%) !important;
}
html[data-theme="glass"] .dashboard-kicker {
width: fit-content;
padding: 0.46rem 0.72rem;
border-radius: 999px;
color: rgba(213, 205, 255, 0.78) !important;
background: rgba(255, 255, 255, 0.038);
border: 1px solid rgba(213, 205, 255, 0.12);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.12em;
}
html[data-theme="glass"] .dashboard-welcome h1 {
max-width: 8.8em;
margin-top: 1.25rem;
font-size: clamp(2.55rem, 6vw, 5.4rem);
line-height: 0.9;
font-weight: 780;
letter-spacing: 0;
color: rgba(248, 247, 255, 0.96) !important;
}
html[data-theme="glass"] .dashboard-welcome p {
max-width: 34rem;
margin-top: 1rem;
color: rgba(218, 216, 232, 0.62) !important;
font-size: clamp(0.95rem, 1.6vw, 1.08rem);
line-height: 1.7;
}
html[data-theme="glass"] .dashboard-balance-card {
min-height: 17rem;
align-self: stretch;
border-radius: 30px !important;
padding: clamp(1.2rem, 3vw, 2rem) !important;
overflow: hidden;
background:
radial-gradient(circle at 74% 2%, rgba(232, 225, 255, 0.12), transparent 16rem),
radial-gradient(circle at 22% 92%, rgba(79, 64, 152, 0.18), transparent 18rem),
linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018) 42%, rgba(2, 3, 8, 0.5)),
rgba(8, 9, 17, 0.86) !important;
border: 1px solid rgba(232, 225, 255, 0.14) !important;
box-shadow: 0 38px 110px rgba(0, 0, 0, 0.68), 0 24px 80px rgba(57, 42, 123, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
transform: translateY(0);
}
html[data-theme="glass"] .dashboard-balance-card::before {
content: "";
position: absolute;
inset: 1px;
border-radius: inherit;
pointer-events: none;
background:
linear-gradient(112deg, rgba(255, 255, 255, 0.11), transparent 20%, transparent 72%, rgba(var(--gg-accent-2-rgb), 0.07)),
linear-gradient(to bottom, rgba(255, 255, 255, 0.055), transparent 36%);
opacity: 0.72;
}
html[data-theme="glass"] .dashboard-balance-top,
html[data-theme="glass"] .dashboard-balance-foot {
position: relative;
z-index: 1;
color: rgba(222, 219, 238, 0.58) !important;
font-size: 0.72rem;
letter-spacing: 0.1em;
}
html[data-theme="glass"] .dashboard-hero-balance {
position: relative;
z-index: 1;
margin: 1.15rem 0 1rem;
color: rgba(251, 250, 255, 0.98) !important;
font-size: clamp(3.25rem, 7vw, 5.8rem);
line-height: 0.9;
font-weight: 760;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
text-shadow: 0 18px 48px rgba(0, 0, 0, 0.54) !important;
}
html[data-theme="glass"] .dashboard-live-pill {
border-radius: 999px;
padding: 0.38rem 0.62rem;
color: rgba(226, 220, 255, 0.88) !important;
background: rgba(var(--gg-accent-2-rgb), 0.09);
border: 1px solid rgba(213, 205, 255, 0.16);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075);
}
html[data-theme="glass"] .dashboard-balance-refresh {
position: relative;
z-index: 1;
width: 2.3rem;
height: 2.3rem;
border-radius: 13px !important;
color: rgba(226, 220, 255, 0.82) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
rgba(16, 17, 29, 0.66) !important;
border-color: rgba(226, 220, 255, 0.14) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 12px 26px rgba(0, 0, 0, 0.28) !important;
}
html[data-theme="glass"] .dashboard-balance-refresh:hover {
color: rgba(250, 249, 255, 0.96) !important;
border-color: rgba(226, 220, 255, 0.25) !important;
transform: translateY(-1px);
}
@keyframes ggHeroDrift {
0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.55; }
50% { transform: translate3d(-1.1rem, 0.85rem, 0) scale(1.04); opacity: 0.76; }
}
@media (max-width: 760px) {
html[data-theme="glass"] .dashboard-welcome {
grid-template-columns: 1fr;
border-radius: 28px;
padding: 0.75rem;
}
html[data-theme="glass"] .dashboard-welcome-copy,
html[data-theme="glass"] .dashboard-balance-card {
min-height: auto;
border-radius: 24px !important;
}
html[data-theme="glass"] .dashboard-welcome h1 {
font-size: clamp(2.45rem, 14vw, 4.2rem);
}
html[data-theme="glass"] .dashboard-hero-balance {
font-size: clamp(3rem, 16vw, 4.8rem);
}
html[data-theme="glass"] .club-tabs-scroll,
html[data-theme="glass"] body.profile-page .profile-tabs,
html[data-theme="glass"] body.referral-page .tabbar {
justify-content: flex-start;
overflow-x: auto;
flex-wrap: nowrap;
}
}
/* ════════════════════════════════════════════════════════════════
PREMIUM LUXURY DASHBOARD — authoritative pass
Smoked glass, environmental violet lighting, layered depth,
sectioned hierarchy: hero · focal balance · floating action tiles.
(Glass theme only; Classic dashboard is untouched.)
═══════════════════════════════════════════════════════════════ */
/* — Ambient stage: near-black, navy and violet melt into the page — */
html[data-theme="glass"] .dashboard-stage {
position: relative;
isolation: isolate;
padding-top: 1.6rem !important;
padding-bottom: 2.4rem !important;
}
html[data-theme="glass"] .dashboard-stage::before {
content: "";
position: fixed;
inset: -10% -10% auto -10%;
height: 78vh;
z-index: -2;
pointer-events: none;
background:
radial-gradient(40rem 30rem at 78% -6%, rgba(99, 78, 184, 0.16), transparent 60%),
radial-gradient(36rem 28rem at 8% 8%, rgba(38, 49, 104, 0.16), transparent 62%),
radial-gradient(50rem 40rem at 50% -20%, rgba(28, 22, 58, 0.5), transparent 70%);
animation: ggStageDrift 32s ease-in-out infinite;
}
@keyframes ggStageDrift {
0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.9; }
50% { transform: translate3d(0, 1.4rem, 0); opacity: 1; }
}
/* ── HERO: one calm flagship panel, copy left · crystal right ── */
html[data-theme="glass"] .dashboard-welcome {
display: grid !important;
grid-template-columns: minmax(0, 1.25fr) minmax(13rem, 0.85fr) !important;
align-items: center !important;
gap: clamp(1rem, 4vw, 3rem) !important;
position: relative;
margin: 0 0 1.4rem !important;
padding: clamp(1.6rem, 4vw, 3.4rem) clamp(1.5rem, 4vw, 3.6rem) !important;
border-radius: 36px !important;
overflow: hidden;
background:
radial-gradient(38rem 24rem at 88% 0%, rgba(124, 99, 201, 0.16), transparent 60%),
radial-gradient(30rem 22rem at 0% 100%, rgba(40, 33, 84, 0.34), transparent 64%),
linear-gradient(150deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01) 44%, rgba(4, 5, 11, 0.34)),
rgba(8, 8, 16, 0.72) !important;
border: 1px solid rgba(214, 206, 255, 0.07) !important;
box-shadow:
0 2px 1px rgba(255, 255, 255, 0.03) inset,
0 40px 90px -30px rgba(0, 0, 0, 0.7),
0 16px 40px -24px rgba(46, 33, 104, 0.5) !important;
}
html[data-theme="glass"] .dashboard-welcome::before,
html[data-theme="glass"] .dashboard-welcome::after {
content: "";
position: absolute;
pointer-events: none;
border-radius: 999px;
z-index: 0;
filter: blur(8px);
}
html[data-theme="glass"] .dashboard-welcome::before {
width: 30rem; height: 30rem;
right: -12rem; top: -16rem;
background: radial-gradient(circle, rgba(108, 86, 196, 0.22), transparent 66%);
animation: ggHeroDrift 24s ease-in-out infinite;
}
html[data-theme="glass"] .dashboard-welcome::after {
width: 22rem; height: 16rem;
left: -9rem; bottom: -10rem;
background: radial-gradient(circle, rgba(34, 44, 92, 0.28), transparent 70%);
animation: ggHeroDrift 30s ease-in-out infinite reverse;
}
html[data-theme="glass"] .dashboard-welcome > * { position: relative; z-index: 1; }
/* Hero copy — no card chrome; it lives directly on the hero glass */
html[data-theme="glass"] .dashboard-welcome-copy {
min-height: 0 !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
html[data-theme="glass"] .dashboard-welcome-copy::before,
html[data-theme="glass"] .dashboard-welcome-copy::after { display: none !important; }
html[data-theme="glass"] .dashboard-kicker {
width: fit-content;
padding: 0.42rem 0.78rem;
border-radius: 999px;
color: rgba(206, 197, 252, 0.72) !important;
background: rgba(255, 255, 255, 0.028);
border: 1px solid rgba(206, 197, 252, 0.1);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
html[data-theme="glass"] .dashboard-welcome h1 {
max-width: 9em;
margin-top: 1.35rem !important;
font-size: clamp(2.6rem, 6vw, 5rem) !important;
line-height: 0.92 !important;
font-weight: 600 !important;
letter-spacing: -0.02em !important;
color: rgba(247, 246, 255, 0.95) !important;
}
html[data-theme="glass"] .dashboard-welcome p {
max-width: 26rem;
margin-top: 1.05rem !important;
color: rgba(214, 212, 230, 0.5) !important;
font-size: clamp(0.92rem, 1.5vw, 1.04rem) !important;
line-height: 1.75 !important;
font-weight: 400 !important;
}
/* Hero artwork — monochromatic violet crystal, environmentally lit */
html[data-theme="glass"] .dashboard-hero-art {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 13rem;
}
html[data-theme="glass"] .dashboard-hero-art::before {
content: "";
position: absolute;
width: 18rem; height: 18rem;
border-radius: 999px;
background: radial-gradient(circle, rgba(124, 99, 201, 0.28), rgba(76, 58, 138, 0.12) 40%, transparent 68%);
filter: blur(6px);
z-index: 0;
animation: ggCrystalGlow 9s ease-in-out infinite;
}
html[data-theme="glass"] .dashboard-hero-crystal {
position: relative;
z-index: 1;
width: clamp(10rem, 18vw, 15rem);
height: auto;
filter: drop-shadow(0 24px 44px rgba(20, 13, 48, 0.6));
}
html[data-theme="glass"] .dashboard-hero-crystal-float {
transform-origin: 100px 100px;
animation: ggCrystalFloat 11s ease-in-out infinite;
}
@keyframes ggCrystalFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-10px) rotate(1.4deg); }
}
@keyframes ggCrystalGlow {
0%, 100% { opacity: 0.7; transform: scale(1); }
50% { opacity: 1; transform: scale(1.06); }
}
/* ── LIVE BALANCE — standalone focal card with decorative trend ── */
/* Hidden when the selected club does not have API Access enabled. */
html[data-theme="glass"] .dashboard-balance-card.balance-card-hidden { display: none !important; }
html[data-theme="glass"] .dashboard-balance-card {
display: block !important;
position: relative;
min-height: 0 !important;
margin: 0 0 1.9rem !important;
padding: clamp(1.5rem, 3.4vw, 2.4rem) !important;
border-radius: 30px !important;
overflow: hidden;
background:
radial-gradient(26rem 18rem at 88% -10%, rgba(124, 99, 201, 0.14), transparent 62%),
linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012) 46%, rgba(2, 3, 8, 0.46)),
rgba(7, 8, 15, 0.9) !important;
border: 1px solid rgba(220, 213, 255, 0.09) !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 46px 100px -34px rgba(0, 0, 0, 0.82),
0 20px 60px -34px rgba(57, 42, 123, 0.4) !important;
}
html[data-theme="glass"] .dashboard-balance-card::before {
content: "";
position: absolute; inset: 1px;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), transparent 30%);
opacity: 0.7;
z-index: 0;
}
html[data-theme="glass"] .dashboard-balance-card::after { display: none !important; }
html[data-theme="glass"] .dashboard-balance-card > * { position: relative; z-index: 2; }
html[data-theme="glass"] .dashboard-balance-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
}
html[data-theme="glass"] .dashboard-balance-top {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
html[data-theme="glass"] .dashboard-balance-label {
color: rgba(220, 217, 236, 0.5) !important;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
html[data-theme="glass"] .dashboard-balance-id {
color: rgba(206, 197, 252, 0.74) !important;
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.01em;
}
html[data-theme="glass"] .dashboard-live-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
border-radius: 999px;
padding: 0.34rem 0.62rem 0.34rem 0.56rem;
color: rgba(216, 209, 250, 0.86) !important;
background: rgba(var(--gg-accent-2-rgb), 0.07);
border: 1px solid rgba(206, 197, 252, 0.14);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
html[data-theme="glass"] .dashboard-live-dot {
width: 0.42rem; height: 0.42rem;
border-radius: 999px;
background: var(--gg-accent-2);
box-shadow: 0 0 8px rgba(var(--gg-accent-2-rgb), 0.8);
animation: ggLivePulse 2.6s ease-in-out infinite;
}
@keyframes ggLivePulse {
0%, 100% { opacity: 0.55; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1.1); }
}
html[data-theme="glass"] .dashboard-hero-balance {
margin: 1.25rem 0 0 !important;
color: rgba(252, 251, 255, 0.98) !important;
font-size: clamp(3rem, 8vw, 5.6rem) !important;
line-height: 0.92 !important;
font-weight: 600 !important;
letter-spacing: -0.025em !important;
font-variant-numeric: tabular-nums;
text-shadow: 0 16px 44px rgba(0, 0, 0, 0.5) !important;
}
/* Decorative, non-data trend line — thin, soft glowing purple */
html[data-theme="glass"] .dashboard-balance-graph {
position: absolute;
left: 0; right: 0; bottom: 0;
width: 100%;
height: clamp(4.5rem, 11vw, 6.5rem);
z-index: 1 !important;
opacity: 0.9;
pointer-events: none;
}
html[data-theme="glass"] .dashboard-balance-graph-line {
filter: drop-shadow(0 0 6px rgba(var(--gg-accent-2-rgb), 0.55));
stroke-dasharray: 1400;
stroke-dashoffset: 1400;
animation: ggGraphDraw 3.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}
@keyframes ggGraphDraw { to { stroke-dashoffset: 0; } }
/* Refresh — a floating, separate luxury control */
html[data-theme="glass"] .dashboard-balance-refresh {
position: absolute !important;
top: clamp(1.4rem, 3vw, 2.2rem);
right: clamp(1.4rem, 3vw, 2.2rem);
z-index: 3 !important;
width: 2.5rem; height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 14px !important;
color: rgba(220, 213, 255, 0.78) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)),
rgba(14, 15, 26, 0.7) !important;
border: 1px solid rgba(220, 213, 255, 0.12) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 30px -10px rgba(0, 0, 0, 0.6) !important;
transition: transform 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}
html[data-theme="glass"] .dashboard-balance-refresh:hover {
color: rgba(250, 249, 255, 0.96) !important;
border-color: rgba(220, 213, 255, 0.26) !important;
transform: translateY(-1px) rotate(-12deg);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 18px 38px -12px rgba(30, 20, 70, 0.7) !important;
}
html[data-theme="glass"] .dashboard-balance-refresh:active { transform: translateY(0) scale(0.94); }
/* ── SECTION HEADING ── */
html[data-theme="glass"] .dashboard-section-heading {
margin: 0 0.35rem 0.95rem !important;
}
html[data-theme="glass"] .dashboard-section-heading h2 {
font-size: 1.05rem !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
color: rgba(243, 242, 252, 0.92) !important;
}
/* ── QUICK ACTIONS — premium floating tiles ──
Body stays dark smoked glass; accent only on icon, top line, hover. */
html[data-theme="glass"] .dashboard-actions-grid {
gap: 0.9rem !important;
margin-bottom: 1.9rem !important;
}
html[data-theme="glass"] .dashboard-action-card {
min-height: 9.5rem;
padding: 1.4rem !important;
border-radius: 24px !important;
isolation: isolate;
background:
linear-gradient(155deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01) 50%, rgba(3, 4, 10, 0.36)),
rgba(9, 10, 18, 0.78) !important;
border: 1px solid rgba(216, 209, 250, 0.06) !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.035) inset,
0 30px 60px -32px rgba(0, 0, 0, 0.72) !important;
transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms ease, box-shadow 240ms ease !important;
}
/* thin accent line at the top edge — the only standing colour */
html[data-theme="glass"] .dashboard-action-card::before {
content: "";
position: absolute !important;
inset: 0 auto auto 0 !important;
top: 0; left: 1.4rem; right: 1.4rem;
width: auto !important;
height: 2px !important;
z-index: 2;
border-radius: 999px;
opacity: 0.55;
background: linear-gradient(90deg, transparent, var(--tile-accent, var(--gg-accent-2)) 18%, var(--tile-accent, var(--gg-accent-2)) 82%, transparent) !important;
}
html[data-theme="glass"] .dashboard-action-card:hover {
transform: translateY(-4px) !important;
border-color: color-mix(in srgb, var(--tile-accent, var(--gg-accent-2)) 32%, transparent) !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 40px 80px -34px rgba(0, 0, 0, 0.8),
0 0 0 1px color-mix(in srgb, var(--tile-accent, var(--gg-accent-2)) 12%, transparent),
0 24px 60px -30px color-mix(in srgb, var(--tile-accent, var(--gg-accent-2)) 30%, transparent) !important;
}
html[data-theme="glass"] .dashboard-action-card:hover::before { opacity: 0.95; }
html[data-theme="glass"] .dashboard-action-card:active { transform: translateY(-1px) scale(0.99) !important; }
/* Icon — the focal accent of each tile */
html[data-theme="glass"] .dashboard-action-icon {
position: relative;
border-radius: 16px !important;
background:
linear-gradient(150deg, color-mix(in srgb, var(--tile-accent, var(--gg-accent-2)) 22%, transparent), rgba(255, 255, 255, 0.03)) !important;
border: 1px solid color-mix(in srgb, var(--tile-accent, var(--gg-accent-2)) 28%, transparent) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
0 14px 30px -14px color-mix(in srgb, var(--tile-accent, var(--gg-accent-2)) 50%, transparent) !important;
}
html[data-theme="glass"] .dashboard-action-card svg { color: var(--tile-accent, var(--gg-accent-2)) !important; }
html[data-theme="glass"] .dashboard-action-card .dashboard-action-icon svg { color: var(--tile-accent, var(--gg-accent-2)) !important; }
html[data-theme="glass"] .dashboard-action-pill {
margin-top: 0.7rem !important;
padding: 0 !important;
background: none !important;
color: rgba(224, 222, 238, 0.46) !important;
font-weight: 500 !important;
}
/* Per-feature accent identities (icon / line / hover only) */
html[data-theme="glass"] .dashboard-action-deposit { --tile-accent: #34d399; }
html[data-theme="glass"] .dashboard-action-withdrawal,
html[data-theme="glass"] .dashboard-action-winnings { --tile-accent: #fbbf24; }
html[data-theme="glass"] .dashboard-action-transfer { --tile-accent: #60a5fa; }
html[data-theme="glass"] .dashboard-action-recovery { --tile-accent: #67e8f9; }
html[data-theme="glass"] .dashboard-action-join,
html[data-theme="glass"] .dashboard-action-support { --tile-accent: #5eead4; }
html[data-theme="glass"] .dashboard-action-credit { --tile-accent: var(--gg-accent-2); }
/* ── RECENT REQUESTS — deep, elevated panel ── */
html[data-theme="glass"] .dashboard-panel {
border-radius: 26px !important;
background:
linear-gradient(155deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008) 50%, rgba(3, 4, 10, 0.32)),
rgba(9, 10, 18, 0.78) !important;
border: 1px solid rgba(216, 209, 250, 0.06) !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.035) inset,
0 34px 70px -34px rgba(0, 0, 0, 0.74) !important;
}
html[data-theme="glass"] .dashboard-panel > div:first-child {
background: rgba(255, 255, 255, 0.022) !important;
border-bottom-color: rgba(216, 209, 250, 0.08) !important;
}
html[data-theme="glass"] .dashboard-panel .w-1\.5.bg-brand-500 {
background: linear-gradient(180deg, var(--gg-accent-2), #7c5cd6) !important;
}
/* ── Responsive ── */
@media (max-width: 760px) {
html[data-theme="glass"] .dashboard-welcome {
grid-template-columns: 1fr !important;
text-align: left;
padding: 1.6rem 1.4rem !important;
border-radius: 26px !important;
}
html[data-theme="glass"] .dashboard-hero-art {
min-height: 9rem;
margin-top: 0.5rem;
justify-content: flex-start;
}
html[data-theme="glass"] .dashboard-hero-crystal { width: 8.5rem; }
html[data-theme="glass"] .dashboard-welcome h1 { font-size: clamp(2.5rem, 13vw, 3.8rem) !important; }
html[data-theme="glass"] .dashboard-balance-card { border-radius: 24px !important; }
html[data-theme="glass"] .dashboard-hero-balance { font-size: clamp(2.8rem, 15vw, 4.4rem) !important; }
html[data-theme="glass"] .dashboard-action-card { min-height: 8.5rem; padding: 1.2rem !important; }
}
/* ── Calm motion: honour reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
html[data-theme="glass"] .dashboard-stage::before,
html[data-theme="glass"] .dashboard-welcome::before,
html[data-theme="glass"] .dashboard-welcome::after,
html[data-theme="glass"] .dashboard-hero-art::before,
html[data-theme="glass"] .dashboard-hero-crystal-float,
html[data-theme="glass"] .dashboard-live-dot,
html[data-theme="glass"] .dashboard-balance-graph-line {
animation: none !important;
}
html[data-theme="glass"] .dashboard-balance-graph-line { stroke-dashoffset: 0 !important; }
}
/* ════════════════════════════════════════════════════════════════
2026 PREMIUM REFINEMENT — authoritative trailing layer
Darker OLED surfaces · real dark-crystal glass · glowing royal
violet identity · floating-chip club selector · softened light.
Loaded last so it settles the cascade for the Glass theme.
═══════════════════════════════════════════════════════════════ */
/* ── Calmer ambient: lighting illuminates, never attracts ── */
html[data-theme="glass"] body::after {
background:
radial-gradient(38rem 38rem at 22% 16%, rgba(var(--gg-accent-rgb), 0.06), transparent 70%),
radial-gradient(34rem 34rem at 84% 78%, rgba(67, 56, 202, 0.055), transparent 72%) !important;
}
html[data-theme="glass"] .dashboard-stage::before {
background:
radial-gradient(40rem 30rem at 78% -6%, rgba(124, 92, 196, 0.10), transparent 60%),
radial-gradient(36rem 28rem at 8% 8%, rgba(38, 49, 104, 0.10), transparent 62%),
radial-gradient(50rem 40rem at 50% -20%, rgba(20, 16, 44, 0.5), transparent 70%) !important;
}
/* ── REAL PREMIUM GLASS — each surface a piece of dark crystal ──
more blur · soft top highlight · subtle violet sheen ·
near-invisible border · deeply layered shadow · floating feel. */
html[data-theme="glass"] .glass,
html[data-theme="glass"] .glass-card,
html[data-theme="glass"] .stat-card,
html[data-theme="glass"] .profile-card,
html[data-theme="glass"] .empty-state,
html[data-theme="glass"] .modal-box,
html[data-theme="glass"] .club-swipe-card {
backdrop-filter: blur(34px) saturate(1.18) brightness(0.96) !important;
-webkit-backdrop-filter: blur(34px) saturate(1.18) brightness(0.96) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 16%, transparent 38%),
linear-gradient(150deg, rgba(var(--gg-accent-3-rgb), 0.035), transparent 52%),
var(--gg-card) !important;
border: 1px solid var(--gg-glass-border) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.07),
inset 0 0 0 1px rgba(255, 255, 255, 0.01),
0 2px 6px rgba(0, 0, 0, 0.42),
0 34px 80px -34px rgba(0, 0, 0, 0.88),
0 14px 44px -30px var(--gg-soft-glow) !important;
}
/* Tame the old bright reflection sheen → soft, low top highlight only */
html[data-theme="glass"] .glass::after,
html[data-theme="glass"] .glass-card::after,
html[data-theme="glass"] .stat-card::after,
html[data-theme="glass"] .profile-card::after,
html[data-theme="glass"] .club-swipe-card::after,
html[data-theme="glass"] .modal-box::after {
background: linear-gradient(125deg, rgba(255, 255, 255, 0.05), transparent 26%, transparent 78%, rgba(var(--gg-accent-2-rgb), 0.05)) !important;
opacity: 0.32 !important;
}
/* Elevated dashboard surfaces — same deep glass, keep their accents */
html[data-theme="glass"] .dashboard-balance-card,
html[data-theme="glass"] .dashboard-action-card,
html[data-theme="glass"] .dashboard-panel {
backdrop-filter: blur(34px) saturate(1.16) brightness(0.95) !important;
-webkit-backdrop-filter: blur(34px) saturate(1.16) brightness(0.95) !important;
border: 1px solid var(--gg-glass-border) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 2px 6px rgba(0, 0, 0, 0.4),
0 38px 86px -36px rgba(0, 0, 0, 0.9),
0 16px 48px -32px var(--gg-soft-glow) !important;
}
/* ── FLOATING-PILL CLUB SELECTOR ──────────────────────────────────
Premium OS-style selector, not a tab bar. No container box around
the clubs — each club is its own floating glass pill. Inactive
pills are neutral smoked glass; the selected pill stays neutral too
and is distinguished ONLY by a very soft accent glow, a faint
accent hairline and accent-tinted text — never a heavy gradient or
a large coloured fill. Spacing is generous and motion is subtle. */
html[data-theme="glass"] .club-tabs-wrap {
margin-bottom: 1.75rem !important;
}
html[data-theme="glass"] .club-tabs-scroll {
gap: 0.85rem !important;
padding: 0.65rem 0.25rem !important;
border-radius: 0 !important;
background: none !important; /* no large rounded container */
border: 0 !important;
box-shadow: none !important;
flex-wrap: wrap;
justify-content: center;
}
html[data-theme="glass"] .club-tab {
min-height: 0 !important;
padding: 0.7rem 1.4rem !important;
border-radius: 999px !important;
color: var(--gg-muted) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.006) 60%, transparent),
rgba(14, 15, 24, 0.66) !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(26px) saturate(1.15) !important;
-webkit-backdrop-filter: blur(26px) saturate(1.15) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 12px 28px -16px rgba(0, 0, 0, 0.85) !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
letter-spacing: 0.004em !important;
transition:
transform 460ms cubic-bezier(0.22, 1, 0.36, 1),
color 360ms ease,
background 360ms ease,
border-color 360ms ease,
box-shadow 460ms ease !important;
}
html[data-theme="glass"] .club-tab:hover {
color: var(--gg-text) !important;
transform: translateY(-2px) !important;
border-color: rgba(var(--gg-accent-3-rgb), 0.16) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.01) 60%, transparent),
rgba(20, 22, 36, 0.7) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.07),
0 18px 34px -18px rgba(0, 0, 0, 0.9) !important;
}
html[data-theme="glass"] .club-tab.active {
color: var(--gg-text) !important;
transform: translateY(-2px) !important;
/* Stays neutral smoked glass — distinguished by glow, not fill */
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.012) 60%, transparent),
rgba(18, 20, 32, 0.74) !important;
border-color: rgba(var(--gg-accent-2-rgb), 0.32) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.16),
0 0 0 1px rgba(var(--gg-accent-2-rgb), 0.1),
0 10px 30px -10px rgba(var(--gg-accent-2-rgb), 0.34),
0 22px 48px -26px rgba(0, 0, 0, 0.85) !important;
}
/* A small accent dot leads the selected club, the only solid accent */
html[data-theme="glass"] .club-tab.active::before {
content: "";
display: inline-block;
width: 0.42rem;
height: 0.42rem;
margin-right: 0.5rem;
border-radius: 999px;
vertical-align: middle;
background: var(--gg-accent-2);
box-shadow: 0 0 10px -1px rgba(var(--gg-accent-2-rgb), 0.7);
}
html[data-theme="glass"] .club-tab.active:hover {
transform: translateY(-3px) !important;
}
@media (prefers-reduced-motion: reduce) {
html[data-theme="glass"] .club-tab,
html[data-theme="glass"] .club-tab:hover,
html[data-theme="glass"] .club-tab.active,
html[data-theme="glass"] .club-tab.active:hover {
transform: none !important;
}
}
/* Carousel position dots → soft accent, restrained */
html[data-theme="glass"] .swipe-dot { background: rgba(var(--gg-accent-3-rgb), 0.18) !important; }
html[data-theme="glass"] .swipe-dot.active {
background: linear-gradient(90deg, var(--gg-royal), var(--gg-violet)) !important;
box-shadow: 0 0 10px -2px var(--gg-soft-glow) !important;
}
/* ── PURPLE GRADIENTS, NOT FLAT FILLS — primary controls ──
Royal → glow violet, anchored deep so it reads luxurious, not neon. */
html[data-theme="glass"] .btn-primary,
html[data-theme="glass"] button.bg-brand-600,
html[data-theme="glass"] a.bg-brand-600,
html[data-theme="glass"] .nav-tab.active,
html[data-theme="glass"] .period-btn.active {
background:
linear-gradient(135deg, var(--gg-royal), var(--gg-accent-deep) 52%, var(--gg-accent-deep)) !important;
border-color: rgba(var(--gg-accent-3-rgb), 0.32) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 14px 34px -16px var(--gg-soft-glow),
0 8px 20px -12px rgba(0, 0, 0, 0.7) !important;
}
html[data-theme="glass"] .btn-primary:hover,
html[data-theme="glass"] button.bg-brand-600:hover,
html[data-theme="glass"] a.bg-brand-600:hover {
background:
linear-gradient(135deg, var(--gg-accent-2), var(--gg-royal) 52%, var(--gg-accent-deep)) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 18px 42px -16px var(--gg-soft-glow),
0 10px 24px -12px rgba(0, 0, 0, 0.72) !important;
}
/* ── SOFTER LIGHT on the balance centerpiece (no harsh glow) ── */
html[data-theme="glass"] .dashboard-live-dot {
background: var(--gg-violet) !important;
box-shadow: 0 0 7px rgba(var(--gg-accent-2-rgb), 0.5) !important;
}
html[data-theme="glass"] .dashboard-balance-graph { opacity: 0.7 !important; }
html[data-theme="glass"] .dashboard-balance-graph-line {
filter: drop-shadow(0 0 4px rgba(var(--gg-accent-2-rgb), 0.4)) !important;
}
/* ── EXACT TEXT SYSTEM — off-white / secondary / muted ── */
html[data-theme="glass"] .text-dark-300,
html[data-theme="glass"] .text-dark-400 { color: var(--gg-muted) !important; }
html[data-theme="glass"] .text-dark-500,
html[data-theme="glass"] .text-dark-600 { color: var(--gg-faint) !important; }
/* ── Keep floating headers translucent (premium-glass set them solid) ── */
html[data-theme="glass"] header.glass,
html[data-theme="glass"] .sticky.glass {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 60%),
rgba(7, 8, 14, 0.72) !important;
backdrop-filter: blur(26px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(26px) saturate(1.2) !important;
border-bottom: 1px solid rgba(var(--gg-accent-2-rgb), 0.14) !important;
box-shadow: 0 18px 60px rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.05) !important;
}
/* ════════════════════════════════════════════════════════════════
ACCENT PERSONALISATION
The decorative dashboard balance chart and the Appearance-page
accent swatches. The chart's SVG gradient stops are recoloured
here (CSS stop-color overrides the SVG presentation attributes)
so the purely decorative trend line follows the chosen accent.
════════════════════════════════════════════════════════════════ */
html[data-theme="glass"] #ggBalArea > stop:nth-child(1) { stop-color: rgba(var(--gg-accent-2-rgb), 0.24) !important; }
html[data-theme="glass"] #ggBalArea > stop:nth-child(2) { stop-color: rgba(var(--gg-accent-2-rgb), 0) !important; }
html[data-theme="glass"] #ggBalLine > stop:nth-child(1) { stop-color: var(--gg-accent) !important; }
html[data-theme="glass"] #ggBalLine > stop:nth-child(2) { stop-color: var(--gg-accent-2) !important; }
html[data-theme="glass"] #ggBalLine > stop:nth-child(3) { stop-color: var(--gg-accent-3) !important; }
/* ── Appearance page: Theme Style + Accent Color ──────────────────
"Premium Glass" is the only theme. Players personalise just the
accent. Each swatch is a floating glass tile; the chosen one lifts
and gains a soft glow in its own colour. The layout never changes. */
html[data-theme="glass"] .appearance-theme-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.95rem 1.1rem;
border-radius: 16px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.008) 60%, transparent),
rgba(16, 17, 28, 0.6);
border: 1px solid rgba(var(--gg-accent-3-rgb), 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 34px -20px rgba(0, 0, 0, 0.8);
}
html[data-theme="glass"] .appearance-theme-row .appearance-theme-name {
display: flex;
align-items: center;
gap: 0.6rem;
font-weight: 700;
color: var(--gg-text);
letter-spacing: 0.002em;
}
html[data-theme="glass"] .appearance-theme-row .appearance-theme-dot {
width: 0.55rem;
height: 0.55rem;
border-radius: 999px;
background: var(--gg-accent-2);
box-shadow: 0 0 12px -1px rgba(var(--gg-accent-2-rgb), 0.75);
}
html[data-theme="glass"] .appearance-theme-row .appearance-theme-badge {
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gg-accent-2);
padding: 0.28rem 0.7rem;
border-radius: 999px;
background: rgba(var(--gg-accent-2-rgb), 0.1);
border: 1px solid rgba(var(--gg-accent-2-rgb), 0.22);
}
html[data-theme="glass"] .accent-swatch-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.7rem;
}
html[data-theme="glass"] .accent-swatch {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.55rem;
padding: 0.95rem 0.5rem 0.8rem;
border-radius: 16px;
cursor: pointer;
color: var(--gg-muted);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.006) 60%, transparent),
rgba(14, 15, 24, 0.62);
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 28px -18px rgba(0, 0, 0, 0.82);
-webkit-backdrop-filter: blur(20px) saturate(1.1);
backdrop-filter: blur(20px) saturate(1.1);
transition:
transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
border-color 320ms ease,
box-shadow 420ms ease,
color 320ms ease;
}
html[data-theme="glass"] .accent-swatch:hover {
transform: translateY(-3px);
color: var(--gg-text);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 34px -18px rgba(0, 0, 0, 0.9);
}
/* The colour dot uses each swatch's own --sw-* values (set inline) */
html[data-theme="glass"] .accent-swatch-dot {
width: 2.1rem;
height: 2.1rem;
border-radius: 999px;
background: radial-gradient(circle at 32% 28%, var(--sw-3, #fff), var(--sw-1, #888) 70%);
box-shadow:
inset 0 1px 1px rgba(255, 255, 255, 0.35),
0 6px 16px -4px rgba(var(--sw-rgb, 0, 0, 0), 0.55);
}
html[data-theme="glass"] .accent-swatch-name {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.004em;
text-align: center;
}
html[data-theme="glass"] .accent-swatch.is-selected {
transform: translateY(-3px);
color: var(--gg-text);
border-color: rgba(var(--sw-rgb, 16, 185, 129), 0.42);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.14),
0 0 0 1px rgba(var(--sw-rgb, 16, 185, 129), 0.22),
0 12px 30px -10px rgba(var(--sw-rgb, 16, 185, 129), 0.4),
0 20px 44px -26px rgba(0, 0, 0, 0.85);
}
html[data-theme="glass"] .accent-swatch.is-selected::after {
content: "";
position: absolute;
top: 0.55rem;
right: 0.6rem;
width: 0.4rem;
height: 0.4rem;
border-radius: 999px;
background: var(--sw-2, var(--gg-accent-2));
box-shadow: 0 0 9px -1px rgba(var(--sw-rgb, 16, 185, 129), 0.8);
}
html[data-theme="glass"] .premium-color-picker {
position: relative;
overflow: hidden;
padding: 1rem;
border-radius: 20px;
background:
radial-gradient(circle at 18% 0%, rgba(var(--gg-accent-2-rgb), 0.1), transparent 38%),
linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01) 58%, transparent),
rgba(9, 12, 22, 0.72);
border: 1px solid rgba(255,255,255,0.055);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 24px 52px -30px rgba(0,0,0,0.95);
-webkit-backdrop-filter: blur(22px) saturate(1.15);
backdrop-filter: blur(22px) saturate(1.15);
}
html[data-theme="glass"] .premium-color-picker-head,
html[data-theme="glass"] .premium-picker-stage,
html[data-theme="glass"] .premium-brightness-row {
display: flex;
align-items: center;
gap: 0.85rem;
}
html[data-theme="glass"] .premium-color-picker-head {
justify-content: space-between;
margin-bottom: 0.9rem;
}
html[data-theme="glass"] .premium-color-kicker {
display: block;
margin-bottom: 0.16rem;
font-size: 0.63rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(var(--gg-accent-3-rgb), 0.72);
}
html[data-theme="glass"] .premium-color-picker h3 {
margin: 0;
color: var(--gg-text);
font-size: 0.98rem;
font-weight: 800;
}
html[data-theme="glass"] .premium-reset-btn {
flex: 0 0 auto;
padding: 0.48rem 0.72rem;
border-radius: 999px;
color: var(--gg-accent-3);
font-size: 0.68rem;
font-weight: 800;
background: rgba(var(--gg-accent-2-rgb), 0.09);
border: 1px solid rgba(var(--gg-accent-2-rgb), 0.18);
}
html[data-theme="glass"] .premium-color-field-wrap {
position: relative;
flex: 1 1 auto;
min-width: 0;
aspect-ratio: 1.45 / 1;
border-radius: 18px;
overflow: hidden;
box-shadow: inset 0 1px 1px rgba(255,255,255,0.16), 0 16px 34px -24px rgba(0,0,0,0.9);
touch-action: none;
}
html[data-theme="glass"] .premium-color-field {
display: block;
width: 100%;
height: 100%;
cursor: crosshair;
}
html[data-theme="glass"] .premium-color-cursor {
position: absolute;
left: 50%;
top: 50%;
width: 20px;
height: 20px;
border-radius: 999px;
border: 2px solid rgba(255,255,255,0.92);
box-shadow: 0 0 0 1px rgba(0,0,0,0.45), 0 8px 18px rgba(0,0,0,0.38);
transform: translate(-50%, -50%);
pointer-events: none;
}
html[data-theme="glass"] .premium-picker-side {
width: 92px;
display: grid;
gap: 0.7rem;
}
html[data-theme="glass"] .premium-color-preview {
height: 78px;
border-radius: 18px;
background:
radial-gradient(circle at 30% 22%, var(--gg-accent-3), transparent 42%),
linear-gradient(145deg, var(--gg-accent-2), var(--gg-accent-deep));
box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 14px 30px -14px rgba(var(--gg-accent-2-rgb),0.6);
}
html[data-theme="glass"] .premium-hex-readout {
padding: 0.6rem 0.62rem;
border-radius: 14px;
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.055);
}
html[data-theme="glass"] .premium-hex-readout span {
display: block;
color: var(--gg-faint);
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
html[data-theme="glass"] .premium-hex-readout strong {
display: block;
margin-top: 0.16rem;
color: var(--gg-text);
font-size: 0.78rem;
letter-spacing: 0.02em;
}
html[data-theme="glass"] .premium-brightness-row {
margin-top: 0.85rem;
}
html[data-theme="glass"] .premium-brightness-row > span {
flex: 0 0 auto;
color: var(--gg-muted);
font-size: 0.68rem;
font-weight: 800;
}
html[data-theme="glass"] .premium-brightness-wrap { flex: 1 1 auto; min-width: 0; }
html[data-theme="glass"] .premium-brightness {
width: 100%;
height: 28px;
appearance: none;
background: transparent;
}
html[data-theme="glass"] .premium-brightness::-webkit-slider-runnable-track {
height: 9px;
border-radius: 999px;
background: linear-gradient(90deg, #05070d, var(--gg-accent), #ffffff);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.45);
}
html[data-theme="glass"] .premium-brightness::-moz-range-track {
height: 9px;
border-radius: 999px;
background: linear-gradient(90deg, #05070d, var(--gg-accent), #ffffff);
}
html[data-theme="glass"] .premium-brightness::-webkit-slider-thumb {
appearance: none;
width: 22px;
height: 22px;
margin-top: -6.5px;
border-radius: 999px;
background: var(--gg-accent-3);
border: 2px solid rgba(255,255,255,0.9);
box-shadow: 0 8px 20px rgba(0,0,0,0.45), 0 0 18px rgba(var(--gg-accent-2-rgb),0.42);
}
html[data-theme="glass"] .premium-brightness::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--gg-accent-3);
border: 2px solid rgba(255,255,255,0.9);
}
@media (max-width: 420px) {
html[data-theme="glass"] .premium-picker-stage { align-items: stretch; flex-direction: column; }
html[data-theme="glass"] .premium-picker-side { width: 100%; grid-template-columns: 86px 1fr; }
html[data-theme="glass"] .premium-color-picker-head { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
html[data-theme="glass"] .accent-swatch,
html[data-theme="glass"] .accent-swatch:hover,
html[data-theme="glass"] .accent-swatch.is-selected { transform: none; }
}
/* ════════════════════════════════════════════════════════════════
BRAND → ACCENT
The app's primary identity is the Tailwind `brand` scale (an
emerald ramp). Because the accent now defines the whole UI, every
brand utility is remapped onto the chosen accent's ramps, so
buttons, icons, borders, rings, highlights and hover states all
follow the player's accent. Genuine semantic colours (emerald /
green = success, red = error, amber/gold = VIP, blue = transfer)
are left untouched so meaning never changes.
Accent ramp: 3 = highlight · 2 = glow · 1 = primary · deep = anchor
════════════════════════════════════════════════════════════════ */
/* — Text — */
html[data-theme="glass"] .text-brand-200,
html[data-theme="glass"] .text-brand-300 { color: var(--gg-accent-3) !important; }
html[data-theme="glass"] .text-brand-400 { color: var(--gg-accent-2) !important; }
html[data-theme="glass"] .text-brand-500,
html[data-theme="glass"] .text-brand-600,
html[data-theme="glass"] .text-brand-700 { color: var(--gg-accent) !important; }
html[data-theme="glass"] .text-brand-400\/80 { color: rgba(var(--gg-accent-2-rgb), 0.8) !important; }
html[data-theme="glass"] .text-brand-400\/70 { color: rgba(var(--gg-accent-2-rgb), 0.7) !important; }
html[data-theme="glass"] .text-brand-300\/80 { color: rgba(var(--gg-accent-3-rgb), 0.8) !important; }
html[data-theme="glass"] .hover\:text-brand-300:hover { color: var(--gg-accent-3) !important; }
html[data-theme="glass"] .hover\:text-brand-400:hover { color: var(--gg-accent-2) !important; }
html[data-theme="glass"] .group:hover .group-hover\:text-brand-400 { color: var(--gg-accent-2) !important; }
html[data-theme="glass"] .group:hover .group-hover\:text-brand-700 { color: var(--gg-accent) !important; }
/* — Background — (solid button bg-brand-600 keeps its gradient elsewhere) */
html[data-theme="glass"] .bg-brand-400 { background-color: var(--gg-accent-2) !important; }
html[data-theme="glass"] .bg-brand-500 { background-color: var(--gg-accent) !important; }
html[data-theme="glass"] .bg-brand-700 { background-color: var(--gg-accent-deep) !important; }
html[data-theme="glass"] .bg-brand-900 { background-color: rgba(var(--gg-accent-deep-rgb), 0.22) !important; }
html[data-theme="glass"] .bg-brand-950 { background-color: rgba(var(--gg-accent-deep-rgb), 0.18) !important; }
html[data-theme="glass"] .bg-brand-500\/10 { background-color: rgba(var(--gg-accent-rgb), 0.1) !important; }
html[data-theme="glass"] .bg-brand-950\/60 { background-color: rgba(var(--gg-accent-deep-rgb), 0.22) !important; }
html[data-theme="glass"] .bg-brand-950\/50 { background-color: rgba(var(--gg-accent-deep-rgb), 0.2) !important; }
html[data-theme="glass"] .bg-brand-950\/40 { background-color: rgba(var(--gg-accent-deep-rgb), 0.16) !important; }
html[data-theme="glass"] .bg-brand-950\/30 { background-color: rgba(var(--gg-accent-deep-rgb), 0.12) !important; }
html[data-theme="glass"] .bg-brand-950\/20 { background-color: rgba(var(--gg-accent-deep-rgb), 0.09) !important; }
html[data-theme="glass"] .hover\:bg-brand-500:hover { background-color: var(--gg-accent) !important; }
html[data-theme="glass"] .hover\:bg-brand-600:hover { background-color: var(--gg-accent-deep) !important; }
html[data-theme="glass"] .group:hover .group-hover\:bg-brand-900 { background-color: rgba(var(--gg-accent-deep-rgb), 0.3) !important; }
/* — Border — */
html[data-theme="glass"] .border-brand-500 { border-color: rgba(var(--gg-accent-2-rgb), 0.5) !important; }
html[data-theme="glass"] .border-brand-600 { border-color: rgba(var(--gg-accent-2-rgb), 0.42) !important; }
html[data-theme="glass"] .border-brand-700 { border-color: rgba(var(--gg-accent-2-rgb), 0.34) !important; }
html[data-theme="glass"] .border-brand-800 { border-color: rgba(var(--gg-accent-2-rgb), 0.22) !important; }
html[data-theme="glass"] .border-brand-900 { border-color: rgba(var(--gg-accent-2-rgb), 0.18) !important; }
html[data-theme="glass"] .border-brand-600\/20 { border-color: rgba(var(--gg-accent-2-rgb), 0.16) !important; }
html[data-theme="glass"] .border-brand-600\/25 { border-color: rgba(var(--gg-accent-2-rgb), 0.18) !important; }
html[data-theme="glass"] .border-brand-700\/40 { border-color: rgba(var(--gg-accent-2-rgb), 0.22) !important; }
html[data-theme="glass"] .border-brand-800\/50 { border-color: rgba(var(--gg-accent-2-rgb), 0.16) !important; }
html[data-theme="glass"] .border-brand-900\/30 { border-color: rgba(var(--gg-accent-2-rgb), 0.1) !important; }
html[data-theme="glass"] .border-brand-900\/40 { border-color: rgba(var(--gg-accent-2-rgb), 0.13) !important; }
html[data-theme="glass"] .border-brand-900\/50 { border-color: rgba(var(--gg-accent-2-rgb), 0.16) !important; }
html[data-theme="glass"] .hover\:border-brand-500:hover { border-color: rgba(var(--gg-accent-2-rgb), 0.5) !important; }
html[data-theme="glass"] .hover\:border-brand-700:hover { border-color: rgba(var(--gg-accent-2-rgb), 0.4) !important; }
html[data-theme="glass"] .hover\:border-brand-700\/40:hover { border-color: rgba(var(--gg-accent-2-rgb), 0.28) !important; }
html[data-theme="glass"] .focus\:border-brand-500:focus { border-color: rgba(var(--gg-accent-2-rgb), 0.5) !important; }
html[data-theme="glass"] .focus\:border-brand-600:focus { border-color: rgba(var(--gg-accent-2-rgb), 0.42) !important; }
html[data-theme="glass"] .group:hover .group-hover\:border-brand-600 { border-color: rgba(var(--gg-accent-2-rgb), 0.42) !important; }
/* — Ring (focus rings) — */
html[data-theme="glass"] .ring-brand-600,
html[data-theme="glass"] .ring-brand-600\/40 { --tw-ring-color: rgba(var(--gg-accent-2-rgb), 0.4) !important; }
/* — Gradient stops — */
html[data-theme="glass"] .from-brand-500 { --tw-gradient-from: var(--gg-accent) var(--tw-gradient-from-position) !important; }
html[data-theme="glass"] .from-brand-950\/60 { --tw-gradient-from: rgba(var(--gg-accent-deep-rgb), 0.22) var(--tw-gradient-from-position) !important; }
html[data-theme="glass"] .to-brand-700 { --tw-gradient-to: var(--gg-accent-deep) var(--tw-gradient-to-position) !important; }
/* Generic (non-button) brand-600 surfaces + native form accent-color */
html[data-theme="glass"] .bg-brand-600 { background-color: var(--gg-accent-deep) !important; }
html[data-theme="glass"] .accent-brand-500,
html[data-theme="glass"] .accent-brand-600 { accent-color: var(--gg-accent) !important; }