/* ═══════════════════════════════════════════════════════════════
   PropEdge v5 — Terminal × Editorial × Neubrutalism
   Accent: Electric Amber #F7B731 (dark) | Electric Blue #1A1AFF (light)
═══════════════════════════════════════════════════════════════ */

/* ── 1. FONTS ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800;900&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── 1.5. UTILITY CLASSES (legacy — must stay for JS toggles) ─── */
/* Used everywhere in JS via classList.add('hidden') — chat panel,
   calculator panel, account wizard steps, modals, dashboards, etc.
   Must come BEFORE any specific component rules so they can override. */
.hidden { display: none !important; }
.invisible { visibility: hidden !important; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ── 2. DESIGN TOKENS — DARK (default) ───────────────────────── */
:root {
  /* Backgrounds */
  --bg:            #080810;
  --bg-secondary:  #0B0B18;
  --bg-card:       #0F0F20;
  --bg-card2:      #161628;
  --bg-hover:      #1E1E36;

  /* Accent — Electric Amber */
  --accent:        #F7B731;
  --accent-light:  #FFD166;
  --accent-dark:   #D4941A;
  --accent-dim:    rgba(247,183,49,0.09);
  --accent-dim2:   rgba(247,183,49,0.20);

  /* Status */
  --green:         #00E5A0;
  --green-dim:     rgba(0,229,160,0.11);
  --red:           #FF2D55;
  --red-dim:       rgba(255,45,85,0.11);
  --yellow:        #F7B731;
  --yellow-dim:    rgba(247,183,49,0.11);
  --cyan:          #00D4FF;
  --cyan-dim:      rgba(0,212,255,0.11);

  /* Text */
  --text-primary:   #F0F0FF;
  --text-secondary: #8888AA;
  --text-muted:     #505070;
  --text-dim:       #2E2E50;

  /* Borders */
  --border:        rgba(255,255,255,0.08);
  --border-2:      rgba(255,255,255,0.16);
  --border-light:  rgba(255,255,255,0.04);

  /* Shadows */
  --shadow-hard:   rgba(247,183,49,0.55);
  --shadow-sm:     0 2px 8px rgba(0,0,0,0.40);
  --shadow:        0 4px 20px rgba(0,0,0,0.50);
  --shadow-lg:     0 8px 40px rgba(0,0,0,0.65);

  /* Shape */
  --radius-sm:  3px;
  --radius:     6px;
  --radius-lg:  9px;
  --radius-xl:  12px;

  /* Layout */
  --sidebar-width: 240px;

  /* Typography */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Space Grotesk', var(--font-body);
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Easing */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-sharp: cubic-bezier(0.4, 0, 0.2, 1);

  /* Gradients */
  --grad-primary:   linear-gradient(135deg, #F7B731 0%, #E07B00 100%);
  --grad-violet:    linear-gradient(135deg, #F7B731 0%, #E07B00 100%);
  --grad-accent:    linear-gradient(135deg, #F7B731 0%, #E07B00 100%);
  --grad-text:      linear-gradient(135deg, #F0F0FF 0%, #8888AA 100%);
  --grad-cool:      linear-gradient(135deg, #00E5A0 0%, #00D4FF 100%);
  --grad-card-glow: none;
  --grad-equity:    linear-gradient(180deg, rgba(247,183,49,0.20) 0%, rgba(247,183,49,0.02) 100%);

  /* Glow — toned down, mostly disabled */
  --glow-sm:    0 0 0 1px rgba(247,183,49,0.25);
  --glow-md:    0 0 0 1px rgba(247,183,49,0.40);
  --glow-lg:    0 0 0 2px rgba(247,183,49,0.45);
  --glow-xl:    0 0 0 2px rgba(247,183,49,0.55);
  --glow-cyan:  0 0 0 1px rgba(0,212,255,0.30);
  --glow-green: 0 0 0 1px rgba(0,229,160,0.30);
  --glow-red:   0 0 0 1px rgba(255,45,85,0.30);

  /* Legacy compat aliases */
  --accent-2:    #D4941A;
  --surface:     var(--bg-card);
  --surface-2:   var(--bg-card2);
  --text:        var(--text-primary);
  --font-numeric: var(--font-mono);
}
[data-theme="light"] {
  --accent-2: #0000CC;
}

/* ── 3. DESIGN TOKENS — LIGHT ─────────────────────────────────── */
[data-theme="light"] {
  --bg:            #F0EEE4;
  --bg-secondary:  #E6E4DA;
  --bg-card:       #FAFAF4;
  --bg-card2:      #EDEADE;
  --bg-hover:      #E4E1D4;

  --accent:        #1A1AFF;
  --accent-light:  #0000CC;
  --accent-dark:   #0000AA;
  --accent-dim:    rgba(26,26,255,0.07);
  --accent-dim2:   rgba(26,26,255,0.16);

  --green:         #007A3D;
  --green-dim:     rgba(0,122,61,0.10);
  --red:           #CC0022;
  --red-dim:       rgba(204,0,34,0.10);
  --yellow:        #A06800;
  --yellow-dim:    rgba(160,104,0,0.10);
  --cyan:          #0055CC;
  --cyan-dim:      rgba(0,85,204,0.10);

  --text-primary:   #0A0A14;
  --text-secondary: #3A3A55;
  --text-muted:     #787890;
  --text-dim:       #B0B0C8;

  --border:        rgba(0,0,0,0.12);
  --border-2:      rgba(0,0,0,0.22);
  --border-light:  rgba(0,0,0,0.06);

  --shadow-hard:   #0A0A14;
  --shadow-sm:     0 2px 6px rgba(0,0,0,0.09);
  --shadow:        0 4px 14px rgba(0,0,0,0.13);
  --shadow-lg:     0 8px 28px rgba(0,0,0,0.18);

  --grad-primary:  linear-gradient(135deg, #1A1AFF 0%, #0000CC 100%);
  --grad-violet:   linear-gradient(135deg, #1A1AFF 0%, #0000CC 100%);
  --grad-accent:   linear-gradient(135deg, #1A1AFF 0%, #0000CC 100%);
  --grad-text:     linear-gradient(135deg, #0A0A14 0%, #3A3A55 100%);
  --grad-cool:     linear-gradient(135deg, #007A3D 0%, #0055CC 100%);
  --grad-equity:   linear-gradient(180deg, rgba(26,26,255,0.18) 0%, rgba(26,26,255,0.02) 100%);

  --glow-sm:    none;
  --glow-md:    none;
  --glow-lg:    0 0 0 2px rgba(26,26,255,0.25);
  --glow-xl:    0 0 0 2px rgba(26,26,255,0.35);
  --glow-cyan:  none;
  --glow-green: none;
  --glow-red:   none;

  --surface:   var(--bg-card);
  --surface-2: var(--bg-card2);
  --text:      var(--text-primary);
}

/* ── 4. KEYFRAME ANIMATIONS ───────────────────────────────────── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes shimmer  { 0% { background-position:-400px 0; } 100% { background-position:400px 0; } }
@keyframes pulse    { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.55;transform:scale(1.18);} }
@keyframes pulse-live{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
@keyframes skel-shimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }
@keyframes cursor-blink{ 0%,100%{opacity:1;} 50%{opacity:0;} }
@keyframes grain-shift{
  0%,100%{transform:translate(0,0);}
  10%{transform:translate(-2%,-3%);}
  20%{transform:translate(3%,1%);}
  30%{transform:translate(-1%,4%);}
  40%{transform:translate(4%,-2%);}
  50%{transform:translate(-3%,2%);}
  60%{transform:translate(2%,-4%);}
  70%{transform:translate(-4%,3%);}
  80%{transform:translate(3%,-1%);}
  90%{transform:translate(-2%,4%);}
}
@keyframes glow-pulse {
  0%,100%{ box-shadow:0 0 0 0 rgba(247,183,49,.4); }
  50%     { box-shadow:0 0 0 10px rgba(247,183,49,0); }
}

/* ── 5. GRAIN + SCANLINES OVERLAY ─────────────────────────────── */
body::before {
  content:'';
  position:fixed; inset:0;
  z-index:9998;
  pointer-events:none;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px 256px;
  animation:grain-shift .28s steps(1) infinite;
}
[data-theme="light"] body::before { opacity:.045; }

body::after {
  content:'';
  position:fixed; inset:0;
  z-index:9997;
  pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,.012) 2px,
    rgba(0,0,0,.012) 3px
  );
}
[data-theme="light"] body::after { display:none; }

/* ── 6. BASE RESET ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:14px; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg);
  min-height: 100vh;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background .25s, color .25s;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
input, select, textarea { font-family:inherit; }
img, svg { display:block; max-width:100%; }
ul, ol { list-style:none; }

/* ── 7. LAYOUT ───────────────────────────────────────────────── */
.app-shell { display:flex; min-height:100vh; }

/* ── 8. SIDEBAR ──────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 0; bottom: 0;
  right: 0;
  width: var(--sidebar-width);
  background: var(--bg-secondary);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width .28s var(--ease-sharp);
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display:none; }
[dir="ltr"] .sidebar { right:auto; left:0; border-left:none; border-right:1px solid var(--border); }

/* Top accent stripe on sidebar */
.sidebar::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:2px;
  background: var(--accent);
  opacity:.7;
}

/* Logo area */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px 18px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  text-decoration: none;
}
.logo-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius);
  background: var(--accent-dim2);
  border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .2s var(--ease);
  padding: 4px !important;
}
.logo-icon img { width:100%; height:100%; border-radius:var(--radius-sm); }
.logo-icon:hover { transform:scale(1.06); }
.logo-text {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.logo-sub {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 1px;
}

/* Nav sections */
.sidebar-nav { padding: 12px 10px; flex: 1; }
.nav-section-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 14px 8px 5px;
  display: block;
}

/* Nav items */
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
  transition: background .14s, color .14s;
  cursor: pointer;
  border-inline-end: 3px solid transparent;
  position: relative;
}
[dir="ltr"] .nav-item { border-inline-end: none; border-inline-start: 3px solid transparent; }
.nav-item:hover {
  background: var(--accent-dim);
  color: var(--text-secondary);
}
.nav-item.active {
  background: var(--accent-dim2) !important;
  color: var(--accent-light) !important;
  border-inline-end-color: var(--accent) !important;
  font-weight: 700 !important;
}
[dir="ltr"] .nav-item.active { border-inline-end-color:transparent !important; border-inline-start-color:var(--accent) !important; }
.nav-item::before { display:none !important; }
.nav-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  opacity: .65;
  transition: opacity .14s;
}
.nav-item:hover .nav-icon,
.nav-item.active .nav-icon { opacity: 1; }

/* Sidebar bottom */
.sidebar-bottom {
  padding: 12px 10px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── 9. THEME TOGGLE ─────────────────────────────────────────── */
#theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius);
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
  font-size: 15px;
}
#theme-toggle:hover {
  background: var(--accent-dim) !important;
  border-color: var(--accent) !important;
  color: var(--accent-light) !important;
}

/* ── 10. MAIN CONTENT ────────────────────────────────────────── */
.main, .main-content {
  margin-right: var(--sidebar-width);
  padding: 28px 30px;
  min-height: 100vh;
  transition: margin .28s var(--ease-sharp);
  animation: fadeIn .3s var(--ease) both;
}
[dir="ltr"] .main, [dir="ltr"] .main-content {
  margin-right: 0;
  margin-left: var(--sidebar-width);
}

/* ── 11. PAGE HEADER ─────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.page-title {
  font-family: var(--font-display) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  position: relative;
}
.page-title::after {
  content: '.';
  color: var(--accent);
}
.page-header-actions {
  display: flex; align-items: center; gap: 8px;
}

/* ── 12. BASE CARD ───────────────────────────────────────────── */
.card, .stat-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition: transform .2s var(--ease), border-color .2s, box-shadow .2s !important;
}
.card::before, .stat-card::before { display:none !important; }
.card:hover, .stat-card:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 4px 4px 0 var(--shadow-hard) !important;
  border-color: var(--accent) !important;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.card-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* ── 13. STAT CARDS ──────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.stat-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  margin-bottom: 8px;
}
.stat-value {
  font-family: var(--font-mono) !important;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums !important;
  transition: color .2s;
}
.stat-card:hover .stat-value { color: var(--accent); }
.stat-change {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.stat-change.up   { color: var(--green); }
.stat-change.down { color: var(--red); }
.stat-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.stat-icon.green  { background: var(--green-dim); color: var(--green); }
.stat-icon.red    { background: var(--red-dim);   color: var(--red); }
.stat-icon.accent { background: var(--accent-dim); color: var(--accent); }
.stat-icon.cyan   { background: var(--cyan-dim);  color: var(--cyan); }
.stat-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

/* PnL color classes */
.stat-value.positive, .pnl-pos, .text-green, .trade-outcome-win  { color: var(--green); }
.stat-value.negative, .pnl-neg, .text-red,   .trade-outcome-loss { color: var(--red); }
.pnl-zero { color: var(--text-muted); }

/* ── 14. BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  font-size: 13px; font-weight: 600;
  font-family: var(--font-body);
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  transition: all .16s var(--ease-sharp);
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  line-height: 1;
}
.btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-2);
}
.btn-primary, .btn.btn-primary {
  background: var(--accent);
  color: #000;
  border-color: transparent;
  font-weight: 700;
}
.btn-primary:hover, .btn.btn-primary:hover {
  background: var(--accent-light);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--shadow-hard);
}
[data-theme="light"] .btn-primary { color: #fff; }
[data-theme="light"] .btn-primary:hover { background: var(--accent-dark); }

.btn-secondary { background: var(--bg-card2); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent-light); }

.btn-danger, .btn.danger {
  background: var(--red-dim); color: var(--red); border-color: rgba(255,45,85,.3);
}
.btn-danger:hover { background: var(--red); color: #fff; border-color: transparent; }

.btn-success {
  background: var(--green-dim); color: var(--green); border-color: rgba(0,229,160,.3);
}
.btn-success:hover { background: var(--green); color: #000; border-color: transparent; }

.btn-ghost {
  background: transparent; color: var(--text-muted); border-color: transparent;
}
.btn-ghost:hover { background: var(--accent-dim); color: var(--accent-light); border-color: var(--accent); }

.btn-sm { padding: 5px 11px; font-size: 11.5px; }
.btn-xs { padding: 3px 8px; font-size: 11px; height: 24px; line-height: 1; border-radius: var(--radius-sm); }
.btn-lg { padding: 12px 22px; font-size: 14px; }
.btn-icon { padding: 7px; }
.btn-block { width: 100%; justify-content: center; }

/* Violet compat aliases */
.btn-violet, .btn-modern.primary {
  background: var(--grad-primary); color: #000; border: none;
  padding: 10px 18px; border-radius: var(--radius); font-weight: 700;
  cursor: pointer; transition: all .16s;
  box-shadow: none;
}
.btn-violet:hover, .btn-modern.primary:hover {
  transform: translate(-1px,-1px);
  box-shadow: 3px 3px 0 var(--shadow-hard);
}
.btn-ghost-violet, .btn-modern.ghost {
  background: transparent; color: var(--accent-light);
  border: 1px solid var(--accent-dim2);
  padding: 10px 18px; border-radius: var(--radius); font-weight: 600;
  cursor: pointer; transition: all .16s;
}
.btn-ghost-violet:hover, .btn-modern.ghost:hover {
  background: var(--accent-dim); border-color: var(--accent);
}
[data-theme="light"] .btn-violet, [data-theme="light"] .btn-modern.primary { color: #fff; }

/* ── 15. FORMS & INPUTS ──────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .04em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.form-input, .form-select, .form-control, input[type="text"], input[type="number"],
input[type="email"], input[type="password"], input[type="date"], input[type="time"],
input[type="datetime-local"], textarea, select {
  width: 100%;
  background: var(--bg-card2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text-primary);
  font-family: var(--font-body);
  transition: border-color .15s, background .15s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.form-input:hover, .form-select:hover, .form-control:hover,
select:hover, input:hover { border-color: var(--border-2); }
.form-input:focus, .form-select:focus, .form-control:focus,
select:focus, input:focus, textarea:focus {
  border-color: var(--accent);
  background: var(--bg-card);
  box-shadow: 0 0 0 2px var(--accent-dim2);
}
.form-input::placeholder, input::placeholder, textarea::placeholder {
  color: var(--text-dim);
}
select option { background: var(--bg-card); color: var(--text-primary); }
textarea { resize: vertical; min-height: 90px; }
.input-group { display: flex; gap: 8px; align-items: center; }
.input-addon {
  background: var(--bg-card2); border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: 9px 12px;
  font-size: 13px; color: var(--text-muted); white-space: nowrap;
}

/* ── 16. TABLES ──────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; border-radius: var(--radius-lg); }
.table, .trades-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.trades-table th, .table th {
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 10px 14px;
  text-align: start;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.trades-table td, .table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
  vertical-align: middle;
}
.trades-table tbody tr, .table tbody tr { transition: background .12s; }
.trades-table tbody tr.trade-row:hover,
.trades-table tbody tr:hover,
.table tbody tr:hover {
  background: var(--accent-dim) !important;
}
.trades-table tbody tr.trade-row { cursor: pointer; }
[dir="rtl"] .trades-table tbody tr:hover {
  background: var(--accent-dim) !important;
}

/* Sticky last column (action) */
.trades-table th:last-child, .trades-table td:last-child {
  position: sticky; right: 0; z-index: 2;
  background: var(--bg-card);
}
[dir="rtl"] .trades-table th:last-child, [dir="rtl"] .trades-table td:last-child {
  right: auto; left: 0;
}
.trades-table th:last-child { background: var(--bg-secondary); z-index: 3; }
.trades-table th:last-child::before, .trades-table td:last-child::before {
  content:''; position:absolute; top:0; bottom:0; left:-10px;
  width:10px; background:linear-gradient(to right,transparent,rgba(0,0,0,.15));
  pointer-events:none;
}
[dir="rtl"] .trades-table th:last-child::before, [dir="rtl"] .trades-table td:last-child::before {
  left:auto; right:-10px;
  background:linear-gradient(to left,transparent,rgba(0,0,0,.15));
}
[data-theme="light"] .trades-table th:last-child::before,
[data-theme="light"] .trades-table td:last-child::before {
  background:linear-gradient(to right,transparent,rgba(0,0,0,.06));
}

.row-num { font-size:11px; color:var(--text-dim); font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ── 17. BADGES & CHIPS ──────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  font-size: 11px; font-weight: 700;
  border-radius: var(--radius-sm);
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-green, .badge-success { background: var(--green-dim); color: var(--green); border: 1px solid rgba(0,229,160,.2); }
.badge-red, .badge-danger    { background: var(--red-dim);   color: var(--red);   border: 1px solid rgba(255,45,85,.2); }
.badge-yellow, .badge-warn   { background: var(--yellow-dim);color: var(--yellow);border: 1px solid rgba(247,183,49,.2); }
.badge-blue, .badge-info     { background: var(--cyan-dim);  color: var(--cyan);  border: 1px solid rgba(0,212,255,.2); }
.badge-accent                { background: var(--accent-dim2);color: var(--accent); border: 1px solid rgba(247,183,49,.3); }
.badge-neutral               { background: var(--bg-card2); color: var(--text-muted); border: 1px solid var(--border); }

/* Side badges */
.side-long  { background: var(--green-dim); color: var(--green); border:1px solid rgba(0,229,160,.2); }
.side-short { background: var(--red-dim);   color: var(--red);   border:1px solid rgba(255,45,85,.2); }

/* Phase badges */
.phase-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--radius-sm);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.phase-badge.phase-1  { background:var(--yellow-dim); color:var(--yellow); }
.phase-badge.phase-2  { background:var(--accent-dim2); color:var(--accent-light); }
.phase-badge.funded   { background:var(--green-dim);  color:var(--green); }
.phase-badge.breached { background:var(--red-dim);    color:var(--red); }
.phase-badge.demo     { background:var(--bg-card2); color:var(--text-muted); border:1px solid var(--border); }

/* Impact badges */
.impact-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:var(--radius-sm);
  font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
}
.impact-badge.high   { background:var(--red-dim);    color:var(--red); }
.impact-badge.medium { background:var(--yellow-dim); color:var(--yellow); }
.impact-badge.low    { background:var(--green-dim);  color:var(--green); }
.impact-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.impact-dot.high   { background:var(--red); }
.impact-dot.medium { background:var(--yellow); }
.impact-dot.low    { background:var(--green); }

/* Filter chips */
.chip-bar { display:flex; flex-wrap:wrap; gap:8px; padding:8px 0; align-items:center; }
.chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; font-size:12px; font-weight:600;
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg-card2); color:var(--text-secondary);
  cursor:pointer; transition:all .14s; white-space:nowrap;
}
.chip:hover { border-color:var(--accent-dim2); color:var(--text-primary); }
.chip.active { background:var(--accent-dim2); border-color:var(--accent); color:var(--accent-light); font-weight:700; }
.chip.win    { border-color:rgba(0,229,160,.3); color:var(--green); background:var(--green-dim); }
.chip.loss   { border-color:rgba(255,45,85,.3); color:var(--red);   background:var(--red-dim); }
.chip .chip-x { opacity:.6; margin-inline-start:2px; font-size:10px; }
.chip .chip-x:hover { opacity:1; }

