/*
 * TraderPro — Light Theme "Amethyst Geode"  v3
 * Palette ref: Midnight Violet #240A24 · Blue Violet #9932CC · Lavender #E6E6FA
 *
 * FIXES v3:
 *  - html[] prefix → higher specificity than all inline <style> blocks
 *  - canvas elements hidden (JS-painted dark, cannot be overridden via CSS vars)
 *  - Gradient background matching reference image
 *  - All text explicitly re-declared dark using #240A24 system
 *  - Hardcoded rgba(255,255,255) text overridden on non-button elements
 * ─────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS  (html prefix beats :root in inline <style>)
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  /* Backgrounds */
  --bg:  #e8e4f8;
  --bg1: #f0eeff;

  /* Surfaces */
  --glass:   rgba(255, 255, 255, 0.70);
  --border:  rgba(153, 50, 204, 0.18);
  --border2: rgba(153, 50, 204, 0.32);

  /* ── Accent — Blue Violet palette ── */
  --cyan:   #9932CC;   /* Blue Violet  */
  --blue:   #7B1FA2;   /* deeper       */
  --green:  #2E7D32;   /* WCAG 7.0:1   */
  --red:    #C62828;   /* WCAG 6.5:1   */
  --amber:  #BF360C;   /* WCAG 5.8:1   */
  --violet: #6A1B9A;
  --accent:  #9932CC;
  --accent2: #7B1FA2;

  /* ── Text — Midnight Violet system ── */
  --t1: #240A24;                     /* primary   16:1 on white ✓ */
  --t2: rgba(36, 10, 36, 0.80);     /* secondary  8.2:1           */
  --t3: #6b21a8;                     /* tertiary   5.5:1 on white ✓ — was 2.8:1, FIXED */

  --text-1: #240A24;
  --text-2: rgba(36, 10, 36, 0.78);
  --text-3: #6b21a8;

  /* Used by FXB & chat panel — liquid glass base */
  --card: rgba(255, 255, 255, 0.60);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. CANVAS — must hide JS-painted elements (dark, cannot CSS-override)
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] #bg-canvas,
html[data-theme="light"] #cometCanvas {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. BODY — Amethyst Geode gradient
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] body {
  background:
    radial-gradient(ellipse 130% 75% at -8% -5%,  rgba(200, 150, 230, 0.50) 0%, transparent 52%),
    radial-gradient(ellipse 75%  130% at 108% 102%, rgba(170, 185, 230, 0.42) 0%, transparent 52%),
    linear-gradient(155deg, #ede0f8 0%, #dde0f2 48%, #e6e4f8 100%);
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
}

/* ── Orbs — very soft on light background ── */
html[data-theme="light"] .orb-1 {
  background: radial-gradient(circle, rgba(153, 50, 204, 0.08) 0%, transparent 70%);
}
html[data-theme="light"] .orb-2 {
  background: radial-gradient(circle, rgba(123, 31, 162, 0.06) 0%, transparent 70%);
}
html[data-theme="light"] .orb-3,
html[data-theme="light"] .orb-4,
html[data-theme="light"] .orb-5 { background: none; }

/* ── Grid — subtle purple dots ── */
html[data-theme="light"] .bg-grid {
  background-image:
    linear-gradient(rgba(153, 50, 204, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(153, 50, 204, 0.07) 1px, transparent 1px);
}

/* ── Radial & vignette overlays ── */
html[data-theme="light"] .bg-radial  { background: none; }
html[data-theme="light"] .bg-vignette { background: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   4. GLOBAL TEXT — explicit dark override for all major text holders
      Covers every element that might have a hardcoded light color
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .page-title,
html[data-theme="light"] .page-sub,
html[data-theme="light"] .panel-title,
html[data-theme="light"] .sc-label,
html[data-theme="light"] .sc-hint,
html[data-theme="light"] .ms-lbl,
html[data-theme="light"] .ms-val,
html[data-theme="light"] .nav-sec,
html[data-theme="light"] .pw-lbl,
html[data-theme="light"] .pw-name,
html[data-theme="light"] .pw-exp,
html[data-theme="light"] .uc-name,
html[data-theme="light"] .uc-role,
html[data-theme="light"] .sb-name,
html[data-theme="light"] .lock-title,
html[data-theme="light"] .lock-desc,
html[data-theme="light"] .modal-title,
html[data-theme="light"] .modal-sub,
html[data-theme="light"] .comment-text,
html[data-theme="light"] .reply-text,
html[data-theme="light"] .chat-bubble,
html[data-theme="light"] .fxb-row-label,
html[data-theme="light"] .sc-name,
html[data-theme="light"] .sc-subtitle,
html[data-theme="light"] .sc-price,
html[data-theme="light"] .sc-period,
html[data-theme="light"] .f-lbl,
html[data-theme="light"] .mfg label { color: var(--t2); }

/* gp-content needs !important — bridge script overrides with !important */
html[data-theme="light"] .gp-content,
html[data-theme="light"] .gp-content * { color: var(--t2) !important; }

/* Primary text elements */
html[data-theme="light"] .sc-val,
html[data-theme="light"] .dt td:first-child,
html[data-theme="light"] .comment-user,
html[data-theme="light"] .modal-box h3,
html[data-theme="light"] .lb-name { color: var(--t1); }

/* ── --t3 users: force solid #6b21a8 so they pass 5.5:1 on glass cards ── */
html[data-theme="light"] .sc-label,
html[data-theme="light"] .sc-hint,
html[data-theme="light"] .ms-lbl,
html[data-theme="light"] .f-lbl,
html[data-theme="light"] .mfg label,
html[data-theme="light"] .nav-sec,
html[data-theme="light"] .pw-lbl,
html[data-theme="light"] .pw-exp,
html[data-theme="light"] .uc-role,
html[data-theme="light"] .page-sub,
html[data-theme="light"] .lock-desc,
html[data-theme="light"] .fxb-row-label,
html[data-theme="light"] .chat-day-sep,
html[data-theme="light"] .sc-period,
html[data-theme="light"] .sc-subtitle,
html[data-theme="light"] .cal-day-name,
html[data-theme="light"] .ld,
html[data-theme="light"] .empty,
html[data-theme="light"] .modal-sub { color: var(--t3); }  /* #6b21a8 = 5.5:1 ✓ */

/* Sidebar brand name */
html[data-theme="light"] .sb-name {
  color: var(--t1);
}
/* Keep gradient clip on the <em> but darken gradient */
html[data-theme="light"] .sb-name em {
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Smooth transitions ── */
html[data-theme="light"] body,
html[data-theme="light"] .sidebar,
html[data-theme="light"] .panel,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .modal,
html[data-theme="light"] .mg-box,
html[data-theme="light"] .sub-card,
html[data-theme="light"] .gp-post,
html[data-theme="light"] .bottom-nav {
  transition:
    background-color 0.22s ease,
    border-color     0.22s ease,
    box-shadow       0.22s ease;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] * { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .sidebar {
  background: rgba(248, 244, 255, 0.92);
  backdrop-filter: blur(52px) saturate(1.4);
  -webkit-backdrop-filter: blur(52px) saturate(1.4);
  border-right: 1px solid rgba(153, 50, 204, 0.16);
  box-shadow: 4px 0 32px rgba(153, 50, 204, 0.08);
}
html[data-theme="light"] .sidebar::before {
  background: linear-gradient(90deg, transparent, rgba(153, 50, 204, 0.35), transparent);
}
html[data-theme="light"] .sidebar::after {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(153, 50, 204, 0.45) 40%,
    rgba(106, 27, 154, 0.22) 70%,
    transparent 100%);
}
html[data-theme="light"] body.is-mobile .sidebar.mob-open {
  box-shadow: 8px 0 40px rgba(153, 50, 204, 0.16) !important;
}
html[data-theme="light"] .sb-backdrop {
  background: rgba(36, 10, 36, 0.30);
}

/* Nav items */
html[data-theme="light"] .nav-item             { color: var(--t2); }
html[data-theme="light"] .nav-item:hover        { color: var(--t1); background: rgba(153, 50, 204, 0.07); }
html[data-theme="light"] .nav-item.active {
  color: #4a1070;
  background: linear-gradient(135deg, rgba(153, 50, 204, 0.12), rgba(186, 104, 230, 0.06));
  border-color: rgba(153, 50, 204, 0.22);
  box-shadow: 0 0 14px rgba(153, 50, 204, 0.08);
}
html[data-theme="light"] .nav-item.active-analyst {
  color: #7a3a00;
  background: linear-gradient(135deg, rgba(191, 54, 12, 0.09), rgba(191, 54, 12, 0.04));
  border-color: rgba(191, 54, 12, 0.22);
}
html[data-theme="light"] .nav-sec              { color: var(--t3); }

/* Sidebar widgets */
html[data-theme="light"] .plan-widget    { background: rgba(153, 50, 204, 0.04); border-color: rgba(153, 50, 204, 0.12); }
html[data-theme="light"] .sb-plan.basic  { color: var(--t2); background: rgba(153, 50, 204, 0.05); border-color: rgba(153, 50, 204, 0.12); }
html[data-theme="light"] .sb-toggle      { background: rgba(153, 50, 204, 0.05); border-color: rgba(153, 50, 204, 0.18); color: var(--t3); }
html[data-theme="light"] .sb-toggle:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(153, 50, 204, 0.09); }

/* User card */
html[data-theme="light"] .user-card       { background: rgba(153, 50, 204, 0.05); border-color: rgba(153, 50, 204, 0.12); }
html[data-theme="light"] .user-card:hover { background: rgba(198, 40, 40, 0.05); border-color: rgba(198, 40, 40, 0.16); }

/* ═══════════════════════════════════════════════════════════════════════════
   6. MAIN CONTENT
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .dash-main::-webkit-scrollbar-track { background: rgba(153, 50, 204, 0.04); }
html[data-theme="light"] .dash-main::-webkit-scrollbar-thumb { background: rgba(153, 50, 204, 0.18); }

html[data-theme="light"] .live-badge     { background: rgba(46, 125, 50, 0.06); border-color: rgba(46, 125, 50, 0.22); }
html[data-theme="light"] .refresh-btn   { background: rgba(153, 50, 204, 0.06); border-color: rgba(153, 50, 204, 0.18); color: var(--cyan); }
html[data-theme="light"] .refresh-btn:hover { background: rgba(153, 50, 204, 0.12); }

/* ═══════════════════════════════════════════════════════════════════════════
   7. STAT CARDS — Liquid Glass
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .stat-card {
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(48px) saturate(175%) brightness(104%);
  -webkit-backdrop-filter: blur(48px) saturate(175%) brightness(104%);
  border: 1px solid rgba(255, 255, 255, 0.80) !important;
  box-shadow:
    0 4px 18px  rgba(153, 50, 204, 0.11),
    0 8px 36px  rgba(36, 10, 36, 0.07),
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(153, 50, 204, 0.06),
    inset 1px 0 0 rgba(255, 255, 255, 0.45),
    inset -1px 0 0 rgba(153, 50, 204, 0.04);
}
html[data-theme="light"] .stat-card::before {
  background: linear-gradient(90deg, transparent, rgba(153, 50, 204, 0.24), transparent);
}
html[data-theme="light"] .stat-card:hover {
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(52px) saturate(185%) brightness(106%);
  -webkit-backdrop-filter: blur(52px) saturate(185%) brightness(106%);
  box-shadow:
    0 6px 24px  rgba(153, 50, 204, 0.16),
    0 14px 48px rgba(36, 10, 36, 0.10),
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(153, 50, 204, 0.09);
  transform: translateY(-2px);
}
html[data-theme="light"] .stat-card.c .sp-b { background: rgba(153, 50, 204, 0.30); }
html[data-theme="light"] .stat-card.g .sp-b { background: rgba(46, 125,  50, 0.30); }
html[data-theme="light"] .stat-card.a .sp-b { background: rgba(191, 54,  12, 0.30); }
html[data-theme="light"] .stat-card.r .sp-b { background: rgba(198, 40,  40, 0.30); }

/* ═══════════════════════════════════════════════════════════════════════════
   8. PANELS — Liquid Glass
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .panel {
  background: rgba(255, 255, 255, 0.60);
  backdrop-filter: blur(48px) saturate(170%) brightness(104%);
  -webkit-backdrop-filter: blur(48px) saturate(170%) brightness(104%);
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  box-shadow:
    0 4px 20px  rgba(153, 50, 204, 0.10),
    0 10px 40px rgba(36, 10, 36, 0.07),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(153, 50, 204, 0.05);
}
html[data-theme="light"] .panel::before {
  background: linear-gradient(90deg, transparent, rgba(153, 50, 204, 0.30), transparent);
}
html[data-theme="light"] .panel-title { color: var(--cyan); }
html[data-theme="light"] .panel-title::before {
  background: linear-gradient(180deg, var(--cyan), var(--blue));
  box-shadow: 0 0 6px rgba(153, 50, 204, 0.40);
}

/* Mini-stat — nested inside panel, slight lavender tint to show depth */
html[data-theme="light"] .mini-stat {
  background: rgba(240, 234, 255, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(153, 50, 204, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 1px 4px rgba(153, 50, 204, 0.06);
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. DATA TABLES
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .dt th           { color: var(--t3); border-bottom-color: rgba(153, 50, 204, 0.12); }
html[data-theme="light"] .dt td           { color: var(--t2); border-bottom-color: rgba(153, 50, 204, 0.07); }
html[data-theme="light"] .dt td:first-child { color: var(--t1); }
html[data-theme="light"] .dt tr:hover td  { background: rgba(153, 50, 204, 0.04); }

html[data-theme="light"] .tbl-row         { border-bottom-color: rgba(153, 50, 204, 0.08); }
html[data-theme="light"] .tbl-row:hover   { background: rgba(153, 50, 204, 0.04); }
html[data-theme="light"] .pair-bar-row    { border-bottom-color: rgba(153, 50, 204, 0.08); }
html[data-theme="light"] .pbr-track       { background: rgba(153, 50, 204, 0.12); }
html[data-theme="light"] .wr-bar          { background: rgba(153, 50, 204, 0.12); }
html[data-theme="light"] .lb-you-row td   { background: rgba(153, 50, 204, 0.05) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   10. FORMS & INPUTS
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .f-inp,
html[data-theme="light"] .mfg input,
html[data-theme="light"] .mfg select,
html[data-theme="light"] .mfg textarea,
html[data-theme="light"] .reply-textarea,
html[data-theme="light"] .chat-input,
html[data-theme="light"] .fxb-balance-inp {
  background: rgba(255, 255, 255, 0.80);
  border-color: rgba(153, 50, 204, 0.20);
  color: var(--t1);
}
html[data-theme="light"] .f-inp:focus,
html[data-theme="light"] .mfg input:focus,
html[data-theme="light"] .mfg select:focus,
html[data-theme="light"] .mfg textarea:focus,
html[data-theme="light"] .reply-textarea:focus,
html[data-theme="light"] .chat-input:focus {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(153, 50, 204, 0.48);
  box-shadow: 0 0 0 3px rgba(153, 50, 204, 0.10);
}
html[data-theme="light"] .f-inp::placeholder,
html[data-theme="light"] .mfg input::placeholder,
html[data-theme="light"] .mfg textarea::placeholder,
html[data-theme="light"] .reply-textarea::placeholder,
html[data-theme="light"] .chat-input::placeholder { color: rgba(107, 33, 168, 0.40); }

html[data-theme="light"] select.f-inp option,
html[data-theme="light"] .mfg select option { background: #fff; color: #240A24; }

/* Tabs & session buttons */
html[data-theme="light"] .cur-tab             { border-color: rgba(153, 50, 204, 0.14); color: var(--t2); background: transparent; }
html[data-theme="light"] .cur-tab:hover       { border-color: rgba(153, 50, 204, 0.30); color: var(--t1); }
html[data-theme="light"] .cur-tab.active      { background: rgba(153, 50, 204, 0.09); border-color: rgba(153, 50, 204, 0.28); color: var(--cyan); }
html[data-theme="light"] .cur-tab.idr.active  { background: rgba(46, 125, 50, 0.09);  border-color: rgba(46, 125, 50, 0.24);  color: var(--green); }

html[data-theme="light"] .sess-btn            { background: rgba(153, 50, 204, 0.04); border-color: rgba(153, 50, 204, 0.14); }
html[data-theme="light"] .sess-btn:hover      { border-color: rgba(153, 50, 204, 0.28); background: rgba(153, 50, 204, 0.08); }
html[data-theme="light"] .sess-btn.active     { border-color: rgba(153, 50, 204, 0.42); background: rgba(153, 50, 204, 0.13); }
html[data-theme="light"] .sess-btn.active.s-london { border-color: rgba(191, 54, 12, 0.40); background: rgba(191, 54, 12, 0.08); }

/* ═══════════════════════════════════════════════════════════════════════════
   11. MODALS & OVERLAYS
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .modal-ov,
html[data-theme="light"] #mgModal,
html[data-theme="light"] #grqModal {
  background: rgba(36, 10, 36, 0.28);
  backdrop-filter: blur(12px);
}

html[data-theme="light"] .modal,
html[data-theme="light"] .modal-box,
html[data-theme="light"] .mg-box {
  background: rgba(253, 250, 255, 0.97);
  backdrop-filter: blur(40px);
  border-color: rgba(153, 50, 204, 0.16);
  box-shadow: 0 24px 72px rgba(36, 10, 36, 0.16);
  color: var(--t1);
}
html[data-theme="light"] .modal::before,
html[data-theme="light"] .modal-box::before {
  background: linear-gradient(90deg, transparent, rgba(153, 50, 204, 0.26), transparent);
}
html[data-theme="light"] .modal-hd,
html[data-theme="light"] .w-hd { border-bottom-color: rgba(153, 50, 204, 0.10); }

html[data-theme="light"] .btn-mc {
  background: rgba(153, 50, 204, 0.06);
  border-color: rgba(153, 50, 204, 0.18);
  color: var(--t2);
}
html[data-theme="light"] .btn-mc:hover {
  background: rgba(153, 50, 204, 0.12);
  border-color: rgba(153, 50, 204, 0.30);
}

/* Logout modal */
html[data-theme="light"] .logout-user-strip  { background: rgba(153, 50, 204, 0.05); border-color: rgba(153, 50, 204, 0.14); }
html[data-theme="light"] .logout-warn-badge  { background: rgba(191, 54, 12, 0.08); border-color: rgba(191, 54, 12, 0.20); color: var(--amber); }

/* Create-group modal */
html[data-theme="light"] .cg-emoji-opt       { background: rgba(153, 50, 204, 0.04); border-color: rgba(153, 50, 204, 0.14); }
html[data-theme="light"] .cg-emoji-opt:hover,
html[data-theme="light"] .cg-emoji-opt.sel   { border-color: rgba(153, 50, 204, 0.45); background: rgba(153, 50, 204, 0.10); }
html[data-theme="light"] .cg-type-btn        { background: rgba(153, 50, 204, 0.04); border-color: rgba(153, 50, 204, 0.14); color: var(--t2); }
html[data-theme="light"] .cg-type-btn.sel    { border-color: rgba(153, 50, 204, 0.42); background: rgba(153, 50, 204, 0.09); color: var(--cyan); }

/* ═══════════════════════════════════════════════════════════════════════════
   12. LOCK / PAYWALL OVERLAYS
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .page-lock-overlay    { background: rgba(232, 228, 248, 0.88); backdrop-filter: blur(20px); }
html[data-theme="light"] .page-lock-box        { background: rgba(253, 250, 255, 0.96); border-color: rgba(191, 54, 12, 0.22); box-shadow: 0 20px 56px rgba(36, 10, 36, 0.14); }
html[data-theme="light"] .section-lock-overlay { background: rgba(232, 228, 248, 0.85); backdrop-filter: blur(12px); }
html[data-theme="light"] .section-lock-box     { background: rgba(253, 250, 255, 0.94); border-color: rgba(191, 54, 12, 0.18); }
html[data-theme="light"] .section-lock-box .s-lock-btn { border-color: rgba(153, 50, 204, 0.22); background: rgba(153, 50, 204, 0.07); color: var(--cyan); }

/* ═══════════════════════════════════════════════════════════════════════════
   13. SUBSCRIPTION CARDS — Liquid Glass
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .sub-card {
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(48px) saturate(170%) brightness(104%);
  -webkit-backdrop-filter: blur(48px) saturate(170%) brightness(104%);
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  box-shadow:
    0 4px 18px  rgba(153, 50, 204, 0.10),
    0 8px 36px  rgba(36, 10, 36, 0.07),
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(153, 50, 204, 0.05);
}
html[data-theme="light"] .sub-card::before {
  background: linear-gradient(90deg, transparent, rgba(153, 50, 204, 0.22), transparent);
}
html[data-theme="light"] .sub-card:hover {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(52px) saturate(185%) brightness(106%);
  -webkit-backdrop-filter: blur(52px) saturate(185%) brightness(106%);
  box-shadow:
    0 8px 28px  rgba(153, 50, 204, 0.15),
    0 16px 52px rgba(36, 10, 36, 0.09),
    inset 0 1.5px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(153, 50, 204, 0.08);
}
html[data-theme="light"] .sub-card.pro-card {
  border: 1px solid rgba(153, 50, 204, 0.35) !important;
  background: rgba(245, 238, 255, 0.62);
}
html[data-theme="light"] .sub-card.elite-card {
  border-color: rgba(191, 54, 12, 0.30) !important;
}
html[data-theme="light"] .sub-card.current-plan {
  border-color: rgba(46, 125, 50, 0.38) !important;
  box-shadow:
    0 4px 20px rgba(46, 125, 50, 0.12),
    0 8px 36px rgba(36, 10, 36, 0.07),
    inset 0 1.5px 0 rgba(255, 255, 255, 1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. COMMUNITY / GROUP BOARD
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .gp-post {
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(44px) saturate(165%) brightness(104%);
  -webkit-backdrop-filter: blur(44px) saturate(165%) brightness(104%);
  border: 1px solid rgba(153, 50, 204, 0.18) !important;
  box-shadow:
    0 3px 14px  rgba(153, 50, 204, 0.09),
    0 6px 28px  rgba(36, 10, 36, 0.06),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.98);
}
html[data-theme="light"] .gp-post:hover {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(153, 50, 204, 0.28) !important;
  box-shadow:
    0 6px 22px  rgba(153, 50, 204, 0.13),
    0 10px 40px rgba(36, 10, 36, 0.07),
    inset 0 1.5px 0 rgba(255, 255, 255, 1);
}

/* CRITICAL: bridge .gp-content has !important → need !important to override */
html[data-theme="light"] .gp-content       { color: var(--t2) !important; }
html[data-theme="light"] .gp-actions       { border-top-color: rgba(153, 50, 204, 0.10) !important; }

/* Like / comment buttons */
html[data-theme="light"] .gp-like-btn,
html[data-theme="light"] .gp-comment-btn {
  background: rgba(153, 50, 204, 0.04) !important;
  border: 1px solid rgba(153, 50, 204, 0.16) !important;
  color: var(--t3) !important;
}
html[data-theme="light"] .gp-like-btn:hover,
html[data-theme="light"] .gp-like-btn.liked {
  background: rgba(198, 40, 40, 0.07) !important;
  border-color: rgba(198, 40, 40, 0.24) !important;
  color: var(--red) !important;
}
html[data-theme="light"] .gp-comment-btn:hover,
html[data-theme="light"] .gp-comment-btn.open {
  background: rgba(153, 50, 204, 0.09) !important;
  border-color: rgba(153, 50, 204, 0.28) !important;
  color: var(--cyan) !important;
}

/* Poll */
html[data-theme="light"] .gp-poll {
  background: rgba(243, 240, 255, 0.65) !important;
  border: 1px solid rgba(153, 50, 204, 0.16) !important;
}
html[data-theme="light"] .gp-poll-opt {
  border: 1px solid rgba(153, 50, 204, 0.14) !important;
  background: rgba(255, 255, 255, 0.55);
}
html[data-theme="light"] .gp-poll-opt:hover {
  border-color: rgba(153, 50, 204, 0.30) !important;
}
html[data-theme="light"] .gp-poll-opt.voted {
  border-color: rgba(153, 50, 204, 0.45) !important;
}
html[data-theme="light"] .gp-poll-name     { color: var(--t1) !important; }
html[data-theme="light"] .gp-poll-pct      { color: var(--t3) !important; }
html[data-theme="light"] .gp-poll-footer   { color: var(--t3) !important; }
html[data-theme="light"] .gp-poll-hdr      { color: var(--t3) !important; }

/* Category tabs */
html[data-theme="light"] #grupCatTabs .tab-btn {
  border: 1px solid rgba(153, 50, 204, 0.16) !important;
  color: var(--t2) !important;
  background: transparent !important;
}
html[data-theme="light"] #grupCatTabs .tab-btn.active {
  border-color: rgba(153, 50, 204, 0.35) !important;
  background: rgba(153, 50, 204, 0.09) !important;
  color: var(--cyan) !important;
}

/* Form panel */
html[data-theme="light"] #grupFormPanel {
  border: 1px solid rgba(153, 50, 204, 0.20) !important;
}

/* Filter bar */
html[data-theme="light"] #grupFilterBar {
  background: rgba(255, 255, 255, 0.72) !important;
  border-color: rgba(153, 50, 204, 0.16) !important;
}

/* Comment bubbles */
html[data-theme="light"] .comment-bubble { background: rgba(244, 240, 255, 0.80); border-color: rgba(153, 50, 204, 0.14); }
html[data-theme="light"] .reply-bubble   { background: rgba(248, 246, 255, 0.75); border-color: rgba(153, 50, 204, 0.10); }
html[data-theme="light"] .reply-thread   { border-left-color: rgba(153, 50, 204, 0.18); }
html[data-theme="light"] .reply-input-wrap { border-left-color: rgba(153, 50, 204, 0.24); }

/* ═══════════════════════════════════════════════════════════════════════════
   15. CHAT
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .grp-tab-bar {
  background: var(--card);
  border-bottom: 1px solid rgba(153, 50, 204, 0.16) !important;
  box-shadow: 0 2px 8px rgba(153, 50, 204, 0.06);
}
html[data-theme="light"] .grp-tab       { color: var(--t3); }
html[data-theme="light"] .grp-tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }
html[data-theme="light"] .chat-panel {
  background: var(--card);
  backdrop-filter: blur(44px) saturate(165%) brightness(104%);
  -webkit-backdrop-filter: blur(44px) saturate(165%) brightness(104%);
  border: 1px solid rgba(255, 255, 255, 0.74) !important;
  box-shadow:
    0 4px 16px  rgba(153, 50, 204, 0.09),
    0 8px 32px  rgba(36, 10, 36, 0.06),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95);
}

html[data-theme="light"] .chat-msg.me .chat-bubble    { background: rgba(153, 50, 204, 0.14); border-color: rgba(153, 50, 204, 0.26); color: var(--t1); }
html[data-theme="light"] .chat-msg.other .chat-bubble {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(153, 50, 204, 0.14);
  box-shadow: 0 1px 4px rgba(153, 50, 204, 0.06);
  color: var(--t1);
}
html[data-theme="light"] .chat-avatar  { background: rgba(153, 50, 204, 0.12); border-color: rgba(153, 50, 204, 0.22); }
html[data-theme="light"] .chat-day-sep::before,
html[data-theme="light"] .chat-day-sep::after { background: rgba(153, 50, 204, 0.14); }
html[data-theme="light"] .chat-input-row { border-top-color: rgba(153, 50, 204, 0.12); }

/* ═══════════════════════════════════════════════════════════════════════════
   16. FXB STATS DASHBOARD
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .fxb-top {
  background: var(--card);
  backdrop-filter: blur(48px) saturate(170%) brightness(104%);
  -webkit-backdrop-filter: blur(48px) saturate(170%) brightness(104%);
  border: 1px solid rgba(255, 255, 255, 0.76) !important;
  box-shadow:
    0 4px 18px  rgba(153, 50, 204, 0.10),
    0 8px 36px  rgba(36, 10, 36, 0.07),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(153, 50, 204, 0.05);
}
html[data-theme="light"] .fxb-left  { border-right: 1px solid rgba(153, 50, 204, 0.12) !important; }
html[data-theme="light"] .fxb-tabs  { border-bottom-color: rgba(153, 50, 204, 0.12); }
html[data-theme="light"] .fxb-tab   { color: var(--t3); }
html[data-theme="light"] .fxb-tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }
html[data-theme="light"] .fxb-row + .fxb-row { border-top-color: rgba(153, 50, 204, 0.07); }

/* Ticker & news countdown widgets (inline-styled in HTML, must use ID) */
html[data-theme="light"] #liveTickerWidget,
html[data-theme="light"] #newsCountdownWidget {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(153, 50, 204, 0.18) !important;
  box-shadow: 0 2px 8px rgba(153, 50, 204, 0.07);
}
/* divider line inside ticker */
html[data-theme="light"] #liveTickerWidget > div > div:first-child {
  border-right-color: rgba(153, 50, 204, 0.16) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   17. BOTTOM NAV (mobile)
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .bottom-nav {
  background: rgba(252, 250, 255, 0.96);
  backdrop-filter: blur(36px) saturate(1.4);
  border-top: 1px solid rgba(153, 50, 204, 0.16);
  box-shadow: 0 -4px 24px rgba(153, 50, 204, 0.09);
}
html[data-theme="light"] .bn-item             { color: rgba(107, 33, 168, 0.55); }
html[data-theme="light"] .bn-item.active      { color: var(--cyan); }
html[data-theme="light"] .bn-item.active .bn-icon { background: rgba(153, 50, 204, 0.09); }

/* ═══════════════════════════════════════════════════════════════════════════
   18. BADGES & TAGS
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .badge-plan-basic,
html[data-theme="light"] .lb-plan-badge.basic { color: var(--t2); background: rgba(153, 50, 204, 0.05); border-color: rgba(153, 50, 204, 0.14); }
html[data-theme="light"] .badge-new           { background: rgba(191, 54, 12, 0.08);  border-color: rgba(191, 54, 12, 0.22);  }
html[data-theme="light"] .badge-pro           { background: rgba(153, 50, 204, 0.07); border-color: rgba(153, 50, 204, 0.20); color: var(--cyan); }
html[data-theme="light"] .badge-soon          { background: rgba(106, 27, 154, 0.07); border-color: rgba(106, 27, 154, 0.18); color: var(--violet); }
html[data-theme="light"] .pair-tag            { background: rgba(153, 50, 204, 0.08); border-color: rgba(153, 50, 204, 0.18); color: var(--cyan); }

/* ═══════════════════════════════════════════════════════════════════════════
   19. ALERTS & TOASTS
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .alert   { background: rgba(153, 50, 204, 0.06); border-color: rgba(153, 50, 204, 0.18); color: var(--t2); }
html[data-theme="light"] .alert-r { background: rgba(198, 40, 40, 0.06);  border-color: rgba(198, 40, 40, 0.22);  color: var(--red); }
html[data-theme="light"] .alert-a { background: rgba(191, 54, 12, 0.06);  border-color: rgba(191, 54, 12, 0.22);  color: var(--amber); }
html[data-theme="light"] .alert-g { background: rgba(46, 125, 50, 0.06);  border-color: rgba(46, 125, 50, 0.22);  color: var(--green); }
html[data-theme="light"] .alert-b { background: rgba(153, 50, 204, 0.06); border-color: rgba(153, 50, 204, 0.20); color: var(--cyan); }

html[data-theme="light"] .toast.ok   { background: rgba(46, 125, 50, 0.09);  border-color: rgba(46, 125, 50, 0.30);  color: var(--green); box-shadow: 0 8px 24px rgba(46, 125, 50, 0.12); }
html[data-theme="light"] .toast.err  { background: rgba(198, 40, 40, 0.09);  border-color: rgba(198, 40, 40, 0.30);  color: var(--red);   box-shadow: 0 8px 24px rgba(198, 40, 40, 0.12); }
html[data-theme="light"] .toast.info { background: rgba(153, 50, 204, 0.09); border-color: rgba(153, 50, 204, 0.28); color: var(--cyan);  box-shadow: 0 8px 24px rgba(153, 50, 204, 0.10); }

/* ═══════════════════════════════════════════════════════════════════════════
   20. THEME TOGGLE BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */
.theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  transition: all .22s cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
}
.theme-toggle i {
  transition: transform .38s cubic-bezier(.34,1.56,.64,1);
}
.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  transform: scale(1.08);
}
.theme-toggle:hover i {
  transform: rotate(30deg) scale(1.1);
}
html[data-theme="light"] .theme-toggle {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(36, 10, 36, 0.55);
}
html[data-theme="light"] .theme-toggle:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.20);
  color: rgba(36, 10, 36, 0.90);
  transform: scale(1.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   21. TOAST / NOTIFICATION LIGHT MODE
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .toast-item {
  background: rgba(255, 255, 255, 0.96) !important;
  border-left-color: var(--cyan) !important;
  box-shadow: 0 8px 32px rgba(153, 50, 204, 0.14) !important;
  color: var(--t1) !important;
}
html[data-theme="light"] .toast-item.err  { border-left-color: var(--red)   !important; }
html[data-theme="light"] .toast-item.ok   { border-left-color: var(--green) !important; }
html[data-theme="light"] .toast-item.info { border-left-color: var(--cyan)  !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   21. SIGNAL CARDS (Analyst page)
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .signal-card {
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(44px) saturate(165%) brightness(104%);
  -webkit-backdrop-filter: blur(44px) saturate(165%) brightness(104%);
  border: 1px solid rgba(255, 255, 255, 0.76) !important;
  box-shadow:
    0 3px 14px rgba(153, 50, 204, 0.09),
    0 6px 28px rgba(36, 10, 36, 0.06),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.98);
}
html[data-theme="light"] .signal-card:hover {
  box-shadow:
    0 6px 22px rgba(153, 50, 204, 0.13),
    0 10px 40px rgba(36, 10, 36, 0.08),
    inset 0 1.5px 0 rgba(255, 255, 255, 1);
}

/* Level boxes inside signal cards — base */
html[data-theme="light"] .lvl-box {
  background: rgba(153, 50, 204, 0.05);
  border: 1px solid rgba(153, 50, 204, 0.18);
  border-top: 2.5px solid rgba(153, 50, 204, 0.50);
}

/* Per-type :has() overrides for light mode */
html[data-theme="light"] .lvl-box:has(.lvl-val.entry) {
  background: rgba(153, 50, 204, 0.06);
  border-color: rgba(153, 50, 204, 0.24) !important;
  border-top-color: rgba(109, 40, 217, 0.75) !important;
}
html[data-theme="light"] .lvl-box:has(.lvl-val.sl) {
  background: rgba(198, 40, 40, 0.05);
  border-color: rgba(198, 40, 40, 0.22) !important;
  border-top-color: rgba(198, 40, 40, 0.72) !important;
}
html[data-theme="light"] .lvl-box:has(.lvl-val.tp) {
  background: rgba(5, 150, 105, 0.05);
  border-color: rgba(5, 150, 105, 0.22) !important;
  border-top-color: rgba(5, 150, 105, 0.72) !important;
}

/* Note/analisa text area inside signal card */
html[data-theme="light"] .sc-note {
  background: rgba(240, 234, 255, 0.55);
  border-left: 2px solid rgba(153, 50, 204, 0.30);
  color: var(--t2);
}

/* Action row divider */
html[data-theme="light"] .action-row {
  border-top-color: rgba(153, 50, 204, 0.10);
}

/* Signal status badges */
html[data-theme="light"] .status-cancel {
  background: rgba(153, 50, 204, 0.05);
  color: var(--t3);
  border: 1px solid rgba(153, 50, 204, 0.14);
}

/* Scrollbar global */
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(153, 50, 204, 0.20);
}

