/*
 * ARTHMATRIX — Premium Design System
 * Loaded after all existing stylesheets to layer visual upgrades without
 * breaking any existing feature or JavaScript hook.
 *
 * Design Language: Institutional-grade algo trading platform
 * - Dark navy canvas (#0a0e1a / #0f1629)
 * - Electric blue/cyan accents (#4f8cff / #38bdf8)
 * - Green for positive signals (#22c55e / #00d084)
 * - Red for alerts (#ef4444)
 * - Inter + Poppins typography
 */

/* ════════════════════════════════════════════
   0. GOOGLE FONT IMPORT
   ════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap');

/* ════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ════════════════════════════════════════════ */
:root {
  /* Color Palette */
  --pm-bg-deepest:   #060912;
  --pm-bg-deep:      #0a0e1a;
  --pm-bg-base:      #0f1629;
  --pm-bg-elevated:  #141c35;
  --pm-bg-card:      #182040;
  --pm-bg-hover:     #1e2a4a;
  --pm-border:       rgba(99,122,183,0.18);
  --pm-border-glow:  rgba(79,140,255,0.35);

  /* Accent Colors */
  --pm-blue:         #4f8cff;
  --pm-blue-light:   #7db4ff;
  --pm-cyan:         #38bdf8;
  --pm-green:        #22c55e;
  --pm-green-light:  #4ade80;
  --pm-red:          #ef4444;
  --pm-red-light:    #fca5a5;
  --pm-yellow:       #fbbf24;
  --pm-purple:       #a78bfa;

  /* Text */
  --pm-text-primary:   #e8edf8;
  --pm-text-secondary: #94a3b8;
  --pm-text-muted:     #5a6a8a;
  --pm-text-accent:    #7db4ff;

  /* Shadows */
  --pm-shadow-card:   0 4px 24px rgba(0,0,10,0.5), 0 1px 4px rgba(0,0,0,0.4);
  --pm-shadow-glow:   0 0 24px rgba(79,140,255,0.12);
  --pm-shadow-up:     0 -2px 14px rgba(0,0,0,0.3);

  /* Radius */
  --pm-radius-sm:  8px;
  --pm-radius-md:  12px;
  --pm-radius-lg:  16px;
  --pm-radius-xl:  22px;
  --pm-radius-pill: 999px;

  /* Font */
  --pm-font-sans:  'Inter', 'Segoe UI', Arial, sans-serif;
  --pm-font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* Transitions */
  --pm-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --pm-transition-bounce: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ════════════════════════════════════════════
   2. GLOBAL RESETS & TYPOGRAPHY UPGRADE
   ════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--pm-font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Code/mono elements */
code, pre, .mono, .ticker-value, .snapshot-value {
  font-family: var(--pm-font-mono) !important;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Scrollbar (dark premium) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--pm-bg-deep); }
::-webkit-scrollbar-thumb {
  background: rgba(79,140,255,0.28);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(79,140,255,0.5); }

/* Selection */
::selection {
  background: rgba(79,140,255,0.3);
  color: #fff;
}

/* ════════════════════════════════════════════
   3. LANDING PAGE — GLOBAL OVERRIDES
   ════════════════════════════════════════════ */