/* ── 18. PROGRESS BARS ───────────────────────────────────────── */
.progress {
  height: 5px; border-radius: 2px;
  background: var(--bg-card2); overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 2px;
  background: var(--accent);
  transition: width .6s var(--ease-sharp);
}
.progress-fill.green { background: var(--green); }
.progress-fill.red   { background: var(--red); }
.progress-fill.amber { background: var(--accent); }
.progress-meta {
  display:flex; justify-content:space-between;
  font-size:11px; color:var(--text-muted);
  margin-top:5px; font-family:var(--font-mono); font-variant-numeric:tabular-nums;
}

/* ── 19. MODAL ───────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fadeIn .18s ease;
}
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-xl);
  padding: 28px;
  width: 100%; max-width: 540px;
  max-height: 88vh; overflow-y: auto;
  position: relative;
  animation: fadeUp .22s var(--ease) both;
  box-shadow: var(--shadow-lg);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; gap: 12px;
}
.modal-title {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 800; color: var(--text-primary);
  letter-spacing: -0.02em;
}
.modal-close {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); background: transparent;
  border: 1px solid var(--border); color: var(--text-muted);
  cursor: pointer; transition: all .14s; font-size: 14px;
}
.modal-close:hover { background: var(--red-dim); color: var(--red); border-color: rgba(255,45,85,.3); }
.modal-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border);
}

/* ── 20. TOAST NOTIFICATIONS ─────────────────────────────────── */
.toast-stack {
  position: fixed; bottom: 24px; right: 24px; z-index: 2000;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
[dir="ltr"] .toast-stack { right: 24px; left: auto; }
.toast {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  min-width: 280px; max-width: 360px;
  pointer-events: all;
  animation: fadeUp .22s var(--ease) both;
  box-shadow: var(--shadow-lg);
  font-size: 13px;
}
.toast.success { border-color: rgba(0,229,160,.3); }
.toast.error   { border-color: rgba(255,45,85,.3); }
.toast.warning { border-color: rgba(247,183,49,.3); }
.toast-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.toast.success .toast-icon { color: var(--green); }
.toast.error   .toast-icon { color: var(--red); }
.toast.warning .toast-icon { color: var(--yellow); }
.toast-body { flex: 1; }
.toast-title { font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
.toast-msg   { color: var(--text-muted); font-size: 12px; }

/* ── 21. CALENDAR (P&L GRID) ──────────────────────────────────── */
.cal-grid-header {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px; margin-bottom: 4px;
}
.cal-grid-header span {
  text-align: center; font-size: 10px; font-weight: 700;
  color: var(--text-muted); letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 0;
}
.cal-grid-body { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.cal-day {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 8px;
  min-height: 60px; cursor: pointer;
  transition: all .15s;
}
.cal-day:hover { border-color: var(--accent); }
.cal-day.win  { background: var(--green-dim); border-color: rgba(0,229,160,.25); }
.cal-day.loss { background: var(--red-dim);   border-color: rgba(255,45,85,.25); }
.cal-day.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-day.other { opacity: .3; pointer-events: none; }
.cal-day-num { font-size: 10px; font-weight: 600; color: var(--text-muted); }
.cal-day-pnl { font-family: var(--font-mono); font-size: 11px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.cal-day.win  .cal-day-pnl { color: var(--green); }
.cal-day.loss .cal-day-pnl { color: var(--red); }

/* Day cell (v2 stitch) */
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.cal-cell {
  position:relative; aspect-ratio:1.05;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:8px 10px;
  overflow:hidden; cursor:pointer;
  transition:all .15s; min-height:82px;
}
.cal-cell:hover { border-color:var(--accent); transform:translate(-1px,-1px); box-shadow:2px 2px 0 var(--shadow-hard); }
.cal-cell.win  { background:var(--green-dim); border-color:rgba(0,229,160,.25); }
.cal-cell.loss { background:var(--red-dim);   border-color:rgba(255,45,85,.25); }
.cal-cell.today { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.cal-cell.other { opacity:.3; pointer-events:none; }
.cal-cell .d-num { font-size:10px; color:var(--text-muted); font-weight:700; }
.cal-cell .d-pnl { font-family:var(--font-mono); font-size:12.5px; font-weight:700; margin-top:2px; font-variant-numeric:tabular-nums; }
.cal-cell .d-pnl.win  { color:var(--green); }
.cal-cell .d-pnl.loss { color:var(--red); }
.cal-cell .d-spark { position:absolute; inset:auto 6px 6px 6px; height:16px; pointer-events:none; }
.cal-cell .d-count { position:absolute; top:8px; inset-inline-end:8px; font-size:9px; color:var(--text-muted); }

/* ── 22. KPI CARDS ───────────────────────────────────────────── */
.kpi-grid {
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
}
.kpi-grid.cols-4 { grid-template-columns:repeat(4,1fr); }
.kpi-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.kpi-card {
  position:relative;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px 20px;
  overflow:hidden; transition:transform .2s, border-color .2s, box-shadow .2s;
}
.kpi-card::before { display:none !important; }
.kpi-card:hover {
  transform:translate(-2px,-2px);
  border-color:var(--accent);
  box-shadow:4px 4px 0 var(--shadow-hard);
}
.kpi-label {
  font-size:10.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:8px; font-weight:700;
}
.kpi-value {
  font-family:var(--font-mono);
  font-size:28px; font-weight:700; color:var(--text-primary);
  letter-spacing:-0.03em; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.kpi-value.sm { font-size:20px; }
.kpi-value.lg { font-size:34px; }
.kpi-sub {
  display:flex; align-items:center; gap:8px;
  margin-top:8px; font-size:12px; color:var(--text-muted);
}
.kpi-delta {
  display:inline-flex; align-items:center; gap:3px;
  padding:2px 7px; border-radius:var(--radius-sm);
  font-size:11px; font-weight:700; font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}
.kpi-delta.up   { background:var(--green-dim); color:var(--green); }
.kpi-delta.down { background:var(--red-dim);   color:var(--red); }
.kpi-delta.flat { background:var(--accent-dim); color:var(--accent-light); }
.kpi-delta.up::before   { content:'▲'; font-size:9px; }
.kpi-delta.down::before { content:'▼'; font-size:9px; }
.kpi-delta.flat::before { content:'•'; }

/* ── 23. ACCOUNT CARDS ───────────────────────────────────────── */
.account-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:16px;
}
.account-card {
  position:relative; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:18px 20px 20px; overflow:hidden; transition:all .2s;
}
.account-card::before { display:none !important; }
.account-card:hover {
  border-color:var(--accent);
  transform:translate(-2px,-2px);
  box-shadow:4px 4px 0 var(--shadow-hard);
}
.account-card > * { position:relative; }
.account-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:14px;
}
.account-firm {
  font-family:var(--font-display);
  font-size:15px; font-weight:800; color:var(--text-primary); letter-spacing:-0.01em;
}
.account-balance {
  font-family:var(--font-mono);
  font-size:26px; font-weight:700; margin:4px 0 14px;
  letter-spacing:-0.02em; font-variant-numeric:tabular-nums;
}
.account-card.add {
  display:flex; align-items:center; justify-content:center;
  min-height:200px; border-style:dashed;
  color:var(--text-muted); cursor:pointer;
  flex-direction:column; gap:10px;
}
.account-card.add:hover { color:var(--accent-light); border-color:var(--accent); box-shadow:none; transform:none; }
.account-card.add .plus {
  width:44px; height:44px; border-radius:var(--radius);
  background:var(--accent-dim); border:1px solid var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--accent-light);
}

/* ── 24. BROKER CARDS ────────────────────────────────────────── */
.broker-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
.broker-card {
  position:relative; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:22px; text-align:center; transition:all .2s; overflow:hidden;
}
.broker-card::before { display:none !important; }
.broker-card:hover {
  transform:translate(-2px,-2px); border-color:var(--accent);
  box-shadow:4px 4px 0 var(--shadow-hard);
}
.broker-card.featured { border-color:var(--accent); }
.broker-card > * { position:relative; }
.broker-logo {
  width:52px; height:52px; margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-card2); border:1px solid var(--border);
  border-radius:var(--radius-lg);
  font-size:22px; font-weight:800; color:var(--accent-light);
}
.broker-name { font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--text-primary); }
.broker-status {
  display:inline-flex; align-items:center; gap:5px;
  margin-top:5px; font-size:11px; color:var(--text-muted);
}
.broker-status.connected { color:var(--green); }
.broker-status.connected::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--green); display:inline-block; animation:pulse-live 2s infinite;
}
.broker-card .btn-connect { margin-top:14px; width:100%; }

