@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --bg: #0A0E1A;
  --panel: #101728;
  --panel-2: #141d33;
  --line: rgba(242,240,233,0.08);
  --ink: #F2F0E9;
  --muted: #838CA3;
  --saffron: #FF9F3C;
  --green: #23B26D;
  --alert: #FF5D5D;
  --blue: #5AA9E6;
}

*{ box-sizing:border-box; margin:0; padding:0; }

body{
  background:
    radial-gradient(ellipse at 20% -10%, rgba(255,159,60,0.07), transparent 45%),
    radial-gradient(ellipse at 90% 0%, rgba(35,178,109,0.06), transparent 40%),
    var(--bg);
  color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.mono{ font-family:'IBM Plex Mono', monospace; }
.display{ font-family:'Noto Sans Malayalam', 'Space Grotesk', sans-serif; }

.feed-item h3, .feed-tab, .panel-head h2{ font-family:'Noto Sans Malayalam','IBM Plex Sans',sans-serif; }

/* ---------- Ticker ---------- */
.ticker-bar{
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
  padding: 7px 0;
  position: relative;
}
.ticker-track{
  display: inline-flex;
  gap: 40px;
  animation: scroll-left 38s linear infinite;
  padding-left: 100%;
}
.ticker-item{ font-size: 12.5px; letter-spacing:0.02em; color: var(--muted); font-family:'Noto Sans Malayalam','IBM Plex Mono',monospace; }
.ticker-item b{ color: var(--ink); font-weight:500; }
.tag{
  display:inline-block; font-size:9.5px; font-weight:600; letter-spacing:0.08em;
  padding: 1px 6px; border-radius: 3px; margin-right:7px; vertical-align:1px;
  font-family:'IBM Plex Mono',monospace;
}


@keyframes scroll-left{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
}

/* ---------- Header ---------- */
header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px clamp(18px,4vw,48px) 18px;
  border-bottom: 1px solid var(--line);
}
.wordmark{ display:flex; align-items:center; gap:14px; }
.wordmark .flag-bar{
  width:5px; height:34px; border-radius:2px;
  background: linear-gradient(180deg, var(--saffron) 0%, var(--saffron) 33%, var(--ink) 33%, var(--ink) 66%, var(--green) 66%, var(--green) 100%);
}
.wordmark h1{ font-size: 22px; font-weight:700; letter-spacing:0; }
.wordmark p{ font-size:11px; color:var(--muted); letter-spacing:0.04em; margin-top:2px; font-family:'IBM Plex Mono',monospace; }

.status{ display:flex; align-items:center; gap:22px; }
.clock{ text-align:right; }
.clock .time{ font-size:18px; font-weight:600; letter-spacing:0.02em; }
.clock .zone{ font-size:10px; color:var(--muted); letter-spacing:0.06em; }
.live-pill{
  display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600;
  letter-spacing:0.06em; color:var(--green); border:1px solid rgba(35,178,109,0.35);
  padding:5px 10px; border-radius:20px; background:rgba(35,178,109,0.08);
}
.dot{ width:6px; height:6px; border-radius:50%; background:var(--green); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(35,178,109,0.5);} 50%{ opacity:0.55; box-shadow:0 0 0 5px rgba(35,178,109,0);} }

/* ---------- Layout ---------- */
main{ padding: 30px clamp(18px,4vw,48px) 60px; max-width:1400px; margin:0 auto; }

/* Stat strip */
.stat-strip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px;
  overflow:hidden; margin-bottom:34px;
}
.stat{ background:var(--panel); padding:18px 20px; }
.stat .label{ font-size:10.5px; color:var(--muted); letter-spacing:0.07em; text-transform:uppercase; font-family:'IBM Plex Mono',monospace; }
.stat .value{ font-size:24px; font-weight:600; margin-top:8px; letter-spacing:-0.01em; }
.stat .delta{ font-size:11.5px; margin-top:5px; font-weight:500; }
.delta.up{ color:var(--green); }
.delta.down{ color:var(--alert); }

/* Grid: map + feed */
.grid{ display:grid; grid-template-columns: 1.15fr 1fr; gap:24px; margin-bottom:30px; }
@media (max-width: 920px){ .grid{ grid-template-columns:1fr; } }

.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:22px;
}
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.panel-head h2{ font-size:14px; font-weight:600; letter-spacing:0.01em; }
.panel-head .count{ font-size:10.5px; color:var(--muted); font-family:'IBM Plex Mono',monospace; }

/* Map */
.map-wrap{ position:relative; }
#map{
  width:100%; height:420px; border-radius:8px; overflow:hidden;
  border:1px solid var(--line); filter: saturate(0.85) brightness(0.92);
}
.map-legend{ display:flex; gap:18px; margin-top:14px; font-size:11px; color:var(--muted); }
.map-legend span{ display:inline-flex; align-items:center; gap:6px; }
.swatch{ width:8px; height:8px; border-radius:50%; }

/* Leaflet dark-theme overrides */
.leaflet-container{ background:var(--bg); font-family:'IBM Plex Sans', sans-serif; }
.leaflet-popup-content-wrapper{
  background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:8px;
}
.leaflet-popup-tip{ background:var(--panel); }
.leaflet-popup-content{ font-size:12.5px; margin:10px 12px; font-family:'Noto Sans Malayalam','IBM Plex Sans',sans-serif; }
.leaflet-popup-content b{ font-family:'IBM Plex Mono', monospace; }
.leaflet-control-zoom a{
  background:var(--panel) !important; color:var(--ink) !important; border-color:var(--line) !important;
}
.leaflet-control-attribution{
  background:rgba(16,23,40,0.85) !important; color:var(--muted) !important;
}
.leaflet-control-attribution a{ color:var(--blue) !important; }

.city-marker{
  width:14px; height:14px; border-radius:50%;
  background:var(--saffron); border:2px solid rgba(255,159,60,0.35);
  box-shadow:0 0 0 4px rgba(255,159,60,0.12);
}
.city-marker.alert{
  background:var(--alert); border-color:rgba(255,93,93,0.35);
  box-shadow:0 0 0 4px rgba(255,93,93,0.12);
}

/* Feed list */
.feed-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}

.feed-item .ftag {
  flex: 0 0 64px;
}

.feed-content {
  flex: 1;
  min-width: 0;
}

.feed-item h3 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.feed-item .meta {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 4px;
  font-family: 'IBM Plex Mono', monospace;
}

/* Bottom columns */
.cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }

footer{
  border-top:1px solid var(--line); padding:22px clamp(18px,4vw,48px);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:11px; color:var(--muted); font-family:'IBM Plex Mono',monospace;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; }
}