:root {
  --bg: #081116;
  --panel: #101b22;
  --panel-2: #13232c;
  --line: rgba(157, 184, 197, 0.16);
  --text: #e8f1f5;
  --muted: #8fa6b2;
  --cyan: #28b7d9;
  --green: #38d996;
  --orange: #f5a524;
  --red: #ff6b57;
}

[data-testid="stAppViewContainer"] {
  background:
    radial-gradient(circle at 15% 0%, rgba(40, 183, 217, 0.10), transparent 30rem),
    linear-gradient(180deg, #081116 0%, #0a141a 100%);
  color: var(--text);
}

[data-testid="stHeader"] { background: transparent; }
[data-testid="stSidebar"] { background: #0b171d; border-right: 1px solid var(--line); }
[data-testid="stMainBlockContainer"] { padding-top: 2.1rem; max-width: 1500px; }

.product-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.product-header h1 { margin: .2rem 0 .25rem; color: #f3f8fa; font-size: 2rem; letter-spacing: -.035em; }
.product-header p { margin: 0; color: var(--muted); }
.eyebrow { color: var(--cyan); font-size: .7rem; font-weight: 800; letter-spacing: .17em; }
.runtime-badge {
  min-width: 170px;
  padding: .7rem .9rem;
  border: 1px solid rgba(56, 217, 150, .32);
  background: rgba(56, 217, 150, .07);
  color: var(--green);
  font: 700 .72rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
}
.runtime-badge span { color: var(--muted); font-size: .64rem; }

.status-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  background: linear-gradient(90deg, rgba(56, 217, 150, .07), rgba(16, 27, 34, .92));
  margin-bottom: 1.5rem;
}
.status-strip > div { padding: 1rem 1.2rem; border-right: 1px solid var(--line); }
.status-strip > div:last-child { border-right: 0; }
.status-strip span, .diagnosis-metrics span { display: block; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .11em; }
.status-strip strong { display: block; margin-top: .2rem; font-size: 1.28rem; color: var(--text); }
.status-warning { border-left-color: var(--orange); background: linear-gradient(90deg, rgba(245, 165, 36, .08), rgba(16, 27, 34, .92)); }
.status-critical { border-left-color: var(--red); background: linear-gradient(90deg, rgba(255, 107, 87, .09), rgba(16, 27, 34, .92)); }
.status-unknown { border-left-color: #d56cff; }

.diagnosis-card {
  --diagnosis-color: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem 1.25rem;
  margin: .5rem 0 1rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--diagnosis-color) 12%, transparent), var(--panel));
  border: 1px solid var(--line);
  border-left: 4px solid var(--diagnosis-color);
}
.diagnosis-card h2 { margin: .08rem 0; color: var(--text); }
.diagnosis-card p { margin: 0; color: var(--muted); }
.diagnosis-kicker { color: var(--diagnosis-color); font: 800 .68rem ui-monospace, monospace; letter-spacing: .12em; }
.diagnosis-metrics { display: flex; gap: 2rem; }
.diagnosis-metrics strong { display: block; margin-top: .2rem; color: var(--text); font-size: 1.05rem; }

[data-testid="stButton"] button {
  min-height: 4.2rem;
  white-space: pre-line;
  border-radius: 3px;
  border-color: var(--line);
  background: var(--panel);
  font-weight: 650;
}
[data-testid="stButton"] button:hover { border-color: var(--cyan); color: #fff; }
[data-testid="stButton"] button[kind="primary"] { border-color: var(--cyan); background: rgba(40, 183, 217, .13); }

[data-testid="stMetric"] { padding: .7rem; border: 1px solid var(--line); background: var(--panel); }
[data-testid="stDataFrame"], [data-testid="stPlotlyChart"] { border: 1px solid var(--line); }

@media (max-width: 900px) {
  .product-header, .diagnosis-card { flex-direction: column; }
  .runtime-badge { width: 100%; }
  .status-strip { grid-template-columns: repeat(2, 1fr); }
  .diagnosis-metrics { width: 100%; flex-wrap: wrap; gap: 1rem 1.6rem; }
}

@media (max-width: 560px) {
  .status-strip { grid-template-columns: 1fr; }
  .status-strip > div { border-right: 0; border-bottom: 1px solid var(--line); }
}