/* DayZero Pulse — main.css  v12.6.1 */
 * DayZero Pulse — main.css
 * Version : v12.6.15
 * Updated : 22 Mar 2026
 *
 *  v9.1.0 — 15 Mar 2026 — Auth screen redesign: auth-logo, auth-title,
 *                           auth-sub, auth-steps, auth-input-field, auth-btn-primary/ghost, auth-info-box,
 *                           auth-note-block, auth-banner. Step pills updated to mobile style (slim, no pill bg).
 *  v9.0.0 — 15 Mar 2026 — Strategy summary KPI reduced (text-sm, was text-lg); metric-card padding tightened to 8px 10px
 * ============================================================
 *
 * SECTION MAP (use Ctrl+F on the section label to jump)
 * ──────────────────────────────────────────────────────
 *  §01  CSS VARIABLES (design tokens — colours, type scale)
 *  §02  RESET
 *  §03  BODY + GRID BACKGROUND
 *  §04  HEADER
 *  §05  MAIN LAYOUT
 *  §06  AUTH SCREEN (3-step wizard)
 *  §07  FORMS (inputs, labels, form-group)
 *  §08  BUTTONS (primary, outline, danger, full-width)
 *  §09  REDIRECT BOX
 *  §10  DASHBOARD (KPI ticker, metrics row)
 *  §11  PANELS (card containers)
 *  §12  STRATEGY BUILDER
 *  §13  SELECT / DROPDOWN
 *  §14  LEGS TABLE
 *  §15  BADGES
 *  §16  ACTIONS BAR
 *  §17  TAG / STATUS CHIP
 *  §18  PROGRESS BAR
 *  §19  POSITIONS TABLE
 *  §20  ALERT BOXES (alert-danger, alert-success, alert-warn)
 *  §21  SPINNER (loading indicator)
 *  §22  TOAST (pop-up notifications)
 *  §23  DIVIDER
 *  §24  MODAL (order confirmation overlay)
 *  §25  BOTTOM PANEL + SIDE NAV LAYOUT
 *  §26  LEFT SIDE NAV (tab buttons)
 *  §27  CONTENT AREA
 *  §28  P&L TICKER
 *  §29  SECTION HEADERS
 *  §30  EMPTY STATE
 *  §31  CHANGELOG
 *  §32  STEP WIZARD (auth steps 1-2-3)
 *  §33  CPR TABLE
 *  §34  BOTTOM TAB PANEL / JOURNAL TABLE
 *  §35  STATUS PILLS
 *  §36  JOURNAL KPI BAR
 *  §37  SETTINGS
 *  §38  TOGGLE ROW
 *  §39  AUTOMATION
 *  §40  PRIVACY MODE
 *  §41  COLLAPSIBLE
 *  §42  LIQUIDITY CHIPS
 *  §43  P&L ALERT BANNER (fixed overlay)
 *  §44  CPR BIAS
 *  §45  PROXIMITY BADGE
 *  §46  P&L CHART
 *  §47  JOURNAL FILTER BAR
 *  §48  PAGINATION
 *  §49  MOBILE LAYOUT (≤600px media query)
 *  §50  ACTIVITY LOG BUTTON (floating)
 *
 * CHANGE LOG (CSS only)
 * ──────────────────────────────────────────────────────
 *  v9.0.0 — 15 Mar 2026 — Strategy summary KPI reduced (text-sm, was text-lg); metric-card padding tightened to 8px 10px
 *  v8.4.3 — 14 Mar 2026 — No CSS changes (server.js patched)
 *  v8.4.2 — 14 Mar 2026 — No CSS changes (yield dropdown + session removal are HTML/JS only)
 *  v8.4.1 — 14 Mar 2026 — Section map (§01–§50) + version header added; no style changes
 *  v8.4.0 — 13 Mar 2026 — Mobile polish pass 2: header, nav, KPI, chart, dropdowns
 *  v8.3.0              — Mobile polish pass 1: tiny-text baseline, compact positions
 *  v8.2.0              — Mobile bottom-nav (§49 mobile block, §34 mob-nav)
 *  v8.1.0              — Session guard — no CSS changes
 *  v7.0.0              — Security hardening — no CSS changes
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  --section-gap: 20px;
  --bg:       #080a0d;
  --surface:  #0f1217;
  --surface2: #161b22;
  --border:   #1e2430;
  --border2:  #252d3a;
  --accent:   #00c87a;
  --accent-dim: rgba(0,200,122,0.12);
  --danger:   #e05555;
  --danger-dim: rgba(224,85,85,0.12);
  --warn:     #d4a017;
  --warn-dim: rgba(212,160,23,0.12);
  --text:     #d8dfe8;
  --muted:    #4a5568;
  --muted2:   #6b7a8d;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'IBM Plex Sans', sans-serif;

  /* Shadow tokens — Task 15 v12.1.6 */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --shadow:    0 4px 16px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.25);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.30);

  /* Unified type scale */
  --text-xs:   0.65rem;
  --text-sm:   0.72rem;
  --text-base: 0.82rem;
  --text-md:   0.9rem;
  --text-lg:   1rem;
  --text-xl:   1.2rem;
  --text-2xl:  1.5rem;
}

/* §02 ── RESET ── */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Subtle grid background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,200,122,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,122,0.015) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

/* §04 ── HEADER ── */
/* §03 ── HEADER ── v9.4.0: live toggle + username moved into header */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 48px;
  border-bottom: 1px solid var(--border);
  background: rgba(8,10,13,0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.logo-icon {
  display: none; /* replaced by logo-img-header */
}

/* Header logo — direct image, height-constrained */
.logo-img-header {
  height: 28px;
  width: auto;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

/* Logo image — fits within any container, preserves transparency */
.logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.auth-logo-img {
  width: 90%;
  height: 90%;
  object-fit: contain;
}

.version-badge {
  font-family: var(--mono);
  font-size: var(--text-xs);
  background: rgba(0,200,122,0.08);
  border: 1px solid rgba(0,200,122,0.2);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 4px;
  opacity: 0.7;
}

/* Right side of header — wraps all controls */
.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Live dot + LIVE/NOT CONNECTED text */
.header-live-status {
  display: flex;
  align-items: center;
}
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted);
  display: inline-block;
  margin-right: 6px;
  flex-shrink: 0;
}
.status-dot.live {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.status-text {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--muted2);
  letter-spacing: 0.06em;
}

/* Live toggle + interval pills — in header */
.header-live-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Username chip — in header */
.header-username {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--muted2);
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hide logo-text on very small screens — keep DZ icon + controls */
@media (max-width: 480px) {
  #logo-text, #ver-badge { display: none; }
  .header-username { display: none !important; }
}

/* §05 ── MAIN LAYOUT ── */
main {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

/* §06 ── AUTH SCREEN ── v9.2.0: tightened spacing, subtitle removed, banner moved below steps */
#auth-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 60px 24px 24px;       /* v9.4.0: bottom 40px→24px — removes dead space below buttons */
  gap: 0;
}

/* Logo mark */
.auth-logo {
  width: 120px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  margin-bottom: 16px;
}

/* App title */
.auth-title {
  font-family: var(--sans);
  font-size: 2rem; font-weight: 700; letter-spacing: -0.03em;
  margin-bottom: 20px;           /* v9.2.0: was 6px — subtitle removed so this holds the gap to steps */
  text-align: center;
}
.auth-title span { color: var(--muted2); font-weight: 400; }

/* Subtitle — v9.2.0: removed (redundant with header ver-badge) */
.auth-sub { display: none; }

/* Step indicators */
.auth-steps {
  display: flex; align-items: center; gap: 0;
  margin-bottom: 16px;           /* v9.2.0: was 24px */
  width: 100%; max-width: 420px;
}

/* Proxy banners — v9.2.0: sit below steps, not above logo */
.auth-banner {
  width: 100%; max-width: 420px;
  margin-bottom: 12px;           /* v9.2.0: was 16px */
}

/* Cards are now frameless — just a max-width column */
.auth-card {
  width: 100%;
  max-width: 420px;
}

.auth-card h2 { display: none; } /* title replaced by logo+title above */
.auth-card > p { display: none; } /* replaced by auth-note blocks */

/* Clean large inputs */
.auth-input-wrap { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.auth-input-field {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 13px 16px;            /* v9.2.0: was 14px */
  font-size: 0.88rem;
  color: var(--text);
  font-family: var(--sans);
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.auth-input-field:focus { border-color: var(--accent); }
.auth-input-field::placeholder { color: var(--muted); }

/* Info note block */
.auth-note-block {
  font-family: var(--mono); font-size: 0.65rem;
  color: var(--muted); background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
  line-height: 1.6; margin-bottom: 10px;
}
.auth-note-block a { color: var(--accent); text-decoration: none; }

/* Primary CTA */
.auth-btn-primary {
  background: var(--accent); color: #080a0d;
  font-family: var(--sans); font-weight: 700; font-size: 0.88rem;
  border: none; border-radius: 12px; padding: 14px 16px;
  width: 100%; cursor: pointer;
  transition: transform 0.1s, opacity 0.2s;
  box-shadow: 0 6px 20px rgba(0,200,122,0.2);
  margin-bottom: 8px;
  box-sizing: border-box;
}
.auth-btn-primary:active  { transform: scale(0.97); }
.auth-btn-primary:disabled { opacity: 0.5; cursor: default; }

/* Ghost / back button */
.auth-btn-ghost {
  background: transparent; color: var(--muted2);
  font-family: var(--sans); font-size: 0.78rem;
  border: 1px solid var(--border2); border-radius: 10px;
  padding: 9px 16px; cursor: pointer; width: 100%;
  transition: border-color 0.2s, color 0.2s;
  margin-bottom: 8px;
  box-sizing: border-box;
}
.auth-btn-ghost:active { border-color: var(--accent); color: var(--accent); }

/* Inline info box (API key display etc.) */
.auth-info-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  margin-bottom: 10px;
}

/* §07 ── FORMS ── */
.form-group {
  margin-bottom: 14px;
}

label {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="time"] {
  width: 100%;
  background: var(--surface2) !important;
  border: 1px solid var(--border2);
  color: var(--text) !important;
  font-family: var(--mono);
  font-size: var(--text-sm);
  padding: 8px 11px;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s;
  -moz-appearance: textfield;
  color-scheme: dark;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface2) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  color-scheme: dark;
}
input:focus { border-color: var(--accent); outline: none; }

/* §08 ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: 6px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.btn-primary {
  background: var(--accent);
  color: #080a0d;
  border: 1px solid var(--accent);
}
.btn-primary:hover {
  background: #00e88a;
  box-shadow: 0 0 20px rgba(0,200,122,0.25);
  transform: translateY(-1px);
}

.btn-danger {
  /* v12.7.1: solid red fill — clearly a destructive action, not just an outline */
  background: var(--danger);
  border: 1px solid var(--danger);
  color: #ffffff;
  font-weight: 700;
}
.btn-danger:hover { background: #c94444; border-color: #c94444; }
.btn-danger:active { transform: scale(0.97); opacity: 0.9; }

.btn-outline {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* v13.0.1: Apple-style small blue button — used for Test alert, inline actions */
.btn-apple-sm {
  background: #007AFF;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 5px 14px;
  height: 28px;
  letter-spacing: 0;
  align-self: flex-end;
}
.btn-apple-sm:hover  { background: #0066CC; }
.btn-apple-sm:active { background: #0055AA; transform: scale(0.97); }

.btn-warn {
  background: var(--warn-dim);
  border: 1px solid rgba(212,160,23,0.3);
  color: var(--warn);
}
.btn-warn:hover { background: rgba(212,160,23,0.2); }

.btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn-full { width: 100%; justify-content: center; }

/* §09 ── REDIRECT BOX ── */
.redirect-box {
  background: var(--accent-dim);
  border: 1px solid rgba(0,200,122,0.2);
  border-radius: 8px;
  padding: 14px;
  margin-top: 14px;
}
.redirect-box p { color: var(--accent); font-size: var(--text-sm); margin-bottom: 6px; }
.redirect-box a {
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--text-xs);
  word-break: break-all;
  text-decoration: none;
}
.redirect-box a:hover { text-decoration: underline; }

/* §10 ── DASHBOARD ── */
#dashboard { display: none; }

/* §10b ── KPI BLOCK v9.5.1 — 6-card grid, Day P&L inside grid, util bar on Margin Util ── */
/* v12.6.12: targeted section gaps — only top-level page blocks get margin-bottom */
#kpi-block           { margin-bottom: 20px; }
#home-pnl-section    { margin-bottom: 20px; }
.cpr-section-card    { margin-bottom: 20px; }
.strategy-section    { margin-bottom: 20px; }
.bottom-panel        { margin-bottom: 20px; }
.dzp-section         { margin-bottom: 20px; }
/* ref-card and inner panels do NOT get margin-bottom here — they control their own spacing */

/* 6-card grid — Day P&L | Total P&L | Available | Used | Open Pos | Margin Util */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .kpi-grid { grid-template-columns: 1fr 1fr; } }

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;  /* Task 14 v12.1.6: 12 → 16px */
  padding: 14px;
}

/* Day P&L card — slightly taller value */
.kpi-card-pnl { border-color: var(--border2); }

.kpi-card-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}
.kpi-card-val {
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.kpi-card-val.green  { color: var(--accent); }
.kpi-card-val.danger { color: var(--danger); }
.kpi-card-val.warn   { color: var(--warn); }

/* Day P&L card value — same size as other cards, bold for emphasis */
.kpi-pnl-val {
  font-size: 0.95rem;
  font-weight: 600;
  transition: color 0.4s;
}
.kpi-pnl-val.positive { color: var(--accent); }
.kpi-pnl-val.negative { color: var(--danger); }

/* Util bar — Margin Util card only */
.kpi-util-bar {
  margin-top: 8px;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.kpi-util-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* Keep .metric-card for strategy-summary cards (builder KPI row) */
.metric-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  position: relative;
  overflow: hidden;
}
.metric-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--border);
}
.metric-card.green::before { background: var(--accent); }
.metric-card.mid::before   { background: var(--muted); }
.metric-label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
}
.metric-value {
  font-family: var(--mono);
  font-size: var(--text-sm);
  font-weight: 700;
}
.metric-value.green { color: var(--accent); }
.metric-sub {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--muted2);
  margin-top: 2px;
}

/* §11 ── PANELS ── */
.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 700px) { .panel-grid { grid-template-columns: 1fr; } }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}

.panel-title {
  font-family: var(--mono);
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted2);
}

.panel-body { padding: 16px; }

/* §12 ── STRATEGY BUILDER ── */
.strategy-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}

.strategy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}

.strategy-title {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.strategy-body { padding: 12px 16px 16px; }

/* §13b ── STRATEGY BUILDER FORM v9.5.3 — single row desktop ── */

/* 6 fields in one row on desktop */
.builder-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 14px;
  align-items: end;
}
/* Mobile: defer to future — keep single row as-is for now */

/* Field wrapper */
.builder-field { display: flex; flex-direction: column; min-width: 0; }

/* v12.6.8: Automation schedule — uniform grid layout
 * 5 columns: Underlying | Product | Yield (2×) | Max Lots | Time
 * All controls 36px height — matches bldr- row standards.          */
.auto-sched-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 1fr 1fr;
  gap: 10px;
  align-items: end;
}
/* Yield spans 1 column in the grid (handled by grid-template-columns 2fr) */
.auto-sched-yield { /* no extra CSS needed — 2fr handles it */ }

