/* Settings: a focused form, with guidance alongside it. */
html:has(body[data-active-view="settings"]) { height: auto; overflow: auto; scrollbar-gutter: auto; background: var(--white); }
html body[data-active-view="settings"] { --header-height: 64px; height: auto; min-height: 100dvh; overflow: visible; background: var(--white); }
html body[data-active-view="settings"] .app-header { height: 64px; min-height: 64px; padding: 0 var(--page-gutter); background: var(--white); border-bottom: 0; }
html body[data-active-view="settings"] .app-content { display: block; height: auto; min-height: 100dvh; margin: 0; padding: 64px 0 0; overflow: visible; background: var(--white); }
html body[data-active-view="settings"] .app-main { display: block; width: 100%; height: auto; min-height: 0; max-height: none; margin: 0; padding: 20px var(--page-gutter) 48px; overflow: visible; background: var(--white); }
html body[data-active-view="settings"] > .sidebar-footer { display: none; }
html body[data-active-view="settings"] #view-settings { width: 100%; max-width: 1120px; height: auto; min-height: 0; margin: 0 auto; padding: 0; overflow: visible; }
html body[data-active-view="settings"] #view-settings .settings-shell { display: flex; align-items: stretch; gap: 16px; }
html body[data-active-view="settings"] #view-settings .settings-page-intro { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: none; gap: 24px; margin: 0; padding: 0; }
html body[data-active-view="settings"] #view-settings .settings-page-intro h1 { margin: 0; color: #0b1f3a; -webkit-text-fill-color: currentColor; font: 500 28px/1.2 var(--font-display); letter-spacing: -.04em; }
html body[data-active-view="settings"] #view-settings .settings-page-intro .lead { max-width: none; margin: 7px 0 0; color: #607596; font: 400 14px/1.5 var(--font-sans); }
html body[data-active-view="settings"] #view-settings .settings-save-status { display: inline-flex; flex: none; align-items: center; gap: 9px; margin: 0; padding: 9px 14px; color: #296f68; background: #eaf6f0; border-radius: 12px; font: 500 12px/1.4 var(--font-sans); }
html body[data-active-view="settings"] #view-settings .settings-save-status > .ui-icon { flex: none; width: 15px; height: 15px; }
html body[data-active-view="settings"] #view-settings .settings-save-status.is-pending { color: #976413; background: #fbf5e9; }
html body[data-active-view="settings"] #view-settings .settings-save-status.is-error { color: #a0443a; background: #fff0ed; }
html body[data-active-view="settings"] #view-settings .settings-save-status:is(.is-pending, .is-error) > .ui-icon { display: none; }
html body[data-active-view="settings"] #view-settings .settings-tabs { flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
html body[data-active-view="settings"] #view-settings .settings-tab { gap: 9px; width: auto; min-height: 44px; padding: 10px 17px; color: #284469; background: #fff; border: 1px solid #e1e6ee; border-radius: 12px; box-shadow: none; font: 400 14px/1.4 var(--font-sans); }
html body[data-active-view="settings"] #view-settings .settings-tab b { font-size: inherit; font-weight: 400; }
html body[data-active-view="settings"] #view-settings .settings-tab .ui-icon { width: 15px; height: 15px; color: currentColor; }
html body[data-active-view="settings"] #view-settings .settings-tab small { display: inline; color: #9b680e; font-size: 12px; white-space: nowrap; }
html body[data-active-view="settings"] #view-settings .settings-tab.is-active { color: white; background: #152039; border-color: #152039; box-shadow: none; }
html body[data-active-view="settings"] #view-settings .settings-tab.is-active b { font-weight: 600; }
html body[data-active-view="settings"] #view-settings .settings-tab.is-active small { color: #f4d290; }
html body[data-active-view="settings"] #view-settings .settings-tab:hover:not(.is-active) { background: #f5f7fa; border-color: #cbd5e1; }
html body[data-active-view="settings"] #view-settings .settings-pages { gap: 0; }
html body[data-active-view="settings"] #view-settings .settings-page.is-active { overflow: visible; }
html body[data-active-view="settings"] #view-settings .settings-page[hidden],
html body[data-active-view="settings"] #view-settings [hidden] { display: none !important; }
html body[data-active-view="settings"] #view-settings #settings-profile-section { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: 18px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; }
html body[data-active-view="settings"] #view-settings .settings-profile-main,
html body[data-active-view="settings"] #view-settings :is(.integration-panel, .weights-panel) { padding: 20px 22px; background: #fff; border: 1px solid #e9edf2; border-radius: 16px; box-shadow: 0 14px 34px rgba(20, 38, 64, .05), 0 2px 3px rgba(20, 38, 64, .025); backdrop-filter: none; min-width: 0; }
html body[data-active-view="settings"] #view-settings .settings-card-header { gap: 14px; margin: 0 0 16px; padding: 0; border: 0; }
html body[data-active-view="settings"] #view-settings .settings-card-header h2 { margin: 0; color: #0b1f3a; font: 500 21px/1.3 var(--font-display); letter-spacing: -.025em; }
html body[data-active-view="settings"] #view-settings .settings-card-header p { max-width: none; margin: 4px 0 0; color: #607596; font: 400 14px/1.55 var(--font-sans); }
html body[data-active-view="settings"] #view-settings .settings-card-icon { width: 36px; height: 36px; color: #488868; background: #edf7f1; border-radius: 10px; }
html body[data-active-view="settings"] #view-settings #settings-company-profile-form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
html body[data-active-view="settings"] #view-settings .settings-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; }
html body[data-active-view="settings"] #view-settings .field { min-width: 0; gap: 0; margin: 0; }
html body[data-active-view="settings"] #view-settings .field label { margin: 0 0 6px; color: #0b1f3a; font: 500 13px/1.4 var(--font-sans); letter-spacing: 0; }
html body[data-active-view="settings"] #view-settings .settings-control-with-icon { min-width: 0; }
html body[data-active-view="settings"] #view-settings .settings-control-with-icon > .ui-icon { left: 16px; width: 16px; height: 16px; color: #8b98ae; }
html body[data-active-view="settings"] #view-settings .settings-profile-form input,
html body[data-active-view="settings"] #view-settings .site-select-trigger { height: 44px; min-height: 44px; padding: 0 16px 0 44px; color: #0b1f3a; background: white; border: 1px solid #d9e0eb; border-radius: 12px; box-shadow: none; font: 400 14px/1.5 var(--font-sans); }
html body[data-active-view="settings"] #view-settings .site-select { width: 100%; min-width: 0; }
html body[data-active-view="settings"] #view-settings .site-select-trigger { justify-content: space-between; }
html body[data-active-view="settings"] #view-settings .site-select-menu { z-index: 30; }
html body[data-active-view="settings"] #view-settings .settings-source-status.is-ready { display: none; }
html body[data-active-view="settings"] #view-settings .settings-source-status.is-warning { margin: 8px 0 0; color: #98640f; background: #fbf8f0; width: fit-content; max-width: 100%; padding: 2px 8px; border-radius: 6px; }
html body[data-active-view="settings"] #view-settings .settings-ideal-client { margin: 0; }
html body[data-active-view="settings"] #view-settings .settings-ideal-client > label { margin: 0 0 4px; font: 500 21px/1.3 var(--font-display); letter-spacing: -.025em; }
html body[data-active-view="settings"] #view-settings .settings-field-copy { margin: 0 0 15px; color: #607596; font: 400 14px/1.55 var(--font-sans); }
html body[data-active-view="settings"] #view-settings .settings-profile-form textarea { display: block; flex: none; width: 100%; height: 118px; min-height: 118px; margin: 0; padding: 14px 16px; color: #0b1f3a; background: #fff; border: 1px solid #d9e0eb; border-radius: 12px; box-shadow: none; font: 400 15px/1.6 var(--font-sans); resize: vertical; }
html body[data-active-view="settings"] #view-settings .field-counter { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 7px 0 0; }
html body[data-active-view="settings"] #view-settings .field-counter :is(small, output) { margin: 0; color: #8d9bb0; font: 400 12px/1.5 var(--font-sans); }
html body[data-active-view="settings"] #view-settings .field-counter output { flex: none; }
html body[data-active-view="settings"] #view-settings .settings-card-footer { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin: -4px 0 0; padding: 16px 0 0; border-top: 1px solid #e9edf2; background: none; }
html body[data-active-view="settings"] #view-settings .settings-card-meta { flex: 1; min-width: 180px; }
html body[data-active-view="settings"] #view-settings .settings-last-saved { display: flex; align-items: center; gap: 10px; margin: 0; color: #8997ac; font: 400 12px/1.5 var(--font-sans); }
html body[data-active-view="settings"] #view-settings .settings-saved-mark { display: inline-flex; width: 14px; height: 14px; color: #5e9f71; background: none; }
html body[data-active-view="settings"] #view-settings .profile-panel.is-dirty .settings-saved-mark { visibility: hidden; }
html body[data-active-view="settings"] #view-settings .settings-profile-feedback { max-width: 450px; margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #387653; }
html body[data-active-view="settings"] #view-settings .settings-profile-feedback.is-error { color: #ac493d; }
html body[data-active-view="settings"] #view-settings .settings-profile-actions { display: flex; flex-direction: row; flex: none; gap: 10px; margin: 0 0 0 auto; padding: 0; border: 0; }
html body[data-active-view="settings"] #view-settings .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-height: 44px; margin: 0; padding: 10px 18px; color: #284469; background: #fff; border: 1px solid #d9e0eb; border-radius: 12px; box-shadow: none; font: 400 13px/1.4 var(--font-sans); }
html body[data-active-view="settings"] #view-settings .button-primary { color: #fff; background: #488868; border-color: #488868; font-weight: 600; }
html body[data-active-view="settings"] #view-settings .button:hover:not(:disabled) { background: #f5f7fa; transform: none; }
html body[data-active-view="settings"] #view-settings .button-primary:hover:not(:disabled) { background: #397557; border-color: #397557; }
html body[data-active-view="settings"] #view-settings .button:disabled { cursor: not-allowed; opacity: .58; }
html body[data-active-view="settings"] #view-settings :is(#settings-profile-save, #weights-save) { min-width: 0; min-height: 44px; padding: 10px 20px; color: white; background: #488868; border: 1px solid #488868; border-radius: 12px; font-size: 13px; }
html body[data-active-view="settings"] #view-settings :is(#settings-profile-save, #weights-save):disabled { opacity: .68; }

