:root{
  /* Base (design chiaro e pulito) */
  --bg:#FAFBFC;          /* sfondo pagina molto chiaro */
  --surface:#FFFFFF;     /* card, sheet */
  --tabbar:#FFFFFF;      /* barra inferiore bianca */
  --line:#E5E7EB;        /* divider grigio chiaro */

  /* Testo */
  --text:#1F2937;        /* primario grigio scuro */
  --muted:#6B7280;       /* secondario grigio medio */
  --link:#3B82F6;        /* link blu moderno */

  /* Stato allerte (coerenti Protezione Civile) */
  --ok:#1DB954; --warn:#F5A623; --high:#FF8A00; --ext:#FF5A5F;

  /* Raggi & ombre */
  --r:12px; --r-lg:16px;
  --shadow-1:0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-2:0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);

  /* Spaziatura 8pt */
  --s1:8px; --s2:12px; --s3:16px; --s4:20px; --s5:24px;

  /* aliases for existing CSS used in prototype */
  --gap: var(--s2);
  --topbar-h:64px;
  --tabbar-h:56px;
  --accent: var(--link);
  --accent-2: #00b7ff;
  --danger: var(--ext);
  --success: var(--ok);
}
*{box-sizing:border-box}
body,html{height:100%;margin:0;background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;position:relative}
body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);z-index:-1}
.app-root{display:flex;flex-direction:column;height:100vh;overflow:hidden}
/* keep topbar and tabbar always visible; only .content scrolls */
.topbar{height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--line);position:fixed;top:0;left:0;right:0;z-index:40;box-shadow:var(--shadow-1);transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.topbar-left,.topbar-center,.topbar-right{display:flex;align-items:center}
.topbar-center{flex:1;justify-content:center;gap:8px}
.logo img{width:44px;height:44px;object-fit:contain;display:block;background:rgba(255,255,255,0.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:6px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.3);border:1px solid rgba(255,255,255,0.2);transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.app-title{font-size:18px;margin:0;color:#0f172a}
.alert-icon{width:40px;height:40px;border-radius:50%;border:none;display:inline-flex;align-items:center;justify-content:center;background:var(--surface);cursor:pointer}
.alert-icon.ok{background:var(--success);box-shadow:0 2px 6px rgba(11,95,255,0.06)}
.alert-icon.warn{background:var(--warn);position:relative;width:44px;height:44px;color:#ffffff;box-shadow:0 2px 6px rgba(255,138,0,0.08)}
.alert-icon svg{position:relative;z-index:1;width:22px;height:22px;color:inherit}
.avatar-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,0.3);background:rgba(11,95,255,0.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:white;font-weight:600;cursor:pointer;overflow:hidden;position:relative;box-shadow:0 4px 12px rgba(11,95,255,0.2),inset 0 1px 0 rgba(255,255,255,0.3);transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
/* make inline SVG in avatar button fill the circle more fully */
.avatar-btn svg{width:24px;height:24px;display:block;color:inherit}
/* Avatar image styles */
.avatar-btn img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:none;box-shadow:none;display:block;position:absolute;top:0;left:0}

/* Liquid Glass hover effects for header elements */
.logo img:hover{transform:scale(1.05);box-shadow:0 6px 16px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.4)}
.avatar-btn:hover{transform:scale(1.05);box-shadow:0 6px 16px rgba(11,95,255,0.3),inset 0 1px 0 rgba(255,255,255,0.4)}
.content{flex:1;padding:0 0 30px 0;overflow:auto;height:100vh;-webkit-overflow-scrolling:touch}
.view{display:none;background:var(--surface);padding:16px;border-radius:12px;box-shadow:0 4px 16px rgba(17,24,39,0.04);width:95%;margin:0 auto}
.view.active{display:block}

.map-card{width:95%;height:28vh;margin:18px auto;border-radius:16px;overflow:hidden;background:rgba(255,255,255,0.15);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.2);box-shadow:0 8px 32px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.3);transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.map-inner{width:100%;height:100%}
.weather-card{width:95%;margin:8px auto 20px auto;background:rgba(255,255,255,0.15);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.2);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.3);padding:16px;height:64px;display:flex;align-items:center;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.weather-inner{font-size:14px;color:var(--text);display:flex;gap:12px;align-items:center}