/* Shift to full dark premium for landing body */
body:not(.dashboard-body) {
  background: radial-gradient(ellipse 140% 80% at 50% -10%, rgba(30,50,120,0.28) 0%, transparent 60%),
              linear-gradient(170deg, #060912 0%, #0a0f20 40%, #0d1628 100%) !important;
  color: var(--pm-text-primary) !important;
  min-height: 100vh;
}

/* ── Navbar Enhancement ──────────────────── */
.navbar {
  background: rgba(8,12,28,0.92) !important;
  border-bottom: 1px solid var(--pm-border) !important;
  box-shadow: 0 1px 0 rgba(79,140,255,0.08), 0 8px 32px rgba(0,0,10,0.4) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  height: 64px;
}

.navbar.navbar-scrolled {
  background: rgba(6,9,18,0.97) !important;
  border-bottom-color: rgba(79,140,255,0.2) !important;
  box-shadow: 0 1px 0 rgba(79,140,255,0.15), 0 12px 40px rgba(0,0,10,0.6) !important;
}

.navbar-links a, .dropbtn {
  color: var(--pm-text-secondary) !important;
  font-weight: 500 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.02em !important;
  border-radius: var(--pm-radius-sm) !important;
  transition: all var(--pm-transition) !important;
}

.navbar-links a:hover, .dropbtn:hover, .navbar-links a.active {
  color: var(--pm-text-primary) !important;
  background: rgba(79,140,255,0.1) !important;
}

.navbar-links a::after, .dropbtn::after {
  background: linear-gradient(90deg, var(--pm-blue), var(--pm-cyan)) !important;
}

/* ── Hero Section ────────────────────────── */
.hero-section {
  background: transparent !important;
  padding: 7rem 0 5rem !important;
  position: relative;
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 50%, rgba(79,140,255,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 80% 50%, rgba(56,189,248,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.hero-title {
  font-size: clamp(2.2rem, 4vw, 3.6rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  background: linear-gradient(135deg, #fff 0%, var(--pm-blue-light) 50%, var(--pm-cyan) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

.hero-desc {
  color: var(--pm-text-secondary) !important;
  font-size: 1.15rem !important;
  line-height: 1.8 !important;
  font-weight: 400 !important;
}

.hero-btn {
  background: linear-gradient(135deg, var(--pm-blue) 0%, var(--pm-cyan) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--pm-radius-pill) !important;
  padding: 0.85em 2em !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 20px rgba(79,140,255,0.3), 0 1px 4px rgba(0,0,0,0.3) !important;
  transition: all var(--pm-transition-bounce) !important;
}

.hero-btn:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 32px rgba(79,140,255,0.45), 0 2px 8px rgba(0,0,0,0.4) !important;
  filter: brightness(1.08) !important;
}

.hero-btn.secondary {
  background: transparent !important;
  border: 1.5px solid rgba(79,140,255,0.5) !important;
  color: var(--pm-blue-light) !important;
  box-shadow: 0 0 0 1px transparent !important;
}

.hero-btn.secondary:hover {
  background: rgba(79,140,255,0.1) !important;
  border-color: var(--pm-blue) !important;
}

/* ── Section Titles ──────────────────────── */
.section-title {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  background: linear-gradient(135deg, var(--pm-text-primary) 0%, var(--pm-blue-light) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Feature Cards ───────────────────────── */
.feature-card {
  background: var(--pm-bg-card) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-radius-lg) !important;
  box-shadow: var(--pm-shadow-card) !important;
  padding: 2rem !important;
  transition: all var(--pm-transition) !important;
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(79,140,255,0.04) 0%, transparent 60%);
  pointer-events: none;
}

.feature-card:hover {
  border-color: var(--pm-border-glow) !important;
  box-shadow: var(--pm-shadow-card), var(--pm-shadow-glow) !important;
  transform: translateY(-3px) !important;
}

/* ── Premium Cards (generic) ─────────────── */
.premium-card,
.info-card,
.stat-card,
.pricing-card,
.metric-card {
  background: var(--pm-bg-card) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-radius-lg) !important;
  box-shadow: var(--pm-shadow-card) !important;
  transition: border-color var(--pm-transition), box-shadow var(--pm-transition), transform var(--pm-transition);
}

.premium-card:hover,
.info-card:hover,
.stat-card:hover,
.pricing-card:hover,
.metric-card:hover {
  border-color: var(--pm-border-glow) !important;
  box-shadow: var(--pm-shadow-card), var(--pm-shadow-glow) !important;
  transform: translateY(-2px);
}

/* ── Buttons (global upgrade) ────────────── */
.premium-btn,
button.primary-btn,
.btn-primary,
.cta-btn {
  font-family: var(--pm-font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  border-radius: var(--pm-radius-pill) !important;
  transition: all var(--pm-transition-bounce) !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Outline secondary buttons */
.btn-outline, .hero-btn.secondary {
  background: transparent !important;
  border: 1.5px solid rgba(99,122,183,0.4) !important;
  color: var(--pm-text-secondary) !important;
  transition: all var(--pm-transition) !important;
}

.btn-outline:hover {
  border-color: var(--pm-blue) !important;
  color: var(--pm-blue-light) !important;
  background: rgba(79,140,255,0.08) !important;
}

/* ── Stats / Metrics Strip ───────────────── */
.stats-strip, .metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}

.stat-box {
  background: var(--pm-bg-card) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-radius-md) !important;
  padding: 1.25rem 1.5rem !important;
  text-align: center;
}

.stat-box .value {
  font-size: 2rem !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  color: var(--pm-blue-light) !important;
}

.stat-box .label {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: var(--pm-text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

/* ── Pricing Cards ───────────────────────── */
.pricing-card {
  padding: 2rem !important;
  border-radius: var(--pm-radius-xl) !important;
}

.pricing-card.featured, .pricing-card.highlighted {
  border-color: var(--pm-blue) !important;
  background: linear-gradient(145deg, var(--pm-bg-elevated) 0%, rgba(79,140,255,0.06) 100%) !important;
  box-shadow: 0 0 0 1px var(--pm-blue), 0 8px 40px rgba(79,140,255,0.2) !important;
}

/* ── Forms & Inputs ──────────────────────── */
input, select, textarea {
  font-family: var(--pm-font-sans) !important;
  background: rgba(20,28,53,0.8) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-radius-sm) !important;
  color: var(--pm-text-primary) !important;
  transition: border-color var(--pm-transition), box-shadow var(--pm-transition) !important;
  font-size: 0.9rem !important;
}

input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--pm-blue) !important;
  box-shadow: 0 0 0 3px rgba(79,140,255,0.16) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--pm-text-muted) !important;
}

/* ── Tables (premium) ────────────────────── */
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
}

thead th {
  background: rgba(10,14,26,0.9) !important;
  color: var(--pm-text-muted) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0.7rem 1rem !important;
  border-bottom: 1px solid var(--pm-border) !important;
  white-space: nowrap;
}

tbody tr {
  background: var(--pm-bg-card) !important;
  transition: background var(--pm-transition) !important;
}

tbody tr:hover {
  background: var(--pm-bg-hover) !important;
}

tbody td {
  padding: 0.7rem 1rem !important;
  font-size: 0.88rem !important;
  color: var(--pm-text-primary) !important;
  border-bottom: 1px solid rgba(20,30,60,0.6) !important;
  font-variant-numeric: tabular-nums;
}

/* ── Badges / Tags ───────────────────────── */
.badge, .tag, .status-badge {
  font-family: var(--pm-font-sans) !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em !important;
  border-radius: var(--pm-radius-pill) !important;
  padding: 3px 10px !important;
  text-transform: uppercase;
}

.badge-green, .status-active, .status-running {
  background: rgba(34,197,94,0.14) !important;
  color: var(--pm-green-light) !important;
  border: 1px solid rgba(34,197,94,0.3) !important;
}

.badge-red, .status-error, .status-stopped {
  background: rgba(239,68,68,0.12) !important;
  color: var(--pm-red-light) !important;
  border: 1px solid rgba(239,68,68,0.25) !important;
}

.badge-blue, .status-pending {
  background: rgba(79,140,255,0.12) !important;
  color: var(--pm-blue-light) !important;
  border: 1px solid rgba(79,140,255,0.25) !important;
}

.badge-yellow, .status-warning {
  background: rgba(251,191,36,0.12) !important;
  color: #fde68a !important;
  border: 1px solid rgba(251,191,36,0.25) !important;
}

/* ════════════════════════════════════════════
   4. NAVBAR — MOBILE HAMBURGER
   ════════════════════════════════════════════ */
.pm-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--pm-radius-sm);
  background: transparent;
  border: 1px solid var(--pm-border);
  z-index: 10050;
  transition: border-color var(--pm-transition);
}