/* Tablet/mobile: wrap to 2 cols */
@media (max-width: 700px) {
  .auto-sched-grid {
    grid-template-columns: 1fr 1fr;
  }
  .auto-sched-yield { grid-column: 1 / -1; }
}

/* Expiry: select + load btn side by side */
.builder-expiry-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

/* Load button — square, sits right of expiry select */
.builder-load-btn {
  flex-shrink: 0;
  width: 30px;
  background: rgba(0,200,122,0.1);
  border: 1px solid rgba(0,200,122,0.3);
  color: var(--accent);
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.builder-load-btn:hover { background: rgba(0,200,122,0.2); }

/* Label — compact */
/* v12.6.8: builder-label/select/input — unified with bldr- standards (36px height) */
.builder-label {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 5px;
  white-space: nowrap;
}

/* Select — matches bldr-select exactly */
.builder-select {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  height: 30px;
  padding: 0 26px 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  font-family: var(--font);
  outline: none;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
  line-height: normal;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath fill='%2352525b' d='M4.5 5L0 0h9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
}
.builder-select:focus { border-color: var(--accent); outline: none; }
html:not(.dark) .builder-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath fill='%2371717a' d='M4.5 5L0 0h9z'/%3E%3C/svg%3E");
}

/* Input (number + time) — same 36px height */
.builder-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  height: 30px;
  padding: 0 10px;
  line-height: 30px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  font-family: var(--font);
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
  -moz-appearance: textfield;
}
.builder-input:focus { border-color: var(--accent); }
.builder-input::-webkit-outer-spin-button,
.builder-input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

/* Build button ghost variant — Reset button in header */
.btn-build-ghost {
  background: rgba(255,255,255,0.06);
  color: var(--muted2);
  border: 1px solid rgba(255,255,255,0.1);
}
.btn-build-ghost:hover { background: rgba(255,255,255,0.1); color: var(--text); }

/* Build Strategy button — dark glass pill (matches reference screenshot) */
.btn-build {
  background: rgba(255,255,255,0.08);
  color: var(--text);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.68rem;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  white-space: nowrap;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-build:hover   { background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.22); }
.btn-build:active  { transform: scale(0.96); }
.btn-build:disabled { opacity: 0.4; cursor: default; }

.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

/* §13 ── SELECT / DROPDOWN ── */
select {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--text-sm);
  padding: 8px 34px 8px 11px;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%234a5568' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  max-width: 100%;
  box-sizing: border-box;
}
select:focus { border-color: var(--accent); }

/* §14 ── LEGS TABLE ── */
.legs-table { width: 100%; border-collapse: collapse; margin-top: 14px; }

.legs-table th {
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted2);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.legs-table td {
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: var(--text-sm);
  border-bottom: 1px solid rgba(30,36,48,0.6);
  vertical-align: middle;
}
.legs-table tr:last-child td { border-bottom: none; }

/* §15 ── BADGES ── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.badge-sell { background: var(--danger-dim);  color: var(--danger); border: 1px solid rgba(224,85,85,0.2); }
.badge-ce   { background: var(--accent-dim);  color: var(--accent); border: 1px solid rgba(0,200,122,0.2); }
.badge-pe   { background: rgba(255,255,255,0.04); color: var(--muted2); border: 1px solid var(--border); }
.badge-nrml { background: rgba(255,255,255,0.04); color: var(--muted2); border: 1px solid var(--border); }

/* §16 ── ACTIONS BAR ── */
.actions-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;    /* TODO 2: was 16px — tighter gap after summary strip */
  flex-wrap: wrap;
}

/* TODO 3+4+5: unified breakeven card — new card style + merged warn */
.be-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 16px;  /* Task 14: 12→16px */
  padding: 9px 14px;
  margin-bottom: 8px;
}
/* warn/ok now inline spans inside the single row */
.be-warn-line {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--warn);
  padding-right: 10px;
  border-right: 1px solid var(--border);
  margin-right: 4px;
  flex-shrink: 0;
}
.be-ok-line {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--accent);
  padding-right: 10px;
  border-right: 1px solid var(--border);
  margin-right: 4px;
  flex-shrink: 0;
}
.be-data-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.72rem;
}
.be-label      { color: var(--muted2); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6rem; flex-shrink: 0; }
.be-val-danger { color: var(--danger); font-weight: 600; }
.be-val-accent { color: var(--accent); font-weight: 600; }
/* v10.1.3: PE + CE both green, slightly larger — be-val-be replaces be-val-danger/be-val-accent on breakeven bar */
.be-val-be     { color: var(--accent); font-weight: 700; font-size: 0.80rem; }
.be-sep        { color: var(--border2); }
/* Range — v10.1.5: white bold base; JS still overrides color by width (green/amber/red) */
.be-range-mid  { font-weight: 700; font-size: 0.68rem; color: var(--text); }
/* Spot — white, inline */
.be-spot       { color: var(--muted2); font-size: 0.68rem; }
/* v10.1.3: be-spot-val — white for Spot value in breakeven bar */
.be-spot-val   { color: var(--text); font-size: 0.68rem; font-weight: 600; }

/* §17 ── TAG / STATUS CHIP ── */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--muted2);
}

/* Strategy summary cards — v9.0.0: reduced to match standard metric-value size (was text-lg) */
/* §18 ── PROGRESS BAR ── */
.progress-bar {
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}
.progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.5s ease; }
.progress-fill.warn   { background: var(--warn); }
.progress-fill.danger { background: var(--danger); }

/* §19 ── POSITION CARDS + LEG CARDS v9.6.6 — mobile-style ── */

/* Tab section wrapper — positions + orders */
.tab-section-wrap {
  padding: 16px 14px 16px;
}
/* Gap between stacked sections (OPEN POSITIONS → ORDERS) */
.tab-section-wrap + .tab-section-wrap {
  margin-top: 20px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.tab-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.tab-section-title {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.tab-section-count {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--accent);
}

/* v12.11.2: pos-section-label — closed positions sub-header, matches tab-section-title */
.pos-section-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 12px 0 6px;
}

/* v12.11.3: compact card for closed positions and orders — smaller text, less height */
/* v12.11.5: base pos-card is now compact — these go slightly more muted */
.closed-pos-card,
.ord-compact-card {
  padding: 6px 12px !important;
  margin-bottom: 4px !important;
  border-radius: 8px !important;
  gap: 8px !important;
  opacity: 0.65;
}
.closed-pos-card .pos-sym,
.ord-compact-card .pos-sym  { font-size: 0.70rem !important; font-weight: 600 !important; }
.closed-pos-card .pos-qty,
.ord-compact-card .pos-qty  { font-size: 0.60rem !important; }
.closed-pos-card .pos-pnl   { font-size: 0.70rem !important; }
.closed-pos-card .pos-badge,
.ord-compact-card .pos-badge { width: 24px !important; height: 24px !important; border-radius: 6px !important; font-size: 0.48rem !important; }
.ord-compact-card .ord-status { font-size: 0.60rem !important; }

/* Order cards */
/* v12.11.2: ord-card replaced by pos-card — kept for backward compat */
.ord-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
}
/* Order transaction badge — uses pos-badge sizing, buy/sell colour */
.ord-badge-txn.sell { color: var(--danger); border-color: rgba(224,85,85,0.3) !important; }
.ord-badge-txn.buy  { color: var(--accent); border-color: rgba(0,200,122,0.3) !important; }
.ord-badge {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.6rem; font-weight: 700;
  flex-shrink: 0;
}
.ord-badge.sell { background: var(--danger-dim); color: var(--danger); border: 1px solid rgba(224,85,85,0.2); }
.ord-badge.buy  { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(0,200,122,0.2); }
.ord-status {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted2);
  white-space: nowrap;
}
.ord-status-complete { color: var(--accent); }
.ord-status-reject   { color: var(--danger); }
/* Closed position cards — slightly muted vs open */
.closed-pos-card { opacity: 0.75; }

/* Positions tab — card list */
/* v12.9.0: single row — badge | sym | qty | avg·ltp | pnl */
/* v12.11.5: reduced padding/text to match compact card language */
.pos-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
}
.pos-left  { display: flex; align-items: center; gap: 10px; }
.pos-badge {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--surface); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.52rem; font-weight: 700;
  flex-shrink: 0;
}
.pos-badge.ce { color: var(--accent); border-color: rgba(0,200,122,0.25); }
.pos-badge.pe { color: var(--danger); border-color: rgba(224,85,85,0.25); }
.pos-sym   { font-size: 0.78rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.pos-qty   { font-family: var(--mono); font-size: 0.64rem; font-weight: 600; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
/* Avg + LTP grouped together, pushed right before P&L */
.pos-avgltp {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;   /* pushes avg+ltp+pnl to the right */
  flex-shrink: 0;
}
.pos-avg   { font-family: var(--mono); font-size: 0.64rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.pos-ltp   { font-family: var(--mono); font-size: 0.64rem; font-weight: 700; color: var(--text);  white-space: nowrap; }
.pos-pnl  { font-family: var(--mono); font-size: 0.78rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.pos-pnl.green { color: var(--accent); }
.pos-pnl.red   { color: var(--danger); }

/* Strategy legs section header */
.legs-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.legs-section-title {
  font-family: var(--mono); font-size: 0.6rem;
  color: var(--muted2); text-transform: uppercase; letter-spacing: 0.18em;
}
.legs-section-count {
  font-family: var(--mono); font-size: 0.65rem; color: var(--accent);
}

/* TODO 1: legs-tbody — single row on desktop via CSS grid */
#legs-tbody {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}

/* v12.6.6: strategy-legs-area — side padding so cards never touch outer border */
#strategy-legs-area {
  padding: 0 16px 16px;
}

/* Strategy builder — individual leg cards */
/* ── LEG CARDS v12.6.4 — clean 3-row layout ──────────────────
 * Row 1: [TYPE tag]  [Symbol name]
 * Row 2: [₹LTP large green]     [Margin label / ₹value]
 * Row 3: Strike · Qty · Lots · Product (mono muted)
 * Cards displayed in 2-col grid by renderLegs() JS
 * ──────────────────────────────────────────────────────────── */
.leg-card {
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border2);
}
.leg-card.CE { border-left-color: var(--accent); }
.leg-card.PE { border-left-color: var(--danger); }

/* Row 1: tag + symbol */
.leg-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}
.leg-tag {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.leg-tag.CE { background: var(--accent-dim); color: var(--accent); }
.leg-tag.PE { background: var(--danger-dim); color: var(--danger); }
.leg-sym {
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Row 2: LTP + Margin */
.leg-price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 8px;
}
.leg-price {
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
}
/* Margin block — right aligned, two lines */
.leg-margin-val {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.leg-margin-label {
  font-family: var(--mono);
  font-size: 0.62rem;   /* v12.6.18: was 0.55rem — slightly larger */
  font-weight: 600;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
html.dark .leg-margin-label {
  color: var(--text);   /* v12.6.20: white in dark mode */
}
.leg-margin-val span:last-child {
  font-family: var(--mono);
  font-size: 0.82rem;   /* v12.6.18: was 0.75rem — slightly larger */
  font-weight: 600;
  color: var(--muted2);
}
html.dark .leg-margin-val span:last-child {
  color: var(--text);   /* v12.6.20: white in dark mode */
}

/* Row 3: meta */
.leg-meta {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--muted2);
  line-height: 1.4;
}

/* Keep old classes for any other references */
.leg-right { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.leg-margin-desktop { font-family: var(--mono); font-size: 0.75rem; color: var(--muted2); }

/* v12.6.4: summary strip — tighter labels, better value size */
.legs-sum-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 14px;      /* v12.6.5: clear gap from leg cards above */
  margin-bottom: 10px;
}
.legs-sum-cell {
  text-align: center;
  padding: 9px 6px 8px;
  border-right: 1px solid var(--border);
}
.legs-sum-cell:last-child { border-right: none; }
.legs-sum-label {
  font-family: var(--mono);
  font-size: 0.5rem;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  white-space: nowrap;
}
.legs-sum-val {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.legs-sum-val.green { color: var(--accent); }

/* Keep .pnl-positive/.pnl-negative for closed positions table */
.pnl-positive { color: var(--accent); }
.pnl-negative { color: var(--danger); }
/* positions-table kept for closed positions sub-table */
.positions-table { width: 100%; border-collapse: collapse; }
.positions-table th {
  font-family: var(--mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted2); padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left; background: var(--surface2);
}
.positions-table td {
  padding: 8px 12px; font-family: var(--mono);
  font-size: var(--text-sm); border-bottom: 1px solid rgba(30,36,48,0.5);
}

/* §20 ── ALERT BOXES ── */
.alert {
  padding: 10px 14px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: var(--text-sm);
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  line-height: 1.5;
}
.alert-info    { background: rgba(74,158,255,0.07); border: 1px solid rgba(74,158,255,0.18); color: #7aaeff; }
.alert-warn    { background: var(--warn-dim); border: 1px solid rgba(212,160,23,0.25); color: var(--warn); }
.alert-success { background: var(--accent-dim); border: 1px solid rgba(0,200,122,0.2); color: var(--accent); }
.alert-danger  { background: var(--danger-dim); border: 1px solid rgba(224,85,85,0.25); color: var(--danger); }

/* §21 ── SPINNER ── */
/* v12.6.7: global — hide ALL number input spinners site-wide */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(0,200,122,0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* §22 ── TOAST ── */
#toast-container {
  position: fixed;
  bottom: 46px;   /* v12.7.3: was 24px — raised above Activity Log pill */
  right: 14px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;      /* v12.7.3: was 12px 16px — reduced */
  min-width: 200px;        /* v12.7.3: was 260px — reduced */
  max-width: 320px;
  font-family: var(--mono);
  font-size: 0.72rem;      /* v12.7.3: was var(--text-sm) — slightly smaller */
  display: flex;
  align-items: center;
  gap: 7px;
  animation: slideIn 0.25s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.30);  /* v12.7.3: subtler shadow */
}
.toast.success { border-left: 3px solid var(--accent); }
.toast.error   { border-left: 3px solid var(--danger); }
.toast.info    { border-left: 3px solid var(--muted); }
.toast.warn    { border-left: 3px solid var(--warn); color: var(--warn); max-width: 360px; }
@keyframes slideIn { from { transform: translateX(80px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* §23 ── DIVIDER ── */
.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}

/* §24 ── MODAL ── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 18px;
  padding: 24px 22px 20px;
  min-width: 340px;
  max-width: 520px;
  width: 92%;
  animation: scaleIn 0.18s ease;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
/* v12.11.7: Place Order modal — overrides */
.modal-place-order {
  padding: 22px 20px 18px;
}
@keyframes scaleIn { from{transform:scale(0.95);opacity:0} to{transform:scale(1);opacity:1} }

/* Header */
.modal-place-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
}
.modal-place-title {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.modal-place-underlying {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
}

/* Leg rows */
.modal-legs-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.modal-leg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  flex-wrap: wrap;
}
.modal-leg-badge {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  border: 1px solid;
  border-radius: 5px;
  padding: 2px 6px;
  flex-shrink: 0;
}
.modal-leg-strike {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}
.modal-leg-meta {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
  flex-shrink: 0;
}
.modal-slice-warn {
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--warn);
  flex-shrink: 0;
}

/* Order type pill toggles */
.modal-order-type-section { margin-bottom: 4px; }
.modal-order-type-label {
  font-family: var(--mono);
  font-size: 0.56rem;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 8px;
}
.modal-order-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.modal-ot-pill {
  cursor: pointer;
  display: block;
}
.modal-ot-pill input[type="radio"] { display: none; }
.modal-ot-pill-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  transition: border-color 0.15s, background 0.15s;
}
.modal-ot-pill input[type="radio"]:checked + .modal-ot-pill-inner {
  border-color: #007AFF;
  background: rgba(0,122,255,0.08);
}
.modal-ot-name {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}
.modal-ot-sub {
  font-family: var(--mono);
  font-size: 0.60rem;
  color: var(--muted);
}
.modal-ot-pill input[type="radio"]:checked + .modal-ot-pill-inner .modal-ot-name { color: #007AFF; }

/* Action buttons */
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}
.modal-btn-cancel {
  height: 36px;
  padding: 0 20px;
  background: var(--surface2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--font);
  font-size: 0.80rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}
.modal-btn-cancel:hover { opacity: 0.75; }
.modal-btn-place {
  height: 36px;
  padding: 0 28px;
  background: #007AFF;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font);
  font-size: 0.80rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.modal-btn-place:hover  { opacity: 0.88; }
.modal-btn-place:active { transform: scale(0.97); }

.modal h3 {
  font-family: var(--sans);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: 8px;
}
.modal p {
  color: var(--muted2);
  font-size: var(--text-sm);
  margin-bottom: 18px;
}

/* §25 ══ BOTTOM PANEL — SIDE NAV LAYOUT ══ */
.bottom-panel {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  min-height: 320px;
}

/* §26 ── LEFT SIDE NAV ── */
.side-nav {
  width: 52px;
  min-width: 52px;
  background: var(--surface2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  transition: width 0.18s ease, min-width 0.18s ease;
  overflow: hidden;
  flex-shrink: 0;
}
.side-nav:hover {
  width: 172px;
  min-width: 172px;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted2);
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  text-align: left;
}
.tab-btn:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text);
}
/* v9.4.1: stronger active state — accent icon + wider border */
.tab-btn.active {
  color: var(--accent);
  border-left: 3px solid var(--accent);
  background: rgba(0,200,122,0.08);
}
.tab-btn.active .side-nav-icon {
  stroke: var(--accent);
}

/* SVG icons in side nav */
.side-nav-icon {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Labels — hidden until nav expands */
.side-nav-label {
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
  font-size: var(--text-xs);
}
.side-nav:hover .side-nav-label {
  opacity: 1;
}

/* §27 ── CONTENT AREA ── */
.tab-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Refresh button row — top of content */
.tab-content-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  min-height: 40px;
}
.tab-content-header .btn-outline {
  font-family: var(--mono);
  font-size: var(--text-xs);
  padding: 4px 12px;
  letter-spacing: 0.04em;
}

.tab-panel { display: none; flex: 1; }
.tab-panel.active { display: block; }

/* §28 ── P&L TICKER removed v9.5.0 — replaced by #kpi-block ── */
/* .pnl-ticker, .pnl-item, .pnl-label, .pnl-val — no longer used */

/* §29 ── SECTION HEADERS ── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--mono);
  font-size: var(--text-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted2);
}

/* §30 ── EMPTY STATE ── */
.empty-state {
  text-align: center;
  padding: 40px 24px;
  color: var(--muted2);
  font-size: var(--text-sm);
  font-family: var(--mono);
}
.empty-state div { font-size: 1.8rem; margin-bottom: 10px; }

/* §31 ── CHANGELOG ── */
.changelog {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--muted2);
  line-height: 1.9;
}
.changelog span { color: var(--accent); margin-right: 8px; }

/* §32 ── STEP WIZARD ── v9.1.0: mobile-style pills */
.step-pill {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 0.62rem;
  color: var(--muted2); white-space: nowrap;
}
.step-pill.active { color: var(--accent); }
.step-pill.done   { color: var(--muted2); }

.step-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface2); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.6rem; font-weight: 700;
  transition: all 0.3s; flex-shrink: 0;
}
.step-pill.active .step-num { background: var(--accent); color: #080a0d; border-color: var(--accent); }
.step-pill.done   .step-num { background: var(--accent-dim); color: var(--accent); border-color: rgba(0,200,122,0.3); }
.step-lbl { white-space: nowrap; }

.step-line {
  flex: 1; height: 1px; background: var(--border);
  min-width: 16px;
  transition: background 0.3s;
}
.step-line.done { background: var(--accent); }

/* §33 ── CPR SECTION v9.8.4 — clean redesign ── */

/* Outer card */
.cpr-section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;  /* Task 14: 12→16px */
  margin-bottom: 16px;
  overflow: hidden;
}

