:root{
  --bg:#07111d;
  --panel:#0d1b2c;
  --panel-2:#0a1625;
  --edge:#19314a;
  --accent:#19a8ff;
  --accent-2:#00d0a8;
  --text:#e9f2fb;
  --muted:#93a9bf;
  --positive:#4cd389;
  --negative:#ff6b6b;
  --warning:#f6b74a;
  --shadow:0 18px 48px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(28,76,131,.35), transparent 30%),
    radial-gradient(circle at top right, rgba(16,143,176,.18), transparent 25%),
    linear-gradient(180deg,#07111d 0%,#081524 100%);
}
button,input,select,textarea{font:inherit}

.app-shell{max-width:1500px;margin:0 auto;padding:22px}

.topbar{
  display:grid;
  grid-template-columns:280px 1fr 410px;
  gap:18px;
  align-items:center;
  margin-bottom:14px;
}

.brand-block,.status-strip,.context-strip,.zoom-nav,.card,.map-card{
  background:linear-gradient(180deg, rgba(15,32,51,.96), rgba(8,20,35,.96));
  border:1px solid var(--edge);
  box-shadow:var(--shadow);
}

.brand-block{padding:18px 22px;border-radius:22px}
.brand-title{font-size:1.05rem;letter-spacing:.18rem;font-weight:800}
.brand-subtitle{color:var(--muted);letter-spacing:.24rem;margin-top:6px;font-size:.86rem}

