@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600;700&display=swap');

#wif-root{
  --bg:#020810;--bg2:#050d18;--bg3:#081422;--bg4:#0c1a2e;
  --bdr:#0e2035;--bdr2:#142840;
  --cyan:#00e5ff;--cyan2:#00b4d8;
  --amber:#ffaa00;--red:#ff2d55;--red2:#ff4b6a;
  --green:#00ff88;--purple:#bf5fff;--blue:#2979ff;
  --dim:#2a4060;--dim2:#1a2e45;
  --txt:#b8d4ee;--bright:#e0f0ff;
  --mono:'Share Tech Mono','Courier New',monospace;
  --display:'Orbitron','Arial Black',sans-serif;
  --body:'Rajdhani','Arial',sans-serif;
  background:var(--bg);color:var(--txt);font-family:var(--body);font-size:14px;
  overflow-x:hidden;width:100%;
}
*{box-sizing:border-box;margin:0;padding:0;}

/* HEADER */
#wif-hdr{display:flex;align-items:center;gap:12px;padding:10px 18px;
  background:linear-gradient(180deg,#030b16,#020810);border-bottom:2px solid var(--cyan);
  position:sticky;top:0;z-index:200;flex-wrap:wrap;}
.wif-hdr-l{display:flex;align-items:center;gap:10px;flex:1;min-width:200px;}
.wif-emblem{width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,229,255,.2),rgba(0,229,255,.04));
  border:1px solid rgba(0,229,255,.45);display:flex;align-items:center;justify-content:center;
  color:var(--cyan);flex-shrink:0;box-shadow:0 0 20px rgba(0,229,255,.3);}
.wif-title{font-family:var(--display);font-size:clamp(14px,3.5vw,20px);letter-spacing:4px;
  color:var(--bright);text-shadow:0 0 20px rgba(0,229,255,.35);font-weight:700;}