/* Header */
.cpr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  background: var(--surface2);
  cursor: pointer;
  user-select: none;
}
.cpr-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cpr-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cpr-header-title {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.cpr-banner-mini {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--muted2);
}

/* NIFTY / SENSEX tab buttons */
.cpr-tab-btn {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--muted2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  letter-spacing: 0.04em;
}
.cpr-tab-btn.active {
  background: rgba(255,255,255,0.08);
  color: var(--text);
  border-color: rgba(255,255,255,0.16);
}
.cpr-tab-btn:hover:not(.active) { color: var(--text); }

/* Status tag + chevron */
.cpr-status-tag {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--muted2);
  min-width: 52px;
  text-align: right;
}
.cpr-chevron {
  color: var(--muted2);
  transition: transform 0.2s;
  display: flex;
  align-items: center;
}

/* Body */
.cpr-body-inner  { padding: 10px 14px 6px; }
.cpr-body-content {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted2);
}

/* Position banner — coloured by data-pos */
.cpr-pos-banner {
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 6px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
}
.cpr-pos-banner[data-pos="bull"] { border-color: rgba(0,200,122,0.3);   color: var(--accent); background: rgba(0,200,122,0.05); }
.cpr-pos-banner[data-pos="bear"] { border-color: rgba(224,85,85,0.3);   color: var(--danger); background: rgba(224,85,85,0.05); }
.cpr-pos-banner[data-pos="neut"] { border-color: rgba(212,160,23,0.25); color: var(--warn);   background: rgba(212,160,23,0.04); }

/* Table */
.cpr-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.7rem;
}
.cpr-th {
  padding: 3px 8px;
  color: var(--muted2);
  font-size: 0.58rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
}
/* Column sizing */
.cpr-td-name { width: 60px; text-align: left;  white-space: nowrap; }
.cpr-td-val  { text-align: right; font-variant-numeric: tabular-nums; }
.cpr-td-num  { text-align: right; }
.cpr-td-bar  { width: 100px; padding: 3px 8px; }

.cpr-td {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(30,36,48,0.5);
}

/* Level name colours — minimal: only the label */
.cpr-name-r     { color: var(--accent); }
.cpr-name-s     { color: var(--danger); }
.cpr-name-cpr   { color: var(--warn);   }
.cpr-name-pivot { color: var(--text);   font-weight: 700; }
.cpr-name-spot  { color: var(--text);   font-weight: 700; }

/* Row variants */
.cpr-row-spot { background: rgba(255,255,255,0.03); }
.cpr-row-cpr  { background: rgba(212,160,23,0.03); }
.cpr-ext      { opacity: 0.55; }

/* Sign colours — distance and % columns */
.cpr-td.pos { color: var(--accent); }
.cpr-td.neg { color: var(--danger); }
/* foot note spans */
.pos { color: var(--accent); }
.neg { color: var(--danger); }

/* Progress bar */
.cpr-bar-track {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.cpr-bar-fill {
  height: 100%;
  border-radius: 2px;
}
.cpr-bar-fill.pos { background: var(--accent); }
.cpr-bar-fill.neg { background: var(--danger); margin-left: auto; }

/* Footer */
.cpr-footer {
  display: flex;
  gap: 14px;
  padding: 5px 8px 2px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--muted2);
  flex-wrap: wrap;
}
.cpr-footer-hint { opacity: 0.5; margin-left: auto; }

/* §34a ── BOTTOM TAB PANEL ── */
/* §34b ── JOURNAL TABLE ── */
.journal-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: var(--text-sm);
}
.journal-table th {
  padding: 8px 12px;
  text-align: left;
  color: var(--muted2);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.journal-table td {
  padding: 9px 12px;
  border-bottom: 1px solid rgba(30,36,48,0.5);
  vertical-align: middle;
  white-space: nowrap;
}
.journal-table tr:last-child td { border-bottom: none; }
.journal-table tr:hover td { background: rgba(255,255,255,0.015); }

.pnl-pos { color: var(--accent); }
.pnl-neg { color: var(--danger); }

/* §35 ── STATUS PILLS ── */
.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.sp-building   { background: var(--warn-dim); color: var(--warn); border: 1px solid rgba(212,160,23,0.25); }
.sp-placed     { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(0,200,122,0.2); }
.sp-squaredoff { background: rgba(82,92,110,0.15); color: var(--muted2); border: 1px solid var(--border); }
.sp-expired    { background: rgba(82,92,110,0.1);  color: var(--muted2); border: 1px solid var(--border); }

/* §36 ── JOURNAL KPI BAR ── */
.journal-kpi-bar { display: none; } /* removed v9.6.4 */
.j-kpi, .j-kpi-sep, .j-kpi-lbl, .j-kpi-val { display: none; } /* removed v9.6.4 */

/* §47 ── JOURNAL TOOLBAR v9.6.4 — single row: dropdowns + date + icon actions ── */
.j-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: nowrap;      /* force single row */
  overflow-x: auto;       /* scroll on very narrow screens instead of wrapping */
}

/* Compact select dropdowns — fixed width, no grow */
.j-select {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.65rem;     /* TODO 6: reduced */
  padding: 4px 22px 4px 7px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%234a5568' d='M4 5L0 0h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  transition: border-color 0.2s;
  flex-shrink: 0;
  width: 106px;
}
.j-select:focus { border-color: var(--accent); }

/* Date inputs */
.j-date-input {
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.65rem;     /* TODO 6: reduced */
  padding: 4px 6px;
  outline: none;
  width: 104px;
  flex-shrink: 0;
  color-scheme: dark;
  -webkit-text-fill-color: var(--text) !important;
  transition: border-color 0.2s;
}
.j-date-input:focus { border-color: var(--accent); }

.j-date-sep {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--muted);
  flex-shrink: 0;
}

/* Icon-only action buttons */
.j-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--muted2);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.j-icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.j-icon-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.j-icon-btn svg { pointer-events: none; }

.j-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: var(--text-base);
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0.4;
  transition: opacity 0.15s, color 0.15s;
}
.j-del-btn:hover { opacity: 1; color: var(--danger); }

.journal-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  padding: 14px;
  border-bottom: 1px solid var(--border);
}
.j-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 9px 12px;
}
.j-card-label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 3px;
}
.j-card-val {
  font-family: var(--mono);
  font-size: var(--text-md);
  font-weight: 700;
}

/* §37 ── SETTINGS ── */
.settings-section {
  padding: 0;
  border-bottom: 1px solid var(--border);
}
.settings-section:last-child { border-bottom: none; }

.settings-title { display: none; } /* replaced by cpr-section-title */

/* Settings values row — lot sizes, freeze qty etc */
.settings-values-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.settings-row-label {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  align-self: flex-end;
  padding-bottom: 7px;
}
.settings-row-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 4px;
}
.settings-val-item {
  display: flex;
  flex-direction: column;
}
.settings-num-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 4px 6px;
  width: 60px;
  outline: none;
  transition: border-color 0.2s;
  -moz-appearance: textfield;
}
.settings-num-input:focus { border-color: var(--accent); }
.settings-num-input:disabled { opacity: 0.45; }
.settings-num-input::-webkit-outer-spin-button,
.settings-num-input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.settings-edit-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted2);
  font-family: var(--mono);
  font-size: 0.62rem;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  height: 28px;
}
.settings-edit-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Sq-Off preset time buttons */
.sqoff-presets-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.sqoff-preset-btn {
  font-family: var(--mono);
  font-size: 0.6rem;
  padding: 3px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--muted2);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.sqoff-preset-btn:hover { border-color: var(--accent); color: var(--accent); }

.settings-sub-title {
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted2);
  margin-bottom: 6px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

/* ALERT GRID */
.alert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
@media (max-width: 700px) { .alert-grid { grid-template-columns: repeat(2, 1fr); } }

.alert-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 9px;
  gap: 6px;
  min-width: 0;
}
.alert-tile-label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* §37b ── TELEGRAM ALERTS v9.7.5 — clean cards ── */
.tg-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.tg-card-label {
  font-family: var(--mono);
  font-size: 0.55rem;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}
/* Credentials row */
.tg-creds-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.tg-field { display: flex; flex-direction: column; min-width: 0; }
.tg-field-btn { display: flex; flex-direction: column; flex-shrink: 0; gap: 2px; }
.tg-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 5px 9px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s;
  height: 30px;
}
.tg-input:focus { border-color: var(--accent); }
.tg-masked { -webkit-text-security: disc; }
.tg-hint {
  color: var(--muted2);
  font-size: 0.6rem;
  cursor: help;
  margin-left: 2px;
}
.tg-status-msg {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--muted);
  text-align: center;
}
/* General Alerts toggle row */
.tg-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tg-toggle-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.tg-toggle-name {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--text);
  white-space: nowrap;
}
/* Always-on alerts — static labels, no toggle */
.tg-always-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.tg-always-item {
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--muted2);
  padding: 3px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  white-space: nowrap;
}
.tg-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}
.tg-sr-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.tg-sr-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.tg-sr-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--muted2);
  font-weight: 600;
}
.tg-sr-div {
  width: 1px; height: 20px;
  background: var(--border2);
  flex-shrink: 0;
  margin: 0 2px;
}
/* EOD row */
.tg-eod-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tg-eod-title {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}
.tg-eod-sub {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--muted2);
}

/* §38 ── TOGGLE ROW ── */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid rgba(30,36,48,0.6);
}
.toggle-row:last-child { border-bottom: none; }

.toggle-label {
  font-family: var(--mono);
  font-size: var(--text-sm);
  color: var(--text);
}
.toggle-sub {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--muted2);
  margin-top: 2px;
}

/* mini-toggle kept as alias — now input[type=checkbox].toggle */
.mini-toggle {
  display: none; /* legacy — converted to .toggle checkboxes v12.2.9 */
}