/* ═══════════════════════════════════════════════════════════════════════════
   22. NEWS SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] #newsSidebar {
  background: rgba(248, 245, 255, 0.94);
  backdrop-filter: blur(48px) saturate(150%);
  -webkit-backdrop-filter: blur(48px) saturate(150%);
  border-left: 1px solid rgba(153, 50, 204, 0.16);
  box-shadow: -4px 0 32px rgba(153, 50, 204, 0.07);
}
html[data-theme="light"] #newsSidebar::before {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(153, 50, 204, 0.45) 40%,
    rgba(106, 27, 154, 0.22) 70%,
    transparent 100%);
}
html[data-theme="light"] .ns-header {
  border-bottom-color: rgba(153, 50, 204, 0.10);
}
html[data-theme="light"] .ns-toggle {
  background: rgba(153, 50, 204, 0.05);
  border-color: rgba(153, 50, 204, 0.16);
  color: var(--t3);
}
html[data-theme="light"] .ns-toggle:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}
html[data-theme="light"] .ns-topbar-btn {
  background: rgba(153, 50, 204, 0.07);
  border-color: rgba(153, 50, 204, 0.18);
  color: var(--cyan);
}
html[data-theme="light"] .ns-topbar-btn:hover {
  background: rgba(153, 50, 204, 0.13);
}

/* News item rows */
html[data-theme="light"] .ns-item {
  border-bottom-color: rgba(153, 50, 204, 0.07);
}
html[data-theme="light"] .ns-item:hover {
  background: rgba(153, 50, 204, 0.04);
}

