@font-face { font-family: 'Chakra Petch'; src: url('fonts/chakra-petch-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url('fonts/chakra-petch-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Chakra Petch'; src: url('fonts/chakra-petch-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #06060d; color: #e0e0e0; font-family: 'Chakra Petch', system-ui, sans-serif; min-height: 100vh; }
/* Subtle grid backdrop like the main app */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}
.wrap { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding: 0 16px; }
/* Header (self-contained, was in styles.css) */
header.top { padding: 30px 0 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.brand { flex: 1; }
.brandrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.backlink { color: #615e78; text-decoration: none; font-size: 12px; white-space: nowrap; text-align: right; }
.backlink:visited, .backlink:active { color: #615e78; }
.brand h1 { margin: 0; font-family: 'Chakra Petch', system-ui, sans-serif; font-size: 32px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
.brand h1 .dot { color: #2f9df7; text-shadow: 0 0 14px #2f9df7; }
.brand p { margin: 4px 0 0; color: #a09cb8; font-size: 13.5px; }
/* Hero verdict — floating neon, no plate */
.verdict {
  display: flex; justify-content: center;
  padding: 16px 0 22px; margin-bottom: 8px;
}
.verdict-row { display: flex; align-items: center; gap: 10px; }
.verdict-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.verdict-dot.healthy { background: #00ff88; box-shadow: 0 0 10px rgba(0,255,136,0.8); animation: pulse 2.5s ease-in-out infinite; }
.verdict-dot.degraded { background: #ffaa00; box-shadow: 0 0 10px rgba(255,170,0,0.8); animation: pulse 2s ease-in-out infinite; }
.verdict-dot.down { background: #ff3355; box-shadow: 0 0 10px rgba(255,51,85,0.8); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
.verdict-status { font-size: 1.2rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.verdict-status.healthy {
  color: #e8fff2;
  text-shadow:
    0 0 4px rgba(0,255,136,0.9),
    0 0 12px rgba(0,255,136,0.7),
    0 0 28px rgba(0,255,136,0.5),
    0 0 56px rgba(0,255,136,0.3);
}
.verdict-status.degraded {
  color: #fff6e8;
  text-shadow:
    0 0 4px rgba(255,170,0,0.9),
    0 0 12px rgba(255,170,0,0.7),
    0 0 28px rgba(255,170,0,0.5),
    0 0 56px rgba(255,170,0,0.3);
}
.verdict-status.down {
  color: #ffe8ec;
  text-shadow:
    0 0 4px rgba(255,51,85,0.9),
    0 0 12px rgba(255,51,85,0.7),
    0 0 28px rgba(255,51,85,0.5),
    0 0 56px rgba(255,51,85,0.3);
}
/* Feed cards in Nydus card language */
.feed {
  display: flex; background: rgba(13,13,26,0.9); border: 1px solid #1e1e35;
  border-radius: 12px; margin-bottom: 10px; overflow: hidden; cursor: pointer;
  transition: border-color 0.2s;
}
/* First-paint entrance: feeds fade and rise in, staggered via inline animation-delay. */
@keyframes feedIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.feed.enter { animation: feedIn .35s ease-out both; }
@media (prefers-reduced-motion: reduce) { .feed.enter { animation: none; } }
.feed:hover { border-color: #2a2a45; }
.feed-edge { width: 4px; flex-shrink: 0; }
.feed-edge.healthy { background: #00ff88; box-shadow: 2px 0 14px rgba(0,255,136,0.45); }
.feed-edge.degraded { background: #ffaa00; box-shadow: 2px 0 14px rgba(255,170,0,0.45); }
.feed-edge.down { background: #ff3355; box-shadow: 2px 0 14px rgba(255,51,85,0.45); }
.feed-edge.unknown { background: #3a3a4a; }
.feed-main { flex: 1; padding: 14px 16px; }
.feed-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.feed-name { font-weight: 600; font-size: 1rem; color: #fff; }
.feed-pill {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;
  padding: 4px 12px; border-radius: 10px;
}
.feed-pill.healthy {
  color: #d8ffe8; background: rgba(0,255,136,0.06); border: 1px solid rgba(0,255,136,0.3);
  text-shadow: 0 0 8px rgba(0,255,136,0.5);
}
.feed-pill.degraded {
  color: #ffedcb; background: rgba(255,170,0,0.06); border: 1px solid rgba(255,170,0,0.3);
  text-shadow: 0 0 8px rgba(255,170,0,0.5);
}
.feed-pill.down {
  color: #ffdce2; background: rgba(255,51,85,0.06); border: 1px solid rgba(255,51,85,0.3);
  text-shadow: 0 0 8px rgba(255,51,85,0.5);
}
.feed-pill.unknown { color: #888; background: rgba(255,255,255,0.04); border: 1px solid #333; }
.feed-detail { font-size: 0.85rem; color: #777; }
/* Expandable crossing ages */
.feed-ages {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height .35s ease, padding .35s ease;
}
.feed.open .feed-ages { max-height: 400px; padding: 0 16px 14px 16px; }
.age-row { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid #16162a; font-size: 0.88rem; }
.age-name { color: #aaa; }
.age-val.healthy { color: #00ff88; }
.age-val.degraded { color: #ffaa00; }
.age-val.down { color: #ff3355; }
.age-val.unknown { color: #555; }
.feed-hint { font-size: 0.75rem; color: #444; margin-top: 6px; }
.feed-note { font-size: 0.78rem; color: #615e78; padding: 8px 16px 12px 16px; font-style: italic; }
/* Footer */
.back { display: inline-block; margin-top: 14px; color: #00d4ff; text-decoration: none; font-size: 0.92rem; }
/* Pull-to-refresh (same as home page) */
.ptr {
  position: fixed; top: -90px; left: 50%; margin-left: -40px;
  width: 80px; height: 80px; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  transition: top .15s ease;
  pointer-events: none;
}
.ptr-dubu {
  width: 72px; height: 72px;
  opacity: 0; transition: opacity .2s;
  background: transparent;
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, .45));
}
.ptr.ready .ptr-dubu { opacity: 1; }
.ptr.spinning .ptr-dubu { opacity: 1; }
/* Rotation is driven by Web Animations API in health.js */
/* Desktop: match the homepage's wide layout so the header doesn't shift
   when navigating between pages. */
@media (min-width: 900px) {
  .wrap { max-width: 1080px; }
}