/* §39 ── AUTOMATION v9.7.9 ── */
.auto-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
}
.auto-banner-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text);
}
.auto-banner-detail {
  font-weight: 400;
  color: var(--muted2);
  margin-left: 8px;
}
.auto-opt-sub {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--muted2);
  margin-top: 2px;
}
.auto-log-body {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  min-height: 44px;
  max-height: 120px;
  overflow-y: auto;
  line-height: 1.8;
}
.auto-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 0;
  overflow: hidden;
}
.auto-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--surface2);
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--border);
}
.auto-body { padding: 16px; }
.auto-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted);
  transition: background 0.3s;
  flex-shrink: 0;
}
.auto-status-dot.armed  { background: var(--warn);   box-shadow: 0 0 6px var(--warn); }
.auto-status-dot.active { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.auto-time-input {
  font-size: var(--text-md);
  letter-spacing: 0.08em;
  text-align: center;
}

@media (max-width: 780px) {
  #tab-panel-automation .auto-config-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 480px) {
  #tab-panel-automation .auto-config-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* §40 ── PRIVACY MODE ── */
.privacy-mask   { filter: blur(6px); user-select: none; pointer-events: none; }
.privacy-stars  { color: var(--muted2); letter-spacing: 0.1em; }

/* §41 ── COLLAPSIBLE ── */
.collapsible-section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 10px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  user-select: none;
}
.collapsible-section-hdr:hover .settings-title { color: var(--text); }

/* §42 ── LIQUIDITY CHIPS ── */
.liq-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.58rem;        /* v12.11.8: was var(--text-xs)/0.65rem — reduced */
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  margin-left: auto;         /* push to right edge inside modal-leg-row */
  flex-shrink: 0;
  white-space: nowrap;
}
.liq-chip.good { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(0,200,122,0.25); }
.liq-chip.warn { background: var(--warn-dim); color: var(--warn); border: 1px solid rgba(212,160,23,0.25); }
.liq-chip.bad  { background: var(--danger-dim); color: var(--danger); border: 1px solid rgba(224,85,85,0.25); }

/* §43 ── P&L ALERT BANNER ── */
.pnl-alert-banner {
  display: none;
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  min-width: 440px;
  max-width: 780px;
  padding: 11px 18px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: var(--text-sm);
  font-weight: 600;
  align-items: center;
  gap: 8px;
  animation: bannerSlide 0.3s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
@keyframes bannerSlide {
  from { transform: translateX(-50%) translateY(-16px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.banner-sl     { background: var(--danger-dim); border: 1px solid var(--danger); color: var(--danger); }
.banner-target { background: var(--accent-dim); border: 1px solid var(--accent); color: var(--accent); }

/* §44 ── CPR BIAS ── */
/* v10.0.5: cpr-bias-row now uses be-card as base — only overrides needed here */
.cpr-bias-row {
  margin-bottom: 8px;  /* same gap as be-card below it */
}
/* bias-chip: coloured pill — sits inline inside be-data-row */
.bias-chip {
  padding: 3px 11px;
  border-radius: 12px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  color: var(--muted2);
  background: transparent;
  transition: all 0.15s;
  letter-spacing: 0.04em;
}
.bias-chip.active-bull { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.bias-chip.active-bear { background: var(--danger-dim); border-color: var(--danger); color: var(--danger); }
.bias-chip.active-neut { background: var(--warn-dim);   border-color: var(--warn);   color: var(--warn); }

/* §38 ── CPR BIAS STRATEGY v9.7.5 ── */
.cpr-section-title {
  font-family: var(--mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted2);
  margin-bottom: 10px;
}
.cpr-control-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.cpr-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cpr-toggle-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}
.cpr-legend-dot {
  width: 1px; height: 14px;
  background: var(--border2);
  flex-shrink: 0;
  margin: 0 2px;
}
.cpr-legend-item {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--muted2);
  white-space: nowrap;
}
.cpr-sep-dot {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--border2);
}
.cpr-dropdowns-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.cpr-dropdown-field { display: flex; flex-direction: column; }
.cpr-status-card {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted2);
  padding: 8px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* §45 ── PROXIMITY BADGE ── */
.prox-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 600;
  vertical-align: middle;
}
.prox-warn  { background: var(--warn-dim); border: 1px solid rgba(212,160,23,0.35); color: var(--warn); }
.prox-alert { background: var(--danger-dim); border: 1px solid rgba(224,85,85,0.35); color: var(--danger); }

/* §46 ── P&L CHART ── */
.pnlchart-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px 14px 8px;
  box-sizing: border-box;
  position: relative;   /* v10.2.1: anchor for tooltip absolute positioning */
}

.pnlchart-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.pnlchart-title {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--muted2);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  flex-shrink: 0;
}

.pnlchart-stats {
  display: flex;
  gap: 10px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--muted2);
  flex-wrap: wrap;
  align-items: center;
}

.pnlchart-stat { display: inline-flex; align-items: baseline; gap: 3px; }
.pnlchart-stat-icon  { font-size: var(--text-xs); color: var(--muted2); flex-shrink: 0; }
.pnlchart-stat-label { color: var(--muted2); font-size: var(--text-xs); }
.pnlchart-stat-val   { font-weight: 700; font-size: var(--text-xs); }
.pnlchart-stat-time  { font-size: var(--text-xs); color: var(--muted2); opacity: 0.6; }
.pnlchart-stat-val.pos { color: var(--accent); }
.pnlchart-stat-val.neg { color: var(--danger); }
/* v12.10.9: whole chip goes red when negative — icon + label + value, !important to beat base specificity */
.pnlchart-stat.neg .pnlchart-stat-icon  { color: var(--danger) !important; }
.pnlchart-stat.neg .pnlchart-stat-label { color: var(--danger) !important; opacity: 0.8; }
.pnlchart-stat.neg .pnlchart-stat-time  { color: var(--danger) !important; opacity: 0.6; }

.pnlchart-nav { display: flex; align-items: center; gap: 4px; }
/* nav prev/next use j-icon-btn — no extra CSS needed */
.pnlchart-nav-label {
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text);
  padding: 3px 9px;
  border: 1px solid var(--border2);
  border-radius: 6px;
  white-space: nowrap;
  cursor: pointer;
  min-width: 72px;
  text-align: center;
  transition: border-color 0.2s, color 0.2s;
}
.pnlchart-nav-label:hover { border-color: var(--accent); color: var(--accent); }

.pnl-chart-canvas {
  width: 100%;
  flex: 1;
  min-height: 200px;
  max-height: 320px;
  display: block;
  border-radius: 8px;
  cursor: crosshair;
}

/* v10.2.1: hover/touch tooltip */
.pnl-chart-tooltip {
  position: absolute;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: var(--mono);
  pointer-events: none;       /* never blocks mouse events */
  z-index: 50;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  transition: opacity 0.1s;
}
.pnl-tooltip-time {
  font-size: 0.62rem;
  color: var(--muted2);
  margin-bottom: 2px;
}
.pnl-tooltip-val {
  font-size: 0.82rem;
  font-weight: 700;
}

.pnlchart-footer {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--muted2);
  text-align: center;
  padding-top: 5px;
  opacity: 0.5;
}

/* §47b — j-filter-bar removed v9.6.4, replaced by .j-toolbar above */
/* §48 ── PAGINATION ── */
.j-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0 5px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--muted2);
}
.j-page-info  { font-size: var(--text-xs); color: var(--muted2); }
.j-page-btns  { display: flex; align-items: center; gap: 7px; }
.j-page-num   { font-size: var(--text-xs); color: var(--muted2); min-width: 68px; text-align: center; }
.j-page-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  font-family: var(--mono);
  font-size: var(--text-xs);
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.j-page-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.j-page-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* §49 ── RESPONSIVE (≤ 600px) ── slim responsive rules */

/* Positions: desktop shows table, mobile shows cards */
.pos-table-view { display: block; }
.pos-card-view  { display: none; }

/* Strategy legs: desktop shows margin inline in header */
.leg-margin-desktop { display: inline; }

/* Legs summary: 5 cols on desktop */
.legs-sum-strip { grid-template-columns: repeat(5, 1fr); }
.legs-sum-cell-desktop { display: block; }

@media (max-width: 768px) {
  /* Positions: hide table, show cards */
  .pos-table-view { display: none !important; }
  .pos-card-view  { display: block !important; }

  /* Strategy legs: hide margin on mobile */
  .leg-margin-desktop { display: none !important; }

  /* Legs summary: 3 cols — hide Margin Required and Free Capital cells */
  .legs-sum-strip { grid-template-columns: repeat(3, 1fr) !important; }
  .legs-sum-cell-desktop { display: none !important; }
}

@media (max-width: 600px) {
  #logo-text { display: none !important; }
  #ver-badge { display: none !important; }

  header { padding: 0 12px !important; gap: 6px !important; }
  .logo-icon { width: 24px !important; height: 24px !important; }

  main { padding: 8px 8px 24px !important; max-width: 100% !important; }

  .header-live-controls { gap: 4px !important; }

  .strategy-section { overflow: visible !important; }
  .strategy-header { padding: 8px 12px !important; }
  .strategy-body { padding: 8px 12px !important; }
  .builder-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  .bottom-panel { margin-top: 6px !important; }
  .side-nav { display: none !important; }
}

/* §50 ── ACTIVITY LOG BUTTON ── */
#dzp-log-toggle-btn {
  font-family: var(--mono) !important;
  font-size: var(--text-xs) !important;
}

/* ── LOG FILTER PILLS ── */
.log-filter-btn {
  font-family: var(--mono);
  font-size: var(--text-xs);
  padding: 2px 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted2);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.log-filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #080a0d;
}

.dzp-log-line {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 3px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  line-height: 1.5;
  font-family: var(--mono);
  font-size: var(--text-xs);
}
.dzp-log-line:last-child { border-bottom: none; }
.dzp-log-line .log-time  { color: var(--muted2); flex-shrink: 0; min-width: 54px; }
.dzp-log-line .log-src   { flex-shrink: 0; min-width: 44px; text-align: center; padding: 0 4px; border-radius: 3px; }
.dzp-log-line .log-msg   { color: var(--text); word-break: break-word; }

.src-strat  { background: rgba(0,160,220,0.12); color: #4db8ff; }
.src-auto   { background: rgba(160,100,220,0.12); color: #c084fc; }
.src-sqoff  { background: var(--danger-dim); color: var(--danger); }
.src-order  { background: var(--accent-dim); color: var(--accent); }
.src-system { background: var(--warn-dim); color: var(--warn); }

#dzp-log-toggle-btn.has-new::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 6px; height: 6px;
  background: var(--danger);
  border-radius: 50%;
}
#dzp-log-toggle-btn { position: fixed; }

/* ============================================================
 * §99 ── PHASE 2: iOS SAFE AREA + PWA (v12.1.1)
 * Task 07: Header clears iPhone notch (safe-area-inset-top)
 * Task 08: Bottom nav clears iPhone home bar (safe-area-inset-bottom)
 * Task 09: Extra padding when running as installed PWA standalone
 * Task 10: Smooth momentum scroll on iOS for all scrollable areas
 * ============================================================ */

/* ── Task 07: Header safe area — notch clearance ────────────────────
 * env(safe-area-inset-top, 0px):
 *   On iPhone with notch/Dynamic Island → inset is ~44–59px
 *   On all other devices                → fallback is 0px (no change)
 * We add it ON TOP of the existing 48px height so header
 * grows to accommodate the notch — content stays below it.
 * padding-top pushes content down; height grows to match.
 */
header {
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(48px + env(safe-area-inset-top, 0px));
}

/* ── Task 08: Bottom nav safe area — home bar clearance ─────────────
 * .dzp-bottom-nav is the new nav added in Phase 7.
 * Pre-declaring here so safe-area is ready when Phase 7 adds the HTML.
 * env(safe-area-inset-bottom, 16px):
 *   On iPhone with home bar → inset is ~34px
 *   On all other devices    → fallback is 16px (comfortable padding)
 */
.dzp-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 16px);
}

/* Also apply to existing bottom nav if present */
.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 16px);
}

/* ── Task 09: Standalone PWA mode ───────────────────────────────────
 * Only fires when app is installed on home screen and opened as PWA.
 * Regular browser tab never triggers this.
 * Adds extra breathing room at top to account for status bar
 * that's rendered by iOS (not the browser) in standalone mode.
 * Also hides scrollbars — cleaner app-like experience.
 */