/* Countdown box */
html[data-theme="light"] .ns-cd-box {
  background: rgba(198, 40, 40, 0.05);
  border-color: rgba(198, 40, 40, 0.18);
}

html[data-theme="light"] .ns-major-card {
  background: linear-gradient(135deg, rgba(198, 40, 40, 0.06), rgba(153, 50, 204, 0.04)) !important;
  border-color: rgba(198, 40, 40, 0.22) !important;
  box-shadow: 0 4px 16px rgba(153, 50, 204, 0.08) !important;
}

/* Mobile: news sidebar opens as sheet */
html[data-theme="light"] body.is-mobile #newsSidebar.ns-mobile-open {
  background: rgba(248, 245, 255, 0.97) !important;
  border-top: 1px solid rgba(153, 50, 204, 0.16);
  box-shadow: 0 -8px 40px rgba(153, 50, 204, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   23. LEADERBOARD ROWS
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .lb-row,
html[data-theme="light"] .lb-row-sm {
  border-bottom-color: rgba(153, 50, 204, 0.08);
}
html[data-theme="light"] .acc-bar {
  background: rgba(153, 50, 204, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   24. MAINTENANCE OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .ff-maint-ov {
  background: rgba(232, 228, 248, 0.88);
  backdrop-filter: blur(22px);
}
html[data-theme="light"] .ff-maint-box {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(153, 50, 204, 0.22);
  box-shadow: 0 24px 60px rgba(153, 50, 204, 0.14);
  color: var(--t1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   25. MOBILE QUICK-ADD PANEL (inline-styled, override by ID)
   ═══════════════════════════════════════════════════════════════════════════ */
/* Backdrop div sebelum panel */
html[data-theme="light"] div[id="mobileInputBackdrop"],
html[data-theme="light"] div[style*="z-index:449"][style*="rgba(0,0,0"] {
  background: rgba(36, 10, 36, 0.25) !important;
}

/* Panel itu sendiri */
html[data-theme="light"] div[style*="background:rgba(22,16,44,0.97)"],
html[data-theme="light"] div[style*="background: rgba(22, 16, 44"] {
  background: rgba(250, 247, 255, 0.97) !important;
  border-color: rgba(153, 50, 204, 0.20) !important;
  box-shadow: 0 -4px 40px rgba(153, 50, 204, 0.14) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   26. DROP ZONE (upload spreadsheet)
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] #dropZone {
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(20px);
  border-color: rgba(153, 50, 204, 0.22);
}
html[data-theme="light"] #dropZone.dz-hover {
  border-color: rgba(153, 50, 204, 0.55);
  background: rgba(240, 234, 255, 0.70);
}

/* ═══════════════════════════════════════════════════════════════════════════
   27. CALENDAR CELLS
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .cal-cell.today {
  outline-color: var(--cyan);
}
/* Calendar cells with trades — ensure text inside is readable */
html[data-theme="light"] .cal-cell {
  color: var(--t1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   28. EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .empty-ico {
  background: rgba(153, 50, 204, 0.06);
  border-color: rgba(153, 50, 204, 0.14);
  color: var(--t3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   29. MOBILE "LAINNYA" MORE MENU  — fully inline-styled, all !important
   ═══════════════════════════════════════════════════════════════════════════ */

/* Overlay backdrop */
html[data-theme="light"] #moreMenuOverlay {
  background: rgba(36, 10, 36, 0.28) !important;
  backdrop-filter: blur(4px);
}

/* Panel container */
html[data-theme="light"] #moreMenu {
  background: rgba(250, 247, 255, 0.97) !important;
  border: 1px solid rgba(153, 50, 204, 0.20) !important;
  box-shadow:
    0 -4px 40px rgba(153, 50, 204, 0.14),
    0 -2px 12px rgba(36, 10, 36, 0.08) !important;
}

/* Section labels: JOURNAL, ANALISIS & TOOLS, KOMUNITAS */
html[data-theme="light"] #moreMenu > div:not([onclick]) {
  color: var(--t3) !important;  /* #6b21a8 = 5.5:1 */
}

/* Dividers */
html[data-theme="light"] #moreMenu div[style*="height:1px"] {
  background: rgba(153, 50, 204, 0.10) !important;
}

/* Nav buttons — base text */
html[data-theme="light"] #moreMenu button {
  color: var(--t2) !important;
}

/* Item title text inside buttons (hardcoded rgba(255,255,255,0.92)) */
html[data-theme="light"] #moreMenu button div > div {
  color: var(--t1) !important;
}

/* Logout button — keep red, just ensure readability */
html[data-theme="light"] #moreMenu button:last-child {
  color: var(--red) !important;
}
html[data-theme="light"] #moreMenu button:last-child div > div {
  color: var(--red) !important;
}

