/*
Theme Name: ReadinessIntel Theme
Theme URI: https://example.com/readinessintel
Author: ReadinessIntel
Description: WordPress theme converted from ReadinessIntel single-page dashboard while preserving styles and layout.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: readinessintel-theme
*/

:root {
  --bg-primary:#0d0f14;--bg-secondary:#111318;--bg-card:#161a22;--bg-card-hover:#1c2030;
  --accent:#00e5c8;--accent-dim:rgba(0,229,200,0.10);--accent-glow:rgba(0,229,200,0.30);
  --gold:#f0b429;--gold-dim:rgba(240,180,41,0.12);
  --green:#00e87a;--green-dim:rgba(0,232,122,0.10);
  --red:#ff4d6a;--red-dim:rgba(255,77,106,0.10);
  --yellow:#ffba08;--yellow-dim:rgba(255,186,8,0.10);
  --purple:#b388ff;--purple-dim:rgba(179,136,255,0.10);
  --orange:#ff8c42;--orange-dim:rgba(255,140,66,0.10);
  --text-primary:#e8ecf2;--text-secondary:#7a8fa6;--text-muted:#3d4e62;
  --border:rgba(255,255,255,0.06);--border-accent:rgba(0,229,200,0.18);
  --font-main:'Inter',-apple-system,sans-serif;--font-mono:'JetBrains Mono',monospace;
  --section-gap:2px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-main);background:var(--bg-primary);color:var(--text-primary);overflow-x:hidden;-webkit-font-smoothing:antialiased;}
::-webkit-scrollbar{width:5px;}::-webkit-scrollbar-track{background:#050505;}::-webkit-scrollbar-thumb{background:var(--accent-dim);border-radius:3px;}

@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 3px var(--green)}50%{opacity:.3;box-shadow:0 0 10px var(--green)}}
@keyframes liveDot{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-15px)}to{opacity:1;transform:translateX(0)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes breathe{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes dataFlash{0%{color:var(--accent)}100%{color:var(--text-primary)}}
@keyframes borderGlow{0%,100%{border-color:var(--border)}50%{border-color:var(--border-accent)}}
@keyframes countUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.live-dot{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;animation:livePulse 1.5s infinite;margin-right:5px;vertical-align:middle;}
.live-dot-sm{width:5px;height:5px;background:var(--green);border-radius:50%;animation:liveDot 2s infinite;display:inline-block;margin-left:3px;}

/* ═══ TOPBAR ═══ */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;background:rgba(3,3,6,0.97);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000;backdrop-filter:blur(20px);}
.topbar-left{display:flex;align-items:center;gap:14px;}
.logo{font-size:17px;font-weight:800;color:var(--accent);letter-spacing:.5px;}
.logo sub{color:var(--text-muted);font-weight:400;font-size:10px;vertical-align:baseline;margin-left:6px;}
.live-badge{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--green);background:var(--green-dim);padding:3px 10px;border-radius:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;}
.topbar-right{display:flex;align-items:center;gap:10px;}
.topbar-time{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);animation:breathe 3s infinite;}
.topbar-btn{background:rgba(255,255,255,0.03);color:var(--text-secondary);border:1px solid var(--border);padding:5px 12px;border-radius:6px;font-size:11px;cursor:pointer;font-weight:600;transition:all .25s;font-family:var(--font-main);}
.topbar-btn:hover{background:var(--accent-dim);color:var(--accent);border-color:var(--border-accent);}
.topbar-btn.primary{background:var(--accent);color:#000;border-color:var(--accent);}
.topbar-btn.primary:hover{box-shadow:0 0 16px var(--accent-glow);}

/* ═══ NAV ═══ */
.main-nav{display:flex;background:rgba(3,3,6,0.95);border-bottom:1px solid var(--border);overflow-x:auto;padding:0 8px;}
.nav-tab{padding:11px 18px;color:var(--text-muted);font-size:12px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;transition:all .25s;white-space:nowrap;}
.nav-tab:hover{color:var(--text-secondary);background:rgba(255,255,255,0.015);}
.nav-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600;}
.nav-tab .badge{font-size:9px;background:var(--accent);color:#000;padding:1px 5px;border-radius:5px;margin-left:4px;font-weight:800;}

/* ═══ VIEWS ═══ */
.view{display:none;animation:fadeInUp .35s ease;}
.view.active{display:block;}

/* ═══ SECTION DIVIDER ═══ */
.section-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-accent),transparent);margin:0 24px;}
.section-band{background:linear-gradient(90deg,rgba(0,217,255,0.03),transparent 60%);border-left:3px solid var(--accent);padding:6px 16px;margin:16px 24px 0;border-radius:0 6px 6px 0;display:flex;align-items:center;justify-content:space-between;}
.section-band-title{font-size:13px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.8px;}
.section-band-sub{font-size:10px;color:var(--text-muted);}
.section-band.green{border-left-color:var(--green);background:linear-gradient(90deg,rgba(0,255,136,0.03),transparent 60%);}
.section-band.green .section-band-title{color:var(--green);}
.section-band.yellow{border-left-color:var(--yellow);background:linear-gradient(90deg,rgba(255,170,0,0.03),transparent 60%);}
.section-band.yellow .section-band-title{color:var(--yellow);}
.section-band.purple{border-left-color:var(--purple);background:linear-gradient(90deg,rgba(170,102,255,0.03),transparent 60%);}
.section-band.purple .section-band-title{color:var(--purple);}
.section-band.red{border-left-color:var(--red);background:linear-gradient(90deg,rgba(255,68,102,0.03),transparent 60%);}
.section-band.red .section-band-title{color:var(--red);}

/* ═══ SECTIONS ═══ */
.section{padding:16px 24px;}
.section-hint{font-size:10px;color:var(--text-muted);background:rgba(0,217,255,0.03);padding:6px 12px;border-radius:5px;border-left:2px solid var(--accent);margin-bottom:12px;line-height:1.5;}

/* ═══ KPI CARDS ═══ */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px;}
.kpi-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:14px;transition:all .3s;position:relative;overflow:hidden;cursor:pointer;}
.kpi-card:hover{border-color:var(--border-accent);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.5);}
.kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),transparent);}
.kpi-card.green-accent::before{background:linear-gradient(90deg,var(--green),transparent);}
.kpi-card.yellow-accent::before{background:linear-gradient(90deg,var(--yellow),transparent);}
.kpi-card.red-accent::before{background:linear-gradient(90deg,var(--red),transparent);}
.kpi-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px;font-weight:600;}
.kpi-value{font-size:24px;font-weight:800;font-family:var(--font-mono);animation:countUp .6s ease;}
.kpi-change{font-size:10px;margin-top:3px;font-weight:600;}
.kpi-change.up{color:var(--green);}
.kpi-change.down{color:var(--red);}
.kpi-note{font-size:9px;color:var(--text-muted);margin-top:5px;border-top:1px solid var(--border);padding-top:5px;line-height:1.4;}

