/* ==========================================================
         AlertyPL — Pixel UI 2026
         вњ… 100vh fix with --app-h
         вњ… animated theme toggle (light/dark)
         вњ… fixed focus outline issue (removed blue square)
         вњ… deselect region on sheet close
         вњ… mobile legend toggle
         вњ… no 100vh sheet on mobile (auto height)
         вњ… fullscreen mobile menu + smooth animations
         вњ… tap highlight removed, mobile zoom disabled
         ========================================================== */

      :root {
        /* Light (from design) */
        --page: #ffffff;
        --ink: #1a1a1a;
        --muted: #7a7a7a;
        --accent: #FBC02D;

        --line: rgba(0, 0, 0, 0.12);
        --line-2: rgba(0, 0, 0, 0.18);

        --map-base: #efe6dc;
        --map-stroke: rgba(18, 18, 18, 0.22);

        --alert: #c55a5a;
        --alert-stroke: rgba(18, 18, 18, 0.28);

        --panel: #f3f4f6;
        --panel-line: rgba(0, 0, 0, 0.12);
        --active-card: #efe6dc;
        --prev-card: #d9dadc;

        --shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        --shadow-soft: 0 8px 18px rgba(0, 0, 0, 0.08);

        --container: 1200px;

        --header-h: 86px;
        --map-max: 760px;
        --gap: 18px;

        --radius-12: 12px;
        --radius-14: 14px;

        --focus: 2px solid rgba(59, 130, 246, 0.95);

        --app-h: 100vh;

        --toggle-w: 52px;
        --toggle-h: 32px;
      }

      @media (prefers-color-scheme: dark) {
        :root {
          --page: #0f0f10;
          --ink: #f1f1f1;
          --muted: rgba(241, 241, 241, 0.7);
          --accent: #F59E0B;

          --line: rgba(255, 255, 255, 0.12);
          --line-2: rgba(255, 255, 255, 0.18);

          --map-base: #2a2622;
          --map-stroke: rgba(255, 255, 255, 0.16);

          --alert: #b65252;
          --alert-stroke: rgba(255, 255, 255, 0.18);

          --panel: #141416;
          --panel-line: rgba(255, 255, 255, 0.14);
          --active-card: #6f3b43;
          --prev-card: #3a3845;

          --shadow: 0 16px 38px rgba(0, 0, 0, 0.38);
          --shadow-soft: 0 12px 26px rgba(0, 0, 0, 0.3);
        }
      }

      html[data-theme="light"] {
        color-scheme: light;
        --accent: #FBC02D;
        --page: #ffffff;
        --ink: #1a1a1a;
        --muted: #7a7a7a;
        --line: rgba(0, 0, 0, 0.12);
        --line-2: rgba(0, 0, 0, 0.18);
        --map-base: #efe6dc;
        --map-stroke: rgba(18, 18, 18, 0.22);
        --alert: #c55a5a;
        --alert-stroke: rgba(18, 18, 18, 0.28);
        --panel: #f3f4f6;
        --panel-line: rgba(0, 0, 0, 0.12);
        --active-card: #efe6dc;
        --prev-card: #d9dadc;
        --shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        --shadow-soft: 0 8px 18px rgba(0, 0, 0, 0.08);
      }
      
      html[data-theme="dark"] {
        color-scheme: dark;
        --accent: #F59E0B;
        --page: #0f0f10;
        --ink: #f1f1f1;
        --muted: rgba(241, 241, 241, 0.7);
        --line: rgba(255, 255, 255, 0.12);
        --line-2: rgba(255, 255, 255, 0.18);
        --map-base: #2a2622;
        --map-stroke: rgba(255, 255, 255, 0.16);
        --alert: #b65252;
        --alert-stroke: rgba(255, 255, 255, 0.18);
        --panel: #141416;
        --panel-line: rgba(255, 255, 255, 0.14);
        --active-card: #6f3b43;
        --prev-card: #3a3845;
        --shadow: 0 16px 38px rgba(0, 0, 0, 0.38);
        --shadow-soft: 0 12px 26px rgba(0, 0, 0, 0.3);
      }

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

      * {
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent; /* no gray/blue tap highlight */
        touch-action: manipulation; /* Заборона зуму через жести */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
      }
      
      /* Extra zoom prevention */
      input, textarea, select {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        touch-action: manipulation;
      }

      html,
      body {
        height: 100%;
        touch-action: pan-x pan-y; /* Дозволити тільки скрол, заборонити пінч-зум */
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        overscroll-behavior: none;
      }

      body {
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
          "Apple Color Emoji", "Segoe UI Emoji";
        background: var(--page);
        color: var(--ink);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        overflow: hidden;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height для мобільних */
        min-height: 100%;
        position: relative;
      }
      
      /* Планшети <= 700px - фіксована висота з скролом */
      @media (max-width: 700px) and (min-width: 480px) {
        body {
          overflow-y: auto;
          overflow-x: hidden;
          height: 100vh;
          min-height: 100vh;
        }
      }

      .app {
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
      }
      
      /* Планшети <= 700px - дозволяємо скрол */
      @media (max-width: 700px) and (min-width: 480px) {
        .app {
          height: auto;
          min-height: 100vh;
          overflow: visible;
        }
      }

      a {
        color: inherit !important;
        text-decoration: none;
        -webkit-user-select: none;
        user-select: none;
      }
      
      a:visited {
        color: inherit !important;
      }
      
      a:hover {
        color: inherit !important;
      }
      
      a:active {
        color: inherit !important;
      }

      button {
        -webkit-user-select: none;
        user-select: none;
        color: inherit;
      }
      
      button svg {
        color: inherit;
        fill: currentColor;
        stroke: currentColor;
      }
      
      /* вњ… FIX: Removed focus-visible outline to prevent blue square */
      a:focus-visible,
      button:focus-visible {
        outline: none;
      }

      /* ======================
         Main Area - КРИТИЧНО для правильного відображення
         ====================== */
      main {
        flex: 1;
        min-height: 0; /* Важливо для flexbox */
        overflow: hidden;
        display: flex;
        flex-direction: column;
        position: relative;
      }

      /* Мобільні пристрої */
      @media (max-width: 979px) {
        main {
          overflow: visible;
        }
      }

      /* Landscape режими - дозволяємо скролл */
      @media (max-width: 979px) and (orientation: landscape) {
        main {
          overflow: visible;
          min-height: auto;
        }
      }

      .container {
        width: min(var(--container), 100%);
        margin-inline: auto;
        padding-inline: 16px;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      
      /* Планшети <= 700px - auto висота */
      @media (max-width: 700px) and (min-width: 480px) {
        .container {
          height: auto;
          min-height: calc(100vh - var(--header-h));
          padding-inline: 20px;
        }
      }

      /* Зменшені відступи для landscape */
      @media (max-width: 979px) and (orientation: landscape) {
        .container {
          padding-inline: 12px;
        }
      }

      /* ======================
         Landscape Mode - Адаптивний скролл та розміри
         ====================== */
      
      /* Планшети та великі телефони в landscape */
      @media (max-width: 979px) and (max-height: 600px) and (orientation: landscape) {
        body, .app {
          overflow-y: auto;
          overflow-x: hidden;
          height: auto;
          min-height: 100vh;
        }
        
        header {
          position: sticky;
          top: 0;
          background: var(--page);
          z-index: 50;
        }
        
        main {
          min-height: calc(100vh - 56px);
          overflow: visible;
        }
        
        .map-area {
          min-height: 450px;
          padding: 12px 0;
        }
        
        .sheet {
          max-height: 65vh;
        }
      }

      /* Телефони в landscape - ще менші розміри */
      @media (max-width: 896px) and (max-height: 500px) and (orientation: landscape) {
        body, .app {
          overflow-y: auto;
          overflow-x: hidden;
          height: auto;
          min-height: 100vh;
        }
        
        header {
          position: sticky;
          top: 0;
          background: var(--page);
          z-index: 50;
          box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        main {
          min-height: calc(100vh - 52px);
          overflow: visible;
        }
        
        .topbar {
          min-height: 52px;
        }
      }

      /* ======================
         ПЛАНШЕТИ (540px - 820px) - Виправлення верстки
         ====================== */
      @media (min-width: 540px) and (max-width: 820px) {
        /* Header не повинен бути фіксованим на планшетах */
        header {
          position: relative;
          z-index: 10;
        }
        
        /* Main область з правильним padding-top */
        main {
          padding-top: 0;
          overflow: visible;
        }
        
        /* Container з адекватними відступами */
        .container {
          padding-inline: 20px;
          height: auto;
          min-height: calc(100vh - var(--header-h));
        }
        
        /* Map area не повинна заходити під header */
        .map-area {
          margin-top: 16px;
          padding: 16px 0;
          min-height: 500px;
        }
        
        /* Map wrapper */
        .map-wrap {
          max-width: 600px;
          margin: 0 auto;
        }
        
        /* Sheet адаптація для планшетів */
        .sheet {
          left: 50%;
          transform: translate3d(-50%, 16px, 0);
          width: 400px;
          max-width: calc(100vw - 40px);
        }
        
        .sheet[data-open="true"] {
          transform: translate3d(-50%, 0, 0);
        }
        
        /* Below секція */
        .below {
          margin-top: 24px;
          padding-bottom: 32px;
        }
        
        /* FAB legend позиціонування */
        .fab-legend {
          right: 20px;
          bottom: 20px;
        }
      }
      
      /* Спеціально для portrait mode на планшетах */
      @media (min-width: 540px) and (max-width: 820px) and (orientation: portrait) {
        .map-area {
          min-height: 520px;
          padding: 20px 0;
        }
        
        .container {
          max-width: 680px;
        }
      }
      
      /* Landscape mode на планшетах */
      @media (min-width: 540px) and (max-width: 820px) and (orientation: landscape) {
        body, .app {
          overflow-y: auto;
          height: auto;
        }
        
        header {
          position: sticky;
          top: 0;
          background: var(--page);
          z-index: 50;
          box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        main {
          padding-top: 0;
          min-height: calc(100vh - var(--header-h));
        }
        
        .map-area {
          min-height: 420px;
          padding: 16px 0;
        }
        
        .sheet {
          max-height: 70vh;
        }
      }

      .topbar {
          padding-top: 6px;
          gap: 12px;
        }
        
        .brand {
          font-size: 20px;
        }
        
        .map-area {
          min-height: 380px;
          padding: 8px 0;
        }
        
        .sheet {
          max-height: 60vh;
        }
      
      /* ======================
         Планшети <= 700px - Фіксована висота з скролом
         ====================== */
      @media (max-width: 700px) and (min-width: 480px) {
        header {
          position: sticky;
          top: 0;
          background: var(--page);
          z-index: 50;
          box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        }
        
        main {
          overflow: visible;
          min-height: calc(100vh - var(--header-h));
          padding-bottom: 20px;
        }
        
        .container {
          height: auto;
        }
        
        .map-area {
          min-height: 450px;
          padding: 20px 0;
        }
        
        .below {
          position: relative;
          bottom: auto;
          margin-top: 20px;
          margin-bottom: 20px;
        }
      }

      /* iPad і планшети в портретній орієнтації */
      @media (min-width: 768px) and (max-width: 979px) and (orientation: portrait) {
        header {
          height: 76px;
          flex: 0 0 76px;
        }
        
        :root {
          --header-h: 76px;
        }
        
        .map-area {
          padding: 20px 0;
        }
        
        .map-wrap {
          max-width: 90%;
        }
      }

      /* iPad і планшети в альбомній орієнтації */
      @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
        body, .app {
          overflow-y: auto;
          height: auto;
          min-height: 100vh;
        }
        
        header {
          position: sticky;
          top: 0;
          background: var(--page);
          z-index: 50;
          height: 64px;
          flex: 0 0 64px;
        }
        
        :root {
          --header-h: 64px;
        }
        
        main {
          min-height: calc(100vh - 64px);
          overflow: visible;
        }
        
        .map-area {
          min-height: 500px;
          padding: 16px 0;
        }
        
        .map-wrap {
          max-width: 80%;
        }
      }

      /* ======================
         Header
         ====================== */
      header {
        height: var(--header-h);
        flex: 0 0 var(--header-h);
        display: flex;
        position: relative;
        z-index: 40;
      }

      /* Мобільні пристрої - зменшений header */
      @media (max-width: 979px) {
        header {
          height: 70px;
          flex: 0 0 70px;
        }
        
        :root {
          --header-h: 70px;
        }
      }

      /* Планшети в landscape та малі екрани */
      @media (max-width: 979px) and (max-height: 600px) {
        header {
          height: 56px;
          flex: 0 0 56px;
        }
        
        :root {
          --header-h: 56px;
        }
      }

      /* Телефони в landscape */
      @media (max-width: 896px) and (max-height: 500px) and (orientation: landscape) {
        header {
          height: 52px;
          flex: 0 0 52px;
        }
        
        :root {
          --header-h: 52px;
        }
      }

      .topbar {
        display: grid;
        grid-template-columns: 2fr auto 1fr;
        align-items: center;
        gap: 18px;
        padding-top: 14px;
      }

      .brand {
        font-weight: 700;
        font-size: 26px;
        letter-spacing: 0;
      }

      .nav {
        justify-self: center;
        display: flex;
        gap: 22px;
        font-size: 12px;
        font-weight: 600;
        color: var(--ink);
        opacity: 0.92;
      }

      .nav a {
        position: relative;
        transition: opacity 0.2s ease;
      }

      .nav a:hover {
        opacity: 1;
      }

      .nav a.active {
        opacity: 1;
        color: var(--alert);
      }

      .nav a.active::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--alert);
        border-radius: 2px;
      }

      .right {
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 18px;
      }

      /* вњ… Premium Language Switcher (Desktop only) */
      .lang-switcher {
        position: relative;
        display: inline-flex;
      }
      
      @media (max-width: 768px) {
        .lang-switcher {
          display: none;
        }
      }

      .lang-current {
        height: 32px;
        padding: 0 12px;
        border-radius: 8px;
        border: 1px solid var(--line);
        background: var(--page);
        color: var(--ink);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 200ms ease;
        user-select: none;
      }

      .lang-current:hover {
        border-color: var(--line-2);
        background: var(--panel);
      }

      .lang-current svg {
        width: 14px;
        height: 14px;
        opacity: 0.6;
        transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
      }

      .lang-switcher[data-open="true"] .lang-current svg {
        transform: rotate(180deg);
      }

      .lang-dropdown {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        min-width: 160px;
        background: var(--page);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 6px;
        box-shadow: var(--shadow-soft);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px) scale(0.95);
        transition: all 220ms cubic-bezier(0.2, 0.9, 0.2, 1);
        z-index: 100;
        backdrop-filter: blur(10px);
      }

      .lang-switcher[data-open="true"] .lang-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
      }

      .lang-option {
        padding: 8px 12px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 13px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: background 150ms ease;
      }

      .lang-option:hover {
        background: var(--panel);
      }

      .lang-option[data-active="true"] {
        background: var(--active-card);
        font-weight: 600;
      }

      .lang-flag {
        width: 18px;
        height: 12px;
        border-radius: 3px;
        display: inline-block;
        font-size: 14px;
        line-height: 1;
      }

      /* Theme Toggle */
      .theme-toggle {
        width: var(--toggle-w);
        height: var(--toggle-h);
        border-radius: 999px;
        border: 1px solid var(--line);
        background: var(--page);
        padding: 2px;
        cursor: pointer;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
        transition: background 220ms ease, border-color 220ms ease;
      }

      .theme-toggle .icon {
        width: 16px;
        height: 16px;
        display: grid;
        place-items: center;
        opacity: 0.75;
        transition: opacity 220ms ease, transform 220ms ease;
        pointer-events: none;
        position: relative;
        z-index: 1;
      }

      .theme-toggle .thumb {
        position: absolute;
        top: 3px;
        left: 4px;
        width: calc(var(--toggle-h) - 8px);
        height: calc(var(--toggle-h) - 8px);
        border-radius: 999px;
        background: #f5f7f9;
        display: grid;
        place-items: center;
        transform: translateX(0);
        transition: transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1),
          background 220ms ease;
      }

      .theme-toggle .thumb svg {
        width: 15px;
        height: 15px;
        transform-origin: 50% 50%;
        transition: opacity 260ms ease, transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1);
      }
      .theme-toggle .thumb svg path {
        fill: currentColor;
      }
      .theme-toggle[data-mode="light"] .thumb {
        color: var(--accent, #FBC02D);
      }
      .theme-toggle[data-mode="dark"] .thumb {
        color: #fff;
        transform: translateX(calc(var(--toggle-w) - var(--toggle-h)));
        background: #1a1a1a;
      }

      .theme-toggle .icon--sun,
      .theme-toggle .icon--moon {
        opacity: 0.35;
        transition: opacity 220ms ease;
      }

      .theme-toggle[data-mode="light"] .icon--sun {
        opacity: 0.75;
      }

      .theme-toggle[data-mode="dark"] .icon--moon {
        opacity: 0.75;
      }
      
      /* Hide theme toggle in header on mobile (it's in menu) */
      @media (max-width: 768px) {
        .right .theme-toggle {
          display: none;
        }
      }

      /* Store badges */
      .store-badges {
        display: none;
        align-items: center;
        gap: 10px;
      }
      .store-badges a {
        display: inline-flex;
      }
      .store-img {
        width: 120px;
        height: 40px;
        background: color-mix(in oklab, var(--page) 90%, transparent);
        display: block;
        border-radius: 6px;
        object-fit: cover;
      }

      @media (min-width: 980px) {
        .store-badges {
          display: inline-flex;
        }
      }

      /* Mobile header */
      .burger {
        display: none;
        width: 40px;
        height: 40px;
        border: 0;
        background: transparent;
        cursor: pointer;
        border-radius: 10px;
      }
      .burger svg {
        width: 22px;
        height: 22px;
      }

      @media (max-width: 979px) {
        .topbar {
          grid-template-columns: 1fr auto;
        }
        .nav,
        .right .store-badges {
          display: none;
        }
        .burger {
          display: inline-grid;
          place-items: center;
        }
      }

      /* Mobile menu overlay + drawer (fullscreen on mobile) */
      .menu-overlay {
        position: fixed;
        inset: 0;
        z-index: 70;
        background: rgba(0, 0, 0, 0.3);
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
      }
      .menu-overlay[data-open="true"] {
        opacity: 1;
        pointer-events: auto;
      }

      .menu-drawer {
        position: fixed;
        z-index: 80;
        top: 8px;
        right: 8px;
        left: 8px;
        border-radius: 14px;
        background: var(--panel);
        border: 1px solid var(--panel-line);
        box-shadow: var(--shadow);
        padding: 12px;
        opacity: 0;
        pointer-events: none;
        transform: translateX(100%);
        transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), 
                    transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
      }
      .menu-drawer[data-open="true"] {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
      }