/* Icon boxes — consistent base style */
html[data-theme="light"] #moreMenu button > div:first-child {
  background: rgba(153, 50, 204, 0.07) !important;
  border-color: rgba(153, 50, 204, 0.16) !important;
}

/* Per-icon accent — nth-of-type counts only <button> siblings, no divs counted */
/* buttons: 1=Kalender, 2=Export, 3=Statistik, 4=Risk(green), 5=Grup(violet), 6=Leaderboard(amber), 7=Sub(amber), 8=Logout(red) */
html[data-theme="light"] #moreMenu button:nth-of-type(4) > div:first-child {
  background: rgba(46, 125, 50, 0.08)  !important;
  border-color: rgba(46, 125, 50, 0.20)  !important;
}
html[data-theme="light"] #moreMenu button:nth-of-type(5) > div:first-child {
  background: rgba(106, 27, 154, 0.08) !important;
  border-color: rgba(106, 27, 154, 0.20) !important;
}
html[data-theme="light"] #moreMenu button:nth-of-type(6) > div:first-child,
html[data-theme="light"] #moreMenu button:nth-of-type(7) > div:first-child {
  background: rgba(191, 54, 12, 0.07)  !important;
  border-color: rgba(191, 54, 12, 0.18)  !important;
}
html[data-theme="light"] #moreMenu button:last-of-type > div:first-child {
  background: rgba(198, 40, 40, 0.07)  !important;
  border-color: rgba(198, 40, 40, 0.18)  !important;
}