.wif-sub{font-family:var(--mono);font-size:clamp(8px,1.5vw,10px);color:var(--cyan);letter-spacing:2px;margin-top:3px;}
.wif-hdr-c{display:flex;align-items:center;}
.wif-hdr-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.wif-clocks{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.wif-tz{display:flex;flex-direction:column;align-items:center;
  background:rgba(0,229,255,.05);border:1px solid rgba(0,229,255,.18);
  padding:3px 8px;border-radius:4px;}
.wif-tz-city{font-family:var(--mono);font-size:8px;color:var(--dim);letter-spacing:2px;}
.wif-tz-t{font-family:var(--mono);font-size:12px;color:var(--cyan);font-weight:700;}
.wif-hdr-btns{display:flex;gap:6px;align-items:center;}
.wif-live-badge{display:flex;align-items:center;gap:6px;padding:4px 10px;
  background:rgba(255,45,85,.12);border:1px solid var(--red2);border-radius:3px;
  font-family:var(--mono);font-size:10px;color:var(--red2);letter-spacing:3px;font-weight:700;}
.wif-live-dot{width:7px;height:7px;border-radius:50%;background:var(--red2);
  animation:wblink .8s infinite;box-shadow:0 0 8px var(--red2);}
@keyframes wblink{0%,100%{opacity:1}50%{opacity:.2}}
.wif-btn{background:transparent;border:1px solid var(--bdr2);color:var(--txt);
  font-family:var(--mono);font-size:10px;letter-spacing:2px;padding:5px 10px;
  cursor:pointer;border-radius:3px;transition:all .2s;}
.wif-btn:hover{border-color:var(--cyan);color:var(--cyan);}

/* THREAT METER */
.wif-threat-meter{display:flex;flex-direction:column;align-items:center;gap:4px;}
.wtm-lbl{font-family:var(--mono);font-size:8px;color:var(--dim);letter-spacing:2px;}
.wtm-bars{display:flex;gap:4px;align-items:flex-end;}
.wtm-b{width:12px;border-radius:2px 2px 0 0;background:var(--bdr2);transition:all .4s;}
.b1{height:10px;}.b2{height:14px;}.b3{height:18px;}.b4{height:22px;}.b5{height:26px;}
.b1.on{background:#00ff88;box-shadow:0 0 8px #00ff88;}
.b2.on{background:#ffaa00;box-shadow:0 0 8px #ffaa00;}
.b3.on{background:#ff7043;box-shadow:0 0 8px #ff7043;}
.b4.on{background:#f44336;box-shadow:0 0 8px #f44336;}
.b5.on{background:#ff2d55;box-shadow:0 0 12px #ff2d55;}
.wtm-lvl{font-family:var(--mono);font-size:9px;color:var(--amber);letter-spacing:1px;font-weight:700;}

/* TICKER */
#wif-ticker{display:flex;align-items:center;height:30px;overflow:hidden;
  background:linear-gradient(90deg,#0a1a08,#020810);border-bottom:1px solid rgba(0,229,255,.2);}
.wif-ticker-lbl{padding:0 12px;background:var(--cyan);color:#000;font-family:var(--mono);
  font-size:10px;letter-spacing:3px;font-weight:900;height:100%;display:flex;align-items:center;white-space:nowrap;flex-shrink:0;}
.wif-ticker-wrap{overflow:hidden;flex:1;}
.wif-ticker-track{display:flex;animation:ticker 90s linear infinite;white-space:nowrap;}
.wif-ticker-item{font-family:var(--mono);font-size:11px;color:var(--txt);padding:0 28px;letter-spacing:.5px;}
.wif-ticker-item::before{content:"▸ ";color:var(--cyan);}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.wif-ticker-cd{padding:0 14px;font-family:var(--display);font-size:11px;color:var(--red2);
  letter-spacing:2px;background:rgba(255,45,85,.1);border-left:2px solid var(--red2);
  height:100%;display:flex;align-items:center;flex-shrink:0;}

/* STATUS STRIP */
#wif-strip{display:flex;align-items:center;gap:8px;padding:6px 14px;
  background:rgba(0,229,255,.03);border:1px solid rgba(0,229,255,.1);
  font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:1px;
  margin:10px 14px 0;border-radius:4px;flex-wrap:wrap;}
.ws-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.dg{background:var(--green);box-shadow:0 0 6px var(--green);}
.ws-sep{color:var(--bdr2);}
.ws-next{color:var(--cyan);font-size:9px;}
.ws-item{display:flex;align-items:center;gap:5px;}

/* WRAP */
#wif-wrap{padding:10px 14px;max-width:1600px;margin:0 auto;}

/* METRIC CARDS */
#wif-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
@media(max-width:640px){#wif-metrics{grid-template-columns:repeat(2,1fr);}}
.wif-mc{background:var(--bg3);border:1px solid var(--bdr2);border-radius:8px;padding:14px;
  position:relative;overflow:hidden;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent;}
.wif-mc:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4);}
.wif-mc:active{transform:scale(.97);}
.mc-bg{position:absolute;right:8px;top:8px;font-size:28px;opacity:.07;}
.mc-lbl{font-family:var(--mono);font-size:clamp(8px,1.8vw,10px);color:var(--dim);letter-spacing:2px;margin-bottom:5px;}
.mc-val{font-family:var(--display);font-size:clamp(20px,5vw,28px);color:var(--bright);font-weight:700;}
.mc-val.loading{color:var(--dim);animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.mc-tap{font-family:var(--mono);font-size:8px;color:var(--dim);letter-spacing:1px;margin-top:5px;}
.mc-red{border-color:rgba(255,45,85,.3);}.mc-red:hover{border-color:var(--red2);box-shadow:0 4px 20px rgba(255,45,85,.15);}
.mc-red .mc-val{color:var(--red2);text-shadow:0 0 14px rgba(255,45,85,.4);}
.mc-amber{border-color:rgba(255,170,0,.25);}.mc-amber:hover{border-color:var(--amber);}
.mc-amber .mc-val{color:var(--amber);text-shadow:0 0 14px rgba(255,170,0,.4);}
.mc-green{border-color:rgba(0,255,136,.18);}.mc-green:hover{border-color:var(--green);}
.mc-green .mc-val{color:var(--green);text-shadow:0 0 14px rgba(0,255,136,.3);}
.mc-blue{border-color:rgba(41,121,255,.22);}.mc-blue:hover{border-color:var(--blue);}
.mc-blue .mc-val{color:#82aaff;text-shadow:0 0 14px rgba(41,121,255,.3);}
.mc-purple{border-color:rgba(191,95,255,.22);}.mc-purple:hover{border-color:var(--purple);}
.mc-purple .mc-val{color:var(--purple);text-shadow:0 0 14px rgba(191,95,255,.3);}
.mc-cyber{border-color:rgba(0,229,255,.18);}.mc-cyber:hover{border-color:var(--cyan);}
.mc-cyber .mc-val{color:var(--cyan);text-shadow:0 0 14px rgba(0,229,255,.3);}

/* PANELS */
.wif-panel{background:var(--bg3);border:1px solid var(--bdr2);border-radius:8px;padding:16px;margin-bottom:14px;}
.wp-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;flex-wrap:wrap;gap:6px;}
.wp-title{font-family:var(--display);font-size:clamp(11px,2.5vw,14px);letter-spacing:3px;color:var(--bright);font-weight:700;}
.wp-sub{font-family:var(--mono);font-size:clamp(8px,1.5vw,10px);color:var(--dim);letter-spacing:1px;margin-top:3px;}

/* ZONE GRID */
#wif-zones-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;}
.wif-zone-card{background:var(--bg4);border:1px solid var(--bdr2);border-radius:6px;padding:12px;
  cursor:pointer;transition:all .2s;position:relative;}
.wif-zone-card:hover{border-color:var(--cyan);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,229,255,.1);}
.wif-zone-card:active{transform:scale(.97);}
.wzc-name{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--bright);margin-bottom:6px;}
.wzc-count{font-family:var(--display);font-size:22px;font-weight:700;line-height:1;}
.wzc-label{font-family:var(--mono);font-size:8px;color:var(--dim);margin-top:3px;letter-spacing:1px;}
.wzc-bar{height:3px;border-radius:2px;margin-top:8px;transition:width .6s;}
.zone-war{border-left:3px solid var(--red2);}.zone-war .wzc-count{color:var(--red2);text-shadow:0 0 12px rgba(255,45,85,.4);}
.zone-tension{border-left:3px solid var(--amber);}.zone-tension .wzc-count{color:var(--amber);}
.zone-monitor{border-left:3px solid var(--purple);}.zone-monitor .wzc-count{color:var(--purple);}
.zone-us{border-left:3px solid var(--cyan);}.zone-us .wzc-count{color:var(--cyan);}

/* TWO COL */
.wif-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
@media(max-width:700px){.wif-two-col{grid-template-columns:1fr;}}

/* WEAPONS */
#wif-weapons-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;}
.wif-wpn{display:flex;align-items:center;justify-content:space-between;
  background:var(--bg4);border:1px solid var(--bdr2);border-radius:4px;padding:8px 12px;}
.wpn-name{font-family:var(--mono);font-size:10px;color:var(--txt);letter-spacing:1px;}
.wpn-bar-wrap{flex:1;margin:0 10px;height:4px;background:var(--bdr2);border-radius:2px;}
.wpn-bar{height:100%;border-radius:2px;background:var(--red2);transition:width .6s;}
.wpn-count{font-family:var(--display);font-size:14px;color:var(--red2);font-weight:700;}

/* FILTERS */
#wif-filters{display:flex;flex-wrap:wrap;gap:10px;padding:12px 0 14px;border-bottom:1px solid var(--bdr2);margin-bottom:14px;}
.wf-group{display:flex;flex-direction:column;gap:3px;min-width:120px;}
.wf-group label{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);}
.wf-group select,.wf-group input{background:var(--bg4);border:1px solid var(--bdr2);
  border-radius:3px;color:var(--txt);font-family:var(--body);font-size:.88rem;
  padding:5px 8px;outline:none;transition:border .2s;}
.wf-group select:focus,.wf-group input:focus{border-color:var(--cyan);}
.wif-btn-primary{background:rgba(255,45,85,.15);border:1px solid var(--red2);color:var(--red2);
  font-family:var(--mono);font-size:10px;letter-spacing:2px;padding:6px 12px;
  cursor:pointer;border-radius:3px;transition:all .2s;align-self:flex-end;}
.wif-btn-primary:hover{background:var(--red2);color:#fff;}

/* FEED GRID */
.wif-loading{text-align:center;padding:60px 20px;color:var(--dim);font-family:var(--mono);}
.wif-spin{width:36px;height:36px;border:3px solid var(--bdr2);border-top-color:var(--cyan);
  border-radius:50%;animation:wspin .8s linear infinite;margin:0 auto 12px;}
@keyframes wspin{to{transform:rotate(360deg)}}

#wif-feed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;}
@media(max-width:760px){#wif-feed-grid{grid-template-columns:1fr;}}

/* INTEL CARD */
.wif-intel-card{background:var(--bg4);border:1px solid var(--bdr2);border-left:4px solid var(--bdr2);
  border-radius:4px;padding:13px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;}
.wif-intel-card:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.5);}
.wif-intel-card.sev3{border-left-color:var(--red2);}
.wif-intel-card.sev2{border-left-color:var(--amber);}
.wif-intel-card.sev1{border-left-color:var(--dim);}
.wif-intel-card.sev3::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--red2),transparent);}

