/* ============================= TOKENS ============================= */
:root{
  --navy-deep:#0A1728;
  --navy:#10233F;
  --navy-soft:#1B355C;
  --sky:#3E8ED9;
  --sky-light:#E9F2FC;
  --sky-dim:#CFE4F7;
  --white:#FFFFFF;
  --gray-50:#F7F8FA;
  --gray-100:#EEF1F5;
  --gray-200:#E2E7EE;
  --gray-300:#CFD7E1;
  --gray-400:#B0BBC9;
  --gray-500:#7C8A9E;
  --gray-600:#607085;
  --gray-700:#48566B;
  --ink:#12203A;
  --yellow:#F2B84B;
  --yellow-deep:#D99A2B;
  --green:#2FA766;
  --green-bg:#E7F6ED;
  --orange:#E38A3C;
  --orange-bg:#FCEEDE;
  --amber:#E3B93C;
  --amber-bg:#FBF3DA;
  --red:#D6524A;
  --red-bg:#FBEAE9;
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:22px;
  --shadow:0 1px 2px rgba(16,35,63,.06), 0 8px 24px rgba(16,35,63,.06);
  --shadow-soft:0 1px 3px rgba(16,35,63,.05);
  --border:1px solid var(--gray-200);
  --sidebar-w:236px;
  --fs-2xs:10px;
  --fs-2xs2:10.5px;
  --fs-xs:11px;
  --fs-xs2:11.5px;
  --fs-sm:12px;
  --fs-sm2:12.5px;
  --fs-sm3:13px;
  --fs-base:13.5px;
  --fs-md:14px;
  --fs-md2:14.5px;
  --fs-lg:15px;
  --fs-lg2:16px;
  --fs-lg3:18px;
  --fs-xl:16.5px;
  --fs-xl2:17px;
  --fs-2xl:20px;
  --fs-2xl2:22px;
  --fs-3xl:24px;
  --fs-3xl2:40px;
  --fs-4xl:28px;
  --fs-4xl2:44px;
  --fs-icon:52px;
  --fs-hero:56px;
  --fs-5xl:68px;
  --fs-5xl2:76px;
}
[data-theme="dark"]{
  --navy-deep:#070E19;
  --navy:#0D1B30;
  --navy-soft:#16294A;
  --sky:#5B9EE0;
  --sky-light:#12233E;
  --sky-dim:#1B3355;
  --white:#0F1B2E;
  --gray-50:#101E34;
  --gray-100:#16233B;
  --gray-200:#213353;
  --gray-300:#324B72;
  --gray-400:#4A6385;
  --gray-500:#8CA0BC;
  --gray-600:#A8B8CC;
  --gray-700:#C4D2E4;
  --ink:#EAF0FA;
  --green-bg:#123527;
  --orange-bg:#3A2712;
  --amber-bg:#382E10;
  --red-bg:#3A1917;
}
*{box-sizing:border-box;}
.skip-link:focus{top:0;}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:2px;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',sans-serif;
  background:var(--gray-50);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3,h4{font-family:'Sora',sans-serif;margin:0;color:var(--ink);}