#menuTitle {
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0;
}
      @media (max-width: 979px) {
        .menu-drawer {
          top: 0;
          right: 0;
          left: auto;
          bottom: 0;
          width: min(380px, 100%);
          border-radius: 0;
          border-left: 0;
          border-right: 0;
          border-bottom: 0;
          padding: 16px;
          padding-top: 28px;
          display: flex;
          flex-direction: column;
          gap: 16px;
          box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
        }
        .menu-drawer[data-open="true"] {
          box-shadow: -12px 0 48px rgba(0, 0, 0, 0.2);
        }
        
        /* Account for app banner height when present */
        body.has-app-banner .menu-drawer {
          top: 56px;
          height: calc(100% - 56px);
        }
      }

      .menu-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }
      .menu-title {
        font-size: 12px;
        font-weight: 700;
        opacity: 0.9;
      }
      .menu-close {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        border: 1px solid var(--line);
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ink);
        transition: all 200ms ease;
      }
      .menu-close:hover {
        background: var(--panel);
        border-color: var(--line-2);
      }
      .menu-close:active {
        transform: scale(0.95);
      }
      .menu-links {
        margin-top: 10px;
        display: grid;
        gap: 8px;
      }
      .menu-link {
        border-radius: 12px;
        border: 1px solid var(--line);
        padding: 10px 12px;
        font-size: 12px;
        font-weight: 600;
        background: color-mix(in oklab, var(--page) 92%, transparent);
        transition: all 0.2s ease;
      }

      .menu-link.active {
        background: var(--alert);
        border-color: var(--alert);
        color: #ffffff;
      }

      .menu-lang {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 8px;
      }
      .menu-lang-option {
        flex: 0 0 auto;
        border-radius: 999px;
        border: 1px solid var(--line);
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 600;
        background: var(--page);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        opacity: 0.9;
        transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease;
      }
      .menu-lang-option[data-active="true"] {
        background: var(--active-card);
        border-color: var(--line-2);
        opacity: 1;
      }

      .menu-foot {
        margin-top: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .menu-stores {
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--panel-line);
      }

      .menu-store-links {
        display: flex;
        flex-direction: row;
        gap: 16px;
        margin-top: 8px;

      }

      .menu-store-links a {
        display: block;
        flex: 1 1 auto;
        min-width: 120px;
      }

      .menu-store-links .store-img {
        width: 100%;
        height: auto;
      }

      @media (min-width: 980px) {
        .menu-overlay,
        .menu-drawer {
          display: none;
        }
      }

      /* Main layout */
      main {
        flex: 1 1 auto;
        overflow: hidden;
        padding: 6px 0 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-height: 0;
      }
      
      @media (max-width: 979px) {
   main {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
      }

      .map-area {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        overflow: hidden;
        position: relative;
        padding: 12px 0;
      }
      
      /* Мобільні та планшети */
      @media (max-width: 979px) {
        .map-area {
          flex: 1 1 auto;
          overflow: visible;
          min-height: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          padding: 16px 0;
        }
      }

      /* Планшети в landscape */
      @media (max-width: 979px) and (max-height: 600px) and (orientation: landscape) {
        .map-area {
          padding: 12px 0;
          min-height: 380px;
        }
      }

      /* Телефони в landscape */
      @media (max-width: 896px) and (max-height: 500px) and (orientation: landscape) {
        .map-area {
          padding: 8px 0;
          min-height: 320px;
        }
      }

      .map-stage {
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
        position: relative;
        display: grid;
        justify-items: center;
        align-items: center;
        grid-template-columns: 1fr;
        overflow: hidden;
      }

      /* Мобільні пристрої - залишаємо grid для відображення карти */
      @media (max-width: 979px) {
        .map-stage {
          overflow: visible;
          display: grid; /* ВАЖЛИВО: grid, не flex! */
          justify-items: center;
          align-items: center;
        }
      }

      .map-wrap {
        width: 100%;
        height: auto;
        min-height: 0;
        display: block;
        align-items: center;
        justify-items: center;
        padding: 0 8px;
        position: relative;
        z-index: 1;
      }

      /* Мобільні пристрої - максимальне використання простору */
      @media (max-width: 979px) {
        .map-wrap {
          max-width: 100%;
          width: 100%;
          padding: 0 12px;
        }
      }
      
      /* Планшети <= 700px - оптимальна ширина */
      @media (max-width: 700px) and (min-width: 480px) {
        .map-wrap {
          max-width: 580px;
          padding: 0 16px;
        }
      }

      /* Планшети в landscape */
      @media (max-width: 979px) and (max-height: 600px) and (orientation: landscape) {
        .map-wrap {
          max-width: 85%;
          padding: 0 8px;
        }
      }

      /* Телефони в landscape */
      @media (max-width: 896px) and (max-height: 500px) and (orientation: landscape) {
        .map-wrap {
          max-width: 75%;
          padding: 0 8px;
        }
      }

      .map-svg {
        width: 100%;
        height: auto;
        max-width: 100%;
        display: block;
      }

      @media (min-width: 980px) {
        .map-wrap {
          width: min(var(--map-max), 100%);
          height: 90%;
          padding: 0;
          display: grid;
        }
        
        .map-svg {
          height: 100%;
          width: auto;
        }
      }

      /* Map styles (for your SVG) */
      .map-svg path {
        fill: var(--map-base);
        stroke: var(--map-stroke);
        stroke-width: 1;
        vector-effect: non-scaling-stroke;
        cursor: pointer;
        transition: fill 140ms ease, stroke 140ms ease, transform 140ms ease;
        transform-origin: center;
        outline: none;
      }

      .map-svg path[data-state="alert"] {
        fill: var(--alert);
        stroke: var(--alert-stroke);
      }

      /* Прибрано обводку при виборі */
      .map-svg path[data-selected="true"] {
        /* Немає додаткової обводки */
      }

      .map-svg path:not([data-selected="true"]):hover {
        stroke-width: 1.6;
        opacity: 0.9;
        transform: translateY(-0.5px);
      }

      @keyframes alertPulse {
        0% {
          filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
        }
        60% {
          filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.14));
        }
        100% {
          filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
        }
      }
      .map-svg path[data-state="alert"][data-selected="false"] {
        animation: alertPulse 2.8s ease-in-out infinite;
      }

      .region-label {
        font-size: 11px;
        font-weight: 600;
        fill: var(--ink);
        opacity: 0.75;
        text-anchor: middle;
        pointer-events: none;
        user-select: none;
      }

      /* Legend */
      .legend {
        display: grid;
        gap: 8px;
        align-content: start;
        justify-items: start;
        font-size: 11px;
        color: var(--ink);
        opacity: 0.9;
      }

      .legend__item {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
      }
      .sq {
        width: 10px;
        height: 10px;
        border-radius: 3px;
      }
      .sq--alert {
        background: var(--alert);
      }
      .sq--base {
        background: var(--map-base);
        border: 1px solid var(--line);
      }

      /* вњ… Mobile: hide legend, show legend FAB */
      @media (max-width: 979px) {
        .legend {
          display: none;
        }
      }

      @media (min-width: 980px) {
        .map-stage {
          grid-template-columns: auto auto;
          gap: 28px;
          justify-content: center;
        }
        
        .legend {
          padding-bottom: 26px;
          justify-self: start;
        }
      }

      /* Support + Ad block - правильне позиціонування */
      .below {
        width: min(100%, 100%);
        flex: 0 0 auto;
        display: block;
        bottom: 20px;
        left: 0;
        grid-template-columns: 1fr;
        justify-items: start;
        position: absolute;
        z-index: 10;
        pointer-events: none; /* Дозволяє кліки проходити крізь пустий простір */
      }
      
      .below * {
        pointer-events: auto; /* Відновлює кліки для вмісту */
      }
      
      /* Мобільні пристрої - статичне позиціонування */
      @media (max-width: 979px) {
        .below {
          position: relative;
          bottom: auto;
          left: auto;
          width: 100%;
          margin-top: 16px;
          margin-bottom: 16px;
          pointer-events: auto;
        }
      }

      /* Landscape режими - зменшені відступи */
      @media (max-width: 979px) and (max-height: 600px) and (orientation: landscape) {
        .below {
          margin-top: 12px;
          margin-bottom: 12px;
        }
      }

      @media (max-width: 896px) and (max-height: 500px) and (orientation: landscape) {
        .below {
          margin-top: 8px;
          margin-bottom: 8px;
        }
      }

      .below-inner {
        width: auto;
        display: grid;
        gap: 8px;
        justify-items: start;
      }

      .support-btn {
        width: 310px;
        height: 38px;
        border-radius: 8px;
        border: 1px solid var(--line);
        background: color-mix(in oklab, var(--page) 92%, transparent);
        display: grid;
        grid-template-columns: 24px 1fr 18px;
        align-items: center;
        gap: 8px;
        padding: 0 12px;
        cursor: pointer;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
      }
      .support-btn .t {
        font-size: 12px;
        font-weight: 600;
      }
      .support-btn .chev {
        opacity: 0.55;
        font-weight: 700;
        justify-self: end;
      }
      .support-btn svg {
        width: 18px;
        height: 18px;
        opacity: 0.85;
      }

      .ad {
        width: 310px;
        border-radius: 8px;
        border: 1.6px dashed color-mix(in oklab, var(--muted) 55%, transparent);
        padding: 8px 12px;
        color: var(--ink);
        opacity: 0.88;
      }
      .ad .title {
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 4px;
      }
      .ad .txt {
        font-size: 12px;
        color: var(--muted);
      }

      @media (max-width: 979px) {
        .below-inner {
          width: 100%;
          justify-items: center;
        }
        .support-btn,
        .ad {
          width: min(360px, 100%);
        }
      }

      .online {
        flex: 0 0 auto;
        text-align: center;
        font-size: 11px;
        color: var(--muted);
        padding-top: 8px;
      }
      .divider {
        flex: 0 0 auto;
        border-top: 1px solid var(--line);
      }

      footer {
        flex: 0 0 auto;
        text-align: center;
        font-size: 11px;
        color: var(--muted);
        padding: 6px 0 6px;
      }

      /* вњ… Legend FAB - mobile only */
