.weather-page * { letter-spacing:0; }
  .weather-wrap { width:min(72rem, calc(100% - 32px)); margin:0 auto; }
  .weather-hero { position:relative; overflow:hidden; }
  .weather-hero-inner { position:relative; padding:48px 0 34px; }
  .weather-editor-grid { display:grid; grid-template-columns:minmax(300px,440px) minmax(360px,1fr); gap:18px; align-items:start; }
  .weather-panel { border:1px solid color-mix(in oklch, var(--color-base-content) 14%, transparent); background:var(--color-base-200); border-radius:8px; padding:18px; }
  .weather-panel-soft { border:1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent); background:var(--color-base-100); border-radius:8px; padding:18px; }
  .weather-section-title { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; margin-bottom:12px; }
  .weather-fieldset { border-top:1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent); padding-top:18px; margin-top:18px; }
  .weather-field { display:grid; gap:6px; margin-bottom:13px; position:relative; z-index:2; }
  .weather-label { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; opacity:.78; font-weight:700; }
  .weather-input, .weather-select { width:100%; border:1px solid color-mix(in oklch, var(--color-base-content) 20%, transparent); background:var(--color-base-100); color:inherit; border-radius:7px; min-height:40px; padding:8px 11px; font-size:13px; }
  .weather-input:focus, .weather-select:focus { outline:none; border-color:color-mix(in oklch, var(--color-primary) 55%, transparent); }
  .weather-mode, .weather-tabs { display:flex; gap:6px; flex-wrap:wrap; }
  .weather-mode button, .weather-tabs span { border:1px solid color-mix(in oklch, var(--color-base-content) 14%, transparent); background:var(--color-base-100); border-radius:7px; padding:7px 10px; font-size:12px; font-weight:700; }
  .weather-mode button.active, .weather-tabs span.active { border-color:color-mix(in oklch, var(--color-primary) 45%, transparent); background:color-mix(in oklch, var(--color-primary) 14%, transparent); color:var(--color-primary); }
  .weather-main-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
  .weather-main-tabs button { border:1px solid color-mix(in oklch, var(--color-base-content) 14%, transparent); background:var(--color-base-200); color:inherit; border-radius:8px; min-height:42px; padding:9px 14px; font-size:13px; font-weight:800; cursor:pointer; }
  .weather-main-tabs button.active { border-color:color-mix(in oklch, var(--color-primary) 45%, transparent); background:color-mix(in oklch, var(--color-primary) 14%, transparent); color:var(--color-primary); }
  .weather-view[hidden] { display:none !important; }
  .weather-live-hero { border:1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent); background:linear-gradient(135deg, var(--color-base-200), var(--color-base-100)); border-radius:8px; padding:18px; margin-bottom:18px; overflow:hidden; position:relative; }
  .weather-live-hero:after { content:""; position:absolute; right:-80px; top:-120px; width:260px; height:260px; border-radius:999px; background:color-mix(in oklch, var(--color-primary) 10%, transparent); pointer-events:none; }
  .weather-live-grid { display:grid; grid-template-columns:minmax(260px,380px) minmax(360px,1fr); gap:18px; align-items:start; }
  .weather-live-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent); }
  .weather-live-controls .weather-field { margin-bottom:0; }
  .weather-live-controls .weather-input, .weather-live-controls .weather-select { min-height:36px; font-size:12px; }
  .weather-live-controls-actions { grid-column:1 / -1; display:flex; gap:8px; flex-wrap:wrap; }
  #weather-live-filter-panel .weather-live-controls { margin-bottom:0; padding-bottom:0; border-bottom:0; }
  #weather-live-filter-panel .weather-live-controls-actions { grid-column:auto; }
  .weather-example-list { display:grid; gap:8px; }
  .weather-example-btn { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; border:1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent); background:var(--color-base-100); color:inherit; border-radius:8px; padding:12px; cursor:pointer; }
  .weather-example-btn:hover, .weather-example-btn.active { border-color:color-mix(in oklch, var(--color-primary) 38%, transparent); background:color-mix(in oklch, var(--color-primary) 9%, transparent); }
  .weather-example-title { display:block; font-size:13px; font-weight:850; }
  .weather-example-sub { display:block; font-size:11px; opacity:.58; margin-top:2px; }
  .weather-live-status { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
  .weather-live-output { min-height:520px; max-height:720px; }
  .weather-response-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
  .weather-response-tabs button { border:1px solid color-mix(in oklch, var(--color-base-content) 14%, transparent); background:var(--color-base-200); color:inherit; border-radius:7px; min-height:34px; padding:7px 11px; font-size:12px; font-weight:800; cursor:pointer; }
  .weather-response-tabs button.active { border-color:color-mix(in oklch, var(--color-primary) 45%, transparent); background:color-mix(in oklch, var(--color-primary) 14%, transparent); color:var(--color-primary); }
  .weather-response-panel[hidden] { display:none !important; }
  .weather-demo-surface { border:1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent); background:linear-gradient(180deg, var(--color-base-200), var(--color-base-100)); border-radius:8px; padding:16px; min-height:520px; }
  .weather-demo-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
  .weather-demo-title strong { display:block; font-size:18px; }
  .weather-demo-title span { display:block; font-size:12px; opacity:.62; margin-top:2px; }
  .weather-demo-icon { width:44px; height:44px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:color-mix(in oklch, var(--color-primary) 14%, transparent); color:var(--color-primary); flex-shrink:0; }
  .weather-demo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .weather-demo-card { border:1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent); background:var(--color-base-100); border-radius:8px; padding:12px; min-width:0; }
  .weather-demo-card span { display:block; font-size:11px; opacity:.55; }
  .weather-demo-card strong { display:block; margin-top:4px; font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .weather-forecast-date { display:flex; align-items:center; gap:8px; margin:14px 0 8px; font-size:12px; font-weight:850; opacity:.72; }
  .weather-forecast-strip { display:grid; grid-template-columns:repeat(6,minmax(108px,1fr)); gap:8px; overflow:auto; padding-bottom:4px; }
  .weather-forecast-card { border:1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent); background:var(--color-base-100); border-radius:8px; padding:11px; min-width:0; }
  .weather-forecast-hour { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:18px; font-weight:900; }
  .weather-forecast-hour i { color:var(--color-primary); opacity:.9; }
  .weather-forecast-temp { font-size:20px; font-weight:900; margin-top:9px; }
  .weather-forecast-meta { display:grid; gap:3px; margin-top:7px; font-size:11px; opacity:.68; }
  .weather-alert-list { display:grid; gap:8px; margin-top:10px; }
  .weather-alert-item { border:1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent); background:var(--color-base-100); border-radius:8px; padding:10px 12px; }
  .weather-live-map { height:260px; border:1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent); border-radius:8px; overflow:hidden; margin-top:12px; background:var(--color-base-100); }
  .weather-checks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .weather-check { display:flex; gap:8px; align-items:center; min-height:38px; border:1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent); background:var(--color-base-100); border-radius:8px; padding:8px 10px; font-size:13px; font-weight:600; }
  .weather-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
  .weather-code { background:#07111f; color:#d9ecff; border:1px solid rgba(148,163,184,.20); border-radius:8px; padding:16px; font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre; overflow:auto; min-height:392px; max-height:560px; }
  .weather-url { word-break:break-all; font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:var(--color-base-200); border:1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent); border-radius:8px; padding:11px; }
  .weather-status { min-height:20px; font-size:12px; opacity:.68; }
  .weather-preview { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
  .weather-metric { border:1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent); background:var(--color-base-200); border-radius:8px; padding:10px; min-width:0; }
  .weather-metric > span { display:block; font-size:11px; opacity:.54; }
  .weather-metric strong { display:block; font-size:18px; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .weather-metric strong span, .weather-cache-item strong span { display:inline; }
  .weather-metric strong i { opacity:.50; margin-right:4px; color:inherit; font-size:.95em; }
  .weather-cache-item strong i { opacity:.50; margin-right:4px; color:inherit; font-size:.95em; }
  .weather-field-open,
  .weather-field:has(.weather-suggest:not(.hidden)) { z-index:1200; }
  .weather-suggest { position:absolute; z-index:1201; top:100%; left:0; right:0; margin-top:6px; max-height:260px; overflow:auto; border:1px solid color-mix(in oklch, var(--color-base-content) 16%, transparent); background:var(--color-base-100); border-radius:10px; box-shadow:0 16px 40px rgba(0,0,0,.24); padding:6px; }
  .weather-suggest button { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; border:0; border-radius:8px; padding:9px 10px; background:transparent; color:inherit; font-size:13px; cursor:pointer; }
  .weather-suggest button:hover { background:color-mix(in oklch, var(--color-primary) 10%, transparent); }
  .weather-map { height:290px; border-radius:8px; overflow:hidden; border:1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent); background:var(--color-base-100); position:relative; z-index:0; }
  .weather-map .leaflet-pane,
  .weather-map .leaflet-top,
  .weather-map .leaflet-bottom { z-index:1; }
  .weather-map .leaflet-control-attribution { font-size:9px; opacity:.65; }
  .weather-field-row { display:flex; gap:8px; padding:7px 0; border-bottom:1px solid color-mix(in oklch, var(--color-base-content) 7%, transparent); font-size:13px; }
  .weather-field-row:last-child { border-bottom:0; }
  .weather-field-label { opacity:.45; font-size:11px; text-transform:uppercase; letter-spacing:.06em; width:126px; flex-shrink:0; padding-top:2px; }
  .weather-field-value { font-weight:650; }
  .weather-endpoint-card { border:1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent); background:var(--color-base-100); border-radius:8px; padding:16px; }
  .weather-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
  .weather-toolbar-actions { display:flex; gap:8px; flex-wrap:wrap; }
  .weather-chip { border:1px solid color-mix(in oklch, var(--color-base-content) 16%, transparent); background:var(--color-base-100); border-radius:8px; min-height:32px; padding:6px 11px; font-size:12px; font-weight:800; cursor:pointer; }
  .weather-chip.active { background:color-mix(in oklch, var(--color-primary) 15%, transparent); border-color:color-mix(in oklch, var(--color-primary) 38%, transparent); color:var(--color-primary); }
  .weather-cache-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:12px; }
  .weather-cache-item { border:1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent); background:var(--color-base-200); border-radius:8px; padding:9px 10px; min-width:0; }
  .weather-cache-item > span { display:block; font-size:10px; opacity:.52; text-transform:uppercase; }
  .weather-cache-item strong { display:block; margin-top:4px; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  @media (max-width: 980px) {
    .weather-editor-grid { grid-template-columns:1fr; }
    .weather-live-grid { grid-template-columns:1fr; }
    .weather-preview { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .weather-live-status { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .weather-live-controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .weather-demo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .weather-cache-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  }
  @media (max-width: 560px) {
    .weather-checks { grid-template-columns:1fr; }
    .weather-live-controls { grid-template-columns:1fr; }
    .weather-demo-grid { grid-template-columns:1fr; }
    .weather-hero-inner { padding-top:34px; }
  }