*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:linear-gradient(135deg,#2d3748,#4a5568,#667eea);min-height:100vh;color:#333}.App{min-height:100vh;padding:15px}.dashboard-container{max-width:1200px;margin:0 auto;padding:15px}.dashboard-container h1{text-align:center;color:#fff;font-size:2.5rem;margin-bottom:2rem;text-shadow:0 2px 4px rgba(0,0,0,.5);font-weight:700}.dashboard-container p{text-align:center;color:#fff;font-size:1.2rem;background:#ffffff26;padding:20px;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.search-bar{margin:20px 0 30px;display:flex;justify-content:center}.search-input-container{display:flex;gap:12px;max-width:500px;width:100%;background:#fffffff2;border-radius:12px;padding:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);box-shadow:0 8px 32px #0000001a}.search-input{flex:1;padding:12px 16px;border:none;border-radius:8px;background:transparent;font-size:1rem;color:#2d3748;outline:none;font-family:inherit}.search-input::placeholder{color:#718096;font-style:italic}.search-input:focus{background:#667eea1a}.search-button{padding:12px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1);white-space:nowrap;font-family:inherit}.search-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #667eea66;background:linear-gradient(135deg,#5a6fd8,#6b46a3)}.search-button:active:not(:disabled){transform:translateY(0)}.search-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:20px}.card-container{background:linear-gradient(135deg,#fffffff2,#f8fafcf2);border-radius:16px;padding:24px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);box-shadow:0 8px 32px #00000026;position:relative;overflow:hidden}.card-container:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea,#764ba2);transform:scaleX(0);transition:transform .3s ease}.card-container:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 40px #00000040;background:linear-gradient(135deg,#fff,#f8fafc)}.card-container:hover:before{transform:scaleX(1)}.card-container.selected{background:linear-gradient(135deg,#667eea1a,#8b5cf61a);border:2px solid #667eea;transform:translateY(-4px);box-shadow:0 12px 40px #667eea4d}.card-container.selected:before{transform:scaleX(1);height:6px}.card-container.loading{background:#f8fafce6;color:#666;text-align:center;font-style:italic}.card-container.error{background:#ff636326;border:1px solid rgba(255,99,99,.4);color:#dc2626;text-align:center}.temperature-container{display:flex;align-items:flex-start;gap:20px;margin-bottom:16px}.temperature-container img{width:80px;height:80px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));flex-shrink:0;background:#fffc;border-radius:50%;padding:8px}.data-container{flex:1}.data-container ul{list-style:none;padding:0;margin:0}.data-container li{margin-bottom:12px;background:#ffffff80;padding:8px 12px;border-radius:8px;border-left:3px solid #667eea}.data-container li:last-child{margin-bottom:0}.city-name{font-size:1.5rem;font-weight:700;color:#1a202c;margin-bottom:8px;text-transform:capitalize}.weather-description{font-size:1rem;color:#4a5568;margin-bottom:12px;text-transform:capitalize;font-style:italic;font-weight:500}.temperature-data{font-size:1.3rem;font-weight:600;color:#667eea;margin-bottom:8px}.data-container li>div{font-size:.95rem;color:#2d3748;line-height:1.4;font-weight:500}.forecast-section{margin-top:40px;background:linear-gradient(135deg,#fffffff2,#f8fafcf2);border-radius:16px;padding:24px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);box-shadow:0 8px 32px #00000026}.forecast-section h2{text-align:center;color:#1a202c;margin-bottom:24px;font-size:1.8rem;font-weight:700}.forecast-message{text-align:center;color:#fff;font-size:1.1rem;background:#ffffff26;padding:20px;border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin-top:20px;border:1px solid rgba(255,255,255,.2)}.forecast-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px}.forecast-card{background:linear-gradient(135deg,#ffffffe6,#f8fafce6);border-radius:12px;padding:20px;text-align:center;border:1px solid rgba(102,126,234,.2);transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 4px 12px #0000001a}.forecast-card:hover{transform:translateY(-4px);box-shadow:0 8px 25px #0003;border-color:#667eea}.forecast-date{font-weight:600;color:#2d3748;margin-bottom:12px;font-size:1.1rem;text-transform:capitalize}.forecast-card img{width:64px;height:64px;margin:8px 0;background:#fffc;border-radius:50%;padding:8px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.forecast-temps{display:flex;justify-content:center;gap:12px;margin:12px 0;background:#667eea1a;padding:8px;border-radius:8px}.temp-max{font-size:1.3rem;font-weight:700;color:#1a202c}.temp-min{font-size:1.1rem;color:#4a5568}.forecast-description{font-size:.9rem;color:#4a5568;text-transform:capitalize;font-style:italic;font-weight:500}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.loading{animation:pulse 2s infinite}.card-container:active{transform:translateY(-2px) scale(.98)}.card-container:focus{outline:3px solid rgba(102,126,234,.6);outline-offset:2px}@media (max-width: 768px){.App,.dashboard-container{padding:10px}.dashboard-container h1{font-size:1.8rem;margin-bottom:1.5rem}.search-bar{margin:15px 0 25px}.search-input-container{max-width:100%;margin:0 15px;flex-direction:column;gap:8px}.search-input{padding:14px 16px;font-size:16px}.search-button{padding:14px 20px;font-size:1rem}.cards-grid{grid-template-columns:1fr;gap:16px;margin-top:16px}.card-container{padding:20px;margin:0}.temperature-container{gap:16px;flex-direction:row;align-items:center}.temperature-container img{width:70px;height:70px}.city-name{font-size:1.2rem}.temperature-data{font-size:1.1rem}.data-container li>div{font-size:.9rem}.forecast-section{margin-top:30px;padding:20px}.forecast-section h2{font-size:1.5rem}.forecast-grid{grid-template-columns:repeat(3,1fr);gap:12px}.forecast-card{padding:16px}.forecast-card img{width:50px;height:50px}.forecast-temps{gap:8px;padding:6px}.temp-max{font-size:1.1rem}.temp-min{font-size:1rem}.forecast-description{font-size:.8rem}}@media (max-width: 480px){.dashboard-container h1{font-size:1.6rem}.search-input-container{margin:0 10px;padding:6px}.search-input{padding:12px 14px}.search-button{padding:12px 18px}.temperature-container{flex-direction:column;text-align:center;gap:12px}.temperature-container img{align-self:center}.forecast-grid{grid-template-columns:1fr;gap:12px}.forecast-card{padding:12px}}@media (max-width: 360px){.App,.dashboard-container{padding:8px}.card-container{padding:16px}.data-container li{padding:6px 10px;margin-bottom:8px}}