.weather-page{padding:var(--spacing-2xl) 0 var(--spacing-3xl);min-height:calc(100vh - 72px);background:linear-gradient(180deg,#f0f9ff 0%,#f8fafc 50%,#fff 100%)}.weather-page__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-2xl)}.weather-page__title{display:flex;align-items:center;gap:var(--spacing-md);font-size:var(--text-3xl);font-family:var(--font-display);color:var(--color-gray-900);margin-bottom:var(--spacing-xs)}.weather-page__title i{color:var(--color-primary)}.weather-page__subtitle{color:var(--color-gray-500);font-size:var(--text-base)}.weather-page__refresh{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);color:var(--color-gray-600);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.weather-page__refresh:hover{background:var(--color-gray-50);border-color:var(--color-gray-300);color:var(--color-gray-800)}.weather-page__refresh.loading i{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.current-weather{background:linear-gradient(135deg,var(--color-primary) 0%,#1e40af 100%);border-radius:var(--radius-2xl);padding:var(--spacing-2xl);color:var(--color-white);margin-bottom:var(--spacing-xl);box-shadow:0 10px 40px rgb(37 99 235 / .3)}.current-weather__main{display:flex;align-items:center;gap:var(--spacing-xl);margin-bottom:var(--spacing-2xl);padding-bottom:var(--spacing-2xl);border-bottom:1px solid rgb(255 255 255 / .2)}.current-weather__icon-wrap{width:120px;height:120px;display:flex;align-items:center;justify-content:center;background:rgb(255 255 255 / .15);border-radius:var(--radius-xl);backdrop-filter:blur(10px)}.current-weather__icon{font-size:64px;color:var(--color-accent)}.current-weather__temp-wrap{display:flex;align-items:flex-start}.current-weather__temp{font-size:80px;font-weight:700;line-height:1}.current-weather__unit{font-size:var(--text-2xl);font-weight:500;margin-top:10px;opacity:.8}.current-weather__info{display:flex;flex-direction:column;gap:var(--spacing-xs)}.current-weather__description{font-size:var(--text-xl);font-weight:500;text-transform:capitalize}.current-weather__feels{font-size:var(--text-sm);opacity:.8}.current-weather__details{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-lg)}.weather-detail{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:rgb(255 255 255 / .1);border-radius:var(--radius-lg);backdrop-filter:blur(10px)}.weather-detail i{font-size:var(--text-xl);opacity:.8}.weather-detail__info{display:flex;flex-direction:column}.weather-detail__value{font-size:var(--text-lg);font-weight:600}.weather-detail__label{font-size:var(--text-xs);opacity:.7}.sun-times{display:flex;align-items:center;justify-content:center;gap:var(--spacing-2xl);padding:var(--spacing-xl);background:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);margin-bottom:var(--spacing-xl)}.sun-time{display:flex;align-items:center;gap:var(--spacing-md)}.sun-time i{font-size:var(--text-2xl)}.sun-time--sunrise i{color:#f59e0b}.sun-time--sunset i{color:#ea580c}.sun-time__info{display:flex;flex-direction:column}.sun-time__label{font-size:var(--text-xs);color:var(--color-gray-500);text-transform:uppercase;letter-spacing:.05em}.sun-time__value{font-size:var(--text-xl);font-weight:600;color:var(--color-gray-900)}.sun-time__divider{flex:1;max-width:200px;height:40px;position:relative}.sun-time__arc{position:absolute;inset:0;border:2px dashed var(--color-gray-200);border-bottom:none;border-radius:100px 100px 0 0}.forecast-section{margin-bottom:var(--spacing-xl)}.forecast-section__title{font-size:var(--text-xl);font-weight:600;color:var(--color-gray-900);margin-bottom:var(--spacing-lg)}.forecast-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--spacing-md)}.forecast-card{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--spacing-lg);text-align:center;box-shadow:var(--shadow-sm);transition:all var(--transition-fast)}.forecast-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.forecast-card__day{font-size:var(--text-sm);font-weight:600;color:var(--color-gray-900);margin-bottom:var(--spacing-xs)}.forecast-card__date{font-size:var(--text-xs);color:var(--color-gray-500);margin-bottom:var(--spacing-md)}.forecast-card__icon{font-size:36px;color:var(--color-primary);margin-bottom:var(--spacing-md)}.forecast-card__temp{display:flex;justify-content:center;gap:var(--spacing-sm);font-size:var(--text-base)}.forecast-card__temp-max{font-weight:600;color:var(--color-gray-900)}.forecast-card__temp-min{color:var(--color-gray-400)}.forecast-card__desc{font-size:var(--text-xs);color:var(--color-gray-500);margin-top:var(--spacing-sm);text-transform:capitalize}.hourly-section{margin-bottom:var(--spacing-xl)}.hourly-section__title{font-size:var(--text-xl);font-weight:600;color:var(--color-gray-900);margin-bottom:var(--spacing-lg)}.hourly-scroll{overflow-x:auto;margin:0 calc(-1 * var(--container-padding));padding:0 var(--container-padding);scrollbar-width:thin;scrollbar-color:var(--color-gray-300) #fff0}.hourly-scroll::-webkit-scrollbar{height:6px}.hourly-scroll::-webkit-scrollbar-track{background:#fff0}.hourly-scroll::-webkit-scrollbar-thumb{background:var(--color-gray-300);border-radius:3px}.hourly-grid{display:flex;gap:var(--spacing-md);padding-bottom:var(--spacing-sm)}.hourly-card{flex-shrink:0;width:80px;background:var(--color-white);border-radius:var(--radius-lg);padding:var(--spacing-md);text-align:center;box-shadow:var(--shadow-sm)}.hourly-card--now{background:var(--color-primary);color:var(--color-white)}.hourly-card--now .hourly-card__icon{color:var(--color-accent)}.hourly-card__time{font-size:var(--text-xs);font-weight:500;margin-bottom:var(--spacing-sm)}.hourly-card__icon{font-size:24px;color:var(--color-primary);margin-bottom:var(--spacing-sm)}.hourly-card__temp{font-size:var(--text-sm);font-weight:600}.weather-extra{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg);margin-bottom:var(--spacing-xl)}.weather-extra__card{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--spacing-lg);box-shadow:var(--shadow-sm)}.weather-extra__title{display:flex;align-items:center;gap:var(--spacing-sm);font-size:var(--text-base);font-weight:600;color:var(--color-gray-900);margin-bottom:var(--spacing-lg)}.weather-extra__title i{color:var(--color-primary)}.wind-compass{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.wind-compass__rose{position:relative;width:100px;height:100px;border:2px solid var(--color-gray-200);border-radius:50%}.wind-compass__dir{position:absolute;font-size:var(--text-xs);font-weight:600;color:var(--color-gray-500)}.wind-compass__dir--n{top:4px;left:50%;transform:translateX(-50%)}.wind-compass__dir--s{bottom:4px;left:50%;transform:translateX(-50%)}.wind-compass__dir--e{right:6px;top:50%;transform:translateY(-50%)}.wind-compass__dir--w{left:6px;top:50%;transform:translateY(-50%)}.wind-compass__arrow{position:absolute;top:50%;left:50%;width:4px;height:36px;background:linear-gradient(to bottom,var(--color-primary) 0%,var(--color-primary) 50%,var(--color-gray-300) 50%);border-radius:2px;transform-origin:center 50%;transform:translate(-50%,-50%) rotate(0deg);transition:transform var(--transition-slow)}.wind-compass__arrow::before{content:'';position:absolute;top:-4px;left:50%;transform:translateX(-50%);border-left:6px solid #fff0;border-right:6px solid #fff0;border-bottom:8px solid var(--color-primary)}.wind-compass__label{font-size:var(--text-sm);font-weight:500;color:var(--color-gray-700)}.precipitation-info{text-align:center}.precipitation-bar{height:8px;background:var(--color-gray-100);border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--spacing-md)}.precipitation-bar__fill{height:100%;background:linear-gradient(90deg,#60a5fa 0%,#3b82f6 100%);border-radius:var(--radius-full);width:0%;transition:width var(--transition-slow)}.precipitation-value{font-size:var(--text-2xl);font-weight:700;color:var(--color-gray-900);display:block}.precipitation-label{font-size:var(--text-sm);color:var(--color-gray-500)}.uv-info{text-align:center}.uv-scale{height:8px;background:linear-gradient(90deg,#22c55e 0%,#eab308 33%,#f97316 66%,#dc2626 100%);border-radius:var(--radius-full);position:relative;margin-bottom:var(--spacing-md)}.uv-scale__indicator{position:absolute;top:-4px;width:16px;height:16px;background:var(--color-white);border:2px solid var(--color-gray-700);border-radius:50%;transform:translateX(-50%);left:0%;transition:left var(--transition-slow)}.uv-value{font-size:var(--text-2xl);font-weight:700;color:var(--color-gray-900);display:block}.uv-label{font-size:var(--text-sm);color:var(--color-gray-500)}.weather-update{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);font-size:var(--text-sm);color:var(--color-gray-500)}.weather-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-3xl);color:var(--color-gray-500)}.weather-loading__spinner{width:48px;height:48px;border:3px solid var(--color-gray-200);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:var(--spacing-md)}@media (max-width:1024px){.current-weather__details{grid-template-columns:repeat(2,1fr)}.forecast-grid{grid-template-columns:repeat(3,1fr)}.weather-extra{grid-template-columns:1fr}}@media (max-width:768px){.weather-page__header{flex-direction:column;align-items:flex-start;gap:var(--spacing-md)}.weather-page__title{font-size:var(--text-2xl)}.current-weather__main{flex-direction:column;text-align:center}.current-weather__temp{font-size:60px}.current-weather__details{grid-template-columns:repeat(2,1fr)}.forecast-grid{grid-template-columns:repeat(2,1fr)}.sun-times{flex-direction:column;gap:var(--spacing-lg)}.sun-time__divider{display:none}}@media (max-width:480px){.weather-page{padding:var(--spacing-lg) 0 var(--spacing-2xl)}.current-weather{padding:var(--spacing-lg)}.current-weather__icon-wrap{width:80px;height:80px}.current-weather__icon{font-size:40px}.current-weather__temp{font-size:48px}.forecast-grid{grid-template-columns:1fr 1fr}.hourly-card{width:70px;padding:var(--spacing-sm);scroll-snap-align:start}.hourly-forecast__list{scroll-snap-type:x mandatory}}