.pm-hamburger:hover { border-color: var(--pm-blue); }

.pm-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--pm-text-secondary);
  border-radius: 2px;
  transition: all 0.28s ease;
}

.pm-hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.pm-hamburger.open span:nth-child(2) { opacity: 0; }
.pm-hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile menu overlay */
.pm-mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(6,9,18,0.97);
  z-index: 10040;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.97);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.pm-mobile-menu.open {
  opacity: 1;
  pointer-events: all;
  transform: scale(1);
}

.pm-mobile-menu a {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--pm-text-secondary) !important;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: var(--pm-radius-md);
  transition: all var(--pm-transition);
  text-align: center;
}

.pm-mobile-menu a:hover {
  color: var(--pm-text-primary) !important;
  background: rgba(79,140,255,0.1) !important;
}

/* ════════════════════════════════════════════
   5. DASHBOARD — CARD SYSTEM UPGRADE
   ════════════════════════════════════════════ */

/* Premium panel card */
.panel-unified,
.dashboard-section,
.market-snapshot-card,
.risk-meter-compact-card,
.news-panel-shell,
.quick-actions-card,
.command-center-shell,
.live-side-card,
.heatmap-shell {
  border-radius: var(--pm-radius-lg) !important;
  border: 1px solid var(--pm-border) !important;
  box-shadow: 0 2px 16px rgba(0,0,10,0.4), inset 0 1px 0 rgba(255,255,255,0.03) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: border-color var(--pm-transition), box-shadow var(--pm-transition) !important;
}

.panel-unified:hover,
.dashboard-section:hover {
  border-color: rgba(79,140,255,0.22) !important;
}

/* Section heading in dashboard */
.dashboard-section > h2,
.dashboard-section > h3,
.panel-title,
.section-header-title {
  font-family: var(--pm-font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  color: var(--pm-text-primary) !important;
}

/* ── Snapshot Cards ──────────────────────── */
.snapshot-value {
  font-family: var(--pm-font-mono) !important;
  font-weight: 700 !important;
  font-feature-settings: "tnum" !important;
}

.snapshot-label {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--pm-text-muted) !important;
}

/* ── App Topbar (dashboard topbar) ──────── */
.app-topbar {
  background: rgba(8,12,24,0.94) !important;
  border-bottom: 1px solid var(--pm-border) !important;
  box-shadow: 0 1px 0 rgba(79,140,255,0.07), 0 4px 16px rgba(0,0,0,0.3) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.app-user-chip {
  border: 1px solid var(--pm-border) !important;
  background: rgba(15,22,42,0.7) !important;
  border-radius: var(--pm-radius-pill) !important;
}

.app-user-chip .logout {
  background: linear-gradient(135deg, var(--pm-blue) 0%, var(--pm-cyan) 100%) !important;
  border-radius: var(--pm-radius-pill) !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.02em !important;
  transition: all var(--pm-transition-bounce) !important;
}

.app-user-chip .logout:hover {
  transform: translateY(-1px) scale(1.04) !important;
  box-shadow: 0 4px 14px rgba(79,140,255,0.35) !important;
}

/* ── Sidebar (premium upgrade) ───────────── */
.premium-sidebar,
[class*="sidebar"],
.app-sidebar {
  background: linear-gradient(180deg, rgba(8,12,24,0.98) 0%, rgba(10,15,30,0.97) 100%) !important;
  border-right: 1px solid var(--pm-border) !important;
  box-shadow: 4px 0 20px rgba(0,0,10,0.3) !important;
}

/* Sidebar nav items */
.sidebar-item, .sidebar-link, .nav-item {
  border-radius: var(--pm-radius-sm) !important;
  transition: all var(--pm-transition) !important;
  color: var(--pm-text-muted) !important;
  font-weight: 500 !important;
}

.sidebar-item:hover, .sidebar-link:hover,
.sidebar-item.active, .sidebar-link.active,
.sidebar-item.selected {
  background: rgba(79,140,255,0.1) !important;
  color: var(--pm-text-primary) !important;
  border-left: 2px solid var(--pm-blue) !important;
}

/* ── Buttons in Dashboard ────────────────── */
.qa-btn, .action-btn, .cmd-btn {
  font-family: var(--pm-font-sans) !important;
  font-weight: 600 !important;
  border-radius: var(--pm-radius-sm) !important;
  transition: all var(--pm-transition) !important;
}

/* Start/Stop/Restart automation buttons */
button[onclick*="start"], button[onclick*="Start"],
.btn-start, .start-btn {
  background: linear-gradient(135deg, #166534 0%, #22c55e 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--pm-radius-sm) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 12px rgba(34,197,94,0.2) !important;
  transition: all var(--pm-transition-bounce) !important;
}

button[onclick*="start"]:hover, button[onclick*="Start"]:hover, .btn-start:hover, .start-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 18px rgba(34,197,94,0.35) !important;
}

button[onclick*="stop"], button[onclick*="Stop"],
.btn-stop, .stop-btn {
  background: linear-gradient(135deg, #7f1d1d 0%, #ef4444 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--pm-radius-sm) !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 12px rgba(239,68,68,0.2) !important;
  transition: all var(--pm-transition-bounce) !important;
}

/* ── Ticker Bar ──────────────────────────── */
.ticker-bar, .short-ticker-bar {
  background: rgba(8,12,24,0.95) !important;
  border-bottom: 1px solid var(--pm-border) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

.ticker-item {
  font-family: var(--pm-font-mono) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}

/* ── Modal Upgrade ───────────────────────── */
.modal-content {
  background: var(--pm-bg-card) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-radius-xl) !important;
  box-shadow: 0 24px 80px rgba(0,0,10,0.7), 0 0 0 1px rgba(79,140,255,0.12) !important;
  backdrop-filter: blur(24px) !important;
}

/* ── OTP Input ───────────────────────────── */
.otp-input {
  font-family: var(--pm-font-mono) !important;
  background: var(--pm-bg-deep) !important;
  border: 1px solid rgba(79,140,255,0.35) !important;
  border-radius: var(--pm-radius-sm) !important;
  color: var(--pm-text-primary) !important;
  letter-spacing: 10px !important;
  font-size: 1.4rem !important;
}

.otp-input:focus {
  border-color: var(--pm-blue) !important;
  box-shadow: 0 0 0 3px rgba(79,140,255,0.2) !important;
}

/* ── Broker Connect Modal ────────────────── */
.broker-connect-status {
  border-radius: var(--pm-radius-sm) !important;
  padding: 8px 12px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}

.broker-connect-status-success {
  background: rgba(34,197,94,0.12) !important;
  border: 1px solid rgba(34,197,94,0.3) !important;
  color: var(--pm-green-light) !important;
  border-radius: var(--pm-radius-sm) !important;
}

.broker-connect-status-error {
  background: rgba(239,68,68,0.1) !important;
  border: 1px solid rgba(239,68,68,0.25) !important;
  color: var(--pm-red-light) !important;
  border-radius: var(--pm-radius-sm) !important;
}

/* ── Strategy Cards ──────────────────────── */
.strategy-card {
  background: var(--pm-bg-card) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-radius-lg) !important;
  box-shadow: var(--pm-shadow-card) !important;
  transition: all var(--pm-transition) !important;
  overflow: hidden;
  position: relative;
}

.strategy-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pm-blue), var(--pm-cyan));
  opacity: 0;
  transition: opacity var(--pm-transition);
}