.wic-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;gap:6px;flex-wrap:wrap;}
.wic-badges{display:flex;gap:4px;flex-wrap:wrap;}
.wic-badge{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.05em;
  padding:2px 6px;border-radius:2px;background:rgba(255,255,255,.04);color:var(--dim);border:1px solid var(--bdr2);}
.wic-badge.zone{color:var(--cyan);border-color:rgba(0,229,255,.3);}
.wic-badge.cat{color:var(--amber);border-color:rgba(255,170,0,.3);}
.wic-badge.sev3{color:var(--red2);border-color:rgba(255,45,85,.3);background:rgba(255,45,85,.08);}
.wic-badge.sev2{color:var(--amber);border-color:rgba(255,170,0,.3);background:rgba(255,170,0,.08);}
.wic-badge.sev1{color:var(--dim);}
.wic-badge.plat-x{color:#1d9bf0;border-color:rgba(29,155,240,.3);}
.wic-badge.plat-tg{color:#229ED9;border-color:rgba(34,158,217,.3);}
.wic-time{font-family:var(--mono);font-size:9px;color:var(--dim);white-space:nowrap;}

.wic-title{font-family:var(--body);font-size:.97rem;font-weight:700;line-height:1.35;
  margin:0 0 7px;color:var(--bright);}
.wic-body{font-size:.83rem;color:var(--txt);line-height:1.5;margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.wic-footer{display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--bdr2);padding-top:8px;}
.wic-handle{font-family:var(--mono);font-size:9px;color:var(--dim);}
.wic-link{font-family:var(--mono);font-size:9px;color:var(--cyan);text-decoration:none;letter-spacing:1px;}
.wic-link:hover{color:var(--bright);}
.wic-wpn{font-family:var(--mono);font-size:8px;color:var(--red2);letter-spacing:1px;}

/* PAGINATION */
#wif-pag{display:flex;gap:5px;justify-content:center;margin-top:16px;flex-wrap:wrap;}
.wif-pbn{background:var(--bg4);border:1px solid var(--bdr2);color:var(--txt);
  font-family:var(--mono);font-size:10px;padding:5px 11px;cursor:pointer;border-radius:2px;transition:all .2s;}
.wif-pbn:hover,.wif-pbn.act{background:var(--cyan);border-color:var(--cyan);color:#000;}

/* STATUS BAR */
#wif-statusbar{background:var(--bg2);border-top:1px solid var(--bdr2);padding:8px 18px;
  display:flex;font-family:var(--mono);font-size:9px;color:var(--dim);letter-spacing:1px;}

/* MODAL */
.wif-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);
  z-index:99999;align-items:center;justify-content:center;padding:20px;}
