/* labels5 */
/* Trade Harbour–inspired look · DSG Dev (tokens from live demo screenshots) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Exact tokens from Calendar PnL screenshot (2026-09-16) */
  --bg: #0f172a;
  --sidebar: #111827;
  --panel: #1f2937;
  --panel2: #151d2c;
  --line: #334155;
  --line2: #475569;
  --text: #ffffff;
  --muted: #94a3b8;
  --dim: #64748b;
  --green: #bbf7d0;
  --green-bg: #122428;
  --green-border: #1a3f3a;
  --red: #fcb4a5;
  --red-bg: #271925;
  --red-border: #4a2430;
  --blue: #2563eb;
  --blue-soft: rgba(37, 99, 235, 0.22);
  --blue-text: #93c5fd;
  --orange: #f97316;
  --radius: 10px;
  --radius-sm: 8px;
  --sans: Inter, system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sidebar-w: 200px;
  --pad: 24px;
  --gap: 14px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html {
  width: 100%;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* center .th-shell in the viewport */
}
a { color: inherit; text-decoration: none; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
.pos { color: var(--green); font-weight: 700; }
.neg { color: var(--red); font-weight: 700; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.mono { font-family: var(--mono); }

/* ——— Shell: sidebar + main ——— */
.th-shell {
  display: flex;
  min-height: 100vh;
}
.th-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  padding: 16px 10px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.th-side-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 14px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.02em;
}
.th-mark {
  width: 26px; height: 26px; border-radius: 6px;
  background: linear-gradient(145deg, #1d4ed8, #2563eb);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 800; color: #fff;
}
.th-dev {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--orange);
  border: 1px solid rgba(249, 115, 22, 0.4);
  background: rgba(249, 115, 22, 0.1);
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: auto;
}
.th-side-nav { display: flex; flex-direction: column; gap: 2px; }
.th-side-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  position: relative;
  transition: background .1s, color .1s;
}
.th-side-nav a:hover { color: var(--text); background: rgba(30, 41, 59, 0.6); }
.th-side-nav a.active {
  background: var(--blue-soft);
  color: var(--blue-text);
}
.th-side-nav a.active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--blue);
}
.th-side-nav .ico { width: 16px; opacity: 0.75; font-size: 13px; text-align: center; }

.th-side-sec {
  margin-top: 16px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.th-acct-list { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.th-acct {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--muted);
}
.th-acct .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(34,197,94,.5);
}
.th-acct .bal {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
}
.th-side-foot {
  margin-top: auto;
  padding: 12px 8px 0;
  font-size: 11px;
}
.th-side-foot a {
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  display: block;
  text-align: center;
}
.th-side-foot a:hover { color: var(--text); border-color: var(--line2); }

.th-main {
  flex: 1;
  min-width: 0;
  padding: var(--pad);
  padding-bottom: 40px;
}

@media (max-width: 860px) {
  .th-shell { flex-direction: column; }
  .th-sidebar {
    width: 100%;
    height: auto;
    position: relative;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 10px 12px;
  }
  .th-side-nav { flex-direction: row; flex-wrap: wrap; }
  .th-side-nav a.active::before { display: none; }
  .th-side-sec, .th-acct-list { display: none; }
  .th-side-foot { display: none; }
  .th-main { padding: 16px 12px 36px; }
}

/* ——— Page head ——— */
.th-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.th-page-head h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
}
.th-page-head p {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
}

/* ——— Cards ——— */
.th-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.th-card-pad { padding: 14px 16px; }
.th-card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.th-card-h h2 {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.th-card-h .meta {
  font-size: 11px;
  color: var(--muted);
}

/* ——— Buttons / selects ——— */
.th-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.th-btn-primary {
  background: var(--blue);
  color: #fff;
}
.th-btn-primary:hover { background: #1d4ed8; }
.th-btn-secondary {
  background: var(--panel);
  border-color: var(--line);
  color: var(--muted);
}
.th-btn-secondary:hover { color: var(--text); border-color: var(--line2); }

.th-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  align-items: flex-end;
}
.th-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dim);
}
.th-select, .th-input {
  appearance: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 28px 7px 10px;
  color: var(--text);
  font-size: 12px;
  min-width: 130px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.th-input {
  background-image: none;
  padding-right: 10px;
  min-width: 120px;
}
.th-select:focus, .th-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

.th-seg {
  display: inline-flex;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}
.th-seg button {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 5px;
  color: var(--muted);
  white-space: nowrap;
}
.th-seg button:hover { color: var(--text); }
.th-seg button.on {
  background: var(--blue);
  color: #fff;
}


/* Calendar filters: Strategy/dates on top row, market tabs underneath */
.th-filters {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  position: relative;
}
.th-filters-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}
.th-filters-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.th-filters-markets {
  width: 100%;
}
.th-filters-markets .th-market-tabs {
  width: 100%;
  margin-bottom: 0;
}

