@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&family=Dela+Gothic+One&family=Nunito:wght@300;400;600;700&family=Outfit:wght@400;600;700&family=Quicksand:wght@300..700&display=swap);
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');

:root                  { --font-cjk: "Noto Sans JP", "Yu Gothic", "Hiragino Sans", "MS Gothic", "Meiryo", "SimSun-ExtB", "HanaMinA", "HanaMinB", sans-serif; }
[data-lang="cn"]       { --font-cjk: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "SimSun", "SimSun-ExtB", "HanaMinA", "HanaMinB", sans-serif; }
[data-lang="cn"]       { --font-pinyin: "Segoe UI", "Noto Sans", system-ui, Arial, sans-serif; }

/* Pinyin (cinese) con font latino: i font CJK disallineano il macron del 1° tono (ā).
   Coprire TUTTE le classi che mostrano una lettura pinyin (non i caratteri hanzi). */
[data-lang="cn"] .sense-reading,
[data-lang="cn"] .kana-text,
[data-lang="cn"] .kb-let-val,
[data-lang="cn"] .kb-esempio-read,
[data-lang="cn"] .prog-reading,
[data-lang="cn"] .word-reading,
[data-lang="cn"] .bulk-word-reading,
[data-lang="cn"] #field-kana,
[data-lang="cn"] #display-kana,
[data-lang="cn"] #display-reading { font-family: var(--font-pinyin); }

/* ==========================================================================
   ANIMAZIONI
   ========================================================================== */

@keyframes fadeIn {
    0%  { opacity: 0; transform: translateY(15px) }
    to  { opacity: 1; transform: translateY(0) }
}

/* ==========================================================================
   VARIABILI E TEMI
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────
   TEMA — un'unica fonte di verità
   • Per LINGUA cambiano SOLO --primary e --secondary
   • Per MODALITÀ (dark / light) i neutri sono fissi e identici per le due lingue
   • Tutto il resto è derivato da queste variabili
   ────────────────────────────────────────────────────────────────────── */

/* >>> Colori di brand: gli UNICI che cambiano tra le due lingue <<< */
.theme-jp {
    --primary:       #7C3AED;        /* viola elettrico */
    --primary-rgb:   124, 58, 237;
    --secondary:     #9F7AEA;        /* viola chiaro */
    --secondary-rgb: 159, 122, 234;
}

.theme-cn {
    --primary:       #E11D48;        /* rosso ciliegia */
    --primary-rgb:   225, 29, 72;
    --secondary:     #F43F5E;        /* corallo */
    --secondary-rgb: 244, 63, 94;
}

/* >>> Neutri FISSI — DARK MODE (default) <<< */
:root {
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --side-margin: 90px;

    --bg-page:      #0F1013;
    --bg-card:      #141519;
    --bg-nav:       rgba(15, 16, 19, 0.8);
    --navbar-bg:    #202023;         /* navbar classica: sempre scura */
    --border-color: rgba(255, 255, 255, 0.05);
    --border-nav:   rgba(255, 255, 255, 0.03);
    --text-main:    #FFFFFF;
    --text-muted:   rgba(255, 255, 255, 0.9);
    --card-shadow:  0 20px 40px rgba(0, 0, 0, 0.25);

    /* Accento testuale: in dark è il secondario (più chiaro, leggibile sul nero) */
    --accent-text:  var(--secondary);

    /* Tocchi di colore derivati dal brand (stessa struttura per le due lingue) */
    --bg-secondary:    rgba(255, 255, 255, 0.06);
    --tag-bg:          transparent;
    --btn-sub-hover:   rgba(var(--primary-rgb), 0.04);
    --glow-color-1:    rgba(var(--primary-rgb), 0.22);
    --glow-color-2:    rgba(var(--secondary-rgb), 0.08);
    --glow-color-sec:  rgba(var(--primary-rgb), 0.08);

    /* Ranghi SRS — li legge js/study.js (getRank) e finiscono sulle MEDAGLIE
       (badge in alto nella sessione, icona sulle card di grammatica e
       vocabolario, sigla del rango negli elenchi caratteri).
       Restano i metalli: qui la tinta è il messaggio, ed è la sola famiglia
       di colore fuori dal brand insieme a ok/ko/warn.
       NON entrano nei grafici: le barre per livello e la ciambella usano
       tonalità di --primary e --tipo-*, e devono restare così.
       Questi valori sono per il fondo SCURO. */
    --rank-nuovo:    #5B8DD9;
    --rank-bronzo:   #CD7F32;
    --rank-argento:  #C0C0C0;
    --rank-oro:      #FFD700;
    --rank-platino:  #E5E4E2;
    --rank-diamante: #B9F2FF;

    /* Colori di SIGNIFICATO: gli unici estranei al brand ammessi, perché
       giusto/sbagliato/attenzione non si possono dire con la tinta del brand.
       Prima erano quattro verdi e quattro rossi diversi sparsi nel file. */
    --ok:    #2ECC71;
    --ko:    #E74C3C;
    --warn:  #F1C40F;
}

/* >>> Neutri FISSI — LIGHT MODE <<< */
[data-theme="light"] {
    /* Nessuna superficie è bianco puro: la pagina è un grigio freddo attenuato,
       le card stanno un gradino sopra. Serve sia a non abbagliare sia a far
       vedere il bordo delle card (prima pagina e card differivano dell'1%). */
    --bg-page:      #ededef;
    --bg-card:      #f5f5f6;
    --bg-nav:       rgba(240, 240, 240, 0.85);
    --navbar-bg:    #29292D;         /* navbar classica: resta scura anche in light */
    --border-color: rgba(15, 23, 42, 0.10);
    --border-nav:   rgba(15, 23, 42, 0.08);
    --text-main:    #111827;
    --text-muted:   #2b2f34;
    --card-shadow:  0 8px 24px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.05);

    /* Accento testuale: in light è il primario (più scuro, leggibile sul bianco) */
    --accent-text:  var(--primary);

    --tag-bg:         rgba(var(--primary-rgb), 0.06);
    --glow-color-1:   rgba(var(--primary-rgb), 0.07);
    --glow-color-2:   rgba(233, 236, 241, 0);
    --glow-color-sec: rgba(var(--primary-rgb), 0.035);
    --bg-secondary:   rgba(15, 23, 42, 0.06);

    /* Ranghi SRS in chiaro: gli stessi metalli, scuriti. I valori del tema
       scuro qui darebbero da 1,2:1 (Diamante, Platino) a 1,7:1 di contrasto,
       cioè medaglie invisibili proprio ai ranghi alti. Questi stanno tutti
       sopra 4:1 sia sulle card sia sullo sfondo pagina, mantenendo la stessa
       distanza percettiva reciproca della serie chiara (dE minimo 13). */
    --rank-nuovo:    #35659E;
    --rank-bronzo:   #96591F;
    --rank-argento:  #6B7280;
    --rank-oro:      #8F6A0A;
    --rank-platino:  #46566B;
    --rank-diamante: #0E7C8A;

    /* Colori di significato, versione per fondo chiaro (i toni del tema scuro
       qui sarebbero troppo squillanti e poco contrastati). */
    --ok:    #1E9E56;
    --ko:    #C0392B;
    --warn:  #A9820A;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

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

/* Transizione dei colori SOLO durante il cambio tema (classe temporanea su <body>).
   Prima era su `*` e animava OGNI cambio di colore/sfondo/bordo a 0.5s,
   rallentando ogni interazione (es. avanzamento sessione). */
body.theme-switching,
body.theme-switching * {
    transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}

body, header {
    background-color: var(--bg-page)
}

body {
    font-family: "Montserrat", sans-serif;
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden
}

h2 { scroll-margin-top: 120px }
h3 { scroll-margin-top: 100px }

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition)
}

ul { list-style: none }

/* ==========================================================================
   HEADER & NAVBAR
   ========================================================================== */

header {
    padding: 20px var(--side-margin) 0;
    position: sticky;
    top: 0;
    z-index: 9999;
    height: 90px
}

.navbar {
    width: 100%;
    height: 70px;
    background-color: var(--navbar-bg);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    gap: 20px
}

/* Logo */
.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1
}

.logo-top {
    font-size: 1.8rem;
    font-family: "Dela Gothic One", cursive;
    color: #fff;
    font-weight: 400
}

.logo-bottom {
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 400;
    transition: color .3s ease
}

/* Link centrali (navbar con accesso) */
.nav-center {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: flex-end
}

.nav-center-link {
    color: white;
    font-size: 1.1rem;
    font-weight: 400;
    padding: 6px 14px;
    border-radius: 6px;
    transition: color .2s ease;
    text-decoration: none
}

.nav-center-link:hover { color: var(--primary) }

/* Sezione destra (navbar con accesso) */
.nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0
}

/* Selettore lingua */
.nav-lang-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--primary);
    color: #fff;
    padding: 4px 14px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 400;
    position: relative;
    user-select: none;
    transition: var(--transition)
}

.nav-lang-flag { font-size: 1rem }

/* nav-links: navbar pubblica (index/login/registrazione) */
.nav-links {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none
}

.nav-links li { margin: 0 }

.nav-links a {
    color: rgba(255,255,255,0.75);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition)
}

.nav-links a:hover { color: var(--primary) }

/* Pulsante tema nella navbar pubblica */
.theme-toggle {
    background: none;
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 1.2rem;
    color: #fff;
    display: flex;
    align-items: center;
    font-family: inherit;
    transition: var(--transition)
}

.theme-toggle:hover {
    border-color: var(--primary);
    color: var(--primary)
}

/* Auth buttons */
.btn-login-nav {
    border: 1px solid rgba(255,255,255,0.25);
    padding: 6px 14px;
    border-radius: 7px;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.82rem;
    transition: var(--transition);
    background: transparent;
    text-decoration: none
}

.btn-login-nav:hover {
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.08)
}

.btn-reg-nav {
    background-color: var(--primary);
    border: none;
    padding: 6px 14px;
    border-radius: 7px;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.82rem;
    transition: var(--transition);
    text-decoration: none
}

.btn-reg-nav:hover { opacity: 0.85 }

/* Mobile hamburger */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    cursor: pointer;
    z-index: 10001
}

.menu-toggle .bar {
    width: 100%;
    height: 2px;
    background-color: #fff;
    border-radius: 10px;
    transition: all .3s ease
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer {
    padding: 30px var(--side-margin);
    background-color: var(--bg-page);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative;
    overflow: hidden;
}
/* Bagliore primary largo che sale dal basso del footer */
footer::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -30px;
    transform: translateX(-50%);
    width: min(1460px, 92vw);
    height: 350px;
    background: radial-gradient(ellipse at 50% 100%, rgba(var(--primary-rgb), 0.24) 0%, rgba(var(--primary-rgb), 0.09) 45%, rgba(var(--primary-rgb), 0) 72%);
    pointer-events: none;
    z-index: 0;
}
/* Niente bagliore in tema chiaro */
[data-theme="light"] footer::before { display: none; }

/* --- FOOTER DEL SITO (multi-colonna) --- */
.site-footer {
    width: 100%;
    padding: 28px 0 8px;
    position: relative;
    z-index: 1;
}
.site-footer-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 64px;
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
}
.footer-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.footer-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 8px;
}
.footer-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s ease;
}
.footer-link:hover { color: var(--text-main); }
.footer-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-main);
}
.footer-link svg.ic-discord { width: 16.5px; height: 16.5px; }
.site-footer-bottom {
    text-align: center;
    margin-top: 40px;
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 500;
}

@media (max-width: 700px) {
    footer { padding: 44px 20px 28px; }
    /* Bagliore ancorato in basso: raggio orizz. < larghezza footer così sfuma
       prima dei bordi (niente taglio ai lati) e più alto verticalmente. */
    footer::before {
        background: radial-gradient(ellipse 75% 380px at 50% 100%, rgba(var(--primary-rgb), 0.24) 0%, rgba(var(--primary-rgb), 0.09) 46%, rgba(var(--primary-rgb), 0) 74%);
    }
    .site-footer { padding: 4px 0; }
    /* Due colonne "packed": le sezioni si impilano senza i vuoti della griglia */
    .site-footer-grid {
        display: block;
        column-count: 2;
        column-gap: 30px;
        width: 280px;
        max-width: 100%;
        margin: 0 auto;
        text-align: left;
    }
    .footer-col {
        min-width: 0;
        gap: 12px;
        margin-bottom: 26px;
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
    }
    .footer-title { font-size: 1.15rem; margin-bottom: 2px; }
    .footer-link { font-size: 0.95rem; }
    .site-footer-bottom { margin-top: 24px; font-size: 0.82rem; }
}

/* ==========================================================================
   HERO (INDEX)
   ========================================================================== */

.highlight-h1 {
    color: var(--primary);
    font-weight: 700
}

.btn-sub {
    padding: 8px 22px;
    border-radius: 6px;
    font-weight: 600;
    border: 1px solid var(--primary);
    background-color: transparent;
    color: var(--text-main);
    font-family: "Montserrat", sans-serif
}

.btn-sub:hover {
    opacity: 80%;
    cursor: pointer;
}

/* ==========================================================================
   REGISTRAZIONE & FORM
   ========================================================================== */

.reg-main {
    margin: 0 var(--side-margin);
    padding-top: 20px
}

.reg-wrapper {
    display: grid;
    grid-template-columns: 1.85fr 1fr;
    gap: 20px;
    align-items: start;
    box-sizing: border-box
}

.reg-column {
    background: var(--bg-card);
    padding: 20px 30px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    box-sizing: border-box
}

.reg-column input,
.reg-column select,
.reg-column label {
    color: var(--text-main) !important
}

.reg-column h2 {
    margin-bottom: 20px;
    color: var(--primary);
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 1px
}

.form-row {
    display: flex;
    gap: 20px
}

.form-row .form-group {
    flex: 1
}

.form-group {
    margin-bottom: 20px
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-main)
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-family: inherit;
    background-color: var(--bg-page);
    appearance: none;
    background-image: none
}

.reg-footer {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px
}

.terms-group {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    cursor: pointer
}

.terms-group input {
    width: 18px;
    height: 18px;
    cursor: pointer
}

.btn-register {
    padding: 8px 20px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: 400;
    cursor: pointer;
    font-size: 1rem;
    transition: var(--transition);
    margin-bottom: 30px;
    font-family: "Montserrat", sans-serif
}

.btn-register:hover {
    transform: translateY(-3px);
    opacity: 0.9
}

/* ==========================================================================
   HUB LINGUE
   ========================================================================== */

.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    width: 100%;
    max-width: 1200px
}

.language-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 40px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center
}

.language-card:hover { transform: translateY(-10px) }
.jp-card:hover { border-color: #c95745 }
.cn-card:hover { border-color: #2d8c56 }

.btn-enter {
    margin-top: 20px;
    padding: 8px 25px;
    background-color: var(--primary);
    color: #fff;
    border-radius: 5px;
    font-weight: 600
}

/* ==========================================================================
   GRAMMATICA — INDICE LEZIONI
   ========================================================================== */

/* ==========================================================================
   GRAMMATICA — PAGINA LEZIONE
   ========================================================================== */

.lesson-banner {
    margin: 20px 0 40px;
    height: 200px;
    background: var(--bg-card);
    border-radius: 10px;
    display: flex;
    padding: 25px;
    justify-content: center;
    align-items: center;
    color: var(--text-main)
}

/* Rimosse due regole legacy solo-cinese: servivano a coprire i vecchi banner
   con immagine di sfondo. Oggi il banner è trasparente come nel giapponese,
   e quello sfondo creava un riquadro visibile dietro al titolo. */

#lesson-title {
    font-size: 58px;
    font-weight: 600;
    text-align: center;
    line-height: 1.5
}

.lesson-main {
    margin: 0 var(--side-margin) 50px
}

.lesson-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px
}

.content-center h2, .content-center h3 {
    padding-bottom: 0;
    color: var(--primary);
    text-transform: uppercase;
    font-weight: 700
}

.content-center h2 {
    font-size: 1.8rem;
    margin: 50px 0 20px;
    border-bottom: 2px solid var(--primary)
}

.content-center h3 {
    font-size: 1.2rem;
    margin: 40px 0 10px
}

.content-center p {
    margin-bottom: 1rem;
    display: block;
    line-height: 1.8
}

.content-center ul li:only-child {
    list-style: none;
    background-color: var(--bg-card);
    padding: 15px 25px;
    margin-left: 0;
    margin-top: 25px;
    margin-bottom: 25px !important;
    border-radius: 5px;
    line-height: 1.9;
    border: 1px var(--primary) solid;
    color: var(--text-main);
    position: relative
}

.content-center ul li:only-child::before {
    content: "\f0eb";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 8px;
    color: var(--primary);
    font-style: normal
}

/* Nota "Attenzione": il primary (bordo + icona) diventa giallo */
.content-center ul li:only-child.nota-attenzione {
    border-color: var(--warn);
}
.content-center ul li:only-child.nota-attenzione::before {
    color: var(--warn);
}

.content-center ul li {
    list-style: none;
    position: relative
}

.content-center ul li:not(:only-child) {
    list-style: disc;
    margin-left: 25px;
    margin-bottom: 10px
}

.example-box ul li:not(:only-child) {
    list-style: none
}

.example {
    background-color: var(--bg-card);
    background-image: none;
    padding: 15px;
    border-radius: 5px;
    margin: 20px 0 0;
    text-align: center
}

.meaning {
    font-size: .9em;
    color: var(--text-main)
}

.example-box {
    background-color: var(--bg-card);
    border-left: 5px solid var(--primary);
    padding: 25px 20px 25px 0;
    margin: 20px 0;
    border-radius: 4px 10px 10px 4px
}

.content-center li {
    margin-left: 25px;
    margin-bottom: 10px !important
}

.example-box li {
    margin-bottom: 15px !important;
    position: relative
}

.example-box li:last-child {
    margin-bottom: 0 !important
}

/* ==========================================================================
   SIDEBAR LEZIONE
   ========================================================================== */

.sidebar {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px;
    position: sticky;
    top: 120px;
    height: calc(100vh - 150px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent
}

.sidebar::-webkit-scrollbar { width: 4px }
.sidebar::-webkit-scrollbar-track { background: 0 0 }
.sidebar::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 10px;
    transition: background-color .3s ease
}
.sidebar::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary)
}

.sidebar-box {
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
}

.sidebar-box:first-child {
    border-top: none;
    padding-top: 0;
}

.sidebar-box h3 {
    font-size: 1rem;
    color: var(--primary);
    border-bottom: 1px solid var(--primary);
    display: inline-block;
    text-transform: uppercase;
    margin-bottom: 10px
}

.toc-list a {
    display: block;
    padding: 4px 10px;
    color: var(--text-main);
    border-left: 2px solid transparent;
}

.toc-list a:hover {
    border-left-color: var(--primary);
    color: var(--primary)
}

.related-link {
    display: block;
    padding: 8px 12px;
    background-color: var(--bg-page);
    border-radius: 8px;
    border-left: 3px solid var(--primary);
    margin-bottom: 10px
}

.related-link:hover,
.floating-back-btn:hover {
    background-color: var(--primary);
    color: #fff
}

.floating-back-btn {
    position: fixed;
    bottom: 30px;
    left: 25px;
    width: 50px;
    height: 50px;
    background-color: var(--bg-page);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

/* ==========================================================================
   HUB VOCABOLARIO & DECK
   ========================================================================== */

.hub-wrapper {
    display: block;
    padding: 40px var(--side-margin);
    width: 100%;
    margin: 0 auto;
    position: relative
}

.hub-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%
}

.hub-title {
    font-size: 1.8rem;
    color: var(--text-main);
    font-weight: 700;
    border-bottom: var(--primary) 2px solid;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 3%
}

.deck-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%
}

.deck-card {
    min-width: 0;
    background: var(--bg-card);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: var(--transition)
}

.deck-card:hover { transform: translateY(-10px) }

.deck-header-visual {
    height: 140px;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center
}

.theme-cn .deck-header-visual {
    background: var(--bg-card)
}

.deck-header-visual h2 {
    color: var(--text-main);
    font-size: 2rem;
    font-weight: 800
}

.deck-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1
}

.deck-body h3 {
    font-size: 1rem;
    color: var(--primary);
    margin-bottom: 10px;
    font-weight: 700
}

.deck-body p,
.btn-add-deck {
    color: var(--text-main);
    font-size: .9rem
}

.deck-body p {
    opacity: .8;
    margin-bottom: 20px;
    flex-grow: 1
}

.deck-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .9rem;
    margin-bottom: 20px;
    font-weight: 600
}

.btn-add-deck {
    background: 0 0;
    border: 1px solid var(--primary);
    padding: 10px;
    border-radius: 5px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    transition: var(--transition);
    text-align: center
}

.btn-add-deck:hover { color: #fff }

.btn-add-deck--active {
    background: var(--primary);
    color: #fff
}

.btn-add-deck--active:hover {
    background: 0 0;
    color: var(--text-main)
}

/* ==========================================================================
   SRS — BARRA SUPERIORE E STRUTTURA PAGINA
   ========================================================================== */

/* ── SESSION LOADING OVERLAY ──────────────────────────────────────────────── */
.session-loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.35s ease;
}
.session-loading-overlay.session-loading-fade { opacity: 0; }
.session-loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: min(320px, 80vw);
}
.session-loading-logo {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.session-loading-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
    min-height: 1.2em;
}
.session-loading-bar-wrap {
    width: 100%;
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
}
.session-loading-bar {
    height: 100%;
    width: 0%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.session-loading-pct {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

body.srs-page {
    margin: 0 !important;
    padding: 0 !important;
    /* Sui telefoni 100vh è l'altezza CON la barra degli indirizzi nascosta,
       mentre le barre della sessione sono fissate al bordo visibile: il
       contenuto centrato finirebbe più in basso del centro reale. `dvh` segue
       l'area davvero visibile; la riga con `vh` resta per i browser vecchi. */
    height: 100vh;
    height: 100dvh;
    overflow: hidden
}

body.srs-page > footer,
body.srs-page > header:not(.srs-top-bar) {
    display: none !important
}

.srs-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: var(--bg-page);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-color);
    z-index: 10000;
    padding: 0 var(--side-margin)
}

.srs-top-bar > .top-bar-container {
    width: 100%;
    max-width: 1400px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.top-bar-left, .top-bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 120px
}

.top-bar-right { justify-content: flex-end }

.srs-rank-badge {
    display: none;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    white-space: nowrap;
}
.srs-rank-badge i { font-size: 0.8rem }

@keyframes rank-flash-correct {
    0%   { background: rgba(46, 204, 113, 0.45); }
    100% { background: transparent; }
}
@keyframes rank-flash-wrong {
    0%   { background: rgba(231, 76, 60, 0.45); }
    100% { background: transparent; }
}
.srs-rank-badge.rank-correct {
    animation: rank-flash-correct 1.5s ease-out forwards;
}
.srs-rank-badge.rank-wrong {
    animation: rank-flash-wrong 1.5s ease-out forwards;
}

.top-bar-center {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 40px
}

.progress-container {
    flex-grow: 1;
    height: 2px;
    background-color: var(--bg-card);
    border-radius: 10px;
    overflow: hidden
}

.progress-fill {
    height: 100%;
    width: 0%;
    background-color: var(--primary);
    transition: width .4s cubic-bezier(.175,.885,.32,1.275);
    box-shadow: 0 0 10px var(--primary)
}

.progress-text {
    font-family: "Montserrat", sans-serif;
    font-size: .9rem;
    color: var(--text-main);
    min-width: 60px;
    font-weight: 600
}

.btn-add-deck:hover {
    background: var(--primary)
}

/* ==========================================================================
   SRS — BOTTONI E ICONE
   ========================================================================== */

.icon-btn {
    background: 0 0;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    width: 40px;
    height: 40px;
    font-size: 1.1em;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease
}

.icon-btn:hover {
    background-color: var(--bg-card);
    border-color: var(--primary);
    color: var(--primary)
}

/* Top bar sessione: pulsanti icona identici a quelli della navbar generale */
.srs-top-bar .icon-btn,
.srs-top-bar .theme-toggle-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 1.1rem;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: all 0.25s ease;
}
.srs-top-bar .icon-btn:hover,
.srs-top-bar .theme-toggle-btn:hover {
    background: var(--bg-card);
    border-color: var(--primary);
    color: var(--primary);
}
.srs-top-bar .theme-toggle-btn svg,
.srs-top-bar .icon-btn svg { width: 18px; height: 18px; display: block; }
.srs-top-bar .nav-icon-warning { cursor: default; }

/* Badge livello: pillola in stile navbar */
.srs-top-bar .srs-rank-badge {
    border-radius: 30px;
    padding: 6px 15px;
    border: 1px solid var(--border-color);
    background: var(--bg-card) !important;
    font-size: 0.8rem;
}

/* Barra inferiore: pulsanti coerenti con la navbar */
.srs-toolbar-bottom .icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}
.srs-toolbar-bottom .btn-reveal {
    border-radius: 30px;
    opacity: 1;
    padding: 8px 26px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}
.srs-toolbar-bottom .btn-reveal svg { width: 18px; height: 18px; flex-shrink: 0; }
.srs-toolbar-bottom .btn-reveal:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg-card);
}

/* ── Font nuovi nella sessione (Nunito testo, Outfit titoli).
   Gli elementi CJK mantengono var(--font-cjk) perché lo impostano esplicitamente. ── */
body.srs-page {
    font-family: 'Nunito', sans-serif;
}
body.srs-page .progress-text,
body.srs-page .kanji-meaning-sub,
body.srs-page .front-m2-suggest,
body.srs-page .btn-reveal,
body.srs-page .srs-rank-badge,
body.srs-page .srs-settings-body,
body.srs-page .srs-mode-desc,
body.srs-page .srs-toggle-label {
    font-family: 'Nunito', sans-serif;
}
body.srs-page .srs-label-centered,
body.srs-page .srs-settings-title,
body.srs-page .card-header-banner,
body.srs-page .kb-sig-main {
    font-family: 'Outfit', sans-serif;
}

/* Niente immagine (banner-jp/cn.png) dietro la parola: resta solo il colore primary */
body.srs-page .col-20 .card-header-banner,
body.srs-page .srs-cell-banner,
body.srs-page.theme-cn .col-20 .card-header-banner,
body.srs-page.theme-cn .srs-cell-banner {
    background-image: none !important;
}

/* Letter-spacing su tutte le label della sessione */
body.srs-page .srs-label-centered,
body.srs-page .srs-settings-section-label,
body.srs-page .srs-toggle-label,
body.srs-page .session-loading-label,
body.srs-page .kb-let-label,
body.srs-page .kb-kanji-label {
    letter-spacing: 0.5px;
}

.icon-btn.feedback-correct,
.icon-btn.feedback-wrong {
    font-size: 1.2rem;
    font-weight: 500
}

.icon-btn.feedback-wrong:hover {
    border-color: var(--ko);
    color: var(--ko);
    background-color: rgba(231, 76, 60, .1)
}

.icon-btn.feedback-correct:hover {
    border-color: var(--ok);
    color: var(--ok);
    background-color: rgba(46,204,113,.1)
}

.srs-toolbar-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: var(--bg-page);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000
}

.toolbar-center {
    display: flex;
    gap: 15px
}

/* ==========================================================================
   SRS — FRONTE CARTA
   ========================================================================== */

body.srs-mode-front .srs-back-only  { display: none !important }
body:not(.srs-mode-front) .srs-front-only { display: none !important }

/* Transizione fronte↔retro più smooth: fade sul lato che diventa visibile.
   Solo opacità (niente transform): i lati contengono la toolbar position:fixed,
   e un transform sull'antenato la sposterebbe. */
@keyframes srsSideFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
body.srs-mode-front .srs-front-only,
body:not(.srs-mode-front) .srs-back-only {
    animation: srsSideFade 0.32s ease;
}
@media (prefers-reduced-motion: reduce) {
    body.srs-mode-front .srs-front-only,
    body:not(.srs-mode-front) .srs-back-only {
        animation: none;
    }
}

/* Pagina di passaggio tra fase "impara" e fase "esercizio":
   occupa solo la zona centrale, lasciando visibili top bar e barra inferiore. */
.srs-phase-msg {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 70px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    background: var(--bg-page);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.srs-phase-msg.show { opacity: 1; }
.srs-phase-msg.hide { opacity: 0; }
.srs-phase-msg h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 0 0 10px;
}
.srs-phase-msg p {
    font-family: 'Nunito', sans-serif;
    color: var(--text-muted);
    font-size: 1.02rem;
    margin: 0;
}

.srs-front-only {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 70vh;
    justify-content: center
}

.front-content-wrapper {
    text-align: center;
    width: 100%;
    max-width: 760px;
    padding: 0 20px;
    margin-top: -50px
}

#front-display-word { font-size: 4.5rem }

.front-audio-container {
    margin-top: 30px;
    display: flex;
    justify-content: center
}

.btn-reveal,
.front-audio-container .audio-btn {
    color: var(--text-main);
    border-radius: 5px;
    cursor: pointer;
    opacity: 70%
}

.front-audio-container .audio-btn {
    width: 50px;
    height: 50px;
    font-size: 1.1rem;
    border-radius: 50%;
    opacity: 1;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.front-audio-container .audio-btn:hover {
    background: var(--bg-card);
    border-color: var(--primary);
    color: var(--primary);
    transform: none;
}
.audio-btn svg { width: 20px; height: 20px; display: block; }
.front-audio-container .audio-btn svg { width: 22px; height: 22px; }

.btn-reveal {
    background-color: transparent;
    border: solid 1px var(--border-color);
    padding: 10px 24px;
    font-weight: 500;
    font-size: 1rem;
    transition: var(--transition)
}

.btn-reveal:hover {
    border: solid 1px var(--text-main);
    background-color: var(--bg-card)
}

/* ==========================================================================
   SRS — WRAPPER E GRIGLIA RETRO (LAYOUT STANDARD)
   ========================================================================== */

.srs-page .srs-wrapper {
    padding-top: 90px;
    height: 100vh;
    height: 100dvh;      /* vedi nota su body.srs-page */
    box-sizing: border-box;
    padding-bottom: 90px;
}

.srs-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    padding: 20px var(--side-margin);
    background-color: var(--bg-page)
}

.srs-card-container {
    width: 100%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: fadeIn .5s ease-out;
    height: 100%
}

.card-header-banner {
    height: 130px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    background-color: var(--bg-card);
    border: var(--border-color) 1px solid;
    padding: 10px
}

.col-20 .card-header-banner, .srs-cell-banner {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.theme-cn .col-20 .card-header-banner,
.theme-cn .srs-cell-banner {
    background: var(--bg-card) !important
}

.target-word {
    font-family: var(--font-cjk);
    font-size: 2.9rem;
    color: var(--text-main);
    font-weight: 400;
    margin: 0;
    line-height: 1;
    text-align: center
}

.col-20 .card-header-banner .target-word,
.srs-cell-banner .target-word { color: var(--text-main) }

/* Su desktop JP il banner word box non va a capo:
   il font-size viene scalato uniformemente da JS in base alla lunghezza della parola */
@media (min-width: 769px) {
    .theme-jp .srs-cell-banner .target-word,
    .theme-jp .card-header-banner .target-word { white-space: nowrap }
}

.reading-box {
    height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px !important
}

.kana-text {
    font-family: var(--font-cjk);
    font-size: 1.3rem;
    color: var(--text-main);
    margin: 12px 0;
    line-height: 1.2
}

.pitch-line {
    border-top: 1px solid currentColor;
    display: inline-block;
    padding-top: 0;
    margin-top: -2px
}

#display-kana {
    line-height: 1.2;
    display: inline-block
}

#display-kanji { color: var(--text-main) }

.display-example-it{
    font-weight: 800;
}

.audio-btn {
    background: 0 0;
    border: 0;
    color: var(--text-main);
    font-size: .9rem;
    transition: all .2s ease
}

.audio-btn:hover {
    color: var(--primary);
    transform: scale(1.1)
}

.detail-box {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 0
}

/* ── Ombre dei box della sessione: SOLO in modalità chiara ───────────────
   Sul fondo scuro i box si staccano già da soli (sono più chiari dello
   sfondo); su fondo chiaro sono più chiari di pochissimo, quindi senza
   ombra galleggiano. `data-theme` sta su <html>, non dentro <body>. */
html[data-theme="light"] body.srs-page .detail-box,
html[data-theme="light"] body.srs-page .card-header-banner,
html[data-theme="light"] body.srs-page .kanji-hero-box {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.05);
}

.srs-label-centered {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-main);
    display: block;
    text-align: center;
    flex-shrink: 0;
}

.srs-col1-wrapper {
    min-width: 0;
    min-height: 0;
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.srs-cell-meaning {
    overflow: hidden !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    grid-column: 3;
    grid-row: 1/3;
    height: 100%;
    padding: 20px !important;
    box-sizing: border-box;
}

.srs-cell-meaning .srs-label-centered { 
    margin-bottom: 10px;
    flex-shrink: 0;
}

/* Lo scroll avviene sul .meaning-container; margin-right negativo
   porta la scrollbar a filo del bordo destro del box */
.srs-cell-meaning .meaning-container {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    scrollbar-width: none;
}

.srs-cell-meaning .meaning-container::-webkit-scrollbar { display: none }
.srs-cell-banner,
.srs-cell-reading {
    flex: 0 0 18vh;
    min-height: 120px
}

.srs-grid-layout {
    display: grid;
    grid-template-columns: 20fr 40fr 40fr;
    grid-template-rows: auto 1fr;
    gap: 20px;
    width: 100%;
    height: calc(100vh - 180px);
    height: calc(100dvh - 180px)   /* vedi nota su body.srs-page */
}

.srs-cell-kanji {
    grid-column: 2;
    grid-row: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 20px
}

.srs-cell-kanji .srs-label-centered {
    margin-bottom: auto;
    padding-bottom: 20px
}

.srs-cell-esempio {
    min-height: 22vh;
    grid-column: 1/3;
    grid-row: 2;
    align-self: stretch;
    display: flex;
    flex-direction: column
}

.srs-cell-esempio .srs-label-centered { margin-bottom: 12px }

/* Box esempio: flex column, frecce ancorate all'intero box */
.srs-cell-esempio,
.col-40-mid-bottom.detail-box {
    position: relative;
    align-items: stretch !important;
    justify-content: flex-start !important
}

/* Frecce ancorate al box intero, centrate verticalmente su tutta l'altezza */
.srs-cell-esempio .example-nav-btn,
.col-40-mid-bottom .example-nav-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2
}

.srs-cell-esempio .example-nav-btn:first-child,
.col-40-mid-bottom .example-nav-btn:first-child { left: 20px !important }

