:root {
  color-scheme: dark;
  --bg: #0d2018;
  --panel: rgba(20, 55, 41, 0.96);
  --panel-2: rgba(29, 73, 55, 0.94);
  --panel-soft: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.13);
  --text: #f4f7f3;
  --muted: #b9c9c0;
  --accent: #e6b85c;
  --accent-strong: #ffca66;
  --shadow: 0 16px 44px rgba(0,0,0,.34);
  --radius: 18px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% 15%, rgba(75, 135, 94, .18), transparent 28rem),
    linear-gradient(145deg, #0a1a14, #102a20 58%, #091711);
  color: var(--text);
  overflow: hidden;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(255, 202, 102, .72); outline-offset: 2px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.app-header {
  height: calc(68px + var(--safe-top));
  padding: var(--safe-top) 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 28, 20, .94);
  backdrop-filter: blur(16px);
  position: relative;
  z-index: 1000;
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(145deg, #345c43, #173526); font-size: 25px; box-shadow: inset 0 1px rgba(255,255,255,.14), 0 8px 20px rgba(0,0,0,.25); }
.brand h1 { font-size: clamp(17px, 2vw, 22px); line-height: 1; margin: 0 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand p { color: var(--muted); font-size: 12px; margin: 0; letter-spacing: .06em; text-transform: uppercase; }
.header-actions { display: flex; align-items: center; gap: 9px; }
.status-badge { font-size: 12px; font-weight: 700; border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px; }
.status-badge.online { background: rgba(53, 178, 101, .14); color: #a9edc1; border-color: rgba(73, 196, 119, .35); }
.status-badge.offline { background: rgba(230, 94, 78, .14); color: #ffb4aa; border-color: rgba(230, 94, 78, .35); }
.status-badge.neutral { color: var(--muted); }
.icon-button { width: 36px; height: 36px; border: 1px solid var(--line); color: var(--text); background: var(--panel-soft); border-radius: 11px; font-size: 22px; }

.app-shell {
  height: calc(100vh - 68px - var(--safe-top));
  display: grid;
  grid-template-columns: minmax(310px, 370px) minmax(440px, 1fr) minmax(270px, 340px);
  grid-template-rows: 1fr;
  gap: 0;
}
.control-panel, .results-panel {
  background: linear-gradient(180deg, rgba(18, 51, 38, .98), rgba(11, 35, 25, .98));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
}
.control-panel { padding: 18px; border-right: 1px solid var(--line); }
.results-panel { border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.control-row { display: flex; gap: 10px; align-items: end; margin-bottom: 12px; }
.primary-controls { flex-wrap: wrap; }
.secondary-controls { align-items: center; }
.grow { flex: 1 1 170px; min-width: 0; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
select, input[type="search"] {
  width: 100%;
  min-height: 44px;
  background: rgba(255,255,255,.075);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 12px;
  padding: 0 13px;
}
select option { background: #173c2c; }
.button {
  min-height: 44px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.075);
  color: var(--text);
  border-radius: 12px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 750;
  transition: transform .16s ease, background .16s ease, opacity .16s ease;
}
.button:hover { background: rgba(255,255,255,.12); }
.button:active { transform: translateY(1px); }
.button:disabled { opacity: .55; cursor: wait; }
.button.accent { background: linear-gradient(145deg, #f0c671, #dba444); color: #2b210e; border-color: rgba(255,255,255,.25); }
.button.accent:hover { background: linear-gradient(145deg, #ffd88a, #e9b557); }
.button.compact { min-width: 76px; }
.search-field { position: relative; }
.search-field input { padding-right: 42px; }
.clear-search { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 20px; }

.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 15px 0; }
.metric-card { min-height: 79px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.05); }
.metric-card span { display: block; min-height: 30px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.metric-card strong { display: block; margin-top: 5px; font-size: 19px; line-height: 1.1; overflow-wrap: anywhere; }
.notice { padding: 12px 13px; border-radius: 13px; border: 1px solid var(--line); font-size: 13px; line-height: 1.45; }
.notice.info { background: rgba(65, 142, 184, .12); border-color: rgba(75, 163, 209, .26); color: #cbeaff; }
.notice.success { background: rgba(53, 178, 101, .12); border-color: rgba(73, 196, 119, .3); color: #c3f5d4; }
.notice.warning { background: rgba(230, 184, 92, .12); border-color: rgba(230, 184, 92, .3); color: #ffe4aa; }
.notice.error { background: rgba(230, 94, 78, .13); border-color: rgba(230, 94, 78, .35); color: #ffc1b9; }

.map-region { position: relative; min-width: 0; min-height: 0; background: #d9e2dc; }
#map { width: 100%; height: 100%; z-index: 1; }
.loading-overlay { position: absolute; inset: 0; z-index: 900; display: grid; place-content: center; justify-items: center; gap: 13px; background: rgba(9, 28, 20, .68); backdrop-filter: blur(7px); text-align: center; padding: 20px; }
.loading-overlay.hidden { display: none; }
.loader { width: 42px; height: 42px; border-radius: 50%; border: 4px solid rgba(255,255,255,.18); border-top-color: var(--accent); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.map-legend { position: absolute; z-index: 500; left: 10px; bottom: 18px; display: flex; flex-wrap: wrap; gap: 7px 10px; max-width: calc(100% - 20px); padding: 9px 11px; border-radius: 12px; background: rgba(10, 31, 23, .88); color: white; box-shadow: 0 8px 26px rgba(0,0,0,.24); backdrop-filter: blur(8px); font-size: 11px; pointer-events: none; }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid rgba(255,255,255,.7); }
.very-low { background: #b72f36; }
.low { background: #e67e32; }
.medium { background: #e9c94a; }
.good { background: #6fc56a; }
.excellent { background: #19894f; }
.missing { background: #78857f; }

.station-marker { background: transparent; border: 0; }
.station-dot { width: 26px; height: 26px; border-radius: 50% 50% 50% 15%; transform: rotate(-45deg); display: grid; place-items: center; border: 2px solid rgba(255,255,255,.95); box-shadow: 0 3px 12px rgba(0,0,0,.38); }
.station-dot span { transform: rotate(45deg); color: white; font-weight: 900; font-size: 9px; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
.station-dot.very-low { background: #b72f36; }
.station-dot.low { background: #e67e32; }
.station-dot.medium { background: #d8b92e; }
.station-dot.good { background: #5eae59; }
.station-dot.excellent { background: #19894f; }
.station-dot.missing { background: #6c7973; }


.panel-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 13px 13px 0; gap: 7px; }
.tab { border: 1px solid var(--line); border-radius: 11px; min-height: 40px; background: rgba(255,255,255,.045); color: var(--muted); font-weight: 750; }
.tab.active { background: rgba(230, 184, 92, .14); color: #ffdd96; border-color: rgba(230,184,92,.34); }
.results-summary { padding: 13px 16px 8px; color: var(--muted); font-size: 13px; }
.results-list { overflow-y: auto; padding: 0 12px 14px; flex: 1; min-height: 120px; }
.result-card { width: 100%; border: 1px solid var(--line); background: rgba(255,255,255,.047); color: var(--text); border-radius: 14px; padding: 11px; margin: 7px 0; text-align: left; display: grid; grid-template-columns: 44px 1fr; gap: 10px; transition: background .15s ease, border-color .15s ease; }
.result-card:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.24); }
.score-orb { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: white; font-size: 13px; font-weight: 900; border: 2px solid rgba(255,255,255,.82); }
.result-main { min-width: 0; }
.result-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.result-title strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.result-title em { font-size: 11px; color: var(--accent-strong); font-style: normal; white-space: nowrap; }
.result-meta { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.result-activity { display: inline-flex; width: fit-content; margin-top: 6px; padding: 4px 7px; border-radius: 999px; background: rgba(230,184,92,.12); border: 1px solid rgba(230,184,92,.22); color: #ffe0a0; font-size: 10px; font-weight: 800; }
.result-data { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 7px; font-size: 11px; color: #dce9e1; }
.panel-footer { border-top: 1px solid var(--line); padding: 13px 15px calc(13px + var(--safe-bottom)); font-size: 11px; line-height: 1.45; color: var(--muted); }
.panel-footer p { margin: 3px 0; }

.station-dialog { width: min(560px, calc(100vw - 24px)); max-height: min(820px, calc(100vh - 24px)); overflow: auto; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; background: #143729; color: var(--text); box-shadow: 0 25px 80px rgba(0,0,0,.5); }
.station-dialog::backdrop { background: rgba(0,0,0,.58); backdrop-filter: blur(4px); }
.dialog-close { position: sticky; top: 10px; float: right; margin: 10px 10px 0 0; z-index: 2; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 11px; background: rgba(4,20,13,.8); color: white; font-size: 22px; }
.station-content { padding: 22px; }
.station-heading { padding-right: 42px; }
.station-heading h2 { margin: 0 0 5px; font-size: 24px; }
.station-heading p { margin: 0; color: var(--muted); }
.score-hero { display: grid; grid-template-columns: 104px 1fr; gap: 18px; align-items: center; margin: 20px 0; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.055); border: 1px solid var(--line); }
.score-ring { width: 100px; height: 100px; border-radius: 50%; display: grid; place-items: center; border: 7px solid rgba(255,255,255,.76); box-shadow: inset 0 0 0 5px rgba(0,0,0,.1); }
.score-ring strong { font-size: 31px; }
.score-description h3 { margin: 0 0 5px; }
.score-description p { margin: 3px 0; color: var(--muted); font-size: 13px; }
.data-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.data-item { border: 1px solid var(--line); background: rgba(255,255,255,.045); border-radius: 13px; padding: 11px; }
.data-item span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.data-item strong { display: block; margin-top: 5px; font-size: 17px; }
.reason-section { margin-top: 17px; }
.reason-section h3 { font-size: 15px; margin: 0 0 8px; }
.reason-list { display: grid; gap: 7px; }
.reason { padding: 9px 10px; border-radius: 11px; border: 1px solid var(--line); font-size: 13px; }
.reason.positive { background: rgba(60, 166, 94, .12); }
.reason.negative { background: rgba(218, 108, 69, .12); }
.reason.missing { background: rgba(130, 143, 137, .12); color: var(--muted); }
.disclaimer { margin-top: 17px; padding: 11px; background: rgba(230,184,92,.1); border: 1px solid rgba(230,184,92,.25); border-radius: 12px; color: #ffe7b3; font-size: 12px; line-height: 1.45; }

.toast { position: fixed; z-index: 3000; left: 50%; bottom: calc(22px + var(--safe-bottom)); transform: translate(-50%, 20px); min-width: min(430px, calc(100vw - 28px)); max-width: 600px; padding: 12px 15px; border-radius: 13px; background: rgba(8, 28, 20, .96); border: 1px solid var(--line); box-shadow: var(--shadow); color: white; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.leaflet-control-layers, .leaflet-bar { border: 0 !important; box-shadow: 0 5px 18px rgba(0,0,0,.25) !important; }
.leaflet-control-layers, .leaflet-bar a { color: #173a2b !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #163c2c; color: white; }
.leaflet-popup-content { margin: 12px 14px; }
.popup-title { font-weight: 850; margin-bottom: 3px; }
.popup-meta { color: #c6d4cc; font-size: 12px; margin-bottom: 8px; }
.popup-score { font-size: 18px; font-weight: 900; margin-bottom: 7px; }
.popup-activity { display: inline-flex; margin: 0 0 8px; padding: 4px 7px; border-radius: 999px; background: rgba(230,184,92,.14); color: #ffe0a0; font-size: 11px; font-weight: 850; }
.popup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: 12px; }
.popup-button { width: 100%; margin-top: 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; background: rgba(255,255,255,.1); color: white; min-height: 34px; }

@media (max-width: 1060px) {
  body { overflow: auto; }
  .app-shell { height: auto; min-height: calc(100vh - 68px - var(--safe-top)); grid-template-columns: 320px minmax(0,1fr); grid-template-rows: minmax(620px, calc(100vh - 68px - var(--safe-top))) auto; }
  .results-panel { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); max-height: 500px; }
}

@media (max-width: 720px) {
  body { overflow: auto; }
  .app-header { padding-left: 12px; padding-right: 12px; }
  .status-badge { max-width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .app-shell { display: block; height: auto; }
  .control-panel { border-right: 0; padding: 13px; }
  .primary-controls .field { flex-basis: 100%; }
  .primary-controls .button { flex: 1 1 calc(50% - 5px); }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .map-region { height: 62vh; min-height: 470px; }
  .results-panel { max-height: none; border-top: 1px solid var(--line); }
  .results-list { max-height: 520px; }
  .map-legend { bottom: 10px; }
  .score-hero { grid-template-columns: 84px 1fr; }
  .score-ring { width: 82px; height: 82px; }
  .score-ring strong { font-size: 26px; }
}

@media (max-width: 420px) {
  .brand p { display: none; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 65px; }
  .metric-card span { min-height: 0; }
  .data-grid { grid-template-columns: 1fr; }
  .button span:last-child { font-size: 12px; }
}

/* TEM 1.1: tutte le centraline restano punti individuali, senza clustering. */
.leaflet-interactive { cursor: pointer; }
.data-item small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.35; }

/* Navigazione tra mappa, previsioni e Atlante dei funghi */
.view-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
}
.view-nav-button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.view-nav-button:hover { color: var(--text); background: rgba(255,255,255,.07); }
.view-nav-button.active {
  color: #2c210d;
  background: linear-gradient(145deg, #f1ca79, #dca94c);
  box-shadow: 0 5px 15px rgba(0,0,0,.22);
}
.view-nav-button:active { transform: translateY(1px); }

.atlas-view {
  height: calc(100vh - 68px - var(--safe-top));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px clamp(14px, 3vw, 38px) calc(34px + var(--safe-bottom));
  background:
    radial-gradient(circle at 88% 8%, rgba(230,184,92,.14), transparent 25rem),
    radial-gradient(circle at 8% 35%, rgba(67,144,91,.13), transparent 28rem),
    linear-gradient(155deg, #0b1e16, #123326 56%, #0a1b14);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.24) transparent;
}
.atlas-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 320px);
  align-items: center;
  gap: 24px;
  min-height: 238px;
  overflow: hidden;
  padding: clamp(23px, 4vw, 46px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 26px;
  background:
    radial-gradient(circle at 82% 45%, rgba(255,215,132,.16), transparent 18rem),
    linear-gradient(130deg, rgba(37,91,62,.97), rgba(18,55,39,.98) 58%, rgba(11,38,27,.98));
  box-shadow: 0 18px 52px rgba(0,0,0,.28);
}
.atlas-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 120%, transparent 0 44%, rgba(255,255,255,.035) 45% 46%, transparent 47%),
    radial-gradient(circle at 88% -20%, transparent 0 38%, rgba(255,255,255,.04) 39% 40%, transparent 41%);
}
.atlas-hero-copy { position: relative; z-index: 1; max-width: 760px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255,221,150,.28);
  border-radius: 999px;
  background: rgba(230,184,92,.12);
  color: #ffe0a0;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.atlas-hero h2 { margin: 14px 0 10px; max-width: 780px; font-size: clamp(27px, 4vw, 48px); line-height: 1.02; letter-spacing: -.035em; }
.atlas-hero p { margin: 0; max-width: 710px; color: #d3e2d9; font-size: clamp(14px, 1.6vw, 17px); line-height: 1.6; }
.atlas-source-line { display: flex; align-items: center; gap: 7px; margin-top: 18px; color: #ffda8d; font-size: 13px; }
.atlas-source-line a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,218,141,.34); }
.atlas-source-line a:hover { border-color: currentColor; }
.atlas-home-source-button {
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid rgba(255,218,141,.34);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.atlas-home-source-button:hover,
.atlas-home-source-button:focus-visible { border-color: currentColor; outline: none; }
.atlas-hero-art { position: relative; min-height: 180px; z-index: 1; }
.hero-mushroom { position: absolute; filter: drop-shadow(0 18px 18px rgba(0,0,0,.28)); user-select: none; }
.hero-mushroom-one { right: 58px; top: 7px; font-size: clamp(75px, 10vw, 124px); transform: rotate(8deg); }
.hero-mushroom-two { right: 4px; bottom: -9px; font-size: clamp(54px, 8vw, 92px); transform: rotate(-10deg); }
.hero-leaf { position: absolute; left: 5px; bottom: -14px; color: rgba(255,225,165,.35); font-size: 150px; line-height: 1; transform: rotate(-20deg); }

.atlas-safety {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  margin: 15px 0;
  padding: 13px 16px;
  border: 1px solid rgba(231,151,74,.36);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(177,74,46,.17), rgba(218,156,61,.11));
  color: #ffe1b3;
  font-size: 13px;
  line-height: 1.45;
}
.atlas-safety strong::before { content: "⚠ "; }
.atlas-safety span { color: #f1d7b4; }

.atlas-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(140px, .72fr)) auto;
  gap: 10px;
  align-items: end;
  margin-top: 18px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(17,49,36,.86);
  backdrop-filter: blur(12px);
}
.atlas-search { display: grid; gap: 6px; }
.atlas-search > span { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.atlas-input-wrap { position: relative; }
.atlas-input-wrap > span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--accent-strong); font-size: 20px; pointer-events: none; }
.atlas-input-wrap input { padding-left: 41px; padding-right: 40px; }
.atlas-clear { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 20px; }
.atlas-filter { min-width: 0; }
.atlas-refresh { white-space: nowrap; }

.atlas-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin: 14px 0;
}
.atlas-metric {
  min-height: 84px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.035));
}
.atlas-metric span { display: block; color: var(--muted); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.atlas-metric strong { display: block; margin-top: 9px; font-size: 22px; overflow-wrap: anywhere; }
.atlas-results-summary { margin: 18px 1px 10px; color: #d7e5dc; font-size: 14px; font-weight: 750; }

.atlas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.mushroom-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 19px;
  background: linear-gradient(160deg, rgba(31,72,54,.96), rgba(16,45,33,.98));
  box-shadow: 0 13px 30px rgba(0,0,0,.2);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mushroom-card:hover { transform: translateY(-3px); border-color: rgba(255,211,126,.34); box-shadow: 0 18px 36px rgba(0,0,0,.29); }
.mushroom-image-wrap { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: radial-gradient(circle at 50% 35%, #315c44, #173a2a 64%, #10291e); }
.mushroom-image-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease; }
.mushroom-card:hover .mushroom-image-wrap img { transform: scale(1.035); }
.mushroom-image-fallback { position: absolute; inset: 0; display: none; place-content: center; justify-items: center; gap: 7px; color: var(--muted); text-align: center; }
.mushroom-image-fallback span { font-size: 54px; filter: drop-shadow(0 10px 12px rgba(0,0,0,.25)); }
.mushroom-image-fallback small { font-size: 11px; }
.mushroom-image-wrap.image-failed img { display: none; }
.mushroom-image-wrap.image-failed .mushroom-image-fallback { display: grid; }
.mushroom-letter { position: absolute; top: 10px; left: 10px; width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 10px; background: rgba(7,28,19,.76); backdrop-filter: blur(7px); color: white; font-size: 13px; font-weight: 900; }
.mushroom-card-body { padding: 14px; }
.edibility-badge { display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }
.edibility-badge.commestibile { color: #b8f5c8; background: rgba(50,175,91,.15); border-color: rgba(71,203,115,.32); }
.edibility-badge.non-commestibile { color: #e6d5ac; background: rgba(155,128,74,.17); border-color: rgba(191,157,89,.33); }
.edibility-badge.tossico { color: #ffd0a9; background: rgba(212,105,55,.17); border-color: rgba(229,126,75,.37); }
.edibility-badge.mortale { color: #ffc2c6; background: rgba(185,48,59,.2); border-color: rgba(221,73,83,.42); }
.edibility-badge.sospetto { color: #f6dd9a; background: rgba(197,156,55,.16); border-color: rgba(226,183,72,.34); }
.edibility-badge.non-indicata { color: #cfddd5; background: rgba(123,145,133,.13); border-color: rgba(160,180,169,.25); }
.mushroom-card h3 { margin: 10px 0 5px; font-size: 18px; line-height: 1.2; overflow-wrap: anywhere; }
.scientific-name { min-height: 34px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.mushroom-description { margin: 9px 0 0; color: #d5e3da; font-size: 12px; line-height: 1.5; }
.mushroom-description-box { margin: 14px 0; padding: 13px 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; background: rgba(255,255,255,.045); color: #dce9e1; font-size: 13px; line-height: 1.6; }
.mushroom-card-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-top: 13px; }
.mushroom-detail-button { min-height: 37px; border: 1px solid rgba(255,214,132,.26); border-radius: 10px; background: rgba(230,184,92,.12); color: #ffdc96; font-weight: 800; }
.mushroom-card-actions a { color: #c4d7cb; font-size: 11px; text-decoration: none; }
.mushroom-card-actions a:hover { color: white; text-decoration: underline; }

.atlas-load-more-wrap { display: grid; place-items: center; margin: 20px 0 6px; }
.atlas-load-more-wrap .button { min-width: 230px; }
.atlas-footer { margin-top: 23px; padding: 17px 2px 3px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.55; }
.atlas-footer p { margin: 4px 0; }
.atlas-empty { grid-column: 1 / -1; min-height: 230px; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 30px; border: 1px dashed rgba(255,255,255,.2); border-radius: 18px; color: var(--muted); text-align: center; }
.atlas-empty > span { font-size: 46px; }
.atlas-empty strong { color: var(--text); font-size: 18px; }
.atlas-empty p { margin: 0; }
.atlas-empty a { color: #ffdc96; }
.mushroom-skeleton { aspect-ratio: 4 / 4.4; border-radius: 19px; border: 1px solid var(--line); background: linear-gradient(110deg, rgba(255,255,255,.035) 30%, rgba(255,255,255,.10) 45%, rgba(255,255,255,.035) 60%); background-size: 260% 100%; animation: atlas-shimmer 1.3s linear infinite; }
@keyframes atlas-shimmer { to { background-position-x: -160%; } }

.mushroom-dialog { width: min(780px, calc(100vw - 24px)); }
.mushroom-content { display: grid; grid-template-columns: minmax(220px, .85fr) minmax(0, 1.15fr); min-height: 440px; }
.mushroom-dialog-media { min-height: 100%; background: radial-gradient(circle at 50% 35%, #35634a, #173b2b 62%, #0c271b); overflow: hidden; }
.mushroom-dialog-image { width: 100%; height: 100%; min-height: 440px; display: block; object-fit: cover; }
.mushroom-dialog-placeholder { width: 100%; min-height: 440px; display: grid; place-items: center; font-size: 92px; }
.mushroom-dialog-copy { padding: 30px 26px 26px; }
.mushroom-dialog-copy h2 { margin: 12px 42px 5px 0; font-size: clamp(24px, 4vw, 35px); line-height: 1.05; }
.mushroom-latin { margin: 0 0 20px; color: var(--muted); font-size: 16px; }
.mushroom-data-grid { margin-top: 12px; }
.source-card-link { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 45px; margin-top: 16px; border: 1px solid rgba(255,214,132,.32); border-radius: 12px; background: linear-gradient(145deg, #f0c671, #dba444); color: #2b210e; font-weight: 850; text-decoration: none; }

@media (max-width: 980px) {
  .app-header { gap: 10px; }
  .brand { flex: 1 1 auto; }
  .view-nav-button { padding: 0 10px; }
  .atlas-toolbar { grid-template-columns: minmax(230px, 1.5fr) repeat(2, minmax(140px, .7fr)); }
  .atlas-filter:nth-of-type(4) { grid-column: 1 / 2; }
  .atlas-refresh { grid-column: 2 / 4; }
}

@media (max-width: 720px) {
  .app-header { height: calc(116px + var(--safe-top)); align-items: flex-start; flex-wrap: wrap; padding-top: calc(var(--safe-top) + 10px); padding-bottom: 9px; }
  .brand { min-height: 42px; }
  .view-nav { order: 3; width: 100%; }
  .view-nav-button { flex: 1; justify-content: center; }
  .header-actions { margin-top: 3px; }
  .app-shell { min-height: calc(100vh - 116px - var(--safe-top)); }
  .atlas-view { height: calc(100vh - 116px - var(--safe-top)); padding: 13px 12px calc(26px + var(--safe-bottom)); }
  .atlas-hero { grid-template-columns: 1fr; min-height: 0; padding: 24px 20px; }
  .atlas-hero-art { display: none; }
  .atlas-hero h2 { font-size: 31px; }
  .atlas-toolbar { grid-template-columns: 1fr 1fr; padding: 12px; }
  .atlas-search { grid-column: 1 / -1; }
  .atlas-filter:nth-of-type(4) { grid-column: auto; }
  .atlas-refresh { grid-column: 1 / -1; }
  .atlas-metrics { grid-template-columns: 1fr 1fr; }
  .atlas-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
  .mushroom-content { grid-template-columns: 1fr; }
  .mushroom-dialog-media { min-height: 260px; max-height: 330px; }
  .mushroom-dialog-image, .mushroom-dialog-placeholder { min-height: 260px; height: 100%; max-height: 330px; }
}

@media (max-width: 460px) {
  .brand-mark { width: 38px; height: 38px; }
  .brand h1 { font-size: 17px; }
  .header-actions .status-badge { display: none; }
  .atlas-toolbar { grid-template-columns: 1fr; }
  .atlas-search, .atlas-refresh { grid-column: auto; }
  .atlas-metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .atlas-metric { min-height: 76px; padding: 12px; }
  .atlas-metric strong { font-size: 18px; }
  .atlas-grid { grid-template-columns: 1fr; }
  .mushroom-card-actions { grid-template-columns: 1fr; }
  .mushroom-card-actions a { text-align: center; padding: 6px 0; }
  .mushroom-dialog-copy { padding: 23px 18px 20px; }
}

/* TEM 1.4 — previsioni delle nascite e navigazione Atlante */
.forecast-view {
  height: calc(100vh - 68px - var(--safe-top));
  overflow-y: auto;
  padding: 20px clamp(14px, 3vw, 34px) calc(30px + var(--safe-bottom));
  background:
    radial-gradient(circle at 88% 8%, rgba(83, 144, 103, .2), transparent 28rem),
    linear-gradient(155deg, #0a1c14, #123426 55%, #0b2017);
}
.forecast-hero {
  position: relative;
  min-height: 190px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 85% 30%, rgba(230,184,92,.18), transparent 18rem),
    linear-gradient(145deg, rgba(30,76,56,.98), rgba(12,43,30,.98));
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
}
.forecast-hero h2 { margin: 13px 0 10px; max-width: 900px; font-size: clamp(27px, 4vw, 46px); line-height: 1.04; letter-spacing: -.035em; }
.forecast-hero p { max-width: 840px; margin: 0; color: #d1e1d8; font-size: 15px; line-height: 1.6; }
.forecast-hero-symbol { white-space: nowrap; font-size: clamp(46px, 8vw, 92px); filter: drop-shadow(0 14px 20px rgba(0,0,0,.25)); }
.forecast-toolbar {
  display: grid;
  grid-template-columns: minmax(190px,.75fr) minmax(260px,1.35fr) minmax(190px,.8fr) auto;
  align-items: end;
  gap: 10px;
  margin-top: 17px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(17,49,36,.88);
  backdrop-filter: blur(12px);
}
.forecast-search { display: grid; gap: 6px; }
.forecast-search > span { font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.forecast-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin: 14px 0;
}
.forecast-metric {
  min-height: 86px;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.035));
}
.forecast-metric span { display: block; color: var(--muted); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.forecast-metric strong { display: block; margin-top: 9px; font-size: 22px; overflow-wrap: anywhere; }
.forecast-warning { margin: 8px 0 16px; }
.forecast-results-summary { margin: 18px 1px 11px; color: #d8e6de; font-size: 14px; font-weight: 760; }
.forecast-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.forecast-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 19px;
  background: linear-gradient(155deg, rgba(30,71,53,.97), rgba(15,43,31,.98));
  box-shadow: 0 13px 30px rgba(0,0,0,.2);
}
.forecast-card-header { display: grid; grid-template-columns: minmax(0,1fr) 66px; gap: 14px; align-items: start; }
.forecast-card-title { min-width: 0; }
.forecast-card-title h3 { margin: 9px 0 4px; font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; }
.forecast-card-title p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.forecast-phase { display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }
.forecast-phase.rising, .forecast-phase.peak { color: #bdf3ca; background: rgba(50,175,91,.16); border-color: rgba(71,203,115,.34); }
.forecast-phase.active { color: #d5f0c9; background: rgba(104,170,73,.14); border-color: rgba(135,196,101,.31); }
.forecast-phase.activation { color: #ffe3a4; background: rgba(215,164,55,.15); border-color: rgba(232,188,76,.32); }
.forecast-phase.falling { color: #ffd0a9; background: rgba(212,105,55,.16); border-color: rgba(229,126,75,.34); }
.forecast-phase.saturated { color: #cae7ff; background: rgba(63,134,184,.17); border-color: rgba(86,161,210,.34); }
.forecast-phase.inactive, .forecast-phase.missing { color: #d0ddd6; background: rgba(123,145,133,.13); border-color: rgba(160,180,169,.25); }
.forecast-score { width: 66px; height: 66px; display: grid; place-content: center; justify-items: center; border-radius: 50%; border: 3px solid rgba(255,255,255,.8); color: white; box-shadow: inset 0 0 0 3px rgba(0,0,0,.1); }
.forecast-score strong { font-size: 22px; line-height: 1; }
.forecast-score span { max-width: 54px; font-size: 8px; line-height: 1.1; margin-top: 2px; text-align: center; }
.forecast-data-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 15px; }
.forecast-data-row > div { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.04); }
.forecast-data-row span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.forecast-data-row strong { display: block; margin-top: 5px; font-size: 14px; overflow-wrap: anywhere; }
.forecast-curve { height: 128px; display: grid; grid-template-columns: repeat(8, minmax(42px, 1fr)); gap: 7px; align-items: end; margin-top: 15px; padding: 10px 9px 6px; border: 1px solid var(--line); border-radius: 14px; background: rgba(5,25,17,.28); }
.forecast-day { height: 100%; min-width: 0; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; gap: 3px; }
.forecast-bar-track { width: min(22px, 70%); height: 80px; display: flex; align-items: flex-end; overflow: hidden; border-radius: 8px 8px 4px 4px; background: rgba(255,255,255,.07); }
.forecast-bar { display: block; width: 100%; min-height: 4px; border-radius: 7px 7px 3px 3px; }
.forecast-bar.very-low { background: #b72f36; }
.forecast-bar.low { background: #e67e32; }
.forecast-bar.medium { background: #d2b52f; }
.forecast-bar.good { background: #5eae59; }
.forecast-bar.excellent { background: #19894f; }
.forecast-bar.missing { background: #6c7973; }
.forecast-day strong { font-size: 10px; }
.forecast-day small { color: var(--muted); font-size: 9px; white-space: nowrap; }
.forecast-day.horizon { padding: 3px 2px; border-radius: 9px; background: rgba(255, 218, 135, .10); outline: 1px solid rgba(255, 218, 135, .42); }
.forecast-day.horizon strong { color: #ffe0a0; font-size: 9px; }
.forecast-card-bottom { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; margin-top: 13px; }
.forecast-card-bottom p { margin: 0; color: #d0dfd6; font-size: 11px; line-height: 1.5; }
.forecast-detail-button { min-height: 37px; padding: 0 11px; border: 1px solid rgba(255,214,132,.28); border-radius: 10px; background: rgba(230,184,92,.12); color: #ffdc96; font-weight: 800; white-space: nowrap; }
.forecast-empty { grid-column: 1 / -1; min-height: 240px; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 30px; border: 1px dashed rgba(255,255,255,.2); border-radius: 18px; color: var(--muted); text-align: center; }
.forecast-empty > span { font-size: 48px; }
.forecast-empty strong { color: var(--text); font-size: 18px; }
.forecast-empty p { margin: 0; }
.forecast-footer { margin-top: 22px; padding: 16px 2px 3px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.55; }
.dialog-back { position: sticky; top: 10px; z-index: 3; min-height: 36px; margin: 10px 0 0 10px; padding: 0 12px; border: 1px solid rgba(255,214,132,.3); border-radius: 11px; background: rgba(6,28,18,.9); color: #ffdc96; font-weight: 850; }
.station-return-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; margin: 0 0 14px; padding: 0 13px; border: 1px solid rgba(255,214,132,.34); border-radius: 11px; background: rgba(230,184,92,.12); color: #ffdc96; font-weight: 850; }
.station-return-button:hover { background: rgba(230,184,92,.2); }

@media (max-width: 980px) {
  .forecast-toolbar { grid-template-columns: 1fr 1fr; }
  .forecast-toolbar .button { grid-column: 1 / -1; }
  .forecast-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

@media (max-width: 720px) {
  .forecast-view { height: calc(100vh - 116px - var(--safe-top)); padding: 13px 12px calc(26px + var(--safe-bottom)); }
  .forecast-hero { grid-template-columns: 1fr; min-height: 0; padding: 24px 20px; }
  .forecast-hero-symbol { display: none; }
  .forecast-hero h2 { font-size: 30px; }
  .forecast-metrics { grid-template-columns: 1fr 1fr; }
  .forecast-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .view-nav-button { padding: 0 8px; font-size: 12px; }
  .forecast-toolbar { grid-template-columns: 1fr; padding: 12px; }
  .forecast-toolbar .button { grid-column: auto; }
  .forecast-data-row { grid-template-columns: 1fr; }
  .forecast-card-bottom { grid-template-columns: 1fr; }
  .forecast-detail-button { width: 100%; }
  .forecast-metrics { gap: 8px; }
  .forecast-metric { min-height: 78px; padding: 12px; }
  .forecast-metric strong { font-size: 18px; }
}

/* TEM 1.5 — previsione 5/15/30, doppia mappa e interfaccia mobile */
.forecast-toolbar {
  grid-template-columns: minmax(260px, 1.45fr) minmax(190px, .75fr) auto auto;
}
.forecast-map-section {
  margin: 17px 0 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  background: rgba(14,43,31,.9);
}
.forecast-map-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 17px;
  border-bottom: 1px solid var(--line);
}
.forecast-map-heading h3 { margin: 9px 0 4px; font-size: 20px; }
.forecast-map-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.forecast-map-wrap { position: relative; height: clamp(430px, 55vh, 650px); background: #d9e2dc; }
#forecastMap { width: 100%; height: 100%; z-index: 1; }
.forecast-map-legend { bottom: 12px; }
.popup-rain-context {
  margin-top: 9px;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: #dbe8e0;
  font-size: 11px;
  line-height: 1.35;
}
.forecast-rain-context {
  margin-top: 13px;
  padding: 9px 11px;
  border: 1px solid rgba(230,184,92,.25);
  border-radius: 11px;
  background: rgba(230,184,92,.09);
  color: #ffe1a4;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
}
.forecast-data-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.forecast-top-button {
  display: none;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid rgba(255,214,132,.34);
  border-radius: 999px;
  background: rgba(8,35,24,.94);
  color: #ffdc96;
  box-shadow: 0 10px 28px rgba(0,0,0,.3);
  font-weight: 850;
}

@media (max-width: 980px) {
  .forecast-toolbar { grid-template-columns: 1fr 1fr; }
  .forecast-search { grid-column: 1 / -1; }
  .forecast-toolbar .button { grid-column: 1 / -1; }
  .forecast-data-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  html { scroll-behavior: smooth; }
  body {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .app-header {
    position: sticky;
    top: 0;
    z-index: 1400;
    height: calc(108px + var(--safe-top));
    padding-top: calc(var(--safe-top) + 8px);
    padding-bottom: 7px;
  }
  .view-nav { gap: 3px; padding: 3px; }
  .view-nav-button { min-height: 38px; padding: 0 7px; font-size: 12px; }
  .app-shell { min-height: calc(100vh - 108px - var(--safe-top)); }
  .control-row { gap: 8px; }
  .primary-controls .button { min-height: 48px; }
  .secondary-controls { flex-wrap: wrap; }
  .secondary-controls .search-field { flex-basis: 100%; }
  .secondary-controls .button { flex: 1; min-height: 46px; }
  select, input[type="search"], .button { min-height: 48px; }
  .map-region { height: 56vh; min-height: 410px; }
  .results-panel { max-height: none; overflow: visible; }
  .results-list { max-height: none; overflow: visible; touch-action: pan-y; }
  .result-card { padding: 12px; margin: 8px 0; }

  .forecast-view,
  .atlas-view {
    height: auto;
    min-height: calc(100vh - 108px - var(--safe-top));
    overflow: visible;
    overscroll-behavior: auto;
    padding: 12px 10px calc(86px + var(--safe-bottom));
  }
  .forecast-hero, .atlas-hero { border-radius: 19px; padding: 21px 17px; }
  .forecast-hero h2 { font-size: 27px; line-height: 1.08; }
  .forecast-hero p { font-size: 14px; line-height: 1.55; }
  .forecast-toolbar { grid-template-columns: 1fr; padding: 11px; border-radius: 15px; }
  .forecast-search, .forecast-toolbar .button { grid-column: auto; }
  .forecast-metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .forecast-metric { min-height: 76px; padding: 11px; }
  .forecast-metric span { font-size: 10px; }
  .forecast-metric strong { font-size: 18px; }
  .forecast-map-section { margin: 13px 0 17px; border-radius: 17px; }
  .forecast-map-heading { align-items: stretch; flex-direction: column; gap: 12px; padding: 14px; }
  .forecast-map-heading .button { width: 100%; }
  .forecast-map-wrap { height: 56vh; min-height: 390px; max-height: 540px; }
  .forecast-map-legend { left: 7px; bottom: 7px; max-width: calc(100% - 14px); padding: 7px 8px; gap: 5px 8px; font-size: 10px; }
  .forecast-grid { gap: 10px; touch-action: pan-y; }
  .forecast-card { padding: 14px; border-radius: 16px; }
  .forecast-card-header { grid-template-columns: minmax(0,1fr) 58px; gap: 10px; }
  .forecast-score { width: 58px; height: 58px; }
  .forecast-score strong { font-size: 19px; }
  .forecast-card-title h3 { font-size: 18px; }
  .forecast-data-row { grid-template-columns: 1fr 1fr; gap: 7px; }
  .forecast-data-row > div { padding: 9px; }
  .forecast-data-row > div:nth-child(3) { grid-column: 1 / -1; }
  .forecast-card-bottom { grid-template-columns: 1fr; }
  .forecast-detail-button { width: 100%; min-height: 44px; }
  .forecast-top-button {
    display: inline-flex;
    position: fixed;
    z-index: 1300;
    right: 13px;
    bottom: calc(15px + var(--safe-bottom));
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .atlas-grid { grid-template-columns: 1fr; }
  .atlas-toolbar { grid-template-columns: 1fr; }
  .atlas-search, .atlas-refresh { grid-column: auto; }
  .station-dialog { width: calc(100vw - 14px); max-height: calc(100dvh - 14px); border-radius: 16px; }
}

@media (max-width: 430px) {
  .brand-mark { display: none; }
  .brand h1 { font-size: 16px; }
  .brand p { display: block; max-width: 180px; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .header-actions { margin-left: auto; }
  .primary-controls .button { flex: 1 1 100%; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric-card { min-height: 70px; padding: 10px; }
  .metric-card span { min-height: 25px; font-size: 9px; }
  .metric-card strong { font-size: 17px; }
  .forecast-hero h2 { font-size: 24px; }
  .forecast-metrics { grid-template-columns: 1fr 1fr; }
  .forecast-data-row { grid-template-columns: 1fr 1fr; }
  .forecast-data-row > div:nth-child(3),
  .forecast-data-row > div:nth-child(4),
  .forecast-data-row > div:nth-child(5) { grid-column: auto; }
  .forecast-data-row > div:nth-child(3) { grid-column: 1 / -1; }
  .forecast-curve { gap: 4px; padding-left: 5px; padding-right: 5px; }
  .forecast-day small { font-size: 8px; }
  .map-legend { font-size: 9px; }
}

/* TEM 1.6 — modello micologico esperto e analisi trasparente */
.score-ring { align-content: center; gap: 0; }
.score-ring span { display: block; margin-top: -8px; font-size: 12px; font-weight: 850; }
.reason small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.analysis-summary,
.forecast-analysis-summary {
  margin: 12px 0 0;
  color: #e3eee8;
  font-size: 13px;
  line-height: 1.55;
}
.favored-species {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 13px 0;
}
.favored-species > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid rgba(230,184,92,.26);
  border-radius: 12px;
  background: rgba(230,184,92,.08);
}
.favored-species i { grid-column: 1 / -1; color: #efca80; font-size: 9px; font-style: normal; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.favored-species strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-style: italic; }
.favored-species em { color: #ffe1a2; font-size: 15px; font-style: normal; font-weight: 900; }
.favored-species.compact { margin: 10px 0 0; }
.favored-species.compact > span { padding: 8px 9px; }

.maturation-box {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid rgba(134,202,156,.24);
  border-radius: 14px;
  background: rgba(51,126,78,.12);
}
.maturation-box > div { display: grid; gap: 4px; }
.maturation-box span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.maturation-box strong { font-size: 13px; }
.maturation-box p { grid-column: 1 / -1; margin: 3px 0 0; color: #dce9e1; font-size: 12px; line-height: 1.5; }

.factor-analysis {
  margin: 14px 0 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  overflow: hidden;
}
.factor-analysis > summary {
  cursor: pointer;
  padding: 13px 14px;
  color: #ffe1a2;
  font-size: 12px;
  font-weight: 850;
  list-style-position: inside;
}
.factor-analysis[open] > summary { border-bottom: 1px solid var(--line); }
.factor-analysis-list { display: grid; gap: 8px; padding: 10px; }
.factor-row {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px;
  background: rgba(0,0,0,.09);
}
.factor-row-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.factor-row-heading strong { font-size: 12px; }
.factor-row-heading span { flex: 0 0 auto; font-size: 11px; font-weight: 900; }
.factor-row.positive .factor-row-heading span { color: #aee8bd; }
.factor-row.neutral .factor-row-heading span { color: #ffe09c; }
.factor-row.negative .factor-row-heading span { color: #ffbea6; }
.factor-row.missing .factor-row-heading span { color: #c1cec7; }
.factor-meter { height: 7px; margin: 8px 0; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.factor-meter i { display: block; height: 100%; border-radius: inherit; background: #d8b45c; }
.factor-row.positive .factor-meter i { background: #58ae6e; }
.factor-row.negative .factor-meter i { background: #d66b50; }
.factor-row.missing .factor-meter i { background: #71827a; }
.factor-row p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.48; }
.factor-row p b { color: var(--text); font-weight: 800; }
.factor-weight { display: block; margin-top: 6px; color: #aebbb5; font-size: 10px; line-height: 1.4; }
.factor-coverage-note { margin: 0 10px 10px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.factor-coverage-note strong { color: var(--text); }
.factor-row.missing { border-style: dashed; background: rgba(255,255,255,.018); }
.model-modifiers { margin: 0 10px 10px; padding: 10px; border: 1px solid rgba(230,184,92,.2); border-radius: 11px; background: rgba(230,184,92,.07); }
.model-modifiers > strong { color: #ffe0a1; font-size: 11px; }
.model-modifiers p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.forecast-phase.waiting { color: #d9ccff; background: rgba(128,94,190,.17); border-color: rgba(157,123,218,.34); }
.forecast-data-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.forecast-data-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }

@media (max-width: 720px) {
  .favored-species { grid-template-columns: 1fr; }
  .favored-species.compact { grid-template-columns: 1fr 1fr; }
  .maturation-box { grid-template-columns: 1fr 1fr; }
  .maturation-box > div:last-of-type { grid-column: 1 / -1; }
  .factor-analysis > summary { min-height: 46px; display: flex; align-items: center; }
  .forecast-data-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 430px) {
  .favored-species.compact { grid-template-columns: 1fr; }
  .maturation-box { grid-template-columns: 1fr; }
  .maturation-box > div:last-of-type { grid-column: auto; }
  .factor-analysis-list { padding: 8px; }
  .factor-row { padding: 9px; }
}

/* TEM 1.9.3 — precedente selettore +7/+14 giorni e vista centralina SIR */
.species-dock {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(13, 42, 30, .98);
  position: relative;
  z-index: 950;
}
.species-dock label { display: flex; align-items: center; gap: 10px; min-width: min(640px, 72vw); }
.species-dock label > span { flex: 0 0 auto; color: #ffe0a0; font-size: 11px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.species-dock select { min-height: 42px; }
.species-dock p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.app-shell { height: calc(100vh - 130px - var(--safe-top)); }
.forecast-view, .atlas-view { height: calc(100vh - 130px - var(--safe-top)); }
.selected-profile-chip { display: inline-flex; margin-top: 10px; padding: 5px 9px; border-radius: 999px; background: rgba(230,184,92,.12); border: 1px solid rgba(230,184,92,.25); color: #ffe0a0; font-size: 11px; font-style: italic; }
.current-rain-note { margin: 12px 0; }
.activity-label { margin-top: 8px !important; color: #e9d7a8; line-height: 1.45; }
.forecast-in-dialog { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.forecast-in-dialog > h3 { margin: 10px 0 0; font-size: 20px; }

@media (max-width: 1060px) and (min-width: 721px) {
  .app-shell { min-height: calc(100vh - 130px - var(--safe-top)); }
}

@media (max-width: 720px) {
  body { padding-bottom: calc(68px + var(--safe-bottom)); overscroll-behavior-y: auto; }
  .app-header {
    height: calc(62px + var(--safe-top));
    min-height: calc(62px + var(--safe-top));
    padding: var(--safe-top) 12px 0;
    flex-wrap: nowrap;
    align-items: center;
    position: sticky;
    top: 0;
  }
  .brand { min-height: 0; }
  .brand-mark { width: 36px; height: 36px; border-radius: 11px; font-size: 21px; }
  .brand h1 { font-size: 17px; }
  .brand p { display: block; font-size: 9px; max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .header-actions .status-badge { display: none; }
  .view-nav {
    position: fixed;
    z-index: 2100;
    left: 8px;
    right: 8px;
    bottom: calc(7px + var(--safe-bottom));
    width: auto;
    min-height: 54px;
    order: initial;
    padding: 5px;
    border-radius: 18px;
    background: rgba(7, 29, 20, .97);
    box-shadow: 0 12px 34px rgba(0,0,0,.42);
    backdrop-filter: blur(18px);
  }
  .view-nav-button { min-height: 44px; flex: 1; justify-content: center; padding: 0 6px; font-size: 12px; }
  .species-dock {
    position: sticky;
    top: calc(62px + var(--safe-top));
    z-index: 1350;
    min-height: 0;
    display: block;
    padding: 8px 10px 9px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
  }
  .species-dock label { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 8px; min-width: 0; }
  .species-dock label > span { font-size: 9px; }
  .species-dock select { min-height: 44px; font-size: 16px; padding: 0 10px; }
  .species-dock p { margin: 5px 2px 0; font-size: 10px; }
  .app-shell, .forecast-view, .atlas-view { min-height: 0; height: auto; }
  .control-panel { padding: 10px; }
  .primary-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .primary-controls .button { width: 100%; min-width: 0; min-height: 50px; padding: 0 8px; }
  .primary-controls .button:first-child { grid-column: 1 / -1; }
  .secondary-controls { margin-bottom: 8px; }
  .metric-grid { gap: 7px; margin: 10px 0; }
  .metric-card { min-height: 68px; }
  .notice { font-size: 12px; }
  .map-region { height: 58dvh; min-height: 390px; }
  .results-list { max-height: none; overflow: visible; }
  .result-card { min-height: 72px; touch-action: manipulation; }
  .forecast-view, .atlas-view { padding-bottom: calc(82px + var(--safe-bottom)); }
  .forecast-top-button { bottom: calc(76px + var(--safe-bottom)); }
  .station-dialog { width: 100vw; max-width: none; max-height: calc(100dvh - var(--safe-top)); margin: var(--safe-top) 0 0; border-radius: 18px 18px 0 0; border-bottom: 0; }
  .station-content { padding: 18px 14px calc(26px + var(--safe-bottom)); }
  .score-hero { grid-template-columns: 74px 1fr; gap: 12px; padding: 12px; }
  .score-ring { width: 72px; height: 72px; border-width: 5px; }
  .score-ring strong { font-size: 24px; }
  .data-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .data-item { padding: 9px; }
  .toast { bottom: calc(74px + var(--safe-bottom)); }
}

@media (max-width: 430px) {
  .brand-mark { display: grid; }
  .brand p { max-width: 145px; }
  .primary-controls { grid-template-columns: 1fr; }
  .primary-controls .button:first-child { grid-column: auto; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .data-grid { grid-template-columns: 1fr; }
  .forecast-rain-grid { grid-template-columns: 1fr; }
  .species-dock label { grid-template-columns: 1fr; gap: 4px; }
  .species-dock label > span { display: none; }
}

/* TEM 1.8 — consiglio microterritoriale della centralina */
.search-advice {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid rgba(240, 196, 104, .34);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(222, 165, 67, .14), rgba(45, 104, 70, .18));
}
.search-advice-heading { display: flex; align-items: center; gap: 11px; }
.search-advice-heading > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; background: rgba(239, 195, 102, .18); color: #f4cf83; font-size: 23px; }
.search-advice-heading small { display: block; color: #e9c77f; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.search-advice-heading h3 { margin: 3px 0 0; font-size: 18px; }
.search-advice > p { margin: 13px 0; color: #e5efe9; line-height: 1.55; }
.search-advice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.search-advice-grid > div { min-width: 0; padding: 11px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(7, 33, 23, .28); }
.search-advice-grid span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.search-advice-grid strong { display: block; margin-top: 5px; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.search-advice-limit { display: block; margin-top: 11px; color: var(--muted); line-height: 1.45; }

@media (max-width: 600px) {
  .search-advice { padding: 13px; border-radius: 15px; }
  .search-advice-grid { grid-template-columns: 1fr; }
  .search-advice-heading h3 { font-size: 16px; }
}

@media (max-width: 720px) {
  .station-return-button { width: 100%; min-height: 46px; }
  .mushroom-description { font-size: 13px; }
}

/* Orizzonte +7/+14: otto punti leggibili anche nei WebView Android. */
.forecast-curve { overflow-x: auto; scrollbar-width: thin; }
@media (max-width: 720px) {
  .forecast-curve { grid-template-columns: repeat(8, minmax(48px, 1fr)); }
}

/* 1.9.3 — precedente orizzonte 7/14 giorni e visualizzatore SIR */
.forecast-horizon-field {
  min-width: 170px;
}

.station-heading .sir-station-button {
  margin-top: 0.75rem;
  width: fit-content;
  background: #eef8f2;
  color: #174c37;
  border: 1px solid rgba(23, 76, 55, 0.22);
}

.station-heading .sir-station-button:hover,
.station-heading .sir-station-button:focus-visible {
  background: #dff2e7;
}

body.sir-viewer-open {
  overflow: hidden;
}

.sir-viewer {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  background: #f4f7f5;
  color: #18352a;
}

.sir-viewer.hidden {
  display: none;
}

.sir-viewer-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: calc(0.65rem + env(safe-area-inset-top)) max(0.8rem, env(safe-area-inset-right)) 0.65rem max(0.8rem, env(safe-area-inset-left));
  background: #153d2e;
  color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.sir-back-button {
  flex: 0 0 auto;
  background: #fff;
  color: #153d2e;
  border-color: transparent;
}

.sir-viewer-title {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.sir-viewer-title strong,
.sir-viewer-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sir-viewer-title span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.78);
}

.sir-viewer-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.sir-viewer-actions .button {
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  text-decoration: none;
}

.sir-viewer-note {
  padding: 0.55rem max(0.8rem, env(safe-area-inset-right)) 0.55rem max(0.8rem, env(safe-area-inset-left));
  background: #fff3cd;
  color: #5f4a00;
  border-bottom: 1px solid #ead58a;
  font-size: 0.82rem;
  line-height: 1.35;
}

#sirFrame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

@media (max-width: 760px) {
  .forecast-horizon-field {
    min-width: 0;
  }

  .sir-viewer-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem 0.7rem;
  }

  .sir-viewer-actions {
    grid-column: 1 / -1;
    width: 100%;
  }

  .sir-viewer-actions .button,
  .sir-viewer-actions a {
    flex: 1 1 0;
    justify-content: center;
    text-align: center;
  }

  .station-heading .sir-station-button {
    width: 100%;
    justify-content: center;
  }
}

/* TEM 1.9.5 — restyling mobile, pulsanti interi e selettore 7/15 sempre visibile */
:root {
  --panel-glass: rgba(17, 55, 39, .82);
  --panel-glass-strong: rgba(13, 45, 32, .96);
  --accent-soft: rgba(246, 196, 92, .15);
  --accent-line: rgba(255, 218, 139, .38);
  --shadow-soft: 0 12px 34px rgba(0, 0, 0, .24);
  --shadow-card: 0 18px 44px rgba(0, 0, 0, .25);
}

html { scroll-padding-top: 132px; }
body { overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
button, select, input { max-width: 100%; }
button { touch-action: manipulation; }

.button {
  min-width: 0;
  height: auto;
  min-height: 46px;
  padding: 10px 14px;
  line-height: 1.18;
  white-space: normal;
  overflow: visible;
  text-align: center;
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}
.button > span { min-width: 0; }
.button:disabled { cursor: not-allowed; }

.app-header {
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
}
.brand-mark {
  background: linear-gradient(145deg, #4c7656, #1b3d2b 68%);
  border: 1px solid rgba(255,255,255,.1);
}
.view-nav-button { min-width: 0; overflow: visible; }
.view-nav-button.active { box-shadow: 0 7px 20px rgba(0,0,0,.27), inset 0 1px rgba(255,255,255,.38); }

.forecast-view,
.atlas-view {
  background:
    radial-gradient(circle at 88% 8%, rgba(102, 174, 121, .18), transparent 30rem),
    radial-gradient(circle at 3% 40%, rgba(229, 176, 72, .10), transparent 32rem),
    linear-gradient(155deg, #081b13, #123527 55%, #091d15);
}

.forecast-hero {
  border-color: rgba(255,255,255,.17);
  background:
    radial-gradient(circle at 86% 30%, rgba(255,211,123,.22), transparent 19rem),
    linear-gradient(135deg, rgba(42,101,72,.98), rgba(13,49,34,.98) 62%, rgba(9,35,24,.98));
  box-shadow: var(--shadow-card);
}
.forecast-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.055), transparent 36% 72%, rgba(255,255,255,.025));
}
.forecast-hero > * { position: relative; z-index: 1; }

.forecast-toolbar {
  grid-template-columns: minmax(280px, 1.35fr) minmax(210px, .85fr) minmax(180px, .65fr) minmax(180px, .65fr);
  grid-template-areas:
    "horizon horizon horizon horizon"
    "search phase reset refresh";
  align-items: stretch;
  gap: 12px;
  padding: 16px;
  border-color: rgba(255,255,255,.16);
  background: linear-gradient(145deg, rgba(20,62,44,.92), rgba(11,42,29,.94));
  box-shadow: var(--shadow-soft);
  overflow: visible;
}
.forecast-horizon-panel {
  grid-area: horizon;
  display: grid;
  grid-template-columns: minmax(190px, .7fr) minmax(300px, 1.3fr);
  gap: 8px 18px;
  align-items: center;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--accent-line);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,224,155,.18), transparent 16rem),
    linear-gradient(135deg, rgba(240,189,82,.13), rgba(25,85,56,.25));
}
.forecast-horizon-heading { min-width: 0; }
.forecast-horizon-heading > span {
  display: block;
  color: #f7d58d;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.forecast-horizon-heading > strong {
  display: block;
  margin-top: 5px;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.1;
}
.forecast-horizon-panel > small {
  grid-column: 1 / -1;
  color: #c9dad0;
  font-size: 11px;
  line-height: 1.4;
}
.forecast-horizon-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 15px;
  background: rgba(4,27,17,.34);
}
.forecast-horizon-button {
  min-width: 0;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #d5e3db;
  font-weight: 850;
  line-height: 1;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.forecast-horizon-button:hover { background: rgba(255,255,255,.07); }
.forecast-horizon-button:active { transform: scale(.985); }
.forecast-horizon-button.active {
  color: #2d220e;
  border-color: rgba(255,255,255,.35);
  background: linear-gradient(145deg, #ffd986, #e7ad45);
  box-shadow: 0 8px 20px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.55);
}
.forecast-horizon-number { font-size: 24px; font-weight: 950; letter-spacing: -.04em; }
.forecast-horizon-button span:last-child { font-size: 13px; }
.forecast-search { grid-area: search; min-width: 0; }
.forecast-phase-field { grid-area: phase; min-width: 0; }
#forecastResetButton { grid-area: reset; }
#forecastRefreshButton { grid-area: refresh; }
#forecastResetButton,
#forecastRefreshButton { width: 100%; align-self: stretch; }

.forecast-metric,
.metric-card,
.forecast-card,
.mushroom-card {
  box-shadow: 0 10px 26px rgba(0,0,0,.15);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.forecast-card:hover,
.mushroom-card:hover { transform: translateY(-2px); border-color: rgba(255,218,139,.28); box-shadow: 0 18px 38px rgba(0,0,0,.24); }
.forecast-card { overflow: visible; }
.forecast-detail-button,
.mushroom-detail-button,
.station-return-button,
.sir-station-button {
  height: auto;
  min-height: 44px;
  padding: 10px 13px;
  line-height: 1.2;
  white-space: normal;
  overflow: visible;
}

.forecast-map-section {
  box-shadow: var(--shadow-card);
}
.forecast-map-heading .button { flex: 0 0 auto; }

@media (max-width: 980px) {
  .forecast-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "horizon horizon"
      "search search"
      "phase phase"
      "reset refresh";
  }
  .forecast-toolbar .button { grid-column: auto; }
}

@media (max-width: 720px) {
  html { scroll-padding-top: 118px; }
  body { padding-bottom: calc(78px + var(--safe-bottom)); }

  .app-header {
    height: calc(60px + var(--safe-top));
    min-height: calc(60px + var(--safe-top));
    padding: var(--safe-top) 10px 0;
    background: rgba(7,29,20,.97);
  }
  .brand { gap: 8px; }
  .brand-mark { width: 36px; height: 36px; font-size: 20px; }
  .brand h1 { font-size: 16px; }
  .brand p { max-width: 175px; font-size: 8px; letter-spacing: .04em; }

  .view-nav {
    left: 9px;
    right: 9px;
    bottom: calc(8px + var(--safe-bottom));
    min-height: 58px;
    gap: 5px;
    padding: 5px;
    border-radius: 19px;
    background: rgba(6,28,19,.97);
    border-color: rgba(255,255,255,.15);
  }
  .view-nav-button {
    min-height: 47px;
    padding: 6px 5px;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    line-height: 1.05;
  }
  .view-nav-button > span { font-size: 17px; line-height: 1; }

  .species-dock {
    top: calc(60px + var(--safe-top));
    padding: 8px 10px 9px;
    background: rgba(12,43,30,.97);
  }
  .species-dock select { min-height: 46px; border-radius: 13px; }

  .forecast-view,
  .atlas-view {
    padding: 11px 10px calc(96px + var(--safe-bottom));
  }
  .forecast-hero,
  .atlas-hero {
    padding: 20px 16px;
    border-radius: 20px;
  }
  .forecast-hero h2 { margin-top: 11px; font-size: clamp(24px, 8vw, 31px); }
  .forecast-hero p { font-size: 13px; line-height: 1.55; }

  .forecast-toolbar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "horizon"
      "search"
      "phase"
      "reset"
      "refresh";
    gap: 10px;
    padding: 11px;
    border-radius: 17px;
  }
  .forecast-horizon-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
  }
  .forecast-horizon-panel > small { grid-column: auto; }
  .forecast-horizon-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }
  .forecast-horizon-heading > strong { flex: 0 0 auto; font-size: 18px; }
  .forecast-horizon-toggle { padding: 4px; }
  .forecast-horizon-button { min-height: 60px; }
  .forecast-horizon-number { font-size: 25px; }

  select,
  input[type="search"],
  .button { min-height: 50px; }
  .button { padding: 11px 13px; }
  #forecastResetButton,
  #forecastRefreshButton { min-height: 52px; }

  .forecast-metrics { gap: 7px; }
  .forecast-metric { min-width: 0; min-height: 76px; padding: 11px; }
  .forecast-metric span { min-height: 28px; line-height: 1.25; }
  .forecast-card { overflow: visible; }
  .forecast-card-bottom { gap: 10px; }
  .forecast-detail-button { width: 100%; min-height: 48px; }
  .forecast-map-heading .button { width: 100%; min-height: 48px; }
  .forecast-top-button { bottom: calc(82px + var(--safe-bottom)); }
  .toast { bottom: calc(84px + var(--safe-bottom)); }
}

@media (max-width: 430px) {
  .brand-mark { display: grid; }
  .brand p { display: none; }
  .header-actions { gap: 4px; }
  .forecast-horizon-heading { display: block; }
  .forecast-horizon-heading > strong { margin-top: 5px; }
  .forecast-horizon-button { min-height: 58px; padding-inline: 8px; }
  .forecast-metrics { grid-template-columns: 1fr 1fr; }
  .forecast-metric span { font-size: 9px; }
  .forecast-data-row { grid-template-columns: 1fr; }
  .forecast-data-row > div:nth-child(n) { grid-column: auto; }
  .forecast-card-header { grid-template-columns: minmax(0, 1fr) 56px; }
  .forecast-score { width: 56px; height: 56px; }
}

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

/* TEM 1.9.5 — ritorno SIR affidabile, legenda non sovrapposta e temperatura a 30 giorni */
.inline-data-button {
  width: 100%;
  min-height: 38px;
  margin-top: 9px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 214, 132, .32);
  border-radius: 10px;
  background: rgba(230, 184, 92, .12);
  color: #ffdc96;
  font-weight: 850;
  line-height: 1.2;
}
.inline-data-button:active { transform: translateY(1px); }
.temperature-30-card { border-color: rgba(255, 214, 132, .24); }

.sir-viewer {
  min-height: 100vh;
  height: 100dvh;
  isolation: isolate;
}
.sir-viewer-header {
  position: relative;
  z-index: 3;
  flex-wrap: wrap;
}
.sir-data-tab.active {
  color: #2d220e;
  border-color: rgba(255,255,255,.45);
  background: linear-gradient(145deg, #ffd986, #e7ad45);
  box-shadow: 0 6px 18px rgba(0,0,0,.24);
}
.sir-viewer-note { position: relative; z-index: 2; }
#sirFrame { position: relative; z-index: 1; min-height: 0; }
.sir-floating-back {
  display: none;
  position: fixed;
  z-index: 5300;
  left: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  min-height: 50px;
  padding: 11px 16px;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: #153d2e;
  color: #fff;
  box-shadow: 0 12px 34px rgba(0,0,0,.4);
  font-weight: 900;
}

@media (max-width: 720px) {
  /* La legenda diventa una fascia separata: non può più coprire pulsanti o controlli Leaflet. */
  .map-region {
    display: grid;
    grid-template-rows: minmax(390px, 56vh) auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }
  #map { min-height: 390px; }
  .map-region > .map-legend {
    position: static;
    z-index: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px 9px;
    padding: 10px 11px;
    border-radius: 0;
    background: #0d2d20;
    box-shadow: inset 0 1px rgba(255,255,255,.09);
    font-size: 10px;
    pointer-events: auto;
  }
  .map-region > .map-legend span { min-width: 0; white-space: normal; line-height: 1.2; }

  .forecast-map-wrap {
    display: grid;
    grid-template-rows: minmax(390px, 56vh) auto;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  #forecastMap { min-height: 390px; }
  .forecast-map-legend {
    position: static;
    z-index: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px 9px;
    padding: 10px 11px;
    border-radius: 0;
    background: #0d2d20;
    box-shadow: inset 0 1px rgba(255,255,255,.09);
    font-size: 10px;
    pointer-events: auto;
  }
  .forecast-map-legend span { min-width: 0; white-space: normal; line-height: 1.2; }

  .sir-viewer {
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .sir-viewer-header {
    max-height: 45dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .sir-back-button { min-height: 50px; font-weight: 900; }
  .sir-viewer-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .sir-viewer-actions .button,
  .sir-viewer-actions a { min-height: 46px; }
  .sir-external-link { display: none !important; }
  .sir-floating-back { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
  #sirFrame { padding-bottom: 76px; }
}

@media (max-width: 390px) {
  .map-region > .map-legend,
  .forecast-map-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sir-viewer-actions { grid-template-columns: 1fr; }
}


/* TEM 1.9.6 — acqua disponibile, igrometria e idrometria */
.soil-water-card {
  border-color: rgba(99, 202, 180, .30);
  background: linear-gradient(155deg, rgba(38, 119, 103, .18), rgba(13, 47, 38, .48));
}
.humidity-card { border-color: rgba(91, 175, 217, .28); }
.hydrometry-card {
  border-color: rgba(91, 152, 217, .28);
  background: linear-gradient(155deg, rgba(35, 93, 143, .16), rgba(13, 42, 58, .42));
}
.sir-data-tab.source-unavailable:not(.active) {
  opacity: .68;
  border-style: dashed;
}
.sir-viewer-actions { align-items: stretch; }
@media (max-width: 720px) {
  .sir-viewer-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sir-viewer-actions .sir-data-tab { white-space: normal; line-height: 1.16; }
}
@media (max-width: 390px) {
  .sir-viewer-actions { grid-template-columns: 1fr 1fr; }
}

/* TEM 1.9.7 — contesto scientifico regionale e ritorno dall’Enciclopedia */
body.atlas-source-viewer-open { overflow: hidden; }
.atlas-source-viewer { z-index: 5400; }
.atlas-source-viewer #atlasSourceFrame {
  width: 100%; height: 100%; min-height: 0; border: 0; background: #fff;
}
.atlas-source-actions { margin-left: auto; }
.atlas-source-button {
  min-height: 40px; padding: 9px 12px; border: 1px solid rgba(255,214,132,.3);
  border-radius: 10px; background: rgba(230,184,92,.13); color: #ffdc96;
  font-weight: 850; line-height: 1.2; cursor: pointer;
}
.mushroom-card-actions .atlas-source-button { width: auto; font-size: 11px; }
.source-card-link.atlas-source-button { width: 100%; min-height: 45px; margin-top: 16px; color: #2b210e; background: linear-gradient(145deg, #f0c671, #dba444); }
.scientific-context {
  margin: 18px 0; padding: 16px; border: 1px solid rgba(112,201,166,.28);
  border-radius: 17px; background: linear-gradient(155deg, rgba(31,105,78,.18), rgba(10,39,29,.65));
}
.scientific-context-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.scientific-context-heading h3 { margin: 3px 0 0; font-size: 18px; }
.scientific-context-heading small { color: var(--muted); }
.scientific-status { flex:0 0 auto; padding:5px 9px; border-radius:999px; border:1px solid rgba(255,255,255,.14); font-size:10px; font-weight:850; text-transform:uppercase; }
.scientific-status.ok { color:#b8f5c8; background:rgba(50,175,91,.14); }
.scientific-status.partial { color:#f6dd9a; background:rgba(197,156,55,.14); }
.scientific-status.loading { color:#d6e6ff; background:rgba(67,116,180,.16); }
.scientific-status.unavailable { color:#e7d5d5; background:rgba(160,70,70,.14); }
.context-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.context-item { min-width:0; padding:10px 11px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(255,255,255,.045); }
.context-item span { display:block; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.055em; }
.context-item strong { display:block; margin-top:5px; font-size:13px; line-height:1.3; overflow-wrap:anywhere; }
.context-note { margin:12px 0 0; color:#c9d8cf; font-size:11px; line-height:1.55; }
.context-error { margin-top:10px; color:#f0c4c4; font-size:11px; }
@media (max-width:720px) {
  .atlas-source-header { max-height: 32dvh; overflow-y:auto; }
  .atlas-source-actions { grid-column:1/-1; width:100%; }
  .atlas-source-viewer .sir-floating-back { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
  .atlas-source-viewer #atlasSourceFrame { padding-bottom:76px; }
  .context-grid { grid-template-columns:1fr 1fr; }
  .scientific-context-heading { flex-direction:column; }
  .mushroom-card-actions .atlas-source-button { width:100%; min-height:44px; }
}
@media (max-width:390px) { .context-grid { grid-template-columns:1fr; } }

/* TEM 1.9.7 — carta forestale Toscana, habitat e avviso unico dati mancanti */
.context-item-wide { grid-column: span 2; }
.habitat-context {
  border-color: rgba(169, 205, 118, .22);
  background: linear-gradient(150deg, rgba(73, 122, 63, .13), rgba(255,255,255,.035));
}
.missing-data-summary {
  margin: 16px 0;
  padding: 13px 15px;
  border: 1px solid rgba(235, 191, 100, .32);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(133, 93, 29, .18), rgba(46, 35, 16, .46));
}
.missing-data-summary strong { display:block; color:#ffe0a2; font-size:13px; }
.missing-data-summary p { margin:5px 0 0; color:#dfd2b7; font-size:11px; line-height:1.5; }
@media (max-width:720px) {
  .context-item-wide { grid-column: 1 / -1; }
  .scientific-context { padding:14px; }
}
@media (max-width:390px) {
  .context-item-wide { grid-column:auto; }
}


/* TEM 1.9.8 — popup Leaflet affidabile e mappa dei tipi di bosco */
.map-mode-control {
  margin: 2px 0 13px; padding: 12px; border: 1px solid var(--line); border-radius: 15px;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(34,92,67,.12));
}
.map-mode-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }
.map-mode-heading span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.055em; }
.map-mode-heading strong { color:#ffe0a0; font-size:12px; }
.map-mode-toggle { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.map-mode-button {
  min-width:0; min-height:46px; padding:8px 10px; border:1px solid var(--line); border-radius:12px;
  background:rgba(255,255,255,.055); color:var(--text); display:flex; align-items:center; justify-content:center;
  gap:7px; font-weight:800; line-height:1.15; text-align:center;
}
.map-mode-button.active { background:rgba(230,184,92,.16); color:#ffe0a0; border-color:rgba(230,184,92,.42); }
.forest-mode-info {
  margin-top:12px; padding:13px; border:1px solid rgba(116,190,139,.3); border-radius:15px;
  background:linear-gradient(150deg, rgba(31,103,68,.22), rgba(8,32,23,.72));
}
.forest-mode-info-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.forest-mode-info-heading div { display:grid; gap:3px; }
.forest-mode-info-heading div span { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.forest-mode-info-heading strong { font-size:14px; }
.forest-resolution-badge { flex:0 0 auto; padding:5px 7px; border-radius:999px; background:rgba(255,255,255,.08); color:#d9e8df; font-size:9px; font-weight:800; }
.forest-mode-info p { margin:10px 0; color:#dce9e2; font-size:11px; line-height:1.5; }
.forest-mode-info small { display:block; margin-top:10px; color:var(--muted); font-size:10px; line-height:1.45; }
.forest-class-list { border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); padding:8px 0; }
.forest-class-list summary { cursor:pointer; color:#ffe0a0; font-size:11px; font-weight:850; }
.forest-class-list > div { display:grid; grid-template-columns:1fr 1fr; gap:5px 8px; margin-top:9px; }
.forest-class-list span { color:#d7e4dd; font-size:9px; line-height:1.3; }
.leaflet-pane.leaflet-forestOverlay-pane { mix-blend-mode:multiply; }
.station-dialog.dialog-fallback-open {
  display:block; position:fixed; inset:max(8px, var(--safe-top)) 8px max(8px, var(--safe-bottom));
  z-index:6200; margin:auto; max-height:none; overflow:auto; box-shadow:0 0 0 100vmax rgba(0,0,0,.64), 0 25px 80px rgba(0,0,0,.55);
}
body.station-dialog-fallback-active { overflow:hidden; }
@media (max-width:720px) {
  .map-mode-toggle { grid-template-columns:1fr 1fr; }
  .map-mode-button { min-height:50px; padding:8px 6px; font-size:12px; }
  .forest-class-list > div { grid-template-columns:1fr; }
  .station-dialog.dialog-fallback-open { inset:var(--safe-top) 0 0; width:100vw; border-radius:18px 18px 0 0; }
}


/* TEM 1.9.9 — scorrimento pagina sopra le mappe e controllo esplorazione touch */
@media (pointer: coarse), (max-width: 820px) {
  .leaflet-container.map-page-scroll-mode,
  .leaflet-container.map-page-scroll-mode .leaflet-map-pane,
  .leaflet-container.map-page-scroll-mode .leaflet-overlay-pane,
  .leaflet-container.map-page-scroll-mode .leaflet-marker-pane,
  .leaflet-container.map-page-scroll-mode .leaflet-interactive,
  .leaflet-container.map-page-scroll-mode canvas {
    touch-action: pan-y !important;
  }
  .leaflet-container.map-explore-mode,
  .leaflet-container.map-explore-mode .leaflet-interactive,
  .leaflet-container.map-explore-mode canvas {
    touch-action: none !important;
  }
  .map-scroll-toggle {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .map-scroll-toggle-button {
    width: auto !important;
    min-width: 112px;
    min-height: 42px;
    padding: 8px 11px;
    border: 2px solid rgba(255,255,255,.88) !important;
    border-radius: 12px !important;
    background: rgba(15,53,38,.94) !important;
    color: #fff !important;
    font-size: 11px;
    line-height: 1.15;
    font-weight: 900;
    box-shadow: 0 7px 20px rgba(0,0,0,.28);
  }
  .map-scroll-toggle-button:active { transform: translateY(1px); }
}


/* TEM 1.9.10 — carta forestale interattiva, filtro boschi, modali dismissibili e layout a schermo intero */
.app-runtime-status { display: none !important; }
body {
  padding-top: 0 !important;
  padding-bottom: calc(78px + var(--safe-bottom)) !important;
}
.view-nav.bottom-view-nav {
  position: fixed !important;
  z-index: 4200 !important;
  left: max(8px, var(--safe-left)) !important;
  right: max(8px, var(--safe-right)) !important;
  bottom: calc(7px + var(--safe-bottom)) !important;
  width: auto !important;
  min-height: 58px !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 5px !important;
  padding: 5px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 19px !important;
  background: rgba(7, 29, 20, .965) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.46) !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
}
.view-nav.bottom-view-nav .view-nav-button {
  min-width: 0 !important;
  min-height: 48px !important;
  flex: 1 1 0 !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 7px 10px !important;
  border-radius: 14px !important;
  font-size: 12px !important;
}
.view-nav.bottom-view-nav .view-nav-button > span:first-child { font-size: 18px; }
.species-dock {
  top: 0 !important;
  padding-top: calc(8px + var(--safe-top)) !important;
}
.app-shell { height: calc(100dvh - 58px - var(--safe-top)) !important; }
.forecast-view, .atlas-view { min-height: calc(100dvh - 58px - var(--safe-top)) !important; }

.forest-tools {
  display: grid;
  gap: 8px;
  margin: 11px 0;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;
  background: rgba(4,25,17,.36);
}
.forest-tools label { display: grid; gap: 6px; }
.forest-tools label > span {
  color: #ffe0a0;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.forest-tools select {
  width: 100%;
  min-height: 46px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 11px;
  background: #103526;
  color: #fff;
  font-size: 15px;
}
.forest-filter-status { color: #d5e6dc; font-size: 11px; line-height: 1.45; }
.forest-click-hint {
  display: grid;
  grid-template-columns: auto auto minmax(0,1fr);
  align-items: center;
  gap: 7px;
  margin: 9px 0 11px;
  padding: 10px 11px;
  border: 1px solid rgba(246,196,92,.28);
  border-radius: 12px;
  background: rgba(246,196,92,.1);
  color: #ffe7b3;
  font-size: 11px;
}
.forest-click-hint > span:first-child { font-size: 19px; }
.forest-point-popup p { margin: 9px 0 0; color: #d9e7df; font-size: 11px; line-height: 1.45; }
.forest-point-landcover { margin-top: 9px; padding: 8px 9px; border-radius: 10px; background: rgba(255,255,255,.07); }
.forest-point-landcover span { display: block; color: #b9cec2; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.forest-point-landcover strong { display: block; margin-top: 4px; font-size: 13px; }
.forest-point-popup.loading .popup-title { color: #ffe0a0; }
.forest-point-popup.error .popup-title { color: #ffb2a6; }

.station-dialog,
.mushroom-dialog {
  width: min(720px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(88dvh, 860px) !important;
  margin: auto !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.2) !important;
}
.station-dialog::backdrop,
.mushroom-dialog::backdrop {
  background: rgba(0,0,0,.64) !important;
  backdrop-filter: blur(5px) !important;
}
.station-dialog.dialog-fallback-open,
.mushroom-dialog.dialog-fallback-open {
  position: fixed !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(720px, calc(100vw - 24px)) !important;
  max-height: 88dvh !important;
  margin: 0 !important;
  z-index: 6200 !important;
  display: block !important;
  overflow: auto !important;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.66), 0 25px 80px rgba(0,0,0,.55) !important;
}
body.station-dialog-fallback-active,
body.mushroom-dialog-fallback-active { overflow: hidden !important; }

@media (max-width: 720px) {
  body { padding-bottom: calc(76px + var(--safe-bottom)) !important; }
  .species-dock { position: sticky !important; top: 0 !important; }
  .app-shell, .forecast-view, .atlas-view { height: auto !important; min-height: 0 !important; }
  .station-dialog,
  .mushroom-dialog,
  .station-dialog.dialog-fallback-open,
  .mushroom-dialog.dialog-fallback-open {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    max-height: 86dvh !important;
    border-radius: 20px !important;
  }
  .forest-click-hint { grid-template-columns: auto minmax(0,1fr); }
  .forest-click-hint > span:last-child { grid-column: 1 / -1; }
  .view-nav.bottom-view-nav { left: 7px !important; right: 7px !important; }
}

/* Rifiniture finali 1.9.10 per navigazione inferiore */
html { scroll-padding-top: 72px !important; }
body { min-height: 100dvh; }
.toast { z-index: 4300 !important; bottom: calc(84px + var(--safe-bottom)) !important; }
.forecast-top-button { bottom: calc(84px + var(--safe-bottom)) !important; }


.leaflet-control-attribution { display: none !important; }







































.sheet-handle { display: none; }
.station-essential-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 9px;
  margin: 16px 0 12px;
}
.essential-data-card {
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  background: rgba(255,255,255,.05);
}
.essential-data-card > span:first-child { display: block; color: #c1d2c8; font-size: 10px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.essential-data-card > strong { display: block; margin: 6px 0 3px; font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; }
.essential-data-card > small { display: block; color: var(--muted); font-size: 10px; line-height: 1.35; }
.essential-data-card.temperature { border-color: rgba(255,174,91,.28); }
.essential-data-card.thermal-break { border-color: rgba(116,186,255,.28); }
.essential-data-card.forest { border-color: rgba(88,201,125,.3); }
.essential-data-card.water { border-color: rgba(92,183,220,.28); }
.model-use-badge {
  display: inline-flex;
  width: fit-content;
  margin-top: 7px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.model-use-badge.used { background: rgba(72,185,108,.16); border: 1px solid rgba(72,185,108,.3); color: #a9edc1; }
.model-use-badge.missing { background: rgba(239,103,88,.13); border: 1px solid rgba(239,103,88,.28); color: #ffc0b8; }
.station-detail-group {
  margin: 12px 0;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  background: rgba(4,25,17,.24);
  overflow: hidden;
}
.station-detail-group > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 11px 13px;
  cursor: pointer;
  color: #ffe0a0;
  font-weight: 850;
  list-style-position: inside;
}
.station-detail-group[open] > summary { border-bottom: 1px solid rgba(255,255,255,.1); }
.station-detail-group > .data-grid,
.station-detail-group > .scientific-context,
.station-detail-group > .factor-breakdown,
.station-detail-group > .reason-section { margin: 10px; }
.station-detail-group .scientific-context { border: 0; }

@media (max-width: 720px) {
  
  
  
  
  

  .station-dialog,
  .station-dialog.dialog-fallback-open {
    width: 100vw !important;
    max-width: none !important;
    max-height: 78dvh !important;
    margin: auto 0 0 !important;
    border-radius: 24px 24px 0 0 !important;
    border-bottom: 0 !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .station-dialog.dialog-fallback-open {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    transform: none !important;
  }
  .station-dialog::backdrop { background: rgba(0,0,0,.48) !important; }
  .sheet-handle {
    position: sticky;
    z-index: 7;
    top: 0;
    width: 46px;
    height: 5px;
    display: block;
    margin: 8px auto 0;
    border-radius: 999px;
    background: rgba(255,255,255,.38);
  }
  .station-dialog .dialog-close {
    position: sticky;
    top: 8px;
    z-index: 9;
    width: 42px;
    height: 42px;
    margin: 2px 8px -46px auto;
    float: none;
    display: grid;
    place-items: center;
    border-radius: 14px;
  }
  .station-content { padding: 12px 12px calc(24px + var(--safe-bottom)) !important; }
  .station-heading { padding: 4px 48px 9px 2px; border-bottom: 1px solid rgba(255,255,255,.09); }
  .station-heading h2 { font-size: 20px; line-height: 1.15; }
  .station-heading p { font-size: 11px; line-height: 1.35; }
  .sir-station-button { min-height: 44px; width: 100%; margin-top: 8px; }
  .station-essential-summary { grid-template-columns: 1fr 1fr; gap: 7px; margin: 11px 0; }
  .essential-data-card { padding: 9px; border-radius: 12px; }
  .essential-data-card > strong { font-size: 15px; }
  .essential-data-card > small { font-size: 9px; }
  .score-hero { margin: 11px 0 !important; grid-template-columns: 66px minmax(0,1fr) !important; gap: 10px !important; padding: 10px !important; }
  .score-ring { width: 64px !important; height: 64px !important; border-width: 4px !important; }
  .score-ring strong { font-size: 22px !important; }
  .score-description h3 { font-size: 15px; }
  .score-description p { font-size: 11px; }
  .station-content > .analysis-summary { font-size: 12px; line-height: 1.45; }
  .station-detail-group > summary { min-height: 50px; font-size: 13px; }
  .forecast-in-dialog { margin-top: 14px; padding-top: 14px; }
}

@media (max-width: 390px) {
  .station-essential-summary { grid-template-columns: 1fr; }
  
}

/* ========================================================================== 
   TEM 2.0.0 — navigazione Android Pixel 9 Pro e dati SIR nativi
   ========================================================================== */
:root {
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --top-app-bar-height: 58px;
  --species-bar-height: 62px;
  --bottom-navigation-height: 72px;
  --touch-target: 48px;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--top-app-bar-height) + var(--species-bar-height) + var(--safe-top) + 10px) !important;
  overscroll-behavior-y: none;
}
body {
  min-height: 100dvh;
  padding-bottom: calc(var(--bottom-navigation-height) + var(--safe-bottom)) !important;
  -webkit-tap-highlight-color: transparent;
}
button, select, input, summary, a { touch-action: manipulation; }

.mobile-app-bar {
  position: sticky;
  z-index: 4400;
  top: 0;
  min-height: calc(var(--top-app-bar-height) + var(--safe-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: var(--safe-top) max(14px, var(--safe-right)) 0 max(14px, var(--safe-left));
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(7, 29, 20, .975);
  box-shadow: 0 5px 22px rgba(0,0,0,.24);
  backdrop-filter: blur(18px) saturate(1.1);
}
.mobile-app-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-app-mark {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 13px;
  background: linear-gradient(145deg, #315d44, #173c2b);
  font-size: 21px;
  box-shadow: inset 0 1px rgba(255,255,255,.12);
}
.mobile-app-brand > div { min-width: 0; }
.mobile-app-brand strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 16px;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mobile-app-brand small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #b9c9c0;
  font-size: 10px;
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.app-runtime-status {
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  gap: 7px;
}
.app-runtime-status .status-badge {
  max-width: 104px;
  padding: 6px 9px;
  overflow: hidden;
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.app-runtime-status .icon-button { min-width: 38px; min-height: 38px; }

.species-dock {
  position: sticky !important;
  z-index: 4300;
  top: calc(var(--top-app-bar-height) + var(--safe-top)) !important;
  min-height: var(--species-bar-height);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px max(14px, var(--safe-right)) 8px max(14px, var(--safe-left)) !important;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(14, 49, 35, .97);
  box-shadow: 0 4px 16px rgba(0,0,0,.16);
  backdrop-filter: blur(15px);
}
.species-dock label {
  min-width: min(680px, 75vw);
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 10px;
}
.species-dock label > span { font-size: 10px; }
.species-dock select {
  min-height: var(--touch-target);
  border-radius: 14px;
  background: #123f2d;
  font-size: 15px;
  font-weight: 720;
}
.species-dock p {
  max-width: 430px;
  margin: 0;
  font-size: 11px;
}

.app-shell {
  height: calc(100dvh - var(--top-app-bar-height) - var(--species-bar-height) - var(--safe-top)) !important;
}
.control-panel, .results-panel { overscroll-behavior: contain; }
.control-panel .button, .forecast-toolbar .button, .atlas-toolbar .button { min-height: var(--touch-target); }
.app-notice { margin: 12px 0 0; }

.view-nav.bottom-view-nav {
  left: max(8px, var(--safe-left)) !important;
  right: max(8px, var(--safe-right)) !important;
  bottom: calc(7px + var(--safe-bottom)) !important;
  min-height: 62px !important;
  padding: 5px !important;
}
.view-nav.bottom-view-nav .view-nav-button {
  min-height: 52px !important;
  display: flex !important;
  flex-direction: column;
  gap: 2px !important;
  padding: 5px 8px !important;
  line-height: 1.05;
}
.view-nav.bottom-view-nav .view-nav-button > span:first-child { font-size: 19px; line-height: 1; }
.view-nav.bottom-view-nav .view-nav-button > span:last-child { font-size: 11px; }
.view-nav.bottom-view-nav .view-nav-button.active {
  background: linear-gradient(145deg, rgba(246,196,92,.25), rgba(246,196,92,.12)) !important;
  color: #ffe6ad !important;
}

/* Scheda SIR nativa: nessun grafico JpGraph incorporato. */
#sirFrame { display: none !important; }
.sir-viewer {
  grid-template-rows: auto auto minmax(0,1fr) !important;
  overflow: hidden;
  background: #edf5f0;
}
.sir-viewer-header {
  position: sticky;
  z-index: 4;
  top: 0;
  min-height: calc(64px + var(--safe-top));
}
.sir-viewer-actions { min-width: 0; }
.sir-data-tab.active,
.sir-data-tab[aria-pressed="true"] {
  background: #f4c75e !important;
  border-color: #f4c75e !important;
  color: #2c210d !important;
}
.sir-viewer-note {
  z-index: 3;
  padding: 10px max(14px, var(--safe-right)) 10px max(14px, var(--safe-left));
  font-size: 13px;
}
.sir-native-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px max(16px, var(--safe-right)) calc(96px + var(--safe-bottom)) max(16px, var(--safe-left));
  background: linear-gradient(180deg, #f3f8f5, #e9f2ed);
  color: #153a2a;
}
.sir-native-section {
  width: min(880px, 100%);
  margin: 0 auto;
}
.sir-native-loading,
.sir-native-error {
  min-height: 220px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 13px;
  padding: 24px;
  border: 1px solid rgba(21,61,46,.15);
  border-radius: 20px;
  background: #fff;
  text-align: center;
  box-shadow: 0 10px 30px rgba(21,61,46,.08);
}
.sir-native-loading .loader { border-color: rgba(21,61,46,.16); border-top-color: #b47b12; }
.sir-native-error strong { font-size: 20px; }
.sir-native-error p { max-width: 580px; margin: 0; color: #50675c; line-height: 1.5; }
.sir-native-error .button { min-height: var(--touch-target); background: #153d2e; color: #fff; }
.sir-native-heading { margin-bottom: 14px; }
.sir-native-heading .eyebrow { color: #7d5a16; }
.sir-native-heading h2 { margin: 5px 0 5px; color: #153d2e; font-size: clamp(22px, 4vw, 31px); }
.sir-native-heading p { margin: 0; color: #526b5f; font-size: 14px; line-height: 1.5; }
.sir-history-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin: 14px 0;
}
.sir-history-metric {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(21,61,46,.15);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(21,61,46,.06);
}
.sir-history-metric span {
  display: block;
  min-height: 28px;
  color: #667c71;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .045em;
  line-height: 1.35;
  text-transform: uppercase;
}
.sir-history-metric strong {
  display: block;
  margin-top: 7px;
  overflow-wrap: anywhere;
  color: #153d2e;
  font-size: clamp(18px, 3vw, 25px);
  line-height: 1.1;
}
.sir-history-metric small { display: block; margin-top: 5px; color: #71857b; line-height: 1.35; }
.sir-chart-card {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(21,61,46,.15);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(21,61,46,.07);
}
.sir-chart-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.sir-chart-heading strong { color: #153d2e; font-size: 16px; }
.sir-chart-heading span { color: #6c8076; font-size: 11px; }
.sir-native-chart {
  width: 100%;
  min-height: 250px;
  display: block;
  overflow: visible;
  border-radius: 12px;
  background: #f8fbf9;
}
.sir-chart-grid { stroke: #d9e5de; stroke-width: 1; }
.sir-chart-axis-label { fill: #64786e; font-size: 10px; }
.sir-rain-bar { fill: #3f8fbd; }
.sir-temp-min { fill: none; stroke: #3f83bd; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.sir-temp-mean { fill: none; stroke: #c57d12; stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; }
.sir-temp-max { fill: none; stroke: #c64f3f; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.sir-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 10px;
  color: #4e675b;
  font-size: 12px;
}
.sir-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sir-chart-legend i { width: 20px; height: 3px; display: inline-block; border-radius: 999px; }
.sir-chart-legend .temp-min { background: #3f83bd; }
.sir-chart-legend .temp-mean { background: #c57d12; }
.sir-chart-legend .temp-max { background: #c64f3f; }
.sir-source-note {
  margin: 14px 0 0;
  padding: 12px 13px;
  border: 1px solid rgba(21,61,46,.14);
  border-radius: 14px;
  background: rgba(21,61,46,.055);
  color: #435e51;
  font-size: 12px;
  line-height: 1.5;
}
.sir-source-note strong { color: #153d2e; }
.sir-floating-back { min-height: 52px; }

/* Android / Pixel 9 Pro: una sola colonna, bersagli comodi e scorrimento prevedibile. */
@media (max-width: 720px) {
  :root {
    --top-app-bar-height: 56px;
    --species-bar-height: 64px;
    --bottom-navigation-height: 76px;
  }
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: calc(var(--bottom-navigation-height) + var(--safe-bottom)) !important;
  }
  .mobile-app-bar {
    min-height: calc(var(--top-app-bar-height) + var(--safe-top));
    padding-left: max(10px, var(--safe-left));
    padding-right: max(10px, var(--safe-right));
  }
  .mobile-app-mark { width: 36px; height: 36px; border-radius: 12px; font-size: 20px; }
  .mobile-app-brand strong { font-size: 15px; }
  .mobile-app-brand small { max-width: 220px; font-size: 9px; }
  .app-runtime-status .status-badge { max-width: 82px; padding: 5px 7px; font-size: 9px; }

  .species-dock {
    top: calc(var(--top-app-bar-height) + var(--safe-top)) !important;
    min-height: var(--species-bar-height);
    display: block;
    padding: 7px max(10px, var(--safe-right)) 8px max(10px, var(--safe-left)) !important;
  }
  .species-dock label {
    min-width: 0;
    display: block;
  }
  .species-dock label > span { display: none; }
  .species-dock select {
    min-height: 49px;
    padding: 0 40px 0 12px;
    border-radius: 14px;
    font-size: 15px;
  }
  .species-dock p { display: none; }

  .app-shell, .forecast-view, .atlas-view {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
  }
  .control-panel {
    padding: 10px !important;
    border: 0 !important;
    overflow: visible;
  }
  .control-row { gap: 8px; margin-bottom: 9px; }
  .primary-controls .button { width: 100%; min-height: 50px; }
  .secondary-controls {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: stretch;
  }
  .search-field input, .secondary-controls .button { min-height: 49px; }
  .secondary-controls .button { min-width: 82px; }
  .map-mode-control { margin: 10px 0; padding: 10px; }
  .map-mode-heading { align-items: start; gap: 7px; }
  .map-mode-toggle { display: grid; grid-template-columns: 1fr 1fr; }
  .map-mode-button { min-height: 50px; padding: 8px; }
  .forest-mode-info { margin-top: 9px; padding: 11px; }
  .forest-class-list > summary, .station-detail-group > summary { min-height: 52px !important; }
  .app-notice { margin-top: 9px; font-size: 12px; }

  .map-region {
    height: min(54dvh, 510px) !important;
    min-height: 430px !important;
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .leaflet-bar a { width: 42px !important; height: 42px !important; line-height: 42px !important; }
  .leaflet-control-layers-toggle { width: 42px !important; height: 42px !important; }
  .map-legend { left: 8px; right: 8px; bottom: 8px; max-width: none; font-size: 10px; }
  .results-panel { border-left: 0; max-height: none !important; }
  .panel-tabs { padding: 12px 10px 0; }
  .tab { min-height: 48px; }
  .results-summary { padding: 11px 12px 6px; }
  .results-list { max-height: none !important; padding: 0 9px 16px; }
  .result-card {
    min-height: 76px;
    margin: 8px 0;
    padding: 12px;
    border-radius: 16px;
  }
  .panel-footer { padding-bottom: 22px; }

  .forecast-toolbar, .atlas-toolbar {
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    padding: 11px !important;
    border-radius: 0 0 17px 17px;
  }
  .forecast-toolbar label, .atlas-toolbar label { min-width: 0; }
  .forecast-toolbar select, .atlas-toolbar select,
  .forecast-toolbar input, .atlas-toolbar input,
  .forecast-toolbar .button, .atlas-toolbar .button { min-height: 50px; }
  .forecast-horizon-options { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .forecast-horizon-button { min-height: 49px; }
  .forecast-metrics, .atlas-metrics { grid-template-columns: repeat(2, minmax(0,1fr)) !important; padding: 10px !important; gap: 8px !important; }
  .forecast-metric, .atlas-metric { min-height: 86px; padding: 11px; }
  .forecast-warning, .atlas-safety, .atlasNotice { margin-left: 10px; margin-right: 10px; }
  .forecast-map-section { margin: 10px !important; padding: 10px !important; }
  .forecast-map-heading { display: grid !important; gap: 9px; }
  .forecast-map-heading .button { min-height: 48px; width: 100%; }
  .forecast-map-wrap { min-height: 430px; }
  #forecastMap { min-height: 430px; }
  .forecast-grid, .atlas-grid { padding-left: 10px !important; padding-right: 10px !important; }

  .view-nav.bottom-view-nav {
    left: max(6px, var(--safe-left)) !important;
    right: max(6px, var(--safe-right)) !important;
    bottom: calc(5px + var(--safe-bottom)) !important;
    min-height: 64px !important;
    border-radius: 20px !important;
  }
  .view-nav.bottom-view-nav .view-nav-button { min-height: 54px !important; }

  .station-dialog,
  .station-dialog.dialog-fallback-open {
    width: 100vw !important;
    max-width: 100vw !important;
    height: min(92dvh, 900px) !important;
    max-height: 92dvh !important;
    margin: auto 0 0 !important;
    border-radius: 24px 24px 0 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }
  .station-dialog.dialog-fallback-open {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
  }
  .station-dialog .dialog-close {
    top: 8px;
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }
  .station-content { padding: 12px 12px calc(26px + var(--safe-bottom)) !important; }
  .station-heading { position: sticky; z-index: 5; top: 0; padding-top: 4px; background: #143729; }
  .sir-station-button { min-height: 50px !important; }
  .station-detail-group > summary { font-size: 14px !important; }

  .sir-viewer-header {
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) !important;
    gap: 8px 10px !important;
    padding: calc(8px + var(--safe-top)) max(9px, var(--safe-right)) 9px max(9px, var(--safe-left)) !important;
  }
  .sir-back-button { min-width: 48px; min-height: 48px; padding: 0 12px; }
  .sir-viewer-title strong { font-size: 15px; }
  .sir-viewer-title span { font-size: 10px; }
  .sir-viewer-actions {
    grid-column: 1 / -1 !important;
    width: 100%;
    display: flex !important;
    gap: 7px;
    overflow-x: auto;
    padding: 1px 0 3px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .sir-viewer-actions::-webkit-scrollbar { display: none; }
  .sir-viewer-actions .button, .sir-viewer-actions a {
    min-width: max-content;
    min-height: 48px;
    flex: 0 0 auto !important;
    padding: 0 14px;
    scroll-snap-align: start;
  }
  .sir-viewer-note { max-height: 94px; overflow-y: auto; font-size: 12px; }
  .sir-native-content { padding: 12px 10px calc(94px + var(--safe-bottom)); }
  .sir-native-heading h2 { font-size: 22px; }
  .sir-native-heading p { font-size: 13px; }
  .sir-history-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .sir-history-metric { min-height: 101px; padding: 12px; border-radius: 15px; }
  .sir-history-metric span { min-height: 31px; }
  .sir-history-metric strong { font-size: 20px; }
  .sir-chart-card { padding: 9px; border-radius: 16px; }
  .sir-chart-heading { align-items: start; flex-direction: column; gap: 3px; }
  .sir-native-chart { min-height: 238px; }
  .sir-chart-axis-label { font-size: 9px; }
  .sir-floating-back { left: 14px; right: auto; bottom: calc(14px + var(--safe-bottom)); min-height: 54px; padding: 0 20px; }
  .toast { bottom: calc(86px + var(--safe-bottom)) !important; }
}

/* Profilo specifico 412×915 circa (Pixel 9 Pro in modalità verticale). */
@media (min-width: 390px) and (max-width: 450px) and (min-height: 800px) {
  .map-region { height: 52dvh !important; min-height: 455px !important; }
  .result-card { grid-template-columns: 48px minmax(0,1fr); gap: 11px; }
  .score-orb { width: 48px; height: 48px; }
  .sir-native-content { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 370px) {
  .mobile-app-brand small { display: none; }
  .app-runtime-status .status-badge { display: none; }
  .sir-history-metrics { grid-template-columns: 1fr; }
  .forecast-metrics, .atlas-metrics { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) and (orientation: landscape) {
  .mobile-app-brand small, .species-dock p { display: none; }
  .map-region { height: 72dvh !important; min-height: 320px !important; }
  .station-dialog, .station-dialog.dialog-fallback-open { max-height: 95dvh !important; height: 95dvh !important; }
}

/* Allineamento classi del renderer SVG nativo. */
.sir-chart-y-label,
.sir-chart-x-label,
.sir-chart-unit { fill: #64786e; font-size: 10px; }
.sir-chart-unit { font-weight: 800; }
.sir-temp-line.min { fill: none; stroke: #3f83bd; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.sir-temp-line.mean { fill: none; stroke: #c57d12; stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; }
.sir-temp-line.max { fill: none; stroke: #c64f3f; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.sir-chart-legend span::before {
  content: "";
  width: 20px;
  height: 3px;
  display: inline-block;
  border-radius: 999px;
  background: #6d8177;
}
.sir-chart-legend span.min::before { background: #3f83bd; }
.sir-chart-legend span.mean::before { background: #c57d12; }
.sir-chart-legend span.max::before { background: #c64f3f; }
.sir-native-source-note {
  margin: 14px 0 0;
  padding: 12px 13px;
  border: 1px solid rgba(21,61,46,.14);
  border-radius: 14px;
  background: rgba(21,61,46,.055);
  color: #435e51;
  font-size: 12px;
  line-height: 1.5;
}
.sir-native-source-note strong { color: #153d2e; }
.sir-native-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sir-native-heading > div > span {
  color: #7d5a16;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.sir-source-chip {
  flex: 0 0 auto;
  max-width: 42%;
  overflow: hidden;
  padding: 7px 10px;
  border: 1px solid rgba(21,61,46,.18);
  border-radius: 999px;
  background: rgba(21,61,46,.07);
  color: #153d2e;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sir-empty-chart {
  min-height: 220px;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 18px;
  border-radius: 12px;
  background: #f6faf7;
  color: #153d2e;
  text-align: center;
}
.sir-empty-chart span { color: #687d72; font-size: 12px; line-height: 1.45; }
@media (max-width: 720px) {
  .sir-chart-y-label, .sir-chart-x-label, .sir-chart-unit { font-size: 9px; }
  .sir-source-chip { max-width: 40%; padding: 6px 8px; font-size: 10px; }
}

.map-attribution-text { color: #9fb6aa; font-size: 10px; line-height: 1.45; }


/* 2.0.1 — schede centralina più compatte e dati termici/anemometrici sempre visibili */
.essential-data-card.temperature-background { border-color: rgba(255, 197, 112, .30); }
.essential-data-card.wind { border-color: rgba(133, 202, 224, .34); }
.sir-wind-line { fill: none; stroke: #73b8cf; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }

@media (max-width: 720px) {
  .station-dialog,
  .station-dialog.dialog-fallback-open {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    height: min(84dvh, 820px) !important;
    max-height: 84dvh !important;
    margin: auto 6px 6px !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 22px !important;
  }
  .station-dialog.dialog-fallback-open {
    left: 6px !important;
    right: 6px !important;
    bottom: 6px !important;
  }
  .station-heading h2 { font-size: 18px !important; }
  .station-content { padding: 10px 10px calc(20px + var(--safe-bottom)) !important; }
  .station-essential-summary { gap: 6px !important; margin: 9px 0 !important; }
  .essential-data-card { padding: 8px !important; }
  .essential-data-card > strong { font-size: 14px !important; }
  .essential-data-card > small { font-size: 9px !important; line-height: 1.25 !important; }
  .leaflet-popup-content { margin: 9px 10px !important; }
  .leaflet-popup-content .popup-title { font-size: 14px !important; }
  .leaflet-popup-content .popup-meta,
  .leaflet-popup-content .popup-grid,
  .leaflet-popup-content .popup-rain-context { font-size: 10px !important; line-height: 1.25 !important; }
  .leaflet-popup-content .popup-grid { gap: 4px 7px !important; }
  .leaflet-popup-content .popup-button { min-height: 40px !important; padding: 8px 10px !important; }
}

@media (max-width: 720px) and (orientation: landscape) {
  .station-dialog,
  .station-dialog.dialog-fallback-open {
    height: min(86dvh, 640px) !important;
    max-height: 86dvh !important;
  }
}


/* 2.0.3 — popup centraline mobile stabile, interamente contenuto nella mappa e senza cambio zoom */
.station-map-popup .leaflet-popup-content-wrapper {
  max-height: var(--tem-popup-max-height, 520px);
  overflow: hidden;
}
.station-map-popup .leaflet-popup-content {
  box-sizing: border-box;
  max-height: calc(var(--tem-popup-max-height, 520px) - 22px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.station-map-popup .leaflet-popup-close-button {
  z-index: 3;
  width: 34px !important;
  height: 34px !important;
  font-size: 22px !important;
  line-height: 30px !important;
}
.station-map-popup .popup-title { padding-right: 22px; }

@media (max-width: 720px) {
  .station-map-popup.leaflet-popup {
    max-width: calc(100vw - 18px) !important;
  }
  .station-map-popup .leaflet-popup-content-wrapper {
    border-radius: 14px !important;
  }
  .station-map-popup .leaflet-popup-content {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 7px 8px 8px !important;
    padding-right: 3px;
  }
  .station-map-popup .popup-title {
    margin-bottom: 2px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
  }
  .station-map-popup .popup-score {
    margin-bottom: 5px !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
  }
  .station-map-popup .popup-activity {
    margin-bottom: 5px !important;
    padding: 3px 6px !important;
    font-size: 9px !important;
  }
  .station-map-popup .popup-meta,
  .station-map-popup .popup-grid,
  .station-map-popup .popup-rain-context {
    font-size: 9px !important;
    line-height: 1.18 !important;
  }
  .station-map-popup .popup-meta { margin-bottom: 5px !important; }
  .station-map-popup .popup-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(72px, .85fr) !important;
    gap: 3px 6px !important;
  }
  .station-map-popup .popup-grid strong {
    text-align: right;
    overflow-wrap: anywhere;
  }
  .station-map-popup .popup-rain-context {
    margin-top: 6px !important;
    padding-top: 5px !important;
  }
  .station-map-popup .popup-button {
    min-height: 36px !important;
    margin-top: 7px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
  }
}


/* 2.0.4 — legenda sempre fuori dalla superficie Leaflet e popup libero fino al pulsante finale */
@media (max-width: 720px) {
  .map-region,
  .forecast-map-wrap {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  #map,
  #forecastMap {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: clamp(430px, 60dvh, 560px) !important;
    min-height: 430px !important;
    max-height: none !important;
  }

  .map-region > .map-legend,
  .forecast-map-wrap > .forecast-map-legend {
    position: static !important;
    inset: auto !important;
    order: 2 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  /* Durante la lettura della centralina la legenda scompare: non può coprire
     “Approfondisci dati” o “Apri analisi completa”. Ritorna alla chiusura. */
  .map-region.station-popup-open > .map-legend,
  .forecast-map-wrap.station-popup-open > .forecast-map-legend {
    display: none !important;
  }

  .station-map-popup .leaflet-popup-content {
    padding-bottom: 2px !important;
  }

  .station-map-popup .popup-button {
    position: sticky;
    bottom: 0;
    z-index: 2;
    box-shadow: 0 -7px 12px rgba(22, 60, 44, .92);
  }
}

/* 2.0.5 — avanzamento del completamento automatico dei fattori */
.data-hydration-status {
  margin-top: 8px;
  padding: 9px 11px;
  border: 1px solid rgba(126, 201, 155, .28);
  border-radius: 12px;
  background: rgba(18, 62, 45, .62);
  color: #d7eadf;
  font-size: 11px;
  line-height: 1.4;
}
.data-hydration-status.complete {
  border-color: rgba(104, 201, 126, .38);
  background: rgba(31, 93, 54, .52);
  color: #e6f5e9;
}
@media (max-width: 720px) {
  .data-hydration-status { margin-top: 7px; padding: 8px 9px; font-size: 10px; }
}

/* 2.0.6 — completamento meteo batch, cache IndexedDB e avanzamento territoriale reale */

/* 2.0.7 — meteo obbligatorio, fallback diretto rivalutato e cumulata 15 gg inclusiva */


/* 2.0.9 — caricamento distribuito, compatibile con limiti subrequest Cloudflare */
body.full-data-loading { overflow: hidden; }
body.full-data-loading .loading-overlay {
  position: fixed;
  inset: 0 0 calc(76px + env(safe-area-inset-bottom, 0px)) 0;
  z-index: 5000;
  min-height: 0;
  background: rgba(5, 24, 17, .88);
  padding: max(24px, env(safe-area-inset-top, 0px)) 24px 24px;
}
body.full-data-loading .loading-overlay strong {
  max-width: 520px;
  font-size: 15px;
  line-height: 1.45;
}


/* 2.0.10 — apertura cache-first e completamento non bloccante */
.data-hydration-status:not(.complete)::before {
  content: "↻ ";
  font-weight: 900;
}
body:not(.full-data-loading) .data-hydration-status:not(.hidden) {
  contain: content;
}
@media (max-width: 720px) {
  body:not(.full-data-loading) .loading-overlay { display: none; }
}

/* 2.0.13 — Enciclopedia offline, anagrafica completa e ripresa stabile */
.atlas-toolbar {
  grid-template-columns: minmax(240px, 1.6fr) repeat(5, minmax(120px, .72fr));
  align-items: end;
}
.atlas-refresh { min-height: 46px; }
.mushroom-meta-row {
  display: grid;
  gap: 5px;
  margin-top: 10px;
}
.mushroom-meta-row span {
  display: block;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  background: rgba(255,255,255,.035);
  color: #cdded4;
  font-size: 10px;
  line-height: 1.35;
}
.mushroom-card-actions.single { grid-template-columns: 1fr; }
.mushroom-description-box h3 {
  margin: 0 0 7px;
  color: #f4d58e;
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.mushroom-description-box p { margin: 5px 0; }
.mushroom-description-box.caution {
  border-color: rgba(232,151,94,.28);
  background: rgba(117,54,27,.14);
}
.mushroom-dialog-copy { min-width: 0; }

@media (max-width: 1180px) {
  .atlas-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .atlas-search { grid-column: 1 / -1; }
  .atlas-refresh { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .atlas-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .atlas-search, .atlas-refresh { grid-column: 1 / -1; }
  .mushroom-dialog-copy { padding-bottom: calc(28px + var(--safe-bottom)) !important; }
}

@media (max-width: 430px) {
  .atlas-toolbar { grid-template-columns: 1fr; }
  .atlas-search, .atlas-refresh { grid-column: auto; }
  .mushroom-description-box { padding: 12px; }
}

/* 2.0.14 — modello scientifico a domini */
.domain-analysis{display:grid;gap:.65rem;margin:.8rem 0}.domain-row{border:1px solid var(--border);border-radius:14px;padding:.75rem;background:rgba(255,255,255,.025)}.domain-row>div:first-child{display:flex;justify-content:space-between;gap:1rem}.domain-row p{margin:.45rem 0;font-size:.88rem}.domain-row small{opacity:.78}.domain-row.missing{opacity:.65}.scientific-reliability{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:.75rem 0}.scientific-reliability span{border:1px solid var(--border);border-radius:12px;padding:.55rem;font-size:.82rem}.plausibility-range{padding:.65rem;border-radius:12px;background:rgba(95,156,91,.12);font-size:.88rem}@media(max-width:420px){.scientific-reliability{grid-template-columns:1fr}}

/* TEM 2.0.16 — Enciclopedia locale illustrata e attribuzioni fotografiche */
.atlas-toolbar {
  grid-template-columns: minmax(240px, 1.6fr) repeat(5, minmax(125px, .72fr)) auto;
}
.mushroom-detail { min-width: 0; }
.mushroom-detail-hero {
  display: grid;
  grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr);
  align-items: stretch;
  min-height: 360px;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  background: rgba(12, 40, 28, .96);
}
.mushroom-detail-hero > div:last-child:not(.mushroom-dialog-media) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 30px;
}
.mushroom-detail-hero h2 { margin: 12px 0 7px; font-size: clamp(26px, 5vw, 39px); line-height: 1.08; }
.mushroom-detail-body { padding: 8px 24px 26px; }
.mushroom-dialog-media { position: relative; min-width: 0; min-height: 360px; }
.mushroom-dialog-media .mushroom-dialog-image { min-height: 360px; }
.mushroom-photo-credit {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 9px;
  padding: 7px 9px;
  border-radius: 9px;
  background: rgba(4, 22, 15, .88);
  color: #e7f1eb;
  font-size: 9px;
  line-height: 1.35;
  backdrop-filter: blur(8px);
}
.mushroom-photo-credit a { color: #ffdc96; }
.atlas-reference-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
}
.atlas-reference-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 11px;
  background: rgba(255,255,255,.05);
  color: #dce9e1;
  font-size: 10px;
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}
.atlas-reference-links a:hover { border-color: rgba(255,220,150,.5); color: #ffdc96; }
@media (max-width: 1180px) {
  .atlas-toolbar { grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(125px, .75fr)); }
  .atlas-refresh { grid-column: auto; }
}
@media (max-width: 720px) {
  .atlas-toolbar { grid-template-columns: 1fr 1fr; }
  .atlas-search, .atlas-refresh { grid-column: 1 / -1; }
  .mushroom-detail-hero { grid-template-columns: 1fr; min-height: 0; }
  .mushroom-dialog-media, .mushroom-dialog-media .mushroom-dialog-image { min-height: 250px; max-height: 340px; }
  .mushroom-detail-hero > div:last-child:not(.mushroom-dialog-media) { padding: 25px 20px; }
  .mushroom-detail-body { padding: 7px 16px 22px; }
  .atlas-reference-links { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .atlas-toolbar { grid-template-columns: 1fr; }
  .atlas-search, .atlas-refresh { grid-column: auto; }
}

/* Enciclopedia 2.0.18 */
.mushroom-aliases { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.mushroom-description-box.danger { border-color: rgba(255,110,110,.42); background: rgba(110,20,20,.22); }
.mushroom-description-box.danger h3 { color: #ffb2ae; }

/* TEM 2.0.20 — diario offline delle uscite e campione per la calibrazione */
.field-log-view {
  min-height: calc(100dvh - 58px - var(--safe-top));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px clamp(12px, 3vw, 38px) calc(94px + var(--safe-bottom));
  background:
    radial-gradient(circle at 90% 10%, rgba(230,184,92,.13), transparent 25rem),
    radial-gradient(circle at 10% 42%, rgba(61,139,91,.14), transparent 30rem),
    linear-gradient(155deg, #0a1d15, #123326 57%, #091a13);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.24) transparent;
}
.field-log-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 190px;
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(37,91,62,.97), rgba(17,53,38,.98) 62%, rgba(10,37,26,.98));
  box-shadow: 0 18px 52px rgba(0,0,0,.28);
}
.field-log-hero h2 { margin: 14px 0 9px; font-size: clamp(28px, 4vw, 47px); line-height: 1.04; letter-spacing: -.035em; }
.field-log-hero p { max-width: 800px; margin: 0; color: #d4e3da; font-size: clamp(14px, 1.6vw, 17px); line-height: 1.6; }
.field-log-hero-symbol { font-size: clamp(56px, 8vw, 94px); filter: drop-shadow(0 12px 18px rgba(0,0,0,.28)); }
.field-log-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  margin: 16px 0;
}
.field-log-metrics article {
  min-height: 92px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.055);
}
.field-log-metrics span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.field-log-metrics strong { display: block; margin-top: 9px; font-size: clamp(23px, 3vw, 32px); }
.field-log-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, .8fr); gap: 16px; align-items: start; }
.field-log-form, .field-log-insights {
  padding: clamp(16px, 2.5vw, 26px);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(14,45,32,.91);
  box-shadow: 0 14px 38px rgba(0,0,0,.18);
}
.field-log-section-heading { display: flex; justify-content: space-between; align-items: start; gap: 18px; margin-bottom: 18px; }
.field-log-section-heading h3, .field-log-insights h3 { margin: 10px 0 0; font-size: 24px; }
.field-log-section-heading p { max-width: 410px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.field-log-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.field-log-wide { grid-column: 1 / -1; }
.field-log-form input[type="text"],
.field-log-form input[type="date"],
.field-log-form input[type="number"],
.field-log-form textarea,
.field-log-toolbar input[type="search"] {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.075);
  color: var(--text);
  padding: 10px 13px;
}
.field-log-form input[type="date"] { color-scheme: dark; }
.field-log-form textarea { min-height: 108px; resize: vertical; line-height: 1.45; }
.field-log-form input:disabled { opacity: .5; cursor: not-allowed; }
.field-log-checkbox { align-content: end; grid-template-columns: auto 1fr; align-items: center; min-height: 46px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.045); }
.field-log-checkbox input { width: 21px; height: 21px; accent-color: var(--accent); }
.field-log-checkbox > span { color: var(--text); text-transform: none; letter-spacing: 0; font-size: 13px; }
.field-log-snapshot-hint, #fieldLogFormNotice { margin-top: 13px; }
.field-log-form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.field-log-form-actions .button { min-width: 150px; }
.field-log-insights { position: sticky; top: 12px; }
.field-log-insights > p { color: #d9e8df; line-height: 1.6; }
.field-log-insights .notice { margin-top: 16px; }
.field-log-toolbar {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(13,43,30,.88);
}
.field-log-toolbar .field { min-width: 175px; }
.field-log-toolbar .grow { flex: 1 1 260px; }
.field-log-toolbar .button { min-height: 46px; }
.field-log-summary { margin: 12px 2px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.field-log-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.field-log-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.052);
  box-shadow: 0 9px 25px rgba(0,0,0,.14);
}
.field-log-card header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.field-log-card h3 { margin: 9px 0 0; font-size: 19px; overflow-wrap: anywhere; }
.field-log-result { flex: 0 0 auto; display: inline-flex; min-height: 30px; align-items: center; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 850; }
.field-log-result.positive { color: #c8f7d8; background: rgba(53,178,101,.14); border: 1px solid rgba(73,196,119,.32); }
.field-log-result.negative { color: #ffd0c8; background: rgba(220,91,77,.13); border: 1px solid rgba(230,94,78,.3); }
.field-log-location { margin: 13px 0 8px; color: #dce9e2; line-height: 1.45; }
.field-log-card-meta { display: flex; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: 11px; }
.field-log-card-meta span { padding: 5px 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(0,0,0,.12); }
.field-log-notes { margin: 12px 0 0; color: #c5d5cc; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.field-log-snapshot { display: block; margin-top: 12px; padding: 9px 10px; border-radius: 11px; font-size: 11px; line-height: 1.4; }
.field-log-snapshot.valid { color: #c6f4d5; background: rgba(53,178,101,.11); border: 1px solid rgba(73,196,119,.25); }
.field-log-snapshot.partial { color: #ffe1a5; background: rgba(230,184,92,.1); border: 1px solid rgba(230,184,92,.24); }
.field-log-snapshot.missing { color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.field-log-card footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 13px; }
.button.danger { color: #ffc3ba; border-color: rgba(230,94,78,.3); background: rgba(230,94,78,.1); }
.button.danger:hover { background: rgba(230,94,78,.18); }
.field-log-empty { grid-column: 1 / -1; min-height: 230px; display: grid; place-content: center; justify-items: center; text-align: center; padding: 26px; border: 1px dashed rgba(255,255,255,.18); border-radius: 18px; color: var(--muted); }
.field-log-empty > span { font-size: 46px; }
.field-log-empty strong { margin-top: 10px; color: var(--text); font-size: 18px; }
.field-log-empty p { margin: 7px 0 0; }
.field-log-footer { margin-top: 18px; padding: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.55; }

@media (max-width: 900px) {
  .field-log-layout { grid-template-columns: 1fr; }
  .field-log-insights { position: static; }
  .field-log-list { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .field-log-view { padding: 12px 10px calc(92px + var(--safe-bottom)); }
  .field-log-hero { grid-template-columns: 1fr; min-height: 0; padding: 22px 18px; }
  .field-log-hero-symbol { display: none; }
  .field-log-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-log-metrics article { min-height: 80px; }
  .field-log-form-grid { grid-template-columns: 1fr; }
  .field-log-wide { grid-column: auto; }
  .field-log-section-heading { display: grid; }
  .field-log-toolbar { align-items: stretch; }
  .field-log-toolbar .field, .field-log-toolbar .button { width: 100%; min-width: 0; }
  .field-log-form-actions .button { width: 100%; }
  .field-log-card header { display: grid; }
  .field-log-result { width: fit-content; }
  .view-nav.bottom-view-nav .view-nav-button { padding-left: 3px !important; padding-right: 3px !important; }
  .view-nav.bottom-view-nav .view-nav-button > span:last-child { font-size: 10px !important; }
}


/* TEM 2.0.25 — Diario: scorrimento pagina nativo, senza contenitori annidati su WebView */
.field-log-view {
  width: 100%;
  min-height: calc(100dvh - var(--top-app-bar-height, 58px) - var(--species-bar-height, 62px));
  overflow-x: hidden;
  overflow-y: visible;
  touch-action: pan-y;
}
.field-log-view form,
.field-log-view section,
.field-log-view footer { touch-action: pan-y; }
.field-log-view input,
.field-log-view select,
.field-log-view textarea,
.field-log-view button { touch-action: manipulation; }

@media (max-width: 720px) {
  html, body {
    min-height: 100%;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  body.field-log-active {
    position: static !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
  }
  body.field-log-active .app-shell,
  body.field-log-active main {
    min-height: 100dvh;
    height: auto !important;
    overflow: visible !important;
  }
  .field-log-view {
    height: auto !important;
    min-height: calc(100dvh - 110px - var(--safe-top)) !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--bottom-navigation-height, 76px) + 34px + var(--safe-bottom)) !important;
  }
  /* Un aggiornamento meteo non deve immobilizzare Diario, Enciclopedia o Previsioni. */
  body.full-data-loading { overflow-y: auto !important; }
  body.full-data-loading .loading-overlay {
    display: none !important;
    pointer-events: none !important;
  }
}