/* ===========================================================
   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; justify-content: center;
  height: 22px; padding: 0 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1;
  background: transparent; border: 1px solid; vertical-align: middle;
  box-sizing: border-box;
}
.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. */

/* ---------- login ---------- */
.login-body { height:100vh; overflow:auto; }
.login-top  { position:absolute; top:16px; right:20px; }
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.login-card { width:100%; max-width:420px; background:var(--ctp-card);
  border:1px solid var(--ctp-bdr); border-radius:14px; padding:36px 34px 30px; }
.login-logo { text-align:center; margin-bottom:34px; }
.login-logo img { max-width:210px; height:auto; }
.login-note { margin-top:22px; padding-top:18px; border-top:1px solid var(--ctp-bdr);
  text-align:center; font-size:12.5px; color:var(--ctp-tx-muted); }

/* ---------- dashboard stats ---------- */
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:1100px){ .grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .grid-4 { grid-template-columns:1fr; } }
.stat-card { background:var(--ctp-card); border:1px solid var(--ctp-bdr);
  border-radius:12px; padding:18px 20px; }
.stat-label { font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ctp-tx-muted); margin-bottom:10px; }
.stat-value { font-size:30px; font-weight:700; line-height:1; color:var(--ctp-tx); }
.stat-foot  { margin-top:8px; font-size:12px; color:var(--ctp-tx-muted); }

/* ---------- plugin hub ---------- */
.plugin-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:1100px){ .plugin-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px) { .plugin-grid { grid-template-columns:1fr; } }
.plugin-card { display:flex; gap:16px; padding:20px; text-decoration:none;
  background:var(--ctp-card); border:1px solid var(--ctp-bdr); border-radius:12px;
  transition:border-color .15s, transform .15s; }
.plugin-card:hover { border-color:var(--ctp-accent, #3b82f6); transform:translateY(-2px); }
.plugin-icon { flex-shrink:0; width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--ctp-sidebar-bg); color:var(--ctp-accent, #3b82f6); }
.plugin-icon svg { width:22px; height:22px; }
.plugin-name { font-size:15.5px; font-weight:650; color:var(--ctp-tx); margin-bottom:4px; }
.plugin-tag  { font-size:12.5px; color:var(--ctp-tx-muted); line-height:1.45; margin-bottom:10px; }
.plugin-meta { display:flex; gap:6px; flex-wrap:wrap; }
.neg { color: var(--ctp-err, #dc2626); }

/* ---- rule editor chip pickers ---- */
.chippick { display: flex; flex-direction: column; gap: 8px; }
.chippick-row { display: flex; gap: 8px; }
.chippick-row .chippick-filter { flex: 1; }
.chippick-add { flex: 0 0 auto; padding: 0 22px; }
.chippick-select { min-height: 176px; font-family: inherit; font-size: 13px; }
.chippick-select option { padding: 3px 8px; border-radius: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px;
        background: rgba(122,162,247,.15); border: 1px solid rgba(122,162,247,.45);
        border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13px; }
.chip-x { background: none; border: 0; cursor: pointer; color: inherit;
          font-size: 15px; line-height: 1; padding: 2px 6px; border-radius: 999px; }
.chip-x:hover { background: rgba(255,255,255,.12); }

/* checkbox rows breathe: space above and below (skip weekends/holidays row) */
.check-row { margin: 14px 0 18px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* ==================================================================
   TABLES — global styling for every list (rules, ledgers, logs,
   users, servers, scalping). Matches the copier's layout: uppercase
   muted header bar, generous cell padding, thin row separators,
   subtle hover. Applies everywhere <table class="table"> is used.
   ================================================================== */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.45;
}
.table thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ctp-tx-muted);
  padding: 12px 14px;
  border-bottom: 1px solid var(--ctp-bdr);
  white-space: nowrap;
  background: var(--ctp-card-2);
}
.table thead th:first-child { border-top-left-radius: 8px; }
.table thead th:last-child  { border-top-right-radius: 8px; }
.table tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, .10);  /* thin separator */
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: rgba(148, 163, 184, .045); }
.table td .hint { margin-top: 4px; }
/* forms & buttons inside cells shouldn't stretch rows */
.table td form { margin: 0; display: inline-block; }
.table td .btn + .btn, .table td form + form { margin-left: 6px; }

/* badges never wrap; keep flex centering from the base rule */
.badge-soft { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; }
/* action buttons (last column) stay side by side; state column doesn't wrap */
.table td:last-child { white-space: nowrap; }
.table td:nth-last-child(2) { white-space: nowrap; }

/* ---- table cell wrapping fixes ----
   Cells keep their content on ONE line; the card scrolls sideways if a
   table is genuinely too wide. Badges never wrap or spill out of the pill,
   and action buttons stay side by side. */
.card-body { overflow-x: auto; }
.table th, .table td { white-space: nowrap; }
.table td .d-desc, .table td .hint { white-space: normal; }
.table td:first-child { white-space: normal; min-width: 150px; }  /* names may wrap tidily */
.badge-soft { white-space: nowrap; max-width: none; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }

/* ==================================================================
   FORM CONTROL POLISH — checkboxes, date inputs, spacing.
   Fixes: tiny unstyled ticks, invisible dark-mode calendar icon.
   ================================================================== */

/* tell the browser to render native controls for the active theme, so
   the datetime-local calendar glyph is light-on-dark in dark mode and
   dark-on-light in light mode (fixes the invisible calendar icon). */
:root { color-scheme: dark; }
body[data-ctp-theme="dark"]  { color-scheme: dark; }
body[data-ctp-theme="light"] { color-scheme: light; }

/* Native date/time picker glyph.
   Chrome draws the calendar indicator using the input's color-scheme.
   We set it explicitly per theme on BOTH the body attr states, and also
   invert the indicator directly as a belt-and-braces fallback so the icon
   is always visible: light glyph on dark, dark glyph on light. */
body[data-ctp-theme="dark"] input[type="date"],
body[data-ctp-theme="dark"] input[type="datetime-local"],
body[data-ctp-theme="dark"] input[type="time"],
input[type="date"], input[type="datetime-local"], input[type="time"] {
  color-scheme: dark;
}
body[data-ctp-theme="light"] input[type="date"],
body[data-ctp-theme="light"] input[type="datetime-local"],
body[data-ctp-theme="light"] input[type="time"] {
  color-scheme: light;
}
/* explicit indicator styling — invert to white on dark themes */
body[data-ctp-theme="dark"] ::-webkit-calendar-picker-indicator,
body:not([data-ctp-theme="light"]) ::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(2);
  opacity: 1; cursor: pointer;
}
body[data-ctp-theme="light"] ::-webkit-calendar-picker-indicator {
  filter: none; opacity: .7; cursor: pointer;
}