.srs-cell-esempio .example-nav-btn:last-child,
.col-40-mid-bottom .example-nav-btn:last-child  { right: 20px !important }

/* example-nav: layout flex senza posizionamento proprio */
.srs-cell-esempio .example-nav,
.col-40-mid-bottom .example-nav {
    position: static;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%
}

/* Padding laterale per non sovrapporsi alle frecce */
.srs-cell-esempio .example-scroll-area,
.col-40-mid-bottom .example-scroll-area {
    padding: 0 48px;
    overflow-y: auto
}

/* ==========================================================================
   SRS — POS TAG
   ========================================================================== */

/* Fuori dalla sessione i tag della parte del discorso sono una pastiglia
   neutra in contorno: 14 colori pieni erano troppo rumore per pagine dove
   i tag compaiono in elenchi lunghi. DENTRO la sessione invece i colori
   restano (blocco più sotto), perché lì il tag è uno o due per carta e il
   colore aiuta a riconoscere al volo la parte del discorso. */
.pos-tag {
    display: inline-block;
    padding: 2px 7px 1px;
    border-radius: 5px;
    font-size: .7rem;
    font-weight: 400;
    text-transform: lowercase;
    font-style: oblique;
    color: var(--text-muted);
    letter-spacing: .5px;
    line-height: 1.5;
    background-color: transparent;
    border: 1px solid var(--border-color);
    margin: 8px 0 5px
}

/* ── Colori dei tag: SOLO dentro la sessione ─────────────────────────────
   `body.srs-page` è la classe della pagina session.html. Il contorno neutro
   va tolto, altrimenti resta un bordo chiaro attorno alla pastiglia piena. */
body.srs-page .pos-tag {
    color: #fff;
    font-weight: 200;
    border-color: transparent;
    background-color: var(--primary);
}

body.srs-page .pos-tag.tag-sostantivo  { background-color: #b03c3c }
body.srs-page .pos-tag.tag-sost        { background-color: #953131 }
body.srs-page .pos-tag.tag-pronome     { background-color: #cd6839 }
body.srs-page .pos-tag.tag-verbo       { background-color: #6d51a7 }
body.srs-page .pos-tag.tag-verbosuru   { background-color: #9864b6 }
body.srs-page .pos-tag.tag-aggettivo   { background-color: #528d54 }
body.srs-page .pos-tag.tag-avverbio    { background-color: #436a8f }
body.srs-page .pos-tag.tag-espressione { background-color: #ad9c3d }
body.srs-page .pos-tag.tag-solokana    { background-color: #707070 }
body.srs-page .pos-tag.tag-numeri      { background-color: #ac7157 }
body.srs-page .pos-tag.tag-prefsuf     { background-color: #987d52 }
body.srs-page .pos-tag.tag-onom        { background-color: #627dbb }
body.srs-page .pos-tag.tag-conj        { background-color: #395595 }
body.srs-page .pos-tag.tag-linguaggio  { background-color: #845d4f }
body.srs-page .pos-tag.tag-propri      { background-color: #7f3030 }

/* Il tag "categorie" resta in contorno anche nella sessione: non è una parte
   del discorso, quindi non deve competere con le pastiglie piene. */
.pos-tag.tag-categorie,
body.srs-page .pos-tag.tag-categorie {
    border: var(--text-main) 1px solid;
    background-color: transparent;
    opacity: 70%;
    color: var(--text-main);
    font-weight: 100
}

/* Tag di registro/uso (uk, colloquiale, onorifico...): pillola meta, contorno tratteggiato */
.registro-tag {
    display: inline-block;
    padding: 2px 7px 1px;
    border-radius: 5px;
    font-size: .72rem;
    font-weight: 300;
    font-style: oblique;
    letter-spacing: .3px;
    line-height: 1.5;
    margin: 8px 0 5px;
    border: 1px dashed var(--primary);
    color: var(--primary);
    background-color: transparent;
}

/* ==========================================================================
   SRS — KANJI BREAKDOWN
   ========================================================================== */

.kanji-item, .kanji-square { display: flex; align-items: center }
.kanji-item { flex-direction: column; gap: 8px }

.kanji-square {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    justify-content: center;
    font-family: var(--font-cjk);
    font-size: 3rem;
    color: var(--text-main);
    background-color: transparent;
    transition: var(--transition)
}

.kanji-square.status-completed { border: var(--primary) solid 2px; color: var(--text-main) }
.kanji-square.status-learning  { border-color: var(--text-main); border-style: solid }
.kanji-square.status-locked    { opacity: .35 }

.kanji-meaning-sub {
    color: var(--text-main);
    text-align: center;
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "Montserrat", sans-serif

}

.kanji-breakdown-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: auto
}

/* ==========================================================================
   SRS — SIGNIFICATI
   ========================================================================== */

.meaning-container {
    overflow-y: auto;
    height: 100%;
    width: 100%;
    scrollbar-width: none;
    scrollbar-color: var(--border-color) transparent;
    /* scrollbar allineata al bordo: nessun margine o padding destro */
    box-sizing: border-box;
}

.meaning-container::-webkit-scrollbar { display: none }
.meaning-container::-webkit-scrollbar-button { display: none }
.meaning-container::-webkit-scrollbar-track { background: 0 0 }
.meaning-container::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 10px
}

.sense-reading {
    color: var(--text-muted);
}

.sense-separator {
    border-top: 1px solid var(--text-main);
    opacity: 20%;
    margin-top: 4px;
    margin-bottom: 15px;
}

.static-pos-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 2px;
}

#label-reading.srs-label-centered { margin-bottom: 0 }

/* ==========================================================================
   SRS — NAVIGAZIONE ESEMPI
   ========================================================================== */

.example-nav {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.example-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-main);
    width: 28px;
    height: 28px;
    border-radius: 5px;
    font-size: 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
    opacity: 0.7;
    z-index: 1
}

.example-nav-btn:first-child { left: 0 }
.example-nav-btn:last-child  { right: 0 }

.example-nav-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    opacity: 1
}

/* Barra audio+contatore fissa in cima al box esempio */
.example-top-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 5px;
}

.example-scroll-area {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 0 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent
}

.example-scroll-area p:first-child {
    font-family: var(--font-cjk);
    font-size: 1.4rem;
    color: var(--text-main);
    line-height: 1.2;
    margin-top: 2px
}

.example-scroll-area p:last-child {
    font-size: 0.9rem;
    color: var(--text-main);
    opacity: .5;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: auto;
    width: 100%;
    margin-top: 2px;
    font-weight: 100;
    letter-spacing: 0.2px;
}

.example-jp-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.audio-btn-example {
    background: 0 0;
    border: 0;
    color: var(--text-main);
    font-size: .9rem;
    cursor: pointer;
    transition: all .2s ease;
    padding: 0;
    opacity: 0.7
}

.audio-btn-example:hover {
    color: var(--primary);
    transform: scale(1.1);
    opacity: 1
}

.btn-edit-example {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    background: 0 0;
    border: 0;
    color: var(--border-color);
    cursor: pointer;
    transition: all .2s ease;
    padding: 4px;
    line-height: 1;
}

.btn-edit-example:hover {
    color: var(--text-main);
    opacity: 1
}
.btn-edit-example svg { width: 16px; height: 16px; display: block; }

.example-counter {
    font-size: 0.65rem;
    opacity: 0.4;
    display: block
}

/* ==========================================================================
   SRS — LAYOUT VERSIONE B (CON IMMAGINE CUSTOM)
   ========================================================================== */

.srs-grid-custom {
    display: grid;
    grid-template-columns: 20fr 40fr 40fr;
    grid-template-rows: 58fr 42fr;
    gap: 20px;
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;   /* vedi il blocco "margine di ritaglio" più sotto */
    box-sizing: border-box
}

.col-20 {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%
}

.col-40-mid {
    grid-column: 2;
    grid-row: 1
}

.col-40-mid-bottom {
    grid-column: 1 / 3;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    
    align-self: stretch
}

.col-40-right-top {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    align-items: flex-start;
    justify-content: flex-start
}

.col-40-right-bottom {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 15px;
    
    overflow: hidden
}

.col-40-mid,
.col-40-right-top {
    height: 100%;
    min-height: 0
}

.col-40-mid .custom-image-box,
.col-40-right-top .meaning-box-full {
    flex: 1;
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--bg-card);
    overflow: hidden;
    box-sizing: border-box
}

.col-40-mid-bottom,
.col-40-right-bottom {
    height: calc(100% - 5px);
    min-height: 0
}

.col-40-mid-bottom.detail-box,
.col-40-right-bottom.detail-box {
    flex: 1;
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-sizing: border-box;
    background-color: var(--bg-card);
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    padding: 20px !important;
    min-height: 0
}

.col-40-mid-bottom.detail-box .srs-label-centered { margin-bottom: 10px }

.col-20 .card-header-banner,
.col-20 .reading-box {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--bg-card);
    min-height: 0
}

.col-40-right-top .meaning-box-full {
    align-items: flex-start;
    justify-content: flex-start;
    /* Il box ha overflow:hidden dal .detail-box — lo scroll avviene sul .meaning-container */
    overflow: hidden !important;
    padding: 20px !important;
    box-sizing: border-box;
}

.col-40-right-top .meaning-box-full .srs-label-centered {
    padding-right: 0;
    flex-shrink: 0;
}

/* Il .meaning-container fa lo scroll e usa margin-right negativo
   per portare la scrollbar a filo del bordo destro del box padre */
.col-40-right-top .meaning-box-full .meaning-container {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    scrollbar-width: none;
}

.col-40-right-top .meaning-box-full .meaning-container::-webkit-scrollbar { display: none }

.col-40-right-bottom .dynamic-box {
    flex: 1;
    min-height: 0
}

.custom-image-box {
    padding: 0;
    overflow: hidden;
    flex: 1
}

.custom-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

#srs-back-custom .kanji-breakdown-grid {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 15px
}

#srs-back-custom .kanji-square {
    width: 70px;
    height: 70px;
    font-size: 2.2rem
}

/* ==========================================================================
   RESPONSIVE — 1200px (deck grid)
   ========================================================================== */

@media (max-width: 1200px) {
    .deck-grid { grid-template-columns: repeat(2, 1fr) }
}

/* ==========================================================================
   RESPONSIVE — 1100px (hero e lezione)
   ========================================================================== */

@media (max-width: 1100px) {
    .lesson-grid { grid-template-columns: 1fr }

    .sidebar {
        position: static;
        height: auto
    }
}

/* ==========================================================================
   RESPONSIVE — 1024px (SRS)
   ========================================================================== */

@media (max-width: 1024px) {
    body.srs-page {
        overflow: auto !important;
        height: auto !important
    }

    .srs-grid-layout {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 20px;
        padding-bottom: 70px
    }

    .srs-col1-wrapper {
        display: flex;
        flex-direction: column;
        gap: 15px
    }

    .srs-cell-banner,
    .srs-cell-reading {
        min-height: 130px;
        height: 130px;
        flex: none
    }

    .srs-cell-esempio,
    .srs-cell-kanji,
    .srs-cell-meaning,
    .srs-col1-wrapper {
        grid-column: auto;
        grid-row: auto
    }

    .srs-wrapper { padding-top: 90px }

    .srs-cell-kanji {
        min-height: 150px;
        height: auto;
        padding: 20px 10px
    }

    .kanji-square {
        width: 60px;
        height: 60px;
        font-size: 1.8rem
    }

    .srs-cell-esempio {
        min-height: 180px;
        height: auto
    }

    .srs-cell-meaning {
        min-height: 200px;
        height: auto;
        overflow: auto;
        scrollbar-width: none;
    }
    .srs-cell-meaning::-webkit-scrollbar { display: none }

    .target-word {
        font-size: 3.2rem;
        text-align: center
    }

    /* Versione B su tablet/mobile */
    .srs-grid-custom {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 20px;
        padding-bottom: 70px
    }

    .col-20,
    .col-40-mid,
    .col-40-right-top,
    .col-40-mid-bottom,
    .col-40-right-bottom {
        flex: none;
        width: 100%;
        height: auto
    }

    .col-20          { order: 3 }
    .col-40-mid      { order: 1 }
    .col-40-mid-bottom  { order: 2 }
    .col-40-right-top   { order: 5 }
    .col-40-right-bottom { order: 4 }

    .col-40-mid .custom-image-box {
        min-height: 250px;
        height: 250px
    }

    .col-40-right-top .meaning-box-full {
        min-height: 150px;
        max-height: 350px;
        overflow-y: auto;
        scrollbar-width: none;
    }
    .col-40-right-top .meaning-box-full::-webkit-scrollbar { display: none }

    #srs-back-custom .kanji-square {
        width: 65px;
        height: 65px;
        font-size: 1.8rem
    }

    .col-40-mid-bottom.detail-box,
    .col-40-right-bottom.detail-box {
        padding: 20px !important;
        justify-content: flex-start !important;
        min-height: 120px
    }

    .col-20 .card-header-banner,
    .col-20 .reading-box {
        min-height: 130px !important;
        height: 130px !important
    }

    .col-20 { gap: 15px }

    .card-header-banner{
        height: 110px;
    }
}

/* ==========================================================================
   RESPONSIVE — 768px (mobile generale)
   ========================================================================== */

@media (max-width: 768px) {
    :root { --side-margin: 16px }

    /* ==========================================================
       NAVBAR — INDEX / LOGIN / REGISTRAZIONE (slide-in classica)
    ========================================================== */

    header {
        padding: 15px var(--side-margin);
        height: 85px
    }

    .content-center h2{
        margin-top: 30px;
    }

    .lesson-grid{
        gap: 20px;
    }

    .navbar {
        height: 70px
    }

    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 26px;
        height: 18px;
        cursor: pointer;
        
        flex-shrink: 0
    }

    .menu-toggle .bar {
        width: 100%;
        height: 2px;
        background-color: #fff;
        border-radius: 10px;
        transition: all .3s ease
    }

    .menu-toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg) }
    .menu-toggle.is-active .bar:nth-child(2) { opacity: 0 }
    .menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg) }

    /* ── OVERLAY MENU MOBILE ─────────────────────────────── */

    /* Navbar pubblica (index/login): overlay a tutta pagina */
    .nav-links {
        position: fixed;
        inset: 0;
        background: var(--navbar-bg);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 28px;
        z-index: 9998;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease
    }

    .nav-links.active {
        opacity: 1;
        pointer-events: all
    }

    .nav-links li { margin-left: 0 }
    .nav-links a { font-size: 1.4rem }
    .nav-links .btn-login-nav,
    .nav-links .btn-reg-nav { font-size: 1rem; padding: 10px 28px }

    /* Navbar con accesso: nav-center + nav-right
       formano un unico overlay centrato, tutto insieme */
    .nav-center, .nav-right { display: none !important }

    /* nav-center: overlay a tutta pagina (sopra la navbar) */
    .nav-center.active {
        display: flex !important;
        position: fixed;
        inset: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        z-index: 9998;
        background: var(--navbar-bg);
        padding: 80px 20px 120px
    }

    /* nav-right nella parte bassa dello stesso overlay */
    .nav-right.active {
        display: flex !important;
        position: fixed;
        bottom: 30px;
        left: 0;
        right: 0;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        z-index: 9999;
        padding: 0 20px
    }

    /* Logo e hamburger sopra l'overlay */
    .logo-link { z-index: 9999; position: relative }
    .menu-toggle { z-index: 9999; position: relative }

    body.nav-open { overflow: hidden }

    /* Voci e pulsanti più grandi e toccabili */
    .nav-center-link { font-size: 1.3rem !important; padding: 10px 20px }
    .nav-lang-selector { font-size: 0.9rem }

    /* Separatore visivo tra link e icone */
    .nav-right.active .nav-lang-selector {
        margin-top: 12px
    }
    /* ==========================================================
       SRS — TOP BAR
    ========================================================== */

    body.srs-page {
        overflow: auto !important;
        height: auto !important
    }

    /* Al fronte blocca lo scroll — la carta non deve scorrere */
    body.srs-page.srs-mode-front {
        overflow: hidden !important;
        height: 100vh !important;
        height: 100dvh !important   /* vedi nota su body.srs-page */
    }

    /* Wrapper: su mobile height auto per permettere scroll nel retro kanji */
    .srs-page .srs-wrapper {
        height: auto !important;
        
        }

    /* Nel retro: body e wrapper scrollano liberamente */
    body.srs-page:not(.srs-mode-front) {
        overflow-y: auto !important;
        height: auto !important
    }

    /* .srs-front-only occupa esattamente lo spazio tra top bar e toolbar */
    .srs-front-only {
        height: calc(100vh - 140px);
        height: calc(100dvh - 140px);   /* vedi nota su body.srs-page */
        
        overflow: hidden
    }

    .srs-top-bar {
        padding: 0 14px;
        height: 70px
    }

    .top-bar-left,
    .top-bar-right {
        min-width: 0;
        gap: 5px;
        flex-shrink: 0
    }

    .top-bar-center {
        flex: 1;
        min-width: 0;
        padding: 0 10px;
        gap: 10px
    }

    /* Niente barra di progressione nella top bar su mobile */
    .progress-container { display: none }

    .progress-text {
        font-size: 0.8rem;
        min-width: 46px;
        white-space: nowrap
    }

    /* Box vocabolo (fronte) a larghezza piena su mobile */
    .front-content-wrapper {
        max-width: none;
        padding: 0
    }

    /* ==========================================================
       SRS — WRAPPER E GRIGLIE
    ========================================================== */

    /* Le due barre fisse sono alte 70px uguali: con 85 sopra e 75 sotto tutta
       l'area utile risultava spostata di 10px verso il basso, e con essa ogni
       contenuto centrato — non solo la grammatica. Somma invariata (160). */
    .srs-page .srs-wrapper {
        padding-top: 85px;
        padding-bottom: 80px
    }

    .srs-wrapper { padding: 12px var(--side-margin) }

    /* Fronte */
    .srs-front-only { min-height: calc(100vh - 140px); min-height: calc(100dvh - 140px) }

    #front-display-word { font-size: 3.2rem }

    /* Griglia standard */
    .srs-grid-layout {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 15px;
        /* La barra dei pulsanti in basso è fissa (70px): senza questo spazio
           l'ultimo riquadro finiva nascosto dietro di essa. */
        padding-bottom: 85px
    }

    .srs-cell-banner {
        gap: 0;
        position: static !important
    }

    .srs-col1-wrapper {
        position: static !important
    }

    .srs-cell-banner,
    .srs-cell-reading {
        min-height: 140px;
        height: 140px;
        flex: none
    }

    .srs-cell-esempio {
        min-height: 160px;
        height: auto
    }

    .srs-cell-meaning {
        min-height: 160px;
        height: auto;
        overflow: auto;
        scrollbar-width: none;
    }
    .srs-cell-meaning::-webkit-scrollbar { display: none }

    .srs-cell-kanji {
        min-height: 160px;
        height: auto;
        padding: 14px 10px
    }

    .target-word { font-size: 2.8rem; text-align: center }

    .kanji-square { width: 62px; height: 62px; font-size: 2rem }

    /* Griglia con immagine */
    .srs-grid-custom {
        display: flex;
        flex-direction: column;
        flex: none !important;
        height: auto !important;
        overflow: visible !important;
        gap: 15px;
        padding-bottom: 85px
    }

    .col-20,
    .col-40-mid,
    .col-40-right-top,
    .col-40-mid-bottom,
    .col-40-right-bottom {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0
    }

    .col-20 .card-header-banner,
    .col-20 .reading-box {
        min-height: 140px !important;
        height: 140px !important
    }

    .col-40-mid .custom-image-box { height: 200px; min-height: 200px }

    .col-40-right-top .meaning-box-full {
        min-height: 160px;
        max-height: none;
        overflow-y: auto;
        scrollbar-width: none;
    }
    .col-40-right-top .meaning-box-full::-webkit-scrollbar { display: none }

    .col-40-mid-bottom.detail-box,
    .col-40-right-bottom.detail-box {
        padding: 15px !important;
        justify-content: flex-start !important;
        min-height: 160px;
        gap: 5px;
    }

    .srs-cell-esempio .example-nav-btn:first-child,
    .col-40-mid-bottom .example-nav-btn:first-child { left: 10px !important }

    .srs-cell-esempio .example-nav-btn:last-child,
    .col-40-mid-bottom .example-nav-btn:last-child  { right: 10px !important }

    #srs-back-custom .kanji-square { width: 62px; height: 62px; font-size: 2rem }

    .srs-toolbar-bottom { height: 70px }

    /* ==========================================================
       FORM / REGISTRAZIONE / LOGIN
    ========================================================== */

    .lesson-banner { height: auto; margin-bottom: 20px; }
    .lesson-main { margin: 0 var(--side-margin) 30px }

    .reg-wrapper { grid-template-columns: 1fr }
    .form-row { flex-direction: column; gap: 0 }
    .reg-column { padding: 16px }
    .reg-main { margin: 0 var(--side-margin) }

    .reg-footer { align-items: stretch; margin-bottom: 10px }

    .btn-register { width: 100%; padding: 14px }

    /* ==========================================================
       HUB / DECK
    ========================================================== */

    .deck-grid { grid-template-columns: 1fr }
    .hub-wrapper { padding: 20px var(--side-margin) }
    .hub-title { font-size: 1.4rem }
    .deck-header-visual { height: 100px }
    .deck-header-visual h2 { font-size: 1.5rem }
    .deck-body { padding: 14px }
}

/* ==========================================================================
   DECK EDITOR & CARD EDITOR — BASE
   ========================================================================== */

.editor-main {
    margin: 0 var(--side-margin) 60px
}

.card-editor-main {
    margin: 0 var(--side-margin) 0
}

/* Deck editor: topbar sticky — nessun padding-top sul main, la topbar parte subito */
.editor-main .editor-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    position: sticky;
    top: 90px;
    z-index: 100;
    background-color: var(--bg-page);
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px
}

.editor-main .editor-topbar h1 {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary);
    white-space: nowrap;
    flex-shrink: 0
}

.editor-main .editor-search-bar {
    flex: 1;
    min-width: 0
}

.editor-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0
}

/* Card editor: nessuna topbar superiore, parte da 20px sotto la navbar */
.card-editor-main {
    padding-top: 20px
}

/* ==========================================================================
   CARD EDITOR — GRIGLIA DUE COLONNE
   ========================================================================== */

.card-editor-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 40px;
    align-items: start
}

/* Nessun box — le colonne sono solo layout, niente sfondo o bordo */
.card-col {
    padding: 0
}

/* Colonna sinistra sticky — nessuna scrollbar, altezza libera */
.card-col-left {
    position: sticky;
    top: calc(90px + 20px);
    max-width: 400px;
}

.card-col-left::-webkit-scrollbar { display: none }

.deck-counter {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    opacity: 0.6;
    white-space: nowrap
}

.btn-bulk {
    background: 0 0;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 600;
    
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Montserrat", sans-serif
}

.btn-primary-editor {
    background-color: var(--primary);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: "Montserrat", sans-serif
}

.btn-primary-editor:hover { opacity: 0.85 }

.btn-primary-editor.btn-deck-active {
    background: 0 0;
    border: 1px solid var(--primary);
    color: var(--primary)
}

.btn-primary-editor.btn-deck-active:hover {
    background: var(--primary);
    color: #fff;
    opacity: 1
}

.btn-ripristina {
    background: 0 0;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: "Montserrat", sans-serif
}

.btn-ripristina:hover {
    border-color: var(--ko);
    color: var(--ko)
}

/* ==========================================================================
   DECK EDITOR — BARRA RICERCA (standalone dentro topbar)
   ========================================================================== */

.editor-search-bar {
    position: relative
}

.editor-search-bar .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.4;
    font-size: 0.9rem;
    pointer-events: none
}

.editor-search-bar input {
    width: 100%;
    padding: 9px 14px 9px 38px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: var(--bg-card);
    color: var(--text-main);
    font-family: "Montserrat", sans-serif;
    font-size: 0.9rem;
    transition: var(--transition)
}

.editor-search-bar input:focus {
    outline: none;
    border-color: var(--primary)
}

/* ==========================================================================
   DECK EDITOR — LISTA PAROLE
   ========================================================================== */

.word-list {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.word-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: var(--transition);
    gap: 12px
}

.word-row:hover { border-color: var(--primary) }

.word-row--custom { border-left: 3px solid var(--primary) }

.word-row-main {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 0
}

/* Larghezze fisse per allineamento colonne */
.word-kanji {
    font-family: var(--font-cjk);
    font-size: 1.8rem;
    color: var(--text-main);
    width: 180px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.word-reading {
    font-size: 0.82rem;
    color: var(--text-main);
    opacity: 0.6;
    width: 160px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.word-significato {
    
    color: var(--text-main);
    
    flex: 1;
    min-width: 0;
    
    }

.word-custom-badge {
    font-size: 0.7rem;
    color: var(--primary);
    flex-shrink: 0;
    margin-left: 8px
}

.word-row-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0
}

.btn-modifica {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    font-style: italic;
    white-space: nowrap
}

.btn-modifica:hover { opacity: 0.7 }

.btn-word-menu {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    color: var(--text-secondary);
    border-radius: 4px;
    transition: var(--transition);
    font-size: 0.85rem;
    line-height: 1
}
.btn-word-menu:hover {
    background: var(--border-color);
    color: var(--text-main)
}

#word-menu-popup {
    display: none;
    position: fixed;
    z-index: 9999;
    
    overflow: hidden
}
.word-menu-item {
    
    cursor: pointer;
    color: var(--text-main);
    transition: background 0.12s
}.word-menu-item--danger { color: #e05252 }

/* ==========================================================================
   CARD EDITOR — CAMPI
   ========================================================================== */

.card-field-group { margin-bottom: 22px }
.card-field-group:last-child { margin-bottom: 0 }

.field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-main);
    opacity: 0.6;
    margin-bottom: 8px
}

.field-hint {
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.7;
    margin-left: 8px
}

.field-readonly {
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--text-main);
    cursor: default;
    background-color: var(--bg-card);
    height: 39px;
    display: flex;
    align-items: center
}

.field-readonly.field-significato {
    font-size: 0.9rem;
    height: auto;
    min-height: 44px;
    max-height: 220px;
    overflow-y: auto;
    align-items: flex-start;
    display: block;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent
}

.field-readonly.field-significato::-webkit-scrollbar { width: 4px }
.field-readonly.field-significato::-webkit-scrollbar-track { background: 0 0 }
.field-readonly.field-significato::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 10px
}

#field-vocabolo {
    font-family: var(--font-cjk);
    font-size: 1rem;
}

#field-kana {
    font-family: var(--font-cjk);
    font-size: 1rem
}

/* Significato: stessa struttura di vocabulary-review */
.static-sense-item { 
    margin-bottom: 0px; 
    position: relative;
    display: flex;
    flex-direction: column;
}
.static-sense-item:last-child { margin-bottom: 0 }

.static-meaning-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 15px;
    width: 100%;
}

.static-meaning-text {
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--text-main);
    margin: 0;
    font-weight: 400;
    flex: 1;
    min-width: 0;
}

.sense-reading {
    font-size: 0.8rem;
    opacity: 0.7;
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 400;
    margin-bottom: 2px;
}

.field-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-card);
    color: var(--text-main);
    font-family: "Montserrat", sans-serif;
    font-size: 0.9rem;
    transition: var(--transition)
}

.field-input:focus {
    outline: none;
    border-color: var(--primary)
}

.field-dual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center
}

.btn-file-input {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-page);
    color: var(--text-main);
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.btn-file-input:hover {
    border-color: var(--primary);
    color: var(--primary)
}

.btn-file-input input[type="file"] { display: none }

/* ==========================================================================
   CARD EDITOR — BLOCCO ESEMPIO
   ========================================================================== */

.esempio-block {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color)
}

.esempio-block:last-of-type {
    border-bottom: none
}

.btn-remove-esempio {
    background: 0 0;
    border: none;
    color: var(--text-main);
    opacity: 0.4;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 2px 6px;
    transition: var(--transition)
}

.btn-remove-esempio:hover { opacity: 1; color: var(--ko) }

.btn-add-esempio {
    display: flex;
    align-items: center;
    gap: 8px;
    background: 0 0;
    border: 1px dashed var(--border-color);
    color: var(--text-main);
    opacity: 0.6;
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    justify-content: center;
    transition: var(--transition);
    margin-bottom: 22px;
    font-family: "Montserrat", sans-serif
}

.btn-add-esempio:hover {
    border-color: var(--primary);
    color: var(--primary);
    opacity: 1
}

.editor-action-row {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
}

/* ==========================================================================
   CARD EDITOR — ANTEPRIMA IMMAGINE
   ========================================================================== */

.immagine-preview {
    margin-top: 12px;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px
}

.immagine-preview img {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-color)
}

.btn-remove-preview {
    background: rgba(0,0,0,0.5);
    border: none;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    position: absolute;
    top: 4px;
    left: 100px
}

/* ==========================================================================
   CARD EDITOR — TOOLBAR FISSA IN BASSO
   ========================================================================== */

.card-editor-toolbar-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: var(--bg-page);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000
}

.card-toolbar-actions {
    display: flex;
    gap: 12px;
    align-items: center
}

/* Bottone indietro sopra la toolbar in card-editor */
.card-editor-main ~ .floating-back-btn {
    bottom: 90px;
    z-index: 10001
}

/* ==========================================================================
   RESPONSIVE EDITOR
   ========================================================================== */

@media (max-width: 900px) {
    .card-editor-grid { grid-template-columns: 1fr }

    .card-col-left {
        position: static;
        max-height: none;
        overflow-y: visible
    }

    .card-editor-main ~ .floating-back-btn { bottom: 90px }
}

@media (max-width: 768px) {
    .editor-main { margin: 0 var(--side-margin) 40px }
    .card-editor-main { margin: 0 var(--side-margin) 0 }

    /* Topbar deck editor: impila su più righe */
    .editor-main .editor-topbar {
        flex-wrap: wrap;
        gap: 8px;
        top: 70px           /* altezza header mobile */
    }

    .editor-main .editor-topbar h1 { font-size: 1.4rem }

    /* Barra ricerca va per ultima e occupa tutta la larghezza */
    .editor-main .editor-search-bar { order: 3; width: 100% }

    /* Azioni: contatore + bottoni su stessa riga, wrappabili */
    .editor-topbar-actions {
        flex-wrap: wrap;
        gap: 6px;
        width: 100%
    }

    .btn-bulk { font-size: 0.78rem; padding: 6px 10px }    .deck-counter { font-size: 0.8rem }

    /* Lista parole: riga più compatta */
    .word-row { padding: 10px 12px; gap: 15px }
    .word-kanji { width: 100px; font-size: 1.6rem }
    .word-reading { display: none }
    /* Card editor */
    .field-dual { grid-template-columns: 1fr }
}

/* ==========================================================================
   BULK IMPORT MODALE
   ========================================================================== */

.bulk-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center
}

.bulk-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(2px)
}

.bulk-modal-box {
    position: relative;
    background: var(--bg-page);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: min(860px, 92vw);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1
}

.bulk-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0
}

.bulk-modal-title {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary)
}

.bulk-modal-close {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition)
}

.bulk-modal-close:hover {
    border-color: var(--primary);
    color: var(--primary)
}

.bulk-step {
    padding: 28px;
    overflow-y: auto;
    flex: 1
}
/* Upload area */
.bulk-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    cursor: pointer;
    }
.bulk-upload-area input[type="file"] { display: none }
/* Progress */
.bulk-progress-bar {
    height: 4px;
    
    margin-top: 16px
}

.bulk-progress-fill {
    height: 100%;
    width: 0%;
    
    transition: width 0.3s ease;
    box-shadow: 0 0 8px var(--primary)
}

.bulk-error {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid var(--ko);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--ko)
}

/* Step 3: risultati */
.bulk-step3-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: -8px 0 28px 0; /* Bilancia il padding del genitore e imposta lo spazio sotto */
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.bulk-step3-header .bulk-step-desc { 
    margin-bottom: 0;
    flex: 1;
}

.bulk-esempio-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
    gap: 15px;
}

.bulk-esempio-media {
    
    flex-direction: column;
    
    justify-content: center;
    
    min-width: 60px;
}

.bulk-audio-icon {
    
    transition: all 0.2s;
}

.bulk-esempio-it[contenteditable="true"] {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px dashed transparent;
    transition: all 0.2s;
    cursor: text;
}

.bulk-esempio-it[contenteditable="true"]:hover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.05);
}

.bulk-esempio-it[contenteditable="true"]:focus {
    border-color: var(--primary);
    outline: none;
    border-style: solid;
}

.bulk-results-list {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.bulk-word-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden
}

.bulk-word-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-bottom: 1px solid var(--border-color)
}

.bulk-word-kanji {
    font-family: var(--font-cjk);
    font-size: 1.4rem
}

.bulk-word-reading {
    font-size: 0.8rem;
    opacity: 0.6
}

.bulk-word-significato {
    font-size: 0.8rem;
    opacity: 0.7;
    flex: 1
}

.bulk-word-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary)
}

.bulk-esempi-list {
    display: flex;
    flex-direction: column
}

.bulk-esempio-row:last-child { border-bottom: none }

.bulk-esempio-row:hover { background: var(--bg-page) }

.bulk-esempio-row.disabled {
    opacity: 0.4;
    pointer-events: none
}

.bulk-esempio-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--primary);
}

.bulk-esempio-content {
    flex: 1;
    min-width: 0
}

.bulk-esempio-jp {
    font-family: var(--font-cjk);
    font-size: 1rem;
    margin-bottom: 2px;
    
}

.bulk-esempio-it {
    font-size: 0.8rem;
    opacity: 0.6;
    margin-bottom: 6px
}

.bulk-esempio-suggerimento {
    display: flex;
    align-items: center;
    gap: 8px
}

.bulk-esempio-suggerimento label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.5;
    white-space: nowrap
}

.bulk-esempio-suggerimento input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-page);
    color: var(--text-main);
    font-family: "Montserrat", sans-serif;
    font-size: 0.8rem
}

.bulk-esempio-suggerimento input:focus {
    outline: none;
    border-color: var(--primary)
}

.bulk-esempio-media {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0
}

.bulk-esempio-thumb {
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border-color)
}

.bulk-audio-icon {
    
    background-color: transparent;
}

/* Step 4: done */
.bulk-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px;
    text-align: center
}

.bulk-done-icon {
    font-size: 3rem;
    color: var(--ok)
}

/* btn-bulk abilitato */
.btn-bulk {
    cursor: pointer !important;
    opacity: 1 !important
}

