remnawave-minishop/backend/bot/app/web/themes/light/style.css

.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: rgba(15, 23, 42, 0.025);
  --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;
}

/* New user-facing activation surfaces */
.theme-key-light .trial-offer-card,
.theme-key-light .trial-activation-card,
.theme-key-light .activation-success-dialog {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.theme-key-light .trial-card-head > svg,
.theme-key-light .dialog-title-icon {
  color: color-mix(in srgb, var(--accent) 54%, #000000);
}

.theme-key-light .trial-card-facts span,
.theme-key-light .trial-activation-facts div {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(15, 23, 42, 0.025);
}

/* 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);
}

/* Admin controls: range sliders and sortable rows */

.theme-key-light .ui-range-input::before {
  background: rgba(15, 23, 42, 0.12);
}

.theme-key-light .ui-range-input__range {
  background: color-mix(in srgb, var(--accent) 70%, #0f172a);
}

.theme-key-light .ui-range-input__thumb {
  border-color: color-mix(in srgb, var(--accent) 68%, #0f172a);
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

.theme-key-light .ui-range-input__thumb:focus-visible {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.theme-key-light .ui-sortable-handle {
  border-radius: 6px;
  color: color-mix(in srgb, var(--admin-muted) 82%, var(--admin-text));
}

.theme-key-light .ui-sortable-handle:hover,
.theme-key-light .ui-sortable-handle:focus-visible {
  background: rgba(15, 23, 42, 0.055);
  color: color-mix(in srgb, var(--accent) 58%, #0f172a);
}

.theme-key-light .ui-sortable {
  --sortable-drop-line: color-mix(in srgb, var(--accent) 64%, #0f172a);
}

.theme-key-light .ui-sortable-item.is-drop-target {
  background: color-mix(in srgb, var(--accent) 8%, #ffffff);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent),
    0 10px 22px color-mix(in srgb, var(--accent) 7%, transparent);
}

.theme-key-light .ui-sortable-item.is-drop-target::before {
  background: var(--sortable-drop-line);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Admin health config alerts */

.theme-key-light .admin-config-alerts {
  border-color: color-mix(in srgb, var(--warning) 38%, var(--admin-border));
  background: color-mix(in srgb, var(--warning) 9%, #ffffff);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.theme-key-light .admin-config-alerts-error {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--admin-border));
  background: color-mix(in srgb, var(--danger) 8%, #ffffff);
}

.theme-key-light .admin-config-alert-link {
  background: rgba(255, 255, 255, 0.58);
}

.theme-key-light .admin-config-alert-link:hover {
  background: #ffffff;
}

/* Telegram notifications banner: keep the warm warning tint but swap the
 * dark-theme inset bevel for the soft drop shadow the other light cards use. */
.theme-key-light .telegram-notifications-card {
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
}