/* ═══ DATA TABLE ═══ */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px;background:var(--bg-card);}
.data-table{width:100%;border-collapse:collapse;font-size:12px;}
.data-table thead th{text-align:left;padding:9px 10px;font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border);font-weight:700;background:rgba(0,0,0,.3);position:sticky;top:0;white-space:nowrap;}
.data-table tbody tr{border-bottom:1px solid rgba(255,255,255,.02);cursor:pointer;transition:all .15s;}
.data-table tbody tr:hover{background:rgba(0,217,255,.03);}
.data-table td{padding:8px 10px;vertical-align:middle;}
.score-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.04);overflow:hidden;min-width:50px;}
.score-bar-fill{height:100%;border-radius:3px;transition:width .8s ease;}
.tier-badge{padding:2px 7px;border-radius:4px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;}
.tier-1{background:rgba(0,255,136,.12);color:#00ff88;}.tier-2{background:rgba(0,217,255,.12);color:#00d9ff;}
.tier-3{background:rgba(255,170,0,.12);color:#ffaa00;}.tier-4{background:rgba(255,68,102,.12);color:#ff4466;}

/* ═══ CARDS ═══ */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:16px;margin-bottom:10px;transition:all .25s;}
.card:hover{border-color:rgba(255,255,255,.08);}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.card-title{font-size:13px;font-weight:700;}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px;}

/* ═══ PILLAR BREAKDOWN ═══ */
.pillar-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);}
.pillar-row:last-child{border-bottom:none;}
.pillar-icon{font-size:16px;width:24px;text-align:center;}
.pillar-info{flex:1;}
.pillar-name{font-size:13px;font-weight:700;color:var(--text-secondary);}
.pillar-sub{font-size:11px;color:var(--text-muted);margin-top:3px;line-height:1.55;}
.pillar-score{font-family:var(--font-mono);font-size:20px;font-weight:800;width:56px;text-align:right;}
.pillar-bar-wrap{width:140px;}

/* ═══ NARRATIVE ═══ */
.narrative{background:linear-gradient(135deg,rgba(0,217,255,.04),rgba(0,0,0,0));border:1px solid rgba(0,217,255,.1);border-radius:10px;padding:14px 18px;margin:10px 0;font-size:12px;color:var(--text-secondary);line-height:1.7;}
.narrative strong{color:var(--accent);}
.narrative-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin-bottom:5px;}
.insight-callout{display:flex;gap:10px;align-items:flex-start;background:rgba(255,170,0,.04);border:1px solid rgba(255,170,0,.12);border-radius:8px;padding:12px;margin:8px 0;}
.insight-icon{font-size:18px;flex-shrink:0;}
.insight-text{font-size:11px;color:var(--text-secondary);line-height:1.6;}
.insight-text strong{color:var(--yellow);}

/* ═══ SCENARIO ═══ */
.scenario-card{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:14px;transition:all .3s;cursor:pointer;}
.scenario-card:hover{transform:scale(1.01);border-color:rgba(255,255,255,.1);}
.scenario-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:2px 7px;border-radius:4px;display:inline-block;}
.scenario-optimistic .scenario-label{background:var(--green-dim);color:var(--green);}
.scenario-baseline .scenario-label{background:var(--accent-dim);color:var(--accent);}
.scenario-pessimistic .scenario-label{background:var(--red-dim);color:var(--red);}
.scenario-title{font-size:13px;font-weight:700;margin:6px 0;}
.scenario-text{font-size:11px;color:var(--text-secondary);line-height:1.5;}
.scenario-metric{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);font-size:11px;}

/* ═══ SOLUTION ═══ */
.solution-card{background:linear-gradient(135deg,rgba(0,255,136,.03),transparent);border:1px solid rgba(0,255,136,.1);border-radius:10px;padding:14px;margin:6px 0;cursor:pointer;transition:all .3s;}
.solution-card:hover{border-color:var(--green);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,255,136,.08);}
.solution-tag{font-size:8px;font-weight:700;text-transform:uppercase;background:var(--green-dim);color:var(--green);padding:2px 7px;border-radius:4px;display:inline-block;margin-bottom:4px;letter-spacing:.5px;}
.solution-title{font-size:13px;font-weight:700;margin-bottom:3px;}
.solution-desc{font-size:11px;color:var(--text-secondary);line-height:1.5;}

/* ═══ DOWNLOAD BAR ═══ */
.download-bar{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);}
.dl-btn{display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:5px;font-size:10px;font-weight:600;cursor:pointer;transition:all .25s;border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--text-secondary);font-family:var(--font-main);}
.dl-btn:hover{background:var(--accent-dim);color:var(--accent);border-color:var(--border-accent);}
.dl-btn .dl-icon{font-size:12px;}

/* ═══ FILTER ═══ */
.filter-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;align-items:center;}
.filter-btn{padding:5px 12px;border-radius:6px;font-size:11px;background:rgba(255,255,255,.02);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;transition:all .25s;font-weight:500;font-family:var(--font-main);}
.filter-btn:hover,.filter-btn.active{background:var(--accent-dim);color:var(--accent);border-color:var(--border-accent);}
.search-input{background:var(--bg-card);border:1px solid var(--border);border-radius:6px;padding:6px 12px;color:var(--text-primary);font-size:12px;font-family:var(--font-main);width:180px;outline:none;transition:border .3s;}
.search-input:focus{border-color:var(--accent);}
.search-input::placeholder{color:var(--text-muted);}