/* ==========================================================================
   BULK IMPORT — RESPONSIVE MOBILE
   ========================================================================== */

@media (max-width: 768px) {
    .bulk-modal-box {
        width: 100vw;
        max-height: 92vh;
        border-radius: 16px 16px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0
    }

    .bulk-modal {
        align-items: flex-end
    }

    .bulk-modal-header {
        padding: 16px 20px
    }

    .bulk-step {
        padding: 16px 20px
    }

    .bulk-upload-area {
        padding: 30px 16px
    }

    /* Step 3: header con bottone salva sopra */
    .bulk-step3-header {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
        margin: 0 0 20px 0;
        text-align: center;
    }

    .bulk-actions-top {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .bulk-step3-header .btn-primary-editor,
    .bulk-step3-header .btn-sub {
        width: 100%;
        padding: 12px;
        font-size: 0.9rem;
    }

    /* Righe esempio: layout compatto */
    .bulk-esempio-row {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 25px 20px;
    }

    .bulk-esempio-checkbox {
        align-self: flex-start;
        width: 22px;
        height: 22px;
        margin: 0 0 4px 0;
    }

    .bulk-esempio-content {
        width: 100%;
        min-width: 0;
    }

    .bulk-esempio-media {
        width: 100%;
        flex-direction: column;
        align-items: center; /* Allinea immagine e audio in mezzo */
        padding-left: 0;
        gap: 12px;
        margin-top: 4px;
        border-top: 1px solid rgba(var(--primary-rgb), 0.05);
        padding-top: 12px;
    }

    .bulk-esempio-jp { font-size: 1.2rem }
    .bulk-esempio-it { font-size: 0.8rem }

    /* Thumb immagine ingrandita */
    .bulk-esempio-thumb {
        width: 100%;
        height: auto;
        max-height: 200px;
        object-fit: cover;
        border-radius: 8px;
        display: flex;
        align-items: center;}

        .bulk-word-header{
            padding: 15px 20px;
        }

    .bulk-step3-header .bulk-step-desc {
        text-align: left;
    }
    /* Suggerimento su riga separata */
    .bulk-esempio-suggerimento {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px
    }

    .bulk-esempio-suggerimento input {
        width: 100%;
        margin-top: 2px;
    }

    .bulk-it-wrapper{
        margin-top: 6px;
    }

    /* Header parola */
    .bulk-word-kanji { font-size: 1.6rem }
    .bulk-word-significato { display: none }
}

.bulk-esempio-jp{
        margin-left: 0;
    }
/* 。invisibile nelle frasi esempio SRS */
/* Nasconde 。tramite font trick non possibile in CSS puro —
   gestiamo via JS nel renderEsempio */
/* ==========================================================================
   RESPONSIVE — 480px (telefoni piccoli)
   ========================================================================== */

@media (max-width: 480px) {
    .srs-top-bar { padding: 0 15px }

    .top-bar-center { padding: 0 10px; gap: 6px }

    .icon-btn {
        width: 40px;
        height: 40px;
        font-size: 1.2rem
    }

    #front-display-word { font-size: 3.2rem }

    .target-word { font-size: 3.2rem }

    .example-scroll-area p:first-child { font-size: 1.4rem; line-height: 1.4; }

    .example-scroll-area p:last-child{
        line-height: 1.4;
        margin-top: 5px;
    }

    .kana-text { font-size: 1.4rem }

    .col-40-mid .custom-image-box {
        height: 160px;
        min-height: 160px
    }

    .navbar { padding: 4px 20px }
}
/* ==========================================================================
   LETTURA PROGRESSIVA — caratteri sostituiti con kana/pinyin
   ========================================================================== */

.char-clickable {
    cursor: pointer;
    transition: opacity 0.15s;
}
.char-clickable:hover { opacity: 0.6 }

/* ==========================================================================
   SRS — POPUP OPZIONI
   ========================================================================== */

.srs-settings-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center
}

.srs-settings-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(3px)
}

.srs-settings-box {
    position: relative;
    background: var(--bg-page);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: min(700px, 92vw);
    z-index: 1;
    overflow: hidden
}

.srs-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-color)
}

.srs-settings-title {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-main)
}

.srs-settings-close {
    background: none;
    border: none;
    color: var(--text-main);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 2.4rem;
    font-weight: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition)
}

.srs-settings-close:hover {
    border-color: var(--primary);
    color: var(--primary)
}

.srs-settings-body { 
    padding: 24px;
    max-height: 70vh;
    overflow-y: auto;
}

.srs-settings-section-label {
    font-size: 1.2rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.5px;
    margin-bottom: 14px
}

.srs-mode-options { 
    display: flex; 
    flex-direction: column; 
    gap: 10px 
}
.srs-mode-option { cursor: pointer }
.srs-mode-option input[type="radio"] { display: none }

.srs-mode-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    gap: 0px 12px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: var(--transition);
    background: var(--bg-card)
}

.srs-mode-option input:checked + .srs-mode-card {
    border-color: var(--primary)
}

.srs-mode-icon {
    grid-row: 1 / 3;
    font-size: 1.4rem;
    font-family: var(--font-cjk);
    color: var(--primary);
    text-align: center
}

.srs-mode-name { font-size: 0.9rem; font-weight: 700; color: var(--text-main) }
.srs-mode-desc { font-size: 0.8rem; color: var(--text-main); opacity: 0.7; grid-column: 2 }

/* ==========================================================================
   SRS — FRONTE MODALITÀ 2 (COMPLETA LA FRASE)
   ========================================================================== */

/* Fronte 2: nascosto di default con classe, mostrato da JS */
.srs-front-only.srs-front-hidden { display: none !important }

.front-m2-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0px;
    width: 100%;
    max-width: 1200px;
    margin: 20px auto 0;
    padding: 0 20px
}

.front-m2-image {
    width: 100%;
    max-width: 520px;
    max-height: 310px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-bottom: 10px;
}

.front-m2-sentence {
    font-family: var(--font-cjk);
    font-size: 1.6rem;
    text-align: center;
    line-height: 1.6;
    color: var(--text-main);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0;
    margin-bottom: 10px;
}

.front-m2-suggest {
    color: var(--primary);
    font-family: "Montserrat", sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 5px;
}

.front-m2-translation {
    font-size: 1rem;
    color: var(--text-main);
    opacity: 0.6;
    font-weight: 300;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.front-m2-audio {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 360px
}

.front-m2-seekbar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer
}

.front-m2-play {
    background: none;
    border: none;
    color: var(--text-main);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    flex-shrink: 0;
    transition: var(--transition)
}

.front-m2-play:hover { border-color: var(--primary); color: var(--primary) }

.front-m2-input {
    font-family: var(--font-cjk);
    font-size: 1.6rem;
    color: var(--text-main);
    text-align: center;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--text-main);
    outline: none;
    min-width: 50px;
    max-width: 280px;
    width: 50px;
    padding: 0 4px;
    vertical-align: baseline;
    transition: border-color .2s ease, color .2s ease;
    display: inline-block;
    line-height: inherit
}

.front-m2-input:focus { border-bottom-color: var(--primary) }
.front-m2-input.correct { border-bottom-color: var(--ok); color: var(--ok) }
.front-m2-input.wrong   { border-bottom-color: var(--ko); color: var(--ko) }

.front-m2-hint {
    font-size: 0.82rem;
    min-height: 1.2em;
    text-align: center;
    font-family: 'Nunito', sans-serif
}

/* ==========================================================================
   SRS SETTINGS — TOGGLE + DIVIDER
   ========================================================================== */

.srs-settings-divider {
    height: 1px;
    background: var(--border-color);
    margin: 16px 0
}

.srs-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    margin-bottom: 8px;
}

.srs-toggle-label {
    font-size: 0.85rem;
    color: var(--text-main);
    line-height: 1.4;
    flex: 1
}

.srs-toggle {
    position: relative;
    width: 42px;
    height: 24px;
    flex-shrink: 0
}

.srs-toggle input { opacity: 0; width: 0; height: 0 }

.srs-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--border-color);
    border-radius: 24px;
    transition: background .2s ease;
    cursor: pointer
}

.srs-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s ease
}

.srs-toggle input:checked + .srs-toggle-slider { background: var(--primary) }
.srs-toggle input:checked + .srs-toggle-slider::before { transform: translateX(18px) }

/* ==========================================================================
   SRS — SEEKBAR FLUIDA
   ========================================================================== */

.front-m2-seekbar {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    accent-color: var(--primary);
    /* Transizione rimossa — aggiornamento via RAF già è fluido */
    transition: none
}

/* ==========================================================================
   SRS MODALITÀ 2 — RESPONSIVE MOBILE
   ========================================================================== */

@media (max-width: 768px) {
    .front-m2-wrapper { padding: 0 12px; margin: 0px auto;}

    .front-m2-image {
        max-height: 200px;
        border-radius: 8px
    }

    .front-m2-sentence { font-size: 1.25rem; line-height: 1.7 }

    .front-m2-input {
        font-size: 1.25rem;
        min-width: 60px
    }

    .front-m2-suggest { font-size: 0.78rem }

    .front-m2-translation { font-size: 0.8rem }

    .front-m2-audio {
        max-width: 100%;
        padding: 0 4px
    }

    .front-m2-hint { font-size: 0.78rem }

    /* Popup opzioni: full width su mobile */
    .srs-settings-box {
        width: 100vw;
        border-radius: 16px 16px 0 0;
        position: fixed;
        bottom: 0
    }

    .srs-settings-modal { align-items: flex-end }
}

/* ==========================================================================
   KANJI REVIEW — FRONTE
   ========================================================================== */

.kanji-front {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 75vh;
    gap: 0
}

/* Colonna verticale centrata: badge → kanji → input */
.kanji-front-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 760px;
    padding: 0 20px
}

/* Badge tipo in cima */
.kanji-front-badge {
    display: inline-block;
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    text-transform: uppercase
}

.kanji-badge-sig { background: var(--primary) }
.kanji-badge-rad { background: transparent; border: 1px solid var(--primary); color: var(--primary) }
.kanji-badge-let { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-main) }

/* Box kanji grande — occupa la parte centrale visiva */
.kanji-hero-box {
    width: 100%;
    max-width: 550px;
    height: 120px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center
}

.theme-cn .kanji-hero-box {
    background: var(--bg-card) !important
}

.kanji-hero-char {
    font-family: var(--font-cjk);
    font-size: 5rem;
    color: var(--text-main);
    line-height: 1
}

/* Input sotto il box, larghezza uguale */
.kanji-answer-row {
    width: 100%;
    max-width: 550px
}

.kanji-answer-input {
    width: 100%;
    padding: 10px 18px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text-main);
    font-family: var(--font-cjk);
    font-size: 1.1rem;
    text-align: center;
    outline: none;
    transition: border-color .2s ease, color .2s ease
}

.kanji-answer-input:focus   { border-color: var(--primary) }
.kanji-answer-input.correct { border-color: var(--ok); color: var(--ok) }
.kanji-answer-input.wrong   { border-color: var(--ko); color: var(--ko) }

.kanji-hint {
    font-size: 0.85rem;
    min-height: 1.2em;
    text-align: center;
    font-family: var(--font-cjk)
}

/* ==========================================================================
   KANJI REVIEW — RETRO
   ========================================================================== */

.kanji-back-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    /* Usa height: 100% — il srs-card-container già occupa tutta l'area tra le toolbar */
    height: 100%;
    overflow: hidden
}

/* Riga superiore 44% altezza
   Colonne: kanji quadrato (larghezza = altezza riga) | significato 40% resto | storia 60% resto */
.kb-top {
    display: grid;
    grid-template-columns: auto 1.8fr 3fr;
    gap: 20px;
    flex: 0 0 calc(44% - 10px);
    min-height: 0;
    overflow: hidden
}

/* Riga inferiore 56% altezza
   Colonne: componenti 40% | letture 30% | esempi 30% */
.kb-bottom {
    display: grid;
    grid-template-columns: 4fr 3fr 3fr;
    gap: 20px;
    flex: 0 0 calc(56% - 10px);
    min-height: 0;
    overflow: hidden
}

/* ── MARGINE DI RITAGLIO PER LE OMBRE ────────────────────────────────────
   Tutti i layout della sessione mettono i box a filo dei bordi del loro
   contenitore, che ritaglia con `overflow: hidden`. L'ombra dei box (attiva
   in modalità chiara) sporge 18px sotto e 14px ai lati, quindi veniva
   tranciata su ogni lato esterno.
   `overflow: clip` + `overflow-clip-margin` allargano la sola zona di
   PITTURA: il contenuto continua a essere contenuto esattamente come prima,
   ma l'ombra ha lo spazio per uscire. 20px = i 18 che servono più un margine.
   I browser che non conoscono `clip` scartano queste dichiarazioni e
   mantengono l'`overflow: hidden` scritto nelle regole qui sopra. */
.srs-grid-custom,
.kanji-back-layout,
.kb-top,
.kb-bottom {
    overflow: clip;
    overflow-clip-margin: 20px;
}

/* Base comune: label centrata in alto (25px), contenuto flex column */
.kb-sig,
.kb-storia,
.kb-comp,
.kb-let,
.kb-esempi {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 25px 20px !important;
    gap: 0 !important
}

/* Label centrata per tutte le celle */
.kb-sig .srs-label-centered,
.kb-storia .srs-label-centered,
.kb-comp .srs-label-centered,
.kb-let .srs-label-centered,
.kb-esempi .srs-label-centered {
    text-align: center;
    width: 100%;
    flex-shrink: 0;
    margin-bottom: 12px
}

/* --- Kanji hero: quadrato perfetto ---
   La colonna è "auto" — il box impone la propria larghezza tramite aspect-ratio.
   L'altezza è 100% della riga; aspect-ratio 1/1 fa sì che la larghezza = altezza. */
.kb-hero {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 100%;
    aspect-ratio: 1 / 1;
    width: auto;
    flex-shrink: 0
}

.theme-cn .kb-hero {
    background: var(--bg-card) !important
}

.kb-char {
    font-family: var(--font-cjk);
    font-size: 4.5rem;
    color: var(--text-main);
    font-weight: 400;
    line-height: 1
}

/* --- Significato: testo centrato orizzontalmente e verticalmente --- */
.kb-sig-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%
}

.kb-sig-main {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
    text-align: center;
    letter-spacing: 0.5px;
}

.kb-sig-sub {
    font-size: 0.9rem;
    opacity: 0.55;
    line-height: 1.4;
    text-align: center;
    font-weight: 300;
}

.srs-blur {
    filter: blur(8px);
    user-select: none;
    pointer-events: none;
    transition: filter 0.3s ease;
}

/* --- Storia: testo centrato verticalmente, allineato a sinistra --- */
.kb-storia-inner {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    scrollbar-width: none;
    width: 100%
}

.kb-storia-inner::-webkit-scrollbar { display: none }

.kb-storia-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-main);
    text-align: center
}

.kb-storia-mark {
    background: var(--primary);
    color: #fff;
    border-radius: 5px;
    padding: 0 4px;
    font-style: normal
}

/* **testo** — sfondo rosso + grassetto */
.kb-storia-bold {
    font-weight: 700
}

/* *testo* — grassetto + sottolineato rosso, nessun corsivo */
.kb-storia-underline {
    font-weight: 700;
    font-style: normal;
    text-decoration: underline;
    text-decoration-color: var(--primary);
    text-underline-offset: 3px
}

/* --- Componenti: box kanji propri, simili a vocabolario ma più piccoli --- */
.kb-comp-grid {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    align-items: center;
    width: 100%
}

.kb-comp-grid--compact {
    gap: 10px;
    flex-wrap: nowrap
}

.kb-comp-grid--compact .kb-kanji-square {
    width: 80px;
    height: 80px;
    font-size: 2.4rem
}

.kb-comp-grid--compact .kb-kanji-label {
    font-size: 0.78rem;
    max-width: 66px
}

/* Box kanji specifici per kanji-review (diversi da vocab) */
.kb-kanji-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px
}

.kb-kanji-square {
    width: 90px;
    height: 90px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-cjk);
    font-size: 2.8rem;
    color: var(--text-main);
    background: transparent;
    transition: var(--transition)
}

.kb-kanji-square.kb-status-main    { border: 2px solid var(--primary) }
.kb-kanji-square.kb-status-support { border-color: var(--text-main)}
.kb-kanji-square.kb-status-minor   { opacity: 0.4 }

.kb-kanji-label {
    font-size: 0.9rem;
    color: var(--text-main);
    text-align: center;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

/* --- Letture: centrate verticalmente --- */
.kb-let-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 100%
}

.kb-let-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%
}

.kb-let-label {
    font-size: 0.9rem;
    font-weight: 300;
    opacity: 0.8
}

.kb-let-val {
    font-family: var(--font-cjk);
    font-size: 2rem;
    color: var(--text-main)
}

.kb-let-val.on, .kb-let-val.kun  { font-size: 1.6rem; text-align: center; }

.kb-let-val-wrap {
    position: relative;
    width: 100%;
    cursor: default
}

.kb-let-val-wrap .kb-let-val {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

/* --- Esempi: 3 righe visibili, scroll invisibile dal 4° ---
   Altezza riga ~46px × 3 = 138px circa come altezza visibile */
.kb-esempi-list {
    width: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    flex: 1;
    min-height: 0
}

.kb-esempi-list::-webkit-scrollbar { display: none }

.kb-esempio-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-color);
    gap: 8px;
    flex-shrink: 0
}

.kb-esempio-row:last-child { border-bottom: none }

.kb-esempio-word {
    font-family: var(--font-cjk);
    font-size: 1.4rem;
    color: var(--text-main);
    display: flex;
    align-items: baseline;
    flex-shrink: 0
}

.kb-esempio-read {
    font-size: 0.9rem;
    opacity: 0.7;
    margin-left: 5px;
}

.kb-esempio-sig-wrap {
    position: relative;
    max-width: 55%;
    cursor: default
}

.kb-esempio-sig {
    font-size: 0.9rem;
    text-align: right;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.esempi-tooltip {
    position: fixed;
    z-index: 10010;
    pointer-events: none;
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 5px 9px;
    font-size: 0.82rem;
    white-space: normal;
    max-width: 220px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.15s;
    display: none
}

.kb-esempio-kanji-hl {
    color: var(--primary);
    font-weight: 500
}

/* Nella pagina kanji, il srs-card-container non ha gap visibile
   perché il retro occupa tutto (il fronte è display:none) */
#kanji-back { height: 100% }

/* ==========================================================================
   KANJI REVIEW — RESPONSIVE MOBILE
   ========================================================================== */

/* ── TABLET (≤1024px) ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* Retro: scroll verticale invece di layout fisso */
    .kanji-back-layout {
        height: auto;
        overflow: visible;
        padding-bottom: 16px
    }

    /* Solo i retro DENTRO la sessione (non il popup, che usa le stesse classi):
       la barra dei pulsanti in basso è fissa e alta 70px, senza questo spazio
       l'ultimo riquadro finisce nascosto dietro di essa. Come per i vocaboli. */
    #kanji-back,
    #rad-back {
        padding-bottom: 85px
    }

    /* Top: kanji + significato affiancati, storia sotto a tutta larghezza */
    .kb-top {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 16px;
        flex: none
    }

    .kb-comp-grid{
        margin-top: 10px;
    }

    .kb-hero {
        grid-column: 1;
        grid-row: 1;
        height: 160px;
        aspect-ratio: 1 / 1;
        width: auto
    }

    .kb-sig   { grid-column: 2; grid-row: 1 }
    .kb-storia {
        grid-column: 1 / 3;
        grid-row: 2
    }

    .kb-sig {
        height: 160px;
    }

    /* Bottom: componenti + letture affiancate, esempi sotto */
    .kb-bottom {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 16px;
        flex: none
    }

    .kb-comp   { grid-column: 1; grid-row: 1}
    .kb-let    { grid-column: 2; grid-row: 1 }
    .kb-esempi { grid-column: 1 / 3; grid-row: 2 }

    /* Esempi: mostra tutti senza scroll fisso su tablet */
    .kb-esempi-list { overflow-y: visible; flex: none }
}

/* ── MOBILE (≤768px) ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* ── FRONTE mobile: tutto centrato, niente scroll ── */
    .kanji-front {
        justify-content: center;
        overflow: hidden;
        height: calc(100vh - 140px)
    }

    .kanji-front-inner {
        gap: 16px;
        max-width: 100%;
        padding: 0 16px;
        /* Contenuto scalato per stare nel viewport */
        justify-content: center
    }

    .kanji-hero-box {
        width: 100%;
        max-width: 340px;
        height: 120px
    }

    .kanji-hero-char { font-size: 3.8rem }

    .kanji-answer-row { max-width: 100% }

    /* ── RETRO mobile: colonna singola con scroll ── */
    .kanji-back-layout {
        height: auto;
        overflow: visible;
        padding-bottom: 15px;
        gap: 15px
    }

    /* Spazio per la toolbar fissa in basso (70px), solo nella sessione */
    #kanji-back,
    #rad-back {
        padding-bottom: 90px
    }

    .kb-top {
        display: flex;
        flex-direction: column;
        gap: 15px;
        flex: none
    }

    .kb-bottom {
        display: flex;
        flex-direction: column;
        gap: 15px;
        flex: none
    }

    .kb-hero {
        width: 100%;
        height: 140px;
        aspect-ratio: unset
    }

    .kb-char { font-size: 3.5rem }
    .kb-sig-main { font-size: 1.4rem }
    .kb-sig-sub  { font-size: 0.9rem }
    .kb-storia { min-height: 160px }
    .kb-storia-inner { overflow: visible }
    .kb-comp { min-height: 160px }
    .kb-kanji-square { width: 90px; height: 90px; font-size: 1.9rem }
    .kb-let { min-height: 160px }
    .kb-let-val.kun { font-size: 1.8rem }
    .kb-esempi { min-height: 160px }
    .kb-esempi-list { overflow-y: visible; flex: none }
    .kb-esempio-word {font-size: 1.6rem;}
}

/* ── TELEFONI PICCOLI (≤480px) ────────────────────────────────────────────── */
@media (max-width: 480px) {
    .kanji-hero-box { height: 110px }
    .kanji-hero-char { font-size: 3.2rem }
    .kb-char { font-size: 4rem }
    .kb-sig-main { font-size: 2.4rem }
    .kb-kanji-square { width: 80px; height: 80px; font-size: 2.4rem }
}
/* ==========================================================================
   NAVBAR — DROPDOWN CARATTERI (Kanji / Radicali)
   ========================================================================== */

/* ── DESKTOP: dropdown Caratteri integrato nella navbar ── */

.nav-chars-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 4px;
    /* stessa altezza della navbar per coprire il gap */
    height: 70px;
    padding: 0 4px;
}

.nav-chars-dropdown {
    display: none;
    position: absolute;
    top: calc(100% - 10px);
    background: var(--navbar-bg);
    border: 1px solid #2d2f31;
    border-radius: 8px;
    overflow: hidden;
    min-width: 140px;
    z-index: 9999;
}

/* Il wrapper deve essere position:relative per ancorare il dropdown */
.navbar {
    position: relative
}

/* ── MOBILE: dropdown col tap ── */
@media (max-width: 768px) {

    .nav-chars-btn {
        font-size: 1.3rem !important;
        padding: 10px 20px;
        color: white;
        height: auto
    }

    .nav-chars-dropdown {
        position: static;
        top: auto;
        border: none;
        border-radius: 0;
        box-shadow: none;
        min-width: auto;
        display: none
    }

    .nav-chars-dropdown.open {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 4px 0
    }
}

/* ==========================================================================
   RADICALI REVIEW — RETRO (box kanji a tutta larghezza)
   ========================================================================== */

/* Riga inferiore radicali: un unico box a tutta larghezza */
.rad-bottom {
    grid-template-columns: 1fr !important
}

.rad-bottom .kb-comp-grid {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow: hidden;
    padding: 0 20px
}

.rb-kanji {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 25px 20px !important;
    overflow-y: auto;
    scrollbar-width: none
}

.rb-kanji::-webkit-scrollbar { display: none }

.rb-kanji .srs-label-centered {
    width: 100%;
    text-align: center;
    flex-shrink: 0;
    margin-bottom: 16px
}

.col-40-right-top .srs-label-centered{
    margin-bottom: 10px;
}

.rb-kanji-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow-x: hidden;
    margin-top: 10px;
}

/* Box kanji radicali: più grandi, classe propria */
.rb-kanji-square {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-cjk);
    font-size: 3rem;
    color: var(--text-main);
    background: transparent;
    flex-shrink: 0;
    transition: var(--transition)
}

.rb-kanji-square.rb-status-main    { border: 2px solid var(--primary) }
.rb-kanji-square.rb-status-support { border-color: var(--border-color) }

.rb-kanji-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font-weight: 100;
}

.rb-kanji-label {
    font-size: 1.05rem;
    color: var(--text-main);
    text-align: center;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

/* Mobile: 8 elementi in colonna singola */
@media (max-width: 768px) {
    .rb-kanji-grid {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px
    }

    .rb-kanji-item {
        width: calc(50% - 8px);
        flex-direction: row;
        gap: 5px;
        align-items: center;
        justify-content: flex-start
    }

    .rb-kanji-square {
        width: 60px;
        height: 60px;
        font-size: 2rem;
        flex-shrink: 0
    }

    .rb-kanji-label {
        font-size: 0.8rem;
        white-space: normal;
        max-width: none;
        text-align: left
    }
}

/* Mobile */
@media (max-width: 1024px) {
    .rad-bottom { grid-template-columns: 1fr !important }
}

/* ==========================================================================
   ALL CHARACTERS PAGE (GRIGLIA COMPLETA)
   ========================================================================== */

.chars-wrapper {
    padding: 0px var(--side-margin);
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chars-content {
    width: 100%;
    max-width: 1400px;
}

/* ==========================================================================
   CHARACTERS & RADICALS GRID LAYOUT
   ========================================================================== */

/* ==========================================================================
   GRAMMATICA — INDICE LEZIONI (ISOLATO)
   ========================================================================== */

/* --- Header row --- */
.gi-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 14px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-color);
}

.gi-header-title {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary);
    white-space: nowrap;
}

.gi-search {
    flex: 1;
    min-width: 180px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
}

.gi-search:focus {
    border-color: var(--primary);
}

.gi-filtri-btn {
    padding: 10px 22px;
    border-radius: 8px;
    border: 1px solid var(--primary);
    background: var(--bg-card);
    color: var(--text-main);
    font-family: inherit;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.gi-filtri-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* --- Filter popup --- */
.gi-filtri-wrapper {
    position: relative;
}

.gi-filter-popup {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px;
    z-index: 999;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.gi-filter-popup.open {
    display: block;
}

.gi-filter-section {
    margin-bottom: 16px;
}

.gi-filter-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
}

.gi-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gi-chip {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.gi-chip input {
    display: none;
}

.gi-chip span {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-main);
    opacity: 0.6;
    transition: all 0.15s ease;
    cursor: pointer;
}

.gi-chip input:checked + span {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    opacity: 1;
}

.gi-filter-actions {
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.gi-filter-reset {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}

.gi-filter-reset:hover {
    background: rgba(128,128,128,0.1);
}

/* --- Level section --- */
.gi-level-section {
    margin-bottom: 10px;
}

.gi-level-title {
    display: inline-block;
    padding: 6px 14px;
    background-color: var(--primary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    margin-top: 30px;
}

/* --- Category section --- */
.gi-cat-section {
    margin-bottom: 30px;
}

.gi-cat-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 10px;
}

/* --- Lesson grid --- */
.gi-lesson-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* --- Lesson card --- */
.gi-lesson-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 22px 24px;
    text-decoration: none;
    color: var(--text-main);
    transition: border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    min-height: 200px;
    min-width: 0;
    overflow: hidden;
    position: relative;
}
.gi-lesson-card.gi-card--read { opacity: 0.6; }

/* Pulsante-checkbox "già letto" in alto a destra */
.gi-card-read {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid var(--border-color);
    background: transparent;
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gi-card-read:hover { border-color: var(--primary); }
.gi-card-read svg { width: 15px; height: 15px; }
.gi-card-read.is-read {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

[data-theme=dark] .gi-lesson-card {
    background: var(--navbar-bg);
}

.gi-lesson-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.gi-card-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 8px;
    font-family: "Montserrat", sans-serif;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 32px;
}

/* srs-rank-badge usato dalla grammar index (stile condiviso con vocabulary) */
.gi-lesson-card .srs-rank-badge {
    margin-bottom: 12px;
    align-self: flex-start;
}

.gi-card-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0 0 12px;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
    .gi-lesson-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .gi-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .gi-search {
        width: 100%;
    }

    .gi-filtri-wrapper {
        width: 100%;
    }

    .gi-filtri-btn {
        width: 100%;
        justify-content: center;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .gi-filter-popup {
        right: auto;
        left: 0;
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 650px) {
    .gi-lesson-grid {
        grid-template-columns: 1fr;
    }

    .gi-cat-section {
        margin-bottom: 24px;
    }

    .gi-level-section {
        margin-bottom: 36px;
    }
}

/* ==========================================================================
   CHARACTERS & RADICALS GRID LAYOUT
   ========================================================================== */

/* Sezione livello: titolo semplice + griglia di card quadrate */
.lvl-section {
    margin-bottom: 40px;
}

.lvl-title {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--text-main);
    margin: 20px 0 5px;
}

.chars-grid-new {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    width: 100%;
}

.char-card-new {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
    overflow: hidden;
    padding: 24px 12px 10px;
    aspect-ratio: 1 / 1.4;
}

.char-card-new:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
}

.ccn-top {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.ccn-char {
    font-size: 3.8rem;
    font-family: var(--font-cjk);
    font-weight: 400;
    line-height: 1;
}

.ccn-name {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-main);
    text-align: center;
    width: 100%;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ccn-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.ccn-rank {
    opacity: 0.9;
}

.ccn-days {
    opacity: 0.45;
    color: var(--text-main);
}

@media (max-width: 1100px) {
    .chars-grid-new { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
    .chars-grid-new { grid-template-columns: repeat(3, 1fr); }
}
/* Telefono: 3 colonne e card più compatte (con 2 sole colonne le schede
   diventavano altissime e si scorreva all'infinito). */
@media (max-width: 480px) {
    .chars-grid-new {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .char-card-new {
        aspect-ratio: 1 / 1.2;
        padding: 14px 8px 8px;
        border-radius: 10px;
    }

    .ccn-top { gap: 2px; }
    .ccn-char { font-size: 2.2rem; }

    .ccn-name {
        font-size: 0.78rem;
        margin-top: 3px;
    }

    .ccn-footer { font-size: 0.6rem; }

    .lvl-title { font-size: 1.8rem; }
}

/* Schermi molto stretti: 2 colonne, ma sempre compatte */
@media (max-width: 340px) {
    .chars-grid-new { grid-template-columns: repeat(2, 1fr); }
}

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 0;
    width: 100%;
}

.spinner {
    width: 30px;
    height: 30px;
    border: 3px solid var(--bg-card);
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

/* ==========================================================================
   CHARS & RADICALS HEADER (STILE DECK EDITOR)
   ========================================================================== */

.chars-header-new {
    display: flex;
    align-items: center;
    gap: 20px;
    position: sticky;
    top: 90px;
    z-index: 100;
    background-color: var(--bg-page);
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}

.chars-header-new h1 {
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary);
    white-space: nowrap;
    flex-shrink: 0;
}

.chars-search-bar {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.chars-search-bar .search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-main);
    opacity: 0.5;
    font-size: 0.9rem;
}

.chars-search-bar input {
    width: 100%;
    padding: 10px 15px 10px 15px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.95rem;
    transition: all 0.2s;
    font-family: "Montserrat", sans-serif;
}

.chars-search-bar input:focus {
    border-color: var(--primary);
    outline: none;
}

.chars-header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

/* ==========================================================================
   CARATTERI & RADICALI — allineamento alla nuova grafica
   Font Nunito/Outfit (iniettati da ensureLandingFonts) e barra di ricerca
   nello stesso stile dell'indice grammatica. I caratteri CJK non sono
   toccati: usano var(--font-cjk) esplicita.
   ========================================================================== */

body:has(.chars-wrapper) {
    font-family: 'Nunito', sans-serif;
}

body:has(.chars-wrapper) h1,
body:has(.chars-wrapper) h2,
body:has(.chars-wrapper) h3,
/* Titolo del popup: identico a quello delle impostazioni in sessione
   (.srs-settings-title) — Outfit, 1.6rem, testo normale in colore pieno. */
body:has(.chars-wrapper) .modal-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: none;
    color: var(--text-main);
}

/* Popup dettagli: stessa tipografia della sessione (body.srs-page) —
   Outfit sulle etichette e sul significato principale, Nunito per il resto,
   con la stessa spaziatura delle lettere sulle label. */
body:has(.chars-wrapper) .srs-label-centered,
body:has(.chars-wrapper) .card-header-banner,
body:has(.chars-wrapper) .kb-sig-main {
    font-family: 'Outfit', sans-serif;
}

body:has(.chars-wrapper) .srs-label-centered,
body:has(.chars-wrapper) .srs-settings-section-label,
body:has(.chars-wrapper) .kb-let-label,
body:has(.chars-wrapper) .kb-kanji-label {
    letter-spacing: 0.5px;
}

/* Titolo di livello ("Livello 01") — identico a quello dell'indice grammatica:
   barra verticale nel colore della lingua a sinistra, testo in Outfit. */
body:has(.chars-wrapper) .lvl-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text-main);
    line-height: 1;
    border-left: 3px solid var(--primary);
    padding: 6px 14px;
    margin: 30px 0 20px;
}

/* Barra sticky: vetro come la navbar, agganciata sotto di essa (80px) */
body:has(.chars-wrapper) .chars-header-new {
    top: 80px;
    padding: 20px var(--side-margin);
    margin: 0 calc(-1 * var(--side-margin));
    background: var(--bg-nav);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-nav);
    box-sizing: border-box;
}

/* Titolo in stile editoriale (niente maiuscoletto spaziato) */
body:has(.chars-wrapper) .chars-header-new h1 {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-transform: none;
    color: var(--text-main);
    line-height: 1.2;
}

