/* ==========================================================================
   Alessandro Duranti — "Antropologia del linguaggio" (Versione 8.4 — CR-05)
   Estetica editoriale contemporanea, minimale e ad alta accessibilità cognitiva.
   Principio guida: una schermata, uno scopo evidente, un'azione principale.
   Tipografia: Source Sans 3 (Humanist Sans-Serif) self-hosted per UI funzionale;
   Wordmark editoriale "Duranti" protetto in serif classico.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Source Sans 3 — Self-Hosted WOFF2 @font-face declarations
   Supported weights: 400 (normal/italic), 500, 600, 700 (Latin & Latin-ext)
   -------------------------------------------------------------------------- */

/* 400 Normal */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 400 Italic */
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 500 Medium */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 600 SemiBold */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 700 Bold */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg-page: #ffffff;
  --bg-surface: #ffffff;
  --bg-subtle: #f6f6f6;
  --text-ink: #000000;
  --text-body: #111111;
  --text-muted: #595959;
  --text-faint: #666666;
  --accent-red: #B31B1B;
  --accent-red-hover: #8C1313;
  --accent-red-soft: #FDF3F3;
  --border-hairline: #E5E5E5;
  --border-mid: #D4D4D4;
  --font-heading: "Bahnschrift SemiLight SemiCondensed", "Bahnschrift", "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Bahnschrift SemiLight SemiCondensed", "Bahnschrift", "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

html {
  background-color: var(--bg-page);
  color: var(--text-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body {
  background-color: var(--bg-page);
  color: var(--text-ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  width: 100%;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
}

button {
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.hidden {
  display: none !important;
}

/* ==========================================================================
   Rimozione badge esterni flottanti
   ========================================================================== */
#nl-badge-frame,
#nl-hud-frame,
iframe[title="Powered by Netlify"],
iframe[title="Netlify"] {
  display: none !important;
  visibility: hidden !important;
  position: static !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* ==========================================================================
   1. BARRA SUPERIORE — Solo due aree principali: DEFINIZIONI | APPUNTI
   ========================================================================== */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  background-color: var(--bg-page);
  border-bottom: 1px solid var(--border-hairline);
  padding-top: env(safe-area-inset-top, 0px);
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);
  will-change: transform;
}

.top-bar.top-bar--nav-hidden {
  transform: translateY(-100%);
  pointer-events: none;
}

.top-bar-inner {
  max-width: 1080px;
  margin: 0 auto;
  min-height: 56px;
  padding: 6px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.top-bar-left {
  display: flex;
  align-items: center;
  min-width: 44px;
}

.top-bar-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.book-identity-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}

.book-identity-author {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-ink);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.book-identity-title {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.2;
  margin-top: 1px;
}

.top-bar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 44px;
}

.header-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--accent-red);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 150ms ease;
  padding: 0;
}

.header-search-btn:hover,
.header-search-btn:focus-visible {
  background-color: var(--bg-subtle);
  outline: none;
}

.header-search-icon {
  width: 22px;
  height: 22px;
  stroke: var(--accent-red);
}

.primary-area-switch {
  display: inline-flex;
  align-items: center;
  gap: 24px;
}

.area-switch-btn {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  padding: 13px 0 11px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.area-switch-btn:hover:not(.active) {
  color: var(--text-ink);
}

.area-switch-btn.active {
  color: var(--text-ink);
  font-weight: 700;
  border-bottom-color: var(--accent-red);
}

.top-bar-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header-menu-wrap {
  position: relative;
}

.top-menu-trigger {
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  color: var(--text-muted);
  padding: 6px 10px;
  border-radius: 6px;
}

.top-menu-trigger:hover,
.top-menu-trigger[aria-expanded="true"] {
  color: var(--text-ink);
  background-color: var(--bg-subtle);
}

/* Menu secondario discreto */
.header-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 268px;
  max-width: calc(100vw - 24px);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  z-index: 350;
  overflow: hidden;
}

.menu-group-secondary {
  padding: 10px 0 6px;
}

.menu-group-heading {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0 16px 6px;
}

.menu-item-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 16px;
  font-size: 14.5px;
  font-weight: 400;
  color: var(--text-body);
}

.menu-item-btn:hover,
.menu-item-btn:focus-visible {
  color: var(--accent-red);
  background-color: var(--bg-subtle);
}

.menu-divider {
  height: 1px;
  background-color: var(--border-hairline);
}

.menu-footer-status {
  padding: 10px 16px 12px;
  background-color: var(--bg-subtle);
}

.menu-status-line {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.menu-offline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.menu-link-red {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-red);
}

.menu-link-muted {
  font-size: 12px;
  color: var(--text-muted);
}

/* ==========================================================================
   Struttura principale e barra laterale Desktop
   ========================================================================== */
.workspace {
  flex: 1;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
}

.sidebar {
  width: 248px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-hairline);
  padding: 28px 16px 64px 18px;
}

.sidebar-header-row {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-hairline);
}

.sidebar-heading {
  display: block;
  width: 100%;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.sidebar-heading:hover,
.sidebar-heading.active {
  color: var(--accent-red);
}

.chapter-group {
  margin-bottom: 16px;
}

.chapter-btn {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-ink);
  border-left: 2px solid transparent;
}

.chapter-btn.active {
  color: var(--accent-red);
  border-left-color: var(--accent-red);
}

.chapter-btn-num {
  font-size: 12.5px;
  color: var(--text-muted);
  min-width: 20px;
}

.paragraph-list {
  list-style: none;
  margin-top: 4px;
  padding-left: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.paragraph-item.sub-section {
  padding-left: 12px;
}

.paragraph-btn {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--text-body);
  border-left: 2px solid transparent;
}

.paragraph-btn:hover:not(.pending):not(.active) {
  color: var(--accent-red);
}

.paragraph-btn.active {
  color: var(--accent-red);
  font-weight: 600;
  border-left-color: var(--accent-red);
}

.paragraph-btn.pending {
  color: var(--text-faint);
  cursor: not-allowed;
}

.paragraph-num {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 26px;
  flex-shrink: 0;
}

.paragraph-pending-tag {
  font-size: 11px;
  color: var(--text-faint);
  margin-left: 4px;
}

/* ==========================================================================
   Contenitore di lettura e comando contestuale unico per tornare indietro
   ========================================================================== */
.reading-area {
  flex: 1;
  min-width: 0;
  padding: 28px 20px calc(88px + env(safe-area-inset-bottom, 20px));
}

.screen-container {
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
}

/* Un solo comando discreto e coerente per tornare indietro */
.context-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.context-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent-red);
  padding: 4px 0;
}

.context-back-btn:hover {
  color: var(--accent-red-hover);
}

.context-secondary-link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 4px 0;
}

.context-secondary-link:hover {
  color: var(--text-ink);
}

/* ==========================================================================
   2. HOME DELLE DEFINIZIONI — ACCORDION A ESPANSIONE SINGOLA
   DURANTI / Antropologia del linguaggio / [ Cerca una definizione... ]
   ========================================================================== */
.definitions-home-header {
  margin-top: 0;
  margin-bottom: 24px;
}

.definitions-main-title {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 38px;
  letter-spacing: -0.8px;
  color: var(--text-ink);
  margin-bottom: 4px;
}

.definitions-main-subtitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-muted);
}

.definitions-search-bar {
  margin-bottom: 0;
}

.definitions-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 14px;
  height: 52px;
  padding: 0 16px;
  width: 100%;
  transition: border-color 0.16s cubic-bezier(0.2, 0, 0, 1);
}

.definitions-search-input-wrap:focus-within {
  border-color: var(--accent-red);
}

.icon-search-input {
  width: 18px;
  height: 18px;
  stroke: var(--text-muted);
  flex-shrink: 0;
}

.definitions-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  font-size: 16px;
  line-height: 1.35;
  color: var(--text-ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
}

.definitions-search-input::placeholder {
  color: var(--text-muted);
}

.definitions-search-clear {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-red);
  padding: 2px 4px;
  flex-shrink: 0;
}

.definitions-chapter-block {
  margin-bottom: 24px;
}

.definitions-chapter-heading {
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 32px;
  margin-bottom: 12px;
}

.section-accordions-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.section-accordion-item {
  border-bottom: 1px solid var(--border-hairline);
  border-radius: 10px;
  transition: background-color 160ms cubic-bezier(0.2, 0, 0, 1);
}

.section-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 12px 12px;
  border-radius: 10px;
  background-color: transparent;
  color: var(--text-ink);
  cursor: pointer;
  text-align: left;
  border: none;
  transition: background-color 160ms cubic-bezier(0.2, 0, 0, 1);
}

.section-accordion-header:hover {
  background-color: var(--bg-subtle);
}

.section-accordion-item.is-expanded > .section-accordion-header {
  background-color: var(--bg-subtle);
}

.section-accordion-code {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-red);
  min-width: 50px;
  flex-shrink: 0;
}

.section-accordion-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: var(--text-ink);
  flex: 1;
  min-width: 0;
}

.section-accordion-title .section-pending-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-red);
  margin-left: 6px;
}

.section-accordion-chevron-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-muted);
}

.section-accordion-chevron {
  width: 16px;
  height: 16px;
  transition: transform 160ms cubic-bezier(0.2, 0, 0, 1);
}

.section-accordion-item.is-expanded .section-accordion-chevron {
  transform: rotate(180deg);
  color: var(--text-ink);
}

.section-accordion-body {
  padding-bottom: 8px;
}

.section-accordion-body.hidden {
  display: none;
}

.section-definitions-list {
  display: flex;
  flex-direction: column;
}

.definition-accordion-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 14px 12px 14px 16px;
  border-bottom: 1px solid var(--border-hairline);
  text-align: left;
  cursor: pointer;
  background-color: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  transition: background-color 160ms cubic-bezier(0.2, 0, 0, 1);
}

.definition-accordion-row:last-child {
  border-bottom: none;
}

.definition-accordion-row:hover,
.definition-accordion-row:active {
  background-color: var(--bg-subtle);
}

.definition-accordion-title {
  font-size: 15px;
  font-weight: 450;
  line-height: 22px;
  color: var(--text-ink);
  flex: 1;
  min-width: 0;
}

.def-incomplete-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-red);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .section-accordion-chevron,
  .section-accordion-header,
  .definition-accordion-row {
    transition: none !important;
  }
}

.definitions-list {
  display: flex;
  flex-direction: column;
}

/* Voce semplice, ordinata, chiaramente separata dalle altre */
.definition-list-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 13px 2px;
  border-bottom: 1px solid var(--border-hairline);
  text-align: left;
}

.definition-list-item:hover .definition-item-term {
  color: var(--accent-red);
}

.definition-list-item.is-active .definition-item-term {
  color: var(--accent-red);
  font-weight: 600;
}

.definition-item-term {
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.38;
  color: var(--text-ink);
  flex: 1;
  min-width: 0;
}

.definition-list-item.is-incomplete .definition-item-term {
  color: var(--text-muted);
  font-weight: 400;
}

.definition-item-sec {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.definition-item-sec.is-incomplete-tag {
  color: var(--accent-red);
  font-size: 12.5px;
}

/* Gruppi di ricerca pertinente ed espansione progressiva */
.definitions-search-group {
  margin-bottom: 20px;
}

.definitions-search-group-heading {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: 2px;
}

.search-expand-secondary-wrap {
  margin-top: 14px;
  padding-top: 6px;
}

.btn-expand-secondary-results {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 8px 12px;
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  background-color: var(--bg-surface);
}

.btn-expand-secondary-results:hover {
  color: var(--text-ink);
  border-color: var(--border-mid);
}

.definitions-search-empty {
  padding: 24px 0;
  font-size: 15.5px;
  color: var(--text-muted);
}

/* ==========================================================================
   3. SCHEDA DEFINIZIONE
   TITOLO DEL CONCETTO
   Riferimento al capitolo e alla sezione, piccolo e discreto
   DEFINIZIONE
   Due azioni: Approfondisci | Vai agli appunti
   ========================================================================== */
.def-card-header {
  margin-bottom: 20px;
}

.def-card-title {
  font-family: var(--font-heading);
  font-size: clamp(23px, 4.2vw, 28px);
  font-weight: 700;
  line-height: 1.22;
  color: var(--text-ink);
  margin-bottom: 6px;
}

.def-card-meta {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.4;
}

.def-card-body {
  padding: 18px 0 22px;
  border-top: 1px solid var(--border-hairline);
  margin-bottom: 18px;
}

.def-card-incomplete-notice {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-red);
  background-color: var(--accent-red-soft);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.def-card-definition-text {
  font-size: 18px;
  line-height: 1.66;
  color: var(--text-body);
  font-weight: 400;
}

.def-card-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

.def-action-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  font-size: 15.5px;
  font-weight: 600;
  border-radius: 7px;
  border: 1px solid var(--border-mid);
  background-color: var(--bg-surface);
  color: var(--text-ink);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.def-action-btn.primary-action {
  background-color: var(--accent-red);
  border-color: var(--accent-red);
  color: #ffffff;
}

.def-action-btn.primary-action:hover {
  background-color: var(--accent-red-hover);
  border-color: var(--accent-red-hover);
}

.def-action-btn.primary-action.is-open {
  background-color: var(--accent-red-soft);
  border-color: var(--accent-red);
  color: var(--accent-red);
}

.def-action-btn.secondary-action:hover {
  border-color: var(--text-ink);
  background-color: var(--bg-subtle);
}

/* Approfondimento discorsivo integrato nella scheda */
.def-card-deepen-panel {
  padding: 18px 0 8px;
  border-top: 1px solid var(--border-hairline);
  margin-bottom: 20px;
}

.def-deepen-lead-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.deepen-focal-paragraph {
  font-size: 17px;
  line-height: 1.72;
  color: var(--text-ink);
  margin-bottom: 14px;
}

.def-deepen-toggle-row {
  margin-top: 10px;
  margin-bottom: 8px;
}

.def-deepen-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--accent-red);
  padding: 6px 11px;
  border-radius: 6px;
  background-color: var(--accent-red-soft);
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.def-deepen-toggle-btn:hover {
  background-color: #f5e4e2;
  color: var(--accent-red-hover);
}