/* ═══ MODAL ═══ */
.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.88);z-index:2000;justify-content:center;align-items:flex-start;padding:30px 16px;overflow-y:auto;backdrop-filter:blur(6px);}
.modal-overlay.show{display:flex;}
.modal{background:#0a0a0e;border:1px solid var(--border-accent);border-radius:14px;max-width:920px;width:100%;max-height:88vh;overflow-y:auto;animation:fadeInUp .25s ease;}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);position:sticky;top:0;background:#0a0a0e;z-index:10;border-radius:14px 14px 0 0;}
.modal-close{width:30px;height:30px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .25s;}
.modal-close:hover{background:var(--red-dim);color:var(--red);}
.modal-body{padding:20px;}

/* ═══ RESPONSIVE ═══ */
@media(max-width:768px){
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .card-grid{grid-template-columns:1fr;}
  .section{padding:10px 12px;}
  .topbar{padding:8px 12px;}
  .filter-bar{flex-direction:column;align-items:flex-start;}
  .pillar-bar-wrap{width:80px;}
}

/* GLASSMORPHISM */
.glass-card{background:rgba(12,12,16,0.7);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,0.08);box-shadow:0 8px 32px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.05);}
.glass-card:hover{border-color:rgba(0,217,255,0.3);box-shadow:0 12px 48px rgba(0,217,255,0.15),0 8px 32px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.1);transform:translateY(-2px);}
.gradient-border{position:relative;background:var(--bg-card);border-radius:12px;}
.gradient-border::before{content:'';position:absolute;inset:0;border-radius:12px;padding:1px;background:linear-gradient(135deg,rgba(0,217,255,0.3),rgba(0,255,136,0.2),rgba(170,102,255,0.3));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0.6;transition:opacity 0.3s;}
.gradient-border:hover::before{opacity:1;}
@keyframes slideInFromLeft{from{opacity:0;transform:translateX(-30px);}to{opacity:1;transform:translateX(0);}}
@keyframes slideInFromRight{from{opacity:0;transform:translateX(30px);}to{opacity:1;transform:translateX(0);}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.9);}to{opacity:1;transform:scale(1);}}
@keyframes glow{0%,100%{box-shadow:0 0 20px rgba(0,217,255,0.3);}50%{box-shadow:0 0 40px rgba(0,217,255,0.6),0 0 60px rgba(0,217,255,0.4);}}
.stagger-animation>*:nth-child(1){animation-delay:0.05s;}
.stagger-animation>*:nth-child(2){animation-delay:0.1s;}
.stagger-animation>*:nth-child(3){animation-delay:0.15s;}
.stagger-animation>*:nth-child(4){animation-delay:0.2s;}
.hover-lift{transition:all 0.4s cubic-bezier(0.4,0,0.2,1);}
.hover-lift:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 20px 60px rgba(0,0,0,0.5);}
.topbar{background:rgba(3,3,6,0.85);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-bottom:1px solid rgba(0,217,255,0.1);box-shadow:0 4px 24px rgba(0,0,0,0.4);}
.nav-tab{position:relative;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);}
.nav-tab::after{content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);transform:translateX(-50%);transition:width 0.3s ease;}
.nav-tab.active::after,.nav-tab:hover::after{width:100%;}
.kpi-card{background:linear-gradient(135deg,rgba(12,12,16,0.95),rgba(20,20,28,0.95));border:1px solid rgba(255,255,255,0.05);border-radius:14px;padding:18px;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;}
.kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--green),var(--purple));opacity:0;transition:opacity 0.3s;}
.kpi-card:hover::before{opacity:1;}
.kpi-card:hover{border-color:rgba(0,217,255,0.3);transform:translateY(-3px) scale(1.02);box-shadow:0 12px 48px rgba(0,217,255,0.2),0 8px 24px rgba(0,0,0,0.6);}
.data-table tbody tr{background:linear-gradient(90deg,rgba(12,12,16,0.6),rgba(12,12,16,0.4));backdrop-filter:blur(10px);transition:all 0.3s ease;}
.data-table tbody tr:hover{background:linear-gradient(90deg,rgba(0,217,255,0.08),rgba(0,217,255,0.04));transform:scale(1.005);box-shadow:0 4px 16px rgba(0,217,255,0.1);}
.section-band{background:linear-gradient(90deg,rgba(0,217,255,0.06) 0%,rgba(0,217,255,0.02) 50%,transparent 100%);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:12px 20px;margin:20px 24px 0;position:relative;overflow:hidden;}
.narrative{background:linear-gradient(135deg,rgba(0,217,255,0.05),rgba(0,255,136,0.03),rgba(170,102,255,0.04));border:1px solid rgba(0,217,255,0.15);border-radius:12px;padding:18px 22px;position:relative;overflow:hidden;}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;animation:fadeInUp 0.6s ease;}
.card-grid>*{animation:scaleIn 0.5s ease backwards;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:rgba(0,0,0,0.3);border-radius:4px;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent),var(--green));border-radius:4px;border:2px solid rgba(0,0,0,0.3);}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--green),var(--accent));box-shadow:0 0 12px var(--accent);}


/* ═══ V5 SIX-UPGRADE ADDITIONS ═══ */

/* Gap / Velocity / Window badges */
.gap-pill{display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:800;font-family:var(--font-mono);white-space:nowrap}
.gap-high{background:rgba(255,68,102,.14);color:var(--red);border:1px solid rgba(255,68,102,.25)}
.gap-med {background:rgba(255,170,0,.14);color:var(--yellow);border:1px solid rgba(255,170,0,.25)}
.gap-low {background:rgba(0,255,136,.14);color:var(--green);border:1px solid rgba(0,255,136,.25)}
.vel-pos {color:var(--green);font-family:var(--font-mono);font-size:11px;font-weight:700}
.vel-neg {color:var(--red);font-family:var(--font-mono);font-size:11px;font-weight:700}
.vel-neu {color:var(--text-muted);font-family:var(--font-mono);font-size:11px}
.sfs-low {background:rgba(0,255,136,.12);color:var(--green);border:1px solid rgba(0,255,136,.2);padding:2px 6px;border-radius:4px;font-size:10px;font-weight:800}
.sfs-med {background:rgba(255,170,0,.12);color:var(--yellow);border:1px solid rgba(255,170,0,.2);padding:2px 6px;border-radius:4px;font-size:10px;font-weight:800}
.sfs-high{background:rgba(255,68,102,.12);color:var(--red);border:1px solid rgba(255,68,102,.2);padding:2px 6px;border-radius:4px;font-size:10px;font-weight:800}
.cr-good{color:var(--green);font-family:var(--font-mono);font-size:11px;font-weight:700}
.cr-mid {color:var(--yellow);font-family:var(--font-mono);font-size:11px;font-weight:700}
.cr-poor{color:var(--red);font-family:var(--font-mono);font-size:11px;font-weight:700}

