/* ===========================================================
   CopyTrader Pro — PHP rebuild
   Theme palette: dark default, [data-ctp-theme="light"] light
   =========================================================== */
:root {
  --ctp-tx: #e5e7eb;
  --ctp-tx-2: #cbd5e1;
  --ctp-tx-muted: #94a3b8;
  --ctp-tx-dim: #64748b;
  --ctp-bdr: #23304a;
  --ctp-card: #111827;
  --ctp-card-2: #10192c;
  --ctp-inp-bg: #0b1628;
  --ctp-hover: #11223a;
  --ctp-bg-heavy: #1a2340;
  --ctp-toggle-off: #1e2a44;
  --ctp-accent: #38bdf8;
  --ctp-btn-primary: #21b3ff;
  --ctp-btn-primary-hover: #1aa0e8;
  --ctp-ok: #7ff0c5;
  --ctp-info: #7dd3fc;
  --ctp-err: #ff9e9e;
  --ctp-warn: #fcd34d;
  --ctp-warn-2: #f5c56b;
  --ctp-violet: #c4b5fd;
  --ctp-pink: #ec4899;
  --ctp-pink-dark: #db2777;
  --ctp-purple: #8b5cf6;
  --ctp-indigo: #6366f1;
  --ctp-ok-bright: #16c784;
  --ctp-warn-bright: #f59e0b;
  --ctp-err-bright: #ef4444;
  --ctp-modal-back: rgba(2,6,23,.72);
  --ctp-modal-head-bg: #10192c;
  --ctp-modal-foot-bg: #10192c;
  --ctp-row-bg: #111b30;
  --ctp-row-bg-alt: #0d1526;
  --ctp-header-bar-bg: #0e1830;
  --ctp-empty-bg: #0d1526;
  --ctp-tag-border: #23304a;
  --ctp-bg: #0b1220;
  --ctp-sidebar-bg: #0b1424;
  --ctp-topbar-bg: #0e1830;
}
body[data-ctp-theme="light"] {
  --ctp-tx: #0F172A;
  --ctp-tx-2: #334155;
  --ctp-tx-muted: #475569;
  --ctp-tx-dim: #64748b;
  --ctp-bdr: rgba(0,0,0,.10);
  --ctp-card: #FFFFFF;
  --ctp-card-2: #F8FAFD;
  --ctp-inp-bg: #F1F5FB;
  --ctp-hover: #E8EEF8;
  --ctp-bg-heavy: #EEF2FA;
  --ctp-toggle-off: #E8EEF8;
  --ctp-accent: #0284c7;
  --ctp-btn-primary: #0284c7;
  --ctp-btn-primary-hover: #0369a1;
  --ctp-ok: #047857;
  --ctp-info: #0284c7;
  --ctp-err: #b91c1c;
  --ctp-warn: #b45309;
  --ctp-warn-2: #b45309;
  --ctp-violet: #6d28d9;
  --ctp-pink: #be185d;
  --ctp-pink-dark: #9d174d;
  --ctp-purple: #6d28d9;
  --ctp-indigo: #4338ca;
  --ctp-ok-bright: #059669;
  --ctp-warn-bright: #d97706;
  --ctp-err-bright: #dc2626;
  --ctp-modal-back: rgba(15,23,42,.42);
  --ctp-modal-head-bg: #F8FAFD;
  --ctp-modal-foot-bg: #F8FAFD;
  --ctp-row-bg: #FFFFFF;
  --ctp-row-bg-alt: #F8FAFD;
  --ctp-header-bar-bg: #F1F5FB;
  --ctp-empty-bg: #F8FAFD;
  --ctp-tag-border: rgba(0,0,0,.12);
  --ctp-bg: #F1F5FB;
  --ctp-sidebar-bg: #FFFFFF;
  --ctp-topbar-bg: #FFFFFF;
}

/* ---------- reset ---------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: system-ui,-apple-system,"Segoe UI",sans-serif;
  background: var(--ctp-bg);
  color: var(--ctp-tx);
  font-size: 14px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
body[dir="rtl"] { text-align: right; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }

/* ---------- layout shell ---------- */
.app { display: flex; height: 100vh; width: 100vw; overflow: hidden; }
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--ctp-sidebar-bg);
  border-right: 1px solid var(--ctp-bdr);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body[dir="rtl"] .sidebar { border-right: none; border-left: 1px solid var(--ctp-bdr); }
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.topbar {
  height: 56px;
  flex-shrink: 0;
  background: var(--ctp-topbar-bg);
  border-bottom: 1px solid var(--ctp-bdr);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 14px;
}
.content { flex: 1; overflow: auto; padding: 24px 28px 60px; }

/* ---------- sidebar brand ---------- */
.brand {
  padding: 18px 18px 14px;
  display: flex; align-items: center; gap: 11px;
  border-bottom: 1px solid var(--ctp-bdr);
}
.brand-logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #863bff 0%, #47bfff 100%);
  display: grid; place-items: center;
  color: #fff; font-weight: 900; font-size: 18px;
  box-shadow: 0 6px 16px rgba(134,59,255,.35);
}
.brand-text { line-height: 1.1; }
.brand-name { font-weight: 800; font-size: 14px; color: var(--ctp-tx); letter-spacing: -.01em; }
.brand-sub { font-size: 10.5px; color: var(--ctp-tx-muted); margin-top: 2px; letter-spacing: .02em; }

