:root {
  color-scheme: dark;
  --bg: #050b10;
  --surface: #09131a;
  --surface-2: #0c1820;
  --surface-3: #10212a;
  --line: #1b3440;
  --line-strong: #315160;
  --text: #edf7fa;
  --muted: #8299a3;
  --dim: #526872;
  --cyan: #21d5df;
  --cyan-soft: rgba(33, 213, 223, .12);
  --green: #48d692;
  --green-soft: rgba(72, 214, 146, .12);
  --red: #ff5f76;
  --red-soft: rgba(255, 95, 118, .12);
  --amber: #ffc44d;
  --amber-soft: rgba(255, 196, 77, .12);
  --violet: #b879ff;
  --violet-soft: rgba(184, 121, 255, .12);
  --blue: #57a8ff;
  --radius: 8px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
}

* { box-sizing: border-box; }

html { min-width: 360px; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 15% -15%, rgba(29, 104, 124, .18), transparent 26%),
    linear-gradient(180deg, #050b10 0%, #071015 100%);
}

button, input { font: inherit; }

button {
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: #0c1921;
  cursor: pointer;
  font-weight: 750;
  transition: border-color .15s, background .15s, color .15s;
}

button:hover { border-color: var(--line-strong); }
button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(350px, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 64px;
  width: 100%;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(4, 10, 14, .94);
  backdrop-filter: blur(14px);
}

.brand-group, .feed-health, .top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.brand {
  white-space: nowrap;
  font-size: 1.24rem;
  letter-spacing: -.02em;
}

.account-pill, .status-pill, .feed-chip, .quality {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 25px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  white-space: nowrap;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .05em;
}

.account-pill { color: var(--green); border-color: rgba(72, 214, 146, .45); }
.status-pill::before, .feed-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.status-pill.on { color: var(--green); border-color: rgba(72, 214, 146, .42); }
.status-pill.on::before, .feed-chip.on::before { background: var(--green); box-shadow: 0 0 8px rgba(72, 214, 146, .6); }
.status-pill.off, .feed-chip.off { color: var(--red); border-color: rgba(255, 95, 118, .35); }
.status-pill.off::before, .feed-chip.off::before { background: var(--red); }
.feed-health { justify-content: center; overflow: hidden; }
.feed-chip { color: var(--muted); }

.top-actions { justify-content: flex-end; }
.top-actions time { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.top-actions form { margin: 0; }

.auto-button, .danger-button, .ghost-button {
  min-height: 35px;
  padding: 7px 12px;
}

.auto-button {
  color: var(--red);
  border-color: rgba(255, 95, 118, .48);
  background: var(--red-soft);
}

.auto-button.on {
  color: #042316;
  border-color: var(--green);
  background: var(--green);
}

.danger-button { color: var(--red); border-color: rgba(255, 95, 118, .48); background: transparent; }
.ghost-button { color: var(--muted); background: transparent; }

.dashboard {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 10px 12px 32px;
}

.panel, .kpi-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(12, 25, 33, .97), rgba(7, 17, 23, .97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
}

.latency-strip {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(800px, 3fr) minmax(260px, .8fr);
  align-items: stretch;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 9px;
}

.latency-route {
  display: grid;
  grid-template-columns: auto 25px auto 1fr;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.route-node {
  padding: 8px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--cyan);
  background: var(--cyan-soft);
  white-space: nowrap;
  font-size: .7rem;
  font-weight: 850;
}

.route-arrow { color: var(--green); text-align: center; font-size: 1.15rem; }
.latency-route h1 { margin: 0; font-size: .9rem; }
.latency-route p { margin: 3px 0 0; color: var(--muted); font-size: .68rem; }

.latency-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(105px, 1fr));
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.latency-metrics article {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  padding: 6px 10px;
  border-right: 1px solid var(--line);
}