/* ── Button hover state ── */
html[data-theme="light"] #moreMenu button:not(:last-child):hover {
  background: rgba(153, 50, 204, 0.05) !important;
  border-radius: 12px;
}
html[data-theme="light"] #moreMenu button:last-child:hover {
  background: rgba(198, 40, 40, 0.05) !important;
  border-radius: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   30. FXB — hardcoded white borders & colors
   ═══════════════════════════════════════════════════════════════════════════ */

/* Currency buttons (rgba(255,255,255,.03/.10) base — invisible on light) */
html[data-theme="light"] .fxb-cur-btn {
  background: rgba(153, 50, 204, 0.04) !important;
  border-color: rgba(153, 50, 204, 0.16) !important;
  color: var(--t3) !important;
}
html[data-theme="light"] .fxb-cur-btn.active {
  background: rgba(153, 50, 204, 0.10) !important;
  border-color: rgba(153, 50, 204, 0.28) !important;
  color: var(--cyan) !important;
}
html[data-theme="light"] .fxb-cur-btn:not(.active):hover {
  color: var(--t2) !important;
  border-color: rgba(153, 50, 204, 0.24) !important;
}

/* Advanced label dotted underline (rgba(255,255,255,.15) — invisible) */
html[data-theme="light"] .fxb-adv-lbl {
  text-decoration-color: rgba(153, 50, 204, 0.35) !important;
}