p{margin:0;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
::selection{background:var(--sky-dim);}
a{color:inherit;}

.mono{font-family:'IBM Plex Mono',monospace;letter-spacing:.02em;}

/* ============================= LAYOUT ============================= */
.app-shell{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  min-height:100vh;
}
.sidebar{
  background:var(--navy-deep);
  color:#CBD8EC;
  padding:22px 16px 16px;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 8px 22px;
}
.brand-mark{width:34px;height:34px;flex:none;}
.brand-text h1{font-size:var(--fs-xl);color:#fff;letter-spacing:.01em;}
.brand-text span{display:block;font-size:var(--fs-2xs2);color:#7E93B4;margin-top:1px;}

.nav{display:flex;flex-direction:column;gap:2px;flex:1;}
.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:10px;
  color:#AEC0DA;font-size:var(--fs-md);font-weight:500;
  background:none;border:none;text-align:left;width:100%;
  transition:background .15s ease, color .15s ease;
}
.nav-item svg{width:18px;height:18px;flex:none;opacity:.85;}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-item.active{background:var(--navy-soft);color:#fff;}
.nav-item.active svg{opacity:1;}

.sidebar-foot{
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:12px;margin-top:10px;
  font-size:var(--fs-xs2);color:#5E7495;
}

.main{
  display:flex;flex-direction:column;
  min-width:0;
}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  padding:14px 28px;
  background:var(--white);
  border-bottom:var(--border);
  position:sticky;top:0;z-index:20;
}
.topbar-left{display:flex;align-items:center;gap:14px;min-width:0;}
.menu-btn{display:none;background:none;border:none;padding:6px;color:var(--ink);}
.menu-btn svg{width:22px;height:22px;}
.conn-pill{
  display:flex;align-items:center;gap:7px;
  font-size:var(--fs-sm2);font-weight:600;
  padding:6px 11px;border-radius:100px;
  background:var(--green-bg);color:var(--green);
  white-space:nowrap;
}
.conn-pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor;}
.conn-pill.warn{background:var(--amber-bg);color:var(--amber-deep,#9C7A16);}
.conn-pill.off{background:var(--red-bg);color:var(--red);}

.topbar-right{display:flex;align-items:center;gap:10px;}
.icon-btn{
  border:var(--border);background:var(--white);
  width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  color:var(--gray-700);
}
.icon-btn svg{width:17px;height:17px;}
.icon-btn:hover{background:var(--gray-50);}

.content{padding:26px 28px 60px;max-width:1180px;width:100%;margin:0 auto;}
.view{display:none;}
.view.active{display:block;animation:fadeSlideIn .25s ease-out;}

.section-head{margin-bottom:16px;}
.section-head h2{font-size:var(--fs-2xl);}
.section-head p{color:var(--gray-500);font-size:var(--fs-base);margin-top:3px;}

/* ============================= GRID / CARDS ============================= */
.grid{display:grid;gap:16px;}
.grid.cols-2{grid-template-columns:1.1fr .9fr;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.card{
  background:var(--white);
  border:var(--border);
  border-radius:var(--radius-l);
  padding:20px;
  box-shadow:var(--shadow-soft);
}
.card-label{font-size:var(--fs-xs2);font-weight:700;letter-spacing:.04em;color:var(--gray-500);text-transform:uppercase;}

/* location */
.loc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;position:relative;}
.loc-current{display:flex;align-items:center;gap:8px;font-size:var(--fs-lg);font-weight:600;}
.loc-current svg{width:17px;height:17px;color:var(--sky);}
.loc-actions{display:flex;gap:8px;align-items:center;}
.loc-search{
  border:var(--border);border-radius:10px;padding:8px 12px;
  font-size:var(--fs-base);background:var(--white);min-width:190px;
}
.loc-dropdown{
  display:none;position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;
  background:var(--white);border:var(--border);border-radius:10px;
  box-shadow:var(--shadow);z-index:100;margin-top:2px;
}
.loc-dropdown.show{display:block;}
.loc-dropdown .loc-item{padding:8px 12px;cursor:pointer;font-size:var(--fs-sm);color:var(--ink);}
.loc-dropdown .loc-item:hover,.loc-dropdown .loc-item.active{background:var(--gray-50);}
.pwa-banner{
  position:fixed;bottom:60px;left:16px;right:16px;z-index:998;
  background:var(--navy);color:#fff;border-radius:14px;padding:14px 16px;
  box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.pwa-banner.hidden{display:none;}
.pwa-banner p{margin:0;font-size:var(--fs-sm);font-weight:600;}
.pwa-banner-actions{display:flex;gap:6px;}
.pwa-banner .btn{color:#fff;border:1px solid rgba(255,255,255,0.3);}
.help-overlay{
  position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,0.5);
  display:flex;align-items:center;justify-content:center;
}
.help-overlay.hidden{display:none;}
.help-content{
  background:var(--white);border-radius:16px;padding:24px;max-width:360px;width:90%;
  box-shadow:var(--shadow);max-height:80vh;overflow-y:auto;
}
.help-content h3{margin:0 0 16px;font-size:var(--fs-lg);}
.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;}
.help-item{font-size:var(--fs-sm);color:var(--gray-700);}
.help-item kbd{
  display:inline-block;background:var(--gray-100);border:1px solid var(--gray-300);
  border-radius:4px;padding:1px 6px;font-family:monospace;font-size:var(--fs-xs);margin-right:4px;
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.btn{
  border:none;border-radius:10px;padding:9px 15px;
  font-size:var(--fs-base);font-weight:600;
  display:inline-flex;align-items:center;gap:7px;
}
.btn-primary{background:var(--navy);color:#fff;}
.btn-primary:hover{background:var(--navy-soft);}
.btn-ghost{background:var(--gray-100);color:var(--ink);}
.btn-ghost:hover{background:var(--gray-200);}
.btn-sky{background:var(--sky);color:#fff;}
.btn-sm{padding:6px 11px;font-size:var(--fs-sm2);border-radius:8px;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* current weather card */
.now-card{background:linear-gradient(160deg,var(--navy) 0%, var(--navy-soft) 100%);color:#fff;position:relative;overflow:hidden;}
.now-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
.now-temp{font-family:'Sora';font-size:var(--fs-hero);font-weight:700;line-height:1;}
.now-cond{font-size:var(--fs-lg);color:#C9D8EE;margin-top:6px;}
.now-icon{font-size:var(--fs-icon);line-height:1;}
.now-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px;}
.now-stat{}
.now-stat .k{font-size:var(--fs-xs);color:#8FA3C4;text-transform:uppercase;letter-spacing:.04em;}
.now-stat .v{font-size:var(--fs-md2);font-weight:600;margin-top:3px;}
.now-sun{display:flex;gap:26px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);}

/* risk meter */
.risk-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:100px;font-weight:700;font-size:var(--fs-md);margin-top:10px;
}
.risk-badge.low{background:var(--green-bg);color:#0E5A33;}
.risk-badge.moderate{background:var(--amber-bg);color:#6B5300;}
.risk-badge.high{background:var(--orange-bg);color:#8A3F00;}
.risk-badge.severe{background:var(--red-bg);color:#A82C26;}
[data-theme="dark"] .risk-badge.low{color:#7EE2A8;}
[data-theme="dark"] .risk-badge.moderate{color:#F5CE4A;}
[data-theme="dark"] .risk-badge.high{color:#F5A462;}
[data-theme="dark"] .risk-badge.severe{color:#F0908B;}

.risk-text{margin-top:12px;font-size:var(--fs-md);color:var(--gray-700);line-height:1.5;}
.risk-scale{display:flex;gap:5px;margin-top:16px;}
.risk-scale span{height:5px;flex:1;border-radius:4px;background:var(--gray-200);}
.risk-disclaimer{margin-top:12px;font-size:var(--fs-xs2);color:var(--gray-500);}

/* persona */
.persona-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px;}
.persona-btn{
  border:var(--border);background:var(--white);border-radius:14px;
  padding:14px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;
}
.persona-btn .emoji{font-size:var(--fs-2xl2);}
.persona-btn span{font-size:var(--fs-sm);font-weight:600;color:var(--gray-700);}
.persona-btn.active{border-color:var(--sky);background:var(--sky-light);}
.persona-btn.active span{color:var(--navy);}
.persona-result{
  margin-top:16px;padding:16px;border-radius:14px;background:var(--sky-light);
  font-size:var(--fs-md);line-height:1.5;color:var(--ink);display:none;
}
.persona-result.show{display:block;}
.why-link{
  background:none;border:none;color:var(--sky);font-size:var(--fs-sm2);font-weight:600;
  padding:0;margin-top:10px;display:inline-flex;align-items:center;gap:4px;
}

/* hourly */
.hour-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;margin-top:14px;}
.hour-item{
  flex:none;width:92px;border:var(--border);border-radius:14px;padding:12px 10px;text-align:center;background:var(--white);
}
.hour-item .t{font-size:var(--fs-xs2);color:var(--gray-500);font-weight:600;}
.hour-item .icon{font-size:var(--fs-2xl2);margin:8px 0 6px;}
.hour-item .temp{font-size:var(--fs-lg);font-weight:700;}
.hour-item .rain{font-size:var(--fs-xs);color:var(--sky);margin-top:4px;font-weight:600;}
.best-time{
  margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--green-bg);color:#1E7A46;
  font-size:var(--fs-sm3);font-weight:600;display:flex;align-items:center;gap:8px;
}

/* forecast */
.forecast-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:14px;}
.fc-card{border:var(--border);border-radius:14px;padding:14px 8px;text-align:center;background:var(--white);}
.fc-card .day{font-size:var(--fs-sm);font-weight:700;color:var(--gray-700);}
.fc-card .icon{font-size:var(--fs-3xl);margin:10px 0;}
.fc-card .hi{font-size:var(--fs-md);font-weight:700;}
.fc-card .lo{font-size:var(--fs-sm2);color:var(--gray-500);}
.fc-card .rain{font-size:var(--fs-xs);color:var(--sky);margin-top:6px;font-weight:600;}

.explain-box{
  margin-top:14px;padding:16px;border-radius:14px;background:var(--gray-50);border:var(--border);
  font-size:var(--fs-md);line-height:1.55;color:var(--gray-700);display:none;
}
.explain-box.show{display:block;}

/* chat */
.chat-shell{display:flex;flex-direction:column;height:560px;}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:var(--border);}
.chat-head h3{font-size:var(--fs-lg2);}
.chat-head p{font-size:var(--fs-sm2);color:var(--gray-500);margin-top:2px;}
.voice-controls{display:flex;gap:8px;align-items:center;}
.chat-log{flex:1;overflow-y:auto;padding:16px 2px;display:flex;flex-direction:column;gap:10px;}
.msg{max-width:78%;padding:11px 14px;border-radius:16px;font-size:var(--fs-md);line-height:1.45;}
.msg.user{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:4px;}
.msg.bot{align-self:flex-start;background:var(--gray-100);color:var(--ink);border-bottom-left-radius:4px;}
.quick-q{display:flex;gap:8px;flex-wrap:wrap;padding:10px 2px 4px;}
.chip{border:var(--border);background:var(--white);border-radius:100px;padding:7px 12px;font-size:var(--fs-sm2);font-weight:600;color:var(--gray-700);}
.chip:hover{background:var(--gray-50);}
.chat-input-row{display:flex;gap:8px;margin-top:10px;}
.chat-input{
  flex:1;border:var(--border);border-radius:12px;padding:11px 14px;font-size:var(--fs-md);background:var(--gray-50);
}
.mic-btn{width:42px;height:42px;border-radius:12px;border:var(--border);background:var(--white);display:flex;align-items:center;justify-content:center;flex:none;}
.mic-btn.listening{background:var(--red-bg);color:var(--red);border-color:transparent;}
.send-btn{width:42px;height:42px;border-radius:12px;border:none;background:var(--sky);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;}
.send-btn svg{width:18px;height:18px;}

/* regional keyboard */
.kb-btn{transition:background .15s;}
.kb-btn:hover{background:var(--gray-100);}
.kb-btn.active{background:var(--sky-light);color:var(--sky);border-color:var(--sky);}
.kb-panel{
  background:var(--white);border:var(--border);border-radius:14px;padding:12px;margin-top:10px;
  box-shadow:var(--shadow-soft);
}
[data-theme="dark"] .kb-panel{background:var(--gray-800);border-color:var(--gray-600);}
.kb-row{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
}
.kb-key{
  min-width:36px;height:36px;border:var(--border);border-radius:8px;background:var(--white);
  font-size:var(--fs-sm);font-weight:600;color:var(--gray-800);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0 6px;
  transition:background .1s,transform .1s;
}
.kb-key:hover{background:var(--gray-100);transform:scale(1.05);}
.kb-key:active{transform:scale(0.95);background:var(--sky-light);}
[data-theme="dark"] .kb-key{background:var(--gray-700);color:var(--gray-100);border-color:var(--gray-500);}
[data-theme="dark"] .kb-key:hover{background:var(--gray-600);}
[data-theme="dark"] .kb-key:active{background:rgba(62,142,217,.25);}
.kb-hint{font-size:var(--fs-xs2);color:var(--gray-500);text-align:center;margin-top:8px;}

/* plan my day */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:var(--fs-sm2);font-weight:600;color:var(--gray-700);}
.field input,.field select{
  border:var(--border);border-radius:10px;padding:10px 12px;font-size:var(--fs-md);background:var(--gray-50);
}
.timeline3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px;}
.timeline3 .block{border:var(--border);border-radius:14px;padding:14px;text-align:center;background:var(--white);}
.timeline3 .block .k{font-size:var(--fs-xs2);color:var(--gray-500);text-transform:uppercase;letter-spacing:.03em;font-weight:700;}
.timeline3 .block .icon{font-size:var(--fs-3xl);margin:10px 0 6px;}
.timeline3 .block .v{font-size:var(--fs-sm3);color:var(--gray-700);}
.reco-box{margin-top:16px;padding:16px;border-radius:14px;background:var(--sky-light);font-size:var(--fs-md);line-height:1.5;}

/* travel */
.travel-row{display:flex;align-items:flex-end;gap:12px;margin-top:14px;}
.swap-btn{width:38px;height:38px;border-radius:10px;border:var(--border);background:var(--gray-50);display:flex;align-items:center;justify-content:center;margin-bottom:2px;}
.travel-stops{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px;}
.stop-card{border:var(--border);border-radius:14px;padding:14px;background:var(--white);}
.stop-card .name{font-size:var(--fs-sm2);font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:.03em;}
.stop-card .icon{font-size:var(--fs-3xl);margin:10px 0 6px;}
.stop-card .t{font-size:var(--fs-lg2);font-weight:700;}
.stop-card .meta{font-size:var(--fs-sm);color:var(--gray-500);margin-top:6px;}

/* farmer */
.farmer-hero{background:linear-gradient(160deg,#1E4A2F,#2E6B45);color:#fff;}
.farmer-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px;}
.farmer-stats .f{background:rgba(255,255,255,.1);border-radius:12px;padding:12px;text-align:center;}
.farmer-stats .f .k{font-size:var(--fs-2xs2);text-transform:uppercase;color:#BFE0CB;letter-spacing:.03em;}
.farmer-stats .f .v{font-size:var(--fs-lg2);font-weight:700;margin-top:5px;}
.crop-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px;}
.crop-btn{border:var(--border);border-radius:14px;padding:12px 6px;text-align:center;background:var(--white);}
.crop-btn.active{border-color:var(--green);background:var(--green-bg);}
.crop-btn .emoji{font-size:var(--fs-2xl);}
.crop-btn span{display:block;font-size:var(--fs-xs2);font-weight:600;margin-top:5px;}

/* disaster */
.disaster-banner{
  display:none;background:var(--red);color:#fff;border-radius:var(--radius-l);
  padding:20px;margin-bottom:18px;
}
.disaster-banner.show{display:block;animation:pulse-disaster 2s infinite;}
.disaster-banner h3{color:#fff;font-size:var(--fs-xl2);display:flex;align-items:center;gap:8px;}
.disaster-banner .desc{margin-top:8px;font-size:var(--fs-md);color:#FFE3E1;}
@keyframes pulse-disaster{0%,100%{opacity:1}50%{opacity:0.85}}
.disaster-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px;}
.disaster-meta .m{background:rgba(255,255,255,.14);border-radius:10px;padding:10px;font-size:var(--fs-sm);}
.disaster-meta .m .k{opacity:.8;font-size:var(--fs-2xs2);text-transform:uppercase;}
.disaster-meta .m .v{font-weight:700;margin-top:3px;}
.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;}
.do-dont .box{background:rgba(255,255,255,.12);border-radius:12px;padding:14px;}
.do-dont .box h4{color:#fff;font-size:var(--fs-sm3);margin-bottom:8px;}
.do-dont .box ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-sm3);}

/* alerts */
.alert-card{border:var(--border);border-radius:14px;padding:16px;background:var(--white);display:flex;gap:14px;align-items:flex-start;}
.alert-card + .alert-card{margin-top:10px;}
.alert-card.active{border-left:4px solid var(--red);}
.alert-icon{font-size:var(--fs-2xl2);}
.alert-sev{font-size:var(--fs-xs);font-weight:700;padding:3px 9px;border-radius:100px;text-transform:uppercase;}
.alert-sev.watch{background:var(--amber-bg);color:#6B5300;}
.alert-sev.warning{background:var(--orange-bg);color:#8A3F00;}
.alert-sev.severe{background:var(--red-bg);color:#A82C26;}
.alert-sev.none{background:var(--green-bg);color:#0E5A33;}
[data-theme="dark"] .alert-sev.watch, [data-theme="dark"] .conn-pill.warn{color:#F5CE4A;}
[data-theme="dark"] .alert-sev.warning{color:#F5A462;}
[data-theme="dark"] .alert-sev.severe, [data-theme="dark"] .conn-pill.off{color:#F0908B;}
[data-theme="dark"] .alert-sev.none{color:#7EE2A8;}
.alert-meta{font-size:var(--fs-sm);color:var(--gray-500);margin-top:6px;}
.alert-desc{font-size:var(--fs-base);color:var(--gray-700);margin-top:8px;line-height:1.45;}

/* map */
.map-wrap{position:relative;height:440px;border-radius:var(--radius-l);overflow:hidden;border:var(--border);}
.map-canvas{position:absolute;inset:0;background:var(--gray-100);}
[data-theme="dark"] .map-canvas{background:var(--gray-700);}
.map-layers{position:absolute;top:14px;left:14px;display:flex;gap:6px;z-index:1000;}
.layer-btn{background:var(--white);border:var(--border);padding:7px 12px;border-radius:100px;font-size:var(--fs-sm);font-weight:600;color:var(--gray-700);}
.layer-btn.active{background:var(--navy);color:#fff;border-color:var(--navy);}
.map-pin{
  position:absolute;transform:translate(-50%,-100%);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;z-index:4;
}
.map-pin .dot{width:14px;height:14px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25);}
.map-pin .lbl{font-size:var(--fs-xs);font-weight:700;background:var(--white);padding:2px 7px;border-radius:6px;margin-top:4px;box-shadow:var(--shadow-soft);white-space:nowrap;}
.map-popover{
  position:absolute;bottom:14px;left:14px;right:14px;max-width:280px;
  background:var(--white);border-radius:14px;padding:14px;box-shadow:var(--shadow);display:none;z-index:1001;border:var(--border);
}
.map-popover.show{display:block;}
.leaflet-container{font-family:inherit;} 
.leaflet-popup-content{margin:10px 14px;}

/* snapshot */
.snap-drop{border:1.5px dashed var(--gray-300);border-radius:14px;padding:24px;text-align:center;margin-top:14px;cursor:pointer;}
.snap-drop input{display:none;}
.snap-result{margin-top:14px;display:none;}
.snap-result.show{display:flex;gap:12px;align-items:center;}
.snap-result img{width:64px;height:64px;object-fit:cover;border-radius:10px;}

/* history */
.hist-item{border:var(--border);border-radius:12px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;background:var(--white);}
.hist-item + .hist-item{margin-top:8px;}
.hist-item .q{font-size:var(--fs-base);}
.hist-item .time{font-size:var(--fs-xs2);color:var(--gray-500);}

/* settings */
.settings-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:var(--border);}
.settings-row:last-child{border-bottom:none;}
.settings-row .label{font-size:var(--fs-md);font-weight:600;}
.settings-row .sub{font-size:var(--fs-sm);color:var(--gray-500);margin-top:2px;}
.toggle{position:relative;width:42px;height:24px;background:var(--gray-300);border-radius:100px;border:none;flex:none;}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform .15s ease;}
.toggle.on{background:var(--sky);}
.toggle.on::after{transform:translateX(18px);}
.seg{display:flex;border:var(--border);border-radius:10px;overflow:hidden;}
.seg button{border:none;background:var(--white);padding:7px 14px;font-size:var(--fs-sm3);font-weight:600;color:var(--gray-700);}
.seg button.active{background:var(--navy);color:#fff;}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(10,23,40,.45);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;}
.overlay.show{display:flex;}
.modal{background:var(--white);border-radius:18px;padding:22px;max-width:340px;width:100%;box-shadow:var(--shadow);}
.modal h4{font-size:var(--fs-lg);}
.modal ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:var(--fs-base);color:var(--gray-700);}
.modal .close{margin-top:16px;width:100%;}

/* bottom nav (mobile) */
.bottom-nav{display:none;}

/* misc */
.hidden{display:none !important;}
.tag{display:inline-block;font-size:var(--fs-xs);font-weight:700;padding:3px 9px;border-radius:100px;background:var(--gray-100);color:var(--gray-700);}
.small-note{font-size:var(--fs-xs2);color:var(--gray-500);margin-top:8px;line-height:1.5;}

/* ============================= RESPONSIVE ============================= */
@media (max-width: 980px){
  .grid.cols-2{grid-template-columns:1fr;}
  .persona-grid{grid-template-columns:repeat(3,1fr);}
  .forecast-grid{grid-template-columns:repeat(4,1fr);}
  .form-grid{grid-template-columns:1fr;}
  .travel-stops{grid-template-columns:1fr;}
  .disaster-meta{grid-template-columns:repeat(2,1fr);}
  .farmer-stats{grid-template-columns:repeat(2,1fr);}
  .crop-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width: 720px){
  .app-shell{grid-template-columns:1fr;}
  .sidebar{display:none;}
  .sidebar.open{
    display:flex;position:fixed;inset:0 30% 0 0;z-index:60;height:100vh;box-shadow:var(--shadow);
  }
  .menu-btn{display:flex;}
  .content{padding:18px 16px 90px;}
  .bottom-nav{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;
    background:var(--navy-deep);padding:8px 4px calc(8px + env(safe-area-inset-bottom));
    justify-content:space-around;
  }
  .bn-item{background:none;border:none;color:#8FA3C4;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:var(--fs-2xs);font-weight:600;padding:4px 6px;}
  .bn-item svg{width:19px;height:19px;}
  .bn-item.active{color:#fff;}
  .topbar{padding:12px 16px;}
  .now-temp{font-size:var(--fs-4xl2);}
  .now-stats{grid-template-columns:repeat(2,1fr);}
  .persona-grid{grid-template-columns:repeat(3,1fr);}
  .forecast-grid{grid-template-columns:repeat(3,1fr);gap:8px;}
  .disaster-meta{grid-template-columns:repeat(2,1fr);}
  .do-dont{grid-template-columns:1fr;}
  .crop-grid{grid-template-columns:repeat(3,1fr);}
  .chat-shell{height:70vh;min-height:400px;}
}

/* ============================= ONBOARDING OVERLAY ============================= */
.onboard-overlay{
  position:fixed;inset:0;z-index:999;
  background:linear-gradient(160deg,var(--navy-deep) 0%,var(--navy) 50%,var(--navy-soft) 100%);
  display:flex;align-items:center;justify-content:center;
  opacity:1;transition:opacity .4s ease;
}
.onboard-overlay.hidden{opacity:0;pointer-events:none;}
.onboard-card{
  max-width:520px;width:100%;padding:36px 32px;text-align:center;
}
.onboard-brand{margin-bottom:28px;}
.onboard-brand svg{width:52px;height:52px;margin-bottom:12px;}
.onboard-brand h1{font-family:'Sora',sans-serif;font-size:var(--fs-3xl);color:#fff;margin-bottom:4px;}
.onboard-brand p{font-size:var(--fs-sm3);color:#7E93B4;}
.onboard-step{display:none;}
.onboard-step.active{display:block;}
.onboard-step h2{font-family:'Sora',sans-serif;font-size:var(--fs-2xl);color:#fff;margin-bottom:6px;}
.onboard-step p{font-size:var(--fs-base);color:#8FA3C4;margin-bottom:20px;}
.lang-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  max-height:340px;overflow-y:auto;padding:4px;
}
.lang-btn{
  background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.1);
  border-radius:14px;padding:16px 8px;text-align:center;cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  min-height:60px;
}
.lang-btn:hover,.lang-btn:focus{background:rgba(255,255,255,.13);border-color:var(--sky);}
.lang-btn.selected{border-color:var(--sky);background:rgba(62,142,217,.18);}
.lang-btn .script{font-size:var(--fs-2xl);font-weight:700;color:#fff;line-height:1.2;}
.lang-btn .name{font-size:var(--fs-xs2);color:#8FA3C4;font-weight:500;}
.lang-preview{
  margin-top:12px;min-height:24px;font-size:var(--fs-sm3);color:var(--sky);
  font-weight:600;transition:opacity .2s ease;
}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:4px;}
.mode-card{
  background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.1);
  border-radius:18px;padding:28px 16px;text-align:center;cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.mode-card:hover,.mode-card:focus{background:rgba(255,255,255,.1);border-color:var(--sky);}
.mode-card.selected{border-color:var(--sky);background:rgba(62,142,217,.15);}
.mode-card:active{transform:scale(.97);}
.mode-icon{font-size:var(--fs-4xl);line-height:1;}
.mode-label{font-size:var(--fs-lg2);font-weight:700;color:#fff;}
.mode-desc{font-size:var(--fs-sm);color:#8FA3C4;line-height:1.4;}
.onboard-continue{
  margin-top:24px;padding:13px 28px;border-radius:12px;border:none;
  background:var(--sky);color:#fff;font-size:var(--fs-lg);font-weight:700;
  cursor:pointer;transition:background .15s ease;
  min-height:48px;min-width:160px;
}
.onboard-continue:hover{background:#2F7EC5;}
.onboard-continue:disabled{opacity:.4;cursor:not-allowed;}
.onboard-skip{
  margin-top:14px;background:none;border:none;color:#7E93B4;
  font-size:var(--fs-sm2);cursor:pointer;text-decoration:underline;
}
.onboard-skip:hover{color:#AEC0DA;}

/* mode toggle FAB */
.mode-toggle-fab{
  position:fixed;bottom:20px;right:20px;z-index:50;
  width:52px;height:52px;border-radius:50%;border:none;
  background:var(--navy);color:#fff;box-shadow:var(--shadow);
  display:none;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s ease;
}
.mode-toggle-fab:hover{background:var(--navy-soft);}
.mode-toggle-fab svg{width:22px;height:22px;}
@media (max-width:720px){
  .lang-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .mode-grid{gap:12px;}
  .onboard-card{padding:28px 20px;}
  .mode-toggle-fab{bottom:calc(70px + env(safe-area-inset-bottom));right:14px;}
}

/* ============================= SIMPLE MODE ============================= */
body[data-mode="simple"] .app-shell{display:none;}
body[data-mode="simple"] .bottom-nav{display:none !important;}
body[data-mode="simple"] .mode-toggle-fab{display:flex !important;}

.simple-mode{
  display:none;flex-direction:column;min-height:100vh;
  background:var(--gray-50);padding:0;
}
body[data-mode="simple"] .simple-mode{display:flex;}

.sm-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:var(--white);border-bottom:var(--border);
}
.sm-topbar .loc{font-size:var(--fs-lg);font-weight:700;color:var(--ink);display:flex;align-items:center;gap:6px;}
.sm-topbar .loc svg{width:16px;height:16px;color:var(--sky);}
.sm-topbar-actions{display:flex;gap:8px;}
.sm-icon-btn{
  width:40px;height:40px;border-radius:10px;border:var(--border);
  background:var(--white);display:flex;align-items:center;justify-content:center;
  color:var(--gray-700);cursor:pointer;
}
.sm-icon-btn svg{width:18px;height:18px;}

.sm-hero{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:30px 20px 20px;text-align:center;
}
.sm-weather-icon{margin-bottom:8px;}
.sm-weather-icon svg{width:110px;height:110px;}
.sm-temp{font-family:'Sora',sans-serif;font-size:var(--fs-5xl);font-weight:700;color:var(--ink);line-height:1;}
.sm-condition{font-size:var(--fs-lg3);font-weight:600;color:var(--gray-700);margin-top:4px;}
.sm-details{
  display:flex;gap:20px;margin-top:14px;justify-content:center;flex-wrap:wrap;
}
.sm-detail{
  display:flex;align-items:center;gap:6px;font-size:var(--fs-md);color:var(--gray-700);
  background:var(--white);border:var(--border);border-radius:100px;padding:6px 14px;
}
.sm-detail svg{width:16px;height:16px;flex:none;}

.sm-risk-band{
  margin:0 16px;border-radius:var(--radius-m);padding:16px 18px;
  display:flex;align-items:center;gap:12px;
}
.sm-risk-band.safe{background:var(--green-bg);border:1.5px solid var(--green);}
.sm-risk-band.caution{background:var(--amber-bg);border:1.5px solid var(--amber);}
.sm-risk-band.warning{background:var(--orange-bg);border:1.5px solid var(--orange);}
.sm-risk-band.severe{background:var(--red-bg);border:1.5px solid var(--red);}
.sm-risk-band.severe.pulse{animation:pulse-severe 1.5s infinite;position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;border-radius:0;}
@keyframes pulse-severe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.9;transform:scale(1.01)}}
.sm-risk-icon{font-size:var(--fs-4xl);flex:none;}
.sm-risk-text{font-size:var(--fs-lg);font-weight:600;line-height:1.35;flex:1;}
.sm-risk-band.safe .sm-risk-text{color:#0E5A33;}
.sm-risk-band.caution .sm-risk-text{color:#6B5300;}
.sm-risk-band.warning .sm-risk-text{color:#8A3F00;}
.sm-risk-band.severe .sm-risk-text{color:#A82C28;}
[data-theme="dark"] .sm-risk-band.safe .sm-risk-text{color:#7EE2A8;}
[data-theme="dark"] .sm-risk-band.caution .sm-risk-text{color:#F5CE4A;}
[data-theme="dark"] .sm-risk-band.warning .sm-risk-text{color:#F5A462;}
[data-theme="dark"] .sm-risk-band.severe .sm-risk-text{color:#F0908B;}
.sm-speak-btn{
  width:38px;height:38px;border-radius:50%;border:none;background:rgba(0,0,0,.08);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;
}
.sm-speak-btn svg{width:18px;height:18px;}

.sm-personas{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  padding:16px;
}
.sm-persona{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  background:var(--white);border:var(--border);border-radius:var(--radius-m);
  padding:16px 8px;cursor:pointer;min-height:72px;
  transition:background .12s ease, border-color .12s ease;
}
.sm-persona:hover{background:var(--sky-light);border-color:var(--sky);}
.sm-persona .emoji{font-size:var(--fs-4xl);}
.sm-persona .label{font-size:var(--fs-sm3);font-weight:600;color:var(--gray-700);}
.sm-persona-result{
  margin:0 16px 12px;padding:14px;border-radius:var(--radius-m);
  background:var(--sky-light);font-size:var(--fs-lg);line-height:1.5;
  color:var(--ink);display:none;
}
.sm-persona-result.show{display:block;}

.sm-mic-area{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:16px 18px calc(16px + env(safe-area-inset-bottom));
  background:var(--white);border-top:var(--border);
}
.sm-mic-btn{
  width:64px;height:64px;border-radius:50%;border:none;
  background:var(--sky);color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 4px 16px rgba(62,142,217,.35);
  transition:background .15s ease, transform .1s ease;
}
.sm-mic-btn:active{transform:scale(.95);}
.sm-mic-btn.listening{background:var(--red);animation:pulse-mic 1s infinite;}
.sm-mic-btn svg{width:28px;height:28px;}
@keyframes pulse-mic{
  0%,100%{box-shadow:0 0 0 0 rgba(214,82,74,.4);}
  50%{box-shadow:0 0 0 12px rgba(214,82,74,0);}
}
.sm-chat-hint{font-size:var(--fs-sm3);color:var(--gray-500);text-align:center;max-width:200px;}

/* AI mode badge */
.ai-badge{
  font-size:var(--fs-xs2);font-weight:700;padding:4px 10px;border-radius:100px;
  background:var(--sky-light);color:var(--sky);white-space:nowrap;
}
.ai-badge.local{background:var(--green-bg);color:var(--green);}
.conn-ai{
  display:flex;align-items:center;gap:6px;font-size:var(--fs-xs2);font-weight:600;
  padding:4px 10px;border-radius:100px;background:var(--sky-light);color:var(--sky);
  white-space:nowrap;
}
.conn-ai.local{background:var(--green-bg);color:var(--green);}

/* admin nav item */
.nav-item-admin{display:none !important;}
body[data-role="admin"] .nav-item-admin{display:flex !important;}

/* admin form */
.admin-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;}
.admin-form .field{display:flex;flex-direction:column;gap:6px;}
.admin-form .field label{font-size:var(--fs-sm2);font-weight:600;color:var(--gray-700);}
.admin-form .field input,.admin-form .field select,.admin-form .field textarea{
  border:var(--border);border-radius:10px;padding:10px 12px;font-size:var(--fs-md);background:var(--gray-50);
}
.admin-form .field textarea{min-height:80px;resize:vertical;}
.admin-sent{margin-top:16px;}
.admin-sent-item{
  border:var(--border);border-radius:12px;padding:12px 14px;background:var(--white);
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
}
.admin-sent-item + .admin-sent-item{margin-top:8px;}
.admin-note{
  margin-top:14px;padding:12px;border-radius:var(--radius-m);
  background:var(--sky-light);font-size:var(--fs-sm3);color:var(--ink);line-height:1.5;
}

/* offline banner simple mode */
.sm-offline{
  display:none;margin:12px 16px;padding:14px 16px;border-radius:var(--radius-m);
  background:var(--amber-bg);border:1.5px solid var(--amber);
}
.sm-offline.show{display:block;}
.sm-offline .sm-off-title{font-size:var(--fs-md);font-weight:700;color:#9C7A16;margin-bottom:4px;}
.sm-offline .sm-off-desc{font-size:var(--fs-sm3);color:#7A5F14;line-height:1.45;}
.sm-offline .sm-speak-btn{
  margin-top:8px;background:none;border:none;color:#9C7A16;font-size:var(--fs-sm);
  font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px;
}
.sm-offline .sm-speak-btn svg{width:14px;height:14px;}

/* font size scaling */
@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 8px;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
.skeleton * { visibility: hidden; }
body[data-fontsize="small"]{
  --fs-2xs:8.8px;--fs-2xs2:9.2px;--fs-xs:9.7px;--fs-xs2:10.1px;
  --fs-sm:10.6px;--fs-sm2:11px;--fs-sm3:11.4px;--fs-base:11.9px;
  --fs-md:12.3px;--fs-md2:12.8px;--fs-lg:13.2px;--fs-lg2:14.1px;--fs-lg3:15.8px;
  --fs-xl:14.5px;--fs-xl2:15px;--fs-2xl:17.6px;--fs-2xl2:19.4px;
  --fs-3xl:21.1px;--fs-3xl2:35.2px;--fs-4xl:24.6px;--fs-4xl2:38.7px;--fs-icon:45.8px;
  --fs-hero:49.3px;--fs-5xl:59.8px;--fs-5xl2:66.9px;
}
body[data-fontsize="medium"]{
  --fs-2xs:10px;--fs-2xs2:10.5px;--fs-xs:11px;--fs-xs2:11.5px;
  --fs-sm:12px;--fs-sm2:12.5px;--fs-sm3:13px;--fs-base:13.5px;
  --fs-md:14px;--fs-md2:14.5px;--fs-lg:15px;--fs-lg2:16px;--fs-lg3:18px;
  --fs-xl:16.5px;--fs-xl2:17px;--fs-2xl:20px;--fs-2xl2:22px;
  --fs-3xl:24px;--fs-3xl2:40px;--fs-4xl:28px;--fs-4xl2:44px;--fs-icon:52px;
  --fs-hero:56px;--fs-5xl:68px;--fs-5xl2:76px;
}
body[data-fontsize="large"]{
  --fs-2xs:11.8px;--fs-2xs2:12.4px;--fs-xs:13px;--fs-xs2:13.6px;
  --fs-sm:14.2px;--fs-sm2:14.8px;--fs-sm3:15.3px;--fs-base:15.9px;
  --fs-md:16.5px;--fs-md2:17.1px;--fs-lg:17.7px;--fs-lg2:18.9px;--fs-lg3:21.2px;
  --fs-xl:19.5px;--fs-xl2:20.1px;--fs-2xl:23.6px;--fs-2xl2:26px;
  --fs-3xl:28.3px;--fs-3xl2:47.2px;--fs-4xl:33px;--fs-4xl2:51.9px;--fs-icon:61.4px;
  --fs-hero:66.1px;--fs-5xl:80.2px;--fs-5xl2:89.7px;
}
#fontSizeSeg button{font-weight:700;transition:background .12s ease;}
#fontSizeSeg button[data-size="small"]{font-size:var(--fs-sm);}
#fontSizeSeg button[data-size="medium"]{font-size:var(--fs-md);}
#fontSizeSeg button[data-size="large"]{font-size:var(--fs-xl2);}

@media (max-width:480px){
  .sm-temp{font-size:var(--fs-hero);}
  .sm-weather-icon svg{width:90px;height:90px;}
  .sm-personas{grid-template-columns:repeat(3,1fr);gap:8px;}
  .forecast-grid{grid-template-columns:repeat(2,1fr);}
}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);z-index:9999;padding:12px 24px;border-radius:100px;font-size:var(--fs-sm3);font-weight:600;color:#fff;opacity:0;transition:opacity .3s ease,transform .3s ease;pointer-events:none;white-space:nowrap;box-shadow:var(--shadow);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.toast-info{background:var(--navy);}
.toast-success{background:var(--green);}
.toast-warn{background:var(--amber);color:#3A2712;}
.toast-error{background:var(--red);}

/* ---- Weather Background Particles ---- */
.weather-bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.weather-bg .rain-drop{position:absolute;width:2px;background:linear-gradient(180deg,transparent,rgba(62,142,217,0.5));animation:rainFall linear infinite;}
@keyframes rainFall{0%{transform:translateY(-20px);opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{transform:translateY(100vh);opacity:0;}}
.weather-bg .snow-flake{position:absolute;color:rgba(255,255,255,0.8);animation:snowFall linear infinite;font-size:10px;}
@keyframes snowFall{0%{transform:translateY(-20px) rotate(0deg);opacity:0;}10%{opacity:1;}90%{opacity:0.8;}100%{transform:translateY(100vh) rotate(360deg);opacity:0;}}
.weather-bg .sun-ray{position:absolute;top:-50%;right:-10%;width:300px;height:300px;background:radial-gradient(circle,rgba(242,184,75,0.12) 0%,transparent 70%);animation:sunPulse 4s ease-in-out infinite;}
@keyframes sunPulse{0%,100%{opacity:0.6;transform:scale(1);}50%{opacity:1;transform:scale(1.1);}}
.weather-bg .cloud-drift{position:absolute;background:rgba(200,215,230,0.15);border-radius:50px;animation:cloudDrift linear infinite;}
@keyframes cloudDrift{0%{transform:translateX(-200px);}100%{transform:translateX(calc(100vw + 200px));}}

/* ---- Sun Arc ---- */
.sun-arc-container{margin:12px 0 4px;text-align:center;}
.sun-arc-svg{width:100%;max-width:200px;height:auto;}

/* ---- Wind Compass ---- */
.wind-compass-container{display:flex;flex-direction:column;align-items:center;margin:8px 0 4px;}
.wind-compass-svg{width:72px;height:72px;}
.wind-compass-label{font-size:var(--fs-sm3);color:var(--gray-600);font-weight:600;margin-top:2px;}

/* ---- Sparkline Chart ---- */
.sparkline-container{padding:4px 0;}
.sparkline-svg{width:100%;height:80px;}

/* ---- Favorite List ---- */
.fav-list{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.fav-list.hidden{display:none;}
.fav-chip{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:100px;background:var(--sky-light);border:1px solid var(--sky-dim);font-size:var(--fs-sm3);cursor:pointer;transition:all .15s;}
.fav-chip:hover{background:var(--sky-dim);}
.fav-chip .fav-remove{width:14px;height:14px;border-radius:50%;background:var(--gray-300);color:var(--gray-600);display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;border:none;line-height:1;}
.fav-chip .fav-remove:hover{background:var(--red);color:#fff;}

/* ---- Pressure Trend ---- */
.pressure-trend{font-size:10px;font-weight:700;}
.pressure-trend.rising{color:var(--green);}
.pressure-trend.falling{color:var(--red);}
.pressure-trend.stable{color:var(--gray-400);}

/* ---- Now Extra Stats ---- */
.now-extra{display:flex;gap:16px;padding-top:8px;border-top:1px solid var(--gray-100);margin-top:8px;}

/* ---- View Transitions ---- */
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* ---- Share Button ---- */
#shareBtn svg{width:18px;height:18px;}
#favBtn svg{width:18px;height:18px;}
#favBtn.active svg{fill:var(--yellow);stroke:var(--yellow);}

/* ---- Precipitation Bar Chart ---- */
.precip-chart-container{padding:4px 0;}
.precip-chart-svg{width:100%;height:70px;}

/* ---- Rain Timeline ---- */
.rain-timeline{display:flex;gap:4px;flex-wrap:wrap;}
.rain-timeline.empty{color:var(--gray-500);font-size:var(--fs-sm3);font-style:italic;}
.rain-block{flex:1;min-width:40px;text-align:center;padding:6px 4px;border-radius:8px;font-size:var(--fs-sm3);}
.rain-block.rain-yes{background:rgba(62,142,217,0.12);color:var(--sky);font-weight:600;}
.rain-block.rain-no{background:var(--gray-50);color:var(--gray-500);}
.rain-block .rb-day{font-weight:700;font-size:var(--fs-xs);}
.rain-block .rb-icon{font-size:16px;}
.rain-block .rb-pct{font-size:var(--fs-xs);}

/* ---- Health Tips ---- */
.health-tips{display:flex;flex-direction:column;gap:8px;}
.health-tip{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:8px;background:var(--sky-light);font-size:var(--fs-sm3);line-height:1.4;}
.health-tip .ht-icon{font-size:18px;flex-shrink:0;margin-top:1px;}
.health-tip .ht-text{color:var(--ink);}

/* ---- Weather Tip ---- */
.weather-tip{padding:8px 12px;border-radius:8px;background:linear-gradient(135deg,var(--sky-light),var(--white));font-size:var(--fs-sm3);line-height:1.5;color:var(--ink);border-left:3px solid var(--sky);}

/* ---- Activity Score ---- */
.activity-score-container{margin:8px 0;padding:8px 0;border-top:1px solid var(--gray-100);}
.activity-score-label{font-size:var(--fs-sm3);color:var(--gray-600);font-weight:600;margin-bottom:4px;}
.activity-score-bar{height:8px;background:var(--gray-200);border-radius:4px;overflow:hidden;}
.activity-score-fill{height:100%;border-radius:4px;transition:width .6s ease,background .3s;}
.activity-score-value{font-size:var(--fs-xs);color:var(--gray-500);margin-top:3px;}
.activity-score-value span{font-weight:700;color:var(--ink);}

/* ---- Outfit Suggestion ---- */
.outfit-suggestion{margin:8px 0;padding:8px 12px;border-radius:8px;background:var(--gray-50);font-size:var(--fs-sm3);color:var(--ink);line-height:1.4;}
.outfit-suggestion:empty{display:none;}

/* ---- UV Label ---- */
.uv-label{font-size:var(--fs-xs);font-weight:700;padding:1px 6px;border-radius:4px;}
.uv-low{background:#2FA766;color:#fff;}
.uv-mod{background:var(--amber);color:#3A2712;}
.uv-high{background:var(--orange);color:#fff;}
.uv-vhigh{background:var(--red);color:#fff;}

/* ---- Compare Cities ---- */
.compare-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.compare-select{flex:1;min-width:100px;padding:6px 10px;border:1px solid var(--gray-200);border-radius:8px;font-size:var(--fs-sm3);background:var(--white);color:var(--ink);}
.compare-vs{font-weight:800;color:var(--gray-400);font-size:var(--fs-sm3);}
.compare-result{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.compare-result:empty{display:none;}
.compare-card{padding:8px 10px;border-radius:8px;background:var(--sky-light);text-align:center;}
.compare-card .cc-name{font-weight:700;font-size:var(--fs-sm3);margin-bottom:4px;}
.compare-card .cc-temp{font-size:var(--fs-xl);font-weight:800;}
.compare-card .cc-cond{font-size:var(--fs-sm3);color:var(--gray-600);}
.compare-card .cc-detail{font-size:var(--fs-xs);color:var(--gray-500);margin-top:2px;}

/* ---- Daily Temp Range Bars ---- */
.fc-card{padding:8px 4px;text-align:center;}
.fc-card .day{font-size:var(--fs-sm3);font-weight:700;color:var(--ink);}
.fc-card .icon{font-size:20px;margin:4px 0;}
.fc-temp-range{display:flex;align-items:center;gap:4px;margin:4px 0;}
.fc-lo{font-size:var(--fs-xs);color:var(--gray-500);min-width:28px;text-align:right;}
.fc-hi{font-size:var(--fs-xs);font-weight:700;color:var(--ink);min-width:28px;}
.fc-bar-track{flex:1;height:4px;background:var(--gray-200);border-radius:2px;position:relative;overflow:hidden;}
.fc-bar-fill{position:absolute;top:0;height:100%;background:linear-gradient(90deg,var(--sky),var(--yellow));border-radius:2px;}
.fc-card .rain{font-size:var(--fs-xs);color:var(--sky);margin-top:2px;}