.latency-metrics article:last-child { border-right: 0; }
.latency-metrics span, .latency-trend span { color: var(--muted); font-size: .68rem; }
.latency-metrics strong { color: var(--green); font-size: 1.18rem; font-variant-numeric: tabular-nums; }
.latency-metrics small { color: var(--amber); font-size: .65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.latency-trend { min-width: 0; padding: 3px 4px 0; }
.trend-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.latency-chart { width: 100%; height: 52px; margin-top: 3px; overflow: hidden; }

.quality { min-height: 21px; padding: 2px 6px; letter-spacing: 0; }
.quality.good { color: var(--green); border-color: rgba(72, 214, 146, .4); background: var(--green-soft); }
.quality.warn { color: var(--amber); border-color: rgba(255, 196, 77, .4); background: var(--amber-soft); }
.quality.bad { color: var(--red); border-color: rgba(255, 95, 118, .4); background: var(--red-soft); }
.quality.neutral { color: var(--muted); }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(125px, 1fr));
  gap: 8px;
  margin-bottom: 9px;
}

.kpi-card {
  min-width: 0;
  padding: 11px 13px;
}

.kpi-card > span {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .04em;
}

.kpi-card strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.48rem;
  font-variant-numeric: tabular-nums;
}

.kpi-card small { display: block; margin-top: 2px; color: var(--dim); font-size: .65rem; }
.positive { color: var(--green) !important; }
.negative { color: var(--red) !important; }
.warning { color: var(--amber) !important; }
.muted { color: var(--muted) !important; }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 2.35fr) minmax(410px, 1fr);
  align-items: start;
  gap: 9px;
}

.chart-stack, .side-stack { display: grid; gap: 9px; min-width: 0; }
.chart-panel { min-width: 0; padding: 10px 12px 8px; }
.price-panel { height: 440px; }
.probability-panel { height: 265px; }
.equity-panel { height: 260px; }

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
}

.panel-heading.compact { min-height: 28px; align-items: center; }
.panel-heading h2 { margin: 0; font-size: .88rem; letter-spacing: .025em; }
.panel-heading p { margin: 3px 0 0; color: var(--muted); font-size: .67rem; }

.legend, .live-readout, .session-summary, .range-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: .68rem;
}

.legend span::before { content: ""; display: inline-block; width: 16px; height: 2px; margin-right: 5px; vertical-align: middle; background: currentColor; }
.legend-chainlink { color: var(--cyan); }
.legend-gains { color: var(--green); }
.legend-ostium { color: var(--amber); }
.legend-prediction { color: var(--violet); }
.legend-target { color: var(--amber); }
.live-readout strong { color: var(--text); }

.chart-panel .chart-host {
  display: block;
  width: 100%;
  height: calc(100% - 48px);
  overflow: hidden;
  border-radius: 4px;
}

.chart-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  height: 17px;
  color: var(--dim);
  font-size: .63rem;
}

.price-panel .chart-host { height: calc(100% - 65px); }
.range-control { gap: 4px; }
.range-control button { min-width: 42px; padding: 4px 8px; color: var(--muted); font-size: .68rem; }
.range-control button.active { color: var(--cyan); border-color: var(--cyan); background: var(--cyan-soft); }
.chart-tools { display: flex; align-items: center; gap: 4px; }
.chart-tools button { padding: 4px 7px; color: var(--muted); white-space: nowrap; font-size: .65rem; }
.chart-tools button:hover, .chart-tools button.active { color: var(--cyan); border-color: var(--cyan); background: var(--cyan-soft); }

.side-stack .panel { min-width: 0; padding: 10px; }
.decision-panel { min-height: 270px; }
.strategy-panel { min-height: 188px; }
.risk-panel { min-height: 245px; }
.orders-panel { min-height: 220px; }
.actions-panel { min-height: 205px; }