.wif-modal-overlay.open{display:flex;}
.wif-modal{background:var(--bg3);border:1px solid var(--bdr2);border-top:2px solid var(--cyan);
  border-radius:6px;max-width:700px;width:100%;max-height:85vh;overflow-y:auto;
  padding:22px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.95);}
.wif-modal-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;}
.wif-modal-title{font-family:var(--display);font-size:14px;letter-spacing:3px;color:var(--bright);}
.wif-modal-sub{font-family:var(--mono);font-size:9px;color:var(--dim);margin-top:4px;letter-spacing:1px;}
.wif-modal-close{background:transparent;border:1px solid var(--bdr2);color:var(--dim);
  font-size:1rem;padding:3px 8px;cursor:pointer;border-radius:2px;transition:all .2s;}
.wif-modal-close:hover{border-color:var(--red2);color:var(--red2);}
.wif-modal-body{max-height:65vh;overflow-y:auto;}

/* Modal intel item */
.wim-item{border-bottom:1px solid var(--bdr2);padding:12px 0;}
.wim-item:last-child{border-bottom:none;}
.wim-title{font-family:var(--body);font-size:.9rem;font-weight:700;color:var(--bright);margin-bottom:5px;line-height:1.35;}
.wim-meta{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--mono);font-size:9px;color:var(--dim);margin-bottom:5px;}
.wim-body{font-size:.82rem;color:var(--txt);line-height:1.5;margin-bottom:6px;}
.wim-link{font-family:var(--mono);font-size:9px;color:var(--cyan);text-decoration:none;}
.wim-link:hover{text-decoration:underline;}