html body[data-active-view="settings"] #view-settings .settings-advice-guide { color: #386e70; background: #f4faf6; border-color: #dcefe3; }

html body[data-active-view="settings"] #view-settings .settings-privacy-note { display: flex; gap: 12px; padding: 16px 18px; font-size: 12px; }
html body[data-active-view="settings"] #view-settings .settings-privacy-note > .ui-icon { flex: none; width: 17px; height: 17px; color: #8b98ae; }
html body[data-active-view="settings"] #view-settings .is-hidden { display: none !important; }
html body[data-active-view="settings"] #view-settings :is(button, a, input, textarea, summary):focus-visible { outline: 2px solid #488868; outline-offset: 3px; }
html body[data-active-view="settings"] #view-settings .settings-profile-form :is(input, textarea):focus { border-color: #488868; background: #fff; box-shadow: 0 0 0 3px #48886814; }

@media (max-width: 1000px) {
  html body[data-active-view="settings"] .app-main { padding: 20px 24px 40px; }
  html body[data-active-view="settings"] #view-settings #settings-profile-section { grid-template-columns: minmax(0, 1fr) 280px; }
  html body[data-active-view="settings"] #view-settings .settings-profile-main { padding: 24px; }
  html body[data-active-view="settings"] #view-settings .settings-form-grid { grid-template-columns: 1fr; }
  html body[data-active-view="settings"] #view-settings .settings-card-footer { gap: 14px; }
  html body[data-active-view="settings"] #view-settings .settings-card-meta { flex-basis: 100%; }
}
@media (max-width: 760px) {
  html body[data-active-view="settings"] #view-settings #settings-profile-section { grid-template-columns: minmax(0, 1fr); }

  html body[data-active-view="settings"] #view-settings .settings-page-intro { align-items: flex-start; flex-direction: column; gap: 12px; }
  html body[data-active-view="settings"] #view-settings .settings-profile-main { padding: 22px; }
  html body[data-active-view="settings"] #view-settings .settings-profile-form textarea { height: 150px; }
}
@media (max-width: 560px) {
  html body[data-active-view="settings"] .app-header { display: flex; justify-content: space-between; gap: 8px; padding: 0 16px; }
  html body[data-active-view="settings"] .app-header .sidebar-head { flex: none; }
  html body[data-active-view="settings"] .app-header .brand { gap: 6px; }
  html body[data-active-view="settings"] .app-header .brand .brand-word { font-size: 17px; }
  html body[data-active-view="settings"] .app-header .brand-mark { width: 24px; height: 24px; }
  html body[data-active-view="settings"] .app-header .main-nav { position: relative; inset: auto; width: auto; min-width: 0; gap: 0; margin: 0; transform: none; }
  html body[data-active-view="settings"] .app-header .nav-item { width: 44px; min-width: 44px; min-height: 44px; padding: 10px; }
  html body[data-active-view="settings"] .app-header .account-menu-wrap { flex: none; }
  html body[data-active-view="settings"] .app-main { padding: 20px 16px 32px; }
  html body[data-active-view="settings"] #view-settings .settings-page-intro h1 { font-size: 26px; }
  html body[data-active-view="settings"] #view-settings .settings-tabs { flex-wrap: nowrap; overflow-x: auto; padding: 4px 3px 8px; margin: -4px -3px -8px; }
  html body[data-active-view="settings"] #view-settings .settings-tab { flex: none; min-height: 44px; padding: 10px 13px; font-size: 13px; }
  html body[data-active-view="settings"] #view-settings .settings-profile-main,
  html body[data-active-view="settings"] #view-settings :is(.integration-panel, .weights-panel) { padding: 20px 16px; border-radius: 16px; }

  html body[data-active-view="settings"] #view-settings .settings-profile-form :is(input, textarea) { font-size: 16px; }
  html body[data-active-view="settings"] #view-settings .settings-profile-form textarea { height: 150px; }
  html body[data-active-view="settings"] #view-settings .settings-profile-actions { width: 100%; }
  html body[data-active-view="settings"] #view-settings .settings-profile-actions .button-primary { flex: 1; }
  html body[data-active-view="settings"] #view-settings .field-counter { align-items: flex-start; }
}
@media (max-width: 380px) {
  html body[data-active-view="settings"] .app-header .brand-word { display: none; }
}