/* Navigazione compatta Precedente / Successiva definizione */
.def-card-seq-footer {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--border-hairline);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ==========================================================================
   4. AREA APPUNTI — Manuale universitario digitale ben impaginato
   Gerarchia: CAPITOLO -> SEZIONE -> ARGOMENTO -> TESTO
   ========================================================================== */
.manual-screen-header {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-mid);
}

.manual-overline {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.manual-title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 3.8vw, 27px);
  font-weight: 700;
  line-height: 1.24;
  color: var(--text-ink);
}

/* Capitoli (CR-04 — Riferimento B DOPO · Proposta) */
.chapter-index-heading {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-ink);
  margin: 18px 0 16px 0;
  text-align: left;
}

.chapter-card-item {
  border: 1px solid var(--border-hairline);
  border-radius: 14px;
  background: #ffffff;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.chapter-card-item:hover {
  border-color: #D6D2CC;
}

.chapter-card-header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  min-height: 84px;
  gap: 12px;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.chapter-card-header:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: -2px;
}

.chapter-card-header.expanded {
  border-bottom: 1px solid var(--border-hairline);
  background-color: #FAF8F5;
}

.chapter-card-num-box {
  width: 68px;
  height: 64px;
  background-color: var(--bg-subtle);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chapter-card-num {
  color: var(--text-ink);
  font-size: 34px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.chapter-card-title-box {
  flex: 1;
  min-width: 0;
  padding: 0 4px;
}

.chapter-card-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--accent-red);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.25;
  word-break: break-word;
}

.chapter-card-chevron-box {
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 4px;
}

.chapter-card-chevron {
  font-size: 20px;
  color: var(--text-muted);
  line-height: 1;
  display: inline-block;
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);
}

.chapter-card-chevron.rotated {
  transform: rotate(90deg);
  color: var(--text-ink);
}

/* Sezioni espanse inline sotto il capitolo */
.chapter-inline-sections {
  background: var(--bg-page);
  padding: 4px 0;
}

.chapter-inline-section-row {
  display: flex;
  align-items: center;
  padding: 12px 14px 12px 18px;
  border-bottom: 1px solid #F0ECE8;
  width: 100%;
  text-align: left;
  gap: 10px;
  transition: background-color 140ms ease;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  cursor: pointer;
}

.chapter-inline-section-row:last-child {
  border-bottom: none;
}

.chapter-inline-section-row:hover,
.chapter-inline-section-row:focus-visible {
  background-color: var(--bg-subtle);
  outline: none;
}

.chapter-section-code {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 36px;
  flex-shrink: 0;
}

.chapter-section-title {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-ink);
  line-height: 1.35;
  flex: 1;
}

.chapter-section-pending-tag {
  display: inline-block;
  font-size: 11.5px;
  color: var(--accent-red);
  font-weight: 600;
  margin-left: 6px;
}

.chapter-section-arrow {
  color: var(--accent-red);
  font-size: 16px;
  flex-shrink: 0;
}

.chapter-inline-pending {
  padding: 16px 18px;
  background: var(--bg-page);
}

.chapter-pending-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--bg-subtle);
  color: var(--text-muted);
  margin-bottom: 6px;
}

.chapter-pending-text {
  font-size: 13.5px;
  color: #555;
  line-height: 1.45;
}

/* Indice completo DEFINIZIONI A–Z (CR-04 Sezione 10) */
.az-screen-header {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-hairline);
}

.az-screen-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-ink);
  margin-bottom: 4px;
}

.az-screen-subtitle {
  font-size: 13.5px;
  color: var(--text-muted);
}

.az-letter-header {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-ink);
  padding: 6px 12px;
  background: var(--bg-subtle);
  border-radius: 6px;
  margin: 16px 0 6px 0;
  position: sticky;
  top: 56px;
  z-index: 5;
}

.az-definition-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 4px;
  border-bottom: 1px solid var(--border-hairline);
  width: 100%;
  text-align: left;
  background: transparent;
  cursor: pointer;
  gap: 12px;
  border-top: none;
  border-left: none;
  border-right: none;
  transition: background-color 140ms ease;
}

.az-definition-row:hover,
.az-definition-row:focus-visible {
  background-color: var(--bg-subtle);
  outline: none;
}

.az-def-main {
  min-width: 0;
  flex: 1;
}

.az-def-term {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text-ink);
  line-height: 1.3;
}

.az-def-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 3px;
}

.az-def-chevron {
  font-size: 18px;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Barra di navigazione inferiore fissa (CR-04) */
.bottom-nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(58px + env(safe-area-inset-bottom, 0px));
  background: #ffffff;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 90;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  color: var(--text-muted);
  gap: 3px;
  text-align: center;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 150ms ease;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}

.bottom-nav-item:hover,
.bottom-nav-item:focus-visible {
  color: var(--accent-red);
  outline: none;
}

.bottom-nav-item.active {
  color: var(--accent-red);
  font-weight: 600;
}

.bottom-nav-icon {
  width: 22px;
  height: 22px;
}

.bottom-nav-icon--text {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 22px;
  display: inline-block;
  font-family: var(--font-heading);
}

.bottom-nav-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

@media (min-width: 768px) {
  .bottom-nav-bar {
    display: none !important;
  }
}

/* Padding inferiore sicuro su lettura mobile */
.reading-area {
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  .reading-area {
    padding-bottom: 32px;
  }
}

/* Sezioni del capitolo */
.clean-vertical-list {
  display: flex;
  flex-direction: column;
}

.section-list-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border-hairline);
}

.section-list-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.section-list-code {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 48px;
  flex-shrink: 0;
}

.section-list-title {
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.38;
  color: var(--text-ink);
}

.section-row-arrow {
  font-size: 17px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.section-list-row:hover:not(.is-pending) .section-list-title {
  color: var(--accent-red);
}

.section-list-row.is-active .section-list-code,
.section-list-row.is-active .section-list-title {
  color: var(--accent-red);
  font-weight: 600;
}

.section-list-row.is-pending {
  cursor: default;
}

.section-list-row.is-pending .section-list-code,
.section-list-row.is-pending .section-list-title {
  color: var(--text-faint);
  font-weight: 400;
}

.section-list-row.is-highlighted-pending {
  background-color: var(--accent-red-soft);
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 6px;
}

.section-list-row.is-highlighted-pending .section-list-code,
.section-list-row.is-highlighted-pending .section-list-title,
.section-list-row.is-highlighted-pending .section-pending-badge {
  color: var(--accent-red);
  font-weight: 600;
}

.section-pending-badge {
  font-size: 12px;
  color: var(--text-faint);
  white-space: nowrap;
  flex-shrink: 0;
}

.subsection-group-container {
  padding-left: 16px;
}

/* Argomenti della sezione */
.level3-topic-list {
  display: flex;
  flex-direction: column;
}

.topic-list-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 13px 2px;
  border-bottom: 1px solid var(--border-hairline);
}

.topic-list-num {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 28px;
  flex-shrink: 0;
}

.topic-list-num.is-conclusion-label {
  font-size: 11.5px;
  text-transform: uppercase;
}

.topic-list-title {
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.38;
  color: var(--text-ink);
  flex: 1;
}

.topic-row-arrow {
  font-size: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.topic-list-row:hover .topic-list-title,
.topic-list-row.is-active .topic-list-title,
.topic-list-row.is-active .topic-list-num {
  color: var(--accent-red);
}

.topic-list-row.is-active .topic-list-title {
  font-weight: 600;
}

.s15-subsections-block {
  margin-top: 26px;
}

.clean-list-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-hairline);
}

/* ==========================================================================
   Lettura di un Singolo Argomento — DURANTI V8.2 (CR-03 Immersive Academic Reading)
   ========================================================================== */
.reading-area.reading-area--topic {
  padding-left: max(22px, env(safe-area-inset-left, 22px));
  padding-right: max(22px, env(safe-area-inset-right, 22px));
  padding-top: 24px;
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 20px));
}

@media (min-width: 768px) {
  .reading-area.reading-area--topic {
    padding-left: max(32px, env(safe-area-inset-left, 32px));
    padding-right: max(32px, env(safe-area-inset-right, 32px));
    padding-top: 28px;
  }
}

#screen-single-topic {
  max-width: 68ch;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  box-shadow: none;
}

.topic-editorial-header {
  margin-bottom: 0;
}

#screen-single-topic .topic-main-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.5px;
  color: #171615;
  margin-bottom: 12px;
}

#screen-single-topic .topic-section-ref {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: #77736E;
  margin-bottom: 24px;
}

.topic-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: none;
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: 20px;
}

.mode-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: var(--bg-subtle);
  padding: 3px;
  border-radius: 6px;
}

.mode-tab {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 4px;
  border-bottom: none;
  transition: all 0.15s ease;
}

.mode-tab.active {
  color: var(--text-ink);
  font-weight: 600;
  background-color: var(--bg-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.keywords-disclosure-btn {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 4px 0;
}

.keywords-disclosure-btn:hover {
  color: var(--accent-red);
}

.topic-keywords-panel {
  padding: 12px 0 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-hairline);
}

.topic-keywords-heading {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.concept-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.concept-link-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.4;
}

.concept-bullet {
  color: var(--text-muted);
  flex-shrink: 0;
}

.concept-link-btn {
  font-size: 15.5px;
  font-weight: 500;
  color: var(--accent-red);
  text-align: left;
}

.ripasso-action-row {
  padding: 18px 0 10px;
}

.btn-reveal-explanation {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-red);
  padding: 8px 14px;
  border: 1px solid var(--accent-red);
  border-radius: 6px;
}

.btn-hide-explanation {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--accent-red);
  margin-bottom: 14px;
  display: inline-block;
}

/* Corpo del testo — Tipografia da manuale universitario */
.topic-explanation-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: 0;
  font-weight: 400;
  color: #171615;
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
}

.explanation-paragraph {
  margin-top: 0;
  margin-bottom: 18px;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: 0;
  font-weight: 400;
  color: #171615;
  text-align: left;
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
}

.explanation-paragraph strong {
  color: #171615;
  font-weight: 600;
}

.explanation-paragraph em,
.explanation-paragraph i {
  font-style: italic;
}

#screen-single-topic h2,
#screen-single-topic h3,
#screen-single-topic .internal-heading {
  font-size: 19px;
  font-weight: 650;
  line-height: 1.35;
  color: #171615;
  margin-top: 28px;
  margin-bottom: 12px;
}

.explanation-paragraph.example-block,
.explanation-paragraph.distinction-block {
  padding-left: 12px;
  border-left: 2px solid var(--border-hairline);
  margin-top: 12px;
  margin-bottom: 18px;
}

.explanation-paragraph.bullet-block {
  padding-left: 12px;
  margin-bottom: 10px;
}

#screen-single-topic .explanation-paragraph.passage-targeted {
  border-left: 3px solid var(--accent-red);
  background-color: var(--accent-red-soft);
  padding: 10px 14px;
  border-radius: 4px;
  margin-top: 0;
  margin-bottom: 18px;
}