.strategy-card:hover {
  border-color: var(--pm-border-glow) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--pm-shadow-card), 0 0 20px rgba(79,140,255,0.1) !important;
}

.strategy-card:hover::before { opacity: 1; }

/* ── PnL / Profit colors ─────────────────── */
.positive, .profit, .pnl-positive, .up, .bullish { color: var(--pm-green) !important; }
.negative, .loss, .pnl-negative, .down, .bearish  { color: var(--pm-red) !important; }
.neutral { color: var(--pm-text-secondary) !important; }

/* ── Heatmap ─────────────────────────────── */
#heatmap-grid .heatmap-tile {
  border-radius: var(--pm-radius-md) !important;
  transition: all var(--pm-transition) !important;
}

#heatmap-grid .heatmap-tile:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

/* ════════════════════════════════════════════
   6. FOOTER (premium)
   ════════════════════════════════════════════ */
footer, .site-footer, .footer {
  background: var(--pm-bg-deepest) !important;
  border-top: 1px solid var(--pm-border) !important;
  color: var(--pm-text-muted) !important;
  font-size: 0.85rem !important;
}

footer a, .site-footer a, .footer a {
  color: var(--pm-text-muted) !important;
  transition: color var(--pm-transition) !important;
}

footer a:hover, .site-footer a:hover, .footer a:hover {
  color: var(--pm-blue-light) !important;
}

/* ════════════════════════════════════════════
   7. MOBILE RESPONSIVENESS
   ════════════════════════════════════════════ */

/* ── < 1280px: Tablet landscape ─────────── */
@media (max-width: 1280px) {
  .premium-dashboard-main {
    margin-left: calc(var(--app-sidebar-width, 64px) + 10px) !important;
    padding: 0 10px 16px 6px !important;
  }

  .hero-section {
    flex-direction: column !important;
    text-align: center;
    padding: 6rem 2rem 3rem !important;
    gap: 2.5rem !important;
  }

  .hero-content { max-width: 100% !important; }

  .hero-btns {
    justify-content: center !important;
    flex-wrap: wrap;
  }
}

/* ── < 1024px: Tablet portrait ──────────── */
@media (max-width: 1024px) {
  .market-snapshot-animated-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .dashboard-section {
    padding: 10px 10px !important;
  }
}

/* ── < 768px: Mobile landscape ──────────── */
@media (max-width: 768px) {
  /* Show hamburger, hide desktop nav */
  .pm-hamburger { display: flex !important; }

  .navbar-links {
    display: none !important;
  }

  .navbar {
    height: 56px !important;
    padding: 0 1rem !important;
  }

  /* Dashboard main - full width on mobile */
  .premium-dashboard-main {
    margin-left: 0 !important;
    padding: 0 8px 16px !important;
  }

  /* Snapshot cards - 2 column */
  .market-snapshot-animated-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Full width tables - scroll */
  .table-responsive, table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Stack hero */
  .hero-section {
    flex-direction: column !important;
    padding: 5rem 1.2rem 2.5rem !important;
    gap: 2rem !important;
    text-align: center !important;
  }

  .hero-img { max-width: 280px !important; }

  .hero-title {
    font-size: clamp(1.8rem, 8vw, 2.4rem) !important;
  }

  /* Features stacked */
  .features-list, .feature-cards {
    flex-direction: column !important;
  }

  /* Modal full-width */
  .modal-content {
    min-width: unset !important;
    width: calc(100vw - 2rem) !important;
    margin: 1rem !important;
    padding: 1.5rem 1.2rem !important;
    border-radius: var(--pm-radius-lg) !important;
  }

  /* Sidebar collapsed by default */
  .premium-sidebar {
    width: 0 !important;
    overflow: hidden !important;
  }

  .premium-sidebar.mobile-open {
    width: 240px !important;
    box-shadow: 8px 0 32px rgba(0,0,0,0.5) !important;
  }

  /* Broker modal steps */
  .broker-steps { padding: 0.5rem !important; }

  /* App topbar simplified */
  .app-topbar {
    padding: 8px 12px !important;
  }

  .app-user-chip .name {
    max-width: 100px !important;
    font-size: 0.78rem !important;
  }
}

