:root{
  --flag-red:#DC143C;
  --flag-blue:#003893;
  --bg:#0a0b10; --panel:#0f1016; --panel2:#10131a; --panel3:#0f1412;
  --text:#f4f6fa; --muted:#a7adba; --white:#ffffff;
  --shadow:0 14px 50px rgba(0,0,0,.45);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 420px at 10% -10%, rgba(220,20,60,.22), transparent 60%),
    radial-gradient(1000px 300px at 110% 0%, rgba(0,56,147,.20), transparent 60%),
    linear-gradient(180deg,#090a0f,#0a0b10 30%,#080a10);
}
a{color:#93c5fd;text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1150px;margin:0 auto;padding:0 16px}

/* Header */
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
  background:rgba(8,10,16,.7); border-bottom:2px solid var(--flag-blue)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px}
.brand .flagmark{display:block;width:28px;height:28px}
.brand h1{font-size:16px;margin:0;letter-spacing:.6px;text-transform:uppercase}
nav{display:flex;gap:14px;flex-wrap:wrap}
nav a{font-size:14px;opacity:.95}

/* Flag divider */
.flag-rule{height:8px;background:
  linear-gradient(90deg,var(--flag-blue) 0 14px,transparent 14px) repeat-x,
  linear-gradient(90deg,var(--flag-red) 0 14px,transparent 14px) repeat-x;
  background-size:28px 8px,28px 4px; background-position:0 0,0 4px}

/* Ticker */
.ticker{overflow:hidden;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg, rgba(220,20,60,.20), rgba(0,56,147,.15))}
.ticker-inner{display:flex;gap:40px;padding:10px 0;animation:scroll 26s linear infinite}
.badge{font-size:12px;padding:4px 10px;border-radius:999px;background:var(--flag-red);color:var(--white);margin-right:8px;border:1px solid rgba(255,255,255,.18)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Sections */
section{padding:28px 0}
h2{font-size:24px;margin:0 0 14px}
.card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)), var(--panel);
  border:1px solid rgba(255,255,255,.10); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px}
.card.alt{background:linear-gradient(180deg, rgba(220,20,60,.10), rgba(255,255,255,.00)), var(--panel2); border-left:3px solid var(--flag-red)}
.card.alt2{background:linear-gradient(180deg, rgba(0,56,147,.12), rgba(255,255,255,.00)), var(--panel3); border-left:3px solid var(--flag-blue)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.tile{border:1px solid rgba(255,255,255,.10);border-radius:var(--radius);padding:16px;background:rgba(255,255,255,.02)}
.muted{color:var(--muted)}

/* Icon chips */
.li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px dashed rgba(255,255,255,.14);border-radius:12px}

/* Status chips */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35)}
.chip.warn{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35)}
.chip.danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35)}

/* Map iframe */
.map-embed{width:100%;height:320px;border-radius:var(--radius);box-shadow:var(--shadow);background:#0f1016;border:1px solid rgba(255,255,255,.12);overflow:hidden;position:relative}
.map-embed::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(0,56,147,.35);animation:glow 2.2s ease-in-out infinite}
.map-embed iframe{width:100%;height:100%;display:block;border:0}
@keyframes glow{0%,100%{box-shadow:inset 0 0 0 2px rgba(0,56,147,.35)}50%{box-shadow:inset 0 0 0 2px rgba(220,20,60,.45)}}

/* Chant banner */
.chant{position:relative;overflow:hidden;border-radius:16px;background:linear-gradient(90deg,rgba(220,20,60,.18),rgba(0,56,147,.16));border:1px solid rgba(255,255,255,.12)}
.chant .line{padding:10px 14px;white-space:nowrap;animation:chant 22s linear infinite}
@keyframes chant{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Emergency banner */
.emergency{border:2px solid var(--flag-red); position:relative; overflow:hidden}
.emergency .bg{position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(45deg, rgba(220,20,60,.12), rgba(220,20,60,.12) 12px, transparent 12px, transparent 24px); animation: slideBg 3s linear infinite}
@keyframes slideBg{from{background-position:0 0}to{background-position:60px 0}}

footer{color:var(--muted);padding:20px 0 60px;font-size:14px;border-top:2px solid var(--flag-blue)}
@media(max-width:900px){.row,.grid{grid-template-columns:1fr}nav{overflow-x:auto}}
@media print{header,.ticker,.live-controls,.cta{display:none!important}body{background:white;color:black}.card,.tile{box-shadow:none;border-color:#bbb}a{color:black;text-decoration:underline}.map-embed iframe{display:none}}