/* Note personali e strumenti secondari a fine argomento (non intrusivi) */
.topic-secondary-tools {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.topic-secondary-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.topic-quiet-btn {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.topic-quiet-btn:hover {
  color: var(--accent-red);
}

.personal-notes-panel {
  padding-top: 6px;
}

.personal-notes-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.personal-notes-textarea {
  width: 100%;
  min-height: 84px;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-ink);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  resize: vertical;
}

.personal-notes-textarea:focus {
  outline: none;
  border-color: var(--accent-red);
}

.personal-notes-status {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.note-details-box {
  padding: 12px 0 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.note-details-box strong {
  color: var(--text-ink);
}

/* Navigazione sequenziale compatta a due colonne */
.topic-seq-footer {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--border-hairline);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

.seq-nav-cell.next-cell {
  text-align: right;
}

.seq-nav-btn {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  max-width: 100%;
}

.seq-nav-cell.next-cell .seq-nav-btn {
  align-items: flex-end;
  text-align: right;
}

.seq-nav-dir {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-red);
}

.seq-nav-dest {
  font-size: 13px;
  line-height: 1.32;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   Schermate secondarie (Ricerca globale appunti, Account, Backup, Info)
   ========================================================================== */
.search-screen {
  position: fixed;
  inset: 0;
  z-index: 900;
  background-color: var(--bg-page);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.search-screen-header {
  border-bottom: 1px solid var(--border-hairline);
  background-color: var(--bg-page);
  padding-top: env(safe-area-inset-top, 0px);
  flex-shrink: 0;
}

.search-screen-bar {
  max-width: 680px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-input-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  padding: 8px 12px;
  background-color: var(--bg-surface);
}

.search-screen-input {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 1.35;
  color: var(--text-ink);
  outline: none;
}

.search-clear-btn {
  font-size: 13px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.search-close-btn {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-red);
  flex-shrink: 0;
}

.search-screen-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 16px calc(80px + env(safe-area-inset-bottom, 20px));
}

.search-results-list {
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.search-results-header {
  font-size: 13px;
  color: var(--text-muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-hairline);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.search-result-item {
  display: block;
  width: 100%;
  padding: 14px 2px;
  border-bottom: 1px solid var(--border-hairline);
  text-align: left;
}

.search-result-title {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--accent-red);
  margin-bottom: 3px;
}

.search-result-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.search-result-snippet {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-body);
}

.overlay-panel {
  position: fixed;
  inset: 0;
  z-index: 950;
  background-color: var(--bg-page);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 18px calc(88px + env(safe-area-inset-bottom, 20px));
}

.overlay-inner {
  max-width: 640px;
  margin: 0 auto;
}

.overlay-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: 20px;
}

.overlay-title {
  font-size: 20px;
  font-weight: 700;
}

.overlay-close-btn {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-red);
}

.section-block {
  margin-bottom: 24px;
}

.section-title {
  font-size: 15.5px;
  font-weight: 600;
  margin-bottom: 10px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-field {
  margin-bottom: 12px;
}

.form-field.full {
  grid-column: 1 / -1;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  font-size: 16px;
  padding: 9px 11px;
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  background-color: var(--bg-surface);
  color: var(--text-ink);
}

.form-textarea {
  min-height: 140px;
  line-height: 1.55;
  resize: vertical;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.btn-red {
  font-size: 14.5px;
  font-weight: 600;
  color: #ffffff;
  background-color: var(--accent-red);
  padding: 9px 16px;
  border-radius: 6px;
}

.btn-black {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-ink);
  border: 1px solid var(--border-mid);
  background-color: var(--bg-surface);
  padding: 8px 15px;
  border-radius: 6px;
}

.feedback-msg {
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-ink);
}

.feedback-msg.error {
  color: var(--accent-red);
}

.conflict-box {
  border: 1px solid var(--border-hairline);
  padding: 14px;
  margin-bottom: 14px;
}

.conflict-versions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  font-size: 14px;
  margin-top: 8px;
}

/* ==========================================================================
   Adattamento Mobile / iPhone (< 960px)
   ========================================================================== */
@media (max-width: 959px) {
  .sidebar {
    display: none;
  }

  .top-bar-inner {
    padding: 0 16px;
    height: 46px;
  }

  .primary-area-switch {
    gap: 22px;
  }

  .area-switch-btn {
    font-size: 15px;
    padding: 12px 0 10px;
  }

  .reading-area {
    padding: 18px 16px calc(84px + env(safe-area-inset-bottom, 20px));
  }

  #screen-single-topic .topic-explanation-body,
  #screen-single-topic .explanation-paragraph {
    font-size: 17px;
    line-height: 1.65;
  }

  .def-card-definition-text {
    font-size: 17.5px;
    line-height: 1.65;
  }

  .form-grid,
  .conflict-versions {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   CONTEXTUAL TERMINOLOGY LOOKUP (DURANTI V8.1 - CR-02)
   ========================================================================== */

/* Inline linked term */
.contextual-term-btn {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: underline dotted var(--accent-red);
  text-underline-offset: 3px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.contextual-term-btn:focus-visible {
  outline: 2px solid var(--accent-red);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Background scroll lock */
body.lookup-sheet-open {
  overflow: hidden !important;
  touch-action: none;
}

/* Backdrop */
.contextual-lookup-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(23, 22, 21, 0.20);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms cubic-bezier(0.2, 0, 0, 1);
}

.contextual-lookup-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Bottom Sheet Panel */
.contextual-lookup-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 520px;
  max-height: min(65dvh, 560px);
  background-color: var(--bg-page);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  box-shadow: 0 -4px 24px rgba(23, 22, 21, 0.08), 0 -1px 3px rgba(23, 22, 21, 0.04);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1), opacity 180ms cubic-bezier(0.2, 0, 0, 1);
  outline: none;
}

.contextual-lookup-sheet.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.contextual-lookup-sheet.is-closing {
  transform: translateY(16px);
  opacity: 0;
  transition: transform 140ms cubic-bezier(0.2, 0, 0, 1), opacity 140ms cubic-bezier(0.2, 0, 0, 1);
}

.lookup-sheet-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 16px 20px 0 20px;
}

.lookup-sheet-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  margin-bottom: 8px;
}

.lookup-sheet-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.lookup-sheet-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  font-size: 24px;
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 140ms, color 140ms;
}

.lookup-sheet-close-btn:hover,
.lookup-sheet-close-btn:focus-visible {
  background-color: var(--bg-subtle);
  color: var(--text-ink);
  outline: none;
}

.lookup-sheet-content {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}

.lookup-sheet-title {
  font-size: 22px;
  font-weight: 650;
  line-height: 28px;
  letter-spacing: -0.4px;
  color: var(--text-ink);
  margin: 0 0 4px 0;
}

.lookup-sheet-meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.lookup-sheet-body {
  margin-bottom: 16px;
}

.lookup-sheet-incomplete {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-red);
  margin-bottom: 8px;
}

.lookup-sheet-definition {
  font-size: 16px;
  line-height: 25px;
  color: var(--text-ink);
  margin: 0;
}

.lookup-sheet-actions {
  padding-top: 8px;
  border-top: 1px solid var(--border-hairline);
  margin-top: 8px;
}

.lookup-sheet-open-full-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent-red);
  background: transparent;
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background-color 140ms;
}

.lookup-sheet-open-full-btn:hover,
.lookup-sheet-open-full-btn:focus-visible {
  background-color: var(--bg-subtle);
  outline: none;
}

/* Disambiguation */
.lookup-sheet-prompt {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
  margin: 0 0 12px 0;
}

.lookup-disambiguation-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lookup-disambiguation-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background-color 140ms, border-color 140ms;
}

.lookup-disambiguation-item:hover,
.lookup-disambiguation-item:focus-visible {
  background-color: var(--bg-subtle);
  border-color: var(--accent-red);
  outline: none;
}

.lookup-disambiguation-term {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-ink);
  line-height: 20px;
}

.lookup-disambiguation-sec {
  font-size: 12px;
  color: var(--text-muted);
}

/* Academic Figures & Schemas */
.academic-figure {
  margin: 20px 0;
  padding: 16px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.academic-figure-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}

.academic-figure-caption,
.explanation-paragraph.note-figure-caption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}

.academic-figure.passage-targeted {
  border-color: var(--accent-red);
  box-shadow: 0 0 0 2px var(--accent-red-soft);
}

@media (prefers-reduced-motion: reduce) {
  .top-bar {
    transition: none !important;
  }
  .contextual-lookup-backdrop,
  .contextual-lookup-sheet,
  .contextual-lookup-sheet.is-closing {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   CAPITOLO 1 — PERCORSO "IMPARA TUTTO IL CAPITOLO" (V8.7)
   Identità visiva approvata (#FCFBF9, #171615, #A6241B, #77736E, #E8E5E0, #F5F1ED)
   Interazione 100% clic, tocchi e richiamo mentale (zero scrittura, zero voce)
   ========================================================================== */

/* --- Ingresso nel Capitolo 1 ("Impara tutto il capitolo") --- */
.cap1-learn-entry-card {
  background-color: var(--bg-surface);
  border: 1.5px solid var(--accent-red);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(166, 36, 27, 0.06);
  box-sizing: border-box;
  width: 100%;
}

.cap1-learn-entry-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
}

.cap1-learn-entry-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--accent-red);
}

.cap1-learn-entry-progress-pill {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: 999px;
  padding: 2px 10px;
}

.cap1-learn-entry-main-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  background-color: var(--accent-red-soft);
  border: 1px solid rgba(166, 36, 27, 0.25);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: background-color 140ms, border-color 140ms;
  box-sizing: border-box;
}

.cap1-learn-entry-main-btn:hover,
.cap1-learn-entry-main-btn:focus-visible {
  background-color: #f3e5e3;
  border-color: var(--accent-red);
  outline: none;
}

.cap1-learn-entry-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.cap1-learn-entry-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--accent-red);
}

.cap1-learn-entry-subtitle {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-ink);
}

.cap1-learn-entry-cta {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-red);
  white-space: nowrap;
  flex-shrink: 0;
}

.cap1-learn-entry-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.cap1-quick-chip {
  min-height: 36px;
  padding: 6px 11px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-ink);
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 140ms, border-color 140ms, color 140ms;
}

.cap1-quick-chip:hover,
.cap1-quick-chip:focus-visible {
  border-color: var(--accent-red);
  color: var(--accent-red);
  background-color: var(--bg-surface);
  outline: none;
}

/* Strip dentro una singola sezione del Capitolo 1 */
.cap1-section-learn-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px 0;
}

.cap1-section-learn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 9px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 140ms, border-color 140ms;
  box-sizing: border-box;
}

.cap1-section-learn-btn.primary {
  background-color: var(--accent-red-soft);
  color: var(--accent-red);
  border: 1px solid rgba(166, 36, 27, 0.32);
  flex: 1 1 240px;
}

.cap1-section-learn-btn.secondary {
  background-color: var(--bg-subtle);
  color: var(--text-ink);
  border: 1px solid var(--border-hairline);
}

/* --- Header e Tabs del Percorso Capitolo 1 --- */
.cap1-learn-container {
  padding-bottom: 40px;
}

.cap1-zero-input-tag {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: 999px;
  padding: 3px 10px;
}

.cap1-learn-header {
  margin-bottom: 16px;
}

.cap1-learn-lead {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 6px 0 0 0;
}

.cap1-learn-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 20px;
  background-color: var(--bg-subtle);
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--border-hairline);
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .cap1-learn-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.cap1-learn-tab {
  min-height: 44px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: background-color 140ms, color 140ms, border-color 140ms;
}

.cap1-learn-tab.active {
  background-color: var(--bg-surface);
  color: var(--accent-red);
  border-color: var(--border-hairline);
  box-shadow: 0 1px 3px rgba(23, 22, 21, 0.06);
}

/* --- Pannelli generici e Banner di ripresa --- */
.cap1-panel {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-sizing: border-box;
}

.cap1-panel-overline {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--accent-red);
  margin-bottom: 4px;
}

.cap1-panel-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-ink);
  margin: 0 0 6px 0;
}

.cap1-panel-subtitle {
  font-size: 17px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--text-ink);
  margin: 0 0 10px 0;
}

.cap1-panel-desc {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 14px 0;
}

.cap1-resume-banner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: var(--accent-red-soft);
  border: 1.5px solid var(--accent-red);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.cap1-resume-overline {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--accent-red);
}

.cap1-resume-title {
  font-size: 15px;
  color: var(--text-ink);
  margin-top: 2px;
}

.cap1-resume-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- Configuratore Sessione --- */
.cap1-config-block {
  margin-bottom: 14px;
}

.cap1-config-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-ink);
  margin-bottom: 6px;
}

.cap1-mode-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 680px) {
  .cap1-mode-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cap1-mode-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background-color: var(--bg-page);
  border: 1.5px solid var(--border-hairline);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: border-color 140ms, background-color 140ms;
}

.cap1-mode-card.selected {
  background-color: var(--accent-red-soft);
  border-color: var(--accent-red);
}

.cap1-mode-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-ink);
}

.cap1-mode-card.selected .cap1-mode-card-title {
  color: var(--accent-red);
}

.cap1-mode-card-desc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-muted);
}

.cap1-config-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .cap1-config-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cap1-select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--text-ink);
  background-color: var(--bg-page);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  box-sizing: border-box;
}