@media all and (display-mode: standalone) {
  body {
    /* Status bar in standalone = env(safe-area-inset-top) handled by header above */
    /* Prevent any content flash before app hydrates */
    -webkit-text-size-adjust: 100%;
  }

  /* Hide scrollbars in PWA mode — feels more native */
  ::-webkit-scrollbar {
    display: none;
  }

  /* Main content gets extra bottom padding so nothing hides under home bar */
  main {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Task 10: Momentum scroll on iOS ────────────────────────────────
 * -webkit-overflow-scrolling: touch enables iOS native momentum
 * scrolling (the "rubber band" feel) on scrollable containers.
 * Desktop browsers ignore this property entirely — zero impact.
 */
main,
.tab-content,
.tab-panel,
.bottom-panel,
.right-panel,
.auth-screen {
  -webkit-overflow-scrolling: touch;
}


/* ============================================================
 * §100 ── PHASE 3: TOUCH UX (v12.1.5)
 * Task 11: Remove grey tap flash on iPhone
 * Task 12: Prevent accidental text selection on tappable elements
 * Task 13: font-size 16px on inputs/selects prevents iOS zoom-on-focus
 * ============================================================ */

/* ── Task 11: Remove tap highlight ──────────────────────────────────
 * iPhone shows a grey/blue overlay flash when you tap any element.
 * Setting to transparent removes it entirely — feels native.
 * Desktop browsers ignore this property.
 */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ── Task 12: Prevent text selection on tappable elements ───────────
 * On iPhone, a long-press on a button/card tries to select text.
 * user-select: none prevents this — feels more app-like.
 * We target interactive elements only — not content text.
 * Desktop: also prevents accidental drag-select on buttons (good).
 */
button,
.tab-btn,
.kpi-card,
.leg-card,
.card,
.auth-btn-primary,
.auth-btn-secondary,
.btn,
.cpr-tab-btn,
.cpr-header,
.side-nav,
.bottom-nav,
.tab-btn,
header,
.strategy-header,
.panel-header {
  -webkit-user-select: none;
  user-select: none;
}

/* ── Task 13: 16px font-size on inputs and selects ──────────────────
 * iOS Safari zooms in whenever a focused input has font-size < 16px.
 * Our inputs use --text-sm (0.72rem ≈ 11.5px) — triggers zoom every time.
 * Fix: override to 16px on mobile only so desktop monospace sizing unchanged.
 * We use max() to ensure it's always at least 16px on any screen.
 * The !important overrides the existing var(--text-sm) declaration.
 */
@media (max-width: 600px) {
  input[type="text"],
  input[type="password"],
  input[type="number"],
  input[type="time"],
  input[type="email"],
  select,
  textarea {
    font-size: 16px !important;  /* prevents iOS zoom-on-focus */
  }
}


/* ============================================================
 * §101 ── PHASE 4: CARD DESIGN POLISH (v12.1.6)
 * Task 14: border-radius 12px → 16px (applied above in-place)
 * Task 15: shadow tokens added to :root (applied above in :root)
 * Task 16: apply --shadow-sm to all main card elements
 * ============================================================ */

/* ── Task 16: Apply shadow-sm to cards ──────────────────────────────
 * Adds subtle depth to cards — matches reference app design language.
 * Dark theme shadow uses higher opacity than light theme to show on
 * our dark background. Desktop and mobile both benefit.
 */
.kpi-card,
.leg-card,
.be-card,
.cpr-section-card,
.confirm-modal,
.bottom-panel,
.auth-card {
  box-shadow: var(--shadow-sm);
}


/* ============================================================
 * §102 ── PHASE 5: SCREEN SECTIONS (v12.1.6)
 * Task 17: 5 screen wrapper divs defined in HTML
 * Task 18: Content moved into screens
 * Task 19: showScreen() added to index.html
 * Task 20: Screen CSS below
 * ============================================================ */

/* ── Task 20: Screen visibility rules ───────────────────────────────
 *
 * MOBILE (≤600px): one screen at a time.
 *   .dzp-screen hidden by default.
 *   .dzp-screen.active shows — controlled by showScreen().
 *
 * DESKTOP (>600px): all screens always visible.
 *   Screens are transparent wrappers — no hiding.
 *   display: block !important overrides the mobile hidden state.
 *   Layout looks exactly the same as before on desktop.
 */

/* Mobile: screens hidden by default */
.dzp-screen {
  display: none;
}

/* Mobile: only active screen visible */
.dzp-screen.active {
  display: block;
}

/* Desktop: all screens always visible — transparent wrappers */
@media (min-width: 601px) {
  .dzp-screen {
    display: block !important;
  }
}

/* Mobile: add bottom padding so content clears the bottom nav bar */
@media (max-width: 600px) {
  .dzp-screen {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }
  /* Active screen gets padding, inactive screens stay hidden */
  .dzp-screen.active {
    display: block;
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }
}


/* ============================================================
 * §103 ── PHASE 6: DESKTOP LEFT SIDEBAR (v12.1.8)
 * Task 21: .dzp-sidebar HTML added to index.html
 * Task 22: Sidebar CSS below
 * Task 23: Buttons wired to showScreen() in HTML
 * Task 24: main margin-left 72px on desktop
 * Task 25: old .side-nav hidden on desktop (replaced by sidebar)
 * ============================================================ */

/* ── Task 22: Sidebar base ───────────────────────────────────────────
 * Fixed left column — 72px wide, full height, dark surface.
 * Icon-only buttons with tooltip via title attribute.
 * Hidden on mobile — bottom nav takes over (Phase 7).
 */
.dzp-sidebar {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 72px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0 16px;
  gap: 4px;
  z-index: 200;
  box-shadow: var(--shadow-sm);
  /* Hidden on mobile — bottom nav handles navigation */
  display: none;
}

/* Logo area */
.dzp-sb-logo {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

/* Nav buttons */
.dzp-sb-btn {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: var(--muted2);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.dzp-sb-btn:hover:not(.active) {
  background: var(--surface2);
  color: var(--text);
}

.dzp-sb-btn.active {
  background: var(--accent-dim);
  color: var(--accent);
}

.dzp-sb-btn.active svg {
  stroke: var(--accent);
}

/* Small label under icon */
.dzp-sb-label {
  font-family: var(--mono);
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

/* Live dot at bottom of sidebar */
.dzp-sb-live {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  margin-top: 4px;
}

/* ── Task 24: Main content margin-left on desktop ───────────────────
 * Shifts main content right to clear the 72px sidebar.
 * Only applies on desktop — mobile has no sidebar.
 */
@media (min-width: 601px) {
  .dzp-sidebar {
    display: flex;  /* show sidebar on desktop */
  }

  /* Push header and main content right to clear the 72px sidebar.
   * Use margin-left only — keep margin-right: auto so content
   * centres in the remaining viewport space. */
  header {
    margin-left: 72px;
  }

  main {
    margin-left: 72px;
    margin-right: auto;
    /* Centre the content within the available space */
    max-width: calc(1400px + 72px);
  }

  /* Centre #dashboard inside main on desktop.
   * max-width 960px gives breathing room on either side.
   * The reference app uses 560px — we need wider for KPI grid. */
  #dashboard {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 8px;
  }
}

/* ── Task 25: Hide old expanding side-nav on desktop ────────────────
 * The old .side-nav (52px expanding to 172px on hover) inside
 * .bottom-panel is replaced by the new sidebar for navigation.
 * Hide it on desktop — the sidebar handles screen switching.
 * Keep it in HTML so switchTab() still works internally.
 */
@media (min-width: 601px) {
  .side-nav {
    display: none;
  }

  /* Tab content takes full width without the side-nav */
  .tab-content {
    border-radius: 0;
  }
}


/* ============================================================
 * §104 ── SCREEN BUG FIXES (v12.1.9)
 * Bug 1+2: HOME was showing builder + missing positions/orders
 * Bug 3:   MORE was empty
 * Bug 4:   AUTOMATION was missing sqoff
 * ============================================================ */

/* strategy-section hidden by default on ALL screen sizes (v12.2.0).
 * showScreen('builder') → display:block via inline style.
 * showScreen(other)     → display:none  via inline style.
 * Fixes Builder bleeding into Home/Auto on desktop. */
.strategy-section {
  display: none;
}

/* Mobile: HOME screen shows bottom-panel; other non-builder screens too */
@media (max-width: 600px) {
  /* Hide bottom-panel and strategy-section by default on mobile —
   * showScreen() JS sets display:block/none as needed.
   * CSS ensures clean initial state and no flash of wrong content. */
  .bottom-panel {
    display: none;
  }
  .strategy-section {
    display: none;
  }
}

/* Mobile: bottom-panel padding so content clears bottom nav */
@media (max-width: 600px) {
  .bottom-panel {
    margin-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }
}


/* ============================================================
 * §105 ── SECTION GROUPING POLISH (v12.2.5)
 * Matches reference app section card + toggle row style.
 * ============================================================ */

/* ── Section card wrapper ────────────────────────────────────────────
 * Each settings section gets a card background + rounded corners.
 * Matches reference app's card grouping visual.
 */
.settings-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 12px;
  padding: 16px !important;
  box-shadow: var(--shadow-sm);
}
.settings-section:last-child {
  border-bottom: 1px solid var(--border);  /* override the none */
  margin-bottom: 0;
}

/* ── Section title — group label style ──────────────────────────────
 * Matches reference app group-label: small, uppercase, muted.
 */
.cpr-section-title {
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--muted2);
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ── Toggle rows — inline flex with gap ─────────────────────────────
 * Matches reference: label left, toggle right, comfortable gap.
 */
.alert-grid {
  gap: 10px;
}

/* ── Tab panel padding fix ──────────────────────────────────────────
 * Tab panels inside bottom-panel get consistent padding.
 */
.tab-panel {
  padding: 16px;
}

/* ── Consistent card spacing in MORE screen ─────────────────────────
 * CPR control cards, toggle rows — all get card-like grouping.
 */
.cpr-control-card {
  border-radius: 12px;
  margin-bottom: 10px;
}

/* ── Settings inner section gap ─────────────────────────────────────
 * Space between setting rows inside a section card.
 */
.settings-values-row {
  gap: 12px;
  padding: 4px 0;
}

/* ── Main content comfortable padding ───────────────────────────────
 * Matches reference app .main-col padding: 32px 40px.
 */
@media (min-width: 601px) {
  main {
    padding: 28px 32px;
  }
}


/* ============================================================
 * §106 ── REFERENCE-STYLE TOGGLE ROWS (v12.2.6)
 * Matches reference app: label left, toggle right, one per row.
 * Font: IBM Plex Sans 14px weight 500 (our font equivalent of Outfit)
 * Toggle: 46×27px with white knob — same as reference .toggle
 * ============================================================ */

/* ── Reference-style row: label + toggle, one per line ─────────────
 * .ref-row replaces the cramped tg-toggle-item grid.
 * Each setting gets its own full-width row inside a card.
 */
.ref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}
.ref-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.ref-row:first-child {
  padding-top: 0;
}

/* Label — matches reference .habit-name style */
.ref-label {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
  line-height: 1.4;
}

/* Sublabel — smaller hint below main label */
.ref-sublabel {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted2);
  display: block;
  margin-top: 2px;
  font-weight: 400;
}

/* ── Reference-style toggle: 46×27px ───────────────────────────────
 * Exact same dimensions and animation as reference .toggle
 */
.ref-toggle {
  width: 46px;
  height: 27px;
  border-radius: 99px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  cursor: pointer;
  position: relative;
  transition: background 0.22s cubic-bezier(0.4,0,0.2,1),
              border-color 0.22s;
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
}
.ref-toggle:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.ref-toggle::before {
  content: '';
  position: absolute;
  width: 21px;
  height: 21px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.ref-toggle:checked::before {
  transform: translateX(19px);
}

/* ── Section card — wraps a group of ref-rows ───────────────────────
 * Light card background, rounded, shadow — matches reference .card
 */
.ref-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}

/* ── Group label — section header above cards ───────────────────────
 * Exact match to reference .group-label
 */
.ref-group-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted2);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin: 20px 0 8px;
  padding: 0 2px;
}
.ref-group-label:first-child {
  margin-top: 0;
}

/* ── KPI grid fix — wider cards so text doesn't wrap ────────────────
 * Increase min-width of KPI cards so values don't overflow.
 */
.kpi-grid {
  grid-template-columns: repeat(6, minmax(140px, 1fr));
}
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tab panel base padding ─────────────────────────────────────────
 * Remove double-padding from settings-section + tab-panel.
 */
.tab-panel.active {
  padding: 16px;
}


/* ============================================================
 * §107 ── REFERENCE APP EXACT MATCH (v12.2.8)
 * F1: Font — Outfit + DM Mono loaded, var(--font) added
 * F2: Group label — 10px, 1px letter-spacing, 18px 0 6px margin
 * F3: Card — border-radius 20px, padding 0 (rows handle it)
 * F4: Row — padding 13px 16px (not 13px 0)
 * F5: Row gap — 12px
 * F6: Toggle OFF bg — var(--surface2) not var(--border)
 * F7: Toggle knob — 21px, top 2px
 * F8: Row highlight — accent-dim bg when toggle is ON
 * F9: KPI block — HOME screen only
 * ============================================================ */

/* ── F1: Font — Outfit + DM Mono ────────────────────────────────────
 * Outfit replaces IBM Plex Sans for body text.
 * DM Mono replaces IBM Plex Mono for monospace.
 * Both loaded via Google Fonts in index.html (added below).
 * --font added as alias matching reference app variable name.
 */
:root {
  --font: 'Outfit', 'IBM Plex Sans', system-ui, sans-serif;
}

body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

button { font-family: var(--font); }
input  { font-family: var(--font); }
select { font-family: var(--font); }

/* ── F2: Group label — exact reference .group-label ─────────────────
 * 10px, weight 700, text3 color, 1px letter-spacing, 18px 0 6px margin
 */
.ref-group-label {
  font-family: var(--font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--muted2) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin: 18px 0 6px !important;
  padding: 0 2px !important;
}
.ref-group-label:first-child {
  margin-top: 0 !important;
}

/* ── F3: Card — border-radius 20px, padding 0 ───────────────────────
 * Rows carry their own padding — card is just the container.
 */
.ref-card {
  border-radius: 20px !important;
  padding: 0 !important;
  overflow: hidden;   /* clips row borders cleanly at rounded corners */
}

/* ── F4+F5: Row — padding 13px 16px, gap 12px ───────────────────────
 * Matches reference .habit-row exactly.
 */
.ref-row {
  padding: 13px 16px !important;
  gap: 12px !important;
  cursor: pointer;
  transition: background 0.15s;
}
.ref-row:last-child {
  padding-bottom: 13px !important;  /* keep vertical padding on last row */
}
.ref-row:first-child {
  padding-top: 13px !important;     /* keep vertical padding on first row */
}
.ref-row:active {
  transform: scale(0.99);
}

/* ── F6+F7: mini-toggle — surface2 bg OFF, 21px knob, top 2px ───────
 * Matches reference .toggle exactly.
 */
.mini-toggle {
  background: var(--surface2) !important;
  border: 1.5px solid var(--border) !important;
}
.mini-toggle .knob {
  width: 21px !important;
  height: 21px !important;
  top: 2px !important;
  left: 2px !important;
}

/* ── F8: Row highlight — accent-dim bg when toggle is ON ────────────
 * Reference: done rows get accent-dim background.
 * We add .ref-row-on class via JS when mini-toggle is active.
 * The row background transitions smoothly — matches reference exactly.
 */
.ref-row.ref-row-on {
  background: var(--accent-dim) !important;
}
.ref-row.ref-row-on .ref-label {
  color: var(--accent);
}

/* ── F9: KPI block — hide outside home screen ───────────────────────
 * KPI cards only shown on HOME. On desktop all screens show,
 * so we use JS showScreen() to hide/show — CSS class approach:
 * showScreen() adds/removes .kpi-visible on #kpi-block.
 * Default: visible (home is default screen).
 */
#kpi-block {
  display: block;
}
#kpi-block.kpi-hidden {
  display: none;
}

/* ── ref-label font update ───────────────────────────────────────────
 * Use Outfit (--font) not IBM Plex Sans (--sans)
 */
.ref-label {
  font-family: var(--font) !important;
}


/* ============================================================
 * §108 ── EXACT REFERENCE TOGGLE (v12.2.9)
 * Copied verbatim from Daily Tracker reference app.
 * input[type=checkbox].toggle — CSS-only, no JS background hacks.
 * Row highlights ONLY on :active (tap/click) — never permanent green.
 * ============================================================ */

/* Exact copy from reference .toggle */
.toggle {
  width: 46px; height: 27px;
  border-radius: 99px; position: relative;
  cursor: pointer;
  transition: background 0.22s cubic-bezier(0.4,0,0.2,1);
  border: none; appearance: none; -webkit-appearance: none;
  background: var(--surface2); border: 1.5px solid var(--border);
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.toggle:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.toggle::before {
  content: '';
  position: absolute;
  width: 21px; height: 21px;
  background: white;
  border-radius: 50%;
  top: 2px; left: 2px;
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.toggle:checked::before {
  transform: translateX(19px);
}

/* Row highlight — ONLY on active tap, not permanent */
.ref-row {
  position: relative;
  overflow: hidden;
}
.ref-row:active {
  background: var(--surface2) !important;
  transform: scale(0.99);
}

/* Remove permanent green row highlight — rows never stay green */
.ref-row.ref-row-on {
  background: transparent !important;
}
.ref-row.ref-row-on .ref-label {
  color: var(--text) !important;
}

/* Override F8 from §107 — no permanent highlight */
#kpi-block.kpi-hidden { display: none; }


/* ============================================================
 * §109 ── REFERENCE APP EXACT COLORS + LAYOUT (v12.3.0)
 * Dark theme variables matched to Daily Tracker .dark values.
 * Card = single layer, no nested wrappers.
 * Tab-panel padding = 24px (reference main-col feel).
 * ============================================================ */

/* ── Exact reference dark theme colors ──────────────────────────────
 * From Daily Tracker .dark { } block verbatim.
 */
:root {
  --bg:         #09090b;           /* ref: --bg dark */
  --surface:    #18181b;           /* ref: --surface dark */
  --surface2:   #27272a;           /* ref: --surface2 dark */
  --border:     rgba(255,255,255,0.08); /* ref: --border dark */
  --text:       #fafafa;           /* ref: --text dark */
  --muted2:     #52525b;           /* ref: --text3 dark */
  --accent:     #22c55e;           /* ref: --accent (same light+dark) */
  --accent-dim: rgba(34,197,94,0.15);  /* ref: --accent-dim dark */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3); /* ref: --shadow-sm dark */
  --shadow:     0 4px 16px rgba(0,0,0,0.4); /* ref: --shadow dark */
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.5); /* ref: --shadow-lg dark */
  --radius:     20px;              /* ref: --radius */
  --radius-sm:  12px;              /* ref: --radius-sm */
}

/* ── Tab panel — content padding matches reference main-col ─────────
 * Remove double padding: tab-panel gets 16px, ref-card rows get 13px 16px
 */
.tab-panel,
.tab-panel.active {
  padding: 16px 0 !important;
}

/* ── ref-card — single card, exact reference .card ──────────────────
 * No nesting. group-label → ref-card → ref-rows.
 * background: surface, border: 1px solid border, radius: 20px.
 */
