/* Proper Uthmani Mushaf font - KFGQPC-style for clear Quran rendering */
@font-face{
  font-family:'UthmanicMushaf';
  src:local('KFGQPC Uthman Taha Naskh'),
      local('KFGQPC Uthmanic Script HAFS'),
      local('me_quran'),
      local('Me Quran'),
      local('Amiri Quran');
  font-display:swap;
}

/* ===== SURRU MOBILE RESPONSIVE v2 ===== */
@media (max-width: 768px) {

  /* === MOBILE FLICKER FIX =====================================
     Mobile browsers shrink the visual viewport when the virtual
     keyboard opens. Every backdrop-filter element on screen has
     to recompose its blur layer against the new background, and
     the body::before/::after grid+glow re-rasterize too. With
     ~20+ blurred surfaces in this app, the result is a full
     screen black/white flash on every key/Enter press.
     Fix: turn off backdrop-filter and the heavy body pseudo
     backgrounds on mobile, and pin the GPU layers so they
     don't get re-painted on viewport resize.
     ============================================================ */
  .sidebar, .mobile-topbar, .modal, .section-card, .stat-card,
  .daily-todo-card, .hero-banner, .mt5-card, .landing-nav,
  .modal-backdrop, .auth-overlay, .auth-card, .otp-modal,
  .day-modal, .alert-modal, .clr-modal, .hero-preview-card,
  .feature-card, .rules-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Solid (or near-solid) backgrounds in place of the lost blur */
  .sidebar { background: #0a0a12 !important; }
  .mobile-topbar { background: #0a0a12 !important; }
  .modal { background: #0d0d18 !important; }
  .section-card, .daily-todo-card { background: #0d0d18 !important; }
  .hero-banner { background: linear-gradient(135deg,#120a22 0%,#160a28 100%) !important; }
  .stat-card { background: #0d0d18 !important; }
  .landing-nav { background: #0a0a12 !important; }

  /* The body grid + glow are pure decoration and the most
     expensive things on the page to repaint. Kill them on
     mobile — saves a huge amount of compositor work and
     stops the flash entirely. */
  body::before, body::after { display: none !important; }
  .landing-page::before, .landing-page::after,
  .auth-bg-grid, .auth-bg-glow { display: none !important; }

  /* Pin non-fixed decorative layers to the GPU so the keyboard
     resize doesn't trigger a re-rasterize. NB: don't put this on
     <body> or it would become the containing block for every
     position:fixed child (sidebar, modals, topbar) and break them. */
  .main, .page {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  /* === LAYOUT === */
  .sidebar {
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 1000 !important;
    width: 78vw !important;
    max-width: 290px !important;
  }
  .sidebar.mobile-open { transform: translateX(0) !important; }
  .main { margin-left: 0 !important; padding: 66px 12px 24px 12px !important; }
  body { overflow-x: hidden !important; }

  /* === MOBILE TOP BAR === */
  .mobile-topbar {
    display: flex !important;
    position: fixed; top:0; left:0; right:0;
    height: 52px;
    background: rgba(10,10,18,0.97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(40,30,70,0.7);
    z-index: 500; align-items: center; padding: 0 14px; gap: 10px;
  }
  .mob-logo { font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:900; color:#7C5CFC; flex:1; letter-spacing:.08em; }
  .mob-menu-btn { background:transparent; border:1px solid #252539; color:#e2e8f0; width:36px; height:36px; border-radius:8px; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

  /* === CLASS-BASED GRID FIXES === */
  .mob-grid-4 { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
  .mob-grid-3 { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
  .mob-grid-sidebar { grid-template-columns: 1fr !important; gap: 14px !important; }
  .mob-grid-2 { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* === HERO BANNER === */
  .hero-banner { grid-template-columns:1fr !important; padding:14px !important; gap:10px !important; }
  .hero-greet { font-size:16px !important; }
  .hero-stat { text-align:left !important; }
  .hero-stat .val { font-size:24px !important; }
  .hero-quote { font-size:11px !important; }
  .hero-date { font-size:11px !important; }

  /* === TOP BAR === */
  .top-bar { flex-wrap:wrap !important; gap:8px !important; margin-bottom:12px !important; }
  .top-bar h1 { font-size:16px !important; }
  .top-bar p { font-size:11px !important; }

  /* === STAT CARDS === */
  .stat-val { font-size:20px !important; }
  .section-card, .stat-card, .section-card { padding:12px !important; }
  .dash-stats { grid-template-columns:repeat(2,1fr) !important; }

  /* === TABLES === */
  table { font-size:11px !important; }
  th { padding:5px 6px !important; font-size:9px !important; }
  td { padding:7px 6px !important; font-size:11px !important; }
  .scrollable-table { overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; display:block !important; }

  /* === MODALS === */
  .modal-backdrop { padding:calc(max(env(safe-area-inset-top, 0px), 28px) + 80px) 6px 24px 6px !important; align-items:flex-start !important; }
  /* Modal must scroll on its own layer when open on mobile */
  .modal-backdrop.open { -webkit-overflow-scrolling: touch !important; }
  .modal { padding:16px 12px !important; border-radius:14px !important; max-width:100% !important; }
  .form-grid-2, .form-grid-3 { grid-template-columns:1fr !important; }
  .day-modal-summary { grid-template-columns:repeat(2,1fr) !important; }
  .trade-detail-grid, .trade-detail-grid-5 { grid-template-columns:repeat(2,1fr) !important; }
  .day-modal-body { padding:14px !important; }
  .day-modal-header { padding:14px !important; }

  /* === BROKERAGE === */
  .brokerage-strip { grid-template-columns:repeat(3,1fr) !important; gap:6px !important; padding:10px !important; }
  .brk-divider { display:none !important; }
  .brk-val { font-size:15px !important; }
  #dashWithdrawalPanel { max-height:220px !important; }

  /* === CALENDAR === */
  .cal-day { min-height:44px !important; padding:3px !important; }
  .cal-day .pnl { font-size:9px !important; }
  .cal-day .daynum { font-size:10px !important; }
  .cal-day .trades-count { font-size:8px !important; }

  /* === MT5 CARD === */
  .mt5-info-row { grid-template-columns:repeat(2,1fr) !important; }
  .mt5-card { padding:14px !important; }
  .mt5-card-header { flex-direction:column !important; align-items:flex-start !important; }
  .mt5-actions { flex-direction:column !important; }

  /* === ANALYTICS CHART === */
  .chart-container { height:160px !important; }

  /* === BUTTONS === */
  .btn-primary { padding:10px 14px !important; font-size:13px !important; }
  .btn-ghost { padding:8px 12px !important; font-size:12px !important; }

  /* === SECTION TITLES === */
  .section-title { font-size:13px !important; }
  .collapsible-body { padding:0 12px 14px 12px !important; }

  /* === CHECKLIST === */
  .checklist-card { padding:14px !important; }
  .checklist-header { flex-wrap:wrap !important; }

  /* === BACKTEST BANNER === */
  .backtest-banner { padding:10px 14px !important; }

  /* === TRADE DETAIL === */
  .trade-detail-card { padding:12px !important; }
  .trade-detail-screenshots { grid-template-columns:1fr !important; }

  /* === ALERT MODAL === */
  .alert-modal, .clr-modal { max-width:calc(100vw - 20px) !important; }
  .alert-modal-body, .clr-modal-body { padding:14px !important; }
  .alert-modal-actions, .clr-modal-actions { flex-direction:column !important; }
  .alert-modal-actions button, .clr-modal-actions button { flex:none !important; }

  /* === OTP MODAL === */
  .otp-digit { width:38px !important; height:46px !important; font-size:18px !important; }
  .otp-input-wrap { gap:5px !important; }

  /* === EQUITY PREVIEW === */
  .equity-preview { padding:14px !important; }

  /* === RULE ITEMS === */
  .rule-item { padding:10px 12px !important; }

  /* === WEEKLY REVIEW === */
  .week-review-field { font-size:13px !important; }

  /* === DAILY TODO === */
  .daily-todo-card { padding:14px 12px !important; }

  /* === NOTEBOOK === */
  #notebookFeed { grid-template-columns:1fr !important; }

  /* === AZHKAR PANEL === */
  .azhkar-panel { max-width:100% !important; }

  /* === BACKTEST TABLE FIX === */
  #btTable, #journalTable { min-width:600px; }

  /* === HIDE DECORATIVE ELEMENTS === */
  .hero-banner::before, .hero-banner::after { display:none !important; }
}

.mobile-topbar { display:none; }

/* ============================================================ */
/* PLANS PAGE STYLES                                            */
/* ============================================================ */
.plans-nav-badge{display:inline-block;background:#ef4444;color:#fff;font-size:9px;font-weight:900;padding:1px 6px;border-radius:10px;margin-left:6px;font-family:'JetBrains Mono',monospace;animation:plansPulse 1.6s ease-in-out infinite}
@keyframes plansPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}50%{box-shadow:0 0 0 6px rgba(239,68,68,0)}}

.plans-ladder-track{height:6px;background:#0d0d18;border:1px solid #252539;border-radius:6px;overflow:hidden;margin-bottom:14px;position:relative}
.plans-ladder-fill{height:100%;background:linear-gradient(90deg,#7C5CFC 0%,#A78BFA 50%,#22c55e 100%);border-radius:6px;transition:width .6s cubic-bezier(.4,0,.2,1)}
.plans-ladder-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.plans-ladder-step{background:#0a0a12;border:1px solid #252539;border-radius:10px;padding:8px 6px;text-align:center;font-family:'JetBrains Mono',monospace;transition:all .25s ease;position:relative}
.plans-ladder-step .num{display:block;font-size:18px;font-weight:800;color:#7c7c94;line-height:1;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums}
.plans-ladder-step .lbl{display:block;font-size:9px;font-weight:700;letter-spacing:.12em;color:#7c7c94;text-transform:uppercase;margin-top:3px}
.plans-ladder-step.active{background:linear-gradient(135deg,#1a0e3a 0%,#0a0a12 100%);border-color:#7C5CFC;box-shadow:0 0 0 1px rgba(124,92,252,.25),0 4px 14px rgba(124,92,252,.18)}
.plans-ladder-step.active .num{color:#7C5CFC}
.plans-ladder-step.active .lbl{color:#A78BFA}
.plans-ladder-step.done{background:linear-gradient(135deg,#0d2d1a 0%,#0a1f12 100%);border-color:#166534}
.plans-ladder-step.done .num{color:#22c55e;text-decoration:line-through;text-decoration-color:rgba(34,197,94,.5)}
.plans-ladder-step.done::after{content:'✓';position:absolute;top:2px;right:5px;font-size:10px;color:#22c55e;font-weight:900}
.plans-ladder-step.locked{opacity:.5}
.plans-ladder-step.locked::after{content:'🔒';position:absolute;top:2px;right:4px;font-size:9px;opacity:.6}

.plans-today-banner{background:linear-gradient(135deg,#2d1d0a 0%,#1a1208 100%);border:1px solid #d97706;border-radius:14px;padding:14px 18px;margin-bottom:18px;display:flex;align-items:center;gap:14px;animation:plansBannerSlide .35s ease}
@keyframes plansBannerSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.plans-today-banner .icon{font-size:24px;flex-shrink:0}
.plans-today-banner .body{flex:1;min-width:0}
.plans-today-banner .title{font-size:14px;font-weight:700;color:#fbbf24;margin-bottom:2px}
.plans-today-banner .sub{font-size:12px;color:#a0a0b0;line-height:1.5}

.plan-card{background:rgba(10,10,18,0.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(40,30,70,0.75);border-radius:16px;padding:22px 24px;margin-bottom:18px;box-shadow:0 4px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.025);position:relative;overflow:hidden;transition:all .25s ease}
.plan-card.active{border-color:rgba(124,92,252,.45);box-shadow:0 4px 24px rgba(0,0,0,.3),0 0 0 1px rgba(124,92,252,.18) inset,0 0 36px -8px rgba(124,92,252,.35)}
.plan-card.active::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#7C5CFC,transparent)}
.plan-card.completed{border-color:rgba(34,197,94,.45);opacity:.85}
.plan-card.completed::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#22c55e,transparent)}
.plan-card.locked{opacity:.55;filter:saturate(.7)}

.plan-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;flex-wrap:wrap;gap:12px}
.plan-card-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.plan-num-badge{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:900;flex-shrink:0;letter-spacing:.02em}
.plan-card.locked .plan-num-badge{background:#252539;color:#7c7c94;border:1px solid #363650}
.plan-card.active .plan-num-badge{background:linear-gradient(135deg,#7C5CFC,#4F37C2);color:#fff;box-shadow:0 4px 12px rgba(124,92,252,.35)}
.plan-card.completed .plan-num-badge{background:linear-gradient(135deg,#22c55e,#16a34a);color:#0a0a12}
.plan-card.not-started .plan-num-badge{background:#0a0a12;color:#7C5CFC;border:1px solid #5B21B6}
.plan-card-h{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700;color:#e2e8f0;letter-spacing:.03em;margin:0 0 3px}
.plan-card-sub{font-size:11px;color:#9090a8;font-family:'JetBrains Mono',monospace}

.plan-status-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;font-size:10px;font-weight:700;font-family:'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.plan-status-pill.active{background:#1a0e3a;color:#A78BFA;border:1px solid #5B21B6}
.plan-status-pill.completed{background:#0d2d1a;color:#22c55e;border:1px solid #166534}
.plan-status-pill.locked{background:#252539;color:#9090a8;border:1px solid #363650}
.plan-status-pill.not-started{background:#0a0a12;color:#fbbf24;border:1px solid #92400e}
.plan-status-pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.plan-status-pill.active .dot{animation:plansPulse 1.6s ease-in-out infinite}

.plan-prog-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:11px;color:#a0a0b0;font-family:'JetBrains Mono',monospace}
.plan-prog-bar{height:6px;background:#0a0a12;border:1px solid #252539;border-radius:6px;overflow:hidden;margin-bottom:18px}
.plan-prog-fill{height:100%;background:linear-gradient(90deg,#7C5CFC,#A78BFA);border-radius:6px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.plan-card.completed .plan-prog-fill{background:linear-gradient(90deg,#22c55e,#16a34a)}

.plan-section-label{font-size:10px;font-weight:700;letter-spacing:.15em;color:#7c7c94;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.plan-section-label .count{background:#252539;color:#A78BFA;padding:1px 8px;border-radius:10px;font-size:10px;font-family:'JetBrains Mono',monospace;letter-spacing:0}

.plan-goals-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.plan-goal-slot{background:#0a0a12;border:1px dashed #363650;border-radius:12px;padding:14px;min-height:88px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;cursor:pointer;transition:all .2s;position:relative}
.plan-goal-slot.empty:hover{border-color:#7C5CFC;background:#0d0a20;color:#A78BFA}
.plan-goal-slot.empty .add-icon{font-size:22px;color:#7c7c94;margin-bottom:5px}
.plan-goal-slot.empty .add-text{font-size:11px;color:#7c7c94;font-weight:600;letter-spacing:.04em}
.plan-goal-slot.empty:hover .add-icon,.plan-goal-slot.empty:hover .add-text{color:#A78BFA}
.plan-goal-slot.filled{align-items:flex-start;text-align:left;background:linear-gradient(135deg,#0d0d20 0%,#0a0a14 100%);border:1px solid #4F37C2;border-style:solid;cursor:default;padding:12px 14px}
.plan-goal-slot.filled .goal-num{position:absolute;top:8px;right:10px;font-size:9px;font-weight:800;font-family:'JetBrains Mono',monospace;color:#7c7c94;letter-spacing:.05em}
.plan-goal-slot.filled .goal-lock{position:absolute;top:8px;left:10px;font-size:10px;opacity:.5}
.plan-goal-slot.filled .goal-title{font-size:13px;font-weight:700;color:#C4B5FD;margin-top:14px;margin-bottom:4px;line-height:1.35;word-break:break-word}
.plan-goal-slot.filled .goal-desc{font-size:11px;color:#9090a8;line-height:1.5;word-break:break-word}
.plan-goal-slot.locked{opacity:.6;cursor:not-allowed}
.plan-goal-slot.locked.empty:hover{border-color:#7c7c94;background:#0a0a12;color:inherit}

.plan-days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.plan-day-cell{aspect-ratio:1;background:#0a0a12;border:1px solid #252539;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .18s;position:relative;font-family:'JetBrains Mono',monospace;padding:4px}
.plan-day-cell:not(.future):not(.locked-cell):hover{border-color:#7C5CFC;transform:translateY(-2px);box-shadow:0 4px 10px rgba(124,92,252,.18)}
.plan-day-cell .d-num{font-size:13px;font-weight:800;color:#a0a0b0;line-height:1}
.plan-day-cell .d-date{font-size:8px;color:#7c7c94;margin-top:2px;letter-spacing:.04em}
.plan-day-cell.today{border-color:#7C5CFC;background:linear-gradient(135deg,#1a0e3a 0%,#0a0a14 100%);box-shadow:0 0 0 2px rgba(124,92,252,.18)}
.plan-day-cell.today .d-num{color:#A78BFA}
.plan-day-cell.today::after{content:'TODAY';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);font-size:7px;font-weight:900;letter-spacing:.1em;color:#7C5CFC;background:#0a0a12;padding:1px 5px;border-radius:8px;border:1px solid #5B21B6}
.plan-day-cell.followed{background:linear-gradient(135deg,#0d2d1a 0%,#0a1f12 100%);border-color:#166534}
.plan-day-cell.followed .d-num{color:#22c55e}
.plan-day-cell.followed::before{content:'✓';position:absolute;top:3px;right:4px;font-size:10px;color:#22c55e;font-weight:900}
.plan-day-cell.partial{background:linear-gradient(135deg,#2d1d0a 0%,#1a1208 100%);border-color:#92400e}
.plan-day-cell.partial .d-num{color:#fbbf24}
.plan-day-cell.partial::before{content:'~';position:absolute;top:3px;right:4px;font-size:10px;color:#fbbf24;font-weight:900}
.plan-day-cell.missed{background:linear-gradient(135deg,#2d0d0d 0%,#1a0808 100%);border-color:#991b1b}
.plan-day-cell.missed .d-num{color:#ef4444}
.plan-day-cell.missed::before{content:'✕';position:absolute;top:3px;right:4px;font-size:10px;color:#ef4444;font-weight:900}
.plan-day-cell.future{background:#08070f;border-color:#1a1a2e;cursor:not-allowed;opacity:.5}
.plan-day-cell.future .d-num{color:#7c7c94}
.plan-day-cell.locked-cell{cursor:not-allowed;opacity:.4}

.plan-card-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;align-items:center}
.plan-card-meta{font-size:11px;color:#7c7c94;font-family:'JetBrains Mono',monospace;flex:1;min-width:160px}

.plan-lock-msg{background:#252539;border:1px dashed #363650;border-radius:10px;padding:14px 18px;text-align:center;color:#9090a8;font-size:13px;display:flex;align-items:center;justify-content:center;gap:10px}
.plan-lock-msg .lock-icon{font-size:18px}

.plans-day-state{flex:1;background:#0a0a12;border:1px solid #252539;color:#a0a0b0;padding:10px 12px;border-radius:10px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Rubik',sans-serif;transition:all .18s}
.plans-day-state:hover{border-color:#7C5CFC;color:#7C5CFC}
.plans-day-state.selected[data-state="followed"]{background:#0d2d1a;border-color:#166534;color:#22c55e}
.plans-day-state.selected[data-state="partial"]{background:#2d1d0a;border-color:#92400e;color:#fbbf24}
.plans-day-state.selected[data-state="missed"]{background:#2d0d0d;border-color:#991b1b;color:#ef4444}

.plan-modal-goal-item{background:#0a0a12;border:1px solid #252539;border-radius:8px;padding:10px 12px;margin-bottom:6px;display:flex;align-items:center;gap:10px;font-size:12px}
.plan-modal-goal-item .num{font-family:'JetBrains Mono',monospace;font-weight:800;color:#7C5CFC;font-size:11px;background:#1a1a2e;padding:2px 7px;border-radius:6px;flex-shrink:0}
.plan-modal-goal-item .txt{color:#e2e8f0;flex:1;line-height:1.4}

@media (max-width: 768px) {
  .plans-ladder-step .num{font-size:14px}
  .plans-ladder-step .lbl{font-size:8px}
  .plan-goals-grid{grid-template-columns:1fr}
  .plan-days-grid{grid-template-columns:repeat(5,1fr)}
  .plan-card{padding:16px}
  .plan-day-goal-row .g-toggles{width:100%;margin-top:6px}
  .plan-day-goal-row .g-tog{flex:1}
}

/* Per-goal toggle row (inside day-mark modal) */
.plan-day-goal-row{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#0a0a12;border:1px solid #252539;border-radius:10px;padding:10px 12px;margin-bottom:8px;flex-wrap:wrap;transition:border-color .18s}

/* === Settings: Live Equity card === */
.settings-live-equity{background:linear-gradient(135deg,#0d1a14 0%,#0a0a12 100%);border:1px solid #166534;border-radius:14px;padding:14px 16px;margin-bottom:10px;position:relative;overflow:hidden}
.settings-live-equity::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#22c55e,transparent);opacity:.6}
.settings-live-equity .sle-main{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.settings-live-equity .sle-info{flex:1;min-width:180px}
.settings-live-equity .sle-lbl{font-size:10px;font-weight:700;letter-spacing:.14em;color:#22c55e;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.settings-live-equity .sle-pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:slePulse 2s ease-in-out infinite}
@keyframes slePulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}50%{box-shadow:0 0 0 6px rgba(34,197,94,0)}}
.settings-live-equity .sle-val{font-family:'Share Tech Mono','JetBrains Mono',monospace;font-size:26px;font-weight:400;color:#22c55e;line-height:1;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums;letter-spacing:.01em;text-shadow:0 0 16px rgba(34,197,94,.18);margin-bottom:4px}
.settings-live-equity .sle-sub{font-size:11px;color:#9090a8;font-family:'JetBrains Mono',monospace;line-height:1.4}
.settings-live-equity .sle-sync-btn{background:linear-gradient(135deg,#22c55e,#16a34a);color:#0a0a12;border:none;padding:10px 16px;border-radius:10px;font-weight:700;font-size:12px;cursor:pointer;font-family:'Rubik',sans-serif;letter-spacing:.04em;transition:all .2s;box-shadow:0 4px 12px rgba(34,197,94,.22);flex-shrink:0;white-space:nowrap}
.settings-live-equity .sle-sync-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(34,197,94,.4)}
.settings-live-equity .sle-sync-btn:active{transform:translateY(0)}

.settings-live-equity .sle-recovery{display:flex;align-items:center;gap:12px;background:#2d1d0a;border:1px solid #92400e;border-radius:10px;padding:10px 12px;margin-top:12px}
.settings-live-equity .sle-recovery .r-icon{font-size:20px;flex-shrink:0}
.settings-live-equity .sle-recovery .r-body{flex:1;min-width:0}
.settings-live-equity .sle-recovery .r-title{font-size:12px;font-weight:700;color:#fbbf24;margin-bottom:2px}
.settings-live-equity .sle-recovery .r-sub{font-size:11px;color:#a0a0b0;font-family:'JetBrains Mono',monospace;line-height:1.4}
.settings-live-equity .sle-recovery .r-btn{background:#fbbf24;color:#0a0a12;border:none;padding:7px 14px;border-radius:8px;font-weight:700;font-size:11px;cursor:pointer;font-family:'Rubik',sans-serif;flex-shrink:0;transition:all .15s}
.settings-live-equity .sle-recovery .r-btn:hover{background:#fcd34d;transform:translateY(-1px)}

@media (max-width: 600px){
  .settings-live-equity .sle-main{flex-direction:column;align-items:stretch}
  .settings-live-equity .sle-sync-btn{width:100%}
  .settings-live-equity .sle-recovery{flex-wrap:wrap}
  .settings-live-equity .sle-recovery .r-btn{width:100%}
}
.plan-day-goal-row:hover{border-color:#7c7c94}
.plan-day-goal-row.has-mark{border-left-width:3px}
.plan-day-goal-row.has-mark.mark-followed{border-left-color:#22c55e}
.plan-day-goal-row.has-mark.mark-missed{border-left-color:#ef4444}
.plan-day-goal-row .g-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.plan-day-goal-row .g-num{font-family:'JetBrains Mono',monospace;font-weight:800;color:#7C5CFC;font-size:10px;background:#1a1a2e;padding:3px 8px;border-radius:6px;flex-shrink:0;letter-spacing:.04em}
.plan-day-goal-row .g-txt{font-size:13px;color:#e2e8f0;font-weight:600;line-height:1.35;word-break:break-word}
.plan-day-goal-row .g-toggles{display:flex;gap:6px;flex-shrink:0}
.g-tog{background:#0a0a12;border:1px solid #252539;color:#9090a8;padding:7px 11px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;font-family:'JetBrains Mono',monospace;letter-spacing:.04em;transition:all .15s;white-space:nowrap}
.g-tog:hover{border-color:#7c7c94;color:#a0a0b0}
.g-follow:hover{border-color:#166534;color:#22c55e}
.g-miss:hover{border-color:#991b1b;color:#ef4444}
.g-follow.on{background:#0d2d1a;border-color:#166534;color:#22c55e;box-shadow:0 0 0 1px rgba(34,197,94,.18) inset}
.g-miss.on{background:#2d0d0d;border-color:#991b1b;color:#ef4444;box-shadow:0 0 0 1px rgba(239,68,68,.18) inset}

/* Auto-computed status badge */
.plan-day-auto-badge{display:flex;align-items:center;gap:10px;background:#0a0a12;border:1px solid;border-radius:10px;padding:11px 14px;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.03em;transition:all .25s ease}
.plan-day-auto-badge .icon{font-size:18px;flex-shrink:0;line-height:1}
.plan-day-auto-badge .lbl{flex:1;line-height:1.4}
.plan-day-auto-badge.pending{background:linear-gradient(135deg,#1a1a2e,#0a0a12)}
.plan-day-auto-badge.state-followed{background:linear-gradient(135deg,#0d2d1a,#0a0a12)}
.plan-day-auto-badge.state-partial{background:linear-gradient(135deg,#2d1d0a,#0a0a12)}
.plan-day-auto-badge.state-missed{background:linear-gradient(135deg,#2d0d0d,#0a0a12)}

*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Rubik',sans-serif;background:#0a0a12;color:#e2e8f0}body::before{content:'';position:fixed;left:-20%;right:-20%;bottom:0;height:55%;z-index:0;background-image:linear-gradient(rgba(124,92,252,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(124,92,252,0.05) 1px,transparent 1px);background-size:80px 80px;transform-origin:50% 100%;transform:perspective(800px) rotateX(74deg);mask-image:linear-gradient(to top,rgba(0,0,0,0.4) 0%,transparent 100%);-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0.4) 0%,transparent 100%);pointer-events:none}body::after{content:'';position:fixed;width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,rgba(98,68,227,0.15) 0%,transparent 65%);top:-300px;left:-200px;z-index:0;pointer-events:none}.font-mono{font-family:'JetBrains Mono',monospace}.font-display{font-family:'Space Grotesk',sans-serif;font-feature-settings:"zero" 1;font-variant-numeric:slashed-zero}.font-digital{font-family:'Share Tech Mono','JetBrains Mono',monospace;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums;letter-spacing:.02em}.font-numeric{font-family:'JetBrains Mono',monospace;font-feature-settings:"zero" 1,"ss19" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums}.sidebar{width:260px;min-height:100vh;background:rgba(10,10,18,0.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-right:1px solid rgba(40,30,70,0.7);position:fixed;top:0;left:0;z-index:100;display:flex;flex-direction:column;padding:24px 16px}.main{margin-left:260px;min-height:100vh;padding:28px 32px;background:transparent;position:relative;z-index:1}.page{display:none}.page.active{display:block}.nav-btn{width:100%;text-align:left;padding:10px 14px;border-radius:10px;background:transparent;color:#a0a0b0;cursor:pointer;font-family:'Rubik',sans-serif;font-size:14px;font-weight:500;border:none;transition:all .2s;display:flex;align-items:center;gap:10px;margin-bottom:4px}.nav-btn:hover{background:#1a1a2e;color:#e2e8f0}.nav-btn.active{background:#1a1a2e;color:#7C5CFC;border-left:3px solid #7C5CFC;padding-left:11px}.stat-card{background:#0d0d18;border:1px solid #252539;border-radius:16px;padding:20px 24px}.stat-card .label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:#7c7c94;margin-bottom:8px}.stat-val{font-family:'JetBrains Mono',monospace;font-size:30px;font-weight:800;line-height:1;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums;letter-spacing:-.01em}.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;font-family:'JetBrains Mono',monospace;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums}.badge-green{background:#0d2d1a;color:#22c55e;border:1px solid #166534}.badge-red{background:#2d0d0d;color:#ef4444;border:1px solid #991b1b}.badge-yellow{background:#1a1a2e;color:#7C5CFC;border:1px solid #5B21B6}.badge-blue{background:#131322;color:#A78BFA;border:1px solid #5B21B6}.badge-purple{background:#252539;color:#C4B5FD;border:1px solid #7C3AED}.badge-grey{background:#252539;color:#a0a0b0;border:1px solid #363650}table{width:100%;border-collapse:collapse}th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#7c7c94;padding:8px 12px;text-align:left;border-bottom:1px solid #252539;white-space:nowrap}td{padding:10px 12px;font-size:13px;border-bottom:1px solid #131322;font-family:'JetBrains Mono',monospace;white-space:nowrap;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums}tr:hover td{background:#0f0f1c}.grade-A\+{color:#22c55e}.grade-A{color:#4ade80}.grade-B{color:#A78BFA}.grade-C{color:#7c5cfc}.grade-D\+{color:#fb923c}.grade-D{color:#ef4444}.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:200;justify-content:center;align-items:flex-start;padding-top:40px;overflow-y:auto}.modal-backdrop.open{display:flex}.modal{background:rgba(10,10,18,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(40,30,70,0.8);border-radius:20px;width:100%;max-width:680px;padding:28px;position:relative;margin:auto;box-shadow:0 24px 80px rgba(0,0,0,0.7),inset 0 1px 0 rgba(255,255,255,0.04)}.form-group{margin-bottom:16px}.form-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:#7c7c94;margin-bottom:6px;display:block}.form-input{width:100%;background:#0a0a12;border:1px solid #252539;border-radius:8px;padding:10px 14px;color:#e2e8f0;font-family:'Rubik',sans-serif;font-size:14px;outline:none;transition:border-color .2s}.form-input:focus{border-color:#7C5CFC}.form-select{width:100%;background:#0a0a12;border:1px solid #252539;border-radius:8px;padding:10px 14px;color:#e2e8f0;font-family:'Rubik',sans-serif;font-size:14px;outline:none}.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}.btn-primary{background:#7C5CFC;color:#ffffff;padding:11px 22px;border-radius:10px;font-weight:700;font-size:14px;border:none;cursor:pointer;font-family:'Rubik',sans-serif;transition:all .2s}.btn-primary:hover{background:#9B7BFF}.btn-danger{background:#2d0d0d;color:#ef4444;border:1px solid #991b1b;padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;border:none;cursor:pointer;font-family:'Rubik',sans-serif}.btn-ghost{background:transparent;border:1px solid #252539;color:#a0a0b0;padding:9px 18px;border-radius:8px;font-size:13px;cursor:pointer;font-family:'Rubik',sans-serif;transition:all .2s}.btn-ghost:hover{border-color:#7C5CFC;color:#7C5CFC}.section-card{background:rgba(10,10,18,0.90);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(40,30,70,0.75);border-radius:16px;padding:24px;margin-bottom:24px;box-shadow:0 4px 24px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.025)}.section-title{font-size:16px;font-weight:700;color:#e2e8f0;margin-bottom:16px;display:flex;align-items:center;gap:8px}.pnl-pos{color:#22c55e}.pnl-neg{color:#ef4444}.pnl-zero{color:#a0a0b0}.rule-item{background:#0a0a12;border:1px solid #252539;border-radius:12px;padding:14px 18px;display:flex;gap:14px;align-items:flex-start}.rule-icon{font-size:20px;flex-shrink:0;margin-top:2px}.rule-title{font-size:13px;font-weight:700;color:#e2e8f0;margin-bottom:4px}.rule-desc{font-size:12px;color:#9090a8;line-height:1.5}.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.cal-header{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#7c7c94;text-align:center;padding:6px}.cal-day{background:#0a0a12;border:1px solid #252539;border-radius:8px;padding:8px;min-height:72px;text-align:right;font-size:11px;font-family:'JetBrains Mono',monospace;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums}.cal-day .daynum{font-size:12px;color:#7c7c94;font-weight:600;margin-bottom:4px}.cal-day.profit{border-color:#166534;background:#0a1f12}.cal-day.loss{border-color:#991b1b;background:#1f0a0a}.cal-day.empty{background:transparent;border:1px solid #131322}.cal-day .pnl{font-size:13px;font-weight:700}.cal-day .trades-count{font-size:10px;color:#7c7c94;margin-top:3px}.note-td{font-family:'Rubik',sans-serif!important}.editable{background:transparent;border:none;color:inherit;font-family:'Rubik',sans-serif;font-size:13px;width:100%;outline:none;padding:2px}.editable:focus{background:#0f0f1c;border-radius:4px}.limit-badge{font-size:10px;padding:2px 8px;border-radius:20px;font-family:'JetBrains Mono',monospace;font-weight:700;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums}.limit-ok{background:#0d2d1a;color:#22c55e}.limit-reached{background:#2d0d0d;color:#ef4444}.overview-stat{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #131322}.overview-stat:last-child{border-bottom:none}.chart-container{position:relative;height:200px}.chart-details{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:12px;border-top:1px dashed #252539;align-items:center}.cdp{display:inline-flex;align-items:center;gap:8px;background:#0a0a12;border:1px solid #252539;border-radius:8px;padding:6px 10px;font-family:'JetBrains Mono',monospace;font-size:11px;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums;transition:all .18s}.cdp:hover{border-color:#7c7c94;background:#0d0d18;transform:translateY(-1px)}.cdp-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0;box-shadow:0 0 6px currentColor}.cdp-name{color:#a0a0b0;font-family:'Rubik',sans-serif;font-weight:600;letter-spacing:.02em;font-size:11px}.cdp-val{color:#e2e8f0;font-weight:800;font-size:12px;letter-spacing:-.01em}.cdp-sub{color:#7c7c94;font-size:10px;font-weight:500;border-left:1px solid #252539;padding-left:8px;margin-left:2px}.cdp-empty{font-size:11px;color:#7c7c94;font-family:'JetBrains Mono',monospace;padding:4px 0;font-style:italic}.cdp.cdp-good{border-color:rgba(34,197,94,0.25)}.cdp.cdp-bad{border-color:rgba(239,68,68,0.25)}.cdp.cdp-peak{background:linear-gradient(135deg,#0d2d1a 0%,#0a0a12 100%);border-color:#166534}.cdp.cdp-trough{background:linear-gradient(135deg,#2d0d0d 0%,#0a0a12 100%);border-color:#991b1b}.cdp.cdp-net{background:linear-gradient(135deg,#1a1a2e 0%,#0a0a12 100%);border-color:#5B21B6}.scrollable-table{overflow-x:auto}.daily-todo-card{background:rgba(10,10,18,0.90);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(40,30,70,0.75);border-radius:16px;padding:22px 24px;margin-top:20px;box-shadow:0 4px 24px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.025)}.daily-todo-header{display:flex;align-items:center;gap:10px;margin-bottom:6px}.daily-todo-title{font-size:15px;font-weight:700;color:#e2e8f0}.daily-todo-sub{font-size:12px;color:#7c7c94;margin-bottom:14px;line-height:1.5}.daily-todo-progress-bar{height:4px;background:#131322;border-radius:4px;margin-bottom:16px;overflow:hidden}.daily-todo-progress-fill{height:100%;background:linear-gradient(90deg,#7C5CFC,#A78BFA);border-radius:4px;transition:width .4s cubic-bezier(.4,0,.2,1)}.daily-todo-grid{display:flex;flex-direction:column;gap:8px}.daily-todo-item{display:flex;align-items:center;gap:12px;background:#0a0a12;border:1px solid #252539;border-radius:10px;padding:12px 16px;cursor:pointer;transition:all .2s;user-select:none}.daily-todo-item:hover{border-color:#7C5CFC;background:#08070f}.daily-todo-item.done{border-color:#166534;background:#0a1f12}.daily-todo-item.done .daily-todo-text{color:#22c55e;text-decoration:line-through;text-decoration-color:rgba(34,197,94,0.4)}.daily-todo-cb{width:20px;height:20px;border-radius:6px;border:2px solid #363650;background:#0f0f1c;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;font-size:12px}.daily-todo-item.done .daily-todo-cb{border-color:#22c55e;background:#0d2d1a;color:#22c55e}.daily-todo-text{font-size:13px;color:#c0d0e0;font-family:'Rubik',sans-serif;flex:1;transition:color .2s}.daily-todo-actions{display:flex;align-items:center;gap:10px;margin-top:16px}.daily-todo-pill{font-size:10px;font-weight:700;font-family:'JetBrains Mono',monospace;padding:3px 10px;border-radius:20px;letter-spacing:.05em}.daily-todo-pill.complete{background:#0d2d1a;color:#22c55e;border:1px solid #166534}.daily-todo-pill.incomplete{background:#252539;color:#a0a0b0;border:1px solid #363650}.daily-todo-empty{font-size:13px;color:#7c7c94;padding:14px 0;text-align:center}.daily-todo-edit-row{display:flex;align-items:center;gap:8px;background:#0a0a12;border:1px solid #252539;border-radius:10px;padding:8px 12px;margin-bottom:8px}.daily-todo-edit-input{flex:1;background:transparent;border:none;color:#e2e8f0;font-family:'Rubik',sans-serif;font-size:13px;outline:none}.daily-todo-edit-input::placeholder{color:#7c7c94}.daily-todo-delete-btn{background:none;border:none;color:#7c7c94;cursor:pointer;font-size:14px;padding:2px 6px;border-radius:6px;transition:color .15s}.daily-todo-delete-btn:hover{color:#ef4444}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:#0a0a12}::-webkit-scrollbar-thumb{background:#363650;border-radius:4px}.warning-bar{background:linear-gradient(135deg,#2d0d0d,#1f0a0a);border:1px solid #991b1b;border-radius:12px;padding:14px 20px;display:flex;align-items:center;gap:12px;margin-bottom:20px}.week-review-field{background:#0a0a12;border:1px solid #252539;border-radius:10px;width:100%;padding:14px;color:#e2e8f0;font-family:'Rubik',sans-serif;font-size:14px;min-height:80px;resize:vertical;outline:none}.week-review-field:focus{border-color:#7C5CFC}.strategy-badge{font-size:10px;padding:3px 10px;border-radius:20px;font-weight:700;font-family:'JetBrains Mono',monospace}.strat-best{background:#0d2d1a;color:#22c55e;border:1px solid #166534}.strat-worst{background:#2d0d0d;color:#ef4444;border:1px solid #991b1b}.strat-ok{background:#252539;color:#a0a0b0;border:1px solid #363650}@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.page.active{animation:none}.top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.top-bar h1{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;color:#e2e8f0;letter-spacing:.05em}.top-bar p{font-size:13px;color:#7c7c94;margin-top:4px}.hero-banner{background:linear-gradient(135deg,rgba(12,8,22,0.90) 0%,rgba(16,10,32,0.82) 50%,rgba(24,12,40,0.78) 100%);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(124,92,252,0.14);border-radius:20px;padding:24px 28px;margin-bottom:24px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;position:relative;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,0.5),0 1px 0 rgba(255,255,255,0.04) inset,0 0 0 1px rgba(124,92,252,0.06) inset}.hero-banner::before{content:'';position:absolute;top:-50%;right:-10%;width:400px;height:400px;background:radial-gradient(circle,rgba(124,92,252,0.09) 0%,transparent 70%);pointer-events:none}.hero-banner::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(124,92,252,0.4),transparent)}.hero-greet{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;color:#7C5CFC;letter-spacing:.04em;margin-bottom:6px;position:relative}.hero-date{font-size:13px;color:#a0a0b0;font-family:'JetBrains Mono',monospace;margin-bottom:10px;position:relative}.hero-quote{font-size:13px;color:#9090a8;font-style:italic;line-height:1.5;max-width:520px;position:relative}.hero-stat{text-align:right;position:relative}.hero-stat .lbl{font-size:10px;font-weight:700;letter-spacing:.18em;color:#7c7c94;text-transform:uppercase;margin-bottom:8px}.hero-stat .sub{font-size:11px;color:#7c7c94;margin-top:6px;font-family:'JetBrains Mono',monospace;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums}.hero-stat .val{font-family:'Share Tech Mono','JetBrains Mono',monospace;font-size:36px;font-weight:400;line-height:1;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums;letter-spacing:.01em;text-shadow:0 0 24px rgba(34,197,94,0.15)}.stat-card{background:linear-gradient(180deg,rgba(10,18,32,0.9) 0%,rgba(8,15,24,0.85) 100%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(40,30,70,0.8);border-radius:16px;padding:20px 24px;position:relative;overflow:hidden;transition:all .25s ease;box-shadow:0 4px 20px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.03)}.stat-card:hover{border-color:rgba(42,58,78,0.9);transform:translateY(-3px) translateZ(10px);box-shadow:0 14px 36px rgba(0,0,0,0.5),0 0 0 1px rgba(124,92,252,0.07) inset}.stat-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent,#7C5CFC),transparent);opacity:.4}.stat-card.accent-blue{--accent:#A78BFA}.stat-card.accent-green{--accent:#22c55e}.stat-card.accent-red{--accent:#ef4444}.stat-card.accent-purple{--accent:#C4B5FD}.stat-card.accent-yellow{--accent:#7C5CFC}.stat-trend{font-size:10px;font-family:'JetBrains Mono',monospace;font-weight:700;margin-top:8px;display:flex;align-items:center;gap:4px;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums}.btn-primary{background:linear-gradient(135deg,#7C5CFC 0%,#6244E3 100%);color:#ffffff;padding:11px 22px;border-radius:10px;font-weight:700;font-size:14px;border:none;cursor:pointer;font-family:'Rubik',sans-serif;transition:all .2s;box-shadow:0 4px 12px rgba(124,92,252,0.25)}.btn-primary:hover{background:linear-gradient(135deg,#9B7BFF 0%,#7C5CFC 100%);transform:translateY(-1px);box-shadow:0 6px 16px rgba(124,92,252,0.4)}.cal-day{cursor:pointer;transition:all .2s ease;position:relative}.cal-day:not(.empty):hover{transform:translateY(-2px);border-color:#7C5CFC;box-shadow:0 4px 14px rgba(124,92,252,0.18)}.cal-day.has-data::after{content:'👁';position:absolute;top:4px;left:6px;font-size:9px;opacity:0;transition:opacity .2s}.cal-day.has-data:hover::after{opacity:.6}.day-modal{background:#0d0d18;border:1px solid #252539;border-radius:20px;width:100%;max-width:920px;padding:0;position:relative;margin:auto;overflow:hidden}.day-modal-header{background:linear-gradient(135deg,#1a1a2e 0%,#0d0d18 100%);padding:24px 28px;border-bottom:1px solid #252539;display:flex;justify-content:space-between;align-items:center}.day-modal-body{padding:24px 28px;max-height:70vh;overflow-y:auto}.day-modal-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}.day-summary-box{background:#0a0a12;border:1px solid #252539;border-radius:12px;padding:14px;text-align:center}.day-summary-box .lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#7c7c94;margin-bottom:6px}.day-summary-box .val{font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:800;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums;letter-spacing:-.01em}.trade-detail-card{background:#0a0a12;border:1px solid #252539;border-radius:14px;padding:18px 20px;margin-bottom:14px;transition:all .2s}.trade-detail-card:hover{border-color:#7c7c94}.trade-detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #131322}.trade-detail-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.trade-detail-num{background:#1a1a2e;color:#7C5CFC;font-family:'JetBrains Mono',monospace;font-weight:700;padding:4px 10px;border-radius:8px;font-size:13px;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums}.trade-detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}.trade-detail-grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:14px;padding-top:14px;border-top:1px solid #131322}.trade-detail-field{}.trade-detail-field .lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#7c7c94;margin-bottom:4px}.trade-detail-field .val{font-size:13px;font-family:'JetBrains Mono',monospace;color:#e2e8f0;font-weight:500;word-break:break-word;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums}.trade-detail-reason{background:#1a1a2e;border-left:3px solid #7C5CFC;padding:10px 14px;border-radius:0 8px 8px 0;margin-top:10px;font-size:13px;color:#e2e8f0}.trade-detail-screenshots{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.screenshot-link{background:#1a1a2e;border:1px solid #5B21B6;color:#A78BFA;padding:10px 14px;border-radius:10px;font-size:12px;font-weight:600;text-decoration:none;display:flex;align-items:center;gap:8px;transition:all .2s;font-family:'Rubik',sans-serif}.screenshot-link:hover{background:#131322;border-color:#8B5CF6;color:#DDD6FE}.screenshot-link.empty{background:#08070f;border-color:#252539;color:#7c7c94;cursor:not-allowed}.equity-preview{background:#0d0d18;border:1px solid #252539;border-radius:16px;padding:20px 24px;margin-bottom:24px}.equity-preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.equity-preview-header .title{font-size:14px;font-weight:700;color:#e2e8f0}.equity-preview-header .total{font-family:'Share Tech Mono','JetBrains Mono',monospace;font-size:22px;font-weight:400;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums;letter-spacing:.02em}@media(max-width:760px){.hero-banner{grid-template-columns:1fr}.hero-stat{text-align:left}.day-modal-summary{grid-template-columns:repeat(2,1fr)}.trade-detail-grid{grid-template-columns:repeat(2,1fr)}.trade-detail-grid-5{grid-template-columns:repeat(2,1fr)}.trade-detail-screenshots{grid-template-columns:1fr}}.date-clickable{cursor:pointer;transition:all .15s ease;border-radius:6px;padding:4px 8px;margin:-4px -8px;display:inline-block;border:1px solid transparent}.date-clickable:hover{background:#1a1a2e;border-color:#2a2540;color:#7C5CFC}.date-clickable:hover div{color:#7C5CFC !important}.alert-modal{background:linear-gradient(180deg,#1a0808 0%,#0d0d18 100%);border:1px solid #991b1b;border-radius:18px;width:100%;max-width:480px;padding:0;position:relative;margin:auto;overflow:hidden}.alert-modal-header{background:linear-gradient(135deg,#2d0d0d 0%,#1a0808 100%);padding:20px 24px;border-bottom:1px solid #991b1b;display:flex;align-items:center;gap:12px}.alert-modal-icon{font-size:32px}.alert-modal-title{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;color:#ef4444;letter-spacing:.04em}.alert-modal-body{padding:20px 24px}.alert-modal-msg{font-size:14px;color:#e2e8f0;line-height:1.6;margin-bottom:14px}.alert-modal-stat{background:#0a0a12;border:1px solid #991b1b;border-radius:10px;padding:12px 14px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;font-family:'JetBrains Mono',monospace;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums}.alert-modal-stat .lbl{font-size:11px;color:#a0a0b0;text-transform:uppercase;letter-spacing:.1em}.alert-modal-stat .val{font-size:14px;color:#ef4444;font-weight:700}.alert-modal-rule{font-size:12px;color:#a0a0b0;font-style:italic;line-height:1.5;padding:10px 14px;background:#0a0a12;border-left:3px solid #7C5CFC;border-radius:0 8px 8px 0;margin-bottom:18px}.alert-modal-actions{display:flex;gap:10px}.alert-modal-actions button{flex:1;padding:11px 18px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Rubik',sans-serif;border:none;transition:all .2s}.btn-stop{background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);color:#0a0a12}.btn-stop:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(34,197,94,0.3)}.btn-override{background:#1a0808;color:#ef4444;border:1px solid #991b1b}.btn-override:hover{background:#2d0d0d}.checklist-card{background:#0d0d18;border:1px solid #252539;border-radius:16px;padding:24px;margin-bottom:24px}.checklist-header{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}.checklist-title{font-size:16px;font-weight:700;color:#e2e8f0;display:flex;align-items:center;gap:8px}.checklist-progress-pill{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:.05em}.checklist-progress-pill.incomplete{background:#2d0d0d;color:#ef4444;border:1px solid #991b1b}.checklist-progress-pill.complete{background:#0d2d1a;color:#22c55e;border:1px solid #166534}.checklist-sub{font-size:12px;color:#9090a8;line-height:1.5;margin-bottom:14px}.checklist-bar{height:6px;background:#0d0d18;border-radius:6px;overflow:hidden;margin-bottom:16px}.checklist-bar-fill{height:100%;background:linear-gradient(90deg,#7C5CFC 0%,#22c55e 100%);transition:width .3s ease;border-radius:6px}.checklist-grid{display:flex;flex-direction:column;gap:8px}.checklist-item{display:flex;align-items:center;gap:14px;background:#0a0a12;border:1px solid #252539;border-radius:10px;padding:12px 16px;cursor:pointer;transition:all .18s;user-select:none}.checklist-item:hover{border-color:#2a3850;background:#0a1422}.checklist-item.ticked{background:linear-gradient(135deg,#0d2d1a 0%,#0a1f12 100%);border-color:#166534}.checklist-item.ticked .checklist-text{color:#22c55e;text-decoration:line-through;text-decoration-color:rgba(34,197,94,0.5)}.checklist-num{flex-shrink:0;width:28px;height:28px;border-radius:8px;background:#7C5CFC;color:#0a0a12;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:800}.checklist-item.ticked .checklist-num{background:#22c55e;color:#0a0a12}.checklist-box{flex-shrink:0;width:22px;height:22px;border-radius:6px;border:2px solid #2a3850;background:#0a0a12;display:flex;align-items:center;justify-content:center;color:#22c55e;font-weight:900;font-size:14px;transition:all .18s}.checklist-item.ticked .checklist-box{background:#22c55e;border-color:#22c55e;color:#0a0a12}.checklist-text{flex:1;font-size:13px;color:#e2e8f0;font-weight:500;line-height:1.4}.checklist-empty{text-align:center;padding:24px;color:#9090a8;font-size:13px;font-style:italic}.checklist-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}.checklist-btn-reset{background:#0d0d18;color:#a0a0b0;border:1px solid #252539;padding:8px 14px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Rubik',sans-serif;transition:all .18s}.checklist-btn-reset:hover{background:#1a1a2e;color:#e2e8f0;border-color:#2a3850}.checklist-edit-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}.checklist-edit-row .num-badge{flex-shrink:0;width:26px;height:26px;border-radius:7px;background:#0d0d18;border:1px solid #252539;color:#7C5CFC;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:800}.checklist-edit-row input{flex:1;background:#0a0a12;border:1px solid #252539;color:#e2e8f0;padding:9px 12px;border-radius:8px;font-size:13px;font-family:'Rubik',sans-serif}.checklist-edit-row input:focus{outline:none;border-color:#7C5CFC}.checklist-edit-row input:disabled{opacity:.5;cursor:not-allowed}.checklist-edit-row .del-btn{flex-shrink:0;background:#2d0d0d;color:#ef4444;border:1px solid #991b1b;width:32px;height:32px;border-radius:8px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.checklist-edit-row .del-btn:hover:not(:disabled){background:#3d0e0e}.checklist-edit-row .del-btn:disabled{opacity:.4;cursor:not-allowed}.checklist-cooldown-banner{background:linear-gradient(135deg,#252539 0%,#0d0d18 100%);border:1px solid #4F37C2;border-radius:10px;padding:14px 16px;margin-bottom:16px;display:flex;align-items:center;gap:12px}.checklist-cooldown-icon{font-size:24px;flex-shrink:0}.checklist-cooldown-text{flex:1}.checklist-cooldown-title{font-size:13px;font-weight:700;color:#C4B5FD;margin-bottom:2px}.checklist-cooldown-sub{font-size:11px;color:#a0a0b0;line-height:1.5;font-family:'JetBrains Mono',monospace}.checklist-edit-banner{background:linear-gradient(135deg,#0d2d1a 0%,#0a1f12 100%);border:1px solid #166534;border-radius:10px;padding:14px 16px;margin-bottom:16px;display:flex;align-items:center;gap:12px}.checklist-edit-banner-icon{font-size:24px;flex-shrink:0}.checklist-edit-banner-text{flex:1}.checklist-edit-banner-title{font-size:13px;font-weight:700;color:#22c55e;margin-bottom:2px}.checklist-edit-banner-sub{font-size:11px;color:#a0a0b0;line-height:1.5}.collapsible-card{padding:0;overflow:hidden}.collapsible-header{width:100%;display:flex;align-items:center;background:transparent;border:none;color:#e2e8f0;cursor:pointer;padding:20px 24px;font-family:'Rubik',sans-serif;text-align:left;transition:background .18s}.collapsible-header:hover{background:#0a1422}.collapsible-card.open .collapsible-header{border-bottom:1px solid #252539}.collapsible-chevron{margin-left:auto;font-size:18px;color:#9090a8;transition:transform .25s ease;display:inline-block;line-height:1}.collapsible-card.open .collapsible-chevron{transform:rotate(180deg);color:#7C5CFC}.collapsible-body{display:none;padding:0 24px 24px 24px}.collapsible-card.open .collapsible-body{display:block}.azhkar-trigger{display:inline-flex;align-items:center;gap:8px;margin-top:8px;background:transparent;border:1px solid #363650;border-radius:20px;padding:4px 12px 4px 10px;cursor:pointer;transition:all .2s;font-family:'JetBrains Mono',monospace}.azhkar-trigger:hover{background:rgba(155,123,255,0.08);border-color:#4F37C2}.azhkar-trigger .azhkar-label{font-size:11px;font-weight:700;letter-spacing:.12em;color:#C4B5FD;text-transform:uppercase}.azhkar-trigger .azhkar-badge{font-size:9px;background:#252539;color:#7C5CFC;padding:2px 7px;border-radius:10px;border:1px solid #5B21B6;font-weight:700}.azhkar-trigger .azhkar-arrow{font-size:9px;color:#7C5CFC;transition:transform .25s ease;display:inline-block}.azhkar-trigger.open .azhkar-arrow{transform:rotate(180deg)}.azhkar-panel{background:linear-gradient(180deg,#0a0a16 0%,#08080f 100%);border:1px solid #1f1e30;border-radius:14px;padding:16px 18px;margin-top:8px;animation:fadeIn .2s ease;max-width:480px}.azhkar-section{margin-bottom:14px}.azhkar-section:last-child{margin-bottom:0}.azhkar-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid #1a1a2e}.azhkar-section-label{font-size:9px;font-weight:700;letter-spacing:.18em;color:#C4B5FD;text-transform:uppercase;font-family:'Space Grotesk',sans-serif}.azhkar-add-btn{font-size:9px;font-weight:700;letter-spacing:.08em;color:#6244E3;background:transparent;border:1px solid #363650;border-radius:10px;padding:2px 9px;cursor:pointer;font-family:'JetBrains Mono',monospace;transition:all .2s}.azhkar-add-btn:hover{background:rgba(155,123,255,0.12);color:#C4B5FD;border-color:#4F37C2}.azhkar-row{display:flex;align-items:center;gap:8px;padding:4px 0;position:relative}.azhkar-num{font-size:9px;color:#473d5e;font-family:'JetBrains Mono',monospace;min-width:16px;font-weight:700}.azhkar-text{font-size:12px;color:#a8a0b8;flex:1;font-family:'JetBrains Mono',monospace}.azhkar-actions{display:flex;gap:4px;opacity:0;transition:opacity .2s}.azhkar-row:hover .azhkar-actions{opacity:1}.azhkar-check-circle{width:20px;height:20px;border-radius:50%;border:1.5px solid #3a304a;background:transparent;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s;position:relative}.azhkar-check-circle:hover{border-color:#C4B5FD}.azhkar-check-circle.checked{background:#22c55e;border-color:#22c55e}.azhkar-check-circle.checked::after{content:'';display:block;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg) translate(-1px,-1px)}.azhkar-text.checked{color:#3a3a52;text-decoration:line-through}.azhkar-progress{height:2px;background:#1a1a2e;border-radius:2px;margin:10px 0 4px;overflow:hidden}.azhkar-progress-fill{height:100%;background:linear-gradient(90deg,#7C5CFC,#22c55e);border-radius:2px;transition:width .35s ease}.azhkar-manage-btn{font-size:9px;font-weight:700;letter-spacing:.08em;color:#7c7c94;background:transparent;border:1px solid #252539;border-radius:10px;padding:2px 9px;cursor:pointer;font-family:'JetBrains Mono',monospace;transition:all .2s;margin-left:auto;display:block;margin-top:10px}.azhkar-manage-btn:hover{color:#C4B5FD;border-color:#4F37C2}.azhkar-settings-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid #0f0f1c}.azhkar-settings-row:last-child{border-bottom:none}.azhkar-icon-btn{background:transparent;border:none;cursor:pointer;font-size:11px;padding:2px 4px;border-radius:4px;line-height:1;transition:background .2s}.azhkar-icon-btn:hover{background:rgba(255,255,255,0.06)}.azhkar-edit-row{display:flex;gap:6px;align-items:center;flex:1}.azhkar-input{flex:1;background:#0a0a12;border:1px solid #252539;border-radius:6px;color:#a8a0b8;font-size:12px;padding:4px 10px;font-family:'JetBrains Mono',monospace;outline:none;transition:border-color .2s}.azhkar-input:focus{border-color:#6244E3}.azhkar-save-btn{background:rgba(0,180,100,0.1);border:1px solid #065f46;border-radius:6px;color:#34d399;font-size:12px;cursor:pointer;padding:3px 9px;transition:background .2s}.azhkar-save-btn:hover{background:rgba(0,180,100,0.2)}.azhkar-cancel-btn{background:transparent;border:1px solid #252539;border-radius:6px;color:#7c7c94;font-size:12px;cursor:pointer;padding:3px 9px}.muslim-toggle-row{display:flex;justify-content:space-between;align-items:center;gap:20px}.muslim-switch{position:relative;display:inline-block;width:44px;height:24px}.muslim-switch input{opacity:0;width:0;height:0}.muslim-switch .slider{position:absolute;cursor:pointer;inset:0;background:#252539;transition:.3s;border-radius:24px;border:1px solid #363650}.muslim-switch .slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:2px;background:#7c7c94;transition:.3s;border-radius:50%}.muslim-switch input:checked+.slider{background:rgba(124,92,252,0.3);border-color:#6244E3}.muslim-switch input:checked+.slider:before{transform:translateX(19px);background:#C4B5FD}.brokerage-strip{background:linear-gradient(180deg,#131322 0%,#0d0d18 100%);border:1px solid #252539;border-radius:16px;padding:18px 24px;margin-bottom:24px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;gap:0;align-items:center;position:relative;overflow:hidden}.brokerage-strip::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#A78BFA,#7C5CFC,#ef4444,#22c55e,transparent);opacity:.5}.brk-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 12px}.brk-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:#7c7c94;margin-bottom:6px}.brk-val{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:800;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums;letter-spacing:-.01em;line-height:1.1}.brk-sub{font-size:10px;color:#9090a8;font-family:'JetBrains Mono',monospace;margin-top:4px}.brk-blue{color:#A78BFA}.brk-yellow{color:#7C5CFC}.brk-red{color:#ef4444}.brk-green{color:#22c55e}.brk-divider{width:1px;height:42px;background:linear-gradient(180deg,transparent 0%,#252539 50%,transparent 100%);justify-self:center}.form-group .brokerage-strip{margin-top:6px;margin-bottom:0;padding:14px 16px}.clr-modal{background:linear-gradient(180deg,#131322 0%,#0d0d18 100%);border:1px solid #F59E0B;border-radius:18px;width:100%;max-width:560px;padding:0;position:relative;margin:auto;overflow:hidden}.clr-modal-header{background:linear-gradient(135deg,#1a1a2e 0%,#131322 100%);padding:20px 24px;border-bottom:1px solid #F59E0B;display:flex;align-items:center;gap:12px}.clr-modal-icon{font-size:32px}.clr-modal-title{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;color:#7C5CFC;letter-spacing:.04em}.clr-modal-body{padding:20px 24px}.clr-modal-msg{font-size:14px;color:#e2e8f0;line-height:1.6;margin-bottom:14px}.clr-modal-list{background:#0a0a12;border:1px solid #252539;border-radius:10px;padding:8px;margin-bottom:14px;max-height:280px;overflow-y:auto}.clr-modal-list .checklist-item{margin-bottom:6px;padding:10px 14px}.clr-modal-list .checklist-item:last-child{margin-bottom:0}.clr-modal-rule{font-size:12px;color:#a0a0b0;font-style:italic;line-height:1.5;padding:10px 14px;background:#0a0a12;border-left:3px solid #7C5CFC;border-radius:0 8px 8px 0;margin-bottom:18px}.clr-modal-actions{display:flex;gap:10px}.clr-modal-actions button{flex:1;padding:11px 18px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Rubik',sans-serif;border:none;transition:all .2s}.btn-clr-back{background:#0d0d18;color:#a0a0b0;border:1px solid #252539}.btn-clr-back:hover{background:#1a1a2e;color:#e2e8f0}.btn-clr-proceed{background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);color:#0a0a12}.btn-clr-proceed:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px rgba(34,197,94,0.3)}.btn-clr-proceed:disabled{background:#252539;color:#7c7c94;cursor:not-allowed;transform:none;box-shadow:none}.auth-overlay{position:fixed;inset:0;background:radial-gradient(ellipse at 40% 10%,#1a0e3a 0%,#0a0a12 55%,#020208 100%);z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto}.auth-overlay.hidden{display:none}.auth-bg-grid{position:absolute;left:-20%;right:-20%;bottom:0;height:65%;background-image:linear-gradient(rgba(155,123,255,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(155,123,255,0.07) 1px,transparent 1px);background-size:64px 64px;transform-origin:50% 100%;transform:perspective(600px) rotateX(70deg);mask-image:linear-gradient(to top,rgba(0,0,0,0.5) 0%,transparent 100%);-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0.5) 0%,transparent 100%);pointer-events:none}.auth-bg-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(124,92,252,0.09) 0%,transparent 70%);top:-200px;right:-200px;pointer-events:none}.auth-card{position:relative;width:100%;max-width:440px;background:linear-gradient(180deg,#131322 0%,#0d0d18 100%);border:1px solid #252539;border-radius:24px;padding:40px 36px;box-shadow:0 24px 80px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.04);z-index:1}.auth-card::before{content:'';position:absolute;top:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,rgba(155,123,255,0.5),transparent)}.auth-brand{text-align:center;margin-bottom:32px}.auth-brand .logo{font-family:'Space Grotesk',sans-serif;font-size:36px;font-weight:900;color:#7C5CFC;letter-spacing:.12em;margin-bottom:6px;text-shadow:0 0 30px rgba(124,92,252,0.4)}.auth-brand .tagline{font-size:10px;font-weight:600;letter-spacing:.25em;color:#7c7c94;text-transform:uppercase}.auth-title{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;color:#e2e8f0;margin-bottom:6px;letter-spacing:.04em;text-align:center}.auth-subtitle{font-size:13px;color:#9090a8;margin-bottom:24px;text-align:center}.auth-field{margin-bottom:14px}.auth-field label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:#9090a8;margin-bottom:7px;display:block}.auth-field input{width:100%;background:#0a0a12;border:1px solid #252539;border-radius:10px;padding:12px 14px;color:#e2e8f0;font-family:'JetBrains Mono',monospace;font-size:14px;outline:none;transition:all .2s;font-feature-settings:"zero" 1;font-variant-numeric:slashed-zero}.auth-field input:focus{border-color:#7C5CFC;background:#131322;box-shadow:0 0 0 3px rgba(155,123,255,0.1)}.auth-error{background:#2d0d0d;border:1px solid #991b1b;color:#ef4444;font-size:12px;padding:10px 14px;border-radius:8px;margin-bottom:14px;display:none}.auth-success{background:#0d2d1a;border:1px solid #166534;color:#22c55e;font-size:12px;padding:10px 14px;border-radius:8px;margin-bottom:14px;display:none}.auth-btn{width:100%;background:linear-gradient(135deg,#7C5CFC 0%,#6244E3 100%);color:#ffffff;padding:13px 22px;border-radius:10px;font-weight:700;font-size:14px;border:none;cursor:pointer;font-family:'Rubik',sans-serif;letter-spacing:.04em;transition:all .2s;box-shadow:0 4px 14px rgba(155,123,255,0.25);margin-top:6px}.auth-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 18px rgba(124,92,252,0.45)}.auth-btn:disabled{opacity:.6;cursor:not-allowed}.auth-toggle{text-align:center;margin-top:20px;font-size:13px;color:#9090a8}.auth-toggle a{color:#7C5CFC;cursor:pointer;font-weight:600;text-decoration:none}.auth-toggle a:hover{text-decoration:underline}.auth-divider{display:flex;align-items:center;gap:10px;margin:18px 0;color:#7c7c94;font-size:10px;font-weight:700;letter-spacing:.15em}.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:#252539}.auth-info{font-size:11px;color:#7c7c94;text-align:center;margin-top:18px;line-height:1.6}.otp-modal{background:linear-gradient(180deg,#131322 0%,#0d0d18 100%);border:1px solid #252539;border-radius:20px;width:100%;max-width:440px;padding:0;position:relative;margin:auto;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,0.6)}.otp-modal::before{content:'';position:absolute;top:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,rgba(155,123,255,0.5),transparent)}.otp-header{padding:24px 28px;border-bottom:1px solid #252539;text-align:center}.otp-icon{font-size:36px;margin-bottom:8px}.otp-title{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;color:#7C5CFC;letter-spacing:.04em;margin-bottom:4px}.otp-subtitle{font-size:12px;color:#a0a0b0}.otp-body{padding:24px 28px}.otp-email-display{background:#0a0a12;border:1px solid #252539;border-radius:10px;padding:10px 14px;text-align:center;margin-bottom:18px;font-family:'JetBrains Mono',monospace;font-size:13px;color:#A78BFA;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums}.otp-input-wrap{display:flex;gap:8px;justify-content:center;margin-bottom:16px}.otp-digit{width:46px;height:54px;background:#0a0a12;border:1px solid #252539;border-radius:10px;color:#7C5CFC;font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:800;text-align:center;outline:none;transition:all .15s;font-feature-settings:"zero" 1;font-variant-numeric:slashed-zero}.otp-digit:focus{border-color:#7C5CFC;background:#131322;box-shadow:0 0 0 3px rgba(124,92,252,0.18)}.otp-digit.filled{border-color:#22c55e;color:#22c55e}.otp-timer{text-align:center;font-size:12px;color:#a0a0b0;font-family:'JetBrains Mono',monospace;margin-bottom:14px;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums}.otp-timer.expired{color:#ef4444}.otp-actions{display:flex;gap:10px}.otp-actions button{flex:1;padding:12px 18px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Rubik',sans-serif;border:none;transition:all .2s}.otp-verify{background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);color:#0a0a12}.otp-verify:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px rgba(34,197,94,0.3)}.otp-verify:disabled{opacity:.5;cursor:not-allowed}.otp-cancel{background:transparent;color:#a0a0b0;border:1px solid #252539}.otp-cancel:hover{border-color:#ef4444;color:#ef4444}.otp-resend{display:block;text-align:center;margin-top:14px;font-size:12px;color:#9090a8}.otp-resend a{color:#7C5CFC;cursor:pointer;font-weight:600;text-decoration:none}.otp-resend a.disabled{color:#7c7c94;cursor:not-allowed}.otp-demo-banner{background:#1a1a2e;border:1px solid #5B21B6;border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:11px;color:#7C5CFC;line-height:1.5}.otp-demo-banner code{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:14px;color:#fff;background:#131322;padding:2px 8px;border-radius:5px;letter-spacing:.15em;font-feature-settings:"zero" 1;font-variant-numeric:slashed-zero}.user-pill{background:linear-gradient(135deg,#1a1a2e 0%,#0d0d18 100%);border:1px solid #252539;border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:10px;margin-top:12px}.user-avatar{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#7C5CFC,#4F37C2);color:#0a0a12;display:flex;align-items:center;justify-content:center;font-weight:800;font-family:'Space Grotesk',sans-serif;font-size:14px;flex-shrink:0}.user-info{flex:1;min-width:0}.user-name{font-size:12px;font-weight:600;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-email{font-size:10px;color:#9090a8;font-family:'JetBrains Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logout-btn{background:transparent;border:1px solid #252539;color:#a0a0b0;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:14px;transition:all .2s;flex-shrink:0}.logout-btn:hover{border-color:#ef4444;color:#ef4444}@media(max-width:520px){.auth-card{padding:28px 24px}.otp-digit{width:40px;height:48px;font-size:18px}}.switch{position:relative;display:inline-block;width:46px;height:24px;flex-shrink:0}.switch input{opacity:0;width:0;height:0;position:absolute}.switch .slider{position:absolute;cursor:pointer;inset:0;background:#252539;border-radius:24px;transition:background .25s,border-color .25s;border:1px solid #363650}.switch .slider::before{position:absolute;content:"";height:18px;width:18px;left:2px;top:2px;background:#9090a8;border-radius:50%;transition:transform .25s,background .25s;box-shadow:0 1px 3px rgba(0,0,0,.4)}.switch input:checked+.slider{background:#0d2d1a;border-color:#166534}.switch input:checked+.slider::before{transform:translateX(22px);background:#22c55e}.backtest-banner{background:linear-gradient(135deg,#252539 0%,#1a1a2e 100%);border:1px solid #7C3AED;border-radius:12px;padding:14px 20px;display:flex;align-items:center;gap:14px;margin-bottom:20px;position:relative;overflow:hidden}.backtest-banner::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,#C4B5FD,#6244E3)}.backtest-banner .icon{font-size:22px}.backtest-banner .body{flex:1}.backtest-banner .title{font-size:13px;font-weight:700;color:#C4B5FD;margin-bottom:3px;font-family:'Space Grotesk',sans-serif;letter-spacing:.05em}.backtest-banner .desc{font-size:12px;color:#a0a0b0;line-height:1.5}.mt5-card{background:linear-gradient(135deg,#0d0d18 0%,#1a1a2e 50%,#0a1f12 100%);border:1px solid #166534;border-radius:18px;padding:24px 28px;margin-bottom:20px;position:relative;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.3)}.mt5-card::before{content:'';position:absolute;top:-40%;right:-10%;width:300px;height:300px;background:radial-gradient(circle,rgba(34,197,94,0.08) 0%,transparent 70%);pointer-events:none}.mt5-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;position:relative;flex-wrap:wrap;gap:12px}.mt5-title-block{display:flex;align-items:center;gap:14px}.mt5-title-block .icon{font-size:32px}.mt5-title-block .name{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;color:#22c55e;letter-spacing:.04em}.mt5-title-block .sub{font-size:11px;color:#a0a0b0;margin-top:2px;letter-spacing:.05em}.mt5-status-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:20px;font-size:12px;font-weight:700;font-family:'JetBrains Mono',monospace;letter-spacing:.05em}.mt5-status-pill.connected{background:#0d2d1a;color:#22c55e;border:1px solid #166534}.mt5-status-pill.disconnected{background:#252539;color:#a0a0b0;border:1px solid #363650}.mt5-status-pill.syncing{background:#131322;color:#A78BFA;border:1px solid #5B21B6}.mt5-status-pill.error{background:#2d0d0d;color:#ef4444;border:1px solid #991b1b}.mt5-status-pill .dot{width:8px;height:8px;border-radius:50%;background:currentColor}.mt5-status-pill.syncing .dot{animation:mt5-pulse 1.2s ease-in-out infinite}@keyframes mt5-pulse{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1.2)}}.mt5-info-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;position:relative}.mt5-info-cell{background:rgba(8,8,14,0.5);border:1px solid #252539;border-radius:10px;padding:12px 14px}.mt5-info-cell .lbl{font-size:9px;font-weight:700;letter-spacing:.18em;color:#7c7c94;text-transform:uppercase;margin-bottom:6px}.mt5-info-cell .val{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;color:#e2e8f0;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums;word-break:break-all}.mt5-actions{display:flex;gap:10px;flex-wrap:wrap;position:relative;align-items:center}.mt5-actions .btn-sync{background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);color:#0a0a12;padding:11px 22px;border-radius:10px;font-weight:700;font-size:13px;border:none;cursor:pointer;font-family:'Rubik',sans-serif;transition:all .2s;box-shadow:0 4px 12px rgba(34,197,94,0.25);display:inline-flex;align-items:center;gap:8px}.mt5-actions .btn-sync:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 16px rgba(34,197,94,0.4)}.mt5-actions .btn-sync:disabled{opacity:.5;cursor:not-allowed}.mt5-msg{font-size:12px;color:#a0a0b0;font-family:'JetBrains Mono',monospace;flex:1;min-width:200px}.mt5-msg.error{color:#ef4444}.mt5-msg.success{color:#22c55e}.mt5-toggle-row{display:flex;justify-content:space-between;align-items:center;background:rgba(8,8,14,0.5);border:1px solid #252539;border-radius:10px;padding:10px 16px;margin-top:14px;position:relative}.mt5-toggle-row .label{font-size:13px;color:#e2e8f0;font-weight:600}.mt5-toggle-row .desc{font-size:11px;color:#9090a8;margin-top:2px}.mt5-steps{counter-reset:mstep;display:flex;flex-direction:column;gap:10px;margin-bottom:18px}.mt5-step{counter-increment:mstep;background:#0a0a12;border:1px solid #252539;border-radius:10px;padding:12px 16px 12px 44px;position:relative}.mt5-step::before{content:counter(mstep);position:absolute;left:14px;top:14px;width:22px;height:22px;border-radius:50%;background:#7C5CFC;color:#0a0a12;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;font-family:'JetBrains Mono',monospace}.mt5-step .title{font-size:13px;color:#e2e8f0;font-weight:600;margin-bottom:3px}.mt5-step .desc{font-size:11px;color:#a0a0b0;line-height:1.55}.mt5-step a{color:#A78BFA;text-decoration:none}.mt5-step a:hover{text-decoration:underline}@media(max-width:760px){.mt5-info-row{grid-template-columns:repeat(2,1fr)}.mt5-card-header{flex-direction:column;align-items:flex-start}.mt5-actions{flex-direction:column;align-items:stretch}}.landing-page{position:fixed;inset:0;overflow-y:auto;background:radial-gradient(ellipse at 30% 0%,#1a0e3a 0%,#0a0a12 55%,#020208 100%);z-index:9998}.landing-page.hidden{display:none}.landing-page::before{content:'';position:absolute;left:-20%;right:-20%;bottom:0;height:70%;background-image:linear-gradient(rgba(155,123,255,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(155,123,255,0.07) 1px,transparent 1px);background-size:72px 72px;transform-origin:50% 100%;transform:perspective(700px) rotateX(72deg);mask-image:linear-gradient(to top,rgba(0,0,0,0.55) 0%,transparent 100%);-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0.55) 0%,transparent 100%);pointer-events:none}.landing-page::after{content:'';position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(155,123,255,0.07) 0%,transparent 65%);top:-280px;right:-200px;pointer-events:none}.landing-nav{position:relative;display:flex;justify-content:space-between;align-items:center;padding:22px 48px;border-bottom:1px solid rgba(40,30,70,0.4);z-index:2;backdrop-filter:blur(8px);background:rgba(8,8,14,0.6)}.landing-logo{display:flex;flex-direction:column}.landing-logo .logo-text{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:900;color:#7C5CFC;letter-spacing:.12em;text-shadow:0 0 30px rgba(124,92,252,0.4)}.landing-logo .logo-tag{font-size:9px;font-weight:600;letter-spacing:.25em;color:#7c7c94;text-transform:uppercase;margin-top:2px}.landing-nav-actions{display:flex;gap:12px}.landing-btn-ghost{background:transparent;border:1px solid #252539;color:#a0a0b0;padding:9px 22px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:'Rubik',sans-serif;transition:all .2s}.landing-btn-ghost:hover{border-color:#7C5CFC;color:#7C5CFC}.landing-btn-primary{background:linear-gradient(135deg,#7C5CFC 0%,#6244E3 100%);color:#ffffff;padding:9px 22px;border-radius:10px;font-weight:700;font-size:13px;border:none;cursor:pointer;font-family:'Rubik',sans-serif;transition:all .2s;box-shadow:0 4px 12px rgba(124,92,252,0.25)}.landing-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(124,92,252,0.45)}.landing-hero{position:relative;text-align:center;padding:80px 24px 60px;max-width:920px;margin:0 auto;z-index:2}.hero-badge{display:inline-block;background:#1a1a2e;color:#7C5CFC;border:1px solid #5B21B6;padding:6px 16px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.12em;margin-bottom:28px;text-transform:uppercase;font-family:'JetBrains Mono',monospace}.hero-headline{font-family:'Space Grotesk',sans-serif;font-size:60px;font-weight:900;color:#e2e8f0;line-height:1.05;letter-spacing:-.02em;margin-bottom:24px}.hero-headline .accent{background:linear-gradient(110deg,#818CF8 0%,#A78BFA 35%,#C084FC 65%,#F0ABFC 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.hero-subhead{font-size:18px;color:#a0a0b0;line-height:1.65;max-width:680px;margin:0 auto 38px}.hero-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}.landing-btn-primary-lg{background:linear-gradient(135deg,#7C5CFC 0%,#6244E3 100%);color:#ffffff;padding:16px 34px;border-radius:12px;font-weight:700;font-size:15px;border:none;cursor:pointer;font-family:'Rubik',sans-serif;transition:all .2s;box-shadow:0 6px 18px rgba(124,92,252,0.4);letter-spacing:.02em}.landing-btn-primary-lg:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(155,123,255,0.45)}.landing-btn-ghost-lg{background:transparent;border:1px solid #363650;color:#e2e8f0;padding:16px 34px;border-radius:12px;font-weight:600;font-size:15px;cursor:pointer;font-family:'Rubik',sans-serif;transition:all .2s}.landing-btn-ghost-lg:hover{border-color:#7C5CFC;color:#7C5CFC}.hero-trust{display:flex;justify-content:center;gap:28px;font-size:12px;color:#9090a8;font-weight:500;flex-wrap:wrap}.hero-trust span{display:flex;align-items:center;gap:6px}.hero-preview{position:relative;max-width:1000px;margin:60px auto 0;padding:0 24px;z-index:2}.hero-preview-card{background:linear-gradient(180deg,#131322 0%,#0d0d18 100%);border:1px solid #252539;border-radius:18px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.03)}.hero-preview-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.hp-stat{background:#0a0a12;border:1px solid #252539;border-radius:12px;padding:14px 16px}.hp-stat .lbl{font-size:9px;font-weight:700;letter-spacing:.15em;color:#7c7c94;text-transform:uppercase;margin-bottom:6px}.hp-stat .val{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:800;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums}.hp-bar{height:80px;background:linear-gradient(180deg,rgba(34,197,94,0.05),transparent);border-radius:10px;position:relative;overflow:hidden;border:1px solid #252539}.hp-bar svg{width:100%;height:100%}.landing-features{position:relative;padding:90px 24px 60px;max-width:1120px;margin:0 auto;z-index:2}.section-heading{font-family:'Space Grotesk',sans-serif;font-size:34px;font-weight:700;color:#e2e8f0;text-align:center;margin-bottom:14px;letter-spacing:.02em}.section-sub{font-size:15px;color:#9090a8;text-align:center;margin-bottom:48px}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.feature-card{background:linear-gradient(180deg,#131322 0%,#0d0d18 100%);border:1px solid #252539;border-radius:16px;padding:30px 26px;transition:all .25s ease;position:relative;overflow:hidden}.feature-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#7C5CFC,transparent);opacity:0;transition:opacity .3s}.feature-card:hover{border-color:#7c7c94;transform:translateY(-4px);box-shadow:0 14px 36px rgba(0,0,0,0.45)}.feature-card:hover::after{opacity:.6}.feature-icon{font-size:38px;margin-bottom:18px;display:block}.feature-card h3{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700;color:#7C5CFC;margin-bottom:10px;letter-spacing:.02em}.feature-card p{font-size:14px;color:#a0a0b0;line-height:1.65}.landing-rules{position:relative;padding:60px 24px;max-width:1000px;margin:0 auto;z-index:2}.rules-card{background:linear-gradient(135deg,#0d0d18 0%,#1a1a2e 50%,#131322 100%);border:1px solid #252539;border-radius:20px;padding:40px;position:relative;overflow:hidden}.rules-card::before{content:'';position:absolute;top:-50%;right:-10%;width:400px;height:400px;background:radial-gradient(circle,rgba(124,92,252,0.09) 0%,transparent 70%);pointer-events:none}.rules-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px;position:relative}.rule-block{background:rgba(8,8,14,0.6);border:1px solid #252539;border-radius:12px;padding:18px;display:flex;gap:14px;align-items:flex-start}.rule-block .icon{font-size:22px;flex-shrink:0}.rule-block .body strong{display:block;font-size:14px;color:#7C5CFC;margin-bottom:4px;font-weight:700}.rule-block .body p{font-size:13px;color:#a0a0b0;line-height:1.5;margin:0}.landing-cta-final{position:relative;text-align:center;padding:100px 24px;max-width:720px;margin:0 auto;z-index:2}.landing-cta-final h2{font-family:'Space Grotesk',sans-serif;font-size:38px;font-weight:700;color:#e2e8f0;margin-bottom:18px;letter-spacing:.02em;line-height:1.15}.landing-cta-final p{font-size:16px;color:#a0a0b0;margin-bottom:32px;line-height:1.6}.landing-footer{position:relative;padding:32px 48px;border-top:1px solid rgba(40,30,70,0.5);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#7c7c94;flex-wrap:wrap;gap:12px;z-index:2}.landing-footer-links{display:flex;gap:20px;flex-wrap:wrap}.landing-footer-links span{display:flex;align-items:center;gap:6px}.auth-back-link{position:absolute;top:18px;left:20px;font-size:12px;color:#9090a8;cursor:pointer;font-family:'Rubik',sans-serif;display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:8px;transition:all .2s;background:transparent;border:none;z-index:5}.auth-back-link:hover{color:#7C5CFC;background:rgba(124,92,252,0.09)}@media(max-width:760px){.landing-nav{padding:16px 20px}.landing-nav-actions{gap:8px}.landing-btn-ghost,.landing-btn-primary{padding:8px 14px;font-size:12px}.hero-headline{font-size:36px}.hero-subhead{font-size:15px}.features-grid{grid-template-columns:1fr}.rules-grid{grid-template-columns:1fr}.rules-card{padding:24px}.hero-preview-stats{grid-template-columns:repeat(2,1fr)}.section-heading{font-size:26px}.landing-cta-final h2{font-size:28px}.landing-cta-final{padding:60px 24px}.landing-footer{padding:24px 20px;flex-direction:column;text-align:center}.landing-hero{padding:50px 20px 40px}}.wr-card{grid-column:span 1;display:flex;flex-direction:column;gap:0}.wr-inner{display:flex;align-items:center;gap:20px}.wr-ring-wrap{position:relative;flex-shrink:0;width:80px;height:80px}.wr-ring-wrap svg{transform:rotate(-90deg)}.wr-ring-bg{fill:none;stroke:#252539;stroke-width:7}.wr-ring-fill{fill:none;stroke-width:7;stroke-linecap:round;stroke-dasharray:220;stroke-dashoffset:220;transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1),stroke .4s}.wr-ring-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:800;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums}.wr-details{flex:1;display:flex;flex-direction:column;gap:8px}.wr-row{display:flex;align-items:center;gap:8px}.wr-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.wr-lbl{font-size:11px;color:#9090a8;flex:1;font-family:'Rubik',sans-serif}.wr-num{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;font-feature-settings:"zero" 1,"tnum" 1}.wr-bar-track{height:5px;background:#252539;border-radius:4px;margin-top:10px;overflow:hidden}.wr-bar-fill{height:100%;border-radius:4px;transition:width .8s cubic-bezier(.4,0,.2,1)}
/* Prayer Times — vertical layout */
.prayer-list{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.prayer-row{display:flex;align-items:center;gap:14px;border-radius:12px;padding:12px 16px;border:1px solid #252539;background:#0a0a12;transition:all .22s;position:relative;overflow:hidden;flex-wrap:wrap}
.prayer-row::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:transparent;border-radius:12px 0 0 12px;transition:background .22s}
.prayer-row.passed{opacity:.3;padding:7px 16px;background:transparent}
.prayer-row.current{border-color:#5B21B6;background:rgba(13,10,34,0.95)}
.prayer-row.current::before{background:#7C5CFC}
.prayer-row.next-up{border-color:#166534;background:rgba(10,31,18,0.95)}
.prayer-row.next-up::before{background:#22c55e}
.pr-icon{font-size:22px;flex-shrink:0;width:30px;text-align:center}
.pr-name{font-family:'Rubik',sans-serif;font-size:14px;font-weight:700;color:#e2e8f0;min-width:64px}
.prayer-row.passed .pr-name{color:#7c7c94}
.prayer-row.current .pr-name{color:#C4B5FD}
.prayer-row.next-up .pr-name{color:#4ade80}
.pr-times{display:flex;flex-direction:column;gap:2px;flex:1}
.pr-azan{font-family:'JetBrains Mono',monospace;font-size:17px;font-weight:800;color:#e2e8f0;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums;letter-spacing:.01em}
.prayer-row.passed .pr-azan{font-size:13px;font-weight:600;color:#7c7c94}
.prayer-row.current .pr-azan{color:#C4B5FD}
.prayer-row.next-up .pr-azan{color:#4ade80}
.pr-iqamah{font-size:11px;color:#2a4060;font-family:'JetBrains Mono',monospace}
.pr-iqamah b{color:#4a7090;font-weight:600}
.prayer-row.passed .pr-iqamah{display:none}
.pr-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:80px}
.pr-status{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-family:'JetBrains Mono',monospace;color:#7c7c94}
.prayer-row.current .pr-status{color:#C4B5FD}
.prayer-row.next-up .pr-status{color:#22c55e}
.pr-countdown{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:#22c55e;background:#0d2d1a;border:1px solid #166534;border-radius:8px;padding:3px 9px;white-space:nowrap;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums}
.pr-quote{width:100%;padding:8px 12px;background:rgba(255,255,255,0.025);border-radius:8px;margin-top:2px;font-size:12px;color:#9090a8;line-height:1.6;font-family:'Rubik',sans-serif;border-left:2px solid #363650}
.prayer-row.current .pr-quote{color:#8892aa;border-left-color:#7C5CFC;background:rgba(124,92,252,0.06)}
.prayer-row.next-up .pr-quote{color:#4a8060;border-left-color:#22c55e;background:rgba(34,197,94,0.05)}
.prayer-location-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-size:11px;color:#7c7c94;font-family:'JetBrains Mono',monospace;flex-wrap:wrap;gap:6px}
.prayer-loc-badge{display:flex;align-items:center;gap:6px}
.prayer-method-note{font-size:10px;color:#2a4060}
.prayer-refresh-btn{background:transparent;border:1px solid #252539;color:#7c7c94;border-radius:8px;font-size:10px;padding:3px 10px;cursor:pointer;font-family:'JetBrains Mono',monospace;transition:all .2s}
.prayer-refresh-btn:hover{border-color:#7C5CFC;color:#7C5CFC}
.prayer-error-msg{text-align:center;padding:20px;color:#9090a8;font-size:13px}
.prayer-loading{text-align:center;padding:20px;color:#7c7c94;font-size:12px;font-family:'JetBrains Mono',monospace}
@keyframes prayer-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(124,92,252,0.3)}50%{transform:scale(1.07);box-shadow:0 0 0 14px rgba(124,92,252,0)}}
/* ===== Pre-Trade Flow — Institutional Style ===== */
.ptf-stepper{display:flex;align-items:center;gap:8px;padding:12px 0 18px;border-bottom:1px solid #252539;margin-bottom:18px;}
.ptf-step{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0;}
.ptf-step-num{width:30px;height:30px;border-radius:50%;background:#0d0d18;border:2px solid #252539;color:#7c7c94;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;transition:all .3s;}
.ptf-step-label{font-size:10px;color:#7c7c94;text-transform:uppercase;font-weight:700;letter-spacing:.06em;font-family:'Rubik',sans-serif;}
.ptf-step-active .ptf-step-num{background:linear-gradient(135deg,#7C5CFC,#6244E3);border-color:#7C5CFC;color:#fff;box-shadow:0 0 14px rgba(124,92,252,0.45);}
.ptf-step-active .ptf-step-label{color:#C4B5FD;}
.ptf-step-done .ptf-step-num{background:#0a2818;border-color:#166534;color:#22c55e;}
.ptf-step-done .ptf-step-label{color:#4ade80;}
.ptf-step-line{flex:1;height:2px;background:#252539;border-radius:2px;min-width:20px;}
.ptf-step-line-done{background:linear-gradient(90deg,#22c55e,#166534);}
.ptp-risk-card{background:linear-gradient(135deg,#1a1a2e,#08071a);border:1px solid #363650;border-radius:12px;padding:14px 16px;margin-bottom:18px;}
.ptp-risk-title{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;color:#7C5CFC;letter-spacing:.08em;margin-bottom:10px;}
.ptp-risk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.ptp-risk-stat{background:#0a0a12;border:1px solid #252539;border-radius:8px;padding:8px 10px;}
.ptp-risk-stat-lbl{font-size:9px;color:#9090a8;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;font-family:'Rubik',sans-serif;}
.ptp-risk-stat-val{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;color:#e2e8f0;}
@media(max-width:540px){.ptp-risk-grid{grid-template-columns:repeat(2,1fr);}}
.ptp-loss-options{display:flex;flex-direction:column;gap:7px;}
.ptp-loss-option{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:#0a0a12;border:1px solid #252539;border-radius:9px;cursor:pointer;transition:all .15s;}
.ptp-loss-option:hover{border-color:#7C5CFC;background:#0d0d18;}
.ptp-loss-option input[type=radio]{margin-top:3px;accent-color:#7C5CFC;cursor:pointer;flex-shrink:0;}
.ptp-loss-option input[type=radio]:checked ~ .ptp-loss-opt-body .ptp-loss-opt-title{color:#C4B5FD;}
.ptp-loss-option:has(input:checked){border-color:#7C5CFC;background:linear-gradient(135deg,#1a1a2e,#08071a);box-shadow:0 0 0 1px rgba(124,92,252,0.3) inset;}
.ptp-loss-opt-body{flex:1;min-width:0;}
.ptp-loss-opt-title{font-size:13px;color:#e2e8f0;font-weight:600;line-height:1.4;margin-bottom:2px;font-family:'Rubik',sans-serif;}
.ptp-loss-opt-desc{font-size:11px;color:#9090a8;line-height:1.5;}
.ptf-plan-summary{background:linear-gradient(135deg,#0a1f12,#08120a);border:1px solid #166534;border-radius:10px;padding:12px 14px;margin-bottom:14px;}
.ptf-plan-summary-title{font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;color:#22c55e;letter-spacing:.06em;margin-bottom:8px;}
.ptf-plan-summary-row{font-size:12px;color:#c0d0e0;line-height:1.6;margin-bottom:4px;display:flex;gap:6px;}
.ptf-plan-summary-row:last-child{margin-bottom:0;}
.ptf-plan-lbl{color:#9090a8;font-weight:700;text-transform:uppercase;font-size:10px;letter-spacing:.04em;flex-shrink:0;padding-top:2px;}
.ptf-plan-lbl-red{color:#ef4444;}
.ptf-plan-val{flex:1;word-break:break-word;}
.ptf-strength{margin:14px 0;padding:12px 14px;background:#0a0a12;border:1px solid #252539;border-radius:10px;}
.ptf-strength-label{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#9090a8;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;font-family:'Rubik',sans-serif;}
.ptf-strength-bar{height:8px;background:#0d0d18;border:1px solid #252539;border-radius:6px;overflow:hidden;margin-bottom:8px;}
.ptf-strength-fill{height:100%;background:linear-gradient(90deg,#ef4444 0%,#fbbf24 50%,#22c55e 100%);width:0%;transition:width .35s ease;border-radius:6px;}
.ptf-strength-verdict{font-size:11px;color:#9090a8;text-align:center;font-style:italic;}
/* ===== Trader's Commitment Attestation (Step 2 institutional sign-off) ===== */
.trader-commitment-box{background:linear-gradient(180deg,#131322 0%,#080f1c 100%);border:1px solid #5B21B6;border-radius:12px;padding:14px 16px;margin:14px 0;position:relative;overflow:hidden;transition:border-color .25s, box-shadow .25s;}
.trader-commitment-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#A78BFA,transparent);opacity:.6;}
.trader-commitment-box.signed{border-color:#166534;background:linear-gradient(180deg,#0d2d1a 0%,#0a1f12 100%);box-shadow:0 0 0 1px rgba(34,197,94,0.15) inset, 0 4px 14px rgba(34,197,94,0.1);}
.trader-commitment-box.signed::before{background:linear-gradient(90deg,transparent,#22c55e,transparent);opacity:1;}
.trader-commitment-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed rgba(167,139,250,0.18);}
.trader-commitment-box.signed .trader-commitment-header{border-bottom-color:rgba(34,197,94,0.25);}
.trader-commitment-title{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;color:#A78BFA;}
.trader-commitment-box.signed .trader-commitment-title{color:#22c55e;}
.trader-commitment-sub{font-size:10px;color:#9090a8;margin-top:2px;}
.trader-commitment-row{display:flex;align-items:flex-start;gap:11px;cursor:pointer;user-select:none;padding:4px 0;}
.trader-commitment-text{font-size:12.5px;color:#c0d0e0;line-height:1.65;}
.trader-commitment-text b{color:#e2e8f0;}
.trader-commitment-box.signed .trader-commitment-text{color:#a7d4b1;}
.trader-commitment-box.signed .trader-commitment-text b{color:#22c55e;}
/* ===== Trade Notebook (paper page style) ===== */
.notebook-page{position:relative;border-radius:14px;padding:18px 20px 16px;overflow:hidden;transition:transform .25s ease, box-shadow .25s ease, border-color .2s;background:linear-gradient(180deg,#0a0820 0%,#060514 100%);border:1px solid #252539;box-shadow:0 6px 24px rgba(0,0,0,0.4),0 1px 0 rgba(124,92,252,0.08) inset;}
.notebook-page::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#7C5CFC,transparent);opacity:.5;}
.notebook-page::after{content:'';position:absolute;left:34px;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(239,68,68,0.18) 10%,rgba(239,68,68,0.18) 90%,transparent);pointer-events:none;}
.notebook-page.color-purple{background:linear-gradient(180deg,#0f0a26 0%,#080614 100%);border-color:#7c7c94;}
.notebook-page.color-yellow{background:linear-gradient(180deg,#1f1a08 0%,#120e04 100%);border-color:#4a3c1a;}
.notebook-page.color-yellow::before{background:linear-gradient(90deg,transparent,#fbbf24,transparent);}
.notebook-page.color-green{background:linear-gradient(180deg,#0a1f12 0%,#04120a 100%);border-color:#166534;}
.notebook-page.color-green::before{background:linear-gradient(90deg,transparent,#22c55e,transparent);}
.notebook-page.color-red{background:linear-gradient(180deg,#1f0a12 0%,#12040a 100%);border-color:#7a1a30;}
.notebook-page.color-red::before{background:linear-gradient(90deg,transparent,#ef4444,transparent);}
.notebook-page.color-blue{background:linear-gradient(180deg,#0a121f 0%,#020208 100%);border-color:#5B21B6;}
.notebook-page.color-blue::before{background:linear-gradient(90deg,transparent,#8B5CF6,transparent);}
.notebook-page:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,0.55),0 1px 0 rgba(124,92,252,0.15) inset;border-color:#7C5CFC;}
.notebook-page.color-yellow:hover{border-color:#fbbf24;}
.notebook-page.color-green:hover{border-color:#22c55e;}
.notebook-page.color-red:hover{border-color:#ef4444;}
.notebook-page.color-blue:hover{border-color:#8B5CF6;}
.np-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;padding-left:24px;}
.np-title{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;color:#e8efff;letter-spacing:.03em;line-height:1.4;word-break:break-word;flex:1;min-width:0;}
.color-yellow .np-title{color:#fde68a;}
.color-green .np-title{color:#86efac;}
.color-red .np-title{color:#fca5a5;}
.color-blue .np-title{color:#DDD6FE;}
.np-meta{padding-left:24px;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.np-date{font-family:'JetBrains Mono',monospace;font-size:10px;color:#7c7c94;letter-spacing:.04em;}
.np-trade-pill{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px;background:rgba(124,92,252,0.12);color:#C4B5FD;border:1px solid rgba(124,92,252,0.3);cursor:pointer;transition:all .15s;}
.np-trade-pill:hover{background:rgba(124,92,252,0.25);}
.np-content{padding-left:24px;font-size:13px;color:#c0d0e0;line-height:1.9;white-space:pre-wrap;word-wrap:break-word;background-image:repeating-linear-gradient(transparent 0,transparent calc(1.9em - 1px),rgba(124,92,252,0.08) calc(1.9em - 1px),rgba(124,92,252,0.08) 1.9em);max-height:240px;overflow-y:auto;font-family:'Rubik',sans-serif;}
.np-content.collapsed{max-height:160px;mask-image:linear-gradient(180deg,#000 70%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);}
.np-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:12px;padding-top:10px;border-top:1px dashed rgba(124,92,252,0.15);}
.np-action-btn{background:transparent;border:1px solid #252539;color:#9090a8;padding:5px 10px;border-radius:6px;font-size:11px;cursor:pointer;font-family:'Rubik',sans-serif;transition:all .15s;}
.np-action-btn:hover{color:#e2e8f0;border-color:#7C5CFC;background:rgba(124,92,252,0.08);}
.np-action-btn.danger:hover{color:#ef4444;border-color:#ef4444;background:rgba(239,68,68,0.08);}
/* Note image in card (preview thumb) */
.np-image-wrap{padding-left:24px;margin:4px 0 12px;}
.np-image{display:block;max-width:100%;max-height:260px;width:auto;height:auto;border-radius:10px;border:1px solid rgba(124,92,252,0.28);cursor:zoom-in;background:#000;transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;object-fit:contain;image-rendering:-webkit-optimize-contrast;}
.np-image:hover{transform:scale(1.015);border-color:#7C5CFC;box-shadow:0 6px 18px rgba(124,92,252,0.25);}
.color-yellow .np-image{border-color:rgba(251,191,36,0.3);} .color-yellow .np-image:hover{border-color:#fbbf24;}
.color-green  .np-image{border-color:rgba(34,197,94,0.3);}  .color-green  .np-image:hover{border-color:#22c55e;}
.color-red    .np-image{border-color:rgba(239,68,68,0.3);}  .color-red    .np-image:hover{border-color:#ef4444;}
.color-blue   .np-image{border-color:rgba(139,92,246,0.3);} .color-blue   .np-image:hover{border-color:#8B5CF6;}
/* Composer photo row */
.np-composer-img-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.np-composer-img-preview{position:relative;width:96px;height:96px;border-radius:10px;overflow:hidden;border:1px solid #363650;background:#0a0820;display:none;}
.np-composer-img-preview img{width:100%;height:100%;object-fit:cover;display:block;}
.np-composer-img-remove{position:absolute;top:3px;right:3px;background:rgba(0,0,0,0.75);color:#fca5a5;border:1px solid rgba(239,68,68,0.6);border-radius:50%;width:22px;height:22px;line-height:1;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;padding:0;}
.np-composer-img-remove:hover{color:#ef4444;border-color:#ef4444;background:rgba(0,0,0,0.9);}
/* Image lightbox (popup) */
.np-lightbox{position:fixed;inset:0;background:rgba(0,0,0,0.92);z-index:99999;display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out;animation:npLightboxIn .15s ease-out;}
.np-lightbox img{max-width:95vw;max-height:92vh;width:auto;height:auto;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,0.7);cursor:default;display:block;image-rendering:-webkit-optimize-contrast;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);}
.np-lightbox-close{position:absolute;top:18px;right:22px;background:rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.22);color:#fff;font-size:18px;width:42px;height:42px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-family:inherit;}
.np-lightbox-close:hover{border-color:#ef4444;color:#ef4444;background:rgba(0,0,0,0.85);}
@keyframes npLightboxIn{from{opacity:0}to{opacity:1}}
.note-color-chip{transition:transform .15s, box-shadow .15s;}
.note-color-chip:hover{transform:scale(1.15);}
.note-color-chip.active{box-shadow:0 0 0 2px #e2e8f0;transform:scale(1.1);}
@media(max-width:560px){#notebookFeed{grid-template-columns:1fr!important;}}
/* ===== QURAN SURAH LIST (Greentech-style index) ===== */
.qrn-filter-tab{
  background:#0a0a12;border:1px solid #252539;color:#9090a8;
  padding:6px 13px;border-radius:20px;font-size:11px;font-weight:600;
  cursor:pointer;font-family:'Rubik',sans-serif;letter-spacing:.02em;
  transition:all .18s;
}
.qrn-filter-tab:hover{border-color:#4F37C2;color:#A78BFA;background:#0d0d18;}
.qrn-filter-tab.active{
  background:linear-gradient(135deg,rgba(124,92,252,0.15),rgba(98,68,227,0.08));
  border-color:#7C5CFC;color:#C4B5FD;
  box-shadow:0 0 0 1px rgba(124,92,252,0.2);
}

/* Surah list container — constrain on desktop, custom scrollbar */
#quranSurahList{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  max-height:560px;
  overflow-y:auto;
  padding:4px 4px 4px 0;
  margin-right:-4px;
  max-width:760px;
  width:100%;
}
#quranSurahList::-webkit-scrollbar{width:6px;}
#quranSurahList::-webkit-scrollbar-track{background:transparent;}
#quranSurahList::-webkit-scrollbar-thumb{background:#252539;border-radius:4px;}
#quranSurahList::-webkit-scrollbar-thumb:hover{background:#363650;}

/* Each surah row — high-specificity, all properties locked in */
#quranSurahList .qrn-surah-row{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  background:linear-gradient(180deg,#0f0d1f 0%,#0a0815 100%) !important;
  border:1px solid #2a2640 !important;
  border-radius:12px !important;
  padding:12px 16px !important;
  min-height:64px !important;
  cursor:pointer;
  transition:transform .15s, border-color .18s, background .18s, box-shadow .18s;
  user-select:none;
  position:relative;
  overflow:hidden;
  width:100%;
  box-sizing:border-box;
  box-shadow:0 2px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.025);
}
#quranSurahList .qrn-surah-row::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#7C5CFC,#4F37C2);
  opacity:0;transition:opacity .2s;
}
#quranSurahList .qrn-surah-row:hover{
  border-color:#7C5CFC !important;
  background:linear-gradient(180deg,#14112a 0%,#0d0b1e 100%) !important;
  transform:translateX(2px);
  box-shadow:0 4px 14px rgba(124,92,252,0.18), inset 0 1px 0 rgba(255,255,255,0.04);
}
#quranSurahList .qrn-surah-row:hover::before{opacity:1;}
#quranSurahList .qrn-surah-row:active{transform:translateX(0);}
#quranSurahList .qrn-surah-row.last-read{
  border-color:rgba(167,139,250,0.55) !important;
  background:linear-gradient(180deg,#150f28 0%,#0e0a1d 100%) !important;
}
#quranSurahList .qrn-surah-row.last-read::before{
  opacity:1;
  background:linear-gradient(180deg,#A78BFA,#7C5CFC);
}

/* Number badge — simple rounded square */
#quranSurahList .qrn-surah-row .qrn-num{
  flex-shrink:0;
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;
  font-size:13px;font-weight:800;
  color:#A78BFA;
  background:linear-gradient(135deg,#1c1535 0%,#100b22 100%);
  border:1px solid #322a4d;
  border-radius:10px;
  letter-spacing:-.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
#quranSurahList .qrn-surah-row:hover .qrn-num{
  color:#C4B5FD;
  background:linear-gradient(135deg,#251c44 0%,#150f28 100%);
  border-color:#4F37C2;
}

/* Middle column: English name + meta */
#quranSurahList .qrn-surah-row .qrn-mid{
  flex:1 1 auto;
  min-width:0;
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
  overflow:hidden;
}
#quranSurahList .qrn-surah-row .qrn-name-en{
  font-family:'Rubik',sans-serif;
  font-size:14px;font-weight:600;color:#e2e8f0;letter-spacing:.01em;
  line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#quranSurahList .qrn-surah-row .qrn-name-en .qrn-meaning{
  color:#9090a8;font-weight:400;font-size:12.5px;margin-left:6px;
}
#quranSurahList .qrn-surah-row .qrn-meta{
  font-size:10.5px;color:#7c7c94;font-family:'JetBrains Mono',monospace;
  display:flex;align-items:center;gap:8px;
  line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#quranSurahList .qrn-surah-row .qrn-meta .qrn-dot{color:#7c7c94;}
#quranSurahList .qrn-surah-row .qrn-meta .qrn-type-meccan{color:#fbbf24;font-weight:600;}
#quranSurahList .qrn-surah-row .qrn-meta .qrn-type-medinan{color:#4ade80;font-weight:600;}

/* Right side: Arabic name */
#quranSurahList .qrn-surah-row .qrn-arabic{
  flex-shrink:0;
  font-size:24px;font-weight:600;line-height:1.2;direction:rtl;
  font-family:'Amiri Quran','me_quran','UthmanicMushaf','Noto Naskh Arabic','Scheherazade New',serif;
  background:linear-gradient(135deg,#f0c060 0%,#e8a020 40%,#ffd580 80%,#c88010 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 1px 2px rgba(200,128,16,0.3));
  padding:2px 4px;
  max-width:180px;
  text-align:right;
}

/* Mobile adjustments */
@media(max-width:520px){
  #quranSurahList{max-height:62vh;}
  #quranSurahList .qrn-surah-row{padding:10px 12px !important;gap:10px !important;min-height:58px !important;}
  #quranSurahList .qrn-surah-row .qrn-num{width:36px;height:36px;font-size:12px;}
  #quranSurahList .qrn-surah-row .qrn-name-en{font-size:13px;}
  #quranSurahList .qrn-surah-row .qrn-name-en .qrn-meaning{display:none;}
  #quranSurahList .qrn-surah-row .qrn-arabic{font-size:20px;max-width:120px;}
  #quranSurahList .qrn-surah-row .qrn-meta{font-size:10px;gap:6px;}
}

/* Empty state */
.qrn-list-empty{
  text-align:center;padding:30px 20px;color:#7c7c94;
  font-family:'JetBrains Mono',monospace;font-size:12px;
}

/* ===== SURAH READER MODAL — fullscreen on mobile ===== */
@media(max-width:760px){
  #surahReaderOverlay{
    padding:0 !important;
    align-items:stretch !important;
  }
  #surahReaderOverlay > div{
    max-width:none !important;
    width:100% !important;
    min-height:100vh !important;
    height:100vh !important;
    border-radius:0 !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
  }
  /* Body takes all remaining height; max-height removed */
  #surahReaderOverlay #srModalBody{
    flex:1 1 auto !important;
    max-height:none !important;
    height:auto !important;
  }
}
.ayah-row{padding:18px 0;border-bottom:1px solid #0f0f1c;display:flex;flex-direction:column;gap:8px;}
.ayah-row:last-child{border-bottom:none;}
.ayah-num{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:#473d5e;min-width:28px;background:#0a0820;border:1px solid #252539;border-radius:50%;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.ayah-arabic{font-size:34px;color:#e8efff;line-height:2.6;direction:rtl;text-align:right;font-family:'me_quran','UthmanicMushaf','Amiri Quran','Noto Naskh Arabic','Scheherazade New','Traditional Arabic','Amiri',serif;font-weight:400;letter-spacing:0;word-spacing:.05em;font-feature-settings:"liga" 1,"calt" 1,"kern" 1;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}
.ayah-trans{font-size:13px;color:#90a8b8;line-height:1.8;font-family:'Rubik',sans-serif;padding-top:8px;border-top:1px dashed #1a1a2e;}
/* ---- Tajweed colour rules (AlQuran.cloud quran-tajweed edition) ---- */
.ayah-arabic tajweed,.ayah-arabic rule{display:inline;}
/* Hamzat Al Wasl & silent letters — grey */
.ayah-arabic tajweed.ham_wasl,.ayah-arabic rule.ham_wasl,
.ayah-arabic tajweed.slnt,.ayah-arabic rule.slnt,
.ayah-arabic tajweed.slnt_w,.ayah-arabic rule.slnt_w,
.ayah-arabic tajweed.laam_shamsiyah,.ayah-arabic rule.laam_shamsiyah,
.ayah-arabic tajweed.idgham_mutajanisayn,.ayah-arabic rule.idgham_mutajanisayn,
.ayah-arabic tajweed.idgham_mutaqaribayn,.ayah-arabic rule.idgham_mutaqaribayn{color:#888;}
/* Madd (prolongation) — blue family */
.ayah-arabic tajweed.madda_normal,.ayah-arabic rule.madda_normal{color:#5a8dff;}
.ayah-arabic tajweed.madda_permissible,.ayah-arabic rule.madda_permissible{color:#3060ff;}
.ayah-arabic tajweed.madda_necessary,.ayah-arabic rule.madda_necessary{color:#0040d0;}
.ayah-arabic tajweed.madda_obligatory,.ayah-arabic rule.madda_obligatory{color:#1a4dc4;}
/* Qalqalah — red */
.ayah-arabic tajweed.qalaqah,.ayah-arabic rule.qalaqah,
.ayah-arabic tajweed.qalqala,.ayah-arabic rule.qalqala{color:#ff3838;font-weight:700;}
/* Ikhfa — purple */
.ayah-arabic tajweed.ikhafa_shafawi,.ayah-arabic rule.ikhafa_shafawi{color:#d040d0;}
.ayah-arabic tajweed.ikhafa,.ayah-arabic rule.ikhafa{color:#a040c0;}
/* Iqlab — cyan */
.ayah-arabic tajweed.iqlab,.ayah-arabic rule.iqlab{color:#26bffd;}
/* Idgham — green */
.ayah-arabic tajweed.idgham_shafawi,.ayah-arabic rule.idgham_shafawi{color:#5ec85e;}
.ayah-arabic tajweed.idgham_ghunnah,.ayah-arabic rule.idgham_ghunnah{color:#2bb02b;}
.ayah-arabic tajweed.idgham_wo_ghunnah,.ayah-arabic rule.idgham_wo_ghunnah{color:#2bb02b;}
/* Ghunnah — orange */
.ayah-arabic tajweed.ghunnah,.ayah-arabic rule.ghunnah{color:#ff8c1e;}
/* Tajweed legend chips */
.tajweed-legend{background:#0a0a12;border:1px solid #252539;border-radius:10px;padding:10px 12px;margin-bottom:14px;}
.tajweed-legend-title{font-size:10px;font-weight:700;color:#9090a8;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;font-family:'Rubik',sans-serif;}
.tajweed-legend-grid{display:flex;flex-wrap:wrap;gap:6px;}
.tajweed-chip{font-size:10px;padding:3px 8px;border-radius:6px;background:#0d0d18;border:1px solid #252539;font-family:'Rubik',sans-serif;}
.tajweed-chip .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle;}
/* Speed slider */
.sr-speed-slider{-webkit-appearance:none;appearance:none;width:130px;height:5px;background:#252539;border-radius:5px;outline:none;cursor:pointer;}
.sr-speed-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#7C5CFC,#6244E3);border:2px solid #fff;cursor:pointer;box-shadow:0 2px 8px rgba(124,92,252,.5);}
.sr-speed-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#7C5CFC,#6244E3);border:2px solid #fff;cursor:pointer;box-shadow:0 2px 8px rgba(124,92,252,.5);}
.sr-speed-slider::-webkit-slider-runnable-track{background:linear-gradient(90deg,#7C5CFC 0%,#7C5CFC var(--fill,50%),#252539 var(--fill,50%));height:5px;border-radius:5px;}

/* ============================================================
   MODERN QURAN READER — dark, mobile-app style
   Replaces the cream/paper mushaf design with a clean dark UI
   that matches the rest of TraderCab. Arabic-only (no translation).
   ============================================================ */
.quran-modern{
  background:transparent !important;
  color:#e2e8f0;
  padding:0 !important;
}
.qm-wrapper{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:4px 0 60px;
}

/* ---- Surah header card ---- */
.qm-surah-head{
  text-align:center;
  padding:22px 18px 22px;
  margin-bottom:14px;
  background:linear-gradient(180deg,rgba(124,92,252,0.10) 0%,rgba(124,92,252,0.02) 80%,transparent 100%);
  border-bottom:1px solid rgba(124,92,252,0.18);
  position:relative;
}
.qm-surah-head::before,
.qm-surah-head::after{
  content:'';position:absolute;top:50%;height:1px;width:48px;
  background:linear-gradient(90deg,transparent,rgba(124,92,252,0.5),transparent);
  transform:translateY(-50%);
}
.qm-surah-head::before{ left:8px; }
.qm-surah-head::after { right:8px; }
.qm-surah-ar{
  font-family:'Amiri Quran','me_quran','UthmanicMushaf','Noto Naskh Arabic','Scheherazade New',serif;
  font-size:38px;
  line-height:1.3;
  direction:rtl;
  background:linear-gradient(135deg,#f0c060 0%,#e8a020 40%,#ffd580 80%,#c88010 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 6px rgba(200,128,16,0.35));
  margin-bottom:8px;
  font-weight:600;
  letter-spacing:.01em;
}
.qm-surah-en{
  font-family:'Space Grotesk',sans-serif;
  font-size:14px;font-weight:700;
  color:#C4B5FD;
  letter-spacing:.06em;
  margin-bottom:6px;
}
.qm-surah-mean{
  color:#9090a8;font-weight:400;letter-spacing:.02em;
  font-family:'Rubik',sans-serif;font-size:13px;
}
.qm-surah-meta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:10.5px;color:#9090a8;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.05em;
}
.qm-surah-meta .qm-meta-dot{color:#7c7c94;}
.qm-surah-meta .qm-type{font-weight:700;}
.qm-surah-meta .qm-type-meccan{color:#fbbf24;}
.qm-surah-meta .qm-type-medinan{color:#4ade80;}

/* ---- Bismillah ---- */
.qm-bismillah{
  text-align:center;
  font-family:'Amiri Quran','me_quran','UthmanicMushaf','Noto Naskh Arabic','Scheherazade New',serif;
  font-size:34px;
  line-height:1.7;
  direction:rtl;
  padding:18px 16px 22px;
  margin:0 0 12px;
  background:linear-gradient(135deg,#f0c060 0%,#e8a020 40%,#ffd580 80%,#c88010 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 4px rgba(200,128,16,0.3));
  font-weight:500;
  letter-spacing:.01em;
  font-feature-settings:'liga' 1,'calt' 1,'kern' 1;
  position:relative;
}
.qm-bismillah::after{
  content:'';position:absolute;left:50%;bottom:6px;
  width:48px;height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(232,160,32,0.5),transparent);
}

/* ---- Ayah card ---- */
.qm-ayah{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px 18px;
  margin:0 2px 6px;
  background:transparent;
  border-radius:12px;
  border-bottom:1px solid rgba(124,92,252,0.06);
  transition:background .2s, border-color .2s;
}
.qm-ayah:last-child{border-bottom:none;}
.qm-ayah:hover{
  background:linear-gradient(90deg,rgba(124,92,252,0.04),transparent);
}

/* Ayah number badge — circular with subtle glow */
.qm-ayah-badge{
  flex-shrink:0;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,#1c1535 0%,#100b22 100%);
  border:1px solid #4F37C2;
  color:#C4B5FD;
  border-radius:50%;
  font-family:'Amiri Quran','me_quran','Scheherazade New',serif;
  font-size:14px;font-weight:700;
  line-height:1;
  box-shadow:0 0 0 1px rgba(124,92,252,0.15), inset 0 1px 0 rgba(255,255,255,0.04);
  margin-top:14px;
  direction:rtl;
}

/* Arabic ayah text */
.qm-ayah-text{
  flex:1;
  font-family:'Amiri Quran','me_quran','UthmanicMushaf','Noto Naskh Arabic','Scheherazade New','Traditional Arabic','Amiri',serif;
  font-size:30px;
  line-height:2.4;
  color:#f5efe0;
  direction:rtl;
  text-align:right;
  letter-spacing:0;
  word-spacing:.04em;
  font-weight:400;
  font-feature-settings:'liga' 1,'calt' 1,'kern' 1;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  min-width:0;
}

/* Tajweed colours — bright for dark background */
.qm-ayah-text tajweed,
.qm-ayah-text rule{display:inline;}
.qm-ayah-text tajweed.ham_wasl,    .qm-ayah-text rule.ham_wasl,
.qm-ayah-text tajweed.slnt,        .qm-ayah-text rule.slnt,
.qm-ayah-text tajweed.slnt_w,      .qm-ayah-text rule.slnt_w,
.qm-ayah-text tajweed.laam_shamsiyah, .qm-ayah-text rule.laam_shamsiyah,
.qm-ayah-text tajweed.idgham_mutajanisayn, .qm-ayah-text rule.idgham_mutajanisayn,
.qm-ayah-text tajweed.idgham_mutaqaribayn, .qm-ayah-text rule.idgham_mutaqaribayn{ color:#7a7a90; }
.qm-ayah-text tajweed.madda_normal,      .qm-ayah-text rule.madda_normal{ color:#7aa5ff; }
.qm-ayah-text tajweed.madda_permissible, .qm-ayah-text rule.madda_permissible{ color:#5b8aff; }
.qm-ayah-text tajweed.madda_necessary,   .qm-ayah-text rule.madda_necessary{ color:#3d6df0; font-weight:500; }
.qm-ayah-text tajweed.madda_obligatory,  .qm-ayah-text rule.madda_obligatory{ color:#4575e8; font-weight:500; }
.qm-ayah-text tajweed.qalaqah,  .qm-ayah-text rule.qalaqah,
.qm-ayah-text tajweed.qalqala,  .qm-ayah-text rule.qalqala{ color:#ff5757; font-weight:600; }
.qm-ayah-text tajweed.ikhafa_shafawi, .qm-ayah-text rule.ikhafa_shafawi{ color:#e070e0; }
.qm-ayah-text tajweed.ikhafa,         .qm-ayah-text rule.ikhafa{ color:#c060d8; }
.qm-ayah-text tajweed.iqlab,          .qm-ayah-text rule.iqlab{ color:#5cb0ff; }
.qm-ayah-text tajweed.idgham_shafawi, .qm-ayah-text rule.idgham_shafawi{ color:#5ed080; }
.qm-ayah-text tajweed.idgham_ghunnah, .qm-ayah-text rule.idgham_ghunnah,
.qm-ayah-text tajweed.idgham_wo_ghunnah, .qm-ayah-text rule.idgham_wo_ghunnah{ color:#4abf6e; }
.qm-ayah-text tajweed.ghunnah, .qm-ayah-text rule.ghunnah{ color:#ff9b3d; }

/* ---- Mobile tweaks ---- */
@media(max-width:520px){
  .qm-wrapper{padding:0 0 80px;}
  .qm-surah-head{padding:18px 14px 18px;margin-bottom:8px;}
  .qm-surah-ar{font-size:32px;}
  .qm-surah-en{font-size:13px;}
  .qm-bismillah{font-size:28px;padding:14px 12px 18px;}
  .qm-ayah{padding:14px 14px;gap:11px;margin:0 0 4px;}
  .qm-ayah-badge{width:32px;height:32px;font-size:13px;margin-top:10px;}
  .qm-ayah-text{font-size:26px;line-height:2.2;}
}

/* ETA timer next to speed slider */
.sr-eta-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:8px;
  background:#0a0a12;
  border:1px solid #252539;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:700;
  color:#22c55e;
  min-width:64px;justify-content:center;
  transition:color .2s, border-color .2s, background .2s;
}
.sr-eta-pill.active{
  background:linear-gradient(135deg,#0d2d1a,#0a1f12);
  border-color:#166534;
  color:#4ade80;
  box-shadow:0 0 0 1px rgba(34,197,94,.2), 0 0 10px rgba(34,197,94,.15);
}
.sr-eta-pill .sr-eta-icon{ font-size:11px; line-height:1; }
.sr-eta-pill .sr-eta-label{ font-size:10px; color:#9090a8; font-weight:600; }
.sr-eta-pill.active .sr-eta-label{ color:#86efac; }
@media(max-width:560px){
  .sr-eta-pill{ font-size:10px; padding:3px 7px; min-width:56px; }
}
/* ============================================================
   BACKTEST CHART · TradingView-powered page styles
   (Replaces the old synthetic Trade Simulator)
   ============================================================ */
.bt-shell{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,rgba(8,14,28,0.85) 0%,rgba(6,11,23,0.92) 100%);border:1px solid rgba(155,123,255,0.12);box-shadow:0 20px 60px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.04);margin-bottom:20px}
.bt-shell::before{content:'';position:absolute;top:-30%;left:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(155,123,255,0.08) 0%,transparent 70%);pointer-events:none;z-index:0}

.bt-topbar{position:relative;z-index:2;display:flex;align-items:center;gap:14px;padding:16px 22px;background:rgba(8,14,28,0.55);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(155,123,255,0.1);flex-wrap:wrap}
.bt-symbol-block{display:flex;align-items:center;gap:12px}
.bt-symbol-block .sym-name{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:800;color:#e2e8f0;letter-spacing:.06em}
.bt-symbol-block .sym-tag{font-size:9px;font-weight:700;letter-spacing:.18em;color:#22c55e;text-transform:uppercase;background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.25);padding:3px 8px;border-radius:6px;font-family:'JetBrains Mono',monospace}
.bt-divider{width:1px;height:28px;background:linear-gradient(180deg,transparent,rgba(155,123,255,0.2),transparent)}
.bt-select{background:rgba(6,11,23,0.6);backdrop-filter:blur(8px);border:1px solid rgba(155,123,255,0.18);border-radius:8px;padding:7px 12px;color:#e2e8f0;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;outline:none;cursor:pointer;transition:all .2s}
.bt-select:hover{border-color:rgba(155,123,255,0.45);background:rgba(8,14,28,0.8)}
.bt-tf-row{display:flex;gap:4px;background:rgba(6,11,23,0.5);border:1px solid rgba(155,123,255,0.15);border-radius:8px;padding:3px}
.bt-tf-btn{background:transparent;border:none;color:#9090a8;padding:5px 10px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;cursor:pointer;border-radius:5px;transition:all .15s;letter-spacing:.02em}
.bt-tf-btn:hover{color:#e2e8f0;background:rgba(155,123,255,0.06)}
.bt-tf-btn.active{background:linear-gradient(135deg,rgba(155,123,255,0.18),rgba(98,68,227,0.12));color:#C4B5FD;box-shadow:inset 0 0 0 1px rgba(155,123,255,0.25)}

.bt-actions{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.bt-action-btn{background:linear-gradient(135deg,rgba(34,197,94,0.18),rgba(22,163,74,0.12));border:1px solid rgba(34,197,94,0.35);color:#22c55e;padding:7px 14px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;cursor:pointer;border-radius:8px;letter-spacing:.04em;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.bt-action-btn:hover{background:linear-gradient(135deg,rgba(34,197,94,0.28),rgba(22,163,74,0.18));border-color:rgba(34,197,94,0.55);transform:translateY(-1px)}
.bt-action-btn.ghost{background:rgba(6,11,23,0.55);border-color:rgba(155,123,255,0.22);color:#C4B5FD}
.bt-action-btn.ghost:hover{background:rgba(155,123,255,0.1);border-color:rgba(155,123,255,0.5)}

.bt-chart-wrap{position:relative;z-index:1;height:620px;background:#0d0d18;overflow:hidden}
.bt-chart-wrap iframe{width:100%;height:100%;border:0;display:block;background:#0d0d18}
.bt-chart-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#C4B5FD;font-family:'JetBrains Mono',monospace;font-size:13px;gap:12px;background:#0d0d18;z-index:1;pointer-events:none}
.bt-chart-loading.hide{display:none}
.bt-chart-loading .spin{width:32px;height:32px;border:3px solid rgba(155,123,255,0.15);border-top-color:#9B7BFF;border-radius:50%;animation:btspin 1s linear infinite}
@keyframes btspin{to{transform:rotate(360deg)}}

.bt-guide{background:linear-gradient(135deg,rgba(34,197,94,0.06),rgba(98,68,227,0.04));border:1px solid rgba(34,197,94,0.22);border-radius:14px;padding:18px 22px;margin-bottom:20px;position:relative;overflow:hidden}
.bt-guide::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,#22c55e,#7C5CFC)}
.bt-guide-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.bt-guide-head .icon{font-size:24px}
.bt-guide-head .title{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;color:#22c55e;letter-spacing:.04em}
.bt-guide-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.bt-step{background:rgba(6,11,23,0.55);border:1px solid rgba(155,123,255,0.14);border-radius:10px;padding:12px 14px;position:relative;padding-left:42px}
.bt-step::before{content:attr(data-step);position:absolute;left:12px;top:12px;width:22px;height:22px;border-radius:50%;background:#7C5CFC;color:#0a0a12;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;font-family:'JetBrains Mono',monospace}
.bt-step .step-title{font-size:12px;font-weight:700;color:#e2e8f0;margin-bottom:3px}
.bt-step .step-desc{font-size:11px;color:#a0a0b0;line-height:1.5}
.bt-step .kbd{display:inline-block;background:#131322;border:1px solid #252539;border-radius:4px;padding:1px 6px;font-family:'JetBrains Mono',monospace;font-size:10px;color:#C4B5FD;font-weight:700;margin:0 2px}

@media(max-width:760px){
  .bt-topbar{padding:12px 14px;gap:8px}
  .bt-chart-wrap{height:460px}
  .bt-actions{margin-left:0;width:100%;justify-content:flex-start}
  .bt-guide-steps{grid-template-columns:1fr}
}
/* ----- Mode toggle (Live / Replay) ----- */
.bt-mode-row{display:inline-flex;gap:3px;background:rgba(6,11,23,0.6);border:1px solid rgba(155,123,255,0.18);border-radius:8px;padding:3px}
.bt-mode-btn{background:transparent;border:none;color:#9090a8;padding:6px 12px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;cursor:pointer;border-radius:5px;letter-spacing:.04em;transition:all .15s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.bt-mode-btn:hover{color:#e2e8f0;background:rgba(155,123,255,0.06)}
.bt-mode-btn.active[data-mode="live"]{background:linear-gradient(135deg,rgba(155,123,255,0.22),rgba(98,68,227,0.14));color:#C4B5FD;box-shadow:inset 0 0 0 1px rgba(155,123,255,0.3)}
.bt-mode-btn.active[data-mode="replay"]{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;box-shadow:inset 0 0 0 1px rgba(34,197,94,0.5),0 4px 12px rgba(34,197,94,0.3)}
/* When NOT active, the Backtest button is highlighted green so users see it */
.bt-mode-btn[data-mode="replay"]:not(.active){background:linear-gradient(135deg,rgba(34,197,94,0.18),rgba(22,163,74,0.12));color:#86efac;box-shadow:inset 0 0 0 1px rgba(34,197,94,0.35);animation:btReplayPulse 2.5s ease-in-out infinite}
.bt-mode-btn[data-mode="replay"]:not(.active):hover{background:linear-gradient(135deg,rgba(34,197,94,0.3),rgba(22,163,74,0.2));color:#bbf7d0;box-shadow:inset 0 0 0 1px rgba(34,197,94,0.6),0 4px 12px rgba(34,197,94,0.25);animation:none}
@keyframes btReplayPulse{0%,100%{box-shadow:inset 0 0 0 1px rgba(34,197,94,0.35),0 0 0 rgba(34,197,94,0)}50%{box-shadow:inset 0 0 0 1px rgba(34,197,94,0.5),0 0 12px rgba(34,197,94,0.25)}}
.bt-mode-btn .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;box-shadow:0 0 6px currentColor}

/* ===== Backtest Journal/Summary tab switcher ===== */
.bt-tab-btn{
  background:transparent;border:none;color:#8a8aa0;
  font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;
  letter-spacing:.03em;padding:10px 18px;cursor:pointer;position:relative;
  border-bottom:2px solid transparent;transition:all .18s;border-radius:8px 8px 0 0;
}
.bt-tab-btn:hover{color:#c4b5fd;background:rgba(124,92,252,0.06)}
.bt-tab-btn.active{color:#fff;border-bottom-color:#7C5CFC;background:rgba(124,92,252,0.10)}
.bt-tab-panel{animation:btTabFade .25s ease}
@keyframes btTabFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:520px){.bt-insights-grid{grid-template-columns:1fr !important}}

/* ----- Replay chart container (Lightweight Charts) ----- */
.bt-replay-chart-host{position:absolute;inset:0;background:#0d0d18;display:none;z-index:2}
.bt-replay-chart-host.active{display:block}
.bt-replay-chart-host .lwc-mount{width:100%;height:100%}
.bt-replay-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;color:#ef4444;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.6;gap:10px;background:#0d0d18;z-index:3}
.bt-replay-error.hide{display:none}
.bt-replay-error .icon{font-size:32px}
.bt-replay-error .retry{margin-top:6px;background:rgba(155,123,255,0.1);border:1px solid rgba(155,123,255,0.35);color:#C4B5FD;padding:6px 14px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;cursor:pointer;border-radius:7px}
.bt-replay-error .retry:hover{background:rgba(155,123,255,0.2)}

/* ----- Replay controls bar (below the chart) ----- */
.bt-replay-bar{display:none;align-items:center;gap:14px;padding:12px 22px;background:rgba(8,14,28,0.55);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-top:1px solid rgba(167,139,250,0.2);position:relative;z-index:2;flex-wrap:wrap;font-family:'JetBrains Mono',monospace}
.bt-replay-bar.active{display:flex}
.bt-pb-row{display:flex;gap:3px;background:rgba(6,11,23,0.5);border:1px solid rgba(167,139,250,0.18);border-radius:8px;padding:3px}
.bt-pb-btn{background:transparent;border:none;color:#a0a8c0;width:32px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;font-size:13px;transition:all .15s}
.bt-pb-btn:hover{color:#fff;background:rgba(167,139,250,0.12)}
.bt-pb-btn:disabled{opacity:.35;cursor:not-allowed}
.bt-pb-btn.play{background:linear-gradient(135deg,rgba(167,139,250,0.25),rgba(124,58,237,0.18));color:#c4b5fd;width:38px;box-shadow:inset 0 0 0 1px rgba(167,139,250,0.4)}
.bt-pb-btn.play:hover:not(:disabled){background:linear-gradient(135deg,rgba(167,139,250,0.35),rgba(124,58,237,0.28))}
.bt-speed-row{display:flex;gap:3px;background:rgba(6,11,23,0.5);border:1px solid rgba(167,139,250,0.18);border-radius:8px;padding:3px}
.bt-speed-btn{background:transparent;border:none;color:#9090a8;padding:5px 9px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;cursor:pointer;border-radius:5px;letter-spacing:.02em;transition:all .15s}
.bt-speed-btn:hover{color:#e2e8f0;background:rgba(167,139,250,0.08)}
.bt-speed-btn.active{background:linear-gradient(135deg,rgba(167,139,250,0.22),rgba(124,58,237,0.14));color:#c4b5fd;box-shadow:inset 0 0 0 1px rgba(167,139,250,0.3)}
.bt-replay-progress{flex:1;min-width:140px;height:6px;background:rgba(6,11,23,0.7);border:1px solid rgba(167,139,250,0.15);border-radius:4px;overflow:hidden;position:relative}
.bt-replay-progress-fill{height:100%;background:linear-gradient(90deg,#A78BFA,#7C5CFC);transition:width .25s linear;width:0%}
.bt-replay-jump-group{display:inline-flex;align-items:center;gap:6px}
.bt-replay-date{background:rgba(6,11,23,0.7);border:1px solid rgba(167,139,250,0.22);border-radius:6px;color:#e2e8f0;font-family:'JetBrains Mono',monospace;font-size:11px;padding:4px 8px;outline:none;color-scheme:dark}
.bt-replay-date:focus{border-color:rgba(167,139,250,0.5)}
.bt-replay-jump-btn{background:rgba(6,11,23,0.6);border:1px solid rgba(167,139,250,0.22);color:#c4b5fd;padding:5px 10px;font-size:11px;font-family:'JetBrains Mono',monospace;font-weight:700;cursor:pointer;border-radius:6px;letter-spacing:.04em;transition:all .15s}
.bt-replay-jump-btn:hover{background:rgba(167,139,250,0.12);border-color:rgba(167,139,250,0.45)}

/* HUD strip (current bar info) below the controls */
.bt-replay-hud{display:none;align-items:center;gap:16px;padding:8px 22px;background:rgba(6,11,23,0.7);border-top:1px solid rgba(167,139,250,0.1);position:relative;z-index:2;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:11px;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums}
.bt-replay-hud.active{display:flex}
.bt-replay-hud-block{display:inline-flex;align-items:center;gap:8px}
.bt-replay-hud-lbl{font-size:9px;font-weight:700;letter-spacing:.18em;color:#8093b3;text-transform:uppercase;font-family:'Space Grotesk',sans-serif}
.bt-replay-hud-val{color:#c4b5fd;font-weight:700}
.bt-replay-hud-val.price{color:#C4B5FD;text-shadow:0 0 10px rgba(103,232,249,0.25)}
.bt-replay-hud-val.change.up{color:#22c55e}
.bt-replay-hud-val.change.down{color:#ef4444}
.bt-replay-hud-sep{width:1px;height:18px;background:linear-gradient(180deg,transparent,rgba(167,139,250,0.18),transparent)}

/* When in Replay mode hide the LIVE tag, show REPLAY tag */
.bt-symbol-block .sym-tag.replay{background:rgba(167,139,250,0.1);border-color:rgba(167,139,250,0.32);color:#c4b5fd}

@media(max-width:760px){
  .bt-replay-bar{padding:10px 14px;gap:8px}
  .bt-replay-hud{padding:8px 14px;gap:10px}
  .bt-replay-jump-group{width:100%;justify-content:flex-start}
  .bt-replay-progress{order:99;width:100%;flex-basis:100%}
}



/* ============================================================
   LIQUID GLASS THEME — Apple-style frosted glass override
   Translucent surfaces · backdrop-filter · specular highlights
   ============================================================ */

:root{
  --lg-bg: rgba(255,255,255,0.045);
  --lg-bg-strong: rgba(255,255,255,0.07);
  --lg-bg-subtle: rgba(255,255,255,0.025);
  --lg-border: rgba(255,255,255,0.10);
  --lg-border-strong: rgba(255,255,255,0.16);
  --lg-border-soft: rgba(255,255,255,0.06);
  --lg-highlight: rgba(255,255,255,0.22);
  --lg-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25);
  --lg-shadow-strong: 0 14px 48px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.3);
  --lg-blur: blur(28px) saturate(180%);
  --lg-blur-strong: blur(40px) saturate(200%);
  --lg-blur-light: blur(18px) saturate(160%);
  --lg-accent: #7C5CFC;
  --lg-accent-2: #A78BFA;
  --lg-accent-3: #34D399;
}

/* ---------- BODY: vibrant background so glass has color to refract ---------- */
body{
  background:
    radial-gradient(ellipse at 15% 5%, rgba(124,92,252,0.30) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 10%, rgba(167,139,250,0.22) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 95%, rgba(34,197,94,0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 80%, rgba(236,72,153,0.18) 0%, transparent 50%),
    linear-gradient(135deg, #050410 0%, #08081a 50%, #04060f 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}
body::before{
  /* Soft moving grid — far quieter than before, keeps depth */
  content:'' !important;
  position:fixed !important;
  left:-20% !important; right:-20% !important; bottom:0 !important;
  height:55% !important;
  z-index:0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) !important;
  background-size: 80px 80px !important;
  transform-origin: 50% 100% !important;
  transform: perspective(800px) rotateX(74deg) !important;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 100%) !important;
  pointer-events: none !important;
}
body::after{
  /* Replace with first floating orb */
  content:'' !important;
  position:fixed !important;
  width: 540px !important;
  height: 540px !important;
  border-radius:50% !important;
  background: radial-gradient(circle, rgba(124,92,252,0.35) 0%, rgba(124,92,252,0.05) 50%, transparent 70%) !important;
  top: -180px !important; left: -160px !important;
  filter: blur(60px) !important;
  z-index: 0 !important;
  pointer-events:none !important;
  animation: lg-float-a 22s ease-in-out infinite;
}
/* Extra floating orbs via a fixed pseudo-host element using ::marker hack isn't reliable; use html::before/after */
html::before{
  content:''; position:fixed;
  width:480px; height:480px; border-radius:50%;
  background: radial-gradient(circle, rgba(167,139,250,0.30) 0%, rgba(167,139,250,0.05) 50%, transparent 70%);
  top: 30%; right: -120px;
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
  animation: lg-float-b 28s ease-in-out infinite;
}
html::after{
  content:''; position:fixed;
  width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(236,72,153,0.22) 0%, rgba(236,72,153,0.04) 50%, transparent 70%);
  bottom: -120px; left: 35%;
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
  animation: lg-float-c 32s ease-in-out infinite;
}
@keyframes lg-float-a{
  0%,100%{ transform: translate(0,0) scale(1); }
  33%   { transform: translate(60px,80px) scale(1.08); }
  66%   { transform: translate(-40px,40px) scale(0.95); }
}
@keyframes lg-float-b{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%   { transform: translate(-80px,-60px) scale(1.1); }
}
@keyframes lg-float-c{
  0%,100%{ transform: translate(0,0) scale(1); }
  40%   { transform: translate(80px,-40px) scale(1.06); }
  80%   { transform: translate(-40px,50px) scale(0.94); }
}

/* ---------- SIDEBAR: vertical glass strip ---------- */
.sidebar{
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%) !important;
  backdrop-filter: var(--lg-blur-strong) !important;
  -webkit-backdrop-filter: var(--lg-blur-strong) !important;
  border-right: 1px solid var(--lg-border) !important;
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,0.05),
    4px 0 24px rgba(0,0,0,0.25) !important;
}
.nav-btn{
  background: transparent !important;
  border-radius: 12px !important;
  transition: all .25s ease !important;
}
.nav-btn:hover{
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(10px);
  color: #e2e8f0 !important;
}
.nav-btn.active{
  background: linear-gradient(135deg, rgba(124,92,252,0.18) 0%, rgba(124,92,252,0.08) 100%) !important;
  border: 1px solid rgba(124,92,252,0.35) !important;
  border-left: 3px solid #C4B5FD !important;
  padding-left: 11px !important;
  color: #c4b5fd !important;
  box-shadow: 0 4px 14px rgba(124,92,252,0.18), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* ---------- HERO BANNER ---------- */
.hero-banner{
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.025) 100%) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow:
    var(--lg-shadow-strong),
    inset 0 1px 0 var(--lg-highlight) !important;
}
.hero-banner::before{
  background: radial-gradient(circle, rgba(124,92,252,0.20) 0%, transparent 70%) !important;
}
.hero-banner::after{
  background: linear-gradient(90deg, transparent, var(--lg-highlight), transparent) !important;
}

/* ---------- STAT CARDS ---------- */
.stat-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.025) 100%) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow:
    var(--lg-shadow),
    inset 0 1px 0 var(--lg-highlight) !important;
}
.stat-card:hover{
  background: linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.04) 100%) !important;
  border-color: var(--lg-border-strong) !important;
  transform: translateY(-3px) !important;
  box-shadow:
    var(--lg-shadow-strong),
    inset 0 1px 0 var(--lg-highlight) !important;
}

/* ---------- SECTION CARDS (universal pattern) ---------- */
.section-card,
.daily-todo-card,
.checklist-card,
.equity-preview,
.brokerage-strip,
.mt5-card,
.hero-preview-card,
.feature-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.02) 100%) !important;
  backdrop-filter: var(--lg-blur) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow:
    var(--lg-shadow),
    inset 0 1px 0 var(--lg-highlight) !important;
  position: relative;
}
.feature-card:hover{
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%) !important;
  border-color: var(--lg-border-strong) !important;
}

/* ---------- INNER NESTED ELEMENTS (subtler glass) ---------- */
.rule-item,
.daily-todo-item,
.cal-day:not(.empty):not(.profit):not(.loss),
.trade-detail-card,
.day-summary-box,
.hp-stat,
.rule-block,
.mt5-info-cell,
.mt5-step,
.ptp-risk-stat,
.ptp-loss-option,
.alert-modal-stat{
  background: rgba(255,255,255,0.035) !important;
  backdrop-filter: var(--lg-blur-light) !important;
  -webkit-backdrop-filter: var(--lg-blur-light) !important;
  border: 1px solid var(--lg-border-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.rule-item:hover,
.daily-todo-item:hover,
.cal-day:not(.empty):hover,
.trade-detail-card:hover{
  background: rgba(255,255,255,0.07) !important;
  border-color: var(--lg-border) !important;
}

/* Special state cards keep their semantic color but get glassy treatment */
.cal-day.profit{
  background: linear-gradient(180deg, rgba(34,197,94,0.18) 0%, rgba(34,197,94,0.06) 100%) !important;
  border: 1px solid rgba(34,197,94,0.35) !important;
  backdrop-filter: var(--lg-blur-light) !important;
  -webkit-backdrop-filter: var(--lg-blur-light) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 16px rgba(34,197,94,0.08) !important;
}
.cal-day.loss{
  background: linear-gradient(180deg, rgba(239,68,68,0.18) 0%, rgba(239,68,68,0.06) 100%) !important;
  border: 1px solid rgba(239,68,68,0.35) !important;
  backdrop-filter: var(--lg-blur-light) !important;
  -webkit-backdrop-filter: var(--lg-blur-light) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 16px rgba(239,68,68,0.08) !important;
}
.cal-day.empty{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
  box-shadow: none !important;
}

/* Checklist items */
.checklist-item{
  background: rgba(255,255,255,0.035) !important;
  backdrop-filter: var(--lg-blur-light) !important;
  -webkit-backdrop-filter: var(--lg-blur-light) !important;
  border: 1px solid var(--lg-border-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.checklist-item:hover{
  background: rgba(255,255,255,0.07) !important;
  border-color: var(--lg-border) !important;
}
.checklist-item.ticked{
  background: linear-gradient(135deg, rgba(34,197,94,0.18) 0%, rgba(34,197,94,0.06) 100%) !important;
  border: 1px solid rgba(34,197,94,0.4) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 12px rgba(34,197,94,0.1) !important;
}
.daily-todo-item.done{
  background: linear-gradient(135deg, rgba(34,197,94,0.18) 0%, rgba(34,197,94,0.06) 100%) !important;
  border: 1px solid rgba(34,197,94,0.4) !important;
}

/* ---------- MODALS ---------- */
.modal-backdrop{
  background: rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
}
.modal,
.day-modal,
.alert-modal,
.clr-modal,
.otp-modal{
  background: linear-gradient(180deg, rgba(20,18,40,0.65) 0%, rgba(10,10,28,0.55) 100%) !important;
  backdrop-filter: var(--lg-blur-strong) !important;
  -webkit-backdrop-filter: var(--lg-blur-strong) !important;
  border: 1px solid var(--lg-border-strong) !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.6),
    inset 0 1px 0 var(--lg-highlight) !important;
}
.day-modal-header,
.clr-modal-header,
.alert-modal-header,
.otp-header{
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 100%) !important;
  border-bottom: 1px solid var(--lg-border-soft) !important;
}

/* ---------- BUTTONS ---------- */
.btn-primary{
  background: linear-gradient(135deg, rgba(124,92,252,0.85) 0%, rgba(91,63,232,0.75) 100%) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  border: 1px solid rgba(155,123,255,0.4) !important;
  box-shadow:
    0 6px 18px rgba(124,92,252,0.35),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
.btn-primary:hover{
  background: linear-gradient(135deg, rgba(155,114,255,0.95) 0%, rgba(124,92,252,0.85) 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 10px 24px rgba(124,92,252,0.5),
    inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
.btn-ghost{
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.btn-ghost:hover{
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(155,123,255,0.5) !important;
  color: #c4b5fd !important;
}
.btn-danger{
  background: linear-gradient(135deg, rgba(239,68,68,0.2) 0%, rgba(153,27,27,0.15) 100%) !important;
  backdrop-filter: blur(12px) saturate(160%) !important;
  border: 1px solid rgba(239,68,68,0.4) !important;
  color: #fca5a5 !important;
}

/* ---------- FORM INPUTS ---------- */
.form-input,
.form-select,
.week-review-field,
.daily-todo-edit-input,
.auth-field input,
.otp-digit,
.checklist-edit-row input{
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  border: 1px solid var(--lg-border) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
  transition: all .25s ease !important;
}
.form-input:focus,
.form-select:focus,
.week-review-field:focus,
.daily-todo-edit-input:focus,
.auth-field input:focus,
.otp-digit:focus,
.checklist-edit-row input:focus{
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(155,123,255,0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 0 0 3px rgba(124,92,252,0.18) !important;
}

/* ---------- BADGES + PILLS ---------- */
.badge-green, .limit-ok, .daily-todo-pill.complete, .checklist-progress-pill.complete, .mt5-status-pill.connected{
  background: linear-gradient(135deg, rgba(34,197,94,0.22) 0%, rgba(34,197,94,0.10) 100%) !important;
  border: 1px solid rgba(34,197,94,0.4) !important;
  backdrop-filter: blur(8px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(160%) !important;
}
.badge-red, .limit-reached, .checklist-progress-pill.incomplete, .mt5-status-pill.error{
  background: linear-gradient(135deg, rgba(239,68,68,0.22) 0%, rgba(239,68,68,0.10) 100%) !important;
  border: 1px solid rgba(239,68,68,0.4) !important;
  backdrop-filter: blur(8px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(160%) !important;
}
.badge-yellow{
  background: linear-gradient(135deg, rgba(124,92,252,0.22) 0%, rgba(124,92,252,0.10) 100%) !important;
  border: 1px solid rgba(124,92,252,0.4) !important;
  backdrop-filter: blur(8px) saturate(160%) !important;
}
.badge-blue, .mt5-status-pill.syncing{
  background: linear-gradient(135deg, rgba(167,139,250,0.22) 0%, rgba(167,139,250,0.10) 100%) !important;
  border: 1px solid rgba(167,139,250,0.4) !important;
  backdrop-filter: blur(8px) saturate(160%) !important;
}
.badge-purple{
  background: linear-gradient(135deg, rgba(192,132,252,0.22) 0%, rgba(192,132,252,0.10) 100%) !important;
  border: 1px solid rgba(192,132,252,0.4) !important;
  backdrop-filter: blur(8px) saturate(160%) !important;
}
.badge-grey, .daily-todo-pill.incomplete, .mt5-status-pill.disconnected{
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--lg-border) !important;
  backdrop-filter: blur(8px) !important;
}

/* ---------- TABLES ---------- */
table{ background: transparent !important; }
tr:hover td{ background: rgba(255,255,255,0.04) !important; }
th{ border-bottom-color: var(--lg-border-soft) !important; color: #a0b0c4 !important; }
td{ border-bottom-color: rgba(255,255,255,0.04) !important; }

/* ---------- NOTEBOOK PAGES (keep their color identity) ---------- */
.notebook-page{
  backdrop-filter: var(--lg-blur-light) !important;
  -webkit-backdrop-filter: var(--lg-blur-light) !important;
  border-width: 1px !important;
  box-shadow:
    var(--lg-shadow),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.notebook-page.color-purple{ background: linear-gradient(180deg, rgba(124,92,252,0.14) 0%, rgba(124,92,252,0.04) 100%) !important; border-color: rgba(124,92,252,0.35) !important; }
.notebook-page.color-yellow{ background: linear-gradient(180deg, rgba(251,191,36,0.14) 0%, rgba(251,191,36,0.04) 100%) !important; border-color: rgba(251,191,36,0.35) !important; }
.notebook-page.color-green { background: linear-gradient(180deg, rgba(34,197,94,0.14) 0%, rgba(34,197,94,0.04) 100%) !important; border-color: rgba(34,197,94,0.35) !important; }
.notebook-page.color-red   { background: linear-gradient(180deg, rgba(239,68,68,0.14) 0%, rgba(239,68,68,0.04) 100%) !important; border-color: rgba(239,68,68,0.35) !important; }
.notebook-page.color-blue  { background: linear-gradient(180deg, rgba(167,139,250,0.14) 0%, rgba(167,139,250,0.04) 100%) !important; border-color: rgba(167,139,250,0.35) !important; }

/* ---------- TRADER'S COMMITMENT BOX ---------- */
.trader-commitment-box{
  background: linear-gradient(180deg, rgba(167,139,250,0.10) 0%, rgba(167,139,250,0.02) 100%) !important;
  backdrop-filter: var(--lg-blur-light) !important;
  -webkit-backdrop-filter: var(--lg-blur-light) !important;
  border: 1px solid rgba(167,139,250,0.30) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.trader-commitment-box.signed{
  background: linear-gradient(180deg, rgba(34,197,94,0.16) 0%, rgba(34,197,94,0.04) 100%) !important;
  border-color: rgba(34,197,94,0.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 4px 18px rgba(34,197,94,0.15) !important;
}

/* ---------- CHECKLIST EDIT ROWS, RULE BANNERS, COOLDOWNS ---------- */
.checklist-cooldown-banner{
  background: linear-gradient(135deg, rgba(124,92,252,0.16) 0%, rgba(124,92,252,0.04) 100%) !important;
  backdrop-filter: var(--lg-blur-light) !important;
  border: 1px solid rgba(124,92,252,0.35) !important;
}
.checklist-edit-banner{
  background: linear-gradient(135deg, rgba(34,197,94,0.16) 0%, rgba(34,197,94,0.04) 100%) !important;
  backdrop-filter: var(--lg-blur-light) !important;
  border: 1px solid rgba(34,197,94,0.35) !important;
}
.warning-bar{
  background: linear-gradient(135deg, rgba(239,68,68,0.18) 0%, rgba(239,68,68,0.05) 100%) !important;
  backdrop-filter: var(--lg-blur-light) !important;
  border: 1px solid rgba(239,68,68,0.4) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.backtest-banner{
  background: linear-gradient(135deg, rgba(192,132,252,0.16) 0%, rgba(124,92,252,0.06) 100%) !important;
  backdrop-filter: var(--lg-blur-light) !important;
  border: 1px solid rgba(192,132,252,0.4) !important;
}

/* ---------- AUTH / LANDING ---------- */
.auth-overlay{
  background: radial-gradient(ellipse at 40% 10%, rgba(13,32,64,0.6) 0%, rgba(3,4,12,0.85) 60%) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}
.auth-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%) !important;
  backdrop-filter: var(--lg-blur-strong) !important;
  -webkit-backdrop-filter: var(--lg-blur-strong) !important;
  border: 1px solid var(--lg-border-strong) !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.6),
    inset 0 1px 0 var(--lg-highlight) !important;
}
.user-pill{
  background: rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border: 1px solid var(--lg-border) !important;
}
.landing-nav{
  background: rgba(255,255,255,0.025) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border-bottom: 1px solid var(--lg-border-soft) !important;
}

/* ---------- SCROLLBARS ---------- */
::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.15) !important;
  border-radius: 4px;
  backdrop-filter: blur(8px);
}
::-webkit-scrollbar-track{ background: transparent !important; }

/* ---------- MAKE SURE GLASS LAYERS DON'T STACK BLUR (perf) ---------- */
.section-card .checklist-item,
.section-card .daily-todo-item,
.section-card .rule-item,
.section-card .trade-detail-card,
.daily-todo-card .daily-todo-item,
.checklist-card .checklist-item,
.day-modal .trade-detail-card,
.clr-modal-list .checklist-item{
  /* Nested glass uses lighter blur to avoid stacking cost */
  backdrop-filter: blur(8px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%) !important;
}

/* ---------- AZHKAR PANEL ---------- */
.azhkar-panel{
  background: linear-gradient(180deg, rgba(167,139,250,0.08) 0%, rgba(167,139,250,0.02) 100%) !important;
  backdrop-filter: var(--lg-blur-light) !important;
  -webkit-backdrop-filter: var(--lg-blur-light) !important;
  border: 1px solid rgba(167,139,250,0.20) !important;
}
.azhkar-trigger{
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(155,123,255,0.25) !important;
}

/* ---------- MOBILE — reduce blur amount for perf ---------- */
@media (max-width: 760px){
  :root{
    --lg-blur: blur(18px) saturate(160%);
    --lg-blur-strong: blur(24px) saturate(170%);
    --lg-blur-light: blur(12px) saturate(140%);
  }
}
@media (prefers-reduced-motion: reduce){
  body::after, html::before, html::after{ animation: none !important; }
}


/* ============================================================
   MRKT THEME — final polish + fix missing UI elements
   ============================================================ */

/* deeper black foundation */
body{background:#050510 !important}
body::after{background:radial-gradient(circle,rgba(124,92,252,0.10) 0%,transparent 65%) !important}

/* === FIX: Forgot password link === */
.auth-forgot-link{
  background:transparent;
  border:none;
  color:#A78BFA;
  font-family:'Rubik',sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  padding:2px 4px;
  border-radius:6px;
  transition:all .18s;
  text-decoration:none;
}
.auth-forgot-link:hover{
  color:#C4B5FD;
  background:rgba(124,92,252,0.08);
  text-decoration:underline;
}

/* === FIX: Password input wrapper + eye toggle === */
.pw-wrap{
  position:relative;
  width:100%;
}
.pw-wrap input{
  width:100%;
  padding-right:44px !important;
}
.pw-eye-btn{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  background:transparent;
  border:none;
  color:#9090a8;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:8px;
  transition:all .18s;
  z-index:2;
}
.pw-eye-btn:hover{
  color:#A78BFA;
  background:rgba(124,92,252,0.10);
}
.pw-eye-btn:active{
  background:rgba(124,92,252,0.18);
}
.pw-eye-btn svg{
  width:18px;
  height:18px;
  display:block;
}

/* === MRKT polish: hero headline === */
.hero-headline{
  letter-spacing:-.025em !important;
  font-weight:800 !important;
}
.hero-headline .accent{
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  font-weight:800 !important;
}

/* === MRKT polish: primary CTA buttons (softer, premium) === */
.landing-btn-primary-lg{
  background:linear-gradient(135deg,#7C5CFC 0%,#9B7BFF 100%) !important;
  box-shadow:0 8px 24px rgba(124,92,252,0.35),inset 0 1px 0 rgba(255,255,255,0.12) !important;
  border-radius:999px !important;
  padding:16px 36px !important;
}
.landing-btn-primary-lg:hover{
  background:linear-gradient(135deg,#9B7BFF 0%,#B79DFF 100%) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 12px 32px rgba(124,92,252,0.5),inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.landing-btn-primary{
  background:linear-gradient(135deg,#7C5CFC 0%,#6244E3 100%) !important;
  border-radius:10px !important;
}
.landing-btn-primary:hover{
  background:linear-gradient(135deg,#9B7BFF 0%,#7C5CFC 100%) !important;
}

/* === MRKT polish: auth card glow === */
.auth-card{
  background:linear-gradient(180deg,#11111c 0%,#0a0a14 100%) !important;
  border:1px solid #252539 !important;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.75),
    0 0 0 1px rgba(124,92,252,0.08),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.auth-card::before{
  background:linear-gradient(90deg,transparent,rgba(167,139,250,0.6),transparent) !important;
}
.auth-brand .logo{
  background:linear-gradient(110deg,#818CF8 0%,#A78BFA 40%,#C084FC 70%,#F0ABFC 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  text-shadow:none !important;
}

/* auth input focus = purple ring */
.auth-field input:focus{
  border-color:#7C5CFC !important;
  box-shadow:0 0 0 3px rgba(124,92,252,0.18) !important;
}
.auth-btn{
  background:linear-gradient(135deg,#7C5CFC 0%,#6244E3 100%) !important;
  box-shadow:0 6px 18px rgba(124,92,252,0.28) !important;
}
.auth-btn:hover:not(:disabled){
  background:linear-gradient(135deg,#9B7BFF 0%,#7C5CFC 100%) !important;
  box-shadow:0 8px 22px rgba(124,92,252,0.45) !important;
}

/* === MRKT polish: landing nav logo === */
.landing-logo .logo-text{
  background:linear-gradient(110deg,#A78BFA 0%,#C084FC 50%,#F0ABFC 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  text-shadow:0 0 40px rgba(124,92,252,0.35) !important;
}

/* feature card accent line */
.feature-card::after{
  background:linear-gradient(90deg,transparent,#A78BFA,#C084FC,transparent) !important;
}
.feature-card h3{
  background:linear-gradient(110deg,#A78BFA 0%,#C084FC 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}

/* sidebar active state */
.nav-btn.active{
  border-left-color:#7C5CFC !important;
  background:linear-gradient(90deg,rgba(124,92,252,0.10) 0%,rgba(124,92,252,0.02) 100%) !important;
}
.nav-btn.active{color:#A78BFA !important}

/* primary buttons globally */
.btn-primary,
.auth-btn{
  letter-spacing:.03em;
}

/* main-app .btn-primary refresh */
.main .btn-primary,
.app .btn-primary{
  background:linear-gradient(135deg,#7C5CFC 0%,#6244E3 100%) !important;
}

/* stat-card top accent (use new primary) */
.stat-card.accent-yellow{--accent:#FBBF24 !important}

/* sidebar brand logo gradient */
.sb-brand{
  background:linear-gradient(110deg,#A78BFA 0%,#C084FC 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  text-shadow:0 0 30px rgba(124,92,252,0.30);
}

/* OTP input purple */
.otp-digit{color:#A78BFA !important}
.otp-digit:focus{
  border-color:#7C5CFC !important;
  box-shadow:0 0 0 3px rgba(124,92,252,0.18) !important;
}

/* scrollbar */
::-webkit-scrollbar-thumb{background:#3a3050 !important}
::-webkit-scrollbar-thumb:hover{background:#5a4a78 !important}

/* placeholder color */
input::placeholder,textarea::placeholder{color:#7c7c94 !important;opacity:1}


/* ============================================================
   1. CSS DESIGN TOKENS  (Linear / Geist-inspired)
   ============================================================ */
:root{
  /* Surfaces — deep neutral with subtle violet undertone */
  --hq-bg:        #07070B;
  --hq-surface-1: #0E0E14;
  --hq-surface-2: #14141C;
  --hq-surface-3: #1C1C28;
  --hq-overlay:   rgba(14,14,20,0.97);
  /* Borders — visible but refined */
  --hq-border:    #222230;
  --hq-border-2:  #2E2E42;
  --hq-border-hi: #42425C;
  /* Text — high-contrast, crisp on dark */
  --hq-text-1:    #F8F8FC;
  --hq-text-2:    #C4C4D4;
  --hq-text-3:    #9494AC;
  --hq-text-4:    #8a8aa0;
  /* Accent — vivid purple */
  --hq-accent:        #7C5CFC;
  --hq-accent-hover:  #A78BFA;
  --hq-accent-soft:   rgba(124,92,252,0.14);
  --hq-accent-border: rgba(167,139,250,0.35);
  /* Semantic — saturated, readable */
  --hq-success:    #10B981;
  --hq-success-2:  #34D399;
  --hq-success-soft: rgba(16,185,129,0.14);
  --hq-danger:     #F43F5E;
  --hq-danger-2:   #FB7185;
  --hq-danger-soft: rgba(244,63,94,0.12);
  --hq-warning:    #FBBF24;
  /* Type scale */
  --hq-text-xs:   11px;
  --hq-text-sm:   13px;
  --hq-text-base: 15px;
  --hq-text-lg:   17px;
  --hq-text-xl:   22px;
  --hq-text-2xl:  28px;
}

/* ============================================================
   2. GLOBAL TYPOGRAPHY  — Inter for everything, JetBrains for numbers
   ============================================================ */
*{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html{
  font-size: 16px;
  text-rendering: optimizeLegibility;
}
html, body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
  background: var(--hq-bg) !important;
  color: var(--hq-text-1) !important;
  font-size: var(--hq-text-base) !important;
  line-height: 1.55 !important;
  font-feature-settings: "cv02","cv03","cv04","cv11";
}

/* All Orbitron / display-heavy fonts → clean Inter Display */
.font-display, .font-mono,
h1, h2, h3, h4, h5,
.hero-greet, .auth-title, .otp-title, .modal-title,
.top-bar h1, .login-card h2,
.landing-logo .logo-text, .auth-brand .logo,
.hero-headline, .section-heading,
.alert-modal-title, .clr-modal-title,
.sb-brand, .checklist-title, .daily-todo-title,
.section-title{
  font-family: 'Inter', -apple-system, system-ui, sans-serif !important;
  font-feature-settings: "cv02","cv03","cv04","cv11" !important;
  letter-spacing: -0.018em !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* Big hero headline: tighter + heavier */
.hero-headline{
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  color: var(--hq-text-1) !important;
}
.section-heading{
  font-size: 36px !important;
  color: var(--hq-text-1) !important;
}

/* Logo tag, small label uppercase remain spaced */
.sb-tag, .login-brand .tagline, .auth-brand .tagline, .hero-badge,
.landing-logo .logo-tag, .nav-section{
  font-family: 'Inter', sans-serif !important;
  letter-spacing: 0.15em !important;
  font-weight: 600 !important;
}

/* Numbers / monetary values — JetBrains Mono, lighter weight (was 800, now 600) */
.stat-val, .brk-val, .hp-stat .val, .day-summary-box .val,
.equity-preview-header .total, .hero-stat .val,
.font-digital, .font-numeric, .trade-detail-num,
.wr-ring-pct, .wr-num,
.otp-digit{
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-feature-settings: "tnum" 1, "zero" 1, "ss01" 1, "ss02" 1 !important;
  font-variant-numeric: slashed-zero tabular-nums !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  text-shadow: none !important;
}
.stat-val{ font-size: var(--hq-text-2xl) !important; line-height: 1.1 !important; font-weight: 700 !important; }
.hero-stat .val{ font-size: 34px !important; font-weight: 700 !important; }

/* Inline mono usage like account email pill, badges, IDs */
table td, .badge, .limit-badge, .strategy-badge, .badge-grey,
.cdp, .cdp-val, .mt5-info-cell .val,
.user-email, .admin-email,
.daily-todo-pill, .checklist-progress-pill{
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-feature-settings: "tnum" 1, "zero" 1 !important;
  font-variant-numeric: slashed-zero tabular-nums !important;
}

/* Table rows: numeric font, but body cells slightly smaller weight */
table td{ font-weight: 500 !important; }
table th{
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: var(--hq-text-4) !important;
}

/* Small labels (stat card .label, .lbl) */
.stat-card .label, .stat-label, .hp-stat .lbl, .brk-lbl,
.day-summary-box .lbl, .hero-stat .lbl, .mt5-info-cell .lbl,
.trade-detail-field .lbl, .form-label{
  font-family: 'Inter', sans-serif !important;
  font-size: var(--hq-text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  color: var(--hq-text-3) !important;
  text-transform: uppercase !important;
}

/* ============================================================
   3. BACKGROUND — calm it down (was busy grid + glow)
   ============================================================ */
body::before{
  opacity: 0.35 !important;
  background-image:
    linear-gradient(rgba(139,92,246,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,0.04) 1px, transparent 1px) !important;
  background-size: 96px 96px !important;
  height: 50% !important;
}
body::after{
  width: 600px !important; height: 600px !important;
  background: radial-gradient(circle, rgba(139,92,246,0.08) 0%, transparent 70%) !important;
  top: -240px !important; left: -180px !important;
}

/* ============================================================
   4. SIDEBAR — cleaner separation, refined nav states
   ============================================================ */
.sidebar{
  background: rgba(10,10,14,0.92) !important;
  border-right: 1px solid var(--hq-border) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
.nav-btn{
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #E4E4F2 !important;
  border-radius: 8px !important;
  transition: background .12s ease, color .12s ease !important;
}
.nav-btn:hover{
  background: var(--hq-surface-2) !important;
  color: #FFFFFF !important;
}
.nav-btn.active{
  background: var(--hq-accent-soft) !important;
  color: var(--hq-accent-hover) !important;
  border-left: 2px solid var(--hq-accent) !important;
  padding-left: 12px !important;
}
.sb-brand{
  color: var(--hq-accent-hover) !important;
  background: none !important;
  -webkit-text-fill-color: var(--hq-accent-hover) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
}

/* ============================================================
   5. CARDS — flatter, cleaner, no bright accents
   ============================================================ */
.stat-card, .section-card, .equity-preview, .modal,
.daily-todo-card, .checklist-card, .mt5-card,
.feature-card, .login-card, .auth-card,
.hero-preview-card, .rules-card, .otp-modal,
.alert-modal, .clr-modal, .day-modal,
.brokerage-strip{
  background: var(--hq-surface-1) !important;
  border: 1px solid var(--hq-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: border-color .15s ease, background .15s ease !important;
}
.stat-card:hover{
  border-color: var(--hq-border-2) !important;
  background: var(--hq-surface-2) !important;
  transform: none !important;
  box-shadow: none !important;
}
.stat-card::after, .brokerage-strip::after,
.hero-banner::before, .hero-banner::after,
.feature-card::after, .auth-card::before,
.otp-modal::before, .login-card::before{
  display: none !important;
}
/* Modal-only: keep a tiny top accent for focus */
.modal{
  background: var(--hq-surface-1) !important;
  box-shadow: 0 24px 48px rgba(0,0,0,0.5) !important;
}

/* ============================================================
   6. HERO BANNER — restrained, premium
   ============================================================ */
.hero-banner{
  background: linear-gradient(180deg, var(--hq-surface-1) 0%, var(--hq-bg) 100%) !important;
  border: 1px solid var(--hq-border) !important;
  border-radius: 16px !important;
}
.hero-greet{
  color: var(--hq-accent-hover) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
.hero-date{ color: var(--hq-text-3) !important; }
.hero-quote{ color: var(--hq-text-3) !important; }

/* ============================================================
   7. STAT VALUES — semantic color overrides
   ============================================================ */
.pnl-pos, .stat-val.pnl-pos{ color: var(--hq-success-2) !important; }
.pnl-neg, .stat-val.pnl-neg{ color: var(--hq-danger-2) !important; }
.pnl-zero{ color: var(--hq-text-2) !important; }

/* ============================================================
   8. BUTTONS — restrained gradient
   ============================================================ */
.btn-primary, .auth-btn, .landing-btn-primary,
.landing-btn-primary-lg{
  background: var(--hq-accent) !important;
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 4px 12px rgba(139,92,246,0.20) !important;
  border-radius: 10px !important;
  transition: background .12s ease, transform .12s ease, box-shadow .12s ease !important;
}
.btn-primary:hover, .auth-btn:hover:not(:disabled),
.landing-btn-primary:hover, .landing-btn-primary-lg:hover{
  background: var(--hq-accent-hover) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 6px 18px rgba(139,92,246,0.32) !important;
}
.btn-ghost, .landing-btn-ghost, .landing-btn-ghost-lg{
  background: transparent !important;
  border: 1px solid var(--hq-border-2) !important;
  color: var(--hq-text-2) !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  transition: all .12s ease !important;
}
.btn-ghost:hover, .landing-btn-ghost:hover, .landing-btn-ghost-lg:hover{
  border-color: var(--hq-border-hi) !important;
  color: var(--hq-text-1) !important;
  background: var(--hq-surface-2) !important;
}
.btn-danger{
  background: rgba(244,63,94,0.10) !important;
  color: var(--hq-danger-2) !important;
  border: 1px solid rgba(244,63,94,0.28) !important;
  font-weight: 500 !important;
  transition: all .12s ease !important;
}
.btn-danger:hover{ background: rgba(244,63,94,0.18) !important; }

/* ============================================================
   9. BADGES — softer, smaller
   ============================================================ */
.badge{
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
}
.badge-green{
  background: var(--hq-success-soft) !important;
  color: var(--hq-success-2) !important;
  border: 1px solid rgba(16,185,129,0.24) !important;
}
.badge-red{
  background: var(--hq-danger-soft) !important;
  color: var(--hq-danger-2) !important;
  border: 1px solid rgba(244,63,94,0.24) !important;
}
.badge-blue, .badge-yellow{
  background: var(--hq-accent-soft) !important;
  color: var(--hq-accent-hover) !important;
  border: 1px solid var(--hq-accent-border) !important;
}
.badge-purple{
  background: rgba(167,139,250,0.10) !important;
  color: #C4B5FD !important;
  border: 1px solid rgba(167,139,250,0.28) !important;
}
.badge-grey{
  background: var(--hq-surface-3) !important;
  color: var(--hq-text-2) !important;
  border: 1px solid var(--hq-border-2) !important;
}

/* ============================================================
   10. TABLES — cleaner rhythm
   ============================================================ */
table{ width: 100% !important; }
th{
  font-size: var(--hq-text-xs) !important;
  padding: 12px 14px !important;
  color: var(--hq-text-3) !important;
  border-bottom: 1px solid var(--hq-border) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
}
td{
  padding: 12px 14px !important;
  font-size: var(--hq-text-sm) !important;
  border-bottom: 1px solid var(--hq-border) !important;
  color: var(--hq-text-1) !important;
}
tr:hover td{ background: rgba(139,92,246,0.04) !important; }

/* ============================================================
   11. INPUTS / FORM CONTROLS
   ============================================================ */
.form-input, .form-select, .form-textarea,
.auth-field input, .input-box, .search-box, .select-box,
.week-review-field{
  background: var(--hq-surface-2) !important;
  border: 1px solid var(--hq-border-2) !important;
  border-radius: 8px !important;
  color: var(--hq-text-1) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  transition: border-color .12s ease, background .12s ease !important;
}
.form-input:focus, .form-select:focus, .form-textarea:focus,
.auth-field input:focus{
  border-color: var(--hq-accent) !important;
  background: var(--hq-surface-1) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,0.14) !important;
  outline: none !important;
}

/* OTP digits */
.otp-digit{
  background: var(--hq-surface-2) !important;
  border: 1px solid var(--hq-border-2) !important;
  color: var(--hq-accent-hover) !important;
  font-weight: 700 !important;
}
.otp-digit:focus{
  border-color: var(--hq-accent) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,0.18) !important;
}

/* ============================================================
   12. AUTH / LOGIN  — premium glass-card
   ============================================================ */
.auth-card, .login-card{
  background: var(--hq-surface-1) !important;
  border: 1px solid var(--hq-border) !important;
  box-shadow: 0 32px 64px rgba(0,0,0,0.4) !important;
  border-radius: 16px !important;
}
.auth-overlay, .login-overlay{
  background: radial-gradient(ellipse at 50% 0%, rgba(139,92,246,0.08) 0%, var(--hq-bg) 60%) !important;
}
.auth-brand .logo, .login-brand .logo{
  color: var(--hq-accent-hover) !important;
  background: none !important;
  -webkit-text-fill-color: var(--hq-accent-hover) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  text-shadow: none !important;
}

/* ============================================================
   13. WIN-RATIO RING — refined colors
   ============================================================ */
.wr-ring-bg{ stroke: var(--hq-border-2) !important; }
.wr-dot{ box-shadow: none !important; }
.wr-bar-track{ background: var(--hq-surface-3) !important; }

/* ============================================================
   14. EQUITY CURVE & CHART CARDS
   ============================================================ */
.equity-preview-header .title{
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: var(--hq-text-1) !important;
  letter-spacing: -0.01em !important;
}
.section-title{
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: var(--hq-text-lg) !important;
  letter-spacing: -0.012em !important;
  color: var(--hq-text-1) !important;
}

/* Recent trades 'LAST 2 DAYS' chip */
.section-title > span{
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 600 !important;
}

/* ============================================================
   15. SCROLLBARS
   ============================================================ */
::-webkit-scrollbar{ width: 6px; height: 6px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--hq-border-2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover{ background: var(--hq-border-hi); }

/* ============================================================
   16. MISC POLISH
   ============================================================ */
.brokerage-strip{ border-radius: 14px !important; padding: 18px 24px !important; }
.brk-val{ font-size: 18px !important; font-weight: 700 !important; }
.brk-blue{   color: var(--hq-accent-hover) !important; }
.brk-yellow{ color: var(--hq-warning) !important; }
.brk-red{    color: var(--hq-danger-2) !important; }
.brk-green{  color: var(--hq-success-2) !important; }
.brk-divider{ background: linear-gradient(180deg, transparent, var(--hq-border) 50%, transparent) !important; }

/* Hero stat value (account equity) */
.hero-stat .val{
  color: var(--hq-success-2) !important;
  text-shadow: none !important;
}

/* Settings danger-zone is the only place we keep a warm border */
.section-card[style*="991b1b"], .section-card.danger-zone{
  border-color: rgba(244,63,94,0.30) !important;
}

/* Daily-limit warning bar — softer */
.warning-bar{
  background: rgba(244,63,94,0.08) !important;
  border: 1px solid rgba(244,63,94,0.28) !important;
  border-radius: 10px !important;
}

/* Top-bar h1 sizing */
.top-bar h1{
  font-size: var(--hq-text-xl) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: var(--hq-text-1) !important;
}
.top-bar p{
  font-size: var(--hq-text-sm) !important;
  color: var(--hq-text-3) !important;
  font-weight: 400 !important;
}

/* Calendar day cells */
.cal-day{
  border-radius: 8px !important;
  border-color: var(--hq-border) !important;
}
.cal-header{
  color: var(--hq-text-4) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}

/* Trade-detail-num pill */
.trade-detail-num{
  background: var(--hq-accent-soft) !important;
  color: var(--hq-accent-hover) !important;
  border: 1px solid var(--hq-accent-border) !important;
  font-weight: 600 !important;
}

/* Date-clickable hover */
.date-clickable:hover{
  background: var(--hq-accent-soft) !important;
  border-color: var(--hq-accent-border) !important;
  color: var(--hq-accent-hover) !important;
}

/* User-pill in sidebar bottom */
.user-pill, .admin-pill{
  background: var(--hq-surface-2) !important;
  border: 1px solid var(--hq-border) !important;
}
.user-avatar, .admin-avatar{
  background: var(--hq-accent) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* MT5 card refinement */
.mt5-card{
  background: linear-gradient(180deg, var(--hq-surface-1) 0%, var(--hq-bg) 100%) !important;
  border: 1px solid var(--hq-border) !important;
}
.mt5-status-pill.connected{
  background: var(--hq-success-soft) !important;
  color: var(--hq-success-2) !important;
  border: 1px solid rgba(16,185,129,0.28) !important;
}

/* Daily-todo refinements */
.daily-todo-item{ border-radius: 8px !important; }
.daily-todo-item:hover{ border-color: var(--hq-accent-border) !important; }
.daily-todo-item.done{
  background: var(--hq-success-soft) !important;
  border-color: rgba(16,185,129,0.24) !important;
}

/* Checklist item refinements */
.checklist-item{ border-radius: 8px !important; }
.checklist-num{
  background: var(--hq-accent) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
}

/* Trade-detail-reason left bar */
.trade-detail-reason{
  border-left-color: var(--hq-accent) !important;
  background: var(--hq-surface-2) !important;
}

/* Backtest banner */
.backtest-banner{
  background: var(--hq-accent-soft) !important;
  border: 1px solid var(--hq-accent-border) !important;
  border-radius: 10px !important;
}
.backtest-banner .title{
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--hq-accent-hover) !important;
}
.backtest-banner::before{
  background: var(--hq-accent) !important;
}

/* Buttons inside section-card top-right (e.g. Clear All) */
.section-title button{
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}

/* Form-label refinement */
.form-label{
  font-size: var(--hq-text-xs) !important;
  color: var(--hq-text-3) !important;
  letter-spacing: 0.07em !important;
}

/* Modal close X */
.modal-close{ font-weight: 400 !important; }

/* Lighten ::before / ::after on landing-page */
.landing-page::before{ opacity: 0.35 !important; }
.landing-page::after{ opacity: 0.5 !important; }

/* Feature card refinement (landing page) */
.feature-card h3{
  background: none !important;
  -webkit-text-fill-color: var(--hq-accent-hover) !important;
  color: var(--hq-accent-hover) !important;
  font-weight: 700 !important;
}

/* Stat trend lines */
.stat-trend{
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
}

/* ========================================
   INTERACTIVE FEATURE SHOWCASE (landing)
   ======================================== */
.shc-wrap{ position:relative; }

/* --- TAB BAR --- */
.shc-tabs{
  display:flex;
  gap:6px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:32px;
  padding:6px;
  background:rgba(13,13,24,0.6);
  border:1px solid #252539;
  border-radius:16px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.shc-tab{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  background:transparent;
  border:1px solid transparent;
  border-radius:11px;
  padding:11px 18px;
  cursor:pointer;
  font-family:'Rubik',sans-serif;
  transition:all .22s cubic-bezier(.4,0,.2,1);
  min-width:96px;
  position:relative;
  color:#9090a8;
}
.shc-tab:hover{
  background:rgba(124,92,252,0.06);
  color:#c0d0e0;
}
.shc-tab.is-active{
  background:linear-gradient(135deg,#7C5CFC 0%,#6244E3 100%);
  color:#fff;
  border-color:rgba(155,123,255,0.4);
  box-shadow:0 4px 14px rgba(124,92,252,0.35);
}
.shc-tab.is-active::after{
  content:'';
  position:absolute;
  bottom:-14px;
  left:50%;
  transform:translateX(-50%);
  width:0;height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:7px solid #7C5CFC;
}
.shc-tab-icon{ font-size:22px; line-height:1; }
.shc-tab-label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
}

/* --- STAGE / PANELS --- */
.shc-stage{
  position:relative;
  background:linear-gradient(180deg,#131322 0%,#0d0d18 100%);
  border:1px solid #252539;
  border-radius:20px;
  padding:36px 40px;
  min-height:440px;
  box-shadow:0 20px 60px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.03);
  overflow:hidden;
}
.shc-stage::before{
  content:'';
  position:absolute;
  top:-30%;
  right:-15%;
  width:500px;
  height:500px;
  background:radial-gradient(circle,rgba(124,92,252,0.08) 0%,transparent 65%);
  pointer-events:none;
}
.shc-panel{
  display:none;
  grid-template-columns:1fr 1.15fr;
  gap:36px;
  align-items:center;
  position:relative;
  z-index:1;
}
.shc-panel.is-active{
  display:grid;
  animation:shcFadeIn .35s ease;
}
@keyframes shcFadeIn{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}

/* --- COPY (left side) --- */
.shc-copy{ padding:8px 0; }
.shc-eyebrow{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  font-weight:700;
  color:#A78BFA;
  letter-spacing:.18em;
  text-transform:uppercase;
  background:rgba(124,92,252,0.10);
  border:1px solid rgba(124,92,252,0.30);
  padding:5px 12px;
  border-radius:20px;
  margin-bottom:18px;
}
.shc-title{
  font-family:'Space Grotesk',sans-serif;
  font-size:26px;
  font-weight:700;
  color:#e2e8f0;
  line-height:1.2;
  margin-bottom:14px;
  letter-spacing:.005em;
}
.shc-desc{
  font-size:15px;
  color:#a0a0b0;
  line-height:1.65;
  margin-bottom:18px;
}
.shc-points{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.shc-points li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  color:#c0d0e0;
  line-height:1.5;
}
.shc-points li span{
  color:#7C5CFC;
  font-weight:800;
  font-family:'JetBrains Mono',monospace;
  flex-shrink:0;
  margin-top:1px;
}

/* --- MOCKUP FRAME --- */
.mockup-frame{
  background:#0a0a12;
  border:1px solid #2a2540;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 18px 48px rgba(0,0,0,0.6),0 0 0 1px rgba(124,92,252,0.08) inset;
}
.mockup-bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:9px 14px;
  background:linear-gradient(180deg,#131322 0%,#0d0d18 100%);
  border-bottom:1px solid #252539;
}
.mockup-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  flex-shrink:0;
}
.mockup-dot.r{ background:#ef4444; }
.mockup-dot.y{ background:#facc15; }
.mockup-dot.g{ background:#22c55e; }
.mockup-url{
  flex:1;
  text-align:center;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:#7c7c94;
  background:#0a0a12;
  border:1px solid #1f1e30;
  border-radius:6px;
  padding:3px 10px;
  margin:0 auto;
  max-width:240px;
}
.mockup-body{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* --- DASHBOARD MOCKUP --- */
.dash-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.dash-stat{
  background:#0d0d18;
  border:1px solid #252539;
  border-radius:9px;
  padding:9px 10px;
}
.ds-lbl{
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  color:#7c7c94;
  text-transform:uppercase;
  margin-bottom:4px;
}
.ds-val{
  font-family:'JetBrains Mono',monospace;
  font-size:15px;
  font-weight:800;
  line-height:1;
}
.ds-val.grn{ color:#22c55e; }
.ds-val.red{ color:#ef4444; }
.ds-val.acc{ color:#A78BFA; }
.ds-val.pur{ color:#C4B5FD; }
.ds-sub{
  font-size:11px;
  color:#7c7c94;
  margin-top:3px;
  font-family:'JetBrains Mono',monospace;
}
.dash-chart{
  height:90px;
  background:#0d0d18;
  border:1px solid #252539;
  border-radius:9px;
  padding:6px;
}
.dash-chart svg{ width:100%; height:100%; display:block; }
.dash-todo{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.dt-row{
  display:flex;
  align-items:center;
  gap:9px;
  background:#0d0d18;
  border:1px solid #252539;
  border-radius:7px;
  padding:7px 10px;
  font-size:12px;
  color:#c0d0e0;
}
.dt-row.done{
  background:rgba(34,197,94,0.06);
  border-color:rgba(34,197,94,0.30);
}
.dt-row.done{ color:#22c55e; text-decoration:line-through; text-decoration-color:rgba(34,197,94,0.4); }
.dt-cb{
  width:14px;
  height:14px;
  border-radius:4px;
  border:1.5px solid #363650;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  flex-shrink:0;
}
.dt-row.done .dt-cb{
  background:#22c55e;
  border-color:#22c55e;
  color:#0a0a12;
}

/* --- JOURNAL MOCKUP --- */
.jnl-toolbar{
  display:flex;
  gap:6px;
  align-items:center;
}
.jnl-pill{
  font-size:11px;
  padding:5px 11px;
  border-radius:7px;
  border:1px solid #252539;
  background:#0d0d18;
  color:#a0a0b0;
  font-weight:600;
  font-family:'Rubik',sans-serif;
  white-space:nowrap;
}
.jnl-pill.act{
  background:#7C5CFC;
  color:#fff;
  border-color:#7C5CFC;
}
.jnl-pill.grow{
  flex:1;
  text-align:left;
  color:#7c7c94;
  font-style:italic;
}
.jnl-table{
  background:#0d0d18;
  border:1px solid #252539;
  border-radius:9px;
  overflow:hidden;
}
.jnl-th, .jnl-tr{
  display:grid;
  grid-template-columns:0.85fr 1fr 0.85fr 0.85fr 1fr 0.6fr;
  gap:8px;
  padding:8px 12px;
  align-items:center;
  font-size:11px;
}
.jnl-th{
  background:#08070f;
  border-bottom:1px solid #252539;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#7c7c94;
}
.jnl-tr{ border-bottom:1px solid #131322; color:#c0d0e0; }
.jnl-tr:last-child{ border-bottom:none; }
.jnl-tr .mono{ font-family:'JetBrains Mono',monospace; }
.jnl-tr .bold{ font-weight:700; color:#e2e8f0; }
.jnl-tr .grn{ color:#22c55e; font-weight:700; }
.jnl-tr .red{ color:#ef4444; font-weight:700; }
.tag-l, .tag-s{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  font-weight:700;
  padding:2px 7px;
  border-radius:4px;
  letter-spacing:.04em;
  width:fit-content;
}
.tag-l{ background:rgba(34,197,94,0.12); color:#22c55e; border:1px solid rgba(34,197,94,0.3); }
.tag-s{ background:rgba(239,68,68,0.12); color:#ef4444; border:1px solid rgba(239,68,68,0.3); }
.grd{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  font-weight:800;
  padding:2px 6px;
  border-radius:4px;
  width:fit-content;
}
.grd-a{ background:rgba(34,197,94,0.12); color:#22c55e; }
.grd-b{ background:rgba(167,139,250,0.12); color:#A78BFA; }
.grd-c{ background:rgba(124,92,252,0.12); color:#7C5CFC; }

/* --- ANALYTICS MOCKUP --- */
.ana-row{
  display:flex;
  gap:14px;
  align-items:center;
}
.ana-donut{
  position:relative;
  width:120px;
  height:120px;
  flex-shrink:0;
}
.ana-donut svg{ width:100%; height:100%; }
.ana-donut-c{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
}
.ana-donut-c .big{
  font-family:'JetBrains Mono',monospace;
  font-size:22px;
  font-weight:800;
  color:#22c55e;
  letter-spacing:-.02em;
}
.ana-donut-c .sm{
  font-size:11px;
  font-weight:700;
  color:#7c7c94;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.ana-side{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.ana-kv{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#0d0d18;
  border:1px solid #252539;
  border-radius:7px;
  padding:6px 10px;
  font-size:11px;
}
.ana-kv span{ color:#9090a8; }
.ana-kv b{ font-weight:700; color:#e2e8f0; font-size:11px; }
.ana-kv b.grn{ color:#22c55e; }
.ana-kv b.red{ color:#ef4444; }
.ana-bars{
  display:flex;
  align-items:flex-end;
  gap:6px;
  height:80px;
  padding:8px;
  background:#0d0d18;
  border:1px solid #252539;
  border-radius:9px;
}
.ana-bar{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  height:100%;
  justify-content:flex-end;
}
.ana-bar-fill{
  width:100%;
  border-radius:3px 3px 0 0;
  min-height:4px;
  opacity:.85;
}
.ana-bar span{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  color:#7c7c94;
}

/* --- CALENDAR MOCKUP --- */
.cal-strip{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.cal-hd{
  font-family:'Space Grotesk',sans-serif;
  font-size:14px;
  font-weight:700;
  color:#A78BFA;
  letter-spacing:.04em;
}
.cal-totals{
  font-size:11px;
  color:#9090a8;
  font-family:'JetBrains Mono',monospace;
}
.cal-totals .grn{ color:#22c55e; font-weight:700; }
.cal-mini{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:4px;
  background:#0d0d18;
  border:1px solid #252539;
  border-radius:9px;
  padding:8px;
}
.cal-head{
  font-size:11px;
  font-weight:700;
  color:#7c7c94;
  text-align:center;
  letter-spacing:.1em;
}
.cm{
  aspect-ratio:1.4;
  border-radius:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  font-weight:700;
  background:#08070f;
  border:1px solid #1a1a2e;
}
.cm.empty{ background:transparent; border:1px solid transparent; }
.cm.pos{ background:rgba(34,197,94,0.10); border-color:rgba(34,197,94,0.30); color:#22c55e; }
.cm.pos.hot{ background:rgba(34,197,94,0.25); border-color:rgba(34,197,94,0.55); }
.cm.neg{ background:rgba(239,68,68,0.10); border-color:rgba(239,68,68,0.30); color:#ef4444; }

/* --- TOOLS MOCKUP --- */
.tools-tabs{
  display:flex;
  gap:5px;
  background:#08070f;
  border:1px solid #252539;
  border-radius:8px;
  padding:4px;
}
.tools-tab{
  flex:1;
  text-align:center;
  font-size:11px;
  padding:6px 8px;
  border-radius:6px;
  color:#9090a8;
  font-weight:600;
}
.tools-tab.act{ background:#7C5CFC; color:#fff; }
.tools-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
}
.tools-input{
  background:#0d0d18;
  border:1px solid #252539;
  border-radius:7px;
  padding:8px 10px;
}
.tools-input span{
  font-size:11px;
  font-weight:700;
  color:#7c7c94;
  letter-spacing:.1em;
  text-transform:uppercase;
  display:block;
  margin-bottom:3px;
}
.tools-input b{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  font-weight:800;
  color:#e2e8f0;
}
.tools-out{
  background:linear-gradient(135deg,rgba(124,92,252,0.10) 0%,rgba(98,68,227,0.06) 100%);
  border:1px solid rgba(124,92,252,0.30);
  border-radius:9px;
  padding:11px 14px;
  text-align:center;
}
.to-headline{
  font-size:11px;
  font-weight:700;
  color:#A78BFA;
  letter-spacing:.15em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.to-bignum{
  font-family:'JetBrains Mono',monospace;
  font-size:26px;
  font-weight:800;
  color:#A78BFA;
  letter-spacing:-.02em;
  line-height:1;
}
.to-bignum span{
  font-size:13px;
  color:#9090a8;
  font-weight:600;
  margin-left:4px;
}
.to-risk{
  margin-top:6px;
  font-size:10px;
  font-weight:700;
  color:#facc15;
  letter-spacing:.04em;
}
.tools-curve{
  height:60px;
  background:#0d0d18;
  border:1px solid #252539;
  border-radius:7px;
  padding:4px;
}
.tools-curve svg{ width:100%; height:100%; display:block; }

/* --- PSYCHOLOGY MOCKUP --- */
.psy-row{
  display:flex;
  gap:14px;
  align-items:center;
}
.psy-ring{
  position:relative;
  width:110px;
  height:110px;
  flex-shrink:0;
}
.psy-ring svg{ width:100%; height:100%; }
.psy-ring-c{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
}
.psy-ring-c .big{
  font-family:'JetBrains Mono',monospace;
  font-size:24px;
  font-weight:800;
  color:#7C5CFC;
  line-height:1;
}
.psy-ring-c .sm{
  font-size:10px;
  font-weight:700;
  color:#7c7c94;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.psy-meta{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.psy-pill{
  font-size:11px;
  padding:7px 10px;
  border-radius:7px;
  border:1px solid;
  font-weight:600;
}
.psy-pill.grn{ background:rgba(34,197,94,0.08); border-color:rgba(34,197,94,0.30); color:#22c55e; }
.psy-pill.pur{ background:rgba(124,92,252,0.08); border-color:rgba(124,92,252,0.30); color:#A78BFA; }
.psy-mood{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.pm-row{
  display:flex;
  align-items:center;
  gap:10px;
  background:#0d0d18;
  border:1px solid #252539;
  border-radius:7px;
  padding:6px 10px;
}
.pm-emo{ font-size:14px; }
.pm-lbl{
  font-size:11px;
  color:#c0d0e0;
  font-weight:600;
  min-width:60px;
}
.pm-bar{
  flex:1;
  height:5px;
  background:#1a1a2e;
  border-radius:3px;
  overflow:hidden;
}
.pm-fill{ height:100%; border-radius:3px; }
.pm-num{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  font-weight:800;
  color:#22c55e;
  min-width:50px;
  text-align:right;
}
.pm-num.red{ color:#ef4444; }

/* ============================================================
   HIGH-QUALITY MOCKUP RENDERING
   Crisp text + sharp SVG charts across every showcase panel.
   - Antialiased + grayscale font smoothing
   - Integer font sizes (no fuzzy 8.5px / 9.5px / 10.5px / 11.5px)
   - Tabular numerals + slashed zero for stat numbers
   - Non-scaling SVG strokes (no stretched/blurred lines)
   - geometricPrecision rendering for clean curves
   ============================================================ */
.mockup-frame,
.mockup-frame *,
.shc-stage,
.shc-stage *,
.shc-tabs,
.shc-tabs *{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
}
.mockup-frame .ds-val,
.mockup-frame .ds-sub,
.mockup-frame .mockup-url,
.mockup-frame [class~="mono"],
.mockup-frame .ana-donut-c .big,
.mockup-frame .ana-bar span,
.mockup-frame .ana-kv b,
.mockup-frame .psy-ring-c .big,
.mockup-frame .to-bignum,
.mockup-frame .to-bignum span,
.mockup-frame .pm-num,
.mockup-frame .cal-hd,
.mockup-frame .cal-totals,
.mockup-frame .cm,
.mockup-frame .grd,
.mockup-frame .tag-l,
.mockup-frame .tag-s,
.mockup-frame .tools-input b{
  font-feature-settings:"zero" 1,"tnum" 1,"kern" 1,"ss01" 1;
  font-variant-numeric:slashed-zero tabular-nums;
}

/* SVG sharpness */
.mockup-frame svg{
  shape-rendering:geometricPrecision;
  text-rendering:geometricPrecision;
}
.mockup-frame svg path,
.mockup-frame svg circle,
.mockup-frame svg line,
.mockup-frame svg rect,
.mockup-frame svg polyline{
  vector-effect:non-scaling-stroke;
}

/* Browser address bar */
.mockup-url{
  font-size:11px;
  letter-spacing:.01em;
  color:#9090a8;
}

/* ---- Dashboard ---- */
.dash-stat{ padding:11px 13px; border-radius:10px; }
.ds-lbl{
  font-size:10px;
  letter-spacing:.12em;
  color:#9090a8;
  margin-bottom:5px;
}
.ds-val{
  font-size:18px;
  letter-spacing:-.01em;
  font-weight:800;
}
.ds-sub{ font-size:10px; margin-top:4px; color:#9090a8; }
.dash-chart{ height:96px; padding:8px; border-radius:10px; }
.dash-chart svg path[stroke]{
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(34,197,94,0.35));
}
.dt-row{
  font-size:12px;
  padding:9px 12px;
  border-radius:8px;
  color:#d0dce8;
}
.dt-row.done{ color:#22c55e; }
.dt-cb{
  width:16px;
  height:16px;
  border-radius:5px;
  font-size:10px;
  font-weight:800;
}

/* ---- Journal ---- */
.jnl-pill{
  font-size:11px;
  padding:6px 12px;
  border-radius:8px;
  letter-spacing:.01em;
}
.jnl-table{ border-radius:10px; }
.jnl-th,.jnl-tr{
  font-size:12px;
  padding:9px 13px;
  gap:10px;
}
.jnl-th{
  font-size:10px;
  letter-spacing:.12em;
  color:#9090a8;
}
.tag-l,.tag-s{
  font-size:10px;
  padding:3px 8px;
  letter-spacing:.06em;
  border-radius:5px;
}
.grd{
  font-size:11px;
  padding:3px 8px;
  border-radius:5px;
}

/* ---- Analytics ---- */
.ana-donut svg circle[stroke]{ stroke-width:13.5; }
.ana-donut-c .big{
  font-size:25px;
  letter-spacing:-.02em;
  font-weight:800;
}
.ana-donut-c .sm{
  font-size:10px;
  letter-spacing:.14em;
  color:#9090a8;
  margin-top:2px;
}
.ana-kv{
  font-size:12px;
  padding:7px 11px;
  border-radius:8px;
  color:#a0a0b0;
}
.ana-kv span{ color:#8a8aa0; }
.ana-kv b{ font-size:12px; font-weight:700; }
.ana-bars{
  height:84px;
  border-radius:10px;
  padding:10px;
  gap:7px;
}
.ana-bar-fill{
  border-radius:4px 4px 0 0;
  min-height:5px;
  opacity:1;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,0.08);
}
.ana-bar span{
  font-size:10px;
  letter-spacing:.02em;
  color:#9090a8;
  font-weight:600;
}

/* ---- Calendar ---- */
.cal-hd{ font-size:15px; letter-spacing:.05em; }
.cal-totals{ font-size:11px; }
.cal-mini{ border-radius:10px; padding:9px; gap:5px; }
.cal-head{ font-size:10px; letter-spacing:.14em; color:#9090a8; }
.cm{
  font-size:11px;
  border-radius:6px;
  font-weight:700;
}

/* ---- Tools ---- */
.tools-tab{ font-size:11px; padding:7px 9px; border-radius:7px; }
.tools-input{ padding:9px 11px; border-radius:8px; }
.tools-input span{
  font-size:10px;
  letter-spacing:.12em;
  color:#9090a8;
  margin-bottom:4px;
}
.tools-input b{ font-size:14px; letter-spacing:-.01em; }
.tools-out{ padding:13px 16px; border-radius:10px; }
.to-headline{ font-size:10px; letter-spacing:.18em; margin-bottom:5px; }
.to-bignum{ font-size:28px; letter-spacing:-.02em; }
.to-bignum span{ font-size:14px; margin-left:5px; }
.to-risk{ font-size:11px; margin-top:7px; letter-spacing:.05em; }
.tools-curve{ height:64px; padding:6px; border-radius:8px; }
.tools-curve svg path[stroke]{
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---- Psychology / Discipline ---- */
.psy-ring svg circle[stroke]{ stroke-width:11.5; }
.psy-ring-c .big{ font-size:26px; letter-spacing:-.02em; }
.psy-ring-c .sm{
  font-size:10px;
  letter-spacing:.14em;
  color:#9090a8;
  margin-top:2px;
}
.psy-pill{ font-size:12px; padding:8px 12px; border-radius:8px; }
.pm-row{ padding:7px 11px; border-radius:8px; }
.pm-emo{ font-size:15px; }
.pm-lbl{ font-size:12px; min-width:64px; font-weight:600; }
.pm-bar{ height:6px; border-radius:4px; }
.pm-fill{ border-radius:4px; }
.pm-num{ font-size:12px; min-width:54px; font-weight:800; }

/* ---- Slight breathing room in the mockup body ---- */
.mockup-body{ padding:18px; gap:13px; }

/* Mobile tweaks so the bumped sizes still fit */
@media(max-width:880px){
  .ds-val{ font-size:17px; }
  .ana-donut-c .big{ font-size:22px; }
  .psy-ring-c .big{ font-size:23px; }
  .to-bignum{ font-size:24px; }
  .jnl-th,.jnl-tr{ font-size:11px; padding:7px 9px; }
}

/* --- MOBILE RESPONSIVE --- */
@media(max-width:880px){
  .shc-panel{
    grid-template-columns:1fr;
    gap:24px;
  }
  .shc-stage{
    padding:24px 20px;
    min-height:auto;
  }
  .shc-title{ font-size:22px; }
  .shc-tab{ min-width:auto; padding:9px 12px; }
  .shc-tab-label{ font-size:10.5px; }
  .shc-tab.is-active::after{ display:none; }
  .dash-stats{ grid-template-columns:repeat(2,1fr); }
  .jnl-th, .jnl-tr{
    grid-template-columns:0.6fr 1fr 0.65fr 0.7fr 0.85fr 0.5fr;
    font-size:10px;
    padding:7px 8px;
  }
  .ana-row, .psy-row{ flex-direction:column; align-items:stretch; }
  .ana-donut, .psy-ring{ margin:0 auto; }
}
@media(max-width:520px){
  .shc-tab-label{ display:none; }
  .shc-tab{ padding:10px; min-width:auto; }
  .shc-tab-icon{ font-size:24px; }
  .tools-row{ grid-template-columns:1fr; }
  .dash-stats{ grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   CALENDAR JUMP-TO PICKER
   ============================================================ */
.cal-jump-btn{
  background:#0a0a12;
  border:1px solid #252539;
  border-radius:8px;
  padding:8px 14px;
  color:#e2e8f0;
  font-family:'Space Grotesk',sans-serif;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  letter-spacing:.04em;
  outline:none;
  transition:border-color .15s,background .15s;
  min-width:160px;
  justify-content:space-between;
}
.cal-jump-btn:hover{ border-color:#7C5CFC; background:#0d0d18; }
.cal-jump-btn.open{ border-color:#7C5CFC; background:#0d0d18; }
.cal-jump-caret{
  font-size:11px;
  color:#7C5CFC;
  transition:transform .2s ease;
  line-height:1;
}
.cal-jump-btn.open .cal-jump-caret{ transform:rotate(180deg); }

.cal-jump-popover{
  position:absolute;
  top:calc(100% + 10px);
  right:46px;
  background:linear-gradient(180deg,#131322 0%,#0d0d18 100%);
  border:1px solid #2a2540;
  border-radius:14px;
  padding:14px;
  width:300px;
  box-shadow:0 18px 50px rgba(0,0,0,0.65),inset 0 1px 0 rgba(255,255,255,0.03);
  z-index:60;
  animation:cjpFadeIn .18s ease-out;
}
@keyframes cjpFadeIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}
.cal-jump-popover::before{
  content:'';
  position:absolute;
  top:-6px;
  right:24px;
  width:10px;
  height:10px;
  background:#131322;
  border-left:1px solid #2a2540;
  border-top:1px solid #2a2540;
  transform:rotate(45deg);
}
.cjp-year-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.cjp-year-row button{
  width:34px;
  height:34px;
  background:#0a0a12;
  border:1px solid #252539;
  border-radius:8px;
  color:#a0a0b0;
  cursor:pointer;
  font-size:11px;
  transition:all .15s;
  flex-shrink:0;
}
.cjp-year-row button:hover{
  background:#1a1a2e;
  border-color:#7C5CFC;
  color:#7C5CFC;
}
.cjp-year-row input{
  flex:1;
  background:#0a0a12;
  border:1px solid #252539;
  border-radius:8px;
  color:#A78BFA;
  font-family:'Space Grotesk',sans-serif;
  font-size:16px;
  font-weight:800;
  text-align:center;
  padding:6px 0;
  outline:none;
  letter-spacing:.04em;
  font-feature-settings:"zero" 1,"tnum" 1;
  font-variant-numeric:slashed-zero tabular-nums;
  -moz-appearance:textfield;
}
.cjp-year-row input:focus{ border-color:#7C5CFC; }
.cjp-year-row input::-webkit-outer-spin-button,
.cjp-year-row input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.cjp-month-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-bottom:10px;
}
.cjp-month-grid button{
  background:#0a0a12;
  border:1px solid #252539;
  border-radius:8px;
  padding:10px 0;
  color:#c0d0e0;
  font-family:'Rubik',sans-serif;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:all .15s;
  letter-spacing:.02em;
}
.cjp-month-grid button:hover{
  background:#1a1a2e;
  border-color:#7C5CFC;
  color:#e2e8f0;
}
.cjp-month-grid button.current{
  border-color:rgba(124,92,252,0.55);
  color:#A78BFA;
}
.cjp-month-grid button.active{
  background:linear-gradient(135deg,#7C5CFC 0%,#6244E3 100%);
  border-color:#7C5CFC;
  color:#fff;
  box-shadow:0 4px 12px rgba(124,92,252,0.35);
}
.cjp-today-btn{
  width:100%;
  background:transparent;
  border:1px dashed #363650;
  border-radius:8px;
  padding:8px 0;
  color:#9090a8;
  font-family:'Rubik',sans-serif;
  font-size:11.5px;
  font-weight:600;
  cursor:pointer;
  transition:all .15s;
  letter-spacing:.04em;
}
.cjp-today-btn:hover{
  border-color:#22c55e;
  color:#22c55e;
  border-style:solid;
}

/* ============================================================
   17. CRISP COLOR SWEEP — remap legacy muted hex across the app
   ============================================================ */
html::before, html::after{
  opacity: 0.35 !important;
  filter: blur(72px) !important;
}
input::placeholder, textarea::placeholder{
  color: var(--hq-text-4) !important;
  opacity: 1 !important;
}

/* Muted / secondary copy */
.daily-todo-sub, .rule-desc, .hero-quote, .hero-date, .hero-subhead,
.section-sub, .feature-card p, .auth-subtitle, .checklist-sub,
.wr-lbl, .cdp-name, .cdp-sub, .cdp-empty, .daily-todo-empty,
.auth-toggle, .auth-info, .hero-trust, .landing-footer,
.prayer-error-msg, .prayer-loading, .prayer-location-row, .prayer-method-note,
.pr-quote, .ptp-loss-opt-desc, .trader-commitment-sub, .ptf-strength-verdict,
.ptf-strength-label, .ptf-plan-lbl, .ptp-risk-stat-lbl,
.np-date, .np-action-btn, .checklist-cooldown-sub, .checklist-edit-banner-sub,
.mt5-msg, .mt5-toggle-row .desc, .mt5-step .desc, .user-email,
.otp-subtitle, .otp-timer, .otp-resend, .auth-field label,
.shc-desc, .shc-tab, .ana-kv span, .ds-sub, .cal-head,
.bt-step .step-desc, .bt-tf-btn, .bt-mode-btn, .bt-speed-btn,
.tajweed-legend-title, .sr-eta-pill .sr-eta-label, .cjp-today-btn,
.azhkar-text, .azhkar-manage-btn, .collapsible-chevron,
.alert-modal-stat .lbl, .alert-modal-rule, .clr-modal-rule,
.rule-block .body p, .landing-cta-final p, .hero-stat .sub, .hero-stat .lbl{
  color: var(--hq-text-3) !important;
}

/* Body / list text */
.daily-todo-text, .checklist-text, .np-content, .rule-title,
.week-review-field, .editable, .alert-modal-msg,
.ptp-loss-opt-title, .trader-commitment-text, .shc-points li,
.mock-stat-lbl, .mock-row-lbl, .overview-stat span:first-child{
  color: var(--hq-text-2) !important;
}
.trade-detail-field .val, .day-summary-box .val{
  color: var(--hq-text-1) !important;
}

/* Primary headings & values */
.hero-greet, .hero-headline, .section-heading,
.feature-card h3, .landing-logo .logo-text, .auth-brand .logo,
.stat-card .label, .hp-stat .lbl, .brk-lbl, .day-summary-box .lbl{
  color: var(--hq-text-1) !important;
}

.hero-headline .accent{
  background: linear-gradient(110deg, #C4B5FD 0%, #D8B4FE 35%, #F0ABFC 70%, #FBCFE8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.hero-subhead{
  font-size: 18px !important;
  color: var(--hq-text-2) !important;
  line-height: 1.65 !important;
}
.feature-card p{
  font-size: var(--hq-text-sm) !important;
  line-height: 1.65 !important;
}
.section-sub{
  font-size: var(--hq-text-base) !important;
  color: var(--hq-text-3) !important;
}

/* Landing showcase tabs */
.shc-tabs{
  background: var(--hq-surface-2) !important;
  border-color: var(--hq-border) !important;
}
.shc-tab{
  font-family: 'Inter', sans-serif !important;
  font-size: var(--hq-text-sm) !important;
  color: var(--hq-text-3) !important;
}
.shc-tab:hover{
  color: var(--hq-text-1) !important;
  background: var(--hq-accent-soft) !important;
}
.shc-tab.is-active{
  background: var(--hq-accent) !important;
  color: #fff !important;
  border-color: var(--hq-accent-border) !important;
  box-shadow: 0 4px 14px rgba(124,92,252,0.35) !important;
}
.shc-tab.is-active::after{ border-top-color: var(--hq-accent) !important; }
.shc-title{
  font-family: 'Inter', sans-serif !important;
  font-size: 24px !important;
  color: var(--hq-text-1) !important;
}
.shc-eyebrow{
  color: var(--hq-accent-hover) !important;
  font-size: var(--hq-text-xs) !important;
}
.shc-stage{
  background: var(--hq-surface-1) !important;
  border-color: var(--hq-border) !important;
}
.shc-points li span{ color: var(--hq-accent-hover) !important; }

/* Prayer times — readable labels */
.pr-name{ font-size: 15px !important; color: var(--hq-text-1) !important; }
.pr-azan{ font-size: 18px !important; color: var(--hq-text-1) !important; }
.pr-iqamah{ font-size: 12px !important; color: var(--hq-text-3) !important; }
.pr-iqamah b{ color: var(--hq-text-2) !important; }
.pr-status{ font-size: var(--hq-text-xs) !important; color: var(--hq-text-3) !important; }
.prayer-row.passed .pr-name,
.prayer-row.passed .pr-azan{ color: var(--hq-text-4) !important; }
.prayer-refresh-btn{
  font-size: var(--hq-text-xs) !important;
  color: var(--hq-text-3) !important;
  border-color: var(--hq-border-2) !important;
}
.prayer-refresh-btn:hover{
  color: var(--hq-accent-hover) !important;
  border-color: var(--hq-accent-border) !important;
}

/* Pre-trade flow */
.ptf-step-label{ font-size: var(--hq-text-xs) !important; color: var(--hq-text-3) !important; }
.ptf-step-num{ font-size: 14px !important; color: var(--hq-text-3) !important; }
.ptp-risk-stat-val{ font-size: 15px !important; color: var(--hq-text-1) !important; }
.ptp-risk-title{ font-size: var(--hq-text-xs) !important; color: var(--hq-accent-hover) !important; }

/* Badges — slightly larger */
.badge{ font-size: var(--hq-text-xs) !important; }

/* Calendar */
.cal-day .daynum{ font-size: 13px !important; color: var(--hq-text-3) !important; }
.cal-day .pnl{ font-size: 14px !important; }

/* P&L colors — crisp */
.pnl-pos{ color: var(--hq-success-2) !important; }
.pnl-neg{ color: var(--hq-danger-2) !important; }
.grade-A\+, .grade-A{ color: var(--hq-success-2) !important; }
.grade-D, .grade-D\+{ color: var(--hq-danger-2) !important; }

/* Auth */
.auth-title{ font-size: 21px !important; color: var(--hq-text-1) !important; }
.auth-subtitle{ font-size: var(--hq-text-sm) !important; }
.auth-field input{ font-size: var(--hq-text-sm) !important; }

/* Notebook */
.np-title{ font-size: 15px !important; }
.np-content{ font-size: var(--hq-text-sm) !important; line-height: 1.75 !important; }

/* Chart detail pills */
.cdp-val{ font-size: 13px !important; color: var(--hq-text-1) !important; }
.cdp-name{ font-size: var(--hq-text-xs) !important; }

/* Compound / trade-tools tabs in body */
.tt-preset{ font-size: var(--hq-text-xs) !important; }
.cmp-mode-btn{ font-size: var(--hq-text-sm) !important; }

/* =========================================================
   BACKTEST CHART · FULLSCREEN MODE
   When viewing the backtest replay chart, hide everything 
   except the chart itself so the user gets a full-screen 
   trading view.
   ========================================================= */
body.bt-fullscreen{overflow:hidden}
body.bt-fullscreen .sidebar{transform:translateX(-280px);transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:none;opacity:0}
body.bt-fullscreen .main{margin-left:0 !important;padding:0 !important;transition:margin-left .3s cubic-bezier(.4,0,.2,1)}
body.bt-fullscreen #simulatorPage > .top-bar,
body.bt-fullscreen #simulatorPage > .bt-guide{display:none !important}
body.bt-fullscreen #simulatorPage{padding:0;margin:0}
body.bt-fullscreen #simulatorPage .bt-shell{
  margin:0 !important;
  border-radius:0 !important;
  height:100vh !important;
  display:flex !important;
  flex-direction:column !important;
  border:none !important;
  box-shadow:none !important;
}
body.bt-fullscreen #simulatorPage .bt-chart-wrap{
  flex:1 1 auto !important;
  height:auto !important;
  min-height:0;
}
.sidebar{transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s ease}
.main{transition:margin-left .3s cubic-bezier(.4,0,.2,1)}

/* Exit fullscreen button (lives in bt-actions, only visible in fullscreen) */
.bt-exit-fs{
  display:none;
  background:rgba(155,123,255,0.12);
  border:1px solid rgba(155,123,255,0.4);
  color:#C4B5FD;
  padding:7px 14px;
  border-radius:8px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  letter-spacing:.04em;
  transition:all .18s;
  align-items:center;
  gap:6px;
}
.bt-exit-fs:hover{background:rgba(155,123,255,0.25);border-color:rgba(155,123,255,0.6);color:#fff;transform:translateY(-1px)}
body.bt-fullscreen .bt-exit-fs{display:inline-flex}

/* Demo data banner (shown when synthetic data is in use) */
.bt-demo-banner{
  position:absolute;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:6;
  background:rgba(245,158,11,0.14);
  border:1px solid rgba(245,158,11,0.45);
  color:#fbbf24;
  padding:6px 14px;
  border-radius:20px;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  display:none;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(0,0,0,0.4);
  pointer-events:none;
}
.bt-demo-banner.active{display:inline-flex;align-items:center;gap:6px;animation:fadeIn .35s ease}

/* Smoother chart loading */
.bt-chart-loading{transition:opacity .3s ease}
.bt-chart-loading.hide{opacity:0}
.bt-replay-chart-host{transition:opacity .25s ease}

/* Make replay chart fill space properly */
.bt-replay-chart-host .lwc-mount{width:100% !important;height:100% !important}

/* Import-data modal help block */
.bt-import-help{
  background:linear-gradient(135deg,rgba(124,92,252,0.07),rgba(124,92,252,0.02));
  border:1px solid rgba(124,92,252,0.25);
  border-radius:12px;
  padding:14px 18px;
  margin-bottom:18px;
}
.bt-import-help-title{
  font-size:12px;
  font-weight:700;
  color:#C4B5FD;
  margin-bottom:8px;
  letter-spacing:.04em;
}
.bt-import-help-list{
  list-style:none;
  padding:0;
  margin:0 0 10px 0;
  font-size:12px;
  color:#a0a0b0;
  line-height:1.7;
}
.bt-import-help-list li{padding-left:16px;position:relative}
.bt-import-help-list li::before{content:'›';position:absolute;left:0;color:#7C5CFC;font-weight:800}
.bt-import-help-list strong{color:#e2e8f0;font-weight:700}
.bt-import-help-list em{color:#C4B5FD;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px}
.bt-import-help-formats{
  font-size:11px;
  color:#9090a8;
  font-family:'JetBrains Mono',monospace;
  padding-top:8px;
  border-top:1px dashed rgba(124,92,252,0.18);
  line-height:1.6;
}
.bt-import-help-formats code{
  background:#0a0a12;
  border:1px solid #252539;
  padding:1px 6px;
  border-radius:4px;
  color:#A78BFA;
  font-size:10px;
}

/* Imported-data tag (shown when chart is using user-imported data) */
.bt-imported-tag{
  position:absolute;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:6;
  background:rgba(34,197,94,0.14);
  border:1px solid rgba(34,197,94,0.45);
  color:#4ade80;
  padding:6px 14px;
  border-radius:20px;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  display:none;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(0,0,0,0.4);
  pointer-events:none;
}
.bt-imported-tag.active{display:inline-flex;align-items:center;gap:6px;animation:fadeIn .35s ease}

/* ============================================================
   ACCOUNT EQUITY WIDGET — animated candle background
   ============================================================ */
.eq-widget-wrap{
  position:relative;overflow:hidden;border-radius:18px;
  background:linear-gradient(160deg,#020c06 0%,#030f08 45%,#040a0a 100%);
  border:1px solid rgba(34,197,94,0.22);
  box-shadow:
    0 0 0 1px rgba(34,197,94,0.06) inset,
    0 0 40px rgba(34,197,94,0.06),
    0 12px 40px rgba(0,0,0,0.6);
  padding:16px 20px 14px;
  min-width:240px;
  text-align:right;
}
.eq-widget-wrap::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,197,94,0.5),transparent);
}
.eq-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;border-radius:18px;
  /* Promote the live candle canvas to its OWN GPU compositing layer and
     contain its paint, so the per-frame redraw stays inside this layer
     instead of forcing the whole page to repaint. This is what makes the
     animation safe to run on mobile (previously it was frozen on phones
     because the scrolling repaint caused full-page flicker/stutter). */
  transform:translateZ(0);
  will-change:transform;
  contain:strict;
  backface-visibility:hidden;
}
.eq-glass{
  position:absolute;inset:0;pointer-events:none;border-radius:18px;
  background:linear-gradient(160deg,rgba(2,12,6,0.55) 0%,rgba(2,10,5,0.30) 40%,rgba(2,8,5,0.55) 65%,rgba(2,8,5,0.88) 100%);
}
.eq-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-end}
.eq-live-row{display:flex;align-items:center;gap:6px;margin-bottom:8px;justify-content:flex-end}
.eq-dot{
  width:6px;height:6px;border-radius:50%;
  background:#22c55e;box-shadow:0 0 8px #22c55e,0 0 16px rgba(34,197,94,0.4);
  animation:eqPulseDot 1.5s ease-in-out infinite;flex-shrink:0;
}
@keyframes eqPulseDot{
  0%,100%{opacity:1;box-shadow:0 0 8px #22c55e,0 0 16px rgba(34,197,94,0.4)}
  50%{opacity:0.45;box-shadow:0 0 4px #22c55e}
}
.eq-live-label{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:800;color:#22c55e;letter-spacing:.2em;text-transform:uppercase}
.eq-widget-title{font-family:'Space Grotesk',sans-serif;font-size:9px;font-weight:700;color:rgba(134,186,155,0.55);letter-spacing:.18em;text-transform:uppercase}
.eq-widget-wrap .eq-val{
  font-family:'Share Tech Mono','JetBrains Mono',monospace !important;
  font-size:38px !important;font-weight:400 !important;
  line-height:1.05;letter-spacing:.03em !important;
  font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums;
  margin-bottom:3px;
  -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;
  filter:drop-shadow(0 0 18px currentColor);
}
.eq-sub{font-family:'JetBrains Mono',monospace;font-size:11px;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums;letter-spacing:.04em;-webkit-font-smoothing:antialiased}
.eq-risk-section{width:100%}
.eq-risk-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(34,197,94,0.2),transparent);margin:10px 0 8px}
.eq-risk-row{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.eq-risk-label-text{font-size:9px;font-weight:700;letter-spacing:.14em;color:rgba(134,186,155,0.4);text-transform:uppercase;font-family:'JetBrains Mono',monospace}
.eq-risk-right{display:flex;align-items:center;gap:8px}
.eq-risk-pct{font-size:9px;font-family:'JetBrains Mono',monospace;color:rgba(134,186,155,0.6);font-weight:700;background:rgba(34,197,94,0.08);padding:2px 8px;border-radius:9px;border:1px solid rgba(34,197,94,0.15);letter-spacing:.04em}
.eq-risk-amt{font-family:'Share Tech Mono','JetBrains Mono',monospace;font-size:16px;font-weight:700;color:#f87171;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
@media(max-width:760px){.eq-widget-wrap .eq-val{font-size:26px !important}}

/* ============================================================
   PSYCHOLOGY — Tab nav + Session-based Live Tracker
   ============================================================ */
.psych-tabs{
  display:flex;gap:6px;background:#0a0a12;border:1px solid #252539;
  border-radius:14px;padding:5px;margin-bottom:24px;
  width:fit-content;flex-wrap:wrap;
}
.psych-tab{
  background:transparent;border:none;color:#9090a8;
  padding:10px 22px;border-radius:10px;cursor:pointer;
  font-family:'Rubik',sans-serif;font-size:13px;font-weight:600;
  transition:all .2s;display:inline-flex;align-items:center;gap:8px;
}
.psych-tab:hover{color:#e2e8f0;background:rgba(124,92,252,0.06)}
.psych-tab.active{
  background:linear-gradient(135deg,#7C5CFC 0%,#6244E3 100%);
  color:#fff;box-shadow:0 4px 14px rgba(124,92,252,0.3);
}
.psych-tab-count{
  background:rgba(255,255,255,0.18);color:#fff;
  padding:1px 8px;border-radius:10px;font-size:10px;font-weight:800;
  font-family:'JetBrains Mono',monospace;
}
.psych-pane{display:none;animation:fadeIn .25s ease}
.psych-pane.active{display:block}

/* === Top bar with New Session button === */
.psych-tracker-topbar{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;margin-bottom:20px;flex-wrap:wrap;
}
.psych-tracker-title{
  font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;
  color:#e2e8f0;letter-spacing:.03em;margin-bottom:3px;
}
.psych-tracker-sub{
  font-size:12px;color:#9090a8;line-height:1.4;
}
.psych-new-session-btn{
  background:linear-gradient(135deg,#7C5CFC 0%,#6244E3 100%);color:#fff;
  border:none;padding:11px 22px;border-radius:10px;font-weight:700;
  font-size:13px;font-family:'Rubik',sans-serif;cursor:pointer;
  transition:all .2s;box-shadow:0 4px 12px rgba(124,92,252,0.25);
  display:inline-flex;align-items:center;gap:6px;
}
.psych-new-session-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(124,92,252,0.4)}

/* === Empty state === */
.psych-empty-active{
  background:rgba(10,10,18,0.92);border:1px dashed #252539;
  border-radius:16px;padding:48px 24px;text-align:center;
}
.psych-empty-active-icon{font-size:54px;margin-bottom:14px;opacity:.6;display:block}
.psych-empty-active h3{
  font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;
  color:#e2e8f0;letter-spacing:.03em;margin-bottom:6px;
}
.psych-empty-active p{font-size:13px;color:#9090a8;line-height:1.6;max-width:420px;margin:0 auto}

/* === Session card === */
.psych-session-card{
  background:rgba(10,10,18,0.92);
  border:1px solid #252539;border-radius:16px;
  overflow:hidden;position:relative;margin-bottom:16px;
}
.psych-session-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#06B6D4,#F59E0B,#22C55E);
  opacity:.7;
}
.psych-session-header{
  display:flex;align-items:center;gap:14px;padding:18px 22px;
  background:linear-gradient(180deg,rgba(124,92,252,0.04) 0%,transparent 100%);
  border-bottom:1px solid #1f1e30;
}
.psych-session-meta{flex:1;min-width:0}
.psych-session-id{
  font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;
  color:#A78BFA;letter-spacing:.04em;margin-bottom:3px;
}
.psych-session-started{
  font-size:11px;color:#9090a8;font-family:'JetBrains Mono',monospace;
  letter-spacing:.04em;
}
.psych-session-cancel{
  background:transparent;border:1px solid #252539;color:#7c7c94;
  width:30px;height:30px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;transition:all .15s;flex-shrink:0;
}
.psych-session-cancel:hover{border-color:#991b1b;color:#ef4444;background:#1f0a0a}

/* Progress dots */
.progress-dots{display:flex;gap:6px;align-items:center}
.progress-dots .dot{
  width:11px;height:11px;border-radius:50%;
  background:#252539;border:1px solid #363650;
  transition:all .3s;
}
.progress-dots .dot.done.dot-before{background:#06B6D4;border-color:#0891B2;box-shadow:0 0 8px rgba(6,182,212,0.5)}
.progress-dots .dot.done.dot-during{background:#F59E0B;border-color:#D97706;box-shadow:0 0 8px rgba(245,158,11,0.5)}
.progress-dots .dot.done.dot-after {background:#22C55E;border-color:#16A34A;box-shadow:0 0 8px rgba(34,197,94,0.5)}
.progress-dots .label{
  font-size:10px;color:#9090a8;font-family:'JetBrains Mono',monospace;
  letter-spacing:.05em;margin-left:6px;
}

/* === Phase blocks inside session === */
.psych-phase-block{
  padding:18px 22px;border-bottom:1px solid #1f1e30;
  position:relative;transition:background .2s;
}
.psych-phase-block:last-child{border-bottom:none}
.psych-phase-block.current{background:rgba(124,92,252,0.025)}
.psych-phase-block.locked{opacity:.45;background:rgba(8,8,14,0.4)}

.psych-phase-block::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:transparent;
}
.psych-phase-block.phase-before.current::before{background:#06B6D4}
.psych-phase-block.phase-during.current::before{background:#F59E0B}
.psych-phase-block.phase-after.current::before {background:#22C55E}
.psych-phase-block.done.phase-before::before {background:rgba(6,182,212,0.3)}
.psych-phase-block.done.phase-during::before {background:rgba(245,158,11,0.3)}
.psych-phase-block.done.phase-after::before  {background:rgba(34,197,94,0.3)}

.psych-phase-head{
  display:flex;align-items:center;gap:12px;margin-bottom:12px;
}
.psych-phase-icon{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  background:rgba(124,92,252,0.08);border:1px solid rgba(124,92,252,0.15);
}
.psych-phase-block.phase-before .psych-phase-icon{background:rgba(6,182,212,0.1);border-color:rgba(6,182,212,0.2)}
.psych-phase-block.phase-during .psych-phase-icon{background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,0.2)}
.psych-phase-block.phase-after  .psych-phase-icon{background:rgba(34,197,94,0.1);border-color:rgba(34,197,94,0.2)}

.psych-phase-text{flex:1;min-width:0}
.psych-phase-title{
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;
  color:#e2e8f0;letter-spacing:.03em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.psych-phase-sub{font-size:11px;color:#9090a8;margin-top:3px;line-height:1.4}
.psych-phase-time{font-size:10px;color:#7c7c94;font-family:'JetBrains Mono',monospace;letter-spacing:.04em;margin-top:3px}
.psych-phase-time .ts-month{color:#A78BFA;font-weight:700}
.psych-phase-time .ts-time{color:#7C5CFC;font-weight:700}
.psych-phase-time .ts-year{color:#9090a8}
.psych-phase-time .ts-dot{color:#7c7c94;margin:0 5px}

.phase-check{
  font-size:9px;font-weight:800;font-family:'JetBrains Mono',monospace;
  background:rgba(34,197,94,0.15);color:#22C55E;
  border:1px solid rgba(34,197,94,0.3);
  padding:2px 8px;border-radius:10px;letter-spacing:.08em;
}
.phase-current-pill{
  font-size:9px;font-weight:800;font-family:'JetBrains Mono',monospace;
  background:linear-gradient(135deg,#7C5CFC,#6244E3);color:#fff;
  padding:3px 9px;border-radius:10px;letter-spacing:.08em;
}
.phase-locked-pill{
  font-size:9px;font-weight:700;font-family:'JetBrains Mono',monospace;
  color:#7c7c94;background:#1a1a2e;border:1px solid #252539;
  padding:2px 8px;border-radius:10px;letter-spacing:.05em;
}

.psych-phase-edit{
  background:transparent;border:1px solid #252539;color:#9090a8;
  width:30px;height:30px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;transition:all .15s;flex-shrink:0;
}
.psych-phase-edit:hover{border-color:#7C5CFC;color:#A78BFA;background:rgba(124,92,252,0.08)}

.psych-phase-content{
  display:flex;flex-direction:column;gap:6px;
  padding-left:50px;  /* aligns with text under icon */
}
.psych-phase-mood{
  display:flex;align-items:center;gap:10px;
  font-size:14px;color:#e2e8f0;font-weight:600;
}
.psych-phase-mood .emoji{font-size:22px}
.psych-phase-notes{
  font-size:12px;color:#a0a0b0;line-height:1.55;
  background:#0a0a12;border:1px solid #1f1e30;border-radius:8px;
  padding:10px 12px;white-space:pre-wrap;word-break:break-word;
  font-family:'Rubik',sans-serif;
}

/* === Mood picker === */
.mood-picker{
  display:grid;grid-template-columns:repeat(8,1fr);gap:6px;
  margin:10px 0;
}
@media(max-width:780px){.mood-picker{grid-template-columns:repeat(4,1fr)}}
.mood-btn{
  background:#0a0a12;border:1px solid #252539;border-radius:10px;
  padding:9px 6px;cursor:pointer;transition:all .15s;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-family:'Rubik',sans-serif;
}
.mood-btn:hover{
  border-color:#7C5CFC;background:#0d0d1c;transform:translateY(-1px);
}
.mood-btn.selected{
  background:linear-gradient(135deg,rgba(124,92,252,0.18) 0%,rgba(98,68,227,0.08) 100%);
  border-color:#7C5CFC;
  box-shadow:0 0 0 2px rgba(124,92,252,0.15), 0 4px 12px rgba(124,92,252,0.25);
}
.mood-btn-emoji{font-size:20px;line-height:1}
.mood-btn-label{font-size:10px;color:#a0a0b0;font-weight:600;letter-spacing:.02em}
.mood-btn.selected .mood-btn-label{color:#C4B5FD}

.psych-log-notes{
  width:100%;background:#0a0a12;border:1px solid #252539;border-radius:10px;
  padding:10px 12px;color:#e2e8f0;font-family:'Rubik',sans-serif;font-size:12px;
  outline:none;resize:vertical;min-height:60px;max-height:160px;line-height:1.5;
  transition:all .2s;margin-bottom:10px;
}
.psych-log-notes:focus{
  border-color:#7C5CFC;background:#0d0d1c;
  box-shadow:0 0 0 3px rgba(124,92,252,0.1);
}
.psych-log-notes::placeholder{color:#4a4a5e;font-size:11px}

.psych-log-save{
  width:100%;background:linear-gradient(135deg,#7C5CFC 0%,#6244E3 100%);color:#fff;
  border:none;padding:12px 16px;border-radius:10px;font-weight:700;
  font-size:13px;font-family:'Rubik',sans-serif;cursor:pointer;
  transition:all .18s;display:flex;align-items:center;justify-content:center;gap:6px;
  box-shadow:0 4px 12px rgba(124,92,252,0.25);
}
.psych-log-save:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(124,92,252,0.4)}
.psych-log-save.phase-before-btn{
  background:linear-gradient(135deg,#06B6D4 0%,#0891B2 100%);
  box-shadow:0 4px 12px rgba(6,182,212,0.25);
}
.psych-log-save.phase-during-btn{
  background:linear-gradient(135deg,#F59E0B 0%,#D97706 100%);
  box-shadow:0 4px 12px rgba(245,158,11,0.25);
  color:#0a0a12;
}
.psych-log-save.phase-after-btn{
  background:linear-gradient(135deg,#22C55E 0%,#16A34A 100%);
  box-shadow:0 4px 12px rgba(34,197,94,0.25);
  color:#0a0a12;
}

/* === Completion celebration === */
.psych-session-complete-banner{
  background:linear-gradient(135deg,rgba(34,197,94,0.12) 0%,rgba(34,197,94,0.04) 100%);
  border:1px solid rgba(34,197,94,0.4);border-radius:12px;
  padding:14px 18px;display:flex;align-items:center;gap:12px;
  margin:0 22px 18px;
}
.psych-session-complete-icon{font-size:24px;flex-shrink:0}
.psych-session-complete-text{flex:1}
.psych-session-complete-title{
  font-size:13px;font-weight:700;color:#22C55E;margin-bottom:2px;
}
.psych-session-complete-sub{
  font-size:11px;color:#a0a0b0;line-height:1.4;
}

/* === Past sessions === */
.psych-past-session{
  background:#0a0a12;border:1px solid #1f1e30;border-radius:12px;
  margin-bottom:8px;overflow:hidden;transition:border-color .2s;
}
.psych-past-session:hover{border-color:#7c7c94}
.psych-past-head{
  display:flex;align-items:center;gap:14px;padding:12px 16px;cursor:pointer;
}
.psych-past-head:hover{background:rgba(124,92,252,0.03)}
.psych-past-emojis{
  font-size:18px;font-family:'JetBrains Mono',monospace;
  letter-spacing:.1em;color:#9090a8;flex-shrink:0;
}
.psych-past-meta{flex:1;min-width:0}
.psych-past-time{
  font-size:12px;color:#e2e8f0;font-family:'JetBrains Mono',monospace;
  letter-spacing:.03em;font-weight:600;
}
.psych-past-time .ts-month{color:#A78BFA;font-weight:700}
.psych-past-time .ts-time{color:#7C5CFC;font-weight:700}
.psych-past-time .ts-year{color:#9090a8}
.psych-past-time .ts-dot{color:#7c7c94;margin:0 5px}
.psych-past-duration{
  font-size:10px;color:#7c7c94;font-family:'JetBrains Mono',monospace;
  letter-spacing:.05em;margin-top:2px;
}
.psych-past-chevron{color:#7c7c94;font-size:11px;transition:transform .25s;flex-shrink:0}
.psych-past-session.open .psych-past-chevron{transform:rotate(180deg);color:#7C5CFC}
.psych-past-body{padding:0 16px 16px}
.psych-past-actions{
  display:flex;gap:8px;margin-top:8px;padding-top:10px;border-top:1px solid #1f1e30;
}
.psych-past-delete-btn{
  background:transparent;border:1px solid #991b1b;color:#ef4444;
  padding:7px 14px;border-radius:8px;font-size:11px;font-weight:600;
  cursor:pointer;font-family:'Rubik',sans-serif;transition:all .15s;
}
.psych-past-delete-btn:hover{background:#1f0a0a}



@media (max-width: 768px){

  /* ---------- 1. SESSION STRIP: kill all repaint sources ----------
     backdrop-filter on the strip was the #1 cause of full-page
     repaint — every inner animation forced the blur layer to
     recompute, which dragged the rest of the dashboard with it.
     We drop the blur, simplify shadows, and freeze all inner
     animations on mobile. The strip stays fully readable. */
  .dash-session-strip{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:linear-gradient(180deg,#08080e 0%,#0a0814 100%) !important;
    box-shadow:
      0 2px 12px rgba(0,0,0,0.4),
      inset 0 1px 0 rgba(255,255,255,0.03) !important;
    contain:strict !important;
    isolation:isolate !important;
    transform:translateZ(0) !important;
    -webkit-transform:translateZ(0) !important;
    will-change:transform !important;
    content-visibility:auto !important;
    contain-intrinsic-size:auto 80px !important;
  }

  /* Freeze every animation / transition inside the strip. Static
     visuals only — no blink, no shimmer, no opacity pulse. */
  .dash-session-strip *,
  .dash-session-strip *::before,
  .dash-session-strip *::after{
    animation:none !important;
    transition:none !important;
  }

  /* Active session bar — keep the static glow, drop the pulse */
  .dss-tl-bar.dss-active{
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.45),
      0 0 10px rgba(255,255,255,0.18),
      inset 0 1px 0 rgba(255,255,255,0.35) !important;
  }
  .dss-tl-bar.dss-active::before{
    opacity:0.55 !important;
    background:rgba(255,255,255,0.06) !important;
  }
  /* Shimmer overlay completely off on mobile — main repaint culprit */
  .dss-tl-bar.dss-active::after{ display:none !important; }

  /* NOW indicator — keep visible, no animated `left` transition
     (which used to relayout the whole strip every tick) */
  .dss-now{ transition:none !important; }
  .dss-now-line{
    box-shadow:
      0 0 6px rgba(255,255,255,0.7),
      0 0 4px rgba(255,107,157,0.7) !important;
  }
  .dss-now-line::before,
  .dss-now-line::after{
    box-shadow:0 0 6px rgba(255,255,255,0.7) !important;
  }

  /* Live-time pills — static, no opacity blink */
  .dss-live-time,
  .dss-now-time{
    opacity:1 !important;
    background:rgba(0,0,0,0.6) !important;
    border-color:rgba(255,255,255,0.35) !important;
    box-shadow:0 2px 6px rgba(0,0,0,0.4) !important;
  }
  .dss-live-time::before,
  .dss-now-time::before{
    opacity:1 !important;
    transform:none !important;
    box-shadow:0 0 4px rgba(255,107,157,0.85) !important;
  }

  /* ---------- 2. SIDEBAR: restore top text/logo visibility ----------
     The SURRU logo at the very top of the side-menu was being
     hidden behind the phone's status bar / notch. Push the
     content down past the safe-area inset. */
  .sidebar{
    padding-top:calc(20px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  /* ---------- 3. MODALS: restore title + close button visibility ----------
     The mobile-topbar sits at z-index 500 and modal-backdrop was
     at z-index 200, so when a modal was opened and its content
     was taller than the viewport, scrolling the backdrop pushed
     the title/✕ behind the fixed topbar. Raise the backdrop
     above everything else, then make the modal's first row
     sticky so the title + close button stay pinned no matter
     how far the form is scrolled. */
  .modal-backdrop{
    z-index:2000 !important;
    padding-top:calc(env(safe-area-inset-top, 0px) + 16px) !important;
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
  }

  /* The first child of every .modal is the title + ✕ row.
     Make it sticky inside the modal. Negative margins extend
     it edge-to-edge against the modal's mobile padding (16px 12px). */
  .modal > div:first-child{
    position:sticky !important;
    top:0 !important;
    z-index:5 !important;
    background:rgba(10,10,18,0.97) !important;
    margin:-16px -12px 14px -12px !important;
    padding:14px 14px !important;
    border-bottom:1px solid rgba(40,30,70,0.6) !important;
    border-top-left-radius:14px !important;
    border-top-right-radius:14px !important;
  }

  /* day-modal uses its own header element — make it sticky too */
  .day-modal-header{
    position:sticky !important;
    top:0 !important;
    z-index:5 !important;
  }
}

/* ============================================================
   SIDEBAR FIX — Scrollable nav with sticky footer
   Fixes: email + logout button hidden below viewport when
   nav has too many items. Linear/Notion-style polish.
   ============================================================ */

.sidebar {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

.sidebar > *:not(nav) {
  flex-shrink: 0;
}

.sidebar nav {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding-right: 6px;
  margin-right: -6px;
  scrollbar-width: thin;
  scrollbar-color: #7c7c94 transparent;
}

.sidebar nav::-webkit-scrollbar { width: 4px; }
.sidebar nav::-webkit-scrollbar-track { background: transparent; }
.sidebar nav::-webkit-scrollbar-thumb {
  background: #252539;
  border-radius: 2px;
}
.sidebar nav::-webkit-scrollbar-thumb:hover { background: #4a4a6a; }

.sidebar nav + div {
  margin-top: 16px;
  position: relative;
}
.sidebar nav + div::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -16px;
  right: -16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #252539 30%, #252539 70%, transparent);
}

.user-pill {
  margin-top: 12px !important;
  padding: 12px !important;
  background: linear-gradient(135deg, #131322 0%, #0a0a12 100%) !important;
  border: 1px solid #2a2a3a !important;
  border-radius: 12px !important;
  transition: all 0.2s ease;
  cursor: default;
}
.user-pill:hover {
  border-color: #3a3a5a !important;
  background: linear-gradient(135deg, #1a1a2e 0%, #131322 100%) !important;
}

.user-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #7C5CFC, #6244E3) !important;
  box-shadow: 0 4px 12px rgba(124, 92, 252, 0.3);
  font-size: 15px !important;
}

.user-info { min-width: 0; }
.user-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #e8e8f0 !important;
  letter-spacing: 0.01em;
}
.user-email {
  font-size: 10.5px !important;
  color: #9090a8 !important;
  margin-top: 1px;
}

.user-pill .logout-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid #252539 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #a0a0b0 !important;
  cursor: pointer;
  transition: all 0.15s ease;
}
.user-pill .logout-btn:hover {
  background: #1a1a2e !important;
  color: #fff !important;
  border-color: #3a3a5a !important;
  transform: translateY(-1px);
}
.user-pill .logout-btn[data-action="auth:logout"]:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}
.user-pill #syncNowBtn:hover {
  background: rgba(124, 92, 252, 0.1) !important;
  border-color: #7C5CFC !important;
  color: #7C5CFC !important;
}

@media (max-width: 768px) {
  .sidebar {
    height: 100vh !important;
    max-height: 100vh !important;
  }
}

/* ============================================================
   PREMIUM LOGOUT MODAL — 4K 3D glassmorphism confirmation
   ============================================================ */

.logout-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 12, 0.7);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.logout-modal-backdrop.open {
  display: flex;
  opacity: 1;
}

.logout-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, rgba(20, 18, 36, 0.95) 0%, rgba(12, 10, 24, 0.97) 100%);
  border-radius: 24px;
  padding: 0;
  overflow: hidden;
  transform: scale(0.85) translateY(20px);
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Multi-layer 3D shadow + glow */
  box-shadow:
    0 0 0 1px rgba(124, 92, 252, 0.18),
    0 0 60px rgba(124, 92, 252, 0.25),
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 12px 32px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}
.logout-modal-backdrop.open .logout-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Animated gradient border (conic) — gives the "4K" premium feel */
.logout-modal::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 26px;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(124, 92, 252, 0.5) 25%,
    transparent 50%,
    rgba(239, 68, 68, 0.35) 75%,
    transparent 100%
  );
  z-index: -1;
  opacity: 0.6;
  animation: logoutSpin 6s linear infinite;
}
@keyframes logoutSpin {
  to { transform: rotate(360deg); }
}

/* Soft inner glow */
.logout-modal::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -10%;
  width: 120%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(124, 92, 252, 0.18) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.logout-modal-header {
  position: relative;
  z-index: 1;
  padding: 28px 32px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(124, 92, 252, 0.12);
}

.logout-modal-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.logout-modal-logo .logo-icon {
  font-size: 22px;
  filter: drop-shadow(0 0 10px rgba(124, 92, 252, 0.5));
}
.logout-modal-logo .logo-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 900;
  color: #7C5CFC;
  letter-spacing: 0.18em;
  text-shadow: 0 0 24px rgba(124, 92, 252, 0.45);
}
.logout-modal-sub {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.28em;
  color: #7c7c94;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
}

.logout-modal-body {
  position: relative;
  z-index: 1;
  padding: 28px 32px 30px;
  text-align: center;
}

.logout-modal-icon-wrap {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18) 0%, rgba(239, 68, 68, 0.06) 100%);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #ef4444;
  box-shadow:
    0 8px 24px rgba(239, 68, 68, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 8px rgba(239, 68, 68, 0.15);
  transform: translateZ(0);
}

.logout-modal-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}

.logout-modal-msg {
  font-size: 13.5px;
  color: #a0a0b0;
  line-height: 1.6;
  margin: 0 0 24px;
  font-family: 'Rubik', sans-serif;
}

.logout-modal-actions {
  display: flex;
  gap: 10px;
}

.logout-modal-cancel,
.logout-modal-confirm {
  flex: 1;
  padding: 13px 20px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-family: 'Rubik', sans-serif;
  letter-spacing: 0.02em;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.logout-modal-cancel {
  background: rgba(255, 255, 255, 0.04);
  color: #c0c0d0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.logout-modal-cancel:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

.logout-modal-confirm {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  box-shadow:
    0 6px 18px rgba(239, 68, 68, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -2px 6px rgba(0, 0, 0, 0.2);
}
.logout-modal-confirm:hover {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
  transform: translateY(-2px);
  box-shadow:
    0 10px 24px rgba(239, 68, 68, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -2px 6px rgba(0, 0, 0, 0.2);
}
.logout-modal-confirm:active {
  transform: translateY(0);
}

/* Subtle shimmer on the confirm button */
.logout-modal-confirm::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}
.logout-modal-confirm:hover::after {
  left: 100%;
}

@media (max-width: 520px) {
  .logout-modal { max-width: 92vw; }
  .logout-modal-header { padding: 24px 24px 16px; }
  .logout-modal-body { padding: 22px 24px 24px; }
  .logout-modal-logo .logo-text { font-size: 18px; }
  .logout-modal-title { font-size: 18px; }
  .logout-modal-icon-wrap { width: 56px; height: 56px; font-size: 24px; }
}

/* ============================================================
   PROFESSIONAL EQUITY CURVE  (TradingView / MyFxbook style)
   ============================================================ */
.equity-preview.eq-pro{
  background:linear-gradient(180deg,#0e0e1a 0%,#0a0a12 100%);
  border:1px solid #20203a;
  border-radius:16px;
  padding:20px 22px 18px;
  position:relative;
  overflow:hidden;
}
.equity-preview.eq-pro::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,92,252,0.45),transparent);
}
.eq-pro-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:10px}
.eq-head-left{min-width:0}
.eq-pro .eq-head-left .title{font-size:14px;font-weight:700;color:#e2e8f0;display:flex;align-items:center;gap:7px;letter-spacing:.01em}
.eq-sub-label{font-size:11px;color:#7c7c94;margin-top:5px;font-family:'Rubik',sans-serif;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eq-head-right{text-align:right;flex-shrink:0}
.eq-pro .total{font-family:'Share Tech Mono','JetBrains Mono',monospace;font-size:24px;font-weight:400;line-height:1;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums;letter-spacing:.02em}
.eq-delta{display:inline-flex;align-items:center;gap:5px;margin-top:7px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.02em;font-feature-settings:"zero" 1,"tnum" 1;font-variant-numeric:slashed-zero tabular-nums;line-height:1}
.eq-delta.up{background:#0d2d1a;color:#22c55e;border:1px solid #166534}
.eq-delta.down{background:#2d0d0d;color:#ef4444;border:1px solid #991b1b}
.eq-delta.flat{background:#1a1a2e;color:#a0a0b0;border:1px solid #363650}
.eq-chart-box{position:relative;height:210px;width:100%;margin-top:4px}

@media (max-width:768px){
  .equity-preview.eq-pro{padding:14px 14px 12px !important;border-radius:14px !important}
  .eq-pro-header{gap:10px;margin-bottom:8px}
  .eq-pro .eq-head-left .title{font-size:13px}
  .eq-sub-label{font-size:10px;margin-top:3px}
  .eq-pro .total{font-size:20px}
  .eq-delta{font-size:10px;margin-top:5px;padding:2px 8px}
  .eq-chart-box{height:188px}
}
@media (max-width:380px){
  .eq-pro .total{font-size:18px}
  .eq-chart-box{height:172px}
}

/* ============================================================
   PSYCHOLOGY — Thought-Emotion Journal (Day/Week/Month, multi-trade, OTP-gated)
   All classes pj- prefixed + literal colours to stay isolated.
   ============================================================ */
.pj-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(124,92,252,0.07),rgba(10,10,18,0.55) 60%);border:1px solid #20203a;border-radius:16px;padding:18px 22px;margin-bottom:18px}
.pj-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#06B6D4,#7C5CFC,#22C55E,transparent);opacity:.6}
.pj-hero h3{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;letter-spacing:.03em;color:#e2e8f0;display:flex;align-items:center;gap:9px}
.pj-hero p{font-size:12px;color:#9090a8;margin-top:5px;line-height:1.55;max-width:820px}
.pj-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.pj-seg{display:flex;gap:5px;background:#0a0a12;border:1px solid #252539;border-radius:14px;padding:5px}
.pj-seg button{background:transparent;border:none;color:#9090a8;font-family:'Rubik',sans-serif;font-size:13px;font-weight:600;padding:9px 18px;border-radius:10px;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:7px}
.pj-seg button:hover{color:#e2e8f0;background:rgba(124,92,252,0.07)}
.pj-seg button.on{background:linear-gradient(135deg,#7C5CFC,#6244E3);color:#fff;box-shadow:0 4px 14px rgba(124,92,252,0.3)}
.pj-nav{display:flex;align-items:center;gap:6px;background:#0a0a12;border:1px solid #252539;border-radius:12px;padding:6px}
.pj-nav button{background:transparent;border:1px solid #252539;color:#a0a0b0;width:34px;height:34px;border-radius:9px;cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .15s}
.pj-nav button:hover{border-color:#7C5CFC;color:#7C5CFC;background:rgba(124,92,252,0.08)}
.pj-ctx{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;color:#C4B5FD;letter-spacing:.03em;min-width:188px;text-align:center}
.pj-spread{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.pj-kpi{background:#0a0a12;border:1px solid #252539;border-radius:10px;padding:7px 14px}
.pj-kpi .pj-kl{font-size:9px;font-weight:700;letter-spacing:.14em;color:#7c7c94;text-transform:uppercase;margin-bottom:3px}
.pj-kpi .pj-kv{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:800;line-height:1;color:#e2e8f0}
.pj-daycard{background:rgba(10,10,18,0.92);border:1px solid #252539;border-radius:16px;overflow:hidden;position:relative}
.pj-daycard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#06B6D4,#7C5CFC,#22C55E);opacity:.65}
.pj-daycard-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #1f1e30;background:linear-gradient(180deg,rgba(124,92,252,0.04),transparent);flex-wrap:wrap}
.pj-daycard-date{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;color:#A78BFA;letter-spacing:.03em;flex:1;min-width:150px}
.pj-daycard-date .pj-dow{display:block;font-size:10px;color:#7c7c94;font-family:'JetBrains Mono',monospace;letter-spacing:.06em;margin-top:3px;font-weight:400}
.pj-chip{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px;white-space:nowrap}
.pj-chip.pj-tcount{color:#C4B5FD;background:rgba(124,92,252,0.12);border:1px solid #5B21B6}
.pj-chip.pj-avg{border:1px solid #252539}
.pj-fields{padding:16px 20px;display:flex;flex-direction:column;gap:14px}
.pj-trade-actions{display:flex;align-items:center;gap:7px}
.pj-draft-chip{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:800;letter-spacing:.12em;color:#F59E0B;background:rgba(245,158,11,0.12);border:1px solid #92590f;padding:2px 8px;border-radius:20px}
.pj-trade.pj-draft{border-color:#3a2d12;border-style:dashed;background:#0d0b07}
.pj-trade.pj-draft::before{background:linear-gradient(180deg,#F59E0B,#7C5CFC);opacity:.6}
.pj-trade.pj-editing{border-color:#2a2550;box-shadow:0 0 0 1px rgba(124,92,252,0.25)}
.pj-trade-edit{background:rgba(124,92,252,0.12);border:1px solid #5B21B6;color:#C4B5FD;font-family:'Rubik',sans-serif;font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:8px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px}
.pj-trade-edit:hover{background:rgba(124,92,252,0.22);border-color:#7C5CFC}
.pj-trade-donebtn{background:rgba(34,197,94,0.12);border:1px solid #166534;color:#22c55e;font-family:'Rubik',sans-serif;font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:8px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px}
.pj-trade-donebtn:hover{background:rgba(34,197,94,0.22);border-color:#22c55e}
.pj-trade-close{background:transparent;border:1px solid #3a2d12;color:#F59E0B;font-family:'Rubik',sans-serif;font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:8px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px}
.pj-trade-close:hover{border-color:#F59E0B;background:rgba(245,158,11,0.1)}
.pj-savebar{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:4px;padding-top:14px;border-top:1px dashed #252539}
.pj-saved-flag{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:#22c55e;opacity:0;transform:translateY(2px);transition:all .3s;pointer-events:none}
.pj-saved-flag.show{opacity:1;transform:translateY(0)}
.pj-save-btn{background:linear-gradient(135deg,#22c55e,#16a34a);color:#06210f;border:none;padding:11px 24px;border-radius:10px;font-weight:800;font-size:13px;font-family:'Rubik',sans-serif;cursor:pointer;transition:all .2s;box-shadow:0 4px 14px rgba(34,197,94,0.28);display:inline-flex;align-items:center;gap:7px}
.pj-save-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(34,197,94,0.42)}
.pj-save-btn:active{transform:translateY(0)}
.pj-trades-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pj-trades-title{font-size:11px;font-weight:700;letter-spacing:.1em;color:#7c7c94;text-transform:uppercase}
.pj-add-trade{background:rgba(124,92,252,0.12);border:1px solid #5B21B6;color:#C4B5FD;font-family:'Rubik',sans-serif;font-size:12px;font-weight:700;padding:7px 14px;border-radius:9px;cursor:pointer;transition:all .18s;display:inline-flex;align-items:center;gap:6px}
.pj-add-trade:hover{background:rgba(124,92,252,0.2);border-color:#7C5CFC}
.pj-trades-list{display:flex;flex-direction:column;gap:14px}
.pj-trade{background:#0a0a12;border:1px solid #252539;border-radius:13px;overflow:hidden;position:relative}
.pj-trade::before{content:'';position:absolute;top:0;left:0;bottom:0;width:3px;background:linear-gradient(180deg,#06B6D4,#7C5CFC,#22C55E);opacity:.55}
.pj-trade-head{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 17px;border-bottom:1px solid #1f1e30;background:linear-gradient(180deg,rgba(124,92,252,0.05),transparent)}
.pj-trade-tag{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:800;color:#0a0a12;background:#A78BFA;padding:3px 11px;border-radius:8px;letter-spacing:.03em}
.pj-trade-spacer{flex:1}
.pj-trade-scbadge{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:800;padding:2px 11px;border-radius:20px}
.pj-trade-del{background:transparent;border:1px solid #252539;color:#7c7c94;width:28px;height:28px;border-radius:7px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.pj-trade-del:hover{border-color:#ef4444;color:#ef4444;background:#1f0a0a}
.pj-trade-body{padding:13px 14px 13px 17px;display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.pj-tcol .pj-tlab{display:flex;align-items:center;gap:7px;font-size:9.5px;font-weight:700;letter-spacing:.04em;color:#a8b0c4;margin-bottom:6px;text-transform:uppercase;line-height:1.3;min-height:26px}
.pj-tnum{flex-shrink:0;width:18px;height:18px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:800;color:#0a0a12}
.pj-tta{width:100%;min-height:60px;resize:vertical;background:#08080f;border:1px solid #252539;border-radius:9px;color:#e2e8f0;font-family:'Rubik',sans-serif;font-size:12.5px;line-height:1.55;padding:9px 11px;outline:none;transition:border-color .2s}
.pj-tta::placeholder{color:#3a3a50}
.pj-tta:focus{border-color:#7C5CFC;background:#0c0c18}
.pj-tta:disabled{opacity:.85;cursor:default;background:#0a0a12;border-color:#1c1c30;resize:none}
.pj-tscore{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 17px;border-top:1px solid #1f1e30;background:rgba(124,92,252,0.03);flex-wrap:wrap}
.pj-tscore .pj-tslab{font-size:10px;font-weight:700;letter-spacing:.05em;color:#a8b0c4;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.pj-tscore input[type=range]{flex:1;min-width:140px;accent-color:#7C5CFC;height:6px;cursor:pointer}
.pj-tscore input[type=range]:disabled{opacity:.6;cursor:default}
.pj-tscore .pj-tsval{font-family:'JetBrains Mono',monospace;font-size:17px;font-weight:800;min-width:56px;text-align:right}
.pj-tscore .pj-tsval small{font-size:11px;color:#7c7c94;font-weight:600}
/* WEEK */
.pj-weekhead{background:rgba(10,10,18,0.7);border:1px solid #20203a;border-radius:16px;padding:16px 20px;margin-bottom:16px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.pj-weekhead .pj-wsum{display:flex;flex-direction:column;gap:3px}
.pj-weekhead .pj-wsum .pj-wsl{font-size:9px;letter-spacing:.14em;color:#7c7c94;text-transform:uppercase;font-weight:700}
.pj-weekhead .pj-wsum .pj-wsv{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:800;line-height:1}
.pj-spark{display:flex;align-items:flex-end;gap:8px;flex:1;min-width:240px;height:64px}
.pj-spark .pj-scol{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end;cursor:pointer}
.pj-spark .pj-sbar{width:100%;max-width:30px;border-radius:5px 5px 2px 2px;transition:all .25s;min-height:3px}
.pj-spark .pj-scol:hover .pj-sbar{filter:brightness(1.25)}
.pj-spark .pj-sd{font-size:9px;color:#7c7c94;font-family:'JetBrains Mono',monospace;font-weight:700}
.pj-spark .pj-scol.sel .pj-sd{color:#C4B5FD}
.pj-wgrid{display:flex;flex-direction:column;gap:12px}
.pj-wday{background:rgba(10,10,18,0.92);border:1px solid #252539;border-radius:14px;overflow:hidden;display:grid;grid-template-columns:108px 1fr;cursor:pointer;transition:all .18s}
.pj-wday:hover{border-color:#7C5CFC;transform:translateY(-2px);box-shadow:0 8px 22px rgba(124,92,252,0.16)}
.pj-wrail{background:linear-gradient(180deg,rgba(124,92,252,0.06),transparent);border-right:1px solid #1f1e30;padding:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center}
.pj-wrail .pj-wwd{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.1em;color:#9090a8;text-transform:uppercase}
.pj-wrail .pj-wdn{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;color:#e2e8f0;line-height:1}
.pj-wrail .pj-wsc{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:800;padding:2px 10px;border-radius:20px}
.pj-wbody{padding:13px 16px;display:flex;flex-direction:column;gap:7px}
.pj-wrow{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.5}
.pj-wtchip{flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:800;padding:2px 9px;border-radius:20px;margin-top:1px}
.pj-wt{color:#c8c8da;font-family:'Rubik',sans-serif}
.pj-wt.empty{color:#3f3f56;font-style:italic}
.pj-wcount{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:#C4B5FD;background:rgba(124,92,252,0.12);border:1px solid #5B21B6;padding:2px 9px;border-radius:20px}
.pj-wempty{padding:18px 16px;color:#7c7c94;font-size:12.5px;font-style:italic;display:flex;align-items:center;gap:8px}
/* MONTH */
.pj-mcal{background:rgba(10,10,18,0.6);border:1px solid #20203a;border-radius:16px;padding:14px}
.pj-mdows{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:8px}
.pj-mdow{text-align:center;font-size:10px;font-weight:700;letter-spacing:.08em;color:#7c7c94;text-transform:uppercase;padding:3px 0;font-family:'JetBrains Mono',monospace}
.pj-mgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.pj-mcell{position:relative;min-height:74px;border:1px solid #1f1e30;border-radius:10px;background:#0a0a12;padding:8px;cursor:pointer;transition:all .15s;display:flex;flex-direction:column;align-items:flex-start}
.pj-mcell:hover{border-color:#7C5CFC;transform:translateY(-2px);box-shadow:0 4px 14px rgba(124,92,252,0.18)}
.pj-mcell.empty{background:transparent;border-color:transparent;cursor:default;pointer-events:none}
.pj-mcell .pj-mn{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:#9090a8;line-height:1}
.pj-mcell.has .pj-mn{color:#e2e8f0}
.pj-mcell.today{box-shadow:inset 0 0 0 1px rgba(124,92,252,0.5);border-color:#7C5CFC}
.pj-mcell.today .pj-mn{color:#C4B5FD}
.pj-mcell .pj-ms{margin-top:auto;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:800;padding:1px 8px;border-radius:20px}
.pj-mcell .pj-mc{position:absolute;top:6px;right:7px;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;color:#9090a8}
.pj-mlegend{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px dashed #252539;align-items:center}
.pj-mlegend .pj-li{display:flex;align-items:center;gap:6px;font-size:11px;color:#9090a8;font-family:'JetBrains Mono',monospace}
.pj-mlegend .pj-sw{width:12px;height:12px;border-radius:4px}
.pj-anim{animation:fadeIn .25s ease}
/* OTP modal */
.pj-otp-backdrop{display:none;position:fixed;inset:0;background:rgba(2,2,8,0.82);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:700;justify-content:center;align-items:flex-start;padding:60px 16px;overflow-y:auto}
.pj-otp-backdrop.open{display:flex;animation:fadeIn .2s ease}
.pj-otp-modal{background:linear-gradient(180deg,#131322,#0d0d18);border:1px solid #2a2540;border-radius:20px;width:100%;max-width:430px;margin:auto;position:relative;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,0.75)}
.pj-otp-modal::before{content:'';position:absolute;top:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,rgba(155,123,255,0.5),transparent)}
.pj-otp-head{padding:22px 26px 18px;text-align:center;border-bottom:1px solid #1f1e30}
.pj-otp-icon{font-size:34px;margin-bottom:8px}
.pj-otp-title{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;color:#7C5CFC;letter-spacing:.03em;margin-bottom:4px}
.pj-otp-sub{font-size:12px;color:#a0a0b0;line-height:1.5}
.pj-otp-body{padding:20px 26px 24px}
.pj-otp-demo{background:#1a1a2e;border:1px solid #5B21B6;border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:11px;color:#a0a0b0;line-height:1.5;text-align:center}
.pj-otp-demo b{color:#C4B5FD;font-weight:700}
.pj-otp-demo code{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:18px;color:#fff;background:#0a0a12;padding:3px 12px;border-radius:6px;letter-spacing:.28em;display:inline-block;margin-top:6px;border:1px solid #252539}
.pj-otp-digits{display:flex;gap:8px;justify-content:center;margin-bottom:14px}
.pj-otp-digit{width:44px;height:52px;background:#0a0a12;border:1px solid #252539;border-radius:10px;color:#7C5CFC;font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:800;text-align:center;outline:none;transition:all .15s}
.pj-otp-digit:focus{border-color:#7C5CFC;background:#131322;box-shadow:0 0 0 3px rgba(124,92,252,0.18)}
.pj-otp-digit.filled{border-color:#22c55e;color:#22c55e}
.pj-otp-err{background:#2d0d0d;border:1px solid #991b1b;color:#ef4444;font-size:12px;padding:9px 13px;border-radius:8px;margin-bottom:14px;display:none;text-align:center}
.pj-otp-actions{display:flex;gap:10px}
.pj-otp-actions button{flex:1;padding:12px 18px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Rubik',sans-serif;border:none;transition:all .2s}
.pj-otp-verify{background:linear-gradient(135deg,#22c55e,#16a34a);color:#0a0a12}
.pj-otp-verify:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(34,197,94,0.3)}
.pj-otp-cancel{background:transparent;color:#a0a0b0;border:1px solid #252539}
.pj-otp-cancel:hover{border-color:#ef4444;color:#ef4444}
.pj-otp-resend{display:block;text-align:center;margin-top:14px;font-size:12px;color:#9090a8}
.pj-otp-resend a{color:#7C5CFC;cursor:pointer;font-weight:600;text-decoration:none}
@media(max-width:768px){
  .pj-hero{padding:14px}.pj-hero h3{font-size:14px}
  .pj-seg button{padding:8px 14px;font-size:12px}
  .pj-ctx{min-width:130px;font-size:13px}
  .pj-spread{margin-left:0;width:100%}
  .pj-fields{padding:14px;gap:13px}.pj-daycard-head{padding:13px 14px}
  .pj-trade-body{grid-template-columns:1fr;gap:11px}
  .pj-tcol .pj-tlab{min-height:0}
  .pj-wday{grid-template-columns:84px 1fr}.pj-wrail .pj-wdn{font-size:22px}
  .pj-mcell{min-height:54px;padding:5px}.pj-mcell .pj-mn{font-size:11px}.pj-mcell .pj-ms{font-size:9px;padding:0 5px}.pj-mdow{font-size:8px}
  .pj-spark{height:54px}
  .pj-otp-digit{width:40px;height:48px;font-size:19px}
}


  /* Hero KPI figures — tight, colour-accurate glow + crisp edge */
  .hero-stat .val{
    text-shadow:
      0 0 9px color-mix(in srgb, currentColor 32%, transparent),
      0 1px 1px rgba(0,0,0,0.55) !important;
  }
  /* Trade-table P&L figures — punchy but sharp */
  .val.pos{ text-shadow:0 0 8px rgba(34,197,94,0.30), 0 1px 1px rgba(0,0,0,0.5) !important; }
  .val.neg{ text-shadow:0 0 8px rgba(239,68,68,0.30), 0 1px 1px rgba(0,0,0,0.5) !important; }
  /* De-faded labels / sub-lines for crisp 4K capture */
  .hero-stat .lbl{ color:#7a7a96 !important; }
  .hero-stat .sub{ color:#727290 !important; }

  /* ---- Extend crisp treatment across the tools (Analytics / Monte Carlo /
         Recovery Calc / Quick-view / Settings). Same recipe: keep each
         figure's own colour, kill the wide blur halo, add a 1px dark edge. ---- */
  .stat-val, .brk-val{
    text-shadow:0 0 9px color-mix(in srgb, currentColor 30%, transparent), 0 1px 1px rgba(0,0,0,0.5) !important;
  }
  .daily-trades-hero .dt-count{
    text-shadow:0 0 10px color-mix(in srgb, currentColor 34%, transparent), 0 1px 1px rgba(0,0,0,0.5) !important;
  }
  #montecarloPage .mc-stat-val{
    text-shadow:0 0 9px var(--glow,rgba(124,92,252,0.35)), 0 1px 1px rgba(0,0,0,0.5) !important;
  }
  #recoverycalcPage .rc-headline-val{ text-shadow:0 0 16px rgba(239,68,68,0.22) !important; }
  #recoverycalcPage .rc-plan-val{ text-shadow:0 0 9px rgba(34,211,238,0.30), 0 1px 1px rgba(0,0,0,0.5) !important; }
  #recoverycalcPage .rc-plan-val.rc-plan-unreachable{ text-shadow:0 0 9px rgba(239,68,68,0.30), 0 1px 1px rgba(0,0,0,0.5) !important; }
  .rc-val{ text-shadow:0 0 7px color-mix(in srgb, currentColor 28%, transparent) !important; }
  .qv-pnl-hero .val.pos{ text-shadow:0 0 9px rgba(34,197,94,0.30), 0 1px 1px rgba(0,0,0,0.5) !important; }
  .qv-pnl-hero .val.neg{ text-shadow:0 0 9px rgba(239,68,68,0.30), 0 1px 1px rgba(0,0,0,0.5) !important; }
  .settings-live-equity .sle-val{ text-shadow:0 0 9px rgba(34,197,94,0.24), 0 1px 1px rgba(0,0,0,0.5) !important; }

  /* ---- Colour vibrancy / de-fade lift. Applies to BOTH forex ($) and
         Indian-market (₹) modes since it grades the whole dashboard content,
         not any currency-specific markup. Subtle on purpose — no blowout.
         Safe because the full-screen modals living inside <main> are moved
         to <body> below (otherwise this filter would re-anchor their
         position:fixed and shift the backdrops). ---- */
  /* v149: the saturate()/contrast() filter that used to sit here is GONE. A
     filter on <main> forced the entire app onto a composited layer, which
     drops sub-pixel anti-aliasing and re-samples every glyph — the #1 reason
     text looked soft on Windows. The modal re-parenting script below stays
     (harmless, and keeps modals out of any future containing block). */


/* =====================================================================
   MASTER MOBILE FULLSCREEN & SPEED FIX (FORCE OVERRIDE ALL MODALS & IFRAMES)
   ===================================================================== */
@media screen and (max-width: 768px) {
  /* 1. ALL MODAL BACKDROPS - FULLSCREEN EDGE-TO-EDGE */
  .modal-backdrop,
  .qv-backdrop,
  .support-modal-backdrop,
  .logout-modal-backdrop,
  .upgrade-backdrop,
  .pj-otp-backdrop,
  .auth-overlay,
  #preTradePlanModal,
  #checklistRequiredModal,
  #tradeModal,
  #dayDetailModal,
  #dailyLimitModal,
  #brokerModal,
  #mt5SetupModal,
  #planGoalModal,
  #planDayModal,
  #planStartModal,
  #otpModalBackdrop,
  #forgotPwdOverlay,
  #surahReaderOverlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    background: #0a0a12 !important;
    border-radius: 0 !important;
    z-index: 99999 !important;
    overflow: hidden !important;
  }

  /* 2. ALL INNER MODALS / DIALOG CARDS - 100% CONTAINER STRETCH */
  .modal,
  .clr-modal,
  .day-modal,
  .qv-modal,
  .support-modal,
  .logout-modal,
  .upgrade-modal,
  .auth-card,
  #preTradePlanModal .modal,
  #checklistRequiredModal .clr-modal,
  #tradeModal .modal,
  #dayDetailModal .modal,
  #surahReaderOverlay > div {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    background: #0d0d18 !important;
  }

  /* 3. MODAL HEADERS - PINNED AT TOP */
  .modal-header,
  .clr-modal-header,
  .day-modal-header,
  .support-modal-header,
  .logout-modal-header,
  .tm-head,
  #preTradePlanModal .ptf-stepper,
  #checklistRequiredModal .ptf-stepper {
    flex: 0 0 auto !important;
    width: 100% !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
  }

  /* 4. MODAL BODIES - SCROLLABLE INNER AREA */
  .modal-body,
  .clr-modal-body,
  .day-modal-body,
  .support-modal-body,
  .logout-modal-body,
  #srModalBody,
  #preTradePlanModal .modal-body,
  #checklistRequiredModal .clr-modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 16px 14px !important;
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box !important;
  }

  /* 5. MODAL FOOTERS / ACTIONS - STICKY AT BOTTOM */
  .modal-actions,
  .clr-modal-actions,
  .logout-modal-actions,
  .tm-actions,
  #ptfFooter,
  #checklistRequiredModal .clr-modal-actions {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: auto 0 0 0 !important;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: #0d0d18 !important;
    border-top: 1px solid #252539 !important;
    z-index: 100 !important;
    box-sizing: border-box !important;
  }

  /* 6. AI ANALYSIS & ROOMS PAGE FULLSCREEN */
  #aichartPage,
  #roomsPage {
    padding: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - 56px) !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  #tcAiFrame,
  #tcRoomFrame {
    width: 100vw !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}