/* Advanced column border (mobile inline) */
html[data-theme="light"] .fxb-adv-col + .fxb-adv-col {
  border-top-color: rgba(153, 50, 204, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   31. JS-INJECTED STYLES (sc-feat-on/off, cal cells, ticker badge)
       Our html[] prefix = specificity [1,1,0] beats their plain [0,1,0]
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sub feature list (JS injects: .sc-feat-on{color:rgba(255,255,255,.75)}) */
html[data-theme="light"] .sc-feat-on  { color: var(--t1) !important; }
html[data-theme="light"] .sc-feat-off { color: var(--t3) !important; opacity: 0.55; }
html[data-theme="light"] .sc-feat     { border-bottom-color: rgba(153, 50, 204, 0.08) !important; }

/* Calendar JS-rendered P&L value div (inline color:rgba(255,255,255,.82)) */
html[data-theme="light"] .cal-cell div[style*="color:rgba(255"] {
  color: var(--t1) !important;
}
html[data-theme="light"] .cal-cell div[style*="color:rgba(0,229"] {
  color: var(--green) !important;
}
html[data-theme="light"] .cal-cell div[style*="color:rgba(255,61"] {
  color: var(--red) !important;
}

/* Ticker JS-rendered "CLOSED" badge (span with inline white styles) */
html[data-theme="light"] #tk-btc-price ~ span[style*="rgba(255,255,255"],
html[data-theme="light"] #tk-xau-price ~ span[style*="rgba(255,255,255"] {
  color: var(--t3) !important;
  background: rgba(153, 50, 204, 0.06) !important;
  border-color: rgba(153, 50, 204, 0.16) !important;
}

/* Generic: any span with inline white text inside light mode — catch-all */
html[data-theme="light"] .panel span[style*="color:rgba(185,210"],
html[data-theme="light"] .stat-card span[style*="color:rgba(185,210"] {
  color: var(--t3) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   32. PAYMENT MODAL & DESTRUCTIVE MODALS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bank info box inside payment modal (inline rgba(255,255,255,.04)) */
html[data-theme="light"] .modal div[style*="rgba(255,255,255,.04)"],
html[data-theme="light"] .modal div[style*="rgba(255,255,255,0.04)"] {
  background: rgba(153, 50, 204, 0.04) !important;
  border-color: rgba(153, 50, 204, 0.14) !important;
}

/* Delete-all confirmation modal (inline red gradient stripe at top) stays red ✓ */
/* The modal background already overridden by .modal selector */

/* Any info text inside modals with hardcoded light color */
html[data-theme="light"] .modal div[style*="color:var(--t2)"],
html[data-theme="light"] .modal div[style*="color:var(--t3)"] {
  color: var(--t2) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   33. SUBSCRIPTION MODAL — JS-injected <style> overrides
       html[] prefix beats plain .sc-* selectors in injected style
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .sc-icon    { background: rgba(153, 50, 204, 0.07) !important; }
html[data-theme="light"] .sc-divider { background: rgba(153, 50, 204, 0.10) !important; }
html[data-theme="light"] .sc-cta-basic {
  border-color: rgba(153, 50, 204, 0.18) !important;
  color: var(--t3) !important;
}
html[data-theme="light"] .sc-badge-active {
  background: rgba(46, 125, 50, 0.10) !important;
  border-color: rgba(46, 125, 50, 0.28) !important;
  color: var(--green) !important;
}
html[data-theme="light"] .sc:hover {
  box-shadow: 0 12px 40px rgba(153, 50, 204, 0.16) !important;
}
html[data-theme="light"] .sc-pop {
  border-color: rgba(153, 50, 204, 0.45) !important;
  background: rgba(153, 50, 204, 0.06) !important;
  box-shadow: 0 0 0 1px rgba(153, 50, 204, 0.18) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   34. CALENDAR REDESIGN — light mode overrides
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .cal-nav-btn {
  background: rgba(153, 50, 204, 0.05);
  border-color: rgba(153, 50, 204, 0.18);
  color: var(--t2);
}
html[data-theme="light"] .cal-nav-btn:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(153, 50, 204, 0.09);
}
html[data-theme="light"] .cal-month-lbl { color: var(--t1); }

html[data-theme="light"] .cal-cell {
  border-color: transparent;
}
html[data-theme="light"] .cal-cell.today {
  box-shadow: 0 0 0 2px var(--cyan), 0 0 10px rgba(153, 50, 204, 0.18);
}
html[data-theme="light"] .cal-cell.profit:hover {
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.28);
}
html[data-theme="light"] .cal-cell.loss:hover {
  box-shadow: 0 4px 16px rgba(198, 40, 40, 0.22);
}
html[data-theme="light"] .cal-legend-item { color: var(--t3); }

/* Stats cards */
html[data-theme="light"] #calStatsBody > div {
  border-color: rgba(153, 50, 204, 0.10) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   35. GRUP / COMMUNITY PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* gg-panel container */
html[data-theme="light"] .gg-panel {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(153, 50, 204, 0.16) !important;
  box-shadow: 0 4px 20px rgba(153, 50, 204, 0.07);
}

/* Group cards scroll strip */
html[data-theme="light"] .gg-card {
  background: rgba(255, 255, 255, 0.70);
  border: 1.5px solid rgba(153, 50, 204, 0.20) !important;
  box-shadow: 0 2px 8px rgba(153, 50, 204, 0.06);
}
html[data-theme="light"] .gg-card:hover {
  border-color: rgba(153, 50, 204, 0.38) !important;
  background: rgba(244, 238, 255, 0.80);
  box-shadow: 0 4px 16px rgba(153, 50, 204, 0.12);
}
html[data-theme="light"] .gg-card.active {
  border-color: rgba(153, 50, 204, 0.55) !important;
  background: rgba(240, 232, 255, 0.85);
}
html[data-theme="light"] .gg-card-name  { color: var(--t1); }
html[data-theme="light"] .gg-card-meta  { color: var(--t3); }
html[data-theme="light"] .gg-hd-title   { color: var(--t2); }
html[data-theme="light"] .gg-empty      { color: var(--t3); }

/* Group view bar (active group header) */
html[data-theme="light"] .gv-bar {
  background: rgba(153, 50, 204, 0.04);
  border-bottom-color: rgba(153, 50, 204, 0.12);
}
html[data-theme="light"] .gv-name  { color: var(--t1); }
html[data-theme="light"] .gv-desc  { color: var(--t3); }
html[data-theme="light"] .gv-stats { color: var(--t3); }

/* gv buttons */
html[data-theme="light"] .gv-btn {
  background: rgba(153, 50, 204, 0.05);
  border-color: rgba(153, 50, 204, 0.18);
  color: var(--t2);
}
html[data-theme="light"] .gv-btn:hover          { background: rgba(153, 50, 204, 0.10); }
html[data-theme="light"] .gv-btn.join           { background: rgba(5, 150, 105, 0.07);  border-color: rgba(5, 150, 105, 0.22);  color: var(--green); }
html[data-theme="light"] .gv-btn.join:hover     { background: rgba(5, 150, 105, 0.14); }
html[data-theme="light"] .gv-btn.leave          { background: rgba(198, 40, 40, 0.05);  border-color: rgba(198, 40, 40, 0.18);  color: var(--red);   }
html[data-theme="light"] .gv-btn.leave:hover    { background: rgba(198, 40, 40, 0.10); }
html[data-theme="light"] .gv-btn.back           { background: rgba(153, 50, 204, 0.05); border-color: rgba(153, 50, 204, 0.16); color: var(--t2); }
html[data-theme="light"] .gv-btn.manage         { background: rgba(153, 50, 204, 0.05); border-color: rgba(153, 50, 204, 0.16); color: var(--cyan); }
html[data-theme="light"] .gv-btn.requests       { background: rgba(180, 83, 9, 0.06);   border-color: rgba(180, 83, 9, 0.20);   color: var(--amber); }

/* Create group button */
html[data-theme="light"] .gg-create-btn {
  background: linear-gradient(135deg, rgba(153,50,204,.10), rgba(109,40,217,.10));
  border-color: rgba(153, 50, 204, 0.28);
  color: var(--cyan);
}
html[data-theme="light"] .gg-create-btn:hover {
  background: linear-gradient(135deg, rgba(153,50,204,.18), rgba(109,40,217,.18));
}

/* gg-scroll track */
html[data-theme="light"] .gg-scroll {
  scrollbar-color: rgba(153, 50, 204, 0.18) transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   36. SESSION PILL (trade input form)
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .sess-pill {
  border-color: rgba(153, 50, 204, 0.18) !important;
  background: rgba(153, 50, 204, 0.03) !important;
  color: var(--t2) !important;
}
html[data-theme="light"] .sess-pill:hover {
  border-color: rgba(153, 50, 204, 0.32) !important;
  background: rgba(153, 50, 204, 0.07) !important;
  color: var(--t1) !important;
}
html[data-theme="light"] .sess-pill.active,
html[data-theme="light"] .sess-pill:focus {
  border-color: rgba(153, 50, 204, 0.45) !important;
  background: rgba(153, 50, 204, 0.10) !important;
  color: var(--cyan) !important;
}
html[data-theme="light"] .sess-pill.s-london.active {
  border-color: rgba(180, 83, 9, 0.40) !important;
  background: rgba(180, 83, 9, 0.08) !important;
  color: var(--amber) !important;
}
html[data-theme="light"] .sess-pill.s-ny.active {
  border-color: rgba(5, 150, 105, 0.35) !important;
  background: rgba(5, 150, 105, 0.08) !important;
  color: var(--green) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   37. ANALISA WAKTU & SESI — static dividers (inline rgba white)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Divider line di timeStats panel */
html[data-theme="light"] #timeStatsBody div[style*="border-top:1px solid rgba(255,255,255"] {
  border-top-color: rgba(153, 50, 204, 0.10) !important;
}

/* bestSessionNote & general time-stats dividers */
html[data-theme="light"] #bestSessionNote,
html[data-theme="light"] .ts-divider {
  border-top-color: rgba(153, 50, 204, 0.10) !important;
}

/* Scrollbar global light */
html[data-theme="light"] ::-webkit-scrollbar-track {
  background: rgba(153, 50, 204, 0.03);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(153, 50, 204, 0.20);
}
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(153, 50, 204, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   38. SETTINGS PAGE (Pengaturan)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Profile hero card */
html[data-theme="light"] .sp-hero {
  background: linear-gradient(135deg, rgba(153,50,204,0.07) 0%, rgba(0,180,204,0.04) 100%);
  border: 1px solid rgba(153, 50, 204, 0.18);
  box-shadow:
    0 6px 28px rgba(153, 50, 204, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.80);
}
html[data-theme="light"] .sp-hero::before {
  background: linear-gradient(90deg, transparent, rgba(153,50,204,0.40), transparent);
}
html[data-theme="light"] .sp-hero::after {
  background: radial-gradient(ellipse 55% 80% at 5% 50%, rgba(153,50,204,0.05), transparent);
}
html[data-theme="light"] .sp-hero-name  { color: var(--t1); }
html[data-theme="light"] .sp-hero-role  { color: var(--t3); }

/* Hero photo input — has !important in source */
html[data-theme="light"] .sp-hero-photo-row .f-inp {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1.5px solid rgba(153, 50, 204, 0.20) !important;
  color: var(--t1) !important;
}

/* Avatar ring */
html[data-theme="light"] .sp-avatar {
  background: rgba(153, 50, 204, 0.08);
  border-color: rgba(153, 50, 204, 0.30);
  box-shadow: 0 0 0 5px rgba(153,50,204,0.07), 0 0 20px rgba(153,50,204,0.12);
}
html[data-theme="light"] .sp-avatar:hover {
  border-color: rgba(153, 50, 204, 0.55);
  box-shadow: 0 0 0 6px rgba(153,50,204,0.12), 0 0 28px rgba(153,50,204,0.18);
}

/* Plan badges */
html[data-theme="light"] .sp-plan-badge.basic {
  background: rgba(107, 33, 168, 0.06);
  border-color: rgba(107, 33, 168, 0.16);
  color: var(--t3);         /* #6b21a8 = 5.5:1 */
}

/* Main setting panels */
html[data-theme="light"] .sp-panel {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(153, 50, 204, 0.18);
  box-shadow:
    0 4px 18px rgba(153, 50, 204, 0.08),
    0 8px 32px rgba(36, 10, 36, 0.05),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95);
}
html[data-theme="light"] .sp-panel::before {
  background: linear-gradient(90deg, transparent, rgba(153,50,204,0.28), transparent);
}
html[data-theme="light"] .sp-panel-title { color: var(--t3); }

/* Icon picos */
html[data-theme="light"] .sp-pico-v { background: rgba(153, 50, 204, 0.10); color: var(--cyan); }
html[data-theme="light"] .sp-pico-c { background: rgba(0, 180, 204, 0.09);  color: #0097aa; }
html[data-theme="light"] .sp-pico-g { background: rgba(5, 150, 105, 0.09);  color: var(--green); }
html[data-theme="light"] .sp-pico-a { background: rgba(180, 83, 9, 0.09);   color: var(--amber); }

/* Settings-specific inputs (#page-settings overrides our generic with ID) */
html[data-theme="light"] #page-settings .f-inp {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1.5px solid rgba(153, 50, 204, 0.18) !important;
  color: var(--t1) !important;
}
html[data-theme="light"] #page-settings .f-inp:focus {
  border-color: rgba(153, 50, 204, 0.42) !important;
  box-shadow: 0 0 0 3px rgba(153, 50, 204, 0.09) !important;
}
html[data-theme="light"] #page-settings .f-inp:disabled {
  opacity: 0.45 !important;
}
/* Select dropdown — ID selector [1,1,2] needs explicit override */
html[data-theme="light"] #page-settings select.f-inp option {
  background: #fff !important;
  color: #240A24 !important;
}

