*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0d1117;--bg-secondary: #161b22;--bg-card: #1e2433;--bg-hover: #252b3d;--primary-blue: #3b82f6;--primary-purple: #7c3aed;--accent-orange: #ff9500;--accent-yellow: #ffd60a;--text-primary: #ffffff;--text-secondary: #8b949e;--text-muted: #6e7681;--border-color: rgba(255, 255, 255, .1);--border-hover: rgba(255, 255, 255, .2);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 4px 16px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--shadow-3d: 0 6px 0 rgba(0, 0, 0, .5), 0 8px 16px rgba(0, 0, 0, .4)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-primary);color:var(--text-primary);overflow-x:hidden;font-size:clamp(14px,1.5vw,16px)}.page{min-height:100vh;width:100%;background:var(--bg-primary);color:var(--text-primary);position:relative;transition:background .3s ease}.page.light{background:#fff;color:#2d3436;--bg-primary: #ffffff;--bg-secondary: #f5f7fa;--bg-card: #ffffff;--text-primary: #2d3436;--text-secondary: #636e72;--border-color: rgba(0, 0, 0, .1)}.page.light .hourly-item{background:#f5f5f5;border:1px solid black;box-shadow:0 2px 8px #00000026;color:#2d3436}.page.light .hourly-item:hover{background:#f5f5f5!important;border-color:#000!important;box-shadow:0 4px 12px #0003!important;transform:translateY(-4px)}.page.light .hourly-time{color:#636e72}.page.light .time-display{color:#2d3436}.page.light .time-period{color:#000}.page.light .hourly-day{color:#636e72}.page.light .metric-icon{filter:brightness(.7) drop-shadow(0 0 2px rgba(0,0,0,.2))}.page.light .hourly-icon{filter:brightness(.8) drop-shadow(0 1px 2px rgba(0,0,0,.15))}.page.light .forecast-icon{filter:brightness(.75) drop-shadow(0 1px 2px rgba(0,0,0,.15))}.page.light .sun-icon{filter:brightness(.8) drop-shadow(0 1px 2px rgba(0,0,0,.15))}.page.light .weather-icon-large{filter:brightness(.9) drop-shadow(0 4px 12px rgba(0,0,0,.2))}.page.light .scroll-btn{background:transparent;color:#000;border:2px solid #0c0c0c;box-shadow:0 4px 15px #4a525e59}.page.light .scroll-btn:hover{background:transparent;border-color:#0c0c0c;box-shadow:0 4px 15px #4a525e59}.page.light .scroll-btn:active{box-shadow:0 2px 8px #2563eb4d}.page.light .hourly-temp{color:#2d3436}.page.light .detail-item{background:#f5f5f5}.page.light .forecast-item{background:#f5f5f5;border:1px solid black;box-shadow:0 2px 8px #00000026;color:#2d3436}.page.light .forecast-item:hover{background:#f5f5f5!important;border-color:#000!important;box-shadow:0 4px 12px #0003!important;transform:translate(4px)}.page.light .forecast-day,.page.light .forecast-temp{color:#2d3436}.page.light .chart-section{background:#f5f5f5;border:none;box-shadow:0 2px 8px #00000026;padding:clamp(12px,2vw,16px);overflow:hidden}.page.light .chart-section h3{color:#2d3436}.page.light .chart-container{background:#f5f5f5;border-radius:8px;width:100%;height:clamp(150px,25vh,200px);padding:0;margin:0}.page.light svg{width:100%;height:100%}.page.light svg line{stroke:#000!important}.page.light svg text{fill:#000!important;font-size:clamp(10px,1.2vw,12px)!important}.page.light .recharts-cartesian-axis-line{stroke:#000!important}.page.light .recharts-cartesian-grid-horizontal line,.page.light .recharts-cartesian-grid-vertical line{stroke:#000!important}.page.light .recharts-curve{stroke:#000!important}.page.light .recharts-surface{background:transparent!important}.page.light .uv-section{background:#f5f5f5;border:1px solid black;box-shadow:0 2px 8px #00000026}.page.light .uv-label{color:#636e72}.page.light .uv-value{color:#2d3436}.page.light .metric{background:#f5f5f5;border:1px solid black;box-shadow:0 2px 8px #00000026}.page.light .metric-label{color:#636e72}.page.light .metric-value{color:#2d3436}.page.light .sun-times{border-top:1px solid black}.page.light .sun-label{color:#636e72}.page.light .sun-time{color:#2d3436}.page.light .protection-img{filter:drop-shadow(0 1px 3px rgba(0,0,0,.1))}.topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:clamp(12px,2vw,16px) clamp(16px,3vw,28px);background:var(--bg-secondary);border-bottom:1px solid var(--border-color);gap:clamp(10px,2vw,20px);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-wrap:wrap}.brand{font-weight:800;font-size:clamp(1.1rem,2.5vw,1.3rem);color:var(--text-primary);display:flex;align-items:center;gap:clamp(6px,1vw,8px);flex-shrink:0;letter-spacing:-.5px}.brand .dot{width:clamp(6px,1vw,8px);height:clamp(6px,1vw,8px);background:linear-gradient(135deg,var(--primary-blue),var(--primary-purple));border-radius:50%;animation:pulse 2s ease-in-out infinite;box-shadow:0 0 12px var(--primary-blue)}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7}}.search{display:flex;gap:clamp(6px,1.5vw,10px);align-items:center;flex:1;max-width:clamp(250px,40vw,350px);min-width:150px}.search input[type=text]{padding:clamp(8px,1.5vw,10px) clamp(10px,2vw,14px);border-radius:clamp(6px,1vw,8px);border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-primary);font-size:clamp(12px,1.5vw,13px);width:100%;transition:all .3s ease}.search input[type=text]:focus{outline:none;border-color:var(--primary-blue);box-shadow:0 0 0 3px #3b82f626}.search-btn{width:clamp(36px,6vw,45px);height:clamp(36px,6vw,45px);min-width:clamp(36px,6vw,45px);padding:0;background:#fff;border-radius:50%;cursor:pointer;white-space:nowrap;transition:all .3s ease;box-shadow:0 8px 24px #9e99914d,inset 0 1px #fff3;position:relative;display:flex;align-items:center;justify-content:center;border:none}.search-btn:active{transform:translateY(-2px);box-shadow:0 6px 16px #ff95004d,inset 0 1px #fff3}.search-icon{width:clamp(24px,4.5vw,35px);height:clamp(24px,4.5vw,35px)}.top-actions{display:flex;gap:clamp(6px,1.5vw,10px)}.icon-btn{width:clamp(36px,6vw,45px);height:clamp(36px,6vw,45px);background:#fff;border:1px solid var(--border-color);border-radius:clamp(6px,1vw,8px);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;font-size:clamp(16px,2.5vw,18px)}.icon-btn:hover{background:var(--bg-hover);transform:translateY(-1px)}.theme-icon{width:clamp(20px,3vw,24px);height:clamp(20px,3vw,24px);filter:brightness(1.1)}.container{position:relative;z-index:1;max-width:1600px;margin:0 auto;padding:clamp(16px,3vw,24px) clamp(16px,3vw,28px);min-height:calc(100vh - 70px)}.alert{padding:clamp(12px,2vw,14px) clamp(16px,2.5vw,20px);border-radius:clamp(8px,1.5vw,10px);margin-bottom:clamp(16px,2.5vw,20px);font-weight:500;border:1px solid var(--border-color);animation:slideIn .4s ease;font-size:clamp(13px,1.5vw,14px)}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.alert.loading{background:#ff95001a;border-color:var(--accent-orange);color:var(--accent-orange)}.alert.error{background:#ff3b301a;border-color:#ff3b30;color:#ff3b30}.main-grid{display:grid;grid-template-columns:minmax(250px,280px) 1fr minmax(280px,300px);gap:clamp(16px,2.5vw,24px);min-height:calc(100vh - 150px)}.left-panel,.middle-panel,.right-panel{background:var(--bg-card);border-radius:clamp(12px,2vw,16px);border:1px solid var(--border-color);padding:clamp(16px,3vw,24px);box-shadow:var(--shadow-md);animation:fadeInUp .6s ease}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.left-panel{display:flex;flex-direction:column;gap:clamp(16px,2.5vw,20px)}.location-header{display:flex;justify-content:space-between;align-items:flex-start}.loc-info{display:flex;gap:clamp(8px,1.5vw,12px);align-items:flex-start;flex:1}.loc-pin{font-size:clamp(16px,2.5vw,20px);margin-top:2px}.loc-details{display:flex;flex-direction:column;gap:2px}.location-name{font-size:clamp(1.1rem,2.5vw,1.4rem);font-weight:800;color:var(--text-primary);letter-spacing:-.5px;word-break:break-word}.location-time{font-size:clamp(11px,1.5vw,12px);color:var(--text-secondary);font-weight:500}.temp-display{display:flex;align-items:center;justify-content:space-between;gap:clamp(8px,2vw,12px)}.temp-value{font-size:clamp(2.5rem,6vw,3.5rem);font-weight:900;color:var(--text-primary);line-height:1;letter-spacing:-2px}.weather-icon-large{width:clamp(80px,15vw,120px);height:clamp(80px,15vw,120px);filter:drop-shadow(0 8px 20px rgba(255,215,10,.3)) brightness(1.1);animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.condition-text{font-size:clamp(.9rem,1.8vw,1rem);color:var(--text-secondary);font-weight:500;text-transform:capitalize}.weather-details{display:flex;flex-direction:column;gap:clamp(10px,2vw,12px);padding-top:clamp(12px,2vw,16px);border-top:1px solid var(--border-color)}.detail-item{display:flex;justify-content:space-between;align-items:center;font-size:clamp(12px,1.5vw,13px);background:var(--bg-hover);padding:clamp(8px,1.5vw,10px);border-radius:clamp(6px,1vw,8px)}.detail-label{color:var(--text-secondary);font-weight:500}.detail-value{color:var(--text-primary);font-weight:700}.mini-metrics{display:flex;flex-direction:column;gap:clamp(8px,1.5vw,10px)}.metric{display:flex;align-items:center;gap:clamp(8px,2vw,12px);background:var(--bg-hover);padding:clamp(10px,2vw,12px);border-radius:clamp(6px,1vw,8px);border:1px solid var(--border-color)}.metric-icon{font-size:clamp(18px,3vw,20px);flex-shrink:0;height:clamp(20px,3.5vw,24px);width:clamp(20px,3.5vw,24px);-o-object-fit:contain;object-fit:contain;filter:brightness(.9) drop-shadow(0 0 2px rgba(255,255,255,.3))}.metric-info{flex:1;min-width:0}.metric-label{font-size:clamp(10px,1.3vw,11px);color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px}.metric-value{font-size:clamp(.9rem,1.8vw,1rem);font-weight:800;color:var(--text-primary)}.middle-panel{display:flex;flex-direction:column;gap:clamp(18px,3vw,24px)}.panel-title{font-size:clamp(1rem,2vw,1.2rem);font-weight:700;color:var(--text-primary);letter-spacing:-.3px;margin:0}.hourly-container{display:flex;align-items:center;gap:clamp(8px,1.5vw,12px);position:relative}.hourly-list{display:flex;gap:clamp(8px,1.5vw,12px);overflow:hidden;padding-bottom:8px;flex:1;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--border-hover) transparent}.hourly-list::-webkit-scrollbar{height:6px}.hourly-list::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:3px}.scroll-btn{min-width:clamp(40px,6vw,50px);width:clamp(40px,6vw,50px);height:clamp(40px,6vw,50px);padding:0;background:transparent;color:#fff;border:2px solid black;border-radius:clamp(10px,1.5vw,12px);font-size:clamp(18px,3vw,22px);font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;overflow:hidden}.scroll-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:#fff3;transition:left .3s ease;border-radius:10px}.scroll-btn:hover:before{left:100%}.scroll-btn:hover{background:transparent;border-color:#fff;transform:scale(1.15);box-shadow:0 8px 25px #2c2c2d99}.scroll-btn:active{transform:scale(.98);box-shadow:0 2px 8px #716f7566}.scroll-left{order:-1}.scroll-right{order:1}.hourly-item{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1.2vw,8px);min-width:clamp(90px,14vw,110px);padding:clamp(10px,1.8vw,12px) clamp(6px,1.2vw,8px);background:var(--bg-hover);border:1px solid var(--border-color);border-radius:clamp(8px,1.2vw,10px);transition:all .3s ease;cursor:pointer}.hourly-day{font-size:clamp(11px,1.3vw,12px);font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.3px}.hourly-item:hover{background:var(--primary-blue);border-color:var(--primary-blue);transform:translateY(-4px)}.hourly-time{display:flex;flex-direction:column;align-items:center;gap:2px}.time-display{font-size:clamp(13px,1.8vw,14px);font-weight:700;color:var(--text-primary)}.time-period{font-size:clamp(14px,2vw,16px);font-weight:700;color:#000;text-transform:uppercase;letter-spacing:.5px}.hourly-icon{width:clamp(40px,7vw,50px);height:clamp(40px,7vw,50px);filter:drop-shadow(0 2px 4px rgba(0,0,0,.2)) brightness(1.05)}.hourly-temp{font-size:clamp(1rem,2vw,1.2rem);font-weight:800;color:var(--text-primary)}.chart-section{background:var(--bg-hover);border:1px solid var(--border-color);border-radius:clamp(8px,1.2vw,10px);padding:clamp(12px,2vw,16px);overflow:hidden}.chart-section h3{font-size:clamp(.85rem,1.5vw,.95rem);font-weight:700;color:var(--text-primary);margin-bottom:clamp(10px,1.8vw,12px)}.chart-container{width:100%;height:clamp(140px,22vh,180px);overflow:hidden}.no-data{color:var(--text-secondary);font-size:clamp(12px,1.5vw,13px);text-align:center;padding:clamp(16px,2.5vw,20px);font-weight:500}.right-panel{display:flex;flex-direction:column;gap:clamp(16px,2.5vw,20px)}.forecast-list{display:flex;flex-direction:column;gap:clamp(8px,1.5vw,10px);overflow-y:visible}.forecast-item{display:flex;align-items:center;justify-content:space-between;gap:clamp(6px,1vw,8px);padding:clamp(8px,1.5vw,10px) clamp(8px,1.5vw,10px);background:var(--bg-hover);border:1px solid var(--border-color);border-radius:clamp(6px,1vw,8px);transition:all .2s ease;cursor:pointer}.forecast-item:hover{background:var(--primary-blue);border-color:var(--primary-blue);transform:translate(4px)}.forecast-day{min-width:clamp(38px,5vw,42px);font-size:clamp(10px,1.4vw,11px);font-weight:700;color:var(--text-primary);text-transform:uppercase;letter-spacing:.3px;flex-shrink:0}.forecast-icon{width:clamp(26px,3.5vw,30px);height:clamp(26px,3.5vw,30px);filter:brightness(1.05) drop-shadow(0 1px 2px rgba(0,0,0,.2));flex-shrink:0}.forecast-condition{width:clamp(48px,8vw,58px);text-align:left;font-weight:500;color:#fff;font-size:clamp(10px,1.4vw,11px);flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.forecast-temp{min-width:clamp(48px,7.5vw,56px);text-align:right;font-size:clamp(.85rem,1.6vw,.95rem);font-weight:800;color:var(--text-primary);flex-shrink:0}.sun-times{display:flex;flex-direction:column;gap:clamp(8px,1.5vw,10px);padding-top:clamp(10px,1.8vw,12px);border-top:1px solid var(--border-color)}.sun-item{display:flex;align-items:center;gap:clamp(8px,1.5vw,12px)}.sun-icon{font-size:clamp(20px,3vw,24px);flex-shrink:0;height:clamp(40px,3vw,24px);width:clamp(40px,3vw,24px);-o-object-fit:contain;object-fit:contain;filter:brightness(1.05) drop-shadow(0 1px 2px rgba(0,0,0,.2))}.sun-info{flex:1}.sun-label{font-size:clamp(15px,1.3vw,11px);color:var(--text-muted);font-weight:800;text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px}.sun-time{font-size:clamp(12px,1.6vw,13px);font-weight:700;color:var(--text-primary)}.uv-section{background:var(--bg-hover);border:1px solid var(--border-color);border-radius:clamp(8px,1.2vw,10px);padding:clamp(12px,2vw,14px);text-align:center}.uv-label{font-size:clamp(10px,1.3vw,11px);color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px}.uv-badge{display:inline-block;background:linear-gradient(135deg,#ff6b6b,#ee5a6f);color:#fff;padding:clamp(5px,1vw,6px) clamp(10px,2vw,14px);border-radius:clamp(10px,1.5vw,12px);font-weight:700;font-size:clamp(11px,1.4vw,12px);margin-bottom:8px;box-shadow:0 2px 8px #ff6b6b4d;margin-left:auto;margin-right:auto;display:block}.uv-value{font-size:clamp(1.6rem,3.5vw,2rem);font-weight:900;color:#ff9500;margin-bottom:6px}.uv-description{font-size:clamp(10px,1.3vw,11px);color:var(--text-secondary);font-weight:500;margin-top:6px;margin-bottom:clamp(10px,1.8vw,12px)}.protection-images{display:flex;justify-content:center;gap:clamp(6px,1.2vw,8px);flex-wrap:wrap}.protection-img{height:clamp(32px,5vw,40px);width:clamp(32px,5vw,40px);-o-object-fit:contain;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}@media(max-width:1024px){.main-grid{grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,18px)}.left-panel{grid-column:1 / 2}.middle-panel{grid-column:2 / 3}.right-panel{grid-column:1 / 3}}@media(max-width:770px){.container{width:100%;max-width:500px;margin:0 auto;padding:0 0 clamp(20px,4vw,24px) 0;background:var(--bg-primary)}.main-grid{display:flex;flex-direction:column;gap:clamp(14px,3vw,18px);width:100%;min-height:0}.left-panel,.middle-panel,.right-panel{background:var(--bg-card);border-radius:clamp(20px,5vw,28px);box-shadow:0 4px 24px #222f4c2e;padding:clamp(18px,4vw,24px) clamp(12px,3vw,16px);margin:0 0 clamp(10px,2.5vw,14px) 0;min-width:0}.location-header{flex-direction:row;justify-content:space-between;align-items:center;gap:clamp(6px,1.5vw,8px);margin-bottom:4px}.brand{font-size:clamp(1.05rem,3vw,1.2rem)}.search{max-width:clamp(180px,40vw,220px)}.search input[type=text]{font-size:clamp(12px,2vw,13px);padding:clamp(7px,1.5vw,8px) clamp(8px,2vw,10px)}.search-btn{width:clamp(32px,7vw,36px);height:clamp(32px,7vw,36px);min-width:clamp(32px,7vw,36px)}.search-icon{width:clamp(20px,5vw,24px);height:clamp(20px,5vw,24px)}.top-actions{gap:clamp(4px,1.2vw,6px)}.icon-btn{width:clamp(32px,7vw,36px);height:clamp(32px,7vw,36px);border-radius:50%;font-size:clamp(14px,3vw,16px)}.theme-icon{width:clamp(18px,4vw,20px);height:clamp(18px,4vw,20px)}.temp-display{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(4px,1.5vw,6px)}.weather-icon-large{width:clamp(70px,18vw,90px);height:clamp(70px,18vw,90px);margin:clamp(12px,3vw,16px) 0 clamp(4px,1.5vw,6px) 0}.temp-value{font-size:clamp(2.2rem,8vw,2.6rem);margin-top:clamp(8px,2vw,10px)}.weather-details{flex-direction:row;gap:clamp(6px,1.5vw,8px)}.detail-item{background:var(--bg-hover);border-radius:clamp(10px,2vw,12px);flex:1;padding:clamp(6px,1.5vw,8px) clamp(2px,1vw,3px);font-size:clamp(11px,2vw,12px);gap:2px;min-width:0;text-align:center;flex-direction:column}.mini-metrics{flex-direction:row;gap:clamp(5px,1.5vw,7px);margin-top:clamp(12px,3vw,16px)}.metric{background:var(--bg-hover);border-radius:clamp(10px,2vw,12px);flex:1;min-width:0;padding:clamp(7px,2vw,9px) clamp(2px,1vw,3px);text-align:center;font-size:clamp(11px,2vw,12px);gap:clamp(2px,1vw,3px);flex-direction:column}.metric-icon{height:clamp(18px,4vw,22px);width:clamp(18px,4vw,22px);margin:0 auto clamp(3px,1vw,4px) auto;filter:brightness(1.1)}.metric-label{font-size:clamp(9px,1.8vw,10px)}.metric-value{font-size:clamp(.8rem,2.2vw,.95rem)}.hourly-list{width:100%;flex-direction:row;gap:clamp(4px,1.2vw,5px);overflow-x:auto}.hourly-item{border-radius:clamp(12px,3vw,15px);min-width:clamp(60px,15vw,70px);max-width:clamp(70px,18vw,80px);height:clamp(100px,25vw,120px);flex-direction:column;justify-content:space-between;padding:clamp(5px,1.5vw,7px) clamp(1px,.5vw,2px)}.hourly-day{font-size:clamp(9px,1.8vw,11px)}.time-display{font-size:clamp(11px,2vw,13px)}.time-period{font-size:clamp(12px,2.2vw,14px)}.hourly-icon{width:clamp(28px,7vw,33px);height:clamp(28px,7vw,33px);margin:clamp(3px,1vw,5px) 0}.hourly-temp{font-size:clamp(.95rem,2.5vw,1.1rem);margin-top:clamp(3px,1vw,4px)}.scroll-btn{width:clamp(24px,6vw,28px);height:clamp(24px,6vw,28px);min-width:clamp(24px,6vw,28px);border-radius:50%;font-size:clamp(16px,4vw,20px);margin:0 clamp(2px,1vw,4px)}.chart-section{border-radius:clamp(12px,3vw,15px);padding:clamp(8px,2vw,10px) clamp(6px,1.5vw,8px);margin-top:clamp(14px,3vw,18px)}.chart-container{height:clamp(90px,22vw,110px)}.no-data{padding:clamp(10px,2.5vw,12px)}.forecast-list{gap:clamp(6px,1.5vw,8px);margin-top:4px}.forecast-item{border-radius:clamp(10px,2vw,12px);padding:clamp(6px,1.5vw,8px) clamp(8px,2vw,10px);gap:clamp(6px,1.2vw,8px)}.forecast-day{min-width:clamp(38px,8vw,44px);font-size:clamp(11px,2vw,13px)}.forecast-icon{width:clamp(22px,5vw,26px);height:clamp(22px,5vw,26px);margin:0 clamp(10px,2.5vw,14px) 0 0}.forecast-condition{width:clamp(55px,12vw,62px);font-size:clamp(11px,2vw,13px);margin-left:clamp(-5px,-1.5vw,-7px)}.forecast-temp{min-width:clamp(38px,9vw,43px);font-size:clamp(.9rem,2.2vw,1rem)}.panel-title{font-size:clamp(.9rem,2.5vw,1rem);margin-bottom:clamp(4px,1.5vw,6px)}.sun-times{flex-direction:row;gap:clamp(8px,2vw,11px);margin-top:clamp(8px,2vw,10px);padding-top:clamp(6px,1.5vw,8px)}.sun-item{gap:clamp(6px,1.5vw,8px);flex:1}.sun-icon{width:clamp(16px,4vw,18px);height:clamp(16px,4vw,18px);margin-right:clamp(1px,.5vw,2px)}.sun-label{font-size:clamp(9px,1.8vw,10px)}.sun-time{font-size:clamp(11px,2vw,12px)}.uv-section{border-radius:clamp(12px,2.5vw,14px);padding:clamp(9px,2vw,11px) clamp(6px,1.5vw,8px);margin-top:clamp(10px,2.5vw,13px)}.uv-label{font-size:clamp(10px,1.8vw,11px);margin-bottom:clamp(4px,1vw,5px)}.uv-badge{padding:clamp(4px,1vw,5px) clamp(8px,2vw,10px);font-size:clamp(10px,1.8vw,11px);margin-bottom:clamp(5px,1.5vw,7px)}.uv-value{font-size:clamp(1.2rem,4vw,1.3rem);margin-bottom:clamp(4px,1vw,5px)}.uv-description{font-size:clamp(10px,1.8vw,11px)}.protection-img{height:clamp(20px,5vw,24px);width:clamp(20px,5vw,24px)}}@media(max-width:480px){.container{padding:0;max-width:100vw;min-height:90vh}.topbar{padding:clamp(6px,2vw,8px) clamp(6px,2vw,8px) clamp(2px,1vw,3px) clamp(6px,2vw,8px)}.brand{font-size:clamp(.95rem,4vw,1.05rem)}.left-panel,.middle-panel,.right-panel{border-radius:clamp(14px,4vw,18px);padding:clamp(5px,2vw,7px) clamp(1px,.5vw,1px) clamp(10px,3vw,14px) clamp(1px,.5vw,1px)}.forecast-item{padding:clamp(4px,1.5vw,6px) clamp(3px,1vw,4px);border-radius:clamp(7px,2vw,9px)}.forecast-day,.forecast-condition,.forecast-temp{font-size:clamp(10px,2vw,12px)}.forecast-icon{width:clamp(18px,4.5vw,21px);height:clamp(18px,4.5vw,21px)}.sun-times{flex-direction:column;gap:clamp(4px,1.5vw,6px)}.sun-item{gap:clamp(4px,1.2vw,5px)}.sun-icon{width:clamp(40px,3vw,13px);height:clamp(40px,3vw,13px)}.sun-label{font-size:clamp(15px,1.8vw,9px)}.sun-time{font-size:clamp(12px,2vw,11px)}}::-webkit-scrollbar{width:clamp(4px,.8vw,6px);height:clamp(4px,.8vw,6px)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}