:root{color-scheme:dark}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:#070a12;color:#e8eefc}
.wrap{max-width:1100px;margin:0 auto;padding:22px 16px 40px}
h1{font-size:20px;margin:10px 0 8px}
.sub{color:#b8c6e6;font-size:13px;line-height:1.5}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.badge{display:inline-block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#9fb7ff;background:rgba(127,179,255,.12);border:1px solid rgba(127,179,255,.25);padding:6px 10px;border-radius:999px}
.card{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);border-radius:14px;padding:12px}
.grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
@media(min-width:980px){.grid{grid-template-columns: 2fr 1fr}}
canvas{width:100%;height:520px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(0,0,0,.26);display:block}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;color:#cfe1ff}
.kv{display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px}
.kv div{padding:8px 10px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(0,0,0,.18)}
a{color:#7fb3ff;text-decoration:none}
a:hover{text-decoration:underline}
.pre{white-space:pre;overflow:auto;padding:10px 10px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(0,0,0,.20);max-height:220px}

/* --- trends block --- */
.trends{margin-top:12px}
.trendGrid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:980px){.trendGrid{grid-template-columns:1fr 1fr}}
.spark{width:100%;height:120px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(0,0,0,.18);display:block}
.bars{width:100%;height:140px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(0,0,0,.18);display:block}
.trTitle{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.trMeta{color:#9fb0d3;font-size:12px}

/* G20_SCAN_BADGE_CSS_V1 */
.badge2{display:inline-block;font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
.badge_ok{color:#a8ffb0;border-color:rgba(168,255,176,.25);background:rgba(168,255,176,.10)}
.badge_warn{color:#ffd39a;border-color:rgba(255,211,154,.25);background:rgba(255,211,154,.10)}
.badge_bad{color:#ff9a9a;border-color:rgba(255,154,154,.25);background:rgba(255,154,154,.10)}

/* G20_INCIDENT_BADGE_CSS_V1 */
.incRow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.badge3{display:inline-block;font-weight:900;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
.badge_ok2{color:#a8ffb0;border-color:rgba(168,255,176,.25);background:rgba(168,255,176,.10)}
.badge_med2{color:#ffd39a;border-color:rgba(255,211,154,.25);background:rgba(255,211,154,.10)}
.badge_crit2{color:#ff9a9a;border-color:rgba(255,154,154,.25);background:rgba(255,154,154,.10)}