/* Capital Deployment Windows panel */
.cdw-section{padding:16px 24px}
.cdw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:12px}
.cdw-card{background:linear-gradient(135deg,rgba(0,217,255,.06),rgba(0,0,0,0));border:1px solid rgba(0,217,255,.14);border-radius:14px;padding:14px;cursor:pointer;transition:all .25s}
.cdw-card:hover{border-color:rgba(0,217,255,.35);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,217,255,.12)}
.cdw-card.hot{border-color:rgba(0,255,136,.28);background:linear-gradient(135deg,rgba(0,255,136,.07),rgba(0,0,0,0))}
.cdw-card.hot:hover{border-color:rgba(0,255,136,.5);box-shadow:0 8px 28px rgba(0,255,136,.14)}
.cdw-card.watch{border-color:rgba(255,170,0,.22);background:linear-gradient(135deg,rgba(255,170,0,.06),rgba(0,0,0,0))}
.cdw-name{font-size:14px;font-weight:800;color:var(--text-primary);margin-bottom:4px}
.cdw-ari{font-size:22px;font-weight:900;font-family:var(--font-mono);line-height:1}
.cdw-meta{font-size:10px;color:var(--text-muted);margin-top:5px;line-height:1.6}
.cdw-badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.cdw-badge{font-size:9px;padding:2px 6px;border-radius:4px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.cdw-badge.open{background:rgba(0,255,136,.12);color:var(--green)}
.cdw-badge.narrow{background:rgba(255,170,0,.12);color:var(--yellow)}
.cdw-badge.closed{background:rgba(255,68,102,.1);color:var(--red)}
.cdw-window-label{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px}
.window-open{color:var(--green)}.window-narrow{color:var(--yellow)}.window-watch{color:var(--orange)}.window-closed{color:var(--red)}

/* ARCH Sensitivity Simulator */
.simulator-wrap{background:linear-gradient(135deg,rgba(10,10,18,.98),rgba(18,18,30,.96));border:1px solid rgba(0,217,255,.12);border-radius:18px;padding:22px;margin-top:16px}
.sim-title{font-size:17px;font-weight:900;font-family:var(--font-heading);color:var(--text-primary);margin-bottom:4px}
.sim-sub{font-size:11px;color:var(--text-muted);margin-bottom:18px}
.sim-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.sim-controls{display:grid;gap:14px}
.sim-row{display:flex;align-items:center;gap:10px}
.sim-pillar-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;width:120px;flex-shrink:0}
.sim-slider{flex:1;-webkit-appearance:none;height:6px;border-radius:3px;outline:none;cursor:pointer}
.sim-slider.a-slider{background:linear-gradient(90deg,rgba(0,217,255,.2),rgba(0,217,255,.6))}
.sim-slider.r-slider{background:linear-gradient(90deg,rgba(0,255,136,.2),rgba(0,255,136,.6))}
.sim-slider.c-slider{background:linear-gradient(90deg,rgba(255,170,0,.2),rgba(255,170,0,.6))}
.sim-slider.h-slider{background:linear-gradient(90deg,rgba(170,102,255,.2),rgba(170,102,255,.6))}
.sim-val{font-size:13px;font-weight:800;font-family:var(--font-mono);width:36px;text-align:right}
.sim-output{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px}
.sim-ari-display{text-align:center}
.sim-ari-label{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);font-weight:800;margin-bottom:6px}
.sim-ari-val{font-size:56px;font-weight:900;font-family:var(--font-heading);line-height:1;background:linear-gradient(135deg,var(--primary),var(--success));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sim-ari-delta{font-size:16px;font-weight:700;margin-top:4px}
.sim-ari-tier{font-size:11px;margin-top:8px;color:var(--text-muted)}
.sim-bar-section{margin-top:6px}
.sim-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.sim-bar-name{font-size:10px;font-weight:800;text-transform:uppercase;width:88px;flex-shrink:0;letter-spacing:.4px}
.sim-bar-track{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden}
.sim-bar-fill{height:100%;border-radius:4px;transition:width .35s ease}
.sim-bar-num{font-size:11px;font-family:var(--font-mono);font-weight:800;width:38px;text-align:right}
.sim-scenario-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.sim-tag{font-size:10px;padding:4px 9px;border-radius:999px;font-weight:700;cursor:pointer;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:var(--text-secondary);transition:all .2s}
.sim-tag:hover,.sim-tag.active-tag{background:rgba(0,217,255,.12);color:var(--accent);border-color:rgba(0,217,255,.3)}
.sim-country-sel{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border);padding:8px 14px;border-radius:8px;font-size:12px;width:220px;cursor:pointer;font-family:var(--font-main);outline:none}
.sim-country-sel:focus{border-color:var(--accent)}

@media(max-width:720px){
  .sim-grid{grid-template-columns:1fr}
  .cdw-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){.cdw-grid{grid-template-columns:1fr}}


/* ═══ FONT SIZE BOOST ═══ */
body { font-size: 15px; }
.kpi-value { font-size: clamp(22px, 4vw, 32px) !important; }
.kpi-label { font-size: 12px !important; }
.panel-title { font-size: 15px !important; }
.data-table th, .data-table td { font-size: 13px !important; }
.section-header { font-size: clamp(18px, 3vw, 24px) !important; }
.nav-item { font-size: 13px !important; }
.logo { font-size: clamp(16px, 3vw, 20px) !important; }
.topbar-badge { font-size: 11px !important; }
.tab-btn { font-size: 13px !important; }
.chat-message { font-size: 14px !important; }
.search-input, .filter-select { font-size: 14px !important; }
p, li, .text-body { font-size: 14px !important; line-height: 1.7; }

