/* Optional glass skin. Removing data-design="glass" restores app.css. */
.design-toggle[hidden] { display: none !important; }
.design-toggle { position: relative; flex-shrink: 0; }
.design-toggle > .ui-icon { width: 18px; height: 18px; color: var(--primary); }
.design-toggle[aria-pressed="true"] { border-color: var(--primary); }
.design-toggle[aria-pressed="true"]::after {
  content: ""; position: absolute; inset-inline-end: 5px; top: 5px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--primary);
}
.design-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

html[data-design="glass"] {
  --glass-base: #edf4ee;
  --glass-panel: #f6faf6;
  --glass-chrome: #f3f8f3;
  --glass-input: rgba(255, 255, 255, .76);
  --glass-inset: rgba(240, 247, 240, .8);
  --glass-solid: #f6faf6;
  --glass-edge: rgba(255, 255, 255, .88);
  --glass-line: rgba(52, 83, 46, .16);
  --glass-sheen: rgba(255, 255, 255, .68);
  --glass-glow: rgba(151, 222, 47, .22);
  --glass-glow-secondary: rgba(53, 146, 110, .13);
  --glass-shadow: 0 18px 48px rgba(25, 62, 40, .08), inset 0 1px 0 rgba(255, 255, 255, .82);
  --glass-blur: 18px;
  --muted: #52644f;
}
html[data-design="glass"][data-theme="dark"] {
  --glass-base: #080f0c;
  --glass-panel: #14221b;
  --glass-chrome: #101b15;
  --glass-input: rgba(6, 14, 10, .66);
  --glass-inset: rgba(12, 23, 17, .52);
  --glass-solid: #122019;
  --glass-edge: rgba(227, 247, 230, .17);
  --glass-line: rgba(219, 242, 222, .13);
  --glass-sheen: rgba(255, 255, 255, .065);
  --glass-glow: rgba(137, 214, 36, .17);
  --glass-glow-secondary: rgba(32, 145, 113, .16);
  --glass-shadow: 0 18px 48px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .07);
  --muted: #afbfad;
}

/* Solid surfaces remain available where backdrop blur is unsupported. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-design="glass"] {
    --glass-panel: rgba(249, 253, 249, .67);
    --glass-chrome: rgba(244, 250, 244, .84);
  }
  html[data-design="glass"][data-theme="dark"] {
    --glass-panel: rgba(19, 33, 25, .66);
    --glass-chrome: rgba(12, 23, 17, .86);
  }
}

html[data-design="glass"] body,
html[data-design="glass"] body:is(.dashboard-page, .auth-page) {
  background-color: var(--glass-base);
  background-image:
    radial-gradient(ellipse at 88% 8%, var(--glass-glow), transparent 48%),
    radial-gradient(ellipse at 10% 62%, var(--glass-glow-secondary), transparent 46%),
    linear-gradient(125deg, transparent 30%, var(--glass-sheen) 50%, transparent 72%);
  background-attachment: fixed;
  color: var(--text);
}
html[data-design="glass"] :is(.dashboard-content, .hero, .section, .services-section, .how-section, .brand-strip, .withdrawal-section) {
  background: transparent;
}
html[data-design="glass"] .auth-page::before { opacity: .035; }

html[data-design="glass"] :is(.site-header, .auth-page-header, .dashboard-topbar, .dashboard-sidebar) {
  background: var(--glass-chrome);
  border-color: var(--glass-line);
  box-shadow: 0 1px 0 var(--glass-sheen), 0 12px 32px rgba(0, 0, 0, .035);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(135%);
  backdrop-filter: blur(var(--glass-blur)) saturate(135%);
}
html[data-design="glass"] .dashboard-nav a:not(.active) { color: var(--muted); }
html[data-design="glass"] .dashboard-nav a:hover { background: var(--glass-inset); color: var(--text); }
html[data-design="glass"] .dashboard-nav a.active {
  border-color: rgba(140, 202, 56, .45);
  background: linear-gradient(120deg, rgba(158, 241, 37, .23), rgba(158, 241, 37, .07));
  color: var(--text);
  box-shadow: inset 0 1px 0 var(--glass-sheen), 0 5px 18px rgba(99, 169, 22, .07);
}
html[data-design="glass"] .dashboard-nav a.active .dashboard-nav-icon { background: var(--primary-soft); color: var(--primary); }
html[data-design="glass"] :is(.dashboard-user-card, .dashboard-nav-icon) { background: var(--glass-inset); border-color: var(--glass-line); }

html[data-design="glass"] :is(
  .dashboard-panel, .dashboard-metric, .wallet-overview-panel, .customer-stat-card,
  .customer-action-card, .wallet-card:not(.primary-wallet), .auth-surface,
  .deposit-option, .service-card, .step-card, .calculator-card, .methods-panel,
  .quick-action, .security-option-card, .settings-note-panel, .verification-status-card
) {
  border-color: var(--glass-edge);
  background: linear-gradient(135deg, var(--glass-sheen), transparent 48%), var(--glass-panel);
  box-shadow: var(--glass-shadow);
  color: var(--text);
}
/* Blur leaf cards only. Form containers may contain fixed dialogs. */
html[data-design="glass"] :is(
  .wallet-overview-panel, .customer-stat-card, .customer-action-card,
  .deposit-option, .service-card, .step-card, .calculator-card
) {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(130%);
  backdrop-filter: blur(var(--glass-blur)) saturate(130%);
}
html[data-design="glass"] :is(.customer-action-card, .deposit-option, .quick-action, .security-option-card):hover {
  border-color: rgba(141, 201, 61, .65);
  background: linear-gradient(135deg, var(--primary-soft), transparent 60%), var(--glass-panel);
  box-shadow: var(--glass-shadow), 0 0 0 1px rgba(158, 241, 37, .09);
}
html[data-design="glass"] :is(.customer-action-card, .deposit-option):focus-visible {
  outline: 2px solid var(--primary); outline-offset: 3px;
}
html[data-design="glass"] :is(
  .wallet-overview-item, .deposit-admin-row, .deposit-basic-field, .customer-section-switch,
  .deposit-instructions-text, .deposit-instructions-disclosure > summary,
  .permission-card, .locked-field, .destination-fields, .method-fields, .network-editor
) {
  border-color: var(--glass-line);
  background: var(--glass-inset);
  box-shadow: inset 0 1px 0 var(--glass-sheen);
}
html[data-design="glass"] :is(.wallet-overview-panel > header, .dashboard-brand-row, .detail-list > div) { border-color: var(--glass-line); }
html[data-design="glass"] :is(.wallet-code, .deposit-option-icon, .customer-action-icon) {
  border-color: var(--glass-line);
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: inset 0 1px 0 var(--glass-sheen);
}