/* ── 25. AI INSIGHTS CARD ────────────────────────────────────── */
.ai-card {
  position:relative;
  background: linear-gradient(135deg, var(--accent-dim) 0%, var(--bg-card) 50%);
  border:1px solid var(--accent-dim2);
  border-radius:var(--radius-lg); padding:20px 24px; overflow:hidden;
}
.ai-card::after { display:none; }
.ai-card > * { position:relative; }
.ai-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:var(--radius-sm);
  background:var(--accent); color:#000;
  font-size:10.5px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase;
}
[data-theme="light"] .ai-badge { color:#fff; }
.ai-badge::before { content:'✦'; font-size:11px; }
.ai-title { margin-top:10px; font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--text-primary); }
.ai-body  { margin-top:5px; font-size:13px; color:var(--text-secondary); line-height:1.65; }

/* ── 26. CHART WRAPPERS ──────────────────────────────────────── */
.chart-wrap {
  position:relative; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:18px; overflow:hidden;
}
.chart-wrap::before { display:none !important; }
.chart-wrap > * { position:relative; z-index:1; }
.chart-wrap .chart-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px; flex-wrap:wrap; gap:10px;
}
.chart-wrap .chart-title {
  font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--text-primary);
}

/* ── 27. ALERTS & ACTION ITEMS ───────────────────────────────── */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card2);
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 13px; color: var(--text-secondary); margin-bottom: 10px;
}
.alert-success { background:var(--green-dim); border-color:rgba(0,229,160,.25); color:var(--green); }
.alert-danger  { background:var(--red-dim);   border-color:rgba(255,45,85,.25);  color:var(--red); }
.alert-warning { background:var(--yellow-dim);border-color:rgba(247,183,49,.25); color:var(--yellow); }
.alert-info    { background:var(--accent-dim);border-color:var(--accent-dim2); color:var(--accent-light); }
.action-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--bg-card);
  margin-bottom:8px; transition:border-color .14s;
}
.action-item:hover { border-color:var(--accent); }

