/* ============================================================
   TRADING JAY — DESIGN SYSTEM (drop-in stylesheet)
   ============================================================
   Place at: dashboard/static/css/design-system.css
   Link in base.html AFTER bootstrap.min.css and BEFORE the
   inline <style> block (or replace the inline block entirely).

   Contains:
     1. Tokens (CSS custom properties on :root)
     2. .hl-* highlight pill utilities (light + on-dark inversions)
     3. Semantic type-role utilities (.tj-page-title etc)
     4. Brand-gradient surface helpers (.tj-grad-surface)
     5. AutoDesc preview (textarea.desc-auto) — moved from base.html

   NOTE (2026-08-04): rules formerly scoped under the old dark-theme
   attribute selector were flattened to top-level selectors when dark
   became the app's only theme. That dropped one attribute-selector's
   worth of specificity from every one of those rules. Most of the
   time this is harmless, but where another stylesheet (e.g. base.html's
   inline <style>, loaded after this file) declares the same bare
   selector, the un-gating can silently flip which rule wins the
   cascade. Watch for this class of surprise when touching rules here.
   ============================================================ */

:root {
  /* ── Brand gradient ── */
  --tj-grad-start:        #667eea;
  --tj-grad-end:          #764ba2;
  --tj-grad:              linear-gradient(135deg, var(--tj-grad-start) 0%, var(--tj-grad-end) 100%);
  --tj-grad-focus-ring:   rgba(102,126,234,.25);

  /* ── Core neutrals ── */
  --tj-dark:              #212529;
  --tj-ticker-bg:         #111;
  --tj-ticker-divider:    #444;
  --tj-ticker-muted:      #aaa;
  --tj-page-soft:         #1a1d23;
  --tj-section-bg:        #1e2128;
  --tj-muted-2:           #718096;
  --tj-text-strong:       #e2e8f0;
  --tj-text-body:         #a0aec0;
  --tj-border-soft:       #2e3340;
  --tj-border-softer:     #262a33;

  /* ── Status palette (mirrors Bootstrap, exposed as TJ tokens) ── */
  --tj-primary:  #0d6efd;
  --tj-success:  #198754;
  --tj-warning:  #ffc107;
  --tj-info:     #0dcaf0;
  --tj-danger:   #dc3545;
  --tj-purple:   #6f42c1;
  --tj-gold:     #d4a017;

  /* ── Trading direction (charts, P&L, ticker) ── */
  --tj-up:        #00d084;
  --tj-down:      #ff4d4d;
  --tj-up-bs:     #198754;
  --tj-down-bs:   #dc3545;

  /* ── Highlight labels (.hl-*) ── */
  --hl-success-fg:    #bbf7d0;  --hl-success-bg:    rgba(52,211,153,.18);   --hl-success-bd:    #34d399;
  --hl-danger-fg:     #fecaca;  --hl-danger-bg:     rgba(248,113,113,.18);  --hl-danger-bd:     #f87171;
  --hl-warning-fg:    #fde68a;  --hl-warning-bg:    rgba(253,211,77,.18);   --hl-warning-bd:    #fcd34d;
  --hl-primary-fg:    #bfdbfe;  --hl-primary-bg:    rgba(96,165,250,.18);   --hl-primary-bd:    #60a5fa;
  --hl-secondary-fg:  #e5e7eb;  --hl-secondary-bg:  rgba(209,213,219,.12);  --hl-secondary-bd:  #d1d5db;
  --hl-info-fg:       #a5f3fc;  --hl-info-bg:       rgba(34,211,238,.18);   --hl-info-bd:       #22d3ee;
  --hl-purple-fg:     #ddd6fe;  --hl-purple-bg:     rgba(167,139,250,.18);  --hl-purple-bd:     #a78bfa;
  --hl-gold-fg:       #fde68a;  --hl-gold-bg:       rgba(253,211,77,.18);   --hl-gold-bd:       #fcd34d;

  /* ── Radii / shadows ── */
  --tj-radius-sm:    4px;
  --tj-radius:       6px;
  --tj-radius-md:    8px;
  --tj-radius-lg:    10px;
  --tj-radius-xl:    12px;
  --tj-shadow-sm:    0 .125rem .25rem rgba(0,0,0,.075);
  --tj-shadow:       0 4px 16px rgba(0,0,0,.08);
  --tj-shadow-toggle:0 4px 12px rgba(0,0,0,.30);
  --tj-shadow-auth:  0 20px 60px rgba(0,0,0,.50);
  --tj-shadow-cta:   0 5px 15px rgba(102,126,234,.40);

  /* ── Typography ── */
  --tj-font-sans:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tj-font-mono:    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --tj-tracking-eyebrow: .06em;
  --tj-lh-prose:     1.75;
  --tj-lh-relaxed:   1.6;

  /* Glassmorphism redesign tokens (2026-08-04) */
  --bg-deep: #050b14;
  --bg-panel: rgba(10, 22, 40, 0.65);
  --border-glow: rgba(6, 182, 212, 0.25);
  --cyan: #06b6d4;
  --cyan-glow: rgba(6, 182, 212, 0.4);
  --purple: #8b5cf6;
  --purple-glow: rgba(139, 92, 246, 0.4);
  --orange: #f97316;
  --glass-green: #10b981;
  --glass-red: #ef4444;
  --glass-text-primary: #e2e8f0;
  --glass-text-secondary: #94a3b8;
  --glass-text-dim: #64748b;
  --body-gradient: linear-gradient(135deg, #020617 0%, #0f172a 50%, #1e1b4b 100%);
}

/* ============================================================
   .hl-* highlight pills (light surfaces) — verbatim from base.html
   ============================================================ */
.hl {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--tj-radius-sm);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.5;
}
.hl-success  { color: var(--hl-success-fg);   background: var(--hl-success-bg);   border-left: 3px solid var(--hl-success-bd); }
.hl-danger   { color: var(--hl-danger-fg);    background: var(--hl-danger-bg);    border-left: 3px solid var(--hl-danger-bd); }
.hl-warning  { color: var(--hl-warning-fg);   background: var(--hl-warning-bg);   border-left: 3px solid var(--hl-warning-bd); }
.hl-primary  { color: var(--hl-primary-fg);   background: var(--hl-primary-bg);   border-left: 3px solid var(--hl-primary-bd); }
.hl-secondary{ color: var(--hl-secondary-fg); background: var(--hl-secondary-bg); border-left: 3px solid var(--hl-secondary-bd); }
.hl-info     { color: var(--hl-info-fg);      background: var(--hl-info-bg);      border-left: 3px solid var(--hl-info-bd); }
.hl-purple   { color: var(--hl-purple-fg);    background: var(--hl-purple-bg);    border-left: 3px solid var(--hl-purple-bd); }
.hl-gold     { color: var(--hl-gold-fg);      background: var(--hl-gold-bg);      border-left: 3px solid var(--hl-gold-bd); }