/* Keep compact cards within the desktop viewport, without stretching fields. */
@media (min-width: 851px) {
  html:has(body[data-active-view="settings"]) { height: 100%; overflow: hidden; }
  html body[data-active-view="settings"] { height: 100dvh; min-height: 0; overflow: hidden; }
  html body[data-active-view="settings"] .app-header { padding-inline: var(--page-gutter); }
  html body[data-active-view="settings"] .app-content { display: flex; flex-direction: column; height: 100dvh; min-height: 0; overflow: hidden; }
  html body[data-active-view="settings"] .app-main { display: flex; flex: 1; min-height: 0; padding: 24px var(--page-gutter) 0; overflow: hidden; }
  html body[data-active-view="settings"] #view-settings.is-active { display: flex; flex: 1; height: 100%; min-height: 0; overflow: hidden; }
  html body[data-active-view="settings"] #view-settings .settings-shell { flex: 1; min-height: 0; }
  html body[data-active-view="settings"] #view-settings .settings-pages { display: flex; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: 20px; }
  html body[data-active-view="settings"] #view-settings .settings-page.is-active { flex: none; height: auto; min-height: 0; overflow: visible; }
  html body[data-active-view="settings"] #view-settings #settings-profile-section { align-items: start; }
  html body[data-active-view="settings"] #view-settings #settings-company-profile-form { flex: none; }
  html body[data-active-view="settings"] #view-settings .settings-ideal-client { display: flex; flex: none; flex-direction: column; }
  html body[data-active-view="settings"] #view-settings .settings-profile-form textarea { flex: none; height: 112px; min-height: 112px; }
}
@media (min-width: 851px) and (max-width: 1100px) {
  html body[data-active-view="settings"] .app-main { padding: 20px 24px 0; }
}

