.flashcard-wrap.svelte-tihy8z {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 24px 0;
  }

  .progress.svelte-tihy8z {
    font-size: 0.9rem;
    color: #666;
  }

  .card.svelte-tihy8z {
    width: 100%;
    max-width: 400px;
    height: 180px;
    perspective: 600px;
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.4s ease;
  }

  .card.flipped.svelte-tihy8z {
    transform: rotateY(180deg);
  }

  .face.svelte-tihy8z {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    font-family: 'Inconsolata';
    border: 1px solid #ddd;
    backface-visibility: hidden;
    padding: 16px;
  }

  .front.svelte-tihy8z {
    background: #fafafa;
  }

  .back.svelte-tihy8z {
    background: #f0f7ff;
    transform: rotateY(180deg);
  }

  .controls.svelte-tihy8z {
    display: flex;
    gap: 16px;
  }

  .controls.svelte-tihy8z button:where(.svelte-tihy8z) {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    font-size: 1rem;
  }

  .controls.svelte-tihy8z button:where(.svelte-tihy8z):hover {
    background: #f0f0f0;
  }

  .fillblank-wrap.svelte-6smhns {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 0;
    max-width: 640px;
  }

  .controls-bar.svelte-6smhns {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .mode-toggle.svelte-6smhns {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid #eee;
  }

  .mode-btn.svelte-6smhns {
    padding: 4px 12px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.85rem;
    color: #888;
    font-family: "Inconsolata";
  }

  .mode-btn.active.svelte-6smhns {
    color: #000;
    font-weight: bold;
    border-bottom: 2px solid cornflowerblue;
    margin-bottom: -1px;
  }

  .progress.svelte-6smhns {
    font-size: 0.85rem;
    color: #666;
    font-family: "Inconsolata";
  }

  .word-bank.svelte-6smhns {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    gap: 8px;
    padding: 12px;
    border: 1px solid #eee;
    background: #fafafa;
    min-height: 48px;
  }

  .chip.svelte-6smhns {
    padding: 4px 12px;
    border: 1px solid #ccc;
    background: white;
    cursor: pointer;
    font-size: 0.95rem;
    font-family: "Inconsolata";
  }

  .chip.svelte-6smhns:hover {
    background: #f0f0f0;
  }

  .rows.svelte-6smhns {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 280px; /* Escribir ed Elegir: stessa larghezza */
  }

  /* Elegir: righe e parole in due colonne parallele */
  .elegir-columns.svelte-6smhns {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }

  .elegir-columns.svelte-6smhns .rows:where(.svelte-6smhns) {
    flex: 0 1 280px; /* larghezza fissa, si stringe se lo spazio non basta */
  }

  /* Ogni parola alta quanto una riga (54px) e stesso gap: colonne allineate */
  .elegir-columns.svelte-6smhns .word-bank:where(.svelte-6smhns) {
    order: 2;
    flex-direction: column;
    padding: 0;
    border: none;
    background: none;
  }

  .elegir-columns.svelte-6smhns .word-bank:where(.svelte-6smhns) li:where(.svelte-6smhns) {
    height: 54px;
    margin: 0; /* uno stile globale aggiunge ~2px sopra/sotto e rompe l'allineamento */
  }

  .elegir-columns.svelte-6smhns .chip:where(.svelte-6smhns) {
    height: 100%;
  }

  /* Telefono: una colonna sola, parole sopra (in riga, come prima) */
  @media (max-width: 768px) {
    .elegir-columns.svelte-6smhns {
      flex-direction: column;
      align-items: stretch;
    }

    .elegir-columns.svelte-6smhns .word-bank:where(.svelte-6smhns) {
      order: 0;
      flex-direction: row;
      padding: 12px;
      border: 1px solid #eee;
      background: #fafafa;
    }

    .elegir-columns.svelte-6smhns .word-bank:where(.svelte-6smhns) li:where(.svelte-6smhns) {
      height: auto;
    }
  }

  .row.svelte-6smhns {
    display: block;
    padding: 10px 12px;
    border: 1px solid #eee;
    line-height: 2;
    transition:
      border-color 0.2s,
      background 0.2s;
  }

  .row.correct.svelte-6smhns {
    border-color: #b2dfb2;
    background: #f6fff6;
  }

  .row.correct.svelte-6smhns input:where(.svelte-6smhns) {
    text-align: center;
  }

  @keyframes svelte-6smhns-shake {
    0%,
    100% {
      transform: translateX(0);
    }
    20% {
      transform: translateX(-6px);
    }
    40% {
      transform: translateX(6px);
    }
    60% {
      transform: translateX(-4px);
    }
    80% {
      transform: translateX(4px);
    }
  }

  .row.shake.svelte-6smhns {
    animation: svelte-6smhns-shake 0.45s ease;
    border-color: #e57373;
  }

  .blank-input.svelte-6smhns {
    display: inline-block;
    vertical-align: baseline;
    font-size: 1rem;
    font-family: "Inconsolata";
    padding: 2px 4px;
    border: none;
    border-bottom: 1px solid #aaa;
    outline: none;
    transition: border-color 0.2s;
    background: transparent;
  }

  .blank-input.svelte-6smhns:focus {
    border-bottom-color: cornflowerblue;
  }
  .blank-input.active.svelte-6smhns {
    border-bottom-color: cornflowerblue;
    cursor: pointer;
  }
  .blank-input[readonly].svelte-6smhns {
    cursor: pointer;
  }

  .definition.svelte-6smhns {
    font-size: 0.95rem;
    font-family: "Inconsolata";
    color: #444;
    flex: 1;
    min-width: 0;
  }

  .complete.svelte-6smhns {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border: 1px solid #b2dfb2;
    background: #f6fff6;
    font-family: "Inconsolata";
  }

  .complete.svelte-6smhns span:where(.svelte-6smhns) {
    font-weight: bold;
    color: #2a7a2a;
  }

  .reset-btn.svelte-6smhns {
    padding: 4px 16px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: "Inconsolata";
  }

  .unscramble-wrap.svelte-b3fhb7 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 24px 0;
    max-width: 500px;
    margin: 0 auto;
  }

  .progress.svelte-b3fhb7 {
    font-size: 0.9rem;
    color: #666;
    align-self: flex-start;
    font-family: 'Inconsolata';
  }

  .definition.svelte-b3fhb7 {
    font-family: 'Inconsolata';
    font-size: 1rem;
    color: #333;
    text-align: center;
    line-height: 1.5;
    margin: 0;
  }

  .assembled.svelte-b3fhb7 {
    min-height: 52px;
    min-width: 200px;
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
    border: 2px solid #ddd;
    padding: 8px 16px;
    flex-wrap: wrap;
    transition: border-color 0.2s, background 0.2s;
  }

  .assembled.correct.svelte-b3fhb7 {
    border-color: #4caf50;
    background: #f0fff0;
  }

  @keyframes svelte-b3fhb7-shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
  }

  .assembled.shake.svelte-b3fhb7 {
    animation: svelte-b3fhb7-shake 0.45s ease;
    border-color: #e57373;
  }

  .placeholder.svelte-b3fhb7 {
    color: #ccc;
    font-size: 1.2rem;
  }

  .letter-bank.svelte-b3fhb7 {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .letter.svelte-b3fhb7 {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    font-family: 'Inconsolata';
    border: 1px solid #ccc;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
  }

  .letter.used.svelte-b3fhb7 {
    opacity: 0.2;
    cursor: default;
  }

  .letter.selected.svelte-b3fhb7 {
    background: #e8f0fe;
    border-color: cornflowerblue;
    width: auto;
    padding: 0 8px;
  }

  .letter.svelte-b3fhb7:hover:not(.used):not(:disabled) {
    background: #f0f0f0;
  }

  .clear-btn.svelte-b3fhb7 {
    padding: 4px 16px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: 'Inconsolata';
    color: #888;
  }

  .complete.svelte-b3fhb7 {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border: 1px solid #b2dfb2;
    background: #f6fff6;
    font-family: 'Inconsolata';
  }

  .complete.svelte-b3fhb7 span:where(.svelte-b3fhb7) {
    font-weight: bold;
    color: #2a7a2a;
  }

  .reset-btn.svelte-b3fhb7 {
    padding: 4px 16px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: 'Inconsolata';
  }

  /* Layout e card ricalcano VocabFlashcard (Tarjetas) */
  .number-wrap.svelte-m4x5my {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 24px 0;
  }

  .progress.svelte-m4x5my {
    font-size: 0.9rem;
    color: #666;
  }

  .card.svelte-m4x5my {
    width: 100%;
    max-width: 400px;
    height: 180px;
    position: relative;
  }

  .face.svelte-m4x5my {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    font-family: "Inconsolata";
    border: 1px solid #ddd;
    background: #fafafa;
    padding: 16px;
    font-weight: bold;
    transition: border-color 0.2s, background 0.2s;
  }

  .controls.svelte-m4x5my {
    display: flex;
    gap: 16px;
  }

  .number-input.svelte-m4x5my {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: white;
    font-size: 1rem;
    font-family: "Inconsolata";
    text-align: center;
    outline: none;
  }

  .number-input.svelte-m4x5my:focus {
    border-color: cornflowerblue;
  }

  .reset-btn.svelte-m4x5my {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: white;
    cursor: pointer;
    font-size: 1rem;
  }

  .reset-btn.svelte-m4x5my:hover {
    background: #f0f0f0;
  }

  .last-correct.svelte-m4x5my {
    margin: 0;
    font-size: 0.9rem;
    font-family: "Inconsolata";
    color: #2a7a2a;
  }

  /* Feedback ricalca VocabFillBlank (Completar) */
  .card.complete.svelte-m4x5my .face:where(.svelte-m4x5my) {
    border-color: #b2dfb2;
    background: #f6fff6;
    color: #2a7a2a;
    font-weight: bold;
  }

  @keyframes svelte-m4x5my-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
  }

  .card.shake.svelte-m4x5my {
    animation: svelte-m4x5my-shake 0.45s ease;
  }

  .card.shake.svelte-m4x5my .face:where(.svelte-m4x5my) {
    border-color: #e57373;
  }

  .content.svelte-16h4wgj :where(.svelte-16h4wgj) {
    font-family: "Inconsolata";
  }

  .nav-lang-group.svelte-16h4wgj {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    margin-top: -25px;
  }

  h1.svelte-16h4wgj {
    margin-top: 0;
    margin-bottom: var(--spacing-lg);
  }

  .lang-toggle.svelte-16h4wgj {
    font-size: 1rem;
    font-weight: normal;
    padding: 4px 8px;
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
  }

  .lang-toggle.svelte-16h4wgj span.active:where(.svelte-16h4wgj) {
    font-weight: bold;
  }

  .tab-navigation.svelte-16h4wgj {
    display: flex;
    gap: 8px;
  }

  .tab-button.svelte-16h4wgj {
    padding: 8px 12px;
    border: none;
    background: white;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 1rem;
    font-weight: normal;
    white-space: nowrap;
  }

  .tab-button.active.svelte-16h4wgj {
    background: #f0f0f0;
    border-bottom: solid 2px cornflowerblue;
  }

  .tab-button.svelte-16h4wgj:hover {
    background: #f8f8f8;
  }

  .sub-tab-navigation.svelte-16h4wgj {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
  }

  .sub-tab-button.svelte-16h4wgj {
    padding: 6px 12px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: #666;
    white-space: nowrap;
  }

  .sub-tab-button.active.svelte-16h4wgj {
    color: #000;
    border-bottom: 2px solid cornflowerblue;
    font-weight: bold;
  }

  .sub-tab-button.svelte-16h4wgj:hover {
    color: #000;
  }

  .questions-container.svelte-16h4wgj {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 16px;
  }

  .question-card.svelte-16h4wgj {
    padding: 16px;
    border: 1px solid #ddd;
  }

  .question-number.svelte-16h4wgj {
    font-weight: bold;
    margin-bottom: 8px;
  }

  .not-implemented.svelte-16h4wgj {
    color: #999;
    font-style: italic;
  }

  .quiz-submit-btn.ready.svelte-16h4wgj {
    font-weight: bold;
    border: solid 5px #000;
    animation: svelte-16h4wgj-pulse-ready 1s ease-in-out infinite;
  }

  @keyframes svelte-16h4wgj-pulse-ready {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
  }

  .empty-state.svelte-16h4wgj {
    color: #666;
    font-style: italic;
  }

  @media (max-width: 768px) {
    .nav-lang-group.svelte-16h4wgj {
      justify-content: space-between;
    }

    .tab-navigation.svelte-16h4wgj {
      flex: 1;
    }

    .tab-button.svelte-16h4wgj {
      flex: 1;
    }

    .sub-tab-navigation.svelte-16h4wgj {
      flex-wrap: wrap;
    }
  }