:root{
    --bg:#fff8ed;
    --bg-soft:#fff1de;
    --surface:#fffdf9;
    --surface-strong:#ffffff;
    --text:#251714;
    --muted:#76645c;
    --brand:#cf3f31;
    --brand-dark:#982d24;
    --gold:#e4a833;
    --teal:#0d7772;
    --teal-soft:#e4f4f1;
    --border:#ecd9c6;
    --shadow:0 24px 70px rgba(81,45,27,.13);
    --shadow-soft:0 14px 36px rgba(81,45,27,.09);
    --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 10% 0%,rgba(253,213,154,.52),transparent 28rem),
        radial-gradient(circle at 100% 12%,rgba(211,63,49,.12),transparent 26rem),
        var(--bg);
    line-height:1.6;
    overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.site-bg-orb{position:fixed;z-index:-1;border-radius:999px;filter:blur(20px);opacity:.45;pointer-events:none}
.site-bg-orb-one{left:-8rem;top:12rem;width:20rem;height:20rem;background:#ffdca5}
.site-bg-orb-two{right:-9rem;top:20rem;width:24rem;height:24rem;background:#f6c5b8}

.site-header{
    position:sticky;
    top:0;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin:1rem auto 0;
    width:min(1180px,calc(100% - 2rem));
    padding:.8rem 1rem;
    background:rgba(255,253,249,.84);
    backdrop-filter:blur(18px);
    border:1px solid var(--border);
    border-radius:999px;
    box-shadow:var(--shadow-soft);
}
.brand{display:inline-flex;align-items:center;gap:.7rem;font-weight:950;letter-spacing:-.03em}
.brand-mark{display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-dark));border-radius:.95rem;box-shadow:0 10px 24px rgba(207,63,49,.25)}
.brand-text{white-space:nowrap}
.site-nav{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;color:var(--muted);font-weight:800}
.site-nav a:hover,.nav-button:hover{color:var(--brand)}
.inline-form{display:inline}
.nav-button{border:0;background:transparent;cursor:pointer;color:inherit;font-weight:800}
.mobile-nav-toggle{display:none;border:1px solid var(--border);border-radius:999px;background:#fff;padding:.55rem .85rem;font-weight:900}

.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:2.9rem;
    padding:.78rem 1.22rem;
    border:1px solid var(--brand);
    border-radius:999px;
    background:linear-gradient(135deg,var(--brand),var(--brand-dark));
    color:#fff;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 12px 26px rgba(207,63,49,.18);
}
.button:hover{transform:translateY(-1px)}
.button-outline{background:#fff;color:var(--brand);box-shadow:none}
.button-small{min-height:2.25rem;padding:.48rem .86rem;font-size:.92rem}
.text-link{color:var(--brand);font-weight:950}

.hero,.section,.page-section{width:min(1180px,calc(100% - 2rem));margin:0 auto}
.hero{padding:clamp(3rem,7vw,6rem) 0}
.hero-split{display:grid;grid-template-columns:1.08fr .92fr;gap:2rem;align-items:center}
.hero h1{
    max-width:780px;
    margin:.4rem 0 1rem;
    font-size:clamp(2.55rem,6vw,5.9rem);
    line-height:.92;
    letter-spacing:-.075em;
}
.hero-lead{max-width:660px;color:var(--muted);font-size:1.15rem}
.eyebrow{margin:0 0 .55rem;color:var(--brand);font-size:.82rem;font-weight:950;text-transform:uppercase;letter-spacing:.14em}
.hero-actions,.button-row{display:flex;gap:.85rem;flex-wrap:wrap;align-items:center;margin-top:1.45rem}
.language-pills{display:flex;gap:.55rem;flex-wrap:wrap;margin:1.35rem 0}
.language-pills span,.course-meta span,.path-steps span{
    display:inline-flex;
    align-items:center;
    min-height:2rem;
    padding:.35rem .78rem;
    border:1px solid var(--border);
    border-radius:999px;
    background:#fff;
    color:var(--muted);
    font-size:.9rem;
    font-weight:900;
}
.hero-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin-top:1.35rem;max-width:600px}
.hero-metrics article{padding:1rem;border:1px solid var(--border);border-radius:22px;background:rgba(255,255,255,.68)}
.hero-metrics strong{display:block;color:var(--brand);font-size:1.8rem;line-height:1}
.hero-metrics span{display:block;color:var(--muted);font-weight:800;font-size:.9rem}