/* Il menu resta allineato come in Panoramica: Impostazioni e Account usano la
   stessa barra flex delle altre sezioni, non la griglia a tre colonne che
   centrava la pastiglia solo qui. */
html body:is([data-active-view="settings"], [data-active-view="account"]) .app-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  grid-template-columns: none;
}

/* L'aside del profilo ospita solo l'avviso sui pesi: quando e' nascosto la
   colonna da 280px resterebbe vuota, quindi il form prende tutta la larghezza. */
html body[data-active-view="settings"] #view-settings #settings-profile-section:not(:has(.settings-profile-aside > :not(.is-hidden))) { grid-template-columns: minmax(0, 1fr); }

/* Servizi collegati e Pesi dello score: stessa palette del Profilo aziendale.
   Testo #0b1f3a, secondario #607596, bordi #e9edf2/#d9e0eb, verde #488868,
   avvisi in ambra come l'avviso sui pesi. Nessuna modifica di geometria. */
html body[data-active-view="settings"] #view-settings :is(.integration-panel, .weights-panel) { color: #0b1f3a; }
html body[data-active-view="settings"] #view-settings .settings-card-icon .ui-icon { color: #488868; }

html body[data-active-view="settings"] #view-settings :is(.integration-row, .integration-row + .integration-row, .weight-row, .weight-row:first-child) { background: #fff; border: 1px solid #e9edf2; border-radius: 12px; box-shadow: none; }
html body[data-active-view="settings"] #view-settings :is(.integration-row, .integration-row + .integration-row):hover { background: #f5f7fa; border-color: #d9e0eb; }
html body[data-active-view="settings"] #view-settings .integration-copy b { color: #0b1f3a; font: 500 14px/1.3 var(--font-sans); }
html body[data-active-view="settings"] #view-settings .integration-copy small { color: #607596; font: 400 12px/1.4 var(--font-sans); }
html body[data-active-view="settings"] #view-settings :is(.integration-mark, .integration-row[data-provider] .integration-mark) { color: #488868; background: #edf7f1; border-color: transparent; border-radius: 10px; }
html body[data-active-view="settings"] #view-settings .status-chip { font: 500 12px/1 var(--font-sans); border-radius: 8px; }
html body[data-active-view="settings"] #view-settings .status-chip.is-configured { color: #387653; background: #eaf6f0; border: 1px solid #dcefe3; }
html body[data-active-view="settings"] #view-settings .status-chip.is-missing { color: #94630d; background: #fbf8f0; border: 1px solid #efdfba; }
html body[data-active-view="settings"] #view-settings .integration-manage { min-height: 36px; padding: 8px 14px; color: #284469; background: #fff; border: 1px solid #d9e0eb; border-radius: 10px; }
html body[data-active-view="settings"] #view-settings :is(.integration-manage, #weights-regenerate):hover:not(:disabled) { background: #f5f7fa; border-color: #cbd5e1; }
html body[data-active-view="settings"] #view-settings .configuration-note { color: #607596; background: #f4faf6; border: 1px solid #dcefe3; border-radius: 12px; }
html body[data-active-view="settings"] #view-settings .configuration-note strong { color: #387653; font-weight: 500; }
html body[data-active-view="settings"] #view-settings .configuration-note .ui-icon { color: #488868; }
html body[data-active-view="settings"] #view-settings .skeleton-row { background: #f5f7fa; }