.fab-legend {
  position: static;       /* ⬅️ КЛЮЧОВЕ */
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--panel-line);
  background: var(--panel);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}
      .fab-legend span {
        font-size: 14px;
        font-weight: 800;
        line-height: 1;
      }

      @media (max-width: 979px) {
        .fab-legend {
          display: grid;
          right: 16px;
          bottom: 16px;
          margin: 0;
          z-index: 30;
         
        }
        
        .map-stage {
          position: relative;
        }
      }

      /* Планшети в landscape - трохи менша кнопка */
      @media (max-width: 979px) and (max-height: 600px) and (orientation: landscape) {
        .fab-legend {
          width: 34px;
          height: 34px;
          right: 12px;
          bottom: 12px;
          font-size: 13px;
        }
      }

      /* Телефони в landscape - ще менша */
      @media (max-width: 896px) and (max-height: 500px) and (orientation: landscape) {
        .fab-legend {
          width: 32px;
          height: 32px;
          right: 10px;
          bottom: 10px;
          font-size: 12px;
        }
      }

      /* =============================
         UX IMPROVEMENTS & ANIMATIONS
         ============================= */
      
      /* Smooth transitions for interactive elements */
      button, .menu-link, .lang-option, .menu-lang-option {
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      /* Active states with scale */
      button:active, .menu-link:active {
        transform: scale(0.97);
      }
      
      .fab-legend:active {
        transform: scale(0.92);
      }
      
      /* Improved hover states */
      .support-btn:hover {
        border-color: var(--line-2);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      }
      
      .fab-legend:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
      }
      
      /* MacBook trackpad haptic feedback on hover */
      @media (hover: hover) and (pointer: fine) {
        button:hover,
        .map-svg path:hover,
        .menu-link:hover,
        .lang-option:hover,
        a:hover {
          cursor: pointer;
        }
      }
      
      /* Smooth map path hover */
      .map-svg path:hover {
        stroke-width: 1.5;
        filter: brightness(1.05);
      }
      
      /* Loading skeleton animation */
      @keyframes shimmer {
        0% { background-position: -468px 0; }
        100% { background-position: 468px 0; }
      }
      
      /* Fade in animation for elements */
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      .map-area, .below, .legend {
        animation: fadeIn 400ms ease-out;
      }
      
      /* Improved focus states */
      button:focus-visible, a:focus-visible {
        outline: 2px solid var(--ink);
        outline-offset: 2px;
        border-radius: 4px;
      }

      /* Overlay + Sheet */
      .overlay {
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgba(0, 0, 0, 0.3);
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
      }
      .overlay[data-open="true"] {
        opacity: 1;
        pointer-events: auto;
      }

      .sheet {
        position: fixed;
        z-index: 60;
        left: 50%;
        bottom: 24px;
        transform: translate3d(-50%, 16px, 0);
        width: 320px;
        max-height: 520px;
        background: var(--panel);
        border: 1px solid var(--panel-line);
        box-shadow: var(--shadow);
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
        border-radius: var(--radius-14);
        transition: opacity 220ms ease, transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      .sheet[data-open="true"] {
        opacity: 1;
        pointer-events: auto;
        transform: translate3d(-50%, 0, 0);
      }

      @media (min-width: 980px) {
        .sheet {
          left: 120px;
          transform: translate3d(0, 16px, 0);
        }
        .sheet[data-open="true"] {
          transform: translate3d(0, 0, 0);
        }
      }

      /* вњ… Mobile: sheet auto height by content (no 100vh) */
      @media (max-width: 979px) {
        .sheet {
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
          max-height: 80vh;
          height: auto;
          transform: translate3d(0, 16px, 0);
          border-radius: 14px 14px 0 0;
          border-left: 0;
          border-right: 0;
          border-bottom: 0;
        }
        .sheet[data-open="true"] {
          transform: translate3d(0, 0, 0);
        }
      }
      
      /* Планшети <= 700px - центрований sheet */
      @media (max-width: 700px) and (min-width: 480px) {
        .sheet {
          left: 50%;
          right: auto;
          width: 380px;
          max-width: calc(100vw - 40px);
          bottom: 24px;
          transform: translate3d(-50%, 16px, 0);
          border-radius: 14px;
          border: 1px solid var(--panel-line);
          max-height: 75vh;
        }
        .sheet[data-open="true"] {
          transform: translate3d(-50%, 0, 0);
        }
      }

      .sheet__top {
        padding: 12px 12px 8px;
        display: grid;
            margin-right: 12px;
        grid-template-columns: 32px 1fr 22px;
        align-items: start;
        gap: 10px;
      }
      .sheet__top .icon {
        width: 28px;
        height: 28px;
        opacity: 0.9;
        margin-top: 2px;
      }
      .sheet__title {
        font-size: 22px;
        font-weight: 700;
        margin: 0;
        line-height: 1.2;
      }
      .sheet__sub {
        margin-top: 4px;
        font-size: 14px;
        color: var(--muted);
      }
      .sheet__close {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        border: 1px solid var(--line);
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ink);
        transition: all 200ms ease;
      }
      .sheet__close:hover {
        background: var(--panel);
        border-color: var(--line-2);
      }
      .sheet__close:active {
        transform: scale(0.95);
      }

      .sheet__hr {
        height: 1px;
        background: var(--panel-line);
        margin: 0 12px;
      }

      .sheet__body {
        padding: 10px 12px 12px;
        overflow: auto;
        max-height: calc(520px - 48px - 1px);
      }

      @media (max-width: 979px) {
        .sheet__body {
          max-height: calc(80vh - 56px - 1px);
        }
      }

      .section-label {
        font-size: 11px;
        font-weight: 600;
        color: var(--muted);
        margin: 8px 0 8px;
      }

      .info-card {
        border-radius: 0;
        padding: 10px 10px;
        border: 0;
        margin-bottom: 12px;
      }
      .info-card--active {
        background: var(--active-card);
      }
      .info-card--prev {
        background: var(--prev-card);
      }

      .row {
        display: grid;
        grid-template-columns: 80px 1fr;
        gap: 6px;
        font-size: 11px;
        line-height: 1.35;
        margin: 2px 0;
      }
      .k {
        color: color-mix(in oklab, var(--ink) 72%, transparent);
        font-weight: 600;
      }
      .v {
        font-weight: 600;
        color: var(--ink);
      }

      /* вњ… Legend sheet styles */
      .legend-content {
        padding: 20px 12px;
        display:grid;
      }
      .legend-content .legend__item {
        margin-bottom: 12px;
        font-size: 13px;
      }

      @media (prefers-reduced-motion: reduce) {
        .map-svg path,
        .overlay,
        .sheet,
        .menu-overlay,
        .menu-drawer,
        .theme-toggle,
        .theme-toggle *,
        .fab-legend {
          transition: none !important;
          animation: none !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;
      }
      :root {
        background-color: var(--page);
        color: var(--ink);
      }

      html[data-theme="dark"] {
        background-color: var(--page);
        color: var(--ink);
      }

      html,
      body {
        margin: 0;
        padding: 0;
        min-height: 100%;
        background: var(--page);
        color: var(--ink);
        font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        transition: background-color 0.25s ease, color 0.25s ease;
      }

      * {
        box-sizing: border-box;
      }