/* Status messages */
html[data-theme="light"] .sp-msg.ok {
  background: rgba(5, 150, 105, 0.07);
  color: var(--green);                   /* #2E7D32 = 7:1 ✓ */
  border-color: rgba(5, 150, 105, 0.18);
}
html[data-theme="light"] .sp-msg.err {
  background: rgba(198, 40, 40, 0.06);
  color: var(--red);
  border-color: rgba(198, 40, 40, 0.18);
}

/* Danger zone */
html[data-theme="light"] .sp-danger-zone {
  background: rgba(198, 40, 40, 0.03);
  border-color: rgba(198, 40, 40, 0.16);
}
html[data-theme="light"] .sp-danger-title { color: var(--red); }

/* Linked accounts panel / journal switch (if exists) */
html[data-theme="light"] #spLinkedAccList div {
  border-bottom-color: rgba(153, 50, 204, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   26. DISCORD STYLE LAYOUT & SIDEBAR (Light Mode)
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .discord-layout {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(48px) saturate(160%) brightness(102%);
  -webkit-backdrop-filter: blur(48px) saturate(160%) brightness(102%);
  border: 1px solid rgba(153, 50, 204, 0.20) !important;
  box-shadow: 
    0 12px 40px rgba(153, 50, 204, 0.06),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95);
}