html body[data-active-view="settings"] #view-settings :is(.weights-legend summary small, .legend-content > p, .legend-content .legend-note, .weight-definitions dd) { color: #607596; }
html body[data-active-view="settings"] #view-settings .legend-icon { color: #488868; background: #edf7f1; border-color: #dcefe3; }
html body[data-active-view="settings"] #view-settings .legend-chevron { color: #8b98ae; }
html body[data-active-view="settings"] #view-settings .legend-content { border-top-color: #e9edf2; }
html body[data-active-view="settings"] #view-settings .weight-definitions > div { background: #f5f7fa; border-color: #e9edf2; }
html body[data-active-view="settings"] #view-settings .weight-definitions dt { color: #0b1f3a; }

html body[data-active-view="settings"] #view-settings :is(#weights-message, #weights-generate-status) { color: #8997ac; font: 400 12px/1.5 var(--font-sans); }
/* Il tema premium colora questi due bottoni con selettori a id: servono id anche qui. */
html body[data-active-view="settings"] #view-settings :is(#integration-list .integration-manage, #weights-regenerate) { color: #284469; background: #fff; border: 1px solid #d9e0eb; }

/* Come la card «Chi sei»: niente fondi colorati. Icone grigie come quelle dei
   campi, righe bordate come gli input, testo blu notte e grigio-blu. */
html body[data-active-view="settings"] #view-settings :is(.integration-panel, .weights-panel) .settings-card-icon { color: #8b98ae; background: none; border: 0; }
html body[data-active-view="settings"] #view-settings :is(.integration-panel, .weights-panel) .settings-card-icon .ui-icon { color: #8b98ae; }
html body[data-active-view="settings"] #view-settings :is(.integration-row, .integration-row + .integration-row, .weight-row, .weight-row:first-child, .weights-legend) { background: #fff; border-color: #d9e0eb; }
html body[data-active-view="settings"] #view-settings :is(.integration-mark, .integration-row[data-provider] .integration-mark) { color: #8b98ae; background: none; border: 0; }
html body[data-active-view="settings"] #view-settings .integration-mark .ui-icon { color: #8b98ae; }
html body[data-active-view="settings"] #view-settings :is(.status-chip.is-configured, .status-chip.is-missing) { color: #607596; background: #fff; border: 1px solid #d9e0eb; }
html body[data-active-view="settings"] #view-settings .status-chip.is-configured { color: #0b1f3a; }
html body[data-active-view="settings"] #view-settings .configuration-note { color: #607596; background: none; border: 0; padding-inline: 0; }
html body[data-active-view="settings"] #view-settings .configuration-note strong { color: #0b1f3a; }
html body[data-active-view="settings"] #view-settings .configuration-note .ui-icon { color: #8b98ae; }
html body[data-active-view="settings"] #view-settings .legend-icon { color: #8b98ae; background: none; border-color: #d9e0eb; }
html body[data-active-view="settings"] #view-settings .weight-definitions > div { background: #fff; border-color: #e9edf2; }