.decision-steps { display: grid; gap: 3px; margin: 8px 0; padding: 0; list-style: none; }
.decision-steps li { display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 5px; background: rgba(255, 255, 255, .018); }
.decision-steps li > span { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); font-weight: 800; font-size: .72rem; }
.decision-steps li div { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.decision-steps strong { font-size: .74rem; }
.decision-steps small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; }
.decision-steps li.pass > span { color: #03150d; border-color: var(--green); background: var(--green); }
.decision-steps li.fail > span { color: #21040a; border-color: var(--red); background: var(--red); }
.decision-steps li.wait > span { color: #221b05; border-color: var(--amber); background: var(--amber); }

.decision-result { display: grid; place-items: center; padding: 9px; border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(255, 255, 255, .018); text-align: center; }
.decision-result span { color: var(--muted); font-size: .68rem; }
.decision-result strong { color: var(--amber); font-size: 1.35rem; }
.decision-result p { margin: 2px 0 0; color: var(--muted); font-size: .68rem; }

.role-row { display: grid; grid-template-columns: 55px 1fr auto; align-items: center; gap: 8px; margin-top: 6px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 5px; }
.role-row span, .role-row small { color: var(--muted); font-size: .67rem; }
.role-row strong { font-size: .8rem; }
.role-row.maker strong { color: var(--green); }
.role-row.maker-sell strong { color: var(--amber); }
.role-row.taker strong { color: var(--red); }
.strategy-warning { margin: 7px 0 0; padding: 6px 7px; border-left: 2px solid var(--amber); color: var(--amber); background: var(--amber-soft); font-size: .66rem; line-height: 1.35; }
.info-dot { color: var(--muted); cursor: help; }

.position-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 7px 0; }
.position-card { padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 255, 255, .018); }
.position-card span { color: var(--muted); font-size: .67rem; }
.position-card strong { display: block; margin: 2px 0; font-size: 1.08rem; }
.position-card small { display: block; color: var(--muted); font-size: .64rem; }
.position-card.up strong { color: var(--green); }
.position-card.down strong { color: var(--red); }
.risk-meter { margin-top: 7px; }
.risk-meter > div { display: flex; justify-content: space-between; gap: 10px; font-size: .67rem; }
.risk-meter span { color: var(--muted); }
.risk-meter progress { width: 100%; height: 7px; overflow: hidden; border: 0; border-radius: 9px; background: var(--surface-3); }
progress::-webkit-progress-bar { border-radius: 9px; background: var(--surface-3); }
progress::-webkit-progress-value { border-radius: 9px; background: var(--cyan); }
#riskProgress::-webkit-progress-value { background: var(--red); }
.rule-list { display: grid; grid-template-columns: 1fr; gap: 3px; margin: 8px 0 0; padding: 0; color: var(--muted); list-style: none; font-size: .64rem; }
.rule-list li::before { content: "•"; margin-right: 5px; color: var(--amber); }

.table-wrap { width: 100%; overflow: auto; }
.table-wrap.short { max-height: 170px; }
table { width: 100%; border-collapse: collapse; font-size: .68rem; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 7px; border-bottom: 1px solid rgba(27, 52, 64, .72); text-align: left; white-space: nowrap; }
th { position: sticky; z-index: 2; top: 0; color: var(--muted); background: #0b171e; font-size: .62rem; font-weight: 750; letter-spacing: .03em; }
tbody tr:hover { background: rgba(33, 213, 223, .035); }
.role-badge { display: inline-flex; padding: 2px 5px; border: 1px solid; border-radius: 4px; font-size: .6rem; font-weight: 850; }
.role-badge.maker { color: var(--amber); border-color: rgba(255, 196, 77, .5); background: var(--amber-soft); }
.role-badge.taker { color: var(--green); border-color: rgba(72, 214, 146, .5); background: var(--green-soft); }
.status-text.live { color: var(--amber); }
.status-text.matched, .status-text.confirmed { color: var(--green); }
.status-text.canceled { color: var(--muted); }
.empty { color: var(--dim); text-align: center; }

.action-list { display: grid; gap: 4px; max-height: 170px; margin-top: 5px; overflow: auto; }
.action-item { display: grid; grid-template-columns: 72px 82px minmax(0, 1fr); gap: 7px; align-items: center; padding: 4px 5px; border-bottom: 1px solid rgba(27, 52, 64, .5); font-size: .65rem; }
.action-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.action-kind { overflow: hidden; color: var(--violet); text-overflow: ellipsis; white-space: nowrap; font-weight: 750; }
.action-reason { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }

.sessions-panel { margin-top: 9px; padding: 10px 12px; }
.sessions-table-wrap { max-height: 420px; }
.sessions-table tbody tr { cursor: pointer; }
.sessions-table tbody tr.selected { background: var(--cyan-soft); box-shadow: inset 2px 0 var(--cyan); }
.session-summary span { padding: 4px 7px; border: 1px solid var(--line); border-radius: 5px; }
.session-summary strong { color: var(--text); }

.chart-tooltip {
  position: fixed;
  z-index: 50;
  display: none;
  max-width: 260px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--text);
  background: rgba(5, 13, 18, .96);
  box-shadow: 0 10px 35px rgba(0, 0, 0, .4);
  pointer-events: none;
  white-space: pre-line;
  font-size: .68rem;
  line-height: 1.55;
}

#toast {
  position: fixed;
  z-index: 60;
  right: 18px;
  bottom: 18px;
  max-width: min(420px, calc(100vw - 36px));
  padding: 10px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  color: var(--text);
  background: #11232c;
  opacity: 0;
  transform: translateY(8px);
  transition: .18s;
  pointer-events: none;
}

