:root{
  --bg:#0B1220;
  --bg-2:#0E1729;
  --panel:#121B2E;
  --panel-border:#223050;
  --text:#E8ECF2;
  --text-dim:#8FA0BF;
  --amber:#F2A93B;
  --red:#E4483C;
  --teal:#3FC1B0;
  --blue:#4C8DFF;
  --font-display:'Oswald',sans-serif;
  --font-body:'IBM Plex Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(76,141,255,0.07), transparent),
    radial-gradient(900px 500px at 100% 0%, rgba(242,169,59,0.06), transparent),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.5;
  background-attachment:fixed;
}
.mono{font-family:var(--font-mono);}

a{color:var(--blue);}

.rail{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:50;
  background:repeating-linear-gradient(90deg,var(--amber) 0 18px, transparent 18px 26px);
  opacity:.5;
}

/* ---------- Topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px; border-bottom:1px solid var(--panel-border);
  background:linear-gradient(180deg, rgba(18,27,46,.9), rgba(18,27,46,.4));
  position:sticky; top:0; z-index:40; backdrop-filter:blur(6px);
  flex-wrap:wrap; gap:12px;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark svg{width:34px; height:34px; display:block;}
.brand-text{display:flex; flex-direction:column; line-height:1.1;}
.brand-eyebrow{font-size:11px; letter-spacing:.14em; color:var(--amber); font-weight:600;}
.brand-title{font-family:var(--font-display); font-size:20px; letter-spacing:.04em; font-weight:600;}
.topbar-status{display:flex; gap:24px; flex-wrap:wrap;}
.status-item{display:flex; flex-direction:column; gap:2px; align-items:flex-end;}
.status-label{font-size:10px; letter-spacing:.12em; color:var(--text-dim);}
.status-value{font-size:13px; display:flex; align-items:center; gap:6px;}
.dot{width:8px; height:8px; border-radius:50%; display:inline-block;}
.dot-amber{background:var(--amber); box-shadow:0 0 8px var(--amber);}
.dot-teal{background:var(--teal); box-shadow:0 0 8px var(--teal);}
.dot-red{background:var(--red); box-shadow:0 0 8px var(--red);}

main{max-width:1280px; margin:0 auto; padding:28px 24px 60px;}

/* ---------- Panels ---------- */
.panel{
  background:linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--panel-border);
  position:relative;
  padding:20px 22px;
}
.corner-ticks::before,.corner-ticks::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none;
  border-color:var(--amber); opacity:.65;
}
.corner-ticks::before{ top:-1px; left:-1px; border-top:2px solid var(--amber); border-left:2px solid var(--amber);}
.corner-ticks::after{ bottom:-1px; right:-1px; border-bottom:2px solid var(--amber); border-right:2px solid var(--amber);}

.panel-eyebrow{font-size:11px; letter-spacing:.14em; color:var(--amber); font-weight:600; margin-bottom:4px;}
.panel-title{font-family:var(--font-display); font-size:19px; font-weight:600; margin:0; letter-spacing:.01em;}
.panel-header{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap;}
.panel-footnote{font-size:12px; color:var(--text-dim); margin-top:14px;}

/* ---------- Hero ---------- */
.hero{display:grid; grid-template-columns:340px 1fr; gap:18px; margin-bottom:22px;}
.hero-gauge-wrap{display:flex; flex-direction:column; align-items:center;}
.gauge{width:100%; max-width:260px; margin-top:6px;}
.gauge-readout{display:flex; flex-direction:column; align-items:center; margin-top:-18px;}
.gauge-number{font-size:34px; font-weight:600; color:var(--amber);}
.gauge-caption{font-size:11px; color:var(--text-dim); text-align:center; max-width:200px;}

.hero-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;}
.refresh-banner{
  text-align:center; font-size:12px; color:var(--text-dim); padding:8px 12px;
  border-bottom:1px solid var(--panel-border); background:rgba(242,169,59,.05);
}
.refresh-banner strong{color:var(--amber); font-weight:600;}

.cache-note{font-size:10px; color:var(--text-dim); font-family:var(--font-mono);}
.ransom-scroll{max-height:420px;}
.country-tag{font-family:var(--font-mono); font-size:11px; color:var(--text-dim);}
.kpi{display:flex; flex-direction:column; gap:4px; justify-content:center;}
.kpi-label{font-size:11px; color:var(--text-dim); letter-spacing:.05em;}
.kpi-value{font-size:30px; font-weight:600;}
.kpi-danger{color:var(--red);}
.kpi-sub{font-size:11px; color:var(--text-dim);}