/* Loghi dei servizi nei colori dei marchi. */
html body[data-active-view="settings"] #view-settings .integration-row[data-provider="google"] .integration-mark,
html body[data-active-view="settings"] #view-settings .integration-row[data-provider="google"] .integration-mark .ui-icon { color: #EA4335; }
html body[data-active-view="settings"] #view-settings .integration-row[data-provider="gemini"] .integration-mark,
html body[data-active-view="settings"] #view-settings .integration-row[data-provider="gemini"] .integration-mark .ui-icon { color: #4285F4; }
html body[data-active-view="settings"] #view-settings .integration-row[data-provider="notion"] .integration-mark { color: #000; font-weight: 700; }
/* Loghi originali (Wikimedia Commons): nessun colore imposto, solo misura. */
html body[data-active-view="settings"] #view-settings .integration-mark .integration-logo { display: block; width: 22px; height: 22px; object-fit: contain; }

/* Popup di Servizi collegati: leggibile e nella palette del profilo.
   Il dialog vive fuori da #view-settings, quindi si aggancia al suo id. */
html body #integration-dialog { width: min(600px, calc(100% - 32px)); max-width: min(600px, calc(100% - 32px)); color: #0b1f3a; background: #fff; border: 1px solid #e9edf2; border-radius: 16px; box-shadow: 0 24px 60px rgba(20, 38, 64, .14); color-scheme: light; }
html body #integration-dialog .config-header h2 { color: #0b1f3a; }
html body #integration-dialog .config-header p:not(.section-code) { color: #607596; font-size: 14px; line-height: 1.55; }
html body #integration-dialog .section-code { color: #607596; }
html body #integration-dialog .config-fields { gap: 18px; scrollbar-color: #cbd5e1 transparent; }
html body #integration-dialog .field label,
html body #integration-dialog .field legend { margin-bottom: 6px; color: #0b1f3a; font: 500 14px/1.4 var(--font-sans); }
html body #integration-dialog .field small { margin-top: 6px; color: #607596; font-size: 13px; line-height: 1.5; }
html body #integration-dialog .field :is(input[type="text"], input[type="password"], input[type="url"]) { height: 44px; color: #0b1f3a; background: #fff; border: 1px solid #d9e0eb; border-radius: 12px; font-size: 14px; }
html body #integration-dialog .field :is(input[type="text"], input[type="password"], input[type="url"]):focus { border-color: #488868; box-shadow: 0 0 0 3px #48886814; }
html body #integration-dialog .setup-guide,
html body #integration-dialog .setup-advanced { background: #fff; border: 1px solid #d9e0eb; border-radius: 12px; }
html body #integration-dialog :is(.setup-guide, .setup-advanced) summary strong { color: #0b1f3a; font-size: 14px; font-weight: 500; }
html body #integration-dialog :is(.setup-guide, .setup-advanced) summary small { color: #607596; font-size: 13px; font-weight: 400; }
html body #integration-dialog :is(.setup-guide, .setup-advanced) .legend-icon { color: #8b98ae; background: none; border-color: #d9e0eb; }
html body #integration-dialog :is(.setup-guide, .setup-advanced) .legend-chevron { width: 16px; height: 16px; color: #8b98ae; }
html body #integration-dialog .setup-guide-steps li { color: #0b1f3a; font-size: 14px; line-height: 1.55; }
html body #integration-dialog .setup-guide-steps li > span { color: #607596; font-size: 13px; font-weight: 500; }
html body #integration-dialog .setup-guide-steps a { color: #0b1f3a; text-decoration-color: #cbd5e1; }
html body #integration-dialog .destination-type-card { background: #fff; border-color: #d9e0eb; }
html body #integration-dialog .destination-type-option input:checked + .destination-type-card { background: #fff; border-color: #0b1f3a; box-shadow: 0 0 0 1px #0b1f3a; }
html body #integration-dialog .destination-type-card strong { color: #0b1f3a; font-size: 14px; }
html body #integration-dialog .destination-type-card small { color: #607596; font-size: 13px; }
html body #integration-dialog .destination-type-icon { color: #8b98ae; background: none; }
html body #integration-dialog .config-actions .action-row-end { margin-left: auto; }
html body #integration-dialog .config-feedback { font-size: 13px; }
html body #integration-dialog .setup-guide-steps li > p { margin: 0; color: #0b1f3a; font-size: 14px; line-height: 1.55; }
html body #integration-dialog .destination-type-icon { border-color: transparent; }
html body #integration-dialog :is(.site-select-trigger, .model-picker-trigger) :is(strong, span, b) { color: #0b1f3a; font-weight: 400; }

