:root{--primary-color: #3b82f6;--primary-hover: #2563eb;--secondary-color: #64748b;--background-color: #f8fafc;--surface-color: #ffffff;--text-primary: #1e293b;--text-secondary: #64748b;--text-muted: #94a3b8;--border-color: #e2e8f0;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--error-color: #ef4444;--success-color: #10b981;--warning-color: #f59e0b;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease}.dark-mode{--primary-color: #60a5fa;--primary-hover: #3b82f6;--background-color: #0f172a;--surface-color: #1e293b;--text-primary: #f1f5f9;--text-secondary: #cbd5e1;--text-muted: #64748b;--border-color: #334155;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .3);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .3), 0 2px 4px -2px rgb(0 0 0 / .3);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .3), 0 4px 6px -4px rgb(0 0 0 / .3);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .3), 0 8px 10px -6px rgb(0 0 0 / .3)}*{margin:0;padding:0;box-sizing:border-box}body,html{height:100%;width:100%;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--background-color);color:var(--text-primary);transition:background-color var(--transition-normal),color var(--transition-normal)}.App{min-height:100vh;max-width:1200px;margin:0 auto;padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-xl);background-color:var(--background-color);transition:background-color var(--transition-normal)}.header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg) 0}.header-left h1{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,var(--primary-color),var(--primary-hover));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--spacing-xs)}.subtitle{color:var(--text-secondary);font-size:1rem;font-weight:400}.header-controls{display:flex;gap:var(--spacing-sm)}.control-btn{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-lg);color:var(--text-primary);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm)}.control-btn:hover{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color);transform:translateY(-1px);box-shadow:var(--shadow-md)}.control-btn:active{transform:translateY(0)}.search-section{display:flex;justify-content:center}.search-container{display:flex;gap:var(--spacing-md);width:100%;max-width:600px}.search-input-wrapper{position:relative;flex:1;display:flex;align-items:center}.search-icon{position:absolute;left:var(--spacing-md);color:var(--text-muted);z-index:1}.search-input{width:100%;padding:var(--spacing-md) var(--spacing-md) var(--spacing-md) calc(var(--spacing-md) * 2 + 20px);background-color:var(--surface-color);border:2px solid var(--border-color);border-radius:var(--radius-xl);font-size:1rem;color:var(--text-primary);transition:all var(--transition-fast);box-shadow:var(--shadow-sm)}.search-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #3b82f61a}.search-input::placeholder{color:var(--text-muted)}.clear-btn{position:absolute;right:var(--spacing-md);background:none;border:none;color:var(--text-muted);cursor:pointer;padding:var(--spacing-xs);border-radius:var(--radius-sm);transition:all var(--transition-fast)}.clear-btn:hover{color:var(--text-primary);background-color:var(--background-color)}.search-btn,.location-btn{padding:var(--spacing-md) var(--spacing-lg);background-color:var(--primary-color);color:#fff;border:none;border-radius:var(--radius-xl);font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:var(--spacing-xs)}.search-btn:hover,.location-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.search-btn:disabled,.location-btn:disabled{background-color:var(--text-muted);cursor:not-allowed;transform:none}.location-btn{padding:var(--spacing-md);min-width:48px}.error-container{display:flex;justify-content:center;padding:var(--spacing-lg)}.error-text{color:var(--error-color);background-color:#ef44441a;border:1px solid rgb(239 68 68 / .2);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-lg);font-weight:500;text-align:center;max-width:500px}.favorites-panel{position:fixed;top:0;right:0;height:100vh;width:350px;background-color:var(--surface-color);border-left:1px solid var(--border-color);box-shadow:var(--shadow-xl);z-index:1000;display:flex;flex-direction:column}.favorites-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg);border-bottom:1px solid var(--border-color)}.favorites-header h3{font-size:1.25rem;font-weight:600;color:var(--text-primary)}.close-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:var(--spacing-xs);border-radius:var(--radius-sm);transition:all var(--transition-fast)}.close-btn:hover{color:var(--text-primary);background-color:var(--background-color)}.favorites-list{flex:1;padding:var(--spacing-md);overflow-y:auto;display:flex;flex-direction:column;gap:var(--spacing-sm)}.favorite-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background-color:var(--background-color);border-radius:var(--radius-lg);transition:all var(--transition-fast)}.favorite-item:hover{background-color:var(--border-color)}.favorite-city-btn{flex:1;display:flex;align-items:center;gap:var(--spacing-sm);background:none;border:none;color:var(--text-primary);font-size:.875rem;font-weight:500;cursor:pointer;padding:0;text-align:left}.remove-favorite-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:var(--spacing-xs);border-radius:var(--radius-sm);transition:all var(--transition-fast)}.remove-favorite-btn:hover{color:var(--error-color);background-color:#ef44441a}.no-favorites{color:var(--text-muted);text-align:center;padding:var(--spacing-xl);font-style:italic}.weather-container{display:flex;flex-direction:column;gap:var(--spacing-xl)}.current-weather{background-color:var(--surface-color);border-radius:var(--radius-2xl);padding:var(--spacing-2xl);box-shadow:var(--shadow-lg);border:1px solid var(--border-color)}.weather-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--spacing-xl)}.location-info h2{font-size:2rem;font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.weather-description{color:var(--text-secondary);font-size:1.125rem;text-transform:capitalize}.favorite-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:var(--spacing-sm);border-radius:var(--radius-lg);transition:all var(--transition-fast)}.favorite-btn:hover{color:var(--warning-color);background-color:#f59e0b1a}.favorite-btn.active{color:var(--warning-color)}.weather-main{margin-bottom:var(--spacing-xl)}.temperature-section{display:flex;align-items:center;gap:var(--spacing-xl)}.weather-icon{font-size:4rem;line-height:1}.temperature-info{display:flex;flex-direction:column;gap:var(--spacing-xs)}.temperature{font-size:4rem;font-weight:300;color:var(--text-primary);line-height:1}.feels-like{color:var(--text-secondary);font-size:1.125rem;font-weight:500}.weather-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-lg);padding-top:var(--spacing-xl);border-top:1px solid var(--border-color)}.detail-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background-color:var(--background-color);border-radius:var(--radius-lg);transition:all var(--transition-fast)}.detail-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.detail-item svg{color:var(--primary-color);flex-shrink:0}.detail-label{color:var(--text-secondary);font-size:.875rem;font-weight:500;margin-bottom:var(--spacing-xs)}.detail-value{color:var(--text-primary);font-size:1.125rem;font-weight:600}.forecast-section{background-color:var(--surface-color);border-radius:var(--radius-2xl);padding:var(--spacing-2xl);box-shadow:var(--shadow-lg);border:1px solid var(--border-color)}.forecast-title{display:flex;align-items:center;gap:var(--spacing-sm);font-size:1.5rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-xl)}.forecast-title svg{color:var(--primary-color)}.forecast-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--spacing-lg)}.forecast-day{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg);background-color:var(--background-color);border-radius:var(--radius-xl);transition:all var(--transition-fast);border:1px solid var(--border-color)}.forecast-day:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary-color)}.forecast-date{color:var(--text-secondary);font-size:.875rem;font-weight:600;text-align:center}.forecast-icon{font-size:2.5rem;line-height:1}.forecast-temps{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs)}.max-temp{color:var(--text-primary);font-size:1.25rem;font-weight:600}.min-temp{color:var(--text-secondary);font-size:1rem;font-weight:500}.loading-spinner{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:9999}.loading-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg);background-color:var(--surface-color);padding:var(--spacing-2xl);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);border:1px solid var(--border-color)}.spinner{width:50px;height:50px;border:4px solid var(--border-color);border-top:4px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}.loading-message{color:var(--text-primary);font-size:1.125rem;font-weight:500;text-align:center}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.App{padding:var(--spacing-md);gap:var(--spacing-lg)}.header{flex-direction:column;gap:var(--spacing-lg);text-align:center}.header-left h1{font-size:2rem}.search-container{flex-direction:column;gap:var(--spacing-sm)}.search-btn,.location-btn{width:100%;justify-content:center}.temperature-section{flex-direction:column;text-align:center;gap:var(--spacing-lg)}.weather-details{grid-template-columns:1fr}.forecast-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--spacing-md)}.favorites-panel{width:100%}.current-weather,.forecast-section{padding:var(--spacing-lg)}.temperature,.weather-icon{font-size:3rem}}@media (max-width: 480px){.header-controls{flex-wrap:wrap;justify-content:center}.control-btn{font-size:.75rem;padding:var(--spacing-xs) var(--spacing-sm)}.forecast-grid{grid-template-columns:repeat(2,1fr)}}html{scroll-behavior:smooth}button:focus-visible,input:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.favorites-list::-webkit-scrollbar{width:6px}.favorites-list::-webkit-scrollbar-track{background:var(--background-color)}.favorites-list::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.favorites-list::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}