/* ---------- nav ---------- */
.nav-section-label {
  padding: 18px 18px 8px;
  font-size: 10.5px; font-weight: 800;
  color: var(--ctp-tx-dim); letter-spacing: .12em; text-transform: uppercase;
}
.nav { padding: 0 10px; flex: 1; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 9px;
  color: var(--ctp-tx-2); font-weight: 600; font-size: 13px;
  cursor: pointer; user-select: none;
  position: relative;
  margin-bottom: 2px;
  transition: background .12s;
}
.nav-item:hover { background: var(--ctp-hover); color: var(--ctp-tx); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(33,179,255,.15), rgba(33,179,255,.04));
  color: var(--ctp-accent);
}
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  background: var(--ctp-accent); border-radius: 0 3px 3px 0;
}
body[dir="rtl"] .nav-item.active::before { left: auto; right: 0; border-radius: 3px 0 0 3px; }
.nav-icon {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  font-size: 14px; line-height: 1; flex-shrink: 0;
}
.nav-label { flex: 1; }
.nav-caret { font-size: 10px; opacity: .55; transition: transform .15s; }
.nav-item.expanded .nav-caret { transform: rotate(90deg); }
body[dir="rtl"] .nav-item.expanded .nav-caret { transform: rotate(-90deg); }
.nav-children { padding-left: 30px; display: none; margin-bottom: 4px; }
body[dir="rtl"] .nav-children { padding-left: 0; padding-right: 30px; }
.nav-item.expanded + .nav-children { display: block; }
.nav-child {
  padding: 7px 12px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--ctp-tx-muted);
  display: block; margin-bottom: 2px;
}
.nav-child:hover { background: var(--ctp-hover); color: var(--ctp-tx); }
.nav-child.active { background: var(--ctp-bg-heavy); color: var(--ctp-accent); }

.sidebar-footer {
  padding: 12px 14px;
  border-top: 1px solid var(--ctp-bdr);
  display: flex; align-items: center; gap: 10px;
}
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 13px;
}
.user-meta { line-height: 1.15; flex: 1; min-width: 0; }
.user-name { font-size: 13px; font-weight: 700; color: var(--ctp-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11px; color: var(--ctp-tx-muted); margin-top: 2px; }

/* ---------- topbar ---------- */
.tb-spacer { flex: 1; }
.tb-pill {
  height: 32px; padding: 0 11px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700;
  background: rgba(22,199,132,.10); color: var(--ctp-ok-bright);
  border: 1px solid rgba(22,199,132,.25);
}
.tb-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ctp-ok-bright); box-shadow: 0 0 0 3px rgba(22,199,132,.18); }
.tb-btn {
  height: 34px; padding: 0 13px; border-radius: 9px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--ctp-bdr); color: var(--ctp-tx-2); background: transparent;
}
.tb-btn:hover { background: var(--ctp-hover); }
.tb-btn-danger {
  border-color: rgba(239,68,68,.4);
  background: rgba(239,68,68,.08); color: var(--ctp-err-bright);
}
.tb-btn-danger:hover { background: rgba(239,68,68,.16); }
.tb-icon-btn {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  border: 1px solid var(--ctp-bdr); color: var(--ctp-tx-2); background: transparent;
}
.tb-icon-btn:hover { background: var(--ctp-hover); }

/* ---------- page common ---------- */
.page-head { margin-bottom: 22px; }
.page-title { font-size: 22px; font-weight: 800; color: var(--ctp-tx); letter-spacing: -.01em; }
.page-sub { font-size: 13px; color: var(--ctp-tx-muted); margin-top: 4px; }
.page-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }

/* ---------- KPI cards ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi {
  background: var(--ctp-card); border: 1px solid var(--ctp-bdr); border-radius: 14px;
  padding: 18px;
}
.kpi-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.kpi-label { font-size: 11.5px; font-weight: 700; color: var(--ctp-tx-muted); letter-spacing: .06em; text-transform: uppercase; }
.kpi-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; font-size: 18px;
}
.kpi-icon.blue   { background: rgba(56,189,248,.14); color: var(--ctp-accent); }
.kpi-icon.green  { background: rgba(22,199,132,.14); color: var(--ctp-ok-bright); }
.kpi-icon.purple { background: rgba(139,92,246,.16); color: var(--ctp-purple); }
.kpi-icon.amber  { background: rgba(245,158,11,.14); color: var(--ctp-warn-bright); }
.kpi-icon.pink   { background: rgba(236,72,153,.14); color: var(--ctp-pink); }
.kpi-value { font-size: 28px; font-weight: 800; color: var(--ctp-tx); line-height: 1.1; }
.kpi-meta { font-size: 12px; color: var(--ctp-tx-muted); margin-top: 6px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.kpi-meta .ok { color: var(--ctp-ok-bright); font-weight: 700; }
.kpi-meta .warn { color: var(--ctp-warn-bright); font-weight: 700; }

/* ---------- card ---------- */
.card {
  background: var(--ctp-card); border: 1px solid var(--ctp-bdr); border-radius: 14px;
  margin-bottom: 18px; overflow: hidden;
}
.card-head {
  padding: 16px 20px; border-bottom: 1px solid var(--ctp-bdr);
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--ctp-header-bar-bg);
}
.card-title { font-size: 14px; font-weight: 800; color: var(--ctp-tx); letter-spacing: -.005em; }
.card-sub { font-size: 12px; color: var(--ctp-tx-muted); margin-top: 2px; }
.card-body { padding: 18px 20px; }

/* ---------- buttons ---------- */
.btn {
  height: 36px; padding: 0 16px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  border: 1px solid var(--ctp-bdr); background: transparent; color: var(--ctp-tx-2);
}
.btn:hover { background: var(--ctp-hover); }
.btn-primary {
  background: var(--ctp-btn-primary); color: #fff !important; font-weight: 800;
  border-color: rgba(67,192,255,.55);
}
.btn-primary:hover { background: var(--ctp-btn-primary-hover); }
.btn-ok {
  background: rgba(22,199,132,.14); color: var(--ctp-ok-bright);
  border-color: rgba(22,199,132,.45);
}
.btn-err {
  background: rgba(239,68,68,.12); color: var(--ctp-err-bright);
  border-color: rgba(239,68,68,.4);
}
.btn-err:hover { background: rgba(239,68,68,.22); }
.btn-warn {
  background: rgba(245,158,11,.14); color: var(--ctp-warn-bright);
  border-color: rgba(245,158,11,.4);
}
.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- form ---------- */
.label {
  display: block;
  color: var(--ctp-tx-muted); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px;
}
.input, .select, .textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--ctp-bdr); background: var(--ctp-inp-bg);
  color: var(--ctp-tx); font-size: 13px; font-weight: 600; outline: none;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--ctp-accent); }