.status-strip,.context-strip{
  min-height:76px;border-radius:22px;display:flex;align-items:center;justify-content:center;
  gap:16px;padding:0 22px;font-weight:700;letter-spacing:.08rem;
}
.context-strip{justify-content:space-between}
.sep{color:#5a7390}
.live-pill{
  background:rgba(0,208,168,.12);color:#86ffe2;border:1px solid rgba(0,208,168,.28);
  border-radius:999px;padding:6px 12px;font-size:.82rem;
}
.context-location{color:#b9cee3}
.temp{font-size:1.6rem}
.condition{color:#54ddc5}

.zoom-nav{
  display:flex;align-items:center;gap:10px;border-radius:20px;padding:12px;margin-bottom:16px;flex-wrap:wrap;
}
.zoom-label{color:#b6cce1;font-size:.82rem;letter-spacing:.16rem;margin-right:8px}
.zoom-btn{
  background:transparent;color:#c9d8e6;border:1px solid transparent;border-radius:12px;
  padding:11px 18px;font-weight:700;cursor:pointer;
}
.zoom-btn:hover{border-color:#2f5272}
.zoom-btn.active{
  background:rgba(25,168,255,.12);border-color:rgba(25,168,255,.45);color:white;
}
.api-connection{
  margin-left:auto;display:flex;align-items:center;gap:10px;color:#c3d7ea;
  padding:0 8px 0 12px;
}
.status-dot{
  width:10px;height:10px;border-radius:50%;display:inline-block;
  box-shadow:0 0 12px rgba(255,255,255,.22);
}
.status-dot.online{background:var(--positive)}
.status-dot.offline{background:var(--negative)}
.mini-btn,.primary-btn,.secondary-btn{
  border:none;border-radius:12px;padding:10px 14px;cursor:pointer;
}

.api-refresh-stamp{
  color:#8fb1cf;
  font-size:.78rem;
  letter-spacing:.04rem;
  white-space:nowrap;
}

.card-loading{
  opacity:.72;
}
.mini-btn{
  background:rgba(25,168,255,.12);
  border:1px solid rgba(25,168,255,.35);
  color:white;
}
.primary-btn{
  background:linear-gradient(180deg,#1493dd,#0c6cab);
  color:white;
}
.secondary-btn{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:#dce8f2;
}

/* ===== DASHBOARD LAYOUT ===== */

.dashboard-grid{
  display:grid;
  grid-template-columns:310px minmax(0,1fr) 310px;
  gap:16px;
  align-items:start;
}

.panel{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}

.left-col,
.center-col,
.right-col{
  min-width:0;
}

.left-col .card,
.center-col .card,
.right-col .card{
  width:100%;
  min-width:0;
}

/* Move calculator panel to full-width bottom row under center content */
.left-col{
  grid-column:1;
  grid-row:1 / span 2;
}

.center-col{
  grid-column:2 / 4;
  grid-row:1;
}

.right-col{
  grid-column:2 / 4;
  grid-row:2;
}

/* ===== BASE CARD STYLES ===== */

.card{
  border-radius:20px;
  padding:18px;
  overflow:hidden;
  min-width:0;
}

.card.compact{min-height:208px}

.card-title{
  font-size:1.02rem;
  font-weight:800;
  letter-spacing:.08rem;
  margin-bottom:16px;
  text-transform:uppercase;
}

.economic-gauge-wrap{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:12px;
  align-items:center;
  min-width:0;
}

.gauge{
  position:relative;
  width:120px;
  height:120px;
  flex:0 0 120px;
}

.economic-metrics{
  min-width:0;
  overflow:hidden;
}

.economic-metrics .metric-row{
  gap:10px;
  padding:8px 0;
}

.economic-metrics .metric-row span{
  font-size:.95rem;
}

.economic-metrics .metric-row strong{
  font-size:.95rem;
}

.gauge-ring{
  width:100%;height:100%;border-radius:50%;
  background:conic-gradient(var(--warning) 0deg,var(--warning) 110deg,var(--accent) 110deg,var(--accent) 220deg,rgba(255,255,255,.08) 220deg);
  -webkit-mask:radial-gradient(circle at center, transparent 54%, black 56%);
  mask:radial-gradient(circle at center, transparent 54%, black 56%);
}
.gauge-center{position:absolute;inset:0;display:grid;place-items:center}
.gauge-state{
  font-size:1.15rem;
  font-weight:800;
  text-align:center;
  padding:0 10px;
}

.metric-row,.event-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  width:100%;
  min-width:0;
  overflow:hidden;
  padding:10px 0;
  border-bottom:1px solid rgba(147,169,191,.12);
}

.metric-row:last-child,.event-item:last-child{border-bottom:none}

.metric-row span,.event-item span{
  color:#c8d8e8;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1 1 auto;
}

.metric-row strong,.event-item strong{
  font-size:1rem;
  white-space:nowrap;
  flex:0 0 auto;
  max-width:100%;
}

.negative{color:var(--negative)}
.positive{color:var(--positive)}
.pill{padding:4px 10px;border-radius:999px;font-size:.86rem}
.low{
  background:rgba(246,183,74,.12);border:1px solid rgba(246,183,74,.3);color:#ffd88d;
}
.big-stat{display:flex;align-items:flex-end;gap:10px;margin-bottom:12px}
.big-number{font-size:2.2rem;font-weight:800}
.big-label{color:var(--muted);text-transform:uppercase;letter-spacing:.08rem}
.age-bar{
  height:12px;overflow:hidden;display:flex;border-radius:999px;background:#0a1320;
  border:1px solid rgba(255,255,255,.06);
}
.age-bar>div{
  display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;color:white;
}
.age-bar>div:nth-child(1){background:#3ed0ff}
.age-bar>div:nth-child(2){background:#9fd0ff;color:#09203b}
.age-bar>div:nth-child(3){background:#ffd56a;color:#3b2200}
.age-bar>div:nth-child(4){background:#3f5b7b}
.age-legend{display:flex;justify-content:space-between;color:var(--muted);font-size:.78rem;margin:8px 0 12px}
.sub-metrics,.event-list,.key-list,.mini-grid{
  display:flex;
  flex-direction:column;
  min-width:0;
}

/* ===== MAP ===== */

.map-card{
  border-radius:24px;
  padding:16px;
  position:relative;
  min-height:820px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-width:0;
}
.sim-map{
  position:relative;flex:1;min-height:540px;border-radius:22px;overflow:hidden;
  border:1px solid rgba(125,164,202,.15);
  background:linear-gradient(180deg, #102236, #0c1a2a);
}
.leaflet-host .leaflet-control-container .leaflet-top,
.leaflet-host .leaflet-control-container .leaflet-bottom{display:none}
.leaflet-container{background:#12253a}
.map-tools{
  position:absolute;left:26px;top:26px;z-index:500;display:flex;flex-direction:column;gap:10px;
}
.map-tools button{
  width:46px;height:46px;border:none;border-radius:12px;background:rgba(15,30,49,.88);
  color:white;font-size:1.6rem;border:1px solid rgba(133,169,202,.18);cursor:pointer;
}
.viewport-status{
  position:absolute;right:28px;top:28px;z-index:500;min-width:260px;background:rgba(13,27,44,.9);
  border:1px solid rgba(147,169,191,.14);border-radius:22px;padding:18px 20px;
}
.mini-title{color:#9fb4c8;text-transform:uppercase;letter-spacing:.12rem;font-size:.74rem;margin-bottom:10px}
.weather-main{font-size:2rem;font-weight:800;margin-bottom:8px}
.weather-sub{color:#c8d8e8;margin-top:8px}

.timeline-bar{
  margin-top:16px;border-radius:20px;background:linear-gradient(180deg, rgba(12,24,39,.9), rgba(8,18,29,.92));
  border:1px solid rgba(147,169,191,.14);padding:14px 16px 12px;
}
.play-btn{
  width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;color:white;
  background:linear-gradient(180deg,#0f314d,#0b2337);margin-bottom:12px;
}
.timeline-track{height:8px;position:relative;background:rgba(255,255,255,.08);border-radius:999px}
.timeline-progress{
  position:absolute;left:0;top:0;bottom:0;width:42%;border-radius:999px;
  background:linear-gradient(90deg, rgba(25,168,255,.12), #19a8ff 70%, #70e4ff);
}
.timeline-knob{
  position:absolute;top:50%;left:42%;width:18px;height:18px;border-radius:50%;
  transform:translate(-50%,-50%);background:#7ce7ff;box-shadow:0 0 0 5px rgba(124,231,255,.16);
}
.timeline-times{display:flex;justify-content:space-between;color:#9db2c6;font-size:.85rem;margin-top:10px}

/* ===== CENTER BOTTOM CARDS ===== */

.bottom-cards{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
  margin-top:16px;
}

.sparkline{
  height:82px;margin-top:14px;border-radius:14px;
  background:
    linear-gradient(transparent 0 70%, rgba(255,255,255,.05) 70% 71%, transparent 71% 100%),
    radial-gradient(circle at 10% 70%, rgba(255,255,255,.12) 0 2px, transparent 3px),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  position:relative;overflow:hidden;
}
.sparkline::after{
  content:"";position:absolute;left:0;right:0;top:18px;bottom:14px;background-repeat:no-repeat;background-size:100% 100%;
}
.sparkline.red::after{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 80"><polyline fill="none" stroke="%23ff6b6b" stroke-width="4" points="0,46 25,55 50,50 75,57 100,62 125,51 150,47 175,28 200,39 225,32 250,50 275,44 300,54"/></svg>');
}
.sparkline.blue::after{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 80"><polyline fill="none" stroke="%2319a8ff" stroke-width="4" points="0,56 25,54 50,42 75,30 100,22 125,20 150,17 175,19 200,16 225,26 250,31 275,29 300,36"/></svg>');
}

/* ===== BLOOMBERG-STYLE PAYCHECK PANEL ===== */

.right-col{
  display:block;
}

.right-col .card,
#paycheckCalculator,
.paycheck-calculator,
.paycheck-card,
.illinois-paycheck-calculator{
  width:100%;
  border-radius:22px;
  padding:18px 18px 16px;
  background:
    linear-gradient(180deg, rgba(10,20,32,.98), rgba(7,16,26,.98)),
    linear-gradient(90deg, rgba(25,168,255,.04), rgba(0,208,168,.03));
  border:1px solid rgba(60,108,146,.65);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 20px 44px rgba(0,0,0,.34);
  position:relative;
}

.right-col .card::before,
#paycheckCalculator::before,
.paycheck-calculator::before,
.paycheck-card::before,
.illinois-paycheck-calculator::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:linear-gradient(90deg, #f6b74a 0%, #19a8ff 35%, #00d0a8 70%, #f6b74a 100%);
  opacity:.9;
}

.right-col .card .card-title,
#paycheckCalculator .card-title,
.paycheck-calculator .card-title,
.paycheck-card .card-title,
.illinois-paycheck-calculator .card-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(84,110,138,.28);
  color:#eef6ff;
  letter-spacing:.16rem;
  font-size:.98rem;
}

.right-col .card .card-title::after,
#paycheckCalculator .card-title::after,
.paycheck-calculator .card-title::after,
.paycheck-card .card-title::after,
.illinois-paycheck-calculator .card-title::after{
  content:"LIVE ESTIMATE";
  flex:0 0 auto;
  color:#f6b74a;
  font-size:.68rem;
  letter-spacing:.18rem;
  padding:4px 8px;
  border:1px solid rgba(246,183,74,.28);
  border-radius:999px;
  background:rgba(246,183,74,.08);
}

.right-col .card .mini-grid,
#paycheckCalculator .mini-grid,
.paycheck-calculator .mini-grid,
.paycheck-card .mini-grid,
.illinois-paycheck-calculator .mini-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(150px, 1fr));
  gap:12px;
  width:100%;
}

.right-col .card .sub-metrics,
#paycheckCalculator .sub-metrics,
.paycheck-calculator .sub-metrics,
.paycheck-card .sub-metrics,
.illinois-paycheck-calculator .sub-metrics{
  display:grid;
  grid-template-columns:repeat(4, minmax(150px, 1fr));
  gap:12px;
  align-items:start;
}

.right-col .card .metric-row,
#paycheckCalculator .metric-row,
.paycheck-calculator .metric-row,
.paycheck-card .metric-row,
.illinois-paycheck-calculator .metric-row{
  padding:12px 0;
  border-bottom:1px solid rgba(80,102,126,.22);
}

.right-col .card input,
.right-col .card select,
.right-col .card textarea,
#paycheckCalculator input,
#paycheckCalculator select,
#paycheckCalculator textarea,
.paycheck-calculator input,
.paycheck-calculator select,
.paycheck-calculator textarea,
.paycheck-card input,
.paycheck-card select,
.paycheck-card textarea,
.illinois-paycheck-calculator input,
.illinois-paycheck-calculator select,
.illinois-paycheck-calculator textarea{
  width:100%;
  min-height:40px;
  padding:10px 12px;
  color:#eef6ff;
  background:linear-gradient(180deg, rgba(8,18,29,.98), rgba(11,23,36,.98));
  border:1px solid rgba(82,114,145,.38);
  border-radius:10px;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

.right-col .card input:focus,
.right-col .card select:focus,
.right-col .card textarea:focus,
#paycheckCalculator input:focus,
#paycheckCalculator select:focus,
#paycheckCalculator textarea:focus,
.paycheck-calculator input:focus,
.paycheck-calculator select:focus,
.paycheck-calculator textarea:focus,
.paycheck-card input:focus,
.paycheck-card select:focus,
.paycheck-card textarea:focus,
.illinois-paycheck-calculator input:focus,
.illinois-paycheck-calculator select:focus,
.illinois-paycheck-calculator textarea:focus{
  border-color:rgba(25,168,255,.65);
  box-shadow:0 0 0 3px rgba(25,168,255,.12);
}

.right-col .card label,
#paycheckCalculator label,
.paycheck-calculator label,
.paycheck-card label,
.illinois-paycheck-calculator label{
  display:block;
  margin-bottom:6px;
  color:#9db7d0;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08rem;
  text-transform:uppercase;
}

.right-col .card .section-label,
.right-col .card .group-title,
#paycheckCalculator .section-label,
#paycheckCalculator .group-title,
.paycheck-calculator .section-label,
.paycheck-calculator .group-title,
.paycheck-card .section-label,
.paycheck-card .group-title,
.illinois-paycheck-calculator .section-label,
.illinois-paycheck-calculator .group-title{
  margin:4px 0 10px;
  padding:0 0 8px;
  color:#7ecfff;
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.14rem;
  text-transform:uppercase;
  border-bottom:1px solid rgba(70,102,130,.24);
}

.right-col .card .result-row,
#paycheckCalculator .result-row,
.paycheck-calculator .result-row,
.paycheck-card .result-row,
.illinois-paycheck-calculator .result-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
  border-bottom:1px solid rgba(80,102,126,.18);
}

.right-col .card .result-row strong,
#paycheckCalculator .result-row strong,
.paycheck-calculator .result-row strong,
.paycheck-card .result-row strong,
.illinois-paycheck-calculator .result-row strong{
  color:#86ffe2;
  font-weight:800;
  letter-spacing:.04rem;
}

.right-col .card .summary-strip,
#paycheckCalculator .summary-strip,
.paycheck-calculator .summary-strip,
.paycheck-card .summary-strip,
.illinois-paycheck-calculator .summary-strip{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(4, minmax(120px, 1fr));
  gap:12px;
}

.right-col .card .summary-strip > div,
#paycheckCalculator .summary-strip > div,
.paycheck-calculator .summary-strip > div,
.paycheck-card .summary-strip > div,
.illinois-paycheck-calculator .summary-strip > div{
  padding:12px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(9,20,32,.95), rgba(7,16,26,.95));
  border:1px solid rgba(75,103,128,.26);
}

.right-col .card .summary-strip span,
#paycheckCalculator .summary-strip span,
.paycheck-calculator .summary-strip span,
.paycheck-card .summary-strip span,
.illinois-paycheck-calculator .summary-strip span{
  display:block;
  color:#8ea8c1;
  font-size:.72rem;
  letter-spacing:.1rem;
  text-transform:uppercase;
  margin-bottom:6px;
}

.right-col .card .summary-strip strong,
#paycheckCalculator .summary-strip strong,
.paycheck-calculator .summary-strip strong,
.paycheck-card .summary-strip strong,
.illinois-paycheck-calculator .summary-strip strong{
  display:block;
  color:#eef6ff;
  font-size:1.1rem;
  font-weight:800;
}

.location-header{color:#d5e6f5;font-size:1.14rem;font-weight:800;margin-bottom:14px}
.condition-hero{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.hero-icon{font-size:3rem}
.hero-temp{font-size:2.4rem;font-weight:800}

.modal-backdrop{
  position:fixed;inset:0;background:rgba(2,8,15,.72);backdrop-filter:blur(5px);
  display:grid;place-items:center;z-index:9999;
}
.hidden{display:none}
.modal-card{
  width:min(560px,92vw);background:linear-gradient(180deg, rgba(15,32,51,.98), rgba(8,20,35,.98));
  border:1px solid var(--edge);box-shadow:var(--shadow);border-radius:24px;padding:24px;
}
.modal-card h2{margin:0 0 12px}
.modal-card p{color:#bfd0df;line-height:1.5}
.field-label{display:block;margin:14px 0 8px;color:#cfe0ef;font-weight:700}
.modal-card input{
  width:100%;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.14);
  background:#091320;color:#eaf3fc;
}
.modal-actions{display:flex;gap:12px;margin-top:16px}
.small-note{margin-top:14px;color:#8ea6bc;font-size:.92rem;line-height:1.45}

/* ===== RESPONSIVE ===== */

@media (max-width:1280px){
  .topbar{grid-template-columns:1fr}
  .dashboard-grid{
    grid-template-columns:1fr;
  }
  .left-col,
  .center-col,
  .right-col{
    grid-column:auto;
    grid-row:auto;
  }
}

@media (max-width:1100px){
  .right-col .card .mini-grid,
  #paycheckCalculator .mini-grid,
  .paycheck-calculator .mini-grid,
  .paycheck-card .mini-grid,
  .illinois-paycheck-calculator .mini-grid,
  .right-col .card .sub-metrics,
  #paycheckCalculator .sub-metrics,
  .paycheck-calculator .sub-metrics,
  .paycheck-card .sub-metrics,
  .illinois-paycheck-calculator .sub-metrics,
  .right-col .card .summary-strip,
  #paycheckCalculator .summary-strip,
  .paycheck-calculator .summary-strip,
  .paycheck-card .summary-strip,
  .illinois-paycheck-calculator .summary-strip{
    grid-template-columns:repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width:900px){
  .economic-gauge-wrap{
    grid-template-columns:1fr;
    justify-items:center;
  }

  .gauge{
    margin-bottom:8px;
  }

  .bottom-cards{
    grid-template-columns:1fr;
  }

  .right-col .card .mini-grid,
  #paycheckCalculator .mini-grid,
  .paycheck-calculator .mini-grid,
  .paycheck-card .mini-grid,
  .illinois-paycheck-calculator .mini-grid,
  .right-col .card .sub-metrics,
  #paycheckCalculator .sub-metrics,
  .paycheck-calculator .sub-metrics,
  .paycheck-card .sub-metrics,
  .illinois-paycheck-calculator .sub-metrics,
  .right-col .card .summary-strip,
  #paycheckCalculator .summary-strip,
  .paycheck-calculator .summary-strip,
  .paycheck-card .summary-strip,
  .illinois-paycheck-calculator .summary-strip{
    grid-template-columns:1fr;
  }
}
.diagnostics-card .card-title{
  margin-bottom:12px;
}

.diagnostics-grid,
.diagnostics-meta{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.diagnostics-card .metric-row strong,
.diagnostics-line strong{
  max-width:54%;
  overflow:hidden;
  text-overflow:ellipsis;
}

.diagnostics-meta{
  margin-top:12px;
  gap:8px;
}

.diagnostics-line{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:8px 0;
  border-top:1px solid rgba(147,169,191,.12);
  color:#c8d8e8;
}

.diagnostics-line span{
  color:#9fb4c8;
  white-space:nowrap;
}

@media (max-width: 1200px){
  .diagnostics-card .metric-row strong,
  .diagnostics-line strong{
    max-width:48%;
  }
}