:root { --navy:#092a4c; --blue:#315675; --cyan:#27b8cf; --rain:#eaf8fb; --card:#fff; --ink:#10213a; --muted:#5c6c80; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; color:var(--ink); font-family:Avenir Next,Nunito,ui-rounded,system-ui,sans-serif; background:linear-gradient(145deg,#f3fbff 0%,#dff4fb 100%); }
button,input { font:inherit; } button { cursor:pointer; } .app-shell { width:min(100% - 32px,820px); margin:auto; padding:22px 0 48px; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }.brand { display:flex; align-items:center; gap:10px; color:var(--navy); text-decoration:none; }.brand img { width:68px; height:68px; object-fit:contain; }.brand strong { display:block; font-size:1.75rem; letter-spacing:-1px; }.brand small { color:var(--blue); font-weight:600; }.icon-button,.close-button { border:0; background:transparent; color:var(--blue); font-size:1.55rem; }
.location-bar { display:flex; gap:10px; }.search-form { display:flex; flex:1; }.search-form input { min-width:0; flex:1; border:1px solid #c8dce6; border-radius:12px 0 0 12px; padding:13px 14px; background:white; }.search-form button,.location-button,#save-settings { border:0; padding:0 16px; border-radius:0 12px 12px 0; color:white; background:var(--navy); font-weight:750; }.location-button { border-radius:12px; background:var(--blue); }.location-label { min-height:24px; margin:10px 2px 20px; color:var(--muted); font-size:.93rem; }
.weather-card,.loading-card,.error-card,.info-panel { border:1px solid #d3e6ef; border-radius:24px; background:var(--card); box-shadow:0 16px 35px #25547013; }.weather-card { overflow:hidden; }.hero-row { display:flex; align-items:center; justify-content:space-between; padding:30px 30px 24px; background:linear-gradient(125deg,#fff 0%,var(--rain) 100%); }.eyebrow { margin:0 0 6px; color:var(--blue); font-size:.85rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.hero-row h1 { margin:0; color:var(--navy); font-size:clamp(2rem,6vw,3.3rem); letter-spacing:-.05em; }.subheadline { margin:10px 0 0; color:var(--muted); font-size:1.08rem; }.rain-symbol { font-size:5rem; filter:drop-shadow(0 8px 5px #31658a33); }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); padding:0 20px; }.metrics article { padding:20px 10px; border-bottom:1px solid #e4eef2; }.metrics span { display:block; color:var(--muted); font-size:.78rem; }.metrics strong { display:block; margin-top:5px; color:var(--navy); font-size:1.15rem; }.card-footer { display:flex; justify-content:space-between; align-items:center; padding:16px 30px; color:var(--muted); font-size:.82rem; }.card-footer button { border:1px solid #b6d7e3; border-radius:8px; padding:7px 11px; background:#fff; color:var(--blue); font-weight:700; }.loading-card,.error-card { padding:22px; color:var(--blue); font-weight:700; }.error-card { color:#a32638; border-color:#f1c5cc; background:#fff5f6; }.info-panel { margin-top:20px; padding:22px 26px; }.info-panel h2 { margin:0; color:var(--navy); font-size:1.08rem; }.info-panel p { margin:8px 0 0; color:var(--muted); line-height:1.5; }
dialog { width:min(100% - 32px,480px); border:0; border-radius:18px; color:var(--ink); box-shadow:0 25px 80px #001d32aa; } dialog::backdrop { background:#061a2c77; }.dialog-heading { display:flex; align-items:center; justify-content:space-between; }.dialog-heading h2 { color:var(--navy); }.setting-toggle { display:flex; gap:12px; align-items:flex-start; margin-top:18px; padding:14px; border:1px solid #c8dce6; border-radius:12px; cursor:pointer; }.setting-toggle input { width:18px; height:18px; margin:2px 0 0; accent-color:var(--navy); }.setting-toggle strong,.setting-toggle small { display:block; }.setting-toggle strong { font-size:.94rem; }.setting-toggle small { margin-top:4px; color:var(--muted); font-size:.82rem; font-weight:500; line-height:1.35; } menu { display:flex; justify-content:flex-end; gap:8px; margin:24px 0 0; padding:0; }.secondary { border:1px solid #c8dce6; background:#fff; border-radius:8px; padding:9px 13px; } #save-settings { border-radius:8px; padding:9px 13px; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:640px) { .app-shell { width:min(100% - 24px,820px); padding-top:12px; }.location-bar { flex-direction:column; }.search-form input { border-radius:12px 0 0 12px; }.location-button { min-height:44px; }.hero-row { padding:26px 22px 20px; }.rain-symbol { font-size:3.8rem; }.metrics { grid-template-columns:repeat(2,1fr); padding:0 16px; }.metrics article { padding:15px 8px; }.card-footer { padding:14px 22px; } }