.hero-visual-card{
    position:relative;
    min-height:520px;
    border:1px solid var(--border);
    border-radius:42px;
    background:linear-gradient(180deg,#fffdf9,#fff0d9);
    box-shadow:var(--shadow);
    overflow:hidden;
    display:grid;
    place-items:end center;
    padding:2rem;
}
.hero-illustration{width:min(100%,430px);margin-bottom:3.6rem;filter:drop-shadow(0 22px 35px rgba(81,45,27,.12))}
.floating-vocab-card{
    position:absolute;
    left:1.3rem;
    right:1.3rem;
    bottom:1.3rem;
    padding:1.1rem;
    border:1px solid rgba(236,217,198,.8);
    border-radius:28px;
    background:rgba(255,255,255,.87);
    backdrop-filter:blur(14px);
    text-align:center;
    box-shadow:var(--shadow-soft);
}
.hanzi-large{display:block;font-size:clamp(4rem,11vw,8rem);line-height:.95;font-weight:950;letter-spacing:-.08em}
.hanzi{display:block;font-size:2.8rem;line-height:1;font-weight:950}
.pinyin{color:var(--brand);font-weight:950}
.meaning{font-size:1.35rem;font-weight:900}

.section,.page-section{padding:clamp(2.4rem,6vw,5.5rem) 0}
.section-heading{max-width:760px;margin-bottom:2rem}
.section-heading-center{margin-inline:auto;text-align:center}
.section-heading h1,.section-heading h2,.page-section h1,.dashboard-hero-card h1,.path-card h2,.pricing-card h2,.auth-card h1{
    margin:.25rem 0;
    font-size:clamp(2rem,4.4vw,3.6rem);
    line-height:.98;
    letter-spacing:-.055em;
}
.section-heading p,.path-card p,.pricing-card p{color:var(--muted)}
.feature-grid,.course-grid,.stats-grid,.learning-actions,.vocabulary-grid,.book-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:1rem;
}
.course-grid,.learning-actions,.vocabulary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.book-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.feature-card,.course-card,.stat-card,.vocab-card,.module-card,.example-card,.question-card,.certificate-card,.flashcard-card,.reader-card,.form-card,.auth-card,.learning-panel{
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:rgba(255,255,255,.82);
    box-shadow:var(--shadow-soft);
}
.feature-card,.course-card,.stat-card,.vocab-card,.module-card,.example-card,.question-card,.certificate-card,.flashcard-card,.reader-card,.form-card,.learning-panel{padding:1.35rem}
.rich-card img{height:108px;object-fit:contain;margin-bottom:1rem}
.rich-card h3,.course-card h2,.course-card h3,.book-card h3{margin:.4rem 0;font-size:1.35rem;line-height:1.1}
.rich-card p,.course-card p,.feature-card p,.vocab-card p{color:var(--muted)}
.path-card,.pricing-card,.dashboard-hero-card,.course-detail-rich{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:1.5rem;
    align-items:center;
    padding:clamp(1.4rem,4vw,2.2rem);
    border:1px solid var(--border);
    border-radius:36px;
    background:linear-gradient(135deg,#fff,#fff2df);
    box-shadow:var(--shadow);
}
.path-steps{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:flex-end}
.pricing-card img{max-height:180px;justify-self:end}
.book-card{padding:1rem;border:1px solid var(--border);border-radius:26px;background:#fff;box-shadow:var(--shadow-soft)}
.book-card img{width:100%;border-radius:20px;aspect-ratio:3/4;object-fit:cover}
.course-cover{display:grid;place-items:center;height:150px;margin-bottom:1rem;border-radius:22px;background:linear-gradient(135deg,var(--brand),var(--gold));color:#fff;font-size:4rem;font-weight:950}
.course-cover-image{height:auto;background:#fff4e4;overflow:hidden}
.course-cover-image img{width:100%;aspect-ratio:16/10;object-fit:cover}
.course-meta{display:flex;gap:.45rem;flex-wrap:wrap;margin:.8rem 0}

.auth-page{
    width:min(1120px,calc(100% - 2rem));
    margin:0 auto;
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    align-items:center;
    gap:1.5rem;
    min-height:calc(100vh - 150px);
    padding:2rem 0;
}
.auth-illustration{
    min-height:520px;
    display:grid;
    align-content:end;
    padding:2rem;
    border:1px solid var(--border);
    border-radius:36px;
    background:linear-gradient(180deg,#fff8ed,#ffe9c8);
    box-shadow:var(--shadow);
    overflow:hidden;
}
.auth-illustration img{margin:auto auto 1.5rem;max-height:310px;object-fit:contain}
.auth-illustration h2{font-size:2.4rem;margin:.5rem 0 0;line-height:1}
.auth-illustration p{color:var(--muted)}
.auth-card{width:100%;padding:clamp(1.4rem,4vw,2.4rem)}
label{display:grid;gap:.45rem;margin:1rem 0;color:var(--muted);font-weight:900}
input,select,textarea{
    width:100%;
    border:1px solid var(--border);
    border-radius:18px;
    padding:.9rem 1rem;
    color:var(--text);
    background:#fff;
    outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(207,63,49,.1)}
textarea{min-height:130px;resize:vertical}
.checkbox-label{grid-template-columns:auto 1fr;align-items:center}
.checkbox-label input{width:auto}
.alert{margin-bottom:1rem;padding:1rem;border-radius:18px}
.alert-success{background:#e8f7ed;color:#1d7a3d}.alert-error{background:#ffe3e0;color:#a22218}
.floating-alert{width:min(1180px,calc(100% - 2rem));margin:1rem auto 0}

.user-dashboard .stats-grid{margin:1rem 0}
.dashboard-hero-card img{max-height:260px;justify-self:end}
.stat-card span{display:block;color:var(--brand);font-size:2.5rem;font-weight:950;line-height:1}
.stat-card p{margin:.4rem 0 0;color:var(--muted);font-weight:850}
.dashboard-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:1rem}
.daily-vocab{display:flex;align-items:center;gap:1rem}
.learning-actions .feature-card img{height:86px;object-fit:contain;margin-bottom:.8rem}
.course-detail{display:grid;grid-template-columns:1fr .8fr;gap:2rem;align-items:center}
.course-preview{display:grid;place-items:center}
.course-preview img{max-height:360px;border-radius:28px;box-shadow:var(--shadow)}
.module-list{display:grid;gap:1rem;margin-top:1.2rem}
.vocabulary-detail .vocab-hero{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.stroke-card{padding:1.3rem;border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-soft)}
.stroke-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:.7rem 0}
.stroke-tabs button{border:1px solid var(--border);border-radius:14px;background:#fff;padding:.55rem .85rem;font-weight:900;cursor:pointer}
.hanzi-writer-target{min-height:260px;display:grid;place-items:center;border:1px dashed var(--border);border-radius:22px;background:#fffaf3}

.site-footer{
    width:min(1180px,calc(100% - 2rem));
    margin:2rem auto 1rem;
    padding:1.2rem;
    display:flex;
    justify-content:space-between;
    gap:1rem;
    align-items:center;
    border:1px solid var(--border);
    border-radius:28px;
    background:rgba(255,255,255,.72);
    color:var(--muted);
}
.site-footer p{margin:.3rem 0}

@media(max-width:980px){
    .hero-split,.path-card,.pricing-card,.dashboard-hero-card,.course-detail,.course-detail-rich,.auth-page,.dashboard-grid,.vocabulary-detail .vocab-hero{grid-template-columns:1fr}
    .hero-visual-card{min-height:420px}
    .feature-grid,.course-grid,.stats-grid,.learning-actions,.vocabulary-grid,.book-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .path-steps{justify-content:flex-start}
    .dashboard-hero-card img,.pricing-card img{justify-self:start}
}
@media(max-width:760px){
    .site-header{border-radius:26px;align-items:flex-start;flex-wrap:wrap}
    .mobile-nav-toggle{display:inline-flex}
    .site-nav{display:none;width:100%;padding-top:.7rem;border-top:1px solid var(--border);flex-direction:column;align-items:flex-start}
    .site-nav.is-open{display:flex}
    .feature-grid,.course-grid,.stats-grid,.learning-actions,.vocabulary-grid,.book-grid{grid-template-columns:1fr}
    .hero h1{font-size:clamp(2.4rem,14vw,4.2rem)}
    .hero-metrics{grid-template-columns:1fr}
    .hero-visual-card{min-height:360px;border-radius:32px}
    .auth-illustration{min-height:auto}
    .site-footer{flex-direction:column;align-items:flex-start}
}


/* v1.5 Auth navigation + custom notification */
.site-nav .nav-button{
    min-height:2.35rem;
    padding:.45rem .8rem;
    border:1px solid var(--border);
    border-radius:999px;
    background:#fff;
}

.pm-toast-layer{
    position:fixed;
    right:1rem;
    bottom:1rem;
    z-index:9999;
    display:grid;
    gap:.75rem;
    width:min(420px,calc(100vw - 2rem));
    pointer-events:none;
}
.pm-toast{
    position:relative;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:.85rem;
    align-items:start;
    padding:1rem 1.2rem 1rem 1rem;
    border:1px solid rgba(236,217,198,.92);
    border-radius:24px;
    background:rgba(255,253,249,.96);
    box-shadow:0 22px 60px rgba(49,31,22,.22);
    backdrop-filter:blur(16px);
    pointer-events:auto;
    animation:pmToastIn .24s ease-out;
}
.pm-toast strong{
    display:block;
    margin-bottom:.15rem;
    font-size:1.02rem;
    letter-spacing:-.02em;
}
.pm-toast p{
    margin:0;
    color:var(--muted);
    font-weight:750;
    line-height:1.45;
}
.pm-toast-icon{
    display:grid;
    place-items:center;
    width:2.6rem;
    height:2.6rem;
    border-radius:18px;
    background:#fff1de;
    font-size:1.35rem;
}
.pm-toast-success{border-color:rgba(13,119,114,.32)}
.pm-toast-success .pm-toast-icon{background:var(--teal-soft)}
.pm-toast-warning{border-color:rgba(228,168,51,.42)}
.pm-toast-warning .pm-toast-icon{background:#fff4d7}
.pm-toast-error{border-color:rgba(207,63,49,.35)}
.pm-toast-error .pm-toast-icon{background:#ffe4df}
.pm-toast-close{
    position:absolute;
    top:.48rem;
    right:.55rem;
    display:grid;
    place-items:center;
    width:1.65rem;
    height:1.65rem;
    border:0;
    border-radius:999px;
    background:rgba(37,23,20,.06);
    color:var(--muted);
    cursor:pointer;
    font-weight:950;
}
.pm-toast.is-leaving{
    animation:pmToastOut .22s ease-in forwards;
}
@keyframes pmToastIn{
    from{opacity:0;transform:translateY(16px) scale(.98)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes pmToastOut{
    to{opacity:0;transform:translateY(10px) scale(.98)}
}

.speech-result{
    margin-top:1rem;
    padding:1rem;
    border:1px dashed var(--border);
    border-radius:20px;
    background:rgba(255,255,255,.7);
    color:var(--muted);
    font-weight:850;
}
.speech-result[data-type="success"]{
    border-color:rgba(13,119,114,.4);
    background:var(--teal-soft);
    color:#07514d;
}
.speech-result[data-type="warning"]{
    border-color:rgba(228,168,51,.48);
    background:#fff6da;
    color:#755009;
}
.speech-result[data-type="error"]{
    border-color:rgba(207,63,49,.35);
    background:#ffe5e2;
    color:#8e2c25;
}
button[data-recording="true"]{
    cursor:progress;
    opacity:.85;
    box-shadow:0 0 0 6px rgba(13,119,114,.11),0 12px 26px rgba(207,63,49,.18);
}

@media (max-width: 720px){
    .pm-toast-layer{
        left:1rem;
        right:1rem;
        bottom:.85rem;
        width:auto;
    }
}


/* v1.6 Inline writing feedback and compact notifications */
.vocab-main-card{
    position:relative;
}
.stroke-card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:.75rem;
}
.stroke-card-header h2{
    margin:.2rem 0 0;
}
.stroke-feedback{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    max-width:270px;
    min-height:2.35rem;
    padding:.48rem .72rem;
    border:1px solid var(--border);
    border-radius:999px;
    background:#fffaf3;
    color:var(--muted);
    font-size:.9rem;
    font-weight:900;
    line-height:1.25;
}
.stroke-feedback [data-stroke-feedback-icon]{
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:1.45rem;
    height:1.45rem;
    border-radius:999px;
    background:rgba(37,23,20,.07);
    color:var(--muted);
    font-weight:950;
}
.stroke-feedback[data-type="success"],
.stroke-feedback[data-type="complete"]{
    border-color:rgba(13,119,114,.34);
    background:var(--teal-soft);
    color:#07514d;
}
.stroke-feedback[data-type="success"] [data-stroke-feedback-icon],
.stroke-feedback[data-type="complete"] [data-stroke-feedback-icon]{
    background:#0d7772;
    color:#fff;
}
.stroke-feedback[data-type="error"]{
    border-color:rgba(207,63,49,.34);
    background:#ffe9e5;
    color:#8e2c25;
}
.stroke-feedback[data-type="error"] [data-stroke-feedback-icon]{
    background:#cf3f31;
    color:#fff;
}
.stroke-tabs button.is-active{
    border-color:rgba(207,63,49,.45);
    background:#fff1de;
    color:var(--brand);
}
.hanzi-writer-shell{
    position:relative;
}
.hanzi-writer-target{
    position:relative;
}
.stroke-completion{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    padding:1rem;
    background:rgba(255,248,237,.58);
    backdrop-filter:blur(6px);
    border-radius:22px;
    opacity:0;
    transform:scale(.98);
    transition:.2s ease;
    z-index:3;
}
.stroke-completion.is-visible{
    opacity:1;
    transform:scale(1);
}
.stroke-completion-card{
    width:min(320px,100%);
    padding:1.25rem;
    text-align:center;
    border:1px solid rgba(236,217,198,.92);
    border-radius:28px;
    background:#fffdf9;
    box-shadow:0 24px 60px rgba(49,31,22,.18);
}
.stroke-completion-card strong{
    display:block;
    font-size:1.7rem;
    line-height:1;
    letter-spacing:-.04em;
    color:var(--brand);
}
.stroke-completion-card p{
    margin:.65rem 0 1rem;
    color:var(--muted);
    font-weight:850;
}
.pm-toast-layer{
    left:50%;
    right:auto;
    bottom:1rem;
    width:auto;
    max-width:calc(100vw - 2rem);
    transform:translateX(-50%);
}
.pm-toast{
    display:flex;
    align-items:center;
    gap:.6rem;
    min-width:min(360px,calc(100vw - 2rem));
    max-width:420px;
    padding:.7rem .85rem;
    border-radius:999px;
    box-shadow:0 16px 38px rgba(49,31,22,.18);
}
.pm-toast p{
    display:none;
}
.pm-toast strong{
    margin:0;
    font-size:.95rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.pm-toast-icon{
    width:1.75rem;
    height:1.75rem;
    border-radius:999px;
    font-size:.95rem;
    font-weight:950;
}
.pm-toast-close{
    display:none;
}
@media(max-width:720px){
    .stroke-card-header{
        flex-direction:column;
    }
    .stroke-feedback{
        width:100%;
        max-width:none;
        border-radius:18px;
    }
    .pm-toast-layer{
        left:1rem;
        right:1rem;
        width:auto;
        transform:none;
    }
    .pm-toast{
        min-width:0;
        width:100%;
    }
}

/* v1.8 Vocabulary detail refinement */
.vocab-main-card{
    padding:clamp(1.2rem,3vw,2rem);
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:rgba(255,253,249,.84);
    box-shadow:var(--shadow-soft);
}
.script-comparison{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:.8rem;
    align-items:stretch;
    margin:.65rem 0 .85rem;
}
.script-word-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:.25rem;
    width:100%;
    min-height:9rem;
    padding:1rem;
    border:1px solid var(--border);
    border-radius:28px;
    background:#fffaf3;
    color:var(--text);
    cursor:pointer;
    text-align:left;
    transition:.18s ease;
}
.script-word-card:hover{
    transform:translateY(-1px);
    border-color:rgba(207,63,49,.38);
    box-shadow:var(--shadow-soft);
}
.script-word-card strong{
    display:block;
    font-size:clamp(3.4rem,8vw,6.6rem);
    line-height:.9;
    letter-spacing:-.08em;
}
.script-word-single{
    margin:.65rem 0 .85rem;
}
.script-label{
    color:var(--brand);
    font-size:.75rem;
    font-weight:950;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.script-separator{
    display:grid;
    place-items:center;
    color:var(--muted);
    font-size:2.2rem;
    font-weight:950;
}
.vocab-meta-row{
    display:flex;
    align-items:center;
    gap:.55rem;
    flex-wrap:wrap;
    margin:1rem 0 .2rem;
}
.vocab-info-chip,
.vocab-info-pill{
    display:inline-flex;
    align-items:center;
    min-height:2.25rem;
    padding:.45rem .78rem;
    border:1px solid var(--border);
    border-radius:999px;
    background:#fff;
    color:var(--muted);
    font-size:.88rem;
    font-weight:900;
}
.vocab-info-chip{
    cursor:pointer;
}
.vocab-info-chip:hover{
    color:var(--brand);
    border-color:rgba(207,63,49,.35);
}

.vocab-info-modal[hidden]{
    display:none;
}
.vocab-info-modal{
    position:fixed;
    inset:0;
    z-index:10000;
    display:grid;
    place-items:center;
    padding:1rem;
    opacity:0;
    transition:.18s ease;
}
.vocab-info-modal.is-visible{
    opacity:1;
}
.vocab-info-backdrop{
    position:absolute;
    inset:0;
    background:rgba(37,23,20,.42);
    backdrop-filter:blur(4px);
}
.vocab-info-panel{
    position:relative;
    z-index:1;
    width:min(480px,100%);
    padding:1.35rem;
    border:1px solid rgba(236,217,198,.95);
    border-radius:32px;
    background:#fffdf9;
    box-shadow:0 28px 90px rgba(49,31,22,.25);
    transform:translateY(10px) scale(.98);
    transition:.18s ease;
}
.vocab-info-modal.is-visible .vocab-info-panel{
    transform:translateY(0) scale(1);
}
.vocab-info-close{
    position:absolute;
    top:.85rem;
    right:.85rem;
    display:grid;
    place-items:center;
    width:2rem;
    height:2rem;
    border:0;
    border-radius:999px;
    background:rgba(37,23,20,.07);
    color:var(--muted);
    cursor:pointer;
    font-weight:950;
}
.vocab-info-hanzi{
    margin:.65rem 0 1rem;
    font-size:clamp(3.2rem,14vw,5.8rem);
    font-weight:950;
    line-height:.9;
    letter-spacing:-.08em;
}
.vocab-info-list{
    display:grid;
    gap:.6rem;
    margin:0;
}
.vocab-info-list div{
    display:grid;
    grid-template-columns:6.5rem 1fr;
    gap:.75rem;
    padding:.75rem;
    border:1px solid var(--border);
    border-radius:18px;
    background:#fffaf3;
}
.vocab-info-list dt{
    color:var(--muted);
    font-weight:950;
}
.vocab-info-list dd{
    margin:0;
    color:var(--text);
    font-weight:900;
}
.speech-result{
    max-width:100%;
}
.speech-result.is-visible{
    display:block;
}
.stroke-tabs button{
    min-width:3.25rem;
}
@media(max-width:760px){
    .script-comparison{
        grid-template-columns:1fr;
    }
    .script-separator{
        min-height:1rem;
    }
    .script-word-card{
        min-height:7rem;
    }
    .vocab-info-list div{
        grid-template-columns:1fr;
        gap:.25rem;
    }
}


/* v1.9 Per-Hanzi vocabulary info */
.script-word-card{
    cursor:default;
}
.script-word-card:hover{
    transform:none;
}
.script-character-line{
    display:flex;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:.08em;
    margin:.15rem 0;
}
.script-character-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:.82em;
    padding:0 .02em .06em;
    border:0;
    border-radius:.12em;
    background:transparent;
    color:var(--text);
    font-size:clamp(3.4rem,8vw,6.6rem);
    line-height:.9;
    font-weight:950;
    letter-spacing:-.08em;
    cursor:pointer;
    transition:.16s ease;
}
.script-character-button:hover,
.script-character-button:focus-visible{
    color:var(--brand);
    background:rgba(207,63,49,.08);
    outline:2px solid rgba(207,63,49,.18);
    outline-offset:2px;
}
.script-character-button:active{
    transform:translateY(1px) scale(.98);
}
.script-hint{
    color:var(--muted);
    font-size:.9rem;
    font-weight:850;
}
.vocab-info-chip{
    max-width:100%;
    text-align:left;
}
@media(max-width:760px){
    .script-character-button{
        font-size:clamp(3rem,17vw,5.5rem);
    }
    .script-hint{
        font-size:.82rem;
    }
}


/* Flashcard Practice v3 */
.flashcard-practice-page{
    width:min(920px,calc(100% - 2rem));
    margin:0 auto;
    padding:clamp(1.6rem,5vw,3.4rem) 0 4rem;
}
.flashcard-topbar{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:1rem;
    align-items:center;
    margin-bottom:1.2rem;
}
.flashcard-back-button,.flashcard-sound-button{
    display:inline-grid;
    place-items:center;
    width:4.4rem;
    height:4.4rem;
    border:1px solid var(--border);
    border-radius:1.45rem;
    background:rgba(255,253,249,.76);
    color:var(--teal);
    font-size:2.25rem;
    font-weight:950;
    box-shadow:var(--shadow-soft);
}
.flashcard-sound-button{
    border-radius:999px;
    font-size:1.7rem;
    cursor:pointer;
}
.flashcard-sound-button.is-muted{
    color:var(--muted);
    background:#f6f0e8;
}
.flashcard-heading h1{
    margin:0;
    color:#073f43;
    font-size:clamp(2.3rem,7vw,4.2rem);
    line-height:1;
    letter-spacing:-.06em;
}
.flashcard-heading p{
    margin:.15rem 0 0;
    color:var(--muted);
    font-size:1.25rem;
    font-weight:900;
}
.flashcard-progress-track{
    display:grid;
    grid-template-columns:1fr auto;
    gap:1rem;
    align-items:center;
    margin:1.1rem 0 1.4rem;
    color:var(--muted);
}
.flashcard-progress-track::before{
    content:"";
    display:block;
    height:.65rem;
    border-radius:999px;
    background:linear-gradient(90deg,var(--teal) var(--flashcard-progress-percent,0%),rgba(233,219,201,.72) var(--flashcard-progress-percent,0%));
}
.flashcard-progress-fill{display:none}
.flashcard-meta-row{
    display:flex;
    gap:.75rem;
    flex-wrap:wrap;
    align-items:center;
    color:#697171;
    font-weight:850;
    margin-bottom:1.6rem;
}
.flashcard-meta-row span{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.48rem .8rem;
    border:1px solid rgba(236,217,198,.7);
    border-radius:999px;
    background:rgba(255,253,249,.72);
}
.flashcard-stage{
    position:relative;
    min-height:28rem;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(15rem,.38fr);
    align-items:center;
}
.flashcard-main-card{
    position:relative;
    z-index:2;
    min-height:27rem;
    padding:2rem;
    border:1px solid rgba(236,217,198,.76);
    border-radius:2.4rem;
    background:
        url("../images/ornaments/cloud_gold_01.png") no-repeat 78% 9%/7rem auto,
        url("../images/ornaments/mountain_mist.png") no-repeat left bottom/15rem auto,
        rgba(255,253,249,.95);
    color:var(--text);
    box-shadow:0 26px 60px rgba(41,27,17,.14);
    cursor:pointer;
    text-align:center;
}
.flashcard-main-card:hover{
    transform:translateY(-2px);
}
.flashcard-card-label,.flashcard-answer-label{
    display:inline-flex;
    width:max-content;
    margin:0 auto .8rem;
    padding:.25rem .68rem;
    border-radius:999px;
    background:#f2eadc;
    color:var(--teal);
    font-size:.78rem;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.flashcard-hanzi{
    display:block;
    color:var(--teal);
    font-size:clamp(8rem,26vw,13rem);
    line-height:.9;
    font-weight:950;
    letter-spacing:-.1em;
    text-shadow:0 3px 0 rgba(13,119,114,.08);
}
.flashcard-pinyin{
    display:block;
    margin-top:.7rem;
    color:var(--teal);
    font-size:clamp(2rem,8vw,3.4rem);
    line-height:1;
    font-weight:950;
}
.flashcard-card-audio{
    display:grid;
    place-items:center;
    width:4.4rem;
    height:4.4rem;
    margin:1.3rem auto 0;
    border:1px solid var(--border);
    border-radius:999px;
    background:#fffaf3;
    color:var(--teal);
    font-size:1.6rem;
}
.flashcard-tap-hint{
    display:flex;
    gap:.5rem;
    justify-content:center;
    margin-top:1.6rem;
    color:var(--muted);
    font-weight:800;
}
.flashcard-answer-panel{
    position:relative;
    z-index:1;
    min-height:21rem;
    margin-left:-2rem;
    padding:2rem 1.4rem 2rem 3.3rem;
    border:1px solid rgba(236,217,198,.76);
    border-radius:2rem;
    background:rgba(255,253,249,.86);
    color:#3b3c3c;
    box-shadow:0 18px 42px rgba(41,27,17,.1);
    transform:translateX(-1.8rem) rotate(2deg);
    opacity:.62;
    transition:.18s ease;
}
.flashcard-stage.is-flipped .flashcard-answer-panel{
    transform:translateX(0) rotate(0deg);
    opacity:1;
}
.flashcard-answer-panel strong{
    display:block;
    margin:.25rem 0 1.35rem;
    font-size:clamp(2rem,6vw,3.2rem);
    line-height:1.12;
}
.flashcard-example-hanzi{
    margin:.3rem 0;
    color:var(--text);
    font-size:2rem;
    font-weight:950;
}
.flashcard-gesture-hint{
    display:flex;
    justify-content:center;
    margin:1.3rem auto 1rem;
    padding:.85rem 1rem;
    width:min(100%,56rem);
    border-radius:999px;
    background:rgba(255,253,249,.7);
    color:var(--muted);
    text-align:center;
    font-weight:850;
}
.flashcard-actions{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem;
    margin:1.1rem 0 1rem;
}
.flashcard-rating-button{
    width:100%;
    min-height:5.2rem;
    border:1px solid var(--border);
    border-radius:1.4rem;
    background:#fff;
    color:var(--text);
    font-size:1.45rem;
    font-weight:950;
    cursor:pointer;
    box-shadow:var(--shadow-soft);
}
.flashcard-rating-button span{
    display:inline-grid;
    place-items:center;
    margin-right:.4rem;
    width:2.25rem;
    height:2.25rem;
    border-radius:999px;
    font-size:1.15rem;
}
.flashcard-rating-button.is-difficult{background:#fff1ec;color:#8b1f18;border-color:#f3c7bc}
.flashcard-rating-button.is-difficult span{background:#ffd9d1}
.flashcard-rating-button.is-uncertain{background:#fff7df;color:#674411;border-color:#efd89e}
.flashcard-rating-button.is-uncertain span{background:#ffe8a9}
.flashcard-rating-button.is-easy{background:#eaf8f1;color:#0c6763;border-color:#bce2d5}
.flashcard-rating-button.is-easy span{background:#cdeee4}
.flashcard-secondary-actions{
    display:flex;
    justify-content:center;
    gap:.85rem;
    flex-wrap:wrap;
    margin:1rem 0 1.4rem;
}
.flashcard-stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:.75rem;
    margin-top:1.4rem;
}
.flashcard-stats-grid article{
    padding:1rem;
    border:1px solid var(--border);
    border-radius:1.2rem;
    background:rgba(255,253,249,.78);
    text-align:center;
}
.flashcard-stats-grid strong{
    display:block;
    color:var(--teal);
    font-size:1.7rem;
    line-height:1;
}
.flashcard-stats-grid span{
    color:var(--muted);
    font-weight:850;
}
.flashcard-complete-card{
    padding:2rem;
    border:1px solid var(--border);
    border-radius:2rem;
    background:rgba(255,253,249,.9);
    box-shadow:var(--shadow-soft);
    text-align:center;
}
.flashcard-complete-card h2{
    margin:.25rem auto .65rem;
    max-width:38rem;
    font-size:clamp(2rem,5vw,3.2rem);
    line-height:1;
}

@media (max-width:760px){
    .flashcard-topbar{
        grid-template-columns:auto 1fr auto;
        gap:.7rem;
    }
    .flashcard-back-button,.flashcard-sound-button{
        width:3.6rem;
        height:3.6rem;
        border-radius:1.1rem;
        font-size:1.8rem;
    }
    .flashcard-sound-button{border-radius:999px;font-size:1.35rem}
    .flashcard-stage{
        grid-template-columns:1fr;
        min-height:auto;
    }
    .flashcard-main-card{
        min-height:24rem;
        border-radius:2rem;
        padding:1.4rem;
    }
    .flashcard-answer-panel{
        margin:-1.6rem 1rem 0;
        padding:2.6rem 1.2rem 1.4rem;
        transform:none;
        opacity:1;
        border-radius:1.7rem;
    }
    .flashcard-hanzi{
        font-size:7.8rem;
    }
    .flashcard-actions{
        grid-template-columns:1fr;
    }
    .flashcard-rating-button{
        min-height:4.2rem;
        font-size:1.25rem;
    }
    .flashcard-stats-grid{
        grid-template-columns:repeat(2,1fr);
    }
}


/* v3.4 Flashcard app screen */
body.is-flashcard-screen{
    overflow:hidden;
    min-height:100dvh;
}
body.is-flashcard-screen main{
    height:100dvh;
}
body.is-flashcard-screen .pm-toast-layer{
    display:none;
}
.flashcard-app-screen{
    width:min(960px,100%);
    height:100dvh;
    margin:0 auto;
    padding:clamp(.75rem,2.4vh,1.25rem) clamp(.85rem,2.8vw,1.25rem);
    display:grid;
    grid-template-rows:auto auto auto auto minmax(0,1fr) auto auto;
    gap:clamp(.45rem,1.25vh,.85rem);
    overflow:hidden;
    color:var(--text);
}
.flashcard-app-header{
    display:grid;
    grid-template-columns:3.25rem 1fr 3.25rem;
    align-items:center;
    gap:.8rem;
}
.flashcard-icon-button{
    display:grid;
    place-items:center;
    width:3.1rem;
    height:3.1rem;
    border:1px solid var(--border);
    border-radius:20px;
    background:rgba(255,253,249,.82);
    color:var(--teal);
    font-size:1.65rem;
    font-weight:950;
    box-shadow:var(--shadow-soft);
    cursor:pointer;
}
.flashcard-title-block h1{
    margin:0;
    font-size:clamp(1.7rem,4vh,2.55rem);
    line-height:1;
    color:#103f3e;
    letter-spacing:-.055em;
}
.flashcard-title-block p{
    margin:.12rem 0 0;
    color:var(--muted);
    font-weight:850;
}
.flashcard-title-block .eyebrow{
    margin:0 0 .16rem;
}
.flashcard-app-progress{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:.7rem;
}
.flashcard-app-progress .flashcard-progress-track{
    position:relative;
    height:.72rem;
    border-radius:999px;
    background:#efe7d9;
    overflow:hidden;
}
.flashcard-app-progress .flashcard-progress-fill{
    position:absolute;
    inset:0 auto 0 0;
    width:var(--flashcard-progress-percent,0%);
    border-radius:999px;
    background:linear-gradient(90deg,var(--teal),#0b5956);
    transition:width .25s ease;
}
.flashcard-app-progress strong{
    color:var(--muted);
    min-width:3rem;
    text-align:right;
}
.flashcard-chip-row{
    display:flex;
    gap:.5rem;
    flex-wrap:wrap;
    align-items:center;
    min-height:2.25rem;
}
.flashcard-chip-row span{
    display:inline-flex;
    align-items:center;
    min-height:2.1rem;
    padding:.32rem .72rem;
    border:1px solid var(--border);
    border-radius:999px;
    background:rgba(255,253,249,.86);
    color:var(--muted);
    font-weight:900;
}
.flashcard-feedback{
    min-height:1.9rem;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:.2rem .75rem;
    border-radius:999px;
    color:transparent;
    font-weight:950;
    text-align:center;
    opacity:0;
    transform:translateY(-.2rem);
    transition:.18s ease;
}
.flashcard-feedback.is-visible{
    color:var(--teal);
    opacity:1;
    transform:translateY(0);
    background:var(--teal-soft);
    border:1px dashed rgba(13,119,114,.32);
}
.flashcard-feedback[data-type="error"].is-visible{
    color:var(--brand);
    background:#ffe8e4;
    border-color:rgba(207,63,49,.3);
}
.flashcard-feedback[data-type="success"].is-visible{
    color:#117446;
    background:#e7f7eb;
    border-color:rgba(17,116,70,.28);
}
.flashcard-learning-area{
    min-height:0;
    display:grid;
    place-items:center;
}
.flashcard-flip-card{
    width:min(100%,640px);
    height:min(100%,clamp(19rem,52vh,32rem));
    border:0;
    background:transparent;
    perspective:1400px;
    cursor:pointer;
}
.flashcard-flip-inner{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    transition:transform .55s cubic-bezier(.2,.75,.2,1);
    transform-style:preserve-3d;
}
.flashcard-app-screen.is-flipped .flashcard-flip-inner{
    transform:rotateY(180deg);
}
.flashcard-face{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(.35rem,1.1vh,.8rem);
    padding:clamp(1.1rem,3.2vh,2rem);
    border:1px solid var(--border);
    border-radius:36px;
    background:
        radial-gradient(circle at 85% 18%,rgba(228,168,51,.18),transparent 8rem),
        radial-gradient(circle at 15% 90%,rgba(13,119,114,.13),transparent 10rem),
        rgba(255,253,249,.96);
    box-shadow:var(--shadow);
    backface-visibility:hidden;
    overflow:hidden;
}
.flashcard-face::after{
    content:"";
    position:absolute;
    left:-2rem;
    right:-2rem;
    bottom:-2.8rem;
    height:7rem;
    background:linear-gradient(160deg,rgba(13,119,114,.12),rgba(13,119,114,.02));
    border-radius:50% 50% 0 0;
    pointer-events:none;
}
.flashcard-face-back{
    transform:rotateY(180deg);
    align-items:stretch;
    text-align:left;
}
.flashcard-card-label{
    align-self:center;
    display:inline-flex;
    min-height:2rem;
    padding:.25rem .78rem;
    border-radius:999px;
    background:#f1eadb;
    color:var(--teal);
    font-size:.82rem;
    font-weight:950;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.flashcard-hanzi{
    font-size:clamp(4.4rem,18vw,12rem);
    line-height:.86;
    color:var(--teal);
    font-weight:950;
    letter-spacing:-.12em;
    text-align:center;
}
.flashcard-pinyin{
    color:var(--teal);
    font-weight:950;
    font-size:clamp(1.8rem,5vw,3.2rem);
    line-height:1;
}
.flashcard-card-audio{
    display:grid;
    place-items:center;
    width:3.5rem;
    height:3.5rem;
    border:1px solid var(--border);
    border-radius:999px;
    background:#fffaf3;
    box-shadow:0 10px 24px rgba(81,45,27,.08);
    font-size:1.35rem;
    z-index:1;
}
.flashcard-tap-hint{
    color:var(--muted);
    font-weight:900;
    text-align:center;
    z-index:1;
}
.flashcard-meaning{
    display:block;
    color:var(--text);
    font-size:clamp(2.2rem,6vw,4.1rem);
    line-height:1;
    font-weight:950;
    text-align:center;
    letter-spacing:-.055em;
}
.flashcard-detail-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.65rem;
}
.flashcard-detail-grid span,
.flashcard-example-box{
    display:grid;
    gap:.16rem;
    padding:.8rem 1rem;
    border:1px solid var(--border);
    border-radius:20px;
    background:rgba(255,248,237,.78);
}
.flashcard-detail-grid small,
.flashcard-example-box small{
    color:var(--muted);
    font-size:.78rem;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.flashcard-detail-grid strong{
    color:var(--text);
    font-size:1.2rem;
}
.flashcard-example-box strong{
    font-size:clamp(1.5rem,4vw,2.3rem);
    line-height:1.1;
}
.flashcard-example-box em{
    color:var(--teal);
    font-style:normal;
    font-weight:900;
}
.flashcard-example-box span{
    color:var(--muted);
    font-weight:800;
}
.flashcard-action-dock{
    display:grid;
    gap:.65rem;
}
.flashcard-rating-row,
.flashcard-special-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:.65rem;
}
.flashcard-special-row{
    grid-template-columns:1fr 1fr;
}
.flashcard-rating-button{
    min-height:3.35rem;
    border:1px solid var(--border);
    border-radius:22px;
    background:#fff;
    color:var(--text);
    font-weight:950;
    cursor:pointer;
    box-shadow:var(--shadow-soft);
}
.flashcard-rating-button span{
    margin-right:.25rem;
}
.flashcard-rating-button.is-difficult{
    background:#fff0ed;
    color:#8b221a;
    border-color:#f1c2ba;
}
.flashcard-rating-button.is-uncertain{
    background:#fff6df;
    color:#75500d;
    border-color:#ecd8a9;
}
.flashcard-rating-button.is-easy{
    background:#eaf7f3;
    color:#0a615d;
    border-color:#bfe1dc;
}
.flashcard-action-dock .button{
    width:100%;
    min-height:3.1rem;
}
.flashcard-mini-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:.45rem;
    min-height:2rem;
}
.flashcard-mini-stats span{
    display:flex;
    justify-content:center;
    gap:.25rem;
    align-items:center;
    border:1px solid rgba(236,217,198,.7);
    border-radius:999px;
    background:rgba(255,253,249,.65);
    color:var(--muted);
    font-size:.85rem;
    font-weight:850;
}
.flashcard-mini-stats strong{
    color:var(--text);
}
.flashcard-complete-panel{
    display:none;
    place-items:center;
    text-align:center;
    align-self:center;
    justify-self:center;
    width:min(620px,100%);
    padding:2rem;
    border:1px solid var(--border);
    border-radius:34px;
    background:rgba(255,253,249,.96);
    box-shadow:var(--shadow);
}
.flashcard-complete-panel.is-visible{
    display:grid;
}
.flashcard-complete-panel h2{
    margin:.2rem 0 .5rem;
    font-size:clamp(1.7rem,4vw,2.7rem);
    line-height:1;
}
.flashcard-complete-panel p{
    color:var(--muted);
}
.is-hidden{
    display:none !important;
}
.flashcard-app-screen.is-loading{
    cursor:wait;
}
.flashcard-app-screen.is-loading button{
    cursor:wait;
}
@media(max-width:760px){
    .flashcard-app-screen{
        width:100%;
        padding:.7rem;
        gap:.42rem;
    }
    .flashcard-app-header{
        grid-template-columns:2.85rem 1fr 2.85rem;
        gap:.55rem;
    }
    .flashcard-icon-button{
        width:2.75rem;
        height:2.75rem;
        border-radius:18px;
    }
    .flashcard-title-block h1{
        font-size:1.65rem;
    }
    .flashcard-title-block p{
        font-size:.9rem;
    }
    .flashcard-chip-row{
        flex-wrap:nowrap;
        overflow:hidden;
    }
    .flashcard-chip-row span{
        min-width:0;
        font-size:.82rem;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .flashcard-flip-card{
        width:100%;
        height:min(100%,48vh);
    }
    .flashcard-face{
        border-radius:28px;
        padding:.95rem;
    }
    .flashcard-hanzi{
        font-size:clamp(4.2rem,24vw,7.6rem);
    }
    .flashcard-pinyin{
        font-size:clamp(1.65rem,9vw,2.7rem);
    }
    .flashcard-card-audio{
        width:3rem;
        height:3rem;
    }
    .flashcard-rating-row{
        gap:.45rem;
    }
    .flashcard-rating-button{
        min-height:3rem;
        border-radius:18px;
        font-size:.95rem;
    }
    .flashcard-special-row{
        gap:.45rem;
    }
    .flashcard-mini-stats{
        gap:.3rem;
    }
    .flashcard-mini-stats span{
        font-size:.75rem;
        padding:.1rem .15rem;
    }
}
@media(max-height:720px){
    .flashcard-app-screen{
        gap:.32rem;
        padding:.55rem .8rem;
    }
    .flashcard-title-block .eyebrow,
    .flashcard-chip-row{
        display:none;
    }
    .flashcard-feedback{
        min-height:1.4rem;
        font-size:.84rem;
    }
    .flashcard-flip-card{
        height:min(100%,46vh);
    }
    .flashcard-hanzi{
        font-size:clamp(3.8rem,15vw,8rem);
    }
    .flashcard-card-audio{
        width:3rem;
        height:3rem;
    }
    .flashcard-tap-hint{
        font-size:.86rem;
    }
    .flashcard-rating-button,
    .flashcard-action-dock .button{
        min-height:2.75rem;
    }
}


/* v3.6 flashcard interaction polish */
.flashcard-card-audio{
    cursor:pointer;
    pointer-events:auto;
    transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.flashcard-card-audio:hover{
    transform:translateY(-1px) scale(1.03);
    background:#ffffff;
    box-shadow:0 14px 28px rgba(81,45,27,.13);
}
.flashcard-progress-fill{
    width:var(--flashcard-progress-percent,0%);
    min-width:0;
}
.flashcard-app-screen.is-loading .flashcard-flip-card{
    pointer-events:none;
}


/* v3.7 progress bar color fix
   Progress bar hanya mewakili kartu yang sudah Hafal. */
.flashcard-app-progress{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:1rem;
    align-items:center;
}
.flashcard-app-progress .flashcard-progress-track{
    position:relative;
    display:block;
    height:.72rem;
    border-radius:999px;
    background:#eadfce;
    overflow:hidden;
    box-shadow:inset 0 1px 2px rgba(81,45,27,.08);
}
.flashcard-app-progress .flashcard-progress-track::before{
    display:none;
}
.flashcard-app-progress .flashcard-progress-fill{
    display:block !important;
    position:absolute;
    inset:0 auto 0 0;
    width:var(--flashcard-progress-percent,0%);
    min-width:0;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#0f766e,#075f59);
    box-shadow:0 8px 18px rgba(15,118,110,.22);
    transition:width .35s ease;
}
.flashcard-app-progress strong{
    min-width:3rem;
    color:#6f625b;
    font-weight:900;
    text-align:right;
}


/* v3.9 flashcard Hanzi spacing + top info cleanup */
.flashcard-chip-row{
    justify-content:flex-start;
}

.flashcard-hanzi{
    display:flex !important;
    justify-content:center;
    align-items:center;
    flex-wrap:nowrap;
    gap:clamp(.34rem,1.5vw,1.2rem);
    letter-spacing:0 !important;
    word-spacing:normal !important;
    max-width:100%;
    white-space:normal;
    text-align:center;
}

.flashcard-hanzi-char{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:.88;
    margin:0;
    transform:translateZ(0);
}

.flashcard-pinyin{
    letter-spacing:.045em;
    word-spacing:.18em;
}

@media (max-width: 768px){
    .flashcard-hanzi{
        gap:clamp(.16rem,1.4vw,.5rem);
        flex-wrap:wrap;
    }
}

@media (max-width: 480px){
    .flashcard-hanzi{
        gap:.12rem;
    }
}


/* v4.0 flashcard layout polish
   - Kartu dibuat lebih besar dan naik mendekati chip HSK/Sapaan Dasar.
   - Notifikasi dipindahkan sejajar dengan chip dan diposisikan di tengah.
   - Tetap menjaga layar flashcard fixed tanpa scrollbar. */
.flashcard-app-screen{
    width:min(980px,100%);
    gap:clamp(.28rem,.85vh,.6rem);
    grid-template-rows:auto auto auto minmax(0,1fr) auto auto;
}

.flashcard-context-row{
    display:grid;
    grid-template-columns:auto minmax(16rem,1fr);
    align-items:center;
    gap:.85rem;
    min-height:2.55rem;
}

.flashcard-context-row .flashcard-chip-row{
    justify-content:flex-start;
    min-height:2.4rem;
}

.flashcard-context-row .flashcard-feedback{
    justify-self:center;
    width:min(100%,34rem);
    min-height:2.15rem;
    padding:.25rem 1rem;
    font-size:.95rem;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.flashcard-learning-area{
    align-items:stretch;
    padding-top:.15rem;
    padding-bottom:.15rem;
}

.flashcard-flip-card{
    width:min(100%,700px);
    height:min(100%,clamp(22rem,58vh,36rem));
}

.flashcard-face{
    border-radius:34px;
}

.flashcard-hanzi{
    font-size:clamp(8.6rem,24vw,14rem);
    gap:clamp(.5rem,2.4vw,1.65rem);
}

.flashcard-pinyin{
    margin-top:.28rem;
}

.flashcard-card-audio{
    margin-top:.7rem;
}

.flashcard-action-dock{
    margin-top:.15rem;
}

@media (max-width: 768px){
    .flashcard-app-screen{
        width:100%;
        padding:.65rem .75rem;
        gap:.32rem;
    }

    .flashcard-context-row{
        grid-template-columns:1fr;
        gap:.35rem;
    }

    .flashcard-context-row .flashcard-chip-row{
        justify-content:center;
    }

    .flashcard-context-row .flashcard-feedback{
        width:min(100%,28rem);
        min-height:1.85rem;
        font-size:.84rem;
    }

    .flashcard-flip-card{
        width:100%;
        height:min(100%,clamp(19rem,52vh,31rem));
    }

    .flashcard-hanzi{
        font-size:clamp(5.2rem,19vw,9rem);
        gap:clamp(.22rem,1.8vw,.75rem);
    }
}

@media (max-height: 720px){
    .flashcard-flip-card{
        height:min(100%,clamp(18rem,52vh,29rem));
    }

    .flashcard-hanzi{
        font-size:clamp(5.5rem,20vh,10rem);
    }

    .flashcard-card-audio{
        width:3.4rem;
        height:3.4rem;
        margin-top:.35rem;
    }
}


/* v4.1 flashcard fit + centered feedback
   Fix:
   - Notifikasi benar-benar di tengah area flashcard.
   - Hanzi dan pinyin tidak saling menimpa.
   - Ukuran Hanzi otomatis mengecil untuk 3/4/5+ karakter.
   - Isi kartu tetap muat tanpa terpotong di desktop dan mobile. */

.flashcard-context-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
    align-items:center !important;
    gap:.75rem !important;
    position:relative !important;
    min-height:2.55rem !important;
}

.flashcard-context-row .flashcard-chip-row{
    grid-column:1 !important;
    justify-content:flex-start !important;
    min-width:0 !important;
    z-index:2 !important;
}

.flashcard-context-row .flashcard-feedback{
    grid-column:2 !important;
    justify-self:center !important;
    align-self:center !important;
    width:min(40rem,52vw) !important;
    max-width:40rem !important;
    min-height:2.15rem !important;
    margin:0 auto !important;
    padding:.34rem 1rem !important;
    font-size:.92rem !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    transform:none !important;
}

.flashcard-context-row .flashcard-feedback.is-visible{
    transform:none !important;
}

.flashcard-learning-area{
    min-height:0 !important;
    display:grid !important;
    place-items:center !important;
    padding:.05rem 0 .25rem !important;
}

.flashcard-flip-card{
    width:min(100%,700px) !important;
    height:min(100%,clamp(20rem,52vh,34rem)) !important;
}

.flashcard-face{
    justify-content:center !important;
    gap:clamp(.38rem,.95vh,.68rem) !important;
    padding:clamp(1rem,2.35vh,1.65rem) clamp(1rem,2.4vw,1.8rem) !important;
    overflow:hidden !important;
}

.flashcard-face-front{
    display:flex !important;
}

.flashcard-card-label{
    flex:0 0 auto !important;
}

.flashcard-hanzi{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
    max-width:100% !important;
    margin:.1rem auto 0 !important;
    color:var(--teal) !important;
    font-weight:950 !important;
    line-height:.88 !important;
    letter-spacing:0 !important;
    word-spacing:0 !important;
    text-align:center !important;
    text-shadow:0 3px 0 rgba(13,119,114,.08) !important;
    white-space:nowrap !important;
}

.flashcard-hanzi-char{
    display:inline-block !important;
    flex:0 0 auto !important;
    line-height:.88 !important;
}

.flashcard-hanzi.is-length-1{
    font-size:clamp(7.2rem,22vh,14.2rem) !important;
    gap:0 !important;
}

.flashcard-hanzi.is-length-2{
    font-size:clamp(6.4rem,19vh,12.3rem) !important;
    gap:clamp(.45rem,1.8vw,1.15rem) !important;
}

.flashcard-hanzi.is-length-3{
    font-size:clamp(4.8rem,15vh,9.6rem) !important;
    gap:clamp(.38rem,1.45vw,.95rem) !important;
}

.flashcard-hanzi.is-length-4{
    font-size:clamp(3.75rem,11.5vh,7.2rem) !important;
    gap:clamp(.25rem,1vw,.68rem) !important;
}

.flashcard-hanzi.is-length-5plus{
    font-size:clamp(3.05rem,9.2vh,5.9rem) !important;
    gap:clamp(.18rem,.75vw,.48rem) !important;
}

.flashcard-pinyin{
    display:block !important;
    max-width:100% !important;
    margin:.88rem auto .18rem !important;
    color:var(--teal) !important;
    font-size:clamp(1.55rem,4.4vh,3rem) !important;
    font-weight:950 !important;
    line-height:1.16 !important;
    letter-spacing:.02em !important;
    word-spacing:.12em !important;
    text-align:center !important;
    white-space:normal !important;
}

.flashcard-hanzi.is-length-3 + .flashcard-pinyin,
.flashcard-hanzi.is-length-4 + .flashcard-pinyin,
.flashcard-hanzi.is-length-5plus + .flashcard-pinyin{
    margin-top:.68rem !important;
    font-size:clamp(1.25rem,3.4vh,2.35rem) !important;
    line-height:1.18 !important;
}

.flashcard-card-audio{
    flex:0 0 auto !important;
    width:clamp(3rem,6vh,3.8rem) !important;
    height:clamp(3rem,6vh,3.8rem) !important;
    margin:.55rem auto 0 !important;
}

.flashcard-tap-hint{
    flex:0 0 auto !important;
    max-width:100% !important;
    margin:.42rem auto 0 !important;
    font-size:clamp(.78rem,1.8vh,.98rem) !important;
    line-height:1.15 !important;
    text-align:center !important;
}

.flashcard-action-dock{
    margin-top:.1rem !important;
}

@media (max-width: 768px){
    .flashcard-context-row{
        grid-template-columns:1fr !important;
        gap:.32rem !important;
    }

    .flashcard-context-row .flashcard-chip-row,
    .flashcard-context-row .flashcard-feedback{
        grid-column:1 !important;
        justify-self:center !important;
    }

    .flashcard-context-row .flashcard-chip-row{
        justify-content:center !important;
    }

    .flashcard-context-row .flashcard-feedback{
        width:min(100%,29rem) !important;
        min-height:1.85rem !important;
        font-size:.82rem !important;
    }

    .flashcard-flip-card{
        width:100% !important;
        height:min(100%,clamp(18.5rem,49vh,30rem)) !important;
    }

    .flashcard-face{
        padding:clamp(.85rem,2vh,1.25rem) !important;
        gap:clamp(.26rem,.75vh,.48rem) !important;
    }

    .flashcard-hanzi.is-length-1{
        font-size:clamp(5.8rem,20vh,9.2rem) !important;
    }

    .flashcard-hanzi.is-length-2{
        font-size:clamp(4.8rem,16vh,7.6rem) !important;
        gap:clamp(.26rem,1.4vw,.6rem) !important;
    }

    .flashcard-hanzi.is-length-3{
        font-size:clamp(3.65rem,12.5vh,6rem) !important;
        gap:clamp(.18rem,1vw,.42rem) !important;
    }

    .flashcard-hanzi.is-length-4{
        font-size:clamp(2.9rem,9.5vh,4.8rem) !important;
        gap:clamp(.12rem,.7vw,.3rem) !important;
    }

    .flashcard-hanzi.is-length-5plus{
        font-size:clamp(2.35rem,7.6vh,3.75rem) !important;
        gap:clamp(.08rem,.5vw,.2rem) !important;
    }

    .flashcard-pinyin{
        margin-top:.5rem !important;
        font-size:clamp(1.2rem,4.3vh,2rem) !important;
        line-height:1.16 !important;
    }

    .flashcard-hanzi.is-length-3 + .flashcard-pinyin,
    .flashcard-hanzi.is-length-4 + .flashcard-pinyin,
    .flashcard-hanzi.is-length-5plus + .flashcard-pinyin{
        margin-top:.42rem !important;
        font-size:clamp(1rem,3.4vh,1.55rem) !important;
    }

    .flashcard-card-audio{
        width:2.85rem !important;
        height:2.85rem !important;
        margin-top:.35rem !important;
    }

    .flashcard-tap-hint{
        font-size:.72rem !important;
        margin-top:.28rem !important;
    }
}

@media (max-height: 760px){
    .flashcard-flip-card{
        height:min(100%,clamp(17rem,47vh,28rem)) !important;
    }

    .flashcard-face{
        gap:.28rem !important;
        padding:.82rem 1rem !important;
    }

    .flashcard-hanzi.is-length-1{
        font-size:clamp(4.8rem,18vh,8.4rem) !important;
    }

    .flashcard-hanzi.is-length-2{
        font-size:clamp(4.1rem,15vh,7rem) !important;
    }

    .flashcard-hanzi.is-length-3{
        font-size:clamp(3.2rem,11.4vh,5.45rem) !important;
    }

    .flashcard-hanzi.is-length-4{
        font-size:clamp(2.55rem,8.9vh,4.35rem) !important;
    }

    .flashcard-hanzi.is-length-5plus{
        font-size:clamp(2.1rem,7.1vh,3.5rem) !important;
    }

    .flashcard-pinyin{
        margin-top:.38rem !important;
        font-size:clamp(1rem,3.4vh,1.75rem) !important;
    }

    .flashcard-card-audio{
        width:2.75rem !important;
        height:2.75rem !important;
        margin-top:.28rem !important;
    }

    .flashcard-tap-hint{
        font-size:.72rem !important;
        margin-top:.22rem !important;
    }
}


/* v4.2 flashcard final layout fit
   Tujuan:
   1. HSK 1 - notifikasi - Sapaan Dasar tetap satu baris.
   2. Front/back card tidak terpotong.
   3. Hanzi + pinyin otomatis fit untuk 1 sampai 5+ karakter.
   4. Tombol Hafal tidak lagi merah/bahaya, diganti teal/green.
*/

.flashcard-app-screen{
    width:min(1060px,100%) !important;
    height:100dvh !important;
    padding:clamp(.55rem,1.4vh,1rem) clamp(.75rem,2.4vw,1.1rem) !important;
    display:grid !important;
    grid-template-rows:auto auto auto minmax(0,1fr) auto auto !important;
    gap:clamp(.34rem,.82vh,.62rem) !important;
    overflow:hidden !important;
}

.flashcard-app-header{
    grid-template-columns:3rem minmax(0,1fr) 3rem !important;
}

.flashcard-title-block h1{
    font-size:clamp(1.55rem,3.45vh,2.3rem) !important;
    line-height:1.02 !important;
}

.flashcard-title-block p{
    font-size:clamp(.9rem,1.9vh,1.08rem) !important;
}

.flashcard-app-progress{
    margin:0 !important;
}

/* HSK 1 - notifikasi - Sapaan Dasar */
.flashcard-context-row{
    display:grid !important;
    grid-template-columns:minmax(7.2rem,1fr) minmax(18rem,42rem) minmax(7.2rem,1fr) !important;
    align-items:center !important;
    gap:.75rem !important;
    min-height:2.45rem !important;
    margin:0 !important;
}

.flashcard-context-row .flashcard-chip-row{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    min-height:2.25rem !important;
    gap:.5rem !important;
}

.flashcard-context-row .flashcard-chip-left{
    justify-content:flex-start !important;
}

.flashcard-context-row .flashcard-chip-right{
    justify-content:flex-end !important;
}

.flashcard-context-row .flashcard-chip-row span{
    white-space:nowrap !important;
}

.flashcard-context-row .flashcard-feedback{
    grid-column:2 !important;
    justify-self:stretch !important;
    width:100% !important;
    max-width:none !important;
    min-height:2.15rem !important;
    margin:0 !important;
    padding:.3rem 1rem !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    font-size:clamp(.78rem,1.9vh,.95rem) !important;
    line-height:1.12 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    transform:none !important;
}

/* Learning area and card sizing */
.flashcard-learning-area{
    min-height:0 !important;
    display:grid !important;
    place-items:center !important;
    padding:0 !important;
}

.flashcard-flip-card{
    width:min(100%,720px) !important;
    height:min(100%,clamp(19.5rem,50vh,32rem)) !important;
    max-height:100% !important;
}

.flashcard-flip-inner,
.flashcard-face{
    width:100% !important;
    height:100% !important;
}

.flashcard-face{
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) auto auto auto !important;
    align-items:center !important;
    justify-items:center !important;
    gap:clamp(.22rem,.62vh,.5rem) !important;
    padding:clamp(.9rem,2vh,1.35rem) clamp(1rem,2.4vw,1.65rem) !important;
    overflow:hidden !important;
    border-radius:32px !important;
}

.flashcard-face::after{
    height:5.8rem !important;
    bottom:-2.4rem !important;
}

/* Front card content */
.flashcard-card-label{
    grid-row:1 !important;
    position:relative !important;
    z-index:2 !important;
}

.flashcard-hanzi{
    grid-row:2 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
    max-width:100% !important;
    min-height:0 !important;
    margin:0 auto !important;
    color:var(--teal) !important;
    line-height:.9 !important;
    letter-spacing:0 !important;
    word-spacing:0 !important;
    white-space:nowrap !important;
    text-align:center !important;
    overflow:visible !important;
}

.flashcard-hanzi-char{
    display:inline-block !important;
    flex:0 0 auto !important;
    line-height:.9 !important;
}

.flashcard-hanzi.is-length-1{
    font-size:clamp(6.2rem,17.5vh,11.6rem) !important;
    gap:0 !important;
}

.flashcard-hanzi.is-length-2{
    font-size:clamp(5.5rem,15.5vh,10.3rem) !important;
    gap:clamp(.34rem,1.4vw,1rem) !important;
}

.flashcard-hanzi.is-length-3{
    font-size:clamp(4.2rem,12.6vh,7.9rem) !important;
    gap:clamp(.24rem,1vw,.72rem) !important;
}

.flashcard-hanzi.is-length-4{
    font-size:clamp(3.25rem,9.9vh,6.15rem) !important;
    gap:clamp(.16rem,.72vw,.46rem) !important;
}

.flashcard-hanzi.is-length-5plus{
    font-size:clamp(2.58rem,7.9vh,4.75rem) !important;
    gap:clamp(.1rem,.45vw,.3rem) !important;
}

.flashcard-pinyin{
    grid-row:3 !important;
    max-width:100% !important;
    margin:.45rem auto 0 !important;
    color:var(--teal) !important;
    font-size:clamp(1.18rem,3.25vh,2.4rem) !important;
    font-weight:950 !important;
    line-height:1.25 !important;
    letter-spacing:.02em !important;
    word-spacing:.14em !important;
    white-space:normal !important;
    text-align:center !important;
}

.flashcard-hanzi.is-length-3 + .flashcard-pinyin,
.flashcard-hanzi.is-length-4 + .flashcard-pinyin,
.flashcard-hanzi.is-length-5plus + .flashcard-pinyin{
    margin-top:.38rem !important;
    font-size:clamp(1rem,2.65vh,1.8rem) !important;
}

.flashcard-card-audio{
    grid-row:4 !important;
    width:clamp(2.65rem,5.6vh,3.4rem) !important;
    height:clamp(2.65rem,5.6vh,3.4rem) !important;
    margin:.3rem auto 0 !important;
    position:relative !important;
    z-index:3 !important;
}

.flashcard-tap-hint{
    grid-row:5 !important;
    position:relative !important;
    z-index:3 !important;
    margin:.2rem auto 0 !important;
    max-width:100% !important;
    color:var(--muted) !important;
    font-size:clamp(.68rem,1.55vh,.9rem) !important;
    line-height:1.12 !important;
    text-align:center !important;
}

/* Back card fit */
.flashcard-face-back{
    display:grid !important;
    grid-template-rows:auto auto minmax(0,auto) minmax(0,1fr) auto !important;
    align-items:start !important;
    justify-items:stretch !important;
    text-align:left !important;
    gap:clamp(.3rem,.85vh,.55rem) !important;
    padding:clamp(.85rem,1.8vh,1.25rem) clamp(.9rem,2vw,1.35rem) !important;
    overflow:hidden !important;
}

.flashcard-face-back .flashcard-card-label{
    justify-self:center !important;
}

.flashcard-meaning{
    display:block !important;
    max-width:100% !important;
    margin:0 !important;
    color:var(--text) !important;
    font-size:clamp(1.8rem,5.8vh,4.2rem) !important;
    line-height:1.02 !important;
    letter-spacing:-.045em !important;
    text-align:center !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
}

.flashcard-detail-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:.6rem !important;
    min-height:0 !important;
}

.flashcard-detail-grid > span,
.flashcard-example-box{
    min-width:0 !important;
    padding:clamp(.55rem,1.35vh,.85rem) clamp(.65rem,1.6vw,1rem) !important;
    border:1px solid var(--border) !important;
    border-radius:18px !important;
    background:rgba(255,253,249,.7) !important;
}

.flashcard-detail-grid small,
.flashcard-example-box small{
    display:block !important;
    margin-bottom:.2rem !important;
    color:var(--muted) !important;
    font-size:clamp(.62rem,1.45vh,.78rem) !important;
    font-weight:950 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
}

.flashcard-detail-grid strong{
    display:block !important;
    font-size:clamp(.92rem,2.05vh,1.25rem) !important;
    line-height:1.2 !important;
    overflow-wrap:anywhere !important;
}

.flashcard-example-box{
    min-height:0 !important;
    overflow:hidden !important;
}

.flashcard-example-hanzi{
    margin:0 0 .15rem !important;
    font-size:clamp(1.3rem,3.5vh,2.2rem) !important;
    line-height:1.08 !important;
    font-weight:950 !important;
    color:var(--text) !important;
}

.flashcard-example-pinyin{
    margin:0 0 .1rem !important;
    color:var(--teal) !important;
    font-size:clamp(.8rem,1.9vh,1.05rem) !important;
    line-height:1.12 !important;
    font-weight:850 !important;
}

.flashcard-example-translation{
    margin:0 !important;
    color:var(--muted) !important;
    font-size:clamp(.78rem,1.8vh,.98rem) !important;
    line-height:1.16 !important;
    font-weight:800 !important;
}

/* Action buttons */
.flashcard-action-dock{
    margin-top:0 !important;
    gap:.42rem !important;
}

.flashcard-rating-row,
.flashcard-special-row{
    gap:.5rem !important;
}

.flashcard-rating-button{
    min-height:clamp(2.65rem,6.4vh,3.25rem) !important;
    border-radius:20px !important;
    font-size:clamp(.92rem,2.2vh,1.15rem) !important;
}

.flashcard-special-row .button{
    min-height:clamp(2.55rem,5.8vh,3.05rem) !important;
    border-radius:20px !important;
}

.flashcard-special-row .button:first-child,
button[data-flashcard-rating="mastered"]{
    background:linear-gradient(135deg,#0f766e,#0b5f59) !important;
    color:#fff !important;
    border-color:#0f766e !important;
    box-shadow:0 12px 24px rgba(15,118,110,.18) !important;
}

.flashcard-special-row .button:first-child:hover,
button[data-flashcard-rating="mastered"]:hover{
    background:linear-gradient(135deg,#12857c,#0b5f59) !important;
}

.flashcard-mini-stats{
    gap:.35rem !important;
    min-height:1.65rem !important;
}

.flashcard-mini-stats span{
    min-height:1.55rem !important;
    font-size:clamp(.68rem,1.5vh,.82rem) !important;
    padding:.1rem .35rem !important;
}

/* Smaller screens */
@media (max-width: 768px){
    .flashcard-app-screen{
        width:100% !important;
        padding:.5rem .62rem !important;
        gap:.28rem !important;
    }

    .flashcard-app-header{
        grid-template-columns:2.55rem minmax(0,1fr) 2.55rem !important;
    }

    .flashcard-title-block h1{
        font-size:clamp(1.25rem,5vw,1.7rem) !important;
    }

    .flashcard-context-row{
        grid-template-columns:auto minmax(0,1fr) auto !important;
        gap:.35rem !important;
        min-height:2rem !important;
    }

    .flashcard-context-row .flashcard-chip-row span{
        min-height:1.8rem !important;
        padding:.22rem .48rem !important;
        font-size:.76rem !important;
    }

    .flashcard-context-row .flashcard-feedback{
        min-height:1.8rem !important;
        padding:.22rem .5rem !important;
        font-size:.72rem !important;
    }

    .flashcard-flip-card{
        width:100% !important;
        height:min(100%,clamp(16.8rem,46vh,28rem)) !important;
    }

    .flashcard-face{
        padding:.75rem .8rem !important;
        gap:.2rem !important;
        border-radius:26px !important;
    }

    .flashcard-hanzi.is-length-1{
        font-size:clamp(4.6rem,15vh,7.6rem) !important;
    }

    .flashcard-hanzi.is-length-2{
        font-size:clamp(3.9rem,13vh,6.4rem) !important;
        gap:.28rem !important;
    }

    .flashcard-hanzi.is-length-3{
        font-size:clamp(3rem,10vh,4.9rem) !important;
        gap:.18rem !important;
    }

    .flashcard-hanzi.is-length-4{
        font-size:clamp(2.35rem,8vh,3.8rem) !important;
        gap:.12rem !important;
    }

    .flashcard-hanzi.is-length-5plus{
        font-size:clamp(1.92rem,6.4vh,3.05rem) !important;
        gap:.08rem !important;
    }

    .flashcard-pinyin{
        margin-top:.22rem !important;
        font-size:clamp(.95rem,3.3vh,1.5rem) !important;
        line-height:1.18 !important;
    }

    .flashcard-card-audio{
        width:2.5rem !important;
        height:2.5rem !important;
        margin-top:.18rem !important;
    }

    .flashcard-tap-hint{
        font-size:.64rem !important;
        margin-top:.1rem !important;
    }

    .flashcard-face-back{
        padding:.68rem .7rem !important;
        gap:.24rem !important;
    }

    .flashcard-meaning{
        font-size:clamp(1.35rem,5vh,2.35rem) !important;
    }

    .flashcard-detail-grid{
        gap:.35rem !important;
    }

    .flashcard-detail-grid > span,
    .flashcard-example-box{
        padding:.45rem .5rem !important;
        border-radius:14px !important;
    }

    .flashcard-example-hanzi{
        font-size:clamp(1rem,3.4vh,1.65rem) !important;
    }

    .flashcard-example-pinyin,
    .flashcard-example-translation{
        font-size:.72rem !important;
    }

    .flashcard-rating-button,
    .flashcard-special-row .button{
        min-height:2.35rem !important;
        font-size:.92rem !important;
    }
}

/* Short desktop/laptop height */
@media (max-height: 760px){
    .flashcard-app-screen{
        padding:.45rem .85rem !important;
        gap:.24rem !important;
    }

    .flashcard-title-block h1{
        font-size:clamp(1.35rem,3.1vh,2rem) !important;
    }

    .flashcard-icon-button{
        width:2.65rem !important;
        height:2.65rem !important;
    }

    .flashcard-app-progress .flashcard-progress-track{
        height:.55rem !important;
    }

    .flashcard-context-row{
        min-height:2rem !important;
    }

    .flashcard-context-row .flashcard-chip-row span{
        min-height:1.8rem !important;
        padding:.18rem .6rem !important;
    }

    .flashcard-context-row .flashcard-feedback{
        min-height:1.8rem !important;
        font-size:.78rem !important;
    }

    .flashcard-flip-card{
        height:min(100%,clamp(15.8rem,44vh,26.5rem)) !important;
    }

    .flashcard-face{
        gap:.18rem !important;
        padding:.65rem .9rem !important;
    }

    .flashcard-card-label{
        min-height:1.65rem !important;
        padding:.16rem .6rem !important;
        font-size:.68rem !important;
    }

    .flashcard-hanzi.is-length-1{
        font-size:clamp(4.5rem,15.2vh,7.8rem) !important;
    }

    .flashcard-hanzi.is-length-2{
        font-size:clamp(3.9rem,13.3vh,6.7rem) !important;
    }

    .flashcard-hanzi.is-length-3{
        font-size:clamp(3.05rem,10.6vh,5.25rem) !important;
    }

    .flashcard-hanzi.is-length-4{
        font-size:clamp(2.38rem,8.4vh,4.15rem) !important;
    }

    .flashcard-hanzi.is-length-5plus{
        font-size:clamp(1.95rem,6.7vh,3.35rem) !important;
    }

    .flashcard-pinyin{
        margin-top:.18rem !important;
        font-size:clamp(.95rem,3.1vh,1.6rem) !important;
    }

    .flashcard-card-audio{
        width:2.45rem !important;
        height:2.45rem !important;
        margin-top:.16rem !important;
    }

    .flashcard-tap-hint{
        font-size:.64rem !important;
    }

    .flashcard-meaning{
        font-size:clamp(1.35rem,5vh,2.7rem) !important;
    }

    .flashcard-detail-grid > span,
    .flashcard-example-box{
        padding:.42rem .55rem !important;
    }

    .flashcard-example-hanzi{
        font-size:clamp(1rem,3.2vh,1.75rem) !important;
    }

    .flashcard-example-pinyin,
    .flashcard-example-translation{
        font-size:.72rem !important;
    }

    .flashcard-rating-button,
    .flashcard-special-row .button{
        min-height:2.3rem !important;
    }

    .flashcard-mini-stats span{
        min-height:1.35rem !important;
    }
}


/* v4.3 flashcard row + compact feedback + button icon fix
   - Baris HSK 1 - Notifikasi - Sapaan Dasar dipaksa satu baris.
   - Pesan notifikasi dibuat pendek dari JS: Ditandai Sulit/Ragu/Mudah/Hafal.
   - Icon tombol kesulitan tidak membesar keluar border di mobile.
   - Front/back card dibuat lebih aman agar konten tidak terpotong.
*/

.flashcard-context-row{
    display:grid !important;
    grid-template-columns:auto minmax(12rem, 1fr) auto !important;
    align-items:center !important;
    gap:clamp(.45rem,1.2vw,.85rem) !important;
    min-height:2.25rem !important;
    margin:0 !important;
    width:100% !important;
}

.flashcard-context-chip{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:2.05rem !important;
    padding:.25rem .72rem !important;
    border:1px solid var(--border) !important;
    border-radius:999px !important;
    background:rgba(255,253,249,.88) !important;
    color:var(--muted) !important;
    font-weight:900 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    min-width:max-content !important;
}

.flashcard-context-level{
    justify-self:start !important;
}

.flashcard-context-topic{
    justify-self:end !important;
}

.flashcard-context-row .flashcard-feedback{
    grid-column:2 !important;
    justify-self:center !important;
    align-self:center !important;
    width:min(100%,32rem) !important;
    min-width:0 !important;
    min-height:2.05rem !important;
    margin:0 !important;
    padding:.25rem .85rem !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    font-size:clamp(.78rem,1.7vh,.92rem) !important;
    line-height:1.08 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    transform:none !important;
}

.flashcard-context-row .flashcard-feedback.is-visible{
    transform:none !important;
}

/* Keep previous chip-row styles from old patches from affecting this row. */
.flashcard-context-row .flashcard-chip-row{
    display:contents !important;
}

/* Give the card the available center height and keep content inside. */
.flashcard-learning-area{
    min-height:0 !important;
    display:grid !important;
    place-items:center !important;
    padding:0 !important;
}

.flashcard-flip-card{
    width:min(100%,720px) !important;
    height:min(100%,clamp(19rem,54vh,34rem)) !important;
    max-height:100% !important;
}

.flashcard-face{
    overflow:hidden !important;
    padding:clamp(.72rem,1.75vh,1.18rem) clamp(.85rem,2vw,1.35rem) !important;
    border-radius:30px !important;
}

.flashcard-face-front{
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) auto auto auto !important;
    align-items:center !important;
    justify-items:center !important;
    gap:clamp(.14rem,.45vh,.38rem) !important;
}

.flashcard-card-label{
    min-height:1.65rem !important;
    padding:.15rem .62rem !important;
    font-size:clamp(.66rem,1.45vh,.78rem) !important;
    position:relative !important;
    z-index:3 !important;
}

.flashcard-hanzi{
    min-height:0 !important;
    margin:0 !important;
    line-height:.92 !important;
    overflow:visible !important;
}

.flashcard-hanzi-char{
    line-height:.92 !important;
}

.flashcard-hanzi.is-length-1{
    font-size:clamp(5.3rem,15vh,9.4rem) !important;
}

.flashcard-hanzi.is-length-2{
    font-size:clamp(4.6rem,13.4vh,8rem) !important;
    gap:clamp(.25rem,1vw,.75rem) !important;
}

.flashcard-hanzi.is-length-3{
    font-size:clamp(3.6rem,10.8vh,6.1rem) !important;
    gap:clamp(.18rem,.75vw,.48rem) !important;
}

.flashcard-hanzi.is-length-4{
    font-size:clamp(2.85rem,8.4vh,4.75rem) !important;
    gap:clamp(.1rem,.5vw,.3rem) !important;
}

.flashcard-hanzi.is-length-5plus{
    font-size:clamp(2.22rem,6.7vh,3.72rem) !important;
    gap:clamp(.06rem,.35vw,.22rem) !important;
}

.flashcard-pinyin{
    margin:.2rem auto 0 !important;
    font-size:clamp(1rem,2.65vh,1.85rem) !important;
    line-height:1.22 !important;
}

.flashcard-card-audio{
    width:clamp(2.35rem,5vh,3rem) !important;
    height:clamp(2.35rem,5vh,3rem) !important;
    margin:.18rem auto 0 !important;
    font-size:1rem !important;
}

.flashcard-tap-hint{
    margin:.08rem auto 0 !important;
    max-width:100% !important;
    font-size:clamp(.62rem,1.38vh,.82rem) !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    position:relative !important;
    z-index:3 !important;
}

/* Back card compact fit */
.flashcard-face-back{
    display:grid !important;
    grid-template-rows:auto auto auto minmax(0,1fr) !important;
    align-items:start !important;
    justify-items:stretch !important;
    gap:clamp(.25rem,.62vh,.45rem) !important;
    padding:clamp(.7rem,1.55vh,1rem) clamp(.75rem,1.8vw,1.1rem) !important;
    overflow:hidden !important;
}

.flashcard-face-back .flashcard-tap-hint{
    display:none !important;
}

.flashcard-meaning{
    margin:0 !important;
    font-size:clamp(1.45rem,4.8vh,3.2rem) !important;
    line-height:1.02 !important;
    text-align:center !important;
    overflow-wrap:anywhere !important;
}

.flashcard-detail-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:.45rem !important;
}

.flashcard-detail-grid > span,
.flashcard-example-box{
    padding:clamp(.4rem,1vh,.65rem) clamp(.5rem,1.2vw,.8rem) !important;
    border-radius:16px !important;
    min-height:0 !important;
    overflow:hidden !important;
}

.flashcard-detail-grid small,
.flashcard-example-box small{
    margin-bottom:.12rem !important;
    font-size:clamp(.56rem,1.18vh,.7rem) !important;
    line-height:1 !important;
}

.flashcard-detail-grid strong{
    font-size:clamp(.8rem,1.65vh,1.05rem) !important;
    line-height:1.14 !important;
}

.flashcard-example-hanzi,
.flashcard-example-box strong[data-card-example-hanzi]{
    margin:0 0 .1rem !important;
    font-size:clamp(1rem,2.85vh,1.75rem) !important;
    line-height:1.06 !important;
}

.flashcard-example-pinyin,
.flashcard-example-box em{
    display:block !important;
    margin:0 0 .08rem !important;
    font-size:clamp(.7rem,1.55vh,.9rem) !important;
    line-height:1.08 !important;
}

.flashcard-example-translation,
.flashcard-example-box span[data-card-example-translation]{
    display:block !important;
    margin:0 !important;
    font-size:clamp(.68rem,1.45vh,.86rem) !important;
    line-height:1.1 !important;
}

/* Difficulty button icon size fix */
.flashcard-rating-button{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:.45rem !important;
    min-width:0 !important;
    overflow:hidden !important;
}

.flashcard-rating-button > span{
    display:inline-grid !important;
    place-items:center !important;
    flex:0 0 auto !important;
    width:1.85rem !important;
    height:1.85rem !important;
    margin:0 !important;
    border-radius:999px !important;
    font-size:.95rem !important;
    line-height:1 !important;
}

.flashcard-rating-button.is-difficult > span{
    background:#ffd8d1 !important;
}

.flashcard-rating-button.is-uncertain > span{
    background:#ffe59b !important;
}

.flashcard-rating-button.is-easy > span{
    background:#bfece1 !important;
}

.flashcard-special-row .button:first-child,
button[data-flashcard-rating="mastered"]{
    background:linear-gradient(135deg,#0f766e,#0b5f59) !important;
    color:#fff !important;
    border-color:#0f766e !important;
    box-shadow:0 12px 24px rgba(15,118,110,.18) !important;
}

/* Mobile: keep the info row inline, not stacked. */
@media (max-width:768px){
    .flashcard-context-row{
        grid-template-columns:auto minmax(0,1fr) auto !important;
        gap:.28rem !important;
        min-height:1.9rem !important;
    }

    .flashcard-context-chip{
        min-height:1.65rem !important;
        padding:.18rem .38rem !important;
        font-size:.68rem !important;
    }

    .flashcard-context-row .flashcard-feedback{
        min-height:1.65rem !important;
        padding:.15rem .38rem !important;
        font-size:.68rem !important;
        width:100% !important;
    }

    .flashcard-rating-button{
        gap:.25rem !important;
        font-size:.82rem !important;
        min-height:2.2rem !important;
        border-radius:16px !important;
    }

    .flashcard-rating-button > span{
        width:1.35rem !important;
        height:1.35rem !important;
        font-size:.72rem !important;
    }

    .flashcard-special-row .button{
        min-height:2.25rem !important;
        font-size:.86rem !important;
    }
}

/* Short laptop height */
@media (max-height:760px){
    .flashcard-flip-card{
        height:min(100%,clamp(15.5rem,43.5vh,26rem)) !important;
    }

    .flashcard-hanzi.is-length-1{
        font-size:clamp(4.3rem,13.2vh,7.2rem) !important;
    }

    .flashcard-hanzi.is-length-2{
        font-size:clamp(3.75rem,11.8vh,6.2rem) !important;
    }

    .flashcard-hanzi.is-length-3{
        font-size:clamp(2.95rem,9.4vh,4.8rem) !important;
    }

    .flashcard-hanzi.is-length-4{
        font-size:clamp(2.3rem,7.2vh,3.7rem) !important;
    }

    .flashcard-hanzi.is-length-5plus{
        font-size:clamp(1.9rem,5.9vh,3rem) !important;
    }

    .flashcard-pinyin{
        font-size:clamp(.88rem,2.35vh,1.4rem) !important;
    }
}


/* v4.4 complete-state bug fix
   Saat semua kartu sudah Hafal, learning card/action tidak boleh menyempil di bawah. */
.flashcard-app-screen.is-complete .flashcard-learning-area,
.flashcard-app-screen.is-complete .flashcard-action-dock{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

.flashcard-app-screen.is-complete .flashcard-flip-card,
.flashcard-app-screen.is-complete .flashcard-flip-inner,
.flashcard-app-screen.is-complete .flashcard-face{
    display:none !important;
    visibility:hidden !important;
}

.flashcard-app-screen.is-complete .flashcard-complete-panel{
    display:grid !important;
    align-self:center !important;
    justify-self:center !important;
    z-index:10 !important;
}

.flashcard-complete-panel .button,
.flashcard-complete-panel button{
    background:linear-gradient(135deg,#0f766e,#0b5f59) !important;
    border-color:#0f766e !important;
    color:#fff !important;
}


/* v4.5 complete-state hard fix
   Jika semua kartu sudah Hafal, semua elemen latihan disembunyikan total.
   Ini mencegah sisa kartu/action dock menyempil di bawah panel selesai. */
.flashcard-app-screen.is-complete [data-flashcard-learning-area],
.flashcard-app-screen.is-complete [data-flashcard-actions],
.flashcard-app-screen.is-complete .flashcard-learning-area,
.flashcard-app-screen.is-complete .flashcard-action-dock,
.flashcard-app-screen.is-complete .flashcard-mini-stats,
.flashcard-app-screen.is-complete .flashcard-rating-row,
.flashcard-app-screen.is-complete .flashcard-special-row,
.flashcard-app-screen.is-complete .flashcard-flip-card,
.flashcard-app-screen.is-complete .flashcard-flip-inner,
.flashcard-app-screen.is-complete .flashcard-face{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
}

.flashcard-app-screen.is-complete .flashcard-complete-panel{
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
    align-self:center !important;
    justify-self:center !important;
    z-index:20 !important;
}

.flashcard-app-screen.is-complete{
    grid-template-rows:auto auto auto minmax(0,1fr) !important;
}


/* v6.3 flashcard back-card content fit
   Masalah:
   - Card besar, tetapi isi sisi belakang terlalu kecil dan berkumpul di atas.
   Perbaikan:
   - Konten belakang diperbesar proporsional.
   - Isi ditempatkan di tengah card.
   - Box zhuyin/pinyin/contoh dibuat lebih besar tetapi tetap tidak terpotong.
*/

.flashcard-face-back{
    display:grid !important;
    grid-template-rows:auto auto auto auto !important;
    align-content:center !important;
    justify-content:center !important;
    justify-items:center !important;
    gap:clamp(.55rem,1.35vh,1rem) !important;
    padding:clamp(1.05rem,2.7vh,2rem) clamp(1rem,2.7vw,2rem) !important;
    overflow:hidden !important;
    text-align:center !important;
}

.flashcard-face-back .flashcard-card-label{
    justify-self:center !important;
    min-height:clamp(1.85rem,3.9vh,2.4rem) !important;
    padding:.28rem .95rem !important;
    font-size:clamp(.72rem,1.8vh,.95rem) !important;
    line-height:1 !important;
    margin:0 !important;
}

.flashcard-face-back .flashcard-meaning{
    width:100% !important;
    max-width:94% !important;
    margin:0 auto !important;
    text-align:center !important;
    color:var(--text) !important;
    font-size:clamp(2.55rem,8.6vh,5.7rem) !important;
    line-height:.98 !important;
    letter-spacing:-.055em !important;
    overflow-wrap:anywhere !important;
}

.flashcard-face-back .flashcard-detail-grid{
    width:min(100%,600px) !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:clamp(.55rem,1.4vw,1rem) !important;
    margin:0 auto !important;
}

.flashcard-face-back .flashcard-detail-grid > span{
    min-height:clamp(4.1rem,9.2vh,6.2rem) !important;
    display:grid !important;
    align-content:center !important;
    gap:.28rem !important;
    padding:clamp(.72rem,1.8vh,1.15rem) clamp(.8rem,1.7vw,1.2rem) !important;
    border-radius:clamp(18px,2.5vh,24px) !important;
    overflow:hidden !important;
    text-align:left !important;
}

.flashcard-face-back .flashcard-detail-grid small,
.flashcard-face-back .flashcard-example-box small{
    margin:0 !important;
    font-size:clamp(.68rem,1.55vh,.88rem) !important;
    line-height:1.05 !important;
    letter-spacing:.1em !important;
}

.flashcard-face-back .flashcard-detail-grid strong{
    display:block !important;
    font-size:clamp(1.05rem,2.7vh,1.65rem) !important;
    line-height:1.15 !important;
    overflow-wrap:anywhere !important;
}

.flashcard-face-back .flashcard-example-box{
    width:min(100%,600px) !important;
    min-height:clamp(7.2rem,17vh,11rem) !important;
    display:grid !important;
    align-content:center !important;
    justify-items:start !important;
    gap:.2rem !important;
    margin:0 auto !important;
    padding:clamp(.82rem,2vh,1.25rem) clamp(.9rem,2vw,1.35rem) !important;
    border-radius:clamp(18px,2.5vh,24px) !important;
    overflow:hidden !important;
    text-align:left !important;
}

.flashcard-face-back .flashcard-example-box strong,
.flashcard-face-back .flashcard-example-hanzi,
.flashcard-face-back .flashcard-example-box strong[data-card-example-hanzi]{
    display:block !important;
    margin:.1rem 0 .05rem !important;
    font-size:clamp(1.65rem,4.8vh,3.25rem) !important;
    line-height:1.05 !important;
    color:var(--text) !important;
    overflow-wrap:anywhere !important;
}

.flashcard-face-back .flashcard-example-box em,
.flashcard-face-back .flashcard-example-pinyin{
    display:block !important;
    margin:0 !important;
    color:var(--teal) !important;
    font-size:clamp(.95rem,2.45vh,1.35rem) !important;
    line-height:1.1 !important;
    font-style:normal !important;
    font-weight:900 !important;
    overflow-wrap:anywhere !important;
}

.flashcard-face-back .flashcard-example-box span,
.flashcard-face-back .flashcard-example-translation,
.flashcard-face-back .flashcard-example-box span[data-card-example-translation]{
    display:block !important;
    margin:.08rem 0 0 !important;
    color:var(--muted) !important;
    font-size:clamp(.88rem,2.15vh,1.18rem) !important;
    line-height:1.16 !important;
    font-weight:800 !important;
    overflow-wrap:anywhere !important;
}

.flashcard-face-back .flashcard-tap-hint{
    display:none !important;
}

/* Untuk kata sangat pendek, isi tetap terasa besar dan proporsional. */
.flashcard-face-back .flashcard-meaning:where(:not(:empty)){
    min-height:auto !important;
}

/* Mobile: tetap memenuhi card, tapi tidak sampai terpotong. */
@media (max-width:768px){
    .flashcard-face-back{
        gap:clamp(.35rem,.95vh,.7rem) !important;
        padding:.85rem .8rem !important;
    }

    .flashcard-face-back .flashcard-card-label{
        min-height:1.7rem !important;
        padding:.2rem .65rem !important;
        font-size:.7rem !important;
    }

    .flashcard-face-back .flashcard-meaning{
        max-width:100% !important;
        font-size:clamp(1.9rem,7.4vh,3.6rem) !important;
        line-height:1 !important;
    }

    .flashcard-face-back .flashcard-detail-grid{
        width:100% !important;
        gap:.38rem !important;
    }

    .flashcard-face-back .flashcard-detail-grid > span{
        min-height:3.65rem !important;
        padding:.55rem .6rem !important;
        border-radius:16px !important;
    }

    .flashcard-face-back .flashcard-detail-grid small,
    .flashcard-face-back .flashcard-example-box small{
        font-size:.62rem !important;
    }

    .flashcard-face-back .flashcard-detail-grid strong{
        font-size:.95rem !important;
        line-height:1.12 !important;
    }

    .flashcard-face-back .flashcard-example-box{
        width:100% !important;
        min-height:6.4rem !important;
        padding:.62rem .7rem !important;
        border-radius:16px !important;
    }

    .flashcard-face-back .flashcard-example-box strong,
    .flashcard-face-back .flashcard-example-hanzi,
    .flashcard-face-back .flashcard-example-box strong[data-card-example-hanzi]{
        font-size:clamp(1.28rem,4.6vh,2.05rem) !important;
    }

    .flashcard-face-back .flashcard-example-box em,
    .flashcard-face-back .flashcard-example-pinyin{
        font-size:.82rem !important;
    }

    .flashcard-face-back .flashcard-example-box span,
    .flashcard-face-back .flashcard-example-translation,
    .flashcard-face-back .flashcard-example-box span[data-card-example-translation]{
        font-size:.78rem !important;
    }
}

/* Laptop pendek: gunakan ukuran sedang supaya tombol bawah tetap aman. */
@media (max-height:760px) and (min-width:769px){
    .flashcard-face-back{
        gap:.38rem !important;
        padding:.8rem 1rem !important;
    }

    .flashcard-face-back .flashcard-meaning{
        font-size:clamp(2rem,6.6vh,4.1rem) !important;
    }

    .flashcard-face-back .flashcard-detail-grid > span{
        min-height:3.7rem !important;
        padding:.55rem .75rem !important;
    }

    .flashcard-face-back .flashcard-detail-grid strong{
        font-size:clamp(.92rem,2.1vh,1.22rem) !important;
    }

    .flashcard-face-back .flashcard-example-box{
        min-height:6.2rem !important;
        padding:.58rem .8rem !important;
    }

    .flashcard-face-back .flashcard-example-box strong,
    .flashcard-face-back .flashcard-example-hanzi,
    .flashcard-face-back .flashcard-example-box strong[data-card-example-hanzi]{
        font-size:clamp(1.25rem,3.5vh,2.25rem) !important;
    }
}