/* ── < 480px: Mobile small ───────────────── */
@media (max-width: 480px) {
  body { font-size: 14px !important; }

  .hero-title {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
  }

  .hero-desc {
    font-size: 0.95rem !important;
  }

  .hero-btn {
    padding: 0.75em 1.5em !important;
    font-size: 0.9rem !important;
  }

  .hero-btns {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
  }

  .market-snapshot-animated-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .dashboard-section {
    padding: 8px 8px !important;
    border-radius: var(--pm-radius-md) !important;
  }

  .section-title {
    font-size: 1.4rem !important;
  }

  .modal-content {
    padding: 1.25rem 1rem !important;
  }

  thead th { font-size: 0.68rem !important; padding: 0.5rem 0.7rem !important; }
  tbody td { font-size: 0.82rem !important; padding: 0.5rem 0.7rem !important; }
}

/* ════════════════════════════════════════════
   8. LOADING STATES & ANIMATIONS
   ════════════════════════════════════════════ */
@keyframes pm-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.pm-skeleton {
  background: linear-gradient(90deg,
    rgba(20,28,53,0.8) 25%,
    rgba(30,42,75,0.9) 50%,
    rgba(20,28,53,0.8) 75%
  ) !important;
  background-size: 800px 100% !important;
  animation: pm-shimmer 1.8s infinite !important;
  border-radius: var(--pm-radius-sm) !important;
}

@keyframes pm-fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.pm-fadein {
  animation: pm-fadeInUp 0.45s ease both;
}

/* Stagger children */
.pm-stagger > * {
  animation: pm-fadeInUp 0.4s ease both;
}
.pm-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.pm-stagger > *:nth-child(2) { animation-delay: 0.10s; }
.pm-stagger > *:nth-child(3) { animation-delay: 0.15s; }
.pm-stagger > *:nth-child(4) { animation-delay: 0.20s; }
.pm-stagger > *:nth-child(5) { animation-delay: 0.25s; }
.pm-stagger > *:nth-child(6) { animation-delay: 0.30s; }

/* Live pulse dot */
.pm-live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pm-green);
  box-shadow: 0 0 0 2px rgba(34,197,94,0.25);
  animation: pm-pulse 1.8s ease-in-out infinite;
}

/* ════════════════════════════════════════════
   9. HOMEPAGE — DARK PREMIUM OVERRIDES (v2)
   All selectors force-convert the light green
   homepage theme into the dark premium palette.
   ════════════════════════════════════════════ */

/* ── Animated ambient orbs ───────────────── */
@keyframes pm-orb-1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(-40px, 30px) scale(1.07); }
  66%     { transform: translate(30px,-40px) scale(0.93); }
}
@keyframes pm-orb-2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(50px,-50px) scale(1.12); }
}

body:not(.dashboard-body) .home-bg-trading-canvas {
  opacity: 0.18 !important;
}

/* ── Navbar brand ────────────────────────── */
.brand-unique .brand-trad span { color: var(--pm-text-primary) !important; }
.brand-unique .brand-yne span  { color: var(--pm-blue-light) !important; }
.animated-brand .brand-letter  { color: var(--pm-text-primary) !important; }

.premium-brand .brand-gradient {
  background: linear-gradient(90deg, var(--pm-cyan) 0%, var(--pm-blue-light) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 2px 8px rgba(56,189,248,0.25)) !important;
}
.premium-brand .brand-gradient.blue {
  background: linear-gradient(90deg, var(--pm-blue-light) 0%, var(--pm-cyan) 100%) !important;
  filter: drop-shadow(0 2px 8px rgba(79,140,255,0.25)) !important;
}

/* ── Navbar links ────────────────────────── */
.navbar-links a,
.dropbtn {
  color: var(--pm-text-secondary) !important;
  font-family: var(--pm-font-sans) !important;
}
.navbar-links a.active,
.navbar-links a:hover,
.dropbtn:hover {
  color: var(--pm-text-primary) !important;
  background: rgba(79,140,255,0.1) !important;
  transform: translateY(-1px) !important;
}
.navbar-links a::after, .dropbtn::after {
  background: linear-gradient(90deg, var(--pm-blue), var(--pm-cyan)) !important;
}

/* ── Dropdown ────────────────────────────── */
.dropdown-content {
  background: var(--pm-bg-elevated) !important;
  border: 1px solid var(--pm-border) !important;
  box-shadow: 0 20px 60px rgba(0,0,10,0.8), 0 0 0 1px rgba(79,140,255,0.1) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}
.dropdown-content .dropdown-title {
  background: rgba(10,14,26,0.95) !important;
  color: var(--pm-blue-light) !important;
  border-bottom-color: var(--pm-border) !important;
}
.dropdown-content .feature-link-item {
  color: var(--pm-text-secondary) !important;
  border-bottom-color: rgba(99,122,183,0.1) !important;
}
.dropdown-content .feature-link-item:hover {
  background: rgba(79,140,255,0.1) !important;
  color: var(--pm-text-primary) !important;
}
.dropdown-content .feature-icon { color: var(--pm-blue-light) !important; }

/* ── Navbar auth buttons ─────────────────── */
.navbar-auth .premium-btn-nav,
.premium-btn-nav {
  background: linear-gradient(135deg, var(--pm-blue) 0%, var(--pm-cyan) 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(79,140,255,0.28) !important;
}
.navbar-auth .login-btn-nav,
.login-btn-nav {
  color: var(--pm-text-secondary) !important;
  border: 1px solid var(--pm-border) !important;
  background: transparent !important;
}
.navbar-auth .login-btn-nav:hover {
  color: var(--pm-text-primary) !important;
  border-color: var(--pm-blue) !important;
  background: rgba(79,140,255,0.08) !important;
}

/* ── Hero eyebrow chip ───────────────────── */
.hero-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4em !important;
  background: rgba(56,189,248,0.08) !important;
  border: 1px solid rgba(56,189,248,0.22) !important;
  border-radius: var(--pm-radius-pill) !important;
  color: var(--pm-cyan) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0.3em 1em !important;
  margin-bottom: 1rem !important;
}

