.theme-key-light {
  color-scheme: light;
  --accent: #047857;
  --bg: #f7f8fb;
  --panel: #ffffff;
  --panel-2: #f1f5f9;
  --panel-3: #e8edf3;
  --border: rgba(15, 23, 42, 0.11);
  --border-strong: rgba(15, 23, 42, 0.2);
  --text: #0f172a;
  --muted: #475569;
  --dim: #64748b;
  --danger: #dc2626;
  --danger-text: #b91c1c;
  --danger-soft: color-mix(in srgb, var(--danger) 9%, var(--panel));
  --danger-border: color-mix(in srgb, var(--danger) 34%, var(--border));
  --success: #16a34a;
  --success-text: #166534;
  --success-soft: color-mix(in srgb, var(--success) 10%, var(--panel));
  --success-border: color-mix(in srgb, var(--success) 34%, var(--border));
  --warning: #d97706;
  --warning-text: #92400e;
  --warning-soft: color-mix(in srgb, var(--warning) 11%, var(--panel));
  --warning-border: color-mix(in srgb, var(--warning) 34%, var(--border));
  --info: #2563eb;
  --info-text: #1d4ed8;
  --info-soft: color-mix(in srgb, var(--info) 9%, var(--panel));
  --info-border: color-mix(in srgb, var(--info) 30%, var(--border));
  --blue: #2563eb;
  --radius: 8px;
  --accent-contrast: #ffffff;
  --surface-sheen: rgba(15, 23, 42, 0.035);
  --surface-sheen-soft: rgba(15, 23, 42, 0.012);
  --surface-hover: rgba(15, 23, 42, 0.045);
  --surface-muted: rgba(15, 23, 42, 0.035);
  --surface-subtle-border: rgba(15, 23, 42, 0.1);
  --overlay-scrim: rgba(15, 23, 42, 0.34);
  --nav-bg: rgba(255, 255, 255, 0.88);
  --rail-bg: rgba(255, 255, 255, 0.72);
  --shadow-soft: 0 6px 18px rgba(15, 23, 42, 0.06);
  --shadow-strong: 0 18px 44px rgba(15, 23, 42, 0.12);
  --shadow-popover: 0 14px 28px rgba(15, 23, 42, 0.12);
  --inset-highlight: rgba(255, 255, 255, 0.75);
  --admin-bg: #f7f8fb;
  --admin-surface: #ffffff;
  --admin-surface-2: #f1f5f9;
  --admin-elev: #e8edf3;
  --admin-border: rgba(15, 23, 42, 0.1);
  --admin-border-strong: rgba(15, 23, 42, 0.18);
  --admin-text: #0f172a;
  --admin-muted: #64748b;
  --admin-dim: #64748b;
  --admin-chart-stroke: #065f46;
  --admin-chart-fill: rgba(6, 95, 70, 0.22);
}

.theme-key-light .ui-spinner,
.theme-key-light .brand-mark-spinner {
  color: inherit;
}

.theme-key-light .telegram-button-spinner {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
}

.theme-key-light .btn-primary,
.theme-key-light .admin-btn.admin-btn-primary,
.theme-key-light .admin-extend-control .admin-btn.admin-btn-primary {
  background: color-mix(in srgb, var(--accent) 50%, #000000);
  border-color: color-mix(in srgb, var(--accent) 42%, #000000);
  color: #ffffff;
}

.theme-key-light .btn-primary:hover:not(:disabled),
.theme-key-light .admin-btn.admin-btn-primary:hover:not(:disabled),
.theme-key-light .admin-extend-control .admin-btn.admin-btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 52%, #000000);
}

.theme-key-light.app-shell {
  background: var(--bg) !important;
}

.theme-key-light .phone-screen {
  background: var(--bg);
}

/* Flatten Settings rows: no gradient sheen, no inset highlight that reads as a 3D bevel */
.theme-key-light .settings-row {
  background: var(--panel);
  box-shadow: none;
}

.theme-key-light .settings-row-linked {
  background: var(--success-soft);
}

/* Avatar/profile card: bigger lift, but rows below have an opaque background and
   stack above, so the shadow stays visually under them instead of bleeding through. */
.theme-key-light .settings-profile {
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 var(--inset-highlight);
}

.theme-key-light .settings-links-block {
  position: relative;
  z-index: 1;
}

/* Slightly stronger axis/grid contrast for the revenue chart on a light surface */
.theme-key-light .admin-revenue-svg-frame {
  background: #ffffff;
}

/* Bonus section: drop accent color from body strongs; only the bonus-system heading
   and explicitly-accent card headings stay tinted — and they use the same darkened
   accent technique as .btn-primary on light, so they remain readable on white. */
.theme-key-light .bonus-card strong {
  color: var(--text);
}

.theme-key-light .bonus-card-head strong,
.theme-key-light .card-heading-accent {
  color: color-mix(in srgb, var(--accent) 50%, #000000);
}

.theme-key-light .bonus-card-head > svg {
  color: color-mix(in srgb, var(--accent) 50%, #000000);
}

/* Install guide theme surfaces */

.theme-key-light .install-platform-trigger,
.theme-key-light .install-app-button,
.theme-key-light .install-step,
.theme-key-light .install-subscription-card,
.theme-key-light .install-qr-wrap {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.055);
}

.theme-key-light .install-app-button.active {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, #ffffff);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.theme-key-light .install-platform-trigger:focus-visible,
.theme-key-light .install-platform-trigger[data-state="open"],
.theme-key-light .install-app-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

body:has(.theme-key-light) .install-platform-content {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

body:has(.theme-key-light) .install-platform-item[data-highlighted],
body:has(.theme-key-light) .install-platform-item[data-selected] {
  background: color-mix(in srgb, var(--accent) 9%, #ffffff);
}

.theme-key-light .install-step-icon,
.theme-key-light .install-subscription-header-icon {
  background: color-mix(in srgb, var(--accent) 8%, #ffffff);
  color: color-mix(in srgb, var(--accent) 55%, #000000);
}

.theme-key-light .install-qr-divider {
  color: rgba(15, 23, 42, 0.24);
}

.theme-key-light .install-feature-star.attention-dot {
  background: #f59e0b;
}

.theme-key-light .install-loading .ui-spinner {
  color: color-mix(in srgb, var(--accent) 55%, #000000);
}