/* Vaglio premium theme — loaded after app.css. Visual layer only. */

:root {
  /* ---- Brand: blu notte + verde smeraldo del logo ---- */
  --navy: #0B1F3A;
  --navy-soft: #17304F;
  --navy-deep: #050F1E;
  --emerald: #00A878;
  --emerald-dark: #00875F;
  --emerald-darker: #006E4E;
  --emerald-soft: #E8F8F2;
  --emerald-border: #A6E4CD;

  /* ---- Superfici: bianco puro e grigi freddi ---- */
  --white: #FFFFFF;
  --paper: #FFFFFF;
  --paper-2: #FAFBFC;
  --paper-3: #F4F6F8;
  --line: #E6E9EE;
  --line-soft: #EFF1F4;
  --line-strong: #D3D9E2;
  --grey: #8A94A6;
  --grey-soft: #A8B0BE;

  /* ---- Alias storici: la vecchia scala scura ora e' chiara. ----
     Le superfici "forest" erano sfondi scuri: diventano bianche.
     Gli "ivory" erano testo chiaro sopra: diventano inchiostro. */
  --forest: var(--white);
  --forest-mid: var(--paper-2);
  --forest-deep: var(--white);
  --forest-glow: var(--paper-3);
  --lime: var(--emerald);
  --lime-mid: var(--emerald);
  --lime-deep: var(--emerald-dark);
  --ivory: var(--white);
  --ivory-2: var(--navy);
  --card: var(--white);
  --ink: var(--navy);
  --ink-soft: #4A5568;
  --mist: rgba(11, 31, 58, .04);

  /* ---- Tipografia: geometrica per il display, Inter per la UI ---- */
  --font-display: Outfit, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --font-serif: Outfit, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  --font-sans: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;

  --bg: var(--white);
  --surface: var(--white);
  --surface-subtle: var(--paper-2);
  --surface-hover: var(--paper-3);
  --border: var(--line);
  --border-strong: var(--line-strong);
  --text: var(--navy);
  --text-soft: #33415C;
  --muted: #5A6579;
  --muted-strong: #3C4759;
  --placeholder: #97A0B0;
  --graphite: var(--navy);
  --teal: var(--emerald-dark);
  --teal-hover: var(--emerald-darker);
  --teal-soft: var(--emerald-soft);
  --teal-border: var(--emerald-border);
  --accent: var(--emerald-dark);
  --accent-hover: var(--emerald-darker);
  --accent-soft: var(--emerald-soft);
  --accent-border: var(--emerald-border);
  --accent-ring: rgba(0, 168, 120, .18);
  --focus: var(--emerald-dark);
  --vaglio-green: var(--emerald);
  --vaglio-green-dark: var(--emerald-dark);
  --vaglio-green-soft: var(--emerald-soft);
  --vaglio-green-pale: var(--emerald-border);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --type-display: clamp(44px, 4.6vw, 72px);
  --type-section: clamp(26px, 2.2vw, 30px);
  --type-body: 16px;
  --type-body-sm: 14px;
  --type-label: 11px;
  --header-height: 76px;
  --page-gutter: var(--page-pad);
  --page-canvas: 1320px;
  --hero-cluster: 587px;
  --hero-top-gap: max(0px, (100dvh - 2 * var(--header-height) - var(--hero-cluster)) / 2);
  --shadow-card: 0 1px 2px rgba(11, 31, 58, .05);
  --shadow-float: 0 1px 3px rgba(11, 31, 58, .06), 0 12px 28px rgba(11, 31, 58, .07);
  --accent-solid: var(--emerald);
  --accent-solid-hover: var(--emerald-dark);
  --font-weight-title: 600;

  /* Testo/linee che prima erano avorio su scuro: ora inchiostro su bianco. */
  --ivory-body: rgba(11, 31, 58, .70);
  --ivory-label: rgba(11, 31, 58, .52);
  --ivory-line: var(--line);
  --step-idle: #98A1B0;
  --step-idle-title: #8A94A6;
  --step-idle-desc: #A8B0BE;
  --motion-premium: 180ms ease;

  /* I pannelli "glass" scuri diventano card bianche con bordo hairline. */
  --glass-panel: var(--white);
  --glass-panel-border: var(--line);
  --glass-panel-radius: 20px;
  --glass-inset: var(--paper-2);
  --glass-inset-border: var(--line-soft);
  --glass-inset-radius: 14px;
  --glass-tip: var(--emerald-soft);
  --glass-tip-border: var(--emerald-border);
}

html { scrollbar-gutter: auto; }
body {
  color: var(--ink);
  background: var(--ivory);
  font-family: var(--font-sans);
}

@keyframes premium-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes premium-step {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------- */
/* Shell / navbar                                                              */
/* -------------------------------------------------------------------------- */

html body .app-header,
html body:has(#view-analysis.is-active) .app-header {
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  min-height: var(--header-height);
  padding: 0 clamp(16px, 3.4vw, 48px);
  overflow: visible;
  color: var(--ivory-2);
  background: var(--forest);
  border: 0;
  border-bottom:0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}

html body .sidebar-head { padding: 0; }
html body .brand,
html body:has(#view-analysis.is-active) .brand { gap: 14px; color: var(--ivory-2); }
html body .brand strong,
html body:has(#view-analysis.is-active) .brand strong {
  color: var(--ivory-2);
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -.03em;
}
html body .brand small,
html body:has(#view-analysis.is-active) .brand small {
  margin-top: -1px;
  color: rgba(0, 135, 95, .82);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .16em;
}
html body .brand-mark,
html body:has(#view-analysis.is-active) .brand-mark {
  grid-template-columns: repeat(3, 6px);
  gap: 4px;
  width: 34px;
  height: 34px;
  padding: 6px 6px 5px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
html body .brand-mark i,
html body:has(#view-analysis.is-active) .brand-mark i {
  background: var(--lime);
  border-radius: 999px;
  opacity: 1;
}
html body .brand-mark i:nth-child(1),
html body:has(#view-analysis.is-active) .brand-mark i:nth-child(1) {
  height: 10px;
  background: #E8F8F2;
}
html body .brand-mark i:nth-child(2),
html body:has(#view-analysis.is-active) .brand-mark i:nth-child(2) {
  height: 17px;
  background: #00A878;
}
html body .brand-mark i:nth-child(3),
html body:has(#view-analysis.is-active) .brand-mark i:nth-child(3) {
  height: 24px;
  background: #FFFFFF;
}

html body .main-nav,
html body:has(#view-analysis.is-active) .main-nav {
  gap: clamp(18px, 3vw, 40px);
  height: var(--header-height);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  transform: translate(-50%, -50%);
}

html body .nav-item,
html body:has(#view-analysis.is-active) .nav-item {
  min-height: var(--header-height);
  padding: 0 2px;
  color: rgba(11, 31, 58, .62);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html body .nav-item .ui-icon,
html body:has(#view-analysis.is-active) .nav-item .ui-icon { display: none; }
html body .nav-copy b,
html body:has(#view-analysis.is-active) .nav-copy b {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
}
html body .nav-item:hover {
  color: var(--ivory-2);
  background: transparent;
}
html body .nav-item.is-active,
html body:has(#view-analysis.is-active) .nav-item.is-active {
  color: var(--ivory-2);
  background: transparent;
  border: 0;
  box-shadow: none;
}
html body .nav-item.is-active::after,
html body:has(#view-analysis.is-active) .nav-item.is-active::after {
  position: absolute;
  right: -2px;
  bottom: 20px;
  left: -2px;
  height: 3px;
  content: "";
  background: #00A878;
  border-radius: 2px;
}

html body .account-menu,
html body:has(#view-analysis.is-active) .account-menu {
  position: relative;
  right: auto;
  color: var(--ivory-2);
  background: transparent;
  border-radius: 999px;
}
html body .account-menu:hover,
html body .account-menu[aria-expanded="true"] {
  background: rgba(11, 31, 58, .08);
}
html body .account-avatar {
  color: var(--ivory-2);
  background: #FFFFFF;
  border: 1px solid rgba(168, 217, 134, .28);
}
html body .account-copy strong { color: var(--ivory-2); }
html body .account-copy small { color: rgba(168, 217, 134, .8); }
html body .account-menu > .ui-icon { color: rgba(11, 31, 58, .7); }

html body .app-content,
html body:has(#view-analysis.is-active) .app-content {
  padding-top: var(--header-height);
  background: var(--ivory);
}

html body .topbar {
  background: rgba(245, 244, 236, .92);
  border-bottom: 1px solid rgba(11, 31, 58, .06);
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                     */
/* -------------------------------------------------------------------------- */

html body .button-primary,
html body .button-download,
html body #view-analysis .button-primary,
html body #view-analysis .wizard-next:not(:disabled),
html body .platform-action-primary,
html body #view-analysis .zone-search-button,
html body #view-analysis .zone-search-button.platform-action-primary {
  color: #fff;
  background: var(--accent-solid);
  border-color: transparent !important;
  box-shadow: none;
  transition: background 160ms ease, color 160ms ease;
}

html body .button-primary:hover:not(:disabled),
html body .button-download:hover,
html body #view-analysis .button-primary:hover:not(:disabled),
html body .platform-action-primary:hover:not(:disabled),
html body #view-analysis .zone-search-button:hover:not(:disabled),
html body #view-analysis .zone-search-button.platform-action-primary:hover:not(:disabled) {
  color: #fff;
  background: var(--accent-solid-hover);
  border-color: transparent !important;
  transform: none;
}

html body .button-primary:focus-visible,
html body .zone-search-button:focus-visible,
html body .nav-item:focus-visible,
html body .account-menu:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------- */
/* Page titles on ivory views                                                  */
/* -------------------------------------------------------------------------- */

html body:not([data-active-view="results"]):not([data-active-view="how-it-works"]):not([data-active-view="privacy"]):not([data-active-view="cookie"]) .page-heading h1,
html body #view-settings .settings-page-intro h1 {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.08;
}

html body .panel {
  background: var(--card);
  border-color: rgba(11, 31, 58, .08);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}

html body .section-code {
  color: var(--vaglio-green-dark);
}

/* -------------------------------------------------------------------------- */
/* Panoramica hero shell                                                       */
/* -------------------------------------------------------------------------- */

html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))),
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) {
  background: var(--forest);
}

html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-header,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-header {
  background: transparent;
  border: 0;
  box-shadow: none;
}

html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-content,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-content,
html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-main,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-main,
html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) #view-analysis,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) #view-analysis,
html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .analysis-grid,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .analysis-grid,
html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .launch-panel,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .launch-panel,
html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) #analysis-form,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) #analysis-form {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-content,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-content {
  padding-top: 0;
}

html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-main,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-main {
  display: block;
  min-height: 100dvh;
  place-items: unset;
}

html body[data-active-view="analysis"] #view-analysis.is-active:not(:has(.monitor-panel:not(.is-hidden))) {
  width: 100%;
  max-width: none;
  margin: 0;
  translate: none;
}

html body[data-active-view="analysis"]:has(#analysis-step-location.is-active) .topbar,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active) .topbar {
  display: none;
}

html body #view-analysis .analysis-heading { display: none; }
html body #view-analysis .recurring-search-header { display: none; }
html body #view-analysis #analysis-step-location #zone-help { display: none; }

html body #analysis-step-location.is-active,
html body #analysis-step-goal.is-active {
  min-height: 100dvh;
  padding: 0;
  background: var(--forest);
}

html body #view-analysis #analysis-step-location,
html body #view-analysis #analysis-step-goal {
  padding: 0;
}

html body .premium-split,
html body #view-analysis .location-step-layout,
html body #view-analysis #analysis-step-location .location-step-layout,
html body #analysis-workspace:not(:has(.monitor-panel:not(.is-hidden))) .location-step-layout,
html body #view-analysis #analysis-step-goal .recurring-target-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 380px);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: none;
  gap: clamp(32px, 4vw, 48px);
  align-items: stretch;
  min-height: 100dvh;
  padding: calc(var(--header-height) + 24px) clamp(32px, 4vw, 64px) 32px;
  box-sizing: border-box;
  background-color: var(--forest);
  background-image:
    linear-gradient(rgba(255, 255, 255, .96), rgba(255, 255, 255, .96)),
    url("topo.svg");
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: auto, cover;
}

html body .sidebar-footer a,
html body .sidebar-footer button,
html body .sidebar-footer > p,
html body .sidebar-footer > p a {
  color: rgba(11, 31, 58, .52);
  font-size: 12px;
  font-weight: 600;
}

html body .sidebar-footer a:hover,
html body .sidebar-footer button:hover {
  color: var(--ivory-2);
}

html body:has(#cookie-banner.is-visible) .sidebar-footer {
  opacity: 0;
  pointer-events: none;
}

/* ---- Banner cookie: scheda chiara, come il resto del design ------------- */
/* Era blu notte con il testo scritto in blu notte (residuo degli alias
   --ivory-2 -> --navy): illeggibile. Ora e' una scheda bianca. */
html body .cookie-banner {
  right: 20px;
  bottom: 20px;
  left: 20px;
  gap: 20px;
  align-items: center;
  max-width: 680px;
  padding: 18px 20px;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  backdrop-filter: none;
  box-shadow: 0 20px 44px rgba(11, 31, 58, .10), 0 2px 6px rgba(11, 31, 58, .04);
}

html body .cookie-banner .section-code {
  margin: 0 0 6px;
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
}

html body .cookie-banner-copy p {
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
}

html body .cookie-banner-copy a {
  color: var(--emerald-dark);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--emerald-border);
}

html body .cookie-banner-copy a:hover {
  color: var(--emerald-darker);
  border-bottom-color: var(--emerald-dark);
}

/* Le due azioni sono pillole, come "Continua" nell'onboarding. */
html body .cookie-banner .button {
  height: 40px;
  min-height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 550;
}

html body .cookie-banner .button-ghost {
  color: var(--text-soft);
  background: transparent;
  border: 1px solid var(--line-strong);
}

html body .cookie-banner .button-ghost:hover:not(:disabled) {
  color: var(--navy);
  background: var(--paper-3);
  border-color: var(--grey-soft);
}

html body .cookie-banner .button-primary {
  color: var(--white);
  background: var(--accent-solid);
  border-color: transparent;
}

html body .cookie-banner .button-primary:hover:not(:disabled) {
  background: var(--accent-solid-hover);
}

html body .premium-stage,
html body .location-stage,
html body .recurring-target-main {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: calc(100dvh - var(--header-height) - 56px);
  align-self: stretch;
  flex-direction: column;
  padding: 0;
  overflow: visible;
  color: var(--ivory-2);
  background: transparent;
  animation: none;
}

html body .premium-stage::before,
html body .location-stage::before,
html body .recurring-target-main::before {
  display: none;
}

html body .location-kicker,
html body #view-analysis .location-kicker,
html body #view-analysis #analysis-step-location .location-kicker {
  display: inline-flex;
  grid-area: auto;
  gap: 14px;
  align-items: center;
  width: max-content;
  max-width: none;
  margin: 0 0 20px;
  padding: 6px 14px;
  color: rgba(11, 31, 58, .82);
  background: rgba(11, 31, 58, .05);
  border: 1px solid rgba(11, 31, 58, .12);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  animation: none;
}

html body .location-kicker span,
html body .location-kicker b {
  padding: 0;
  color: inherit;
  background: none;
  border-radius: 0;
  font-size: inherit;
  font-weight: 650;
  letter-spacing: inherit;
}

html body .location-kicker span {
  padding-right: 12px;
  border-right: 1px solid rgba(11, 31, 58, .16);
}

html body .location-step-main,
html body #view-analysis #analysis-step-location .location-step-main {
  grid-area: auto;
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

html body .location-intro h1,
html body #view-analysis .location-intro h1 {
  max-width: none;
  margin: 0;
  color: var(--ivory-2);
  font-family: var(--font-serif);
  font-size: clamp(40px, 4.8vw, 58px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.02;
}

html body .hero-accent {
  white-space: nowrap;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: #00875F;
  -webkit-text-fill-color: currentColor;
}

html body .location-intro > p,
html body #view-analysis .location-intro > p:last-child {
  max-width: 32rem;
  margin: 16px 0 0;
  color: rgba(11, 31, 58, .68);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .005em;
}

html body #view-analysis #analysis-step-location .wizard-step-heading,
html body #view-analysis #analysis-step-goal .wizard-step-heading {
  width: 100%;
  max-width: none;
  margin: 32px 0 16px;
}

html body #view-analysis #analysis-step-location .wizard-step-heading h3 {
  color: var(--ivory-2);
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.3;
}

html body #view-analysis #analysis-step-goal .wizard-step-heading h3 {
  color: var(--ivory-2);
  font-family: var(--font-serif);
  font-size: clamp(40px, 5vw, 58px);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.05;
}

html body #view-analysis #analysis-step-location .wizard-step-heading p,
html body #view-analysis #analysis-step-goal .wizard-step-heading p {
  margin-top: 6px;
  color: rgba(11, 31, 58, .62);
  font-size: 14px;
  font-weight: 400;
}

/* -------------------------------------------------------------------------- */
/* Search pill                                                                 */
/* -------------------------------------------------------------------------- */

html body #view-analysis #analysis-step-location .zone-search-control,
html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control {
  position: relative;
  z-index: 12;
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 720px;
  min-height: 64px;
  padding: 5px 5px 5px 18px;
  isolation: isolate;
  background: var(--card);
  border: 1px solid rgba(11, 31, 58, .08);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}

html body #view-analysis #analysis-step-location .zone-search-input,
html body #view-analysis #analysis-step-location .zone-search-input:focus-within {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 22px minmax(0, 1fr) 32px;
  gap: 10px;
  min-height: 52px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html body #view-analysis #analysis-step-location .zone-search-icon {
  width: 20px;
  height: 20px;
  color: var(--muted);
}

html body #view-analysis #analysis-step-location .field .zone-search-input input {
  min-height: 50px;
  color: var(--ink);
  font-size: 15px;
}

html body #view-analysis #analysis-step-location .field .zone-search-input input::placeholder {
  color: var(--muted);
}

html body #view-analysis #analysis-step-location .zone-search-button,
html body #view-analysis #analysis-step-location .zone-search-button.platform-action-primary {
  position: static !important;
  top: auto;
  right: auto;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 120px;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 20px !important;
  color: #fff !important;
  background: var(--accent-solid) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 160ms ease;
}

html body #view-analysis #analysis-step-location .zone-search-button .ui-icon {
  width: 16px;
  height: 16px;
  transition: transform 160ms ease;
}

html body #view-analysis #analysis-step-location .zone-search-button:hover:not(:disabled),
html body #view-analysis #analysis-step-location .zone-search-button.platform-action-primary:hover:not(:disabled) {
  color: #fff !important;
  background: var(--accent-solid-hover) !important;
  transform: none;
}

html body #view-analysis #analysis-step-location .zone-search-button:hover:not(:disabled) .ui-icon {
  transform: translateX(2px);
}

html body #view-analysis #analysis-step-location .zone-results {
  top: calc(100% + 10px);
  overflow: hidden;
  background: var(--card);
  border: 1px solid rgba(11, 31, 58, .08);
  border-radius: 16px;
  box-shadow: var(--shadow-float);
}

html body #view-analysis #analysis-step-location .popular-zones {
  max-width: 720px;
  margin-top: 20px;
}

html body #view-analysis #analysis-step-location .popular-zones > span {
  margin-bottom: 10px;
  color: rgba(11, 31, 58, .5);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
}

html body #view-analysis #analysis-step-location .popular-zones button {
  min-height: 36px;
  padding: 0 12px;
  color: rgba(11, 31, 58, .78);
  background: transparent;
  border: 1px solid rgba(11, 31, 58, .14);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

html body #view-analysis #analysis-step-location .popular-zones button:hover,
html body #view-analysis #analysis-step-location .popular-zones button:focus-visible {
  color: var(--ivory-2);
  background: rgba(11, 31, 58, .06);
  border-color: rgba(11, 31, 58, .24);
  outline: 0;
}

html body #view-analysis #analysis-step-location .popular-zones .ui-icon {
  width: 14px;
  height: 14px;
  color: rgba(143, 188, 120, .85);
}

html body #view-analysis #analysis-step-location .zone-selection {
  max-width: 860px;
  margin-top: 16px;
  color: var(--ink);
  background: var(--card);
  border: 0;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
}

html body #view-analysis #analysis-step-location .zone-wide-warning {
  max-width: 860px;
  color: #B45309;
  background: #FEF3C7;
  border-color: #F5D08A;
  border-radius: 16px;
}

html body #analysis-step-location .wizard-actions {
  display: none;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
}

html body #analysis-step-location:has(.zone-selection:not(.is-hidden)) .wizard-actions {
  display: flex;
  width: 100%;
  max-width: 860px;
}

html body #analysis-step-location .wizard-next {
  height: 48px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
}

/* -------------------------------------------------------------------------- */
/* Feature bar                                                                 */
/* -------------------------------------------------------------------------- */

html body #view-analysis .trust-strip,
html body .location-stage .trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  max-width: 720px;
  margin-top: auto;
  padding: 16px 0 0;
  border-top: 1px solid rgba(11, 31, 58, .08);
}

html body #view-analysis .trust-strip article {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 16px;
}

html body #view-analysis .trust-strip article + article {
  border-left: 1px solid rgba(11, 31, 58, .1);
}

html body #view-analysis .trust-strip .ui-icon {
  width: 18px;
  height: 18px;
  color: rgba(143, 188, 120, .9);
  stroke-width: 1.6;
}

html body #view-analysis .trust-strip b {
  color: rgba(11, 31, 58, .92);
  font-size: 12px;
  font-weight: 600;
}

html body #view-analysis .trust-strip span {
  margin-top: 3px;
  color: rgba(11, 31, 58, .52);
  font-size: 11px;
  line-height: 1.5;
}

/* -------------------------------------------------------------------------- */
/* Progress card                                                               */
/* -------------------------------------------------------------------------- */

html body #view-analysis .premium-split > .analysis-journey,
html body #view-analysis #analysis-step-location .analysis-journey,
html body #view-analysis #analysis-step-goal .analysis-journey,
html body #view-analysis .home-progress.side-progress-card {
  display: flex;
  grid-area: auto;
  align-self: start;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 28px 24px 20px;
  overflow: hidden;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: flex-start;
  color: var(--ink);
  background: var(--card);
  border: 1px solid rgba(11, 31, 58, .07);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  animation: none;
  transition: none;
}

html body #view-analysis .premium-split > .analysis-journey:hover {
  box-shadow: var(--shadow-card);
}

html body #view-analysis .journey-title,
html body #view-analysis #analysis-step-location .journey-title,
html body #view-analysis .home-progress .journey-title {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

html body #view-analysis .home-progress ol,
html body #view-analysis #analysis-step-location .analysis-journey ol,
html body #view-analysis #analysis-step-goal .analysis-journey ol {
  display: grid;
  flex: 0 0 auto;
  align-content: start;
  gap: 0;
  margin: 0;
  padding: 0;
}

html body #view-analysis .home-progress li,
html body #view-analysis #analysis-step-location .analysis-journey li {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 80px;
  color: var(--muted);
  animation: none;
}

html body #view-analysis .home-progress li:nth-child(1) { animation-delay: 80ms; }
html body #view-analysis .home-progress li:nth-child(2) { animation-delay: 140ms; }
html body #view-analysis .home-progress li:nth-child(3) { animation-delay: 200ms; }
html body #view-analysis .home-progress li:nth-child(4) { animation-delay: 260ms; }

html body #view-analysis .home-progress li:not(:last-child)::after,
html body #view-analysis #analysis-step-location .analysis-journey li::after,
html body #view-analysis #analysis-step-location .analysis-journey li:last-child::after {
  position: absolute;
  top: 30px;
  bottom: 6px;
  left: 13px;
  display: block;
  width: 0;
  content: "";
  background: none;
  border-left: 1px dashed #A6E4CD;
}

html body #view-analysis .home-progress li:last-child::after,
html body #view-analysis #analysis-step-location .analysis-journey li:last-child::after {
  display: none;
}

html body #view-analysis .home-progress li > span,
html body #view-analysis #analysis-step-location .analysis-journey li > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--muted);
  background: #E8F8F2;
  border: 0;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
}

html body #view-analysis .home-progress li b,
html body #view-analysis #analysis-step-location .analysis-journey li b {
  margin-top: 2px;
  color: #A8B0BE;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

html body #view-analysis .home-progress li b::after {
  display: none !important;
  content: none !important;
}

html body #view-analysis .home-progress li small {
  margin-top: 3px;
  color: #A8B0BE;
  font-size: 12px;
  font-weight: 400;
}

html body #view-analysis .home-progress li.is-current,
html body #view-analysis #analysis-step-location .analysis-journey li.is-current {
  color: var(--ink);
}

html body #view-analysis .home-progress li.is-current > span,
html body #view-analysis #analysis-step-location .analysis-journey li.is-current > span {
  color: var(--ink);
  background: var(--forest);
}

html body #view-analysis .home-progress li.is-current b,
html body #view-analysis #analysis-step-location .analysis-journey li.is-current b {
  color: var(--ink);
}

html body #view-analysis .home-progress li.is-current small {
  color: #5A6579;
}

html body #view-analysis .home-progress li.is-complete > span {
  position: relative;
  color: transparent;
  background: rgba(143, 188, 120, .35);
  border-color: transparent;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  overflow: hidden;
}

html body #view-analysis .home-progress li.is-complete > span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  transform: translate(-50%, -50%);
  background-color: var(--forest);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

html body .journey-tip,
html body #view-analysis .home-progress .journey-tip {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 16px 0 0;
  padding: 14px 14px;
  color: #00875F;
  background: #E8F8F2;
  border: 1px solid rgba(107, 155, 82, .14);
  border-radius: 12px;
}

html body .journey-tip .ui-icon { width: 16px; height: 16px; color: var(--accent-solid); }
html body .journey-tip b { color: var(--ink); font-size: 12px; font-weight: 600; }
html body .journey-tip span { margin-top: 2px; color: #00875F; font-size: 12px; line-height: 1.45; }

/* -------------------------------------------------------------------------- */
/* Target step on dark stage                                                   */
/* -------------------------------------------------------------------------- */

html body #view-analysis #analysis-step-goal .search-target-option {
  color: var(--ivory-2);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(11, 31, 58, .12);
  border-radius: 16px;
}

html body #view-analysis #analysis-step-goal .search-target-option:has(:checked) {
  background: rgba(168, 217, 134, .1);
  border-color: rgba(168, 217, 134, .45);
}

html body #view-analysis #analysis-step-goal .search-target-option strong { color: var(--ivory-2); }
html body #view-analysis #analysis-step-goal .search-target-option small { color: rgba(11, 31, 58, .58); }

html body #view-analysis #analysis-step-goal .search-target-selector legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

html body #view-analysis #analysis-step-goal .search-config-summary {
  color: var(--ivory-2);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(11, 31, 58, .12);
  border-radius: 16px;
}

html body #view-analysis #analysis-step-goal .search-config-open {
  color: var(--lime);
}

html body #view-analysis #analysis-step-goal .recurring-search-actions {
  position: fixed;
  z-index: 45;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  min-height: 76px;
  margin: 0;
  padding: 12px max(24px, 32%);
  color: var(--ivory-2);
  background: rgba(255, 255, 255, .9);
  border-top: 1px solid rgba(11, 31, 58, .1);
  box-shadow: none;
  backdrop-filter: blur(16px);
}

html body #view-analysis #analysis-step-goal .recurring-search-actions > .button-ghost {
  color: var(--ivory-2);
  background: rgba(255, 255, 255, .06);
  border-color: rgba(11, 31, 58, .14);
  border-radius: 999px;
}

html body #view-analysis #analysis-step-goal {
  padding-bottom: 88px;
}

html body #view-analysis .analysis-availability {
  margin: calc(var(--header-height) + 12px) clamp(28px, 5vw, 72px) 0;
  color: var(--ink);
  background: var(--card);
  border-radius: 16px;
}

/* -------------------------------------------------------------------------- */
/* Monitor / settings remain ivory                                             */
/* -------------------------------------------------------------------------- */

html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) {
  background: var(--ivory);
}

html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .app-header {
  background: var(--forest);
}

html body .monitor-panel {
  background: var(--card);
  border-radius: 20px;
}

html body #view-settings .settings-navigation button[aria-current="true"] {
  color: var(--ink);
  background: var(--vaglio-green-soft);
  border-color: var(--vaglio-green-pale);
}

html body #view-settings .settings-section {
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                  */
/* -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  html body .location-intro h1,
  html body #view-analysis .location-intro h1 {
    font-size: clamp(38px, 4.4vw, 52px);
  }

  html body .premium-split,
  html body #view-analysis .location-step-layout,
  html body #view-analysis #analysis-step-location .location-step-layout,
  html body #view-analysis #analysis-step-goal .recurring-target-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
  }
}

@media (max-width: 900px) {
  html body .nav-copy { display: block; }
  html body .nav-item,
  html body:has(#view-analysis.is-active) .nav-item {
    width: auto;
    min-height: var(--header-height);
    padding: 0 6px;
  }
  html body .nav-item .ui-icon,
  html body:has(#view-analysis.is-active) .nav-item .ui-icon { display: none; }
  html body .nav-copy b { font-size: 12px; }
  html body .nav-item.is-active::after,
  html body:has(#view-analysis.is-active) .nav-item.is-active::after {
    right: 6px;
    bottom: 18px;
    left: 6px;
  }

  html body .account-menu-wrap,
  html body:has(#view-analysis.is-active) .account-menu-wrap { display: flex; }
  html body .account-menu { display: flex; }
  html body .account-copy,
  html body .account-menu > .ui-icon { display: none; }

  html body #analysis-step-location.is-active,
  html body #analysis-step-goal.is-active {
    background: var(--forest);
  }

  html body .premium-split,
  html body #view-analysis .location-step-layout,
  html body #view-analysis #analysis-step-location .location-step-layout,
  html body #analysis-workspace:not(:has(.monitor-panel:not(.is-hidden))) .location-step-layout,
  html body #view-analysis #analysis-step-goal .recurring-target-layout {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: var(--header-height);
    background-color: var(--forest);
    background-image:
      linear-gradient(rgba(255, 255, 255, .95), rgba(255, 255, 255, .95)),
      url("topo.svg");
    background-repeat: no-repeat;
    background-position: center, center;
    background-size: auto, cover;
  }

  html body .location-stage {
    display: contents;
  }

  html body .location-stage::before {
    display: none;
  }

  html body .premium-stage,
  html body .recurring-target-main {
    min-height: 0;
    padding: calc(var(--header-height) + 20px) 20px 24px;
  }

  html body .location-kicker { order: 1; margin: 16px 20px; }
  html body .location-step-main { order: 2; padding: 0 20px; }
  html body #view-analysis .premium-split > .analysis-journey,
  html body #view-analysis #analysis-step-location .analysis-journey,
  html body #view-analysis #analysis-step-goal .analysis-journey {
    order: 3;
    align-self: stretch;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 20px 16px 8px;
    padding: 24px 22px;
    flex: 0 0 auto;
  }
  html body #analysis-step-location .wizard-actions { order: 4; padding: 0 20px; }
  html body #view-analysis .trust-strip,
  html body .location-stage .trust-strip {
    order: 5;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: none;
    margin: 8px 20px 28px;
    padding: 18px 0 8px;
    border-top: 1px solid rgba(11, 31, 58, .08);
  }
  html body #view-analysis .trust-strip article + article { border-left: 0; padding-left: 0; }

  html body .location-intro h1,
  html body #view-analysis .location-intro h1 {
    max-width: none;
    font-size: clamp(40px, 11vw, 52px);
  }

  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 8px;
    border-radius: 16px;
  }

  html body #view-analysis #analysis-step-location .zone-search-button,
  html body #view-analysis #analysis-step-location .zone-search-button.platform-action-primary {
    width: 100%;
    min-width: 0;
  }

  html body #view-analysis .home-progress ol {
    grid-template-columns: 1fr;
  }

  html body #view-analysis .home-progress li { min-height: 72px; }
  html body #view-analysis .home-progress li:not(:last-child)::after { display: block; }

  html body #view-analysis #analysis-step-goal .recurring-search-actions {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 600px) {
  html body .brand small { display: none; }
  html body .main-nav { gap: 10px; }
  html body .nav-copy b { font-size: 11px; }
  html body .location-kicker { letter-spacing: .12em; }
}

@media (prefers-reduced-motion: reduce) {
  html body .premium-stage,
  html body .location-kicker,
  html body #view-analysis .premium-split > .analysis-journey,
  html body #view-analysis .home-progress li {
    animation: none;
  }

  html body #view-analysis #analysis-step-location .zone-search-button .ui-icon,
  html body .button-primary {
    transition: none;
  }
}

/* Full-bleed split: do not let alerts or leftover padding push the hero down. */
html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .launch-panel,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .launch-panel {
  position: relative;
  min-height: 100dvh;
}

html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .analysis-availability:not(.is-hidden),
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .analysis-availability:not(.is-hidden) {
  display: none;
}

html body[data-active-view="analysis"]:has(#analysis-step-location.is-active) .account-menu,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active) .account-menu {
  color: var(--ivory-2);
}

html body[data-active-view="analysis"]:has(#analysis-step-location.is-active) .account-copy strong,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active) .account-copy strong {
  color: var(--ivory-2);
}

html body[data-active-view="analysis"]:has(#analysis-step-location.is-active) .account-copy small,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active) .account-copy small,
html body[data-active-view="analysis"]:has(#analysis-step-location.is-active) .account-menu > .ui-icon,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active) .account-menu > .ui-icon {
  color: rgba(168, 217, 134, .8);
}

html body[data-active-view="analysis"]:has(.analysis-availability:not(.is-hidden)):has(#analysis-step-location.is-active) .location-stage,
html body[data-active-view="analysis"]:has(.analysis-availability:not(.is-hidden)):has(#analysis-step-location.is-active) .premium-stage {
  padding-top: 0;
}

html body #view-analysis #analysis-step-location,
html body #view-analysis #analysis-step-goal {
  padding: 0 !important;
}

html body #view-analysis #analysis-step-location .popular-zones > div {
  flex-wrap: wrap;
  overflow: visible;
}

@media (max-width: 900px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))),
  html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) {
    background: var(--forest);
  }

  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-content,
  html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-content,
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .launch-panel,
  html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .launch-panel {
    background: var(--forest);
  }

  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .launch-panel,
  html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .launch-panel {
    padding-top: var(--header-height);
  }

  html body .premium-split,
  html body #view-analysis .location-step-layout,
  html body #view-analysis #analysis-step-location .location-step-layout,
  html body #analysis-workspace:not(:has(.monitor-panel:not(.is-hidden))) .location-step-layout,
  html body #view-analysis #analysis-step-goal .recurring-target-layout {
    padding-top: 0;
  }

  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .analysis-availability:not(.is-hidden) {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    display: grid;
    width: auto;
    margin: 12px 16px 0 !important;
  }

  html body[data-active-view="analysis"]:has(.analysis-availability:not(.is-hidden)):has(#analysis-step-location.is-active) .location-stage,
  html body[data-active-view="analysis"]:has(.analysis-availability:not(.is-hidden)):has(#analysis-step-location.is-active) .premium-stage {
    padding-top: 20px;
  }

  html body #view-analysis #analysis-step-location .analysis-journey,
  html body #view-analysis #analysis-step-goal .analysis-journey,
  html body #view-analysis .trust-strip,
  html body .location-stage .trust-strip {
    width: auto;
    max-width: none;
    box-sizing: border-box;
  }

  html body {
    overflow-x: hidden;
  }
}

/* -------------------------------------------------------------------------- */
/* Home polish v7 — cascade overrides                                          */
/* -------------------------------------------------------------------------- */

html body .brand small {
  color: rgba(143, 188, 120, .72);
}

html body .button-primary:focus-visible,
html body .zone-search-button:focus-visible,
html body .nav-item:focus-visible,
html body .account-menu:focus-visible {
  outline: 2px solid rgba(143, 188, 120, .65);
  outline-offset: 2px;
}

html body #view-analysis #analysis-step-location .zone-search-input:focus-within {
  box-shadow: none;
}

html body #view-analysis #analysis-step-location .field .zone-search-input input:focus-visible {
  outline: none;
}

html body #view-analysis #analysis-step-location .zone-search-control:focus-within {
  border-color: rgba(107, 155, 82, .35);
  box-shadow: 0 0 0 3px rgba(107, 155, 82, .12);
}

html body #view-analysis .home-progress li:nth-child(1),
html body #view-analysis .home-progress li:nth-child(2),
html body #view-analysis .home-progress li:nth-child(3),
html body #view-analysis .home-progress li:nth-child(4) {
  animation: none;
  animation-delay: 0;
}

@media (max-width: 1280px) {
  html body .premium-split,
  html body #view-analysis .location-step-layout,
  html body #view-analysis #analysis-step-location .location-step-layout,
  html body #view-analysis #analysis-step-goal .recurring-target-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    gap: 32px;
    padding-inline: clamp(24px, 3vw, 48px);
  }

  html body .location-intro h1,
  html body #view-analysis .location-intro h1 {
    font-size: clamp(38px, 4.4vw, 52px);
  }
}

@media (max-width: 1024px) {
  html body .premium-split,
  html body #view-analysis .location-step-layout,
  html body #view-analysis #analysis-step-location .location-step-layout,
  html body #view-analysis #analysis-step-goal .recurring-target-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 320px);
    gap: 28px;
  }
}

@media (max-width: 768px) {
  html body .premium-stage,
  html body .location-stage,
  html body .recurring-target-main {
    min-height: 0;
    align-self: auto;
  }

  html body #view-analysis .trust-strip article {
    padding: 10px 0;
  }

  html body #view-analysis .trust-strip article + article {
    border-left: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(11, 31, 58, .08);
  }
}

@media (max-width: 430px) {
  html body .premium-split,
  html body #view-analysis .location-step-layout,
  html body #view-analysis #analysis-step-location .location-step-layout {
    padding-inline: 16px;
    padding-bottom: 24px;
  }

  html body .location-kicker {
    margin-inline: 0;
    font-size: 9px;
  }

  html body .location-step-main {
    padding-inline: 0;
  }

  html body #view-analysis #analysis-step-location .analysis-journey,
  html body #view-analysis #analysis-step-goal .analysis-journey {
    margin-inline: 0;
    padding: 20px 18px;
  }

  html body #view-analysis .trust-strip {
    margin-inline: 0;
    width: 100%;
  }
}

/* -------------------------------------------------------------------------- */
/* Home composition — match reference screenshot                               */
/* Search, chips and feature bar share one column. Card is content-height.     */
/* -------------------------------------------------------------------------- */

html body #view-analysis #analysis-step-location.is-active {
  background-color: var(--forest);
  background-image:
    linear-gradient(rgba(255, 255, 255, .88), rgba(255, 255, 255, .88)),
    url("topo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 460px);
  gap: clamp(36px, 4vw, 64px);
  align-items: stretch;
  padding: calc(var(--header-height) + 12px) clamp(36px, 4vw, 56px) 20px;
  background: transparent;
  background-image: none;
}

html body #view-analysis #analysis-step-location .location-stage {
  display: flex;
  min-height: calc(100dvh - var(--header-height) - 44px);
  flex-direction: column;
  justify-content: flex-start;
  align-self: stretch;
  gap: 20px;
}

html body #view-analysis #analysis-step-location .location-hero-block {
  display: flex;
  flex: 0 0 auto;
  min-height: 0;
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;
}

html body #view-analysis #analysis-step-location .location-step-main {
  display: flex;
  flex: 0 0 auto;
  min-height: 0;
  flex-direction: column;
  justify-content: flex-start;
  gap: 28px;
}

html body #view-analysis #analysis-step-location .wizard-step-heading {
  margin: 0;
}

html body #view-analysis #analysis-step-location .location-kicker {
  margin: 0;
  padding: 8px 16px;
  font-size: 11px;
}

html body #view-analysis #analysis-step-location .location-intro h1 {
  max-width: 13ch;
  font-size: clamp(60px, 7.2vw, 108px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.04em;
}

html body #view-analysis #analysis-step-location .hero-accent {
  color: var(--lime);
  -webkit-text-fill-color: var(--lime);
}

html body #view-analysis #analysis-step-location .location-intro > p {
  max-width: 42rem;
  margin-top: 22px;
  font-size: 22px;
  line-height: 1.45;
  color: rgba(11, 31, 58, .74);
}

html body #view-analysis #analysis-step-location .wizard-step-heading h3 {
  font-size: clamp(24px, 2.4vw, 30px);
}

html body #view-analysis #analysis-step-location .wizard-step-heading p {
  font-size: 17px;
}

html body #view-analysis #analysis-step-location .zone-search-control,
html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control,
html body #view-analysis #analysis-step-location .popular-zones,
html body #view-analysis #analysis-step-location .zone-selection,
html body #view-analysis #analysis-step-location .zone-wide-warning,
html body #view-analysis #analysis-step-location:has(.zone-selection:not(.is-hidden)) .wizard-actions,
html body #view-analysis #analysis-step-location .trust-strip,
html body .location-stage .trust-strip {
  width: 100%;
  max-width: none;
}

html body #view-analysis #analysis-step-location .zone-search-control,
html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control {
  min-height: 104px;
  padding: 10px 10px 10px 28px;
  background: #fff;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .14);
}

html body #view-analysis #analysis-step-location .zone-search-input,
html body #view-analysis #analysis-step-location .zone-search-input:focus-within {
  min-height: 72px;
  grid-template-columns: 26px minmax(0, 1fr) 32px;
}

html body #view-analysis #analysis-step-location .zone-search-icon {
  width: 24px;
  height: 24px;
}

html body #view-analysis #analysis-step-location .field .zone-search-input input {
  min-height: 78px;
  font-size: 19px;
}

html body #view-analysis #analysis-step-location .zone-search-button,
html body #view-analysis #analysis-step-location .zone-search-button.platform-action-primary {
  min-width: 168px;
  height: 84px !important;
  min-height: 84px !important;
  padding: 0 30px !important;
  background: var(--accent-solid) !important;
  border-radius: 999px !important;
  font-size: 18px;
}

html body #view-analysis #analysis-step-location .zone-search-button:hover:not(:disabled),
html body #view-analysis #analysis-step-location .zone-search-button.platform-action-primary:hover:not(:disabled) {
  background: var(--accent-solid-hover) !important;
}

html body #view-analysis #analysis-step-location .popular-zones {
  margin-top: 22px;
}

html body #view-analysis #analysis-step-location .popular-zones > span {
  display: none;
}

html body #view-analysis #analysis-step-location .popular-zones button {
  min-height: 52px;
  padding: 0 18px;
  font-size: 14px;
}

html body #view-analysis #analysis-step-location .trust-strip,
html body .location-stage .trust-strip {
  flex: 1 1 auto;
  margin-top: 0;
  padding: 36px 20px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(11, 31, 58, .12);
  border-radius: 20px;
  align-content: center;
}

html body #view-analysis #analysis-step-location .trust-strip article {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 16px;
  padding: 8px 24px;
  align-items: center;
}

html body #view-analysis #analysis-step-location .trust-strip .ui-icon {
  width: 32px;
  height: 32px;
}

html body #view-analysis #analysis-step-location .trust-strip b {
  font-size: 18px;
}

html body #view-analysis #analysis-step-location .trust-strip span {
  margin-top: 6px;
  font-size: 15px;
}

html body #view-analysis #analysis-step-location .analysis-journey,
html body #view-analysis .premium-split > .analysis-journey {
  align-self: stretch;
  width: 100%;
  height: auto;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 32px 30px 24px;
  flex: 1 1 auto;
  justify-content: space-between;
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
}

html body #view-analysis #analysis-step-location .analysis-journey ol,
html body #view-analysis .home-progress ol {
  flex: 1 1 auto;
  align-content: stretch;
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

html body #view-analysis #analysis-step-location .analysis-journey li,
html body #view-analysis .home-progress li {
  min-height: 0;
  align-items: center;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 16px;
}

html body #view-analysis #analysis-step-location .analysis-journey li > span,
html body #view-analysis .home-progress li > span {
  width: 38px;
  height: 38px;
  font-size: 14px;
}

html body #view-analysis #analysis-step-location .analysis-journey li::after {
  top: calc(50% + 22px);
  bottom: calc(-50% + 22px);
  left: 18px;
}

html body #view-analysis #analysis-step-location .analysis-journey li b,
html body #view-analysis .home-progress li b {
  font-size: 18px;
}

html body #view-analysis #analysis-step-location .analysis-journey li small,
html body #view-analysis .home-progress li small {
  font-size: 14px;
}

@media (max-width: 900px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .analysis-availability:not(.is-hidden) {
    display: none !important;
  }

  html body #view-analysis #analysis-step-location.is-active {
    background-size: cover;
  }

  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    display: flex;
    flex-direction: column;
    max-width: none;
    min-height: 0;
    padding: 16px 20px 32px;
    gap: 0;
  }

  html body #view-analysis #analysis-step-location .location-stage {
    display: contents;
    min-height: 0;
  }

  html body #view-analysis #analysis-step-location .location-hero-block {
    display: contents;
  }

  html body #view-analysis #analysis-step-location .location-kicker {
    order: 1;
    margin: 8px 0 16px;
  }

  html body #view-analysis #analysis-step-location .location-step-main {
    order: 2;
    display: flex;
    flex: none;
    min-height: 0;
  }

  html body #view-analysis #analysis-step-location .wizard-step-heading {
    margin: 28px 0 14px;
  }

  html body #view-analysis #analysis-step-location .location-intro h1 {
    max-width: none;
    font-size: clamp(36px, 10vw, 48px);
  }

  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 10px;
    border-radius: 28px;
  }

  html body #view-analysis #analysis-step-location .zone-search-button,
  html body #view-analysis #analysis-step-location .zone-search-button.platform-action-primary {
    width: 100%;
  }

  html body #view-analysis #analysis-step-location .analysis-journey,
  html body #view-analysis .premium-split > .analysis-journey {
    order: 3;
    align-self: stretch;
    width: auto;
    max-width: none;
    margin: 20px 0 8px;
    flex: 0 0 auto;
    justify-content: flex-start;
    padding: 24px 22px;
  }

  html body #view-analysis #analysis-step-location .analysis-journey ol,
  html body #view-analysis .home-progress ol {
    flex: 0 0 auto;
    grid-template-rows: none;
    align-content: start;
  }

  html body #view-analysis #analysis-step-location .analysis-journey li,
  html body #view-analysis .home-progress li {
    min-height: 72px;
  }

  html body #view-analysis #analysis-step-location .wizard-actions {
    order: 4;
  }

  html body #view-analysis #analysis-step-location .trust-strip,
  html body .location-stage .trust-strip {
    order: 5;
    flex: 0 0 auto;
    grid-template-columns: 1fr;
    margin-top: 16px;
    padding: 20px 12px;
  }

  html body #view-analysis #analysis-step-location .trust-strip article + article {
    border-left: 0;
  }
}

/* -------------------------------------------------------------------------- */
/* Mockup match — panoramica location                                          */
/* Wins against app.css :has(#view-analysis) and earlier premium layers.       */
/* -------------------------------------------------------------------------- */

html body:has(#view-analysis.is-active) .brand strong {
  color: var(--ivory-2);
  font-weight: 650;
}
html body:has(#view-analysis.is-active) .brand small {
  color: rgba(0, 135, 95, .82);
  letter-spacing: .16em;
}
html body:has(#view-analysis.is-active) .account-copy strong { color: var(--ivory-2); }
html body:has(#view-analysis.is-active) .account-copy small { color: rgba(0, 135, 95, .8); }
html body:has(#view-analysis.is-active) .account-avatar {
  color: var(--ivory-2);
  background: #FFFFFF;
  border-color: rgba(0, 135, 95, .28);
}

html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))),
html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-content,
html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-main,
html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) #view-analysis,
html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .launch-panel {
  background: #FFFFFF;
}

html:has(body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden)))),
html:has(body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden)))) {
  height: 100%;
  overflow: hidden;
  scrollbar-gutter: auto;
  background: #FFFFFF;
}

html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))),
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: #FFFFFF;
}

html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-content,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-content {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background: #FFFFFF;
}

html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-header {
  background: transparent;
}

html body #view-analysis #analysis-step-location.is-active {
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background-color: #FFFFFF;
  background-image:
    radial-gradient(ellipse 78% 64% at 38% 42%, rgba(0, 168, 120, .21) 0%, rgba(17, 29, 33, 0) 68%),
    linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, rgba(17, 29, 33, .2) 45%, rgba(255, 255, 255, .55) 100%),
    url("topo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  gap: clamp(28px, 3.6vw, 56px);
  align-items: stretch;
  width: 100%;
  min-height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: calc(var(--header-height) + 8px) clamp(28px, 4vw, 56px) 24px;
  overflow: hidden;
  background: transparent;
  background-image: none;
}

html body #view-analysis #analysis-step-location .location-stage {
  display: flex;
  min-width: 0;
  min-height: 0;
  max-height: calc(100dvh - var(--header-height) - 32px);
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
}

html body #view-analysis #analysis-step-location .location-hero-block {
  display: flex;
  flex: 0 0 auto;
  min-height: 0;
  flex-direction: column;
  gap: 14px;
}

html body #view-analysis #analysis-step-location .location-kicker {
  margin: 0 0 4px;
  padding: 7px 14px;
  color: rgba(11, 31, 58, .86);
  background: rgba(255, 255, 255, .42);
  border: 1px solid rgba(11, 31, 58, .12);
  font-size: 10px;
  letter-spacing: .16em;
}

html body #view-analysis #analysis-step-location .location-step-main {
  display: flex;
  flex: 0 0 auto;
  min-height: 0;
  flex-direction: column;
  gap: 0;
}

html body #view-analysis #analysis-step-location .location-intro h1 {
  max-width: 14ch;
  color: #0B1F3A;
  font-family: var(--font-serif);
  font-size: clamp(44px, 4.8vw, 64px);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.08;
}

html body #view-analysis #analysis-step-location .hero-accent {
  color: #00875F;
  -webkit-text-fill-color: #00875F;
}

html body #view-analysis #analysis-step-location .location-intro > p {
  max-width: 36rem;
  margin: 14px 0 0;
  color: rgba(11, 31, 58, .68);
  font-size: 16px;
  line-height: 1.55;
}

html body #view-analysis #analysis-step-location .wizard-step-heading {
  margin: 28px 0 14px;
}

html body #view-analysis #analysis-step-location .wizard-step-heading h3 {
  color: #0B1F3A;
  font-family: var(--font-serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: -.02em;
}

html body #view-analysis #analysis-step-location .wizard-step-heading p {
  margin-top: 4px;
  color: rgba(11, 31, 58, .58);
  font-size: 14px;
}

html body #view-analysis #analysis-step-location .zone-search-control,
html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: none;
  min-height: 64px;
  padding: 6px 6px 6px 20px;
  background: #fff;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}

html body #view-analysis #analysis-step-location .zone-search-input,
html body #view-analysis #analysis-step-location .zone-search-input:focus-within {
  min-height: 52px;
  grid-template-columns: 22px minmax(0, 1fr) 32px;
}

html body #view-analysis #analysis-step-location .zone-search-icon {
  width: 20px;
  height: 20px;
  color: var(--muted);
}

html body #view-analysis #analysis-step-location .field .zone-search-input input {
  min-height: 50px;
  color: var(--ink);
  font-size: 15px;
}

html body #view-analysis #analysis-step-location .zone-search-button,
html body #view-analysis #analysis-step-location .zone-search-button.platform-action-primary {
  min-width: 128px;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 22px !important;
  color: #fff !important;
  background: #00A878 !important;
  border-radius: 999px !important;
  font-size: 15px;
  font-weight: 600;
}

html body #view-analysis #analysis-step-location .zone-search-button:hover:not(:disabled),
html body #view-analysis #analysis-step-location .zone-search-button.platform-action-primary:hover:not(:disabled) {
  background: #00875F !important;
}

html body #view-analysis #analysis-step-location .popular-zones {
  width: 100%;
  max-width: none;
  margin-top: 16px;
}

html body #view-analysis #analysis-step-location .popular-zones > span {
  display: block;
  margin-bottom: 10px;
  color: rgba(11, 31, 58, .5);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .01em;
}

html body #view-analysis #analysis-step-location .popular-zones button {
  min-height: 38px;
  padding: 0 14px;
  color: rgba(11, 31, 58, .82);
  background: rgba(255, 255, 255, .28);
  border: 1px solid rgba(11, 31, 58, .16);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
}

html body #view-analysis #analysis-step-location .popular-zones .ui-icon {
  width: 14px;
  height: 14px;
  color: rgba(0, 168, 120, .9);
}

html body #view-analysis #analysis-step-location .trust-strip,
html body .location-stage .trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 0 0 auto;
  align-content: center;
  width: 100%;
  max-width: none;
  margin-top: auto;
  padding: 18px 10px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(11, 31, 58, .16);
  border-radius: 16px;
}

html body #view-analysis #analysis-step-location .trust-strip article {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 4px 14px;
}

html body #view-analysis #analysis-step-location .trust-strip .ui-icon {
  width: 18px;
  height: 18px;
  color: #00875F;
}

html body #view-analysis #analysis-step-location .trust-strip b {
  font-size: 13px;
  font-weight: 600;
}

html body #view-analysis #analysis-step-location .trust-strip span {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
}

html body #view-analysis #analysis-step-location .analysis-journey,
html body #view-analysis .premium-split > .analysis-journey {
  display: flex;
  align-self: stretch;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: calc(100dvh - var(--header-height) - 32px);
  margin: 0;
  padding: 28px 24px 20px;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  color: var(--ink);
  background: #FFFFFF;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

html body #view-analysis #analysis-step-location .journey-title {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .16em;
}

html body #view-analysis #analysis-step-location .analysis-journey ol,
html body #view-analysis .home-progress ol {
  flex: 1 1 auto;
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

html body #view-analysis #analysis-step-location .analysis-journey li,
html body #view-analysis .home-progress li {
  min-height: 0;
  align-items: center;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
}

html body #view-analysis #analysis-step-location .analysis-journey li > span,
html body #view-analysis .home-progress li > span {
  width: 32px;
  height: 32px;
  color: var(--muted);
  background: #F4F6F8;
  font-size: 13px;
}

html body #view-analysis #analysis-step-location .analysis-journey li.is-current > span,
html body #view-analysis .home-progress li.is-current > span {
  color: var(--ink);
  background: #FFFFFF;
}

html body #view-analysis #analysis-step-location .analysis-journey li b,
html body #view-analysis .home-progress li b {
  color: #A8B0BE;
  font-size: 15px;
}

html body #view-analysis #analysis-step-location .analysis-journey li.is-current b,
html body #view-analysis .home-progress li.is-current b {
  color: #0B1F3A;
}

html body #view-analysis #analysis-step-location .analysis-journey li small,
html body #view-analysis .home-progress li small {
  color: #A8B0BE;
  font-size: 12.5px;
}

html body #view-analysis #analysis-step-location .analysis-journey li.is-current small {
  color: #5A6579;
}

html body #view-analysis #analysis-step-location .analysis-journey li::after {
  top: calc(50% + 18px);
  bottom: calc(-50% + 18px);
  left: 15px;
  border-left: 1px dashed #E6E9EE;
}

html body #view-analysis .home-progress .journey-tip {
  margin-top: 12px;
  padding: 14px;
  color: #00875F;
  background: #E8F8F2;
  border: 0;
  border-radius: 14px;
}

@media (max-width: 900px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) {
    overflow: auto;
  }

  html body:has(#view-analysis.is-active) .nav-copy,
  html body:has(#view-analysis.is-active) .nav-item .nav-copy {
    display: block;
  }

  html body:has(#view-analysis.is-active) .nav-copy b {
    font-size: 12px;
  }

  html body:has(#view-analysis.is-active) .main-nav,
  html body:has(#view-analysis.is-active) .app-header .main-nav {
    position: static;
    gap: 10px;
    width: max-content;
    height: var(--header-height);
    margin-left: auto;
    transform: none;
  }

  html body:has(#view-analysis.is-active) .nav-item {
    min-width: 0;
    padding: 0 4px;
  }

  html body #view-analysis #analysis-step-location.is-active {
    max-height: none;
    overflow: visible;
  }

  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 16px 20px 32px;
    gap: 0;
  }

  html body #view-analysis #analysis-step-location .location-stage {
    display: contents;
    max-height: none;
  }

  html body #view-analysis #analysis-step-location .location-hero-block {
    display: contents;
  }

  html body #view-analysis #analysis-step-location .location-kicker { order: 1; margin: 8px 0 16px; }
  html body #view-analysis #analysis-step-location .location-step-main { order: 2; }

  html body #view-analysis #analysis-step-location .location-intro h1 {
    max-width: none;
    font-size: clamp(34px, 9vw, 46px);
  }

  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 10px;
    border-radius: 28px;
  }

  html body #view-analysis #analysis-step-location .zone-search-button,
  html body #view-analysis #analysis-step-location .zone-search-button.platform-action-primary {
    width: 100%;
  }

  html body #view-analysis #analysis-step-location .analysis-journey,
  html body #view-analysis .premium-split > .analysis-journey {
    order: 3;
    max-height: none;
    margin: 20px 0 8px;
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  html body #view-analysis #analysis-step-location .analysis-journey ol,
  html body #view-analysis .home-progress ol {
    flex: 0 0 auto;
    grid-template-rows: none;
  }

  html body #view-analysis #analysis-step-location .trust-strip,
  html body .location-stage .trust-strip {
    order: 5;
    grid-template-columns: 1fr;
    margin-top: 16px;
  }

  html body #view-analysis #analysis-step-location .trust-strip article + article {
    border-left: 0;
  }
}

/* -------------------------------------------------------------------------- */
/* Desktop polish — tighter proportions, quieter chrome, clearer hierarchy     */
/* -------------------------------------------------------------------------- */

html body .nav-item,
html body:has(#view-analysis.is-active) .nav-item,
html body .account-menu,
html body:has(#view-analysis.is-active) .account-menu {
  transition: color var(--motion-premium), background var(--motion-premium);
}

html body #view-analysis #analysis-step-location.is-active {
  background-image:
    radial-gradient(ellipse 78% 64% at 38% 42%, rgba(0, 168, 120, .08) 0%, rgba(17, 29, 33, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .58) 0%, rgba(17, 29, 33, .5) 48%, rgba(255, 255, 255, .72) 100%),
    url("topo.svg");
}

html body #view-analysis #analysis-step-location .location-intro > p {
  margin-top: 18px;
  color: var(--ivory-body);
  font-size: 16px;
  line-height: 1.6;
}

html body #view-analysis #analysis-step-location .hero-accent {
  color: var(--lime);
  -webkit-text-fill-color: var(--lime);
}

html body #view-analysis #analysis-step-location .wizard-step-heading {
  margin: 38px 0 18px;
}

html body #view-analysis #analysis-step-location .wizard-step-heading h3 {
  color: var(--ivory-2);
  font-size: clamp(20px, 1.9vw, 24px);
  font-weight: 500;
  line-height: 1.25;
}

html body #view-analysis #analysis-step-location .wizard-step-heading p {
  margin-top: 6px;
  color: var(--ivory-label);
  font-size: 14px;
  line-height: 1.5;
}

html body #view-analysis #analysis-step-location .zone-search-control,
html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control {
  gap: 6px;
  min-height: 56px;
  padding: 5px 5px 5px 16px;
  background: #fff;
  border: 1px solid rgba(11, 31, 58, .08);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(11, 31, 58, .009);
  transition: border-color var(--motion-premium), box-shadow var(--motion-premium);
}

html body #view-analysis #analysis-step-location .zone-search-control:hover {
  border-color: rgba(11, 31, 58, .14);
}

html body #view-analysis #analysis-step-location .zone-search-control:focus-within {
  border-color: rgba(0, 168, 120, .42);
  box-shadow: 0 1px 2px rgba(11, 31, 58, .009), 0 0 0 3px rgba(0, 168, 120, .14);
}

html body #view-analysis #analysis-step-location .zone-search-input,
html body #view-analysis #analysis-step-location .zone-search-input:focus-within {
  align-items: center;
  height: 46px;
  min-height: 46px !important;
  grid-template-columns: 20px minmax(0, 1fr) 32px;
  gap: 10px;
}

html body #view-analysis #analysis-step-location .zone-search-icon {
  width: 18px;
  height: 18px;
  color: var(--step-idle);
}

html body #view-analysis #analysis-step-location .field .zone-search-input input {
  min-height: 46px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.3;
}

html body #view-analysis #analysis-step-location .field .zone-search-input input::placeholder {
  color: var(--step-idle);
}

html body #view-analysis #analysis-step-location .zone-search-button,
html body #view-analysis #analysis-step-location .zone-search-button.platform-action-primary {
  min-width: 108px;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  background: var(--accent-solid) !important;
  border-radius: 999px !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background var(--motion-premium);
}

html body #view-analysis #analysis-step-location .zone-search-button .ui-icon {
  width: 15px;
  height: 15px;
  transition: transform var(--motion-premium);
}

html body #view-analysis #analysis-step-location .popular-zones {
  margin-top: 18px;
}

html body #view-analysis #analysis-step-location .popular-zones > span {
  margin-bottom: 10px;
  color: var(--ivory-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
}

html body #view-analysis #analysis-step-location .popular-zones > div {
  gap: 8px;
}

html body #view-analysis #analysis-step-location .popular-zones button {
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  color: var(--ivory-body);
  background: transparent;
  border: 1px solid var(--ivory-line);
  font-size: 12px;
  font-weight: 500;
  transition: color var(--motion-premium), background var(--motion-premium), border-color var(--motion-premium);
}

html body #view-analysis #analysis-step-location .popular-zones button:hover,
html body #view-analysis #analysis-step-location .popular-zones button:focus-visible {
  color: var(--ivory-2);
  background: rgba(11, 31, 58, .05);
  border-color: rgba(11, 31, 58, .22);
}

html body #view-analysis #analysis-step-location .popular-zones .ui-icon {
  width: 13px;
  height: 13px;
  color: var(--lime);
}

html body #view-analysis #analysis-step-location .trust-strip,
html body .location-stage .trust-strip {
  margin-top: auto;
  padding: 16px 6px;
  background: rgba(11, 31, 58, .03);
  border: 1px solid rgba(11, 31, 58, .1);
  border-radius: 16px;
}

html body #view-analysis #analysis-step-location .trust-strip article {
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  padding: 2px 14px;
}

html body #view-analysis #analysis-step-location .trust-strip article + article {
  border-left: 1px solid rgba(11, 31, 58, .08);
}

html body #view-analysis #analysis-step-location .trust-strip .ui-icon {
  width: 16px;
  height: 16px;
  color: var(--lime);
  stroke-width: 1.6;
}

html body #view-analysis #analysis-step-location .trust-strip b {
  color: var(--ivory-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
}

html body #view-analysis #analysis-step-location .trust-strip span {
  margin-top: 3px;
  color: var(--ivory-label);
  font-size: 12px;
  line-height: 1.45;
}

html body #view-analysis #analysis-step-location .analysis-journey,
html body #view-analysis .premium-split > .analysis-journey {
  padding: 30px 24px 24px;
  background: var(--ivory);
  border: 0;
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
}

html body #view-analysis #analysis-step-location .journey-title {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .18em;
}

html body #view-analysis #analysis-step-location .analysis-journey li,
html body #view-analysis .home-progress li {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
}

html body #view-analysis #analysis-step-location .analysis-journey li > span,
html body #view-analysis .home-progress li > span {
  width: 30px;
  height: 30px;
  color: var(--step-idle);
  background: #F4F6F8;
  font-size: 12px;
  font-weight: 600;
  transition: color var(--motion-premium), background var(--motion-premium);
}

html body #view-analysis #analysis-step-location .analysis-journey li b,
html body #view-analysis .home-progress li b {
  margin-top: 0;
  color: var(--step-idle-title);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  transition: color var(--motion-premium);
}

html body #view-analysis #analysis-step-location .analysis-journey li small,
html body #view-analysis .home-progress li small {
  margin-top: 4px;
  color: var(--step-idle-desc);
  font-size: 12.5px;
  line-height: 1.4;
  transition: color var(--motion-premium);
}

html body #view-analysis #analysis-step-location .analysis-journey li.is-current > span,
html body #view-analysis .home-progress li.is-current > span {
  color: var(--ink);
  background: var(--forest-mid);
}

html body #view-analysis #analysis-step-location .analysis-journey li.is-current b,
html body #view-analysis .home-progress li.is-current b {
  color: var(--ink);
}

html body #view-analysis #analysis-step-location .analysis-journey li.is-current small {
  color: var(--muted);
}

html body #view-analysis #analysis-step-location .analysis-journey li::after {
  top: calc(50% + 17px);
  bottom: calc(-50% + 17px);
  left: 14px;
  border-left: 1px dashed #E6E9EE;
}

html body #view-analysis .home-progress .journey-tip {
  margin-top: 14px;
  padding: 14px 14px;
  color: var(--ink-soft);
  background: #E8F8F2;
  border: 0;
  border-radius: 12px;
}

html body .journey-tip b { color: var(--ink); font-size: 12.5px; }
html body .journey-tip span { color: var(--muted); font-size: 12.5px; }

@media (min-width: 901px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split,
  html body #view-analysis #analysis-step-goal .recurring-target-layout {
    grid-template-columns: minmax(0, 1fr) minmax(292px, 308px);
    gap: clamp(40px, 4.6vw, 80px);
    padding: calc(var(--header-height) + 14px) clamp(32px, 4vw, 64px) 28px;
  }

  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control,
  html body #view-analysis #analysis-step-location .popular-zones,
  html body #view-analysis #analysis-step-location .zone-selection,
  html body #view-analysis #analysis-step-location .zone-wide-warning,
  html body #view-analysis #analysis-step-location .trust-strip,
  html body .location-stage .trust-strip {
    width: min(100%, 68.75rem);
    max-width: 1100px;
  }
}

@media (min-width: 1280px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 312px);
    gap: clamp(52px, 5.2vw, 88px);
  }

  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control,
  html body #view-analysis #analysis-step-location .popular-zones,
  html body #view-analysis #analysis-step-location .zone-selection,
  html body #view-analysis #analysis-step-location .zone-wide-warning,
  html body #view-analysis #analysis-step-location .trust-strip,
  html body .location-stage .trust-strip {
    width: min(1100px, 86%);
    max-width: 1100px;
  }
}

@media (min-width: 1440px) {
  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control,
  html body #view-analysis #analysis-step-location .popular-zones,
  html body #view-analysis #analysis-step-location .trust-strip,
  html body .location-stage .trust-strip {
    width: min(1100px, 86%);
  }
}

@media (min-width: 1600px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    max-width: 1640px;
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr) 312px;
    gap: 80px;
  }

  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control,
  html body #view-analysis #analysis-step-location .popular-zones,
  html body #view-analysis #analysis-step-location .zone-selection,
  html body #view-analysis #analysis-step-location .zone-wide-warning,
  html body #view-analysis #analysis-step-location .trust-strip,
  html body .location-stage .trust-strip {
    width: min(100%, 1100px);
    max-width: 1100px;
  }
}

@media (max-width: 1024px) and (min-width: 901px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split,
  html body #view-analysis #analysis-step-goal .recurring-target-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 300px);
    gap: 32px;
    padding-inline: 28px;
  }

  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .popular-zones,
  html body #view-analysis #analysis-step-location .trust-strip,
  html body .location-stage .trust-strip {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 900px) {
  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control {
    min-height: 0;
    padding: 8px;
    border-radius: 24px;
  }

  html body #view-analysis #analysis-step-location .zone-search-button,
  html body #view-analysis #analysis-step-location .zone-search-button.platform-action-primary {
    width: 100%;
    min-width: 0;
  }

  html body #view-analysis #analysis-step-location .trust-strip,
  html body .location-stage .trust-strip {
    width: 100%;
    max-width: none;
    padding: 16px 12px;
  }

  html body #view-analysis #analysis-step-location .trust-strip article + article {
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .nav-item,
  html body .account-menu,
  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-search-button,
  html body #view-analysis #analysis-step-location .zone-search-button .ui-icon,
  html body #view-analysis #analysis-step-location .popular-zones button,
  html body #view-analysis #analysis-step-location .analysis-journey li > span,
  html body #view-analysis #analysis-step-location .analysis-journey li b,
  html body #view-analysis #analysis-step-location .analysis-journey li small {
    transition: none;
  }
}

/* Avanzamento: content-sized, not stretched to the column height. */
@media (min-width: 901px) {
  html body #view-analysis #analysis-step-location .analysis-journey.home-progress,
  html body #view-analysis .premium-split > .analysis-journey.home-progress {
    align-self: start;
    height: auto;
    min-height: 0;
    max-height: none;
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  html body #view-analysis #analysis-step-location .analysis-journey ol,
  html body #view-analysis .home-progress ol {
    flex: 0 0 auto;
    align-content: start;
    grid-template-rows: none;
    gap: 2px;
  }

  html body #view-analysis #analysis-step-location .analysis-journey li,
  html body #view-analysis .home-progress li {
    min-height: 0;
    padding: 10px 0;
  }

  html body #view-analysis #analysis-step-location .analysis-journey li::after {
    top: 42px;
    bottom: -12px;
    left: 14px;
  }
}

/* -------------------------------------------------------------------------- */
/* Nav glass + search field cleanup + landing scale                            */
/* -------------------------------------------------------------------------- */

html body .app-header .main-nav,
html body:has(#view-analysis.is-active) .app-header .main-nav {
  gap: 2px;
  height: 44px;
  min-height: 44px;
  padding: 4px 8px;
  background: rgba(11, 31, 58, .08);
  border: 1px solid rgba(11, 31, 58, .12);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(11, 31, 58, .08);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

html body .app-header .nav-item,
html body:has(#view-analysis.is-active) .app-header .nav-item {
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
}

html body .app-header .nav-item.is-active::after,
html body:has(#view-analysis.is-active) .app-header .nav-item.is-active::after {
  right: 14px;
  bottom: 6px;
  left: 14px;
  height: 2px;
}

html body #view-analysis #analysis-step-location .zone-search-input,
html body #view-analysis #analysis-step-location .zone-search-input:hover,
html body #view-analysis #analysis-step-location .zone-search-input:focus-within {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

html body #view-analysis #analysis-step-location .field .zone-search-input input,
html body #view-analysis #analysis-step-location .field .zone-search-input input:hover,
html body #view-analysis #analysis-step-location .field .zone-search-input input:focus,
html body #view-analysis #analysis-step-location .field .zone-search-input input:focus-visible,
html body #view-analysis #analysis-step-location .field .zone-search-input input#zone {
  appearance: none;
  -webkit-appearance: none;
  color: var(--ink);
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  caret-color: var(--ink);
  color-scheme: light;
}

html body #view-analysis #analysis-step-location .field .zone-search-input input:-webkit-autofill,
html body #view-analysis #analysis-step-location .field .zone-search-input input:-webkit-autofill:hover,
html body #view-analysis #analysis-step-location .field .zone-search-input input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink);
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  transition: background-color 99999s ease-out;
}

html body #view-analysis #analysis-step-location .location-intro h1 {
  font-size: clamp(52px, 5.8vw, 78px);
  line-height: 1.05;
}

html body #view-analysis #analysis-step-location .location-intro > p {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.55;
}

html body #view-analysis #analysis-step-location .wizard-step-heading {
  margin: 32px 0 20px;
}

html body #view-analysis #analysis-step-location .wizard-step-heading h3 {
  font-size: clamp(24px, 2.3vw, 30px);
}

html body #view-analysis #analysis-step-location .wizard-step-heading p {
  margin-top: 8px;
  font-size: 15px;
}

html body #view-analysis #analysis-step-location .zone-search-control,
html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control {
  min-height: 64px;
  padding: 6px 6px 6px 20px;
  background: #fff;
}

html body #view-analysis #analysis-step-location .zone-search-input,
html body #view-analysis #analysis-step-location .zone-search-input:focus-within {
  height: 52px;
  min-height: 52px !important;
}

html body #view-analysis #analysis-step-location .field .zone-search-input input {
  min-height: 52px;
  font-size: 16px;
}

html body #view-analysis #analysis-step-location .zone-search-button,
html body #view-analysis #analysis-step-location .zone-search-button.platform-action-primary {
  min-width: 120px;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 22px !important;
  font-size: 15px;
}

html body #view-analysis #analysis-step-location .popular-zones button {
  min-height: 40px;
  padding: 0 14px;
  font-size: 13px;
}

html body #view-analysis #analysis-step-location .trust-strip,
html body .location-stage .trust-strip {
  padding: 20px 8px;
}

html body #view-analysis #analysis-step-location .trust-strip .ui-icon {
  width: 20px;
  height: 20px;
}

html body #view-analysis #analysis-step-location .trust-strip b {
  font-size: 15px;
}

html body #view-analysis #analysis-step-location .trust-strip span {
  font-size: 13px;
}

@media (min-width: 901px) {
  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control,
  html body #view-analysis #analysis-step-location .popular-zones {
    width: min(40rem, 70%);
    max-width: 640px;
  }
}

@media (max-width: 900px) {
  html body .app-header .main-nav,
  html body:has(#view-analysis.is-active) .app-header .main-nav {
    height: 40px;
    min-height: 40px;
    padding: 3px 6px;
  }

  html body .app-header .nav-item,
  html body:has(#view-analysis.is-active) .app-header .nav-item {
    min-height: 34px;
    padding: 0 10px;
  }

  html body .app-header .nav-item.is-active::after,
  html body:has(#view-analysis.is-active) .app-header .nav-item.is-active::after {
    right: 8px;
    bottom: 5px;
    left: 8px;
  }
}

/* -------------------------------------------------------------------------- */
/* Avanzamento aligns to headline → search bar (not the full viewport).        */
/* Kicker is a sibling row; intro/heading/search share a row with the card.    */
/* -------------------------------------------------------------------------- */

@media (min-width: 901px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    grid-template-columns: minmax(0, 1fr) 312px;
    grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
    align-items: stretch;
    column-gap: clamp(40px, 4.6vw, 80px);
    row-gap: 0;
  }

  html body #view-analysis #analysis-step-location .location-stage,
  html body #view-analysis #analysis-step-location .location-hero-block,
  html body #view-analysis #analysis-step-location .location-step-main,
  html body #view-analysis #analysis-step-location .zone-field {
    display: contents;
  }

  html body #view-analysis #analysis-step-location .location-kicker {
    grid-column: 1;
    grid-row: 1;
    width: max-content;
    margin: 0 0 18px;
  }

  html body #view-analysis #analysis-step-location .location-intro {
    grid-column: 1;
    grid-row: 2;
  }

  html body #view-analysis #analysis-step-location .wizard-step-heading {
    grid-column: 1;
    grid-row: 3;
  }

  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control {
    grid-column: 1;
    grid-row: 4;
  }

  html body #view-analysis #analysis-step-location .popular-zones,
  html body #view-analysis #analysis-step-location .zone-selection,
  html body #view-analysis #analysis-step-location .zone-wide-warning,
  html body #view-analysis #analysis-step-location .wizard-actions {
    grid-column: 1;
  }

  html body #view-analysis #analysis-step-location .popular-zones {
    grid-row: 5;
  }

  html body #view-analysis #analysis-step-location .trust-strip,
  html body .location-stage .trust-strip {
    grid-column: 1;
    grid-row: 6;
    align-self: end;
    width: 100%;
    max-width: none;
    margin-top: 28px;
  }

  html body #view-analysis #analysis-step-location .analysis-journey.home-progress,
  html body #view-analysis .premium-split > .analysis-journey.home-progress {
    grid-column: 2;
    grid-row: 2 / 5;
    align-self: stretch;
    width: 100%;
    max-width: 312px;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 22px 22px 18px;
    flex: none;
    justify-content: space-between;
  }

  html body #view-analysis #analysis-step-location .analysis-journey .journey-title {
    margin: 0 0 10px;
  }

  html body #view-analysis #analysis-step-location .analysis-journey ol,
  html body #view-analysis .home-progress ol {
    flex: 1 1 auto;
    align-content: stretch;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 0;
  }

  html body #view-analysis #analysis-step-location .analysis-journey li,
  html body #view-analysis .home-progress li {
    min-height: 0;
    padding: 8px 0;
  }

  html body #view-analysis #analysis-step-location .analysis-journey li::after {
    top: 38px;
    bottom: -10px;
    left: 14px;
  }

  html body #view-analysis .home-progress .journey-tip {
    margin-top: 8px;
    padding: 12px;
  }
}

@media (min-width: 1280px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    grid-template-columns: minmax(0, 1fr) 312px;
    column-gap: clamp(52px, 5.2vw, 88px);
  }
}

/* -------------------------------------------------------------------------- */
/* Fill the canvas — full viewport width, larger type, search to the card.     */
/* Keeps Avanzamento grid-row 2 / 5 (h1 top → search bottom).                  */
/* -------------------------------------------------------------------------- */

@media (min-width: 901px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    grid-template-columns: minmax(0, 1fr) 312px;
    column-gap: clamp(40px, 4vw, 64px);
    padding-inline: clamp(32px, 4vw, 64px);
  }

  html body #view-analysis #analysis-step-location .location-intro h1 {
    max-width: 16ch;
    font-size: clamp(56px, 6.6vw, 92px);
    line-height: 1.04;
  }

  html body #view-analysis #analysis-step-location .location-intro > p {
    max-width: 46rem;
    margin-top: 22px;
    font-size: 20px;
    line-height: 1.5;
  }

  html body #view-analysis #analysis-step-location .wizard-step-heading {
    margin: 36px 0 22px;
  }

  html body #view-analysis #analysis-step-location .wizard-step-heading h3 {
    font-size: clamp(26px, 2.6vw, 34px);
  }

  html body #view-analysis #analysis-step-location .wizard-step-heading p {
    margin-top: 8px;
    font-size: 16px;
  }

  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control,
  html body #view-analysis #analysis-step-location .popular-zones,
  html body #view-analysis #analysis-step-location .zone-selection,
  html body #view-analysis #analysis-step-location .zone-wide-warning {
    width: 100%;
    max-width: none;
  }

  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control {
    min-height: 72px;
    padding: 8px 8px 8px 24px;
    background: #fff;
  }

  html body #view-analysis #analysis-step-location .zone-search-input,
  html body #view-analysis #analysis-step-location .zone-search-input:focus-within {
    height: 56px;
    min-height: 56px !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  html body #view-analysis #analysis-step-location .field .zone-search-input input,
  html body #view-analysis #analysis-step-location .field .zone-search-input input#zone {
    min-height: 56px;
    font-size: 17px;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  html body #view-analysis #analysis-step-location .zone-search-button,
  html body #view-analysis #analysis-step-location .zone-search-button.platform-action-primary {
    min-width: 136px;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 24px !important;
    font-size: 16px;
  }

  html body #view-analysis #analysis-step-location .popular-zones button {
    min-height: 44px;
    padding: 0 16px;
    font-size: 14px;
  }

  html body #view-analysis #analysis-step-location .trust-strip,
  html body .location-stage .trust-strip {
    width: 100%;
    max-width: none;
    padding: 22px 10px;
  }

  html body #view-analysis #analysis-step-location .trust-strip b {
    font-size: 16px;
  }

  html body #view-analysis #analysis-step-location .trust-strip span {
    font-size: 14px;
  }

  html body #view-analysis #analysis-step-location .trust-strip .ui-icon {
    width: 22px;
    height: 22px;
  }

  html body #view-analysis #analysis-step-location .analysis-journey.home-progress,
  html body #view-analysis .premium-split > .analysis-journey.home-progress {
    grid-column: 2;
    grid-row: 2 / 5;
    align-self: stretch;
    width: 100%;
    max-width: 312px;
  }
}

@media (min-width: 1280px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    max-width: none;
    margin-inline: 0;
    grid-template-columns: minmax(0, 1fr) 312px;
    column-gap: clamp(44px, 3.6vw, 64px);
  }
}

@media (min-width: 1600px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    max-width: none;
    margin-inline: 0;
    grid-template-columns: minmax(0, 1fr) 312px;
    column-gap: 64px;
  }
}

/* Avanzamento flush with the header's right edge. */
@media (min-width: 901px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    padding-right: clamp(16px, 3.4vw, 48px);
  }

  html body #view-analysis #analysis-step-location .analysis-journey.home-progress,
  html body #view-analysis .premium-split > .analysis-journey.home-progress {
    justify-self: end;
    margin-right: 0;
  }
}

/* Search bar 70% of the left column; chips stay aligned with it. */
@media (min-width: 901px) {
  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control,
  html body #view-analysis #analysis-step-location .popular-zones,
  html body #view-analysis #analysis-step-location .zone-selection,
  html body #view-analysis #analysis-step-location .zone-wide-warning {
    width: 70%;
    max-width: 70%;
    justify-self: start;
  }
}

/* -------------------------------------------------------------------------- */
/* Attach Avanzamento to the shortened search (desktop).                       */
/* Left track = 70% of the previous 1fr column; card sits 24px after it.       */
/* Remaining space stays to the right of the card, not between search & card.  */
/* -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    grid-template-columns: minmax(0, 0.7fr) 312px minmax(0, 0.3fr);
    column-gap: 24px;
    justify-content: start;
    padding-right: clamp(32px, 4vw, 64px);
  }

  html body #view-analysis #analysis-step-location .analysis-journey.home-progress,
  html body #view-analysis .premium-split > .analysis-journey.home-progress {
    grid-column: 2;
    grid-row: 2 / 5;
    justify-self: start;
    align-self: stretch;
    width: 312px;
    max-width: 312px;
    margin-right: 0;
  }

  html body #view-analysis #analysis-step-location .location-intro,
  html body #view-analysis #analysis-step-location .location-intro h1 {
    max-width: 100%;
  }

  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control,
  html body #view-analysis #analysis-step-location .popular-zones,
  html body #view-analysis #analysis-step-location .zone-selection,
  html body #view-analysis #analysis-step-location .zone-wide-warning,
  html body #view-analysis #analysis-step-location .trust-strip,
  html body .location-stage .trust-strip {
    width: 100%;
    max-width: none;
    justify-self: start;
  }
}

/* -------------------------------------------------------------------------- */
/* Center the search + Avanzamento pair as one block.                          */
/* Equal left/right gutters; full-bleed forest/topo stays on the workspace.    */
/* -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    width: 100vw;
    max-width: 100vw;
    margin-inline: 0;
    padding-left: clamp(32px, 4vw, 56px);
    padding-right: clamp(32px, 4vw, 56px);
    justify-content: stretch;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr) minmax(0, 42rem) 312px minmax(0, 1fr);
    column-gap: 24px;
  }

  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))),
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-content,
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-main {
    overflow-x: hidden;
  }

  html body #view-analysis #analysis-step-location .location-kicker,
  html body #view-analysis #analysis-step-location .location-intro,
  html body #view-analysis #analysis-step-location .wizard-step-heading,
  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control,
  html body #view-analysis #analysis-step-location .popular-zones,
  html body #view-analysis #analysis-step-location .zone-selection,
  html body #view-analysis #analysis-step-location .zone-wide-warning,
  html body #view-analysis #analysis-step-location .wizard-actions,
  html body #view-analysis #analysis-step-location .trust-strip,
  html body .location-stage .trust-strip {
    grid-column: 2;
  }

  html body #view-analysis #analysis-step-location .analysis-journey.home-progress,
  html body #view-analysis .premium-split > .analysis-journey.home-progress {
    grid-column: 3;
    grid-row: 2 / 5;
    justify-self: start;
    align-self: stretch;
    width: 312px;
    max-width: 312px;
    margin-right: 0;
  }
}

/* Slightly more air between the shortened search and Avanzamento. */
@media (min-width: 901px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    column-gap: 200px;
  }
}

/* Widen Avanzamento toward the right; keep the gap to the search bar. */
@media (min-width: 901px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 42rem) 400px minmax(0, 1fr);
  }

  html body #view-analysis #analysis-step-location .analysis-journey.home-progress,
  html body #view-analysis .premium-split > .analysis-journey.home-progress {
    width: 400px;
    max-width: 400px;
  }
}

/* Extend the search/headline column toward the right. */
@media (min-width: 901px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 52rem) 400px minmax(0, 1fr);
  }
}

/* Keep the location block as one vertically centered group. */
@media (min-width: 901px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    min-height: 100dvh;
    max-height: 100dvh;
    box-sizing: border-box;
    padding-top: var(--header-height);
    padding-bottom: 112px;
    align-content: center;
    grid-template-rows: auto;
  }
}

/* Avanzamento: softer editorial shape, content-height, less boxy. */
html body #view-analysis #analysis-step-location .analysis-journey.home-progress,
html body #view-analysis .premium-split > .analysis-journey.home-progress {
  padding: 28px 26px 22px;
  background: var(--ivory);
  border: 1px solid rgba(11, 31, 58, .07);
  border-radius: 32px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .65) inset,
    0 14px 36px rgba(11, 31, 58, .025);
}

html body #view-analysis #analysis-step-location .analysis-journey ol,
html body #view-analysis .home-progress ol {
  flex: 0 0 auto;
  align-content: start;
  grid-template-rows: none;
}

html body #view-analysis #analysis-step-location .analysis-journey li,
html body #view-analysis .home-progress li {
  min-height: 0;
  padding: 11px 0;
  align-items: start;
}

html body #view-analysis #analysis-step-location .analysis-journey li > span,
html body #view-analysis .home-progress li > span {
  width: 26px;
  height: 26px;
  color: var(--step-idle);
  background: transparent;
  border: 1px solid rgba(11, 31, 58, .14);
  font-size: 11px;
  font-weight: 500;
}

html body #view-analysis #analysis-step-location .analysis-journey li.is-current > span,
html body #view-analysis .home-progress li.is-current > span {
  color: var(--ink);
  background: var(--forest-mid);
  border-color: var(--forest-mid);
}

html body #view-analysis #analysis-step-location .analysis-journey li::after {
  top: 32px;
  bottom: -8px;
  left: 12px;
  border-left: 1px solid rgba(11, 31, 58, .1);
}

html body #view-analysis .home-progress .journey-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 16px 0 0;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(11, 31, 58, .08);
  border-radius: 0;
}

@media (min-width: 901px) {
  html body #view-analysis #analysis-step-location .analysis-journey.home-progress,
  html body #view-analysis .premium-split > .analysis-journey.home-progress {
    grid-row: 2 / 5;
    align-self: stretch;
    height: auto;
    min-height: 0;
    max-height: none;
    margin-top: 0;
    justify-content: space-between;
  }

  html body #view-analysis #analysis-step-location .analysis-journey ol,
  html body #view-analysis .home-progress ol {
    flex: 1 1 auto;
    align-content: stretch;
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
}

/* Scale up the whole location group: type, search, chips, Avanzamento. */
@media (min-width: 901px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 55rem) 420px minmax(0, 1fr);
  }

  html body #view-analysis #analysis-step-location .location-kicker {
    padding: 8px 16px;
    font-size: 11px;
  }

  html body #view-analysis #analysis-step-location .location-intro h1 {
    font-size: clamp(60px, 7vw, 100px);
  }

  html body #view-analysis #analysis-step-location .location-intro > p {
    margin-top: 22px;
    font-size: 21px;
  }

  html body #view-analysis #analysis-step-location .wizard-step-heading h3 {
    font-size: clamp(27px, 2.7vw, 36px);
  }

  html body #view-analysis #analysis-step-location .wizard-step-heading p {
    font-size: 17px;
  }

  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control {
    min-height: 78px;
    padding: 9px 9px 9px 26px;
  }

  html body #view-analysis #analysis-step-location .zone-search-input,
  html body #view-analysis #analysis-step-location .zone-search-input:focus-within {
    height: 60px;
    min-height: 60px !important;
  }

  html body #view-analysis #analysis-step-location .zone-search-icon {
    width: 26px;
    height: 26px;
  }

  html body #view-analysis #analysis-step-location .field .zone-search-input input,
  html body #view-analysis #analysis-step-location .field .zone-search-input input#zone {
    min-height: 60px;
    font-size: 18px;
  }

  html body #view-analysis #analysis-step-location .zone-search-button,
  html body #view-analysis #analysis-step-location .zone-search-button.platform-action-primary {
    min-width: 144px;
    height: 60px !important;
    min-height: 60px !important;
    padding: 0 26px !important;
    font-size: 16px;
  }

  html body #view-analysis #analysis-step-location .popular-zones > span {
    font-size: 14px;
  }

  html body #view-analysis #analysis-step-location .popular-zones button {
    min-height: 46px;
    padding: 0 16px;
    font-size: 14.5px;
  }

  html body #view-analysis #analysis-step-location .analysis-journey.home-progress,
  html body #view-analysis .premium-split > .analysis-journey.home-progress {
    grid-row: 2 / 5;
    align-self: stretch;
    width: 420px;
    max-width: 420px;
    height: auto;
    min-height: 0;
    padding: 30px 28px 24px;
    border-radius: 36px;
    justify-content: space-between;
  }

  html body #view-analysis #analysis-step-location .analysis-journey ol,
  html body #view-analysis .home-progress ol {
    flex: 1 1 auto;
    align-content: stretch;
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  html body #view-analysis #analysis-step-location .journey-title {
    font-size: 11px;
  }

  html body #view-analysis #analysis-step-location .analysis-journey li,
  html body #view-analysis .home-progress li {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 16px;
    padding: 13px 0;
  }

  html body #view-analysis #analysis-step-location .analysis-journey li > span,
  html body #view-analysis .home-progress li > span {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  html body #view-analysis #analysis-step-location .analysis-journey li::after {
    top: 36px;
    left: 14px;
  }

  html body #view-analysis #analysis-step-location .analysis-journey li b,
  html body #view-analysis .home-progress li b {
    font-size: 15.5px;
  }

  html body #view-analysis #analysis-step-location .analysis-journey li small,
  html body #view-analysis .home-progress li small {
    font-size: 13.5px;
  }

  html body .journey-tip b,
  html body .journey-tip span {
    font-size: 13.5px;
  }
}

/* -------------------------------------------------------------------------- */
/* Location landing handoff — contrast, states, compact card, type scale       */
/* -------------------------------------------------------------------------- */

@keyframes premium-hero-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

html body .app-header .main-nav,
html body:has(#view-analysis.is-active) .app-header .main-nav {
  height: auto;
  min-height: 44px;
  padding: 6px 8px;
}

html body .app-header .nav-item,
html body:has(#view-analysis.is-active) .app-header .nav-item {
  min-height: 36px;
  color: rgba(11, 31, 58, .66);
  transition: color 180ms ease, background 180ms ease;
}

html body .app-header .nav-copy b,
html body:has(#view-analysis.is-active) .app-header .nav-copy b {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: .01em;
}

html body .app-header .nav-item:hover {
  color: var(--ink);
  background: rgba(11, 31, 58, .1);
}

html body .app-header .nav-item.is-active,
html body:has(#view-analysis.is-active) .app-header .nav-item.is-active {
  color: var(--ink);
}

html body .app-header .nav-item:focus-visible,
html body .account-menu:focus-visible,
html body #view-analysis #analysis-step-location .popular-zones button:focus-visible,
html body #view-analysis #analysis-step-location .zone-search-button:focus-visible {
  outline: 2px solid var(--lime-mid);
  outline-offset: 3px;
}

html body .account-menu,
html body:has(#view-analysis.is-active) .account-menu {
  min-height: 44px;
  padding-block: 6px;
}

html body .account-copy strong {
  font-size: 14px;
}

html body .account-copy small,
html body[data-active-view="analysis"]:has(#analysis-step-location.is-active) .account-copy small,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active) .account-copy small {
  color: rgba(168, 217, 134, .92);
  font-size: 11px;
}

@media (min-width: 901px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding-top: calc(var(--header-height) + 28px);
    padding-bottom: 72px;
    padding-left: clamp(48px, 5vw, 64px);
    padding-right: clamp(48px, 5vw, 64px);
    align-content: start;
    justify-content: stretch;
    grid-template-columns: minmax(0, 1fr) 358px;
    column-gap: 56px;
    row-gap: 0;
  }

  html body #view-analysis #analysis-step-location .location-kicker,
  html body #view-analysis #analysis-step-location .location-intro,
  html body #view-analysis #analysis-step-location .wizard-step-heading,
  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control,
  html body #view-analysis #analysis-step-location .popular-zones,
  html body #view-analysis #analysis-step-location .zone-selection,
  html body #view-analysis #analysis-step-location .zone-wide-warning,
  html body #view-analysis #analysis-step-location .wizard-actions,
  html body #view-analysis #analysis-step-location .zone-not-found {
    grid-column: 1;
  }

  html body #view-analysis #analysis-step-location .analysis-journey.home-progress,
  html body #view-analysis .premium-split > .analysis-journey.home-progress {
    grid-column: 2;
    grid-row: 2 / 5;
    align-self: stretch;
    justify-self: end;
    width: 358px;
    max-width: 358px;
    margin-left: 20px;
    animation: premium-hero-in 450ms ease 120ms both;
  }
}

html body #view-analysis #analysis-step-location .location-kicker,
html body #view-analysis #analysis-step-location .location-intro,
html body #view-analysis #analysis-step-location .wizard-step-heading,
html body #view-analysis #analysis-step-location .zone-field {
  animation: premium-hero-in 460ms ease both;
}

html body #view-analysis #analysis-step-location .location-kicker {
  width: max-content;
  padding: 8px 15px;
  color: rgba(11, 31, 58, .78);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(11, 31, 58, .22);
}

html body #view-analysis #analysis-step-location .location-kicker b::before {
  content: "·";
  margin: 0 .5em;
  font-weight: 500;
}

html body #view-analysis #analysis-step-location .location-intro h1 {
  max-width: 680px;
  font-size: var(--type-display);
  line-height: 1;
  letter-spacing: -.04em;
}

html body #view-analysis #analysis-step-location .location-intro > p {
  max-width: 650px;
  margin-top: 18px;
  color: rgba(245, 245, 240, .72);
  font-size: var(--type-body);
  line-height: 1.5;
}

html body #view-analysis #analysis-step-location .wizard-step-heading {
  margin: 32px 0 16px;
}

html body #view-analysis #analysis-step-location .wizard-step-heading h3 {
  max-width: 680px;
  font-size: var(--type-section);
  line-height: 1.15;
}

html body #view-analysis #analysis-step-location .wizard-step-heading p {
  margin-top: 8px;
  color: rgba(11, 31, 58, .7);
  font-size: var(--type-body-sm);
  line-height: 1.45;
}

html body #view-analysis #analysis-step-location .zone-search-control,
html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control {
  width: 100%;
  max-width: 700px;
  min-height: 70px;
  padding: 8px 8px 8px 22px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 36px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .14);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

html body #view-analysis #analysis-step-location .zone-search-control:focus-within {
  border-color: rgba(0, 168, 120, .55);
  box-shadow: 0 0 0 3px rgba(0, 168, 120, .2), 0 14px 36px rgba(0, 0, 0, .14);
}

html body #view-analysis #analysis-step-location .zone-search-control.is-error {
  border-color: rgba(176, 72, 64, .45);
  box-shadow: 0 0 0 3px rgba(176, 72, 64, .12), 0 14px 36px rgba(0, 0, 0, .14);
}

html body #view-analysis #analysis-step-location .zone-search-icon {
  color: var(--muted);
}

html body #view-analysis #analysis-step-location .field .zone-search-input input,
html body #view-analysis #analysis-step-location .field .zone-search-input input#zone {
  min-height: 54px;
  font-size: 16px;
  font-weight: 500;
}

html body #view-analysis #analysis-step-location .field .zone-search-input input::placeholder {
  color: rgba(11, 31, 58, .42);
  font-size: 16px;
  font-weight: 450;
}

html body #view-analysis #analysis-step-location .zone-search-button,
html body #view-analysis #analysis-step-location .zone-search-button.platform-action-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 54px !important;
  height: 54px !important;
  padding: 0 32px !important;
  color: #fff;
  background: #00A878 !important;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 999px;
  transition: background 180ms ease, transform 180ms ease;
}

html body #view-analysis #analysis-step-location .zone-search-button:hover,
html body #view-analysis #analysis-step-location .zone-search-button.platform-action-primary:hover {
  background: #00A878 !important;
}

html body #view-analysis #analysis-step-location .zone-search-button:hover .zone-search-arrow {
  transform: translateX(3px);
}

html body #view-analysis #analysis-step-location .zone-search-button:active {
  transform: scale(.98);
}

html body #view-analysis #analysis-step-location .zone-search-arrow {
  width: 16px;
  height: 16px;
  margin: 0;
  transition: transform 180ms ease;
}

html body #view-analysis #analysis-step-location .zone-search-loader {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 999px;
  animation: zone-search-spin .7s linear infinite;
}

html body #view-analysis #analysis-step-location .zone-search-button[aria-busy="true"] .zone-search-arrow {
  display: none;
}

html body #view-analysis #analysis-step-location .zone-search-button[aria-busy="true"] .zone-search-loader {
  display: block;
}

html body #view-analysis #analysis-step-location .zone-search-button:disabled {
  opacity: .72;
}

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

html body #view-analysis #analysis-step-location .zone-not-found:not(.is-hidden) {
  grid-column: 1;
  grid-row: 5;
  max-width: 700px;
  margin: 10px 0 0;
  color: #B42318;
  font-size: 13.5px;
  line-height: 1.45;
}

html body #view-analysis #analysis-step-location .premium-split:has(.zone-not-found:not(.is-hidden)) .popular-zones,
html body #view-analysis #analysis-step-location:has(.zone-not-found:not(.is-hidden)) .popular-zones {
  grid-row: 6;
}

html body #view-analysis #analysis-step-location .popular-zones {
  width: 100%;
  max-width: 700px;
}

html body #view-analysis #analysis-step-location .popular-zones > span {
  color: rgba(11, 31, 58, .6);
  font-size: 13px;
  font-weight: 600;
}

html body #view-analysis #analysis-step-location .popular-zones > div {
  gap: 9px;
}

html body #view-analysis #analysis-step-location .popular-zones button {
  min-height: 40px;
  padding: 0 16px;
  color: rgba(11, 31, 58, .86);
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: 13.5px;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

html body #view-analysis #analysis-step-location .popular-zones button:hover {
  color: var(--ink);
  background: rgba(0, 168, 120, .08);
  border-color: rgba(0, 168, 120, .45);
}

html body #view-analysis #analysis-step-location .analysis-journey.home-progress,
html body #view-analysis .premium-split > .analysis-journey.home-progress {
  padding: 26px 24px 20px;
  background: #FAFBFC;
  border: 1px solid rgba(11, 31, 58, .06);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .12);
}

html body #view-analysis #analysis-step-location .journey-title {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: .14em;
}

html body #view-analysis #analysis-step-location .analysis-journey li,
html body #view-analysis .home-progress li {
  min-height: 0;
  padding: 0 0 30px;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

html body #view-analysis #analysis-step-location .analysis-journey li:last-child {
  padding-bottom: 0;
}

html body #view-analysis #analysis-step-location .analysis-journey li > span,
html body #view-analysis .home-progress li > span {
  width: 28px;
  height: 28px;
  color: rgba(11, 31, 58, .5);
  background: transparent;
  border: 1px solid rgba(11, 31, 58, .18);
  font-size: 12px;
  font-weight: 600;
}

html body #view-analysis #analysis-step-location .analysis-journey li.is-current > span,
html body #view-analysis .home-progress li.is-current > span {
  color: var(--ink);
  background: var(--forest-mid);
  border-color: var(--forest-mid);
}

html body #view-analysis #analysis-step-location .analysis-journey li b,
html body #view-analysis .home-progress li b {
  color: rgba(11, 31, 58, .58);
  font-size: 15px;
  font-weight: 600;
}

html body #view-analysis #analysis-step-location .analysis-journey li.is-current b,
html body #view-analysis .home-progress li.is-current b {
  color: var(--ink);
}

html body #view-analysis #analysis-step-location .analysis-journey li small,
html body #view-analysis .home-progress li small {
  color: rgba(11, 31, 58, .45);
  font-size: 12.5px;
}

html body #view-analysis #analysis-step-location .analysis-journey li.is-current small {
  color: var(--muted);
}

html body #view-analysis #analysis-step-location .analysis-journey li::after {
  top: 32px;
  bottom: 4px;
  left: 13px;
  border-left: 1px solid rgba(11, 31, 58, .18);
}

html body #view-analysis .home-progress .journey-tip {
  margin-top: 24px;
  padding: 20px 0 4px;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(11, 31, 58, .1);
  border-radius: 0;
}

html body .journey-tip .ui-icon {
  color: var(--lime-deep);
  width: 16px;
  height: 16px;
}

@media (max-width: 1100px) and (min-width: 901px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    grid-template-columns: minmax(0, 1fr) 320px;
    column-gap: 36px;
    padding-left: 40px;
    padding-right: 40px;
  }

  html body #view-analysis #analysis-step-location .analysis-journey.home-progress,
  html body #view-analysis .premium-split > .analysis-journey.home-progress {
    width: 320px;
    max-width: 320px;
    margin-left: 0;
  }
}

@media (max-width: 900px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    display: flex;
    flex-direction: column;
    max-width: none;
    padding: calc(var(--header-height) + 12px) 22px 32px;
    gap: 28px;
  }

  html body #view-analysis #analysis-step-location .location-intro h1 {
    font-size: clamp(48px, 11vw, 54px);
  }

  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control {
    min-height: 64px;
    max-width: none;
  }

  html body #view-analysis #analysis-step-location .popular-zones > div {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  html body #view-analysis #analysis-step-location .analysis-journey.home-progress,
  html body #view-analysis .premium-split > .analysis-journey.home-progress {
    width: 100%;
    max-width: none;
    margin-left: 0;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #view-analysis #analysis-step-location .location-kicker,
  html body #view-analysis #analysis-step-location .location-intro,
  html body #view-analysis #analysis-step-location .wizard-step-heading,
  html body #view-analysis #analysis-step-location .zone-field,
  html body #view-analysis #analysis-step-location .analysis-journey.home-progress {
    animation: none;
  }

  html body #view-analysis #analysis-step-location .zone-search-button:hover .zone-search-arrow,
  html body #view-analysis #analysis-step-location .zone-search-button:active {
    transform: none;
  }
}

/* Compact the search pill: lock height so earlier min-heights cannot inflate it. */
@media (min-width: 901px) {
  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control {
    box-sizing: border-box;
    height: 68px;
    min-height: 68px;
    max-height: 68px;
    padding: 7px 7px 7px 20px;
  }

  html body #view-analysis #analysis-step-location .zone-search-input,
  html body #view-analysis #analysis-step-location .zone-search-input:focus-within {
    height: 54px;
    min-height: 54px !important;
    max-height: 54px;
  }

  html body #view-analysis #analysis-step-location .field .zone-search-input input,
  html body #view-analysis #analysis-step-location .field .zone-search-input input#zone {
    height: 54px;
    min-height: 54px !important;
  }

  html body #view-analysis #analysis-step-location .zone-search-button,
  html body #view-analysis #analysis-step-location .zone-search-button.platform-action-primary {
    height: 54px !important;
    min-height: 54px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Location cluster — optical center of the canvas, below the floating nav.    */
/* The headline, search, chips and Avanzamento move as one group.              */
/* -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    width: 100%;
    max-width: 1260px;
    min-height: 100dvh;
    max-height: 100dvh;
    margin-inline: auto;
    box-sizing: border-box;
    padding-top: var(--header-height);
    padding-bottom: var(--header-height);
    padding-left: clamp(40px, 4.5vw, 56px);
    padding-right: clamp(40px, 4.5vw, 56px);
    overflow: hidden auto;
    align-content: safe center;
    align-items: start;
    justify-content: center;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto auto auto auto auto;
    column-gap: 96px;
    row-gap: 0;
  }

  html body #view-analysis #analysis-step-location .location-kicker,
  html body #view-analysis #analysis-step-location .location-intro,
  html body #view-analysis #analysis-step-location .wizard-step-heading,
  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control,
  html body #view-analysis #analysis-step-location .popular-zones,
  html body #view-analysis #analysis-step-location .zone-selection,
  html body #view-analysis #analysis-step-location .zone-wide-warning,
  html body #view-analysis #analysis-step-location .wizard-actions,
  html body #view-analysis #analysis-step-location .zone-not-found {
    grid-column: 1;
  }

  html body #view-analysis #analysis-step-location .analysis-journey.home-progress,
  html body #view-analysis .premium-split > .analysis-journey.home-progress {
    grid-column: 2;
    grid-row: 2 / 5;
    justify-self: end;
    align-self: stretch;
    width: 340px;
    max-width: 340px;
    margin-left: 0;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 56px;
    padding-left: 32px;
    padding-right: 32px;
  }

  html body #view-analysis #analysis-step-location .analysis-journey.home-progress,
  html body #view-analysis .premium-split > .analysis-journey.home-progress {
    width: 300px;
    max-width: 300px;
  }
}

@media (min-width: 901px) and (max-height: 820px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    padding-top: calc(var(--header-height) + 12px);
    padding-bottom: 28px;
    align-content: start;
  }
}

/* Equal left/right canvas inset; keep the 96px gap between search and card. */
@media (min-width: 901px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-left: clamp(48px, 5vw, 72px);
    padding-right: clamp(48px, 5vw, 72px);
    justify-content: center;
    grid-template-columns: minmax(0, 700px) 340px;
    column-gap: 96px;
  }

  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control,
  html body #view-analysis #analysis-step-location .popular-zones,
  html body #view-analysis #analysis-step-location .zone-selection,
  html body #view-analysis #analysis-step-location .zone-wide-warning,
  html body #view-analysis #analysis-step-location .zone-not-found {
    width: 100%;
    max-width: none;
  }

  html body #view-analysis #analysis-step-location .analysis-journey.home-progress,
  html body #view-analysis .premium-split > .analysis-journey.home-progress {
    justify-self: stretch;
    width: 340px;
    max-width: 340px;
    margin-left: 0;
    margin-right: 0;
  }
}

/* -------------------------------------------------------------------------- */
/* Header + view handoff — one chrome, sliding pill, page transitions          */
/* -------------------------------------------------------------------------- */

html { scrollbar-gutter: stable; }

html body .app-header,
html body:has(#view-analysis.is-active) .app-header,
html body[data-active-view="analysis"] .app-header,
html body[data-active-view="results"] .app-header,
html body:is([data-active-view="settings"], [data-active-view="account"]) .app-header {
  view-transition-name: app-header;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  width: 100%;
  height: var(--header-height);
  min-height: var(--header-height);
  padding: 0 clamp(16px, 3.4vw, 48px);
  overflow: visible;
  color: var(--ivory-2);
  background: var(--forest);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
  transition: background 420ms cubic-bezier(.22, 1, .36, 1);
}

html body .sidebar-head {
  justify-self: start;
  min-width: 0;
}

html body .app-header .brand,
html body:has(#view-analysis.is-active) .app-header .brand {
  gap: 14px;
}

html body .app-header .brand strong,
html body:has(#view-analysis.is-active) .app-header .brand strong {
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -.03em;
}

html body .app-header .brand small,
html body:has(#view-analysis.is-active) .app-header .brand small {
  margin-top: 1px;
  font-size: 10px;
  letter-spacing: .18em;
}

html body .app-header .brand-mark,
html body:has(#view-analysis.is-active) .app-header .brand-mark {
  grid-template-columns: repeat(3, 6px);
  gap: 4px;
  width: 34px;
  height: 34px;
  padding: 6px 6px 5px;
  transform: none;
}

html body .app-header .brand-mark i:nth-child(1),
html body:has(#view-analysis.is-active) .app-header .brand-mark i:nth-child(1) { height: 10px; }
html body .app-header .brand-mark i:nth-child(2),
html body:has(#view-analysis.is-active) .app-header .brand-mark i:nth-child(2) { height: 17px; }
html body .app-header .brand-mark i:nth-child(3),
html body:has(#view-analysis.is-active) .app-header .brand-mark i:nth-child(3) { height: 24px; }

html body .account-menu-wrap,
html body:has(#view-analysis.is-active) .account-menu-wrap {
  justify-self: end;
  display: flex;
}

html body .header-signin,
html body:has(#view-analysis.is-active) .header-signin {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  color: var(--ivory-2);
  background: transparent;
  border: 1px solid rgba(11, 31, 58, .28);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

html body .header-signin:hover {
  color: var(--forest);
  background: var(--ivory-2);
  border-color: var(--ivory-2);
}

html body .header-signin:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

html body .app-header .account-menu,
html body:has(#view-analysis.is-active) .app-header .account-menu {
  min-height: 52px;
  padding: 6px 10px 6px 6px;
  gap: 12px;
}

html body .app-header .account-avatar {
  width: 44px;
  height: 44px;
  font-size: 13px;
}

html body .app-header .account-copy strong {
  font-size: 15px;
}

html body .app-header .account-copy small {
  margin-top: 3px;
  font-size: 12px;
}

html body .app-header .account-menu > .ui-icon {
  width: 18px;
  height: 18px;
}

html body.account-open .app-header,
html body.account-open:has(#view-analysis.is-active) .app-header {
  z-index: 80;
}

html body.account-open::before {
  z-index: 49;
  background: rgba(255, 255, 255, .48);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

html body .account-menu-wrap {
  isolation: isolate;
}

html body .account-panel {
  top: calc(100% + 10px);
  right: 0;
  width: min(292px, calc(100vw - 24px));
  padding: 8px;
  overflow: hidden;
  color: var(--ivory-2);
  background: #FFFFFF;
  border: 1px solid rgba(11, 31, 58, .12);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(11, 31, 58, .063),
    0 22px 48px rgba(0, 0, 0, .42);
}

html body .account-panel:not([hidden]) {
  animation: account-panel-in 180ms ease;
}

html body .account-panel-head {
  margin: 0 0 4px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid rgba(11, 31, 58, .08);
}

html body .account-panel-head .section-code {
  color: rgba(163, 201, 122, .92);
}

html body .account-panel-head strong {
  color: var(--ivory-2);
}

html body .account-panel-head small {
  color: rgba(11, 31, 58, .52);
}

html body .account-panel-actions button {
  color: var(--ivory-2);
  border-radius: 12px;
}

html body .account-panel-actions button:hover,
html body .account-panel-actions button:focus-visible {
  background: rgba(11, 31, 58, .08);
}

html body .account-panel-actions b {
  color: var(--ivory-2);
}

html body .account-panel-actions small {
  color: rgba(11, 31, 58, .48);
}

html body .account-panel-icon {
  color: #00875F;
  background: rgba(163, 201, 122, .12);
  border-color: rgba(163, 201, 122, .2);
}

@keyframes account-panel-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  html body.account-open::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html body .account-panel:not([hidden]) { animation: none; }
}

html body .app-header .main-nav,
html body:has(#view-analysis.is-active) .app-header .main-nav,
html body[data-active-view="analysis"] .app-header .main-nav {
  position: relative;
  top: auto;
  left: auto;
  justify-self: center;
  isolation: isolate;
  display: flex;
  gap: 4px;
  width: max-content;
  height: 52px;
  min-height: 52px;
  margin: 0;
  padding: 5px;
  overflow: visible;
  background: rgba(11, 31, 58, .1);
  border: 1px solid rgba(11, 31, 58, .16);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(11, 31, 58, .1);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  transform: none;
}

html body .app-header .nav-indicator {
  view-transition-name: nav-indicator;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 0;
  height: 42px;
  pointer-events: none;
  border-radius: 999px;
  background: rgba(11, 31, 58, .16);
  box-shadow:
    inset 0 1px 0 rgba(11, 31, 58, .18),
    0 1px 3px rgba(0, 0, 0, .14);
  opacity: 0;
  transform: translate(5px, 5px);
  transition:
    transform 560ms cubic-bezier(.16, 1, .3, 1),
    width 560ms cubic-bezier(.16, 1, .3, 1),
    height 560ms cubic-bezier(.16, 1, .3, 1),
    opacity 180ms ease;
}

html body .app-header .nav-indicator.is-ready { opacity: 1; }
html body .app-header .nav-indicator.is-instant { transition: none; }

html body .app-header .nav-indicator::after {
  position: absolute;
  right: 20px;
  bottom: 8px;
  left: 20px;
  height: 2.5px;
  content: "";
  background: #00A878;
  border-radius: 2px;
}

html body .app-header .nav-item,
html body:has(#view-analysis.is-active) .app-header .nav-item,
html body .app-header .nav-item.is-active,
html body:has(#view-analysis.is-active) .app-header .nav-item.is-active {
  position: relative;
  z-index: 1;
  min-height: 42px;
  padding: 0 24px;
  color: rgba(11, 31, 58, .58);
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  transition: color 220ms ease;
}

html body .app-header .nav-item .ui-icon,
html body:has(#view-analysis.is-active) .app-header .nav-item .ui-icon { display: none; }

html body .app-header .nav-copy b,
html body:has(#view-analysis.is-active) .app-header .nav-copy b {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 560;
  letter-spacing: .01em;
}

html body .app-header .nav-item:hover {
  color: rgba(11, 31, 58, .92);
  background: transparent;
}

html body .app-header .nav-item.is-active,
html body:has(#view-analysis.is-active) .app-header .nav-item.is-active {
  color: rgba(11, 31, 58, .96);
}

html body .app-header .nav-item.is-active::after,
html body:has(#view-analysis.is-active) .app-header .nav-item.is-active::after,
html body .app-header .nav-item.is-active::before {
  display: none;
  content: none;
}

html body .app-main {
  view-transition-name: none;
}

html.has-view-transitions .view.is-active {
  view-transition-name: page-view;
  animation: none;
}

html:not(.has-view-transitions)[data-nav-dir="forward"] .view.is-active {
  animation: nav-view-in-right 640ms cubic-bezier(.16, 1, .3, 1) both;
}

html:not(.has-view-transitions)[data-nav-dir="back"] .view.is-active {
  animation: nav-view-in-left 640ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes nav-view-out-left {
  to { opacity: 0; transform: translate3d(-14px, 0, 0) scale(.992); }
}
@keyframes nav-view-out-right {
  to { opacity: 0; transform: translate3d(14px, 0, 0) scale(.992); }
}
@keyframes nav-view-in-right {
  from { opacity: 0; transform: translate3d(14px, 0, 0) scale(.992); }
  to { opacity: 1; transform: none; }
}
@keyframes nav-view-in-left {
  from { opacity: 0; transform: translate3d(-14px, 0, 0) scale(.992); }
  to { opacity: 1; transform: none; }
}
@keyframes nav-root-fade-out {
  to { opacity: 0; }
}

::view-transition {
  background: var(--forest);
}

::view-transition-group(app-header) {
  z-index: 80;
  animation: none;
}
::view-transition-old(app-header),
::view-transition-new(app-header) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-group(nav-indicator) {
  z-index: 81;
  animation-duration: 560ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}
::view-transition-old(nav-indicator),
::view-transition-new(nav-indicator) {
  height: 100%;
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-group(page-view) {
  z-index: 1;
  overflow: clip;
  animation-duration: 640ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}
::view-transition-old(page-view),
::view-transition-new(page-view) {
  width: 100%;
  height: 100%;
  overflow: clip;
  mix-blend-mode: normal;
  animation-duration: 640ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  animation-fill-mode: both;
}

html[data-nav-dir="forward"]::view-transition-old(page-view) { animation-name: nav-view-out-left; }
html[data-nav-dir="forward"]::view-transition-new(page-view) {
  animation-name: nav-view-in-right;
  animation-delay: 48ms;
}
html[data-nav-dir="back"]::view-transition-old(page-view) { animation-name: nav-view-out-right; }
html[data-nav-dir="back"]::view-transition-new(page-view) {
  animation-name: nav-view-in-left;
  animation-delay: 48ms;
}

::view-transition-old(root) {
  z-index: 1;
  animation: nav-root-fade-out 640ms cubic-bezier(.16, 1, .3, 1) both;
}
::view-transition-new(root) {
  z-index: 0;
  animation: none;
}

@media (max-width: 900px) {
  html body {
    --header-height: 80px;
  }

  html body .app-header,
  html body:has(#view-analysis.is-active) .app-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0 14px;
  }

  html body .app-header .brand strong,
  html body:has(#view-analysis.is-active) .app-header .brand strong { font-size: 18px; }
  html body .app-header .brand-mark,
  html body:has(#view-analysis.is-active) .app-header .brand-mark {
    width: 30px;
    height: 30px;
  }

  html body .app-header .main-nav,
  html body:has(#view-analysis.is-active) .app-header .main-nav,
  html body:has(#view-analysis.is-active) .main-nav {
    position: relative;
    left: auto;
    height: 46px;
    min-height: 46px;
    margin: 0 auto;
    padding: 4px;
    transform: none;
  }

  html body .app-header .nav-item,
  html body:has(#view-analysis.is-active) .app-header .nav-item {
    min-height: 38px;
    padding: 0 14px;
  }

  html body .app-header .nav-copy,
  html body:has(#view-analysis.is-active) .app-header .nav-copy { display: block; }
  html body .app-header .nav-copy b,
  html body:has(#view-analysis.is-active) .app-header .nav-copy b { font-size: 14px; }

  html body .app-header .nav-indicator::after {
    right: 12px;
    bottom: 6px;
    left: 12px;
  }

  html body .app-header .account-menu {
    min-height: 46px;
    padding: 4px 8px 4px 4px;
  }
  html body .app-header .account-avatar {
    width: 38px;
    height: 38px;
  }
  html body .header-signin,
  html body:has(#view-analysis.is-active) .header-signin {
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
  }
}

@media (max-width: 700px) {
  html body { --header-height: 74px; }
  html body .brand > span:last-child { display: none; }
  html body .app-header .nav-item,
  html body:has(#view-analysis.is-active) .app-header .nav-item { padding: 0 12px; }
  html body .app-header .nav-copy b { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .app-header,
  html body .app-header .nav-item,
  html body .app-header .nav-indicator {
    transition: none;
  }

  html .view.is-active,
  html:not(.has-view-transitions)[data-nav-dir="forward"] .view.is-active,
  html:not(.has-view-transitions)[data-nav-dir="back"] .view.is-active {
    animation: none;
  }

  ::view-transition-group(app-header),
  ::view-transition-group(nav-indicator),
  ::view-transition-group(page-view),
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(page-view),
  ::view-transition-new(page-view) {
    animation: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Risultati: stessa scena della Panoramica, lettura commerciale.              */
/* -------------------------------------------------------------------------- */

html:has(body[data-active-view="results"]) {
  overflow: hidden;
  height: 100%;
  scrollbar-gutter: stable;
}

html body[data-active-view="results"] {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  color-scheme: dark;
  color: var(--ivory-2);
  background: var(--forest);
}

html body[data-active-view="results"] .app-header {
  background: transparent;
}

html body[data-active-view="results"] .app-content,
html body[data-active-view="results"] .app-main {
  color: var(--ivory-2);
  background:
    radial-gradient(1180px 620px at 16% -12%, rgba(0, 168, 120, .45), transparent 58%),
    radial-gradient(880px 480px at 92% 0%, rgba(23, 48, 51, .5), transparent 54%),
    var(--forest);
}

html body[data-active-view="results"] .app-content {
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

html body[data-active-view="results"] #export-dialog,
html body[data-active-view="results"] #onboarding-dialog {
  color-scheme: light;
}

html body[data-active-view="results"] .app-main {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--header-height));
  max-height: calc(100dvh - var(--header-height));
  padding: 20px var(--page-gutter) var(--page-gutter);
  overflow: hidden;
}

html body #view-results {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-bottom: 0;
}

html body #view-results.is-active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

html body #view-results .results-page-intro,
html body #view-results .results-toolbar,
html body #view-results .result-metrics,
html body #view-results .result-list-tools {
  flex: 0 0 auto;
}

html body #view-results .results-page-intro {
  position: relative;
  align-items: flex-start;
  margin-bottom: 20px;
  overflow: visible;
}

html body[data-active-view="results"] #view-results .results-page-intro h1,
html body #view-results .results-page-intro h1 {
  color: var(--ivory-2);
  -webkit-text-fill-color: var(--ivory-2);
  font-family: var(--font-serif);
  font-size: clamp(40px, 4.4vw, 56px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.05;
}

html body #view-results .results-page-intro .lead {
  max-width: 42rem;
  margin-top: 10px;
  color: var(--ivory-body);
  font-size: 16px;
  line-height: 1.5;
}

html body #view-results .result-list-tools {
  position: relative;
  z-index: 6;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 18px;
  overflow: visible;
}

html body #view-results .export-menu {
  position: relative;
  z-index: 26;
  flex: 0 0 auto;
  overflow: visible;
}

html body #view-results .toolbar-csv,
html body #view-results .toolbar-csv.button {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 42px;
  margin-top: 0;
  padding: 0 16px;
  color: var(--ivory-2);
  background: transparent;
  border: 1px solid var(--ivory-line);
  border-radius: 12px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 550;
}

html body #view-results .export-menu.is-open > .toolbar-csv {
  background: rgba(11, 31, 58, .06);
  border-color: rgba(0, 168, 120, .55);
  box-shadow: 0 0 0 3px rgba(0, 168, 120, .16);
}

html body #view-results .toolbar-csv:hover,
html body #view-results .toolbar-csv:focus-visible {
  color: var(--ivory-2);
  background: rgba(11, 31, 58, .06);
  border-color: rgba(11, 31, 58, .22);
}

html body #view-results .toolbar-csv.is-disabled,
html body #view-results .toolbar-csv:disabled {
  opacity: .38;
}

html body #view-results .export-menu-panel {
  background: #FFFFFF;
  border: 1px solid rgba(11, 31, 58, .12);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}

html body #view-results .export-menu-item {
  color: var(--ivory-2);
  min-height: 40px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 550;
}

html body #view-results .export-menu-item .ui-icon {
  color: rgba(11, 31, 58, .62);
}

html body #view-results .export-menu-item:hover:not(:disabled):not(.is-disabled),
html body #view-results .export-menu-item:focus-visible:not(:disabled):not(.is-disabled) {
  color: var(--ivory-2);
  background: rgba(11, 31, 58, .08);
}

html body #view-results .export-menu-item:disabled,
html body #view-results .export-menu-item.is-disabled {
  color: rgba(11, 31, 58, .38);
}

html body #view-results .export-menu-caret {
  color: rgba(11, 31, 58, .55);
}

html body #view-results .results-toolbar {
  position: relative;
  z-index: 8;
  margin: 0 0 18px;
  padding: 10px;
  overflow: visible;
  background: rgba(11, 31, 58, .045);
  border: 1px solid var(--ivory-line);
  border-radius: 18px;
  box-shadow: none;
}

html body #view-results .results-toolbar:has(.site-select.is-open),
html body #view-results .results-toolbar:has(.result-filters[open]) {
  z-index: 40;
}

html body #view-results .results-toolbar-main {
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) minmax(240px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

html body #view-results .results-toolbar .field {
  margin: 0;
}

html body #view-results .results-toolbar .field label:not(.sr-only) {
  display: none;
}

html body #view-results .run-picker-control {
  display: block;
  overflow: visible;
}

html body #view-results .run-picker,
html body #view-results .site-select {
  overflow: visible;
}

html body #view-results .site-select.is-open {
  z-index: 40;
}

html body #view-results .results-control-with-icon > .ui-icon {
  color: rgba(11, 31, 58, .46);
}

html body #view-results .field :is(input:not([type="range"]), select),
html body #view-results .site-select-trigger {
  min-height: 46px;
  color: var(--ivory-2);
  background: rgba(255, 255, 255, .42);
  border: 1px solid rgba(11, 31, 58, .1);
  border-radius: 14px;
  box-shadow: none;
  font-size: 13px;
}

html body #view-results .search-field input {
  padding-left: 42px;
}

html body #view-results .search-field input::placeholder {
  color: rgba(11, 31, 58, .38);
}

html body #view-results .field :is(input:not([type="range"]), select):hover:not(:disabled),
html body #view-results .site-select-trigger:hover:not(:disabled) {
  background: rgba(255, 255, 255, .55);
  border-color: rgba(11, 31, 58, .18);
}

html body #view-results .field :is(input:not([type="range"]), select):focus,
html body #view-results .site-select-trigger:focus-visible,
html body #view-results .site-select.is-open .site-select-trigger {
  border-color: rgba(0, 168, 120, .55);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 168, 120, .16);
}

html body #view-results .site-select-menu {
  isolation: isolate;
  background: #FFFFFF;
  background-color: #FFFFFF;
  border: 1px solid rgba(11, 31, 58, .12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .42);
}

html body #view-results .site-select-option {
  color: var(--ivory-2);
}

html body #view-results .site-select-option:hover,
html body #view-results .site-select-option:focus-visible {
  background: rgba(11, 31, 58, .08);
}

html body #view-results .site-select-option[aria-selected="true"] {
  color: var(--emerald-dark);
  background: rgba(0, 168, 120, .12);
}

html body #view-results .results-toolbar-tools {
  display: flex;
  gap: 8px;
  align-items: center;
}

html body #view-results .result-filters {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
}

html body #view-results .result-filters > summary {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  width: auto;
  min-height: 46px;
  padding: 0 14px;
  color: var(--ivory-2);
  background: rgba(255, 255, 255, .42);
  border: 1px solid rgba(11, 31, 58, .1);
  border-radius: 14px;
  list-style: none;
}

html body #view-results .result-filters > summary::-webkit-details-marker {
  display: none;
}

html body #view-results .result-filters[open] > summary {
  border-color: rgba(0, 168, 120, .55);
  box-shadow: 0 0 0 3px rgba(0, 168, 120, .16);
}

html body #view-results .result-filters > summary:hover {
  background: rgba(255, 255, 255, .55);
}

html body #view-results .filter-summary-label {
  gap: 8px;
  color: var(--ivory-2);
  font-size: 13px;
}

html body #view-results .filter-summary-label .ui-icon {
  color: rgba(11, 31, 58, .55);
}

html body #view-results .filter-summary-state {
  display: none;
}

html body #view-results .filter-summary-state.is-active {
  display: inline-grid;
  width: 7px;
  height: 7px;
  overflow: hidden;
  color: transparent;
  background: var(--lime);
  border-radius: 50%;
}

html body #view-results .result-filter-panel {
  position: absolute;
  z-index: 24;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  width: min(380px, calc(100vw - 48px));
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid rgba(11, 31, 58, .12);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
}

html body #view-results .results-toolbar .result-filter-panel .field > label:not(.sr-only):not(.compact-check) {
  display: block;
  margin-bottom: 8px;
  color: rgba(11, 31, 58, .72);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: none;
}

html body #view-results .result-filter-panel .field label {
  color: var(--ivory-body);
}

html body #view-results .result-filter-panel .field small {
  color: rgba(11, 31, 58, .52);
  font-size: 11px;
  line-height: 1.4;
}

html body #view-results .results-refresh,
html body #view-results #refresh-runs {
  width: 46px;
  min-width: 46px;
  height: 46px;
  padding: 0;
  color: var(--ivory-2);
  background: rgba(255, 255, 255, .42);
  border: 1px solid rgba(11, 31, 58, .1);
  border-radius: 14px;
}

html body #view-results .results-refresh:hover:not(:disabled),
html body #view-results #refresh-runs:hover:not(:disabled) {
  color: var(--ivory-2);
  background: rgba(255, 255, 255, .55);
  border-color: rgba(11, 31, 58, .18);
}

html body #view-results .results-refresh.is-busy .ui-icon {
  animation: premium-step 700ms ease infinite;
}

html body #view-results .result-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  margin: 0 0 18px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

html body #view-results .result-metrics article,
html body #view-results .result-metrics article + article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 14px;
  align-items: start;
  min-width: 0;
  min-height: 118px;
  padding: 18px 18px 16px;
  background: rgba(11, 31, 58, .045);
  border: 1px solid var(--ivory-line);
  border-radius: 16px;
  box-shadow: none;
}

html body #view-results .result-metrics article.is-featured {
  background: rgba(0, 168, 120, .08);
  border-color: rgba(0, 168, 120, .55);
  box-shadow: 0 0 0 1px rgba(0, 168, 120, .08), 0 0 28px rgba(0, 168, 120, .12);
}

html body #view-results .result-metric-icon {
  display: grid;
  width: 42px;
  height: 42px;
  margin-top: 2px;
  place-items: center;
  color: var(--emerald-dark);
  background: rgba(0, 168, 120, .1);
  border: 1px solid rgba(0, 168, 120, .16);
  border-radius: 50%;
}

html body #view-results .result-metric-icon .ui-icon {
  width: 18px;
  height: 18px;
}

html body #view-results .result-metrics article > div {
  min-width: 0;
}

html body #view-results .result-metric-label,
html body #view-results .result-metrics article > div > span {
  display: block;
  color: var(--ivory-label);
  font-size: 12px;
  font-weight: 500;
}

html body #view-results .result-metrics strong {
  display: block;
  margin: 0 0 4px;
  color: var(--ivory-2);
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

html body #view-results .result-metric-meta {
  display: block;
  margin-top: 8px;
  color: var(--ivory-label);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

html body #view-results .result-metric-meta.is-ok {
  color: var(--lime);
}

html body #view-results .result-metric-bar {
  display: block;
  width: 100%;
  max-width: 148px;
  height: 3px;
  margin-top: 7px;
  overflow: hidden;
  background: rgba(11, 31, 58, .1);
  border-radius: 999px;
}

html body #view-results .result-metric-bar.is-hidden {
  display: none;
}

html body #view-results .result-metric-bar i {
  display: block;
  height: 100%;
  background: var(--lime);
  border-radius: inherit;
}

html body #view-results .result-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--ivory-line);
  border-radius: 16px;
  box-shadow: none;
}

html body #view-results .result-panel .table-heading {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 16px 20px 10px;
  border-bottom: 0;
}

html body #view-results .table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 12px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(11, 31, 58, .28) transparent;
  border: 0;
  border-radius: 0;
}

html body #view-results #result-visible-count {
  min-height: 0;
  padding: 0;
  color: var(--ivory-2);
  background: transparent;
  border-radius: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.02em;
}

html body #view-results .pill-list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  max-width: none;
}

html body #view-results .pill {
  padding: 4px 9px;
  overflow: hidden;
  color: var(--ivory-body);
  background: rgba(11, 31, 58, .06);
  border: 1px solid rgba(11, 31, 58, .1);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-results .signal-more {
  min-height: 0;
  padding: 0;
  color: var(--ivory-label);
  background: transparent;
  border: 0;
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
}

html body #view-results .signal-more:hover,
html body #view-results .signal-more:focus-visible {
  color: var(--ivory-2);
  background: transparent;
}

html body #view-results .result-load-more {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  padding: 14px 20px 18px;
}

html body #view-results .result-load-more.is-hidden {
  display: none;
}

html body #view-results .result-load-more-button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  color: var(--ivory-2);
  background: rgba(11, 31, 58, .04);
  border: 1px solid rgba(11, 31, 58, .12);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 550;
}

html body #view-results .result-load-more-button .ui-icon {
  width: 16px;
  height: 16px;
  color: rgba(11, 31, 58, .55);
}

html body #view-results .result-load-more-button:hover,
html body #view-results .result-load-more-button:focus-visible {
  background: rgba(11, 31, 58, .07);
  border-color: rgba(11, 31, 58, .2);
  outline: 0;
}

html body #view-results .empty-results {
  flex: 1 1 auto;
  min-height: 0;
  color: var(--ivory-2);
}

html body #view-results .empty-results::before {
  display: none;
}

html body #view-results .empty-results h3 {
  color: var(--ivory-2);
}

html body #view-results .empty-results p {
  color: var(--ivory-body);
}

html body #view-results .loading-stack i {
  background: linear-gradient(90deg, rgba(11, 31, 58, .08) 25%, rgba(11, 31, 58, .16) 50%, rgba(11, 31, 58, .08) 75%);
}

@media (max-width: 1100px) {
  html body #view-results .results-toolbar-main {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  html body #view-results .search-field {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 900px) {
  html body[data-active-view="results"] .app-main {
    padding-top: 16px;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  }

  html body #view-results .results-page-intro {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
  }

  html body #view-results .result-list-tools {
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 12px;
  }

  html body #view-results .export-menu,
  html body #view-results .toolbar-csv,
  html body #view-results .toolbar-csv.button {
    width: auto;
    margin-left: auto;
  }

  html body #view-results .result-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
  }

  html body #view-results .result-metrics article,
  html body #view-results .result-metrics article + article {
    min-height: 0;
    padding: 12px 12px 10px;
  }

  html body #view-results .result-metrics strong {
    font-size: 22px;
  }

  html body #view-results .result-metric-bar {
    display: none;
  }

  html body #view-results .result-load-more {
    padding: 10px 12px 12px;
  }

  html body #view-results .result-load-more-button {
    min-height: 38px;
  }
}

@media (max-width: 800px) {
  html body #view-results .results-toolbar-main,
  html body #view-results .results-toolbar-tools {
    grid-template-columns: 1fr;
    width: 100%;
  }

  html body #view-results .results-toolbar-tools,
html body #view-results .result-filters,
html body #view-results .results-refresh {
    width: 100%;
  }

  html body #view-results .result-filters > summary {
    width: 100%;
    justify-content: center;
  }

  html body #view-results .table-wrap {
    overflow: auto;
  }

}

@media (max-width: 600px) {
  html:has(body[data-active-view="results"]),
  html body[data-active-view="results"] {
    height: auto;
    max-height: none;
    overflow: auto;
  }

  html body[data-active-view="results"] .app-content,
  html body[data-active-view="results"] .app-main {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  html body #view-results.is-active {
    height: auto;
    overflow: visible;
  }

  html body #view-results .result-panel {
    min-height: 420px;
  }

  html body #view-results .result-metric-icon {
    width: 36px;
    height: 36px;
  }
}

/* -------------------------------------------------------------------------- */
/* Impostazioni e account: canvas petrolio, card scure.                        */
/* -------------------------------------------------------------------------- */

html:has(body:is([data-active-view="settings"], [data-active-view="account"])) {
  overflow: auto;
  height: auto;
  scrollbar-gutter: stable;
}

html body:is([data-active-view="settings"], [data-active-view="account"]) {
  min-height: 100dvh;
  height: auto;
  max-height: none;
  overflow: auto;
  color: var(--ivory-2);
  background:
    radial-gradient(980px 520px at 50% -8%, rgba(0, 168, 120, .21), transparent 62%),
    #FFFFFF;
  color-scheme: dark;
}

html body:is([data-active-view="settings"], [data-active-view="account"]) .app-header {
  background: transparent;
}

html body:is([data-active-view="settings"], [data-active-view="account"]) .app-content {
  height: auto;
  min-height: calc(100dvh - var(--header-height));
  max-height: none;
  overflow: visible;
  background: transparent;
}

html body:is([data-active-view="settings"], [data-active-view="account"]) .app-main {
  display: block;
  height: auto;
  max-height: none;
  padding: 20px var(--page-gutter) 48px;
  overflow: visible;
  background: transparent;
}

html body #view-settings.is-active,
html body #view-account.is-active {
  display: block;
  width: 100%;
  max-width: var(--page-canvas);
  height: auto;
  min-height: 0;
  margin: 0 auto;
  padding-bottom: 28px;
  overflow: visible;
}

html body #view-settings .settings-layout,
html body #view-settings .settings-grid,
html body #view-settings .settings-workspace,
html body #view-settings .settings-content-layout {
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
}

html body #view-settings .settings-shell,
html body #view-settings .settings-pages {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  align-items: stretch;
  width: 100%;
  min-height: 0;
  overflow: visible;
}

html body #view-settings .settings-page-intro,
html body #view-settings .settings-page-intro.compact-heading {
  display: block;
  flex: 0 0 auto;
  margin: 0 0 18px;
}

html body:is([data-active-view="settings"], [data-active-view="account"]) #view-settings .settings-page-intro h1,
html body #view-settings .settings-page-intro h1 {
  color: var(--ivory-2);
  -webkit-text-fill-color: var(--ivory-2);
  font-family: var(--font-serif);
  font-size: clamp(40px, 4.4vw, 56px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.05;
}

html body #view-settings .settings-page-intro .lead {
  max-width: 720px;
  margin: 10px 0 0;
  color: rgba(11, 31, 58, .52);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}

html body #view-settings .settings-tabs {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

html body #view-settings .settings-tab {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 220px;
  min-height: 46px;
  padding: 10px 16px;
  color: rgba(11, 31, 58, .58);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 550;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

html body #view-settings .settings-tab .ui-icon {
  width: 17px;
  height: 17px;
  color: rgba(11, 31, 58, .42);
}

html body #view-settings .settings-tab:hover {
  color: rgba(11, 31, 58, .86);
  background: rgba(11, 31, 58, .04);
}

html body #view-settings .settings-tab:hover .ui-icon {
  color: rgba(11, 31, 58, .7);
}

html body #view-settings .settings-tab.is-active,
html body #view-settings .settings-tab[aria-current="page"] {
  color: var(--ink);
  background: rgba(11, 31, 58, .06);
  border-color: rgba(11, 31, 58, .1);
  box-shadow: inset 0 -2px 0 var(--lime);
}

html body #view-settings .settings-tab.is-active .ui-icon,
html body #view-settings .settings-tab[aria-current="page"] .ui-icon {
  color: var(--lime);
}

html body #view-settings .settings-tab:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

html body #view-settings .settings-page {
  display: none;
}

html body #view-settings .settings-page.is-active {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  align-self: start;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

html body #view-settings .settings-page[hidden] {
  display: none !important;
}

html body #view-settings .settings-card,
html body #view-settings .settings-section,
html body #view-settings .settings-section + .settings-section {
  margin: 0;
  padding: 28px 26px 24px;
  height: auto;
  overflow: visible;
  color: var(--ivory-2);
  background: var(--glass-panel);
  border: 1px solid var(--glass-panel-border);
  border-radius: var(--glass-panel-radius);
  box-shadow: none;
  outline: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html body #view-settings .settings-card:focus,
html body #view-settings .settings-card:focus-visible,
html body #view-settings .settings-card:focus-within,
html body #view-settings .settings-section:focus,
html body #view-settings .settings-section:focus-visible,
html body #view-settings .settings-section:focus-within,
html body #view-settings .settings-page:focus,
html body #view-settings .settings-page:focus-visible {
  border-color: var(--glass-panel-border);
  outline: none;
  box-shadow: none;
}

html body #view-settings .settings-card-header,
html body #view-settings .settings-section-header,
html body #view-settings .settings-section .panel-heading {
  display: flex;
  flex: 0 0 auto;
  gap: 16px;
  align-items: flex-start;
  margin: 0 0 18px;
}

html body #view-settings .settings-card-icon {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--emerald-dark);
  background: rgba(0, 168, 120, .12);
  border-radius: 50%;
}

html body #view-settings .settings-card-icon .ui-icon {
  width: 18px;
  height: 18px;
}

html body #view-settings .settings-card-header h2,
html body #view-settings .settings-section-header h2 {
  margin: 0;
  color: var(--ivory-2);
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  outline: none;
}

html body #view-settings .settings-card-header h2:focus,
html body #view-settings .settings-card-header h2:focus-visible,
html body #view-settings .settings-section-header h2:focus,
html body #view-settings .settings-section-header h2:focus-visible {
  outline: none;
}

html body #view-settings .settings-card-header p,
html body #view-settings .settings-section-header > div > p:last-child {
  max-width: 640px;
  margin: 6px 0 0;
  color: rgba(11, 31, 58, .5);
  font-size: 13px;
  line-height: 1.5;
}

html body #view-settings .settings-profile-form {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
  gap: 0;
}

html body #view-settings .settings-form-grid,
html body #view-settings .settings-profile-form .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 28px;
}

html body #view-settings .field label,
html body #view-settings .settings-profile-form .field label {
  margin-bottom: 8px;
  color: var(--ivory-2);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .015em;
  line-height: 1.4;
}

html body #view-settings .settings-control-with-icon {
  position: relative;
}

html body #view-settings .settings-control-with-icon > .ui-icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 14px;
  width: 16px;
  height: 16px;
  color: rgba(11, 31, 58, .45);
  pointer-events: none;
  transform: translateY(-50%);
}

html body #view-settings .settings-profile-form :is(input, select, textarea),
html body #view-settings .site-select-trigger {
  min-height: 46px;
  color: var(--ivory-2);
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(11, 31, 58, .12);
  border-radius: 12px;
  box-shadow: none;
  font-size: 14px;
}

html body #view-settings .settings-control-with-icon > :is(input, select),
html body #view-settings .site-select-trigger {
  padding-left: 40px;
}

html body #view-settings .settings-profile-form :is(input, select, textarea)::placeholder {
  color: rgba(11, 31, 58, .32);
}

html body #view-settings .settings-profile-form :is(input, select, textarea):hover,
html body #view-settings .site-select-trigger:hover:not(:disabled) {
  background: rgba(255, 255, 255, .7);
  border-color: rgba(11, 31, 58, .2);
}

html body #view-settings .settings-profile-form :is(input, select, textarea):focus,
html body #view-settings .site-select-trigger:focus-visible,
html body #view-settings .site-select.is-open .site-select-trigger {
  background: rgba(255, 255, 255, .78);
  border-color: rgba(0, 168, 120, .55);
  box-shadow: 0 0 0 3px rgba(0, 168, 120, .14);
}

html body #view-settings .site-select-value,
html body #view-settings .site-select-trigger {
  color: var(--ivory-2);
}

html body #view-settings .site-select-menu {
  color: var(--ivory-2);
  background: #FFFFFF;
  border: 1px solid rgba(11, 31, 58, .12);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}

html body #view-settings .site-select-option {
  color: rgba(11, 31, 58, .82);
}

html body #view-settings .site-select-option:hover,
html body #view-settings .site-select-option:focus-visible,
html body #view-settings .site-select-option[aria-selected="true"] {
  color: var(--ink);
  background: rgba(11, 31, 58, .08);
}

html body #view-settings .settings-source-status {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 10px 0 0;
  color: rgba(11, 31, 58, .48);
  font-size: 12px;
  line-height: 1.45;
}

html body #view-settings .settings-source-status .ui-icon {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--lime);
}

html body #view-settings .settings-source-status b {
  display: block;
  color: var(--lime);
  font-size: 12px;
  font-weight: 650;
}

html body #view-settings .settings-source-status.is-warning .ui-icon,
html body #view-settings .settings-source-status.is-warning b {
  color: #B45309;
}

html body #view-settings .settings-ideal-client {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
  margin-top: 22px;
}

html body #view-settings .settings-field-copy {
  max-width: 760px;
  margin: 0 0 14px;
  color: rgba(11, 31, 58, .48);
  font-size: 13px;
  line-height: 1.55;
}

html body #view-settings .settings-profile-form textarea {
  flex: 0 0 auto;
  width: 100%;
  min-height: 120px;
  height: auto;
  padding: 14px 16px;
  resize: vertical;
  line-height: 1.55;
}

html body #view-settings .settings-hint-callout {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 14px 0 0;
  padding: 12px 14px;
  color: #00875F;
  background: rgba(0, 168, 120, .08);
  border: 0;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
}

html body #view-settings .settings-hint-callout .ui-icon {
  width: 16px;
  height: 16px;
  color: #00875F;
}

html body #view-settings .settings-card-footer,
html body #view-settings .settings-profile-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 0;
  padding: 18px 0 0;
  background: transparent;
  border-top: 1px solid rgba(11, 31, 58, .08);
  border-radius: 0;
}

html body #view-settings .settings-card-meta {
  min-width: 0;
}

html body #view-settings .settings-last-saved {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0;
  color: rgba(11, 31, 58, .48);
  font-size: 13px;
}

html body #view-settings .settings-saved-mark {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: var(--emerald-dark);
  background: rgba(0, 168, 120, .12);
  border-radius: 50%;
}

html body #view-settings .settings-saved-mark .ui-icon {
  width: 12px;
  height: 12px;
}

html body #view-settings .settings-profile-feedback {
  margin: 8px 0 0;
  padding: 0;
  color: var(--lime);
  background: transparent;
  border: 0;
  font-size: 12px;
}

html body #view-settings .settings-profile-feedback.is-error {
  color: #B42318;
}

html body #view-settings #settings-profile-save {
  min-width: 168px;
  height: 44px;
  min-height: 44px;
  padding: 0 22px;
  color: #fff;
  background: var(--accent-solid);
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

html body #view-settings #settings-profile-save:hover:not(:disabled) {
  background: var(--accent-solid-hover);
}

html body #view-settings #settings-profile-save:disabled {
  opacity: .45;
}

html body #view-settings .weight-definitions dt {
  color: var(--ivory-2);
}

html body #view-settings .legend-content > p,
html body #view-settings .weight-definitions dd {
  color: var(--ivory-body);
}

html body #view-settings .legend-icon {
  color: var(--ivory-2);
  background: rgba(11, 31, 58, .06);
  border-color: rgba(11, 31, 58, .12);
}

html body #view-settings .legend-content {
  padding: 16px 16px 18px;
  background: transparent;
  border-top: 1px solid rgba(11, 31, 58, .08);
}

html body #view-settings .weight-definitions {
  gap: 10px;
}

html body #view-settings .weight-definitions > div {
  padding: 12px 14px;
  background: rgba(255, 255, 255, .35);
  border: 1px solid rgba(11, 31, 58, .08);
  border-radius: 10px;
}

html body #view-settings .weight-definitions dt {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 650;
}

html body #view-settings .configuration-note {
  flex: 0 0 auto;
}

html body #view-settings .integration-list {
  display: grid;
  flex: 0 0 auto;
  gap: 10px;
  min-height: 0;
  overflow: visible;
  border: 0;
}

html body #view-settings .integration-row,
html body #view-settings .integration-row + .integration-row {
  min-height: 72px;
  padding: 14px;
  background: rgba(255, 255, 255, .35);
  border: 1px solid rgba(11, 31, 58, .08);
  border-radius: 12px;
}

html body #view-settings .integration-copy b {
  color: var(--ivory-2);
}

html body #view-settings .integration-copy small,
html body #view-settings .configuration-note {
  color: rgba(11, 31, 58, .5);
}

html body #view-settings .configuration-note {
  margin-top: 18px;
  padding: 12px 14px;
  background: rgba(0, 168, 120, .06);
  border-radius: 10px;
}

html body #view-settings .configuration-note strong {
  color: #00875F;
}

html body #view-settings .integration-mark {
  color: var(--emerald-dark);
  background: rgba(0, 168, 120, .1);
  border-color: transparent;
}

html body #view-settings .integration-manage {
  color: var(--ivory-2);
  background: transparent;
  border-color: rgba(11, 31, 58, .16);
}

html body #view-settings .skeleton-row {
  background: rgba(11, 31, 58, .04);
}

html body #view-settings .status-chip.is-configured {
  color: var(--emerald-dark);
  background: rgba(0, 168, 120, .12);
  border-color: transparent;
}

@media (max-width: 900px) {
  html body:is([data-active-view="settings"], [data-active-view="account"]) .app-main {
    padding: 16px 20px 16px;
  }

  html body #view-settings .settings-tab {
    width: auto;
    min-width: 0;
    flex: 1 1 160px;
  }

  html body #view-settings .settings-form-grid,
  html body #view-settings .settings-profile-form .form-grid {
    grid-template-columns: 1fr;
  }

  html body #view-settings .settings-card,
  html body #view-settings .settings-section {
    padding: 24px 24px 22px;
  }

  html body #view-settings .settings-card-footer,
html body #view-settings .settings-profile-actions {
    flex-direction: column;
    align-items: stretch;
    margin: 22px 0 0;
    padding: 16px 0 0;
  }

  html body #view-settings #settings-profile-save {
    width: 100%;
  }
}

/* -------------------------------------------------------------------------- */
/* Shared page gutters — Risultati is the source of truth.                     */
/* Same inset from the viewport edges on every section.                        */
/* -------------------------------------------------------------------------- */

html body .app-header,
html body:has(#view-analysis.is-active) .app-header,
html body[data-active-view="analysis"] .app-header,
html body[data-active-view="how-it-works"] .app-header,
html body[data-active-view="privacy"] .app-header,
html body[data-active-view="cookie"] .app-header,
html body[data-active-view="results"] .app-header,
html body:is([data-active-view="settings"], [data-active-view="account"]) .app-header {
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

html body[data-active-view="results"] .app-main,
html body:is([data-active-view="settings"], [data-active-view="account"]) .app-main,
html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .app-main {
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

html body #view-results,
html body #view-results.is-active,
html body #view-settings,
html body #view-settings.is-active,
html body #view-account,
html body #view-account.is-active,
html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) #view-analysis {
  width: 100%;
  max-width: var(--page-canvas);
  margin-inline: auto;
}

@media (min-width: 901px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split,
  html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-goal .recurring-target-layout.premium-split,
  html body #view-analysis #analysis-step-goal .recurring-target-layout {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--page-canvas) + 2 * var(--page-gutter));
    margin-inline: auto;
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
    justify-content: stretch;
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: 96px;
  }

  html body #view-analysis #analysis-step-location .location-kicker,
  html body #view-analysis #analysis-step-location .location-intro,
  html body #view-analysis #analysis-step-location .wizard-step-heading,
  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control,
  html body #view-analysis #analysis-step-location .popular-zones,
  html body #view-analysis #analysis-step-location .zone-selection,
  html body #view-analysis #analysis-step-location .zone-wide-warning,
  html body #view-analysis #analysis-step-location .wizard-actions,
  html body #view-analysis #analysis-step-location .zone-not-found,
  html body #view-analysis #analysis-step-goal .wizard-step-heading,
  html body #view-analysis #analysis-step-goal .recurring-target-main,
  html body #view-analysis #analysis-step-goal .search-target-selector,
  html body #view-analysis #analysis-step-goal .search-config-summary {
    grid-column: 1;
  }

  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control,
  html body #view-analysis #analysis-step-location .popular-zones,
  html body #view-analysis #analysis-step-location .zone-selection,
  html body #view-analysis #analysis-step-location .zone-wide-warning,
  html body #view-analysis #analysis-step-location .zone-not-found {
    width: 100%;
    max-width: none;
  }

  html body #view-analysis #analysis-step-location .analysis-journey.home-progress,
  html body #view-analysis .premium-split > .analysis-journey.home-progress,
  html body #view-analysis #analysis-step-goal .analysis-journey.home-progress {
    grid-column: 2;
    justify-self: stretch;
    width: 340px;
    max-width: 340px;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split,
  html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-goal .recurring-target-layout.premium-split,
  html body #view-analysis #analysis-step-goal .recurring-target-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 56px;
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
  }

  html body #view-analysis #analysis-step-location .analysis-journey.home-progress,
  html body #view-analysis .premium-split > .analysis-journey.home-progress,
  html body #view-analysis #analysis-step-goal .analysis-journey.home-progress {
    width: 300px;
    max-width: 300px;
  }
}

@media (max-width: 900px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split,
  html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-goal .recurring-target-layout.premium-split,
  html body #view-analysis #analysis-step-goal .recurring-target-layout,
  html body:is([data-active-view="settings"], [data-active-view="account"]) .app-main,
  html body .how-it-works-layout {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
  }
}

html body:is([data-active-view="settings"], [data-active-view="account"]) .app-main {
  height: auto;
  max-height: none;
  overflow: visible;
  padding-bottom: 48px;
}

html body #view-settings.is-active,
html body #view-settings .settings-page.is-active,
html body #view-settings .settings-card,
html body #view-settings .settings-section,
html body #view-account.is-active,
html body #view-account .settings-card,
html body #view-account .settings-section {
  height: auto;
  max-height: none;
  overflow: visible;
}

/* -------------------------------------------------------------------------- */
/* Impostazioni: allineamenti, hover uniforme, select modelli stabile.         */
/* -------------------------------------------------------------------------- */

html body #view-settings .settings-tab {
  line-height: 1;
}

html body #view-settings .settings-tab span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

html body #view-settings .settings-card-header,
html body #view-settings .settings-section-header,
html body #view-settings .settings-section .panel-heading {
  align-items: flex-start;
}

html body #view-settings .settings-card-icon {
  margin-top: 2px;
}

html body #view-settings .settings-card-header > div,
html body #view-settings .settings-section-header > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

html body #view-settings .settings-card-header h2,
html body #view-settings .settings-section-header h2 {
  line-height: 1.15;
}

html body #view-settings .settings-profile-form :is(input, select):not(.site-select-native),
html body #view-settings .site-select-trigger {
  display: flex;
  align-items: center;
  height: 46px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.2;
}

html body #view-settings .site-select-value {
  display: block;
  line-height: 1.2;
}

html body #view-settings .settings-source-status {
  align-items: flex-start;
}

html body #view-settings .settings-source-status .ui-icon {
  flex: 0 0 auto;
  margin-top: 2px;
}

html body #view-settings .settings-source-status > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  line-height: 1.35;
}

html body #view-settings .settings-source-status b {
  line-height: 1.2;
}

html body #view-settings .settings-hint-callout,
html body #view-settings .settings-last-saved,
html body #view-settings .settings-card-footer,
html body #view-settings .configuration-note {
  align-items: center;
}

html body #view-settings .integration-list {
  align-items: stretch;
}

html body #view-settings .integration-row,
html body #view-settings .integration-row + .integration-row {
  align-items: center;
  min-height: 76px;
}

html body #view-settings .integration-row:hover,
html body #view-settings .integration-row + .integration-row:hover {
  background: rgba(11, 31, 58, .07);
  border-color: rgba(0, 168, 120, .42);
}

html body #view-settings .integration-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

html body #view-settings .integration-copy b,
html body #view-settings .integration-copy small {
  overflow: hidden;
  margin: 0;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

html body #view-settings .integration-actions {
  align-items: center;
}

html body #view-settings .status-chip,
html body #view-settings .integration-manage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

html body #view-settings .status-chip {
  height: 26px;
  min-height: 26px;
  padding: 0 8px;
}

html body #view-settings .integration-row[data-provider] .integration-mark {
  color: var(--emerald-dark);
  background: rgba(0, 168, 120, .1);
  border-color: transparent;
}

/* -------------------------------------------------------------------------- */
/* Account: stesso canvas e stessi pezzi di Impostazioni.                      */
/* -------------------------------------------------------------------------- */

html body[data-active-view="account"] .app-main {
  padding-top: 20px;
  padding-bottom: 56px;
}

html body #view-account.is-active {
  padding-bottom: 0;
}

html body #view-account .settings-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-height: 0;
}

html body #view-account .settings-page-intro,
html body #view-account .settings-page-intro.compact-heading,
html body #view-account.view:not(#view-analysis) .page-heading {
  display: block;
  margin: 0;
}

html body[data-active-view="account"] #view-account .settings-page-intro h1,
html body #view-account .settings-page-intro h1,
html body #view-account.view:not(#view-analysis) .page-heading h1 {
  color: var(--ivory-2);
  -webkit-text-fill-color: var(--ivory-2);
  font-family: var(--font-serif);
  font-size: clamp(40px, 4.4vw, 56px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.05;
}

html body #view-account .settings-page-intro .lead,
html body #view-account.view:not(#view-analysis) .lead {
  max-width: 720px;
  margin: 10px 0 0;
  color: rgba(11, 31, 58, .52);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}

html body #view-account .settings-card,
html body #view-account .settings-section,
html body #view-account .settings-section + .settings-section {
  margin: 0;
  padding: 28px 26px 24px;
  color: var(--ivory-2);
  background: var(--glass-panel);
  border: 1px solid var(--glass-panel-border);
  border-radius: var(--glass-panel-radius);
  box-shadow: none;
  outline: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html body #view-account .settings-card-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 0 0 18px;
}

html body #view-account .settings-card-icon {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  margin-top: 2px;
  place-items: center;
  color: var(--emerald-dark);
  background: rgba(0, 168, 120, .12);
  border-radius: 50%;
}

html body #view-account .settings-card-icon .ui-icon {
  width: 18px;
  height: 18px;
}

html body #view-account .settings-card-header > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

html body #view-account .settings-card-header h2 {
  margin: 0;
  color: var(--ivory-2);
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  outline: none;
}

html body #view-account .settings-card-header p {
  max-width: 640px;
  margin: 6px 0 0;
  color: rgba(11, 31, 58, .5);
  font-size: 13px;
  line-height: 1.5;
}

html body #view-account .settings-profile-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

html body #view-account .settings-form-grid,
html body #view-account .settings-profile-form .form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 24px;
}

html body #view-account .settings-form-grid:has(#account-current-password) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

html body #view-account .field label {
  margin-bottom: 8px;
  color: rgba(11, 31, 58, .9);
  font-size: 13px;
  font-weight: 600;
}

html body #view-account .field small {
  margin-top: 8px;
  color: rgba(11, 31, 58, .42);
  font-size: 12px;
  line-height: 1.45;
}

html body #view-account .settings-control-with-icon {
  position: relative;
}

html body #view-account .settings-control-with-icon > .ui-icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 14px;
  width: 16px;
  height: 16px;
  color: rgba(11, 31, 58, .45);
  pointer-events: none;
  transform: translateY(-50%);
}

html body #view-account .settings-profile-form :is(input, select, textarea) {
  display: flex;
  align-items: center;
  width: 100%;
  height: 46px;
  min-height: 46px;
  padding: 0 14px;
  color: var(--ivory-2);
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(11, 31, 58, .12);
  border-radius: 12px;
  box-shadow: none;
  font-size: 14px;
  line-height: 1.2;
}

html body #view-account .settings-control-with-icon > :is(input, select) {
  padding-left: 40px;
}

html body #view-account .settings-control-with-icon.password-field > input {
  padding-right: 44px;
}

html body #view-account .settings-profile-form :is(input, select, textarea)::placeholder {
  color: rgba(11, 31, 58, .32);
}

html body #view-account .settings-profile-form :is(input, select, textarea):hover {
  background: rgba(255, 255, 255, .7);
  border-color: rgba(11, 31, 58, .2);
}

html body #view-account .settings-profile-form :is(input, select, textarea):focus {
  background: rgba(255, 255, 255, .78);
  border-color: rgba(0, 168, 120, .55);
  box-shadow: 0 0 0 3px rgba(0, 168, 120, .14);
}

html body #view-account .settings-profile-form input[readonly],
html body #view-account .settings-profile-form input[readonly]:hover,
html body #view-account .settings-profile-form input[readonly]:focus {
  color: rgba(11, 31, 58, .58);
  background: rgba(255, 255, 255, .38);
  border-color: rgba(11, 31, 58, .08);
  box-shadow: none;
  cursor: default;
}

html body #view-account .settings-card-footer {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 0;
  padding: 16px 0 0;
  background: transparent;
  border-top: 1px solid rgba(11, 31, 58, .08);
}

html body #view-account .settings-card-meta {
  min-width: 0;
}

html body #view-account .settings-profile-feedback {
  margin: 0;
  padding: 0;
  color: var(--lime);
  background: transparent;
  border: 0;
  font-size: 12px;
}

html body #view-account .settings-profile-feedback.is-error {
  color: #B42318;
}

html body #view-account #account-save {
  min-width: 168px;
  height: 44px;
  min-height: 44px;
  padding: 0 22px;
  color: #fff;
  background: var(--accent-solid);
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

html body #view-account #account-save:hover:not(:disabled) {
  background: var(--accent-solid-hover);
}

html body #view-account #account-save:disabled {
  opacity: .45;
}

html body #view-account .rule-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  margin: 0;
}

html body #view-account .rule-list > div {
  gap: 14px;
  align-items: flex-start;
  padding: 14px 0 4px;
  border-top: 1px solid rgba(11, 31, 58, .08);
}

html body #view-account .rule-list > div > span {
  flex: 0 0 auto;
  color: var(--lime);
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.3;
}

html body #view-account .rule-list b {
  color: var(--ivory-2);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
}

html body #view-account .rule-list small {
  margin-top: 4px;
  color: rgba(11, 31, 58, .48);
  font-size: 13px;
  line-height: 1.5;
}

html body #view-account #account-logout {
  min-width: 96px;
  height: 40px;
  min-height: 40px;
  padding: 0 16px;
  color: var(--ivory-2);
  background: transparent;
  border: 1px solid rgba(11, 31, 58, .16);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 550;
}

html body #view-account #account-logout:hover:not(:disabled) {
  color: var(--ink);
  background: rgba(11, 31, 58, .06);
  border-color: rgba(11, 31, 58, .28);
}

@media (max-width: 900px) {
  html body[data-active-view="account"] .app-main {
    padding-bottom: 40px;
  }

  html body #view-account .settings-form-grid,
  html body #view-account .settings-profile-form .form-grid,
  html body #view-account .rule-list {
    grid-template-columns: 1fr;
  }

  html body #view-account .settings-card,
  html body #view-account .settings-section {
    padding: 24px 20px 20px;
  }

  html body #view-account .settings-card-footer {
    flex-direction: column;
    align-items: stretch;
  }

  html body #view-account #account-save,
  html body #view-account #account-logout {
    width: 100%;
  }
}

/* -------------------------------------------------------------------------- */
/* Criteri ricerca: stessa pelle della scheda prospect.                        */
/* -------------------------------------------------------------------------- */

html body .search-config-dialog {
  width: min(720px, calc(100% - 48px));
  height: auto;
  max-height: min(860px, calc(100dvh - 40px));
  margin: auto;
  overflow: hidden;
  color: var(--ivory-2);
  background: #FFFFFF;
  border: 1px solid var(--glass-panel-border);
  border-radius: var(--glass-panel-radius);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
  color-scheme: dark;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

html body .search-config-dialog::backdrop {
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(8px);
}

html body .search-config-shell {
  max-height: min(860px, calc(100dvh - 40px));
}

html body .search-config-header {
  gap: 16px;
  padding: 24px 28px 18px;
  background: transparent;
  border-bottom: 1px solid var(--ivory-line);
}

html body .search-config-header .section-code {
  margin-bottom: 8px;
  color: var(--lime);
  font-family: inherit;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
}

html body .search-config-header h2 {
  color: var(--ivory-2);
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 500;
  letter-spacing: -.03em;
}

html body .search-config-header h2 + p {
  color: var(--ivory-label);
  font-size: 13px;
  line-height: 1.5;
  white-space: normal;
}

html body .search-config-close,
html body .search-config-dialog .icon-button {
  color: var(--ivory-body);
  background: transparent;
  border: 1px solid var(--ivory-line);
  border-radius: 12px;
}

html body .search-config-close:hover,
html body .search-config-dialog .icon-button:hover {
  color: var(--ivory-2);
  background: rgba(11, 31, 58, .06);
  border-color: rgba(11, 31, 58, .2);
}

html body .search-config-body {
  padding: 0 28px 22px;
}

html body .search-config-criterion .advanced-section-heading h4 {
  color: var(--ivory-2);
  font-size: 14px;
  font-weight: 650;
}

html body .search-config-criterion .advanced-section-heading p {
  color: var(--ivory-label);
}

html body .search-config-dialog .field label {
  color: var(--ivory-body);
}

html body .search-config-dialog .field :is(input, textarea, select:not(.site-select-native)),
html body .search-config-dialog .model-picker-trigger,
html body .search-config-dialog .site-select-trigger {
  color: var(--ivory-2);
  background: rgba(255, 255, 255, .55);
  border-color: rgba(11, 31, 58, .12);
  box-shadow: none;
}

html body .search-config-dialog .field :is(input[type="number"], input[type="text"], textarea) {
  -webkit-appearance: none;
  appearance: none;
}

html body .search-config-dialog .field :is(input, textarea, select:not(.site-select-native)):hover:not(:disabled),
html body .search-config-dialog .model-picker-trigger:hover:not(:disabled),
html body .search-config-dialog .site-select-trigger:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, .72);
  border-color: rgba(11, 31, 58, .2);
  box-shadow: none;
}

html body .search-config-dialog .field :is(input, textarea, select:not(.site-select-native)):focus,
html body .search-config-dialog .field :is(input, textarea, select:not(.site-select-native)):focus-visible,
html body .search-config-dialog .model-picker-trigger:focus-visible,
html body .search-config-dialog .model-picker.is-open .model-picker-trigger,
html body .search-config-dialog .site-select-trigger:focus-visible,
html body .search-config-dialog .site-select.is-open .site-select-trigger {
  border-color: rgba(0, 168, 120, .55);
  box-shadow: 0 0 0 3px rgba(0, 168, 120, .14);
}

html body .search-config-dialog .field :is(input, textarea)::placeholder {
  color: rgba(11, 31, 58, .32);
}

html body .search-config-dialog .field :is(input, select:not(.site-select-native), textarea):disabled,
html body .search-config-dialog .model-picker-trigger:disabled,
html body .search-config-dialog .site-select-trigger:disabled {
  color: rgba(11, 31, 58, .38);
  background-color: rgba(255, 255, 255, .35);
  cursor: not-allowed;
}

html body .search-config-dialog .site-select-trigger {
  color: var(--ivory-2);
}

html body .search-config-dialog .site-select-trigger > .ui-icon {
  color: var(--ivory-body);
  background: transparent;
  border: 0;
}

html body .search-config-dialog .site-select-menu {
  color: var(--ivory-2);
  background: #FFFFFF;
  border-color: rgba(11, 31, 58, .12);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .35);
}

html body .search-config-dialog .site-select-option {
  color: rgba(11, 31, 58, .86);
}

html body .search-config-dialog .site-select-option:hover,
html body .search-config-dialog .site-select-option:focus-visible {
  color: var(--ink);
  background: rgba(11, 31, 58, .08);
  outline: 0;
}

html body .search-config-dialog .site-select-option[aria-selected="true"] {
  color: var(--emerald-dark);
  background: rgba(0, 168, 120, .14);
  font-weight: 650;
}

html body .search-config-dialog .site-select-option[aria-selected="true"] .site-select-check {
  background: rgba(0, 168, 120, .22);
}

html body .search-config-dialog .site-select-option[aria-selected="true"] .site-select-check::before {
  width: 5px;
  height: 8px;
  border-right: 1.6px solid var(--lime);
  border-bottom: 1.6px solid var(--lime);
  content: "";
  transform: translateY(-1px) rotate(45deg);
}

html body .search-config-dialog .field-counter small,
html body .search-config-dialog .field-counter output,
html body .search-config-dialog .field small {
  color: var(--ivory-label);
}

html body .search-config-dialog .field-error {
  color: #B42318;
}

html body .search-config-sections,
html body .search-config-section {
  border-color: var(--ivory-line);
}

html body .search-config-section > summary:hover {
  background: rgba(11, 31, 58, .05);
}

html body .search-config-section > summary b { color: var(--ivory-2); }
html body .search-config-section > summary small,
html body .search-config-section > summary .ui-icon { color: var(--ivory-label); }
html body .search-config-section[open] > summary .ui-icon { color: var(--lime); }

html body .search-config-dialog .model-picker-trigger > .ui-icon {
  color: var(--ivory-body);
  background: rgba(11, 31, 58, .06);
  border-color: rgba(11, 31, 58, .1);
}

html body .search-config-dialog .model-picker-menu {
  background: #FFFFFF;
  border-color: rgba(11, 31, 58, .12);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .35);
}

html body .search-config-dialog .model-picker-search-wrap {
  background: rgba(255, 255, 255, .45);
  border-bottom-color: var(--ivory-line);
}

html body .search-config-dialog .model-picker-option {
  color: var(--ivory-2);
}

html body .search-config-dialog .model-picker-option:hover,
html body .search-config-dialog .model-picker-option:focus-visible {
  background: rgba(11, 31, 58, .06);
}

html body .search-config-dialog .model-picker-option[aria-selected="true"] {
  background: rgba(0, 168, 120, .14);
}

html body .search-config-dialog .model-picker-option small {
  color: var(--ivory-label);
}

html body .search-config-dialog .check-field {
  background: rgba(255, 255, 255, .35);
  border-color: var(--ivory-line);
}

html body .search-config-dialog .number-with-unit {
  align-items: stretch;
}

html body .search-config-dialog .number-with-unit input,
html body .search-config-dialog .number-with-unit input:hover:not(:disabled),
html body .search-config-dialog .number-with-unit input:focus,
html body .search-config-dialog .number-with-unit input:focus-visible {
  color: var(--ivory-2);
  background: rgba(255, 255, 255, .55);
  border-color: rgba(11, 31, 58, .12);
  -webkit-appearance: none;
  appearance: textfield;
}

html body .search-config-dialog .number-with-unit input:hover:not(:disabled) {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(11, 31, 58, .2);
}

html body .search-config-dialog .number-with-unit input:focus,
html body .search-config-dialog .number-with-unit input:focus-visible {
  border-color: rgba(0, 168, 120, .55);
  box-shadow: 0 0 0 3px rgba(0, 168, 120, .14);
}

html body .search-config-dialog .number-with-unit input::-webkit-outer-spin-button,
html body .search-config-dialog .number-with-unit input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

html body .search-config-dialog .number-with-unit input::placeholder {
  color: rgba(11, 31, 58, .38);
}

html body .search-config-dialog .number-with-unit span {
  color: var(--ivory-body);
  background: rgba(255, 255, 255, .72);
  border-color: rgba(11, 31, 58, .12);
}

html body .search-config-footer {
  background: transparent;
  border-top: 1px solid var(--glass-panel-border);
  backdrop-filter: none;
}

html body .search-config-footer .button-ghost {
  color: var(--ivory-2);
  background: transparent;
  border: 1px solid rgba(11, 31, 58, .16);
}

html body .search-config-footer .button-ghost:hover:not(:disabled) {
  background: rgba(11, 31, 58, .06);
}

html body .search-config-footer .platform-action-primary {
  color: #fff;
  background: var(--accent-solid);
  border: 0;
  opacity: 1;
}

html body .search-config-footer .platform-action-primary:hover:not(:disabled) {
  background: var(--accent-solid-hover);
  transform: none;
}

html body .search-config-footer .platform-action-primary:disabled {
  color: rgba(11, 31, 58, .45);
  background: rgba(11, 31, 58, .12);
  box-shadow: none;
  opacity: 1;
}

@media (max-width: 700px) {
  html body .search-config-dialog {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  html body .search-config-shell {
    height: 100dvh;
    max-height: none;
  }

  html body .search-config-header,
  html body .search-config-body,
  html body .search-config-footer {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* -------------------------------------------------------------------------- */
/* Servizi collegati: stesso popup dei criteri ricerca.                        */
/* -------------------------------------------------------------------------- */

html body .config-dialog {
  inset: 0;
  width: min(500px, calc(100% - 48px));
  max-width: min(500px, calc(100% - 48px));
  height: fit-content;
  max-height: min(90dvh, calc(100dvh - 48px));
  margin: auto;
  overflow: hidden;
  color: var(--ivory-2);
  background: var(--glass-panel);
  border: 1px solid var(--glass-panel-border);
  border-radius: var(--glass-panel-radius);
  box-shadow: none;
  color-scheme: dark;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html body .config-dialog::backdrop {
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(8px);
}

html body .config-shell {
  height: auto;
  max-height: min(90dvh, calc(100dvh - 48px));
}

html body .config-header {
  gap: 16px;
  padding: 24px 28px 18px;
  background: transparent;
  border-bottom: 1px solid var(--ivory-line);
}

html body .config-header .section-code {
  margin-bottom: 8px;
  color: var(--lime);
  font-family: inherit;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
}

html body .config-header h2 {
  color: var(--ivory-2);
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.2vw, 26px);
  font-weight: 500;
  letter-spacing: -.03em;
}

html body .config-header > div > p:last-child {
  color: var(--ivory-label);
  font-size: 13px;
  line-height: 1.5;
}

html body .config-dialog .icon-button {
  color: var(--ivory-body);
  background: transparent;
  border: 1px solid var(--ivory-line);
  border-radius: 12px;
}

html body .config-dialog .icon-button:hover {
  color: var(--ivory-2);
  background: rgba(11, 31, 58, .06);
  border-color: rgba(11, 31, 58, .2);
}

html body .config-fields {
  min-height: 0;
  padding: 20px 28px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

html body .config-dialog .field label,
html body .config-dialog .destination-type-field legend {
  color: var(--ivory-body);
}

html body .config-fields .field small {
  color: var(--ivory-label);
}

html body .onboarding-dialog .setup-guide,
html body .onboarding-dialog .setup-advanced,
html body .config-dialog .setup-guide,
html body .config-dialog .setup-advanced {
  color: var(--ivory-2);
  background: var(--glass-inset);
  border: 1px solid var(--glass-inset-border);
  border-radius: 12px;
}

html body .onboarding-dialog .setup-guide summary,
html body .onboarding-dialog .setup-advanced summary,
html body .config-dialog .setup-guide summary,
html body .config-dialog .setup-advanced summary,
html body .onboarding-dialog .setup-guide summary strong,
html body .onboarding-dialog .setup-advanced summary strong,
html body .config-dialog .setup-guide summary strong,
html body .config-dialog .setup-advanced summary strong {
  color: var(--ivory-2);
}

html body .onboarding-dialog .setup-guide summary:hover,
html body .onboarding-dialog .setup-advanced summary:hover,
html body .config-dialog .setup-guide summary:hover,
html body .config-dialog .setup-advanced summary:hover {
  background: rgba(11, 31, 58, .05);
}

html body .onboarding-dialog .setup-guide summary small,
html body .onboarding-dialog .setup-advanced summary small,
html body .config-dialog .setup-guide summary small,
html body .config-dialog .setup-advanced summary small,
html body .onboarding-dialog .setup-guide-steps p,
html body .config-dialog .setup-guide-steps p {
  color: var(--ivory-body);
}

html body .onboarding-dialog .setup-guide .legend-icon,
html body .config-dialog .setup-guide .legend-icon {
  color: var(--ivory-2);
  background: rgba(11, 31, 58, .06);
  border-color: rgba(11, 31, 58, .12);
}

html body .onboarding-dialog :is(.setup-guide, .setup-advanced) .legend-chevron,
html body .config-dialog :is(.setup-guide, .setup-advanced) .legend-chevron {
  color: var(--ivory-body);
}

html body .onboarding-dialog .setup-guide .legend-content,
html body .onboarding-dialog .setup-advanced .legend-content,
html body .config-dialog .setup-guide .legend-content,
html body .config-dialog .setup-advanced .legend-content {
  background: transparent;
  border-top: 1px solid rgba(11, 31, 58, .08);
}

html body .onboarding-dialog .setup-guide-steps span,
html body .config-dialog .setup-guide-steps span {
  color: var(--lime);
}

html body .onboarding-dialog .setup-guide-steps a,
html body .config-dialog .setup-guide-steps a {
  color: var(--lime);
}

html body .onboarding-dialog .setup-guide-steps a:hover,
html body .config-dialog .setup-guide-steps a:hover {
  color: var(--ivory-2);
}

html body .onboarding-dialog .setup-guide-steps code,
html body .config-dialog .setup-guide-steps code {
  color: var(--ivory-2);
  background: rgba(255, 255, 255, .45);
  border-color: rgba(11, 31, 58, .12);
}

html body .onboarding-dialog .setup-advanced .legend-content .field,
html body .config-dialog .setup-advanced .legend-content .field {
  margin: 0;
}

html body .config-dialog .setup-advanced .legend-content .field small {
  color: var(--ivory-label);
}

html body .config-dialog .field :is(input, textarea, select:not(.site-select-native)),
html body .config-dialog .model-picker-trigger,
html body .config-dialog .site-select-trigger {
  color: var(--ivory-2);
  background: rgba(255, 255, 255, .55);
  border-color: rgba(11, 31, 58, .12);
  box-shadow: none;
}

html body .config-dialog .field :is(input[type="password"], input[type="text"], input[type="url"], input[type="number"]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  color: #0B1F3A !important;
  -webkit-text-fill-color: #0B1F3A !important;
  caret-color: #0B1F3A !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-color: rgba(11, 31, 58, .14) !important;
  box-shadow: inset 0 0 0 1000px #FFFFFF !important;
  color-scheme: dark;
}

html body .config-dialog .field :is(input[type="password"], input[type="text"], input[type="url"])::placeholder {
  color: rgba(11, 31, 58, .38) !important;
  -webkit-text-fill-color: rgba(11, 31, 58, .38) !important;
  opacity: 1;
}

html body .config-dialog .field :is(input, textarea, select:not(.site-select-native)):hover:not(:disabled),
html body .config-dialog .model-picker-trigger:hover:not(:disabled),
html body .config-dialog .site-select-trigger:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, .72);
  border-color: rgba(11, 31, 58, .2);
  box-shadow: none;
}

html body .config-dialog .field :is(input[type="password"], input[type="text"], input[type="url"]):hover:not(:disabled) {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-color: rgba(11, 31, 58, .22) !important;
  box-shadow: inset 0 0 0 1000px #FFFFFF !important;
}

html body .config-dialog .field :is(input, textarea, select:not(.site-select-native)):focus,
html body .config-dialog .field :is(input, textarea, select:not(.site-select-native)):focus-visible,
html body .config-dialog .model-picker-trigger:focus-visible,
html body .config-dialog .model-picker.is-open .model-picker-trigger,
html body .config-dialog .site-select-trigger:focus-visible,
html body .config-dialog .site-select.is-open .site-select-trigger {
  border-color: rgba(0, 168, 120, .55);
  box-shadow: 0 0 0 3px rgba(0, 168, 120, .14);
}

html body .config-dialog .field :is(input[type="password"], input[type="text"], input[type="url"]):focus,
html body .config-dialog .field :is(input[type="password"], input[type="text"], input[type="url"]):focus-visible {
  border-color: rgba(0, 168, 120, .55) !important;
  box-shadow: inset 0 0 0 1000px #FFFFFF, 0 0 0 3px rgba(0, 168, 120, .14) !important;
}

html body .config-dialog .field :is(input, select:not(.site-select-native), textarea):disabled,
html body .config-dialog .model-picker-trigger:disabled,
html body .config-dialog .site-select-trigger:disabled {
  color: rgba(11, 31, 58, .38);
  background-color: rgba(255, 255, 255, .35);
  cursor: not-allowed;
}

html body .config-dialog .model-picker-trigger > .ui-icon {
  color: var(--ivory-body);
  background: rgba(11, 31, 58, .06);
  border-color: rgba(11, 31, 58, .1);
}

html body .config-dialog .model-picker-menu,
html body .config-dialog .site-select-menu {
  color: var(--ivory-2);
  background: #FFFFFF;
  border-color: rgba(11, 31, 58, .12);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .35);
}

html body .config-dialog .model-picker-search-wrap {
  background: rgba(255, 255, 255, .45);
  border-bottom-color: var(--ivory-line);
}

html body .config-dialog .model-picker-option,
html body .config-dialog .site-select-option {
  color: rgba(11, 31, 58, .86);
}

html body .config-dialog .model-picker-option:hover,
html body .config-dialog .model-picker-option:focus-visible,
html body .config-dialog .site-select-option:hover,
html body .config-dialog .site-select-option:focus-visible {
  color: var(--ink);
  background: rgba(11, 31, 58, .08);
  outline: 0;
}

html body .config-dialog .model-picker-option[aria-selected="true"],
html body .config-dialog .site-select-option[aria-selected="true"] {
  color: var(--emerald-dark);
  background: rgba(0, 168, 120, .14);
}

html body .config-dialog .model-picker-option small {
  color: var(--ivory-label);
}

html body .config-dialog .destination-type-card {
  color: var(--ivory-2);
  background: rgba(255, 255, 255, .38);
  border-color: rgba(11, 31, 58, .12);
}

html body .config-dialog .destination-type-icon {
  color: var(--ivory-body);
  background: rgba(11, 31, 58, .06);
  border-color: rgba(11, 31, 58, .1);
}

html body .config-dialog .destination-type-copy strong { color: var(--ivory-2); }
html body .config-dialog .destination-type-copy small { color: var(--ivory-label); }

html body .config-dialog .destination-type-option:hover .destination-type-card {
  background: rgba(255, 255, 255, .55);
  border-color: rgba(11, 31, 58, .2);
}

html body .config-dialog .destination-type-option:has(input:checked) .destination-type-card {
  color: var(--ivory-2);
  background: rgba(163, 201, 122, .12);
  border-color: rgba(163, 201, 122, .55);
  box-shadow: inset 0 0 0 1px rgba(163, 201, 122, .18);
}

html body .config-dialog .destination-type-option:has(input:checked) .destination-type-icon {
  color: var(--emerald-dark);
  background: rgba(0, 168, 120, .16);
  border-color: transparent;
}

html body .config-dialog .destination-type-option:has(input:checked) .destination-type-copy strong {
  color: var(--ivory-2);
}

html body .config-dialog .destination-type-option:has(input:checked) .destination-type-copy small {
  color: var(--ivory-body);
}

html body .config-feedback {
  margin: 0 28px 8px;
  color: var(--ivory-body);
  background: rgba(255, 255, 255, .45);
  border-color: var(--ivory-line);
}

html body .config-feedback.is-error {
  color: #B42318;
  background: rgba(180, 35, 24, .16);
  border-color: rgba(180, 35, 24, .35);
}

html body .config-actions {
  background: transparent;
  border-top: 1px solid var(--glass-panel-border);
}

html body .config-dialog .button-secondary,
html body .config-dialog .button-ghost {
  color: var(--ivory-2);
  background: transparent;
  border: 1px solid rgba(11, 31, 58, .16);
}

html body .config-dialog .button-secondary:hover:not(:disabled),
html body .config-dialog .button-ghost:hover:not(:disabled) {
  color: var(--ivory-2);
  background: rgba(11, 31, 58, .06);
}

html body .config-dialog .button-primary {
  color: #fff;
  background: var(--accent-solid);
  border: 0;
  box-shadow: none;
}

html body .config-dialog .button-primary:hover:not(:disabled) {
  background: var(--accent-solid-hover);
  transform: none;
}

html body .config-dialog .button-primary:disabled {
  color: rgba(11, 31, 58, .45);
  background: rgba(11, 31, 58, .12);
  opacity: 1;
}

html body .config-dialog .button-danger {
  color: #B42318;
  background: transparent;
  border: 1px solid rgba(180, 35, 24, .4);
}

html body .config-dialog .button-danger:hover:not(:disabled) {
  color: var(--ink);
  background: rgba(180, 35, 24, .22);
  border-color: rgba(180, 35, 24, .55);
}

@media (max-width: 700px) {
  html body .config-dialog {
    width: min(500px, calc(100% - 24px));
    max-width: min(500px, calc(100% - 24px));
    height: fit-content;
    max-height: calc(100dvh - 20px);
    margin: auto;
    border: 1px solid var(--ivory-line);
    border-radius: 20px;
  }

  html body .config-shell {
    height: auto;
    max-height: calc(100dvh - 20px);
  }

  html body .config-header,
  html body .config-fields,
  html body .config-actions {
    padding-left: 18px;
    padding-right: 18px;
  }

  html body .config-feedback { margin-right: 18px; margin-left: 18px; }
}

/* -------------------------------------------------------------------------- */
/* Onboarding: stessa pelle delle Impostazioni.                                */
/* -------------------------------------------------------------------------- */

html body:has(#onboarding-dialog[open]),
html body.has-required-onboarding {
  color: var(--ivory-2);
  background:
    radial-gradient(980px 520px at 50% -8%, rgba(0, 168, 120, .21), transparent 62%),
    #FFFFFF;
  color-scheme: dark;
}

html body .onboarding-dialog,
html body .onboarding-dialog.onboarding-fullscreen {
  flex-direction: column;
  color: var(--ivory-2);
  background: transparent;
  color-scheme: dark;
  border: 0;
}
html body .onboarding-dialog:not([open]),
html body .onboarding-dialog.onboarding-fullscreen:not([open]) {
  display: none;
}
html body .onboarding-dialog[open],
html body .onboarding-dialog.onboarding-fullscreen[open] {
  display: flex;
}

html body .onboarding-shell {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background:
    radial-gradient(980px 520px at 50% -8%, rgba(0, 168, 120, .21), transparent 62%),
    #FFFFFF;
}

html body .onboarding-home {
  position: absolute;
  top: 0;
  left: 0;
  flex: none;
}

html body .onboarding-home:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 6px;
}

html body .onboarding-layout,
html body .onboarding-layout.app-workspace-grid {
  box-sizing: border-box;
  min-height: 100dvh;
  padding-top: var(--header-height);
  padding-bottom: var(--header-height);
  overflow: hidden;
  align-content: safe center;
  align-items: stretch;
  grid-template-rows: max-content;
}

html body .onboarding-main,
html body .onboarding-rail.side-progress-card {
  margin-top: 0;
}

/* La card Configurazione ha sempre l'altezza di Fonte dati. height: 0 fa
   sì che il form non allunghi la riga; min-height: 100% lo allinea alla card.
   overflow-y: auto sul contenuto evita che banner di errore e campi extra
   taglino la schermata. */
html body .onboarding-main {
  display: flex;
  flex-direction: column;
  height: 0;
  min-height: 100%;
  overflow: hidden;
}

html body .onboarding-content {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

html body .onboarding-actions {
  flex: 0 0 auto;
}

html body .onboarding-heading {
  margin-bottom: 18px;
}

html body .onboarding-panels {
  min-height: 0;
}

html body .onboarding-fields {
  gap: 14px;
}

@media (min-width: 901px) and (max-height: 820px) {
  html body .onboarding-layout,
  html body .onboarding-layout.app-workspace-grid {
    padding-top: calc(var(--header-height) + 12px);
    padding-bottom: 28px;
    align-content: start;
  }
}

@media (max-width: 900px) {
  html body .onboarding-layout,
  html body .onboarding-layout.app-workspace-grid {
    min-height: 0;
    padding-top: var(--header-height);
    padding-bottom: 32px;
    align-content: start;
    grid-template-rows: none;
  }

  html body .onboarding-main {
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  html body .onboarding-content {
    overflow: visible;
    flex: 0 1 auto;
  }

  html body .onboarding-rail.side-progress-card {
    height: auto;
    align-self: auto;
  }
}

html body .onboarding-dialog .onboarding-close {
  color: var(--ivory-body);
  background: transparent;
  border: 1px solid var(--ivory-line);
  border-radius: 12px;
}

html body .onboarding-dialog .onboarding-close:hover,
html body .onboarding-dialog .onboarding-close:focus-visible {
  color: var(--ivory-2);
  background: rgba(11, 31, 58, .06);
  border-color: rgba(11, 31, 58, .2);
}

html body .onboarding-dialog::backdrop {
  background: transparent;
}

html body[data-active-view="results"] #onboarding-dialog {
  color-scheme: dark;
}

html body #onboarding-next::after {
  content: none;
}

html body .onboarding-heading .section-code,
html body .onboarding-heading > p:last-child,
html body .onboarding-actions > p,
html body .onboarding-summary-card header span,
html body .onboarding-summary-card small,
html body .onboarding-summary-card p,
html body .onboarding-form-field small,
html body .field-counter small,
html body .field-counter output,
html body .osm-attribution {
  color: var(--ivory-label);
}

html body .onboarding-heading h2,
html body .onboarding-success h2 {
  color: var(--ivory-2);
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -.04em;
}

html body .onboarding-rail.side-progress-card {
  height: max-content;
  min-height: 0;
  align-self: start;
  color: var(--ivory-2);
  background: var(--glass-panel);
  border: 1px solid var(--glass-panel-border);
  border-radius: var(--glass-panel-radius);
  box-shadow: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html body .onboarding-rail-intro h2,
html body .side-progress-card .onboarding-rail-intro h2 {
  color: rgba(11, 31, 58, .78);
}

html body .onboarding-progress {
  margin: 0 0 18px;
}

html body .onboarding-progress li {
  min-height: 72px;
}

html body .onboarding-progress li:not(:last-child)::after {
  background: rgba(11, 31, 58, .18);
}

html body .onboarding-progress strong,
html body .onboarding-progress li.is-active strong,
html body .onboarding-progress li.is-complete strong,
html body .onboarding-progress li:not(.is-active):not(.is-complete) strong {
  color: var(--ivory-2);
}

html body .onboarding-progress li:not(.is-active):not(.is-complete) strong {
  color: rgba(11, 31, 58, .88);
  font-weight: 620;
}

html body .onboarding-progress small {
  color: rgba(11, 31, 58, .62);
}

html body .onboarding-step-number,
html body .onboarding-progress li:not(.is-active):not(.is-complete) .onboarding-step-number {
  color: rgba(11, 31, 58, .82);
  background: rgba(11, 31, 58, .1);
  border-color: rgba(11, 31, 58, .14);
}

html body .onboarding-progress li.is-active .onboarding-step-number,
html body .onboarding-progress li.is-complete .onboarding-step-number {
  color: var(--emerald-dark);
  background: rgba(0, 168, 120, .18);
  border-color: transparent;
}

html body .onboarding-rail-note {
  color: #00875F;
  background: rgba(0, 168, 120, .08);
  border: 0;
}

html body .onboarding-rail-note p,
html body .onboarding-rail-note strong {
  color: #00875F;
}

html body .password-field {
  position: relative;
}

html body .password-toggle {
  color: rgba(11, 31, 58, .45);
  background: transparent;
  border: 0;
}

html body .password-toggle:hover:not(:disabled) {
  color: var(--ivory-2);
  background: rgba(11, 31, 58, .08);
}

html body .password-toggle:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 1px;
}

html body .onboarding-form-field .password-field > input,
html body .onboarding-form-field .password-field > input:focus {
  padding-right: 44px !important;
}

html body .onboarding-form-field :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select),
html body .onboarding-form-field :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus {
  color: var(--ivory-2) !important;
  background: rgba(255, 255, 255, .55) !important;
  border-color: rgba(11, 31, 58, .12) !important;
  box-shadow: none !important;
}

html body .onboarding-form-field :is(input, textarea, select):focus {
  border-color: rgba(0, 168, 120, .55) !important;
  box-shadow: 0 0 0 3px rgba(0, 168, 120, .14) !important;
}

html body .onboarding-form-field :is(input, textarea)::placeholder {
  color: rgba(11, 31, 58, .22) !important;
  -webkit-text-fill-color: rgba(11, 31, 58, .22) !important;
  opacity: 1;
}

html body .onboarding-form-field .privacy-check {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
}

html body .onboarding-form-field .privacy-check span {
  display: flex;
  align-items: center;
  min-height: 16px;
  line-height: 16px;
}

html body .onboarding-form-field .privacy-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px !important;
  margin: 0;
  padding: 0 !important;
  flex: none;
  align-self: center;
  background: rgba(255, 255, 255, .55) !important;
  border: 1px solid rgba(11, 31, 58, .28) !important;
  border-radius: 4px;
  box-shadow: none !important;
  -webkit-text-fill-color: unset;
}

html body .onboarding-form-field .privacy-check input[type="checkbox"]:checked {
  background-color: var(--lime) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3.8 8.4 6.7 11.2 12.2 4.8'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
  border-color: var(--lime) !important;
}

html body .onboarding-form-field .privacy-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
  box-shadow: none !important;
}

html body .onboarding-form-field label,
html body .onboarding-summary-card strong,
html body .onboarding-success > p.section-code + h2,
html body .geo-provider-copy strong {
  color: var(--ivory-2);
}

html body .geo-provider-card {
  color: var(--ivory-2);
  background: rgba(255, 255, 255, .35);
  border: 1px solid rgba(11, 31, 58, .08);
  box-shadow: none;
}

html body .geo-provider-card:hover {
  border-color: rgba(11, 31, 58, .16);
}

html body .geo-provider-card:has(input:checked) {
  background: rgba(11, 31, 58, .06);
  border-color: rgba(0, 168, 120, .42);
  box-shadow: none;
}

html body .geo-provider-icon {
  color: var(--emerald-dark);
  background: rgba(0, 168, 120, .12);
  border-color: transparent;
}

html body .geo-provider-card:has(input:checked) .geo-provider-check {
  color: #FFFFFF;
  background: var(--lime);
  border-color: var(--lime);
}

html body .geo-provider-title b {
  color: rgba(11, 31, 58, .55);
  background: rgba(11, 31, 58, .06);
}

html body .geo-provider-copy small {
  color: var(--ivory-body);
}

html body .onboarding-summary-card {
  color: var(--ivory-2);
  background: var(--glass-inset);
  border: 1px solid var(--glass-inset-border);
  border-radius: var(--glass-inset-radius);
}

html body .onboarding-summary-card p {
  border-top-color: rgba(11, 31, 58, .08);
}

html body .onboarding-actions .button.platform-action-primary,
html body #company-profile-save.platform-action-primary {
  color: #fff;
  background: var(--accent-solid);
  border: 0;
}

html body .onboarding-actions .button.platform-action-primary:hover:not(:disabled),
html body #company-profile-save.platform-action-primary:hover:not(:disabled) {
  background: var(--accent-solid-hover);
  box-shadow: none;
  transform: none;
}

html body .onboarding-actions .button.platform-action-secondary {
  color: var(--ivory-2);
  background: transparent;
  border: 1px solid rgba(11, 31, 58, .16);
}

html body .onboarding-text-button,
html body .onboarding-summary-card .text-button {
  color: var(--lime);
}

html body .onboarding-success > p:not(.section-code),
html body .onboarding-rubric-status p {
  color: var(--ivory-body);
}

html body .onboarding-rubric-status.is-working strong {
  color: var(--ivory-2);
}

html body .onboarding-rubric-spinner {
  border-color: rgba(11, 31, 58, .16);
  border-top-color: var(--lime);
}

html body #onboarding-rubric-list.is-skeleton i,
html body #onboarding-rubric-list.is-skeleton dt b {
  background: linear-gradient(90deg, rgba(11, 31, 58, .06) 25%, rgba(11, 31, 58, .14) 50%, rgba(11, 31, 58, .06) 75%);
  background-size: 200% 100%;
}

html body .onboarding-actions > p.is-working::before {
  border-color: rgba(11, 31, 58, .18);
  border-top-color: var(--lime);
}

html body .onboarding-actions .button.platform-action-primary:disabled,
html body #company-profile-save.platform-action-primary:disabled,
html body #onboarding-next.platform-action-primary:disabled {
  color: rgba(11, 31, 58, .42);
  background: rgba(11, 31, 58, .1);
  cursor: not-allowed;
  box-shadow: none;
}

html body .onboarding-actions .button.platform-action-primary[aria-busy="true"],
html body .onboarding-actions .button.platform-action-primary.is-loading,
html body #company-profile-save.platform-action-primary[aria-busy="true"],
html body #company-profile-save.platform-action-primary.is-loading,
html body #onboarding-next.platform-action-primary[aria-busy="true"] {
  color: #fff;
  background: var(--accent-solid);
  cursor: wait;
  opacity: 1;
}

html body .onboarding-rubric .weight-definitions > div {
  padding: 12px 14px;
  background: rgba(255, 255, 255, .35);
  border: 1px solid rgba(11, 31, 58, .08);
  border-radius: 10px;
}

html body .onboarding-rubric .weight-definitions dt {
  color: var(--ivory-2);
}

html body .onboarding-rubric .weight-definitions dt b,
html body .onboarding-rubric .weight-definitions dd {
  color: var(--ivory-body);
}

html body .onboarding-form-field .model-catalog-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

html body .onboarding-form-field .model-picker-trigger,
html body .onboarding-form-field .model-picker-trigger:disabled,
html body .onboarding-form-field .model-picker-trigger:hover:not(:disabled) {
  color: var(--ivory-2);
  background: rgba(255, 255, 255, .55);
  border-color: rgba(11, 31, 58, .12);
  box-shadow: none;
}

html body .onboarding-form-field .model-picker-trigger {
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  padding-top: 0;
  padding-bottom: 0;
}

html body .onboarding-form-field .model-picker-trigger:disabled {
  color: rgba(11, 31, 58, .45);
}

html body .onboarding-form-field .model-picker-trigger > .ui-icon {
  color: rgba(11, 31, 58, .45);
}

html body .onboarding-form-field .model-picker-trigger:focus-visible,
html body .onboarding-form-field .model-picker.is-open .model-picker-trigger {
  border-color: rgba(0, 168, 120, .55);
  box-shadow: 0 0 0 3px rgba(0, 168, 120, .14);
}

html body .onboarding-form-field .model-catalog-control .button-secondary {
  height: 52px;
  min-height: 52px;
  color: var(--ivory-2);
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(11, 31, 58, .12);
}

html body .onboarding-form-field .model-picker-menu {
  color: var(--ivory-2);
  background: #FFFFFF;
  border: 1px solid rgba(11, 31, 58, .12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}

html body .onboarding-form-field .model-picker-search-wrap {
  background: rgba(255, 255, 255, .45);
  border-bottom: 1px solid rgba(11, 31, 58, .08);
}

html body .onboarding-form-field .model-picker-search-wrap > .ui-icon {
  color: rgba(11, 31, 58, .4);
}

html body .onboarding-form-field .model-picker-search,
html body .onboarding-form-field .model-picker-search:focus {
  height: 40px;
  min-height: 40px;
  padding: 8px 12px 8px 38px !important;
  color: var(--ivory-2) !important;
  background: rgba(255, 255, 255, .55) !important;
  border-color: rgba(11, 31, 58, .12) !important;
  box-shadow: none !important;
}

html body .onboarding-form-field .model-picker-search:focus {
  border-color: rgba(0, 168, 120, .55) !important;
  box-shadow: 0 0 0 3px rgba(0, 168, 120, .14) !important;
}

html body .onboarding-form-field .model-picker-search::placeholder {
  color: rgba(11, 31, 58, .32);
}

html body .onboarding-form-field .model-picker-option {
  color: rgba(11, 31, 58, .82);
}

html body .onboarding-form-field .model-picker-option:hover,
html body .onboarding-form-field .model-picker-option:focus-visible,
html body .onboarding-form-field .model-picker-option[aria-selected="true"] {
  color: var(--ink);
  background: rgba(11, 31, 58, .08);
}

html body .onboarding-form-field .model-picker-option small,
html body .onboarding-form-field .model-picker-empty {
  color: rgba(11, 31, 58, .45);
}

html body .onboarding-form-field .model-picker-check {
  color: var(--lime);
}

html body .onboarding-feedback {
  color: var(--ivory-2);
  background: rgba(227, 180, 168, .08);
  border-color: rgba(227, 180, 168, .24);
}

html body .onboarding-feedback strong {
  color: var(--ivory-2);
}

html body .onboarding-feedback p {
  color: rgba(11, 31, 58, .88);
}

html body .onboarding-feedback.is-success {
  background: rgba(0, 168, 120, .18);
  border-color: rgba(0, 168, 120, .5);
}

html body .onboarding-feedback.is-error {
  background: rgba(227, 180, 168, .14);
  border-color: rgba(227, 180, 168, .4);
}

@media (max-width: 900px) {
  html body .onboarding-progress li {
    min-height: 56px;
  }
}

/* --------------------------------------------------------------------------
   Registrazione, accesso e codice: sono passi dell'onboarding, non una
   schermata di login a parte. Stessi campi, stesso rail, stessi bottoni.
   -------------------------------------------------------------------------- */

html body .onboarding-auth-switch {
  display: flex;
  gap: 2px;
  align-items: center;
  margin: -10px 0 0;
  color: var(--ivory-body);
  font-size: 13px;
}

html body .onboarding-form-field[hidden] {
  display: none;
}

html body .onboarding-auth-switch[hidden] {
  display: none;
}

html body .onboarding-auth-switch .text-button {
  min-height: 0;
  padding: 0 6px;
  color: var(--lime);
  font-size: 13px;
  font-weight: 650;
}

html body .onboarding-auth-alt {
  display: grid;
  gap: 16px;
}

html body .onboarding-auth-alt[hidden] {
  display: none;
}

html body .onboarding-auth-divider {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0;
  color: var(--ivory-body);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

html body .onboarding-auth-divider::before,
html body .onboarding-auth-divider::after {
  flex: 1;
  height: 1px;
  background: rgba(11, 31, 58, .14);
  content: "";
}

html body #auth-google {
  width: 100%;
  gap: 12px;
  justify-content: center;
  color: #1f1f1f;
  background: #fff;
  border: 1px solid rgba(11, 31, 58, .14);
  font-weight: 650;
  letter-spacing: .01em;
  text-decoration: none;
}

html body #auth-google:hover {
  color: #1f1f1f;
  background: #f4f4f4;
  border-color: rgba(11, 31, 58, .22);
  box-shadow: none;
  transform: none;
}

html body #auth-google:focus-visible {
  outline: 3px solid rgba(66, 133, 244, .28);
  outline-offset: 2px;
}

html body .auth-google-mark {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  overflow: visible;
}

html body .onboarding-auth-note {
  display: none;
}

html body #auth-code {
  font-size: 22px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .4em;
  text-align: center;
}

/* -------------------------------------------------------------------------- */
/* How it works — stessa tela della panoramica                                 */
/* -------------------------------------------------------------------------- */

html body[data-active-view="how-it-works"],
html body:has(#view-how-it-works.is-active) {
  background-color: var(--forest);
  background-image:
    linear-gradient(rgba(255, 255, 255, .97), rgba(255, 255, 255, .97)),
    url("topo.svg");
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: auto, cover;
}

html body[data-active-view="how-it-works"] .app-header,
html body:has(#view-how-it-works.is-active) .app-header {
  background: transparent;
}

html body[data-active-view="how-it-works"] .app-content,
html body:has(#view-how-it-works.is-active) .app-content,
html body[data-active-view="how-it-works"] .app-main,
html body:has(#view-how-it-works.is-active) .app-main,
html body #view-how-it-works.is-active {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

html body[data-active-view="how-it-works"] .app-content,
html body:has(#view-how-it-works.is-active) .app-content {
  padding-top: 0;
}

html body[data-active-view="how-it-works"] .app-main,
html body:has(#view-how-it-works.is-active) .app-main {
  display: block;
  min-height: 100dvh;
}

html body #view-how-it-works.is-active {
  display: block;
  min-height: 100dvh;
}

html body .how-it-works-layout {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(32px, 4vw, 48px);
  box-sizing: border-box;
  width: 100%;
  min-height: 100dvh;
  max-width: calc(var(--page-canvas) + 2 * var(--page-gutter));
  margin-inline: auto;
  padding: calc(var(--header-height) + var(--hero-top-gap)) var(--page-gutter) 28px;
  background: transparent;
}

html body #view-how-it-works .how-it-works-intro,
html body #view-how-it-works .page-heading.how-it-works-intro,
html body #view-how-it-works.view:not(#view-analysis) .page-heading,
html body #view-privacy .how-it-works-intro,
html body #view-cookie .how-it-works-intro,
html body #view-privacy .page-heading.how-it-works-intro,
html body #view-cookie .page-heading.how-it-works-intro,
html body #view-privacy.view:not(#view-analysis) .page-heading,
html body #view-cookie.view:not(#view-analysis) .page-heading {
  display: block;
  max-width: 760px;
  margin: 0;
  animation: premium-rise 520ms ease both;
}

html body #view-how-it-works .how-it-works-intro .section-code,
html body #view-how-it-works.view .how-it-works-intro .section-code,
html body #view-privacy .how-it-works-intro .section-code,
html body #view-cookie .how-it-works-intro .section-code,
html body #view-privacy.view .how-it-works-intro .section-code,
html body #view-cookie.view .how-it-works-intro .section-code {
  display: inline-flex;
  gap: 0;
  align-items: center;
  width: max-content;
  margin: 0 0 18px;
  padding: 6px 14px;
  color: #0B1F3A;
  background: rgba(11, 31, 58, .05);
  border: 1px solid rgba(11, 31, 58, .16);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .14em;
}

html body[data-active-view="how-it-works"] #view-how-it-works .page-heading h1,
html body #view-how-it-works.view:not(#view-analysis) .page-heading h1,
html body #view-how-it-works .how-it-works-intro h1,
html body[data-active-view="privacy"] #view-privacy .page-heading h1,
html body[data-active-view="cookie"] #view-cookie .page-heading h1,
html body #view-privacy.view:not(#view-analysis) .page-heading h1,
html body #view-cookie.view:not(#view-analysis) .page-heading h1,
html body #view-privacy .how-it-works-intro h1,
html body #view-cookie .how-it-works-intro h1 {
  max-width: none;
  margin: 0;
  color: #0B1F3A;
  font-family: var(--font-serif);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.02;
}

html body[data-active-view="how-it-works"] #view-how-it-works .how-it-works-intro .hero-accent,
html body #view-how-it-works.view .how-it-works-intro .hero-accent,
html body[data-active-view="privacy"] #view-privacy .how-it-works-intro .hero-accent,
html body[data-active-view="cookie"] #view-cookie .how-it-works-intro .hero-accent,
html body #view-privacy.view .how-it-works-intro .hero-accent,
html body #view-cookie.view .how-it-works-intro .hero-accent {
  color: var(--lime);
  -webkit-text-fill-color: var(--lime);
}

html body[data-active-view="how-it-works"] #view-how-it-works .how-it-works-intro .lead,
html body #view-how-it-works.view:not(#view-analysis) .how-it-works-intro .lead,
html body #view-how-it-works .how-it-works-intro .lead,
html body[data-active-view="privacy"] #view-privacy .how-it-works-intro .lead,
html body[data-active-view="cookie"] #view-cookie .how-it-works-intro .lead,
html body #view-privacy.view:not(#view-analysis) .how-it-works-intro .lead,
html body #view-cookie.view:not(#view-analysis) .how-it-works-intro .lead,
html body #view-privacy .how-it-works-intro .lead,
html body #view-cookie .how-it-works-intro .lead {
  max-width: 40rem;
  margin: 16px 0 0;
  color: rgba(11, 31, 58, .88);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .005em;
}

html body #view-privacy .how-it-works-intro .lead a,
html body #view-cookie .how-it-works-intro .lead a,
html body #view-privacy .how-it-works-note a,
html body #view-cookie .how-it-works-note a {
  color: var(--ivory-2);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: rgba(0, 168, 120, .55);
  text-underline-offset: 3px;
}

html body .how-it-works-board {
  width: 100%;
  max-width: none;
}

html body #view-how-it-works .rule-list.how-it-works-steps,
html body #view-how-it-works .how-it-works-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
}

html body #view-how-it-works .how-it-works-steps > div {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 18px 14px;
  min-height: 236px;
  margin: 0;
  padding: 26px 24px 24px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid rgba(11, 31, 58, .07);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  animation: premium-rise 560ms ease both;
}

html body #view-how-it-works .how-it-works-steps > div:nth-child(1) { animation-delay: 80ms; }
html body #view-how-it-works .how-it-works-steps > div:nth-child(2) { animation-delay: 150ms; }
html body #view-how-it-works .how-it-works-steps > div:nth-child(3) { animation-delay: 220ms; }

html body #view-how-it-works .how-it-works-steps > div:not(:last-child)::after {
  position: absolute;
  z-index: 1;
  top: 42px;
  right: -19px;
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 168, 120, .55), rgba(0, 168, 120, .12));
  content: "";
}

html body #view-how-it-works .how-it-works-steps > div > span:first-child {
  color: var(--lime-mid);
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
}

html body #view-how-it-works .how-it-works-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--lime-deep);
  background: var(--teal-soft);
  border-radius: 14px;
}

html body #view-how-it-works .how-it-works-icon .ui-icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.7;
}

html body #view-how-it-works .how-it-works-steps p,
html body #view-how-it-works .how-it-works-steps b,
html body #view-how-it-works .how-it-works-steps small,
html body #view-how-it-works .rule-list.how-it-works-steps b,
html body #view-how-it-works .rule-list.how-it-works-steps small {
  display: block;
  margin: 0;
}

html body #view-how-it-works .how-it-works-steps > div > p {
  grid-column: 1 / -1;
  align-self: end;
}

html body #view-how-it-works .how-it-works-steps b,
html body #view-how-it-works .rule-list.how-it-works-steps b {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.25;
}

html body #view-how-it-works .how-it-works-steps small,
html body #view-how-it-works .rule-list.how-it-works-steps small {
  margin-top: 8px;
  color: #33415C;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
}

html body .how-it-works-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: center;
  /* Tolta la nota, in fondo resta il solo bottone: centrato, non a sinistra. */
  justify-content: center;
  width: 100%;
  max-width: none;
  animation: premium-rise 620ms ease both;
  animation-delay: 260ms;
}

html body .how-it-works-note,
html body #view-how-it-works .how-it-works-note {
  max-width: 36rem;
  margin: 0;
  color: rgba(11, 31, 58, .78);
  font-size: 15px;
  line-height: 1.55;
}

html body #view-how-it-works #how-it-works-start.platform-action-primary,
html body #view-privacy .legal-page-footer .platform-action-primary,
html body #view-cookie .legal-page-footer .platform-action-primary {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  height: 52px;
  min-height: 52px;
  padding: 0 22px;
  color: #fff;
  background: var(--accent-solid);
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

html body #view-how-it-works #how-it-works-start.platform-action-primary:hover:not(:disabled),
html body #view-privacy .legal-page-footer .platform-action-primary:hover:not(:disabled),
html body #view-cookie .legal-page-footer .platform-action-primary:hover:not(:disabled) {
  background: var(--accent-solid-hover);
  transform: none;
}

html body #view-how-it-works #how-it-works-start .ui-icon,
html body #view-privacy .legal-page-footer .platform-action-primary .ui-icon,
html body #view-cookie .legal-page-footer .platform-action-primary .ui-icon {
  width: 16px;
  height: 16px;
  transition: transform 160ms ease;
}

html body #view-how-it-works #how-it-works-start:hover:not(:disabled) .ui-icon,
html body #view-privacy .legal-page-footer .platform-action-primary:hover:not(:disabled) .ui-icon,
html body #view-cookie .legal-page-footer .platform-action-primary:hover:not(:disabled) .ui-icon {
  transform: translateX(2px);
}

@media (max-width: 980px) {
  html body #view-how-it-works .how-it-works-steps,
  html body #view-how-it-works .rule-list.how-it-works-steps,
  html body #view-privacy .legal-cards,
  html body #view-cookie .legal-cards,
  html body #view-privacy .rule-list.legal-cards,
  html body #view-cookie .rule-list.legal-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  html body #view-how-it-works .how-it-works-steps > div,
  html body #view-privacy .legal-cards > article,
  html body #view-cookie .legal-cards > article {
    min-height: 0;
    padding: 20px 20px 18px;
  }

  html body #view-how-it-works .how-it-works-steps > div:not(:last-child)::after {
    top: auto;
    right: auto;
    bottom: -13px;
    left: 28px;
    width: 1px;
    height: 14px;
    background: linear-gradient(180deg, rgba(0, 168, 120, .5), rgba(0, 168, 120, .12));
  }

  html body #view-how-it-works .how-it-works-steps > div > p {
    align-self: start;
  }
}

@media (max-width: 900px), (max-height: 820px) {
  html body .how-it-works-layout {
    padding-top: calc(var(--header-height) + 12px);
  }
}

@media (max-width: 700px) {
  html body .how-it-works-layout {
    justify-content: flex-start;
    padding: calc(var(--header-height) + 12px) var(--page-gutter) 32px;
  }

  html body #view-how-it-works .how-it-works-intro h1,
  html body #view-how-it-works .page-heading h1,
  html body #view-privacy .how-it-works-intro h1,
  html body #view-cookie .how-it-works-intro h1,
  html body #view-privacy .page-heading h1,
  html body #view-cookie .page-heading h1 {
    font-size: clamp(34px, 10vw, 46px);
  }

  html body .how-it-works-cta {
    flex-direction: column;
    align-items: stretch;
  }

  html body #view-how-it-works #how-it-works-start.platform-action-primary,
  html body #view-privacy .legal-page-footer .platform-action-primary,
  html body #view-cookie .legal-page-footer .platform-action-primary {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #view-how-it-works .how-it-works-intro,
  html body #view-how-it-works .how-it-works-steps > div,
  html body #view-privacy .how-it-works-intro,
  html body #view-cookie .how-it-works-intro,
  html body #view-privacy .legal-cards > article,
  html body #view-cookie .legal-cards > article,
  html body .how-it-works-cta {
    animation: none;
  }
}

/* Privacy / Cookie — stessa tela della panoramica                           */
html body[data-active-view="privacy"],
html body[data-active-view="cookie"],
html body:has(#view-privacy.is-active),
html body:has(#view-cookie.is-active) {
  background-color: var(--forest);
  background-image:
    linear-gradient(rgba(255, 255, 255, .97), rgba(255, 255, 255, .97)),
    url("topo.svg");
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: auto, cover;
}

html body[data-active-view="privacy"] .app-header,
html body[data-active-view="cookie"] .app-header,
html body:has(#view-privacy.is-active) .app-header,
html body:has(#view-cookie.is-active) .app-header {
  background: transparent;
}

html body[data-active-view="privacy"] .app-content,
html body[data-active-view="cookie"] .app-content,
html body:has(#view-privacy.is-active) .app-content,
html body:has(#view-cookie.is-active) .app-content,
html body[data-active-view="privacy"] .app-main,
html body[data-active-view="cookie"] .app-main,
html body:has(#view-privacy.is-active) .app-main,
html body:has(#view-cookie.is-active) .app-main,
html body #view-privacy.is-active,
html body #view-cookie.is-active {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

html body[data-active-view="privacy"] .app-content,
html body[data-active-view="cookie"] .app-content,
html body:has(#view-privacy.is-active) .app-content,
html body:has(#view-cookie.is-active) .app-content {
  padding-top: 0;
}

html body[data-active-view="privacy"] .app-main,
html body[data-active-view="cookie"] .app-main,
html body:has(#view-privacy.is-active) .app-main,
html body:has(#view-cookie.is-active) .app-main,
html body #view-privacy.is-active,
html body #view-cookie.is-active {
  display: block;
  min-height: 100dvh;
}

html body[data-active-view="privacy"] .topbar,
html body[data-active-view="cookie"] .topbar {
  display: none;
}

html body .legal-board,
html body #view-privacy .legal-board,
html body #view-cookie .legal-board {
  width: 100%;
  max-width: none;
}

html body #view-privacy .rule-list.legal-cards,
html body #view-cookie .rule-list.legal-cards,
html body #view-privacy .legal-cards,
html body #view-cookie .legal-cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
}

html body #view-privacy .legal-cards > article,
html body #view-cookie .legal-cards > article {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 16px 14px;
  margin: 0;
  padding: 24px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid rgba(11, 31, 58, .07);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  animation: premium-rise 560ms ease both;
}

html body #view-privacy .legal-cards > article:nth-child(1),
html body #view-cookie .legal-cards > article:nth-child(1) { animation-delay: 80ms; }
html body #view-privacy .legal-cards > article:nth-child(2),
html body #view-cookie .legal-cards > article:nth-child(2) { animation-delay: 130ms; }
html body #view-privacy .legal-cards > article:nth-child(3),
html body #view-cookie .legal-cards > article:nth-child(3) { animation-delay: 180ms; }
html body #view-privacy .legal-cards > article:nth-child(4) { animation-delay: 230ms; }
html body #view-privacy .legal-cards > article:nth-child(5) { animation-delay: 280ms; }
html body #view-privacy .legal-cards > article:nth-child(6) { animation-delay: 330ms; }

html body #view-privacy .legal-cards > article > span:first-child,
html body #view-cookie .legal-cards > article > span:first-child {
  color: var(--lime-mid);
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
}

html body #view-privacy .legal-card-icon,
html body #view-cookie .legal-card-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--lime-deep);
  background: var(--teal-soft);
  border-radius: 14px;
}

html body #view-privacy .legal-card-icon .ui-icon,
html body #view-cookie .legal-card-icon .ui-icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.7;
}

html body #view-privacy .legal-cards p,
html body #view-cookie .legal-cards p,
html body #view-privacy .legal-cards b,
html body #view-cookie .legal-cards b,
html body #view-privacy .legal-cards small,
html body #view-cookie .legal-cards small {
  display: block;
  margin: 0;
}

html body #view-privacy .legal-cards > article > p,
html body #view-cookie .legal-cards > article > p {
  grid-column: 1 / -1;
  align-self: start;
}

html body #view-privacy .legal-cards b,
html body #view-cookie .legal-cards b {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.25;
}

html body #view-privacy .legal-cards small,
html body #view-cookie .legal-cards small {
  margin-top: 8px;
  color: #33415C;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
}

html body #view-privacy .legal-cards a,
html body #view-cookie .legal-cards a {
  color: var(--lime-deep);
  font-weight: 650;
}

html body #view-privacy .legal-cards code,
html body #view-cookie .legal-cards code {
  padding: 1px 6px;
  color: var(--ink);
  background: var(--teal-soft);
  border-radius: 6px;
  font-size: 12.5px;
}

html body #view-privacy .legal-page-footer,
html body #view-cookie .legal-page-footer {
  padding-bottom: 24px;
  border: 0;
}

html body #view-privacy .how-it-works-layout,
html body #view-cookie .how-it-works-layout {
  padding-bottom: 64px;
}

html body:has(#cookie-banner.is-visible) #view-privacy .how-it-works-layout,
html body:has(#cookie-banner.is-visible) #view-cookie .how-it-works-layout {
  padding-bottom: 180px;
}

/* Confermata: solo la card. In modifica: solo la ricerca. */
html body #view-analysis #analysis-step-location .zone-field.is-selected:not(.is-editing) .zone-search-control,
html body #view-analysis #analysis-step-location .zone-field.is-selected:not(.is-editing) .popular-zones,
html body #view-analysis #analysis-step-location .zone-field.is-selected:not(.is-editing) #zone-help,
html body #view-analysis #analysis-step-location .zone-field.is-selected:not(.is-editing) .zone-not-found,
html body #view-analysis #analysis-step-location .zone-field.is-selected:not(.is-editing) .zone-search-status,
html body #view-analysis #analysis-step-location .zone-field.is-editing .zone-selection {
  display: none !important;
}

html body #view-analysis #analysis-step-location:has(.zone-field.is-editing) .wizard-actions {
  display: none !important;
}

/* -------------------------------------------------------------------------- */
/* Target step — same canvas as località                                       */
/* -------------------------------------------------------------------------- */

html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))),
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-content,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-main,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) #view-analysis,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .launch-panel {
  background: #FFFFFF;
}

html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) {
  overflow: hidden;
}

html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-header {
  background: transparent;
}

html body #view-analysis #analysis-step-goal.is-active {
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  padding: 0;
  background-color: #FFFFFF;
  background-image:
    radial-gradient(ellipse 78% 64% at 38% 42%, rgba(0, 168, 120, .21) 0%, rgba(17, 29, 33, 0) 68%),
    linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, rgba(17, 29, 33, .2) 45%, rgba(255, 255, 255, .55) 100%),
    url("topo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
html body #view-analysis #analysis-step-goal .recurring-target-layout.premium-split,
html body #view-analysis #analysis-step-goal .recurring-target-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: none;
  column-gap: 96px;
  row-gap: 0;
  align-items: stretch;
  justify-items: stretch;
  justify-content: stretch;
  box-sizing: border-box;
  width: 100%;
  min-height: 100dvh;
  max-height: 100dvh;
  max-width: calc(var(--page-canvas) + 2 * var(--page-gutter));
  margin-inline: auto;
  padding: calc(var(--header-height) + 8px) var(--page-gutter) 24px;
  overflow: hidden;
  background: transparent;
  background-image: none;
}

html body #view-analysis #analysis-step-goal .location-kicker {
  grid-column: auto;
  align-self: start;
  width: max-content;
  max-width: none;
  height: auto;
  margin: 0 0 18px;
  padding: 7px 14px;
  color: rgba(11, 31, 58, .86);
  background: rgba(255, 255, 255, .42);
  border: 1px solid rgba(11, 31, 58, .12);
  font-size: 10px;
  letter-spacing: .16em;
}

html body #view-analysis #analysis-step-goal .recurring-target-main,
html body #view-analysis #analysis-step-goal .location-stage {
  display: flex;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  max-height: calc(100dvh - var(--header-height) - 32px);
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  overflow: auto;
  background: transparent;
}

html body #view-analysis #analysis-step-goal .location-hero-block,
html body #view-analysis #analysis-step-goal .location-step-main {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0;
}

html body #view-analysis #analysis-step-goal .location-intro h1 {
  max-width: 14ch;
  margin: 0;
  color: #0B1F3A;
  font-family: var(--font-serif);
  font-size: clamp(44px, 4.8vw, 64px);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.08;
}

html body #view-analysis #analysis-step-goal .hero-accent {
  color: #00875F;
  -webkit-text-fill-color: #00875F;
}

html body #view-analysis #analysis-step-goal .location-intro > p {
  max-width: 36rem;
  margin: 14px 0 0;
  color: rgba(11, 31, 58, .68);
  font-size: 16px;
  line-height: 1.55;
}

html body #view-analysis #analysis-step-goal .wizard-step-heading {
  width: 100%;
  max-width: none;
  margin: 28px 0 16px;
}

html body #view-analysis #analysis-step-goal .wizard-step-heading h3 {
  color: #0B1F3A;
  font-family: var(--font-serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.25;
}

html body #view-analysis #analysis-step-goal .wizard-step-heading p {
  max-width: 36rem;
  margin-top: 4px;
  color: rgba(11, 31, 58, .58);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

html body #view-analysis #analysis-step-goal .search-target-selector {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}

html body #view-analysis #analysis-step-goal .search-target-selector > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

html body #view-analysis #analysis-step-goal .search-target-option {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 78px;
  padding: 16px 18px;
  color: var(--ivory-2);
  background: var(--glass-panel);
  border: 1px solid var(--glass-panel-border);
  border-radius: var(--glass-panel-radius);
  box-shadow: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html body #view-analysis #analysis-step-goal .search-target-option:hover {
  border-color: rgba(163, 201, 122, .38);
}

html body #view-analysis #analysis-step-goal .search-target-option:has(input:checked) {
  background: rgba(163, 201, 122, .12);
  border-color: rgba(163, 201, 122, .55);
  box-shadow: inset 0 0 0 1px rgba(163, 201, 122, .18);
}

html body #view-analysis #analysis-step-goal .target-option-check {
  width: 18px;
  height: 18px;
  margin: 0;
  background: transparent;
  border: 1.5px solid rgba(11, 31, 58, .35);
  border-radius: 50%;
  box-shadow: none;
}

html body #view-analysis #analysis-step-goal .search-target-option:has(input:checked) .target-option-check {
  background: #00A878;
  border-color: #A6E4CD;
  box-shadow: inset 0 0 0 4px rgba(11, 31, 58, .099);
}

html body #view-analysis #analysis-step-goal .search-target-option strong {
  color: #0B1F3A;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}

html body #view-analysis #analysis-step-goal .search-target-option small {
  margin-top: 4px;
  color: rgba(11, 31, 58, .58);
  font-size: 13px;
  line-height: 1.45;
  -webkit-line-clamp: unset;
}

html body #view-analysis #analysis-step-goal .search-target-option > b {
  padding: 5px 9px;
  color: #00875F;
  background: #E8F8F2;
  border: 0;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

html body #view-analysis #analysis-step-goal .search-config-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  width: 100%;
  max-width: none;
  min-height: 76px;
  margin-top: 12px;
  padding: 16px 18px;
  color: var(--ivory-2);
  background: var(--glass-panel);
  border: 1px solid var(--glass-panel-border);
  border-radius: var(--glass-panel-radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html body #view-analysis #analysis-step-goal .search-config-summary > div > strong {
  color: #0B1F3A;
}

html body #view-analysis #analysis-step-goal .search-config-open {
  color: #00875F;
}

html body #view-analysis #analysis-step-goal .search-config-chips span {
  color: rgba(11, 31, 58, .72);
  background: rgba(11, 31, 58, .08);
  border-color: rgba(11, 31, 58, .12);
}

html body #view-analysis #analysis-step-goal .recurring-search-actions,
html body #view-analysis #analysis-step-goal .wizard-actions {
  position: static;
  z-index: auto;
  right: auto;
  bottom: auto;
  left: auto;
  display: flex;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 22px 0 0;
  padding: 0;
  align-items: center;
  color: #0B1F3A;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

html body #view-analysis #analysis-step-goal .recurring-search-actions > .button-ghost {
  min-height: 52px;
  padding: 0 18px;
  color: rgba(11, 31, 58, .86);
  background: rgba(255, 255, 255, .32);
  border: 1px solid rgba(11, 31, 58, .16);
  border-radius: 999px;
  font-size: 14px;
}

html body #view-analysis #analysis-step-goal .recurring-search-actions > .button-ghost:hover:not(:disabled) {
  color: #0B1F3A;
  background: rgba(255, 255, 255, .5);
  border-color: rgba(11, 31, 58, .28);
}

html body #view-analysis #analysis-step-goal #start-button,
html body #view-analysis #analysis-step-goal #start-button.button-primary {
  min-width: 180px;
  height: 52px;
  min-height: 52px;
  padding: 0 22px;
  color: #fff;
  background: #00A878;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  font-size: 15px;
  font-weight: 600;
}

html body #view-analysis #analysis-step-goal #start-button:hover:not(:disabled) {
  color: #fff;
  background: #00875F;
  border: 0;
}

html body #view-analysis #analysis-step-goal #start-button:disabled {
  color: rgba(11, 31, 58, .45);
  background: rgba(0, 168, 120, .28);
  border: 0;
}

html body #view-analysis #analysis-step-goal #start-requirements {
  max-width: 280px;
  color: rgba(11, 31, 58, .5);
  font-size: 12px;
}

html body #view-analysis #analysis-step-goal #start-requirements.is-ready {
  color: #00875F;
}

html body #view-analysis #analysis-step-goal .submit-action {
  align-items: flex-end;
}

html body #view-analysis #analysis-step-goal .analysis-journey.home-progress {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-self: stretch;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  max-height: calc(100dvh - var(--header-height) - 32px);
  margin: 0;
  padding: 28px 24px 20px;
  flex-direction: column;
  justify-content: space-between;
  color: var(--ink);
  background: #FFFFFF;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

@media (min-width: 901px) and (max-width: 1100px) {
  html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-goal .recurring-target-layout.premium-split,
  html body #view-analysis #analysis-step-goal .recurring-target-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 56px;
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
  }
}

@media (max-width: 900px) {
  html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) {
    overflow: auto;
  }

  html body #view-analysis #analysis-step-goal.is-active {
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-goal .recurring-target-layout.premium-split,
  html body #view-analysis #analysis-step-goal .recurring-target-layout {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: none;
    padding: calc(var(--header-height) + 12px) var(--page-gutter) 32px;
    overflow: visible;
  }

  html body #view-analysis #analysis-step-goal .recurring-target-main,
  html body #view-analysis #analysis-step-goal .location-stage {
    display: contents;
    max-height: none;
  }

  html body #view-analysis #analysis-step-goal .location-kicker { order: 1; margin: 0 0 12px; }
  html body #view-analysis #analysis-step-goal .location-hero-block,
  html body #view-analysis #analysis-step-goal .location-step-main { order: 2; }
  html body #view-analysis #analysis-step-goal .analysis-journey.home-progress {
    order: 3;
    width: auto;
    max-width: none;
    max-height: none;
    margin: 24px 0 8px;
    padding: 24px 22px;
    flex: 0 0 auto;
  }
  html body #view-analysis #analysis-step-goal .recurring-search-actions,
  html body #view-analysis #analysis-step-goal .wizard-actions {
    order: 4;
    flex-wrap: wrap;
    width: 100%;
    max-width: none;
    margin: 16px 0 0;
  }

  html body #view-analysis #analysis-step-goal .location-intro h1 {
    max-width: none;
    font-size: clamp(40px, 11vw, 52px);
  }

  html body #view-analysis #analysis-step-goal .search-target-selector,
  html body #view-analysis #analysis-step-goal .search-config-summary {
    max-width: none;
  }

  html body #view-analysis #analysis-step-goal .search-target-option {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  html body #view-analysis #analysis-step-goal .search-target-option > b {
    grid-column: 2;
    width: max-content;
  }

  html body #view-analysis #analysis-step-goal #start-button,
  html body #view-analysis #analysis-step-goal .recurring-search-actions > .button-ghost {
    width: 100%;
    justify-content: center;
  }
}

/* -------------------------------------------------------------------------- */
/* Target + analisi: stesso canvas, stessa card Avanzamento della panoramica. */
/* -------------------------------------------------------------------------- */

html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)),
html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .app-content,
html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .app-main,
html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) #view-analysis,
html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .analysis-grid,
html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .launch-panel,
html body #view-analysis .monitor-panel,
html body #view-analysis .monitor-panel.panel {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: #FFFFFF;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) {
  overflow: hidden;
  background: #FFFFFF;
}

html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .app-header {
  background: transparent;
}

html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .app-content {
  padding-top: 0;
}

html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .app-main {
  display: block;
  min-height: 100dvh;
  padding: 0;
}

html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .topbar {
  display: none;
}

html body .analysis-grid.has-monitor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: none;
}

html body .analysis-grid.has-monitor .monitor-panel {
  position: static;
  width: 100%;
  max-height: none;
  overflow: visible;
}

html body #view-analysis .monitor-panel:not(.is-hidden) {
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  background-color: #FFFFFF;
  background-image:
    radial-gradient(ellipse 78% 64% at 38% 42%, rgba(0, 168, 120, .21) 0%, rgba(17, 29, 33, 0) 68%),
    linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, rgba(17, 29, 33, .2) 45%, rgba(255, 255, 255, .55) 100%),
    url("topo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

html body #view-analysis #analysis-step-goal .location-kicker b::before,
html body #view-analysis .monitor-panel .location-kicker b::before {
  content: "·";
  margin: 0 .5em;
  font-weight: 500;
}

html body #view-analysis .monitor-panel .location-kicker .wizard-kicker {
  display: inline;
  margin: 0;
  color: inherit;
  background: none;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

@media (min-width: 901px) {
  html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-goal .recurring-target-layout.premium-split,
  html body #view-analysis #analysis-step-goal .recurring-target-layout,
  html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .premium-split,
  html body #view-analysis .monitor-panel .monitor-layout.premium-split {
    display: grid;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--page-canvas) + 2 * var(--page-gutter));
    min-height: 100dvh;
    max-height: 100dvh;
    margin-inline: auto;
    padding-top: var(--header-height);
    padding-bottom: var(--header-height);
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
    overflow: hidden auto;
    align-content: safe center;
    align-items: start;
    justify-content: stretch;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto auto auto auto auto;
    column-gap: 96px;
    row-gap: 0;
    background: transparent;
    background-image: none;
  }

  html body #view-analysis #analysis-step-goal .recurring-target-main,
  html body #view-analysis #analysis-step-goal .location-stage,
  html body #view-analysis #analysis-step-goal .location-hero-block,
  html body #view-analysis #analysis-step-goal .location-step-main,
  html body #view-analysis .monitor-panel .location-stage,
  html body #view-analysis .monitor-panel .location-hero-block,
  html body #view-analysis .monitor-panel .location-step-main {
    display: contents;
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow: visible;
    background: transparent;
  }

  html body #view-analysis #analysis-step-goal .location-kicker,
  html body #view-analysis #analysis-step-goal .location-intro,
  html body #view-analysis #analysis-step-goal .wizard-step-heading,
  html body #view-analysis #analysis-step-goal .search-target-selector,
  html body #view-analysis #analysis-step-goal .search-config-summary,
  html body #view-analysis #analysis-step-goal #recurring-error-slot,
  html body #view-analysis #analysis-step-goal .wizard-actions,
  html body #view-analysis .monitor-panel .location-kicker,
  html body #view-analysis .monitor-panel .location-intro,
  html body #view-analysis .monitor-panel .wizard-step-heading,
  html body #view-analysis .monitor-panel .monitor-content,
  html body #view-analysis .monitor-panel .monitor-empty {
    grid-column: 1;
  }

  html body #view-analysis #analysis-step-goal .location-kicker,
  html body #view-analysis .monitor-panel .location-kicker {
    grid-row: 1;
    width: max-content;
    margin: 0 0 18px;
  }

  html body #view-analysis #analysis-step-goal .location-intro,
  html body #view-analysis .monitor-panel .location-intro {
    grid-row: 2;
  }

  html body #view-analysis #analysis-step-goal .wizard-step-heading,
  html body #view-analysis .monitor-panel .wizard-step-heading {
    grid-row: 3;
  }

  html body #view-analysis #analysis-step-goal .search-target-selector,
  html body #view-analysis .monitor-panel .monitor-content,
  html body #view-analysis .monitor-panel .monitor-empty {
    grid-row: 4;
  }

  html body #view-analysis #analysis-step-goal .analysis-journey.home-progress,
  html body #view-analysis .monitor-panel .analysis-journey.home-progress,
  html body #view-analysis .premium-split > .analysis-journey.home-progress {
    grid-column: 2;
    grid-row: 2 / 5;
    justify-self: stretch;
    align-self: stretch;
    position: static;
    width: 340px;
    max-width: 340px;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 26px 24px 20px;
    flex: none;
    justify-content: space-between;
    color: var(--ink);
    background: #FAFBFC;
    border: 1px solid rgba(11, 31, 58, .06);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .12);
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-goal .recurring-target-layout.premium-split,
  html body #view-analysis #analysis-step-goal .recurring-target-layout,
  html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .premium-split,
  html body #view-analysis .monitor-panel .monitor-layout.premium-split {
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 56px;
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
  }

  html body #view-analysis #analysis-step-goal .analysis-journey.home-progress,
  html body #view-analysis .monitor-panel .analysis-journey.home-progress,
  html body #view-analysis .premium-split > .analysis-journey.home-progress {
    width: 300px;
    max-width: 300px;
  }
}

html body #view-analysis .monitor-panel .monitor-content,
html body #view-analysis .monitor-panel .monitor-empty {
  min-width: 0;
}

html body #view-analysis #analysis-step-goal .location-intro h1 {
  max-width: none;
  font-size: var(--type-display);
  line-height: 1;
  letter-spacing: -.04em;
  white-space: nowrap;
}

@media (max-width: 900px) {
  html body #view-analysis #analysis-step-goal .location-intro h1 {
    white-space: normal;
  }
}

html body #view-analysis #analysis-step-goal .location-intro > p {
  max-width: 650px;
  margin-top: 18px;
  font-size: var(--type-body);
}

html body #view-analysis #analysis-step-goal .wizard-step-heading h3 {
  max-width: 680px;
  font-size: var(--type-section);
  line-height: 1.15;
}

html body #view-analysis .monitor-panel .location-intro h1,
html body #view-analysis .monitor-panel .location-intro #monitor-title {
  max-width: 16ch;
  margin: 0;
  color: #0B1F3A;
  font-family: var(--font-serif);
  font-size: var(--type-display);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
}

html body #view-analysis .monitor-panel .monitor-profile-copy,
html body #view-analysis .monitor-panel .location-intro > p {
  max-width: 36rem;
  margin: 18px 0 0;
  color: rgba(11, 31, 58, .72);
  font-size: var(--type-body);
  line-height: 1.5;
}

html body #view-analysis .monitor-panel .wizard-step-heading {
  width: 100%;
  max-width: none;
  margin: 32px 0 16px;
}

html body #view-analysis .monitor-panel .wizard-step-heading h3 {
  color: #0B1F3A;
  font-family: var(--font-serif);
  font-size: var(--type-section);
  font-weight: 500;
  letter-spacing: -.02em;
}

html body #view-analysis .monitor-panel .wizard-step-heading p {
  margin-top: 8px;
}

html body #view-analysis .monitor-panel .run-state {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 11px;
}

html body #view-analysis .monitor-panel .run-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  margin: 0 0 16px;
  padding: 14px 16px;
  color: #0B1F3A;
  background: rgba(255, 255, 255, .38);
  border: 1px solid rgba(11, 31, 58, .14);
  border-radius: 18px;
}

html body #view-analysis .monitor-panel .run-identity span {
  color: rgba(11, 31, 58, .52);
  font-size: 11px;
}

html body #view-analysis .monitor-panel .run-identity strong {
  max-width: none;
  color: #0B1F3A;
  font-size: 14px;
}

html body #view-analysis .monitor-panel .progress-block {
  margin: 0 0 18px;
  padding: 14px 16px;
  color: #0B1F3A;
  background: rgba(163, 201, 122, .12);
  border: 1px solid rgba(163, 201, 122, .28);
  border-radius: 16px;
}

html body #view-analysis .monitor-panel .progress-block > div {
  color: rgba(11, 31, 58, .72);
}

html body #view-analysis .monitor-panel progress {
  width: 100%;
  accent-color: var(--lime-mid);
}

html body #view-analysis .monitor-panel .pipeline {
  margin: 0 0 18px;
}

html body #view-analysis .monitor-panel .pipeline li {
  color: rgba(11, 31, 58, .55);
}

html body #view-analysis .monitor-panel .pipeline li::before {
  background: rgba(11, 31, 58, .16);
}

html body #view-analysis .monitor-panel .pipeline i {
  background: transparent;
  border-color: rgba(11, 31, 58, .28);
}

html body #view-analysis .monitor-panel .pipeline b {
  color: rgba(11, 31, 58, .82);
}

html body #view-analysis .monitor-panel .pipeline small {
  color: rgba(11, 31, 58, .5);
}

html body #view-analysis .monitor-panel .pipeline li.is-active b {
  color: var(--lime);
}

html body #view-analysis .monitor-panel .pipeline li.is-complete i {
  background: var(--lime-mid);
  border-color: var(--lime-mid);
}

html body #view-analysis .monitor-panel .pipeline li.is-complete b {
  color: var(--lime);
}

html body #view-analysis .monitor-panel .monitor-alert {
  color: #0B1F3A;
}

html body #view-analysis .monitor-panel .wizard-actions {
  margin: 16px 0 0;
  padding: 0;
  border: 0;
}

html body #view-analysis .monitor-panel .monitor-result-action {
  width: auto;
  min-height: 52px;
  padding: 0 22px;
  color: #fff;
  background: #00A878;
  border: 0;
  border-radius: 999px;
}

html body #view-analysis .monitor-panel .technical-log {
  margin-top: 18px;
  color: rgba(11, 31, 58, .72);
}

html body #view-analysis .monitor-panel .technical-log summary {
  color: rgba(11, 31, 58, .78);
}

html body #view-analysis .monitor-panel .terminal-heading,
html body #view-analysis .monitor-panel .terminal {
  color: rgba(11, 31, 58, .78);
  background: rgba(255, 255, 255, .45);
  border-color: rgba(11, 31, 58, .12);
}

html body #view-analysis .monitor-panel .monitor-summary {
  color: #0B1F3A;
}

html body #view-analysis .monitor-panel .monitor-idle-hint {
  color: rgba(11, 31, 58, .62);
}

@media (max-width: 900px) {
  html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) {
    overflow: auto;
  }

  html body #view-analysis .monitor-panel:not(.is-hidden) {
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  html body #view-analysis .monitor-panel .monitor-layout.premium-split,
  html body #view-analysis #analysis-step-goal .recurring-target-layout {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: none;
    padding: calc(var(--header-height) + 12px) var(--page-gutter) 32px;
    overflow: visible;
  }

  html body #view-analysis .monitor-panel .location-stage,
  html body #view-analysis .monitor-panel .location-hero-block,
  html body #view-analysis .monitor-panel .location-step-main {
    display: flex;
    flex-direction: column;
  }

  html body #view-analysis .monitor-panel .location-kicker { order: 1; }
  html body #view-analysis .monitor-panel .location-hero-block,
  html body #view-analysis .monitor-panel .location-step-main { order: 2; }
  html body #view-analysis .monitor-panel .analysis-journey.home-progress {
    order: 3;
    width: auto;
    max-width: none;
    margin: 24px 0 8px;
    padding: 24px 22px;
    flex: 0 0 auto;
  }

  html body #view-analysis .monitor-panel .location-intro h1,
  html body #view-analysis .monitor-panel .location-intro #monitor-title {
    max-width: none;
    font-size: clamp(40px, 11vw, 52px);
  }
}

/* -------------------------------------------------------------------------- */
/* Avanzamento: stessi indicatori della panoramica su Target e Analisi.        */
/* -------------------------------------------------------------------------- */

html body #view-analysis .analysis-journey.home-progress,
html body #view-analysis #analysis-step-goal .analysis-journey.home-progress,
html body #view-analysis .monitor-panel .analysis-journey.home-progress {
  color: var(--ink);
  background: #FAFBFC;
  border: 1px solid rgba(11, 31, 58, .06);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .12);
}

html body #view-analysis .analysis-journey.home-progress .journey-title,
html body #view-analysis #analysis-step-goal .journey-title,
html body #view-analysis .monitor-panel .journey-title {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: .14em;
}

html body #view-analysis .analysis-journey.home-progress li,
html body #view-analysis .analysis-journey.home-progress li.is-current,
html body #view-analysis #analysis-step-goal .analysis-journey li,
html body #view-analysis .monitor-panel .analysis-journey li {
  margin: 0;
  padding: 0 0 30px;
  color: inherit;
  background: transparent;
  border-radius: 0;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

html body #view-analysis .analysis-journey.home-progress li:last-child,
html body #view-analysis #analysis-step-goal .analysis-journey li:last-child,
html body #view-analysis .monitor-panel .analysis-journey li:last-child {
  padding-bottom: 0;
}

html body #view-analysis .analysis-journey.home-progress li > span,
html body #view-analysis .analysis-journey.home-progress li.is-current > span,
html body #view-analysis .analysis-journey.home-progress li.is-complete > span,
html body #view-analysis #analysis-step-goal .analysis-journey li > span,
html body #view-analysis .monitor-panel .analysis-journey li > span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

html body #view-analysis .analysis-journey.home-progress li > span,
html body #view-analysis #analysis-step-goal .analysis-journey li > span,
html body #view-analysis .monitor-panel .analysis-journey li > span {
  color: rgba(11, 31, 58, .5);
  background: transparent;
  border: 1px solid rgba(11, 31, 58, .18);
  font-size: 12px;
  font-weight: 600;
}

html body #view-analysis .analysis-journey.home-progress li.is-current > span,
html body #view-analysis #analysis-step-goal .analysis-journey li.is-current > span,
html body #view-analysis .monitor-panel .analysis-journey li.is-current > span {
  color: var(--ink);
  background: var(--forest-mid);
  border-color: var(--forest-mid);
  font-size: 12px;
}

html body #view-analysis .analysis-journey.home-progress li.is-complete > span,
html body #view-analysis #analysis-step-goal .analysis-journey li.is-complete > span,
html body #view-analysis .monitor-panel .analysis-journey li.is-complete > span {
  position: relative;
  color: transparent;
  background: rgba(143, 188, 120, .35);
  border-color: transparent;
  font-size: 12px;
  line-height: 1;
  overflow: hidden;
}

html body #view-analysis .analysis-journey.home-progress li.is-complete > span::before,
html body #view-analysis #analysis-step-goal .analysis-journey li.is-complete > span::before,
html body #view-analysis .monitor-panel .analysis-journey li.is-complete > span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  font-size: 0;
  font-weight: 400;
  line-height: 0;
  transform: translate(-50%, -50%);
  background-color: var(--forest);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

html body #view-analysis .analysis-journey.home-progress li b,
html body #view-analysis #analysis-step-goal .analysis-journey li b,
html body #view-analysis .monitor-panel .analysis-journey li b {
  color: rgba(11, 31, 58, .58);
  font-size: 15px;
  font-weight: 600;
}

html body #view-analysis .analysis-journey.home-progress li.is-current b,
html body #view-analysis .analysis-journey.home-progress li.is-complete b,
html body #view-analysis #analysis-step-goal .analysis-journey li.is-current b,
html body #view-analysis #analysis-step-goal .analysis-journey li.is-complete b,
html body #view-analysis .monitor-panel .analysis-journey li.is-current b,
html body #view-analysis .monitor-panel .analysis-journey li.is-complete b {
  color: var(--ink);
}

html body #view-analysis .analysis-journey.home-progress li small,
html body #view-analysis #analysis-step-goal .analysis-journey li small,
html body #view-analysis .monitor-panel .analysis-journey li small {
  color: rgba(11, 31, 58, .45);
  font-size: 12.5px;
}

html body #view-analysis .analysis-journey.home-progress li.is-current small,
html body #view-analysis .analysis-journey.home-progress li.is-complete small,
html body #view-analysis #analysis-step-goal .analysis-journey li.is-current small,
html body #view-analysis .monitor-panel .analysis-journey li.is-current small {
  color: var(--muted);
}

html body #view-analysis .analysis-journey.home-progress li::after,
html body #view-analysis .analysis-journey.home-progress li:not(:last-child)::after,
html body #view-analysis #analysis-step-goal .analysis-journey li::after,
html body #view-analysis .monitor-panel .analysis-journey li::after {
  top: 32px;
  bottom: 4px;
  left: 13px;
  width: 0;
  background: none;
  border-left: 1px solid rgba(11, 31, 58, .18);
}

html body #view-analysis .analysis-journey.home-progress li:last-child::after,
html body #view-analysis #analysis-step-goal .analysis-journey li:last-child::after,
html body #view-analysis .monitor-panel .analysis-journey li:last-child::after {
  display: none;
}

html body #view-analysis .analysis-journey.home-progress .journey-tip,
html body #view-analysis #analysis-step-goal .journey-tip,
html body #view-analysis .monitor-panel .journey-tip {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  margin-top: 24px;
  padding: 20px 0 4px;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(11, 31, 58, .1);
  border-radius: 0;
}

/* -------------------------------------------------------------------------- */
/* Target: Avanzamento bloccato come fase 1 (località).                        */
/* Stessa griglia, stessa card, stessa fascia titolo → opzioni.                */
/* -------------------------------------------------------------------------- */
@media (min-width: 901px) {
  html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-goal .recurring-target-layout.premium-split,
  html body #view-analysis #analysis-step-goal .recurring-target-layout {
    display: grid;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--page-canvas) + 2 * var(--page-gutter));
    min-height: 100dvh;
    max-height: 100dvh;
    margin-inline: auto;
    padding-top: var(--header-height);
    padding-bottom: var(--header-height);
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
    overflow: hidden auto;
    align-content: safe center;
    align-items: start;
    justify-content: stretch;
    justify-items: stretch;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: none;
    column-gap: 96px;
    row-gap: 0;
    background: transparent;
    background-image: none;
  }

  html body #view-analysis #analysis-step-goal .recurring-target-main,
  html body #view-analysis #analysis-step-goal .location-stage,
  html body #view-analysis #analysis-step-goal .location-hero-block,
  html body #view-analysis #analysis-step-goal .location-step-main {
    display: contents;
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow: visible;
    background: transparent;
  }

  html body #view-analysis #analysis-step-goal .location-kicker,
  html body #view-analysis #analysis-step-goal .location-intro,
  html body #view-analysis #analysis-step-goal .wizard-step-heading,
  html body #view-analysis #analysis-step-goal .search-target-selector,
  html body #view-analysis #analysis-step-goal .search-config-summary,
  html body #view-analysis #analysis-step-goal #recurring-error-slot,
  html body #view-analysis #analysis-step-goal .wizard-actions {
    grid-column: 1;
  }

  html body #view-analysis #analysis-step-goal .location-kicker {
    grid-row: 1;
    align-self: start;
    width: max-content;
    margin: 0 0 18px;
  }

  html body #view-analysis #analysis-step-goal .location-intro {
    grid-row: 2;
  }

  html body #view-analysis #analysis-step-goal .wizard-step-heading {
    grid-row: 3;
  }

  html body #view-analysis #analysis-step-goal .search-target-selector {
    grid-row: 4;
  }

  html body #view-analysis #analysis-step-goal .analysis-journey.home-progress {
    position: static;
    top: auto;
    grid-column: 2;
    grid-row: 2 / 5;
    justify-self: stretch;
    align-self: stretch;
    width: 340px;
    max-width: 340px;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 26px 24px 20px;
    overflow: hidden;
    flex: none;
    flex-direction: column;
    justify-content: space-between;
    color: var(--ink);
    background: #FAFBFC;
    border: 1px solid rgba(11, 31, 58, .06);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .12);
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .premium-split,
  html body #view-analysis #analysis-step-goal .recurring-target-layout.premium-split,
  html body #view-analysis #analysis-step-goal .recurring-target-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 56px;
  }

  html body #view-analysis #analysis-step-goal .analysis-journey.home-progress {
    width: 300px;
    max-width: 300px;
  }
}

html body .search-config-dialog .field label {
  display: flex;
  align-items: center;
  min-height: 18px;
  margin: 0 0 8px;
  line-height: 1.2;
}

html body .search-config-dialog .field :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select:not(.site-select-native)),
html body .search-config-dialog .model-picker-trigger,
html body .search-config-dialog .site-select-trigger {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  padding: 0 16px !important;
  overflow: hidden;
  line-height: 46px;
  vertical-align: middle;
}

html body .search-config-dialog .field select:not(.site-select-native) {
  padding: 0 44px 0 16px !important;
  background-color: #FFFFFF !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5 7.5 5 5 5-5' stroke='%235A6579' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  box-shadow: none !important;
}

html body .search-config-dialog .field select:not(.site-select-native):hover:not(:disabled) {
  background-color: #FAFBFC !important;
}

html body .search-config-dialog .model-picker-trigger,
html body .search-config-dialog .site-select-trigger {
  line-height: 1;
}

html body .search-config-dialog .model-picker-trigger > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
}

html body .search-config-dialog .number-with-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px;
  align-items: stretch;
  height: 48px;
}

html body .search-config-dialog .number-with-unit input,
html body .search-config-dialog #radius,
html body .search-config-dialog #cell-size,
html body .search-config-dialog #details-limit,
html body .search-config-dialog #model-limit {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 16px !important;
  color: var(--ivory-2) !important;
  -webkit-text-fill-color: var(--ivory-2) !important;
  caret-color: var(--ivory-2) !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-color: rgba(11, 31, 58, .14) !important;
  border-radius: 12px 0 0 12px !important;
  box-shadow: none !important;
  line-height: 46px !important;
  color-scheme: dark;
}

html body .search-config-dialog #radius::placeholder,
html body .search-config-dialog #cell-size::placeholder {
  color: rgba(11, 31, 58, .42) !important;
  -webkit-text-fill-color: rgba(11, 31, 58, .42) !important;
  opacity: 1;
  line-height: 46px;
}

html body .search-config-dialog .number-with-unit input:hover:not(:disabled),
html body .search-config-dialog #radius:hover:not(:disabled),
html body .search-config-dialog #cell-size:hover:not(:disabled),
html body .search-config-dialog #details-limit:hover:not(:disabled),
html body .search-config-dialog #model-limit:hover:not(:disabled) {
  background: #FAFBFC !important;
  background-color: #FAFBFC !important;
  border-color: rgba(11, 31, 58, .22) !important;
  box-shadow: none !important;
}

html body .search-config-dialog .number-with-unit input:focus,
html body .search-config-dialog .number-with-unit input:focus-visible,
html body .search-config-dialog #radius:focus,
html body .search-config-dialog #radius:focus-visible,
html body .search-config-dialog #cell-size:focus,
html body .search-config-dialog #cell-size:focus-visible,
html body .search-config-dialog #details-limit:focus,
html body .search-config-dialog #details-limit:focus-visible,
html body .search-config-dialog #model-limit:focus,
html body .search-config-dialog #model-limit:focus-visible {
  border-color: rgba(0, 168, 120, .55) !important;
  box-shadow: 0 0 0 3px rgba(0, 168, 120, .14) !important;
}

html body .search-config-dialog .number-with-unit span {
  display: grid;
  place-items: center;
  height: 48px;
  min-height: 48px;
  padding: 0 10px;
  color: rgba(11, 31, 58, .62) !important;
  background: #FAFBFC !important;
  border-color: rgba(11, 31, 58, .14) !important;
  border-radius: 0 12px 12px 0;
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .04em;
}

html body .search-config-dialog .search-config-section > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: center;
  min-height: 64px;
  padding: 14px 18px;
}

html body .search-config-dialog .search-config-section > summary span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

html body .search-config-dialog .check-field label {
  display: flex;
  align-items: center;
  min-height: 24px;
  margin: 0;
  line-height: 1.35;
}

/* Panoramica: un solo canvas sul viewport. Prima html era trasparente
   (striscia chiara a destra dalla gutter) e lo step dipingeva un topo
   diverso, quindi a destra il motivo spariva. */
html:has(#analysis-step-location.is-active),
html:has(#analysis-step-goal.is-active),
html:has(body[data-active-view="analysis"] .monitor-panel:not(.is-hidden)),
html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))),
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))),
html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) {
  overflow: hidden;
  scrollbar-gutter: auto;
  background-color: #FFFFFF;
  background-image:
    radial-gradient(ellipse 90% 70% at 50% 42%, rgba(0, 168, 120, .17) 0%, rgba(17, 29, 33, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, rgba(17, 29, 33, .16) 45%, rgba(255, 255, 255, .4) 100%),
    url("topo.svg?v=2");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-content,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-content,
html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .app-content,
html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-main,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-main,
html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .app-main,
html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) #view-analysis,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) #view-analysis,
html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) #view-analysis,
html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .launch-panel,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .launch-panel,
html body #view-analysis #analysis-step-location.is-active,
html body #view-analysis #analysis-step-goal.is-active,
html body #view-analysis .monitor-panel:not(.is-hidden) {
  background-color: transparent;
  background-image: none;
}

html body #view-analysis #analysis-step-location .analysis-journey.home-progress,
html body #view-analysis #analysis-step-goal .analysis-journey.home-progress,
html body #view-analysis .premium-split > .analysis-journey.home-progress,
html body #view-analysis .monitor-panel .analysis-journey.home-progress {
  color: var(--ivory-2);
  background: var(--glass-panel);
  border: 1px solid var(--glass-panel-border);
  border-radius: var(--glass-panel-radius);
  box-shadow: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html body #view-analysis .analysis-journey.home-progress .journey-title,
html body #view-analysis #analysis-step-location .analysis-journey .journey-title,
html body #view-analysis #analysis-step-goal .analysis-journey .journey-title,
html body #view-analysis .monitor-panel .journey-title,
html body #view-analysis .home-progress .journey-title {
  color: rgba(11, 31, 58, .7);
}

html body #view-analysis .analysis-journey.home-progress li,
html body #view-analysis #analysis-step-location .analysis-journey li,
html body #view-analysis #analysis-step-goal .analysis-journey li,
html body #view-analysis .home-progress li {
  color: rgba(11, 31, 58, .78);
}

html body #view-analysis .analysis-journey.home-progress li > span,
html body #view-analysis #analysis-step-location .analysis-journey li > span,
html body #view-analysis #analysis-step-goal .analysis-journey li > span,
html body #view-analysis .monitor-panel .analysis-journey li > span,
html body #view-analysis .home-progress li > span {
  color: rgba(11, 31, 58, .82);
  background: rgba(11, 31, 58, .1);
  border-color: rgba(11, 31, 58, .34);
  font-weight: 650;
}

html body #view-analysis .analysis-journey.home-progress li b,
html body #view-analysis #analysis-step-location .analysis-journey li b,
html body #view-analysis #analysis-step-goal .analysis-journey li b,
html body #view-analysis .monitor-panel .analysis-journey li b,
html body #view-analysis .home-progress li b {
  color: rgba(11, 31, 58, .88);
}

html body #view-analysis .analysis-journey.home-progress li small,
html body #view-analysis #analysis-step-location .analysis-journey li small,
html body #view-analysis #analysis-step-goal .analysis-journey li small,
html body #view-analysis .monitor-panel .analysis-journey li small,
html body #view-analysis .home-progress li small {
  color: rgba(11, 31, 58, .64);
  font-size: 13px;
}

html body #view-analysis .analysis-journey.home-progress li.is-current,
html body #view-analysis #analysis-step-location .analysis-journey li.is-current,
html body #view-analysis #analysis-step-goal .analysis-journey li.is-current,
html body #view-analysis .home-progress li.is-current {
  color: var(--ivory-2);
}

html body #view-analysis .analysis-journey.home-progress li.is-current > span,
html body #view-analysis #analysis-step-location .analysis-journey li.is-current > span,
html body #view-analysis #analysis-step-goal .analysis-journey li.is-current > span,
html body #view-analysis .monitor-panel .analysis-journey li.is-current > span,
html body #view-analysis .home-progress li.is-current > span {
  color: #fff;
  background: var(--lime-deep);
  border-color: var(--lime-deep);
}

html body #view-analysis .analysis-journey.home-progress li.is-current b,
html body #view-analysis .analysis-journey.home-progress li.is-complete b,
html body #view-analysis #analysis-step-location .analysis-journey li.is-current b,
html body #view-analysis #analysis-step-goal .analysis-journey li.is-current b,
html body #view-analysis .monitor-panel .analysis-journey li.is-current b,
html body #view-analysis .home-progress li.is-current b {
  color: var(--ink);
}

html body #view-analysis .analysis-journey.home-progress li.is-current small,
html body #view-analysis .analysis-journey.home-progress li.is-complete small,
html body #view-analysis #analysis-step-location .analysis-journey li.is-current small,
html body #view-analysis #analysis-step-goal .analysis-journey li.is-current small,
html body #view-analysis .monitor-panel .analysis-journey li.is-current small,
html body #view-analysis .home-progress li.is-current small {
  color: rgba(11, 31, 58, .8);
}

html body #view-analysis .analysis-journey.home-progress li::after,
html body #view-analysis #analysis-step-location .analysis-journey li::after,
html body #view-analysis #analysis-step-goal .analysis-journey li::after,
html body #view-analysis .monitor-panel .analysis-journey li::after,
html body #view-analysis .home-progress li::after {
  border-left-color: rgba(11, 31, 58, .28);
}

html body #view-analysis .analysis-journey.home-progress .journey-tip,
html body #view-analysis .home-progress .journey-tip,
html body #view-analysis #analysis-step-location .analysis-journey .journey-tip,
html body #view-analysis #analysis-step-goal .analysis-journey .journey-tip,
html body #view-analysis .monitor-panel .journey-tip {
  color: rgba(11, 31, 58, .82);
  background: var(--glass-tip);
  border: 1px solid var(--glass-tip-border);
  border-radius: 12px;
  padding: 14px 14px;
}

html body #view-analysis .analysis-journey.home-progress .journey-tip b,
html body #view-analysis .home-progress .journey-tip b,
html body #view-analysis .journey-tip b {
  color: var(--ink);
}

html body #view-analysis .analysis-journey.home-progress .journey-tip span,
html body #view-analysis .home-progress .journey-tip span,
html body #view-analysis .journey-tip span {
  color: rgba(11, 31, 58, .74);
}

/* -------------------------------------------------------------------------- */
/* Analisi 03/04: due colonne come la località, senza griglia appiattita.      */
/* -------------------------------------------------------------------------- */

html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)),
html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .app-content {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .app-main,
html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) #view-analysis,
html body #view-analysis .monitor-panel:not(.is-hidden) {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

html body #view-analysis .monitor-panel:not(.is-hidden) {
  min-height: 100dvh;
  max-height: 100dvh;
}

html body #view-analysis .monitor-panel .location-intro #monitor-title {
  max-width: 18ch;
  margin: 0;
  color: #0B1F3A;
  font-family: var(--font-serif);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.08;
  white-space: normal;
}

html body #view-analysis .monitor-panel .location-intro > p,
html body #view-analysis .monitor-panel .monitor-profile-copy {
  max-width: 40rem;
  margin: 12px 0 0;
  color: rgba(11, 31, 58, .68);
  font-size: 15px;
  line-height: 1.5;
}

html body #view-analysis .monitor-panel .wizard-step-heading {
  width: 100%;
  max-width: none;
  margin: 22px 0 14px;
}

html body #view-analysis .monitor-panel .wizard-step-heading h3 {
  color: #0B1F3A;
  font-family: var(--font-serif);
  font-size: clamp(20px, 2vw, 26px);
}

html body #view-analysis .monitor-panel .monitor-status {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

html body #view-analysis .monitor-panel .run-identity,
html body #view-analysis .monitor-panel .progress-block {
  margin: 0;
  min-height: 0;
}

html body #view-analysis .monitor-panel .monitor-followup {
  margin-top: 16px;
}

html body #view-analysis .monitor-panel .pipeline {
  margin: 0;
}

html body #view-analysis .monitor-panel .pipeline li {
  min-height: 36px;
}

html body #view-analysis .monitor-panel .pipeline small {
  display: block;
}

html body #view-analysis .monitor-panel .wizard-actions {
  margin: 14px 0 0;
}

html body #view-analysis .monitor-panel .wizard-actions:not(:has(.monitor-result-action:not(.is-hidden))) {
  display: none;
}

@media (min-width: 901px) {
  html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .premium-split,
  html body #view-analysis .monitor-panel .monitor-layout.premium-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 96px;
    row-gap: 18px;
    align-content: start;
    align-items: start;
    justify-content: stretch;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--page-canvas) + 2 * var(--page-gutter));
    min-height: 100dvh;
    max-height: 100dvh;
    margin-inline: auto;
    padding-top: var(--header-height);
    padding-bottom: 28px;
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
    overflow: hidden;
    background: transparent;
    background-image: none;
  }

  html body #view-analysis .monitor-panel .location-kicker {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin: 0;
  }

  html body #view-analysis .monitor-panel .location-stage,
  html body #view-analysis .monitor-panel .premium-stage,
  html body #view-analysis .monitor-panel .location-hero-block,
  html body #view-analysis .monitor-panel .location-step-main,
  html body #view-analysis .monitor-panel .monitor-content:not(.is-hidden) {
    display: flex;
    flex-direction: column;
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow: visible;
    background: transparent;
  }

  html body #view-analysis .monitor-panel .location-stage {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    min-height: 0;
    max-height: calc(100dvh - var(--header-height) - 72px);
  }

  html body #view-analysis .monitor-panel .location-intro,
  html body #view-analysis .monitor-panel .wizard-step-heading,
  html body #view-analysis .monitor-panel .monitor-empty,
  html body #view-analysis .monitor-panel .monitor-content,
  html body #view-analysis .monitor-panel .monitor-status,
  html body #view-analysis .monitor-panel .monitor-followup {
    grid-column: auto;
    grid-row: auto;
  }

  html body #view-analysis .monitor-panel .analysis-journey.home-progress,
  html body #view-analysis .monitor-panel .premium-split > .analysis-journey.home-progress {
    grid-column: 2;
    grid-row: 2;
    justify-self: stretch;
    align-self: start;
    width: 340px;
    max-width: 340px;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 26px 24px 20px;
    flex: none;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .premium-split,
  html body #view-analysis .monitor-panel .monitor-layout.premium-split {
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 56px;
  }

  html body #view-analysis .monitor-panel .analysis-journey.home-progress {
    width: 300px;
    max-width: 300px;
  }
}

@media (max-width: 900px) {
  html:has(body[data-active-view="analysis"] .monitor-panel:not(.is-hidden)),
  html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)),
  html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .app-content {
    height: auto;
    max-height: none;
    overflow: auto;
  }

  html body #view-analysis .monitor-panel:not(.is-hidden) {
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  html body #view-analysis .monitor-panel .monitor-layout.premium-split {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: calc(var(--header-height) + 12px) var(--page-gutter) 32px;
  }

  html body #view-analysis .monitor-panel .location-stage,
  html body #view-analysis .monitor-panel .location-hero-block,
  html body #view-analysis .monitor-panel .location-step-main,
  html body #view-analysis .monitor-panel .monitor-content:not(.is-hidden) {
    display: flex;
    flex-direction: column;
  }

  html body #view-analysis .monitor-panel .analysis-journey.home-progress {
    width: auto;
    max-width: none;
    margin: 24px 0 8px;
  }
}

/* -------------------------------------------------------------------------- */
/* Pannelli di configurazione: un solo chrome per card, dialoghi e campi.      */
/* -------------------------------------------------------------------------- */

html body :is(#view-settings, #view-account) .settings-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-height: 0;
}

html body :is(#view-settings, #view-account) .settings-page-intro,
html body :is(#view-settings, #view-account) .settings-page-intro.compact-heading {
  margin: 0;
}

html body :is(#view-settings, #view-account) .settings-page-intro h1 {
  color: var(--ivory-2);
  -webkit-text-fill-color: var(--ivory-2);
  font-family: var(--font-serif);
  font-size: clamp(40px, 4.4vw, 56px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.05;
}

html body :is(#view-settings, #view-account) .settings-page-intro .lead {
  max-width: 720px;
  margin: 10px 0 0;
  color: rgba(11, 31, 58, .52);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}

html body #view-settings .settings-tabs {
  margin: 0;
}

html body :is(#view-settings, #view-account) .settings-card,
html body :is(#view-settings, #view-account) .settings-section,
html body :is(#view-settings, #view-account) .settings-section + .settings-section {
  margin: 0;
  padding: 28px 26px 24px;
  color: var(--ivory-2);
  background: var(--glass-panel);
  border: 1px solid var(--glass-panel-border);
  border-radius: var(--glass-panel-radius);
  box-shadow: none;
  outline: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html body :is(#view-settings, #view-account) .settings-card-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 0 0 22px;
}

html body :is(#view-settings, #view-account) .settings-card-icon {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  margin-top: 2px;
  place-items: center;
  color: var(--emerald-dark);
  background: rgba(0, 168, 120, .12);
  border-radius: 50%;
}

html body :is(#view-settings, #view-account) .settings-card-icon .ui-icon {
  width: 18px;
  height: 18px;
}

html body :is(#view-settings, #view-account) .settings-card-header > div {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
}

html body :is(#view-settings, #view-account) .settings-card-header h2 {
  margin: 0;
  color: var(--ivory-2);
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
}

html body :is(#view-settings, #view-account) .settings-card-header p {
  max-width: 640px;
  margin: 6px 0 0;
  color: rgba(11, 31, 58, .5);
  font-size: 13px;
  line-height: 1.5;
}

html body :is(#view-settings, #view-account) .field label {
  margin-bottom: 8px;
  color: var(--ivory-2);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .015em;
  line-height: 1.4;
}

html body :is(#view-settings, #view-account) .field small {
  margin-top: 8px;
  color: rgba(11, 31, 58, .42);
  font-size: 12px;
  line-height: 1.45;
}

html body :is(#view-settings, #view-account) .settings-form-grid,
html body :is(#view-settings, #view-account) .settings-profile-form .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 28px;
}

html body :is(#view-settings, #view-account) .settings-control-with-icon {
  position: relative;
}

html body :is(#view-settings, #view-account) .settings-control-with-icon > .ui-icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 14px;
  width: 16px;
  height: 16px;
  color: rgba(11, 31, 58, .45);
  pointer-events: none;
  transform: translateY(-50%);
}

html body :is(#view-settings, #view-account) .settings-profile-form :is(input, select, textarea),
html body :is(#view-settings, #view-account) .site-select-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  height: 46px;
  min-height: 46px;
  padding: 0 14px;
  color: var(--ivory-2);
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(11, 31, 58, .12);
  border-radius: 12px;
  box-shadow: none;
  font-size: 14px;
  line-height: 1.2;
}

html body :is(#view-settings, #view-account) .settings-control-with-icon > :is(input, select),
html body :is(#view-settings, #view-account) .site-select-trigger {
  padding-left: 40px;
}

html body :is(#view-settings, #view-account) .settings-control-with-icon.password-field > input {
  padding-right: 44px;
}

html body :is(#view-settings, #view-account) .settings-profile-form textarea {
  height: auto;
  min-height: 120px;
  padding: 14px 16px;
  resize: vertical;
  line-height: 1.55;
}

html body :is(#view-settings, #view-account) .settings-profile-form :is(input, select, textarea)::placeholder {
  color: rgba(11, 31, 58, .32);
}

html body :is(#view-settings, #view-account) .settings-profile-form :is(input, select, textarea):hover,
html body :is(#view-settings, #view-account) .site-select-trigger:hover:not(:disabled) {
  background: rgba(255, 255, 255, .7);
  border-color: rgba(11, 31, 58, .2);
}

html body :is(#view-settings, #view-account) .settings-profile-form :is(input, select, textarea):focus,
html body :is(#view-settings, #view-account) .site-select-trigger:focus-visible,
html body :is(#view-settings, #view-account) .site-select.is-open .site-select-trigger {
  background: rgba(255, 255, 255, .78);
  border-color: rgba(0, 168, 120, .55);
  box-shadow: 0 0 0 3px rgba(0, 168, 120, .14);
}

html body :is(#view-settings, #view-account) .settings-card-footer {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 0;
  padding: 18px 0 0;
  background: transparent;
  border-top: 1px solid rgba(11, 31, 58, .08);
  border-radius: 0;
}

html body :is(#view-settings, #view-account) .settings-hint-callout,
html body :is(#view-settings, #view-account) .configuration-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0 0;
  padding: 14px 14px;
  color: rgba(11, 31, 58, .82);
  background: var(--glass-tip);
  border: 1px solid var(--glass-tip-border);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
}

html body :is(#view-settings, #view-account) .settings-hint-callout .ui-icon,
html body :is(#view-settings, #view-account) .configuration-note .ui-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--lime);
}

html body :is(#view-settings, #view-account) .configuration-note strong {
  color: var(--ink);
}

html body :is(#view-settings, #view-account) :is(#settings-profile-save, #weights-save, #account-save) {
  min-width: 168px;
  height: 44px;
  min-height: 44px;
  padding: 0 22px;
  color: #fff;
  background: var(--accent-solid);
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

html body :is(#view-settings, #view-account) :is(#settings-profile-save, #weights-save, #account-save):hover:not(:disabled) {
  background: var(--accent-solid-hover);
}

html body :is(#view-settings, #view-account) :is(#settings-profile-save, #weights-save, #account-save):disabled {
  opacity: .45;
}

html body :is(#view-settings, #view-account) :is(#weights-regenerate, #account-logout, .integration-manage, .settings-rubric-prompt .button-secondary) {
  height: 44px;
  min-height: 44px;
  padding: 0 18px;
  color: var(--ivory-2);
  background: rgba(11, 31, 58, .06);
  border: 1px solid rgba(11, 31, 58, .12);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

html body :is(#view-settings, #view-account) :is(#weights-regenerate, #account-logout, .integration-manage, .settings-rubric-prompt .button-secondary):hover:not(:disabled) {
  background: rgba(0, 168, 120, .14);
  border-color: rgba(0, 168, 120, .38);
}

html body #view-settings .integration-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

html body #view-settings .integration-row,
html body #view-settings .integration-row + .integration-row {
  display: grid;
  align-items: center;
  min-height: 76px;
  margin: 0;
  padding: 14px 16px;
  background: var(--glass-inset);
  border: 1px solid var(--glass-inset-border);
  border-radius: var(--glass-inset-radius);
}

html body #view-settings .integration-row,
html body #view-settings .integration-row + .integration-row {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px 14px;
}

html body #view-account .rule-list > div {
  padding: 16px 0;
  border-top: 1px solid rgba(11, 31, 58, .08);
}

html body :is(.search-config-dialog, .config-dialog, .confirm-dialog) {
  color: var(--ivory-2);
  background: var(--glass-panel);
  border: 1px solid var(--glass-panel-border);
  border-radius: var(--glass-panel-radius);
  box-shadow: none;
  color-scheme: dark;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html body :is(.search-config-dialog, .config-dialog, .confirm-dialog)::backdrop {
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(8px);
}

html body :is(.search-config-header, .config-header, .confirm-shell) {
  gap: 16px;
}

html body :is(.search-config-header, .config-header) {
  padding: 24px 28px 18px;
  background: transparent;
  border-bottom: 1px solid var(--ivory-line);
}

html body :is(.search-config-header, .config-header, .confirm-shell) .section-code {
  margin-bottom: 8px;
  color: var(--lime);
  font-family: inherit;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
}

html body :is(.search-config-header, .config-header) h2,
html body .confirm-shell h2 {
  margin: 0;
  color: var(--ivory-2);
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
}

html body :is(.search-config-header, .config-header) h2 + p,
html body .config-header > div > p:last-child,
html body .confirm-shell > div > p:last-child {
  margin: 6px 0 0;
  color: var(--ivory-label);
  font-size: 13px;
  line-height: 1.5;
}

html body :is(.search-config-dialog, .config-dialog, .hotel-dialog) .icon-button {
  color: var(--ivory-body);
  background: transparent;
  border: 1px solid var(--ivory-line);
  border-radius: 12px;
}

html body :is(.search-config-dialog, .config-dialog, .hotel-dialog) .icon-button:hover {
  color: var(--ivory-2);
  background: rgba(11, 31, 58, .06);
  border-color: rgba(11, 31, 58, .2);
}

html body .search-config-body,
html body .config-fields {
  padding: 20px 28px 18px;
}

html body .search-config-criterion {
  margin: 0;
  padding: 18px;
  background: var(--glass-inset);
  border: 1px solid var(--glass-inset-border);
  border-radius: var(--glass-inset-radius);
}

html body .search-config-criterion .advanced-section-heading {
  margin-bottom: 12px;
}

html body .confirm-icon {
  color: var(--emerald-dark);
  background: rgba(0, 168, 120, .12);
}

html body #view-settings .integration-manage {
  min-width: 0;
  width: auto;
}

html body :is(.search-config-dialog, .config-dialog, .confirm-dialog, .onboarding-dialog) .field label {
  margin-bottom: 8px;
  color: var(--ivory-2);
  font-size: 15px;
  font-weight: 650;
}

html body :is(.search-config-dialog, .config-dialog) .field :is(input, select:not(.site-select-native)),
html body :is(.search-config-dialog, .config-dialog) .model-picker-trigger,
html body :is(.search-config-dialog, .config-dialog) .site-select-trigger,
html body .onboarding-form-field :is(input:not([type="checkbox"]):not([type="radio"]):not(.model-picker-search), textarea, select) {
  height: 46px;
  min-height: 46px;
  padding: 0 16px !important;
  color: var(--ivory-2) !important;
  -webkit-text-fill-color: var(--ivory-2);
  caret-color: var(--ivory-2);
  background: rgba(255, 255, 255, .55) !important;
  border: 1px solid rgba(11, 31, 58, .12) !important;
  border-radius: 12px;
  box-shadow: none !important;
  font-size: 14px;
}

html body .onboarding-form-field .password-field > input {
  padding-right: 44px !important;
}

html body .onboarding-form-field :is(input, textarea)::placeholder {
  color: rgba(11, 31, 58, .22) !important;
  -webkit-text-fill-color: rgba(11, 31, 58, .22) !important;
  opacity: 1;
}

html body :is(.search-config-dialog, .config-dialog) .field textarea,
html body .onboarding-form-field textarea {
  display: block;
  height: auto !important;
  min-height: 120px !important;
  max-height: none !important;
  padding: 14px 16px !important;
  overflow: auto;
  line-height: 1.55 !important;
  resize: vertical;
}

html body .search-config-dialog #search-target {
  min-height: 132px !important;
  padding: 18px 20px !important;
  text-align: left;
}

html body .search-config-dialog #search-target:placeholder-shown {
  text-align: center;
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

html body .search-config-dialog #search-target::placeholder {
  color: rgba(11, 31, 58, .42) !important;
  -webkit-text-fill-color: rgba(11, 31, 58, .42) !important;
  text-align: center;
  line-height: 1.55;
  opacity: 1;
}

html body :is(.search-config-dialog, .config-dialog) .field :is(input, textarea, select:not(.site-select-native)):hover:not(:disabled),
html body :is(.search-config-dialog, .config-dialog) .model-picker-trigger:hover:not(:disabled),
html body :is(.search-config-dialog, .config-dialog) .site-select-trigger:hover:not(:disabled) {
  background: rgba(255, 255, 255, .72) !important;
  border-color: rgba(11, 31, 58, .2) !important;
}

html body :is(.search-config-dialog, .config-dialog) .field :is(input, textarea, select:not(.site-select-native)):focus,
html body :is(.search-config-dialog, .config-dialog) .field :is(input, textarea, select:not(.site-select-native)):focus-visible,
html body :is(.search-config-dialog, .config-dialog) .model-picker-trigger:focus-visible,
html body :is(.search-config-dialog, .config-dialog) .site-select-trigger:focus-visible,
html body .onboarding-form-field :is(input, textarea, select):focus {
  border-color: rgba(0, 168, 120, .55) !important;
  box-shadow: 0 0 0 3px rgba(0, 168, 120, .14) !important;
}

html body .search-config-sections {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  border: 0;
}

html body .search-config-section {
  background: var(--glass-inset);
  border: 1px solid var(--glass-inset-border);
  border-radius: var(--glass-inset-radius);
}

html body .search-config-section > summary {
  min-height: 72px;
  padding: 16px 18px;
  border-radius: var(--glass-inset-radius);
}

html body .search-config-section > .form-grid,
html body .search-config-section > .advanced-grid {
  padding: 0 18px 18px;
}

html body :is(.search-config-footer, .config-actions) {
  gap: 10px;
  padding: 16px 28px 20px;
  background: transparent;
  border-top: 1px solid var(--glass-panel-border);
}

html body .confirm-actions {
  gap: 10px;
  margin: 20px 0 0;
  padding: 18px 0 0;
  background: transparent;
  border-top: 1px solid var(--ivory-line);
}

html body :is(.search-config-dialog, .config-dialog, .confirm-dialog) :is(.button-primary, .platform-action-primary) {
  min-width: 168px;
  height: 44px;
  min-height: 44px;
  padding: 0 22px;
  color: #fff;
  background: var(--accent-solid);
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

html body :is(.search-config-dialog, .config-dialog, .confirm-dialog) :is(.button-primary, .platform-action-primary):hover:not(:disabled) {
  background: var(--accent-solid-hover);
  transform: none;
}

html body :is(.search-config-dialog, .config-dialog, .confirm-dialog) :is(.button-ghost, .button-secondary) {
  height: 44px;
  min-height: 44px;
  padding: 0 18px;
  color: var(--ivory-2);
  background: transparent;
  border: 1px solid rgba(11, 31, 58, .16);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

html body :is(.search-config-dialog, .config-dialog, .confirm-dialog) :is(.button-ghost, .button-secondary):hover:not(:disabled) {
  background: rgba(11, 31, 58, .06);
}

html body .confirm-shell {
  padding: 24px 28px 22px;
}

html body .confirm-summary {
  background: var(--glass-inset);
  border: 1px solid var(--glass-inset-border);
  border-radius: var(--glass-inset-radius);
}

html body .confirm-summary dt {
  color: var(--ivory-label);
}

html body .confirm-summary dd {
  color: var(--ivory-2);
}

@media (max-width: 900px) {
  html body :is(#view-settings, #view-account) .settings-form-grid,
  html body :is(#view-settings, #view-account) .settings-profile-form .form-grid,
  html body #view-account .rule-list {
    grid-template-columns: 1fr;
  }

  html body :is(#view-settings, #view-account) .settings-card,
  html body :is(#view-settings, #view-account) .settings-section {
    padding: 24px 20px 22px;
  }

  html body :is(#view-settings, #view-account) .settings-card-footer {
    flex-direction: column;
    align-items: stretch;
  }

  html body :is(#view-settings, #view-account) :is(#settings-profile-save, #weights-save, #account-save, #weights-regenerate, #account-logout) {
    width: 100%;
  }

}

@media (max-width: 700px) {
  html body :is(.search-config-dialog, .config-dialog) {
    width: min(720px, calc(100% - 24px));
    max-width: min(720px, calc(100% - 24px));
    height: auto;
    max-height: calc(100dvh - 20px);
    margin: auto;
    border-radius: 20px;
  }

  html body :is(.search-config-header, .config-header, .search-config-body, .config-fields, .search-config-footer, .config-actions) {
    padding-left: 18px;
    padding-right: 18px;
  }

  html body .search-config-footer .button {
    flex: 1;
  }
}

/* La fase 03/04 usa lo stesso canvas scuro della Panoramica. */
html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)),
html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .app-content,
html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .app-main,
html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) #view-analysis,
html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .analysis-grid {
  background: var(--forest);
}

html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .app-content {
  padding-top: var(--header-height);
}

html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .app-main {
  padding: 24px clamp(24px, 4vw, 48px) 48px;
}

html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) #view-analysis {
  width: 100%;
  max-width: 1368px;
  margin: 0 auto;
}

html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .monitor-panel {
  width: 100%;
  min-height: calc(100dvh - var(--header-height) - 72px);
  padding: 0;
  color: var(--ivory-2);
  background: var(--forest);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .monitor-layout {
  min-height: calc(100dvh - var(--header-height) - 72px);
  padding: 68px clamp(28px, 13vw, 190px) 54px;
  background-color: var(--forest);
  background-image:
    linear-gradient(rgba(255, 255, 255, .96), rgba(255, 255, 255, .96)),
    url("topo.svg");
  background-repeat: no-repeat;
  background-position: center, center;
  background-size: auto, cover;
}

html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .side-progress-card {
  color: var(--ivory-2);
  background: var(--glass-panel);
  border-color: var(--glass-panel-border);
  border-radius: var(--glass-panel-radius);
  box-shadow: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .run-identity,
html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .progress-block {
  color: var(--ivory-2);
  background: var(--glass-inset);
  border-color: var(--glass-inset-border);
}

html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .pipeline i {
  background: var(--forest);
  border-color: var(--step-idle);
}

html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .pipeline li::before {
  background: var(--ivory-line);
}

@media (max-width: 900px) {
  html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .app-main {
    padding: 18px;
  }

  html body[data-active-view="analysis"]:has(.monitor-panel:not(.is-hidden)) .monitor-layout {
    min-height: 0;
    padding: 36px 26px;
  }
}

/* Brand lockup: una sola firma Vaglio in header, onboarding e responsive. */
html body .brand,
html body:has(#view-analysis.is-active) .brand,
html body .app-header .brand,
html body:has(#view-analysis.is-active) .app-header .brand {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  color: #0B1F3A;
  text-decoration: none;
}

html body .brand > span:last-child,
html body:has(#view-analysis.is-active) .brand > span:last-child {
  display: block;
  line-height: 1;
}

html body .brand strong,
html body:has(#view-analysis.is-active) .brand strong,
html body .app-header .brand strong,
html body:has(#view-analysis.is-active) .app-header .brand strong {
  display: block;
  color: #0B1F3A;
  font-family: var(--font-sans);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
}

html body .brand-mark,
html body:has(#view-analysis.is-active) .brand-mark,
html body .app-header .brand-mark,
html body:has(#view-analysis.is-active) .app-header .brand-mark {
  display: grid;
  flex: 0 0 26px;
  grid-template-columns: repeat(3, 6px);
  gap: 4px;
  align-items: end;
  width: 26px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

html body .brand-mark i,
html body:has(#view-analysis.is-active) .brand-mark i,
html body .app-header .brand-mark i,
html body:has(#view-analysis.is-active) .app-header .brand-mark i {
  display: block;
  width: 6px;
  border-radius: 999px;
  opacity: 1;
}

html body .brand-mark i:nth-child(1),
html body:has(#view-analysis.is-active) .brand-mark i:nth-child(1),
html body .app-header .brand-mark i:nth-child(1),
html body:has(#view-analysis.is-active) .app-header .brand-mark i:nth-child(1) {
  height: 10px;
  background: #E8F8F2;
}

html body .brand-mark i:nth-child(2),
html body:has(#view-analysis.is-active) .brand-mark i:nth-child(2),
html body .app-header .brand-mark i:nth-child(2),
html body:has(#view-analysis.is-active) .app-header .brand-mark i:nth-child(2) {
  height: 17px;
  background: #E8F8F2;
}

html body .brand-mark i:nth-child(3),
html body:has(#view-analysis.is-active) .brand-mark i:nth-child(3),
html body .app-header .brand-mark i:nth-child(3),
html body:has(#view-analysis.is-active) .app-header .brand-mark i:nth-child(3) {
  height: 24px;
  background: #FFFFFF;
}

@media (max-width: 560px) {
  html body .brand,
  html body:has(#view-analysis.is-active) .brand,
  html body .app-header .brand,
  html body:has(#view-analysis.is-active) .app-header .brand {
    gap: 11px;
  }

  html body .brand strong,
  html body:has(#view-analysis.is-active) .brand strong,
  html body .app-header .brand strong,
  html body:has(#view-analysis.is-active) .app-header .brand strong {
    font-size: 18px;
  }
}

/* Ricerca v3: riepilogo semplice, funnel e risultati separati. */
.analysis-preflight {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid rgba(31, 49, 43, .12);
  border-radius: 18px;
  background: rgba(248, 250, 245, .82);
}

.analysis-preflight-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.analysis-preflight-heading > div {
  display: grid;
  gap: 4px;
}

.analysis-preflight-heading span {
  color: var(--muted, #5A6579);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
}

.analysis-preflight-heading strong {
  color: var(--ink, #0B1F3A);
  font-size: 18px;
}

.analysis-preflight dl,
.monitor-funnel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.analysis-preflight dl > div,
.monitor-funnel > div {
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
}

.analysis-preflight dt,
.monitor-funnel dt {
  color: var(--muted, #5A6579);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.analysis-preflight dd,
.monitor-funnel dd {
  overflow: hidden;
  margin: 5px 0 0;
  color: var(--ink, #0B1F3A);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analysis-preflight-warning {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  color: #B45309;
  background: #FEF3C7;
  font-size: 13px;
  font-weight: 650;
}

.monitor-funnel {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 18px 0;
}

.monitor-funnel > div {
  border: 1px solid rgba(31, 49, 43, .1);
  background: rgba(255, 255, 255, .72);
}

.monitor-funnel dd {
  font-size: 22px;
}

.results-sections {
  display: flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(31, 49, 43, .1);
  border-radius: 14px;
  background: rgba(240, 244, 238, .8);
}

.results-section-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 13px;
  border: 0;
  border-radius: 10px;
  color: var(--muted, #5A6579);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.results-section-tab b {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(31, 49, 43, .08);
  font-size: 11px;
  text-align: center;
}

.results-section-tab.is-active {
  color: #00875F;
  background: #fff;
  box-shadow: 0 2px 10px rgba(26, 48, 39, .08);
}

@media (max-width: 900px) {
  .analysis-preflight dl,
  .monitor-funnel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .results-sections {
    width: 100%;
    overflow-x: auto;
  }

  .results-section-tab { flex: 0 0 auto; }
}

@media (max-width: 560px) {
  .analysis-preflight { padding: 16px; }
  .analysis-preflight-heading { align-items: flex-start; }
  .analysis-preflight dl { grid-template-columns: 1fr; }
  .monitor-funnel { grid-template-columns: repeat(2, 1fr); }
  .monitor-funnel > div:last-child { grid-column: 1 / -1; }

}

/* ========================================================================== */
/* Nero su bianco — marchio, tipografia e primitive                            */
/* Ultimo blocco del file: vince sull-ordine a parita di specificita.          */
/* ========================================================================== */

/* --- Barra superiore: bianca, senza riga di separazione dal contenuto ------ */
html body .app-header,
html body:has(#view-analysis.is-active) .app-header {
  color: var(--ink);
  background: var(--white);
  border-bottom:0;
}
html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-header,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-header,
html body[data-active-view="how-it-works"] .app-header,
html body:has(#view-how-it-works.is-active) .app-header {
  background: transparent;
  border-bottom:0;
}

/* --- Il marchio: la V della favicon su blu notte, e il nome in chiaro ------ */
/* Prima era il PNG del marchio completo, con tredici granelli, ridotto a 32px
   accanto a un logotipo spaziato ricalcato a poligoni: a quella misura i
   granelli diventavano rumore. Ora e' lo stesso disegno della favicon, e il
   nome e' testo vero nel font dei titoli. */
html body .brand,
html body:has(#view-analysis.is-active) .brand {
  gap: 10px;
  align-items: center;
  color: var(--navy);
}
html body .brand-mark,
html body:has(#view-analysis.is-active) .brand-mark,
html body .app-header .brand-mark,
html body:has(#view-analysis.is-active) .app-header .brand-mark {
  display: block;
  /* Il blocco precedente lascia flex-basis 26px, che vince sulla larghezza. */
  flex: none;
  grid-template-columns: none;
  gap: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  overflow: visible;
  color: var(--navy);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
html body .brand-mark > img {
  display: block;
  width: 100%;
  height: 100%;
}

html body .brand .brand-word,
html body:has(#view-analysis.is-active) .brand .brand-word {
  display: block;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}
html body .brand small,
html body:has(#view-analysis.is-active) .brand small,
html body .app-header .brand small {
  margin-top: 3px;
  margin-right: -.14em;
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* --- Tipografia: Outfit per il display, Inter per la lettura -------------- */
html body {
  color: var(--ink);
  background: var(--white);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
html body h1, html body h2, html body h3,
html body .hero-title, html body .section-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.022em;
}
html body .section-code {
  color: var(--grey);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* --- Primitive: pieno blu notte, accento smeraldo ------------------------- */
html body .button-primary,
html body .button-download,
html body #view-analysis .button-primary {
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy);
}
html body .button-primary:hover:not(:disabled),
html body .button-download:hover:not(:disabled),
html body #view-analysis .button-primary:hover:not(:disabled) {
  background: var(--navy-soft);
  border-color: var(--navy-soft);
}
html body .button-secondary {
  color: var(--ink);
  background: var(--white);
  border-color: var(--line-strong);
}
html body .button-secondary:hover:not(:disabled) {
  background: var(--paper-2);
  border-color: var(--grey-soft);
}

html body :focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 2px;
}
html body ::selection {
  color: var(--white);
  background: var(--navy);
}
html body ::placeholder { color: var(--placeholder); }

/* Superfici: bianco con bordo hairline, niente ombre pesanti. */
html body .panel,
html body .card {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

/* --- Correzioni di contrasto e stati ------------------------------------- */

/* Passo corrente: pieno blu notte, cosi il segnaposto si vede sul bianco. */
html body #view-analysis .home-progress li.is-current > span,
html body #view-analysis #analysis-step-location .analysis-journey li.is-current > span,
html body #view-analysis #analysis-step-goal .analysis-journey li.is-current > span,
html body #view-analysis .monitor-panel .analysis-journey li.is-current > span,
html body #view-analysis .analysis-journey.home-progress li.is-current > span {
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy);
}
/* Passo gia fatto: spunta smeraldo su velo chiaro. */
html body #view-analysis .home-progress li.is-done > span,
html body #view-analysis .analysis-journey li.is-done > span {
  color: var(--emerald-dark);
  background: var(--emerald-soft);
  border-color: var(--emerald-border);
}

/* Badge di conferma: smeraldo scuro, per reggere il bianco sopra. */
html body .geo-provider-card:has(input:checked) .geo-provider-check,
html body .onboarding-section-provider .onboarding-choice-osm:has(input:checked) .geo-provider-check,
html body .onboarding-section-provider .onboarding-choice-google:has(input:checked) .geo-provider-check,
html body .onboarding-section-ai .onboarding-choice-gemini:has(input:checked) .geo-provider-check {
  color: var(--white);
  background: var(--emerald-dark);
  border-color: var(--emerald-dark);
}

/* Distruttivo: il rosso resta rosso anche in hover. */
html body .config-dialog .button-danger:hover:not(:disabled),
html body .button-danger:hover:not(:disabled) {
  color: #B42318;
  background: #FEE4E2;
  border-color: #F3B5AE;
}

/* Testo secondario: grigi abbastanza scuri da leggersi sul bianco. */
:root {
  --step-idle: #7E8899;
  --step-idle-title: #6B7689;
  --step-idle-desc: #6B7689;
}
html body .brand small,
html body:has(#view-analysis.is-active) .brand small,
html body .app-header .brand small,
html body .section-code {
  color: var(--muted);
}

/* Su schermi stretti il marchio si stringe un poco. */
@media (max-width: 560px) {
  html body .brand-mark,
  html body:has(#view-analysis.is-active) .brand-mark,
  html body .app-header .brand-mark,
  html body:has(#view-analysis.is-active) .app-header .brand-mark {
    width: 28px;
    height: 28px;
  }
  html body .brand .brand-word,
  html body:has(#view-analysis.is-active) .brand .brand-word {
    font-size: 18px;
  }
}

/* ========================================================================== */
/* Menu principale: controllo segmentato bianco, segmento attivo smeraldo      */
/* ========================================================================== */

html body .app-header .main-nav,
html body:has(#view-analysis.is-active) .app-header .main-nav,
html body[data-active-view="analysis"] .app-header .main-nav {
  gap: 0;
  height: 50px;
  min-height: 50px;
  padding: 0;
  /* i lati del segmento attivo seguono la curva del contenitore */
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* L'indicatore scorrevole diventa il riempimento del segmento attivo.
   Misure e posizione le mette il JS: qui si decide solo l'aspetto. */
html body .app-header .nav-indicator {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* La barretta sotto l'etichetta. */
html body .app-header .nav-indicator::after {
  right: 18px;
  bottom: 8px;
  left: 18px;
  height: 3px;
  /* smeraldo scuro: sulla menta il chiaro non staccava abbastanza */
  background: var(--emerald-dark);
  border-radius: 3px;
}

html body .app-header .nav-item,
html body:has(#view-analysis.is-active) .app-header .nav-item,
html body .app-header .nav-item.is-active,
html body:has(#view-analysis.is-active) .app-header .nav-item.is-active {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  height: 100%;
  min-height: 0;
  padding: 0 20px;
  color: rgba(11, 31, 58, .72);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: color 200ms ease, background-color 260ms ease;
}

/* Divisori fra i segmenti. */
html body .app-header .nav-item + .nav-item,
html body:has(#view-analysis.is-active) .app-header .nav-item + .nav-item {
  border-left: 1px solid var(--line);
}

/* Le icone tornano visibili: erano nascoste. */
html body .app-header .nav-item .ui-icon,
html body:has(#view-analysis.is-active) .app-header .nav-item .ui-icon {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  stroke-width: 1.9;
}

html body .app-header .nav-copy b,
html body:has(#view-analysis.is-active) .app-header .nav-copy b {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .005em;
}

html body .app-header .nav-item:hover {
  color: var(--navy);
  background: transparent;
}

html body .app-header .nav-item.is-active,
html body:has(#view-analysis.is-active) .app-header .nav-item.is-active {
  color: var(--navy);
  background: var(--emerald-soft);
}

html body .app-header .nav-item.is-active .ui-icon,
html body:has(#view-analysis.is-active) .app-header .nav-item.is-active .ui-icon {
  color: var(--emerald-dark);
}
html body .app-header .nav-item .ui-icon {
  transition: color 200ms ease;
}

/* Il contenitore ritaglia: il contorno di messa a fuoco va portato dentro. */
html body .app-header .nav-item:focus-visible {
  outline: 2px solid var(--emerald-dark);
  outline-offset: -3px;
  border-radius: 0;
}

@media (max-width: 1080px) {
  html body .app-header .nav-item,
  html body:has(#view-analysis.is-active) .app-header .nav-item { padding: 0 15px; gap: 8px; }
  html body .app-header .nav-copy b,
  html body:has(#view-analysis.is-active) .app-header .nav-copy b { font-size: 14px; }
  html body .app-header .nav-indicator::after { right: 14px; left: 14px; }
}

@media (max-width: 860px) {
  /* Sotto questa soglia le icone da sole reggono: le etichette rubano spazio. */
  html body .app-header .main-nav,
  html body:has(#view-analysis.is-active) .app-header .main-nav {
    height: 46px;
    min-height: 46px;
    border-radius: 14px;
  }
  html body .app-header .nav-item,
  html body:has(#view-analysis.is-active) .app-header .nav-item { padding: 0 16px; }
  html body .app-header .nav-copy,
  html body:has(#view-analysis.is-active) .app-header .nav-copy { display: none; }
  html body .app-header .nav-indicator::after { right: 10px; bottom: 7px; left: 10px; }
}

/* ========================================================================== */
/* Transizioni di vista: ordine di sovrapposizione e tempi                     */
/* ========================================================================== */

/* Il contenuto entrante deve stare SOPRA la vecchia pagina che sfuma.
   Prima erano entrambi a z-index 1: la pagina uscente, opaca, restava
   davanti a quella nuova per tutta la dissolvenza. */
::view-transition-old(root) { z-index: 0; }
::view-transition-new(root) { z-index: 0; }
::view-transition-group(page-view) { z-index: 5; }

/* Tempi piu' asciutti: 640ms su ogni cambio vista si sentivano come attesa. */
::view-transition-group(page-view),
::view-transition-old(page-view),
::view-transition-new(page-view) {
  animation-duration: 380ms;
}
::view-transition-old(root) {
  animation-duration: 300ms;
}
html[data-nav-dir="forward"]::view-transition-new(page-view),
html[data-nav-dir="back"]::view-transition-new(page-view) {
  animation-delay: 0ms;
}
::view-transition-group(nav-indicator) {
  animation-duration: 380ms;
}

/* Lo scorrimento dal vivo va d-accordo con quello della transizione. */
html body .app-header .nav-indicator {
  transition:
    transform 380ms cubic-bezier(.16, 1, .3, 1),
    width 380ms cubic-bezier(.16, 1, .3, 1),
    height 380ms cubic-bezier(.16, 1, .3, 1),
    opacity 140ms ease;
}

/* Spostamenti piu' corti: meno scivolamento laterale, piu' presenza. */
@keyframes nav-view-in-right {
  from { opacity: 0; transform: translate3d(10px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes nav-view-in-left {
  from { opacity: 0; transform: translate3d(-10px, 0, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes nav-view-out-left {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate3d(-10px, 0, 0); }
}
@keyframes nav-view-out-right {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate3d(10px, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  html body .app-header .nav-indicator { transition: none; }
}

/* ==========================================================================  */
/* Panoramica: la schermata d'ingresso                                          */
/* Da "Panoramica.dc.html" (Claude Design). Una sola variante, la 1a: barra     */
/* piena a tutta larghezza, niente colonna LOCALITA', fondo bianco. Con         */
/* account cambia solo cosa sta *dentro* la barra (menu e blocco account al     */
/* posto di "?" e "Accedi"), non l'impianto.                                    */
/* Ultimo blocco del file: vince sull'ordine a parita' di specificita'.         */
/* ==========================================================================  */

:root {
  /* Il verde del titolo e del bottone di ricerca. Piu' spento dello smeraldo
     di sistema: a 88px lo smeraldo squillava, questo regge il peso. */
  --pine: #3D9A63;
  --pine-dark: #2F7D4F;
  /* Hairline piu' chiara di --line: separa senza disegnare. */
  --hairline: #EFF1F4;
}

/* --- Barra superiore: piena larghezza, niente pillola flottante ----------- */
html body { --header-height: 96px; }

html body .app-header,
html body:has(#view-analysis.is-active) .app-header,
html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-header,
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-header {
  top: 0;
  right: 0;
  left: 0;
  width: auto;
  height: var(--header-height);
  min-height: var(--header-height);
  padding: 0 56px;
  background: var(--white);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
}

/* Il marchio prende la meta' sinistra, cosi' il menu resta al centro ottico. */
html body .app-header .sidebar-head { flex: 1 1 0; padding: 0; }
html body .app-content { padding-top: var(--header-height); }

/* --- Ospite (1a): barra piena e un solo bottone in fondo a destra ---------
   La schermata 1a disegna la barra senza menu, ma il menu dell'ospite e'
   l'unica porta per "How it works": nasconderlo chiuderebbe quella pagina.
   Resta quindi visibile, come vuole anche NAV.guest nel progetto. */

html body .app-header .header-signin {
  display: inline-flex;
  align-items: center;
  height: 44px;
  margin-left: auto;
  padding: 0 22px;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: color var(--motion-premium), border-color var(--motion-premium);
}
html body .app-header .header-signin:hover {
  color: var(--pine-dark);
  border-color: var(--pine);
}

/* --- Menu: pastiglia leggera al posto del controllo segmentato ------------ */
html body .app-header .main-nav,
html body:has(#view-analysis.is-active) .app-header .main-nav,
html body[data-active-view="analysis"] .app-header .main-nav {
  gap: 2px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html body .app-header .nav-item,
html body:has(#view-analysis.is-active) .app-header .nav-item,
html body .app-header .nav-item.is-active,
html body:has(#view-analysis.is-active) .app-header .nav-item.is-active {
  height: 40px;
  gap: 9px;
  padding: 0 14px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 11px;
}
html body .app-header .nav-item + .nav-item,
html body:has(#view-analysis.is-active) .app-header .nav-item + .nav-item {
  border-left: 0;
}
html body .app-header .nav-item.is-active,
html body:has(#view-analysis.is-active) .app-header .nav-item.is-active {
  color: var(--navy);
}
html body .app-header .nav-item.is-active .ui-icon,
html body:has(#view-analysis.is-active) .app-header .nav-item.is-active .ui-icon {
  color: currentColor;
}
html body .app-header .nav-copy b,
html body:has(#view-analysis.is-active) .app-header .nav-copy b {
  font-size: 13.5px;
  font-weight: 500;
}
html body .app-header .nav-item.is-active .nav-copy b { font-weight: 600; }
html body .app-header .nav-item:focus-visible {
  outline: 2px solid var(--emerald-dark);
  outline-offset: 2px;
  border-radius: 11px;
}

/* L'indicatore scorrevole e' il riempimento del segmento attivo: il JS ne
   mette misura e posizione, qui resta solo l'aspetto. La barretta sotto
   l'etichetta sparisce, il progetto usa il velo. */
html body .app-header .nav-indicator {
  background: rgba(11, 31, 58, .06);
  border-radius: 11px;
}
html body .app-header .nav-indicator::after { display: none; }

/* --- Il blocco account: sigla, nome, ruolo. Niente freccia ---------------- */
html body .app-header .account-menu {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
html body .app-header .account-menu > .ui-icon { display: none; }
html body .app-header .account-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--emerald-dark);
  background: var(--emerald-soft);
  border: 0;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
}
html body .app-header .account-copy strong {
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
html body .app-header .account-copy small {
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
}

/* ==========================================================================  */
/* La colonna di sinistra: non c'e' piu'                                       */
/* Era l'unico segno che distingueva la Panoramica con account da quella da    */
/* ospite. Ora la schermata e' la stessa per tutti: la colonna resta nel        */
/* markup (la legge chi usa lo schermo) ma non si disegna.                     */
/* ==========================================================================  */

html body #view-analysis #analysis-step-location .location-kicker.location-rail {
  display: none;
}

/* ==========================================================================  */
/* Il vaglio: titolo, campo di ricerca, suggerimenti. Centrati, niente altro.  */
/* ==========================================================================  */

/* La schermata occupa l'altezza intera: la spaziatura la mette il passo. */
html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-content {
  padding-top: 0;
}

html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--header-height) 64px 96px;
}

html body #view-analysis #analysis-step-location :is(.location-stage, .location-hero-block, .location-step-main, .location-intro, .zone-field) {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html body #view-analysis #analysis-step-location .location-intro h1 {
  max-width: none;
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(42px, 6.1vw, 88px);
  font-weight: 300;
  letter-spacing: -.042em;
  line-height: 1.02;
  text-align: center;
  text-wrap: balance;
}
html body #view-analysis #analysis-step-location .location-intro .hero-accent {
  color: var(--pine);
  background: none;
  font-weight: 500;
  -webkit-text-fill-color: currentColor;
}

/* Quello che il progetto non mostra. Il titolo del passo resta per chi legge
   con lo schermo: e' il bersaglio di aria-labelledby. */
html body #view-analysis #analysis-step-location .location-intro > p,
html body #view-analysis #analysis-step-location .analysis-journey.side-progress-card {
  display: none;
}
html body #view-analysis #analysis-step-location .wizard-step-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Il passo avanti si vede solo quando c'e' davvero una localita' da
   confermare, ma il suo posto e' riservato sempre: vedi il blocco "La
   schermata sta ferma" in fondo al file. */
html body #view-analysis #analysis-step-location .wizard-actions {
  justify-content: center;
  margin-top: 34px;
}

/* --- La pillola di ricerca: campo e bottone dentro lo stesso bordo -------- */
html body #view-analysis #analysis-step-location .zone-search-control,
html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: center;
  width: min(900px, 100%);
  max-width: 900px;
  min-height: 82px;
  margin: clamp(36px, 4.4vw, 64px) 0 0;
  padding: 8px 14px 8px 14px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(11, 31, 58, .04), 0 18px 44px rgba(11, 31, 58, .09);
  transition: border-color var(--motion-premium), box-shadow var(--motion-premium);
}
html body #view-analysis #analysis-step-location .zone-search-control:focus-within {
  border-color: var(--emerald-border);
  box-shadow: 0 2px 4px rgba(11, 31, 58, .04), 0 18px 44px rgba(11, 31, 58, .13);
}
html body #view-analysis #analysis-step-location .zone-search-input {
  flex: 1 1 auto;
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html body #view-analysis #analysis-step-location .zone-search-icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--muted);
  stroke-width: 1.8;
}
html body #view-analysis #analysis-step-location #zone {
  height: auto;
  min-height: 0;
  padding: 0;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 400;
}
html body #view-analysis #analysis-step-location #zone:focus,
html body #view-analysis #analysis-step-location #zone:focus-visible {
  outline: 0;
  box-shadow: none;
}
html body #view-analysis #analysis-step-location .zone-clear { flex: none; }

html body #view-analysis #analysis-step-location #zone-search-button {
  display: inline-flex;
  flex: none;
  gap: 0;
  align-items: center;
  justify-content: center;
  /* Il bottone e' un cerchio. Le misure sono !important perche' i livelli
     precedenti di app.css impongono --control-height e un min-width da
     bottone largo: senza, qui usciva un ovale 64x54. */
  width: 52px !important;
  min-width: 0 !important;
  height: 52px !important;
  min-height: 0 !important;
  padding: 0 !important;
  color: var(--white);
  background: var(--pine);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}
html body #view-analysis #analysis-step-location #zone-search-button:hover:not(:disabled) {
  background: var(--pine-dark);
}
html body #view-analysis #analysis-step-location .zone-search-arrow {
  width: 19px;
  height: 19px;
  stroke-width: 2;
}
/* L'etichetta resta per chi legge con lo schermo, il bottone e' tondo. */
html body #view-analysis #analysis-step-location .zone-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* La tendina dei risultati esce dalla riga: appesa sotto la pillola. */
html body #view-analysis #analysis-step-location .zone-results {
  position: absolute;
  z-index: 30;
  top: calc(100% + 10px);
  right: 0;
  left: 0;
  margin: 0;
}

/* --- Suggerimenti: tre schede chiare sotto il campo ----------------------- */
html body #view-analysis #analysis-step-location .popular-zones {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: auto;
  max-width: none;
  margin: clamp(32px, 3.6vw, 52px) 0 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
html body #view-analysis #analysis-step-location .popular-zones > span {
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}
html body #view-analysis #analysis-step-location .popular-zones > div {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
html body #view-analysis #analysis-step-location .popular-zones button {
  display: inline-flex;
  gap: 11px;
  align-items: center;
  min-height: 52px;
  padding: 0 24px;
  color: #3C4759;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(11, 31, 58, .04), 0 8px 20px rgba(11, 31, 58, .05);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
}
html body #view-analysis #analysis-step-location .popular-zones button:hover {
  color: var(--pine-dark);
  border-color: var(--emerald-border);
}
html body #view-analysis #analysis-step-location .popular-zones button .ui-icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--pine);
  stroke-width: 1.9;
}

/* --- Sotto i 900px la colonna sparisce e la pillola si stringe ------------ */
@media (max-width: 900px) {
  html body { --header-height: 72px; }

  html body .app-header {
    left: 0;
    padding: 0 20px;
  }
  html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
    min-height: 0;
    padding: calc(var(--header-height) + 40px) 20px 64px;
  }
  html body #view-analysis #analysis-step-location .zone-search-control,
  html body #view-analysis #analysis-step-location .zone-field.is-selected .zone-search-control {
    flex-direction: row;
    min-height: 68px;
    padding: 6px 11px 6px 11px;
  }
  /* Un livello precedente impilava campo e bottone sotto i 900px: la pillola
     diventava alta 144px col tondo verde a mezz'aria. Qui restano in riga,
     come sopra i 900px, solo piu' stretti. */
  html body #view-analysis #analysis-step-location #zone-search-button {
    position: static;
    margin: 0;
  }
  html body #view-analysis #analysis-step-location #zone-search-button {
    width: 44px !important;
    height: 44px !important;
  }
  html body #view-analysis #analysis-step-location #zone { font-size: 16px; }
}

/* ==========================================================================  */
/* Ospite: la barra in alto del progetto, e i link d'informativa dentro        */
/* ==========================================================================  */

/* Senza account la barra e' quella del progetto: marchio a sinistra, "Accedi"
   a destra, in mezzo niente. Il menu a pastiglie sparisce; "How it works" —
   che ne era l'unica porta — riappare nella riga qui sotto. */
html body[data-session="guest"] .app-header .main-nav,
html body[data-session="guest"]:has(#view-analysis.is-active) .app-header .main-nav,
html body[data-session="guest"][data-active-view="analysis"] .app-header .main-nav {
  display: none;
}

/* I link lasciano la striscia in fondo e salgono nella barra, appena prima
   del bottone. Restano tenui: informano, non chiamano. */
html body .header-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  align-items: center;
  margin: 0 26px 0 auto;
  padding: 0;
}
html body .header-legal a,
html body .header-legal button {
  padding: 0;
  color: rgba(11, 31, 58, .52);
  background: none;
  border: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--motion-premium);
}
html body .header-legal a:hover,
html body .header-legal button:hover { color: var(--pine-dark); }
html body .header-legal a:focus-visible,
html body .header-legal button:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 3px;
  border-radius: 4px;
}

/* La riga porta gia' lo spazio a sinistra: il bottone non deve spingere. */
html body .header-legal + .header-signin { margin-left: 0; }

/* Sotto i 900px in barra non ci sta piu' nulla: i link tornano in fondo,
   dove lo spazio c'e'. Sono gli stessi elementi, solo riposizionati. */
@media (max-width: 900px) {
  html body .header-legal {
    position: fixed;
    z-index: 45;
    right: 0;
    bottom: 0;
    left: 0;
    gap: 4px 16px;
    justify-content: center;
    margin: 0;
    padding: 10px 20px 14px;
  }
  html body .header-legal a,
  html body .header-legal button { font-size: 11px; }
  /* Il banner cookie occupa lo stesso angolo: la riga si toglie di mezzo. */
  html body:has(#cookie-banner.is-visible) .header-legal {
    opacity: 0;
    pointer-events: none;
  }
}

/* ==========================================================================  */
/* La home e' la schermata 1a e basta, con o senza account                      */
/* La Panoramica deve corrispondere al progetto: fondo bianco pieno, barra      */
/* piena col marchio a sinistra, titolo, pillola, suggerimenti. Niente velo     */
/* verde, niente topografia, niente riga d'informativa in mezzo alla barra.     */
/* ==========================================================================  */

/* Fondo bianco pieno: il velo verde e le curve si vedevano sotto la barra
   bianca e creavano una cucitura a 96px che nel progetto non c'e'. */
html:has(#analysis-step-location.is-active),
html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) {
  background-color: var(--white);
  background-image: none;
}

/* I link d'informativa lasciano la barra: nel progetto fra marchio e "Accedi"
   non c'e' nulla. Scendono in fondo alla pagina, in una riga centrata e
   tenue: Privacy, Cookie, Gestisci cookie, email. */
html body[data-session="guest"][data-active-view="analysis"]:has(#analysis-step-location.is-active) .header-legal {
  position: fixed;
  z-index: 45;
  right: 0;
  bottom: 0;
  left: 0;
  gap: 6px 22px;
  justify-content: center;
  margin: 0;
  padding: 0 24px 26px;
}
/* "How it works" non e' informativa: nella riga in fondo non ci va. Resta
   nella barra sulle altre viste da ospite. */
html body[data-session="guest"][data-active-view="analysis"]:has(#analysis-step-location.is-active) .header-legal [data-view-target="how-it-works"] {
  display: none;
}
/* Il banner cookie occupa lo stesso angolo: la riga si toglie di mezzo. */
html body[data-session="guest"][data-active-view="analysis"]:has(#analysis-step-location.is-active):has(#cookie-banner.is-visible) .header-legal {
  opacity: 0;
  pointer-events: none;
}
/* La barra e' una griglia a tre colonne: marchio | centro | coda. Tolta la
   riga d'informativa, che occupava il centro, la coda ci scivolava dentro e
   finiva in mezzo alla barra. Qui torna a destra, dove il progetto la mette. */
html body[data-session="guest"][data-active-view="analysis"]:has(#analysis-step-location.is-active) .app-header .header-guest-actions {
  grid-column: 3;
  justify-self: end;
}

/* Stessa riga in fondo su "How it works": senza account la barra resta
   marchio | "Accedi", e l'informativa vive in fondo alla pagina. */
html body[data-session="guest"][data-active-view="how-it-works"] .header-legal {
  position: fixed;
  z-index: 45;
  right: 0;
  bottom: 0;
  left: 0;
  gap: 6px 22px;
  justify-content: center;
  margin: 0;
  padding: 0 24px 26px;
}
html body[data-session="guest"][data-active-view="how-it-works"]:has(#cookie-banner.is-visible) .header-legal {
  opacity: 0;
  pointer-events: none;
}
html body[data-session="guest"][data-active-view="how-it-works"] .app-header .header-guest-actions {
  grid-column: 3;
  justify-self: end;
}

/* Stessa riga in fondo su Privacy e Cookie: sono le altre due viste pubbliche,
   e senza questa regola l'informativa restava appesa in mezzo alla barra.
   Geometria identica a panoramica e How it works, con tutti e cinque gli
   elementi: How it works, Privacy, Cookie, Gestisci cookie, email. */
html body[data-session="guest"][data-active-view="privacy"] .header-legal,
html body[data-session="guest"][data-active-view="cookie"] .header-legal {
  position: fixed;
  z-index: 45;
  right: 0;
  bottom: 0;
  left: 0;
  gap: 6px 22px;
  justify-content: center;
  margin: 0;
  padding: 0 24px 26px;
}
/* Il banner cookie occupa lo stesso angolo: la riga si toglie di mezzo. */
html body[data-session="guest"][data-active-view="privacy"]:has(#cookie-banner.is-visible) .header-legal,
html body[data-session="guest"][data-active-view="cookie"]:has(#cookie-banner.is-visible) .header-legal {
  opacity: 0;
  pointer-events: none;
}
html body[data-session="guest"][data-active-view="privacy"] .app-header .header-guest-actions,
html body[data-session="guest"][data-active-view="cookie"] .app-header .header-guest-actions {
  grid-column: 3;
  justify-self: end;
}
/* Il contenuto non deve finire sotto la riga fissa: la tabella privacy e il
   riquadro consenso arrivano fino in fondo. */
html body[data-session="guest"][data-active-view="privacy"] #view-privacy .how-it-works-layout,
html body[data-session="guest"][data-active-view="cookie"] #view-cookie .how-it-works-layout {
  padding-bottom: 76px;
}

/* --- Con account: la stessa riga in fondo, con gli stessi elementi --------
   Da ospite l'informativa e' .header-legal, spinta in fondo alla pagina in
   una riga centrata. Con account gli stessi link vivono in .sidebar-footer,
   che pero' li spingeva ai due bordi con un altro corpo. Qui la riga prende
   la forma dell'altra: stessa posizione, stesso passo, stesso grigio. */
html body .sidebar-footer {
  gap: 6px 22px;
  justify-content: center;
  padding: 0 24px 26px;
}
html body .sidebar-footer nav { gap: 6px 22px; }
html body .sidebar-footer a,
html body .sidebar-footer button,
html body .sidebar-footer > p,
html body .sidebar-footer > p a {
  color: rgba(11, 31, 58, .52);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  transition: color var(--motion-premium);
}
html body .sidebar-footer a:hover,
html body .sidebar-footer button:hover { color: var(--pine-dark); }
html body .sidebar-footer a:focus-visible,
html body .sidebar-footer button:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 900px) {
  html body .sidebar-footer {
    gap: 4px 16px;
    padding: 10px 20px 14px;
  }
  html body .sidebar-footer a,
  html body .sidebar-footer button,
  html body .sidebar-footer > p,
  html body .sidebar-footer > p a { font-size: 11px; }
}

/* --- La coda della barra: "Accedi" ----------------------------------------
   Da ospite in coda resta un bottone solo. Il "?" verso How it works non c'e'
   piu': su questa vista la porta e' la riga sotto la pillola, sulle altre il
   link nella riga d'informativa. */
html body .app-header .header-guest-actions {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  /* La coda e' un elemento della griglia: senza questo si allarga a tutta la
     colonna e il bottone resta appeso a sinistra invece che al bordo. */
  justify-self: end;
}
html body .app-header .header-guest-actions .header-signin { margin-left: 0; }

/* Sotto i 900px la barra teneva ancora 56px di fianco: la regola del progetto
   c'e', ma la vinceva un selettore piu' specifico del blocco sopra. Con "?" e
   "Accedi" in coda lo spazio non bastava piu' e il marchio arrivava a toccarli. */
@media (max-width: 900px) {
  html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-header,
  html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-header {
    padding: 0 20px;
  }
}

/* ==========================================================================
   Onboarding — «Onboarding ospite.dc.html»
   Misure, colori e pesi presi dal file di design, non dedotti: shell ospite
   (marchio e «Accedi» in alto, niente rail), stepper orizzontale, colonna
   centrata, azioni in fondo. Il design disegna a 1440x900: qui le misure
   fisse restano tali e solo il titolo e i margini di pagina si adattano.
   Ultimo blocco del file: vince sull'ordine a parita' di specificita'.
   ========================================================================== */

html body .onboarding-dialog {
  /* Il verde del design non e' lo smeraldo del marchio: e' piu' spento e
     vale solo qui. Il resto arriva dalle variabili di progetto. */
  --onb-accent: #3D9A63;
  --onb-accent-hover: #2F7D4F;
  --onb-field-line: #DDE1E8;
  --onb-panel: #F7F9FA;
  --onb-card-shadow: 0 2px 4px rgba(11, 31, 58, .04), 0 18px 44px rgba(11, 31, 58, .09);
  --onb-summary-shadow: 0 1px 2px rgba(11, 31, 58, .04), 0 8px 20px rgba(11, 31, 58, .05);
  --onb-focus-ring: 0 0 0 4px rgba(61, 154, 99, .10);
  --onb-topbar: 96px;
}

/* Fondo bianco pieno: l'alone verde della versione precedente non e' nel
   design e toglieva contrasto alla barra dei passi. */
html body:has(#onboarding-dialog[open]),
html body.has-required-onboarding {
  color: var(--navy);
  background: #FFFFFF;
  color-scheme: light;
}
html body .onboarding-dialog,
html body .onboarding-dialog.onboarding-fullscreen {
  color: var(--navy);
  color-scheme: light;
}
html body .onboarding-dialog .onboarding-shell { background: #FFFFFF; }

/* ---- Barra superiore: marchio a sinistra, «Accedi» a destra -------------- */
html body .onboarding-dialog .onboarding-topbar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 4;
  display: flex;
  box-sizing: border-box;
  height: var(--onb-topbar);
  padding: 0 56px;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: 0;
  box-shadow: none;
}
html body #onboarding-dialog .onboarding-topbar .onboarding-home {
  position: static;
  /* Stesso gap del marchio in header, o il nome slitta all'apertura. */
  gap: 10px;
  /* La barra del dialog ha gia' il gutter dell'header: il padding del marchio
     lo sommerebbe e il logo salterebbe a destra all'apertura di «Accedi». */
  padding: 0;
}
/* Il marchio tiene la geometria dell'header, o salta all'apertura del dialog. */
html body #onboarding-dialog .onboarding-home .brand-mark {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
}

@media (max-width: 560px) {
  html body #onboarding-dialog .onboarding-home .brand-mark { flex-basis: 28px; width: 28px; height: 28px; }
}

/* Sotto i 900px l'header passa a 20px di gutter: la barra del dialog lo segue,
   altrimenti il marchio si sposta quando si apre «Accedi». */
@media (max-width: 900px) {
  html body .onboarding-dialog .onboarding-topbar { padding: 0 20px; }
}
html body .onboarding-dialog .onboarding-topbar-tail {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
html body .onboarding-dialog .onboarding-topbar-email {
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
}
html body .onboarding-dialog .onboarding-signin {
  display: inline-flex;
  box-sizing: border-box;
  height: 44px;
  padding: 0 22px;
  align-items: center;
  color: var(--navy);
  background: #FFFFFF;
  border: 1px solid var(--onb-field-line);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: color var(--motion-premium), border-color var(--motion-premium);
}
html body .onboarding-dialog .onboarding-signin:hover {
  color: var(--onb-accent-hover);
  border-color: var(--onb-accent);
}
html body .onboarding-dialog .onboarding-topbar .is-hidden { display: none; }

/* ---- Impianto: colonna centrata sotto la barra --------------------------- */
html body .onboarding-dialog .onboarding-layout {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-height: 100dvh;
  padding: 0;
  overflow: visible;
  flex-direction: column;
}
html body .onboarding-dialog .onboarding-main {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 100dvh;
  margin: 0;
  padding: calc(var(--onb-topbar) + 28px) clamp(20px, 4.4vw, 64px) 64px;
  overflow: visible;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}
html body .onboarding-dialog .onboarding-content {
  display: flex;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: visible;
  flex: none;
  flex-direction: column;
  align-items: center;
}

/* ---- I passi numerati non si mostrano: il markup resta perche' il JS ci
   segna il passo corrente. --------------------------------------------- */
html body .onboarding-dialog .onboarding-stepper {
  display: none;
}
/* Senza stepper la colonna resterebbe appesa in alto: nel solo accesso
   titolo, scheda e azioni si centrano fra barra e fondo schermo. */
html body .onboarding-dialog[data-auth-only] .onboarding-main {
  padding-top: var(--onb-topbar);
  padding-bottom: var(--onb-topbar);
  justify-content: center;
}
html body .onboarding-dialog[data-auth-only] .onboarding-actions {
  margin-top: 36px;
  padding-top: 0;
}
html body .onboarding-dialog .onboarding-progress {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  align-items: center;
  list-style: none;
}
html body .onboarding-dialog .onboarding-progress li {
  display: flex;
  min-height: 0;
  margin: 0;
  padding: 0;
  gap: 0;
  align-items: center;
  background: none;
  border: 0;
}
html body .onboarding-dialog .onboarding-progress li[hidden] { display: none; }
/* Le etichette restano per chi legge con lo screen reader, non a schermo. */
html body .onboarding-dialog .onboarding-progress li > span:not(.onboarding-step-number) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Da fare: tondo vuoto con il filo di contorno. */
html body .onboarding-dialog .onboarding-step-number,
html body .onboarding-dialog .onboarding-progress li:not(.is-active):not(.is-complete) .onboarding-step-number {
  display: grid;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--grey-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
/* Corrente: pieno blu notte. */
html body .onboarding-dialog .onboarding-progress li.is-active .onboarding-step-number {
  color: #FFFFFF;
  background: var(--navy);
  border-color: var(--navy);
  font-weight: 650;
}
/* Fatto: spunta smeraldo su velo chiaro, senza contorno. */
html body .onboarding-dialog .onboarding-progress li.is-complete .onboarding-step-number {
  color: var(--emerald-dark);
  background: var(--emerald-soft);
  border-color: transparent;
}
html body .onboarding-dialog .onboarding-step-number > svg { display: none; }
html body .onboarding-dialog .onboarding-progress li.is-complete .onboarding-step-number > b { display: none; }
html body .onboarding-dialog .onboarding-progress li.is-complete .onboarding-step-number > svg {
  display: block;
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}
/* Il filo resta neutro anche dopo i passi fatti: il colore sta nei tondi. */
html body .onboarding-dialog .onboarding-progress li:not(:last-child)::after { content: none; }
html body .onboarding-dialog .onboarding-progress li:not([hidden]):has(~ li:not([hidden]))::after {
  /* app.css lo teneva in position:absolute per il rail verticale: qui il filo
     e' un elemento flex in riga, altrimenti i tondi si toccano. */
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 28px;
  height: 1px;
  margin: 0 4.5px;
  background: var(--line);
}
/* A sette passi il filo si accorcia, come nel design. */
html body .onboarding-dialog .onboarding-progress:has(li[data-onboarding-target="7"]:not([hidden])) li:not([hidden]):has(~ li:not([hidden]))::after {
  width: 20px;
}

/* ---- Intestazione ------------------------------------------------------- */
html body .onboarding-dialog .onboarding-heading {
  display: flex;
  max-width: none;
  margin: 30px 0 0;
  gap: 14px;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
html body .onboarding-dialog .onboarding-heading .section-code {
  margin: 0;
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
}
html body .onboarding-dialog .onboarding-heading h2 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(36px, 4.17vw, 60px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.038em;
  text-align: center;
}
html body .onboarding-dialog .onboarding-heading h2 em,
html body .onboarding-dialog .onboarding-success h2 em {
  color: var(--onb-accent);
  font-style: normal;
  font-weight: 500;
}
html body .onboarding-dialog .onboarding-heading h2:focus-visible { outline: 0; }
html body .onboarding-dialog .onboarding-heading > p:last-child {
  max-width: 58ch;
  margin: 0;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ---- La card: 900px, angoli da 20 --------------------------------------- */
html body .onboarding-dialog .onboarding-panels {
  width: min(900px, 100%);
  max-width: none;
  min-height: 0;
  margin: 40px 0 0;
}
html body .onboarding-dialog[data-onboarding-step="4"] .onboarding-panels { margin-top: 24px; }
html body .onboarding-dialog[data-onboarding-step="5"] .onboarding-panels,
html body .onboarding-dialog[data-onboarding-step="6"] .onboarding-panels { margin-top: 36px; }
html body .onboarding-dialog[data-onboarding-step="7"] .onboarding-panels { width: min(620px, 100%); }
html body .onboarding-dialog .onboarding-panel {
  box-sizing: border-box;
  padding: 30px 32px 32px;
  background: #FFFFFF;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  box-shadow: var(--onb-card-shadow);
}
html body .onboarding-dialog .onboarding-panel[hidden] { display: none; }
html body .onboarding-dialog .onboarding-fields {
  display: flex;
  gap: 24px;
  flex-direction: column;
}
html body .onboarding-dialog .onboarding-section-provider .onboarding-fields,
html body .onboarding-dialog .onboarding-section-ai .onboarding-fields { gap: 22px; }
html body .onboarding-dialog .onboarding-feedback {
  width: min(900px, 100%);
  margin: 20px 0 0;
}

/* ---- Campi -------------------------------------------------------------- */
html body .onboarding-dialog .onboarding-form-field {
  display: flex;
  gap: 9px;
  padding: 0;
  flex-direction: column;
  background: transparent;
  border: 0;
}
html body .onboarding-dialog .onboarding-form-field[hidden] { display: none; }
html body .onboarding-dialog .onboarding-form-field > label {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}
html body .onboarding-dialog .onboarding-form-field :is(input:not([type="checkbox"]):not([type="radio"]):not(.model-picker-search), textarea, select) {
  box-sizing: border-box;
  width: 100%;
  height: 54px;
  padding: 0 18px;
  color: var(--navy);
  background: #FFFFFF;
  border: 1px solid var(--onb-field-line);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  box-shadow: none;
  -webkit-text-fill-color: currentColor;
}
html body .onboarding-dialog .onboarding-form-field :is(input, textarea, select):focus {
  border: 1.5px solid var(--onb-accent);
  box-shadow: var(--onb-focus-ring);
  outline: 0;
}
html body .onboarding-dialog .onboarding-form-field :is(input, textarea)::placeholder {
  color: var(--placeholder);
  -webkit-text-fill-color: var(--placeholder);
}
html body .onboarding-dialog .onboarding-form-field textarea {
  height: auto;
  min-height: 130px;
  padding: 16px 18px;
  line-height: 1.55;
  resize: vertical;
  text-wrap: pretty;
}
html body .onboarding-dialog .onboarding-form-field small {
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
}
html body .onboarding-dialog .field-counter {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
}
html body .onboarding-dialog .field-counter small { color: var(--grey); }
html body .onboarding-dialog .field-counter output {
  color: var(--grey-soft);
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1;
}
html body .onboarding-dialog .field-error {
  margin: 0;
  color: #C2453B;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.4;
}
html body .onboarding-dialog .password-field { position: relative; }
html body .onboarding-dialog .onboarding-form-field .password-field > input { padding-right: 46px; }

/* ---- La pastiglia con l'esito della chiave, dentro il campo ------------- */
html body .onboarding-dialog .onboarding-key-control { position: relative; }
html body .onboarding-dialog .onboarding-key-control > input { padding-right: 168px; }
html body .onboarding-dialog .onboarding-key-state {
  position: absolute;
  top: 50%;
  right: 12px;
  display: inline-flex;
  box-sizing: border-box;
  height: 26px;
  padding: 0 11px;
  gap: 7px;
  align-items: center;
  color: var(--emerald-dark);
  background: var(--emerald-soft);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  transform: translateY(-50%);
}
html body .onboarding-dialog .onboarding-key-state.is-checking {
  color: var(--grey);
  background: var(--paper-3);
}
html body .onboarding-dialog .onboarding-key-state.is-hidden { display: none; }
html body .onboarding-dialog .onboarding-key-state .ui-icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.8;
}

/* ---- Card di scelta ----------------------------------------------------- */
html body .onboarding-dialog .geo-provider-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
html body .onboarding-dialog .geo-provider-options {
  display: flex;
  gap: 16px;
  align-items: stretch;
}
html body .onboarding-dialog .geo-provider-card {
  display: flex;
  box-sizing: border-box;
  min-height: 0;
  padding: 18px 20px;
  gap: 16px;
  flex: 1 1 0;
  align-items: center;
  align-self: stretch;
  background: #FFFFFF;
  border: 1px solid var(--onb-field-line);
  border-radius: 14px;
  box-shadow: none;
}
html body .onboarding-dialog .onboarding-section-ai .geo-provider-card {
  gap: 14px;
  align-items: flex-start;
}
html body .onboarding-dialog .geo-provider-card:hover { border-color: var(--emerald-border); }
html body .onboarding-dialog .geo-provider-card:has(input:checked) {
  background: #FFFFFF;
  border: 1.5px solid var(--onb-accent);
  box-shadow: none;
}
html body .onboarding-dialog .geo-provider-icon,
html body .onboarding-dialog .geo-provider-icon.is-google {
  display: grid;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: none;
  color: #4285F4;
  background: var(--paper-3);
  border: 0;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}
html body .onboarding-dialog .onboarding-section-ai .geo-provider-icon {
  width: 38px;
  height: 38px;
}
html body .onboarding-dialog .geo-provider-icon .ui-icon {
  width: 19px;
  height: 19px;
}
/* La scintilla di Gemini e' piena. */
html body .onboarding-dialog .onboarding-choice-gemini .geo-provider-icon .ui-icon {
  fill: #4285F4;
  stroke: none;
}
html body .onboarding-dialog .geo-provider-copy { flex: 1 1 auto; }
html body .onboarding-dialog .geo-provider-title {
  display: flex;
  gap: 10px;
  align-items: center;
}
html body .onboarding-dialog .geo-provider-title strong {
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
}
html body .onboarding-dialog .onboarding-section-ai .geo-provider-title strong { font-size: 17px; }
html body .onboarding-dialog .geo-provider-title b,
html body .onboarding-dialog .geo-provider-card:not(:has(input:checked)) .geo-provider-title b {
  display: inline-flex;
  box-sizing: border-box;
  height: 22px;
  padding: 0 9px;
  align-items: center;
  color: var(--emerald-dark);
  background: var(--emerald-soft);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}
html body .onboarding-dialog .geo-provider-copy small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}
html body .onboarding-dialog .onboarding-section-ai .geo-provider-copy small {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.4;
}
html body .onboarding-dialog .geo-provider-check {
  display: grid;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  place-items: center;
  flex: none;
  color: transparent;
  background: #FFFFFF;
  border: 1.5px solid var(--onb-field-line);
  border-radius: 999px;
}
html body .onboarding-dialog .onboarding-section-ai .geo-provider-check {
  width: 22px;
  height: 22px;
}
html body .onboarding-dialog .geo-provider-card:has(input:checked) .geo-provider-check {
  color: #FFFFFF;
  background: var(--onb-accent);
  border-color: var(--onb-accent);
}
html body .onboarding-dialog .geo-provider-check .ui-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.6;
}
html body .onboarding-dialog .onboarding-section-ai .geo-provider-check .ui-icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.8;
}

/* ---- 2. Google Maps: chiave a sinistra, istruzioni a destra ------------- */
html body .onboarding-dialog .google-onboarding-key {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
html body .onboarding-dialog .google-onboarding-key.is-hidden { display: none; }
html body .onboarding-dialog .google-onboarding-key > .onboarding-form-field { flex: 1 1 auto; min-width: 0; }
html body .onboarding-dialog .google-onboarding-key > [data-setup-guide] { flex: none; width: 320px; }
html body .onboarding-dialog .setup-guide-panel {
  display: flex;
  gap: 12px;
  padding: 18px 20px;
  flex-direction: column;
  background: var(--onb-panel);
  border: 0;
  border-radius: 14px;
}
html body .onboarding-dialog .setup-guide-kicker {
  margin: 0;
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
}
html body .onboarding-dialog .setup-guide-panel .setup-guide-steps {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  flex-direction: column;
  list-style: none;
}
html body .onboarding-dialog .setup-guide-panel .setup-guide-steps li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 0;
  background: none;
  border: 0;
}
html body .onboarding-dialog .setup-guide-panel .setup-guide-steps li > span {
  display: grid;
  box-sizing: border-box;
  width: 19px;
  height: 19px;
  place-items: center;
  flex: none;
  color: var(--muted);
  background: #FFFFFF;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
}
html body .onboarding-dialog .setup-guide-panel .setup-guide-steps p {
  margin: 0;
  color: var(--muted-strong);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
}
html body .onboarding-dialog .setup-guide-panel .setup-guide-steps a {
  color: var(--emerald-dark);
  text-decoration: none;
}
html body .onboarding-dialog .setup-guide-panel .setup-guide-steps a:hover { color: var(--emerald-darker); }

/* ---- 3. Modello AI: chiave e modello in riga, sotto piano e guida ------- */
/* Due righe invece di una colonna: chiave, modello e piano impilati
   accanto alla guida facevano scorrere la pagina. */
html body .onboarding-dialog #onboarding-gemini-fields {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
html body .onboarding-dialog #onboarding-gemini-fields > .onboarding-form-field { flex: 1 1 0; min-width: 0; }
html body .onboarding-dialog .gemini-onboarding-plan {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
html body .onboarding-dialog .gemini-onboarding-plan .setup-guide-panel {
  flex: none;
  width: 320px;
}
html body .onboarding-dialog .onboarding-plan-field {
  min-width: 0;
  margin: 0;
  flex: 1 1 auto;
}
html body .onboarding-dialog .onboarding-plan-field > legend {
  margin: 0 0 9px;
  padding: 0;
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
html body .onboarding-dialog .onboarding-plan-options {
  display: flex;
  gap: 10px;
  flex-direction: column;
}
/* Le card di scelta hanno `flex: 1 1 0` e `min-height: 0`: in una colonna
   si schiacciavano all'altezza del padding e il testo usciva dai bordi. */
html body .onboarding-dialog .onboarding-section-ai .onboarding-plan-card {
  min-height: 0;
  padding: 13px 16px;
  flex: none;
  align-items: center;
  cursor: pointer;
}
html body .onboarding-dialog .onboarding-plan-card .geo-provider-title strong {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}
html body .onboarding-dialog .onboarding-section-ai .onboarding-plan-card .geo-provider-copy small { margin-top: 3px; }
/* Il gratuito si puo' scegliere, ma si vede che e' una prova: badge ambra
   sempre, e bordo e spunta ambra quando e' la scelta. */
html body .onboarding-dialog .onboarding-plan-card.is-free .geo-provider-title b,
html body .onboarding-dialog .onboarding-plan-card.is-free:not(:has(input:checked)) .geo-provider-title b {
  color: #8A5A12;
  background: #FFF1D6;
}
html body .onboarding-dialog .onboarding-plan-card.is-free:has(input:checked) {
  background: #FFFBF2;
  border-color: #E0A53A;
}
html body .onboarding-dialog .onboarding-plan-card.is-free:has(input:checked) .geo-provider-check {
  background: #E0A53A;
  border-color: #E0A53A;
}
html body .onboarding-dialog .onboarding-ai-fields.is-hidden { display: none; }
html body .onboarding-dialog .model-catalog-control {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
html body .onboarding-dialog .onboarding-form-field .model-picker { flex: 1 1 auto; min-width: 0; }
html body .onboarding-dialog .onboarding-form-field .model-picker-trigger,
html body .onboarding-dialog .onboarding-form-field .model-picker-trigger:disabled,
html body .onboarding-dialog .onboarding-form-field .model-picker-trigger:hover:not(:disabled) {
  box-sizing: border-box;
  width: 100%;
  height: 54px;
  min-height: 54px;
  padding: 0 18px;
  color: var(--navy);
  background: #FFFFFF;
  border: 1px solid var(--onb-field-line);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  box-shadow: none;
}
html body .onboarding-dialog .onboarding-form-field .model-picker-trigger:disabled { color: var(--grey); }
html body .onboarding-dialog .onboarding-form-field .model-picker-trigger > .ui-icon {
  width: 16px;
  height: 16px;
  color: var(--grey);
  stroke-width: 2;
}
html body .onboarding-dialog .onboarding-form-field .model-catalog-control .button-secondary {
  display: inline-flex;
  box-sizing: border-box;
  height: 54px;
  min-height: 54px;
  padding: 0 18px;
  flex: none;
  align-items: center;
  color: var(--navy);
  background: #FFFFFF;
  border: 1px solid var(--onb-field-line);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
}
html body .onboarding-dialog .onboarding-form-field .model-catalog-control .button-secondary:hover:not(:disabled) {
  color: var(--onb-accent-hover);
  border-color: var(--onb-accent);
}

/* ---- 4. Criteri --------------------------------------------------------- */
html body .onboarding-dialog .onboarding-section-rubric { padding: 20px 30px 22px; }
html body .onboarding-dialog .onboarding-rubric {
  display: flex;
  gap: 14px;
  flex-direction: column;
}
html body .onboarding-dialog .onboarding-rubric-status {
  display: flex;
  gap: 14px;
  padding: 12px 16px;
  align-items: center;
  background: var(--paper-3);
  border: 0;
  border-radius: 12px;
}
html body .onboarding-dialog .onboarding-rubric-status[hidden] { display: none; }
html body .onboarding-dialog .onboarding-rubric-status.is-ready { background: var(--emerald-soft); }
html body .onboarding-dialog .onboarding-rubric-status.is-error { background: #FCF0EE; }
html body .onboarding-dialog .onboarding-rubric-status-body {
  display: flex;
  gap: 14px;
  flex: 1 1 auto;
  align-items: center;
}
html body .onboarding-dialog .onboarding-rubric-status strong {
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
html body .onboarding-dialog .onboarding-rubric-status p {
  margin: 2px 0 0;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.4;
}

html body .onboarding-dialog .onboarding-rubric-spinner {
  width: 20px;
  height: 20px;
  flex: none;
  border: 2px solid var(--line);
  border-top-color: var(--onb-accent);
  border-radius: 999px;
  animation: spin 720ms linear infinite;
}
html body .onboarding-dialog #onboarding-rubric-retry {
  display: inline-flex;
  box-sizing: border-box;
  height: 36px;
  padding: 0 16px;
  flex: none;
  align-items: center;
  color: var(--emerald-dark);
  background: #FFFFFF;
  border: 1px solid var(--emerald-border);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
}
html body .onboarding-dialog #onboarding-rubric-retry:hover:not(:disabled) {
  color: var(--onb-accent-hover);
  border-color: var(--onb-accent);
}
html body .onboarding-dialog #onboarding-rubric-retry.is-hidden { display: none; }

html body .onboarding-dialog .onboarding-rubric .weight-definitions {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  flex-direction: column;
  grid-template-columns: none;
}
html body .onboarding-dialog .onboarding-rubric .weight-definitions > div {
  position: relative;
  display: block;
  padding: 13px 154px 13px 4px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--paper-3);
  border-radius: 0;
}
html body .onboarding-dialog .onboarding-rubric dt {
  display: block;
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-transform: none;
}
html body .onboarding-dialog .onboarding-rubric dd {
  margin: 5px 0 0;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  text-wrap: pretty;
}
/* Peso e barretta occupano la colonna di destra, allineati in alto. */
html body .onboarding-dialog .onboarding-rubric dt b {
  position: absolute;
  top: 13px;
  right: 4px;
  width: 130px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  text-align: right;
}
html body .onboarding-dialog .onboarding-rubric dt b > i {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 8px;
  overflow: hidden;
  background: var(--line-soft);
  border-radius: 999px;
}
html body .onboarding-dialog .onboarding-rubric dt b > i::before {
  content: "";
  display: block;
  width: var(--peso, 0%);
  height: 100%;
  background: var(--onb-accent);
  border-radius: 999px;
}
html body .onboarding-dialog #onboarding-rubric-list.is-skeleton dt b {
  width: 130px;
  height: 24px;
  background: var(--paper-3);
  border-radius: 6px;
}
html body .onboarding-dialog #onboarding-rubric-list.is-skeleton i {
  display: block;
  height: 11px;
  background: var(--paper-3);
  border-radius: 999px;
}
html body .onboarding-dialog #onboarding-rubric-list.is-skeleton dd i + i { width: 62%; margin-top: 6px; }

/* ---- 5. Riepilogo: card senza cornice attorno --------------------------- */
html body .onboarding-dialog .onboarding-section-summary {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
html body .onboarding-dialog .onboarding-summary {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
html body .onboarding-dialog .onboarding-summary-card {
  box-sizing: border-box;
  padding: 22px;
  background: #FFFFFF;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  box-shadow: var(--onb-summary-shadow);
}
html body .onboarding-dialog .onboarding-summary-card.is-wide { grid-column: 1 / -1; }
html body .onboarding-dialog .onboarding-summary-card header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0;
  border: 0;
}
html body .onboarding-dialog .onboarding-summary-card header span {
  display: block;
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
}
html body .onboarding-dialog .onboarding-summary-card header strong {
  display: block;
  margin-top: 8px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.015em;
}
html body .onboarding-dialog .onboarding-summary-card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  border: 0;
  text-wrap: pretty;
}
html body .onboarding-dialog .onboarding-summary-card small {
  display: block;
  margin-top: 6px;
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  border: 0;
}
html body .onboarding-dialog .onboarding-summary-card .text-button {
  flex: none;
  padding: 0;
  color: var(--emerald-dark);
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
html body .onboarding-dialog .onboarding-summary-card .text-button:hover { color: var(--emerald-darker); }

/* ---- 6. Account: modulo a sinistra, Google e rimandi a destra ----------- */
html body .onboarding-dialog .onboarding-section-account {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
html body .onboarding-dialog .onboarding-section-account[hidden] { display: none; }
html body .onboarding-dialog .onboarding-section-account .onboarding-fields {
  gap: 18px;
  flex: 1 1 auto;
  min-width: 0;
}
html body .onboarding-dialog .onboarding-section-account .onboarding-form-field :is(input, .password-field > input) {
  height: 52px;
}
html body .onboarding-dialog .onboarding-auth-side {
  display: flex;
  gap: 20px;
  flex: none;
  width: 300px;
  flex-direction: column;
}
html body .onboarding-dialog .onboarding-auth-alt {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  flex-direction: column;
  border: 0;
}
html body .onboarding-dialog .onboarding-auth-alt[hidden] { display: none; }
html body .onboarding-dialog .onboarding-auth-divider {
  display: flex;
  gap: 14px;
  margin: 0;
  align-items: center;
  color: var(--grey-soft);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1;
}
html body .onboarding-dialog .onboarding-auth-divider::before,
html body .onboarding-dialog .onboarding-auth-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line-soft);
}
html body .onboarding-dialog .onboarding-auth-divider > span { padding: 0; background: none; }
html body .onboarding-dialog #auth-google {
  display: inline-flex;
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  min-height: 52px;
  padding: 0 18px;
  gap: 12px;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  background: #FFFFFF;
  border: 1px solid var(--onb-field-line);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
}
html body .onboarding-dialog #auth-google:hover { border-color: var(--onb-accent); }
html body .onboarding-dialog #auth-google.is-disabled { opacity: .5; pointer-events: none; }
html body .onboarding-dialog .auth-google-mark { width: 18px; height: 18px; flex: none; }
html body .onboarding-dialog .onboarding-auth-note {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 16px 18px;
  flex-direction: column;
  color: var(--muted);
  background: var(--onb-panel);
  border: 0;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  text-wrap: pretty;
}
html body .onboarding-dialog .onboarding-auth-note b {
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
}
html body .onboarding-dialog .onboarding-auth-switch {
  display: flex;
  gap: 5px;
  margin: 0;
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
}
html body .onboarding-dialog .onboarding-auth-switch[hidden] { display: none; }
html body .onboarding-dialog .onboarding-auth-switch + .onboarding-auth-switch { margin-top: -14px; }
html body .onboarding-dialog .onboarding-auth-switch .text-button {
  padding: 0;
  color: var(--emerald-dark);
  background: none;
  border: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
}
html body .onboarding-dialog .onboarding-auth-switch .text-button:hover {
  color: var(--emerald-darker);
  text-decoration: underline;
}
html body .onboarding-dialog .onboarding-google-hint {
  margin: 0;
  color: #C2453B;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.45;
}
html body .onboarding-dialog .onboarding-form-field .privacy-check {
  display: flex;
  gap: 12px;
  padding: 0;
  align-items: flex-start;
  background: transparent;
  border: 0;
}
html body .onboarding-dialog .onboarding-form-field .privacy-check span {
  display: block;
  min-height: 0;
  color: var(--muted-strong);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 400;
  /* Alta quanto la casella, non 1.45 (19.575px): la riga di testo e la
     casella partono entrambe dall'alto, quindi se le due casse non sono
     uguali il quadratino si legge 1px piu' in basso del testo. A 20px i
     centri coincidono, e su due righe il passo resta quello di prima. */
  line-height: 20px;
}
html body .onboarding-dialog .onboarding-form-field .privacy-check a { color: var(--emerald-dark); }
/* Il blocco precedente fissa la casella con !important: qui serve la stessa arma. */
html body .onboarding-dialog .onboarding-form-field .privacy-check input[type="checkbox"] {
  width: 20px !important;
  min-width: 20px;
  height: 20px !important;
  min-height: 20px !important;
  /* Niente scarto: la cassa del testo e' alta quanto la casella. Il blocco
     precedente la centrava sull'intera riga (`align-self: center`), che con
     due righe di testo la portava a mezz'aria invece che sulla prima. */
  margin: 0 !important;
  align-self: flex-start;
  flex: none;
  background-color: #FFFFFF !important;
  background-image: none;
  border: 1.5px solid var(--onb-field-line) !important;
  border-radius: 6px !important;
}
html body .onboarding-dialog .onboarding-form-field .privacy-check input[type="checkbox"]:checked {
  background-color: var(--onb-accent) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
  border-color: var(--onb-accent) !important;
}

/* ---- 7. Il codice: sei caselle da 62x66 --------------------------------- */
html body .onboarding-dialog .onboarding-section-code { padding: 32px; }
html body .onboarding-dialog .onboarding-section-code .onboarding-fields {
  gap: 20px;
  align-items: center;
}
html body .onboarding-dialog #auth-code-field {
  gap: 20px;
  align-items: center;
  width: 100%;
}
html body .onboarding-dialog #auth-code-field > label { text-align: center; }
html body .onboarding-dialog #auth-code-field small { text-align: center; }
html body .onboarding-dialog .auth-code-control {
  position: relative;
  height: 66px;
}
html body .onboarding-dialog .auth-code-boxes {
  display: flex;
  gap: 12px;
}
html body .onboarding-dialog .auth-code-boxes > i {
  display: grid;
  box-sizing: border-box;
  width: 62px;
  height: 66px;
  place-items: center;
  background: #FFFFFF;
  border: 1px solid var(--onb-field-line);
  border-radius: 14px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}
/* Le caselle ancora vuote mostrano uno zero spento. */
html body .onboarding-dialog .auth-code-boxes > i.is-empty { color: var(--onb-field-line); }
html body .onboarding-dialog #auth-code-field:focus-within .auth-code-boxes > i.is-caret {
  border: 2px solid var(--onb-accent);
  box-shadow: var(--onb-focus-ring);
}
/* Codice sbagliato: il rosso va sulle caselle, non sul campo nascosto. */
html body .onboarding-dialog #auth-code-field.is-invalid .auth-code-boxes > i {
  border-color: var(--danger);
}
/* Il campo vero copre le caselle: e' lui a prendere fuoco e tastiera. Deve
   restare invisibile, altrimenti il suo bordo diventa un unico rettangolo
   attorno alle sei caselle. Le regole generiche dei campi onboarding usano
   `!important` su fondo, bordo e altezza: qui servono altrettanti. */
html body .onboarding-dialog .onboarding-form-field #auth-code {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  color: transparent !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 14px !important;
  caret-color: transparent;
  box-shadow: none !important;
  font-size: 16px !important;
  letter-spacing: 0;
  -webkit-text-fill-color: transparent !important;
}
html body .onboarding-dialog .onboarding-form-field #auth-code:focus {
  border: 0;
  box-shadow: none;
  outline: 0;
}
html body .onboarding-dialog .onboarding-form-field #auth-code::selection { background: transparent; }
html body .onboarding-dialog .onboarding-section-code .onboarding-auth-switch {
  gap: 5px;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
}
html body .onboarding-dialog .onboarding-section-code .onboarding-auth-switch .text-button {
  color: var(--emerald-dark);
  font-size: 13px;
  line-height: 1;
}

/* ---- Azioni: in fondo alla pagina, al centro ---------------------------- */
html body .onboarding-dialog .onboarding-actions {
  display: flex;
  width: 100%;
  max-width: none;
  margin: 40px 0 0;
  padding: 0;
  gap: 14px;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: 0;
}
/* La nota sta sopra i bottoni, come nel design del passo 1. */
html body .onboarding-dialog .onboarding-actions > p {
  position: static;
  order: 0;
  max-width: 60ch;
  min-height: 0;
  margin: 0;
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
  transform: none;
}
html body .onboarding-dialog .onboarding-actions > p:empty { display: none; }
html body .onboarding-dialog .onboarding-actions .action-row {
  display: flex;
  width: auto;
  gap: 16px;
  align-items: center;
  justify-content: center;
}
html body .onboarding-dialog .onboarding-actions .button.platform-action-primary {
  display: inline-flex;
  box-sizing: border-box;
  height: 56px;
  min-height: 56px;
  /* Il tondo e' incassato di 10px sopra e sotto: (56 - 36) / 2. A destra
     serve lo stesso valore, altrimenti non e' concentrico con la calotta
     della pillola e si legge spostato dentro. */
  padding: 0 10px 0 30px;
  gap: 14px;
  align-items: center;
  /* La scritta cambia a ogni passo ("Continua", "Crea l'account", "Un
     attimo...") e il bottone saltava di larghezza sotto le dita. Con una
     misura minima e il tondo ancorato a destra la pillola resta ferma. */
  min-width: 216px;
  max-width: 100%;
  color: #FFFFFF;
  background: var(--onb-accent);
  border: 0;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: none;
  transition: background var(--motion-premium), opacity var(--motion-premium);
}
html body .onboarding-dialog .onboarding-actions .button.platform-action-primary:hover:not(:disabled) {
  background: var(--onb-accent-hover);
}
/* Agli ultimi passi la pillola e' #company-profile-save («Crea l'account»,
   «Inizia con Vaglio»), e app.css la fissa a 168px con un selettore a ID,
   che batte la misura qui sopra: 30 + scritta + 14 + tondo + 10 non ci
   stavano, e il tondo usciva dalla calotta destra. */
html body .onboarding-dialog:not([data-auth-only]) .onboarding-actions #company-profile-save.platform-action-primary {
  width: auto;
  min-width: 216px;
}
html body .onboarding-dialog .onboarding-actions .button.platform-action-primary:disabled,
html body .onboarding-dialog #onboarding-next.platform-action-primary:disabled,
html body .onboarding-dialog #company-profile-save.platform-action-primary:disabled {
  color: #FFFFFF;
  background: var(--onb-accent);
  border: 0;
  opacity: .5;
  cursor: not-allowed;
}
html body .onboarding-dialog .onboarding-actions .button.platform-action-primary > .ui-icon {
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  padding: 9.5px;
  flex: none;
  /* Ancorato alla calotta destra: con la misura minima qui sopra lo spazio
     in piu' finisce fra scritta e tondo, non dopo il tondo. */
  margin-left: auto;
  color: #FFFFFF;
  /* Al 18% su questo verde il disco spariva: si vedeva una macchia, non un
     elemento. Al 24% si stacca senza diventare un secondo bottone. */
  background: rgba(255, 255, 255, .24);
  border-radius: 999px;
  stroke-width: 2.1;
  transition: background var(--motion-premium);
}
html body .onboarding-dialog .onboarding-actions .button.platform-action-primary:hover:not(:disabled) > .ui-icon {
  background: rgba(255, 255, 255, .32);
}

/* app.css disegna il fuoco con un verde al 28% di opacita': su un bottone
   gia' verde e' verde su verde e non si vede. Qui l'anello e' pieno e
   staccato dalla pillola da un filo di fondo. */
html body .onboarding-dialog .onboarding-actions .button.platform-action:focus-visible {
  outline: 2px solid var(--onb-accent-hover);
  outline-offset: 3px;
}
html body .onboarding-dialog .onboarding-actions .button.platform-action-secondary,
html body .onboarding-dialog #onboarding-back.platform-action-secondary,
html body .onboarding-dialog #company-profile-cancel.platform-action-secondary {
  display: inline-flex;
  box-sizing: border-box;
  height: 56px;
  min-height: 56px;
  padding: 0 24px;
  align-items: center;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  box-shadow: none;
}
html body .onboarding-dialog .onboarding-actions .button.platform-action-secondary:hover:not(:disabled) {
  color: var(--navy);
  background: transparent;
}
html body .onboarding-dialog #onboarding-back .ui-icon { display: none; }
html body .onboarding-dialog .onboarding-actions .is-hidden { display: none; }

/* ---- Configurazione completata ----------------------------------------- */
html body .onboarding-dialog[data-onboarding-step="success"] .onboarding-stepper,
html body .onboarding-dialog[data-onboarding-step="success"] .onboarding-topbar-tail {
  display: none;
}
html body .onboarding-dialog[data-onboarding-step="success"] .onboarding-main {
  padding: var(--onb-topbar) clamp(20px, 4.4vw, 64px) 96px;
  justify-content: center;
}
html body .onboarding-dialog[data-onboarding-step="success"] .onboarding-content {
  flex: 0 0 auto;
  justify-content: center;
}
html body .onboarding-dialog .onboarding-success {
  display: flex;
  width: 100%;
  max-width: 720px;
  margin: 0;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
html body .onboarding-dialog .onboarding-success.is-hidden { display: none; }
html body .onboarding-dialog .onboarding-success .section-code {
  margin: 0;
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
}
html body .onboarding-dialog[data-onboarding-step="success"] #onboarding-success-kicker { display: block; }
html body .onboarding-dialog[data-onboarding-step="success"] #onboarding-success-kicker[hidden],
html body .onboarding-dialog[data-onboarding-step="success"] #onboarding-success-kicker.is-hidden { display: none; }
html body .onboarding-dialog .onboarding-success h2 {
  margin: 16px 0 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -.042em;
  text-align: center;
}
/* Il design chiude sul titolo: sotto non c'e' altro testo. */
html body .onboarding-dialog #onboarding-success-copy { display: none; }
html body .onboarding-dialog #onboarding-success-close.is-hidden { display: none; }
html body .onboarding-dialog #onboarding-success-close {
  margin-top: 28px;
}

/* ---- L'asterisco rosso sui campi obbligatori non e' nel design ---------- */
html body .onboarding-dialog #company-name-field > label::after,
html body .onboarding-dialog #business-description-field > label::after,
html body .onboarding-dialog .google-onboarding-key:has(input[required]) label::after {
  content: none;
}

/* ---- Sotto i 1100px le due colonne si impilano ------------------------- */
@media (max-width: 1100px) {
  html body .onboarding-dialog .google-onboarding-key,
  html body .onboarding-dialog #onboarding-gemini-fields,
  html body .onboarding-dialog .gemini-onboarding-plan,
  html body .onboarding-dialog .onboarding-section-account {
    flex-direction: column;
    gap: 22px;
  }
  html body .onboarding-dialog .google-onboarding-key > [data-setup-guide],
  html body .onboarding-dialog .gemini-onboarding-plan .setup-guide-panel,
  html body .onboarding-dialog .onboarding-plan-field,
  html body .onboarding-dialog .onboarding-auth-side {
    width: 100%;
  }
}

@media (max-width: 760px) {
  html body .onboarding-dialog { --onb-topbar: 72px; }
  html body .onboarding-dialog .onboarding-panel { padding: 22px 18px; }
  html body .onboarding-dialog .onboarding-section-rubric { padding: 16px 18px 18px; }
  html body .onboarding-dialog .onboarding-section-code { padding: 24px 18px; }
  html body .onboarding-dialog .geo-provider-options,
  html body .onboarding-dialog .onboarding-summary {
    flex-direction: column;
    grid-template-columns: minmax(0, 1fr);
  }
  html body .onboarding-dialog .onboarding-step-number,
  html body .onboarding-dialog .onboarding-progress li:not(.is-active):not(.is-complete) .onboarding-step-number {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
  html body .onboarding-dialog .onboarding-progress li.is-complete .onboarding-step-number > svg {
    width: 14px;
    height: 14px;
  }
  html body .onboarding-dialog .onboarding-progress li:not([hidden]):has(~ li:not([hidden]))::after,
  html body .onboarding-dialog .onboarding-progress:has(li[data-onboarding-target="7"]:not([hidden])) li:not([hidden]):has(~ li:not([hidden]))::after {
    width: 14px;
    margin: 0 3px;
  }
  html body .onboarding-dialog .onboarding-rubric .weight-definitions > div { padding-right: 104px; }
  html body .onboarding-dialog .onboarding-rubric dt b { width: 92px; font-size: 21px; }
  html body .onboarding-dialog .auth-code-boxes { gap: 8px; }
  html body .onboarding-dialog .auth-code-boxes > i {
    width: 46px;
    height: 60px;
    font-size: 24px;
  }
  html body .onboarding-dialog .auth-code-control { height: 60px; }
  /* Sul telefono la riga tiene anche "Indietro": la misura minima della
     pillola la farebbe traboccare. Qui torna a misurare la scritta. */
  html body .onboarding-dialog .onboarding-actions .button.platform-action-primary,
  html body .onboarding-dialog:not([data-auth-only]) .onboarding-actions #company-profile-save.platform-action-primary {
    min-width: 0;
  }
}

/* ---- Correzioni contro le regole con !important di app.css -------------- */
/* `.button.platform-action` fissa altezza, spaziatura e raggio con
   !important: per le misure del design serve la stessa arma. */
html body .onboarding-dialog .onboarding-actions .button.platform-action {
  height: 56px !important;
  min-height: 56px !important;
  border-radius: 999px !important;
}
html body .onboarding-dialog .onboarding-actions .button.platform-action-primary {
  padding: 0 10px 0 30px !important;
}
html body .onboarding-dialog .onboarding-actions .button.platform-action-secondary {
  padding: 0 24px !important;
}
/* La nota era larga 250px fissi: nel design sta su una riga. */
html body .onboarding-dialog .onboarding-actions > p {
  width: auto;
  max-width: min(60ch, 100%);
}
/* Le azioni scendono in fondo alla schermata, come il `bottom:65px` del
   design, senza sovrapporsi quando la card e' alta. */
html body .onboarding-dialog .onboarding-actions {
  margin-top: auto;
  padding-top: 40px;
}
/* Il contenitore della guida e' `display:contents`: la larghezza va messa
   sul pannello, che e' l'elemento che partecipa davvero al flex. */
html body .onboarding-dialog .google-onboarding-key .setup-guide-panel {
  flex: none;
  width: 320px;
}
/* app.css centra la schermata finale con `:has()`, che pesa piu' del mio
   prefisso corto: la colonna smetteva di allargarsi e finiva a sinistra.
   Con lo stato nel selettore la specificita' torna dalla parte giusta. */
html body .onboarding-dialog[data-onboarding-step="success"] .onboarding-layout {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}
html body .onboarding-dialog[data-onboarding-step="success"] .onboarding-main {
  display: flex;
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: var(--onb-topbar) clamp(20px, 4.4vw, 64px) 96px;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
  align-items: center;
  justify-content: center;
}
html body .onboarding-dialog[data-onboarding-step="success"] .onboarding-content {
  display: flex;
  width: 100%;
  max-width: none;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================  */
/* La localita': la tendina dei risultati e la scelta                          */
/* La pillola di ricerca e' larga 900px, alta 82, con un'ombra lunga. Tendina  */
/* e conferma parlavano un'altra lingua: bordi grigi, raggi da 11px, una       */
/* barretta verde incastrata a sinistra della riga attiva, e la conferma che   */
/* faceva sparire la pillola per mettere al suo posto una scheda di un'altra   */
/* forma. Qui hanno la stessa cassa, la stessa ombra e lo stesso passo.        */
/* Ultimo blocco del file: vince sull'ordine a parita' di specificita'.        */
/* ==========================================================================  */

/* --- La tendina: appesa alla pillola, stessa cassa ------------------------ */
html body #view-analysis #analysis-step-location .zone-results {
  position: absolute;
  z-index: 40;
  top: calc(100% + 12px);
  right: 0;
  left: 0;
  display: block;
  width: 100%;
  max-height: min(58vh, 428px);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 24px;
  /* Un gradino piu' profonda dell'ombra della pillola: la tendina sta sopra,
     e si deve vedere che ci sta sopra. */
  box-shadow: 0 2px 4px rgba(11, 31, 58, .04), 0 24px 56px rgba(11, 31, 58, .15);
  scrollbar-width: thin;
}

/* Il conteggio: un'etichetta tenue, non una barra. Niente sfocatura dietro:
   a 900px la striscia opaca si leggeva come una fascia grigia. */
html body #view-analysis #analysis-step-location .zone-results-header {
  position: sticky;
  z-index: 2;
  top: 0;
  padding: 15px 26px 11px;
  color: var(--grey);
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* La riga. La colonna del segnaposto e' larga quanto la lente del campo e ha
   lo stesso passo: l'indirizzo cade esattamente sotto quello che hai scritto. */
html body #view-analysis #analysis-step-location .zone-result {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 20px;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 72px;
  padding: 14px 26px;
  background: var(--white);
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--motion-premium);
}
html body #view-analysis #analysis-step-location .zone-results-header + .zone-result,
html body #view-analysis #analysis-step-location .zone-result:first-child {
  border-top: 0;
}
/* La barretta verde incastrata dentro era un residuo di un altro impianto:
   qui basta il velo, come il menu della barra in alto. */
html body #view-analysis #analysis-step-location .zone-result:is(:hover, :focus-visible, .is-active) {
  background: #F4FAF7;
  border-color: var(--hairline);
  outline: 0;
  box-shadow: none;
}

html body #view-analysis #analysis-step-location .zone-result-marker {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--grey);
  background: none;
  border-radius: 0;
  transition: color var(--motion-premium);
}
html body #view-analysis #analysis-step-location .zone-result-marker .ui-icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
}
html body #view-analysis #analysis-step-location .zone-result:is(:hover, .is-active) .zone-result-marker {
  color: var(--pine);
}

html body #view-analysis #analysis-step-location .zone-result-copy { min-width: 0; }
html body #view-analysis #analysis-step-location .zone-result strong {
  display: block;
  overflow: hidden;
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body #view-analysis #analysis-step-location .zone-result strong mark {
  color: var(--pine-dark);
  background: none;
  font-weight: 600;
}
html body #view-analysis #analysis-step-location .zone-result small {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 3px;
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.35;
}
/* "Area ampia" e' un avvertimento, non un pezzo del tipo: ha la sua targhetta,
   nello stesso ambra della striscia che compare dopo la scelta. */
html body #view-analysis #analysis-step-location .zone-result-badge {
  flex: none;
  padding: 2px 9px;
  color: #92400E;
  background: #FEF3C7;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
}

/* La freccia arriva solo dove sta il puntatore o la riga scelta: ferma, la
   tendina e' una lista di indirizzi, non una fila di bottoni. */
html body #view-analysis #analysis-step-location .zone-result-action {
  display: grid;
  place-items: center;
  color: var(--grey-soft);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--motion-premium), transform var(--motion-premium), color var(--motion-premium);
}
html body #view-analysis #analysis-step-location .zone-result-action .ui-icon {
  width: 17px;
  height: 17px;
  stroke-width: 1.9;
}
html body #view-analysis #analysis-step-location .zone-result:is(:hover, :focus-visible, .is-active) .zone-result-action {
  color: var(--pine);
  opacity: 1;
  transform: none;
}

/* --- Attesa, vuoto, errore: dentro la tendina, non sparsi sotto il campo -- */
html body #view-analysis #analysis-step-location .zone-result-state {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-height: 0;
  padding: 22px 26px;
  color: var(--navy);
}
html body #view-analysis #analysis-step-location .zone-result-state strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
}
html body #view-analysis #analysis-step-location .zone-result-state small {
  display: block;
  margin-top: 4px;
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.4;
}
html body #view-analysis #analysis-step-location .zone-result-spinner {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid var(--line);
  border-top-color: var(--pine);
  border-radius: 50%;
}
html body #view-analysis #analysis-step-location .zone-result-retry {
  margin: 10px 0 0;
  padding: 0;
  color: var(--pine-dark);
  background: none;
  border: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

/* ==========================================================================  */
/* La scelta: la conferma prende il posto della pillola, con la sua forma      */
/* ==========================================================================  */

html body #view-analysis #analysis-step-location .zone-selection {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  box-sizing: border-box;
  width: min(900px, 100%);
  max-width: 900px;
  min-height: 82px;
  /* Lo stesso margine della pillola: la conferma nasce dove stava il campo,
     senza che il titolo qui sopra si sposti di un pixel. */
  margin: clamp(36px, 4.4vw, 64px) 0 0;
  /* Il bottone sta dal bordo destro alla stessa distanza del tondo verde
     da quello sinistro. */
  padding: 8px 22px;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--emerald-border);
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(11, 31, 58, .04), 0 18px 44px rgba(11, 31, 58, .09);
  animation: zone-confirmed-in 220ms cubic-bezier(.16, 1, .3, 1) both;
}
/* Il tondo verde dice gia' che e' confermata: l'occhiello "LOCALITA'
   CONFERMATA" ripeteva la stessa cosa e rubava la riga all'indirizzo. */
html body #view-analysis #analysis-step-location .zone-selection small { display: none; }
html body #view-analysis #analysis-step-location .zone-selection > div { min-width: 0; }
html body #view-analysis #analysis-step-location .zone-selection strong {
  display: block;
  margin: 0;
  overflow: hidden;
  color: var(--navy);
  font-family: var(--font-sans);
  /* La stessa misura del testo dentro il campo: e' lo stesso indirizzo, e
     passando da campo a conferma non deve cambiare corpo. */
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body #view-analysis #analysis-step-location .zone-selection div > span {
  display: block;
  margin-top: 2px;
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.35;
}
html body #view-analysis #analysis-step-location .selection-check {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--white);
  background: var(--pine);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}
html body #view-analysis #analysis-step-location .selection-check .ui-icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.4;
}
/* "Modifica" e' l'unica uscita da questo stato: ha la forma dei bottoni
   secondari della barra, non quella di un link perso nell'angolo. */
html body #view-analysis #analysis-step-location .zone-selection .text-button {
  display: inline-flex;
  align-items: center;
  height: 46px;
  min-height: 46px;
  padding: 0 22px;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--motion-premium), border-color var(--motion-premium);
}
html body #view-analysis #analysis-step-location .zone-selection .text-button:hover {
  color: var(--pine-dark);
  border-color: var(--pine);
  text-decoration: none;
}

/* --- L'avvertimento sull'area ampia: una striscia sotto la conferma ------- */
html body #view-analysis #analysis-step-location .zone-wide-warning {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  box-sizing: border-box;
  width: min(900px, 100%);
  max-width: 900px;
  margin: 14px 0 0;
  padding: 16px 24px;
  color: #92400E;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 18px;
  box-shadow: none;
}
html body #view-analysis #analysis-step-location .zone-wide-warning > .ui-icon {
  width: 22px;
  height: 22px;
  color: #D97706;
  stroke-width: 1.9;
}
html body #view-analysis #analysis-step-location .zone-wide-warning p {
  min-width: 0;
  margin: 0;
}
html body #view-analysis #analysis-step-location .zone-wide-warning strong {
  display: block;
  color: #92400E;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}
html body #view-analysis #analysis-step-location .zone-wide-warning span {
  display: block;
  margin-top: 2px;
  color: #B45309;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.4;
}
html body #view-analysis #analysis-step-location .zone-radius-action {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 0;
  color: #92400E;
  background: none;
  border: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
html body #view-analysis #analysis-step-location .zone-radius-action .ui-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

/* --- Sotto i 900px: la stessa cassa, misure piu' strette ------------------ */
@media (max-width: 900px) {
  html body #view-analysis #analysis-step-location .zone-results {
    top: calc(100% + 10px);
    max-height: min(52vh, 340px);
    border-radius: 18px;
  }
  html body #view-analysis #analysis-step-location .zone-results-header { padding: 13px 18px 9px; }
  html body #view-analysis #analysis-step-location .zone-result {
    grid-template-columns: 20px minmax(0, 1fr) 18px;
    gap: 12px;
    min-height: 64px;
    padding: 12px 18px;
  }
  html body #view-analysis #analysis-step-location .zone-result strong { font-size: 14.5px; }
  html body #view-analysis #analysis-step-location .zone-result-state { padding: 18px; }

  html body #view-analysis #analysis-step-location .zone-selection {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px 14px;
    min-height: 0;
    padding: 16px 18px;
    border-radius: 22px;
  }
  html body #view-analysis #analysis-step-location .selection-check {
    width: 38px;
    height: 38px;
  }
  html body #view-analysis #analysis-step-location .zone-selection strong { font-size: 15.5px; }
  /* In riga il bottone non ci sta: va a capo sotto l'indirizzo, allineato
     con lui e non col tondo. */
  html body #view-analysis #analysis-step-location .zone-selection .text-button {
    grid-column: 2;
    justify-self: start;
    height: 42px;
    min-height: 42px;
    padding: 0 18px;
  }
  /* Qui la colonna non e' centrata (min-height: 0), quindi la striscia non
     sposta niente e puo' tornare nel flusso: la conferma cambia altezza a
     questa larghezza, e un ancoraggio fisso cadrebbe fuori posto. */
  html body #view-analysis #analysis-step-location .zone-wide-warning {
    position: static;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px 14px;
    margin: 14px 0 0;
    padding: 14px 18px;
    border-radius: 16px;
    transform: none;
  }
  html body #view-analysis #analysis-step-location .zone-radius-action {
    grid-column: 2;
    justify-self: start;
  }
}

/* ==========================================================================  */
/* La schermata sta ferma                                                      */
/* La Panoramica e' centrata in verticale su una colonna la cui altezza cambia */
/* tre volte: i suggerimenti spariscono appena scrivi, il bottone "Scegli il   */
/* target" compare appena scegli. Centrare una colonna che cambia altezza vuol */
/* dire che tutto quello che ci sta sopra — titolo e campo compresi — scorre   */
/* su e giu' da solo. Qui chi si nasconde tiene il suo posto.                  */
/* ==========================================================================  */

/* I suggerimenti diventano invisibili, non spariscono: sparendo toglievano
   circa 130px alla colonna e il titolo saliva di mezza altezza appena
   cominciavi a scrivere. Servono gli !important perche' un livello
   precedente li spegne con la stessa arma e la stessa specificita'. */
html body #view-analysis #analysis-step-location .zone-field:has(.zone-results:not(.is-hidden)) .popular-zones,
html body #view-analysis #analysis-step-location .zone-field.is-selected:not(.is-editing) .popular-zones {
  display: flex !important;
  visibility: hidden;
}

/* Nel markup i suggerimenti stanno PRIMA della conferma. Tenendo il loro
   posto, la conferma sarebbe nata 130px piu' in basso del campo che
   sostituisce. Conferma e striscia ambra passano davanti: cosi' la conferma
   nasce esattamente dove stava la pillola e i suggerimenti tengono il loro
   posto vuoto sotto, come quando la tendina e' aperta. */
html body #view-analysis #analysis-step-location .zone-selection {
  order: -1;
}

/* La striscia ambra era l'ultimo pezzo che spostava la colonna, ed e' quello
   che si vede sempre: una citta' e' per definizione un'area ampia, quindi
   scegliendo "Bologna" la striscia compare ogni volta e la schermata, centrata
   in verticale, saliva di 45px. Ora esce dal flusso e si appoggia nello spazio
   che i suggerimenti tengono libero appena sotto la conferma: stessa
   informazione, stesso posto, ma la colonna non se ne accorge.
   L'ancoraggio ripete la geometria della conferma: stacco + 82px di pillola
   + 14px d'aria. */
html body #view-analysis #analysis-step-location .zone-field {
  position: relative;
}
html body #view-analysis #analysis-step-location .zone-wide-warning {
  position: absolute;
  top: calc(clamp(36px, 4.4vw, 64px) + 96px);
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}

/* Stesso motivo per le azioni: comparendo dal nulla alzavano tutto di 40px
   nel momento esatto in cui confermavi la localita'.
   Attenzione all'antenato: .wizard-actions NON sta dentro .location-stage, le
   e' sorella dentro .location-step-layout. Una regola appesa a .location-stage
   non fa match e non riserva un bel niente. */
html body #view-analysis #analysis-step-location:not(:has(.zone-field.is-selected)) .wizard-actions,
html body #view-analysis #analysis-step-location:has(.zone-field.is-editing) .wizard-actions {
  display: flex !important;
  visibility: hidden;
}

/* Il passo aveva max-height 100dvh con overflow hidden, e html non scorre su
   questa schermata: con conferma, striscia ambra e "Scegli il target" la
   colonna supera il viewport di un portatile e il bottone finiva tagliato
   fuori, irraggiungibile. Ora la colonna puo' crescere e la pagina scorre.
   "safe center" e' il centraggio che, quando lo spazio finisce, smette di
   centrare invece di spingere il titolo sopra il bordo: senza, la parte alta
   esce dallo schermo e non la riprendi con lo scorrimento. */
html body #view-analysis #analysis-step-location .location-step-layout.premium-split {
  max-height: none;
  overflow: visible;
  justify-content: center;
  justify-content: safe center;
}
html:has(#analysis-step-location.is-active),
html body[data-active-view="analysis"]:has(#analysis-step-location.is-active):not(:has(.monitor-panel:not(.is-hidden))) {
  overflow-y: auto;
}

/* ==========================================================================  */
/* Fase 02 — Definisci il target                                               */
/* Dal progetto allegato. Impianto: colonna verticale a sinistra, barra che     */
/* parte dopo la colonna, e al centro pastiglia della localita', titolo, due    */
/* schede affiancate, pillola verde. Misure lette sul render a 1416px.          */
/* Ultimo blocco del file: vince sull'ordine a parita' di specificita'.         */
/* ==========================================================================  */

/* --- La barra parte dopo il rail di fase, su fondo trasparente ----------- */
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active) { --header-height: 80px; }
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-header {
  padding: 0 64px;
  background: transparent;
}

/* --- La colonna centrale ------------------------------------------------- */
html body #view-analysis #analysis-step-goal .recurring-target-layout.premium-split {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  justify-content: center;
  justify-content: safe center;
  min-height: 100vh;
  max-height: none;
  overflow: visible;
  padding: var(--header-height) 64px 96px;
  background: var(--white);
  background-image: none;
}
html:has(#analysis-step-goal.is-active),
html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) {
  overflow-y: auto;
  background-color: var(--white);
  background-image: none;
}
html body #view-analysis #analysis-step-goal :is(.recurring-target-main, .location-hero-block, .location-step-main, .location-intro) {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Quello che il progetto non mostra. Il titolo del passo resta per chi legge
   con lo schermo: e' il bersaglio di aria-labelledby. */
html body #view-analysis #analysis-step-goal :is(.analysis-preflight, .analysis-journey, .search-config-summary),
html body #view-analysis #analysis-step-goal .analysis-journey.home-progress,
html body #view-analysis #analysis-step-goal .analysis-journey.side-progress-card {
  display: none;
}
html body #view-analysis #analysis-step-goal .wizard-step-heading,
html body #view-analysis #analysis-step-goal #start-requirements,
html body #view-analysis #analysis-step-goal .search-target-selector > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
/* La scheda dei criteri torna solo se hai scelto di personalizzare: li' e'
   l'unica porta verso la configurazione. */
html body #view-analysis #analysis-step-goal:has(#target-mode-custom:checked) .search-config-summary {
  display: grid;
  box-sizing: border-box;
  width: min(878px, 100%);
  margin: 26px 0 0;
}

/* --- La pastiglia: dove stiamo cercando, e a che punto siamo -------------- */
html body #view-analysis #analysis-step-goal .step-locator {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  width: auto;
  max-width: 100%;
  margin: 0 0 26px;
  padding: 7px 18px 7px 14px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(11, 31, 58, .04);
}
html body #view-analysis #analysis-step-goal .step-locator .ui-icon {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--pine);
  stroke-width: 1.9;
}
html body #view-analysis #analysis-step-goal .step-locator span {
  overflow: hidden;
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html body #view-analysis #analysis-step-goal .step-locator i {
  flex: none;
  width: 1px;
  height: 13px;
  background: var(--line-strong);
}
html body #view-analysis #analysis-step-goal .step-locator b {
  flex: none;
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* --- Titolo e sottotitolo ------------------------------------------------ */
html body #view-analysis #analysis-step-goal .location-intro h1 {
  max-width: none;
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  /* Piu' piccolo del titolo di casa: qui sotto ci sono due schede, e a 88px
     il titolo se le mangiava. */
  font-size: clamp(34px, 4.1vw, 58px);
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1.04;
  text-align: center;
  text-wrap: balance;
}
html body #view-analysis #analysis-step-goal .location-intro .hero-accent {
  color: var(--pine);
  background: none;
  font-weight: 500;
  -webkit-text-fill-color: currentColor;
}
html body #view-analysis #analysis-step-goal .location-intro > p {
  display: block;
  max-width: 545px;
  margin: 18px 0 0;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
}

/* --- Le due schede ------------------------------------------------------- */
html body #view-analysis #analysis-step-goal .search-target-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  box-sizing: border-box;
  width: min(878px, 100%);
  margin: clamp(30px, 3.4vw, 46px) 0 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html body #view-analysis #analysis-step-goal .search-target-option {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 24px;
  gap: 6px 16px;
  align-content: start;
  align-items: start;
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 30px 26px 26px 28px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(11, 31, 58, .03);
  cursor: pointer;
  transition:
    border-color var(--motion-premium),
    box-shadow var(--motion-premium);
}
html body #view-analysis #analysis-step-goal .search-target-option:hover {
  border-color: var(--line-strong);
}
/* Scelta: bordo verde e un filo d'ombra. Niente riempimento colorato, il
   progetto tiene la scheda bianca. */
html body #view-analysis #analysis-step-goal .search-target-option:has(input:checked) {
  border-color: var(--pine);
  box-shadow: 0 1px 2px rgba(11, 31, 58, .04), 0 10px 26px rgba(61, 154, 99, .10);
}
html body #view-analysis #analysis-step-goal .search-target-option:has(input:focus-visible) {
  outline: 2px solid var(--pine);
  outline-offset: 3px;
}
html body #view-analysis #analysis-step-goal .search-target-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

html body #view-analysis #analysis-step-goal .target-option-icon {
  display: grid;
  place-items: center;
  grid-row: 1;
  width: 36px;
  height: 36px;
  color: var(--pine);
  background: var(--emerald-soft);
  border-radius: 11px;
}
html body #view-analysis #analysis-step-goal .target-option-icon .ui-icon {
  width: 19px;
  height: 19px;
  stroke-width: 1.8;
}
html body #view-analysis #analysis-step-goal .target-option-copy {
  grid-row: 1;
  min-width: 0;
}
html body #view-analysis #analysis-step-goal .target-option-copy strong {
  display: block;
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}
html body #view-analysis #analysis-step-goal .target-option-copy small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
}

/* Il tondo di scelta: vuoto quando non e' scelta, pieno con la spunta quando
   lo e'. La spunta sta dentro il tondo, non accanto. */
html body #view-analysis #analysis-step-goal .target-option-check {
  display: grid;
  place-items: center;
  grid-row: 1;
  grid-column: 3;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin-top: 3px;
  color: transparent;
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  transition:
    color var(--motion-premium),
    background var(--motion-premium),
    border-color var(--motion-premium);
}
html body #view-analysis #analysis-step-goal .target-option-check .ui-icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.8;
}
html body #view-analysis #analysis-step-goal .search-target-option:has(input:checked) .target-option-check {
  color: var(--white);
  background: var(--pine);
  border-color: var(--pine);
}

/* Il corpo della scheda: un filo di separazione, poi i criteri. */
html body #view-analysis #analysis-step-goal .target-option-body {
  grid-column: 1 / -1;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
html body #view-analysis #analysis-step-goal .target-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
html body #view-analysis #analysis-step-goal .target-chips span {
  padding: 5px 12px;
  color: var(--muted-strong);
  background: var(--paper-3);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
}
html body #view-analysis #analysis-step-goal .target-option-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
html body #view-analysis #analysis-step-goal .target-option-list span {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}
html body #view-analysis #analysis-step-goal .target-option-list span::before {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  background: var(--grey-soft);
  border-radius: 999px;
  transform: translateY(-2px);
}

/* --- Le azioni: la pillola verde e il ritorno alla zona ------------------- */
html body #view-analysis #analysis-step-goal .wizard-actions {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: none;
  margin: clamp(30px, 3.4vw, 44px) 0 0;
  padding: 0;
  border: 0;
}
html body #view-analysis #analysis-step-goal .submit-action {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
html body #view-analysis #analysis-step-goal #start-button.button-primary,
html body #view-analysis #analysis-step-goal #start-button {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  box-sizing: border-box;
  height: 52px !important;
  min-height: 52px !important;
  min-width: 186px;
  padding: 0 11px 0 26px !important;
  color: var(--white);
  background: var(--pine);
  border: 0;
  border-radius: 999px !important;
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  transition: background var(--motion-premium), opacity var(--motion-premium);
}
html body #view-analysis #analysis-step-goal #start-button:hover:not(:disabled) {
  background: var(--pine-dark);
  transform: none;
}
html body #view-analysis #analysis-step-goal #start-button:disabled {
  color: var(--white);
  background: var(--pine);
  opacity: .45;
  cursor: not-allowed;
}
/* Il tondo e' incassato di 11px sopra e sotto: (52 - 30) / 2. A destra lo
   stesso, altrimenti non e' concentrico con la calotta. */
html body #view-analysis #analysis-step-goal #start-button > .ui-icon {
  box-sizing: border-box;
  flex: none;
  width: 30px;
  height: 30px;
  margin-left: auto;
  padding: 7px;
  color: var(--white);
  background: rgba(255, 255, 255, .24);
  border-radius: 999px;
  stroke-width: 2.1;
  transition: background var(--motion-premium);
}
html body #view-analysis #analysis-step-goal #start-button:hover:not(:disabled) > .ui-icon {
  background: rgba(255, 255, 255, .32);
}
html body #view-analysis #analysis-step-goal .recurring-search-actions > [data-wizard-back],
html body #view-analysis #analysis-step-goal [data-wizard-back] {
  display: inline-flex;
  align-items: center;
  height: auto;
  min-height: 0;
  padding: 0;
  color: var(--muted);
  background: none;
  border: 0;
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: color var(--motion-premium);
}
html body #view-analysis #analysis-step-goal .recurring-search-actions > [data-wizard-back]:hover,
html body #view-analysis #analysis-step-goal [data-wizard-back]:hover {
  color: var(--pine-dark);
  background: none;
  transform: none;
}
html body #view-analysis #analysis-step-goal [data-wizard-back] .ui-icon { display: none; }

/* --- Sotto i 900px: niente colonna, schede in colonna -------------------- */
@media (max-width: 900px) {
  html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active) { --header-height: 72px; }
  html body[data-active-view="analysis"]:has(#analysis-step-goal.is-active):not(:has(.monitor-panel:not(.is-hidden))) .app-header {
    padding: 0 20px;
    background: var(--white);
  }
  html body #view-analysis #analysis-step-goal .recurring-target-layout.premium-split {
    min-height: 0;
    padding: calc(var(--header-height) + 36px) 20px 64px;
  }
  html body #view-analysis #analysis-step-goal .search-target-selector {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  html body #view-analysis #analysis-step-goal .search-target-option {
    padding: 22px 18px;
  }
  html body #view-analysis #analysis-step-goal .wizard-actions {
    flex-direction: column;
    gap: 18px;
  }
  html body #view-analysis #analysis-step-goal #start-button { width: 100%; }
}

/* ==========================================================================
   Panoramica: sotto la pillola niente pastiglie
   Il centro della pagina e' titolo, pillola e nient'altro, con sessione e
   senza: era l'ultimo segno che distingueva le due Panoramiche. I tre
   suggerimenti restano nel markup ma non si disegnano; le stesse zone le
   scrive il segnaposto della pillola, che ora batte per tutti.
   La riga verso How it works resta solo da ospite: e' l'unica porta rimasta
   su questa vista (il link nella riga d'informativa qui e' nascosto), e con
   un account non ha piu' niente da dire.
   Ultimo blocco del file: vince sull'ordine a parita' di specificita'.
   ========================================================================== */

html body #view-analysis #analysis-step-location .popular-zones {
  display: none;
}

html body #view-analysis #analysis-step-location .guest-hint {
  margin: clamp(22px, 2.4vw, 30px) 0 0;
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}
html body #view-analysis #analysis-step-location .guest-hint a {
  color: var(--pine);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--motion-premium);
}
html body #view-analysis #analysis-step-location .guest-hint a:hover { color: var(--pine-dark); }
html body #view-analysis #analysis-step-location .guest-hint a:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Confermata la localita' resta solo la card: la riga segue i suggerimenti. */
html body #view-analysis #analysis-step-location .zone-field.is-selected:not(.is-editing) .guest-hint {
  visibility: hidden;
}

/* La riga non c'e' dall'inizio: arriva quando la pillola ha finito di battere
   la prima frase (~1,4s), come la seconda riga di chi sta scrivendo. Il fermo
   immagine e' `both`: prima del ritardo la riga e' gia' al fotogramma zero,
   quindi non lampeggia a pagina appena aperta. E' animazione CSS, quindi vale
   anche senza JS, dove la pillola resta ferma. */
@keyframes vaglio-riga-ospite {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html body #view-analysis #analysis-step-location .guest-hint {
    animation: vaglio-riga-ospite 460ms cubic-bezier(.2, .7, .3, 1) 1400ms both;
  }
}

/* ==========================================================================
   Accesso — «Panoramica.dc.html», riquadro 6a «Pagina centrata»
   Misure prese dal file di design, non dedotte da uno screenshot: il canvas
   disegna a 1440x900, quindi la scheda e' larga 440 con 32 di bordo interno,
   il passo fra le sue righe e' 20 ovunque, il titolo e' 54px e il bottone
   resta la pillola da 56 — solo largo quanto la scheda.
   I campi non vengono ritoccati: l'onboarding li disegna gia' come il design
   (52px, raggio 12, filo #DDE1E8), e la tavolozza e' la stessa del tema.
   Vale solo con `data-auth-only`: l'onboarding completo non cambia.
   Ultimo blocco del file: vince sull'ordine a parita' di specificita'.
   ========================================================================== */

/* Il riquadro del design ha il fondo #FAFBFC, non il bianco pieno
   dell'onboarding: e' quello che stacca la scheda dalla pagina. */
html body:has(#onboarding-dialog[open][data-auth-only]) { background: #FAFBFC; }
html body .onboarding-dialog[data-auth-only] .onboarding-shell { background: #FAFBFC; }

/* --- La barra: marchio e via d'uscita ------------------------------------ */
html body .onboarding-dialog[data-auth-only] .onboarding-signin { display: none; }
html body .onboarding-dialog .onboarding-topbar-guest {
  display: inline-flex;
  gap: 5px;
  margin: 0;
  align-items: baseline;
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.3;
}
html body .onboarding-dialog .onboarding-topbar-guest[hidden] { display: none; }
html body .onboarding-dialog .onboarding-topbar-guest .text-button {
  padding: 0;
  color: var(--emerald-dark);
  background: none;
  border: 0;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: color var(--motion-premium);
}
html body .onboarding-dialog .onboarding-topbar-guest .text-button:hover {
  color: var(--emerald-darker);
}

/* La colonna e' centrata fra la barra e il fondo, con i 60px di respiro che
   il design tiene sotto: il gruppo cade 18px sotto la mezzeria, non sopra. */
html body .onboarding-dialog[data-auth-only] .onboarding-main {
  padding-top: var(--onb-topbar);
  padding-bottom: 60px;
}

/* --- Titolo: 54px, saluto e una riga ------------------------------------- */
html body .onboarding-dialog[data-auth-only] .onboarding-heading {
  gap: 10px;
  margin: 0;
}
html body .onboarding-dialog[data-auth-only] .onboarding-heading .section-code { display: none; }
html body .onboarding-dialog[data-auth-only] .onboarding-heading h2 {
  font-size: clamp(38px, 3.75vw, 54px);
  line-height: 1.05;
  letter-spacing: -.038em;
}
html body .onboarding-dialog[data-auth-only] .onboarding-heading > p:last-child {
  max-width: 48ch;
  font-size: 16px;
  line-height: 1.5;
}

/* --- La scheda: 440x(32 di bordo), e tiene dentro anche il bottone -------- */
html body .onboarding-dialog[data-auth-only] .onboarding-panels {
  display: flex;
  box-sizing: border-box;
  width: min(440px, 100%);
  margin: 38px 0 0;
  padding: 32px;
  gap: 20px;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: var(--onb-card-shadow);
}
/* Il pannello smette di essere la scheda: lo e' diventato il suo contenitore,
   che tiene dentro anche la riga del bottone. */
html body .onboarding-dialog[data-auth-only] .onboarding-panel {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html body .onboarding-dialog[data-auth-only] .onboarding-feedback { width: min(440px, 100%); }

/* --- Dentro la scheda: Google in cima, poi i campi, passo 20 ovunque ------ */
html body .onboarding-dialog[data-auth-only] .onboarding-section-account {
  display: flex;
  gap: 20px;
  flex-direction: column;
  align-items: stretch;
}
html body .onboarding-dialog[data-auth-only] .onboarding-section-account .onboarding-auth-side {
  order: 1;
  width: auto;
  gap: 20px;
}
html body .onboarding-dialog[data-auth-only] .onboarding-section-account .onboarding-fields {
  order: 2;
  gap: 20px;
}
/* Nel design il bottone di Google viene prima del filo «oppure». */
html body .onboarding-dialog[data-auth-only] .onboarding-auth-alt { gap: 20px; }
html body .onboarding-dialog[data-auth-only] #auth-google { order: 1; }
html body .onboarding-dialog[data-auth-only] .onboarding-auth-divider { order: 2; }
/* La nota grigia sull'invio del codice non e' nel riquadro. */
html body .onboarding-dialog[data-auth-only] #auth-note { display: none; }
/* Accedendo la password e' quella che l'utente ha gia': la nota non serve. */
html body .onboarding-dialog[data-auth-only][data-auth-mode="login"] #auth-password-note { display: none; }

/* --- «Password dimenticata?» sulla riga dell'etichetta -------------------- */
/* L'etichetta ora e' figlia della riga, non del campo: la regola con il
   figlio diretto non la prendeva piu' e restava senza forma. */
html body .onboarding-dialog .onboarding-form-field .field-label-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}
html body .onboarding-dialog .onboarding-form-field .field-label-row > label {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}
html body .onboarding-dialog .onboarding-auth-forgot[hidden] { display: none; }
html body .onboarding-dialog .onboarding-auth-forgot .text-button {
  padding: 0;
  color: var(--emerald-dark);
  background: none;
  border: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}
html body .onboarding-dialog .onboarding-auth-forgot .text-button:hover {
  color: var(--emerald-darker);
  text-decoration: underline;
}

/* --- Il bottone: la stessa pillola, larga quanto la scheda ---------------- */
html body .onboarding-dialog[data-auth-only] .onboarding-actions {
  width: 100%;
  margin: 0;
  padding: 0;
}
html body .onboarding-dialog[data-auth-only] .onboarding-actions .action-row { width: 100%; }
html body .onboarding-dialog[data-auth-only] .onboarding-actions .button.platform-action {
  width: 100%;
  min-width: 0;
  padding: 0 24px !important;
  gap: 12px;
  justify-content: center;
}
/* Il disco bianco intorno alla freccia e' della pillola ancorata a destra:
   nel riquadro la freccia sta accanto alla scritta, nuda e alta 17. */
html body .onboarding-dialog[data-auth-only] .onboarding-actions .button.platform-action-primary > .ui-icon {
  width: 17px;
  height: 17px;
  padding: 0;
  margin-left: 0;
  background: none;
}
html body .onboarding-dialog[data-auth-only] .onboarding-actions > p { font-size: 13px; }
/* Chiusura e «Annulla» non ci sono nel riquadro: la via d'uscita e' in alto. */
html body .onboarding-dialog[data-auth-only] #company-profile-close,
html body .onboarding-dialog[data-auth-only] #company-profile-cancel { display: none; }

/* --- Sotto la scheda: l'altra porta, a 24 dal bordo ----------------------- */
html body .onboarding-dialog[data-auth-only] .onboarding-main > .onboarding-auth-switch {
  margin: 24px 0 0;
  gap: 5px;
  justify-content: center;
  color: var(--grey);
  font-size: 13.5px;
  line-height: 1.3;
}
html body .onboarding-dialog[data-auth-only] .onboarding-main > .onboarding-auth-switch .text-button {
  color: var(--emerald-dark);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
}
html body .onboarding-dialog[data-auth-only] .onboarding-main > .onboarding-auth-switch .text-button:hover {
  color: var(--emerald-darker);
}
/* Sul passo del codice la scheda cambia contenuto, e sulla schermata finale
   non c'e' piu' niente da scegliere: il rimando all'iscrizione li' non
   c'entra. app.css spegne scheda e azioni nel successo, ma questa riga ora
   vive fuori da entrambe e sarebbe rimasta sola a mezz'aria. */
html body .onboarding-dialog[data-auth-only][data-onboarding-step="7"] .onboarding-main > .onboarding-auth-switch,
html body .onboarding-dialog[data-auth-only] .onboarding-main.is-success > .onboarding-auth-switch {
  display: none;
}

/* Sotto i 520px la scheda prende la larghezza che c'e', col bordo interno
   del design ridotto: 32 su un telefono lascerebbero 250px ai campi. */
@media (max-width: 520px) {
  html body .onboarding-dialog[data-auth-only] .onboarding-panels { padding: 24px 20px; }
  html body .onboarding-dialog .onboarding-topbar-guest,
  html body .onboarding-dialog .onboarding-topbar-guest .text-button { font-size: 12.5px; }
}

/* ===========================================================================
   Privacy — un riquadro per trattamento, in tabella, in una schermata sola.
   Le sei schede quadrate dicevano la stessa cosa in sei forme diverse: qui
   ogni riga risponde sempre alle stesse quattro domande (che dato e', cosa
   contiene, dove finisce, quanto resta), cosi' si leggono in colonna.
   Le regole di .legal-cards restano per #view-cookie, che non cambia.

   Niente scorrimento: tutto il ritmo verticale passa da queste variabili,
   espresse in dvh fra due estremi. Cosi' su uno schermo basso la pagina si
   stringe invece di allungarsi, e non c'e' un solo valore in px da tenere
   d'accordo con gli altri. Il minimo del clamp e' la soglia di leggibilita':
   sotto quella e' giusto che la pagina scorra, non che il testo sparisca.

   Il prefisso #view-privacy.view:not(#view-analysis) non e' decorativo: le
   regole comuni a privacy/cookie qui sopra lo usano gia', e senza pareggiare
   quella specificita' l'occhiello tornerebbe a essere una pillola.
   ======================================================================== */

html body #view-privacy .privacy-page,
html body #view-cookie .cookie-page {
  --p-alto: clamp(8px, 2.2dvh, 28px);
  --p-basso: clamp(12px, 2.6dvh, 32px);
  --p-stacco: clamp(12px, 2.6dvh, 32px);
  --p-titolo: clamp(28px, min(3.6vw, 5.2dvh), 50px);
  --p-occhiello: clamp(6px, 1.2dvh, 14px);
  --p-lead: clamp(13px, 1.9dvh, 17px);
  --p-riga: clamp(7px, 1.6dvh, 20px);
  --p-testo: clamp(12.5px, 1.6dvh, 14.5px);
  --p-nome: clamp(13.5px, 1.75dvh, 15.5px);
}

/* Col banner cookie alzato ci sono ~100px in meno: la pagina si stringe
   ancora un po' invece di finire sotto il banner. Vale per la privacy, dove
   il banner arriva da solo, prima che tu stia leggendo. */
html body:has(#cookie-banner.is-visible) #view-privacy .privacy-page {
  --p-alto: clamp(8px, 1.8dvh, 22px);
  --p-basso: clamp(92px, 12dvh, 120px);
  --p-stacco: clamp(10px, 1.8dvh, 22px);
  --p-titolo: clamp(26px, min(3.2vw, 4.2dvh), 42px);
  --p-riga: clamp(6px, 1.15dvh, 14px);
}

/* Sulla pagina cookie no: li' il banner lo apri tu, con «Gestisci cookie»,
   e stringere titolo, stacchi e righe farebbe saltare in su tutta la pagina
   sotto il dito che ha appena cliccato. Cambia solo il fondo, che il
   contenuto non lo muove: serve a non lasciare l'ultima riga sotto il
   banner. */
html body:has(#cookie-banner.is-visible) #view-cookie .cookie-page {
  --p-basso: clamp(92px, 12dvh, 120px);
}

html body #view-privacy .how-it-works-layout.privacy-page,
html body #view-cookie .how-it-works-layout.cookie-page {
  gap: var(--p-stacco);
  min-height: 100dvh;
  padding-top: calc(var(--header-height) + var(--p-alto));
  padding-bottom: var(--p-basso);
}

/* Regge il calcolo qui sopra: se il banner rialza il fondo, deve farlo
   attraverso --p-basso, non con un secondo padding che si somma. */
html body:has(#cookie-banner.is-visible) #view-privacy .how-it-works-layout.privacy-page,
html body:has(#cookie-banner.is-visible) #view-cookie .how-it-works-layout.cookie-page {
  padding-bottom: var(--p-basso);
}

/* L'occhiello qui non e' un bottone: niente pillola, solo la riga di codice. */
html body #view-privacy.view:not(#view-analysis) .page-heading.privacy-intro .section-code {
  margin: 0 0 var(--p-occhiello);
  padding: 0;
  color: var(--grey);
  background: none;
  border: 0;
  font-size: 11px;
  letter-spacing: .16em;
}

html body #view-privacy.view:not(#view-analysis) .page-heading.privacy-intro h1 {
  font-size: var(--p-titolo);
  line-height: 1.04;
}

html body #view-privacy.view:not(#view-analysis) .page-heading.privacy-intro .lead {
  max-width: 34rem;
  margin-top: var(--p-occhiello);
  font-size: var(--p-lead);
  line-height: 1.5;
}

/* ---- La tabella dei trattamenti ---- */
html body #view-privacy .privacy-table-wrap {
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  animation: premium-rise 620ms ease both;
  animation-delay: 120ms;
}

html body #view-privacy .privacy-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  text-align: left;
}

html body #view-privacy .privacy-table thead th {
  padding: clamp(7px, 1.3dvh, 16px) 18px;
  color: var(--grey);
  background: var(--paper-3);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

html body #view-privacy .privacy-table thead th:first-child,
html body #view-privacy .privacy-table tbody td:first-child { width: 64px; padding-left: 24px; }
html body #view-privacy .privacy-table thead th:nth-child(2),
html body #view-privacy .privacy-table tbody th { width: 22%; }
html body #view-privacy .privacy-table thead th:nth-child(3) { width: 34%; }
html body #view-privacy .privacy-table thead th:last-child,
html body #view-privacy .privacy-table tbody td:last-child { padding-right: 24px; }

html body #view-privacy .privacy-table tbody tr { border-top: 1px solid var(--line-soft); }
html body #view-privacy .privacy-table tbody tr:nth-child(even) { background: rgba(11, 31, 58, .015); }

html body #view-privacy .privacy-table tbody th,
html body #view-privacy .privacy-table tbody td {
  padding: var(--p-riga) 18px;
  vertical-align: top;
  color: var(--text-soft);
  font-size: var(--p-testo);
  font-weight: 400;
  line-height: 1.5;
}

html body #view-privacy .privacy-table .privacy-num {
  color: var(--grey-soft);
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .02em;
}

html body #view-privacy .privacy-table tbody th b {
  display: block;
  color: var(--ink);
  font-size: var(--p-nome);
  font-weight: 650;
  letter-spacing: -.01em;
}

/* La riga 04 e' l'unica col badge: se andasse a capo diventerebbe la riga
   piu' alta della tabella e si porterebbe dietro tutte le altre. */
html body #view-privacy .privacy-badge {
  display: inline-block;
  margin-top: clamp(3px, .6dvh, 7px);
  padding: 2px 9px;
  color: var(--emerald-dark);
  background: var(--emerald-soft);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

html body #view-privacy .privacy-table .privacy-meta { color: var(--emerald-dark); }

html body #view-privacy .privacy-table a {
  color: var(--emerald-dark);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: rgba(0, 168, 120, .4);
  text-underline-offset: 3px;
}

html body #view-privacy .privacy-table code {
  padding: 1px 6px;
  color: var(--ink);
  background: var(--teal-soft);
  border-radius: 6px;
  font-size: 12.5px;
}

/* Sotto i 900 la tabella non ci sta in larghezza: ogni riga diventa una
   scheda e le due colonne di coda si riprendono l'intestazione come
   etichetta. Sei schede impilate non entrano in uno schermo di telefono:
   qui la pagina scorre, ed e' l'unico modo di restare leggibile. */
@media (max-width: 900px) {
  html body #view-privacy .privacy-table-wrap { overflow-x: visible; }

  html body #view-privacy .privacy-table,
  html body #view-privacy .privacy-table tbody { display: block; min-width: 0; }

  html body #view-privacy .privacy-table thead { display: none; }

  html body #view-privacy .privacy-table tbody tr {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 14px;
    padding: 18px;
  }

  html body #view-privacy .privacy-table tbody th,
  html body #view-privacy .privacy-table tbody td {
    width: auto;
    padding: 0;
    font-size: 14px;
  }

  html body #view-privacy .privacy-table tbody td:nth-of-type(1) { grid-area: 1 / 1; }
  html body #view-privacy .privacy-table tbody th { grid-area: 1 / 2 / auto / -1; }
  html body #view-privacy .privacy-table tbody td:nth-of-type(2) { grid-area: 2 / 2 / auto / -1; }
  html body #view-privacy .privacy-table tbody td:nth-of-type(3) { grid-area: 3 / 2; }
  html body #view-privacy .privacy-table tbody td:nth-of-type(4) { grid-area: 3 / 3; }

  html body #view-privacy .privacy-table .privacy-meta::before {
    display: block;
    margin-bottom: 3px;
    color: var(--grey);
    content: attr(data-label);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
}

/* Schermi bassi (portatili 13", finestra non a pieno schermo): i minimi dei
   clamp qui sopra da soli non bastano, restano 40px di troppo. Il titolo
   rinuncia all'andata a capo — due righe di display costano piu' di quanto
   rendano — e le soglie scendono fino al limite di leggibilita'. */
@media (max-height: 760px) and (min-width: 901px) {
  html body #view-privacy .privacy-page,
  html body #view-cookie .cookie-page {
    --p-basso: clamp(8px, 2.6dvh, 32px);
    --p-stacco: clamp(8px, 2.6dvh, 32px);
    --p-riga: clamp(5px, 1.6dvh, 20px);
    --p-testo: clamp(12px, 1.6dvh, 14.5px);
    --p-lead: clamp(12.5px, 1.9dvh, 17px);
  }

  html body #view-privacy.view:not(#view-analysis) .page-heading.privacy-intro h1 br { display: none; }

  html body #view-privacy.view:not(#view-analysis) .page-heading.privacy-intro .lead {
    max-width: 44rem;
    line-height: 1.45;
  }

  html body #view-privacy .privacy-table thead th { padding-block: clamp(5px, 1.3dvh, 16px); }

  html body #view-privacy .privacy-table tbody th,
  html body #view-privacy .privacy-table tbody td { line-height: 1.45; }
}

@media (max-width: 700px) {
  html body #view-privacy.view:not(#view-analysis) .page-heading.privacy-intro h1 {
    font-size: clamp(30px, 8vw, 42px);
  }
}

@media (max-width: 560px) {
  html body #view-privacy .privacy-table tbody td:nth-of-type(3) { grid-area: 3 / 2 / auto / -1; }
  html body #view-privacy .privacy-table tbody td:nth-of-type(4) { grid-area: 4 / 2 / auto / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html body #view-privacy .privacy-table-wrap { animation: none; }
}

/* ===========================================================================
   Righe numerate — il componente della pagina cookie (How it works ha le sue schede, .hiw-*).
   Le schede quadrate spezzavano ogni voce in due mezze frasi e mettevano
   un'icona dove serviva lo stato: qui ogni riga dice numero, nome e frase
   intera, dentro lo stesso riquadro della tabella privacy.

   Le tre pagine stanno nella stessa gabbia: stesse variabili --p-*, stesso
   riquadro largo quanto la tela, stesso attacco sotto l'intestazione.
   Passare dall'una all'altra non deve spostare niente, percio' qui non c'e'
   nessuna misura verticale propria: se il ritmo va cambiato, si cambia nel
   blocco privacy, per tutte e tre.

   Le regole di .legal-cards e .how-it-works-steps qui sopra non hanno piu'
   markup che le usi.
   ======================================================================== */

html body .info-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  animation: premium-rise 620ms ease both;
  animation-delay: 120ms;
}

html body .info-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 0;
  align-items: start;
  margin: 0;
  padding: var(--p-riga) 24px;
}

/* Con l'icona la riga ha tre colonne: il numero resta dov'e' nelle pagine
   senza icona, cosi' le due liste attaccano allo stesso punto. */
html body .info-row:has(.info-icon) {
  grid-template-columns: 64px 44px minmax(0, 1fr);
  column-gap: 18px;
}

html body .info-row + .info-row { border-top: 1px solid var(--line-soft); }
html body .info-row:nth-child(even) { background: rgba(11, 31, 58, .015); }

html body .info-num {
  color: var(--grey-soft);
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.5;
}

html body .info-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--lime-deep);
  background: var(--teal-soft);
  border-radius: 14px;
}

html body .info-icon .ui-icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.7;
}

html body .info-entry h3 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--p-nome);
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.3;
}

html body .info-badge {
  padding: 2px 9px;
  color: var(--muted);
  background: rgba(11, 31, 58, .05);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}

html body .info-badge-consenso {
  color: var(--emerald-dark);
  background: var(--emerald-soft);
}

html body .info-entry p {
  max-width: 52rem;
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: var(--p-testo);
  font-weight: 400;
  line-height: 1.5;
}

html body .info-entry code {
  padding: 1px 6px;
  color: var(--ink);
  background: var(--teal-soft);
  border-radius: 6px;
  font-size: 12.5px;
}

/* Sotto i 900 la colonna del numero e i bordi interni si stringono, come le
   righe della privacy quando la tabella diventa una pila di schede. */
@media (max-width: 900px) {
  html body .info-row { grid-template-columns: 34px minmax(0, 1fr); padding: 18px; }
  html body .info-row:has(.info-icon) { grid-template-columns: 34px 40px minmax(0, 1fr); column-gap: 14px; }
  html body .info-icon { width: 40px; height: 40px; border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html body .info-list { animation: none; }
}

/* ===========================================================================
   Cookie — l'occhiello con la data, la scheda del consenso, la nota finale.
   Il resto della pagina e' il componente qui sopra.

   Il prefisso #view-cookie.view:not(#view-analysis) serve a pareggiare la
   specificita' delle regole comuni privacy/cookie: senza, l'occhiello
   tornerebbe pillola e il titolo perderebbe la misura.
   ======================================================================== */

/* L'occhiello non e' un bottone: riga di codice, e accanto la data di
   revisione, che e' la prima cosa che si controlla in un'informativa. */
html body #view-cookie.view:not(#view-analysis) .page-heading.cookie-intro .section-code {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  width: auto;
  margin: 0 0 var(--p-occhiello);
  padding: 0;
  color: var(--grey);
  background: none;
  border: 0;
  font-size: 11px;
  letter-spacing: .16em;
}

html body #view-cookie .cookie-intro .cookie-updated {
  color: var(--grey-soft);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

html body #view-cookie.view:not(#view-analysis) .page-heading.cookie-intro h1 {
  font-size: var(--p-titolo);
  line-height: 1.04;
}

html body #view-cookie.view:not(#view-analysis) .page-heading.cookie-intro .lead {
  max-width: 34rem;
  margin-top: var(--p-occhiello);
  font-size: var(--p-lead);
  line-height: 1.5;
}

/* ---- La scheda del consenso: l'unica cosa cliccabile della pagina ---- */
html body #view-cookie .cookie-consent {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  margin: 0;
  padding: var(--p-riga) 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  animation: premium-rise 620ms ease both;
  animation-delay: 180ms;
}

html body #view-cookie .cookie-consent-copy { min-width: 0; }

html body #view-cookie .cookie-consent-title {
  margin: 0;
  color: var(--ink);
  font-size: var(--p-nome);
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.4;
}

html body #view-cookie .cookie-consent-state {
  margin: 2px 0 0;
  color: var(--grey);
  font-size: var(--p-testo);
  line-height: 1.5;
}

html body #view-cookie .cookie-consent .cookie-consent-action.platform-action-primary {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 0;
  height: clamp(36px, 5dvh, 44px);
  min-height: 0;
  padding: 0 22px;
  color: #fff;
  background: var(--accent-solid);
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

html body #view-cookie .cookie-consent .cookie-consent-action.platform-action-primary:hover:not(:disabled) {
  background: var(--accent-solid-hover);
  transform: none;
}

html body #view-cookie .cookie-footnote {
  margin: 0;
  color: var(--grey);
  font-size: var(--p-testo);
  line-height: 1.5;
  animation: premium-rise 620ms ease both;
  animation-delay: 240ms;
}

html body #view-cookie .cookie-footnote a {
  color: var(--emerald-dark);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: rgba(0, 168, 120, .4);
  text-underline-offset: 3px;
}

@media (max-width: 700px) {
  html body #view-cookie.view:not(#view-analysis) .page-heading.cookie-intro h1 {
    font-size: clamp(30px, 8vw, 42px);
  }

  html body #view-cookie .cookie-consent { padding: 18px; }

  html body #view-cookie .cookie-consent .cookie-consent-action.platform-action-primary {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #view-cookie .cookie-consent,
  html body #view-cookie .cookie-footnote { animation: none; }
}

/* ===========================================================================
   How it works — la stessa pagina della Panoramica da ospite.
   Prima era vestita da informativa: righe numerate a sinistra, come cookie e
   privacy, e tre passi mentre il percorso ne ha quattro. Ora parla come la
   schermata d'ingresso: colonna centrata, titolo Outfit leggero con l'accento
   pino, schede bianche col filo e l'ombra dei suggerimenti, bottone pino a
   pillola. I quattro passi sono quelli della scheda «Avanzamento».

   Classi proprie (.hiw-*): niente .page-heading ne' .how-it-works-layout,
   cosi' i livelli precedenti del file non ci arrivano. Il ritmo verticale sta
   in dvh come sulle informative: su un portatile basso la pagina si stringe
   invece di scorrere.
   ======================================================================== */

html body #view-how-it-works .hiw {
  --hiw-alto: clamp(12px, 4dvh, 56px);
  --hiw-stacco: clamp(22px, 4.6dvh, 56px);
  --hiw-titolo: clamp(34px, min(4.6vw, 7dvh), 66px);
  /* La riga d'informativa e' fissa in fondo (vedi "Stessa riga in fondo su
     How it works"): il bottone non deve finirci sotto. */
  --hiw-basso: 84px;

  display: flex;
  flex-direction: column;
  gap: var(--hiw-stacco);
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--page-canvas) + 2 * var(--page-gutter));
  min-height: 100dvh;
  margin-inline: auto;
  padding: calc(var(--header-height) + var(--hiw-alto)) var(--page-gutter) var(--hiw-basso);
  text-align: center;
}

/* Col banner cookie alzato la riga sparisce, ma il banner e' piu' alto. */
html body:has(#cookie-banner.is-visible) #view-how-it-works .hiw {
  --hiw-basso: clamp(110px, 14dvh, 140px);
}

/* --- Intestazione: occhiello, titolo, una frase --------------------------- */
html body #view-how-it-works .hiw-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  animation: premium-rise 620ms ease both;
}

/* Lo stesso corpo di "Suggerimenti" sotto la pillola della Panoramica. */
html body #view-how-it-works .hiw-kicker {
  margin: 0 0 clamp(12px, 2dvh, 22px);
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  line-height: 1;
  text-transform: uppercase;
}

html body #view-how-it-works .hiw-intro h1 {
  max-width: 15ch;
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: var(--hiw-titolo);
  font-weight: 300;
  letter-spacing: -.042em;
  line-height: 1.04;
  text-wrap: balance;
}

html body #view-how-it-works .hiw-intro .hero-accent {
  color: var(--pine);
  background: none;
  font-weight: 500;
  -webkit-text-fill-color: currentColor;
}

html body #view-how-it-works .hiw-lead {
  max-width: 38rem;
  margin: clamp(12px, 2.2dvh, 24px) 0 0;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: clamp(14.5px, 2.1dvh, 17px);
  font-weight: 400;
  line-height: 1.55;
  text-wrap: pretty;
}

/* --- I quattro passi ------------------------------------------------------ */
html body #view-how-it-works .hiw-board {
  width: min(1180px, 100%);
}

/* Il filo che li lega passa all'altezza delle icone e si vede solo negli
   spazi fra le schede: e' il connettore verticale della scheda
   «Avanzamento», messo in orizzontale. */
html body #view-how-it-works .hiw-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body #view-how-it-works .hiw-steps::before {
  position: absolute;
  z-index: 0;
  top: calc(clamp(18px, 2.8dvh, 26px) + 20px);
  right: 12%;
  left: 12%;
  height: 1px;
  background: linear-gradient(90deg, var(--emerald-border), rgba(166, 228, 205, .35));
  content: "";
}

html body #view-how-it-works .hiw-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  padding: clamp(18px, 2.8dvh, 26px) 22px clamp(18px, 3dvh, 28px);
  text-align: left;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(11, 31, 58, .04), 0 8px 20px rgba(11, 31, 58, .05);
  transition: border-color var(--motion-premium), box-shadow var(--motion-premium), transform var(--motion-premium);
  animation: premium-rise 620ms ease both;
}

html body #view-how-it-works .hiw-step:nth-child(1) { animation-delay: 90ms; }
html body #view-how-it-works .hiw-step:nth-child(2) { animation-delay: 150ms; }
html body #view-how-it-works .hiw-step:nth-child(3) { animation-delay: 210ms; }
html body #view-how-it-works .hiw-step:nth-child(4) { animation-delay: 270ms; }

html body #view-how-it-works .hiw-step:hover {
  border-color: var(--emerald-border);
  box-shadow: 0 2px 4px rgba(11, 31, 58, .04), 0 18px 44px rgba(11, 31, 58, .09);
  transform: translateY(-2px);
}

html body #view-how-it-works .hiw-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(14px, 2.4dvh, 26px);
}

html body #view-how-it-works .hiw-step-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--pine);
  background: var(--emerald-soft);
  border-radius: 12px;
}

html body #view-how-it-works .hiw-step-icon .ui-icon {
  width: 19px;
  height: 19px;
  stroke-width: 1.8;
}

html body #view-how-it-works .hiw-step-num {
  color: var(--grey-soft);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
}

html body #view-how-it-works .hiw-step h3 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(16px, 2.3dvh, 18.5px);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.25;
}

html body #view-how-it-works .hiw-step p {
  margin: 8px 0 0;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: clamp(13px, 1.85dvh, 14.5px);
  font-weight: 400;
  line-height: 1.55;
}

/* --- In fondo: il bottone pino e la riga per chi ha gia' un account ------- */
html body #view-how-it-works .hiw-cta {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2dvh, 18px);
  align-items: center;
  margin: 0;
  animation: premium-rise 620ms ease both;
  animation-delay: 330ms;
}

/* Il pino e la pillola sono quelli del bottone di ricerca della Panoramica. */
html body #view-how-it-works .hiw-cta .hiw-start {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  height: clamp(46px, 6.6dvh, 54px);
  min-height: 0;
  padding: 0 28px 0 30px;
  color: var(--white);
  background: var(--pine);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(11, 31, 58, .06), 0 10px 24px rgba(61, 154, 99, .22);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  transition: background var(--motion-premium), box-shadow var(--motion-premium);
}

html body #view-how-it-works .hiw-cta .hiw-start:hover:not(:disabled) {
  background: var(--pine-dark);
  box-shadow: 0 1px 2px rgba(11, 31, 58, .06), 0 14px 30px rgba(61, 154, 99, .28);
  transform: none;
}

html body #view-how-it-works .hiw-cta .hiw-start:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 3px;
}

html body #view-how-it-works .hiw-cta .hiw-start .ui-icon {
  width: 17px;
  height: 17px;
  stroke-width: 2;
  transition: transform 160ms ease;
}

html body #view-how-it-works .hiw-cta .hiw-start:hover:not(:disabled) .ui-icon {
  transform: translateX(2px);
}

/* Stesso corpo della riga "Nuovo su Vaglio?" sotto la pillola. */
html body #view-how-it-works .hiw-signin {
  margin: 0;
  color: var(--grey);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
}

html body #view-how-it-works .hiw-signin button {
  display: inline;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: var(--pine);
  background: none;
  border: 0;
  border-radius: 4px;
  box-shadow: none;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--motion-premium);
}

html body #view-how-it-works .hiw-signin button:hover { color: var(--pine-dark); }

html body #view-how-it-works .hiw-signin button:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 3px;
}

/* --- Sotto i 1100px: due per riga, il filo non ha piu' una riga sola ----- */
@media (max-width: 1100px) {
  html body #view-how-it-works .hiw-board { width: min(760px, 100%); }
  html body #view-how-it-works .hiw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body #view-how-it-works .hiw-steps::before { display: none; }
}

/* --- Telefono: una colonna, icona accanto al testo ------------------------ */
@media (max-width: 640px) {
  html body #view-how-it-works .hiw {
    --hiw-alto: 24px;
    --hiw-stacco: 28px;
    --hiw-titolo: clamp(32px, 9vw, 42px);
    justify-content: flex-start;
  }

  html body #view-how-it-works .hiw-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  html body #view-how-it-works .hiw-step {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 14px;
    padding: 16px;
    border-radius: 16px;
  }

  html body #view-how-it-works .hiw-step-head {
    grid-row: 1 / span 2;
    margin: 0;
  }

  html body #view-how-it-works .hiw-step-num { display: none; }

  html body #view-how-it-works .hiw-step h3 { align-self: center; }

  html body #view-how-it-works .hiw-step p { grid-column: 2; margin-top: 4px; }

  html body #view-how-it-works .hiw-cta { width: 100%; }

  html body #view-how-it-works .hiw-cta .hiw-start { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html body #view-how-it-works :is(.hiw-intro, .hiw-step, .hiw-cta) { animation: none; }
  html body #view-how-it-works .hiw-step:hover { transform: none; }
}

/* --- "Scegli il target" dentro la conferma ------------------------------- */
/* Il passo avanti sta dove stava "Cerca" nella pillola di ricerca, accanto a
   "Modifica": e' la stessa riga, la stessa decisione. Sotto, la vecchia fila
   di azioni resta solo come spazio riservato, cosi' la colonna non salta. */
html body #view-analysis #analysis-step-location .zone-selection-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
html body #view-analysis #analysis-step-location .zone-selection .wizard-next {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  height: 46px;
  min-height: 46px;
  margin: 0;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
html body #view-analysis #analysis-step-location .zone-selection .wizard-next .ui-icon {
  width: 16px;
  height: 16px;
}
html body #view-analysis #analysis-step-location .wizard-actions,
html body #view-analysis #analysis-step-location:has(.zone-selection:not(.is-hidden)) .wizard-actions {
  display: flex !important;
  min-height: 48px;
  visibility: hidden;
}
@media (max-width: 900px) {
  html body #view-analysis #analysis-step-location .zone-selection-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
  html body #view-analysis #analysis-step-location .zone-selection .text-button {
    grid-column: auto;
  }
  html body #view-analysis #analysis-step-location .zone-selection .wizard-next {
    height: 42px;
    min-height: 42px;
    padding: 0 18px;
  }
}

/* --- La barra non si sposta quando scegli la localita' ------------------- */
/* La colonna e' centrata in verticale, quindi deve avere la stessa altezza
   vuota e confermata. Qui sopra i suggerimenti sono spenti (display: none),
   ma il blocco "La schermata sta ferma" li riaccendeva invisibili appena la
   localita' era scelta: 130px in piu' e la barra saliva di mezza altezza.
   Spenti restano spenti in tutti gli stati; la riga per gli ospiti invece
   tiene il suo posto (visibility, non display). */
html body #view-analysis #analysis-step-location .zone-field:has(.zone-results:not(.is-hidden)) .popular-zones,
html body #view-analysis #analysis-step-location .zone-field.is-selected:not(.is-editing) .popular-zones {
  display: none !important;
}

/* Autofill del browser: niente fondo grigio/azzurro nei campi compilati,
   restano come gli altri campi dei pop-up. */
html body input:-webkit-autofill,
html body input:-webkit-autofill:hover,
html body input:-webkit-autofill:focus,
html body textarea:-webkit-autofill,
html body select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  transition: background-color 99999s ease-out;
}
html body input:autofill {
  background-color: #fff !important;
}

/* ---- 5. Riepilogo: la descrizione dell'azienda prende lo spazio libero ----
   La colonna e' alta quanto lo schermo: la card «La tua azienda» si allunga
   fino a dove arrivano le altre card e i pulsanti, e la descrizione scorre
   dentro la card. Cosi' Indietro e Continua restano in fondo e la pagina non
   scorre. Su schermi bassi o stretti torna il comportamento normale. */
@media (min-width: 761px) and (min-height: 640px) {
  html body .onboarding-dialog[data-onboarding-step="5"] .onboarding-main {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  html body .onboarding-dialog[data-onboarding-step="5"] .onboarding-content,
  html body .onboarding-dialog[data-onboarding-step="5"] .onboarding-panels,
  html body .onboarding-dialog[data-onboarding-step="5"] .onboarding-section-summary {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
  }
  html body .onboarding-dialog[data-onboarding-step="5"] .onboarding-section-summary[hidden] { display: none; }
  html body .onboarding-dialog[data-onboarding-step="5"] .onboarding-summary {
    min-height: 0;
    flex: 1 1 auto;
    grid-template-rows: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
  html body .onboarding-dialog[data-onboarding-step="5"] .onboarding-summary-company {
    display: flex;
    min-height: 0;
    flex-direction: column;
  }
  html body .onboarding-dialog[data-onboarding-step="5"] #onboarding-summary-description {
    max-height: none;
    min-height: 3em;
    overflow: auto;
    flex: 1 1 auto;
  }
  html body .onboarding-dialog[data-onboarding-step="5"] .onboarding-actions {
    flex: none;
    padding-top: 32px;
  }
}

/* ---- Schermi bassi: l'onboarding sta tutto nella schermata -------------
   A 1366x768 i passi 1 e 3 scorrevano di ~140px e «Continua» finiva sotto
   il bordo. Qui si stringono solo gli spazi comuni (barra, titolo, margini
   attorno alla card): la card resta quella del design. */
@media (min-width: 761px) and (max-height: 820px) {
  /* La barra resta di 96px, se no «Accedi» sale e non e' piu' allineato al
     logo, che sta fuori dalla barra: il titolo le passa sotto, non accanto. */
  html body .onboarding-dialog .onboarding-main {
    padding-top: 84px;
    padding-bottom: 28px;
  }
  html body .onboarding-dialog .onboarding-heading {
    margin-top: 0;
    gap: 10px;
  }
  html body .onboarding-dialog .onboarding-heading h2 { font-size: clamp(32px, 3.4vw, 46px); }
  html body .onboarding-dialog .onboarding-panels { margin-top: 24px; }
  html body .onboarding-dialog .onboarding-panel { padding: 24px 28px 26px; }
  html body .onboarding-dialog .onboarding-actions { padding-top: 24px; }
}