/* The inline bootstrap marks embedded pages before deferred account setup. */
  .hr-account-pending body { visibility: hidden; }
  /* Benvenuto al primo accesso: tre scelte affiancate anche sul telefono. */
  .hr-level-dialog {
    box-sizing: border-box; width: min(720px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem);
    margin: auto; padding: clamp(1rem, 4vw, 2.25rem); overflow-y: auto;
    border: 1px solid var(--rule); border-radius: 24px;
    background: var(--surface); color: var(--fg); box-shadow: 0 24px 80px rgba(15,35,27,.2);
    text-align: center; font-family: var(--font-ui);
  }
  .hr-level-dialog::backdrop { background: rgba(17,35,29,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .hr-level-welcome { margin: 0 0 .65rem; color: var(--ui-active); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
  .hr-level-dialog h2 { margin: 0; font: 500 clamp(1.4rem, 4vw, 2rem)/1.2 var(--font-display); }
  #hrLevelIntro { margin: .75rem 0 1.5rem; color: var(--fg-60); font-size: .85rem; }
  .hr-level-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.35rem, 2vw, .85rem); }
  .hr-level-option {
    display: flex; flex-direction: column; align-items: center; gap: .65rem; min-width: 0;
    padding: 1.35rem .65rem; border: 1px solid var(--rule-2); border-radius: var(--r-lg);
    background: rgba(255,255,255,.5); color: var(--fg); font: inherit; cursor: pointer;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
  }
  .hr-level-name { font-size: clamp(.75rem, 2.7vw, 1rem); font-weight: 600; }
  .hr-level-option small { font-size: clamp(.68rem, 2.2vw, .78rem); line-height: 1.6; color: color-mix(in oklab, var(--fg) 62%, transparent); }
  .hr-level-option:focus-visible { outline: 2px solid var(--ui-active); outline-offset: 3px; }
  .hr-level-option:disabled { cursor: wait; }
  .hr-level-option.is-selected { border-color: var(--ui-active); background: var(--ui-active-tint); box-shadow: inset 0 0 0 1px var(--ui-active); }
  .hr-level-status { min-height: 1.5em; margin: 1rem 0 0; color: var(--fg-60); font-size: .78rem; line-height: 1.5; }
  .hr-level-status.is-error { color: var(--primary-ink); }
  @media (hover: hover) {
    .hr-level-option:hover:not(:disabled) { border-color: var(--ui-active-line); background: var(--ui-active-tint); }
  }
  @media (max-width: 480px) {
    .hr-level-dialog { width: calc(100% - 1.25rem); padding: 1.35rem .7rem .75rem; border-radius: 20px; }
    .hr-level-option { padding: 1rem .3rem; }
  }
  .hr-study-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1rem;padding:1rem;border:1px solid rgba(255,233,168,.25);border-radius:12px;font-size:.875rem;color:rgba(255,255,255,.8)}
  .hr-study-tools h3{flex-basis:100%;margin:0 0 .25rem;font-size:1rem;color:var(--paper)}
  .hr-study-tools #hrSyncStatus{flex-basis:100%}
  .hr-study-tools [hidden]{display:none!important}
  .hr-study-tools button,.hr-import-label{min-height:44px;padding:.45rem .7rem;border:1px solid var(--rule-2);border-radius:8px;background:var(--paper);color:var(--ink);cursor:pointer;font:inherit}
  .hr-study-tools summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
  .hr-study-tools details{flex-basis:100%;min-width:0}.hr-backup-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.5rem 0}.hr-backup-actions p{flex-basis:100%}
  .hr-study-tools input[type=file]{max-width:100%;min-height:44px;font:inherit}.cal-cell{font:inherit;color:inherit;border:0}.cal-cell:disabled{opacity:1}
  .history-item [role=button]:focus-visible,.fav-item-main:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  :root {
    /* Carta di riso, inchiostro, cinabro e ottone: base cromatica condivisa. */
    --seed-paper:   #f6f4ee;
    --seed-ink:     #252b28;
    --seed-primary: #b73832;
    --seed-accent:  #bb944f;
    --seed-desk:    #20372f;
    --seed-radius:  10px;

    /* La giada identifica navigazione e selezione; l'oro indica progresso. */
    --ui-active:      #2f6258;
    --ui-active-deep: #244d46;
    --ui-active-tint: #e7f0eb;
    --ui-active-line: #abc5b8;

    /* ══ Alias storici: tutto il CSS e il markup esistenti passano di qui. ══ */
    --ink:    var(--seed-ink);
    --paper:  var(--seed-paper);
    --bg:     var(--seed-paper);
    --accent: var(--seed-primary);
    --gold:   var(--seed-accent);

    /* Selezione di lettura: stessa giada dei controlli di navigazione. */
    --select-ink:   var(--ui-active-deep);
    --select-tint:  var(--ui-active-tint);
    --select-line:  var(--ui-active-line);

    /* ══ Superfici: due soli livelli. Il rialzo NON ha ombra — si vede dal
       bianco pieno sulla carta. SUNK = incavi (input, righe, linguette). ══ */
    --surface:        var(--seed-paper);
    --surface-sunk:   color-mix(in oklab, var(--seed-paper) 95%, var(--seed-ink));
    --surface-raised: #ffffff;
    --desk:           var(--seed-desk);
    --desk-deep:      color-mix(in oklab, var(--seed-desk) 70%, #000);

    /* ══ Testo: passi misurati per restare sopra il minimo WCAG su carta ══ */
    --fg:        var(--seed-ink);
    --fg-70:     color-mix(in oklab, var(--seed-ink) 72%, var(--seed-paper)); /* ~7:1 micro-label */
    --fg-60:     color-mix(in oklab, var(--seed-ink) 63%, var(--seed-paper)); /* >4.5:1 sulla carta */
    --fg-45:     color-mix(in oklab, var(--seed-ink) 46%, var(--seed-paper)); /* non testuale / solo grande */
    --on-ink:    color-mix(in oklab, var(--seed-paper) 96%, transparent);
    --on-ink-70: color-mix(in oklab, var(--seed-paper) 74%, transparent);

    /* ══ Linee: solo capelli. 10% = confine debole, 20% = controllo interattivo.
       Niente bordi decorativi: dove serve un perimetro, è una riga da 1px. ══ */
    --rule:   color-mix(in oklab, var(--seed-ink) 10%, transparent);
    --rule-2: color-mix(in oklab, var(--seed-ink) 20%, transparent);
    --tint:   color-mix(in oklab, var(--seed-ink) 4%, transparent);
    --tint-2: color-mix(in oklab, var(--seed-ink) 7%, transparent);

    /* ══ Rosso e oro derivati. Il rosso è UN SOLO segnale (l'azione e ciò che
          non si conosce); l'oro SOLO su progresso/trofeo/sigilli. ══ */
    --primary-ink:  color-mix(in oklab, var(--seed-primary) 72%, var(--seed-ink));
    --primary-tint: color-mix(in oklab, var(--seed-primary) 9%, transparent);
    --gold-ink:     color-mix(in oklab, var(--seed-accent) 62%, var(--seed-ink));
    --gold-tint:    color-mix(in oklab, var(--seed-accent) 20%, transparent);
    --gold-line:    color-mix(in oklab, var(--seed-accent) 55%, transparent);

    /* ══ Stati di studio: una famiglia, due intensità. «Non conosco» = vermiglio
       pieno + peso 600; «da ripassare» = vermiglio attenuato a peso normale, cioè
       visivamente subordinato. Il verde resta solo per «imparato». ══ */
    --state-unknown: var(--seed-primary);
    --state-review:  color-mix(in oklab, var(--seed-primary) 92%, var(--seed-paper));
    --ok:            #15803d;

    /* ══ Geometria e bersagli ══ */
    --r-sm:  calc(var(--seed-radius) * .5);
    --r:     var(--seed-radius);
    --r-lg:  calc(var(--seed-radius) * 1.6);
    --r-pill: 999px;
    --row-h: 44px;   /* minimo touch: vale anche col mouse, dove costa niente */
    --shadow-card: 0 4px 16px rgba(35,32,25,.045);
    --shadow-float: 0 8px 24px rgba(35,32,25,.1);
    --shadow-control: 0 2px 5px rgba(35,32,25,.08);

    /* ══ Tipografia ══ */
    --font-display: Georgia, "Palatino Linotype", Palatino, "Times New Roman", serif;
    --font-ui: "Inter", system-ui, -apple-system, sans-serif;
    --font-hanzi: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    --fs-reading: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
  }
  html, body {
    font-family: var(--font-ui);
    background: var(--surface);
    background-attachment: fixed;
    color: var(--fg);
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
  }
  ::selection { background: #c8ddd2; color: #193a32; }
  /* L'attributo hidden deve vincere: senza questa riga un elemento con `display`
     dichiarato dall'autore (inline-flex, grid…) resta visibile anche se hidden. */
  [hidden] { display: none !important; }
  /* Anello tratteggiato per la sola navigazione da tastiera: mai sul tap. */
  :where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px dashed var(--fg);
    outline-offset: 3px;
    border-radius: var(--r-sm);
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  }
  /* Su iPad/telefono il doppio tap non deve zoomare: si usa per marcare le parole */
  body { touch-action: manipulation; }
  .chinese-font { font-family: var(--font-hanzi); }
  .hanzi {
    display: inline-block;
    position: relative;
    padding: 0.15em 0.05em;
    cursor: default;
    transition: color 0.08s ease, background 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 0.25em;
    line-height: 1.6;
    z-index: 1;
    /* Touch: il tap deve reagire subito e senza flash. touch-action sul singolo bersaglio
       disattiva il ritardo doppio-tap-zoom (~300 ms) del click sintetizzato; niente casella
       grigia iOS né selezione testuale quando si tocca una parola. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none; user-select: none;
  }
  .hanzi.char, .hanzi.word, [data-char] { cursor: help; }
  
  /* Ingrandimento in anteprima: solo su hover reale (mouse) */
  .hanzi.char:hover, .hanzi.word:hover {
    background: linear-gradient(180deg, transparent 50%, var(--ui-active-tint) 50%);
    transform: scale(1.08) translateY(-1px);
    z-index: 50; /* Porta l'elemento in primo piano rispetto agli altri */
  }
  /* Su touch l'hover resta appiccicato dopo il tap: lo disattiviamo e teniamo solo .active */
  @media (hover: none) {
    .hanzi.char:hover, .hanzi.word:hover {
      background: none; transform: none; color: inherit; z-index: 1;
    }
    .hanzi.active, .hanzi.active:hover, .hanzi:active { z-index: 50; }
  }
  
  .hanzi.state-unknown, [data-char].state-unknown { color: var(--state-unknown) !important; font-weight: 600; }
  .hanzi.state-unknown:hover, [data-char].state-unknown:hover { color: var(--primary-ink) !important; }
  /* «Da ripassare» perde anche il peso 600: è il secondo gradino dello STESSO segnale
     (un solo colore guida), non un colore in più. Più lavato + più leggero = ripassare,
     pieno + pesante = non conosciuto. */
  .hanzi.state-review, [data-char].state-review { color: var(--state-review) !important; }
  .hanzi.state-review:hover, [data-char].state-review:hover { color: var(--primary-ink) !important; }

  /* PAROLA SELEZIONATA (tap o click): giada scura su fondo tenue.
     Vince sui colori di stato per rendere immediatamente chiaro l'elemento attivo. */
  .hanzi.active, .hanzi.active:hover,
  .hanzi:active, .hanzi.char:active, .hanzi.word:active,
  .hanzi.active[data-char], .hanzi.active:hover[data-char] {
    background: var(--select-tint) !important;
    transform: none;
    color: var(--select-ink) !important;
    font-weight: 700;
    border-radius: 0.28em;
    box-shadow: 0 0 0 1.5px var(--select-line);
    z-index: 50;
  }
  .hanzi.active > [data-char], .hanzi.active:hover > [data-char],
  .hanzi:active > [data-char], .hanzi.word:active > [data-char] {
    color: var(--select-ink) !important;
    font-weight: 700;
  }
  /* Il pinyin dell'elemento attivo prende il colore di selezione senza ingrossarsi */
  .hanzi.active > .bop, .hanzi:active > .bop,
  .hanzi.active .bop, .hanzi.active .bop-syl {
    color: var(--select-ink) !important;
    font-weight: 500;
  }
  .hanzi.active .tooltip, .hanzi:active .tooltip { font-weight: 400; }

  /* Evidenziazione progressiva della lettura (👂 nel testo analizzato): le parole
     già lette si colorano di rosso man mano che la voce avanza (riempimento da
     sinistra a destra) e, a lettura finita, tutto torna normale. Sta DOPO i colori
     di stato e dopo .active così il rosso della lettura sorpassa temporaneamente
     «non conosco»/«da ripassare» e la selezione dorata: è solo un di più visivo,
     non tocca i dati né gli stati. .hr-cur = il bordo/frontiera corrente. */
  .hanzi.word, .hanzi.char { transition: color .12s ease, background .12s ease, transform .18s cubic-bezier(.2,.8,.2,1); }
  .hanzi.hr-read,
  .hanzi.hr-read > [data-char],
  [data-char].hr-read { color: var(--state-unknown) !important; }
  .hanzi.hr-cur { background: rgba(220, 38, 38, .14); }

  .hanzi .tooltip {
    position: absolute;
    bottom: calc(100% + 15px); /* Spazio extra per l'ingrandimento */
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--ink);
    color: var(--paper);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    white-space: normal;
    max-width: 340px;
    min-width: 140px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.18s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.35);
    border: 1px solid var(--gold);
    font-family: 'Inter', sans-serif;
    z-index: 10;
    text-align: center;
  }
  .hanzi .tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--ink);
  }
  .hanzi:hover .tooltip, .hanzi.active .tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }
  
  /* Stile per il carattere/parola grande nel popup */
  .tooltip-hanzi {
    font-family: var(--font-hanzi);
    font-size: 2.8rem;
    line-height: 1.1;
    color: #fff;
    text-align: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--rule-2);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  }

  .tooltip .py { color: var(--gold); font-weight: 600; display: block; margin-bottom: 0.2rem; }
  .tooltip .desc { color: rgba(253,250,243,0.9); font-size: 0.78rem; line-height: 1.4; }
  .tooltip .state-info {
    font-size: 0.7rem;
    color: rgba(253,250,243,0.6);
    font-style: italic;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--rule);
  }
  .paper {
    background: var(--paper);
  }
  textarea { font-family: var(--font-hanzi); }
  /* Le basi dei bottoni sono consolidate in CHROME v2; restano qui le varianti
     e il feedback :hover che conserva la precedenza sui dispositivi touch. */
  .btn-primary b, .btn-primary strong { font-weight: 800; letter-spacing: 0.04em; }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: none; }
  .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
  /* --- Superfici chiare: .btn-ghost nasce per la barra scura, su --paper è invisibile --- */
  .session-card .btn-ghost, .ask-panel .btn-ghost, .grammar-shell .btn-ghost {
    border-color: rgba(26, 20, 16, 0.22);
    color: var(--ink);
    background: rgba(255, 255, 255, 0.6);
  }
  .session-card .btn-ghost:hover, .ask-panel .btn-ghost:hover, .grammar-shell .btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: rgba(185, 28, 28, 0.07); }
  .btn-soft:hover { border-color: var(--accent); color: var(--accent); background: rgba(185, 28, 28, 0.06); box-shadow: none; }
  .btn-mode {
    border: 1.5px solid rgba(255,255,255,0.15);
    color: var(--paper);
    transition: all 0.2s ease;
  }
  .btn-mode.active {
    border-color: var(--gold);
    background: rgba(212,160,23,0.15);
    color: var(--gold);
  }
  .seal {
    display: inline-block;
    background: var(--accent);
    color: var(--paper);
    padding: 0;
    border-radius: 0.25rem;
    font-family: var(--font-hanzi);
    font-weight: 700;
    letter-spacing: 0.1em;
    overflow: hidden;
  }
  .stat-pill {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(253,250,243,0.85);
  }
  .dict-status { font-size: 0.75rem; color: rgba(255,255,255,0.6); }
  .dict-status.ready { color: #86efac; }
  .dict-status.error { color: #fca5a5; }
  .dict-status.loading { color: #fcd34d; }
  .spinner {
    display: inline-block;
    width: 12px; height: 12px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  
  .progress-counters { display: flex; gap: 0.5rem; flex-wrap: wrap; }

  /* ============ Livello corrente: un sigillo lacato per traccia ============
     Il sigillo È l'indicatore di livello (numero letto sotto, ✓ in angolo quando la
     traccia è finita). Le liste dei livelli già completati non stanno più a schermo: si
     recuperano con «🔁 Ripassa», che è un bottone come quello dei Radicali. */
  .levels-bar { display: flex; flex-direction: column; gap: .3rem; width: 100%; }
  .levels-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
  .lvl-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .3rem .6rem;
    border-radius: .65rem;
    background: transparent;
    border: 1px solid var(--rule);
    cursor: pointer;
  }
  .lvl-btn:hover { border-color: var(--gold); }
  .lvl-btn.active { border-color: var(--gold); }
  .lvl-btn.active .lvl-num { color: var(--gold-ink); font-weight: 800; }
  .lvl-btn.done { border-color: rgba(34,197,94,0.6); }
  .levels-note { font: 600 .72rem 'Inter', sans-serif; color: var(--fg-60); text-align: right; }

  /* ============ Sessione di studio giornaliera ============ */
  .input-shell.minimized { display: none; }
  .session-card {
    background: var(--paper);
    border: 1px solid var(--gold);
    border-radius: 1.1rem;
    padding: 1rem 1.1rem;
    box-shadow: 0 14px 34px rgba(0,0,0,0.45);
  }
  .session-head { display: none !important; }
  .session-grid { display: block; width: 100%; }
  .session-hint { margin: 0 0 .6rem; font: 500 .82rem 'Inter', sans-serif; color: rgba(0,0,0,0.55); }
  .session-hint:empty { display: none; }   /* modalità «nuovi»: nessun messaggio di stato */
  .session-group { margin-bottom: .9rem; }
  .session-group > h3 { display: none !important; }
  .session-mode { font: 600 .68rem 'Inter', sans-serif; color: #7f1414; background: rgba(212,160,23,0.2); border: 1px solid var(--rule-2); border-radius: 999px; padding: .06rem .55rem; }
  .session-band { margin-left: auto; font: 600 .68rem 'Inter', sans-serif; color: rgba(0,0,0,0.5); text-align: right; }
  .session-band:empty { display: none; }
  /* ============ Vocaboli: riquadro grande + fila di anteprime ============
     Riga 1 = .sess-focus: l'elemento selezionato (la parola zoomata, il pinyin, il
     significato e i comandi ✕ ✨ 👂) | separatore | bihua, un 田字格 per carattere.
     Riga 2 = .sess-strip: le anteprime con la sola parola, tutte allo stesso
     piano; il tap sposta la selezione sul riquadro grande. La voce ingrandita non si
     ripete: un gruppo di 5 lascia quattro anteprime. Con più di 5 elementi
     (il ripasso di un giorno) la fila scorre in orizzontale. */
  .sess-focus {
    display: flex; align-items: stretch; gap: .75rem;
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    padding: .7rem .8rem;
    box-shadow: none;
  }
  .sess-focus.done { border-color: var(--ok); background: rgba(34,197,94,0.07); }
  .sess-focus[hidden] { display: none; }
  .sf-main { flex: 1 1 auto; min-width: 0; }
  .sf-item { font-family: var(--font-hanzi); font-size: clamp(2.1rem, 7.4vw, 3.4rem); font-weight: 600; line-height: 1.14; color: var(--ink); overflow-wrap: break-word; }
  .sf-py { font: 600 .95rem 'Inter', sans-serif; color: var(--gold-ink); margin-top: .14rem; }
  .sf-ruby-wrap {
    display: inline-grid;
    grid-template-columns: repeat(var(--n, 1), auto);
    row-gap: .14rem;
    column-gap: .45rem;
    justify-items: center;
  }
  .sf-ruby-wrap > .sf-item {
    display: flex;
    justify-content: space-around;
    width: auto;
    line-height: 1.14;
  }
  .sf-ruby-wrap > .sf-py {
    display: flex;
    justify-content: space-around;
    width: auto;
    margin-top: 0;
  }
  .sf-ruby-wrap .sf-char {
    display: inline-block;
    text-align: center;
  }
  .sf-ruby-wrap button.sf-char {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    padding: 0 .05em;
    margin: 0;
    font: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: .35rem;
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s ease, transform .12s ease;
  }
  .sf-ruby-wrap button.sf-char::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 44px;
    min-height: 44px;
    width: 100%;
    height: 100%;
  }
  .sf-ruby-wrap button.sf-char:hover {
    color: var(--accent);
  }
  .sf-ruby-wrap button.sf-char:active {
    transform: scale(0.92);
  }
  .sf-ruby-wrap button.sf-char:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-ruby-wrap button.sf-char {
      transition: none;
      transform: none;
    }
  }
  .sf-ruby-wrap .sf-syl {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
  }
  @supports (grid-template-columns: subgrid) {
    .sf-ruby-wrap > .sf-item {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
      justify-items: center;
      align-items: baseline;
      width: auto;
    }
    .sf-ruby-wrap > .sf-py {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
      justify-items: center;
      width: auto;
    }
    .sf-ruby-wrap .sf-char,
    .sf-ruby-wrap .sf-syl {
      flex: none;
      padding-inline: 0.05em;
    }
  }
  .sf-desc { font: 400 .82rem var(--font-ui), var(--font-hanzi); color: rgba(0,0,0,0.68); line-height: 1.5; margin-top: .3rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
  html[lang="zh-CN"] .sf-desc { font-family: var(--font-hanzi); font-size: .86rem; color: rgba(0,0,0,0.72); line-height: 1.55; }
  .sf-tools { display: flex; align-items: center; gap: .35rem; margin-top: .6rem; }
  .sf-tools button { border: 1px solid var(--rule-2); background: transparent; border-radius: .5rem; padding: .14rem .5rem; font-size: .84rem; line-height: 1.5; color: var(--ink); cursor: pointer; }
  .sf-tools button:hover { background: rgba(212,160,23,0.15); }
  .sf-tools button.sf-fav { font-size: .95rem; line-height: 1.3; }
  .sf-tools button.sf-fav.active { color: #e11d48; border-color: rgba(225,29,72,0.55); background: rgba(225,29,72,0.12); }
  .sf-tools button.sf-fav:hover { background: rgba(225,29,72,0.16); border-color: rgba(225,29,72,0.4); }
  .sf-sep { flex: 0 0 1px; background: linear-gradient(to bottom, transparent, var(--rule-2) 16%, var(--rule-2) 84%, transparent); }
  .sf-side { flex: 0 0 auto; align-self: flex-start; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .4rem; min-width: 94px; min-height: 0; }
  .sf-main .sf-tools button { min-width: 44px; min-height: 44px; }
  .sess-focus .hr-explain-wrap:not(.open) { display: none; }
  .sf-write { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
  .sf-write[hidden] { display: none; }
  .sf-write.grid-4 { display: grid; grid-template-columns: repeat(2, auto); gap: .35rem; justify-items: center; }
  .sfb { display: flex; align-items: center; justify-content: center; border: 0; padding: 0; background: none; cursor: pointer; line-height: 0; }
  .sfb .writer-box { border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgba(185,28,28,0.32); }
  .sfb:active .writer-box { box-shadow: inset 0 0 0 1.5px rgba(185,28,28,0.62); }
  .sfb-py { display: none !important; }
  .sfb-fb { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--ink); }
  .sf-write .hw-loading .spinner { border-color: rgba(26,20,16,0.18); border-top-color: var(--accent); width: 14px; height: 14px; }
  .sess-strip { display: flex; gap: .4rem; margin-top: .55rem; }
  .sess-strip[hidden] { display: none; }
  .sess-strip.scrolling { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: .3rem; }
  .sprev {
    position: relative; flex: 1 1 0; min-width: 0; max-width: 14rem; text-align: center; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .08rem;
    background: var(--surface-raised); border: 1px solid var(--rule-2); border-radius: .7rem;
    padding: .4rem .3rem;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  }
  .sess-strip.scrolling .sprev { flex: 0 0 5.4rem; scroll-snap-align: center; }
  .sprev:hover { border-color: var(--rule-2); }
  .sprev.sel {
    z-index: 1; transform: translateY(-3px);
    border-color: var(--rule-2); background: var(--surface-raised);
    box-shadow: 0 5px 10px rgba(26,20,16,.16), 0 1px 2px rgba(26,20,16,.1), inset 0 1px 0 rgba(255,255,255,.9);
  }
  .sprev.done { border-color: var(--ok); }
  /* Barretta di difficoltà dell'anteprima: ridotta a 1/3 della larghezza precedente,
     sempre centrata in basso. */
  .sprev-bar {
    position: absolute; bottom: 3px; left: 42.5%; right: 42.5%; height: 3px;
    border-radius: 999px; pointer-events: none;
  }
  .sprev.tier-high .sprev-bar { background: #dc2626; box-shadow: 0 1px 3px rgba(220,38,38,0.35); }
  .sprev.tier-mid .sprev-bar  { background: #ea580c; box-shadow: 0 1px 3px rgba(234,88,12,0.35); }
  .sprev.tier-rare .sprev-bar { background: #16a34a; box-shadow: 0 1px 3px rgba(22,163,74,0.35); }
  .sprev-i { font-family: var(--font-hanzi); font-size: 1.16rem; font-weight: 600; line-height: 1.25; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sprev-py { font: 600 .58rem 'Inter', sans-serif; color: var(--gold-ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Frecce avanti/indietro di 5 nelle anteprime (Vocaboli · Radicali) */
  .strip-arrow {
    flex: 0 0 2.2rem; min-width: 2.2rem; align-self: stretch;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-raised); border: 1px solid var(--rule-2); border-radius: .7rem;
    color: var(--ink); cursor: pointer; padding: 0; user-select: none;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, opacity .15s ease;
  }
  .strip-arrow-svg { width: 1.25rem; height: 1.25rem; display: block; pointer-events: none; }
  .strip-arrow:hover:not(:disabled):not(.is-locked) {
    border-color: var(--gold); background: rgba(212,160,23,0.14); color: var(--gold-ink);
    transform: translateY(-1px);
  }
  .strip-arrow:active:not(:disabled):not(.is-locked) { transform: scale(0.95); }
  .strip-arrow:disabled,
  .strip-arrow.is-locked {
    opacity: 0.28; cursor: not-allowed;
    border-color: var(--rule-1, rgba(0,0,0,0.08)); color: var(--ink-3, #999);
    background: var(--surface-raised); box-shadow: none; transform: none;
  }

  /* Riquadro «✨» delle spiegazioni (Vocaboli, Grammatica, Radicali): dal restyle la risposta
     NON sta più inline nella carta, ma in una BARRA FISSA IN BASSO identica a quella della
     lettura (.study-dock): fondo inchiostro e giada, testo chiaro, avatar panda in un tondino in
     coda alla riga (flessibile centrato, come .dock-panda). La cromia della barra è del wrap
     .hr-explain-wrap (che prende la classe «.open» mentre la spiegazione è in schermo, vedi
     sotto); il box qui dentro resta SOLO l'output, con sfondo/bordo trasparenti e testo chiaro
     perché il contenitore è scuro. */
  .ask-result.sess-explain { position: static; margin: 0; border: 0; border-radius: 0; background: transparent; min-height: 0; padding: 0; color: var(--paper); }
  .ask-result.sess-explain .ask-empty { color: rgba(253,250,243,0.85); font-style: normal; }
  /* Fuffy: il panda peluche del riferimento, anche nelle icone 2D. */
  .fuffy-ava { display: inline-block; width: 1.4rem; height: 1.4rem; object-fit: contain; vertical-align: -.32em; }
  .sess-focus.asked { border-color: var(--seed-primary); box-shadow: 0 0 0 2px color-mix(in oklab, var(--seed-primary) 20%, transparent); }
  .gex.asked { border-color: var(--seed-primary); box-shadow: 0 0 0 2px color-mix(in oklab, var(--seed-primary) 20%, transparent); }
  .session-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .4rem; }
  /* ============ Riga dei comandi della sessione (Vocaboli) ============
     «Esempi» · «NEW» · «♡» stanno SEMPRE sulla stessa riga: il primo e il secondo portano
     il testo, il terzo è il preferito della voce selezionata.
     Con .has-examples la riga non manda a capo: ogni comando tiene la sua misura. */
  .session-actions.has-examples { display: flex; flex-wrap: nowrap; align-items: stretch; }
  .session-actions.has-examples > * { min-width: 0; }
  .session-actions.has-examples #btnSessFav,
  .session-actions.has-examples #btnRadReview { flex: none; display: inline-flex; align-items: center; justify-content: center; padding-left: .7rem; padding-right: .7rem; }
  .sess-ico { display: inline-block; font-size: 1.02rem; line-height: 1;
    filter: hue-rotate(-100deg) saturate(1.1) brightness(1.02); }
  /* «Ripassa» condivide il verde fra sessioni e calendario. */
  .session-actions .sess-review, .cal-day-go { color: #15803d; border-color: rgba(21,128,61,0.42); background: rgba(21,128,61,0.07); }
  @media (hover: hover) {
    .session-actions .sess-review:hover, .cal-day-go:hover { border-color: #15803d; color: #14532d; background: rgba(21,128,61,0.14); }
  }
  .session-actions .sess-review.on,
  .session-actions .sess-review[aria-pressed="true"], .cal-day-go:active { border-color: var(--ok); background: rgba(21,128,61,0.18); color: #14532d; font-weight: 800; }
  /* ============ Blocco «Esempi» (Vocaboli) ============
     La linguetta è il primo comando della riga; tirandola giù, Fuffy lista 3 frasi brevi
     che usano l'elemento selezionato in modi diversi. Tutte le frasi sono visibili;
     il globo nel riquadro mostra o nasconde pinyin e traduzione per tutte le frasi. */
  .sess-examples { display: flex; margin: 0; align-items: stretch; gap: .35rem; }
  .sess-examples[hidden] { display: none; }
  .vex-tab { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; cursor: pointer;
    background: var(--surface-raised); border: 1.5px solid var(--rule-2); border-radius: .65rem;
    padding: .5rem .7rem; font: 700 .82rem 'Inter', sans-serif; color: var(--ink); white-space: nowrap;
    transition: border-color .15s ease, color .15s ease; }
  .vex-tab:hover { border-color: var(--gold); }
  .vex-tab .vex-car { display: inline-block; font-size: .72rem; color: rgba(0,0,0,.5); transition: transform .18s ease; }
  .sess-examples.open .vex-tab { color: #7f1414; border-color: var(--accent); }
  .sess-examples.open .vex-tab .vex-car { transform: rotate(90deg); color: #7f1414; }
  .vex-trans-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; min-width: 2.25rem; height: 100%; min-height: 2.25rem; padding: 0;
    cursor: pointer; background: var(--surface-raised); border: 1.5px solid var(--rule-2);
    border-radius: .65rem; color: var(--ink);
    transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
  }
  .vex-trans-btn:hover { border-color: var(--gold); color: var(--gold-ink); }
  .vex-trans-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .vex-trans-btn.on,
  .vex-trans-btn[aria-pressed="true"] {
    background: rgba(180, 83, 9, 0.12);
    border-color: var(--gold);
    color: var(--gold-ink);
  }
  .vex-trans-btn:active { transform: scale(0.94); }
  .vex-trans-svg {
    width: 1.25rem; height: 1.25rem; display: block; pointer-events: none;
    transition: transform .28s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .vex-trans-btn.on .vex-trans-svg {
    transform: rotate(180deg);
  }
  /* Apertura morbida del pannello; nei Vocaboli le tre frasi stanno in elenco. */
  .vex-panel { display: grid; width: 100%; max-width: 32rem; margin-inline: auto;
    grid-template-rows: 0fr; margin-top: 0; opacity: 0; overflow: hidden;
    transition: grid-template-rows .24s ease, margin-top .24s ease, opacity .2s ease; }
  .vex-panel.open { grid-template-rows: 1fr; margin-top: .45rem; opacity: 1; overflow: visible; }
  .vex-panel[hidden] { display: none; }
  .vex-body { min-height: 0; overflow: hidden; border-radius: .9rem;
    background: var(--surface-raised); transition: box-shadow .24s ease; }
  .vex-panel.open .vex-body { box-shadow: 0 6px 20px rgba(38, 27, 17, .1), 0 2px 5px rgba(38, 27, 17, .05); }
  .vex-surface { min-height: 0; overflow: hidden; border: 1px solid #e0e7e2; border-radius: .9rem;
    background: var(--surface-raised); transition: box-shadow .24s ease; }
  .vex-panel.open .vex-surface { box-shadow: 0 6px 20px rgba(38,27,17,.1), 0 2px 5px rgba(38,27,17,.05); }
  .vex-surface > .vex-body { border: 0; border-radius: 0; background: transparent; }
  .vex-panel.open .vex-surface > .vex-body { box-shadow: none; }
  .vex-toolbar { display: none; }
  .vex-toolbar .vex-trans-btn { width: 44px; min-width: 44px; height: 44px; min-height: 44px;
    padding: 0; border-color: transparent; }
  .vex-toolbar .vex-trans-svg { flex: none; }
  .vex-body > .ex-item { min-height: 48px; padding: .45rem 3.25rem .45rem .85rem; border: 0; }
  #vexBody > .ex-item + .ex-item { border-top: 1px solid rgba(0, 0, 0, 0.08); }
  .vex-body > .ex-item[hidden] { display: none; }
  .vex-body > .ex-item > .ex-trans-btn,
  .ex-trans-btn {
    position: absolute; top: .25rem; right: .35rem; width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; padding: 0; cursor: pointer;
    color: var(--ink); border-radius: 50%; opacity: .28;
    transition: opacity .15s ease, background .15s ease, color .15s ease, transform .12s ease;
  }
  @media (hover: hover) {
    .vex-body > .ex-item > .ex-trans-btn:hover,
    .ex-trans-btn:hover {
      opacity: .65; color: var(--ink); background: transparent;
    }
  }
  .vex-body > .ex-item > .ex-trans-btn:focus-visible,
  .ex-trans-btn:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.25); outline-offset: 2px;
  }
  .vex-body > .ex-item > .ex-trans-btn:active,
  .ex-trans-btn:active {
    transform: scale(0.92);
  }
  .vex-body > .ex-item > .ex-trans-btn.on,
  .vex-body > .ex-item > .ex-trans-btn[aria-pressed="true"],
  .ex-trans-btn.on,
  .ex-trans-btn[aria-pressed="true"] {
    opacity: 1; color: var(--ink); background: transparent; border-color: transparent;
  }
  @media (hover: hover) {
    .vex-body > .ex-item > .ex-trans-btn.on:hover,
    .vex-body > .ex-item > .ex-trans-btn[aria-pressed="true"]:hover,
    .ex-trans-btn.on:hover,
    .ex-trans-btn[aria-pressed="true"]:hover {
      opacity: 1; color: var(--ink); background: transparent;
    }
  }
  .vex-body > .ex-item > .ex-trans-btn .vex-trans-svg,
  .ex-trans-btn .vex-trans-svg {
    width: 22px; height: 22px; flex: none;
  }
  .ex-detail-content { padding-top: .2rem; }
  .ex-detail-content .ex-py, .ex-detail-content .ex-it { line-height: 1.55; overflow-wrap: anywhere; }
  .vex-body > .vex-state { padding: 1rem; }
  .vex-nav { display: flex; align-items: center; justify-content: center; gap: .8rem; padding: 0 .8rem .75rem; }
  .vex-count { font: 500 .7rem 'Inter', sans-serif; color: var(--fg-60); font-variant-numeric: tabular-nums; }
  .vex-nav button { display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
    border: 1px solid var(--rule-2); border-radius: 50%; background: transparent;
    color: var(--ink); font-size: 1rem; cursor: pointer; transition: background .15s ease; }
  .vex-nav button:hover { background: var(--paper); }
  .vex-nav button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .vex-body > .ex-item.vex-enter { animation: vex-enter .2s ease both; }
  @keyframes vex-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) {
    .vex-panel { transition: none; transition-duration: 0s !important; }
    .vex-trans-svg { transition: none; }
    .vex-body > .ex-item.vex-enter { animation: none; }
  }
  /* Spazio a destra per il pulsante traduzione (position:relative serve all'ancoraggio). */
  .ex-item { padding: .34rem 1.5rem .34rem 0; position: relative; }
  .ex-item + .ex-item { border-top: 1px solid rgba(0, 0, 0, 0.08); }
  .ex-zh { font-family: var(--font-hanzi); font-size: 1.02rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
  .ex-tok { display: inline-block; cursor: pointer; padding: 0 .04em; border-radius: .22rem; transition: background .15s ease, color .15s ease; -webkit-tap-highlight-color: transparent; }
  .ex-tok:hover { background: rgba(212,160,23,0.18); }
  .ex-tok:active, .ex-tok.active { background: rgba(212,160,23,0.34); color: var(--ink); }
  .ex-py { font: 600 .74rem 'Inter', sans-serif; color: var(--gold-ink); margin-top: .06rem; }
  .ex-it { font: 400 .78rem/1.4 'Inter', sans-serif; color: rgba(0,0,0,.6); margin-top: .06rem; }
  .vex-state { font: 500 .8rem 'Inter', sans-serif; color: var(--fg-60); padding: .3rem 0; }

  /* ============ Modale «livello sbloccato» (festeggiamento) ============ */
  .lvlup-backdrop {
    position: fixed; inset: 0; z-index: 9998;
    display: grid; place-items: center;
    padding: clamp(.8rem, 4vw, 2rem);
    background: rgba(12,8,5,.66);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity .18s ease;
  }
  .lvlup-backdrop[hidden] { display: none; }
  .lvlup-backdrop.open { opacity: 1; pointer-events: auto; }
  .lvlup-card {
    width: min(29rem, 100%); max-height: min(84vh, 40rem); overflow: auto;
    background: var(--paper); border: 1px solid var(--gold); border-radius: 1.2rem;
    padding: 1.35rem 1.25rem 1.2rem; text-align: center; color: var(--ink);
    box-shadow: 0 26px 60px rgba(0,0,0,.55);
    transform: translateY(12px) scale(.96); transition: transform .22s cubic-bezier(.2,.9,.3,1.15);
  }
  .lvlup-backdrop.open .lvlup-card { transform: none; }
  .lvlup-trophy { font-size: 2.7rem; line-height: 1; }
  .lvlup-eyebrow { margin: .55rem 0 0; font: 700 .66rem 'Inter', sans-serif; letter-spacing: .13em; text-transform: uppercase; color: #7f1414; }
  .lvlup-title { margin: .12rem 0 0; font: 700 1.3rem/1.25 'Inter', sans-serif; color: var(--ink); }
  .lvlup-text { margin: .6rem 0 0; font: 500 .85rem/1.6 'Inter', sans-serif; color: rgba(0,0,0,.66); }
  .lvlup-next {
    margin: .7rem 0 0; font: 600 .79rem/1.5 'Inter', sans-serif; color: #7f5f00; text-align: center;
    background: rgba(212,160,23,.14); border: 1px solid var(--rule-2); border-radius: .7rem; padding: .5rem .6rem;
  }
  .lvlup-text b, .lvlup-next b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
  .lvlup-btn {
    display: block; width: 100%; margin-top: .9rem; min-height: 2.9rem;
    border: 0; border-radius: .8rem; background: var(--gold); color: var(--ink);
    font: 700 .95rem 'Inter', sans-serif; cursor:pointer;
  }
  .lvlup-btn b, .lvlup-btn strong { font-weight: 800; letter-spacing: 0.03em; }
  .lvlup-btn:hover { filter: brightness(1.06); }
  .lvlup-ghost {
    display: block; width: 100%; margin-top: .45rem; min-height: 2.6rem;
    border: 1px solid rgba(26,20,16,.18); border-radius: .8rem; background: transparent;
    color: rgba(0,0,0,.6); font: 600 .8rem 'Inter', sans-serif; cursor:pointer;
  }
  .lvlup-ghost:hover { border-color: var(--gold); color: var(--ink); }
  @keyframes lvlup-pop {
    0% { transform: scale(.5) rotate(-10deg); opacity: 0; }
    62% { transform: scale(1.16) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
  }
  .lvlup-backdrop.open .lvlup-trophy { animation: lvlup-pop .55s ease both; }
  @media (max-width: 520px) {
    .lvlup-backdrop { place-items: end center; }
    .lvlup-card { border-radius: 1.1rem 1.1rem .8rem .8rem; padding: 1.15rem 1rem 1rem; }
    .lvlup-trophy { font-size: 2.35rem; }
  }
  @media (hover: none) and (pointer: coarse) {
    .lvlup-btn, .lvlup-ghost { min-height: 3.1rem; }
  }
  body.lvlup-open { overflow: hidden; }

  /* ============ Calendario studio ============ */
  .session-cal { background: rgba(253,250,243,0.5); border: 1px solid var(--rule); border-radius: .9rem; padding: .75rem .8rem; }
  .cal-tab { display: none !important; }

  /* ============ Modale Calendario Studio Elegante ============ */
  .cal-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: grid;
    place-items: center;
    padding: clamp(0.75rem, 3vw, 1.5rem);
    background: rgba(18, 14, 10, 0.45);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    backdrop-filter: blur(8px) saturate(180%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .cal-modal-backdrop[hidden] {
    display: none !important;
  }
  .cal-modal-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .cal-modal-card.session-cal {
    width: min(460px, 100%);
    max-height: min(88vh, 720px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--paper);
    border: 1.5px solid var(--gold);
    border-radius: 1.25rem;
    padding: .8rem .9rem .9rem;
    color: var(--ink);
    box-shadow:
      0 26px 60px -12px rgba(18, 14, 10, 0.5),
      0 8px 24px -4px rgba(212, 160, 23, 0.2),
      0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    transform: translateY(16px) scale(0.94);
    opacity: 0;
    transition:
      transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .cal-modal-backdrop.open .cal-modal-card.session-cal {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  .cal-modal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .45rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--rule);
  }
  .cal-modal-heading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }
  .cal-modal-badge {
    font-size: 1.2rem;
    line-height: 1;
  }
  .cal-modal-title {
    margin: 0;
    font: 700 1.05rem 'Inter', sans-serif;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .cal-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 50%;
    border: 1px solid var(--rule-2);
    background: var(--surface-raised);
    color: var(--fg-60);
    font: 500 0.9rem/1 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .cal-modal-close:hover {
    background: rgba(212, 160, 23, 0.18);
    border-color: var(--gold);
    color: var(--ink);
    transform: scale(1.05);
  }
  .cal-modal-close:active {
    transform: scale(0.95);
  }
  .cal-modal-top-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  @media (max-width: 520px) {
    .cal-modal-backdrop {
      place-items: end center;
      padding: 0;
    }
    .cal-modal-card.session-cal {
      width: 100%;
      max-height: 84vh;
      border-radius: 1.35rem 1.35rem 0 0;
      border-bottom: 0;
      padding: .65rem .75rem calc(.75rem + env(safe-area-inset-bottom, 0px));
      transform: translateY(100%);
    }
    .cal-modal-backdrop.open .cal-modal-card.session-cal {
      transform: translateY(0);
    }
  }
  body.cal-modal-open {
    overflow: hidden;
  }
  .cal-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .45rem; }
  .cal-head span { font: 700 .85rem 'Inter', sans-serif; color: var(--ink); text-transform: capitalize; }
  .cal-nav { width: 1.7rem; height: 1.7rem; border-radius: .45rem; border: 1px solid var(--rule-2); background: transparent; color: var(--ink); font-size: 1rem; cursor: pointer; line-height: 1; }
  .cal-nav:hover { background: rgba(212,160,23,0.15); }
  .cal-modes { display: flex; gap: .35rem; margin-bottom: .5rem; }
  .cal-mode-btn { flex: 1; border: 1px solid var(--rule-2); background: transparent; border-radius: .5rem; padding: .28rem .4rem; font: 600 .72rem 'Inter', sans-serif; color: var(--ink); cursor: pointer; }
  .cal-mode-btn.active { background: var(--gold); color: var(--ink); border-color: var(--gold); }
  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .cal-dow { font: 600 .62rem 'Inter', sans-serif; color: rgba(0,0,0,0.4); text-align: center; padding: .15rem 0; }
  .cal-cell {
    position: relative; min-height: 2rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    border-radius: .4rem; font: 600 .74rem 'Inter', sans-serif; color: var(--ink);
    cursor: default;
  }
  .cal-cell.blank { visibility: hidden; }
  .cal-cell.today { border: 1px solid var(--gold); }
  .cal-cell.has-act { background: rgba(212,160,23,0.2); cursor: pointer; }
  .cal-cell.has-act:hover { background: rgba(212,160,23,0.38); }
  .cal-dot { font: 700 .58rem 'Inter', sans-serif; color: #7f1414; }
  /* Riquadro del giorno: sta dentro .session-cal, sotto la griglia (niente tooltip mobile) */
  .cal-cell.sel, .cal-cell.sel:hover { background: var(--gold); color: var(--ink); font-weight: 700; }
  .cal-day { margin-top: .4rem; padding: .2rem .5rem .4rem; border: 1px solid var(--rule-2); border-radius: .65rem; background: rgba(253,250,243,0.75); }
  .cal-day-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
  .cal-day-date { font: 700 .78rem 'Inter', sans-serif; color: #7f5f00; }
  .cal-day-x { flex: none; width: 44px; height: 44px; border: 0; border-radius: .45rem; background: transparent; color: rgba(0,0,0,0.45); font: 400 .9rem 'Inter', sans-serif; line-height: 1; cursor: pointer; }
  .cal-day-x:hover { background: rgba(212,160,23,0.22); color: var(--ink); }
  .cal-day-row { display: flex; align-items: center; gap: .35rem; margin: 0 0 .1rem; font: 600 .72rem 'Inter', sans-serif; color: rgba(0,0,0,0.6); }
  .cal-day-row b { display: inline-flex; align-items: center; gap: .26rem; }
  .cal-day-row { flex-wrap: wrap; }
  .cal-day-row b { flex: 1 1 7rem; min-width: 0; }
  .cal-day-category + .cal-day-category { margin-top: .35rem; padding-top: .3rem; border-top: 1px solid var(--rule-2); }
  .cal-day-items { flex: 1 1 100%; min-width: 0; }
  .cal-day-lessons { margin: .2rem 0 0; padding-left: 1.1rem; font: 400 .78rem/1.5 var(--font-ui); overflow-wrap: anywhere; }
  .cal-day-lessons li { margin: .15rem 0; }
  .cal-day-lessons small { display: block; color: var(--fg-60); }
  /* Pallino di tipo: 字 = oro (progresso), 词 = rosso scuro derivato dal seed primario. */
  .cal-bd { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.2rem; height: 1.2rem; border-radius: 50%; font: 600 .72rem/1 var(--font-hanzi); }
  .cal-bd-zi { background: var(--gold); color: var(--ink); }
  .cal-bd-ci { background: var(--primary-ink); color: var(--paper); }
  .cal-day-items { font-family: var(--font-hanzi); font-size: .95rem; line-height: 1.5; font-weight: 400; color: var(--ink); word-break: break-word; }
  .cal-day-items em { font-family: 'Inter', sans-serif; font-style: normal; font-size: .7rem; color: rgba(0,0,0,0.45); }
  .cal-day-items .cal-sep { font-family: 'Inter', sans-serif; font-size: .78rem; color: rgba(0,0,0,0.32); margin: 0 .26rem; }
  .cal-day-go { flex: 0 0 auto; margin-left: auto; padding: .45rem .6rem; font: 700 .76rem 'Inter', sans-serif; cursor: pointer; }
  .cal-reading-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; padding: .6rem; border-bottom: 1px solid var(--rule-2); font: 600 .78rem var(--font-ui); }
  .cal-reading-bar[hidden] { display: none; }
  .cal-reading-bar > span { flex: 1 1 8rem; }
  .cal-reading-bar button { min-width: 2.75rem; min-height: 2.75rem; cursor: pointer; }
  .cal-reading-review #snipNavPrev, .cal-reading-review #snipNavNext,
  .cal-reading-review [data-subject-action="prev"], .cal-reading-review [data-subject-action="next"] { display: none; }
  .counter-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 2rem;
    font-size: 0.85rem;
    color: rgba(253,250,243,0.9);
    transition: all 0.2s ease;
    cursor: default;
    position: relative;
  }
  .counter-pill:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.25); }
  .counter-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .dot-unknown { background: var(--state-unknown); box-shadow: 0 0 8px color-mix(in oklab, var(--seed-primary) 50%, transparent); }
  .dot-review { background: var(--state-review); box-shadow: 0 0 8px color-mix(in oklab, var(--seed-primary) 26%, transparent); }
  .dot-mastered { background: var(--ok); box-shadow: 0 0 8px color-mix(in oklab, var(--ok) 45%, transparent); }
  .counter-number {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 1.2rem;
    text-align: right;
  }
  .counter-label { color: rgba(253,250,243,0.7); font-size: 0.75rem; }
  .counter-pill.bump { animation: bump 0.3s ease; }
  @keyframes bump { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
  .counter-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: var(--paper);
    padding: 0.4rem 0.7rem;
    border-radius: 0.4rem;
    font-size: 0.7rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    border: 1px solid var(--rule);
    z-index: 20;
  }
  .counter-pill:hover .counter-tooltip { opacity: 1; }
  
  .sidebar {
    --hist-bg: var(--surface);
    --hist-surface: var(--surface-raised);
    --hist-line: var(--rule);
    --hist-fg: var(--fg);
    --hist-muted: var(--fg-70);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; right: 0;
    width: 420px; max-width: 100%;
    height: 100vh;
    height: 100dvh;
    background: var(--hist-bg);
    color: var(--hist-fg);
    box-shadow: -12px 0 40px rgba(25,44,36,.12);
    transform: translateX(calc(100% + 20px));
    transition: transform 0.3s ease;
    z-index: 1000;
    overflow: hidden;
    border-left: 1px solid var(--hist-line);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-header {
    flex: none;
    padding: max(1rem, env(safe-area-inset-top)) 1rem 1rem;
    border-bottom: 1px solid var(--hist-line);
    background: var(--hist-surface);
  }
  .sidebar-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
  .sidebar-heading h2 { margin: 0; font: 650 1.4rem/1.25 var(--font-ui); letter-spacing: -.025em; color: var(--hist-fg); }
  .sidebar-subtitle { margin: .3rem 0 0; color: var(--hist-muted); font-size: .8rem; line-height: 1.5; }
  #btnCloseSidebar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 12px; }
  .sidebar-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .sidebar-cal-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.68rem;
    border-radius: 999px;
    border: 1px solid var(--hist-line);
    background: var(--hist-surface);
    color: var(--hist-fg);
    font: 600 0.8rem/1 var(--font-ui, sans-serif);
    cursor: pointer;
    transition: all 0.18s ease;
    user-select: none;
    white-space: nowrap;
  }
  .sidebar-cal-pill-btn:hover {
    border-color: var(--ui-active-line, var(--gold));
    background: color-mix(in oklab, var(--hist-surface) 60%, var(--ui-active-tint, #fff));
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  .sidebar-cal-pill-btn:active {
    transform: scale(0.97);
  }
  .sidebar-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--hist-line) var(--hist-bg);
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    scroll-padding-top: 1rem;
  }
  .history-item {
    margin: .5rem 1rem;
    padding: .9rem;
    background: var(--hist-surface);
    border: 1px solid var(--hist-line);
    border-radius: 12px;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
  }
  .history-item:hover { background: color-mix(in oklab, var(--hist-surface) 55%, var(--ui-active-tint)); border-color: var(--ui-active-line); }
  .history-item .flex-1 { min-width: 0; }
  .history-load { display: block; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
  .history-load .history-date { display: block; }
  .history-title {
    font-weight: 600;
    color: var(--hist-fg);
    font-size: .95rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    margin-bottom: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .history-date { font-size: 0.75rem; line-height: 1.6; color: var(--hist-muted); }
  .history-delete {
    background: transparent;
    border: none;
    color: var(--fg-60);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    flex: none;
    padding: 0.25rem 0.5rem;
    border-radius: .65rem;
    transition: all 0.2s;
  }
  .history-delete:hover { color: var(--primary-ink); background: var(--primary-tint); }
  .hist-section-title {
    padding: 1rem 1rem .4rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--hist-muted);
  }
  .hist-empty { padding: .75rem 1rem 1.25rem; font-size: .8rem; line-height: 1.5; color: var(--hist-muted); }
  .sidebar-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; margin-top: 1rem; padding: .25rem; background: var(--hist-bg); border: 1px solid var(--hist-line); border-radius: 14px; }
  .sidebar-tab { min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .25rem; padding: .5rem .25rem; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--hist-muted); font: 600 .8rem/1.2 var(--font-ui); white-space: nowrap; cursor: pointer; transition: background .2s ease, color .2s ease; touch-action: manipulation; }
  .sidebar-tab:hover { background: var(--ui-active-tint); color: var(--ui-active-deep); }
  .sidebar-tab.active { background: var(--ui-active); color: #fff; border-color: var(--ui-active); }
  .sidebar :is(button, summary, [role=button], .hr-import-label):focus-visible { outline: 2px solid var(--ui-active); outline-offset: 2px; }
  .fav-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem; border-radius: 999px; background: var(--ui-active-tint); color: var(--ui-active-deep); font-size: .65rem; font-weight: 700; line-height: 1; }
  .fav-count-badge[hidden] { display: none; }
  .fav-item { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .5rem 1rem; padding: .9rem; border: 1px solid var(--hist-line); border-radius: 12px; background: var(--hist-surface); transition: background .2s ease; }
  .fav-item:hover { background: color-mix(in oklab, var(--hist-surface) 55%, var(--ui-active-tint)); border-color: var(--ui-active-line); }
  .fav-item-main { flex: 1; min-width: 0; cursor: pointer; }
  .fav-head { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; margin-bottom: .25rem; }
  .fav-term { font-size: 1.4rem; font-weight: 700; color: var(--ui-active-deep); line-height: 1.2; }
  .fav-py { font-size: .88rem; color: var(--hist-fg); font-weight: 500; }
  .fav-kind-badge { font-size: .68rem; padding: .1rem .4rem; border-radius: .35rem; background: var(--ui-active-tint); color: var(--ui-active-deep); font-weight: 600; }
  .fav-desc { font-size: .8rem; color: var(--hist-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .fav-date { font-size: .7rem; color: var(--hist-muted); margin-top: .35rem; }
  .fav-actions { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
  .fav-act-btn { background: transparent; border: 1px solid var(--hist-line); border-radius: .65rem; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: .88rem; cursor: pointer; color: var(--hist-fg); transition: all .2s ease; }
  .fav-act-btn:hover { background: var(--ui-active-tint); border-color: var(--ui-active-line); }
  .fav-del-btn:hover { color: var(--primary-ink); background: var(--primary-tint); border-color: var(--seed-primary); }
  .fav-empty-state { padding: 3rem 1.5rem; text-align: center; }
  .fav-empty-icon { font-size: 2.2rem; margin-bottom: .75rem; opacity: .85; }
  .fav-empty-title { font-size: 1rem; font-weight: 600; color: var(--hist-fg); margin-bottom: .4rem; }
  .fav-empty-hint { font-size: .8rem; color: var(--hist-muted); line-height: 1.5; max-width: 280px; margin: 0 auto; }
  .study-header .btn-study-fav.active { color: #e11d48; }
  .overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 999;
  }
  .overlay.active { opacity: 1; pointer-events: all; }
  
  .legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.75rem;
    font-size: 0.75rem;
    color: rgba(253,250,243,0.7);
    align-items: center;
  }
  .legend-item { display: flex; align-items: center; gap: 0.4rem; }
  .legend-swatch {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 3px;
    font-weight: 600;
    text-align: center;
    line-height: 14px;
    font-family: var(--font-hanzi);
  }
  .swatch-normal { background: rgba(253,250,243,0.1); color: var(--paper); border: 1px solid rgba(255,255,255,0.2); }
  .swatch-unknown { background: var(--state-unknown); color: white; }
  .swatch-review { background: var(--state-review); color: white; }
  .reset-link {
    font-size: 0.7rem;
    color: rgba(253,250,243,0.4);
    margin-left: auto;
    cursor: pointer;
    transition: color 0.2s;
    border: none;
    background: none;
    padding: 0;
  }
  .reset-link:hover { color: #fca5a5; }

  /* ============ Pannello di studio (colonna destra) ============ */
  .study-panel {
    background: linear-gradient(135deg, var(--ink) 0%, var(--desk) 100%);
    border: 1px solid var(--rule);
    box-shadow: 0 15px 40px rgba(0,0,0,0.45);
    color: var(--paper);
    border-radius: 1rem;
    overflow: hidden;
  }
  .study-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--rule);
    background: rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .study-header h2 { font-size: 1.05rem; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 0.5rem; }
  .study-body { padding: 1.25rem; }
  .study-empty { text-align: center; color: rgba(253,250,243,0.5); padding: 2.5rem 1rem; font-style: italic; }
  .study-empty .big { font-size: 3rem; opacity: 0.3; margin-bottom: 0.75rem; }

  .study-title { font-family: var(--font-hanzi); font-size: 2.6rem; font-weight: 600; color: #fff; text-align: center; line-height: 1.2; letter-spacing: 0.05em; }
  .study-py { text-align: center; color: var(--gold); font-weight: 600; font-size: 1rem; margin-top: 0.2rem; }
  #studyMeaning { text-align: center; }
  .study-ruby-wrap {
    display: inline-grid;
    grid-template-columns: repeat(var(--n, 1), auto);
    row-gap: 0.2rem;
    column-gap: 0.5rem;
    justify-items: center;
    margin: 0 auto;
  }
  .study-ruby-wrap > .study-title {
    display: flex;
    justify-content: space-around;
    width: auto;
    line-height: 1.2;
    letter-spacing: 0.05em;
  }
  .study-ruby-wrap > .study-py {
    display: flex;
    justify-content: space-around;
    width: auto;
    margin-top: 0.2rem;
  }
  .study-ruby-wrap .study-char {
    display: inline-block;
    text-align: center;
  }
  .study-ruby-wrap .study-syl {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
  }
  @supports (grid-template-columns: subgrid) {
    .study-ruby-wrap > .study-title {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
      justify-items: center;
      align-items: baseline;
      width: auto;
    }
    .study-ruby-wrap > .study-py {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
      justify-items: center;
      width: auto;
    }
    .study-ruby-wrap .study-char,
    .study-ruby-wrap .study-syl {
      flex: none;
      padding-inline: 0.05em;
    }
  }
  .study-desc { text-align: center; color: rgba(253,250,243,0.85); font-size: 0.82rem; line-height: 1.45; margin-top: 0.5rem; }

  .writers { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 1.1rem 0 0.75rem; }
  .writer-box {
    width: 118px; height: 118px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    background-color: var(--paper);
    background-image:
      linear-gradient(to right, transparent calc(50% - 0.5px), rgba(185,28,28,0.28) calc(50% - 0.5px), rgba(185,28,28,0.28) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
      linear-gradient(to bottom, transparent calc(50% - 0.5px), rgba(185,28,28,0.28) calc(50% - 0.5px), rgba(185,28,28,0.28) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
      linear-gradient(45deg, transparent calc(50% - 0.4px), rgba(185,28,28,0.14) calc(50% - 0.4px), rgba(185,28,28,0.14) calc(50% + 0.4px), transparent calc(50% + 0.4px)),
      linear-gradient(-45deg, transparent calc(50% - 0.4px), rgba(185,28,28,0.14) calc(50% - 0.4px), rgba(185,28,28,0.14) calc(50% + 0.4px), transparent calc(50% + 0.4px));
    box-shadow: inset 0 0 0 2px rgba(185,28,28,0.35);
    display: flex; align-items: center; justify-content: center;
  }
  .writer-fallback { font-family: var(--font-hanzi); font-size: 4rem; color: var(--ink); opacity: 0.85; }

  .writer-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 0.4rem; }
  .ctl-btn {
    border: 1.5px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.04);
    color: var(--paper);
    padding: 0.45rem 0.9rem;
    border-radius: 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
  }
  .ctl-btn:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }
  .ctl-toggle { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: rgba(253,250,243,0.75); cursor: pointer; user-select: none; }

  .related { margin-top: 1.25rem; border-top: 1px dashed var(--rule); padding-top: 1rem; }
  .related h3 { font-size: 0.9rem; font-weight: 700; color: #fff; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.4rem; }
  .related-count { font-size: 0.7rem; color: rgba(253,250,243,0.5); font-weight: 400; margin-left: auto; }
  .related-list { max-height: 340px; overflow-y: auto; padding-right: 4px; }
  .related-list::-webkit-scrollbar { width: 6px; }
  .related-list::-webkit-scrollbar-thumb { background: rgba(212,160,23,0.4); border-radius: 3px; }
  .related-item {
    display: block; width: 100%; text-align: left;
    padding: 0.55rem 0.75rem; margin-bottom: 0.5rem;
    border-radius: 0.6rem;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    cursor: pointer;
    transition: all 0.18s ease;
  }
  .related-item:hover { border-color: var(--gold); background: rgba(212,160,23,0.12); transform: translateX(3px); }
  .related-word { font-family: var(--font-hanzi); font-size: 1.15rem; color: #fff; }
  .related-py { color: var(--gold); font-size: 0.72rem; margin-left: 0.4rem; }
  .related-desc {
    color: rgba(253,250,243,0.65); font-size: 0.72rem; line-height: 1.35; margin-top: 0.15rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .related-none { color: rgba(253,250,243,0.45); font-size: 0.8rem; font-style: italic; padding: 0.5rem 0; }
  .related-more {
    display: block; width: 100%;
    padding: 0.5rem; margin-bottom: 0.5rem;
    border-radius: 0.6rem;
    border: 1px dashed var(--rule-2);
    background: transparent;
    color: var(--gold);
    font-size: 0.78rem; font-weight: 600;
    cursor: pointer; text-align: center;
    font-family: 'Inter', sans-serif;
    transition: all 0.18s ease;
  }
  .related-more:hover { background: rgba(212,160,23,0.12); }
  .rel-in-text {
    font-size: 0.6rem; color: #86efac;
    border: 1px solid rgba(134,239,172,0.35);
    border-radius: 0.4rem; padding: 0 0.3rem;
    margin-left: 0.4rem; vertical-align: middle;
    font-family: 'Inter', sans-serif;
  }

  /* ============ Layout: tablet verticali e telefoni (1 colonna) ============ */
  .app-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .app-main { min-width: 0; }
  /* Le tooltip sono assolute e invisibili, ma su schermi stretti allargherebbero il documento.
     `clip` (non `hidden`) non crea un contenitore di scroll, quindi lo sticky del pannello regge. */
  .app-shell {
    overflow-x: clip;
    max-width: 100%;
    width: 100%;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    /* --pad-x misura il respiro laterale del foglio su tutta la larghezza */
    --pad-x: clamp(1rem, 2.5vw, 2.5rem);
    padding: 0 var(--pad-x) clamp(6rem, 9vw, 8rem);
    box-shadow: none;
    position: relative;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
  }
  /* Nessun filetto a squadrare l'app a tutto schermo */
  .app-shell::before {
    display: none;
  }

  /* Sotto i 768px il tap apre già il pannello studio: il popup inline sarebbe solo rumore */
  @media (max-width: 767px) {
    .hanzi .tooltip, .counter-pill .counter-tooltip { display: none; }
  }

  /* Il pannello studio diventa un foglio che sale dal basso */
  .study-col {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 950;
    max-height: 84vh; max-height: 84dvh;
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateY(105%);
    visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.32s;
    padding: 0 0.6rem calc(0.6rem + env(safe-area-inset-bottom));
  }
  .study-col.sheet-open { transform: none; visibility: visible; }
  .study-col .study-panel { border-radius: 0.9rem; }
  .study-col::-webkit-scrollbar { width: 8px; }
  .study-col::-webkit-scrollbar-thumb { background: rgba(212,160,23,0.35); border-radius: 4px; }
  .sheet-grab {
    display: block; width: 46px; height: 4px; border-radius: 2px;
    background: rgba(212,160,23,0.55); margin: 0.45rem auto 0;
  }
  .sheet-backdrop {
    position: fixed; inset: 0; z-index: 945;
    background: rgba(0,0,0,0.45);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .sheet-backdrop.active { opacity: 1; pointer-events: auto; }
  body.sheet-open { overflow: hidden; }   /* niente doppio scroll mentre il foglio è aperto */
  .btn-sheet-close { display: inline-flex; }

  /* Barra fissa in basso: dettaglio lettura (carattere · significato · composizione) + Fuffy */
  .study-dock {
    position: fixed; z-index: 940;
    left: 50%; transform: translateX(-50%);
    width: min(calc(100vw - 1.2rem), 680px);
    bottom: var(--floating-bar-bottom, calc(6.5rem + env(safe-area-inset-bottom)));
    display: none; flex-wrap: wrap; align-items: stretch; gap: 0.6rem;
    padding: .6rem .75rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--desk), var(--ink));
    border: 1px solid var(--gold);
    color: var(--paper);
    box-shadow: 0 12px 28px rgba(0,0,0,0.5);
    font-family: 'Inter', sans-serif;
  }
  .study-dock.visible { display: flex; }
  .dock-lead { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 2.1rem; }
  .dock-item { font-family: var(--font-hanzi); font-size: 1.3rem; font-weight: 600; color: #fff; line-height: 1.05; }
  .dock-py { font-size: 0.72rem; font-weight: 600; color: rgba(253,243,205,0.95); white-space: nowrap; }
  .dock-lead.dock-ruby {
    display: inline-grid;
    grid-template-columns: repeat(var(--n, 1), auto);
    justify-items: center;
    column-gap: 0.28rem;
  }
  .dock-lead.dock-ruby > .dock-item {
    display: flex;
    justify-content: space-around;
    width: auto;
    max-width: none;
    overflow: visible;
    white-space: normal;
  }
  .dock-lead.dock-ruby > .dock-py {
    display: flex;
    justify-content: space-around;
    width: auto;
    max-width: none;
    white-space: normal;
  }
  .dock-lead.dock-ruby .dock-char {
    display: inline-block;
    text-align: center;
  }
  .dock-lead.dock-ruby .dock-syl {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
  }
  @supports (grid-template-columns: subgrid) {
    .dock-lead.dock-ruby > .dock-item {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
      justify-items: center;
      align-items: baseline;
      width: auto;
    }
    .dock-lead.dock-ruby > .dock-py {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
      justify-items: center;
      width: auto;
    }
    .dock-lead.dock-ruby .dock-char,
    .dock-lead.dock-ruby .dock-syl {
      flex: none;
      padding-inline: 0.05em;
    }
  }
  .dock-sep { flex: none; width: 1px; align-self: stretch; background: linear-gradient(to bottom, rgba(212,160,23,0), rgba(212,160,23,0.7), rgba(212,160,23,0)); }
  .dock-mean { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
  .dock-chars { flex: none; max-width: 40%; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
  .dock-kicker { font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(253,250,243,0.6); font-weight: 700; }
  .dock-desc { font-size: 0.8rem; color: #fff; line-height: 1.35; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  /* Stessa cura della barra ✨: tetto alto (6rem = due righe scarse) e gesto che non scappa
     alla pagina. Qui la cornice è già larga (carattere, glossa, panda), la si trascina a mano
     nel delegato hrExplainFrameDrag. */
  .dock-explain { font-size: 0.74rem; color: #fff; line-height: 1.45; min-width: 0; max-height: min(9.5rem, 34vh); border-radius: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .dock-explain .ask-line { margin: 0 0 0.18rem; }
  .dock-explain .ask-h { margin: 0.3rem 0 0.12rem; font: 700 0.72rem 'Inter', sans-serif; color: #fff; }
  .dock-explain .ask-li { margin: 0 0 0.1rem; padding-left: 0.95rem; font-size: 0.72rem; }
  .dock-explain strong { color: #ffe9a8; }
  .dock-explain .ask-empty { color: rgba(253,250,243,0.85); font-style: normal; }
  .dock-charlist { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .dock-charlist .dc { display: flex; align-items: baseline; gap: 0.28rem; font-size: 0.72rem; min-width: 0; }
  .dock-charlist .dc b { font-family: var(--font-hanzi); font-size: 0.95rem; color: #fff; flex: none; }
  .dock-charlist .dc i { font-style: normal; color: rgba(253,243,205,0.92); font-size: 0.66rem; flex: none; }
  .dock-charlist .dc em { font-style: normal; color: rgba(253,250,243,0.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dock-panda { flex: none; align-self: center; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%; border: 1px solid var(--gold); background: rgba(253,250,243,0.14); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, transform .12s ease; }
  .dock-actions { flex: 1 0 100%; display: flex; align-items: center; gap: .45rem; padding-top: .45rem; border-top: 1px solid rgba(253,250,243,.2); }
  .dock-actions .dock-panda { order: 0; width: auto; min-height: 44px; height: 44px; padding: 0 .7rem; gap: .4rem; border-radius: .65rem; color: var(--paper); font: 600 .76rem var(--font-ui); }
  .dock-entity-action {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.2rem; font-size: 0.68rem; font-weight: 600;
    min-height: 28px; padding: 0.2rem 0.5rem;
    border-radius: 0.45rem; border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.08); color: rgba(253,250,243,0.92);
    cursor: pointer; margin-left: 0.4rem; vertical-align: middle;
    transition: background 0.15s ease, border-color 0.15s ease;
    user-select: none; -webkit-tap-highlight-color: transparent;
  }
  .dock-entity-action:hover {
    background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.36); color: #fff;
  }
  .dock-entity-action[data-entity-act="confirm"] {
    border-color: var(--gold); color: #ffe494; background: rgba(212,160,23,0.16);
  }
  .dock-entity-action[data-entity-act="split"] {
    border-color: rgba(224,108,117,0.35); color: #ff858d; background: rgba(224,108,117,0.1);
  }
  @media (pointer: coarse) {
    .dock-entity-action { min-height: 36px; padding: 0.3rem 0.6rem; }
  }
  .dock-panda:hover { background: rgba(253,250,243,0.26); }
  .dock-panda:active { transform: scale(0.94); }
  .dock-panda:focus-visible { outline: 2px dashed var(--paper); outline-offset: 2px; }
  .dock-panda img { width: 2.15rem; height: 2.15rem; object-fit: contain; border-radius: 50%; display: block; }
  /* spazio perché la barra non copra l'ultima riga di testo (solo sotto il desktop) */
  /* Il dock di lettura è alto quanto la barra ✨: lo stesso fiato, o l'ultima riga del testo
     resta nascosta sotto il nastro rosso. */
  @media (max-width: 1023px) { body.has-dock .app-main { padding-bottom: max(7.5rem, calc(34vh + var(--floating-bar-bottom, 8rem) + 2rem)); } }
  @media (max-width: 390px) { .dock-chars, .sep-chars { display: none; } }

  /* ============ Barra controllo audio fluttuante ============ */
  .hr-audio-bar {
    position: fixed;
    z-index: 9980;
    left: 50%;
    transform: translate(-50%, 18px) scale(0.96);
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s cubic-bezier(0.16, 1, 0.3, 1), transform .25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .hr-audio-bar.visible {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    pointer-events: auto;
  }
  .hr-audio-bar[hidden] {
    display: none !important;
  }
  .hr-audio-bar-inner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.42rem 0.5rem 0.42rem 0.95rem;
    background: color-mix(in oklab, var(--seed-desk) 90%, #000);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid color-mix(in oklab, var(--gold) 45%, transparent);
    border-radius: 999px;
    box-shadow: 0 16px 36px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06);
    color: var(--paper);
  }
  .hr-audio-status {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
  }
  .hr-audio-wave {
    display: inline-flex;
    align-items: center;
    gap: 2.5px;
    height: 16px;
    flex: none;
  }
  .hr-wave-bar {
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--gold);
    animation: hrWaveAnim 1.1s ease-in-out infinite alternate;
    transform-origin: bottom;
  }
  .hr-wave-bar:nth-child(1) { animation-delay: 0s; height: 10px; }
  .hr-wave-bar:nth-child(2) { animation-delay: 0.25s; height: 16px; }
  .hr-wave-bar:nth-child(3) { animation-delay: 0.5s; height: 12px; }
  .hr-wave-bar:nth-child(4) { animation-delay: 0.15s; height: 14px; }
  @keyframes hrWaveAnim {
    0% { transform: scaleY(0.25); opacity: 0.6; }
    100% { transform: scaleY(1); opacity: 1; }
  }
  .hr-audio-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--paper);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(45vw, 240px);
  }
  .hr-audio-stop-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.32rem 0.8rem;
    border-radius: 999px;
    border: 1.5px solid var(--seed-primary);
    background: #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(194, 43, 43, 0.28);
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
    flex: none;
  }
  .hr-audio-stop-pill:hover {
    background: color-mix(in oklab, var(--seed-primary) 8%, #ffffff);
    transform: scale(1.04);
    box-shadow: 0 3px 12px rgba(194, 43, 43, 0.35);
  }
  .hr-audio-stop-pill:active {
    transform: scale(0.96);
  }
  .hr-stop-text {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-ui);
    font-size: 11.5pt;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--seed-primary);
    line-height: 1;
  }
  .hr-stop-dot {
    width: 6.5px;
    height: 6.5px;
    border-radius: 50%;
    background: var(--seed-primary);
    display: inline-block;
    flex: none;
    animation: hrStopDotPulse 1.2s ease-in-out infinite alternate;
  }
  @keyframes hrStopDotPulse {
    0% { opacity: 0.45; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1.25); }
  }
  .hr-audio-bar {
    bottom: calc(var(--floating-bar-bottom, 6.5rem) + var(--floating-panel-height, 0px) + .5rem);
    max-width: calc(100vw - 1.2rem);
  }
  .rdg-ico.is-playing {
    min-width: 4.1rem !important;
    padding: 0 0.65rem !important;
    border-radius: 999px !important;
    background: color-mix(in oklab, var(--seed-primary) 8%, var(--surface-raised)) !important;
    border: 1.5px solid var(--seed-primary) !important;
    box-shadow: 0 2px 8px rgba(194, 43, 43, 0.2);
    animation: hrBtnPulse 1.8s infinite alternate ease-in-out;
  }
  .icon-btn.is-playing,
  .hr-explain-play.is-playing,
  [data-speak].is-playing,
  [data-sessspeak].is-playing,
  [data-radspeak].is-playing,
  [data-fav-speak].is-playing {
    width: auto !important;
    min-width: 3.6rem !important;
    padding: 0 0.55rem !important;
    border-radius: 999px !important;
    background: color-mix(in oklab, var(--seed-primary) 8%, #ffffff) !important;
    border: 1.5px solid var(--seed-primary) !important;
    box-shadow: 0 2px 8px rgba(194, 43, 43, 0.2);
    animation: hrBtnPulse 1.8s infinite alternate ease-in-out;
  }
  @keyframes hrBtnPulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
  }

  /* ============ Assistente "Spiega frase" (risposta solo in cinese) ============ */
  .ask-fab {
    position: fixed; z-index: 950;
    right: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom));
    padding: 0.65rem 1.05rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--desk), var(--ink));
    border: 1px solid var(--gold);
    color: var(--paper);
    font: 600 .85rem 'Inter', sans-serif;
    box-shadow: 0 12px 28px rgba(0,0,0,0.5);
    cursor: pointer;
  }
  .ask-fab:hover { filter: brightness(1.15); }
  .ask-fab:active { transform: scale(0.97); }
  /* con la barra di studio visibile il bottone sale sopra la barra */
  body.has-dock .ask-fab { bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  .ask-panel {
    position: fixed; z-index: 960;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 1.5rem));
    max-height: min(82vh, 680px);
    display: none; flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--gold);
    border-radius: 1.1rem;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    overflow: hidden;
  }
  .ask-panel.open { display: flex; }
  .ask-head {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .85rem 1.1rem;
    background: linear-gradient(135deg, var(--accent), #7f1414);
    border-bottom: 1px solid var(--gold);
    color: var(--paper);
  }
  .ask-head h2 { margin: 0; font-size: 1.05rem; font-weight: 700; font-family: 'Inter', sans-serif; }
  .ask-body { display: flex; flex-direction: column; gap: .7rem; padding: 1rem 1.1rem; overflow-y: auto; }
  .ask-body textarea {
    width: 100%; resize: none;
    background: var(--surface-raised);
    border: 1px solid var(--rule-2);
    border-radius: .75rem;
    padding: .7rem .9rem;
    font-size: 1.05rem; line-height: 1.6;
    font-family: var(--font-hanzi);
  }
  .ask-body textarea:focus { outline: 2px solid var(--accent); }
  .ask-actions { display: flex; gap: .5rem; row-gap: .45rem; align-items: center; flex-wrap: wrap; }
  .ask-hint { font-size: .72rem; color: rgba(0,0,0,0.5); }
  .ask-result {
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    border-radius: .75rem;
    padding: .85rem 1rem;
    font-size: 1.02rem; line-height: 1.9;
    font-family: var(--font-hanzi);
    min-height: 3.2rem;
    overflow-wrap: anywhere;
  }
  .ask-result .ask-line { margin: 0 0 .45rem; }
  .ask-result .ask-line:last-child { margin-bottom: 0; }
  .ask-result .ask-label {
    display: inline-block;
    margin-right: .45rem;
    padding: .05rem .5rem;
    border-radius: .45rem;
    background: rgba(212,160,23,0.18);
    border: 1px solid var(--rule-2);
    color: #7f1414;
    font-weight: 700; font-size: .85rem;
  }
  .ask-result strong { color: #7f1414; }
  .ask-result .ask-h { margin: .8rem 0 .35rem; font-family: 'Inter', sans-serif; font-weight: 700; color: #7f1414; line-height: 1.35; }
  .ask-result .ask-h:first-child { margin-top: 0; }
  .ask-result .ask-h1 { font-size: 1.08rem; }
  .ask-result .ask-h2 { font-size: .98rem; }
  .ask-result .ask-h3 { font-size: .9rem; }
  .ask-result .ask-li { position: relative; margin: 0 0 .35rem; padding-left: 1.05rem; }
  .ask-result .ask-li::before { content: '•'; position: absolute; left: .15rem; color: var(--gold); }
  .ask-result .ask-table { width: 100%; border-collapse: collapse; margin: .55rem 0 .75rem; font-family: 'Inter', sans-serif; font-size: .82rem; line-height: 1.5; overflow-wrap: anywhere; }
  .ask-result .ask-table th, .ask-result .ask-table td { border: 1px solid var(--rule); padding: .35rem .5rem; text-align: left; vertical-align: top; }
  .ask-result .ask-table th { background: rgba(212,160,23,0.14); color: #7f1414; font-weight: 700; }
  .ask-result .ask-table td:first-child { font-family: var(--font-hanzi); }
  /* Colonna pinyin = 2ª: tenerla su una riga così si allarga da sola; le altre assorbono lo spazio */
  .ask-result .ask-table th:nth-child(2), .ask-result .ask-table td:nth-child(2) { white-space: nowrap; overflow-wrap: normal; word-break: normal; }
  .ask-empty { margin: 0; color: rgba(0,0,0,0.45); font-style: italic; font-size: .9rem; font-family: 'Inter', sans-serif; }
  /* Tab Spiega / Genera */
  .ask-tabs { display: flex; gap: .4rem; }
  .ask-tab {
    flex: 1; padding: .5rem .6rem;
    border-radius: .7rem;
    border: 1px solid var(--rule-2);
    background: var(--surface-raised);
    color: rgba(0,0,0,0.65);
    font: 600 .85rem 'Inter', sans-serif;
    cursor: pointer;
  }
  .ask-tab:hover { border-color: var(--gold); }
  .ask-tab.active {
    background: linear-gradient(135deg, var(--accent), #7f1414);
    border-color: var(--accent);
    color: var(--paper);
  }
  /* Selettore lingua spiegazione (中文 / IT) */
  .ask-lang { display: inline-flex; border: 1px solid var(--rule-2); border-radius: .6rem; overflow: hidden; }
  .ask-lang-btn {
    padding: .45rem .75rem; border: 0;
    background: var(--surface-raised);
    color: rgba(0,0,0,0.6);
    font: 600 .8rem 'Inter', sans-serif;
    cursor: pointer;
  }
  .ask-lang-btn + .ask-lang-btn { border-left: 1px solid var(--rule-2); }
  .ask-lang-btn.active { background: rgba(212,160,23,0.22); color: #7f1414; }
  /* Selettore modalità risposta «Spiega»: leva PRO (a destra = verde = Dettagliata) */
  .mode-pro { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; min-height: var(--row-h); cursor: pointer; }
  .mode-pro:focus-visible { outline: 2px dashed var(--ink); outline-offset: 3px; border-radius: 999px; }
  .sw { position: relative; flex: none; width: 56px; height: 30px; border-radius: 999px; background: rgba(26,20,16,0.18); transition: background .22s ease; }
  .sw-txt { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; font: 700 .62rem var(--font-ui); letter-spacing: .06em; transition: opacity .18s ease; }
  .sw-txt.on { left: 8px; color: #fff; opacity: 0; }
  .sw-txt.off { right: 8px; color: var(--fg-60); opacity: 1; }
  .sw-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.35); transition: transform .26s cubic-bezier(.3,1.5,.5,1); }
  .mode-pro[aria-checked="true"] .sw { background: #34c759; }
  .mode-pro[aria-checked="true"] .sw-knob { transform: translateX(26px); }
  .mode-pro[aria-checked="true"] .sw-txt.on { opacity: 1; }
  .mode-pro[aria-checked="true"] .sw-txt.off { opacity: 0; }
  /* Campi modalità Genera */
  .gen-input {
    width: 100%; border: 1px solid var(--rule-2); border-radius: .6rem;
    padding: .6rem .8rem; font: 500 .95rem 'Inter', sans-serif; background: var(--surface-raised);
  }
  .gen-input:focus { outline: 2px solid var(--accent); }
  .gen-select {
    border: 1px solid var(--rule-2); border-radius: .6rem;
    padding: .5rem .6rem; font: 500 .85rem 'Inter', sans-serif; background: var(--surface-raised);
  }
  /* Risposta di Genera: testo cinese + pinyin + caricamento nel lettore */
  .ask-result .gen-text { white-space: pre-wrap; font-size: 1.08rem; }
  .ask-result .gen-pinyin { white-space: pre-wrap; color: rgba(0,0,0,0.55); font-size: .92rem; line-height: 1.7; }
  .ask-result .gen-load { margin-top: .55rem; }

  /* ============ Toggle "Modalità principiante" (pinyin) ============ */
  .btn-toggle {
    border: 1.5px solid var(--rule-2);
    background: rgba(255,255,255,0.05);
    color: var(--paper);
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: 'Inter', sans-serif;
  }
  .btn-toggle:hover { border-color: var(--gold); }
  .btn-toggle.active { background: var(--gold); border-color: var(--gold); color: var(--ink); font-weight: 700; }

  /* Pinyin sempre visibile, sotto ogni parola/carattere */
  .bop { display: none; }
  body.beginner .bop {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.58em;
    font-weight: 600;
    line-height: 1.12;
    margin-top: 0.1em;
    color: var(--gold-ink);
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
  }
  body.beginner .hanzi { vertical-align: top; }

  /* ============ Box "Genera" dentro l'area di analisi ============ */
  .gen-panel {
    margin-top: .9rem;
    padding: .8rem .95rem;
    border: 1px dashed var(--rule-2);
    border-radius: .8rem;
    background: rgba(255,255,255,0.04);
  }
  /* La testina è la linguetta: chiusa di default, si apre al tap. Il corpo (tema, lunghezza,
     Base/Expert, Genera) sta in .gen-panel-body, visibile solo con .open. */
  .gen-panel-head { display: flex; align-items: center; gap: .45rem; width: 100%; margin: 0; padding: 0;
    border: 0; background: none; cursor: pointer; text-align: left;
    font: 700 .8rem 'Inter', sans-serif; color: var(--gold); letter-spacing: .02em; }
  .gen-chev { margin-left: auto; font-size: .85rem; line-height: 1; color: var(--gold); transition: transform .15s ease; }
  .gen-panel.open .gen-chev { transform: rotate(180deg); }
  .gen-panel-body { margin-top: .55rem; }
  .gen-panel:not(.open) .gen-panel-body { display: none; }
  .gen-panel-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
  .gen-panel .gen-input { flex: 1 1 140px; min-width: 0; }
  /* Switch + «Genera» sono un blocco unico: o stanno sulla stessa linea o vanno a capo insieme */
  .gen-actions { display: flex; align-items: center; gap: .5rem; flex: none; }
  /* Base / Expert: lo switch del vocabolario che Fuffy può usare. Stessa carta e stesso
     bordo oro dei campi intorno, così si legge come parte della riga dei comandi. */
  .gen-mode { display: inline-flex; flex: none; overflow: hidden; background: var(--surface-raised);
    border: 1px solid var(--rule-2); border-radius: .6rem; }
  .gen-mode-btn { padding: .5rem .8rem; border: 0; background: var(--surface-raised); color: rgba(0,0,0,0.6);
    font: 600 .8rem 'Inter', sans-serif; cursor: pointer; }
  .gen-mode-btn + .gen-mode-btn { border-left: 1px solid var(--rule-2); }
  .gen-mode-btn.active { background: rgba(212,160,23,0.22); color: #7f1414; font-weight: 700; }
  /* «🎲 Shuffle»: pesca una combinazione dal mazzo (argomento · contesto · forma ·
     protagonista · struttura). Sta sulla riga dei campi, prima della lunghezza. */
  .gen-shuffle {
    flex: none; display: inline-flex; align-items: center; gap: .35rem;
    border: 1px solid var(--rule-2); border-radius: .6rem; padding: .55rem .75rem;
    background: var(--surface-raised); color: #7f1414;
    font: 700 .82rem 'Inter', sans-serif; cursor: pointer; white-space: nowrap;
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
  }
  .gen-shuffle:hover { border-color: var(--accent); background: rgba(194,43,43,0.06); }
  .gen-shuffle:active { transform: scale(.97); }
  /* La combinazione pescata si legge come una fila di tag cliccabili: ogni tag è un
     pezzo del mazzo (argomento, contesto, forma, protagonista, struttura). */
  .gen-draw { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .55rem; }
  .gen-draw[hidden] { display: none; }
  .gen-draw-label { font: 700 .7rem 'Inter', sans-serif; color: var(--fg-60); letter-spacing: .02em; }
  .gen-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
  .gen-tag {
    display: inline-flex; align-items: center; gap: .22rem;
    font: 600 .72rem 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--accent); background: rgba(194,43,43,0.07);
    border: 1px solid rgba(194,43,43,0.22); border-radius: 999px;
    padding: .16rem .55rem; cursor: pointer; line-height: 1.3; white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
  }
  .gen-tag:hover { background: rgba(194,43,43,0.13); border-color: rgba(194,43,43,0.4); }
  .gen-tag .gen-tag-x { font-size: .62rem; opacity: .55; }
  .gen-tag.zh { font-family: var(--font-hanzi); }
  .gen-tag-axes { font: 500 .68rem 'Inter', sans-serif; color: var(--fg-60); }
  /* Il testo di stato sta su carta: prima era chiaro (invisibile). */
  .gen-status { margin: .55rem 0 0; font: 500 .74rem 'Inter', sans-serif; color: var(--fg-60); }
  .gen-status.ok { color: #15803d; }
  .gen-status.err { color: var(--seed-primary); }
  .input-shell.minimized .gen-panel { display: none; }

  /* ============ Box "Brani pronti" dentro l'area di analisi ============
     Gemello del box Genera: stessa linguetta che si apre al tap, stessa cornice oro tratteggiata. */
  .snip-panel { margin-top: .9rem; padding: .85rem 1rem; border: 1px dashed var(--rule-2);
    border-radius: .85rem; background: rgba(255,255,255,0.04); }
  .snip-panel-head { display: flex; align-items: center; gap: .45rem; width: 100%; margin: 0; padding: 0;
    border: 0; background: none; cursor: pointer; text-align: left;
    font: 700 .84rem 'Inter', sans-serif; color: var(--gold); letter-spacing: .02em; }
  .snip-count { padding: .08rem .48rem; border-radius: 999px; background: rgba(212,160,23,0.18);
    color: #7f1414; font: 700 .68rem 'Inter', sans-serif; font-variant-numeric: tabular-nums; }
  .snip-chev { margin-left: auto; font-size: .85rem; line-height: 1; color: var(--gold); transition: transform .15s ease; }
  .snip-panel.open .snip-chev { transform: rotate(180deg); }
  .snip-panel-body { margin-top: .6rem; }
  .snip-panel:not(.open) .snip-panel-body { display: none; }
  .snip-hint { margin: 0 0 .55rem; font: 500 .74rem 'Inter', sans-serif; color: var(--fg-60); }
  .snip-filters { display: flex; flex-wrap: wrap; gap: .35rem .55rem; align-items: center; margin: .35rem 0; }
  .snip-flabel { font: 700 .65rem 'Inter', sans-serif; color: var(--fg-60); text-transform: uppercase; letter-spacing: .06em; min-width: 4.6rem; }
  .snip-course-select { flex: 1 1 180px; min-width: 0; max-width: 100%; min-height: 44px;
    padding: .4rem .6rem; border: 1px solid var(--rule-2); border-radius: .6rem;
    background: var(--surface-raised); color: var(--fg); font: 600 .85rem var(--font-ui); }
  .snip-course-field { flex: 1 1 180px; min-width: 0; }
  .snip-course-field .snip-course-select { width: 100%; }
  .snip-course-importance { margin: .25rem 0 0 .6rem; line-height: 1; }
  .snip-course-importance[hidden] { display: none; }
  .course-importance { display: inline-flex; flex: none; color: var(--gold-ink, #946510); font: 500 .6rem/1.1 var(--font-ui); letter-spacing: .06em; white-space: nowrap; }
  .course-importance-empty { color: var(--fg-40, #777); }
  .course-importance-hint { display: none !important; }
  .course-importance-hint[hidden] { display: none; }
  .snip-course-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; min-width: 0; }
  .snip-course-wrap .snip-course { max-width: 100%; box-sizing: border-box; }
  .snip-course-wrap .course-importance { padding-left: .42rem; font-size: .52rem; }
  .snip-list { margin-top: .65rem; overflow: hidden; touch-action: pan-y pinch-zoom;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: .4rem;
    transform-origin: left center; }
  .snip-pagination { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .55rem; }
  .snip-pagination button { min-width: 44px; min-height: 44px; border: 1px solid var(--rule-2); border-radius: 999px;
    background: var(--surface-raised); color: var(--gold-ink); cursor: pointer; font: 600 .85rem var(--font-ui); }
  .snip-pagination button:disabled { opacity: .35; cursor: default; }
  .snip-page-info { color: var(--fg-60); font: 600 .72rem var(--font-ui); font-variant-numeric: tabular-nums; }
  @media (min-width: 680px) {
    .snip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: .55rem; }
  }
  .snip-card { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: .65rem; width: 100%; min-width: 0; max-width: 100%;
    text-align: left; padding: .58rem .8rem; border: 1px solid var(--rule); border-radius: .7rem; background: var(--surface-raised);
    cursor: pointer; font: inherit; color: inherit; box-sizing: border-box; position: relative; overflow: hidden;
    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background-color .14s ease; }
  .snip-card:hover { transform: translateY(-1px); border-color: var(--gold-line); background: #fffdf8; box-shadow: 0 4px 12px rgba(212,160,23,0.10); }
  .snip-card:focus-visible { border-color: var(--gold-line); outline: 2px solid rgba(212,160,23,0.4); background: #fffdf8; }
  .snip-card-main { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; min-width: 0; }
  .snip-card-top { display: flex; align-items: center; gap: .35rem .45rem; margin-bottom: .28rem; width: 100%; min-width: 0;
    font: 600 .68rem 'Inter', sans-serif; color: var(--fg-60); line-height: 1; }
  .snip-badge { padding: .12rem .48rem; border-radius: 999px; font-weight: 700; font-size: .67rem;
    letter-spacing: .02em; line-height: 1.2; flex-shrink: 0; }
  .snip-badge[data-d="1"] { background: rgba(21,128,61,0.14); color: #15803d; }
  .snip-badge[data-d="2"] { background: rgba(180,83,9,0.15); color: var(--gold-ink); }
  .snip-badge[data-d="3"] { background: rgba(194,65,12,0.16); color: #c2410c; }
  .snip-badge[data-d="4"] { background: rgba(159,18,57,0.16); color: #9f1239; }
  .snip-course { padding: .1rem .42rem; border-radius: 999px; background: rgba(0,0,0,0.04);
    color: var(--fg-70); font-weight: 500; font-size: .67rem; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .snip-len { margin-left: auto; color: var(--fg-40, rgba(0,0,0,0.4)); font-weight: 500; font-size: .67rem; font-variant-numeric: tabular-nums; flex-shrink: 0; }
  .snip-card-bottom { display: flex; align-items: center; gap: .65rem; min-width: 0; }
  .snip-title { display: block; flex: 1 1 auto; width: 100%; min-width: 0; font-family: var(--font-hanzi, "Noto Serif SC", serif); font-size: 1.05rem;
    font-weight: 700; line-height: 1.38; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; }
  @media (max-width: 600px) {
    .snip-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, minmax(84px, auto)); }
    .snip-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
      white-space: normal; font-size: 1rem; }
  }
  .snip-status { flex: 0 0 20px; width: 20px; height: 20px; padding: 0; border-radius: 999px; border: 1.5px solid var(--rule-2, rgba(0,0,0,0.24));
    background: transparent; display: inline-flex; align-items: center; justify-content: center; transition: all .16s ease;
    color: transparent; cursor: pointer; box-sizing: border-box; }
  .snip-card:hover .snip-status:not(.is-read) { border-color: var(--gold-line, #d4a017); background: rgba(212,160,23,0.08); }
  .snip-status.is-read { border-color: var(--ok, #15803d); background: var(--ok, #15803d); color: #ffffff;
    box-shadow: 0 1px 3px rgba(21,128,61,0.25); }
  .snip-status.is-read svg { display: block; }
  .snip-cur-title { font-family: var(--font-hanzi, "Noto Serif SC", serif); font-weight: 700; font-size: 0.88rem; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; line-height: 1.2; }
  .snip-empty { padding: .8rem; text-align: center; font: italic 500 .8rem 'Inter', sans-serif; color: var(--fg-40, rgba(0,0,0,0.4)); grid-column: 1 / -1; }
  .input-shell.minimized .snip-panel { display: none; }

  /* ============ 课程目录 · 学科 / 科学 ============ */
  .subject-panel { margin-top: .6rem; padding: 0; border: 0 !important;
    border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
  /* In catalog view (not viewing lessons), hide the toggle header completely */
  .subject-panel:not(.path-open) .subject-panel-header { display: none !important; }
  .subject-panel.path-open { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
  .subject-panel.path-open .subject-panel-header { display: none !important; }
  .subject-panel-header { display: flex; align-items: center; gap: .5rem; }
  .subject-panel-head { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: .45rem; width: auto; min-height: 2.5rem;
    margin: 0; padding: 0; border: 0; background: none; color: var(--fg); cursor: pointer; text-align: left;
    font: 700 .88rem 'Inter', sans-serif; white-space: nowrap; }
  .subject-panel-head #subjectPanelLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .subject-panel-head .snip-count { flex-shrink: 0; padding: .06rem .36rem; font-size: .65rem; white-space: nowrap; }
  .subject-panel-head .snip-chev { margin-left: auto; flex-shrink: 0; }
  .subject-panel.open .snip-chev { transform: rotate(180deg); }
  .subject-panel-body { margin-top: 0; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  .subject-panel:not(.open) .subject-panel-body { display: none; }
  .subject-panel:not(.open) .subject-lessons-head { display: none; }
  #modePaneSubjects { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }

  /* Course cards: responsive grid adapted to PC, iPad and iPhone (no horizontal scroll) */
  .subject-groups {
    width: 100%; max-width: 100%; margin: .5rem auto .35rem; padding: 0; overflow: visible;
  }
  .subject-groups[hidden] { display: none; }
  .subject-course-section + .subject-course-section { margin-top: 1.25rem; }
  .subject-course-section-title {
    margin: 0 0 .65rem; color: var(--fg-60); text-align: center; font: 600 .85rem/1.5 var(--font-hanzi);
  }
  .subject-course-rows {
    display: flex; flex-direction: column; gap: 12px; width: 100%;
    overflow: visible; padding: 2px 0 4px; box-sizing: border-box;
  }
  .subject-course-rows.subject-course-single-row,
  .subject-course-row {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px; width: 100%; box-sizing: border-box; overflow: visible;
  }
  @media (max-width: 560px) {
    .subject-course-rows.subject-course-single-row,
    .subject-course-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    /* Four courses fit in one mobile row; larger catalogs keep their two columns. */
    :is(.subject-course-single-row, .subject-course-row:only-child):has(> .subject-course:nth-child(4):last-child) {
      grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
    }
    :is(.subject-course-single-row, .subject-course-row:only-child):has(> .subject-course:nth-child(4):last-child) .subject-course {
      min-height: 88px; padding: .4rem .25rem .35rem;
    }
    :is(.subject-course-single-row, .subject-course-row:only-child):has(> .subject-course:nth-child(4):last-child) .subject-course-name {
      font-size: clamp(.7rem, 2.8vw, .78rem); -webkit-line-clamp: 3; overflow-wrap: anywhere;
    }
    :is(.subject-course-single-row, .subject-course-row:only-child):has(> .subject-course:nth-child(4):last-child) .subject-course-footer {
      flex-direction: column; gap: .15rem;
    }
  }
  .subject-course {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .22rem; width: 100%; min-width: 0; height: auto; min-height: 84px; aspect-ratio: auto;
    padding: .45rem .4rem .4rem; border: 1px solid var(--rule-2, rgba(15, 23, 42, .12));
    border-radius: 16px; background: #ffffff; color: var(--fg); text-align: center; cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .05), 0 1px 2px rgba(15, 23, 42, .03);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    -webkit-tap-highlight-color: transparent; flex-shrink: 1; box-sizing: border-box;
  }
  .subject-course::before, .subject-course::after { display: none !important; }
  .subject-course:hover, .subject-course:focus-visible {
    transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15, 23, 42, .1);
    border-color: rgba(35, 83, 71, .35);
  }
  .subject-course:focus-visible { outline: 2px solid var(--ui-active); outline-offset: 2px; }
  .subject-course:active { transform: translateY(1px) scale(.98); }
  .subject-course[aria-pressed="true"] {
    border-color: var(--ui-active);
    box-shadow: 0 0 0 2px var(--ui-active), 0 6px 16px rgba(35, 83, 71, .15);
  }
  .subject-course.subject-course-pinyin {
    border-color: rgba(35, 83, 71, .25);
    background: linear-gradient(135deg, rgba(35, 83, 71, .04), #ffffff);
  }
  .subject-course-emoji { font-size: clamp(1.25rem, 3.2vw, 1.55rem); line-height: 1; margin-top: .1rem; }
  .subject-course-name {
    max-width: 100%; color: var(--fg); white-space: normal;
    font: 700 clamp(.74rem, 2vw, .84rem)/1.25 var(--font-hanzi);
    text-align: center; overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .subject-course-name:lang(it), .subject-course-name:lang(en) {
    font-family: var(--font-ui, 'Inter', sans-serif);
    font-size: clamp(.72rem, 1.9vw, .82rem);
  }
  .subject-course-footer {
    display: flex; align-items: center; justify-content: center; gap: .38rem;
    width: 100%; margin-top: .1rem; padding-top: 0; white-space: nowrap;
  }
  .subject-course .subject-course-count {
    color: var(--fg-60); font: 600 clamp(.6rem, 1.8vw, .7rem)/1.1 var(--font-ui, sans-serif);
    white-space: nowrap; margin: 0;
  }
  .subject-course .course-importance {
    font-size: clamp(.55rem, 1.8vw, .68rem); line-height: 1; color: #d97706;
    letter-spacing: .02em; white-space: nowrap;
  }
  .lesson-listening { margin: 1rem 0; padding: 1rem; border: 1px solid var(--rule-2); border-radius: .8rem; background: var(--surface-raised); }
  .lesson-listening[hidden] { display: none; }
  .lesson-listening h3 { margin: 0 0 .5rem; color: var(--fg); font: 700 1rem/1.6 var(--font-hanzi); }
  .lesson-listening-note { color: var(--fg-60); font: 400 .8rem/1.5 var(--font-ui); }
  .lesson-listening-play { min-height: 44px; padding: .5rem .9rem; border: 1px solid var(--rule-2); border-radius: .6rem; color: var(--fg); background: var(--surface); cursor: pointer; font: 600 .85rem var(--font-ui); }
  .lesson-listening-play:focus-visible, .lesson-listening summary:focus-visible { outline: 2px solid var(--ui-active); outline-offset: 3px; }
  .lesson-listening :is(p, li) { line-height: 1.9; overflow-wrap: anywhere; }
  .lesson-listening details { margin-top: .65rem; }
  .lesson-listening summary { cursor: pointer; min-height: 36px; font: 600 .85rem/1.8 var(--font-ui); }
  .name-practice { margin: 1rem 0; padding: 1rem; border: 1px solid var(--rule-2); border-radius: .8rem; background: var(--surface-raised); }
  .name-practice[hidden] { display: none; }
  .name-practice > summary { min-height: 36px; cursor: pointer; color: var(--fg); font: 600 .85rem/1.8 var(--font-ui); }
  .name-practice > summary:focus-visible { outline: 2px solid var(--ui-active); outline-offset: 3px; }
  .name-practice-body { padding-top: .75rem; }
  .name-practice h3 { margin: 0; font: 700 .95rem/1.5 var(--font-ui); color: var(--fg); }
  .name-practice-progress { margin: .35rem 0; font: 400 .75rem/1.5 var(--font-ui); color: var(--fg-60); }
  .name-practice-question { font: 600 .9rem/1.5 var(--font-ui); }
  .name-practice-name { margin: .5rem 0 1rem; font: 700 1.9rem/1.5 var(--font-hanzi); text-align: center; }
  .name-practice-choices, .name-practice-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }
  .name-practice button { min-height: 44px; min-width: 58px; padding: .5rem .85rem; border: 1px solid var(--rule-2); border-radius: .6rem; background: var(--surface); color: var(--fg); cursor: pointer; font: 600 .85rem/1.5 var(--font-ui); }
  .name-practice-choices button { flex: 1 1 20%; font: 600 1.1rem/1.5 var(--font-hanzi); }
  .name-practice button:focus-visible { outline: 2px solid var(--ui-active); outline-offset: 3px; }
  .name-practice button:disabled { opacity: .55; cursor: default; }
  .name-practice-choices button.is-correct { color: #166534; border-color: #166534; background: #edf7ed; opacity: 1; }
  .name-practice-choices button.is-wrong { color: #9f1239; border-color: #9f1239; background: #fff1f2; opacity: 1; }
  .name-practice-feedback { min-height: 1.5rem; margin: .6rem 0; font: 500 .85rem/1.6 var(--font-ui); overflow-wrap: anywhere; }
  .name-practice-split { display: block; margin-top: .3rem; font: 500 1rem/1.8 var(--font-hanzi); white-space: pre-line; }
  .subject-lessons-head { display: none; }
  .subject-catalog-back { display: none !important; }
  .subject-lessons-title-wrap { display: none; }
  .subject-roadmap-stage {
    position: relative;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
  }
  .subject-roadmap-stage[hidden] { display: none !important; }
  .subject-journey-card.has-map {
    position: relative; width: 100%; max-width: 820px; box-sizing: border-box; margin-inline: auto;
    border: 1px solid #c9c8b6; border-radius: 1rem; overflow: hidden;
    background: #eee8d7;
  }
  .subject-journey-card.has-map.is-cave { border-color: #365264; }
  .subject-journey-card.has-map .reader-modes-wrap {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    margin: 0;
    border: 0;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 20;
  }
  .subject-journey-card.has-map .reader-modes-bar {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 3px 12px 3px 4px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    width: auto;
    max-width: calc(100% - 24px);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .subject-journey-card.has-map.is-cave .reader-modes-bar {
    background: rgba(18, 38, 52, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  }
  .subject-journey-card.has-map .reader-mode-btn.reader-mode-home {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  }
  .subject-journey-card.has-map .reader-mode-btn.reader-mode-home svg {
    width: 18px;
    height: 18px;
  }
  .subject-journey-card.has-map .subject-roadmap-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    padding: 0;
    pointer-events: none;
  }
  .subject-journey-card.has-map .subject-roadmap-badge-title {
    font-family: var(--font-hanzi);
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .subject-journey-card.has-map .subject-roadmap-badge-count {
    font-family: var(--font-hanzi);
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--fg-60);
    background: rgba(0, 0, 0, 0.08);
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    white-space: nowrap;
    flex: none;
  }
  .subject-journey-card.has-map.is-cave .subject-roadmap-badge-title {
    color: #edf8f5;
    text-shadow: 0 1px 5px #081522;
  }
  .subject-journey-card.has-map.is-cave .subject-roadmap-badge-count {
    color: #d1e8e7;
    background: rgba(255, 255, 255, 0.15);
  }
  .subject-journey-card.has-map .subject-panel { margin: 0; }
  .subject-journey-card.has-map .subject-lesson-list { border: 0; border-radius: 0; }
  .subject-map-portal:focus-visible { outline: 2px solid var(--ui-active); outline-offset: 3px; }
  .subject-roadmap-badge {
    display: flex; flex: 1 1 auto; align-items: center; gap: 0.42rem;
    box-sizing: border-box; min-width: 0; padding: .15rem .25rem .15rem 0;
    pointer-events: none;
  }
  .subject-roadmap-badge[hidden] { display: none !important; }
  .subject-roadmap-badge-title { font-family: var(--font-hanzi); font-weight: 700; font-size: 0.88rem; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .subject-roadmap-badge-count { font-family: var(--font-hanzi); font-weight: 600; font-size: 0.66rem; color: var(--fg-60); background: rgba(0,0,0,0.06); padding: 0.06rem 0.35rem; border-radius: 999px; white-space: nowrap; flex: none; }
  .subject-lessons-title { margin: 0; color: var(--fg); font: 700 .96rem/1.35 var(--font-hanzi); }
  .subject-lessons-count { display: block; color: var(--fg-60); font: 500 .72rem var(--font-hanzi); }
  @media (max-width: 600px) {
    .subject-panel.path-open .subject-panel-header { display: none !important; }
    .subject-panel.path-open .subject-panel-head { display: none !important; }
  }
  .subject-lesson-list {
    position: relative; display: block; width: 100%; max-width: 820px;
    height: clamp(184px, 24svh, 212px); min-height: 184px;
    box-sizing: border-box; margin: 0 auto; overflow: hidden;
    border: 1px solid #c9c8b6; border-radius: 1rem;
    background: #eee8d7; cursor: default;
  }
  .subject-lesson-list[hidden] { display: none; }
  .subject-lesson-list:focus-visible { outline: 2px solid var(--ui-active); outline-offset: 2px; }
  .subject-roadmap-canvas { position: relative; width: 100%; height: 100%; isolation: isolate; overflow: hidden; }
  .subject-lesson-list.is-cave { border-color: #365264; background: #111f2c; }
  .subject-roadmap-canvas[data-scene="cave"] {
    background: linear-gradient(180deg, rgba(5,17,29,.08), rgba(7,20,32,.15) 45%, rgba(5,15,26,.65)), url('content/artwork/lesson-cave.png') center 58% / cover;
    animation: hrCaveReveal .45s ease-out both;
  }
  .is-cave .rm-garden-path-edge { stroke: #102532; stroke-width: 20; opacity: .7; }
  .is-cave .rm-garden-path { stroke: #677e88; stroke-width: 13; opacity: .8; }
  .is-cave .rm-step { fill: #9baeb0; stroke: #405e6d; }
  .is-cave .rm-step.is-complete { fill: #a0eee7; stroke: #54bcbf; }
  .subject-map-portal {
    position: absolute; z-index: 3; top: var(--portal-y); left: var(--portal-x); transform: translate(-50%, -50%);
    display: grid; place-items: center; width: 56px; height: 44px;
    padding: 0; border: 0; border-radius: .8rem;
    background: transparent; cursor: pointer; touch-action: manipulation;
  }
  .subject-map-portal:disabled { cursor: default; }
  .subject-map-portal svg { width: 58px; height: 44px; overflow: visible; }
  .portal-shadow { fill: #354237; opacity: .18; }
  .portal-rock { fill: #879083; }
  .portal-face { fill: #acb39b; }
  .portal-opening { fill: #202f2a; }
  .portal-light { fill: #172420; }
  .portal-step { fill: #a2a58c; }
  .is-unlocked .portal-light { fill: #58c5c8; filter: drop-shadow(0 0 6px #90e5dc); }
  .is-unlocked .portal-step { fill: #bde6d7; }
  .is-return .portal-light { fill: #d7bb70; filter: drop-shadow(0 0 6px #f4d69d); }
  .is-return .portal-step { fill: #ebd8a5; }
  .portal-exit-arrow { fill: none; stroke: #fff7df; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .cave-plinth { fill: #687d89; stroke: #9db3b9; stroke-width: 1; }
  .cave-crystal, .subject-lesson.is-read.is-pending-growth .cave-crystal { fill: #83969e; stroke: #b4c7cd; stroke-width: 1; stroke-linejoin: round; }
  .cave-facet, .subject-lesson.is-read.is-pending-growth .cave-facet { fill: #526e7c; }
  .cave-glow, .cave-spark, .subject-lesson.is-read.is-pending-growth :is(.cave-glow, .cave-spark) { opacity: 0; }
  .is-cave .subject-lesson-art { filter: drop-shadow(0 3px 4px #061321); }
  .subject-lesson.is-read .cave-crystal { fill: #82e6e8; stroke: #cffbff; }
  .subject-lesson.is-read .cave-facet { fill: #3da5be; }
  .subject-lesson.is-read .cave-glow { fill: #56dde6; opacity: .24; }
  .subject-lesson.is-read .cave-spark { fill: #d5fcfc; opacity: 1; }
  .is-cave .subject-lesson-plaque { background: #112b3ee8; box-shadow: 0 1px 5px #061421; }
  .is-cave .subject-lesson .subject-lesson-no { color: #d0e9eb; border-color: #9bbcc5; }
  .is-cave .subject-lesson.is-read .subject-lesson-no { background: #a0eee7; border-color: #a0eee7; color: #123e4c; }
  .is-cave .subject-lesson:not(.is-read):not(.is-locked) .subject-lesson-plaque { box-shadow: 0 0 0 2px #83d9dc, 0 0 12px #68cbd359; }
  .subject-lesson-list.is-entering { pointer-events: none; }
  .subject-lesson-list.is-entering .subject-roadmap-canvas { animation: hrTunnelApproach .56s ease-in both; }
  .subject-lesson-list.is-entering::after {
    content: ''; position: absolute; z-index: 10; inset: 0; border-radius: inherit;
    background: #081522; clip-path: circle(0 at var(--portal-x) var(--portal-y));
    animation: hrTunnelEnter .56s ease-in forwards; pointer-events: none;
  }
  @keyframes hrTunnelEnter { to { clip-path: circle(150% at var(--portal-x) var(--portal-y)); } }
  @keyframes hrTunnelApproach { to { transform: scale(1.1); transform-origin: var(--portal-x) var(--portal-y); opacity: .3; } }
  @keyframes hrCaveReveal { from { opacity: .2; } to { opacity: 1; } }
  .subject-roadmap-canvas .subject-lesson { width: 56px; min-height: 44px; height: 44px; }
  .subject-roadmap-canvas .subject-lesson-art { width: 54px; height: 44px; top: -6px; }
  .subject-roadmap-canvas .subject-lesson-no { flex-basis: .86rem; width: .86rem; height: .86rem; font-size: .48rem; }
  .subject-roadmap-canvas .subject-lesson-plaque { padding: 0 3px; }
  .subject-roadmap-canvas .subject-lesson-lock { font-size: .5rem; }
  @media (prefers-reduced-motion: reduce) {
    .subject-roadmap-canvas[data-scene="cave"], .subject-lesson-list.is-entering .subject-roadmap-canvas, .subject-lesson-list.is-entering::after { animation: none; }
  }
  .rm-painting { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }
  .rm-sand-lines { fill: none; stroke: #cbbfa3; stroke-width: .75; opacity: .27; }
  .rm-rake-lines { fill: none; stroke: #c4b799; stroke-width: .85; opacity: .5; }
  .rm-moss-bank { fill: #a7b392; opacity: .7; }
  .rm-moss { fill: #a4b18c; opacity: .65; }
  .rm-rock { fill: #737c73; stroke: #606b62; stroke-width: .6; stroke-linejoin: round; }
  .rm-rock-light { fill: #92998b; }
  .rm-rock-shadow { fill: #626d5c; opacity: .18; }
  .rm-garden-border { fill: none; stroke: #829375; stroke-width: 1; opacity: .25; }
  .rm-garden-path-edge { fill: none; stroke: #aa997b; stroke-width: 15; stroke-linecap: round; opacity: .24; }
  .rm-garden-path { fill: none; stroke: #e5d8bb; stroke-width: 10; stroke-linecap: round; }
  .rm-step { fill: #bcb39c; stroke: #9d9986; stroke-width: .65; }
  .rm-trail-pebble { fill: #a5a18a; opacity: .55; }
  .rm-step.is-complete { fill: #95a17f; stroke: #7b896b; }
  .rm-stream-bank { fill: none; stroke: #9eae8d; stroke-width: 22; stroke-linecap: round; opacity: .72; }
  .rm-stream { fill: none; stroke: #a9c8c0; stroke-width: 16; stroke-linecap: round; }
  .rm-stream-deep { fill: none; stroke: #83afa8; stroke-width: 8; stroke-linecap: round; opacity: .6; }
  .rm-water-flow { fill: none; stroke: #e3f2e9; stroke-width: 1.1; stroke-dasharray: 7 14; stroke-linecap: round; opacity: .8; animation: hrBrookFlow 7s linear infinite; }
  .rm-water-pool { fill: #a9cbc1; stroke: #91aaa0; stroke-width: 1.5; }
  .rm-water-ripple { fill: none; stroke: #e2efe3; stroke-width: .8; opacity: .8; }
  .rm-waterfall { fill: #bbddd4; }
  .rm-waterfall-light { fill: #e8f6e9; opacity: .88; }
  .rm-waterfall-flow { fill: none; stroke: #f6fcf0; stroke-width: 1; stroke-linecap: round; stroke-dasharray: 4 5; animation: hrWaterfallFlow 2s linear infinite; }
  .rm-water-foam { fill: #edf6e7; opacity: .9; }
  .rm-bridge-deck { fill: #cfad7a; stroke: #aa8a59; stroke-width: .8; }
  .rm-bridge-plank { fill: none; stroke: #b49260; stroke-width: .7; }
  .rm-bridge-rail { fill: none; stroke: #9c7951; stroke-width: 1.5; stroke-linecap: round; }
  @keyframes hrBrookFlow { to { stroke-dashoffset: -42; } }
  @keyframes hrWaterfallFlow { to { stroke-dashoffset: -18; } }
  @media (prefers-reduced-motion: reduce) { .rm-water-flow, .rm-waterfall-flow { animation: none; } }

  .subject-lesson-stop { position: absolute; inset: 0; pointer-events: none; }
  .subject-lesson {
    position: absolute; top: var(--y); left: var(--x); z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    width: 94px; min-height: 72px; height: 72px;
    padding: 0; box-sizing: border-box; border: 0; border-radius: .7rem;
    background: transparent; box-shadow: none;
    color: var(--fg); text-align: center; cursor: pointer; pointer-events: auto;
    transform: translate(-50%, -50%);
    transition: transform .2s ease, filter .2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .subject-lesson[data-row="1"] { z-index: 3; }
  .subject-lesson::after { display: none; }
  .subject-lesson:hover, .subject-lesson:focus-visible {
    z-index: 4; outline: none;
    transform: translate(-50%, calc(-50% - 2px)) scale(1.035);
  }
  .subject-lesson:focus-visible .subject-lesson-plaque {
    outline: 2px solid var(--ui-active); outline-offset: 3px;
  }
  .subject-lesson[aria-current="true"]::before {
    content: ''; position: absolute; inset: 8px 0 0; border-radius: 50%;
    background: radial-gradient(ellipse, rgba(226,192,115,.35), transparent 70%);
    z-index: -1; pointer-events: none;
  }
  .subject-lesson-art { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); display: block; width: 84px; height: 71px; overflow: visible; pointer-events: none; }
  .subject-lesson-art [class^="p-"] { stroke: none; transition: fill .45s ease; }
  .subject-lesson-art .p-shadow { fill: #414b3c; opacity: .13; }
  .subject-lesson-art .p-plot, .subject-lesson.is-read.is-pending-growth .p-plot { fill: #d1d4bd; opacity: .62; }
  .subject-lesson-art .p-base, .subject-lesson.is-read.is-pending-growth .p-base { fill: #b6b8ac; }
  .subject-lesson-art .p-wall, .subject-lesson.is-read.is-pending-growth .p-wall { fill: #b0b5ad; }
  .subject-lesson-art .p-wall-dark, .subject-lesson.is-read.is-pending-growth .p-wall-dark { fill: #969f97; }
  .subject-lesson-art .p-roof, .subject-lesson.is-read.is-pending-growth .p-roof { fill: #919e97; }
  .subject-lesson-art .p-roof-hi, .subject-lesson.is-read.is-pending-growth .p-roof-hi { fill: #b0bab0; }
  .subject-lesson-art .p-eave, .subject-lesson.is-read.is-pending-growth .p-eave { fill: #7f8d85; }
  .subject-lesson-art .p-pillar, .subject-lesson.is-read.is-pending-growth .p-pillar { fill: #929a91; }
  .subject-lesson-art .p-win, .subject-lesson.is-read.is-pending-growth .p-win { fill: #e1dfcd; }
  .subject-lesson-art .p-trim, .subject-lesson.is-read.is-pending-growth .p-trim { fill: #d0d0be; }
  .subject-lesson-art .p-trunk, .subject-lesson.is-read.is-pending-growth .p-trunk { fill: #85897b; }
  .subject-lesson-art .p-foliage, .subject-lesson.is-read.is-pending-growth .p-foliage { visibility: hidden; opacity: 0; transform-box: fill-box; transform-origin: center bottom; }
  .subject-lesson.is-locked { cursor: not-allowed; }
  .subject-lesson:not(.is-read):not(.is-locked) .subject-lesson-plaque { box-shadow: 0 0 0 2px #a5af8e, 0 2px 4px #4b58421a; }

  .subject-lesson.is-read .garden-pagoda { --c-roof: #558d77; --c-roof-hi: #7eb39a; }
  .subject-lesson.is-read [data-pagoda-theme="amber"] { --c-roof: #bf934e; --c-roof-hi: #dfb76d; }
  .subject-lesson.is-read [data-pagoda-theme="imperial"] { --c-roof: #737e9b; --c-roof-hi: #9d9bb9; }
  .subject-lesson.is-read [data-pagoda-theme="vermilion"] { --c-roof: #a34f45; --c-roof-hi: #ce7461; }
  .subject-lesson.is-read .garden-tree { --c-leaf-dark: #597c3b; --c-leaf-mid: #7d9d4a; --c-leaf-hi: #a8bd68; }
  .subject-lesson.is-read [data-tree-theme="sakura"] { --c-leaf-dark: #cc6586; --c-leaf-mid: #e78ca7; --c-leaf-hi: #f7b6c7; }
  .subject-lesson.is-read [data-tree-theme="pine"] { --c-leaf-dark: #426c52; --c-leaf-mid: #678b60; --c-leaf-hi: #92aa76; }
  .subject-lesson.is-read .p-plot { fill: #b3c497; }
  .subject-lesson.is-read .p-base { fill: #d0b88c; }
  .subject-lesson.is-read .p-wall { fill: #c47a5c; }
  .subject-lesson.is-read .p-wall-dark { fill: #9f5945; }
  .subject-lesson.is-read .p-pillar { fill: #a35443; }
  .subject-lesson.is-read .p-win { fill: #fff0c7; }
  .subject-lesson.is-read .p-eave { fill: #536d59; }
  .subject-lesson.is-read .p-roof { fill: var(--c-roof); }
  .subject-lesson.is-read .p-roof-hi { fill: var(--c-roof-hi); }
  .subject-lesson.is-read .p-trim { fill: #ead0a0; }
  .subject-lesson.is-read .p-trunk { fill: #785641; }
  .subject-lesson.is-read .p-leaf-back { fill: var(--c-leaf-dark); }
  .subject-lesson.is-read .p-leaf-mid { fill: var(--c-leaf-mid); }
  .subject-lesson.is-read .p-leaf-hi { fill: var(--c-leaf-hi); }
  .subject-lesson.is-read .p-foliage { visibility: visible; opacity: 1; }
  .subject-lesson.is-completing .subject-lesson-art [class^="p-"] { transition: fill 2.8s cubic-bezier(.4, 0, .2, 1); }
  .subject-lesson.is-completing .subject-lesson-art :is(.p-roof, .p-roof-hi, .p-trim) { transition-delay: .16s; }
  .subject-lesson.is-completing .p-foliage {
    animation: hrGardenBloom 3.4s .25s cubic-bezier(.4, 0, .2, 1) both;
    will-change: transform, opacity;
  }
  .subject-lesson.is-completing .p-foliage [class^="p-leaf-"] { transition: none; }
  .subject-lesson.is-completing :is(.cave-crystal, .cave-facet, .cave-glow, .cave-spark) { transition: fill 1.8s ease-in-out, stroke 1.8s ease-in-out, opacity 2.8s .3s ease-in-out; }
  .rm-step.is-completing { transition: fill 1.8s var(--step-delay, 0ms) ease-in-out, stroke 1.8s var(--step-delay, 0ms) ease-in-out; }
  @keyframes hrGardenBloom {
    0% { opacity: 0; transform: scale(.12, .08); }
    100% { opacity: 1; transform: scale(1); }
  }
  @keyframes hrLockShake {
    0%, 100% { transform: translate(-50%, -50%); }
    20%, 60% { transform: translate(calc(-50% - 4px), -50%); }
    40%, 80% { transform: translate(calc(-50% + 4px), -50%); }
  }
  .subject-lesson.is-locked:hover, .subject-lesson.is-locked:focus-visible {
    transform: translate(-50%, -50%);
    outline: none;
  }
  .subject-lesson.is-locked.shake {
    animation: hrLockShake .35s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .subject-lesson, .subject-lesson-art [class^="p-"], .subject-lesson.is-completing .subject-lesson-art [class^="p-"], .subject-lesson.is-completing :is(.cave-crystal, .cave-facet, .cave-glow, .cave-spark), .rm-step.is-completing { transition: none; }
    .subject-lesson.is-read .p-foliage, .subject-lesson.is-locked.shake { animation: none; }
    .subject-lesson.is-completing .p-foliage { animation: none; will-change: auto; }
  }
  .subject-lesson-plaque {
    display: inline-flex; align-items: center; justify-content: center; gap: 1px;
    position: absolute; bottom: 0; padding: 1px 4px; border-radius: 999px;
    background: rgba(255, 253, 247, 0.94);
    box-shadow: 0 1px 2px rgba(37, 43, 40, 0.14);
    pointer-events: none;
  }
  .subject-lesson.is-read .subject-lesson-no {
    background: #3f554b;
    border-color: #3f554b;
    color: #fffefa;
  }
  .subject-lesson.is-locked .subject-lesson-no {
    background: transparent;
    border-color: #7d8b84;
    color: #7d8b84;
  }
  .subject-lesson-lock {
    flex: none;
    font-size: .58rem;
    line-height: 1;
    filter: grayscale(.15);
    opacity: .85;
  }
  .subject-roadmap-hint { display: none; }
  .subject-lesson-no { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 1.08rem; width: 1.08rem; height: 1.08rem;
    box-sizing: border-box; border-radius: 50%;
    background: transparent; border: 1.4px solid #3f554b;
    color: #3f554b; font: 700 .56rem/1 var(--font-ui);
    transition: background .15s ease, color .15s ease, border-color .15s ease; }
  .subject-lesson-main {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .subject-lesson-title { display: block; white-space: nowrap; overflow: hidden; color: var(--fg); font: 700 .78rem/1.22 var(--font-hanzi); }
  .subject-lesson-title-text { display: inline-block; white-space: nowrap; }
  .subject-lesson-check { flex: none; margin-left: .1rem; color: var(--ok); font-size: .9rem; }
  @media (pointer: coarse) {
    .subject-lesson { transition: none; }
    .subject-lesson:hover { transform: translate(-50%, -50%); }
    .subject-lesson:focus-visible { transform: translate(-50%, -50%); }
  }
  .subject-empty { margin: .6rem 0 0; padding: .8rem; color: var(--fg-60); text-align: center; font: 500 .82rem/1.5 var(--font-hanzi); }
  .subject-visual { margin: .65rem 0 0; padding: .8rem .9rem .65rem; border: 1px solid var(--rule); border-radius: .8rem;
    background: var(--surface-raised); }
  .subject-visual[hidden] { display: none; }
  .subject-visual-svg { display: block; width: 100%; height: auto; max-height: 156px; margin: 0 auto; }
  .subject-visual-svg text { font-family: var(--font-hanzi); font-size: 19px; fill: var(--fg); }
  .subject-visual-svg .sv-muted { fill: var(--fg-60); font-size: 16px; }
  .subject-visual-svg .sv-line { fill: none; stroke: var(--gold-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .subject-visual-svg .sv-fill { fill: var(--gold-tint); stroke: var(--gold-ink); stroke-width: 2.5; }
  .subject-visual-svg .sv-dot { fill: var(--seed-primary); }
  .subject-visual-caption { margin-top: .3rem; color: var(--fg-60); text-align: center; font: 500 .72rem/1.45 var(--font-hanzi); }
  .subject-visual-resource { margin: .38rem 0 0; text-align: center; font: 600 .75rem/1.45 var(--font-hanzi); }
  .subject-visual-resource a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: .16em; }
  .subject-exercises { margin: 1.2rem 0 0; padding: .7rem .9rem; border: 1px solid var(--rule);
    border-radius: .8rem; background: var(--surface-raised); color: var(--fg); font-size: 1rem; line-height: 1.7; }
  .subject-exercises[hidden] { display: none !important; }
  .subject-exercises > summary { min-height: 44px; align-content: center; cursor: pointer; font-weight: 600; }
  .subject-exercises > summary:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 3px; }
  .subject-practice-text { margin: .6rem 0; overflow-wrap: anywhere; font-family: var(--font-hanzi); }
  .subject-practice-text .reading-paragraph { margin: 0; }
  .subject-practice-text .reading-paragraph + .reading-paragraph { margin-top: .35em; }
  .subject-lesson-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    margin-top: 2.2rem;
    padding-top: 1.5rem;
    border-top: 1px dashed var(--rule-2);
  }
  .subject-lesson-actions[hidden] { display: none !important; }
  .subject-lesson-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 60px;
    padding: 0;
    border: 1px solid var(--rule-2);
    border-radius: 20px;
    background: var(--surface-raised, #ffffff);
    color: var(--fg);
    cursor: pointer;
    transition: transform .12s ease, background .15s ease, border-color .15s ease, opacity .15s ease, box-shadow .15s ease, color .15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  }
  .subject-lesson-actions button svg {
    display: block;
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    pointer-events: none;
    transition: stroke .15s ease;
  }
  .subject-lesson-actions button:hover:not(:disabled) {
    background: var(--surface-raised, #ffffff);
    border-color: var(--gold-ink);
    color: var(--gold-ink);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .08);
  }
  .subject-lesson-actions button:active:not(:disabled) {
    transform: translateY(0);
  }
  .subject-lesson-actions button:disabled {
    opacity: .3;
    cursor: default;
    color: var(--fg-60);
  }
  .subject-lesson-actions button[data-subject-action="complete"].is-completed,
  .subject-lesson-actions button[data-subject-action="complete"]:disabled {
    opacity: 1;
    border-color: rgba(34, 197, 94, .55);
    background: color-mix(in oklab, #22c55e 12%, var(--surface-raised, #ffffff));
    color: #16a34a;
    cursor: default;
    box-shadow: 0 1px 3px rgba(34, 197, 94, .15);
  }
  @media (min-width: 680px) {
    .subject-visual { padding: 1rem 1.1rem .75rem; }
    .subject-visual-svg { max-height: 152px; }
  }
  @media (max-width: 640px) {
    .subject-lesson-no {
      flex-basis: 1rem;
      width: 1rem;
      height: 1rem;
      font-size: .52rem;
    }
  }
  @media (max-width: 380px) {
    .subject-panel { padding: 0 !important; }
    .subject-course-name { font-size: .82rem; }
    .subject-lesson-no { flex-basis: .94rem; width: .94rem; height: .94rem; font-size: .5rem; }
  }
  .input-shell.mode-subjects { margin-bottom: 0.65rem !important; }
  .input-shell.minimized .subject-panel { display: none; }

  /* ============ Barra livelli Vocaboli: sigillo + tipo + conti ============
     Niente pallini o pill di stato: il sigillo lacato (badgeSvg, lo stesso degli scudi di
     testa di Grammatica e Radicali) dice il livello, la sigla 字/词 dice la traccia, il
     numero è imparati/obiettivo. Caratteri = bordo oro, parole = bordo verde. */
  .lvl-kind { font-family: var(--font-hanzi); font-size: 1.08rem; line-height: 1; color: var(--fg); font-weight: 700; }
  .lvl-num { font: 700 .8rem 'Inter', sans-serif; color: var(--fg-60); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .lvl-btn.done .lvl-num { color: #15803d; }
  .lvl-btn[data-kind="chars"] { border-color: var(--rule-2); }
  .lvl-btn[data-kind="words"] { border-color: rgba(34,197,94,0.55); }
  /* Il sigillo nella barra è l'emblema principale (40px, grande come il cuore). Il livello
     non sta più sotto ma sulla stessa riga accanto a 字 e 词 («字 liv. N»). */
  .lvl-seal { flex: none; display: inline-flex; align-items: center; justify-content: center; }
  .lvl-seal .ghead-badge { --badge-size: 56px; width: 56px; height: 56px; }
  .lvl-info { display: inline-flex; align-items: baseline; gap: .35rem; white-space: nowrap; }
  .lvl-info .badge-liv { font-size: .88rem; color: var(--fg-60); font-weight: 700; }

  /* ============ Schede di vista: Lettura / Grammatica ============ */
  .view-tabs { display: flex; gap: .35rem; margin: 0 0 1rem; padding: .3rem; border-radius: 999px;
    background: rgba(253,250,243,0.06); border: 1px solid var(--rule); width: fit-content; }
  .view-tab { border: 0; background: transparent; color: rgba(253,250,243,0.72); cursor: pointer;
    font: 600 .88rem 'Inter', sans-serif; padding: .5rem 1.15rem; border-radius: 999px; transition: all .2s ease; }
  @media (hover: hover) and (pointer: fine) {
    .view-tab:hover { color: var(--paper); }
  }
  .view-tab.active { background: var(--gold); color: var(--ink); font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,0.3); }

  /* ============ Grammatica ============ */
  .grammar-shell { background: var(--paper); border: 1px solid var(--gold); border-radius: 1.2rem;
    padding: 1.1rem 1.15rem 1.35rem; box-shadow: 0 14px 34px rgba(0,0,0,0.45); }
  .grammar-head { margin-bottom: .9rem; }
  .grammar-head[hidden] { display: none !important; }
  /* Titolo + scudo + ⓘ sulla STESSA riga: mai a capo (lo scudo è il livello, va letto col
     titolo). Se lo spazio finisce è il titolo a ritirarsi coi puntini, non i comandi. */
  .grammar-head-row { display: flex; align-items: center; gap: .55rem; flex-wrap: nowrap; }
  .grammar-title { margin: 0; min-width: 0; font: 700 1.22rem 'Inter', sans-serif; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* La spiegazione sta nel riquadro ⓘ Come funziona: inchiostro su carta, interlinea comoda */
  .grammar-sub { margin: 0; font: 500 .84rem/1.6 'Inter', sans-serif; color: var(--fg-70); }
  .grammar-note { margin: .8rem 0 0; font: 600 .84rem 'Inter', sans-serif; color: #7f1414;
    background: rgba(212,160,23,0.14); border: 1px solid var(--rule-2); border-radius: .7rem; padding: .6rem .75rem; }

  /* Toolbar = UNA riga SEMPRE: «🔁 Ripassa» · 拼音 · drawer categoria. Niente wrap: i bottoni
     restringono (nome categoria con ellissi) invece di andare a capo. */
  .grammar-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; margin-bottom: 1rem; }
  .grammar-levels { flex: 0 1 auto; min-width: 0; display: flex; gap: .5rem; flex-wrap: nowrap; }
  .glvl-review, .gpy-btn, .gcat-drawer-btn, .glvl-pill-btn { min-width: 0; }
  .gcat-drawer-btn .gcd-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Pulsante livello e conteggio voci nella toolbar di grammatica */
  .glvl-pill-btn {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    background: var(--surface-raised);
    border: 1.5px solid var(--rule-2);
    border-radius: .7rem;
    padding: .5rem .75rem;
    font: 600 .82rem 'Inter', sans-serif;
    color: var(--ink);
    transition: all .15s ease;
    white-space: nowrap;
    min-width: 0;
  }
  .glvl-pill-btn:hover {
    border-color: var(--gold);
    background: #fff;
  }
  .glvl-pill-btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 1px;
  }
  .glvl-pill-btn .glvl-pill-txt {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .glvl-pill-btn .glvl-compact { display: none; }
  .glvl-pill-btn .glvl-full { display: inline; }
  .glvl-pill-btn .glvl-pill-caret {
    font-size: .68rem;
    opacity: .6;
    margin-left: .1rem;
    flex: none;
    transition: transform .18s ease;
  }
  .grammar-toolbar .ghead-wrap { position: relative; flex: 0 1 auto; min-width: 0; }
  .grammar-toolbar .ghead-wrap[aria-expanded="true"] .glvl-pill-caret,
  .grammar-toolbar .glvl-pill-btn[aria-expanded="true"] .glvl-pill-caret {
    transform: rotate(180deg);
  }
  /* ---------- Drawer categoria ---------- */
  .gcat-drawer { position: relative; flex: 0 1 auto; min-width: 0; }
  .gcat-drawer-btn { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; background: var(--surface-raised); border: 1.5px solid var(--rule-2); border-radius: .7rem; padding: .5rem .7rem; font: 700 .82rem 'Inter', sans-serif; color: var(--ink); }
  .gcat-drawer-btn:hover { border-color: var(--gold); background: #fff; }
  /* 拼音: sta in toolbar, dopo «🔁 Ripassa»; il nodo è quello nel markup (lì ha il listener). */
  .gpy-btn { flex: none; cursor: pointer; background: var(--surface-raised); border: 1.5px solid var(--rule-2); border-radius: .7rem; padding: .5rem .7rem; font: 700 .82rem 'Inter', sans-serif; color: var(--ink); transition: all .15s ease; }
  .gpy-btn:hover { border-color: var(--gold); background: #fff; }
  .gpy-btn.on { color: #7f1414; border-color: var(--accent); font-weight: 800; }
  .gcd-lvl { margin-left: .2rem; font: 700 .68rem 'Inter', sans-serif; color: var(--accent); background: rgba(194,43,43,0.08); border: 1px solid rgba(194,43,43,0.22); padding: .06rem .35rem; border-radius: .35rem; white-space: nowrap; }
  .gcd-n { margin-left: .15rem; font: 700 .66rem 'Inter', sans-serif; color: rgba(0,0,0,0.5); font-variant-numeric: tabular-nums; }
  .gcd-caret { font-size: .68rem; transition: transform .18s ease; }
  .gcat-drawer.open .gcd-caret { transform: rotate(180deg); }
  .gcat-drawer-panel { position: absolute; z-index: 40; top: calc(100% + .3rem); left: 0; right: auto; min-width: min(17rem, 84vw); max-height: 60vh; overflow-y: auto; display: grid; gap: .12rem; padding: .3rem; background: var(--surface-raised); border: 1px solid var(--rule-2); border-radius: .8rem; box-shadow: 0 12px 30px rgba(0,0,0,0.18); }
  .gcat-drawer-panel[hidden] { display: none; }
  .gcat-opt { display: flex; align-items: center; gap: .45rem; text-align: left; cursor: pointer; background: transparent; border: 0; border-radius: .55rem; padding: .5rem .55rem; font: 600 .82rem 'Inter', sans-serif; color: rgba(0,0,0,0.7); }
  .gcat-opt:hover { background: rgba(212,160,23,0.12); }
  .gcat-opt.active { color: #7f1414; font-weight: 800; background: rgba(194,43,43,0.06); }
  .gcat-opt.is-done { color: #15803d; }
  .gcat-opt .gcat-zh { font-size: .86rem; }
  .gcat-opt-n { margin-left: auto; padding-left: .5rem; font: 700 .68rem 'Inter', sans-serif; color: rgba(0,0,0,0.4); font-variant-numeric: tabular-nums; }
  .gcat-opt-n.is-done { color: #16a34a; font-weight: 800; }
  /* ---------- Tre bottoni sulla riga: «Esempi» · «Esercizi» · «Fatto» ---------- */
  .gd-actions-bar { display: flex; gap: .5rem; align-items: stretch; margin: 1.15rem 0 .9rem; width: 100%; }
  .gd-actions-bar .gd-btn {
    flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    cursor: pointer; background: var(--surface-raised); border: 1.5px solid var(--rule-2); border-radius: .7rem;
    padding: .52rem .5rem; font: 700 .82rem/1.2 'Inter', sans-serif; color: var(--ink); white-space: nowrap;
    transition: all .15s ease; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  }
  .gd-actions-bar .gd-btn:hover { border-color: var(--gold); color: var(--ink); }
  .gd-actions-bar .gd-btn:active { transform: scale(.98); }
  .gd-actions-bar .gd-btn .gd-btn-car { display: inline-block; font-size: .72rem; color: rgba(0,0,0,0.5); transition: transform .18s ease; }
  .gd-actions-bar .gd-btn.open { color: #7f1414; border-color: var(--accent); background: rgba(185,28,28,0.06); font-weight: 800; }
  .gd-actions-bar .gd-btn.open .gd-btn-car { transform: rotate(90deg); color: #7f1414; }
  .gd-actions-bar .gd-done { background: var(--surface-raised); }
  .gd-actions-bar .gd-done.is-done { color: #15803d; border-color: rgba(21,128,61,0.45); background: rgba(21,128,61,0.08); font-weight: 800; }
  .gd-actions-bar .gd-done.is-done:hover { border-color: #15803d; color: #14532d; }
  .gd-secbody { display: none; }
  .gd-secbody.open { display: block; }
  .gd-secbody[data-gsecbody="dr"] { margin-top: .75rem; }
  @media (max-width: 480px) {
    .gd-actions-bar { gap: .35rem; margin: .95rem 0 .75rem; }
    .gd-actions-bar .gd-btn { padding: .48rem .35rem; font-size: .76rem; gap: .25rem; }
    .gd-actions-bar .gd-btn .gd-btn-car { font-size: .65rem; }
  }
  @media (pointer: coarse) {
    .gd-actions-bar .gd-btn { min-height: 42px; }
  }

  /* Il livello aperto lo dice SOLO lo scudo, sulla riga del titolo (Grammatica e Radicali):
     dentro la frazione «1/20» — il numero grande e lo «/20» più piccolo, un pelino più in
     basso. I livelli già finiti non si elencano: «🔁 Ripassa» apre la carrellata di esercizi
     presi da lì. --frac = la variante larga quanto serve ai due numeri. */
  .ghead-shield { flex: none; display: inline-flex; }
  /* Scudo di testa cliccabile: apre il drawer dei livelli (stesso pattern del drawer categoria) */
  .ghead-wrap { position: relative; flex: none; }
  button.ghead-shield { border: 0; background: none; padding: 0; margin: 0; font: inherit; cursor: pointer; flex-direction: column; align-items: center; gap: .1rem; }
  /* ==========================================================================
   * HANZI READER — ANIMAZIONI E STILI SIGILLI DI LIVELLO
   * ========================================================================== */

  :root {
    --badge-size: 72px;
    --badge-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --badge-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* ---------- 1. Contenitore principale del sigillo ---------- */
  .ghead-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--badge-size);
    height: var(--badge-size);
    user-select: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
      transform 0.45s var(--badge-ease-out),
      filter 0.45s var(--badge-ease-out);
    will-change: transform, filter;
  }

  .ghead-badge svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    display: block;
  }

  .ghead-shield .ghead-badge { --badge-size: 44px; width: 44px; height: 44px; }

  /* ---------- 2. Effetto Hover: Sollevamento 3D e Bagliore Metallico ---------- */
  .ghead-badge:hover {
    transform: translateY(-4px) scale(1.06);
    filter:
      drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35))
      drop-shadow(0 0 10px rgba(255, 230, 160, 0.35))
      brightness(1.07);
  }

  .ghead-badge:active {
    transform: translateY(-1px) scale(0.98);
    transition-duration: 0.12s;
  }

  /* Lama di luce speculare che attraversa il disco al passaggio del mouse */
  .ghead-badge::after {
    content: "";
    position: absolute;
    /* Ritaglia il riflesso esattamente sul diametro del disco metallico (r=38 su 96) */
    inset: 10.5%;
    border-radius: 50%;
    pointer-events: none;
    background: linear-gradient(
      115deg,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 250, 220, 0.55) 46%,
      rgba(255, 255, 255, 0.85) 50%,
      rgba(255, 250, 220, 0.55) 54%,
      rgba(255, 255, 255, 0) 80%
    );
    background-size: 260% 260%;
    background-position: 160% 160%;
    mix-blend-mode: overlay;
    opacity: 0;
    transition:
      background-position 0.75s var(--badge-ease-out),
      opacity 0.3s ease;
  }

  .ghead-badge:hover::after {
    opacity: 1;
    background-position: -40% -40%;
  }

  /* ---------- 3. Medaglione Centrale (.sc-med) — Rotazione Rituale ---------- */
  .ghead-badge .sc-med {
    /* Ancora il perno di rotazione esattamente al centro (48, 48) del viewBox 96x96 */
    transform-box: view-box;
    transform-origin: 48px 48px;
    transition:
      transform 0.9s var(--badge-ease-out),
      filter 0.45s ease;
  }

  /* Nei sigilli non ancora completati, il medaglione ruota di 45° o 90° all'hover */
  .ghead-badge:not(.sc-done):hover .sc-med {
    transform: rotate(45deg) scale(1.03);
  }

  /* ---------- 4. Stato Completato (.sc-done) e Timbro Imperiale (.sc-flag) ---------- */
  .ghead-badge.sc-done {
    filter: drop-shadow(0 0 8px rgba(242, 215, 138, 0.25));
  }

  /* Rotazione perpetua lenta del simbolo sacro nei livelli completati */
  .ghead-badge.sc-done .sc-med {
    animation: sc-med-orbit 28s linear infinite;
  }

  /* All'hover su un sigillo completato, la rotazione accelera leggermente */
  .ghead-badge.sc-done:hover .sc-med {
    animation-duration: 9s;
    filter: drop-shadow(0 0 3px rgba(255, 245, 200, 0.55));
  }

  /* Bollino di completamento in stile ceralacca / oro imperiale */
  .ghead-badge .sc-flag {
    position: absolute;
    right: 4%;
    bottom: 4%;
    width: 26%;
    height: 26%;
    min-width: 16px;
    min-height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--badge-size) * 0.16);
    font-weight: 800;
    line-height: 1;
    color: #fffdf6;
    background: radial-gradient(circle at 32% 28%, #ff6b52 0%, #c91e23 55%, #6e070c 100%);
    border: 1.5px solid #f2d78a;
    box-shadow:
      0 2px 5px rgba(0, 0, 0, 0.55),
      inset 0 1px 1.5px rgba(255, 255, 255, 0.45);
    pointer-events: none;
    transform-origin: center;
    animation: sc-flag-stamp 0.5s var(--badge-ease-spring) backwards;
  }

  /* ---------- 5. Animazione di Sblocco (.sc-unlocking) ---------- */
  /* Aggiungi la classe .sc-unlocking via JS quando l'utente completa il livello */
  .ghead-badge.sc-unlocking {
    animation: sc-badge-unlock 1.15s var(--badge-ease-spring) forwards;
  }

  .ghead-badge.sc-unlocking .sc-med {
    animation:
      sc-med-unlock-spin 1.15s var(--badge-ease-out) forwards,
      sc-med-orbit 28s linear 1.15s infinite;
  }

  /* Onda d'urto luminosa espansiva al momento dello sblocco */
  .ghead-badge.sc-unlocking::before {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    border: 2px solid #fff5b5;
    box-shadow: 0 0 18px rgba(255, 225, 130, 0.85);
    pointer-events: none;
    animation: sc-shockwave 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .ghead-badge.sc-unlocking .sc-flag {
    animation: sc-flag-stamp 0.55s var(--badge-ease-spring) 0.45s backwards;
  }

  /* ---------- 5b. Animazione celebrativa fluida e lenta al clic di "NEW" (.sc-animate) ---------- */
  .ghead-badge.sc-animate {
    animation: sc-badge-celebrate 1.6s cubic-bezier(0.25, 1, 0.35, 1) forwards !important;
  }

  .ghead-badge.sc-animate.sc-done {
    animation-name: sc-badge-celebrate-done !important;
  }

  .ghead-badge.sc-animate::after {
    animation: sc-shine-sweep 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  }

  .ghead-badge.sc-animate:not(.sc-done) .sc-med {
    animation: sc-med-ritual-turn 1.6s cubic-bezier(0.33, 1, 0.68, 1) forwards !important;
  }

  .ghead-badge.sc-animate.sc-done .sc-med {
    animation: sc-med-ritual-turn 1.6s cubic-bezier(0.33, 1, 0.68, 1) forwards, sc-med-orbit 28s linear 1.6s infinite !important;
  }

  /* ---------- 5c. Sigilli nella barra livelli: stato attivo vs non selezionato ---------- */
  .vocab-levels .lvl-btn-study:not(.active) .lvl-seal .ghead-badge,
  .vocab-levels .lvl-btn-grammar:not(.active) .lvl-seal .ghead-badge {
    filter: grayscale(1) opacity(0.52);
    transition:
      filter 0.5s ease,
      opacity 0.5s ease,
      transform 0.45s var(--badge-ease-out);
  }

  .vocab-levels .lvl-btn-study.active .lvl-seal .ghead-badge,
  .vocab-levels .lvl-btn-grammar.active .lvl-seal .ghead-badge {
    filter: none;
    opacity: 1;
    transition:
      filter 0.5s ease,
      opacity 0.5s ease,
      transform 0.45s var(--badge-ease-out);
  }

  .vocab-levels .lvl-btn-study.active .lvl-seal .ghead-badge.sc-done,
  .vocab-levels .lvl-btn-grammar.active .lvl-seal .ghead-badge.sc-done {
    filter: drop-shadow(0 0 8px rgba(242, 215, 138, 0.25));
  }

  @media (hover: hover) {
    .vocab-levels .lvl-btn-study:not(.active):hover .lvl-seal .ghead-badge,
    .vocab-levels .lvl-btn-grammar:not(.active):hover .lvl-seal .ghead-badge {
      filter: grayscale(0.25) opacity(0.85);
    }
  }

  /* ---------- 6. Keyframes ---------- */
  @keyframes sc-med-orbit {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  @keyframes sc-med-unlock-spin {
    0%   { transform: rotate(-180deg) scale(0.6); opacity: 0.4; }
    60%  { transform: rotate(20deg) scale(1.08); opacity: 1; }
    100% { transform: rotate(0deg) scale(1); }
  }

  @keyframes sc-badge-unlock {
    0% {
      transform: scale(0.55);
      filter: brightness(0.6) saturate(0.4);
    }
    42% {
      transform: scale(1.22) translateY(-6px);
      filter:
        brightness(1.45)
        drop-shadow(0 12px 24px rgba(0, 0, 0, 0.45))
        drop-shadow(0 0 22px rgba(255, 225, 130, 0.95));
    }
    72% {
      transform: scale(0.96);
      filter: brightness(1.1) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
    }
    100% {
      transform: scale(1);
      filter: drop-shadow(0 0 8px rgba(242, 215, 138, 0.25));
    }
  }

  @keyframes sc-shockwave {
    0% {
      transform: scale(0.75);
      opacity: 1;
      border-width: 3.5px;
    }
    100% {
      transform: scale(1.65);
      opacity: 0;
      border-width: 0.5px;
    }
  }

  @keyframes sc-flag-stamp {
    0% {
      transform: scale(0) rotate(-35deg);
      opacity: 0;
    }
    70% {
      transform: scale(1.2) rotate(8deg);
      opacity: 1;
    }
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 1;
    }
  }

  @keyframes sc-badge-celebrate {
    0% {
      transform: translateY(0) scale(1);
      filter: none;
    }
    30% {
      transform: translateY(-5px) scale(1.08);
      filter:
        drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35))
        drop-shadow(0 0 14px rgba(255, 230, 160, 0.45))
        brightness(1.08);
    }
    70% {
      transform: translateY(-2px) scale(1.04);
      filter:
        drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25))
        drop-shadow(0 0 8px rgba(255, 230, 160, 0.3))
        brightness(1.04);
    }
    100% {
      transform: translateY(0) scale(1);
      filter: none;
    }
  }

  @keyframes sc-badge-celebrate-done {
    0% {
      transform: translateY(0) scale(1);
      filter: drop-shadow(0 0 8px rgba(242, 215, 138, 0.25));
    }
    30% {
      transform: translateY(-5px) scale(1.08);
      filter:
        drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35))
        drop-shadow(0 0 16px rgba(255, 230, 160, 0.65))
        brightness(1.1);
    }
    70% {
      transform: translateY(-2px) scale(1.04);
      filter:
        drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25))
        drop-shadow(0 0 10px rgba(255, 230, 160, 0.45))
        brightness(1.05);
    }
    100% {
      transform: translateY(0) scale(1);
      filter: drop-shadow(0 0 8px rgba(242, 215, 138, 0.25));
    }
  }

  @keyframes sc-shine-sweep {
    0% {
      opacity: 0;
      background-position: 160% 160%;
    }
    18% {
      opacity: 1;
    }
    72% {
      opacity: 1;
      background-position: -40% -40%;
    }
    100% {
      opacity: 0;
      background-position: -40% -40%;
    }
  }

  @keyframes sc-med-ritual-turn {
    0% {
      transform: rotate(0deg) scale(1);
    }
    50% {
      transform: rotate(180deg) scale(1.06);
      filter: drop-shadow(0 0 5px rgba(255, 245, 200, 0.6));
    }
    100% {
      transform: rotate(360deg) scale(1);
      filter: none;
    }
  }

  /* ---------- 7. Accessibilità (Reduced Motion) ---------- */
  @media (prefers-reduced-motion: reduce) {
    .ghead-badge,
    .ghead-badge::after,
    .ghead-badge .sc-med,
    .ghead-badge.sc-animate,
    .ghead-badge.sc-animate::after,
    .ghead-badge.sc-animate .sc-med {
      transition: none !important;
      animation: none !important;
    }
  }
  .badge-liv { display: block; font: 700 .58rem/1.1 'Inter', sans-serif; color: var(--fg-60); letter-spacing: .05em; white-space: nowrap; }
  /* Il drawer dei livelli è ancorato a SINISTRA: lo scudo sta in testa alla riga (è il primo
     elemento), quindi ancorarlo a destra lo faceva uscire dallo schermo. Lo stesso vale per
     i Radicali, che usano questa struttura. */
  .ghead-pop { position: absolute; z-index: 45; top: calc(100% + .4rem); left: 0; right: auto; min-width: min(17rem, 84vw); max-height: 60vh; overflow-y: auto; display: grid; gap: .12rem; padding: .3rem; background: var(--surface-raised); border: 1px solid var(--rule-2); border-radius: .8rem; box-shadow: 0 12px 30px rgba(0,0,0,0.18); }
  .ghead-pop[hidden] { display: none; }
  .ghead-pop-header { padding: .35rem .5rem .35rem; border-bottom: 1px solid var(--rule); margin-bottom: .2rem; }
  .ghead-pop-t { margin: 0; font: 700 .76rem 'Inter', sans-serif; color: #7f1414; }
  .ghead-pop-sub { margin: .15rem 0 0; font: 500 .68rem/1.25 'Inter', sans-serif; color: var(--fg-60); }
  .ghead-lv { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border: 0; background: none; border-radius: .55rem; cursor: pointer; font: 600 .8rem 'Inter', sans-serif; color: var(--ink); text-align: left; }
  .ghead-lv:hover { background: rgba(212,160,23,0.14); }
  .ghead-lv.is-cur { background: rgba(212,160,23,0.22); }
  .ghead-lv[disabled] { opacity: .45; cursor: not-allowed; }
  .ghead-lv .gln { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ghead-lv .gld { flex: none; font-weight: 500; color: var(--ink-60, #6b5f4d); }
  .glvl-shield.glvl-shield--frac { width: 46px; height: 52px; }
  .glvl-shield.glvl-shield--frac .sc-num { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
  .glvl-shield.glvl-shield--frac .sc-int { font-size: .84rem; }
  .glvl-shield.glvl-shield--frac .sc-den { font-size: .53rem; transform: translateY(.16em); }
  /* Qui il ✓ di .sc-done non aggiunge nulla: lo «/20» dice già dove si arriva. */
  .glvl-shield.glvl-shield--frac.sc-done .sc-num::after { content: ''; }
  /* «🔁 Ripassa» in toolbar: solo emoji verde come gli altri (Vocaboli e Radicali) */
  .glvl-review { flex: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: .7rem; padding: .5rem .7rem; transition: all .15s ease; color: #15803d; border: 1.5px solid rgba(21,128,61,0.42); background: rgba(21,128,61,0.07); }
  .glvl-review:hover:not([disabled]) { border-color: #15803d; color: #14532d; background: rgba(21,128,61,0.14); }
  .glvl-review[disabled] { opacity: .45; cursor: default; }
  .glvl-review.on,
  .glvl-review[aria-pressed="true"] { border-color: var(--ok); background: rgba(21,128,61,0.18); color: #14532d; font-weight: 800; }
  .glvl-review .sess-ico { display: inline-block; font-size: 1.02rem; line-height: 1; filter: hue-rotate(-100deg) saturate(1.1) brightness(1.02); }
  .glvl-review .rv-name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  /* Su telefono le tre etichette intere non entrano (misurato: 369px contro 314 su iPhone 390).
     Si compatta: lo scudo e gli spazi calano e il nome della categoria non si ripete — è già
     scritto per intero nell'intestazione della scheda (🧱 «Struttura della frase»). Sotto i
     380px anche «Ripassa» resta sola icona: i comandi restano tre, su una riga sola. */
  @media (max-width: 700px) {
    .grammar-head-row { gap: .35rem; }
    .glvl-shield.glvl-shield--frac { width: 32px; height: 39px; }
    .glvl-shield.glvl-shield--frac .sc-num { font-size: .6rem; letter-spacing: -.03em; }
    .glvl-shield.glvl-shield--frac .sc-int { font-size: .62rem; }
    .glvl-shield.glvl-shield--frac .sc-den { font-size: .4rem; }
    .grammar-toolbar { position: relative; gap: .4rem; }
    .glvl-review, .gpy-btn, .gcat-drawer-btn, .glvl-pill-btn { padding: .45rem .55rem; }
    .glvl-pill-btn .glvl-full { display: none; }
    .glvl-pill-btn .glvl-compact { display: inline; }
    .grammar-toolbar .ghead-wrap { position: static; }
    .grammar-toolbar .ghead-pop { left: 0; right: 0; width: 100%; min-width: 0; box-sizing: border-box; }
    .gcat-drawer-btn .gcd-name { display: none; }
  }
  @media (max-width: 380px) {
    .glvl-review .rv-name { display: none; }
  }
  /* Ripasso: carrellata di SOLI esercizi (i livelli già passati non si elencano). */
  .grv { display: flex; flex-direction: column; gap: .55rem; }
  .grv-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
  .grv-t { font: 700 .8rem 'Inter', sans-serif; color: #7f1414; }
  .grv .gdrill { margin-bottom: 0; }
  .grv-end { margin: 0; font: 700 .82rem 'Inter', sans-serif; color: var(--fg-60); }
  .grv-end.ok { color: #14532d; }
  .grv-end.warn { color: #7f1d1d; }
  /* Scudo di livello: forma a clip-path, gradiente per livello e numero dentro */
  .glvl-shield { position: relative; flex: none; width: 46px; height: 54px; display: grid; place-items: center; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.18)); }
  .glvl-shield .scudo { position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 13%, 100% 52%, 50% 100%, 0 52%, 0 13%); background: linear-gradient(160deg, var(--scA, #b3b9c0), var(--scB, #6b7075)); }
  .glvl-shield .sc-num { position: relative; font: 800 1.15rem 'Inter', sans-serif; color: var(--scT, #fff); line-height: 1; text-shadow: 0 1px 1px rgba(0,0,0,0.22); }

  .grammar-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
  /* Anteprima concetti: solo caratteri cinesi (senza pinyin), griglia compatta su 1–2 righe */
  .grammar-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: .45rem; max-height: 7.95rem; overflow-y: auto; padding-right: .2rem; margin: 0 0 1rem; align-content: start; }
  .gpv { position: relative; min-height: 2.85rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .08rem; cursor: pointer; background: var(--surface-raised); border: 1px solid var(--rule); border-radius: .65rem; padding: .35rem .25rem; transition: all .15s ease; font-family: 'Inter', sans-serif; }
  .gpv:hover { border-color: var(--gold); background: #fff; }
  .gpv.active { border-color: var(--accent); }
  .gpv.done { border-color: rgba(34,197,94,0.55); }
  .gpv-zh { max-width: 100%; font-family: var(--font-hanzi); font-size: 1.02rem; font-weight: 600; color: var(--ink); line-height: 1.15; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .gpv.active .gpv-zh { color: var(--accent); font-weight: 800; }
  .gpv-py { display: none; }
  .gpv-tick { position: absolute; top: .06rem; right: .18rem; font: 700 .64rem 'Inter', sans-serif; color: var(--ok); }

  /* (via le vecchie card .gcard: i tile di anteprima .gpv sono definiti sopra) */
  .gcard-tick { grid-area: tick; justify-self: end; font: 700 .74rem 'Inter', sans-serif; color: var(--ok); white-space: nowrap; }

  /* Etichette di tipo: le chip-filtro sono sostituite dal drawer in toolbar,
     .gcat-zh resta per l'intestazione del dettaglio. */
  .gcat-zh { font-family: var(--font-hanzi); font-weight: 600; }
  .gd-cat { display: inline-flex; align-items: center; gap: .3rem; margin: .55rem 0 0;
    font: 600 .7rem 'Inter', sans-serif; color: #7f5f00; background: rgba(212,160,23,0.16);
    border-radius: 999px; padding: .2rem .6rem; }
  .gd-cat .gcat-zh { font-size: .76rem; }
  /* Badge dei programmi ufficiali: 等级标准 (grado) o 语文 (dominio scolastico) */
  .gcard-std { flex: none; font: 600 .62rem var(--font-hanzi);
    color: #7f1414; background: rgba(185,28,28,0.07); border: 1px solid rgba(185,28,28,0.16);
    border-radius: 999px; padding: .1rem .42rem; white-space: nowrap; }
  .gcard-std.yw { color: #166534; background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.26); }
  .gcard-std.hsk { font-family: 'Inter', sans-serif; color: rgba(0,0,0,0.55);
    background: rgba(26,20,16,0.05); border-color: rgba(26,20,16,0.14); }
  .grammar-empty { font: 500 .82rem 'Inter', sans-serif; color: rgba(0,0,0,0.5); padding: .3rem .1rem; }

  /* ---------- Sezione Vocaboli ----------
     Sta sulla CARTA come le altre viste: il primo prototipo la dipingeva sul legno,
     quindi titolo e spiegazioni (inchiostro chiaro) erano invisibili su #fdfaf3. */
  .vocab-head { display: none !important; }
  .vocab-head-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
  .vocab-title { margin: 0; font: 700 1.15rem 'Inter', sans-serif; color: var(--fg); }
  .vocab-sub { margin: .3rem 0 0; font: 500 .82rem/1.55 'Inter', sans-serif; color: var(--fg-70); max-width: 66ch; }
  .vocab-levels {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 1rem;
    position: relative;
  }
  .vocab-levels .levels-bar {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* Shared study path with a compact favorites button. */
  .vocab-levels .levels-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .45rem; align-items: stretch; }
  .lvl-btn-grammar .lvl-info, .lvl-btn-study .lvl-info { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12rem; min-width: 0; text-align: center; }
  .lvl-path-name { font-size: .95rem; font-weight: 750; line-height: 1.2; }
  .lvl-path-level { font-size: .65rem; font-weight: 500; line-height: 1.2; opacity: .5; }
  .lvl-path-title { font-size: .85rem; font-weight: 700; }
  .lvl-path-progress { font-size: .74rem; color: var(--fg-60); font-variant-numeric: tabular-nums; font-weight: 600; }
  .lvl-path-caption { display: none !important; }
  .sprev { position: relative; }
  .sf-kind { display: block; font-size: .68rem; color: var(--fg-60); }
  .sf-related { margin-top: .45rem; }
  .sf-related > div { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
  .sf-related button { border: 1px solid var(--rule); border-radius: .4rem; padding: .2rem .45rem; background: transparent; color: inherit; font-size: .9rem; cursor: pointer; }
  .sf-related button:hover { border-color: var(--gold); }
  .vocab-levels .levels-row.levels-row-note { grid-template-columns: minmax(0, 1fr); }
  .vocab-levels .lvl-btn { min-width: 0; justify-content: center; padding: .3rem .55rem; gap: .45rem; }
  .vocab-levels .lvl-btn-fav {
    aspect-ratio: auto;
    padding: 0;
    min-width: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .15s ease;
  }
  .vocab-levels .lvl-btn-fav:hover {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: scale(1.06);
  }
  .vocab-levels .lvl-btn-fav.active {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: scale(1.06);
  }
  .vocab-levels .lvl-btn-fav .ghead-badge { --badge-size: 40px; width: 40px; height: 40px; }
  .vocab-levels .lvl-seal .ghead-badge { --badge-size: 56px; width: 56px; height: 56px; }
    /* ============ Bottone Lente Ricerca 3D Header (senza contorno) ============ */
  .btn-search-3d {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 1;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), filter 0.24s ease;
  }
  .btn-search-3d .search-3d-svg {
    display: block;
    width: 40px;
    height: 40px;
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .btn-search-3d:hover {
    transform: translateY(-2px) scale(1.08);
    filter: drop-shadow(0 4px 12px rgba(212, 160, 23, 0.42));
  }
  .btn-search-3d:active {
    transform: translateY(1px) scale(0.95);
    filter: none;
  }
  .btn-search-3d:focus-visible {
    outline: 2px dashed var(--gold, #d4a017) !important;
    outline-offset: 4px;
    border-radius: 8px;
  }
  @media (max-width: 640px) {
    .btn-search-3d .search-3d-svg {
      width: 36px;
      height: 36px;
    }
  }

  /* ============ Bottone Calendario 3D Header (senza contorno) ============ */
  .btn-cal-3d {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 1;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), filter 0.24s ease;
  }
  .btn-cal-3d .cal-3d-svg {
    display: block;
    width: 40px;
    height: 40px;
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .btn-cal-3d:hover {
    transform: translateY(-2px) scale(1.08);
    filter: drop-shadow(0 4px 12px rgba(37, 99, 235, 0.32));
  }
  .btn-cal-3d:active {
    transform: translateY(1px) scale(0.95);
    filter: none;
  }
  .btn-cal-3d:focus-visible {
    outline: 2px dashed var(--gold, #d4a017) !important;
    outline-offset: 4px;
    border-radius: 8px;
  }
  @media (max-width: 640px) {
    .btn-cal-3d .cal-3d-svg {
      width: 36px;
      height: 36px;
    }
    .vocab-levels { padding: 0; }
    .vocab-levels .levels-row { gap: .32rem; }
    .vocab-levels .lvl-btn { padding: .25rem .4rem; gap: .35rem; }
    .vocab-levels .lvl-btn-fav { padding: 0; min-width: 0; }
  }
  .vocab-levels-hint { margin: .6rem 0 0; font: 500 .74rem/1.55 'Inter', sans-serif; color: var(--fg-60); }
  .vocab-levels-hint em { font-style: normal; font-weight: 700; color: var(--fg); }
  .vocab-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-items: start; }
  .legend-page { margin: 1.6rem 0 0; }
  /* ---------- Sezione Radicali ----------
     Sulla carta come Vocaboli/Grammatica: titolo + ⓘ collassato, scudo-numeri sulla riga
     del titolo (nessuna fascia di progresso: i conti stanno solo nel tooltip). */
  .rad-head { margin: 0 0 .9rem; }
  .rad-head-row { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
  .rad-title { margin: 0; font: 700 1.15rem 'Inter', sans-serif; color: var(--fg); }
  .rad-sub { margin: .3rem 0 0; font: 500 .82rem/1.55 'Inter', sans-serif; color: var(--fg-70); max-width: 66ch; }
  .rad-sub b { color: var(--fg); font-weight: 700; }
  /* Scudo di livello nelle misure compatte: barra livelli Vocaboli (i Radicali stanno in
     testa alla riga del titolo con --frac, come la Grammatica).
     .sc-done = il ✓ accanto al numero (traccia o livello finito). Sta qui perché deve
     vincere su .glvl-shield, dichiarato sopra nella zona Grammatica. */
  .glvl-shield--sm { width: 30px; height: 35px; }
  .glvl-shield--sm .sc-num { font-size: .84rem; }
  .glvl-shield.sc-done .sc-num::after { content: '✓'; font-size: .62em; margin-left: .04em; }
  /* Il livello si vede dallo scudo accanto al titolo; sotto restano solo i conti e la barretta.
     La fila di quadratini «1..20» non c'è più: i livelli già fatti si riprendono con «🔁 Ripassa». */
  .rad-stage { margin: 0 0 .7rem; max-width: 46rem; }
  .rad-focus .rf-main { flex: 1 1 auto; min-width: 0; }
  .rf-glyph { font-family: var(--font-hanzi); font-size: clamp(2.3rem, 8vw, 3.4rem); font-weight: 600; line-height: 1.1; color: var(--seed-primary); }
  .rf-py { font: 700 .92rem 'Inter', sans-serif; color: var(--gold-ink); margin-top: .1rem; }
  .rf-mean { font: 500 .84rem/1.4 'Inter', sans-serif; color: var(--fg); margin-top: .1rem; }
  .rf-note { font: italic 500 .74rem/1.4 'Inter', sans-serif; color: var(--fg-60); margin-top: .12rem; }
  .rf-ex { margin-top: .34rem; font: 500 .76rem/1.45 'Inter', sans-serif; color: var(--fg-60); }
  .rf-ex .zh { font-family: var(--font-hanzi); font-weight: 600; color: var(--fg); }
  .rad-focus.done { border-color: rgba(34,197,94,0.6); background: rgba(34,197,94,0.07); }
  /* Riga 2: gli 5 in gioco, tutti allo stesso piano. La selezione è segnalata SOLO dal
     colore (+ grassetto): niente cornice, niente sfondo, niente zoom del glifo. */
  #radStrip .radprev { position: relative; flex: 1 1 0; min-width: 0; max-width: 14rem; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .06rem;
    min-height: 3.2rem; background: none; border: 0; border-radius: .7rem; padding: .42rem .25rem;
    font-family: 'Inter', sans-serif; color: var(--fg-60); }
  #radStrip .radprev .rp-g { font-family: var(--font-hanzi); font-size: 1.55rem; font-weight: 600; line-height: 1.2; color: var(--fg-60); }
  #radStrip .radprev .rp-p { font: 600 .62rem/1.25 'Inter', sans-serif; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #radStrip .radprev:hover .rp-g { color: var(--fg); }
  #radStrip .radprev.done .rp-g { color: var(--ok); }
  #radStrip .radprev.done::after { content: '✓'; position: absolute; top: .05rem; right: .3rem; font: 700 .62rem 'Inter', sans-serif; color: var(--ok); }
  #radStrip .radprev.sel { color: #7f1414; font-weight: 800; }
  #radStrip .radprev.sel .rp-g { color: var(--gold-ink); font-weight: 800; }
  #radStrip .radprev.sel .rp-p { color: #7f1414; }
  /* Sotto le due righe i due bottoni come nei Vocaboli: Ripassa + Nuovi. */
  .rad-actions, #radVexPanel { max-width: 46rem; }
  .session-actions .btn-soft.on { border-color: var(--gold); color: #7f1414; font-weight: 800; }

  .grammar-detail { background: var(--surface-raised); border: 1px solid var(--rule-2); border-radius: .95rem; padding: .95rem 1rem 1.1rem; }
  .gd-top { display: flex; align-items: flex-start; gap: .7rem; flex-wrap: wrap; }
  .gd-zh { font-family: var(--font-hanzi); font-size: 1.7rem; font-weight: 600; color: var(--accent); line-height: 1.25; }
  .gd-py { font: 600 .82rem 'Inter', sans-serif; color: var(--gold-ink); display: none; }
  .gd-py.on { display: block; }
  /* «Come si scrive»: in alto a destra dell’intestazione, i 田字格 del termine principale
     (la prima parte del titolo del concetto, prima di «·» o «/») animati con l’ordine dei tratti. */
  .gd-write { margin-left: auto; display: flex; align-items: flex-start; gap: .35rem; }
  .gd-write[hidden] { display: none; }
  .gd-write .gdw { border: 0; padding: 0; background: none; cursor: pointer; display: flex;
    flex-direction: column; align-items: center; gap: .12rem; font: inherit; }
  .gd-write .gdw .writer-box { border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgba(185,28,28,0.32); }
  .gd-write .gdw:active .writer-box { box-shadow: inset 0 0 0 1.5px rgba(185,28,28,0.6); }
  .gd-write .gdw-py { font: 600 .62rem 'Inter', sans-serif; color: var(--gold-ink); line-height: 1.2; display: none; }
  .gd-write .gdw-py.on { display: block; }
  .gd-write .gdw-fb { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--ink); }
  .gd-write .hw-loading .spinner { border-color: rgba(26,20,16,0.18); border-top-color: var(--accent); width: 14px; height: 14px; }
  /* Il pinyin del termine e dell’ordine dei tratti compare solo se l’interruttore «拼音» è attivo. */
  .gd-it { margin: .1rem 0 0; font: 700 1rem 'Inter', sans-serif; color: var(--ink); flex: 1 1 100%; }
  .gd-form { display: inline-block; margin: .55rem 0 0; font: 700 .76rem 'Inter', sans-serif; color: var(--ink);
    background: var(--gold); border-radius: 999px; padding: .18rem .7rem; }
  .gd-desc { margin: .6rem 0 0; font: 500 .88rem/1.6 'Inter', sans-serif; color: rgba(0,0,0,0.75); }
  .gd-tip { margin: .6rem 0 0; font: 500 .8rem/1.5 'Inter', sans-serif; color: #7f1414;
    background: rgba(185,28,28,0.06); border-left: 3px solid var(--accent); border-radius: 0 .5rem .5rem 0; padding: .5rem .65rem; }


  /* Esempi interattivi */
  .gex { background: #fff; border: 1px solid var(--rule); border-radius: .75rem; padding: .5rem .7rem; margin-bottom: .5rem; }
  .gex-line { display: flex; align-items: center; gap: .4rem; }
  .gex-zh { flex: 1 1 auto; min-width: 0; font-family: var(--font-hanzi); font-size: 1.16rem; line-height: 1.45; color: var(--ink); }
  .gtok { position: relative; display: inline-block; cursor: pointer; padding: 0 .06em; border-radius: .2em; transition: background .15s ease, color .15s ease; }
  .gtok:hover { background: rgba(212,160,23,0.2); }
  .gtok.t-ok { background: rgba(212,160,23,0.34); }
  .gtok.active { background: rgba(212,160,23,0.42); }
  .gex-trans-btn .vex-trans-svg { width: 17px; height: 17px; flex: none; }
  .gex-trans-btn.on,
  .gex-trans-btn[aria-pressed="true"] { background: rgba(212,160,23,0.22); border-color: var(--gold); color: var(--gold); }
  .gex-py { font: 600 .78rem 'Inter', sans-serif; color: var(--gold-ink); margin-top: .15rem; display: none; }
  .gex-py.on { display: block; }
  .gex-it { font: 500 .82rem 'Inter', sans-serif; color: rgba(0,0,0,0.62); margin-top: .15rem; }
  .gex-it.on { display: block; }
  .gex-slot { display: block; margin-top: .3rem; font: 600 .7rem 'Inter', sans-serif; color: var(--ink);
    background: rgba(212,160,23,0.2); border: 1px dashed var(--gold-line); border-radius: .45rem; padding: .18rem .5rem; width: fit-content; }
  .gex-slot.on { display: block; }
  .gtok-bub { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: var(--ink); color: var(--paper); border: 1px solid var(--gold); border-radius: .5rem;
    padding: .3rem .5rem; font: 500 .72rem/1.4 'Inter', sans-serif; white-space: nowrap; max-width: 260px;
    overflow: hidden; text-overflow: ellipsis; z-index: 60; pointer-events: none; }
  .gtok-bub b { color: var(--gold); font-family: var(--font-hanzi); }

  .gex-foot { display: flex; gap: .3rem; justify-content: flex-end; flex: 0 0 auto; }
  .btn-ghost.anmi-on { background: var(--gold); border-color: var(--gold); color: var(--ink); font-weight: 700; }

  /* Esercizi */
  .gdrill { background: #fff; border: 1px solid var(--rule); border-radius: .75rem; padding: .65rem .7rem; margin-bottom: .5rem; }
  .gdrill-q { font: 600 .86rem/1.5 'Inter', sans-serif; color: var(--ink); margin: 0 0 .5rem; }
  .gdrill-n { font: 700 .68rem 'Inter', sans-serif; color: rgba(0,0,0,0.4); margin-left: .35rem; }
  .gmc-opts { display: flex; flex-direction: column; gap: .35rem; }
  .gmc-opt { text-align: left; cursor: pointer; background: var(--surface-raised); border: 1.5px solid rgba(26,20,16,0.15);
    border-radius: .6rem; padding: .45rem .6rem; font: 500 .86rem 'Inter', sans-serif; color: var(--ink); transition: all .15s ease; }
  .gmc-opt:hover { border-color: var(--gold); }
  .gmc-opt.sel { border-color: var(--accent); background: rgba(185,28,28,0.05); }
  .gmc-opt.ok { border-color: var(--ok); background: rgba(34,197,94,0.12); color: #14532d; font-weight: 700; }
  .gmc-opt.no { border-color: var(--accent); background: rgba(220,38,38,0.1); color: #7f1d1d; }
  .gmc-opt:disabled { cursor: default; opacity: .95; }
  .gwhy { display: none; margin: .5rem 0 0; font: 500 .78rem/1.5 'Inter', sans-serif; color: rgba(0,0,0,0.65);
    background: rgba(26,20,16,0.04); border-radius: .5rem; padding: .4rem .55rem; }
  .gwhy.on { display: block; }
  .gorder-slot { min-height: 2.9rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
    border: 1.5px dashed var(--gold-line); border-radius: .6rem; padding: .4rem .5rem; background: rgba(212,160,23,0.05); }
  .gorder-slot:empty::before { content: 'Tocca le parole qui sotto, nell’ordine giusto'; font: italic 500 .78rem 'Inter', sans-serif; color: rgba(0,0,0,0.38); }
  .gorder-pool { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
  .gchip { cursor: pointer; background: #fff; border: 1.5px solid rgba(26,20,16,0.18); border-radius: .55rem;
    display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15;
    padding: .3rem .6rem; font-family: var(--font-hanzi); font-size: 1rem; font-weight: 600; color: var(--ink); transition: all .15s ease; }
  .gchip:hover { border-color: var(--gold); }
  .gchip.placed { background: rgba(185,28,28,0.07); border-color: var(--accent); }
  .gchip.dim { opacity: .32; }
  /* Pinyin negli esercizi (toggle «拼音»): si mostra sotto il testo cinese di parole e opzioni */
  .gchip.pyon::after, .gmc-opt.pyon::after { content: attr(data-py); display: block; font: 600 .72rem 'Inter', sans-serif; color: var(--gold-ink); margin-top: .12rem; }
  .gchip.pyon::after { text-align: center; }
  .gmc-opt.pyon::after { text-align: left; }
  /* Pinyin su TUTTA la frase (traccia dell'esercizio ed esito «Corretto: …»): una sillaba
     sotto ogni carattere cinese, non solo sotto la parola dell'opzione. Compare solo con
     l'interruttore «拼音» (.pyon sul contenitore). */
  .gdrill-q.pyon { line-height: 1.8; }
  .gpw { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; vertical-align: baseline; font-family: var(--font-hanzi); padding: 0 .14em; }
  .gpy { display: none; }
  .pyon .gpw .gpy { display: block; font: 600 .62em 'Inter', sans-serif; color: var(--gold-ink); line-height: 1.05; margin-top: .06em; white-space: nowrap; }
  .gdrill-fix .gpw { color: var(--ink); }
  .gorder-actions { display: flex; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; align-items: center; }
  .gd-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: 1.05rem; }
  .gd-score { font: 700 .8rem 'Inter', sans-serif; color: rgba(0,0,0,0.6); }
  /* «✅ Fatto» = completato: unico comando in fondo alla scheda. Lo stato si segnala SOLO
     col colore (+ grassetto), come nelle altre viste: niente sfondo, niente cornice piena. */
  .gd-done { flex: none; cursor: pointer; background: none; border: 1.5px solid var(--rule-2);
    border-radius: .7rem; padding: .5rem .85rem; font: 700 .82rem 'Inter', sans-serif; color: var(--ink); transition: all .15s ease; }
  .gd-done:hover { border-color: var(--gold); }
  .gd-done.is-done { color: #15803d; border-color: rgba(21,128,61,0.45); font-weight: 800; }
  /* 👂 del termine: stesso bottone tondo degli altri 👂, centrato rispetto alla testa del concetto. */
  .gd-say { flex: none; align-self: flex-start; margin-top: .18rem; }

  /* In grammatica e in vocaboli la barra compare al tocco di una parola negli esempi */
  body.view-grammar .study-dock:not(.visible), body.view-vocab .study-dock:not(.visible), body.view-rad .study-dock:not(.visible) { display: none; }
  .study-dock.visible { display: flex !important; }
  .study-dock.minimized { display: none !important; }

  @media (max-width: 1023px) {
    .grammar-body { grid-template-columns: minmax(0, 1fr); }
    .grammar-strip { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
    .view-tabs { width: 100%; }
    .view-tab { flex: 1 1 0; text-align: center; }
  }
  @media (pointer: coarse) {
    .gmc-opt, .gchip, .gpv, .gcat-opt, .gcat-drawer-btn { min-height: 42px; }
    .glvl-review, .gpy-btn, .gd-done, .glvl-pill-btn { min-height: 42px; }
    .gtok { padding: .1em .12em; }
  }

  .study-panel.collapsed .study-body { display: none; }
  .btn-study-collapse { display: none; }

  /* ============ Categorie (selettore + filtri storico) ============ */
  .cat-select { max-width: 100%; appearance: none; -webkit-appearance: none;
    background-color: rgba(255,255,255,0.08); color: var(--paper); border: 1.5px solid rgba(255,255,255,0.18);
    background-image: linear-gradient(45deg, transparent 50%, rgba(212,160,23,0.9) 50%), linear-gradient(135deg, rgba(212,160,23,0.9) 50%, transparent 50%);
    background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.1rem; }
  .cat-select option { background: var(--ink); color: var(--paper); }
  .hist-cats { display: flex; flex-wrap: wrap; gap: .3rem; padding: .35rem .9rem .7rem; }
  .hist-cat {
    font: 600 .7rem 'Inter', sans-serif;
    padding: .3rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--rule);
    background: rgba(253,250,243,0.06);
    color: rgba(253,250,243,0.85);
    cursor: pointer; white-space: nowrap;
  }
  .hist-cat:hover { border-color: var(--ui-active-line); }
  .hist-cat.active { background: var(--ui-active-tint); border-color: var(--ui-active-line); color: var(--ui-active-deep); }
  .hist-badge { font-size: .68rem; color: var(--ui-active); font-weight: 600; }

  /* ==========================================================================
     ⚙️ IMPOSTAZIONI (SETTINGS MODAL REDESIGN)
     Layout moderno a schede (iOS/macOS style), contrasto impeccabile,
     piena integrazione con la palette carta/inchiostro/oro e supporto mobile.
     ========================================================================== */
  .ask-backdrop {
    position: fixed; inset: 0;
    background: rgba(26, 20, 15, 0.58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 955;
  }
  .ask-backdrop.active { opacity: 1; pointer-events: auto; }

  .ask-panel.set-modal {
    position: fixed; z-index: 960;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 1.25rem));
    max-height: min(88vh, 760px);
    max-height: min(88dvh, 760px);
    display: none; flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--rule-2);
    border-radius: 1.25rem;
    box-shadow: 0 28px 70px -10px rgba(18, 14, 10, 0.45), 0 0 1px 1px rgba(255,255,255,0.5) inset;
    overflow: hidden;
  }
  .ask-panel.set-modal.open {
    display: flex;
    animation: setModalIn 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  @keyframes setModalIn {
    from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }

  /* Intestazione del pannello */
  .set-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 1.15rem;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--rule);
    flex-shrink: 0;
    gap: 0.65rem;
  }
  .set-head-left {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    flex: 1;
  }
  .set-head-avatar-wrap {
    position: relative;
    width: 3.1rem;
    height: 3.1rem;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 50%;
    outline: none;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .set-head-avatar-wrap:hover,
  .set-head-avatar-wrap:focus-visible {
    transform: scale(1.05);
  }
  .set-head-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--gold-line);
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }
  .set-head-avatar-wrap:hover .set-head-avatar,
  .set-head-avatar-wrap:focus-visible .set-head-avatar {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--seed-primary) 25%, transparent), 0 3px 10px rgba(0, 0, 0, 0.1);
  }
  .set-head-avatar svg { width: 72%; height: 72%; display: block; }
  .set-head-avatar svg.av-wide { width: 94%; height: 94%; }
  .set-head-avatar img { width: 100%; height: 100%; object-fit: cover; }

  /* Penna di modifica: badge rotondo con icona penna in basso a destra */
  .set-avatar-pen {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--surface-raised);
    border: 1.5px solid var(--rule-2);
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-70);
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .set-head-avatar-wrap:hover .set-avatar-pen,
  .set-head-avatar-wrap:focus-visible .set-avatar-pen {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: scale(1.18);
    box-shadow: 0 2px 8px rgba(185, 28, 28, 0.35);
  }
  .set-head-avatar-wrap:active .set-avatar-pen {
    transform: scale(0.92);
  }

  .set-head-titles {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
  }
  .set-head-titles h2,
  .set-head-name {
    margin: 0;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ink);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .set-head-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }
  .set-btn-shop:active {
    transform: scale(0.97);
  }
  .set-btn-shop .shop-ic {
    font-size: 0.95rem;
    line-height: 1;
    display: inline-block;
  }
  .set-btn-shop .shop-lbl {
    display: inline !important;
  }
  .set-close-btn {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.5rem;
    border: none;
    background: transparent;
    color: var(--fg-60);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    padding: 0;
  }
  .set-close-btn:hover {
    background: rgba(194, 43, 43, 0.08);
    color: var(--accent);
    transform: translateY(2px);
  }
  .set-close-btn:active {
    transform: translateY(4px);
  }

  /* Pop-up Scelta Immagine Profilo */
  .avatar-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 25, 23, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 70;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 1.25rem;
  }
  .avatar-popup-backdrop.active {
    opacity: 1;
    pointer-events: auto;
  }
  .avatar-popup-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%) scale(0.96);
    width: min(440px, calc(100% - 2rem));
    background: var(--surface-raised);
    border: 1px solid var(--rule-2);
    border-radius: 1.15rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
    z-index: 71;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .avatar-popup-modal.open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
  }
  .avatar-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.95rem 1.15rem;
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
  }
  .avatar-popup-head-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
  }
  .avatar-popup-head-icon {
    font-size: 1.15rem;
  }
  .avatar-popup-title {
    margin: 0;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--ink);
    line-height: 1.2;
  }
  .avatar-popup-sub {
    margin: 0.15rem 0 0;
    font-size: 0.74rem;
    color: var(--fg-60);
  }
  .avatar-popup-close-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: var(--surface-raised);
    color: var(--fg-70);
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.16s ease;
  }
  .avatar-popup-close-btn:hover {
    background: rgba(194, 43, 43, 0.1);
    border-color: var(--accent);
    color: var(--accent);
    transform: rotate(90deg);
  }
  .avatar-popup-body {
    padding: 1.2rem 1.1rem 1.35rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .avatar-popup-body::-webkit-scrollbar {
    display: none;
  }
  .avatar-popup-modal .avatar-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    margin: 0;
    min-width: 0;
  }
  @media (max-width: 440px) {
    .avatar-popup-body {
      padding: 1.05rem 0.8rem 1.2rem;
    }
    .avatar-popup-modal .avatar-grid {
      gap: 0.35rem;
    }
  }
  .avatar-popup-modal .avatar-chip {
    flex: 1 1 0;
    min-width: 2.35rem;
    max-width: 3.4rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid var(--rule-2);
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .avatar-popup-modal .avatar-chip:hover {
    transform: translateY(-2px) scale(1.06);
    border-color: var(--gold);
    box-shadow: 0 4px 12px rgba(212, 160, 23, 0.2);
  }
  .avatar-popup-modal .avatar-chip.sel {
    border-color: var(--accent);
    background: var(--surface-raised);
    transform: scale(1.08);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--seed-primary) 30%, transparent), 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  /* Area a scorrimento */
  .set-scroll {
    padding: 1.1rem 1.35rem 1.75rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    scrollbar-width: thin;
    scrollbar-color: var(--rule-2) transparent;
  }
  .set-scroll::-webkit-scrollbar { width: 6px; }
  .set-scroll::-webkit-scrollbar-track { background: transparent; }
  .set-scroll::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 999px; }

  .set-dynamic-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
  }

  /* Card unificate */
  .set-card {
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    border-radius: 1rem;
    padding: 1.05rem 1.2rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    transition: border-color 0.18s ease;
  }
  .set-card:hover {
    border-color: color-mix(in oklab, var(--rule) 65%, var(--gold-line));
  }
  .set-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }
  .set-card-title-group {
    display: flex;
    align-items: center;
    gap: 0.7rem;
  }
  .set-card-icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
  }
  .set-fuffy-icon {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid var(--gold-line);
    background: var(--gold-tint);
  }
  .set-card-title {
    margin: 0;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
    line-height: 1.25;
  }
  .set-card-desc {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    color: var(--fg-60);
    line-height: 1.35;
  }


  /* Native disclosures keep secondary preferences compact and keyboard accessible. */
  details.set-collapsible { display: block; }
  .set-collapsible > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    cursor: pointer;
    list-style: none;
    min-height: 2.75rem;
    border-radius: .35rem;
  }
  .set-collapsible > summary::-webkit-details-marker { display: none; }
  .set-collapsible > summary::after {
    content: '';
    width: .45rem;
    height: .45rem;
    flex-shrink: 0;
    border-right: 2px solid var(--fg-60);
    border-bottom: 2px solid var(--fg-60);
    transform: rotate(45deg);
    margin: 0 .2rem .25rem .4rem;
  }
  .set-collapsible[open] > summary::after { transform: rotate(225deg); margin-bottom: -.25rem; }
  .set-collapsible > summary:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 4px; }
  .set-collapsible:not([open]) > summary .set-card-desc { display: none; }
  .set-collapse-body { display: flex; flex-direction: column; gap: .8rem; margin-top: .8rem; }

  /* Four preference tiles: 1 row on iPad/PC, 2x2 grid on mobile */
  .set-tile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
  .set-tile { display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .65rem; min-width: 0; min-height: 5.8rem; padding: .85rem .5rem;
    background: var(--surface-raised); border: 1px solid var(--rule); border-radius: 1rem;
    color: var(--ink); font: 700 .85rem/1.3 var(--font-ui); cursor: pointer; transition: all .16s ease; }
  .set-tile:hover { border-color: var(--gold-line); background: var(--surface); }
  .set-tile[aria-expanded="true"] { border-color: var(--accent); background: var(--primary-tint);
    box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
  .set-tile:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
  .set-tile .set-card-icon { font-size: 1.7rem; line-height: 1; }
  .set-tile .set-fuffy-icon { width: 1.9rem; height: 1.9rem; object-fit: contain; }
  .set-tile-logout:hover { border-color: rgba(194, 43, 43, 0.4); color: var(--accent); }
  .set-settings-pane[hidden] { display: none !important; }
  .set-settings-pane { min-width: 0; }
  .set-usage { display: flex; flex-direction: column; gap: .5rem; padding: .9rem;
    background: var(--surface-sunk); border: 1px solid var(--rule); border-radius: .8rem; }
  .set-usage strong { font: 700 1rem/1.4 var(--font-ui); color: var(--ink); }
  .set-usage progress { width: 100%; height: .5rem; accent-color: var(--accent); }
  #setFuffyApi:empty { display: none; }
  #setFuffyApi .set-key-code { overflow-wrap: anywhere; }
  @media (max-width: 767px) {
    .set-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .set-tile { min-height: 5.2rem; padding: .75rem .4rem; font-size: .82rem; }
  }

  /* Selettore lingua interfaccia */
  .set-lang-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  .lang-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.55rem 0.65rem;
    border-radius: 0.75rem;
    border: 1.5px solid var(--rule-2);
    background: var(--surface);
    color: var(--fg-70);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.16s ease;
  }
  .lang-pill:hover {
    border-color: var(--gold);
    background: var(--surface-raised);
    color: var(--fg);
  }
  .lang-pill[aria-pressed="true"] {
    border-color: var(--accent);
    background: var(--primary-tint);
    color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--seed-primary) 28%, transparent);
  }
  .lang-pill-code {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.75;
  }
  .lang-pill-name {
    font-size: 0.88rem;
    font-weight: 600;
  }

  /* Righe di controlli (Fuffy, ecc.) */
  .set-card-rows {
    display: flex;
    flex-direction: column;
  }
  .set-control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0;
  }
  .set-control-row + .set-control-row {
    border-top: 1px solid var(--rule);
  }
  .set-control-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }
  .set-control-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
  }
  .set-control-sub {
    font-size: 0.74rem;
    color: var(--fg-60);
    line-height: 1.35;
  }
  .set-segmented {
    display: inline-flex;
    background: var(--surface-sunk);
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    padding: 3px;
    gap: 3px;
    flex-shrink: 0;
  }
  .set-segmented .ask-lang-btn {
    border: none;
    background: transparent;
    color: var(--fg-60);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .set-segmented .ask-lang-btn.active {
    background: var(--surface-raised);
    color: var(--accent);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    font-weight: 700;
  }
  #setFuffyRow .set-card-rows { display: flex; flex-direction: column; gap: .75rem; }
  #setFuffyRow .set-control-row { display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; min-width: 0; padding: .35rem 0; border: none; background: transparent; }
  #setFuffyRow .set-segmented { display: inline-flex; border-radius: 999px; }
  #setFuffyRow .set-segmented button { min-width: 5.5rem; min-height: 38px; padding: .35rem .75rem; border-radius: 999px; font: 600 .8rem var(--font-ui); }
  @media (max-width: 480px) {
    #setFuffyRow .set-control-row { flex-direction: column; align-items: stretch; gap: .45rem; }
    #setFuffyRow .set-segmented { display: flex; width: 100%; }
    #setFuffyRow .set-segmented button { flex: 1 1 0; min-width: 0; }
  }

  /* Griglia velocità della voce */
  .rate-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
  }
  .rate-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.7rem 0.5rem;
    border-radius: 0.75rem;
    border: 1.5px solid var(--rule-2);
    background: var(--surface);
    color: var(--fg);
    cursor: pointer;
    transition: all 0.18s ease;
  }
  .rate-chip:hover {
    border-color: var(--gold);
    background: var(--surface-raised);
  }
  .rate-chip.sel {
    border-color: var(--accent);
    background: var(--primary-tint);
    color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--seed-primary) 30%, transparent);
  }
  .rate-chip .rate-val {
    font-size: 1.05rem;
    font-weight: 700;
    font-family: var(--font-ui);
  }
  .rate-chip .rate-lbl {
    font-size: 0.74rem;
    font-weight: 500;
    opacity: 0.8;
  }

  /* Griglia avatar */
  .avatar-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.55rem;
    margin-top: 0.5rem;
  }
  .avatar-chip {
    aspect-ratio: 1;
    width: 100%;
    max-width: 3.3rem;
    margin: 0 auto;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--rule-2);
    background: var(--surface);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .avatar-chip svg { width: 64%; height: 64%; display: block; }
  .avatar-chip svg.av-wide { width: 96%; height: 96%; }
  .avatar-chip:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 4px 12px rgba(212, 160, 23, 0.2);
  }
  .avatar-chip.sel {
    border-color: var(--accent);
    background: var(--surface-raised);
    transform: scale(1.06);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--seed-primary) 30%, transparent), 0 4px 10px rgba(0,0,0,0.1);
  }

  /* Account utente connesso */
  .set-user-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
    background: var(--surface-sunk);
    border: 1px solid var(--rule);
    flex-wrap: wrap;
  }
  .set-user-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .set-user-avatar-pill {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    border: 2px solid var(--gold-line);
    background: var(--surface-raised);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    overflow: hidden;
  }
  .set-user-avatar-pill svg { width: 68%; height: 68%; display: block; }
  .set-user-avatar-pill svg.av-wide { width: 94%; height: 94%; }
  .set-user-details {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }
  .set-user-name {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--ink);
  }
  .set-user-badge {
    font-size: 0.74rem;
    font-weight: 500;
    color: #15803d;
  }
  .set-user-btn-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .set-btn-shop {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gold-ink);
    text-decoration: none;
    padding: 0.35rem 0.75rem;
    border-radius: 0.55rem;
    border: 1px solid var(--gold-line);
    background: var(--gold-tint);
    transition: all 0.15s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    line-height: 1;
    white-space: nowrap;
  }
  .set-btn-shop:hover {
    background: color-mix(in oklab, var(--seed-accent) 30%, transparent);
    border-color: var(--gold);
    color: var(--gold-ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  .set-btn-logout {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    background: transparent;
    border: 1px solid color-mix(in oklab, var(--seed-primary) 30%, transparent);
    padding: 0.35rem 0.75rem;
    border-radius: 0.55rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .set-btn-logout:hover {
    background: var(--primary-tint);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(185, 28, 28, 0.25);
  }
  .set-avatar-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rule);
  }
  .set-section-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
  }
  .set-local-notice {
    padding: 0.7rem 0.85rem;
    border-radius: 0.75rem;
    background: var(--surface-sunk);
    border: 1px solid var(--rule);
  }

  /* Card Login elegante (contrasti corretti) */
  .set-login-card {
    text-align: center;
    padding: 1.35rem 1.25rem;
    border: 1px solid var(--rule-2);
    background: var(--surface-raised);
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  }
  .set-login-header { margin-bottom: 1.15rem; }
  .set-login-badge { font-size: 1.8rem; display: block; margin-bottom: 0.35rem; }
  .set-login-title {
    margin: 0 0 0.35rem;
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--gold-ink);
  }
  .set-login-sub {
    margin: 0;
    font-size: 0.82rem;
    color: var(--fg-60);
    line-height: 1.45;
    max-width: 380px;
    margin-inline: auto;
  }
  .set-google-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 0.65rem 1.25rem;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.92rem;
    background: #ffffff;
    color: #3c4043;
    border: 1px solid #dadce0;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
    transition: all 0.16s ease;
  }
  .set-google-btn:hover {
    box-shadow: 0 3px 8px rgba(0,0,0,0.16);
    background: #f8f9fa;
    border-color: #d2e3fc;
  }
  .set-login-divider {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 1.15rem auto;
    max-width: 320px;
    font-size: 0.78rem;
    color: var(--fg-60);
  }
  .set-login-divider::before,
  .set-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rule-2);
  }
  .set-login-form {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 300px;
    margin: 0 auto;
  }
  .set-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }
  .set-field label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
  }
  .set-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.75rem;
    border-radius: 0.65rem;
    background: var(--surface-sunk);
    border: 1px solid var(--rule-2);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.88rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .set-field input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface-raised);
    box-shadow: 0 0 0 3px var(--primary-tint);
  }
  .set-login-error {
    color: #b91c1c;
    background: rgba(185, 28, 28, 0.08);
    border: 1px solid rgba(185, 28, 28, 0.2);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    line-height: 1.35;
  }
  .set-submit-btn {
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(194, 43, 43, 0.25);
  }
  .set-login-footer {
    margin-top: 1.15rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--rule);
    font-size: 0.8rem;
  }
  .set-login-footer a {
    color: var(--gold-ink);
    text-decoration: none;
    font-weight: 600;
  }
  .set-login-footer a:hover { text-decoration: underline; }

  /* API Key Gemini & Reset */
  .set-key-box {
    padding: 0.75rem 0.9rem;
    border-radius: 0.75rem;
    background: var(--surface-sunk);
    border: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .set-key-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .set-status-badge {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
  }
  .set-status-badge.active {
    background: rgba(21, 128, 61, 0.12);
    color: #15803d;
    border: 1px solid rgba(21, 128, 61, 0.25);
  }
  .set-status-badge.inactive {
    background: rgba(212, 160, 23, 0.14);
    color: var(--gold-ink);
    border: 1px solid var(--gold-line);
  }
  .set-key-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.82rem;
    background: var(--surface-raised);
    border: 1px solid var(--rule-2);
    padding: 0.2rem 0.5rem;
    border-radius: 0.4rem;
    color: var(--ink);
  }
  .set-key-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .set-btn-action {
    padding: 0.5rem 1rem;
    border-radius: 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
  }
  .set-btn-danger:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--primary-tint);
  }
  .set-reset-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
  }
  .set-select {
    flex: 1;
    min-width: 10rem;
    padding: 0.6rem 0.8rem;
    border-radius: 0.7rem;
    border: 1.5px solid var(--rule-2);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 0.88rem;
    cursor: pointer;
    transition: border-color 0.15s ease;
  }
  .set-select:focus {
    outline: none;
    border-color: var(--accent);
  }
  .set-btn-reset {
    padding: 0.6rem 1.1rem;
    border-radius: 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    border: 1px solid color-mix(in oklab, var(--seed-primary) 35%, transparent);
    cursor: pointer;
  }
  .set-btn-reset:hover {
    background: var(--primary-tint);
    border-color: var(--accent);
  }

  /* Responsive mobile */
  @media (max-width: 640px) {
    .ask-panel.set-modal {
      width: 100vw;
      max-width: 100vw;
      height: 92vh;
      height: 92dvh;
      max-height: 92dvh;
      left: 0;
      right: 0;
      bottom: 0;
      top: auto;
      transform: translateY(100%);
      border-radius: 1.25rem 1.25rem 0 0;
      border-bottom: none;
      transition: transform 0.28s cubic-bezier(0.32, 1, 0.23, 1);
    }
    .ask-panel.set-modal.open {
      transform: translateY(0);
      animation: none;
    }
    .set-head { padding: 0.85rem 1rem; gap: 0.5rem; }
    .set-head-avatar-wrap { width: 2.6rem; height: 2.6rem; }
    .set-head-titles h2, .set-head-name { font-size: 1.02rem; }
    .set-head-actions { gap: 0.4rem; }
    .set-btn-shop { font-size: 0.74rem; padding: 0.35rem 0.55rem; gap: 0.25rem; }
    .set-btn-logout { font-size: 0.74rem; padding: 0.35rem 0.65rem; }
    .set-close-btn { width: 2rem; height: 2rem; }
    .set-scroll { padding: 0.9rem 1rem 2.2rem; gap: 0.85rem; }
    .set-card { padding: 0.95rem 1rem; }
    .avatar-grid { gap: 0.4rem; }
    .rate-chip { padding: 0.6rem 0.35rem; }
  }

  /* Su iPad in verticale il testo si legge meglio più grande */
  @media (min-width: 700px) and (max-width: 1023px) {
    #output { font-size: 1.6rem; line-height: 2.35; }
    .paper { border-radius: 1.25rem; }
  }

  /* ============ PC e iPad orizzontale: due colonne ============ */
  @media (min-width: 1024px) {
    .app-grid { grid-template-columns: minmax(0, 1fr) clamp(330px, 29vw, 400px); align-items: start; }
    .study-col {
      position: sticky; top: 1.25rem;
      left: auto; right: auto; bottom: auto;
      transform: none; visibility: visible;
      max-height: calc(100vh - 2.5rem);
      max-height: calc(100dvh - 2.5rem);
      padding: 0;
      scrollbar-width: thin; scrollbar-color: rgba(212,160,23,0.4) transparent;
    }
    .study-col .study-panel { border-radius: 1rem; }
    .sheet-grab, body.view-read .study-dock, .sheet-backdrop { display: none !important; }
    /* !important: .icon-btn è dichiarata più avanti e altrimenti vincerebbe */
    .btn-sheet-close { display: none !important; }
    /* Studio minimizzabile solo dove non c'è già la ✕ del foglio mobile */
    .btn-study-collapse { display: inline-flex; }
    body.has-dock .app-main { padding-bottom: 0; }
  }

  /* Bersagli tattili adeguati su iPad e telefoni */
  @media (pointer: coarse) {
    .ctl-btn, .btn-primary, .btn-ghost, .btn-soft, .btn-mode, .state-btn { min-height: 44px; }
    .icon-btn { width: 2.4rem; height: 2.4rem; font-size: 1rem; }
    .related-item { padding: 0.7rem 0.8rem; }
    .hanzi { padding: 0.2em 0.06em; }
    .legend { gap: 0.75rem; }
  }

  /* ============ Responsive: barra livelli + sessione di studio ============ */
  /* Touch: niente hover appiccicato dopo il tap, ma feedback :active */
  .lvl-btn, .sprev, .strip-arrow, .sf-tools button, .sfb, .session-actions button, .cal-cell, .cal-tab, .cal-nav, .cal-mode-btn, .cal-day-go, .cal-day-x { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .lvl-btn, .sprev, .strip-arrow, .cal-cell { user-select: none; -webkit-user-select: none; }
  @media (hover: none) {
    .sprev:not(.sel):hover, .strip-arrow:hover { transform: none; box-shadow: none; }
    .lvl-btn:hover { border-color: var(--rule); background: rgba(253,250,243,0.08); }
    .lvl-btn:active { transform: scale(.96); border-color: var(--gold); background: rgba(212,160,23,0.18); }
    .sprev:active { transform: scale(.96); }
    .strip-arrow:active:not(:disabled):not(.is-locked) { transform: scale(.95); }
    .btn-soft:active, .btn-primary:active { transform: scale(.97); }
    .cal-tab:active { transform: scale(.98); background: rgba(212,160,23,0.18); }
    .cal-cell.has-act:active { transform: scale(.93); }
    .cal-nav:active, .cal-mode-btn:active { background: rgba(212,160,23,0.22); }
    .cal-day-go:active { transform: scale(.98); }
    .cal-day-x:active { transform: scale(.9); }
  }
  @media (pointer: coarse) {
    .lvl-btn { min-height: 3.1rem; }
    .sprev, .strip-arrow { min-height: 3.5rem; }

    .sf-tools button { min-width: 2.5rem; min-height: 2.5rem; }
    .session-actions .btn-soft, .session-actions .btn-primary { min-height: 3rem; }
    /* 7 colonne su 390px danno ~39px di larghezza: l'altezza e il corpo del tocco
       si recuperano qui, e la griglia si apre di 1px per non far toccare la cella vicina. */
    .cal-grid { gap: 3px; }
    .cal-cell { min-height: 2.75rem; font-size: .84rem; }
    .cal-dot { font-size: .62rem; }
    .cal-nav { width: 2.6rem; height: 2.6rem; min-height: 2.6rem; font-size: 1.25rem; }
    .cal-mode-btn { min-height: 2.5rem; font-size: .78rem; }
    .cal-tab { min-height: 2.9rem; }
    .cal-day-x { font-size: 1.05rem; }
    .cal-day-go { font-size: .78rem; }
  }
  /* Tablet e telefoni: sigilli armoniosi nella barra livelli */
  @media (max-width: 1023px) {
    .vocab-levels .lvl-seal .ghead-badge { --badge-size: 52px; width: 52px; height: 52px; }
    .vocab-levels .lvl-btn-fav .ghead-badge { --badge-size: 38px; width: 38px; height: 38px; }
    .vocab-levels .lvl-info .badge-liv { font-size: .84rem; }
    .vocab-levels .lvl-kind { font-size: 1.18rem; }
    .lvl-num { font-size: .74rem; }
  }
  @media (max-width: 390px) {
    .vocab-levels .lvl-seal .ghead-badge { --badge-size: 48px; width: 48px; height: 48px; }
    .vocab-levels .lvl-btn-fav .ghead-badge { --badge-size: 36px; width: 36px; height: 36px; }
    .vocab-levels .lvl-info .badge-liv { font-size: .8rem; }
    .vocab-levels .lvl-kind { font-size: 1.12rem; }
    .vocab-levels .lvl-btn-fav { min-width: 0; }
  }
  /* iPad: la colonna di destra dell'header si prende lo spazio avanzato */
  @media (min-width: 768px) and (max-width: 1023px) {
    header > div:last-child { flex: 1 1 auto; }
  }
  /* Su iPad orizzontale la sessione resta a colonna unica: due colonne lascerebbero 1 scheda per riga.
     In colonna unica il calendario, essendo l'ultimo figlio della griglia, finirebbe sotto «Nuovi»:
     order:-1 lo rimette subito sotto la sua linguetta, dove l'utente lo apre. */
  @media (max-width: 1179px) {
    .session-grid { width: 100%; }
  }
  /* Telefoni: margini laterali stretti, header su una riga, azioni di sessione sulla stessa riga */
  @media (max-width: 767px) {
    /* Su 390px il body (p-4) + .app-shell rubavano 33px per parte: il contenuto restava
       di 295px. Qui si scende a ~8 + ~10px per parte, così schede e pulsanti respirano. */
    body.p-4 { padding-left: .5rem; padding-right: .5rem; }
    .app-shell { --pad-x: .6rem; }
    header { gap: .9rem; }
    /* header: profilo + storico (+ shop) sulla STESSA riga del marchio */
    .hr-top { align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: .25rem; }
    .hr-top .hr-account { gap: .25rem; flex-wrap: nowrap; }
    /* Su telefono lo schermo intero non aggiunge nulla (e iOS non ha l'Fullscreen API,
       che il JS usava già per nascondere il tasto): i 44px vanno a favore del profilo. */
    #btnFullscreen { display: none; }
    /* «↩ Shop» è già un tondo con la sola freccia: qui cambia solo la scala */
    .hr-top .hr-shop-back { width: 2.35rem; height: 2.35rem; }
    /* il tondo del profilo alla stessa scala degli strumenti della riga */
    .hr-top .hr-profile { width: 2.35rem; height: 2.35rem; }
    .hr-top .hr-icon { width: 2.35rem; height: 2.35rem; font-size: 1rem; }
    .levels-row { gap: .3rem; }
    .session-card { padding: .8rem .85rem; }
    /* Nei Vocaboli basta il riquadro della parola: la seconda cornice sommava
       margini e imbottiture, sottraendo oltre 30px alla scheda sul telefono. */
    body.view-vocab .app-shell {
      --pad-x: .5rem;
      padding-left: max(.5rem, env(safe-area-inset-left));
      padding-right: max(.5rem, env(safe-area-inset-right));
    }
    #viewVocab .session-card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    #viewVocab .sess-focus { padding: .5rem; }
    .session-head { margin-bottom: .55rem; }
    .session-head h2 { font-size: 1rem; }
    .session-group h3 { flex-wrap: wrap; row-gap: .2rem; }
    .session-band { margin-left: 0; flex-basis: 100%; text-align: left; }
    .sess-focus { gap: .5rem; padding: .6rem .6rem; border-radius: .8rem; }
    .sf-item { font-size: 2.05rem; }
    .sf-py { font-size: .85rem; }
    .sf-desc { font-size: .74rem; margin-top: .22rem; }
    .sf-tools { margin-top: .45rem; gap: .28rem; }
    .sess-strip { gap: .3rem; margin-top: .45rem; }
    .strip-arrow { flex: 0 0 1.85rem; min-width: 1.85rem; border-radius: .6rem; }
    .strip-arrow-svg { width: 1.05rem; height: 1.05rem; }
    .sprev { padding: .35rem .16rem; border-radius: .6rem; }
    .sprev-bar { bottom: 2.5px; height: 2.5px; left: 42.5%; right: 42.5%; }
    .sprev-i { font-size: 1.02rem; }
    .sprev-py { font-size: .54rem; }
    .session-actions { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: .5rem; }
    .session-actions button { width: 100%; white-space: nowrap; font-size: .8rem; padding: .7rem .5rem; }
    /* Tre comandi sulla stessa riga anche sul telefono: l'icona e «Esempi» si stringono.
       display:grid qui serve a vincere sul flex della regola base (stessa specificità,
       ma questa è più avanti nel foglio). */
    .session-actions.has-examples { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .35rem; }
    .session-actions.has-examples #btnSessFav,
    .session-actions.has-examples #btnRadReview { padding-left: .35rem; padding-right: .35rem; }
    .session-actions.has-examples .vex-tab { padding-left: .5rem; padding-right: .5rem; font-size: .76rem; }
    /* «Nuovi» NON deve più occupare la riga intera: a metà riga restava un vuoto senza senso */
    .session-actions .btn-primary { font-size: .9rem; }
  }

  /* La struttura resta prima delle varianti (per esempio .hr-icon);
     CHROME v2 definisce più avanti solo aspetto e dimensioni comuni. */
  .icon-btn {
    cursor: pointer; font-size: 0.9rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
  }
  .icon-btn:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }
  .study-head-item { font-family: var(--font-hanzi); font-size: 1.3rem; color: var(--gold); font-weight: 600; }

  /* Blocchi di significato */
  .study-zh {
    margin-top: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.6rem;
    background: rgba(212,160,23,0.1);
    border: 1px solid var(--rule);
    text-align: left;
  }
  .zh-badge {
    font-size: 0.6rem; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--gold); font-weight: 700; font-family: 'Inter', sans-serif;
  }
  .zh-text { font-family: var(--font-hanzi); font-size: 1rem; color: #fff; line-height: 1.55; margin-top: 0.15rem; }
  .zh-note { font-size: 0.64rem; color: rgba(253,250,243,0.45); margin-top: 0.25rem; font-style: italic; }
  .zh-missing { font-size: 0.78rem; color: rgba(253,250,243,0.5); font-style: italic; }

  .char-focus {
    margin-top: 1.1rem;
    padding: 0.85rem;
    border-radius: 0.75rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    text-align: left;
  }
  .cf-badge {
    font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(253,250,243,0.55); font-weight: 700;
  }
  .cf-row { display: flex; align-items: baseline; gap: 0.6rem; margin: 0.25rem 0 0.4rem; }
  .cf-char { font-family: var(--font-hanzi); font-size: 2.2rem; font-weight: 600; color: #fff; line-height: 1; }
  .cf-py { color: var(--gold); font-weight: 600; font-size: 0.95rem; }
  .cf-alt { color: rgba(253,250,243,0.45); font-size: 0.7rem; }
  .char-focus .study-desc { text-align: left; margin-top: 0.15rem; }

  /* Celle con i tratti */
  .writer-cell { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; cursor: pointer; }
  .writer-cell .writer-box { transition: box-shadow 0.2s ease; }
  .writer-cell.active .writer-box { box-shadow: inset 0 0 0 2px rgba(185,28,28,0.35), 0 0 0 3px var(--gold); }
  .writer-cell.drawing .writer-box { box-shadow: inset 0 0 0 2px rgba(185,28,28,0.35), 0 0 0 3px rgba(220,38,38,0.65); }
  .writer-label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: rgba(253,250,243,0.85); }
  .writer-idx {
    width: 1.1rem; height: 1.1rem; border-radius: 50%;
    background: rgba(212,160,23,0.18); border: 1px solid var(--rule-2);
    color: var(--gold); font-size: 0.62rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Inter', sans-serif;
  }
  .writer-py { color: var(--gold); font-size: 0.72rem; }
  .writer-char { font-family: var(--font-hanzi); color: #fff; }
  .hw-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
  .hw-loading .spinner { border-color: rgba(26,20,16,0.2); border-top-color: var(--accent); width: 18px; height: 18px; }
  .writer-hint {
    min-height: 1.1rem; text-align: center; font-size: 0.74rem;
    color: rgba(253,250,243,0.6); margin: 0.2rem 0 0.4rem;
  }
  .writer-hint.ok { color: #86efac; }
  .writer-hint.err { color: #fca5a5; }

  /* ============ Blocco di input collassabile ============
     La barra dell'anteprima sta sulla CARTA chiara: inchiostro, non bianco
     (il bianco era ereditato dal vecchio legno scuro e sulla carta non si legge). */
  .input-bar {
    display: none;
    align-items: center; gap: 0.6rem;
    padding: 0.65rem 0.9rem;
    border-radius: 1rem;
    background: var(--surface-sunk);
    border: 1px solid var(--rule-2);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    width: 100%;
    text-align: left;
    font-family: 'Inter', sans-serif;
  }
  .input-shell.collapsed .input-bar { display: flex; }
  .input-shell.collapsed .input-editor { display: none; }
  @media (hover: hover) { .input-bar:hover { border-color: var(--gold); background: rgba(212,160,23,0.1); } }
  .input-bar-preview {
    flex: 1; min-width: 0;
    font-family: var(--font-hanzi);
    font-size: 0.95rem; color: var(--fg);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .input-bar-count { font-size: 0.72rem; color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .input-bar-edit {
    font-size: 0.78rem; font-weight: 700; color: var(--fg-70); white-space: nowrap;
    border: 1px solid var(--rule-2); border-radius: 0.6rem;
    padding: 0.4rem 0.65rem; background: var(--surface);
  }

  /* ============ Meta del carattere e badge ============ */
  .meta-row { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; margin-top: 0.55rem; }
  .char-focus .meta-row { justify-content: flex-start; margin-top: 0.35rem; }
  .meta-chip {
    font-size: 0.66rem; font-weight: 600;
    padding: 0.2rem 0.5rem; border-radius: 2rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(253,250,243,0.8);
    white-space: nowrap;
  }
  .meta-chip.hsk { background: rgba(212,160,23,0.16); border-color: var(--rule-2); color: var(--gold); }
  .meta-chip.entity-chip.verified { background: rgba(212,160,23,0.2); border-color: var(--gold); color: #ffe494; font-weight: 600; }
  .meta-chip.entity-chip.probable { background: rgba(86,182,194,0.16); border-color: rgba(86,182,194,0.4); color: #72d0db; font-weight: 600; }
  .meta-chip.entity-chip .entity-kind-mark { display: inline-flex; align-items: center; gap: 0.25rem; }
  .meta-chip b { font-family: var(--font-hanzi); font-weight: 600; }
  .hsk-badge {
    font-size: 0.58rem; font-weight: 700; color: var(--ink); background: var(--gold);
    border-radius: 0.3rem; padding: 0.05rem 0.3rem; margin-left: 0.4rem;
    vertical-align: middle; letter-spacing: 0.02em;
  }
  .zh-src { font-size: 0.6rem; color: rgba(253,250,243,0.4); font-style: italic; margin-top: 0.3rem; }
  .zh-retry {
    margin-top: 0.4rem; font-size: 0.7rem; font-weight: 600; cursor: pointer;
    color: var(--gold); background: rgba(212,160,23,0.1);
    border: 1px dashed var(--rule-2); border-radius: 0.5rem;
    padding: 0.3rem 0.6rem; font-family: 'Inter', sans-serif;
  }

  /* Azioni entità libro (conferma / separa / unisci) */
  .entity-actions {
    display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center;
    margin-top: 0.75rem; padding-top: 0.65rem;
    border-top: 1px dashed rgba(255,255,255,0.14);
  }
  .entity-btn {
    font-family: var(--font-ui, 'Inter', sans-serif);
    font-size: 0.74rem; font-weight: 600;
    min-height: 38px; padding: 0.35rem 0.75rem;
    border-radius: 0.65rem; border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.06); color: rgba(253,250,243,0.9);
    cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    user-select: none; -webkit-tap-highlight-color: transparent;
  }
  .entity-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); color: var(--paper); }
  .entity-btn:active { transform: scale(0.97); }
  .entity-btn.confirm {
    border-color: var(--gold); color: #ffe494;
    background: rgba(212,160,23,0.14);
  }
  .entity-btn.confirm:hover { background: rgba(212,160,23,0.24); }
  .entity-btn.split {
    border-color: rgba(224,108,117,0.38); color: #ff858d;
    background: rgba(224,108,117,0.1);
  }
  .entity-btn.split:hover { background: rgba(224,108,117,0.2); }
  .entity-btn.merge {
    border-color: rgba(86,182,194,0.38); color: #72d0db;
    background: rgba(86,182,194,0.1);
  }
  .entity-btn.merge:hover { background: rgba(86,182,194,0.2); }
  @media (pointer: coarse) {
    .entity-btn { min-height: 44px; padding: 0.45rem 0.85rem; }
  }

  /* Navigazione fra i caratteri di una parola */
  .char-nav { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.7rem; }
  .char-nav .nav-label { font-size: 0.72rem; color: rgba(253,250,243,0.6); font-variant-numeric: tabular-nums; }

  /* Pulsanti di stato nel pannello (su iPad il doppio tap è scomodo) */
  .state-btns { display: flex; gap: 0.4rem; margin-top: 1rem; }
  .state-btn {
    flex: 1; padding: 0.5rem 0.3rem; border-radius: 0.6rem;
    font-size: 0.74rem; font-weight: 600; cursor: pointer;
    border: 1.5px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.04); color: rgba(253,250,243,0.75);
    transition: all 0.18s ease; font-family: 'Inter', sans-serif;
  }
  .state-btn[data-state="1"] { border-color: color-mix(in oklab, var(--seed-primary) 55%, transparent); color: color-mix(in oklab, var(--seed-primary) 54%, var(--paper)); }
  .state-btn[data-state="2"] { border-color: color-mix(in oklab, var(--seed-primary) 28%, transparent); color: color-mix(in oklab, var(--seed-primary) 40%, var(--paper)); }
  .state-btn[data-state="0"] { border-color: color-mix(in oklab, var(--ok) 50%, transparent); color: color-mix(in oklab, var(--ok) 55%, var(--paper)); }
  .state-btn.current { background: rgba(212,160,23,0.2); border-color: var(--gold); color: #fff; font-weight: 700; }

  /* Filtro delle parole correlate */
  .rel-filter { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.6rem; }
  .rel-filter input {
    flex: 1; min-width: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 0.6rem; padding: 0.45rem 0.65rem;
    color: #fff; font-family: var(--font-hanzi); font-size: 0.85rem;
  }
  .rel-filter input::placeholder { color: rgba(253,250,243,0.35); font-family: 'Inter', sans-serif; }
  .rel-filter input:focus { outline: none; border-color: var(--gold); }
  .rel-sort {
    font-size: 0.7rem; font-weight: 600; cursor: pointer; white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.15); border-radius: 0.6rem;
    padding: 0.45rem 0.55rem; background: rgba(255,255,255,0.04); color: rgba(253,250,243,0.75);
    font-family: 'Inter', sans-serif;
  }
  .rel-sort.active { border-color: var(--gold); color: var(--gold); background: rgba(212,160,23,0.14); }

  /* ============ Lettore PDF ============ */
  .pdf-btn-label { display: inline-flex; align-items: center; gap: 0.35rem; }
  .pdf-shell {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    padding: 0.6rem 0.75rem;
    border-radius: 1rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--rule);
  }
  .pdf-info { display: flex; flex-direction: column; min-width: 0; }
  .pdf-name {
    font-size: 0.8rem; font-weight: 600; color: #fff;
    max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pdf-count { font-size: 0.72rem; color: var(--gold); font-variant-numeric: tabular-nums; }
  .pdf-nav { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
  .pdf-page-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--paper);
    min-width: 2.6rem; height: 2.2rem;
    border-radius: 0.6rem;
    cursor: pointer;
    font-size: 1rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
  }
  .pdf-page-btn:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }
  .pdf-page-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
  .pdf-jump {
    width: 3.4rem; height: 2.2rem; text-align: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 0.6rem;
    color: var(--paper); font-family: 'Inter', sans-serif; font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
  }
  .pdf-jump:focus { outline: none; border-color: var(--gold); }
  .pdf-jump::-webkit-outer-spin-button, .pdf-jump::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .pdf-jump { -moz-appearance: textfield; appearance: textfield; }
  /* mentre un PDF è aperto nascondiamo il box di inserimento testo, ma teniamo i pulsanti modalità */
  .input-shell.pdf-mode .input-bar,
  .input-shell.pdf-mode .input-editor { display: none !important; }

  /* ============ Comandi lettura: una riga compatta, solo icone ============ */
  .rdg-rows { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
  .rdg-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
  .rdg-ico {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    min-width: 2.45rem; height: 2.3rem; padding: 0 .5rem; cursor: pointer;
  }
  .rdg-ico svg { display: block; }
  .rdg-pinyin { font-family: var(--font-hanzi); font-size: .95rem; font-weight: 600; line-height: 1; }
  /* Categoria: etichetta corta + ellissi, freccia avvicinata al bordo (sta in riga con 拼音 e carica) */
  .rdg-cat { font: 500 .78rem 'Inter', sans-serif; height: 2.3rem; padding: 0 1.25rem 0 .5rem;
    max-width: 7.6rem; background-position: calc(100% - 9px) 55%, calc(100% - 5px) 55%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* i comandi che lavorano sul testo da scrivere spariscono quando il box è collassato
     (stai leggendo) o quando è aperto un libro. 👂 e 拼音 invece non stanno più qui:
     vivono nel riquadro dell'output (.out-tools), insieme al testo che si sta leggendo,
     e ci restano sempre — libro compreso. */
  .input-shell.collapsed .only-edit,
  .input-shell.pdf-mode .only-edit { display: none; }
  /* ============ Riquadro di Lettura Unificato (corpo unico) ============
     Intestazione ed output formano un unico corpo coeso ed elegante sulla carta.
     Non sono due corpi separati: la linguetta è la testata integrata del riquadro,
     i comandi (👂 e 拼音) vivono nella testata a destra, e il testo occupa il corpo. */
  .output-shell {
    background: var(--surface-sunk);
    border: 1px solid var(--rule-2);
    border-radius: var(--r-lg);
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    margin-bottom: 1.5rem;
    position: relative;
  }
  .output-shell:hover {
    border-color: color-mix(in oklab, var(--gold) 40%, var(--rule-2));
  }
  .output-shell[hidden] { display: none !important; }

  /* Testata integrata del riquadro */
  .out-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    min-height: 2.85rem;
    padding: .45rem .85rem;
    background: color-mix(in oklab, var(--surface-sunk) 92%, var(--seed-ink));
    border-top-left-radius: calc(var(--r-lg) - 1px);
    border-top-right-radius: calc(var(--r-lg) - 1px);
    cursor: pointer;
    transition: background .18s ease, border-radius .18s ease;
    user-select: none;
  }
  .output-shell.is-collapsed .out-header {
    border-bottom-left-radius: calc(var(--r-lg) - 1px);
    border-bottom-right-radius: calc(var(--r-lg) - 1px);
  }
  .output-shell:not(.is-collapsed) .out-header {
    border-bottom: 1px solid var(--rule);
  }
  @media (hover: hover) {
    .out-header:hover {
      background: color-mix(in oklab, var(--surface-sunk) 87%, var(--seed-ink));
    }
  }

  /* Intestazione cliccabile (linguetta) integrata */
  .out-tab {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    flex: 1;
    min-width: 0;
    min-height: 2.3rem;
    padding: .2rem .35rem;
    border: none;
    background: transparent;
    color: var(--fg);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: .86rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: color .15s ease;
  }
  .out-tab:hover {
    color: var(--gold-ink);
  }
  .out-tab .out-tab-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
  }
  .out-book-icon, .out-chev { flex: none; }
  .out-title-track { display: flex; width: max-content; max-width: 100%; }
  .out-title-copy { flex: none; min-width: 0; max-width: 100%; padding: 0; overflow: hidden; text-overflow: ellipsis; }
  .out-title-copy[aria-hidden="true"] { display: none; }
  :is(.out-tab-label, .book-reader-title).is-scrolling .out-title-track { max-width: none; animation: outTitleScroll var(--out-title-duration, 18s) linear infinite; }
  :is(.out-tab-label, .book-reader-title).is-scrolling .out-title-copy { max-width: none; min-width: var(--out-title-width, 0px); padding-inline-end: 3rem; overflow: visible; text-overflow: clip; }
  :is(.out-tab-label, .book-reader-title).is-scrolling .out-title-copy[aria-hidden="true"] { display: inline-block; }
  .out-tab:hover .out-title-track, .out-tab:focus-visible .out-title-track { animation-play-state: paused; }
  #bookReaderTitle:hover .out-title-track { animation-play-state: paused; }
  @keyframes outTitleScroll { to { transform: translateX(-50%); } }
  .out-tab .out-chev {
    display: inline-block;
    font-size: .8rem;
    color: var(--fg-60);
    margin-left: .25rem;
    transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1), color .15s ease;
    line-height: 1;
  }
  .out-tab:hover .out-chev {
    color: var(--gold-ink);
  }
  .out-tab[aria-expanded="true"] .out-chev,
  .output-shell:not(.is-collapsed) .out-chev {
    transform: rotate(180deg);
  }

  /* Comandi lettura: allineati a destra nell'intestazione */
  .out-tools {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex: none;
    margin: 0;
    cursor: default;
  }
  .output-shell.is-collapsed .out-tools {
    display: none;
  }

  /* Corpo del riquadro */
  .out-body {
    border-bottom-left-radius: calc(var(--r-lg) - 1px);
    border-bottom-right-radius: calc(var(--r-lg) - 1px);
    transition: opacity .2s ease;
  }
  .out-body[hidden],
  .output-shell.is-collapsed .out-body {
    display: none !important;
  }

  @media (pointer: coarse) {
    .out-header { min-height: 3.1rem; padding: .45rem .85rem; }
    .out-tab { min-height: 2.75rem; }
    .rdg-ico, .rdg-cat { min-width: 2.75rem; height: 2.75rem; }
  }
  /* «Analizza» è l'unico comando primario della riga: tondo pieno con freccia in su,
     come il tasto di invio. Selettore doppio: vince la pillola di .btn-primary e il
     min-width di .rdg-ico (anche dentro la media query touch, che non aggiunge
     specificità) → cerchio perfetto a 44 px sul touch. */
  .rdg-ico.rdg-go { width: 2.3rem; min-width: 2.3rem; height: 2.3rem; padding: 0; border-radius: 50%; }
  @media (pointer: coarse) {
    .rdg-ico.rdg-go { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; }
  }

  /* ============ Area account (solo dentro /fun/ di Anmi) ============ */
  .hr-top { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
  .hr-account { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
  .hr-shop-back { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.85rem; border-radius: 0.75rem; font-size: 0.82rem; font-weight: 500; }
  .hr-icon { width: 2.6rem; height: 2.6rem; font-size: 1.15rem; border-radius: 0.75rem; }
  .hr-profile {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.3rem 0.55rem 0.3rem 0.75rem; border-radius: 999px;
    border: 1px solid var(--rule-2); background: rgba(255,255,255,0.05);
    color: var(--paper); text-decoration: none; cursor: pointer;
    transition: all 0.2s ease; font-family: 'Inter', sans-serif;
  }
  .hr-profile:hover { border-color: var(--gold); background: rgba(212,160,23,0.14); }
  .hr-profile-name { font-size: 0.82rem; font-weight: 600; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hr-avatar {
    position: relative; width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: linear-gradient(135deg, var(--accent), #7f1414);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .hr-avatar img { width: 100%; height: 100%; object-fit: cover; display: none; }
  .hr-avatar-initial { font-size: 0.82rem; font-weight: 700; color: #fff; }
  .hr-avatar.has-img img { display: block; }
  .hr-avatar.has-img .hr-avatar-initial { display: none; }
  @media (pointer: coarse) { .hr-shop-back, .hr-profile { min-height: 40px; } }

  /* ══════════════════════════════════════════════════════════════════════
     CHROME v2 · ingresso e navigazione — portato dal prototipo approvato.
     Sta in fondo al foglio di proposito: mantiene la precedenza sulle
     varianti e sulle regole responsive precedenti. Le basi dei bottoni
     sono consolidate qui. Regola: cornice monocroma inchiostro/carta, rosso
     SOLO sull'azione primaria, oro SOLO su progresso e trofei.
     ══════════════════════════════════════════════════════════════════════ */

  /* ---- masthead ---- */
  .masthead {
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    margin: 0 calc(var(--pad-x) * -1) 1.25rem;
    padding: clamp(.75rem, 1.8vw, 1.15rem) var(--pad-x) .8rem;
    background: color-mix(in oklab, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--rule);
    transition: transform .2s ease, border-color .22s ease;
    border-radius: 0;
  }
  .masthead.compact { padding-block: .5rem .55rem; border-bottom-color: var(--rule-2); border-radius: 0; }
  .masthead.is-scroll-hidden { transform: translateY(calc(-100% - 1px)); pointer-events: none; }
  body.view-news .masthead { margin-bottom: 0; }
  .brand { display: flex; align-items: center; gap: .75rem; min-width: 0; min-height: 44px; color: inherit; text-decoration: none; }
  .brand:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 4px; border-radius: var(--r-sm); }
  .masthead .seal {
    flex: none; width: 3.1rem; height: 3.1rem; padding: 0; display: grid; place-items: center;
    background: var(--seed-primary); color: var(--seed-paper);
    border-radius: var(--r-sm); overflow: hidden;
    box-shadow: 0 1px 0 rgba(0,0,0,.25) inset;
    transition: width .22s ease, height .22s ease;
  }
  .masthead .seal img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .masthead.compact .seal { width: 1.95rem; height: 1.95rem; }
  .brand-text { min-width: 0; }
  .wordmark {
    margin: 0; font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.35rem, 1.1rem + .9vw, 1.7rem); line-height: 1.02;
    letter-spacing: .12em; color: var(--fg);
    transition: font-size .22s ease;
  }
  .masthead.compact .wordmark { font-size: 1.2rem; }
  .kicker {
    margin: .28rem 0 0; font-size: .68rem; font-weight: 500; letter-spacing: .02em;
    color: color-mix(in oklab, var(--seed-ink) 42%, var(--seed-paper)); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    max-height: 1.1rem; opacity: 1;
    transition: max-height .22s ease, margin .22s ease, opacity .16s ease;
  }
  .masthead.compact .kicker { max-height: 0; margin-top: 0; opacity: 0; }

  /* ---- cluster strumenti in alto ---- */
  .hr-top { gap: .5rem; flex-wrap: wrap; margin-left: auto; }

  /* Lo stato del dizionario non è più in schermo (pill tolta dal masthead): le sue
     regole erano qui. Per rimetterlo, ripristinare .dict-status + i suoi stati e il <p>. */
  @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
  .spinner { border-color: var(--rule-2); border-top-color: var(--gold-ink); }

  /* ---- bottoni: primaria piatta, secondaria a轮廓 di inchiostro ---- */
  .btn-primary {
    background: var(--seed-primary); color: var(--seed-paper);
    border-radius: var(--r-pill); border: 0;
    transition: background .16s ease, transform .1s ease;
  }
  @media (hover: hover) { .btn-primary:hover { background: var(--primary-ink); transform: none; box-shadow: none; } }
  .btn-primary:active { transform: scale(.98); }
  .btn-primary:disabled { background: var(--tint-2); color: var(--fg-45); opacity: 1; cursor: not-allowed; }
  /* Il ghost nasce per il legno scuro: sul foglio di carta diventa contorno d'inchiostro. */
  .btn-ghost {
    border: 1.5px solid var(--rule-2); color: var(--fg); background: none;
    border-radius: var(--r-pill); transition: border-color .16s ease, background .16s ease, color .16s ease;
  }
  @media (hover: hover) { .btn-ghost:hover { border-color: var(--fg); color: var(--fg); background: var(--tint); } }
  .btn-ghost:active { transform: scale(.98); }
  .btn-soft { border: 1.5px solid var(--rule-2); background: none; color: var(--fg); border-radius: var(--r-pill); transition: all 0.2s ease; }
  @media (hover: hover) { .btn-soft:hover { border-color: var(--primary-ink); color: var(--primary-ink); background: var(--primary-tint); box-shadow: none; } }
  .btn-soft:disabled { opacity: 0.45; cursor: not-allowed; }
  .icon-btn {
    background: none; border: 1px solid var(--rule-2); color: var(--fg-70);
    border-radius: 50%; width: 2rem; height: 2rem;
  }
  .icon-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
  @media (hover: hover) { .icon-btn:hover { border-color: var(--fg); color: var(--fg); background: var(--tint); transform: none; } }
  /* Il dock mantiene il fondo scuro; lo storico usa la stessa carta della pagina. */
  .study-dock .btn-ghost {
    border-color: rgba(255,255,255,.18); color: var(--on-ink); background: none;
  }
  .sidebar .btn-ghost { border-color: var(--rule-2); color: var(--hist-fg); background: var(--hist-surface); }
  .sidebar .btn-ghost:hover { border-color: var(--ui-active-line); color: var(--ui-active-deep); background: var(--ui-active-tint); }

  /* ---- account: il profilo è SOLO il tondo con l'iniziale, sulla riga del marchio ---- */
  .hr-profile {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2.1rem; height: 2.1rem; padding: 0;
    border: 1px solid var(--rule-2); border-radius: 50%; background: none; color: var(--fg);
  }
  @media (hover: hover) { .hr-profile:hover { border-color: var(--fg); } }
  /* il nome non serve: l'account si riconosce dall'iniziale (o dalla foto) */
  .hr-profile-name { display: none; }
  .hr-avatar { width: 100%; height: 100%; background: var(--surface-raised); border: 0; }
  .hr-avatar-initial { color: var(--fg); font-size: .84rem; }
  /* avatar scelto dall'utente (SVG semplice): sostituisce iniziale e Gravatar */
  .hr-avatar-svg { display: none; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--fg); }
  .hr-avatar-svg svg { width: 74%; height: 74%; display: block; }
  .hr-avatar-svg svg.av-wide { width: 96%; height: 96%; } /* vedi .avatar-chip svg.av-wide */
  .hr-avatar.has-svg .hr-avatar-svg { display: inline-flex; }
  .hr-avatar.has-svg img, .hr-avatar.has-svg .hr-avatar-initial { display: none; }
  .hr-shop-back {
    border-radius: var(--r-pill);
    width: 2.1rem; height: 2.1rem; padding: 0; gap: 0; justify-content: center; font-size: 1rem;
  }
  /* anche il ritorno allo shop è un comando: resta la freccia, l'etichetta va nel title/aria-label */
  .shop-lbl { display: none; }

  /* ---- barra di ricerca globale (sopra le sezioni): pill coerente coi comandi,
     a larghezza piena; la lista dei risultati fluttua sotto, scrollabile, z sopra
     le due barre ✨ ma sotto modali/backdrop ---- */
  /* ══════════════════════════════════════════════════════════════════════
     DOCK FLOTTANTE E RICERCA
     ══════════════════════════════════════════════════════════════════════ */
  .liquid-dock-wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
    padding-top: 0.5rem;
    pointer-events: none;
    z-index: 945;
  }
  .view-tabs,
  .view-tabs.liquid-dock {
    pointer-events: auto;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: stretch;
    gap: 0.28rem;
    margin: 0;
    padding: 0.34rem 0.44rem;
    border-radius: 9999px;
    width: auto;
    max-width: min(calc(100vw - 1.25rem), 580px);

    background: rgba(255, 253, 249, 0.96);
    -webkit-backdrop-filter: blur(16px) saturate(110%);
    backdrop-filter: blur(16px) saturate(110%);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-float);
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.25s ease;
  }

  /* Superficie uniforme; la zona di tocco estesa resta nello pseudo-elemento after. */
  .view-tabs.liquid-dock::before {
    content: none;
  }

  /* Zona di tocco estesa invisibile sotto (safe area) e sopra la dock per evitare tap persi */
  .view-tabs.liquid-dock::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    bottom: calc(-0.75rem - env(safe-area-inset-bottom, 0px));
    pointer-events: auto;
    z-index: 0;
  }

  .view-tabs .view-tab {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    padding: 0.45rem 0.55rem;
    min-height: 50px;
    height: 100%;
    border-radius: 9999px;
    border: 0;
    background: transparent;
    color: var(--fg-60);
    font-family: var(--font-ui);
    font-size: 0.73rem;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    position: relative;
    z-index: 2;
    touch-action: manipulation;
    transition: opacity 0.22s ease, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  /* Cliccabilità totale: tutti gli elementi figli lasciano passare il tocco al bottone */
  .view-tabs .view-tab * {
    pointer-events: none;
  }

  @media (hover: hover) and (pointer: fine) {
    .view-tabs .view-tab:hover {
      background: rgba(35, 32, 25, 0.06);
      color: var(--fg);
    }
  }

  .view-tabs .view-tab:active {
    transform: scale(0.97);
  }

  /* Active Tab: Apple Liquid Pill Capsule */
  .view-tabs .view-tab.active {
    background: linear-gradient(150deg, #2b251e 0%, #15120f 100%);
    color: #fffdf9;
    font-weight: 600;
    box-shadow:
      0 6px 18px -2px rgba(26, 20, 16, 0.42),
      inset 0 1px 0.5px rgba(255, 255, 255, 0.35),
      inset 0 -1px 0.5px rgba(0, 0, 0, 0.4);
  }

  .view-tabs .view-tab .tab-glyph {
    font-family: var(--font-hanzi);
    font-size: 1.16rem;
    font-weight: 600;
    line-height: 1;
    color: var(--fg-45);
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), color 0.25s ease;
  }

  .view-tabs .view-tab.active .tab-glyph {
    color: var(--seed-accent);
    text-shadow: 0 0 12px rgba(212, 160, 23, 0.55);
    transform: translateY(-.5px) scale(1.04);
  }

  .view-tabs .view-tab .tab-text {
    font-size: 0.69rem;
    letter-spacing: 0.015em;
  }

  /* Pulsante Calendario nella dock */
  .view-tabs .view-tab.tab-cal {
    position: relative;
  }
  .view-tabs .view-tab.tab-cal .tab-cal-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .view-tabs .view-tab.tab-cal .cal-3d-svg {
    display: block;
    width: 27px;
    height: 27px;
  }
  .view-tabs .view-tab.tab-cal:hover .tab-cal-ic {
    transform: translateY(-1.5px) scale(1.08);
  }
  .view-tabs .view-tab.tab-cal.active {
    background: linear-gradient(150deg, #2b251e 0%, #15120f 100%);
    color: #fffdf9;
  }
  .view-tabs .view-tab.tab-cal.active .tab-cal-ic {
    transform: translateY(-1px) scale(1.08);
  }
  .view-tabs .view-tab.tab-cal.active .tab-text {
    color: #fef08a;
  }

  /* ════════════ Barra di ricerca integrata nel masthead ════════════ */
  .masthead {
    position: sticky;
  }
  .masthead-search {
    position: absolute;
    top: 0.35rem;
    bottom: 0.35rem;
    left: var(--pad-x, 0.85rem);
    right: var(--pad-x, 0.85rem);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    z-index: 75;
    transition: opacity 0.22s ease, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.24s;
    transform: translateY(-6px) scale(0.98);
    display: flex;
    align-items: stretch;
  }
  .masthead.search-active .masthead-search,
  .masthead-search.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity 0.22s ease, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
  }
  .masthead.search-active .brand,
  .masthead.search-active .hr-top {
    opacity: 0.06;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .masthead-search .hr-search-bar-inner {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(150deg, #2b251e 0%, #15120f 100%);
    color: #fffdf9;
    box-shadow:
      0 6px 20px -2px rgba(26, 20, 16, 0.48),
      0 0 0 1px rgba(212, 160, 23, 0.3),
      inset 0 1px 0.5px rgba(255, 255, 255, 0.35),
      inset 0 -1px 0.5px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    padding: 0 0.45rem 0 0.8rem;
    overflow: visible;
    position: relative;
  }
  .masthead-search .hr-search-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    color: var(--seed-accent);
    flex: none;
    filter: drop-shadow(0 0 8px rgba(212, 160, 23, 0.6));
  }
  .masthead-search .hr-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    color: #fffdf9;
    font: 500 0.95rem/1.2 var(--font-ui);
    padding: 0.45rem 0.25rem;
  }
  .masthead-search .hr-search-input::placeholder {
    color: rgba(255, 255, 255, 0.52);
    opacity: 1;
  }
  .masthead-search .hr-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }
  .masthead-search .hr-search-clear,
  .masthead-search .hr-search-close-btn {
    flex: none;
    width: 1.85rem;
    height: 1.85rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.16s ease, color 0.16s ease, transform 0.15s ease;
  }
  .masthead-search .hr-search-clear:hover,
  .masthead-search .hr-search-close-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #ffffff;
    transform: scale(1.08);
  }
  .masthead-search .hr-search-clear:active,
  .masthead-search .hr-search-close-btn:active {
    transform: scale(0.94);
  }
  .masthead-search .hr-search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.45rem);
    bottom: auto;
    z-index: 945;
    max-height: min(65vh, 28rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    background: rgba(255, 253, 249, 0.96);
    -webkit-backdrop-filter: blur(32px) saturate(210%);
    backdrop-filter: blur(32px) saturate(210%);
    box-shadow:
      0 20px 48px -8px rgba(26, 20, 16, 0.32),
      0 0 0 1px rgba(212, 160, 23, 0.18),
      inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.95);
    padding: 0.45rem;
  }

  /* Pulsante Lente (Ricerca) */
  .view-tabs .view-tab.tab-search {
    position: relative;
  }
  .view-tabs .view-tab.tab-search .tab-search-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.16rem;
    height: 1.16rem;
    color: var(--fg-45);
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), color 0.25s ease;
  }
  .view-tabs .view-tab.tab-search.active {
    background: linear-gradient(150deg, #2b251e 0%, #15120f 100%);
    color: #fffdf9;
  }
  .view-tabs .view-tab.tab-search.active .tab-search-ic {
    color: var(--seed-accent);
    transform: translateY(-1px) scale(1.08);
  }
  .view-tabs .view-tab.tab-search.active .tab-search-ic svg {
    stroke: var(--seed-accent);
    filter: drop-shadow(0 0 8px rgba(212, 160, 23, 0.6));
  }

  /* Quando la ricerca è attiva: le altre sezioni sfumano dolcemente */
  .view-tabs.search-active .view-tab {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.92);
  }

  /* ════════════ Barra di ricerca integrata nella dock sezioni ════════════
     Si espande orizzontalmente verso sinistra dal pulsante di ricerca fino
     a coprire fluidamente l'intera larghezza della barra sezioni. */
  .dock-search {
    position: absolute;
    top: 0.34rem;
    bottom: 0.34rem;
    right: 0.44rem;
    left: auto;
    width: 65px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    z-index: 5;
    transition: width 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, visibility 0s linear 0.34s;
    display: flex;
    align-items: stretch;
  }
  .view-tabs.search-active .dock-search {
    width: calc(100% - 0.88rem);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: width 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease, visibility 0s linear 0s;
  }

  .dock-search .hr-search-bar-inner {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(150deg, #2b251e 0%, #15120f 100%);
    color: #fffdf9;
    box-shadow:
      0 6px 18px -2px rgba(26, 20, 16, 0.45),
      0 0 0 1px rgba(212, 160, 23, 0.25),
      inset 0 1px 0.5px rgba(255, 255, 255, 0.35),
      inset 0 -1px 0.5px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    padding: 0 0.45rem 0 0.75rem;
    overflow: hidden;
  }
  .dock-search .hr-search-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    color: var(--seed-accent);
    flex: none;
    filter: drop-shadow(0 0 8px rgba(212, 160, 23, 0.6));
  }
  .dock-search .hr-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    color: #fffdf9;
    font: 500 0.94rem/1.2 var(--font-ui);
    padding: 0.45rem 0.2rem;
  }
  .dock-search .hr-search-input::placeholder {
    color: rgba(255, 255, 255, 0.52);
    opacity: 1;
  }
  .dock-search .hr-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }
  .dock-search .hr-search-clear,
  .dock-search .hr-search-close-btn {
    flex: none;
    width: 1.85rem;
    height: 1.85rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.16s ease, color 0.16s ease, transform 0.15s ease;
  }
  .dock-search .hr-search-clear:hover,
  .dock-search .hr-search-close-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #ffffff;
    transform: scale(1.08);
  }
  .dock-search .hr-search-clear:active,
  .dock-search .hr-search-close-btn:active {
    transform: scale(0.94);
  }

  /* Risultati della ricerca che fluttuano sopra la barra sezioni */
  .dock-search .hr-search-results {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 0.65rem);
    top: auto;
    z-index: 945;
    max-height: min(55vh, 26rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 22px;
    background: rgba(255, 253, 249, 0.95);
    -webkit-backdrop-filter: blur(32px) saturate(210%);
    backdrop-filter: blur(32px) saturate(210%);
    box-shadow:
      0 -20px 48px -12px rgba(26, 20, 16, 0.32),
      0 0 0 1px rgba(212, 160, 23, 0.15),
      inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.95);
    padding: 0.45rem;
  }
  .hr-search-results[hidden] { display: none; }
  .hr-sr-empty { padding: .9rem .7rem; text-align: center; color: var(--fg-60); font: 500 .82rem/1.3 var(--font-ui); }
  .hr-sr { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
    border: 0; background: none; border-radius: 12px; padding: .5rem .65rem; cursor: pointer; color: var(--fg); font-family: var(--font-ui); transition: background 0.15s ease; }
  .hr-sr:hover, .hr-sr.hl { background: rgba(35, 32, 25, 0.06); }
  .hr-sr:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
  .hr-sr-tag { flex: none; min-width: 1.45rem; height: 1.45rem; padding: 0 .18rem;
    display: inline-flex; align-items: center; justify-content: center;
    font: 600 .78rem/1 var(--font-hanzi); color: var(--fg-60);
    border: 1px solid var(--rule); border-radius: 7px; background: var(--surface-sunk); }
  .hr-sr-item { flex: none; font-family: var(--font-hanzi); font-weight: 600; font-size: 1.22rem; line-height: 1; color: var(--fg); }
  .hr-sr-py { flex: none; font-size: .78rem; color: var(--gold-ink); font-weight: 600; }
  .hr-sr-gloss { flex: 1 1 auto; min-width: 0; text-align: right; font-size: .78rem; color: var(--fg-60);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Il toggle Pinyin */
  .btn-toggle {
    border: 1.5px solid var(--rule-2); background: none; color: var(--fg-70);
    border-radius: var(--r-pill); transition: border-color .16s ease, background .16s ease, color .16s ease;
  }
  @media (hover: hover) { .btn-toggle:hover { border-color: var(--fg); color: var(--fg); } }
  .btn-toggle.active { background: var(--fg); border-color: var(--fg); color: var(--seed-paper); font-weight: 600; }

  /* ══════════════════════════════════════════════════════════════════════
     SORGENTI DI LETTURA: INSERISCI · GENERA · BRANI · MATERIE
     ══════════════════════════════════════════════════════════════════════ */
  .reader-modes-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0.95rem;
    position: relative;
    z-index: 15;
    width: 100%;
  }

  .reader-modes-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.32rem 0.75rem 0.32rem 0.35rem;
    border-radius: 9999px;
    background: var(--surface-raised);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-card);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition: width .2s ease;
  }
  .reader-modes-bar:not(.has-tier-bar) {
    width: auto;
  }
  .reader-modes-bar.has-course {
    width: 100%; max-width: 820px; margin-inline: auto; flex-wrap: nowrap;
  }

  .reader-modes-bar::before {
    content: none;
  }

  .reader-mode-btn {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.44rem;
    padding: 0.46rem 1.05rem;
    min-height: 44px;
    border-radius: 9999px;
    border: 0;
    background: transparent;
    color: var(--fg-60, #676054);
    font-family: var(--font-ui, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, color 0.2s ease, box-shadow 0.22s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .reader-mode-btn.reader-mode-home {
    flex: 0 0 auto;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 9999px;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-active);
    color: #fff;
    box-shadow: 0 2px 8px rgba(35, 83, 71, 0.28);
    transition: transform 0.18s ease, filter 0.18s ease, background 0.18s ease;
  }
  .reader-mode-btn.reader-mode-home:hover {
    transform: scale(1.04);
    filter: brightness(1.08);
  }
  .reader-mode-btn.reader-mode-home:active {
    transform: scale(0.96);
  }
  .reader-mode-btn.reader-mode-home .rmode-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    color: #fff;
    opacity: 1;
    filter: none;
  }
  .reader-mode-btn.reader-mode-home .rmode-ic svg {
    width: 20px;
    height: 20px;
    display: block;
    stroke: currentColor;
  }

  .reader-mode-btn * {
    pointer-events: none;
  }

  .reader-mode-btn .rmode-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    color: currentColor;
    opacity: 0.8;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), color 0.2s ease, opacity 0.2s ease;
  }

  .reader-mode-btn .rmode-ic svg {
    width: 16px;
    height: 16px;
    display: block;
  }
  .reader-mode-btn .rmode-ic svg.rmode-ic-back { display: none !important; }

  @media (hover: hover) {
    .reader-mode-btn:hover {
      background: rgba(35, 32, 25, 0.05);
      color: var(--fg, #232019);
    }
  }

  .reader-mode-btn:active {
    transform: scale(0.97);
  }

  /* Active Tab: Apple Liquid Pill Capsule */
  .reader-mode-btn.active {
    background: var(--ui-active);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(35, 83, 71, 0.28);
  }

  .reader-mode-btn.active .rmode-ic {
    color: #fff;
    opacity: 1;
    transform: none;
    filter: none;
  }
  @media (max-width: 640px) {
    .reader-modes-bar {
      display: flex;
      align-items: center;
      width: 100%;
      gap: .45rem;
      padding: .28rem .55rem .28rem .28rem;
    }
    .reader-mode-btn.reader-mode-home {
      width: 38px;
      min-width: 38px;
      height: 38px;
      min-height: 38px;
    }
  }

  /* Panes styling */
  .reader-mode-pane {
    animation: rmodeFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .reader-mode-pane[hidden] {
    display: none !important;
  }

  @keyframes rmodeFadeIn {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Card styling inside Genera pane */
  #modePaneGen .gen-panel {
    margin-top: 0;
    border: 1px solid var(--rule, rgba(0,0,0,0.08));
    border-radius: var(--r-lg);
    background: var(--surface-raised, #ffffff);
    box-shadow: var(--shadow-card);
    padding: 1.25rem 1.45rem;
  }
  #modePaneGen .gen-panel-head {
    cursor: default;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--rule-2, rgba(0,0,0,0.06));
    font-size: 0.92rem;
    color: var(--fg, #232019);
  }
  #modePaneGen .gen-chev {
    display: none !important;
  }
  #modePaneGen .gen-panel-body {
    display: block !important;
    margin-top: 0;
  }

  /* Box "Brani pronti" minimizzabile a tendina */
  #modePaneSnippets .snip-panel {
    margin-top: 0;
    border: 1px solid var(--rule, rgba(0,0,0,0.08));
    border-radius: var(--r-lg);
    background: var(--surface-raised, #ffffff);
    box-shadow: var(--shadow-card);
    padding: 1.15rem 1.45rem;
    transition: padding .2s ease, border-color .18s ease, box-shadow .18s ease;
  }
  #modePaneSnippets .snip-panel:not(.open) {
    padding: 0.85rem 1.45rem;
  }
  #modePaneSnippets .snip-panel-head {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--fg, #232019);
    transition: color .15s ease;
  }
  #modePaneSnippets .snip-panel-head:hover {
    color: var(--gold-ink, #7f1414);
  }
  #modePaneSnippets .snip-panel.open .snip-panel-head {
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--rule-2, rgba(0,0,0,0.06));
  }
  .snip-head-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  #modePaneSnippets .snip-chev {
    display: inline-flex !important;
    margin-left: 0.2rem;
    flex-shrink: 0;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--gold);
    transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1), color .15s ease;
  }
  #modePaneSnippets .snip-panel.open .snip-chev {
    transform: rotate(180deg);
  }
  #modePaneSnippets .snip-panel:not(.open) .snip-panel-body {
    display: none !important;
  }
  #modePaneSnippets .snip-panel.open .snip-panel-body {
    display: block !important;
    margin-top: 0;
  }
  .snip-current-info {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-left: auto;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
    overflow: hidden;
  }
  .snip-cur-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--gold-ink, #8f2c11);
    font-family: var(--font-hanzi, "Noto Serif SC", serif);
    font-size: 0.95rem;
    font-weight: 700;
    min-width: 0;
  }
  .snip-pos {
    flex-shrink: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--fg-60);
    font-size: 0.74rem;
    padding: 0.12rem 0.48rem;
    background: rgba(0,0,0,0.05);
    border-radius: 999px;
  }
  @media (max-width: 640px) {
    #modePaneSnippets .snip-panel:not(.open) .snip-head-text {
      display: none;
    }
    .snip-current-info {
      justify-content: space-between;
      gap: 0.4rem;
    }
  }
  @media (max-width: 400px) {
    .reader-modes-bar { gap: .35rem; padding: .24rem .48rem .24rem .24rem; }
    .reader-mode-btn.reader-mode-home { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
  }

  /* ============ Frecce di navigazione tra i Brani Pronti (integrate nella barra strumenti) ============ */
  .snip-nav-arrow {
    position: static;
    transform: none;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--surface-sunk);
    border: 1px solid var(--rule-2);
    color: var(--fg);
    box-shadow: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .snip-nav-arrow svg {
    width: 15px;
    height: 15px;
  }
  @media (hover: hover) and (pointer: fine) {
    .snip-nav-arrow:hover:not(:disabled) {
      border-color: var(--gold);
      color: var(--gold-ink);
      background: var(--surface-raised);
      transform: scale(1.08);
    }
  }
  .snip-nav-arrow:active:not(:disabled) {
    transform: scale(0.94);
  }
  .snip-nav-arrow:disabled {
    opacity: 0.22;
    cursor: not-allowed;
    pointer-events: none;
  }
  .snip-nav-arrow[hidden] {
    display: none !important;
  }

  /* Padding su #output: fluido e generoso, sfrutta l'intera superficie della carta senza sprechi */
  .out-body {
    padding: 1.25rem 1rem;
  }
  @media (min-width: 640px) {
    .out-body {
      padding: 1.5rem 1.35rem;
    }
  }
  @media (min-width: 1024px) {
    .out-body {
      padding: 2rem 2.5rem;
    }
  }
  .out-body.has-snip-nav #output,
  #output {
    padding-left: 0;
    padding-right: 0;
  }

  /* ============ Lettura fluida (stile Adobe Liquid Mode) ============
     La colonna usa la larghezza disponibile della carta, indipendentemente dal corpo:
     A−/A+ cambia quanti caratteri entrano nella riga, senza restringere il contenitore.
     A capo naturale e allineamento a sinistra, anche con il pinyin. */
  #output {
    --rd-fs: clamp(1.2rem, 1.02rem + 0.9vw, 1.6rem);
    font-size: var(--rd-fs);
    line-height: 1.9;
    letter-spacing: 0;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    text-align: left;
    text-align-last: left;
    word-break: normal;
    overflow-wrap: anywhere;
    line-break: strict;
    -webkit-line-break: strict;
    text-wrap: wrap;
    hyphens: none;
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  /* Parole, caratteri e punteggiatura: stessa altezza di riga, stesso padding e stesso
     allineamento verticale (prima la punteggiatura stava "top" e i glifi sulla baseline) */
  :is(#output, .subject-practice-text) .hanzi,
  :is(#output, .subject-practice-text) .hanzi-punct { vertical-align: top; line-height: 1.45; margin-block: 0.04em; }
  :is(#output, .subject-practice-text) .hanzi.word,
  :is(#output, .subject-practice-text) .hanzi.char { padding: 0.06em 0.02em; text-align: center; }
  .hanzi.word > span[data-idx] {
    display: inline-block;
    width: 1em;
    text-align: center;
  }

  /* Spazio tra le parole: solo con il pinyin, di larghezza fissa (spazio vero, così a inizio
     riga collassa e non crea rientri). Senza pinyin il testo cinese scorre continuo. */
  body:not(.beginner) :is(#output, .subject-practice-text) .hanzi-gap { display: none; }
  body.beginner :is(#output, .subject-practice-text) .hanzi-gap { display: inline; word-spacing: 0.1em; }

  /* Pinyin */
  body.beginner .bop {
    font-size: 0.49em;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0;
    margin-top: 0.08em;
  }
  /* Il glifo isolato e la sua lettura occupano la stessa colonna, anche quando
     la sillaba è più larga del carattere. */
  body.beginner :is(#output, .subject-practice-text) .hanzi.char { display: inline-grid; grid-template-columns: max-content; justify-items: center; }
  :is(#output, .subject-practice-text) .hanzi-glyph { display: inline-block; min-width: 1em; text-align: center; }
  /* Fallback (browser senza subgrid): come prima */
  body.beginner .hanzi.word > .bop {
    display: flex;
    justify-content: space-around;
    width: 100%;
  }
  body.beginner .hanzi.word > .bop > .bop-syl {
    flex: 1 1 0;
    text-align: center;
    white-space: nowrap;
  }
  /* Parola = griglia con UNA colonna per carattere; la riga del pinyin eredita le stesse colonne
     (subgrid). Così ogni sillaba sta sotto il suo carattere, anche quando il pinyin è più largo
     del glifo (yángguāng, shēnghuó…): la colonna si allarga e carattere e sillaba restano centrati. */
  @supports (grid-template-columns: subgrid) {
    body.beginner :is(#output, .subject-practice-text) .hanzi.word {
      display: inline-grid;
      grid-template-columns: repeat(var(--n, 1), auto);
      justify-content: center;
      justify-items: center;
      align-content: start;
    }
    body.beginner :is(#output, .subject-practice-text) .hanzi.word > span[data-idx] { width: auto; min-width: 1em; }
    body.beginner :is(#output, .subject-practice-text) .hanzi.word > .bop {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
      justify-items: center;
      width: auto;
    }
    body.beginner :is(#output, .subject-practice-text) .hanzi.word > .bop > .bop-syl { flex: none; padding-inline: 0.1em; }
    /* sillabe non in numero uguale ai caratteri: un'unica riga centrata sotto la parola */
    body.beginner :is(#output, .subject-practice-text) .hanzi.word > .bop.bop-flat { display: block; text-align: center; }
  }

  /* Raggruppamento punteggiatura: la punteggiatura non resta mai orfana a inizio riga */
  .punct-wrap {
    display: inline-flex;
    align-items: flex-start;
    white-space: nowrap;
    vertical-align: top;
  }
  .hanzi-punct {
    display: inline-block;
    font-family: var(--font-hanzi);
    padding: 0.06em 0 0;
    color: var(--fg);
    user-select: none;
    pointer-events: none;
  }
  /* La punteggiatura cinese occupa una cella intera ma l'inchiostro sta in una metà sola
     (lang zh-CN): chiusura = a sinistra, apertura = a destra. Della metà vuota se ne toglie
     una parte (resta un filo d'aria, come in tipografia cinese a metà riga): intera sembrava
     un buco dopo ogni «，» e «。», tolta tutta il segno si appiccicava al carattere dopo. */
  .hanzi-punct.p-trim.hanzi-punct-close { margin-right: -0.3em; }
  .hanzi-punct.p-trim.hanzi-punct-open  { margin-left: -0.3em; }

  /* Senza pinyin il browser può andare a capo tra i caratteri della stessa parola.
     Anche i glifi e i segni restano inline: line-break:strict riconosce così la
     punteggiatura e la tiene con il testo, senza spostare una parola intera. */
  body:not(.beginner) :is(#output, .subject-practice-text) :is(.hanzi, .punct-wrap, .hanzi-punct, .hanzi-glyph) { display: inline; }
  body:not(.beginner) :is(#output, .subject-practice-text) .punct-wrap { white-space: normal; }
  body:not(.beginner) :is(#output, .subject-practice-text) .hanzi.word > span[data-idx] { display: inline; width: auto; }
  body:not(.beginner) :is(#output, .subject-practice-text) .hanzi { -webkit-box-decoration-break: clone; box-decoration-break: clone; }

  .snip-card.selected {
    border-color: var(--seed-accent, #d4a017);
    background: #fff9e6;
    box-shadow: 0 0 0 1.5px var(--seed-accent, #d4a017);
  }

  /* ---- hint e legenda: nella scheda Guida dello Storico ---- */
  .hint { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--fg-60); }
  .hint kbd {
    font: 600 .68rem/1 var(--font-ui); padding: .18rem .4rem; border-radius: 5px;
    border: 1px solid var(--rule-2); border-bottom-width: 2px; background: var(--surface-sunk); color: var(--fg-70);
  }
  .hint[hidden] { display: none; }

  .info-pop {
    width: 100%; margin: .55rem 0 0; padding: .7rem .85rem .75rem;
    background: var(--surface-sunk); border: 1px solid var(--rule); border-radius: var(--r);
  }
  .info-pop > p { margin: 0; max-width: 66ch; }
  .info-pop > p + p { margin-top: .55rem; }
  .guide-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .42rem .9rem; }
  @media (min-width: 720px) { .guide-list { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }
  .guide-list .hint { font-size: .76rem; }
  .guide-tip { grid-column: 1 / -1; font-weight: 600; color: var(--fg-70); }
  .info-pop .legend { margin-top: .65rem; padding-top: .55rem; border-top: 1px solid var(--rule); }
  .info-pop .hint kbd { background: var(--surface); }
  .sidebar-guide { margin: 1rem; padding: 1rem; background: var(--hist-surface); border: 1px solid var(--hist-line); border-radius: 12px; color: var(--hist-fg); }
  .sidebar-guide[hidden], #historyList[hidden] { display: none; }
  .sidebar-guide h3 { margin: 0 0 .85rem; font-size: 1rem; font-weight: 600; }
  .sidebar-guide h3:not(:first-child) { margin-top: 1.5rem; }
  .sidebar-guide .guide-list { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .sidebar-guide .hint { font-size: .85rem; line-height: 1.6; flex-wrap: wrap; color: var(--hist-muted); }
  .sidebar-guide .hint kbd { background: var(--hist-bg); color: var(--hist-fg); border-color: var(--hist-line); }
  .sidebar-guide .legend { flex-direction: column; align-items: flex-start; width: auto; margin-left: 0; font-size: .85rem; color: var(--hist-muted); border-color: var(--hist-line); }
  .sidebar-guide .swatch-unknown { color: var(--state-unknown); border-color: color-mix(in oklab, var(--seed-primary) 35%, var(--hist-line)); }
  .sidebar .hr-study-tools { position: relative; flex-wrap: nowrap; gap: .15rem; margin: .75rem 1rem .5rem; padding: .25rem .35rem .25rem .7rem;
    background: var(--hist-surface); border-color: var(--hist-line); color: var(--hist-muted); font-size: .76rem; }
  .sidebar .hr-study-tools h3 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sidebar .hr-study-tools #hrSyncStatus { position: relative; flex: 1 1 auto; min-width: 0; padding-left: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar #hrSyncStatus::before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-60); transform: translateY(-50%); }
  .sidebar #hrSyncStatus[data-sync="saved"]::before { background: var(--ui-active); }
  .sidebar #hrSyncStatus[data-sync="pending"]::before { background: var(--gold-ink); }
  .sidebar #hrSyncStatus[data-sync="error"]::before { background: var(--seed-primary); }
  .sidebar .hr-study-tools :is(button, .hr-import-label) { background: var(--hist-bg); border-color: var(--hist-line); color: var(--hist-fg); }
  .sidebar .hr-study-tools > button, .sidebar .hr-backup-menu > summary { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px;
    padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--hist-muted); cursor: pointer; }
  .sidebar .hr-study-tools > button:hover, .sidebar .hr-backup-menu > summary:hover, .sidebar .hr-backup-menu[open] > summary { background: var(--ui-active-tint); color: var(--ui-active-deep); }
  .sidebar .hr-study-tools > button svg, .sidebar .hr-backup-menu > summary svg { width: 18px; height: 18px; }
  .sidebar .hr-study-tools #hrRetrySync { color: var(--primary-ink); }
  .sidebar .hr-study-tools .hr-backup-menu { flex: 0 0 44px; }
  .sidebar .hr-backup-menu > summary { list-style: none; }
  .sidebar .hr-backup-menu > summary::-webkit-details-marker { display: none; }
  .sidebar .hr-backup-menu .hr-backup-actions { position: absolute; z-index: 20; top: calc(100% + .35rem); right: 0; display: flex; flex-direction: column; align-items: stretch; gap: .35rem;
    width: min(19rem, calc(100vw - 3rem)); margin: 0; padding: .65rem; border: 1px solid var(--hist-line); border-radius: 12px; background: var(--hist-surface); box-shadow: var(--shadow-float); }
  .sidebar .hr-backup-actions :is(button, .hr-import-label) { display: flex; align-items: center; justify-content: flex-start; min-height: 44px; padding: .5rem .65rem; font-size: .8rem; }
  .sidebar .hr-backup-actions .hr-import-label { cursor: pointer; }
  .sidebar .hr-backup-actions #hrImportBackup { display: none; }
  .sidebar .hr-backup-actions p { margin: 0; font-size: .75rem; line-height: 1.5; }
  .sidebar .hr-backup-actions p:empty { display: none; }
  .sidebar .hr-study-tools input[type=file] { min-width: 0; font-size: .75rem; }
  .sidebar .hist-filter { margin: .5rem 1rem; border: 1px solid var(--hist-line); border-radius: 12px; background: var(--hist-surface); }
  .sidebar .hist-filter > summary { display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: .5rem .7rem; list-style: none; cursor: pointer; font: 500 .78rem/1.4 var(--font-ui); }
  .sidebar .hist-filter > summary::-webkit-details-marker { display: none; }
  .hist-filter-label { flex: none; color: var(--hist-muted); }
  .hist-filter-value { min-width: 0; margin-left: auto; color: var(--ui-active-deep); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hist-filter-chevron { flex: none; width: 15px; height: 15px; color: var(--hist-muted); transition: transform .18s ease; }
  .hist-filter[open] .hist-filter-chevron { transform: rotate(180deg); }
  .sidebar .hist-filter .hist-cats { display: grid; gap: .15rem; padding: .35rem; border-top: 1px solid var(--hist-line); }
  .sidebar .hist-filter .hist-cat { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 44px; padding: .5rem .6rem; border: 0;
    border-radius: 8px; background: transparent; color: var(--hist-muted); font: 500 .78rem/1.4 var(--font-ui); text-align: left; white-space: normal; }
  .hist-cat-count { flex: none; font-variant-numeric: tabular-nums; color: var(--fg-60); }
  .sidebar .hist-filter .hist-cat:hover, .sidebar .hist-filter .hist-cat.active { background: var(--ui-active-tint); color: var(--ui-active-deep); }
  .sidebar .hist-cat { min-height: 36px; padding: .4rem .65rem; border-color: var(--hist-line); background: var(--hist-surface); color: var(--hist-muted); }
  .sidebar .hist-cat.active { background: var(--ui-active-tint); border-color: var(--ui-active-line); color: var(--ui-active-deep); }
  .sidebar .hist-cat:hover { border-color: var(--ui-active-line); color: var(--ui-active-deep); }
  @media (max-width: 359px) {
    .sidebar-header { padding-left: .75rem; padding-right: .75rem; }
    .sidebar-tab { font-size: .75rem; }
    .fav-count-badge { min-width: 1rem; height: 1rem; padding: 0 .15rem; font-size: .6rem; }
    .fav-item { flex-wrap: wrap; }
    .fav-item-main { flex-basis: 100%; }
    .fav-actions { margin-left: auto; }
  }

  /* ---- contenitori che galleggiavano sul legno: ora stanno sulla carta ---- */
  .paper {
    background: var(--surface-sunk);
    background-image: none;
    border: 1px solid var(--rule);
    box-shadow: none;
  }
  /* Due superfici, come nel prototipo: CARTA per i contenuti (session-card,
     grammar-shell, lvlup-card, ask-panel, input-shell), INCHIOSTRO per i
     pannelli-strumento (study-panel, gen-panel, pdf-shell), il cui testo è
     chiaro e NON deve essere ridipinto su carta. */
  .session-card, .grammar-shell, .lvlup-card, .ask-panel, .input-shell {
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: none;
    background: var(--surface);
  }
  /* La Lettura NON ha una cornice globale: comandi e riquadri del testo stanno
     direttamente sulla superficie della pagina (sta qui, dopo il gruppo sopra,
     perché a pari specificità vince l'ordine). Il box del testo (.paper) e il
     pannello Impostazioni continuano a vedersi per conto loro. */
  .input-shell { border: 0; border-radius: 0; box-shadow: none; background: none; }
  /* L'intestazione delle Impostazioni non è rossa: il rosso dell'azione sta solo
     sui bottoni. Il testo della barra è già chiaro, quindi ink funziona. */
  .ask-head {
    background: color-mix(in oklab, var(--desk-deep) 92%, var(--seed-paper));
    border-bottom: 1px solid var(--rule);
    color: var(--on-ink);
  }
  .ask-head h2 { font-family: var(--font-ui); font-weight: 600; font-size: 1.02rem; }
  .lvl-btn {
    background: none; border: 1px solid var(--rule-2); border-radius: var(--r-pill); color: var(--fg-70);
  }
  @media (hover: hover) { .lvl-btn:hover { border-color: var(--gold-line); background: var(--gold-tint); } }
  .lvl-btn.active { border-color: var(--gold-line); background: var(--gold-tint); box-shadow: none; color: var(--gold-ink); }
  .lvl-btn.done { border-color: color-mix(in oklab, var(--ok) 55%, transparent); }
  .levels-note { color: var(--fg-60); }
  .stat-pill { background: var(--tint); border: 1px solid var(--rule); color: var(--fg-70); }
  .legend {
    background: none; border: 0; border-radius: 0; padding: 0;
    color: var(--fg-60); font-size: .72rem; gap: .75rem;
  }
  .legend-item { display: inline-flex; align-items: center; gap: .35rem; }
  .legend-swatch { width: auto; height: auto; border-radius: 4px; padding: .2rem .32rem; line-height: 1; font-size: .78rem; }
  .swatch-normal { background: var(--surface-sunk); color: var(--fg); border: 1px solid var(--rule); }
  .swatch-unknown { background: var(--primary-tint); color: var(--primary-ink); border: 1px solid color-mix(in oklab, var(--seed-primary) 35%, transparent); }
  .swatch-review { background: color-mix(in oklab, var(--state-review) 12%, transparent); color: var(--state-review); border: 1px solid color-mix(in oklab, var(--state-review) 35%, transparent); }
  /* «Azzera tutti gli stati» non c'è più: resetAllStates() resta nel JS, basta riagganciare un pulsante. */

  /* ---- la barra di lettura resta rossa: nessun override scuro ---- */

  /* ---- stati dei caratteri: rosso/blu derivati, leggibili su carta ---- */
  .hanzi.state-unknown, [data-char].state-unknown { color: var(--state-unknown) !important; }
  .hanzi.state-review, [data-char].state-review { color: var(--state-review) !important; }

  /* ---- il desktop: la colonna studio deve partire sotto il masthead sticky ---- */
  @media (min-width: 1024px) { .study-col { top: 5.6rem; max-height: calc(100dvh - 7rem); } }

  /* ---- telefono: contano le icone, le etichette lunghe si tolgono ---- */
  @media (max-width: 767px) {
    /* intestazione su UNA riga: marchio a sinistra, strumenti a destra */
    .masthead { gap: .35rem; padding-inline: .9rem; }
    .brand { gap: .4rem; }
    .kicker, .account-name-hr { display: none; }
    .masthead .seal { width: 1.9rem; height: 1.9rem; font-size: 1rem; }
    /* Apple liquid dock su smartphone: sfrutta lo spazio e allarga i bersagli tattili (≥52px) */
    .liquid-dock-wrap {
      padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
      padding-top: 0.35rem;
    }
    .view-tabs.liquid-dock {
      width: calc(100vw - 1rem);
      max-width: 440px;
      padding: 0.28rem 0.3rem;
      gap: 0.15rem;
    }
    .view-tabs.liquid-dock .view-tab {
      flex: 1 1 0;
      min-width: 0;
      min-height: 52px;
      height: 100%;
      padding: 0.35rem 0.15rem;
    }
    .view-tabs.liquid-dock .view-tab .tab-glyph {
      font-size: 1.22rem;
    }
    .view-tabs.liquid-dock .view-tab .tab-text {
      font-size: 0.68rem;
      letter-spacing: -0.015em;
    }
    .dock-search { top: 0.28rem; bottom: 0.28rem; right: 0.3rem; }
    .view-tabs.search-active .dock-search { width: calc(100% - 0.6rem); }
    .tab-count { display: none; }
    .legend { margin-left: 0; width: 100%; }
  }

  /* ---- iPad e tablet: la dock sezioni è ampia, generosa e facile da premere con i pollici ---- */
  @media (min-width: 768px) and (max-width: 1180px) {
    .liquid-dock-wrap {
      padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
      padding-top: 0.5rem;
    }
    .view-tabs.liquid-dock {
      width: min(580px, calc(100vw - 2.5rem));
      padding: 0.38rem 0.5rem;
      gap: 0.35rem;
    }
    .view-tabs.liquid-dock .view-tab {
      flex: 1 1 0;
      min-width: 0;
      min-height: 56px;
      padding: 0.45rem 0.6rem;
    }
    .view-tabs.liquid-dock .view-tab .tab-glyph {
      font-size: 1.32rem;
    }
    .view-tabs.liquid-dock .view-tab .tab-text {
      font-size: 0.78rem;
    }
    .dock-search { top: 0.38rem; bottom: 0.38rem; right: 0.5rem; }
    .view-tabs.search-active .dock-search { width: calc(100% - 1rem); }
  }

  /* ---- touch: 48-56 px sui dispositivi touch ---- */
  @media (pointer: coarse) {
    .view-tabs.liquid-dock .view-tab { min-height: 52px; }
    .view-tab { min-height: 2.9rem; }
    .lvl-btn, .chip { min-height: 2.75rem; }
    .icon-btn, .hr-icon { width: 2.75rem; height: 2.75rem; }
    /* la regola .hr-top .hr-icon del telefono è più specifica della mia: la ripeto qui */
    .hr-top .hr-icon { width: 2.75rem; height: 2.75rem; }
    .gen-input, .gen-select, .gen-mode-btn { min-height: 2.75rem; }
    .ask-lang-btn { min-height: 2.75rem; }
    /* idem: la regola .hr-top .hr-profile del telefono è più specifica, la ripeto qui */
    .hr-profile, .hr-top .hr-profile, .hr-shop-back, .hr-top .hr-shop-back { width: var(--row-h); height: var(--row-h); }
  }
  /* Wrapper del riquadro rosso: serve a posizionarci sopra il chip «🔊»
     fratello del box, senza toccare il DOM interno (invariante SOLO output). */
  .hr-explain-wrap { position: relative; }
  .hr-explain-play {
    position: absolute; bottom: .35rem; right: .35rem; z-index: 1;
    min-width: 1.9rem; min-height: 1.9rem;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 .45rem; background: var(--surface-raised);
    border: 1.5px solid var(--seed-primary); border-radius: .55rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    color: var(--primary-ink); font: 700 .85rem 'Inter', sans-serif; line-height: 1;
    cursor: pointer;
  }
  @media (pointer: coarse) {
    .hr-explain-play { min-width: 2.2rem; min-height: 2.2rem; font-size: .95rem; }
  }
  .hr-explain-play:active { transform: translateY(1px); }

  /* Il riquadro «✨» (Vocaboli · Grammatica · Radicali) è una BARRA FISSA IN BASSO COMPATTA,
     gemella della barra di lettura (.study-dock): stessi inset (0.6rem), stesso padding (.6rem
     .75rem), stesso z-index (940), stessa cromia (inchiostro e giada, testo chiaro).
     La spiegazione occupa la sua riga e i controlli 👂/✕/panda ne formano una seconda,
     sempre orizzontale; il campo d'invio si aggiunge sotto solo quando si chiede un seguito.
     I controlli restano nel flusso: l'avatar assoluto «in alto a destra» misurava 38px su una
     barra di 36px (⚠️ o risposte di una riga), copriva il tasto audio e richiedeva un
     padding-right di 3rem su ogni riga. In flusso la barra calcola l'altezza corretta.
     Il wrap prende «.open» in boxAsk e lo perde in askCloseBox; mentre è aperto il box è
     out-of-flow, quindi la carta non cresce né si muove e la barra sparisce da sola quando la
     carta viene ricostruita o si cambia vista (askCloseAll).
     Tre classi in più, tutte sul wrap, per i tre stati voluti:
     - .has-comp → la voce spiegata è una parola di più caratteri: sopra al testo compare la
       riga dei singoli caratteri (stesse righe .dc e stessa fonte dati del dock di lettura);
       il box si accorcia (26vh) perché la barra resti compatta;
     - .tall → la risposta supera la riga singola: si limita l'altezza del testo, che resta
       scorrevole; i controlli rimangono sulla propria riga orizzontale;
     - .min → linguetta: la barra si raccoglie nel solo bottone-panda fermo in basso a destra,
       che la riapre intatta SENZA ri-chiedere a Fuffy. Il panda non è più il ::before del wrap
       — per poter essere toccato è un bottone vero, col look identico del tondino di prima. */
  .hr-explain-wrap.open {
    position: fixed; z-index: 940;
    left: .6rem; right: .6rem; bottom: var(--floating-bar-bottom, calc(6.5rem + env(safe-area-inset-bottom)));
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    padding: .6rem .75rem; border-radius: 1rem;
    background: linear-gradient(135deg, var(--desk), var(--ink));
    border: 1px solid var(--gold); color: var(--paper);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .5);
    font-family: 'Inter', sans-serif;
  }
  /* Composizione: una riga fino a due caratteri, due righe per le parole più lunghe. */
  .hr-comp {
    order: 0; flex: 1 0 100%; min-width: 0;
    display: grid; grid-template-columns: repeat(var(--comp-columns, 2), minmax(0, 1fr)); gap: .05rem .9rem;
    font-size: .72rem; line-height: 1.4; color: rgba(253,250,243,0.85);
  }
  .hr-comp .dc { display: inline-flex; align-items: baseline; gap: .28rem; min-width: 0; max-width: 100%; }
  .hr-comp .dc b { font-family: var(--font-hanzi); font-size: .92rem; color: #fff; flex: none; }
  .hr-comp .dc i { font-style: normal; color: #ffe9a8; font-size: .66rem; flex: none; }
  .hr-comp .dc em { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hr-explain-wrap.open .ask-result.sess-explain {
    order: 1; flex: 1 1 0; min-width: 0;
    /* 6rem = 74px, poco più di DUE righe di risposta (riga ~20px misurata): sul telefono il
       dito doveva lavorare dieci volte per leggere una spiegazione. Il tetto ora arriva a un
       terzo dello schermo e, in orizzontale, lascia fuori i comandi. */
    max-height: min(9.5rem, 34vh); overflow: auto;
    /* Touch: «contain» chiude lo scroller in sé stesso — né in cima né in fondo il gesto
       scappa alla pagina (era il «non prende» segnalato), e iOS ci aggiunge l'inerzia. */
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    font-size: .74rem; line-height: 1.45; color: var(--paper);
  }
  .hr-explain-wrap.open .ask-result.sess-explain .ask-h { margin: .3rem 0 .12rem; font: 700 .72rem 'Inter', sans-serif; color: #fff; }
  .hr-explain-wrap.open .ask-result.sess-explain strong { color: #ffe9a8; }
  .hr-explain-wrap.open .ask-result.sess-explain .ask-li { margin: 0 0 .1rem; padding-left: .95rem; font-size: .72rem; }
  .hr-explain-wrap.open .ask-result.sess-explain .ask-li::before { color: var(--gold); }
  .hr-explain-wrap.open .ask-result.sess-explain .ask-table th { color: #fff; }
  /* Con la riga dei caratteri sopra il box si accorcia, ma resta un pezzo di schermo da
     trascinare (4.6rem = 73,6px ≈ due righe: da lì la lamentela sul touch). */
  .hr-explain-wrap.open.has-comp .ask-result.sess-explain { max-height: min(7.5rem, 26vh); }
  /* Comandi sempre raccolti in un'unica riga sotto la spiegazione; il campo e il suo invio
     formano una seconda riga solo quando si chiede un approfondimento. */
  .hr-explain-ctl {
    order: 2; flex: 1 0 100%; min-width: 0;
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: .45rem;
    padding-top: .5rem; border-top: 1px solid rgba(253,250,243,.2);
  }
  .hr-explain-wrap.open .hr-explain-play {
    position: static; flex: none;
    background: rgba(253,250,243,0.14); border-color: var(--gold); color: var(--paper);
    box-shadow: none;
    width: 44px; min-width: 44px; min-height: 44px; height: 44px; padding: 0;
    border-radius: .65rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem;
  }
  .hr-explain-wrap.open .hr-explain-panda {
    flex: none; order: 1; width: 44px; min-width: 44px; min-height: 44px; height: 44px; padding: 0; border-radius: .65rem;
    border: 1px solid var(--gold); background: rgba(253,250,243,0.14);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .15s ease, transform .12s ease;
  }
  .hr-explain-panda img { width: 2.15rem; height: 2.15rem; object-fit: contain; border-radius: 50%; display: block; }
  .hr-explain-panda:active { transform: scale(0.94); }
  .hr-explain-panda:focus-visible { outline: 2px dashed var(--paper); outline-offset: 2px; }
  /* Fuori dalla barra aperta il panda NON deve occupare spazio nella carta: il tondino da
     38px renderizzato in-flow avrebbe allungato ogni wrap e la carta si sarebbe «ristretta»
     di 34px quando il wrap passa a fixed (misurato su e2e-fuffy-inline: 143→109 e 231→196). */
  .hr-explain-wrap:not(.open) .hr-explain-panda { display: none; }
  /* ✕ raccoglie la barra; la conversazione resta accessibile dal pulsante Fuffy
     nella dock. Il comando conserva il suo bersaglio tattile da 44px. */
  .hr-explain-wrap.open .hr-explain-close {
    flex: none; order: 2; margin-left: auto; width: 44px; height: 44px; padding: 0; border-radius: .65rem;
    border: 1px solid var(--gold); background: rgba(253,250,243,0.14); color: var(--paper);
    font: 400 .8rem/1 'Inter', sans-serif;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .15s ease, transform .12s ease;
  }
  .hr-explain-close:hover { background: rgba(253,250,243,0.26); }
  .hr-explain-close:active { transform: scale(0.94); }
  .hr-explain-close:focus-visible { outline: 2px dashed var(--paper); outline-offset: 2px; }
  .hr-explain-wrap:not(.open) .hr-explain-close,
  .hr-explain-wrap:not(.open) .hr-ask-more { display: none; }
  /* Riga «chiedi di più»: apre sotto il testo, su Riga sua (flex-basis 100%), con lo stesso
     nastro della barra. La si vede solo quando il panda la chiama (hidden tolto dal JS). */
  .hr-ask-more { order: 3; flex: 1 0 100%; display: flex; align-items: center; gap: .45rem; }
  /* Guardia: «display:flex» dell'autore vince sull'attributo hidden (stile UA) — senza questa
     riga la domanda in più sarebbe sempre visibile. */
  .hr-ask-more[hidden] { display: none; }
  .hr-ask-more-in {
    flex: 1 1 0; min-width: 0; min-height: 44px; box-sizing: border-box;
    background: rgba(253,250,243,0.12); border: 1px solid var(--gold); border-radius: .7rem;
    padding: .42rem .6rem; font: 400 .78rem/1.35 'Inter', sans-serif; color: var(--paper);
  }
  .hr-ask-more-in::placeholder { color: rgba(253,250,243,0.62); }
  .hr-ask-more-in:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
  .hr-ask-more-go {
    flex: none; box-sizing: border-box; width: 44px; height: 44px; padding: 0; border-radius: .6rem;
    border: 1px solid var(--gold); background: rgba(253,250,243,0.14); color: var(--paper);
    font: 400 1rem/1 'Inter', sans-serif; cursor: pointer;
  }
  .hr-ask-more-go:hover { background: rgba(253,250,243,0.26); }
  .hr-ask-more-go:active { transform: scale(0.94); }
  /* La domanda dello studente nel filo delle «richieste in più» resta fuori dalla spiegazione letta. */
  .hr-explain-wrap.open .ask-result.sess-explain .ask-q {
    margin: .5rem 0 .28rem; padding-top: .42rem;
    border-top: 1px dashed rgba(253,250,243,0.42);
    font: 400 .72rem/1.4 'Inter', sans-serif; color: #ffe9a8;
  }
  .hr-explain-wrap.open .ask-result.sess-explain .ask-q::before { content: '› '; }
  /* Su PC la barra NON è un nastro largo quanto la finestra: due righe di spiegazione lascerebbero
     ~1200px di rosso vuoto con 👂 e panda spiaggiati all'altro capo (misurato: 1406×117px per 3
     righe). Da 1024 in su — lo stesso breakpoint su cui il pannello Studio diventa colonna
     laterale e .vocab-bot si ferma a 480px — la barra si stringe attorno al suo contenuto
     (max 720px, come una riga di sottotitolo) e si centra sotto la carta, che a quella larghezza
     è centrata nella finestra. Sotto i 1024 resta nastro a tutta larghezza: lì lo spazio è poco
     e il pollice dello scroller deve stare lontano dalle lettere. */
  @media (min-width: 1024px) {
    .study-dock { z-index: 960; }
    .hr-explain-wrap.open {
      z-index: 960; /* I comandi della conversazione restano sopra la colonna Studio. */
      left: 50%; right: auto; transform: translateX(-50%);
      width: auto; max-width: min(720px, calc(100vw - 1.2rem));
    }
  }
  /* Il fondo delle tre viste a carte deve restare SOPRA la barra: il vecchio 7.5rem era
     tarato sui ~96px di barra d'una volta, ora la barra arriva a 34vh + la sua cornice (il
     max() tiene il minimo di prima su schermi altissimi). */
  body.hr-ask-open #viewVocab, body.hr-ask-open #viewRad, body.hr-ask-open #viewGrammar { padding-bottom: max(7.5rem, calc(34vh + var(--floating-bar-bottom, 8rem) + 2rem)); }

  /* Scroller interno delle DUE barre (✨ e lettura): senza regole sue, Windows/Chrome ne disegna
     uno classico da ~15px grigio chiaro sopra il rosso, con l'avatar sopra. Sottile e d'oro. Le
     proprietà standard bastano a Firefox, ma su Chrome/Blink vincono su ::-webkit-scrollbar (e
     «thin» lì vale ~10px, misurato): dove quello pseudo-elemento esiste si riportano ad auto,
     così lo scroller scende a 5px anche lì.
     LA CANALINA SOTTO IL POLLINE c'è apposta, ed è la seconda metà del lavoro: un pollice dorato
     da solo su fondo trasparente, in una barra da 96px, è un trattino che compare dal niente
     («la barra di scorrimento è brutta così»). Il canale scuro appena accennato (22%) lo inquadra
     e si capisce che si può trascinare, senza tornare al parallelepipedo grigio di default. */
  .dock-explain,
  .hr-explain-wrap.open .ask-result.sess-explain {
    scrollbar-width: thin;
    scrollbar-color: rgba(212,160,23,0.7) rgba(0,0,0,0.22);
  }
  @supports selector(::-webkit-scrollbar) {
    .dock-explain,
    .hr-explain-wrap.open .ask-result.sess-explain { scrollbar-width: auto; scrollbar-color: auto; }
  }
  .dock-explain::-webkit-scrollbar,
  .hr-explain-wrap.open .ask-result.sess-explain::-webkit-scrollbar { width: 5px; height: 5px; }
  .dock-explain::-webkit-scrollbar-track,
  .hr-explain-wrap.open .ask-result.sess-explain::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.22); border-radius: 3px; margin: 2px 0;
  }
  .dock-explain::-webkit-scrollbar-thumb,
  .hr-explain-wrap.open .ask-result.sess-explain::-webkit-scrollbar-thumb {
    background: rgba(212,160,23,0.7); border-radius: 3px;
  }
  .dock-explain::-webkit-scrollbar-thumb:hover,
  .hr-explain-wrap.open .ask-result.sess-explain::-webkit-scrollbar-thumb:hover { background: rgba(212,160,23,0.85); }
  .dock-explain::-webkit-scrollbar-corner,
  .hr-explain-wrap.open .ask-result.sess-explain::-webkit-scrollbar-corner { background: transparent; }

  /* Solo gli orecchi dell'app aperta FUORI da /fun/ (nessuna config cloud
     arrivata → nessun MP3 da chiedere) restano nascosti. Un errore dell'endpoint
     NON nasconde più nulla: mostra una riga breve e il tap dopo ritenta. */
  body.hr-no-audio [data-speak],
  body.hr-no-audio [data-sessspeak],
  body.hr-no-audio [data-radspeak],
  body.hr-no-audio [data-fav-speak],
  body.hr-no-audio [data-gact="speak"],
  body.hr-no-audio #btnSpeak,
  body.hr-no-audio #btnRdgSpeak,
  body.hr-no-audio .hr-explain-play { display: none !important; }

  .grammar-area-tabs { display: flex; gap: .35rem; margin: 0 0 1rem; padding: .3rem; width: fit-content;
    border: 1px solid var(--rule-2); border-radius: 999px; background: var(--surface); }
  .grammar-area-tabs button { min-height: 44px; padding: .45rem 1rem; border: 0; border-radius: 999px;
    color: var(--fg-60); background: transparent; cursor: pointer; font: 600 .85rem var(--font-ui); }
  .grammar-area-tabs button[aria-selected="true"] { color: var(--gold-ink); background: var(--gold-tint); }
  .grammar-area-tabs button:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
  #viewTabs { align-items: center; }
  :root { --section-dock-floor: .7rem; --section-dock-height: 64px;
    --floating-bar-bottom: calc(var(--section-dock-height) + var(--section-dock-floor) + 11px + env(safe-area-inset-bottom, 0px)); }
  .liquid-dock-wrap { padding-bottom: calc(var(--section-dock-floor) + env(safe-area-inset-bottom, 0px)); }
  @media (min-width: 768px) and (max-width: 1180px) { :root { --section-dock-floor: .85rem; } }
  .fuffy-dock-button { position: relative; z-index: 3; pointer-events: auto; flex: 0 0 58px; width: 58px; height: 54px; margin: 0 .15rem;
    border: 0; border-radius: 1rem; padding: 0; cursor: pointer; touch-action: manipulation;
    background: transparent; box-shadow: none; }
  .fuffy-dock-button:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 1px; }
  .view-tabs.search-active .fuffy-dock-button { opacity: 0; pointer-events: none; }
  .fuffy-bubble { position: absolute; width: 52px; height: 52px; left: 50%; top: 50%; border-radius: 50%;
    transform: translate(-50%, -50%); border: 1px solid rgba(203,174,112,.6);
    background: radial-gradient(circle at 28% 20%, rgba(255,255,255,.58), transparent 34%),
      radial-gradient(circle at 75% 83%, rgba(164,207,214,.2), transparent 53%), rgba(238,246,247,.1);
    box-shadow: inset 2px 2px 5px rgba(255,255,255,.75), inset -2px -3px 6px rgba(164,190,198,.25),
      0 2px 5px rgba(77,103,111,.1); animation: fuffyBubbleFloat 4.2s ease-in-out infinite; }
  .fuffy-bubble::before { content: ''; position: absolute; width: 14px; height: 6px; left: 8px; top: 5px;
    border-top: 2px solid rgba(255,255,255,.9); border-radius: 50%; transform: rotate(-35deg); }
  .fuffy-bubble::after { content: ''; position: absolute; width: 3px; height: 3px; right: 6px; bottom: 10px;
    border-radius: 50%; background: rgba(255,255,255,.75); }
  /* Nelle spiegazioni il peluche usa una bolla più piccola; il pulsante resta comodo da toccare. */
  .fuffy-bubble.fuffy-bubble-small { position: relative; flex: none; width: 32px; height: 32px; left: auto; top: auto;
    display: inline-flex; align-items: center; justify-content: center; transform: none; animation: none; }
  .fuffy-bubble-small::before { width: 8px; height: 4px; left: 4px; top: 3px; border-top-width: 1px; }
  .fuffy-bubble-small::after { width: 2px; height: 2px; right: 4px; bottom: 5px; }
  .fuffy-thought { position: absolute; z-index: 2; top: -5px; right: -10px; display: none;
    align-items: center; justify-content: center; gap: 3px; width: 24px; height: 15px; border-radius: 9px;
    background: var(--paper); color: var(--desk); box-shadow: 0 1px 3px rgba(25,44,36,.2); pointer-events: none; }
  .fuffy-thought::before { content: ''; position: absolute; left: 3px; bottom: -3px;
    width: 3px; height: 3px; border-radius: 50%; background: var(--paper); }
  [data-thinking] .fuffy-thought { display: inline-flex; }
  .fuffy-thought span { width: 3px; height: 3px; border-radius: 50%; background: currentColor;
    animation: fuffyThoughtDots 1.2s ease-in-out infinite; }
  .fuffy-thought span:nth-child(2) { animation-delay: .16s; }
  .fuffy-thought span:nth-child(3) { animation-delay: .32s; }
  @keyframes fuffyThoughtDots {
    0%,80%,100% { opacity: .4; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-2px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .fuffy-thought span { animation: none; opacity: 1; }
  }
  .hr-explain-wrap.open .hr-explain-panda { position: relative; }
  .hr-explain-panda .fuffy-control-label { position: absolute; right: calc(100% + .3rem);
    max-width: calc(50vw - 5.2rem); overflow: hidden; text-overflow: ellipsis;
    font: 600 .72rem var(--font-ui); white-space: nowrap; }
  .hr-explain-panda .fuffy-bubble-small img, .dock-panda .fuffy-bubble-small img {
    width: 28px; height: 28px; border-radius: 0; object-fit: contain; display: block; }
  .fuffy-dock-button canvas, .fuffy-panda-image { position: absolute; width: calc(100% - 4px); height: calc(100% - 4px); left: 2px; top: 2px;
    object-fit: contain; filter: drop-shadow(0 1px 1px rgba(40,34,24,.1)); }
  @keyframes fuffyBubbleFloat { 0%,100% { transform: translate(-50%, -50%) translateY(1px); } 50% { transform: translate(-50%, -50%) translateY(-1px); } }
  @media (prefers-reduced-motion: reduce) { .fuffy-bubble { animation: none; } }
  .fuffy-panda-image {
    opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 1px 1px rgba(40,34,24,.1));
    transition: opacity .28s ease, transform .42s cubic-bezier(.22,.61,.36,1), filter .28s ease;
  }
  .fuffy-response { position: absolute; inset: 0; pointer-events: none; opacity: 0;
    transform: translateY(5px) scale(.76) rotate(-8deg);
    transition: opacity .3s ease .06s, transform .46s cubic-bezier(.22,.61,.36,1); }
  .fuffy-response-glyph { position: absolute; left: 7px; top: 7px; width: calc(100% - 14px); height: calc(100% - 14px); object-fit: contain;
    filter: brightness(0) saturate(100%) invert(26%) sepia(59%) saturate(2199%) hue-rotate(331deg) brightness(83%) contrast(101%); }
  #fuffyResponseCanvas { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
  .fuffy-dock-button[data-seal-visible="true"] .fuffy-response { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
  .fuffy-dock-button[data-seal-visible="true"] .fuffy-panda-image { opacity: 0; transform: translateY(-4px) scale(.84); filter: blur(2px); }
  .fuffy-dock-button[data-response-renderer="particles"] #fuffyResponseCanvas { display: block; }
  .fuffy-dock-button[data-response-renderer="particles"] .fuffy-response-glyph { display: none; }
  .fuffy-dock-button[data-response-renderer="particles"] :is(.fuffy-panda-image, .fuffy-response) {
    transition: none; transform: none; filter: none;
  }
  .fuffy-dock-button[data-response-transition="true"] .fuffy-response { opacity: 1; }
  .fuffy-dock-button[data-response-transition="true"] .fuffy-panda-image { opacity: 0; }
  .fuffy-dock-button[data-seal-visible="true"] .fuffy-dock-dot { visibility: hidden; }
  .fuffy-dock-button[data-panda-state="thinking"] .fuffy-response-glyph { animation: fuffySealPulse 2.8s ease-in-out infinite; }
  @keyframes fuffySealPulse { 0%,100% { opacity: .65; } 50% { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .fuffy-panda-image, .fuffy-response { transition: none; }
    .fuffy-dock-button .fuffy-response-glyph { animation: none; }
  }
  .fuffy-dock-dot { display: none; position: absolute; right: 4px; bottom: 3px; width: 8px; height: 8px; border: 2px solid #fff8e8; border-radius: 50%; background: #c22b2b; }
  .fuffy-dock-button.has-conversation .fuffy-dock-dot { display: block; }
  .fuffy-dock-button[aria-expanded="true"] .fuffy-dock-dot { background: #bf5454; }
  /* Nello stato raccolto resta visibile solo il comando Fuffy della dock. */
  #globalFuffy:not(.open) { display: none; }
  .hr-explain-wrap.open.min { display: none; }
  .study-dock.minimized { display: none; }
  .hr-explain-dismiss { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 44px; height: 44px;
    margin-left: .15rem; border: 1px solid rgba(255,255,255,.3); border-radius: .65rem; background: rgba(255,255,255,.12); color: #fff; font-size: 1.1rem; cursor: pointer; }
  .hr-explain-dismiss:focus-visible { outline: 2px dashed #fff; outline-offset: 2px; }
  .hr-explain-wrap.open .hr-explain-play { order: 0; }
  .hr-explain-wrap.open .hr-explain-panda { order: 1; }
  .hr-explain-wrap.open .hr-explain-close { order: 2; margin-left: auto; }
  .hr-explain-wrap.open .hr-explain-dismiss { order: 3; }
  /* One answer and one question field; the central mascot owns the conversation. */
  .hr-explain-wrap.open:not(.min) { border: 0; border-radius: 1rem; box-shadow: 0 10px 28px rgba(25,44,36,.18); padding: .6rem .75rem; }
  .hr-explain-wrap.open .hr-explain-ctl { border-top: 0; padding-top: .1rem; gap: .2rem; }
  .hr-explain-wrap.open .hr-explain-ctl button { border: 0; background: transparent; border-radius: .5rem; }
  .hr-explain-wrap.open .hr-explain-ctl button:hover { background: rgba(255,255,255,.1); }
  .hr-explain-wrap.open .hr-explain-panda { display: inline-flex; margin-left: auto; }
  .hr-explain-wrap.open .hr-ask-more { border-top: 1px solid rgba(255,255,255,.14); padding-top: .55rem; }
  .hr-explain-wrap.open .hr-ask-more-in { border: 0; border-radius: .6rem; background: rgba(255,255,255,.09); box-shadow: none; }
  .hr-explain-wrap.open .hr-ask-more-in:focus { outline: 1px solid rgba(255,255,255,.55); outline-offset: 1px; border: 0; box-shadow: none; }
  .hr-explain-wrap.open .hr-ask-more-go { border: 0; background: rgba(255,255,255,.12); border-radius: .6rem; }
  .study-dock { border: 0; box-shadow: 0 10px 28px rgba(25,44,36,.18); }
  .study-dock .dock-actions { border-top: 0; padding-top: .1rem; }
  .study-dock .dock-panda { border: 0; background: transparent; }
  .study-dock .hr-ask-more { min-width: 0; border-top: 1px solid rgba(255,255,255,.14); padding-top: .55rem; }
  .study-dock .dock-back { order: -1; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; box-sizing: border-box;
    padding: 0; border: 0; border-radius: .5rem; background: transparent; color: var(--paper); cursor: pointer; }
  .study-dock .dock-back[hidden] { display: none; }
  .study-dock .dock-back:hover { background: rgba(255,255,255,.1); }
  .study-dock .dock-back:focus-visible { outline: 2px dashed var(--paper); outline-offset: 2px; }
  .study-dock .ask-q { margin: .5rem 0 .28rem; padding-top: .42rem; border-top: 1px dashed rgba(253,250,243,.42); font-weight: 600; color: #ffe9a8; }
  /* Parola e composizione sulla prima riga; significato o spiegazione sotto,
     a tutta larghezza e senza etichetta. I comandi chiudono la barra. */
  .study-dock { align-items: center; gap: .45rem .6rem; padding: .6rem .75rem; }
  .study-dock .dock-lead { max-width: 38%; min-width: 2.4rem; }
  .study-dock .dock-item { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .study-dock .dock-py { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .study-dock .dock-mean { flex: 1 0 100%; padding-top: .4rem; border-top: 1px solid rgba(253,250,243,.16); border-radius: 0; }
  .study-dock .dock-sep.sep-chars { display: none; }
  .study-dock .dock-chars { flex: 1 1 0; min-width: 0; max-width: none; flex-direction: row; align-items: center; gap: .5rem;
    padding: 0; border: 0; }
  .study-dock .dock-chars[hidden] { display: none; }
  .study-dock .dock-chars .dock-kicker { flex: none; }
  .study-dock .dock-charlist { flex: 1 1 auto; min-width:0; display:grid;
    grid-template-columns: repeat(var(--comp-columns, 2), minmax(0, 1fr)); grid-auto-flow:row; gap:.3rem; }
  .study-dock .dock-charlist .dc { min-width:0; padding-inline:.45rem; }
  .study-dock .dock-charlist .dc em { flex:1 1 0; min-width:0; max-width:none; }
  .study-dock .dock-desc { display:block; white-space:nowrap; overflow:hidden; border-radius:0; text-overflow:clip; -webkit-line-clamp:unset; }
  .study-dock .dock-explain { border-radius: 0; }
  .study-dock .dock-charlist .dc em { text-overflow:clip; }
  .dock-scroll-text { display:inline-block; width:max-content; max-width:none; white-space:nowrap; vertical-align:bottom; }
  [data-dock-scroll] > .dock-scroll-text { animation:dockGlossScroll var(--dock-scroll-duration,10s) linear infinite; }
  [data-dock-scroll]:hover > .dock-scroll-text { animation-play-state:paused; }
  @keyframes dockGlossScroll {
    0%,15% { transform:translateX(0); }
    85%,100% { transform:translateX(var(--dock-scroll-distance)); }
  }
  @media (prefers-reduced-motion:reduce) {
    [data-dock-scroll] > .dock-scroll-text { animation:none; }
    .study-dock [data-dock-scroll], .hr-comp [data-dock-scroll] { overflow-x:auto; }
  }
  .study-dock .dock-chars { display: flex; }
  .study-dock .dock-actions { gap: .25rem; min-width: 0; }
  .study-dock .dock-actions .dock-panda { flex: 0 1 auto; min-width: 44px; padding-inline: .35rem; }
  .study-dock .dock-panda .fuffy-control-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .study-dock .dock-panda img { flex: none; }
  .study-dock .dock-say { order: 0; flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: .5rem; background: transparent;
    color: var(--paper); font-size: 1.15rem; cursor: pointer; transition: background .15s ease, transform .12s ease; }
  .study-dock .dock-say:hover { background: rgba(255,255,255,.1); }
  .study-dock .dock-say:active { transform: scale(.94); }
  .study-dock .dock-say:focus-visible { outline: 2px dashed var(--paper); outline-offset: 2px; }
  .study-dock.minimized .dock-say { display: none; }
  /* La composizione descrive i caratteri; Ascolta pronuncia la parola intera. */
  .dock-charlist .dc, .hr-comp .dc { display: inline-flex; align-items: center; gap: .3rem; box-sizing: border-box; padding: .2rem .6rem;
    border: 1px solid rgba(255,233,168,.45); border-radius: 999px; background: rgba(255,255,255,.1); }
  .dc em { max-width: 8.5rem; }
  .hr-comp .dc em { flex: 1 1 0; max-width: none; text-overflow:clip; }
  .dock-say.is-on { background: rgba(255,233,168,.28) !important; animation: hrBtnPulse 1.1s infinite alternate ease-in-out; }
  .hr-comp { gap: .3rem .4rem; }
  body.hr-no-audio .dock-say { display: none; }
  @media (prefers-reduced-motion: reduce) { .dock-say.is-on { animation: none; } }
  @media (max-width: 360px) {
    .study-dock .dock-say { width: 44px; padding: 0; }
    .study-dock .dock-say-label { display: none; }
  }
  @media (max-width: 767px) {
    :root { --section-dock-floor: .55rem; }
    .fuffy-dock-button { flex-basis: 50px; width: 50px; height: 52px; margin-inline: .1rem; }
    .fuffy-bubble { width: 46px; height: 46px; }
    #viewTabs .view-tab .tab-text { font-size: .64rem; }
  }
  /* iOS zooms small inputs on focus; cover touch devices in landscape too. */
  @media (max-width: 767px), (hover: none) and (pointer: coarse) {
    .dock-search .hr-search-input,
    .hr-ask-more-in { font-size: max(16px, 1rem); }
  }
  /* Reading on white paper, with reflow instead of horizontal zoom. */
  #outputShell { background: var(--surface-raised); border-color: var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
  #outputBody { background: var(--surface-raised); color: var(--fg); }
  #outputShell .out-header { background: var(--surface); }
  #outputShell #output { font-size: calc(var(--rd-fs) * var(--reading-scale, 1)); color: var(--fg);
    line-height: var(--reading-line, 1.7); transition: font-size .18s ease, line-height .18s ease; }
  #outputShell #output .hanzi { margin-inline: var(--reading-gap, 0); }
  #output > .reading-paragraph { margin: 0; }
  #output > .reading-paragraph + .reading-paragraph { margin-top: .35em; }
  /* Titoli e sezioni delle lezioni delle materie in grassetto */
  #output > .reading-paragraph.reading-lesson-title,
  .subject-practice-text .reading-paragraph.reading-lesson-title {
    display: block;
    font-size: calc(var(--rd-fs) * 1.32);
    font-weight: 700;
    line-height: 1.45;
    color: var(--fg);
    margin: 0.35rem 0 1.25rem 0 !important;
    padding-bottom: 0.65rem;
    border-bottom: 2px solid var(--rule);
    letter-spacing: -0.01em;
  }
  #output > .reading-paragraph.reading-lesson-title :is(.hanzi, .hanzi-glyph, span[data-idx]),
  .subject-practice-text .reading-paragraph.reading-lesson-title :is(.hanzi, .hanzi-glyph, span[data-idx]) {
    font-weight: 700 !important;
  }
  #output > .reading-paragraph.reading-section-title,
  .subject-practice-text .reading-paragraph.reading-section-title {
    display: block;
    font-size: calc(var(--rd-fs) * 1.08);
    font-weight: 700;
    line-height: 1.5;
    color: var(--gold-ink);
    margin: 1.5rem 0 0.55rem 0 !important;
    padding-left: 0.65rem;
    border-left: 3.5px solid var(--gold-ink);
    letter-spacing: 0.02em;
  }
  #output > .reading-paragraph.reading-section-title :is(.hanzi, .hanzi-glyph, span[data-idx]),
  .subject-practice-text .reading-paragraph.reading-section-title :is(.hanzi, .hanzi-glyph, span[data-idx]) {
    font-weight: 700 !important;
    color: inherit;
  }
  #output > .reading-paragraph.reading-lesson-title + .reading-paragraph,
  #output > .reading-paragraph.reading-section-title + .reading-paragraph {
    margin-top: 0.55rem;
  }
  /* Lesson figures belong to the concept being read, on the same paper. */
  #output > .subject-inline-figure { display: block; width: 100%; max-width: 680px; min-width: 0;
    margin: 1.1rem auto 1.35rem; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .subject-inline-figure > svg { display: block; width: 100%; height: auto; max-height: none; margin: 0 auto; }
  /* Didascalie delle figure e immagini centrate per tutte le materie */
  .subject-inline-figure figcaption,
  .geo-figure figcaption,
  .subject-visual-caption,
  #output figcaption,
  #output figure figcaption,
  figure figcaption {
    display: block;
    width: 100%;
    margin: .45rem auto 0;
    padding: 0;
    text-align: center !important;
    text-align-last: center !important;
    color: var(--fg-60);
    font: 500 .875rem/1.5 var(--font-hanzi);
    letter-spacing: normal;
    overflow-wrap: anywhere;
  }
  #output > .subject-reading-notes { margin-top: 1rem; font: 400 .875rem/1.65 var(--font-hanzi); letter-spacing: normal; }
  /* ============ Regolazione Lettura Fluida Minimizzata (A±) ============ */
  .reading-flow-anchor { position: relative; display: inline-flex; align-items: center; }
  .reading-settings-anchor { display: contents; }
  .reading-settings-panel { display: flex; align-items: center; gap: inherit; }
  #btnReadingSettings { display: none; }
  .rdg-flow-trigger {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: .88rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; padding: 0 .45rem;
  }
  .reading-flow-popover {
    position: absolute; top: calc(100% + 8px); right: -36px; z-index: 90;
    display: flex; align-items: center; gap: .35rem; padding: .4rem .5rem;
    background: var(--surface-raised, #ffffff); border: 1px solid var(--rule-2, #e5e0d8);
    border-radius: var(--r, 12px); box-shadow: 0 10px 28px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.06);
    white-space: nowrap;
  }
  .reading-flow-popover::before {
    content: ""; position: absolute; top: -5px; right: 48px; width: 8px; height: 8px;
    background: var(--surface-raised, #ffffff); border-left: 1px solid var(--rule-2, #e5e0d8);
    border-top: 1px solid var(--rule-2, #e5e0d8); transform: rotate(45deg); pointer-events: none;
  }
  .reading-flow-popover[hidden] { display: none !important; }
  .reading-flow-pop-btn {
    min-width: 36px; height: 34px; padding: .3rem .55rem; border: 1px solid var(--rule-2, #e5e0d8);
    border-radius: var(--r-sm, 8px); background: var(--surface, #faf8f5); color: var(--fg, #1a1a1a);
    font: 600 .76rem var(--font-ui, system-ui); cursor: pointer; display: inline-flex; align-items: center;
    justify-content: center; gap: .25rem; transition: all .14s ease;
  }
  .reading-flow-pop-btn:hover {
    background: var(--ui-active-tint, rgba(46,125,79,0.08)); border-color: var(--ui-active-line, rgba(46,125,79,0.3));
    color: var(--ui-active-deep, #1e5637);
  }
  .reading-flow-pop-btn[aria-pressed="true"] {
    background: var(--ui-active-tint, rgba(46,125,79,0.12)); border-color: var(--ui-active, #2e7d4f);
    color: var(--ui-active-deep, #1e5637); font-weight: 700;
  }
  .reading-flow-pop-btn:disabled { opacity: .35; cursor: default; }
  @media (pointer: coarse) {
    .reading-flow-pop-btn { min-width: 40px; height: 38px; }
  }
  /* Superfici chiare e giada condivisa tra navigazione, lettura e percorso. */
  #inputText { border-radius: var(--r-lg); border-color: var(--rule-2); background: var(--surface-raised); color: var(--fg); box-shadow: var(--shadow-card); }
  #inputText::placeholder { color: var(--fg-60); }
  #inputText:focus { border-color: var(--ui-active); outline: 2px solid var(--ui-active); outline-offset: 3px; }
  .reader-mode-btn.active, .view-tabs .view-tab.active {
    background: var(--ui-active); color: #fff;
    box-shadow: var(--shadow-control); }
  .reader-mode-btn.active .rmode-ic, .view-tabs .view-tab.active .tab-glyph {
    color: #fff; filter: none; text-shadow: none; }
  @keyframes hr-view-enter { from { opacity: .35; } to { opacity: 1; } }
  :is(#viewRead, #viewVocab, #viewGrammar, #viewRad):not([hidden]) { animation: hr-view-enter .16s ease-out; }
  .vocab-levels { border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
  .session-card, .grammar-shell { background: #fff; border-color: var(--rule);
    box-shadow: var(--shadow-card); }
  .sess-focus { border-radius: var(--r); }
  .sess-focus:not(.asked):not(.done) { background: linear-gradient(120deg, #fff, #f8fcfa); border-color: color-mix(in oklab, var(--ui-active) 10%, transparent); }
  .sf-tools button, .sprev, .strip-arrow, .session-actions button { border-radius: var(--r); }
  .session-actions .btn-primary:not(:disabled) {
    background: var(--seed-primary); box-shadow: var(--shadow-control); }
  @media (hover: hover) { .session-actions .btn-primary:not(:disabled):hover { background: var(--primary-ink); } }
  .vex-body { border: 1px solid var(--rule); }
  #vexBody .ex-zh { line-height: 1.5; }
  #vexBody .ex-py { font-size: .8rem; }
  #vexBody .ex-it { font-size: .86rem; color: var(--fg-70); }
  .kicker { color: var(--fg-60); }
  @media (max-width: 767px), (hover: none) and (pointer: coarse) {
    .reader-modes-bar { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .hr-top :is(.hr-profile, .hr-icon, .hr-shop-back), .sf-tools button,
    .vex-trans-btn, .session-actions .sess-review, .rdg-ico, .reading-flow-tools button {
      min-width: 44px; min-height: 44px; }
    .vex-tab { min-height: 44px; }
    .sf-tools { flex-wrap: wrap; }
    .sf-desc { font-size: .84rem; line-height: 1.6; }
    #vexBody .ex-zh { font-size: 1.1rem; }
    .session-actions.has-examples { align-items: stretch; }
  }
  @media (max-width: 360px) { .sprev-i { font-size: .88rem; } }
  @media (prefers-reduced-motion: reduce) {
    .subject-lesson, .subject-course, #outputShell #output { transition: none; }
    .subject-lesson:hover, .subject-lesson:focus-visible { transform: translate(-50%,-50%); }
  }

  /* Lettura immersiva: la stessa pagina e le stesse barre, senza la cornice dell'app. */
  /* Comandi dell'output: senza contorno, appena più piccoli, in rilievo quando attivi. */
  .out-tools :is(.rdg-ico, .snip-nav-arrow) {
    border: 0; border-radius: 50%; background: transparent; color: var(--fg-70); box-shadow: none;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .12s ease;
  }
  .out-tools .rdg-ico { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; }
  .out-tools .snip-nav-arrow { width: 30px; height: 30px; }
  @media (hover: hover) {
    .out-tools :is(.rdg-ico, .snip-nav-arrow):hover:not(:disabled) {
      background: var(--tint); color: var(--fg); transform: none;
    }
  }
  .out-tools :is(.rdg-ico, .snip-nav-arrow):is(:active, .active, [aria-pressed="true"], [aria-expanded="true"], .is-playing):not(:disabled) {
    background: var(--surface-raised); color: var(--ui-active-deep); box-shadow: var(--shadow-control);
  }
  .out-tools .rdg-ico.is-playing { border: 0 !important; }
  @media (max-width: 767px), (pointer: coarse) {
    .out-tools .rdg-ico { width: 42px; min-width: 42px; height: 42px; min-height: 42px; }
  }
  #btnReadingFullscreen svg { width: 22px; height: 22px; }
  button.reading-bar-minimize {
    display: inline-flex; align-items: center; justify-content: center; flex: none; order: 2; margin-left: auto;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: .5rem;
    background: transparent; color: #fff; cursor: pointer;
  }
  .reading-bar-minimize:hover { background: rgba(255,255,255,.1); }
  .reading-bar-minimize:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  @media (max-width: 600px) {
    .out-header { gap: .3rem; padding: .4rem .55rem; }
    .out-tab { flex: 1 1 0; gap: .3rem; min-height: 44px; padding-inline: 0; }
    .output-shell:not(.is-collapsed) .out-chev { display: none; }
    .out-tools { flex: none; gap: 2px; }
    .out-tools .snip-nav-arrow { width: 30px; min-width: 30px; height: 42px; padding: 0; }
  }
  @media (max-width: 360px) {
    .out-tools .snip-nav-arrow { width: 26px; min-width: 26px; }
  }
  html.reading-fullscreen, body.reading-fullscreen { overflow: hidden; }
  body.reading-fullscreen { --floating-bar-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  body.reading-fullscreen :is(#masthead, #inputShell, #pdfShell, .study-col, #subjectVisual, #subjectActionsBottom, #subjectExercises) { display: none; }
  body.reading-fullscreen #viewRead { animation: none; }
  body.reading-fullscreen #outputShell {
    position: fixed; inset: 0; z-index: 930; width: 100%; height: 100%; margin: 0;
    border: 0; border-radius: 0; box-shadow: none;
  }
  body.reading-fullscreen #outHeader {
    position: absolute; inset: 0 0 auto; z-index: 60; border-radius: 0;
    padding-top: calc(.45rem + env(safe-area-inset-top, 0px));
    padding-left: max(.85rem, env(safe-area-inset-left, 0px));
    padding-right: max(.85rem, env(safe-area-inset-right, 0px));
    /* Vetro condiviso da lezioni e libri: il testo scorre dietro alla testata. */
    background: color-mix(in oklab, var(--surface) 92%, transparent);
    background-image: linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,.04) 55%, rgba(255,255,255,.16));
    border-bottom: 1px solid rgba(255,255,255,.5);
    transition: transform .22s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 4px 20px rgba(25,44,36,.05);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.reading-fullscreen #outHeader {
      background-color: color-mix(in oklab, var(--surface) 52%, transparent);
      -webkit-backdrop-filter: blur(24px) saturate(155%);
      backdrop-filter: blur(24px) saturate(155%);
    }
  }
  @media (prefers-reduced-transparency: reduce) {
    body.reading-fullscreen #outHeader {
      background: var(--surface);
      -webkit-backdrop-filter: none; backdrop-filter: none;
    }
  }
  body.reading-fullscreen #outputShell.header-hidden #outHeader { transform: translateY(-100%); }
  body.reading-fullscreen #outTab { display: none; }
  body.reading-fullscreen #outTools { flex: 1; justify-content: center; gap: .3rem; }
  body.reading-fullscreen #outTools > button,
  body.reading-fullscreen #outTools .rdg-ico { width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0; }
  body.reading-fullscreen .out-chev { display: none; }
  body.reading-fullscreen #outputBody {
    height: 100%; min-height: 0; overflow: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; border-radius: 0;
    padding-top: var(--reading-header-height, 104px);
    padding-bottom: calc(var(--floating-panel-height, 0px) + 6rem + env(safe-area-inset-bottom, 0px));
    scroll-padding-top: calc(var(--reading-header-height, 104px) + 1rem);
  }
  body.reading-fullscreen #output { margin-inline: auto; }
  body.reading-fullscreen #viewTabs {
    width: auto; max-width: none; padding: 0; border: 0; background: transparent;
    box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  body.reading-fullscreen #viewTabs::after { display: none; }
  body.reading-fullscreen #viewTabs > :not(#fuffyDockButton) { display: none; }
  body.reading-fullscreen #fuffyDockButton { margin: 0; }
  body.reading-fullscreen:is(.hr-ask-open, .has-dock) #liquidDockWrap { visibility: hidden; }
  body.reading-fullscreen .hr-explain-wrap.open { max-height: calc(100dvh - 1.5rem); }
  @media (prefers-reduced-motion: reduce) {
    :is(.out-tab-label, .book-reader-title).is-scrolling .out-title-track,
    .out-title-track { animation: none !important; max-width: 100%; }
    :is(.out-tab-label, .book-reader-title).is-scrolling .out-title-copy,
    .out-title-copy { min-width: 0 !important; max-width: 100%; padding: 0 !important; overflow: hidden; text-overflow: ellipsis; }
    .out-title-copy[aria-hidden="true"] { display: none !important; }
    body.reading-fullscreen #outHeader { transition: none; }
  }
  /* Grammar uses the same study surface and keeps its own route and progress. */
  body.view-grammar #sessionShell { display: none !important; }
  #viewVocab .grammar-area { margin-top: .7rem; }
  .grammar-head { margin-bottom: .5rem; }
  .grammar-head .ghead-badge { --badge-size: 42px; width:42px; height:42px; }
  .grammar-head .grammar-title { font-size: 1rem; }
  .grammar-strip { display:flex; align-items:stretch; gap:.45rem; margin: .8rem 0; }
  .grammar-strip .gpv { flex:1 1 0; min-width:0; position:relative; }
  .grammar-strip .gpv-zh { overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  #grammarLvlPop .ghead-badge { --badge-size:36px; width:36px; height:36px; flex-shrink:0; }
  .grammar-strip .strip-arrow { flex:0 0 1.65rem; padding:.2rem; }
  .grammar-actions { justify-content:center; }
  .gd-rad-tools { display:flex; align-items:center; gap:.45rem; margin:.5rem 0; }
  /* Biblioteca: griglia verticale a scorrimento, con spazi compatti e scrollbar invisibile. */
  body.view-books .masthead { margin-bottom: 0; }
  body.view-books, html:has(body.view-books) { scrollbar-width: none; -ms-overflow-style: none; }
  body.view-books::-webkit-scrollbar, html:has(body.view-books)::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .books-shell { max-width: 1440px; min-width: 0; margin: 0 auto; padding: .35rem 0 2rem; scrollbar-width: none; -ms-overflow-style: none; }
  .books-shell::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .books-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
  .books-heading { min-width: 0; }
  .books-head h2 { margin: 0; font: 500 clamp(1.6rem, 1.2rem + 1vw, 2.2rem)/1.2 var(--font-display); letter-spacing: -.025em; }
  .books-heading p { margin: .65rem 0 0; color: var(--fg-60); font-size: .9rem; line-height: 1.6; }
  .books-head #btnBooksUpload { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
  .books-head #btnBooksUpload svg { display: block; }
  .books-shelf-head { display: none !important; }
  #booksCount { display: none; }
  .books-shelf-controls { display: none; }
  .books-note { margin: .35rem 0 .75rem; padding: .8rem 1rem; border-radius: var(--r); color: var(--fg-70); background: var(--surface-sunk); font-size: .85rem; line-height: 1.6; }
  .books-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 160px)); justify-content: start; gap: clamp(0.75rem, 2vw, 1.25rem); min-width: 0; padding: .35rem .2rem 2.5rem; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
  .books-shelf::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .books-shelf > :not(.book-card) { grid-column: 1 / -1; width: 100%; box-sizing: border-box; }
  .books-empty { display: grid; justify-items: center; align-content: center; min-height: 300px; padding: 2.5rem 1.5rem; border: 1px dashed var(--rule-2); border-radius: var(--r-lg); text-align: center; color: var(--fg-60); line-height: 1.7; }
  .books-empty p { max-width: 32rem; margin: .35rem 0; }
  .books-empty h3 { margin: .8rem 0 .25rem; color: var(--fg); font: 500 1.5rem/1.25 var(--font-display); }
  .books-empty .btn-primary { min-height: 44px; margin-top: 1rem; }
  .book-card { display: flex; width: 100%; flex-direction: column; min-width: 0; margin: 0; padding: 0 0 .5rem; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
  .book-cover { --book-color: var(--ui-active-deep); display: flex; position: relative; isolation: isolate; flex-direction: column; justify-content: center; width: 100%; aspect-ratio: 3/4; box-sizing: border-box; margin-bottom: .45rem; padding: 1rem .85rem 1rem 1.15rem; overflow: hidden; border: 1px solid color-mix(in oklab, var(--book-color) 85%, var(--ink)); border-radius: 3px 8px 8px 3px; background: var(--book-color); color: var(--paper); box-shadow: 2px 4px 0 color-mix(in oklab, var(--paper) 90%, var(--ink)), 4px 6px 0 color-mix(in oklab, var(--paper) 80%, var(--ink)), 0 12px 22px -12px color-mix(in oklab, var(--ink) 45%, transparent); transition: transform .2s ease, box-shadow .2s ease; }
  .book-cover::before { content: ''; position: absolute; inset: 0 auto 0 0; width: .55rem; border-right: 1px solid rgba(255,255,255,.14); background: linear-gradient(90deg, rgba(0,0,0,.18), transparent); }
  .book-cover::after { content: ''; position: absolute; z-index: -1; width: 110%; aspect-ratio: 1; top: 43%; left: 18%; border: 1px solid color-mix(in oklab, var(--paper) 18%, transparent); border-radius: 50%; box-shadow: 0 0 0 1.15rem color-mix(in oklab, var(--paper) 4%, transparent), 0 0 0 2.3rem color-mix(in oklab, var(--paper) 4%, transparent); }
  .book-cover-title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font: 500 clamp(.85rem, .75rem + .25vw, 1.05rem)/1.25 var(--font-display); overflow-wrap: anywhere; }
  .book-cover-author { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; margin-top: .3rem; font: 400 .72rem/1.2 var(--font-ui); opacity: .8; overflow-wrap: anywhere; }
  .book-edit-btn { position: absolute; right: .4rem; bottom: .4rem; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0; border: 1px solid rgba(255, 255, 255, .32); border-radius: 50%; background: rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; cursor: pointer; opacity: .88; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: opacity .15s ease, background .15s ease, transform .15s ease, border-color .15s ease; }
  .book-edit-btn::after { content: ''; position: absolute; inset: -8px; }
  .book-edit-btn svg { width: 13px; height: 13px; display: block; }
  .book-card-progress { display: block; margin-top: 0; color: var(--fg-60); font-size: .68rem; line-height: 1.4; }
  .book-progress-track { display: block; width: 100%; height: 3px; margin-top: .35rem; overflow: hidden; border-radius: var(--r-pill); background: var(--rule); }
  .book-progress-track > span { display: block; width: var(--book-progress, 0%); max-width: 100%; height: 100%; border-radius: inherit; background: var(--gold); }
  .book-card:focus-visible, .books-shelf:focus-visible { outline: 2px solid var(--ui-active); outline-offset: 5px; }
  @media (hover: hover) {
    .books-shelf-controls button:not(:disabled):hover { background: var(--ui-active-tint); border-color: var(--ui-active-line); color: var(--ui-active-deep); }
    .book-card:hover .book-cover { transform: translateY(-4px) rotate(-.6deg); box-shadow: 2px 4px 0 color-mix(in oklab, var(--paper) 90%, var(--ink)), 4px 6px 0 color-mix(in oklab, var(--paper) 80%, var(--ink)), 0 16px 22px -10px color-mix(in oklab, var(--ink) 45%, transparent); }
    .book-edit-btn:hover { opacity: 1; background: rgba(0, 0, 0, .55); border-color: rgba(255, 255, 255, .7); transform: scale(1.1); }
  }
  .book-edit-btn:active { transform: scale(.92); }

  /* ============ Modale Modifica Libro (Titolo e Autore) ============ */
  .book-edit-backdrop { position: fixed; inset: 0; z-index: 9995; display: grid; place-items: center; padding: clamp(0.75rem, 3vw, 1.5rem); background: rgba(18, 14, 10, 0.45); -webkit-backdrop-filter: blur(8px) saturate(180%); backdrop-filter: blur(8px) saturate(180%); opacity: 0; pointer-events: none; transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1); }
  .book-edit-backdrop[hidden] { display: none !important; }
  .book-edit-backdrop.open { opacity: 1; pointer-events: auto; }
  .book-edit-modal { width: min(390px, calc(100% - 1.5rem)); background: var(--surface-raised); border: 1px solid var(--rule-2); border-radius: 1.15rem; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25); overflow: hidden; color: var(--ink); transform: translateY(12px) scale(0.96); opacity: 0; transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
  .book-edit-backdrop.open .book-edit-modal { transform: translateY(0) scale(1); opacity: 1; }
  .book-edit-head { display: flex; align-items: center; justify-content: space-between; padding: 0.95rem 1.15rem; background: var(--surface); border-bottom: 1px solid var(--rule); }
  .book-edit-head-left { display: flex; align-items: center; gap: 0.65rem; }
  .book-edit-head-icon { font-size: 1.15rem; }
  .book-edit-title { margin: 0; font-family: var(--font-ui); font-weight: 700; font-size: 1.02rem; color: var(--ink); line-height: 1.2; }
  .book-edit-sub { margin: 0.15rem 0 0; font-size: 0.74rem; color: var(--fg-60); }
  .book-edit-close-btn { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--rule); background: var(--surface-raised); color: var(--fg-70); font-size: 0.9rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.16s ease; }
  .book-edit-close-btn:hover { background: rgba(194, 43, 43, 0.1); border-color: var(--accent); color: var(--accent); }
  .book-edit-form { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
  .book-edit-field { display: flex; flex-direction: column; gap: 0.35rem; }
  .book-edit-label { font-size: 0.8rem; font-weight: 600; color: var(--fg-70); }
  .book-edit-input { width: 100%; box-sizing: border-box; padding: 0.65rem 0.85rem; border: 1px solid var(--rule-2); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 0.92rem; transition: border-color 0.18s ease, box-shadow 0.18s ease; }
  .book-edit-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 15%, transparent); }
  .book-edit-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; margin-top: 0.4rem; }
  .book-edit-actions button { padding: 0.55rem 1.1rem; font-size: 0.88rem; border-radius: var(--r-sm); cursor: pointer; }
  /* I libri conservano i comandi della lettura, preceduti dalla propria navigazione. */
  body.book-reading #outHeader { flex-wrap: wrap; gap: .35rem; cursor: default; }
  body.book-reading #outTab { display: none; }
  #bookReaderBar { display: flex; align-items: center; flex: 1 0 100%; min-width: 0; gap: .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--rule); cursor: default; }
  #bookReaderBar button { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--fg-70); cursor: pointer; }
  #bookReaderBar button:disabled { opacity: .3; cursor: default; }
  #bookReaderBar button svg { width: 20px; height: 20px; }
  #bookReaderBar :is(#btnBookPrev, #btnBookNext) { font-size: 1.6rem; line-height: 1; }
  .book-reader-pagination { display: flex; align-items: center; flex: none; gap: .5rem; min-width: 0; }
  #bookReaderTitle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); font: 600 .85rem/1.4 var(--font-ui); }
  #bookReaderPage { flex: none; color: var(--fg-60); font: 500 .72rem/1.4 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
  #bookReaderJump { display: flex; align-items: center; flex: none; gap: .4rem; color: var(--fg-60); font: 500 .7rem/1.3 var(--font-ui); }
  #bookReaderPageInput { box-sizing: border-box; width: 4.5rem; min-height: 40px; padding: .35rem .4rem; border: 1px solid var(--rule-2); border-radius: var(--r-sm); background: var(--surface-raised); color: var(--fg); font: 500 .8rem/1.3 var(--font-ui); text-align: center; }
  #bookReaderTotal { display: none; }
  body.book-reading #outTools { flex: 1 1 100%; justify-content: center; }
  body.book-reading.reading-fullscreen #outHeader { padding-bottom: .35rem; }
  body.book-reading.reading-fullscreen #outputBody { padding-top: var(--reading-header-height, 130px); scroll-padding-top: calc(var(--reading-header-height, 130px) + 1rem); }
  @media (hover: hover) { #bookReaderBar button:hover:not(:disabled) { background: var(--ui-active-tint); color: var(--ui-active-deep); } }
  @media (max-width: 600px) {
    .books-shell { padding-top: .2rem; }
    .books-head { align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: .75rem; margin-bottom: .25rem; }
    .books-heading { flex: 1 1 auto; min-width: 0; }
    .books-head h2 { font-size: 1.6rem; }
    .books-head #btnBooksUpload { width: 40px; height: 40px; min-height: 40px; }
    .books-shelf { grid-template-columns: repeat(3, 1fr); gap: .75rem .5rem; padding: .25rem 0 2rem; }
    .book-card { width: 100%; max-width: none; min-width: 0; }
    .book-cover { margin-bottom: .35rem; padding: .7rem .5rem .7rem .75rem; border-radius: 3px 6px 6px 3px; }
    .book-cover::before { width: .4rem; }
    .book-cover-title { -webkit-line-clamp: 3; font-size: .74rem; line-height: 1.2; }
    .book-cover-author { font-size: .62rem; -webkit-line-clamp: 1; margin-top: .2rem; }
    .book-card-progress { margin-top: 0; font-size: .62rem; line-height: 1.3; }
    .book-progress-track { height: 2.5px; margin-top: .25rem; }
    .book-edit-btn { width: 26px; height: 26px; min-width: 26px; min-height: 26px; right: .3rem; bottom: .3rem; }
    .book-edit-btn svg { width: 12px; height: 12px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .books-shelf { scroll-behavior: auto; }
    .book-card .book-cover { transition: none; }
    .book-card:hover .book-cover { transform: none; }
  }
  /* Telefono e iPad: una sola riga; le opzioni si svelano verso sinistra. */
  @media (max-width: 1100px), (pointer: coarse) {
    .reading-settings-anchor { position: relative; display: inline-flex; flex: none; align-items: center; }
    #btnReadingSettings { display: inline-flex; align-items: center; justify-content: center; }
    #btnReadingSettings svg { transition: transform .25s ease; }
    .reading-settings-anchor.is-open #btnReadingSettings svg { transform: rotate(60deg); }
    .reading-settings-panel {
      position: absolute; right: calc(100% + 4px); top: 50%; z-index: 95;
      display: flex; gap: .2rem; padding: .25rem; border: 1px solid var(--rule-2);
      border-radius: 999px; background: var(--surface-raised); box-shadow: var(--shadow-control);
      opacity: 0; visibility: hidden; pointer-events: none;
      transform: translate(14px, -50%) scaleX(.85); transform-origin: right center;
      transition: opacity .2s ease, transform .25s ease, visibility .25s;
    }
    .reading-settings-anchor.is-open .reading-settings-panel {
      opacity: 1; visibility: visible; pointer-events: auto; transform: translate(0, -50%) scaleX(1);
    }
    #readingSettingsPanel .rdg-ico { width: 42px; min-width: 42px; height: 42px; min-height: 42px; }
    /* Il secondo popover resta sotto alla pillola, dentro al bordo del telefono. */
    #readingSettingsPanel .reading-flow-popover { right: auto; left: -1.5rem; }
    #readingSettingsPanel .reading-flow-popover::before { right: auto; left: 2.5rem; }
    body.book-reading #outHeader { flex-wrap: nowrap; gap: .2rem; }
    body.book-reading #bookReaderBar { display: flex; flex: 1 1 0; gap: .2rem; padding: 0; border: 0; }
    body.book-reading #bookReaderTitle { flex: 1 1 0; padding: 0; font-size: .8rem; }
    body.book-reading .book-reader-pagination { display: flex; gap: .15rem; }
    body.book-reading #outTools { flex: none; gap: .15rem; justify-content: flex-end; }
    body.book-reading #bookReaderBar button { width: 42px; height: 42px; min-height: 42px; }
    body.book-reading #bookReaderPage {
      position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
      overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    body.book-reading #bookReaderJump { gap: .2rem; font-size: .7rem; }
    body.book-reading .book-reader-jump-label { display: none; }
    body.book-reading #bookReaderTotal { display: inline; font-variant-numeric: tabular-nums; }
    body.book-reading #bookReaderPageInput { width: 3.1rem; padding: .35rem .15rem; appearance: textfield; -moz-appearance: textfield; }
    body.book-reading #bookReaderPageInput::-webkit-inner-spin-button,
    body.book-reading #bookReaderPageInput::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    body.book-reading.reading-fullscreen #outputBody { padding-top: var(--reading-header-height, 58px); scroll-padding-top: calc(var(--reading-header-height, 58px) + 1rem); }
  }
  @media (max-width: 600px) {
    body.book-reading.reading-fullscreen #outHeader { padding-inline: max(.35rem, env(safe-area-inset-left, 0px)) max(.35rem, env(safe-area-inset-right, 0px)); gap: 2px; }
    body.book-reading #bookReaderBar { gap: 2px; }
    body.book-reading #bookReaderBar button,
    body.book-reading #outTools > button,
    body.book-reading #outTools #btnReadingSettings { width: 36px; min-width: 36px; height: 42px; min-height: 42px; }
    body.book-reading #bookReaderPageInput { width: 2.75rem; font-size: .75rem; }
    body.book-reading #bookReaderTitle { font-size: .75rem; }
  }
  @media (max-width: 360px) {
    body.book-reading #bookReaderTotal { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .reading-settings-panel, #btnReadingSettings svg { transition: none; }
  }
  @media(max-width:480px) {
    .vocab-levels .lvl-seal .ghead-badge { --badge-size:40px; width:40px; height:40px; }
    .lvl-path-title,.lvl-path-progress { font-size:.64rem; }
    .lvl-path-name { font-size:.76rem; }
    .vocab-levels .levels-row { gap:.3rem; }
    .vocab-levels .lvl-btn { gap:.25rem; padding:.25rem; }
    .grammar-strip { gap:.25rem; }
    .grammar-strip .gpv { padding:.4rem .15rem; }
    .grammar-strip .gpv-zh { font-size:1.1rem; }
  }

  /* ══ Livello di studio nelle Impostazioni (#setLevelCard) ══ */
  .set-level-card { margin-bottom: .75rem; }
  .set-level-note { margin: .15rem 0 0; font-size: .74rem; color: var(--fg-60); line-height: 1.35; }
  .set-level-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin-top: .65rem; }
  .set-level-chip {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: .18rem;
    padding: .55rem .65rem; border: 1px solid var(--rule-2); border-radius: var(--r-md, .65rem);
    background: var(--surface-raised, #fff); color: var(--fg); text-align: left;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, opacity .16s ease;
  }
  .set-level-chip:disabled { cursor: default; }
  .set-level-chip.is-locked-tier { opacity: .55; background: rgba(15, 23, 42, .03); }
  .set-level-chip.is-Locked-tier::after,
  .set-level-chip.is-locked-tier::after {
    content: "🔒"; position: absolute; top: .45rem; right: .5rem; font-size: .72rem; opacity: .75;
  }
  .set-level-chip.is-completed-tier {
    border-color: rgba(21, 128, 61, .35); background: rgba(21, 128, 61, .05); opacity: .88;
  }
  .set-level-chip.is-completed-tier::after {
    content: "✓"; position: absolute; top: .42rem; right: .52rem; font-size: .78rem; font-weight: 800; color: #15803d;
  }
  .set-level-chip.is-unlocked-next {
    cursor: pointer; border-color: #d97706; background: rgba(217, 119, 6, .08);
    box-shadow: 0 0 0 1px rgba(217, 119, 6, .22);
  }
  .set-level-chip.is-unlocked-next:hover { border-color: var(--accent, #b91c1c); }
  .set-level-chip.sel,
  .set-level-chip[aria-pressed="true"] {
    border-color: var(--accent, #b91c1c);
    background: rgba(185, 28, 28, .07);
    box-shadow: 0 0 0 1px rgba(185, 28, 28, .18);
    opacity: 1;
  }
  .set-level-chip-name { font-size: .82rem; font-weight: 700; color: var(--fg); line-height: 1.2; }
  .set-level-chip-sub { font-size: .68rem; color: var(--fg-60); line-height: 1.25; }
  .set-level-progress { margin-top: .65rem; padding-top: .55rem; border-top: 1px solid var(--rule, rgba(15, 23, 42, .08)); }
  .set-level-progress-top {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
    margin-bottom: .38rem; font-size: .76rem; color: var(--fg-70);
  }
  .set-level-threshold { font-size: .72rem; color: var(--fg-60); }
  .set-level-upgrade-btn {
    border: 0; border-radius: 999px; padding: .28rem .7rem;
    background: var(--accent, #b91c1c); color: #fff; font-size: .73rem; font-weight: 700;
    cursor: pointer; transition: filter .15s ease;
  }
  .set-level-upgrade-btn:hover { filter: brightness(1.08); }
  .set-level-progress-track,
  .subject-tier-track {
    position: relative; height: 7px; border-radius: 999px;
    background: rgba(15, 23, 42, .09); overflow: hidden;
  }
  .set-level-progress-fill,
  .subject-tier-fill {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #b91c1c, #d97706);
    transition: width .25s ease;
  }
  .set-level-progress-marker,
  .subject-tier-marker {
    position: absolute; top: 0; bottom: 0; width: 2px;
    background: rgba(15, 23, 42, .45); pointer-events: none;
  }
  @media (max-width: 520px) {
    .set-level-row { grid-template-columns: 1fr; }
  }

  /* ══ Barra progresso livello integrata nella barra materie (#subjectTierBar) ══ */
  .subject-tier-bar {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .25rem;
    margin: 0;
    padding: 0 .25rem 0 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .subject-tier-bar[hidden] {
    display: none !important;
  }
  .subject-tier-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0;
    min-width: 0;
  }
  .subject-tier-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    flex-wrap: wrap;
  }
  .subject-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ui-active) 12%, transparent);
    color: var(--ui-active);
    border: 1px solid color-mix(in srgb, var(--ui-active) 25%, transparent);
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .subject-tier-count {
    font-size: .78rem;
    color: var(--fg-70, #475569);
    white-space: nowrap;
  }
  .subject-tier-count b {
    font-weight: 700;
    color: var(--fg);
  }
  .subject-tier-goal { display: none !important; }
  .subject-tier-upgrade-btn {
    border: 0;
    border-radius: 999px;
    padding: .22rem .65rem;
    background: var(--ui-active);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(35, 83, 71, .22);
    transition: transform .12s ease, filter .15s ease;
    white-space: nowrap;
  }
  .subject-tier-upgrade-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
  }
  .subject-tier-track {
    position: relative;
    height: 6px;
    width: 100%;
    border-radius: 999px;
    background: rgba(15, 23, 42, .08);
    overflow: hidden;
  }
  .subject-tier-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ui-active), #10b981);
    transition: width .28s ease;
  }
  .subject-tier-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(15, 23, 42, .3);
    pointer-events: none;
  }
  #hrUpgradeBackdrop { z-index: 10050; }

  /* ══ Card Corso Pinyin in Materie (solo livello Principiante) ══ */
  .subject-course-section-pinyin .subject-course-section-title {
    color: var(--accent, #b91c1c);
    font-weight: 700;
  }
  .subject-course.subject-course-pinyin {
    border-color: rgba(185, 28, 28, .34);
    background: linear-gradient(135deg, rgba(185, 28, 28, .07), rgba(217, 119, 6, .06));
  }

  /* ══ Laboratorio Pinyin interattivo (#subjectPinyinStudio) ══ */
  .pinyin-studio {
    margin: 0 0 1.25rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--rule-2, rgba(15, 23, 42, .12));
    border-radius: var(--r-lg, .85rem);
    background: var(--surface-raised, #fffcf7);
    font-family: var(--font-ui, 'Inter', sans-serif);
    color: var(--fg, #1e293b);
  }
  .subject-exercises .pinyin-studio {
    margin: .6rem 0 0;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
  }
  .pinyin-studio-head {
    margin-bottom: 1rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--rule, rgba(15, 23, 42, .08));
  }
  .pinyin-studio-kicker {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
    margin-bottom: .35rem;
  }
  .pinyin-studio-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .2rem .55rem; border-radius: 999px;
    background: rgba(185, 28, 28, .1); color: var(--accent, #b91c1c);
    font-size: .74rem; font-weight: 700;
  }
  .pinyin-studio-zh { font-size: .92rem; color: var(--fg-60, #64748b); font-weight: 600; }
  .pinyin-studio-title { margin: 0 0 .3rem; font-size: 1.12rem; font-weight: 700; color: var(--fg, #0f172a); }
  .pinyin-studio-summary { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--fg-70, #334155); }
  .pinyin-sec-title {
    margin: .95rem 0 .55rem;
    font-size: .88rem; font-weight: 700; color: var(--fg, #0f172a);
    display: flex; align-items: center; gap: .35rem;
  }
  .pinyin-rules-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .75rem;
  }
  .pinyin-rule-card {
    padding: .85rem 1rem;
    border: 1px solid var(--rule, rgba(15, 23, 42, .1));
    border-radius: var(--r-md, .75rem);
    background: var(--paper, #fff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .03);
  }
  .pinyin-rule-card.has-tone-diagram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
  }
  .pinyin-rule-content {
    flex: 1 1 auto;
    min-width: 0;
  }
  .pinyin-rule-diagram {
    flex: 0 0 116px;
    width: 116px;
    height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .p-tone-item-svg {
    width: 100%;
    height: 100%;
    max-width: 116px;
    max-height: 116px;
    display: block;
  }
  @media (max-width: 360px) {
    .pinyin-rule-card.has-tone-diagram {
      flex-direction: column-reverse;
      align-items: stretch;
    }
    .pinyin-rule-diagram {
      margin: 0 auto .4rem;
    }
  }
  .pinyin-rule-badge {
    display: inline-block; margin-bottom: .3rem; padding: .14rem .48rem;
    border-radius: .38rem; background: rgba(15, 23, 42, .06);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .75rem; font-weight: 700; color: var(--accent, #b91c1c);
  }
  .pinyin-rule-title { margin: 0 0 .25rem; font-size: .85rem; font-weight: 700; color: var(--fg); }
  .pinyin-rule-body { margin: 0; font-size: .79rem; line-height: 1.45; color: var(--fg-70); }

  /* ══ Diagramma Grafico dei Toni Pinyin ══ */
  .pinyin-tones-svg {
    display: block; width: 100%; height: auto; max-height: 156px; margin: 0 auto;
  }
  .pinyin-tones-svg text { font-family: var(--font-ui, system-ui, sans-serif); }
  .pinyin-tones-svg .p-tone-bg {
    fill: var(--paper, #fff);
    stroke: var(--rule-2, rgba(15, 23, 42, .13));
    stroke-width: 1.2;
    transition: stroke .15s ease, fill .15s ease;
  }
  .pinyin-tones-svg .p-tone-guide {
    stroke: var(--fg-60, #94a3b8);
    stroke-opacity: .22;
    stroke-dasharray: 2 2;
    stroke-width: 1;
  }
  .pinyin-tones-svg .p-tone-gnum {
    font-size: 8.5px;
    font-weight: 600;
    fill: var(--fg-60, #94a3b8);
    opacity: .7;
  }
  .pinyin-tones-svg .p-tone-title {
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .02em;
  }
  .pinyin-tones-svg .p-tone-sub {
    font-size: 10px;
    font-weight: 600;
    fill: var(--fg-60, #64748b);
  }
  .pinyin-tones-svg .p-tone-sample {
    font-size: 13.5px;
    font-weight: 700;
    fill: var(--fg, #0f172a);
    font-family: var(--font-hanzi, system-ui);
  }
  .pinyin-tones-svg .p-tone-desc {
    font-size: 9.5px;
    font-weight: 500;
    fill: var(--fg-60, #64748b);
  }
  .pinyin-tones-svg .p-tone-path { fill: none !important; stroke-linecap: round; stroke-linejoin: round; }
  .pinyin-tones-svg .p-tone-dot { stroke: none !important; }
  .pinyin-tones-svg .p-tone-ring { fill: none !important; }
  .pinyin-tones-svg .p-tone-1 { stroke: #dc2626; fill: #dc2626; }
  .pinyin-tones-svg .p-tone-2 { stroke: #d97706; fill: #d97706; }
  .pinyin-tones-svg .p-tone-3 { stroke: #059669; fill: #059669; }
  .pinyin-tones-svg .p-tone-4 { stroke: #2563eb; fill: #2563eb; }
  .pinyin-tones-svg .p-tone-0 { stroke: #64748b; fill: #64748b; }

  html.dark .pinyin-tones-svg .p-tone-bg {
    fill: var(--surface-raised, #1e293b);
    stroke: rgba(255, 255, 255, .12);
  }
  html.dark .pinyin-tones-svg .p-tone-sample { fill: #f8fafc; }
  html.dark .pinyin-tones-svg .p-tone-sub,
  html.dark .pinyin-tones-svg .p-tone-desc { fill: #94a3b8; }
  html.dark .pinyin-tones-svg .p-tone-1 { stroke: #f87171; fill: #f87171; }
  html.dark .pinyin-tones-svg .p-tone-2 { stroke: #fbbf24; fill: #fbbf24; }
  html.dark .pinyin-tones-svg .p-tone-3 { stroke: #34d399; fill: #34d399; }
  html.dark .pinyin-tones-svg .p-tone-4 { stroke: #60a5fa; fill: #60a5fa; }
  html.dark .pinyin-tones-svg .p-tone-0 { stroke: #94a3b8; fill: #94a3b8; }

  /* ══ Ascolta e ripeti (Audio cards ottimizzate e compatte) ══ */
  .pinyin-audio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
  }
  @media (min-width: 620px) {
    .pinyin-audio-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .pinyin-audio-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: .15rem;
    padding: .48rem .65rem;
    min-height: 44px;
    border: 1px solid var(--rule-2, rgba(15, 23, 42, .12));
    border-radius: var(--r-md, .6rem);
    background: var(--paper, #fff);
    color: var(--fg);
    text-align: left;
    cursor: pointer;
    transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .pinyin-audio-card:hover {
    border-color: var(--accent, #b91c1c);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
  }
  .pinyin-audio-card.is-speaking {
    border-color: var(--accent, #b91c1c);
    background: rgba(185, 28, 28, .06);
  }
  .pinyin-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: .25rem;
  }
  .pinyin-card-tag {
    font-size: .66rem;
    font-weight: 600;
    color: var(--fg-60);
    background: rgba(15, 23, 42, .05);
    padding: .08rem .34rem;
    border-radius: .25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pinyin-card-ear {
    font-size: .8rem;
    color: var(--accent, #b91c1c);
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(185, 28, 28, .08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s ease;
  }
  .pinyin-audio-card:hover .pinyin-card-ear,
  .pinyin-audio-card.is-speaking .pinyin-card-ear {
    transform: scale(1.15);
  }
  .pinyin-card-main {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin: .08rem 0;
    flex-wrap: wrap;
  }
  .pinyin-card-py {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent, #b91c1c);
    line-height: 1.2;
  }
  .pinyin-card-zh {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--fg);
    line-height: 1.2;
    font-family: var(--font-hanzi);
  }
  .pinyin-card-gloss {
    font-size: .73rem;
    color: var(--fg-70);
    line-height: 1.3;
    margin-top: auto;
  }

  /* ══ Esercizi interattivi di verifica (2 righe × 2 colonne) ══ */
  .pinyin-quiz-sec {
    margin-top: 1.05rem; padding-top: .9rem;
    border-top: 1px solid var(--rule, rgba(15, 23, 42, .08));
  }
  .pinyin-quiz-head {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
    margin-bottom: .55rem;
  }
  .pinyin-quiz-head .pinyin-sec-title { margin: 0; }
  .pinyin-quiz-progress { font-size: .76rem; font-weight: 600; color: var(--fg-60); }
  .pinyin-quiz-prompt {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .4rem .75rem; margin-bottom: .55rem;
    border: 1px solid var(--rule, rgba(15, 23, 42, .1));
    border-radius: 999px; background: var(--paper, #fff);
  }
  .pinyin-quiz-zh { font-size: 1.15rem; font-weight: 700; color: var(--fg); }
  .pinyin-quiz-py { font-size: .82rem; font-weight: 600; color: var(--fg-60); }
  .pinyin-quiz-ear {
    border: 0; background: rgba(185, 28, 28, .08); color: var(--accent, #b91c1c);
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: .9rem;
  }
  .pinyin-quiz-question { margin: 0 0 .6rem; font-size: .88rem; font-weight: 600; line-height: 1.45; }
  .pinyin-quiz-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin-bottom: .65rem;
  }
  .pinyin-quiz-choice {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: .48rem .65rem;
    border: 1px solid var(--rule-2, rgba(15, 23, 42, .14));
    border-radius: var(--r-md, .55rem);
    background: var(--paper, #fff);
    color: var(--fg);
    font-size: .82rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color .14s ease, background-color .14s ease;
  }
  .pinyin-quiz-choice:hover:not(:disabled) { border-color: var(--accent, #b91c1c); }
  .pinyin-choice-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 4px;
    background: rgba(15, 23, 42, .06);
    color: var(--fg-60, #64748b);
    font-size: .74rem;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, monospace;
    transition: background-color .14s ease, color .14s ease;
  }
  .pinyin-choice-text {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
    word-break: break-word;
  }
  .pinyin-quiz-choice.is-correct {
    border-color: #15803d; background: rgba(21, 128, 61, .1); color: #14532d; font-weight: 700;
  }
  .pinyin-quiz-choice.is-correct .pinyin-choice-key {
    background: #15803d;
    color: #fff;
  }
  .pinyin-quiz-choice.is-wrong {
    border-color: #b91c1c; background: rgba(185, 28, 28, .1); color: #7f1d1d;
  }
  .pinyin-quiz-choice.is-wrong .pinyin-choice-key {
    background: #b91c1c;
    color: #fff;
  }
  .pinyin-quiz-feedback {
    margin: 0 0 .65rem; padding: .55rem .75rem; border-radius: var(--r-sm, .45rem);
    font-size: .8rem; line-height: 1.45;
  }
  .pinyin-quiz-feedback.is-ok { background: rgba(21, 128, 61, .08); color: #14532d; border: 1px solid rgba(21, 128, 61, .25); }
  .pinyin-quiz-feedback.is-err { background: rgba(185, 28, 28, .08); color: #7f1d1d; border: 1px solid rgba(185, 28, 28, .25); }
  .pinyin-quiz-done { padding: .6rem 0 .2rem; }
  .pinyin-quiz-score { margin: 0 0 .65rem; font-size: .92rem; font-weight: 700; }
  .pinyin-quiz-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

  html.dark .pinyin-choice-key {
    background: rgba(255, 255, 255, .1);
    color: var(--fg-60, #94a3b8);
  }
  html.dark .pinyin-quiz-choice.is-correct {
    background: rgba(21, 128, 61, .2);
    color: #86efac;
    border-color: #22c55e;
  }
  html.dark .pinyin-quiz-choice.is-wrong {
    background: rgba(185, 28, 28, .2);
    color: #fca5a5;
    border-color: #ef4444;
  }

  /* ══ Ottimizzazioni per iPhone (schermi compatti <= 480px) ══ */
  @media (max-width: 480px) {
    .subject-visual {
      padding: .55rem .45rem .45rem;
    }
    .pinyin-studio {
      padding: .85rem .65rem;
    }
    .pinyin-audio-grid {
      gap: .38rem;
    }
    .pinyin-audio-card {
      padding: .4rem .5rem;
      gap: .12rem;
    }
    .pinyin-card-py {
      font-size: 1.02rem;
    }
    .pinyin-card-zh {
      font-size: 1.12rem;
    }
    .pinyin-card-gloss {
      font-size: .7rem;
    }
    .pinyin-quiz-choices {
      gap: .38rem;
    }
    .pinyin-quiz-choice {
      padding: .42rem .5rem;
      font-size: .8rem;
    }
    .pinyin-choice-key {
      width: 20px;
      height: 20px;
      font-size: .7rem;
    }
  }


/* UI Update: Anteprime parole/caratteri grigie, nero se selezionata; via linea rossa */
.sprev-bar { display: none !important; }
.sprev-i {
  font-family: var(--font-hanzi);
  font-size: 1.16rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--fg-60, #8c827a) !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color .12s ease;
}
.sprev:hover:not(.sel) .sprev-i {
  color: var(--fg, #44403c) !important;
}
.sprev.sel .sprev-i {
  color: var(--ink, #1a1410) !important;
  font-weight: 700;
}

/* Bottone preferiti ♡ nella barra dei comandi */
.session-actions .sess-fav {
  color: var(--fg-60, #8c827a);
  border-color: var(--rule-2);
  background: var(--surface-raised);
  min-width: 44px;
  min-height: 44px;
  transition: color .12s ease, border-color .12s ease, background .12s ease, transform .12s ease;
}
.session-actions .sess-fav .sess-ico {
  filter: none !important;
  font-size: 1.25rem;
  line-height: 1;
}
@media (hover: hover) {
  .session-actions .sess-fav:hover:not(:disabled) {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.4);
    background: rgba(220, 38, 38, 0.08);
  }
}
.session-actions .sess-fav.active {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.5);
  background: rgba(220, 38, 38, 0.1);
}
.session-actions .sess-fav:disabled { opacity: .45; cursor: default; }

/* Stile verde morbido dentro al calendario */
.cal-day-go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-width: 44px;
  min-height: 44px;
  margin-left: auto;
  padding: .45rem .75rem;
  font: 700 .76rem 'Inter', sans-serif;
  cursor: pointer;
  border-radius: var(--r, 12px);
  white-space: nowrap;
  color: #15803d !important;
  border: 1px solid rgba(21,128,61,0.42) !important;
  background: rgba(21,128,61,0.07) !important;
  transition: color .12s ease, border-color .12s ease, background-color .12s ease, transform .12s ease;
}
@media (hover: hover) {
  .cal-day-go:hover {
    border-color: #15803d !important;
    color: #14532d !important;
    background: rgba(21,128,61,0.14) !important;
  }
}
.cal-day-go:active,
.cal-day-go.on,
.cal-day-go[aria-pressed="true"] {
  border-color: var(--ok, #15803d) !important;
  background: rgba(21,128,61,0.18) !important;
  color: #14532d !important;
}

/* Tag 字 e 词 nascosti */
.cal-bd, .hr-sr-tag { display: none !important; }