/* Campo di ricerca a pillola, con spazio per l'icona (prima ci finiva sotto) */
body:has(.chars-wrapper) .chars-search-bar input {
    padding: 12px 20px 12px 44px;
    border-radius: 30px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    font-family: 'Nunito', sans-serif;
    font-size: 0.95rem;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body:has(.chars-wrapper) .chars-search-bar input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

body:has(.chars-wrapper) .chars-search-bar input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

body:has(.chars-wrapper) .chars-search-bar .search-icon {
    left: 18px;
    color: var(--text-muted);
    opacity: 1;
    font-size: 0.85rem;
}

/* Pulsante "Studia" a pillola, coerente col resto */
body:has(.chars-wrapper) .btn-primary-editor {
    font-family: 'Nunito', sans-serif;
    border-radius: 30px;
    padding: 11px 24px;
    font-size: 0.95rem;
    font-weight: 700;
    background-color: var(--primary);
}

@media (max-width: 768px) {
    .chars-wrapper {
        padding: 0 var(--side-margin);
    }

    .chars-header-new {
        display: grid;
        grid-template-columns: 1fr auto; /* Titolo a sinistra, Pulsante a destra */
        grid-template-rows: auto auto;    /* Due righe esplicite */
        gap: 15px;
        top: 80px;                        /* combacia con l'altezza della navbar */
        padding: 15px 0;
        margin-bottom: 20px;
        align-items: center;
    }

    .chars-header-new h1 {
        font-size: 1.1rem;
        margin: 0;
        grid-column: 1;
        grid-row: 1;
    }

    body:has(.chars-wrapper) .chars-header-new {
        padding: 14px var(--side-margin);
        margin-bottom: 20px;
    }

    body:has(.chars-wrapper) .chars-header-new h1 {
        font-size: 1.35rem;
    }

    body:has(.chars-wrapper) .btn-primary-editor {
        padding: 9px 18px;
        font-size: 0.85rem;
    }

    body:has(.chars-wrapper) .lvl-title {
        font-size: 1.4rem;
        margin: 20px 0 20px;
    }

    .chars-header-actions {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        justify-content: flex-end;
    }

    .chars-search-bar {
        grid-column: 1 / 3; /* Occupa entrambe le colonne */
        grid-row: 2;       /* Forza sulla seconda riga */
        width: 100%;
    }

    .btn-primary-editor {
        padding: 6px 14px;
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   CHAR MODAL (POP-UP DETTAGLI)
   ========================================================================== */

.char-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
}

.char-modal.open {
    display: flex;
}

.char-modal.open .modal-overlay {
    animation: fadeIn 0.3s ease forwards;
}

.char-modal.open .modal-wrapper {
    animation: modalEntryDesktop 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes modalEntryDesktop {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes modalExitDesktop {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
}

@keyframes modalEntryMobile {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes modalExitMobile {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100%);
    }
}

.modal-wrapper {
    position: relative;
    width: calc(100% - (var(--side-margin) * 2));
    max-width: 1400px;
    height: 90vh;
    background: var(--bg-page);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    touch-action: none; /* Per swipe mobile */
    cursor: grab;
}

.modal-header:active {
    cursor: grabbing;
    justify-content: space-between;
    padding: 20px 28px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary);
}

.modal-close-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.2s;
    line-height: 1;
}

.modal-close-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: scale(1.05);
}

.modal-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: none; /* Firefox */
}

.modal-body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

/* Adattamenti specifici per il layout review dentro il modal */
.char-modal .kanji-back-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.char-modal .kb-top {
    flex: 0 0 42%;
    margin-bottom: 20px;
    display: grid;
}

.char-modal .kb-hero {
    background: var(--bg-card) !important;
}

.theme-cn .char-modal .kb-hero {
    background: var(--bg-card) !important;
}

.char-modal .kb-bottom {
    flex: 0 0 54%;
    display: grid;
}

.char-modal .detail-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.char-modal .kb-esempi-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px;
}

/* Scrollbar per la lista esempi nel modal */
.char-modal .kb-esempi-list::-webkit-scrollbar {
    width: 6px;
    display: block;
}
.char-modal .kb-esempi-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}

/* --------------------------------------------------------------------------
   RESPONSIVE MOBILE (Uniformato a bulk-modal)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .char-modal.open .modal-wrapper {
        animation: modalEntryMobile 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .char-modal {
        align-items: flex-end;
    }

    .modal-wrapper {
        /* 100% invece di 100vw: con la barra di scorrimento 100vw sfora. */
        width: 100%;
        height: calc(100vh - 130px);   /* 80px navbar + margine */
        max-height: calc(100vh - 90px);
        border-radius: 24px 24px 0 0;
        margin: 0;
        border-bottom: none;
        transform: translateY(100%);
    }

    .modal-header {
        padding: 16px 20px;
    }

    .modal-title {
        font-size: 1.2rem;
    }

    body:has(.chars-wrapper) .modal-title {
        font-size: 1.3rem;
    }

    .modal-body {
        padding: 15px;
        gap: 0;
    }

    .char-modal .kb-top,
    .char-modal .kb-bottom {
        flex: none;
        display: flex;
        flex-direction: column;
        min-height: auto;
    }

    .char-modal .kb-top {
        margin-bottom: 20px;
    }

    /* Kanji correlati: su mobile vanno a capo invece di essere tagliati.
       In una riga sola se ne vedevano 3 su 15, gli altri erano irraggiungibili. */
    .char-modal .kb-comp-grid--compact {
        flex-wrap: wrap;
        justify-content: center;
        overflow: visible;
        padding: 0 10px;
        gap: 10px;
    }

    /* Esempi del radicale (solo mobile): 2 per fila, al massimo 8.
       Su desktop restano su un'unica riga come prima. */
    .char-modal .rad-bottom .kb-comp-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, auto));
        justify-content: center;
        justify-items: center;
        align-content: start;
        gap: 14px 20px;
        overflow: visible;
        padding: 0 10px;
    }

    .char-modal .rad-bottom .kb-comp-grid .kb-kanji-item:nth-child(n + 9) {
        display: none;
    }

    .char-modal .kb-comp-grid--compact .kb-kanji-square,
    .char-modal .rad-bottom .kb-kanji-square {
        width: 62px;
        height: 62px;
        font-size: 1.9rem;
    }

    .char-modal .kb-comp-grid--compact .kb-kanji-label,
    .char-modal .rad-bottom .kb-kanji-label {
        font-size: 0.7rem;
        max-width: 62px;
    }
}

/* ==========================================================================
   HUB DASHBOARD (Bunpro/WaniKani Style)
   ========================================================================== */

.hub-dashboard-wrapper {
    width: 100%;
    padding: 20px var(--side-margin);
    display: flex;
    flex-direction: column;
    gap: 30px;
    animation: fadeIn 0.8s ease-out;
}

.dashboard-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    width: 100%;
}

/* Pulsante Ingranaggio Dashboard */
.dash-settings-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--text-main);
    opacity: 0.2;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    padding: 5px;
}

.dash-settings-btn:hover {
    opacity: 1;
    transform: rotate(60deg);
    color: var(--primary);
}

/* Griglia Impostazioni Modale */
.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 10px 0;
}

.settings-column h3 {
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 2px;
    color: var(--primary);
    text-transform: uppercase;
}

.settings-desc {
    font-size: 0.75rem;
    opacity: 0.6;
    margin-bottom: 15px;
    line-height: 1.3;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.setting-item label {
    font-weight: 600;
    font-size: 0.85rem;
}

.setting-item input {
    width: 60px;
    padding: 5px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-page);
    color: var(--text-main);
    font-family: inherit;
    text-align: center;
    font-weight: bold;
    appearance: textfield; /* Rimuove frecce per Firefox */
}

/* Rimuove frecce per Chrome, Safari, Edge, Opera */
.setting-item input::-webkit-outer-spin-button,
.setting-item input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Compattazione header e box modale */
#srs-limits-modal .bulk-modal-box {
    width: min(700px, 92vw);
}

#srs-limits-modal .bulk-modal-header {
    padding: 15px 25px;
}

#srs-limits-modal .bulk-step {
    padding: 20px 25px;
}

@media (max-width: 650px) {
    .settings-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.btn-dash {
    padding: 6px 20px;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-dash.btn-primary {
    background: var(--primary);
    color: white;
    border: none;
}

.btn-dash.btn-outline {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--primary);
}

.btn-dash:hover {
    transform: scale(1.05);
}

.btn-dash.btn-outline:hover {
    border-color: white;
}

/* Mobile responsive */
/* ==========================================================================
   NOTIFICHE TOAST
   ========================================================================== */

/* Avvisi: stessa materia delle schede del sito (--bg-card, bordo, ombra),
   con una sola barretta colorata a sinistra a dire com'è andata. Prima era
   un blocco blu ardesia fisso, uguale in tema chiaro e scuro. */
.toast-container {
    position: fixed;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: min(430px, calc(100vw - 32px));
    pointer-events: none;
}

.toast {
    position: relative;
    overflow: hidden;
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 16px 13px 18px;
    border-radius: 12px;
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    font-family: "Montserrat", sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.45;
    animation: slideUpFade 0.3s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

/* Barretta di stato: errore di base, verde quando è andata bene */
.toast::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ko);
}

.toast.success::before {
    background: var(--ok);
}

.toast i {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--ko);
}

.toast.success i {
    color: var(--ok);
}

.toast span {
    min-width: 0;
    word-break: break-word;
}

@keyframes slideUpFade {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* --- LANG SELECTOR (hub.html) --- */
#lang-selector-section { margin-top: 40px }
#lang-selector-section > h2 { text-align: center; margin-bottom: 20px }

/* --- SETTINGS MODAL BACKUP SECTION (hub.html) --- */
.srs-backup-section { margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--border-color) }
.srs-backup-section > h3 { font-size: 0.8rem; margin-bottom: 15px; color:var(--primary) }
.backup-actions { display: flex; gap: 10px; flex-wrap: wrap }
.backup-btn { font-size: 0.85rem; padding: 8px 15px }
.backup-btn-label { cursor: pointer }
.backup-btn-danger { color: var(--ko); border-color: var(--ko) }
.icon-mr { margin-right: 5px }
.anki-field-select {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-main);
    font-size: 0.9rem;
    padding: 5px 8px;
    cursor: pointer;
}
.settings-save-row { margin-top: 30px; text-align: right; padding-top: 20px; border-top: 1px solid var(--border-color) }

/* --- LOGIN (login.html) --- */
.login-container { max-width: 450px; margin: 20px auto 40px }
.login-form-footer { align-items: center; width: 100% }
.login-submit-btn { width: 100%; margin-bottom: 10px }
.link-primary { color: var(--primary); font-weight: 700 }

/* --- CARD EDITOR (card-editor.html) --- */
.card-editor-spacer { height: 90px }
.login-hint { font-size: 0.85rem }

/* === PROFILO HUB (hub.html) === */
.profile-banner-section {
    margin-bottom: 0;
}

.profile-banner {
    
    background: var(--bg-card);
    
    position: relative;
    overflow: hidden;
    
    cursor: pointer;
}

.banner-edit-btn {
    position: absolute;
    
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.profile-banner:hover .banner-edit-btn {
    opacity: 1;
}

.profile-info-row {
    
    display: flex;
    
}

.profile-avatar-wrap {
    position: relative;
    
    flex-shrink: 0;
    
}

.profile-avatar {
    width: 140px;
    height: 140px;
    
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    display: flex;
    align-items: end;
    justify-content: center;
    font-size: 7rem;
    color: var(--text-main);
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.avatar-edit-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.profile-avatar-wrap:hover .avatar-edit-btn {
    opacity: 1;
}

.profile-name-area {
    display: flex;
    align-items: baseline;
    gap: 6px;
    
}

.hub-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0;
}

/* ==========================================================================
   STATISTICHE HUB (hub.html)
   ========================================================================== */

/* Layout righe */
.hub-section-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    margin: 40px 0 20px;
    color: var(--text-main);
    padding-left: 14px;
    border-left: 4px solid var(--primary);
    line-height: 1.25
}

.hub-section-title:first-child {
    margin-top: 25px;
}

.stats-today-row,
.stats-main-row,
.stats-bottom-row {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.stats-main-row{
    margin-top: 0px;
}

.stats-today-row {
    margin-top: 0px;
}

/* Mini card OGGI — stile identico a dash-card */
.today-mini-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 50px 16px 20px;
    flex: 1;
    min-width: 0;
    text-align: center;
}

/* Card base — flex column per allineamento verticale uniforme */
.stats-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Label identica a .dash-label */
.stats-card-label,
.today-mini-card .stats-card-label {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* --- OGGI --- */
.today-stat-value {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1;
}
.today-stat-key {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* --- STREAK --- */
.stats-streak {
    gap: 0;
}

/* --- ATTIVITÀ SETTIMANALE --- */
.stats-activity, .stats-card {
    gap: 0;
    padding: 60px 20px 15px;
}
.week-bars {
    flex: 1;
    display: flex;
    
    padding-bottom: 8px;
}
.week-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 3px;
}
.week-bar-track {
    flex: 1;
    width: 100%;
    
    display: flex;
    align-items: flex-end;
    
    position: relative;
}
.week-bar-fill {
    width: 100%;
    
    min-height: 0;
}
.week-bar-label {
    
    text-transform: uppercase;
}
.week-type-pills {
    display: flex;
    
    flex-wrap: wrap;
    justify-content: center;
    
    margin-top: auto;
}
.week-pill {
    background: transparent;
    
    letter-spacing: 0.5px;
    
    cursor: pointer;
    
}
.week-pill.active {
    
    color: #fff;
}
.week-pill:hover:not(.active) {
    background: var(--border-color);
    
}

/* --- FORECAST BARS --- */
.forecast-bars {
    flex: 1;
    display: flex;
    
    margin-bottom: 15px;
}
.forecast-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 4px;
}
.forecast-bar-track {
    flex: 1;
    width: 100%;
    
    display: flex;
    align-items: flex-end;
    
    position: relative;
}
.forecast-bar-fill {
    width: 100%;
    
    min-height: 0;
    
}
.forecast-bar-label {
    
    text-transform: uppercase;
    line-height: 1;
}

.forecast-bars-wrapper {
    display: flex;
    align-items: stretch;
    gap: 4px;
    flex: 1;
}
.forecast-bars-wrapper .forecast-bars {
    flex: 1;
    margin-bottom: -10px;
}
.forecast-arrow {
    
    cursor: pointer;
    padding: 4px 5px;
    
    display: flex;
    align-items: center;
    font-size: 0.7rem;
    flex-shrink: 0;
    
}
.forecast-arrow:disabled { opacity: 0.2; cursor: default }

.forecast-footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
    margin-top: auto;
}
.forecast-footer .week-type-pills {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

/* --- LEVEL PROGRESS --- */
.progress-levels {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
    justify-content: center;
    flex: 1;
}
.level-progress-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.level-progress-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    width: 36px;
    flex-shrink: 0;
    text-align: right;
}
.level-progress-track {
    flex: 1;
    height: 20px;
    border-radius: 4px;
    overflow: visible;
    position: relative;
    border: var(--border-color) 1px solid;
    background-color: var(--bg-page);
}
.level-progress-inner {
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
}
.level-seg {
    height: 100%;
    transition: width 0.4s ease;
    flex-shrink: 0;
}
.level-progress-count {
    font-size: 12px;
    color: var(--text-muted);
    width: 52px;
    flex-shrink: 0;
    text-align: right;
}

.no-data-msg {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 20px 0;
}

/* Responsive statistiche */
@media (max-width: 1024px) {
    .hub-dashboard-wrapper {
        padding: 20px;
    }
    .dashboard-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
}

@media (max-width: 768px) {

    /* ── WRAPPER ─────────────────────────────────────── */
    .hub-dashboard-wrapper {
        padding: 12px var(--side-margin);
        gap: 14px;
    }
    .hub-divider { margin: 0; }

    /* ── PROFILO ─────────────────────────────────────── */
    /* Edit buttons sempre visibili su touch */    .profile-avatar {
        width: 90px;
        height: 90px;
    }
    .profile-info-row {
        padding: 0 14px 14px 16px !important;
        
        align-items: center;
    }
    .profile-name-area {
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
    }

    /* ── DASHBOARD CARDS ─────────────────────────────── */
    .dashboard-stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .btn-dash {
        flex: 1;
        padding: 8px 10px;
    }

    /* ── POPUP IMPOSTAZIONI (bottom sheet) ───────────── */
    #srs-limits-modal .bulk-modal-box {
        width: 100vw;
        max-height: 85vh;
        border-radius: 16px 16px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
    #srs-limits-modal .bulk-step { padding: 16px; }
    .backup-actions { flex-direction: column; }
    .backup-btn { width: 100%; display: flex; justify-content: center; }
    .settings-save-row { text-align: center; }
    .settings-save-row .btn-primary-editor { width: 100%; padding: 12px; }

    /* ── STATISTICHE — OGGI (2×2) ────────────────────── */
    .stats-today-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .today-mini-card { padding: 42px 12px 14px; }

    /* ── STATISTICHE — RIGHE IN COLONNA ─────────────── */
    .stats-main-row,
    .stats-bottom-row { flex-direction: column; }

    /* ── STREAK ──────────────────────────────────────── */

    /* ── ATTIVITÀ SETTIMANALE ────────────────────────── */    .week-type-pills { gap: 5px; padding-top: 10px; }
    .week-pill { padding: 3px 8px; }

    /* ── FORECAST ────────────────────────────────────── */
    /* ── PROGRESSI ───────────────────────────────────── */
    .level-progress-label { width: 30px; }
    .level-progress-count { width: 44px; }
    .level-progress-track { height: 7px; }
}

/* ── SCHERMI PICCOLI (≤ 480px) ───────────────────────── */
@media (max-width: 480px) {
    .profile-banner { height: 140px; }
    .profile-avatar { width: 100px; height: 100px; font-size: 3.7rem; }
    .profile-avatar-wrap { margin-top: -50px; }
    .profile-fullname { font-size: 0.95rem; }

    .today-stat-value { font-size: 22px; }
    .today-stat-key { font-size: 10px; }
    .today-mini-card { padding: 40px 10px 12px; }

    .stats-today-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .week-bars,
    .forecast-bars { min-height: 100px; gap: 4px; }

    .week-pill { font-size: 10px; padding: 3px 7px; }

    .stats-today-row,
    .stats-main-row,
    .stats-bottom-row {
    gap: 15px;
    margin-top: 15px;
    }

    .stats-today-row {
    margin-top: 0px;
    }

    .stats-activity, .stats-card{
            padding: 50px 12px 15px;
    }
    .stats-card-label,
    .today-mini-card .stats-card-label {
        top: 15px;
    }
}

/* --- CARD EDITOR: TRANSLATION BUTTON (Facilmente rimovibile) --- */
.field-with-addon {
    display: flex;
    gap: 8px;
    align-items: center;
}
.btn-translate-addon {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--primary);
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1rem;
}
.btn-translate-addon:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.btn-translate-addon.loading {
    pointer-events: none;
    opacity: 0.6;
}
.btn-translate-addon.loading i {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.bulk-it-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.bulk-it-wrapper .bulk-esempio-it {
    margin-bottom: 0;
    flex: 1;

}
.btn-translate-bulk {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--primary);
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.8rem;
}
.btn-translate-bulk:hover {
    background: var(--primary);
    color: #fff;
}
.btn-translate-bulk.loading i {
    animation: spin 1s linear infinite;
}

/* --- FINE STILI TRADUZIONE --- */

/* Modalita Riconoscimento (Sentence-centric) Bulk Import */
.bulk-sentence-card { background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border-color); margin-bottom: 25px; overflow: hidden; animation: fadeIn 0.4s ease; }
.bulk-sentence-header { padding: 20px; display: flex; align-items: center; gap: 25px; border-bottom: 1px solid var(--border-color); background: rgba(0,0,0,0.02); }
.bulk-sentence-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px; text-align: left; }
.bulk-sentence-main .bulk-label-mini { margin-bottom: 2px; }
.bulk-sentence-main .bulk-esempio-jp { font-size: 1.25rem; line-height: 1.4; margin: 0; font-weight: 600; }
.bulk-sentence-main .bulk-it-wrapper { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 5px; }
.bulk-sentence-main .bulk-esempio-it { font-size: 0.95rem; opacity: 0.7; margin: 0; }

.bulk-frase-media { display: flex; flex-direction: column; gap: 8px; align-items: center; width: 120px; flex-shrink: 0; }
.bulk-frase-img { width: 100%; height: 70px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-color); }
.bulk-audio-icon { width: 30px; height: 30px; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; background: var(--bg-page); border-radius: 50%; cursor: pointer; color: var(--primary); border: 1px solid var(--border-color); }
.bulk-audio-icon:hover { background: var(--primary); color: #fff; }

.bulk-sentence-words { padding: 0 20px; background: rgba(var(--primary-rgb), 0.02); }
.bulk-sentence-word-item { display: flex; align-items: center; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--border-color); }
.bulk-sentence-word-item:last-child { border-bottom: none; }
.bulk-sentence-word-item:hover { background: rgba(0,0,0,0.01); }
.bulk-sentence-word-info { flex: 1; display: grid; grid-template-columns: 80px 1fr 200px; align-items: center; gap: 12px; }
.bulk-word-main { display: flex; flex-direction: column; line-height: 1.2; width: 120px; overflow: hidden; }
.bulk-word-main .word-kanji { font-family: var(--font-cjk); font-size: 1.2rem; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bulk-word-main .word-reading { font-size: 0.75rem; opacity: 0.6; }
.word-significato { font-size: 0.85rem; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bulk-sug-wrapper { display: flex; align-items: center; }
.bulk-sentence-sug-input { width: 100%; padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.8rem; background: var(--bg-page); color: var(--text-main); transition: border-color 0.2s; }
.bulk-sentence-sug-input:focus { border-color: var(--primary); outline: none; }
.bulk-label-mini { font-size: 0.65rem; font-weight: 800; opacity: 0.4; letter-spacing: 0.05em; text-transform: uppercase; }

@media (max-width: 768px) {
    .bulk-sentence-card { margin-bottom: 25px; border-radius: 12px; }
    
    .bulk-sentence-header { 
        flex-direction: column; 
        align-items: stretch; 
        gap: 15px; 
        padding: 15px; 
    }

    .bulk-frase-media { 
        width: 100%; 
        flex-direction: column; 
        justify-content: center; 
        align-items: center;
        gap: 12px; 
    }

    .bulk-frase-img { width: 100%; max-width: 280px; height: 160px; flex-shrink: 0; }
    .bulk-audio-icon { width: 44px; height: 44px; font-size: 1.2rem; }
    
    .bulk-sentence-main { width: 100%; }
    .bulk-sentence-main .bulk-label-mini { font-size: 0.6rem; }
    .bulk-sentence-main .bulk-esempio-jp { font-size: 1.1rem; margin-bottom: 4px; }
    
    .bulk-sentence-main .bulk-it-wrapper { 
        align-items: center; 
        gap: 8px;
    }
    .bulk-sentence-main .bulk-esempio-it { 
        font-size: 0.85rem; 
        line-height: 1.4;
    }
    .bulk-sentence-main .btn-translate-bulk {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 0.7rem;
    }

    .bulk-sentence-words { padding: 0 15px; }
    .bulk-sentence-word-item { gap: 12px; padding: 15px 0; align-items: flex-start; }
    .bulk-sentence-word-item input[type="checkbox"] { width: 22px; height: 22px; margin-top: 2px; }
    
    .bulk-sentence-word-info { 
        grid-template-columns: 1fr; 
        gap: 5px; 
    }
    
    .bulk-word-main { 
        flex-direction: row; 
        align-items: baseline; 
        gap: 10px; 
        width: 100%; 
    }
    .bulk-word-main .word-kanji { font-size: 1.15rem; width: auto; }
    .bulk-word-main .word-reading { font-size: 0.8rem; }
    
    .word-significato { 
        white-space: normal; 
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 0.8rem;
        opacity: 0.6;
    }
    
    .bulk-sug-wrapper { margin-top: 4px; }
    .bulk-sentence-sug-input { font-size: 0.85rem; padding: 8px 12px; }
}

/* ==========================================================================
   YOTEKA LANDING PAGE STYLES
   ========================================================================== */

/* I colori della landing sono ora ereditati dal sistema temi unificato in
   cima al file: per-lingua cambiano solo --primary/--secondary, i neutri sono
   fissi per dark/light e i token (--viola-*, --tag-*, --glow-*) ne derivano. */

/* Stili generali della landing page per evitare di appesantire gli HTML */
html.theme-jp body.landing-page,
html.theme-cn body.landing-page {
  position: relative;
  font-family: 'Nunito', sans-serif;
  background-color: var(--bg-page);
  color: var(--text-main);
  overflow-x: hidden; /* Blocca scorrimento orizzontale spurio */
  transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body.landing-page header {
  height: 80px;
  padding: 0 8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--bg-nav);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-nav);
  z-index: 999;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

body.landing-page .logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-main);
}

body.landing-page .logo-name {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  font-family: 'Nunito', sans-serif;
}

body.landing-page .yoteka-logo-svg {
  width: 28px;
  height: 28px;
  color: var(--primary);
  transition: color 0.2s ease;
}

/* Luce ambientale: fixed → resta ferma nel viewport e fa da sfondo costante
   su tutta la pagina mentre si scorre (prima era absolute e "compariva"
   solo in un punto del documento). */
/* Luce ambientale: fixed nel viewport (copre tutta la pagina) ma con un
   lento movimento continuo, così è dinamica invece che immobile. */
body.landing-page .glow-ambient-bg {
  position: fixed;
  top: -10%;
  left: -8%;
  width: 60vw;
  height: 60vw;
  max-width: 800px;
  max-height: 800px;
  background: radial-gradient(circle, var(--glow-color-1) 0%, var(--glow-color-2) 45%, transparent 70%);
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  will-change: transform;
  animation: glow-drift-1 26s ease-in-out infinite;
}

body.landing-page .glow-ambient-bg-secondary {
  position: fixed;
  bottom: -12%;
  right: -10%;
  width: 55vw;
  height: 55vw;
  max-width: 720px;
  max-height: 720px;
  background: radial-gradient(circle, var(--glow-color-sec) 0%, transparent 68%);
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  will-change: transform;
  animation: glow-drift-2 34s ease-in-out infinite;
}

/* ── Bagliori spenti in modalità chiara ──────────────────────────────────
   Gli aloni sfocati sono nati per il fondo scuro, dove una macchia di colore
   diffusa dà profondità. Su fondo chiaro diventano una velatura sporca.
   Qui spariscono del tutto: le due macchie ambientali della landing e
   l'alone dietro al titolo delle lezioni.
   ATTENZIONE al selettore: `data-theme` sta su <html>, quindi va scritto
   `html[data-theme="light"] body...` e non `body ... [data-theme="light"]`. */
html[data-theme="light"] body.landing-page .glow-ambient-bg,
html[data-theme="light"] body.landing-page .glow-ambient-bg-secondary {
  display: none;
}

html[data-theme="light"] body.landing-page .lesson-banner::before {
  content: none;
}

@keyframes glow-drift-1 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(9vw, 7vh) scale(1.12); }
  66%  { transform: translate(4vw, -5vh) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes glow-drift-2 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-8vw, -6vh) scale(1.1); }
  66%  { transform: translate(-3vw, 5vh) scale(0.96); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Rispetta chi preferisce meno animazioni */
@media (prefers-reduced-motion: reduce) {
  body.landing-page .glow-ambient-bg,
  body.landing-page .glow-ambient-bg-secondary {
    animation: none;
  }
}

body.landing-page .nav-links {
  display: flex;
  gap: 25px;
  list-style: none;
  align-items: center;
}

body.landing-page .nav-links a.nav-item {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

body.landing-page .nav-links a.nav-item:hover {
  color: var(--text-main);
}

body.landing-page .btn-login-nav {
  background: transparent;
  border: 1.5px solid var(--primary);
  padding: 7px 22px;
  border-radius: 30px;
  color: var(--text-main) !important;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.3s;
  cursor: pointer;
  text-decoration: none;
}

body.landing-page .btn-login-nav:hover {
  background: var(--btn-sub-hover);
}

body.landing-page .btn-reg-nav {
  background: var(--primary);
  border: none;
  padding: 8px 24px;
  border-radius: 30px;
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 0.9rem;
  transition: opacity 0.3s;
  cursor: pointer;
  text-decoration: none;
}

body.landing-page .btn-reg-nav:hover {
  opacity: 0.9;
}

body.landing-page .theme-toggle-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body.landing-page .theme-toggle-btn:hover {
  border-color: var(--primary);
}

body.landing-page .hero-section {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  padding: 0 8%;
  align-items: center;
  gap: 60px;
  min-height: calc(100vh - 80px);
}

body.landing-page .hero-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

body.landing-page .hero-badge {
  border: 1px solid var(--primary);
  background: var(--tag-bg);
  color: var(--accent-text);
  padding: 6px 18px;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 25px;
  font-family: 'Nunito', sans-serif;
}

body.landing-page h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1px;
  margin-bottom: 25px;
  color: var(--text-main);
}

body.landing-page h1 span.highlight {
  color: var(--accent-text);
}

body.landing-page .hero-desc {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 35px;
  max-width: 530px;
  font-family: 'Nunito', sans-serif;
}

body.landing-page .cta-group {
  display: flex;
  gap: 15px;
}

body.landing-page .btn-cta-main {
  background: var(--primary);
  border: none;
  padding: 8px 24px;
  border-radius: 30px;
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: opacity 0.3s;
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.landing-page .btn-cta-main:hover {
  opacity: 0.9;
}

body.landing-page .btn-cta-sub {
  background: transparent;
  border: 1.5px solid var(--primary);
  padding: 7px 22px;
  border-radius: 30px;
  color: var(--text-main) !important;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.landing-page .btn-cta-sub:hover {
  background: var(--btn-sub-hover);
}

body.landing-page .visual-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  position: relative;
  z-index: 2;
}

body.landing-page .visual-box-main {
  width: 100%;
  height: 360px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body.landing-page .stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
}

body.landing-page .stat-mini-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body.landing-page .stat-icon-wrap {
  font-size: 1.35rem;
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

body.landing-page .stat-icon-wrap--char {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
}

body.landing-page .stat-icon-svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

body.landing-page .stat-card-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

body.landing-page .stat-card-number {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
}

body.landing-page .stat-card-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

body.landing-page .journey-widget {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

body.landing-page .journey-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding: 16px 24px;
  width: 100%;
}

body.landing-page .journey-header-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.9;
  margin: 0;
  line-height: 28px;
  height: 28px;
}

body.landing-page .journey-timeline-nav {
  display: flex;
  gap: 6px;
  align-items: center;
}

body.landing-page .journey-time-btn {
  padding: 0 12px;
  height: 28px;
  line-height: 26px;
  border-radius: 20px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* `:not(.active)` è necessario: questo selettore è più specifico di
   `.journey-time-btn.active`, quindi senza l'esclusione cancellerebbe lo
   sfondo pieno del pulsante attivo lasciando il testo bianco su chiaro. */
html[data-theme="light"] body.landing-page .journey-time-btn:not(.active) {
  background: rgba(0, 0, 0, 0.02);
}

body.landing-page .journey-time-btn.active {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(133, 113, 192, 0.25);
}

body.landing-page .journey-body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
}

body.landing-page .journey-progress-wrap {
  position: relative;
  width: 105px;
  height: 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.landing-page .journey-progress-circle {
  transform: rotate(-90deg);
  width: 100px;
  height: 100px;
}

body.landing-page .journey-circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.04);
  stroke-width: 7;
}

html[data-theme="light"] body.landing-page .journey-circle-bg {
  stroke: rgba(0, 0, 0, 0.04);
}

body.landing-page .journey-circle-bar {
  fill: none;
  stroke: var(--primary);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

body.landing-page .journey-percent-text {
  position: absolute;
  font-family: 'Outfit', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

body.landing-page .journey-percent-label {
  font-size: 0.6rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 2px;
}

body.landing-page .journey-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.landing-page .journey-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
}

body.landing-page .journey-stats-badge {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent-text);
  margin-bottom: 4px;
}

body.landing-page .journey-skills-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.landing-page .journey-skill-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.35;
}

body.landing-page .journey-check-icon {
  color: var(--accent-text);
  font-weight: bold;
  flex-shrink: 0;
  font-size: 0.85rem;
}

body.landing-page .journey-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-color);
  padding: 16px 24px;
  height: 60px;
  box-sizing: border-box;
}

body.landing-page .journey-footer-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
  margin: 0;
  line-height: 28px;
  height: 28px;
  display: block;
}

body.landing-page #journey-time-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 28px;
  background: transparent;
  outline: none;
  margin: 0 12px;
  padding: 0;
  display: block;
}

body.landing-page #journey-time-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] body.landing-page #journey-time-slider::-webkit-slider-runnable-track {
  background: rgba(0, 0, 0, 0.06);
}

body.landing-page #journey-time-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  margin-top: -5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

body.landing-page #slider-value-text {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--accent-text);
  white-space: nowrap;
  text-align: right;
  width: 55px;
  margin: 0;
  line-height: 28px;
  height: 28px;
  display: block;
}