.ref-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 0 !important;
  margin-bottom: 14px !important;
  overflow: hidden !important;
}

/* ── settings-section — no longer a card, just spacing ──────────────
 * settings-section divs removed from HTML; if any remain, make invisible.
 */
.settings-section {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* ── ref-group-label — exact reference .group-label ─────────────────
 * Already defined in §107 — these overrides ensure correct color.
 */
.ref-group-label {
  color: var(--muted2) !important;  /* #52525b — reference --text3 dark */
}

/* ── Body background — reference dark bg ────────────────────────────
 */
body {
  background: var(--bg) !important;
}

/* ── KPI cards — use surface background ─────────────────────────────
 */
.kpi-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

/* ── Bottom panel — match surface ───────────────────────────────────
 */
.bottom-panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── CPR section card ────────────────────────────────────────────────
 */
.cpr-section-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

/* ── Strategy section ────────────────────────────────────────────────
 */
.strategy-section {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
}


/* ============================================================
 * §110 ── ALIGNMENT FIXES (v12.3.2)
 * Fix 1: KPI grid — 5 cards, repeat(5,1fr) on desktop
 * Fix 2: ref-card — ensure padding:0 so rows handle their own
 * Fix 3: ref-card with inline padding — left padding correct
 * ============================================================ */

/* KPI grid — 5 cards now (Open Positions removed v12.3.1) */
.kpi-grid {
  grid-template-columns: repeat(5, 1fr) !important;
}
@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 600px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ref-card with padding (used for form cards) — ensure correct box model */
.ref-card[style*="padding:16px"] {
  box-sizing: border-box;
}

/* Tab panel horizontal padding so ref-cards have breathing room */
.tab-panel,
.tab-panel.active {
  padding: 16px !important;
}

/* ref-card inside tab-panel — no extra left margin bleeding */
.tab-panel .ref-card,
.tab-panel.active .ref-card {
  width: 100%;
  box-sizing: border-box;
}

/* ref-group-label inside tab-panel — consistent left edge */
.tab-panel .ref-group-label,
.tab-panel.active .ref-group-label {
  padding-left: 2px;
}


/* ============================================================
 * §111 ── PADDING FIX (v12.3.3)
 * Root cause: padding:0 !important on .ref-card overrides inline
 * style="padding:16px" on form cards. Also tab-panel had no
 * horizontal padding so cards bled to edges.
 * ============================================================ */

/* Tab panel — restore horizontal padding */
.tab-panel,
.tab-panel.active {
  padding: 16px !important;
}

/* ref-card base — NO padding, rows handle it */
.ref-card {
  padding: 0 !important;
}

/* ref-card with padding attr — form cards (schedule, triggers, credentials) */
/* Use :is() to beat specificity of padding:0 !important above */
.ref-card.pad {
  padding: 16px !important;
}

/* ref-row inside padded cards — no extra indent */
.ref-card.pad .ref-row {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Log header inside padded card */
.ref-card.pad > div:first-child {
  padding: 0;
}


/* ============================================================
 * §112 ── PAD CLASS SPECIFICITY FIX (v12.3.3)
 * .ref-card padding:0 !important was overriding .ref-card.pad
 * Fix: use higher specificity selector to beat the !important
 * ============================================================ */

/* Beat padding:0 !important with attribute selector specificity */
div.ref-card.pad,
.tab-panel div.ref-card.pad,
.tab-panel.active div.ref-card.pad {
  padding: 16px !important;
}

/* Telegram credentials card — flex row needs full padding */
div.ref-card.pad > .ref-row {
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-bottom: none;
}


/* ============================================================
 * §113 ── BUILDER REF-ROW STYLE (v12.3.4)
 * Builder form now uses ref-card/ref-row — select aligns right.
 * ============================================================ */

/* Builder selects inside ref-row — auto width, right-aligned */
.ref-row .builder-select {
  width: auto;
  min-width: 110px;
  max-width: 200px;
  flex-shrink: 0;
  font-size: 14px;
  font-family: var(--font);
}

/* Builder input inside ref-row */
.ref-row .builder-input {
  width: 80px;
  text-align: right;
  flex-shrink: 0;
  font-size: 14px;
  font-family: var(--font);
}

/* Strategy section — use ref-card style */
.strategy-section {
  border-radius: var(--radius) !important;
}

/* Strategy body padding — matches tab-panel */
.strategy-body {
  padding: 16px;
}


/* ============================================================
 * §114 ── TOGGLE TILES (v12.3.5)
 * Side-by-side toggle chips with no outer card wrapper.
 * Label + toggle in one tile. Flex-wrap grid.
 * Color: exact reference dark theme.
 * ============================================================ */

/* Tile grid — wraps tiles side by side */
.toggle-tile-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

/* Individual tile — label left, toggle right */
.toggle-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 14px;
  box-shadow: var(--shadow-sm);
  min-width: 160px;
  flex: 1;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.toggle-tile:active {
  transform: scale(0.98);
}

/* Tile label */
.toggle-tile-label {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
  line-height: 1.3;
}

/* Toggle inside tile — same .toggle CSS, just sits inside tile */
.toggle-tile .toggle {
  flex-shrink: 0;
}


/* ============================================================
 * §114 ── BUILDER PILL FIELDS (v12.3.5)
 * Side-by-side fields, no outer card.
 * Each field = label above + select/input below, in a pill.
 * Colors match reference app tokens exactly.
 * ============================================================ */

/* Row that holds all pills side by side */
.builder-fields-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 16px 12px;
}

/* Each pill — label + control stacked vertically */
.builder-pill {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 90px;
}

/* Label — exact reference .group-label style */
.builder-pill-label {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  color: var(--muted2);           /* #52525b — reference --text3 */
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Select — reference surface2 bg, subtle border */
.builder-pill-select {
  width: 100%;
  background: var(--surface2);    /* #27272a — reference */
  border: 1px solid var(--border); /* rgba(255,255,255,0.08) */
  color: var(--text);             /* #fafafa */
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 28px 8px 10px;
  border-radius: 10px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2352525b' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  box-sizing: border-box;
}
.builder-pill-select:focus {
  border-color: var(--accent);    /* #22c55e */
  outline: none;
}

/* Number input — same style as select */
.builder-pill-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
  -moz-appearance: textfield;
}
.builder-pill-input:focus { border-color: var(--accent); }
.builder-pill-input::-webkit-inner-spin-button,
.builder-pill-input::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

/* Expiry pill — slightly wider for date text */
#s-expiry-wrap { min-width: 130px; }
#s-product-wrap { min-width: 80px; }

/* ============================================================
 * §114b ── BUILDER REDESIGN (v12.6.2)
 * Single row: Instrument seg + Product seg + Expiry + Yield + Lots + Status tag
 * Build button: Apple frosted glass — NOT accent green (removed per UX request)
 * Reset: ghost, same row as Build
 * Place Orders: accent fill, full radius
 * Liquidity + Quotes: ghost secondary
 * ============================================================ */

/* ── Shared label above each control ── */
.bldr-label {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  color: var(--muted2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 5px;
  white-space: nowrap;
}

/* ══ SINGLE CONTROL ROW ══════════════════════════════════════ */
.bldr-row {
  display: flex;
  align-items: flex-end;             /* all controls align on bottom edge */
  gap: 10px;
  padding: 14px 16px 10px;
  flex-wrap: wrap;
}

/* Generic group wrapper — label + control stacked */
.bldr-group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.bldr-group-grow { flex: 1; min-width: 120px; }
.bldr-group-lots { flex: 0 0 80px; }

/* Status tag — auto-pushed to far right */
.bldr-status-tag {
  margin-left: auto;
  align-self: center;
  font-size: 0.6rem !important;
  padding: 2px 8px !important;
  flex-shrink: 0;
}

/* ══ PILL SEGMENTED CONTROL ══════════════════════════════════
 * Track: dim surface, 1px border, inner padding.
 * Inactive btn: muted text, transparent bg.
 * Active btn: clearly distinct — bright text + bg lift.
 * Bug fix v12.6.2: base .active rule sets bg directly,
 * not split across html.dark/light — avoids selector miss.
 * ═════════════════════════════════════════════════════════════*/
.bldr-seg {
  display: inline-flex;
  align-items: center;
  background: rgba(0,0,0,0.06);         /* light mode track — visible grey */
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  height: 30px;                         /* v12.6.9: 30px uniform height */
  box-sizing: border-box;
}
html.dark .bldr-seg {
  background: rgba(255,255,255,0.06);   /* dark mode track */
  border-color: var(--border);
}

.bldr-seg-btn {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted2);                 /* clearly dim when inactive */
  background: transparent;
  border: none;
  border-radius: 5px;
  padding: 0 12px;
  height: 24px;                         /* track 30px - 3px*2 padding = 24px */
  cursor: pointer;
  transition: color 0.12s, background 0.14s, box-shadow 0.14s;
  white-space: nowrap;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ── ACTIVE: high contrast in BOTH modes ──
 * Light mode: dark fill (#18181b) — black pill on grey track
 * Dark mode:  zinc-600 (#52525b) — lifted pill on dark track
 * Both: bold white/light text, clear shadow                   */
.bldr-seg-btn.active {
  font-weight: 700;
  /* light mode default */
  color: #ffffff;
  background: #18181b;                  /* near-black — unmissable on grey track */
  box-shadow: 0 1px 4px rgba(0,0,0,0.20), 0 0.5px 1px rgba(0,0,0,0.10);
}
html.dark .bldr-seg-btn.active {
  color: var(--text);
  background: #52525b;                  /* zinc-600 — visible lift over dark track */
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Hover inactive */
.bldr-seg-btn:not(.active):hover {
  color: var(--text);
  background: rgba(0,0,0,0.08);
}
html.dark .bldr-seg-btn:not(.active):hover {
  background: rgba(255,255,255,0.08);
}

.bldr-seg-btn:active { transform: scale(0.96); }

/* ══ SELECT + INPUT ══════════════════════════════════════════ */
.bldr-select,
.bldr-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.bldr-select {
  padding: 0 26px 0 10px;
  line-height: normal;                /* browsers ignore line-height on select */
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath fill='%2352525b' d='M4.5 5L0 0h9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
}
html:not(.dark) .bldr-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath fill='%2371717a' d='M4.5 5L0 0h9z'/%3E%3C/svg%3E");
}
.bldr-select:focus,
.bldr-input:focus  { border-color: var(--accent); }

/* v12.6.18: compact select for short-option fields (Instrument, Product) */
.bldr-select-sm {
  width: auto;
  min-width: 90px;
  font-weight: 600;
  font-size: 13px;
}
.bldr-input {
  padding: 0 10px;
  line-height: 30px;
  -moz-appearance: textfield;
}
/* v12.6.6: hide spinner arrows on Max Lots — use plain number field */
.bldr-input::-webkit-inner-spin-button,
.bldr-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.bldr-input[type=number] { -moz-appearance: textfield; }

/* ══ BUILD + RESET ROW ═══════════════════════════════════════ */
.bldr-action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 14px;
}

/* Build — inverted per mode:
 * Dark mode:  white fill + black text  (stands out on dark card)
 * Light mode: black fill + white text  (stands out on light card) */
.bldr-btn-build {
  flex: 1;
  /* v12.6.20: Indigo in dark mode — less harsh than blue on dark backgrounds */
  background: #4f46e5;
  color: #ffffff;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: opacity 0.15s, transform 0.1s;
}
.bldr-btn-build:hover   { opacity: 0.85; }
/* Light mode: Apple blue */
html:not(.dark) .bldr-btn-build {
  background: #007AFF;
  color: #ffffff;
}
.bldr-btn-build:active  { transform: scale(0.98); opacity: 0.80; }
.bldr-btn-build:disabled {
  opacity: 0.30;
  cursor: default;
  transform: none;
}

/* Reset — dim ghost, compact */
.bldr-btn-reset {
  background: transparent;
  color: var(--muted2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s, color 0.14s, transform 0.1s;
}
.bldr-btn-reset:hover  { background: var(--surface2); color: var(--text); }
.bldr-btn-reset:active { transform: scale(0.97); }

/* ══ BOTTOM ACTION BAR: Place Orders + secondary btns ════════ */
.bldr-bottom-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* Place Orders — v12.6.20: Indigo dark mode, Apple blue light mode */
.bldr-place-btn {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background: #4f46e5;
  border: none;
  border-radius: 10px;
  padding: 10px 22px;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: opacity 0.15s, transform 0.1s;
  white-space: nowrap;
}
.bldr-place-btn:hover   { opacity: 0.85; }
html:not(.dark) .bldr-place-btn {
  background: #007AFF;
  color: #ffffff;
}
.bldr-place-btn:active  { transform: scale(0.97); opacity: 0.80; }
.bldr-place-btn:disabled {
  opacity: 0.30;
  cursor: default;
  transform: none;
}

/* Secondary group — Liquidity + Quotes */
.bldr-secondary-btns {
  display: flex;
  gap: 6px;
}

/* Ghost buttons — Liquidity / Quotes */
.bldr-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s, color 0.14s, border-color 0.14s, transform 0.1s;
}
.bldr-ghost-btn:hover  {
  background: var(--surface2);
  color: var(--text);
  border-color: rgba(255,255,255,0.15);
}
html:not(.dark) .bldr-ghost-btn:hover { border-color: rgba(0,0,0,0.15); }
.bldr-ghost-btn:active { transform: scale(0.97); }
.bldr-ghost-btn:disabled { opacity: 0.35; cursor: default; }

/* Bottom-bar reset — always inline, never hidden via setStrategyTag
 * (setStrategyTag only controls #header-reset-btn, not #bottom-reset-btn) */
.bldr-bottom-bar .bldr-btn-reset {
  display: inline-block !important;
  flex-shrink: 0;
  padding: 9px 16px;
  font-size: 13px;
}

/* Legs section header — minimal horizontal rule separator */
.legs-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 8px;
}
.legs-section-title {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.legs-section-count {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-dim);
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}

/* Order placed tag */
.bldr-order-tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
}

/* ── strategy-body zero padding — layout controlled by child rows ── */
.strategy-section .strategy-body { padding: 0; }


/* ============================================================
 * §115 ── REFERENCE APP-HEADER + DARK/LIGHT MODE (v12.3.6)
 * Exact match to Daily Tracker header style.
 * Light mode variables from reference :root (light).
 * ============================================================ */

/* ── Light mode CSS variables ────────────────────────────────────────
 * Applied when .dark class is NOT on <html>.
 * Exact reference :root light values.
 */
html:not(.dark) {
  --bg:         #f0f0f5;
  --surface:    #ffffff;
  --surface2:   #f7f7fa;
  --border:     rgba(0,0,0,0.07);
  --text:       #18181b;
  --muted:      #a1a1aa;
  --muted2:     #71717a;
  --accent:     #22c55e;
  --accent-dim: rgba(34,197,94,0.12);
  --danger:     #ef4444;
  --danger-dim: rgba(239,68,68,0.1);
  --warn:       #f59e0b;
  --warn-dim:   rgba(245,158,11,0.1);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:     0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
}

/* ── Dark mode CSS variables ─────────────────────────────────────────
 * Applied when .dark class IS on <html> — already defined in :root.
 * Restated here explicitly for clarity.
 */
html.dark {
  --bg:         #09090b;
  --surface:    #18181b;
  --surface2:   #27272a;
  --border:     rgba(255,255,255,0.08);
  --text:       #fafafa;
  --muted:      #71717a;
  --muted2:     #52525b;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
  --shadow:     0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.5);
}

