body[data-ui-page="login"] {
  padding: 20px;
  background:
    radial-gradient(circle at 20% 20%, rgba(var(--accent-rgb), 0.18), transparent 32%),
    radial-gradient(circle at 80% 0%, rgba(96, 165, 250, 0.12), transparent 24%),
    var(--bg);
}

body[data-ui-page="dashboard"] {
  background:
    radial-gradient(circle at 10% 0%, rgba(var(--accent-rgb), 0.12), transparent 28%),
    radial-gradient(circle at 90% 10%, rgba(99, 102, 241, 0.08), transparent 22%),
    var(--bg);
}

.auth-shell {
  min-height: calc(100vh - 40px);
  display: grid;
  place-items: center;
}

.auth-card {
  width: min(420px, 100%);
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background:
    radial-gradient(circle at 15% 0%, rgba(var(--accent-rgb), 0.13), transparent 42%),
    var(--panel);
}

.auth-card h1 {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.1rem);
}

.auth-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.auth-form input,
.auth-form button {
  width: 100%;
}

.auth-error {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border));
  background: color-mix(in srgb, var(--danger) 14%, var(--panel));
  color: color-mix(in srgb, var(--danger) 76%, var(--text));
}

.auth-card-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.portal-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.brand-block {
  display: grid;
  gap: 4px;
  max-width: 720px;
}

.brand-block h1 {
  margin: 0;
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 10px;
}

.inline-form {
  display: contents;
}

.numberino-shell {
  display: grid;
  gap: 12px;
  padding: 12px 20px 20px;
}

.incident-strip {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

.incident-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.incident-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(56px, auto));
  gap: 6px;
}

.incident-metrics > span {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--panel-alt) 86%, transparent);
  font-family: var(--ui-mono);
  white-space: nowrap;
}

.incident-metrics strong {
  color: var(--text);
  font-size: calc(12px * var(--ui-font-scale));
}

.incident-metrics small {
  color: var(--muted);
  font-size: calc(9px * var(--ui-font-scale));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.incident-strip span:not(.incident-mark) {
  color: var(--muted);
}

.incident-mark {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
  font-weight: 900;
}

.incident-strip[data-tone="healthy"] {
  border-color: color-mix(in srgb, #4bd6a1 45%, var(--border));
}

.incident-strip[data-tone="warning"] {
  border-color: color-mix(in srgb, var(--warn) 58%, var(--border));
  background: color-mix(in srgb, var(--warn) 9%, var(--panel));
}

.incident-strip[data-tone="warning"] .incident-mark {
  background: color-mix(in srgb, var(--warn) 18%, transparent);
  color: var(--warn);
}

.incident-strip[data-tone="error"] {
  border-color: color-mix(in srgb, var(--danger) 62%, var(--border));
  background: color-mix(in srgb, var(--danger) 11%, var(--panel));
}

.incident-strip[data-tone="error"] .incident-mark {
  background: color-mix(in srgb, var(--danger) 20%, transparent);
  color: color-mix(in srgb, var(--danger) 72%, var(--text));
}

.summary-panel,
.controls-panel,
.grid-panel {
  padding: 14px;
  border-radius: var(--radius-lg);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.metric-card {
  padding: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel-alt);
  display: grid;
  gap: 5px;
}

.metric-detail {
  min-height: 17px;
  color: var(--muted);
  font-family: var(--ui-mono);
  font-size: calc(11px * var(--ui-font-scale));
  overflow-wrap: anywhere;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 10px;
}

.channel-editor {
  width: 100%;
  min-height: 84px;
  resize: vertical;
  font-size: 14px;
}

.control-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.live-note {
  color: var(--muted);
}

.grid-panel .channel-grid {
  margin-top: 6px;
}

.channel-card {
  padding: 10px;
}

.channel-card p {
  overflow-wrap: anywhere;
}

.channel-card .channel-meta {
  margin-top: 6px;
  font-size: calc(12px * var(--ui-font-scale));
}

.status-pill.ready,
.status-pill.running,
.status-pill.idle {
  border-color: color-mix(in srgb, #4bd6a1 45%, var(--border));
  color: color-mix(in srgb, #4bd6a1 72%, var(--text));
}

.status-pill.warning,
.status-pill.backoff,
.status-pill.pending,
.status-pill.spooling-only {
  border-color: color-mix(in srgb, var(--warn) 52%, var(--border));
  color: color-mix(in srgb, var(--warn) 78%, var(--text));
}

.status-pill.error,
.status-pill.unavailable,
.status-pill.disk-pressure {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--border));
  color: color-mix(in srgb, var(--danger) 70%, var(--text));
}

@media (max-width: 900px) {
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-header,
  .numberino-shell {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 560px) {
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-header {
    align-items: start;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .header-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .header-actions button {
    width: 100%;
  }

  .numberino-shell {
    padding-top: 10px;
  }

  .incident-strip {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .incident-copy {
    display: grid;
    gap: 1px;
  }

  .incident-metrics {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .control-row {
    flex-direction: column;
  }
}

@media (max-width: 350px) {
  .summary-grid {
    grid-template-columns: 1fr;
  }
}