/* responsive queries */
@media (max-width: 992px) {
  body.landing-page .hero-section {
    grid-template-columns: 1fr;
    padding: 40px 6% 80px 6%;
    gap: 45px;
    min-height: auto;
    text-align: center;
  }

  body.landing-page .hero-text-wrap {
    align-items: center;
  }

  body.landing-page .hero-desc {
    margin-left: auto;
    margin-right: auto;
  }

  body.landing-page .visual-container {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  body.landing-page header {
    padding: 0 5%;
    height: 70px;
  }

  body.landing-page header .nav-item {
    display: none;
  }
  /* La pagina lezione è landing-page ma usa la premium-nav: la navbar deve essere
     identica al resto del sito interno. Neutralizziamo qui le regole navbar delle
     landing che altrimenti si applicherebbero sopra (link nascosti, gap, ecc.). */
  body.landing-page header .premium-nav .nav-item {
    display: inline-flex;
  }
  body.landing-page header .premium-nav .nav-links {
    gap: 26px;
  }

  body.landing-page header .btn-reg-nav, 
  body.landing-page header .btn-login-nav {
    display: none;
  }

  body.landing-page .nav-links {
    gap: 0;
  }

  body.landing-page h1 {
    line-height: 1.1;
  }

  body.landing-page .stats-row {
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
  }
  
  body.landing-page .visual-box-main {
    height: auto !important;
    min-height: auto;
  }

  body.landing-page .journey-body {
    flex-direction: column;
    gap: 20px;
    text-align: center;
    padding: 24px 20px;
  }

  body.landing-page .journey-skills-list {
    align-items: center;
    width: 100%;
  }

  body.landing-page .journey-skill-item {
    justify-content: center;
    text-align: left;
  }
  
  body.landing-page .journey-footer {
    padding: 16px 20px;
  }
  
  body.landing-page .journey-header {
    padding: 16px 20px;
  }
  
  body.landing-page .glow-ambient-bg,
  body.landing-page .glow-ambient-bg-secondary {
    display: none !important;
  }
}

@media (max-width: 576px) {
  body.landing-page h1 {
    font-size: 1.9rem;
  }
  
  body.landing-page .journey-timeline-nav {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }
  
  body.landing-page .journey-time-btn {
    padding: 0 8px;
    font-size: 0.7rem;
    height: 26px;
  }
  
  body.landing-page .journey-header {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  
  body.landing-page .journey-header-title {
    height: auto;
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   NAVBAR PREMIUM — pagine interne con lo stile della landing page.
   Riusa i pulsanti/funzioni esistenti (dropdown Caratteri, selettore lingua,
   impostazioni, segnala errore, tema) ma con l'aspetto della landing.
   ========================================================================== */
/* Identica all'header della landing (body.landing-page header):
   sticky in cima, sfondo semitrasparente sfocato → il contenuto si sfoca
   sotto la barra quando si scorre. */
/* Lo sticky va sull'<header> (figlio diretto del body, alto quanto la pagina),
   non sulla barra: così resta agganciato in cima mentre scorri e il contenuto
   si sfoca sotto. Identico al comportamento della landing. */
body:not(.landing-page) > header:has(.premium-nav) {
    position: sticky;
    top: 0;
    z-index: 999;
    display: block;
    background: none;
    padding: 0;
    margin: 0;
    height: auto;
    overflow: visible;
}
.premium-nav {
    height: 80px;
    border-radius: 0;
    background: var(--bg-nav);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-nav);
    padding: 0 var(--side-margin);
    gap: 24px;
    font-family: 'Nunito', sans-serif;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.premium-nav .nav-item,
.premium-nav .nav-lang-selector,
.premium-nav .theme-toggle-btn{
    font-family: 'Nunito', sans-serif;
}

.premium-nav .logo-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-main);
    flex-shrink: 0;
}
.premium-nav .logo-name {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    font-family: 'Nunito', sans-serif;
}
.premium-nav .yoteka-logo-svg {
    width: 28px;
    height: 28px;
    color: var(--primary);
    transition: color 0.2s ease;
}

.premium-nav .nav-links {
    display: flex;
    align-items: center;
    gap: 25px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.premium-nav .nav-links > li {
    display: flex;
    align-items: center;
    margin: 0;
}

.premium-nav .nav-item {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    transition: color 0.25s ease;
}
.premium-nav .nav-item:hover { color: var(--text-main); }

.premium-nav .nav-chars-btn { height: auto; }
.premium-nav .nav-chars-dropdown {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    top: calc(100% - 20px);
    border-radius: 14px;
    padding: 6px;
    min-width: 190px;
    box-shadow: var(--card-shadow);
    overflow: visible;
}
.premium-nav .nav-chars-dropdown.open {
    display: block;
    animation: navDropdownIn 0.16s ease;
}

@keyframes navDropdownIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.premium-nav .nav-lang-selector {
    background: var(--bg-card);
    border: 1.4px solid var(--primary);
    color: var(--text-main);
    border-radius: 30px;
    padding: 6px 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.premium-nav .theme-toggle-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    font-family: inherit;
    padding: 0;
    transition: all 0.25s ease;
}
.premium-nav .theme-toggle-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.premium-nav .nav-warn-btn { cursor: default; }

/* I tre pulsanti azione restano vicini tra loro (gap ridotto rispetto ai link) */
.premium-nav .nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Pulsanti Accedi / Registrati (pagine pubbliche) — identici alla landing */
.premium-nav .btn-login-nav {
    background: transparent;
    border: 1.5px solid var(--primary);
    padding: 7px 22px;
    border-radius: 30px;
    color: var(--text-main) !important;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    transition: all 0.3s;
}
.premium-nav .btn-login-nav:hover { background: var(--btn-sub-hover); }
.premium-nav .btn-reg-nav {
    background: var(--primary);
    border: none;
    padding: 8px 24px;
    border-radius: 30px;
    color: #fff !important;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    transition: opacity 0.3s;
}
.premium-nav .btn-reg-nav:hover { opacity: 0.9; }

/* ── MOBILE: menu a tutta pagina (struttura come la vecchia navbar) ──
   Soglia a 900px e non 768: la navbar estesa (logo + 4 voci + lingua + 3
   comandi) ha bisogno di circa 860px, sotto i quali sbordava dallo schermo
   e la pagina scorreva in orizzontale. */
@media (max-width: 900px) {
    /* Il panino serve anche fra 769 e 900px, dove prima non compariva */
    .premium-nav .menu-toggle {
        display: flex;
    }

    .premium-nav {
        padding: 0 20px;
    }
    /* La barra mantiene l'effetto vetro (dal desktop). Lo togliamo SOLO mentre il
       menu è aperto: il backdrop-filter crea un containing block che intrappolerebbe
       l'overlay fixed dentro la navbar. A menu aperto l'overlay opaco copre la barra,
       quindi la perdita del vetro non si vede. */
    body.nav-open .premium-nav {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .premium-nav .menu-toggle .bar { background: var(--text-main); }

    .premium-nav .nav-links {
        position: fixed;
        inset: 0;
        background: var(--bg-page);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 26px;
        padding: 80px 20px;
        z-index: 9998;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    .premium-nav .nav-links.active {
        opacity: 1;
        pointer-events: all;
    }
    .premium-nav .nav-links > li { margin: 0; }
    .premium-nav .btn-login-nav,
    .premium-nav .btn-reg-nav { padding: 12px 34px; }
    .premium-nav .nav-lang-selector { padding: 10px 22px; }
    .premium-nav .nav-actions { gap: 16px; margin-top: 6px; }
    .premium-nav .theme-toggle-btn { width: 46px; height: 46px; }

    .premium-nav .logo-wrap { z-index: 9999; position: relative; }
    .premium-nav .menu-toggle { z-index: 9999; position: relative; }
}

/* ==========================================================================
   STILI PREMIUM PER LE LEZIONI DI GRAMMATICA (YOTEKA LESSON)
   ========================================================================== */

/* Azzeramento del doppio sfondo dell'header se contiene la navbar premium */
body.landing-page > header:has(.premium-nav) {
  background: none;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  height: auto;
}

/* Layout principale */
body.landing-page .lesson-main {
  margin: 40px var(--side-margin) 60px;
  position: relative;
  z-index: 2;
}

/* Banner / Testata della lezione */
body.landing-page .lesson-banner {
  background: transparent;
  height: auto;
  min-height: auto;
  padding: 50px 0 50px;
  display: flex;
  flex-direction: column;
  align-items: center;       /* Centrato! */
  justify-content: center;   /* Centrato! */
  text-align: center;        /* Centrato! */
  color: var(--text-main);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 40px;
  position: relative;
  box-sizing: border-box;
}

/* Alone luminoso soft centrato ed ingrandito dietro il titolo (glow) */
body.landing-page .lesson-banner::before {
  content: "";
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centrato! */
  width: 1600px;                      /* Ingrandito! */
  height: 500px;                     /* Ingrandito! */
  background: radial-gradient(circle, var(--glow-color-1) 0%, rgba(15, 16, 19, 0) 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
}

body.landing-page #lesson-title {
  font-family: 'Outfit', sans-serif;
  font-size: 4rem;
  font-weight: 600;
  text-align: center; /* Centrato! */
  line-height: 1.2;
  margin-top: 0;
  color: var(--text-main);
  letter-spacing: -0.5px;
  max-width: 800px;
}

body.landing-page .lesson-badge-level {
  background: var(--primary);
  color: #FFFFFF !important;
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  line-height: 1;
}

body.landing-page .lesson-badge-category {
  border: 1px solid var(--primary);
  background: var(--tag-bg);
  color: var(--accent-text);
  font-family: 'Nunito', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  line-height: 1.2;
}

/* Griglia e Contenuto */
body.landing-page .lesson-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 50px;
}

body.landing-page .content-center {
  font-family: 'Nunito', sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-muted);
}

/* Nuovo stile per il titolo H2 (Bordo sinistro e nessun bordo inferiore) */
body.landing-page .content-center h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 60px 0 20px;
  padding-left: 14px;
  border-left: 4px solid var(--primary);
  border-bottom: none;
  line-height: 1.25;
  letter-spacing: -0.3px;
  text-transform: none;
}

body.landing-page .content-center h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 40px 0 12px;
  text-transform: none;
}

body.landing-page .content-center p {
  margin-bottom: 20px;
  color: var(--text-muted);
}

body.landing-page .content-center strong {
  color: var(--text-main);
  font-weight: 700;
}

/* Liste ed Elementi Note */
body.landing-page .content-center ul {
  margin-bottom: 20px;
}

body.landing-page .content-center ul li:not(:only-child) {
  margin-left: 20px;
  margin-bottom: 12px;
  color: var(--text-muted);
  list-style: none;
  position: relative;
  padding-left: 5px;
}

body.landing-page .content-center ul li:not(:only-child)::before {
  content: "•";
  color: var(--primary);
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  font-size: 1.2rem;
  vertical-align: middle;
}

/* Box info / Nota (li:only-child) */
body.landing-page .content-center ul li:only-child {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--primary);
  padding: 20px 24px;
  margin: 25px 0;
  border-radius: 8px;
  color: var(--text-main);
  line-height: 1.7;
}

body.landing-page .content-center ul li:only-child::before {
  content: "\f0eb";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 10px;
  color: var(--accent-text);
  font-size: 1.1rem;
  font-style: normal;
}

/* Nota "Attenzione" (pagine lezione): il primary (bordo + icona) diventa giallo */
body.landing-page .content-center ul li:only-child.nota-attenzione {
  border-left-color: var(--warn);
}
body.landing-page .content-center ul li:only-child.nota-attenzione::before {
  color: var(--warn);
}

/* Box Esempi pratici (Nuovo stile minimalista ed ordinato a bordo completo) */
body.landing-page .example-box {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 8px 24px;
  margin: 0px 0 20px;
  border-radius: 10px;
  box-shadow: var(--card-shadow);
}

body.landing-page .example-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.landing-page .example-box li {
  padding: 12px 0;
  margin: 0 !important;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main) !important;
  font-size: 1rem;
  list-style: none !important;
}

body.landing-page .example-box li::before {
  display: none !important;
}

body.landing-page .example-box li:last-child {
  border-bottom: none;
}

/* Box della Struttura Grammaticale (.example) — "formula in evidenza":
   barra colorata a sinistra, etichetta piccola, formula grande su fascia
   tinta col primario, significato sotto. In primo piano per tipografia. */
/* Un solo rettangolo tinto col colore della lingua: dentro la formula e,
   sotto, il significato. Nessun contenitore esterno. */
body.landing-page .example {
  position: relative;
  display: block;
  border: 1px solid rgba(var(--primary-rgb));
  border-radius: 12px;
  padding: 25px 22px;
  margin: 25px 0 15px;
  text-align: center;
  box-shadow: none;
}

/* Nessuna etichetta: il contenuto del box parla da sé */
body.landing-page .example::before {
  content: none;
}

/* Il vecchio badge sospeso non serve più */
body.landing-page .example::after {
  content: none;
}

/* La formula: protagonista */
body.landing-page .example .structure {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text-main) !important;
  text-align: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 8px;
}

body.landing-page .example .structure strong {
  color: var(--accent-text) !important;
}

/* Il significato, sotto la formula, nello stesso rettangolo */
body.landing-page .example .meaning {
  font-size: 0.98rem;
  color: var(--text-muted);
  font-weight: 400;
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

/* ── Carosello delle strutture alternative (stesso box) ── */
body.landing-page .example .ex-slide {
  display: none;
}

body.landing-page .example .ex-slide.is-active {
  display: block;
  animation: ex-slide-in 0.25s ease;
}

@keyframes ex-slide-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

body.landing-page .example .ex-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

body.landing-page .example .ex-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;  background: transparent;
  color: var(--text-main);
  font-size: 1.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px 7px;
  font-family: 'Outfit', sans-serif;
  transition: background 0.2s ease, border-color 0.2s ease;
    border: 1px solid var(--border-color);

}

body.landing-page .example .ex-arrow:hover {
  color: rgba(var(--primary-rgb));
  border-color: var(--primary-rgb);
}

body.landing-page .example .ex-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

body.landing-page .example .ex-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

body.landing-page .example .ex-dot.is-active {
  width: 18px;
  border-radius: 4px;
  background: var(--text-main);
}

@media (prefers-reduced-motion: reduce) {
  body.landing-page .example .ex-slide.is-active { animation: none; }
}

/* Sidebar Lezione */
body.landing-page .sidebar {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--card-shadow);
  position: sticky;
  top: 100px;
  height: auto;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  box-sizing: border-box;
}

body.landing-page .sidebar-box {
  padding: 20px 0;
  border-top: 1px solid var(--border-color);
}

body.landing-page .sidebar-box:first-child {
  border-top: none;
  padding-top: 0;
}

body.landing-page .sidebar-box h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-main);
  text-transform:capitalize;
  border-bottom: none;
  margin-bottom: 14px;
  display: block;
}

body.landing-page .sidebar-box p {
  color: var(--text-muted);
  margin-bottom: 8px;
}

body.landing-page .sidebar-box p strong {
  color: var(--text-main);
}

/* Indice dei Contenuti (TOC) */
body.landing-page .toc-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.landing-page .toc-list li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.landing-page .toc-list li::before {
  display: none !important;
}

body.landing-page .toc-list a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 12px;
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
  display: block;
}

body.landing-page .toc-list a:hover {
  color: var(--primary);
  border-left-color: var(--primary);
  background-color: var(--tag-bg);
  border-radius: 0 4px 4px 0;
}

/* Vedi anche (Correlati) */
body.landing-page .related-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.landing-page .related-link {
  background-color: var(--bg-page);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--primary);
  color: var(--text-main);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  transition: all 0.2s ease;
  margin-bottom: 0;
}

body.landing-page .related-link:hover {
  background-color: var(--primary);
  color: #FFFFFF !important;
  transform: translateX(4px);
}

/* Floating Back Button */
body.landing-page .floating-back-btn {
  background-color: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
}

body.landing-page .floating-back-btn:hover {
  background-color: var(--primary);
  color: #FFFFFF !important;
  border-color: var(--primary);
  transform: scale(1.05);
}

/* Responsive Lezione */
@media (max-width: 992px) {
  body.landing-page .lesson-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  body.landing-page .sidebar {
    position: static;
    max-height: none;
    height: auto;
  }
  
  body.landing-page .lesson-main {
    margin: 30px 5% 50px;
  }
}

@media (max-width: 768px) {
  body.landing-page #lesson-title {
    font-size: 2.2rem;
  }

  body.landing-page .lesson-banner {
    padding: 30px 0 15px;
  }
  
  body.landing-page .lesson-banner::before {
    width: 300px;
    height: 1000px;
  }
  
  body.landing-page .example {
    padding: 16px 18px;
  }

  body.landing-page .example .structure {
    max-width: 100%;
    font-size: 1.25rem;
  }
  
  body.landing-page .content-center h2 {
    margin: 50px 0 20px;
  }
  body.landing-page .content-center h3{
    font-size: 1.15rem;
  }
  body.landing-page .example .meaning{
    line-height: 1.4;
  }
}

@media (max-width: 576px) {
  
  body.landing-page .lesson-main {
    margin: 20px 4% 40px;
  }
  
  body.landing-page .example {
    padding: 14px 16px;
    margin: 15px 0;
  }

  body.landing-page .example .structure {
    font-size: 1.12rem;
  }
  
  body.landing-page .example-box {
    padding: 6px 16px;
  }
  
  body.landing-page .floating-back-btn {
    width: 44px;
    height: 44px;
    bottom: 20px;
    left: 15px;
  }
}

/* ==========================================================================
   STILI PREMIUM PER L'INDICE DELLE LEZIONI (YOTEKA GRAMMAR INDEX)
   ========================================================================== */

/* Spaziature principali — l'indice grammatica non ha margine in alto:
   la barra sticky si aggancia direttamente sotto la navbar. */
/* --gi-side è il margine laterale dell'indice: lo usano SIA il contenitore SIA
   la barra sticky (con margini negativi) per uscire dai lati. Devono combaciare
   esattamente, altrimenti compare uno scorrimento orizzontale di pochi pixel.
   Per questo è un valore in px, mai una percentuale. */
body.landing-page .lesson-main:has(#grammar-container) {
  --gi-side: var(--side-margin);
  margin-top: 0;
  margin-left: var(--gi-side);
  margin-right: var(--gi-side);
}

@media (max-width: 992px) {
  body.landing-page .lesson-main:has(#grammar-container) { --gi-side: 40px; }
}

@media (max-width: 768px) {
  body.landing-page .lesson-main:has(#grammar-container) { --gi-side: 20px; }
}

@media (max-width: 600px) {
  body.landing-page .lesson-main:has(#grammar-container) { --gi-side: 16px; }
}

/* Header di ricerca e filtri */
body.landing-page .gi-header {
  display: flex;
  align-items: center;
  gap: 20px;
  /* Verticale simmetrico; orizzontale = allinea alle card.
     I margini negativi la fanno uscire dai lati del contenitore così lo
     sfondo copre tutta la larghezza dello schermo. */
  padding: 20px var(--gi-side);
  margin: 0 calc(-1 * var(--gi-side));
  border-bottom: 1px solid var(--border-nav);
  box-sizing: border-box;
  position: sticky;                /* resta fissa in alto durante lo scroll */
  top: 80px;                       /* si aggancia subito sotto la navbar (h 80px) */
  z-index: 50;
  /* Stesso effetto vetrato della navbar */
  background: var(--bg-nav);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

body.landing-page .gi-header-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-transform: none;
  color: var(--text-main);
  line-height: 1.2;
}

/* Parola evidenziata nel titolo, come in "Lista Radicali" */
body.landing-page .gi-header-title .highlight-h1 {
  color: var(--primary);
  font-weight: inherit;
}

/* Barra di ricerca premium */
body.landing-page .gi-search {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 12px 20px;
  border-radius: 30px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body.landing-page .gi-search::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

body.landing-page .gi-search:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

/* Pulsante filtri */
body.landing-page .gi-filtri-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 12px 24px;
  border-radius: 30px;
  font-family: 'Nunito', sans-serif;
  text-transform: none;
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.25s ease;
}

body.landing-page .gi-filtri-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

body.landing-page .gi-filtri-btn i {
  margin-right: 6px;
  font-size: 0.85rem;
}

/* Popup filtri */
body.landing-page .gi-filter-popup {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3), var(--card-shadow);
  top: calc(100% + 12px);
  min-width: 280px;
}

body.landing-page .gi-filter-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}

/* Chip per la selezione del livello e dello stato */
body.landing-page .gi-chip span {
  font-family: 'Nunito', sans-serif;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  opacity: 0.8;
  transition: all 0.2s ease;
}

body.landing-page .gi-chip span:hover {
  color: var(--text-main);
  border-color: var(--primary);
}

body.landing-page .gi-chip input:checked + span {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #FFFFFF !important;
  opacity: 1;
}

body.landing-page .gi-filter-reset {
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-text);
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

body.landing-page .gi-filter-reset:hover {
  background: rgba(var(--primary-rgb), 0.08);
}

body.landing-page .gi-filter-actions {
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
}

/* Intestazione di livello (es: "N5 · JLPT") — stile editoriale con linea sotto */
body.landing-page .gi-level-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  position: relative;
  margin-top: 30px;
  margin-bottom: 20px;
  border-left: 3px solid var(--primary);         /* spazio in basso per la linea */
  font-family: 'Outfit', sans-serif;
  line-height: 1;
  /* annulla la vecchia pillola piena della regola base */
  background: transparent;
  border-radius: 0;
  text-transform: none;
}

/* Livello e sigla con un unico stile uniforme */
body.landing-page .gi-level-code,
body.landing-page .gi-level-label {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-main);
  flex-shrink: 0;
}

/* Titoli delle categorie */
body.landing-page .gi-cat-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 16px;
  letter-spacing: -0.3px;
}

body.landing-page .gi-level-section {
  margin-bottom: 20px;
}

body.landing-page .gi-cat-section {
  margin-bottom: 40px;
}

/* Griglia delle card lezioni */
body.landing-page .gi-lesson-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Card delle lezioni — layout minimale: titolo + rango */
body.landing-page .gi-lesson-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: var(--card-shadow);
  transition: border-color 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
              transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
              opacity 0.25s ease;
  min-height: 0;                 /* spazio tra titolo e badge rango */
  justify-content: space-between;
}

body.landing-page .gi-lesson-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.15), var(--card-shadow);
}

body.landing-page .gi-lesson-card.gi-card--read {
  opacity: 0.82;
  border-color: var(--border-color);
}

body.landing-page .gi-lesson-card.gi-card--read .gi-card-title {
  color: var(--text-muted);
}

/* Checkbox circolare per segnare come letto */
body.landing-page .gi-card-read {
  border-radius: 50%;
  border: 2px solid var(--border-color);
  background: transparent;
  color: transparent;
  width: 22px;
  height: 22px;
  top: 20px;
  right: 20px;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body.landing-page .gi-card-read:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
}

body.landing-page .gi-card-read.is-read {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
}

body.landing-page .gi-card-read svg {
  width: 11px;
  height: 11px;
  stroke-width: 4px; /* Rende la spunta più visibile */
}

/* Titolo della card — protagonista, va a capo fino a 2 righe (niente troncamento a 1) */
body.landing-page .gi-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 5px;
  padding-right: 28px;
  line-height: 1.3;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Sottotitolo della card — fino a 3 righe */
body.landing-page .gi-card-subtitle {
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 10px;
}

/* Badge rango della lezione — stessa pillola arrotondata della sessione */
body.landing-page .gi-lesson-card .srs-rank-badge {
  align-self: flex-start;
  margin: 0;
  border-radius: 30px;
  padding: 4px 15px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  font-size: 0.8rem;
  margin-bottom: 10px;
}

/* Divisore tra sottotitolo e badge */
body.landing-page .gi-card-divider {
  width: 100%;
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 0;
}

/* Due caratteristiche sotto il badge: prossima revisione + recuperi */
body.landing-page .gi-card-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 15px 0 0px;
}

body.landing-page .gi-card-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.82rem;
  color: var(--text-muted);
}

body.landing-page .gi-card-stat i {
  width: 14px;
  text-align: center;
  color: var(--text-main);
  font-size: 0.8rem;
  flex-shrink: 0;
}

body.landing-page .gi-card-stat .gi-stat-label {
  flex: 1;
}

body.landing-page .gi-card-stat .gi-stat-val {
  font-weight: 700;
  color: var(--text-main);
}

/* Responsive Index */
@media (max-width: 1200px) {
  body.landing-page .gi-lesson-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  body.landing-page .gi-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px var(--gi-side);
    top: 80px;                     /* combacia con l'altezza reale della navbar mobile */
  }
  
  body.landing-page .gi-header-title {
    font-size: 1.5rem;
    text-align: center;
  }
  
  body.landing-page .gi-search {
    width: 100%;
    font-size: 0.9rem;
    padding: 10px 18px;
  }
  
  body.landing-page .gi-filtri-wrapper {
    width: 100%;
  }
  
  body.landing-page .gi-filtri-btn {
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    font-size: 0.9rem;
  }
  
  body.landing-page .gi-filter-popup {
    left: 0;
    width: 100%;
    box-sizing: border-box;
  }
  
  body.landing-page .gi-level-title {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  
  body.landing-page .gi-cat-title {
    font-size: 1.3rem;
  }
}

@media (max-width: 600px) {
  body.landing-page .gi-lesson-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body.landing-page .gi-lesson-card {
    min-height: auto;
    padding: 20px;
  }

  /* Barra sticky più compatta: titolo su una riga, ricerca + Filtri sulla riga sotto */
  body.landing-page .gi-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px var(--gi-side);
  }

  body.landing-page .gi-header-title {
    flex-basis: 100%;
    font-size: 1.25rem;
    text-align: left;
  }

  body.landing-page .gi-search {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  body.landing-page .gi-filtri-wrapper {
    width: auto;
    flex-shrink: 0;
  }

  body.landing-page .gi-filtri-btn {
    width: auto;
    padding: 10px 16px;
  }

  /* Popup filtri: ancorato al bordo destro, largo al massimo quanto lo schermo */
  body.landing-page .gi-filter-popup {
    left: auto;
    right: 0;
    width: min(280px, calc(100vw - 32px));
    box-sizing: border-box;
  }

  /* Tag livello e titoli un filo più piccoli sul telefono */
  body.landing-page .gi-level-code,
  body.landing-page .gi-level-label {
    font-size: 1.8rem;
  }

  body.landing-page .gi-card-title {
    font-size: 1.2rem;
  }

  body.landing-page .gi-cat-title {
    font-size: 1.2rem;
  }
}

/* --- Impostazioni: ordine dei tipi nelle sessioni --- */
.order-seq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.order-seq-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.order-seq-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}
.order-seq-name {
    flex: 1;
    color: var(--text-main);
    font-weight: 600;
}
.order-seq-btns { display: flex; gap: 4px; }
.order-seq-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.15s ease;
}
.order-seq-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }

/* ==========================================================================
   GRAMMATICA — ESERCIZI IN SESSIONE
   Cinque tipi di esercizio dentro session.html. Lo scheletro HTML è fisso
   nella pagina, il JavaScript (js/grammar.js) lo riempie e mostra solo le
   parti che servono al tipo corrente.

   DOVE SI CAMBIANO LE DIMENSIONI DEL TESTO: qui sotto, una regola per elemento.
   In fondo alla sezione ci sono due blocchi che le RIPETONO più piccole, per
   finestre strette (sotto 768px di larghezza) e basse (sotto 660px di altezza).
   Se una modifica non ha effetto, è uno di quei due che sta vincendo.
   ========================================================================== */

/* Area utile: quella fra la top bar e la toolbar. Se il contenuto la supera
   scorre al suo interno invece di finire sotto la toolbar. */
.srs-card-container {
    max-height: calc(100vh - 180px);
    max-height: calc(100dvh - 180px);   /* vedi nota su body.srs-page */
}

#gr-exercise {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

#gr-exercise::-webkit-scrollbar       { width: 6px }
#gr-exercise::-webkit-scrollbar-track { background: transparent }
#gr-exercise::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px }

.gr-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1180px;
    padding: 0 5px;
    /* Riempie l'area utile: dentro, il corpo dell'esercizio si prende tutto lo
       spazio che avanza e ci si centra, mentre il riscontro resta in fondo. */
    flex: 1 1 auto;
    min-height: 0;
}

/* Corpo dell'esercizio: occupa lo spazio libero e vi si centra. È il pezzo
   che permette di avere insieme le due cose che servono — esercizio al centro
   e spiegazione in fondo — senza che l'una escluda l'altra. */
.gr-corpo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Cresce per riempire l'area, ma non si stringe MAI sotto il proprio
       contenuto: se lo facesse, l'esito uscirebbe dal riquadro e finirebbe
       sopra la spiegazione. Se proprio non ci sta, è l'area a scorrere. */
    flex: 1 0 auto;
}

/* I margini di serie non contano: le distanze le decidono i blocchi per
   esercizio, in fondo a questa sezione. */
.gr-corpo > *,
.gr-inner > * {
    margin: 0;
}

/* ── Badge sopra l'esercizio ─────────────────────────────────────────────── */

.gr-badge-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Stile suo, diverso dai tre badge già usati nella sessione: tinta tenue del
   colore della lingua, testo nello stesso colore, nessun bordo. */
.gr-badge-grammatica {
    background: rgba(var(--primary-rgb), 0.16);
    color: var(--primary);
    border: none;
    font-family: 'Outfit', sans-serif;
}

.gr-badge-recupero {
    background: transparent;
    border: 1px dashed var(--secondary);
    color: var(--secondary);
    font-family: 'Outfit', sans-serif;
}

/* ── Frase con il buco ───────────────────────────────────────────────────── */

.gr-sentence {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    font-family: var(--font-cjk);
    font-size: 1.5rem;
    line-height: 1.6;
    text-align: center;
    color: var(--text-main);
}

.gr-blank {
    color: var(--primary);
    font-weight: 600;
}

/* Parola base da coniugare e significato, alla stessa dimensione della frase */
.gr-suggest {
    margin: 0 5px;
    color: var(--primary);
    font-family: "Montserrat", sans-serif;
    font-size: inherit;
    font-weight: 400;
    white-space: nowrap;
}

.gr-input {
    display: inline-block;
    width: 50px;
    min-width: 50px;
    max-width: 280px;
    padding: 0 4px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--text-main);
    outline: none;
    color: var(--text-main);
    font-family: var(--font-cjk);
    font-size: inherit;
    line-height: inherit;
    text-align: center;
    vertical-align: baseline;
    transition: border-color .2s ease, color .2s ease;
}

.gr-input:focus {
    border-bottom-color: var(--primary);
}

.gr-translation {
    width: 100%;
    color: var(--text-main);
    opacity: 0.6;
    font-size: 1rem;
    font-weight: 300;
    text-align: center;
    margin-bottom: 5px;
}

/* ── Opzioni: scelta multipla e vero/falso ───────────────────────────────── */

.gr-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    max-width: 620px;
    margin-bottom: 10px;
}

.gr-opt {
    padding: 14px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-main);
    font-family: var(--font-cjk);
    font-size: 1.1rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}

.gr-opt:hover:not(:disabled) { border-color: var(--primary) }
.gr-opt.selected             { border-color: var(--primary); color: var(--primary) }
.gr-opt.correct              { border-color: var(--ok); color: var(--ok) }
.gr-opt.wrong                { border-color: var(--ko); color: var(--ko) }
.gr-opt:disabled             { cursor: default }

/* Dopo la risposta le opzioni che non c'entrano si spengono: restano accese
   solo quella scelta e quella giusta. */
.gr-opt.dimmed { opacity: .28 }

/* Vero/falso: pulsanti stretti e tondi, testo italiano quindi font di testo.
   Sotto i 768px vanno uno per riga (regola in fondo alla sezione), quindi
   questa larghezza è anche quella del singolo pulsante: abbassala per
   stringerli. */
.gr-options.gr-options-vf {
    max-width: 240px;
    gap: 14px;
}

.gr-options-vf .gr-opt {
    padding: 8px 10px;
    border-radius: 50px;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
}

/* Devono stare dopo .gr-opt.selected, altrimenti quella li vince */
.gr-opt-true:hover:not(:disabled),
.gr-opt-true.selected  { border-color: var(--ok); color: var(--ok) }
.gr-opt-false:hover:not(:disabled),
.gr-opt-false.selected { border-color: var(--ko); color: var(--ko) }

/* ── Riordino delle parole ───────────────────────────────────────────────── */

/* La riga di composizione è il riquadro dove si posano le parole: mentre
   componi sono riquadri anche loro, a risposta data diventano una frase. */
.gr-slot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 550px;
    min-height: 40px;
    margin-bottom: 5px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

/* Il riquadro serve a dire "posa qui": appena c'è dentro qualcosa il posto è
   riconoscibile da solo e il bordo se ne va, lasciando la frase. Al suo posto
   si accende il fondo, che resta finché la frase non è completa: è il segno
   che manca ancora qualcosa. */
.gr-slot:not(:empty) { border-color: transparent }

.gr-slot:not(:empty):not(.full):not(.frase) {
    background: rgba(var(--primary-rgb), 0.06);
}

/* Solo mentre trascini si accende un appoggio, per capire dove cade la parola */
.gr-slot.dragover { background: rgba(var(--primary-rgb), 0.06); border-radius: 10px;}

.gr-slot:empty::after {
    content: "trascina o clicca le parole";
    color: var(--text-main);
    font-size: .8rem;
    opacity: .8;
}

/* A esercizio chiuso il clic serve solo a passare fra la propria frase e
   quella corretta, quindi deve arrivare alla riga e non alla singola parola. */
.gr-slot.locked .gr-token { pointer-events: none }
.gr-slot.toggle           { cursor: pointer }

/* Frase sbagliata: si clicca per vedere quella giusta, e lo si capisce dallo
   stesso segno che porta la soluzione dentro la frase (.gr-fill-toggle). */
.gr-slot.toggle .gr-parola { border-bottom: 2px dotted currentColor }
.gr-slot.toggle:hover      { opacity: .75 }

/* A risposta data i riquadri lasciano il posto alla frase: le parole si
   accostano e restano solo il testo e il colore. */
.gr-slot.frase {
    gap: 0;
    border-color: transparent;
}

.gr-parola {
    font-family: var(--font-cjk);
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--text-main);
}

.gr-parola.correct { color: var(--ok) }
.gr-parola.wrong   { color: var(--ko) }

.gr-pool {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Lo spazio che il pool tiene libero è quello che la riga di composizione
       si prenderà: le parole restano della loro altezza invece di allungarsi
       per riempirlo. */
    align-items: flex-start;
    align-content: flex-start;
    gap: 8px;
    width: 100%;
    max-width: 550px;
}

.gr-token {
    padding: 8px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
    font-family: var(--font-cjk);
    font-size: 1.15rem;
    cursor: pointer;
    /* Col dito la parola si trascina: il browser non deve interpretare il
       movimento come uno scorrimento della pagina. */
    touch-action: none;
    transition: border-color .2s ease, color .2s ease, opacity .2s ease;
}

.gr-token:hover:not(:disabled) { border-color: var(--primary); color: var(--primary) }
.gr-token.dragging             { opacity: .35 }
.gr-token.correct              { border-color: var(--ok); color: var(--ok) }
.gr-token.wrong                { border-color: var(--ko); color: var(--ko) }
.gr-slot .gr-token             { border-color: var(--primary); color: var(--primary) }

/* Segnaposto che indica dove cadrà la parola trascinata */
.gr-drop-marker {
    width: 3px;
    align-self: stretch;
    background: var(--primary);
    border-radius: 2px;
}

/* ── Teoria: domanda e risposta ──────────────────────────────────────────── */

.gr-question {
    width: 100%;
    max-width: 840px;
    color: var(--text-main);
    font-family: 'Nunito', sans-serif;
    font-size: 1.5rem;
    line-height: 1.5;
    text-align: center;
}

/* Stesso riquadro della spiegazione */
.gr-answer {
    width: 100%;
    max-width: 840px;
    padding: 15px 25px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-main);
    font-family: 'Nunito', sans-serif;
    font-size: 1.2rem;
    line-height: 1.5;
    text-align: center;
}

/* ── Riscontro dentro l'esercizio ────────────────────────────────────────── */

/* La soluzione inserita nella frase prende il colore dell'esito: verde se la
   risposta era giusta, rosso se sbagliata. */