/* ═══ MOBILE RESPONSIVE ═══ */
@media (max-width: 768px) {
  /* Layout: collapse sidebar to bottom nav */
  .app-layout { flex-direction: column !important; }
  .sidebar {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 60px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 8px !important;
    border-right: none !important;
    border-top: 1px solid var(--border) !important;
    z-index: 900 !important;
  }
  .sidebar-section, .sidebar-label { display: none !important; }
  .nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 56px !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
    border-left: none !important;
    border-bottom: 2px solid transparent !important;
    flex-shrink: 0 !important;
  }
  .nav-item.active { border-left: none !important; border-bottom: 2px solid var(--accent) !important; }
  .nav-item .nav-icon { font-size: 18px !important; margin-bottom: 2px !important; }
  .main-content {
    margin-left: 0 !important;
    padding-bottom: 72px !important;
    width: 100% !important;
  }
  /* Topbar */
  .topbar { padding: 10px 14px !important; }
  .topbar-right .topbar-badge:not(:first-child) { display: none; }
  /* KPI grid: 2 columns on mobile */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .kpi-card { padding: 14px 12px !important; }
  .kpi-value { font-size: 22px !important; }
  /* Section panels */
  .section-panel { margin: 0 0 12px 0 !important; border-radius: 10px !important; }
  .panel-header { padding: 14px 16px !important; }
  .content-area { padding: 14px !important; }
  /* Tables: horizontal scroll */
  .table-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .data-table { min-width: 600px !important; }
  /* Charts */
  .chart-container { height: 220px !important; }
  /* Filter bar: wrap */
  .filter-bar { flex-wrap: wrap !important; gap: 8px !important; }
  .filter-select, .search-input { font-size: 14px !important; min-width: 0 !important; flex: 1 1 140px !important; }
  /* Tabs: scroll */
  .tabs-bar { overflow-x: auto !important; white-space: nowrap !important; -webkit-overflow-scrolling: touch !important; }
  .tab-btn { min-width: max-content !important; }
  /* Hero section */
  .hero-section { padding: 24px 16px !important; }
  .hero-title { font-size: clamp(18px, 5vw, 28px) !important; }
  .hero-subtitle { font-size: 13px !important; }
  /* Modal */
  .modal-content { margin: 16px !important; width: calc(100% - 32px) !important; max-height: 85vh !important; overflow-y: auto !important; }
  /* AI Chat */
  .chat-container { height: 300px !important; }
  /* Country grid */
  .countries-grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* Scenario cards */
  .scenario-cards { grid-template-columns: 1fr !important; }
  /* Hide non-essential topbar items on mobile */
  .topbar-search { display: none !important; }
  /* Solutions lab grid */
  .solutions-grid { grid-template-columns: 1fr !important; }
  /* Alerts list spacing */
  .alert-item { padding: 12px 14px !important; }
}

@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .kpi-value { font-size: 20px !important; }
  .section-header { font-size: 16px !important; }
  .panel-title { font-size: 14px !important; }
  body { font-size: 14px; }
}

/* ============================================================================ */
/* GOPROSPERITY OS™ - VIBRANT MOBILE-APP-INSPIRED DESIGN */
/* Bold • Colorful • Professional • Elite */
/* ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* VIBRANT COLOR PALETTE */
  --primary: #00d9ff;
  --success: #00ff88;
  --warning: #ffd700;
  --danger: #ff6b6b;
  --purple: #9d4edd;
  --orange: #ff9500;

  /* GLOWS & EFFECTS */
  --glow-primary: rgba(0, 217, 255, 0.4);
  --glow-success: rgba(0, 255, 136, 0.4);
  --glow-warning: rgba(255, 215, 0, 0.4);
  --glow-danger: rgba(255, 107, 107, 0.4);
  --glow-purple: rgba(157, 78, 221, 0.4);

  /* TEXT HIERARCHY */
  --text-primary: #ffffff;
  --text-secondary: #c5d4e8;
  --text-muted: #8b99ae;

  /* BACKGROUNDS */
  --bg-primary: #0a0a0f;
  --bg-card: rgba(26, 32, 48, 0.6);
  --bg-card-hover: rgba(35, 45, 70, 0.8);

  /* BORDERS */
  --border: rgba(157, 78, 221, 0.15);
  --border-bright: rgba(0, 217, 255, 0.3);

  /* GRADIENTS */
  --card-gradient: linear-gradient(135deg, rgba(157, 78, 221, 0.08), rgba(0, 217, 255, 0.05));
  --card-gradient-hover: linear-gradient(135deg, rgba(157, 78, 221, 0.15), rgba(0, 217, 255, 0.12));

  /* FONTS */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ========== ANIMATED GRADIENT BACKGROUND ========== */
body {
  background: linear-gradient(135deg, #1a0f2e 0%, #0f1b2e 50%, #0a1628 100%) !important;
  font-family: var(--font-body) !important;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
    radial-gradient(circle at 20% 50%, rgba(157, 78, 221, 0.15), transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(0, 217, 255, 0.12), transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(0, 255, 136, 0.08), transparent 50%);
  animation: meshMove 20s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes meshMove {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-5%, 5%) rotate(120deg); }
  66% { transform: translate(5%, -5%) rotate(240deg); }
}

.topbar, .main-nav, .container, .view, footer { 
  position: relative; 
  z-index: 1; 
}

/* ========== TOPBAR ========== */
.topbar {
  background: rgba(15, 15, 25, 0.85) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 2px solid var(--border-bright) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  padding: 16px 24px !important;
}

.logo {
  font-size: 22px !important;
  font-weight: 900 !important;
  font-family: var(--font-heading) !important;
  background: linear-gradient(135deg, var(--primary), var(--purple)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: -0.5px !important;
}

.logo-icon {
  background: linear-gradient(135deg, var(--primary), var(--success)) !important;
  box-shadow: 0 0 20px var(--glow-primary) !important;
}

.live-badge {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 255, 136, 0.1)) !important;
  border: 1px solid var(--success) !important;
  color: var(--success) !important;
  font-weight: 800 !important;
  box-shadow: 0 0 15px var(--glow-success) !important;
  padding: 6px 14px !important;
  font-size: 11px !important;
}

.topbar-btn {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.topbar-btn:hover {
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.15), rgba(157, 78, 221, 0.15)) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px var(--glow-primary) !important;
}

.topbar-btn.primary {
  background: linear-gradient(135deg, var(--primary), var(--purple)) !important;
  color: #000 !important;
  font-weight: 800 !important;
  border: none !important;
}

.topbar-btn.primary:hover {
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 12px 30px var(--glow-primary) !important;
}

/* ========== NAVIGATION TABS ========== */
.main-nav {
  background: rgba(15, 15, 25, 0.8) !important;
  backdrop-filter: blur(15px) !important;
  padding: 8px 16px !important;
  gap: 8px !important;
  overflow-x: auto !important;
  border-bottom: 1px solid var(--border) !important;
}

.nav-tab {
  padding: 14px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: var(--font-heading) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--text-muted) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
}

.nav-tab:hover {
  background: rgba(157, 78, 221, 0.1) !important;
  color: var(--text-primary) !important;
  transform: translateY(-2px) !important;
  border-color: var(--purple) !important;
}

.nav-tab.active {
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.2), rgba(157, 78, 221, 0.15)) !important;
  border: 2px solid var(--primary) !important;
  color: var(--primary) !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 20px var(--glow-primary) !important;
  transform: translateY(-2px) !important;
}