/* ═══ THREAT MATRIX TITLE SUB-LINE ═══ */
.wif-title-sub{font-family:var(--mono);font-size:clamp(7px,1.2vw,9px);color:var(--amber);
  letter-spacing:3px;text-transform:uppercase;margin-top:1px;}

/* ═══ BREAKING INCIDENTS ═══ */
#wif-breaking-panel{border-color:rgba(255,45,85,.4);background:linear-gradient(180deg,rgba(255,45,85,.05),var(--bg3));}
.wif-blink-title{animation:wblink 1.4s infinite;}
.wif-breaking-count{font-family:var(--display);font-size:13px;color:var(--red2);letter-spacing:2px;}

.wif-breaking-item{display:flex;gap:12px;padding:12px 14px;border-bottom:1px solid var(--bdr2);
  cursor:pointer;transition:background .2s;align-items:flex-start;}
.wif-breaking-item:last-child{border-bottom:none;}
.wif-breaking-item:hover{background:rgba(255,45,85,.06);}
.wif-breaking-item.sev3{border-left:3px solid var(--red2);}
.wif-breaking-item.sev2{border-left:3px solid var(--amber);}
.wif-breaking-item.sev1{border-left:3px solid var(--dim);}

.wbi-left{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;min-width:28px;}
.wbi-sev{font-size:1.2rem;line-height:1;}
.wbi-src-cnt{font-family:var(--display);font-size:11px;font-weight:700;color:var(--cyan);
  background:rgba(0,229,255,.12);border:1px solid rgba(0,229,255,.3);border-radius:2px;
  padding:1px 5px;line-height:1.4;}
.wbi-body{flex:1;min-width:0;}
.wbi-meta{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:5px;align-items:center;}
.wbi-title{font-family:var(--body);font-size:.94rem;font-weight:700;color:var(--bright);line-height:1.35;}
.wbi-time{font-family:var(--mono);font-size:9px;color:var(--dim);}
.wbi-exp{font-family:var(--mono);font-size:9px;color:var(--amber);letter-spacing:.5px;}
.wbi-wpn{font-family:var(--mono);font-size:9px;color:var(--red2);margin-top:4px;letter-spacing:.5px;}

/* ═══ SOURCE BADGE ═══ */
.wif-src-badge{font-family:var(--mono);font-size:9px;color:var(--cyan);
  background:rgba(0,229,255,.1);border:1px solid rgba(0,229,255,.3);
  border-radius:2px;padding:2px 6px;letter-spacing:.5px;font-weight:700;}

/* ═══ INTEL CARD UPDATES ═══ */
.wif-intel-card.multi-src{border-left-width:5px;}
.wic-src-detail{font-family:var(--mono);font-size:9px;color:var(--cyan);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:200px;}
.wic-footer-r{display:flex;align-items:center;gap:8px;margin-left:auto;}
.wic-exp{font-family:var(--mono);font-size:9px;color:var(--dim);}
.wic-link{font-family:var(--mono);font-size:9px;color:var(--cyan);text-decoration:none;letter-spacing:1px;white-space:nowrap;}
.wic-link:hover{color:var(--bright);}

/* ═══ ZONE ACTIVE STATE ═══ */
/* ═══ ZONE ACTIVE STATE (kept for filter badge use) ═══ */
.zone-active{border-color:var(--cyan)!important;background:rgba(0,229,255,.06);}
.zone-active::after{content:'✓ FILTERED';position:absolute;top:6px;right:8px;
  font-family:var(--mono);font-size:8px;color:var(--cyan);letter-spacing:1px;}

/* ═══ WEAPONS CLICKABLE ═══ */
.wif-wpn{cursor:pointer;transition:background .2s;}
.wif-wpn:hover{background:rgba(255,45,85,.08);border-color:rgba(255,45,85,.3);}
.wpn-tap{font-family:var(--mono);font-size:10px;color:var(--dim);flex-shrink:0;}

