/* Lóngmò — Refonte visuelle 1.2 */
:root{--sidebar-w:176px;--page-max:1500px;--glass:rgba(255,250,244,.92);--glass-strong:rgba(255,250,244,.97);--panel-border:rgba(118,54,29,.18);--theme-hero:url('../assets/themes/hsk/home.webp?v=1.2.16');--theme-dark:#4c100c;--theme-deep:#751312;--theme-accent:#df2a1f;--theme-accent-2:#f4a32b;--theme-soft:#fff0dc;--theme-ink:#3e2117;--theme-muted:#765c4e;--theme-shadow:0 20px 48px rgba(93,28,13,.18)}
body.traditional{--glass:rgba(247,252,255,.92);--glass-strong:rgba(249,253,255,.97);--panel-border:rgba(15,93,151,.16);--theme-hero:url('../assets/themes/tocfl/home.webp?v=1.2.16');--theme-dark:#062b54;--theme-deep:#083f78;--theme-accent:#087fe0;--theme-accent-2:#24b6d6;--theme-soft:#e7f6ff;--theme-ink:#12324d;--theme-muted:#5d7488;--theme-shadow:0 20px 48px rgba(8,77,137,.17)}
html{scroll-behavior:smooth}body{min-height:100vh;color:var(--theme-ink);background:#f7e6d5;background-image:linear-gradient(90deg,rgba(255,248,239,.97),rgba(255,248,239,.88)),var(--theme-hero);background-size:cover;background-position:center;background-attachment:fixed}body.traditional{background:#e4f4ff;background-image:linear-gradient(90deg,rgba(247,252,255,.97),rgba(247,252,255,.88)),var(--theme-hero)}body::before{display:none!important}
.shell{width:auto!important;max-width:none!important;min-height:100vh;margin:0!important;padding:22px 28px 72px calc(var(--sidebar-w) + 30px)!important}.app-sidebar{position:fixed;inset:0 auto 0 0;z-index:870;width:var(--sidebar-w);display:flex;flex-direction:column;padding:12px 10px 14px;color:#fff;background:linear-gradient(180deg,rgba(74,13,10,.96),rgba(42,10,8,.98)),var(--theme-hero);background-size:auto,900px auto;background-position:center,left center;border-right:1px solid rgba(255,226,175,.18);box-shadow:9px 0 35px rgba(49,7,3,.16);overflow:auto}body.traditional .app-sidebar{background:linear-gradient(180deg,rgba(3,38,79,.97),rgba(3,27,58,.99)),var(--theme-hero);border-right-color:rgba(170,222,255,.18);box-shadow:9px 0 35px rgba(3,50,98,.14)}.sidebar-brand{display:flex;align-items:center;gap:9px;padding:7px 6px 12px;border-bottom:1px solid rgba(255,255,255,.13);margin-bottom:8px}.sidebar-brand>span{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#ee4931,#9f100c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);font:900 19px/1 "Noto Serif SC",serif}body.traditional .sidebar-brand>span{background:linear-gradient(135deg,#1594e9,#075aa6)}.sidebar-brand strong{font:800 16px/1.05 Georgia,"Noto Serif SC",serif}.sidebar-brand small{display:block;margin-top:4px;font:700 11px/1 "Noto Serif SC",serif;opacity:.84}.app-sidebar nav{display:flex;flex-direction:column;gap:2px}.app-sidebar nav button{position:relative;display:flex;align-items:center;gap:9px;width:100%;min-height:34px;border:0;border-radius:8px;padding:7px 8px;color:rgba(255,255,255,.88);background:transparent;text-align:left;font-size:11.5px;cursor:pointer;transition:background .18s,transform .18s,color .18s}.app-sidebar nav button>span{display:grid;place-items:center;flex:0 0 23px;width:23px;height:23px;border-radius:7px;background:rgba(255,255,255,.07);font:800 12px/1 "Noto Serif SC",serif}.app-sidebar nav button:hover:not([aria-disabled="true"]){background:rgba(255,255,255,.08);transform:translateX(2px)}.app-sidebar nav button.active{color:#fff;background:linear-gradient(90deg,#e83429,#bc1716);box-shadow:0 5px 15px rgba(0,0,0,.18)}body.traditional .app-sidebar nav button.active{background:linear-gradient(90deg,#0789eb,#0868c2)}.app-sidebar nav button.universe-link.active{box-shadow:inset 3px 0 #ffd77f,0 5px 15px rgba(0,0,0,.16)}.app-sidebar nav button small{margin-left:auto;padding:2px 5px;border-radius:999px;background:rgba(255,255,255,.1);font-size:8px;opacity:.75}.app-sidebar .future-module{cursor:default;opacity:.48}.sidebar-section{margin:9px 8px 3px;color:rgba(255,255,255,.47);font-size:8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.sidebar-note{margin:auto 4px 0;padding:8px 5px 0;border-top:1px solid rgba(255,255,255,.11);color:rgba(255,255,255,.55);font-size:9px;text-align:center}.sidebar-user{display:flex;align-items:center;gap:8px;margin:11px 2px 7px;padding:8px;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(255,255,255,.06)}.sidebar-user .profile-avatar{width:30px;height:30px;flex:0 0 30px;border-color:rgba(255,255,255,.7)}.sidebar-user div{min-width:0}.sidebar-user strong,.sidebar-user small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user strong{font-size:10px}.sidebar-user small{margin-top:2px;font-size:8px;color:rgba(255,255,255,.7)}
.shell>header,.top-switch,.legacy-tabs{display:none!important}.streak-chip{position:fixed!important;z-index:865!important;right:20px!important;top:14px!important;left:auto!important;bottom:auto!important;border:1px solid var(--panel-border)!important;background:var(--glass-strong)!important;color:var(--theme-ink)!important;box-shadow:0 7px 24px rgba(0,0,0,.12)!important}
.page-view{display:none!important;width:min(var(--page-max),100%);margin:0 auto}.page-view.active{display:block!important}.content-panel{border:1px solid var(--panel-border);border-radius:20px;background:var(--glass-strong);box-shadow:var(--theme-shadow);backdrop-filter:blur(12px);padding:clamp(18px,2.4vw,30px)}.page-kicker{display:block;margin-bottom:4px;color:var(--theme-accent);font-size:10px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}.page-hero{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.72);border-radius:22px;background:linear-gradient(90deg,rgba(255,250,242,.95),rgba(255,250,242,.77)),var(--theme-hero);background-size:cover;background-position:center 55%;box-shadow:var(--theme-shadow)}body.traditional .page-hero{background:linear-gradient(90deg,rgba(247,252,255,.96),rgba(247,252,255,.77)),var(--theme-hero);background-size:cover;background-position:center 55%}.compact-hero{min-height:132px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 30px;margin-bottom:16px}.compact-hero h2,.profile-page-hero h2{margin:0;font:900 clamp(27px,3.4vw,43px)/1.08 Georgia,"Noto Serif SC",serif;color:var(--theme-deep)}.compact-hero p{max-width:720px;margin:7px 0 0;color:var(--theme-muted);font-size:13px}.hero-mascot{flex:0 0 112px;width:112px;height:104px;border-radius:50% 45% 46% 50%;background-image:var(--theme-hero);background-size:610px auto;background-position:4% 82%;filter:drop-shadow(0 8px 14px rgba(68,20,8,.19));border:2px solid rgba(255,255,255,.8)}body.traditional .hero-mascot{background-size:610px auto;background-position:2% 80%}.primary-cta,.secondary-cta,.danger-cta{border:0;border-radius:11px;padding:10px 15px;font-weight:850;cursor:pointer;transition:transform .16s,filter .16s}.primary-cta{background:linear-gradient(135deg,var(--theme-accent),var(--theme-deep));color:white;box-shadow:0 8px 20px color-mix(in srgb,var(--theme-accent) 24%,transparent)}.secondary-cta{border:1px solid var(--panel-border);background:var(--glass-strong);color:var(--theme-deep)}.danger-cta{background:#a61f28;color:#fff}.primary-cta:hover,.secondary-cta:hover,.danger-cta:hover{transform:translateY(-1px);filter:brightness(1.03)}
.dashboard{position:relative;min-height:calc(100vh - 45px);overflow:hidden;border-radius:28px;background-image:linear-gradient(90deg,rgba(68,16,8,.06),rgba(68,16,8,.02)),var(--theme-hero);background-size:cover;background-position:center;box-shadow:0 24px 70px rgba(69,18,8,.22);isolation:isolate}body.traditional .dashboard{box-shadow:0 24px 70px rgba(5,66,120,.2)}.dashboard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,249,239,.02) 0,rgba(255,249,239,.09) 50%,rgba(255,249,239,.42) 100%)}body.traditional .dashboard::after{background:linear-gradient(180deg,rgba(244,251,255,.02),rgba(244,251,255,.09) 50%,rgba(244,251,255,.4))}.dashboard-hero{position:relative;min-height:410px;padding:55px clamp(30px,5vw,78px);border:0!important;background:transparent!important;box-shadow:none!important}.dashboard-copy{max-width:620px;margin-left:28%;text-align:center;text-shadow:0 2px 16px rgba(255,235,211,.7)}body.traditional .dashboard-copy{text-shadow:0 2px 16px rgba(224,246,255,.8)}.dashboard-kicker{display:inline-flex;padding:5px 10px;border-radius:999px;background:rgba(255,249,236,.85);color:var(--theme-deep);font-size:10px;font-weight:900;letter-spacing:.08em}.dashboard-copy h2{margin:12px 0 4px;font:900 clamp(40px,5.7vw,76px)/1 Georgia,"Noto Serif SC",serif;color:var(--theme-deep)}.dashboard-copy>p{margin:8px 0;color:var(--theme-ink);font-size:15px;font-weight:700}.dashboard-copy blockquote{display:inline-flex;flex-direction:column;margin:20px 0 0;padding:11px 18px;border-radius:14px;background:rgba(255,249,239,.7);color:var(--theme-deep);font:800 18px/1.25 "Noto Serif SC",serif;backdrop-filter:blur(7px)}.dashboard-copy blockquote small{margin-top:4px;font:700 10px/1.2 Inter,sans-serif;color:var(--theme-muted)}.dashboard-profile{position:absolute;right:28px;top:22px;display:flex;align-items:center;gap:9px;min-width:190px;padding:9px 12px;border:1px solid rgba(255,255,255,.84);border-radius:14px;background:rgba(255,250,241,.88);box-shadow:0 8px 22px rgba(70,20,10,.12);backdrop-filter:blur(9px)}body.traditional .dashboard-profile{background:rgba(247,252,255,.9)}.dashboard-profile .profile-avatar{width:42px;height:42px}.dashboard-profile strong,.dashboard-profile small{display:block}.dashboard-profile strong{font-size:12px;color:var(--theme-deep)}.dashboard-profile small{margin-top:2px;color:var(--theme-muted);font-size:9px}.dashboard-stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;width:min(740px,calc(100% - 46px));margin:-98px 22px 0 auto;border:1px solid rgba(255,255,255,.8);border-radius:17px;overflow:hidden;background:rgba(255,250,242,.92);box-shadow:0 18px 40px rgba(81,20,9,.16);backdrop-filter:blur(10px)}body.traditional .dashboard-stats{background:rgba(247,252,255,.92)}.dashboard-stats article{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;align-items:center;gap:0 7px;padding:15px 18px;border-right:1px solid var(--panel-border)}.dashboard-stats article:last-child{border-right:0}.dashboard-stats article>span{grid-row:1/3;font-size:22px;color:var(--theme-accent)}.dashboard-stats strong{font-size:23px;color:var(--theme-deep)}.dashboard-stats small{font-size:9px;color:var(--theme-muted)}.dashboard-progress{position:relative;z-index:2;width:min(930px,calc(100% - 46px));margin:14px 22px 22px auto;padding:18px 20px;border:1px solid rgba(255,255,255,.76);border-radius:17px;background:rgba(255,250,242,.91);box-shadow:0 12px 28px rgba(79,20,9,.12);backdrop-filter:blur(10px)}body.traditional .dashboard-progress{background:rgba(247,252,255,.91)}.dashboard-section-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.dashboard-section-head span{font-size:9px;color:var(--theme-accent);font-weight:900}.dashboard-section-head h3{margin:2px 0 0;font-size:16px;color:var(--theme-deep)}.dashboard-section-head button{border:0;border-radius:999px;padding:9px 16px;background:var(--theme-accent);color:#fff;font-weight:850;cursor:pointer}.dashboard-levels{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:13px}.dashboard-level{padding:10px;border:1px solid var(--panel-border);border-radius:11px;background:rgba(255,255,255,.58)}.dashboard-level strong,.dashboard-level small{display:block}.dashboard-level strong{font-size:10px;color:var(--theme-deep)}.dashboard-level small{margin-top:3px;font-size:8px;color:var(--theme-muted)}.dashboard-level .mini-progress{height:5px;margin-top:7px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden}.dashboard-level .mini-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--theme-accent),var(--theme-accent-2));border-radius:inherit}
.vocabulary-controls{display:grid;grid-template-columns:minmax(260px,1fr) auto auto;gap:9px}.search-field{display:flex;align-items:center;gap:7px;border:1px solid var(--panel-border);border-radius:11px;padding:0 11px;background:#fff}.search-field input{width:100%;border:0;outline:0;padding:10px 0;background:transparent;color:var(--theme-ink)}.vocabulary-controls select,.quiz-setup select,.grammar-toolbar select{border:1px solid var(--panel-border);border-radius:11px;padding:9px 11px;background:#fff;color:var(--theme-ink)}.vocabulary-summary{display:flex;justify-content:space-between;gap:15px;margin:13px 2px 8px;color:var(--theme-muted);font-size:10px}.vocabulary-summary strong{color:var(--theme-deep);font-size:12px}.vocabulary-table-wrap{max-height:calc(100vh - 330px);min-height:360px;overflow:auto;border:1px solid var(--panel-border);border-radius:14px}.vocabulary-table{width:100%;border-collapse:collapse;background:rgba(255,255,255,.73)}.vocabulary-table th{position:sticky;top:0;z-index:1;padding:10px 12px;background:color-mix(in srgb,var(--theme-soft) 84%,#fff);color:var(--theme-muted);font-size:9px;text-align:left;text-transform:uppercase;letter-spacing:.06em}.vocabulary-table td{padding:9px 12px;border-top:1px solid var(--panel-border);font-size:11px}.vocabulary-table td:first-child{font:800 20px/1.1 "Noto Serif SC",serif;color:var(--theme-deep)}.status-pill{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:8px;font-weight:900}.status-pill.known{background:#d9f3df;color:#1f7047}.status-pill.review{background:#fff0c8;color:#8d5f12}.status-pill.new{background:#eee7e1;color:#786b64}.audio-mini{border:0;border-radius:8px;padding:5px 8px;background:var(--theme-soft);color:var(--theme-deep);cursor:pointer}
.flashcard-page-heading{display:none;width:min(1050px,100%);margin:0 auto 12px;padding:15px 20px;border:1px solid rgba(255,255,255,.75);border-radius:18px;background:linear-gradient(90deg,var(--glass-strong),rgba(255,255,255,.64)),var(--theme-hero);background-size:cover;background-position:center 62%;box-shadow:var(--theme-shadow);align-items:center;justify-content:space-between;gap:20px}body[data-current-view="cards"] .flashcard-page-heading{display:flex}.flashcard-page-heading h2{margin:0;font:900 28px/1.05 Georgia,"Noto Serif SC",serif;color:var(--theme-deep)}.flashcard-page-heading p{margin:5px 0 0;color:var(--theme-muted);font-size:11px}.flashcard-page-heading .hero-mascot{width:82px;height:74px;flex-basis:82px}body:not([data-current-view="cards"]) .flashcard-only{display:none!important}body[data-current-view="cards"] #studyToolbar{display:flex!important;width:min(1050px,100%);margin:0 auto 10px;background:var(--glass-strong);border-color:var(--panel-border)}body[data-current-view="cards"] #progressWrap{display:block!important;width:min(920px,100%);margin:10px auto 12px}body[data-current-view="cards"] #study{display:grid!important;width:min(920px,100%);margin:0 auto}body[data-current-view="cards"] #actions{display:flex!important;width:min(720px,100%);margin:12px auto}body[data-current-view="cards"] #empty.show{display:grid!important}.scene,.flashcard{min-height:430px}.flashcard{border:1px solid rgba(255,255,255,.8)!important;border-radius:23px!important;box-shadow:0 22px 55px rgba(75,20,9,.2)!important}.face{background:linear-gradient(145deg,rgba(255,253,249,.98),rgba(255,244,226,.97))!important}.traditional .face{background:linear-gradient(145deg,rgba(250,254,255,.99),rgba(230,247,255,.98))!important}.hanzi{color:var(--theme-deep)}
.reader{padding-top:10px}.reader-card{width:min(1050px,100%);margin:auto;border:1px solid var(--panel-border)!important;background:linear-gradient(90deg,rgba(255,252,245,.97),rgba(255,249,237,.95)),var(--theme-hero)!important;box-shadow:var(--theme-shadow)!important}.traditional .reader-card{background:linear-gradient(90deg,rgba(249,253,255,.98),rgba(238,248,255,.96)),var(--theme-hero)!important}.reader-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:linear-gradient(var(--theme-accent),var(--theme-accent-2))}.reader h2{color:var(--theme-deep)}
.grammar{padding-top:10px}.grammar-card{width:min(1120px,100%);margin:auto;border-color:var(--panel-border)!important;background:var(--glass-strong)!important;box-shadow:var(--theme-shadow)!important}.grammar-layout{grid-template-columns:minmax(0,1fr) 210px!important}.grammar-points{max-height:620px;overflow:auto;padding-right:5px}.grammar-point{border-color:var(--panel-border)!important}.grammar-point summary{color:var(--theme-deep)!important}.grammar-teacher img{border:3px solid #fff;box-shadow:0 15px 35px rgba(0,0,0,.18)!important}
.quiz-panel{width:min(860px,100%);margin:auto}.quiz-setup{display:grid;grid-template-columns:1fr 1fr auto auto;gap:14px;align-items:end}.quiz-setup label{display:block;margin-bottom:5px;color:var(--theme-muted);font-size:10px;font-weight:900}.quiz-setup select{width:100%;min-height:40px;border:1px solid var(--panel-border);border-radius:10px;background:#fff;padding:8px;color:var(--theme-ink)}.quiz-best{min-width:140px;padding:9px 12px;border-radius:11px;background:var(--theme-soft);text-align:center}.quiz-best span,.quiz-best strong,.quiz-best small{display:block}.quiz-best span{font-size:8px;color:var(--theme-muted)}.quiz-best strong{margin-top:2px;color:var(--theme-deep)}.quiz-best small{margin-top:4px;color:var(--theme-muted);font-size:8px}.quick-quiz-notice{min-height:1.3em;margin:8px 0;color:var(--theme-muted);font-size:11px}.quick-quiz-game,.quiz-result{display:none}.quick-quiz-game.active,.quiz-result.active{display:block}.quick-quiz-hud{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-bottom:14px;color:var(--theme-muted);font-size:10px}.mini-track{height:7px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden}.mini-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--theme-accent),var(--theme-accent-2));transition:width .25s}.quick-quiz-card{position:relative;text-align:center;border:1px solid var(--panel-border);border-radius:17px;padding:24px;background:linear-gradient(145deg,#fff,var(--theme-soft))}.quick-quiz-card>p{margin:0;color:var(--theme-muted);font-size:11px}.quick-quiz-clue{margin:18px auto 4px;color:var(--theme-deep);font-size:19px;font-weight:850}.quick-quiz-hanzi{margin:20px 0 6px;font:900 clamp(64px,9vw,105px)/1 "Noto Serif SC",serif;color:var(--theme-deep)}.audio-orb{min-height:38px;border:0;border-radius:999px;background:#fff;color:var(--theme-deep);box-shadow:0 6px 15px rgba(0,0,0,.08);padding:8px 13px;cursor:pointer}.quick-quiz-answers{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:19px}.quick-quiz-answer{border:1px solid var(--panel-border);border-radius:10px;padding:11px;background:#fff;color:var(--theme-ink);font-weight:800;cursor:pointer}.quick-quiz-answer:focus-visible{outline:3px solid var(--theme-accent);outline-offset:2px}.quick-quiz-answer:disabled{cursor:default}.quick-quiz-answer.good{background:#d8f3df;border-color:#66b57e;color:#256b42}.quick-quiz-answer.bad{background:#ffe0e1;border-color:#d66b70;color:#8a2830}.quick-quiz-feedback{min-height:22px;margin-top:10px;font-size:11px;font-weight:800}.quiz-result{text-align:center;padding:28px}.result-seal{display:grid;place-items:center;width:66px;height:66px;margin:auto;border-radius:50%;background:var(--theme-accent);color:#fff;font:900 34px/1 "Noto Serif SC",serif}.quiz-result h3{margin:12px 0 3px}.quiz-result>strong{font-size:40px;color:var(--theme-deep)}.quick-quiz-skills,.quick-quiz-mistakes{color:var(--theme-muted);font-size:11px}.quick-quiz-mistakes ul{list-style:none;padding:0;margin:8px 0}.quick-quiz-mistakes li{padding:4px}.quick-quiz-result-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.challenge{padding-top:10px}.challenge-menu,.challenge-game{width:min(1000px,100%);margin:auto;border-color:var(--panel-border)!important;background:var(--glass-strong)!important;box-shadow:var(--theme-shadow)!important}.challenge-levels{grid-template-columns:repeat(3,minmax(0,1fr))!important}.challenge-level{min-height:124px!important;background:linear-gradient(145deg,#fff,var(--theme-soft))!important;border-color:var(--panel-border)!important}.challenge-level strong{color:var(--theme-deep)!important}
.collection-head{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;margin-bottom:15px}.collection-head strong,.collection-head span{display:block}.collection-head strong{font-size:22px;color:var(--theme-deep)}.collection-head span{font-size:9px;color:var(--theme-muted)}.collection-progress{height:9px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden}.collection-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--theme-accent),var(--theme-accent-2));border-radius:inherit}.rewards-page-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}.rewards-page-grid .reward-tile{aspect-ratio:1/1.05}.subsection-title{margin:25px 0 10px;color:var(--theme-deep)}
.profile-page-hero{display:flex;align-items:center;gap:16px;padding:18px 22px;margin-bottom:14px;border:1px solid var(--panel-border);border-radius:20px;background:var(--glass-strong);box-shadow:var(--theme-shadow)}.profile-page-hero .profile-avatar{width:76px;height:76px;flex:0 0 76px}.profile-page-hero>div{flex:1}.profile-page-hero p{margin:5px 0 0;color:var(--theme-muted)}.profile-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:14px}.profile-metric{padding:16px;border:1px solid var(--panel-border);border-radius:16px;background:var(--glass-strong);box-shadow:0 8px 22px rgba(0,0,0,.07)}.profile-metric strong,.profile-metric span{display:block}.profile-metric strong{font-size:25px;color:var(--theme-deep)}.profile-metric span{margin-top:3px;color:var(--theme-muted);font-size:9px}.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.panel-title-row h3{margin:0;color:var(--theme-deep)}.profile-level-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:13px}.profile-level-card{padding:12px;border:1px solid var(--panel-border);border-radius:12px;background:linear-gradient(145deg,#fff,var(--theme-soft))}.profile-level-card header{display:flex!important;padding:0!important;margin:0 0 7px!important;background:none!important;border:0!important;box-shadow:none!important;justify-content:space-between!important}.profile-level-card header strong{font-size:11px;color:var(--theme-deep)}.profile-level-card header span{font-size:9px;color:var(--theme-muted)}.profile-level-card .level-progress{height:6px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden}.profile-level-card .level-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--theme-accent),var(--theme-accent-2))}
.statistics-grid{display:grid;grid-template-columns:1.35fr .8fr;gap:14px}.statistics-grid h3{margin:0 0 14px;color:var(--theme-deep)}.statistics-levels{display:grid;gap:11px}.statistics-level{display:grid;grid-template-columns:80px 1fr 80px;gap:10px;align-items:center}.statistics-level>span{font-size:10px;font-weight:850}.statistics-level>strong{text-align:right;font-size:10px;color:var(--theme-muted)}.stats-track{height:10px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden}.stats-track span{display:block;height:100%;background:linear-gradient(90deg,var(--theme-accent),var(--theme-accent-2));border-radius:inherit}.statistics-summary{display:grid;grid-template-columns:1fr 1fr;gap:9px}.stat-summary-card{padding:14px;border-radius:12px;background:var(--theme-soft)}.stat-summary-card strong,.stat-summary-card span{display:block}.stat-summary-card strong{font-size:24px;color:var(--theme-deep)}.stat-summary-card span{font-size:8px;color:var(--theme-muted)}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.setting-card h3{margin:0;color:var(--theme-deep)}.setting-card p{min-height:34px;color:var(--theme-muted);font-size:11px}.setting-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.setting-row label{display:flex;align-items:center;gap:8px;color:var(--theme-muted);font-size:10px}.setting-row input[type="range"]{accent-color:var(--theme-accent)}.danger-setting{grid-column:1/-1;border-color:rgba(166,31,40,.24)}
.modal{backdrop-filter:blur(10px)}.profile-card,.account-welcome-card,.decision-card{border-color:var(--panel-border)!important;background:var(--glass-strong)!important;color:var(--theme-ink)!important}.profile-card h2,.account-welcome-card h2,.decision-card h2{color:var(--theme-deep)}.music-controls{left:12px!important;bottom:12px!important;width:calc(var(--sidebar-w) - 24px);z-index:880!important;justify-content:center!important;background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.12)!important;box-shadow:none!important}.music-controls label{display:none!important}.music-controls input{width:74px!important}.music-controls button{background:rgba(255,255,255,.16)!important;color:#fff!important}.teacher-buddy{width:95px!important;right:12px!important;bottom:12px!important;z-index:840!important}.teacher-bubble{display:none!important}.keyboard{display:none!important}.dataset-note{width:min(1050px,100%);margin:12px auto;color:var(--theme-muted)}footer{margin-left:0;color:var(--theme-muted)}.review-banner{position:relative;width:min(1050px,100%);margin:0 auto 12px;border-color:var(--panel-border);background:var(--glass-strong);box-shadow:0 8px 20px rgba(0,0,0,.06)}
@media(max-width:1100px){:root{--sidebar-w:158px}.shell{padding-left:calc(var(--sidebar-w) + 20px)!important;padding-right:18px!important}.dashboard-copy{margin-left:24%}.dashboard-levels{grid-template-columns:repeat(3,1fr)}.rewards-page-grid{grid-template-columns:repeat(4,1fr)!important}.profile-metrics{grid-template-columns:repeat(3,1fr)}}
@media(max-width:780px){:root{--sidebar-w:0px}.shell{padding:14px 12px 104px!important}.app-sidebar{inset:auto 8px 8px 8px;width:auto;height:78px;display:block;padding:6px 7px;border:1px solid rgba(255,255,255,.2);border-radius:18px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;background:rgba(63,13,10,.96);box-shadow:0 12px 35px rgba(0,0,0,.25)}body.traditional .app-sidebar{background:rgba(4,46,89,.96)}.sidebar-brand,.sidebar-section,.sidebar-note,.sidebar-user{display:none}.app-sidebar nav{display:flex;flex-direction:row;gap:4px}.app-sidebar nav button{display:inline-flex;width:auto;min-width:58px;height:62px;flex-direction:column;justify-content:center;gap:2px;padding:5px 8px;font-size:8px;text-align:center}.app-sidebar nav button>span{flex-basis:22px}.app-sidebar .future-module{display:none}.music-controls{display:none!important}.streak-chip{top:7px!important;right:7px!important;transform:scale(.84);transform-origin:top right}.dashboard{min-height:calc(100vh - 125px)}.dashboard-hero{min-height:390px;padding:55px 18px 30px}.dashboard-copy{margin:0;text-align:center}.dashboard-profile{left:12px;right:auto;top:12px;min-width:150px}.dashboard-stats{width:calc(100% - 20px);margin:-75px 10px 0;grid-template-columns:1fr 1fr}.dashboard-stats article:nth-child(2){border-right:0}.dashboard-progress{width:calc(100% - 20px);margin:10px}.dashboard-levels{grid-template-columns:repeat(2,1fr)}.compact-hero{min-height:112px;padding:18px}.hero-mascot{display:none}.vocabulary-controls{grid-template-columns:1fr}.vocabulary-table th:nth-child(4),.vocabulary-table td:nth-child(4){display:none}.quick-quiz-answers{grid-template-columns:1fr}.quiz-setup{grid-template-columns:1fr}.statistics-grid,.settings-grid{grid-template-columns:1fr}.danger-setting{grid-column:auto}.profile-metrics{grid-template-columns:repeat(2,1fr)}.profile-level-grid{grid-template-columns:1fr}.rewards-page-grid{grid-template-columns:repeat(2,1fr)!important}.challenge-levels{grid-template-columns:1fr 1fr!important}.flashcard-page-heading{padding-right:14px}.scene,.flashcard{min-height:420px}}
@media(max-width:520px){.dashboard-copy h2{font-size:38px}.dashboard-stats{grid-template-columns:1fr 1fr}.dashboard-stats article{padding:12px}.dashboard-levels{grid-template-columns:1fr 1fr}.profile-metrics{grid-template-columns:1fr 1fr}.statistics-summary{grid-template-columns:1fr}.challenge-levels{grid-template-columns:1fr!important}.vocabulary-table th:nth-child(5),.vocabulary-table td:nth-child(5){display:none}.teacher-buddy{display:none!important}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* =========================================================
   1.2.1 — STABILISATION VISUELLE ET NAVIGATION
   Ces règles sont volontairement en fin de fichier afin de
   neutraliser les anciens styles sans casser leur logique.
   ========================================================= */
[hidden]{display:none!important}
:root{--sidebar-w:190px;--page-max:1380px}
body{overflow-x:hidden}
.shell{padding-top:18px!important;padding-right:24px!important;padding-bottom:76px!important;padding-left:calc(var(--sidebar-w) + 24px)!important}
.page-view{width:min(var(--page-max),100%)!important;margin:0 auto!important;animation:longmo-page-in .18s ease-out both}
.page-view[hidden]{display:none!important}
.page-view.active:not([hidden]){display:block!important}
@keyframes longmo-page-in{from{opacity:.2;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Sidebar : seule navigation globale, lisible et stable. */
.app-sidebar{padding:14px 12px 16px!important}
.app-sidebar nav{gap:3px!important}
.app-sidebar nav button{min-height:38px!important;border-radius:10px!important;padding:8px 9px!important;font-size:12px!important;font-weight:750!important}
.app-sidebar nav button>span{width:25px!important;height:25px!important;flex-basis:25px!important}
.app-sidebar nav button.active{box-shadow:inset 3px 0 rgba(255,230,169,.9),0 7px 18px rgba(0,0,0,.18)!important}
body.traditional .app-sidebar nav button.active{box-shadow:inset 3px 0 rgba(185,235,255,.92),0 7px 18px rgba(0,0,0,.17)!important}
.sidebar-section{margin-top:11px!important}
.sidebar-user{margin-top:13px!important}

/* Les panneaux gardent du décor mais restent lisibles. */
.content-panel{border-radius:22px!important;background:var(--glass-strong)!important;box-shadow:0 20px 48px rgba(61,24,10,.13)!important}
body.traditional .content-panel{box-shadow:0 20px 48px rgba(4,62,116,.13)!important}
.page-hero{min-height:146px!important;border-radius:24px!important}
.compact-hero{padding:24px 32px!important;margin-bottom:18px!important}
.compact-hero h2,.profile-page-hero h2{font-size:clamp(30px,3vw,46px)!important}
.compact-hero p{font-size:13px!important;line-height:1.55!important}
.hero-mascot{width:124px!important;height:112px!important;flex-basis:124px!important;border-radius:28px!important;background-size:680px auto!important;background-position:1% 84%!important;box-shadow:0 14px 30px rgba(0,0,0,.14)!important}
body.traditional .hero-mascot{background-position:1% 82%!important}

/* Vocabulaire : explorateur, pas une liste brute. */
.vocabulary-page .page-hero{background-position:center 64%!important}
.vocabulary-panel{padding:22px!important}
.vocabulary-controls{grid-template-columns:minmax(320px,1fr) 190px 190px!important;gap:12px!important}
.search-field,.vocabulary-controls select{min-height:44px!important;border-radius:13px!important}
.search-field input{font-size:13px!important}
.vocabulary-summary{margin:16px 3px 10px!important;font-size:11px!important}
.vocabulary-summary strong{font-size:14px!important}
.vocabulary-table-wrap{max-height:calc(100vh - 360px)!important;min-height:430px!important;border-radius:16px!important;background:rgba(255,255,255,.82)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)!important}
.vocabulary-table th{padding:12px 14px!important;font-size:10px!important}
.vocabulary-table td{padding:11px 14px!important;font-size:13px!important;line-height:1.25!important}
.vocabulary-table td:first-child{font-size:22px!important}
.vocabulary-table tbody tr{transition:background .15s ease,transform .15s ease}
.vocabulary-table tbody tr:hover{background:var(--theme-soft)!important}
.audio-mini{width:34px!important;height:30px!important;border-radius:9px!important;border:1px solid var(--panel-border)!important;background:#fff!important;cursor:pointer!important}
.status-pill{display:inline-flex!important;align-items:center!important;min-height:25px!important;padding:3px 9px!important;border-radius:999px!important;font-size:10px!important;font-weight:850!important}
button.status-pill{cursor:pointer!important;border:0!important;font:inherit!important}
.status-pill.known{background:#dff3e5!important;color:#247047!important}.status-pill.review{background:#fff0cd!important;color:#95620b!important}.status-pill.new{background:#eef0f2!important;color:#67727d!important}

/* Flashcards : une page unique centrée sur l'apprentissage. */
.flashcards-page{width:min(1120px,100%)!important}
.flashcard-page-heading{display:flex!important;width:100%!important;min-height:128px!important;margin:0 0 14px!important;padding:20px 26px!important}
.flashcards-page #studyToolbar{display:flex!important;width:100%!important;margin:0 0 12px!important;padding:12px 14px!important;border-radius:16px!important}
.flashcards-page #progressWrap{display:block!important;width:min(900px,100%)!important;margin:10px auto 14px!important}
.flashcards-page #study{display:grid!important;width:min(900px,100%)!important;margin:0 auto!important}
.flashcards-page #actions{display:flex!important;width:min(690px,100%)!important;margin:14px auto 0!important}
.flashcards-page #empty.show{display:grid!important}
.flashcards-page .scene,.flashcards-page .flashcard{min-height:450px!important}
.flashcards-page .flashcard{border-radius:28px!important;box-shadow:0 24px 64px rgba(74,19,7,.19)!important}
body.traditional .flashcards-page .flashcard{box-shadow:0 24px 64px rgba(5,64,119,.18)!important}
.flashcards-page .hanzi{font-size:clamp(86px,11vw,150px)!important}

/* Lecture : carnet/texte illustré, distinct des cartes. */
.reader{width:min(1120px,100%)!important;padding-top:0!important}
.reader-card{position:relative!important;overflow:hidden!important;width:100%!important;min-height:650px!important;padding:34px 40px!important;border-radius:26px!important;background:linear-gradient(95deg,rgba(255,252,244,.98) 0 66%,rgba(255,245,228,.91)),var(--theme-hero)!important;background-size:cover!important;background-position:center 62%!important}
body.traditional .reader-card{background:linear-gradient(95deg,rgba(249,253,255,.98) 0 66%,rgba(230,247,255,.91)),var(--theme-hero)!important;background-size:cover!important;background-position:center 62%!important}
.reader-card::after{content:"文";position:absolute;right:34px;top:24px;color:color-mix(in srgb,var(--theme-accent) 14%,transparent);font:900 150px/1 Georgia,"Noto Serif SC",serif;pointer-events:none}
.reader .long-text{position:relative;z-index:1;padding:26px 28px!important;border-radius:18px!important;background:rgba(255,255,255,.76)!important;box-shadow:0 10px 28px rgba(0,0,0,.07)!important;font-size:24px!important;line-height:2!important}
.reader-nav,.reader-actions{position:relative;z-index:1!important}

/* Grammaire : manuel interactif + professeur. */
.grammar{width:min(1180px,100%)!important;padding-top:0!important}
.grammar-card{position:relative!important;overflow:hidden!important;width:100%!important;padding:28px 30px!important;border-radius:26px!important}
.grammar-card::before{content:"语法";position:absolute;right:22px;top:4px;color:color-mix(in srgb,var(--theme-accent) 9%,transparent);font:900 110px/1 Georgia,"Noto Serif SC",serif;pointer-events:none}
.grammar-card>h2{font-size:36px!important}
.grammar-toolbar{position:relative;z-index:1!important;padding:12px 14px!important;border-radius:14px!important;background:var(--theme-soft)!important}
.grammar-layout{position:relative;z-index:1!important;grid-template-columns:minmax(0,1fr) 245px!important;gap:18px!important}
.grammar-points{max-height:650px!important;padding:6px 6px 6px 0!important}
.grammar-point{margin-bottom:9px!important;border-radius:14px!important;background:rgba(255,255,255,.78)!important}
.grammar-point summary{padding:13px 15px!important;font-size:13px!important}
.grammar-teacher{position:sticky!important;top:20px!important;align-self:start!important;padding:14px!important;border-radius:20px!important;background:linear-gradient(160deg,var(--theme-soft),rgba(255,255,255,.92))!important}
.grammar-teacher img{width:100%!important;max-height:270px!important;object-fit:cover!important;border-radius:17px!important}

/* Quiz : une question à la fois, visuellement isolée. */
.quiz-page .page-hero{background-position:center 68%!important}
.quiz-panel{width:min(900px,100%)!important;padding:24px!important}
.quiz-setup{grid-template-columns:1fr 150px auto!important;gap:16px!important}
.quick-quiz-card{max-width:720px!important;margin:16px auto!important;padding:30px 34px!important;border-radius:24px!important;box-shadow:0 18px 42px rgba(0,0,0,.09)!important}
.quick-quiz-hanzi{font-size:clamp(82px,10vw,130px)!important}
.quick-quiz-answer{min-height:50px!important;border-radius:13px!important;font-size:14px!important}

/* Challenges : missions, distinctes du quiz rapide. */
.challenge{width:min(1120px,100%)!important;padding-top:0!important}
.challenge-menu,.challenge-game{width:100%!important;padding:28px!important;border-radius:26px!important}
.challenge-menu{background:linear-gradient(130deg,var(--glass-strong) 0 70%,color-mix(in srgb,var(--theme-soft) 76%,transparent)),var(--theme-hero)!important;background-size:cover!important;background-position:center 70%!important}
.challenge-levels{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:13px!important}
.challenge-level{min-height:142px!important;border-radius:17px!important;box-shadow:0 8px 22px rgba(0,0,0,.07)!important}
.challenge-game{max-width:860px!important}
.quiz-hanzi{font-size:clamp(84px,10vw,130px)!important}
.quiz-answers button{min-height:54px!important}

/* Récompenses / profil / statistiques : vraies pages dashboard. */
.rewards-page-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:13px!important}
.rewards-page-grid .reward-tile{border-radius:16px!important;overflow:hidden!important}
.profile-page-hero{min-height:130px!important;padding:22px 26px!important;border-radius:24px!important;background:linear-gradient(90deg,var(--glass-strong),rgba(255,255,255,.73)),var(--theme-hero)!important;background-size:cover!important;background-position:center 62%!important}
.profile-metrics{gap:12px!important}.profile-metric{min-height:92px!important;border-radius:18px!important}.profile-metric strong{font-size:30px!important}
.statistics-grid{gap:18px!important}.statistics-grid>.content-panel{min-height:440px!important}.statistics-level{grid-template-columns:110px 1fr 70px!important}.stats-track{height:12px!important}
.settings-grid{gap:18px!important}.setting-card{min-height:180px!important}.setting-card h3{font-size:18px!important}.setting-card p{font-size:12px!important;line-height:1.55!important}

/* Les éléments flottants ne doivent jamais masquer le contenu. */
.teacher-buddy{right:18px!important;bottom:18px!important;width:82px!important}
.music-controls{left:12px!important;bottom:12px!important;width:calc(var(--sidebar-w) - 24px)!important}
.streak-chip{right:18px!important;top:16px!important}

@media(max-width:1180px){:root{--sidebar-w:168px}.shell{padding-left:calc(var(--sidebar-w) + 18px)!important;padding-right:16px!important}.vocabulary-controls{grid-template-columns:1fr 170px 170px!important}.rewards-page-grid{grid-template-columns:repeat(4,1fr)!important}}
@media(max-width:900px){.vocabulary-controls{grid-template-columns:1fr!important}.quiz-setup{grid-template-columns:1fr!important}.grammar-layout{grid-template-columns:1fr!important}.grammar-teacher{position:relative!important;top:auto!important;display:flex!important;align-items:center!important;gap:12px!important}.grammar-teacher img{width:120px!important;height:120px!important}.challenge-levels{grid-template-columns:repeat(2,1fr)!important}.rewards-page-grid{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:780px){:root{--sidebar-w:0px}.shell{padding:12px 10px 100px!important}.app-sidebar{height:76px!important}.app-sidebar nav button{min-width:64px!important;height:60px!important;font-size:8px!important}.compact-hero{padding:18px!important}.hero-mascot{display:none!important}.reader-card{padding:22px 16px!important}.reader .long-text{padding:18px!important;font-size:20px!important}.rewards-page-grid{grid-template-columns:repeat(2,1fr)!important}.teacher-buddy{display:none!important}.music-controls{display:none!important}}

/* ========================================================================
   Lóngmò 1.2.2 — deuxième passe visuelle
   Référence : maquettes HSK rouge/or et TOCFL bleu/turquoise fournies.
   Les pages conservent leur logique existante mais ont désormais chacune
   une composition visuelle dédiée. Une seule sidebar globale reste visible.
   ======================================================================== */

:root{
  --page-edge:rgba(118,54,29,.20);
  --page-paper:rgba(255,249,240,.94);
  --page-paper-strong:rgba(255,252,246,.985);
  --page-wash:rgba(244,92,45,.08);
}
body.traditional{
  --page-edge:rgba(15,92,151,.20);
  --page-paper:rgba(244,251,255,.94);
  --page-paper-strong:rgba(250,253,255,.985);
  --page-wash:rgba(8,127,224,.08);
}

/* Accueil : conserver l'illustration entière au lieu de la recadrer. */
.dashboard{
  width:min(1779px,100%)!important;
  aspect-ratio:1779/884!important;
  min-height:0!important;
  margin:0 auto!important;
  background-size:100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  border:1px solid rgba(255,255,255,.74)!important;
  border-radius:27px!important;
}
.dashboard-hero{
  min-height:0!important;
  height:52%!important;
  padding:4.2% 4.5%!important;
}
.dashboard-copy{
  width:48%!important;
  max-width:none!important;
  margin-left:31%!important;
  text-align:center!important;
}
.dashboard-copy h2{font-size:clamp(38px,4.6vw,72px)!important}
.dashboard-profile{right:2.2%!important;top:2.2%!important}
.dashboard-stats{
  position:absolute!important;
  right:2.2%!important;
  bottom:27.8%!important;
  width:58%!important;
  margin:0!important;
}
.dashboard-progress{
  position:absolute!important;
  right:2.2%!important;
  bottom:5.0%!important;
  width:67%!important;
  margin:0!important;
}
@media(max-width:1180px){
  .dashboard-copy{margin-left:27%!important;width:56%!important}
  .dashboard-stats{width:67%!important}
  .dashboard-progress{width:75%!important}
  .dashboard-levels{grid-template-columns:repeat(6,minmax(0,1fr))!important}
}
@media(max-width:900px){
  .dashboard{aspect-ratio:auto!important;min-height:720px!important;background-size:cover!important;background-position:center!important}
  .dashboard-hero{height:auto!important;min-height:390px!important;padding:56px 18px 28px!important}
  .dashboard-copy{width:100%!important;margin:0!important}
  .dashboard-stats,.dashboard-progress{position:relative!important;right:auto!important;bottom:auto!important;width:calc(100% - 20px)!important;margin:10px!important}
  .dashboard-stats{margin-top:-58px!important}
  .dashboard-levels{grid-template-columns:repeat(2,1fr)!important}
}

/* Toutes les pages pédagogiques : décor visible, panel intégré à la scène. */
.page-view:not(.dashboard){
  position:relative;
  overflow:hidden;
  min-height:calc(100vh - 44px);
  padding:18px;
  border:1px solid rgba(255,255,255,.70);
  border-radius:26px;
  background-image:
    linear-gradient(90deg,rgba(255,247,236,.80),rgba(255,247,236,.54)),
    var(--theme-hero);
  background-size:cover;
  background-position:center 58%;
  box-shadow:0 22px 60px rgba(82,25,10,.17);
}
body.traditional .page-view:not(.dashboard){
  background-image:
    linear-gradient(90deg,rgba(244,251,255,.80),rgba(244,251,255,.54)),
    var(--theme-hero);
  box-shadow:0 22px 60px rgba(4,64,119,.16);
}
.page-view:not(.dashboard)::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 34%,rgba(255,255,255,.16));
}
.page-view:not(.dashboard)>*{position:relative;z-index:1}
.content-panel{background:var(--page-paper)!important;border-color:rgba(255,255,255,.78)!important;box-shadow:0 18px 44px rgba(74,20,8,.13)!important}
body.traditional .content-panel{box-shadow:0 18px 44px rgba(5,67,122,.12)!important}

/* En-têtes compacts : ils servent de titre, pas de second header global. */
.compact-hero,.flashcard-page-heading,.profile-page-hero{
  min-height:92px!important;
  margin:0 0 12px!important;
  padding:15px 20px!important;
  border:1px solid rgba(255,255,255,.76)!important;
  border-radius:18px!important;
  background:linear-gradient(90deg,var(--page-paper-strong),rgba(255,255,255,.66))!important;
  box-shadow:0 10px 26px rgba(72,20,9,.09)!important;
  backdrop-filter:blur(9px);
}
body.traditional .compact-hero,body.traditional .flashcard-page-heading,body.traditional .profile-page-hero{box-shadow:0 10px 26px rgba(4,62,111,.09)!important}
.compact-hero h2,.flashcard-page-heading h2,.profile-page-hero h2{font-size:clamp(25px,2.6vw,38px)!important}
.compact-hero p,.flashcard-page-heading p{margin:3px 0 0!important;font-size:11px!important}
.hero-mascot{width:86px!important;height:72px!important;flex-basis:86px!important;border-radius:17px!important;background-size:430px auto!important;background-position:0% 82%!important}
body.traditional .hero-mascot{background-position:0% 84%!important}

/* Ruban de niveaux commun — remplace les listes déroulantes comme contrôle principal. */
.level-ribbon{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:7px;
  margin:0 0 12px;
  padding:6px;
  border:1px solid var(--panel-border);
  border-radius:14px;
  background:rgba(255,255,255,.62);
}
.level-ribbon button{
  min-height:36px;
  border:1px solid transparent;
  border-radius:9px;
  background:rgba(255,255,255,.56);
  color:var(--theme-muted);
  font-size:10px;
  font-weight:850;
  cursor:pointer;
}
.level-ribbon button:hover{border-color:color-mix(in srgb,var(--theme-accent) 28%,transparent);color:var(--theme-deep)}
.level-ribbon button.active{
  color:#fff;
  background:linear-gradient(135deg,var(--theme-accent),var(--theme-deep));
  box-shadow:0 6px 15px color-mix(in srgb,var(--theme-accent) 22%,transparent);
}

/* Vocabulaire — tableau compact dans un véritable espace illustré. */
.vocabulary-page{background-position:center 64%!important}
.vocabulary-page .compact-hero{width:62%;margin-left:0!important}
.vocabulary-page .vocab-mascot{margin-left:auto}
.vocabulary-panel{
  width:min(1040px,77%)!important;
  margin:0 0 0 0!important;
  padding:14px!important;
}
.vocabulary-panel::after{
  content:"词汇";
  position:absolute;
  right:-12px;
  bottom:-18px;
  color:color-mix(in srgb,var(--theme-accent) 10%,transparent);
  font:900 118px/1 Georgia,"Noto Serif SC",serif;
  pointer-events:none;
}
body.traditional .vocabulary-panel::after{content:"詞彙"}
.vocabulary-controls{grid-template-columns:minmax(300px,1fr) 190px!important;gap:9px!important}
#vocabLevel{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.vocabulary-summary{display:flex!important;justify-content:space-between!important;align-items:center!important;margin:8px 4px!important}
.vocabulary-table-wrap{max-height:calc(100vh - 330px)!important;min-height:340px!important;border:1px solid rgba(255,255,255,.72)!important}
.vocabulary-table th{padding:9px 11px!important;background:color-mix(in srgb,var(--theme-soft) 72%,white)!important}
.vocabulary-table td{padding:8px 11px!important;font-size:11.5px!important;background:rgba(255,255,255,.58)!important}
.vocabulary-table td:first-child{font-size:18px!important;font-weight:900!important;color:var(--theme-deep)!important}
.vocabulary-table tbody tr:hover td{background:color-mix(in srgb,var(--theme-soft) 64%,white)!important}
.status-pill{font-size:9px!important;padding:4px 7px!important}
.vocabulary-page::after{
  content:"";
  position:absolute;
  right:1.5%;
  bottom:2.5%;
  width:20%;
  height:74%;
  border-radius:28px;
  background-image:var(--theme-hero);
  background-size:760px auto;
  background-position:0% 84%;
  filter:saturate(1.08) drop-shadow(0 16px 20px rgba(54,15,7,.15));
  opacity:.96;
  pointer-events:none;
}
body.traditional .vocabulary-page::after{background-position:0% 84%}

/* Flashcards — scène centrale, comme la maquette, avec décor latéral visible. */
.flashcards-page{width:min(var(--page-max),100%)!important;background-position:center 61%!important}
.flashcard-page-heading{width:70%!important;min-height:86px!important}
.flashcards-page #studyToolbar{
  width:min(980px,78%)!important;
  margin:0 0 10px!important;
  padding:7px 9px!important;
  border:1px solid rgba(255,255,255,.80)!important;
  border-radius:14px!important;
  background:var(--page-paper)!important;
}
.flashcards-page #levels{flex:1!important}
.flashcards-page #levels button{min-height:34px!important}
.flashcards-page #progressWrap{width:min(780px,64%)!important;margin:4px 0 8px 5%!important}
.flashcards-page #study{width:min(760px,63%)!important;margin:0 0 0 5%!important}
.flashcards-page .scene,.flashcards-page .flashcard{min-height:390px!important}
.flashcards-page .flashcard{border:2px solid rgba(255,255,255,.82)!important;background:rgba(255,250,241,.96)!important}
body.traditional .flashcards-page .flashcard{background:rgba(247,252,255,.96)!important}
.flashcards-page .hanzi{font-size:clamp(76px,8vw,118px)!important}
.flashcards-page #actions{width:min(610px,52%)!important;margin:10px 0 0 10%!important}
.flashcards-page::after{
  content:"";
  position:absolute;
  right:1.5%;
  bottom:3%;
  width:28%;
  height:70%;
  border-radius:28px;
  background-image:var(--theme-hero);
  background-size:790px auto;
  background-position:0% 84%;
  filter:drop-shadow(0 18px 22px rgba(63,17,7,.18));
  pointer-events:none;
}
body.traditional .flashcards-page::after{background-position:0% 83%}

/* Grammaire — liste des notions à gauche, vraie leçon à droite, mascotte séparée. */
.grammar{background-position:center 60%!important}
.grammar-card{
  width:min(1180px,86%)!important;
  margin:0!important;
  min-height:calc(100vh - 80px)!important;
  padding:18px!important;
  background:var(--page-paper)!important;
  border:1px solid rgba(255,255,255,.82)!important;
  border-radius:21px!important;
  box-shadow:0 20px 48px rgba(71,20,8,.14)!important;
}
.grammar-card::before{display:none!important}
.grammar-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin-bottom:10px}
.grammar-heading h2{margin:0!important;font-size:28px!important;color:var(--theme-deep)!important}
.grammar-heading .section-intro{margin:3px 0 0!important;font-size:10px!important;color:var(--theme-muted)!important}
.grammar-count{font-size:9px!important;color:var(--theme-muted)!important;white-space:nowrap}
.grammar-toolbar.legacy-control{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
.grammar-layout{
  display:grid!important;
  grid-template-columns:280px minmax(0,1fr) 185px!important;
  gap:10px!important;
  align-items:stretch!important;
  min-height:520px!important;
}
.grammar-points{
  display:flex!important;
  flex-direction:column!important;
  gap:6px!important;
  max-height:calc(100vh - 245px)!important;
  overflow:auto!important;
  padding-right:4px!important;
}
.grammar-point{
  display:grid!important;
  grid-template-columns:42px 1fr!important;
  gap:5px!important;
  align-items:center!important;
  width:100%!important;
  min-height:42px!important;
  padding:7px 9px!important;
  border:1px solid var(--panel-border)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.67)!important;
  color:var(--theme-ink)!important;
  text-align:left!important;
  cursor:pointer!important;
}
.grammar-point>span{font-size:9px!important;font-weight:900!important;color:var(--theme-accent)!important}
.grammar-point>strong{font-size:10.5px!important;line-height:1.18!important}
.grammar-point.active{border-color:transparent!important;background:linear-gradient(135deg,var(--theme-accent),var(--theme-deep))!important;color:#fff!important;box-shadow:0 7px 16px color-mix(in srgb,var(--theme-accent) 20%,transparent)!important}
.grammar-point.active>span{color:#fff!important}
.grammar-lesson{
  position:relative;
  overflow:auto;
  max-height:calc(100vh - 245px);
  padding:18px 22px;
  border:1px solid var(--panel-border);
  border-radius:14px;
  background:rgba(255,255,255,.78);
}
.grammar-lesson-index{display:inline-flex;padding:4px 8px;border-radius:999px;background:var(--theme-soft);color:var(--theme-accent);font-size:9px;font-weight:900}
.grammar-lesson h3{margin:8px 0 12px;font-size:20px;color:var(--theme-deep)}
.grammar-lesson-body{font-size:12px;line-height:1.55;color:var(--theme-ink)}
.grammar-rule{display:grid;grid-template-columns:92px 1fr;gap:8px;margin:8px 0;padding:8px 10px;border-radius:10px;background:var(--theme-soft)}
.grammar-rule strong{color:var(--theme-deep)}
.grammar-rule span{color:var(--theme-ink)}
.grammar-example-zh{margin:10px 0 0!important;font:800 21px/1.35 "Noto Serif SC",serif;color:var(--theme-deep)}
.grammar-example-pinyin{margin:2px 0!important;font-size:11px;color:var(--theme-muted);font-style:italic}
.grammar-prose{margin:4px 0 9px!important}
.grammar-teacher{
  position:relative!important;
  top:auto!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  min-height:100%!important;
  padding:12px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.40),rgba(255,255,255,.88))!important;
  text-align:center!important;
}
.grammar-teacher img{display:none!important}
.grammar-teacher::before{
  content:"";
  display:block;
  width:100%;
  height:250px;
  margin:auto 0 8px;
  border-radius:14px;
  background-image:var(--theme-hero);
  background-size:720px auto;
  background-position:0% 84%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.68);
}
.grammar-teacher p{font-size:9px!important;line-height:1.4!important;color:var(--theme-muted)!important}
.grammar::after{
  content:"";
  position:absolute;
  right:1.5%;
  bottom:2%;
  width:12%;
  height:74%;
  border-radius:24px;
  background-image:var(--theme-hero);
  background-size:650px auto;
  background-position:100% 48%;
  opacity:.84;
  pointer-events:none;
}

/* Quiz — carte de question claire au centre, décor mascotte sur le côté. */
.quiz-page{background-position:center 64%!important}
.quiz-page .compact-hero{width:64%}
.quiz-panel{width:min(900px,72%)!important;margin:0!important;padding:14px!important}
.quiz-level-ribbon{margin-bottom:9px!important}
.quiz-setup{grid-template-columns:1fr auto!important;align-items:center!important;margin:0!important;padding:10px 12px!important;background:rgba(255,255,255,.62)!important;border-radius:11px!important}
.quiz-setup>div:first-child{display:none!important}
.quick-quiz-card{max-width:650px!important;margin:10px auto!important;padding:20px 24px!important;border:1px solid var(--panel-border)!important;background:rgba(255,255,255,.90)!important}
.quick-quiz-hanzi{font-size:clamp(66px,7vw,100px)!important}
.quick-quiz-answer{min-height:42px!important;font-size:12px!important}
.quiz-page::after{
  content:"";
  position:absolute;
  right:1.3%;
  bottom:2%;
  width:25%;
  height:72%;
  border-radius:28px;
  background-image:var(--theme-hero);
  background-size:790px auto;
  background-position:0% 84%;
  pointer-events:none;
  filter:drop-shadow(0 16px 20px rgba(55,15,7,.16));
}

/* Lecture — feuille éditoriale plutôt qu'un grand panneau blanc générique. */
.reader{background-position:center 62%!important}
.reader-card{
  width:min(980px,76%)!important;
  margin:0!important;
  min-height:calc(100vh - 80px)!important;
  padding:26px 30px!important;
  background:linear-gradient(95deg,rgba(255,252,246,.98),rgba(255,248,235,.90))!important;
  border:1px solid rgba(255,255,255,.84)!important;
}
body.traditional .reader-card{background:linear-gradient(95deg,rgba(250,253,255,.98),rgba(232,247,255,.92))!important}
.reader .long-text{border-radius:16px!important;background:rgba(255,255,255,.72)!important}
.reader::after{
  content:"";
  position:absolute;
  right:1.8%;bottom:2%;width:20%;height:74%;border-radius:26px;
  background-image:var(--theme-hero);background-size:740px auto;background-position:0% 84%;pointer-events:none
}

/* Challenges — plus proche d'une mission, avec blocs visuels. */
.challenge{
  background-image:
    linear-gradient(90deg,rgba(255,248,238,.38) 0%,rgba(255,248,238,.28) 42%,rgba(255,248,238,.10) 100%),
    var(--theme-challenge-scene)!important;
  background-position:center 56%!important;
  background-size:cover!important;
}
body.traditional .challenge{
  background-image:
    linear-gradient(90deg,rgba(241,249,255,.34) 0%,rgba(241,249,255,.24) 42%,rgba(241,249,255,.08) 100%),
    var(--theme-challenge-scene)!important;
}
.challenge-menu,.challenge-game{
  width:min(1040px,78%)!important;
  margin:0!important;
  padding:24px!important;
  border:1px solid rgba(255,255,255,.74)!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,rgba(255,252,248,.86),rgba(255,247,236,.76))!important;
  box-shadow:0 18px 46px rgba(66,18,7,.14)!important;
  backdrop-filter:blur(10px)!important;
}
body.traditional .challenge-menu,
body.traditional .challenge-game{
  background:linear-gradient(145deg,rgba(247,252,255,.84),rgba(236,248,255,.74))!important;
  box-shadow:0 18px 46px rgba(5,67,122,.12)!important;
}
.challenge-levels{gap:10px!important}
.challenge-level{border-radius:15px!important;background:rgba(255,255,255,.76)!important}
.challenge::after{content:"";position:absolute;right:1.3%;bottom:2%;width:20%;height:76%;border-radius:26px;background-image:var(--theme-hero);background-size:760px auto;background-position:0% 84%;pointer-events:none}