/* ── Hero image frame ────────────────────── */
.hero-img-frame {
  border-radius: var(--pm-radius-xl) !important;
  overflow: hidden !important;
  box-shadow: 0 24px 80px rgba(79,140,255,0.18), 0 0 0 1px rgba(79,140,255,0.14) !important;
  background: var(--pm-bg-card) !important;
}
.hero-video-overlay {
  background: linear-gradient(180deg, transparent 55%, rgba(6,9,18,0.85) 100%) !important;
}

/* ── Trusted section ─────────────────────── */
section.trusted-section,
.trusted-section {
  background: rgba(8,12,24,0.96) !important;
  border-top: 1px solid var(--pm-border) !important;
  border-bottom: 1px solid var(--pm-border) !important;
}
.trusted-title { color: var(--pm-blue-light) !important; }

/* ── KPI / stats section ─────────────────── */
.kpi-section {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 1.5rem !important;
  padding: 3rem 5vw !important;
  background: transparent !important;
}
.kpi-card {
  background: var(--pm-bg-card) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-radius-lg) !important;
  padding: 1.5rem !important;
  text-align: center !important;
  transition: all var(--pm-transition) !important;
}
.kpi-card:hover {
  border-color: var(--pm-border-glow) !important;
  box-shadow: var(--pm-shadow-glow) !important;
  transform: translateY(-3px) !important;
}
.kpi-number {
  font-size: 2.2rem !important;
  font-weight: 900 !important;
  color: var(--pm-blue-light) !important;
  font-family: var(--pm-font-mono) !important;
  font-variant-numeric: tabular-nums !important;
}
.kpi-label {
  color: var(--pm-text-muted) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-top: 0.3rem !important;
}

/* ── Feature cards ───────────────────────── */
.feature-card {
  background: var(--pm-bg-card) !important;
  border: 1px solid var(--pm-border) !important;
}
.feature-card h3,
.feature-card-content h3 { color: var(--pm-text-primary) !important; }
.feature-card p,
.feature-card-content p  { color: var(--pm-text-secondary) !important; }
.feature-card .feature-link { color: var(--pm-blue-light) !important; }
.feature-card .feature-link:hover { color: var(--pm-cyan) !important; }
.feature-img {
  background: rgba(79,140,255,0.06) !important;
  border: 1px solid var(--pm-border) !important;
  box-shadow: 0 4px 20px rgba(79,140,255,0.1) !important;
}

/* ── Pricing cards ───────────────────────── */
.pricing-card {
  background: var(--pm-bg-card) !important;
  border: 1px solid var(--pm-border) !important;
}
.pricing-card .plan  { color: var(--pm-blue-light) !important; }
.pricing-card .price { color: var(--pm-cyan) !important; }
.pricing-card .desc  { color: var(--pm-text-secondary) !important; }
.pricing-card ul li  { color: var(--pm-text-secondary) !important; }

/* ── Testimonial cards ───────────────────── */
.testimonial-card {
  background: var(--pm-bg-card) !important;
  border: 1px solid var(--pm-border) !important;
}
.testimonial-card p      { color: var(--pm-text-secondary) !important; }
.testimonial-card .author { color: var(--pm-blue-light) !important; }

/* ── FAQ items ───────────────────────────── */
.faq-item strong { color: var(--pm-text-primary) !important; }
.faq-item p      { color: var(--pm-text-secondary) !important; }

/* ── Contact section ─────────────────────── */
.contact-section p    { color: var(--pm-text-secondary) !important; }
.contact-section a    { color: var(--pm-blue-light) !important; }
.contact-form input,
.contact-form textarea {
  background: rgba(20,28,53,0.9) !important;
  border: 1px solid var(--pm-border) !important;
  color: var(--pm-text-primary) !important;
}
.contact-form button {
  background: linear-gradient(135deg, var(--pm-blue) 0%, var(--pm-cyan) 100%) !important;
  color: #fff !important;
  border: none !important;
}

/* ── Footer ──────────────────────────────── */
.footer {
  background: var(--pm-bg-deepest) !important;
  color: var(--pm-text-muted) !important;
  border-top: 1px solid var(--pm-border) !important;
}

/* ── Modal (login / register / OTP) ─────── */
.modal-content {
  background: var(--pm-bg-card) !important;
  border: 1px solid var(--pm-border) !important;
  color: var(--pm-text-primary) !important;
}
.modal-content h2,
.modal-content h3,
.modal-content label,
.modal-content p { color: var(--pm-text-primary) !important; }
.close-btn { color: var(--pm-blue-light) !important; }

/* ── Dodo AI widget ──────────────────────── */
.dodo-widget {
  background: linear-gradient(130deg, var(--pm-bg-card) 0%, var(--pm-bg-elevated) 100%) !important;
  border-color: var(--pm-border) !important;
  box-shadow: 0 20px 50px rgba(0,0,10,0.7) !important;
}
.dodo-head {
  background: rgba(10,14,26,0.95) !important;
  border-bottom-color: var(--pm-border) !important;
}
.dodo-head h4  { color: var(--pm-text-primary) !important; }
.dodo-head small { color: var(--pm-text-muted) !important; }
.dodo-close {
  background: var(--pm-bg-elevated) !important;
  color: var(--pm-text-primary) !important;
  border: 1px solid var(--pm-border) !important;
}

/* ── Workflow section & misc ─────────────── */
body:not(.dashboard-body) .workflow-section,
body:not(.dashboard-body) section { background: transparent !important; }

/* Override stray light section backgrounds
   specifically the hardcoded inline style colors */
