:root{--bg-color: #ffffff;--text-color: #333333;--text-secondary: #666666;--text-muted: #999999;--border-color: #e0e0e0;--border-light: #f0f0f0;--card-bg: #f8f8f8;--hover-bg: #f5f5f5;--error-bg: #fef7f7;--error-border: #ffcdd2;--error-text: #d32f2f;--sunny-primary: #B8860B;--sunny-secondary: #D4A574;--sunny-bg: #FFF9E6;--sunny-border: #F0E0C0;--cloudy-primary: #8899A6;--cloudy-secondary: #9BADB7;--cloudy-bg: #F5F7F9;--cloudy-border: #D8DEE4;--rainy-primary: #5B9BD5;--rainy-secondary: #7CAEE5;--rainy-bg: #F0F6FB;--rainy-border: #D0E2F0;--stormy-primary: #8B7BB8;--stormy-secondary: #A396C8;--stormy-bg: #F8F6FB;--stormy-border: #E0D8F0;--snowy-primary: #5BA3B8;--snowy-secondary: #7CB5C8;--snowy-bg: #F0FBFD;--snowy-border: #D0E8F0;--foggy-primary: #9E9E9E;--foggy-secondary: #B5B5B5;--foggy-bg: #F5F5F5;--foggy-border: #E0E0E0;--pin-active: #C57C53;--pin-hover: #D49370;--success-color: #6B9B6F;--success-bg: #F5F8F5;--accent-gradient: linear-gradient(135deg, #8A9BC5 0%, #9A8BC2 100%);--dawn-primary: #B8A675;--dawn-secondary: #C5B485;--dawn-bg: #FEFDF9;--dawn-border: #F5F3ED;--dawn-accent: linear-gradient(135deg, #B8A675 0%, #C59975 100%);--day-primary: #6B94C5;--day-secondary: #7CA5D2;--day-bg: #FAFCFE;--day-border: #F0F5FA;--day-accent: linear-gradient(135deg, #6B94C5 0%, #7CA5D2 100%);--dusk-primary: #C59975;--dusk-secondary: #D2A785;--dusk-bg: #FEFBF8;--dusk-border: #F5F1ED;--dusk-accent: linear-gradient(135deg, #C59975 0%, #C5859B 100%);--night-primary: #7B8BC5;--night-secondary: #8C9BD2;--night-bg: #FAFBFE;--night-border: #F0F2F8;--night-accent: linear-gradient(135deg, #7B8BC5 0%, #9B8BC5 100%);--forecast-base-bg: #F0F0F0;--forecast-base-border: #D8D8D8;--forecast-sunny-bg: #F5F0E0;--forecast-sunny-border: #E8D4B0;--forecast-cloudy-bg: #EAEEF0;--forecast-cloudy-border: #D0D8E0;--forecast-rainy-bg: #EAF3F8;--forecast-rainy-border: #C8DCE8;--forecast-stormy-bg: #EEEAF3;--forecast-stormy-border: #D8D0E8;--forecast-snowy-bg: #EAF3F5;--forecast-snowy-border: #C8DCE0;--forecast-foggy-bg: #ECECEC;--forecast-foggy-border: #D0D0D0;--forecast-shadow: inset 0 1px 3px rgba(0, 0, 0, .05);--forecast-hover-shadow: 0 2px 6px rgba(0, 0, 0, .08)}[data-theme=dark]{--bg-color: #1a1a1a;--text-color: #ffffff;--text-secondary: #cccccc;--text-muted: #999999;--border-color: #333333;--border-light: #2a2a2a;--card-bg: #252525;--hover-bg: #2a2a2a;--error-bg: #2a1a1a;--error-border: #4a2a2a;--error-text: #ff6b6b;--sunny-primary: #B8A675;--sunny-secondary: #C5B485;--sunny-bg: #2A2822;--sunny-border: #3A3530;--cloudy-primary: #8899A6;--cloudy-secondary: #9BADB7;--cloudy-bg: #22242A;--cloudy-border: #303540;--rainy-primary: #6B94C5;--rainy-secondary: #7CA5D2;--rainy-bg: #1E252E;--rainy-border: #2A3845;--stormy-primary: #8B7BB8;--stormy-secondary: #A396C8;--stormy-bg: #252230;--stormy-border: #353040;--snowy-primary: #6B9BC5;--snowy-secondary: #7CACD2;--snowy-bg: #1E2830;--snowy-border: #2A3845;--foggy-primary: #9E9E9E;--foggy-secondary: #B5B5B5;--foggy-bg: #252525;--foggy-border: #353535;--pin-active: #C57C53;--pin-hover: #D49370;--success-color: #7BA67D;--success-bg: #1c221c;--accent-gradient: linear-gradient(135deg, #8A9BC5 0%, #9A8BC2 100%);--dawn-primary: #B8A675;--dawn-secondary: #C5B485;--dawn-bg: #201f1c;--dawn-border: #2a2925;--dawn-accent: linear-gradient(135deg, #B8A675 0%, #C59975 100%);--day-primary: #6B94C5;--day-secondary: #7CA5D2;--day-bg: #1a1e23;--day-border: #252b32;--day-accent: linear-gradient(135deg, #6B94C5 0%, #7CA5D2 100%);--dusk-primary: #C59975;--dusk-secondary: #D2A785;--dusk-bg: #221e1c;--dusk-border: #2a2925;--dusk-accent: linear-gradient(135deg, #C59975 0%, #C5859B 100%);--night-primary: #7B8BC5;--night-secondary: #8C9BD2;--night-bg: #1c1e23;--night-border: #252a32;--night-accent: linear-gradient(135deg, #7B8BC5 0%, #9B8BC5 100%);--forecast-base-bg: #2a2a2a;--forecast-base-border: #404040;--forecast-sunny-bg: #2a2825;--forecast-sunny-border: #3a3530;--forecast-cloudy-bg: #28292a;--forecast-cloudy-border: #383a3d;--forecast-rainy-bg: #262a2e;--forecast-rainy-border: #36404a;--forecast-stormy-bg: #2a282e;--forecast-stormy-border: #3a3545;--forecast-snowy-bg: #262b2e;--forecast-snowy-border: #364045;--forecast-foggy-bg: #2a2a2a;--forecast-foggy-border: #3a3a3a;--forecast-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);--forecast-hover-shadow: 0 2px 6px rgba(0, 0, 0, .3)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-color);min-height:100vh;color:var(--text-color);line-height:1.6;transition:background-color .3s ease,color .3s ease;background-image:radial-gradient(circle at 20% 50%,rgba(138,155,197,.03) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(197,161,90,.03) 0%,transparent 50%),radial-gradient(circle at 40% 20%,rgba(197,153,117,.03) 0%,transparent 50%)}[data-theme=dark] body{background-image:radial-gradient(circle at 20% 50%,rgba(138,155,197,.02) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(197,161,90,.02) 0%,transparent 50%),radial-gradient(circle at 40% 20%,rgba(197,153,117,.02) 0%,transparent 50%)}[title]{position:relative}[title]:hover:after{content:attr(title);position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:var(--text-color);color:var(--bg-color);padding:.5rem .75rem;border-radius:4px;font-size:.75rem;white-space:nowrap;z-index:1000;pointer-events:none;animation:tooltip-appear .15s ease-out}[title]:hover:before{content:"";position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(1px);border:4px solid transparent;border-top-color:var(--text-color);z-index:1000;pointer-events:none;animation:tooltip-appear .15s ease-out}@keyframes tooltip-appear{0%{opacity:0;transform:translate(-50%) translateY(5px)}to{opacity:1;transform:translate(-50%) translateY(0)}}#root{min-height:100vh;padding:20px}.container{max-width:1400px;margin:0 auto;padding:2rem clamp(1rem,5vw,3rem);width:100%}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.header-left{display:flex;flex-direction:column;gap:.25rem}.app-title{font-size:1.5rem;font-weight:500;color:var(--text-color);margin:0;display:flex;align-items:baseline;gap:.25rem}.title-main{font-weight:600;color:var(--text-color)}.title-accent{font-weight:400;color:var(--text-muted);font-style:normal}.last-refresh{font-size:.75rem;color:var(--text-muted);font-weight:400}.location-info{display:flex;flex-direction:column;flex:1;min-width:0}.location-time{font-size:.75rem;color:var(--text-muted);font-weight:400;margin-top:.25rem}.header-controls{display:flex;gap:.75rem;align-items:center}.layout-toggle{background:var(--bg-color);border:1px solid var(--border-color);border-radius:8px;padding:0 12px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-color);white-space:nowrap;opacity:.8;transition:all .2s ease;font-size:.7rem;font-weight:700;text-transform:uppercase;box-shadow:0 2px 6px #0000000f,0 1px 3px #0000000a}[data-theme=dark] .layout-toggle{box-shadow:0 2px 6px #0003,0 1px 3px #00000026}.layout-toggle:hover{opacity:1;transform:translateY(-1px);box-shadow:0 4px 10px #00000014,0 2px 4px #0000000d}[data-theme=dark] .layout-toggle:hover{box-shadow:0 4px 10px #0000004d,0 2px 4px #0003}.refresh-button{background:var(--bg-color);border:1px solid var(--border-color);border-radius:8px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.3rem;color:var(--text-color);opacity:.8;transition:all .2s ease;box-shadow:0 2px 6px #0000000f,0 1px 3px #0000000a}[data-theme=dark] .refresh-button{box-shadow:0 2px 6px #0003,0 1px 3px #00000026}.refresh-button:hover:not(:disabled){opacity:1;transform:translateY(-1px);box-shadow:0 4px 10px #00000014,0 2px 4px #0000000d}[data-theme=dark] .refresh-button:hover:not(:disabled){box-shadow:0 4px 10px #0000004d,0 2px 4px #0003}.refresh-button:disabled{opacity:.3;cursor:not-allowed}.refresh-button:disabled{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.temp-unit-toggle{background:var(--bg-color);border:1px solid var(--border-color);border-radius:8px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.9rem;font-weight:600;color:var(--text-color);opacity:.8;transition:all .2s ease;box-shadow:0 2px 6px #0000000f,0 1px 3px #0000000a}[data-theme=dark] .temp-unit-toggle{box-shadow:0 2px 6px #0003,0 1px 3px #00000026}.temp-unit-toggle:hover{opacity:1;transform:translateY(-1px);box-shadow:0 4px 10px #00000014,0 2px 4px #0000000d}[data-theme=dark] .temp-unit-toggle:hover{box-shadow:0 4px 10px #0000004d,0 2px 4px #0003}.theme-toggle{background:var(--bg-color);border:1px solid var(--border-color);border-radius:8px;padding:0 12px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-color);white-space:nowrap;opacity:.8;transition:all .2s ease;font-size:.7rem;font-weight:700;text-transform:uppercase;box-shadow:0 2px 6px #0000000f,0 1px 3px #0000000a}[data-theme=dark] .theme-toggle{box-shadow:0 2px 6px #0003,0 1px 3px #00000026}.theme-toggle:hover{opacity:1;transform:translateY(-1px);box-shadow:0 4px 10px #00000014,0 2px 4px #0000000d}[data-theme=dark] .theme-toggle:hover{box-shadow:0 4px 10px #0000004d,0 2px 4px #0003}.language-selector{background:var(--bg-color);border:1px solid var(--border-color);border-radius:8px;padding:0 32px 0 12px;height:40px;cursor:pointer;color:var(--text-color);font-size:.875rem;font-weight:500;transition:all .2s ease;opacity:.8;box-shadow:0 2px 6px #0000000f,0 1px 3px #0000000a;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 8px center;background-size:16px}[data-theme=dark] .language-selector{box-shadow:0 2px 6px #0003,0 1px 3px #00000026}.language-selector:hover{opacity:1;transform:translateY(-1px);box-shadow:0 4px 10px #00000014,0 2px 4px #0000000d}[data-theme=dark] .language-selector:hover{box-shadow:0 4px 10px #0000004d,0 2px 4px #0003}.language-selector:focus{outline:none;transform:translateY(-1px);box-shadow:0 4px 10px #00000014,0 2px 4px #0000000d,0 0 0 2px #8a9bc54d}[data-theme=dark] .language-selector:focus{box-shadow:0 4px 10px #0000004d,0 2px 4px #0003,0 0 0 2px #8a9bc580}.search-container{margin-bottom:2rem;width:100%}.search-input{width:100%;padding:1rem;border:1px solid var(--border-color);border-radius:8px;font-size:1rem;outline:none;transition:all .2s ease;background:var(--bg-color);color:var(--text-color);box-shadow:0 2px 6px #0000000f,0 1px 3px #0000000a}[data-theme=dark] .search-input{box-shadow:0 2px 6px #0003,0 1px 3px #00000026}.search-input:focus{border-color:var(--sunny-primary);background:var(--sunny-bg);transform:translateY(-1px);box-shadow:0 4px 10px #00000014,0 2px 4px #0000000d}[data-theme=dark] .search-input:focus{box-shadow:0 4px 10px #0000004d,0 2px 4px #0003}.locations-list{margin-top:.5rem;background:var(--bg-color);border:1px solid var(--border-color);border-radius:8px;max-height:200px;overflow-y:auto;box-shadow:0 4px 12px #0000001a,0 2px 6px #0000000d}[data-theme=dark] .locations-list{box-shadow:0 4px 12px #0000004d,0 2px 6px #0003}.location-item{padding:.75rem 1rem;cursor:pointer;border-bottom:1px solid var(--border-light);transition:background-color .2s ease;font-size:.95rem;color:var(--text-color)}.location-item:hover{background-color:var(--hover-bg)}.location-item:last-child{border-bottom:none}.search-result-container{margin-top:2rem;margin-bottom:2rem}.weather-container{display:flex;flex-direction:column;gap:2rem}.weather-container.has-collapsed-cards{gap:1.5rem}.weather-container.side-by-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(500px,1fr));gap:2rem;align-items:start}@media (max-width: 1200px){.weather-container.side-by-side{grid-template-columns:1fr}}.weather-display{position:relative;text-align:left;padding:1.5rem;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-color);box-shadow:0 2px 8px #00000014,0 4px 16px #0000000a;transition:all .3s ease}[data-theme=dark] .weather-display{box-shadow:0 2px 8px #0000004d,0 4px 16px #0003}.weather-display.sunny{background:var(--sunny-bg);border-color:var(--sunny-border)}.weather-display.cloudy{background:var(--cloudy-bg);border-color:var(--cloudy-border)}.weather-display.rainy{background:var(--rainy-bg);border-color:var(--rainy-border)}.weather-display.stormy{background:var(--stormy-bg);border-color:var(--stormy-border)}.weather-display.snowy{background:var(--snowy-bg);border-color:var(--snowy-border)}.weather-display.foggy{background:var(--foggy-bg);border-color:var(--foggy-border)}.weather-display.time-dawn{background:var(--dawn-bg);border-color:var(--dawn-border)}.weather-display.time-day{background:var(--day-bg);border-color:var(--day-border)}.weather-display.time-dusk{background:var(--dusk-bg);border-color:var(--dusk-border)}.weather-display.time-night{background:var(--night-bg);border-color:var(--night-border)}.weather-display.time-dawn .location-name{color:var(--dawn-primary)}.weather-display.time-day .location-name{color:var(--day-primary)}.weather-display.time-dusk .location-name{color:var(--dusk-primary)}.weather-display.time-night .location-name{color:var(--night-primary)}.weather-display.collapsed-state{padding:1rem 1.5rem}.weather-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.weather-header-buttons{display:flex;gap:.5rem;align-items:center;margin-right:12px;margin-top:.5rem}.location-name{font-size:1.5rem;font-weight:500;margin:0;color:var(--text-color)}.collapse-toggle{position:absolute;top:128px;right:8px;width:32px;height:32px;cursor:pointer;z-index:5;border-radius:6px;background:transparent;border:none;display:flex;align-items:center;justify-content:center;opacity:.8;transition:all .2s ease}.collapse-toggle:hover{opacity:1;background:#00000014}[data-theme=dark] .collapse-toggle:hover{background:#ffffff14}.forecast-toggle{position:absolute;top:88px;right:8px;width:32px;height:32px;cursor:pointer;z-index:5;border-radius:6px;background:transparent;border:none;display:flex;align-items:center;justify-content:center;opacity:.8;transition:all .2s ease}.forecast-toggle:hover{opacity:1;background:#00000014}[data-theme=dark] .forecast-toggle:hover{background:#ffffff14}.pin-button{position:absolute;top:8px;right:8px;width:32px;height:32px;cursor:pointer;z-index:5;border-radius:6px;background:transparent;border:none;display:flex;align-items:center;justify-content:center;opacity:.8;transition:all .2s ease;font-size:16px;color:var(--text-color)}.pin-button.pinned{opacity:1;color:var(--pin-active);background:#c57c531a}.pin-button:hover:not(.pinned){opacity:1;background:#d493701a}.pin-button:hover{opacity:1;background:#0000000d}[data-theme=dark] .pin-button:hover{background:#ffffff1a}.pin-icon{width:12px;height:16px;position:relative}.pin-icon:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:8px;height:8px;background:var(--text-secondary);border-radius:50%;border:1px solid var(--text-secondary)}.pin-icon:after{content:"";position:absolute;top:6px;left:50%;transform:translate(-50%);width:1px;height:8px;background:var(--text-secondary)}.pin-button.pinned .pin-icon:before,.pin-button.pinned .pin-icon:after{background:var(--text-color);border-color:var(--text-color)}.collapse-toggle{font-size:1rem;font-weight:300;color:var(--text-color)}.forecast-toggle{font-size:.65rem;font-weight:600;color:var(--text-color)}.close-button{background:var(--card-bg);border:1px solid var(--border-color);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;transition:all .2s ease;color:var(--text-secondary)}.close-button:hover{background:var(--hover-bg);transform:scale(1.05);color:var(--error-text)}.close-button-bubble{position:absolute;top:-12px;left:-12px;background:var(--bg-color);border:2px solid var(--border-color);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;transition:all .2s ease;color:var(--text-secondary);z-index:20;box-shadow:0 2px 8px #0000001a}.close-button-bubble:hover{background:var(--hover-bg);transform:scale(1.1);color:var(--error-text);box-shadow:0 4px 12px #00000026}.drag-handle{position:absolute;top:48px;right:8px;width:32px;height:32px;cursor:grab;z-index:5;border-radius:6px;background:transparent;border:none;display:flex;align-items:center;justify-content:center;opacity:.8;transition:all .2s ease}.drag-handle:hover{opacity:1;background:#00000014}[data-theme=dark] .drag-handle:hover{background:#ffffff14}.weather-display:has(.drag-handle:active){transform:translateY(-2px);box-shadow:0 4px 12px #0000001f,0 8px 24px #0000000f}[data-theme=dark] .weather-display:has(.drag-handle:active){box-shadow:0 4px 12px #0006,0 8px 24px #0000004d}.dragging-wrapper{z-index:9999!important;position:relative!important}.dragging-wrapper .weather-display{transform:scale(1.02);box-shadow:0 8px 20px #00000026,0 12px 32px #00000014;opacity:.95}[data-theme=dark] .dragging-wrapper .weather-display{box-shadow:0 8px 20px #00000080,0 12px 32px #0006}.drag-handle:active{cursor:grabbing}.drag-dots{display:grid;grid-template-columns:repeat(3,4px);grid-template-rows:repeat(3,4px);gap:3px}.drag-dots span{width:4px;height:4px;background:var(--text-color);border-radius:50%}.weather-droppable-area{display:flex;flex-direction:column;gap:2rem}.weather-droppable-area.has-collapsed-cards{gap:1.5rem}.weather-droppable-area.side-by-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(500px,1fr));gap:2rem}.weather-droppable-area.side-by-side>div:only-child .weather-display{max-width:calc((100% - 2rem)/2)}@media (max-width: 1200px){.weather-droppable-area.side-by-side{grid-template-columns:1fr}}.weather-column{display:flex;flex-direction:column;gap:2rem;min-height:200px;position:relative}.weather-droppable-area.side-by-side .weather-column.has-collapsed-cards{gap:1.5rem}.current-weather{display:flex;align-items:flex-start;gap:1.5rem;margin-bottom:3rem;padding:1.5rem 0;border-bottom:1px solid var(--border-color);transition:margin-bottom .6s ease}.weather-icon{font-size:3.5rem;line-height:1}.temperature{font-size:4rem;font-weight:300;color:var(--text-color);line-height:1}.weather-info{text-align:left;margin-top:.5rem}.weather-description{font-size:1.1rem;text-transform:capitalize;margin-bottom:.5rem;color:var(--text-secondary)}.feels-like{color:var(--text-muted);font-size:.9rem}.weather-metrics{margin:1rem 0;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1)}.weather-metrics.expanded{max-height:200px;padding:.75rem 0;opacity:1;transform:translateY(0)}.weather-metrics.collapsed{max-height:0;padding:0;opacity:0;transform:translateY(-10px)}.metrics-list{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:.75rem 1rem}@media (max-width: 768px){.metrics-list{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr);gap:.75rem}}@media (max-width: 480px){.metrics-list{grid-template-columns:1fr;grid-template-rows:repeat(8,1fr);gap:.5rem}}.metric-item{display:flex;align-items:baseline;justify-content:center;gap:.5rem;min-width:fit-content;transition:all .3s ease}.weather-container.side-by-side .metric-item{display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center}.weather-metrics.expanded .metric-item{transform:translateY(0);opacity:1}.weather-metrics.collapsed .metric-item{transform:translateY(-5px);opacity:0}.weather-metrics.expanded .metric-item:nth-child(1){transition-delay:.05s}.weather-metrics.expanded .metric-item:nth-child(2){transition-delay:.1s}.weather-metrics.expanded .metric-item:nth-child(3){transition-delay:.15s}.weather-metrics.expanded .metric-item:nth-child(4){transition-delay:.2s}.weather-metrics.expanded .metric-item:nth-child(5){transition-delay:.25s}.weather-metrics.expanded .metric-item:nth-child(6){transition-delay:.3s}.weather-metrics.expanded .metric-item:nth-child(7){transition-delay:.35s}.weather-metrics.expanded .metric-item:nth-child(8){transition-delay:.4s}.metric-label{font-size:.9rem;color:var(--text-muted);font-weight:400;white-space:nowrap}.metric-value{font-size:.9rem;font-weight:500;color:var(--text-secondary)}.metric-item.humidity .metric-value{color:var(--rainy-primary)}.metric-item.wind .metric-value{color:var(--cloudy-primary)}.metric-item.pressure .metric-value{color:var(--stormy-primary)}.metric-item.visibility .metric-value{color:var(--foggy-primary)}.metric-item.uv .metric-value{color:var(--sunny-primary)}.metric-item.feels-like .metric-value{color:var(--text-color)}.forecast-section{margin-top:2.5rem;transition:margin-top .6s ease;padding-bottom:.5rem}.collapsed-state .current-weather{margin-bottom:.5rem}.collapsed-state .forecast-section{margin-top:.5rem}.forecast-title{font-size:1.4rem;margin-bottom:1.5rem;color:var(--text-color);font-weight:600}.forecast-list{display:flex;gap:1rem;overflow-x:scroll!important;overflow-y:hidden;padding:2px 0 1rem;margin-bottom:.25rem;position:relative;scrollbar-width:auto!important;scrollbar-color:rgba(128,128,128,.35) transparent}.forecast-list::-webkit-scrollbar{height:10px;-webkit-appearance:none;display:block!important;visibility:visible!important;opacity:1!important}.forecast-list::-webkit-scrollbar-track{background:transparent;border-radius:5px}.forecast-list::-webkit-scrollbar-thumb{background:#80808059!important;border-radius:5px;border:1px solid rgba(128,128,128,.25);visibility:visible!important;opacity:1!important}.forecast-list::-webkit-scrollbar-thumb:hover{background:#80808099}[data-theme=dark] .forecast-list{scrollbar-color:rgba(200,200,200,.35) transparent}[data-theme=dark] .forecast-list::-webkit-scrollbar-track{background:transparent}[data-theme=dark] .forecast-list::-webkit-scrollbar-thumb{background:#c8c8c859!important;border-color:#c8c8c840;visibility:visible!important;opacity:1!important}[data-theme=dark] .forecast-list::-webkit-scrollbar-thumb:hover{background:#c8c8c899}.forecast-item{background:var(--forecast-base-bg);padding:1.5rem 1rem;border-radius:8px;text-align:center;border:1px solid var(--forecast-base-border);min-width:150px;flex-shrink:0;box-shadow:var(--forecast-shadow);transform:translateY(0);transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}.forecast-item:hover{transform:translateY(-2px);box-shadow:var(--forecast-hover-shadow)}.forecast-item.daily-item.sunny{background:var(--forecast-sunny-bg)!important;border-color:var(--forecast-sunny-border)!important}.forecast-item.daily-item.cloudy{background:var(--forecast-cloudy-bg)!important;border-color:var(--forecast-cloudy-border)!important}.forecast-item.daily-item.rainy{background:var(--forecast-rainy-bg)!important;border-color:var(--forecast-rainy-border)!important}.forecast-item.daily-item.stormy{background:var(--forecast-stormy-bg)!important;border-color:var(--forecast-stormy-border)!important}.forecast-item.daily-item.snowy{background:var(--forecast-snowy-bg)!important;border-color:var(--forecast-snowy-border)!important}.forecast-item.daily-item.foggy{background:var(--forecast-foggy-bg)!important;border-color:var(--forecast-foggy-border)!important}.forecast-item:not(.daily-item).sunny{background:var(--forecast-sunny-bg);border-color:var(--forecast-sunny-border)}.forecast-item:not(.daily-item).cloudy{background:var(--forecast-cloudy-bg);border-color:var(--forecast-cloudy-border)}.forecast-item:not(.daily-item).rainy{background:var(--forecast-rainy-bg);border-color:var(--forecast-rainy-border)}.forecast-item:not(.daily-item).stormy{background:var(--forecast-stormy-bg);border-color:var(--forecast-stormy-border)}.forecast-item:not(.daily-item).snowy{background:var(--forecast-snowy-bg);border-color:var(--forecast-snowy-border)}.forecast-item:not(.daily-item).foggy{background:var(--forecast-foggy-bg);border-color:var(--forecast-foggy-border)}.forecast-item.daily-item{min-width:165px}.forecast-time{font-size:.9rem;color:var(--text-secondary);margin-bottom:.75rem}.forecast-icon{font-size:1.75rem;margin-bottom:.75rem;line-height:1}.forecast-temp{font-size:1.1rem;font-weight:600;color:var(--text-color);margin-bottom:.5rem}.forecast-temp-range{display:flex;justify-content:center;gap:.5rem;margin-bottom:.5rem}.temp-high{font-size:1.1rem;font-weight:600;color:var(--text-color)}.temp-low{font-size:1.1rem;font-weight:400;color:var(--text-secondary)}.forecast-desc{font-size:.8rem;color:var(--text-muted);text-transform:capitalize;margin-bottom:.5rem}.daily-details{display:flex;justify-content:center;gap:.75rem;font-size:.75rem;color:var(--text-muted)}.loading{text-align:center;color:var(--text-secondary);font-size:1rem;margin:2rem 0}.error{text-align:center;color:var(--error-text);font-size:1rem;padding:1rem;background:var(--error-bg);border:1px solid var(--error-border);border-radius:4px;margin:1rem 0}@keyframes skeleton-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton-loading{pointer-events:none}.skeleton-line{background:linear-gradient(90deg,var(--border-color) 25%,var(--border-light) 50%,var(--border-color) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;border-radius:4px;height:1em;margin:.25em 0}.skeleton-title{width:150px;height:1.5em}.skeleton-subtitle{width:100px;height:.875em;opacity:.7}.skeleton-short{width:60%}.skeleton-icon{width:60px;height:60px;border-radius:50%;background:linear-gradient(90deg,var(--border-color) 25%,var(--border-light) 50%,var(--border-color) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite}.skeleton-icon-small{width:30px;height:30px;border-radius:50%;background:linear-gradient(90deg,var(--border-color) 25%,var(--border-light) 50%,var(--border-color) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite}.skeleton-temp{width:80px;height:2.5em;background:linear-gradient(90deg,var(--border-color) 25%,var(--border-light) 50%,var(--border-color) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;border-radius:4px}.skeleton-temp-small{width:40px;height:1.2em}.skeleton-button{width:32px;height:32px;border-radius:50%;background:linear-gradient(90deg,var(--border-color) 25%,var(--border-light) 50%,var(--border-color) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite}.skeleton-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem}.skeleton-buttons{display:flex;gap:.5rem}.skeleton-current{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.skeleton-info{flex:1}.skeleton-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1.5rem}.skeleton-metric{display:flex;flex-direction:column;gap:.25rem}.skeleton-label{width:60px;height:.875em;opacity:.6}.skeleton-value{width:80px;height:1em}.skeleton-forecast-title{width:120px;height:1.2em;margin-bottom:1rem}.skeleton-forecast-list{display:flex;gap:1rem;overflow-x:hidden}.skeleton-forecast-item{display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:80px}.skeleton-time{width:40px;height:.875em}.search-results-skeleton{background:var(--card-bg);border:1px solid var(--border-color);border-radius:8px;padding:.5rem;margin-top:.5rem}.skeleton-search-item{padding:.75rem;border-bottom:1px solid var(--border-light)}.skeleton-search-item:last-child{border-bottom:none}.skeleton-search-text{width:200px;height:1em}@media (max-width: 768px){#root{padding:16px}.container{padding:1rem;max-width:100%}.header{flex-direction:column;gap:1rem;align-items:stretch;margin-bottom:1.5rem}.header-left{width:100%}.app-title{font-size:1.25rem}.header-controls{width:100%;justify-content:space-between;flex-wrap:wrap;gap:.5rem}.layout-toggle{display:none}.theme-toggle{padding:0 10px;height:36px;font-size:.65rem}.temp-unit-toggle,.refresh-button,.language-selector{width:36px;height:36px}.language-selector{width:auto;padding:0 28px 0 10px;font-size:.8rem}.weather-display{padding:1rem;overflow:visible;position:relative;max-width:100%}.weather-header{flex-wrap:nowrap;gap:.5rem;align-items:flex-start}.location-name{font-size:1.25rem;word-break:keep-all;overflow-wrap:normal;flex:0 1 80%;min-width:0;white-space:normal;line-height:1.3;padding-right:.5rem}.current-weather{flex-direction:column;gap:1rem;padding:1rem 0;margin-bottom:1.5rem}.weather-icon,.temperature{font-size:3rem}.weather-description{font-size:1rem}.pin-button{top:8px;right:8px;width:32px;height:32px}.drag-handle{display:none}.forecast-toggle{top:48px;right:8px;font-size:.6rem;width:32px;height:32px}.collapse-toggle{top:88px;right:8px;width:32px;height:32px}.close-button-bubble{top:-8px;left:-8px;width:32px;height:32px;font-size:.9rem}.forecast-section{margin-top:1.5rem;max-width:100%;overflow:hidden}.forecast-title{font-size:1.2rem;margin-bottom:1rem}.forecast-list{gap:.5rem;padding:2px 0 .25rem;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:100%;overflow-x:auto!important}.forecast-list::-webkit-scrollbar{display:none}.forecast-item{min-width:120px;padding:1rem .75rem}.forecast-item.daily-item{min-width:130px}.forecast-icon{font-size:1.5rem}.forecast-temp{font-size:1rem}.forecast-desc{font-size:.75rem;word-wrap:break-word;overflow-wrap:break-word}.daily-details{font-size:.7rem;gap:.5rem}.weather-metrics{margin:.75rem 0}.weather-container.side-by-side,.weather-droppable-area.side-by-side{display:flex;flex-direction:column;grid-template-columns:1fr}}@media (max-width: 480px){#root{padding:12px}.container{padding:.75rem}.app-title{font-size:1.1rem}.last-refresh,.location-time{font-size:.7rem}.layout-toggle,.theme-toggle{padding:0 8px;height:32px;font-size:.6rem}.temp-unit-toggle,.refresh-button{width:32px;height:32px;font-size:.8rem}.language-selector{padding:0 24px 0 8px;height:32px;font-size:.75rem;background-size:14px}.weather-display{padding:.75rem}.location-name{font-size:1.1rem;word-break:keep-all;overflow-wrap:normal;flex:0 1 80%;min-width:0;white-space:normal;line-height:1.3;padding-right:.5rem}.weather-icon,.temperature{font-size:2.5rem}.pin-button,.drag-handle,.forecast-toggle,.collapse-toggle{width:24px;height:24px;font-size:.8rem}.forecast-toggle{font-size:.55rem}.forecast-item{min-width:100px;padding:.75rem .5rem}.forecast-item.daily-item{min-width:110px}.forecast-time{font-size:.8rem}.forecast-icon{font-size:1.25rem;margin-bottom:.5rem}.forecast-temp,.temp-high,.temp-low{font-size:.9rem}.forecast-desc{font-size:.7rem}.search-input{padding:.75rem;font-size:.9rem}.error{font-size:.9rem;padding:.75rem}}@media (max-width: 768px){body{overflow-x:hidden}.weather-container,.weather-droppable-area{width:100%;overflow-x:visible}}