/* Liquid Glass hover effects */
.weather-card:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.4)}
.map-card:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.4)}

/* Map control pill positioned above the map (top-right of map-card) */
.map-card{position:relative;z-index:0}
.map-controls{position:absolute;top:12px;right:12px;z-index:10050;display:flex;gap:8px;pointer-events:auto}
.map-style-select{appearance:none;border:none;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.2);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.3);box-shadow:0 4px 16px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.4);cursor:pointer;font-weight:600;color:var(--text);transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.map-style-select:hover{background:rgba(255,255,255,0.3);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.5)}
.map-style-select option{font-weight:400}
.map-controls::after{content:'';display:block;position:absolute;inset:0;border-radius:16px;pointer-events:none}


.alerts-tiles{width:95%;margin:12px auto 20px auto;display:grid;gap:0;grid-template-columns:22% 22% 22% 22%;justify-content:space-between;max-width:95vw}
.alerts-tile{background:rgba(255,255,255,0.2);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.3);box-shadow:0 4px 16px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.4);border-radius:12px;padding:6px;display:flex;align-items:center;justify-content:center;color:var(--text);aspect-ratio:1/1;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden}
/* always 4 columns including on mobile to keep tiles inline */
@media(min-width:1024px){.alerts-tiles{width:95%;gap:0;grid-template-columns:22% 22% 22% 22%;justify-content:space-between}}

.alert-cards{width:95%;margin:16px auto 18px auto;display:flex;justify-content:space-between}
.alert-card{width:48%;background:rgba(255,255,255,0.15);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.2);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;overflow:hidden;height:20vh;position:relative;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
@media(min-width:1024px){.alert-cards{width:95%}}

/* Ensure only individual alert-card gets the background color */
.alert-cards.alert-bg-red{background:transparent}
.alert-cards.alert-bg-orange{background:transparent}
.alert-cards.alert-bg-azzurro{background:transparent}
.alert-cards.alert-bg-green{background:transparent}

/* Per-card color tones with Liquid Glass effect */
.alert-card.alert-bg-red{background:rgba(254,235,236,0.25);border:1px solid rgba(185,28,28,0.3);box-shadow:0 8px 32px rgba(185,28,28,0.15),inset 0 1px 0 rgba(255,255,255,0.4)}
.alert-card.alert-bg-orange{background:rgba(255,239,230,0.25);border:1px solid rgba(194,65,12,0.3);box-shadow:0 8px 32px rgba(194,65,12,0.15),inset 0 1px 0 rgba(255,255,255,0.4)}
.alert-card.alert-bg-azzurro{background:rgba(230,249,255,0.25);border:1px solid rgba(14,165,233,0.3);box-shadow:0 8px 32px rgba(14,165,233,0.15),inset 0 1px 0 rgba(255,255,255,0.4)}
.alert-card.alert-bg-green{background:rgba(230,244,234,0.25);border:1px solid rgba(30,125,52,0.3);box-shadow:0 8px 32px rgba(30,125,52,0.15),inset 0 1px 0 rgba(255,255,255,0.4)}

/* Liquid Glass hover effects */
.alert-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 48px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.5)}
.alert-card.alert-bg-red:hover{box-shadow:0 16px 48px rgba(185,28,28,0.25),inset 0 1px 0 rgba(255,255,255,0.5)}
.alert-card.alert-bg-orange:hover{box-shadow:0 16px 48px rgba(194,65,12,0.25),inset 0 1px 0 rgba(255,255,255,0.5)}
.alert-card.alert-bg-azzurro:hover{box-shadow:0 16px 48px rgba(14,165,233,0.25),inset 0 1px 0 rgba(255,255,255,0.5)}
.alert-card.alert-bg-green:hover{box-shadow:0 16px 48px rgba(30,125,52,0.25),inset 0 1px 0 rgba(255,255,255,0.5)}

/* Liquid Glass shimmer effect */
.alert-card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s}
.alert-card:hover::before{left:100%}

