* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b1d33; color: #eaeaea; font-family: system-ui, sans-serif; }

#topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: #0e2440;
  border-bottom: 1px solid #1f3a5f;
}
#topbar h1 { font-size: 15px; margin: 0; flex: 1; }
.muted { color: #7f9bbf; font-weight: normal; font-size: 12px; }

#connection-status { font-size: 11px; padding: 4px 10px; border-radius: 12px; font-family: monospace; }
#connection-status.ok { background: #14432a; color: #7CFC00; }
#connection-status.degraded { background: #4a2a14; color: #ffb066; }
.degraded-text { font-size: 12px; color: #ff8c69; }

#feed-summary { font-size: 12px; display: flex; align-items: center; gap: 2px; white-space: nowrap; }
#feed-summary .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.dot-live { background: #7CFC00; }
.dot-degraded { background: #ffd066; }
.dot-stale { background: #ff8c69; }

#stage { position: relative; height: calc(100vh - 46px); }
#ocean { width: 100%; height: 100%; display: block; cursor: pointer; }

#panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  height: 100%;
  background: rgba(10, 20, 35, 0.95);
  border-left: 1px solid #1f3a5f;
  padding: 14px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  font-size: 12px;
}
#panel.open { transform: translateX(0); }

.panel-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 15px; }
.panel-header button { margin-left: auto; background: none; border: none; color: #eaeaea; font-size: 18px; cursor: pointer; }

.panel-feed { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; margin-bottom: 8px; }
.feed-LIVE { background: #14432a; color: #7CFC00; }
.feed-DEGRADED { background: #4a3a14; color: #ffd066; }
.feed-STALE { background: #4a1414; color: #ff8c69; }

#panel-sparkline { width: 100%; height: 60px; background: #0e2440; border: 1px solid #1f3a5f; margin-bottom: 10px; }

.panel-subhead { margin-top: 12px; margin-bottom: 4px; font-weight: bold; color: #9fd3ff; }
.panel-table { width: 100%; border-collapse: collapse; }
.panel-table td { padding: 2px 4px; border-bottom: 1px solid #1c2e46; vertical-align: top; }
.panel-table td:first-child { color: #7f9bbf; width: 55%; }

.panel-pre { background: #0e2440; padding: 8px; font-size: 10px; overflow-x: auto; white-space: pre-wrap; }

.constituent-row td { padding-top: 8px; color: #9fd3ff; border-bottom: none; }