.gr-fill.correct { color: var(--ok) }
.gr-fill.wrong   { color: var(--ko) }

/* Risposta sbagliata: si clicca per vedere quella corretta e tornare indietro */
.gr-fill-toggle {
    border-bottom: 2px dotted currentColor;
    cursor: pointer;
}

.gr-fill-toggle:hover { opacity: .75 }

.gr-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 620px;
}

.gr-explanation {
    width: 100%;
    padding: 15px 25px;
    background-color: var(--bg-card);
    border-left: 3px solid var(--primary);
    border-radius: 5px 10px 10px 5px;
    color: var(--text-main);
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    line-height: 1.55;
    text-align: center;
}

.gr-accepted {
    Font-family: 'Nunito', sans-serif;
    font-size: .82rem;
    text-align: center;
    opacity: 0.8;
}

/* Esito a parole: compare sempre, ed è l'ultima cosa in fondo */
/* ── Comparsa senza sobbalzi ───────────────────────────────────────────────
   Esito e riquadro della spiegazione occupano il loro spazio fin da subito:
   quando compaiono cambia solo la visibilità, così la parte centrale resta
   ferma invece di ricentrarsi. Se la spiegazione è più lunga dello spazio
   prenotato, da lì in poi l'esercizio si sposta — ma solo per la parte in
   eccesso. La dissolvenza rende l'apparizione meno brusca. */
.gr-nascosto {
    visibility: hidden;
    opacity: 0;
}

.gr-verdict,
.gr-note {
    transition: opacity .28s ease;
}

@media (prefers-reduced-motion: reduce) {
    .gr-verdict,
    .gr-note { transition: none }
}

/* Spazio prenotato per la spiegazione quando resta nel flusso: serve solo
   quando l'area è troppo bassa per contenerla senza spostare l'esercizio. */
.gr-note {
    min-height: 104px;
    justify-content: flex-end;
}

/* Quando c'è spazio a sufficienza il riscontro esce dal flusso e si appoggia
   in fondo: così non toglie altezza al corpo e l'esercizio resta esattamente
   al centro dell'area. È `js/grammar.js` a decidere quale dei due casi vale,
   perché dipende da quanto sono alti contenuto e spiegazione — una cosa che
   il CSS da solo non può sapere. */
#gr-exercise { position: relative }

.gr-note.flottante {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    margin: 0 auto;
    min-height: 0;
}

/* Sta dentro il corpo dell'esercizio, subito sotto la frase: il distacco
   sopra lo stacca dalla risposta. */
.gr-verdict {
    display: flex;
    align-items: center;
    gap: .5em;
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
    margin-top: 5px;
    /* Da vuoto non avrebbe altezza e comparendo sposterebbe il contenuto:
       la sua riga resta prenotata comunque. */
    min-height: 1.5em;
}

.gr-verdict-icon    { font-size: 1.15em; line-height: 1 }

/* ── Spiegazione in popup (scelta multipla) ────────────────────────────────
   Con quattro opzioni l'area è già piena: il riquadro nel flusso costringeva
   a scorrere. Qui la spiegazione si apre da un richiamo accanto all'esito. */
/* Nella scelta multipla la spiegazione vive nel popup: il riquadro in fondo
   non serve e non deve nemmeno prenotare spazio, altrimenti l'area continua a
   dover scorrere proprio nel caso che volevamo alleggerire. */
.gr-ex-mc .gr-note { display: none }

.gr-perche {
    margin-left: .6em;
    padding: 5px 18px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50px;
    color: var(--text-main);
    font-family: 'Nunito', sans-serif;
    letter-spacing: 0;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
}

.gr-perche:hover {
    opacity: 1;
    border-color: var(--primary);
    color: var(--primary);
}

.gr-modal-box {
    width: min(720px, 100vw);
}

.gr-modal-testo {
    margin: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-main);
    text-align: center;
}
.gr-verdict.correct { color: var(--ok) }
.gr-verdict.wrong   { color: var(--ko) }

/* ==========================================================================
   GRAMMATICA — DISTANZE, UN BLOCCO PER ESERCIZIO
   Ogni riga è "elemento { distanza sotto }". Cambiare un numero tocca solo
   quell'esercizio. L'ordine è quello in cui gli elementi appaiono a schermo.
   ========================================================================== */

/* ── Scelta multipla ─────────────────────────────────────────────────────── */
.gr-ex-mc .gr-badge-row   { margin-bottom: 20px }
.gr-ex-mc .gr-sentence    { margin-bottom: 4px }
.gr-ex-mc .gr-translation { margin-bottom: 20px }

/* ── Completamento ───────────────────────────────────────────────────────── */
.gr-ex-type .gr-badge-row   { margin-bottom: 20px }
.gr-ex-type .gr-sentence    { margin-bottom: 0px }
.gr-ex-type .gr-translation { margin-bottom: 8px; margin-top: 2px; }

/* ── Riordino ────────────────────────────────────────────────────────────── */
.gr-ex-reorder .gr-badge-row { margin-bottom: 20px }
.gr-ex-reorder .gr-pool      { margin-bottom: 10px; margin-top: 5px; }

/* ── Vero o falso ────────────────────────────────────────────────────────── */
.gr-ex-vf .gr-badge-row { margin-bottom: 20px }
.gr-ex-vf .gr-question  { margin-bottom: 10px }

/* ── Domanda aperta ──────────────────────────────────────────────────────── */
.gr-ex-card .gr-badge-row { margin-bottom: 25px }
.gr-ex-card .gr-question  { margin-bottom: 10px }

/* ── Riscontro, uguale per tutti ─────────────────────────────────────────── */
.gr-note .gr-accepted    { margin-bottom: 10px }

/* ── Schermi stretti: opzioni in colonna e distanze ridotte ──────────────── */
@media (max-width: 768px) {
    /* Su schermo stretto il wrapper della sessione ha un padding di 85+75 = 160
       invece dei 180 del desktop. Se il limite restasse a 180 avanzerebbero
       20px, che finirebbero tutti in basso (il wrapper allinea in alto) e
       l'esercizio risulterebbe più in alto del centro. */
    .srs-card-container { max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px) }

    .gr-options { grid-template-columns: 1fr }

    /* In colonna singola le quattro opzioni occupano il doppio dell'altezza:
       si stringono le imbottiture, non i corpi del testo. */
    .gr-opt { padding: 10px 12px }

    /* La scelta multipla è l'unico esercizio che con molte opzioni può dover
       scorrere: qui si riserva dello spazio in cima e in fondo, così il testo
       non tocca mai le barre. Su entrambi i lati per non spostare il centro.
       Gli altri tipi non ne hanno bisogno e restano senza.
       Tenuto stretto: ogni pixel qui è tolto due volte all'esercizio, e con la
       barra degli indirizzi aperta l'area scende sotto i 550px. */
    #gr-exercise.gr-ex-mc { padding: 14px 0 }

    /* Vero/falso: due sole opzioni corte, stanno affiancate anche qui. In
       colonna occuperebbero il doppio dell'altezza per niente. */
    .gr-options.gr-options-vf { grid-template-columns: 1fr 1fr; max-width: 240px }

    /* Qui la spiegazione va a capo più volte: lo spazio prenotato è quello
       della spiegazione più lunga misurata, così la stima fatta al disegno
       resta valida anche a risposta data. */
    .gr-note { min-height: 190px }

    .gr-ex-mc .gr-badge-row   { margin-bottom: 14px }
    .gr-ex-mc .gr-translation { margin-bottom: 14px }

    .gr-ex-type .gr-badge-row { margin-bottom: 18px }

    .gr-ex-reorder .gr-badge-row { margin-bottom: 25px }
    .gr-ex-reorder .gr-pool      { margin-bottom: 16px }

    .gr-ex-vf .gr-badge-row { margin-bottom: 18px }
    .gr-ex-vf .gr-question  { margin-bottom: 10px }

    /* Le spiegazioni del vero/falso sono corte (misurata la più lunga: 95px):
       prenotare i 190px degli altri tipi vorrebbe dire non farci più stare
       l'esercizio, che finirebbe schiacciato in alto invece che al centro. */
    .gr-ex-vf .gr-note { min-height: 140px }

    .gr-ex-card .gr-badge-row { margin-bottom: 25px }
    .gr-ex-card .gr-question  { margin-bottom: 10px; font-size: 1.4rem; }

    .gr-note .gr-explanation { margin-bottom: 10px; padding: 15px }
    .gr-note .gr-accepted    { margin-bottom: 10px }
    .gr-answer               { padding: 15px; font-size: 1.2rem; line-height: 1.4; }

    .gr-sentence {font-size: 1.3rem;}
    .gr-question {font-size: 1.3rem;}
}

/* ── Finestre basse: testo più compatto, così il contenuto entra ───────────
   ATTENZIONE: qui le dimensioni del testo sono RIPETUTE. Se cambi un corpo qui
   sopra e non vedi effetto, è perché la finestra è più bassa di 660px e vince
   questo blocco: allora il valore va cambiato in tutti e due i posti.
   La soglia è 659px perché l'esercizio più alto (scelta multipla sbagliata)
   occupa 480px e l'area utile è "altezza finestra − 180": sopra i 660px ci sta
   con i corpi normali, sotto no. */
@media (max-height: 659px) {
    .gr-badge-grammatica,
    .gr-badge-recupero { padding: 4px 14px;}
    .gr-opt            { padding: 7px 16px;}
    .gr-token          { padding: 6px 12px;}
    .gr-slot           { min-height: 46px;}
}

/* ==========================================================================
   GRAMMATICA — AGGIUNTA DELLA LEZIONE ALLO STUDIO
   Riquadro "Info Lezione" nella barra laterale di lesson.html.
   ========================================================================== */

.lesson-study-box {
    margin-top: 14px;
}

.lesson-study-btn {
    width: 100%;
    padding: 10px 16px;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 8px;
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.lesson-study-btn:hover {
    opacity: .85;
}

.lesson-study-stato {
    margin: 0 0 10px;
    font-size: .9rem;
    color: var(--text-main);
}

.lesson-study-rimuovi {
    width: 100%;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
    font-family: 'Nunito', sans-serif;
    font-size: .85rem;
    cursor: pointer;
    opacity: .7;
    transition: var(--transition);
}

.lesson-study-rimuovi:hover {
    opacity: 1;
    border-color: var(--primary);
    color: var(--primary);
}

.lesson-study-nota {
    margin: 0;
    font-size: .85rem;
    color: var(--text-main);
    opacity: .6;
}

/* ==========================================================================
   HUB — REBRAND (nuova grafica)
   Copertina a tutta larghezza che passa anche dietro la navbar, schede in
   stile nuovo e grafici ridisegnati. Sta in fondo al foglio per vincere sulle
   regole storiche a pari specificità.
   ========================================================================== */

body:has(.hub-dashboard-wrapper) {
  font-family: 'Nunito', sans-serif;
}

body:has(.hub-dashboard-wrapper) h1,
body:has(.hub-dashboard-wrapper) h2,
body:has(.hub-dashboard-wrapper) h3,
body:has(.hub-dashboard-wrapper) .today-stat-value{
  font-family: 'Outfit', sans-serif;
}

/* Il contenuto parte in cima: la copertina deve toccare la navbar */
body:has(.hub-dashboard-wrapper) .hub-dashboard-wrapper {
  padding-top: 0;
}

/* ── COPERTINA ───────────────────────────────────────────────────────────── */

/* Esce dai margini laterali e risale sotto la navbar (alta 80px), così
   l'immagine occupa tutta la larghezza e prosegue dietro la barra. */
.profile-banner-section {
  margin: -80px calc(-1 * var(--side-margin)) 0;
  position: relative;
}

.profile-banner {
  height: 33vh;                     /* un terzo dello schermo, navbar compresa */
  height: 33dvh;
  min-height: 250px;
  border: none;
  border-radius: 0;
  background-color: var(--bg-card);
  background-size: cover;
  background-position: center;
  margin-top: 80px;
}

/* Un solo velo, in alto: serve a tenere leggibile la navbar sopra qualsiasi
   foto. In fondo la copertina finisce netta, senza sfumature. */
.profile-banner::before {
  /* niente velo scuro in cima: la foto si vede pulita */
  content: none;
}

/* ── NAVBAR SOPRA LA COPERTINA ───────────────────────────────────────────
   In cima alla pagina la barra sparisce e resta solo il velo della
   copertina: niente vetro, niente riquadro. Testo e comandi diventano
   bianchi (in tema chiaro sarebbero scuri su fondo scuro, illeggibili).
   Appena si scorre torna la barra vetrata di sempre. */

/* Riga di identità sopra il fondo della copertina */
.profile-info-row {
  position: relative;
  z-index: 2;
  padding: 0 var(--side-margin);
  border-bottom: none;
  align-items: flex-end;
  gap: 22px;
}

/* Foto profilo: stesso ritaglio di prima, cornice adatta alla copertina.
   align-self:flex-end mette il suo bordo inferiore sulla stessa linea del nome. */
.profile-avatar-wrap {
  margin-top: -76px;
  align-self: flex-end;
}

body:has(.hub-dashboard-wrapper) .profile-avatar {
  width: 136px;
  height: 136px;
  font-size: 6.4rem;
}

.profile-avatar {
  /* niente bordo: essendo semitrasparente, sopra la foto si vedeva come un
     contorno sfrangiato ("strappato") lungo i lati */
  border: none;
  border-radius: 14px;
}

.profile-name-area {
  padding-bottom: 0;
  flex: 1;
  min-width: 0;
}

.profile-fullname {
  margin: 0;
}

/* ── FASCIA SESSIONE ─────────────────────────────────────────────────────
   Un solo pannello largo: anello con il totale di oggi, conteggi e azioni. */
body:has(.hub-dashboard-wrapper) .dashboard-stats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.session-band {
  position: relative;
  display: flex;
  
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: var(--card-shadow);
}

.session-count-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}

.session-count-num {
  font-family: 'Outfit', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--text-main);
  min-width: 0;
}

.session-count-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.session-count-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.session-count-detail {
  display: block;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text-muted);
  opacity: 0.75;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Due percorsi distinti: il ripasso resta appena più ampio e prioritario. */
.session-band {
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 28px 30px;
}

.session-review-card {
  border-color: rgba(var(--primary-rgb), 0.34);
}

.session-card-heading {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-right: 0;
}

.session-band > .session-card-heading {
  display: none;
}

.session-card-kicker {
  color: var(--text-main);
  font-family: 'Outfit', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
}

.session-card-body {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 0.4fr);
  align-items: center;
  gap: 20px;
  flex: 1;
}

.session-study-body {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(0, 0.4fr);
  align-items: center;
  gap: 20px;
  flex: 1;
}

/* Ciambella sopra e legenda sotto, su due colonne: nella colonna del 40%
   affiancarle non ci starebbe e il testo uscirebbe dalla scheda. */
.session-card-visual {
  grid-column: 2;
  grid-row: 1;
  min-height: 152px;
  min-width: 0;                 /* può restringersi: niente sbordamenti */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: none;
}

/* ── RIQUADRO CON CARATTERE ──────────────────────────────────────────────
   Segnaposto della colonna destra: 復 per il ripasso, 学 per lo studio. */
.session-tile {
  width: 132px;
  height: 132px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.05));
  border: 1px solid rgba(var(--primary-rgb), 0.22);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.session-band:hover .session-tile {
  transform: translateY(-3px);
}

.session-tile-char {
  font-family: var(--font-cjk);
  font-size: 4.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent-text);
  user-select: none;
}

/* ── CIAMBELLA PER TIPO + LEGENDA (non in uso: il markup è stato tolto
   dall'hub, si può ripristinare rimettendo svg + ul nella scheda) ────────
   Gli spicchi mostrano quanti elementi ci sono per ciascun tipo, il totale
   sta al centro. Disegnata da dashboard.js. */
:root {
  --tipo-vocaboli:   #7C3AED;
  --tipo-kanji:      #22C1C3;
  --tipo-radicali:   #F59E0B;
  --tipo-grammatica: #EC4899;
}

.ciambella-wrap {
  position: relative;
  width: 108px;
  height: 108px;
  flex-shrink: 0;
}

.ciambella {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);      /* si parte da ore 12 */
  overflow: visible;
}

.ciambella-sfondo {
  fill: none;
  stroke: var(--border-color);
  stroke-width: 11;
}

.ciambella-spicchio {
  fill: none;
  stroke-width: 11;
  stroke-linecap: round;        /* estremità morbide */
  transition: stroke-dasharray 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.ciambella-centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}

.ciambella-totale {
  font-family: 'Outfit', sans-serif;
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--text-main);
}

.ciambella-etichetta {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.ciambella-legenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  width: 100%;
  min-width: 0;
}

.ciambella-legenda.legenda-singola {
  grid-template-columns: minmax(0, 1fr);
  max-width: 60%;
  margin: 0 auto;
}

.legenda-vuota {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  opacity: 0.7;
}

/* Ogni voce è una pillola con sfondo tenue: pallino + numero sopra, nome
   sotto. Su una riga sola i nomi lunghi ("Grammatica") non entrerebbero. */
.legenda-voce {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "pallino numero"
    "nome    nome";
  align-items: center;
  gap: 0 7px;
  padding: 5px 9px;
  border-radius: 10px;
  background: rgba(var(--primary-rgb), 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  min-width: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.legenda-voce:hover {
  background: rgba(var(--primary-rgb), 0.09);
}

.legenda-pallino {
  grid-area: pallino;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legenda-num {
  grid-area: numero;
  justify-self: start;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

.legenda-nome {
  grid-area: nome;
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;      /* rete di sicurezza su schermi molto stretti */
}

/* Schede molto strette: legenda su una colonna sola */
@media (max-width: 560px) {
  .ciambella-legenda {
    grid-template-columns: minmax(0, 1fr);
  }
}

.session-card-body .session-count-row {
  align-items: baseline;
}

.session-card-body .btn-dash,
.session-study-body .btn-dash {
  grid-column: auto;
  width: auto;
}

.session-card-content {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  height: 100%;
}

.session-card-content .btn-dash {
  flex: 0 0 auto;
  width: auto;
  min-width: 136px;
  padding: 8px 20px;
  border-radius: 999px;
}

.session-count-row + .session-count-detail {
  margin-top: -10px;
  margin-bottom: 4px;
}

.session-study-card .session-count-num {
  color: var(--primary);
}

/* ── RITAGLIO COPERTINA ──────────────────────────────────────────────── */
.banner-crop-box {
  width: min(760px, 94vw);
}

.banner-crop-hint {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.banner-crop-area {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1;              /* stessa proporzione della copertina */
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-page);
  cursor: grab;
  touch-action: none;
}

.banner-crop-area.is-dragging {
  cursor: grabbing;
}

/* Foto profilo: area quadrata e più stretta, così non riempie tutta la modale */
.banner-crop-area.is-avatar {
  width: min(340px, 72vw);
  margin: 0 auto;
  border-radius: 18px;
}

#banner-crop-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

.banner-crop-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  color: var(--text-muted);
}

.banner-crop-controls input[type="range"] {
  flex: 1;
  accent-color: var(--primary);
}

.profile-fullname {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.5px;
}

/* I pulsanti "cambia foto" restano leggibili sopra qualsiasi immagine */
.banner-edit-btn,
.avatar-edit-btn {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.banner-edit-btn {
  /* angolo in basso a destra della copertina: fuori dalla navbar e
     lontano dalla foto profilo */
  top: auto;
  bottom: 16px;
  right: 16px;
}

/* La riga di separazione non serve più: la copertina sfuma da sola */
.hub-divider {
  display: none;
}

/* ── SCHEDE ──────────────────────────────────────────────────────────────── */

body:has(.hub-dashboard-wrapper) .today-mini-card,
body:has(.hub-dashboard-wrapper) .stats-card{
  
  gap: 10px
}

/* Etichette: da assolute in alto al centro a normali in alto a sinistra.
   Libera spazio verticale e allinea le schede al resto del sito. */
body:has(.hub-dashboard-wrapper) .stats-card,
body:has(.hub-dashboard-wrapper) .stats-activity,
body:has(.hub-dashboard-wrapper) .today-mini-card {
  padding: 18px 20px 16px;
}

body:has(.hub-dashboard-wrapper) .stats-card-label,
body:has(.hub-dashboard-wrapper) .today-mini-card .stats-card-label {
  position: static;
  text-align: left;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  margin-bottom: 14px;
}

body:has(.hub-dashboard-wrapper) .today-stat-value {
  font-size: 2.8rem;
  
}

body:has(.hub-dashboard-wrapper) .today-stat-key {
  font-size: 0.85rem;
  font-weight: 600;
  
  opacity: 0.8;
}

/* ── GRAFICI ─────────────────────────────────────────────────────────────── */

/* Barre: binario appena accennato, riempimento sfumato nel colore della
   lingua, angoli tondi e altezza animata. */
.week-bars,
.forecast-bars {
  gap: 10px;
  min-height: 120px;
  align-items: stretch;
}

.week-bar-track,
.forecast-bar-track {
  background: rgba(var(--primary-rgb), 0.07);
  border-radius: 10px;
  overflow: hidden;
}

.week-bar-fill,
.forecast-bar-fill {
  background: linear-gradient(to top, var(--primary), var(--secondary));
  border-radius: 10px;
  transition: height 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.2s ease;
}

.week-bar-col:hover .week-bar-fill,
.forecast-bar-col:hover .forecast-bar-fill {
  filter: brightness(1.15);
}

.week-bar-label,
.forecast-bar-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  opacity: 0.7;
}

/* Filtri a pillola, come il resto del sito */
.week-type-pills {
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
  gap: 8px;
}

.week-pill {
  border-radius: 30px;
  border: 1px solid var(--border-color);
  padding: 6px 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.week-pill.active {
  background: var(--primary);
  border-color: var(--primary);
}

.week-pill:hover:not(.active) {
  border-color: var(--text-muted);
  color: var(--text-main);
}

/* Frecce del previsionale, tonde come gli altri comandi */
.forecast-arrow {
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.forecast-arrow:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

/* ── MOBILE ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .profile-banner-section {
    margin: -80px calc(-1 * var(--side-margin)) 0;
  }

  .profile-banner {
    height: 33vh;                   /* anche su mobile un terzo dello schermo */
    height: 33dvh;
    min-height: 180px;
  }

  .profile-banner::before {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0, rgba(0, 0, 0, 0.15) 100px, rgba(0, 0, 0, 0) 170px);
  }

  .profile-info-row {
    padding: 0 var(--side-margin) 18px;
    gap: 16px;
  }

  /* Fascia sessione in colonna: anello e conteggi affiancati, azioni sotto */
  .session-band {
    flex-wrap: wrap;
    gap: 18px;
    padding: 20px;
  }

  body:has(.hub-dashboard-wrapper) .dashboard-stats-grid {
    grid-template-columns: 1fr;
  }

  .session-card-body,
  .session-study-body {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .session-card-visual {
    grid-column: 1;
    grid-row: 1;
    min-height: 108px;
    justify-content: center;
    border-radius: 14px;
    display: none;
  }

  .session-card-content {
    grid-column: 1;
    grid-row: 1;
    gap: 12px;
  }

  .session-card-kicker {
    font-size: 1.45rem;
  }

  .session-count-num {
    font-size: 1.3rem;
  }

  .profile-avatar-wrap {
    margin-top: -50px;
  }

  body:has(.hub-dashboard-wrapper) .profile-avatar {
    width: 116px;
    height: 116px;
    font-size: 5.4rem;
  }

  .profile-fullname {
    font-size: 1.4rem;
  }

  /* Su tocco non esiste il passaggio del mouse: i comandi restano visibili */
  .banner-edit-btn {
    top: auto;
    bottom: 12px;
    right: 12px;
    opacity: 1;
  }

  .avatar-edit-btn {
    opacity: 1;
  }

  .week-bars,
  .forecast-bars {
    min-height: 100px;
    gap: 6px;
  }
}

/* ==========================================================================
   HUB — STATISTICHE: restyle dei grafici
   Stessa struttura HTML e stessi dati; cambiano solo forma e colori, per
   allinearli alla grafica nuova (schede morbide, colori per tipo, Outfit).
   ========================================================================== */

/* ── Scheda ─────────────────────────────────────────────────────────────── */
body:has(.hub-dashboard-wrapper) .stats-card,
body:has(.hub-dashboard-wrapper) .today-mini-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: var(--card-shadow);
}

body:has(.hub-dashboard-wrapper) .stats-card {
  padding: 20px 20px 18px;
}

/* Titolino della scheda: allineato a sinistra, non più centrato in alto */
body:has(.hub-dashboard-wrapper) .stats-card .stats-card-label {
  text-align: center;
  margin-bottom: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-main);
}

/* ── Riga "oggi": quattro numeri ────────────────────────────────────────── */
body:has(.hub-dashboard-wrapper) .today-mini-card .stats-card-label {
  left: 0;
  right: 0;
  text-align: center;
}

body:has(.hub-dashboard-wrapper) .today-stat-value {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text-main);
}

body:has(.hub-dashboard-wrapper) .today-stat-key {
  color: var(--text-muted);
}

/* ── Streak: settimana a caselle invece dei cerchi con la fiamma ────────── *//* ── Barre (attività settimanale e previsione ripassi) ──────────────────── */
/* Frecce della previsione: tonde, come gli altri comandi */
/* ── Filtri per tipo: pillole come nel resto del sito ───────────────────── */
/* ── Progressi per livello ──────────────────────────────────────────────── */
/* Riga "Sessione di oggi": le tre righe respirano di più e il titoletto
   sta più in alto (prima erano schiacciate al centro della scheda). */
/* ── Previsione ripassi: etichette sotto la barra, frecce discrete ──────── *//* Frecce centrate verticalmente sulle barre e senza riquadro */
/* Prima riga: giorno e data (o l'ora). Seconda riga: quanti elementi.
   Vale sia per la previsione sia per l'attività settimanale. */
/* Giorni con la sola iniziale maiuscola ("Og 14", "Lu 15") */
/* Barre più alte: le etichette sono passate sotto e avevano compresso il grafico */
/* Frecce più staccate dal grafico */
/* Selettore Giorni/Ore: in alto a destra, fuori dalla riga dei filtri */
/* ── STREAK: serie in corso + calendario delle ultime settimane ──────────
   Prima c'era una sola riga di icone e sotto un grande vuoto; ora lo spazio
   è occupato dal calendario, che dice anche quanto si è studiato. */

/* Settimana in cima: quadratini con la fiammella dentro */
.streak-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.streak-week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.streak-week-label {
  font-size: 0.72rem;
  text-transform: capitalize;
  color: var(--text-muted);
}

.streak-cal-day {
  /* quadrati veri: si stringono solo se la colonna è più stretta di 46px */
  width: min(46px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 13px;
  background: var(--border-color);
  color: var(--text-muted);
  opacity: 0.55;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  transition: all 0.2s ease;
}

.streak-cal-day.is-attivo {
  background: var(--primary);
  color: #fff;
  opacity: 1;
}

.streak-cal-day.is-futuro {
  background: var(--bg-page);
  border: 1px solid var(--border-color);
}

.streak-cal-day.is-oggi {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Tre dati sulla stessa riga: serie in corso (in evidenza), record, mese */
.streak-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 5px;
  /* Record e mese si centrano rispetto al riquadro della serie, più alto */
  align-items: center;
}

.streak-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: none;
  text-align: center;
}

.streak-stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.8;
}

.streak-stat-value {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-main);
}

/* La serie in corso pesa più delle altre due */
.streak-stat.is-primaria {
  padding: 12px 10px;
  border-radius: 16px;
  background: rgba(var(--primary-rgb), 0.08);
}

.streak-stat.is-primaria .streak-stat-label {
  color: var(--accent-text);
  opacity: 1;
}

.streak-stat.is-primaria .streak-stat-value {
  font-size: 2.4rem;
  letter-spacing: -1px;
  color: var(--accent-text);
}

.streak-stat-unit {
  font-size: 0.7rem;
  color: var(--text-muted);
}/* ── Barre (attività settimanale e previsione ripassi) ──────────────────── */
/* Frecce della previsione: tonde, come gli altri comandi */
/* ── Filtri per tipo: pillole come nel resto del sito ───────────────────── */
/* ── Progressi per livello ──────────────────────────────────────────────── */
/* Riga "Sessione di oggi": le tre righe respirano di più e il titoletto
   sta più in alto (prima erano schiacciate al centro della scheda). */
/* ── Previsione ripassi: etichette sotto la barra, frecce discrete ──────── *//* Frecce centrate verticalmente sulle barre e senza riquadro */
/* Prima riga: giorno e data (o l'ora). Seconda riga: quanti elementi.
   Vale sia per la previsione sia per l'attività settimanale. */
/* Giorni con la sola iniziale maiuscola ("Og 14", "Lu 15") */
/* Barre più alte: le etichette sono passate sotto e avevano compresso il grafico */
/* Frecce più staccate dal grafico */
/* Selettore Giorni/Ore: in alto a destra, fuori dalla riga dei filtri */
/* ── STREAK: serie in corso + calendario delle ultime settimane ──────────
   Prima c'era una sola riga di icone e sotto un grande vuoto; ora lo spazio
   è occupato dal calendario, che dice anche quanto si è studiato. */

/* ── Barre (attività settimanale e previsione ripassi) ──────────────────── */
body:has(.hub-dashboard-wrapper) .week-bar-track,
body:has(.hub-dashboard-wrapper) .forecast-bar-track {
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
}

body:has(.hub-dashboard-wrapper) .week-bar-fill,
body:has(.hub-dashboard-wrapper) .forecast-bar-fill {
  background: var(--primary);
  border-radius: 8px 8px 0 0;
  transition: height 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* Frecce della previsione: tonde, come gli altri comandi */
body:has(.hub-dashboard-wrapper) .forecast-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  
  color: var(--text-muted);
  transition: all 0.2s ease;
}

body:has(.hub-dashboard-wrapper) .forecast-arrow:hover:not(:disabled) {
  border-color: var(--primary);
  
}

body:has(.hub-dashboard-wrapper) .forecast-arrow:disabled {
  opacity: 0.3;
}

/* ── Filtri per tipo: pillole come nel resto del sito ───────────────────── */
body:has(.hub-dashboard-wrapper) .week-pill{
  font-family: 'Nunito', sans-serif;
  border-radius: 30px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-main);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  padding: 5px 13px;
  transition: all 0.2s ease;
}

body:has(.hub-dashboard-wrapper) .week-pill:hover:not(.active) {
  border-color: var(--text-muted);
  color: var(--text-main);
}

body:has(.hub-dashboard-wrapper) .week-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ── Progressi per livello ──────────────────────────────────────────────── */
body:has(.hub-dashboard-wrapper) .level-progress-label {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  color: var(--text-main);
}

body:has(.hub-dashboard-wrapper) .level-progress-track {
  /* stesso fondo e bordo delle barre "da ripassare" */
  background: var(--bg-page);
  border: 1px solid var(--border-color);
  border-radius: 30px;
  overflow: hidden;
  height: 12px;
}

body:has(.hub-dashboard-wrapper) .level-progress-inner {
  border-radius: 30px;
  overflow: hidden;
}

body:has(.hub-dashboard-wrapper) .level-seg {
  transition: width 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body:has(.hub-dashboard-wrapper) .level-progress-count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-main);
  font-size: 0.75rem;
}

/* Riga "Sessione di oggi": le tre righe respirano di più e il titoletto
   sta più in alto (prima erano schiacciate al centro della scheda). */
body:has(.hub-dashboard-wrapper) .today-mini-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 20px 18px 30px;
}

body:has(.hub-dashboard-wrapper) .today-mini-card .stats-card-label {
  position: static;
  margin: 0;
  line-height: 1;
}

body:has(.hub-dashboard-wrapper) .today-stat-value {
  line-height: 1;
  margin-top: 15px;
}

body:has(.hub-dashboard-wrapper) .today-stat-key {
  line-height: 1;
}

/* ── Previsione ripassi: etichette sotto la barra, frecce discrete ──────── */

/* Frecce centrate verticalmente sulle barre e senza riquadro */
body:has(.hub-dashboard-wrapper) .forecast-bars-wrapper {
  align-items: center;
}

body:has(.hub-dashboard-wrapper) .forecast-arrow {
  border: none;
  background: transparent;
  align-self: center;
}

body:has(.hub-dashboard-wrapper) .forecast-arrow:hover:not(:disabled) {
  background: transparent;
  color: var(--primary);
}

/* Prima riga: giorno e data (o l'ora). Seconda riga: quanti elementi.
   Vale sia per la previsione sia per l'attività settimanale. */
body:has(.hub-dashboard-wrapper) .forecast-bar-label,
body:has(.hub-dashboard-wrapper) .week-bar-label {
  margin-top: 8px;
  font-size: 0.7rem;
  font-weight: 400;
  
  color: var(--text-muted);
  white-space: nowrap;
}

body:has(.hub-dashboard-wrapper) .forecast-bar-value,
body:has(.hub-dashboard-wrapper) .week-bar-value {
  font-family: 'Nunito', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}

/* Giorni con la sola iniziale maiuscola ("Og 14", "Lu 15") */
body:has(.hub-dashboard-wrapper) .forecast-bar-label,
body:has(.hub-dashboard-wrapper) .week-bar-label {
  text-transform: capitalize;
}

/* Barre più alte: le etichette sono passate sotto e avevano compresso il grafico */
body:has(.hub-dashboard-wrapper) .forecast-bars,
body:has(.hub-dashboard-wrapper) .week-bars {
  min-height: 150px;
}

/* Frecce più staccate dal grafico */
body:has(.hub-dashboard-wrapper) .forecast-bars-wrapper {
  gap: 14px;
}

/* Selettore Giorni/Ore: in alto a destra, fuori dalla riga dei filtri */
.forecast-mode {
  position: absolute;
  top: 16px;
  right: 18px;
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--border-color);
  border-radius: 30px;
  background: var(--bg-page);
  z-index: 2;
}

.forecast-mode-btn {
  border: none;
  background: transparent;
  border-radius: 30px;
  padding: 4px 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.forecast-mode-btn:hover:not(.active) {
  color: var(--text-main);
}

.forecast-mode-btn.active {
  background: var(--primary);
  color: #fff;   /* il primario è scuro in entrambi i temi: il testo resta bianco */
}

/* ── STREAK: serie in corso + calendario delle ultime settimane ──────────
   Prima c'era una sola riga di icone e sotto un grande vuoto; ora lo spazio
   è occupato dal calendario, che dice anche quanto si è studiato. */
.stats-streak {
  justify-content: flex-start;
}

/* ── HUB SU MOBILE: correzioni ─────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Il selettore Giorni/Ore finiva sopra al titolo della scheda: qui passa
     sotto, centrato, e resta nel flusso. */
  body:has(.hub-dashboard-wrapper) .forecast-mode {
    position: static;
    margin: 0 auto;
  }

  /* Le barre devono poter restringersi, altrimenti spingono fuori la freccia
     destra (usciva di 33px dalla scheda). */
  body:has(.hub-dashboard-wrapper) .forecast-bars,
  body:has(.hub-dashboard-wrapper) .week-bars {
    min-width: 0;
  }
  body:has(.hub-dashboard-wrapper) .forecast-arrow {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
  }
}