/* Market / engine source tabs (Futures…Ninja + Python) — gold selected like TH stocks chip */
.th-market-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 2px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}
.th-market-tabs button {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  border: none;
  white-space: nowrap;
}
.th-market-tabs button:hover { color: var(--text); }
.th-market-tabs button.on {
  background: #e8b923;
  color: #0b1220;
  box-shadow: 0 0 12px rgba(232, 185, 35, 0.35);
}


/* ——— KPI strip ——— */
.th-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 1000px) { .th-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .th-kpis { grid-template-columns: repeat(2, 1fr); } }
.th-kpi {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.th-kpi .k {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.th-kpi .v {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.th-kpi .v.pos { color: var(--green); }
.th-kpi .v.neg { color: var(--red); }

/* ——— Banner ——— */
.th-banner {
  background: rgba(6, 78, 59, 0.45);
  border: 1px solid var(--green-border);
  color: var(--green);
  font-size: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
}

/* ——— Calendar ——— */
.th-cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.th-month {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  min-width: 160px;
  text-align: center;
}
.th-month-nav {
  display: flex;
  gap: 6px;
  align-items: center;
}
.th-icon-btn {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 14px;
}
.th-icon-btn:hover { color: var(--text); border-color: var(--line2); }

.th-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.th-cal-dow {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 2px 0 4px;
}
.th-day {
  min-height: 92px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel2);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.th-day.empty-pad {
  background: transparent;
  border-color: transparent;
  min-height: 92px;
  pointer-events: none;
}
.th-day .d {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.th-day.today .d { color: var(--blue-text); font-weight: 700; }
.th-day .pnl {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  color: var(--muted);
}
.th-day .pct {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.th-day .cnt {
  margin-top: auto;
  font-size: 10px;
  color: var(--dim);
}
.th-day.win {
  background: var(--green-bg);
  border-color: var(--green-border);
}
.th-day.win .pnl, .th-day.win .pct { color: var(--green); }
.th-day.win .cnt { color: rgba(187, 247, 208, 0.65); }
.th-day.loss {
  background: var(--red-bg);
  border-color: var(--red-border);
}
.th-day.loss .pnl, .th-day.loss .pct { color: var(--red); }
.th-day.loss .cnt { color: rgba(252, 180, 165, 0.65); }
.th-day.flat .pnl { color: var(--dim); font-weight: 500; }
.th-day.flat { background: var(--panel2); border-color: var(--line); }

@media (max-width: 700px) {
  .th-day { min-height: 74px; padding: 6px; gap: 0; }
  .th-day .pnl { font-size: 11px; }
  .th-day .pct, .th-day .cnt { font-size: 9px; }
  .th-cal { gap: 5px; }
}

.th-cal-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 11px;
  color: var(--muted);
}
.th-cal-legend i {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: -1px;
  border: 1px solid transparent;
}
.th-cal-legend .lg-win { background: var(--green-bg); border-color: var(--green-border); }
.th-cal-legend .lg-loss { background: var(--red-bg); border-color: var(--red-border); }
.th-cal-legend .lg-flat { background: var(--panel); border-color: var(--line); }

.th-month-sum {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 600px) { .th-month-sum { grid-template-columns: repeat(2, 1fr); } }
.th-ms {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.th-ms .k { font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.th-ms .v { font-size: 16px; font-weight: 700; margin-top: 4px; letter-spacing: -0.02em; color: #fff; }

/* ——— Charts ——— */
.th-spark {
  height: 200px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.th-spark svg { width: 100%; height: 100%; display: block; }
.th-chart-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 10px 0 12px;
  font-size: 12px;
  color: var(--muted);
}
.th-chart-stats b { color: #fff; font-weight: 600; margin-left: 4px; }

.th-grid-2 {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--gap);
  margin-bottom: var(--gap);
}
@media (max-width: 900px) { .th-grid-2 { grid-template-columns: 1fr; } }

/* ——— Day list ——— */
.th-daylist { list-style: none; }
.th-daylist li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.th-daylist li:last-child { border-bottom: 0; }
.th-daylist .date { font-family: var(--mono); font-size: 11px; color: var(--muted); min-width: 78px; }
.th-daylist .amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.th-daylist .meta { font-size: 11px; color: var(--dim); }

/* ——— Account cards ——— */
.th-accts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 800px) { .th-accts-grid { grid-template-columns: 1fr; } }
.th-acct-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}
.th-acct-card .ah {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.th-acct-card .ah strong { font-size: 13px; color: #fff; }
.th-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(34,197,94,.15);
  color: var(--green);
  border: 1px solid rgba(34,197,94,.3);
}
.th-acct-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.th-acct-stats .k { font-size: 10px; color: var(--dim); }
.th-acct-stats .v { font-size: 13px; font-weight: 700; margin-top: 2px; color: #fff; }

/* ——— Table ——— */
.th-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.th-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 780px;
}
.th-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background: rgba(15, 23, 42, 0.35);
}
.th-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}
.th-table td.main { color: #fff; font-weight: 600; }
.th-table td.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
}
.th-table th.num { text-align: right; }
.th-table td.num.pos,
.th-table td.num.neg { font-weight: 700; }
.th-table tr.row-win td:first-child::before,
.th-table tr.row-closed td:first-child::before,
.th-table tr.row-loss td:first-child::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
}
.th-table tr.row-win td:first-child::before { background: var(--green); }
.th-table tr.row-closed td:first-child::before { background: #3b82f6; }
.th-table tr.row-loss td:first-child::before { background: var(--red); }
.th-table tr.row-win td { background: rgba(34, 197, 94, 0.055); }
.th-table tr.row-closed td { background: rgba(59, 130, 246, 0.055); }
.th-table tr.row-loss td { background: rgba(239, 68, 68, 0.055); }
.th-table tr.row-win:hover td { background: rgba(34, 197, 94, 0.09); }
.th-table tr.row-closed:hover td { background: rgba(59, 130, 246, 0.09); }
.th-table tr.row-loss:hover td { background: rgba(239, 68, 68, 0.09); }
.th-table .sub { display: block; font-size: 11px; font-weight: 400; color: var(--dim); margin-top: 2px; }

.th-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.th-pill.buy, .th-pill.long { background: rgba(34,197,94,.15); color: var(--green); }
.th-pill.sell, .th-pill.short { background: rgba(239,68,68,.15); color: var(--red); }
.th-pill.dur {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 500;
  text-transform: none;
  font-family: var(--mono);
}

.th-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
}
.th-pager .btns { display: flex; gap: 6px; }
.th-pager button {
  padding: 6px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
}
.th-pager button:hover { color: var(--text); border-color: var(--line2); }

.th-foot {
  margin-top: 20px;
  font-size: 10px;
  color: var(--dim);
  text-align: center;
  font-family: var(--mono);
}
.th-stack { display: flex; flex-direction: column; gap: var(--gap); }
.th-filters-card { margin-bottom: 14px; }
.th-filters-card .th-select,
.th-filters-card .th-input {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.th-filters-card .th-input {
  background-image: none;
}

/* ——— Test run history (farm) ——— */
.th-table-runs { min-width: 1100px; }
.th-table-runs td.dur-cell { white-space: normal; min-width: 132px; }
.th-table-runs td.dur-cell .th-pill { margin-bottom: 2px; }
.th-pill.dur-head,
.th-pill.dur-strong,
.th-pill.dur-fail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 3px 10px;
  border-radius: 999px;
}
.th-pill.dur-head {
  background: rgba(37, 99, 235, 0.18);
  border: 1px solid rgba(37, 99, 235, 0.45);
  color: var(--blue-text);
}
.th-pill.dur-strong {
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: var(--green);
}
.th-pill.dur-fail {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}
.th-pill.stage-is {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
}
.th-pill.stage-oos {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}
.th-pill.stage-holdout {
  background: rgba(168, 85, 247, 0.18);
  color: #d8b4fe;
}
.th-pill.stage-school {
  background: rgba(34, 197, 94, 0.15);
  color: var(--green);
}
.th-pill.stage-power {
  background: rgba(249, 115, 22, 0.18);
  color: var(--orange);
}
.th-card-h .th-page-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.th-card-h .th-page-ctrl button {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
}
.th-card-h .th-page-ctrl button:hover { color: var(--text); border-color: var(--line2); }

/* Shell width — Width dropdown (default Wide · 1440); always centered in viewport */
.th-shell {
  --shell-max: 1440px;
  width: 100%;
  max-width: var(--shell-max);
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
  transition: max-width .18s ease;
  overflow-x: clip;
  box-sizing: border-box;
}
.th-shell.is-full {
  max-width: none;
  width: 100%;
  align-self: stretch;
  border-left: 0;
  border-right: 0;
  box-shadow: none;
  overflow-x: visible;
}
.th-main {
  min-width: 0;
  overflow-x: auto;
}
.th-head-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.width-ctl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, var(--dim));
}
.width-ctl select.th-select {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  min-width: 148px;
}


/* Theme dropdown (next to Width) */
.theme-ctl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, var(--dim));
}
.theme-ctl select.th-select,
.theme-ctl select.th-sel {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  min-width: 148px;
}
/* Background select — match Harbour .th-select even if JS class miss */
.th-head-controls .bg-select,
.theme-bg-row .bg-select {
  appearance: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 28px 7px 10px;
  color: var(--text);
  font-size: 12px;
  min-width: 130px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.th-head-controls .bg-select:focus,
.theme-bg-row .bg-select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}
.th-head-controls .bg-select option,
.theme-bg-row .bg-select option {
  background: var(--panel);
  color: var(--text);
}

