.app-container{max-width:1440px;margin:0 auto;padding:0 40px 40px}.main-content{display:grid;grid-template-columns:1fr 340px;gap:32px;margin-top:32px}.weather-overview{display:flex;flex-direction:column}.status-msg{text-align:center;padding:40px;font-size:20px;color:var(--neutral-300)}.status-msg.error{color:#ff5252}@media (max-width: 1023px){.app-container{padding:0 20px 20px}.main-content{grid-template-columns:1fr}}.main-header{display:flex;justify-content:space-between;align-items:center;padding:24px 0}.logo{display:flex;align-items:center;gap:12px}.logo span{font-family:var(--font-heading);font-weight:700;font-size:20px}.units-btn{background:var(--neutral-800);border:1px solid var(--neutral-700);border-radius:8px;color:#fff;padding:8px 16px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:all .2s}.units-btn:hover{border-color:var(--neutral-600);background:var(--neutral-700)}.chevron{width:12px;height:12px;transition:transform .2s}.chevron.rotated{transform:rotate(180deg)}.units-selector{position:relative}.units-dropdown{position:absolute;top:calc(100% + 12px);right:0;background:var(--neutral-800);border:1px solid var(--neutral-700);border-radius:12px;width:240px;padding:16px;z-index:100;box-shadow:0 10px 30px #00000080}.switch-all-btn{width:100%;background:transparent;border:1px solid var(--neutral-700);border-radius:8px;color:#fff;padding:8px;margin-bottom:20px;cursor:pointer}.dropdown-section{margin-bottom:16px}.dropdown-section h4{color:var(--neutral-300);font-size:14px;margin-bottom:8px}.option{padding:8px 12px;border-radius:6px;font-size:15px;display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.option.selected{background:var(--neutral-700)}.option.selected:after{content:"✓";font-size:12px}.search-section{text-align:center;margin:64px 0}.search-section h1{font-size:56px;margin-bottom:48px;line-height:1.1}.search-form{display:flex;justify-content:center;gap:16px;max-width:600px;margin:0 auto}.input-wrapper{position:relative;flex:1}.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);opacity:.5}.input-wrapper input{width:100%;background:var(--neutral-800);border:2px solid transparent;border-radius:12px;color:#fff;padding:16px 16px 16px 48px;font-size:18px;transition:all .2s}.input-wrapper input:focus{outline:none;border-color:var(--blue-500);background:var(--neutral-700);box-shadow:0 0 15px #5d6eff4d}.suggestions-list{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--neutral-800);border:1px solid var(--neutral-700);border-radius:12px;overflow:hidden;z-index:50;box-shadow:0 4px 20px #0006;text-align:left}.suggestion-item{padding:12px 16px;cursor:pointer;transition:background .2s;color:var(--neutral-200)}.suggestion-item:hover{background:var(--neutral-700);color:#fff}.search-btn{background:var(--blue-500);color:#fff;border:none;border-radius:12px;padding:0 32px;font-weight:600;font-size:18px;cursor:pointer;transition:background .2s}.search-btn:hover{background:var(--blue-700)}@media (max-width: 768px){.search-section h1{font-size:32px}.search-form{flex-direction:column}}.weather-card{background:linear-gradient(135deg,#3f51b5,#2196f3),url(/assets/bg-today-large-CqYszFxp.svg);background-size:cover;background-blend-mode:overlay;border-radius:24px;padding:40px;min-height:280px;margin-bottom:24px}.weather-info{display:flex;justify-content:space-between;align-items:center;width:100%}.location-date{display:flex;flex-direction:column}.weather-card h2{font-size:32px;margin-bottom:8px}.date{font-size:18px;opacity:.8;margin-bottom:24px}.temp-display{display:flex;align-items:center;gap:32px}.weather-large-icon{width:120px;height:120px}.temperature{font-size:112px;font-weight:700;font-family:var(--font-heading);line-height:1}@media (max-width: 768px){.weather-card{padding:24px;background-image:url(/assets/bg-today-small-DEQrvfY6.svg)}.temperature{font-size:72px}.weather-large-icon{width:80px;height:80px}}.weather-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:32px}.stat-item{background:var(--neutral-800);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:8px}.stat-label{color:var(--neutral-300);font-size:16px;font-weight:500}.stat-value{font-size:24px;font-weight:700;font-family:var(--font-heading)}@media (min-width: 1024px){.weather-stats-grid{grid-template-columns:repeat(4,1fr)}}.daily-forecast-section{margin-top:32px}.daily-forecast-section h3{margin-bottom:20px;color:var(--neutral-300);font-size:20px}.daily-forecast-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}.day-card{background:var(--neutral-800);border-radius:16px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:16px;transition:background .2s}.day-card:hover{background:var(--neutral-700)}.day-name{font-weight:600;color:var(--neutral-200)}.forecast-icon{width:56px;height:56px}.day-temps{display:flex;gap:12px;font-weight:600}.low{color:var(--neutral-300)}@media (max-width: 768px){.daily-forecast-grid{grid-template-columns:repeat(4,1fr)}}@media (max-width: 500px){.daily-forecast-grid{grid-template-columns:repeat(2,1fr)}}.hourly-forecast-section{background:var(--neutral-800);border-radius:24px;padding:24px}.hourly-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.day-select{background:var(--neutral-700);color:#fff;border:none;border-radius:8px;padding:4px 8px;font-size:14px}.hourly-list{display:flex;flex-direction:column;gap:8px}.hourly-item{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--neutral-800);border:1px solid var(--neutral-700);border-radius:12px;margin-bottom:12px;transition:transform .2s,background .2s}.hourly-item:hover{background:var(--neutral-700);transform:translate(4px)}.hour{font-weight:600;color:var(--neutral-200)}.hourly-icon{width:32px;height:32px}.hourly-temp{font-weight:700;font-size:18px;width:40px;text-align:right}@media (max-width: 1023px){.hourly-list{flex-direction:row;overflow-x:auto;padding-bottom:12px}.hourly-item{flex-direction:column;min-width:100px;gap:8px}.hourly-temp{text-align:center}}.state-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;text-align:center}.loading-dots{display:flex;gap:8px;margin-bottom:24px}.loading-dots span{width:12px;height:12px;background:#fff;border-radius:50%;animation:bounce 1.4s infinite ease-in-out both}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.error-icon{width:64px;height:64px;margin-bottom:32px}.error-state h2{font-size:32px;margin-bottom:16px}.error-state p{color:var(--neutral-300);max-width:400px;line-height:1.6;margin-bottom:32px}.retry-btn{background:var(--neutral-800);border:1px solid var(--neutral-700);border-radius:8px;color:#fff;padding:12px 24px;display:flex;align-items:center;gap:8px;font-weight:600;cursor:pointer}.no-results p{font-size:24px;font-weight:600;color:#fff}:root{--neutral-900: hsl(243, 96%, 9%);--neutral-800: hsl(243, 27%, 20%);--neutral-700: hsl(243, 23%, 24%);--neutral-600: hsl(243, 23%, 30%);--neutral-300: hsl(240, 6%, 70%);--neutral-200: hsl(250, 6%, 84%);--neutral-0: hsl(0, 0%, 100%);--orange-500: hsl(28, 100%, 52%);--blue-500: hsl(233, 67%, 56%);--blue-700: hsl(248, 70%, 36%);--font-body: "DM Sans", sans-serif;--font-heading: "Bricolage Grotesque", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);font-size:18px;background-color:var(--neutral-900);color:var(--neutral-0);min-height:100vh}h1,h2,h3,h4{font-family:var(--font-heading);font-weight:700}.skeleton{background:var(--neutral-700);border-radius:4px;position:relative;overflow:hidden}.skeleton:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);animation:shimmer 1.5s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.day-skeleton{width:40px;height:16px;margin:0 auto}.icon-skeleton{width:48px;height:48px;border-radius:50%;margin:8px auto}.temp-skeleton{width:60px;height:24px;margin:0 auto}.hour-skeleton{width:50px;height:16px}.loading-dots{display:flex;gap:6px;justify-content:center;align-items:center}.loading-dots span{width:8px;height:8px;background:#fff;border-radius:50%;animation:dots-bounce 1.4s infinite ease-in-out both}.loading-dots span:nth-child(1){animation-delay:-.32s}.loading-dots span:nth-child(2){animation-delay:-.16s}@keyframes dots-bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}