.nav-tab .badge {
  background: linear-gradient(135deg, var(--warning), var(--orange)) !important;
  color: #000 !important;
  font-weight: 900 !important;
  border-radius: 8px !important;
  padding: 2px 8px !important;
  font-size: 10px !important;
  margin-left: 6px !important;
}

/* ========== SECTION HEADERS ========== */
.section-band {
  background: linear-gradient(90deg, rgba(157, 78, 221, 0.15) 0%, rgba(0, 217, 255, 0.08) 50%, transparent 100%) !important;
  border-left: 4px solid var(--primary) !important;
  border-radius: 0 16px 16px 0 !important;
  padding: 16px 24px !important;
  margin: 24px 0 16px 0 !important;
  box-shadow: 0 4px 15px rgba(0, 217, 255, 0.1) !important;
}

.section-band-title {
  font-size: 20px !important;
  font-weight: 900 !important;
  font-family: var(--font-heading) !important;
  color: var(--primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 0 20px var(--glow-primary) !important;
}

.section-band-sub {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  margin-top: 4px !important;
}

/* Color variants for section bands */
.section-band.green { 
  background: linear-gradient(90deg, rgba(0, 255, 136, 0.15) 0%, transparent 100%) !important;
  border-left-color: var(--success) !important;
}
.section-band.green .section-band-title { 
  color: var(--success) !important;
  text-shadow: 0 0 20px var(--glow-success) !important;
}

.section-band.yellow { 
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.15) 0%, transparent 100%) !important;
  border-left-color: var(--warning) !important;
}
.section-band.yellow .section-band-title { 
  color: var(--warning) !important;
  text-shadow: 0 0 20px var(--glow-warning) !important;
}

.section-band.red { 
  background: linear-gradient(90deg, rgba(255, 107, 107, 0.15) 0%, transparent 100%) !important;
  border-left-color: var(--danger) !important;
}
.section-band.red .section-band-title { 
  color: var(--danger) !important;
  text-shadow: 0 0 20px var(--glow-danger) !important;
}

.section-band.purple { 
  background: linear-gradient(90deg, rgba(157, 78, 221, 0.15) 0%, transparent 100%) !important;
  border-left-color: var(--purple) !important;
}
.section-band.purple .section-band-title { 
  color: var(--purple) !important;
  text-shadow: 0 0 20px var(--glow-purple) !important;
}

/* ========== KPI CARDS ========== */
.kpi-card {
  background: var(--card-gradient) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--purple));
  opacity: 0;
  transition: opacity 0.3s;
}

.kpi-card:hover {
  border-color: var(--primary) !important;
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 20px 50px rgba(0, 217, 255, 0.2) !important;
  background: var(--card-gradient-hover) !important;
}

.kpi-card:hover::before { opacity: 1; }

.kpi-label {
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-family: var(--font-heading) !important;
  color: var(--text-secondary) !important;
  margin-bottom: 12px !important;
}