.th-head-controls {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}


/* ——— Harbour color themes (data-th-theme) ——— */
/* Default :root = harbour-dark (current) */

html[data-th-theme="harbour-dark"] {
  --bg: #0f172a;
  --sidebar: #111827;
  --panel: #1f2937;
  --panel2: #151d2c;
  --line: #334155;
  --line2: #475569;
  --text: #ffffff;
  --muted: #94a3b8;
  --dim: #64748b;
  --green: #bbf7d0;
  --green-bg: #122428;
  --green-border: #1a3f3a;
  --red: #fcb4a5;
  --red-bg: #271925;
  --red-border: #4a2430;
  --blue: #2563eb;
  --blue-soft: rgba(37, 99, 235, 0.22);
  --blue-text: #93c5fd;
  --orange: #f97316;
}

html[data-th-theme="light"] {
  --bg: #f4f6fa;
  --sidebar: #ffffff;
  --panel: #ffffff;
  --panel2: #eef1f6;
  --line: #d8dee8;
  --line2: #c5cedc;
  --text: #1a2332;
  --muted: #5a6b82;
  --dim: #7a8aa0;
  --green: #15803d;
  --green-bg: #ecfdf3;
  --green-border: #86efac;
  --red: #b91c1c;
  --red-bg: #fef2f2;
  --red-border: #fecaca;
  --blue: #2563eb;
  --blue-soft: rgba(37, 99, 235, 0.12);
  --blue-text: #1d4ed8;
  --orange: #ea580c;
}

