/* Status pages (views/status): standalone, also served as a static copy by the monitor. */
  :root { --bg:#f8fafc; --card:#fff; --fg:#0f172a; --muted:#64748b; --line:#e2e8f0; --blue:#2563eb; --blue-soft:#eff6ff;
    --ok:#16a34a; --maint:#2563eb; --deg:#ca8a04; --part:#ea580c; --major:#dc2626; --none:#cbd5e1; }
  @media (prefers-color-scheme: dark) { :root { --bg:#0b1120; --card:#111827; --fg:#e5e7eb; --muted:#94a3b8; --line:#1f2937; --blue-soft:#172554; --none:#334155; } }
  * { box-sizing: border-box; }
  body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
  a { color:var(--blue); }
  .wrap { max-width:880px; margin:0 auto; padding:24px 16px 48px; }
  header.top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
  header.top a.brand { color:var(--fg); text-decoration:none; font-weight:700; font-size:18px; display:flex; gap:10px; align-items:center; }
  header.top a.brand img { width:28px; height:28px; }
  nav.links { display:flex; gap:14px; flex-wrap:wrap; font-size:14px; }
  .card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:16px; }
  .overall { display:flex; gap:12px; align-items:center; font-size:20px; font-weight:700; padding:18px; border-radius:12px; margin-bottom:16px; color:#fff; }
  .overall svg { width:28px; height:28px; flex:none; }
  .s-operational { --c:var(--ok); } .s-maintenance { --c:var(--maint); } .s-degraded { --c:var(--deg); } .s-partial { --c:var(--part); } .s-major { --c:var(--major); }
  .overall.s-operational, .overall.s-maintenance, .overall.s-partial, .overall.s-major { background:var(--c); }
  .overall.s-degraded { background:#a16207; }
  .comp { display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:12px 0; border-top:1px solid var(--line); }
  .comp:first-of-type { border-top:0; }
  .comp .name { font-weight:600; }
  .comp .desc { color:var(--muted); font-size:13px; }
  .state { display:inline-flex; gap:6px; align-items:center; font-weight:600; font-size:14px; color:var(--c); white-space:nowrap; }
  .state svg { width:18px; height:18px; }
  .bars { grid-column:1 / -1; display:flex; gap:2px; height:28px; align-items:stretch; }
  .bars span { flex:1; border-radius:2px; background:var(--none); min-width:2px; }
  .bars span.b-operational { background:var(--ok); } .bars span.b-maintenance { background:var(--maint); } .bars span.b-degraded { background:var(--deg); }
  .bars span.b-partial { background:var(--part); } .bars span.b-major { background:var(--major); }
  .barlegend { grid-column:1 / -1; display:flex; justify-content:space-between; color:var(--muted); font-size:12px; }
  h2 { font-size:16px; margin:24px 0 10px; }
  .item { padding:12px 0; border-top:1px solid var(--line); }
  .item:first-child { border-top:0; padding-top:0; }
  .item h3 { margin:0 0 4px; font-size:15px; }
  .meta { color:var(--muted); font-size:13px; }
  .pill { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; font-weight:600; background:var(--blue-soft); color:var(--blue); }
  .pill.sev-critical { background:#fee2e2; color:#b91c1c; } .pill.sev-major { background:#ffedd5; color:#c2410c; } .pill.sev-minor { background:#fef9c3; color:#a16207; }
  .timeline { list-style:none; margin:0; padding:0; }
  .timeline li { padding:10px 0 10px 14px; border-left:2px solid var(--line); margin-left:6px; }
  .timeline li strong { display:block; }
  .notice { border-left:4px solid var(--c, var(--blue)); }
  .btn { display:inline-block; padding:8px 14px; border-radius:8px; background:var(--blue); color:#fff; text-decoration:none; font-weight:600; border:0; font:inherit; cursor:pointer; }
  .btn.ghost { background:transparent; color:var(--blue); border:1px solid var(--line); }
  input[type=email], select { padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); font:inherit; }
  label.check { display:flex; gap:8px; align-items:flex-start; margin:6px 0; }
  .grid-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
  .grid-cal div { min-height:72px; border:1px solid var(--line); border-radius:8px; padding:4px; font-size:12px; overflow:hidden; }
  .grid-cal .dow { min-height:auto; border:0; text-align:center; color:var(--muted); font-weight:600; }
  .grid-cal .out { opacity:.4; }
  .grid-cal .today { border-color:var(--blue); }
  .grid-cal a.ev { display:block; margin-top:2px; padding:1px 4px; border-radius:4px; background:var(--blue-soft); color:var(--blue); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .grid-cal a.ev.event { background:#dcfce7; color:#15803d; }
  footer.foot { margin-top:32px; color:var(--muted); font-size:13px; display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between; }
  .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  @media (max-width:640px) { .grid-cal div { min-height:48px; font-size:10px; } .grid-cal a.ev { font-size:10px; } .overall { font-size:17px; } }
  :focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
  .mt0 { margin-top:0; } .m0 { margin:0; } .mb6 { margin:0 0 6px; } .mb8 { margin:0 0 8px; } .mb12 { margin:0 0 12px; } .mb16 { margin:0 0 16px; } .mt4 { margin:4px 0 0; } .my4 { margin:4px 0; } .mt12 { margin:12px 0 0; }
  h1.page { font-size:22px; margin:0 0 6px; } h1.msg { font-size:20px; margin:0 0 8px; }
  .pre { white-space:pre-line; } .row { display:flex; gap:8px; flex-wrap:wrap; }
  .between { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; } .between h2 { margin:0; }
  .plain { border:0; padding:0; margin:0 0 12px; } .plain legend { font-weight:600; } .indent { padding-left:24px; }
  label.lbl { font-weight:600; display:block; margin-bottom:4px; } input.wide { width:100%; max-width:360px; margin-bottom:12px; }
  .inline-icon svg { width:16px; height:16px; vertical-align:-2px; }
  .preview { --c:#ca8a04; }