.kpi-value {
  font-size: 48px !important;
  font-weight: 900 !important;
  font-family: var(--font-heading) !important;
  background: linear-gradient(135deg, var(--primary), var(--success)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  line-height: 1.1 !important;
  margin-bottom: 12px !important;
}

.kpi-change {
  font-size: 14px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.kpi-change.up { color: var(--success) !important; }
.kpi-change.down { color: var(--danger) !important; }

.kpi-note {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* KPI Card Color Variants */
.kpi-card.green-accent .kpi-value {
  background: linear-gradient(135deg, var(--success), #00cc70) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.kpi-card.yellow-accent .kpi-value {
  background: linear-gradient(135deg, var(--warning), var(--orange)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.kpi-card.red-accent .kpi-value {
  background: linear-gradient(135deg, var(--danger), #ff4444) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ========== TIER BADGES ========== */
.tier-badge {
  padding: 6px 14px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  font-family: var(--font-heading) !important;
  letter-spacing: 0.5px !important;
}

.tier-1 {
  background: linear-gradient(135deg, var(--success), #00cc70) !important;
  color: #000 !important;
  box-shadow: 0 4px 15px var(--glow-success) !important;
}

.tier-2 {
  background: linear-gradient(135deg, var(--warning), var(--orange)) !important;
  color: #000 !important;
  box-shadow: 0 4px 15px var(--glow-warning) !important;
}

.tier-3 {
  background: linear-gradient(135deg, var(--orange), #ff7700) !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(255, 149, 0, 0.4) !important;
}

.tier-4 {
  background: linear-gradient(135deg, var(--danger), #ff4444) !important;
  color: #fff !important;
  box-shadow: 0 4px 15px var(--glow-danger) !important;
}

/* ========== CARDS ========== */
.card {
  background: var(--card-gradient) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

.card:hover {
  border-color: var(--border-bright) !important;
  box-shadow: 0 20px 50px rgba(157, 78, 221, 0.15) !important;
  transform: translateY(-4px) !important;
}

.card h3, .card h4 {
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
}

/* ========== TABLES ========== */
.table-wrap {
  background: var(--card-gradient) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

.data-table thead th {
  background: linear-gradient(135deg, rgba(157, 78, 221, 0.2), rgba(0, 217, 255, 0.1)) !important;
  color: var(--primary) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  font-family: var(--font-heading) !important;
  padding: 16px 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  border-bottom: 2px solid var(--primary) !important;
}

.data-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
  transition: all 0.3s !important;
}

.data-table tbody tr:hover {
  background: rgba(0, 217, 255, 0.08) !important;
  transform: scale(1.01) !important;
}

.data-table td {
  padding: 14px !important;
  color: var(--text-secondary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* ========== BUTTONS ========== */
button, .btn {
  font-family: var(--font-heading) !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

button:hover, .btn:hover {
  transform: translateY(-3px) scale(1.05) !important;
}

.dl-btn {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--text-secondary) !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.dl-btn:hover {
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.15), rgba(157, 78, 221, 0.1)) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  box-shadow: 0 8px 20px var(--glow-primary) !important;
}

/* ========== FORMS ========== */
select, input[type="number"], input[type="text"] {
  background: rgba(26, 32, 48, 0.6) !important;
  border: 2px solid var(--border) !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  padding: 12px 16px !important;
  transition: all 0.3s !important;
}

select:focus, input:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  background: rgba(35, 45, 70, 0.8) !important;
  box-shadow: 0 0 0 3px var(--glow-primary) !important;
}

/* ========== STATUS BADGES ========== */
.status-badge {
  padding: 6px 14px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  font-family: var(--font-heading) !important;
}

.status-good {
  background: linear-gradient(135deg, rgba(0, 255, 136, 0.25), rgba(0, 255, 136, 0.15)) !important;
  color: var(--success) !important;
  border: 1px solid var(--success) !important;
  box-shadow: 0 4px 12px var(--glow-success) !important;
}

.status-medium {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(255, 215, 0, 0.15)) !important;
  color: var(--warning) !important;
  border: 1px solid var(--warning) !important;
  box-shadow: 0 4px 12px var(--glow-warning) !important;
}

.status-low {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.25), rgba(255, 107, 107, 0.15)) !important;
  color: var(--danger) !important;
  border: 1px solid var(--danger) !important;
  box-shadow: 0 4px 12px var(--glow-danger) !important;
}

/* ========== SECTION HINTS ========== */
.section-hint {
  background: linear-gradient(135deg, rgba(0, 217, 255, 0.08), rgba(157, 78, 221, 0.05)) !important;
  border-left: 3px solid var(--primary) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 14px 20px !important;
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
}

/* ========== TYPOGRAPHY ========== */
h1, h2, h3, h4, h5 {
  font-family: var(--font-heading) !important;
  font-weight: 900 !important;
  color: var(--text-primary) !important;
}

strong { 
  font-weight: 800 !important; 
  color: var(--primary) !important; 
}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { 
  background: rgba(0, 0, 0, 0.3); 
  border-radius: 10px; 
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, var(--primary), var(--purple));
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, var(--success), var(--primary));
  box-shadow: 0 0 10px var(--glow-primary);
}

/* ========== ANIMATIONS ========== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.view { 
  animation: fadeInUp 0.5s ease-out !important; 
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .kpi-value { font-size: 36px !important; }
  .section-band-title { font-size: 16px !important; }
  .nav-tab { font-size: 12px !important; padding: 12px 16px !important; }
}

/* ═══ MOBILE FIX PATCH v7.1 ═══ */
@media (max-width: 768px) {

  /* Fix: 2-col grids collapse to 1 */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Fix: auto-fit grids with large minmax — force single col below 480 */
  .solutions-grid,
  .arch-grid,
  .scenario-grid,
  .card-grid,
  .countries-grid,
  .metrics-grid,
  .sector-grid,
  .portfolio-grid,
  .alert-grid,
  .about-grid {
    grid-template-columns: 1fr !important;
  }

  /* Fix: section hero/content padding too large */
  [style*="padding:60px 24px"],
  [style*="padding: 60px 24px"] {
    padding: 28px 16px !important;
  }
  [style*="padding:40px 24px"],
  [style*="padding: 40px 24px"] {
    padding: 24px 16px !important;
  }
  [style*="max-width:1400px"],
  [style*="max-width: 1400px"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Fix: minmax(300px) and minmax(230px) grids */
  div[style*="minmax(300px"],
  div[style*="minmax(230px"],
  div[style*="minmax(280px"],
  div[style*="minmax(260px"] {
    grid-template-columns: 1fr !important;
  }

  /* Fix: modal full width */
  .modal { 
    width: calc(100vw - 24px) !important; 
    max-width: 100% !important;
    margin: 12px !important;
    border-radius: 12px !important;
  }

  /* Fix: topbar overflow */
  .topbar { overflow: hidden !important; }
  .topbar-left { min-width: 0 !important; overflow: hidden !important; }
  .topbar-right { flex-shrink: 0 !important; }

  /* Fix: content sections inner padding */
  .content-area,
  .section-body,
  .panel-body {
    padding: 14px 12px !important;
  }

  /* Fix: hero title/subtitle max-width on mobile */
  [style*="max-width:800px"],
  [style*="max-width:780px"],
  [style*="max-width:700px"],
  [style*="max-width:640px"],
  [style*="max-width:560px"],
  [style*="max-width:600px"] {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Fix: horizontal scroll in filter bars */
  .filter-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 6px !important;
  }

  /* Fix: tab bars overflow */
  .nav-tabs, .tabs-row, .tab-bar {
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .nav-tabs::-webkit-scrollbar,
  .tabs-row::-webkit-scrollbar { display: none !important; }

  /* Fix: chart containers responsive height */
  canvas, .chart-wrap, .chart-box {
    max-width: 100% !important;
    height: auto !important;
    min-height: 180px !important;
  }

  /* Fix: ARCH pillar bars too wide */
  .pillar-bar-wrap { width: 100% !important; max-width: 100% !important; }

  /* Fix: country detail grid */
  .cdw-grid { grid-template-columns: 1fr !important; }
  .sim-grid  { grid-template-columns: 1fr !important; }
}

/* Extra small phones */
@media (max-width: 420px) {
  .topbar-badge { display: none !important; }
  .logo sub { display: none !important; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .kpi-card { padding: 12px 10px !important; }
  .kpi-value { font-size: 18px !important; }
  .nav-item { min-width: 48px !important; font-size: 9px !important; }
  .nav-item .nav-icon { font-size: 16px !important; }
  body { font-size: 13px !important; }
  .section-header { font-size: 15px !important; }
}


/* ═══ LIGHT MODE THEME ═══ */
[data-theme="light"] {
  --bg-primary: #f0f2f5;
  --bg-secondary: #e8eaed;
  --bg-card: #ffffff;
  --bg-card-hover: #f5f7fa;
  --accent: #007a6e;
  --accent-dim: rgba(0,122,110,0.10);
  --accent-glow: rgba(0,122,110,0.20);
  --border-accent: rgba(0,122,110,0.22);
  --gold: #b07a00;
  --gold-dim: rgba(176,122,0,0.12);
  --green: #16a34a;
  --green-dim: rgba(22,163,74,0.10);
  --red: #dc2626;
  --red-dim: rgba(220,38,38,0.10);
  --yellow: #b45309;
  --yellow-dim: rgba(180,83,9,0.10);
  --purple: #6d28d9;
  --purple-dim: rgba(109,40,217,0.10);
  --orange: #c2410c;
  --orange-dim: rgba(194,65,12,0.10);
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --border: rgba(0,0,0,0.10);
  --border-strong: rgba(0,0,0,0.15);
  --font-main: 'Inter', -apple-system, sans-serif;
}
[data-theme="light"] body {
  background: #f0f2f5 !important;
  color: #111827 !important;
}
[data-theme="light"] .topbar,
[data-theme="light"] .main-nav {
  background: rgba(255,255,255,0.97) !important;
  border-bottom-color: rgba(0,0,0,0.10) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .logo { color: #007a6e !important; background: none !important; -webkit-text-fill-color: #007a6e !important; }
[data-theme="light"] .live-badge { background: rgba(22,163,74,0.12) !important; border-color: rgba(22,163,74,0.3) !important; }
[data-theme="light"] .topbar-btn { color: #374151 !important; border-color: rgba(0,0,0,0.12) !important; background: rgba(0,0,0,0.02) !important; }
[data-theme="light"] .topbar-btn:hover { background: rgba(0,122,110,0.08) !important; color: #007a6e !important; border-color: rgba(0,122,110,0.25) !important; }
[data-theme="light"] .topbar-btn.primary { background: #007a6e !important; color: #fff !important; border-color: #007a6e !important; }
[data-theme="light"] .nav-tab { color: #6b7280 !important; background: transparent !important; }
[data-theme="light"] .nav-tab:hover { color: #111827 !important; background: rgba(0,122,110,0.06) !important; }
[data-theme="light"] .nav-tab.active { color: #007a6e !important; border-bottom-color: #007a6e !important; background: rgba(0,122,110,0.06) !important; }
[data-theme="light"] .nav-tab .badge { background: #007a6e !important; color: #fff !important; }
[data-theme="light"] .kpi-card { background: #ffffff !important; border-color: rgba(0,0,0,0.09) !important; }
[data-theme="light"] .kpi-card:hover { border-color: rgba(0,122,110,0.3) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.10) !important; }
[data-theme="light"] .kpi-label { color: #6b7280 !important; }
[data-theme="light"] .kpi-value { color: #111827 !important; }
[data-theme="light"] .card, [data-theme="light"] .glass-card, [data-theme="light"] .gradient-border { background: #ffffff !important; border-color: rgba(0,0,0,0.09) !important; }
[data-theme="light"] .card:hover, [data-theme="light"] .glass-card:hover { border-color: rgba(0,122,110,0.25) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.09) !important; }
[data-theme="light"] .section-band { background: rgba(255,255,255,0.9) !important; border-color: rgba(0,0,0,0.08) !important; }
[data-theme="light"] .section-band-title { color: #007a6e !important; text-shadow: none !important; }
[data-theme="light"] .section-band.green .section-band-title { color: #16a34a !important; }
[data-theme="light"] .section-band.yellow .section-band-title { color: #b45309 !important; }
[data-theme="light"] .section-band.purple .section-band-title { color: #6d28d9 !important; }
[data-theme="light"] .section-band.red .section-band-title { color: #dc2626 !important; }
[data-theme="light"] .section-hint { color: #374151 !important; background: rgba(0,122,110,0.04) !important; border-left-color: #007a6e !important; }
[data-theme="light"] .table-wrap { background: #ffffff !important; border-color: rgba(0,0,0,0.09) !important; }
[data-theme="light"] .data-table thead th { background: #f8f9fa !important; color: #6b7280 !important; border-bottom-color: rgba(0,0,0,0.09) !important; }
[data-theme="light"] .data-table tbody tr { border-bottom-color: rgba(0,0,0,0.06) !important; color: #111827 !important; }
[data-theme="light"] .data-table tbody tr:hover { background: rgba(0,122,110,0.05) !important; }
[data-theme="light"] .data-table td { color: #111827 !important; }
[data-theme="light"] .narrative { background: rgba(0,122,110,0.04) !important; border-color: rgba(0,122,110,0.15) !important; color: #374151 !important; }
[data-theme="light"] .filter-btn { background: #ffffff !important; border-color: rgba(0,0,0,0.10) !important; color: #374151 !important; }
[data-theme="light"] .filter-btn:hover, [data-theme="light"] .filter-btn.active { background: rgba(0,122,110,0.08) !important; color: #007a6e !important; border-color: rgba(0,122,110,0.25) !important; }
[data-theme="light"] .search-input { background: #ffffff !important; border-color: rgba(0,0,0,0.12) !important; color: #111827 !important; }
[data-theme="light"] .search-input::placeholder { color: #9ca3af !important; }
[data-theme="light"] .search-input:focus { border-color: #007a6e !important; }
[data-theme="light"] .dl-btn { background: #ffffff !important; border-color: rgba(0,0,0,0.10) !important; color: #374151 !important; }
[data-theme="light"] .dl-btn:hover { background: rgba(0,122,110,0.08) !important; color: #007a6e !important; border-color: rgba(0,122,110,0.25) !important; }
[data-theme="light"] .modal { background: #ffffff !important; border-color: rgba(0,0,0,0.12) !important; }
[data-theme="light"] .modal-header { background: #ffffff !important; border-bottom-color: rgba(0,0,0,0.09) !important; }
[data-theme="light"] .modal-close { background: #f3f4f6 !important; border-color: rgba(0,0,0,0.10) !important; color: #6b7280 !important; }
[data-theme="light"] .cdw-card { background: #ffffff !important; border-color: rgba(0,0,0,0.09) !important; }
[data-theme="light"] .cdw-card:hover { border-color: rgba(0,122,110,0.3) !important; }
[data-theme="light"] .cdw-name { color: #111827 !important; }
[data-theme="light"] .simulator-wrap { background: #ffffff !important; border-color: rgba(0,0,0,0.09) !important; }
[data-theme="light"] .sim-output { background: #f8f9fa !important; border-color: rgba(0,0,0,0.09) !important; }
[data-theme="light"] .scenario-card { background: #ffffff !important; border-color: rgba(0,0,0,0.09) !important; }
[data-theme="light"] .solution-card { background: #ffffff !important; border-color: rgba(0,0,0,0.09) !important; }
[data-theme="light"] ::-webkit-scrollbar-track { background: #f0f2f5 !important; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18) !important; }
[data-theme="light"] #loginOverlay { background: linear-gradient(135deg, #e8edf5, #f0f4fa) !important; }
[data-theme="light"] #loginOverlay > div { background: #ffffff !important; border-color: rgba(0,0,0,0.12) !important; }
[data-theme="light"] #loginOverlay input { background: #f8f9fc !important; border-color: rgba(0,0,0,0.12) !important; color: #111827 !important; }

/* Theme toggle button */
.ri-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 64px;
  height: 28px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  flex-shrink: 0;
  font-size: 13px;
  margin-left: 4px;
}
.ri-theme-toggle:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.2); }
[data-theme="light"] .ri-theme-toggle { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.15); }
[data-theme="light"] .ri-theme-toggle:hover { background: rgba(0,0,0,0.08); }
.ri-theme-knob {
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent, #00e5c8);
  top: 2px; left: 3px;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
[data-theme="light"] .ri-theme-knob { transform: translateX(36px); background: #007a6e; }