/* Le barre devono poter restringersi a ogni larghezza: con min-width auto
   spingevano il grafico verso destra e la freccia usciva dalla scheda. */
body:has(.hub-dashboard-wrapper) .forecast-bars,
body:has(.hub-dashboard-wrapper) .week-bars {
  min-width: 0;
}

body:has(.hub-dashboard-wrapper) .forecast-arrow {
  flex-shrink: 0;
}

/* La copertina esce dai lati del contenitore: il valore dello sconfinamento
   deve essere SEMPRE uguale al padding laterale del contenitore, altrimenti
   sborda dallo schermo (succedeva fra 769 e 992px: padding 20, uscita 90). */
body:has(.hub-dashboard-wrapper) .hub-dashboard-wrapper {
  --hub-side: var(--side-margin);
}

@media (max-width: 992px) {
  body:has(.hub-dashboard-wrapper) .hub-dashboard-wrapper {
    --hub-side: 20px;
  }
}

@media (max-width: 768px) {
  body:has(.hub-dashboard-wrapper) .hub-dashboard-wrapper {
    --hub-side: var(--side-margin);
  }
}

body:has(.hub-dashboard-wrapper) .profile-banner-section {
  margin-left: calc(-1 * var(--hub-side));
  margin-right: calc(-1 * var(--hub-side));
}

/* Le colonne del grafico devono poter restringersi: con min-width automatico
   la loro larghezza minima è quella dell'etichetta ("Og 14"), e con sette
   colonne il grafico spingeva fuori la freccia destra. Le etichette, se lo
   spazio manca davvero, si accorciano invece di allargare il grafico. */
body:has(.hub-dashboard-wrapper) .forecast-bar-col,
body:has(.hub-dashboard-wrapper) .week-bar-col {
  min-width: 0;
}

body:has(.hub-dashboard-wrapper) .forecast-bar-label,
body:has(.hub-dashboard-wrapper) .forecast-bar-value,
body:has(.hub-dashboard-wrapper) .week-bar-label,
body:has(.hub-dashboard-wrapper) .week-bar-value {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Su schermi stretti lo spazio fra le barre ruba larghezza alle etichette
   ("Og 14" veniva troncato): meno stacco fra le colonne e testo un filo più
   piccolo, così le date restano intere. */
@media (max-width: 768px) {
  body:has(.hub-dashboard-wrapper) .forecast-bars,
  body:has(.hub-dashboard-wrapper) .week-bars {
    gap: 4px;
    margin-bottom: 5px;
  }

  body:has(.hub-dashboard-wrapper) .forecast-bar-label,
  body:has(.hub-dashboard-wrapper) .week-bar-label {
    font-size: 0.66rem;
    letter-spacing: 0;
  }

  body:has(.hub-dashboard-wrapper) .forecast-bars-wrapper {
    gap: 6px;
  }
}

/* Schermi molto stretti: giorno e data vanno a capo ("Og" sopra, "14" sotto)
   invece di essere troncati, perché le colonne scendono sotto i 32px. */
@media (max-width: 480px) {
  body:has(.hub-dashboard-wrapper) .forecast-bar-label,
  body:has(.hub-dashboard-wrapper) .week-bar-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.15;
    text-align: center;
  }
}

/* Bandiera del selettore lingua: disegno vettoriale, sempre visibile
   (le emoji-bandiera non esistono nei font di sistema di Windows) */
.nav-lang-bandiera {
  width: 21px;
  height: 14px;
  display: block;
  border-radius: 2px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   DECK PREDEFINITI (hub-vocabulary) — allineata alla grafica nuova
   ========================================================================== */

body.hub-page {
  font-family: 'Nunito', sans-serif;
}

body.hub-page .deck-page-header {
  margin-bottom: 28px;
}

/* Titolo come nelle altre pagine: Outfit, niente maiuscoletto né riga sotto */
body.hub-page .hub-title {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.25;
  text-transform: none;
  color: var(--text-main);
  border-bottom: none;
  border-left: 4px solid var(--primary);
  padding-left: 14px;
  margin: 0 0 8px;
}

body.hub-page .hub-title .highlight-h1 {
  color: var(--primary);
  font-weight: inherit;
}

body.hub-page .deck-page-sub {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0;
}

/* La griglia si adatta da sola: niente colonne fisse */
body.hub-page .deck-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 22px;
}

body.hub-page .deck-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
              border-color 0.25s ease;
}

body.hub-page .deck-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
}

/* Intestazione: riquadro tinto col colore della lingua e sigla del livello */
body.hub-page .deck-header-visual {
  flex-direction: row;
  gap: 10px;
  height: 120px;
  background: rgba(var(--primary-rgb), 0.08);
  border-bottom: 1px solid var(--border-color);
}

body.hub-page .deck-prefisso {
  font-family: 'Outfit', sans-serif;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--text-main);
}

body.hub-page .deck-sigla {
  font-family: 'Outfit', sans-serif;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--text-main);
}

body.hub-page .deck-body {
  padding: 20px 22px 22px;
  gap: 0;
}

body.hub-page .deck-body h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 6px;
}

body.hub-page .deck-body p {
  font-size: 0.88rem;
  color: var(--text-muted);
  opacity: 1;
  line-height: 1.5;
  margin-bottom: 16px;
}

body.hub-page .deck-stats {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-bottom: 18px;
  gap: 8px;
}

body.hub-page .deck-stats strong {
  color: var(--text-main);
  font-weight: 800;
}

body.hub-page .deck-stats i {
  color: var(--accent-text);
  font-size: 0.85rem;
}

/* Pulsante a pillola: pieno per aggiungere, contornato per rimuovere */
body.hub-page .btn-add-deck {
  font-family: 'Nunito', sans-serif;
  border-radius: 30px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  transition: all 0.2s ease;
}

body.hub-page .btn-add-deck:hover {
  color: #fff;
  filter: brightness(1.08);
}

body.hub-page .btn-add-deck--active {
  background: transparent;
  color: var(--accent-text);
}

body.hub-page .btn-add-deck--active:hover {
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--accent-text);
  filter: none;
}

body.hub-page .loading-placeholder {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 0;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  body.hub-page .deck-page-header {
    margin-bottom: 20px;
  }

  body.hub-page .hub-title {
    font-size: 1.55rem;
    padding-left: 12px;
    border-left-width: 3px;
  }

  body.hub-page .deck-page-sub {
    font-size: 0.88rem;
  }

  /* Fino a 768px restano due colonne: una sola renderebbe le schede
     larghissime su tablet. A colonna singola si passa sotto i 600px. */
  body.hub-page .deck-grid {
    gap: 14px;
  }

  /* Su una colonna l'intestazione a tutta altezza mangiava mezzo schermo */
  body.hub-page .deck-header-visual {
    height: 88px;
    border-radius: 18px 18px 0 0;
  }

  body.hub-page .deck-prefisso,
  body.hub-page .deck-sigla {
    font-size: 1.7rem;
  }

  body.hub-page .deck-card {
    border-radius: 18px;
  }

  /* Niente sollevamento al tocco: su mobile resta solo il bordo acceso */
  body.hub-page .deck-card:hover {
    transform: none;
  }

  body.hub-page .deck-body {
    padding: 16px 18px 18px;
  }

  body.hub-page .deck-body h3 {
    font-size: 1.05rem;
  }

  body.hub-page .deck-body p {
    font-size: 0.85rem;
    margin-bottom: 12px;
  }

  body.hub-page .deck-stats {
    margin-bottom: 14px;
  }

  /* Pillola alta come quelle del resto del sito */
  body.hub-page .btn-add-deck {
    height: 46px;
    padding: 0 18px;
    width: 100%;
  }
}

@media (max-width: 600px) {
  body.hub-page .deck-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   EDITOR DEL DECK — allineato alla grafica nuova
   ========================================================================== */

body.deck-editor-page {
  font-family: 'Nunito', sans-serif;
}

/* ── Barra superiore: vetro, agganciata sotto la navbar, a tutta larghezza ── */
body.deck-editor-page .editor-main .editor-topbar {
  top: 80px;
  padding: 18px var(--side-margin);
  margin: 0 calc(-1 * var(--side-margin)) 22px;
  background: var(--bg-nav);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-nav);
  box-sizing: border-box;
}

body.deck-editor-page .editor-main .editor-topbar h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-transform: none;
  color: var(--text-main);
}

body.deck-editor-page .editor-topbar h1 .highlight-h1 {
  color: var(--primary);
  font-weight: inherit;
}

/* Campo di ricerca a pillola, come nelle altre pagine */
body.deck-editor-page .editor-search-bar input {
  padding: 12px 20px 12px 44px;
  border-radius: 30px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body.deck-editor-page .editor-search-bar input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

body.deck-editor-page .editor-search-bar input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
  outline: none;
}

body.deck-editor-page .editor-search-bar .search-icon {
  left: 18px;
  color: var(--text-muted);
  opacity: 1;
}

/* Contatore come pastiglia */
body.deck-editor-page .deck-counter {
  padding: 6px 14px;
  border-radius: 30px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-muted);
  opacity: 1;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Pulsanti della barra */
/* Pulsanti alti quanto la barra di ricerca (46px), così la riga è allineata */
body.deck-editor-page .btn-bulk,
body.deck-editor-page .btn-primary-editor {
  height: 46px;
  padding: 0 22px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: 'Nunito', sans-serif;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.deck-editor-page .btn-bulk {
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-muted);
  gap: 9px;
}

body.deck-editor-page .btn-bulk:not(:disabled):hover {
  border-color: var(--primary);
  color: var(--primary);
}

body.deck-editor-page .btn-primary-editor {
  background-color: var(--primary);
}

/* ── Elenco delle parole ─────────────────────────────────────────────────── */
body.deck-editor-page .word-list {
  gap: 10px;
}

body.deck-editor-page .word-row {
  padding: 14px 20px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

body.deck-editor-page .word-row:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

/* La riga personalizzata si riconosce dalla barra colorata a sinistra */
body.deck-editor-page .word-row--custom {
  border-left: 4px solid var(--primary);
}

body.deck-editor-page .word-reading,
body.deck-editor-page .word-significato {
  color: var(--text-muted);
}

/* "modifica": un tondo con la matita, fra il rango e i tre puntini */
body.deck-editor-page .btn-modifica {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

body.deck-editor-page .btn-modifica:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
}

/* Rango: stessa pastiglia usata nelle altre pagine */
body.deck-editor-page .word-row .srs-rank-badge {
  border-radius: 30px;
  padding: 4px 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  font-size: 0.78rem;
}

body.deck-editor-page .btn-word-menu {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid transparent;
  color: var(--text-muted);
  transition: all 0.2s ease;
}

body.deck-editor-page .btn-word-menu:hover {
  border-color: var(--border-color);
  color: var(--text-main);
  background: rgba(var(--primary-rgb), 0.06);
}

/* ── Menù contestuale della parola ───────────────────────────────────────── */
#word-menu-popup {
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-card);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.45);
  padding: 6px;
  min-width: 210px;
}

.word-menu-item {
  border-radius: 10px;
  padding: 10px 14px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
}

.word-menu-item:hover {
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--text-main);
}

.word-menu-item--danger:hover {
  background: rgba(224, 82, 82, 0.12);
}

/* ── Popup di importazione ───────────────────────────────────────────────
   Era largo 860px con dentro poca roba e un riquadro di caricamento enorme:
   ora la larghezza segue il passo mostrato e le proporzioni sono più sobrie. */
.srs-settings-modal .srs-settings-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.esempi-modal .srs-settings-box {
  width: min(620px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  transition: width 0.25s ease;
}

/* Il passo con l'elenco degli esempi ha bisogno di più spazio */
.esempi-modal .srs-settings-box.is-largo {
  width: min(1000px, 94vw);
}

.esempi-modal .bulk-step {
  padding: 22px 24px 24px;
  overflow-y: auto;
}

.bulk-step-desc {
  font-family: 'Nunito', sans-serif;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
  opacity: 1;
  margin-bottom: 18px;
}

.bulk-step-desc strong {
  color: var(--text-main);
}

.bulk-upload-area {
  border: 1px dashed var(--border-color);
  border-radius: 14px;
  background: var(--bg-card);
  padding: 26px 20px;
  gap: 10px;
  transition: all 0.2s ease;
}

.bulk-upload-area:hover,
.bulk-upload-area.drag-over {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.06);
}

.bulk-upload-icon {
  font-size: 1.6rem;
  color: var(--accent-text);
  opacity: 1;
}

.bulk-upload-area span {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
  opacity: 1;
}

.bulk-progress-bar {
  border-radius: 30px;
  background: var(--border-color);
  overflow: hidden;
}

.bulk-progress-fill {
  background: var(--primary);
  border-radius: 30px;
}

@media (max-width: 900px) {
  /* Tre righe ordinate: titolo+contatore, ricerca, pulsanti.
     Con il solo "a capo" gli elementi si disponevano in ordine sparso e la
     barra, essendo fissa in alto, mangiava mezzo schermo. */
  body.deck-editor-page .editor-main .editor-topbar {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "titolo"
      "ricerca"
      "azioni";
    align-items: center;
    gap: 10px 12px;
    padding: 14px var(--side-margin);
  }

  body.deck-editor-page .editor-main .editor-topbar h1 {
    grid-area: titolo;
    font-size: 1.35rem;
  }

  body.deck-editor-page .editor-search-bar {
    grid-area: ricerca;
  }

  body.deck-editor-page .editor-topbar-actions {
    grid-area: azioni;
    gap: 10px;
  }

  body.deck-editor-page .editor-topbar-actions > * {
    flex: 1;
    justify-content: center;
  }
}

/* Il tocco non ha un vero "passaggio del mouse": senza questo filtro lo stato
   di hover resta acceso sull'ultima riga toccata finché non se ne tocca
   un'altra (il bordo viola bloccato). */
@media (hover: none) {
  body.deck-editor-page .word-row:hover {
    border-color: var(--border-color);
    transform: none;
  }

  body.deck-editor-page .btn-bulk:not(:disabled):hover {
    border-color: var(--border-color);
    color: var(--text-muted);
  }

  body.deck-editor-page .btn-modifica:hover {
    color: var(--text-muted);
  }
}

@media (max-width: 600px) {
  /* Barra più stretta: la topbar è fissa, ogni pixel che occupa è schermo in meno */
  body.deck-editor-page .editor-main .editor-topbar {
    gap: 8px;
    padding: 12px var(--side-margin);
    margin-bottom: 16px;
  }

  body.deck-editor-page .editor-main .editor-topbar h1 {
    font-size: 1.2rem;
  }

  /* "Importa subs2srs" andava a capo dentro la pillola. Su schermo stretto
     resta solo "Importa": così le due pillole ci stanno comode anche con il
     font vero, che è più largo di quello di ripiego. */
  body.deck-editor-page .solo-schermo-largo {
    display: none;
  }

  body.deck-editor-page .btn-bulk,
  body.deck-editor-page .btn-primary-editor {
    height: 44px;
    padding: 0 14px;
    font-size: 0.85rem;
    white-space: nowrap;
    min-width: 0;
    overflow: visible;
  }

  /* Il testo del pulsante pieno non deve poter sparire in nessun caso */
  body.deck-editor-page .btn-primary-editor {
    color: #fff;
    background-color: var(--primary);
  }

  body.deck-editor-page .btn-bulk {
    gap: 7px;
  }

  body.deck-editor-page .editor-search-bar input {
    height: 44px;
    padding: 0 18px 0 42px;
  }

  /* Con la matita al posto della parola "modifica" tutto sta su una riga:
     parola, lettura e significato a sinistra, rango e i due pulsanti a
     destra. Il significato è l'unico elemento elastico e va a puntini. */
  body.deck-editor-page .word-row {
    gap: 8px;
    padding: 12px 14px;
  }

  body.deck-editor-page .word-row-main {
    gap: 8px;
    align-items: baseline;
  }

  body.deck-editor-page .word-kanji {
    width: auto;
    max-width: 34vw;
    flex-shrink: 0;
    font-size: 1.35rem;
    line-height: 1.2;
  }

  /* Sotto i 600px la lettura si mangiava lo spazio del significato */
  body.deck-editor-page .word-reading {
    display: none;
  }

  /* Una regola pensata per il popup di importazione (max-width: 768px)
     spezzava il significato su due righe con il ritaglio a due linee:
     qui deve restare su una riga sola e finire a puntini. */
  body.deck-editor-page .word-significato {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8rem;
    opacity: 0.8;
  }

  body.deck-editor-page .word-row-actions {
    gap: 6px;
  }

  body.deck-editor-page .word-row .srs-rank-badge {
    padding: 4px 10px;
    font-size: 0.72rem;
    gap: 5px;
  }

  body.deck-editor-page .btn-modifica {
    width: 32px;
    height: 32px;
  }

  body.deck-editor-page .btn-word-menu {
    width: 28px;
  }

  /* Il popup dei tre puntini deve stare dentro lo schermo */
  #word-menu-popup {
    max-width: calc(100vw - 32px);
  }
}

/* ── Popup import, passo 3: pulsanti, spazi e scorrimento ────────────────── */

/* Barra in alto: descrizione a sinistra, azioni a destra, separate da una riga */
.esempi-modal .bulk-step3-header {
  align-items: center;
  gap: 20px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border-color);
}

.esempi-modal .bulk-step3-header .bulk-step-desc {
  margin-bottom: 0;
}

/* I due pulsanti: contornato e pieno, entrambi a pillola */
.esempi-modal .bulk-actions-top .btn-sub,
.esempi-modal .bulk-actions-top .btn-primary-editor {
  font-family: 'Nunito', sans-serif;
  border-radius: 30px;
  padding: 10px 20px;
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
}

.esempi-modal .bulk-actions-top .btn-sub {
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-muted);
}

.esempi-modal .bulk-actions-top .btn-sub:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Barra di scorrimento sottile, non quella di sistema */
.esempi-modal .bulk-step {
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.esempi-modal .bulk-step::-webkit-scrollbar { width: 8px }
.esempi-modal .bulk-step::-webkit-scrollbar-track { background: transparent }
.esempi-modal .bulk-step::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 8px;
}

/* Scheda della parola */
.esempi-modal .bulk-word-card {
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--bg-card);
  overflow: hidden;
  margin-bottom: 14px;
}

.esempi-modal .bulk-word-header {
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-color);
  background: rgba(var(--primary-rgb), 0.05);
}

.esempi-modal .bulk-word-count {
  color: var(--accent-text);
  font-weight: 800;
  font-size: 0.82rem;
}

/* Riga dell'esempio: più aria e separatori leggeri */
.esempi-modal .bulk-esempio-row {
  gap: 14px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  align-items: flex-start;
}

.esempi-modal .bulk-esempi-list > .bulk-esempio-row:first-child {
  border-top: none;
}

.esempi-modal .bulk-esempio-checkbox {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* Pulsante "traduci": tondo e discreto */
.esempi-modal .btn-translate-bulk {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.esempi-modal .btn-translate-bulk:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.1);
}

.esempi-modal .bulk-it-wrapper {
  gap: 10px;
  align-items: center;
  margin: 6px 0 10px;
}

.esempi-modal .bulk-esempio-it {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Campo del suggerimento: come gli altri campi del sito */
.esempi-modal .bulk-esempio-suggerimento input {
  width: 100%;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-page);
  color: var(--text-main);
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.esempi-modal .bulk-esempio-suggerimento input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
  text-transform: none;
}

.esempi-modal .bulk-esempio-suggerimento input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

.esempi-modal .bulk-esempio-thumb {
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

.esempi-modal .bulk-audio-icon {
  color: var(--accent-text);
}

/* ==========================================================================
   EDITOR DELLA CARTA — solo font, campi e pulsanti (struttura invariata)
   ========================================================================== */

body.card-editor-page {
  font-family: 'Nunito', sans-serif;
}

/* ── Etichette e campi in sola lettura ───────────────────────────────────── */
body.card-editor-page .field-label {
  font-family: 'Nunito', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  opacity: 1;
  margin-bottom: 9px;
}

body.card-editor-page .field-hint {
  font-weight: 600;
  letter-spacing: 0;
  opacity: 0.8;
}

body.card-editor-page .field-readonly {
  padding: 8px 16px;
  height: auto;
  min-height: 46px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  font-size: 0.95rem;
}

/* Altezza fissa: il riquadro resta sempre alto uguale anche con poche voci,
   e scorre quando ce ne sono troppe. */
body.card-editor-page .field-readonly.field-significato {
  height: 260px;
  min-height: 260px;
  max-height: 260px;
  padding: 14px 16px;
  scrollbar-color: var(--border-color) transparent;
}

/* A due colonne la colonna di sinistra si ferma prima della barra in basso:
   il riquadro dei significati prende tutto lo spazio che avanza, così è
   sempre alto al massimo possibile senza mai arrivare a toccarla.
   80px navbar + 20px di respiro sopra, 70px barra + 20px sotto. */
@media (min-width: 901px) {
  body.card-editor-page .card-col-left {
    top: 100px;
    display: flex;
    flex-direction: column;
    /* altezza esplicita, non solo max: serve perché il riquadro sotto possa
       allungarsi fino a riempirla */
    height: calc(100vh - 190px);
    min-height: 340px;
  }

  body.card-editor-page .card-col-left .card-field-group:last-child {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
  }

  body.card-editor-page .field-readonly.field-significato {
    flex: 1;
    height: auto;
    min-height: 120px;
    max-height: none;
  }
}

body.card-editor-page .field-readonly.field-significato::-webkit-scrollbar { width: 8px }
body.card-editor-page .field-readonly.field-significato::-webkit-scrollbar-thumb {
  background-color: var(--border-color);
  border-radius: 8px;
}

body.card-editor-page #field-vocabolo,
body.card-editor-page #field-kana {
  font-family: var(--font-cjk);
  font-size: 1.05rem;
}

/* ── Campi di testo ──────────────────────────────────────────────────────── */
body.card-editor-page .field-input {
  height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-page);
  font-family: 'Nunito', sans-serif;
  font-size: 0.92rem;
  transition: all 0.2s ease;
}

body.card-editor-page .field-input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

body.card-editor-page .field-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

/* Quando il campo viene riempito dal completamento automatico, Chrome ci
   mette il suo azzurrino con il testo nero: in dark mode è illeggibile.
   Lo sfondo si riscrive solo con un'ombra interna, non con background. */
body.card-editor-page .field-input:-webkit-autofill,
body.card-editor-page .field-input:-webkit-autofill:hover,
body.card-editor-page .field-input:-webkit-autofill:focus,
body.card-editor-page .field-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text-main);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-page) inset;
  box-shadow: 0 0 0 1000px var(--bg-page) inset;
  caret-color: var(--text-main);
  /* Chrome rianima lo sfondo dopo il primo frame: la transizione lunghissima
     è il trucco standard per impedirglielo. */
  transition: background-color 9999s ease-in-out 0s;
}

body.card-editor-page .field-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-page) inset, 0 0 0 3px rgba(var(--primary-rgb), 0.12);
  box-shadow: 0 0 0 1000px var(--bg-page) inset, 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

/* Pulsante tondo della traduzione, accanto al campo */
body.card-editor-page .btn-translate-addon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-page);
  color: var(--accent-text);
}

body.card-editor-page .btn-translate-addon:hover {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: var(--primary);
  color: var(--primary);
}

/* Selettore del file: stessa altezza del campo accanto */
body.card-editor-page .btn-file-input {
  height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px dashed var(--border-color);
  background: transparent;
  color: var(--text-muted);
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
}

body.card-editor-page .btn-file-input:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.06);
}

body.card-editor-page .immagine-preview img {
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

/* ── Pulsanti "aggiungi" / "esempio automatico" ──────────────────────────── */
body.card-editor-page .btn-add-esempio {
  height: 46px;
  padding: 0 20px;
  margin-bottom: 0;
  border-radius: 30px;
  border: 1px dashed var(--border-color);
  background: transparent;
  color: var(--text-muted);
  opacity: 1;
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

body.card-editor-page .btn-add-esempio:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.06);
}

body.card-editor-page .btn-remove-esempio {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  color: var(--text-muted);
  transition: all 0.2s ease;
}

body.card-editor-page .btn-remove-esempio:hover {
  opacity: 1;
  color: #e05252;
  background: rgba(224, 82, 82, 0.12);
}

/* ── Pulsanti della barra in basso ───────────────────────────────────────── */
body.card-editor-page .card-editor-toolbar-bottom {
  background: var(--bg-nav);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-nav);
}

body.card-editor-page .card-toolbar-actions {
  gap: 12px;
}

body.card-editor-page .btn-ripristina,
body.card-editor-page .btn-primary-editor {
  height: 44px;
  padding: 0 26px;
  border-radius: 30px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.card-editor-page .btn-ripristina {
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-muted);
}

body.card-editor-page .btn-ripristina:hover {
  border-color: #e05252;
  color: #e05252;
}

body.card-editor-page .btn-primary-editor {
  background-color: var(--primary);
}

/* Sotto i 768px la scocca dei popup diventa un foglio agganciato in basso
   (position: fixed): senza left/right espliciti la larghezza ridotta di
   .esempi-modal lo lasciava schiacciato a sinistra. */
@media (max-width: 768px) {
  .esempi-modal .srs-settings-box,
  .esempi-modal .srs-settings-box.is-largo {
    width: 100vw;
    left: 0;
    right: 0;
    max-height: 88vh;
    border-radius: 16px 16px 0 0;
  }
}

@media (max-width: 900px) {
  /* A una colonna le due sezioni erano separate da 40px di vuoto */
  body.card-editor-page .card-editor-grid {
    gap: 0px;
  }

  /* Impilata, la colonna deve usare tutta la larghezza: il tetto di 400px
     serve solo quando sta affiancata agli esempi */
  body.card-editor-page .card-col-left {
    max-width: none;
  }

  /* Qui il riquadro sta sopra agli esempi, non accanto: tenerlo sempre a
     260px vorrebbe dire mezzo schermo vuoto quando c'è un solo significato. */
  body.card-editor-page .field-readonly.field-significato {
    height: auto;
    min-height: 0;
    max-height: 260px;
  }

  body.card-editor-page .card-field-group {
    margin-bottom: 25px;
  }
}

@media (max-width: 600px) {
  /* Su schermo stretto i due pulsanti stanno meglio uno sopra l'altro */
  body.card-editor-page .editor-action-row {
    flex-direction: column;
  }

  body.card-editor-page .editor-action-row > * {
    width: 100%;
  }

  body.card-editor-page .btn-ripristina,
  body.card-editor-page .btn-primary-editor {
    padding: 0 20px;
    font-size: 0.9rem;
  }

  body.card-editor-page .field-readonly,
  body.card-editor-page .field-input,
  body.card-editor-page .btn-file-input {
    font-size: 0.9rem;
  }

  /* Il chiarimento accanto a "Suggerimento" non ci sta in riga: va sotto */
  body.card-editor-page .field-hint {
    display: block;
    margin-left: 0;
    margin-top: 3px;
  }

  /* L'anteprima dell'immagine e la sua crocetta stanno strette */
  body.card-editor-page .immagine-preview img {
    width: 104px;
    height: 78px;
  }

  body.card-editor-page .btn-remove-preview {
    left: 84px;
  }
}


/* ==========================================================================
   SEZIONE "I TUOI DECK" (hub-vocabulary)
   ========================================================================== */

body.hub-page .sezione-deck-personali {
  margin-top: 54px;
}

/* La scheda del vocabolario completo si distingue con una tinta più decisa */
body.hub-page .deck-card--completo .deck-header-visual {
  background: rgba(var(--primary-rgb), 0.16);
}

/* ── Schede dei deck creati dall'utente ──────────────────────────────────── */
body.hub-page .deck-cover {
  position: relative;
  background-size: cover;
  background-position: center;
}

/* Con la copertina l'iniziale sparisce e resta una velatura per i pulsanti */
body.hub-page .deck-cover.ha-immagine .deck-iniziale {
  display: none;
}

body.hub-page .deck-cover.ha-immagine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1));
}

body.hub-page .deck-iniziale {
  font-size: 2.6rem;
  opacity: 0.55;
}

/* Un unico gruppo scuro invece di tre pastiglie sparse sulla copertina */
body.hub-page .deck-card-strumenti {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

body.hub-page .deck-card:hover .deck-card-strumenti,
body.hub-page .deck-card:focus-within .deck-card-strumenti {
  opacity: 1;
}

body.hub-page .deck-strumento {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

body.hub-page .deck-strumento:hover {
  background: var(--primary);
}

body.hub-page .deck-strumento--rischio:hover {
  background: #e05252;
}

/* ── Schede "crea" e "importa": invito all'azione, non contenuto ─────────── */
body.hub-page .deck-card--azione {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 30px 22px;
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  min-height: 200px;
}

body.hub-page .deck-card--azione:hover {
  background: rgba(var(--primary-rgb), 0.05);
}

body.hub-page .deck-azione-icona {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--accent-text);
  font-size: 1.2rem;
}

body.hub-page .deck-card--azione h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

body.hub-page .deck-card--azione p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
  max-width: 26ch;
}

/* ==========================================================================
   POPUP DEL DECK PERSONALIZZATO
   ========================================================================== */

/* Il bordo generale delle card (5% di bianco) su un campo da compilare non si
   vede proprio: qui serve un contorno più deciso, altrimenti il campo si
   confonde con lo sfondo del riquadro. Idem per la barra di scorrimento. */
#deck-modal {
  --bordo-campo:  rgba(255, 255, 255, 0.16);
  --bordo-scorri: rgba(255, 255, 255, 0.24);
}

[data-theme="light"] #deck-modal {
  --bordo-campo:  rgba(15, 23, 42, 0.20);
  --bordo-scorri: rgba(15, 23, 42, 0.28);
}

#deck-modal .srs-settings-box {
  width: min(740px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

#deck-modal .deck-modal-step {
  padding: 22px 24px 24px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--bordo-scorri) transparent;
}

/* Per i motori che non leggono scrollbar-width/color */
#deck-modal .deck-modal-step::-webkit-scrollbar { width: 10px }
#deck-modal .deck-modal-step::-webkit-scrollbar-track { background: transparent }
#deck-modal .deck-modal-step::-webkit-scrollbar-thumb {
  background: var(--bordo-scorri);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 10px;
}
#deck-modal .deck-modal-step::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
  background-clip: padding-box;
}

/* Un'unica colonna, letta dall'alto in basso: nome, descrizione,
   copertina, parole. Le due colonne affiancate obbligavano a saltare
   avanti e indietro con lo sguardo. */
#deck-modal .card-field-group {
  margin-bottom: 20px;
}

#deck-modal .card-field-group:last-child {
  margin-bottom: 0;
}

#deck-modal .field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  opacity: 1;
  margin-bottom: 9px;
}

/* Contatore dei caratteri: la descrizione deve restare corta quanto quelle
   dei deck predefiniti, altrimenti le schede si sfilacciano */
#deck-modal .field-conta {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-muted);
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

#deck-modal .field-conta.al-limite {
  color: var(--accent-text);
  opacity: 1;
}

#deck-modal .field-hint {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.8;
}

#deck-modal .field-input {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--bordo-campo);
  background: var(--bg-card);
  color: var(--text-main);
  font-family: 'Nunito', sans-serif;
  font-size: 0.92rem;
  transition: all 0.2s ease;
}

#deck-modal .field-input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

#deck-modal .field-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

#deck-modal .field-area {
  height: auto;
  padding: 12px 16px;
  line-height: 1.5;
  resize: vertical;
}

/* ── Copertina: un solo riquadro largo su cui si clicca ──────────────────── */
#deck-modal .deck-copertina {
  position: relative;
}

#deck-modal .deck-copertina-scelta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 104px;
  border: 1px dashed var(--bordo-campo);
  border-radius: 12px;
  background-color: var(--bg-card);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

#deck-modal .deck-copertina-scelta:hover {
  border-color: var(--primary);
  background-color: rgba(var(--primary-rgb), 0.06);
}

/* Riquadro di caricamento del pacchetto: stesso contorno degli altri campi */
#deck-modal .bulk-upload-area {
  border: 1px dashed var(--bordo-campo);
  border-radius: 12px;
  background: var(--bg-card);
  padding: 30px 22px;
  gap: 10px;
}

#deck-modal .bulk-upload-area:hover,
#deck-modal .bulk-upload-area.drag-over {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.06);
}

#deck-modal .deck-copertina-scelta.ha-immagine {
  border-style: solid;
}

#deck-modal .deck-copertina-scelta input[type="file"] { display: none }

#deck-modal .deck-copertina-vuota {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}

#deck-modal .deck-copertina-vuota i {
  color: var(--accent-text);
}

#deck-modal .deck-copertina-togli {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

#deck-modal .deck-copertina-togli:hover {
  background: #e05252;
}

/* ── Elenco delle parole ─────────────────────────────────────────────────── */
#deck-modal .deck-parole {
  min-height: 150px;
  font-family: var(--font-cjk), 'Nunito', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

/* Una riga discreta, non due pastiglie colorate */
#deck-modal .deck-parole-esito {
  margin: 9px 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

#deck-modal .deck-parole-esito.ha-avviso {
  color: #e0a052;
}

/* ── Nota sui media del pacchetto ────────────────────────────────────────── */
#deck-modal .deck-media-nota {
  margin-top: 18px;
  padding: 12px 16px;
  border: 1px solid var(--bordo-campo);
  border-radius: 12px;
  background: rgba(var(--primary-rgb), 0.06);
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--text-muted);
}

#deck-modal .deck-media-nota i {
  color: var(--accent-text);
  margin-right: 8px;
}

#deck-modal .deck-media-nota strong { color: var(--text-main) }

/* ── Pulsanti in fondo ───────────────────────────────────────────────────── */
#deck-modal .deck-form-azioni {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
}

#deck-modal .deck-form-azioni .btn-sub,
#deck-modal .deck-form-azioni .btn-primary-editor {
  height: 46px;
  padding: 0 24px;
  border-radius: 30px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#deck-modal .deck-form-azioni .btn-sub {
  border: 1px solid var(--bordo-campo);
  background: var(--bg-card);
  color: var(--text-muted);
}

