:root {
      --bg: #f4fbff;
      --bg-2: #e8f7ff;
      --surface: #ffffff;
      --surface-2: #eff8ff;
      --surface-3: #dff3ff;
      --text: #071d31;
      --muted: #526d80;
      --muted-2: #738d9f;
      --brand: #0078bf;
      --brand-2: #19c7f4;
      --brand-3: #004f86;
      --navy: #052b49;
      --ok: #087f5b;
      --warn: #ef8f1e;
      --danger: #b42318;
      --ok-bg: #def8ec;
      --warn-bg: #fff1df;
      --danger-bg: #ffe2df;
      --border: rgba(7, 29, 49, .13);
      --shadow: 0 24px 70px rgba(0, 92, 145, .15);
      --shadow-soft: 0 12px 34px rgba(0, 92, 145, .10);
      --focus: #003b73;
      --radius-xl: 30px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --container: 1440px;
      --tap: 44px;
    }

    html[data-theme="dark"] {
      --bg: #03101c;
      --bg-2: #061c30;
      --surface: #071d31;
      --surface-2: #0e2f4c;
      --surface-3: #123d61;
      --text: #effaff;
      --muted: #b8d4e6;
      --muted-2: #91afc2;
      --brand: #65d9ff;
      --brand-2: #20b9ee;
      --brand-3: #bcefff;
      --navy: #e2f8ff;
      --ok: #8df0bd;
      --warn: #ffb15c;
      --danger: #ffaaa2;
      --ok-bg: rgba(34, 197, 94, .16);
      --warn-bg: rgba(239, 143, 30, .18);
      --danger-bg: rgba(239, 68, 68, .19);
      --border: rgba(218, 244, 255, .17);
      --shadow: 0 24px 76px rgba(0, 0, 0, .40);
      --shadow-soft: 0 12px 34px rgba(0, 0, 0, .26);
      --focus: #a6eeff;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; text-size-adjust: 100%; }
    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      background:
        radial-gradient(circle at 85% -10%, color-mix(in srgb, var(--brand-2) 30%, transparent), transparent 31rem),
        radial-gradient(circle at 5% 22%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 24rem),
        linear-gradient(180deg, var(--bg), var(--bg-2) 46%, var(--bg));
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.5;
    }

    button, input, select { font: inherit; }
    a { color: var(--brand-3); text-underline-offset: .18em; }
    img, canvas, svg { display: block; max-width: 100%; }
    /* Kafelki Leaflet zachodzą na siebie o 1 px, aby skalowanie przeglądarki nie tworzyło jasnej siatki. */
    .leaflet-container .leaflet-tile {
        width: 257px !important;
        height: 257px !important;
        max-width: none !important;
        border: 0 !important;
        mix-blend-mode: normal !important;
    }

    :focus-visible {
      outline: 4px solid var(--focus);
      outline-offset: 4px;
      border-radius: 10px;
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }

    .sr-only {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0,0,0,0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    .skip-link {
      position: fixed;
      top: 12px;
      left: 12px;
      z-index: 1000;
      transform: translateY(-150%);
      padding: 12px 16px;
      border-radius: 999px;
      background: var(--text);
      color: var(--bg);
      font-weight: 900;
      box-shadow: var(--shadow);
    }
    .skip-link:focus { transform: translateY(0); }

    .container {
      width: min(calc(100% - 32px), var(--container));
      margin-inline: auto;
    }

    .access-bar {
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      color: var(--muted);
      font-size: .9rem;
    }

    .access-inner {
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .access-group {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .mini-button {
      min-height: 34px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--surface-2);
      color: var(--text);
      padding: 6px 10px;
      cursor: pointer;
      font-weight: 850;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 80;
      border-bottom: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface) 86%, transparent);
      backdrop-filter: blur(20px);
    }

    .nav {
      min-height: 74px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .brand {
      min-height: var(--tap);
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--text);
      text-decoration: none;
      font-weight: 950;
      letter-spacing: -.045em;
    }

    .mark {
      width: 46px;
      height: 46px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      color: #fff;
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.55), transparent 22%),
        linear-gradient(135deg, var(--brand), var(--brand-2));
      box-shadow: 0 16px 35px rgba(0, 120, 190, .28);
    }

    .nav-links {
      display: flex;
      gap: 4px;
      align-items: center;
    }

    .nav-links a {
      min-height: var(--tap);
      display: inline-flex;
      align-items: center;
      padding: 9px 12px;
      border-radius: 999px;
      text-decoration: none;
      color: var(--muted);
      font-weight: 850;
    }

    .nav-links a:hover {
      color: var(--text);
      background: var(--surface-2);
    }

    .actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .btn {
      min-height: var(--tap);
      min-width: var(--tap);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border: 0;
      border-radius: 999px;
      padding: 12px 18px;
      color: #fff;
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      font-weight: 950;
      text-decoration: none;
      cursor: pointer;
      box-shadow: 0 16px 34px rgba(0, 120, 190, .25);
    }

    .btn.secondary {
      color: var(--text);
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: none;
    }

    .btn.btn-danger {
      background: linear-gradient(135deg, #7f1d1d, #b91c1c);
      box-shadow: 0 16px 34px rgba(127, 29, 29, .25);
    }

.btn.icon {
      width: var(--tap);
      padding: 0;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .header-icon-button {
      width: 42px;
      height: 42px;
      display: inline-grid;
      place-items: center;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--surface-2);
      color: var(--text);
      font-size: 1.15rem;
      font-weight: 950;
      line-height: 1;
      cursor: pointer;
    }

    .header-icon-button svg,
    .user-login-icon svg {
      width: 21px;
      height: 21px;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .header-icon-button:hover,
    .header-icon-button:focus-visible,
    .header-icon-button[aria-expanded="true"],
    .header-icon-button[aria-pressed="true"] {
      border-color: var(--brand);
      background: var(--brand);
      color: #fff;
    }


    .wcag-button-icon {
      width: 24px;
      height: 24px;
      object-fit: contain;
      filter: grayscale(1) contrast(1.08);
      opacity: .9;
    }

    .header-icon-button:hover .wcag-button-icon,
    .header-icon-button:focus-visible .wcag-button-icon,
    .header-icon-button[aria-expanded="true"] .wcag-button-icon,
    .header-icon-button[aria-pressed="true"] .wcag-button-icon {
      filter: brightness(0) invert(1);
      opacity: 1;
    }
    .wcag-icon-button {
      font-size: 1.35rem;
    }

    .menu-btn { display: none; }

    .hero {
      position: relative;
      padding: 28px 0 20px;
      overflow: hidden;
    }

    .hero-card {
      position: relative;
      overflow: hidden;
      border-radius: 38px;
      color: #fff;
      background:
        linear-gradient(135deg, rgba(0, 79, 134, .98), rgba(0, 120, 191, .88) 50%, rgba(25, 199, 244, .74)),
        url("data:image/svg+xml,%3Csvg width='1300' height='560' viewBox='0 0 1300 560' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='white' stroke-opacity='.20' stroke-width='3'%3E%3Cpath d='M-70 80c150 65 252-24 385 30 130 54 108 193 259 216 126 20 178-70 310-36 130 33 161 153 310 139 94-9 155-63 224-120'/%3E%3Cpath d='M-96 235c171 40 251-86 400-37 158 52 100 206 267 240 125 26 189-62 323-20 142 45 168 177 327 169'/%3E%3Cpath d='M192-70c62 152-27 232 34 338 62 108 190 84 252 192 60 105-24 170 45 264'/%3E%3Cpath d='M515-72c80 150 0 244 68 354 75 121 218 82 278 204 45 93-30 160 34 248'/%3E%3C/g%3E%3C/svg%3E");
      background-size: cover;
      box-shadow: var(--shadow);
      padding: clamp(22px, 4vw, 42px);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(360px, .88fr);
      gap: 24px;
      align-items: end;
    }

    .breadcrumb {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      color: rgba(255,255,255,.74);
      font-weight: 850;
      margin-bottom: 16px;
    }

    .breadcrumb a {
      color: #fff;
      text-decoration-thickness: 1px;
    }

    .kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      width: fit-content;
      padding: 9px 13px;
      border: 1px solid rgba(255,255,255,.28);
      background: rgba(255,255,255,.12);
      backdrop-filter: blur(12px);
      border-radius: 999px;
      font-weight: 900;
      color: #fff;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: #68ffac;
      box-shadow: 0 0 0 8px rgba(104,255,172,.18);
    }

    h1, h2, h3 {
      margin: 0;
      line-height: 1.03;
      letter-spacing: -.055em;
    }

    h1 {
      margin-top: 18px;
      max-width: 13ch;
      color: #fff;
      font-size: clamp(2.8rem, 6vw, 5.8rem);
    }

    .hero-lead {
      margin: 18px 0 0;
      max-width: 72ch;
      color: rgba(255,255,255,.86);
      font-size: clamp(1rem, 1.45vw, 1.18rem);
    }

    .current-summary {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .summary-card {
      min-height: 142px;
      border: 1px solid rgba(255,255,255,.25);
      background: rgba(255,255,255,.14);
      backdrop-filter: blur(14px);
      border-radius: 24px;
      padding: 18px;
    }

    .summary-card span {
      color: rgba(255,255,255,.75);
      font-weight: 850;
      font-size: .9rem;
    }

    .summary-card strong {
      display: block;
      margin-top: 10px;
      color: #fff;
      font-size: clamp(2rem, 4vw, 3.5rem);
      line-height: .9;
      letter-spacing: -.08em;
    }

    .summary-card small {
      display: block;
      margin-top: 8px;
      color: rgba(255,255,255,.76);
      font-weight: 750;
    }

    .layout {
      display: grid;
      grid-template-columns: 320px minmax(0, 1fr) 380px;
      gap: 18px;
      align-items: start;
      padding: 18px 0 88px;
    }

    .panel {
      background: color-mix(in srgb, var(--surface) 94%, transparent);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(18px);
      padding: 18px;
    }

    .panel-title {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      margin-bottom: 14px;
    }

    .panel-title p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: .95rem;
    }

    .eyebrow {
      display: inline-flex;
      width: fit-content;
      min-height: 30px;
      align-items: center;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      color: var(--brand-3);
      background: color-mix(in srgb, var(--brand-2) 12%, var(--surface));
      font-size: .78rem;
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 8px;
    }

    .selector-grid {
      display: grid;
      gap: 12px;
    }

    label {
      display: block;
      margin-bottom: 8px;
      color: var(--text);
      font-weight: 900;
    }

    input, select {
      width: 100%;
      min-height: 50px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--surface);
      color: var(--text);
      padding: 12px 14px;
    }

    .group-list {
      display: grid;
      gap: 10px;
      margin-top: 14px;
      max-height: 520px;
      overflow: auto;
      padding-right: 4px;
    }

    .group {
      border: 1px solid var(--border);
      border-radius: 20px;
      background: var(--surface);
      overflow: hidden;
    }

    .group summary {
      min-height: 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      cursor: pointer;
      font-weight: 950;
      letter-spacing: -.02em;
    }

    .group-body {
      padding: 0 10px 10px;
      display: grid;
      gap: 8px;
    }

    .station-link {
      min-height: 48px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--surface-2);
      color: var(--text);
      padding: 10px 12px;
      cursor: pointer;
      text-align: left;
      font-weight: 850;
    }

    .station-link[aria-current="true"] {
      background: color-mix(in srgb, var(--brand-2) 14%, var(--surface));
      border-color: color-mix(in srgb, var(--brand) 50%, var(--border));
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-2) 17%, transparent);
    }

    .station-link small {
      display: block;
      color: var(--muted);
      font-weight: 720;
      margin-top: 2px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 7px 10px;
      border-radius: 999px;
      font-weight: 950;
      font-size: .86rem;
      white-space: nowrap;
    }

    .badge.ok { color: var(--ok); background: var(--ok-bg); }
    .badge.warn { color: var(--warn); background: var(--warn-bg); }
    .badge.danger { color: var(--danger); background: var(--danger-bg); }

    .main-stack {
      display: grid;
      gap: 18px;
    }

    .map-panel {
      min-height: 440px;
      position: relative;
      overflow: hidden;
      padding: 0;
      background:
        radial-gradient(circle at 60% 35%, color-mix(in srgb, var(--brand-2) 20%, transparent), transparent 18rem),
        linear-gradient(135deg, var(--surface), var(--surface-2));
    }

    .map-toolbar {
      position: absolute;
      z-index: 3;
      left: 16px;
      right: 16px;
      top: 16px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      pointer-events: none;
    }

    .map-toolbar > * {
      pointer-events: auto;
    }

    .map-card-title {
      max-width: 420px;
      border: 1px solid var(--border);
      border-radius: 22px;
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      backdrop-filter: blur(14px);
      padding: 14px;
      box-shadow: var(--shadow-soft);
    }

    .map-card-title p {
      margin: 4px 0 0;
      color: var(--muted);
    }

    .map-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .map-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
      background-size: 42px 42px;
      opacity: .55;
      mask-image: radial-gradient(circle at 54% 45%, #000, transparent 78%);
    }

    .terrain {
      position: absolute;
      inset: -12%;
      opacity: .5;
      background-image: url("data:image/svg+xml,%3Csvg width='900' height='600' viewBox='0 0 900 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%230078bf' stroke-opacity='.25' stroke-width='3'%3E%3Cpath d='M-80 120c110 55 196-22 292 21 96 43 80 156 190 178 94 19 137-54 233-22 102 34 122 137 241 126'/%3E%3Cpath d='M-60 270c126 34 181-66 294-24 117 44 82 160 203 190 88 22 138-42 232-12 110 36 132 144 253 134'/%3E%3Cpath d='M115-64c48 116-14 181 34 264 50 86 145 63 190 149 44 84-19 130 34 205'/%3E%3Cpath d='M460-64c80 150 2 242 70 350 74 119 214 82 273 199 48 96-29 158 36 245'/%3E%3C/g%3E%3C/svg%3E");
      background-size: cover;
    }

    .river-band {
      position: absolute;
      left: -8%;
      right: -8%;
      top: 45%;
      height: 120px;
      border-radius: 999px;
      background:
        linear-gradient(90deg, rgba(25,199,244,.10), rgba(25,199,244,.48), rgba(0,120,191,.22));
      transform: rotate(-14deg);
      filter: blur(.2px);
    }

    .river-band::after {
      content: "Wielopolka";
      position: absolute;
      left: 42%;
      top: 38%;
      color: color-mix(in srgb, var(--brand-3) 80%, var(--text));
      font-weight: 950;
      letter-spacing: -.03em;
      transform: rotate(14deg);
    }

    .road {
      position: absolute;
      left: -4%;
      right: -4%;
      top: 34%;
      height: 22px;
      background: color-mix(in srgb, var(--text) 16%, transparent);
      transform: rotate(8deg);
      border-top: 2px dashed rgba(255,255,255,.45);
      border-bottom: 2px dashed rgba(255,255,255,.45);
      opacity: .55;
    }

    .pin {
      position: absolute;
      z-index: 2;
      width: 46px;
      height: 46px;
      border: 0;
      border-radius: 999px 999px 999px 10px;
      transform: rotate(-45deg);
      cursor: pointer;
      background: var(--brand);
      box-shadow: 0 16px 38px rgba(0, 108, 181, .32);
    }

    .pin::after {
      content: "";
      position: absolute;
      inset: 12px;
      border-radius: 999px;
      background: #fff;
    }

    .pin.ok { background: #0ca678; }
    .pin.warn { background: #ef8f1e; }
    .pin.danger { background: #ef4444; }

    .pin-glinik { left: 32%; top: 52%; }
    .pin-laczki { left: 45%; top: 42%; }
    .pin-okonin { left: 58%; top: 56%; }
    .pin-kozodrza { left: 70%; top: 44%; }
    .pin-zagorzyce { left: 23%; top: 38%; }
    .pin-rain { left: 78%; top: 62%; border-radius: 999px; transform: none; }

    .map-legend {
      position: absolute;
      z-index: 3;
      left: 16px;
      right: 16px;
      bottom: 16px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      border: 1px solid var(--border);
      border-radius: 22px;
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      backdrop-filter: blur(14px);
      padding: 12px;
      width: fit-content;
      max-width: calc(100% - 32px);
    }

    .legend-dot {
      width: 12px;
      height: 12px;
      border-radius: 999px;
      display: inline-block;
      margin-right: 6px;
    }
    .legend-dot.ok { background: #0ca678; }
    .legend-dot.warn { background: #ef8f1e; }
    .legend-dot.danger { background: #ef4444; }
    .legend-dot.rain { background: #3b82f6; }

    .station-overview {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(320px, .7fr);
      gap: 18px;
    }

    .photo-card {
      overflow: hidden;
      padding: 0;
    }

    .photo-card img {
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      background: var(--surface-2);
    }

    .photo-caption {
      padding: 16px;
    }

    .photo-caption p {
      margin: 4px 0 0;
      color: var(--muted);
    }

    .section-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      border-bottom: 1px solid var(--border);
      padding-bottom: 10px;
      margin-bottom: 16px;
    }

    .tab {
      min-height: 40px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      border-radius: 999px;
      padding: 8px 12px;
      font-weight: 900;
      cursor: pointer;
    }

    .tab[aria-selected="true"] {
      background: var(--brand);
      color: #fff;
      border-color: transparent;
    }

    .chart-wrap {
      height: 330px;
      border-radius: 24px;
      border: 1px solid var(--border);
      background:
        radial-gradient(circle at 74% 24%, color-mix(in srgb, var(--brand-2) 18%, transparent), transparent 16rem),
        var(--surface);
      padding: 12px;
    }

    .cross-section {
      position: relative;
      min-height: 300px;
      border-radius: 24px;
      border: 1px solid var(--border);
      background:
        linear-gradient(180deg, var(--surface-2), var(--surface));
      overflow: hidden;
      padding: 18px;
    }

    .cross-svg {
      width: 100%;
      height: 260px;
    }

    .table-wrap {
      overflow-x: auto;
      border-radius: 22px;
      border: 1px solid var(--border);
      background: var(--surface);
    }

    table {
      width: 100%;
      min-width: 760px;
      border-collapse: collapse;
    }

    th, td {
      padding: 14px 15px;
      border-bottom: 1px solid var(--border);
      text-align: left;
    }

    th {
      background: var(--surface-2);
      color: var(--muted);
      font-size: .82rem;
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    tr:last-child td { border-bottom: 0; }

    .delta-up { color: var(--danger); font-weight: 950; }
    .delta-down { color: var(--ok); font-weight: 950; }

    .history-controls {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
      gap: 12px;
      align-items: end;
      margin-bottom: 16px;
    }

    .right-stack {
      display: grid;
      gap: 18px;
    }

    .alert-form {
      display: grid;
      gap: 13px;
    }

    .check {
      display: flex;
      gap: 11px;
      align-items: flex-start;
      color: var(--muted);
      font-weight: 720;
    }

    .check input {
      width: 22px;
      min-height: 22px;
      height: 22px;
      margin-top: 2px;
      accent-color: var(--brand);
    }

    .toast {
      display: none;
      padding: 13px;
      border-radius: 16px;
      color: var(--ok);
      background: var(--ok-bg);
      font-weight: 850;
      border: 1px solid color-mix(in srgb, var(--ok) 23%, transparent);
    }

    .toast.show { display: block; }

    .context-list {
      display: grid;
      gap: 12px;
    }

    .context-item {
      display: grid;
      grid-template-columns: 42px 1fr;
      gap: 12px;
      padding: 13px;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: var(--surface);
    }

    .context-item i {
      width: 42px;
      height: 42px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      color: var(--brand-3);
      background: var(--surface-2);
      font-style: normal;
      font-weight: 950;
    }

    .context-item p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: .94rem;
    }

    .footer {
      padding: 34px 0 96px;
      border-top: 1px solid var(--border);
      color: var(--muted);
    }

    .bottom-nav {
      display: none;
      position: fixed;
      left: 12px;
      right: 12px;
      bottom: 12px;
      z-index: 90;
      padding: 8px;
      border-radius: 26px;
      border: 1px solid var(--border);
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      backdrop-filter: blur(20px);
      box-shadow: var(--shadow);
    }

    .bottom-nav a {
      flex: 1;
      min-height: 48px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      text-decoration: none;
      color: var(--muted);
      font-weight: 950;
      font-size: .78rem;
    }

    body.large-font { font-size: 1.08rem; }
    body.xlarge-font { font-size: 1.18rem; }

    @media (max-width: 1240px) {
      .layout { grid-template-columns: 300px minmax(0, 1fr); }
      .right-stack { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
      .history-controls { grid-template-columns: repeat(2, minmax(0,1fr)); }
    }

    @media (max-width: 960px) {
      .hero-grid,
      .layout,
      .station-overview {
        grid-template-columns: 1fr;
      }

      .right-stack {
        grid-template-columns: 1fr;
      }

      .nav-links {
        display: none;
        position: absolute;
        top: 82px;
        left: 16px;
        right: 16px;
        border-radius: 22px;
        border: 1px solid var(--border);
        background: var(--surface);
        padding: 10px;
        box-shadow: var(--shadow);
      }

      .nav-links.open { display: grid; }
      .nav-links a { border-radius: 16px; }
      .menu-btn { display: inline-flex; }
      .bottom-nav { display: flex; }
    }

    @media (max-width: 700px) {
      .container { width: min(calc(100% - 22px), var(--container)); }
      .brand-text { display: none; }
      .actions .btn[href="#alerty"] { display: none; }
      .access-inner { align-items: flex-start; padding: 8px 0; }
      h1 { font-size: clamp(2.6rem, 14vw, 4.6rem); }
      .current-summary { grid-template-columns: 1fr; }
      .map-panel { min-height: 520px; }
      .map-toolbar { display: grid; }
      .map-legend { width: auto; }
      .history-controls { grid-template-columns: 1fr; }
      .chart-wrap { height: 280px; }
    }

/* Adapter wzorca do widoków aplikacji PP. */
html.dark-theme {
  --bg:#03101c;--bg-2:#061c30;--surface:#071d31;--surface-2:#0e2f4c;--surface-3:#123d61;
  --text:#effaff;--muted:#b8d4e6;--muted-2:#91afc2;--brand:#65d9ff;--brand-2:#20b9ee;
  --brand-3:#bcefff;--navy:#e2f8ff;--ok:#8df0bd;--warn:#ffb15c;--danger:#ffaaa2;
  --ok-bg:rgba(34,197,94,.16);--warn-bg:rgba(239,143,30,.18);--danger-bg:rgba(239,68,68,.19);
  --border:rgba(218,244,255,.17);--shadow:0 24px 76px rgba(0,0,0,.40);--shadow-soft:0 12px 34px rgba(0,0,0,.26);--focus:#a6eeff;
}
body.home-page,body.details-page { background:radial-gradient(circle at 85% -10%,color-mix(in srgb,var(--brand-2) 30%,transparent),transparent 31rem),radial-gradient(circle at 5% 22%,color-mix(in srgb,var(--brand) 16%,transparent),transparent 24rem),linear-gradient(180deg,var(--bg),var(--bg-2) 46%,var(--bg)); }
.container,.home-container { width:min(calc(100% - 32px),var(--container));margin-inline:auto; }
.sr-only { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important; }

/* Opcjonalny panel WCAG. */
.control-group { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.mini-button,.accessibility-panel button { min-height:38px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);color:var(--text);padding:7px 12px;cursor:pointer;font-weight:850; }
.mini-button[aria-pressed="true"],.accessibility-panel button[aria-pressed="true"] { border-color:var(--brand);background:var(--brand);color:#fff; }
.accessibility-panel { border-bottom:2px solid var(--brand);background:var(--surface);box-shadow:var(--shadow-soft); }
.accessibility-panel[hidden] { display:none; }
.accessibility-inner { display:flex;align-items:end;gap:24px;flex-wrap:wrap;padding-block:18px; }
.accessibility-inner fieldset { min-width:230px;margin:0;padding:0;border:0; }
.accessibility-inner legend { margin-bottom:7px;color:var(--text);font-weight:900; }
.reset-accessibility { margin-left:auto; }
html.font-large { font-size:122%; }
html.font-xlarge { font-size:160%; }

/* Nagłówek wspólny. */
.topbar,.home-navbar { position:sticky;top:0;z-index:80;min-height:74px;padding:0;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--text);box-shadow:none;backdrop-filter:blur(20px); }
.topbar { display:flex;align-items:center;justify-content:space-between;padding-inline:max(16px,calc((100% - var(--container))/2)); }
.navbar-content { min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:16px; }
.brand,.home-brand { min-height:44px;display:inline-flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font-weight:950;letter-spacing:-.035em; }
.brand img,.home-brand img { width:46px;height:46px;border:0;border-radius:50%;background:transparent;object-fit:contain;box-shadow:0 8px 20px rgba(0,120,191,.18); }
.brand span,.home-brand span { display:grid;gap:1px; }.brand small,.home-brand small { color:var(--muted);font-size:.76rem;letter-spacing:0; }
.topbar-actions,.navbar-actions { display:flex;align-items:center;gap:9px; }
.app-link,.home-login { min-height:44px;display:inline-flex;align-items:center;padding:10px 16px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);color:var(--text);font-weight:850;text-decoration:none; }

/* Strona główna. */
.home-main { min-height:calc(100vh - 130px);padding:22px 0 60px; }
.home-container.home-layout { width:100%;max-width:none;margin:0; }
.home-layout { display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;align-items:start; }
.home-content { min-width:0;padding-right:18px; }
.home-sidebar { position:sticky;top:92px;max-height:calc(100vh - 112px);overflow:auto;border:1px solid var(--border);border-left:0;border-radius:0 var(--radius-lg) var(--radius-lg) 0;background:var(--surface);box-shadow:var(--shadow-soft); }
.home-sidebar-heading { padding:17px 18px;border-bottom:1px solid var(--border);font-size:1.05rem;font-weight:950; }
.home-sidebar-nav { padding:8px; }
.sidebar-group { border-bottom:1px solid var(--border); }
.sidebar-group:last-child { border-bottom:0; }
.sidebar-group summary { min-height:44px;display:flex;align-items:center;gap:8px;padding:9px 10px;color:var(--text);font-weight:900;cursor:pointer; }
.sidebar-group summary span { flex:1; }
.sidebar-group summary small { min-width:27px;padding:3px 7px;border-radius:999px;background:var(--surface-3);color:var(--brand-3);text-align:center; }
.sidebar-group ul { display:grid;gap:2px;margin:0;padding:0 4px 9px;list-style:none; }
.sidebar-group li a { min-height:40px;display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:10px;color:var(--text);font-size:.88rem;text-decoration:none; }
.sidebar-group li a:hover,.sidebar-group li a:focus-visible { background:var(--surface-2); }
.sidebar-group li .status-mark { width:6px;height:25px;flex:0 0 6px; }
.sidebar-rain-group { margin-top:8px;border-top:2px solid var(--brand); }
.home-overview { display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px; }
.home-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px; }
.home-pretitle,.eyebrow { color:var(--brand);font-size:.78rem;font-weight:950;letter-spacing:.13em;text-transform:uppercase; }
.home-heading h1 { margin:4px 0 0;max-width:850px;font-size:clamp(2.3rem,5vw,4.8rem);line-height:.98;letter-spacing:-.06em; }
.home-heading p { color:var(--muted);font-size:1.02rem; }
.home-snapshot { min-width:280px;display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-soft); }
.home-snapshot div { display:grid;gap:2px; }.home-snapshot small { color:var(--muted); }
.home-status-dot { width:12px;height:12px;border-radius:50%;background:var(--muted-2); }.is-current .home-status-dot { background:var(--ok);box-shadow:0 0 0 6px color-mix(in srgb,var(--ok) 18%,transparent); }.is-stale .home-status-dot { background:var(--warn); }
.home-stats { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.stat-card { width:48px;height:48px;display:grid;place-items:center;padding:0;border:2px solid var(--brand);border-radius:50%;background:var(--surface);box-shadow:none; }
.stat-card strong { font-size:1rem;line-height:1; }
.stat-all { color:var(--brand-3);background:color-mix(in srgb,var(--brand) 12%,var(--surface)); }
.stat-green { color:var(--ok);border-color:var(--ok);background:var(--ok-bg); }.stat-yellow { color:var(--warn);border-color:var(--warn);background:var(--warn-bg); }.stat-red { color:var(--danger);border-color:var(--danger);background:var(--danger-bg); }
.home-map-action { width:100%;margin:0 0 12px; }
.home-map-button { width:100%;min-height:52px;padding:10px 18px;border:1px solid var(--brand);border-radius:var(--radius-lg);background:var(--surface);color:var(--brand-3);font-weight:950;cursor:pointer; }
.home-map-button:hover { background:var(--surface-2); }
.home-map-section { width:100%;margin:0 0 18px;scroll-margin-top:92px;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-soft); }
.home-map-section[hidden] { display:none; }
.home-map-status { padding:10px 16px;border-bottom:1px solid var(--border);color:var(--muted);font-size:.86rem; }
.home-station-map { width:100%;height:calc(100svh - 170px);min-height:420px;max-height:800px;background:var(--surface-2); }
.home-station-map .leaflet-popup-content-wrapper,.home-station-map .leaflet-popup-tip { background:var(--surface);color:var(--text); }
.home-station-map .leaflet-popup-content { min-width:190px;margin:15px 17px; }
.map-popup { display:grid;gap:8px; }.map-popup strong { font-size:1rem; }.map-popup-type { margin:0;color:var(--muted); }
.map-popup-link { min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:10px;background:var(--brand);color:#fff!important;font-weight:900;text-decoration:none; }
.public-map-marker { background:transparent;border:0; }
.home-card,.details-card { border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-soft); }
.home-card-header { display:flex;align-items:center;justify-content:space-between;gap:18px;padding:19px 22px;border-bottom:1px solid var(--border); }
.home-card-header h2 { margin:0;font-size:1.4rem; }.home-card-header p { margin:4px 0 0;color:var(--muted); }.station-count { padding:6px 11px;border-radius:999px;background:var(--surface-3);color:var(--brand-3);font-weight:900; }
.home-filters { display:grid;grid-template-columns:minmax(180px,.7fr) minmax(180px,.7fr) minmax(260px,1.6fr);gap:14px;padding:18px 22px;border-bottom:1px solid var(--border); }
.home-filters label { display:grid;gap:6px;color:var(--muted);font-weight:800; }.home-filters input,.home-filters select { min-height:46px;padding:9px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--text); }
.station-table-head,.home-station-row { display:grid;grid-template-columns:minmax(250px,1fr) minmax(150px,240px) 24px;gap:16px;align-items:center; }
.station-table-head { padding:10px 22px;border-bottom:1px solid var(--border);color:var(--muted);font-size:.74rem;font-weight:900;text-transform:uppercase; }
.home-station-list { display:grid; }.home-station-row { min-height:78px;padding:12px 22px;border-bottom:1px solid var(--border);color:var(--text);text-decoration:none; }.home-station-row:hover { background:var(--surface-2); }.station-identity { display:flex;align-items:center;gap:12px; }.station-identity div,.station-measurement,.station-time { display:grid;gap:3px; }.station-identity small,.station-type { color:var(--muted); }.status-mark { width:10px;height:38px;border-radius:999px;background:var(--muted); }.status-mark.status-normal { background:var(--ok); }.status-mark.status-warning { background:var(--warn); }.status-mark.status-alarm { background:var(--danger); }
.status-label { display:inline-flex;justify-content:center;padding:6px 10px;border-radius:999px;font-size:.78rem;font-weight:950; }.status-normal { background:var(--ok-bg);color:var(--ok); }.status-warning { background:var(--warn-bg);color:var(--warn); }.status-alarm { background:var(--danger-bg);color:var(--danger); }.station-arrow { color:var(--muted);font-size:1.7rem; }
.filter-empty,.home-empty { margin:18px;padding:36px;text-align:center;color:var(--muted); }.home-footer,.footer,footer { padding:26px;border-top:1px solid var(--border);background:var(--surface);color:var(--muted);text-align:center; }

/* Szczegóły stacji. */
.details-main,.page { width:min(calc(100% - 32px),var(--container));margin-inline:auto;padding:28px 0 54px; }
.details-back { display:inline-flex;margin-bottom:18px;padding:9px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--brand-3);font-weight:900;text-decoration:none; }
.details-hero { position:relative;min-height:260px;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:34px;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--surface),var(--surface-2));box-shadow:var(--shadow); }
.details-hero::before { content:"";position:absolute;inset:auto -8% -75% 38%;height:360px;border-radius:50%;background:linear-gradient(110deg,color-mix(in srgb,var(--brand) 26%,transparent),color-mix(in srgb,var(--brand-2) 33%,transparent));transform:rotate(-8deg); }
.details-hero > * { position:relative;z-index:1; }.details-hero h1 { margin:8px 0 0;max-width:920px;color:var(--text);font-size:clamp(2.5rem,6vw,5.3rem);line-height:.96;letter-spacing:-.065em; }.details-hero p { color:var(--muted);font-weight:850; }
.details-hero .status-label { max-width:390px;padding:13px 16px;border:1px solid var(--border);background:var(--surface);font-size:.9rem;line-height:1.4;box-shadow:var(--shadow-soft); }
.modern-details-grid { display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;margin-top:22px; }.details-card { padding:20px; }.details-card > span { display:block;margin-bottom:8px;color:var(--muted);font-size:.76rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase; }.details-card > strong { font-size:1.6rem; }
.modern-details-grid > .details-card:nth-child(n+2):nth-child(-n+7) { grid-column:span 2;min-height:132px;display:flex;flex-direction:column;justify-content:center; }.modern-details-grid > .details-card:nth-child(8),.modern-details-grid > .details-card:nth-child(10) { grid-column:1/-1; }.modern-details-grid > .details-card:nth-child(1) { grid-column:span 5; }.modern-details-grid > .details-card:nth-child(9) { grid-column:span 7; }
.station-public-photo img { display:block;width:100%;height:500px;border-radius:var(--radius-md);object-fit:cover;background:var(--surface-2); }.forecast-list { display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }.forecast-item { padding:14px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-2); }.forecast-item span,.forecast-item small { display:block;color:var(--muted); }
.public-section-frame { min-height:520px;padding:16px 16px 36px;overflow:visible;border:1px solid var(--border);border-radius:var(--radius-md);background:#f8fbff; }.public-section-frame svg { display:block;width:100%;height:470px;overflow:visible;color:#071d31;cursor:zoom-in; }
.public-rain-frame { display:grid;place-items:center;min-height:520px; }
.public-rain-frame svg { width:min(100%,620px);height:470px; }
.section-preview-button { min-height:44px;margin-top:12px;padding:9px 16px;border:0;border-radius:999px;background:var(--brand);color:#fff;font-weight:900;cursor:pointer; }
.details-history-wrap { max-height:560px;overflow:auto;border:1px solid var(--border);border-radius:var(--radius-md); }.details-history { width:100%;border-collapse:collapse; }.details-history th,.details-history td { padding:11px 13px;border-bottom:1px solid var(--border);text-align:left; }.details-history th { position:sticky;top:0;background:var(--surface-2);color:var(--muted); }
.details-notice { color:var(--muted); }.section-preview-modal[hidden] { display:none; }.section-preview-modal { position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(3,16,28,.82); }.section-preview-content { width:98vw;max-height:96vh;padding:18px;overflow:auto;border-radius:var(--radius-lg);background:var(--surface); }.section-preview-close { display:block;margin-left:auto;min-height:44px;padding:9px 14px;border:0;border-radius:999px;background:var(--danger);color:#fff;font-weight:900; }.section-preview-body svg { display:block;width:100%;height:84vh;touch-action:none; }
/* Opcjonalne presety kontrastu. */
html.contrast-mono { --bg:#fff;--bg-2:#fff;--surface:#fff;--surface-2:#fff;--surface-3:#fff;--text:#000;--muted:#000;--muted-2:#222;--brand:#000;--brand-2:#000;--brand-3:#000;--navy:#000;--ok:#000;--warn:#000;--danger:#000;--ok-bg:#fff;--warn-bg:#fff;--danger-bg:#fff;--border:#000;--focus:#000; }
html.contrast-mono body { background:#fff!important;color:#000!important; } html.contrast-mono img { filter:grayscale(1) contrast(1.2); }
html.contrast-yellow { --bg:#000;--bg-2:#000;--surface:#000;--surface-2:#111;--surface-3:#222;--text:#ffeb00;--muted:#ffeb00;--muted-2:#fff36a;--brand:#ffeb00;--brand-2:#ffeb00;--brand-3:#ffeb00;--navy:#ffeb00;--ok:#ffeb00;--warn:#ffeb00;--danger:#ffeb00;--ok-bg:#000;--warn-bg:#000;--danger-bg:#000;--border:#ffeb00;--focus:#fff; }
html.contrast-yellow body { background:#000!important;color:#ffeb00!important; }
html.contrast-blackyellow { --bg:#ffe500;--bg-2:#ffe500;--surface:#ffe500;--surface-2:#ffed45;--surface-3:#fff176;--text:#000;--muted:#000;--muted-2:#171717;--brand:#000;--brand-2:#000;--brand-3:#000;--navy:#000;--ok:#000;--warn:#000;--danger:#000;--ok-bg:#ffe500;--warn-bg:#ffe500;--danger-bg:#ffe500;--border:#000;--focus:#005fcc; }
html.contrast-blackyellow body { background:#ffe500!important;color:#000!important; }
html.contrast-inverse { --bg:#000;--bg-2:#000;--surface:#000;--surface-2:#111;--surface-3:#191919;--text:#fff;--muted:#fff;--muted-2:#ddd;--brand:#fff;--brand-2:#fff;--brand-3:#fff;--navy:#fff;--ok:#fff;--warn:#fff;--danger:#fff;--ok-bg:#000;--warn-bg:#000;--danger-bg:#000;--border:#fff;--focus:#ffeb00; }
html.contrast-inverse body { background:#000!important;color:#fff!important; }
html[class*="contrast-"] * { text-shadow:none!important; }.contrast-yellow .public-section-frame,.contrast-yellow .public-section-frame svg,.contrast-inverse .public-section-frame,.contrast-inverse .public-section-frame svg { background:#000!important;color:var(--text)!important; }.contrast-mono .public-section-frame,.contrast-mono .public-section-frame svg { background:#fff!important;color:#000!important; }.contrast-blackyellow .public-section-frame,.contrast-blackyellow .public-section-frame svg { background:#ffe500!important;color:#000!important; }

@media (max-width:1050px) { .home-layout { grid-template-columns:240px minmax(0,1fr); }.station-table-head { display:none; }.modern-details-grid > .details-card:nth-child(n+2):nth-child(-n+7) { grid-column:span 4; }.modern-details-grid > .details-card:nth-child(1),.modern-details-grid > .details-card:nth-child(9) { grid-column:1/-1; } }
@media (max-width:720px) { .accessibility-inner { align-items:stretch;flex-direction:column; }.reset-accessibility { margin-left:0; }.home-layout { grid-template-columns:1fr; }.home-sidebar { position:static;max-height:420px;border-left:1px solid var(--border);border-radius:var(--radius-lg);margin:0 12px; }.home-content { padding:0 12px; }.home-overview { align-items:flex-start;flex-direction:column; }.home-snapshot { width:100%;min-width:0; }.home-heading,.details-hero { align-items:stretch;flex-direction:column; }.home-heading h1,.details-hero h1 { font-size:clamp(2.4rem,13vw,4.5rem); }.home-stats { gap:7px; }.home-map-action { justify-content:stretch; }.home-map-button { width:100%; }.home-station-map { height:max(420px,calc(100svh - 150px)); }.home-filters { grid-template-columns:1fr; }.home-station-row { grid-template-columns:1fr auto; }.home-station-row .station-identity { grid-column:1; }.home-station-row .station-type { display:none; }.modern-details-grid { grid-template-columns:1fr; }.modern-details-grid > .details-card:nth-child(n) { grid-column:1!important; }.station-public-photo img { height:310px; }.forecast-list { grid-template-columns:1fr; } }
.accessibility-inner{align-items:center;}
.accessibility-inner fieldset{display:grid;align-content:center;}
.accessibility-inner legend{line-height:1.15;}
.accessibility-panel .container{width:min(calc(100% - 20px),1820px);margin-inline:auto;}