html[data-th-theme="dark"] {
  --bg: #060a11;
  --sidebar: #0a101a;
  --panel: #0d1522;
  --panel2: #111b2c;
  --line: #1a2740;
  --line2: #243552;
  --text: #e6edf7;
  --muted: #7f96b5;
  --dim: #5a7190;
  --green: #2fd67b;
  --green-bg: #0d2418;
  --green-border: #1a5c38;
  --red: #e85d5d;
  --red-bg: #2a1218;
  --red-border: #5c2430;
  --blue: #4a9eff;
  --blue-soft: rgba(74, 158, 255, 0.18);
  --blue-text: #93c5fd;
  --orange: #f0a030;
}

html[data-th-theme="light-gray"] {
  --bg: #eceeef;
  --sidebar: #f7f8f9;
  --panel: #ffffff;
  --panel2: #e8eaec;
  --line: #c9ced3;
  --line2: #b4bac1;
  --text: #2a2e34;
  --muted: #5c6370;
  --dim: #7a8190;
  --green: #2a8f52;
  --green-bg: #e8f5ee;
  --green-border: #9fd4b3;
  --red: #b33a3a;
  --red-bg: #f8eaea;
  --red-border: #e0a8a8;
  --blue: #4a6fa5;
  --blue-soft: rgba(74, 111, 165, 0.12);
  --blue-text: #2f4f7a;
  --orange: #b87a18;
}

html[data-th-theme="medium-gray"] {
  --bg: #9aa0a8;
  --sidebar: #8e949c;
  --panel: #b8bec6;
  --panel2: #a8aeb6;
  --line: #7a8088;
  --line2: #6a7078;
  --text: #1a1d22;
  --muted: #3a4048;
  --dim: #4a5058;
  --green: #1a7a40;
  --green-bg: #c5e0d0;
  --green-border: #5a9a70;
  --red: #9a3030;
  --red-bg: #e0c0c0;
  --red-border: #b07070;
  --blue: #3a5a80;
  --blue-soft: rgba(58, 90, 128, 0.15);
  --blue-text: #1a3050;
  --orange: #9a6010;
}