/* Récompenses — collection horizontale, grandes cartes comme dans la référence. */
.rewards-page{background-position:center 64%!important}
.rewards-page .compact-hero{width:68%}
.rewards-page>.content-panel{width:min(1120px,84%)!important;margin:0!important;padding:16px!important}
.collection-head{padding:10px 12px!important;border-radius:12px!important;background:rgba(255,255,255,.67)!important}
.rewards-page-grid{grid-template-columns:repeat(5,minmax(120px,1fr))!important;gap:10px!important;max-height:420px!important;overflow:auto!important;padding:4px!important}
.rewards-page-grid .reward-tile{min-height:150px!important;background:rgba(255,255,255,.78)!important}
.rewards-page-grid .reward-tile img{height:116px!important;object-fit:cover!important}
.rewards-page::after{content:"";position:absolute;right:1%;bottom:2%;width:13%;height:76%;border-radius:24px;background-image:var(--theme-hero);background-size:650px auto;background-position:100% 48%;opacity:.88;pointer-events:none}

/* Profil — dashboard compact sur le décor. */
.profile-page{background-position:center 61%!important}
.profile-page-hero{width:78%!important;margin-left:0!important}
.profile-metrics{width:78%!important;grid-template-columns:repeat(5,1fr)!important;gap:8px!important;margin:0 0 10px!important}
.profile-metric{min-height:82px!important;padding:12px!important;border-radius:13px!important;background:var(--page-paper)!important;border:1px solid rgba(255,255,255,.78)!important}
.profile-page>.content-panel{width:78%!important;margin:0!important;padding:16px!important}
.profile-level-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
.profile-page::after{content:"";position:absolute;right:1.5%;bottom:2%;width:19%;height:78%;border-radius:26px;background-image:var(--theme-hero);background-size:760px auto;background-position:0% 84%;pointer-events:none}

/* Statistiques — analytique, mais toujours dans l'univers illustré. */
.statistics-page{background-position:center 60%!important}
.statistics-page .compact-hero{width:68%}
.statistics-grid{width:84%!important;grid-template-columns:1.45fr .8fr!important}
.statistics-grid>.content-panel{min-height:410px!important;padding:18px!important}
.statistics-summary{grid-template-columns:repeat(2,1fr)!important}
.stat-summary-card{min-height:92px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;border:1px solid rgba(255,255,255,.70)!important}
.statistics-page::after{content:"";position:absolute;right:1.2%;bottom:2%;width:13%;height:74%;border-radius:24px;background-image:var(--theme-hero);background-size:660px auto;background-position:100% 48%;opacity:.84;pointer-events:none}

