/* NADVIR Liquid Glass / recommendation + hourly experience 1.0 */
.detailPage{--nv-shadow:rgba(5,17,30,.28);color:#f5faff;min-height:100svh}
.detailPage .weatherWorld{position:fixed;inset:0;z-index:-5}
.detailPage .weatherWorld img{filter:contrast(1.055) saturate(1.075) brightness(1.015)}
.detailPage .detailContent{position:relative;z-index:1;max-width:480px;margin:auto;padding:max(12px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom));min-height:100svh}
.detailPage .topbar{padding:0 3px;height:48px}
.detailPage .brand{font-size:20px;letter-spacing:.32em}
.detailPage .nvGlass{background:linear-gradient(145deg,rgba(13,29,43,.58),rgba(18,33,45,.48) 60%,rgba(28,37,44,.57));border:1px solid rgba(245,252,255,.37);border-radius:27px;box-shadow:inset 1px 1px 2px rgba(255,255,255,.28),inset -1px -1px 2px rgba(255,207,129,.13),0 12px 26px rgba(0,10,22,.3);-webkit-backdrop-filter:blur(15px) saturate(108%);backdrop-filter:blur(15px) saturate(108%)}
.detailPage .glass{background:linear-gradient(145deg,rgba(13,29,43,.57),rgba(18,33,45,.48) 60%,rgba(28,37,44,.57));-webkit-backdrop-filter:blur(15px) saturate(108%);backdrop-filter:blur(15px) saturate(108%);box-shadow:inset 1px 1px 2px rgba(255,255,255,.28),inset -1px -1px 2px rgba(255,207,129,.13),0 8px 22px rgba(0,10,22,.30)}
.detailPage .glass:before{background:radial-gradient(ellipse at 100% 0,rgba(255,196,110,.13),transparent 48%);box-shadow:inset 0 1px 2px rgba(255,255,255,.32)}
.detailPage button{touch-action:manipulation}
.detailPage button,.detailPage a{outline-offset:4px}
.nvTopLine{display:flex;align-items:center;gap:12px;margin-top:9px}
.nvBack{display:flex;align-items:center;justify-content:center;width:43px;height:43px;border-radius:50%;text-decoration:none;font-size:25px;line-height:1}
.nvTopTown{font-size:20px;font-weight:650}
.nvTopTown small{display:block;font-size:12px;color:#d6e4ea;font-weight:400;margin-top:3px}
.nvNav{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:6px;margin:17px 0 19px}
.nvNav a{border-radius:25px;background:rgba(9,23,37,.43);border:1px solid rgba(240,250,255,.3);box-shadow:inset 0 1px 2px rgba(255,255,255,.18);padding:12px 5px;text-align:center;text-decoration:none;font-size:12px;white-space:nowrap}
.nvNav .nvActive{background:linear-gradient(110deg,rgba(42,142,199,.76),rgba(67,199,248,.62));border:1px solid rgba(164,230,255,.85);box-shadow:inset 0 2px 5px rgba(220,250,255,.55),0 0 11px rgba(75,182,255,.28)}
.nvPageHead h1{font-size:30px;line-height:1.12;margin:4px 0 10px;letter-spacing:-.65px;font-weight:650;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.nvPageHead p{font-size:13px;color:#dce6ee;line-height:1.5;margin:0 0 16px}
.nvOverline{color:#bce6f6;letter-spacing:.105em;font-size:10px;font-weight:700}
.nvSubtle{color:#dae8ee;font-size:12px;line-height:1.55}
.nvPrimary{padding:21px 19px 18px;position:relative;overflow:hidden}
.nvPrimary:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;border-top:1px solid rgba(255,244,215,.16);box-shadow:inset 0 -1px 2px rgba(245,207,143,.12)}
.nvHeroTitle{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:11px}
.nvHeroTitle h2{font-size:27px;letter-spacing:-.4px;line-height:1.2;margin:4px 0 6px}
.nvHeroMark{font-size:33px;color:#b7ecff;text-shadow:0 0 13px rgba(86,201,255,.27)}
.nvHeroMetrics{font-size:16px;font-weight:600;line-height:1.4;margin:8px 0 10px}
.nvHeroActions{display:grid;grid-template-columns:1.15fr 1fr;gap:13px;margin-top:17px}
.nvSolidBtn{border:1px solid rgba(176,237,255,.9);border-radius:17px;background:linear-gradient(110deg,#b0edff,#67d1fa);color:#092134;box-shadow:inset 0 1px 3px #fff9,0 0 14px #67ceff30;font-weight:650;font-size:12px;min-height:48px;padding:10px 9px}
.nvQuietBtn{display:grid;place-items:center;text-align:center;text-decoration:none;border-radius:17px;border:1px solid rgba(235,247,255,.4);background:rgba(13,29,42,.35);font-size:12px;padding:10px 7px;min-height:48px}
.nvSection{margin-top:22px}
.nvSection h2{font-size:19px;margin:0 0 12px;font-weight:650}
.nvSection .nvIntro{margin:0 0 13px;font-size:12px;color:#e4edf4;line-height:1.5}
.nvPills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.nvPills button{background:rgba(12,30,46,.51);border:1px solid rgba(238,248,255,.28);color:#ecf7ff;border-radius:18px;padding:12px 3px;font-size:12px;min-height:45px}
.nvPills button.nvSelected{background:linear-gradient(110deg,rgba(40,126,185,.68),rgba(82,194,248,.52));border-color:rgba(173,234,255,.8);box-shadow:inset 0 1px 2px rgba(255,255,255,.5),0 0 13px rgba(65,184,255,.19)}
.nvCompare{padding:16px}
.nvTwoSelect{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nvTwoSelect label{font-size:11px;color:#e3f2fa}
.nvTwoSelect select{display:block;width:100%;margin-top:7px;color:white;background:#233c50;border:1px solid rgba(242,250,255,.44);border-radius:13px;padding:12px 7px;font-size:11px;min-height:45px}
.nvCompareGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.nvCompareGrid>div{min-width:0;background:rgba(0,19,32,.24);padding:11px 9px;border:1px solid rgba(230,245,255,.15);border-radius:14px}
.nvCompareGrid strong{font-size:12px;display:block}
.nvCompareGrid small{display:block;font-size:11px;color:#e7f0f6;margin-top:7px;line-height:1.5}
#compareResult p{font-weight:650;font-size:13px;line-height:1.5}
#compareResult>small{color:#dce9f0;font-size:11px}
#advices{display:grid;gap:10px}
.nvAdvice{overflow:hidden;border-radius:22px}
.nvAdviceHeader{background:none;border:0;width:100%;display:flex;gap:13px;align-items:center;text-align:left;padding:16px 15px;min-height:70px}
.nvMonoIcon{width:40px;height:40px;display:grid;place-items:center;border-radius:14px;background:rgba(8,27,41,.35);border:1px solid rgba(244,252,255,.2);color:#e7f8ff;font-size:23px;font-weight:400}
.nvAdviceText{min-width:0;flex:1}
.nvAdviceText strong{font-size:15px;display:block}
.nvAdviceText small{font-size:11px;color:#d8e8ee;display:block;margin-top:5px}
.nvDisclosure{font-size:24px;color:#d9edfa;line-height:1}
.nvAdviceContent{padding:0 17px 16px 67px;font-size:13px;line-height:1.56}
.nvAdviceContent a{color:#b6eaff;font-weight:650}
.nvSaved{display:flex;gap:9px;justify-content:space-between;align-items:center;background:rgba(8,25,42,.4);border:1px solid rgba(238,249,255,.23);border-radius:17px;padding:14px 12px;margin:8px 0}
.nvSaved strong{display:block;font-size:13px}
.nvSaved small{display:block;color:#cfdee8;font-size:11px;line-height:1.5;margin-top:4px}
.nvSaved button{width:42px;height:42px;border:1px solid rgba(240,250,255,.27);background:rgba(255,255,255,.06);border-radius:14px;font-size:20px}
.nvFooter{margin:27px 0 4px;color:#e2eff7;font-size:11px;line-height:1.55;text-align:center}
.nvFooter a{color:#b7e9ff}
.nvToast{margin:12px 0;padding:11px 13px;border-radius:15px;background:rgba(29,73,94,.7);border:1px solid rgba(153,223,255,.4);font-size:12px}
.nvHourlyScroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:6px 3px 12px;scroll-snap-type:x proximity}
.nvHourTile{scroll-snap-align:center;flex:none;width:78px;min-height:98px;background:rgba(10,31,48,.56);border:1px solid rgba(240,250,255,.3);border-radius:19px;padding:10px 5px;text-align:center;font-size:12px;display:grid;gap:5px;align-items:center}
.nvHourTile strong{font-size:20px}
.nvHourTile small{font-size:10px;color:#e3edf5}
.nvHourTile.active{border:1px solid #b5ecff;background:linear-gradient(155deg,rgba(63,156,210,.72),rgba(25,57,79,.72));box-shadow:inset 0 1px 4px rgba(247,253,255,.55),0 0 12px rgba(100,208,255,.3)}
.nvHourMain{padding:20px;margin-top:10px}
.nvHourTemperature{font-size:69px;font-weight:650;letter-spacing:-3px;line-height:1.1;margin:12px 0}
.nvHourlyMetrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:17px}
.nvHourlyMetrics>div{border-top:1px solid rgba(255,255,255,.23);padding-top:11px}
.nvHourlyMetrics span:not(.nvDir){display:block;color:#cddce6;font-size:11px}
.nvHourlyMetrics strong{display:block;margin-top:7px;font-size:13px;white-space:nowrap}
.nvDir{display:inline-block}
.nvChart{width:100%;height:auto;display:block;overflow:visible}
.nvChartPanel{padding:18px;margin:12px 0}
.nvChartPanel h3{font-size:14px;margin:0 0 14px}
.nvHourBottom{margin-top:16px}
@media(max-width:359px){.detailPage .detailContent{padding-left:11px;padding-right:11px}.nvTopTown{font-size:17px}.nvHeroTitle h2{font-size:23px}.nvNav a{font-size:11px}.nvHeroActions{gap:9px}.nvAdviceHeader{gap:8px}.nvAdviceContent{padding-left:18px}}
@media(prefers-reduced-motion:reduce){.detailPage *, .detailPage *:before,.detailPage *:after{animation:none!important;transition:none!important}}

.nvHourTile .weatherIcon{height:30px;width:30px;filter:none}.nvHourTile small{display:flex;justify-content:center;height:32px}.nvHourTile{min-height:110px}