/* ---------- Map ---------- */
.map-panel{margin-bottom:22px;}
.legend{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-dim);}
.legend-gradient{width:100px; height:8px; border:1px solid var(--panel-border);
  background:linear-gradient(90deg,#1B2A45,var(--amber),var(--red));}
.map-container{position:relative; width:100%; border:1px solid var(--panel-border); background:#0A1120;}
#world-map{width:100%; height:auto; display:block;}
.map-country{stroke:#0A1120; stroke-width:.5; transition:opacity .15s ease;}
.map-country:hover{opacity:.8; cursor:pointer;}
.map-tooltip{
  position:absolute; pointer-events:none; background:var(--panel); border:1px solid var(--amber);
  padding:8px 10px; font-size:12px; border-radius:2px; z-index:10; max-width:220px;
  box-shadow:0 6px 20px rgba(0,0,0,.5);
}
.map-tooltip strong{display:block; font-family:var(--font-display); font-size:13px; margin-bottom:2px;}

.country-ranking{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:8px 18px; list-style:none; margin:16px 0 0; padding:0;
}
.country-ranking li{display:flex; align-items:center; gap:8px; font-size:13px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.05);}
.rank-num{font-family:var(--font-mono); color:var(--text-dim); width:20px; flex:none;}
.rank-bar{height:6px; flex:1; background:#1B2A45; position:relative; overflow:hidden;}
.rank-bar-fill{position:absolute; inset:0; background:linear-gradient(90deg,var(--amber),var(--red));}
.rank-name{flex:none; width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ---------- Two-col grid ---------- */
.grid-2{display:grid; grid-template-columns:1.5fr 1fr; gap:18px; margin-bottom:22px; align-items:start;}

/* ---------- Table ---------- */
.table-controls{display:flex; gap:14px; align-items:center; margin-bottom:12px; flex-wrap:wrap;}
.search-input{
  flex:1; min-width:180px; background:var(--bg-2); border:1px solid var(--panel-border);
  color:var(--text); padding:8px 10px; font-family:var(--font-mono); font-size:13px;
}
.search-input:focus{outline:2px solid var(--amber); outline-offset:1px;}
.filter-toggle{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim); white-space:nowrap;}

.table-scroll{max-height:520px; overflow-y:auto; border:1px solid var(--panel-border);}
.data-table{width:100%; border-collapse:collapse; font-size:13px;}
.data-table thead th{
  position:sticky; top:0; background:var(--bg-2); text-align:left; padding:9px 10px;
  font-size:10px; letter-spacing:.08em; color:var(--text-dim); border-bottom:1px solid var(--panel-border);
}
.data-table td{padding:9px 10px; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:top;}
.data-table tr:hover td{background:rgba(255,255,255,.02);}
.cve-id{font-family:var(--font-mono); color:var(--blue);}
.badge{
  display:inline-block; font-size:10px; padding:2px 7px; border-radius:2px; letter-spacing:.04em;
  font-weight:600; text-transform:uppercase;
}
.badge-ransom{background:rgba(228,72,60,.15); color:var(--red); border:1px solid rgba(228,72,60,.4);}
.badge-ot{background:rgba(63,193,176,.15); color:var(--teal); border:1px solid rgba(63,193,176,.4);}
.badge-overdue{background:var(--red); color:#fff;}
.badge-soon{background:rgba(242,169,59,.18); color:var(--amber); border:1px solid rgba(242,169,59,.4);}
.loading-row{padding:20px; color:var(--text-dim); text-align:center; font-size:13px;}

/* ---------- Urgent list ---------- */
.urgent-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; max-height:520px; overflow-y:auto;}
.urgent-item{
  border:1px solid var(--panel-border); border-left:3px solid var(--red);
  padding:10px 12px; background:rgba(228,72,60,.05);
}
.urgent-item .cve-id{font-size:13px;}
.urgent-item .u-name{font-size:12.5px; color:var(--text-dim); margin:4px 0 6px;}
.urgent-item .u-meta{display:flex; justify-content:space-between; font-size:11px; color:var(--text-dim);}
.urgent-item .u-days{font-family:var(--font-mono); font-weight:600; color:var(--red);}

/* ---------- News ---------- */
.news-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px;}
.news-card{
  border:1px solid var(--panel-border); padding:14px; background:var(--bg-2);
  display:flex; flex-direction:column; gap:8px; text-decoration:none; color:var(--text);
  transition:border-color .15s ease;
}
.news-card:hover{border-color:var(--amber);}
.news-source{font-size:10px; letter-spacing:.08em; color:var(--amber); font-weight:600;}
.news-title{font-family:var(--font-display); font-size:15px; font-weight:600; line-height:1.3; margin:0;}
.news-summary{font-size:12.5px; color:var(--text-dim); flex:1;}
.news-date{font-size:11px; color:var(--text-dim); font-family:var(--font-mono);}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--panel-border); padding:26px 24px 40px; text-align:center;
  color:var(--text-dim); font-size:12.5px; position:relative;
}
.footer-ticks{height:2px; width:60px; background:var(--amber); margin:0 auto 16px; opacity:.7;}
.made-by{font-family:var(--font-display); font-size:14px; letter-spacing:.03em; color:var(--text); margin-top:6px;}
.made-by a{color:var(--amber); text-decoration:none;}
.made-by a:hover{text-decoration:underline;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .topbar-status{gap:14px;}
  .status-item{align-items:flex-start;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important; animation:none !important;}
}

:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}