/* ── App header — reference style ───────────────────────────────────
 * Replaces old <header> fixed bar.
 * Sits inside .main-col (not fixed) — scrolls with content.
 * On desktop: margin-left:72px to clear sidebar.
 */
.dzp-app-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 28px 32px 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.3s;
}

@media (min-width: 601px) {
  .dzp-app-header {
    margin-left: 72px;
    padding-top: env(safe-area-inset-top, 0px);
    padding-top: calc(28px + env(safe-area-inset-top, 0px));
  }
}

/* ── Header left: title + date ───────────────────────────────────────
 * Exact reference .app-header h1 + .date
 */
.dzp-header-left { display: flex; flex-direction: column; gap: 2px; }

.dzp-header-title {
  font-family: var(--font);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text);
  line-height: 1.2;
  margin: 0;
  transition: color 0.3s;
}

.dzp-header-date {
  font-family: var(--font);
  font-size: 13px;
  color: var(--muted2);
  margin-top: 2px;
  transition: color 0.3s;
}

/* ── Header right: controls ──────────────────────────────────────────
 */
.dzp-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-top: 4px;
}

/* ── Dark mode toggle button ─────────────────────────────────────────
 * Small icon button — moon (dark) / sun (light)
 */
.dzp-dark-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--muted2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.18s;
  flex-shrink: 0;
}
.dzp-dark-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

/* ── User chip — reference style ─────────────────────────────────────
 * Pill with avatar initial + username.
 */
.dzp-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border-radius: 99px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  cursor: default;
  transition: all 0.18s;
  flex-shrink: 0;
}

.dzp-user-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.dzp-user-name {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* ── Logout button — small, muted ────────────────────────────────────
 */
.dzp-logout-btn {
  font-size: 12px !important;
  padding: 5px 12px !important;
  height: auto !important;
}

/* ── Old header hidden — replaced by dzp-app-header ─────────────────
 * Keep .header-username hidden (compat span).
 */
header:not(.dzp-app-header) {
  display: none !important;
}

/* ── Main content — clear new header ────────────────────────────────
 * dzp-app-header is sticky — main needs no extra top padding.
 */
@media (min-width: 601px) {
  main {
    margin-top: 0;
  }
}

/* ── Smooth color transitions ────────────────────────────────────────
 */
body, .ref-card, .toggle-tile, .kpi-card, .bottom-panel,
.cpr-section-card, .strategy-section, .ref-group-label,
.ref-label, .toggle-tile-label {
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}


/* ============================================================
 * §116 ── LAYOUT FIXES (v12.3.7)
 * Fix 1: Remove body::before grid — causes purple line on left
 * Fix 2: Proper centering — content fills sidebar-cleared space
 * Fix 3: Wider content — 1100px max instead of 960px
 * ============================================================ */

/* Fix 1: Remove grid background — purple line on left edge */
body::before {
  display: none !important;
}

/* Fix 2+3: Main centering — use padding not margin for alignment.
 * Content area = full viewport minus 72px sidebar.
 * max-width 1100px centred within that space.
 */
@media (min-width: 601px) {
  main {
    margin-left: 72px !important;
    margin-right: 0 !important;
    max-width: none !important;
    padding: 0 40px 40px !important;
  }

  #dashboard {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* App header content also centred within same width */
  .dzp-app-header {
    padding-left: max(32px, calc((100vw - 72px - 1100px) / 2 + 32px)) !important;
    padding-right: max(32px, calc((100vw - 72px - 1100px) / 2 + 32px)) !important;
  }
}

/* Remove old header margin-left rule conflicts */
@media (min-width: 601px) {
  header:not(.dzp-app-header) {
    display: none !important;
  }
}




/* ============================================================
 * §117 ── HEADER OVERLAP FIX (v12.3.8)
 * Header: position fixed (like sidebar) — doesn't push main down.
 * Main: padding-top = header height (~80px) to clear it.
 * ============================================================ */

/* Make header fixed so it truly stays at top without flow issues */
.dzp-app-header {
  position: fixed !important;
  top: 0 !important;
  left: 72px !important;   /* clear sidebar */
  right: 0 !important;
  z-index: 150 !important;
  margin-left: 0 !important;
}

/* Main needs top clearance for fixed header (~80px tall) */
@media (min-width: 601px) {
  main {
    padding-top: 85px !important;
  }
}

/* Mobile: header spans full width */
@media (max-width: 600px) {
  .dzp-app-header {
    left: 0 !important;
  }
  main {
    padding-top: 85px !important;
  }
}


/* ============================================================
 * §118 ── HEADER ALIGNMENT FIX (v12.3.9)
 * "Home" text left edge must align with KPI cards below.
 * Header border-bottom line issue — reduce padding so title
 * sits cleanly above the border line.
 * ============================================================ */

/* Fixed header — simple consistent padding.
 * Left-aligns with main content (40px from sidebar edge).
 * Reduced vertical padding so border doesn't cross title. */
.dzp-app-header {
  padding: 14px 40px 12px !important;
  align-items: center !important;  /* vertically centre all header items */
}

/* Remove the complex max() calc that was mis-aligning the title */
/* On desktop the header left:72px and main margin-left:72px */
/* Both use padding:0 40px for content — they will align */

/* Header title — no top push */
.dzp-header-title {
  font-size: 22px !important;
  line-height: 1.1 !important;
}

.dzp-header-date {
  font-size: 12px !important;
  margin-top: 1px !important;
}

/* Main content padding-left matches header padding */
@media (min-width: 601px) {
  main {
    padding: 85px 40px 40px !important;
  }

  #dashboard {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}


/* ============================================================
 * §119 ── FINAL LAYOUT POLISH (v12.4.0)
 * 1. Remove header border-bottom separator line
 * 2. Add breathing room padding on left+right for desktop content
 * 3. Positions/Orders: always use card style (no table on desktop)
 * ============================================================ */

/* 1. Remove header separator line */
.dzp-app-header {
  border-bottom: none !important;
}

/* 2. Desktop content padding — breathing room left+right */
@media (min-width: 601px) {
  main {
    padding: 85px 48px 48px !important;
  }

  /* KPI cards get a little top gap from content edge */
  #kpi-block {
    padding-top: 8px;
  }
}

/* 3. Positions + Orders: always card style, never table */
/* Force card view visible on all screen sizes */
.pos-card-view {
  display: block !important;
}

/* Force table view hidden on all screen sizes */
.pos-table-view {
  display: none !important;
}

/* Tab section wrap — match ref-card feel */
.tab-section-wrap {
  padding: 0 !important;
}

/* Section header matches ref-group-label style */
.tab-section-header {
  margin-bottom: 10px;
}
.tab-section-title {
  font-family: var(--font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--muted2) !important;
}

/* pos-card on desktop — match ref-card sizing */
@media (min-width: 601px) {
  .pos-card {
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: var(--surface);
  }
  .ord-card {
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: var(--surface);
  }
}


/* ============================================================
 * §120 ── CONTENT MAX-WIDTH FIX (v12.4.1)
 * main uses padding for side breathing room.
 * #dashboard constrained to max 1100px and centred.
 * ============================================================ */
@media (min-width: 601px) {
  main {
    padding: 85px 0 48px !important;
  }

  #dashboard {
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 48px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Header content aligns with dashboard — same 48px side padding */
  .dzp-app-header {
    padding-left: calc((100vw - 72px - 1100px) / 2 + 48px) !important;
    padding-right: calc((100vw - 72px - 1100px) / 2 + 48px) !important;
    /* Clamp so it never goes below 48px on narrow viewports */
  }
}

/* Fallback for viewports narrower than 1100px + sidebar */
@media (min-width: 601px) and (max-width: 1244px) {
  #dashboard {
    max-width: 100% !important;
    padding: 0 48px !important;
  }
  .dzp-app-header {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}


/* v12.6.11: tab-section-count — small badge, matches section title scale */
.tab-section-count {
  font-family: var(--mono) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  letter-spacing: 0.04em !important;
}

/* ============================================================
 * §121 ── TOP SPACING + SIDEBAR LOGO REMOVED (v12.4.3)
 * ============================================================ */

/* Fix 1: Add breathing room above header title */
.dzp-app-header {
  padding-top: 20px !important;
  padding-bottom: 16px !important;
}

/* Fix 2: Sidebar — remove logo gap, start from top with nav buttons */
.dzp-sb-logo {
  display: none !important;
}

/* Sidebar starts with nav buttons at top — reduce top padding */
.dzp-sidebar {
  padding-top: 16px !important;
}

/* Fix 1 also: push main content down to match new header height (~72px) */
@media (min-width: 601px) {
  main {
    padding-top: 78px !important;
  }
}


/* ============================================================
 * §122 ── APPLE-FEEL TOGGLE + NO HIGHLIGHT (v12.4.6)
 * Remove background flash on ref-row tap — only scale.
 * Snappier toggle: 0.18s (Apple iOS feel).
 * ============================================================ */

/* No background on tap — clean like iOS */
.ref-row:active {
  background: transparent !important;
  transform: scale(0.99);
}

/* Snappier toggle transition — matches Apple iOS feel */
.toggle {
  transition: background 0.18s ease, border-color 0.18s ease !important;
}
.toggle::before {
  transition: transform 0.18s cubic-bezier(0.34, 1.2, 0.64, 1) !important;
}

/* No tap highlight on the label wrapper either */
label.ref-row:active,
.ref-card label:active {
  background: transparent !important;
}


/* ============================================================
 * §123 ── REMOVE FOCUS RING ON TOGGLE (v12.4.7)
 * The green outline that lingers is browser :focus/:focus-visible
 * on the checkbox input after click. Remove it entirely.
 * ============================================================ */

.toggle:focus,
.toggle:focus-visible,
.toggle:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

/* Also remove from label wrappers */
label:focus,
label:focus-visible,
.ref-row:focus,
.ref-row:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}


/* Header top padding (v12.4.8) */
.dzp-app-header {
  padding-top: 28px !important;
}
@media (min-width: 601px) {
  main { padding-top: 90px !important; }
}

/* ============================================================
 * §124 ── HEADER SCROLL BLEED + PADDING FIX (v12.5.3)
 * 1. Header solid opaque background — content never shows through
 * 2. Main padding-top increased to fully clear header height
 * 3. KPI block top margin for breathing room below header
 * ============================================================ */

/* Solid opaque header — fully covers scrolled content */
.dzp-app-header {
  background: var(--bg) !important;
  /* belt-and-suspenders: no transparency */
  opacity: 1 !important;
  /* ensure it sits above everything */
  z-index: 500 !important;
}

/* Main content — generous top clearance */
@media (min-width: 601px) {
  main {
    padding-top: 100px !important;
  }
}
@media (max-width: 600px) {
  main {
    padding-top: 100px !important;
  }
}

/* KPI block — small top gap so first card doesn't look cramped */
#kpi-block {
  padding-top: 12px !important;
  margin-top: 0 !important;
}


/* ============================================================
 * §125 ── HOME PAGE POLISH (v12.5.5)
 * 1. Less space below header — reduce main padding-top
 * 2. Positions/Orders width aligned with KPI cards
 * 3. P&L chart background matches theme
 * 4. P&L header buttons — Apple-style crisp uniform size
 * ============================================================ */

/* 1. Reduce space below header */
@media (min-width: 601px) {
  main { padding-top: 76px !important; }
}
#kpi-block { padding-top: 4px !important; }

/* 2. Positions/Orders — tab-panel has no extra left indent */
.tab-panel,
.tab-panel.active {
  padding: 0 !important;
}
.tab-section-wrap {
  padding: 0 !important;
}

/* 3. P&L chart background matches theme surface */
#home-pnl-body {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
.pnl-chart-canvas {
  background: var(--surface) !important;
}

/* 4. P&L header buttons — Apple-style crisp */
/* Uniform 28×28px icon buttons, no background, subtle on hover */
.j-icon-btn {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: var(--muted2) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: background 0.15s, color 0.15s !important;
}
.j-icon-btn:hover {
  background: var(--surface2) !important;
  color: var(--text) !important;
}
.j-icon-btn svg {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
}

/* Day nav label — pill style matching Apple segmented control */
.pnlchart-nav-label {
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

/* Nav prev/next arrows — same size as other j-icon-btns */
#pnlchart-nav-prev,
#pnlchart-nav-next {
  color: var(--muted2) !important;
}


/* ============================================================
 * §126 ── CPR SECTION ON BUILDER ONLY + COLOR FIX (v12.5.6)
 * CPR moved to Builder screen. Colors updated to match theme.
 * ============================================================ */

/* CPR card — matches ref-card style exactly */
.cpr-section-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-sm) !important;
}

/* CPR header — matches ref-row feel */
.cpr-header {
  background: transparent !important;
  padding: 13px 16px !important;
  border-radius: 20px !important;
}
.cpr-header-title {
  font-family: var(--font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--muted2) !important;
  letter-spacing: 1px !important;
}

/* NIFTY/SENSEX tab buttons — match border style */
.cpr-tab-btn {
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--border) !important;
  background: transparent !important;
  color: var(--muted2) !important;
}
.cpr-tab-btn.active {
  background: var(--surface2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* CPR body content */
.cpr-body-inner {
  padding: 12px 16px 14px !important;
}
.cpr-body-content {
  font-family: var(--mono) !important;
  font-size: 13px !important;
  color: var(--text) !important;
}



/* ============================================================
 * §TOGGLE-ROW — v12.6.14
 * Clicking anywhere on a ref-row with a toggle fires the toggle.
 * cursor:pointer signals the row is interactive.
 * JS in core.js handles the click delegation.
 * ============================================================ */
.ref-row:has(input.toggle) {
  cursor: pointer;
  user-select: none;
}
.ref-row:has(input.toggle):hover {
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
}
html:not(.dark) .ref-row:has(input.toggle):hover {
  background: rgba(0,0,0,0.03);
}
/* The toggle itself should not get double-fired — stop propagation in JS */
.ref-row input.toggle {
  pointer-events: none;   /* row click handles it; toggle itself is visual only */
}

/* ══════════════════════════════════════════════════════════════════════
 * §MOBILE-BOTTOM-NAV — Phase 7, Tasks 27 + 28 — v12.6.21
 * Fixed bottom nav bar for mobile (≤600px).
 * Hidden on desktop — sidebar takes over.
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Base layout ─────────────────────────────────────────────────── */
.dzp-bottom-nav {
  display: none;                              /* hidden by default; shown via media query */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--surface);
  border-top: 1px solid var(--border);
  /* 5 equal columns */
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
  /* iPhone home bar clearance */
  padding-bottom: env(safe-area-inset-bottom, 12px);
  /* Subtle backdrop blur on iOS */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ── Each tab button ─────────────────────────────────────────────── */
.dzp-bn-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px 8px;
  background: transparent;
  border: none;
  color: var(--muted2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
  min-width: 0;
}

/* ── Label text ──────────────────────────────────────────────────── */
.dzp-bn-label {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1;
}

/* ── Active state ────────────────────────────────────────────────── */
.dzp-bn-btn.active {
  color: var(--accent);
}
.dzp-bn-btn.active .dzp-bn-label {
  font-weight: 700;
}

/* ── Hover (desktop fallback — won't trigger on touch) ──────────── */
.dzp-bn-btn:not(.active):hover {
  color: var(--text);
}

/* ── Task 28: Responsive visibility ─────────────────────────────── */
@media (max-width: 600px) {
  /* Show bottom nav */
  .dzp-bottom-nav {
    display: grid;
  }
  /* Hide desktop sidebar */
  .dzp-sidebar {
    display: none !important;
  }
  /* Remove sidebar margin — sidebar is hidden */
  #dashboard,
  main {
    margin-left: 0 !important;
  }
  /* Push content above bottom nav */
  #dashboard {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 12px));
  }
}

@media (min-width: 601px) {
  /* Keep bottom nav hidden on desktop */
  .dzp-bottom-nav {
    display: none !important;
  }
  /* Ensure sidebar stays visible */
  .dzp-sidebar {
    display: flex;
  }
}

/* ============================================================
 * §120 — v13.0.8 MOBILE UI FIXES
 * 1. Header title — prevent wrapping on mobile
 * 2. Chart empty state text — wrap long message
 * ============================================================ */

/* Fix 1: Header title — prevent wrapping, no clipping on mobile
 * v14.0.1: removed max-width:160px — was clipping "Strategy Builder"
 * Instead use flexible approach: shrink font, allow header to breathe
 */
@media (max-width: 600px) {
  .dzp-app-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
    align-items: center !important;
  }
  .dzp-header-left {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .dzp-header-title {
    font-size: 18px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: none !important;      /* let flexbox handle width naturally */
  }
  .dzp-header-right {
    flex-shrink: 0 !important;
    gap: 8px !important;
    margin-left: 8px !important;
  }
  .dzp-header-date {
    font-size: 11px !important;
    white-space: nowrap !important;
  }
}

/* Fix 2: Chart empty state canvas container — ensure it doesn't clip
 * The canvas already handles text centering — just ensure container
 * doesn't overflow-hide the canvas edges.
 */
@media (max-width: 600px) {
  #pnl-chart-canvas {
    max-width: 100% !important;
  }
  .pnl-chart-wrap,
  .home-pnl-body,
  #home-pnl-body {
    overflow: hidden !important;
  }
}