/* consistent field spacing so stacked settings breathe */
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field .label { display: block; margin-bottom: 6px; }

/* ==================================================================
   CLICKABLE AFFORDANCE — make account/evidence links obviously clickable.
   Applies to links inside data tables (scalping login, risk refs, etc).
   ================================================================== */

/* any link inside a table cell: distinct accent color + dotted underline
   that becomes solid on hover, plus a pointer cursor and subtle chip look */
.table td a {
  color: var(--ctp-accent, #7aa2f7);
  text-decoration: none;
  border-bottom: 1px dashed #7aa2f7;   /* fallback */
  border-bottom: 1px dashed color-mix(in srgb, var(--ctp-accent, #7aa2f7) 55%, transparent);
  padding-bottom: 1px;
  cursor: pointer;
  transition: all .12s ease;
}
.table td a:hover {
  border-bottom-style: solid;
  color: color-mix(in srgb, var(--ctp-accent, #7aa2f7) 80%, #fff 20%);
}
.table td a strong { font-weight: 600; }

/* a small "view →" hint that appears on hover of a clickable row,
   so people learn the account is a link. Add class .row-clickable to <tr>. */
.table tr.row-clickable { cursor: pointer; }
.table tr.row-clickable:hover td { background: rgba(122,162,247,.08); }
.table tr.row-clickable:hover td { background: color-mix(in srgb, var(--ctp-accent,#7aa2f7) 8%, transparent); }
.table tr.row-clickable td:first-child a::after {
  content: " ›";
  color: var(--ctp-accent, #7aa2f7);
  font-weight: 700;
  opacity: 0;
  transition: opacity .12s ease;
}
.table tr.row-clickable:hover td:first-child a::after { opacity: 1; }

/* a reusable "clickable" pill hint you can drop next to a header to say
   'rows are clickable' */
.click-hint {
  display: inline-block;
  font-size: 11px;
  color: var(--ctp-subtext, #8a94a6);
  background: color-mix(in srgb, var(--ctp-accent,#7aa2f7) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ctp-accent,#7aa2f7) 30%, transparent);
  border-radius: 10px;
  padding: 1px 9px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ==================================================================
   HOW IT WORKS page — explainer boxes, grid, lists.
   ================================================================== */
.hiw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.hiw-box {
  border: 1px solid var(--ctp-border, #2a2f3a);
  border-radius: 12px;
  padding: 16px;
  background: transparent;
}
.hiw-box p { margin: 8px 0 0; font-size: 13px; line-height: 1.55; }
.hiw-tag {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; margin-bottom: 4px;
}
.hiw-members {
  font-size: 12px !important; opacity: .8; margin-top: 10px !important;
  padding-top: 8px; border-top: 1px solid var(--ctp-border, #2a2f3a);
}
.hiw-blue   { border-color: rgba(56,189,248,.4); }
.hiw-blue   .hiw-tag { color: var(--ctp-accent, #7aa2f7); }
.hiw-amber  { border-color: rgba(245,158,11,.4); }
.hiw-amber  .hiw-tag { color: var(--ctp-warn-bright, #f59e0b); }
.hiw-purple { border-color: rgba(127,119,221,.4); }
.hiw-purple .hiw-tag { color: #9088e6; }

.hiw-list { margin: 10px 0 0; padding-left: 20px; }
.hiw-list li { margin: 7px 0; font-size: 13px; line-height: 1.55; }

.hiw-table td { font-size: 12.5px; vertical-align: top; white-space: normal; }
.hiw-table td:first-child { min-width: 130px; white-space: nowrap; }
.hiw-table th { font-size: 10px; }