body:not(.dashboard-body) *[style*="background:#181818"] {
  background: rgba(8,12,24,0.96) !important;
}
body:not(.dashboard-body) *[style*="color:#11998e"] {
  color: var(--pm-blue-light) !important;
}
body:not(.dashboard-body) *[style*="color:#fff"] {
  color: var(--pm-text-primary) !important;
}

/* ════════════════════════════════════════════
   10. DASHBOARD — MOBILE APP LAYOUT (v2)
   ════════════════════════════════════════════ */

/* ── Sidebar overlay on ≤768px ───────────── */
@media (max-width: 768px) {
  /* Full-bleed content, no sidebar indent */
  .premium-dashboard-main,
  .dashboard-main,
  .main-content,
  [class*="dashboard-main"] {
    margin-left: 0 !important;
    padding-top: 62px !important;
  }

  /* Sidebar slides in from left as overlay */
  .premium-sidebar,
  .app-sidebar,
  #appSidebar,
  .sidebar {
    position: fixed !important;
    left: -280px !important;
    top: 0 !important;
    height: 100vh !important;
    width: 260px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 9998 !important;
    transition: left 0.3s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow: none !important;
    background: var(--pm-bg-deep) !important;
    border-right: 1px solid var(--pm-border) !important;
  }

  .premium-sidebar.mobile-open,
  .app-sidebar.mobile-open,
  #appSidebar.mobile-open,
  .sidebar.mobile-open {
    left: 0 !important;
    box-shadow: 8px 0 48px rgba(0,0,0,0.65) !important;
  }

  /* Dim backdrop when sidebar open */
  .pm-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9997;
    backdrop-filter: blur(2px);
  }
  .pm-sidebar-backdrop.visible { display: block !important; }

  /* Topbar hamburger */
  .app-topbar {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 9996 !important;
    height: 56px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .pm-topbar-hamburger {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--pm-radius-sm);
    border: none;
    background: transparent;
    transition: background var(--pm-transition);
  }
  .pm-topbar-hamburger:hover { background: rgba(79,140,255,0.1) !important; }
  .pm-topbar-hamburger span {
    display: block;
    width: 20px; height: 2px;
    background: var(--pm-text-secondary);
    border-radius: 2px;
    transition: all var(--pm-transition);
  }

  /* Dashboard grid snap to single column */
  .market-snapshot-animated-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Bottom padding for nav bar */
  .premium-dashboard-main,
  .dashboard-main,
  .main-content,
  [class*="dashboard-main"] {
    padding-bottom: 68px !important;
  }

  /* Responsive tables */
  .dashboard-section table,
  .table-wrap table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }

  /* KPI grid 2-col on mobile */
  .kpi-section {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
  }

  /* Compact dashboard section headings */
  .dashboard-section > h2 { font-size: 0.92rem !important; }
}

/* ── ≤ 480px tweaks ──────────────────────── */
@media (max-width: 480px) {
  .market-snapshot-animated-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .premium-dashboard-main,
  .dashboard-main,
  .main-content,
  [class*="dashboard-main"] {
    padding: 62px 6px 68px !important;
  }

  .dashboard-section {
    padding: 8px !important;
    border-radius: 10px !important;
  }

  thead th { font-size: 0.68rem !important; padding: 0.45rem 0.6rem !important; }
  tbody td { font-size: 0.8rem  !important; padding: 0.45rem 0.6rem !important; }
}

/* ── Mobile bottom nav bar ───────────────── */
.pm-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 58px;
  background: rgba(6,9,18,0.97);
  border-top: 1px solid var(--pm-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 995;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
}

@media (max-width: 768px) {
  .pm-bottom-nav { display: flex !important; }
}

.pm-bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 14px;
  border-radius: var(--pm-radius-sm);
  color: var(--pm-text-muted);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: all var(--pm-transition);
  min-width: 52px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.pm-bottom-nav-item i { font-size: 1.15rem; margin-bottom: 1px; }
.pm-bottom-nav-item.active,
.pm-bottom-nav-item:hover {
  color: var(--pm-blue-light) !important;
  background: rgba(79,140,255,0.1) !important;
}

/* ════════════════════════════════════════════
   11. HOMEPAGE — FINE-TUNE OVERRIDES (v3)
   ════════════════════════════════════════════ */

