*,:before,:after{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;margin:0;padding:0;font-family:system-ui,Segoe UI,Roboto,sans-serif}.app{color:#0f172a;background:linear-gradient(160deg,#e0f2fe 0%,#f0f9ff 45%,#fff 100%);min-height:100vh}.app-header{text-align:center;background:linear-gradient(135deg,#0369a1 0%,#0ea5e9 60%,#38bdf8 100%);padding:1.5rem 1rem;box-shadow:0 4px 24px #0ea5e94d}.app-header h1{letter-spacing:-.02em;color:#fff;text-shadow:0 1px 4px #00000026;margin:0;font-size:1.75rem;font-weight:800}.app-main{flex-direction:column;gap:1.25rem;max-width:640px;margin:0 auto;padding:1.75rem 1rem;display:flex}.search-form{gap:.5rem;display:flex}.search-input{color:#0f172a;background:#fff;border:2px solid #e2e8f0;border-radius:9999px;outline:none;flex:1;padding:.75rem 1.25rem;font-size:1rem;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 6px #0000000f}.search-input::placeholder{color:#94a3b8}.search-input:focus{border-color:#0ea5e9;box-shadow:0 0 0 3px #0ea5e926}.search-input:disabled{opacity:.5}.search-button{color:#fff;cursor:pointer;white-space:nowrap;background:linear-gradient(135deg,#0369a1,#0ea5e9);border:none;border-radius:9999px;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:opacity .2s,transform .1s;box-shadow:0 2px 10px #0ea5e966}.search-button:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.search-button:active:not(:disabled){transform:translateY(0)}.search-button:disabled{opacity:.5;cursor:not-allowed}.error-message{color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:.875rem;margin:0;padding:.875rem 1.25rem;font-size:.925rem}.loading-message{text-align:center;color:#64748b;margin:0;padding:1rem 0;font-size:.925rem}.current-weather{text-align:center;background:linear-gradient(145deg,#f0f9ff 0%,#e0f2fe 55%,#bae6fd 100%);border:1px solid #0ea5e933;border-radius:1.5rem;padding:2rem 1.5rem 1.5rem;box-shadow:0 4px 24px #0ea5e924,0 1px 4px #0000000f}.city-header{justify-content:center;align-items:center;gap:.5rem;margin-bottom:.25rem;display:flex}.city-header h2{color:#0c4a6e;margin:0;font-size:1.6rem;font-weight:700}.bookmark-btn{cursor:pointer;color:#f59e0b;background:0 0;border:none;padding:0;font-size:1.4rem;line-height:1;transition:transform .15s,color .15s}.bookmark-btn:hover{color:#d97706;transform:scale(1.3)}.weather-icon{filter:drop-shadow(0 2px 8px #0ea5e959);margin:.25rem auto 0;display:block}.description{color:#0369a1;margin:.25rem 0 0;font-size:1rem;font-weight:500}.temp{letter-spacing:-.04em;color:#0369a1;margin:.375rem 0 1.25rem;font-size:5rem;font-weight:800;line-height:1}.weather-details{grid-template-columns:repeat(2,1fr);gap:.625rem;margin-top:.25rem;display:grid}.weather-details span{color:#0c4a6e;background:#ffffffbf;border:1px solid #0ea5e92e;border-radius:.75rem;padding:.5rem .375rem;font-size:.8rem;font-weight:500}.forecast{background:#fff;border:1px solid #e2e8f0;border-radius:1.5rem;padding:1.25rem 1.5rem;box-shadow:0 2px 12px #0000000f}.forecast h3{letter-spacing:.09em;text-transform:uppercase;color:#94a3b8;margin:0 0 .875rem;font-size:.72rem;font-weight:700}.forecast-list{flex-direction:column;gap:.125rem;margin:0;padding:0;list-style:none;display:flex}.forecast-date{color:#334155;font-size:.9rem;font-weight:500}.forecast-icon{justify-self:center}.forecast-temps{flex-direction:column;align-items:flex-end;gap:.1rem;display:flex}.forecast-high{color:#f97316;font-size:.9rem;font-weight:700}.forecast-low{color:#60a5fa;font-size:.8rem;font-weight:500}.forecast-chevron{color:#94a3b8;align-self:center;font-size:.55rem}.forecast-item{cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:.75rem;grid-template-columns:1fr 44px 1fr 16px;align-items:center;padding:.625rem .75rem;transition:background .15s;display:grid}.forecast-item:hover{background:#f0f9ff}.forecast-item--active{background:#e0f2fe}.forecast-detail{padding:.25rem .5rem .75rem;list-style:none}.forecast-hourly-list{scrollbar-width:thin;scrollbar-color:#bae6fd transparent;gap:.5rem;margin:0;padding:.25rem 0 .5rem;list-style:none;display:flex;overflow-x:auto}.forecast-hourly-item{text-align:center;background:#ffffffd9;border:1px solid #0ea5e92e;border-radius:.875rem;flex-direction:column;flex-shrink:0;align-items:center;gap:.125rem;min-width:66px;padding:.5rem .375rem;display:flex}.forecast-hourly-time{color:#64748b;font-size:.72rem;font-weight:600}.forecast-hourly-temp{color:#0369a1;font-size:.9rem;font-weight:700}.forecast-hourly-desc{color:#64748b;font-size:.65rem;line-height:1.3}.hourly-forecast{background:#fff;border:1px solid #e2e8f0;border-radius:1.5rem;padding:1.25rem 1.5rem;box-shadow:0 2px 12px #0000000f}.hourly-forecast h3{letter-spacing:.09em;text-transform:uppercase;color:#94a3b8;margin:0 0 .875rem;font-size:.72rem;font-weight:700}.hourly-list{scrollbar-width:thin;scrollbar-color:#e2e8f0 transparent;gap:.5rem;margin:0;padding:0 0 .375rem;list-style:none;display:flex;overflow-x:auto}.hourly-item{background:#f0f9ff;border:1px solid #0ea5e92e;border-radius:1rem;flex-direction:column;flex-shrink:0;align-items:center;gap:.125rem;min-width:62px;padding:.625rem .375rem;transition:background .15s;display:flex}.hourly-item:hover{background:#e0f2fe}.hourly-time{color:#64748b;font-size:.75rem;font-weight:600}.hourly-icon{display:block}.hourly-temp{color:#0369a1;font-size:.9rem;font-weight:700}.bookmark-list{background:#fff;border:1px solid #e2e8f0;border-radius:1.25rem;padding:1rem 1.25rem;box-shadow:0 2px 12px #0000000f}.bookmark-list h3{letter-spacing:.09em;text-transform:uppercase;color:#94a3b8;margin:0 0 .75rem;font-size:.72rem;font-weight:700}.bookmark-list ul{flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.bookmark-item{background:#f0f9ff;border:1px solid #0ea5e933;border-radius:9999px;align-items:center;transition:box-shadow .15s;display:flex;overflow:hidden}.bookmark-item:hover{box-shadow:0 2px 8px #0ea5e933}.bookmark-city{color:#0369a1;cursor:pointer;background:0 0;border:none;padding:.375rem .5rem .375rem .875rem;font-size:.875rem;font-weight:500;transition:color .15s}.bookmark-city:hover{color:#0ea5e9}.bookmark-remove{color:#94a3b8;cursor:pointer;background:0 0;border:none;padding:.375rem .625rem;font-size:.8rem;transition:color .15s}.bookmark-remove:hover{color:#ef4444}