:root {
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  color: #f4f7fb;
  background: #081019;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.shell {
  width: min(1600px, 100%);
  margin: auto;
  padding: 24px;
}

.topbar {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center; font-weight: 800;
  background: linear-gradient(135deg, #6d5dfc, #1cc8a0);
  box-shadow: 0 0 40px #6d5dfc55;
}
h1 { font-size: 18px; margin: 0; letter-spacing: .01em; }
.subtitle { margin-top: 3px; color: #8595a8; font-size: 12px; }

.status-strip { display: flex; gap: 10px; align-items: center; }
.pill {
  border: 1px solid #26384a; background: #101d2a; color: #b9c6d3;
  border-radius: 999px; padding: 7px 11px; font-size: 12px;
}
.pill.ok { color: #71edc3; border-color: #1c6a57; background: #0a2a25; }
.pill.bad { color: #ff9b99; border-color: #743d42; background: #32181d; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}
.card {
  border: 1px solid #1d2c3b;
  border-radius: 16px;
  background: linear-gradient(145deg, #0e1924, #0b151f);
  box-shadow: 0 12px 36px #0004;
  overflow: hidden;
}
.card-body { padding: 16px; }
.card-title {
  display: flex; justify-content: space-between; align-items: center;
  color: #aebccb; font-size: 12px; text-transform: uppercase;
  letter-spacing: .09em; margin-bottom: 12px;
}
.metric { grid-column: span 2; min-height: 120px; }
.metric-value { font-size: 29px; font-weight: 750; letter-spacing: -.04em; }
.metric-unit { font-size: 12px; color: #748497; margin-left: 4px; }
.metric-note { color: #728397; font-size: 12px; margin-top: 9px; }
.node-card { grid-column: span 4; }
.chart-card { grid-column: span 8; }
.queue-card, .models-card { grid-column: span 12; }
.alerts-card { grid-column: span 4; }
.controls-card { grid-column: span 4; }
.clients-card { grid-column: span 4; }

.sparkline { width: 100%; height: 100px; display: block; }
.sparkline polyline { fill: none; stroke: #6d72ff; stroke-width: 2.5; }
.sparkline .area { fill: url(#area); stroke: none; opacity: .28; }
.chart-labels { display: flex; justify-content: space-between; color: #68798b; font-size: 11px; }

table { width: 100%; border-collapse: collapse; font-size: 12px; }
th {
  color: #6f8295; text-transform: uppercase; letter-spacing: .07em;
  font-size: 10px; text-align: left; padding: 10px 8px;
  border-bottom: 1px solid #1e2e3d;
}
td { padding: 11px 8px; border-bottom: 1px solid #142332; color: #c4ced8; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #132230; }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.muted { color: #718295; }

.status {
  display: inline-flex; align-items: center; gap: 6px; text-transform: capitalize;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: #78899b; }
.status.running::before { background: #6d72ff; box-shadow: 0 0 10px #6d72ff; }
.status.succeeded::before { background: #37d3a0; }
.status.failed::before, .status.blocked::before { background: #ff696d; }
.status.queued::before { background: #efbf57; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.button {
  border: 1px solid #2b3d50; border-radius: 9px; padding: 8px 11px;
  color: #dce5ec; background: #152332;
}
.button:hover { border-color: #536b82; background: #1b2d3e; }
.button.primary { border-color: #625cff; background: #514bd5; color: white; }
.button.danger { border-color: #744046; color: #ffaaa8; background: #311b20; }
.button:disabled { opacity: .45; cursor: not-allowed; }

.node-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.node-stat { padding: 11px; border-radius: 10px; background: #0a141e; }
.node-stat label { display: block; font-size: 10px; color: #677a8e; text-transform: uppercase; margin-bottom: 5px; }

.model-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.model {
  padding: 12px; background: #0a151f; border: 1px solid #172939; border-radius: 11px;
}
.model-name { font-weight: 650; font-size: 12px; margin-bottom: 7px; }
.model-state { font-size: 11px; color: #6f8295; }
.model-state.ok { color: #55dda9; }

.login {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(circle at 30% 20%, #514bd530, transparent 36%),
    radial-gradient(circle at 80% 80%, #1cc8a020, transparent 35%), #081019;
}
.login-card { width: min(430px, 100%); padding: 28px; }
.login-card h1 { font-size: 24px; margin-bottom: 8px; }
.login-card p { color: #8797a8; line-height: 1.6; }
.field { display: grid; gap: 7px; margin: 15px 0; }
.field label { font-size: 11px; color: #7e91a3; text-transform: uppercase; letter-spacing: .07em; }
.field input, .field textarea {
  width: 100%; border: 1px solid #2a3d50; background: #09131d;
  color: #edf3f7; border-radius: 9px; padding: 10px;
}
.error { color: #ff9b99; font-size: 12px; }

.drawer {
  position: fixed; inset: 0; background: #0009; display: flex;
  justify-content: flex-end; z-index: 10;
}
.drawer-panel {
  width: min(720px, 96vw); height: 100%; background: #0b151f;
  border-left: 1px solid #253649; padding: 20px; overflow: auto;
  box-shadow: -20px 0 60px #0008;
}
.drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.log {
  white-space: pre-wrap; font: 11px/1.55 ui-monospace, Consolas, monospace;
  color: #aebdca; background: #071019; border: 1px solid #1d2d3b;
  padding: 14px; border-radius: 10px; min-height: 320px;
}
.phase-line { display: flex; gap: 9px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #142431; }
.phase-time { color: #627487; min-width: 78px; }

@media (max-width: 1050px) {
  .metric { grid-column: span 4; }
  .node-card, .chart-card { grid-column: span 12; }
  .alerts-card, .controls-card, .clients-card { grid-column: span 6; }
  .model-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 650px) {
  .shell { padding: 14px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .metric, .alerts-card, .controls-card, .clients-card { grid-column: span 12; }
  .model-list { grid-template-columns: 1fr; }
  .table-scroll { overflow-x: auto; }
}