#deck-modal .deck-form-azioni .btn-sub:hover {
  border-color: var(--primary);
  color: var(--primary);
}

#deck-modal .deck-form-azioni .btn-primary-editor {
  border: none;
  background: var(--primary);
  color: #fff;
}

#deck-modal .deck-form-azioni .btn-primary-editor:disabled {
  opacity: 0.6;
  cursor: default;
}

@media (max-width: 768px) {
  body.hub-page .sezione-deck-personali {
    margin-top: 36px;
  }

  body.hub-page .deck-card--azione {
    min-height: 0;
    padding: 24px 20px;
  }

  body.hub-page .deck-azione-icona {
    width: 44px;
    height: 44px;
    font-size: 1.05rem;
  }

  /* Sul tocco non c'è passaggio del mouse: i pulsanti restano sempre visibili */
  body.hub-page .deck-card-strumenti {
    opacity: 1;
  }

  /* Il popup diventa un foglio agganciato in basso */
  #deck-modal .srs-settings-box {
    width: 100vw;
    left: 0;
    right: 0;
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
  }

  #deck-modal .deck-parole {
    min-height: 130px;
  }

  #deck-modal .deck-modal-step {
    padding: 18px 18px 20px;
  }

  #deck-modal .deck-copertina-scelta {
    height: 88px;
  }

  #deck-modal .deck-form-azioni > * {
    flex: 1;
  }
}

/* ==========================================================================
   PAGINA MINING (mine.html) — lettore a tutto schermo, ispirato ad asbplayer
   Tutte le classi hanno prefisso .mine- per non collidere con il resto.
   ========================================================================== */

/* Altezza FISSA, non `min-height`: con `min-height` il corpo può crescere,
   quindi nessun discendente è mai costretto a restringersi e l'elenco delle
   battute sfonda la pagina trascinandosi dietro video e barra dei comandi. */
body.mine-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

body.mine-page > header {
  flex: 0 0 auto;
}

.mine-app {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* --- Palco: il video occupa tutto lo spazio disponibile --- */

/* Scena = palco + pannello affiancati. Il pannello RESTRINGE il video
   invece di coprirlo: così non resta mai una fascia nera morta a destra
   e il testo dell'elenco non può finire fuori dalla finestra. */
.mine-scena {
  position: relative;   /* ancora del pannello sovrapposto su schermo stretto */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

/* Senza filmato il palco non è uno schermo: segue il tema del sito.
   Col filmato torna nero, perché lì fa da fondo alle bande del video. */
.mine-stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  background: var(--bg-page);
  overflow: hidden;
}

.mine-stage.ha-video {
  background: #000;
}

/* L'elemento video è a tutta area: da vuoto coprirebbe il palco di nero */
.mine-stage:not(.ha-video) video {
  display: none;
}

.mine-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  /* Tiene il video su un proprio livello di composizione: senza questo,
     ridimensionando l'elemento (apertura del pannello) il compositore può
     scartarne la superficie e lasciare il riquadro nero. */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* --- Stato vuoto --- */

.mine-drop {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
}

.mine-stage.ha-video .mine-drop {
  display: none;
}

/* Lo stato vuoto sta sul palco senza filmato, quindi sul fondo del sito:
   segue il tema. Restano chiari fissi solo gli elementi che stanno SOPRA
   il video (.mine-top, .mine-subs, .mine-dragover). */
.mine-drop-testo {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-main);
}

.mine-drop-nota {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  opacity: 0.75;
}

/* Le scorciatoie stanno qui e non sotto la barra: durante la riproduzione
   ogni pixel di altezza va al video. */
.mine-drop-tasti {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  opacity: 0.65;
}

.mine-drop-tasti strong {
  color: var(--text-main);
}

.mine-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.mine-link:hover {
  color: var(--primary);
}

/* --- Velo mostrato durante il trascinamento --- */

.mine-dragover {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(var(--primary-rgb), 0.25);
  border: 3px dashed var(--secondary);
  z-index: 6;
  pointer-events: none;
}

.mine-stage.trascinamento .mine-dragover {
  display: flex;
}

.mine-dragover span {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
}

/* --- Comandi sovrapposti in alto: compaiono al passaggio del mouse --- */

.mine-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}

.mine-stage:hover .mine-top,
.mine-stage:focus-within .mine-top {
  opacity: 1;
}

.mine-stage:not(.ha-video) .mine-top {
  display: none;
}

.mine-top-sx,
.mine-top-dx {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.mine-nome {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}

/* --- Riga di sottotitolo cliccabile, sovrapposta al video --- */

/* Le variabili --sub-* sono scritte da _applicaOpzioni(): il rendering
   dei sottotitoli non sa nulla delle preferenze, le legge da qui. */
/* ⚠️ NON usare `display: flex` qui: renderebbe ogni parola un elemento
   flessibile, e su schermo stretto ognuna si restringerebbe andando a capo
   per conto suo (una colonna per parola). Serve un normale flusso di testo. */
.mine-subs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--sub-alt, 26px);
  z-index: 5;
  display: block;
  text-align: center;
  padding: 0 20px;
  pointer-events: none;   /* solo le parole sono cliccabili */
}

.mine-subs:empty {
  display: none;
}

.mine-subs > span {
  pointer-events: auto;
}

.mine-tok {
  position: relative;      /* ancora per il pallino di .ha-esempio */
  font-size: calc(clamp(1.3rem, 2.6vw, 2.1rem) * var(--sub-dim, 1));
  font-weight: 600;
  line-height: 1.55;
  color: var(--sub-c-neutro, #fff);
  background: var(--sub-sfondo, rgba(0, 0, 0, 0.62));
  padding: 4px 0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

.mine-tok:first-child { padding-left: 12px; border-radius: 6px 0 0 6px; }
.mine-tok:last-child  { padding-right: 12px; border-radius: 0 6px 6px 0; }

/* Solo le parole trovate nel dizionario sono cliccabili, e il colore dice
   a che punto sei con quella parola. */
.mine-tok-hit {
  cursor: pointer;
  font-weight: var(--sub-peso, 700);
  text-decoration: var(--sub-linea, none);
  text-underline-offset: 4px;
  transition: color 0.15s, background 0.15s;
}

.mine-tok-hit.stato-nuova    { color: var(--sub-c-nuova, #a78bfa); }
.mine-tok-hit.stato-studiata { color: var(--sub-c-studiata, #5eead4); }

/* "Ha già un esempio" non è un colore ma un pallino sotto la parola, che
   PRENDE IL POSTO della sottolineatura: resta leggibile insieme allo stato
   di studio invece di sostituirlo, e non allarga la riga. */
.mine-tok-hit.ha-esempio {
  text-decoration: none;
}

.mine-tok-hit.ha-esempio::after {
  content: "";
  display: var(--sub-pallino, block);
  position: absolute;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.mine-tok-hit:hover {
  color: #fff;
  background: rgba(var(--primary-rgb), 0.85);
}

.mine-sub-vuoto,
.mine-sub-attesa {
  opacity: 0.45;
}

/* --- Pannello delle battute --- */

.mine-panel {
  /* La base viene ricalcolata da _adattaPannello() in modo che al palco
     restino le proporzioni esatte del filmato: 340px è solo il ripiego. */
  flex: 0 0 340px;
  max-width: 50%;
  min-width: 0;
  min-height: 0;               /* stessa ragione di .mine-cues */
  display: none;               /* chiuso: non occupa spazio */
  flex-direction: column;
  /* Il pannello sta ACCANTO al video, non sopra: segue il tema del sito.
     Restano chiari a prescindere solo gli elementi sovrapposti al video
     (.mine-top, .mine-subs, .mine-drop). */
  background: var(--bg-card);
  border-left: 1px solid var(--border-color);
}

.mine-panel.aperto {
  display: flex;
}

.mine-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 16px;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
}

/* `min-height: 0` NON è opzionale: senza, la dimensione minima automatica di
   un elemento flessibile è quella del suo contenuto, quindi con centinaia di
   battute l'elenco si rifiuta di restringersi (36.000 px con 600 battute),
   `overflow-y` non entra mai in gioco e l'altezza si propaga a pannello,
   scena, palco e video — spingendo il video e la barra fuori dallo schermo. */
.mine-cues {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.mine-cue {
  display: flex;
  gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted);
  /* Un episodio ha centinaia di battute: così il browser disegna solo
     quelle a schermo invece di impaginarle tutte all'apertura. */
  content-visibility: auto;
  contain-intrinsic-size: auto 42px;
}

.mine-cue:hover {
  background: var(--bg-secondary);
}

.mine-cue.attiva {
  background: rgba(var(--primary-rgb), 0.16);
  border-left: 3px solid var(--primary);
  padding-left: 13px;
  color: var(--text-main);
  font-weight: 600;
}

.mine-cue-t {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
  font-size: 0.76rem;
  padding-top: 2px;
}

.mine-cue-x {
  min-width: 0;
  word-break: break-word;
}

.mine-vuoto {
  padding: 26px 16px;
  text-align: center;
  color: var(--text-muted);
  opacity: 0.6;
  font-size: 0.88rem;
  margin: 0;
}

/* --- Barra in basso --- */

.mine-bar {
  position: relative;   /* ancora del popup dei comandi secondari su mobile */
  flex: 0 0 auto;
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
}

/* Su desktop i comandi secondari stanno in barra: il pulsante non serve.
   Il selettore è doppio di proposito: `.mine-ico` è definita più sotto e a
   parità di specificità vincerebbe lei, rimettendo il pulsante a schermo. */
.mine-bar .mine-btn-extra {
  display: none;
}

/* Barra di scorrimento: c'è solo quando c'è un video.
   L'altezza deve bastare a contenere il pallino INTERO, altrimenti
   il browser lo taglia a metà sul bordo della barra. */
.mine-seek {
  display: none;
  width: 100%;
  height: 14px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.mine-app.con-video .mine-seek {
  display: block;
}

.mine-seek:focus {
  outline: none;
}

.mine-seek::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--bg-secondary);
}

.mine-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: var(--primary);
  margin-top: -4px;          /* centra il pallino sulla traccia da 4px */
}

.mine-seek::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--bg-secondary);
}

.mine-seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: var(--primary);
}

.mine-bar-vuota {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
}

.mine-app.attivo .mine-bar-vuota {
  display: none;
}

.mine-btn-largo {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--accent-text);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.mine-btn-largo:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
}

.mine-bar-piena {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 5px;
  flex-wrap: wrap;
}

.mine-app.attivo .mine-bar-piena {
  display: flex;
}

.mine-gruppo {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mine-gruppo-centro {
  margin: 0 auto;
}

/* Pulsanti a icona */
.mine-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-main);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.mine-ico:hover {
  background: var(--bg-secondary);
  color: var(--accent-text);
}

.mine-ico.grande {
  width: 36px;
  height: 36px;
  font-size: 1.05rem;
}

.mine-ico.piccolo {
  width: 26px;
  height: 26px;
  font-size: 0.9rem;
}

.mine-ico.acceso {
  color: var(--accent-text);
  background: rgba(var(--primary-rgb), 0.12);
}

/* Solo le icone SOPRA il video restano chiare: lì sotto c'è il filmato,
   non lo sfondo del sito. Quelle del pannello seguono il tema. */
.mine-top .mine-ico {
  color: rgba(255, 255, 255, 0.85);
}

.mine-top .mine-ico:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.mine-vol {
  width: 76px;
  height: 4px;
  align-self: center;
  cursor: pointer;
  accent-color: var(--primary);
}

/* Tutti i comandi della barra sulla stessa altezza: senza, ognuno si
   appoggiava a una linea diversa e la fila sembrava sfalsata. */
.mine-bar-piena .mine-passo,
.mine-bar-piena .mine-sel,
.mine-bar-piena .mine-tempo {
  height: 32px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

.mine-tempo {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  line-height: 1;
  color: var(--text-muted);
  margin-left: 6px;
  white-space: nowrap;
}

/* Coppie meno/valore/più: sincronia e velocità */
.mine-passo {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--bg-secondary);
}

.mine-val {
  min-width: 58px;
  padding: 4px 6px;
  border: none;
  background: transparent;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 5px;
}

.mine-val:hover {
  color: var(--accent-text);
}


/* --- Modale parola --- */

/* Tre livelli di superficie, così la scheda ha profondità in entrambi i temi:
   la scheda sta sopra (--bg-card), il corpo è incassato (--bg-page), i campi
   e il riquadro audio risalgono (--bg-card). */
.mine-modal-box {
  max-width: 980px;      /* i campi hanno bisogno di respiro */
  width: 94vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
}

/* Dodici colonne: frase e traduzione a tutta larghezza, una sotto l'altra;
   sotto, immagine più stretta e audio più largo affiancati.
   Il corpo scorre, e l'intestazione col piede restano ancorati. */
.mine-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Fondo incassato rispetto a intestazione e piede: separa la zona di
     lavoro e segue il tema, chiaro o scuro. */
  background: var(--bg-page);
  padding: 22px 24px 24px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 22px 18px;
  align-items: start;
}

.mine-modal-body > .mine-m-campo { grid-column: 1 / -1; }
.mine-m-media                    { grid-column: 1 / -1; }

/* In griglia l'immagine restava più stretta della colonna assegnata — una
   volta fissata l'altezza, la larghezza gliela detta il formato 16:9 — e
   davanti all'audio restava un vuoto. In riga flessibile l'audio si prende
   tutto lo spazio che avanza. */
.mine-m-media {
  display: flex;
  align-items: stretch;
  gap: 16px;
}

/* Larghezza FISSA all'immagine: lasciandogliela decidere, con `flex-basis:
   auto` prendeva quella naturale del fotogramma (642px) e schiacciava l'audio.
   L'altezza la detta la riga, e il fotogramma ci sta dentro con `contain`. */
/* `align-self: center` è indispensabile: con lo stiramento della riga il
   riquadro perderebbe l'altezza che gli detta il formato del fotogramma e
   le bande nere tornerebbero. */
.mine-m-media > .mine-m-scatto {
  flex: 0 0 320px;
  max-width: 42%;
  align-self: center;
}

.mine-m-media > .mine-m-audio {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- Barra di scorrimento su misura: niente frecce, colore primario ---
   Il bordo trasparente con `background-clip` fa da margine, così il cursore
   non tocca il bordo del riquadro. */
/* ⚠️ `scrollbar-width`/`scrollbar-color` NON vanno messe qui: in Chrome le
   proprietà standard hanno la precedenza e DISATTIVANO gli pseudo-elementi
   `::-webkit-scrollbar`, riportando le frecce. Si danno solo ai browser che
   gli pseudo-elementi non li hanno (Firefox). */
@supports not selector(::-webkit-scrollbar) {
  .mine-modal-body,
  .mine-cues,
  .mine-opz {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
  }
}

.mine-modal-body::-webkit-scrollbar,
.mine-cues::-webkit-scrollbar,
.mine-opz::-webkit-scrollbar {
  width: 10px;
}

.mine-modal-body::-webkit-scrollbar-button,
.mine-cues::-webkit-scrollbar-button,
.mine-opz::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.mine-modal-body::-webkit-scrollbar-track,
.mine-cues::-webkit-scrollbar-track,
.mine-opz::-webkit-scrollbar-track {
  background: transparent;
}

.mine-modal-body::-webkit-scrollbar-thumb,
.mine-cues::-webkit-scrollbar-thumb,
.mine-opz::-webkit-scrollbar-thumb {
  background: var(--primary);
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 999px;
}

.mine-modal-body::-webkit-scrollbar-thumb:hover,
.mine-cues::-webkit-scrollbar-thumb:hover,
.mine-opz::-webkit-scrollbar-thumb:hover {
  background: var(--secondary);
  background-clip: content-box;
}

.mine-m-testata,
.mine-modal-footer,
.mine-modal-box > .srs-settings-header {
  flex: 0 0 auto;
}

/* La scelta di quale esempio sostituire prende tutta la larghezza */
#mine-m-sostituisci {
  grid-column: 1 / -1;
}

/* Intestazione: la parola è il soggetto della scheda, sta in alto
   e centrata, con sotto le informazioni sempre centrate. */
.mine-m-testata {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 24px 20px;
  text-align: center;
  border-bottom: 1px solid var(--border-color);
}

.mine-m-riga {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
}

.mine-m-word {
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.15;
}

.mine-m-lettura {
  font-size: 1rem;
  color: var(--accent-text);
}

.mine-m-livello,
.mine-m-conta {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

/* I significati possono essere lunghi: una misura di lettura invece di una
   riga che corre da un bordo all'altro. */
.mine-m-sensi {
  max-width: 64ch;
  margin: 2px auto 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

/* Fotogramma: cornice pulita, niente riquadro grigio attorno */
.mine-m-scatto {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border-color);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mine-m-scatto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.mine-m-scatto figcaption {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  padding: 12px;
  text-align: center;
}

/* Blocco audio */
.mine-m-audio {
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* il contenuto riempie l'altezza dell'immagine */
  gap: 13px;
  padding: 14px 16px 16px;
  border-radius: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}

.mine-m-audio-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* La durata come pastiglia: si legge a colpo d'occhio e non sembra
   testo dimenticato accanto all'etichetta. */
.mine-m-durata {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mine-m-durata:empty {
  display: none;
}

/* Il lettore sta al centro dello spazio che avanza, invece di lasciare
   un vuoto fra l'intestazione e i comandi del ritaglio. */
.mine-m-audio-centro {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-height: 0;
}

.mine-m-stato {
  margin: 0;
  font-size: 0.76rem;
  color: var(--text-muted);
  min-height: 1em;
}

.mine-m-stato:empty {
  display: none;
}

/* Margini del ritaglio, su una riga sola */
.mine-taglio-riga {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.mine-taglio-nome {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.mine-taglio-riga .mine-val {
  min-width: 40px;
  text-align: center;
  cursor: default;
}

.mine-taglio-riga #mine-m-rec {
  margin-left: auto;
}

.mine-m-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mine-m-campo label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.mine-m-campo textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--border-color);
  /* Il corpo della scheda ora è `--bg-page`: i campi salgono di un gradino
     per staccarsi, invece di confondersi col fondo. */
  background: var(--bg-card);
  color: var(--text-main);
  font-family: inherit;
  font-size: 1rem;
  resize: vertical;
}

.mine-m-campo textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.16);
}

.mine-m-campo textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.55;
}

.mine-m-mini {
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 0.85rem;
}

.mine-m-mini:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.mine-m-etichetta {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* Il lettore audio è un elemento nativo del browser: non si colora con
   `background`/`color`, ma con `color-scheme`, che gli fa cambiare tema.
   Senza, in modalità scura resta un blocco bianco in mezzo alla scheda. */
.mine-m-audio audio {
  width: 100%;
  height: 38px;
  display: block;
  border-radius: 999px;
  color-scheme: light;
}

[data-theme="dark"] .mine-m-audio audio {
  color-scheme: dark;
}

.mine-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  opacity: 0.65;
  margin: 0;
}

.mine-m-avviso {
  font-size: 0.87rem;
  color: var(--warn);
  margin: 0 0 8px;
}

.mine-sost-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mine-sost {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  font-size: 0.88rem;
  line-height: 1.4;
}

.mine-sost:hover {
  border-color: var(--primary);
}

.mine-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 18px 24px 20px;
  border-top: 1px solid var(--border-color);
}

/* Pulsanti del piede: forma a pastiglia, come le etichette dell'intestazione */
.mine-btn {
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.mine-btn-sec {
  background: transparent;
  border-color: var(--primary);
  color: var(--text-main);
}

.mine-btn-sec:hover:not(:disabled) {
  background: rgba(var(--primary-rgb), 0.12);
}

.mine-btn-pri {
  background: var(--primary);
  color: #fff;
}

.mine-btn-pri:hover:not(:disabled) {
  background: var(--secondary);
}

.mine-modal-footer button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Schermo intero ---
   Il selettore è `:root` e non `.mine-scena`: a schermo intero va la pagina
   intera, altrimenti i popup figli del body non verrebbero disegnati. */
:root:fullscreen .mine-stage {
  background: #000;
}

:root:fullscreen .mine-subs {
  bottom: calc(var(--sub-alt, 26px) + 34px);
}

/* --- Anteprima rapida del significato (stile Yomitan) --- */

.mine-peek {
  position: fixed;
  z-index: 9998;
  width: 320px;
  max-width: 88vw;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  pointer-events: none;   /* non deve mai rubare il clic alla parola */
}

.mine-peek-testa {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.mine-peek-word {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-main);
}

.mine-peek-lettura {
  font-size: 0.95rem;
  color: var(--accent-text);
}

.mine-peek-tag {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.mine-peek-tag span:empty {
  display: none;
}

.mine-peek-livello,
.mine-peek-pos,
.mine-peek-conta {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
}

.mine-peek-sensi {
  margin: 9px 0 0;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  list-style: decimal;
}

.mine-peek-pie {
  margin-top: 9px;
  padding-top: 7px;
  border-top: 1px solid var(--border-color);
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.65;
}

/* --- Pannello: aspetto dei sottotitoli --- */

.mine-opz {
  position: fixed;
  right: 14px;
  bottom: 74px;
  z-index: 9997;
  width: 300px;
  max-width: 92vw;
  max-height: 70vh;
  overflow-y: auto;
  padding: 12px 14px 14px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
}

.mine-opz-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.mine-opz-titolo {
  margin: 14px 0 8px;
  padding-top: 11px;
  border-top: 1px solid var(--border-color);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.mine-opz-riga {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  font-size: 0.83rem;
  color: var(--text-main);
  cursor: pointer;
}

.mine-opz-riga > span:first-child {
  flex: 0 0 108px;
  color: var(--text-muted);
}

.mine-opz-riga input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 4px;
  accent-color: var(--primary);
  cursor: pointer;
}

.mine-opz-riga output {
  flex: 0 0 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.76rem;
  color: var(--text-muted);
}

/* Righe con il quadratino di colore */
.mine-opz-riga.colore > span {
  flex: 1 1 auto;
  color: var(--text-main);
}

.mine-opz-riga input[type="color"] {
  flex: 0 0 30px;
  width: 30px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.mine-opz-riga.interruttore {
  gap: 9px;
}

.mine-opz-riga.interruttore input {
  flex: 0 0 auto;
  accent-color: var(--primary);
  cursor: pointer;
}

.mine-opz-riga.interruttore > span {
  flex: 1 1 auto;
  color: var(--text-main);
}

/* Scelta del tasto per l'anteprima, nella barra */
.mine-sel {
  height: 28px;
  padding: 0 6px;
  border-radius: 7px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.mine-sel:hover {
  border-color: var(--primary);
}

/* --- Schermi stretti --- */

@media (max-width: 860px) {
  /* ── Barra: UNA riga sola con il solo essenziale ──────────────────────
     battuta indietro / ripeti / avanti · riproduci · audio · tempo · «altro».
     Tutto il resto passa nel popup dei comandi secondari. */
  .mine-bar-piena {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 2px;
    padding: 5px 8px 7px;
  }

  .mine-gruppo-centro { order: 1; margin: 0; gap: 2px; }
  .mine-gruppo-sx     { order: 2; gap: 2px; }
  /* Stessa specificità della regola che lo nasconde su desktop, altrimenti
     resterebbe nascosto proprio dove serve */
  .mine-bar .mine-btn-extra { order: 3; display: inline-flex; flex-shrink: 0; }

  .mine-vol { display: none; }          /* si regola col volume del telefono */
  .mine-tempo { margin-left: 4px; font-size: 0.76rem; }

  /* Il tasto per l'anteprima presuppone una tastiera: su telefono non serve */
  #mine-tasto-peek { display: none; }

  /* ── Comandi secondari: da riga in barra a popup sopra la barra ── */
  .mine-extra {
    position: absolute;
    right: 8px;
    bottom: calc(100% + 8px);
    z-index: 9996;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 232px;
    max-width: calc(100vw - 16px);
    padding: 12px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
  }

  .mine-extra.aperto { display: flex; }

  /* Dentro il popup i comandi stanno larghi, non stretti come in barra */
  .mine-extra .mine-passo { width: 100%; justify-content: space-between; height: 34px; }
  .mine-extra .mine-val   { min-width: 56px; font-size: 0.82rem; }
  .mine-extra > .mine-ico { width: 100%; height: 34px; justify-content: flex-start; padding-left: 10px; }

  /* Le icone nel popup hanno bisogno di un'etichetta: da sole non si capiscono */
  .mine-extra > .mine-ico::after {
    content: attr(title);
    margin-left: 10px;
    font-size: 0.82rem;
    font-weight: 500;
    font-family: "Montserrat", sans-serif;
  }

  .mine-drop-tasti {
    display: none;
  }

  .mine-drop-testo {
    font-size: 1.15rem;
  }

  .mine-bar-vuota {
    flex-direction: column;
  }

  /* Su schermo stretto tutto va in verticale: immagine e audio non stanno
     affiancati, e nella modale lo scorrimento è la norma. */
  .mine-modal-body {
    grid-template-columns: 1fr;
    padding: 16px 16px 18px;
    gap: 16px;
  }

  .mine-modal-body > .mine-m-campo,
  .mine-m-media {
    grid-column: 1 / -1;
  }

  .mine-m-media {
    flex-direction: column;
  }

  .mine-m-media > .mine-m-scatto {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
  }

  /* Su schermo stretto la scheda prende tutto: lo spazio serve tutto ai campi */
  .mine-modal-box {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
  }

  .mine-m-testata {
    padding: 16px 16px 14px;
  }

  .mine-m-word {
    font-size: 1.6rem;
  }

  /* Pulsanti impilati: il principale in alto, dove arriva il pollice */
  .mine-modal-footer {
    flex-direction: column-reverse;
    padding: 14px 16px 16px;
  }

  .mine-btn {
    width: 100%;
  }

  .mine-peek {
    width: 260px;
  }

  /* Su schermo stretto la scena si divide in ORIZZONTALE: video sopra, elenco
     sotto. Affiancarli lasciava al video novanta pixel; sovrapporli lo copriva
     del tutto. Così restano visibili entrambi.
     La larghezza calcolata da _adattaPannello() vale solo da 861px in su. */
  .mine-scena {
    flex-direction: column;
  }

  /* L'altezza la calcola _adattaPannello() in base a quanto spazio lascia il
     video: il 42% qui è solo il ripiego finché il formato non è noto. */
  .mine-panel.aperto {
    position: static;
    flex: 0 0 42%;
    width: 100%;
    max-width: none;
    min-height: 0;
    border-left: none;
    border-top: 1px solid var(--border-color);
  }

  /* Il pannello dell'aspetto sale da sotto, a tutta larghezza */
  .mine-opz {
    right: 8px;
    left: 8px;
    width: auto;
    max-height: 62vh;
  }
}

/* ══ Telefono girato in orizzontale: tutto lo schermo al video ═════════════
   Via la navbar del sito e comandi sovrapposti al filmato, come in un
   lettore a schermo intero. Deve stare DOPO il blocco dei 860px, perché in
   orizzontale un telefono resta sotto quella soglia e va sovrascritto. */
@media (orientation: landscape) and (max-height: 520px) {

  /* Il secondo selettore non è di troppo: il sito ha già
     `body:not(.landing-page) > header:has(.premium-nav)` con specificità (0,2,2),
     che batterebbe `body.mine-page > header` (0,1,2) e lascerebbe la navbar. */
  body.mine-page > header,
  body.mine-page > header:has(.premium-nav) {
    display: none;
  }

  .mine-app {
    position: relative;
  }

  /* In orizzontale l elenco sta meglio affiancato che sotto */
  .mine-scena {
    flex-direction: row;
  }

  .mine-panel.aperto {
    position: static;
    border-left: 1px solid var(--border-color);
    border-top: none;
  }

  /* La barra galleggia sul video invece di rubargli altezza */
  .mine-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 7;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.4) 55%, transparent);
    border-top: none;
  }

  .mine-bar .mine-ico,
  .mine-bar .mine-tempo,
  .mine-bar .mine-val {
    color: #fff;
  }

  .mine-bar .mine-ico:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
  }

  .mine-bar .mine-passo {
    background: rgba(255, 255, 255, 0.14);
  }

  .mine-seek::-webkit-slider-runnable-track {
    background: rgba(255, 255, 255, 0.3);
  }

  /* I sottotitoli salgono, per non finire dietro ai comandi */
  .mine-subs {
    bottom: calc(var(--sub-alt, 26px) + 34px);
  }

  /* I popup restano ancorati alla barra e non escono mai dallo schermo */
  .mine-extra {
    bottom: calc(100% + 6px);
    max-height: 76vh;
    overflow-y: auto;
  }

  .mine-opz {
    bottom: 60px;
    left: auto;
    right: 8px;
    width: 300px;
    max-height: 72vh;
  }

  .mine-peek {
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* ══ Schermo intero ═══════════════════════════════════════════════════════
   Va a schermo intero TUTTA la pagina (vedi toggleSchermoIntero): solo così
   i popup, che sono figli del body, continuano a essere disegnati. La navbar
   del sito la togliamo qui, per lasciare tutto al video. */
:root:fullscreen body.mine-page > header,
:root:fullscreen body.mine-page > header:has(.premium-nav) {
  display: none;
}

:root:fullscreen .mine-app {
  height: 100vh;
}

/* Invito a toccare per lo schermo intero: i browser non lo concedono
   automaticamente alla rotazione, serve un gesto. */
.mine-fs-invito {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

body.mine-invito-schermo .mine-fs-invito {
  display: inline-flex;
}

body.a-schermo-intero .mine-fs-invito {
  display: none;
}

/* ══ Telefono in orizzontale: scheda di salvataggio compatta ═══════════════
   Con 390px di altezza, intestazione fissa e piede si mangiavano quasi tutto
   lo spazio scorrevole. Qui la larghezza abbonda, quindi il contenuto torna
   su due colonne e le parti fisse si stringono. */
@media (orientation: landscape) and (max-height: 520px) {

  .mine-modal-box > .srs-settings-header {
    padding: 7px 14px;
  }

  .mine-m-testata {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 9px;
    padding: 7px 14px;
  }

  .mine-m-word {
    font-size: 1.3rem;
  }

  /* I significati su una riga sola: per esteso ci sono nell anteprima */
  .mine-m-sensi {
    max-width: 100%;
    margin: 0;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* I tre campi restano uno sotto l altro anche qui: si scorre, ma la
     struttura è la stessa ovunque e non cambia sotto le dita. */
  .mine-modal-body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding: 12px 14px;
    gap: 12px 14px;
  }

  .mine-modal-body > .mine-m-campo {
    grid-column: 1 / -1;
  }

  /* Immagine e audio affiancati: in orizzontale la larghezza abbonda.
     ⚠️ La larghezza dell immagine va RIDATA: il blocco verticale le mette
     `width: 100%`, che qui le farebbe prendere tutta la riga lasciando
     all audio una striscia di trenta pixel. */
  .mine-m-media {
    flex-direction: row;
  }

  .mine-m-media > .mine-m-scatto {
    flex: 0 0 260px;
    width: 260px;
    max-width: 40%;
    align-self: center;
  }

  .mine-m-media > .mine-m-audio {
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
  }

  .mine-m-campo textarea {
    font-size: 0.9rem;
  }

  /* Piede su una riga: i pulsanti stanno affiancati */
  .mine-modal-footer {
    flex-direction: row;
    padding: 9px 14px 11px;
  }

  .mine-btn {
    width: auto;
    padding: 8px 18px;
  }
}


/* ══ Sottotitolo di supporto ═══════════════════════════════════════════════
   Seconda riga sotto a quella da studiare: serve a capire, non si tocca.
   Quando c e, la riga principale sale per farle posto. */
.mine-subs2 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--sub-alt, 26px);
  z-index: 5;
  display: block;
  text-align: center;
  padding: 0 20px;
  pointer-events: none;
}

.mine-subs2:empty {
  display: none;
}

.mine-subs2 span {
  /* Segue la dimensione generale, ma con un fattore proprio: serve a capire,
     non a studiare, quindi di norma sta più bassa. */
  font-size: calc(clamp(1.3rem, 2.6vw, 2.1rem) * var(--sub-dim, 1) * var(--sub2-dim, 0.72));
  font-weight: 500;
  line-height: 1.5;
  color: var(--sub2-colore, #e2e8f0);
  background: var(--sub-sfondo, rgba(0, 0, 0, 0.62));
  padding: 3px 12px;
  border-radius: 6px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}

body.mine-con-supporto .mine-subs {
  bottom: calc(var(--sub-alt, 26px) + 40px);
}

/* ══ Finestra delle tracce dentro al video ═════════════════════════════════ */
.mine-tracce-box {
  max-width: 620px;
  width: 94vw;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
}

.mine-tracce-corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px 20px;
  background: var(--bg-page);
}

#mine-tracce-elenco {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mine-traccia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}

.mine-traccia.non-usabile {
  opacity: 0.55;
}

.mine-traccia-nome {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  min-width: 0;
}

.mine-traccia-azioni {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.mine-traccia-azioni .mine-btn {
  padding: 6px 14px;
  font-size: 0.8rem;
}

@media (max-width: 860px) {
  .mine-traccia {
    flex-direction: column;
    align-items: stretch;
  }

  .mine-traccia-azioni .mine-btn {
    flex: 1;
  }
}

/* Sezioni della finestra delle tracce: Audio e Sottotitoli */
.mine-tracce-sezione {
  margin: 14px 0 2px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

.mine-tracce-sezione:first-child {
  margin-top: 0;
}

/* Traccia audio attualmente in uso */
.mine-traccia.scelta {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
}

.mine-traccia-azioni .mine-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Avanzamento delle estrazioni: su un episodio intero ffmpeg impiega decine
   di secondi, e una scritta ferma non dice se sta lavorando o si e piantato. */
.mine-prog {
  height: 8px;
  margin: 12px 0 6px;
  border-radius: 999px;
  background: var(--bg-secondary);
  overflow: hidden;
}

.mine-prog-riempi {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--primary);
  transition: width 0.2s linear;
}

.mine-prog-quota {
  margin: 0;
  text-align: right;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* Divisore fra i gruppi di comandi: materiale · regolazioni · vista */
.mine-divisore {
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  margin: 0 4px;
  background: var(--border-color);
}

/* Nel popup su schermo stretto i comandi sono impilati: il divisore gira */
@media (max-width: 860px) {
  .mine-extra .mine-divisore {
    width: 100%;
    height: 1px;
    margin: 2px 0;
  }
}

/* Invito a leggere tutte le tracce in un colpo: sta su una riga per sé */
.mine-btn-largo-riga {
  display: block;
  width: 100%;
  margin-bottom: 4px;
  text-align: center;
}