.cap1-launcher-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

/* --- Pulsanti standard del percorso --- */
.cap1-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 140ms, border-color 140ms, opacity 140ms;
  box-sizing: border-box;
}

.cap1-btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.cap1-btn.primary {
  background-color: var(--accent-red);
  color: #ffffff;
  border: 1px solid var(--accent-red);
}

.cap1-btn.primary:hover:not(:disabled),
.cap1-btn.primary:focus-visible:not(:disabled) {
  background-color: var(--accent-red-hover);
  outline: none;
}

.cap1-btn.secondary {
  background-color: var(--bg-subtle);
  color: var(--text-ink);
  border: 1px solid var(--border-hairline);
}

.cap1-btn.secondary:hover:not(:disabled),
.cap1-btn.secondary:focus-visible:not(:disabled) {
  border-color: var(--accent-red);
  color: var(--accent-red);
  outline: none;
}

.cap1-btn.quiet {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-hairline);
}

.cap1-btn.large {
  width: 100%;
  font-size: 15.5px;
  padding: 12px 18px;
}

@media (min-width: 540px) {
  .cap1-btn.large {
    width: auto;
  }
}

.cap1-mini-btn {
  min-height: 36px;
  padding: 6px 11px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-ink);
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  cursor: pointer;
}

.cap1-mini-btn.primary {
  background-color: var(--accent-red-soft);
  color: var(--accent-red);
  border-color: rgba(166, 36, 27, 0.3);
}

/* --- 6 Stati Granulari di Padronanza & Indicatori --- */
.cap1-progress-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 720px) {
  .cap1-progress-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cap1-states-breakdown {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cap1-state-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-hairline);
}

.cap1-state-count {
  font-size: 13.5px;
  color: var(--text-ink);
  white-space: nowrap;
}

.cap1-mastery-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.3;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-hairline);
  background-color: var(--bg-subtle);
  color: var(--text-muted);
}

.cap1-mastery-badge.m-state--unseen {
  background-color: var(--bg-page);
  color: var(--text-muted);
}

.cap1-mastery-badge.m-state--seen {
  background-color: var(--bg-subtle);
  color: var(--text-ink);
}

.cap1-mastery-badge.m-state--clarify {
  background-color: var(--accent-red-soft);
  color: var(--accent-red);
  border-color: rgba(166, 36, 27, 0.35);
}

.cap1-mastery-badge.m-state--recognized {
  background-color: #f3efe9;
  color: var(--text-ink);
  border-color: #d5cec4;
}

.cap1-mastery-badge.m-state--reconstructed {
  background-color: #ebe5dc;
  color: var(--text-ink);
  border-color: #c2b8aa;
  font-weight: 700;
}

.cap1-mastery-badge.m-state--spaced {
  background-color: var(--text-ink);
  color: var(--bg-page);
  border-color: var(--text-ink);
  font-weight: 700;
}

.cap1-dispensa-cov-line {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
}

.cap1-split-metrics {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cap1-metric-box {
  background-color: var(--bg-page);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  padding: 12px;
}

.cap1-metric-box-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.cap1-metric-big {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-ink);
  margin: 4px 0;
}

.cap1-metric-pct {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-red);
}

.cap1-metric-detail {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* --- Lista Punti da riprendere & Mappa 28 Unità --- */
.cap1-review-units-list,
.cap1-units-map-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cap1-review-unit-row,
.cap1-unit-map-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  background-color: var(--bg-page);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
}

.cap1-unit-map-main {
  flex: 1 1 220px;
  min-width: 0;
}

.cap1-unit-map-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.cap1-unit-map-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-red);
}

.cap1-unit-map-title {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--text-ink);
}

.cap1-unit-map-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.cap1-unit-map-actions,
.cap1-review-unit-btns {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.cap1-empty-review-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

/* --- Schede A–G di Spiegazione Semplice ma Approfondita --- */
.cap1-schede-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 14px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  padding: 12px 14px;
}

@media (min-width: 640px) {
  .cap1-schede-toolbar {
    grid-template-columns: 1fr 1.4fr;
  }
}

.cap1-study-card-ag {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 14px;
  padding: 18px 16px;
  margin-bottom: 16px;
  box-sizing: border-box;
}

.cap1-study-card-header {
  border-bottom: 1px solid var(--border-hairline);
  padding-bottom: 14px;
  margin-bottom: 16px;
}

.cap1-study-card-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.cap1-unit-pill {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-red);
  background-color: var(--accent-red-soft);
  padding: 3px 9px;
  border-radius: 6px;
}

.cap1-study-card-title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.28;
  color: var(--text-ink);
  margin: 0 0 10px 0;
}

.cap1-study-card-sources-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cap1-source-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid var(--border-hairline);
}

.cap1-source-chip.dispensa-chip {
  background-color: var(--bg-subtle);
  color: var(--text-ink);
}

.cap1-source-chip.manual-chip {
  background-color: var(--bg-page);
  color: var(--text-muted);
}

.cap1-lacuna-alert {
  background-color: var(--accent-red-soft);
  border-left: 4px solid var(--accent-red);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.cap1-lacuna-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent-red);
  margin-bottom: 4px;
}

.cap1-lacuna-text {
  font-size: 13.5px;
  line-height: 1.48;
  color: var(--text-ink);
  margin: 0;
}

.cap1-ag-sections {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cap1-ag-block {
  background-color: var(--bg-page);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  padding: 13px 14px;
}

.cap1-ag-block.ag-block--a {
  border-left: 3.5px solid var(--accent-red);
}

.cap1-ag-block.ag-block--b {
  background-color: var(--bg-subtle);
}

.cap1-ag-label-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.cap1-ag-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background-color: var(--accent-red);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  flex-shrink: 0;
}

.cap1-ag-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-ink);
  margin: 0;
}

.cap1-ag-formulation-tag {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  background-color: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  padding: 2px 8px;
  border-radius: 999px;
}

.cap1-ag-text {
  font-size: 15.5px;
  line-height: 1.58;
  color: var(--text-ink);
  margin: 0;
}

.cap1-ag-steps-list,
.cap1-ag-bullet-list {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  line-height: 1.52;
  color: var(--text-ink);
}

.cap1-ag-sources-detail {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-ink);
}

.cap1-ag-verified-note {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-hairline);
  color: var(--text-muted);
}

.cap1-study-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-hairline);
}

.cap1-schede-seq-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

/* --- Dispensa NotebookLM (7 Pagine) --- */
.dispensa-top-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dispensa-page-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.dispensa-page-btn {
  min-height: 40px;
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-ink);
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  cursor: pointer;
}

.dispensa-page-btn.active {
  background-color: var(--accent-red);
  color: #ffffff;
  border-color: var(--accent-red);
}

.dispensa-page-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 14px;
  padding: 18px 16px;
  margin-bottom: 18px;
  box-sizing: border-box;
}

.dispensa-page-header {
  border-bottom: 1px solid var(--border-hairline);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.dispensa-page-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.dispensa-page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-ink);
  margin: 0;
}

.dispensa-block-heading {
  font-size: 17px;
  font-weight: 700;
  color: var(--accent-red);
  margin: 16px 0 6px 0;
}

.dispensa-block-subheading {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-ink);
  margin: 12px 0 4px 0;
}

.dispensa-block-p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-ink);
  margin: 0 0 10px 0;
}

.dispensa-block-list {
  margin: 0 0 12px 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  line-height: 1.55;
}

.dispensa-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 12px 0;
}

.dispensa-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.dispensa-table th,
.dispensa-table td {
  border: 1px solid var(--border-hairline);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.dispensa-table th {
  background-color: var(--bg-subtle);
  font-weight: 700;
}

.dispensa-verified-box {
  background-color: var(--bg-subtle);
  border-left: 3.5px solid var(--accent-red);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 14px;
}

.dispensa-verified-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent-red);
  margin-bottom: 6px;
}

.dispensa-verified-list {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dispensa-page-links {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-hairline);
}

.dispensa-links-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.dispensa-unit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* --- Registro di Copertura --- */
.cap1-registry-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
}

.cap1-registry-header {
  border-bottom: 1px solid var(--border-hairline);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.cap1-registry-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-ink);
  margin: 0;
}

.cap1-registry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.cap1-reg-col {
  background-color: var(--bg-page);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  padding: 10px 12px;
}

.cap1-reg-heading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--accent-red);
  margin: 0 0 6px 0;
}

/* --- Sessione Attiva (Una domanda per schermata) --- */
.cap1-session-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.cap1-session-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.cap1-mode-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background-color: var(--accent-red-soft);
  color: var(--accent-red);
}

.cap1-progress-pill,
.cap1-type-pill,
.cap1-level-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  background-color: var(--bg-subtle);
  color: var(--text-ink);
  border: 1px solid var(--border-hairline);
}

.cap1-variant-pill {
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  background-color: var(--accent-red);
  color: #ffffff;
}

.cap1-question-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: 14px;
  padding: 18px 16px;
  box-sizing: border-box;
}

.cap1-question-header {
  border-bottom: 1px solid var(--border-hairline);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.cap1-question-unit-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

.cap1-question-prompt {
  font-size: 18px;
  font-weight: 650;
  line-height: 1.42;
  color: var(--text-ink);
  margin: 0 0 16px 0;
}

/* Opzioni Singole e Multiple */
.cap1-options-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cap1-option-btn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  background-color: var(--bg-page);
  border: 1.5px solid var(--border-hairline);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-ink);
  transition: border-color 140ms, background-color 140ms;
  box-sizing: border-box;
}

.cap1-option-btn:hover:not(:disabled) {
  border-color: var(--accent-red);
}

.cap1-option-btn.is-selected {
  background-color: var(--accent-red-soft);
  border-color: var(--accent-red);
}

.cap1-option-btn.is-correct-opt {
  background-color: #f2f5f0;
  border-color: #2f5e35;
}

.cap1-option-btn.is-wrong-opt {
  background-color: var(--accent-red-soft);
  border-color: var(--accent-red);
}

.cap1-opt-letter,
.cap1-opt-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  border-radius: 6px;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-hairline);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-ink);
  flex-shrink: 0;
}

.cap1-option-btn.is-selected .cap1-opt-letter,
.cap1-option-btn.is-selected .cap1-opt-check {
  background-color: var(--accent-red);
  color: #ffffff;
  border-color: var(--accent-red);
}

.cap1-opt-text {
  flex: 1;
  min-width: 0;
}

/* Completamento di definizioni a tessere cliccabili */
.cap1-complete-prompt {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-ink);
  background-color: var(--bg-page);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
}

.cap1-slot-empty {
  display: inline-block;
  padding: 2px 8px;
  margin: 0 2px;
  border-bottom: 2px dashed var(--accent-red);
  color: var(--accent-red);
  font-weight: 700;
}

.cap1-slot-btn.is-filled {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  margin: 2px;
  background-color: var(--accent-red-soft);
  border: 1px solid var(--accent-red);
  border-radius: 6px;
  color: var(--accent-red);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.cap1-tiles-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.cap1-tiles-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cap1-tile-btn {
  min-height: 44px;
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-ink);
  background-color: var(--bg-subtle);
  border: 1.5px solid var(--border-hairline);
  border-radius: 8px;
  cursor: pointer;
}

.cap1-tile-btn.is-used {
  opacity: 0.38;
  text-decoration: line-through;
}

/* Abbinamento di coppie (Match pairs) */
.cap1-match-instructions {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.cap1-match-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .cap1-match-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cap1-match-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cap1-match-col-title {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.cap1-match-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  background-color: var(--bg-page);
  border: 1.5px solid var(--border-hairline);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  box-sizing: border-box;
}

.cap1-match-card.is-active-left {
  border-color: var(--accent-red);
  background-color: var(--accent-red-soft);
}

.cap1-match-card.is-paired {
  border-color: var(--text-ink);
  background-color: var(--bg-subtle);
}

.cap1-match-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-red);
}

.cap1-match-text {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-ink);
}

/* Riordino dei passaggi del ragionamento */
.cap1-criteria-box {
  background-color: var(--bg-subtle);
  border-left: 3px solid var(--accent-red);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text-ink);
  margin-bottom: 12px;
}

.cap1-order-slots-wrap,
.cap1-order-pool-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.cap1-order-slot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: var(--font-body);
  text-align: left;
  box-sizing: border-box;
}

.cap1-order-slot.is-empty {
  background-color: var(--bg-page);
  border: 1.5px dashed var(--border-hairline);
}

.cap1-order-slot.is-filled {
  background-color: var(--accent-red-soft);
  border: 1.5px solid var(--accent-red);
  cursor: pointer;
}

.cap1-order-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-red);
}

.cap1-order-text {
  flex: 1 1 200px;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--text-ink);
}

.cap1-order-placeholder {
  font-size: 13.5px;
  color: var(--text-muted);
  font-style: italic;
}