/* ── 28. PAGINATION ──────────────────────────────────────────── */
.pagination {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:16px;
}
.page-btn {
  min-width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--bg-card); color:var(--text-muted);
  font-size:12px; font-weight:600; cursor:pointer; transition:all .14s;
  font-family:var(--font-mono);
}
.page-btn:hover { border-color:var(--accent); color:var(--accent-light); }
.page-btn.active { background:var(--accent); color:#000; border-color:transparent; font-weight:700; }

/* ── 29. EMPTY STATES ────────────────────────────────────────── */
.empty-state {
  display:flex; flex-direction:column; align-items:center;
  padding:48px 20px; color:var(--text-muted); text-align:center;
}
.empty-state svg { width:40px; height:40px; margin-bottom:14px; opacity:.35; }
.empty-title { font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--text-secondary); margin-bottom:6px; }
.empty-state p { font-size:12.5px; max-width:280px; line-height:1.55; margin-bottom:14px; }

/* ── 30. FILTERS BAR ─────────────────────────────────────────── */
.filters {
  display:flex; flex-wrap:wrap; align-items:center;
  gap:8px; margin-bottom:16px; row-gap:8px;
}
.date-shortcuts { display:flex; gap:4px; align-items:center; flex-wrap:nowrap; }
.filter-active-dot {
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--accent); margin-left:4px; vertical-align:middle;
  animation:pulse 2s infinite;
}

/* ── 31. DAY VIEW ────────────────────────────────────────────── */
.day-view-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:20px;
}
.day-view-date {
  font-family:var(--font-display);
  font-size:22px; font-weight:800; color:var(--text-primary); letter-spacing:-0.02em;
}
.day-stats-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.day-stat {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:12px 16px; flex:1; min-width:120px;
}
.day-stat-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:4px; }
.day-stat-value { font-family:var(--font-mono); font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; }

/* ── 32. SCORE / GAUGE CARD ──────────────────────────────────── */
.score-card {
  position:relative; background:var(--bg-card);
  border:1px solid var(--accent-dim2) !important;
  border-radius:var(--radius-lg); overflow:hidden;
}
.score-stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; }
#score-ring { transition:stroke-dashoffset .8s var(--ease-sharp), stroke .4s; }
.gauge {
  position:relative; width:170px; height:170px; margin:0 auto;
}
.gauge svg { width:100%; height:100%; transform:rotate(-90deg); }
.gauge-track { fill:none; stroke:var(--bg-card2); stroke-width:13; }
.gauge-fill  { fill:none; stroke:var(--accent); stroke-width:13; stroke-linecap:square; transition:stroke-dashoffset .8s var(--ease-sharp); }
.gauge-label {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
}
.gauge-label .num { font-family:var(--font-mono); font-size:38px; font-weight:800; color:var(--text-primary); letter-spacing:-0.03em; }
.gauge-label .out { font-size:11px; color:var(--text-muted); }
.gauge-label .cap { font-size:10px; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-top:3px; }

/* ── 33. HEATMAP ─────────────────────────────────────────────── */
.heatmap { display:grid; grid-template-columns:auto repeat(24,1fr); gap:2px; font-size:9.5px; }
.heatmap .hcell { aspect-ratio:1; border-radius:2px; background:var(--bg-card2); }
.heatmap .hrow-label { font-size:9.5px; color:var(--text-muted); display:flex; align-items:center; padding-inline-end:5px; }
.heatmap .hcell.l1 { background:rgba(247,183,49,.12); }
.heatmap .hcell.l2 { background:rgba(247,183,49,.28); }
.heatmap .hcell.l3 { background:rgba(247,183,49,.48); }
.heatmap .hcell.l4 { background:rgba(247,183,49,.68); }
.heatmap .hcell.l5 { background:rgba(247,183,49,.88); }
.heatmap .hcell.neg1 { background:rgba(255,45,85,.18); }
.heatmap .hcell.neg2 { background:rgba(255,45,85,.42); }
.heatmap .hcell.neg3 { background:rgba(255,45,85,.70); }

/* ── 34. SECTION HEADER ──────────────────────────────────────── */
.section-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:24px 0 14px;
}
.section-head h2 {
  font-family:var(--font-display); font-size:16px; font-weight:800;
  color:var(--text-primary); letter-spacing:-0.02em; margin:0;
}
.section-head .sh-actions { display:flex; gap:8px; }

/* ── 35. AI CHAT WIDGET ──────────────────────────────────────── */
#pj-chat-root {
  position:fixed; bottom:24px; right:24px; z-index:500;
}
[dir="ltr"] #pj-chat-root { right:24px; left:auto; }
/* ─── Chat launcher button (floating bubble) ─── */
#pj-chat-btn {
  position:relative;
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  color:#000;
  border:none; padding:0;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(247,183,49,0.35), 0 2px 6px rgba(0,0,0,0.3);
  transition:transform .2s var(--ease), box-shadow .2s;
  animation:glow-pulse 3s ease-in-out infinite;
}
#pj-chat-btn svg {
  width:24px; height:24px; stroke:#000; flex-shrink:0;
}
[data-theme="light"] #pj-chat-btn {
  background:linear-gradient(135deg, var(--accent) 0%, #0000CC 110%);
  color:#fff;
  box-shadow:0 6px 18px rgba(26,26,255,0.30), 0 2px 6px rgba(0,0,0,0.15);
}
[data-theme="light"] #pj-chat-btn svg { stroke:#fff; }
#pj-chat-btn:hover {
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 10px 28px rgba(247,183,49,0.55), 0 3px 10px rgba(0,0,0,0.4);
}
#pj-chat-badge {
  position:absolute; top:-4px; right:-4px;
  min-width:18px; height:18px; padding:0 5px;
  background:var(--red); color:#fff;
  border-radius:99px; border:2px solid var(--bg);
  font-size:10px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
}

/* ─── Chat panel ─── */
#pj-chat-panel {
  position:absolute; bottom:70px; right:0;
  width:380px; max-height:540px;
  background:var(--bg-card);
  border:1px solid var(--border-2);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(247,183,49,0.08);
  display:flex; flex-direction:column;
  overflow:hidden;
  animation:fadeUp .22s var(--ease) both;
}
[dir="ltr"] #pj-chat-panel { right:auto; left:0; }
[data-theme="light"] #pj-chat-panel {
  box-shadow:0 24px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(26,26,255,0.10);
}

/* ─── Chat header ─── */
#pj-chat-header {
  padding:13px 14px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg-secondary); flex-shrink:0;
  font-family:var(--font-display); font-size:13px; font-weight:700;
  color:var(--text-primary);
}
#pj-ai-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--green); flex-shrink:0;
  box-shadow:0 0 0 3px rgba(0,229,160,0.18);
  animation:glow-pulse-green 2s ease-in-out infinite;
}
@keyframes glow-pulse-green {
  0%,100% { box-shadow:0 0 0 0 rgba(0,229,160,0.4); }
  50%     { box-shadow:0 0 0 6px rgba(0,229,160,0); }
}
#pj-model-tag {
  font-size:9.5px; font-weight:800;
  padding:2px 6px; border-radius:4px;
  background:var(--accent-dim2); color:var(--accent-light);
  text-transform:uppercase; letter-spacing:.5px;
  font-family:var(--font-mono);
}
[data-theme="light"] #pj-model-tag { color:var(--accent-dark); }
#pj-settings-btn,
#pj-chat-close {
  background:transparent; border:1px solid transparent;
  color:var(--text-muted); cursor:pointer;
  width:28px; height:28px; padding:0;
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1;
  transition:all .15s;
}
#pj-settings-btn:hover,
#pj-chat-close:hover {
  color:var(--accent-light); border-color:var(--border);
  background:var(--bg-card2);
}
#pj-chat-close { font-size:22px; font-weight:400; }

/* ─── Settings drawer ─── */
#pj-settings-panel {
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  max-height:300px; overflow-y:auto;
}
.pj-settings-inner {
  padding:14px 16px; font-size:12px;
  border-bottom:1px solid var(--border);
}
.pj-settings-label {
  font-size:11px; text-transform:uppercase;
  letter-spacing:.5px; color:var(--text-muted);
  margin-bottom:10px; font-weight:700;
}
.pj-provider-tabs { display:flex; gap:4px; margin-bottom:12px; flex-wrap:wrap; }
.pj-provider-info {
  font-size:11px; color:var(--text-muted);
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:8px 10px;
  margin-bottom:10px; line-height:1.5;
}
.pj-key-input {
  width:100%; box-sizing:border-box; padding:8px 11px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text-primary);
  font-family:var(--font-mono); font-size:12.5px; outline:none;
  transition:border-color .15s;
}
.pj-key-input:focus { border-color:var(--accent); }
.pj-key-actions { display:flex; gap:8px; margin-top:8px; }
.pj-key-actions #pj-save-key {
  flex:1; padding:7px 10px; font-size:12px; font-weight:700;
  border-radius:var(--radius);
}
.pj-clear-btn {
  padding:7px 12px; background:transparent;
  color:var(--red); border:1px solid var(--border);
  border-radius:var(--radius); cursor:pointer; font-size:12px; font-weight:600;
  font-family:inherit; transition:all .15s;
}
.pj-clear-btn:hover { background:var(--red-dim); border-color:var(--red); }
.pj-key-status { font-size:11px; margin-top:6px; color:var(--green); min-height:14px; }
.pj-key-status.error { color:var(--red); }
.pj-key-hint { font-size:10px; color:var(--text-dim); margin-top:8px; }

