.weather-display{display:flex;align-items:center;gap:28px;background:var(--gradient-glass);-webkit-backdrop-filter:var(--blur-medium);backdrop-filter:var(--blur-medium);border-radius:17px;padding:28px;border:1px solid var(--border-glass);box-shadow:var(--shadow-glass);animation:fadeInUp .6s ease-out;position:relative;margin-top:auto}.temperature{font-size:84px;font-weight:100;line-height:1;text-shadow:var(--shadow-text);transition:color .3s ease-in-out}.location-info{flex:1}.city-name{font-size:34px;font-weight:300;margin-bottom:8px;text-shadow:var(--shadow-text);letter-spacing:-.5px}.date-time{font-size:11px;color:var(--text-secondary);margin-bottom:6px;font-weight:300}.weather-condition{font-size:14px;color:var(--text-secondary);font-weight:400}.weather-icon{background:var(--glass-white-light);-webkit-backdrop-filter:var(--blur-light);backdrop-filter:var(--blur-light);border-radius:14px;padding:14px;border:1px solid var(--border-glass);display:flex;align-items:center;justify-content:center;min-width:84px;min-height:84px;margin-left:auto}.weather-icon img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.2))}@media (max-width: 1024px){.weather-display{padding:25px 20px;gap:25px}.temperature{font-size:76px}.city-name{font-size:29px}}@media (max-width: 900px){.weather-display{padding:22px 17px;gap:22px}.temperature{font-size:67px}.city-name{font-size:25px}}@media (max-width: 768px){.weather-display{flex-direction:column;text-align:center;gap:17px;padding:22px 17px}.temperature{font-size:67px;margin-bottom:11px}.city-name{font-size:25px;margin-bottom:6px}.date-time{font-size:10px;margin-bottom:3px}.weather-condition{font-size:13px}.weather-icon{min-width:70px;min-height:70px;padding:11px}.weather-icon img{width:45px;height:45px}}@media (max-width: 480px){.temperature{font-size:50px}.city-name{font-size:20px}.weather-display{padding:17px 14px;gap:14px}.weather-icon{min-width:56px;min-height:56px;padding:8px}.weather-icon img{width:39px;height:39px}}@media (min-width: 1200px){.weather-display{padding:34px;gap:34px}.temperature{font-size:98px}.city-name{font-size:36px}.weather-icon{min-width:98px;min-height:98px;padding:17px}.weather-icon img{width:67px;height:67px}}.loading{position:absolute;bottom:40px;left:40px;right:40px;font-size:24px;color:var(--text-primary);text-shadow:var(--shadow-text);background:var(--gradient-glass);-webkit-backdrop-filter:var(--blur-medium);backdrop-filter:var(--blur-medium);padding:24px 32px;border-radius:16px;border:1px solid var(--border-glass);box-shadow:var(--shadow-glass);text-align:center;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@media (max-width: 768px){.loading{bottom:20px;left:20px;right:20px;padding:20px 24px;font-size:20px}}@media (max-width: 480px){.loading{bottom:16px;left:16px;right:16px;padding:16px 20px;font-size:18px}}.error{position:absolute;bottom:28px;left:28px;right:28px;font-size:17px;color:var(--accent-red);text-shadow:var(--shadow-text);background:var(--gradient-glass);-webkit-backdrop-filter:var(--blur-medium);backdrop-filter:var(--blur-medium);padding:17px 22px;border-radius:11px;border:1px solid var(--border-glass);box-shadow:var(--shadow-glass);text-align:center;animation:fadeIn .3s ease-out;transition:opacity .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.error{bottom:14px;left:14px;right:14px;padding:14px 17px;font-size:14px}}@media (max-width: 480px){.error{bottom:11px;left:11px;right:11px;padding:11px 14px;font-size:13px}}.search-section{margin-bottom:28px}.search-form{display:flex;gap:8px}.search-input{flex:1;padding:11px 14px;border:1px solid var(--border-glass);border-radius:8px;background:var(--glass-white-light);-webkit-backdrop-filter:var(--blur-light);backdrop-filter:var(--blur-light);color:var(--text-primary);font-size:11px;outline:none;transition:all .3s cubic-bezier(.4,0,.2,1);font-weight:300}.search-input::placeholder{color:var(--text-muted)}.search-input:focus{border-color:var(--border-glass-strong);background:var(--glass-white);box-shadow:0 0 0 4px #ffffff1a;transform:translateY(-1px)}.search-button{padding:11px 14px;border:1px solid var(--border-glass);border-radius:8px;background:var(--glass-white);-webkit-backdrop-filter:var(--blur-light);backdrop-filter:var(--blur-light);color:var(--text-primary);cursor:pointer;font-size:13px;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:var(--shadow-glass);display:flex;align-items:center;justify-content:center;min-width:39px}.search-button:before{content:"⚲";font-size:13px}.search-button:hover{background:var(--glass-white-strong);border-color:var(--border-glass-strong);transform:translateY(-1px);box-shadow:var(--shadow-glass-strong)}@media (max-width: 768px){.search-form{gap:6px}.search-input{padding:10px 11px;font-size:11px}.search-button{padding:10px 11px;min-width:34px}}@media (max-width: 480px){.search-input{padding:8px 10px;font-size:11px}.search-button{padding:8px 10px;min-width:31px}}.popular-cities{margin-bottom:28px}.city-button{display:block;width:100%;padding:11px 14px;margin-bottom:8px;border:1px solid var(--border-glass);border-radius:8px;background:var(--glass-white-light);-webkit-backdrop-filter:var(--blur-light);backdrop-filter:var(--blur-light);color:var(--text-primary);font-size:11px;cursor:pointer;text-align:left;transition:all .3s cubic-bezier(.4,0,.2,1);font-weight:300;position:relative;overflow:hidden}.city-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s}.city-button:hover:before{left:100%}.city-button:hover{background:var(--glass-white);border-color:var(--border-glass-strong);transform:translate(4px);box-shadow:var(--shadow-glass)}.city-button:active{transform:translate(2px);transition:transform .1s}@media (max-width: 768px){.city-button{padding:10px 11px;font-size:11px}.popular-cities{margin-bottom:17px}}@media (max-width: 480px){.city-button{padding:8px 10px;font-size:10px;margin-bottom:6px}}.weather-details{background:var(--glass-white-light);-webkit-backdrop-filter:var(--blur-medium);backdrop-filter:var(--blur-medium);border-radius:11px;padding:17px;border:1px solid var(--border-glass);box-shadow:var(--shadow-glass);animation:fadeInUp .6s ease-out .2s both}.weather-details h3{font-size:14px;margin-bottom:17px;font-weight:400;color:var(--text-primary);text-shadow:var(--shadow-text)}.detail-item{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--border-glass);font-size:11px;transition:all .2s ease}.detail-item:last-child{border-bottom:none}.detail-item:hover{background:var(--glass-white-light);margin:0 -8px;padding:11px 8px;border-radius:6px}.detail-item span:first-child{color:var(--text-secondary);font-weight:300}.detail-item span:last-child{font-weight:500;color:var(--text-primary)}@media (max-width: 768px){.weather-details{padding:14px}.detail-item{padding:8px 0;font-size:11px}}@media (max-width: 480px){.weather-details{padding:11px}.weather-details h3{font-size:13px;margin-bottom:11px}.detail-item{padding:7px 0;font-size:10px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.supplementary-weather{display:flex;gap:14px;margin:0 auto 19px;justify-content:center;position:relative;z-index:3;flex-wrap:wrap;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--accent-blue) var(--glass-white-light);padding-top:70px}.weather-module-container{position:relative}.weather-module{background:var(--gradient-glass);-webkit-backdrop-filter:var(--blur-medium);backdrop-filter:var(--blur-medium);border-radius:11px;padding:14px;border:1px solid var(--border-glass);box-shadow:var(--shadow-glass);cursor:pointer;transition:all .3s ease;min-width:98px;text-align:center;position:relative;overflow:hidden}.weather-module.editing{background:var(--glass-white-strong);border-color:var(--accent-blue);transform:scale(1.05)}.weather-module:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s}.weather-module:hover:before{left:100%}.weather-module:hover:not(.editing){background:var(--glass-white);border-color:var(--border-glass-strong);transform:translateY(-2px);box-shadow:var(--shadow-glass-strong)}.module-loading,.module-error{font-size:9px;color:var(--text-muted);margin:8px 0;font-weight:300}.module-error{color:var(--accent-red)}.edit-popup{position:absolute;inset:0;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:11px;display:flex;align-items:center;justify-content:center;z-index:20}.popup-content{background:var(--gradient-glass);-webkit-backdrop-filter:var(--blur-medium);backdrop-filter:var(--blur-medium);border-radius:8px;padding:14px;border:1px solid var(--border-glass);box-shadow:var(--shadow-glass-strong);text-align:center;min-width:120px}.popup-content h4{font-size:11px;color:var(--text-primary);margin-bottom:8px;font-weight:500}.edit-input{width:100%;padding:6px 8px;border:1px solid var(--border-glass);border-radius:4px;background:var(--glass-white-light);color:var(--text-primary);font-size:10px;margin-bottom:8px;outline:none}.edit-input:focus{border-color:var(--accent-blue)}.popup-buttons{display:flex;gap:6px;justify-content:center}.save-btn,.cancel-btn{padding:4px 8px;border:none;border-radius:4px;font-size:9px;cursor:pointer;transition:all .3s ease}.save-btn{background:var(--accent-green);color:#fff}.save-btn:hover{background:#22c55e}.cancel-btn{background:var(--accent-red);color:#fff}.cancel-btn:hover{background:#ef4444}.module-city{font-size:11px;color:var(--text-secondary);margin-bottom:6px;font-weight:400}.module-temp{font-size:17px;color:var(--text-primary);margin-bottom:4px;font-weight:500}.module-condition{font-size:9px;color:var(--text-muted);margin-bottom:8px;font-weight:300}.module-icon{display:flex;justify-content:center;align-items:center}.module-icon img{width:28px;height:28px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}@media (max-width: 768px){.supplementary-weather{gap:10px;margin-bottom:15px;bottom:100px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--accent-blue) var(--glass-white-light);padding-top:90px}.weather-module{padding:10px;min-width:70px}.popup-content{padding:10px;min-width:100px}.module-city{font-size:10px;margin-bottom:4px}.module-temp{font-size:15px;margin-bottom:3px}.module-condition{font-size:8px;margin-bottom:6px}.module-icon img{width:24px;height:24px}}@media (max-width: 480px){.supplementary-weather{gap:8px;margin-bottom:12px;bottom:80px;flex-wrap:nowrap;overflow-x:auto;padding-top:110px}.weather-module{padding:8px;min-width:60px}.popup-content{padding:8px;min-width:90px}.module-city{font-size:9px;margin-bottom:3px}.module-temp{font-size:13px;margin-bottom:2px}.module-condition{font-size:7px;margin-bottom:5px}.module-icon img{width:20px;height:20px}}:root{--glass-white: rgba(255, 255, 255, .25);--glass-white-light: rgba(255, 255, 255, .1);--glass-white-strong: rgba(255, 255, 255, .4);--text-primary: rgba(255, 255, 255, .95);--text-secondary: rgba(255, 255, 255, .8);--text-muted: rgba(255, 255, 255, .6);--accent-blue: rgba(59, 130, 246, .6);--accent-blue-hover: rgba(59, 130, 246, .8);--accent-red: rgba(239, 68, 68, .8);--accent-green: rgba(34, 197, 94, .8);--temp-hot: rgba(239, 68, 68, .9);--temp-warm: rgba(245, 158, 11, .9);--temp-cool: rgba(59, 130, 246, .9);--temp-cold: rgba(99, 102, 241, .9);--border-glass: rgba(255, 255, 255, .2);--border-glass-strong: rgba(255, 255, 255, .3);--shadow-glass: 0 8px 32px rgba(0, 0, 0, .1);--shadow-glass-strong: 0 12px 40px rgba(0, 0, 0, .15);--shadow-text: 0 2px 8px rgba(0, 0, 0, .3);--blur-light: blur(2px);--blur-medium: blur(4px);--blur-strong: blur(12px);--gradient-glass: linear-gradient(135deg, rgba(139, 177, 182, .3), rgba(255, 255, 255, .1));--gradient-overlay: linear-gradient(135deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .3))}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden;font-weight:400}.weather-app{display:flex;height:100vh;width:100vw;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;overflow-x:hidden;transition:background-image .8s ease-in-out}.weather-app:before{content:"";position:absolute;inset:0;background:var(--gradient-overlay);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1}.main-weather{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;padding:28px;color:var(--text-primary);position:relative;z-index:2}.app-title{font-size:20px;font-weight:300;margin-bottom:38px;text-shadow:var(--shadow-text);letter-spacing:.5px;text-align:center}.sidebar{width:294px;min-width:224px;max-width:100%;background:var(--gradient-glass);-webkit-backdrop-filter:var(--blur-strong);backdrop-filter:var(--blur-strong);padding:28px 21px;color:var(--text-primary);position:relative;z-index:2;overflow-y:auto;border-left:1px solid var(--border-glass);box-shadow:var(--shadow-glass-strong);flex-shrink:0}.sidebar::-webkit-scrollbar{width:4px}.sidebar::-webkit-scrollbar-track{background:var(--glass-white-light);border-radius:2px}.sidebar::-webkit-scrollbar-thumb{background:var(--glass-white);border-radius:2px}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--glass-white-strong)}.search-input:focus,.search-button:focus,.city-button:focus{outline:2px solid var(--accent-blue);outline-offset:2px}@media (max-width: 1024px){.sidebar{width:266px;padding:22px 17px}}@media (max-width: 900px){.sidebar{width:238px;padding:20px 14px}}@media (max-width: 768px){.weather-app{flex-direction:column}.main-weather{flex:none;height:65vh;padding:17px 14px;justify-content:flex-end}.sidebar{width:100%;height:35vh;padding:14px;border-left:none;border-top:1px solid var(--border-glass);-webkit-backdrop-filter:var(--blur-strong);backdrop-filter:var(--blur-strong)}}@media (max-width: 480px){.main-weather{padding:14px 11px;height:70vh;justify-content:flex-end}.sidebar{height:30vh;padding:11px;width:100%;min-width:auto}.app-title{font-size:17px;margin-bottom:11px}}@media (min-width: 1200px){.sidebar{width:308px;padding:34px 25px}}