/* ========== LOCAL FONTS (GDPR-Compliant, No External Google Tracking) ========== */
    @font-face {
      font-family: 'Plus Jakarta Sans';
      font-style: normal;
      font-weight: 400 800;
      font-display: swap;
      src: url('/assets/fonts/jakarta-sans-variable.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 300 700;
      font-display: swap;
      src: url('/assets/fonts/inter-variable.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    /* ========== NATIVE DIALOG SYSTEM ========== */
    dialog {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      max-width: 100vw !important;
      max-height: 100vh !important;
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
      background: rgba(2, 6, 23, 0.78) !important;
      backdrop-filter: blur(16px) !important;
      -webkit-backdrop-filter: blur(16px) !important;
      z-index: 99999 !important;
      align-items: center !important;
      justify-content: center !important;
      box-sizing: border-box !important;
    }
    dialog:not([open]) {
      display: none !important;
    }
    dialog[open] {
      display: flex !important;
    }
    dialog::backdrop {
      background: transparent !important;
    }

    :root {
      /* Color Palette - Dark Outdoor Theme */
      --color-bg-primary: #0a0f1a;
      --color-bg-secondary: #111827;
      --color-bg-tertiary: #1e293b;
      --color-bg-elevated: #263347;
      --color-bg-glass: rgba(17, 24, 39, 0.85);
      
      /* Brand Colors */
      --color-brand: #14b8a6;
      --color-brand-hover: #0d9488;
      --color-brand-light: #2dd4bf;
      --color-brand-glow: rgba(20, 184, 166, 0.15);
      
      /* Semantic Colors */
      --color-success: #22c55e;
      --color-warning: #f59e0b;
      --color-danger: #ef4444;
      --color-info: #3b82f6;
      
      /* Status Colors (for places) */
      --color-visited: #22c55e;
      --color-wishlist: #f59e0b;
      --color-shelter: #14b8a6;
      
      /* Text Colors */
      --color-text-primary: #f1f5f9;
      --color-text-secondary: #94a3b8;
      --color-text-muted: #64748b;
      --color-text-inverse: #0f172a;
      
      /* Border Colors */
      --color-border: rgba(148, 163, 184, 0.15);
      --color-border-hover: rgba(148, 163, 184, 0.3);
      --color-border-brand: rgba(20, 184, 166, 0.4);
      
      /* Spacing Scale */
      --space-xs: 4px;
      --space-sm: 8px;
      --space-md: 12px;
      --space-lg: 16px;
      --space-xl: 24px;
      --space-2xl: 32px;
      --space-3xl: 48px;
      
      /* Typography Scale (minimum 12px for readability) */
      --text-xs: 12px;
      --text-sm: 13px;
      --text-base: 14px;
      --text-md: 15px;
      --text-lg: 17px;
      --text-xl: 20px;
      --text-2xl: 24px;
      --text-3xl: 30px;
      
      /* Border Radius */
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 14px;
      --radius-xl: 20px;
      --radius-full: 9999px;
      
      /* Shadows */
      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
      --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
      --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
      --shadow-glow: 0 0 20px rgba(20, 184, 166, 0.15);
      
      /* Transitions */
      --transition-fast: 150ms ease;
      --transition-normal: 250ms ease;
      --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
      
      /* Glass Effect */
      --glass-bg: rgba(17, 24, 39, 0.8);
      --glass-blur: blur(20px);
      --glass-border: 1px solid rgba(148, 163, 184, 0.1);
      
      /* Layout */
      --header-height: 72px;
      --nav-height: 60px;
      --sidebar-width: 320px;

      /* Legacy aliases - keep for backward compatibility */
      --brand-color-1: var(--color-brand);
      --brand-color-2: var(--color-brand-hover);
      --dark-bg-1: var(--color-bg-primary);
      --dark-bg-2: var(--color-bg-secondary);
      --dark-bg-3: var(--color-bg-tertiary);
      --text-light: var(--color-text-primary);
      --text-medium: var(--color-text-secondary);
      --border-color: var(--color-border-brand);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    html,
    body {
      height: 100%;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
      color: #fff
    }

    /* ========== BUTTON SYSTEM ========== */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-sm);
      padding: var(--space-sm) var(--space-lg);
      border: none;
      border-radius: var(--radius-md);
      font-family: inherit;
      font-size: var(--text-sm);
      font-weight: 500;
      cursor: pointer;
      transition: all var(--transition-fast);
      text-decoration: none;
      line-height: 1.4;
      white-space: nowrap;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--color-brand), var(--color-brand-hover));
      color: white;
      box-shadow: var(--shadow-sm);
    }
    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-md), var(--shadow-glow);
    }

    .btn-secondary {
      background: var(--color-bg-tertiary);
      color: var(--color-text-primary);
      border: var(--glass-border);
    }
    .btn-secondary:hover {
      background: var(--color-bg-elevated);
      border-color: var(--color-border-hover);
    }

    .btn-danger {
      background: rgba(239, 68, 68, 0.15);
      color: #fca5a5;
      border: 1px solid rgba(239, 68, 68, 0.3);
    }
    .btn-danger:hover {
      background: rgba(239, 68, 68, 0.25);
    }

    .btn-ghost {
      background: transparent;
      color: var(--color-text-secondary);
    }
    .btn-ghost:hover {
      background: rgba(148, 163, 184, 0.1);
      color: var(--color-text-primary);
    }

    .btn-sm { padding: var(--space-xs) var(--space-md); font-size: var(--text-xs); }
    .btn-lg { padding: var(--space-md) var(--space-xl); font-size: var(--text-md); }

    /* ========== CARD SYSTEM ========== */
    .card {
      background: var(--glass-bg);
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border: var(--glass-border);
      border-radius: var(--radius-lg);
      padding: var(--space-xl);
    }

    /* ========== FORM INPUTS ========== */
    .input {
      width: 100%;
      padding: var(--space-md) var(--space-lg);
      background: rgba(15, 23, 42, 0.6);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      color: var(--color-text-primary);
      font-family: inherit;
      font-size: var(--text-base);
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }
    .input:focus {
      outline: none;
      border-color: var(--color-brand);
      box-shadow: 0 0 0 3px var(--color-brand-glow);
    }
    .input::placeholder {
      color: var(--color-text-muted);
    }

    /* ========== BADGE SYSTEM ========== */
    .badge {
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      padding: 2px var(--space-sm);
      border-radius: var(--radius-full);
      font-size: var(--text-xs);
      font-weight: 600;
      line-height: 1.5;
    }
    .badge-success { background: rgba(34, 197, 94, 0.15); color: #86efac; }
    .badge-warning { background: rgba(245, 158, 11, 0.15); color: #fcd34d; }
    .badge-brand { background: var(--color-brand-glow); color: var(--color-brand-light); }

    /* Miglioramenti per mobile */
    @media (max-width: 768px) {
      /* Solo su mobile: header più in alto, senza headbar */
      body .header {
        top: env(safe-area-inset-top, 0px);
        height: 70px;
        z-index: 1003;
        position: fixed;
        left: 0;
        right: 0;
        background: rgba(2, 6, 23, .95);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px;
      }

      /* Barra inferiore come nello screenshot */
      body .mobile-nav {
        height: 55px;
        bottom: 15px;
        left: 15px;
        right: 15px;
        border-radius: 0;
        background: rgba(17, 24, 39, .95);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      }

      /* Riduci padding interno della barra inferiore */
      body .mobile-nav .nav-item {
        padding: 8px 12px;
      }

      body .mobile-nav .nav-item .nav-text {
        font-size: var(--text-xs); /* was 11px */
      }

      body .mobile-nav .nav-item .nav-icon {
        width: 20px;
        height: 20px;
      }
    }

    /* Nascondi headbar su desktop */
    @media (min-width: 769px) {

      .header {
        top: 0;
        height: var(--header-height);
      }
    }

    /* Header originale - ripristinato per desktop */
    .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: var(--header-height);
      background: rgba(2, 6, 23, .95);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      z-index: 1001;
      transition: height 0.2s ease;
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 16px
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 16px
    }

    /* Sezione Meteo */
    .weather-section {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      min-width: 120px;
    }

    .weather-section:hover {
      background: rgba(255, 255, 255, 0.15);
    }

    .weather-icon {
      width: 24px;
      height: 24px;
      filter: none !important;
      -webkit-filter: none !important;
    }

    .weather-temp {
      font-size: 14px;
      font-weight: 600;
      color: white;
    }

    .weather-location {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
      max-width: 80px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .weather-loading {
      display: flex;
      align-items: center;
      gap: 8px;
      color: rgba(255, 255, 255, 0.7);
      font-size: 12px;
    }

    .weather-spinner {
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top: 2px solid white;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    /* Modal Meteo Espanso */
    .weather-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.8);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 2000;
    }

    .weather-modal-content {
      background: rgba(15, 23, 42, 0.95);
      border-radius: 16px;
      padding: 24px;
      max-width: 500px;
      width: 90%;
      max-height: 80vh;
      overflow-y: auto;
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .weather-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .weather-modal-title {
      font-size: 20px;
      font-weight: 600;
      color: white;
    }

    .weather-close-btn {
      background: none;
      border: none;
      color: rgba(255, 255, 255, 0.7);
      font-size: 24px;
      cursor: pointer;
      padding: 4px;
    }

    .weather-current {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 24px;
      padding: 16px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
    }

    .weather-current-icon {
      width: 64px;
      height: 64px;
      filter: none !important;
      -webkit-filter: none !important;
    }

    .weather-current-info h3 {
      font-size: 18px;
      font-weight: 600;
      color: white;
      margin: 0 0 4px 0;
    }

    .weather-current-info p {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.7);
      margin: 0;
    }

    .weather-forecast {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
      gap: 12px;
    }

    .weather-day {
      text-align: center;
      padding: 12px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 8px;
    }

    .weather-day-name {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 8px;
    }

    .weather-day-icon {
      width: 32px;
      height: 32px;
      margin: 0 auto 8px;
      filter: none !important;
      -webkit-filter: none !important;
    }

    .weather-day-temp {
      font-size: 14px;
      font-weight: 600;
      color: white;
    }

    .logo {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      object-fit: cover;
      border: 2px solid rgba(255, 255, 255, .2)
    }

    .title {
      font-size: 20px;
      font-weight: 700;
      background: linear-gradient(135deg, var(--brand-color-1), var(--brand-color-2));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text
    }

    .brand-subtitle {
      font-size: 16px;
      font-weight: 500;
      color: var(--text-medium);
      opacity: 0.8;
      transition: opacity 0.3s ease;
      line-height: 1
    }

    .vemarcus-link {
      color: var(--brand-color-1);
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: underline;
      text-decoration-color: transparent;
      text-underline-offset: 4px;
      font-weight: 600
    }

    .vemarcus-link:hover {
      color: var(--brand-color-2);
      text-decoration-color: currentColor
    }

    /* Vemarcus Modal Styles */
    .vemarcus-modal {
      max-width: 600px;
      text-align: center;
    }

    .modal-header {
      text-align: center;
      margin-bottom: 24px;
    }

    .modal-avatar {
      margin: 0 auto 16px;
    }

    .avatar-image {
      width: 80px;
      height: 80px;
      border-radius: 12px;
      border: 3px solid var(--border-color);
    }

    .modal-subtitle {
      color: var(--text-medium);
      font-size: 16px;
      margin-top: 8px;
    }

    .info-section {
      margin-bottom: 24px;
      text-align: left;
    }

    .info-section h3 {
      color: var(--brand-color-1);
      margin-bottom: 12px;
      font-size: 18px;
    }

    .contact-item {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .contact-icon {
      font-size: 18px;
    }

    .contact-link {
      color: var(--text-light);
      text-decoration: none;
    }

    .contact-link:hover {
      color: var(--brand-color-1);
    }

    .coffee-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, #ff6b35, #f7931e);
      color: white;
      text-decoration: none;
      padding: 12px 20px;
      border-radius: 12px;
      font-weight: 600;
      margin-top: 12px;
      transition: transform 0.2s ease;
    }

    .coffee-btn:hover {
      transform: translateY(-2px);
    }

    /* Status Bar Styling for Mobile - Soluzione più robusta */
    @supports (padding: max(0px)) {
      html {
        /* PASSO CRUCIALE: Colora la safe area con il background dell'app */
        background-color: #020617;
        height: 100vh;
        height: -webkit-fill-available;
      }

      body {
        padding-top: max(0px, env(safe-area-inset-top));
        padding-bottom: 0px;
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
        min-height: 100vh;
        min-height: -webkit-fill-available;
        background-color: #020617;
      }
    }

    /* Soluzione specifica per PWA iOS - Rimuove la barra bianca */
    @media screen and (display-mode: standalone) {

      html,
      body {
        height: 100vh;
        height: -webkit-fill-available;
        padding: 0;
        margin: 0;
      }

      body {
        padding-bottom: 0;
        margin-bottom: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        height: -webkit-fill-available;
      }

      body .mobile-nav {
        padding-bottom: 0px;
        margin-bottom: 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        height: 65px;
      }


      /* Nasconde completamente la barra bianca */
      body::after {
        display: none;
      }

      /* Forza il contenuto principale a non andare oltre il mobile-nav */
      .main-container {
        height: calc(100vh - var(--header-height) - var(--nav-height)) !important;
        height: calc(-webkit-fill-available - var(--header-height) - var(--nav-height)) !important;
        overflow-y: auto;
      }
    }

    /* Status Bar Overlay disattivato (l'header con safe-area copre già in trasparenza la status bar) */
    @media screen and (max-width: 768px) {
      body::before {
        display: none !important;
        content: none !important;
      }
    }

    /* Mobile-specific improvements */
    @media (max-width: 768px) {

      /* Prevent any zooming/scaling */
      html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        touch-action: manipulation;
      }

      /* iOS PWA specific fixes - Safari */
      @supports (-webkit-touch-callout: none) and (not (-webkit-appearance: none)) {
        body {
          padding-top: env(safe-area-inset-top, 0px);
          padding-bottom: 0px;
        }

        .header {
          padding-top: env(safe-area-inset-top, 0px);
        }

        body .mobile-nav {
          padding-bottom: 0px;
        }
      }

      /* iOS PWA specific fixes - Chrome/Other browsers */
      @supports (-webkit-touch-callout: none) and (-webkit-appearance: none) {
        body {
          padding-top: env(safe-area-inset-top, 0px);
          padding-bottom: 0px;
        }

        .header {
          padding-top: env(safe-area-inset-top, 0px);
        }

        body .mobile-nav {
          padding-bottom: 0px;
        }
      }

      /* Browser-specific fixes */
      .browser-safari.pwa-mode .header {
        padding-top: env(safe-area-inset-top, 0px);
      }

      .browser-chrome.pwa-mode .header {
        padding-top: env(safe-area-inset-top, 0px);
      }

      .browser-safari.pwa-mode body .mobile-nav {
        padding-bottom: 0px;
      }

      .browser-chrome.pwa-mode body .mobile-nav {
        padding-bottom: 0px;
      }

      /* Soluzione definitiva per la barra bianca su iOS PWA */
      @supports (-webkit-touch-callout: none) {
        .pwa-mode body {
          padding-bottom: 0;
          margin-bottom: 0;
          overflow-x: hidden;
        }

        .pwa-mode body .mobile-nav {
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          padding-bottom: 0px;
          margin-bottom: 0;
          z-index: 1001;
        }

        .pwa-mode body::after {
          display: none;
        }

        .pwa-mode body::before {
          display: none;
        }
      }

      /* Ensure fixed layout */
      html {
        background-color: #020617;
      }

      body {
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #020617;
        padding-bottom: 0px;
        margin-bottom: 0px;
      }

      /* Regola globale per eliminare definitivamente la barra bianca */
      body .mobile-nav {
        padding-bottom: 0px;
        margin-bottom: 0px;
        position: fixed;
        bottom: 0px;
        left: 0px;
        right: 0px;
        height: 65px;
        z-index: 1000;
      }


      /* Legacy zoom e header ripuliti in favore del nuovo design system */
      body .leaflet-control-zoom,
      .leaflet-control-zoom {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
      }

      /* Ensure modals are properly positioned */
      body .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        
      }
    }

    .coffee-icon {
      font-size: 18px;
    }

    .features-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .feature-tag {
      background: rgba(20, 184, 166, 0.1);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 12px;
      color: var(--brand-color-1);
    }

    /* Vemarcus Brand Box in Sidebar */
    .vemarcus-brand-box {
      background: rgba(15, 23, 42, .4);
      border: 1px solid var(--border-color);
      border-radius: 5px;
      padding: 5px;
      text-align: center;
      margin-top: 5px;
      transition: all 0.3s ease;
    }

    .vemarcus-brand-box:hover {
      background: rgba(15, 23, 42, .6);
      border-color: var(--brand-color-1);
      transform: translateY(-1px);
    }

    .brand-text {
      font-size: var(--text-xs);
      color: var(--text-medium);
      margin-bottom: 1px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    .brand-name {
      font-size: var(--text-xs);
      font-weight: 600;
      color: var(--brand-color-1);
      cursor: pointer;
      transition: color 0.3s ease;
    }

    .brand-name:hover {
      color: var(--brand-color-2);
    }

    .userbox {
      display: flex;
      align-items: center;
      gap: 8px;
      position: relative;
    }

    .main-container {
      display: flex;
      height: 100vh;
      padding-top: var(--header-height);
      transition: padding-top 0.2s ease;
    }

    .map-container {
      flex: 1;
      position: relative;
      overflow: hidden
    }

    body #map {
      width: 100%;
      height: 100%;
      border-radius: 0;
      z-index: 1;
      background: #0f172a !important;
    }

    /* Safari-specific fixes for mouse wheel zoom */
    @supports (-webkit-appearance: none) {

      #map,
      #interactiveMapContainer {
        /* Force hardware acceleration for Safari */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        /* Prevent Safari from interfering with wheel events */
        -webkit-overflow-scrolling: touch;
        /* Ensure proper event handling */
        pointer-events: auto;
      }
    }

    /* Safari wheel zoom fix & dark tile background */
    .leaflet-container {
      background-color: #0f172a !important;
      /* Prevent Safari from hijacking wheel events */
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      /* Ensure wheel events are handled properly */
      touch-action: pan-x pan-y;
    }

    .sidebar {
      width: 340px;
      background: rgba(2, 6, 23, .95);
      backdrop-filter: blur(20px);
      border-left: 1px solid var(--border-color);
      padding: 16px;
      overflow-y: auto;
      position: relative;
      z-index: 1000;
      transition: transform 0.3s ease-in-out;
    }

    .profile-button {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background-color: var(--dark-bg-2);
      border: 2px solid var(--border-color);
      color: var(--text-light);
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .profile-button img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .profile-dropdown {
      display: none;
      position: absolute;
      top: 55px;
      right: 0;
      width: 200px;
      background: rgba(2, 6, 23, 0.95);
      backdrop-filter: blur(20px);
      border-radius: 12px;
      border: 1px solid var(--border-color);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      z-index: 1002;
      overflow: hidden;
    }

    .profile-dropdown.show {
      display: block;
    }

    .dropdown-item {
      padding: 12px 16px;
      color: var(--text-light);
      font-size: 14px;
      cursor: pointer;
      display: block;
      border-bottom: 1px solid var(--border-color);
      text-decoration: none;
    }

    .dropdown-item:last-child {
      border-bottom: none;
    }

    .dropdown-item:hover {
      background-color: rgba(20, 184, 166, 0.1);
    }

    /* Modal di istruzioni per aggiungere nuovo luogo */
    .modal-content {
      padding: 20px 0;
    }

    .instruction-step {
      display: flex;
      align-items: flex-start;
      gap: 15px;
      margin-bottom: 25px;
      padding: 15px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .instruction-step:last-child {
      margin-bottom: 0;
    }

    .step-number {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--brand-color-1), var(--brand-color-2));
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 14px;
      flex-shrink: 0;
    }

    .step-content h3 {
      margin: 0 0 8px 0;
      color: white;
      font-size: 16px;
      font-weight: 600;
    }

    .step-content p {
      margin: 0;
      color: var(--text-medium);
      font-size: 14px;
      line-height: 1.5;
    }

    .modal {
      background: rgba(2, 6, 23, .98);
      backdrop-filter: blur(30px);
      border: 1px solid var(--border-color);
      border-radius: 20px;
      padding: 15px;
      width: 90%;
      max-width: 605px;
      max-height: 90vh;
      overflow-y: auto;
      display: flex;
      flex-direction: column
    }

    /* Desktop - modal larghi e bassi */
    @media (min-width: 768px) {
      .modal {
        width: 80%;
        max-width: 700px;
        max-height: 85vh;
        padding: 20px;
      }
    }

    /* Mobile verticale - ottimizzato per schermi alti */
    @media (max-width: 767px) and (orientation: portrait) {
      .modal {
        width: 95%;
        max-width: 95vw;
        max-height: 95vh;
        padding: 8px;
        display: flex;
        flex-direction: column;
      }

      /* Assicura che il contenuto del modal sia scrollabile */
      .modal-content {
        flex: 1;
        overflow-y: auto;
        padding: 8px 0;
      }

      /* Riduci margini e padding per ottimizzare lo spazio */
      .modal-header {
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border-color);
      }

      .modal-title {
        font-size: 18px;
        margin: 0;
      }

      .modal-section {
        margin-bottom: 12px;
      }

      .modal-section-title {
        font-size: 12px;
        margin-bottom: 6px;
      }

      .option-group {
        gap: 6px;
      }

      .option-btn {
        padding: 6px 8px;
        font-size: var(--text-xs);
      }

      .text-input {
        padding: 8px;
        font-size: 14px;
      }

      .btn {
        padding: 8px 12px;
        font-size: 12px;
      }

      /* Stili specifici per il modal di modifica su mobile */
      #editModal .modal {
        max-height: 98vh;
        padding: 6px;
      }

      #editModal .modal-header {
        margin-bottom: 8px;
        padding-bottom: 6px;
      }

      #editModal .modal-title {
        font-size: 16px;
      }

      #editModal .modal-section {
        margin-bottom: 10px;
      }

      #editModal .modal-section-title {
        font-size: var(--text-xs);
        margin-bottom: 4px;
      }

      #editModal .option-group {
        gap: 4px;
      }

      #editModal .option-btn {
        padding: 4px 6px;
        font-size: var(--text-xs);
      }

      #editModal .text-input {
        padding: 6px;
        font-size: 13px;
      }

      #editModal textarea {
        min-height: 60px;
      }

      #editModal .details-group {
        gap: 6px;
      }

      #editModal .details-group label {
        font-size: var(--text-xs);
        margin-bottom: 2px;
      }

      #editModal .details-group input {
        padding: 4px 6px;
        font-size: 12px;
      }

      #editModal .modal-actions {
        margin-top: 6px;
        gap: 4px;
      }

      #editModal .modal-actions .btn-small {
        padding: 6px 8px;
        font-size: var(--text-xs);
      }
    }

    /* Mobile orizzontale - ottimizzato per schermi larghi */
    @media (max-width: 767px) and (orientation: landscape) {
      .modal {
        width: 85%;
        max-width: 600px;
        max-height: 95vh;
        padding: 14px;
      }
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      flex-shrink: 0
    }

    .modal-title {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: var(--text-light);
      display: flex;
      align-items: center;
      gap: 10px
    }

    .modal-content {
      flex: 1;
      overflow-y: auto;
      padding: 0
    }

    .modal-actions {
      flex-shrink: 0;
      margin-top: 16px
    }

    .modal-close-btn {
      background: linear-gradient(135deg, #f97316, #ea580c);
      border: none;
      color: white;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3)
    }

    .modal-close-btn:hover {
      transform: scale(1.1);
      box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4)
    }

    /* Visualizzazione Interattiva Elevazione */
    .interactive-elevation-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.95);
      backdrop-filter: blur(10px);
      display: none;
      z-index: 3000;
      flex-direction: column;
    }

    .interactive-elevation-overlay.show {
      display: flex;
    }

    /* Mobile: ottimizza il modal del grafico */
    @media (max-width: 768px) {
      .interactive-elevation-overlay {
        padding: 0;
      }

      .interactive-elevation-header {
        padding: 12px;
        padding-top: calc(48px + env(safe-area-inset-top));
        padding-top: calc(48px + constant(safe-area-inset-top));
      }

      .interactive-elevation-title {
        font-size: var(--text-xs);
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .interactive-elevation-close {
        width: 28px;
        height: 28px;
      }
    }

    .interactive-elevation-header {
      padding: 20px;
      background: rgba(15, 23, 42, 0.9);
      border-bottom: 1px solid var(--border-color);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .interactive-elevation-title {
      color: var(--text-light);
      font-size: 24px;
      font-weight: 600;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .interactive-elevation-close {
      background: linear-gradient(135deg, #f97316, #ea580c);
      border: none;
      color: white;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .interactive-elevation-close:hover {
      transform: scale(1.1);
      box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
    }

    /* Sezione Statistiche Overlay */
    .interactive-stats-section {
      padding: 20px;
      background: rgba(15, 23, 42, 0.8);
      border-bottom: 1px solid var(--border-color);
    }

    .interactive-stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 15px;
      max-width: 800px;
      margin: 0 auto;
    }

    .interactive-stat-item {
      text-align: center;
      padding: 15px;
      background: rgba(20, 184, 166, 0.1);
      border: 1px solid rgba(20, 184, 166, 0.3);
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .interactive-stat-item:hover {
      background: rgba(20, 184, 166, 0.2);
      transform: translateY(-2px);
    }

    .interactive-stat-label {
      display: block;
      font-size: 12px;
      color: var(--text-medium);
      margin-bottom: 5px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .interactive-stat-value {
      display: block;
      font-size: 18px;
      font-weight: 600;
      color: var(--text-light);
    }

    /* Mobile: ottimizza le statistiche */
    @media (max-width: 768px) {
      .interactive-stats-section {
        padding: 8px;
      }

      .interactive-stats-grid {
        gap: 6px;
      }

      .interactive-stat-item {
        padding: 6px;
      }

      .interactive-stat-label {
        font-size: var(--text-xs);
      }

      .interactive-stat-value {
        font-size: 12px;
      }
    }

    @media (max-width: 420px) {
      .interactive-stats-section {
        padding: 6px;
      }

      .interactive-stats-grid {
        gap: 4px;
      }

      .interactive-stat-item {
        padding: 5px;
      }

      .interactive-stat-label {
        font-size: var(--text-xs);
      }

      .interactive-stat-value {
        font-size: var(--text-xs);
      }
    }

    .interactive-elevation-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 20px;
      gap: 20px;
    }

    .interactive-map-container,
    .interactive-elevation-chart-container {
      width: 100%;
      box-sizing: border-box;
    }

    /* Mobile: ottimizza il layout del contenuto del grafico */
    @media (max-width: 768px) {
      .interactive-elevation-content {
        padding: 8px;
        gap: 10px;
      }

      .interactive-map-container {
        height: 160px;
      }
    }

    @media (max-width: 420px) {
      .interactive-map-container {
        height: 140px;
      }
    }

    .interactive-map-container {
      flex: 1;
      background: rgba(15, 23, 42, 0.5);
      border-radius: 12px;
      border: 1px solid var(--border-color);
      position: relative;
      overflow: hidden;
    }
    #interactiveMapInner.leaflet-container {
      background: #0f172a !important;
    }

    .interactive-elevation-chart-container {
      height: 300px;
      background: rgba(15, 23, 42, 0.5);
      border-radius: 12px;
      border: 1px solid var(--border-color);
      position: relative;
      overflow: hidden;
      margin: 0;
      /* allinea alla mappa */
    }

    .interactive-elevation-chart {
      width: 100%;
      height: 100%;
      cursor: crosshair;
    }

    /* Mobile: mantieni proporzioni del grafico come desktop */
    @media (max-width: 768px) {
      .interactive-elevation-chart-container {
        height: 200px;
        max-width: 100%;
        margin: 0 auto;
      }

      .interactive-elevation-chart {
        width: 100%;
        height: 100%;
        max-width: 100%;
        object-fit: contain;
      }
    }

    @media (max-width: 420px) {
      .interactive-elevation-chart-container {
        height: 180px;
      }
    }

    .elevation-cursor {
      position: absolute;
      width: 2px;
      height: 100%;
      background: linear-gradient(to bottom, #f97316, #ea580c);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .elevation-cursor.show {
      opacity: 1;
    }

    .elevation-cursor-dot {
      position: absolute;
      width: 8px;
      height: 8px;
      background: #f97316;
      border: 2px solid white;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .elevation-info-tooltip {
      position: absolute;
      background: rgba(15, 23, 42, 0.95);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 8px 12px;
      color: var(--text-light);
      font-size: 12px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s ease;
      z-index: 10;
    }

    .elevation-info-tooltip.show {
      opacity: 1;
    }

    .elevation-info-tooltip .distance {
      font-weight: 600;
      color: #14b8a6;
    }

    .elevation-info-tooltip .elevation {
      font-weight: 600;
      color: #f97316;
    }

    /* Safe area iOS */
    @supports (padding: max(0px)) {
      body {
        padding-top: env(safe-area-inset-top);
        padding-top: constant(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-bottom: constant(safe-area-inset-bottom);
      }
    }

    /* Stili per i bottoni esterni del modal */
    .modal-external-actions {
      position: absolute;
      top: 60px;
      right: -120px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .btn-share-external {
      background: linear-gradient(135deg, #ff6b35, #e55a2b);
      border: none;
      color: white;
      padding: 12px 16px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }

    .btn-share-external:hover {
      background: linear-gradient(135deg, #e55a2b, #d14a1f);
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4);
    }

    /* Responsive per mobile */
    @media (max-width: 768px) {
      .modal-external-actions {
        position: static;
        margin-top: 16px;
        justify-content: center;
      }

      .btn-share-external {
        width: 100%;
        justify-content: center;
      }
    }

    .modal-title {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 8px;
      color: var(--brand-color-1);
      display: flex;
      align-items: center;
      gap: 8px
    }

    .modal-section {
      margin-bottom: 12px
    }

    .modal-section-title {
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 7px;
      color: var(--text-light)
    }

    .option-group {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px
    }

    .option-btn {
      background: rgba(15, 23, 42, .8);
      border: 1px solid var(--border-color);
      color: white;
      padding: 8px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all .2s ease;
    }

    .option-btn:hover {
      border-color: rgba(20, 184, 166, 0.6);
      background: rgba(15, 23, 42, 1);
    }

    .option-btn.selected {
      background: linear-gradient(135deg, var(--brand-color-1), var(--brand-color-2));
      border-color: rgba(20, 184, 166, .6)
    }

    .text-input {
      width: 100%;
      background: rgba(15, 23, 42, .8);
      border: 1px solid var(--border-color);
      color: white;
      padding: 8px;
      border-radius: 8px;
      font-size: 12px;
    }

    .details-group {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .details-group label {
      display: block;
      font-size: var(--text-xs);
      margin-bottom: 4px;
      color: var(--text-medium);
    }

    body .mobile-nav {
      display: none;
    }

    #backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 999;
      display: none;
    }

    #backdrop.show {
      display: block;
    }

    .profile-page {
      position: fixed;
      inset: 0;
      
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(15, 23, 42, 0.95);
      backdrop-filter: blur(10px);
    }

    .profile-page.show {
      display: flex;
    }

    dialog#profilePage {
      background: transparent !important;
      border: none !important;
      padding: 0 !important;
      max-width: 94vw !important;
      width: 480px !important;
      margin: auto !important;
      outline: none !important;
      box-shadow: none !important;
      overflow: visible !important;
    }

    dialog#profilePage::backdrop {
      background: rgba(2, 6, 23, 0.78) !important;
      backdrop-filter: blur(14px) !important;
      -webkit-backdrop-filter: blur(14px) !important;
    }

    .profile-content-wrapper {
      background: rgba(15, 23, 42, 0.96) !important;
      backdrop-filter: blur(32px) !important;
      -webkit-backdrop-filter: blur(32px) !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
      border-radius: 24px !important;
      width: 100% !important;
      max-width: 480px !important;
      padding: 24px !important;
      position: relative !important;
      box-sizing: border-box !important;
      color: #f8fafc !important;
      animation: profileModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes profileModalPop {
      from { opacity: 0; transform: scale(0.96) translateY(8px); }
      to { opacity: 1; transform: scale(1) translateY(0); }
    }

    .profile-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      padding-bottom: 14px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .profile-header h2 {
      font-size: 20px;
      font-weight: 700;
      color: #f8fafc;
      margin: 0;
    }

    .avatar-upload {
      display: flex;
      align-items: center;
      gap: 20px;
      background: rgba(15, 23, 42, .6);
      padding: 18px;
      border-radius: 16px;
      border: 1px solid var(--border-color);
    }

    .avatar-preview {
      width: 80px;
      height: 80px;
      border-radius: 50% !important;
      background: var(--dark-bg-2);
      border: 2px solid var(--border-color);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      aspect-ratio: 1 / 1 !important;
    }

    .avatar-preview img {
      width: 100%;
      height: 100%;
      border-radius: 50% !important;
      object-fit: cover !important;
      aspect-ratio: 1 / 1 !important;
    }

    .avatar-preview .placeholder {
      font-size: 32px;
      color: var(--text-medium);
    }

    .avatar-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .sidebar-section {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border-color);
    }

    .section-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 12px;
      color: var(--text-light);
      display: flex;
      align-items: center;
      gap: 8px
    }

    .filter-buttons {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 16px
    }

    .search-section {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border-color)
    }

    .filter-btn {
      background: rgba(15, 23, 42, .8);
      border: 1px solid var(--border-color);
      color: white;
      padding: 12px 16px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .filter-btn.active {
      background: linear-gradient(135deg, var(--brand-color-1), var(--brand-color-2));
      border-color: rgba(20, 184, 166, .6)
    }

    .btn-count {
      background: rgba(16, 185, 129, .3);
      padding: 2px 4px;
      border-radius: 4px;
      font-size: var(--text-xs);
      font-weight: 600;
      color: #10b981;
      border: 1px solid rgba(16, 185, 129, .4)
    }

    .add-section {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border-color)
    }

    .add-btn {
      width: 100%;
      background: linear-gradient(135deg, #10b981, #059669);
      border: none;
      color: white;
      padding: 14px;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer
    }

    .info-cards {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 16px
    }

    .info-card-mini {
      background: rgba(15, 23, 42, .4);
      border: 1px solid rgba(255, 255, 255, .1);
      border-radius: 8px;
      padding: 8px 12px;
      text-align: center;
      font-size: 13px;
      color: rgba(255, 255, 255, .7)
    }

    .info-card-mini#totalMarkersCard:hover {
      background: rgba(15, 23, 42, .6);
      border-color: var(--border-color);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3)
    }

    .map-selector {
      position: static;
      display: flex;
      flex-direction: column;
      gap: 12px;
      background: transparent;
      backdrop-filter: none;
      border: none;
      box-shadow: none;
      padding: 0;
      width: 100%;
    }

    .map-selector-select {
      width: 100%;
      background: rgba(15, 23, 42, .8);
      border: 1px solid var(--border-color);
      padding: 10px;
      border-radius: 10px;
      color: white;
    }

    .map-selector-select option {
      background: var(--dark-bg-1);
      color: white
    }

    .map-selector-select option[value="satellite"] {
      background: linear-gradient(135deg, #1e40af, #3b82f6);
      color: white;
      font-weight: 600
    }

    .btn {
      background: rgba(15, 23, 42, .8);
      border: 1px solid var(--border-color);
      color: white;
      border-radius: 10px;
      padding: 8px 12px;
      cursor: pointer;
      font-size: 13px
    }

    .btn-small {
      background: rgba(15, 23, 42, .8);
      border: 1px solid var(--border-color);
      color: white;
      border-radius: 7px;
      padding: 6px 8px;
      cursor: pointer;
      font-size: var(--text-xs)
    }

    /* Legal Links */
    .legal-links {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .legal-link-btn {
      background: rgba(15, 23, 42, 0.6);
      border: 1px solid var(--border-color);
      color: var(--text-medium);
      border-radius: 8px;
      padding: 10px 12px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.2s ease;
      text-align: left;
    }

    .legal-link-btn:hover {
      background: rgba(15, 23, 42, 0.8);
      color: var(--text-light);
      border-color: var(--brand-color-1);
      transform: translateY(-1px);
    }

    .legal-link-btn-small {
      background: rgba(30, 41, 59, 0.6);
      border: 1px solid rgba(16, 185, 129, 0.3);
      color: #e2e8f0;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      justify-content: center;
    }

    .legal-link-btn-small:hover {
      background: rgba(16, 185, 129, 0.1);
      border-color: rgba(16, 185, 129, 0.5);
      transform: translateY(-1px);
    }

    /* GDPR Info */
    .gdpr-info {
      margin-top: 12px;
      padding: 8px;
      background: rgba(20, 184, 166, 0.1);
      border: 1px solid rgba(20, 184, 166, 0.3);
      border-radius: 8px;
    }

    .gdpr-text {
      color: var(--text-medium);
      font-size: var(--text-xs);
      line-height: 1.4;
      text-align: center;
    }

    .gdpr-text small {
      color: var(--text-medium);
    }

    .btn-share {
      background: linear-gradient(135deg, #ff6b35, #e55a2b) !important;
      border-color: #ff6b35 !important
    }

    .btn-share:hover {
      background: linear-gradient(135deg, #e55a2b, #d14a1f) !important;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(255, 107, 53, .3)
    }

    .share-icon {
      font-size: 14px
    }

    /* Photo Actions Styles */
    .btn-photo-action {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      background: linear-gradient(135deg, #10b981, #059669);
      border: 1px solid #10b981;
      border-radius: 8px;
      color: white;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .btn-photo-action:hover {
      background: linear-gradient(135deg, #059669, #047857);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }

    .photo-icon {
      font-size: 16px;
    }

    .url-input-group .text-input {
      margin-bottom: 0;
    }

    /* Upload Progress Bar Styles */
    .upload-progress-container {
      background: rgba(15, 23, 42, .6);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 12px;
      margin: 12px 0;
      transition: all 0.3s ease;
    }

    .upload-progress-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .upload-status {
      color: var(--text-light);
      font-size: 12px;
      font-weight: 500;
    }

    .upload-percentage {
      color: #10b981;
      font-size: 12px;
      font-weight: 600;
    }

    .upload-progress-bar {
      width: 100%;
      height: 6px;
      background: rgba(255, 255, 255, .1);
      border-radius: 3px;
      overflow: hidden;
      margin-bottom: 8px;
    }

    .upload-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #10b981, #059669);
      border-radius: 3px;
      width: 0%;
      transition: width 0.3s ease;
    }

    .upload-file-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: var(--text-xs);
      color: var(--text-medium);
    }

    .upload-filename {
      max-width: 60%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .upload-size {
      color: var(--text-medium);
    }

    #shotBtn {
      width: 100%;
    }

    /* Rimuovi completamente tutti gli sfondi di Leaflet */
    .leaflet-popup-content-wrapper,
    .leaflet-popup-content,
    .leaflet-popup {
      background: transparent !important;
      background-color: transparent !important;
      border: none !important;
      box-shadow: none !important;
      padding: 0;
      margin: 0;
      border-radius: 0 !important;
      color: #fff !important;
    }

    /* Nascondi completamente il contenitore di Leaflet e mostra solo il nostro contenuto */
    .leaflet-popup-content-wrapper {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      padding: 0;
      margin: 0;
    }

    .leaflet-popup-tip {
      background: none !important;
      border: none !important;
      display: none !important
    }


    /* Nascondi il pulsante di chiusura di Leaflet */
    .leaflet-popup-close-button {
      display: none;
    }

    /* Il nostro popup deve sempre avere sfondo blu, indipendentemente dalle regole di Leaflet */
    .shared-place-popup,
    .leaflet-popup .shared-place-popup,
    .leaflet-popup-content-wrapper .shared-place-popup,
    .leaflet-popup-content .shared-place-popup {
      background-color: #0f172a !important;
      background: #0f172a !important;
      border: none !important;
      box-shadow: none !important;
    }

    /* Popup dei luoghi salvati (marker verdi/arancioni) */
    .saved-place-popup,
    .leaflet-popup .saved-place-popup,
    .leaflet-popup-content-wrapper .saved-place-popup,
    .leaflet-popup-content .saved-place-popup {
      background-color: #0f172a !important;
      background: #0f172a !important;
      border: none !important;
      box-shadow: none !important;
      padding: 15px !important;
      border-radius: 12px !important;
    }

    /* Popup di ispirazione (marker blu) */
    .inspiration-popup,
    .leaflet-popup .inspiration-popup,
    .leaflet-popup-content-wrapper .inspiration-popup,
    .leaflet-popup-content .inspiration-popup {
      background-color: #0f172a !important;
      background: #0f172a !important;
      border: none !important;
      box-shadow: none !important;
      padding: 15px !important;
      border-radius: 12px !important;
    }


    .leaflet-control-geocoder.leaflet-bar {
      box-shadow: 0 4px 15px rgba(0, 0, 0, .3);
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--border-color);
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(8, 145, 178, 0.9));
      backdrop-filter: blur(20px)
    }

    .leaflet-control-geocoder-form input {
      background: transparent !important;
      border: none !important;
      color: white;
      font-size: 14px;
      padding: 12px 14px;
      border-radius: 12px !important;
      width: 100%;
      height: 44px
    }

    /* Enhanced search results styling */
    .leaflet-control-geocoder-alternatives {
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(8, 145, 178, 0.95)) !important;
      backdrop-filter: blur(20px) !important;
      border: 1px solid rgba(20, 184, 166, 0.4) !important;
      border-radius: 12px !important;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
      margin-top: 8px !important;
    }
    .leaflet-control-geocoder-alternatives-minimized,
    .leaflet-control-geocoder-alternatives:empty {
      display: none !important;
    }

    .leaflet-control-geocoder-alternatives a {
      color: #e2e8f0 !important;
      background: rgba(15, 23, 42, 0.6) !important;
      border-bottom: 1px solid rgba(20, 184, 166, 0.2) !important;
      padding: 12px 16px !important;
      transition: all 0.2s ease !important;
      font-weight: 500 !important;
    }

    .leaflet-control-geocoder-alternatives a:hover {
      background: rgba(20, 184, 166, 0.3) !important;
      color: #f1f5f9 !important;
      transform: translateX(4px) !important;
    }

    .leaflet-control-geocoder-alternatives a:last-child {
      border-bottom: none !important;
    }

    /* Modern selected state without white background */
    .leaflet-control-geocoder-alternatives a.leaflet-control-geocoder-selected,
    .leaflet-control-geocoder-alternatives a:hover,
    .leaflet-control-geocoder-alternatives a:focus {
      background: rgba(20, 184, 166, 0.2) !important;
      color: #f1f5f9 !important;
      border-left: 3px solid #10b981 !important;
      transform: translateX(2px) !important;
      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2) !important;
    }

    /* Consolidated override for all white backgrounds */
    .leaflet-control-geocoder-alternatives a,
    .leaflet-control-geocoder-alternatives a[style*="background"],
    .leaflet-control-geocoder-alternatives a[style*="white"],
    .leaflet-control-geocoder-alternatives a[style*="rgb(255"],
    .leaflet-control-geocoder-alternatives .leaflet-control-geocoder-alternative {
      background: rgba(15, 23, 42, 0.6) !important;
      background-color: rgba(15, 23, 42, 0.6) !important;
    }

    .leaflet-control-geocoder-alternatives a:hover,
    .leaflet-control-geocoder-alternatives a:focus,
    .leaflet-control-geocoder-alternatives a.leaflet-control-geocoder-selected {
      background: rgba(20, 184, 166, 0.2) !important;
      background-color: rgba(20, 184, 166, 0.2) !important;
    }

    /* Stili per il visualizzatore GPX rimossi per evitare duplicazione */

    body .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: none;
      align-items: center;
      justify-content: center;
      
      padding: 16px;
      min-height: 100vh;
      background: rgba(15, 23, 42, 0.95);
    }

    /* Desktop - overlay con padding ridotto */
    @media (min-width: 768px) {
      body .modal-overlay {
        padding: 20px;
      }
    }

    /* Mobile verticale - overlay ottimizzato */
    @media (max-width: 767px) and (orientation: portrait) {
      body .modal-overlay {
        padding: 2px;
        align-items: flex-start;
        justify-content: center;
        padding-top: 2vh;
        padding-bottom: 2vh;
      }
    }

    /* Mobile orizzontale - overlay ottimizzato */
    @media (max-width: 767px) and (orientation: landscape) {
      body .modal-overlay {
        padding: 10px;
      }
    }

    .modal-overlay.show {
      display: flex;
      animation: fadeIn 0.3s ease-out
    }

    @keyframes fadeIn {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    @keyframes slideInUp {
      from {
        transform: translateY(20px);
        opacity: 0
      }

      to {
        transform: translateY(0);
        opacity: 1
      }
    }

    @keyframes slideInRight {
      from {
        transform: translateX(100%);
        opacity: 0
      }

      to {
        transform: translateX(0);
        opacity: 1
      }
    }

    .lightbox {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .85);
      backdrop-filter: blur(4px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 3000
    }

    .lightbox.show {
      display: flex
    }

    .lightbox-inner {
      max-height: 95vh;
      border-radius: 16px;
      background: rgba(2, 6, 23, .98);
      border: 1px solid var(--border-color);
      box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .lightbox-main {
      position: relative;
      padding: 20px;
      flex-shrink: 0;
    }

    .lightbox-main img {
      display: block;
      margin: 0 auto;
      max-width: 90vw;
      max-height: calc(95vh - 130px);
      object-fit: contain;
      border-radius: 8px;
    }

    .lb-caption {
      position: absolute;
      bottom: 10px;
      left: 20px;
      right: 20px;
      background: rgba(0, 0, 0, .8);
      color: white;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 14px;
      text-align: center
    }

    .lb-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 50px;
      height: 50px;
      background: rgba(0, 0, 0, .7);
      border: none;
      color: white;
      font-size: 20px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .lb-prev {
      left: 20px
    }

    .lb-next {
      right: 20px
    }

    .lb-close {
      position: absolute;
      top: 15px;
      right: 15px;
      width: 25px;
      height: 25px;
      background: linear-gradient(135deg, #ff6b35, #f7931e);
      border: none;
      color: white;
      font-size: 14px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4);
      transition: all 0.2s ease
    }

    .lb-close:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 16px rgba(255, 107, 53, 0.6)
    }

    .lightbox-thumbs {
      display: flex;
      gap: 8px;
      padding: 15px;
      background: rgba(0, 0, 0, .8);
      overflow-x: auto
    }

    .lightbox-thumbs::-webkit-scrollbar {
      height: 0;
      display: none
    }

    .lightbox-thumbs .t {
      width: 60px;
      height: 60px;
      flex-shrink: 0;
      border-radius: 6px;
      overflow: hidden;
      cursor: pointer;
      border: 2px solid transparent
    }

    .lightbox-thumbs .t.active {
      border-color: var(--brand-color-1)
    }

    .lightbox-thumbs .t img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .login-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.95);
      display: none;
      align-items: center;
      justify-content: center;
      
      padding: 16px
    }

    /* Desktop - login overlay con padding ridotto */
    @media (min-width: 768px) {
      .login-overlay {
        padding: 20px;
      }
    }

    /* Mobile verticale - login overlay ottimizzato */
    @media (max-width: 767px) and (orientation: portrait) {
      .login-overlay {
        padding: 8px;
        align-items: center;
        justify-content: center;
        padding-top: 2vh;
        padding-bottom: 2vh;
      }
    }

    /* Mobile orizzontale - login overlay ottimizzato */
    @media (max-width: 767px) and (orientation: landscape) {
      .login-overlay {
        padding: 10px;
      }
    }

    .login-overlay.show {
      display: flex;
    }

    /* Modal di conferma email personalizzato */
    .email-verification-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.95);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 5000;
      padding: 20px;
      backdrop-filter: blur(8px);
    }

    .email-verification-overlay.show {
      display: flex;
    }

    .email-verification-modal {
      background: linear-gradient(135deg, #1e293b, #334155);
      border-radius: 20px;
      padding: 40px;
      max-width: 500px;
      width: 100%;
      text-align: center;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(16, 185, 129, 0.2);
      animation: modalSlideIn 0.4s ease-out;
    }

    @keyframes modalSlideIn {
      from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .email-verification-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 15px;
      margin-bottom: 25px;
    }

    .mountain-icon,
    .backpack-icon,
    .boots-icon {
      font-size: 32px;
      animation: bounce 2s infinite;
    }

    .backpack-icon {
      animation-delay: 0.2s;
    }

    .boots-icon {
      animation-delay: 0.4s;
    }

    @keyframes bounce {

      0%,
      20%,
      50%,
      80%,
      100% {
        transform: translateY(0);
      }

      40% {
        transform: translateY(-10px);
      }

      60% {
        transform: translateY(-5px);
      }
    }

    .email-verification-title {
      color: #ffffff;
      font-size: 28px;
      font-weight: 700;
      margin: 0 0 10px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .email-verification-subtitle {
      color: #10b981;
      font-size: 18px;
      font-weight: 500;
      margin: 0 0 20px;
    }

    .email-verification-message {
      color: #e2e8f0;
      font-size: 16px;
      line-height: 1.6;
      margin: 0 0 30px;
    }

    .email-verification-actions {
      display: flex;
      justify-content: center;
    }

    .email-verification-btn {
      background: linear-gradient(135deg, #10b981, #14b8a6);
      color: #ffffff;
      border: none;
      padding: 14px 28px;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
    }

    .email-verification-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
    }

    .email-verification-btn:active {
      transform: translateY(0);
    }

    /* Responsive per mobile */
    @media (max-width: 768px) {
      .email-verification-modal {
        padding: 30px 20px;
        margin: 10px;
      }

      .email-verification-title {
        font-size: 24px;
      }

      .email-verification-subtitle {
        font-size: 16px;
      }

      .email-verification-message {
        font-size: 14px;
      }

      .mountain-icon,
      .backpack-icon,
      .boots-icon {
        font-size: 28px;
      }
    }

    .login-card {
      width: 90%;
      max-width: 800px;
      background: rgba(2, 6, 23, .98);
      border: 1px solid var(--border-color);
      border-radius: 20px;
      display: flex;
      overflow: hidden;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    }

    /* Desktop - login card larga */
    @media (min-width: 768px) {
      .login-card {
        width: 80%;
        max-width: 900px;
      }
    }

    /* Mobile verticale - ottimizzato per schermi alti */
    @media (max-width: 767px) and (orientation: portrait) {
      .login-card {
        width: 95%;
        max-width: 95vw;
        flex-direction: column;
      }

      .login-image {
        width: 100%;
        height: 200px;
      }

      .login-form {
        width: 100%;
        padding: 20px;
      }
    }

    /* Mobile orizzontale - ottimizzato per schermi larghi */
    @media (max-width: 767px) and (orientation: landscape) {
      .login-card {
        width: 85%;
        max-width: 700px;
      }
    }

    .login-image {
      width: 45%;
      background-image: url('https://res.cloudinary.com/dkbtf1msg/image/upload/f_auto,q_auto,c_fill,w_1200,h_900/v1758289301/_06d5eb64-06202025_izdlim.jpg');
      background-size: cover;
      background-position: center;
    }

    .login-form {
      width: 55%;
      padding: 40px;
      text-align: left;
    }

    .login-title {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;
    }

    .login-title h2 {
      font-size: 24px;
      font-weight: 700;
      color: var(--text-light);
    }

    .login-subtitle {
      color: var(--text-medium);
      font-size: 15px;
      margin-bottom: 24px;
    }

    .login-input {
      width: 100%;
      background: rgba(15, 23, 42, .8);
      border: 1px solid var(--border-color);
      color: white;
      padding: 12px;
      border-radius: 10px;
      font-size: 14px;
      margin-top: 16px;
    }

    .login-input.error {
      border-color: #ef4444;
    }

    .login-actions {
      display: flex;
      gap: 12px;
      margin-top: 16px;
    }

    .login-btn {
      flex: 1;
      background: rgba(15, 23, 42, .8);
      border: 1px solid var(--border-color);
      color: white;
      border-radius: 10px;
      padding: 10px 12px;
      cursor: pointer;
      font-size: 14px;
    }

    .login-btn.primary {
      background: linear-gradient(135deg, var(--brand-color-1), #059669);
      border: none;
    }

    .login-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .notice {
      font-size: 12px;
      color: #9ca3af;
      margin-top: 10px;
    }

    .error-message {
      color: #ef4444;
      font-size: 12px;
      margin-top: 5px;
    }

    .social-divider {
      font-size: 12px;
      color: #9ca3af;
      margin: 24px 0;
      text-align: center;
      position: relative;
    }

    .social-divider::before,
    .social-divider::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 35%;
      height: 1px;
      background: var(--border-color);
    }

    .social-divider::before {
      left: 0;
    }

    .social-divider::after {
      right: 0;
    }

    .social-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: rgba(15, 23, 42, .8);
      border: 1px solid var(--border-color);
      color: white;
      padding: 12px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      margin-top: 12px;
    }

    .tutorial-divider {
      font-size: 12px;
      color: #9ca3af;
      margin: 24px 0;
      text-align: center;
      position: relative;
    }

    .tutorial-divider::before,
    .tutorial-divider::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 35%;
      height: 1px;
      background: var(--border-color);
    }

    .tutorial-divider::before {
      left: 0;
    }

    .tutorial-divider::after {
      right: 0;
    }

    .tutorial-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: linear-gradient(135deg, #14b8a6, #0891b2);
      border: none;
      color: white;
      padding: 14px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      margin-top: 12px;
      transition: all 0.2s ease;
    }

    .tutorial-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(20, 184, 166, 0.4);
    }

    .tutorial-btn .tutorial-icon {
      font-size: 18px;
    }

    #profileDisplayView {
      display: block;
    }

    #profileDisplayView:not(.active) {
      display: none !important;
    }

    #profileEditView {
      display: none;
    }

    #profileEditView.active {
      display: block !important;
    }

    #avatarGrid {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-top: 10px;
      padding: 12px;
      background: rgba(15, 23, 42, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      max-height: 190px;
      overflow-y: auto;
    }

    .avatar-choice {
      width: 52px;
      height: 52px;
      border-radius: 50% !important;
      cursor: pointer;
      border: 2.5px solid rgba(255, 255, 255, 0.12);
      transition: all 0.2s ease;
      aspect-ratio: 1 / 1 !important;
      object-fit: cover !important;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
      flex-shrink: 0;
      background: #0f172a;
      box-sizing: border-box;
      display: block;
    }

    .avatar-choice:hover {
      transform: scale(1.1);
      border-color: rgba(20, 184, 166, 0.7);
    }

    .avatar-choice.selected {
      border-color: #14b8a6 !important;
      box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.4), 0 6px 16px rgba(0, 0, 0, 0.45);
      transform: scale(1.1);
    }

    #profileInfo {
      text-align: center;
    }

    #displayAvatar,
    #editAvatarPreview,
    #profileAvatarDesktop,
    #navProfileAvatar,
    .profile-button img,
    .avatar-choice {
      border-radius: 50% !important;
      object-fit: cover !important;
      object-position: center !important;
      aspect-ratio: 1 / 1 !important;
      display: block;
    }

    /* Scales preset icons so the squircle artwork expands to fill the circle edge-to-edge with no dark margins */
    #displayAvatar[src*="Icon_"],
    #displayAvatar[src*="i.postimg.cc"],
    #editAvatarPreview[src*="Icon_"],
    #editAvatarPreview[src*="i.postimg.cc"],
    #profileAvatarDesktop[src*="Icon_"],
    #profileAvatarDesktop[src*="i.postimg.cc"],
    #navProfileAvatar[src*="Icon_"],
    #navProfileAvatar[src*="i.postimg.cc"],
    .profile-button img[src*="Icon_"],
    .profile-button img[src*="i.postimg.cc"] {
      transform: scale(1.28) !important;
      transform-origin: center !important;
    }

    .avatar-choice[src*="Icon_"],
    .avatar-choice[src*="i.postimg.cc"] {
      transform: scale(1.26) !important;
      transform-origin: center !important;
    }

    .profile-spinner {
      width: 28px;
      height: 28px;
      border: 3px solid rgba(255, 255, 255, 0.2);
      border-top-color: #14b8a6;
      border-radius: 50%;
      animation: profileSpin 0.75s linear infinite;
    }

    @keyframes profileSpin {
      to { transform: rotate(360deg); }
    }

    #displayUsername {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    #profileStats {
      margin-bottom: 16px;
      font-size: 14px;
      color: var(--text-medium);
    }

    .pill-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 5px;
    }

    .pill {
      background: rgba(31, 41, 55, .8);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 4px 6px;
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: var(--text-xs);
      cursor: move;
    }

    .pill.drop-before {
      border-left: 2px solid var(--brand-color-1);
    }

    .pill.drop-after {
      border-right: 2px solid var(--brand-color-1);
    }

    .pill-url {
      max-width: 75px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .pill-caption {
      color: var(--text-medium);
      font-style: italic;
    }

    .pill button {
      margin-left: 2px;
      padding: 1px 3px;
      font-size: var(--text-xs);
    }

    .carousel {
      margin-bottom: 12px;
    }

    .carousel-main {
      position: relative;
      height: 200px;
      overflow: hidden;
      border-radius: 12px;
      background: var(--dark-bg-2);
    }

    .carousel-main img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      cursor: pointer;
    }

    .carousel-thumbs {
      display: flex;
      gap: 6px;
      margin-top: 8px;
      overflow-x: auto;
      padding: 4px 0;
    }

    .carousel-thumbs .t {
      width: 40px;
      height: 40px;
      border-radius: 6px;
      overflow: hidden;
      cursor: pointer;
      border: 2px solid transparent;
      flex-shrink: 0;
    }

    .carousel-thumbs .t.active {
      border-color: var(--brand-color-1);
    }

    .carousel-thumbs .t img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: opacity 0.2s ease;
    }

    .loading {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: var(--brand-color-1);
      animation: spin 1s ease-in-out infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    #toastContainer,
    #toastContainer:popover-open {
      position: fixed !important;
      top: max(16px, env(safe-area-inset-top, 16px)) !important;
      right: max(16px, env(safe-area-inset-right, 16px)) !important;
      left: auto !important;
      bottom: auto !important;
      z-index: 2147483647 !important; /* Sempre sopra a qualunque modal, backdrop o elemento */
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-end !important;
      gap: 10px !important;
      pointer-events: none !important;
      width: auto !important;
      max-width: min(400px, calc(100vw - 32px)) !important;
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .toast {
      pointer-events: auto !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 10px !important;
      padding: 11px 16px !important;
      border-radius: 12px !important;
      color: #ffffff !important;
      font-size: 13px !important;
      font-weight: 600 !important;
      line-height: 1.35 !important;
      box-shadow: 0 14px 38px rgba(0, 0, 0, 0.7), 0 3px 10px rgba(0, 0, 0, 0.4) !important;
      border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
      backdrop-filter: blur(20px) saturate(190%) !important;
      -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
      cursor: pointer !important;
      animation: slideUp 250ms cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
      transition: transform 0.2s ease, opacity 0.2s ease !important;
      box-sizing: border-box !important;
      max-width: 100% !important;
      user-select: none !important;
    }

    .toast.removing {
      animation: slideDown 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    }

    .toast.success {
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.98), rgba(5, 150, 105, 0.98)) !important;
      border-color: rgba(167, 243, 208, 0.5) !important;
      box-shadow: 0 14px 38px rgba(16, 185, 129, 0.45), 0 3px 10px rgba(0, 0, 0, 0.4) !important;
    }

    .toast.error {
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.98), rgba(185, 28, 28, 0.98)) !important;
      border-color: rgba(254, 202, 202, 0.55) !important;
      box-shadow: 0 14px 38px rgba(220, 38, 38, 0.55), 0 3px 10px rgba(0, 0, 0, 0.4) !important;
    }

    .toast.info {
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98)) !important;
      border-color: rgba(56, 189, 248, 0.5) !important;
      box-shadow: 0 14px 38px rgba(15, 23, 42, 0.65), 0 3px 10px rgba(0, 0, 0, 0.4) !important;
    }

    .toast-badge-icon {
      font-size: 15px !important;
      line-height: 1 !important;
      flex-shrink: 0 !important;
    }

    .toast-content-text {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      word-break: break-word !important;
    }

    .toast-dismiss-btn {
      font-size: 18px !important;
      line-height: 1 !important;
      opacity: 0.75 !important;
      margin-left: 6px !important;
      flex-shrink: 0 !important;
      cursor: pointer !important;
      padding: 0 2px !important;
      transition: opacity 0.15s ease !important;
    }
    .toast-dismiss-btn:hover {
      opacity: 1 !important;
    }

    /* GPX Statistics Styles - Coerenti con il design dell'app */
    .gpx-stats-section {
      margin-top: 12px;
      padding: 12px;
      background: rgba(15, 23, 42, .8);
      backdrop-filter: blur(20px);
      border-radius: 12px;
      border: 1px solid var(--border-color);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .gpx-stats-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border-color);
    }

    .gpx-stats-header h4 {
      margin: 0;
      color: var(--brand-color-1);
      font-size: 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .gpx-stats-toggle {
      font-size: var(--text-xs);
      padding: 4px 8px;
      background: linear-gradient(135deg, var(--brand-color-1), var(--brand-color-2));
      border: none;
      color: white;
      border-radius: 6px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 2px 6px rgba(20, 184, 166, 0.3);
    }

    .gpx-stats-toggle:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(20, 184, 166, 0.4);
    }

    .gpx-stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
      font-size: var(--text-xs);
      margin-bottom: 6px;
    }

    .stat-item {
      background: rgba(2, 6, 23, .6);
      border: 1px solid rgba(20, 184, 166, 0.2);
      border-radius: 6px;
      padding: 2px;
      text-align: center;
    }

    .stat-label {
      display: block;
      color: var(--text-medium);
      font-weight: 500;
      font-size: var(--text-xs);
      margin-bottom: 1px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    .stat-value {
      color: var(--text-light);
      font-weight: 600;
      font-family: 'Courier New', monospace;
      font-size: var(--text-xs);
    }

    /* Mini Elevation Chart Styles - Coerenti */
    .compact-elevation-section {
      margin-top: 8px;
      padding: 8px;
      background: rgba(2, 6, 23, .6);
      border-radius: 8px;
      border: 1px solid rgba(20, 184, 166, 0.2);
    }

    .elevation-chart-mini {
      margin-bottom: 6px;
      text-align: center;
    }

    .elevation-chart-mini canvas {
      border-radius: 6px;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(20, 184, 166, 0.1);
      display: block;
      margin: 0 auto;
    }

    .elevation-summary {
      display: flex;
      justify-content: space-between;
      font-size: var(--text-xs);
      color: var(--text-medium);
      font-weight: 500;
    }

    .elevation-min {
      color: var(--brand-color-2);
      font-weight: 600;
    }

    .elevation-max {
      color: #ef4444;
      font-weight: 600;
    }

    /* Elevation Profile Styles */
    .elevation-profile-section {
      margin-top: 10px;
      text-align: center;
    }

    .elevation-profile-btn {
      background: linear-gradient(135deg, #0284c7, #0369a1);
      border: none;
      color: white;
      font-size: var(--text-xs);
      padding: 6px 12px;
      border-radius: 6px;
      cursor: pointer;
      transition: transform 0.2s ease;
    }

    .elevation-profile-btn:hover {
      transform: translateY(-1px);
    }

    .elevation-profile-modal-content {
      max-width: 600px;
      width: 95%;
    }

    .elevation-chart-container {
      background: rgba(15, 23, 42, 0.8);
      border-radius: 8px;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid rgba(20, 184, 166, 0.3);
    }

    .elevation-info {
      background: rgba(15, 23, 42, 0.6);
      padding: 10px;
      border-radius: 6px;
      font-size: 12px;
    }

    .elevation-info p {
      margin: 5px 0;
      color: var(--text-medium);
    }

    /* Places Overview Modal Styles - Modern Dark Glassmorphism */
    .places-overview-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(15, 23, 42, 0.75);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 2000;
      padding: 16px;
      opacity: 0;
      transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .places-overview-overlay.show {
      display: flex;
      opacity: 1;
    }

    .places-overview-card {
      width: 100%;
      max-width: 520px;
      max-height: 88vh;
      background: rgba(15, 23, 42, 0.88);
      backdrop-filter: blur(28px) saturate(180%);
      -webkit-backdrop-filter: blur(28px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 24px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
      animation: placesModalPopIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes placesModalPopIn {
      from {
        opacity: 0;
        transform: scale(0.96) translateY(10px);
      }
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    .places-overview-header {
      background: rgba(15, 23, 42, 0.65);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      padding: 18px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }

    .places-modal-header-spacer {
      width: 32px;
      height: 32px;
      flex-shrink: 0;
    }

    .places-overview-title {
      font-size: 20px;
      font-weight: 700;
      color: #f8fafc;
      letter-spacing: -0.02em;
      margin: 0;
      text-align: center;
      flex: 1;
    }

    .places-overview-close {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #f97316 !important;
      border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
      color: #ffffff !important;
      font-size: 15px;
      font-weight: 700;
      box-shadow: 0 2px 10px rgba(249, 115, 22, 0.45);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      flex-shrink: 0;
      padding: 0;
      line-height: 1;
    }

    .places-overview-close:hover {
      background: #ea580c !important;
      transform: scale(1.08);
      box-shadow: 0 4px 14px rgba(249, 115, 22, 0.65);
    }

    .places-overview-content {
      padding: 28px 24px;
      text-align: center;
    }

    .places-overview-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 24px;
    }

    .stat-item-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 24px 16px;
      background: rgba(30, 41, 59, 0.45);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      outline: none;
      color: inherit;
      text-decoration: none;
      font-family: inherit;
    }

    .stat-item-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.15), transparent 70%);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }

    .stat-item-btn:hover {
      background: rgba(30, 41, 59, 0.75);
      border-color: rgba(56, 189, 248, 0.4);
      transform: translateY(-3px);
      box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.6), 0 0 20px rgba(56, 189, 248, 0.15);
    }

    .stat-item-btn:hover::before {
      opacity: 1;
    }

    .stat-item-btn:active {
      transform: translateY(-1px);
    }

    .stat-icon-wrapper {
      width: 62px;
      height: 62px;
      border-radius: 18px;
      background: rgba(15, 23, 42, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
      transition: transform 0.25s ease;
    }

    .stat-item-btn:hover .stat-icon-wrapper {
      transform: scale(1.08);
    }

    .stat-icon-img {
      width: 38px;
      height: 38px;
      object-fit: contain;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    }

    .stat-number {
      font-size: 34px;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1;
      background: linear-gradient(135deg, #38bdf8 0%, #34d399 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .stat-label {
      font-size: 13px;
      font-weight: 700;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .places-overview-footer {
      color: #64748b;
      font-size: 13px;
      font-weight: 500;
      margin-top: 4px;
      line-height: 1.5;
    }

    @media (max-width: 640px) {
      .places-overview-overlay {
        padding: 10px;
      }
      .places-overview-card {
        max-height: 92vh;
        border-radius: 20px;
      }
      .places-overview-header {
        padding: 14px 18px;
      }
      .places-overview-title {
        font-size: 18px;
      }
      .places-overview-content {
        padding: 20px 16px;
      }
      .places-overview-stats {
        gap: 12px;
      }
      .stat-item-btn {
        padding: 18px 12px;
        border-radius: 16px;
      }
      .stat-icon-wrapper {
        width: 52px;
        height: 52px;
        border-radius: 14px;
      }
      .stat-icon-img {
        width: 32px;
        height: 32px;
      }
      .stat-number {
        font-size: 28px;
      }
    }

    /* Share Modal Styles */
    .share-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(15, 23, 42, 0.95);
      display: none;
      align-items: center;
      justify-content: center;
      
      padding: 16px;
    }

    /* Desktop - share overlay con padding ridotto */
    @media (min-width: 768px) {
      .share-modal-overlay {
        padding: 20px;
      }
    }

    /* Mobile verticale - share overlay ottimizzato */
    @media (max-width: 767px) and (orientation: portrait) {
      .share-modal-overlay {
        padding: 8px;
        align-items: center;
        justify-content: center;
        padding-top: 2vh;
        padding-bottom: 2vh;
      }
    }

    /* Mobile orizzontale - share overlay ottimizzato */
    @media (max-width: 767px) and (orientation: landscape) {
      .share-modal-overlay {
        padding: 10px;
      }
    }

    .share-modal-overlay.show {
      display: flex;
    }

    .share-modal-card {
      width: 90%;
      max-width: 500px;
      max-height: 85vh;
      background: rgba(2, 6, 23, .98);
      border: 1px solid var(--border-color);
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    }

    /* Desktop - modal di condivisione larghi */
    @media (min-width: 768px) {
      .share-modal-card {
        width: 80%;
        max-width: 600px;
        max-height: 80vh;
      }
    }

    /* Mobile verticale - ottimizzato per schermi alti */
    @media (max-width: 767px) and (orientation: portrait) {
      .share-modal-card {
        width: 95%;
        max-width: 95vw;
        max-height: 90vh;
      }
    }

    /* Mobile orizzontale - ottimizzato per schermi larghi */
    @media (max-width: 767px) and (orientation: landscape) {
      .share-modal-card {
        width: 85%;
        max-width: 550px;
        max-height: 95vh;
      }
    }

    .share-modal-header {
      background: linear-gradient(135deg, #14b8a6, #0891b2);
      padding: 20px;
      text-align: center;
      position: relative;
    }

    .share-modal-title {
      font-size: 20px;
      font-weight: 700;
      color: white;
      margin: 0;
    }

    .share-modal-close {
      position: absolute;
      top: 15px;
      right: 15px;
      width: 30px;
      height: 30px;
      background: rgba(255, 255, 255, 0.2);
      border: none;
      color: white;
      font-size: 18px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .share-modal-close:hover {
      background: rgba(255, 255, 255, 0.3);
      transform: scale(1.1);
    }

    .share-modal-content {
      padding: 24px;
    }

    .share-place-info {
      background: rgba(15, 23, 42, .6);
      border: 1px solid var(--border-color);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 20px;
    }

    .share-place-name {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-light);
      margin-bottom: 8px;
    }

    .share-place-details {
      color: var(--text-medium);
      font-size: 14px;
      line-height: 1.4;
    }

    .share-global-info {
      margin-top: 15px;
      padding: 10px;
      background: linear-gradient(135deg, #4CAF50, #45a049);
      color: white;
      border-radius: 8px;
      font-size: 13px;
      line-height: 1.3;
    }

    /* Stili per luoghi condivisi temporanei */
    .shared-place-marker {
      background: linear-gradient(135deg, #14b8a6, #0891b2);
      border: 3px solid white;
      border-radius: 50%;
      box-shadow: 0 0 20px rgba(20, 184, 166, 0.6);
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.1);
      }

      100% {
        transform: scale(1);
      }
    }

    /* Scheda Luogo Condiviso - Design Unificato con i Luoghi Salvati */
    .shared-place-card {
      /* Eredita tutte le proprietà glassmorphism da .saved-popup-card */
    }

    .shared-badge-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      height: 24px;
      padding: 0 9px;
      background: rgba(20, 184, 166, 0.15);
      border: 1px solid rgba(20, 184, 166, 0.35);
      border-radius: 9999px;
      font-size: 11px;
      font-weight: 600;
      color: #5eead4;
      line-height: 1;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .saved-popup-add-to-map-btn {
      width: 100%;
      height: 40px;
      border-radius: 12px;
      font-size: 13.5px;
      font-weight: 700;
      letter-spacing: 0.01em;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-decoration: none;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      background: linear-gradient(135deg, #10b981 0%, #0d9488 100%);
      border: 1px solid rgba(255, 255, 255, 0.25);
      color: #ffffff;
      box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
      box-sizing: border-box;
    }

    .saved-popup-add-to-map-btn:hover {
      background: linear-gradient(135deg, #059669 0%, #0f766e 100%);
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
    }

    /* Scrollbar arancione trasparente solo per la sezione testo - FORZATA */
    .popup-info {
      overflow-y: auto;
      max-height: 180px !important;
      /* Circa 10 righe di testo */
      padding-right: 8px !important;
      margin-bottom: 15px !important;
    }

    .popup-info::-webkit-scrollbar {
      width: 8px !important;
      height: auto !important;
      background: transparent !important;
      display: block !important;
    }

    .popup-info::-webkit-scrollbar-track {
      background: transparent !important;
      display: block !important;
    }

    .popup-info::-webkit-scrollbar-thumb {
      background: rgba(249, 115, 22, 0.8) !important;
      border-radius: 4px !important;
      border: 1px solid rgba(249, 115, 22, 0.5) !important;
      display: block !important;
    }

    .popup-info::-webkit-scrollbar-thumb:hover {
      background: rgba(249, 115, 22, 1) !important;
    }

    /* TEMPORANEO: Nascondi scrollbar solo per elementi specifici, NON per popup-info */
    .shared-place-popup::-webkit-scrollbar,
    .places-list-content::-webkit-scrollbar,
    .sidebar::-webkit-scrollbar,
    .profile-content::-webkit-scrollbar,
    .modal::-webkit-scrollbar,
    .modal-content::-webkit-scrollbar {
      width: 0 !important;
      height: 0 !important;
      display: none;
    }

    /* TEMPORANEO: Nascondi scrollbar globalmente ma NON per popup-info */
    *:not(.popup-info) {
      scrollbar-width: none !important;
      -ms-overflow-style: none !important;
    }

    /* Scrollbar per Firefox e altri browser - solo per popup-info - FORZATA */
    .popup-info {
      scrollbar-width: thin !important;
      scrollbar-color: rgba(249, 115, 22, 0.8) transparent !important;
    }

    .shared-place-popup h3 {
      color: var(--brand-color-1);
      margin-bottom: 12px;
      font-size: 16px;
      border-bottom: 2px solid var(--border-color);
      padding-bottom: 6px;
    }

    .popup-info p {
      margin: 6px 0;
      font-size: 13px;
      line-height: 1.4;
      color: var(--text-medium);
    }

    /* Scrollbar arancione per i popup dei luoghi salvati */
    .saved-place-popup div[style*="overflow-y: auto"]::-webkit-scrollbar {
      width: 8px !important;
    }

    .saved-place-popup div[style*="overflow-y: auto"]::-webkit-scrollbar-track {
      background: transparent !important;
    }

    .saved-place-popup div[style*="overflow-y: auto"]::-webkit-scrollbar-thumb {
      background: rgba(249, 115, 22, 0.7) !important;
      border-radius: 4px !important;
      border: 1px solid rgba(249, 115, 22, 0.3) !important;
    }

    .saved-place-popup div[style*="overflow-y: auto"]::-webkit-scrollbar-thumb:hover {
      background: rgba(249, 115, 22, 0.9) !important;
    }

    .shared-place-popup strong {
      color: var(--text-light);
    }

    .shared-place-actions {
      margin-top: 15px;
      text-align: center;
    }

    .shared-place-actions .btn-small {
      background: linear-gradient(135deg, #14b8a6, #0891b2);
      border: none;
      color: white;
      padding: 8px 16px;
      border-radius: 6px;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .shared-place-actions .btn-small:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(20, 184, 166, 0.4);
    }

    .shared-place-images {
      margin-top: 15px;
    }

    .shared-place-images p {
      margin-bottom: 10px;
      color: var(--text-light);
      font-weight: 600;
    }

    .image-carousel {
      position: relative;
      margin-top: 10px;
    }

    .carousel-container {
      position: relative;
      width: 100%;
      height: 150px;
      overflow: hidden;
      border-radius: 8px;
      background: rgba(15, 23, 42, .6);
    }

    .carousel-slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .carousel-slide.active {
      opacity: 1;
    }

    .carousel-image {
      max-width: 100%;
      max-height: 120px;
      border-radius: 6px;
      object-fit: cover;
    }

    .image-caption {
      margin-top: 5px;
      font-size: var(--text-xs);
      color: var(--text-medium);
      text-align: center;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .carousel-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 8px;
      gap: 8px;
    }

    .carousel-btn {
      background: rgba(20, 184, 166, 0.8);
      border: none;
      color: white;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .carousel-btn:hover {
      background: rgba(20, 184, 166, 1);
      transform: scale(1.1);
    }

    .carousel-dots {
      display: flex;
      gap: 4px;
    }

    .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .dot.active {
      background: var(--brand-color-1);
    }

    .share-link-section {
      margin-bottom: 20px;
    }

    .share-link-section label {
      display: block;
      color: var(--text-light);
      font-weight: 500;
      margin-bottom: 8px;
    }

    .share-link-input-group {
      display: flex;
      gap: 8px;
    }

    .share-link-input {
      flex: 1;
      padding: 10px 12px;
      background: rgba(15, 23, 42, .8);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      color: var(--text-light);
      font-size: 12px;
      font-family: monospace;
      transition: all 0.3s ease;
    }

    .share-link-input.loading {
      background: rgba(15, 23, 42, .6);
      border-color: var(--brand-color-1);
      color: var(--brand-color-1);
      position: relative;
    }

    .share-link-input.loading::after {
      content: '';
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      border: 2px solid var(--brand-color-1);
      border-radius: 50%;
      border-top-color: transparent;
      animation: spin 1s linear infinite;
    }

    .copy-btn {
      background: linear-gradient(135deg, #10b981, #059669) !important;
      border-color: #10b981 !important;
      white-space: nowrap;
    }

    .share-actions {
      display: flex;
      gap: 12px;
      margin-bottom: 20px;
    }

    .share-whatsapp-btn {
      background: linear-gradient(135deg, #25d366, #128c7e) !important;
      border-color: #25d366 !important;
      flex: 1;
    }

    .share-email-btn {
      background: linear-gradient(135deg, #ea4335, #d93025) !important;
      border-color: #ea4335 !important;
      flex: 1;
    }

    .share-note {
      background: rgba(20, 184, 166, 0.1);
      border: 1px solid rgba(20, 184, 166, 0.3);
      border-radius: 8px;
      padding: 12px;
      font-size: 12px;
      color: var(--text-medium);
      line-height: 1.4;
    }

    .share-note strong {
      color: #14b8a6;
    }

    /* Shared Place Styles */
    .shared-place-marker {
      background: linear-gradient(135deg, #14b8a6, #0891b2);
      border: 3px solid white;
      border-radius: 50%;
      box-shadow: 0 0 20px rgba(20, 184, 166, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: white;
      animation: sharedPulse 2s infinite;
    }

    @keyframes sharedPulse {

      0%,
      100% {
        transform: scale(1);
        opacity: 1;
      }

      50% {
        transform: scale(1.1);
        opacity: 0.8;
      }
    }



    /* Places List Modal Styles - Modern Dark Glassmorphism */
    .places-list-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(15, 23, 42, 0.75);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 2000;
      padding: 16px;
      opacity: 0;
      transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .places-list-overlay.show {
      display: flex;
      opacity: 1;
    }

    /* Popup di conferma salvataggio */
    .save-confirmation-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(15, 23, 42, 0.95);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 5000;
      padding: 16px;
    }

    .save-confirmation-overlay.show {
      display: flex;
    }

    .save-confirmation-card {
      width: 90%;
      max-width: 400px;
      background: rgba(2, 6, 23, .98);
      border: 1px solid var(--border-color);
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
      text-align: center;
      padding: 30px;
    }

    .save-confirmation-icon {
      font-size: 48px;
      margin-bottom: 16px;
    }

    .save-confirmation-title {
      font-size: 24px;
      font-weight: 700;
      color: white;
      margin: 0 0 12px 0;
    }

    .save-confirmation-message {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.85);
      margin: 0 0 24px 0;
    }

    .save-confirmation-btn {
      background: linear-gradient(135deg, #10b981, #059669);
      border: none;
      color: white;
      padding: 12px 24px;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .save-confirmation-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    }

    .places-list-card {
      width: 100%;
      max-width: 740px;
      max-height: 88vh;
      background: rgba(15, 23, 42, 0.88);
      backdrop-filter: blur(28px) saturate(180%);
      -webkit-backdrop-filter: blur(28px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 24px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
      animation: placesModalPopIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .places-list-header {
      background: rgba(15, 23, 42, 0.65);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      gap: 12px;
    }

    .places-list-back-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: #cbd5e1;
      padding: 6px 12px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      flex-shrink: 0;
      font-family: inherit;
    }

    .places-list-back-btn:hover {
      background: rgba(255, 255, 255, 0.15);
      color: #ffffff;
      border-color: rgba(255, 255, 255, 0.25);
      transform: translateX(-2px);
    }

    .places-list-back-btn:active {
      transform: translateX(0);
    }

    .places-list-title {
      font-size: 20px;
      font-weight: 700;
      color: #f8fafc;
      letter-spacing: -0.02em;
      margin: 0;
      text-align: center;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .places-list-close {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #f97316 !important;
      border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
      color: #ffffff !important;
      font-size: 15px;
      font-weight: 700;
      box-shadow: 0 2px 10px rgba(249, 115, 22, 0.45);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      flex-shrink: 0;
      padding: 0;
      line-height: 1;
    }

    .places-list-close:hover {
      background: #ea580c !important;
      transform: scale(1.08);
      box-shadow: 0 4px 14px rgba(249, 115, 22, 0.65);
    }

    .places-list-filters {
      display: flex;
      gap: 6px;
      padding: 5px;
      background: rgba(15, 23, 42, 0.55);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 14px;
      margin: 14px 20px;
    }

    .places-filter-btn {
      flex: 1;
      background: transparent;
      border: 1px solid transparent;
      color: #94a3b8;
      padding: 8px 14px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      text-align: center;
      font-family: inherit;
    }

    .places-filter-btn:hover {
      color: #f1f5f9;
      background: rgba(255, 255, 255, 0.05);
    }

    .places-filter-btn.active {
      background: linear-gradient(135deg, rgba(20, 184, 166, 0.25) 0%, rgba(13, 148, 136, 0.35) 100%);
      border-color: rgba(45, 212, 191, 0.4);
      color: #5eead4;
      box-shadow: 0 2px 8px rgba(20, 184, 166, 0.2);
    }

    .places-list-content {
      padding: 0 20px 20px 20px;
      overflow-y: auto;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .places-category {
      margin-bottom: 24px;
    }

    .places-category-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-light);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .places-category-title .icon {
      font-size: 22px;
    }

    .places-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .place-item {
      background: rgba(30, 41, 59, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 16px;
      padding: 13px 16px;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .place-item:hover {
      background: rgba(30, 41, 59, 0.75);
      border-color: rgba(56, 189, 248, 0.35);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }

    .place-item:active {
      transform: translateY(0);
    }

    .place-info {
      flex: 1;
      min-width: 0;
    }

    .place-name {
      font-size: 15px;
      font-weight: 600;
      color: #f1f5f9;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 8px;
      word-break: break-word;
    }

    .place-number {
      background: rgba(56, 189, 248, 0.15);
      color: #38bdf8;
      border: 1px solid rgba(56, 189, 248, 0.3);
      min-width: 24px;
      height: 24px;
      padding: 0 6px;
      border-radius: 7px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      flex-shrink: 0;
    }

    .place-details {
      font-size: 12px;
      color: #94a3b8;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .place-status {
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .place-status.visited {
      background: rgba(34, 197, 94, 0.15);
      color: #4ade80;
      border: 1px solid rgba(34, 197, 94, 0.3);
    }

    .place-status.wishlist {
      background: rgba(249, 115, 22, 0.15);
      color: #fb923c;
      border: 1px solid rgba(249, 115, 22, 0.3);
    }

    .place-metric-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: #cbd5e1;
      font-size: 12px;
      font-weight: 500;
      background: rgba(255, 255, 255, 0.05);
      padding: 2px 7px;
      border-radius: 6px;
    }

    .place-location {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 11px;
      color: #64748b;
      margin-top: 5px;
    }

    .place-arrow {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: #94a3b8;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .place-item:hover .place-arrow {
      color: #38bdf8;
      background: rgba(56, 189, 248, 0.15);
      border-color: rgba(56, 189, 248, 0.35);
      transform: translateX(3px);
    }

    .places-empty {
      text-align: center;
      padding: 40px 20px;
      color: #94a3b8;
    }

    @media (max-width: 640px) {
      .places-list-card {
        max-height: 92vh;
        border-radius: 20px;
      }
      .places-list-header {
        padding: 12px 14px;
      }
      .places-list-title {
        font-size: 17px;
      }
      .places-list-back-btn {
        padding: 5px 9px;
        font-size: 12px;
      }
      .places-list-filters {
        margin: 10px 14px;
      }
      .places-list-content {
        padding: 0 14px 16px 14px;
      }
      .place-item {
        padding: 12px 12px;
        gap: 10px;
      }
      .place-name {
        font-size: 14px;
      }
    }

    .places-empty .icon {
      font-size: 48px;
      margin-bottom: 16px;
      opacity: 0.5;
    }

    .places-empty h3 {
      font-size: 18px;
      margin-bottom: 8px;
      color: var(--text-light);
    }

    .places-empty p {
      font-size: 14px;
      line-height: 1.5;
    }

    /* Animazione per il marker evidenziato */
    @keyframes pulse {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.1);
      }

      100% {
        transform: scale(1);
      }
    }

    .nav-profile-visual {
      width: 26px;
      height: 26px;
      border-radius: 50% !important;
      background-color: var(--dark-bg-2);
      border: 1.5px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
      aspect-ratio: 1 / 1 !important;
      flex-shrink: 0;
    }

    .nav-profile-visual img {
      width: 100%;
      height: 100%;
      border-radius: 50% !important;
      object-fit: cover !important;
      aspect-ratio: 1 / 1 !important;
    }

    .nav-profile-visual span {
      font-size: var(--text-xs);
      font-weight: 600;
      color: var(--text-light);
    }

    .nav-profile-visual .default-icon {
      width: 16px;
      height: 16px;
      color: var(--text-medium);
    }

    /* Inspire Me Feature Styles */
    .inspiration-marker {
      cursor: pointer;
      transition: transform 0.2s ease;
    }

    .inspiration-marker:hover {
      transform: scale(1.1);
    }

    .inspiration-marker img {
      width: 24px;
      height: 24px;
      object-fit: contain;
    }

    #inspireBtn {
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    #inspireBtn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    }

    #inspireBtn:disabled {
      opacity: 0.7;
      cursor: not-allowed;
      transform: none;
    }

    #inspireBtn .loading {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: white;
      animation: spin 1s ease-in-out infinite;
      margin-right: 8px;
    }

    /* Modern Floating Inspiration Progress Banner */
    .insp-progress-banner {
      position: absolute;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1200;
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(15, 23, 42, 0.90);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(20, 184, 166, 0.4);
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 24px rgba(20, 184, 166, 0.2);
      border-radius: 9999px;
      padding: 9px 18px;
      color: #f1f5f9;
      font-size: 13.5px;
      font-weight: 500;
      max-width: 90%;
      pointer-events: none;
      animation: inspBannerIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    @keyframes inspBannerIn {
      from { opacity: 0; transform: translate(-50%, -16px) scale(0.96); }
      to { opacity: 1; transform: translate(-50%, 0) scale(1); }
    }
    .insp-progress-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .insp-spin-compass {
      color: #14b8a6;
      animation: inspCompassRotate 3.5s linear infinite;
    }
    @keyframes inspCompassRotate {
      0% { transform: rotate(0deg); }
      50% { transform: rotate(180deg); }
      100% { transform: rotate(360deg); }
    }
    .insp-progress-body {
      display: flex;
      align-items: center;
      min-width: 0;
    }
    .insp-progress-phrase {
      color: #e2e8f0;
      font-size: 13.5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .insp-progress-counter-wrap {
      flex-shrink: 0;
      margin-left: 4px;
    }
    .insp-counter-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(20, 184, 166, 0.18);
      border: 1px solid rgba(20, 184, 166, 0.45);
      color: #2dd4bf;
      padding: 3px 11px;
      border-radius: 9999px;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.2px;
      white-space: nowrap;
      transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease;
    }
    .insp-counter-pill.bump {
      transform: scale(1.18);
      background: rgba(20, 184, 166, 0.35);
      box-shadow: 0 0 16px rgba(45, 212, 191, 0.6);
    }
    .insp-pulse-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #14b8a6;
      box-shadow: 0 0 8px #14b8a6;
      animation: inspDotPulse 1.2s infinite ease-in-out;
    }
    @keyframes inspDotPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.35; transform: scale(0.7); }
    }
    @media (max-width: 800px) {
      .insp-progress-banner {
        top: 75px;
        padding: 7px 14px;
        font-size: 12.5px;
        gap: 8px;
        max-width: 94%;
      }
      .insp-progress-phrase {
        font-size: 12px;
        max-width: 170px;
      }
      .insp-counter-pill {
        font-size: 11.5px;
        padding: 2px 8px;
      }
    }

    @media (max-width: 800px) {
      :root {
        --header-height: 60px;
        --nav-height: 50px;
      }

      .userbox {
        display: none;
      }

      .main-container {
        padding-bottom: var(--nav-height);
      }

      .sidebar {
        position: fixed;
        top: var(--header-height);
        bottom: var(--nav-height);
        height: auto;
        right: 0;
        width: 260px;
        border-left: 1px solid var(--border-color);
        transform: translateX(100%);
        padding-bottom: 20px;
        overflow-y: auto;
        max-height: calc(100vh - var(--header-height) - var(--nav-height));
        box-sizing: border-box;
        padding: 10px;
      }

      .sidebar.show {
        transform: translateX(0%);
      }

      body .mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--nav-height);
        background: rgba(17, 24, 39, .9);
        backdrop-filter: blur(20px);
        border-top: 1px solid var(--border-color);
        align-items: center;
        justify-content: space-around;
        z-index: 1001;
      }

      .nav-btn {
        background: none;
        border: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        color: var(--text-medium);
        cursor: pointer;
        padding: 6px;
        flex: 1;
      }

      .nav-btn .default-icon {
        width: 18px;
        height: 18px;
      }

      .nav-btn span {
        font-size: var(--text-xs);
        font-weight: 500;
      }

      .nav-btn.primary {
        transform: translateY(-6px);
      }

      .nav-btn.primary div {
        width: 36px;
        height: 36px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--brand-color-1), var(--brand-color-2));
        color: white;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
      }

      .nav-btn.primary svg {
        width: 20px;
        height: 20px;
      }

      #shotBtn {
        display: none;
      }

      .filter-btn {
        padding: 5px 8px;
        border-radius: 6px;
        font-size: var(--text-xs);
      }

      .add-btn {
        padding: 7px;
        border-radius: 6px;
        font-size: var(--text-xs);
      }

      .section-title {
        font-size: var(--text-xs);
      }

      /* Mobile adjustments for Inspire Me button */
      #action-buttons {
        margin-bottom: 8px;
      }

      #inspireBtn {
        font-size: var(--text-xs);
        padding: 5px 8px;
      }

      .lightbox-inner {
        max-width: 95vw;
        max-height: 98vh;
      }

      .modal {
        width: 95%;
        max-width: 450px;
        padding: 16px;
      }

      .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
      }

      .modal-title {
        font-size: 18px;
        margin: 0;
      }

      .modal-close-btn {
        background: linear-gradient(135deg, #f97316, #ea580c);
        border: none;
        color: white;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        cursor: pointer;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
      }

      .modal-close-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
      }

      .modal-section {
        margin-bottom: 16px;
      }

      .modal-section-title {
        font-size: 13px;
        margin-bottom: 8px;
      }

      .text-input {
        padding: 8px 10px;
        font-size: 13px;
      }

      .btn {
        padding: 8px 12px;
        font-size: 12px;
      }

      .login-image {
        display: none;
      }

      .login-form {
        width: 100%;
        padding: 16px;
      }

      .login-card {
        max-width: 380px;
      }


      /* Assicura che il brand Vemarcus sia ben visibile su mobile */
      .vemarcus-brand-box {
        margin-bottom: 20px;
        padding: 6px;
      }

      /* Migliora la leggibilità delle info cards su mobile */
      .info-cards {
        margin-bottom: 12px;
      }

      /* Assicura che l'ultima sezione della sidebar abbia spazio sufficiente */
      .sidebar-section:last-child {
        margin-bottom: 16px;
      }

      /* Nascondi scrollbar della sidebar su mobile */

      .sidebar::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none;
      }

      @media (max-width: 768px) {

        /* Legal links mobile optimization */
        .legal-links {
          gap: 6px;
        }

        .legal-link-btn {
          padding: 12px 14px;
          font-size: 14px;
          font-weight: 600;
        }

        .gdpr-info {
          margin-top: 8px;
          padding: 6px;
        }

        .gdpr-text {
          font-size: var(--text-xs);
          line-height: 1.3;
        }
      }

      /* Extra small screens */
      @media (max-width: 480px) {
        /* Cookie rules removed entirely in this build */

        .legal-link-btn {
          padding: 10px 12px;
          font-size: 13px;
        }

        .gdpr-text {
          font-size: var(--text-xs);
        }
      }

      /* Landscape mode optimization */
      @media (max-width: 768px) and (orientation: landscape) {
        /* Cookie rules removed entirely in this build */

        .legal-link-btn {
          padding: 8px 10px;
          font-size: 12px;
        }
      }

      /* Extra small screens (5 inches) */
      @media (max-width: 400px) {
        :root {
          --header-height: 55px;
          --nav-height: 45px;
        }

        .sidebar {
          width: 240px;
          padding: 8px;
        }

        .section-title {
          font-size: var(--text-xs);
        }

        .filter-btn {
          padding: 4px 6px;
          font-size: var(--text-xs);
        }

        .add-btn {
          padding: 6px;
          font-size: var(--text-xs);
        }

        .btn-small {
          padding: 4px 6px;
          font-size: var(--text-xs);
        }

        .nav-btn .default-icon {
          width: 16px;
          height: 16px;
        }

        .nav-btn span {
          font-size: var(--text-xs);
        }

        .nav-btn.primary div {
          width: 32px;
          height: 32px;
        }

        .nav-btn.primary svg {
          width: 18px;
          height: 18px;
        }

        .modal {
          width: 98%;
          max-width: 400px;
          padding: 12px;
        }

        .modal-title {
          font-size: 16px;
          margin-bottom: 12px;
        }

        .modal-section {
          margin-bottom: 12px;
        }

        .modal-section-title {
          font-size: 12px;
          margin-bottom: 6px;
        }

        .text-input {
          padding: 6px 8px;
          font-size: 12px;
        }

        .btn {
          padding: 6px 10px;
          font-size: var(--text-xs);
        }

        /* Upload progress mobile optimization */
        .upload-progress-container {
          padding: 8px;
          margin: 8px 0;
        }

        .upload-progress-header {
          margin-bottom: 6px;
        }

        .upload-status {
          font-size: var(--text-xs);
        }

        .upload-percentage {
          font-size: var(--text-xs);
        }

        .upload-progress-bar {
          height: 5px;
          margin-bottom: 6px;
        }

        .upload-file-info {
          font-size: var(--text-xs);
        }

        .login-form {
          padding: 12px;
        }

        .login-card {
          max-width: 350px;
        }

        .info-card-mini {
          padding: 8px;
          font-size: var(--text-xs);
        }

        .vemarcus-brand-box {
          margin-bottom: 16px;
          padding: 4px;
        }

      }
    }

    /* Tutorial Overlay Styles */
    .tutorial-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(15, 23, 42, 0.95);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 6000;
      padding: 16px;
    }

    .tutorial-overlay.show {
      display: flex;
    }

    .tutorial-content {
      width: 90%;
      max-width: 500px;
      background: rgba(2, 6, 23, .98);
      border: 1px solid var(--border-color);
      border-radius: 20px;
      padding: 30px;
      text-align: center;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    }

    .tutorial-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .tutorial-header h2 {
      margin: 0;
      color: white;
      font-size: 24px;
    }

    .tutorial-close {
      background: rgba(255, 255, 255, 0.2);
      border: none;
      color: white;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 18px;
    }

    .tutorial-steps {
      margin-bottom: 30px;
    }

    .tutorial-step h3 {
      color: var(--brand-color-1);
      margin-bottom: 15px;
      font-size: 20px;
    }

    .tutorial-step p {
      color: var(--text-medium);
      line-height: 1.6;
      font-size: 16px;
    }

    .tutorial-footer {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .tutorial-progress {
      color: var(--text-medium);
      font-size: 14px;
    }

    .tutorial-buttons {
      display: flex;
      gap: 10px;
      justify-content: center;
    }

    .tutorial-btn {
      background: linear-gradient(135deg, var(--brand-color-1), var(--brand-color-2));
      border: none;
      color: white;
      padding: 10px 20px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
    }

    .tutorial-skip {
      background: none;
      border: none;
      color: var(--text-medium);
      cursor: pointer;
      font-size: 12px;
      text-decoration: underline;
    }
    /* Legal Modal Styles */
    .legal-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.75);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 10002;
      padding: 20px;
    }

    .legal-modal.show {
      display: flex;
    }

    .legal-modal-content {
      background: linear-gradient(135deg, #0f172a, #1e293b);
      border: 1px solid rgba(16, 185, 129, 0.35);
      border-radius: 14px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
      width: 100%;
      max-width: 520px;
      max-height: 85vh;
      overflow: auto;
    }

    .legal-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(16, 185, 129, 0.2);
    }

    .legal-modal-title {
      color: #10b981;
      font-weight: 800;
      margin: 0;
      font-size: 18px;
    }

    .legal-modal-close {
      background: transparent;
      border: 1px solid rgba(148, 163, 184, 0.3);
      color: #cbd5e1;
      border-radius: 8px;
      cursor: pointer;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .legal-modal-body {
      padding: 14px 16px;
      color: #e2e8f0;
      font-size: 13px;
      line-height: 1.5;
    }

    .legal-modal-body h4 {
      color: #ffffff;
      font-size: 14px;
      margin: 14px 0 6px;
    }

    .legal-modal-body p {
      margin: 0 0 6px;
    }

    @media (max-width: 768px) {
      .legal-modal {
        align-items: flex-end;
      }

      .legal-modal-content {
        border-radius: 12px 12px 0 0;
        max-width: none;
        width: 100%;
      }
    }

    /* ========== VIEW TRANSITIONS ========== */
    @view-transition { navigation: auto; }

    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation-duration: 200ms;
    }

    /* ========== MICRO-ANIMATIONS ========== */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeOut {
      from { opacity: 1; transform: translateY(0); }
      to { opacity: 0; transform: translateY(8px); }
    }

    @keyframes slideUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes slideDown {
      from { opacity: 1; transform: translateY(0); }
      to { opacity: 0; transform: translateY(20px); }
    }

    @keyframes scaleIn {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }

    @keyframes shimmer {
      0% { background-position: -200px 0; }
      100% { background-position: calc(200px + 100%) 0; }
    }

    .animate-fadeIn { animation: fadeIn var(--transition-normal) forwards; }
    .animate-slideUp { animation: slideUp var(--transition-slow) forwards; }
    .animate-scaleIn { animation: scaleIn var(--transition-normal) forwards; }

    /* Smooth hover lift for interactive cards and buttons */
    .filter-btn,
    .nav-item,
    .layer-option {
      transition: transform var(--transition-fast), background var(--transition-fast);
    }
    .filter-btn:hover,
    .layer-option:hover {
      transform: translateY(-1px);
    }
    .filter-btn:active,
    .nav-item:active {
      transform: scale(0.97);
    }

    /* Smooth focus ring for accessibility */
    :focus-visible {
      outline: 2px solid var(--color-brand);
      outline-offset: 2px;
    }

    .skeleton {
      background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-elevated) 50%, var(--color-bg-tertiary) 75%);
      background-size: 200px 100%;
      animation: shimmer 1.5s infinite;
      border-radius: var(--radius-md);
    }

    /* Modern scrollbar */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    ::-webkit-scrollbar-track {
      background: transparent;
    }
    ::-webkit-scrollbar-thumb {
      background: rgba(148, 163, 184, 0.2);
      border-radius: var(--radius-full);
    }
    ::-webkit-scrollbar-thumb:hover {
      background: rgba(148, 163, 184, 0.35);
    }
    
    /* ==========================================================
       ✨ PEAKTALES 2026 NEXT-GEN MODERN UI UPGRADE ✨
       ========================================================== */

    /* Typography & Global Smoothing */
    body, button, input, select, textarea {
      font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Fixed Native Dialog Centering & Modern Overlay */
    body dialog {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      max-width: 100vw !important;
      max-height: 100vh !important;
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
      background: rgba(2, 6, 23, 0.78) !important;
      backdrop-filter: blur(20px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
      z-index: 99999 !important;
      align-items: center !important;
      justify-content: center !important;
      box-sizing: border-box !important;
    }
    body dialog:not([open]) {
      display: none !important;
    }
    body dialog[open] {
      display: flex !important;
    }
    body dialog::backdrop {
      background: transparent !important;
    }

    /* Modern Login Dialog */
    dialog#loginOverlay {
      position: fixed !important;
      inset: 0 !important;
      width: 100vw !important;
      height: 100dvh !important;
      max-width: 100vw !important;
      max-height: 100dvh !important;
      background: rgba(2, 6, 23, 0.85) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      border: none !important;
      margin: 0 !important;
      padding-top: max(env(safe-area-inset-top, 0px), 54px) !important;
      padding-bottom: max(env(safe-area-inset-bottom, 0px), 24px) !important;
      padding-left: 16px !important;
      padding-right: 16px !important;
      outline: none !important;
      box-shadow: none !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      box-sizing: border-box !important;
      display: none !important;
      z-index: 9999 !important;
    }
    dialog#loginOverlay[open] {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    dialog#loginOverlay:not([open]) {
      display: none !important;
    }
    dialog#loginOverlay::backdrop {
      background: rgba(2, 6, 23, 0.85) !important;
      backdrop-filter: blur(18px) !important;
      -webkit-backdrop-filter: blur(18px) !important;
    }
    body .login-card {
      width: 90% !important;
      max-width: 840px !important;
      min-height: 520px !important;
      max-height: calc(100dvh - max(env(safe-area-inset-top, 0px), 54px) - 36px) !important;
      border-radius: 28px !important;
      background: rgba(15, 23, 42, 0.96) !important;
      backdrop-filter: blur(32px) !important;
      -webkit-backdrop-filter: blur(32px) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.15) inset !important;
      display: flex !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      margin: auto !important;
      position: relative !important;
      box-sizing: border-box !important;
    }
    .login-close-btn {
      position: absolute !important;
      top: 14px !important;
      right: 14px !important;
      width: 38px !important;
      height: 38px !important;
      border-radius: 50% !important;
      background: rgba(255, 255, 255, 0.12) !important;
      border: 1px solid rgba(255, 255, 255, 0.18) !important;
      color: #f1f5f9 !important;
      font-size: 18px !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      z-index: 25 !important;
      transition: all 0.2s ease !important;
    }
    .login-close-btn:hover {
      background: rgba(255, 255, 255, 0.22) !important;
      color: #ffffff !important;
      transform: scale(1.06) !important;
    }
    @media (max-width: 767px) {
      body .login-card {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 420px !important;
        min-height: unset !important;
        max-height: calc(100dvh - max(env(safe-area-inset-top, 0px), 54px) - 36px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 !important;
        border-radius: 24px !important;
        margin: auto !important;
      }
      body .login-image {
        display: none !important;
      }
      body .login-form {
        width: 100% !important;
        padding: 26px 20px 24px 20px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
      }
    }
    /* Risoluzione sfondo giallo autofill Safari/iOS */
    input.login-input:-webkit-autofill,
    input.login-input:-webkit-autofill:hover, 
    input.login-input:-webkit-autofill:focus,
    input.login-input:-webkit-autofill:active {
      -webkit-text-fill-color: #f8fafc !important;
      -webkit-box-shadow: 0 0 0 1000px #1e293b inset !important;
      box-shadow: 0 0 0 1000px #1e293b inset !important;
      transition: background-color 5000s ease-in-out 0s;
      caret-color: #14b8a6 !important;
    }
    @media (min-width: 768px) {
      body .login-image {
        width: 42% !important;
        min-height: 100% !important;
        background-image: url('https://res.cloudinary.com/dkbtf1msg/image/upload/f_auto,q_auto,c_fill,w_1200,h_900/v1758289301/_06d5eb64-06202025_izdlim.jpg') !important;
        background-size: cover !important;
        background-position: center !important;
        position: relative !important;
      }
      body .login-image::after {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(to right, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
      }
      body .login-form {
        width: 58% !important;
        padding: 36px 40px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        box-sizing: border-box !important;
      }
    }
    body .login-title {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
      margin-bottom: 6px !important;
    }
    body .login-title h2 {
      font-size: 22px !important;
      font-weight: 800 !important;
      letter-spacing: -0.5px !important;
      color: #f8fafc !important;
      margin: 0 !important;
    }
    body .login-subtitle {
      color: #94a3b8 !important;
      font-size: 14px !important;
      margin-bottom: 20px !important;
    }
    body .login-input {
      width: 100% !important;
      box-sizing: border-box !important;
      background: rgba(30, 41, 59, 0.75) !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      border-radius: 14px !important;
      padding: 14px 18px !important;
      font-size: 15px !important;
      color: #f8fafc !important;
      margin-bottom: 12px !important;
      transition: all 0.25s ease !important;
    }
    body .login-input:focus {
      outline: none !important;
      border-color: #14b8a6 !important;
      box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.25) !important;
      background: rgba(30, 41, 59, 0.9) !important;
    }
    body .login-actions {
      display: flex !important;
      gap: 12px !important;
      width: 100% !important;
      box-sizing: border-box !important;
      margin-top: 4px !important;
      margin-bottom: 14px !important;
    }
    body .login-btn {
      flex: 1 1 0% !important;
      min-width: 0 !important;
      height: 48px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      border-radius: 14px !important;
      font-size: 15px !important;
      box-sizing: border-box !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
    }
    body .login-btn.primary {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
      font-weight: 700 !important;
      box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3) !important;
      border: none !important;
      color: #fff !important;
    }
    body .login-btn:not(.primary) {
      background: rgba(30, 41, 59, 0.75) !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      font-weight: 600 !important;
      color: #cbd5e1 !important;
    }
    body .social-divider {
      width: 100% !important;
      text-align: center !important;
      margin: 10px 0 !important;
      font-size: 13px !important;
      color: #64748b !important;
    }
    body .social-btn {
      width: 100% !important;
      height: 48px !important;
      border-radius: 14px !important;
      background: rgba(30, 41, 59, 0.65) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      padding: 12px 16px !important;
      font-weight: 600 !important;
      font-size: 14px !important;
      color: #e2e8f0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 12px !important;
      margin-bottom: 10px !important;
      box-sizing: border-box !important;
      cursor: pointer !important;
      transition: all 0.25s ease !important;
    }
    body .social-btn:hover {
      background: rgba(51, 65, 85, 0.8) !important;
      transform: translateY(-1px) !important;
    }
    body .tutorial-divider {
      width: 100% !important;
      text-align: center !important;
      margin: 8px 0 !important;
      font-size: 13px !important;
      color: #64748b !important;
    }
    body .tutorial-btn {
      width: 100% !important;
      height: 44px !important;
      border-radius: 14px !important;
      box-sizing: border-box !important;
      cursor: pointer !important;
    }
    }

    /* Modern Share Modal */
    dialog#shareModalOverlay {
      background: transparent !important;
      border: none !important;
      padding: 0 !important;
      margin: auto !important;
      outline: none !important;
      box-shadow: none !important;
      overflow: visible !important;
    }
    dialog#shareModalOverlay::backdrop {
      background: rgba(2, 6, 23, 0.8) !important;
      backdrop-filter: blur(14px) !important;
      -webkit-backdrop-filter: blur(14px) !important;
    }
    body .share-modal-card {
      background: rgba(15, 23, 42, 0.97) !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      border-radius: 24px !important;
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65) !important;
      backdrop-filter: blur(28px) !important;
      -webkit-backdrop-filter: blur(28px) !important;
      color: #f8fafc !important;
      max-width: 520px !important;
      width: 92vw !important;
      overflow: hidden !important;
      margin: auto !important;
    }
    body .share-modal-header {
      background: rgba(30, 41, 59, 0.5) !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
      padding: 16px 20px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
    }
    body .share-modal-title {
      font-size: 17px !important;
      font-weight: 700 !important;
      color: #f8fafc !important;
      letter-spacing: -0.01em !important;
    }
    body .share-modal-close {
      position: static !important;
      width: 32px !important;
      height: 32px !important;
      border-radius: 50% !important;
      background: rgba(255, 255, 255, 0.08) !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      color: #94a3b8 !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      transition: all 0.2s ease !important;
    }
    body .share-modal-close:hover {
      background: rgba(255, 255, 255, 0.18) !important;
      color: #ffffff !important;
    }
    body .share-modal-content {
      padding: 22px !important;
    }
    body .share-link-input-group {
      display: flex !important;
      gap: 8px !important;
      margin-top: 8px !important;
    }
    body .share-link-input {
      background: rgba(30, 41, 59, 0.7) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      border-radius: 12px !important;
      padding: 10px 14px !important;
      color: #e2e8f0 !important;
      font-size: 13px !important;
      flex: 1 !important;
    }
    body .share-actions {
      display: flex !important;
      gap: 10px !important;
      margin-top: 16px !important;
    }
    body .share-actions button {
      flex: 1 !important;
      height: 38px !important;
      border-radius: 10px !important;
      font-size: 12.5px !important;
      font-weight: 600 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 6px !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
    }

    /* Seamless Unified Header & Sidebar Frame */
    body .header {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      height: 64px !important;
      border-radius: 0 !important;
      border: none !important;
      background: rgba(15, 23, 42, 0.92) !important;
      backdrop-filter: blur(28px) saturate(190%) !important;
      -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
      box-shadow: none !important;
      z-index: 1001 !important;
      padding: 0 22px !important;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    /* Bottom border of header extends only over the map area, eliminating any seam with the sidebar */
    @media (min-width: 769px) {
      body .header::after {
        content: '' !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 360px !important;
        height: 1px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        pointer-events: none !important;
      }
    }
    @media (max-width: 768px) {
      body::before {
        display: none !important;
        content: none !important;
      }
      body .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: auto !important;
        min-height: calc(56px + max(env(safe-area-inset-top, 0px), 48px)) !important;
        padding-top: max(env(safe-area-inset-top, 0px), 48px) !important;
        padding-bottom: 8px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        z-index: 1003 !important;
      }
      body .header .header-left,
      body .header .header-right {
        display: flex !important;
        align-items: center !important;
        height: 44px !important;
      }
      .main-container {
        position: fixed !important;
        top: calc(56px + max(env(safe-area-inset-top, 0px), 48px)) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: calc(100dvh - (56px + max(env(safe-area-inset-top, 0px), 48px))) !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
      }
      .map-container {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        padding: 0 !important;
        margin: 0 !important;
      }
      body #map {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
      }
      /* Pulsanti zoom nascosti su mobile (si usa il touch/pinch) */
      body .leaflet-control-zoom,
      .leaflet-control-zoom,
      .leaflet-bar.leaflet-control-zoom {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
      }
    }
    body .header .logo {
      width: 36px !important;
      height: 36px !important;
      border-radius: 12px !important;
      box-shadow: 0 0 20px rgba(20, 184, 166, 0.4) !important;
      transition: transform 0.3s ease !important;
    }
    body .header .logo:hover {
      transform: scale(1.08) rotate(-4deg) !important;
    }
    body .header .title {
      font-family: 'Plus Jakarta Sans', sans-serif !important;
      font-size: 20px !important;
      font-weight: 800 !important;
      letter-spacing: -0.4px !important;
      background: linear-gradient(135deg, #38bdf8 0%, #34d399 100%) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
    }
    body .weather-section {
      background: rgba(30, 41, 59, 0.55) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      border-radius: 9999px !important;
      padding: 6px 14px !important;
      cursor: pointer !important;
      transition: all 0.25s ease !important;
    }
    body .weather-section:hover {
      background: rgba(51, 65, 85, 0.7) !important;
      border-color: rgba(56, 189, 248, 0.3) !important;
      transform: translateY(-1px) !important;
    }
    body .profile-button {
      width: 42px !important;
      height: 42px !important;
      border-radius: 50% !important;
      border: 2px solid rgba(56, 189, 248, 0.4) !important;
      background: rgba(30, 41, 59, 0.7) !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
      transition: all 0.25s ease !important;
    }
    body .profile-button:hover {
      border-color: #38bdf8 !important;
      box-shadow: 0 0 16px rgba(56, 189, 248, 0.4) !important;
      transform: scale(1.05) !important;
    }

    /* Seamless Right-Docked Sidebar (Unified Surface with Header) */
    @media (min-width:700px) and (min-height:501px), (min-width:1025px) {
      body .sidebar {
        box-sizing: border-box;
        position: fixed !important;
        top: 64px !important;
        right: 0 !important;
        bottom: 0 !important;
        width: var(--sidebar-current-width, 340px) !important;
        max-height: calc(100vh - 64px) !important;
        border-radius: 0 !important;
        border: none !important;
        border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: rgba(15, 23, 42, 0.92) !important;
        backdrop-filter: blur(28px) saturate(190%) !important;
        -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
        box-shadow: -8px 0 25px rgba(0, 0, 0, 0.3) !important;
        padding: 16px 18px 20px 18px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 1000 !important;
        transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease !important;
      }
      body .main-container {
        padding-top: 0 !important;
        height: 100vh !important;
        width: 100vw !important;
      }
      body #map {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
      }

      /* === SIDEBAR COLLAPSED / SUPER MINIMAL MODE (DESKTOP ONLY) === */
      body .sidebar.collapsed {
        width: 68px !important;
        padding: 14px 10px 18px 10px !important;
        box-shadow: -4px 0 18px rgba(0, 0, 0, 0.45) !important;
        cursor: pointer;
      }

      /* Text and labels fade out smoothly when collapsed */
      body .sidebar.collapsed .sidebar-section .section-title span,
      body .sidebar.collapsed .add-btn span,
      body .sidebar.collapsed #inspireBtn span,
      body .sidebar.collapsed .filter-btn > span > span,
      body .sidebar.collapsed .total-markers-label,
      body .sidebar.collapsed button[onclick*="openSettingsModal"] span {
        display: none !important;
      }

      /* Action buttons (Add, Inspire) become sleek centered square icon buttons */
      body .sidebar.collapsed .add-btn {
        width: 46px !important;
        height: 46px !important;
        padding: 0 !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 14px !important;
        box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
      }
      body .sidebar.collapsed .add-btn svg {
        margin: 0 !important;
        width: 20px !important;
        height: 20px !important;
      }

      body .sidebar.collapsed #inspireBtn {
        width: 46px !important;
        height: 46px !important;
        padding: 0 !important;
        margin: 8px auto 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 14px !important;
      }
      body .sidebar.collapsed #inspireBtn svg {
        margin: 0 !important;
        width: 20px !important;
        height: 20px !important;
      }

      /* Search Container becomes a compact icon button */
      body .sidebar.collapsed #search-container {
        margin-bottom: 12px !important;
      }
      body .sidebar.collapsed .leaflet-control-geocoder {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 14px !important;
        background: rgba(30, 41, 59, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        cursor: pointer !important;
      }
      body .sidebar.collapsed .leaflet-control-geocoder-form {
        display: none !important;
      }
      body .sidebar.collapsed .leaflet-control-geocoder-icon {
        display: block !important;
        margin: 0 auto !important;
        position: static !important;
        width: 20px !important;
        height: 20px !important;
        background-size: 20px 20px !important;
        filter: brightness(1.2) !important;
      }

      /* Section title icon centered */
      body .sidebar.collapsed .section-title {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 4px 0 !important;
        margin-bottom: 6px !important;
      }
      body .sidebar.collapsed .section-title svg {
        margin: 0 !important;
        width: 20px !important;
        height: 20px !important;
      }

      /* Filter buttons centered icon buttons with floating count badge */
      body .sidebar.collapsed .filter-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: center !important;
      }
      body .sidebar.collapsed .filter-btn {
        width: 46px !important;
        height: 46px !important;
        padding: 0 !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 14px !important;
        position: relative !important;
      }
      body .sidebar.collapsed .filter-btn > span {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        gap: 0 !important;
      }
      body .sidebar.collapsed .filter-btn > span > svg {
        margin: 0 !important;
        width: 20px !important;
        height: 20px !important;
      }
      body .sidebar.collapsed .filter-btn .btn-count {
        position: absolute !important;
        top: -3px !important;
        right: -3px !important;
        font-size: 9.5px !important;
        font-weight: 800 !important;
        padding: 1px 4px !important;
        min-width: 15px !important;
        height: 15px !important;
        line-height: 13px !important;
        text-align: center !important;
        border-radius: 9999px !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6) !important;
      }

      /* Total markers mini pill */
      body .sidebar.collapsed #totalMarkersCard {
        display: flex !important;
        width: 46px !important;
        height: 30px !important;
        margin: 6px auto !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        color: #38bdf8 !important;
        background: rgba(56, 189, 248, 0.12) !important;
        border: 1px solid rgba(56, 189, 248, 0.3) !important;
        overflow: hidden !important;
        white-space: nowrap !important;
      }

      /* Settings button */
      body .sidebar.collapsed button[onclick*="openSettingsModal"] {
        width: 46px !important;
        height: 46px !important;
        padding: 0 !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 14px !important;
      }
      body .sidebar.collapsed button[onclick*="openSettingsModal"] svg {
        margin: 0 !important;
        width: 20px !important;
        height: 20px !important;
      }
      body .sidebar.collapsed > div:last-child {
        margin-top: 8px !important;
        padding-top: 8px !important;
      }


    }

    /* Filter Buttons - Segmented Cards */
    body .filter-buttons {
      display: flex !important;
      flex-direction: column !important;
      gap: 10px !important;
    }
    body .filter-btn {
      background: rgba(30, 41, 59, 0.5) !important;
      border: 1px solid rgba(255, 255, 255, 0.06) !important;
      border-radius: 14px !important;
      padding: 12px 16px !important;
      color: #e2e8f0 !important;
      font-weight: 600 !important;
      font-size: 13.5px !important;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    body .filter-btn:hover {
      background: rgba(51, 65, 85, 0.65) !important;
      border-color: rgba(255, 255, 255, 0.15) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
    }
    body .filter-btn.active {
      background: linear-gradient(135deg, rgba(20, 184, 166, 0.3) 0%, rgba(8, 145, 178, 0.3) 100%) !important;
      border-color: #14b8a6 !important;
      color: #fff !important;
      box-shadow: 0 0 20px rgba(20, 184, 166, 0.3) !important;
    }
    body .btn-count {
      background: rgba(16, 185, 129, 0.15) !important;
      border: 1px solid rgba(16, 185, 129, 0.35) !important;
      color: #34d399 !important;
      border-radius: 9999px !important;
      padding: 2px 9px !important;
      font-size: 12px !important;
      font-weight: 700 !important;
    }

    /* "Aggiungi nuovo luogo" Hero Button */
    body .add-btn {
      width: 100% !important;
      background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
      border: none !important;
      border-radius: 16px !important;
      padding: 15px 20px !important;
      font-size: 15px !important;
      font-weight: 700 !important;
      letter-spacing: 0.2px !important;
      color: #ffffff !important;
      box-shadow: 0 10px 25px rgba(16, 185, 129, 0.35), 0 1px 0 rgba(255, 255, 255, 0.25) inset !important;
      cursor: pointer !important;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    body .add-btn:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 14px 32px rgba(16, 185, 129, 0.48), 0 1px 0 rgba(255, 255, 255, 0.3) inset !important;
    }

    /* "Lasciati ispirare" Modern Pill */
    body .inspire-btn, body button[onclick*="inspire"], body button[onclick*="Inspire"] {
      border-radius: 14px !important;
      background: rgba(245, 158, 11, 0.12) !important;
      border: 1px solid rgba(245, 158, 11, 0.3) !important;
      color: #fcd34d !important;
      padding: 12px 18px !important;
      font-weight: 600 !important;
      transition: all 0.25s ease !important;
    }
    body .inspire-btn:hover, body button[onclick*="inspire"]:hover, body button[onclick*="Inspire"]:hover {
      background: rgba(245, 158, 11, 0.22) !important;
      transform: translateY(-1px) !important;
      box-shadow: 0 6px 18px rgba(245, 158, 11, 0.25) !important;
    }

    /* Leaflet Controls Modern Glass Redesign */
    .leaflet-top.leaflet-left {
      top: 80px !important;
      left: 20px !important;
    }
    /* Leaflet Zoom Control Modern Glass */
    .leaflet-control-zoom.leaflet-bar {
      border: none !important;
      border-radius: 16px !important;
      overflow: hidden !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    }
    .leaflet-control-zoom.leaflet-bar a {
      background: rgba(15, 23, 42, 0.85) !important;
      backdrop-filter: blur(16px) !important;
      -webkit-backdrop-filter: blur(16px) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      color: #f1f5f9 !important;
      width: 40px !important;
      height: 40px !important;
      line-height: 38px !important;
      font-size: 18px !important;
      transition: all 0.2s ease !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    .leaflet-control-zoom.leaflet-bar a:hover {
      background: rgba(30, 41, 59, 0.95) !important;
      color: #38bdf8 !important;
    }

    /* Modern Search Control & Autocomplete Results */
    .leaflet-control-geocoder {
      width: 100% !important;
      background: rgba(15, 23, 42, 0.75) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      border-radius: 16px !important;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
      overflow: visible !important;
      position: relative !important;
    }
    .leaflet-control-geocoder-form {
      width: 100% !important;
      display: block !important;
    }
    .leaflet-control-geocoder-form input {
      width: 100% !important;
      height: 46px !important;
      background: transparent !important;
      border: none !important;
      color: #f8fafc !important;
      font-family: 'Plus Jakarta Sans', sans-serif !important;
      font-size: 14px !important;
      padding: 0 16px 0 42px !important;
      border-radius: 16px !important;
      box-sizing: border-box !important;
    }
    .leaflet-control-geocoder-form input:-webkit-autofill,
    .leaflet-control-geocoder-form input:-webkit-autofill:hover,
    .leaflet-control-geocoder-form input:-webkit-autofill:focus {
      -webkit-box-shadow: 0 0 0px 1000px #1e293b inset !important;
      -webkit-text-fill-color: #f8fafc !important;
      transition: background-color 5000s ease-in-out 0s;
    }
    .leaflet-control-geocoder-form input:focus {
      outline: none !important;
    }
    .leaflet-control-geocoder-form input::placeholder {
      color: #94a3b8 !important;
    }
    .leaflet-control-geocoder-icon {
      position: absolute !important;
      top: 11px !important;
      left: 12px !important;
      width: 24px !important;
      height: 24px !important;
      background-color: transparent !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2338bdf8' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath stroke-linecap='round' d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") !important;
      background-size: 20px 20px !important;
      background-position: center !important;
      border: none !important;
      cursor: pointer !important;
    }

    /* Autocomplete Dropdown Menu (Floating overlay, hidden when empty) */
    .leaflet-control-geocoder-alternatives {
      position: absolute !important;
      top: calc(100% + 8px) !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      background: rgba(15, 23, 42, 0.96) !important;
      backdrop-filter: blur(28px) !important;
      -webkit-backdrop-filter: blur(28px) !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      border-radius: 16px !important;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
      margin: 0 !important;
      padding: 6px !important;
      list-style: none !important;
      display: block !important;
      overflow: hidden !important;
      box-sizing: border-box !important;
      z-index: 1050 !important;
    }
    .leaflet-control-geocoder-alternatives-minimized,
    .leaflet-control-geocoder-alternatives:empty {
      display: none !important;
      border: none !important;
      padding: 0 !important;
      margin: 0 !important;
      height: 0 !important;
      min-height: 0 !important;
      box-shadow: none !important;
    }
    .leaflet-control-geocoder-alternatives li {
      display: block !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
      padding: 0 !important;
      margin: 0 !important;
      border-radius: 10px !important;
      overflow: hidden !important;
    }
    .leaflet-control-geocoder-alternatives li:last-child {
      border-bottom: none !important;
    }
    .leaflet-control-geocoder-alternatives a,
    .leaflet-control-geocoder-alternatives li a {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      height: auto !important;
      line-height: 1.4 !important;
      padding: 12px 14px !important;
      background: transparent !important;
      color: #f1f5f9 !important;
      font-family: 'Plus Jakarta Sans', sans-serif !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      text-decoration: none !important;
      text-align: left !important;
      border-radius: 10px !important;
      transition: all 0.2s ease !important;
      border: none !important;
      box-shadow: none !important;
      box-sizing: border-box !important;
    }
    .leaflet-control-geocoder-alternatives a:hover,
    .leaflet-control-geocoder-alternatives li:hover a,
    .leaflet-control-geocoder-alternatives .leaflet-control-geocoder-selected {
      background: rgba(30, 41, 59, 0.8) !important;
      color: #38bdf8 !important;
      transform: translateX(3px) !important;
    }
    .leaflet-control-geocoder-address-context {
      display: block !important;
      color: #38bdf8 !important;
      font-size: 12px !important;
      font-weight: 500 !important;
      margin-top: 3px !important;
      opacity: 0.9 !important;
    }

    /* Leaflet Popups Modern Glass */
    .leaflet-popup-content-wrapper {
      background: rgba(15, 23, 42, 0.94) !important;
      backdrop-filter: blur(28px) !important;
      -webkit-backdrop-filter: blur(28px) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      border-radius: 22px !important;
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55) !important;
      color: #f8fafc !important;
      padding: 4px !important;
    }
    .leaflet-popup-tip {
      background: rgba(15, 23, 42, 0.94) !important;
    }

    /* Modern Place Edit/Add Modal Styling */
    #editModal .option-group {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 6px !important;
    }
    #editModal .option-btn {
      height: 36px !important;
      border-radius: 10px !important;
      background: rgba(30, 41, 59, 0.45) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      color: #94a3b8 !important;
      font-size: 12.5px !important;
      font-weight: 600 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 6px !important;
      cursor: pointer !important;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
      padding: 0 8px !important;
    }
    #editModal .option-btn:hover {
      background: rgba(51, 65, 85, 0.6) !important;
      border-color: rgba(255, 255, 255, 0.16) !important;
      color: #f1f5f9 !important;
      transform: translateY(-1px) !important;
    }
    #editModal .option-btn.selected {
      background: linear-gradient(135deg, rgba(20, 184, 166, 0.25) 0%, rgba(8, 145, 178, 0.25) 100%) !important;
      border: 1.5px solid #14b8a6 !important;
      color: #ffffff !important;
      box-shadow: 0 0 12px rgba(20, 184, 166, 0.25) !important;
    }
    #editModal .text-input {
      width: 100% !important;
      background: rgba(30, 41, 59, 0.55) !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      border-radius: 10px !important;
      color: #f8fafc !important;
      font-family: 'Plus Jakarta Sans', sans-serif !important;
      font-size: 13px !important;
      padding: 8px 12px !important;
      box-sizing: border-box !important;
      transition: all 0.2s ease !important;
    }
    #editModal .text-input:focus {
      border-color: #38bdf8 !important;
      box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important;
      outline: none !important;
      background: rgba(30, 41, 59, 0.85) !important;
    }
    #editModal .text-input::placeholder {
      color: #64748b !important;
    }
    #editModal textarea.text-input {
      line-height: 1.45 !important;
    }

    /* Compact Collapsible Accordions for Edit Modal */
    details.modal-accordion {
      background: rgba(30, 41, 59, 0.35) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      border-radius: 10px !important;
      overflow: hidden !important;
      transition: all 0.2s ease !important;
    }
    details.modal-accordion[open] {
      background: rgba(30, 41, 59, 0.55) !important;
      border-color: rgba(255, 255, 255, 0.14) !important;
    }
    summary.accordion-header {
      padding: 8px 12px !important;
      font-size: 12.5px !important;
      font-weight: 600 !important;
      color: #cbd5e1 !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      user-select: none !important;
      list-style: none !important;
    }
    summary.accordion-header::-webkit-details-marker {
      display: none !important;
    }
    summary.accordion-header:hover {
      color: #38bdf8 !important;
    }
    summary.accordion-header .chevron-icon {
      transition: transform 0.25s ease !important;
    }
    details.modal-accordion[open] summary.accordion-header .chevron-icon {
      transform: rotate(180deg) !important;
    }
    .accordion-body {
      padding: 10px 12px 12px 12px !important;
      border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    /* Mobile Nav Floating Island */
    @media (max-width: 768px) {
      body .mobile-nav {
        position: fixed !important;
        bottom: 20px !important;
        left: 20px !important;
        right: 20px !important;
        height: 64px !important;
        border-radius: 32px !important;
        background: rgba(15, 23, 42, 0.88) !important;
        backdrop-filter: blur(24px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
        z-index: 1003 !important;
      }
    }
    /* Inspiration Drawer & Markers */
    .inspiration-pin {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 16px var(--pin-glow, rgba(16, 185, 129, 0.4));
      border: 2px solid #ffffff;
      cursor: pointer;
      transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .inspiration-pin:hover {
      transform: scale(1.18);
      z-index: 1000 !important;
    }
    .inspiration-pin-icon {
      font-size: 17px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .inspiration-pin-img {
      width: 23px;
      height: 23px;
      object-fit: contain;
      pointer-events: none;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
    }

    #inspirationDrawer {
      position: fixed;
      bottom: 24px;
      left: calc(50% - 160px);
      transform: translateX(-50%);
      width: min(92%, 840px);
      max-height: 390px;
      background: rgba(15, 23, 42, 0.95);
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 20px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
      z-index: 1002;
      padding: 14px 16px;
      display: none;
      flex-direction: column;
      gap: 10px;
      box-sizing: border-box;
      animation: slideUpInspire 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @media (max-width: 1024px) {
      #inspirationDrawer {
        left: 50%;
      }
    }
    @media (max-width: 768px) {
      #inspirationDrawer {
        bottom: 96px;
        left: 50%;
        width: 95%;
        max-height: 360px;
      }
    }
    @keyframes slideUpInspire {
      from { opacity: 0; transform: translate(-50%, 20px); }
      to { opacity: 1; transform: translate(-50%, 0); }
    }

    .insp-track-container {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
    }

    .insp-nav-btn {
      position: absolute;
      top: calc(50% - 6px);
      transform: translateY(-50%);
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: rgba(15, 23, 42, 0.92);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #f8fafc;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 10;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .insp-nav-btn:hover {
      background: rgba(30, 41, 59, 0.98);
      border-color: rgba(20, 184, 166, 0.7);
      color: #2dd4bf;
      transform: translateY(-50%) scale(1.1);
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.8);
    }
    .insp-nav-btn:active {
      transform: translateY(-50%) scale(0.95);
    }
    .insp-nav-btn.prev {
      left: -8px;
    }
    .insp-nav-btn.next {
      right: -8px;
    }

    .inspiration-track {
      display: flex;
      gap: 14px;
      overflow-x: auto;
      scroll-behavior: smooth;
      padding: 6px 14px 12px 14px;
      width: 100%;
      box-sizing: border-box;
      scrollbar-width: thin;
      scrollbar-color: rgba(20, 184, 166, 0.45) rgba(255, 255, 255, 0.05);
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
      -webkit-overflow-scrolling: touch;
    }
    .inspiration-track.dragging {
      cursor: grabbing;
      scroll-behavior: auto;
    }
    .inspiration-track::-webkit-scrollbar {
      height: 7px;
    }
    .inspiration-track::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 4px;
    }
    .inspiration-track::-webkit-scrollbar-thumb {
      background: linear-gradient(90deg, rgba(20, 184, 166, 0.5), rgba(56, 189, 248, 0.5));
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .inspiration-track::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(90deg, rgba(20, 184, 166, 0.85), rgba(56, 189, 248, 0.85));
    }

    .insp-card {
      flex: 0 0 270px;
      width: 270px;
      background: rgba(30, 41, 59, 0.65);
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 14px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
      cursor: pointer;
    }
    .insp-card:hover {
      border-color: rgba(20, 184, 166, 0.4);
      background: rgba(30, 41, 59, 0.9);
      transform: translateY(-3px);
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
    }
    .insp-card-img-wrap {
      position: relative;
      width: 100%;
      height: 110px;
      background: #0f172a;
      overflow: hidden;
    }
    .insp-card-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.35s ease;
    }
    .insp-card:hover .insp-card-img {
      transform: scale(1.06);
    }

    /* Mountain vector art fallback */
    .insp-art-placeholder {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      overflow: hidden;
    }
    .insp-art-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    .insp-art-center-badge {
      position: relative;
      z-index: 2;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(15, 23, 42, 0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    }

    .insp-card-body {
      padding: 10px 12px 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1;
    }
    .insp-card-title {
      font-size: 13.5px;
      font-weight: 700;
      color: #f8fafc;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.3;
    }
    .insp-card-desc {
      font-size: 11.5px;
      color: #94a3b8;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin: 0;
      min-height: 32px;
    }
    .insp-card-actions {
      display: flex;
      gap: 5px;
      margin-top: auto;
      padding-top: 8px;
      border-top: 1px solid rgba(255, 255, 255, 0.07);
    }
    .insp-action-btn {
      flex: 1;
      padding: 5px 4px;
      font-size: 10.5px;
      font-weight: 600;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(255, 255, 255, 0.05);
      color: #cbd5e1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      transition: all 0.2s ease;
      text-decoration: none;
      white-space: nowrap;
    }
    .insp-action-btn:hover {
      background: rgba(255, 255, 255, 0.15);
      color: #ffffff;
    }
    .insp-action-btn.primary {
      background: rgba(16, 185, 129, 0.22);
      border-color: rgba(16, 185, 129, 0.45);
      color: #6ee7b7;
    }
    .insp-action-btn.primary:hover {
      background: rgba(16, 185, 129, 0.38);
      color: #ffffff;
    }
    .insp-action-btn.wikiloc {
      background: rgba(34, 197, 94, 0.16);
      border-color: rgba(34, 197, 94, 0.4);
      color: #4ade80;
    }
    .insp-action-btn.wikiloc:hover {
      background: rgba(34, 197, 94, 0.3);
      color: #86efac;
    }
    .insp-filter-chip {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: #94a3b8;
      border-radius: 9999px;
      padding: 3px 9px;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.2s ease;
    }
    .insp-filter-chip:hover {
      background: rgba(255, 255, 255, 0.12);
      color: #f1f5f9;
    }
    .insp-filter-chip.active {
      background: rgba(20, 184, 166, 0.25);
      border-color: #14b8a6;
      color: #2dd4bf;
    }

    /* Custom Modern Leaflet Popup - Spacious & Clean */
    .custom-modern-insp-popup .leaflet-popup-content-wrapper {
      padding: 0 !important;
      overflow: hidden !important;
      border-radius: 20px !important;
      background: rgba(15, 23, 42, 0.96) !important;
      backdrop-filter: blur(28px) !important;
      -webkit-backdrop-filter: blur(28px) !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65) !important;
    }
    .custom-modern-insp-popup .leaflet-popup-content {
      margin: 0 !important;
      width: 100% !important;
      line-height: 1.4 !important;
    }
    .insp-popup-card {
      width: 325px;
      max-width: 88vw;
      box-sizing: border-box;
      color: #f8fafc;
      font-family: 'Plus Jakarta Sans', sans-serif;
    }
    .insp-popup-img-wrap {
      position: relative;
      width: 100%;
      height: 145px;
      overflow: hidden;
      background: #0b1220;
    }
    .insp-popup-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .insp-popup-img-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(15, 23, 42, 0.88) 100%);
      pointer-events: none;
    }
    .insp-popup-body {
      padding: 16px 18px 18px 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .insp-popup-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }
    .insp-category-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 9px;
      border-radius: 8px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      border: 1px solid;
    }
    .insp-category-icon-img {
      width: 18px;
      height: 18px;
      object-fit: contain;
      vertical-align: middle;
    }
    .insp-stat-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 8px;
      border-radius: 8px;
      font-size: 11.5px;
      font-weight: 600;
      background: rgba(255, 255, 255, 0.06);
      color: #cbd5e1;
      border: 1px solid rgba(255, 255, 255, 0.09);
    }
    .insp-stat-pill.elev {
      background: rgba(56, 189, 248, 0.14);
      color: #38bdf8;
      border-color: rgba(56, 189, 248, 0.3);
      font-weight: 700;
    }
    .insp-popup-title {
      margin: 0;
      font-size: 16.5px;
      font-weight: 750;
      color: #ffffff;
      line-height: 1.35;
      letter-spacing: -0.01em;
    }
    .insp-info-card {
      background: rgba(30, 41, 59, 0.55);
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 7px;
      font-size: 12px;
    }
    .insp-info-row {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #cbd5e1;
    }
    .insp-info-icon {
      width: 16px;
      height: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .insp-popup-desc {
      margin: 0;
      font-size: 12.5px;
      color: #94a3b8;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .insp-popup-btn-primary {
      width: 100%;
      height: 40px;
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      color: #ffffff;
      border: none;
      border-radius: 11px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
      transition: all 0.2s ease;
    }
    .insp-popup-btn-primary:hover {
      background: linear-gradient(135deg, #059669 0%, #047857 100%);
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45);
    }
    .insp-popup-btn-wikiloc {
      flex: 1;
      height: 36px;
      background: rgba(34, 197, 94, 0.16);
      border: 1px solid rgba(34, 197, 94, 0.38);
      color: #4ade80;
      border-radius: 9px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      text-decoration: none;
      transition: all 0.2s ease;
    }
    .insp-popup-btn-wikiloc:hover {
      background: rgba(34, 197, 94, 0.28);
      color: #86efac;
    }
    .insp-popup-btn-secondary {
      flex: 1;
      height: 36px;
      background: rgba(30, 41, 59, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.12);
      color: #cbd5e1;
      border-radius: 9px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      text-decoration: none;
      transition: all 0.2s ease;
    }
    .insp-popup-btn-secondary:hover {
      background: rgba(51, 65, 85, 0.85);
      color: #ffffff;
      border-color: rgba(255, 255, 255, 0.22);
    }

    /* Scheda Luogo Unificata - Stile Modern Glass con Mappa Integrata */
    .custom-modern-saved-popup .leaflet-popup-content-wrapper {
      padding: 0 !important;
      overflow: hidden !important;
      border-radius: 20px !important;
      background: rgba(15, 23, 42, 0.88) !important;
      backdrop-filter: blur(20px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
      border: 1px solid rgba(255, 255, 255, 0.15) !important;
      box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    }
    .custom-modern-saved-popup .leaflet-popup-tip {
      background: rgba(15, 23, 42, 0.88) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }
    /* Desktop (> 768px): Scheda responsive che si adatta allo spazio utile senza mai uscire o finire sotto la sidebar */
    :root {
      --sidebar-current-width: 340px;
    }

    .custom-modern-saved-popup .leaflet-popup-content {
      margin: 0 !important;
      width: min(820px, calc(100vw - var(--sidebar-current-width, 340px) - 36px)) !important;
      max-width: min(820px, calc(100vw - var(--sidebar-current-width, 340px) - 36px)) !important;
      max-height: calc(100vh - 80px) !important;
      overflow-y: auto !important;
      overscroll-behavior: contain !important;
      container-type: inline-size;
      container-name: popupcard;
    }
    .custom-modern-saved-popup .saved-popup-card.no-gpx {
      max-width: min(600px, calc(100vw - var(--sidebar-current-width, 340px) - 36px)) !important;
      width: 100% !important;
    }
    @media (min-width: 769px) {
      .custom-modern-saved-popup.no-gpx-popup .leaflet-popup-content,
      .custom-modern-saved-popup:has(.saved-popup-card.no-gpx) .leaflet-popup-content {
        width: min(600px, calc(100vw - var(--sidebar-current-width, 340px) - 36px)) !important;
        max-width: min(600px, calc(100vw - var(--sidebar-current-width, 340px) - 36px)) !important;
      }
    }
    /* Adattamento Tablet Verticale (601px - 768px) */
    @media (max-width: 768px) and (min-width: 601px) {
      .custom-modern-saved-popup .leaflet-popup-content {
        width: min(580px, calc(100vw - 28px)) !important;
        max-width: min(580px, calc(100vw - 28px)) !important;
        max-height: calc(100dvh - 80px) !important;
      }
    }
    /* Adattamento Mobile Verticale (<= 600px) */
    @media (max-width: 600px) {
      .custom-modern-saved-popup .leaflet-popup-content {
        width: calc(100vw - 20px) !important;
        max-width: 420px !important;
        max-height: calc(100dvh - 60px) !important;
      }
    }

    .saved-popup-card {
      width: 100%;
      box-sizing: border-box;
      color: #f8fafc;
      font-family: 'Plus Jakarta Sans', sans-serif;
      position: relative;
      padding: 16px 18px 18px;
    }
    /* Barra Superiore Unificata (Icona Categoria, Titolo, Meteo e Chiudi) con Linea di Separazione di Stato */
    .saved-popup-top-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      min-height: 32px;
      padding-bottom: 12px;
      margin-bottom: 14px;
      border-bottom: 2.5px solid rgba(255, 255, 255, 0.15);
      position: relative;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .saved-popup-top-bar.status-visited {
      border-bottom: 2.5px solid #22c55e !important;
      box-shadow: none !important;
    }
    .saved-popup-top-bar.status-wishlist {
      border-bottom: 2.5px solid #f97316 !important;
      box-shadow: none !important;
    }
    .saved-popup-header-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex: 1 1 auto;
      height: 32px;
      overflow: hidden;
    }
    .saved-popup-header-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      height: 32px;
    }
    .saved-popup-title {
      margin: 0;
      font-size: 18px;
      font-weight: 750;
      color: #ffffff;
      letter-spacing: -0.015em;
      line-height: 1;
      height: 28px;
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
      padding-top: 1px;
      box-sizing: border-box;
    }
    .saved-popup-weather-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 28px;
      padding: 0 12px 0 10px;
      background: rgba(56, 189, 248, 0.12);
      border: 1px solid rgba(56, 189, 248, 0.28);
      border-radius: 9999px;
      cursor: pointer;
      font-size: 12px;
      color: #e0f2fe;
      transition: all 0.2s ease;
      flex-shrink: 0;
      box-sizing: border-box;
      line-height: 1;
      white-space: nowrap;
    }
    .saved-popup-weather-pill:hover {
      background: rgba(56, 189, 248, 0.24);
      border-color: rgba(56, 189, 248, 0.5);
      transform: translateY(-1px);
    }
    .saved-popup-weather-temp {
      font-weight: 700;
      color: #38bdf8;
      line-height: 1;
    }
    .saved-popup-weather-desc {
      color: #cbd5e1;
      font-size: 11.5px;
      line-height: 1;
    }
    .saved-popup-close-btn {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #f97316 !important;
      border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
      color: #ffffff !important;
      box-shadow: 0 2px 8px rgba(249, 115, 22, 0.45);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      flex-shrink: 0;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .saved-popup-close-btn:hover {
      background: #ea580c !important;
      color: #ffffff !important;
      transform: scale(1.08);
      box-shadow: 0 4px 14px rgba(249, 115, 22, 0.65);
    }
    .saved-popup-close-btn svg {
      stroke: #ffffff;
      stroke-width: 3;
    }

    /* Griglia Desktop (> 768px): Foto | Mini-Mappa GPX | Dati & Azioni */
    .saved-popup-grid.has-gpx {
      display: grid !important;
      grid-template-columns: 240px 260px 1fr !important;
      grid-template-areas: "media minimap info" !important;
      gap: 14px !important;
      align-items: stretch !important;
    }
    /* Griglia a 2 colonne per luoghi senza traccia GPX (Sempre 2 colonne affiancate su Desktop, mai giganti né vuote) */
    .saved-popup-grid.no-gpx {
      display: grid !important;
      grid-template-columns: 240px 1fr !important;
      grid-template-areas: "media info" !important;
      gap: 14px !important;
      align-items: stretch !important;
    }

    /* Adattamento Dinamico tramite Container Queries per spazi ristretti (< 740px) */
    @container popupcard (max-width: 740px) {
      .saved-popup-card {
        padding: 13px 15px 15px !important;
      }
      .saved-popup-grid.has-gpx {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
          "media minimap"
          "info  info" !important;
        gap: 12px !important;
        max-height: none !important;
      }
      /* Luoghi senza GPX restano rigorosamente a 2 colonne affiancate: media a sinistra, info a destra */
      .saved-popup-grid.no-gpx {
        display: grid !important;
        grid-template-columns: 240px 1fr !important;
        grid-template-areas: "media info" !important;
        gap: 12px !important;
      }
      .saved-popup-media-col {
        grid-area: media !important;
      }
      .saved-popup-minimap-col {
        grid-area: minimap !important;
        min-height: 180px !important;
        height: 180px !important;
      }
      .saved-popup-minimap-canvas {
        min-height: 180px !important;
        height: 180px !important;
      }
      .saved-popup-info-col {
        grid-area: info !important;
        gap: 8px !important;
      }
    }
    @container popupcard (max-width: 480px) {
      .saved-popup-grid.has-gpx {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
          "media"
          "minimap"
          "info" !important;
        gap: 10px !important;
      }
      .saved-popup-grid.no-gpx {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
          "media"
          "info" !important;
        gap: 10px !important;
      }
      .saved-popup-media-col {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
      }
    }

    /* Colonna centrale: Mini-Mappa GPX Integrata e Pulita */
    .saved-popup-minimap-col {
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 260px;
      position: relative;
      cursor: pointer;
    }
    .saved-popup-minimap-canvas {
      width: 100%;
      height: 100%;
      min-height: 260px;
      border-radius: 14px;
      overflow: hidden;
      background: #0f172a;
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
      position: relative;
      z-index: 1;
      transition: border-color 0.2s ease, transform 0.2s ease;
    }
    .saved-popup-minimap-col:hover .saved-popup-minimap-canvas {
      border-color: rgba(16, 185, 129, 0.45);
    }
    .saved-popup-minimap-overlay-hint {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 4px;
      background: rgba(15, 23, 42, 0.82);
      backdrop-filter: blur(6px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 6px;
      padding: 3px 8px;
      font-size: 10.5px;
      font-weight: 600;
      color: #f1f5f9;
      pointer-events: none;
      opacity: 0.85;
      transition: all 0.2s ease;
    }
    .saved-popup-minimap-col:hover .saved-popup-minimap-overlay-hint {
      opacity: 1;
      background: rgba(16, 185, 129, 0.9);
      color: #ffffff;
      border-color: #10b981;
    }
    .saved-popup-minimap-canvas .leaflet-control-attribution,
    .saved-popup-minimap-canvas .leaflet-control-zoom {
      
    }

    /* Mini Profilo Altimetrico Compatto e Pulito */
    .saved-popup-mini-elevation-wrap {
      width: 100%;
      margin-top: 6px;
      background: rgba(15, 23, 42, 0.65);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 10px;
      padding: 6px 8px 4px 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
      box-sizing: border-box;
    }
    .saved-popup-mini-elevation-wrap:hover {
      background: rgba(15, 23, 42, 0.88);
      border-color: rgba(16, 185, 129, 0.45);
      transform: translateY(-1px);
    }
    .saved-popup-mini-elevation-canvas {
      width: 100%;
      height: 48px;
      display: block;
    }
    .saved-popup-mini-elevation-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 2px;
      font-size: 10px;
      color: #94a3b8;
      font-weight: 500;
      padding: 0 2px;
    }
    .mini-elev-hint {
      display: flex;
      align-items: center;
      gap: 3px;
      color: #10b981;
      font-size: 9.5px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }

    /* Toolbar Mappa Interattiva (Zoom & Rotazione) */
    .interactive-map-toolbar {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 1000;
      display: flex;
      flex-direction: column;
      gap: 8px;
      pointer-events: auto;
    }
    .interactive-map-tool-group {
      display: flex;
      background: rgba(15, 23, 42, 0.88);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    }
    .interactive-map-tool-btn {
      background: transparent;
      border: none;
      color: #f1f5f9;
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 13px;
      padding: 0;
    }
    .interactive-map-tool-btn:not(:last-child) {
      border-right: 1px solid rgba(255, 255, 255, 0.1);
    }
    .interactive-map-tool-btn:hover {
      background: rgba(255, 255, 255, 0.12);
      color: #10b981;
    }
    .interactive-map-tool-btn.compass-btn {
      width: auto;
      min-width: 44px;
      padding: 0 6px;
      gap: 4px;
    }
    .compass-needle {
      transition: transform 0.2s ease;
    }
    .compass-label {
      font-size: 10px;
      font-weight: 700;
      color: #94a3b8;
      letter-spacing: 0.5px;
    }

    /* Colonna sinistra: Media / Foto - Dimensioni Rigorosamente Fisse & Foto Centrate (Sempre come screenshot riferimento) */
    .saved-popup-media-col {
      grid-area: media !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 0 !important;
      width: 240px !important;
      min-width: 240px !important;
      max-width: 240px !important;
      height: 260px !important;
      min-height: 260px !important;
      max-height: 260px !important;
      flex-shrink: 0 !important;
      box-sizing: border-box !important;
    }
    .saved-popup-media-col .carousel {
      width: 100% !important;
      height: 260px !important;
      min-height: 260px !important;
      max-height: 260px !important;
      border-radius: 14px !important;
      overflow: hidden !important;
      background: #020617 !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
      display: flex !important;
      flex-direction: column !important;
      box-sizing: border-box !important;
    }
    .saved-popup-media-col .carousel-main {
      width: 100% !important;
      height: 204px !important;
      min-height: 204px !important;
      max-height: 204px !important;
      position: relative !important;
      overflow: hidden !important;
      cursor: pointer !important;
      background: #0f172a !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-shrink: 0 !important;
    }
    /* Se c'è una sola foto (o senza thumbs), la foto occupa l'intera altezza di 260px */
    .saved-popup-media-col .carousel:not(:has(.carousel-thumbs)) .carousel-main,
    .saved-popup-media-col .carousel-main.single-photo {
      height: 260px !important;
      min-height: 260px !important;
      max-height: 260px !important;
    }
    .saved-popup-media-col .carousel-main img {
      width: 100% !important;
      height: 100% !important;
      max-height: 100% !important;
      object-fit: cover !important;
      object-position: center !important;
      display: block !important;
      transition: transform 0.35s ease;
    }
    .saved-popup-media-col .carousel-main:hover img {
      transform: scale(1.04);
    }
    .saved-popup-media-col .carousel-thumbs {
      display: flex !important;
      gap: 6px !important;
      padding: 6px 8px !important;
      height: 56px !important;
      min-height: 56px !important;
      max-height: 56px !important;
      box-sizing: border-box !important;
      background: rgba(15, 23, 42, 0.85) !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      align-items: center !important;
      flex-shrink: 0 !important;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }
    .saved-popup-media-col .carousel-thumbs .t {
      width: 48px !important;
      height: 38px !important;
      min-width: 48px !important;
      min-height: 38px !important;
      max-height: 38px !important;
      flex-shrink: 0 !important;
      border-radius: 6px !important;
      overflow: hidden !important;
      opacity: 0.65;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all 0.2s ease;
      box-sizing: border-box !important;
    }
    .saved-popup-media-col .carousel-thumbs .t.active,
    .saved-popup-media-col .carousel-thumbs .t:hover {
      opacity: 1;
      border-color: #10b981;
      box-shadow: 0 0 8px rgba(16, 185, 129, 0.45);
    }
    .saved-popup-media-col .carousel-thumbs .t img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: center !important;
      display: block !important;
    }

    /* Colonna destra: Informazioni, Dati e Azioni */
    .saved-popup-info-col {
      grid-area: info !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      gap: 10px !important;
      min-width: 0 !important;
      height: 100% !important;
      min-height: 260px !important;
      box-sizing: border-box !important;
    }
    /* BADGE CATEGORIA UNIFICATO: Icona + Testo insieme */
    .saved-popup-type-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 28px;
      padding: 0 10px 0 8px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 9999px;
      font-size: 12px;
      font-weight: 600;
      color: #f1f5f9;
      box-sizing: border-box;
      flex-shrink: 0;
      line-height: 1;
      white-space: nowrap;
    }
    .saved-popup-type-pill-icon {
      width: 16px;
      height: 16px;
      object-fit: contain;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
      flex-shrink: 0;
      display: block;
    }
    .stat-loading {
      display: inline-block;
      color: #94a3b8;
      font-weight: 600;
      letter-spacing: 1px;
      animation: statPulse 1.2s ease-in-out infinite;
    }
    @keyframes statPulse {
      0%, 100% { opacity: 0.35; transform: scale(0.96); }
      50% { opacity: 0.95; transform: scale(1); }
    }
    .saved-popup-status-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    .saved-popup-status-badge.visited {
      background: rgba(16, 185, 129, 0.15);
      border: 1px solid rgba(16, 185, 129, 0.35);
      color: #34d399;
    }
    .saved-popup-status-badge.to-visit {
      background: rgba(56, 189, 248, 0.15);
      border: 1px solid rgba(56, 189, 248, 0.35);
      color: #38bdf8;
    }
    .saved-popup-stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
      gap: 8px;
      background: rgba(30, 41, 59, 0.55);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 10px;
      padding: 8px 12px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .saved-popup-stats-grid:hover {
      background: rgba(30, 41, 59, 0.8);
      border-color: rgba(56, 189, 248, 0.3);
    }
    .saved-popup-stat-item {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .saved-popup-stat-label {
      font-size: 9.5px;
      font-weight: 700;
      color: #94a3b8;
      letter-spacing: 0.04em;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .saved-popup-stat-val {
      font-size: 13px;
      font-weight: 700;
      color: #f1f5f9;
    }
    .saved-popup-desc-wrap {
      position: relative;
      max-height: 68px;
      overflow-y: auto;
      padding: 6px 8px;
      background: rgba(15, 23, 42, 0.45);
      border: 1px solid rgba(255, 255, 255, 0.07);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .saved-popup-desc-wrap:hover {
      background: rgba(15, 23, 42, 0.75);
      border-color: rgba(56, 189, 248, 0.35);
    }
    .saved-popup-desc {
      margin: 0;
      font-size: 12px;
      color: #cbd5e1;
      line-height: 1.45;
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    .desc-link {
      color: #38bdf8 !important;
      text-decoration: underline !important;
      text-underline-offset: 2.5px;
      font-weight: 500;
      transition: color 0.15s ease;
    }
    .desc-link:hover {
      color: #7dd3fc !important;
      text-decoration: underline !important;
    }
    .saved-popup-actions-wrap {
      margin-top: auto !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 0 !important;
      width: 100% !important;
    }
    .saved-popup-actions {
      display: flex;
      gap: 8px;
      margin-top: auto;
      padding-top: 6px;
    }
    .saved-popup-btn {
      flex: 1;
      height: 35px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      text-decoration: none;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      box-sizing: border-box;
      background: rgba(30, 41, 59, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #e2e8f0;
    }
    .saved-popup-btn:hover {
      background: rgba(51, 65, 85, 0.9);
      border-color: rgba(255, 255, 255, 0.22);
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    }
    .saved-popup-btn:active {
      transform: translateY(0);
    }
    .saved-popup-btn.wikiloc {
      background: rgba(34, 197, 94, 0.1);
      border-color: rgba(34, 197, 94, 0.25);
      color: #86efac;
    }
    .saved-popup-btn.wikiloc:hover {
      background: rgba(34, 197, 94, 0.2);
      border-color: rgba(34, 197, 94, 0.45);
      color: #ffffff;
    }
    .saved-popup-btn.share {
      background: rgba(56, 189, 248, 0.08);
      border-color: rgba(56, 189, 248, 0.22);
      color: #7dd3fc;
    }
    .saved-popup-btn.share:hover {
      background: rgba(56, 189, 248, 0.18);
      border-color: rgba(56, 189, 248, 0.4);
      color: #ffffff;
    }
    .saved-popup-memory-btn {
      width: 100%;
      height: 36px;
      margin-bottom: 8px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.01em;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      text-decoration: none;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      background: rgba(16, 185, 129, 0.12);
      border: 1px solid rgba(16, 185, 129, 0.3);
      color: #6ee7b7;
      box-sizing: border-box;
    }
    .saved-popup-memory-btn:hover {
      background: rgba(16, 185, 129, 0.22);
      border-color: rgba(16, 185, 129, 0.55);
      color: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
    }
    dialog#createMemoryModal {
      background: transparent !important;
      border: none !important;
      padding: 0 !important;
      max-width: 94vw !important;
      width: 520px !important;
      margin: auto !important;
      outline: none !important;
      box-shadow: none !important;
      overflow: visible !important;
    }
    dialog#createMemoryModal::backdrop {
      background: rgba(2, 6, 23, 0.8) !important;
      backdrop-filter: blur(14px) !important;
      -webkit-backdrop-filter: blur(14px) !important;
    }
    .memory-choice-card {
      background: rgba(30, 41, 59, 0.5);
      border: 1.5px solid rgba(255, 255, 255, 0.08);
      border-radius: 18px;
      padding: 18px 14px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: all 0.22s ease;
      position: relative;
    }
    .memory-choice-card:hover {
      transform: translateY(-2px);
      border-color: rgba(20, 184, 166, 0.6) !important;
      background: rgba(30, 41, 59, 0.8) !important;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
    }
    /* Effetto oscuramento cartina per risalto traccia GPX */
    .leaflet-tile-pane {
      transition: filter 0.4s ease !important;
    }
    .map-dimmed .leaflet-tile-pane {
      filter: brightness(0.52) contrast(1.18) saturate(0.82) !important;
    }
    .user-place-pin {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2.5px solid #ffffff;
      box-shadow: 0 2px 7px rgba(0, 0, 0, 0.45);
      transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
      cursor: pointer;
    }
    .user-place-pin:hover {
      transform: scale(1.3);
    }

    /* ================================================================
       MOBILE UI COMPACTION OVERRIDES (must be LAST in cascade)
       Fixes: oversized sidebar, login spacing, cookie banner overlap,
       floating nav, place popups, header safe-area
       ================================================================ */
    @media (max-width: 768px) {

      /* --- HEADER: compact mobile header --- */
      body .header {
        min-height: calc(44px + max(env(safe-area-inset-top, 0px), 44px)) !important;
        padding-top: max(env(safe-area-inset-top, 0px), 44px) !important;
        padding-bottom: 6px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
      }
      body .header .logo {
        width: 28px !important;
        height: 28px !important;
      }
      body .header .title {
        font-size: 17px !important;
      }
      body .header-left {
        gap: 10px !important;
        height: 38px !important;
      }
      body .header-right {
        gap: 8px !important;
        height: 38px !important;
      }
      body .weather-section {
        padding: 5px 8px !important;
        min-width: 90px !important;
        border-radius: 10px !important;
        gap: 5px !important;
      }
      body .weather-temp {
        font-size: 12px !important;
      }
      body .weather-location {
        font-size: 10px !important;
        max-width: 70px !important;
      }

      /* --- MAIN CONTAINER: anchor below compact header --- */
      body .main-container {
        top: calc(44px + max(env(safe-area-inset-top, 0px), 44px)) !important;
        height: calc(100dvh - (44px + max(env(safe-area-inset-top, 0px), 44px))) !important;
      }

      /* --- SIDEBAR: compact all elements --- */
      body .sidebar {
        width: 250px !important;
        padding: 8px 10px 14px 10px !important;
        top: calc(44px + max(env(safe-area-inset-top, 0px), 44px)) !important;
      }
      body .sidebar-section {
        margin-bottom: 6px !important;
      }
      /* Add button compact */
      body .add-btn {
        padding: 10px 14px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
      }
      body .add-btn svg {
        width: 14px !important;
        height: 14px !important;
      }
      /* Inspire button compact */
      body #inspireBtn {
        padding: 8px 12px !important;
        font-size: 12px !important;
        margin-top: 6px !important;
        border-radius: 10px !important;
      }
      body #inspireBtn svg {
        width: 14px !important;
        height: 14px !important;
      }
      /* Search field compact */
      body .leaflet-control-geocoder {
        border-radius: 12px !important;
      }
      body .leaflet-control-geocoder-form input {
        height: 38px !important;
        font-size: 13px !important;
        padding: 0 12px 0 36px !important;
        border-radius: 12px !important;
      }
      body .leaflet-control-geocoder-icon {
        top: 8px !important;
        left: 10px !important;
        width: 20px !important;
        height: 20px !important;
      }
      /* Section title compact */
      body .section-title {
        font-size: 12px !important;
        margin-bottom: 6px !important;
        padding: 0 !important;
      }
      body .section-title svg {
        width: 14px !important;
        height: 14px !important;
      }
      /* Filter buttons compact */
      body .filter-buttons {
        gap: 5px !important;
      }
      body .filter-btn {
        padding: 8px 10px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
      }
      body .filter-btn svg {
        width: 13px !important;
        height: 13px !important;
      }
      body .btn-count {
        padding: 1px 7px !important;
        font-size: 10.5px !important;
      }
      /* Info cards compact */
      body .info-card-mini {
        padding: 6px 10px !important;
        font-size: 11px !important;
        border-radius: 8px !important;
      }
      body .info-cards {
        margin-top: 4px !important;
      }
      /* Settings button compact */
      body .sidebar > div:last-child {
        margin-top: 8px !important;
        padding-top: 8px !important;
      }
      body .sidebar > div:last-child .filter-btn {
        padding: 7px 10px !important;
        font-size: 11.5px !important;
      }

      /* --- FLOATING NAV: slightly more compact --- */
      body .mobile-nav {
        bottom: 12px !important;
        left: 16px !important;
        right: 16px !important;
        height: 56px !important;
        border-radius: 28px !important;
      }
      body .nav-btn {
        gap: 2px !important;
      }
      body .nav-btn span {
        font-size: 10px !important;
      }
      body .nav-btn .default-icon {
        width: 20px !important;
        height: 20px !important;
      }
      body .nav-btn.primary div {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
      }
      body .nav-btn.primary div svg {
        width: 20px !important;
        height: 20px !important;
      }
      body .nav-profile-visual {
        width: 28px !important;
        height: 28px !important;
      }

      /* --- LEAFLET: hide attribution on mobile to avoid nav overlap --- */
      .leaflet-control-attribution {
        
      }

      /* --- LOGIN DIALOG: compact and centered --- */
      dialog#loginOverlay {
        padding-top: max(env(safe-area-inset-top, 0px), 44px) !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
      }
      dialog#loginOverlay[open] {
        align-items: center !important;
        justify-content: center !important;
      }
      dialog#loginOverlay .login-card {
        width: 100% !important;
        max-width: 360px !important;
        min-height: unset !important;
        border-radius: 20px !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
      }
      dialog#loginOverlay .login-image {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
      }
      dialog#loginOverlay .login-form {
        width: 100% !important;
        max-width: 100% !important;
        padding: 22px 18px 20px 18px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
      }
      dialog#loginOverlay .login-title {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 4px !important;
      }
      dialog#loginOverlay .login-title img {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
      }
      dialog#loginOverlay .login-title h2 {
        font-size: 18px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
      }
      dialog#loginOverlay .login-subtitle {
        font-size: 13px !important;
        margin-bottom: 14px !important;
        color: #94a3b8 !important;
      }
      dialog#loginOverlay .login-input {
        width: 100% !important;
        max-width: 100% !important;
        padding: 11px 14px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
        margin-bottom: 8px !important;
        margin-top: 0 !important;
        box-sizing: border-box !important;
        display: block !important;
      }
      dialog#loginOverlay .login-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        margin-top: 4px !important;
        margin-bottom: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }
      dialog#loginOverlay .login-btn {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        height: 42px !important;
        font-size: 14px !important;
        border-radius: 12px !important;
        position: relative !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
      }
      /* Hide orphan spinners in login buttons when not loading */
      dialog#loginOverlay .login-btn:not([disabled]) .btn-spinner {
        display: none !important;
      }
      dialog#loginOverlay .notice {
        font-size: 11px !important;
        margin-top: 4px !important;
        margin-bottom: 2px !important;
        text-align: center !important;
      }
      dialog#loginOverlay .social-divider {
        margin: 8px 0 !important;
        font-size: 12px !important;
        text-align: center !important;
      }
      dialog#loginOverlay .social-btn {
        width: 100% !important;
        max-width: 100% !important;
        height: 42px !important;
        font-size: 13.5px !important;
        border-radius: 12px !important;
        padding: 8px 14px !important;
        margin-bottom: 6px !important;
        gap: 8px !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }
      dialog#loginOverlay .social-btn svg {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
      }
      dialog#loginOverlay .tutorial-divider {
        margin: 6px 0 !important;
        font-size: 12px !important;
        text-align: center !important;
      }
      dialog#loginOverlay .tutorial-btn {
        width: 100% !important;
        max-width: 100% !important;
        height: 38px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
        padding: 8px 14px !important;
        box-sizing: border-box !important;
      }
      dialog#loginOverlay .login-close-btn {
        top: 10px !important;
        right: 10px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 15px !important;
      }

      /* --- PLACE POPUP: compact card & responsive vertical layout --- */
      .custom-modern-saved-popup .leaflet-popup-content-wrapper {
        border-radius: 16px !important;
        max-height: calc(100dvh - 70px) !important;
        box-shadow: 0 16px 45px rgba(0, 0, 0, 0.75) !important;
        padding: 0 !important;
      }
      .custom-modern-saved-popup .leaflet-popup-content {
        width: min(calc(100vw - 20px), 420px) !important;
        max-width: min(calc(100vw - 20px), 420px) !important;
        max-height: calc(100dvh - 70px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 !important;
      }
      .saved-popup-card {
        width: 100% !important;
        padding: 10px 12px 12px !important;
        box-sizing: border-box !important;
      }
      .saved-popup-top-bar {
        padding-bottom: 8px !important;
        margin-bottom: 10px !important;
        gap: 8px !important;
        min-height: 26px !important;
      }
      .saved-popup-header-left {
        gap: 8px !important;
        height: 26px !important;
      }
      .saved-popup-header-right {
        gap: 6px !important;
        height: 26px !important;
      }
      .saved-popup-title {
        font-size: 14.5px !important;
        height: 26px !important;
        line-height: 26px !important;
      }
      .saved-popup-type-pill {
        height: 26px !important;
        padding: 0 8px 0 6px !important;
        font-size: 11px !important;
        border-radius: 9999px !important;
      }
      .saved-popup-weather-pill {
        height: 26px !important;
        padding: 0 8px 0 6px !important;
        font-size: 11px !important;
        border-radius: 9999px !important;
      }
      .saved-popup-close-btn {
        width: 26px !important;
        height: 26px !important;
      }

      /* Griglia Mobile Verticale: Foto e Mini-Mappa affiancate (1fr 1fr), Info completa sotto */
      .saved-popup-grid.has-gpx {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
          "media minimap"
          "info  info" !important;
        gap: 8px !important;
        max-height: none !important;
        overflow-y: visible !important;
      }
      .saved-popup-grid.no-gpx {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
          "media"
          "info" !important;
        gap: 8px !important;
        max-height: none !important;
        overflow-y: visible !important;
      }
      .saved-popup-media-col {
        grid-area: media;
        padding: 0 !important;
        gap: 0 !important;
        border: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 125px !important;
        min-height: 125px !important;
        max-height: 125px !important;
      }
      .saved-popup-media-col .carousel {
        border-radius: 10px !important;
        width: 100% !important;
        height: 125px !important;
        min-height: 125px !important;
        max-height: 125px !important;
      }
      .saved-popup-media-col .carousel-main,
      .saved-popup-media-col .carousel:not(:has(.carousel-thumbs)) .carousel-main,
      .saved-popup-media-col .carousel-main.single-photo {
        width: 100% !important;
        height: 125px !important;
        min-height: 125px !important;
        max-height: 125px !important;
        border-radius: 10px !important;
      }
      .saved-popup-media-col .carousel-thumbs {
        display: none !important;
      }
      .saved-popup-minimap-col {
        grid-area: minimap;
        min-height: 125px !important;
        height: 125px !important;
      }
      .saved-popup-minimap-canvas {
        min-height: 125px !important;
        height: 125px !important;
        border-radius: 10px !important;
      }
      .saved-popup-minimap-overlay-hint {
        top: 5px !important;
        right: 5px !important;
        padding: 2px 5px !important;
        font-size: 9px !important;
        gap: 3px !important;
      }
      .saved-popup-info-col {
        grid-area: info;
        padding: 0 !important;
        gap: 6px !important;
      }
      .saved-popup-stats-grid {
        display: flex !important;
        justify-content: space-around !important;
        padding: 3px 6px !important;
        margin: 0 !important;
        gap: 4px !important;
        border-radius: 8px !important;
        background: rgba(15, 23, 42, 0.5) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
      }
      .saved-popup-stat-item {
        padding: 0 4px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
      }
      .saved-popup-stat-label {
        font-size: 8px !important;
      }
      .saved-popup-stat-val {
        font-size: 11px !important;
        font-weight: 750 !important;
      }
      .saved-popup-mini-elevation-wrap {
        margin-top: 2px !important;
        padding: 3px 6px 2px 6px !important;
        border-radius: 8px !important;
      }
      .saved-popup-mini-elevation-canvas {
        height: 32px !important;
      }
      .saved-popup-mini-elevation-footer {
        font-size: 9px !important;
        margin-top: 1px !important;
      }
      .saved-popup-desc-wrap {
        margin: 1px 0 !important;
      }
      .saved-popup-desc {
        font-size: 10.5px !important;
        line-height: 1.3 !important;
        max-height: 36px !important;
      }
      .saved-popup-actions-wrap {
        margin-top: 2px !important;
      }
      .saved-popup-memory-btn {
        height: 30px !important;
        font-size: 10.5px !important;
        margin-bottom: 4px !important;
        gap: 5px !important;
        border-radius: 8px !important;
        padding: 0 8px !important;
      }
      .saved-popup-memory-btn svg {
        width: 12px !important;
        height: 12px !important;
      }
      .saved-popup-actions {
        gap: 5px !important;
      }
      .saved-popup-btn {
        height: 28px !important;
        font-size: 10.5px !important;
        padding: 0 6px !important;
        border-radius: 8px !important;
      }
      .saved-popup-btn svg {
        width: 11px !important;
        height: 11px !important;
      }

      /* --- COOKIE BANNER: position above floating nav --- */
      #cookieBanner {
        bottom: 80px !important;
        left: 12px !important;
        right: 12px !important;
        max-width: 100% !important;
        font-size: 12px !important;
        padding: 10px !important;
        border-radius: 12px !important;
      }

      /* --- MODALS: ensure all modals respect safe area --- */
      body .modal {
        max-height: calc(100dvh - max(env(safe-area-inset-top, 0px), 44px) - 80px) !important;
      }
    }

    /* Extra-small screens (under 400px) */
    @media (max-width: 400px) {
      body .sidebar {
        width: 220px !important;
        padding: 6px 8px 12px 8px !important;
      }
      body .add-btn {
        padding: 8px 10px !important;
        font-size: 12px !important;
      }
      body .filter-btn {
        padding: 6px 8px !important;
        font-size: 11px !important;
      }
      dialog#loginOverlay .login-card {
        max-width: 320px !important;
      }
      dialog#loginOverlay .login-form {
        padding: 16px 14px 14px 14px !important;
      }
      dialog#loginOverlay .login-title h2 {
        font-size: 16px !important;
      }
      dialog#loginOverlay .login-btn {
        height: 38px !important;
        font-size: 13px !important;
      }
      dialog#loginOverlay .social-btn {
        height: 36px !important;
        font-size: 12px !important;
      }
      body .mobile-nav {
        bottom: 8px !important;
        left: 10px !important;
        right: 10px !important;
        height: 52px !important;
      }
    }

    /* ===== MODALE DETTAGLI LUOGO & DESCRIZIONE ESPANSA ===== */
    dialog#placeDetailsModal {
      padding: 0 !important;
      border: none !important;
      border-radius: 22px !important;
      background: transparent !important;
      max-width: 620px !important;
      width: 92vw !important;
      color: #f8fafc !important;
      overflow: visible !important;
      box-shadow: none !important;
      margin: auto !important;
      outline: none !important;
    }
    dialog#placeDetailsModal::backdrop {
      background: rgba(2, 6, 23, 0.82) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
    }
    body .place-details-card {
      background: #0f172a !important;
      background: linear-gradient(155deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.99) 100%) !important;
      border: 1px solid rgba(255, 255, 255, 0.14) !important;
      border-radius: 22px !important;
      box-shadow: 0 25px 65px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
      backdrop-filter: blur(28px) !important;
      -webkit-backdrop-filter: blur(28px) !important;
      padding: 24px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 16px !important;
      max-height: 86vh !important;
      box-sizing: border-box !important;
      color: #f8fafc !important;
      width: 100% !important;
    }
    .place-details-header {
      display: flex !important;
      align-items: flex-start !important;
      justify-content: space-between !important;
      gap: 14px !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
      padding-bottom: 14px !important;
    }
    .place-details-header-info {
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
      min-width: 0 !important;
    }
    .place-details-badges {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      flex-wrap: wrap !important;
    }
    .place-details-badge {
      display: inline-flex !important;
      align-items: center !important;
      gap: 5px !important;
      padding: 3px 10px !important;
      border-radius: 9999px !important;
      font-size: 11.5px !important;
      font-weight: 600 !important;
    }
    .place-details-badge.type-badge {
      background: rgba(16, 185, 129, 0.15) !important;
      border: 1px solid rgba(16, 185, 129, 0.35) !important;
      color: #34d399 !important;
    }
    .place-details-badge.status-badge.visited {
      background: rgba(16, 185, 129, 0.15) !important;
      border: 1px solid rgba(16, 185, 129, 0.35) !important;
      color: #34d399 !important;
    }
    .place-details-badge.status-badge.wishlist {
      background: rgba(249, 115, 22, 0.15) !important;
      border: 1px solid rgba(249, 115, 22, 0.35) !important;
      color: #fb923c !important;
    }
    .place-details-badge.weather-badge {
      background: rgba(56, 189, 248, 0.15) !important;
      border: 1px solid rgba(56, 189, 248, 0.35) !important;
      color: #38bdf8 !important;
    }
    .place-details-title {
      margin: 0 !important;
      font-size: 20px !important;
      font-weight: 700 !important;
      color: #f8fafc !important;
      letter-spacing: -0.01em !important;
      line-height: 1.25 !important;
      word-break: break-word !important;
    }
    .place-details-close {
      background: rgba(255, 255, 255, 0.08) !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      color: #94a3b8 !important;
      width: 34px !important;
      height: 34px !important;
      min-width: 34px !important;
      border-radius: 50% !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 15px !important;
      transition: all 0.2s ease !important;
      flex-shrink: 0 !important;
    }
    .place-details-close:hover {
      background: rgba(239, 68, 68, 0.2) !important;
      color: #f87171 !important;
      border-color: rgba(239, 68, 68, 0.4) !important;
      transform: scale(1.06) !important;
    }
    .place-details-body {
      display: flex !important;
      flex-direction: column !important;
      gap: 16px !important;
      overflow-y: auto !important;
      padding-right: 4px !important;
      scrollbar-width: thin !important;
      scrollbar-color: rgba(255, 255, 255, 0.2) transparent !important;
    }
    .place-details-stats-grid {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 10px !important;
    }
    .place-details-stat-card {
      background: rgba(15, 23, 42, 0.75) !important;
      border: 1px solid rgba(255, 255, 255, 0.09) !important;
      border-radius: 14px !important;
      padding: 12px 14px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 4px !important;
      transition: transform 0.2s ease, border-color 0.2s ease !important;
    }
    .place-details-stat-card:hover {
      border-color: rgba(56, 189, 248, 0.35) !important;
      transform: translateY(-1px) !important;
    }
    .place-details-stat-label {
      font-size: 10px !important;
      font-weight: 700 !important;
      color: #94a3b8 !important;
      letter-spacing: 0.05em !important;
      text-transform: uppercase !important;
      display: flex !important;
      align-items: center !important;
      gap: 5px !important;
    }
    .place-details-stat-val {
      font-size: 17px !important;
      font-weight: 800 !important;
      color: #f8fafc !important;
    }
    .place-details-stat-val.gain { color: #10b981 !important; }
    .place-details-stat-val.dur { color: #fbbf24 !important; }
    .place-details-stat-val.dist { color: #38bdf8 !important; }
    .place-details-gpx-substats {
      grid-column: span 3 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: space-around !important;
      background: rgba(15, 23, 42, 0.55) !important;
      border: 1px solid rgba(255, 255, 255, 0.07) !important;
      border-radius: 10px !important;
      padding: 8px 12px !important;
      font-size: 12px !important;
      color: #cbd5e1 !important;
    }
    .place-details-gpx-substats span strong {
      color: #f8fafc !important;
    }
    .place-details-desc-section {
      background: rgba(15, 23, 42, 0.65) !important;
      border: 1px solid rgba(255, 255, 255, 0.09) !important;
      border-radius: 14px !important;
      padding: 16px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 10px !important;
    }
    .place-details-section-label {
      font-size: 11.5px !important;
      font-weight: 700 !important;
      color: #94a3b8 !important;
      letter-spacing: 0.04em !important;
      text-transform: uppercase !important;
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
    }
    .place-details-desc-content {
      font-size: 14px !important;
      line-height: 1.65 !important;
      color: #e2e8f0 !important;
      white-space: pre-wrap !important;
      word-break: break-word !important;
      overflow-wrap: anywhere !important;
    }
    @media (max-width: 600px) {
      body .place-details-card {
        padding: 18px 16px !important;
        gap: 14px !important;
      }
      .place-details-title {
        font-size: 18px !important;
      }
      .place-details-stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
      }
      .place-details-stat-card {
        padding: 10px 8px !important;
      }
      .place-details-stat-val {
        font-size: 14px !important;
      }
      .place-details-desc-content {
        font-size: 13px !important;
        line-height: 1.55 !important;
      }
    }