/* Where's My ZEC: the Cryppit midnight + lime look shared with Intent Sentinel and Shield Receipt. */
:root {
  --bg: #070b22; --deep: #04061a; --panel: #0c1236; --line: rgba(154, 163, 199, 0.2); --ink: #f4f1e8; --mute: #9aa3c7;
  --lime: #ddf24a; --amber: #ffb547; --red: #ff6b6b; --blue: #8fb4ff; --cyan: #5ee0f0; --glass: rgba(10, 15, 48, 0.72);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: radial-gradient(1100px 600px at 80% -10%, rgba(42, 59, 214, 0.28), transparent 60%) no-repeat fixed, var(--deep); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; overflow-x: hidden; }
[hidden] { display: none !important; }
a { color: var(--lime); }
img { display: block; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
em { font-style: normal; color: var(--lime); }

/* Top bar */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1080px; margin: 0 auto; padding: 14px 16px; background: rgba(4, 6, 26, 0.72); backdrop-filter: blur(10px); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.brand img { width: 30px; height: 30px; filter: drop-shadow(0 0 10px rgba(221, 242, 74, 0.35)); }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; border: 1px solid var(--line); background: var(--glass); }
.seg a { padding: 7px 14px; border-radius: 10px; color: var(--mute); text-decoration: none; font-weight: 700; font-size: 14px; white-space: nowrap; }
.seg a.on { background: var(--lime); color: var(--deep); }
.gh { padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; }

main { max-width: 1080px; margin: 0 auto; padding: 8px 16px 40px; }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 28px; align-items: center; padding: 18px 0 8px; }
.badge { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--glass); color: var(--mute); font: 12px var(--mono); }
.badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
h1 { margin: 14px 0 10px; font-size: clamp(40px, 7vw, 68px); line-height: 1; letter-spacing: -0.04em; }
.lede { margin: 0 0 18px; max-width: 520px; color: var(--ink); opacity: 0.86; font-size: 19px; font-weight: 500; }
.strip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 99px; border: 1px solid var(--line); background: var(--glass); font-size: 14px; }
.strip .logos { display: flex; }
.strip .logos img { width: 26px; height: 26px; margin-left: -6px; padding: 3px; border-radius: 50%; background: #0f1640; border: 1px solid rgba(154, 163, 199, 0.35); }
.strip .logos img:first-child { margin-left: 0; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 22px 0 0; }
.stats div { padding: 0 14px; border-left: 1px solid var(--line); }
.stats div:first-child { padding-left: 0; border-left: 0; }
.stats dt { color: var(--lime); font-weight: 800; font-size: 18px; }
.stats dd { margin: 2px 0 0; color: var(--mute); font-size: 13px; line-height: 1.3; }

/* The map of where ZEC can go */
.map { position: relative; margin: 0; aspect-ratio: 400 / 320; border-radius: 22px; border: 1px solid var(--line); background: radial-gradient(260px 200px at 50% 50%, rgba(221, 242, 74, 0.08), transparent 70%), var(--glass); overflow: hidden; }
.map .paths { position: absolute; inset: 0; width: 100%; height: 100%; }
.map .paths path { fill: none; stroke: var(--lime); stroke-opacity: 0.55; stroke-width: 2; stroke-dasharray: 6 8; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -28; } }
.node { position: absolute; display: grid; justify-items: center; gap: 2px; transform: translate(-50%, -50%); text-align: center; width: 120px; }
.node img, .node > svg { width: 44px; height: 44px; padding: 8px; border-radius: 50%; background: #0f1640; border: 2px solid rgba(221, 242, 74, 0.6); box-shadow: 0 0 22px rgba(221, 242, 74, 0.18); }
.node > svg { fill: none; stroke: var(--lime); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.node b { font-size: 14px; }
.node span { color: var(--mute); font-size: 12px; }
.node.core { left: 50%; top: 50%; }
.node.core img { width: 72px; height: 72px; padding: 10px; border: 3px solid var(--lime); box-shadow: 0 0 40px rgba(221, 242, 74, 0.45); animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 60px rgba(221, 242, 74, 0.65); } }
.node.n1 { left: 21.25%; top: 19.4%; } .node.n2 { left: 78.75%; top: 19.4%; } .node.n3 { left: 21.25%; top: 80.6%; } .node.n4 { left: 78.75%; top: 80.6%; }
.map-note { margin: 10px 0 0; text-align: center; color: var(--mute); font-size: 13px; }

/* The paste box */
.card { margin: 24px 0 0; padding: 20px; border-radius: 20px; border: 1px solid var(--line); background: var(--glass); }
.ask-card label { display: block; margin-bottom: 8px; color: var(--mute); font: 700 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.ask-card input { width: 100%; padding: 15px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--deep); color: var(--ink); font: 15px var(--mono); }
.btn { padding: 12px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 700 15px system-ui, sans-serif; cursor: pointer; }
.btn.go { background: var(--lime); border-color: var(--lime); color: var(--deep); }
.btn.wide { display: block; width: 100%; margin-top: 12px; padding: 15px; font-size: 16px; }
.btn:disabled { opacity: 0.55; cursor: default; }
.hint { margin: 12px 0 0; color: var(--mute); font-size: 14px; }
.warn { color: var(--red); font-weight: 700; }

.status { margin: 20px 0 0; color: var(--mute); font: 14px var(--mono); }
.status:empty { display: none; }
.notice { margin: 20px 0 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
.notice.refused { border-color: var(--red); background: rgba(255, 107, 107, 0.08); }

/* The answer */
.case { margin: 22px 0 0; padding: 22px; border-radius: 20px; border: 1px solid var(--line); border-left: 4px solid var(--c, var(--blue)); background: var(--panel); animation: rise 0.35s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
[data-evidence="Proven"] { --c: var(--lime); }
[data-evidence="Reported"] { --c: var(--cyan); }
[data-evidence="Inferred"] { --c: var(--amber); }
[data-evidence="Not visible"] { --c: var(--mute); }
[data-evidence="Unknown"] { --c: var(--blue); }
.case-head { display: flex; align-items: center; gap: 12px; }
.case-head img { width: 40px; height: 40px; padding: 6px; border-radius: 50%; background: #0f1640; border: 2px solid var(--c); }
.pill { display: inline-block; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--c); color: var(--c); font: 700 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.case h2 { margin: 12px 0 10px; font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; }
.case ul { margin: 0; padding-left: 20px; }
.case li { margin: 6px 0; overflow-wrap: anywhere; }
.on-chain { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 6px 12px 6px 6px; border-radius: 99px; border: 1px solid var(--line); background: var(--deep); font-size: 14px; }
.on-chain img { width: 24px; height: 24px; }
.next { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(221, 242, 74, 0.08); border: 1px solid rgba(221, 242, 74, 0.3); }
.next b { display: block; color: var(--lime); font: 700 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
.group { margin: 16px 0 0; }
.group h3 { margin: 0 0 8px; color: var(--mute); font: 700 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px; border-radius: 99px; border: 1px solid var(--line); background: var(--deep); font-size: 14px; }
.chip img, .chip .mono { width: 22px; height: 22px; border-radius: 50%; }
.chip .mono { display: grid; place-items: center; background: #1a2257; color: var(--lime); font: 800 12px system-ui, sans-serif; }
.chip img.light, .logos img.light { background: #e9ecf7; padding: 3px; }
.case h2:focus { outline: none; }
.group.cant .chip { opacity: 0.75; }
.group.unknown .chip { opacity: 0.55; }
.links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 14px 0 0; }
.routes { margin: 16px 0 0; padding: 14px; border-radius: 12px; border: 1px dashed var(--line); }
.routes p { margin: 0 0 10px; color: var(--mute); font-size: 14px; }
.routes .btn { margin: 0 8px 10px 0; }
.msg { margin: 16px 0 0; }
.msg label { display: block; margin-bottom: 6px; color: var(--mute); font-size: 14px; }
.msg textarea { width: 100%; min-height: 130px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--deep); color: var(--ink); font: 13px/1.5 var(--mono); resize: vertical; }
.msg .btn { margin-top: 8px; }

/* Sections */
.sec { margin: 48px 0 0; }
.sec h2 { margin: 0 0 14px; font-size: 26px; letter-spacing: -0.02em; }
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.case-btn { all: unset; box-sizing: border-box; display: grid; gap: 4px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); cursor: pointer; }
.case-btn:hover { border-color: var(--lime); }
.case-btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.case-btn .pair { display: flex; margin-bottom: 6px; }
.case-btn .pair img { width: 30px; height: 30px; padding: 3px; border-radius: 50%; background: #0f1640; border: 1px solid rgba(154, 163, 199, 0.35); }
.case-btn .pair img + img { margin-left: -8px; }
.case-btn b { font-size: 16px; }
.case-btn span { color: var(--mute); font-size: 14px; }
.words { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.words li { padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass); color: var(--mute); font-size: 14px; }
.words b { color: var(--c); margin-right: 4px; }
.small { margin: 0; padding-left: 20px; color: var(--mute); font-size: 14px; }
.small li { margin: 6px 0; }
code { font: 13px var(--mono); color: var(--ink); overflow-wrap: anywhere; }

/* "My wallet shows zero" */
.pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 18px 0 0; }
.pick label { display: grid; gap: 6px; color: var(--mute); font: 700 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.pick select { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 15px system-ui, sans-serif; text-transform: none; letter-spacing: 0; }
.fix { margin: 14px 0 0; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); }
.fix-head { display: flex; align-items: center; gap: 10px; }
.fix-head .chips { flex: 0 0 auto; }
.fix h3 { margin: 12px 0 0; font-size: 18px; }
.fix p { margin: 8px 0; }
.fix .meta { color: var(--mute); font-size: 13px; }
.safe { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 107, 107, 0.4); background: rgba(255, 107, 107, 0.08); font-size: 14px; }
.safe b { color: var(--red); }

footer { display: grid; gap: 6px; max-width: 1080px; margin: 0 auto; padding: 24px 16px 40px; color: var(--mute); font-size: 13px; border-top: 1px solid var(--line); }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  .cases { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .stats div:nth-child(3) { padding-left: 0; border-left: 0; }
  .gh { display: none; }
}
@media (max-width: 420px) {
  .seg a { padding: 7px 10px; font-size: 13px; }
  .brand .name { font-size: 16px; }
  .node { width: 96px; }
  .node img, .node > svg { width: 36px; height: 36px; padding: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The "my wallet shows zero" flow */
.hero.solo { grid-template-columns: 1fr; }
.flow { padding: 22px; }
.steps { display: flex; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; counter-reset: step; flex-wrap: wrap; }
.steps li { counter-increment: step; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; border: 1px solid var(--line); color: var(--mute); font-size: 14px; font-weight: 700; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1a2257; color: var(--mute); font-size: 12px; }
.steps li.on { border-color: var(--lime); color: var(--ink); }
.steps li.on::before { background: var(--lime); color: var(--deep); }
.steps li.done::before { content: "✓"; background: rgba(221, 242, 74, 0.25); color: var(--lime); }
.flow h2 { margin: 4px 0 14px; font-size: 24px; letter-spacing: -0.02em; }
.flow h2:focus { outline: none; }
.crumb { margin: 0; color: var(--lime); font: 700 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--deep); cursor: pointer; }
.tile svg { grid-row: span 2; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: rgba(221, 242, 74, 0.1); fill: none; stroke: var(--lime); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile b { font-size: 16px; }
.tile span { color: var(--mute); font-size: 14px; }
.tile:hover, .wallet:hover { border-color: var(--lime); }
.tile:focus-visible, .wallet:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.wallets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wallet { all: unset; box-sizing: border-box; display: grid; justify-items: center; gap: 8px; padding: 16px 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--deep); cursor: pointer; text-align: center; }
.wallet img, .wallet .mono { width: 44px; height: 44px; border-radius: 12px; }
.wallet img.light { background: #e9ecf7; padding: 4px; }
.wallet .mono { display: grid; place-items: center; background: #1a2257; color: var(--lime); font: 800 18px system-ui, sans-serif; }
.wallet b { font-size: 14px; }
.wallet.other { border-style: dashed; }
.back { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.todo { margin: 10px 0 0; padding-left: 22px; }
.todo li { margin: 6px 0; }
.todo li::marker { color: var(--lime); font-weight: 800; }
@media (max-width: 640px) { .tiles { grid-template-columns: 1fr; } }

.fix-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.badge-sure { padding: 4px 10px; border-radius: 99px; border: 1px solid; font: 700 12px var(--mono); }
.badge-sure.official { color: var(--lime); border-color: rgba(221, 242, 74, 0.5); background: rgba(221, 242, 74, 0.08); }
.badge-sure.confirmed { color: var(--cyan); border-color: rgba(94, 224, 240, 0.5); background: rgba(94, 224, 240, 0.08); }
.badge-sure.reported { color: var(--amber); border-color: rgba(255, 181, 71, 0.5); background: rgba(255, 181, 71, 0.08); }

/* ---- The answer as a route (styles shared with Intent Sentinel) ---- */
.badge.code { color: var(--lime); border-color: rgba(221, 242, 74, 0.45); letter-spacing: 0.08em; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.cta a { padding: 12px 18px; border-radius: 14px; font-weight: 800; text-decoration: none; border: 1px solid var(--line); color: var(--ink); background: var(--glass); }
.cta a.go { background: var(--lime); border-color: var(--lime); color: var(--deep); box-shadow: 0 10px 30px -12px rgba(221, 242, 74, 0.8); }

.reading { display: grid; justify-items: center; gap: 14px; margin: 22px 0 0; padding: 34px 20px; border-radius: 20px; border: 1px solid var(--line); background: var(--glass); text-align: center; }
.reading::before { content: ""; width: 72px; height: 72px; border-radius: 50%; border: 3px solid rgba(221, 242, 74, 0.2); border-top-color: var(--lime); box-shadow: 0 0 40px -6px rgba(221, 242, 74, 0.7); animation: spin 1s linear infinite; }
.reading b { font-size: 18px; }
.reading span { color: var(--mute); font: 13px var(--mono); }
@keyframes spin { to { transform: rotate(360deg); } }

.case { --c: var(--blue); }
.case .summary { margin: 0 0 6px; color: var(--ink); opacity: 0.9; font-size: 17px; }
.track { position: relative; display: flex; justify-content: space-between; gap: 10px; margin: 22px 0 8px; padding: 6px 0; }
.track::before { content: ""; position: absolute; left: 10%; right: 10%; top: 42px; height: 2px; background: linear-gradient(90deg, var(--c), rgba(154, 163, 199, 0.25)); transform-origin: left; animation: grow 0.9s ease-out both; }
@keyframes grow { from { transform: scaleX(0); } }
.stop { position: relative; flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: 4px; text-align: center; animation: pop 0.45s both; animation-delay: calc(var(--i) * 0.35s); }
.stop b { font-size: 15px; line-height: 1.2; margin-top: 6px; }
.coin { position: relative; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #18235a, #070b26 72%); border: 2px solid var(--line); }
.coin img { width: 38px; height: 38px; border-radius: 50%; }
.coin img.light { background: #e9ecf7; padding: 4px; }
.stop.passed .coin { border-color: var(--lime); box-shadow: 0 0 22px -4px rgba(221, 242, 74, 0.7); }
.stop.passed .coin::after { content: "✓"; position: absolute; right: -4px; bottom: -2px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: #04061a; font-weight: 900; font-size: 13px; }
.stop.here .coin { border-color: var(--c); box-shadow: 0 0 34px -2px var(--c); }
.stop.here .coin::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--c); opacity: 0; animation: ring 2s ease-out infinite; }
.stop.ahead { opacity: 0.6; }
.stop.ahead .coin { border-style: dashed; }
.stop.ahead .coin img { filter: grayscale(0.7); }
.stop.failed .coin { border-color: var(--red); box-shadow: 0 0 26px -4px var(--red); }
.stop.failed .coin::after { content: "✕"; position: absolute; right: -4px; bottom: -2px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: #04061a; font-weight: 900; font-size: 13px; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.92); } to { transform: none; } }
@keyframes ring { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(1.45); opacity: 0; } }
.cls { justify-self: center; white-space: nowrap; font: 600 11.5px var(--mono); padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; }
.c-proven { color: var(--lime); } .c-reported { color: var(--cyan); } .c-inferred { color: var(--amber); } .c-unknown, .c-not_visible { color: var(--mute); }

.movers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; }
.movers > b { color: var(--mute); font: 700 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; margin-right: 4px; }
.party { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(6, 9, 34, 0.86); color: var(--mute); font-size: 13.5px; font-weight: 700; }
.party .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mute); }
.party.lit { color: #04061a; background: var(--c); border-color: var(--c); box-shadow: 0 0 30px -2px var(--c); }
.party.lit .dot { background: #04061a; }
.case .next { margin-top: 12px; }

details.more { margin: 16px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
details.more summary { cursor: pointer; color: var(--lime); font-weight: 700; }
details.more[open] summary { margin-bottom: 8px; }

@media (max-width: 640px) {
  .track { flex-direction: column; gap: 14px; }
  .track::before { left: 35px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; background: linear-gradient(180deg, var(--c), rgba(154, 163, 199, 0.25)); }
  .stop { grid-template-columns: 56px minmax(0, 1fr) auto; justify-items: start; align-items: center; gap: 0 12px; text-align: left; }
  .stop .coin { grid-row: 1 / 3; width: 56px; height: 56px; }
  .stop .coin img { width: 30px; height: 30px; }
  .stop b { margin: 0; align-self: end; }
  .stop .cls { grid-column: 2; grid-row: 2; justify-self: start; }
}

.case .next.plain { margin: 10px 0 0; padding: 0; background: none; border: 0; color: var(--ink); font-size: 15px; }
.case .routes { margin-top: 18px; }

/* The answer is coloured by its outcome, as on Intent Sentinel. */
.case[data-tone="done"] { --c: var(--lime); }
.case[data-tone="waiting"] { --c: var(--amber); }
.case[data-tone="act"] { --c: var(--cyan); }
.case[data-tone="unknown"] { --c: var(--blue); }
.case[data-tone="failed"] { --c: var(--red); }
.case .pill { color: var(--c); border-color: var(--c); }

/* ---- Coverage: the wheel (from Intent Sentinel) and the grid ---- */
.strip a { color: var(--ink); text-decoration: none; }
.kicker { margin: 0 0 6px; color: var(--lime); font: 700 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.say { color: var(--mute); max-width: 520px; }
.reach { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; overflow: hidden; }
.wheel { --core: 400px; --c: 44px; position: relative; width: var(--core); height: var(--core); border-radius: 50%; }
.wheel::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(12, 18, 54, 0.92) 58%, rgba(12, 18, 54, 0.35) 72%, transparent 74%); box-shadow: inset 0 0 0 1px rgba(221, 242, 74, 0.2); }
.w-ring { position: absolute; inset: 0; animation: wspin var(--t) linear infinite; }
.w-ring.outer { --rad: calc(var(--core) / 2 - 30px); --t: 140s; }
.w-ring.inner { --rad: calc(var(--core) * 0.3); --t: 100s; animation-direction: reverse; }
.w-coin { position: absolute; left: 50%; top: 50%; width: var(--c); height: var(--c); margin: calc(var(--c) / -2) 0 0 calc(var(--c) / -2); transform: rotate(var(--a)) translateY(calc(var(--rad) * -1)) rotate(calc(var(--a) * -1)); }
.w-coin img, .w-coin .mono { display: grid; place-items: center; width: 100%; height: 100%; padding: 14%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #18204f, #070b22 72%); box-shadow: inset 0 0 0 1px rgba(143, 180, 255, 0.35); animation: wspin var(--t) linear infinite reverse, wlit var(--cycle) ease-in-out var(--d) infinite; }
.w-coin img.light { background: #e9ecf7; }
.w-coin .mono { color: var(--lime); font: 800 15px system-ui, sans-serif; padding: 0; }
.w-ring.inner .w-coin img, .w-ring.inner .w-coin .mono { animation-direction: normal, normal; }
.w-hub { position: absolute; z-index: 2; left: 50%; top: 50%; width: calc(var(--core) * 0.36); height: calc(var(--core) * 0.36); transform: translate(-50%, -50%); display: grid; align-content: center; justify-items: center; gap: 3px; text-align: center; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #1d2566, #070b22 74%); box-shadow: inset 0 0 0 2px var(--lime), inset 0 0 0 9px rgba(221, 242, 74, 0.14), 0 0 70px -6px var(--lime); }
.w-hub img { width: 48px; height: 48px; }
.w-hub b { font-size: 20px; line-height: 1.1; }
.w-hub small { font: 600 10.5px/1.25 var(--mono); color: var(--lime); }
@keyframes wspin { to { transform: rotate(360deg); } }
@keyframes wlit { 0%, 7% { box-shadow: inset 0 0 0 2px var(--lime), 0 0 18px var(--lime); } 14%, 100% { box-shadow: inset 0 0 0 1px rgba(143, 180, 255, 0.35); } }

.cover-tabs { display: flex; gap: 6px; margin: 22px 0 12px; }
.cover-tabs button { padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--glass); color: var(--mute); font: 700 14px system-ui, sans-serif; cursor: pointer; }
.cover-tabs button.on { background: var(--lime); border-color: var(--lime); color: var(--deep); }
.cover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.svc { display: grid; gap: 8px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--glass); }
.svc-head { display: flex; align-items: center; gap: 10px; }
.svc-head img, .svc-head .mono { width: 34px; height: 34px; border-radius: 10px; }
.svc-head img.light { background: #e9ecf7; padding: 3px; }
.svc-head .mono { display: grid; place-items: center; background: #1a2257; color: var(--lime); font: 800 15px system-ui, sans-serif; }
.svc-head b { font-size: 15px; }
.svc-head small { display: block; color: var(--mute); font: 12px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
.pays { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.pays li { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); font: 600 12px var(--mono); }
.pays .yes { color: var(--lime); border-color: rgba(221, 242, 74, 0.45); }
.pays .no { color: var(--red); border-color: rgba(255, 107, 107, 0.45); text-decoration: line-through; }
.pays .unknown { color: var(--mute); }
.svc .meta { color: var(--mute); font-size: 12.5px; }
.svc .meta a { color: var(--mute); }
@media (max-width: 820px) { .reach { grid-template-columns: 1fr; } .wheel { --core: min(320px, 84vw); --c: 32px; justify-self: center; } .w-hub b { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .w-ring, .w-coin img, .w-coin .mono { animation: none !important; } }