.cap1-order-remove {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-red);
}

.cap1-order-pool-card {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  background-color: var(--bg-page);
  border: 1.5px solid var(--border-hairline);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.42;
  color: var(--text-ink);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.cap1-order-pool-card.is-used {
  opacity: 0.35;
}

/* Barra azioni domanda & Feedback motivato */
.cap1-question-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-hairline);
}

.cap1-explain-first-panel {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-hairline);
}

.cap1-explain-first-banner {
  background-color: var(--bg-subtle);
  border-left: 3.5px solid var(--accent-red);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-ink);
  margin-bottom: 12px;
}

.cap1-feedback-box {
  margin-top: 18px;
  padding: 16px;
  border-radius: 12px;
  border: 1.5px solid var(--border-hairline);
  background-color: var(--bg-page);
}

.cap1-feedback-box.is-correct {
  border-color: #2f5e35;
  background-color: #f6f8f5;
}

.cap1-feedback-box.is-wrong {
  border-color: var(--accent-red);
  background-color: var(--accent-red-soft);
}

.cap1-feedback-status {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-ink);
  margin-bottom: 8px;
}

.cap1-feedback-why-correct,
.cap1-diagnostic-detail,
.cap1-diagnostic-wrong-choice,
.cap1-diagnostic-correct-choice {
  font-size: 14.5px;
  line-height: 1.52;
  color: var(--text-ink);
  margin-bottom: 10px;
}

.cap1-feedback-requeue-note {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--accent-red);
  background-color: var(--bg-surface);
  border: 1px solid rgba(166, 36, 27, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

.cap1-feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

/* Richiamo Mentale */
.cap1-recall-instruction {
  font-size: 14px;
  line-height: 1.48;
  color: var(--text-muted);
  background-color: var(--bg-subtle);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

.cap1-recall-reveal-wrap {
  margin-top: 16px;
}

.cap1-recall-answer-box {
  background-color: var(--bg-page);
  border-left: 3.5px solid var(--accent-red);
  border: 1px solid var(--border-hairline);
  border-left-width: 4px;
  border-left-color: var(--accent-red);
  border-radius: 10px;
  padding: 14px;
  margin: 14px 0;
}

.cap1-recall-answer-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent-red);
  margin-bottom: 6px;
}

.cap1-recall-answer-text {
  font-size: 15.5px;
  line-height: 1.58;
  color: var(--text-ink);
  margin: 0 0 12px 0;
}

.cap1-recall-keypoints-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-ink);
  margin-bottom: 6px;
}

.cap1-recall-selfeval-box {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-hairline);
}

.cap1-recall-selfeval-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-ink);
  margin-bottom: 10px;
}

.cap1-selfeval-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 640px) {
  .cap1-selfeval-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cap1-selfeval-btn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 54px;
  padding: 12px;
  background-color: var(--bg-page);
  border: 1.5px solid var(--border-hairline);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: border-color 140ms, background-color 140ms;
}

.cap1-selfeval-btn strong {
  font-size: 14.5px;
  color: var(--text-ink);
}

.cap1-selfeval-btn span {
  font-size: 12.5px;
  color: var(--text-muted);
}

.cap1-selfeval-btn:hover {
  border-color: var(--accent-red);
  background-color: var(--accent-red-soft);
}

/* Riepilogo fine sessione */
.cap1-summary-items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.cap1-summary-item {
  background-color: var(--bg-page);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  padding: 14px;
}

.cap1-summary-item.is-wrong {
  border-left: 4px solid var(--accent-red);
}

.cap1-summary-item.is-correct {
  border-left: 4px solid #2f5e35;
}

.cap1-summary-item-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.cap1-summary-item-badge {
  font-size: 12px;
  font-weight: 700;
}

.cap1-summary-item-prompt {
  font-size: 15.5px;
  font-weight: 650;
  color: var(--text-ink);
  margin-bottom: 8px;
}

.cap1-summary-item-why {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-ink);
  margin-bottom: 8px;
}

/* ==========================================================================
   CAPITOLO 3 — DOPPIO LIVELLO (ACCADEMICA vs SPIEGAMELO MEGLIO) & ESAME ORALE
   ========================================================================== */

.cap3-level-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 18px;
  padding: 6px;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: 12px;
}

.cap3-level-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-height: 50px;
  padding: 8px 12px;
  background-color: transparent;
  border: 1.5px solid transparent;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cap3-level-tab.active {
  background-color: var(--bg-page);
  border-color: var(--accent-red);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.cap3-level-tab-kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cap3-level-tab.active .cap3-level-tab-kicker {
  color: var(--accent-red);
}

.cap3-level-tab-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-ink);
  line-height: 1.25;
}

.cap3-colloquial-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.cap3-level-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.cap3-level-badge.level-1 {
  background-color: var(--bg-subtle);
  color: var(--text-ink);
  border: 1px solid var(--border-hairline);
}

.cap3-level-badge.level-2 {
  background-color: var(--accent-red-soft);
  color: var(--accent-red);
  border: 1px solid rgba(153, 27, 27, 0.22);
}

.cap3-level-sub {
  font-size: 12.5px;
  color: var(--text-muted);
}

.cap3-colloquial-wrap {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-left: 4px solid var(--accent-red);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
}

.cap3-colloquial-section + .cap3-colloquial-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-hairline);
}

.cap3-colloquial-heading {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-ink);
  margin: 0 0 10px;
  line-height: 1.35;
}

.cap3-colloquial-p {
  margin: 0 0 10px;
  line-height: 1.65;
}

.cap3-colloquial-list {
  margin: 8px 0 12px 18px;
}

.cap3-level-academic-quickjump {
  margin-top: 16px;
}

.cap3-unit-defs-box {
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.cap3-unit-sublabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent-red);
  margin-bottom: 8px;
}

.cap3-unit-def-item {
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 8px;
}

.cap3-unit-def-item:last-child {
  margin-bottom: 0;
}

.cap3-academic-entry-block {
  padding: 14px;
  background-color: var(--bg-page);
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
  margin-bottom: 12px;
}

.cap3-academic-entry-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-ink);
  margin: 0 0 10px;
  line-height: 1.35;
}

.cap3-academic-quote {
  margin: 0 0 10px;
  padding: 8px 12px;
  background-color: var(--bg-subtle);
  border-left: 3px solid var(--accent-red);
  font-style: italic;
  font-size: 14.5px;
  color: var(--text-ink);
}

.cap1-question-card.is-oral-exam-sim {
  border-color: var(--accent-red);
  box-shadow: 0 3px 14px rgba(153, 27, 27, 0.08);
}

.cap1-level-pill.level-4-oral {
  background-color: var(--accent-red);
  color: #ffffff;
  font-weight: 700;
}

.cap3-colloq-inline-btn {
  border-color: var(--accent-red);
  color: var(--accent-red);
}

.cap-cumulative-card {
  margin-top: 20px;
  border-style: dashed;
}

@media (max-width: 480px) {
  .cap3-level-tab {
    padding: 8px 10px;
  }
  .cap3-level-tab-label {
    font-size: 13px;
  }
  .cap3-colloquial-wrap {
    padding: 13px;
  }
}

/* ==========================================================================
   DURANTI V9.0 — SISTEMA VISIVO MINIMALISTA E ARCHITETTURA UX SEMPLIFICATA
   Sfondo bianco (#ffffff) · Testo nero (#000000) · Elementi interattivi rossi (#B31B1B)
   Font principale: Bahnschrift SemiLight SemiCondensed (+ fallback leggibili)
   ========================================================================== */
html,
body,
.app-shell,
.reading-area,
.sidebar {
  background-color: #ffffff;
  color: #000000;
  font-family: var(--font-body);
}

.reading-area {
  padding: 20px 18px calc(84px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
  .reading-area {
    padding: 28px 36px 48px;
  }
}

.screen-container {
  max-width: 640px;
  margin: 0 auto;
}

/* Header contestuale uniforme su tutte le schermate */
.ux-page-header {
  margin-bottom: 22px;
}

.ux-kicker,
.ux-kicker-heading {
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 6px 0;
}

.ux-page-title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  color: #000000;
  margin: 0;
}

.ux-page-sub {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 8px 0 0 0;
}

/* Bottoni primari e secondari uniformi */
.ux-btn-primary,
.cap1-btn.primary {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 12px 18px;
  background-color: var(--accent-red);
  color: #ffffff;
  border: 1.5px solid var(--accent-red);
  border-radius: 10px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ux-btn-primary:hover,
.cap1-btn.primary:hover {
  background-color: var(--accent-red-hover);
  border-color: var(--accent-red-hover);
}

.ux-btn-primary:disabled,
.cap1-btn.primary:disabled {
  background-color: #d4d4d4;
  border-color: #d4d4d4;
  color: #737373;
  cursor: not-allowed;
}

.ux-btn-secondary,
.cap1-btn.secondary,
.cap1-btn.quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 10px 16px;
  background-color: #ffffff;
  color: #000000;
  border: 1.5px solid #d4d4d4;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.ux-btn-secondary:hover,
.cap1-btn.secondary:hover,
.cap1-btn.quiet:hover {
  border-color: var(--accent-red);
  color: var(--accent-red);
}

.ux-btn-compact {
  min-height: 46px;
  font-size: 15px;
}

.ux-btn-inline {
  width: auto;
  min-height: 42px;
  padding: 8px 16px;
  font-size: 14.5px;
  white-space: nowrap;
}

/* HOME */
.ux-home-hero {
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 24px;
}

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

.ux-progress-kicker {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.ux-progress-pct {
  font-size: 16px;
  font-weight: 700;
  color: #000000;
}

.ux-progress-track {
  width: 100%;
  height: 5px;
  background-color: #eeeeee;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}

.ux-progress-fill {
  height: 100%;
  background-color: var(--accent-red);
  border-radius: 999px;
  transition: width 0.25s ease;
}

.ux-progress-meta {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0 0 16px 0;
}

.ux-resume-cta {
  align-items: flex-start;
  text-align: left;
  padding: 14px 16px;
  gap: 3px;
}

.ux-resume-cta-title {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
}

.ux-resume-cta-sub {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
}

.ux-home-chapters {
  margin-bottom: 24px;
}

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

.ux-chapter-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 68px;
  padding: 14px 16px;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ux-chapter-card:hover:not(.is-disabled),
.ux-chapter-card:focus-visible:not(.is-disabled) {
  border-color: var(--accent-red);
  background-color: #fffafa;
  outline: none;
}

.ux-chapter-card.is-disabled {
  opacity: 0.52;
  cursor: default;
}

.ux-chapter-num {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: #f6f6f6;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  flex-shrink: 0;
}

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

.ux-chapter-title {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.25;
  color: #000000;
}

.ux-chapter-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
}

.ux-row-arrow {
  font-size: 20px;
  color: var(--accent-red);
  flex-shrink: 0;
}

.ux-quiet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 14px 16px;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
}

.ux-quiet-row:hover,
.ux-quiet-row:focus-visible {
  border-color: var(--accent-red);
  outline: none;
}

.ux-quiet-row-title {
  font-size: 15.5px;
  font-weight: 700;
  color: #000000;
}

.ux-quiet-row-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* CAPITOLO HUB (3 azioni uniformi: STUDIA · ALLENATI · RIPASSA) */
.ux-hub-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ux-action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 92px;
  padding: 18px 18px;
  background-color: #ffffff;
  border: 1.5px solid #e5e5e5;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ux-action-card:hover,
.ux-action-card:focus-visible {
  border-color: var(--accent-red);
  background-color: #fffafa;
  outline: none;
}

.ux-action-card-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ux-action-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent-red);
}

.ux-action-title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  color: #000000;
}

.ux-action-desc {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-muted);
}

.ux-action-arrow {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-red);
  flex-shrink: 0;
}

/* STUDIA — ELENCO SEZIONI */
.ux-sections-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ux-section-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 12px 14px;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
}

.ux-section-row:hover:not(.is-pending),
.ux-section-row:focus-visible:not(.is-pending) {
  border-color: var(--accent-red);
  outline: none;
}

.ux-section-row.is-pending {
  opacity: 0.5;
  cursor: default;
}

.ux-section-code {
  min-width: 48px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-red);
  flex-shrink: 0;
}

.ux-section-title {
  flex: 1;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.35;
  color: #000000;
}

.ux-section-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ux-visited-mark {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

.ux-muted-tag {
  font-size: 13px;
  color: var(--text-muted);
}

/* STUDIA — CONTENUTO SEZIONE + SWITCHER DOPPIO LIVELLO */
.ux-level-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  background-color: #f6f6f6;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  margin-bottom: 22px;
  position: sticky;
  top: 60px;
  z-index: 50;
  box-shadow: 0 -10px 0 6px #ffffff, 0 4px 10px -6px rgba(0, 0, 0, 0.08);
}