/* Support escalation chip (in-message) */
.pj-support-chip {
  margin-top:8px; padding:9px 11px;
  background:var(--accent-dim); border:1px solid var(--accent-dim2);
  border-radius:var(--radius); display:flex; align-items:center;
  gap:10px; flex-wrap:wrap;
}
.pj-support-text {
  font-size:11.5px; color:var(--accent-light); flex:1; font-weight:600;
}
[data-theme="light"] .pj-support-text { color:var(--accent-dark); }
.pj-support-btn {
  background:var(--accent); color:#000; border:none;
  border-radius:var(--radius); padding:5px 12px;
  font-size:11.5px; font-weight:700; cursor:pointer;
  white-space:nowrap; font-family:inherit;
  transition:transform .12s, box-shadow .12s;
}
[data-theme="light"] .pj-support-btn { color:#fff; }
.pj-support-btn:hover {
  transform:translate(-1px,-1px);
  box-shadow:2px 2px 0 var(--accent-dim2);
}
.pj-ptab {
  padding:5px 10px; font-size:11px; font-weight:700;
  background:var(--bg-card); border:1px solid var(--border);
  color:var(--text-muted); border-radius:var(--radius-sm);
  cursor:pointer; transition:all .12s; font-family:inherit;
}
.pj-ptab:hover { border-color:var(--accent); color:var(--accent-light); }
.pj-ptab.active {
  background:var(--accent-dim2); color:var(--accent-light);
  border-color:var(--accent);
}
[data-theme="light"] .pj-ptab.active { color:var(--accent-dark); }
#pj-save-key {
  background:var(--accent) !important; color:#000 !important;
  font-weight:700 !important; transition:transform .12s, box-shadow .12s;
}
[data-theme="light"] #pj-save-key { color:#fff !important; }
#pj-save-key:hover {
  transform:translate(-1px,-1px);
  box-shadow:2px 2px 0 var(--accent-dim2);
}

/* ─── Messages list ─── */
#pj-chat-messages {
  flex:1; overflow-y:auto;
  padding:14px;
  display:flex; flex-direction:column; gap:10px;
  background:var(--bg);
}
.pj-msg, .chat-msg {
  max-width:85%; padding:10px 13px;
  border-radius:var(--radius-lg); font-size:13px; line-height:1.55;
  word-wrap:break-word;
}
.pj-msg.user, .pj-msg-user, .chat-msg.user {
  align-self:flex-end;
  background:var(--accent); color:#000;
  border-radius:var(--radius-lg) var(--radius-lg) 3px var(--radius-lg);
  font-weight:500;
}
[data-theme="light"] .pj-msg.user,
[data-theme="light"] .pj-msg-user,
[data-theme="light"] .chat-msg.user { color:#fff; }
.pj-msg.assistant, .pj-msg.ai, .pj-msg-assistant, .chat-msg.ai {
  align-self:flex-start;
  background:var(--bg-card2); color:var(--text-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) 3px;
}
.pj-msg code, .chat-msg code, .pj-bubble code {
  font-family:var(--font-mono); font-size:12px;
  background:rgba(0,0,0,0.25); padding:1px 5px; border-radius:3px;
}
[data-theme="light"] .pj-msg code,
[data-theme="light"] .chat-msg code,
[data-theme="light"] .pj-bubble code {
  background:rgba(0,0,0,0.06);
}

/* ─── Bubble layout (used by appendMessage) ─── */
.pj-msg { display:flex; max-width:90%; }
.pj-msg-user { align-self:flex-end; justify-content:flex-end; }
.pj-msg-assistant, .pj-msg-ai { align-self:flex-start; }
.pj-bubble {
  padding:10px 13px;
  border-radius:var(--radius-lg);
  font-size:13px; line-height:1.55;
  word-wrap:break-word;
  max-width:100%;
}
.pj-bubble-user {
  background:var(--accent); color:#000;
  border-radius:var(--radius-lg) var(--radius-lg) 3px var(--radius-lg);
  font-weight:500;
}
[data-theme="light"] .pj-bubble-user { color:#fff; }
.pj-bubble-assistant, .pj-bubble-ai {
  background:var(--bg-card2); color:var(--text-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) 3px;
}

/* ─── Markdown rendering inside bubbles ─── */
.pj-md-h2 {
  font-size:14px; font-weight:800; color:var(--accent-light);
  margin:8px 0 4px; letter-spacing:-.2px;
}
[data-theme="light"] .pj-md-h2 { color:var(--accent-dark); }
.pj-md-h3 {
  font-size:13px; font-weight:700; color:var(--text-primary);
  margin:6px 0 3px;
}
.pj-md-li {
  position:relative; padding-inline-start:14px; margin:2px 0;
}
.pj-md-li::before {
  content:'•'; position:absolute; inset-inline-start:2px;
  color:var(--accent); font-weight:800;
}
[data-theme="light"] .pj-md-li::before { color:var(--accent-dark); }
.pj-bubble strong { color:var(--text-primary); font-weight:700; }
[data-theme="light"] .pj-bubble-user strong { color:#fff; }
.pj-bubble-user strong { color:#000; }

/* ─── Typing indicator ─── */
.pj-bubble .pj-dot {
  display:inline-block; width:6px; height:6px;
  background:var(--text-muted); border-radius:50%;
  margin:0 2px; animation:pj-typing 1.2s infinite;
}
.pj-bubble .pj-dot:nth-child(2) { animation-delay:.18s; }
.pj-bubble .pj-dot:nth-child(3) { animation-delay:.36s; }
@keyframes pj-typing {
  0%,80%,100% { opacity:.3; transform:translateY(0); }
  40%         { opacity:1;  transform:translateY(-3px); }
}

/* ─── Suggestions row (visible only on first open) ─── */
#pj-suggestions {
  display:flex; flex-wrap:wrap; gap:6px;
  padding-bottom:10px;
}
.pj-sug {
  background:var(--bg-card); border:1px solid var(--border);
  color:var(--text-muted); cursor:pointer;
  padding:5px 11px; font-size:11.5px; font-weight:600;
  border-radius:99px; font-family:inherit;
  transition:all .12s;
}
.pj-sug:hover {
  border-color:var(--accent); color:var(--accent-light);
  background:var(--accent-dim);
}
[data-theme="light"] .pj-sug:hover { color:var(--accent-dark); }

/* ─── Input row ─── */
#pj-chat-input-area {
  padding:10px 12px; border-top:1px solid var(--border);
  background:var(--bg-secondary); flex-shrink:0;
}
#pj-chat-input {
  flex:1; resize:none; min-height:36px; max-height:120px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:8px 11px;
  font-family:inherit; font-size:13px; color:var(--text-primary);
  outline:none; line-height:1.4;
  transition:border-color .15s;
}
#pj-chat-input:focus { border-color:var(--accent); }
#pj-chat-send {
  flex-shrink:0;
  width:36px; height:36px; padding:0;
  background:var(--accent); color:#000;
  border:none; border-radius:var(--radius); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .12s, box-shadow .12s;
}
[data-theme="light"] #pj-chat-send { color:#fff; }
#pj-chat-send:hover {
  transform:translate(-1px,-1px);
  box-shadow:2px 2px 0 var(--accent-dim2);
}
#pj-chat-send:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
#pj-chat-send svg { width:16px; height:16px; }

/* ── 36. RISK CALC PANEL ─────────────────────────────────────── */
#risk-calc-btn {
  position:fixed; right:24px; bottom:90px; z-index:400;
  width:44px; height:44px; border-radius:var(--radius);
  background:var(--bg-card); border:1px solid var(--border-2);
  color:var(--text-secondary); cursor:pointer; font-size:18px;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s; box-shadow:var(--shadow);
}
#risk-calc-btn:hover { border-color:var(--accent); color:var(--accent); }
.risk-calc-panel {
  position:fixed; right:24px; bottom:146px; z-index:399;
  width:300px; background:var(--bg-card);
  border:1px solid var(--border-2); border-radius:var(--radius-lg);
  padding:18px; box-shadow:var(--shadow-lg);
  animation:fadeUp .2s var(--ease) both;
}

