:root {
  --pro-bg-dark: #05070f;
  --pro-panel-dark: rgba(12, 16, 28, 0.82);
  --pro-panel-2-dark: rgba(17, 24, 39, 0.78);
  --pro-border-dark: rgba(94, 234, 212, 0.24);
  --pro-accent-dark: #22d3ee;
  --pro-accent-2-dark: #a78bfa;
  --pro-success-dark: #34d399;
  --pro-danger-dark: #fb7185;

  --pro-bg-light: #eef3fb;
  --pro-panel-light: rgba(255, 255, 255, 0.94);
  --pro-panel-2-light: rgba(246, 250, 255, 0.95);
  --pro-border-light: rgba(59, 130, 246, 0.2);
  --pro-accent-light: #2563eb;
  --pro-accent-2-light: #7c3aed;
}

body[data-theme="night"] {
  --bg-gradient: radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.12), transparent 38%),
    radial-gradient(circle at 100% 0%, rgba(167, 139, 250, 0.16), transparent 42%),
    linear-gradient(165deg, #03050d 0%, #0b1323 50%, #050811 100%);
  --panel-color: var(--pro-panel-dark);
  --panel-border: var(--pro-border-dark);
  --accent: var(--pro-accent-dark);
  --chip-active: rgba(34, 211, 238, 0.2);
  --shadow: 0 20px 55px rgba(1, 3, 9, 0.65);
}

body[data-theme="day"] {
  --bg-gradient: radial-gradient(circle at 10% 5%, rgba(59, 130, 246, 0.12), transparent 40%),
    radial-gradient(circle at 90% 0%, rgba(124, 58, 237, 0.08), transparent 42%),
    linear-gradient(170deg, #edf3fb 0%, #f8fbff 45%, #ecf2f9 100%);
  --panel-color: var(--pro-panel-light);
  --panel-border: var(--pro-border-light);
  --accent: var(--pro-accent-light);
  --chip-active: rgba(37, 99, 235, 0.12);
}

header,
.filters-panel,
.insights,
.signal-ticker,
.focus-mode,
.signal-inbox,
.modal,
.auth-gate__panel,
.card,
.card-head,
.chart-shell,
.chart-wrapper,
.details,
.stats-grid .stat,
.referral-modal,
.withdraw-modal,
.settings-modal {
  border-color: var(--panel-border) !important;
  background: linear-gradient(160deg, color-mix(in srgb, var(--panel-color) 88%, transparent), color-mix(in srgb, var(--panel-color) 66%, #0b1220 8%)) !important;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(14px) saturate(135%);
}

.toolbar button,
.toolbar input,
.toolbar select,
.tf-trigger,
.tf-menu,
.account-actions button,
.account-actions a,
.secondary,
.primary,
#toggle-theme,
#show-stats {
  border-radius: 14px !important;
  border: 1px solid color-mix(in srgb, var(--panel-border) 82%, transparent) !important;
  background: linear-gradient(145deg, rgba(22, 32, 56, 0.45), rgba(15, 23, 42, 0.22)) !important;
}

button.primary,
.toolbar button.primary,
#toggle-recognition,
#apply-settings,
#btn-buy-pro {
  color: #e6fbff !important;
  border-color: color-mix(in srgb, var(--accent) 65%, #ffffff 10%) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 72%, #0ea5e9 10%), color-mix(in srgb, var(--pro-accent-2-dark, #8b5cf6) 75%, #0f172a 15%)) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 38%, transparent) !important;
}

main { padding: 18px 20px 26px; }
.grid { gap: 18px !important; }
.card { border-radius: 24px !important; padding: 16px !important; min-height: 520px; }
.card:hover { transform: translateY(-6px) scale(1.005); }
.chart-shell { border-radius: 18px !important; padding: 10px !important; }
.chart-wrapper { border-radius: 14px !important; }

.signal-ticker__dot { box-shadow: 0 0 0 5px rgba(34, 211, 238, 0.25), 0 0 20px rgba(34, 211, 238, 0.7); }

.modal-backdrop {
  background: radial-gradient(circle at center, rgba(12, 20, 36, 0.5), rgba(2, 6, 14, 0.8)) !important;
  backdrop-filter: blur(8px);
}

.modal {
  border-radius: 20px !important;
  max-width: min(1100px, 94vw);
  animation: modal-rise .3s ease;
}

.toast {
  border-radius: 14px !important;
  border: 1px solid var(--panel-border);
  background: linear-gradient(125deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.88));
  color: #ecfeff;
  box-shadow: 0 14px 30px rgba(2, 10, 20, 0.45);
}

.signal-inbox__list > * {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 62%, transparent);
  background: color-mix(in srgb, var(--panel-color) 74%, transparent);
}

@keyframes modal-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
  .card { min-height: 460px; }
  .toolbar { gap: 6px; }
  main { padding: 12px; }
}