:root{
    --bg:#0b1220; --panel:#0f1a2e; --panel2:#0c1629; --border:#1c2a44;
    --text:#e6edf7; --muted:#9fb0c8; --accent:#7aa2ff; --good:#4ade80; --bad:#fb7185; --warn:#fbbf24;
    --chip:#111f36; --shadow:0 10px 30px rgba(0,0,0,.25); --radius:14px;
    --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --sans:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);background:linear-gradient(180deg,#081022 0%,#070d18 100%);color:var(--text)}
a{color:inherit;text-decoration:none}
.layout{display:grid;grid-template-columns:270px 1fr;min-height:100vh}
.sidebar{background:rgba(10,18,34,.7);backdrop-filter:blur(10px);border-right:1px solid var(--border);padding:18px 14px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:10px;padding:10px 10px 14px;border-bottom:1px solid var(--border);margin-bottom:12px}
.logo{width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#4f46e5,#22d3ee);box-shadow:var(--shadow)}
.brand h1{font-size:14px;margin:0;letter-spacing:.3px}
.badge{font-size:11px;padding:3px 8px;border-radius:999px;background:var(--chip);border:1px solid var(--border);color:var(--muted)}
.nav{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:12px;color:var(--muted);border:1px solid transparent}
.nav a:hover{background:rgba(122,162,255,.08);border-color:rgba(122,162,255,.25);color:var(--text)}
.nav a.active{background:rgba(122,162,255,.12);border-color:rgba(122,162,255,.35);color:var(--text)}
.nav .section{margin:14px 10px 6px;color:rgba(159,176,200,.75);font-size:11px;text-transform:uppercase;letter-spacing:.12em}

.main{padding:18px 18px 40px}
.topbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:space-between;padding:12px 14px;background:rgba(15,26,46,.75);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.top-left,.top-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ctrl{display:flex;align-items:center;gap:8px;background:rgba(12,22,41,.7);border:1px solid var(--border);border-radius:12px;padding:8px 10px}
label{font-size:11px;color:var(--muted)}
select,input{background:transparent;border:0;outline:none;color:var(--text);font-size:13px}
select option{background:#0b1220}
.toggle{display:flex;align-items:center;gap:8px}
.toggle input{width:36px;height:20px;appearance:none;background:#14243f;border:1px solid var(--border);border-radius:999px;position:relative;cursor:pointer}
.toggle input:checked{background:rgba(74,222,128,.18);border-color:rgba(74,222,128,.35)}
.toggle input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:999px;background:#8aa0c9;transition:all .15s ease}
.toggle input:checked::after{left:18px;background:var(--good)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(12,22,41,.7);border:1px solid var(--border);color:var(--muted);font-size:12px}
.dot{width:8px;height:8px;border-radius:999px;background:var(--muted);display:inline-block}
.dot.good{background:var(--good)}
.dot.bad{background:var(--bad)}
.dot.warn{background:var(--warn)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;border:1px solid rgba(122,162,255,.35);background:rgba(122,162,255,.12);color:var(--text);cursor:pointer;font-size:13px}
.btn:hover{background:rgba(122,162,255,.18)}
.btn.secondary{border-color:var(--border);background:rgba(12,22,41,.7);color:var(--muted)}
.btn.secondary:hover{background:rgba(12,22,41,.9);color:var(--text)}
.grid{display:grid;grid-template-columns:1.45fr .55fr;gap:14px;margin-top:14px}
.card{background:rgba(15,26,46,.75);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card h2{margin:0;font-size:13px;color:rgba(230,237,247,.92);letter-spacing:.2px}
.card .hd{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);gap:10px;flex-wrap:wrap}
.card .bd{padding:12px 14px}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.small{font-size:12px}
.hint{font-size:11px;color:rgba(159,176,200,.8)}
.filters{display:grid;grid-template-columns:1fr 1fr 180px 180px;gap:10px;align-items:end}
.filters .ctrl{width:100%}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:separate;border-spacing:0 8px}
th{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:rgba(159,176,200,.75);text-align:left;padding:0 8px}
td{padding:10px 8px;background:rgba(12,22,41,.75);border-top:1px solid rgba(28,42,68,.9);border-bottom:1px solid rgba(28,42,68,.9);vertical-align:top}
tr td:first-child{border-left:1px solid rgba(28,42,68,.9);border-top-left-radius:12px;border-bottom-left-radius:12px}
tr td:last-child{border-right:1px solid rgba(28,42,68,.9);border-top-right-radius:12px;border-bottom-right-radius:12px}
tr[data-idx]{cursor:pointer}
tr[data-idx]:hover td{background:rgba(18,30,52,.96)}
.tag{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:rgba(122,162,255,.12);border:1px solid rgba(122,162,255,.25);color:rgba(230,237,247,.92);font-size:12px;margin:2px 6px 2px 0;white-space:nowrap}
.tag.good{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.25)}
.tag.bad{background:rgba(251,113,133,.12);border-color:rgba(251,113,133,.25)}
.tag.warn{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.25)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  background:rgba(12,22,41,.7);border:1px solid var(--border);color:var(--muted);font-size:11px
}
.chip.warn{border-color:rgba(251,191,36,.3);color:#fde68a;background:rgba(120,53,15,.22)}
.signal-chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  border:1px solid rgba(148,163,184,.2);font-size:11px;line-height:1
}
.signal-chip--synthetic{color:#fde68a;border-color:rgba(245,158,11,.3);background:rgba(120,53,15,.22)}
.signal-chip--degraded{color:#fef08a;border-color:rgba(251,191,36,.34);background:rgba(113,63,18,.24)}
.signal-chip--risk-off{color:#fca5a5;border-color:rgba(239,68,68,.3);background:rgba(127,29,29,.22)}
.link{color:rgba(122,162,255,.95)}
.link:hover{text-decoration:underline}
.tv-tab-btn.active{
  border-color: rgba(122,162,255,.45);
  background: rgba(122,162,255,.2);
  color: var(--text);
}
[data-tab-group][data-tab-pane]{display:none}
[data-tab-group][data-tab-pane].active{display:block}
.ml-page .card .hd h2{font-size:12px !important;letter-spacing:.08em !important}
.ml-page .card .bd{padding:10px 11px !important}
.ml-page .kpi .val{font-size:16px !important}
.ml-page table td{font-size:11px !important}
.chart-wrap{height:420px}
.kpi{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kpi .box{padding:10px;border-radius:12px;background:rgba(12,22,41,.75);border:1px solid rgba(28,42,68,.9)}
.kpi .val{font-size:18px;font-weight:650}
.kpi .sub{font-size:11px;color:var(--muted);margin-top:4px}
.refs{display:flex;flex-direction:column;gap:8px}
.ref{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border-radius:12px;background:rgba(12,22,41,.75);border:1px solid rgba(28,42,68,.9)}
.ref .k{font-size:12px;color:rgba(159,176,200,.85)}
.ref .v{font-family:var(--mono);font-size:12px;color:rgba(230,237,247,.9);word-break:break-all;text-align:right}
.divider{height:1px;background:rgba(28,42,68,.9);margin:10px 0}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:18px;z-index:100}
.modal.open{display:flex}
.modal .inner{width:min(980px, 100%);max-height:85vh;overflow:auto;background:#071022;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
.modal .inner .mh{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);gap:10px;flex-wrap:wrap}
.modal pre{margin:0;padding:14px;font-family:var(--mono);font-size:12px;white-space:pre-wrap;word-break:break-word;color:#dbe7ff}
.empty-state{padding:18px;border:1px dashed rgba(28,42,68,.9);border-radius:12px;color:var(--muted);background:rgba(12,22,41,.45)}
@media (max-width:1200px){.grid{grid-template-columns:1fr}.filters{grid-template-columns:1fr 1fr}}
.ml-grid{display:grid;grid-template-columns:1.45fr .55fr;gap:14px;margin-top:14px}
.ml-main,.ml-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.ml-main > .card,.ml-side > .card{margin:0}
.card + .card{margin-top:0}
.chart-wrap{margin-top:6px}
.table-wrap{margin-top:4px}

@media (max-width:1200px){
  .ml-grid{grid-template-columns:1fr}
}
/* explicit vertical spacing for ml cards */
.ml-page .ml-grid{gap:18px !important;margin-top:18px !important}
.ml-page .ml-main,.ml-page .ml-side{display:flex;flex-direction:column;min-width:0}
.ml-page .ml-main > .card,.ml-page .ml-side > .card{margin:0 0 18px 0 !important}
.ml-page .ml-main > .card:last-child,.ml-page .ml-side > .card:last-child{margin-bottom:0 !important}
.ml-page .chart-wrap{margin-top:10px}
.ml-page .table-wrap{margin-top:8px}
/* force visible vertical spacing between ml sections */
.ml-page .ml-main > section.card + section.card,
.ml-page .ml-side > section.card + section.card {
  margin-top: 24px !important;
}
.ml-page {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ml-page .ml-grid {
  margin-top: 0 !important;
}

.ml-page .ml-block + .ml-block {
  margin-top: 42px !important;
}

.ml-page .ml-side .ml-block + .ml-block {
  margin-top: 32px !important;
}


.ml-page .ml-block {
  position: relative;
}

.ml-page .ml-main {
  gap: 0 !important;
}

.ml-page .ml-side {
  gap: 0 !important;
}




/* unified header spacing */
.ml-page {
  gap: var(--page-gap) !important;
}

.ml-page .page-title,
.ml-page .page-subtitle {
  margin: 0 !important;
}

.ml-page .ml-grid {
  margin-top: 0 !important;
  gap: var(--page-gap) !important;
}

.ml-page .ml-main,
.ml-page .ml-side {
  gap: var(--page-gap) !important;
}

.ml-page .ml-main > .card,
.ml-page .ml-side > .card,
.ml-page .ml-block + .ml-block,
.ml-page .ml-side .ml-block + .ml-block {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ml spacing normalization */
.ml-page {
  gap: var(--section-gap) !important;
}

.ml-page > .page-head,
.ml-page > .unified-page-head {
  margin-bottom: var(--section-gap) !important;
}

.ml-page .page-title,
.ml-page .page-subtitle {
  margin: 0 !important;
}

.ml-page .ml-grid {
  margin-top: 0 !important;
  gap: var(--section-gap) !important;
}

.ml-page .ml-main,
.ml-page .ml-side {
  gap: var(--section-gap) !important;
}

.ml-page .ml-main > .card,
.ml-page .ml-side > .card,
.ml-page .ml-main > section.card + section.card,
.ml-page .ml-side > section.card + section.card,
.ml-page .ml-block + .ml-block,
.ml-page .ml-side .ml-block + .ml-block {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.ml-page .chart-wrap,
.ml-page .table-wrap,
.ml-page #featBox {
  margin-top: var(--content-gap) !important;
}


/* unified type rhythm */
.ml-page .page-title {
  font-size: 18px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
}

.ml-page .page-subtitle {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.ml-page .card .hd h2,
.ml-page .card h2 {
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: 0.045em !important;
}

.ml-page .card .bd,
.ml-page .card .body,
.ml-page table,
.ml-page td,
.ml-page .kpi .v,
.ml-page .ref .v {
  font-size: 13px !important;
}

.ml-page th,
.ml-page .hint,
.ml-page .small,
.ml-page .kpi .sub,
.ml-page .ref .k {
  font-size: 11px !important;
}


.ml-chart-note {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(122, 162, 255, 0.14);
  background: linear-gradient(180deg, rgba(10, 20, 38, 0.82), rgba(8, 16, 33, 0.92));
}

.ml-chart-note .hint {
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.ml-page .chart-wrap {
  height: 460px;
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(167, 139, 250, 0.14);
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(139, 92, 246, 0.11), transparent 55%),
    radial-gradient(circle at 8% 92%, rgba(34, 211, 238, 0.07), transparent 40%),
    linear-gradient(165deg, rgba(12, 22, 42, 0.98) 0%, rgba(6, 12, 26, 1) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 48px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.ml-page .chart-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  z-index: 0;
}

.ml-page .chart-wrap > * {
  position: relative;
  z-index: 1;
}

.ml-chart-legend {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(167, 139, 250, 0.12);
  background: rgba(10, 18, 36, 0.65);
  font-size: 12px;
  color: var(--muted);
}

.ml-leg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ml-leg-swatch {
  width: 22px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.ml-leg-candle {
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.85), rgba(244, 63, 94, 0.85));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.ml-leg-dir-up {
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.95), rgba(34, 197, 94, 0.55));
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.35);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  height: 12px;
}

.ml-leg-dir-down {
  background: linear-gradient(180deg, rgba(251, 113, 133, 0.55), rgba(244, 63, 94, 0.95));
  box-shadow: 0 0 0 1px rgba(251, 113, 133, 0.35);
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  height: 12px;
}

.ml-leg-dir-flat {
  background: radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.95), rgba(251, 191, 36, 0.35));
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.4);
  border-radius: 999px;
  height: 10px;
}

@media (max-width: 820px) {
  .ml-page .chart-wrap {
    height: 360px;
  }
}

/* ── ML hero: chart left + forecast table right (reference layout) ── */
.ml-hero {
  margin-top: 0;
}
.ml-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: 0;
  align-items: stretch;
  min-height: 0;
}
@media (max-width: 1100px) {
  .ml-hero-grid {
    grid-template-columns: 1fr;
  }
  .ml-forecast-aside {
    border-top: 1px solid var(--border);
  }
}
.ml-chart-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--border);
}
@media (max-width: 1100px) {
  .ml-chart-column {
    border-right: 0;
  }
}
.ml-chart-hd {
  flex-wrap: wrap;
  align-items: flex-start !important;
  gap: 12px !important;
}
.ml-overlay-title {
  margin: 0 0 4px 0;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  color: var(--text) !important;
}
.ml-pair-line {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.ml-chart-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ml-range-group {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.ml-range-btn {
  padding: 6px 12px !important;
  font-size: 12px !important;
  min-width: 44px;
}
.ml-range-btn.active {
  border-color: rgba(167, 139, 250, 0.5) !important;
  background: rgba(139, 92, 246, 0.2) !important;
  color: var(--text) !important;
}
.chart-wrap--hero {
  height: min(52vh, 560px) !important;
  min-height: 380px;
  position: relative;
}
.chart-wrap--hero > #chart {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ml-signal-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  height: 100%;
  max-height: 100%;
}
.ml-vline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(
    180deg,
    rgba(168, 85, 247, 0.95) 0%,
    rgba(168, 85, 247, 0.35) 45%,
    rgba(168, 85, 247, 0.2) 100%
  );
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.35);
}
.ml-signal-badge {
  position: absolute;
  transform: translateX(-50%);
  top: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}
.ml-signal-icon {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(145deg, #a855f7, #7c3aed);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.45);
}
.ml-signal-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e9d5ff;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.ml-chart-tooltip {
  position: absolute;
  z-index: 5;
  min-width: 160px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(167, 139, 250, 0.35);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
  pointer-events: none;
}
.ml-chart-tooltip .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.ml-chart-tooltip .k {
  color: var(--muted);
}
.ml-chart-tooltip .mono {
  font-family: var(--mono);
}
.ml-chart-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(28, 42, 68, 0.85);
}
.ml-forecast-aside {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgba(12, 22, 41, 0.4);
}
.ml-forecast-aside .hd {
  flex-shrink: 0;
}
.ml-forecast-aside .bd {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.table-wrap--forecast {
  flex: 1;
  max-height: min(52vh, 560px);
  margin-top: 0 !important;
  overflow: auto;
}
.ml-forecast-aside table {
  border-spacing: 0 4px;
}
.ml-forecast-aside th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(15, 26, 46, 0.98);
  padding: 8px 6px !important;
}
.ml-forecast-aside td {
  padding: 8px 6px !important;
  font-size: 11px !important;
}
.col-err-pct.good {
  color: var(--good);
}
.col-err-pct.bad {
  color: var(--bad);
}