/* ── 37. FIRM PICKER ─────────────────────────────────────────── */
.firm-picker-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:10px;
}
.firm-picker-card {
  background:var(--bg-card); border:2px solid var(--border);
  border-radius:var(--radius-lg); padding:14px 16px;
  cursor:pointer; transition:all .15s; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.firm-picker-card:hover { border-color:var(--accent-dim2); }
.firm-picker-card.selected { border-color:var(--accent); background:var(--accent-dim); }
.firm-picker-card .firm-name { font-size:13px; font-weight:700; color:var(--text-primary); }
.firm-picker-card .firm-cat  { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:600; }

/* ── 38. TIER CARDS (PRICING) ────────────────────────────────── */
.tier-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-block:24px; }
.tier {
  position:relative; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:26px 20px; text-align:center; transition:all .2s;
}
.tier:hover { transform:translate(-2px,-2px); border-color:var(--accent); box-shadow:4px 4px 0 var(--shadow-hard); }
.tier.featured { border:2px solid var(--accent); background:var(--accent-dim); }
.tier.featured:hover { box-shadow:5px 5px 0 var(--shadow-hard); }
.tier-ribbon {
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:#000;
  padding:3px 14px; border-radius:var(--radius-sm);
  font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
}
[data-theme="light"] .tier-ribbon { color:#fff; }
.tier-name  { font-size:11.5px; color:var(--text-muted); letter-spacing:.08em; text-transform:uppercase; font-weight:700; }
.tier-price { font-family:var(--font-mono); font-size:42px; font-weight:800; color:var(--text-primary); margin:10px 0 4px; letter-spacing:-0.03em; }
.tier-price .currency { font-size:20px; vertical-align:super; opacity:.7; }
.tier-price .period   { font-size:13px; color:var(--text-muted); font-weight:500; }
.tier-features { list-style:none; padding:16px 0 0; text-align:start; margin:0; }
.tier-features li { padding:6px 0; font-size:12.5px; color:var(--text-secondary); display:flex; align-items:center; gap:9px; }
.tier-features li::before { content:'✓'; color:var(--green); font-weight:900; font-size:12px; }
.tier-features li.off { opacity:.4; }
.tier-features li.off::before { content:'×'; color:var(--text-muted); }
.tier-cta {
  display:inline-block; width:100%; padding:11px 16px; margin-top:14px;
  border-radius:var(--radius); background:var(--bg-card2); color:var(--text-primary);
  font-weight:700; border:1px solid var(--border); cursor:pointer; transition:all .15s; font-size:13px;
}
.tier-cta:hover { background:var(--bg-hover); }
.tier.featured .tier-cta { background:var(--accent); color:#000; border-color:transparent; }
[data-theme="light"] .tier.featured .tier-cta { color:#fff; }
.tier.featured .tier-cta:hover { transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--shadow-hard); }

/* ── 39. TRADE CARDS (MOBILE) ────────────────────────────────── */
.trade-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:13px 15px; margin-bottom:9px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; transition:background .14s;
}
.trade-card:active { background:var(--bg-hover); }
.trade-card .tc-left { display:flex; flex-direction:column; gap:4px; min-width:0; }
.trade-card .tc-symbol { font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--text-primary); }
.trade-card .tc-meta { font-size:11px; color:var(--text-muted); }
.trade-card .tc-right { text-align:end; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.trade-card .tc-pnl { font-family:var(--font-mono); font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
.trade-card .tc-pnl.win  { color:var(--green); }
.trade-card .tc-pnl.loss { color:var(--red); }
.trade-card .tc-side {
  font-size:9.5px; font-weight:800; letter-spacing:.05em;
  padding:2px 7px; border-radius:var(--radius-sm);
}
.trade-card .tc-side.long  { background:var(--green-dim); color:var(--green); }
.trade-card .tc-side.short { background:var(--red-dim);   color:var(--red); }

/* ── 40. EVENT ROW (CALENDAR) ────────────────────────────────── */
.event-row {
  display:grid; grid-template-columns:60px 1fr auto;
  gap:12px; padding:11px 14px;
  border-bottom:1px solid var(--border-light); align-items:center;
}
.event-row .e-time { font-family:var(--font-mono); color:var(--text-muted); font-size:11.5px; font-variant-numeric:tabular-nums; }
.event-row .e-title { font-size:13px; color:var(--text-primary); font-weight:500; }
.event-row .e-ccy { font-size:10.5px; color:var(--text-muted); margin-inline-start:5px; }

/* ── 41. WIZARD / STEPPER ────────────────────────────────────── */
.wizard-steps {
  display:flex; align-items:center; gap:4px;
  margin-bottom:28px;
}
.wizard-step {
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600; color:var(--text-dim); flex:1; min-width:0;
}
.wizard-step .step-num {
  width:26px; height:26px; flex-shrink:0; border-radius:var(--radius-sm);
  border:2px solid var(--border-2); background:var(--bg-card2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--text-muted);
  transition:all .2s;
}
.wizard-step .step-label { color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wizard-step.active .step-num { border-color:var(--accent); background:var(--accent); color:#000; }
.wizard-step.active .step-label { color:var(--text-primary); }
.wizard-step.done .step-num { border-color:var(--green); background:var(--green); color:#000; }
.wizard-step.done .step-label { color:var(--text-secondary); }
.wizard-connector { flex:1; height:1px; background:var(--border); max-width:40px; }

/* ── 42. PROFILE & SETTINGS ──────────────────────────────────── */
.profile-avatar {
  width:72px; height:72px; border-radius:var(--radius-lg);
  border:2px solid var(--accent-dim2); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:26px; font-weight:800;
  background:var(--accent-dim); color:var(--accent-light);
}
.settings-section { margin-bottom:28px; }
.settings-section h3 {
  font-family:var(--font-display); font-size:14px; font-weight:800;
  color:var(--text-primary); letter-spacing:-0.01em;
  border-bottom:1px solid var(--border); padding-bottom:10px; margin-bottom:14px;
}

/* ── 43. MERGE BAR / FLOATING BARS ──────────────────────────── */
#merge-bar, .merge-bar {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--bg-card); border:1px solid var(--border-2);
  border-radius:var(--radius-lg); padding:10px 18px;
  display:flex; align-items:center; gap:12px;
  z-index:300; box-shadow:var(--shadow-lg);
  animation:fadeUp .22s var(--ease) both;
  font-size:13px;
}
.merge-bar-label { font-weight:600; color:var(--text-primary); }

/* ── 44. BACKTEST-SPECIFIC ───────────────────────────────────── */
.bt-container {
  display:flex; flex-direction:column;
  height:100vh; overflow:hidden;
  background:var(--bg);
}
.bt-toolbar {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px;
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border);
  flex-shrink:0; flex-wrap:wrap;
}
.bt-toolbar-group { display:flex; align-items:center; gap:6px; }
.bt-toolbar-sep { width:1px; height:20px; background:var(--border); margin:0 4px; }
.bt-main { display:flex; flex:1; overflow:hidden; }
.bt-left  { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.bt-right {
  width:300px; flex-shrink:0;
  background:var(--bg-secondary);
  border-inline-start:1px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden;
}
.bt-panel { display:flex; flex-direction:column; flex:1; overflow:hidden; position:relative; }
.bt-panel + .bt-panel { border-top:1px solid var(--border); }
.panel-chart { flex:1; overflow:hidden; position:relative; }
.panel-resize-handle {
  height:4px; cursor:row-resize;
  background:var(--border); transition:background .14s; flex-shrink:0;
}
.panel-resize-handle:hover { background:var(--accent); }

/* Panel header */
.panel-header {
  display:flex; align-items:center; gap:8px;
  padding:5px 10px; background:var(--bg-secondary);
  border-bottom:1px solid var(--border); flex-shrink:0;
  font-size:11.5px;
}
.panel-symbol {
  font-family:var(--font-display); font-size:13px; font-weight:800;
  color:var(--text-primary); letter-spacing:-0.01em;
}
.panel-tf {
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  color:var(--accent-light); background:var(--accent-dim);
  padding:2px 6px; border-radius:var(--radius-sm);
}
.panel-ohlc {
  font-family:var(--font-mono); font-size:11px; color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}

/* Replay bar */
.replay-controls {
  display:flex; align-items:center; gap:8px;
  padding:7px 12px; background:var(--bg-secondary);
  border-top:1px solid var(--border); flex-shrink:0;
  flex-wrap:wrap;
}
.replay-bar-wrap { flex:1; position:relative; height:20px; cursor:pointer; min-width:100px; }
.replay-bar {
  position:absolute; top:50%; transform:translateY(-50%);
  left:0; right:0; height:4px;
  background:var(--bg-card2); border-radius:2px; overflow:visible;
}
.replay-fill {
  position:absolute; top:0; left:0; height:100%;
  background:var(--accent); border-radius:2px;
  transition:width .08s linear;
}
.session-marker {
  position:absolute; top:-6px; bottom:-6px; width:2px;
  background:var(--red); opacity:.8; border-radius:1px;
}
.replay-time {
  font-family:var(--font-mono); font-size:11px; color:var(--text-muted);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
#replay-idx, #replay-total {
  font-family:var(--font-mono); font-size:11px; color:var(--text-muted);
}
.speed-select {
  background:var(--bg-card2); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:3px 8px; font-size:11px;
  color:var(--text-secondary); cursor:pointer;
}
.speed-select:focus { border-color:var(--accent); outline:none; }
#btn-play {
  width:32px; height:32px; border-radius:var(--radius-sm);
  background:var(--accent); color:#000; border:none;
  font-size:14px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-weight:700; transition:all .14s; flex-shrink:0;
}
[data-theme="light"] #btn-play { color:#fff; }
#btn-play:hover { background:var(--accent-light); }
#btn-mark-start, #btn-clear-start {
  padding:4px 9px; font-size:11px; border-radius:var(--radius-sm);
}
#btn-mark-start.active { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
#session-start-info { font-size:11px; color:var(--text-muted); }

/* Order panel */
.order-panel {
  padding:12px 14px; border-bottom:1px solid var(--border);
  background:var(--bg-secondary); flex-shrink:0;
}
.order-panel h4 {
  font-family:var(--font-display); font-size:12px; font-weight:800;
  color:var(--text-primary); letter-spacing:.03em; margin-bottom:10px; text-transform:uppercase;
}
.order-side-tabs { display:flex; gap:6px; margin-bottom:10px; }
.order-btn {
  flex:1; padding:7px; border-radius:var(--radius-sm);
  font-size:12px; font-weight:700; border:1px solid; cursor:pointer; transition:all .14s;
  text-transform:uppercase; letter-spacing:.04em;
}
.order-btn.buy  { background:var(--green-dim); color:var(--green); border-color:rgba(0,229,160,.3); }
.order-btn.sell { background:var(--red-dim);   color:var(--red);   border-color:rgba(255,45,85,.3); }
.order-btn.buy.active  { background:var(--green); color:#000; border-color:transparent; }
.order-btn.sell.active { background:var(--red);   color:#fff; border-color:transparent; }
.order-input-group { margin-bottom:8px; }
.order-label {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-muted); margin-bottom:4px;
}
.order-input {
  width:100%; background:var(--bg-card); border:1px solid var(--border-2);
  border-radius:var(--radius-sm); padding:6px 9px;
  font-family:var(--font-mono); font-size:12px; color:var(--text-primary);
}
.order-input:focus { border-color:var(--accent); outline:none; }
.order-submit {
  width:100%; padding:9px; border-radius:var(--radius-sm);
  font-size:13px; font-weight:700; border:none; cursor:pointer; transition:all .14s;
  font-family:var(--font-body); text-transform:uppercase; letter-spacing:.04em;
}
.order-submit.buy  { background:var(--green); color:#000; }
.order-submit.sell { background:var(--red); color:#fff; }
.order-submit:hover { opacity:.88; transform:translate(-1px,-1px); }

/* Position widget */
.position-widget {
  padding:10px 12px; background:var(--bg-secondary); border-top:1px solid var(--border);
  flex-shrink:0; font-size:12px;
}
.position-widget h4 {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-muted); margin-bottom:8px;
}
.pos-row { display:flex; justify-content:space-between; margin-bottom:5px; color:var(--text-secondary); }
.pos-value { font-family:var(--font-mono); font-weight:700; font-variant-numeric:tabular-nums; }
.pos-pnl.pos { color:var(--green); }
.pos-pnl.neg { color:var(--red); }

/* Open orders list */
.open-orders { padding:0 12px 10px; flex:1; overflow-y:auto; min-height:0; }
.open-orders h4 {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-muted); margin-bottom:8px; padding-top:10px;
}
.order-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; border:1px solid var(--border);
  border-radius:var(--radius-sm); margin-bottom:6px;
  background:var(--bg-card); font-size:11.5px;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
}
.order-item .oi-side { font-weight:700; }
.order-item .oi-side.long  { color:var(--green); }
.order-item .oi-side.short { color:var(--red); }
.order-item .oi-cancel {
  width:18px; height:18px; border-radius:2px;
  background:var(--red-dim); color:var(--red); border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; cursor:pointer;
}
.order-item .oi-cancel:hover { background:var(--red); color:#fff; }

/* TP/SL overlay on chart */
.tp-sl-overlay {
  position:absolute; left:0; right:0; pointer-events:none; z-index:20;
}
.tp-sl-line {
  position:absolute; left:0; right:0; height:1px; pointer-events:all; cursor:ns-resize;
}
.tp-sl-line .tpsl-label {
  position:absolute; inset-inline-end:6px; top:-10px;
  font-family:var(--font-mono); font-size:10px; font-weight:700;
  padding:2px 6px; border-radius:var(--radius-sm);
}
.tp-sl-line.tp .tpsl-label { background:var(--green-dim); color:var(--green); }
.tp-sl-line.sl .tpsl-label { background:var(--red-dim); color:var(--red); }

/* Indicators panel */
.indicators-panel {
  padding:10px 12px;
  background:var(--bg-secondary); border-bottom:1px solid var(--border); flex-shrink:0;
}
.ind-group { margin-bottom:8px; }
.ind-group-label {
  font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-dim); margin-bottom:5px;
}
.ind-row { display:flex; flex-wrap:wrap; gap:4px; }
.ind-btn {
  padding:3px 9px; border-radius:var(--radius-sm);
  font-size:10.5px; font-weight:600; border:1px solid var(--border);
  background:var(--bg-card); color:var(--text-muted);
  cursor:pointer; transition:all .12s; white-space:nowrap;
}
.ind-btn:hover { border-color:var(--accent-dim2); color:var(--text-primary); }
.ind-btn.active { background:var(--accent-dim2); border-color:var(--accent); color:var(--accent-light); font-weight:700; }
.ind-settings-btn {
  padding:3px 7px; border-radius:var(--radius-sm); font-size:10px;
  border:1px solid var(--border); background:transparent; color:var(--text-dim);
  cursor:pointer; transition:all .12s;
}
.ind-settings-btn:hover { color:var(--accent); border-color:var(--accent); }

/* Pane-layout selector */
.layout-btn {
  width:30px; height:24px; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--bg-card);
  cursor:pointer; transition:all .12s; display:flex; align-items:center; justify-content:center;
}
.layout-btn:hover { border-color:var(--accent-dim2); }
.layout-btn.active { border-color:var(--accent); background:var(--accent-dim2); }

/* Chart type toggle */
.chart-type-btn {
  padding:3px 9px; border-radius:var(--radius-sm); font-size:11px; font-weight:600;
  border:1px solid var(--border); background:var(--bg-card); color:var(--text-muted);
  cursor:pointer; transition:all .12s;
}
.chart-type-btn:hover { border-color:var(--accent-dim2); }
.chart-type-btn.active { border-color:var(--accent); background:var(--accent-dim2); color:var(--accent-light); }

/* Session / trade stats on BT panel */
.bt-stats-bar {
  display:flex; gap:14px; padding:6px 12px;
  background:var(--bg-secondary); border-bottom:1px solid var(--border);
  flex-shrink:0; flex-wrap:wrap;
}
.bt-stat { display:flex; flex-direction:column; gap:2px; }
.bt-stat-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-dim); }
.bt-stat-val { font-family:var(--font-mono); font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--text-primary); }
.bt-stat-val.pos { color:var(--green); }
.bt-stat-val.neg { color:var(--red); }