/* ============================================================
 * §121 — v13.0.9 MOBILE UI FIXES (all @media max-width:600px)
 *
 * T-01  BOTH   Hide Used Margin KPI card — desktop + mobile
 * T-02  MOBILE Hide Open Positions KPI card
 * T-03  MOBILE Hide Available KPI card
 * T-04  MOBILE Hide Day P&L KPI card
 * T-05  MOBILE Hide CPR section in Builder
 * T-06  MOBILE Position cards: Qty/Avg/LTP on second line, no bold
 * T-07  MOBILE Chart section: rename via CSS content trick on label
 * T-08  MOBILE Fix excess space between chart and positions
 * T-09  MOBILE Yield warning banner: smaller, wraps to 2 lines
 * T-10  MOBILE Strategy legs: stacked, smaller text
 * T-11  MOBILE Builder: hide Expiry dropdown
 * T-12  MOBILE Builder: hide Product dropdown
 * T-13  MOBILE Builder: hide Yield dropdown
 * T-14  MOBILE Settings SL/Target: stack vertically
 * T-15  MOBILE Auto Sq-Off Time IST: fix padding overflow
 * T-16  MOBILE Hide user name pill and date in header
 * T-19  MOBILE Log pill: sit above bottom nav bar
 * ============================================================ */

/* ── T-01: Hide Used Margin — both desktop and mobile ─────── */
#kpi-card-used { display: none !important; }

/* ── T-02 DESKTOP: Hide Open Positions on desktop ───────────
   (Available stays visible on desktop — hidden mobile only)  */
@media (min-width: 601px) {
  #kpi-card-openpos { display: none !important; }
}

@media (max-width: 600px) {

  /* ── T-02: Hide Open Positions KPI card ─────────────────── */
  #kpi-card-openpos { display: none !important; }

  /* ── T-03: Hide Available KPI card ──────────────────────── */
  #kpi-card-avail { display: none !important; }

  /* ── T-04: Hide Day P&L KPI card ────────────────────────── */
  #kpi-card-daypnl { display: none !important; }

  /* KPI grid adjust — 3 cards hidden, 2 remain (Total P&L + Margin Util)
     Show them in a single row, full width */
  .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── T-05: Hide CPR section in Builder ──────────────────── */
  #screen-builder #cpr-section { display: none !important; }

  /* ── T-06: Position cards — Qty/Avg/LTP on second line, no bold ── */
  .pos-card {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 2px 8px !important;
  }
  /* Symbol takes full first line with badge */
  .pos-sym {
    flex: 1 1 100% !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;   /* not bold */
  }
  /* Qty, Avg/LTP drop to second line — smaller, muted, no bold */
  .pos-qty {
    font-size: 0.68rem !important;
    font-weight: 400 !important;
    color: var(--muted2) !important;
    flex-shrink: 0 !important;
  }
  .pos-avgltp {
    font-size: 0.68rem !important;
    font-weight: 400 !important;
    color: var(--muted2) !important;
    flex: 1 !important;
  }
  .pos-avg, .pos-ltp {
    font-weight: 400 !important;
    font-size: 0.68rem !important;
  }
  /* P&L stays on right, slightly smaller */
  .pos-pnl {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    margin-left: auto !important;
  }

  /* ── T-07: Chart section — rename title via JS-free approach ─
     Hide the "Intraday P&L" text, show "Chart" via ::before   */
  #home-pnl-title {
    font-size: 0 !important;       /* hide original text */
    line-height: 0 !important;
  }
  #home-pnl-title::before {
    content: 'Chart';
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    font-family: var(--font);
    line-height: 1;
  }

  /* Hide nav controls (today/prev/next) — chart is current day only on mobile */
  .pnlchart-nav { display: none !important; }

  /* pnlchart-stats (High/Low metrics) — tiny text, single line below title */
  .pnlchart-stats {
    font-size: 9px !important;
    color: var(--muted2) !important;
    letter-spacing: 0 !important;
  }

  /* ── T-08: Remove excess space between chart and positions ── */
  #home-pnl-section {
    margin-bottom: 8px !important;
  }
  #home-pnl-section + * {
    margin-top: 0 !important;
  }

  /* ── T-09: Yield warning banner — smaller, wraps ─────────── */
  .be-warn-line {
    font-size: 0.62rem !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 4px !important;
  }
  #breakeven-bar .be-data-row {
    flex-wrap: wrap !important;
  }
  #breakeven-bar {
    padding: 8px 10px !important;
  }

  /* ── T-10: Strategy legs — stacked, smaller text ─────────── */
  #legs-tbody .leg-card {
    flex-direction: column !important;
    gap: 3px !important;
    padding: 8px 10px !important;
  }
  #legs-tbody .leg-badge {
    font-size: 0.6rem !important;
    padding: 2px 6px !important;
  }
  #legs-tbody .leg-sym {
    font-size: 0.72rem !important;
    font-weight: 500 !important;
  }
  #legs-tbody .leg-ltp,
  #legs-tbody .leg-margin,
  #legs-tbody .leg-meta {
    font-size: 0.62rem !important;
    font-weight: 400 !important;
    color: var(--muted2) !important;
  }

  /* ── T-11: Builder — hide Expiry dropdown ────────────────── */
  #s-expiry-wrap { display: none !important; }

  /* ── T-12: Builder — hide Product dropdown ───────────────── */
  #s-product-wrap { display: none !important; }

  /* ── T-13: Builder — hide Yield dropdown ─────────────────── */
  #s-yield-wrap { display: none !important; }

  /* ── T-14: Settings SL/Target — stack inputs vertically ──── */
  .ref-row > div[style*="display:flex"] {
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* ── T-15: Auto Sq-Off Time IST — fix box touching border ── */
  #sqoff-time {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Sq-Off triggers row — stack all fields vertically */
  .ref-card.pad > div[style*="display:flex"] {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .ref-card.pad .builder-field {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ── T-16: Hide user name pill and date in header ─────────── */
  .dzp-user-chip { display: none !important; }
  .dzp-header-date { display: none !important; }

  /* ── T-19: Log pill — float above bottom nav ─────────────── */
  #dzp-log-toggle-btn {
    bottom: calc(64px + env(safe-area-inset-bottom, 12px) + 8px) !important;
  }
  #dzp-log-panel {
    bottom: calc(64px + env(safe-area-inset-bottom, 12px) + 44px) !important;
  }

} /* end @media (max-width: 600px) */

/* ── T-07 addendum: hide timestamp in stats on mobile ──────── */
@media (max-width: 600px) {
  .pnlchart-stat-time { display: none !important; }
  .pnlchart-stat { margin-right: 6px !important; }
  .pnlchart-stat-label { font-size: 9px !important; }
  .pnlchart-stat-val   { font-size: 9px !important; }
}

/* ── T-14 precise: Settings SL/Target stacked vertically ───── */
@media (max-width: 600px) {
  .sl-target-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .sl-target-inputs {
    flex-direction: column !important;
    gap: 6px !important;
  }
  .sl-target-inputs .tg-input {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .sl-target-inputs #alert-update-btn {
    width: 100% !important;
    height: 36px !important;
  }
}

/* ── T-15 precise: Sq-Off triggers — stack vertically on mobile */
@media (max-width: 600px) {
  .sqoff-triggers-row {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .sqoff-triggers-row .builder-field {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }
  .sqoff-triggers-row .builder-input {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .sqoff-triggers-row #sqoff-set-btn {
    width: 100% !important;
    height: 38px !important;
    align-self: stretch !important;
  }
}

/* ============================================================
 * §122 — v14.0.0 MOBILE UI PASS 2
 *
 * T-03  MOBILE  Yield back in Builder (remove hide rule)
 * T-04  MOBILE  Hide journal in Builder screen
 * T-05  MOBILE  Legs — single column (override JS 2-col grid)
 * T-06  MOBILE  Action bar — Place Orders row 1, rest row 2
 * T-07  MOBILE  Push content below Dynamic Island
 * T-08  MOBILE  Home — equal spacing between sections
 * ============================================================ */

/* ── T-03: Bring back Yield in Builder mobile ──────────────── */
@media (max-width: 600px) {
  #s-yield-wrap { display: flex !important; }
}

/* ── T-04: Hide journal in Builder screen on mobile ─────────  */
@media (max-width: 600px) {
  #screen-builder #tab-panel-journal,
  #screen-builder .tab-btn-row,
  #screen-builder .bottom-panel > .tab-btns,
  #screen-builder .journal-section { display: none !important; }
}

/* ── T-05: Legs — force single column on mobile ─────────────  */
@media (max-width: 600px) {
  #legs-tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    grid-template-columns: none !important;
  }
  .leg-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── T-06: Builder action bar — 2 rows on mobile ────────────
   Row 1: Place Orders (full width)
   Row 2: Reset · Liquidity · Quotes (equal split)           */
@media (max-width: 600px) {
  .bldr-bottom-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px 14px !important;
  }
  .bldr-place-btn {
    width: 100% !important;
    order: 1 !important;
    font-size: 15px !important;
    padding: 12px !important;
  }
  .bldr-bottom-bar .bldr-btn-reset {
    order: 2 !important;
    flex: 1 !important;
    min-width: 0 !important;
    text-align: center !important;
  }
  .bldr-secondary-btns {
    order: 2 !important;
    flex: 2 !important;
    display: flex !important;
    gap: 6px !important;
  }
  .bldr-secondary-btns .bldr-ghost-btn {
    flex: 1 !important;
    justify-content: center !important;
    padding: 8px 6px !important;
    font-size: 12px !important;
  }
  .bldr-order-tag {
    order: 3 !important;
    width: 100% !important;
  }
}

/* ── T-07: Push content below Dynamic Island (iPhone 14+) ────
   Dynamic Island sits in the safe-area-inset-top zone.
   The header already uses safe-area padding, but the sticky
   header itself needs a bigger top push on mobile so the title
   clears the island. Add extra top margin to main content too. */
@media (max-width: 600px) {
  .dzp-app-header {
    padding-top: calc(env(safe-area-inset-top, 20px) + 12px) !important;
  }
  /* Main content area — extra breathing room from header bottom */
  #dashboard {
    padding-top: 12px !important;
  }
}

/* ── T-08: Home — equal spacing between sections ─────────────
   Chart section, Open Positions header, closed positions —
   all get consistent 16px gap.                               */
@media (max-width: 600px) {
  #home-pnl-section {
    margin-bottom: 16px !important;
  }
  .kpi-grid {
    margin-bottom: 16px !important;
  }
  /* Positions section label (OPEN POSITIONS header) */
  .pos-section-label,
  #positions-body > .pos-section-label {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* Tighten chart container itself — removes extra blank area below canvas */
  #home-pnl-body {
    padding-bottom: 8px !important;
  }
}

/* ============================================================
 * §123 — v14.0.1 MOBILE UI PASS 3
 *
 * T-02  Hide yield warning banner on mobile
 * T-03  Leg cards — compact height + smaller text
 * T-05  Auto tab — dot + label same row
 * T-06  Sq-Off tab — dot + label same row
 * T-07  Armed card — fix alignment
 * T-08  Home — reduce chart-to-positions gap
 * ============================================================ */

@media (max-width: 600px) {

  /* ── T-02: Hide yield warning banner on mobile ─────────────
     The "Closest to high/low end" message is not useful on
     small screen — keep only breakeven data row.             */
  #strategy-warn,
  #strategy-ok { display: none !important; }

  /* ── T-03: Leg cards — compact on mobile ──────────────────  */
  .leg-card {
    padding: 8px 10px !important;
    border-radius: 10px !important;
  }
  .leg-header {
    margin-bottom: 4px !important;
    gap: 5px !important;
  }
  .leg-sym {
    font-size: 0.74rem !important;
    font-weight: 600 !important;
  }
  .leg-price-row {
    margin-bottom: 4px !important;
    align-items: center !important;
  }
  .leg-price {
    font-size: 0.88rem !important;
  }
  .leg-margin-label {
    font-size: 0.55rem !important;
  }
  .leg-margin-val span:last-child {
    font-size: 0.7rem !important;
  }
  .leg-meta {
    font-size: 0.58rem !important;
    line-height: 1.3 !important;
  }

  /* ── T-05: Auto tab — dot + "Automation" on same row ───────
     The dot was rendering above the label due to flex-direction.
     Force row direction on the toggle row inner div.          */
  #tab-panel-automation .ref-row > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }
  #auto-status-dot-small {
    flex-shrink: 0 !important;
  }

  /* ── T-06: Sq-Off tab — dot + "Auto Sq-Off" same row ───────  */
  #tab-panel-sqoff .ref-card .ref-row > div:first-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
  }
  #sqoff-master-dot {
    flex-shrink: 0 !important;
  }

  /* ── T-07: Armed card — fix layout ─────────────────────────
     ARMED label + detail text + Stop button in clean row.    */
  #auto-status-banner .ref-row {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  #auto-status-banner .ref-row > div:first-child {
    flex: 1 !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }
  #auto-status-detail {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* ── T-08: Home — tighten chart-to-positions gap ────────────
     The canvas section has too much empty space below it.
     Reduce chart body min-height and bottom padding.         */
  #home-pnl-body {
    min-height: 140px !important;
    padding: 8px 12px !important;
  }
  #pnl-chart-canvas {
    min-height: 130px !important;
  }
  #home-pnl-section {
    margin-bottom: 8px !important;
  }

} /* end @media (max-width: 600px) */