.bottom-nav-icon--text {
  width: auto !important;
  min-width: 30px;
  height: 22px;
  white-space: nowrap;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
}

.ux-seg-btn {
  min-height: 42px;
  padding: 8px 10px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.ux-seg-btn.active {
  background-color: #ffffff;
  border-color: var(--accent-red);
  color: var(--accent-red);
}

.ux-section-reading-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ux-section-entry {
  padding-bottom: 20px;
  border-bottom: 1px solid #ececec;
}

.ux-section-entry:last-child {
  border-bottom: none;
  padding-bottom: 8px;
}

.ux-section-entry-title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: #000000;
  margin: 0 0 8px 0;
}

.ux-entry-authors {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.ux-colloquial-lead {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.55;
  color: #000000;
  margin: 0 0 10px 0;
}

.ux-colloquial-callout,
.ux-inline-note,
.ux-level-notice {
  background-color: #f8f8f8;
  border-left: 3px solid #000000;
  border-radius: 6px;
  padding: 12px 14px;
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #111111;
}

.ux-level-notice {
  border-left-color: var(--accent-red);
  margin-bottom: 18px;
}

.ux-inline-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 6px 0;
  color: var(--accent-red);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}

/* Progressive Disclosure */
.ux-disclosure,
.ux-sub-disclosure {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  background-color: #ffffff;
  margin-top: 16px;
}

.ux-disclosure > summary,
.ux-sub-disclosure > summary {
  padding: 14px 16px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: #000000;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ux-disclosure > summary::after,
.ux-sub-disclosure > summary::after {
  content: "▾";
  color: var(--accent-red);
  font-size: 14px;
  margin-left: 8px;
}

.ux-disclosure[open] > summary::after,
.ux-sub-disclosure[open] > summary::after {
  content: "▴";
}

.ux-disclosure-body,
.ux-sub-disclosure-body {
  padding: 0 16px 16px;
  border-top: 1px solid #f0f0f0;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ux-tools-subheading {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}

.ux-tool-links-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ux-tool-row-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background-color: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-size: 14px;
  text-align: left;
  color: #000000;
  cursor: pointer;
}

.ux-tool-row-btn:hover {
  border-color: var(--accent-red);
  color: var(--accent-red);
}

.ux-seq-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid #e5e5e5;
}

.ux-seq-btn {
  min-height: 48px;
  padding: 10px 12px;
  background-color: #ffffff;
  border: 1.5px solid #e5e5e5;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: #000000;
  cursor: pointer;
}

.ux-seq-btn.is-next {
  border-color: var(--accent-red);
  color: var(--accent-red);
}

.ux-seq-btn:hover {
  border-color: var(--accent-red);
  color: var(--accent-red);
}

/* ALLENATI & SESSIONE ATTIVA PULITA */
.ux-resume-inline-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background-color: var(--accent-red-soft);
  border: 1.5px solid var(--accent-red);
  border-radius: 12px;
  margin-bottom: 18px;
}

.ux-resume-inline-text {
  font-size: 15px;
  font-weight: 700;
  color: #000000;
}

.ux-mode-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.ux-mode-card {
  width: 100%;
  padding: 16px;
  background-color: #ffffff;
  border: 1.5px solid #e5e5e5;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
}

.ux-mode-card.is-selected {
  border-color: var(--accent-red);
  background-color: var(--accent-red-soft);
}

.ux-mode-card-title {
  font-size: 17px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 4px;
}

.ux-mode-card.is-selected .ux-mode-card-title {
  color: var(--accent-red);
}

.ux-mode-card-desc {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-muted);
}

.ux-train-filters {
  margin-bottom: 16px;
}

.ux-start-cta {
  margin-top: 6px;
}

.ux-train-alt-link {
  margin-top: 18px;
}

/* Sessione attiva senza rumore visivo */
.ux-session-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ux-session-counter {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}

.ux-session-progress-track {
  width: 100%;
  height: 3px;
  background-color: #eeeeee;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 18px;
}

.ux-session-progress-fill {
  height: 100%;
  background-color: var(--accent-red);
  transition: width 0.2s ease;
}

.ux-session-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-red);
  margin-bottom: 8px;
}

.ux-session-focus .cap1-question-card {
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 18px 16px;
}

.ux-session-focus .cap1-question-prompt {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #000000;
  margin: 0 0 16px 0;
}

.ux-session-focus .cap1-question-actions-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

/* Uniformità cromatica rigorosa: zero verde/blu/ambra/viola */
.cap1-option-btn,
.cap1-tile-btn,
.cap1-order-pool-card,
.cap1-selfeval-btn {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #e5e5e5 !important;
}

.cap1-option-btn.is-selected {
  border-color: var(--accent-red) !important;
  background-color: var(--accent-red-soft) !important;
}

.cap1-option-btn.is-correct-opt,
.cap1-feedback-box.is-correct,
.cap1-summary-item.is-correct {
  border-color: #000000 !important;
  background-color: #f7f7f7 !important;
  border-left-color: #000000 !important;
}

.cap1-option-btn.is-wrong-opt,
.cap1-feedback-box.is-wrong,
.cap1-summary-item.is-wrong {
  border-color: var(--accent-red) !important;
  background-color: var(--accent-red-soft) !important;
  border-left-color: var(--accent-red) !important;
}

.cap1-feedback-requeue-note {
  background-color: #f6f6f6 !important;
  border: 1px solid #d4d4d4 !important;
  color: #111111 !important;
}

.example-block,
.distinction-block {
  background-color: #f8f8f8 !important;
  border-left-color: #000000 !important;
}

.ux-session-disclosure {
  margin-top: 14px;
}

.ux-inline-explain-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* RIPASSA */
.ux-review-card {
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 16px;
}

.ux-review-card-top {
  margin-bottom: 14px;
}

.ux-review-stat {
  font-size: 20px;
  font-weight: 700;
  color: #000000;
}

.ux-review-quick-actions {
  margin-bottom: 24px;
}

.ux-disclosures-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ux-disclosure-p {
  font-size: 14.5px;
  line-height: 1.55;
  color: #111111;
  margin: 0;
}

/* DEFINIZIONI A-Z FILTRO */
.ux-filter-reset-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background-color: #f6f6f6;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}

/* Termini cliccabili sempre coerenti con rosso interattivo */
.terminology-term-btn,
.contextual-term-btn {
  color: var(--accent-red);
}

/* ==========================================================================
   V9.1 — SISTEMA AVANZATO MULTISTRATEGIA, 3D FLASHCARD & DIAGNOSTICA
   Minimalista accademico (#ffffff / #111111 / #b41f2e) · Mobile-first 393px
   ========================================================================== */

.v9-question-meta-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.v9-unit-ref-chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  padding: 2px 8px;
}

.v9-step-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-ink);
  margin-bottom: 8px;
}

.v9-scenario-card,
.v9-statement-card {
  margin: 0 0 14px 0;
  padding: 12px 14px;
  background-color: #fafafa;
  border: 1px solid var(--border-hairline);
  border-left: 3px solid var(--accent-red);
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-ink);
}

.v9-section-bridge-pill {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  background-color: #ffffff;
  border: 1.5px solid #111111;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: #111111;
}

/* Strategia 5: Individua segmento errato e correggi */
.v9-segments-sentence {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background-color: #fafafa;
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
}

.v9-segment-chip {
  min-height: 44px;
  padding: 8px 12px;
  background-color: #ffffff;
  border: 1.5px solid #d4d4d4;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--text-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.v9-segment-chip.is-selected {
  border-color: var(--accent-red);
  background-color: var(--accent-red-soft);
  font-weight: 600;
}

.v9-segment-chip.is-error-true {
  border-color: #111111;
  background-color: #efefef;
  font-weight: 700;
}

.v9-segment-chip.is-wrong-opt {
  border-color: var(--accent-red);
  background-color: var(--accent-red-soft);
}

/* Strategia 6 & 14: Confronta teorie & Classificazione rapida */
.v9-theories-header-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

@media (min-width: 520px) {
  .v9-theories-header-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.v9-theory-pill {
  padding: 8px 12px;
  background-color: #fafafa;
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.4;
}

.v9-compare-items-list,
.v9-rapid-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.v9-compare-item-card,
.v9-rapid-card {
  padding: 12px;
  background-color: #ffffff;
  border: 1.5px solid var(--border-hairline);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.v9-compare-item-card.is-correct-row,
.v9-rapid-card.is-correct-row {
  border-color: #111111;
  background-color: #f7f7f7;
}

.v9-compare-item-card.is-wrong-row,
.v9-rapid-card.is-wrong-row {
  border-color: var(--accent-red);
  background-color: var(--accent-red-soft);
}

.v9-compare-item-text,
.v9-rapid-text {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text-ink);
}

.v9-compare-toggle-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.v9-pole-btn {
  min-height: 44px;
  padding: 8px 10px;
  background-color: var(--bg-subtle);
  border: 1.5px solid var(--border-hairline);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-ink);
  cursor: pointer;
  text-align: center;
  overflow-wrap: anywhere;
}

.v9-pole-btn.is-selected {
  border-color: var(--accent-red);
  background-color: var(--accent-red-soft);
  color: var(--accent-red);
}

/* Strategia 7: Mappa concettuale visiva */
.v9-concept-map-canvas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  margin-bottom: 14px;
  background-color: #fafafa;
  border: 1px solid var(--border-hairline);
  border-radius: 10px;
}

.v9-map-edge-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
}

.v9-map-node {
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  border: 1.5px solid #111111;
  background-color: #ffffff;
  color: #111111;
  font-weight: 600;
  box-sizing: border-box;
}

.v9-map-node.is-root {
  background-color: #111111;
  color: #ffffff;
}

.v9-map-node.is-slot.is-empty {
  border-style: dashed;
  border-color: var(--accent-red);
  color: var(--accent-red);
  background-color: #ffffff;
}

.v9-map-node.is-slot.is-filled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  border-color: var(--accent-red);
  background-color: var(--accent-red-soft);
  color: var(--accent-red);
  font-weight: 700;
  cursor: pointer;
}

.v9-map-slot-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background-color: var(--accent-red);
  color: #ffffff;
  font-size: 12px;
  flex-shrink: 0;
}

.v9-map-relation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.v9-map-rel-pill {
  background-color: #f3f3f3;
  border: 1px solid #e0e0e0;
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 600;
  color: var(--text-ink);
}

/* Strategia 9: Vero / Parziale / Falso */
.v9-verdict-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.v9-verdict-btn {
  min-height: 46px;
  padding: 8px 6px;
  background-color: #ffffff;
  border: 1.5px solid var(--border-hairline);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-ink);
  cursor: pointer;
}

.v9-verdict-btn.is-selected {
  border-color: var(--accent-red);
  background-color: var(--accent-red-soft);
  color: var(--accent-red);
}

.v9-verdict-btn.is-correct-opt {
  border-color: #111111;
  background-color: #f4f4f4;
  color: #111111;
}

.v9-verdict-btn.is-wrong-opt {
  border-color: var(--accent-red);
  background-color: var(--accent-red-soft);
}

/* Strategia 12: Percorso decisionale */
.v9-decision-path-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.v9-decision-step-card {
  padding: 12px;
  background-color: #ffffff;
  border: 1.5px solid var(--border-hairline);
  border-radius: 10px;
}

.v9-decision-step-card.is-pending {
  opacity: 0.55;
}

.v9-decision-step-head {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-red);
  margin-bottom: 4px;
}

.v9-decision-step-q {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-ink);
  margin-bottom: 10px;
}

.v9-decision-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.v9-decision-choice-btn {
  min-height: 44px;
  padding: 10px 12px;
  text-align: left;
  background-color: var(--bg-subtle);
  border: 1.5px solid var(--border-hairline);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-ink);
  cursor: pointer;
}

.v9-decision-choice-btn.is-selected {
  border-color: var(--accent-red);
  background-color: var(--accent-red-soft);
  font-weight: 600;
}

.v9-decision-choice-btn.is-correct-opt {
  border-color: #111111;
  background-color: #efefef;
}

.v9-decision-choice-btn.is-wrong-opt {
  border-color: var(--accent-red);
  background-color: var(--accent-red-soft);
}

/* Strategia 13: Costruisci risposta orale */
.v9-oral-slots-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.v9-oral-slot-card {
  padding: 10px 12px;
  background-color: #fafafa;
  border: 1.5px dashed #d4d4d4;
  border-radius: 8px;
}

.v9-oral-slot-card.is-filled {
  border-style: solid;
  border-color: var(--accent-red);
  background-color: var(--accent-red-soft);
}