/* Stato dei servizi: verde se attivo, ambra se da configurare. */
html body[data-active-view="settings"] #view-settings .status-chip.is-configured { color: #387653; background: #eaf6f0; border: 1px solid #cfe8da; }
html body[data-active-view="settings"] #view-settings .status-chip.is-missing { color: #94630d; background: #fbf5e9; border: 1px solid #efdfba; }

/* Nota credenziali: icona centrata sulla prima riga del testo. */
html body[data-active-view="settings"] #view-settings .configuration-note { align-items: flex-start; line-height: 20px; }
html body[data-active-view="settings"] #view-settings .configuration-note > .ui-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; }
html body[data-active-view="settings"] #view-settings .configuration-note > span { line-height: 20px; }
/* Selettore modelli: la riga secondaria vuota spingeva il testo in alto;
   quando c'e', nome e identificativo restavano incollati perche' il bottone
   e' alto quanto un campo e le due righe non avevano ne' spazio ne' respiro. */
html body #integration-dialog .model-picker-trigger { height: auto; min-height: var(--control-height); max-height: none; padding-top: 8px; padding-bottom: 8px; align-items: center; }
html body #integration-dialog .model-picker-trigger > span { justify-content: center; gap: 4px; }
html body #integration-dialog .model-picker-trigger strong { line-height: 1.3; }
html body #integration-dialog .model-picker-trigger small { margin: 0; line-height: 1.35; }
html body #integration-dialog .model-picker-trigger small:empty { display: none; }

/* Menu modelli nel popup: galleggia sopra il resto (position: fixed, coordinate
   da app.js) cosi' il popup non si allunga e l'area che scorre non lo taglia.
   Senza backdrop-filter il dialog non fa da contenitore ai figli fixed. */
html body #integration-dialog { backdrop-filter: none; -webkit-backdrop-filter: none; }
html body #integration-dialog .model-picker-menu { position: fixed; z-index: 50; margin: 0; color: #0b1f3a; background: #fff; border: 1px solid #d9e0eb; border-radius: 12px; box-shadow: 0 18px 44px rgba(20, 38, 64, .18); display: flex; flex-direction: column; }
html body #integration-dialog .model-picker-options { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
html body #integration-dialog .model-picker-search-wrap { background: #fff; border-bottom-color: #e9edf2; }
html body #integration-dialog .model-picker-search-wrap > .ui-icon { left: 22px; width: 16px; height: 16px; color: #8b98ae; }
html body #integration-dialog .field .model-picker-search { height: 40px; min-height: 40px; padding: 8px 12px 8px 38px !important; color: #0b1f3a; border: 1px solid #d9e0eb; border-radius: 10px; font-size: 14px !important; }
html body #integration-dialog .field .model-picker-search:focus { border-color: #488868; box-shadow: 0 0 0 3px #48886814; }
html body #integration-dialog .model-picker-option { color: #0b1f3a; font-weight: 400; }
html body #integration-dialog .model-picker-option strong { font-weight: 400; }
html body #integration-dialog .model-picker-option[aria-selected="true"] { color: #387653; background: #eaf6f0; }
/* display: flex qui sopra batteva l'attributo hidden: il menu restava visibile. */
html body #integration-dialog .model-picker-menu[hidden] { display: none; }

/* «N da collegare» nella linguetta: pastiglia ambra centrata sul testo. */
html body[data-active-view="settings"] #view-settings .settings-tab small { display: inline-flex; align-items: center; align-self: center; height: 22px; margin: 0; padding: 0 8px; color: #94630d; background: #fbf5e9; border: 1px solid #efdfba; border-radius: 999px; font: 500 12px/1 var(--font-sans); white-space: nowrap; }
html body[data-active-view="settings"] #view-settings .settings-tab small[hidden] { display: none; }
html body[data-active-view="settings"] #view-settings .settings-tab.is-active small { color: #f4d290; background: rgba(244, 210, 144, .14); border-color: rgba(244, 210, 144, .32); }