.alert-card.alert-bg-red .ac-title{color:#7a0f0f}
.alert-card.alert-bg-red .ac-label{color:#5a0b0b}
.alert-card.alert-bg-orange .ac-title{color:#7a2f0f}
.alert-card.alert-bg-orange .ac-label{color:#5a1f0b}
.alert-card.alert-bg-azzurro .ac-title{color:#0f5f6f}
.alert-card.alert-bg-azzurro .ac-label{color:#0b4f5a}
.alert-card.alert-bg-green .ac-title{color:#0f5f2f}
.alert-card.alert-bg-green .ac-label{color:#0b4f24}

.ac-left{display:flex;flex-direction:column}
.ac-title{font-weight:700;font-size:16px}
.ac-block{text-align:center}
.ac-label{font-size:12px;color:#556068}
.ac-count{font-weight:700;font-size:18px}


/* Mobile adjustments: optimize layout and content for mobile */
@media(max-width:600px){
  /* Tiles rimangono affiancate ma più compatte */
  .alerts-tiles{
    width: 95%;
    gap: 8px;
    grid-template-columns: 22% 22% 22% 22%;
    justify-content: space-between;
    max-width: 95vw;
    margin-bottom: 16px;
  }
  
  /* Cards scorrono verticalmente su mobile */
  .alert-cards{
    width: 95%;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  
  /* Card a larghezza piena su mobile */
  .alert-card{
    width: 100% !important;
    height: auto;
    min-height: 140px;
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.4);
    margin-bottom: 8px;
  }
  
  /* Ottimizza contenuto interno delle card per mobile */
  .alert-card .alert-card-inner{
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  
  .alert-card .ac-left{
    width: 100%;
    margin-bottom: 8px;
  }
  
  .alert-card .ac-title{
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    color: #1a1a1a;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
  }
  
  .alert-card .ac-right{
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0;
  }
  
  .alert-card .ac-block{
    flex: 1;
    background: rgba(255,255,255,0.2);
    padding: 6px 10px;
    border-radius: 6px;
    backdrop-filter: blur(10px);
    text-align: center;
  }
  
  .alert-card .ac-label{
    font-size: 10px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 2px;
  }
  
  .alert-card .ac-count{
    font-size: 18px;
    font-weight: 900;
    color: #1a1a1a;
    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
  }
  
  /* Nascondi telefono su mobile per risparmiare spazio */
  .alert-card .ac-phone{
    display: none;
  }
  
  /* Ottimizza indirizzo per mobile */
  .alert-card .ac-address{
    font-size: 12px;
    color: #2d3748;
    font-weight: 500;
    line-height: 1.3;
    margin-top: 6px;
    text-shadow: 0 1px 2px rgba(255,255,255,0.6);
  }
  
  /* Ottimizza altre card per mobile */
  .map-card, .weather-card, .beaches-card, .events-card {
    width: 100%;
    margin-bottom: 12px;
    height: auto;
    min-height: 120px;
  }
  
  /* Ottimizza card meteo per mobile */
  .weather-card {
    min-height: 100px;
    padding: 12px;
  }
  
  .weather-card .weather-inner {
    font-size: 14px;
    line-height: 1.4;
  }
  
  /* Ottimizza card mappa per mobile */
  .map-card {
    min-height: 200px;
  }
  
  /* Nascondi crediti foto su mobile per risparmiare spazio */
  .photo-credits {
    display: none !important;
  }
  
  /* Riduci padding generale su mobile */
  .content {
    padding: 8px;
  }
  
  /* Ottimizza header per mobile */
  .topbar {
    padding: 8px 12px;
  }
  
  .app-title {
    font-size: 18px;
  }
  
  /* Ottimizza tabbar per mobile */
  .tabbar {
    padding: 8px;
  }
  
  .tab {
    font-size: 12px;
    padding: 8px 4px;
  }
  
  .tab-icon {
    width: 16px;
    height: 16px;
  }
}

/* Keep hospital title compact: allow more lines on mobile for better readability */
.alert-card .ac-title{
  display: -webkit-box;
  -webkit-line-clamp: 3; /* allow up to 3 lines for better readability */
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* Language Dropdown Styles */
.language-dropdown {
  position: relative;
  display: inline-block;
  margin-right: 12px;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 13px;
  font-weight: 500;
  color: white;
  backdrop-filter: blur(10px);
}

.lang-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.lang-flag {
  font-size: 14px;
}

.lang-code {
  font-weight: 600;
  min-width: 20px;
}

.lang-arrow {
  font-size: 10px;
  transition: transform 0.2s ease;
}

.language-dropdown.open .lang-arrow {
  transform: rotate(180deg);
}

.lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  min-width: 180px;
  max-height: 250px;
  overflow-y: auto;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}

.language-dropdown.open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  color: #333;
}

.lang-option:last-child {
  border-bottom: none;
}

.lang-option:hover {
  background: rgba(0, 0, 0, 0.05);
}

.lang-option.active {
  background: rgba(0, 122, 255, 0.1);
  color: #007AFF;
}

.lang-name {
  font-size: 13px;
  font-weight: 500;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .lang-menu {
    right: -10px;
    min-width: 160px;
    max-height: 200px;
  }
  
  .lang-toggle {
    padding: 6px 10px;
    font-size: 12px;
  }
  
  .lang-option {
    padding: 8px 12px;
  }
  
  .lang-name {
    font-size: 12px;
  }
}

/* icon-first tiles: remove text and make icon occupy ~90% */
.tile-icon{width:100%;height:100%;border-radius:10px;display:flex;align-items:center;justify-content:center;background:transparent}
.tile-icon.large svg{width:90%;height:90%;display:block}
.alerts-tile svg{width:100%;height:100%}
/* remove any leftover text elements inside tiles */
.alerts-tile .tile-text{display:none}

/* helper classes for alert backgrounds with Liquid Glass effect - High Contrast Colors */
.alert-bg-none{background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3)}
.alert-bg-green{background:rgba(46,204,113,0.2);border:1px solid #2ecc71;box-shadow:0 4px 16px rgba(46,204,113,0.3),inset 0 1px 0 rgba(255,255,255,0.4);color:#2ecc71}
.alert-bg-yellow{background:rgba(241,196,15,0.2);border:1px solid #f1c40f;box-shadow:0 4px 16px rgba(241,196,15,0.3),inset 0 1px 0 rgba(255,255,255,0.4);color:#f1c40f}
.alert-bg-orange{background:rgba(243,156,18,0.2);border:1px solid #f39c12;box-shadow:0 4px 16px rgba(243,156,18,0.3),inset 0 1px 0 rgba(255,255,255,0.4);color:#f39c12}
.alert-bg-red{background:rgba(231,76,60,0.2);border:1px solid #e74c3c;box-shadow:0 4px 16px rgba(231,76,60,0.3),inset 0 1px 0 rgba(255,255,255,0.4);color:#e74c3c}
/* Azzurro (used for 'azzurro' severity) */
.alert-bg-azzurro{background:rgba(52,152,219,0.2);border:1px solid #3498db;box-shadow:0 4px 16px rgba(52,152,219,0.3),inset 0 1px 0 rgba(255,255,255,0.4);color:#3498db}

/* Liquid Glass hover effects for tiles - Updated with high contrast colors */
.alerts-tile:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 8px 24px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.5)}
.alerts-tile.alert-bg-green:hover{box-shadow:0 8px 24px rgba(46,204,113,0.4),inset 0 1px 0 rgba(255,255,255,0.5)}
.alerts-tile.alert-bg-yellow:hover{box-shadow:0 8px 24px rgba(241,196,15,0.4),inset 0 1px 0 rgba(255,255,255,0.5)}
.alerts-tile.alert-bg-orange:hover{box-shadow:0 8px 24px rgba(243,156,18,0.4),inset 0 1px 0 rgba(255,255,255,0.5)}
.alerts-tile.alert-bg-red:hover{box-shadow:0 8px 24px rgba(231,76,60,0.4),inset 0 1px 0 rgba(255,255,255,0.5)}
.alerts-tile.alert-bg-azzurro:hover{box-shadow:0 8px 24px rgba(52,152,219,0.4),inset 0 1px 0 rgba(255,255,255,0.5)}

/* icon color helpers use currentColor so svgs inherit - Updated with high contrast colors */
.tile-icon--green{color:#2ecc71}
.tile-icon--yellow{color:#f1c40f}
.tile-icon--orange{color:#f39c12}
.tile-icon--red{color:#e74c3c}

/* Ensure custom tile SVGs use stroke/currentColor and no fill by default.
  Do NOT set `color` here so wrapper classes like `.tile-icon--orange` can
  control the icon color via inheritance. */
.tile-svg, svg.tile-svg, .tile-icon.large svg.tile-svg { stroke: currentColor; fill: none; }
.tile-default-icon path { fill: currentColor }

/* default tile icon state before backend loads */
.alerts-tile.default-green{background:linear-gradient(180deg,#E6F4EA,#E6F4EA)}
.content {
  /* enable animated transitions when swapping pages */
  position:relative;
  transition: none;
}
.content.fade-out {
  opacity: 0;
  transform: translateX(var(--slide-out, -12%));
}
.content.fade-in {
  opacity: 1;
  transform: translateX(0%);
}
.content[data-dir="left"] {
  transform-origin: left center;
  --slide-out: -12%;
}
.content[data-dir="right"] {
  transform-origin: right center;
  --slide-out: 12%;
}
.content.animate {
  transition: opacity 220ms cubic-bezier(.2,.9,.2,1), transform 260ms cubic-bezier(.2,.9,.2,1);
}
/* ensure new content enters from the opposite side for a natural slide */
.content.fade-in[data-dir="left"]{ transform: translateX(12%); }
.content.fade-in[data-dir="right"]{ transform: translateX(-12%); }
.tabbar{height:var(--tabbar-h);display:flex;border-top:1px solid var(--line);background:var(--tabbar);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);position:fixed;left:0;right:0;bottom:0;z-index:40;box-shadow:0 -4px 6px rgba(0,0,0,0.07), 0 -2px 4px rgba(0,0,0,0.06);transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.tab{flex:1;border:none;background:transparent;padding:10px;font-size:16px;cursor:pointer;border-radius:12px;margin:4px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px}
.tab.active{background:var(--link);color:white;font-weight:600;box-shadow:var(--shadow-1)}
.tab:hover:not(.active){background:rgba(59,130,246,0.1);color:var(--link)}
.tab-icon{flex-shrink:0;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.tab.active .tab-icon{color:white}
.tab:hover:not(.active) .tab-icon{color:var(--link)}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
@media(min-width:768px){.app-title{font-size:20px}}

/* Background Image Constraints */
.app-root {
  /* Limita l'immagine di sfondo all'area tra header e tab */
  background-clip: content-box;
  background-origin: content-box;
  background-attachment: fixed;
}

/* Photo Credits */
.photo-credits {
  position: fixed;
  bottom: calc(var(--tabbar-h) + 8px);
  right: 8px;
  z-index: 1000;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 8px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  transition: opacity 0.3s ease;
}

.photo-credits:hover {
  opacity: 0.8;
}

.photo-credits a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-weight: 400;
}

.photo-credits a:hover {
  color: rgba(255, 255, 255, 1);
  text-decoration: underline;
}

/* Background Themes */
.theme-sunset {
  background: linear-gradient(135deg, 
    #fef3f2 0%, 
    #fde2e1 50%,
    #fecaca 100%
  );
  background-attachment: fixed;
  position: relative;
}

.theme-night {
  background: linear-gradient(135deg, 
    #f8fafc 0%, 
    #f1f5f9 50%,
    #e2e8f0 100%
  );
  background-attachment: fixed;
  position: relative;
}

.theme-day {
  background: linear-gradient(135deg, 
    #f0f9ff 0%, 
    #e0f2fe 50%,
    #bae6fd 100%
  );
  background-attachment: fixed;
  position: relative;
}

.theme-city {
  /* Mantiene il comportamento dinamico attuale */
  background: var(--bg);
}