#toast.show { opacity: 1; transform: none; }

.login-body { display: grid; min-height: 100vh; place-items: center; padding: 16px; }
.login-card { width: min(420px, 100%); padding: 34px; border: 1px solid var(--line); border-radius: 15px; background: rgba(9, 23, 31, .96); box-shadow: 0 30px 100px rgba(0, 0, 0, .45); }
.brand-mark { display: grid; width: 48px; height: 48px; margin-bottom: 20px; place-items: center; border-radius: 12px; color: #021114; background: linear-gradient(135deg, var(--cyan), var(--blue)); font-weight: 900; }
.login-card h1 { margin: 0 0 6px; font-size: 1.45rem; }
.login-card p { color: var(--muted); }
.login-card form { display: grid; gap: 15px; margin-top: 24px; }
.login-card label { display: grid; gap: 6px; color: var(--muted); font-size: .8rem; }
.login-card input { width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: #071217; font-size: 1rem; }
.wide { width: 100%; padding: 11px; color: #031419; border-color: var(--cyan); background: var(--cyan); }
.error { color: var(--red) !important; }

@media (min-width: 2200px) {
  :root { font-size: 16px; }
  .price-panel { height: 520px; }
  .probability-panel { height: 310px; }
  .equity-panel { height: 300px; }
  .workspace { grid-template-columns: minmax(0, 2.6fr) minmax(500px, 1fr); }
}

@media (max-width: 1550px) {
  .topbar { grid-template-columns: 1fr auto; }
  .feed-health { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .latency-strip { grid-template-columns: 1fr; }
  .latency-route { grid-template-columns: auto 25px auto 1fr; }
  .kpi-grid { grid-template-columns: repeat(4, minmax(135px, 1fr)); }
  .workspace { grid-template-columns: minmax(0, 1.8fr) minmax(390px, 1fr); }
}

@media (max-width: 1180px) {
  .workspace { grid-template-columns: 1fr; }
  .side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actions-panel { grid-column: 1 / -1; }
  .latency-metrics { grid-template-columns: repeat(3, 1fr); }
  .latency-metrics article:nth-child(3) { border-right: 0; }
  .latency-metrics article:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 760px) {
  :root { font-size: 13px; }
  .topbar { position: relative; grid-template-columns: 1fr; padding: 10px; }
  .top-actions { justify-content: flex-start; flex-wrap: wrap; }
  .feed-health { grid-column: auto; flex-wrap: wrap; }
  .dashboard { padding: 8px; }
  .latency-route { grid-template-columns: auto 20px auto; }
  .latency-route div { grid-column: 1 / -1; }
  .latency-metrics { grid-template-columns: repeat(2, 1fr); }
  .latency-metrics article { border-bottom: 1px solid var(--line); }
  .latency-metrics article:nth-child(2n) { border-right: 0; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .side-stack { grid-template-columns: 1fr; }
  .actions-panel { grid-column: auto; }
  .price-panel { height: 390px; }
  .probability-panel, .equity-panel { height: 260px; }
  .panel-heading { flex-direction: column; }
  .legend, .live-readout, .session-summary { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}