/* On-dark / on-color inversions — auto-applies inside dark surfaces */
.bg-dark .hl-success,    .bg-primary .hl-success,    .bg-success .hl-success    { color:#bbf7d0; background:rgba(52,211,153,.20);   border-left-color:#34d399; }
.bg-dark .hl-danger,     .bg-primary .hl-danger,     .bg-success .hl-danger     { color:#fecaca; background:rgba(248,113,113,.20);  border-left-color:#f87171; }
.bg-dark .hl-warning,    .bg-primary .hl-warning,    .bg-success .hl-warning    { color:#fde68a; background:rgba(253,211,77,.20);   border-left-color:#fcd34d; }
.bg-dark .hl-primary,    .bg-primary .hl-primary,    .bg-success .hl-primary    { color:#bfdbfe; background:rgba(96,165,250,.20);   border-left-color:#60a5fa; }
.bg-dark .hl-secondary,  .bg-primary .hl-secondary,  .bg-success .hl-secondary  { color:#e5e7eb; background:rgba(209,213,219,.15);  border-left-color:#d1d5db; }
.bg-dark .hl-info,       .bg-primary .hl-info,       .bg-success .hl-info       { color:#a5f3fc; background:rgba(34,211,238,.20);   border-left-color:#22d3ee; }
.bg-dark .hl-purple,     .bg-primary .hl-purple,     .bg-success .hl-purple     { color:#ddd6fe; background:rgba(167,139,250,.20);  border-left-color:#a78bfa; }
.bg-dark .hl-gold,       .bg-primary .hl-gold,       .bg-success .hl-gold       { color:#fde68a; background:rgba(253,211,77,.20);   border-left-color:#fcd34d; }

/* ============================================================
   AutoDesc — live description preview (was inline in base.html)
   ============================================================ */
textarea.desc-auto {
  font-style: italic;
  color: #6c757d;
  background: var(--tj-page-soft);
  border-color: rgba(13,110,253,.27);
}

/* ============================================================
   Semantic type roles
   ============================================================ */
.tj-page-title    { font-size: 2rem;    font-weight: 700; margin: 0; }
.tj-section-title { font-size: 1.25rem; font-weight: 600; margin: 0; }
.tj-stat-number   { font-size: 1.75rem; font-weight: 700; }
.tj-stat-label    { font-size: 1rem;    font-weight: 600; opacity: .9; }
.tj-eyebrow       { font-size: .78rem;  font-weight: 600; color: #6c757d;
                    text-transform: uppercase; letter-spacing: var(--tj-tracking-eyebrow); }
.tj-prose         { font-size: 1rem;    line-height: var(--tj-lh-prose); color: var(--tj-text-strong); }
.tj-meta          { font-size: .78rem;  color: #6c757d; }
.tj-mono          { font-family: var(--tj-font-mono); }

/* ============================================================
   Brand-gradient surface helpers
   ============================================================ */
.tj-grad-surface {
  background: var(--tj-grad);
  color: #fff;
  border: none;
}
.btn.tj-grad-btn {
  background: var(--tj-grad);
  color: #fff;
  border: none;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn.tj-grad-btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--tj-shadow-cta);
}
.form-control:focus {
  border-color: var(--tj-grad-start);
  box-shadow: 0 0 0 .2rem var(--tj-grad-focus-ring);
}

/* ============================================================
   Component nudges — small DS-aligned tweaks
   ============================================================ */
.account-card-translucent {
  background: rgba(20, 23, 26, 0.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--tj-radius-lg);
  backdrop-filter: blur(6px);
}

/* ============================================================
   DARK THEME — now the app's only theme (unconditional, 2026-08-04)
   Token overrides merged directly into the primary :root above.
   ============================================================ */

/* Body & page */
body {
  background: var(--body-gradient);
  color: #e2e8f0;
}

/* Cards */
.card {
  background: var(--bg-panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glow);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
}
.card-header,
.card-footer {
  background-color: #1e2128;
  border-color: #2e3340;
}

/* Modals */
.modal-content {
  background: var(--bg-panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glow);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
}
.modal-header,
.modal-footer {
  background-color: #1e2128;
  border-color: #2e3340;
}

/* Tables */
.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: #2a2f3a;
  --bs-table-hover-bg: #2d3240;
  --bs-table-hover-color: #e2e8f0;   /* fix: hover text was inheriting Bootstrap's near-black default */
  color: var(--glass-text-primary);
  border-color: #2e3340;
}
.table-success,
.table-success > td,
.table-success > th {
  --bs-table-bg: rgba(25,135,84,.18);
  --bs-table-color: #e2e8f0;
  --bs-table-hover-color: #e2e8f0;
  color: #e2e8f0;
}
/* BS5.1.3 applies hover background via box-shadow inset (not background-color).
   Must override box-shadow + color directly on the td/th. */
.table-hover > tbody > tr.table-success:hover > td,
.table-hover > tbody > tr.table-success:hover > th {
  box-shadow: inset 0 0 0 9999px rgba(25,135,84,.35) !important;
  color: #e2e8f0 !important;
}
.table-danger,
.table-danger > td,
.table-danger > th {
  --bs-table-bg: rgba(220,53,69,.18);
  --bs-table-color: #e2e8f0;
  --bs-table-hover-color: #e2e8f0;
  color: #e2e8f0;
}
.table-hover > tbody > tr.table-danger:hover > td,
.table-hover > tbody > tr.table-danger:hover > th {
  box-shadow: inset 0 0 0 9999px rgba(220,53,69,.35) !important;
  color: #e2e8f0 !important;
}
/* Inactive-user rows — dark-mode override so they don't go light-gray */
.table-secondary {
  --bs-table-bg: rgba(108,117,125,.12);
  --bs-table-color: #718096;
  --bs-table-hover-bg: rgba(108,117,125,.22);
  --bs-table-hover-color: #a0aec0;
}
.table-dark { background-color: #111418; }
thead.table-dark th { background-color: #111418; color: #e2e8f0; }

/* Forms */
.form-control,
.form-select,
.input-group-text {
  background-color: #1e2128;
  border-color: #2e3340;
  color: #e2e8f0;
}
.form-control::placeholder { color: #718096; }
.form-control:focus,
.form-select:focus {
  background-color: #1e2128;
  border-color: var(--tj-grad-start);
  color: #e2e8f0;
}
.form-control:disabled,
.form-select:disabled {
  background-color: #181b21;
  color: #718096;
}
textarea.desc-auto {
  background-color: #1e2128;
  color: #a0aec0;
  border-color: rgba(102,126,234,.35);
}
.form-check-input {
  background-color: #1e2128;
  border-color: #4a5568;
}
.form-text { color: #718096; }

/* Dropdowns */
.dropdown-menu {
  background: var(--bg-panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glow);
}
.dropdown-item {
  color: #e2e8f0;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #2d3240;
  color: #fff;
}
.dropdown-divider { border-color: #2e3340; }
.dropdown-item.text-danger { color: #f87171 !important; }

/* Alerts */
.alert {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.alert-info    { background-color: rgba(13,202,240,.12);  border-color: rgba(13,202,240,.3);  color: #a5f3fc; }
.alert-warning { background-color: rgba(255,193,7,.12);   border-color: rgba(255,193,7,.3);   color: #fde68a; }
.alert-danger  { background-color: rgba(220,53,69,.12);   border-color: rgba(220,53,69,.3);   color: #fca5a5; }
.alert-success { background-color: rgba(25,135,84,.12);   border-color: rgba(25,135,84,.3);   color: #bbf7d0; }

/* Badges & list groups */
.badge.bg-light  { background-color: #2e3340 !important; color: #e2e8f0 !important; }
.list-group-item {
  background-color: #242830;
  border-color: #2e3340;
  color: #e2e8f0;
}
.list-group-item.active { background-color: var(--tj-primary); border-color: var(--tj-primary); }

/* Borders & backgrounds */
.border         { border-color: #2e3340 !important; }
.border-bottom  { border-color: #2e3340 !important; }
.bg-light       { background-color: #1e2128 !important; }
.bg-white       { background-color: #242830 !important; }
.bg-body        { background-color: #1a1d23 !important; }

/* Text */
.text-dark  { color: #e2e8f0 !important; }
.text-muted { color: #718096 !important; }
.text-body  { color: #e2e8f0 !important; }

/* Tabs */
.nav-tabs { border-color: #2e3340; }
.nav-tabs .nav-link { color: #a0aec0; }
.nav-tabs .nav-link:hover { color: #e2e8f0; border-color: #2e3340; }
.nav-tabs .nav-link.active {
  background-color: #242830;
  border-color: #2e3340 #2e3340 #242830;
  color: #e2e8f0;
}

/* Buttons that look off on dark */
.btn-outline-secondary { color: #a0aec0; border-color: #4a5568; }
.btn-outline-secondary:hover { background-color: #2d3240; color: #e2e8f0; border-color: #4a5568; }
.btn-light  { background-color: #2d3240; border-color: #3a4050; color: #e2e8f0; }
.btn-light:hover { background-color: #353c4d; color: #fff; }

/* Scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
/* Specificity bumped (html prefix) so this keeps winning over base.html's inline
   ::-webkit-scrollbar-track rule, which now ties at equal specificity post-un-gating. */
html ::-webkit-scrollbar-track { background: #1a1d23; }
::-webkit-scrollbar-thumb { background: #3a4050; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4a5568; }

/* ── Inline-style overrides — templates hardcode bg colours we must beat ── */
[style*="background:#f8f9fa"]  { background: #1e2128 !important; color: #e2e8f0 !important; }
[style*="background: #f8f9fa"] { background: #1e2128 !important; color: #e2e8f0 !important; }
[style*="background:#fff;"]    { background: #242830 !important; }
[style*="background: #fff;"]   { background: #242830 !important; }
[style*="background:#ffffff"]  { background: #242830 !important; }
[style*="background:#f0f4ff"]  { background: rgba(102,126,234,.18) !important; }
[style*="background:#fff8f8"]  { background: rgba(220,53,69,.12) !important; border-color: rgba(220,53,69,.3) !important; color: #fca5a5 !important; }
[style*="background:#fff8e1"]  { background: rgba(255,193,7,.12) !important; border-color: rgba(255,193,7,.3) !important; }
[style*="background:#f9fafb"]  { background: #1e2128 !important; }
/* inline border colours */
[style*="border:1px solid #dee2e6"]   { border-color: #2e3340 !important; }
[style*="border-right:1px solid #dee2e6"] { border-color: #2e3340 !important; }
[style*="border:1px solid #e5e7eb"]   { border-color: #2e3340 !important; }

/* ── Strategies — indicator rows (dynamically injected) ───────────────── */
#ind-pane-acquire .border.rounded,
#ind-pane-release .border.rounded { border-color: #2e3340 !important; }
#ind-pane-acquire .border.rounded > .d-flex.align-items-stretch,
#ind-pane-release .border.rounded > .d-flex.align-items-stretch { background: #1e2128 !important; }

/* pp-rule (price-point rule rows) */
.pp-rule { background: #1e2128 !important; border-color: #2e3340 !important; }

/* acquire/release schedule section */
#acquire-schedule,
#release-schedule { background: #1e2128 !important; border-color: #2e3340 !important; }

/* backtest meta row */
#bth-meta { background: #1e2128 !important; }

/* ── Marketing page ───────────────────────────────────────────────────── */
.mkt-tab-btn:not(.active) { background: #1e2128 !important; color: #a0aec0 !important; border-color: #2e3340 !important; }
.mkt-tab-btn:not(.active):hover { background: #2d3240 !important; color: #e2e8f0 !important; }
.chip-trial,
.chip-silver { background: #2d3240 !important; color: #e2e8f0 !important; }
.social-role-chip:not(.selected) { background: #1e2128 !important; border-color: #3a4050 !important; color: #a0aec0 !important; }
.social-role-chip .rc-dot { background: #a0aec0 !important; }
[class*="email-preview"],
[class*="social-calendar"] { background: #1e2128 !important; border-color: #2e3340 !important; }

/* ── Tiers page ───────────────────────────────────────────────────────── */
.tier-badge-free { background: #2d3240 !important; color: #e2e8f0 !important; border-color: #3a4050 !important; }

/* ── Bootstrap utility gaps ──────────────────────────────────────────── */
.border-top    { border-color: #2e3340 !important; }
.border-start  { border-color: #2e3340 !important; }
.border-end    { border-color: #2e3340 !important; }
/* Bootstrap paints <hr> with `background-color: currentColor; border: 0`,
   so the old `border-color` here never applied while `opacity: 1` stripped
   BS's .25 fade — every rule in the app rendered as a near-white bar on the
   dark page. `color` is the lever that actually reaches the fill. */
hr             { color: #2e3340; border-color: #2e3340; opacity: 1; }
/* pre / code blocks */
pre,
code { background: #1e2128 !important; color: #a5f3fc !important; border-color: #2e3340 !important; }
/* input-group addon text already covered; also style inline textarea */
textarea { background-color: #1e2128 !important; border-color: #2e3340 !important; color: #e2e8f0 !important; }

/* ── Chat side panel ─────────────────────────────────────────────────── */
#chat-panel {
  background: #1e2128 !important;
  box-shadow: -4px 0 16px rgba(0,0,0,.5) !important;
}
#cp-feed,
#dm-feed,
#dm-empty,
#pane-feedback { background: #1e2128 !important; color: #e2e8f0 !important; }
#pane-feedback .text-muted { color: #718096 !important; }
#fb-alert.alert-warning { background: rgba(255,193,7,.12) !important; color: #fde68a !important; }
#fb-alert.alert-success { background: rgba(25,135,84,.12) !important; color: #bbf7d0 !important; }
#fb-alert.alert-danger  { background: rgba(220,53,69,.12) !important; color: #fca5a5 !important; }

/* ── Dashboard — article tab active text (local style uses #000 !important) */
#articleTabs .nav-link.active { color: #e2e8f0 !important; }
#article-window { color: #e2e8f0 !important; }
#article-window h1,
#article-window h2,
#article-window h3,
#article-window h4,
#article-window h5,
#article-window p,
#article-window li,
#article-window strong { color: #e2e8f0 !important; }

/* article pane card-body has inline style="color:#222" — beat it */
#pane-about  .card-body,
#pane-howto  .card-body { color: #e2e8f0 !important; }
#pane-about  .card-body h1, #pane-about  .card-body h2,
#pane-about  .card-body h3, #pane-about  .card-body h4,
#pane-about  .card-body h5, #pane-about  .card-body h6,
#pane-about  .card-body p,  #pane-about  .card-body li,
#pane-howto  .card-body h1, #pane-howto  .card-body h2,
#pane-howto  .card-body h3, #pane-howto  .card-body h4,
#pane-howto  .card-body h5, #pane-howto  .card-body h6,
#pane-howto  .card-body p,  #pane-howto  .card-body li { color: #e2e8f0 !important; }

/* generic inline colour overrides for hardcoded dark text */
[style*="color:#222"]    { color: #e2e8f0 !important; }
[style*="color: #222"]   { color: #e2e8f0 !important; }
[style*="color:#374151"] { color: #c4cdd9 !important; }
[style*="color:#333"]    { color: #e2e8f0 !important; }
[style*="color:#212529"] { color: #e2e8f0 !important; }

/* announcements: inline border-bottom and body text */
#dash-ann-list > div { border-color: #2e3340 !important; }
[style*="border-bottom:1px solid #e5e7eb"] { border-color: #2e3340 !important; }
[style*="border-bottom: 1px solid #e5e7eb"] { border-color: #2e3340 !important; }

/* ── Bootstrap Accordion ─────────────────────────────────────────────────── */
.accordion-item {
  background-color: #242830;
  border-color: #2e3340;
  color: #e2e8f0;
}
.accordion-button {
  background-color: #1e2128;
  color: #e2e8f0;
  box-shadow: none;
}
.accordion-button:not(.collapsed) {
  background-color: rgba(102,126,234,.15);
  color: #e2e8f0;
  box-shadow: inset 0 -1px 0 #2e3340;
}
.accordion-button:hover { background-color: #2d3240 !important; }
.accordion-button::after { filter: invert(0.8) brightness(1.5); }
.accordion-body { background-color: #242830; color: #e2e8f0; }
.accordion-collapse { border-color: #2e3340; }

/* ── FullCalendar dark mode ──────────────────────────────────────────────── */
/* Override FC6 CSS custom properties */
:root {
  --fc-border-color:             #2e3340;
  --fc-page-bg-color:            #242830;
  --fc-neutral-bg-color:         #1e2128;
  --fc-neutral-text-color:       #a0aec0;
  --fc-today-bg-color:           rgba(102,126,234,.18);
  --fc-highlight-color:          rgba(102,126,234,.25);
  --fc-list-event-hover-bg-color:rgba(102,126,234,.12);
  --fc-non-business-color:       rgba(255,255,255,.03);
  --fc-event-bg-color:           #667eea;
  --fc-event-border-color:       #667eea;
}
/* Calendar container cards */
.cal-main     { background: #242830 !important; }
.sidebar-card { background: #242830 !important; color: #e2e8f0 !important; }
.sidebar-card h6 { color: #a0aec0 !important; }

/* FC cell / header backgrounds */
.fc-theme-standard td,
.fc-theme-standard th { border-color: #2e3340 !important; }
.fc-col-header-cell { background: #1e2128 !important; }
.fc-col-header-cell-cushion { color: #a0aec0 !important; }
.fc-daygrid-day-number { color: #60a5fa !important; }
.fc-daygrid-day { background: #242830 !important; }
.fc-day-other .fc-daygrid-day-top { opacity: .4; }
.fc-scrollgrid { border-color: #2e3340 !important; }
.fc-toolbar-title { color: #e2e8f0 !important; }

/* List view */
.fc-list-table td,
.fc-list-table th { border-color: #2e3340 !important; }
.fc-list-day-cushion { background: #1e2128 !important; color: #a0aec0 !important; }
.fc-list-day-text,
.fc-list-day-side-text { color: #a0aec0 !important; }
.fc-list-empty-cushion { color: #718096 !important; }

/* Calendar modal chips */
.share-chip:not(.selected)  { background: #1e2128 !important; border-color: #3a4050 !important; color: #e2e8f0 !important; }
.etype-chip:not(.active)    { background: #1e2128 !important; border-color: #3a4050 !important; color: #e2e8f0 !important; }
.role-tag                   { background: #2d3240 !important; color: #e2e8f0 !important; }
.type-badge                 { color: #e2e8f0 !important; border-color: #3a4050 !important; }

/* ── Top navbar active tab ─────────────────────────────────────────── */
.navbar-dark .navbar-nav .nav-link.active {
    color: #fff !important;
    background: rgba(255, 255, 255, .12);
    border-radius: 6px;
    font-weight: 600;
    position: relative;
}
.navbar-dark .navbar-nav .nav-link.active::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: #ffc107;
    border-radius: 2px 2px 0 0;
}
.navbar-dark .navbar-nav .nav-link:not(.active):not(.dropdown-toggle):hover {
    color: rgba(255, 255, 255, .85) !important;
    background: rgba(255, 255, 255, .06);
    border-radius: 6px;
}

/* ══════════════════════════════════════════════════════════════
   TJ v2 — Mobile-First Component System
   ══════════════════════════════════════════════════════════════ */

/* ── Inter font ──────────────────────────────────────────────── */
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

/* ===== Glassmorphism shared components (2026-08-04) ===== */

.glass-panel {
  background: var(--bg-panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glow);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.glass-panel:hover {
  border-color: rgba(6, 182, 212, 0.4);
  box-shadow: 0 8px 32px rgba(6, 182, 212, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--glass-text-secondary);
  margin-bottom: 12px;
}

.panel-header .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-glow);
  flex-shrink: 0;
}

.panel-header .dot.purple { background: var(--purple); box-shadow: 0 0 8px var(--purple-glow); }
.panel-header .dot.green { background: var(--glass-green); box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); }
.panel-header .dot.orange { background: var(--orange); box-shadow: 0 0 8px rgba(249, 115, 22, 0.4); }

/* Pills — typography bumped to the 16px/14px floor per spec item 4 (mockup shipped these at 9-13px) */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: 8px 16px;
  font-size: 16px;         /* was 12px in mockup — bumped to floor */
  transition: all 0.2s;
  white-space: nowrap;
}

.pill:hover {
  background: rgba(6, 182, 212, 0.06);
  border-color: rgba(6, 182, 212, 0.2);
}

.pill .pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--glass-green);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
  flex-shrink: 0;
}

.pill .pill-name { font-weight: 600; color: var(--glass-text-primary); }

.pill .pill-tags { display: flex; gap: 4px; }

/* Short all-caps eyebrow tags — exempt from the 16px floor per the standing typography rule */
.pill .pill-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pill .pill-ticker { font-weight: 700; color: var(--cyan); }
.pill .pill-change { font-weight: 600; color: var(--glass-red); font-size: 14px; }
.pill .pill-change.up { color: var(--glass-green); }

.pill .pill-btn {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: var(--glass-red);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.1);
}

.pill .pill-btn:hover {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(239, 68, 68, 0.2));
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.2);
}

.pill .pill-badge {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 10px;
  background: rgba(249, 115, 22, 0.15);
  color: var(--orange);
  border: 1px solid rgba(249, 115, 22, 0.2);
  font-weight: 700;
  text-transform: uppercase;
}

/* Secondary/meta text inside pills — 14px floor per spec (was 9-11px in mockup) */
.pill .pill-eps, .pill .pill-date, .pill .pill-meta {
  color: var(--glass-text-secondary);
  font-size: 14px;
}

.pill .pill-signal-type {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 10px;
  border-radius: 10px;
}
.pill .pill-signal-type.trade { background: rgba(6, 182, 212, 0.15); color: var(--cyan); border: 1px solid rgba(6, 182, 212, 0.2); }
.pill .pill-signal-type.rec { background: rgba(139, 92, 246, 0.15); color: var(--purple); border: 1px solid rgba(139, 92, 246, 0.2); }

.pill .pill-status {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pill .pill-status.buy { background: rgba(16, 185, 129, 0.15); color: var(--glass-green); border: 1px solid rgba(16, 185, 129, 0.3); box-shadow: 0 0 8px rgba(16, 185, 129, 0.1); }
.pill .pill-status.sell { background: rgba(239, 68, 68, 0.15); color: var(--glass-red); border: 1px solid rgba(239, 68, 68, 0.3); box-shadow: 0 0 8px rgba(239, 68, 68, 0.1); }
.pill .pill-status.bullish { background: rgba(6, 182, 212, 0.15); color: var(--cyan); border: 1px solid rgba(6, 182, 212, 0.3); box-shadow: 0 0 8px rgba(6, 182, 212, 0.1); }
.pill .pill-status.insufficient { background: rgba(249, 115, 22, 0.15); color: var(--orange); border: 1px solid rgba(249, 115, 22, 0.3); }

.gainer-card {
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.1);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  transition: all 0.2s;
}
.gainer-card:hover {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.1);
}
.gainer-card .g-rank { font-size: 14px; color: var(--glass-text-dim); margin-bottom: 4px; }
.gainer-card .g-sym { font-size: 16px; font-weight: 800; color: var(--glass-text-primary); margin-bottom: 2px; }
.gainer-card .g-price { font-size: 14px; color: var(--glass-text-secondary); margin-bottom: 4px; }
.gainer-card .g-pct { font-size: 16px; font-weight: 700; color: var(--glass-green); text-shadow: 0 0 8px rgba(16, 185, 129, 0.3); }

/* ── Section pill header ─────────────────────────────────────── */
.tj-section-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(102,126,234,.15);
  border: 1px solid rgba(102,126,234,.3);
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #667eea;
  margin-bottom: 14px;
}

/* ── TJ stat card ────────────────────────────────────────────── */
.tj-stat-card {
  border-radius: 16px;
  padding: 18px 20px 16px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(6, 182, 212, 0.15);
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(139, 92, 246, 0.05));
  transition: transform .2s ease, box-shadow .2s ease;
}
.tj-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.35); }

/* Top accent bar — solid 2px border-top override per accent */
.tj-stat-card { border-top: 2px solid #667eea; }
.tj-stat-card.accent-purple { border-top-color: #a78bfa; }
.tj-stat-card.accent-green  { border-top-color: #10b981; }
.tj-stat-card.accent-red    { border-top-color: #ef4444; }
.tj-stat-card.accent-amber  { border-top-color: #f59e0b; }
.tj-stat-card.accent-blue   { border-top-color: #3b82f6; }
.tj-stat-card.accent-cyan   { border-top-color: #06b6d4; }

.tj-stat-lbl {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #718096; margin-bottom: 10px;
  display: flex; align-items: center; gap: 5px;
}
.tj-stat-val { font-size: 2.4rem; font-weight: 800; line-height: 1; color: #e2e8f0; }
.tj-stat-val.green { color: #10b981; }
.tj-stat-val.red   { color: #ef4444; }
.tj-stat-val.amber { color: #f59e0b; }
.tj-stat-sub { font-size: .75rem; color: #4a5568; margin-top: 8px; }

/* ── Progress bars ───────────────────────────────────────────── */
.tj-progress {
  height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 8px;
}
.tj-progress-fill {
  height: 100%; border-radius: 4px; transition: width .6s cubic-bezier(.4,0,.2,1);
}
.tj-progress-fill.purple { background: linear-gradient(90deg, #667eea, #764ba2); }
.tj-progress-fill.green  { background: linear-gradient(90deg, #10b981, #059669); }
.tj-progress-fill.red    { background: linear-gradient(90deg, #ef4444, #dc2626); }
.tj-progress-fill.amber  { background: linear-gradient(90deg, #f59e0b, #d97706); }
.tj-progress-fill.blue   { background: linear-gradient(90deg, #3b82f6, #2563eb); }

/* ── Big action buttons ──────────────────────────────────────── */
.tj-btn-sell {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 54px; padding: 14px 24px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff !important; font-weight: 700; font-size: 1rem; letter-spacing: .01em;
  border: none; border-radius: 12px;
  box-shadow: 0 4px 16px rgba(239,68,68,.3);
  transition: transform .15s ease, box-shadow .15s ease; cursor: pointer;
}
.tj-btn-sell:hover, .tj-btn-sell:focus {
  transform: translateY(-2px); box-shadow: 0 8px 24px rgba(239,68,68,.45); color: #fff !important;
}
.tj-btn-sell:active { transform: translateY(0); }

.tj-btn-release {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 54px; padding: 14px 24px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000 !important; font-weight: 700; font-size: 1rem; letter-spacing: .01em;
  border: none; border-radius: 12px;
  box-shadow: 0 4px 16px rgba(245,158,11,.3);
  transition: transform .15s ease, box-shadow .15s ease; cursor: pointer;
}
.tj-btn-release:hover, .tj-btn-release:focus {
  transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245,158,11,.45); color: #000 !important;
}
.tj-btn-release:active { transform: translateY(0); }

/* ── Balance grid (2-col on mobile, 4-col on sm+) ────────────── */
.tj-balance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 576px) { .tj-balance-grid { grid-template-columns: repeat(4, 1fr); } }
.tj-balance-cell { background: rgba(255,255,255,.05); border-radius: 10px; padding: 14px; text-align: center; }
.tj-balance-val { font-size: 1.35rem; font-weight: 800; line-height: 1; color: #e2e8f0; }
.tj-balance-lbl { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #718096; margin-top: 4px; }

/* ── Account card pill ───────────────────────────────────────── */
.tj-acct-card {
  border-radius: 16px; overflow: hidden;
  background: var(--bg-panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glow);
  margin-bottom: 14px;
  transition: box-shadow .2s ease;
}
.tj-acct-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.tj-acct-header {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 18px; cursor: pointer; user-select: none;
  background: #0d0f18; color: #e2e8f0;
  transition: background .15s;
}
.tj-acct-header:hover { background: #141720; }
.tj-acct-header .acc-chevron { transition: transform .25s ease; opacity: .6; font-size: .8rem; }
.tj-acct-header[aria-expanded="true"] .acc-chevron { transform: rotate(180deg); }

/* Badges inside the always-dark header — always use dark-mode palette */
.tj-acct-header .hl-success  { color:#bbf7d0; background:rgba(52,211,153,.18);  border-left-color:#34d399; }
.tj-acct-header .hl-danger   { color:#fecaca; background:rgba(248,113,113,.18); border-left-color:#f87171; }
.tj-acct-header .hl-warning  { color:#fde68a; background:rgba(253,211,77,.18);  border-left-color:#fcd34d; }
.tj-acct-header .hl-primary  { color:#bfdbfe; background:rgba(96,165,250,.18);  border-left-color:#60a5fa; }
.tj-acct-header .hl-secondary{ color:#e5e7eb; background:rgba(209,213,219,.15); border-left-color:#d1d5db; }
.tj-acct-header .hl-info     { color:#a5f3fc; background:rgba(34,211,238,.20);  border-left-color:#22d3ee; }
.tj-acct-header .hl-purple   { color:#ddd6fe; background:rgba(167,139,250,.20); border-left-color:#a78bfa; }
.tj-acct-header .hl-gold     { color:#fde68a; background:rgba(253,211,77,.20);  border-left-color:#fcd34d; }

/* Row 1 — meta: name, paper/live, strategy, active/inactive */
/* Sizes bumped to the 14px secondary-text floor (2026-08-04 typography sweep) —
   these are regular-case content chips (account name / status), not uppercase
   eyebrow labels, so they don't qualify for the label exemption. */
.acc-meta-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: .875rem; color: #94a3b8;
}
.acc-meta-row .acc-name {
  font-weight: 700; color: #f1f5f9; font-size: .875rem; letter-spacing: .01em;
}

/* Row 2 — position: symbol, P&L, SELL, chevron */
.acc-pos-row {
  display: flex; align-items: center;
  width: 100%; justify-content: space-between;
}
.acc-pos-items {
  display: flex; align-items: center; gap: 12px;
}
.acc-pos-row .acc-symbol {
  font-size: 1.15rem; font-weight: 800; color: #e2e8f0; letter-spacing: .04em;
  background: #1e2535; border-radius: 6px; padding: 2px 10px;
}
.acc-pos-row .acc-pnl {
  font-size: 1.15rem; font-weight: 700;
}
.acc-pos-row .acc-pnl.pos { color: #10b981; }
.acc-pos-row .acc-pnl.neg { color: #ef4444; }
.acc-pos-row .acc-sell-btn {
  font-size: .9rem; font-weight: 700; border-radius: 8px;
  padding: 5px 16px; min-height: 36px; border: none;
  background: #ef4444; color: #fff; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  transition: background .15s;
}
.acc-pos-row .acc-sell-btn:hover { background: #dc2626; }
.acc-pos-row .acc-chevron-wrap {
  display: flex; align-items: center;
}
.tj-acct-body { padding: 16px 18px; }

/* ── Mobile bottom nav ───────────────────────────────────────── */
#tj-mobile-nav {
  display: none !important; position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 1060; height: 60px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #0a0c14; border-top: 1px solid #1e2535;
  align-items: stretch;
  /* GPU composite layer — prevents iOS Safari viewport-resize jump on scroll */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@media (max-width: 1024px) {
  /* Ticker sits at the very bottom edge; mobile nav floats just above it. */
  #tj-mobile-nav { display: flex !important; bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important; }
  body { padding-bottom: calc(60px + 32px + env(safe-area-inset-bottom, 0px)) !important; }
  #ticker-bar { bottom: 0 !important; }
  #chat-toggle-btn { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
  #ad-popup-wrap { bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
  /* Bottom nav replaces the top hamburger on mobile */
  .navbar .navbar-collapse { display: none !important; }
  .navbar-toggler { display: none !important; }
  main.container { padding-left: 12px !important; padding-right: 12px !important; }
  /* More drawer — only active on mobile */
  #tj-more-drawer, #tj-more-overlay { display: block; }
}
/* Hide drawer elements entirely on desktop */
@media (min-width: 1025px) {
  #tj-more-drawer, #tj-more-overlay { display: none !important; }
}
.tj-mobile-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: #718096 !important; text-decoration: none !important;
  font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  transition: color .15s; padding: 6px 2px; border: none; background: none; cursor: pointer;
}
.tj-mobile-tab i { font-size: 1.15rem; line-height: 1; }
.tj-mobile-tab:hover { color: rgba(6, 182, 212, 0.7) !important; text-decoration: none !important; }
.tj-mobile-tab.active { color: var(--cyan) !important; }

/* ── More drawer ─────────────────────────────────────────────── */
#tj-more-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55); z-index: 1070;
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
#tj-more-overlay.active { opacity: 1; pointer-events: auto; }

#tj-more-drawer {
  position: fixed; left: 0; right: 0;
  bottom: calc(60px + 32px + env(safe-area-inset-bottom, 0px));
  z-index: 1080;
  background: #0d0f18; border: 1px solid #1e2535; border-bottom: none;
  border-radius: 18px 18px 0 0;
  padding: 8px 0 0;
  transform: translateY(110%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  max-height: 72vh; overflow-y: auto;
  /* Always in DOM, hidden below viewport until .open is added */
  pointer-events: none;
}
#tj-more-drawer.open { transform: translateY(0); pointer-events: auto; }

.tj-more-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: #2d3748; margin: 4px auto 12px;
}

/* ── More-drawer rows — sole implementation (base.html's inline duplicate removed) ── */
.tj-more-row {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  margin: 0 12px 8px;
  text-decoration: none !important;
  font-size: .97rem;
  font-weight: 500;
  color: #cbd5e0 !important;
  width: calc(100% - 24px);
  cursor: pointer; text-align: left;
  background: #141720;
  border: 1px solid #1e2535;
  border-radius: 12px;
  transition: background .15s, border-color .15s, color .15s;
}
.tj-more-row.active,
.tj-more-row:hover,
.tj-more-row:active {
  background: rgba(6, 182, 212, 0.12);
  border-color: rgba(6, 182, 212, 0.35);
  color: var(--cyan) !important;
}
.tj-more-row .tmi {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: #a78bfa; flex-shrink: 0;
}
.tj-more-row.active .tmi,
.tj-more-row:hover .tmi,
.tj-more-row:active .tmi {
  background: rgba(6, 182, 212, 0.18); color: var(--cyan);
}
/* Logout row keeps its danger-red tint — not recolored to cyan.
   Selectors require BOTH .tj-more-row and .tj-more-row-danger (0,3,0)
   so they always outrank the generic .tj-more-row hover/active states
   above regardless of source order — not a source-order coincidence. */
.tj-more-row-danger { color: #fc8181 !important; }
.tj-more-row-danger .tmi { background: rgba(252,129,129,.1); color: #fc8181; }
.tj-more-row.tj-more-row-danger:hover,
.tj-more-row.tj-more-row-danger:active,
.tj-more-row.tj-more-row-danger.active {
  background: rgba(252,129,129,.1); border-color: rgba(252,129,129,.3); color: #fc8181 !important;
}
.tj-more-row.tj-more-row-danger:hover .tmi,
.tj-more-row.tj-more-row-danger:active .tmi,
.tj-more-row.tj-more-row-danger.active .tmi { background: rgba(252,129,129,.18); color: #fc8181; }

/* ── Drawer group labels — mirror the desktop nav's dropdown groupings ── */
.tj-more-group-label {
  font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #5a6678; padding: 14px 18px 6px;
}
.tj-more-group-label:first-of-type { padding-top: 4px; }

/* ── Premium Suites header icon badge ───────────────────────────
   Shared by Pro Signal Suite / Scalping Suite page headers (and
   their settings pages) — defined globally so it's styled even on
   non-subscribed/upsell views, not just inside per-page subscribed
   blocks. ──────────────────────────────────────────────────────── */
.suite-icon-badge {
  width: 52px; height: 52px; border-radius: 15px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; color: #fff; position: relative;
  background: linear-gradient(150deg, var(--cyan), var(--purple));
  box-shadow: 0 10px 30px -8px var(--purple-glow), inset 0 1px 0 rgba(255,255,255,.3);
  animation: suite-icon-float 5.5s ease-in-out infinite;
}
.suite-icon-badge::after {
  content: ''; position: absolute; inset: -3px; border-radius: 18px;
  background: radial-gradient(circle at 50% 30%, var(--purple-glow), transparent 70%);
  filter: blur(7px); z-index: -1; opacity: .9;
  animation: suite-icon-breathe 4s ease-in-out infinite;
}
.suite-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #34d399;
  box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: suite-pulse-dot 2.2s ease-out infinite;
  display: inline-block;
}
@keyframes suite-icon-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes suite-icon-breathe { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes suite-pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); } 70% { box-shadow: 0 0 0 7px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }

.gainer-badge {
  font-size: .85rem;
  margin-left: .25rem;
}

/* ── Top nav — brand logo + user avatar pill ──────────────────── */
.navbar-brand {
  padding: 6px 12px !important;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
}
#userDropdown {
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 20px;
  padding: 4px 14px 4px 4px !important;
  color: var(--purple) !important;
}

/* ── Responsive tweaks ───────────────────────────────────────── */
@media (max-width: 575px) {
  .tj-stat-val  { font-size: 1.6rem; }
  .tj-balance-val { font-size: 1.1rem; }
  .modal-dialog { margin: 8px; }
  .modal-lg { max-width: calc(100vw - 16px); }
}

/* ══════════════════════════════════════════════════════════════
   STANDALONE PAGE SHELL (2026-08-22)
   ──────────────────────────────────────────────────────────────
   The auth / legal / utility pages (login, terms, verify-email,
   position alerts, …) do NOT extend base.html, so they inherit no
   navbar and no page chrome. These classes hand them the same dark
   glass surfaces the dashboard uses, so the whole app reads as one
   product instead of two.

   Deliberately NEW .tj-* class selectors only — no bare element
   selectors — so adding this section cannot change the cascade on
   any page that was already styled before it existed. (See the
   flattened-specificity note at the top of this file.)
   ══════════════════════════════════════════════════════════════ */

/* ── Page shell ──────────────────────────────────────────────── */
.tj-standalone {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.tj-standalone-main { flex: 1 0 auto; }

/* Centred single-card layout (verify-email, confirm, result, alert) */
.tj-standalone-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

/* ── Brand-gradient header band (legal + setup pages) ────────── */
.tj-page-header {
  background: var(--tj-grad);
  color: #fff;
  padding: 56px 0 44px;
  border-bottom: 1px solid var(--border-glow);
}
.tj-page-header h1 { font-weight: 700; font-size: 2.2rem; margin: 0; }
.tj-page-header p  { font-size: 1.0625rem; margin-top: 8px; color: rgba(255,255,255,.88); }
.tj-back-link {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 600;
}
.tj-back-link:hover { color: #fff; }

/* ── Glass content card — prose equivalent of .glass-panel ───── */
.tj-content-card {
  background: var(--bg-panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glow);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  padding: 44px 48px;
  margin-top: -28px;
}

/* ── Long-form legal / policy copy ───────────────────────────── */
.tj-doc h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--hl-purple-fg);
  margin: 2.25rem 0 .6rem;
}
.tj-doc h2:first-of-type { margin-top: 0; }
.tj-doc p,
.tj-doc li {
  font-size: 1.0625rem;          /* 17px — body-copy floor */
  line-height: 1.7;
  color: var(--glass-text-primary);
}
.tj-doc li     { margin-bottom: .35rem; }
.tj-doc ul     { padding-left: 1.4rem; }
.tj-doc strong { color: #fff; }
.tj-doc a      { color: var(--tj-grad-start); }
.tj-doc hr     { border-color: var(--tj-border-soft); opacity: 1; }
.tj-doc-date {
  font-size: .95rem;
  color: var(--glass-text-secondary);
  margin-bottom: 2rem;
}
.tj-doc-links   { font-size: 1rem; color: var(--glass-text-secondary); }
.tj-doc-links a { color: var(--tj-grad-start); text-decoration: none; }
.tj-doc-links a:hover { text-decoration: underline; }

/* ── Single-card auth / status pages ─────────────────────────── */
.tj-auth-card {
  background: var(--bg-panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glow);
  border-radius: 16px;
  box-shadow: var(--tj-shadow-auth);
  color: var(--glass-text-primary);
  max-width: 480px;
  width: 100%;
  overflow: hidden;
}
.tj-auth-card .card-body  { color: var(--glass-text-primary); }
.tj-auth-card p           { font-size: 1rem; line-height: 1.6; }
.tj-auth-card .text-muted { color: var(--glass-text-secondary) !important; }
.tj-auth-card h1, .tj-auth-card h2,
.tj-auth-card h3, .tj-auth-card h4 { color: #fff; font-weight: 700; }

.tj-icon-circle {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--tj-grad);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  color: #fff;
  box-shadow: 0 0 24px rgba(102,126,234,.35);
}
.tj-icon-circle.success { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 0 24px rgba(16,185,129,.35); }
.tj-icon-circle.error   { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 0 24px rgba(239,68,68,.35); }
.tj-icon-circle.warning { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 0 24px rgba(245,158,11,.35); }

/* ── Subtle raised surface ───────────────────────────────────────
   Dark stand-in for Bootstrap's .bg-light, which hard-codes #f8f9fa
   !important and punches a white hole through a dark page. Swap
   `bg-light` -> `tj-surface-subtle` rather than fighting it. */
.tj-surface-subtle {
  background: var(--tj-section-bg);
  color: var(--glass-text-primary);
}

/* ── Jhome credit — mirrors the footer base.html renders ─────── */
.tj-credit {
  flex-shrink: 0;
  text-align: center;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  font-size: .875rem;
  font-weight: 600;
  color: var(--tj-muted-2);
}
.tj-credit a {
  color: var(--tj-grad-start);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 576px) {
  .tj-content-card   { padding: 28px 20px; }
  .tj-page-header    { padding: 40px 0 32px; }
  .tj-page-header h1 { font-size: 1.75rem; }
}