/* 1.5.75 — Profil réservé à l’identité et aux réglages, sans compteurs. */
.profile-home-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:16px;align-items:stretch}
.profile-identity-card,.profile-help-card{min-height:190px;padding:24px!important}
.profile-identity-card h3,.profile-help-card h3{margin:7px 0 9px;font:900 clamp(23px,2.6vw,34px)/1.1 Georgia,"Noto Serif SC",serif;color:var(--theme-deep)}
.profile-identity-card p,.profile-help-card p{max-width:620px;color:var(--theme-muted);line-height:1.65}
.profile-shortcuts{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.profile-shortcuts button{font:inherit;cursor:pointer}
.profile-card-simple{max-width:510px}
.profile-simple-message{margin:14px 0 18px;padding:13px 15px;border-radius:13px;background:var(--soft);color:var(--muted);font-size:12px;line-height:1.55}
@media(max-width:760px){.profile-home-grid{grid-template-columns:1fr}.profile-identity-card,.profile-help-card{padding:18px!important}.profile-shortcuts{display:grid}.profile-shortcuts button{width:100%}}

/* Paramètres — cartes plus compactes, pas de grand panneau uniforme. */
.settings-page{background-position:center 60%!important}
.settings-page .compact-hero{width:72%}
.settings-grid{width:82%!important;grid-template-columns:1fr 1fr!important;gap:12px!important}
.setting-card{min-height:160px!important}
.danger-setting{grid-column:1/-1!important;min-height:130px!important}

/* Les éléments globaux ne doivent pas donner l'impression d'un deuxième menu. */
.keyboard,body:not([data-current-view="cards"]) .keyboard{display:none!important}
footer{opacity:.64!important;font-size:9px!important}

@media(max-width:1180px){
  .vocabulary-panel,.flashcards-page #studyToolbar,.flashcards-page #study,.flashcards-page #progressWrap,.flashcards-page #actions,.quiz-panel,.reader-card,.challenge-menu,.challenge-game,.rewards-page>.content-panel,.profile-page-hero,.profile-metrics,.profile-page>.content-panel,.statistics-grid,.settings-grid,.grammar-card{width:100%!important}
  .vocabulary-page::after,.flashcards-page::after,.quiz-page::after,.reader::after,.challenge::after,.rewards-page::after,.profile-page::after,.statistics-page::after,.grammar::after{display:none!important}
  .vocabulary-page .compact-hero,.quiz-page .compact-hero,.rewards-page .compact-hero,.statistics-page .compact-hero,.settings-page .compact-hero,.flashcard-page-heading{width:100%!important}
  .grammar-layout{grid-template-columns:260px 1fr!important}.grammar-teacher{display:none!important}
  .flashcards-page #progressWrap,.flashcards-page #study,.flashcards-page #actions{margin-left:auto!important;margin-right:auto!important}
}
@media(max-width:820px){
  .page-view:not(.dashboard){padding:10px!important;border-radius:18px!important}
  .level-ribbon{grid-template-columns:repeat(3,1fr)!important}
  .grammar-layout{grid-template-columns:1fr!important}.grammar-points{max-height:250px!important}.grammar-lesson{max-height:none!important}
  .profile-metrics{grid-template-columns:repeat(2,1fr)!important}.profile-level-grid{grid-template-columns:1fr!important}.statistics-grid,.settings-grid{grid-template-columns:1fr!important}.rewards-page-grid{grid-template-columns:repeat(2,1fr)!important}
}

/* ========================================================================
   Lóngmò 1.2.3 — correction des écrans intérieurs + accueil plein écran
   - Accueil : image originale vive, sans voile, plein espace disponible.
   - Écrans intérieurs : NE réutilisent plus l'image d'accueil entière.
     Ils utilisent un décor scénique dédié + une mascotte transparente.
   - Une seule sidebar globale.
   ======================================================================== */

:root{
  --theme-scene:url('../assets/themes/hsk/scene.webp');
  --theme-mascot:url('../assets/themes/hsk/mascot.webp');
  --theme-mascot-alt:url('../assets/themes/hsk/mascot-alt.webp');
  --theme-challenge-scene:url('../assets/themes/hsk/pages/challenge.webp?v=1.6.30');
  --inner-bg:#f8eee2;
  --inner-card:rgba(255,249,239,.965);
  --inner-card-strong:rgba(255,252,246,.985);
}
body.traditional{
  --theme-scene:url('../assets/themes/tocfl/scene.webp');
  --theme-mascot:url('../assets/themes/tocfl/mascot.webp');
  --theme-mascot-alt:url('../assets/themes/tocfl/mascot-alt.webp');
  --theme-challenge-scene:url('../assets/themes/tocfl/pages/challenge.webp?v=1.6.30');
  --inner-bg:#eaf6ff;
  --inner-card:rgba(245,251,255,.965);
  --inner-card-strong:rgba(251,254,255,.99);
}

/* Le fond global ne doit plus être une copie délavée de l'accueil. */
body,
body.traditional{
  background:var(--inner-bg)!important;
  background-image:none!important;
}

/* Sur desktop, le contenu commence exactement après la sidebar. */
.shell{
  padding:0 0 0 var(--sidebar-w)!important;
  min-height:100vh!important;
}
footer{display:none!important}

/* ------------------------------------------------------------------------
   ACCUEIL — l'illustration d'origine est l'écran, pas un décor derrière une
   grande marge blanche. Aucun voile global sur l'image.
   ------------------------------------------------------------------------ */
.dashboard{
  width:100%!important;
  max-width:none!important;
  height:100vh!important;
  min-height:680px!important;
  aspect-ratio:auto!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background-image:var(--theme-hero)!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:48% center!important;
  box-shadow:none!important;
}
body.traditional .dashboard{background-position:51% center!important}
.dashboard::after{display:none!important;background:none!important}
.dashboard-hero{
  height:52%!important;
  min-height:0!important;
  padding:4.2vh 4.2vw!important;
}
.dashboard-copy{
  width:min(600px,47%)!important;
  margin-left:32%!important;
  text-shadow:0 1px 5px rgba(255,247,230,.38)!important;
}
body.traditional .dashboard-copy{text-shadow:0 1px 5px rgba(235,249,255,.4)!important}
.dashboard-copy blockquote{
  background:rgba(255,250,241,.82)!important;
  backdrop-filter:blur(5px)!important;
}
body.traditional .dashboard-copy blockquote{background:rgba(248,253,255,.84)!important}
.dashboard-profile,.dashboard-stats,.dashboard-progress{
  backdrop-filter:blur(7px)!important;
}
.dashboard-stats{
  right:2.2%!important;
  bottom:27%!important;
  width:min(860px,58%)!important;
}
.dashboard-progress{
  right:2.2%!important;
  bottom:4.6%!important;
  width:min(1010px,67%)!important;
}

/* ------------------------------------------------------------------------
   BASE DES PAGES INTÉRIEURES
   Décor scénique différent de l'accueil + panel fonctionnel. Le grand visuel
   d'accueil n'est plus répété verticalement ou recadré dans chaque page.
   ------------------------------------------------------------------------ */
.page-view:not(.dashboard){
  width:100%!important;
  max-width:none!important;
  min-height:100vh!important;
  margin:0!important;
  padding:24px 30px 42px!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  background-color:var(--inner-bg)!important;
  background-image:
    linear-gradient(90deg,rgba(255,249,241,.92) 0%,rgba(255,249,241,.78) 48%,rgba(255,249,241,.12) 100%),
    var(--theme-scene)!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  box-shadow:none!important;
}
body.traditional .page-view:not(.dashboard){
  background-image:
    linear-gradient(90deg,rgba(247,252,255,.94) 0%,rgba(247,252,255,.78) 48%,rgba(247,252,255,.10) 100%),
    var(--theme-scene)!important;
}
.page-view:not(.dashboard)::before{display:none!important}
.page-view:not(.dashboard)>*{position:relative;z-index:2}

/* Mascotte indépendante du décor d'accueil. */
.page-view:not(.dashboard)::after{
  content:"";
  position:absolute;
  z-index:1;
  right:18px;
  bottom:6px;
  width:290px;
  height:420px;
  border:0!important;
  border-radius:0!important;
  background-image:var(--theme-mascot)!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
  background-position:right bottom!important;
  opacity:1!important;
  filter:drop-shadow(0 20px 22px rgba(54,17,9,.17));
  pointer-events:none;
}
body.traditional .page-view:not(.dashboard)::after{filter:drop-shadow(0 20px 22px rgba(5,63,113,.16))}

.content-panel,
.grammar-card,
.reader-card,
.challenge-menu,
.challenge-game{
  background:var(--inner-card)!important;
  border:1px solid rgba(255,255,255,.88)!important;
  box-shadow:0 18px 42px rgba(65,20,9,.13)!important;
  backdrop-filter:blur(10px)!important;
}
body.traditional .content-panel,
body.traditional .grammar-card,
body.traditional .reader-card,
body.traditional .challenge-menu,
body.traditional .challenge-game{box-shadow:0 18px 42px rgba(5,62,110,.12)!important}

/* Les petits en-têtes de page n'utilisent plus la grande image d'accueil. */
.compact-hero,.flashcard-page-heading,.profile-page-hero{
  background:linear-gradient(90deg,var(--inner-card-strong),rgba(255,255,255,.74))!important;
  border:1px solid rgba(255,255,255,.9)!important;
  box-shadow:0 10px 28px rgba(62,19,8,.09)!important;
}
.hero-mascot{
  border:0!important;
  background-image:var(--theme-mascot-alt)!important;
  background-size:contain!important;
  background-position:center bottom!important;
  background-repeat:no-repeat!important;
  box-shadow:none!important;
  filter:drop-shadow(0 8px 13px rgba(54,17,8,.16))!important;
}
body.traditional .hero-mascot{background-image:var(--theme-mascot-alt)!important;background-size:contain!important;background-position:center bottom!important}

/* ------------------------------------------------------------------------
   VOCABULAIRE — proche de la maquette : panneau principal à gauche,
   niveaux en ruban, paysage + mascotte à droite.
   ------------------------------------------------------------------------ */
.vocabulary-page{
  background-position:center 58%!important;
}
.vocabulary-page .compact-hero,
.vocabulary-panel{
  width:min(1080px,calc(100% - 330px))!important;
  margin-left:0!important;
  margin-right:auto!important;
}
.vocabulary-page .compact-hero{
  min-height:96px!important;
  padding:17px 22px!important;
  margin-bottom:12px!important;
}
.vocabulary-page .compact-hero .hero-mascot{display:none!important}
.vocabulary-panel{
  padding:14px 16px 16px!important;
  border-radius:18px!important;
}
.level-ribbon{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:7px!important;
  margin-bottom:10px!important;
}
.level-ribbon button{
  min-height:34px!important;
  border-radius:9px!important;
  font-size:10.5px!important;
}
.vocabulary-controls{
  display:grid!important;
  grid-template-columns:minmax(260px,1fr) 190px!important;
  gap:9px!important;
  margin-bottom:7px!important;
}
#vocabLevel{display:none!important}
.search-field,.vocabulary-controls select{
  min-height:38px!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.85)!important;
}
.vocabulary-summary{padding:5px 2px 8px!important}
.vocabulary-table-wrap{
  max-height:calc(100vh - 275px)!important;
  overflow:auto!important;
  border:1px solid var(--panel-border)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.78)!important;
}
.vocabulary-table{font-size:11px!important}
.vocabulary-table th{position:sticky!important;top:0!important;z-index:2!important;background:var(--theme-soft)!important}
.vocabulary-page::after{
  right:10px!important;
  bottom:-8px!important;
  width:305px!important;
  height:430px!important;
}

/* ------------------------------------------------------------------------
   FLASHCARDS — scène centrale illustrée, dragon/ours autour de la carte.
   ------------------------------------------------------------------------ */
.flashcards-page{
  background-position:center 63%!important;
  padding-top:18px!important;
}
.flashcard-page-heading,
.flashcards-page #studyToolbar,
.flashcards-page #progressWrap,
.flashcards-page #study,
.flashcards-page #actions,
.flashcards-page #empty{
  width:min(900px,calc(100% - 330px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
  transform:translateX(-55px);
}
.flashcard-page-heading{
  min-height:86px!important;
  padding:14px 20px!important;
  border-radius:17px!important;
}
.flashcard-page-heading .hero-mascot{display:none!important}
.flashcards-page #studyToolbar{
  margin-top:9px!important;
  padding:9px 11px!important;
  border-radius:15px!important;
  background:rgba(255,249,239,.91)!important;
  border:1px solid rgba(255,255,255,.88)!important;
}
body.traditional .flashcards-page #studyToolbar{background:rgba(247,252,255,.93)!important}
.flashcards-page .segments{display:grid!important;grid-template-columns:repeat(7,1fr)!important;gap:5px!important}
.flashcards-page .segments button{min-height:32px!important;border-radius:9px!important;font-size:9.5px!important}
.flashcards-page #progressWrap{margin-top:8px!important}
.flashcards-page #study{
  min-height:430px!important;
  margin-top:8px!important;
  padding:16px 18px!important;
  border-radius:22px!important;
  background:rgba(255,250,242,.72)!important;
  border:1px solid rgba(255,255,255,.78)!important;
  box-shadow:0 16px 38px rgba(70,20,8,.10)!important;
}
body.traditional .flashcards-page #study{background:rgba(246,252,255,.75)!important}
.flashcards-page .scene{max-width:560px!important}
.flashcards-page .flashcard{min-height:360px!important;border-radius:24px!important;box-shadow:0 16px 38px rgba(74,21,9,.14)!important}
.flashcards-page #actions{margin-top:10px!important}
.flashcards-page::after{
  left:12px!important;
  right:auto!important;
  bottom:-20px!important;
  width:315px!important;
  height:440px!important;
  background-image:var(--theme-mascot)!important;
  background-position:left bottom!important;
}
body.traditional .flashcards-page::after{left:auto!important;right:8px!important;background-position:right bottom!important}

/* ------------------------------------------------------------------------
   GRAMMAIRE — liste à gauche, fiche au centre, mascotte à droite.
   ------------------------------------------------------------------------ */
.grammar{
  background-position:center 58%!important;
  padding-top:20px!important;
}
.grammar-card{
  width:min(1160px,calc(100% - 330px))!important;
  min-height:calc(100vh - 40px)!important;
  margin:0!important;
  padding:22px!important;
  border-radius:22px!important;
}
.grammar-card::before{display:none!important}
.grammar-layout{
  grid-template-columns:300px minmax(0,1fr)!important;
  gap:12px!important;
  min-height:540px!important;
}
.grammar-teacher{display:none!important}
.grammar-points,.grammar-lesson{max-height:calc(100vh - 220px)!important}
.grammar-point{min-height:43px!important}
.grammar-lesson{background:rgba(255,255,255,.81)!important}
.grammar::after{
  right:12px!important;
  bottom:-8px!important;
  width:305px!important;
  height:440px!important;
  background-image:var(--theme-mascot)!important;
  background-position:right bottom!important;
}

/* ------------------------------------------------------------------------
   QUIZ — grande carte isolée comme la maquette, décor vivant autour.
   ------------------------------------------------------------------------ */
.quiz-page{
  background-position:center 62%!important;
}
.quiz-page .compact-hero,
.quiz-panel{
  width:min(700px,calc(100% - 360px))!important;
  margin-left:8%!important;
  margin-right:auto!important;
}
.quiz-page .compact-hero{min-height:88px!important;padding:14px 18px!important;margin-bottom:10px!important}
.quiz-page .compact-hero .hero-mascot{display:none!important}
.quiz-panel{padding:14px!important;border-radius:19px!important}
.quiz-level-ribbon{margin-bottom:8px!important}
.quick-quiz-card{
  max-width:560px!important;
  padding:20px 24px 22px!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.92)!important;
}
.quick-quiz-hanzi{font-size:clamp(72px,8vw,108px)!important}
.quick-quiz-answer{min-height:45px!important}
.quiz-page::after{
  right:18px!important;
  bottom:-12px!important;
  width:340px!important;
  height:470px!important;
  background-image:var(--theme-mascot-alt)!important;
}

/* ------------------------------------------------------------------------
   LECTURE — grand carnet lisible + mascotte, plus aucune répétition verticale
   de l'image d'accueil.
   ------------------------------------------------------------------------ */
.reader{
  background-position:center 60%!important;
  padding-top:24px!important;
}
.reader-card{
  width:min(1120px,calc(100% - 330px))!important;
  min-height:calc(100vh - 48px)!important;
  margin:0!important;
  padding:28px 32px!important;
  border-radius:24px!important;
  background:linear-gradient(105deg,var(--inner-card-strong),var(--inner-card))!important;
}
.reader .long-text{
  padding:28px!important;
  border-radius:17px!important;
  background:rgba(255,255,255,.82)!important;
}
.reader::after{
  right:10px!important;
  bottom:-10px!important;
  width:305px!important;
  height:450px!important;
  background-image:var(--theme-mascot-alt)!important;
}

/* ------------------------------------------------------------------------
   CHALLENGES / RÉCOMPENSES / PROFIL / STATS / PARAMÈTRES
   Même univers, compositions propres et pas de copie de l'accueil.
   ------------------------------------------------------------------------ */
.challenge-menu,.challenge-game,
.rewards-page>.content-panel,
.profile-page-hero,.profile-metrics,.profile-page>.content-panel,
.statistics-grid,.settings-grid{
  width:min(1160px,calc(100% - 330px))!important;
  margin-left:0!important;
  margin-right:auto!important;
}
.challenge::after,.rewards-page::after,.profile-page::after,.statistics-page::after,.settings-page::after{
  right:10px!important;
  bottom:-10px!important;
  width:305px!important;
  height:450px!important;
  background-image:var(--theme-mascot)!important;
  background-position:right bottom!important;
}
.rewards-page .compact-hero,.statistics-page .compact-hero,.settings-page .compact-hero{
  width:min(1160px,calc(100% - 330px))!important;
  margin-left:0!important;
}
.rewards-page-grid{grid-template-columns:repeat(5,minmax(120px,1fr))!important}
.profile-page-hero{background:linear-gradient(90deg,var(--inner-card-strong),rgba(255,255,255,.74))!important}

/* Audio / professeur : ne pas masquer la maquette principale. */
.teacher-buddy{width:78px!important;right:16px!important;bottom:12px!important;z-index:820!important}
.music-controls{z-index:880!important}

/* Adaptation desktop étroit : on retire seulement la mascotte latérale,
   jamais le contenu fonctionnel. */
@media(max-width:1180px){
  .shell{padding-left:var(--sidebar-w)!important}
  .dashboard-copy{width:58%!important;margin-left:24%!important}
  .dashboard-stats{width:68%!important}
  .dashboard-progress{width:75%!important}
  .page-view:not(.dashboard){padding:18px!important}
  .page-view:not(.dashboard)::after{display:none!important}
  .vocabulary-page .compact-hero,.vocabulary-panel,
  .flashcard-page-heading,.flashcards-page #studyToolbar,.flashcards-page #progressWrap,.flashcards-page #study,.flashcards-page #actions,.flashcards-page #empty,
  .grammar-card,.quiz-page .compact-hero,.quiz-panel,.reader-card,
  .challenge-menu,.challenge-game,.rewards-page .compact-hero,.rewards-page>.content-panel,
  .profile-page-hero,.profile-metrics,.profile-page>.content-panel,.statistics-page .compact-hero,.statistics-grid,.settings-page .compact-hero,.settings-grid{
    width:100%!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    transform:none!important;
  }
  .grammar-layout{grid-template-columns:270px minmax(0,1fr)!important}
}

@media(max-width:780px){
  .shell{padding:0 0 88px!important}
  .dashboard{min-height:100vh!important;height:auto!important;background-size:cover!important}
  .dashboard-hero{height:auto!important;min-height:390px!important}
  .dashboard-copy{width:100%!important;margin:0!important}
  .dashboard-stats,.dashboard-progress{position:relative!important;right:auto!important;bottom:auto!important;width:calc(100% - 20px)!important;margin:10px!important}
  .page-view:not(.dashboard){padding:10px!important;min-height:calc(100vh - 76px)!important}
  .flashcards-page .segments{grid-template-columns:repeat(4,1fr)!important}
  .grammar-layout{grid-template-columns:1fr!important}
  .vocabulary-controls{grid-template-columns:1fr!important}
}

/* =========================================================
   1.2.4 — FONDS PLUS VIFS + BIBLIOTHÈQUE DE MASCOTTES
   - Le voile blanc des pages intérieures est réduit de 50 %.
   - Les anciens crops de la grande image d'accueil ne servent plus de mascottes.
   - Chaque page intérieure reçoit 3 stickers transparents, adaptés à HSK/TOCFL.
   ========================================================= */
.page-view:not(.dashboard){
  position:relative!important;
  isolation:isolate!important;
  background-image:
    linear-gradient(90deg,rgba(255,249,241,.46) 0%,rgba(255,249,241,.39) 48%,rgba(255,249,241,.06) 100%),
    var(--theme-scene)!important;
}
body.traditional .page-view:not(.dashboard){
  background-image:
    linear-gradient(90deg,rgba(247,252,255,.47) 0%,rgba(247,252,255,.39) 48%,rgba(247,252,255,.05) 100%),
    var(--theme-scene)!important;
}

/* Neutralise les anciennes mascottes obtenues par recadrage du fond d'accueil. */
.page-view:not(.dashboard)::after,
.vocabulary-page::after,
.flashcards-page::after,
.grammar::after,
.quiz-page::after,
.reader::after,
.challenge::after,
.rewards-page::after,
.profile-page::after,
.statistics-page::after,
.settings-page::after{
  display:none!important;
  content:none!important;
}

.mascot-sprinkles{
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  pointer-events:none!important;
  overflow:hidden!important;
}
.mascot-sticker{
  position:absolute!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:none!important;
  object-fit:contain!important;
  user-select:none!important;
  opacity:.98!important;
  filter:drop-shadow(0 14px 18px rgba(54,17,8,.18))!important;
  transform-origin:center bottom!important;
}
body.traditional .mascot-sticker{filter:drop-shadow(0 14px 18px rgba(5,63,113,.18))!important}
.mascot-sticker-1{
  right:24px!important;
  bottom:16px!important;
  width:205px!important;
  max-height:285px!important;
  transform:rotate(-2deg)!important;
}
.mascot-sticker-2{
  right:188px!important;
  top:76px!important;
  width:118px!important;
  max-height:160px!important;
  transform:rotate(4deg)!important;
}
.mascot-sticker-3{
  right:54px!important;
  top:300px!important;
  width:132px!important;
  max-height:180px!important;
  transform:rotate(2deg)!important;
}

/* Variations discrètes de composition pour que les modules n'aient pas tous
   exactement le même placement, tout en gardant la zone fonctionnelle libre. */
.flashcards-page .mascot-sticker-1{right:18px!important;width:220px!important}
.flashcards-page .mascot-sticker-2{right:228px!important;top:110px!important;width:105px!important}
.flashcards-page .mascot-sticker-3{right:72px!important;top:350px!important;width:118px!important}
.grammar .mascot-sticker-1{right:20px!important;width:210px!important}
.grammar .mascot-sticker-2{right:205px!important;top:58px!important;width:112px!important}
.quiz-page .mascot-sticker-1{right:26px!important;width:230px!important}
.quiz-page .mascot-sticker-2{right:238px!important;top:90px!important;width:104px!important}
.reader .mascot-sticker-1{right:22px!important;width:215px!important}
.rewards-page .mascot-sticker-1{width:195px!important}
.profile-page .mascot-sticker-1,.statistics-page .mascot-sticker-1,.settings-page .mascot-sticker-1{width:190px!important}

@media(max-width:1180px){
  .mascot-sprinkles{display:none!important}
}

/* =========================================================
   1.2.5 — MASCOTTES PROPRES + ZONE DE TRAVAIL ÉLARGIE
   - Les mascottes sont réellement détourées et réparties à gauche/droite.
   - La zone de travail vise ~75 % de la page sur desktop.
   - Flashcards conserve volontairement sa largeur validée en 1.2.4.
   - Côté TOCFL, la mascotte de droite reste au bord bas/droit pour ne pas masquer Taipei 101.
   ========================================================= */

@media (min-width:1181px){
  /* Zone fonctionnelle : environ trois quarts de la largeur, centrée visuellement
     avec une marge suffisante pour les mascottes sans gêner le travail. */
  .vocabulary-page .compact-hero,
  .vocabulary-panel,
  .grammar-card,
  .quiz-page .compact-hero,
  .quiz-panel,
  .reader-card,
  .challenge-menu,
  .challenge-game,
  .rewards-page .compact-hero,
  .rewards-page>.content-panel,
  .profile-page-hero,
  .profile-metrics,
  .profile-page>.content-panel,
  .statistics-page .compact-hero,
  .statistics-grid,
  .settings-page .compact-hero,
  .settings-grid{
    width:76%!important;
    max-width:none!important;
    margin-left:8%!important;
    margin-right:auto!important;
  }

  /* Flashcards : largeur et composition déjà validées, on ne les élargit pas. */
  .flashcards-page .flashcard-page-heading,
  .flashcards-page #studyToolbar,
  .flashcards-page #progressWrap,
  .flashcards-page #study,
  .flashcards-page #actions{
    /* volontairement sans override de largeur */
  }

  /* Répartition des mascottes : une grande à gauche, une à droite,
     une petite en haut à gauche. Elles restent en dehors du panneau principal. */
  .mascot-sticker-1{
    left:.7%!important;
    right:auto!important;
    bottom:2.5%!important;
    top:auto!important;
    width:118px!important;
    max-height:175px!important;
    transform:rotate(-3deg)!important;
  }
  .mascot-sticker-2{
    left:auto!important;
    right:.7%!important;
    bottom:2.5%!important;
    top:auto!important;
    width:118px!important;
    max-height:175px!important;
    transform:rotate(3deg)!important;
  }
  .mascot-sticker-3{
    left:1.6%!important;
    right:auto!important;
    top:13%!important;
    bottom:auto!important;
    width:82px!important;
    max-height:120px!important;
    transform:rotate(4deg)!important;
    opacity:.94!important;
  }

  /* Taïwan : Taipei 101 est dans la partie droite du décor.
     Les stickers restent soit à gauche, soit tout en bas à droite, plus petits. */
  body.traditional .mascot-sticker-2{
    right:.45%!important;
    bottom:1.2%!important;
    width:96px!important;
    max-height:140px!important;
  }

  /* Annule toutes les anciennes exceptions de placement à droite datant de 1.2.4. */
  .flashcards-page .mascot-sticker-1,
  .grammar .mascot-sticker-1,
  .quiz-page .mascot-sticker-1,
  .reader .mascot-sticker-1,
  .rewards-page .mascot-sticker-1,
  .profile-page .mascot-sticker-1,
  .statistics-page .mascot-sticker-1,
  .settings-page .mascot-sticker-1{
    left:.7%!important;right:auto!important;bottom:2.5%!important;top:auto!important;width:118px!important;
  }
  .flashcards-page .mascot-sticker-2,
  .grammar .mascot-sticker-2,
  .quiz-page .mascot-sticker-2,
  .reader .mascot-sticker-2,
  .rewards-page .mascot-sticker-2,
  .profile-page .mascot-sticker-2,
  .statistics-page .mascot-sticker-2,
  .settings-page .mascot-sticker-2{
    left:auto!important;right:.7%!important;bottom:2.5%!important;top:auto!important;width:118px!important;
  }
  body.traditional .flashcards-page .mascot-sticker-2,
  body.traditional .grammar .mascot-sticker-2,
  body.traditional .quiz-page .mascot-sticker-2,
  body.traditional .reader .mascot-sticker-2,
  body.traditional .rewards-page .mascot-sticker-2,
  body.traditional .profile-page .mascot-sticker-2,
  body.traditional .statistics-page .mascot-sticker-2,
  body.traditional .settings-page .mascot-sticker-2{
    right:.45%!important;bottom:1.2%!important;width:96px!important;
  }
  .flashcards-page .mascot-sticker-3,
  .grammar .mascot-sticker-3,
  .quiz-page .mascot-sticker-3,
  .reader .mascot-sticker-3,
  .rewards-page .mascot-sticker-3,
  .profile-page .mascot-sticker-3,
  .statistics-page .mascot-sticker-3,
  .settings-page .mascot-sticker-3{
    left:1.6%!important;right:auto!important;top:13%!important;bottom:auto!important;width:82px!important;
  }
}

/* 1.2.8 — reward scenes rebuilt from the teddy collection */
.reward-tile.milestone-reward-tile img{object-fit:cover!important;object-position:center!important}
#celebrationImage{width:min(216px,82%)!important;height:auto!important;max-height:none!important;image-rendering:auto}

/* 1.2.9 — référence TOCFL officielle et sécurité des flashcards */
.status-pill.official{background:rgba(18,112,190,.12);color:#075f9e;border:1px solid rgba(18,112,190,.24)}
body.traditional .status-pill.official{background:rgba(0,131,203,.14);color:#075f9e}
#known:disabled,#review:disabled{opacity:.72;cursor:wait;transform:none!important}

/* ========================================================================
   Lóngmò 1.2.11 — FONDS DE MODULES DISTINCTS HSK / TOCFL
   Vocabulaire, Flashcards, Grammaire, Quiz et Lecture longue disposent
   désormais chacun de leur propre illustration. Les personnages étant déjà
   intégrés aux scènes, les stickers décoratifs additionnels sont masqués sur
   ces cinq vues pour éviter les doublons visuels.
   ======================================================================== */

.vocabulary-page{--module-scene:url('../assets/themes/hsk/pages/vocabulary.webp')}
.flashcards-page{--module-scene:url('../assets/themes/hsk/pages/flashcards.webp')}
.grammar{--module-scene:url('../assets/themes/hsk/pages/grammar.webp')}
.quiz-page{--module-scene:url('../assets/themes/hsk/pages/quiz.webp')}
.reader{--module-scene:url('../assets/themes/hsk/pages/reader.webp')}

body.traditional .vocabulary-page{--module-scene:url('../assets/themes/tocfl/pages/vocabulary.webp')}
body.traditional .flashcards-page{--module-scene:url('../assets/themes/tocfl/pages/flashcards.webp')}
body.traditional .grammar{--module-scene:url('../assets/themes/tocfl/pages/grammar.webp')}
body.traditional .quiz-page{--module-scene:url('../assets/themes/tocfl/pages/quiz.webp')}
body.traditional .reader{--module-scene:url('../assets/themes/tocfl/pages/reader.webp')}

.vocabulary-page,
.flashcards-page,
.grammar,
.quiz-page,
.reader{
  background-image:
    linear-gradient(90deg,rgba(255,249,241,.46) 0%,rgba(255,249,241,.39) 48%,rgba(255,249,241,.06) 100%),
    var(--module-scene)!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
body.traditional .vocabulary-page,
body.traditional .flashcards-page,
body.traditional .grammar,
body.traditional .quiz-page,
body.traditional .reader{
  background-image:
    linear-gradient(90deg,rgba(247,252,255,.47) 0%,rgba(247,252,255,.39) 48%,rgba(247,252,255,.05) 100%),
    var(--module-scene)!important;
}

.vocabulary-page .mascot-sprinkles,
.flashcards-page .mascot-sprinkles,
.grammar .mascot-sprinkles,
.quiz-page .mascot-sprinkles,
.reader .mascot-sprinkles{
  display:none!important;
}


/* ========================================================================
   Lóngmò 1.2.11 — correctif robuste des fonds de modules
   - Chaque module utilise un vrai calque <img> dédié, donc aucun conflit avec
     l'ancien --theme-scene ni avec la cascade CSS.
   - L'image garde strictement son ratio : largeur 100 %, hauteur automatique.
   - Aucun background-size: cover sur ces cinq écrans : plus de crop latéral.
   ======================================================================== */
.page-view.module-background-page{
  position:relative!important;
  isolation:isolate!important;
  background-image:none!important;
  background-color:var(--inner-bg)!important;
}
.page-view.module-background-page > .module-background-layer{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  background:var(--inner-bg)!important;
}
.page-view.module-background-page > .module-background-layer img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  object-fit:initial!important;
  object-position:initial!important;
  margin:0!important;
}
.page-view.module-background-page > .module-background-layer::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(255,249,241,.23) 0%,rgba(255,249,241,.16) 48%,rgba(255,249,241,.035) 100%);
}
body.traditional .page-view.module-background-page > .module-background-layer::after{
  background:linear-gradient(90deg,rgba(247,252,255,.235) 0%,rgba(247,252,255,.16) 48%,rgba(247,252,255,.03) 100%);
}
.page-view.module-background-page > :not(.module-background-layer){
  position:relative;
  z-index:1;
}
/* Ces cinq fonds contiennent déjà les personnages : pas de stickers dupliqués. */
.page-view.module-background-page > .mascot-sprinkles{display:none!important}

@media(max-width:900px){
  .page-view.module-background-page > .module-background-layer img{width:auto!important;height:100vh!important;min-width:100%!important;object-fit:cover!important;object-position:center top!important}
}

/* ========================================================================
   Lóngmò 1.2.13 — fond de module global, stable et non intrusif
   ------------------------------------------------------------------------
   Le fond est un calque global fixe, indépendant des pages et de leurs
   animations. Les interactions HSK/TOCFL restent donc celles de la 1.2.11.
   ======================================================================== */
