/*
 * Security Planner — Stylesheet
 *
 * Architettura BEM, variabili CSS, mobile-first.
 * Nessuna dipendenza da framework esterno.
 * Funziona dentro qualsiasi tema Divi senza conflitti:
 * tutti i selettori sono prefissati con .lm-.
 */

/* ─── Variabili ──────────────────────────────────────────────────────────────── */

:root {
  /* Colori principali */
  --sp-accent:        #4E59DF;
  --sp-accent-dark:   #3a44c0;
  --sp-accent-light:  #eef0fb;
  --sp-accent-mid:    #b8bdf0;

  /* Gradiente principale */
  --sp-gradient:      linear-gradient(135deg, #C320D1 0%, #4E59DF 100%);
  --sp-gradient-hover:linear-gradient(135deg, #a81bb5 0%, #3a44c0 100%);

  /* Colore secondario — banner, popup, fondamentale */
  --sp-violet:        #C320D1;
  --sp-violet-mid:    #e89bee;
  --sp-violet-light:  #f8f0fd;

  --sp-text:          #1a1a1a;
  --sp-text-muted:    #6b7280;
  --sp-text-light:    #9ca3af;

  --sp-bg:            #ffffff;
  --sp-bg-subtle:     #f8f0fd;   /* tinta viola sottile — uguale a violet-light */
  --sp-border:        #e5e7eb;
  --sp-border-focus:  #4262E1;

  --sp-radius:        10px;
  --sp-radius-sm:     6px;

  --sp-shadow:        0 1px 3px rgba(66,98,225,.08), 0 1px 2px rgba(66,98,225,.06);
  --sp-shadow-md:     0 4px 12px rgba(66,98,225,.12);

  --sp-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sp-transition:    200ms ease;
}

/* ─── Reset locale ───────────────────────────────────────────────────────────── */

.lm-quiz *,
.lm-plan * {
  box-sizing: border-box;
}

.lm-quiz,
.lm-plan {
  font-family:  var(--sp-font);
  color:        var(--sp-text);
  line-height:  1.6;
  max-width:    680px;
  margin:       0 auto;
  padding:      0 16px;
}

/* ─── Progress bar ───────────────────────────────────────────────────────────── */

.lm-quiz__progress {
  background: var(--sp-border);
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}

.lm-quiz__progress-fill {
  height: 100%;
  background: var(--sp-gradient);
  border-radius: 99px;
  transition: width 350ms ease;
}

.lm-quiz__step-label {
  font-size:  .85rem;
  color:      var(--sp-text-muted);
  margin:     0 0 24px;
}

/* ─── Fieldset / domanda ─────────────────────────────────────────────────────── */

.lm-quiz__fieldset {
  border:  none;
  padding: 0;
  margin:  0 0 24px;
}

.lm-quiz__question {
  font-size:    1.3rem;
  font-weight:  600;
  color:        var(--sp-text);
  margin:       0 0 8px;
  padding:      0;
  outline:      none;
}

.lm-quiz__hint {
  font-size:  .85rem;
  color:      var(--sp-text-muted);
  margin:     0 0 16px;
}

/* ─── Opzioni quiz ───────────────────────────────────────────────────────────── */

.lm-quiz__options {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.lm-quiz__option {
  display:          flex;
  align-items:      flex-start;
  gap:              12px;
  padding:          14px 16px;
  background:       var(--sp-bg);
  border:           2px solid var(--sp-border);
  border-radius:    var(--sp-radius);
  cursor:           pointer;
  transition:       border-color var(--sp-transition), background var(--sp-transition);
  user-select:      none;
}

.lm-quiz__option:hover {
  border-color: var(--sp-accent-mid);
  background:   var(--sp-accent-light);
}

.lm-quiz__option--selected {
  border-color: var(--sp-accent);
  background:   var(--sp-accent-light);
}

/* Nascondi input nativo, mostra checkmark custom */
.lm-quiz__option input[type="checkbox"],
.lm-quiz__option input[type="radio"] {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

.lm-quiz__checkmark {
  flex-shrink:   0;
  width:         22px;
  height:        22px;
  border:        2px solid var(--sp-border);
  border-radius: 4px;
  background:    var(--sp-bg);
  margin-top:    1px;
  transition:    border-color var(--sp-transition), background var(--sp-transition);
  position:      relative;
}

/* Radio = cerchio */
.lm-quiz__option input[type="radio"] ~ .lm-quiz__checkmark {
  border-radius: 50%;
}

.lm-quiz__option--selected .lm-quiz__checkmark {
  background:    var(--sp-accent);
  border-color:  var(--sp-accent);
}

/* Tick SVG via pseudo-elemento */
.lm-quiz__option--selected .lm-quiz__checkmark::after {
  content:     '';
  position:    absolute;
  top:         3px;
  left:        5px;
  width:       7px;
  height:      11px;
  border:      2px solid #fff;
  border-top:  none;
  border-left: none;
  transform:   rotate(40deg);
}

/* Punto per radio */
.lm-quiz__option--selected input[type="radio"] ~ .lm-quiz__checkmark::after {
  top:           5px;
  left:          5px;
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    #fff;
  border:        none;
  transform:     none;
}

/* Focus visibile da tastiera */
.lm-quiz__option:focus-within {
  outline:        3px solid var(--sp-accent);
  outline-offset: 2px;
}

.lm-quiz__option-label {
  font-size:  1rem;
  font-weight: 500;
  flex: 1;
}

.lm-quiz__option-desc {
  display:    block;
  font-size:  .85rem;
  color:      var(--sp-text-muted);
  font-weight: 400;
  margin-top: 2px;
}

/* ─── Navigazione quiz ───────────────────────────────────────────────────────── */

.lm-quiz__nav {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             12px;
  margin-top:      8px;
}

.lm-quiz__btn {
  display:          inline-flex;
  align-items:      center;
  gap:              6px;
  padding:          12px 24px;
  border-radius:    var(--sp-radius);
  font-size:        1rem;
  font-weight:      600;
  cursor:           pointer;
  transition:       background var(--sp-transition), opacity var(--sp-transition);
  text-decoration:  none;
  border:           none;
}

.lm-quiz__btn--next {
  background: var(--sp-gradient);
  color:      #fff;
  margin-left: auto;
}

.lm-quiz__btn--next:hover:not(:disabled) {
  background: var(--sp-gradient-hover);
}

.lm-quiz__btn--next:disabled {
  opacity:  .45;
  cursor:   not-allowed;
}

.lm-quiz__btn--back {
  background: var(--sp-bg-subtle);
  color:      var(--sp-text-muted);
  border:     2px solid var(--sp-border);
}

.lm-quiz__btn--back:hover {
  background: var(--sp-border);
  color:      var(--sp-text);
}

/* ─── Schermata completamento ────────────────────────────────────────────────── */

.lm-quiz__complete {
  text-align: center;
  padding:    48px 0;
}

.lm-quiz__complete-icon {
  font-size:   3rem;
  color:       var(--sp-accent);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 16px;
}

.lm-quiz__complete h2 {
  font-size:  1.4rem;
  margin:     0 0 8px;
}

/* ─── Schermata riprendere quiz ──────────────────────────────────────────────── */

.lm-quiz__resume {
  background:    var(--sp-accent-light);
  border:        2px solid var(--sp-accent-mid);
  border-radius: var(--sp-radius);
  padding:       24px;
  text-align:    center;
}

.lm-quiz__resume p {
  margin: 0 0 20px;
  font-size: 1.05rem;
}

/* ─── Spinner ────────────────────────────────────────────────────────────────── */

.lm-spinner {
  width:            36px;
  height:           36px;
  border:           3px solid var(--sp-border);
  border-top-color: var(--sp-accent);
  border-radius:    50%;
  animation:        sp-spin 700ms linear infinite;
  margin:           20px auto 0;
}

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

.lm-plan__summary {
  background:    var(--sp-bg-subtle);
  border:        1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  padding:       16px 20px;
  margin-bottom: 24px;
}

.lm-plan__summary-text {
  font-size:    .95rem;
  color:        var(--sp-text-muted);
  margin-bottom: 10px;
}

.lm-plan__summary-text strong {
  color:      var(--sp-text);
  font-weight: 600;
}

.lm-plan__progress-bar {
  background:    var(--sp-border);
  border-radius: 99px;
  height:        8px;
  overflow:      hidden;
}

.lm-plan__progress-fill {
  height:     100%;
  background: var(--sp-gradient);
  border-radius: 99px;
  transition: width 500ms ease;
}

/* ─── Azione singola ─────────────────────────────────────────────────────────── */

.lm-plan__actions {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.lm-action {
  background:    var(--sp-bg);
  border:        2px solid var(--sp-border);
  border-radius: var(--sp-radius);
  padding:       18px 20px;
  transition:    border-color var(--sp-transition), background var(--sp-transition);
}

.lm-action:hover {
  border-color: var(--sp-accent-mid);
}

.lm-action--done {
  background:    var(--sp-accent-light);
  border-color:  var(--sp-accent-mid);
}

.lm-action--done .lm-action__title {
  text-decoration: line-through;
  color:           var(--sp-text-muted);
}

/* Header azione */
.lm-action__header {
  display:     flex;
  align-items: flex-start;
  gap:         12px;
  flex-wrap:   wrap;
}

.lm-action__check-label {
  display:     flex;
  align-items: flex-start;
  gap:         12px;
  cursor:      pointer;
  flex:        1;
  min-width:   0;
}

/* Nascondi checkbox nativo */
.lm-action__checkbox {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

/* Checkmark custom */
.lm-action__checkmark {
  flex-shrink:   0;
  width:         24px;
  height:        24px;
  border:        2px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  background:    var(--sp-bg);
  transition:    background var(--sp-transition), border-color var(--sp-transition);
  position:      relative;
  margin-top:    1px;
}

.lm-action__checkbox:checked ~ .lm-action__checkmark {
  background:   var(--sp-accent);
  border-color: var(--sp-accent);
}

.lm-action__checkbox:checked ~ .lm-action__checkmark::after {
  content:     '';
  position:    absolute;
  top:         3px;
  left:        6px;
  width:       7px;
  height:      12px;
  border:      2.5px solid #fff;
  border-top:  none;
  border-left: none;
  transform:   rotate(40deg);
}

/* Focus da tastiera */
.lm-action__check-label:focus-within .lm-action__checkmark {
  outline:        3px solid var(--sp-accent);
  outline-offset: 2px;
}

.lm-action__title {
  font-size:   1rem;
  font-weight: 600;
  line-height: 1.4;
  flex: 1;
}

/* Meta (tempo, difficoltà) */
.lm-action__meta-item {
  font-size:  .8rem;
  color:      var(--sp-text-muted);
}

/* Badge difficoltà */
.lm-action__badge {
  display:       inline-flex;
  align-items:   center;
  gap:           3px;
  font-size:     .72rem;
  font-weight:   700;
  padding:       2px 8px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.lm-action__badge--base {
  background: #cffafe;   /* azzurro acqua marina */
  color:      #0e7490;
}

.lm-action__badge--intermedio {
  background: #bbf7d0;   /* verde */
  color:      #166534;
}

.lm-action__badge--avanzato {
  background: #fef08a;   /* giallo */
  color:      #854d0e;
}

.lm-action__badge--nerd {
  background: #fed7aa;   /* arancione */
  color:      #9a3412;
}

/* Badge ruolo utente */
.lm-action__badge--role {
  background: #f3f4f6;
  color:      #374151;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* Label "Difficoltà:" e "Per:" prima dei badge */
.lm-action__meta-label {
  font-size:  .75rem;
  font-weight: 600;
  color:      var(--sp-text-muted);
  white-space: nowrap;
}

/* Descrizione breve */
.lm-action__desc {
  font-size:   .95rem;
  color:       var(--sp-text-muted);
  margin:      10px 0 0 36px;
  line-height: 1.5;
}

/* Pulsante toggle istruzioni — primario, con sfondo */
.lm-action__toggle-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  margin:        12px 0 0 36px;
  padding:       8px 18px;
  font-size:     .85rem;
  font-weight:   700;
  color:         #fff;
  background:    var(--sp-gradient);
  border:        none;
  border-radius: var(--sp-radius-sm);
  cursor:        pointer;
  transition:    opacity var(--sp-transition), transform var(--sp-transition);
}

.lm-action__toggle-btn:hover {
  opacity: .88;
  transform: translateY(-1px);
}

.lm-action__toggle-btn:active {
  transform: translateY(0);
}

/* Link approfondimento — secondari, senza sfondo */
.lm-action__link {
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  padding:         4px 0;
  margin:          0;
  font-size:       .82rem;
  font-weight:     600;
  color:           var(--sp-accent);
  text-decoration: none;
  border-bottom:   1.5px solid var(--sp-accent-mid);
  background:      transparent;
  border-radius:   0;
  transition:      border-color var(--sp-transition), color var(--sp-transition);
}

.lm-action__link:hover {
  color:        var(--sp-accent-dark);
  border-color: var(--sp-accent);
  background:   transparent;
}

/* Container link — riga compatta */
.lm-action__links {
  display:     flex;
  flex-wrap:   wrap;
  gap:         16px;
  margin:      10px 0 0 36px;
  align-items: center;
}

.lm-catalog__action .lm-action__links {
  margin-left: 0;
}

/* Meta row — due righe: difficoltà + ruolo */
.lm-action__meta {
  display:      flex;
  flex-wrap:    wrap;
  align-items:  center;
  gap:          4px 10px;
  margin-top:   6px;
  padding-left: 36px;
  width:        100%;
}

.lm-action__meta-row {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-wrap:   wrap;
}

/* Istruzioni dettagliate */
.lm-action__instructions {
  margin:     12px 0 0 36px;
  padding:    16px;
  background: var(--sp-bg-subtle);
  border-left: 3px solid var(--sp-accent);
  border-radius: 0 var(--sp-radius-sm) var(--sp-radius-sm) 0;
}

.lm-action__instructions-body {
  font-size:   .95rem;
  line-height: 1.7;
  color:       var(--sp-text);
}

.lm-action__instructions-body p,
.lm-single__instructions p      { margin: 0 0 12px; }

/* Elenchi — usa CSS counter per bypassare il reset list-style:none di Divi */
.lm-action__instructions-body ol,
.lm-single__instructions ol {
  padding-left:  0 !important;
  margin:        0 0 14px !important;
  list-style:    none !important;
  counter-reset: lm-ol-counter;
}
.lm-action__instructions-body ol > li,
.lm-single__instructions ol > li {
  display:        block !important;
  position:       relative !important;
  padding-left:   2em !important;
  margin-bottom:  8px !important;
  line-height:    1.65 !important;
  counter-increment: lm-ol-counter;
}
.lm-action__instructions-body ol > li::before,
.lm-single__instructions ol > li::before {
  content:      counter(lm-ol-counter) ". ";
  position:     absolute !important;
  left:         0 !important;
  top:          0 !important;
  font-weight:  700;
  color:        var(--sp-accent);
  min-width:    1.6em;
}

.lm-action__instructions-body ul,
.lm-single__instructions ul {
  padding-left: 0 !important;
  margin:       0 0 14px !important;
  list-style:   none !important;
}
.lm-action__instructions-body ul > li,
.lm-single__instructions ul > li {
  display:      block !important;
  position:     relative !important;
  padding-left: 1.4em !important;
  margin-bottom: 8px !important;
  line-height:  1.65 !important;
}
.lm-action__instructions-body ul > li::before,
.lm-single__instructions ul > li::before {
  content:    "•";
  position:   absolute !important;
  left:       0 !important;
  top:        0 !important;
  color:      var(--sp-accent);
  font-weight: 700;
}

/* Liste annidate */
.lm-action__instructions-body ol ol,
.lm-single__instructions ol ol { counter-reset: lm-ol-counter-2; margin: 6px 0 6px !important; }
.lm-action__instructions-body ol ol > li,
.lm-single__instructions ol ol > li { counter-increment: lm-ol-counter-2; }
.lm-action__instructions-body ol ol > li::before,
.lm-single__instructions ol ol > li::before { content: counter(lm-ol-counter-2, lower-alpha) ". "; }
.lm-action__instructions-body ul ul,
.lm-single__instructions ul ul { margin: 6px 0 6px !important; }
.lm-action__instructions-body ul ul > li::before,
.lm-single__instructions ul ul > li::before { content: "–"; }

.lm-action__instructions-body li > p,
.lm-single__instructions li > p { margin-bottom: 4px; }

/* Blocchi <code> inline e <pre><code> — !important per battere reset Divi */
.lm-action__instructions-body code,
.lm-catalog__body code,
.lm-single__instructions code,
.lm-plan__step code {
  background:    var(--sp-accent-light) !important;
  color:         var(--sp-accent) !important;
  padding:       2px 6px !important;
  border-radius: 3px !important;
  font-size:     .88em !important;
  font-family:   ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace !important;
  word-break:    break-word;
}
.lm-action__instructions-body pre,
.lm-catalog__body pre,
.lm-single__instructions pre,
.lm-plan__step pre {
  background:    var(--sp-accent-light) !important;
  border-left:   3px solid var(--sp-accent) !important;
  border-radius: 0 4px 4px 0;
  padding:       10px 14px !important;
  margin:        0 0 14px !important;
  overflow-x:    auto;
  font-size:     .88em !important;
}
.lm-action__instructions-body pre code,
.lm-catalog__body pre code,
.lm-single__instructions pre code,
.lm-plan__step pre code {
  background: none !important;
  padding:    0 !important;
  color:      var(--sp-accent) !important;
  font-size:  1em;
}

/* ─── Piano — stati vuoto/errore/loading ─────────────────────────────────────── */

.lm-plan__loading,
.lm-plan__empty,
.lm-plan__error {
  text-align: center;
  padding:    48px 0;
  color:      var(--sp-text-muted);
}

.lm-plan__loading p,
.lm-plan__empty p,
.lm-plan__error p {
  margin: 0 0 16px;
}

/* ─── Footer piano ───────────────────────────────────────────────────────────── */

.lm-plan__footer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--sp-border);
  display:    flex;
  justify-content: flex-start;
}

/* ─── Messaggi quiz ──────────────────────────────────────────────────────────── */

.lm-quiz__error {
  padding:       16px 20px;
  background:    #fee2e2;
  color:         #991b1b;
  border-radius: var(--sp-radius);
  font-size:     .95rem;
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .lm-quiz__question {
    font-size: 1.1rem;
  }

  .lm-quiz__btn {
    padding: 11px 18px;
    font-size: .95rem;
  }

  .lm-action__meta,
  .lm-action__desc,
  .lm-action__toggle-btn,
  .lm-action__instructions,
  .lm-action__link {
    margin-left: 0;
  }

  .lm-action__header {
    flex-direction: column;
  }
}

/* ─── Prefer reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .lm-spinner {
    animation: none;
    border-top-color: var(--sp-accent);
  }

  .lm-quiz__progress-fill,
  .lm-plan__progress-fill {
    transition: none;
  }
}

/* ─── High contrast ──────────────────────────────────────────────────────────── */

@media (forced-colors: active) {
  .lm-quiz__option--selected,
  .lm-action--done {
    border: 3px solid ButtonText;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CATALOGO — [lm_catalog]
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Barra filtri ───────────────────────────────────────────────────────────── */

.lm-catalog__filters {
  display:    flex;
  flex-wrap:  wrap;
  gap:        8px;
  margin-bottom: 20px;
}

.lm-catalog__filter-pill {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       8px 16px;
  background:    var(--sp-bg-subtle);
  border:        2px solid var(--sp-border);
  border-radius: 99px;
  font-size:     .88rem;
  font-weight:   600;
  color:         var(--sp-text-muted);
  cursor:        pointer;
  transition:    background var(--sp-transition),
                 border-color var(--sp-transition),
                 color var(--sp-transition);
  white-space:   nowrap;
}

.lm-catalog__filter-pill:hover {
  background:   var(--sp-accent-light);
  border-color: var(--sp-accent-mid);
  color:        var(--sp-accent);
}

.lm-catalog__filter-pill--active {
  background:   var(--sp-gradient);
  border-color: transparent;
  color:        #fff;
}

.lm-catalog__filter-pill--active:hover {
  background:   var(--sp-gradient-hover);
  border-color: transparent;
  color:        #fff;
}

.lm-catalog__filter-count {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  min-width:     20px;
  height:        20px;
  padding:       0 5px;
  background:    rgba(0,0,0,.12);
  border-radius: 99px;
  font-size:     .78rem;
  font-weight:   700;
}

.lm-catalog__filter-pill--active .lm-catalog__filter-count {
  background: rgba(255,255,255,.25);
}

/* ─── Totale azione ──────────────────────────────────────────────────────────── */

.lm-catalog__total {
  font-size:    .88rem;
  color:        var(--sp-text-muted);
  margin:       0 0 28px;
}

.lm-catalog__total strong {
  color:      var(--sp-text);
  font-weight: 600;
}

/* ─── Gruppi per ambito ──────────────────────────────────────────────────────── */

.lm-catalog__groups {
  display:        flex;
  flex-direction: column;
  gap:            40px;
}

.lm-catalog__group[hidden] {
  display: none;
}

.lm-catalog__group-title {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   1.15rem;
  font-weight: 700;
  color:       var(--sp-text);
  margin:      0 0 16px;
  padding-bottom: 10px;
  border-bottom:  2px solid var(--sp-border);
}

.lm-catalog__group-count {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       24px;
  height:          24px;
  padding:         0 7px;
  background:      var(--sp-accent-light);
  color:           var(--sp-accent);
  border-radius:   99px;
  font-size:       .8rem;
  font-weight:     700;
  margin-left:     auto;
}

.lm-catalog__group-actions {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

/* ─── Azione nel catalogo (variante senza checkbox) ─────────────────────────── */

.lm-catalog__action .lm-action__header {
  align-items: center;
}

.lm-catalog__action .lm-action__title {
  font-size:   1rem;
  font-weight: 600;
}

/* La meta nel catalogo non ha bisogno del padding-left del checkmark */
.lm-catalog__meta {
  padding-left: 0 !important;
}

/* Badge "Completata" */
.lm-catalog__done-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  flex-shrink:   0;
  padding:       3px 10px;
  background:    var(--sp-accent-light);
  color:         var(--sp-accent);
  border:        1.5px solid var(--sp-accent-mid);
  border-radius: 99px;
  font-size:     .78rem;
  font-weight:   700;
}

/* ─── Footer catalogo ────────────────────────────────────────────────────────── */

.lm-catalog__footer {
  margin-top:  40px;
  padding-top: 28px;
  border-top:  1px solid var(--sp-border);
  display:     flex;
  justify-content: center;
}

/* ─── Priorità ───────────────────────────────────────────────────────────────── */

.lm-action--fondamentale {
  border-color: var(--sp-violet);
  border-left:  4px solid var(--sp-violet);
}

.lm-action__priority-badge {
  display:       inline-block;
  font-size:     .75rem;
  font-weight:   700;
  color:         var(--sp-violet);
  background:    var(--sp-violet-light);
  border:        1.5px solid var(--sp-violet-mid);
  border-radius: 99px;
  padding:       2px 10px;
  margin-bottom: 8px;
}

/* Badge "In evidenza" — azione con vista prioritaria */
.lm-action__priority-badge--evidenza {
  background:   var(--sp-accent-light);
  color:        var(--sp-accent);
  border-color: var(--sp-accent-mid);
}

/* ─── Pulsante condividi ─────────────────────────────────────────────────────── */

.lm-catalog__share-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  margin:        10px 0 0;
  padding:       5px 12px;
  font-size:     .82rem;
  font-weight:   600;
  color:         var(--sp-text-muted);
  background:    transparent;
  border:        1.5px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  cursor:        pointer;
  transition:    color var(--sp-transition),
                 border-color var(--sp-transition),
                 background var(--sp-transition);
}

.lm-catalog__share-btn:hover {
  color:         var(--sp-accent);
  border-color:  var(--sp-accent-mid);
  background:    var(--sp-accent-light);
}

.lm-catalog__share-btn--copied {
  color:         var(--sp-accent) !important;
  border-color:  var(--sp-accent-mid) !important;
  background:    var(--sp-accent-light) !important;
}

.lm-catalog__share-btn--error {
  color:         #991b1b !important;
  border-color:  #fca5a5 !important;
  font-size:     .75rem;
}

/* ─── Evidenziazione azione da link diretto ──────────────────────────────────── */

@keyframes lm-highlight {
  0%   { box-shadow: 0 0 0 3px rgba(26, 107, 74, 0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(26, 107, 74, 0.15); }
  100% { box-shadow: 0 0 0 0 rgba(26, 107, 74, 0); }
}

.lm-action--highlight {
  animation: lm-highlight 2.5s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .lm-action--highlight {
    animation: none;
    outline: 3px solid var(--sp-accent);
    outline-offset: 2px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGINA SINGOLA — /azione/[slug]/
   ═══════════════════════════════════════════════════════════════════════════ */

.lm-single {
  font-family: var(--sp-font);
  color:       var(--sp-text);
  max-width:   720px;
  margin:      0 auto;
  padding:     0 16px 64px;
}

/* ─── Breadcrumb ambito ──────────────────────────────────────────────────────── */

.lm-single__breadcrumb {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-size:       .85rem;
  font-weight:     600;
  color:           var(--sp-accent);
  text-decoration: none;
  margin-bottom:   12px;
}

.lm-single__breadcrumb:hover {
  text-decoration: underline;
}

/* ─── Hero ───────────────────────────────────────────────────────────────────── */

.lm-single__hero {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 2px solid var(--sp-border);
}

.lm-single__priority-badge {
  display:      block;
  margin-bottom: 10px;
}

.lm-single__title {
  font-size:     2rem;
  font-weight:   700;
  line-height:   1.25;
  margin:        0 0 16px;
  color:         var(--sp-text);
}

.lm-single__lead {
  font-size:   1.1rem;
  color:       var(--sp-text-muted);
  line-height: 1.6;
  margin:      0 0 20px;
}



.lm-single__meta {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         10px;
}

/* ─── Sezioni ────────────────────────────────────────────────────────────────── */

.lm-single__section {
  margin-bottom: 40px;
}

.lm-single__section-title {
  font-size:     1.15rem;
  font-weight:   700;
  color:         var(--sp-text);
  margin:        0 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--sp-border);
}

/* ─── Istruzioni ─────────────────────────────────────────────────────────────── */

.lm-single__instructions {
  font-size:   1rem;
  line-height: 1.75;
  color:       var(--sp-text);
}

.lm-single__instructions p  { margin: 0 0 14px; }
.lm-single__instructions ol,
.lm-single__instructions ul { padding-left: 22px; margin: 0 0 14px; }
.lm-single__instructions li { margin-bottom: 8px; }
.lm-single__instructions strong { color: var(--sp-text); }

/* ─── Link esterno ───────────────────────────────────────────────────────────── */

.lm-single__external-link {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  padding:         12px 22px;
  background:      var(--sp-accent-light);
  border:          2px solid var(--sp-accent-mid);
  border-radius:   var(--sp-radius);
  color:           var(--sp-accent);
  font-weight:     700;
  font-size:       .95rem;
  text-decoration: none;
  transition:      background var(--sp-transition), border-color var(--sp-transition);
}

.lm-single__external-link:hover {
  background:   var(--sp-accent-mid);
  border-color: var(--sp-accent);
}

/* ─── Azioni correlate ───────────────────────────────────────────────────────── */

.lm-single__related-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   12px;
  margin-bottom:         16px;
}

.lm-single__related-card {
  display:         flex;
  flex-direction:  column;
  gap:             6px;
  padding:         14px 16px;
  background:      var(--sp-bg);
  border:          2px solid var(--sp-border);
  border-radius:   var(--sp-radius);
  text-decoration: none;
  color:           var(--sp-text);
  transition:      border-color var(--sp-transition), background var(--sp-transition);
}

.lm-single__related-card:hover {
  border-color: var(--sp-accent-mid);
  background:   var(--sp-accent-light);
}

.lm-single__related-card.lm-action--fondamentale {
  border-left: 4px solid var(--sp-violet);
}

.lm-single__related-title {
  font-size:   .95rem;
  font-weight: 600;
  line-height: 1.35;
}

.lm-single__related-desc {
  font-size:  .82rem;
  color:      var(--sp-text-muted);
  line-height: 1.4;
}

.lm-single__all-link {
  display:         inline-block;
  font-size:       .9rem;
  font-weight:     600;
  color:           var(--sp-accent);
  text-decoration: none;
}

.lm-single__all-link:hover {
  text-decoration: underline;
}

/* ─── CTA Quiz ───────────────────────────────────────────────────────────────── */

.lm-single__cta {
  margin-top: 48px;
}

.lm-single__cta-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             20px;
  padding:         24px 28px;
  background:      var(--sp-accent-light);
  border:          2px solid var(--sp-accent-mid);
  border-radius:   var(--sp-radius);
  flex-wrap:       wrap;
}

.lm-single__cta-text {
  font-size:  1rem;
  color:      var(--sp-text);
  margin:     0;
  flex:       1;
  min-width:  180px;
}

.lm-single__cta-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ─── Responsive pagina singola ──────────────────────────────────────────────── */

@media (max-width: 560px) {
  .lm-single__title {
    font-size: 1.5rem;
  }

  .lm-single__related-grid {
    grid-template-columns: 1fr;
  }

  .lm-single__cta-inner {
    flex-direction: column;
    text-align:     center;
  }
}

/* ─── Shortcode [lm_share_plan] ──────────────────────────────────────────────── */

.lm-share-plan {
  display:     flex;
  align-items: flex-start;
  flex-direction: column;
  gap:         8px;
}

.lm-share-plan__hint {
  font-size:  .88rem;
  margin:     0;
  padding:    8px 12px;
  border-radius: var(--sp-radius-sm);
}

.lm-share-plan__hint--ok {
  color:      var(--sp-accent-dark);
  background: var(--sp-accent-light);
  border:     1px solid var(--sp-accent-mid);
}

.lm-share-plan__hint--error {
  color:      #991b1b;
  background: #fee2e2;
  border:     1px solid #fca5a5;
  word-break: break-all;
}

/* ─── Shortcode [lm_reset_plan] ──────────────────────────────────────────────── */

.lm-reset-plan {
  display: inline-block;
}

/* ─── Banner piano condiviso ─────────────────────────────────────────────────── */

.lm-plan__shared-banner {
  display:       flex;
  align-items:   center;
  flex-wrap:     wrap;
  gap:           12px;
  padding:       14px 18px;
  margin-bottom: 20px;
  background:    var(--sp-accent-light);
  border:        2px solid var(--sp-accent-mid);
  border-left:   4px solid var(--sp-accent);
  border-radius: var(--sp-radius);
  font-size:     .9rem;
  color:         var(--sp-text-muted);
}

.lm-plan__shared-banner a {
  color:       var(--sp-accent);
  font-weight: 700;
  white-space: nowrap;
}

/* ─── Toolbar catalogo (filtri + ricerca) ────────────────────────────────────── */

/* lm-catalog__toolbar moved to bottom */

.lm-catalog__search-wrap {
  flex:      1;
  min-width: 200px;
}

.lm-catalog__search {
  width:       100%;
  padding:     9px 14px;
  border:      2px solid var(--sp-border);
  border-radius: var(--sp-radius);
  font-size:   .92rem;
  font-family: var(--sp-font);
  color:       var(--sp-text);
  background:  var(--sp-bg);
  outline:     none;
  transition:  border-color var(--sp-transition);
}

.lm-catalog__search:focus {
  border-color: var(--sp-accent);
}

.lm-catalog__search::placeholder {
  color: var(--sp-text-light);
}

.lm-catalog__no-results {
  text-align:  center;
  color:       var(--sp-text-muted);
  padding:     32px 0;
  font-size:   .95rem;
}

/* ─── Ancora sezione catalogo ────────────────────────────────────────────────── */

.lm-catalog__group-anchor {
  margin-left:     8px;
  font-size:       .82rem;
  opacity:         .35;
  text-decoration: none;
  transition:      opacity var(--sp-transition);
  flex-shrink:     0;
}

.lm-catalog__group-anchor:hover {
  opacity: 1;
}

/* ─── Checkbox nel catalogo ──────────────────────────────────────────────────── */

.lm-catalog__check-label {
  display:     inline-flex;
  align-items: center;
  cursor:      pointer;
  flex-shrink: 0;
}

/* ─── Summary checklist — header con stampa ─────────────────────────────────── */

.lm-plan__summary-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   10px;
}

.lm-plan__print-btn {
  background:    transparent;
  border:        1.5px solid var(--sp-border);
  border-radius: var(--sp-radius-sm);
  padding:       5px 12px;
  font-size:     .82rem;
  font-weight:   600;
  color:         var(--sp-text-muted);
  cursor:        pointer;
  transition:    border-color var(--sp-transition), color var(--sp-transition);
  white-space:   nowrap;
}

.lm-plan__print-btn:hover {
  border-color: var(--sp-accent);
  color:        var(--sp-accent);
}

/* ─── Messaggio contestuale progressi ────────────────────────────────────────── */

.lm-plan__progress-message {
  font-size:   .88rem;
  color:       var(--sp-accent-dark);
  margin:      8px 0 4px;
  font-weight: 500;
}

/* ─── Stima tempo rimanente ──────────────────────────────────────────────────── */

.lm-plan__time-left {
  display:   block;
  font-size: .82rem;
  color:     var(--sp-text-muted);
  margin-top: 4px;
}

/* ─── Stampa checklist ───────────────────────────────────────────────────────── */

@media print {
  /* Approccio visibility: nasconde tutto con visibility:hidden,
     la checklist e i suoi antenati rimangono visibili.
     Non richiede :has() e funziona in tutti i browser. */
  * { visibility: hidden !important; }

  /* La checklist e tutto il suo contenuto è visibile */
  .lm-plan,
  .lm-plan * { visibility: visible !important; }

  /* Azzera margini body/html e rimuovi overflow che taglia le pagine */
  body, html {
    margin:   0 !important;
    padding:  0 !important;
    height:   auto !important;
    overflow: visible !important;
  }

  /* La checklist occupa tutto il foglio, può espandersi su più pagine */
  .lm-plan {
    position:  static !important;
    width:     100% !important;
    max-width: 100% !important;
    height:    auto !important;
    overflow:  visible !important;
  }

  /* Nascondi UI non rilevante */
  header, footer, nav, aside,
  #wpadminbar,
  .lm-quiz__btn,
  .lm-plan__footer,
  .lm-plan__print-btn,
  .lm-plan__toolbar,
  .lm-plan__scroll-top,
  .lm-plan__fondamentale-reminder,
  .lm-plan__shared-banner,
  .lm-plan__new-actions-banner,
  .lm-action__toggle-btn,
  .lm-action__instructions,
  .lm-action__link,
  .lm-action__links,
  .lm-catalog__toolbar,
  .lm-catalog__share-btn,
  .lm-catalog__feedback-btn { display: none !important; }

  /* Reset colori per stampa */
  * { background: transparent !important; box-shadow: none !important; text-shadow: none !important; }

  /* Checklist a larghezza piena */
  .lm-plan {
    display:     block !important;
    max-width:   100% !important;
    padding:     0 !important;
    margin:      0 !important;
    font-size:   11pt;
    color:       #000;
  }

  /* Card azioni compatte */
  .lm-action {
    border:        1px solid #ccc !important;
    margin-bottom: 5px !important;
    padding:       5px 8px !important;
    break-inside:  avoid;
    page-break-inside: avoid;
    background:    #fff !important;
  }

  /* Azioni completate barrate */
  .lm-action--done .lm-action__title {
    text-decoration: line-through;
    color:           #888;
  }

  /* Elenchi leggibili in stampa */
  .lm-action__instructions-body ol > li::before,
.lm-single__instructions ol > li::before { color: #000; }
  .lm-action__instructions-body ul > li::before,
.lm-single__instructions ul > li::before { color: #000; }

  /* Checkbox stampabile */
  .lm-action__checkmark {
    border: 1.5px solid #333 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .lm-action--done .lm-action__checkmark::after {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Barra progresso */
  .lm-plan__summary { border: 1px solid #ccc; }
  .lm-plan__progress-fill {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* ─── Opzione redirect (post-sequestro) ──────────────────────────────────────── */

.lm-quiz__option--redirect {
  border-color:  #fee2e2;
  background:    #fff8f8;
}

.lm-quiz__option--redirect:hover {
  border-color:  #fca5a5;
  background:    #fee2e2;
}

.lm-quiz__option--redirect .lm-quiz__option-label {
  color: #991b1b;
}

.lm-quiz__option--redirect .lm-quiz__option-desc {
  color: #b91c1c;
}

/* ── Shortcode button wrapper (align) ───────────────────────────────────── */

.lm-btn-wrap {
  display: block;
  margin:  12px 0;
}

.lm-btn-wrap--left   { text-align: left; }
.lm-btn-wrap--center { text-align: center; }
.lm-btn-wrap--right  { text-align: right; }

/* Pagina singola: link multipli in colonna */
.sp-single__links {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

/* ─── Quiz: barra di progresso sticky ───────────────────────────────────────── */

.lm-quiz__progress-wrap {
  position:   sticky;
  top:        0;
  z-index:    100;
  background: transparent;
  padding:    12px 0 8px;
  margin:     0 -4px;
}

/* ─── Checklist: toolbar espandi/comprimi ────────────────────────────────────── */

.lm-plan__toolbar {
  display:     flex;
  justify-content: flex-end;
  margin:      0 0 16px;
}

.lm-plan__expand-all {
  font-size: .82rem;
  padding:   6px 14px;
}

/* ─── Catalogo: progress per ambito ─────────────────────────────────────────── */

.lm-catalog__group-progress {
  margin:  -4px 0 18px;
}

.lm-catalog__group-progress-bar {
  height:        5px;
  background:    var(--sp-border);
  border-radius: 99px;
  overflow:      hidden;
  margin-bottom: 6px;
}

.lm-catalog__group-progress-fill {
  height:     100%;
  background: var(--sp-gradient);
  border-radius: 99px;
  transition: width .4s ease;
}

.lm-catalog__group-progress-meta {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       .78rem;
}

.lm-catalog__group-progress-msg {
  color:       var(--sp-accent);
  font-weight: 600;
}

.lm-catalog__group-progress-nums {
  color: var(--sp-text-muted);
}

/* ─── Catalogo: riga filtri dispositivo ─────────────────────────────────────── */

.lm-catalog__filters--device {
  margin-top: 2px;
}

/* ─── Checklist: animazione spostamento completate ───────────────────────────── */

.lm-action--done {
  opacity: .55;
}

.lm-action--done .lm-action__title {
  text-decoration: line-through;
  color:           var(--sp-text-muted);
}


/* ─── Reminder fondamentali de-spuntate ─────────────────────────────────────── */

.lm-plan__fondamentale-reminder {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       12px 16px;
  margin:        0 0 16px;
  background:    var(--sp-bg-subtle);
  border:        1.5px solid var(--sp-violet-mid);
  border-radius: var(--sp-radius);
  animation:     lm-reminder-in .3s ease;
}

.lm-plan__fondamentale-reminder--out {
  animation: lm-reminder-out .3s ease forwards;
}

@keyframes lm-reminder-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes lm-reminder-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

.lm-plan__fondamentale-reminder-icon {
  font-size:  1.2rem;
  flex-shrink: 0;
}

.lm-plan__fondamentale-reminder-text {
  flex:      1;
  font-size: .88rem;
  color:     var(--sp-text);
}

.lm-plan__fondamentale-reminder-close {
  background:  transparent;
  border:      none;
  cursor:      pointer;
  color:       var(--sp-text-muted);
  font-size:   1rem;
  padding:     2px 6px;
  flex-shrink: 0;
  line-height: 1;
}

.lm-plan__fondamentale-reminder-close:hover {
  color: var(--sp-text);
}

/* ─── Meta badge uniformati ─────────────────────────────────────────────────── */

.lm-action__meta-label {
  font-size:   .72rem;
  font-weight: 700;
  color:       var(--sp-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.lm-action__badge {
  font-size:   .72rem;
  font-weight: 700;
  white-space: nowrap;
}

.lm-action__badge--role {
  font-size:      .72rem;
  font-weight:    600;
  text-transform: none;
  letter-spacing: 0;
  background:     #f1f5f9;
  color:          #475569;
  white-space:    normal;
}

/* ─── Filtri pill — dimensioni ridotte ───────────────────────────────────────── */

.lm-catalog__filter-pill {
  padding:   5px 11px !important;
  font-size: .78rem !important;
}

.lm-catalog__filter-count {
  font-size:  .7rem !important;
  min-width:  16px !important;
  height:     16px !important;
}

.lm-catalog__filters--role {
  margin-top: 2px;
}

/* ─── Allineamento link e share button ───────────────────────────────────────── */

.lm-action__links,
.lm-catalog__share-btn,
.lm-action__toggle-btn {
  margin-left: 36px;
}

.lm-catalog__action .lm-action__links,
.lm-catalog__action .lm-catalog__share-btn,
.lm-catalog__action .lm-action__toggle-btn {
  margin-left: 0;
}

/* ─── Titolo dinamico checklist ──────────────────────────────────────────────── */

.lm-plan__title {
  font-size:   1.35rem;
  font-weight: 700;
  color:       var(--sp-text);
  margin:      0 0 20px;
  line-height: 1.3;
}


/* ─── [sp_progress] — widget riepilogo progressi per ambito ─────────────────── */

.lm-progress-widget {
  font-family: var(--sp-font);
}

.lm-pw {
  display:       flex;
  flex-direction: column;
  gap:           14px;
}

.lm-pw--loading {
  justify-content: center;
  align-items:     center;
  min-height:      80px;
}

.lm-pw__row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.lm-pw__label {
  display:     flex;
  align-items: center;
  gap:         8px;
}

.lm-pw__icon {
  font-size:   1rem;
  flex-shrink: 0;
}

.lm-pw__name {
  flex:        1;
  font-size:   .9rem;
  font-weight: 600;
  color:       var(--sp-text);
}

.lm-pw__nums {
  font-size:  .78rem;
  color:      var(--sp-text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.lm-pw__bar-wrap {
  height:        8px;
  background:    var(--sp-border);
  border-radius: 99px;
  overflow:      hidden;
}

.lm-pw__bar-fill {
  height:        100%;
  background:    var(--sp-gradient);
  border-radius: 99px;
  transition:    width .5s ease;
  min-width:     0;
}

/* ─── Catalogo: collapse card ────────────────────────────────────────────────── */

/* Header row con checkbox + expand button + done badge */
.lm-catalog__header-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  width:       100%;
}

/* Bottone espandi — occupa tutto lo spazio disponibile, non ha sfondo */
.lm-catalog__expand-btn {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  flex:        1;
  background:  none;
  border:      none;
  padding:     0;
  cursor:      pointer;
  text-align:  left;
  gap:         8px;
  min-width:   0;
}

.lm-catalog__expand-btn .lm-action__title {
  flex:         1;
  font-size:    1rem;
  font-weight:  600;
  color:        var(--sp-text);
  line-height:  1.4;
  text-align:   left;
}

.lm-catalog__expand-btn:hover .lm-action__title {
  color: var(--sp-accent);
}

/* Chevron ▸ / ▾ */
.lm-catalog__chevron {
  font-size:  .75rem;
  color:      var(--sp-text-muted);
  flex-shrink: 0;
  transition: transform var(--sp-transition);
}

/* Corpo nascosto — diventa visibile al click */
.lm-catalog__body {
  margin-top: 8px;
}

.lm-catalog__body[hidden] {
  display: none;
}

/* Meta (tempo/difficoltà/ruolo) sempre visibili sotto l'header */
.lm-catalog__meta {
  padding-left: 36px;
  margin-top:   4px;
}

/* Corpo: allineamento come checklist */
.lm-catalog__body .lm-action__desc,
.lm-catalog__body .lm-action__toggle-btn,
.lm-catalog__body .lm-action__instructions,
.lm-catalog__body .lm-action__links,
.lm-catalog__body .lm-catalog__share-btn {
  margin-left: 36px;
}

/* ─── Filtri pill — ulteriore riduzione ──────────────────────────────────────── */

.lm-catalog__filter-pill {
  padding:       4px 9px !important;
  font-size:     .73rem !important;
  line-height:   1.3 !important;
}

.lm-catalog__filter-count {
  font-size:  .65rem !important;
  min-width:  14px  !important;
  height:     14px  !important;
  line-height: 14px !important;
}


/* ─── Card catalogo — cursore pointer su tutta la card ───────────────────────── */

.lm-catalog__action {
  cursor: pointer;
}

.lm-catalog__action .lm-catalog__check-label,
.lm-catalog__action .lm-action__toggle-btn,
.lm-catalog__action .lm-action__link,
.lm-catalog__action .lm-catalog__share-btn,
.lm-catalog__action .lm-catalog__group-anchor {
  cursor: pointer;
}

/* Hover sulla card quando chiusa */
.lm-catalog__action:hover .lm-action__title {
  color: var(--sp-accent);
}


/* ─── Toolbar catalogo ───────────────────────────────────────────────────────── */

.lm-catalog__toolbar {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  margin-bottom:  24px;
}

.lm-catalog__toolbar-row {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-wrap:   wrap;
}

/* ─── Filtri avanzati (pannello collassabile) ────────────────────────────────── */

.lm-catalog__adv-toggle {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       6px 14px;
  font-size:     .8rem;
  font-weight:   600;
  color:         var(--sp-accent);
  background:    var(--sp-accent-light);
  border:        1.5px solid var(--sp-accent-mid);
  border-radius: 99px;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background var(--sp-transition), color var(--sp-transition);
  flex-shrink:   0;
  align-self:    center;
}

.lm-catalog__adv-toggle:hover {
  background: var(--sp-accent-mid);
}

.lm-catalog__adv-toggle[aria-expanded="true"] {
  background:   var(--sp-accent);
  color:        #fff;
  border-color: var(--sp-accent);
}

.lm-catalog__adv-chevron {
  font-size: .7rem;
}

.lm-catalog__adv-panel {
  padding:       12px 0 4px;
  display:       flex;
  flex-direction: column;
  gap:           8px;
  width:         100%;
}

.lm-catalog__adv-panel[hidden] {
  display: none;
}

.lm-catalog__adv-row {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  flex-wrap:   wrap;
}

.lm-catalog__adv-label {
  font-size:      .72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--sp-text-muted);
  white-space:    nowrap;
  min-width:      90px;
  padding-top:    5px;
}

/* ─── Catalogo: sezioni per app ──────────────────────────────────────────────── */

.lm-catalog__apps-divider {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin:      40px 0 24px;
}

.lm-catalog__apps-divider::before,
.lm-catalog__apps-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--sp-border);
}

.lm-catalog__apps-divider span {
  font-size:      .8rem;
  font-weight:    600;
  color:          var(--sp-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space:    nowrap;
}

/* ─── Progress widget: nome ambito/app cliccabile ───────────────────────────── */

.lm-pw__name--link {
  cursor:          pointer;
  text-decoration: none;
  transition:      color var(--sp-transition);
}

.lm-pw__name--link:hover {
  color:           var(--sp-accent);
  text-decoration: underline;
}

/* ─── Progress widget: divisore ambiti/app ───────────────────────────────────── */

.lm-pw__divider {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin:      16px 0 10px;
}

.lm-pw__divider::before,
.lm-pw__divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--sp-border);
}

.lm-pw__divider span {
  font-size:      .7rem;
  font-weight:    600;
  color:          var(--sp-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space:    nowrap;
}

/* ─── Pulsante torna su ──────────────────────────────────────────────────────── */

.lm-plan__scroll-top {
  position:    fixed;
  bottom:      28px;
  right:       28px;
  z-index:     999;
  width:       44px;
  height:      44px;
  border-radius: 50%;
  background:  var(--sp-gradient);
  color:       #fff;
  border:      none;
  cursor:      pointer;
  font-size:   1.2rem;
  font-weight: 700;
  display:     flex;
  align-items: center;
  justify-content: center;
  box-shadow:  0 2px 10px rgba(0,0,0,.15);
  transition:  opacity var(--sp-transition), transform var(--sp-transition);
  opacity:     .85;
}

.lm-plan__scroll-top:hover {
  opacity:   1;
  transform: translateY(-2px);
}

@media (max-width: 480px) {
  .lm-plan__scroll-top {
    bottom: 16px;
    right:  16px;
    width:  38px;
    height: 38px;
  }
}

/* ─── Badge "Nuova" nel catalogo ─────────────────────────────────────────────── */

.lm-action__new-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            3px;
  font-size:      .65rem;
  font-weight:    700;
  padding:        1px 7px;
  border-radius:  99px;
  background:     var(--sp-accent-light);
  color:          var(--sp-accent);
  border:         1px solid var(--sp-accent-mid);
  vertical-align: middle;
  margin-left:    8px;
  white-space:    nowrap;
  flex-shrink:    0;
}

/* ─── Data ultimo aggiornamento nella card ───────────────────────────────────── */

.lm-action__updated {
  font-size:    .72rem;
  color:        var(--sp-text-muted);
  margin:       10px 0 0;
  padding-left: 36px; /* allineato al testo del corpo, non alla checkbox */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MODALITÀ FORMATORE
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Pulsante di avvio ────────────────────────────────────────────────────── */
.lm-tr__launch-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  margin-top:    24px;
  padding:       9px 20px;
  font-size:     .85rem;
  font-weight:   600;
  color:         var(--sp-accent);
  background:    var(--sp-accent-light);
  border:        1.5px solid var(--sp-accent-mid);
  border-radius: 99px;
  cursor:        pointer;
  transition:    background .15s, color .15s;
}
.lm-tr__launch-btn:hover {
  background: var(--sp-accent);
  color:      #fff;
  border-color: var(--sp-accent);
}

/* ── Overlay presentazione ────────────────────────────────────────────────── */
.lm-tr {
  position:        fixed !important;
  top:             0 !important;
  left:            0 !important;
  right:           0 !important;
  bottom:          0 !important;
  width:           100% !important;
  height:          100% !important;
  z-index:         9999999 !important;
  background:      var(--lm-tr-bg, #0d0d18);
  color:           var(--lm-tr-color, #f0f0f0);
  display:         flex !important;
  flex-direction:  column !important;
  font-family:     inherit !important;
  transform:       none !important;
  margin:          0 !important;
  padding:         0 !important;
  box-sizing:      border-box !important;
  overflow:        hidden !important;
  transition:      background .3s, color .3s;
}

/* Versione inline (pagina [sp_training]) — occupa tutta la viewport */
.lm-tr.lm-tr--inline {
  position:   fixed !important;
  top:        0 !important;
  left:       0 !important;
  right:      0 !important;
  bottom:     0 !important;
  width:      100vw !important;
  height:     100vh !important;
  z-index:    9999999 !important;
}

/* Tema chiaro — usa !important per battere eventuali specificity issues */
.lm-tr.lm-tr--light {
  background: #f5f5fa !important;
  color:      #1a1a1a !important;
  --lm-tr-bg:    #f5f5fa;
  --lm-tr-color: #1a1a1a;
  --lm-tr-qr-bg: #f5f5fa;
  --lm-tr-qr-fg: #111111;
}
.lm-tr:not(.lm-tr--light) {
  --lm-tr-bg:    #0d0d18;
  --lm-tr-color: #f0f0f0;
  --lm-tr-qr-bg: #0d0d18;
  --lm-tr-qr-fg: #e8eaff;
}

/* ── Banner iniziale ──────────────────────────────────────────────────────── */
.lm-tr__banner {
  position:         absolute;
  top:              0; left: 0; right: 0;
  z-index:          10;
  background:       var(--sp-gradient);
  color:            #fff;
  text-align:       center;
  padding:          10px 16px;
  font-size:        .88rem;
  font-weight:      600;
  pointer-events:   none;
  /* La transizione avviene via JS inline style */
}

/* ── Barra di navigazione ─────────────────────────────────────────────────── */
.lm-tr__nav {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       10px 16px;
  background:    rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.10);
  flex-shrink:   0;
  flex-wrap:     wrap;
}
.lm-tr--light .lm-tr__nav {
  background:    rgba(0,0,0,.04);
  border-color:  var(--sp-border);
}

.lm-tr__btn {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  padding:       6px 14px;
  font-size:     .85rem;
  font-weight:   600;
  background:    rgba(255,255,255,.12);
  color:         rgba(255,255,255,.9);
  border:        1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  cursor:        pointer;
  transition:    background .15s, color .15s, border-color .15s;
  white-space:   nowrap;
}
.lm-tr__btn:hover:not(:disabled) {
  background: rgba(255,255,255,.24);
  color:      #fff;
}
.lm-tr__btn:disabled { opacity: .35; cursor: default; }

/* Pulsante attivo (es. QR abilitato) — usa colore accent del branding */
.lm-tr__btn--active {
  background:   var(--sp-accent) !important;
  color:        #fff !important;
  border-color: var(--sp-accent) !important;
}
.lm-tr__btn--active:hover { background: var(--sp-accent-dark) !important; }

/* Tema chiaro — pulsanti */
.lm-tr--light .lm-tr__btn {
  background:   var(--sp-accent-light);
  color:        var(--sp-accent);
  border-color: var(--sp-accent-mid);
}
.lm-tr--light .lm-tr__btn:hover:not(:disabled) {
  background:   var(--sp-accent);
  color:        #fff;
  border-color: var(--sp-accent);
}

.lm-tr__btn--close {
  background:   rgba(180,30,30,.3);
  border-color: rgba(180,30,30,.4);
  margin-left:  auto;
}
.lm-tr__btn--close:hover { background: rgba(180,30,30,.6); }
.lm-tr--light .lm-tr__btn--close {
  background:   #fee2e2;
  color:        #991b1b;
  border-color: #fca5a5;
}
.lm-tr--light .lm-tr__btn--close:hover {
  background:   #fca5a5;
}

.lm-tr__btn--qr-active {
  background:   var(--sp-accent) !important;
  color:        #fff !important;
  border-color: var(--sp-accent-dark) !important;
}

.lm-tr__counter {
  font-size:   .82rem;
  color:       rgba(255,255,255,.55);
  min-width:   50px;
  text-align:  center;
}
.lm-tr--light .lm-tr__counter { color: var(--sp-text-muted); }

.lm-tr__nav-right {
  margin-left: auto;
  display:     flex;
  align-items: center;
  gap:         6px;
}

.lm-tr__site-name {
  font-size:     .72rem;
  color:         rgba(255,255,255,.4);
  font-family:   monospace;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  max-width:     none;   /* nessun troncamento — la navbar ha spazio a sufficienza */
  padding:       0 8px;
}
.lm-tr--light .lm-tr__site-name { color: rgba(0,0,0,.35); }

.lm-tr__site-url {
  font-size:   .75rem;
  font-family: monospace;
  color:       rgba(255,255,255,.40);
  padding:     4px 8px;
  border:      1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  max-width:   180px;
}
.lm-tr--light .lm-tr__site-url {
  color:       var(--sp-text-muted);
  border-color: var(--sp-border);
  background:  var(--sp-accent-light);
}

/* ── Barra progresso ──────────────────────────────────────────────────────── */
.lm-tr__progress-bar {
  height:     3px;
  background: rgba(255,255,255,.10);
  flex-shrink: 0;
}
.lm-tr--light .lm-tr__progress-bar { background: var(--sp-border); }
.lm-tr__progress-fill {
  height:     100%;
  background: var(--sp-gradient);
  transition: width .25s;
}

/* ── Slide container ──────────────────────────────────────────────────────── */
.lm-tr__slides {
  flex:            1;
  overflow:        hidden;
  display:         flex;
  flex-direction:  column;
}
.lm-tr__slide         { display: none; flex: 1; min-height: 0; }
.lm-tr__slide--active { display: flex; flex: 1; flex-direction: column; min-height: 0; }

/* Layout a due colonne */
.lm-tr__slide-layout {
  display:    flex;
  flex:       1;
  min-height: 0;
  overflow:   hidden;
}

/* Colonna sinistra: testo */
.lm-tr__slide-text {
  flex:       1;
  overflow-y: auto;
  padding:    40px 32px 40px 5vw;
  min-width:  0;
}

/* Colonna destra: QR sticky — sempre visibile */
.lm-tr__slide-qr {
  width:        240px;
  flex-shrink:  0;
  overflow-y:   auto;
  padding:      24px 16px;
  border-left:  1px solid rgba(255,255,255,.08);
}
.lm-tr--light .lm-tr__slide-qr {
  border-left-color: rgba(0,0,0,.09);
  background:        rgba(0,0,0,.02);
}

/* Nascondi colonna QR quando toggle off */
.lm-tr--no-qr-col .lm-tr__slide-qr { display: none; }

/* Pannello QR: lista verticale */
.lm-tr__qr-panel {
  display:        flex;
  flex-direction: column;
  gap:            20px;
}

/* Singolo QR */
.lm-tr__qr-item {
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  gap:             5px;
  text-decoration: none;
  cursor:          pointer;
  border-radius:   6px;
  padding:         4px;
  transition:      background .15s;
}
.lm-tr__qr-item:hover { background: rgba(128,128,128,.1); }

/* Canvas QR: quadrato esatto, no bordo, trasparente */
.lm-tr__qr-canvas {
  width:      180px;
  height:     180px;
  line-height: 0;
  font-size:   0;
  background:  transparent;
}
/* qrcodejs genera sia <canvas> (nitido) che <img> (PNG compresso, sfocato)
   Mostriamo solo il canvas, nascondiamo l'img */
.lm-tr__qr-canvas canvas {
  display:    block !important;
  width:      180px !important;
  height:     180px !important;
  border:     none !important;
  padding:    0 !important;
  margin:     0 !important;
  box-shadow: none !important;
  max-width:  none !important;
}
.lm-tr__qr-canvas img {
  display: none !important;
}

.lm-tr__qr-label {
  font-size:   .78rem;
  font-weight: 700;
  margin:      0;
  color:       rgba(255,255,255,.9);
}
.lm-tr--light .lm-tr__qr-label { color: var(--sp-text); }

.lm-tr__qr-url {
  font-size:       .68rem;
  font-family:     monospace;
  color:           rgba(255,255,255,.42);
  text-decoration: none;
  word-break:      break-all;
}
.lm-tr--light .lm-tr__qr-url   { color: var(--sp-text-muted); }
.lm-tr__qr-url:hover            { text-decoration: underline; opacity: .8; }
.lm-tr__qr-empty { font-size: .8rem; opacity: .45; font-style: italic; }

/* Mobile: toolbar in basso, QR sotto il testo, swipe ─────────────────────── */
@media (max-width: 700px) {
  /* Layout: slide text sopra, QR sotto, navbar in fondo */
  .lm-tr__slides {
    flex:    1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .lm-tr__slide-layout {
    flex-direction: column;
    overflow-y:     auto;
  }

  /* Colonna QR: appare sotto il testo su mobile */
  /* Su mobile la colonna QR compare SOTTO il testo (non a lato)
     ma solo se non è stata nascosta dal toggle */
  .lm-tr:not(.lm-tr--no-qr-col) .lm-tr__slide-qr {
    display:     block !important;
    width:       100% !important;
    border-left: none !important;
    border-top:  1px solid rgba(255,255,255,.08) !important;
    padding:     16px !important;
    max-height:  none !important;
  }
  .lm-tr--light:not(.lm-tr--no-qr-col) .lm-tr__slide-qr {
    border-top-color: rgba(0,0,0,.08) !important;
  }
  /* Quando il toggle è disattivato, nascondi anche su mobile */
  .lm-tr--no-qr-col .lm-tr__slide-qr {
    display: none !important;
  }

  /* QR in riga orizzontale su mobile */
  .lm-tr__qr-panel {
    flex-direction: row !important;
    flex-wrap:      wrap;
    gap:            16px;
  }

  .lm-tr__qr-canvas canvas {
    width:  140px !important;
    height: 140px !important;
  }

  /* Testo slide */
  .lm-tr__slide-text { padding: 20px 16px; }

  /* Navbar in basso su mobile */
  .lm-tr {
    flex-direction: column !important;
  }
  .lm-tr__banner      { order: 0; }
  .lm-tr__slides      { order: 1; flex: 1; }
  .lm-tr__progress-bar{ order: 2; }
  .lm-tr__nav {
    order:        3;
    border-top:   1px solid rgba(255,255,255,.07) !important;
    border-bottom: none !important;
  }
  .lm-tr--light .lm-tr__nav {
    border-top-color: rgba(0,0,0,.08) !important;
  }

  /* Pulsanti più grandi su mobile per touch */
  .lm-tr__btn {
    padding:   10px 12px !important;
    font-size: 1.1rem !important;
    min-width: 44px;
    min-height: 44px;
  }

  /* Nascondi testi non essenziali su mobile */
  .lm-tr__site-name,
  .lm-tr__domain { display: none; }
}

/* ── Badge "Nuova" su mobile: appare sopra al titolo ─────────────────────── */
@media (max-width: 600px) {
  .lm-catalog__expand-btn {
    flex-wrap: wrap;
  }
  .lm-catalog__expand-btn .lm-action__new-badge {
    order:      -1;     /* appare PRIMA del titolo */
    width:      auto;
    margin-left: 0;
    margin-bottom: 4px;
    flex-basis: 100%;   /* occupa tutta la riga */
  }
  .lm-catalog__expand-btn .lm-action__title {
    flex-basis: calc(100% - 24px); /* lascia spazio allo chevron */
  }
}

/* ── Badge fondamentale ───────────────────────────────────────────────────── */
.lm-tr__fond-badge {
  display:       inline-block;
  background:    var(--sp-gradient);
  color:         #fff;
  font-size:     .75rem;
  font-weight:   700;
  padding:       3px 12px;
  border-radius: 99px;
  margin-bottom: 14px;
  letter-spacing: .04em;
}

/* ── Titolo e testo ───────────────────────────────────────────────────────── */
.lm-tr__title {
  font-size:   clamp(1.4rem, 3.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
  margin:      0 0 16px;
  color:       #fff;
}
.lm-tr--light .lm-tr__title { color: var(--sp-text); }

.lm-tr__desc {
  font-size:   1rem;
  color:       rgba(255,255,255,.72);
  margin:      0 0 18px;
  line-height: 1.65;
}
.lm-tr--light .lm-tr__desc { color: var(--sp-text-muted); }

.lm-tr__instructions {
  font-size:   .95rem;
  color:       rgba(255,255,255,.85);
  line-height: 1.7;
  margin-bottom: 20px;
}
.lm-tr--light .lm-tr__instructions { color: var(--sp-text); }
.lm-tr__instructions ol,
.lm-tr__instructions ul { padding-left: 1.5em; }
.lm-tr__instructions li { margin-bottom: 5px; }

/* ── Link testuali (colonna sinistra) ────────────────────────────────────── */
.lm-tr__links--text {
  display:    flex;
  flex-wrap:  wrap;
  gap:        8px;
  margin-top: 16px;
}
.lm-tr__link {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  padding:       7px 14px;
  background:    color-mix(in srgb, var(--sp-accent) 22%, transparent);
  color:         var(--sp-accent-mid);
  border:        1px solid color-mix(in srgb, var(--sp-accent) 35%, transparent);
  border-radius: 6px;
  font-size:     .85rem;
  font-weight:   600;
  text-decoration: none;
  transition:    background .15s, color .15s;
}
/* Fallback per browser senza color-mix */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .lm-tr__link { background: rgba(78,89,223,.22); color: #c8d0ff; border-color: rgba(78,89,223,.35); }
}
.lm-tr__link:hover               { background: var(--sp-accent); color: #fff; border-color: var(--sp-accent); }
.lm-tr--light .lm-tr__link       { background: var(--sp-accent-light); color: var(--sp-accent); border-color: var(--sp-accent-mid); }
.lm-tr--light .lm-tr__link:hover { background: var(--sp-accent); color: #fff; }

/* ── Costruttore URL ──────────────────────────────────────────────────────── */
.lm-tr__urlbuilder {
  margin-top:    32px;
  border:        1.5px solid var(--sp-border);
  border-radius: 8px;
  overflow:      hidden;
  background:    var(--sp-bg);
}

.lm-tr__urlbuilder-details { margin: 0; }

.lm-tr__urlbuilder-summary {
  display:       flex;
  align-items:   center;
  padding:       12px 16px;
  font-weight:   600;
  font-size:     .88rem;
  cursor:        pointer;
  background:    var(--sp-accent-light);
  color:         var(--sp-accent);
  list-style:    none;
  user-select:   none;
  border:        none;
  transition:    background .15s;
}
.lm-tr__urlbuilder-summary::-webkit-details-marker { display: none; }
.lm-tr__urlbuilder-summary:hover { background: var(--sp-accent-mid); }

.lm-tr__urlbuilder-body {
  padding: 16px;
}

.lm-tr__urlbuilder-desc {
  font-size:    .83rem;
  color:        var(--sp-text-muted);
  margin:       0 0 14px;
  line-height:  1.5;
}

/* Lista ordinabile */
.lm-tr__sortable {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  margin-bottom:  14px;
  max-height:     320px;
  overflow-y:     auto;
  border:         1px solid var(--sp-border);
  border-radius:  6px;
  padding:        6px;
  background:     var(--sp-bg);
}

.lm-tr__sortable-row {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       7px 10px;
  background:    var(--sp-bg);
  border:        1px solid var(--sp-border);
  border-radius: 5px;
  transition:    opacity .15s, border-color .15s, background .15s;
}
.lm-tr__sortable-row:hover         { border-color: var(--sp-accent-mid); background: var(--sp-accent-light); }
.lm-tr__sortable-row--off          { opacity: .45; }
.lm-tr__sortable-row--dragging     { opacity: .5; background: var(--sp-accent-light); border-style: dashed; }
.lm-tr__sortable-row--over         { border-color: var(--sp-accent); background: var(--sp-accent-light); }

.lm-tr__sortable-handle {
  cursor:      grab;
  color:       var(--sp-text-muted);
  font-size:   1.1rem;
  flex-shrink: 0;
  line-height: 1;
}
.lm-tr__sortable-handle:active { cursor: grabbing; }

.lm-tr__sortable-check { flex-shrink: 0; accent-color: var(--sp-accent); width: 15px; height: 15px; }

.lm-tr__sortable-title {
  flex:      1;
  font-size: .84rem;
  color:     var(--sp-text);
  white-space: nowrap;
  overflow:  hidden;
  text-overflow: ellipsis;
}

.lm-tr__sortable-slug {
  font-size:   .72rem;
  color:       var(--sp-text-muted);
  background:  var(--sp-accent-light);
  border:      1px solid var(--sp-accent-mid);
  padding:     1px 6px;
  border-radius: 4px;
  font-family: monospace;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Azioni e output */
.lm-tr__urlbuilder-actions {
  display: flex;
  gap:     8px;
  margin-bottom: 12px;
}

.lm-tr__urlbuilder-actions .button,
.lm-tr__urlbuilder-output  .button {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       6px 14px;
  font-size:     .82rem;
  font-weight:   600;
  border-radius: 6px;
  cursor:        pointer;
  border:        1.5px solid var(--sp-accent-mid);
  background:    var(--sp-accent-light);
  color:         var(--sp-accent);
  transition:    background .15s, color .15s;
}
.lm-tr__urlbuilder-actions .button:hover,
.lm-tr__urlbuilder-output  .button:hover {
  background: var(--sp-accent);
  color:      #fff;
  border-color: var(--sp-accent);
}
.lm-tr__urlbuilder-output .button-primary {
  background:   var(--sp-accent);
  color:        #fff;
  border-color: var(--sp-accent-dark);
}
.lm-tr__urlbuilder-output .button-primary:hover {
  background: var(--sp-accent-dark);
}

.lm-tr__urlbuilder-output {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
}

.lm-tr__urlbuilder-label {
  font-size:   .78rem;
  font-weight: 600;
  color:       var(--sp-text-muted);
  white-space: nowrap;
}

.lm-tr__urlbuilder-input {
  flex:        1;
  min-width:   180px;
  font-family: monospace;
  font-size:   .78rem;
  padding:     6px 10px;
  border:      1.5px solid var(--sp-border);
  border-radius: 5px;
  background:  var(--sp-accent-light);
  color:       var(--sp-text);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BANNER NUOVE AZIONI
   ═══════════════════════════════════════════════════════════════════════════════ */

.lm-plan__new-actions-banner {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       12px 16px;
  margin-bottom: 20px;
  background:    var(--sp-accent-light);
  border:        1.5px solid var(--sp-accent-mid);
  border-radius: 8px;
  font-size:     .88rem;
}
.lm-plan__new-actions-icon  { font-size: 1.2rem; flex-shrink: 0; }
.lm-plan__new-actions-text  { flex: 1; line-height: 1.5; }
.lm-plan__new-actions-text a {
  color:       var(--sp-accent);
  font-weight: 600;
  text-decoration: none;
}
.lm-plan__new-actions-text a:hover { text-decoration: underline; }
.lm-plan__new-actions-close {
  background:  none;
  border:      none;
  cursor:      pointer;
  color:       var(--sp-text-muted);
  font-size:   1rem;
  flex-shrink: 0;
  padding:     2px 6px;
  border-radius: 4px;
  transition:  background .15s;
}
.lm-plan__new-actions-close:hover {
  background: var(--sp-border);
  color:      var(--sp-text);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FEEDBACK PER AZIONE
   ═══════════════════════════════════════════════════════════════════════════════ */

.lm-catalog__feedback-btn {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  margin-top:  10px;
  padding:     4px 12px;
  font-size:   .75rem;
  color:       var(--sp-text-muted);
  background:  none;
  border:      1px solid var(--sp-border);
  border-radius: 99px;
  cursor:      pointer;
  transition:  color .15s, border-color .15s, background .15s;
}
.lm-catalog__feedback-btn:hover {
  color:         #991b1b;
  border-color:  #fca5a5;
  background:    #fff8f8;
}

.lm-feedback-modal {
  position:        fixed;
  inset:           0;
  z-index:         99998;
  background:      rgba(0,0,0,.55);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         16px;
}
.lm-feedback-modal__box {
  background:    var(--sp-bg);
  border-radius: 10px;
  padding:       28px;
  max-width:     480px;
  width:         100%;
  box-shadow:    0 8px 32px rgba(0,0,0,.2);
}
.lm-feedback-modal__title    { margin: 0 0 6px; font-size: 1.1rem; font-weight: 700; }
.lm-feedback-modal__subtitle { margin: 0 0 8px; font-size: .88rem; color: var(--sp-text-muted); }
.lm-feedback-modal__note {
  margin:        0 0 14px;
  font-size:     .8rem;
  color:         var(--sp-text-muted);
  background:    var(--sp-accent-light);
  border:        1px solid var(--sp-accent-mid);
  padding:       7px 12px;
  border-radius: 6px;
  line-height:   1.5;
}
.lm-feedback-modal__text {
  width:         100%;
  box-sizing:    border-box;
  padding:       8px 12px;
  border:        1.5px solid var(--sp-border);
  border-radius: 6px;
  font-size:     .9rem;
  font-family:   inherit;
  resize:        vertical;
  margin-bottom: 14px;
  color:         var(--sp-text);
  background:    var(--sp-bg);
  transition:    border-color .15s;
}
.lm-feedback-modal__text--error { border-color: #f87171; }
.lm-feedback-modal__text:focus  { outline: none; border-color: var(--sp-accent); }
.lm-feedback-modal__actions { display: flex; gap: 10px; }
.lm-feedback-modal__result  { margin: 10px 0 0; font-size: .85rem; line-height: 1.5; }

/* ─── Pagina [sp_training] dedicata ─────────────────────────────────────────── */

.lm-training-page {
  min-height: 200px;
  width:      100%;
}

/* ─── Changelog / data aggiornamento nella card ──────────────────────────────── */

.lm-action__updated {
  font-size:    .72rem;
  color:        var(--sp-text-muted);
  margin:       10px 0 0;
  padding-left: 36px;
  line-height:  1.4;
}

.lm-action__updated-date {
  opacity: .7;
  font-size: .68rem;
}

.lm-action__updated--nochangelog {
  font-style: italic;
}

/* ─── Changelog nella pagina singola ─────────────────────────────────────────── */

.lm-single__changelog {
  font-size:   .78rem;
  color:       var(--sp-text-muted);
  margin-top:  16px;
  line-height: 1.5;
  border-top:  1px solid var(--sp-border);
  padding-top: 10px;
}

.lm-single__mod-date {
  display:    block;
  font-style: italic;
  opacity:    .8;
  font-size:  .72rem;
  margin-top: 2px;
}

/* ─── Badge "Aggiornata" ─────────────────────────────────────────────────────── */

.lm-action__new-badge--updated {
  background:  var(--sp-violet-light, #f8f0fd);
  color:       var(--sp-violet, #C320D1);
  border-color: var(--sp-violet-mid, #e89bee);
}

/* ─── Navbar spacer (spinge Esci a destra) ──────────────────────────────────── */
.lm-tr__nav-spacer { flex: 1; }
.lm-tr__btn--close  { flex-shrink: 0; }

/* ─── [sp_presentation] — costruttore presentazioni ─────────────────────────── */

.lm-pbuilder {
  max-width:  800px;
  font-family: inherit;
}

.lm-pbuilder__header { margin-bottom: 16px; }
.lm-pbuilder__title  { font-size: 1.2rem; font-weight: 700; margin: 0 0 6px; color: var(--sp-text); }
.lm-pbuilder__desc   { font-size: .85rem; color: var(--sp-text-muted); margin: 0; }

/* Tab ambiti / app */
.lm-pbuilder__tabs {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
  margin-bottom: 14px;
  align-items: center;
}

.lm-pbuilder__tab {
  padding:       4px 12px;
  font-size:     .8rem;
  font-weight:   600;
  background:    var(--sp-accent-light);
  color:         var(--sp-accent);
  border:        1.5px solid var(--sp-accent-mid);
  border-radius: 99px;
  cursor:        pointer;
  transition:    background .15s, color .15s;
  white-space:   nowrap;
}
.lm-pbuilder__tab:hover { background: var(--sp-accent-mid); }
.lm-pbuilder__tab--active {
  background: var(--sp-accent) !important;
  color:      #fff !important;
  border-color: var(--sp-accent) !important;
}
.lm-pbuilder__tab-sep { color: var(--sp-text-muted); padding: 0 4px; font-size: .8rem; }

/* ─── Onboarding checklist: tooltip e hint inline ───────────────────────────── */

/* A: Tooltip animato sopra la prima checkbox */
.lm-plan__checkbox-tooltip {
  position:       absolute;
  left:           0;
  top:            -44px;
  z-index:        100;
  background:     var(--sp-accent);
  color:          #fff;
  font-size:      .8rem;
  font-weight:    600;
  padding:        7px 14px;
  border-radius:  8px;
  white-space:    nowrap;
  pointer-events: auto;
  cursor:         pointer;
  box-shadow:     0 4px 16px rgba(0,0,0,.15);
  opacity:        0;
  transform:      translateY(6px);
  transition:     opacity .3s, transform .3s;
}
/* Freccia verso il basso */
.lm-plan__checkbox-tooltip::after {
  content:      '';
  position:     absolute;
  bottom:       -6px;
  left:         20px;
  width:        12px;
  height:       12px;
  background:   var(--sp-accent);
  transform:    rotate(45deg);
  border-radius: 2px;
}
.lm-plan__checkbox-tooltip--in {
  opacity:   1;
  transform: translateY(0);
}
.lm-plan__checkbox-tooltip--out {
  opacity:   0;
  transform: translateY(-4px);
}

/* C: Hint inline nella prima azione */
.lm-action__onboarding-hint {
  display:     block;
  font-size:   .72rem;
  color:       var(--sp-accent);
  font-weight: 600;
  margin-top:  3px;
  padding-left: 2px;
  opacity:     .85;
  animation:   lm-hint-pulse 2s ease-in-out infinite;
}

@keyframes lm-hint-pulse {
  0%, 100% { opacity: .85; }
  50%       { opacity: .4; }
}

/* ─── Quiz: opzione attenuata (dimmed) quando "Nessuna" è selezionata ───────── */

.lm-quiz__option--dimmed {
  opacity:    .35;
  transition: opacity .2s;
}
.lm-quiz__option--exclusive {
  margin-top:  8px;
  border-style: dashed !important;
}

/* ─── Slide presentazione: toggle istruzioni ─────────────────────────────────── */

/* Quando le istruzioni sono nascoste (.lm-tr--no-details) */
.lm-tr--no-details .lm-tr__details { display: none !important; }

.lm-tr__details {
  margin-top: 12px;
}

/* ─── Scroll-top: nascosto (rimosso da JS) ───────────────────────────────────── */
.lm-plan__scroll-top { display: none !important; }

/* ─── Slide presentazione: testo grande quando no-details ───────────────────── */

/* Default (con dettagli): dimensioni normali */
/* Senza dettagli: quasi il doppio */
.lm-tr--no-details .lm-tr__title {
  font-size:   clamp(2.4rem, 6vw, 4.8rem) !important;
  line-height: 1.15 !important;
}
.lm-tr--no-details .lm-tr__desc {
  font-size:   clamp(1rem, 2.5vw, 2rem) !important;
  line-height: 1.5 !important;
  margin-bottom: 28px !important;
}
.lm-tr--no-details .lm-tr__fond-badge {
  font-size: 1rem !important;
  padding:   5px 18px !important;
}

/* ─── Slide finale quiz CTA ──────────────────────────────────────────────────── */

.lm-tr__slide--quiz-cta .lm-tr__slide-text {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  text-align:      center;
  align-items:     center;
}

.lm-tr__quiz-cta-label {
  font-size:      .75rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity:        .5;
  margin-bottom:  16px;
}

.lm-tr__link--quiz {
  margin-top: 24px;
  font-size:  1rem !important;
  padding:    12px 28px !important;
}

.lm-tr__slide-qr--quiz-cta {
  display:         flex !important;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  padding:         32px 24px !important;
}

/* ─── Quiz sticky bar migliorata ─────────────────────────────────────────────── */
#lm-quiz-sticky-bar .lm-quiz__progress-fill {
  background: var(--sp-accent) !important;
}
#lm-quiz-sticky-bar .lm-quiz__step-label {
  font-size: .78rem;
  color:     var(--sp-text-muted);
  margin:    2px 0 0;
}

/* ─── Salva playlist nel costruttore URL ─────────────────────────────────────── */

.lm-tr__urlbuilder-save {
  margin-top:  12px;
  border-top:  1px solid var(--sp-border);
  padding-top: 12px;
}
.lm-tr__save-details summary {
  cursor:      pointer;
  font-size:   .85rem;
  font-weight: 600;
  color:       var(--sp-accent);
  list-style:  none;
  user-select: none;
  padding:     4px 0;
}
.lm-tr__save-details summary::-webkit-details-marker { display: none; }
.lm-tr__save-body {
  padding:     12px 0 0;
  display:     flex;
  flex-direction: column;
  gap:         8px;
}
.lm-tr__save-row {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   .83rem;
}
.lm-tr__save-input {
  padding:     4px 8px;
  border:      1px solid var(--sp-border);
  border-radius: 4px;
  font-size:   .83rem;
  width:       220px;
}
.lm-tr__save-slug-preview {
  font-family: monospace;
  font-size:   .75rem;
  color:       var(--sp-text-muted);
}

/* ─── Print PDF slide — @media print per modalità formatore ─────────────────── */

@media print {
  /* Quando si stampa dalla presentazione */
  body.lm-tr-printing * { visibility: hidden !important; }
  body.lm-tr-printing .lm-tr,
  body.lm-tr-printing .lm-tr__slide--active,
  body.lm-tr-printing .lm-tr__slide--active * { visibility: visible !important; }

  body.lm-tr-printing {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.lm-tr-printing .lm-tr {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background: #fff !important;
    page-break-after: avoid;
  }

  body.lm-tr-printing .lm-tr__nav,
  body.lm-tr-printing .lm-tr__progress-bar,
  body.lm-tr-printing .lm-tr__banner { display: none !important; }

  body.lm-tr-printing .lm-tr__slides {
    width: 100% !important;
    height: 100% !important;
  }

  body.lm-tr-printing .lm-tr__slide--active {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
  }

  @page {
    size: 1920px 1080px landscape;
    margin: 0;
  }
}

/* ─── Pagina singola azione — nav semplificato ──────────────────────────────── */
.lm-single__breadcrumb-top {
  display:     inline-block;
  color:       var(--sp-accent);
  font-size:   .88rem;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 0;
}
.lm-single__breadcrumb-top:hover { text-decoration: underline; }

/* ─── Difficulty filter pills — colori che rispecchiano i badge ─────────────── */
/* Difficulty filter pills: emoji nel label, stile uguale agli altri pill */

/* ─── Sotto-azioni incorporate nelle istruzioni ──────────────────────────────── */

/* Card [sp_action] dentro le istruzioni di un'azione guida */
.lm-action__instructions-body .lm-action,
.lm-single__instructions .lm-action {
  margin:        16px 0;
  border-radius: var(--sp-radius);
  border:        1.5px solid var(--sp-accent-mid);
  background:    var(--sp-accent-light);
  padding:       12px 16px;
}

.lm-action__instructions-body .lm-action--fondamentale,
.lm-single__instructions .lm-action--fondamentale {
  border-color: var(--sp-violet-mid);
  background:   var(--sp-violet-light);
}

/* Nessun margine extra dentro istruzioni */
.lm-action__instructions-body .lm-action__instructions,
.lm-single__instructions .lm-action__instructions {
  margin-left: 0;
}