*{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}body{color:#333;background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);width:100%;min-height:100vh;margin:0;padding:0;transition:background .3s,color .3s;overflow-x:scroll}body.dark-mode{color:#fff;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%)}.app{width:100%;min-height:100vh;display:flex}.sidebar{color:#fff;z-index:1000;background:linear-gradient(#2c3e50 0%,#1a252f 100%);flex-direction:column;width:250px;height:100vh;padding:30px 20px;transition:width .3s;display:flex;position:fixed;top:0;left:0;overflow-y:auto}.logo{align-items:center;gap:10px;margin-bottom:40px;font-size:24px;font-weight:700;display:flex}.logo svg{color:#3498db}.nav-section h3{text-transform:uppercase;color:#7f8c8d;letter-spacing:1px;margin:25px 0 15px;font-size:14px}.nav-links{margin:0;padding:0;list-style:none}.nav-links li{cursor:pointer;border-radius:10px;align-items:center;gap:12px;width:100%;margin-bottom:8px;padding:12px 15px;transition:all .3s;display:flex}.nav-links li:hover,.nav-links li.active{color:#3498db;background:#3498db33}.nav-links li svg{flex-shrink:0;width:20px}hr{background:#ffffff1a;border:none;height:1px;margin:20px 0}.api-status{background:#ffffff1a;border-radius:10px;margin-top:auto;padding:15px;font-size:12px}.status-indicator{border-radius:50%;width:8px;height:8px;margin-right:8px;display:inline-block}.status-connected{background:#2ecc71;animation:2s infinite pulse}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.main-content{flex:1;width:calc(100% - 250px);min-height:100vh;margin-left:250px;padding:30px;transition:all .3s}.header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:20px;width:100%;margin-bottom:30px;display:flex}.header-left{flex:1;min-width:300px}.header-left h1{margin-bottom:8px;font-size:32px;font-weight:700;line-height:1.2}.date-time{color:#7f8c8d;flex-wrap:wrap;align-items:center;gap:20px;font-size:16px;display:flex}.current-month{color:#2c3e50;font-size:24px;font-weight:600}body.dark-mode .current-month{color:#fff}.search-container{gap:15px;width:100%;margin-bottom:30px;display:flex;position:relative}.search-form{flex:1;gap:15px;min-width:300px;display:flex}.search-input-wrapper{flex:1;min-width:200px;position:relative}.search-input-group{background:#fff;border:2px solid #e0e6ed;border-radius:15px;flex:1;align-items:center;gap:12px;width:100%;padding:0 20px;transition:all .3s;display:flex;position:relative}body.dark-mode .search-input-group{background:#ffffff1a;border-color:#fff3}.search-input-group:focus-within{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.search-icon{color:#7f8c8d;flex-shrink:0}.search-input{color:#333;background:0 0;border:none;outline:none;flex:1;width:100%;min-width:150px;padding:15px 0;font-size:16px}body.dark-mode .search-input{color:#fff}.search-input::placeholder{color:#95a5a6}.clear-search-btn{color:#95a5a6;cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;padding:4px;transition:all .2s;display:flex}.clear-search-btn:hover{color:#e74c3c;background:#e74c3c1a}.suggestions-dropdown{z-index:1000;background:#fff;border-radius:15px;width:100%;max-height:400px;animation:.2s ease-out slideDown;position:absolute;top:calc(100% + 5px);left:0;right:0;overflow:hidden auto;box-shadow:0 10px 40px #00000026}body.dark-mode .suggestions-dropdown{background:#2c3e50;box-shadow:0 10px 40px #0000004d}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.suggestions-header{background:#f8f9fa;border-bottom:1px solid #e9ecef;justify-content:space-between;align-items:center;width:100%;padding:12px 16px;display:flex}body.dark-mode .suggestions-header{background:#34495e;border-bottom-color:#2c3e50}.suggestions-title{color:#7f8c8d;text-transform:uppercase;letter-spacing:1px;align-items:center;gap:8px;font-size:12px;font-weight:600;display:flex}.clear-history-btn{color:#e74c3c;cursor:pointer;white-space:nowrap;background:#e74c3c1a;border:none;border-radius:6px;padding:4px 12px;font-size:11px;font-weight:600;transition:all .2s}.clear-history-btn:hover{background:#e74c3c33}.suggestions-list{width:100%;padding:8px 0}.suggestion-item{text-align:left;cursor:pointer;background:0 0;border:none;border-bottom:1px solid #f8f9fa;justify-content:space-between;align-items:center;width:100%;padding:12px 16px;transition:all .2s;display:flex}body.dark-mode .suggestion-item{border-bottom-color:#34495e}.suggestion-item:last-child{border-bottom:none}.suggestion-item:hover{background:#f8f9fa}body.dark-mode .suggestion-item:hover{background:#34495e}.suggestion-item.current{background:#3498db1a}body.dark-mode .suggestion-item.current{background:#3498db33}.suggestion-content{flex:1;align-items:center;gap:10px;min-width:0;display:flex}.suggestion-text{color:#2c3e50;white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:500;overflow:hidden}body.dark-mode .suggestion-text{color:#fff}.current-badge{color:#fff;background:#3498db;border-radius:10px;flex-shrink:0;margin-left:8px;padding:2px 8px;font-size:10px;font-weight:600}.history-icon{color:#95a5a6;flex-shrink:0}.suggestions-footer{color:#7f8c8d;background:#f8f9fa;border-top:1px solid #e9ecef;align-items:center;gap:8px;width:100%;padding:12px 16px;font-size:12px;display:flex}body.dark-mode .suggestions-footer{background:#34495e;border-top-color:#2c3e50}.search-btn{color:#fff;cursor:pointer;background:#3498db;border:none;border-radius:15px;justify-content:center;align-self:center;align-items:center;gap:10px;min-width:120px;height:fit-content;padding:15px 30px;font-size:16px;font-weight:600;transition:all .3s;display:flex}.search-btn:hover:not(:disabled){background:#2980b9;transform:translateY(-2px);box-shadow:0 5px 15px #3498db4d}.search-btn:disabled{opacity:.6;cursor:not-allowed}.location-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#2ecc71,#27ae60);border:none;border-radius:15px;justify-content:center;align-self:center;align-items:center;gap:10px;min-width:140px;height:fit-content;padding:15px 25px;font-size:16px;font-weight:600;transition:all .3s;display:flex;box-shadow:0 4px 15px #2ecc714d}.location-btn:hover:not(:disabled){background:linear-gradient(135deg,#27ae60,#219653);transform:translateY(-2px);box-shadow:0 6px 20px #2ecc7166}.location-btn:disabled{opacity:.6;cursor:not-allowed}.spin{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.dashboard-controls{flex-wrap:wrap;gap:10px;width:100%;margin-bottom:30px;display:flex}.control-btn{color:#2c3e50;cursor:pointer;white-space:nowrap;background:#fff;border:none;border-radius:10px;align-items:center;gap:8px;padding:12px 20px;font-size:14px;font-weight:600;transition:all .3s;display:flex;box-shadow:0 2px 8px #0000001a}.control-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.dashboard-grid{grid-template-columns:repeat(3,1fr);gap:25px;width:100%;margin-bottom:30px;display:grid}.card{background:#fff;border-radius:20px;width:100%;height:fit-content;padding:25px;transition:transform .3s,box-shadow .3s,background .3s;animation:.5s ease-out fadeIn;box-shadow:0 10px 30px #00000014}body.dark-mode .card{background:#ffffff1a;box-shadow:0 10px 30px #0003}.card:hover{transform:translateY(-5px);box-shadow:0 15px 40px #00000026}.card-large{grid-column:span 2}.card-full{grid-column:span 3}.card-title{align-items:center;gap:10px;width:100%;margin-bottom:20px;font-size:18px;font-weight:600;display:flex}body.dark-mode .card-title{color:#fff}.card-title svg{color:#3498db;flex-shrink:0}.current-weather{flex-direction:column;gap:20px;width:100%;display:flex}.weather-main{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;width:100%;display:flex}.temp-display{flex:1;align-items:flex-start;gap:10px;min-width:200px;display:flex}.temp-value{min-width:120px;font-size:64px;font-weight:300;line-height:1}body.dark-mode .temp-value{color:#fff}.weather-icon{align-items:center;display:flex}.weather-icon svg{color:#3498db;width:60px;height:60px}.weather-condition{color:#7f8c8d;text-align:right;flex:1;min-width:200px;font-size:20px;font-weight:500}.weather-details-grid{grid-template-columns:repeat(2,1fr);gap:15px;width:100%;margin-top:20px;display:grid}.detail-item{background:#3498db1a;border-radius:15px;width:100%;padding:15px;transition:background .3s}.detail-label{color:#7f8c8d;text-transform:uppercase;letter-spacing:1px;align-items:center;gap:8px;width:100%;margin-bottom:5px;font-size:12px;display:flex}.detail-label svg{flex-shrink:0;width:16px;height:16px}.detail-value{color:#2c3e50;width:100%;font-size:20px;font-weight:700}body.dark-mode .detail-value{color:#fff}.feels-like{color:#7f8c8d;border-top:1px solid #0000001a;width:100%;margin-top:20px;padding-top:20px;font-size:14px}body.dark-mode .feels-like{border-top-color:#ffffff1a}.forecast-chart{flex-direction:column;width:100%;height:100%;display:flex}.chart-container{flex:1;width:100%;min-height:200px;margin:20px 0}.forecast-days{grid-template-columns:repeat(5,1fr);gap:15px;width:100%;margin-top:20px;display:grid}.forecast-day{text-align:center;background:#3498db0d;border-radius:15px;width:100%;padding:15px;transition:background .3s}body.dark-mode .forecast-day,.forecast-day:hover{background:#3498db1a}.forecast-day-name{color:#7f8c8d;text-transform:uppercase;letter-spacing:1px;width:100%;margin-bottom:10px;font-size:14px}.forecast-day-icon{justify-content:center;align-items:center;width:100%;margin:10px 0;display:flex}.forecast-day-icon svg{color:#3498db;width:40px;height:40px}.forecast-temps{justify-content:center;gap:10px;width:100%;margin:10px 0;display:flex}.max-temp{color:#2c3e50;font-weight:700}body.dark-mode .max-temp{color:#fff}.min-temp{color:#7f8c8d}.rain-chance{color:#3498db;width:100%;font-size:12px;font-weight:600}.hourly-forecast{flex-direction:column;gap:20px;width:100%;display:flex}.hourly-grid{grid-template-columns:repeat(4,1fr);gap:15px;width:100%;display:grid}.hour-item{text-align:center;background:#3498db0d;border-radius:15px;width:100%;padding:15px;transition:background .3s}body.dark-mode .hour-item,.hour-item:hover{background:#3498db1a}.hour-time{color:#7f8c8d;width:100%;margin-bottom:8px;font-size:14px}.hour-icon{justify-content:center;align-items:center;width:100%;margin:8px 0;display:flex}.hour-icon svg{color:#3498db;width:30px;height:30px}.hour-temp{color:#2c3e50;width:100%;margin:8px 0;font-size:18px;font-weight:600}body.dark-mode .hour-temp{color:#fff}.hour-rain{color:#3498db;width:100%;font-size:12px;font-weight:600}.sun-info{color:#fff;background:linear-gradient(135deg,#f39c12,#e74c3c);border-radius:15px;justify-content:space-around;width:100%;padding:20px;font-weight:600;display:flex}.sunrise,.sunset{align-items:center;gap:10px;display:flex}.map-container{background:#1a252f;border-radius:15px;width:100%;height:350px;margin:15px 0;position:relative;overflow:hidden}.map-background{background-position:50%;background-size:cover;width:100%;height:100%;transition:transform .3s;position:absolute;top:0;left:0}.map-pin.current-location .pin-icon.current{color:#ff6b6b;animation:2s infinite pulse}.map-pin.current-location:hover .pin-icon.current{color:#ff3838}.pin-label .pin-coordinates{color:#7f8c8d;margin-top:2px;font-family:monospace;font-size:10px}.location-indicator{z-index:5;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.location-indicator svg{color:#ff6b6b;animation:2s infinite pulse}.pulse-ring{border:2px solid #ff6b6b;border-radius:50%;width:40px;height:40px;animation:2s infinite ringPulse;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes ringPulse{0%{opacity:1;width:20px;height:20px}to{opacity:0;width:60px;height:60px}}.legend-color.current{background:#ff6b6b}.pin-btn:disabled{opacity:.6;cursor:not-allowed}.location-details{background:#3498db1a;border-radius:12px;width:100%;margin-top:20px;padding:15px;animation:.3s slideIn}body.dark-mode .location-details{background:#ffffff0d}.location-details h4{color:#2c3e50;align-items:center;gap:8px;width:100%;margin-bottom:12px;display:flex}body.dark-mode .location-details h4{color:#fff}.details-grid{grid-template-columns:repeat(2,1fr);gap:10px;width:100%;display:grid}.detail-item{background:#fff;border-radius:8px;justify-content:space-between;align-items:center;width:100%;padding:8px 12px;display:flex}body.dark-mode .detail-item{background:#ffffff1a}.detail-item .label{color:#7f8c8d;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;font-size:12px}.detail-item .value{color:#2c3e50;white-space:nowrap;text-overflow:ellipsis;margin-left:10px;font-size:14px;font-weight:600;overflow:hidden}body.dark-mode .detail-item .value{color:#fff}.detail-item .value.link{color:#3498db;text-decoration:none;transition:color .3s}.detail-item .value.link:hover{color:#2980b9;text-decoration:underline}.pin-btn img{filter:brightness(0)invert()}body.dark-mode .pin-btn.secondary img{filter:brightness(0)invert(.8)}.pin-btn.secondary:hover img{filter:brightness(0)invert()}.pin-controls{grid-template-columns:repeat(5,1fr);gap:10px;width:100%;margin-top:15px;display:grid}.map-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;width:100%;margin-bottom:15px;display:flex}.map-title{color:#2c3e50;flex:1;align-items:center;gap:10px;min-width:200px;font-size:18px;font-weight:600;display:flex}body.dark-mode .map-title{color:#fff}.map-zoom-controls{background:#ffffffe6;border-radius:20px;flex-shrink:0;align-items:center;gap:8px;padding:6px 12px;display:flex;box-shadow:0 2px 8px #0000001a}body.dark-mode .map-zoom-controls{background:#0009;box-shadow:0 2px 8px #0000004d}.grid-line{background:#ffffff1a;position:absolute}.grid-line.horizontal{width:100%;height:1px;left:0}.grid-line.vertical{width:1px;height:100%;top:0}.weather-overlay{pointer-events:none;width:100%;height:100%;position:absolute}.cloud,.sun,.rain-area{font-size:24px;animation:6s ease-in-out infinite float;position:absolute}.sun{animation:2s ease-in-out infinite pulse}.rain-area{animation:3s ease-in-out infinite rain}@keyframes float{0%,to{transform:translate(-50%, -50%) scale(var(--scale,1)) translateY(0)}50%{transform:translate(-50%, -50%) scale(var(--scale,1)) translateY(-5px)}}@keyframes rain{0%,to{opacity:.5;transform:translateY(0)}50%{opacity:1;transform:translateY(10px)}}.map-pin{cursor:pointer;z-index:10;transition:all .3s;position:absolute}.map-pin:hover{z-index:20;transform:translate(-50%,-100%)scale(1.2)!important}.pin-icon{color:#e74c3c;filter:drop-shadow(0 2px 4px #0000004d);transition:all .3s}.map-pin:hover .pin-icon{color:#ff6b6b;transform:scale(1.2)}.pin-label{white-space:nowrap;opacity:0;visibility:hidden;background:#fff;border-radius:8px;min-width:120px;max-width:200px;padding:8px 12px;transition:all .3s;position:absolute;top:-5px;left:50%;transform:translate(-50%)translateY(-100%);box-shadow:0 4px 12px #0003}body.dark-mode .pin-label{color:#fff;background:#2c3e50}.map-pin:hover .pin-label{opacity:1;visibility:visible;transform:translate(-50%)translateY(-120%)}.pin-name{text-overflow:ellipsis;margin-bottom:2px;font-size:12px;font-weight:600;overflow:hidden}.pin-temp{color:#3498db;font-size:11px;font-weight:600}.map-overlay-info{justify-content:space-between;align-items:flex-end;width:calc(100% - 30px);display:flex;position:absolute;bottom:15px;left:15px;right:15px}.coordinates{color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000000b3;border-radius:8px;flex-shrink:0;padding:8px 12px;font-family:monospace;font-size:11px}.weather-legend{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffffe6;border-radius:8px;flex-wrap:wrap;gap:15px;padding:8px 12px;display:flex}body.dark-mode .weather-legend{color:#fff;background:#000000b3}.legend-item{white-space:nowrap;align-items:center;gap:6px;font-size:11px;display:flex}.legend-color.sun{background:#f39c12}.legend-color.cloud{background:#95a5a6}.legend-color.rain{background:#3498db}.calendar-container{width:100%;margin:20px 0}.calendar-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;width:100%;margin-bottom:20px;display:flex}.calendar-header h3{flex:1;min-width:200px;font-size:18px;font-weight:600}body.dark-mode .calendar-header h3{color:#fff}.calendar-nav{flex-shrink:0;gap:10px;display:flex}.calendar-nav-btn{cursor:pointer;color:#2c3e50;white-space:nowrap;background:#ecf0f1;border:none;border-radius:8px;padding:8px 15px;transition:all .3s}body.dark-mode .calendar-nav-btn{color:#fff;background:#ffffff1a}.calendar-nav-btn:hover{color:#fff;background:#3498db}.calendar-grid{grid-template-columns:repeat(7,1fr);gap:8px;width:100%;display:grid}.calendar-day-header{text-align:center;color:#7f8c8d;padding:10px;font-size:14px;font-weight:600}.calendar-day{text-align:center;cursor:pointer;aspect-ratio:1;background:#f8f9fa;border-radius:10px;justify-content:center;align-items:center;width:100%;padding:12px 8px;transition:all .3s;display:flex}body.dark-mode .calendar-day{background:#ffffff0d}.calendar-day:hover{color:#fff;background:#3498db}.calendar-day.today{color:#fff;background:#3498db;font-weight:600}.calendar-day.selected{color:#fff;background:#2ecc71;font-weight:600}.calendar-day.other-month{color:#bdc3c7}.stats-grid{grid-template-columns:repeat(3,1fr);gap:15px;width:100%;margin:20px 0;display:grid}.stat-card{text-align:center;background:#3498db1a;border-radius:15px;width:100%;padding:20px;transition:background .3s}body.dark-mode .stat-card,.stat-card:hover{background:#3498db33}.stat-value{color:#2c3e50;width:100%;margin-bottom:5px;font-size:28px;font-weight:700}body.dark-mode .stat-value{color:#fff}.stat-label{color:#7f8c8d;text-transform:uppercase;letter-spacing:1px;width:100%;font-size:12px}.locations-list{flex-direction:column;gap:12px;width:100%;display:flex}.location-item{cursor:pointer;background:#3498db0d;border-left:4px solid #3498db;border-radius:15px;justify-content:space-between;align-items:center;width:100%;padding:15px;transition:all .3s;display:flex}body.dark-mode .location-item{background:#3498db1a}.location-item:hover{background:#3498db1a;transform:translate(5px)}.location-name-small{color:#2c3e50;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:600;overflow:hidden}body.dark-mode .location-name-small{color:#fff}.location-distance{color:#7f8c8d;flex-shrink:0;margin-left:10px;font-size:14px}.radar-card{width:100%}.radar-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:15px;width:100%;margin-bottom:20px;display:flex}.radar-title{flex:1;align-items:center;gap:10px;min-width:200px;display:flex}.radar-title-text{flex-direction:column;gap:4px;width:100%;display:flex}.radar-title-text span:first-child{color:#2c3e50;font-size:18px;font-weight:600}body.dark-mode .radar-title-text span:first-child{color:#fff}.radar-location{color:#7f8c8d;align-items:center;gap:5px;width:100%;font-size:14px;display:flex}.radar-time{background:#3498db1a;border-radius:20px;flex-shrink:0;align-items:center;gap:8px;padding:8px 16px;display:flex}body.dark-mode .radar-time{background:#ffffff1a}.time-label{color:#7f8c8d;text-transform:uppercase;letter-spacing:1px;font-size:12px}.time-value{color:#2c3e50;font-size:14px;font-weight:600}body.dark-mode .time-value{color:#fff}.radar-container{background:#1a252f;border-radius:15px;width:100%;height:300px;margin:20px 0;position:relative;overflow:hidden}.radar-background{background:linear-gradient(135deg,#0c2461 0%,#1e3799 100%);width:100%;height:100%;position:absolute;top:0;left:0}.radar-circle{border:1px solid #ffffff1a;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.circle-1{width:200px;height:200px}.circle-2{width:300px;height:300px}.circle-3{width:400px;height:400px}.circle-4{width:500px;height:500px}.radar-sweep{transform-origin:50%;clip-path:polygon(50% 50%,50% 0%,100% 0%,100% 100%,0% 100%,0% 0%,50% 0%);background:linear-gradient(90deg,#0000 0%,#2ecc711a 50%,#0000 100%);border-top:2px solid #2ecc71cc;border-radius:50%;width:250px;height:250px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(0)}.radar-sweep.playing{animation:4s linear infinite radarSweep}@keyframes radarSweep{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}.compass{border:2px solid #fff3;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:60px;height:60px;display:flex;position:absolute;top:20px;right:20px}.compass span{color:#fff;font-size:12px;font-weight:600;position:absolute}.compass .north{top:-20px;left:50%;transform:translate(-50%)}.compass .east{top:50%;right:-20px;transform:translateY(-50%)}.compass .south{bottom:-20px;left:50%;transform:translate(-50%)}.compass .west{top:50%;left:-20px;transform:translateY(-50%)}.precipitation-cell{filter:blur(2px);animation:3s ease-in-out infinite float;animation-delay:calc(var(--i,0) * .1s);border-radius:50%;position:absolute}.center-marker{color:#e74c3c;z-index:10;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.zoom-indicator{color:#fff;background:#000000b3;border-radius:20px;flex-shrink:0;padding:6px 12px;font-size:12px;font-weight:600;position:absolute;bottom:20px;left:20px}.precipitation-legend{background:#000000b3;border-radius:10px;flex-wrap:wrap;gap:15px;padding:10px 15px;display:flex;position:absolute;bottom:20px;right:20px}.legend-item{color:#fff;white-space:nowrap;align-items:center;gap:6px;font-size:12px;display:flex}.legend-color{border-radius:50%;flex-shrink:0;width:12px;height:12px}.legend-color.light{background:#1c5a7a}.legend-color.moderate{background:#2980b9}.legend-color.heavy{background:#3498db}.radar-controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:15px;width:100%;margin:20px 0;display:flex}.control-group{flex-wrap:wrap;gap:10px;display:flex}.control-btn{color:#2c3e50;cursor:pointer;white-space:nowrap;background:#3498db1a;border:none;border-radius:10px;align-items:center;gap:8px;padding:10px 16px;font-size:14px;font-weight:600;transition:all .3s;display:flex}body.dark-mode .control-btn{color:#fff;background:#ffffff1a}.control-btn:hover{color:#fff;background:#3498db;transform:translateY(-2px)}.control-btn.active{color:#fff;background:#3498db}.control-btn.secondary{background:#95a5a61a}body.dark-mode .control-btn.secondary{background:#ffffff0d}.control-btn.secondary:hover{color:#fff;background:#95a5a6}.radar-info{border-top:1px solid #0000001a;grid-template-columns:repeat(3,1fr);gap:15px;width:100%;margin-top:20px;padding-top:20px;display:grid}body.dark-mode .radar-info{border-top-color:#ffffff1a}.info-item{text-align:center;background:#3498db0d;border-radius:10px;width:100%;padding:12px}body.dark-mode .info-item{background:#ffffff0d}.info-label{color:#7f8c8d;text-transform:uppercase;letter-spacing:1px;width:100%;margin-bottom:4px;font-size:11px;display:block}.info-value{color:#2c3e50;width:100%;font-size:13px;font-weight:600;display:block}body.dark-mode .info-value{color:#fff}.monthly-chart-container{width:100%;height:200px;margin:20px 0}.error-message{color:#fff;text-align:center;background:#e74c3c;border-radius:10px;width:100%;margin-bottom:20px;padding:15px;animation:.3s ease-out slideIn}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.loader{text-align:center;flex-direction:column;align-items:center;gap:20px;width:100%;padding:40px;display:flex}.spinner{border:4px solid #ffffff4d;border-top-color:#3498db;border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}.loading-screen{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);flex-direction:column;justify-content:center;align-items:center;gap:20px;width:100%;min-height:100vh;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.card{animation:.5s ease-out fadeIn}@media (width<=1200px){.dashboard-grid{grid-template-columns:repeat(2,1fr)}.card-large,.card-full{grid-column:span 2}.forecast-days{grid-template-columns:repeat(3,1fr)}.hourly-grid,.stats-grid{grid-template-columns:repeat(2,1fr)}.pin-controls{grid-template-columns:repeat(3,1fr)}}@media (width<=992px){.sidebar{width:70px;padding:20px 10px}.sidebar span:not(.logo-text),.nav-section h3{display:none}.main-content{width:calc(100% - 70px);margin-left:70px;padding:20px}.logo-text{display:none}.hourly-grid,.forecast-days,.pin-controls{grid-template-columns:repeat(2,1fr)}.temp-value{font-size:56px}.weather-condition{font-size:18px}}@media (width<=768px){.main-content{padding:15px}.dashboard-grid{grid-template-columns:1fr;gap:20px}.card-large,.card-full{grid-column:span 1}.header{flex-direction:column;align-items:flex-start;gap:15px}.search-container{flex-direction:column}.search-form{flex-direction:column;min-width:100%}.search-input-wrapper{width:100%}.search-btn,.location-btn{justify-content:center;width:100%}.suggestions-dropdown{max-height:300px}.dashboard-controls{padding-bottom:10px;overflow-x:auto}.hourly-grid,.forecast-days,.stats-grid,.pin-controls{grid-template-columns:repeat(2,1fr)}.details-grid{grid-template-columns:1fr}.weather-main{flex-direction:column;align-items:flex-start}.weather-condition{text-align:left}.temp-value{font-size:48px}.weather-details-grid{grid-template-columns:1fr}.pin-btn{min-width:100%}.calendar-header{flex-direction:column;align-items:flex-start;gap:15px}.calendar-nav{justify-content:space-between;width:100%}.radar-header{flex-direction:column;align-items:flex-start}.radar-time{align-self:flex-start}.radar-controls{flex-direction:column;align-items:stretch}.control-group{justify-content:center}.radar-info{grid-template-columns:repeat(2,1fr)}.compass{width:50px;height:50px;top:15px;right:15px}.zoom-indicator,.precipitation-legend{padding:4px 8px;font-size:11px}}@media (width<=576px){.calendar-grid{grid-template-columns:repeat(7,1fr);gap:5px}.calendar-day{padding:10px 5px;font-size:14px}.stats-grid{grid-template-columns:1fr}.search-form{flex-direction:column}.temp-value{font-size:42px}.weather-condition,.card-title{font-size:16px}.card{padding:20px}.forecast-days{grid-template-columns:1fr}.hourly-grid{grid-template-columns:repeat(2,1fr)}.pin-controls{grid-template-columns:1fr}}@media (width<=480px){.search-input-group{padding:0 15px}.search-input{font-size:14px}.search-btn,.location-btn{padding:12px 20px;font-size:14px}.radar-info{grid-template-columns:1fr}.control-group{flex-wrap:wrap;justify-content:center}.control-btn{flex:1;justify-content:center;min-width:120px}.temp-value{font-size:36px}.detail-value{font-size:18px}.hourly-grid,.weather-details-grid{grid-template-columns:1fr}}@media (width<=375px){.main-content{padding:10px}.sidebar{width:60px;padding:15px 8px}.main-content{width:calc(100% - 60px);margin-left:60px}.header-left h1{font-size:24px}.current-month{font-size:18px}.date-time{flex-direction:column;align-items:flex-start;gap:5px}.temp-value{font-size:32px}.card-title{font-size:14px}.card{padding:15px}.pin-controls .control-btn,.dashboard-controls .control-btn{padding:10px 12px;font-size:12px}.search-btn,.location-btn{padding:10px 15px;font-size:13px}}