/* Keep the total balance and configured artwork legible in either theme. */
html[data-design="glass"] .customer-overview-page .balance-hero,
html[data-design="glass"] .wallet-card.primary-wallet {
  border-color: rgba(224, 245, 223, .28);
  background: radial-gradient(ellipse at 10% 0, rgba(158, 241, 37, .22), transparent 62%), linear-gradient(130deg, rgba(28, 57, 36, .88), rgba(7, 20, 13, .94));
  box-shadow: 0 20px 50px rgba(8, 28, 14, .23), inset 0 1px 0 rgba(255, 255, 255, .17);
  color: #f7fff3;
}
html[data-design="glass"] .balance-hero-label { color: #d9edce; }
html[data-design="glass"] .balance-hero-art img { opacity: .42; }
html[data-design="glass"] .balance-hero-art::before { background: linear-gradient(110deg, rgba(8, 24, 15, .62), rgba(8, 24, 15, .24), rgba(8, 24, 15, .7)); }
html[data-design="glass"] .customer-overview-page :is(.balance-currency, .balance-hero-footer a) {
  border-color: rgba(219, 255, 194, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 20px rgba(88, 154, 25, .12);
}
html[data-design="glass"] :is(.balance-hero-amount, .wallet-overview-balance, .deposit-net dd) { font-variant-numeric: tabular-nums; }
html[data-design="glass"] .customer-advertisement-slider {
  border-color: rgba(225, 247, 215, .32);
  background: linear-gradient(120deg, rgba(158, 241, 37, .13), transparent 65%), rgba(6, 15, 9, .92);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .1);
}

html[data-design="glass"] :is(.button-secondary, .button-ghost, .theme-toggle, .language-switch, .dashboard-menu-button) {
  background: var(--glass-inset); border-color: var(--glass-line); color: var(--text);
  box-shadow: inset 0 1px 0 var(--glass-sheen);
}
html[data-design="glass"] :is(.button-secondary, .button-ghost, .theme-toggle, .language-switch):hover { border-color: var(--primary); }
html[data-design="glass"] .design-toggle[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); }
html[data-design="glass"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea) {
  border-color: var(--glass-line); background-color: var(--glass-input); color: var(--text);
}
html[data-design="glass"] :is(input, select, textarea):focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
html[data-design="glass"] select option { background: var(--glass-solid); color: var(--text); }
html[data-design="glass"] table { background: transparent; }
html[data-design="glass"] th { background: var(--glass-inset); color: var(--muted); }
html[data-design="glass"] :is(th, td, .table-wrap) { border-color: var(--glass-line); }
html[data-design="glass"] tbody tr:hover { background: var(--primary-soft); }
/* Menus and dialogs are deliberately more opaque than decorative cards. */
html[data-design="glass"] :is(.country-menu, .language-picker-menu) {
  background: var(--glass-solid); border-color: var(--glass-line); box-shadow: var(--glass-shadow);
}

@media (max-width: 980px) {
  html[data-design="glass"] { --glass-blur: 10px; }
  html[data-design="glass"] .dashboard-sidebar { background: var(--glass-solid); }
}
@media (max-width: 600px) {
  /* Give the extra design control space without clipping the page heading. */
  .dashboard-topbar-title { min-width: 0; }
  .dashboard-topbar-title h1 { overflow-wrap: anywhere; }
  .dashboard-topbar-actions { flex-shrink: 0; }
  .header-inner, .auth-page-bar { flex-wrap: wrap; gap: 10px; padding-block: 10px; }
  .header-actions, .auth-page-actions { flex-wrap: wrap; gap: 7px; }
  html[data-design="glass"] body { background-attachment: scroll; }
}
@media (max-width: 380px) {
  .dashboard-topbar { flex-wrap: wrap; gap: 10px; }
  .dashboard-topbar-actions { margin-inline-start: auto; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-design="glass"][data-theme] { --glass-panel: var(--glass-solid); --glass-chrome: var(--glass-solid); --glass-blur: 0px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-design="glass"] :is(.customer-action-card, .deposit-option, .quick-action):hover { transform: none; }
}
@media (forced-colors: active) {
  html[data-design="glass"] body,
  html[data-design="glass"] :is(.dashboard-panel, .customer-action-card, .deposit-option, .dashboard-sidebar, .dashboard-topbar, .wallet-overview-panel, .customer-stat-card) {
    background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media print {
  .design-toggle { display: none; }
  html[data-design="glass"] body,
  html[data-design="glass"] :is(.dashboard-panel, .wallet-overview-panel, .customer-stat-card, .deposit-option) {
    background: #fff; color: #111; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}