.v9-oral-slot-role {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.v9-oral-slot-content {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-ink);
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.v9-oral-slot-empty {
  font-size: 13.5px;
  color: var(--text-muted);
  font-style: italic;
}

.v9-oral-tiles-bank {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.v9-oral-tile-btn {
  min-height: 44px;
  padding: 10px 12px;
  background-color: #ffffff;
  border: 1.5px solid var(--border-hairline);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-ink);
  text-align: left;
  cursor: pointer;
}

.v9-oral-tile-btn.is-used {
  opacity: 0.35;
  text-decoration: line-through;
}

.v9-oral-model-box {
  margin-top: 10px;
  padding: 10px 12px;
  background-color: #ffffff;
  border: 1px solid #111111;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.45;
}

/* Strategia 14: Timer facoltativo */
.v9-rapid-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.v9-timer-pill {
  min-height: 36px;
  padding: 4px 12px;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-ink);
  cursor: pointer;
}

.v9-timer-pill.is-on {
  border-color: var(--accent-red);
  color: var(--accent-red);
  background-color: var(--accent-red-soft);
}

.v9-rapid-clock {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: #111111;
}

/* Strategia 10: Flashcard 3D Flip */
.v9-flashcard-scene {
  perspective: 1200px;
  width: 100%;
}

.v9-flashcard-inner {
  display: grid;
  transform-style: preserve-3d;
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.v9-flashcard-inner.is-flipped {
  transform: rotateY(180deg);
}

.v9-flashcard-face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  min-width: 0;
  box-sizing: border-box;
}

.v9-flashcard-front {
  z-index: 2;
}

.v9-flashcard-inner.is-flipped .v9-flashcard-front {
  pointer-events: none;
}

.v9-flashcard-back {
  transform: rotateY(180deg);
  pointer-events: none;
}

.v9-flashcard-inner.is-flipped .v9-flashcard-back {
  pointer-events: auto;
  z-index: 3;
}

.v9-flashcard-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.v9-flip-toggle-btn {
  min-height: 36px;
  padding: 4px 10px;
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-ink);
  cursor: pointer;
}

.v9-flashcard-hint-box {
  padding: 10px 12px;
  margin: 12px 0;
  background-color: #fafafa;
  border-left: 3px solid #111111;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.45;
}

.v9-flashcard-front-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.v9-flashcard-rate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

@media (min-width: 600px) {
  .v9-flashcard-rate-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.v9-rate-btn {
  min-height: 54px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background-color: #ffffff;
  border: 1.5px solid var(--border-hairline);
  border-radius: 8px;
  font-family: var(--font-body);
  cursor: pointer;
}

.v9-rate-btn strong {
  font-size: 14px;
  color: var(--text-ink);
}

.v9-rate-btn span {
  font-size: 11.5px;
  color: var(--text-muted);
}

.v9-rate-btn.rate-repeat {
  border-color: var(--accent-red);
}

.v9-rate-btn.rate-mastered {
  border-color: #111111;
}

/* Impara Remediation Visual Comparison & Micro-Check */
.v9-visual-remediation-box {
  margin-top: 12px;
  padding: 12px;
  background-color: #ffffff;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.v9-rem-title {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #111111;
  margin-bottom: 6px;
}

.v9-rem-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v9-rem-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.4;
}

.v9-rem-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background-color: #111111;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.v9-rem-distinctions {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.45;
}

.v9-microcheck-row {
  margin-top: 10px;
}

.v9-microcheck-btn {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  background-color: #ffffff;
  border: 1.5px solid #111111;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  color: #111111;
  cursor: pointer;
}

.v9-microcheck-btn.is-done {
  background-color: #111111;
  color: #ffffff;
}

/* Launcher Length Selector, Challenges & Scholar Gamification */
.v9-length-selector-card {
  padding: 14px;
  margin: 14px 0;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
}

.v9-length-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.v9-length-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-ink);
}

.v9-length-sub {
  font-size: 12px;
  color: var(--text-muted);
}

.v9-length-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.v9-length-pill {
  min-height: 44px;
  padding: 8px 14px;
  flex: 1 1 auto;
  background-color: var(--bg-subtle);
  border: 1.5px solid var(--border-hairline);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-ink);
  cursor: pointer;
  text-align: center;
}

.v9-length-pill.is-selected {
  border-color: var(--accent-red);
  background-color: var(--accent-red);
  color: #ffffff;
}

.v9-challenges-strip {
  margin-top: 20px;
}

.v9-challenges-heading {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.v9-challenges-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 600px) {
  .v9-challenges-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.v9-challenge-btn {
  min-height: 54px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background-color: #ffffff;
  border: 1.5px solid #e5e5e5;
  border-radius: 10px;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
}

.v9-challenge-btn strong {
  font-size: 14px;
  color: var(--text-ink);
}

.v9-challenge-btn span {
  font-size: 12px;
  color: var(--text-muted);
}

.v9-challenge-btn.has-due {
  border-color: var(--accent-red);
  background-color: var(--accent-red-soft);
}

.ux-gamification-panel {
  margin-top: 16px;
}

.v9-rank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.v9-rank-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--accent-red);
}

.v9-rank-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-ink);
}

.v9-rank-sub {
  font-size: 13px;
  color: var(--text-muted);
}

.v9-rank-score {
  font-size: 22px;
  font-weight: 700;
  color: #111111;
}

.v9-goals-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.v9-goal-cell {
  padding: 8px;
  background-color: var(--bg-subtle);
  border-radius: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.v9-goal-cell strong {
  font-size: 16px;
  color: #111111;
}

.v9-goal-cell span {
  font-size: 11.5px;
  color: var(--text-muted);
}

.v9-subhead-sm {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-ink);
  margin-bottom: 6px;
}

.v9-missions-list {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
}

.v9-missions-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}

.v9-missions-list li.is-done {
  color: #111111;
  font-weight: 600;
}

.v9-milestones-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.v9-milestone-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #d4d4d4;
  font-size: 12px;
  color: var(--text-muted);
}

.v9-milestone-chip.is-unlocked {
  border-color: #111111;
  background-color: #111111;
  color: #ffffff;
  font-weight: 600;
}

/* Report Diagnostico Verifica */
.v9-summary-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}

.v9-grade-pill,
.v9-meta-pill {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.v9-grade-pill.band-top {
  background-color: #111111;
  color: #ffffff;
}

.v9-grade-pill.band-good {
  background-color: #efefef;
  border: 1px solid #111111;
  color: #111111;
}

.v9-grade-pill.band-mid,
.v9-grade-pill.band-low {
  background-color: var(--accent-red-soft);
  border: 1px solid var(--accent-red);
  color: var(--accent-red);
}

.v9-meta-pill {
  background-color: var(--bg-subtle);
  border: 1px solid var(--border-hairline);
  color: var(--text-ink);
}

.v9-milestone-unlock-box {
  padding: 10px 12px;
  margin-bottom: 12px;
  background-color: #111111;
  color: #ffffff;
  border-radius: 8px;
  font-size: 13.5px;
}

.v9-error-analysis-box {
  padding: 12px;
  margin-bottom: 12px;
  background-color: var(--accent-red-soft);
  border-left: 3px solid var(--accent-red);
  border-radius: 8px;
}

.v9-error-analysis-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-red);
  margin-bottom: 4px;
}

.v9-error-analysis-list {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-ink);
}

.v9-report-bars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 16px;
}

@media (min-width: 640px) {
  .v9-report-bars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.v9-report-bars-card {
  padding: 14px;
  background-color: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
}

.v9-report-subhead {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-ink);
}

.v9-bar-row {
  margin-bottom: 8px;
}

.v9-bar-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  margin-bottom: 3px;
}

.v9-bar-label {
  color: var(--text-ink);
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

.v9-bar-val {
  color: var(--text-muted);
  white-space: nowrap;
}

.v9-bar-track {
  width: 100%;
  height: 7px;
  background-color: #e5e5e5;
  border-radius: 999px;
  overflow: hidden;
}

.v9-bar-fill {
  height: 100%;
  background-color: #111111;
  border-radius: 999px;
}

.v9-bar-fill.is-weak {
  background-color: var(--accent-red);
}

/* ==========================================================================
   V9.2 — PREMIUM IPHONE-FIRST EDITORIAL TRANSFORMATION (393x852 iOS NATIVE)
   ========================================================================== */

:root {
  --v9-font-editorial: "Bahnschrift SemiLight SemiCondensed", "Bahnschrift",
    "Source Sans 3", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --v9-grouped-bg: #f6f6f8;
  --v9-row-hover: #f2f2f5;
  --v9-hairline: rgba(0, 0, 0, 0.085);
  --v9-glass-bg: rgba(255, 255, 255, 0.985);
  --v9-spring: cubic-bezier(0.22, 1, 0.36, 1);
}

html,
body {
  min-height: 100dvh;
  background-color: #ffffff;
  font-family: var(--v9-font-editorial);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Safari iOS: prevent input/select auto-zoom (>= 16px) & improve tap responsiveness */
input,
select,
textarea {
  font-size: max(16px, 1rem) !important;
}

button,
a,
summary,
[role="button"],
[role="tab"],
[role="radio"] {
  touch-action: manipulation;
}

button:not(:disabled):active,
.v9-inset-row:active,
.v9-hub-action-row:active,
.cap1-option-card:active {
  transform: scale(0.985);
}

@keyframes v9FadeSlideIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.screen-container {
  animation: v9FadeSlideIn 0.2s ease both;
}

/* Translucent Frosted Global Bars + Distraction-Free Session Hiding */
.top-bar {
  background-color: var(--v9-glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 0.5px solid var(--v9-hairline);
}

.bottom-nav-bar {
  background-color: rgba(255, 255, 255, 0.985);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-top: 0.5px solid var(--v9-hairline);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.03);
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-nav-item {
  min-height: 48px;
  gap: 3px;
  color: #6e6e73;
  transition: color 0.16s ease, transform 0.14s var(--v9-spring);
}

.bottom-nav-item.active {
  color: var(--accent-red);
}

.bottom-nav-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

body.v9-session-active .top-bar,
body.v9-session-active .bottom-nav-bar {
  display: none !important;
}

body.v9-session-active .main-content,
body.v9-session-active .reading-area {
  padding-top: 0 !important;
}

.screen-container.has-v9-dock {
  padding-bottom: calc(104px + env(safe-area-inset-bottom, 16px));
}

/* Editorial Grouped Surface & Inset Rows (No Boxy Dashboards) */
.v9-inset-group {
  background-color: #f8f8fa;
  border: 0.5px solid var(--v9-hairline);
  border-radius: 16px;
  overflow: hidden;
}

.v9-inset-row {
  width: 100%;
  min-height: 58px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  background-color: transparent;
  border: none;
  text-align: left;
  font-family: var(--v9-font-editorial);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.14s var(--v9-spring);
}

.v9-inset-row.is-compact {
  min-height: 54px;
  padding: 12px 16px;
}

.v9-inset-row + .v9-inset-row,
.v9-capitoli-row + .v9-capitoli-row {
  border-top: 0.5px solid var(--v9-hairline);
}

@media (hover: hover) {
  .v9-inset-row:not(.is-disabled):hover,
  .v9-hub-action-row:hover {
    background-color: var(--v9-row-hover);
  }
}

.v9-inset-row.is-disabled {
  opacity: 0.48;
  cursor: default;
}

.v9-row-num {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-red);
  min-width: 24px;
  flex-shrink: 0;
}

.v9-row-num.is-muted {
  color: var(--text-muted);
}

.v9-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.v9-row-title {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.28;
  color: #000000;
}

.v9-row-title-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.28;
  color: #000000;
}

.v9-row-meta {
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-muted);
}

.v9-mini-track {
  width: 100%;
  height: 2.5px;
  margin-top: 4px;
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.v9-mini-track.is-hub {
  height: 3.5px;
  margin-top: 10px;
}

.v9-mini-fill {
  height: 100%;
  background-color: var(--accent-red);
  border-radius: 999px;
  transition: width 0.36s var(--v9-spring);
}

/* Home Screen: Editorial Masthead & Continua a Studiare */
.v9-home-screen {
  padding-top: 12px;
}

.v9-editorial-masthead {
  margin-bottom: 18px;
}

.v9-masthead-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-red);
  margin-bottom: 4px;
}

.v9-masthead-title {
  margin: 0 0 12px 0;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #000000;
}

.v9-overall-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v9-overall-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.v9-overall-meta-row strong {
  color: #000000;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.v9-continue-hero-wrap {
  margin-bottom: 24px;
}

.v9-continue-hero {
  width: 100%;
  padding: 18px 20px;
  min-height: 82px;
  background-color: #0d0d0f;
  color: #ffffff;
  border: none;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  text-align: left;
  font-family: var(--v9-font-editorial);
  cursor: pointer;
  transition: transform 0.16s var(--v9-spring), box-shadow 0.16s ease;
}

.v9-continue-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.v9-continue-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
}

.v9-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background-color: #d92638;
  box-shadow: 0 0 0 3px rgba(217, 38, 56, 0.24);
}