.module-backdrop{
  position:fixed;
  inset:0 0 0 var(--sidebar-w);
  z-index:0;
  display:none;
  overflow:hidden;
  pointer-events:none;
  background:#eadbc9;
}
body.traditional .module-backdrop{background:#dceef8}
body.module-background-active .module-backdrop{display:block}
.module-backdrop::before{
  content:"";
  position:absolute;
  inset:-32px;
  background-image:var(--module-background-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:blur(24px) saturate(.95) brightness(.96);
  transform:scale(1.075);
  opacity:.52;
}
.module-backdrop::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(255,249,241,.08),rgba(255,249,241,.015) 46%,rgba(255,249,241,.035));
}
body.traditional .module-backdrop::after{
  background:linear-gradient(90deg,rgba(246,252,255,.08),rgba(246,252,255,.012) 46%,rgba(246,252,255,.03));
}
.module-backdrop>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  filter:saturate(1.02) contrast(1.01);
}

/* Le shell et ses composants restent au-dessus du décor global. */
.shell{position:relative!important;z-index:1!important}
.app-sidebar,.streak-chip,.music-controls,.teacher-buddy{z-index:870!important}

/* Les cinq modules ne réutilisent plus l'ancien fond générique. */
.page-view.module-background-page{
  position:relative!important;
  background:transparent!important;
  background-image:none!important;
  min-height:calc(100vh - 34px)!important;
  isolation:auto!important;
}
.page-view.module-background-page::before,
.page-view.module-background-page::after{display:none!important}
.page-view.module-background-page>.module-background-layer{display:none!important}
.page-view.module-background-page>.mascot-sprinkles{display:none!important}

/* Panneaux intégrés au décor. Les zones de travail restent lisibles sans
   transformer l'écran en grande feuille blanche. */
.page-view.module-background-page .compact-hero,
.page-view.module-background-page .flashcard-page-heading,
.page-view.module-background-page .vocabulary-panel,
.page-view.module-background-page .grammar-card,
.page-view.module-background-page .quiz-panel,
.page-view.module-background-page .reader-card,
.page-view.module-background-page #studyToolbar{
  border:1px solid rgba(255,255,255,.78)!important;
  background:rgba(255,250,242,.80)!important;
  box-shadow:0 15px 44px rgba(68,20,8,.12)!important;
  backdrop-filter:blur(10px) saturate(1.06)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.06)!important;
}
body.traditional .page-view.module-background-page .compact-hero,
body.traditional .page-view.module-background-page .flashcard-page-heading,
body.traditional .page-view.module-background-page .vocabulary-panel,
body.traditional .page-view.module-background-page .grammar-card,
body.traditional .page-view.module-background-page .quiz-panel,
body.traditional .page-view.module-background-page .reader-card,
body.traditional .page-view.module-background-page #studyToolbar{
  background:rgba(246,252,255,.81)!important;
  box-shadow:0 15px 44px rgba(4,62,111,.12)!important;
}

/* Flashcards : conserver le fonctionnement historique, alléger uniquement
   l'encadrement extérieur et centrer la vraie carte. */
.flashcards-page.module-background-page{
  width:min(1240px,100%)!important;
  padding-top:10px!important;
}
.flashcards-page.module-background-page .flashcard-page-heading,
.flashcards-page.module-background-page #studyToolbar{
  width:min(1040px,86%)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.flashcards-page.module-background-page #progressWrap{
  width:min(900px,74%)!important;
  margin:10px auto 12px!important;
}
.flashcards-page.module-background-page #study{
  width:min(900px,74%)!important;
  margin:0 auto!important;
  padding:14px 18px!important;
  border:1px solid rgba(255,255,255,.58)!important;
  border-radius:24px!important;
  background:rgba(255,250,242,.38)!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;
}
body.traditional .flashcards-page.module-background-page #study{background:rgba(242,250,255,.39)!important}
.flashcards-page.module-background-page .scene{width:100%!important;max-width:610px!important;margin:auto!important}
.flashcards-page.module-background-page .flashcard{
  min-height:365px!important;
  background:rgba(255,252,247,.95)!important;
  box-shadow:0 18px 44px rgba(59,20,9,.15)!important;
}
body.traditional .flashcards-page.module-background-page .flashcard{
  background:rgba(249,253,255,.96)!important;
  box-shadow:0 18px 44px rgba(4,62,110,.15)!important;
}
.flashcards-page.module-background-page #actions{width:min(650px,58%)!important;margin:10px auto 0!important}

/* Les autres modules occupent environ 70–78 % de la zone utile. */
.vocabulary-page.module-background-page .compact-hero,
.vocabulary-page.module-background-page .vocabulary-panel{width:min(1180px,78%)!important;margin-left:auto!important;margin-right:auto!important}
.grammar.module-background-page .grammar-card{width:min(1200px,78%)!important;margin-left:auto!important;margin-right:auto!important}
.quiz-page.module-background-page .compact-hero,
.quiz-page.module-background-page .quiz-panel{width:min(900px,66%)!important;margin-left:auto!important;margin-right:auto!important}
.reader.module-background-page .reader-card{width:min(1160px,76%)!important;margin-left:auto!important;margin-right:auto!important}

/* Grand écran : les illustrations restent proportionnelles avec cover (aucun
   étirement). Les panneaux ne grossissent pas jusqu'à avaler le décor. */
@media (min-width:1900px){
  .flashcards-page.module-background-page .flashcard-page-heading,
  .flashcards-page.module-background-page #studyToolbar{width:min(1180px,68%)!important}
  .flashcards-page.module-background-page #progressWrap,
  .flashcards-page.module-background-page #study{width:min(1020px,60%)!important}
  .flashcards-page.module-background-page #actions{width:min(720px,45%)!important}
  .flashcards-page.module-background-page .scene{max-width:680px!important}
  .vocabulary-page.module-background-page .compact-hero,
  .vocabulary-page.module-background-page .vocabulary-panel{width:min(1450px,72%)!important}
  .grammar.module-background-page .grammar-card{width:min(1450px,72%)!important}
  .quiz-page.module-background-page .compact-hero,
  .quiz-page.module-background-page .quiz-panel{width:min(980px,52%)!important}
  .reader.module-background-page .reader-card{width:min(1400px,70%)!important}
}

/* Écran très large / navigateur étendu sur deux écrans : on affiche l'image
   entière et le même visuel flouté remplit les bandes latérales. */
@media (min-aspect-ratio:21/9) and (min-width:1700px){
  .module-backdrop>img{object-fit:contain!important;object-position:center center!important}
  .flashcards-page.module-background-page .flashcard-page-heading,
  .flashcards-page.module-background-page #studyToolbar{width:min(1250px,52%)!important}
  .flashcards-page.module-background-page #progressWrap,
  .flashcards-page.module-background-page #study{width:min(1080px,46%)!important}
  .flashcards-page.module-background-page #actions{width:min(760px,34%)!important}
}

@media (max-width:1180px){
  .vocabulary-page.module-background-page .compact-hero,
  .vocabulary-page.module-background-page .vocabulary-panel,
  .grammar.module-background-page .grammar-card,
  .reader.module-background-page .reader-card{width:92%!important}
  .quiz-page.module-background-page .compact-hero,
  .quiz-page.module-background-page .quiz-panel{width:84%!important}
  .flashcards-page.module-background-page .flashcard-page-heading,
  .flashcards-page.module-background-page #studyToolbar{width:90%!important}
  .flashcards-page.module-background-page #progressWrap,
  .flashcards-page.module-background-page #study{width:86%!important}
  .flashcards-page.module-background-page #actions{width:72%!important}
}
@media (max-width:780px){
  .module-backdrop{inset:0!important}
  .module-backdrop>img{object-fit:cover!important}
  .page-view.module-background-page{padding:10px!important}
  .vocabulary-page.module-background-page .compact-hero,
  .vocabulary-page.module-background-page .vocabulary-panel,
  .grammar.module-background-page .grammar-card,
  .reader.module-background-page .reader-card,
  .quiz-page.module-background-page .compact-hero,
  .quiz-page.module-background-page .quiz-panel,
  .flashcards-page.module-background-page .flashcard-page-heading,
  .flashcards-page.module-background-page #studyToolbar,
  .flashcards-page.module-background-page #progressWrap,
  .flashcards-page.module-background-page #study,
  .flashcards-page.module-background-page #actions{width:100%!important}
}

/* ========================================================================
   Lóngmò 1.2.16 — correctif sûr : fonds uniques + accueil réellement adaptatif
   ------------------------------------------------------------------------
   1) Les pages pédagogiques n'exposent jamais le fond générique de l'accueil.
   2) Le décor actif est une seule image fixe, sans répétition verticale.
   3) Les écrans "ordinateur" (y compris avec mise à l'échelle Windows) gardent
      le ratio complet des accueils HSK / TOCFL au lieu de passer trop tôt en
      mode cover/mobile.
   ======================================================================== */

/* Quand un module possède son illustration, le body ne doit surtout pas
   laisser réapparaître le home.webp derrière le calque global. */
