/* SpaceWeather Monitor — bilingual desktop and mobile website. Builds upon approved v2 design. */
:root {--surface: #0b182a; --glow:#62dce9;}
body {background: #030a15;}
.app {box-shadow:0 15px 90px #0008;}
.header-actions{display:flex;align-items:center;gap:8px}
.lang-switch{display:flex;padding:4px;border:1px solid #365570;background:#0c2037;border-radius:13px;gap:3px;white-space:nowrap}
.lang-switch button{border:0;background:transparent;color:#91acc5;font-size:12px;font-weight:800;letter-spacing:.3px;border-radius:9px;padding:9px 11px;min-width:35px}
.lang-switch button[aria-pressed="true"]{background:linear-gradient(135deg,#54d9ec,#80e6d1);color:#082132;box-shadow:0 2px 10px #56e0d320}
.lang-switch button:focus-visible{outline:2px solid white;outline-offset:2px}
.site-sidebar{display:none}
/* All other app features stay operational */
@media (max-width:500px){.content{padding-left:16px;padding-right:16px}.header-actions{gap:5px}.lang-switch button{padding:9px 7px}.topbar .brandname{font-size:11px}.topbar .subbrand{font-size:9px}.iconbtn{width:35px;height:35px}.lang-switch{padding:3px}}
@media (min-width:900px){
  body{background:radial-gradient(ellipse 720px 600px at 80% -15%,#16315580,transparent),#020813;}
  .app{max-width:1460px;min-height:100vh;overflow:visible;position:relative;padding-bottom:0;box-shadow:0 0 90px #0009;background:radial-gradient(ellipse 900px 520px at 85% 0,#122f4e 0,transparent 76%),#050d1c}
  .site-sidebar{display:flex;flex-direction:column;position:fixed;top:0;bottom:0;width:252px;max-height:100vh;padding:35px 23px 28px;border-right:1px solid #27445b;background:linear-gradient(180deg,#0e2239 0%,#09182b 62%,#061426 100%);z-index:11;box-sizing:border-box;overflow-y:auto}
  .side-brand{display:flex;align-items:center;gap:10px;margin:5px 2px 60px;font-size:13px;letter-spacing:.6px}.side-mark{font-size:26px;color:#76e6ef;filter:drop-shadow(0 0 8px #72ebff66)}.side-brand strong span{color:#7ce4eb}.side-brand small{display:block;letter-spacing:1.8px;color:#8cacc4;margin-top:4px;font-size:9px}
  .side-caption{font-size:10px;letter-spacing:1.5px;color:#7596ae;font-weight:800;margin:0 12px 15px}
  .site-nav{display:grid;gap:7px}.site-nav button{display:flex;align-items:center;gap:15px;text-align:left;border:1px solid transparent;background:transparent;color:#a6bfd6;border-radius:14px;min-height:52px;padding:0 15px;font-weight:700;font-size:13px;cursor:pointer}.site-nav button>span:first-child{display:grid;place-items:center;width:25px;font-size:21px;font-weight:400;color:#8bd9e6}.site-nav button:hover{background:#18324a;color:#fff}.site-nav button.active{background:linear-gradient(100deg,#1b4057,#12293f);border-color:#3b7887;color:#a6f8ed;box-shadow:0 4px 28px #25cad511}
  .side-bottom{margin-top:auto;padding-top:20px;font-size:11px;color:#8ba7bc;line-height:1.7}.side-bottom p{margin:6px 0}.side-bottom a{font-weight:700;text-decoration:none}.side-source{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.6px;color:#82e5ce;font-weight:800}.signal{width:8px;height:8px;border-radius:50%;background:#5bdfaf;box-shadow:0 0 15px #55ecb7}
  .content{position:relative;max-width:none;margin-left:252px;padding:34px clamp(28px,5vw,72px) 75px}
  .tabbar{display:none}.stars{left:252px;height:800px}
  .topbar{padding:2px 0 16px;border-bottom:1px solid #244058}.brand-icon{height:43px;width:43px}.brandname{font-size:14px}.subbrand{font-size:10px}
  .headtitle{font-size:clamp(42px,5vw,70px);line-height:1.04;letter-spacing:-2px}.bigpage{font-size:clamp(38px,4.2vw,57px);line-height:1.1}
  .desc{font-size:14px;max-width:690px}.card{border-radius:23px}.sectionhead h2{font-size:21px}
  .hero{min-height:340px}.earth{width:410px;height:410px;right:-120px;top:0}.kpvalue{font-size:104px}.metricrow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .metric{min-height:127px;padding:18px}.num{font-size:31px}.twocol{grid-template-columns:1fr 1fr}.figure-card{min-height:210px}.sun-img{height:170px;width:170px}
  .chart svg{height:230px}.wide-art{height:320px;background-position:center 48%}.windmetrics{grid-template-columns:repeat(4,1fr)}.windbox{min-height:132px}.mapcard{display:grid;grid-template-columns:minmax(0,540px) minmax(240px,1fr);grid-template-rows:auto auto auto auto 1fr auto;align-items:start;gap:16px 23px}.mapcard .maptoolbar{grid-column:1/-1;grid-row:1}.mapcard #auroramap{grid-column:1;grid-row:2/span 4;width:100%;height:auto;max-width:100%;margin:auto}.mapcard .aurorameta{grid-column:2;grid-row:2}.mapcard .maplegend{grid-column:2;grid-row:3}.mapcard .legendlabs{grid-column:2;grid-row:4}.mapcard #aurora-selection{grid-column:2;grid-row:5}.mapcard .source-line{grid-column:1/-1;grid-row:6}
  .source-line{font-size:12px}.alertitem{padding:17px 20px}.alertitem h3{font-size:15px}.alertitem p{font-size:13px}
  #dashboard.active{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 22px}
  #dashboard.active>*{grid-column:1/-1}
  #dashboard.active>.hero{grid-column:1 / span 7;align-self:stretch}
  #dashboard.active>.metricrow{grid-column:8 / -1;grid-template-columns:1fr;gap:9px;align-self:stretch;margin-bottom:13px}
  #dashboard.active>.metricrow>.metric{min-height:0;display:flex;flex-direction:column;justify-content:center}
  #dashboard.active>.metricrow .num{margin:8px 0 3px}
  #dashboard.active .twocol .figure-card{min-height:220px}
  #forecast.active{display:grid;grid-template-columns:1.2fr .8fr;column-gap:24px;align-items:start}
  #forecast.active>h1,#forecast.active>.desc,#forecast.active>.chips,#forecast.active>.source-line,#forecast.active>.disclaimer{grid-column:1/-1}
  #forecast.active>.sectionhead{grid-column:2;grid-row:4;margin:8px 0 12px}
  #forecast.active>#forecastlist{grid-column:2;grid-row:5}
  #forecast.active>.card:not(#forecastlist){grid-column:1;grid-row:4/span 2;min-height:370px}
  #aurora.active .mapcard #auroramap{max-width:540px}
  #alerts.active .card{max-width:none}
}
@media (min-width:1460px){.site-sidebar{left:calc((100vw - 1460px)/2)}}
@media (min-width:900px) and (max-width:1100px){.site-sidebar{width:216px}.content{margin-left:216px;padding:28px 24px}.stars{left:216px}#dashboard.active>.hero{grid-column:1/-1}#dashboard.active>.metricrow{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}.mapcard{display:block}.mapcard #auroramap{display:block;width:100%;max-width:490px}}
@media (prefers-reduced-motion:reduce){.screen.active{animation:none!important}*{scroll-behavior:auto!important}}