.v9-continue-arrow {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}

.v9-continue-target {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.26;
  color: #ffffff;
}

.v9-section-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.v9-section-title-row .ux-kicker-heading {
  margin: 0;
}

.v9-inline-text-btn {
  min-height: 36px;
  padding: 4px 2px;
  background: transparent;
  border: none;
  font-family: var(--v9-font-editorial);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-red);
  cursor: pointer;
}

/* Capitoli Full Directory Screen */
.v9-capitoli-row {
  display: flex;
  flex-direction: column;
}

.v9-capitoli-row.is-disabled {
  padding: 14px 16px;
  opacity: 0.48;
}

.v9-capitoli-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.v9-capitoli-main-btn {
  width: 100%;
  min-height: 56px;
  padding: 14px 16px 10px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  font-family: var(--v9-font-editorial);
  cursor: pointer;
}

.v9-capitoli-head {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.v9-capitoli-quick-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 16px 14px 52px;
}

.v9-quick-pill {
  min-height: 38px;
  padding: 6px 13px;
  background-color: #ffffff;
  border: 0.5px solid rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  font-family: var(--v9-font-editorial);
  font-size: 13.5px;
  font-weight: 600;
  color: #000000;
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}

.v9-quick-pill.is-subtle {
  color: var(--accent-red);
  border-color: rgba(179, 27, 27, 0.28);
}

.v9-capitoli-tools {
  margin-top: 22px;
}

/* Chapter Hub: Direct Trio (Studia · Impara · Verifica) + Contextual Ripasso */
.v9-hub-resume-banner {
  width: 100%;
  min-height: 50px;
  margin-bottom: 16px;
  padding: 10px 15px;
  background-color: #fdf3f4;
  border: 1px solid rgba(179, 27, 27, 0.35);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--v9-font-editorial);
  font-size: 14.5px;
  color: #111111;
  cursor: pointer;
}

.v9-hub-resume-banner strong {
  color: var(--accent-red);
  font-weight: 700;
}

.v9-hub-core-section {
  margin-bottom: 22px;
}

.v9-hub-action-row {
  width: 100%;
  min-height: 70px;
  padding: 15px 16px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  font-family: var(--v9-font-editorial);
  cursor: pointer;
  transition: background-color 0.14s ease, transform 0.14s var(--v9-spring);
}

.v9-hub-action-row + .v9-hub-action-row {
  border-top: 0.5px solid var(--v9-hairline);
}

.v9-hub-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0.055);
  color: #000000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.v9-hub-icon-wrap svg {
  width: 20px;
  height: 20px;
}

.v9-hub-icon-wrap.is-crimson {
  background-color: rgba(179, 27, 27, 0.1);
  color: var(--accent-red);
}

.v9-hub-action-text {
  flex: 1;
  min-width: 0;
}

.v9-hub-action-title {
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.2;
  color: #000000;
  margin-bottom: 2px;
}

.v9-hub-action-desc {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--text-muted);
}

.v9-critical-pill {
  padding: 2px 9px;
  border-radius: 999px;
  background-color: var(--accent-red);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* Search + Embedded A–Z Segmented Strip & Letter Pills */
.v9-search-mode-segmented {
  margin: 10px auto 0;
  max-width: 640px;
  padding: 3px;
  background-color: #efeff2;
  border-radius: 11px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

.v9-seg-pill {
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 8.5px;
  border: none;
  background: transparent;
  font-family: var(--v9-font-editorial);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.v9-seg-pill.active {
  background-color: #ffffff;
  color: #000000;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.v9-az-letter-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0 12px;
  margin-bottom: 6px;
  scrollbar-width: none;
}

.v9-az-letter-strip::-webkit-scrollbar {
  display: none;
}

.v9-az-jump-pill {
  min-width: 34px;
  min-height: 36px;
  padding: 0 10px;
  flex-shrink: 0;
  border-radius: 9px;
  border: 0.5px solid var(--v9-hairline);
  background-color: #f6f6f8;
  font-family: var(--v9-font-editorial);
  font-size: 13px;
  font-weight: 700;
  color: #000000;
  cursor: pointer;
}

.ux-az-groups-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.az-letter-group {
  display: flex;
  flex-direction: column;
}

.az-letter-heading {
  margin: 0 0 8px 4px;
  font-family: var(--v9-font-editorial);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent-red);
}

.az-def-list {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 0.5px solid var(--v9-hairline);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.az-def-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  text-align: left;
  background-color: #ffffff;
  border: none;
  border-bottom: 0.5px solid var(--v9-hairline);
  cursor: pointer;
  gap: 12px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.14s ease;
}

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

.az-def-item:hover,
.az-def-item:active {
  background-color: var(--v9-grouped-bg);
}

/* Immersive Reader (STUDIA) + Sliding Segmented Control + iOS Bottom Sheet */
.v9-reader-screen {
  padding-top: 0 !important;
  max-width: 720px;
}

.v9-glass-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background-color: var(--v9-glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

.v9-reader-topbar {
  min-height: 50px;
  padding: max(8px, env(safe-area-inset-top, 0px)) 0 8px;
  margin: 0 -16px;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 0.5px solid var(--v9-hairline);
}

.v9-sec-picker-pill {
  min-height: 38px;
  padding: 5px 14px;
  border-radius: 999px;
  background-color: #f2f2f5;
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--v9-font-editorial);
  font-size: 13.5px;
  font-weight: 700;
  color: #000000;
  cursor: pointer;
}

.v9-reader-count {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  min-width: 34px;
  text-align: right;
}

.v9-reader-progress-track {
  width: calc(100% + 32px);
  margin: 0 -16px 14px;
  height: 2.5px;
  background-color: rgba(0, 0, 0, 0.06);
}

.v9-reader-progress-fill {
  height: 100%;
  background-color: var(--accent-red);
  transition: width 0.3s var(--v9-spring);
}

.v9-reader-paper {
  max-width: 68ch;
  margin: 0 auto;
}

.v9-reader-paper .ux-section-reading-body {
  font-size: 17px;
  line-height: 1.72;
}

.v9-reader-paper .ux-section-reading-body .explanation-paragraph {
  font-size: 17px;
  line-height: 1.72;
}

/* Smooth Sliding Segmented Control */
.v9-sliding-segmented {
  position: relative !important;
  top: auto !important;
  z-index: 2 !important;
  box-shadow: none !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 3px;
  margin-bottom: 18px;
  background-color: #efeff2;
  border: none;
  border-radius: 12px;
}

.v9-seg-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  background-color: #ffffff;
  border-radius: 9px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: transform 0.28s var(--v9-spring);
  pointer-events: none;
  z-index: 1;
}

.v9-sliding-segmented[data-active-idx="1"] .v9-seg-thumb {
  transform: translateX(100%);
}

.v9-sliding-segmented .ux-seg-btn {
  position: relative;
  z-index: 2;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  min-height: 40px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.v9-sliding-segmented .ux-seg-btn.active {
  color: #000000;
  font-weight: 700;
}

.v9-reader-end-cta {
  margin: 26px 0 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.v9-reader-prev-link {
  min-height: 44px;
  padding: 8px 14px;
  background: transparent;
  border: none;
  font-family: var(--v9-font-editorial);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}

/* iOS Modal Bottom Sheets (#contextual-lookup-sheet & #v9-section-sheet) */
@keyframes v9SheetRise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.contextual-lookup-sheet:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.16);
  animation: v9SheetRise 0.24s var(--v9-spring) both;
}

.v9-section-sheet:not(.hidden),
.contextual-lookup-backdrop:not(.hidden) {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.v9-sheet-handle-wrap {
  display: flex;
  justify-content: center;
  padding: 10px 0 2px;
}

.v9-sheet-handle {
  width: 38px;
  height: 4.5px;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.2);
}

.v9-section-sheet-list {
  display: flex;
  flex-direction: column;
  max-height: min(62dvh, 460px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 12px);
}

.v9-sheet-sec-row {
  width: 100%;
  min-height: 50px;
  padding: 11px 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  border-bottom: 0.5px solid var(--v9-hairline);
  text-align: left;
  font-family: var(--v9-font-editorial);
  cursor: pointer;
}

.v9-sheet-sec-row.is-current .v9-sheet-sec-code,
.v9-sheet-sec-row.is-current .v9-sheet-sec-title,
.v9-sheet-sec-row.is-current .v9-sheet-sec-state {
  color: var(--accent-red);
  font-weight: 700;
}

.v9-sheet-sec-row.is-pending {
  opacity: 0.45;
  cursor: default;
}

.v9-sheet-sec-code {
  min-width: 46px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}

.v9-sheet-sec-title {
  flex: 1;
  min-width: 0;
  font-size: 15.5px;
  line-height: 1.3;
  color: #000000;
}

.v9-sheet-sec-state {
  font-size: 15px;
  color: var(--text-muted);
}

/* Active Session Header & Thumb-Zone Action Dock */
.ux-session-focus {
  padding-top: 0 !important;
}

.ux-session-topbar.v9-glass-header {
  min-height: 50px;
  margin: 0 -16px;
  padding: max(8px, env(safe-area-inset-top, 0px)) 16px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.5px solid var(--v9-hairline);
}

.v9-thumb-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  padding: 10px 16px max(12px, env(safe-area-inset-bottom, 12px));
  background-color: rgba(255, 255, 255, 0.985);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 0.5px solid var(--v9-hairline);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
}

.v9-thumb-dock-inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.v9-dock-secondary {
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: 50px;
  padding: 0 15px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  white-space: nowrap;
}

.v9-dock-primary {
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 0;
  min-height: 50px;
  border-radius: 14px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.v9-dock-primary:disabled {
  background-color: #e8e8ed !important;
  border-color: #e8e8ed !important;
  color: #8e8e93 !important;
  opacity: 1 !important;
}

/* Interactive Exercise Cards & Visual Strategies Polish */
.cap1-question-card {
  border-radius: 18px !important;
  border: 0.5px solid var(--v9-hairline) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.045);
}

.cap1-option-card,
.cap1-option-btn,
.cap1-tile-btn,
.cap1-match-card,
.cap1-order-pool-card {
  border-radius: 13px !important;
  min-height: 50px;
  transition: transform 0.14s var(--v9-spring), border-color 0.16s ease,
    background-color 0.16s ease, box-shadow 0.16s ease !important;
}

.cap1-option-card.is-selected,
.cap1-option-btn.is-selected {
  box-shadow: 0 3px 12px rgba(179, 27, 27, 0.12);
}

button.cap1-option-btn:active,
button.cap1-tile-btn:active,
button.cap1-match-card:active,
button.cap1-order-pool-card:active {
  transform: scale(0.985);
}

.v9-concept-map-canvas {
  border-radius: 14px;
  background-color: #f6f6f8;
  border: 0.5px solid var(--v9-hairline);
}

.v9-map-edge-row {
  border-radius: 12px;
  border: 0.5px solid var(--v9-hairline);
}

.v9-map-node {
  border-radius: 10px;
}

/* 3D Flashcard iPhone Safari Polish */
.v9-flashcard-face {
  border-radius: 18px !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.06);
}

/* SVG Circular Score Ring & Summary View */
.v9-summary-screen {
  padding-top: 12px;
}

.v9-summary-hero {
  background-color: #f8f8fa;
  border: 0.5px solid var(--v9-hairline);
  border-radius: 20px;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.v9-score-ring-wrap {
  position: relative;
  width: 108px;
  height: 108px;
  margin: 4px 0;
}

.v9-score-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.v9-score-ring-track {
  fill: none;
  stroke: rgba(0, 0, 0, 0.08);
  stroke-width: 7.5;
}

.v9-score-ring-fill {
  fill: none;
  stroke: var(--accent-red);
  stroke-width: 7.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.7s var(--v9-spring);
}

.v9-score-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
}

.v9-score-ring-num {
  font-size: 26px;
  font-weight: 700;
  color: #000000;
  font-variant-numeric: tabular-nums;
}

.v9-score-ring-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 2px;
}

.v9-summary-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #000000;
}

.v9-summary-subtitle {
  margin: 0;
  max-width: 34ch;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

.v9-summary-stat-strip {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0;
}

.v9-summary-stat {
  padding: 10px 6px;
  background-color: #ffffff;
  border: 0.5px solid var(--v9-hairline);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.v9-summary-stat strong {
  font-size: 20px;
  font-weight: 700;
  color: #000000;
}

.v9-summary-stat.is-accent strong {
  color: var(--accent-red);
}

.v9-summary-stat span {
  font-size: 11.5px;
  color: var(--text-muted);
}

.v9-summary-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.v9-summary-details-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.v9-summary-hero .v9-error-analysis-box {
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 14px;
}

.v9-error-analysis-bullets {
  margin: 8px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-ink);
}

.v9-error-analysis-more {
  margin: 8px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-red);
}

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