/* ═══ FILTER BADGE ═══ */
.wif-filter-badge{font-family:var(--mono);font-size:9px;color:var(--cyan);
  background:rgba(0,229,255,.1);border:1px solid rgba(0,229,255,.3);
  border-radius:2px;padding:4px 10px;letter-spacing:1px;}

/* ═══ CHART CURSOR ═══ */
#chart-cat,#chart-region{cursor:pointer;}

/* ═══ ACTIVE CONFLICT ZONES — searchable inline feed ═══ */
#wif-zones-filters{
  display:flex;flex-wrap:wrap;gap:10px;
  padding:12px 0 14px;
  border-bottom:1px solid var(--bdr2);
  margin-bottom:14px;
  align-items:flex-end;
}

/* Zone buttons row */
#wif-zones-btns{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--bdr2);
}
.wif-zone-btn{
  display:flex;align-items:center;gap:6px;
  background:var(--bg4);
  border:1px solid var(--bdr2);
  border-radius:4px;
  padding:7px 12px;
  cursor:pointer;
  transition:all .18s;
  font-family:var(--mono);font-size:10px;
  color:var(--txt);letter-spacing:1px;
  white-space:nowrap;
}
.wif-zone-btn:hover{
  border-color:var(--cyan);color:var(--cyan);
  background:rgba(0,229,255,.06);
  transform:translateY(-1px);
}
.wif-zone-btn.active{
  border-color:var(--cyan);
  background:rgba(0,229,255,.12);
  color:var(--cyan);
  box-shadow:0 0 12px rgba(0,229,255,.2);
}
.wif-zone-btn.zone-btn-war     { border-left:3px solid var(--red2); }
.wif-zone-btn.zone-btn-war.active { background:rgba(255,45,85,.12);border-color:var(--red2);color:var(--red2);box-shadow:0 0 12px rgba(255,45,85,.2); }
.wif-zone-btn.zone-btn-tension  { border-left:3px solid var(--amber); }
.wif-zone-btn.zone-btn-tension.active { background:rgba(255,170,0,.12);border-color:var(--amber);color:var(--amber);box-shadow:0 0 12px rgba(255,170,0,.2); }
.wif-zone-btn.zone-btn-us       { border-left:3px solid var(--cyan); }
.wif-zone-btn.zone-btn-monitor  { border-left:3px solid var(--purple); }

.wif-zone-btn-count{
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,229,255,.15);
  border-radius:3px;
  padding:1px 5px;
  font-size:9px;
  font-weight:700;
  min-width:20px;
}
.wif-zone-btn.zone-btn-war .wif-zone-btn-count     { background:rgba(255,45,85,.2);color:var(--red2); }
.wif-zone-btn.zone-btn-tension .wif-zone-btn-count { background:rgba(255,170,0,.2);color:var(--amber); }

/* Zone feed grid — reuse intel card styles */
#wif-zones-feed{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:12px;
}
@media(max-width:760px){ #wif-zones-feed{ grid-template-columns:1fr; } }

/* ═══ ZONE INCIDENT COUNT PILLS (above Intelligence Feed) ═══ */
#wif-zone-counts{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:10px 0 14px;
  border-bottom:1px solid var(--bdr2);
  margin-bottom:14px;
}
.wif-zone-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:20px;
  border:1px solid var(--bdr2);
  background:var(--bg4);
  cursor:pointer;
  font-family:var(--mono);font-size:9px;
  color:var(--txt);letter-spacing:.5px;
  transition:all .18s;white-space:nowrap;
}
.wif-zone-pill:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(0,229,255,.07);}
.wif-zone-pill.active{border-color:var(--cyan);color:var(--cyan);background:rgba(0,229,255,.13);font-weight:700;}
.wif-zone-pill-war    {border-color:rgba(255,45,85,.4);}
.wif-zone-pill-war:hover,.wif-zone-pill-war.active{border-color:var(--red2);color:var(--red2);background:rgba(255,45,85,.1);}
.wif-zone-pill-tension{border-color:rgba(255,170,0,.35);}
.wif-zone-pill-tension:hover,.wif-zone-pill-tension.active{border-color:var(--amber);color:var(--amber);background:rgba(255,170,0,.1);}
.wif-zone-pill-num{
  font-family:var(--display);font-size:10px;font-weight:700;
  background:rgba(255,255,255,.07);border-radius:10px;
  padding:0 5px;min-width:18px;text-align:center;
}