body.module-background-active,
body.traditional.module-background-active{
  background-image:none!important;
  background-repeat:no-repeat!important;
}
body.module-background-active{background-color:#eadbc9!important}
body.traditional.module-background-active{background-color:#dceef8!important}

/* Un seul décor de module, toujours plein écran, jamais tuilé. */
.module-backdrop{
  inset:0 0 0 var(--sidebar-w)!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
}
.module-backdrop::before{
  z-index:0!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
}
.module-backdrop>img{
  z-index:1!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  background:transparent!important;
}
.module-backdrop::after{z-index:2!important;pointer-events:none!important}

/* Sur un très grand écran très large, on préfère montrer l'image entière et
   laisser le prolongement flouté remplir uniquement les bandes latérales. */
@media (min-width:2100px) and (min-aspect-ratio:2/1){
  .module-backdrop>img{
    object-fit:contain!important;
    object-position:center center!important;
  }
  .module-backdrop::before{
    opacity:.68!important;
    filter:blur(30px) saturate(1.02) brightness(.96)!important;
  }
}

/* Les pages elles-mêmes restent transparentes : aucun ancien scene/home ne
   peut réapparaître ou se répéter au scroll. */
.page-view.module-background-page,
body.traditional .page-view.module-background-page{
  background:none!important;
  background-image:none!important;
  background-color:transparent!important;
}

/* ------------------------------------------------------------------------
   ACCUEIL HSK / TOCFL
   Les anciens @media <=900 passaient en min-height:720 + cover, ce qui coupait
   l'illustration sur des laptops avec scaling Windows. Tant que la sidebar
   desktop existe (>780px), on conserve strictement le ratio 1779/884.
   ------------------------------------------------------------------------ */
@media (min-width:781px) and (max-width:1180px){
  .dashboard{
    width:min(1779px,100%)!important;
    aspect-ratio:1779/884!important;
    min-height:0!important;
    height:auto!important;
    background-size:100% 100%!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
    overflow:hidden!important;
  }
  .dashboard-hero{
    height:52%!important;
    min-height:0!important;
    padding:4.0% 3.7%!important;
  }
  .dashboard-copy{
    width:56%!important;
    max-width:none!important;
    margin-left:27%!important;
  }
  .dashboard-copy h2{font-size:clamp(31px,4.8vw,58px)!important}
  .dashboard-copy>p{font-size:clamp(10px,1.2vw,14px)!important}
  .dashboard-copy blockquote{
    margin-top:10px!important;
    padding:8px 12px!important;
    font-size:clamp(12px,1.6vw,16px)!important;
  }
  .dashboard-profile{
    top:2%!important;
    right:2%!important;
    transform:scale(.90)!important;
    transform-origin:top right!important;
  }
  .dashboard-stats{
    position:absolute!important;
    right:2.2%!important;
    bottom:27.8%!important;
    width:67%!important;
    margin:0!important;
  }
  .dashboard-progress{
    position:absolute!important;
    right:2.2%!important;
    bottom:5%!important;
    width:75%!important;
    margin:0!important;
  }
  .dashboard-levels{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  .dashboard-level{padding:8px!important}
  .dashboard-level strong{font-size:9px!important}
  .dashboard-level small{font-size:7px!important}
}

/* Écran desktop standard : le home conserve aussi son ratio et ne subit
   aucun crop. */
@media (min-width:1181px){
  .dashboard{
    background-size:100% 100%!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
  }
}

/* Seulement sur vrai petit écran/mobile, la composition peut devenir verticale. */
@media (max-width:780px){
  .dashboard{
    aspect-ratio:auto!important;
    min-height:720px!important;
    background-size:cover!important;
    background-position:center!important;
  }
}

/* ========================================================================
   Lóngmò 1.2.16 — Flashcards : contour extérieur totalement transparent
   ------------------------------------------------------------------------
   Changement volontairement minimal : seul l'encadrement autour de la vraie
   carte Flashcard disparaît. La carte, les boutons, les onglets, les fonds,
   les dimensions, la navigation et toute la logique restent inchangés.
   ======================================================================== */
.flashcards-page.module-background-page #study,
body.traditional .flashcards-page.module-background-page #study{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* ========================================================================
   Lóngmò 1.2.16 — zones de travail fondues dans le décor
   ------------------------------------------------------------------------
   - La scène Flashcards est réellement centrée (annule l'ancien décalage).
   - Les grands conteneurs extérieurs des autres modules illustrés deviennent
     transparents comme celui des Flashcards.
   - Les éléments pédagogiques internes restent opaques et lisibles.
   ======================================================================== */

/* Flashcards : annuler le décalage historique de -55 px et recentrer toute
   la colonne de travail sans modifier ses tailles ni son fonctionnement. */
.flashcards-page.module-background-page .flashcard-page-heading,
.flashcards-page.module-background-page #studyToolbar,
.flashcards-page.module-background-page #progressWrap,
.flashcards-page.module-background-page #study,
.flashcards-page.module-background-page #actions,
.flashcards-page.module-background-page #empty{
  transform:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Vocabulaire : seul le grand panneau extérieur disparaît. La barre de
   recherche et le tableau conservent leur propre fond pour la lisibilité. */
.vocabulary-page.module-background-page .vocabulary-panel,
body.traditional .vocabulary-page.module-background-page .vocabulary-panel{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Grammaire : le grand cadre devient transparent ; les notions, fiches et
   exemples internes gardent leurs cartes lisibles. */
.grammar.module-background-page .grammar-card,
body.traditional .grammar.module-background-page .grammar-card{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Quiz : même logique, on retire uniquement le grand cadre extérieur. */
.quiz-page.module-background-page .quiz-panel,
body.traditional .quiz-page.module-background-page .quiz-panel{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Lecture longue : le carnet/texte interne reste lisible mais son grand
   conteneur extérieur se fond dans le paysage. */
.reader.module-background-page .reader-card,
body.traditional .reader.module-background-page .reader-card{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* ========================================================================
   Lóngmò 1.2.17 — ajustements ciblés Flashcards + Lecture longue
   ------------------------------------------------------------------------
   1) Sur grand écran, la colonne Flashcards est recentrée de façon explicite
      dans la zone de contenu, sans modifier sa taille ni son fonctionnement.
   2) La vraie carte devient légèrement translucide (~30 % de transparence),
      sans réduire l'opacité du texte ni des boutons.
   3) La traduction de Lecture longue retrouve un panneau blanc lisible à
      80 % d'opacité, tandis que le grand conteneur extérieur reste transparent.
   ======================================================================== */

/* Le parent occupe toute la largeur utile afin que les centrages internes ne
   dépendent plus d'un ancien max-width lors du passage sur un grand écran. */
.flashcards-page.module-background-page{
  width:100%!important;
  max-width:none!important;
}

/* Grand écran : centre géométrique explicite de chaque bloc Flashcards. */
@media (min-width:781px){
  .flashcards-page.module-background-page .flashcard-page-heading,
  .flashcards-page.module-background-page #studyToolbar,
  .flashcards-page.module-background-page #progressWrap,
  .flashcards-page.module-background-page #study,
  .flashcards-page.module-background-page #actions,
  .flashcards-page.module-background-page #empty{
    position:relative!important;
    left:50%!important;
    margin-left:0!important;
    margin-right:0!important;
    transform:translateX(-50%)!important;
  }
}

/* Carte Flashcard : environ 30 % transparente. On modifie le fond des faces
   plutôt que l'opacité de l'article, afin de garder hanzi/pinyin/texte nets. */
.flashcards-page.module-background-page .flashcard{
  background:transparent!important;
}
.flashcards-page.module-background-page .flashcard .face{
  background:rgba(255,252,247,.70)!important;
  backdrop-filter:blur(5px) saturate(1.03)!important;
  -webkit-backdrop-filter:blur(5px) saturate(1.03)!important;
}
body.traditional .flashcards-page.module-background-page .flashcard .face{
  background:rgba(246,252,255,.70)!important;
}

/* Lecture longue : la traduction/réponse affichée bénéficie de son propre
   rectangle blanc lisible. Le grand reader-card reste, lui, transparent. */
.reader.module-background-page .reader-translation.show{
  margin-top:14px!important;
  padding:18px 22px!important;
  border:1px solid rgba(255,255,255,.78)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.80)!important;
  color:var(--theme-ink)!important;
  box-shadow:0 10px 28px rgba(35,20,10,.10)!important;
  backdrop-filter:blur(8px) saturate(1.04)!important;
  -webkit-backdrop-filter:blur(8px) saturate(1.04)!important;
}
body.traditional .reader.module-background-page .reader-translation.show{
  background:rgba(248,253,255,.80)!important;
  box-shadow:0 10px 28px rgba(4,62,111,.10)!important;
}

/* ========================================================================
   Lóngmò 1.3.5 — lecteur musical hors de la sidebar
   ------------------------------------------------------------------------
   Le contrôle reste fixé en bas à gauche, mais commence désormais juste
   après la navigation verticale afin de ne plus la recouvrir.
   ======================================================================== */
@media(min-width:781px){
  .music-controls{
    left:calc(var(--sidebar-w) + 14px)!important;
    right:auto!important;
    bottom:14px!important;
    width:auto!important;
    min-width:156px!important;
    max-width:220px!important;
    justify-content:flex-start!important;
    padding:8px 10px!important;
    background:rgba(255,250,244,.94)!important;
    border-color:var(--panel-border)!important;
    box-shadow:0 10px 28px rgba(68,20,8,.16)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
  }
  body.traditional .music-controls{
    background:rgba(247,252,255,.95)!important;
    box-shadow:0 10px 28px rgba(4,62,111,.15)!important;
  }
  .music-controls button{
    background:var(--theme-accent)!important;
    color:#fff!important;
  }
  .music-controls input{
    width:92px!important;
    accent-color:var(--theme-accent)!important;
  }
}

/* --- Lóngmò 1.3.9 · Vidéos YouTube + zoom récompenses --- */
.reward-tile img{cursor:zoom-in}
.reward-lightbox{padding:24px;background:rgba(8,8,12,.88);backdrop-filter:blur(10px)}
.reward-lightbox-card{position:relative;width:min(94vw,1100px);max-height:92vh;margin:auto;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;border-radius:28px;background:#111;box-shadow:0 30px 90px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.16)}
.reward-lightbox-card>img{width:100%;height:100%;max-height:76vh;object-fit:contain;background:#0c0c0f;display:block}
.reward-lightbox-copy{padding:18px 22px 20px;background:linear-gradient(180deg,#17171d,#101014);color:#fff}
.reward-lightbox-copy span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#e0bc69;font-weight:800}
.reward-lightbox-copy h2{margin:4px 0 2px;font-size:24px;color:#fff}
.reward-lightbox-copy p{margin:0;color:rgba(255,255,255,.72)}
.reward-lightbox-close{position:absolute;z-index:3;top:14px;right:14px;width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;border:1px solid rgba(255,255,255,.3);font-size:28px;line-height:1;cursor:pointer}

.videos-page{position:relative}
.video-library-panel{overflow:visible}
.video-add-row{display:grid;grid-template-columns:minmax(240px,1.25fr) minmax(220px,.9fr) auto;gap:12px;align-items:end;padding:16px;border:1px solid var(--theme-line,rgba(0,0,0,.1));background:rgba(255,255,255,.66);border-radius:18px}
.video-input{display:grid;gap:7px;color:var(--theme-deep);font-weight:800;font-size:11px}
.video-input input{width:100%;height:44px;border:1px solid rgba(0,0,0,.14);border-radius:12px;padding:0 13px;background:#fff;color:#202028;font:inherit;outline:none}
.video-input input:focus{border-color:var(--theme-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent) 17%,transparent)}
.video-add-row .primary-cta{min-height:44px;white-space:nowrap}
.video-help{margin:10px 4px 18px;color:var(--theme-muted);font-size:11px}.video-help.error{color:#a52525;font-weight:800}
.video-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,.75fr);gap:18px;align-items:start}
.video-player-card,.video-saved-panel{border:1px solid var(--theme-line,rgba(0,0,0,.1));border-radius:20px;background:rgba(255,255,255,.78);box-shadow:0 16px 38px rgba(28,18,16,.08);overflow:hidden}
.video-frame-wrap{aspect-ratio:16/9;background:#09090b}.video-frame-wrap iframe{width:100%;height:100%;border:0;display:block}
.video-empty-state{aspect-ratio:16/9;display:grid;place-items:center;align-content:center;gap:5px;text-align:center;padding:30px;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.95),rgba(245,238,229,.9));color:var(--theme-deep)}
.video-empty-state>span{display:grid;place-items:center;width:68px;height:68px;border-radius:22px;background:linear-gradient(135deg,var(--theme-accent),var(--theme-accent-2));color:#fff;font-size:33px;font-weight:900;box-shadow:0 15px 28px rgba(0,0,0,.15)}
.video-empty-state strong{font-size:22px;margin-top:6px}.video-empty-state small{max-width:420px;color:var(--theme-muted);font-size:12px}
.video-now-playing{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-top:1px solid rgba(0,0,0,.08)}
.video-now-playing>div{min-width:0}.video-now-playing span{display:block;color:var(--theme-muted);font-size:9px;font-weight:900;letter-spacing:.12em}.video-now-playing strong{display:block;color:var(--theme-deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.video-now-playing .secondary-cta{text-decoration:none;white-space:nowrap}
.video-saved-panel{padding:14px}.video-saved-panel .panel-title-row{margin-bottom:10px}.video-saved-panel .panel-title-row h3{margin:1px 0}.video-saved-panel .panel-title-row>strong{font-size:11px;color:var(--theme-muted)}
.video-saved-list{display:grid;gap:8px;max-height:610px;overflow:auto;padding-right:2px}.video-saved-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:center;border-radius:14px;border:1px solid transparent;background:rgba(0,0,0,.035);overflow:hidden}.video-saved-item.active{border-color:color-mix(in srgb,var(--theme-accent) 45%,transparent);background:color-mix(in srgb,var(--theme-accent) 8%,white)}
.video-select{border:0;background:transparent;padding:7px;display:grid;grid-template-columns:92px minmax(0,1fr);gap:9px;align-items:center;text-align:left;cursor:pointer;color:inherit}.video-select img{width:92px;aspect-ratio:16/9;object-fit:cover;border-radius:9px;background:#ddd}.video-select span{min-width:0}.video-select strong{display:block;font-size:11px;color:var(--theme-deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-select small{font-size:9px;color:var(--theme-muted)}
.video-remove{width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--theme-muted);font-size:20px;cursor:pointer}.video-remove:hover{background:rgba(150,30,30,.1);color:#9b2727}.video-list-empty{padding:25px 12px;text-align:center;color:var(--theme-muted);font-size:12px}.video-list-empty small{font-size:10px}
.videos-mascot{background-image:url('../assets/mascots/hsk/10_dragon_bubble_tea.webp');background-size:contain;background-position:center;background-repeat:no-repeat}
body[data-system="traditional"] .videos-mascot{background-image:url('../assets/mascots/tocfl/13_ours_oiseau_appareil_photo.webp')}
@media(max-width:980px){.video-layout{grid-template-columns:1fr}.video-add-row{grid-template-columns:1fr 1fr}.video-add-row .primary-cta{grid-column:1/-1}.video-saved-list{max-height:360px}}
@media(max-width:650px){.video-add-row{grid-template-columns:1fr}.video-add-row .primary-cta{grid-column:auto}.video-now-playing{align-items:flex-start;flex-direction:column}.reward-lightbox{padding:10px}.reward-lightbox-card{border-radius:18px}.reward-lightbox-copy h2{font-size:19px}.video-select{grid-template-columns:84px minmax(0,1fr)}.video-select img{width:84px}}

/* --- Lóngmò 1.4.0 · Playlists, Flashcards TOCFL, Quiz grammaire, musique --- */
.flashcard-system-switch{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.flashcard-system-switch button{border:1px solid var(--panel-border);background:rgba(255,255,255,.82);color:var(--theme-deep);border-radius:999px;padding:8px 12px;font-size:10px;font-weight:900;cursor:pointer}.flashcard-system-switch button.active{border-color:transparent;background:linear-gradient(135deg,var(--theme-accent),var(--theme-deep));color:#fff;box-shadow:0 7px 18px color-mix(in srgb,var(--theme-accent) 22%,transparent)}
.video-add-row{grid-template-columns:minmax(220px,1.35fr) minmax(180px,.9fr) minmax(150px,.7fr) auto!important}.video-input select,.video-playlist-toolbar select,.video-playlist-create input,.setting-card select,.music-controls select{min-height:38px;border:1px solid var(--panel-border);border-radius:11px;background:rgba(255,255,255,.92);color:var(--theme-ink);padding:8px 10px;font:700 10px/1.2 inherit}.video-playlist-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:10px 0}.video-playlist-create{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:7px;margin:8px 0;padding:9px;border-radius:13px;background:var(--theme-soft)}.video-playlist-actions{display:flex;gap:7px;margin:6px 0 10px}.video-playlist-actions .danger-cta{padding:8px 10px;font-size:9px}.video-saved-item small{white-space:normal}
.grammar-quiz-launch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--panel-border)}.grammar-quiz-launch span{font-size:10px;font-weight:800;color:var(--theme-muted)}.grammar-quiz{margin-top:16px;padding:16px;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.92),var(--theme-soft));border:1px solid var(--panel-border)}.grammar-quiz-head{display:flex;justify-content:space-between;gap:10px;font-size:10px;font-weight:900;color:var(--theme-deep)}.grammar-quiz-track{height:6px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden;margin:8px 0 14px}.grammar-quiz-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--theme-accent),var(--theme-deep));transition:width .25s ease}.grammar-quiz-prompt{font-size:13px;font-weight:800;line-height:1.45;color:var(--theme-ink);margin:8px 0 12px}.grammar-quiz-answers{display:grid;grid-template-columns:1fr 1fr;gap:8px}.grammar-quiz-answers button{border:1px solid var(--panel-border);border-radius:12px;background:#fff;padding:11px;text-align:left;color:var(--theme-ink);font-size:10px;font-weight:800;cursor:pointer}.grammar-quiz-answers button:hover{border-color:var(--theme-accent);transform:translateY(-1px)}.grammar-quiz-answers button.good{background:#dff4e4;border-color:#65a874;color:#225b31}.grammar-quiz-answers button.bad{background:#fbe0df;border-color:#d78680;color:#7b2926}.grammar-quiz-feedback{min-height:22px;margin-top:9px;font-size:10px;font-weight:800;color:var(--theme-deep)}.grammar-quiz-result{text-align:center;padding:16px 4px 4px}.grammar-quiz-result>strong{display:block;font-size:34px;color:var(--theme-deep)}.grammar-quiz-result>div{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.music-controls{gap:7px!important}.music-controls select{max-width:145px;min-height:30px;padding:5px 8px;border-radius:9px;background:rgba(255,255,255,.9)}.setting-music-row{align-items:end!important}.setting-music-row label{display:grid;gap:5px;font-size:9px;font-weight:800;color:var(--theme-muted)}.setting-music-row select{min-width:150px}
@media(max-width:900px){.video-add-row{grid-template-columns:1fr!important}.video-playlist-create{grid-template-columns:1fr!important}.grammar-quiz-answers{grid-template-columns:1fr}.music-controls select{max-width:105px}.setting-music-row{align-items:stretch!important}}

/* --- Lóngmò 1.4.1 · corrections UX demandées --- */
/* Flashcards TOCFL : vraie transparence pour laisser vivre le décor Taïwan. */
body.traditional .flashcards-page .flashcard .face,
body.traditional .flashcards-page.module-background-page .flashcard .face{
  background:rgba(246,252,255,.46)!important;
  backdrop-filter:blur(2.5px) saturate(1.02)!important;
  -webkit-backdrop-filter:blur(2.5px) saturate(1.02)!important;
  border-color:rgba(255,255,255,.72)!important;
  box-shadow:0 18px 42px rgba(4,62,111,.13)!important;
}
body.traditional .flashcards-page .flashcard{background:transparent!important;box-shadow:none!important}

/* Lecture longue : choix de niveau indépendant des flashcards. */
.reader-level-picker{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 4px;padding:10px 12px;border:1px solid var(--panel-border);border-radius:14px;background:rgba(255,255,255,.62)}
.reader-level-picker>span{font-size:10px;font-weight:900;color:var(--theme-muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.reader-level-tabs{display:flex;gap:6px;flex-wrap:wrap}.reader-level-tabs button{border:1px solid var(--panel-border);border-radius:999px;background:rgba(255,255,255,.82);color:var(--theme-deep);padding:7px 11px;font-size:9px;font-weight:900;cursor:pointer}.reader-level-tabs button:hover{border-color:var(--theme-accent)}.reader-level-tabs button.active{border-color:transparent;background:linear-gradient(135deg,var(--theme-accent),var(--theme-deep));color:#fff;box-shadow:0 6px 14px color-mix(in srgb,var(--theme-accent) 18%,transparent)}
body.traditional .reader-level-picker{background:rgba(247,252,255,.68)}

/* Quiz grammaire : phrase à trous + QCM de particules/structures. */
.grammar-quiz-prompt{display:grid;gap:10px!important}.grammar-quiz-instruction{display:block;font-size:11px;font-weight:800;color:var(--theme-muted)}.grammar-cloze-sentence{display:block;padding:17px 18px;border-radius:15px;background:rgba(255,255,255,.9);border:1px solid var(--panel-border);font:800 clamp(22px,3vw,32px)/1.55 "Noto Serif SC","Songti SC",serif;color:var(--theme-deep);letter-spacing:.02em;text-align:center}.grammar-cloze-sentence::first-letter{margin-left:0}.grammar-quiz-answers button{text-align:center!important;font:900 18px/1.2 "Noto Serif SC","Songti SC",serif!important;padding:14px 12px!important}.grammar-quiz-feedback{line-height:1.45}

/* Lecteur musical : rectangle réellement assez long pour morceau + volume. */
@media(min-width:781px){
  .music-controls{
    width:330px!important;
    min-width:330px!important;
    max-width:330px!important;
    border-radius:18px!important;
    padding:8px 11px!important;
    gap:8px!important;
    overflow:hidden!important;
  }
  .music-controls select{flex:1 1 132px!important;min-width:0!important;max-width:none!important;width:auto!important}
  .music-controls input{flex:0 0 105px!important;width:105px!important;min-width:105px!important;margin:0!important}
  .music-controls button{flex:0 0 35px!important}
}
@media(max-width:900px) and (min-width:781px){.music-controls{width:300px!important;min-width:300px!important;max-width:300px!important}.music-controls input{flex-basis:88px!important;width:88px!important;min-width:88px!important}}
@media(max-width:650px){.reader-level-picker{align-items:flex-start;flex-direction:column}.reader-level-tabs{width:100%}.reader-level-tabs button{flex:1 1 calc(33.333% - 6px)}}

/* ========================================================================
   Lóngmò 1.5.12 - 阅读 · Lecture : bibliothèque graduée + lecteur de livres
   ======================================================================== */
.reading-library-page{
  width:min(1500px,100%)!important;
  margin:0 auto!important;
  padding:12px 0 70px!important;
}
.reading-page-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  width:min(1320px,94%);margin:0 auto 18px;padding:22px 24px;
  border:1px solid rgba(255,255,255,.5);border-radius:24px;
  background:linear-gradient(120deg,rgba(50,13,8,.88),rgba(129,24,16,.72));
  box-shadow:0 18px 48px rgba(48,17,8,.18);color:#fff;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.reading-page-head .page-kicker{color:#ffd8a8!important}
.reading-page-head h2{margin:2px 0 4px;color:#fff!important;font:800 34px/1.05 Georgia,"Noto Serif SC",serif}
.reading-page-head p{margin:0;max-width:720px;color:rgba(255,255,255,.86);font-size:13px;line-height:1.55}
.reading-mode-tabs{display:flex;gap:8px;padding:6px;border-radius:16px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
.reading-mode-tabs button{min-width:130px;border:0;border-radius:12px;padding:12px 18px;background:transparent;color:rgba(255,255,255,.8);font-weight:900;cursor:pointer}
.reading-mode-tabs button.active{background:#fff;color:var(--theme-deep);box-shadow:0 8px 24px rgba(0,0,0,.16)}
body.traditional .reading-page-head{background:linear-gradient(120deg,rgba(4,42,73,.9),rgba(4,107,166,.74))}

.reading-texts-panel,.reading-books-panel,.book-reader-panel{width:min(1320px,94%);margin:0 auto}
.reading-texts-panel .reader-card{width:100%!important;min-height:0!important}

.book-library-toolbar{
  display:flex;justify-content:space-between;align-items:flex-end;gap:18px;padding:22px 24px;margin-bottom:12px;
  border-radius:22px;background:rgba(255,250,244,.91);border:1px solid rgba(255,255,255,.76);
  box-shadow:0 14px 36px rgba(70,21,7,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.book-library-eyebrow{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--theme-accent)}
.book-library-toolbar h3{margin:4px 0 4px;color:var(--theme-deep);font:800 28px/1.1 Georgia,"Noto Serif SC",serif}
.book-library-toolbar p{margin:0;color:var(--theme-muted);font-size:12px}
.book-level-tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.book-level-tabs button{border:1px solid var(--panel-border);border-radius:999px;background:rgba(255,255,255,.9);color:var(--theme-deep);padding:9px 13px;font-size:10px;font-weight:900;cursor:pointer}
.book-level-tabs button.active{border-color:transparent;background:linear-gradient(135deg,var(--theme-accent),var(--theme-deep));color:#fff;box-shadow:0 7px 18px color-mix(in srgb,var(--theme-accent) 24%,transparent)}

.book-library-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}
.book-library-summary>div{display:flex;align-items:baseline;gap:7px;padding:12px 16px;border-radius:16px;background:rgba(255,250,244,.84);border:1px solid rgba(255,255,255,.72);box-shadow:0 8px 20px rgba(70,21,7,.08)}
.book-library-summary strong{font-size:22px;color:var(--theme-deep)}
.book-library-summary span{font-size:10px;font-weight:800;color:var(--theme-muted)}

.book-catalog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.book-card{overflow:hidden;border-radius:22px;background:rgba(255,252,247,.95);border:1px solid rgba(255,255,255,.8);box-shadow:0 16px 38px rgba(58,17,6,.14);transition:transform .18s ease,box-shadow .18s ease;cursor:pointer}
.book-card:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(58,17,6,.21)}
.book-cover-wrap{position:relative;aspect-ratio:1/1;overflow:hidden;background:#f2dfc4}
.book-cover-wrap::after{content:"";position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(transparent,rgba(12,4,2,.38));pointer-events:none}
.book-cover-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.book-card:hover .book-cover-wrap img{transform:scale(1.025)}
.book-card-level,.book-card-complete{position:absolute;z-index:2;top:12px;padding:7px 10px;border-radius:999px;font-size:9px;font-weight:900;box-shadow:0 5px 15px rgba(0,0,0,.18)}
.book-card-level{left:12px;background:rgba(143,20,17,.94);color:#fff}
.book-card-complete{right:12px;background:rgba(29,114,74,.94);color:#fff}
.book-card-body{padding:15px 16px 16px}
.book-card-genre{display:block;margin-bottom:5px;color:var(--theme-accent);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.book-card h3{margin:0;color:var(--theme-deep);font:800 21px/1.15 Georgia,"Noto Serif SC",serif}
.book-card-title-fr{margin:3px 0 8px;color:#6f4f44;font-weight:800;font-size:12px}
.book-card-summary{height:44px;overflow:hidden;margin:0 0 10px;color:var(--theme-muted);font-size:10px;line-height:1.45}
.book-card-stats{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}.book-card-stats span{padding:5px 7px;border-radius:8px;background:#fff3e7;color:#79544a;font-size:8px;font-weight:800}
.book-card-progress{height:6px;border-radius:99px;background:#eaded7;overflow:hidden}.book-card-progress span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--theme-accent),var(--theme-accent-2))}
.book-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:11px}.book-card-footer small{font-size:9px;color:var(--theme-muted)}.book-card-footer button{border:0;border-radius:10px;background:var(--theme-deep);color:#fff;padding:8px 11px;font-size:9px;font-weight:900;cursor:pointer}

.book-empty-state{text-align:center;padding:70px 26px;border-radius:24px;background:rgba(248,253,255,.92);border:1px solid rgba(255,255,255,.8);box-shadow:0 16px 42px rgba(4,62,111,.12)}
.book-empty-icon{width:70px;height:70px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:#e7f6ff;color:#086daa;font:800 30px Georgia,"Noto Serif TC",serif}.book-empty-state h3{margin:0 0 8px;color:#07578d}.book-empty-state p{max-width:620px;margin:auto;color:#557083;line-height:1.6}

.book-back-button{border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(49,13,8,.82);color:#fff;padding:10px 15px;margin:0 0 12px;font-weight:900;cursor:pointer;backdrop-filter:blur(8px)}
.book-reader-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
.book-reader-sidebar,.book-reading-sheet{border:1px solid rgba(255,255,255,.82);box-shadow:0 18px 46px rgba(61,19,8,.15);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.book-reader-sidebar{position:sticky;top:18px;border-radius:24px;padding:15px;background:rgba(255,249,241,.94)}
.book-reader-cover{width:100%;aspect-ratio:1;object-fit:cover;border-radius:17px;display:block;box-shadow:0 10px 28px rgba(39,12,4,.18)}
.book-reader-identity{padding:13px 4px 8px}.book-level-badge{display:inline-block;padding:5px 8px;border-radius:999px;background:var(--theme-deep);color:#fff;font-size:9px;font-weight:900}.book-reader-identity h3{margin:8px 0 2px;color:var(--theme-deep);font:800 23px/1.1 Georgia,"Noto Serif SC",serif}.book-reader-identity>p{margin:0;color:#76554b;font-size:12px;font-weight:800}.book-reader-meta{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}.book-reader-meta span{font-size:8px;font-weight:800;color:#76554b;background:#fff0df;padding:5px 7px;border-radius:8px}
.book-progress-block{padding:10px 4px 12px;border-top:1px solid #ebdcd1}.book-progress-block>div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:9px;color:var(--theme-muted)}.book-progress-block strong{color:var(--theme-deep)}.book-progress-track{height:7px;margin-top:7px;border-radius:99px;background:#eaded7;overflow:hidden}.book-progress-track span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--theme-accent),var(--theme-accent-2))}
.book-chapter-list{display:grid;gap:5px;max-height:330px;overflow:auto;padding-right:2px}.book-chapter-list button{display:flex;align-items:center;gap:9px;text-align:left;border:1px solid transparent;border-radius:12px;background:rgba(255,255,255,.64);padding:8px;cursor:pointer;color:var(--theme-deep)}.book-chapter-list button>span{flex:0 0 24px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#f0dfd2;color:#7f211a;font-size:9px;font-weight:900}.book-chapter-list button div{min-width:0}.book-chapter-list strong,.book-chapter-list small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.book-chapter-list strong{font-size:10px}.book-chapter-list small{margin-top:2px;color:var(--theme-muted);font-size:8px}.book-chapter-list button.active{border-color:color-mix(in srgb,var(--theme-accent) 38%,transparent);background:#fff1e5}.book-chapter-list button.complete>span{background:#dff3e7;color:#147344}

.book-reading-sheet{position:relative;overflow:visible;border-radius:26px;padding:28px 32px;background:rgba(255,253,249,.95);min-height:690px}
.book-reading-sheet::before{content:"读";position:absolute;right:24px;top:10px;font:900 120px/1 Georgia,"Noto Serif SC",serif;color:color-mix(in srgb,var(--theme-accent) 7%,transparent);pointer-events:none}
.book-chapter-head{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:16px;border-bottom:1px solid #eadcd4}.book-chapter-kicker{color:var(--theme-accent);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.book-chapter-head h2{margin:5px 0 3px;color:var(--theme-deep);font:800 32px/1.12 Georgia,"Noto Serif SC",serif}.book-chapter-head p{margin:0;color:#80665d;font-size:13px;font-weight:700}.book-reading-tools{display:flex;gap:6px;position:relative;z-index:2}.book-reading-tools .action{padding:9px 11px;font-size:10px}
.book-hover-help{margin:14px 0 4px;padding:9px 12px;border-radius:12px;background:#fff3e6;color:#7b5549;font-size:9px}
.book-chapter-text{--book-font-scale:1;position:relative;z-index:3;padding:22px 18px 28px;font-size:calc(25px * var(--book-font-scale));line-height:2.05;color:#34231f;letter-spacing:.02em}
.book-chapter-text .token-text{border-radius:4px;transition:background .12s ease,color .12s ease}.book-chapter-text .token:hover .token-text,.book-chapter-text .token:focus .token-text{background:#ffe2c7;color:#8f1515}
.book-chapter-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:18px;border-top:1px solid #eadcd4}.book-chapter-actions button{min-width:170px}.book-chapter-actions button:disabled{opacity:.45;cursor:not-allowed}

body.traditional .book-library-toolbar,body.traditional .book-library-summary>div,body.traditional .book-reader-sidebar,body.traditional .book-reading-sheet{background:rgba(248,253,255,.94)}
body.traditional .book-card{background:rgba(248,253,255,.96)}
body.traditional .book-card-stats span,body.traditional .book-reader-meta span{background:#eaf6fc;color:#38627c}

@media(max-width:1180px){.book-catalog{grid-template-columns:repeat(3,minmax(0,1fr))}.book-reader-layout{grid-template-columns:260px minmax(0,1fr)}}
@media(max-width:900px){.reading-page-head,.book-library-toolbar{align-items:stretch;flex-direction:column}.reading-mode-tabs{align-self:flex-start}.book-level-tabs{justify-content:flex-start}.book-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.book-reader-layout{grid-template-columns:1fr}.book-reader-sidebar{position:relative;top:auto;display:grid;grid-template-columns:180px minmax(0,1fr);gap:14px}.book-chapter-list{grid-column:1/-1;max-height:210px}.book-reading-sheet{min-height:0}}
@media(max-width:620px){.reading-page-head{padding:18px}.reading-mode-tabs{width:100%}.reading-mode-tabs button{min-width:0;flex:1}.book-library-summary{grid-template-columns:repeat(2,1fr)}.book-catalog{grid-template-columns:1fr}.book-reader-sidebar{display:block}.book-reader-cover{max-width:240px;margin:auto}.book-reading-sheet{padding:20px 16px}.book-chapter-head{flex-direction:column}.book-chapter-text{padding:18px 6px;font-size:calc(21px * var(--book-font-scale))}.book-chapter-actions{flex-direction:column}.book-chapter-actions button{width:100%}}


/* ========================================================================
   Lóngmò 1.5.35 — HOTFIX Flashcards / fonds de module
   - le cadre externe de la carte reste entièrement transparent ;
   - la face HSK conserve 30 % de transparence, comme avant ;
   - la face TOCFL conserve sa transparence renforcée historique ;
   - ces règles finales protègent le rendu contre les anciens overrides.
   ======================================================================== */
.flashcards-page.module-background-page .flashcard,
body.traditional .flashcards-page.module-background-page .flashcard{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
.flashcards-page.module-background-page .flashcard .face{
  background:rgba(255,252,247,.70)!important;
  backdrop-filter:blur(5px) saturate(1.03)!important;
  -webkit-backdrop-filter:blur(5px) saturate(1.03)!important;
  border-color:rgba(255,255,255,.42)!important;
  box-shadow:0 14px 34px rgba(59,20,9,.10)!important;
}
body.traditional .flashcards-page.module-background-page .flashcard .face{
  background:rgba(246,252,255,.46)!important;
  backdrop-filter:blur(2.5px) saturate(1.02)!important;
  -webkit-backdrop-filter:blur(2.5px) saturate(1.02)!important;
  border-color:rgba(255,255,255,.48)!important;
  box-shadow:0 14px 34px rgba(4,62,111,.10)!important;
}

/* ========================================================================
   Lóngmò 1.5.58 — Lecture TOCFL : entraînement type examen sous les livres
   ======================================================================== */
.tocfl-reading-training{margin:24px 0 0;border-radius:26px;border:1px solid rgba(255,255,255,.72);background:linear-gradient(135deg,rgba(238,250,255,.9),rgba(224,242,252,.78));box-shadow:0 18px 46px rgba(5,66,107,.15);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden}
.tocfl-training-intro{padding:24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center}
.tocfl-training-copy h3{margin:4px 0 7px;color:#064d7a;font:800 28px/1.1 Georgia,"Noto Serif TC",serif}.tocfl-training-copy p{margin:0;max-width:820px;color:#486a80;font-size:12px;line-height:1.6}
.tocfl-training-stats{display:grid;grid-template-columns:repeat(3,minmax(78px,1fr));gap:8px}.tocfl-training-stats>div{padding:11px 13px;border-radius:15px;background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.86);text-align:center}.tocfl-training-stats strong,.tocfl-training-stats span{display:block}.tocfl-training-stats strong{color:#075b91;font-size:20px}.tocfl-training-stats span{margin-top:2px;color:#638095;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.tocfl-training-levels{grid-column:1/-1;display:flex;gap:7px;flex-wrap:wrap}.tocfl-training-levels button{border:1px solid rgba(6,91,145,.2);border-radius:999px;padding:9px 13px;background:rgba(255,255,255,.78);color:#075b91;font-size:10px;font-weight:900;cursor:pointer}.tocfl-training-levels button.active{border-color:transparent;background:linear-gradient(135deg,#138acb,#07558a);color:#fff;box-shadow:0 7px 18px rgba(4,95,150,.22)}
.tocfl-training-start{grid-column:1/-1;justify-self:start;min-width:230px}
.tocfl-training-game{padding:22px 24px 26px}.tocfl-training-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px}.tocfl-training-head>div{display:flex;flex-direction:column;gap:3px}.tocfl-training-head span{color:#1683bd;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.tocfl-training-head strong{color:#064d7a;font-size:13px}
.tocfl-training-card{padding:24px;border-radius:22px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.92);box-shadow:0 12px 30px rgba(4,65,105,.1)}.tocfl-training-text{padding:20px;border-radius:16px;background:rgba(230,246,255,.72);color:#163b50;font:700 21px/1.9 "Noto Serif TC","Microsoft JhengHei",serif;letter-spacing:.02em}.tocfl-training-card h4{margin:20px 0 12px;color:#064d7a;font-size:16px;line-height:1.5}
.tocfl-training-answers{display:grid;gap:9px}.tocfl-training-answers button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid rgba(8,99,154,.18);border-radius:14px;background:rgba(250,254,255,.95);padding:12px 14px;color:#24495e;font-size:13px;font-weight:800;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease}.tocfl-training-answers button:hover:not(:disabled){transform:translateY(-1px);border-color:#1687c2;background:#f0faff}.tocfl-training-answers button>span{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#dff2fc;color:#075b91;font-size:10px;font-weight:900}.tocfl-training-answers button.correct{border-color:#58a67a;background:#edf9f2;color:#23613d}.tocfl-training-answers button.wrong{border-color:#d97979;background:#fff1f1;color:#8a3535}.tocfl-training-answers button:disabled{cursor:default;opacity:1}
.tocfl-training-feedback{margin-top:14px}.tocfl-training-verdict{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-radius:13px}.tocfl-training-verdict.ok{background:#e4f6ea;color:#276641}.tocfl-training-verdict.bad{background:#fff0f0;color:#8b3737}.tocfl-training-verdict strong{font-size:12px}.tocfl-training-verdict span{font-size:10px;font-weight:800}.tocfl-training-explanation{margin-top:10px;padding:14px 16px;border-radius:14px;background:#f6fbfe;border:1px solid #d8ebf5}.tocfl-training-explanation h4{margin:0 0 4px;color:#075b91;font-size:11px}.tocfl-training-explanation h4:not(:first-child){margin-top:11px}.tocfl-training-explanation p{margin:0;color:#49697b;font-size:11px;line-height:1.65}.tocfl-training-skill{display:inline-block;margin-top:10px;padding:6px 9px;border-radius:999px;background:#e4f2fa;color:#0a648f;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.tocfl-training-nav{display:flex;justify-content:space-between;gap:10px;margin-top:13px}.tocfl-training-nav button{min-width:150px}.tocfl-training-nav button:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:760px){.tocfl-training-intro{grid-template-columns:1fr}.tocfl-training-stats{grid-template-columns:repeat(3,1fr)}.tocfl-training-head{align-items:flex-start;flex-direction:column}.tocfl-training-card{padding:16px}.tocfl-training-text{padding:15px;font-size:18px}.tocfl-training-nav{flex-direction:column}.tocfl-training-nav button{width:100%}}

/* Lóngmò 1.5.58 — Couvertures illustrées TOCFL Lecture */
.tocfl-training-levels{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(6,minmax(132px,1fr));
  gap:12px;
  align-items:stretch;
}
.tocfl-training-levels .tocfl-training-cover{
  position:relative;
  min-height:245px;
  padding:0;
  overflow:hidden;
  border-radius:20px;
  border:2px solid rgba(255,255,255,.76);
  background:#0a4f73;
  box-shadow:0 12px 28px rgba(3,55,91,.16);
  cursor:pointer;
  isolation:isolate;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.tocfl-training-levels .tocfl-training-cover::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(2,25,38,.02) 18%,rgba(2,25,38,.12) 48%,rgba(2,25,38,.88) 100%);
  pointer-events:none;
}
.tocfl-training-levels .tocfl-training-cover img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.01);
  transition:transform .24s ease,filter .24s ease;
}
.tocfl-training-levels .tocfl-training-cover-overlay{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  text-align:left;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.34);
}
.tocfl-training-levels .tocfl-training-cover-overlay strong{
  font:900 24px/1 Georgia,"Noto Serif TC",serif;
  letter-spacing:.01em;
}
.tocfl-training-levels .tocfl-training-cover-overlay b{
  font-size:11px;
  line-height:1.25;
}
.tocfl-training-levels .tocfl-training-cover-overlay small{
  max-width:88%;
  color:rgba(255,255,255,.86);
  font-size:8px;
  line-height:1.35;
  font-weight:700;
}
.tocfl-training-levels .tocfl-training-cover-arrow{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:3;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.72);
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:16px;
  line-height:1;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.tocfl-training-levels .tocfl-training-cover:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 34px rgba(3,55,91,.24);
  border-color:rgba(255,255,255,.98);
}
.tocfl-training-levels .tocfl-training-cover:hover img{transform:scale(1.055)}
.tocfl-training-levels .tocfl-training-cover.active{
  border-color:#fff;
  box-shadow:0 0 0 3px rgba(21,135,194,.34),0 18px 36px rgba(3,55,91,.25);
}
.tocfl-training-levels .tocfl-training-cover.active .tocfl-training-cover-arrow{
  background:#fff;
  color:#07649a;
}
@media(max-width:1180px){.tocfl-training-levels{grid-template-columns:repeat(3,minmax(150px,1fr))}}
@media(max-width:700px){.tocfl-training-levels{grid-template-columns:repeat(2,minmax(135px,1fr))}.tocfl-training-levels .tocfl-training-cover{min-height:220px}}

/* 1.5.62 — Rewards hub: horizontal categories + HSK/TOCFL celebration backgrounds */
.rewards-collection-page{
  --rewards-bg:url('../assets/rewards/backgrounds/rewards-hsk.webp');
  position:relative!important;
  isolation:isolate;
  min-height:calc(100vh - 24px)!important;
  padding:24px 26px 70px!important;
  background-image:var(--rewards-bg)!important;
  background-size:cover!important;
  background-position:center top!important;
  background-attachment:fixed!important;
  border-radius:0!important;
  overflow:visible!important;
}
.rewards-collection-page::after{display:none!important}
.rewards-scene-veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(35,7,5,.18) 0%,rgba(34,10,8,.35) 48%,rgba(20,8,8,.58) 100%);pointer-events:none}
body.traditional .rewards-scene-veil{background:linear-gradient(180deg,rgba(2,30,68,.12) 0%,rgba(5,38,73,.32) 48%,rgba(2,22,47,.58) 100%)}
.rewards-page-hero{width:min(1180px,94%)!important;margin:0 auto 14px!important;padding:20px 24px!important;background:rgba(255,249,239,.88)!important;border:1px solid rgba(255,255,255,.72)!important;box-shadow:0 18px 45px rgba(33,10,4,.18)!important;backdrop-filter:blur(14px) saturate(1.12)!important}
body.traditional .rewards-page-hero{background:rgba(244,250,255,.9)!important;box-shadow:0 18px 45px rgba(2,25,58,.18)!important}
.rewards-page-hero h2{margin-bottom:4px!important}
.reward-category-tabs{position:sticky;top:10px;z-index:12;width:min(1240px,96%);margin:0 auto 14px;display:flex;gap:9px;overflow-x:auto;padding:9px;border-radius:20px;background:rgba(39,12,8,.68);border:1px solid rgba(255,255,255,.18);box-shadow:0 14px 35px rgba(0,0,0,.22);backdrop-filter:blur(16px) saturate(1.2);scrollbar-width:thin}
body.traditional .reward-category-tabs{background:rgba(3,31,68,.72)}
.reward-category-tabs button{flex:0 0 auto;display:flex;align-items:center;gap:8px;border:0;border-radius:14px;padding:10px 15px;background:rgba(255,255,255,.12);color:#fff;font:800 12px/1.1 inherit;letter-spacing:.01em;cursor:pointer;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}
.reward-category-tabs button span{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:rgba(255,255,255,.15);font-size:15px}
.reward-category-tabs button:hover{transform:translateY(-1px);background:rgba(255,255,255,.21)}
.reward-category-tabs button.active{background:linear-gradient(135deg,#fff2da,#f4c36d);color:#6d1d14;box-shadow:0 8px 22px rgba(0,0,0,.2)}
body.traditional .reward-category-tabs button.active{background:linear-gradient(135deg,#eff9ff,#9ed9ff);color:#0b4875}
.rewards-collection-page>.rewards-collection-panel{width:min(1180px,94%)!important;margin:0 auto!important;padding:18px!important;background:rgba(255,250,243,.86)!important;border:1px solid rgba(255,255,255,.72)!important;border-radius:24px!important;box-shadow:0 20px 55px rgba(30,9,4,.22)!important;backdrop-filter:blur(16px) saturate(1.08)!important}
body.traditional .rewards-collection-page>.rewards-collection-panel{background:rgba(244,250,255,.88)!important;box-shadow:0 20px 55px rgba(2,25,58,.22)!important}
.rewards-category-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:2px 4px 16px}.rewards-category-heading h3{margin:2px 0 3px;font-size:26px}.rewards-category-heading p{margin:0;color:var(--muted);font-size:13px}.rewards-category-progress{min-width:200px;text-align:right}.rewards-category-progress>strong{display:block;margin-bottom:7px;font-size:17px}.rewards-category-progress .collection-progress{width:200px;max-width:32vw}
.rewards-category-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:13px!important;max-height:none!important;overflow:visible!important;padding:2px!important}
.rewards-category-grid .reward-collection-card{position:relative;min-height:190px!important;border-radius:18px!important;overflow:hidden!important;border:1px solid rgba(91,45,17,.12)!important;background:rgba(255,255,255,.92)!important;box-shadow:0 10px 25px rgba(35,15,7,.10)!important;transition:transform .18s ease,box-shadow .18s ease!important}
.rewards-category-grid .reward-collection-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(35,15,7,.16)!important}
.rewards-category-grid figure.reward-collection-card{display:flex!important;flex-direction:column!important;margin:0!important}
.rewards-category-grid .reward-collection-card img{width:100%!important;height:155px!important;object-fit:cover!important;object-position:center!important;display:block!important}
.rewards-category-grid .reward-collection-card figcaption{display:flex!important;flex-direction:column!important;gap:3px!important;padding:10px 11px 11px!important;background:rgba(255,255,255,.97)!important;color:#3e251d!important;text-align:left!important}
.rewards-category-grid .reward-collection-card figcaption strong{font-size:12px;line-height:1.25}.rewards-category-grid .reward-collection-card figcaption span{font-size:10px;color:#477a47;font-weight:800}
.rewards-category-grid .reward-secret{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px!important;text-align:center;background:linear-gradient(145deg,rgba(67,46,42,.92),rgba(31,24,25,.96))!important;color:#fff!important;border:1px solid rgba(255,255,255,.15)!important}
body.traditional .rewards-category-grid .reward-secret{background:linear-gradient(145deg,rgba(25,58,88,.94),rgba(13,31,52,.97))!important}
.reward-secret-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.10);font-size:25px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.rewards-category-grid .reward-secret strong{font-size:13px}.rewards-category-grid .reward-secret span{max-width:150px;color:rgba(255,255,255,.72);font-size:10px;line-height:1.35}
@media(max-width:1150px){.rewards-category-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:850px){.rewards-collection-page{padding:16px 12px 90px!important;background-attachment:scroll!important}.rewards-category-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.rewards-category-heading{align-items:flex-start;flex-direction:column}.rewards-category-progress{width:100%;text-align:left}.rewards-category-progress .collection-progress{width:100%;max-width:none}.reward-category-tabs{top:6px;width:100%}}
@media(max-width:620px){.rewards-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.rewards-category-grid .reward-collection-card img{height:130px!important}.rewards-category-grid .reward-collection-card{min-height:168px!important}.rewards-page-hero,.rewards-collection-page>.rewards-collection-panel{width:100%!important}.reward-category-tabs button{padding:9px 11px;font-size:11px}}

/* 1.5.63 - Rewards landing: keep the dedicated reward art above legacy page scenes. */
body .page-view.rewards-page.rewards-collection-page{
  background-image:var(--rewards-bg)!important;
  background-size:cover!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
  background-color:#4b130c!important;
}
body.traditional .page-view.rewards-page.rewards-collection-page{
  background-image:var(--rewards-bg)!important;
  background-color:#082d4d!important;
}
.rewards-collection-page>.mascot-sprinkles{display:none!important}
.rewards-browser[hidden],.rewards-intro[hidden]{display:none!important}
.rewards-intro{
  position:relative;
  z-index:4;
  min-height:calc(100vh - 170px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:38px 20px 54px;
}
.rewards-explore-button{
  min-width:230px;
  border:1px solid rgba(255,255,255,.86);
  border-radius:999px;
  padding:13px 34px 15px;
  background:linear-gradient(135deg,rgba(113,20,13,.94),rgba(196,63,19,.94));
  color:#fff8e6;
  box-shadow:0 18px 42px rgba(28,7,3,.36),inset 0 1px 0 rgba(255,255,255,.24);
  backdrop-filter:blur(10px) saturate(1.15);
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
body.traditional .rewards-explore-button{
  background:linear-gradient(135deg,rgba(5,59,101,.95),rgba(19,119,168,.94));
  box-shadow:0 18px 42px rgba(1,22,42,.38),inset 0 1px 0 rgba(255,255,255,.24);
}
.rewards-explore-button span{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.rewards-explore-button strong{display:block;margin-top:3px;font-size:23px;line-height:1.1;letter-spacing:.02em}
.rewards-explore-button:hover{transform:translateY(-3px) scale(1.015);filter:brightness(1.06);box-shadow:0 22px 48px rgba(28,7,3,.42),inset 0 1px 0 rgba(255,255,255,.28)}
.rewards-explore-button:focus-visible{outline:3px solid rgba(255,255,255,.95);outline-offset:4px}
.rewards-collection-page:not(.rewards-explorer-open) .rewards-scene-veil{background:linear-gradient(180deg,rgba(16,4,3,.03),rgba(16,4,3,.08))}
body.traditional .rewards-collection-page:not(.rewards-explorer-open) .rewards-scene-veil{background:linear-gradient(180deg,rgba(1,16,31,.02),rgba(1,16,31,.08))}
.rewards-browser{position:relative;z-index:4}
.rewards-collection-page .rewards-collection-panel{
  width:min(1180px,94%)!important;
  margin:0 auto!important;
  padding:18px!important;
  background:rgba(255,250,243,.86)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:24px!important;
  box-shadow:0 20px 55px rgba(30,9,4,.22)!important;
  backdrop-filter:blur(16px) saturate(1.08)!important;
}
body.traditional .rewards-collection-page .rewards-collection-panel{
  background:rgba(244,250,255,.88)!important;
  box-shadow:0 20px 55px rgba(2,25,58,.22)!important;
}
@media(max-width:850px){
  body .page-view.rewards-page.rewards-collection-page{background-attachment:scroll!important;background-position:center top!important}
  .rewards-intro{min-height:calc(100vh - 130px);padding-bottom:96px}
}
@media(max-width:620px){
  .rewards-collection-page .rewards-collection-panel{width:100%!important}
  .rewards-explore-button{min-width:200px;padding:12px 28px 14px}
}

/* 1.5.64 - Rewards artwork rendered as real images, not only a CSS variable.
   This avoids a failed/relative CSS URL leaving the landing on the fallback color. */
body .page-view.rewards-page.rewards-collection-page{
  background-image:none!important;
  background-color:#4b130c!important;
}
body.traditional .page-view.rewards-page.rewards-collection-page{
  background-image:none!important;
  background-color:#082d4d!important;
}
body .page-view.rewards-page.rewards-collection-page>.rewards-scene-background{
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  width:100vw!important;
  height:100vh!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  pointer-events:none!important;
  user-select:none!important;
}
body .page-view.rewards-page.rewards-collection-page>.rewards-scene-background-hsk{display:block!important}
body .page-view.rewards-page.rewards-collection-page>.rewards-scene-background-tocfl{display:none!important}
body.traditional .page-view.rewards-page.rewards-collection-page>.rewards-scene-background-hsk{display:none!important}
body.traditional .page-view.rewards-page.rewards-collection-page>.rewards-scene-background-tocfl{display:block!important}
body .page-view.rewards-page.rewards-collection-page>.rewards-scene-veil{
  position:fixed!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
}
body .page-view.rewards-page.rewards-collection-page>.rewards-intro,
body .page-view.rewards-page.rewards-collection-page>.rewards-browser{
  position:relative!important;
  z-index:3!important;
}

/* ========================================================================
   1.5.65 — PROFIL / STATISTIQUES : DECORS DEDIES + MAITRISE MULTI-COMPETENCES
   Les anciens fonds generiques et stickers sont neutralises par le moteur
   module-background-page. Ces regles ne peignent aucun ancien decor.
   ======================================================================== */
.profile-page.module-background-page,
.statistics-page.module-background-page{
  background:none!important;
  background-image:none!important;
}
.profile-page.module-background-page>.mascot-sprinkles,
.statistics-page.module-background-page>.mascot-sprinkles{
  display:none!important;
}
.profile-page.module-background-page .profile-page-hero,
.profile-page.module-background-page .profile-metrics,
.profile-page.module-background-page>.content-panel,
.statistics-page.module-background-page .compact-hero,
.statistics-page.module-background-page .statistics-grid>.content-panel{
  background:rgba(255,250,242,.78)!important;
  border:1px solid rgba(255,255,255,.82)!important;
  box-shadow:0 16px 46px rgba(55,20,8,.14)!important;
  backdrop-filter:blur(11px) saturate(1.07)!important;
  -webkit-backdrop-filter:blur(11px) saturate(1.07)!important;
}
body.traditional .profile-page.module-background-page .profile-page-hero,
body.traditional .profile-page.module-background-page .profile-metrics,
body.traditional .profile-page.module-background-page>.content-panel,
body.traditional .statistics-page.module-background-page .compact-hero,
body.traditional .statistics-page.module-background-page .statistics-grid>.content-panel{
  background:rgba(247,252,255,.79)!important;
  box-shadow:0 16px 46px rgba(4,49,91,.14)!important;
}
.profile-page.module-background-page .profile-page-hero{width:min(1040px,72%)!important}
.profile-page.module-background-page .profile-metrics{width:min(1040px,72%)!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
.profile-page.module-background-page>.content-panel{width:min(1180px,78%)!important}
.statistics-page.module-background-page .compact-hero{width:min(900px,62%)!important}
.statistics-page.module-background-page .statistics-grid{width:min(1250px,82%)!important;grid-template-columns:minmax(0,1.55fr) minmax(280px,.7fr)!important}

.profile-level-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
.achievement-card{
  border:1px solid rgba(255,255,255,.78);
  border-radius:18px;
  background:rgba(255,255,255,.83);
  padding:15px;
  box-shadow:0 10px 26px rgba(55,20,8,.08);
}
body.traditional .achievement-card{background:rgba(250,253,255,.86);box-shadow:0 10px 26px rgba(4,49,91,.08)}
.achievement-card>header{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin:0 0 10px!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
.achievement-card>header>div:first-child{display:grid;gap:3px}
.achievement-level{font-size:12px;font-weight:900;letter-spacing:.03em;color:var(--theme-deep)}
.achievement-score{font-size:26px;line-height:1;color:var(--theme-deep)}
.achievement-score small{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--theme-muted)}
.achievement-ring{--achievement:0;width:54px;height:54px;flex:0 0 54px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--theme-accent) calc(var(--achievement)*1%),rgba(0,0,0,.08) 0);position:relative}
.achievement-ring::after{content:"";position:absolute;inset:6px;border-radius:50%;background:rgba(255,255,255,.95)}
.achievement-ring span{position:relative;z-index:1;font-size:10px;font-weight:900;color:var(--theme-deep)}
.achievement-progress{height:9px;border-radius:999px;overflow:hidden;background:rgba(0,0,0,.08);margin-bottom:12px}
.achievement-progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--theme-accent),var(--theme-accent-2))}
.achievement-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px}
.achievement-detail{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:9px;background:color-mix(in srgb,var(--theme-soft) 78%,transparent);font-size:9px}
.achievement-detail span{color:var(--theme-muted)}
.achievement-detail strong{color:var(--theme-deep);font-size:9px;white-space:nowrap}
.statistics-levels{display:grid!important;grid-template-columns:1fr!important;gap:12px!important}
.statistics-levels .achievement-card.statistics{padding:14px!important}
.statistics-levels .achievement-card.statistics .achievement-details{grid-template-columns:repeat(3,minmax(0,1fr))}
.statistics-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.stat-summary-card{background:rgba(255,255,255,.78)!important}
body.traditional .stat-summary-card{background:rgba(248,252,255,.82)!important}

@media(max-width:1180px){
  .profile-page.module-background-page .profile-page-hero,
  .profile-page.module-background-page .profile-metrics,
  .profile-page.module-background-page>.content-panel,
  .statistics-page.module-background-page .compact-hero,
  .statistics-page.module-background-page .statistics-grid{width:100%!important}
  .statistics-page.module-background-page .statistics-grid{grid-template-columns:1fr!important}
}
@media(max-width:780px){
  .profile-page.module-background-page .profile-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .profile-level-grid{grid-template-columns:1fr!important}
  .achievement-details,.statistics-levels .achievement-card.statistics .achievement-details{grid-template-columns:1fr!important}
}
.achievement-rule-note{margin:4px 0 12px;color:var(--theme-muted);font-size:9px;line-height:1.45}

/* ========================================================================
   1.5.66 — PROFIL / STATISTIQUES : RECTANGLES NON ARRONDIS
   Les conteneurs de contenu restent rectangulaires afin de ne pas rogner
   leur surface utile sur les nouveaux fonds illustrés.
   ======================================================================== */
.profile-page.module-background-page .profile-page-hero,
.profile-page.module-background-page .profile-metrics,
.profile-page.module-background-page>.content-panel,
.profile-page.module-background-page .profile-metric,
.profile-page.module-background-page .achievement-card,
.profile-page.module-background-page .achievement-detail,
.statistics-page.module-background-page .compact-hero,
.statistics-page.module-background-page .statistics-grid>.content-panel,
.statistics-page.module-background-page .achievement-card,
.statistics-page.module-background-page .achievement-detail,
.statistics-page.module-background-page .stat-summary-card{
  border-radius:0!important;
}

/* ========================================================================
   Lóngmò 1.5.68 — Révision intelligente
   ======================================================================== */
.smart-review-page{padding:18px 0 42px}
.smart-review-page.module-background-page{color:#24150f}
.smart-review-hero{width:min(1080px,92%);margin:0 auto 16px;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid rgba(255,255,255,.82);background:rgba(255,250,244,.90);box-shadow:0 20px 52px rgba(52,21,8,.18);backdrop-filter:blur(10px)}
body.traditional .smart-review-hero{background:rgba(246,252,255,.91);box-shadow:0 20px 52px rgba(4,51,92,.18)}
.smart-review-hero h2{margin:0;font:900 clamp(28px,3.4vw,44px)/1.05 Georgia,"Noto Serif SC",serif;color:var(--theme-deep)}
.smart-review-hero p{max-width:760px;margin:8px 0 0;font-size:13px;color:var(--theme-muted)}
.smart-review-hero-count{flex:0 0 120px;min-height:96px;display:grid;place-items:center;align-content:center;background:rgba(255,255,255,.84);border:1px solid var(--panel-border)}
.smart-review-hero-count strong{font:900 36px/1 Georgia,"Noto Serif SC",serif;color:var(--theme-accent)}
.smart-review-hero-count span{margin-top:6px;font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.08em;color:var(--theme-muted)}
.smart-review-source-grid{width:min(1080px,92%);margin:0 auto 16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.smart-review-source{display:grid;grid-template-columns:42px 58px 1fr;align-items:center;gap:10px;min-height:80px;padding:12px 14px;border:1px solid rgba(255,255,255,.82);background:rgba(255,250,244,.88);box-shadow:0 12px 30px rgba(54,20,8,.13);backdrop-filter:blur(9px)}
body.traditional .smart-review-source{background:rgba(246,252,255,.9);box-shadow:0 12px 30px rgba(4,61,105,.13)}
.smart-review-source>span{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--panel-border);background:rgba(255,255,255,.72);font:900 19px/1 Georgia,serif;color:var(--theme-accent)}
.smart-review-source strong{display:block;font-size:24px;color:var(--theme-deep)}
.smart-review-source small{display:block;font-size:10px;font-weight:850;color:var(--theme-muted)}
.smart-review-source p{margin:0;font-size:10px;line-height:1.35;color:var(--theme-muted)}
.smart-review-panel{width:min(1080px,92%)!important;margin:0 auto!important;border-radius:0!important;background:rgba(255,250,244,.92)!important}
body.traditional .smart-review-panel{background:rgba(246,252,255,.93)!important}
.smart-review-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-bottom:14px;border-bottom:1px solid var(--panel-border)}
.smart-review-toolbar h3{margin:0;color:var(--theme-deep);font:900 24px/1.1 Georgia,"Noto Serif SC",serif}.smart-review-toolbar p{margin:6px 0 0;color:var(--theme-muted);font-size:12px}.smart-review-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.smart-review-filters{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}.smart-review-filters button{border:1px solid var(--panel-border);background:rgba(255,255,255,.72);color:var(--theme-deep);padding:8px 11px;font-weight:850;cursor:pointer}.smart-review-filters button.active{background:var(--theme-deep);color:#fff}.smart-review-filters b{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:4px;padding:0 5px;border-radius:999px;background:rgba(255,255,255,.16);font-size:10px}
.smart-review-list{display:grid;gap:8px}.smart-review-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border:1px solid var(--panel-border);background:rgba(255,255,255,.7)}.smart-review-rank{display:grid;place-items:center;width:38px;height:38px;background:var(--theme-deep);color:#fff;font-weight:900;font-size:12px}.smart-review-item-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.smart-review-tag{font-size:10px;font-weight:900;color:var(--theme-accent);text-transform:uppercase;letter-spacing:.05em}.smart-review-priority{font-size:9px;font-weight:850;color:var(--theme-muted)}.smart-review-item h4{margin:4px 0 2px;font-size:18px;color:var(--theme-deep)}.smart-review-item p{margin:0;color:var(--theme-muted);font-size:11px}.smart-review-open{white-space:nowrap}.smart-review-empty{padding:34px 20px;text-align:center;border:1px dashed var(--panel-border);background:rgba(255,255,255,.55)}.smart-review-empty strong{display:block;color:var(--theme-deep);font-size:18px}.smart-review-empty p{margin:6px 0 0;color:var(--theme-muted);font-size:12px}
.smart-review-pagination{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:14px}.smart-review-pagination[hidden]{display:none}.smart-review-pagination>span{min-width:56px;text-align:center;color:var(--theme-muted);font-size:12px;font-weight:800}.smart-review-pagination button:disabled{opacity:.45;cursor:not-allowed}
body[data-current-view="review"] .teacher-buddy{display:none!important}
@media(max-width:900px){.smart-review-source-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.smart-review-toolbar{align-items:stretch;flex-direction:column}.smart-review-actions{justify-content:flex-start}.smart-review-item{grid-template-columns:38px minmax(0,1fr)}.smart-review-item .smart-review-open{grid-column:2;justify-self:start}}
@media(max-width:600px){.smart-review-page{padding-top:8px}.smart-review-hero{width:100%;padding:17px;align-items:flex-start}.smart-review-hero-count{flex-basis:88px;min-height:78px}.smart-review-source-grid,.smart-review-panel{width:100%!important}.smart-review-source-grid{grid-template-columns:1fr 1fr}.smart-review-source{grid-template-columns:34px 1fr}.smart-review-source p{grid-column:1/-1}.smart-review-panel{padding:14px!important}}


/* ========================================================================
   Lóngmò 1.5.76 — STATISTIQUES SANS FILTRE EXTÉRIEUR
   Le décor dédié reste visible sans voile/verre dépoli derrière les cartes.
   Les cartes de niveau et de résumé restent intactes pour la lisibilité.
   ======================================================================== */
.module-backdrop[data-page="statistics"]::after{
  display:none!important;
  content:none!important;
}
.statistics-page.module-background-page .statistics-grid>.content-panel{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body.traditional .statistics-page.module-background-page .statistics-grid>.content-panel{
  background:transparent!important;
  box-shadow:none!important;
}


/* ========================================================================
   Lóngmò 1.5.77 — STATISTIQUES : RETRAIT DU CERCLE DANS LE COIN
   On conserve les cartes, le fond et les données. Seul l'indicateur circulaire
   redondant à droite des cartes HSK/TOCFL est masqué afin de dégager le décor.
   ======================================================================== */
.statistics-levels .achievement-card.statistics .achievement-ring{
  display:none!important;
}
.statistics-levels .achievement-card.statistics>header{
  justify-content:flex-start!important;
}

/* --- Lóngmò 1.6.05 · Grammaire priorité 1 : progression fiable --- */
.grammar-progress-summary{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0 12px}
.grammar-progress-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border:1px solid var(--panel-border);border-radius:999px;background:rgba(255,255,255,.72);font-size:9px;font-weight:800;color:var(--theme-muted)}
.grammar-progress-chip b{font-size:10px;color:var(--theme-deep)}
.grammar-progress-chip.status-mastered{background:#e9f6ec;border-color:#b7d9bf;color:#356541}.grammar-progress-chip.status-review{background:#fff0e8;border-color:#efc4ae;color:#8a4b2d}.grammar-progress-chip.status-in_progress{background:var(--theme-soft);color:var(--theme-deep)}
.grammar-progress-chip.status-acquired{background:#edf5fc;border-color:#b9d3ed;color:#285c80}
.grammar-point{grid-template-columns:42px minmax(0,1fr) 24px!important}
.grammar-point-status{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-style:normal;font-size:11px;font-weight:900;background:rgba(255,255,255,.68);border:1px solid var(--panel-border)}
.grammar-point-status.status-new{color:var(--theme-muted)}.grammar-point-status.status-in_progress{color:var(--theme-accent)}.grammar-point-status.status-mastered{color:#2e7141;background:#e5f5e9;border-color:#b4d6bd}.grammar-point-status.status-review{color:#9a4f2d;background:#fff0e8;border-color:#e8b99f}
.grammar-point-status.status-acquired{color:#285c80;background:#edf5fc;border-color:#b9d3ed}
.grammar-point.active .grammar-point-status{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);color:#fff}
.grammar-lesson-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.grammar-status-badge{display:inline-flex;align-items:center;min-height:24px;padding:4px 8px;border-radius:999px;border:1px solid var(--panel-border);font-size:9px;font-weight:900;background:rgba(255,255,255,.75);color:var(--theme-muted)}
.grammar-status-badge.status-in_progress{background:var(--theme-soft);color:var(--theme-deep)}.grammar-status-badge.status-mastered{background:#e5f5e9;border-color:#b4d6bd;color:#2e7141}.grammar-status-badge.status-review{background:#fff0e8;border-color:#e8b99f;color:#9a4f2d}
.grammar-status-badge.status-acquired{background:#edf5fc;border-color:#b9d3ed;color:#285c80}
.grammar-why{margin-top:10px;border:1px solid var(--panel-border);border-radius:12px;background:rgba(255,255,255,.8);padding:8px 12px;color:var(--theme-deep)}
.grammar-why summary{cursor:pointer;font-weight:800}.grammar-why p{margin:8px 0 0;line-height:1.5}
.grammar-feedback-next{display:block;margin-top:10px;min-height:36px;padding:7px 14px;border:1px solid var(--theme-accent);border-radius:12px;background:var(--theme-soft);color:var(--theme-deep);font-weight:800;cursor:pointer}
.grammar-status-action{margin-left:auto;border:1px solid var(--panel-border);border-radius:999px;background:rgba(255,255,255,.86);color:var(--theme-deep);padding:5px 9px;font:800 9px/1 inherit;cursor:pointer}.grammar-status-action:hover{border-color:var(--theme-accent);transform:translateY(-1px)}
.grammar-rule-question{display:block;padding:15px 16px;border-radius:15px;background:rgba(255,255,255,.9);border:1px solid var(--panel-border);font:800 13px/1.55 inherit;color:var(--theme-deep);text-align:left}
.grammar-quiz-answers.grammar-rule-options button{font:800 10.5px/1.35 inherit!important;text-align:left!important;padding:12px!important}
@media(max-width:650px){.grammar-status-action{width:100%;margin-left:0}.grammar-progress-summary{gap:5px}.grammar-progress-chip{flex:1 1 calc(50% - 5px);justify-content:center}}

/* 1.6.06 — Grammaire priorité 2 : contrastes et entraînement multi-format. */
.grammar-pedagogy{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);gap:10px;margin:14px 0}
.grammar-pedagogy[hidden]{display:none!important}
.grammar-comparison-card,.grammar-error-card{border:1px solid var(--panel-border);border-radius:14px;padding:12px 13px;background:rgba(255,255,255,.72)}
.grammar-comparison-card>span,.grammar-error-card>span{display:block;margin-bottom:4px;font-size:8px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;color:var(--theme-accent)}
.grammar-comparison-card h4{margin:0 0 8px;font-size:15px;color:var(--theme-deep)}
.grammar-comparison-row{display:grid;grid-template-columns:minmax(64px,auto) 1fr;gap:10px;padding:7px 0;border-top:1px solid color-mix(in srgb,var(--panel-border) 70%,transparent)}
.grammar-comparison-row:first-child{border-top:0}.grammar-comparison-row strong{font:900 15px/1.25 "Noto Serif SC","Songti SC",serif;color:var(--theme-deep)}.grammar-comparison-row span{font-size:10px;line-height:1.45;color:var(--theme-ink)}
.grammar-error-card{background:color-mix(in srgb,#fff0e8 72%,#fff)}.grammar-error-card p{margin:5px 0 0;font-size:10px;line-height:1.5;color:#754126}
.grammar-practice-launch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}.grammar-practice-launch span{font-size:9px;font-weight:800;color:var(--theme-muted)}.grammar-practice-launch button:disabled{opacity:.48;cursor:not-allowed}
.grammar-quiz-type{display:inline-flex;width:max-content;padding:4px 7px;border-radius:999px;background:var(--theme-soft);color:var(--theme-accent);font-size:8px;font-weight:950;letter-spacing:.04em;text-transform:uppercase}
.grammar-quiz-answers.grammar-example-options button{font:800 14px/1.45 "Noto Serif SC","Songti SC",serif!important;text-align:left!important}
@media(max-width:760px){.grammar-pedagogy{grid-template-columns:1fr}.grammar-comparison-row{grid-template-columns:72px 1fr}.grammar-practice-launch .secondary-cta{width:100%}}

/* 1.6.07 — Grammaire priorité 3 : Writing → Grammaire, SRS et mission de Shīfu. */
.grammar-personal-tools{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:12px;margin:8px 0 14px}
.grammar-daily-mission,.grammar-personal-review{border:1px solid var(--panel-border);border-radius:18px;background:rgba(255,255,255,.78);box-shadow:0 9px 24px rgba(35,48,71,.06)}
.grammar-daily-mission{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px}
.grammar-mission-mascot{width:58px;height:58px;border-radius:17px;overflow:hidden;background:var(--theme-soft);border:1px solid var(--panel-border)}
.grammar-mission-mascot img{width:100%;height:100%;object-fit:cover;display:block}
.grammar-mission-main>span,.grammar-personal-head>span{display:block;font-size:8px;font-weight:950;letter-spacing:.09em;text-transform:uppercase;color:var(--theme-accent)}
.grammar-mission-main>strong,.grammar-personal-head>strong{display:block;margin-top:2px;font-size:13px;color:var(--theme-deep)}
.grammar-mission-main>p,.grammar-personal-head>p{margin:4px 0 0;font-size:9px;line-height:1.45;color:var(--theme-muted)}
.grammar-mission-points{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.grammar-mission-chip{display:inline-flex;gap:5px;align-items:center;max-width:100%;padding:5px 7px;border:1px solid var(--panel-border);border-radius:999px;background:#fff;font-size:8px;font-weight:800;color:var(--theme-ink)}
.grammar-mission-chip b{color:var(--theme-accent)}.grammar-mission-chip em{font-style:normal;color:var(--theme-muted)}
.grammar-mission-chip.complete{background:#e9f6ec;border-color:#b7d9bf;color:#356541}.grammar-mission-chip.complete b,.grammar-mission-chip.complete em{color:#356541}
.grammar-mission-track{height:6px;margin-top:9px;border-radius:999px;background:rgba(110,125,150,.14);overflow:hidden}.grammar-mission-track i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--theme-accent),var(--theme-deep));transition:width .25s ease}
.grammar-daily-mission>.primary-cta{white-space:nowrap;align-self:center}.grammar-daily-mission>.primary-cta:disabled{opacity:.58;cursor:default}
.grammar-personal-review{padding:13px}.grammar-personal-list{display:grid;gap:6px;margin-top:9px;max-height:190px;overflow:auto}
.grammar-personal-item{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;width:100%;text-align:left;padding:8px 9px;border:1px solid var(--panel-border);border-radius:12px;background:rgba(255,255,255,.82);cursor:pointer;color:var(--theme-ink)}
.grammar-personal-item:hover{border-color:var(--theme-accent);transform:translateY(-1px)}.grammar-personal-item>span{font-size:7.5px;font-weight:900;color:var(--theme-accent);text-transform:uppercase;letter-spacing:.04em}.grammar-personal-item>strong{font-size:10px;line-height:1.25;color:var(--theme-deep)}.grammar-personal-item>em{font-style:normal;font-size:8px;line-height:1.35;color:var(--theme-muted)}
.grammar-personal-empty{padding:12px;border-radius:12px;background:#e9f6ec;border:1px solid #b7d9bf;color:#356541;font-size:9px;font-weight:800;text-align:center}
@media(max-width:900px){.grammar-personal-tools{grid-template-columns:1fr}.grammar-daily-mission{grid-template-columns:52px minmax(0,1fr)}.grammar-daily-mission>.primary-cta{grid-column:1/-1;width:100%}}
@media(max-width:560px){.grammar-daily-mission{grid-template-columns:1fr}.grammar-mission-mascot{display:none}.grammar-personal-tools{gap:9px}.grammar-personal-list{max-height:230px}}

/* ========================================================================
   Lóngmò 1.6.10 — Dojo de Shīfu : univers visuel
   ======================================================================== */
.grammar-dojo-launcher{display:grid;grid-template-columns:minmax(190px,240px) minmax(0,1fr) auto;gap:15px;align-items:center;margin:10px 0 14px;padding:12px;border:1px solid rgba(169,126,57,.24);border-radius:22px;background:linear-gradient(135deg,rgba(255,249,232,.96),rgba(255,255,255,.88));box-shadow:0 14px 34px rgba(70,43,17,.1);overflow:hidden;position:relative}
body.traditional .grammar-dojo-launcher{background:linear-gradient(135deg,rgba(240,248,255,.95),rgba(255,255,255,.88));border-color:rgba(46,92,132,.2)}
.grammar-dojo-launcher::after{content:'道';position:absolute;right:18%;top:-27px;font:900 100px/1 Georgia,"Noto Serif SC",serif;color:var(--theme-accent);opacity:.035;pointer-events:none}
.grammar-dojo-launcher-art{width:100%;aspect-ratio:16/9;border-radius:17px;overflow:hidden;border:1px solid rgba(255,255,255,.75);box-shadow:0 9px 22px rgba(55,34,15,.13);background:var(--theme-soft)}.grammar-dojo-launcher-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.grammar-dojo-launcher-copy>span{display:block;font-size:8px;font-weight:950;letter-spacing:.1em;text-transform:uppercase;color:var(--theme-accent)}.grammar-dojo-launcher-copy>strong{display:block;margin-top:3px;font:900 17px/1.15 Georgia,"Noto Serif SC",serif;color:var(--theme-deep)}.grammar-dojo-launcher-copy>p{margin:5px 0 0;font-size:10px;line-height:1.45;color:var(--theme-muted)}
.grammar-dojo-launcher-stats{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.grammar-dojo-launcher-stats span{padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid var(--panel-border);font-size:8px;font-weight:800;color:var(--theme-muted)}
.grammar-dojo-launcher-actions{display:grid;gap:7px;min-width:185px}.grammar-dojo-launcher-actions button{width:100%}.grammar-dojo-launcher-actions button:disabled{opacity:.46;cursor:not-allowed;transform:none}
.grammar-dojo,.grammar-duel{margin:12px 0 17px;border:1px solid var(--panel-border);border-radius:22px;background:rgba(255,253,247,.95);box-shadow:0 18px 42px rgba(53,34,17,.12);overflow:hidden}.grammar-dojo[hidden],.grammar-duel[hidden]{display:none!important}body.traditional .grammar-dojo,body.traditional .grammar-duel{background:rgba(247,252,255,.96)}
.grammar-dojo-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:15px 17px 13px;border-bottom:1px solid var(--panel-border);background:linear-gradient(90deg,var(--theme-soft),rgba(255,255,255,.68))}.grammar-dojo-head span{display:block;font-size:8px;font-weight:950;letter-spacing:.1em;text-transform:uppercase;color:var(--theme-accent)}.grammar-dojo-head h3{margin:3px 0 0;font:900 20px/1.15 Georgia,"Noto Serif SC",serif;color:var(--theme-deep)}.grammar-dojo-head p{margin:5px 0 0;font-size:9px;color:var(--theme-muted)}
.grammar-dojo-close{flex:0 0 auto;width:31px;height:31px;border-radius:50%;border:1px solid var(--panel-border);background:rgba(255,255,255,.86);color:var(--theme-deep);font-size:19px;line-height:1;cursor:pointer}.grammar-dojo-close:hover{border-color:var(--theme-accent);transform:rotate(4deg)}
.grammar-dojo-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:11px 14px;background:rgba(255,255,255,.55);border-bottom:1px solid var(--panel-border)}.grammar-dojo-steps button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:35px;padding:6px 8px;border:1px solid var(--panel-border);border-radius:11px;background:rgba(255,255,255,.82);color:var(--theme-muted);font-size:9px;cursor:pointer}.grammar-dojo-steps button span{font-size:14px}.grammar-dojo-steps button strong{font-weight:900}.grammar-dojo-steps button.active{background:var(--theme-deep);border-color:var(--theme-deep);color:#fff;box-shadow:0 7px 16px rgba(28,42,58,.14)}.grammar-dojo-steps button.done:not(.active){background:#e8f5eb;border-color:#b8d9c0;color:#2f6b40}.grammar-dojo-steps button:disabled{opacity:.38;cursor:not-allowed}
.grammar-dojo-stage{padding:16px}.dojo-stage-intro>span,.dojo-observe-grid span,.dojo-mini-contrast>span,.dojo-answer-zone>small,.dojo-bank>small,.dojo-write>span,.dojo-model>span{display:block;font-size:8px;font-weight:950;letter-spacing:.07em;text-transform:uppercase;color:var(--theme-accent)}.dojo-stage-intro h4{margin:4px 0 4px;font:900 18px/1.2 Georgia,"Noto Serif SC",serif;color:var(--theme-deep)}.dojo-stage-intro p{margin:0;color:var(--theme-muted);font-size:10px;line-height:1.45}.dojo-stage-intro p strong{color:var(--theme-deep);font-size:13px}
.dojo-scene{display:grid;grid-template-columns:76px 102px minmax(0,1fr);gap:11px;align-items:center;min-height:132px;padding:13px;border:1px solid var(--panel-border);border-radius:18px;background:radial-gradient(circle at 18% 25%,rgba(255,227,153,.36),transparent 34%),linear-gradient(145deg,rgba(255,255,255,.92),var(--theme-soft));overflow:hidden}.dojo-scene-icon{font-size:42px;text-align:center;filter:drop-shadow(0 5px 6px rgba(0,0,0,.08))}.dojo-scene img{width:100px;height:100px;object-fit:contain;align-self:end}.dojo-speech{position:relative;padding:12px 14px;border:1px solid var(--panel-border);border-radius:16px;background:rgba(255,255,255,.92)}.dojo-speech::before{content:'';position:absolute;left:-8px;top:29px;width:14px;height:14px;background:inherit;border-left:1px solid var(--panel-border);border-bottom:1px solid var(--panel-border);transform:rotate(45deg)}.dojo-speech small{display:block;color:var(--theme-muted);font-size:8px;font-weight:850}.dojo-speech strong{display:block;margin-top:4px;color:var(--theme-deep);font:900 22px/1.35 "Noto Serif SC",Georgia,serif}.dojo-speech em{display:block;margin-top:3px;color:var(--theme-accent);font-size:10px;font-style:normal}.dojo-speech p{margin:3px 0 0;color:var(--theme-muted);font-size:10px}
.dojo-observe-grid{display:grid;grid-template-columns:minmax(210px,.7fr) minmax(0,1.3fr);gap:9px;margin-top:10px}.dojo-observe-grid>div{padding:11px 12px;border-radius:14px;border:1px solid var(--panel-border);background:rgba(255,255,255,.72)}.dojo-observe-grid strong{display:block;margin-top:4px;font-size:12px;line-height:1.45;color:var(--theme-deep)}.dojo-observe-grid p{margin:4px 0 0;font-size:10px;line-height:1.48;color:var(--theme-muted)}.dojo-mini-contrast{margin-top:9px;padding:10px 12px;border-radius:14px;border:1px dashed rgba(166,101,50,.3);background:rgba(255,245,226,.58)}.dojo-mini-contrast strong{display:block;margin-top:3px;color:var(--theme-deep);font-size:11px}.dojo-mini-contrast p{margin:3px 0 0;color:var(--theme-muted);font-size:9px;line-height:1.45}
.dojo-answer-zone,.dojo-bank{margin-top:11px;padding:12px;border:1px dashed var(--panel-border);border-radius:16px;background:rgba(255,255,255,.64);min-height:78px}.dojo-answer-zone{border-width:2px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(248,244,235,.72))}.dojo-answer-zone.has-tokens{border-style:solid}.dojo-token-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center;min-height:38px;margin-top:7px}.dojo-token{border:1px solid rgba(150,109,48,.28);border-radius:10px;background:#fffdf8;color:var(--theme-deep);padding:8px 11px;font:900 15px/1 "Noto Serif SC",Georgia,serif;box-shadow:0 4px 10px rgba(60,42,20,.06);cursor:grab;transition:transform .15s ease,box-shadow .15s ease}.dojo-token:hover{transform:translateY(-2px);box-shadow:0 7px 14px rgba(60,42,20,.1)}.dojo-token.answer{background:var(--theme-soft);border-color:var(--theme-accent)}.dojo-placeholder{color:var(--theme-muted);font-size:9px;font-style:italic}
.grammar-dojo-feedback{min-height:31px;margin-top:10px;padding:8px 10px;border-radius:11px;background:rgba(255,255,255,.55);font-size:9px;line-height:1.4;color:var(--theme-muted)}.grammar-dojo-feedback.good{background:#e8f6eb;border:1px solid #b9d9c1;color:#2e6840;font-weight:850}.grammar-dojo-feedback.bad{background:#fff0eb;border:1px solid #edc4b5;color:#8b472e;font-weight:850}
.dojo-stage-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}.dojo-transform-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.dojo-transform-options button,.grammar-duel-options button{padding:11px 12px;border:1px solid var(--panel-border);border-radius:13px;background:rgba(255,255,255,.88);color:var(--theme-deep);font:850 11px/1.4 inherit;text-align:left;cursor:pointer}.dojo-transform-options button:hover,.grammar-duel-options button:hover{border-color:var(--theme-accent);transform:translateY(-1px)}.dojo-transform-options button.good,.grammar-duel-options button.good{background:#e7f5ea;border-color:#acd0b6;color:#2e6840}.dojo-transform-options button.bad,.grammar-duel-options button.bad{background:#fff0eb;border-color:#e5b7a7;color:#88442e}
.dojo-write{display:grid;gap:6px;margin-top:12px}.dojo-write textarea{width:100%;resize:vertical;min-height:88px;padding:12px 13px;border:1px solid var(--panel-border);border-radius:14px;background:rgba(255,255,255,.91);color:var(--theme-deep);font:800 17px/1.55 "Noto Serif SC",sans-serif;outline:none}.dojo-write textarea:focus{border-color:var(--theme-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent) 12%,transparent)}.dojo-model{margin-top:10px;padding:11px 12px;border-radius:14px;background:#eaf5ed;border:1px solid #bcd7c3}.dojo-model strong{display:block;margin-top:4px;color:#2d5f3b;font:900 16px/1.4 "Noto Serif SC",serif}.dojo-model small{display:block;margin-top:3px;color:#547360;font-size:8px}
.grammar-dojo-finish{text-align:center;padding:24px 16px}.dojo-finish-seal{width:62px;height:62px;margin:0 auto 9px;border-radius:50%;display:grid;place-items:center;background:var(--theme-deep);color:#fff;font:900 31px/1 Georgia,"Noto Serif SC",serif;box-shadow:0 11px 24px rgba(40,35,30,.16)}.grammar-dojo-finish>span{display:block;color:var(--theme-accent);font-size:9px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.grammar-dojo-finish h4{max-width:580px;margin:6px auto;font:900 20px/1.25 Georgia,"Noto Serif SC",serif;color:var(--theme-deep)}.grammar-dojo-finish p{max-width:620px;margin:0 auto;color:var(--theme-muted);font-size:10px;line-height:1.55}.grammar-dojo-finish-actions{display:flex;justify-content:center;gap:8px;margin-top:15px;flex-wrap:wrap}
.grammar-duel-body{padding:16px}.grammar-duel-card>span{display:block;font-size:8px;font-weight:950;color:var(--theme-accent);text-transform:uppercase;letter-spacing:.07em}.grammar-duel-card>p{margin:6px 0 12px;font:850 15px/1.45 inherit;color:var(--theme-deep)}.grammar-duel-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.grammar-duel-options button{font-size:14px;font-weight:950;text-align:center}.grammar-duel-body #grammarDuelFeedback{min-height:30px;margin-top:10px;color:var(--theme-muted);font-size:9px;font-weight:800}.grammar-duel-finish{text-align:center;padding:20px}.grammar-duel-finish strong{font-size:21px;color:var(--theme-deep)}.grammar-duel-finish p{color:var(--theme-muted);font-size:10px}.grammar-duel-finish button{margin-top:8px}
.dojo-stage-visual{position:relative;width:100%;height:clamp(175px,28vw,300px);margin:0 0 13px;border-radius:18px;overflow:hidden;border:1px solid var(--panel-border);background:var(--theme-soft);box-shadow:0 10px 24px rgba(48,31,14,.1)}.dojo-stage-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.03) 48%,rgba(36,25,15,.11));pointer-events:none}.dojo-stage-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 44%;transition:transform .35s ease}.dojo-stage-visual:hover img{transform:scale(1.012)}.dojo-visual-observe img{object-position:center 42%}.dojo-visual-build img{object-position:center 47%}.dojo-visual-transform img{object-position:center 48%}.dojo-visual-produce img{object-position:center 45%}.dojo-visual-duel img{object-position:center 48%}.grammar-duel-body>.dojo-stage-visual{margin-bottom:14px}.grammar-dojo-finish>.dojo-stage-visual{max-width:760px;height:clamp(170px,25vw,270px);margin:0 auto 16px}.grammar-dojo.dojo-happy .dojo-stage-visual{animation:longmoDojoGlow .7s ease}@keyframes longmoDojoGlow{0%,100%{box-shadow:0 10px 24px rgba(48,31,14,.1)}45%{box-shadow:0 12px 30px rgba(201,151,54,.28)}}
.grammar-dojo.dojo-happy .dojo-scene img,.grammar-dojo.dojo-happy .dojo-finish-seal{animation:longmoDojoHappy .62s ease}.grammar-dojo.dojo-oops .dojo-scene,.grammar-dojo.dojo-oops .dojo-stage-intro{animation:longmoDojoOops .34s ease}@keyframes longmoDojoHappy{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(-13px) rotate(-4deg)}65%{transform:translateY(-5px) rotate(4deg)}}@keyframes longmoDojoOops{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:850px){.grammar-dojo-launcher{grid-template-columns:180px minmax(0,1fr)}.grammar-dojo-launcher-actions{grid-column:1/-1;grid-template-columns:1fr 1fr}.dojo-scene{grid-template-columns:62px 82px minmax(0,1fr)}.dojo-scene img{width:80px;height:80px}.dojo-observe-grid{grid-template-columns:1fr}.dojo-transform-options,.grammar-duel-options{grid-template-columns:1fr}}
@media(max-width:560px){.grammar-dojo-launcher{grid-template-columns:1fr;padding:10px}.grammar-dojo-launcher-art{aspect-ratio:16/8;max-height:210px}.grammar-dojo-launcher-art img{object-position:center 43%}.grammar-dojo-launcher-actions{grid-template-columns:1fr}.grammar-dojo-steps{gap:4px;padding:8px}.grammar-dojo-steps button{display:grid;gap:2px;padding:5px 2px}.grammar-dojo-steps button strong{font-size:7.5px}.grammar-dojo-stage{padding:12px}.dojo-scene{grid-template-columns:54px minmax(0,1fr);padding:10px}.dojo-scene-icon{font-size:32px}.dojo-scene img{display:none}.dojo-speech::before{display:none}.dojo-speech strong{font-size:18px}.dojo-stage-actions{display:grid;grid-template-columns:1fr}.dojo-stage-actions button{width:100%}.dojo-token{font-size:14px;padding:8px 9px}.dojo-stage-visual{height:150px;border-radius:14px;margin-bottom:10px}}


/* ========================================================================
   Lóngmò 1.6.11 — Dojo : réactions vivantes des doudous
   ======================================================================== */
.dojo-reaction-badge,.dojo-reaction-sparkles{position:absolute;z-index:3;pointer-events:none;opacity:0}
.dojo-reaction-badge{left:50%;top:14px;transform:translate(-50%,-8px) scale(.92);padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.86);box-shadow:0 8px 22px rgba(45,30,14,.16);font:950 11px/1.1 "Noto Serif SC",Georgia,serif;color:var(--theme-deep);white-space:nowrap}
.dojo-reaction-sparkles{inset:0;display:grid;place-items:center;font-size:42px;letter-spacing:28px;color:#ffe08a;text-shadow:0 3px 12px rgba(123,75,10,.28)}
.grammar-dojo.dojo-happy .dojo-reaction-badge::before{content:'太好了！ · Très bien'}
.grammar-dojo.dojo-oops .dojo-reaction-badge::before{content:'再试一次 · Réessaie'}
.grammar-dojo.dojo-transition .dojo-reaction-badge::before{content:'下一步 · Étape suivante'}
.grammar-dojo.dojo-complete .dojo-reaction-badge::before{content:'道场完成 · Mission accomplie'}
.grammar-dojo.dojo-happy .dojo-reaction-badge,.grammar-dojo.dojo-oops .dojo-reaction-badge,.grammar-dojo.dojo-transition .dojo-reaction-badge,.grammar-dojo.dojo-complete .dojo-reaction-badge{animation:longmoDojoBadge .85s ease both}
.grammar-dojo.dojo-happy .dojo-reaction-sparkles,.grammar-dojo.dojo-complete .dojo-reaction-sparkles{animation:longmoDojoSparkles .9s ease both}
.grammar-dojo.dojo-happy .dojo-stage-visual img,.grammar-dojo.dojo-complete .dojo-stage-visual img{animation:longmoDojoSceneCelebrate .82s cubic-bezier(.2,.8,.2,1)}
.grammar-dojo.dojo-oops .dojo-stage-visual img{animation:longmoDojoSceneOops .48s ease}
.grammar-dojo.dojo-oops .dojo-stage-visual{box-shadow:0 10px 26px rgba(165,85,55,.16)}
.grammar-dojo.dojo-transition .dojo-stage-visual{animation:longmoDojoStageEnter .55s cubic-bezier(.2,.8,.2,1)}
.grammar-dojo.dojo-transition .grammar-dojo-stage>article{animation:longmoDojoContentEnter .48s ease}
@keyframes longmoDojoBadge{0%{opacity:0;transform:translate(-50%,-12px) scale(.9)}22%,72%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-4px) scale(.98)}}
@keyframes longmoDojoSparkles{0%,100%{opacity:0;transform:scale(.82) rotate(-4deg)}35%{opacity:.9;transform:scale(1.08) rotate(2deg)}70%{opacity:.38;transform:scale(1.16) rotate(5deg)}}
@keyframes longmoDojoSceneCelebrate{0%,100%{transform:scale(1)}35%{transform:scale(1.025) translateY(-3px)}62%{transform:scale(1.012) translateY(0)}}
@keyframes longmoDojoSceneOops{0%,100%{transform:translateX(0) scale(1)}20%{transform:translateX(-4px) scale(.997)}40%{transform:translateX(4px) scale(.997)}60%{transform:translateX(-3px) scale(.998)}80%{transform:translateX(2px) scale(.999)}}
@keyframes longmoDojoStageEnter{0%{opacity:.72;transform:translateY(7px) scale(.992)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes longmoDojoContentEnter{0%{opacity:.72;transform:translateY(5px)}100%{opacity:1;transform:translateY(0)}}
.grammar-duel.duel-good .dojo-stage-visual{animation:longmoDuelGood .72s ease}.grammar-duel.duel-oops .dojo-stage-visual{animation:longmoDojoOops .38s ease}
.grammar-duel.duel-good .dojo-reaction-badge::before{content:'正确！ · Bien joué'}.grammar-duel.duel-oops .dojo-reaction-badge::before{content:'再想一想 · Regarde encore'}.grammar-duel.duel-victory .dojo-reaction-badge::before{content:'🏆 对决完成 · Duel maîtrisé'}.grammar-duel.duel-encourage .dojo-reaction-badge::before{content:'继续加油 · On recommence'}
.grammar-duel.duel-good .dojo-reaction-badge,.grammar-duel.duel-oops .dojo-reaction-badge{animation:longmoDojoBadge .85s ease both}.grammar-duel.duel-victory .dojo-reaction-badge,.grammar-duel.duel-encourage .dojo-reaction-badge{opacity:1;transform:translate(-50%,0) scale(1)}
.grammar-duel.duel-good .dojo-reaction-sparkles,.grammar-duel.duel-victory .dojo-reaction-sparkles{animation:longmoDojoSparkles 1s ease both}
.grammar-duel.duel-victory .dojo-stage-visual{box-shadow:0 14px 34px rgba(203,151,50,.25);animation:longmoDuelVictory .85s cubic-bezier(.2,.8,.2,1)}
.grammar-duel.duel-encourage .dojo-stage-visual{box-shadow:0 12px 28px rgba(64,93,121,.16)}
@keyframes longmoDuelGood{0%,100%{transform:scale(1)}45%{transform:scale(1.012)}}
@keyframes longmoDuelVictory{0%{transform:scale(.985);filter:saturate(.92)}50%{transform:scale(1.018);filter:saturate(1.12)}100%{transform:scale(1);filter:saturate(1)}}
@media(max-width:560px){.dojo-reaction-badge{top:9px;padding:6px 9px;font-size:9px}.dojo-reaction-sparkles{font-size:28px;letter-spacing:16px}}
@media(prefers-reduced-motion:reduce){.grammar-dojo.dojo-happy .dojo-stage-visual,.grammar-dojo.dojo-happy .dojo-stage-visual img,.grammar-dojo.dojo-oops .dojo-stage-visual,.grammar-dojo.dojo-oops .dojo-stage-visual img,.grammar-dojo.dojo-transition .dojo-stage-visual,.grammar-dojo.dojo-transition .grammar-dojo-stage>article,.grammar-dojo.dojo-complete .dojo-stage-visual img,.grammar-duel.duel-good .dojo-stage-visual,.grammar-duel.duel-oops .dojo-stage-visual,.grammar-duel.duel-victory .dojo-stage-visual,.dojo-reaction-badge,.dojo-reaction-sparkles{animation:none!important}.grammar-dojo.dojo-happy .dojo-reaction-badge,.grammar-dojo.dojo-oops .dojo-reaction-badge,.grammar-dojo.dojo-transition .dojo-reaction-badge,.grammar-dojo.dojo-complete .dojo-reaction-badge,.grammar-duel.duel-good .dojo-reaction-badge,.grammar-duel.duel-oops .dojo-reaction-badge,.grammar-duel.duel-victory .dojo-reaction-badge,.grammar-duel.duel-encourage .dojo-reaction-badge{opacity:1;transform:translate(-50%,0)}}

/* ========================================================================
   Lóngmò 1.6.14 — Grammaire : Dojo plein écran + accès menu + IME Pinyin
   ======================================================================== */
.grammar-menu-fab{
  position:fixed;right:22px;bottom:22px;z-index:85;display:inline-flex;align-items:center;gap:7px;
  min-height:38px;padding:8px 11px;border:1px solid color-mix(in srgb,var(--theme-accent) 34%,var(--panel-border));
  border-radius:999px;background:color-mix(in srgb,var(--theme-deep) 92%,#fff);color:#fff;
  box-shadow:0 12px 30px rgba(25,30,39,.22);cursor:pointer;backdrop-filter:blur(12px);transition:.18s ease
}
.grammar-menu-fab:hover,.grammar-menu-fab:focus-visible{transform:translateY(-2px);box-shadow:0 15px 34px rgba(25,30,39,.28);outline:0}
.grammar-menu-fab>span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.14);font-size:13px;line-height:1}
.grammar-menu-fab>strong{font-size:9px;letter-spacing:.01em;white-space:nowrap}
.grammar-menu-fab:not(.is-dojo){background:color-mix(in srgb,var(--theme-accent) 88%,#fff)}

/* Le Dojo devient la surface principale de la page Grammaire. Le menu complet
   reste une vraie page, ouverte avec le petit bouton flottant : aucun dropdown. */
.grammar[data-grammar-mode="dojo"]{width:100%!important;max-width:none!important;padding:0!important;margin:0!important}
.grammar[data-grammar-mode="dojo"].module-background-page{width:100%!important;max-width:none!important}
.grammar[data-grammar-mode="dojo"] .grammar-card{
  width:100%!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;overflow:visible!important
}
.grammar[data-grammar-mode="dojo"] .grammar-heading,
.grammar[data-grammar-mode="dojo"] .grammar-level-ribbon,
.grammar[data-grammar-mode="dojo"] .grammar-progress-summary,
.grammar[data-grammar-mode="dojo"] .grammar-dojo-launcher,
.grammar[data-grammar-mode="dojo"] .grammar-personal-tools,
.grammar[data-grammar-mode="dojo"] .grammar-toolbar,
.grammar[data-grammar-mode="dojo"] .grammar-layout,
.grammar[data-grammar-mode="dojo"] .grammar-duel{display:none!important}
.grammar[data-grammar-mode="dojo"] .grammar-dojo{
  display:flex!important;flex-direction:column;min-height:calc(100dvh - 32px);margin:0!important;border-radius:24px!important;
  background:color-mix(in srgb,var(--glass-strong) 94%,transparent)!important;box-shadow:0 22px 60px rgba(35,29,21,.16)!important;
  border:1px solid color-mix(in srgb,var(--panel-border) 84%,transparent)!important;overflow:hidden!important
}
.grammar[data-grammar-mode="dojo"] .grammar-dojo[hidden]{display:none!important}
.grammar[data-grammar-mode="dojo"] .grammar-dojo-head{padding:18px 22px 15px}
.grammar[data-grammar-mode="dojo"] .grammar-dojo-close{display:none}
.grammar[data-grammar-mode="dojo"] .grammar-dojo-steps{padding:12px 20px}
.grammar[data-grammar-mode="dojo"] .grammar-dojo-stage{display:flex;flex:1;padding:20px;min-height:0}
.grammar[data-grammar-mode="dojo"] .grammar-dojo-stage>article{width:100%;align-self:stretch}
.grammar[data-grammar-mode="dojo"] .dojo-stage-visual{height:clamp(210px,32vh,390px)}
.grammar[data-grammar-mode="dojo"] .dojo-stage-intro h4{font-size:clamp(19px,2.2vw,27px)}
.grammar[data-grammar-mode="dojo"] .dojo-scene{max-width:1050px;margin-left:auto;margin-right:auto}
.grammar[data-grammar-mode="dojo"] .dojo-observe-grid,
.grammar[data-grammar-mode="dojo"] .dojo-mini-contrast,
.grammar[data-grammar-mode="dojo"] .dojo-answer-zone,
.grammar[data-grammar-mode="dojo"] .dojo-bank,
.grammar[data-grammar-mode="dojo"] .dojo-transform-options,
.grammar[data-grammar-mode="dojo"] .dojo-write,
.grammar[data-grammar-mode="dojo"] .dojo-ime-assist,
.grammar[data-grammar-mode="dojo"] .grammar-dojo-feedback,
.grammar[data-grammar-mode="dojo"] .dojo-model,
.grammar[data-grammar-mode="dojo"] .dojo-stage-actions{max-width:1050px;margin-left:auto;margin-right:auto}

/* Quand le bouton ouvre le menu, le Dojo disparaît entièrement au lieu de
   devenir un accordéon/menu déroulant. */
.grammar[data-grammar-mode="menu"] .grammar-dojo{display:none!important}
.grammar[data-grammar-mode="menu"] .grammar-card{padding-bottom:70px!important}

/* Même logique d'IME que Writing dans l'étape libre du Dojo. */
.dojo-ime-assist{margin-top:9px;padding:10px 11px;border:1px solid var(--panel-border);border-radius:14px;background:color-mix(in srgb,var(--theme-soft) 70%,#fff)}
.dojo-ime-copy{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.dojo-ime-copy strong{font-size:10px;color:var(--theme-deep)}
.dojo-ime-copy span{font-size:8.5px;line-height:1.45;color:var(--theme-muted);text-align:right}
.dojo-writing-candidates{margin-top:8px!important;background:rgba(255,255,255,.6)!important}
.dojo-ime-assist>p{margin:7px 2px 0;color:var(--theme-muted);font-size:8px;line-height:1.45;text-align:right}
.dojo-ime-assist kbd{padding:1px 4px;border:1px solid rgba(0,0,0,.12);border-radius:4px;background:#fff;font-family:inherit;font-size:8px;color:var(--theme-deep)}

@media(max-width:760px){
  .grammar-menu-fab{right:14px;bottom:14px;min-height:36px;padding:7px 9px}
  .grammar-menu-fab>strong{font-size:8px}
  .grammar[data-grammar-mode="dojo"] .grammar-dojo{min-height:calc(100dvh - 20px);border-radius:18px!important}
  .grammar[data-grammar-mode="dojo"] .grammar-dojo-head{padding:14px 14px 11px}
  .grammar[data-grammar-mode="dojo"] .grammar-dojo-steps{padding:8px 10px}
  .grammar[data-grammar-mode="dojo"] .grammar-dojo-stage{padding:12px}
  .grammar[data-grammar-mode="dojo"] .dojo-stage-visual{height:clamp(150px,25vh,230px)}
  .dojo-ime-copy{display:grid;gap:3px}.dojo-ime-copy span{text-align:left}.dojo-ime-assist>p{text-align:left}
}

/* ========================================================================
   Lóngmò 1.6.15 — Grammaire : page Dojo façon maquette validée
   ======================================================================== */
body[data-current-view="grammar"] .teacher-buddy{display:none!important}
body[data-current-view="grammar"] .keyboard,
body[data-current-view="grammar"] footer{display:none!important}
body[data-current-view="grammar"] .shell{
  height:100dvh!important;min-height:0!important;overflow:hidden!important;
  padding-top:12px!important;padding-right:18px!important;padding-bottom:12px!important
}
body[data-current-view="grammar"] #grammar.page-view.active{
  height:100%!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important
}
body[data-current-view="grammar"] #grammar .grammar-card{height:100%}

/* Le bouton n'est plus posé sur la zone de validation. Il rejoint le haut de la page. */
body[data-current-view="grammar"] .grammar-menu-fab{
  position:fixed;top:18px;right:178px;bottom:auto;z-index:910;min-height:34px;padding:6px 10px;
  background:rgba(112,34,27,.92);border-color:rgba(255,255,255,.34);box-shadow:0 8px 22px rgba(44,20,15,.16)
}
body.traditional[data-current-view="grammar"] .grammar-menu-fab{background:rgba(20,79,129,.94)}
body[data-current-view="grammar"] .grammar-menu-fab>span{width:20px;height:20px;font-size:12px}
body[data-current-view="grammar"] .grammar-menu-fab>strong{font-size:8.5px}

.grammar[data-grammar-mode="dojo"] .grammar-dojo{
  height:100%!important;min-height:0!important;border-radius:22px!important;
  background:rgba(255,250,241,.91)!important;backdrop-filter:blur(10px)
}
body.traditional .grammar[data-grammar-mode="dojo"] .grammar-dojo{background:rgba(247,252,255,.92)!important}
.grammar[data-grammar-mode="dojo"] .grammar-dojo-head{
  flex:0 0 auto;min-height:78px;padding:13px 355px 11px 22px!important;
  background:linear-gradient(90deg,rgba(255,247,232,.95),rgba(255,255,255,.72));
  border-bottom:1px solid color-mix(in srgb,var(--panel-border) 78%,transparent)
}
body.traditional .grammar[data-grammar-mode="dojo"] .grammar-dojo-head{background:linear-gradient(90deg,rgba(239,248,255,.95),rgba(255,255,255,.72))}
.grammar[data-grammar-mode="dojo"] .grammar-dojo-head>div{min-width:0}
.grammar[data-grammar-mode="dojo"] .grammar-dojo-head>div>span{font-size:8px}
.grammar[data-grammar-mode="dojo"] .grammar-dojo-head h3{font-size:clamp(21px,2vw,28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grammar[data-grammar-mode="dojo"] .grammar-dojo-head p{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grammar[data-grammar-mode="dojo"] .grammar-dojo-steps{
  flex:0 0 auto;padding:9px 14px!important;gap:8px;background:rgba(255,255,255,.64)
}
.grammar[data-grammar-mode="dojo"] .grammar-dojo-steps button{
  min-height:42px;border-radius:13px;font-size:10px;background:rgba(255,255,255,.84)
}
.grammar[data-grammar-mode="dojo"] .grammar-dojo-steps button.active{
  background:linear-gradient(135deg,var(--theme-accent),var(--theme-deep));border-color:transparent;
  box-shadow:0 7px 18px color-mix(in srgb,var(--theme-accent) 20%,transparent)
}
.grammar[data-grammar-mode="dojo"] .grammar-dojo-stage{
  flex:1 1 auto;min-height:0!important;display:block!important;padding:12px 14px 14px!important;overflow:hidden
}
.grammar[data-grammar-mode="dojo"] .dojo-screen{
  display:grid;grid-template-rows:minmax(180px,31vh) minmax(0,1fr);gap:11px;height:100%;min-height:0
}
.grammar[data-grammar-mode="dojo"] .dojo-stage-visual{
  height:auto!important;min-height:0;margin:0!important;border-radius:19px;
  border-color:rgba(255,255,255,.72);box-shadow:0 9px 24px rgba(57,33,14,.12)
}
.grammar[data-grammar-mode="dojo"] .dojo-stage-visual img{object-position:center 46%}
.grammar[data-grammar-mode="dojo"] .dojo-visual-observe img{object-position:center 43%}
.grammar[data-grammar-mode="dojo"] .dojo-visual-produce img{object-position:center 48%}

.dojo-workspace{
  display:grid;grid-template-columns:minmax(300px,.82fr) minmax(430px,1.18fr);gap:10px;min-height:0;align-items:stretch
}
.dojo-retain-card,.dojo-task-card{
  min-width:0;min-height:0;border:1px solid color-mix(in srgb,var(--panel-border) 88%,transparent);
  border-radius:18px;background:rgba(255,255,255,.82);box-shadow:0 6px 18px rgba(62,43,26,.05);padding:12px 14px
}
.dojo-retain-card{display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(150deg,rgba(255,253,247,.95),rgba(255,247,234,.88))}
body.traditional .dojo-retain-card{background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(239,248,255,.9))}
.dojo-retain-card>header,.dojo-task-head{display:flex;align-items:flex-start;gap:9px}
.dojo-panel-icon{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:10px;background:color-mix(in srgb,var(--theme-accent) 10%,#fff);font-size:16px}
.dojo-retain-card header small,.dojo-task-head small{display:block;color:var(--theme-accent);font-size:8px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.dojo-retain-card header strong{display:block;margin-top:2px;color:var(--theme-deep);font:900 15px/1.18 Georgia,"Noto Serif SC",serif}
.dojo-retain-example{margin-top:9px;padding:10px 12px;border-radius:13px;background:rgba(255,255,255,.78)}
.dojo-retain-example b{display:block;color:var(--theme-deep);font:900 clamp(22px,2.2vw,31px)/1.16 "Noto Serif SC",Georgia,serif}
.dojo-retain-example em{display:block;margin-top:3px;color:var(--theme-accent);font-size:10px;font-style:normal;font-weight:800}
.dojo-retain-example p{margin:3px 0 0;color:var(--theme-muted);font-size:10px}
.dojo-retain-structure{margin-top:8px;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--panel-border) 72%,transparent)}
.dojo-retain-structure span,.dojo-rule-focus>span{display:block;color:var(--theme-accent);font-size:7.5px;font-weight:950;letter-spacing:.07em;text-transform:uppercase}
.dojo-retain-structure strong{display:block;margin-top:4px;padding:7px 9px;border-radius:10px;background:color-mix(in srgb,var(--theme-accent) 7%,#fff);color:var(--theme-deep);font-size:10.5px;text-align:center}
.dojo-retain-rule{margin:7px 0 0;color:var(--theme-muted);font-size:8.5px;line-height:1.42;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.dojo-task-card{display:flex;flex-direction:column;overflow:hidden;background:rgba(255,255,255,.86)}
.dojo-task-head{flex:0 0 auto}
.dojo-task-head>div{min-width:0}
.dojo-task-head h4{margin:2px 0 0;color:var(--theme-deep);font:900 clamp(16px,1.6vw,21px)/1.18 Georgia,"Noto Serif SC",serif}
.dojo-task-head p{margin:4px 0 0;color:var(--theme-muted);font-size:8.7px;line-height:1.38}
.dojo-task-head p strong{color:var(--theme-deep);font-size:10px}
.dojo-rule-focus{margin-top:10px;padding:11px 12px;border-radius:13px;background:color-mix(in srgb,var(--theme-soft) 62%,#fff)}
.dojo-rule-focus p{margin:4px 0 0;color:var(--theme-ink);font-size:10px;line-height:1.5}
.dojo-observe-task .dojo-mini-contrast{margin-top:8px}
.dojo-observe-task .dojo-stage-actions{margin-top:auto;padding-top:10px}

.dojo-task-card .dojo-answer-zone,.dojo-task-card .dojo-bank{margin-top:8px;padding:8px 10px;min-height:57px;border-radius:12px}
.dojo-task-card .dojo-token-row{min-height:28px;margin-top:5px;gap:5px}
.dojo-task-card .dojo-token{padding:6px 9px;font-size:14px}
.dojo-task-card .dojo-transform-options{margin-top:9px;gap:6px;grid-template-columns:1fr 1fr}
.dojo-task-card .dojo-transform-options button{padding:8px 10px;border-radius:11px;font-size:10px;line-height:1.28}
.dojo-task-card .grammar-dojo-feedback{min-height:0;margin-top:7px;padding:6px 8px;font-size:8px}
.dojo-task-card .grammar-dojo-feedback:empty{display:none}
.dojo-task-card .dojo-stage-actions{margin-top:auto;padding-top:9px;gap:7px;align-items:center}
.dojo-task-card .dojo-stage-actions button{min-height:38px;padding:8px 14px}
.dojo-action-hint{margin-right:auto;color:var(--theme-muted);font-size:8.5px}

.dojo-task-write .dojo-write{margin-top:8px;gap:4px}
.dojo-task-write .dojo-write>span{font-size:7.5px}
.dojo-task-write .dojo-write textarea{
  min-height:60px;max-height:72px;resize:none;padding:9px 11px;border-radius:12px;
  font:800 17px/1.35 "Noto Serif SC",system-ui,sans-serif;background:#fff
}
.dojo-task-write .dojo-ime-assist{margin-top:7px;padding:7px 8px;border-radius:12px;min-height:0}
.dojo-task-write .dojo-ime-copy strong{font-size:9px}.dojo-task-write .dojo-ime-copy span{font-size:7.8px}
.dojo-task-write .dojo-writing-candidates{min-height:42px;max-height:66px;margin-top:6px!important;padding:3px;overflow-x:auto;overflow-y:hidden;white-space:nowrap}
.dojo-task-write .writing-candidate{min-width:104px;max-width:180px;padding:5px 7px;border-radius:9px}
.dojo-task-write .writing-candidate.phrase{min-width:170px}.dojo-task-write .writing-candidate b{font-size:17px}.dojo-task-write .writing-candidate small{display:none}
.dojo-task-write .dojo-ime-assist>p{margin-top:4px;font-size:7.3px}
.dojo-task-write .dojo-model{margin-top:6px;padding:7px 9px;border-radius:11px}.dojo-task-write .dojo-model strong{font-size:13px}
.dojo-write-actions{display:grid!important;grid-template-columns:minmax(130px,.72fr) minmax(210px,1.28fr);width:100%;padding-top:8px!important}
.dojo-write-actions button{width:100%}.dojo-validate{font-size:12px!important}

/* Le menu classique reste disponible, mais comme une vraie page séparée. */
.grammar[data-grammar-mode="menu"]{overflow:auto!important;height:100%!important;padding-bottom:58px!important}
.grammar[data-grammar-mode="menu"] .grammar-card{height:auto!important}
body[data-current-view="grammar"]:has(.grammar[data-grammar-mode="menu"]) .shell{overflow:auto!important}

@media(max-height:820px) and (min-width:781px){
  .grammar[data-grammar-mode="dojo"] .grammar-dojo-head{min-height:66px;padding-top:9px!important;padding-bottom:8px!important}
  .grammar[data-grammar-mode="dojo"] .grammar-dojo-head h3{font-size:20px}.grammar[data-grammar-mode="dojo"] .grammar-dojo-head p{font-size:8px}
  .grammar[data-grammar-mode="dojo"] .grammar-dojo-steps{padding:6px 12px!important}.grammar[data-grammar-mode="dojo"] .grammar-dojo-steps button{min-height:34px}
  .grammar[data-grammar-mode="dojo"] .grammar-dojo-stage{padding:8px 11px 10px!important}
  .grammar[data-grammar-mode="dojo"] .dojo-screen{grid-template-rows:minmax(145px,27vh) minmax(0,1fr);gap:8px}
  .dojo-retain-card,.dojo-task-card{padding:9px 11px}.dojo-retain-example{padding:7px 9px;margin-top:6px}.dojo-retain-rule{display:none}
  .dojo-task-write .dojo-write textarea{min-height:50px;max-height:55px}.dojo-task-write .dojo-ime-assist>p{display:none}
}

@media(max-width:1100px) and (min-width:781px){
  body[data-current-view="grammar"] .grammar-menu-fab{right:156px}
  .grammar[data-grammar-mode="dojo"] .grammar-dojo-head{padding-right:315px!important}
  .dojo-workspace{grid-template-columns:minmax(260px,.75fr) minmax(360px,1.25fr)}
  .dojo-retain-rule{display:none}
}

@media(max-width:780px){
  body[data-current-view="grammar"] .shell{height:auto!important;min-height:100dvh!important;overflow:auto!important;padding:10px 10px 96px!important}
  body[data-current-view="grammar"] #grammar.page-view.active{height:auto!important;overflow:visible!important}
  body[data-current-view="grammar"] .grammar-menu-fab{top:9px;right:92px;bottom:auto;padding:6px}
  body[data-current-view="grammar"] .grammar-menu-fab>strong{display:none}
  .grammar[data-grammar-mode="dojo"] .grammar-dojo{height:auto!important;min-height:calc(100dvh - 106px)!important}
  .grammar[data-grammar-mode="dojo"] .grammar-dojo-head{min-height:0;padding:13px 105px 11px 13px!important}
  .grammar[data-grammar-mode="dojo"] .grammar-dojo-head h3,.grammar[data-grammar-mode="dojo"] .grammar-dojo-head p{white-space:normal}
  .grammar[data-grammar-mode="dojo"] .grammar-dojo-stage{overflow:visible;padding:9px!important}
  .grammar[data-grammar-mode="dojo"] .dojo-screen{display:block;height:auto}.grammar[data-grammar-mode="dojo"] .dojo-stage-visual{height:190px!important;margin-bottom:9px!important}
  .dojo-workspace{grid-template-columns:1fr}.dojo-retain-rule{display:none}.dojo-task-card{overflow:visible}
  .dojo-write-actions{grid-template-columns:1fr 1fr}
}

/* ========================================================================
   Lóngmò 1.6.16 — Grammar Focus: image + IME lisible + widgets masquables
   ======================================================================== */

/* Widgets globaux : fermeture immédiate, restauration depuis Profil. */
.streak-widget{
  position:fixed;z-index:870;right:18px;top:16px;display:block
}
.streak-widget .streak-chip{
  position:relative!important;inset:auto!important;right:auto!important;top:auto!important;left:auto!important;bottom:auto!important
}
.widget-dismiss{
  display:grid;place-items:center;width:22px!important;height:22px!important;min-width:22px!important;padding:0!important;
  border:1px solid rgba(255,255,255,.86)!important;border-radius:999px!important;background:rgba(80,34,28,.92)!important;
  color:#fff!important;font:900 14px/1 system-ui,sans-serif!important;cursor:pointer;box-shadow:0 4px 13px rgba(35,20,16,.18)!important
}
.streak-widget-dismiss{position:absolute;right:-7px;top:-7px;z-index:3}
.music-controls .music-widget-dismiss{position:absolute;right:-8px;top:-8px;z-index:4;background:rgba(80,34,28,.92)!important}
body.hide-streak-widget #streakWidget{display:none!important}
body.hide-music-widget #musicControls{display:none!important}
body.traditional .widget-dismiss{background:rgba(20,79,129,.95)!important}

.profile-visibility-card{grid-column:1/-1}
.profile-visibility-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.profile-visibility-controls label{
  display:flex;align-items:center;gap:11px;padding:12px 13px;border:1px solid var(--panel-border);border-radius:14px;
  background:color-mix(in srgb,var(--theme-soft) 50%,#fff);cursor:pointer
}
.profile-visibility-controls input{width:19px;height:19px;accent-color:var(--theme-accent);flex:0 0 auto}
.profile-visibility-controls span{display:grid;gap:2px}.profile-visibility-controls strong{color:var(--theme-deep);font-size:11px}.profile-visibility-controls small{color:var(--theme-muted);font-size:8.5px;line-height:1.35}

/* Grammaire : supprimer le reliquat de header et consacrer cette hauteur à l'image. */
body[data-current-view="grammar"] .shell{
  padding-top:0!important;padding-right:12px!important;padding-bottom:8px!important
}
.grammar[data-grammar-mode="dojo"] .grammar-dojo{
  border-radius:0 0 22px 22px!important
}
.grammar[data-grammar-mode="dojo"] .grammar-dojo-head{display:none!important}
.grammar[data-grammar-mode="dojo"] .grammar-dojo-steps{
  padding:7px 9px!important;gap:8px;background:rgba(255,255,255,.82);border-bottom:1px solid var(--panel-border)
}
.grammar[data-grammar-mode="dojo"] .grammar-dojo-steps button{
  min-height:44px!important;border-radius:14px!important;font-size:10px!important
}
.grammar[data-grammar-mode="dojo"] .grammar-dojo-stage{
  padding:8px 10px 10px!important
}
.grammar[data-grammar-mode="dojo"] .dojo-screen{
  grid-template-rows:clamp(290px,38vh,350px) minmax(0,1fr)!important;gap:9px!important
}
.grammar[data-grammar-mode="dojo"] .dojo-stage-visual{
  position:relative;height:auto!important;min-height:0!important;border-radius:20px!important;overflow:hidden
}
.grammar[data-grammar-mode="dojo"] .dojo-stage-visual img{
  width:100%;height:100%;object-fit:cover!important;object-position:center center!important;transform:none!important
}
.grammar[data-grammar-mode="dojo"] .dojo-visual-observe img,
.grammar[data-grammar-mode="dojo"] .dojo-visual-build img,
.grammar[data-grammar-mode="dojo"] .dojo-visual-transform img,
.grammar[data-grammar-mode="dojo"] .dojo-visual-produce img{object-position:center center!important}
.dojo-visual-caption{
  position:absolute;left:15px;top:14px;z-index:3;display:grid;gap:2px;max-width:min(580px,67%);padding:8px 12px;
  border:1px solid rgba(255,255,255,.68);border-radius:13px;background:rgba(255,250,242,.88);backdrop-filter:blur(9px);
  box-shadow:0 6px 18px rgba(40,22,12,.14);color:var(--theme-deep)
}
.dojo-visual-caption small{font-size:7.5px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;color:var(--theme-accent)}
.dojo-visual-caption strong{font:900 clamp(14px,1.25vw,19px)/1.15 Georgia,"Noto Serif SC",serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Le bouton du menu vit sur l'image, jamais sur Valider ni sur les candidats. */
body[data-current-view="grammar"] .grammar-menu-fab{
  position:fixed!important;top:66px!important;right:27px!important;bottom:auto!important;z-index:915!important;
  min-height:32px!important;padding:5px 8px!important;background:rgba(83,38,29,.86)!important
}
body[data-current-view="grammar"] .grammar-menu-fab>span{width:19px!important;height:19px!important}
body[data-current-view="grammar"] .grammar-menu-fab>strong{font-size:8px!important}

/* Deux cartes plus équilibrées : image grande au-dessus, exercice utilisable dessous. */
.dojo-workspace{
  grid-template-columns:minmax(275px,.72fr) minmax(500px,1.28fr)!important;gap:9px!important
}
.dojo-retain-card,.dojo-task-card{padding:10px 12px!important;border-radius:17px!important}
.dojo-retain-card header strong{font-size:14px!important}
.dojo-retain-example{margin-top:6px!important;padding:8px 10px!important}
.dojo-retain-example b{font-size:clamp(21px,2vw,28px)!important}
.dojo-retain-structure{margin-top:6px!important;padding-top:6px!important}
.dojo-retain-rule{display:none!important}

/* Etape À toi : aucune zone utile ne peut se faire rogner. */
.dojo-task-write{
  display:grid!important;grid-template-rows:auto auto minmax(112px,1fr) auto auto!important;align-content:stretch;overflow:hidden!important
}
.dojo-task-write .dojo-task-head h4{font-size:clamp(15px,1.45vw,19px)!important}
.dojo-task-write .dojo-task-head p{font-size:8.3px!important}
.dojo-task-write .dojo-write{margin-top:6px!important}
.dojo-task-write .dojo-write textarea{
  min-height:54px!important;max-height:58px!important;padding:8px 10px!important;font-size:17px!important
}
.dojo-task-write .dojo-ime-assist{
  min-height:112px!important;margin-top:6px!important;padding:7px 8px!important;overflow:hidden
}
.dojo-task-write .dojo-ime-copy{display:flex!important;align-items:center!important;gap:10px!important}
.dojo-task-write .dojo-ime-copy strong{font-size:9px!important;white-space:nowrap}
.dojo-task-write .dojo-ime-copy span{font-size:7.5px!important;text-align:right!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dojo-task-write .dojo-writing-candidates{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-rows:minmax(44px,1fr)!important;
  gap:5px!important;min-height:96px!important;max-height:none!important;margin-top:5px!important;padding:4px!important;
  overflow:visible!important;white-space:normal!important;align-content:stretch
}
.dojo-task-write .writing-candidate{
  width:100%!important;min-width:0!important;max-width:none!important;min-height:44px!important;padding:5px 7px!important;border-radius:10px!important;
  grid-template-columns:auto minmax(0,1fr)!important;grid-template-areas:'num hanzi' 'num pinyin'!important
}
.dojo-task-write .writing-candidate.phrase{min-width:0!important;max-width:none!important}
.dojo-task-write .writing-candidate b{font-size:17px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dojo-task-write .writing-candidate span:not(.writing-candidate-number){font-size:7.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dojo-task-write .writing-candidate small{display:none!important}
.dojo-task-write .writing-candidate-empty{
  grid-column:1/-1;display:flex!important;align-items:center;justify-content:center;min-height:86px!important;padding:8px!important;text-align:center;font-size:8.5px!important
}
.dojo-task-write .dojo-ime-assist>p{display:none!important}
.dojo-task-write .grammar-dojo-feedback{margin-top:5px!important;padding:5px 7px!important;font-size:7.8px!important}
.dojo-write-actions{
  grid-template-columns:minmax(130px,.65fr) minmax(220px,1.35fr)!important;margin-top:0!important;padding-top:6px!important;gap:7px!important
}
.dojo-write-actions button{min-height:42px!important}

/* Petites hauteurs : conserver les candidats, réduire plutôt l'image et le texte. */
@media(max-height:760px) and (min-width:781px){
  .grammar[data-grammar-mode="dojo"] .dojo-screen{grid-template-rows:clamp(210px,31vh,250px) minmax(0,1fr)!important}
  .dojo-retain-card header strong{font-size:12px!important}.dojo-retain-example b{font-size:21px!important}
  .dojo-task-write .dojo-writing-candidates{min-height:88px!important;grid-auto-rows:minmax(40px,1fr)!important}
}

@media(max-width:1100px) and (min-width:781px){
  .dojo-workspace{grid-template-columns:minmax(240px,.7fr) minmax(410px,1.3fr)!important}
  .dojo-task-write .dojo-writing-candidates{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:minmax(38px,1fr)!important}
  .dojo-task-write .writing-candidate{min-height:38px!important}
}

@media(max-width:780px){
  .streak-widget{top:7px;right:7px;transform:scale(.84);transform-origin:top right}
  .streak-widget .streak-chip{transform:none!important}
  .profile-visibility-controls{grid-template-columns:1fr}
  body[data-current-view="grammar"] .shell{padding-top:0!important}
  .grammar[data-grammar-mode="dojo"] .grammar-dojo{border-radius:0 0 18px 18px!important}
  .grammar[data-grammar-mode="dojo"] .dojo-screen{display:block!important;height:auto!important}
  .grammar[data-grammar-mode="dojo"] .dojo-stage-visual{height:220px!important;margin-bottom:8px!important}
  .dojo-visual-caption{left:9px;top:9px;max-width:75%;padding:6px 8px}.dojo-visual-caption strong{font-size:13px}
  body[data-current-view="grammar"] .grammar-menu-fab{top:62px!important;right:16px!important}
  .dojo-workspace{grid-template-columns:1fr!important}
  .dojo-task-write{display:flex!important;overflow:visible!important}
  .dojo-task-write .dojo-writing-candidates{grid-template-columns:repeat(2,minmax(0,1fr))!important;min-height:100px!important}
}

/* ========================================================================
   Lóngmò 1.6.17 — Dojo : panorama complet + enchaînement des leçons
   ======================================================================== */
/* Le panorama 1.6.16 était déjà recadré en asset wide, puis recadré une
   seconde fois par object-fit:cover. On montre désormais tout le panorama. */
.grammar[data-grammar-mode="dojo"] .dojo-screen{
  grid-template-rows:clamp(350px,40vh,405px) minmax(0,1fr)!important;
}
.grammar[data-grammar-mode="dojo"] .dojo-stage-visual{
  background:linear-gradient(90deg,rgba(104,56,28,.16),rgba(255,226,169,.18),rgba(104,56,28,.12))!important;
}
.grammar[data-grammar-mode="dojo"] .dojo-stage-visual img,
.grammar[data-grammar-mode="dojo"] .dojo-visual-observe img,
.grammar[data-grammar-mode="dojo"] .dojo-visual-build img,
.grammar[data-grammar-mode="dojo"] .dojo-visual-transform img,
.grammar[data-grammar-mode="dojo"] .dojo-visual-produce img{
  object-fit:contain!important;
  object-position:center center!important;
}

/* Écran de fin : même composition que les autres étapes et vraie suite. */
.grammar-dojo-finish.dojo-screen{position:relative}
.grammar-dojo-finish .dojo-finish-content{
  min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:14px 18px;text-align:center;border:1px solid var(--panel-border);border-radius:18px;
  background:rgba(255,255,255,.86);box-shadow:0 6px 18px rgba(62,43,26,.05)
}
.grammar-dojo-finish .dojo-finish-content>span{color:var(--theme-accent);font-size:8px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.grammar-dojo-finish .dojo-finish-content h4{margin:0;color:var(--theme-deep);font:900 clamp(17px,1.7vw,22px)/1.2 Georgia,"Noto Serif SC",serif}
.grammar-dojo-finish .dojo-finish-content p{max-width:760px;margin:0;color:var(--theme-muted);font-size:9px;line-height:1.45}
.grammar-dojo-finish .dojo-finish-content p strong{color:var(--theme-deep)}
.grammar-dojo-finish-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:7px}
.grammar-dojo-finish-actions button{min-height:42px}
.grammar-dojo-finish-actions .dojo-next-lesson{min-width:min(420px,100%);display:flex;align-items:center;justify-content:center;gap:8px}
.grammar-dojo-finish-actions .dojo-next-lesson small{font-size:8px;font-weight:750;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}

@media(max-height:820px) and (min-width:781px){
  .grammar[data-grammar-mode="dojo"] .dojo-screen{grid-template-rows:clamp(285px,38vh,320px) minmax(0,1fr)!important}
}
@media(max-height:720px) and (min-width:781px){
  .grammar[data-grammar-mode="dojo"] .dojo-screen{grid-template-rows:260px minmax(0,1fr)!important}
  .grammar[data-grammar-mode="dojo"] .dojo-stage-visual img{object-fit:cover!important;object-position:center 45%!important}
}
@media(max-width:780px){
  .grammar[data-grammar-mode="dojo"] .dojo-stage-visual img{object-fit:cover!important;object-position:center 43%!important}
  .grammar-dojo-finish-actions{display:grid;grid-template-columns:1fr;width:100%}
  .grammar-dojo-finish-actions .dojo-next-lesson{min-width:0;width:100%}
}


/* ========================================================================
   Lóngmò 1.6.18 — Dojo : carte « À toi » compacte, jamais rognée
   ======================================================================== */
/* Le panorama 1.6.17 est conservé tel quel. Toute la récupération de place
   se fait dans la carte d'exercice afin que titre, IME, feedback, modèle et
   actions restent dans le viewport desktop. */
.dojo-task-write{
  display:flex!important;flex-direction:column!important;min-height:0!important;
  overflow:hidden!important;padding:9px 11px!important
}
.dojo-task-write .dojo-task-head{
  flex:0 0 auto;min-height:0!important;align-items:center!important;gap:8px!important;
  padding:7px 9px!important;border:1px solid color-mix(in srgb,var(--theme-accent) 23%,var(--panel-border));
  border-radius:13px;background:color-mix(in srgb,var(--theme-accent) 5%,#fff)
}
.dojo-task-write .dojo-panel-icon{width:27px!important;height:27px!important;flex-basis:27px!important;font-size:14px!important;border-radius:9px!important}
.dojo-task-write .dojo-task-head small{font-size:7px!important;line-height:1.1!important}
.dojo-task-write .dojo-task-head h4{
  margin:1px 0 0!important;font-size:clamp(14px,1.2vw,17px)!important;line-height:1.12!important;
  overflow:visible!important;display:block!important
}
.dojo-task-write .dojo-task-head p{display:none!important}
.dojo-task-write .dojo-write{flex:0 0 auto!important;margin-top:5px!important;gap:3px!important}
.dojo-task-write .dojo-write>span{font-size:7px!important}
.dojo-task-write .dojo-write textarea{
  min-height:49px!important;max-height:51px!important;padding:7px 9px!important;border-radius:11px!important;
  font-size:16px!important;line-height:1.28!important
}
.dojo-task-write.is-solved .dojo-write textarea{background:#fbfdfb!important;border-color:#bcd7c3!important;color:#2d5f3b!important}
.dojo-task-write .dojo-ime-assist{
  flex:0 0 auto!important;min-height:0!important;margin-top:5px!important;padding:6px 7px!important;
  border-radius:11px!important;overflow:visible!important
}
.dojo-task-write .dojo-ime-copy{min-height:14px!important;gap:8px!important}
.dojo-task-write .dojo-ime-copy strong{font-size:8.5px!important}
.dojo-task-write .dojo-ime-copy span{font-size:7px!important;line-height:1.25!important}
.dojo-task-write .dojo-writing-candidates{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-rows:38px!important;
  gap:4px!important;min-height:80px!important;max-height:80px!important;margin-top:4px!important;padding:2px!important
}
.dojo-task-write .writing-candidate{
  min-height:38px!important;height:38px!important;padding:3px 6px!important;border-radius:9px!important
}
.dojo-task-write .writing-candidate b{font-size:15px!important;line-height:1.05!important}
.dojo-task-write .writing-candidate span:not(.writing-candidate-number){font-size:6.8px!important;line-height:1.05!important}
.dojo-task-write .writing-candidate-empty{min-height:76px!important;height:76px!important;font-size:8px!important}
.dojo-task-write .dojo-ime-complete{
  min-height:32px!important;padding:7px 9px!important;background:#eaf5ed!important;border-color:#bcd7c3!important
}
.dojo-task-write .dojo-ime-complete .dojo-ime-copy{min-height:0!important}
.dojo-task-write .dojo-ime-complete strong{color:#2d5f3b!important}
.dojo-task-write .grammar-dojo-feedback{
  flex:0 0 auto!important;min-height:0!important;margin-top:4px!important;padding:5px 7px!important;
  font-size:7.5px!important;line-height:1.25!important
}
.dojo-task-write .dojo-model{
  flex:0 0 auto!important;display:grid!important;grid-template-columns:auto minmax(0,1fr);grid-template-areas:'label answer' 'label structure';
  align-items:center;column-gap:9px;row-gap:0;margin:4px 0 0!important;padding:5px 8px!important;border-radius:10px!important
}
.dojo-task-write .dojo-model>span{grid-area:label;font-size:7px!important;white-space:nowrap}
.dojo-task-write .dojo-model>strong{grid-area:answer;margin:0!important;font-size:12px!important;line-height:1.15!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dojo-task-write .dojo-model>small{grid-area:structure;margin:1px 0 0!important;font-size:6.8px!important;line-height:1.1!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dojo-task-write .dojo-write-actions{
  flex:0 0 auto!important;margin-top:auto!important;padding-top:5px!important;gap:6px!important
}
.dojo-task-write .dojo-write-actions button{min-height:38px!important;height:38px!important;padding:6px 10px!important}

@media(max-height:900px) and (min-width:781px){
  .dojo-task-write{padding:8px 10px!important}
  .dojo-task-write .dojo-task-head{padding:6px 8px!important}
  .dojo-task-write .dojo-task-head h4{font-size:15px!important}
  .dojo-task-write .dojo-write textarea{min-height:46px!important;max-height:48px!important}
  .dojo-task-write .dojo-writing-candidates{grid-auto-rows:36px!important;min-height:76px!important;max-height:76px!important}
  .dojo-task-write .writing-candidate{min-height:36px!important;height:36px!important}
  .dojo-task-write .writing-candidate-empty{min-height:72px!important;height:72px!important}
  .dojo-task-write .dojo-write-actions button{min-height:36px!important;height:36px!important}
}

@media(max-width:1100px) and (min-width:781px){
  .dojo-task-write .dojo-writing-candidates{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:34px!important;min-height:106px!important;max-height:106px!important}
  .dojo-task-write .writing-candidate{height:34px!important;min-height:34px!important}
}

@media(max-width:780px){
  .dojo-task-write{overflow:visible!important}
  .dojo-task-write .dojo-task-head p{display:block!important;font-size:7.5px!important}
  .dojo-task-write .dojo-writing-candidates{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:38px!important;min-height:118px!important;max-height:none!important}
  .dojo-task-write .writing-candidate{height:38px!important;min-height:38px!important}
}

/* ========================================================================
   Lóngmò 1.6.19 — Dojo : post-validation compacte sur Construis / Transforme
   ======================================================================== */
/* Une fois une réponse validée, les contrôles qui n'ont plus d'utilité sont
   retirés du flux. La barre d'actions reste donc toujours dans le viewport. */
.dojo-task-build,.dojo-task-transform{
  display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important
}
.dojo-task-build .dojo-task-head,.dojo-task-transform .dojo-task-head{flex:0 0 auto}
.dojo-task-build .dojo-answer-zone,.dojo-task-build .dojo-bank,
.dojo-task-transform .dojo-transform-options,.dojo-task-transform .dojo-transform-result{flex:0 0 auto}
.dojo-task-build #grammarDojoFeedback,.dojo-task-transform #grammarDojoFeedback{flex:0 0 auto}
.dojo-task-build .dojo-stage-actions,.dojo-task-transform .dojo-stage-actions{
  flex:0 0 auto!important;margin-top:auto!important;padding-top:7px!important
}

/* Construis réussi : la banque vide et le deuxième bouton de validation ont
   disparu du DOM. La réponse devient un résumé compact non-déplaçable. */
.dojo-task-build.is-solved{padding:9px 11px!important}
.dojo-task-build.is-solved .dojo-task-head{padding:7px 9px!important;min-height:0!important}
.dojo-task-build.is-solved .dojo-task-head p{margin-top:2px!important;font-size:8px!important}
.dojo-task-build.is-solved .dojo-answer-zone{
  margin-top:8px!important;min-height:62px!important;padding:8px 10px!important;
  border-color:#b8d8c0!important;background:#f5fbf6!important
}
.dojo-task-build.is-solved .dojo-answer-zone>small{color:#2d6b3d!important}
.dojo-task-build.is-solved .dojo-token-row{min-height:30px!important;gap:5px!important;align-items:center!important}
.dojo-task-build.is-solved .dojo-token.answer{
  min-height:32px!important;padding:5px 9px!important;border-color:#c1d9c7!important;background:#fff!important;
  color:var(--theme-deep)!important;cursor:default!important;opacity:1!important
}
.dojo-task-build.is-solved #grammarDojoFeedback{
  margin-top:7px!important;padding:6px 8px!important;min-height:0!important;font-size:8px!important
}
.dojo-build-actions{display:grid!important;grid-template-columns:minmax(120px,.7fr) minmax(190px,1.3fr)!important;gap:7px!important;width:100%}
.dojo-build-actions button{width:100%!important;min-height:40px!important}

/* Transforme réussi : au lieu de conserver toutes les réponses, on montre
   uniquement la transformation correcte puis le CTA vers l'écriture libre. */
.dojo-task-transform.is-solved{padding:9px 11px!important}
.dojo-task-transform.is-solved .dojo-task-head{padding:7px 9px!important;min-height:0!important}
.dojo-transform-result{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;
  margin-top:9px;padding:9px 11px;border:1px solid #b8d8c0;border-radius:12px;background:#f5fbf6
}
.dojo-transform-result small{font-size:7.5px;font-weight:950;letter-spacing:.06em;text-transform:uppercase;color:#2d6b3d}
.dojo-transform-result strong{min-width:0;font:900 17px/1.15 "Noto Serif SC",Georgia,serif;color:var(--theme-deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dojo-transform-result span{font-size:8px;font-weight:850;color:#2d6b3d;white-space:nowrap}
.dojo-task-transform.is-solved #grammarDojoFeedback{margin-top:7px!important;padding:6px 8px!important;font-size:8px!important}
.dojo-transform-actions{width:100%}
.dojo-task-transform.is-solved .dojo-transform-actions{display:grid!important;grid-template-columns:minmax(220px,1fr)!important}
.dojo-task-transform.is-solved .dojo-transform-actions button{width:100%!important;min-height:40px!important}

@media(max-height:820px) and (min-width:781px){
  .dojo-task-build.is-solved .dojo-answer-zone{min-height:54px!important;margin-top:6px!important;padding:6px 8px!important}
  .dojo-task-build.is-solved .dojo-token.answer{min-height:29px!important;padding:4px 8px!important}
  .dojo-transform-result{margin-top:6px!important;padding:7px 9px!important}
  .dojo-build-actions button,.dojo-task-transform.is-solved .dojo-transform-actions button{min-height:36px!important;height:36px!important}
}
@media(max-width:780px){
  .dojo-task-build,.dojo-task-transform{overflow:visible!important}
  .dojo-build-actions{grid-template-columns:1fr 1fr!important}
  .dojo-transform-result{grid-template-columns:1fr;gap:3px}
  .dojo-transform-result strong{white-space:normal}
  .dojo-transform-result span{white-space:normal}
}


/* ========================================================================
   Lóngmò 1.6.21 — Grammaire : navigation Dojo claire et sélection de notion
   ======================================================================== */
/* L'ancien retour sticky 1.6.20 est définitivement retiré : le même beau
   bouton flottant sert partout, avec un rôle différent selon l'écran. */
.grammar-menu-dojo-return{display:none!important}
.grammar[data-grammar-mode="menu"] .grammar-menu-fab{display:inline-flex!important}
.grammar[data-grammar-mode="menu"] .grammar-menu-fab:not(.is-dojo){
  background:color-mix(in srgb,var(--theme-accent) 88%,#fff)!important
}

/* Sélecteur compact ouvert par le bouton Dojo dans le menu Grammaire. */
.grammar-dojo-picker{
  position:fixed;top:106px;right:27px;z-index:920;width:min(365px,calc(100vw - 290px));
  padding:12px;border:1px solid color-mix(in srgb,var(--panel-border) 78%,transparent);border-radius:18px;
  background:rgba(255,250,242,.97);box-shadow:0 18px 48px rgba(43,25,16,.22);backdrop-filter:blur(18px)
}
body.traditional .grammar-dojo-picker{background:rgba(247,252,255,.97)}
.grammar-dojo-picker[hidden]{display:none!important}
.grammar[data-grammar-mode="dojo"] .grammar-dojo-picker{display:none!important}
.grammar-dojo-picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.grammar-dojo-picker-head>div{display:grid;gap:1px}
.grammar-dojo-picker-head span{font-size:7.5px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;color:var(--theme-accent)}
.grammar-dojo-picker-head strong{font:900 18px/1.12 Georgia,"Noto Serif SC",serif;color:var(--theme-deep)}
.grammar-dojo-picker-head button{width:29px;height:29px;border:1px solid var(--panel-border);border-radius:50%;background:rgba(255,255,255,.78);color:var(--theme-deep);font-weight:900;cursor:pointer}
.grammar-dojo-picker label{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:8px;margin-top:7px;font-size:8px;font-weight:900;color:var(--theme-muted);text-transform:uppercase;letter-spacing:.05em}
.grammar-dojo-picker select{width:100%;min-width:0;height:38px;padding:0 10px;border:1px solid var(--panel-border);border-radius:11px;background:rgba(255,255,255,.9);color:var(--theme-deep);font-size:10px;font-weight:800}
.grammar-dojo-picker p{margin:9px 2px 10px;font-size:8px;line-height:1.35;color:var(--theme-muted)}
.grammar-dojo-picker .primary-cta{width:100%;min-height:40px}

/* Dans le Dojo le bouton ouvre le menu. Dans le menu il ouvre seulement le
   sélecteur : on ne relance jamais arbitrairement la notion 1.1. */
.grammar[data-grammar-mode="dojo"] .grammar-menu-fab>span::before{content:''}
.grammar[data-grammar-mode="menu"] .grammar-menu-fab>span{font-size:0}
.grammar[data-grammar-mode="menu"] .grammar-menu-fab>span::after{content:'道';font-size:12px;font-weight:900}

@media(max-width:780px){
  .grammar-dojo-picker{top:101px;right:10px;width:calc(100vw - 20px);max-width:360px;padding:10px}
  .grammar-dojo-picker label{grid-template-columns:56px minmax(0,1fr)}
}


/* ========================================================================
   Lóngmò 1.6.30 — Challenges : fonds HSK / TOCFL sans voile ni mascottes superposées
   Cette règle finale doit rester après le fond générique des page-view afin
   que le décor Challenges ne puisse plus être écrasé par la cascade.
   ======================================================================== */
body:not(.traditional) #challenge.page-view.challenge,
body:not(.traditional) #challenge.page-view.challenge.active{
  background-color:#e9b56e!important;
  background-image:url('../assets/themes/hsk/pages/challenge.webp?v=1.6.30')!important;
  background-size:cover!important;
  background-position:center 52%!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}
body.traditional #challenge.page-view.challenge,
body.traditional #challenge.page-view.challenge.active{
  background-color:#cfe9fb!important;
  background-image:url('../assets/themes/tocfl/pages/challenge.webp?v=1.6.30')!important;
  background-size:cover!important;
  background-position:center 52%!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}
#challenge.page-view.challenge::before,
#challenge.page-view.challenge::after{display:none!important;content:none!important}
#challenge .mascot-sprinkles{display:none!important}
#challenge .challenge-menu,
#challenge .challenge-game{
  background:rgba(255,252,247,.62)!important;
  backdrop-filter:blur(6px) saturate(1.03)!important;
  -webkit-backdrop-filter:blur(6px) saturate(1.03)!important;
}
body.traditional #challenge .challenge-menu,
body.traditional #challenge .challenge-game{
  background:rgba(244,251,255,.62)!important;
}
@media(max-width:780px){
  body:not(.traditional) #challenge.page-view.challenge,
  body:not(.traditional) #challenge.page-view.challenge.active,
  body.traditional #challenge.page-view.challenge,
  body.traditional #challenge.page-view.challenge.active{background-attachment:scroll!important;background-position:center top!important}
}

/* 2026-10-08: réponses de grammaire lisibles, sans grille miniature. */
.grammar[data-grammar-mode="dojo"] .dojo-task-transform .dojo-transform-options{display:grid!important;width:100%!important;max-width:920px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-self:stretch!important;gap:16px!important;margin:24px auto!important}
.grammar[data-grammar-mode="dojo"] .dojo-task-transform .dojo-transform-options button{font-family:"Noto Sans SC","Microsoft YaHei",sans-serif!important;font-size:clamp(22px,2vw,30px)!important;font-weight:750!important;line-height:1.55!important;padding:20px 24px!important;min-height:88px!important;text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important}
@media(max-width:850px){.grammar[data-grammar-mode="dojo"] .dojo-task-transform .dojo-transform-options{grid-template-columns:1fr!important;gap:10px!important;margin:12px auto!important}.grammar[data-grammar-mode="dojo"] .dojo-task-transform .dojo-transform-options button{min-height:64px!important;padding:12px!important;font-size:23px!important}}
.cloud-conflict-details{max-height:280px;overflow:auto;margin:15px 0;padding:15px;border:1px solid #c9b8a3;border-radius:16px}.cloud-conflict-details section{border-top:1px solid #c9b8a3;padding-top:9px}.cloud-conflict-details p{font-size:15px;line-height:1.5}.grammar[data-grammar-mode="dojo"] .dojo-task-transform{overflow-y:auto!important}

/* Keep the exercise and its validation reachable, including browser zoom. */
.grammar[data-grammar-mode="dojo"] .grammar-dojo-stage{overflow-y:auto!important;overscroll-behavior:contain}
.grammar[data-grammar-mode="dojo"] .dojo-screen{height:auto!important;min-height:100%;grid-template-rows:clamp(160px,25vh,260px) auto!important;align-content:start}
.grammar[data-grammar-mode="dojo"] .dojo-workspace{min-height:min-content!important;align-items:stretch}
.grammar[data-grammar-mode="dojo"] .dojo-task-card,.grammar[data-grammar-mode="dojo"] .dojo-retain-card{overflow:visible!important}
.grammar[data-grammar-mode="dojo"] .dojo-stage-actions{position:static!important;inset:auto!important;z-index:auto;background:var(--panel-bg,#fffaf3);border-radius:12px;padding:10px!important;margin-top:12px!important}
@media(max-width:1100px){.grammar[data-grammar-mode="dojo"] .dojo-workspace{grid-template-columns:minmax(0,1fr)!important}.grammar[data-grammar-mode="dojo"] .dojo-retain-card{display:none}}
@media(max-width:780px){.grammar[data-grammar-mode="dojo"] .dojo-screen{display:grid!important}.grammar[data-grammar-mode="dojo"] .dojo-stage-visual{height:180px!important}}
.grammar[data-grammar-mode="dojo"] .grammar-dojo-stage{padding-bottom:95px!important;scroll-padding-bottom:95px}