/* Loop range */
.loop-range-indicator {
  position:absolute; top:0; height:100%; pointer-events:none;
  background:rgba(247,183,49,0.06); border:1px solid rgba(247,183,49,0.3);
  border-radius:1px;
}

/* Realism info badge */
#realism-info {
  font-size:10.5px; color:var(--text-muted); padding:4px 8px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-card); font-family:var(--font-mono);
}

/* Drawing tools */
.draw-tool-btn {
  padding:3px 8px; border-radius:var(--radius-sm); font-size:11px;
  border:1px solid var(--border); background:var(--bg-card); color:var(--text-muted);
  cursor:pointer; transition:all .12s;
}
.draw-tool-btn:hover { border-color:var(--accent-dim2); }
.draw-tool-btn.active { border-color:var(--accent); background:var(--accent-dim2); color:var(--accent-light); }
.cut-mode-active { border-color:var(--red) !important; color:var(--red) !important; background:var(--red-dim) !important; }

/* ── 45. BACKGROUND MESH/GRID LAYERS ─────────────────────────── */
.bg-mesh {
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(247,183,49,0.06), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 30%, rgba(0,212,255,0.04), transparent 60%),
    var(--bg);
}
[data-theme="light"] .bg-mesh {
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(26,26,255,0.04), transparent 60%),
    var(--bg);
}
.bg-grid {
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 0%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 0%, #000 30%, transparent 80%);
}
[data-theme="light"] .bg-grid {
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
}

/* ── 46. GRADIENT TEXT / UTILITIES ───────────────────────────── */
.text-grad        { background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }
.text-grad-accent { background:var(--grad-cool); -webkit-background-clip:text; background-clip:text; color:transparent; }
.text-grad-violet { background:var(--grad-primary); -webkit-background-clip:text; background-clip:text; color:transparent; }
.text-accent      { color:var(--accent-light) !important; }
.text-green       { color:var(--green) !important; }
.text-red         { color:var(--red) !important; }
.text-muted-txt   { color:var(--text-muted) !important; }
.num, .mono       { font-family:var(--font-mono) !important; font-variant-numeric:tabular-nums; }
.font-display     { font-family:var(--font-display) !important; }

/* ── 47. GLASS CARDS ─────────────────────────────────────────── */
.glass {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(10px);
}
.glass-strong {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(20px);
}
[data-theme="light"] .glass        { background: rgba(255,255,255,0.65); }
[data-theme="light"] .glass-strong { background: rgba(255,255,255,0.80); }

/* ── 48. BENTO CARD ──────────────────────────────────────────── */
.bento-card {
  position:relative; border:1px solid var(--border);
  border-radius:var(--radius-xl); background:var(--bg-card);
  padding:24px; overflow:hidden; transition:border-color .2s, transform .2s, box-shadow .2s;
}
.bento-card:hover { border-color:var(--accent); transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--shadow-hard); }
.bento-card::after { display:none !important; }

/* ── 49. EYEBROW LABEL ───────────────────────────────────────── */
.eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 11px; border:1px solid var(--accent-dim2);
  border-radius:var(--radius-sm);
  font-size:10.5px; color:var(--accent-light);
  background:var(--accent-dim); text-transform:uppercase;
  letter-spacing:.08em; font-weight:700;
}

/* ── 50. REVEAL ANIMATION ────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; transition:none; } }

/* ── 51. KBD SHORTCUT ────────────────────────────────────────── */
.kbd {
  display:inline-block; padding:1px 6px;
  background:var(--bg-card2); border:1px solid var(--border-2);
  border-bottom-width:2px; border-radius:var(--radius-sm);
  font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted);
  vertical-align:middle; margin-inline-start:4px;
}

/* ── 52. LIVE DOT ────────────────────────────────────────────── */
.dot-live {
  display:inline-block; width:7px; height:7px;
  background:var(--green); border-radius:50%;
  animation:pulse-live 2s infinite;
  margin-inline-end:5px; vertical-align:middle;
}

/* ── 53. SPARKLINE CANVAS ────────────────────────────────────── */
.sparkline-canvas { display:block; margin-top:5px; width:80px; height:22px; opacity:.8; }

/* ── 54. CARD HEADER ACTION ──────────────────────────────────── */
.card-header-action {
  font-size:11px; color:var(--text-muted); cursor:pointer;
  padding:3px 8px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:transparent; transition:all .12s;
}
.card-header-action:hover { background:var(--bg-card2); color:var(--text-primary); border-color:var(--accent); }

/* ── 55. CHART TOOLTIP VALUE ─────────────────────────────────── */
.chart-tooltip-value { font-family:var(--font-mono); font-weight:700; font-size:13px; }

/* ── 56. SKELETON LOADER ─────────────────────────────────────── */
.skel {
  background:linear-gradient(90deg,var(--bg-card) 0%,var(--bg-card2) 50%,var(--bg-card) 100%);
  background-size:200% 100%; animation:skel-shimmer 1.5s infinite linear; border-radius:var(--radius-sm);
}

/* ── 57. EQUITY CARD ─────────────────────────────────────────── */
.card.equity-card { overflow:hidden; }
.card.equity-card::before { display:none !important; }

/* ── 58. SCORE CARD ENHANCEMENTS ─────────────────────────────── */
.score-card::before { display:none !important; }

/* ── 59. AI BADGE (standalone) ───────────────────────────────── */
.ai-badge-standalone {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:var(--radius-sm);
  background:var(--accent-dim2); border:1px solid var(--accent);
  color:var(--accent-light); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
}

/* ── 60. HERO LANDING ────────────────────────────────────────── */
.hero-glow-orb {
  position:absolute; width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle, rgba(247,183,49,0.18) 0%, rgba(247,183,49,0) 65%);
  filter:blur(40px); pointer-events:none;
}
.hero-mockup {
  position:relative; max-width:940px; margin:36px auto 0;
  border-radius:var(--radius-xl); overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow-lg);
}
.hero-mockup::before {
  content:''; display:block; height:26px;
  background:var(--bg-secondary); border-bottom:1px solid var(--border);
  background-image:
    radial-gradient(circle at 14px 13px, #ff5f57 4.5px, transparent 5px),
    radial-gradient(circle at 30px 13px, #febc2e 4.5px, transparent 5px),
    radial-gradient(circle at 46px 13px, #28c840 4.5px, transparent 5px);
}

/* ── 61. SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-2); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-dim); }

/* ── 62. SIDEBAR COLLAPSE BUTTON ─────────────────────────────── */
.sidebar-collapse-btn {
  position:fixed; top:22px; left:227px;
  width:24px; height:24px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-muted); font-size:10px; font-weight:700;
  z-index:150; box-shadow:var(--shadow-sm);
  transition:left .28s var(--ease-sharp), right .28s var(--ease-sharp), background .14s, color .14s;
  user-select:none; padding:0; line-height:1;
}
.sidebar-collapse-btn:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-dim); }
body.sidebar-collapsed .sidebar-collapse-btn { left:43px; transform:rotate(180deg); }
[dir="rtl"] body.sidebar-collapsed .sidebar-collapse-btn { transform:rotate(0deg); }

/* ── 63. COLLAPSED SIDEBAR STATE ────────────────────────────── */
body.sidebar-collapsed .sidebar { width:56px; overflow:visible; }
body.sidebar-collapsed .logo-text,
body.sidebar-collapsed .logo-sub { display:none; }
body.sidebar-collapsed .sidebar-logo { justify-content:center; padding:16px 8px; }
body.sidebar-collapsed .nav-section-label { display:none; }
body.sidebar-collapsed .sidebar-nav { padding:10px 4px; }
body.sidebar-collapsed .nav-item {
  justify-content:center; padding:9px 5px; gap:0;
  border-inline-end:none; border-radius:var(--radius);
}
[dir="rtl"] body.sidebar-collapsed .nav-item { border-inline-end:none; }
body.sidebar-collapsed .nav-item span { display:none; }
body.sidebar-collapsed .nav-icon { width:19px; height:19px; opacity:.75; }
body.sidebar-collapsed .nav-item:hover .nav-icon { opacity:1; }
body.sidebar-collapsed .sidebar-bottom { display:none; }
body.sidebar-collapsed .sidebar::before { display:none; }