/* ── Hero title accent span ──────────────── */
.hero-title .accent {
  background: linear-gradient(90deg, var(--pm-cyan) 0%, var(--pm-blue-light) 60%, #c4b5fd 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

/* ── Toast notification (dark) ───────────── */
#toastContent {
  background: var(--pm-bg-card) !important;
  color: var(--pm-text-primary) !important;
  border: 1px solid var(--pm-border) !important;
  box-shadow: 0 8px 40px rgba(0,0,10,0.6) !important;
}
#toastContent.success { border-left: 4px solid var(--pm-green) !important; }
#toastContent.error   { border-left: 4px solid var(--pm-red)   !important; }

/* ── Stray inline colour overrides ──────── */
/* hero title hardcoded green span */
.hero-title span[style*="color:#38ef7d"],
.hero-title span[style*="color: #38ef7d"] {
  color: var(--pm-cyan) !important;
  -webkit-text-fill-color: var(--pm-cyan) !important;
  text-shadow: 0 2px 20px rgba(56,189,248,0.25) !important;
}

/* compact navbar override colours */
body.compact-pro .hero-eyebrow {
  background: rgba(56,189,248,0.08) !important;
  color: var(--pm-cyan) !important;
  border-color: rgba(56,189,248,0.22) !important;
}
body.compact-pro .hero-title .accent {
  background: linear-gradient(90deg, var(--pm-cyan) 0%, var(--pm-blue-light) 60%, #c4b5fd 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Floating CTA button ─────────────────── */
.floating-cta {
  background: linear-gradient(135deg, var(--pm-blue) 0%, var(--pm-cyan) 100%) !important;
  box-shadow: 0 8px 28px rgba(79,140,255,0.35) !important;
}

/* ── Workflow / process section ──────────── */
.workflow-section,
.workflow-steps,
.process-section { background: transparent !important; }

/* ── All section headings on homepage ────── */
body:not(.dashboard-body) .section-title,
body:not(.dashboard-body) h2.section-title,
body:not(.dashboard-body) h3.section-title {
  background: linear-gradient(135deg, var(--pm-text-primary) 0%, var(--pm-blue-light) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

/* ── Pricing section headings / text ─────── */
body:not(.dashboard-body) .pricing-list .plan,
body:not(.dashboard-body) .plan { color: var(--pm-blue-light) !important; }
body:not(.dashboard-body) .pricing-list .price { color: var(--pm-cyan) !important; }
body:not(.dashboard-body) .pricing-list .desc,
body:not(.dashboard-body) .pricing-list ul li { color: var(--pm-text-secondary) !important; }

/* ── Generic remaining light colours ─────── */
body:not(.dashboard-body) p  { color: var(--pm-text-secondary) !important; }
body:not(.dashboard-body) h1,
body:not(.dashboard-body) h2,
body:not(.dashboard-body) h3 { color: var(--pm-text-primary) !important; }
/* Prevent overriding gradient text (already transparent) */
body:not(.dashboard-body) .hero-title,
body:not(.dashboard-body) .section-title {
  color: transparent !important;
}

/* Stagger children */
.pm-stagger > * {
  animation: pm-fadeInUp 0.4s ease both;
}
.pm-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.pm-stagger > *:nth-child(2) { animation-delay: 0.10s; }
.pm-stagger > *:nth-child(3) { animation-delay: 0.15s; }
.pm-stagger > *:nth-child(4) { animation-delay: 0.20s; }
.pm-stagger > *:nth-child(5) { animation-delay: 0.25s; }
.pm-stagger > *:nth-child(6) { animation-delay: 0.30s; }

/* Live pulse dot */
.pm-live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--pm-green);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
  animation: pm-livePulse 1.8s infinite;
}

@keyframes pm-livePulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* ════════════════════════════════════════════
   9. UTILITY CLASSES
   ════════════════════════════════════════════ */
.pm-text-gradient {
  background: linear-gradient(135deg, #fff 0%, var(--pm-blue-light) 60%, var(--pm-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pm-blue-glow { text-shadow: 0 0 12px rgba(79,140,255,0.6); }
.pm-green-glow { text-shadow: 0 0 12px rgba(34,197,94,0.5); }

.pm-glass {
  background: rgba(20,28,53,0.6) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid var(--pm-border) !important;
}

.pm-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pm-border), transparent);
  margin: 1rem 0;
}

/* Numeric mono values */
.num { font-family: var(--pm-font-mono) !important; font-variant-numeric: tabular-nums !important; }

/* ════════════════════════════════════════════
   10. PREMIUM SECTION BADGES / LABELS
   ════════════════════════════════════════════ */
.section-eyebrow {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--pm-blue) !important;
  display: inline-block;
  margin-bottom: 0.5rem;
}

/* ════════════════════════════════════════════
   11. DROPDOWN MENUS
   ════════════════════════════════════════════ */
.dropdown-content, .dropdown-menu {
  background: var(--pm-bg-card) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-radius-md) !important;
  box-shadow: 0 16px 40px rgba(0,0,10,0.5), 0 0 0 1px rgba(79,140,255,0.08) !important;
  backdrop-filter: blur(16px) !important;
  overflow: hidden !important;
}

.dropdown-content a, .dropdown-menu a {
  color: var(--pm-text-secondary) !important;
  padding: 0.6rem 1rem !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  transition: all var(--pm-transition) !important;
}

.dropdown-content a:hover, .dropdown-menu a:hover {
  background: rgba(79,140,255,0.1) !important;
  color: var(--pm-text-primary) !important;
}

/* ════════════════════════════════════════════
   12. SPECIFIC PAGE COMPONENT POLISH
   ════════════════════════════════════════════ */

/* Scroll progress bar */
.scroll-progress {
  height: 2px !important;
  background: linear-gradient(90deg, var(--pm-blue), var(--pm-cyan), var(--pm-green)) !important;
}

/* News card */
.news-animated-card, .news-card {
  background: var(--pm-bg-card) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-radius-md) !important;
  transition: all var(--pm-transition) !important;
}

.news-animated-card:hover, .news-card:hover {
  border-color: rgba(79,140,255,0.25) !important;
  transform: translateX(2px) !important;
}

/* Risk meter */
.risk-meter-compact-card {
  background: linear-gradient(145deg, rgba(15,23,42,0.9) 0%, rgba(20,28,53,0.8) 100%) !important;
}

/* Command center / automation panel */
.command-center-shell {
  background: linear-gradient(145deg, rgba(10,14,26,0.95) 0%, rgba(15,22,40,0.9) 100%) !important;
}

/* Quick actions */
.quick-actions-card .qa-action-row button {
  border-radius: var(--pm-radius-sm) !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
}

/* Brand name polish */
.brand-unique, .navbar-logo-text {
  font-family: var(--pm-font-sans) !important;
  letter-spacing: -0.02em !important;
}

/* ════════════════════════════════════════════
   13. FOCUS ACCESSIBILITY (keep high contrast)
   ════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--pm-blue) !important;
  outline-offset: 3px !important;
  border-radius: 3px !important;
}

a:focus:not(:focus-visible) { outline: none !important; }
button:focus:not(:focus-visible) { outline: none !important; }

/* ════════════════════════════════════════════
   14. PRINT
   ════════════════════════════════════════════ */
@media print {
  .ticker-bar, .app-topbar, .premium-sidebar, footer { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .dashboard-section { box-shadow: none !important; border: 1px solid #ccc !important; }
}