:root{--bg:#f4f6f8;--card:#fff;--border:#dfe3e8;--text:#1a1f26;--muted:#6b7280;--hi:#c23b2a;--lo:#2b6cb0;--orange:#f97316;--temp:#e11d48;--feels:#7c3aed;--dew:#16a34a;--cloud:#9ca3af;--pop:#93c5fd;--hum:#16a34a;--pressure:#111827;--precip-area:#60a5fa;--precip-hour:#166534;--wind:#2563eb;--panel-h:108px;--panel-h-wind:96px;--panel-h-secondary:100px}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.3}.wrap{max-width:1180px;margin:0 auto;padding:8px 12px 12px}.topbar{background:var(--card);border:1px solid var(--border);border-radius:8px;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px;padding:6px 8px;display:flex}.topbar .field{flex-direction:column;display:flex;position:relative}.topbar .place-field{flex:1;min-width:180px}.place-row{align-items:center;gap:4px;display:flex}.place-row input{flex:1;min-width:0}.fav-star{border:1px solid var(--border);color:#9ca3af;cursor:pointer;background:#fff;border-radius:6px;flex:0 0 32px;width:32px;height:32px;padding:0;font-size:1.15rem;line-height:1}.fav-star:hover{color:#f59e0b;border-color:#fcd34d}.fav-star.filled{color:#f59e0b}.fav-popup{z-index:25;border:1px solid var(--border);background:#fff;border-radius:8px;max-height:240px;padding:6px 0;position:absolute;top:calc(100% + 2px);left:0;right:0;overflow-y:auto;box-shadow:0 8px 24px #0f172a1f}.fav-popup[hidden]{display:none!important}.fav-popup-head{color:var(--muted);text-transform:uppercase;letter-spacing:.03em;padding:2px 10px 6px;font-size:.7rem;font-weight:700}.fav-popup-empty{color:var(--muted);padding:6px 10px 8px;font-size:.8rem}.fav-popup-empty[hidden]{display:none!important}.fav-row{align-items:stretch;gap:0;display:flex}.fav-go{text-align:left;cursor:pointer;color:var(--text);background:0 0;border:none;flex:1;padding:7px 10px;font-size:.85rem}.fav-go:hover{background:#eff6ff}.fav-rm{color:#9ca3af;cursor:pointer;background:0 0;border:none;flex:0 0 32px;font-size:1.1rem;line-height:1}.fav-rm:hover{color:#b91c1c;background:#fef2f2}.date-field{min-width:160px}.date-quick{flex-wrap:wrap;gap:4px;margin-top:4px;display:flex}.date-chip{border:1px solid var(--border);color:#374151;cursor:pointer;white-space:nowrap;background:#f9fafb;border-radius:999px;padding:2px 8px;font-size:.68rem}.date-chip:hover{color:#1d4ed8;background:#eff6ff;border-color:#93c5fd}.topbar input[type=text],.topbar input[type=date]{border:1px solid var(--border);color:var(--text);background:#fff;border-radius:6px;width:100%;min-width:140px;padding:6px 8px;font-size:.9rem}.topbar input:focus{outline-offset:0;border-color:#60a5fa;outline:2px solid #93c5fd}.btn-load{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:6px;height:32px;padding:6px 12px;font-size:.85rem;font-weight:600}.btn-load:hover{background:#1d4ed8}.btn-load:disabled{opacity:.55;cursor:not-allowed}.meta-inline{color:var(--muted);white-space:nowrap;font-size:.75rem}.attr-inline{color:var(--muted);white-space:nowrap;margin-left:auto;font-size:.7rem}.attr-inline a{color:#2563eb;text-decoration:none}.topbar .btn-load,.topbar .meta-inline,.topbar .attr-inline{display:none}.suggestions{z-index:20;border:1px solid var(--border);background:#fff;border-radius:8px;max-height:220px;margin-top:2px;display:none;position:absolute;top:100%;left:0;right:0;overflow-y:auto;box-shadow:0 8px 24px #0f172a1f}.suggestions.open{display:block}.suggestions button{text-align:left;cursor:pointer;width:100%;color:var(--text);background:0 0;border:none;padding:6px 10px;font-size:.85rem;display:block}.suggestions button:hover,.suggestions button.active{background:#eff6ff}.suggestions .sub{color:var(--muted);font-size:.72rem}.status{color:var(--muted);min-height:0;margin:0 0 4px;font-size:.75rem}.status:empty{display:none}.status.error{color:#b91c1c}.status.loading{color:#1d4ed8}.days-wrap{background:var(--card);border:1px solid var(--border);border-radius:8px;align-items:stretch;gap:4px;margin-bottom:6px;padding:4px;display:flex}.chev{color:#9ca3af;cursor:pointer;background:0 0;border:none;border-radius:6px;flex:0 0 24px;padding:0;font-size:1.25rem}.chev:hover{color:#374151;background:#f3f4f6}.days-scroll{scroll-behavior:smooth;scrollbar-width:thin;flex:1;gap:4px;display:flex;overflow-x:auto}.day-card{text-align:center;cursor:pointer;min-width:72px;font:inherit;color:inherit;background:#fff;border:1px solid #0000;border-radius:6px;flex:1 1 0;padding:4px 2px}.day-card:hover{background:#f9fafb;border-color:#e5e7eb}.day-card.selected{background:#eff6ff;border-color:#93c5fd;box-shadow:inset 0 0 0 1px #bfdbfe}.day-card .dow{color:#374151;margin-bottom:4px;font-size:.72rem;font-weight:600}.day-card .precip{color:#2563eb;justify-content:center;align-items:center;gap:2px;font-size:.65rem;display:flex}.day-card .precip .drop{font-size:.6rem}.chart-shell{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:4px 6px;position:relative}.chart-title{color:var(--muted);flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;padding:0 6px 2px;font-size:.75rem;display:flex}.chart-title strong{color:var(--text);font-size:.85rem}.panels{position:relative}.panel{border-top:1px solid #eef1f4;padding:0;position:relative}.panel:first-child{border-top:none}.panel-label{z-index:2;color:#6b7280;pointer-events:none;font-size:.65rem;font-weight:600;position:absolute;top:2px;left:40px}.panel-primary canvas{width:100%;height:var(--panel-h);cursor:crosshair;display:block}.panel.wind canvas,.panel-primary.wind canvas{height:var(--panel-h-wind)}.panel-secondary canvas{width:100%;height:var(--panel-h-secondary);cursor:crosshair;display:block}.legend-row{color:#4b5563;flex-wrap:wrap;justify-content:flex-end;gap:6px 10px;padding:0 8px 2px;font-size:.62rem;display:flex}.legend-row span{align-items:center;gap:4px;display:inline-flex}.swatch{border-radius:2px;width:9px;height:9px;display:inline-block}.swatch.line{border-radius:1px;width:12px;height:3px}.footer-note{color:var(--muted);margin-top:6px;font-size:.65rem}.hidden{display:none!important}@media (height>=900px){:root{--panel-h:120px;--panel-h-wind:108px;--panel-h-secondary:110px}}.api-usage{color:#9ca3af;margin:4px 0 0;font-size:.68rem;line-height:1.35}