html[data-th-theme="dark-gray"] {
  --bg: #2a2d32;
  --sidebar: #32363c;
  --panel: #3a3f46;
  --panel2: #2f3339;
  --line: #4a5058;
  --line2: #5a616a;
  --text: #e8eaed;
  --muted: #a8aeb8;
  --dim: #8a909a;
  --green: #3ecf7a;
  --green-bg: #1a3a28;
  --green-border: #2a6a48;
  --red: #e07070;
  --red-bg: #3a2020;
  --red-border: #6a3030;
  --blue: #6a9fd4;
  --blue-soft: rgba(106, 159, 212, 0.18);
  --blue-text: #a8c8e8;
  --orange: #e0a040;
}

html[data-th-theme="pale-blue"] {
  --bg: #eef5fc;
  --sidebar: #f7fbff;
  --panel: #ffffff;
  --panel2: #e8f1fa;
  --line: #c5d8ec;
  --line2: #a8c2de;
  --text: #1a3558;
  --muted: #4a6b8c;
  --dim: #6e8aa8;
  --green: #1a9f55;
  --green-bg: #e6f7ee;
  --green-border: #8fd4b0;
  --red: #c0392b;
  --red-bg: #fceceb;
  --red-border: #e8a8a0;
  --blue: #3a7ec8;
  --blue-soft: rgba(58, 126, 200, 0.12);
  --blue-text: #1e5a9a;
  --orange: #c47a10;
}

html[data-th-theme="medium-blue"] {
  --bg: #c8daf0;
  --sidebar: #bfd0e8;
  --panel: #eef4fb;
  --panel2: #d6e4f5;
  --line: #9bb4d4;
  --line2: #7a9bc4;
  --text: #0f2744;
  --muted: #2f5078;
  --dim: #4a6a90;
  --green: #1a8f4e;
  --green-bg: #d0eadc;
  --green-border: #5aaa80;
  --red: #b03030;
  --red-bg: #efd0d0;
  --red-border: #c08080;
  --blue: #1e6fd9;
  --blue-soft: rgba(30, 111, 217, 0.14);
  --blue-text: #0f4a9a;
  --orange: #b87010;
}

html[data-th-theme="dark-blue"] {
  --bg: #143a7a;
  --sidebar: #18448c;
  --panel: #2157ad;
  --panel2: #1a4a96;
  --line: #2f6bc4;
  --line2: #3d7dd6;
  --text: #eef5ff;
  --muted: #a8c4ef;
  --dim: #7ea3de;
  --green: #3ee08a;
  --green-bg: #0f3a2a;
  --green-border: #2a8a58;
  --red: #ff7a7a;
  --red-bg: #4a2030;
  --red-border: #8a4050;
  --blue: #8ec5ff;
  --blue-soft: rgba(142, 197, 255, 0.2);
  --blue-text: #c5e0ff;
  --orange: #ffc04a;
}

html[data-th-theme="cobalt-blue"] {
  --bg: #0639a8;
  --sidebar: #0845c0;
  --panel: #0a52d8;
  --panel2: #0c5ee8;
  --line: #2a6ef0;
  --line2: #4a88ff;
  --text: #f2f7ff;
  --muted: #c5d8ff;
  --dim: #9bb8f5;
  --green: #3ee08a;
  --green-bg: #0f3a2a;
  --green-border: #2a8a58;
  --red: #ff8a8a;
  --red-bg: #4a2030;
  --red-border: #8a4050;
  --blue: #9ec5ff;
  --blue-soft: rgba(158, 197, 255, 0.22);
  --blue-text: #d0e4ff;
  --orange: #ffc04a;
}

html[data-th-theme="midnight-navy"] {
  --bg: #000840;
  --sidebar: #000e50;
  --panel: #001a72;
  --panel2: #00105a;
  --line: #1a2f8a;
  --line2: #2a48a8;
  --text: #e4ecff;
  --muted: #8aa0d8;
  --dim: #6a80b8;
  --green: #2fd67b;
  --green-bg: #0a2818;
  --green-border: #1a5a38;
  --red: #e85d5d;
  --red-bg: #2a1218;
  --red-border: #5c2430;
  --blue: #6a9eff;
  --blue-soft: rgba(106, 158, 255, 0.2);
  --blue-text: #a8c8ff;
  --orange: #f0a030;
}

/* NinjaTrader ML–inspired: blue sidebar + white desk (from user swatch) */
html[data-th-theme="ninja-blue"] {
  --bg: #f4f7fb;
  --sidebar: #0073cf;
  --panel: #ffffff;
  --panel2: #eef3f8;
  --line: #d7e0ea;
  --line2: #c0ccd8;
  --text: #1a2332;
  --muted: #5a6b82;
  --dim: #7a8aa0;
  --green: #16a34a;
  --green-bg: #ecfdf3;
  --green-border: #86efac;
  --red: #dc2626;
  --red-bg: #fef2f2;
  --red-border: #fecaca;
  --blue: #0073cf;
  --blue-soft: rgba(0, 115, 207, 0.14);
  --blue-text: #005a9e;
  --orange: #e6b800;
}

