*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}.app{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.container{background:#fffffff2;border-radius:20px;width:100%;max-width:500px;padding:40px;box-shadow:0 10px 40px #0003}h1{color:#333;text-align:center;margin:0 0 30px;font-size:28px}.search-form{gap:10px;margin-bottom:20px;display:flex}.search-input{border:2px solid #e0e0e0;border-radius:10px;outline:none;flex:1;padding:12px 16px;font-size:16px;transition:border-color .3s}.search-input:focus{border-color:#667eea}.search-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:10px;padding:12px 24px;font-size:16px;transition:transform .2s,box-shadow .2s}.search-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.search-button:disabled{opacity:.7;cursor:not-allowed}.error{color:#c00;text-align:center;background:#fee;border-radius:10px;margin-bottom:20px;padding:12px 16px}.weather-card{text-align:center}.weather-header h2{color:#333;margin:0;font-size:24px}.location-detail{color:#666;margin:5px 0 20px;font-size:14px}.weather-main{justify-content:center;align-items:center;gap:15px;margin-bottom:10px;display:flex}.weather-icon{font-size:64px}.temperature{color:#333;font-size:56px;font-weight:300}.weather-description{color:#666;margin:0 0 25px;font-size:18px}.weather-details{border-top:1px solid #eee;justify-content:space-around;padding-top:20px;display:flex}.detail{flex-direction:column;gap:5px;display:flex}.detail-label{color:#999;text-transform:uppercase;font-size:12px}.detail-value{color:#333;font-size:18px;font-weight:500}.examples-section{border-top:1px solid #eee;margin-top:30px;padding-top:25px}.examples-section h3{color:#333;text-align:center;margin:0 0 20px;font-size:16px;font-weight:500}.examples-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.example-card{cursor:pointer;background:#f8f9fa;border-radius:10px;align-items:center;gap:10px;padding:12px;transition:transform .2s,box-shadow .2s;display:flex}.example-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.example-icon{font-size:28px}.example-info{flex-direction:column;flex:1;min-width:0;display:flex}.example-city{color:#333;font-size:14px;font-weight:500}.example-country{color:#999;font-size:11px}.example-temp{color:#333;font-size:18px;font-weight:500}