.select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ctp-tx-muted) 50%), linear-gradient(135deg, var(--ctp-tx-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 16px, calc(100% - 13px) 16px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 30px;
}
body[dir="rtl"] .select {
  background-position: 13px 16px, 18px 16px;
  padding-right: 12px; padding-left: 30px;
}
.textarea { min-height: 90px; resize: vertical; }
.hint { color: var(--ctp-tx-muted); font-size: 12px; line-height: 1.5; margin-top: 6px; }
.field { margin-bottom: 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---------- toggle ---------- */
.toggle { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-track {
  position: absolute; inset: 0; background: var(--ctp-toggle-off);
  border-radius: 999px; cursor: pointer; transition: background .15s;
}
.toggle-track::after {
  content: ''; position: absolute; left: 3px; top: 3px;
  width: 16px; height: 16px; background: #fff; border-radius: 50%;
  transition: transform .15s;
}
.toggle input:checked + .toggle-track { background: var(--ctp-btn-primary); }
.toggle input:checked + .toggle-track::after { transform: translateX(16px); }
body[dir="rtl"] .toggle input:checked + .toggle-track::after { transform: translateX(-16px); }
.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border-radius: 10px; background: var(--ctp-card-2);
  border: 1px solid var(--ctp-bdr); margin-bottom: 10px;
}
.toggle-text { font-size: 13px; }
.toggle-text .t { font-weight: 700; color: var(--ctp-tx); }
.toggle-text .s { font-size: 11.5px; color: var(--ctp-tx-muted); margin-top: 3px; }

/* standalone label+toggle (label above, toggle below — used in Risk Limits) */
.rule-block { margin-bottom: 18px; }
.rule-head .rule-label {
  display: block; color: var(--ctp-tx); font-weight: 600; font-size: 14px;
  margin-bottom: 10px;
}
.rule-head .rule-label .req { color: #ef4444; margin-right: 4px; }
.rule-head .rule-toggle { display: inline-block; }
.rule-fields { margin-top: 14px; padding-left: 0; }
.rule-fields[hidden] { display: none !important; }

/* Section divider with centered title (Risk Limits header) */
.section-divider {
  display: flex; align-items: center; gap: 16px;
  margin: 26px 0 20px;
}
.section-divider::before, .section-divider::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--ctp-bdr);
}
.section-divider-title {
  color: var(--ctp-tx); font-weight: 700; font-size: 15px; letter-spacing: .2px;
  white-space: nowrap;
}

/* ---------- Create Strategy primitives ---------- */
/* numbered section badge (1-5 in screenshots) */
.sec-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(56, 189, 248, .12); color: #38bdf8;
  font-weight: 800; font-size: 12px; margin-right: 12px; flex-shrink: 0;
  border: 1px solid rgba(56, 189, 248, .25);
}
.sec-head {
  display: flex; align-items: center; gap: 0;
  padding: 16px 18px; border-bottom: 1px solid var(--ctp-bdr);
}
.sec-title {
  color: #38bdf8; font-weight: 800; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; flex: 1;
}
.sec-hint {
  color: var(--ctp-tx-muted); font-size: 12px; font-weight: 500;
  text-transform: none; letter-spacing: 0;
}
.key-badge {
  display: inline-block; margin-left: 10px;
  padding: 2px 8px; border-radius: 4px;
  background: rgba(56, 189, 248, .15); color: #38bdf8;
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid rgba(56, 189, 248, .3);
}

