:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #080a0e;
  color: #f4f6fa;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: #080a0e; }

body { margin: 0; }

a { color: inherit; text-decoration: none; }

.page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% -20%, rgba(64, 82, 186, 0.15), transparent 34rem),
    #080a0e;
  color: #f4f6fa;
}

.shell { width: min(920px, calc(100% - 40px)); margin: 0 auto; }

.header {
  min-height: 78px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #222733;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #f7f8fb;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand-mark {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid #707bf0;
  border-radius: 9px;
  background: #5360dc;
  font-size: 13px;
  font-weight: 800;
}

.product-name {
  margin-left: 13px;
  padding-left: 13px;
  border-left: 1px solid #303642;
  color: #939baa;
  font-size: 13px;
}

.content { display: grid; gap: 42px; padding: 54px 0 72px; }

.overall {
  min-height: 154px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 30px 32px;
  border: 1px solid #29303c;
  border-left: 3px solid currentColor;
  border-radius: 14px;
  background: #0e1218;
}

.overall-icon,
.feedback-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 700;
}

.eyebrow {
  margin: 0 0 8px;
  color: #798292;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.overall h1 {
  margin: 0;
  color: #f7f8fa;
  font-size: clamp(23px, 4vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.updated-at,
.source-meta { margin: 11px 0 0; color: #858e9d; font-size: 12px; }
.source-meta { margin-top: 5px; color: #687181; }

.section-heading { margin-bottom: 16px; }
.section-heading h2 { margin: 0; font-size: 20px; letter-spacing: -0.025em; }
.card-stack, .component-groups { display: grid; gap: 14px; }

.incident-card,
.maintenance-card,
.component-group,
.empty-state {
  border: 1px solid #252b36;
  border-radius: 12px;
  background: #0d1016;
}

.incident-card, .maintenance-card { padding: 24px; }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.card-header h3 { margin: 5px 0 0; font-size: 17px; }

.incident-state {
  color: #8e98aa;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card-description { max-width: 700px; margin: 17px 0 0; color: #a3aab6; font-size: 13px; line-height: 1.65; }
.details { display: flex; flex-wrap: wrap; gap: 22px 40px; margin: 21px 0 0; padding-top: 18px; border-top: 1px solid #20252e; }
.details div { display: grid; gap: 5px; }
.details dt { color: #687181; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.details dd { margin: 0; color: #b5bbc5; font-size: 12px; }

.timeline { margin: 24px 0 0; padding: 4px 0 0; list-style: none; }
.timeline li { position: relative; display: grid; grid-template-columns: 16px 1fr; gap: 12px; padding-bottom: 21px; }
.timeline li:not(:last-child)::before { content: ''; position: absolute; left: 5px; top: 12px; bottom: 0; width: 1px; background: #303743; }
.timeline-marker { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 3px; border: 2px solid #6975ea; border-radius: 50%; background: #0d1016; }
.timeline-meta { display: flex; justify-content: space-between; gap: 16px; color: #8b94a4; font-size: 10px; }
.timeline-meta strong { color: #c7ccd5; }
.timeline p { margin: 7px 0 0; color: #989fac; font-size: 12px; line-height: 1.55; }

.component-group { overflow: hidden; }
.component-group > h3 { margin: 0; padding: 14px 20px; border-bottom: 1px solid #242a34; color: #7f8898; font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; }
.component-group ul { margin: 0; padding: 0; list-style: none; }
.component-group li { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 20px; border-bottom: 1px solid #1f242d; }
.component-group li:last-child { border-bottom: 0; }
.component-group strong { display: block; color: #e7e9ed; font-size: 13px; }
.component-group p { margin: 5px 0 0; color: #737c8b; font-size: 11px; }
.component-group .component-with-metrics { display: block; }
.component-summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.storage-metrics { margin-top: 16px; padding-top: 14px; border-top: 1px solid #20252e; }
.storage-label { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #858e9d; font-size: 11px; }
.storage-label strong { color: #b9c0ca; font-size: 11px; font-weight: 600; }
.storage-progress { width: 100%; height: 8px; display: block; margin: 9px 0 0; overflow: hidden; border: 0; border-radius: 999px; background: #242a34; color: currentColor; appearance: none; }
.storage-progress::-webkit-progress-bar { border-radius: 999px; background: #242a34; }
.storage-progress::-webkit-progress-value { border-radius: 999px; background: currentColor; }
.storage-progress::-moz-progress-bar { border-radius: 999px; background: currentColor; }
.storage-metrics > p { margin-top: 9px; color: #737c8b; font-variant-numeric: tabular-nums; }

.state-label { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; font-size: 11px; font-weight: 600; white-space: nowrap; }
.state-label > span { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; }
.tone-operational { color: #4ed69a; }
.tone-degraded { color: #e5c15e; }
.tone-partial { color: #ed9852; }
.tone-major { color: #ee666f; }
.tone-maintenance { color: #7686f3; }
.tone-unknown { color: #8c94a2; }

.empty-state { padding: 28px; color: #8992a2; font-size: 13px; text-align: center; }

.feedback {
  min-height: calc(100vh - 156px);
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 50px 0;
  text-align: center;
}

.feedback h1 { max-width: 570px; margin: 20px 0 0; font-size: clamp(22px, 4vw, 30px); line-height: 1.3; }
.feedback p { margin: 10px 0 0; color: #818a99; font-size: 13px; }
.loading-indicator { width: 28px; height: 28px; border: 2px solid #2e3441; border-top-color: #6572ea; border-radius: 50%; animation: rotate 0.8s linear infinite; }
.error { color: #ef747c; }

.footer { min-height: 78px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #222733; color: #646d7b; font-size: 10px; letter-spacing: 0.04em; }

@keyframes rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loading-indicator { animation: none; } }

@media (max-width: 640px) {
  .shell { width: min(100% - 28px, 920px); }
  .header { min-height: 68px; }
  .content { gap: 34px; padding: 34px 0 52px; }
  .overall { align-items: flex-start; padding: 24px 20px; }
  .overall-icon { width: 39px; height: 39px; font-size: 18px; }
  .incident-card, .maintenance-card { padding: 19px 17px; }
  .card-header { align-items: flex-start; flex-direction: column; gap: 12px; }
  .details { display: grid; grid-template-columns: 1fr; gap: 14px; }
  .component-group li { align-items: flex-start; padding: 16px; }
  .component-summary { align-items: flex-start; }
  .state-label { font-size: 10px; }
  .timeline-meta { align-items: flex-start; flex-direction: column; gap: 4px; }
}

@media (max-width: 420px) {
  .overall { display: grid; }
  .component-group li { flex-direction: column; gap: 11px; }
  .component-summary, .storage-label { align-items: flex-start; flex-direction: column; gap: 8px; }
  .footer span:last-child { display: none; }
}