:root {
  --bg: #080b0e;
  --panel: #10161b;
  --panel-2: #131b22;
  --line: #26323a;
  --text: #eef5f1;
  --muted: #8fa09a;
  --green: #32d77d;
  --red: #ff5a68;
  --amber: #ffbf47;
  --purple: #b485ff;
  --orange: #ff8a3d;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

button,
input {
  font: inherit;
}

.topbar {
  height: 58px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: #0b1014;
}

.brand {
  font-weight: 800;
  letter-spacing: 0.08em;
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.top-nav a {
  flex: 0 0 auto;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.top-nav a.active,
.top-nav a:hover {
  color: var(--text);
  border-color: #375048;
  background: #14201b;
}

.status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  white-space: nowrap;
}

.alert-toggle {
  border: 1px solid rgba(50, 215, 125, 0.55);
  border-radius: 6px;
  background: #14231b;
  color: var(--green);
  cursor: pointer;
  padding: 5px 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 800;
}

.alert-toggle.off {
  border-color: rgba(143, 160, 154, 0.3);
  background: #121a20;
  color: var(--muted);
}

.alert-toggle.armed {
  border-color: rgba(255, 191, 71, 0.65);
  background: #261f10;
  color: var(--amber);
}

#restStatus {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
}

.alert-toast {
  position: fixed;
  top: 70px;
  right: 18px;
  z-index: 50;
  max-width: min(420px, calc(100vw - 36px));
  border: 1px solid rgba(50, 215, 125, 0.58);
  border-left: 4px solid var(--green);
  border-radius: 8px;
  background: #101a15;
  color: var(--text);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 800;
}

#restStatus.ok {
  color: var(--green);
  border-color: rgba(50, 215, 125, 0.5);
}

#restStatus.err {
  color: var(--red);
  border-color: rgba(255, 90, 104, 0.55);
}

#restStatus.loading {
  color: var(--amber);
  border-color: rgba(255, 191, 71, 0.5);
}

.controlbar {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--line);
  background: #0d1317;
  overflow-x: auto;
}

.controlbar button,
.controlbar input {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #121a20;
  color: var(--text);
  min-height: 34px;
  padding: 7px 10px;
}

.controlbar button {
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.controlbar button:hover,
.controlbar button.active {
  border-color: rgba(50, 215, 125, 0.65);
  background: #14231b;
}

.controlbar input {
  width: 116px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

#stamp {
  margin-left: auto;
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  white-space: nowrap;
}

.liquids-shell {
  height: calc(100vh - 110px);
  display: grid;
  grid-template-columns: minmax(470px, 0.86fr) minmax(540px, 1.04fr) minmax(320px, 0.58fr);
  gap: 14px;
  padding: 14px 18px 18px;
  overflow: hidden;
}

.segment {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

.segment-head {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}

.segment-head h1 {
  margin: 0;
  font-size: 17px;
  letter-spacing: 0.08em;
}

.segment-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.segment-head b,
.counts span {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  white-space: nowrap;
}

.counts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.mini-btn {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #121a20;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 800;
}

.scroll-list {
  min-height: 0;
  overflow-y: auto;
}

.raw-row {
  display: grid;
  grid-template-columns: 46px minmax(84px, 1.1fr) 82px 64px 64px 72px 56px 82px 70px 76px;
  align-items: center;
  gap: 8px;
}

.raw-header {
  flex: 0 0 auto;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
}

.raw-item {
  width: 100%;
  border: 0;
  border-left: 3px solid transparent;
  border-bottom: 1px solid rgba(38, 50, 58, 0.72);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 10px 12px;
  text-align: left;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

.raw-item:hover,
.raw-item.selected {
  background: #172028;
}

.raw-item.long {
  border-left-color: var(--green);
}

.raw-item.short {
  border-left-color: var(--red);
}

.raw-item.flat {
  border-left-color: #65727a;
}

.raw-item b {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 13px;
}

.moving-list {
  padding: 12px;
}

.alert-list {
  padding: 10px;
}

.alert-item {
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: 8px;
  background: #0f151a;
  margin-bottom: 10px;
  padding: 10px;
}

.alert-item.short {
  border-left-color: var(--red);
}

.alert-item .alert-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.alert-item h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.04em;
}

.alert-item time {
  color: var(--amber);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

.alert-item p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.alert-item .alert-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.alert-item .alert-metrics span {
  border: 1px solid rgba(143, 160, 154, 0.22);
  border-radius: 5px;
  padding: 4px 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

.move-card {
  border: 1px solid var(--line);
  border-left: 4px solid #65727a;
  border-radius: 8px;
  background: #0f151a;
  margin-bottom: 12px;
  overflow: hidden;
}

.move-card.long {
  border-left-color: var(--green);
}

.move-card.short {
  border-left-color: var(--red);
}

.move-card.forming {
  border-left-color: var(--amber);
  opacity: 0.86;
}

.move-card.watch {
  border-left-color: var(--purple);
  opacity: 0.72;
}

.move-card.risk {
  border-left-color: var(--orange);
}

.move-card.selected {
  outline: 2px solid rgba(238, 245, 241, 0.35);
}

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.card-top h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  letter-spacing: 0.04em;
}

.card-top p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.dir-pill {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 9px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 800;
}

.dir-pill.long {
  color: var(--green);
}

.dir-pill.short {
  color: var(--red);
}

.family {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-weight: 800;
  letter-spacing: 0.05em;
}

.risk-text {
  color: var(--orange);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.metric-grid div {
  min-width: 0;
  padding: 12px 14px;
  border-right: 1px solid rgba(38, 50, 58, 0.72);
  border-bottom: 1px solid rgba(38, 50, 58, 0.72);
}

.metric-grid div:nth-child(2n) {
  border-right: 0;
}

.metric-grid small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.metric-grid b {
  display: block;
  margin-top: 5px;
  font-family: "JetBrains Mono", monospace;
  font-size: 15px;
}

.tape-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

.tape-line span {
  border: 1px solid rgba(143, 160, 154, 0.25);
  border-radius: 5px;
  padding: 5px 7px;
}

.move-card footer {
  padding: 12px 14px;
  color: var(--muted);
  font-size: 13px;
}

.pos {
  color: var(--green);
}

.neg {
  color: var(--red);
}

.empty {
  padding: 22px;
  color: var(--muted);
}

@media (max-width: 1120px) {
  body {
    overflow: auto;
  }

  .liquids-shell {
    height: auto;
    min-height: calc(100vh - 110px);
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .segment {
    min-height: 560px;
  }
}