/* Collapsed tooltip */
body.sidebar-collapsed .nav-item { position:relative; }
body.sidebar-collapsed .nav-item:hover span {
  display:block !important; position:absolute;
  left:calc(100% + 10px); top:50%; transform:translateY(-50%);
  white-space:nowrap;
  background:var(--bg-card); border:1px solid var(--border-2);
  border-radius:var(--radius); padding:5px 12px;
  font-size:12px; font-weight:600; color:var(--text-primary);
  z-index:300; box-shadow:var(--shadow); pointer-events:none;
}
[dir="rtl"] body.sidebar-collapsed .nav-item:hover span { left:auto; right:calc(100% + 10px); }

/* Main shift when sidebar collapsed */
body.sidebar-collapsed .main, body.sidebar-collapsed .main-content { margin-right:56px; }
[dir="ltr"] body.sidebar-collapsed .main, [dir="ltr"] body.sidebar-collapsed .main-content { margin-left:56px; margin-right:0; }

/* ── 64. MOBILE BOTTOM NAV ───────────────────────────────────── */
.bottom-nav {
  display:none; position:fixed; inset-inline:0; bottom:0; height:60px;
  background:var(--bg-card); border-top:1px solid var(--border);
  z-index:90; justify-content:space-around; align-items:stretch;
  padding:0 6px; box-shadow:0 -4px 18px rgba(0,0,0,.5);
}
.bottom-nav .bn-item {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:var(--text-muted); font-size:10px; text-decoration:none;
  transition:color .14s; padding-top:5px;
}
.bottom-nav .bn-item svg { width:21px; height:21px; }
.bottom-nav .bn-item.active { color:var(--accent); }
.bottom-nav .bn-fab {
  width:52px; height:52px; margin-top:-20px; border-radius:50%;
  background:var(--accent); color:#000;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; flex-shrink:0; box-shadow:var(--shadow);
}
[data-theme="light"] .bottom-nav .bn-fab { color:#fff; }
.bottom-nav .bn-fab:active { transform:scale(.95); }

/* ── 65. TABULAR NUMBERS GLOBAL ──────────────────────────────── */
.num, .kpi-value, .trade-pnl, .trade-price, .account-balance,
.equity-value, .delta-pill, td.num, th.num {
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
}

/* ── 66. STITCH COMPAT — gradient tokens ─────────────────────── */
:root {
  --grad-violet-deep: var(--grad-primary);
  --grad-violet-cyan: linear-gradient(135deg, var(--accent) 0%, var(--cyan) 100%);
}

/* ── 67. RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .kpi-grid.cols-4 { grid-template-columns:repeat(2,1fr); }
  .kpi-grid.cols-3 { grid-template-columns:repeat(2,1fr); }
  .kpi-value { font-size:22px; }
}
@media (max-width: 900px) {
  :root { --sidebar-width: 240px; }
  .sidebar {
    transform:translateX(100%);
    transition:transform .28s var(--ease-sharp), width .28s var(--ease-sharp);
    box-shadow:var(--shadow-lg);
  }
  [dir="ltr"] .sidebar { transform:translateX(-100%); }
  body.sidebar-open .sidebar { transform:translateX(0); }
  .main, .main-content { margin-right:0 !important; margin-left:0 !important; padding:16px 16px 80px; }
  .sidebar-collapse-btn { display:none; }
  body.sidebar-collapsed .sidebar { width:240px; }
  body.sidebar-collapsed .main, body.sidebar-collapsed .main-content { margin-right:0; margin-left:0; }
  .bottom-nav { display:flex; }
  body.has-bottom-nav { padding-bottom:68px; }
  .bt-right { width:260px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px) {
  .page-title { font-size:20px !important; }
  .page-header { gap:10px; }
  .main, .main-content { padding:12px 12px 80px; }
  .modal { padding:20px 18px; }
  .modal-overlay { padding:0; align-items:flex-end; }
  .modal { border-bottom-left-radius:0; border-bottom-right-radius:0; max-height:91vh; max-width:100%; }
  .kpi-grid.cols-4, .kpi-grid.cols-3 { grid-template-columns:1fr 1fr; gap:10px; }
  .kpi-card { padding:13px; }
  .kpi-value { font-size:20px; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .score-stats-grid { grid-template-columns:1fr !important; }
  .score-card { min-width:unset !important; }
  .cal-day { min-height:36px; padding:2px 4px; }
  .cal-day-num { font-size:9px; }
  .cal-day-pnl { display:none; }
  .toast-stack { left:12px; right:12px; bottom:14px; }
  .toast-stack .toast { width:100%; min-width:unset; }
  .filters { flex-direction:column; align-items:stretch; }
  .filters .btn { justify-content:center; }
  #merge-bar .merge-bar-label { display:none; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
  #pj-chat-panel { width:calc(100vw - 28px); right:0; }
}
@media (max-width: 420px) {
  #pj-chat-root { right:10px; bottom:10px; }
  #pj-chat-panel { right:0; width:calc(100vw - 20px); bottom:64px; }
  #pj-chat-btn   { width:46px; height:46px; }
  .risk-calc-panel { width:calc(100vw - 44px); right:0; }
  #risk-calc-btn   { right:14px; bottom:118px; }
}
@media (max-width: 900px) {
  .sidebar-collapse-btn { display:none; }
}

/* ── 68. RTL ADJUSTMENTS ─────────────────────────────────────── */
[dir="rtl"] .toast-stack   { right:24px; left:auto; }
[dir="rtl"] #pj-chat-root  { right:24px; left:auto; }
[dir="rtl"] #risk-calc-btn { right:24px; left:auto; }
[dir="rtl"] .risk-calc-panel { right:24px; left:auto; }
[dir="rtl"] .sidebar-collapse-btn { left:227px; right:auto; }
[dir="rtl"] body.sidebar-collapsed .sidebar-collapse-btn { left:43px; right:auto; }

/* ── 69. LAYOUT WRAPPER ──────────────────────────────────────── */
.layout { min-height:100vh; }

/* ── 70. MOBILE MENU BUTTON & OVERLAY ────────────────────────── */
.mobile-menu-btn {
  display:none; position:fixed; top:14px; right:14px; z-index:200;
  width:38px; height:38px; border-radius:var(--radius);
  background:var(--bg-card); border:1px solid var(--border-2);
  color:var(--text-primary); font-size:18px; cursor:pointer;
  align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm); transition:all .14s;
}
.mobile-menu-btn:hover { border-color:var(--accent); color:var(--accent); }
[dir="ltr"] .mobile-menu-btn { right:auto; left:14px; }
.mobile-overlay {
  display:none; position:fixed; inset:0; z-index:99;
  background:rgba(0,0,0,.55); backdrop-filter:blur(2px);
}
.mobile-overlay.open { display:block; }
@media (max-width: 900px) {
  .mobile-menu-btn { display:flex; }
  .sidebar.open { transform:translateX(0) !important; }
}

/* ── 71. SECONDARY SIDEBAR POSITION FIXES ────────────────────── */
/* Default RTL: sidebar on right */
.sidebar {
  right: 0;
  left: auto;
}
.main, .main-content {
  margin-right: var(--sidebar-width);
  margin-left: 0;
}
/* LTR overrides */
[dir="ltr"] .sidebar { right:auto; left:0; }
[dir="ltr"] .main, [dir="ltr"] .main-content { margin-right:0; margin-left:var(--sidebar-width); }
[dir="ltr"] body.sidebar-collapsed .main,
[dir="ltr"] body.sidebar-collapsed .main-content { margin-right:0; margin-left:56px; }
/* Collapse btn LTR */
[dir="ltr"] .sidebar-collapse-btn { left:auto; right:227px; }
[dir="ltr"] body.sidebar-collapsed .sidebar-collapse-btn { right:43px; }

/* ── 72. LEGACY MOBILE OPEN (old toggle) ─────────────────────── */
@media (max-width: 900px) {
  body.sidebar-open .sidebar { transform:translateX(0) !important; box-shadow:var(--shadow-lg); }
}

/* ── 73. LANG TOGGLE & SIDEBAR BOTTOM BUTTONS ───────────────── */
.lang-toggle {
  display:flex; align-items:center; justify-content:center;
  height:34px; padding:0 10px; border-radius:var(--radius);
  background:var(--bg-card); border:1px solid var(--border);
  color:var(--text-muted); font-size:11px; font-weight:700;
  letter-spacing:.05em; cursor:pointer; transition:all .14s;
}
.lang-toggle:hover { border-color:var(--accent); color:var(--accent-light); }

#tour-restart-btn {
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--radius);
  background:var(--bg-card); border:1px solid var(--border);
  color:var(--text-muted); font-size:14px; cursor:pointer; transition:all .14s;
}
#tour-restart-btn:hover { border-color:var(--accent); color:var(--accent-light); }

/* User avatar in sidebar bottom */
.sidebar-user {
  display:flex; align-items:center; gap:9px;
  padding:8px 10px; border-radius:var(--radius);
  cursor:pointer; transition:background .14s; margin-bottom:8px;
}
.sidebar-user:hover { background:var(--accent-dim); }
.sidebar-user-avatar {
  width:30px; height:30px; border-radius:var(--radius-sm);
  background:var(--accent-dim2); border:1px solid var(--accent-dim2);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:var(--accent-light); flex-shrink:0;
}
.sidebar-user-name { font-size:12.5px; font-weight:600; color:var(--text-secondary); }
.sidebar-user-role { font-size:10px; color:var(--text-muted); }

/* Strategies page plan badges */
.strategy-badge {
  padding:3px 9px; border-radius:var(--radius-sm);
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
}
.strategy-badge.active   { background:var(--green-dim); color:var(--green); }
.strategy-badge.inactive { background:var(--bg-card2); color:var(--text-muted); border:1px solid var(--border); }
.strategy-badge.testing  { background:var(--yellow-dim); color:var(--yellow); }

/* Sparkline row */
.sparkline-row { display:flex; align-items:center; gap:10px; margin-top:6px; }

/* ── 74. PRINT / REDUCED MOTION ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
@media print {
  .sidebar, .bottom-nav, #pj-chat-root, #risk-calc-btn, body::before, body::after { display:none !important; }
  .main, .main-content { margin:0 !important; padding:16px !important; }
}