/* FakApp board — same visual family as crowdrelay-control-plane, with the
   operator purple swapped for a matrix green accent. Dark, flat, fast: no
   fonts to fetch, no images, no script. */
:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bg: #050807;
  --panel: #0b100d;
  --line: #1d2b21;
  --text: #e6f2ea;
  --muted: #7f9488;
  --accent: #39ff6a;
  --accent-dim: #123c20;
  --good: #39ff6a;
  --warn: #f5b942;
  --bad: #ff5c5c;
}
* { box-sizing: border-box }
body {
  margin: 0;
  min-width: 320px;
  background: radial-gradient(circle at 80% -10%, #0c241455, transparent 40%), var(--bg);
  color: var(--text);
}
a { color: var(--accent); text-decoration: none }
a:hover { text-decoration: underline }

.page { max-width: 1080px; margin: auto; padding: 40px 24px 64px }

.board-head { margin-bottom: 28px }
.brand { display: flex; align-items: center; gap: 12px }
.brand-mark { width: 38px; height: 38px; display: block }
.brand strong { display: block; letter-spacing: .12em }
.brand small { color: var(--muted); font-size: .78rem; letter-spacing: .08em }

.banner {
  display: inline-block; margin: 18px 0 4px; padding: 10px 16px;
  border-radius: 999px; border: 1px solid var(--line);
  font-weight: 800; letter-spacing: .14em; font-size: .9rem;
}
.banner-ok { border-color: var(--accent-dim); background: var(--accent-dim); color: var(--good) }
.banner-warn { border-color: #4a3a12; background: #29200f; color: var(--warn) }
.banner-bad { border-color: #4a1414; background: #2b1313; color: var(--bad) }
.generated { color: var(--muted); font-size: .78rem; margin: 6px 0 0 }

.boards { display: grid; gap: 14px }
.panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0d130f, #090c0a);
  border-radius: 14px; padding: 18px 20px; margin: 0;
}
.target-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px }
.target-head h2 { margin: .2rem 0 0; font-size: 1.15rem }
.eyebrow {
  font-size: .68rem; letter-spacing: .16em; color: var(--muted);
  font-weight: 800; text-transform: uppercase;
}
.badge {
  font-size: .72rem; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--line); white-space: nowrap; font-weight: 700;
}
.badge-good { border-color: var(--accent-dim); color: var(--good); background: #0a1f12 }
.badge-bad { border-color: #4a1414; color: var(--bad); background: #2b1313 }

.target-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px; margin: 16px 0 0;
}
.target-facts > div {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  background: #070a08;
}
.target-facts dt { color: var(--muted); font-size: .72rem }
.target-facts dd { margin: 4px 0 0; font-weight: 800; font-variant-numeric: tabular-nums }

.strip { display: flex; gap: 3px; flex-wrap: wrap; margin: 16px 0 0; padding: 0 }
.bar { width: 9px; height: 18px; border-radius: 2px; background: var(--line) }
.bar-ok { background: var(--accent-dim); box-shadow: inset 0 -3px 0 var(--good) }
.bar-fail { background: #3d1111; box-shadow: inset 0 -3px 0 var(--bad) }
.target-error { color: var(--bad); font-size: .82rem; margin: 12px 0 0 }

.board-foot { margin-top: 26px; color: var(--muted); font-size: .82rem; line-height: 1.6 }
.board-foot p { margin: 4px 0 }

@media (max-width: 720px) {
  .target-facts { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .page { padding: 24px 16px 48px }
}

@media (prefers-reduced-motion: no-preference) {
  .banner-bad { animation: pulse 2s ease-in-out infinite }
  @keyframes pulse { 50% { opacity: .75 } }
}