:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #162525;
  background: #eef2ef;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --muted: #687875;
  --line: #dde5e0;
  --green: #16856b;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse at 85% 4%, rgba(22, 133, 107, .11), transparent 34rem),
    #eef2ef;
}

.shell { width: min(760px, calc(100% - 40px)); margin: 0 auto; }
.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-decoration: none; }
.brand-mark { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: white; background: #137d68; font-family: Georgia, serif; font-size: 18px; letter-spacing: 0; }
.brand-muted { color: #74827d; font-weight: 600; }
.live-label { display: flex; align-items: center; gap: 8px; color: #52615d; font-size: 12px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(22, 133, 107, .12); }
.intro { padding: 57px 0 29px; }
.eyebrow { margin: 0 0 10px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(30px, 5vw, 42px); font-weight: 660; letter-spacing: -.045em; }
.intro-copy { max-width: 580px; margin: 13px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.status-card, .metric-card { border: 1px solid var(--line); border-radius: 15px; background: rgba(255, 255, 255, .84); box-shadow: 0 10px 30px rgba(30, 57, 48, .035); }
.status-card { padding: 25px 27px 23px; }
.card-heading { display: flex; align-items: center; justify-content: space-between; }
h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.02em; }
.muted { margin: 9px 0 0; color: var(--muted); font-size: 13px; }
.indicator { width: 13px; height: 13px; border-radius: 50%; background: #b7c2be; }
.indicator-online { background: var(--green); box-shadow: 0 0 0 6px rgba(22, 133, 107, .1); }
.indicator-offline { background: #c8794e; box-shadow: 0 0 0 6px rgba(200, 121, 78, .1); }
.indicator-pending { background: #c5cec9; }
.queue-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.metric-card { min-height: 150px; padding: 21px 23px; }
.metric-value { margin: 20px 0 0; font-size: 37px; font-variant-numeric: tabular-nums; font-weight: 650; letter-spacing: -.05em; }
.metric-card .muted { margin-top: 1px; }
.error-panel { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; padding: 17px 19px; border: 1px solid #ecd3c4; border-radius: 12px; color: #703d26; background: #fff8f3; }
.error-panel[hidden] { display: none; }
.error-mark { flex: 0 0 20px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #f4e1d5; font-size: 12px; font-weight: 800; }
.error-panel h2 { font-size: 14px; }
.error-panel p { margin: 5px 0 0; font-size: 12px; line-height: 1.5; }
footer { display: flex; justify-content: space-between; gap: 16px; padding: 21px 2px 35px; color: #788681; font-size: 11px; }

@media (max-width: 520px) {
  .shell { width: min(100% - 28px, 760px); }
  .intro { padding-top: 42px; }
  .queue-grid { grid-template-columns: 1fr; gap: 10px; }
  .metric-card { min-height: 125px; }
  .metric-value { margin-top: 12px; }
}

@media (prefers-reduced-motion: no-preference) {
  .indicator-online { animation: breathe 2.6s ease-in-out infinite; }
  @keyframes breathe { 50% { box-shadow: 0 0 0 8px rgba(22, 133, 107, .035); } }
}

@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; color: #e4eeea; background: #121c1a; --muted: #9aa9a3; --line: #2b3a36; --green: #55c4a5; }
  body { background: radial-gradient(ellipse at 85% 4%, rgba(38, 143, 117, .16), transparent 34rem), #121c1a; }
  .brand-muted { color: #9aa9a3; }
  .live-label { color: #b2beb9; }
  .status-card, .metric-card { background: rgba(26, 39, 35, .9); box-shadow: none; }
  .indicator-offline { background: #df986f; }
  .error-panel { border-color: #573b30; color: #f1c7ad; background: #2a201b; }
}