/* Light themes: sidebar brand/nav need light-on-blue or dark-on-white tweaks */
html[data-th-theme="ninja-blue"] .th-sidebar,
html[data-th-theme="ninja-blue"] .th-side {
  color: #fff;
}
html[data-th-theme="ninja-blue"] .th-side-nav a,
html[data-th-theme="ninja-blue"] .th-side-nav a .ico,
html[data-th-theme="ninja-blue"] .th-side-brand,
html[data-th-theme="ninja-blue"] .th-side-foot a {
  color: rgba(255,255,255,.88);
}
html[data-th-theme="ninja-blue"] .th-side-nav a:hover {
  color: #fff;
  background: rgba(255,255,255,.14);
}
html[data-th-theme="ninja-blue"] .th-side-nav a.active {
  color: #0073cf;
  background: #fff;
  font-weight: 700;
}
html[data-th-theme="ninja-blue"] .th-side-nav a.active::before {
  background: #0073cf;
}
html[data-th-theme="ninja-blue"] .th-mark {
  background: linear-gradient(145deg, #005a9e, #0086e6);
}
html[data-th-theme="ninja-blue"] .th-dev {
  color: #fff3bf;
  border-color: rgba(255,255,255,.45);
  background: rgba(230, 184, 0, 0.25);
}
html[data-th-theme="ninja-blue"] .th-shell {
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 12px 40px rgba(15, 40, 80, .08);
  border-color: var(--line);
}
html[data-th-theme="light"] .th-mark,
html[data-th-theme="light-gray"] .th-mark,
html[data-th-theme="pale-blue"] .th-mark {
  background: linear-gradient(145deg, #1d4ed8, #2563eb);
}
html[data-th-theme="light"] .bot-id .name,
html[data-th-theme="light-gray"] .bot-id .name,
html[data-th-theme="pale-blue"] .bot-id .name,
html[data-th-theme="medium-blue"] .bot-id .name,
html[data-th-theme="medium-gray"] .bot-id .name,
html[data-th-theme="ninja-blue"] .bot-id .name {
  color: var(--text) !important;
}

/* Timeframe text tabs (Hours Days Weeks Months Years) — above P&L cards */
.th-tf-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
  margin: 0 0 10px;
  padding: 0 2px;
}
.th-tf-tabs button {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-text, #60a5fa);
  cursor: pointer;
  letter-spacing: 0.01em;
  opacity: 0.72;
}
.th-tf-tabs button:hover { opacity: 1; color: var(--blue-text, #93c5fd); }
.th-tf-tabs button.on {
  opacity: 1;
  color: var(--blue-text, #93c5fd);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
html[data-th-theme="ninja-blue"] .th-tf-tabs button {
  color: #0073cf;
  opacity: 0.7;
}
html[data-th-theme="ninja-blue"] .th-tf-tabs button.on,
html[data-th-theme="ninja-blue"] .th-tf-tabs button:hover {
  opacity: 1;
  color: #005a9e;
}
html[data-th-theme="light"] .th-tf-tabs button,
html[data-th-theme="light-gray"] .th-tf-tabs button,
html[data-th-theme="pale-blue"] .th-tf-tabs button {
  color: #2563eb;
}

.th-pnl-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 160px;
  padding: 8px 4px 4px;
  border-radius: var(--radius-sm, 8px);
}
.th-pnl-bars .bar {
  flex: 1;
  min-width: 0;
  border-radius: 6px 6px 3px 3px;
  transition: height .18s ease, background .12s;
}
.th-pnl-bars .bar.pos { background: #22c55e; }
.th-pnl-bars .bar.neg { background: #ef4444; }
.th-pnl-wrap .th-card-h { margin-bottom: 6px; }
.th-pnl-block { margin: 0 0 14px; }


/* ——— Creative themes (shared names with DSG classic / dsg-theme) ——— */
html[data-th-theme="harbour-ink"] {
  --bg: #071218; --sidebar: #0a1820; --panel: #0e1f2a; --panel2: #0c1a24;
  --line: #1a3544; --line2: #274a5c; --text: #e6f2f6; --muted: #7a9aaa; --dim: #5a7a88;
  --green: #2fd6a0; --green-bg: #0a2820; --green-border: #1a5a48;
  --red: #e85d5d; --red-bg: #2a1218; --red-border: #5c2430;
  --blue: #2ec4b6; --blue-soft: rgba(46,196,182,.18); --blue-text: #7ee8dc; --orange: #c9a227;
}
html[data-th-theme="slate-steel"] {
  --bg: #3a4450; --sidebar: #44505c; --panel: #4e5a68; --panel2: #3f4a56;
  --line: #5e6c7c; --line2: #6e7e90; --text: #eef2f6; --muted: #b0bac6; --dim: #8e9aaa;
  --green: #4ecf8a; --green-bg: #1a3a28; --green-border: #2a6a48;
  --red: #e07878; --red-bg: #3a2020; --red-border: #6a3030;
  --blue: #7a9ec8; --blue-soft: rgba(122,158,200,.18); --blue-text: #b0c8e0; --orange: #d4b45a;
}
html[data-th-theme="graphite-gold"] {
  --bg: #141210; --sidebar: #1c1a16; --panel: #242018; --panel2: #1a1814;
  --line: #3a3428; --line2: #4a4234; --text: #f2ece0; --muted: #a89878; --dim: #7a7058;
  --green: #3ecf7a; --green-bg: #0f2818; --green-border: #1a5a38;
  --red: #e85d5d; --red-bg: #2a1218; --red-border: #5c2430;
  --blue: #8ab0d8; --blue-soft: rgba(138,176,216,.16); --blue-text: #c0d8f0; --orange: #e0b830;
}
html[data-th-theme="arctic-mist"] {
  --bg: #e8eef4; --sidebar: #f4f7fa; --panel: #ffffff; --panel2: #e0e8f0;
  --line: #c4d0dc; --line2: #a8b8c8; --text: #1a2838; --muted: #4a6078; --dim: #6a8098;
  --green: #1a8f55; --green-bg: #e6f7ee; --green-border: #8fd4b0;
  --red: #b03030; --red-bg: #fceceb; --red-border: #e8a8a0;
  --blue: #4a88b8; --blue-soft: rgba(74,136,184,.12); --blue-text: #1e5a9a; --orange: #9a7a28;
}
html[data-th-theme="forest-desk"] {
  --bg: #0a1210; --sidebar: #0e1a16; --panel: #13241e; --panel2: #0f1c18;
  --line: #1e3a30; --line2: #2a5040; --text: #e4f0e8; --muted: #7a9a88; --dim: #5a7a68;
  --green: #3ee08a; --green-bg: #0a2818; --green-border: #1a5a38;
  --red: #e85d5d; --red-bg: #2a1218; --red-border: #5c2430;
  --blue: #5ab890; --blue-soft: rgba(90,184,144,.16); --blue-text: #a0e0c0; --orange: #c9a227;
}
html[data-th-theme="ember-amber"] {
  --bg: #140c08; --sidebar: #1c120c; --panel: #261810; --panel2: #1a100c;
  --line: #3a2818; --line2: #4a3420; --text: #f6eee4; --muted: #b09070; --dim: #887058;
  --green: #4ecf7a; --green-bg: #1a2a18; --green-border: #2a5a38;
  --red: #e87060; --red-bg: #2a1410; --red-border: #5c2820;
  --blue: #88a8c8; --blue-soft: rgba(136,168,200,.14); --blue-text: #c0d4e8; --orange: #f0a830;
}
html[data-th-theme="violet-night"] {
  --bg: #0c0a18; --sidebar: #12102a; --panel: #1a1638; --panel2: #141228;
  --line: #2a2650; --line2: #3a3670; --text: #ece8f8; --muted: #9a90c0; --dim: #706898;
  --green: #4ed89a; --green-bg: #0a2818; --green-border: #1a5a38;
  --red: #e87890; --red-bg: #2a1218; --red-border: #5c2430;
  --blue: #8a7ae0; --blue-soft: rgba(138,122,224,.2); --blue-text: #c8c0f0; --orange: #e0c060;
}
html[data-th-theme="ocean-teal"] {
  --bg: #061416; --sidebar: #0a1c20; --panel: #0e282c; --panel2: #0a1e22;
  --line: #1a4048; --line2: #285860; --text: #e4f4f4; --muted: #78a8a8; --dim: #588888;
  --green: #3ee0a8; --green-bg: #0a2820; --green-border: #1a5a48;
  --red: #e87070; --red-bg: #2a1218; --red-border: #5c2430;
  --blue: #30b8c8; --blue-soft: rgba(48,184,200,.18); --blue-text: #90e0e8; --orange: #d4b050;
}
html[data-th-theme="sand-paper"] {
  --bg: #f0e8d8; --sidebar: #f8f2e6; --panel: #fffaf0; --panel2: #e8dcc8;
  --line: #d4c4a8; --line2: #c0ac88; --text: #2a2418; --muted: #6a5a40; --dim: #8a7858;
  --green: #2a8f48; --green-bg: #e8f5ee; --green-border: #9fd4b3;
  --red: #b03828; --red-bg: #f8eaea; --red-border: #e0a8a8;
  --blue: #4a7088; --blue-soft: rgba(74,112,136,.12); --blue-text: #2a4860; --orange: #a8841a;
}
html[data-th-theme="terminal-green"] {
  --bg: #060a08; --sidebar: #0a120e; --panel: #0e1a14; --panel2: #0a1410;
  --line: #1a3024; --line2: #284838; --text: #d8f0dc; --muted: #689880; --dim: #487060;
  --green: #40e880; --green-bg: #0a2818; --green-border: #1a5a38;
  --red: #e06060; --red-bg: #2a1218; --red-border: #5c2430;
  --blue: #48c888; --blue-soft: rgba(72,200,136,.16); --blue-text: #90e0b0; --orange: #a8c860;
}

html[data-th-theme="camera-navy"] {
  --bg: #0f172a; --sidebar: #0b1220; --panel: #1e293b; --panel2: #162032;
  --line: #334155; --line2: #475569; --text: #f1f5f9; --muted: #94a3b8; --dim: #64748b;
  --green: #34d399; --green-bg: #0a2818; --green-border: #1a5a38;
  --red: #f87171; --red-bg: #2a1218; --red-border: #5c2430;
  --blue: #2563eb; --blue-soft: rgba(37,99,235,.16); --blue-text: #93c5fd; --orange: #f59e0b;
}


/* Light-ish themes: readable names on cards */
html[data-th-theme="arctic-mist"] .bot-id .name,
html[data-th-theme="sand-paper"] .bot-id .name,
html[data-th-theme="arctic-mist"] .th-page-head h1,
html[data-th-theme="sand-paper"] .th-page-head h1 { color: var(--text) !important; }

/* Look switcher chip */
.look-switch {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding: 8px 10px; margin: 8px 0 4px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel2, var(--panel));
}
.look-switch .look-k {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.look-switch a {
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); text-decoration: none;
}
.look-switch a:hover { color: var(--text); border-color: var(--line2); }
.look-switch a.on {
  color: #fff; background: var(--blue, #2563eb); border-color: transparent;
}
html[data-th-theme="arctic-mist"] .look-switch a.on,
html[data-th-theme="sand-paper"] .look-switch a.on,
html[data-th-theme="light"] .look-switch a.on,
html[data-th-theme="light-gray"] .look-switch a.on,
html[data-th-theme="pale-blue"] .look-switch a.on {
  color: #fff;
}

/* Shared Theme | Background | Layout row in Harbour head */
.th-head-controls .theme-bg-row{
  display:inline-flex;align-items:center;gap:12px;flex-wrap:nowrap;margin-left:auto;
}
.th-head-controls .theme-bg-row .theme-switch,
.th-head-controls .theme-bg-row .bg-switch,
.th-head-controls .theme-bg-row .layout-switch{
  display:inline-flex;align-items:center;gap:6px;
}
.th-head-controls .theme-bg-row .theme-label,
.th-head-controls .theme-bg-row .layout-k{
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#94a3b8);
}


/* Keep Width visible inside shared chrome row — never hide it */
.th-head-controls{
  flex-wrap:wrap;
  gap:10px;
}
.th-head-controls .theme-bg-row{
  flex-wrap:wrap;
  max-width:100%;
}
.th-head-controls .theme-bg-row .width-switch,
.th-head-controls .theme-bg-row .width-ctl{
  display:inline-flex !important;
  align-items:center;
  gap:6px;
  visibility:visible !important;
  opacity:1 !important;
}
.th-head-controls .width-ctl{
  display:inline-flex !important;
  visibility:visible !important;
}


/* Width always far right in the four-control chrome row */
.theme-bg-row{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap}
.theme-bg-row .theme-switch:not(.bg-switch){order:1}
.theme-bg-row .bg-switch{order:2}
.theme-bg-row .layout-switch{order:3}
.theme-bg-row .width-switch,
.theme-bg-row .width-ctl{order:4;margin-left:0}

/* Trading farm performers right */
.th-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.th-head-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}

/* farm-performers-label right pin */
.th-page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.th-page-head > .farm-performers-label { margin-left:auto; flex-shrink:0; color:var(--blue-text,#60a5fa); }
.th-head-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }