/* v8.14 · cards "dados reais" (Radar + Cloudflare Status) nos labs */
.rl { border-color:rgba(0,194,212,.35); background:linear-gradient(180deg, rgba(0,194,212,.06), transparent); }
.rl h3 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rl .rl-dot { width:9px; height:9px; border-radius:50%; background:#6b7280; display:inline-block; }
.rl[data-state="live"] .rl-dot { background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.2); animation:rlPulse 1.6s infinite; }
.rl[data-state="error"] .rl-dot { background:#f6821f; }
@keyframes rlPulse { 0%,100% { box-shadow:0 0 0 3px rgba(34,197,94,.15) } 50% { box-shadow:0 0 0 7px rgba(34,197,94,0) } }
@media (prefers-reduced-motion: reduce) { .rl .rl-dot { animation:none } }
.rl .rl-sub { font-size:.8rem; color:var(--muted,#9aa5b1); margin:4px 0 10px; max-width:80ch; }
.rl .rl-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; }
.rl .rl-col h4 { font-size:.82rem; margin:0 0 8px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted,#9aa5b1); }
.rl .rl-bars { display:grid; gap:7px; }
.rl .rl-bar { display:grid; grid-template-columns:minmax(90px, 1.2fr) 2fr auto; align-items:center; gap:8px; font-size:.82rem; }
.rl .rl-bar > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rl .rl-bar i { display:block; height:8px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; }
.rl .rl-bar i b { display:block; height:100%; width:0; border-radius:6px; background:linear-gradient(90deg,#00c2d4,#f6821f); transition:width .6s ease; }
.rl .rl-bar.is-bad i b { background:linear-gradient(90deg,#f87171,#f6821f); }
.rl .rl-bar.is-ok i b { background:linear-gradient(90deg,#22c55e,#00c2d4); }
.rl .rl-bar em { font-style:normal; font-weight:700; font-variant-numeric:tabular-nums; min-width:52px; text-align:right; }
.rl .rl-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:10px; }
.rl .rl-kpi { padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); }
.rl .rl-kpi b { display:block; font-size:1.35rem; line-height:1.1; }
.rl .rl-kpi b[data-state="live"], .rl .rl-kpi b.is-live { color:#7ff3ff; }
.rl .rl-kpi small { display:block; margin-top:3px; font-size:.72rem; color:var(--muted,#9aa5b1); }
.rl .rl-foot { margin-top:12px; font-size:.74rem; color:var(--muted,#9aa5b1); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; }
.rl .rl-foot a { color:#00c2d4; }
.rl .rl-note { font-size:.78rem; color:#f6821f; margin:6px 0 0; }
.rl .rl-wait { font-size:.82rem; color:var(--muted,#9aa5b1); }
.rl ul.rl-list { margin:0; padding:0; list-style:none; display:grid; gap:4px; font-size:.82rem; }
.rl ul.rl-list li { display:flex; justify-content:space-between; gap:8px; }
.rl ul.rl-list li b { font-variant-numeric:tabular-nums; }
.rl .rl-pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:.7rem; font-weight:700; border:1px solid currentColor; }
.rl .rl-pill.ok { color:#22c55e } .rl .rl-pill.bad { color:#f87171 } .rl .rl-pill.warn { color:#fbbf24 }
/* v8.23 · card de bots ao vivo em largura total + serie horaria */
.rl.rl-wide { margin-top:0; }
.rl .rl-kpis-bot { grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); margin-bottom:14px; }
.rl .rl-kpis-bot .rl-kpi b { font-size:1.7rem; }
.rl .rl-ts { margin:4px 0 14px; }
.rl .rl-ts h4 { font-size:.82rem; margin:0 0 8px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted,#9aa5b1); }
.rl .rl-ts-svg { display:block; width:100%; height:90px; border-radius:8px; background:rgba(255,255,255,.03); }
.rl .rl-ts-svg .ts-bot { fill:#f87171; opacity:.9; }
.rl .rl-ts-svg .ts-hum { fill:#22c55e; opacity:.75; }
.rl .rl-ts-legend { display:flex; gap:14px; font-size:.74rem; margin-top:6px; }
.rl .rl-ts-legend span::before { content:''; display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; background:#9aa5b1; }
.rl .rl-ts-legend .is-bad::before { background:#f87171; } .rl .rl-ts-legend .is-ok::before { background:#22c55e; }
body.light .rl .rl-ts-svg { background:rgba(0,0,0,.04); }

/* v8.24 · modo claro: card Radar (bots/DDoS) com texto legivel */
body.light .rl .rl-kpi { border-color:rgba(15,23,42,.1); background:rgba(15,23,42,.03); }
body.light .rl .rl-bar i { background:rgba(15,23,42,.08); }
body.light .rl .rl-kpi b[data-state="live"], body.light .rl .rl-kpi b.is-live { color:#0e7490; }
body.light .rl .rl-pill.ok { color:#15803d; } body.light .rl .rl-pill.bad { color:#b91c1c; } body.light .rl .rl-pill.warn { color:#a16207; }
body.light .rl .rl-foot a { color:#0e7490; text-decoration:underline; }
body.light .rl .rl-note { color:#c2410c; }
body.light .rl .rl-ts-legend span::before { background:#51707a; }
body.light .rl .rl-ts-svg .ts-bot { fill:#dc2626; } body.light .rl .rl-ts-svg .ts-hum { fill:#16a34a; }

/* v8.27 (QA D06) · estado 'stale': dado preservado, mas marcado como desatualizado (ambar, sem pulso) */
.rl[data-state="stale"] .rl-dot { background:#fbbf24; animation:none; }
.rl .rl-stale { font-size:.74rem; color:#fbbf24; margin:-4px 0 8px; }
body.light .rl .rl-stale { color:#a16207; }
.rl[data-state="stale"] .rl-kpi b { opacity:.8; }
[data-radar][data-stale="true"] { opacity:.72; text-decoration:underline dotted; text-underline-offset:3px; }