/* tile selector (Lot Calculation Method) */
.tile-row {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.tile {
  flex: 1 1 110px; min-width: 100px; padding: 12px 12px;
  background: var(--ctp-card-2); border: 1px solid var(--ctp-bdr);
  border-radius: 10px; cursor: pointer; transition: all .15s;
}
.tile:hover { border-color: rgba(56, 189, 248, .35); }
.tile.selected {
  border-color: #38bdf8; background: rgba(56, 189, 248, .07);
  box-shadow: inset 0 0 0 1px #38bdf8;
}
.tile .t-name { color: var(--ctp-tx); font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.tile .t-desc { color: var(--ctp-tx-muted); font-size: 11px; line-height: 1.35; }

/* big copy-direction tile (2-tile, larger) */
.dir-row { display: flex; gap: 12px; margin-top: 10px; }
.dir-tile {
  flex: 1 1 0; padding: 18px 16px; text-align: center;
  background: var(--ctp-card-2); border: 1px solid var(--ctp-bdr);
  border-radius: 10px; cursor: pointer; transition: all .15s;
}
.dir-tile:hover { border-color: rgba(56, 189, 248, .35); }
.dir-tile.selected.dir-same {
  border-color: #16c784; background: rgba(22, 199, 132, .07);
  box-shadow: inset 0 0 0 1px #16c784;
}
.dir-tile.selected.dir-same .d-name { color: #16c784; }
.dir-tile.selected.dir-rev {
  border-color: #f59e0b; background: rgba(245, 158, 11, .07);
  box-shadow: inset 0 0 0 1px #f59e0b;
}
.dir-tile.selected.dir-rev .d-name { color: #f59e0b; }
.dir-tile .d-icon { font-size: 18px; color: var(--ctp-tx-muted); margin-bottom: 6px; }
.dir-tile .d-name { color: var(--ctp-tx); font-weight: 800; font-size: 16px; margin-bottom: 4px; }
.dir-tile .d-desc { color: var(--ctp-tx-muted); font-size: 12px; }
.dir-note {
  margin-top: 14px; padding: 10px 14px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.5; color: var(--ctp-tx-muted);
  background: var(--ctp-card-2); border: 1px solid var(--ctp-bdr);
}
.dir-note.dir-note-rev { color: #f59e0b; border-color: rgba(245, 158, 11, .25); background: rgba(245, 158, 11, .05); }
.dir-note.dir-note-same { color: #16c784; border-color: rgba(22, 199, 132, .25); background: rgba(22, 199, 132, .05); }

/* segmented 3-tab (Symbol Filter Mode) */
.segmented {
  display: flex; gap: 0; padding: 4px; background: var(--ctp-card-2);
  border: 1px solid var(--ctp-bdr); border-radius: 10px;
}
.segmented .seg {
  flex: 1; padding: 10px 14px; text-align: center;
  background: transparent; border: 0; border-radius: 7px;
  color: var(--ctp-tx-muted); font-weight: 700; font-size: 13px;
  cursor: pointer; transition: all .12s;
}
.segmented .seg:hover { color: var(--ctp-tx); }
.segmented .seg.active {
  background: var(--ctp-btn-primary); color: #fff;
}

/* chip pill (added symbols, mappings) */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 12px; background: var(--ctp-card-2);
  border: 1px solid var(--ctp-bdr); border-radius: 7px;
  color: var(--ctp-tx); font-size: 12.5px; font-weight: 600;
  font-family: ui-monospace, Menlo, monospace;
}
.chip .x {
  cursor: pointer; color: var(--ctp-tx-muted); font-size: 14px;
  line-height: 1; padding: 0 2px;
}
.chip .x:hover { color: #ef4444; }

/* row of input + Add button */
.input-add-row { display: flex; gap: 8px; align-items: stretch; }
.input-add-row .input { flex: 1; }
.input-add-row .btn { white-space: nowrap; }

/* validation card with status messages */
.valid-msg {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 8px;
  background: rgba(245, 158, 11, .08);
  border: 1px solid rgba(245, 158, 11, .25);
}
.valid-msg.ok   { background: rgba(22, 199, 132, .08); border-color: rgba(22, 199, 132, .25); }
.valid-msg.err  { background: rgba(239, 68, 68, .08);  border-color: rgba(239, 68, 68, .25); }
.valid-msg .vm-icon { color: #f59e0b; font-size: 14px; line-height: 1.4; flex-shrink: 0; }
.valid-msg.ok  .vm-icon { color: #16c784; }
.valid-msg.err .vm-icon { color: #ef4444; }
.valid-msg .vm-text { color: var(--ctp-tx); font-size: 13px; line-height: 1.5; }

/* warn banner at top of page */
.warn-banner {
  margin-bottom: 18px; padding: 12px 16px; border-radius: 10px;
  background: rgba(245, 158, 11, .08); border: 1px solid rgba(245, 158, 11, .3);
  color: #f59e0b; font-size: 13px; line-height: 1.5;
  display: flex; align-items: flex-start; gap: 10px;
}
.warn-banner::before { content: '⚠'; font-size: 14px; flex-shrink: 0; }

/* card variant with no head padding (we use sec-head instead) */
.card-with-sec .card-head { display: none; }

/* two-column main layout for create-strategy */
.cs-layout { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.cs-col { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* page-head with right-aligned cancel */
.cs-page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  background: var(--ctp-card); border: 1px solid var(--ctp-bdr);
  border-radius: 14px; padding: 22px 24px; margin-bottom: 18px;
}
.cs-page-head .ph-title { color: var(--ctp-tx); font-weight: 800; font-size: 22px; }
.cs-page-head .ph-sub { color: var(--ctp-tx-muted); font-size: 12.5px; margin-top: 4px; letter-spacing: .03em; }

/* hidden helper */
.cs-hide { display: none !important; }

/* ---------- Strategy Listing ---------- */
.strat-list-banner {
  margin-bottom: 14px; padding: 12px 16px; border-radius: 10px;
  background: rgba(56, 189, 248, .07); border: 1px solid rgba(56, 189, 248, .25);
  color: var(--ctp-tx-2); font-size: 13px; line-height: 1.5;
}
.strat-list-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--ctp-card); border: 1px solid var(--ctp-bdr);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 14px;
}
.strat-list-bar-l {
  color: var(--ctp-tx); font-weight: 800; font-size: 13px;
  text-transform: uppercase; letter-spacing: .08em;
}
.strat-search-row {
  display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.strat-search-row .input { flex: 1 1 280px; min-width: 0; }

.strat-row {
  background: var(--ctp-card); border: 1px solid var(--ctp-bdr);
  border-radius: 14px; padding: 18px 22px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.strat-row-l {
  display: flex; align-items: center; gap: 14px; flex: 1 1 360px; min-width: 0;
}
.strat-row-l .name { color: var(--ctp-tx); font-weight: 800; font-size: 15px; }
.strat-row-l .pair { color: var(--ctp-tx-muted); font-size: 12px; margin-top: 3px; font-family: ui-monospace, Menlo, monospace; }
.strat-row-l .pair .mt5 { color: #38bdf8; }
.strat-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.strat-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 6px;
  background: var(--ctp-card-2); border: 1px solid var(--ctp-bdr);
  color: var(--ctp-tx-2); font-size: 11.5px; font-weight: 700;
}
.strat-tag.tag-equity   { color: #38bdf8; border-color: rgba(56, 189, 248, .35); background: rgba(56, 189, 248, .08); }
.strat-tag.tag-reverse  { color: #f59e0b; border-color: rgba(245, 158, 11, .35); background: rgba(245, 158, 11, .08); }
.strat-tag.tag-list     { color: var(--ctp-tx-2); }
.strat-tag.tag-slip     { color: #a78bfa; border-color: rgba(167, 139, 250, .35); background: rgba(167, 139, 250, .08); }
.strat-tag.tag-spread   { color: #f472b6; border-color: rgba(244, 114, 182, .35); background: rgba(244, 114, 182, .08); }

.strat-stats {
  display: flex; gap: 28px; flex-wrap: wrap; flex: 1 1 auto;
}
.strat-stat { min-width: 100px; }
.strat-stat .k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  color: var(--ctp-tx-muted); text-transform: uppercase; margin-bottom: 4px;
  white-space: nowrap;
}
.strat-stat .v {
  color: var(--ctp-tx); font-weight: 700; font-size: 13.5px;
  font-family: ui-monospace, Menlo, monospace; white-space: nowrap;
}
.strat-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* ---------- View Strategy (read-only) display fields ---------- */
.ro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ro-field { margin-bottom: 14px; }
.ro-label {
  display: block; color: var(--ctp-tx-muted); font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; margin-bottom: 8px;
}
.ro-value {
  padding: 12px 14px; border-radius: 8px;
  background: var(--ctp-card-2); border: 1px solid var(--ctp-bdr);
  color: var(--ctp-tx); font-size: 13.5px; font-weight: 600;
  font-family: ui-monospace, Menlo, monospace;
}
.ro-value.is-enabled { color: #16c784; }
.ro-value.is-disabled { color: var(--ctp-tx-muted); }
.ro-value.is-muted { color: var(--ctp-tx-muted); }
.ro-value.with-formula {
  display: flex; align-items: flex-start; gap: 10px;
  color: #38bdf8; line-height: 1.5;
}
.ro-value.with-formula::before {
  content: 'i'; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(56, 189, 248, .15); color: #38bdf8;
  display: inline-flex; align-items: center; justify-content: center;
  font-style: italic; font-weight: 700; font-size: 11px;
}
.ro-banner {
  margin-bottom: 18px; padding: 12px 16px; border-radius: 10px;
  background: rgba(56, 189, 248, .07); border: 1px solid rgba(56, 189, 248, .25);
  color: var(--ctp-tx-2); font-size: 13px; line-height: 1.5;
  display: flex; align-items: flex-start; gap: 10px;
}
.ro-banner::before { content: 'i'; font-style: italic; color: #38bdf8; font-weight: 800; flex-shrink: 0; }
.ro-symbol-chip {
  display: inline-block; padding: 6px 12px; border-radius: 6px;
  background: var(--ctp-card-2); border: 1px solid var(--ctp-bdr);
  color: var(--ctp-tx); font-size: 12.5px; font-weight: 600;
  font-family: ui-monospace, Menlo, monospace; margin-right: 6px; margin-bottom: 6px;
}

/* nested mini-card inside view-modal sections (e.g. Slippage Control reveal) */
.ro-nested {
  border-left: 3px solid #38bdf8; padding-left: 12px; margin-top: 4px;
}

/* locked input look (Edit Strategy master/slave) */
.input.locked, .select.locked {
  background: var(--ctp-card-2); color: var(--ctp-tx-muted);
  cursor: not-allowed; opacity: .85;
}

/* danger-style modal title */
.modal-title.danger { color: #ef4444; }

/* ---------- table ---------- */
.tbl-wrap { background: var(--ctp-card); border: 1px solid var(--ctp-bdr); border-radius: 14px; overflow: hidden; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl thead th {
  background: var(--ctp-header-bar-bg);
  padding: 12px 14px; text-align: left;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ctp-tx-muted); border-bottom: 1px solid var(--ctp-bdr); white-space: nowrap;
}
body[dir="rtl"] .tbl thead th { text-align: right; }
.tbl tbody td {
  padding: 13px 14px; color: var(--ctp-tx-2); border-bottom: 1px solid var(--ctp-bdr); font-weight: 600;
  background: var(--ctp-row-bg);
}
.tbl tbody tr:nth-child(even) td { background: var(--ctp-row-bg-alt); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: var(--ctp-hover); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  border: 1px solid var(--ctp-tag-border); background: var(--ctp-card-2); color: var(--ctp-tx-2);
}
.badge.ok { background: rgba(22,199,132,.14); color: var(--ctp-ok-bright); border-color: rgba(22,199,132,.35); }
.badge.warn { background: rgba(245,158,11,.14); color: var(--ctp-warn-bright); border-color: rgba(245,158,11,.35); }
.badge.err { background: rgba(239,68,68,.14); color: var(--ctp-err-bright); border-color: rgba(239,68,68,.35); }
.badge.info { background: rgba(56,189,248,.14); color: var(--ctp-accent); border-color: rgba(56,189,248,.35); }
.badge.purple { background: rgba(139,92,246,.16); color: var(--ctp-purple); border-color: rgba(139,92,246,.35); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- alerts/notes ---------- */
.note {
  padding: 12px 14px; border-radius: 10px; font-size: 12.5px; line-height: 1.55; margin-bottom: 14px;
  border: 1px solid var(--ctp-tag-border);
}
.note.info { background: rgba(56,189,248,.08); color: var(--ctp-info); border-color: rgba(56,189,248,.3); }
.note.warn { background: rgba(245,158,11,.08); color: var(--ctp-warn-bright); border-color: rgba(245,158,11,.3); }
.note.err  { background: rgba(239,68,68,.08); color: var(--ctp-err-bright); border-color: rgba(239,68,68,.3); }
.note.ok   { background: rgba(22,199,132,.08); color: var(--ctp-ok-bright); border-color: rgba(22,199,132,.3); }

/* ---------- modal ---------- */
.modal-back {
  position: fixed; inset: 0; background: var(--ctp-modal-back);
  backdrop-filter: blur(6px); display: none;
  z-index: 9999; padding: 24px;
}
.modal-back.show { display: grid; place-items: center; }
.modal {
  width: min(720px, 92vw); max-height: 90vh;
  background: var(--ctp-card); border: 1px solid var(--ctp-bdr); border-radius: 16px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 30px 120px rgba(0,0,0,.55);
}
.modal-head {
  padding: 16px 20px; border-bottom: 1px solid var(--ctp-bdr);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--ctp-modal-head-bg);
}
.modal-title { font-size: 15px; font-weight: 900; color: var(--ctp-tx); }
.modal-sub { font-size: 12px; color: var(--ctp-tx-muted); margin-top: 3px; }
.modal-close { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--ctp-tx-muted); }
.modal-close:hover { background: var(--ctp-hover); color: var(--ctp-tx); }
.modal-body { padding: 20px; overflow: auto; flex: 1; min-height: 0; }
/* When a <form> wraps modal-body+modal-foot, it must propagate flex behavior so body scrolls */
.modal > form {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0; overflow: hidden;
}
.modal > form > .modal-body { flex: 1; min-height: 0; overflow: auto; }
.modal-foot {
  padding: 14px 20px; border-top: 1px solid var(--ctp-bdr);
  display: flex; justify-content: flex-end; gap: 10px;
  background: var(--ctp-modal-foot-bg); flex-wrap: wrap;
}

/* ---------- toast ---------- */
.toast-wrap {
  position: fixed; top: 20px; right: 20px;
  z-index: 99999; display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
body[dir="rtl"] .toast-wrap { right: auto; left: 20px; }
.toast {
  min-width: 280px; max-width: 440px;
  background: var(--ctp-card); border: 1px solid var(--ctp-bdr); border-radius: 12px;
  padding: 12px 14px; color: var(--ctp-tx);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  pointer-events: auto;
  animation: toast-in .25s ease-out;
}
.toast-title { font-size: 11px; font-weight: 800; margin-bottom: 4px; letter-spacing: .08em; text-transform: uppercase; }
.toast-body { font-size: 13px; line-height: 1.4; }
.toast.ok    { border-color: rgba(22,199,132,.4); }
.toast.ok    .toast-title { color: var(--ctp-ok-bright); }
.toast.err   { border-color: rgba(239,68,68,.4); }
.toast.err   .toast-title { color: var(--ctp-err-bright); }
.toast.info  { border-color: rgba(56,189,248,.4); }
.toast.info  .toast-title { color: var(--ctp-accent); }
@keyframes toast-in { from { transform: translateY(-12px); opacity: 0; } }

/* ---------- dropdown menu (lang/theme picker) ---------- */
.menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px;
  background: var(--ctp-card); border: 1px solid var(--ctp-bdr); border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  padding: 6px; z-index: 1000; display: none;
}
body[dir="rtl"] .menu { right: auto; left: 0; }
.menu.open { display: block; }
.menu-item {
  padding: 9px 12px; border-radius: 8px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ctp-tx-2); cursor: pointer; font-weight: 600;
}
.menu-item:hover { background: var(--ctp-hover); color: var(--ctp-tx); }
.menu-item.active { color: var(--ctp-accent); background: rgba(56,189,248,.08); }
.menu-section { padding: 8px 12px 4px; font-size: 10.5px; font-weight: 800; color: var(--ctp-tx-dim); letter-spacing: .1em; text-transform: uppercase; }
.menu-divider { height: 1px; background: var(--ctp-bdr); margin: 6px 4px; }
.tb-trigger { position: relative; }

/* ---------- login screen ---------- */
.login-shell {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--ctp-bg);
  padding: 24px; overflow: auto;
}
.login-bg {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.login-bg::before, .login-bg::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(80px);
}
.login-bg::before {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(134,59,255,.35), transparent 70%);
  top: -180px; left: -120px;
}
.login-bg::after {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(71,191,255,.28), transparent 70%);
  bottom: -200px; right: -160px;
}
.login-card {
  position: relative;
  width: min(420px, 100%);
  background: var(--ctp-card);
  border: 1px solid var(--ctp-bdr);
  border-radius: 18px;
  padding: 32px 28px 26px;
  box-shadow: 0 30px 100px rgba(0,0,0,.5);
}
.login-header { text-align: center; margin-bottom: 22px; }
.login-logo {
  width: 56px; height: 56px; border-radius: 14px;
  background: linear-gradient(135deg, #863bff 0%, #47bfff 100%);
  display: grid; place-items: center; margin: 0 auto 14px;
  color: #fff; font-weight: 900; font-size: 26px;
  box-shadow: 0 12px 30px rgba(134,59,255,.4);
}
.login-title { font-size: 20px; font-weight: 800; color: var(--ctp-tx); }
.login-subtitle { font-size: 12.5px; color: var(--ctp-tx-muted); margin-top: 4px; }
.login-hint {
  text-align: center; font-size: 11.5px; color: var(--ctp-tx-muted);
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ctp-bdr);
}
.login-extra { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* ---------- misc ---------- */
.divider { height: 1px; background: var(--ctp-bdr); margin: 18px 0; }
.row-flex { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.text-muted { color: var(--ctp-tx-muted); }
.text-ok { color: var(--ctp-ok-bright); }
.text-err { color: var(--ctp-err-bright); }
.text-warn { color: var(--ctp-warn-bright); }
.mono { font-family: ui-monospace, Menlo, monospace; }
.empty {
  padding: 40px 20px; text-align: center; color: var(--ctp-tx-muted); font-size: 13px;
  background: var(--ctp-empty-bg); border-radius: 10px; margin-top: 8px;
}
.section-title { font-size: 13px; font-weight: 800; color: var(--ctp-tx); margin-bottom: 12px; }
.section { margin-bottom: 22px; }

/* sidebar overlay (mobile-friendly future, currently unused) */
.sidebar-overlay { display: none; }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ctp-bdr); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--ctp-tx-dim); }

/* small responsive */
@media (max-width: 900px) {
  .sidebar { position: absolute; left: -240px; top: 0; bottom: 0; z-index: 100; transition: left .2s; }
  body[dir="rtl"] .sidebar { left: auto; right: -240px; transition: right .2s; }
  .sidebar.open { left: 0; }
  body[dir="rtl"] .sidebar.open { right: 0; }
  .content { padding: 16px; }
  .topbar { padding: 0 12px; }
  .tb-pill, .tb-btn-text { display: none; }
}

/* ============================================================
   Sevenfunded.com matching components (re-applied)
   ============================================================ */

/* Brand logo: cyan/blue gradient with sync SVG icon */
.brand-logo svg { width: 22px; height: 22px; }

/* KPI cards with colored top stripes (override of existing .kpi) */
.kpi-grid { display: flex !important; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; grid-template-columns: none !important; }
.kpi-grid > .kpi { flex: 1 1 200px; min-width: 200px; position: relative; overflow: hidden; }
.kpi-grid > .kpi::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--ctp-accent);
}
.kpi.k-blue::before   { background: #38bdf8; }
.kpi.k-purple::before { background: #a78bfa; }
.kpi.k-green::before  { background: #34d399; }
.kpi.k-amber::before  { background: #fbbf24; }
.kpi.k-pink::before   { background: #f472b6; }
.kpi.k-red::before    { background: #f87171; }

/* Avatar circles (initials in colored circle) */
.avatar-init {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800; letter-spacing: -.01em;
  flex-shrink: 0;
  border: 1px solid var(--ctp-bdr);
}
.avatar-init.avatar-purple { background: rgba(139,92,246,.18); color: #c4b5fd; border-color: rgba(139,92,246,.35); }
.avatar-init.avatar-blue   { background: rgba(56,189,248,.18); color: #7dd3fc; border-color: rgba(56,189,248,.35); }
.avatar-init.avatar-green  { background: rgba(22,199,132,.18); color: #6ee7b7; border-color: rgba(22,199,132,.35); }
.avatar-init.avatar-amber  { background: rgba(245,158,11,.18); color: #fcd34d; border-color: rgba(245,158,11,.35); }
.avatar-init.avatar-pink   { background: rgba(236,72,153,.18); color: #f9a8d4; border-color: rgba(236,72,153,.35); }

/* Lowercase outlined active/inactive/paused pills */
.pill-active, .pill-inactive, .pill-paused {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: lowercase;
  background: transparent; border: 1px solid;
}
.pill-active   { color: var(--ctp-ok-bright);   border-color: rgba(22,199,132,.45); }
.pill-inactive { color: var(--ctp-tx-muted);    border-color: var(--ctp-bdr); }
.pill-paused   { color: var(--ctp-warn-bright); border-color: rgba(245,158,11,.45); }

/* Soft red destructive button */
.btn-err-soft {
  background: transparent; color: var(--ctp-err-bright);
  border-color: rgba(239,68,68,.4);
}
.btn-err-soft:hover { background: rgba(239,68,68,.1); }

/* Modal "Close" text button (replaces ✕) */
.modal-close-text {
  height: 30px; padding: 0 12px; border-radius: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--ctp-tx-2);
  border: 1px solid var(--ctp-bdr); background: transparent;
}
.modal-close-text:hover { background: var(--ctp-hover); color: var(--ctp-tx); }

/* Strategy detail card */
.strat-card {
  background: var(--ctp-card-2); border: 1px solid var(--ctp-bdr);
  border-radius: 12px; padding: 16px 18px;
}
.strat-card-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--ctp-bdr); gap: 12px; flex-wrap: wrap;
}
.strat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
  font-size: 12.5px;
}
.strat-grid > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 5px 0;
}
.strat-k {
  color: var(--ctp-tx-muted); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; flex-shrink: 0;
}
.strat-v { color: var(--ctp-tx); font-weight: 600; text-align: right; }

/* Soft badge variants */
.badge-soft {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
  background: transparent; border: 1px solid;
}
.badge-soft.warn { color: var(--ctp-warn-bright); border-color: rgba(245,158,11,.45); }
.badge-soft.ok   { color: var(--ctp-ok-bright);   border-color: rgba(22,199,132,.45); }
.badge-soft.err  { color: var(--ctp-err-bright);  border-color: rgba(239,68,68,.45); }
.badge-soft.info { color: var(--ctp-accent);      border-color: rgba(56,189,248,.45); }

/* Slave card (large width-100 card per slave) */
.slave-card {
  background: var(--ctp-card); border: 1px solid var(--ctp-bdr);
  border-radius: 14px; padding: 16px 20px; margin-bottom: 12px;
}
.slave-card-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.slave-stats {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  padding: 10px 0; border-top: 1px solid var(--ctp-bdr);
}
.ss-cell { padding: 0; flex: 1 1 130px; min-width: 130px; }
.ss-k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  color: var(--ctp-tx-muted); text-transform: uppercase; margin-bottom: 4px;
  white-space: nowrap;
}
.ss-v {
  font-size: 14px; font-weight: 700; color: var(--ctp-tx);
  letter-spacing: 0; line-height: 1.25;
}
.slave-strats {
  padding-top: 14px; border-top: 1px solid var(--ctp-bdr);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.strat-empty {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; color: var(--ctp-tx-muted);
  background: transparent; border: 1px dashed var(--ctp-bdr);
}

/* Create Master / Register Slave: two-column with sticky preview */
.cm-layout {
  display: flex; gap: 18px; align-items: flex-start;
}
.cm-main { flex: 1 1 auto; min-width: 0; }
.cm-aside { flex: 0 0 360px; position: sticky; top: 8px; }
@media (max-width: 1100px) {
  .cm-layout { flex-direction: column; }
  .cm-aside { flex: 1 1 auto; width: 100%; position: static !important; }
}
.cm-preview .card-body { padding: 18px 18px 16px; }
.cm-prev-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0; border-bottom: 1px dashed var(--ctp-bdr);
  font-size: 13px;
}
.cm-prev-row:last-of-type { border-bottom: none; }
.cm-prev-row span { color: var(--ctp-tx-muted); font-weight: 600; }
.cm-prev-row b { color: var(--ctp-tx); font-weight: 700; }

/* Topbar refinements */
.tb-pill {
  height: 30px !important; padding: 0 12px !important; border-radius: 8px !important;
  background: transparent !important; border: 1px solid var(--ctp-bdr) !important;
  font-size: 12.5px !important; font-weight: 600 !important;
  color: var(--ctp-ok-bright) !important;
}
.tb-pill .dot { box-shadow: none !important; }
.tb-broker {
  height: 30px; padding: 0 12px; border-radius: 8px;
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600; color: var(--ctp-tx-muted);
  background: transparent; border: 1px solid var(--ctp-bdr);
  font-family: ui-monospace, Menlo, monospace;
}
.tb-lang {
  height: 30px; padding: 0 10px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 700; color: var(--ctp-tx-2);
  background: transparent; border: 1px solid transparent;
  text-transform: uppercase;
}
.tb-lang:hover { background: var(--ctp-hover); }
.tb-lang .caret { font-size: 9px; opacity: .7; }
.tb-icon-btn { border: 1px solid transparent !important; }
.tb-icon-btn:hover { background: var(--ctp-hover); }
.tb-btn-danger {
  border-color: rgba(239,68,68,.5) !important;
  background: transparent !important;
  color: var(--ctp-err-bright) !important;
}
.tb-btn-danger:hover { background: rgba(239,68,68,.1) !important; }

/* Sidebar power-icon button in user footer */
.user-power {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  color: var(--ctp-tx-muted); font-size: 14px;
  background: transparent; border: 1px solid transparent; flex-shrink: 0;
}
.user-power:hover { color: var(--ctp-err-bright); background: rgba(239,68,68,.08); }

/* KPI sub-text */
.kpi-sub { font-size: 12px; color: var(--ctp-tx-muted); margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kpi-sub .ok { color: var(--ctp-ok-bright); font-weight: 700; }
.kpi-sub .warn { color: var(--ctp-warn-bright); font-weight: 700; }
.kpi-sub .err  { color: var(--ctp-err-bright); font-weight: 700; }

/* Primary outline button (for Quick Actions) */
.btn-primary-outline {
  background: transparent; color: var(--ctp-accent);
  border: 1px solid rgba(56,189,248,.45);
}
.btn-primary-outline:hover { background: rgba(56,189,248,.12); }
.btn-block { display: block; width: 100%; text-align: center; }

/* =====================================================================
   Brand logo: theme-aware images + sidebar-collapse-aware swap.
   ---------------------------------------------------------------------
   Four PNG files live in /assets/img/:
     logo-dark.png, logo-light.png     — full logo (used when sidebar expanded)
     favicon-dark.png, favicon-light.png — square mark (used when sidebar collapsed)
   All four <img> tags are rendered by the server; CSS picks the visible
   one based on body[data-ctp-theme] + .sidebar.collapsed.
   ===================================================================== */

/* brand-logo container — when sitting alone (no text label), give it room
   to breathe instead of the old 36×36 puck that was sized to fit beside
   the "CopyTrader Pro" wordmark. */
.brand {
  justify-content: center;   /* center the (now solo) logo in the row */
  padding: 24px 14px 18px;   /* tighter horizontal padding to give the logo more width */
}
.brand-logo {
  /* override the gradient block from the earlier inline-SVG era */
  background: transparent !important;
  box-shadow: none !important;
  width: 210px;
  height: 80px;
  position: relative;
  overflow: visible;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.brand-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  /* Hidden by default; the visible one is enabled below. */
  display: none;
}

/* DARK theme + expanded sidebar  →  full logo, dark variant (white art) */
body[data-ctp-theme="dark"] .sidebar:not(.collapsed) .brand-img-logo.brand-img-dark      { display: block; }
/* LIGHT theme + expanded sidebar →  full logo, light variant (black art) */
body[data-ctp-theme="light"] .sidebar:not(.collapsed) .brand-img-logo.brand-img-light    { display: block; }
/* DARK theme + collapsed sidebar →  favicon, dark variant */
body[data-ctp-theme="dark"]  .sidebar.collapsed   .brand-img-favicon.brand-img-dark      { display: block; }
/* LIGHT theme + collapsed sidebar →  favicon, light variant */
body[data-ctp-theme="light"] .sidebar.collapsed   .brand-img-favicon.brand-img-light     { display: block; }

/* =====================================================================
   Login-page logo — theme-aware swap. Sits INSIDE the login-card, above
   the form, with no separate box/puck wrapping the image itself. The
   surrounding white card provides the visual container.
   Overrides the earlier 56×56 gradient puck rule (line ~806).
   ===================================================================== */
.login-logo {
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 240px;
  max-width: 100%;
  height: auto;
  min-height: 80px;
  position: relative;
  display: block;
  margin: 0 auto 22px;
  text-align: center;
  font-size: 0;   /* kill any leftover text styling from before */
}
.login-logo-img {
  max-width: 100%;
  height: auto;
  display: none;
}
body[data-ctp-theme="dark"]  .login-logo-img.login-logo-dark  { display: block; }
body[data-ctp-theme="light"] .login-logo-img.login-logo-light { display: block; }

/* =====================================================================
   Sidebar collapse — desktop-only narrow mode.
   ---------------------------------------------------------------------
   When .sidebar has .collapsed:
     • width shrinks from 240px to 68px
     • all text (labels, section header, brand text, footer text) hides
     • only the brand-logo (showing favicon) + nav icons remain visible
     • nav child menus close (no horizontal room to render them)
   The hamburger button in the topbar toggles this class on .sidebar.
   On screens < 900px (the existing mobile breakpoint) the sidebar uses
   the original slide-in drawer behavior instead — see the @media block
   further down in this stylesheet.
   ===================================================================== */
.sidebar { transition: width .18s ease; }
.sidebar.collapsed { width: 68px; }

/* hide every text-bearing element in collapsed mode */
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-caret,
.sidebar.collapsed .nav-children,
.sidebar.collapsed .user-name,
.sidebar.collapsed .user-role {
  display: none !important;
}

/* center the brand mark + nav icons within the narrow column */
.sidebar.collapsed .brand            { justify-content: center; padding: 18px 0 14px; }
.sidebar.collapsed .brand-logo       { width: 40px; height: 40px; }  /* square for the favicon */
.sidebar.collapsed .nav              { padding: 0 8px; }
.sidebar.collapsed .nav-item         { justify-content: center; padding: 9px 8px; }
.sidebar.collapsed .sidebar-footer   { justify-content: center; padding: 12px 8px; }

/* Hover state on a collapsed item still highlights — useful since the
   label is gone, so the icon needs to feel clickable. */
.sidebar.collapsed .nav-item:hover { background: var(--ctp-hover); }

/* Active-state accent strip shouldn't span the narrow column awkwardly;
   re-anchor it so it still reads as "this is the current page". */
.sidebar.collapsed .nav-item.active::before {
  top: 4px; bottom: 4px; width: 3px;
}

/* Title-tooltips: when collapsed, the nav-item has no visible label so we
   rely on the native `title` attribute (injected by app.js below) to show
   the page name on hover. No special CSS needed.

   Avatar in the footer keeps its size; we just hide the user-name/role text
   blocks that sit beside it. */