html[data-theme="light"] .discord-servers-sidebar {
  background: rgba(153, 50, 204, 0.04);
  border-right: 1px solid rgba(153, 50, 204, 0.12) !important;
}

html[data-theme="light"] .ds-server-icon {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(153, 50, 204, 0.10);
  color: var(--t2);
}

html[data-theme="light"] .ds-server-icon:hover,
html[data-theme="light"] .ds-server-icon.active {
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  color: #fff;
  border-color: transparent;
}

html[data-theme="light"] .discord-sidebar {
  background: rgba(255, 255, 255, 0.50);
  border-right: 1px solid rgba(153, 50, 204, 0.14) !important;
}

html[data-theme="light"] .ds-header {
  border-bottom-color: rgba(153, 50, 204, 0.12);
}

html[data-theme="light"] .ds-header-info #gvAvatarWrap {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(153, 50, 204, 0.20) !important;
  box-shadow: 0 2px 8px rgba(153, 50, 204, 0.06) !important;
}

html[data-theme="light"] .ds-header-info #gvName {
  color: var(--t1) !important;
}

html[data-theme="light"] .ds-header-actions .ds-action-btn {
  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(153, 50, 204, 0.16);
  color: var(--t2);
  box-shadow: 0 1px 3px rgba(153, 50, 204, 0.04);
}

html[data-theme="light"] .ds-header-actions .ds-action-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(153, 50, 204, 0.32);
  color: var(--t1);
  box-shadow: 0 3px 8px rgba(153, 50, 204, 0.08);
}

html[data-theme="light"] .ds-header-actions .ds-action-btn.back {
  background: rgba(255, 255, 255, 0.90);
  border: 1px solid rgba(153, 50, 204, 0.22);
}

html[data-theme="light"] .ds-header-actions .ds-action-btn.back:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(153, 50, 204, 0.45);
  box-shadow: 0 3px 10px rgba(153, 50, 204, 0.12);
}

html[data-theme="light"] .ds-header-actions .ds-action-btn.manage {
  color: var(--cyan);
  background: rgba(153, 50, 204, 0.05);
  border-color: rgba(153, 50, 204, 0.20);
}

html[data-theme="light"] .ds-header-actions .ds-action-btn.manage:hover {
  background: rgba(153, 50, 204, 0.14);
}

html[data-theme="light"] .ds-header-actions .ds-action-btn.leave {
  color: var(--red);
  background: rgba(198, 40, 40, 0.05);
  border-color: rgba(198, 40, 40, 0.20);
}

html[data-theme="light"] .ds-header-actions .ds-action-btn.leave:hover {
  background: rgba(198, 40, 40, 0.14);
}

html[data-theme="light"] .ds-header-actions .ds-action-btn.join {
  color: var(--green);
  background: rgba(46, 125, 50, 0.05);
  border-color: rgba(46, 125, 50, 0.20);
}

html[data-theme="light"] .ds-header-actions .ds-action-btn.join:hover {
  background: rgba(46, 125, 50, 0.14);
}

html[data-theme="light"] .gv-desc {
  color: var(--t2) !important;
}

html[data-theme="light"] .gv-stats {
  color: var(--t3) !important;
}

html[data-theme="light"] .ds-section-hd {
  color: var(--t2) !important;
}

html[data-theme="light"] .ds-menu-item,
html[data-theme="light"] .discord-sidebar .cur-tab {
  color: var(--t2) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

html[data-theme="light"] .ds-menu-item:hover,
html[data-theme="light"] .discord-sidebar .cur-tab:hover {
  background: rgba(153, 50, 204, 0.05) !important;
  color: var(--t1) !important;
}

html[data-theme="light"] .ds-menu-item.active,
html[data-theme="light"] .discord-sidebar .cur-tab.active {
  background: linear-gradient(135deg, rgba(153, 50, 204, 0.12), rgba(153, 50, 204, 0.04)) !important;
  color: var(--cyan) !important;
  border: 1px solid rgba(153, 50, 204, 0.24) !important;
  box-shadow: 0 4px 12px rgba(153, 50, 204, 0.05) !important;
}

html[data-theme="light"] .discord-main {
  background: rgba(255, 255, 255, 0.20);
}

html[data-theme="light"] .dm-mobile-header {
  background: rgba(255, 255, 255, 0.80);
  border-bottom: 1px solid rgba(153, 50, 204, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════════
   27. PREMIUM CARD ENHANCEMENTS (Light Mode)
   ═══════════════════════════════════════════════════════════════════════════ */
/* Stat Cards */
html[data-theme="light"] .stat-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55)) !important;
  border: 1px solid rgba(255, 255, 255, 0.90) !important;
  box-shadow:
    0 12px 36px -10px rgba(153, 50, 204, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.95);
  border-radius: 14px;
}

html[data-theme="light"] .stat-card:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.70)) !important;
  box-shadow:
    0 16px 44px -8px rgba(153, 50, 204, 0.16),
    inset 0 1px 1px rgba(255, 255, 255, 0.98);
}

/* Panels */
html[data-theme="light"] .panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.52)) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow:
    0 14px 44px -12px rgba(153, 50, 204, 0.10),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.98);
  border-radius: 14px;
}

/* Feed Posts (gp-post) */
html[data-theme="light"] .gp-post {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(153, 50, 204, 0.15) !important;
  box-shadow:
    0 8px 30px rgba(153, 50, 204, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  border-radius: 14px !important;
  padding: 16px !important;
}

html[data-theme="light"] .gp-post:hover {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(153, 50, 204, 0.28) !important;
  box-shadow:
    0 12px 36px rgba(153, 50, 204, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

/* Group Card List Card */
html[data-theme="light"] .gg-card {
  background: rgba(255, 255, 255, 0.70) !important;
  border: 1px solid rgba(153, 50, 204, 0.14) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(153, 50, 204, 0.03) !important;
  transition: all 0.2s ease !important;
}

html[data-theme="light"] .gg-card:hover {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(153, 50, 204, 0.25) !important;
  box-shadow: 0 8px 20px rgba(153, 50, 204, 0.06) !important;
}

html[data-theme="light"] .gg-card.active {
  background: linear-gradient(135deg, rgba(153, 50, 204, 0.12), rgba(153, 50, 204, 0.03)) !important;
  border-color: rgba(153, 50, 204, 0.35) !important;
  box-shadow: 0 8px 24px rgba(153, 50, 204, 0.08) !important;
}

/* Signal Cards */
html[data-theme="light"] .signal-card {
  background: rgba(255, 255, 255, 0.90) !important;
  border: 1px solid rgba(153, 50, 204, 0.16) !important;
  box-shadow:
    0 8px 30px rgba(153, 50, 204, 0.04),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95);
  border-radius: 14px !important;
}

html[data-theme="light"] .signal-card:hover {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(153, 50, 204, 0.28) !important;
  box-shadow:
    0 12px 36px rgba(153, 50, 204, 0.07),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.98);
}

/* Custom Chat Input Border for visibility */
html[data-theme="light"] .chat-input {
  border: 1px solid rgba(153, 50, 204, 0.38) !important;
  background: rgba(255, 255, 255, 0.95) !important;
}
html[data-theme="light"] .chat-input-row {
  border-top: 1.5px solid rgba(153, 50, 204, 0.20) !important;
  background: rgba(255, 255, 255, 0.50) !important;
}