/* Da configurare: rosso se serve per cercare, grigio se facoltativo. */
html body[data-active-view="settings"] #view-settings .status-chip.is-missing.is-required { color: #a0443a; background: #fff0ed; border: 1px solid #f2c9c1; }
html body[data-active-view="settings"] #view-settings .status-chip.is-missing.is-optional { color: #607596; background: #f5f7fa; border: 1px solid #e1e6ee; }

/* «N da collegare» conta solo servizi obbligatori: rosso come le loro etichette. */
html body[data-active-view="settings"] #view-settings .settings-tab small { color: #a0443a; background: #fff0ed; border-color: #f2c9c1; }
html body[data-active-view="settings"] #view-settings .settings-tab.is-active small { color: #ffb4a8; background: rgba(255, 180, 168, .14); border-color: rgba(255, 180, 168, .34); }

/* Avviso modello Gemini non utilizzabile per l'analisi. */
html body #integration-dialog .config-model-warning { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 0; padding: 12px 14px; color: #a0443a; background: #fff0ed; border: 1px solid #f2c9c1; border-radius: 12px; font-size: 13px; line-height: 20px; }
html body #integration-dialog .config-model-warning[hidden] { display: none; }
html body #integration-dialog .config-model-warning > .ui-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: #a0443a; }
/* Il ritmo verso il modello: non e' un errore, e' come lavora Vaglio. */
html body #integration-dialog .config-model-rate { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid #e1e6ee; font: 400 12px/1.5 var(--font-sans); color: #607596; }
html body #integration-dialog .config-model-rate a { color: inherit; text-decoration: underline; }
html body #integration-dialog .field small.is-error { color: #a0443a; }
html body #integration-dialog .model-check-unverified { color: #c2700c; font-weight: 500; }

/* Catalogo Gemini diviso per esito della prova di compatibilita'. */
html body #integration-dialog .model-picker-group { margin: 0; padding: 10px 12px 6px; background: #fff; font: 600 11px/1.3 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; }
html body #integration-dialog .model-picker-group.is-ok { color: #387653; }
html body #integration-dialog .model-picker-group.is-unknown { color: #607596; }
html body #integration-dialog .model-picker-group.is-ko { color: #a0443a; border-top: 1px solid #e9edf2; }
html body #integration-dialog .model-picker-option.is-compat-ko strong,
html body #integration-dialog .model-picker-option.is-compat-ko small { color: #8b98ae; text-decoration: line-through; text-decoration-color: rgba(160, 68, 58, .45); }

/* Consigliati nel menu modelli Gemini: etichetta accanto al nome e una riga
   che spiega quando sceglierlo. */
html body #integration-dialog .model-picker-group.is-recommended { color: #0b1f3a; }
html body #integration-dialog .model-picker-option { min-height: 50px; }
html body #integration-dialog .model-picker-option strong { display: flex; align-items: center; gap: 8px; min-width: 0; }
html body #integration-dialog .model-picker-badge { flex: none; padding: 2px 7px; color: #607596; background: #f5f7fa; border: 1px solid #e1e6ee; border-radius: 999px; font: 500 11px/1.4 var(--font-sans); font-style: normal; }
html body #integration-dialog .model-picker-badge.is-rank-0 { color: #387653; background: #eaf6f0; border-color: #cfe8da; }
html body #integration-dialog .model-picker-badge.is-rank-1,
html body #integration-dialog .model-picker-badge.is-rank-4 { color: #4b4fa8; background: #f0f1fd; border-color: #d9dbf6; }
html body #integration-dialog .model-picker-hint { display: block; margin-top: 2px; overflow: hidden; color: #607596; font-size: 12px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
/* Il tetto misurato: terza riga dell'opzione, piu' tenue della frase sul
   modello perche' e' un dato, non un consiglio. */
html body #integration-dialog .model-picker-rate { display: block; margin-top: 3px; color: #8092ad; font: 400 11px/1.4 var(--font-sans); font-variant-numeric: tabular-nums; }
html body #integration-dialog .model-picker-badge.is-fastest { color: #8a5a12; background: #fdf3e3; border-color: #f0dcb8; }
html body #integration-dialog .model-picker-trigger strong { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* Elimina account: l'unica azione che non si annulla, in rosso e non in
   evidenza come il «Salva» delle altre schede. */
html body #account-delete-section .account-delete { color: var(--danger, #b42318); border-color: var(--danger-border, #efb4ae); }
html body #account-delete-section .account-delete:hover { background: var(--danger-soft, #fff1ef); }