*{box-sizing:border-box;margin:0;padding:0}body{color:#1f2937;background:#f4f7fb;font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}.app{min-height:100vh;padding:40px 20px}.weather-container{width:100%;max-width:1100px;margin:0 auto}.header{text-align:center;margin-bottom:30px}.header h1{color:#111827;margin-bottom:8px;font-size:36px}.header p{color:#6b7280;font-size:16px}.search-section{gap:12px;margin-bottom:8px;display:flex}.search-input{background:#fff;border:1px solid #d1d5db;border-radius:10px;outline:none;flex:1;padding:15px 18px}.search-input:focus{border-color:#2563eb}.search-button{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:10px;padding:15px 25px;font-weight:600}.search-button:hover:not(:disabled){background:#1d4ed8}.search-error{color:#dc2626;margin:0 0 22px 4px;font-size:14px}.weather-card{background:#fff;border-radius:18px;margin-top:22px;margin-bottom:30px;padding:30px;box-shadow:0 8px 25px #00000014}.weather-location{text-align:center}.weather-location h2{margin-bottom:5px;font-size:28px}.weather-location p{color:#6b7280}.weather-main{justify-content:center;align-items:center;gap:25px;margin:25px 0 5px;display:flex}.weather-icon img{width:90px;height:90px}.weather-icon{font-size:75px}.temperature{align-items:flex-start;display:flex}.temperature span:first-child{font-size:72px;font-weight:700}.temperature .degree{margin-top:10px;font-size:28px;font-weight:600}.condition-block{text-align:center;margin-bottom:30px}.condition{color:#374151;margin-bottom:5px;font-size:20px;font-weight:600}.weather-description{color:#6b7280;text-transform:capitalize;font-size:14px}.weather-details{grid-template-columns:repeat(4,1fr);gap:15px;display:grid}.detail-item{background:#f8fafc;border-radius:12px;align-items:center;gap:12px;padding:18px;display:flex}.detail-icon{font-size:28px}.detail-item p{color:#6b7280;margin-bottom:4px;font-size:14px}.detail-item strong{font-size:16px}.dashboard-section{background:#fff;border-radius:18px;margin-bottom:30px;padding:25px;box-shadow:0 8px 25px #0000000f}.section-header{margin-bottom:20px}.section-header h2{font-size:22px}.history-list{flex-wrap:wrap;gap:12px;display:flex}.history-item{cursor:pointer;background:#f8fafc;border:1px solid #d1d5db;border-radius:8px;padding:10px 18px}.history-item:hover{background:#e5e7eb}.forecast-grid{grid-template-columns:repeat(5,1fr);gap:15px;display:grid}.forecast-card{text-align:center;background:#f8fafc;border-radius:12px;padding:20px 10px}.forecast-card p{margin-bottom:15px;font-weight:600}.forecast-icon{margin-bottom:12px;font-size:38px;display:block}.forecast-card h3{margin-bottom:5px;font-size:20px}.forecast-card span:last-child{color:#6b7280;font-size:14px}@media (width<=768px){.app{padding:25px 15px}.header h1{font-size:30px}.search-section{flex-direction:column}.search-button{width:100%}.weather-details,.forecast-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=480px){.weather-card,.dashboard-section{padding:20px}.weather-details{grid-template-columns:1fr}.weather-main{gap:10px}.weather-icon img{width:70px;height:70px}.temperature span:first-child{font-size:55px}.forecast-grid{grid-template-columns:1fr}}.status-message{text-align:center;border-radius:10px;max-width:700px;margin:18px auto 0;padding:12px 16px;font-size:14px}.loading-message{color:#1d4ed8;background:#eff6ff}.error-message{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca}.weather-state{text-align:center;color:#4b5563;flex-direction:column;justify-content:center;align-items:center;min-height:330px;display:flex}.weather-state h2{color:#1f2937;margin:16px 0 8px}.weather-state p{margin:0;font-size:14px}.loading-spinner{border:4px solid #e5e7eb;border-top-color:#2563eb;border-radius:50%;width:42px;height:42px;animation:.8s linear infinite weather-spin}@keyframes weather-spin{to{transform:rotate(360deg)}}.search-button:disabled{opacity:.7;cursor:not-allowed}.empty-history{text-align:center;color:#6b7280;background:#f9fafb;border-radius:10px;width:100%;margin:0;padding:18px;font-size:14px}.history-item{cursor:pointer;border:1px solid #e5e7eb;transition:transform .2s,box-shadow .2s}.history-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000014}.unit-toggle{justify-content:center;gap:4px;margin:18px auto 0;display:flex}.unit-button{color:#374151;cursor:pointer;background:#fff;border:1px solid #d1d5db;border-radius:8px;padding:8px 18px;font-weight:600}.unit-button.active{color:#fff;background:#2563eb;border-color:#2563eb}.forecast-icon{object-fit:contain;width:56px;height:56px}.location-button{color:#2563eb;cursor:pointer;background:#fff;border:1px solid #2563eb;border-radius:8px;margin:14px auto 0;padding:9px 18px;font-weight:600;display:block}.location-button:hover{background:#eff6ff}.location-button:disabled{opacity:.65;cursor:not-allowed}.search-section{align-items:stretch;gap:10px;display:flex}.search-input{min-width:0}.search-button,.location-button{justify-content:center;align-items:center;gap:8px;display:inline-flex}.weather-icon,.forecast-icon{justify-content:center;align-items:center;display:flex}.detail-icon{flex-shrink:0}@media (width<=768px){.app{padding:20px 14px}.search-section{flex-direction:column}.search-input,.search-button{width:100%;min-height:46px}.location-button{width:100%;min-height:44px}.weather-details{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.forecast-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.history-list{flex-wrap:wrap}.history-item{flex:calc(50% - 8px)}}@media (width<=480px){.app{padding:14px 10px}.header h1{font-size:25px}.weather-card,.dashboard-section{border-radius:14px;padding:16px}.weather-main{text-align:center;flex-direction:column}.weather-details,.forecast-grid{grid-template-columns:1fr 1fr}.history-item{flex-basis:100%}}