/* VRABO METEO — CENTRO PREVISIONALE 2.0
   Visual system: authoritative, restrained, operational. */
:root{
  --bg:#071019;
  --bg-deep:#03080d;
  --panel:#0b1722;
  --panel-strong:#0d1b27;
  --panel-soft:#101f2c;
  --line:rgba(181,205,221,.14);
  --line-strong:rgba(181,205,221,.27);
  --text:#f4f7f9;
  --muted:#9aaebb;
  --muted-2:#718693;
  --sky:#82c8ee;
  --sky-strong:#3ea8df;
  --sun:#efc66f;
  --rain:#68aee6;
  --good:#70c59b;
  --warn:#e6bb68;
  --danger:#e68173;
  --purple:#a79bd2;
  --shadow:0 18px 45px rgba(0,0,0,.20);
  --radius:14px;
  --radius-small:10px;
  --max:1320px;
  --header-height:76px;
  --focus:0 0 0 3px rgba(62,168,223,.28);
}
html[data-theme="light"]{
  --bg:#eef2f4;
  --bg-deep:#dfe6ea;
  --panel:#ffffff;
  --panel-strong:#ffffff;
  --panel-soft:#f5f8fa;
  --line:rgba(29,55,69,.13);
  --line-strong:rgba(29,55,69,.23);
  --text:#13222b;
  --muted:#586f7c;
  --muted-2:#788d98;
  --sky:#176e9d;
  --sky-strong:#0b6d9f;
  --sun:#966515;
  --rain:#246d9e;
  --good:#277754;
  --warn:#8d6117;
  --danger:#a84639;
  --purple:#64588e;
  --shadow:0 16px 36px rgba(28,58,73,.09);
}
@media(prefers-color-scheme:light){
  html[data-theme="auto"]{
    --bg:#eef2f4;--bg-deep:#dfe6ea;--panel:#fff;--panel-strong:#fff;--panel-soft:#f5f8fa;--line:rgba(29,55,69,.13);--line-strong:rgba(29,55,69,.23);--text:#13222b;--muted:#586f7c;--muted-2:#788d98;--sky:#176e9d;--sky-strong:#0b6d9f;--sun:#966515;--rain:#246d9e;--good:#277754;--warn:#8d6117;--danger:#a84639;--purple:#64588e;--shadow:0 16px 36px rgba(28,58,73,.09)
  }
}
html{background:var(--bg-deep)}
body{
  background:var(--bg);
  font-family:Arial,Helvetica,sans-serif;
  font-feature-settings:"tnum" 1,"ss01" 1;
  letter-spacing:-.006em;
}
.sky-stage{
  background:
    linear-gradient(rgba(134,170,192,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(134,170,192,.035) 1px,transparent 1px),
    radial-gradient(circle at 86% 4%,rgba(54,130,170,.15),transparent 28%),
    linear-gradient(180deg,#08131d 0%,#060e16 52%,#050b11 100%);
  background-size:44px 44px,44px 44px,auto,auto;
}
.sky-glow{opacity:.42;filter:blur(30px)}
.sky-orbit{opacity:.18}
.sky-grain{opacity:.08}
html[data-theme="light"] .sky-stage{
  background:
    linear-gradient(rgba(38,78,99,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(38,78,99,.03) 1px,transparent 1px),
    radial-gradient(circle at 86% 3%,rgba(75,156,197,.10),transparent 28%),
    linear-gradient(180deg,#eef3f5,#e8eef1);
  background-size:44px 44px,44px 44px,auto,auto;
}
@media(prefers-color-scheme:light){
  html[data-theme="auto"] .sky-stage{
    background:
      linear-gradient(rgba(38,78,99,.03) 1px,transparent 1px),
      linear-gradient(90deg,rgba(38,78,99,.03) 1px,transparent 1px),
      radial-gradient(circle at 86% 3%,rgba(75,156,197,.10),transparent 28%),
      linear-gradient(180deg,#eef3f5,#e8eef1);
    background-size:44px 44px,44px 44px,auto,auto;
  }
}
.site-header{
  height:var(--header-height);
  padding:0 max(22px,calc((100vw - var(--max))/2));
  background:rgba(4,10,16,.90);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
}
html[data-theme="light"] .site-header{background:rgba(249,251,252,.93)}
@media(prefers-color-scheme:light){html[data-theme="auto"] .site-header{background:rgba(249,251,252,.93)}}
.brand{gap:11px;min-width:214px}
.brand-mark{width:32px;height:32px}
.brand-mark i{border-width:1.5px}
.brand-copy strong{font-size:15px;letter-spacing:.23em;font-weight:700}
.brand-copy small{font-size:8px;letter-spacing:.17em;margin-top:6px;color:var(--muted)}
.primary-nav{display:flex;align-items:center;justify-content:center;gap:28px;min-width:0}
.primary-nav a{position:relative;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:28px 0 25px;white-space:nowrap}
.primary-nav a:hover{color:var(--text)}
.primary-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--sky-strong);transition:right .2s}
.primary-nav a:hover:after{right:0}
.header-actions{min-width:300px;justify-content:flex-end}
.location-trigger{height:46px;min-width:190px;border-radius:8px;background:transparent;border-color:var(--line);padding:6px 11px}
.location-trigger small{font-size:8px;letter-spacing:.15em}
.location-trigger strong{font-size:13px;font-weight:600}
.location-dot{width:6px;height:6px;box-shadow:none}
.icon-button{width:42px;height:42px;border-radius:8px;background:transparent}
.icon-button svg{width:18px;height:18px}
.page-shell{width:min(calc(100% - 36px),var(--max));margin:24px auto 72px}
.operational-strip{
  display:grid;
  grid-template-columns:.8fr 1.35fr .9fr 1fr 1fr;
  margin-bottom:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(8,18,27,.72);
  overflow:hidden;
}
html[data-theme="light"] .operational-strip{background:rgba(255,255,255,.78)}
@media(prefers-color-scheme:light){html[data-theme="auto"] .operational-strip{background:rgba(255,255,255,.78)}}
.operational-strip>div{padding:11px 15px;border-right:1px solid var(--line);min-width:0}
.operational-strip>div:last-child{border-right:0}
.operational-strip span{display:block;color:var(--muted-2);font-size:8px;letter-spacing:.14em;font-weight:700}
.operational-strip strong{display:block;margin-top:4px;color:var(--text);font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel{
  background:linear-gradient(180deg,rgba(11,23,34,.97),rgba(8,18,28,.97));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:none;
}
html[data-theme="light"] .panel{background:#fff}
@media(prefers-color-scheme:light){html[data-theme="auto"] .panel{background:#fff}}
.panel-hero{padding:32px 34px 26px}
.panel-hero:before{background:linear-gradient(110deg,rgba(56,148,197,.055),transparent 48%)}
.panel-hero:after{width:360px;height:360px;right:-210px;bottom:-255px;border-color:rgba(126,178,207,.08);box-shadow:0 0 0 54px rgba(126,178,207,.018),0 0 0 108px rgba(126,178,207,.010)}
.hero-topline{align-items:flex-start}
.eyebrow{font-size:9px;letter-spacing:.17em;color:var(--sky);font-weight:700;margin-bottom:8px}
.hero-topline h1{font-size:clamp(36px,4.5vw,62px);letter-spacing:-.055em;font-weight:500}
.hero-topline h1 small{font-size:10px;letter-spacing:.13em;margin-top:10px}
.freshness{font-size:10px;letter-spacing:.04em}
.freshness span{width:6px;height:6px;box-shadow:none}
.hero-weather{grid-template-columns:112px minmax(240px,1fr) minmax(360px,.82fr);gap:30px;margin-top:28px}
.condition-visual{width:112px;height:112px}
.condition-visual svg{filter:none}
.temperature{font-size:clamp(90px,9.5vw,136px);line-height:.82;font-weight:300;letter-spacing:-.085em}
.temperature sup{font-size:.19em;margin-left:7px;color:var(--sky)}
.condition-label{font-size:clamp(20px,2vw,28px);margin-top:18px;font-weight:500;letter-spacing:-.025em}
.temperature-range{font-size:12px;margin-top:7px}
.hero-facts{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.015)}
.hero-facts>div{padding:17px 18px}
.hero-facts span{font-size:8px;letter-spacing:.14em}
.hero-facts strong{font-size:18px;margin-top:7px;font-weight:600}
.decision-strip{margin-top:24px;padding:13px 15px;border-radius:9px;background:rgba(44,118,158,.08);border:1px solid rgba(91,165,204,.22)}
.decision-icon{width:30px;height:30px;border-radius:7px;font-size:14px;background:rgba(75,156,197,.14)}
.decision-strip small{font-size:8px;letter-spacing:.15em}
.decision-strip strong{font-size:12px;line-height:1.45;font-weight:600}
.text-button{font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.status-chips{margin-top:12px;gap:7px}
.status-chip{min-height:29px;padding:6px 10px;border-radius:7px;background:transparent;border:1px solid var(--line);font-size:9px;letter-spacing:.04em;color:var(--muted)}
.status-chip strong{font-size:10px;color:var(--text);font-weight:600}
.hourly-panel,.daily-panel,.radar-panel,.alert-panel{padding:26px 28px;margin-top:12px}
.section-head{margin-bottom:20px}
.section-head h2{font-size:clamp(24px,2.6vw,36px);font-weight:500;letter-spacing:-.04em}
.segmented{padding:2px;border-radius:8px;background:transparent;border:1px solid var(--line)}
.segmented button{padding:7px 14px;border-radius:6px;font-size:9px;letter-spacing:.08em}
.segmented button.active{background:var(--panel-soft);box-shadow:none}
.hourly-rail{grid-auto-columns:94px;gap:7px;padding:0 0 4px}
.hour-card{min-height:148px;border-radius:9px;padding:13px 8px;background:rgba(255,255,255,.012);border-color:var(--line)}
.hour-card.now{background:rgba(56,148,197,.08);border-color:rgba(89,167,207,.34)}
.hour-time{font-size:9px;letter-spacing:.04em}
.hour-icon{height:34px;margin:8px 0 5px}
.hour-icon svg{width:34px;height:34px}
.hour-temp{font-size:22px;font-weight:500}
.hour-rain,.hour-wind{font-size:8.5px}
.chart-wrap{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.chart-legend{font-size:8px;letter-spacing:.05em}
.quick-grid{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.insight-card{min-height:132px;padding:19px 20px;border-radius:12px;border-left:2px solid var(--line-strong)}
.insight-card.good{border-left-color:var(--good)}
.insight-card.warn{border-left-color:var(--warn)}
.insight-card.danger{border-left-color:var(--danger)}
.insight-kicker{font-size:8px;letter-spacing:.15em}
.insight-card strong{font-size:19px;font-weight:500;margin-top:18px}
.insight-card p{font-size:10.5px;line-height:1.5}
.confidence-badge{border-radius:6px;font-size:8px;letter-spacing:.1em;text-transform:uppercase;padding:7px 9px;background:transparent}
.daily-list{border-top:1px solid var(--line)}
.daily-row{grid-template-columns:110px minmax(210px,1.35fr) 120px minmax(200px,1fr) 90px;min-height:62px;border-bottom:1px solid var(--line);padding:0 2px}
.daily-day strong{font-size:12px}.daily-day small{font-size:8px}
.daily-condition svg{width:28px;height:28px}.daily-condition span{font-size:10px}
.daily-rain,.daily-wind{font-size:9px}
.temp-range-bar strong{font-size:10px}
.range-track{height:3px}
.radar-layout{grid-template-columns:minmax(0,1.7fr) minmax(320px,.7fr);gap:12px;margin-top:12px}
.radar-frame-wrap{border-radius:9px;min-height:430px;border-color:var(--line)}
.radar-overlay{padding:8px 10px;border-radius:6px;background:rgba(4,10,16,.82);font-size:9px;letter-spacing:.08em}
.secondary-button,.primary-button{border-radius:7px;font-size:10px;letter-spacing:.05em;font-weight:700;padding:9px 12px}
.alert-panel{min-height:100%}
.alert-list{gap:8px}
.alert-item,.alert-empty{border-radius:8px;padding:13px;background:rgba(255,255,255,.012)}
.alert-item strong,.alert-empty strong{font-size:11px}
.alert-item p,.alert-empty p{font-size:9.5px}
.source-note{font-size:8.5px;line-height:1.5}
.personal-zone{margin-top:48px}
.personal-head{padding:0 2px;margin-bottom:18px}
.module-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.module-card{min-height:250px;padding:20px;border-radius:12px;background:linear-gradient(180deg,rgba(12,25,36,.98),rgba(8,18,27,.98))}
html[data-theme="light"] .module-card{background:#fff}
@media(prefers-color-scheme:light){html[data-theme="auto"] .module-card{background:#fff}}
.module-icon{width:35px;height:35px;border-radius:8px;font-size:9px;letter-spacing:.05em}
.module-state{font-size:8px;letter-spacing:.08em;text-transform:uppercase}
.module-card h3{font-size:12px;text-transform:uppercase;letter-spacing:.09em;margin-top:28px;color:var(--muted)}
.module-main strong{font-size:30px;font-weight:500}
.module-main span{font-size:9px}
.module-copy{font-size:10px;line-height:1.55}
.inline-link{font-size:9px;text-transform:uppercase;letter-spacing:.07em}
.mini-metrics>span{border-radius:6px;padding:7px 8px;font-size:8px}
.source-bar{margin-top:18px;padding:12px 4px 0;border-top:1px solid var(--line);gap:18px;font-size:8.5px;letter-spacing:.03em}
.site-footer{width:min(calc(100% - 36px),var(--max));padding:24px 0 34px;border-top:1px solid var(--line)}
.site-footer>div strong{font-size:11px;letter-spacing:.08em;text-transform:uppercase}.site-footer>div span{font-size:9px}
.site-footer nav{gap:18px}.site-footer a,.site-footer button{font-size:9px;letter-spacing:.05em}
.app-dialog{border-radius:12px;background:var(--panel-strong);box-shadow:0 32px 90px rgba(0,0,0,.46)}
.dialog-shell{padding:26px}
.dialog-head h2{font-size:29px;font-weight:500;letter-spacing:-.04em}
.close-button{border-radius:7px}
.search-box,.geo-button,.choice-card,.module-choice,.planner-result,.planner-hour{border-radius:8px}
.choice-card,.module-choice{background:rgba(255,255,255,.012)}
.toast{border-radius:8px}
@media(max-width:1120px){
  .primary-nav{display:none}
  .header-actions{min-width:0}
  .brand{min-width:0}
  .hero-weather{grid-template-columns:108px minmax(220px,1fr)}
  .hero-facts{grid-column:1/-1;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)}
  .module-grid{grid-template-columns:repeat(2,1fr)}
  .operational-strip{grid-template-columns:repeat(3,1fr)}
  .operational-strip>div:nth-child(3){border-right:0}
  .operational-strip>div:nth-child(n+4){border-top:1px solid var(--line)}
  .operational-strip>div:nth-child(5){border-right:0}
}
@media(max-width:760px){
  :root{--header-height:66px;--radius:11px}
  .site-header{padding:0 10px}
  .brand-copy small{display:none}
  .brand-mark{width:28px;height:28px}
  .location-trigger{height:42px;width:min(47vw,210px);min-width:0}
  .icon-button{width:38px;height:38px}
  .page-shell{width:calc(100% - 16px);margin-top:8px}
  .operational-strip{grid-template-columns:repeat(2,1fr);margin-bottom:8px}
  .operational-strip>div{padding:9px 10px;border-top:0!important;border-right:1px solid var(--line)!important}
  .operational-strip>div:nth-child(even){border-right:0!important}
  .operational-strip>div:nth-child(n+3){border-top:1px solid var(--line)!important}
  .operational-strip>div:last-child{display:none}
  .panel-hero{padding:18px 15px}
  .hero-topline h1{font-size:34px}
  .freshness{font-size:8px;max-width:125px}
  .hero-weather{grid-template-columns:72px minmax(0,1fr);gap:10px;margin-top:22px}
  .condition-visual{width:72px;height:72px}
  .temperature{font-size:72px}
  .condition-label{font-size:20px;margin-top:12px}
  .temperature-range{font-size:10px}
  .hero-facts{grid-template-columns:repeat(2,1fr);margin-top:8px}
  .hero-facts>div{padding:12px}
  .hero-facts strong{font-size:15px}
  .decision-strip{margin-top:16px;padding:12px}
  .decision-strip strong{font-size:10.5px}
  .hourly-panel,.daily-panel,.radar-panel,.alert-panel{padding:17px 13px;margin-top:8px}
  .section-head{margin-bottom:15px}
  .section-head h2{font-size:25px}
  .hourly-rail{grid-auto-columns:78px}
  .hour-card{min-height:138px;padding:11px 6px}
  .quick-grid{grid-template-columns:1fr;gap:8px;margin-top:8px}
  .insight-card{min-height:102px;padding:16px}
  .insight-card strong{margin-top:12px;font-size:18px}
  .daily-row{grid-template-columns:76px minmax(110px,1fr) 66px;min-height:58px}
  .radar-layout{gap:8px;margin-top:8px}
  .radar-frame-wrap{min-height:350px}
  .personal-zone{margin-top:38px}
  .module-grid{grid-template-columns:1fr;gap:8px}
  .module-card{min-height:220px;padding:18px}
  .site-footer{width:calc(100% - 16px)}
  .source-bar{gap:10px;padding-left:2px}
}
@media(max-width:430px){
  .header-actions{gap:4px}
  .location-trigger{width:45vw;padding:6px 8px}
  .location-trigger strong{font-size:11px}
  .operational-strip>div:nth-child(4){display:none}
  .operational-strip{grid-template-columns:1fr 1fr}
  .hero-topline h1{font-size:30px}
  .hero-weather{grid-template-columns:62px minmax(0,1fr)}
  .condition-visual{width:62px;height:62px}
  .temperature{font-size:64px}
  .condition-label{font-size:18px}
  .hero-facts span{font-size:7.5px}
  .hero-facts strong{font-size:14px}
  .decision-icon{display:none}
  .radar-frame-wrap{min-height:310px}
}
@media(max-width:760px){
  .radar-layout{grid-template-columns:minmax(0,1fr)}
  .radar-panel,.alert-panel{min-width:0}
}