*{box-sizing:border-box}
:root{
  --bg:#071421;
  --panel:#10263a;
  --panel2:#153149;
  --text:#fff;
  --muted:#c2d1de;
  --muted2:#8ea5b8;
  --line:rgba(255,255,255,.15);
  --accent:#8bd3ff;
  --accent2:#a595ff;
  --green:#52dfa2;
  --danger:#ff6675;
  --warning:#ffbe55;
  --shadow:0 20px 60px rgba(0,0,0,.22);
}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#123653 0%,#0a1d2e 42%,#06111d 100%);
}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid rgba(139,211,255,.38);outline-offset:2px}
.hidden{display:none!important}
.app-shell{width:min(100%,900px);margin:auto;padding:22px 18px 116px}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.top-actions{display:flex;gap:8px}
.brand-row{display:flex;align-items:center;gap:10px}
.logo-mark{
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  font-weight:800;background:linear-gradient(135deg,#80d1ff,#8077ff);
  box-shadow:0 8px 28px rgba(88,146,255,.28)
}
.brand{font-size:19px;font-weight:800;letter-spacing:.18em}
.location-btn{border:0;background:none;color:#eef7ff;font-size:16px;font-weight:650;padding:9px 0 5px}
.data-status{font-size:12px;color:#b8cad8}
.icon-btn{
  width:43px;height:43px;border:1px solid var(--line);border-radius:14px;
  background:#10283e;color:#fff;font-size:18px
}
.alert-banner{
  margin-top:18px;border:1px solid #d75e6d;background:#6d2630;
  border-radius:18px;padding:14px 15px;display:flex;align-items:center;
  justify-content:space-between;gap:14px;box-shadow:var(--shadow)
}
.alert-content{min-width:0}
.alert-kicker{font-size:11px;font-weight:800;letter-spacing:.12em;color:#ffd7dc}
.alert-headline{font-size:17px;font-weight:800;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alert-meta{font-size:13px;color:#f5d9dc;margin-top:4px}
.alert-banner button{
  flex:0 0 auto;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);
  color:#fff;padding:10px 13px;border-radius:12px;font-weight:700
}
.hero{position:relative;text-align:center;padding:32px 0 28px;overflow:hidden}
.hero-glow{position:absolute;inset:12% 18%;background:radial-gradient(circle,rgba(88,164,255,.24),transparent 63%);filter:blur(20px)}
.condition-icon,.temp,.condition,.feels,.hi-low{position:relative}
.condition-icon{font-size:47px}
.temp{font-size:92px;line-height:.95;font-weight:800;letter-spacing:-.065em;text-shadow:0 5px 24px rgba(0,0,0,.28)}
.condition{font-size:24px;font-weight:700;margin-top:10px}
.feels{font-size:16px;color:#d2dfeb;margin-top:6px}
.hi-low{display:flex;justify-content:center;gap:28px;margin-top:13px;font-size:17px;font-weight:650}
.card,.detail-card,.forecast-list,.radar-card{border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow)}
.card{border-radius:22px;padding:22px}
.ai-card{position:relative;overflow:hidden}
.ai-card:after{content:"";position:absolute;width:220px;height:220px;right:-100px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(157,126,255,.19),transparent 65%);pointer-events:none}
.card-title-row,.section-header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.eyebrow{font-size:14px;font-weight:800;letter-spacing:.08em}
.ai-eyebrow{color:#d1caff}
.mini-btn,.text-btn{border:0;background:none;color:var(--accent);font-weight:700}
.ai-brief{font-size:19px;line-height:1.55;font-weight:500;margin:16px 0}
.quick-asks{display:flex;gap:8px;overflow:auto;padding-bottom:4px;margin-bottom:12px;scrollbar-width:none}
.quick-asks::-webkit-scrollbar{display:none}
.quick-asks button{
  flex:0 0 auto;border:1px solid var(--line);background:#0a1d2f;color:#dce9f2;
  border-radius:999px;padding:9px 12px;font-size:12px
}
.ask-row{display:flex;gap:10px}
.ask-row input{
  flex:1;min-width:0;background:#081a2a;border:1px solid rgba(255,255,255,.2);
  color:#fff;border-radius:14px;padding:16px;font-size:16px
}
.ask-row input::placeholder{color:#9fb2c2}
.send-btn{
  width:50px;border:0;border-radius:14px;color:#07111f;font-size:19px;font-weight:900;
  background:linear-gradient(135deg,#88d4ff,#9c8cff)
}
.ai-response{margin-top:14px;padding:14px;border-radius:14px;background:#0a1d2f;color:#f0f7fc;font-size:16px;line-height:1.5}
.section{margin-top:32px}
.section-header{margin-bottom:13px}
.section-header h2{font-size:20px;margin:0}
.text-btn{font-size:14px}
.hourly-strip{display:flex;gap:10px;overflow-x:auto;padding:2px 1px 8px;scrollbar-width:none}
.hourly-strip::-webkit-scrollbar{display:none}
.hour{
  min-width:88px;padding:15px 11px;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;text-align:center
}
.hour.now{background:#183b58;border-color:#6ebeea}
.hour .time{font-size:13px;color:#d2dfeb}
.hour .weather{font-size:28px;margin:9px 0}
.hour .htemp{font-size:17px;font-weight:750}
.hour .rain{font-size:12px;color:#8fd4ff;font-weight:650;margin-top:6px}
.live-pill{
  font-size:11px;font-weight:800;letter-spacing:.08em;color:#8ef0bf;
  background:rgba(72,213,151,.12);padding:6px 9px;border-radius:999px
}
.real-radar-card{height:390px;border-radius:22px;overflow:hidden;position:relative;background:#0a1824}
#radarMap{position:absolute;inset:0;z-index:1}
.leaflet-container{background:#0b1a27;font-family:Inter,system-ui,sans-serif}
.leaflet-control-attribution{font-size:9px!important;background:rgba(6,18,29,.76)!important;color:#d6e4ef!important}
.leaflet-control-attribution a{color:#8fd4ff!important}
.leaflet-bar a{background:#0b1c2b!important;color:#fff!important;border-color:rgba(255,255,255,.13)!important}
.radar-top-controls{position:absolute;z-index:450;right:12px;top:12px;display:flex;gap:8px}
.radar-top-controls button{
  border:1px solid rgba(255,255,255,.16);background:rgba(6,21,34,.9);color:#fff;
  border-radius:11px;padding:9px 11px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.2)
}
.radar-controls{
  position:absolute;z-index:450;left:12px;right:12px;bottom:12px;min-height:50px;
  border:1px solid rgba(255,255,255,.17);border-radius:14px;background:rgba(6,21,34,.92);
  display:flex;align-items:center;gap:10px;padding:8px 10px;box-shadow:0 8px 24px rgba(0,0,0,.25)
}
.radar-controls button{border:0;background:none;color:#fff;font-weight:800}
.radar-controls button:last-child{color:#8fd4ff;margin-left:auto}
.radar-controls input{flex:1;min-width:80px;accent-color:#8bd3ff}
.radar-controls span{font-size:12px;color:#fff;white-space:nowrap}
.radar-note{font-size:11px;line-height:1.45;color:#8ea5b8;margin-top:9px}
.details-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.detail-card{border-radius:18px;padding:18px;min-height:82px;display:flex;align-items:center;gap:12px}
.detail-icon{font-size:26px}
.detail-card small{display:block;font-size:13px;color:#c4d3df}
.detail-card strong{display:block;font-size:17px;margin-top:5px}
.forecast-list{border-radius:21px;overflow:hidden}
.forecast-row{
  display:grid;grid-template-columns:1.35fr .55fr .7fr 1fr;align-items:center;
  padding:17px 18px;border-bottom:1px solid var(--line);font-size:15px
}
.forecast-row:last-child{border-bottom:0}
.forecast-day{font-size:16px;font-weight:700}
.forecast-rain{font-size:14px;font-weight:650;color:#91d6ff}
.forecast-temp{text-align:right;font-size:16px;font-weight:700}
.forecast-temp span{color:#c0ced9;font-weight:500;margin-left:8px}
.source-note{text-align:center;color:#9fb4c5;font-size:12px;margin-top:22px}
.bottom-nav{
  position:fixed;z-index:1000;left:50%;bottom:18px;transform:translateX(-50%);
  width:min(calc(100% - 28px),620px);padding:9px;display:grid;
  grid-template-columns:repeat(4,1fr);gap:5px;border:1px solid rgba(255,255,255,.18);
  border-radius:22px;background:rgba(7,24,39,.95);box-shadow:0 14px 40px rgba(0,0,0,.36)
}
.nav-item{
  position:relative;border:0;background:transparent;color:#afc0ce;border-radius:15px;
  padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:4px
}
.nav-item span{font-size:22px}.nav-item small{font-size:12px;font-weight:600}
.nav-item.active{background:#17344d;color:#fff}
.ai-nav span{color:#c2b2ff}
.alert-count{
  position:absolute;top:4px;left:56%;min-width:17px;height:17px;padding:0 5px;border-radius:99px;
  display:grid;place-items:center;background:#e95162;color:#fff;font-size:9px;font-style:normal
}
.modal{
  position:fixed;z-index:2000;inset:0;background:rgba(0,0,0,.65);
  display:grid;place-items:center;padding:18px
}
.modal-card{
  width:min(100%,580px);max-height:min(84vh,760px);overflow:auto;
  border:1px solid rgba(255,255,255,.18);background:#10263a;border-radius:24px;
  padding:22px;position:relative;box-shadow:0 25px 90px rgba(0,0,0,.5)
}
.modal-close{position:absolute;right:15px;top:12px;border:0;background:none;color:#fff;font-size:28px}
.modal-card h3{font-size:22px;margin:2px 36px 18px 0}
.modal-card p{font-size:15px;color:#d6e2eb;line-height:1.55}
.form-input{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:13px;
  background:#081a2a;color:#fff
}
.primary-btn,.secondary-btn{
  border:0;border-radius:12px;padding:11px 13px;font-weight:800
}
.primary-btn{background:#86d2ff;color:#07111f}
.secondary-btn{background:#17354e;color:#fff;border:1px solid var(--line)}
.modal-actions{display:flex;gap:9px;margin-top:12px}
.location-result,.saved-row,.alert-row,.setting-row,.hourly-modal-row,.forecast-detail{
  border-bottom:1px solid var(--line);padding:13px 0
}
.location-result button,.saved-row button{
  width:100%;text-align:left;border:0;background:none;color:#fff;padding:0
}
.result-title{font-weight:750}.result-sub{font-size:12px;color:#a9bdcc;margin-top:4px}
.saved-row{display:flex;gap:10px;align-items:center}.saved-row button:first-child{flex:1}
.remove-btn{width:auto!important;color:#ff9ba5!important}
.alert-row h4{margin:0 0 7px;font-size:16px}.alert-row p{margin:5px 0;font-size:13px}
.setting-row{display:flex;justify-content:space-between;align-items:center;gap:14px}
.setting-row select,.setting-row input[type=range]{
  max-width:190px;background:#081a2a;color:#fff
}
.toast{
  position:fixed;z-index:3000;left:50%;bottom:102px;transform:translateX(-50%);
  background:#eef8ff;color:#071421;border-radius:12px;padding:11px 14px;font-size:13px;
  font-weight:750;box-shadow:0 10px 34px rgba(0,0,0,.35)
}
.fullscreen-radar{
  position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;
  z-index:1500!important;border-radius:0!important
}
.fullscreen-radar .radar-controls{bottom:90px}
@media(max-width:620px){
  .app-shell{padding-left:15px;padding-right:15px}
  .temp{font-size:82px}
  .ai-brief{font-size:17px}
  .details-grid{grid-template-columns:repeat(2,1fr)}
  .forecast-row{grid-template-columns:1.25fr .45fr .65fr .9fr;font-size:14px;padding:15px 12px}
  .forecast-day{font-size:14px}
  .real-radar-card{height:360px}
  .radar-controls{gap:6px}.radar-controls span{font-size:10px}.radar-controls button:last-child{font-size:11px}
}

/* ===== Radar Map Repair ===== */
#radarMap{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  background:#0b1b29;
}
#radarMap .leaflet-pane,
#radarMap .leaflet-control{
  z-index:auto;
}
#radarMap .leaflet-map-pane{z-index:2}
#radarMap .leaflet-tile-pane{z-index:2}
#radarMap .leaflet-overlay-pane{z-index:4}
#radarMap .leaflet-marker-pane{z-index:6}
#radarMap .leaflet-tooltip-pane{z-index:7}
#radarMap .leaflet-control-container{position:relative;z-index:20}
#radarMap .leaflet-tile{
  image-rendering:auto;
}
.real-radar-card{
  isolation:isolate;
  min-height:390px;
}
.radar-top-controls,
.radar-controls{
  z-index:500!important;
}
.map-fallback{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  padding:30px;
  color:#d8e7f2;
  background:#0b1b29;
  font-size:15px;
  line-height:1.5;
}
.leaflet-tooltip{
  background:#0b2133!important;
  border:1px solid rgba(255,255,255,.18)!important;
  color:#fff!important;
  box-shadow:none!important;
  border-radius:8px!important;
}
.leaflet-tooltip-top:before{
  border-top-color:#0b2133!important;
}

/* ===== Atmos AI General Chat ===== */
.ai-subtitle{
  margin-top:4px;
  color:#aebfd0;
  font-size:12px;
}
.ai-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.ai-status{
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  color:#89e8ba;
}
.ai-status.offline{color:#ffbd77}
.ai-chat{
  margin:17px 0 14px;
  min-height:165px;
  max-height:430px;
  overflow-y:auto;
  padding:4px 3px 4px 0;
  display:flex;
  flex-direction:column;
  gap:12px;
  scrollbar-width:thin;
}
.chat-message{
  display:flex;
  align-items:flex-start;
  gap:9px;
  max-width:92%;
}
.chat-message.user{
  align-self:flex-end;
  flex-direction:row-reverse;
}
.chat-avatar{
  width:29px;
  height:29px;
  flex:0 0 29px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:linear-gradient(135deg,#766cff,#9c8cff);
  font-size:13px;
  font-weight:900;
  color:#fff;
}
.chat-message.user .chat-avatar{
  background:#234864;
}
.chat-bubble{
  padding:11px 13px;
  border-radius:15px;
  background:#0a1d2f;
  border:1px solid rgba(255,255,255,.09);
  color:#eef7fc;
  font-size:14px;
  line-height:1.52;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.chat-message.user .chat-bubble{
  background:#1a4766;
  border-color:#34759f;
}
.chat-message.thinking .chat-bubble{
  color:#9fb4c4;
}
.ai-composer{
  align-items:flex-end;
}
.ai-composer textarea{
  flex:1;
  resize:none;
  max-height:130px;
  min-height:50px;
  padding:14px 15px;
  border:1px solid rgba(255,255,255,.2);
  background:#081a2a;
  color:#fff;
  border-radius:14px;
  outline:none;
  line-height:1.4;
  font-family:inherit;
  font-size:15px;
}
.ai-composer textarea::placeholder{color:#9fb2c2}
.ai-footnote{
  margin-top:9px;
  color:#72899b;
  font-size:10px;
  line-height:1.4;
}