:root{--blue:#1c4587;--blue-soft:#eaf1fb;--green:#1eaa70;--green-soft:#e9f7f0;--red:#e62936;--red-soft:#fff0f0;--yellow:#ffc83d;--yellow-soft:#fff7dc;--ink:#20232a;--muted:#707782;--line:#e5e8ed;--surface:#fff;--bg:#fff;--shadow:0 4px 16px rgba(27,45,72,.07)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Arial,Helvetica,sans-serif;padding-bottom:88px}
button,input,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
.app-header{max-width:760px;margin:0 auto;padding:22px 18px 14px}
.brand-line{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-size:1.25rem;font-weight:800;letter-spacing:-.03em;color:var(--blue)}
.level-pill{font-size:.75rem;font-weight:700;color:var(--blue);background:var(--blue-soft);border-radius:99px;padding:5px 10px}
.progress-head{display:flex;justify-content:space-between;align-items:center;margin-top:22px;font-size:.88rem;font-weight:700}
.progress-head span:last-child{color:var(--green)}
.progress-track{height:8px;background:#e6e9ee;border-radius:99px;overflow:hidden;margin-top:8px}
.progress-fill{height:100%;width:0;background:var(--green);border-radius:99px;transition:width .25s}
main{max-width:760px;margin:0 auto;padding:0 16px 28px}
.screen{display:none}
.screen.active{display:block}
#learn-screen.active{display:block}
#review-screen.active{display:block}
.screen-top{display:flex;align-items:center;justify-content:space-between;margin:8px 0 18px}
.back-button{background:none;border:0;color:var(--blue);font-weight:700;padding:8px 0}
.screen-counter{color:var(--muted);font-size:.8rem;font-weight:700}
.page-heading{margin:8px 0 18px}
.page-heading h1,.lesson-title-block h1{font-size:1.75rem;line-height:1.15;margin:0 0 6px;letter-spacing:-.035em}
.page-heading p,.lesson-title-block p{color:var(--muted);margin:0}
.chapter-list{display:grid;gap:14px}
.chapter-card{border:1px solid var(--line);border-radius:16px;padding:16px;background:#fff;box-shadow:var(--shadow)}
.chapter-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.chapter-kicker{font-size:.7rem;letter-spacing:.08em;font-weight:800;color:var(--blue)}
.chapter-progress{font-size:.75rem;color:var(--muted)}
.chapter-card h2{font-size:1.16rem;margin:7px 0 3px;line-height:1.25}
.chapter-description{font-size:.88rem;color:var(--muted);margin:0 0 13px}
.path-row,.checkpoint-row{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid #f0f1f3}.path-row{position:relative}.path-row:after{content:"";position:absolute;left:18px;top:48px;height:22px;width:2px;background:#e1e7ee}
.lesson-node,.flag-node{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;border:2px solid #d8e0ea;color:var(--blue);font-size:1.15rem;font-weight:800;background:#fff}
.lesson-node.done{border:3px solid var(--green);color:var(--green);background:var(--green-soft)}
.flag-node{border-color:#f1d99a;color:#b98208;background:#fff9e7}
.flag-node.done{border-color:var(--green);color:var(--green);background:var(--green-soft)}
.path-copy{min-width:0;flex:1}
.path-copy strong{display:block;font-size:.9rem;line-height:1.25}
.path-copy small{display:block;color:var(--muted);font-size:.78rem;line-height:1.3;margin-top:3px}
.text-action{border:0;background:none;color:var(--blue);font-weight:800;font-size:.84rem;padding:8px 2px;white-space:nowrap}
.text-action:disabled{color:#a5abb4}
.lesson-title-block{padding:4px 0 18px}
.lesson-content{font-family:"Open Sans",Arial,sans-serif;font-size:1rem;line-height:1.62}
.lesson-content h3{font-size:1.1rem;margin:25px 0 8px;color:#20232a}
.lesson-content h4{font-size:1rem}
.lesson-content table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:clamp(.7rem,2.8vw,.9rem);margin:10px 0 16px}
.lesson-content th,.lesson-content td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:anywhere}
.lesson-content th{background:#f4f6f8;font-size:.7rem;color:#626c78}
.lesson-content td:first-child{font-weight:700;color:var(--blue)}
.lesson-content .table-wrap{overflow:hidden;border:1px solid var(--line);border-radius:10px;margin:10px 0 16px}
.lesson-content .table-wrap table{margin:0}
.lesson-content .examples{display:grid;gap:8px;margin:12px 0}
.lesson-content .example{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.lesson-content .example strong,.lesson-content .word b{color:var(--blue)}
.lesson-content .translation{display:block;color:var(--muted);font-size:.9rem}
.lesson-content .vocab{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lesson-content .word{border:1px solid var(--line);border-radius:10px;padding:9px;background:#fff;font-size:.9rem}
.lesson-content .word b{display:block}
.lesson-content .callout{background:#f5f8fc;border-left:3px solid var(--blue);padding:12px;margin:14px 0}
.lesson-content .writing{background:#f5f8fc;padding:14px;border-radius:12px;margin-top:18px}
.lesson-bottom{display:grid;gap:9px;margin:24px 0 10px}
.primary,.secondary{border:0;border-radius:11px;padding:13px 17px;font-weight:800}
.primary{background:var(--blue);color:white}
.secondary{background:var(--blue-soft);color:var(--blue)}
.full{width:100%}
.exercise-card,.review-panel,.status-card{border:1px solid var(--line);border-radius:16px;background:#fff;padding:17px;box-shadow:var(--shadow)}
.exercise-progress{display:flex;justify-content:space-between;color:var(--muted);font-size:.82rem;font-weight:700}
.question-card{margin:20px 0 12px}
.question-type{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);font-weight:800}
.question-prompt{font-size:1.1rem;font-weight:700;margin:8px 0 14px}
.question-sentence{font-size:1.05rem;background:#f6f8fb;padding:15px;border-radius:12px;margin:12px 0}
.option-list{display:grid;gap:9px}
.option-button{border:1px solid #dbe1e9;border-radius:10px;background:#fff;text-align:left;padding:12px 14px;font-weight:600;color:var(--ink)}
.option-button:active,.option-button:hover{border-color:var(--blue);background:var(--blue-soft)}
.tile-bank,.tile-answer{display:flex;flex-wrap:wrap;gap:8px;min-height:42px;margin:10px 0}
.tile{border:1px solid #d8e0eb;border-radius:9px;background:#fff;padding:9px 11px;color:var(--ink);font-weight:600}
.tile-answer{border:1px dashed #c8d2df;border-radius:10px;padding:10px;min-height:56px}
.tile.selected{background:var(--blue-soft);border-color:var(--blue)}
.feedback{padding:12px 13px;border-radius:11px;margin:14px 0;font-size:.92rem}
.feedback.good{background:var(--green-soft);color:#176c49}
.feedback.bad{background:var(--red-soft);color:#a51e28}
.feedback strong{display:block;margin-bottom:3px}
.answer-actions{display:grid;gap:8px;margin-top:16px}
.hidden{display:none!important}
.result-score{font-size:1.5rem;font-weight:800;margin:10px 0}
.writing-box{width:100%;min-height:130px;border:1px solid var(--line);border-radius:12px;padding:12px;resize:vertical}
.review-intro{margin:8px 0 16px;color:var(--muted)}
.status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:16px 0}
.status-card{padding:13px 10px;text-align:left;min-height:98px}
.status-card strong{display:block;font-size:1.65rem;line-height:1.1}
.status-card span{display:block;font-size:.76rem;font-weight:700;margin-top:8px;color:var(--muted)}
.status-card.working{border-bottom:5px solid var(--red)}
.status-card.review{border-bottom:5px solid var(--yellow)}
.status-card.mastered{border-bottom:5px solid var(--green)}
.status-card.selected{outline:2px solid var(--blue)}
.search-input,.answer-input{width:100%;border:1px solid #d9dfe7;border-radius:10px;padding:12px;background:#fff}
.word-list{display:grid;gap:0;margin:12px 0}
.word-row{padding:12px 2px;border-bottom:1px solid #edf0f3;display:flex;justify-content:space-between;gap:12px;align-items:center}
.word-row strong{display:block;color:var(--blue)}
.word-row span{display:block;color:var(--muted);font-size:.88rem}
.review-direction{display:flex;gap:8px;margin:14px 0}
.direction-button{flex:1;border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px;font-size:.82rem;font-weight:700;color:var(--muted)}
.direction-button.active{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:10;background:rgba(255,255,255,.97);border-top:1px solid var(--line);padding:8px 18px calc(8px + env(safe-area-inset-bottom));display:flex;justify-content:center;gap:8px;backdrop-filter:blur(12px)}
.nav-tab{width:min(48%,190px);border:0;background:transparent;color:#818894;border-radius:10px;padding:7px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.74rem;font-weight:700}
.nav-tab .nav-icon{font-size:1.15rem;line-height:1.1}
.nav-tab.active{color:var(--blue);background:var(--blue-soft)}
.empty-state{border:1px dashed #d7dde6;border-radius:12px;padding:18px;text-align:center;color:var(--muted);font-size:.9rem}
@media(min-width:640px){.app-header{padding-left:24px;padding-right:24px}main{padding-left:24px;padding-right:24px}.chapter-list{gap:16px}.chapter-card{padding:19px}.lesson-content .vocab{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:360px){.status-grid{gap:6px}.status-card{padding:10px 7px}.status-card strong{font-size:1.4rem}.path-copy small{display:none}.text-action{font-size:.78rem}}
html.js-enabled .lesson-screen{display:none}
html.js-enabled .lesson-screen.active{display:block}

/* Parlem Català additions */
.option-button.chosen-correct{background:var(--green-soft);border:2px solid var(--green);color:#176c49}
.option-button.chosen-wrong{background:var(--red-soft);border:2px solid var(--red);color:#a51e28}
.option-button:disabled{opacity:1;cursor:default}
.bottom-nav{justify-content:space-around;gap:4px}
.nav-tab{width:32%;max-width:150px}
.category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.category-card{border:1px solid var(--line);background:#f1f3f5;color:#20232a;border-radius:13px;padding:14px 12px;text-align:left;min-height:76px}
.category-card strong{display:block;font-size:.92rem}
.category-card small{color:#626b76}
.category-card.completed{background:var(--green-soft);border-color:var(--green);color:#176c49}
.category-card.completed small{color:#176c49}
.vocab-table{width:100%;border-collapse:collapse;margin:12px 0 16px}
.vocab-table td{width:50%;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.vocab-table td:last-child{color:var(--blue);font-weight:700}
.vocab-tools{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.mode-toggle{background:var(--blue-soft);color:var(--blue);border:0;border-radius:9px;padding:10px 12px;font-weight:700}
.enki-row{display:grid;grid-template-columns:1fr;gap:8px;margin:12px 0;padding:14px;border:1px solid var(--line);border-radius:12px}
.enki-row .prompt-word{font-size:1.08rem;font-weight:700}
.enki-row input{width:100%;padding:12px;border:1px solid #d9dfe7;border-radius:9px}
.enki-row .answer-hint{color:var(--blue);font-weight:700}
@media(min-width:540px){.category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Compléter / Enki Style */
.vocab-table td{padding:6px 8px}
.category-top{gap:8px}.category-actions{display:flex;align-items:center;gap:16px;flex-shrink:0}
.enki-grid{width:100%;border-collapse:collapse;table-layout:fixed;margin:10px 0 14px}
.enki-grid th,.enki-grid td{padding:6px 7px;border-bottom:1px solid #edf0f3;text-align:left;overflow-wrap:anywhere;vertical-align:middle}
.enki-grid th{font-size:.76rem;color:var(--muted);background:#f7f8fa}
.enki-grid input{width:100%;min-width:0;border:1px solid #dce2ea;border-radius:7px;padding:7px 8px;font-size:.9rem}
.enki-grid .answer-correct{color:#168451;font-weight:700;background:var(--green-soft);border-color:#b9e8d1}
.enki-grid .answer-wrong{color:#c5222d;background:var(--red-soft);border-color:#f2bfc3}
.enki-grid .accent-ok{color:#168451;font-weight:700}.enki-grid .accent-wrong{color:#c5222d;text-decoration:underline;text-decoration-thickness:2px}
.enki-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:14px}
.enki-footer .primary{padding:10px 18px}
.modal-backdrop{position:fixed;inset:0;background:rgba(20,28,40,.4);display:grid;place-items:center;z-index:30;padding:20px}
.modal-backdrop.hidden{display:none!important}.training-modal{background:#fff;border-radius:16px;padding:22px;width:min(100%,360px);box-shadow:0 12px 40px rgba(0,0,0,.18)}
.training-modal h3{margin:0 0 8px}.training-modal p{margin:0 0 18px}.training-modal>div{display:flex;justify-content:flex-end;gap:10px}

.category-top{flex-wrap:wrap}.category-top .category-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.enki-footer{display:flex;flex-wrap:wrap;gap:10px}.lesson-screen .writing textarea{display:block;width:100%;min-height:130px;margin:12px 0}.vocab-table td,.enki-grid td{padding-top:5px!important;padding-bottom:5px!important}
 .course-conj{width:100%;table-layout:fixed;border-collapse:collapse;margin:12px 0;font-size:.87rem}.course-conj th,.course-conj td{padding:9px 5px;border-bottom:1px solid #dfe7f0;text-align:left;overflow-wrap:anywhere}.course-conj th{background:#eef5ff;color:#173d74}.course-conj td:nth-child(2){color:#1c4587} .nav-line-icon{display:block;width:23px;height:23px;flex-shrink:0}.nav-tab{padding:8px 6px;gap:5px;min-width:0}.nav-tab span{font-size:.73rem;white-space:nowrap}

/* iOS Safari: prevent automatic zoom on focus of exercise text fields. */
@media (pointer: coarse) {
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
 textarea, select, [contenteditable="true"] {font-size:16px!important;}
}

/* Inici: only the three approved icon replacements */
#inici-screen .inici-stat-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 28px}
#inici-screen .inici-stat-custom-icon{display:block;width:28px;height:28px;object-fit:contain}
#inici-screen .inici-continue-book{width:20px;height:20px;vertical-align:-4px;margin-right:8px;color:#fff}
/* Inici: calibrated stat cards; no other page changes */
#inici-screen .inici-stat{justify-content:flex-start;gap:12px;padding:14px 12px;min-width:0}
#inici-screen .inici-stat-icon{width:54px;height:58px;flex:0 0 54px;position:relative;margin-right:1px}
#inici-screen .inici-stat-icon::after{content:"";position:absolute;right:-9px;top:7px;bottom:7px;width:1.5px;background:#B8C3DC;border-radius:2px}
#inici-screen .inici-stat-custom-icon{width:48px;height:48px;object-fit:contain}
#inici-screen .inici-stat>div{min-width:0;flex:1;text-align:left;padding-left:3px}
#inici-screen .inici-stat strong{font-size:clamp(25px,7vw,36px);line-height:1.08;text-align:left}
#inici-screen .inici-stat small{font-size:clamp(11px,3.1vw,14px);text-align:left;white-space:nowrap}
@media(max-width:360px){#inici-screen .inici-stat{gap:9px;padding:12px 8px}#inici-screen .inici-stat-icon{width:45px;flex-basis:45px}#inici-screen .inici-stat-custom-icon{width:42px;height:42px}#inici-screen .inici-stat-icon::after{right:-7px}}


#learn-screen>.chapter-list{display:none!important}#learn-screen>.page-heading p{display:none}.course-chapters{display:grid;gap:12px}.course-card{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:16px}.course-card h2{margin:5px 0 10px;font-size:1.1rem}.course-kicker{font-size:.75rem;color:#64748b;font-weight:700}.course-lesson{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;gap:8px;background:#f8fafc;border:1px solid #e2e8f0;padding:12px;margin-top:6px;border-radius:10px;color:#1b2b45;font-size:.9rem}.course-lesson.done{background:linear-gradient(110deg,#b8fbd0 0%,#62ed9b 52%,#26d779 100%);border:2px solid #16a85c;color:#073f28;box-shadow:0 4px 14px rgba(25,190,100,.22);font-weight:750}.course-lesson.done b{background:#087c42;color:white;border-radius:50%;width:27px;height:27px;display:grid;place-items:center;font-size:1rem}.grammar-point{border-left:3px solid #3b82f6;padding:1px 0 1px 13px;margin:14px 0}.grammar-point h3{font-size:1rem;margin:7px 0}.grammar-point p{margin:6px 0 12px;line-height:1.65}.course-lesson span{flex:1}.course-panel{padding:4px 0 28px}.course-panel h1{font-size:1.45rem}.course-panel h2{font-size:1.08rem;margin:22px 0 10px}.course-panel p{line-height:1.6}.course-vocab{width:100%;border-collapse:collapse;table-layout:fixed}.course-vocab td{padding:8px;border-bottom:1px solid #e5eaf0;overflow-wrap:anywhere}.course-vocab td:last-child{color:#1c4587;font-weight:600}.course-cta{border:0;background:#1c4587;color:white;padding:12px 17px;border-radius:10px;font-weight:700;cursor:pointer}.course-back{border:1px solid #cbd5e1;background:white;color:#1c4587;padding:10px 14px;border-radius:10px;cursor:pointer}.course-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.course-option{display:block;width:100%;border:1px solid #d7e1ed;border-radius:10px;background:white;text-align:left;padding:14px;margin:8px 0;font-size:1rem}.course-option.correct{background:#e2f7e8;border-color:#2c9b58}.course-option.wrong{background:#ffebeb;border-color:#d33}.course-option:disabled{opacity:1}.course-textarea{width:100%;min-height:145px;padding:12px;border:1px solid #cbd5e1;border-radius:12px;font:inherit}.course-icon-save{border:1px solid #cbd5e1;background:white;color:#1c4587;border-radius:8px;padding:7px;cursor:pointer;float:right;margin-bottom:7px}.course-progress{font-size:.83rem;color:#64748b;margin:8px 0}.course-feedback{margin:12px 0;font-weight:600}.course-screen{display:none}.course-screen.active{display:block}#course-lesson-screen,#course-quiz-screen{padding-bottom:30px}@media(max-width:480px){.course-card{padding:12px}.course-lesson{min-height:48px}}


/* Exact 3-tab navigation: each active tab highlights its own cell */
.bottom-nav{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;align-items:stretch}
.bottom-nav .nav-tab{width:100%!important;max-width:none!important;min-width:0!important;justify-self:stretch!important}
.bottom-nav .nav-tab.active{background:#eaf1fb!important;color:#1c4587!important;border-radius:12px!important}
/* Consistent thematic cards */
.category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;grid-auto-rows:1fr}
.category-card{height:100%;min-height:92px;display:flex;flex-direction:column;justify-content:center;gap:5px}
@media(min-width:540px){.category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Exercise options and horizontal word chips */
.course-options,.course-answer{display:flex!important;flex-flow:row wrap!important;gap:8px!important;align-items:flex-start!important;justify-content:flex-start!important}
.course-options .course-option,.course-answer .course-option{display:inline-flex!important;width:auto!important;max-width:100%!important;flex:0 0 auto!important;min-height:43px;align-items:center;justify-content:center;padding:9px 13px!important;margin:0!important;overflow-wrap:anywhere}
.course-options .course-option.correct-choice{background:#e2f7e8!important;border:2px solid #23884e!important;color:#176c49!important}
.course-options .course-option.wrong-choice{background:#ffebeb!important;border:2px solid #d33!important;color:#9c1f28!important}
.course-options .course-option:disabled{opacity:1!important}
.course-answer{min-height:56px;padding:10px;border:1px dashed #d7e1ed;border-radius:10px;margin:10px 0}
.course-feedback{margin-top:14px}
.course-vocab{table-layout:fixed;width:100%}.course-vocab td{width:50%;overflow-wrap:anywhere}


.category-card{min-height:55px!important;height:66px!important;padding:8px 12px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:2px!important}
.category-card strong{font-size:.88rem!important;line-height:1.2}
.category-card small{color:#1c4587!important;font-size:.76rem!important;font-weight:700!important}
.category-grid{grid-auto-rows:66px!important}
.course-conjugation{width:100%;table-layout:fixed;border-collapse:collapse;margin:10px 0 22px;font-size:.86rem}
.course-conjugation th,.course-conjugation td{padding:10px 6px;border-bottom:1px solid #e1e6ed;text-align:left;vertical-align:top;overflow-wrap:anywhere}
.course-conjugation th{color:#1c4587;background:#f2f6fc;font-size:.78rem}
.course-conjugation td:first-child{color:#626b76;font-size:.82rem}
.course-conjugation td:nth-child(2){color:#1c4587}
.course-options .course-option{display:inline-flex!important;width:auto!important;flex:0 0 auto!important}


#parlem-splash{position:fixed;inset:0;z-index:99999;background:#d5eafa;display:flex;align-items:center;justify-content:center;overflow:hidden}
#parlem-splash .splash-art{height:100%;width:100%;object-fit:contain;object-position:center center;display:block}
#parlem-splash .splash-start{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);border:0;border-radius:18px;background:#06472e;color:white;padding:15px 38px;font-size:1.08rem;font-weight:750;box-shadow:0 5px 20px #092f2344;cursor:pointer;white-space:nowrap}
#parlem-splash .splash-start:focus-visible{outline:3px solid #f6c329;outline-offset:4px}
#parlem-splash[hidden]{display:none!important}
@media (min-aspect-ratio: 941/1671){#parlem-splash{background:#c7e1f9}}


#learn-screen{padding-bottom:90px!important;background:linear-gradient(180deg,#eef3ff 0,#f7f9ff 460px,#f8faff 100%)!important}
#learn-screen>.page-heading{display:none!important}
.app-header{display:none!important}
#course-chapters{display:block!important;position:relative;padding:0 12px 18px!important}
.learn-hero{position:relative;min-height:210px;overflow:hidden;padding:24px 16px 0;background:linear-gradient(140deg,#f7f9ff,#cbdcff);border-radius:0 0 24px 24px}
.learn-hero .learn-logo{font-weight:850;color:#10134b;font-size:17px;letter-spacing:-.4px}
.learn-hero h1{font-size:34px;color:#0d124d;margin:23px 0 2px}
.learn-hero p{font-size:13px;color:#263b75;margin:0}
.learn-hero img{position:absolute;right:-2%;bottom:-2px;width:51%;max-height:205px;object-fit:contain;object-position:bottom;pointer-events:none;/* fade the cropped illustration into the hero rather than exposing its rectangular edges */}
.learn-hero{background:linear-gradient(115deg,#f1f5ff 0%,#e4ecff 50%,#dce8ff 100%)}
@media(max-width:430px){.learn-hero img{width:55%;right:-4%;max-height:195px}.learn-hero h1{position:relative;z-index:1;font-size:32px}.learn-hero p{position:relative;z-index:1}}
.learn-progress{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;border-radius:19px;background:#fff;box-shadow:0 6px 17px #324d9222;min-height:72px}
.learn-progress .progress-main{flex:1;min-width:0}
.learn-progress .progress-heading{font-weight:800;font-size:13px;color:#10134b;margin-bottom:8px}
.learn-progress .progress-rail{height:10px;background:#c7d6ff;border-radius:30px;overflow:hidden}
.learn-progress .progress-bar{height:100%;background:#536bff;border-radius:30px;transition:width .25s}
.learn-progress .progress-number{font-weight:850;color:#10134b;white-space:nowrap;font-size:20px}
.learn-progress.big{position:relative;margin:-6px 0 16px}
.learn-progress.sticky{position:fixed;top:0;left:0;right:0;width:100%;z-index:50;border-radius:0 0 18px 18px;padding:8px 14px;min-height:60px;transform:translateY(-115%);transition:transform .18s;pointer-events:none}
body.learn-scrolled .learn-progress.sticky{transform:translateY(0);pointer-events:auto}
.learn-progress.sticky .progress-heading{display:none}
.learn-progress.sticky .sticky-donkey{width:44px;height:44px;object-fit:cover;object-position:center;border-radius:12px}
.learn-progress.sticky .progress-rail{height:9px}
.chapter-timeline{position:relative;padding:0 0 20px}
.chapter-timeline:before{content:"";position:absolute;left:29px;top:30px;bottom:50px;width:3px;background:#536bff;border-radius:5px}
.path-chapter{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;align-items:start;margin:0 0 10px}
.path-node{position:relative;z-index:1;width:43px;height:43px;border-radius:50%;margin:8px 0 0 9px;display:grid;place-items:center;background:#f1f3f9;border:2px solid #cbd3e6;color:#5d6988;font-size:20px;font-weight:800}
.path-node.done{background:#20ac70;color:white;border-color:#20ac70}
.path-node.current{background:#536bff;color:white;border-color:#536bff}
.path-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:62px;padding:12px 14px;border:1px solid #e4e9f7;border-radius:18px;background:#fff;text-align:left;box-shadow:0 4px 11px #324d9216;color:#10134b}
.path-toggle.current,.path-toggle[aria-expanded="true"]{background:#e1e9ff;border-color:#b2c4ff}
.path-toggle strong{font-size:15px;display:block;line-height:1.25}
.path-toggle small{display:block;font-size:12px;color:#647092;margin-top:4px}
.path-toggle .toggle-icon{font-size:18px;color:#536bff;flex:none}
.path-details{margin:6px 0 4px;display:grid;gap:6px}
.path-details[hidden]{display:none!important}
.path-details .course-lesson{background:#fff;border:1px solid #e4e9f7;border-radius:12px;padding:11px;font-size:12px;min-height:44px}
.path-details .course-lesson:disabled{opacity:.6}
.bottom-nav{position:fixed!important;bottom:0!important;z-index:60!important;padding:5px 8px max(6px,env(safe-area-inset-bottom))!important}
.bottom-nav .nav-tab{padding:5px 4px!important;font-size:11px!important}
.bottom-nav .nav-line-icon{height:20px!important;width:20px!important}
@media(min-width:680px){.learn-progress.sticky{max-width:680px;left:50%;transform:translate(-50%,-115%)}body.learn-scrolled .learn-progress.sticky{transform:translate(-50%,0)}}


/* Option E — timeline de leçons à l'intérieur de chaque chapitre */
.path-details.path-lesson-steps{margin:8px 0 12px 4px;display:block;gap:0}
.path-lesson-steps .lesson-step-track{position:relative;padding:0 0 0 0}
.path-lesson-steps .lesson-step-track:before{content:"";position:absolute;left:17px;top:23px;bottom:27px;width:2px;background:linear-gradient(180deg,#536bff 0%,#b7c6ff 48%,#d8deed 100%);border-radius:4px}
.path-lesson-steps .lesson-step{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;column-gap:8px;margin:0 0 7px;min-height:49px}
.path-lesson-steps .lesson-step-dot{z-index:1;display:grid;place-items:center;width:23px;height:23px;margin-left:6px;border-radius:50%;border:2px solid #c8d0e5;background:#fff;color:#fff;font-size:12px;font-weight:800;box-shadow:0 1px 3px #172e5512}
.path-lesson-steps .lesson-step-dot.is-done{background:#16965c;border-color:#16965c}
.path-lesson-steps .lesson-step-dot.is-next{background:#fff;border-color:#536bff;box-shadow:0 0 0 3px #536bff12}
.path-lesson-steps .lesson-step-dot.checkpoint-dot{width:29px;height:29px;margin-left:3px;background:#536bff;border-color:#536bff;color:#fff;font-size:16px}
.path-lesson-steps .lesson-step-dot.checkpoint-dot.is-done{background:#16965c;border-color:#16965c}
.path-lesson-steps .course-lesson.lesson-step-card{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:11px 13px;border:1px solid #e3e8f6;border-radius:15px;background:#fff;box-shadow:0 2px 6px #283a7010;color:#141b46;font-size:13px;text-align:left;line-height:1.3}
.path-lesson-steps .course-lesson.lesson-step-card b{font-size:16px;color:#536bff;flex:none}
.path-lesson-steps .course-lesson.lesson-step-card.done{background:#D3F0E1;border-color:#18B66B;color:#143e2a;font-weight:650}
.path-lesson-steps .course-lesson.lesson-step-card.done b{color:#16965c}
.path-lesson-steps .course-lesson.lesson-step-card.is-available{border-color:#b9c8ff;background:#f9fbff}
.path-lesson-steps .course-lesson.lesson-step-card:disabled{opacity:1;background:#f9faff;color:#7b849a;border-color:#e8ecf5;box-shadow:none}
.path-lesson-steps .course-lesson.lesson-step-card:disabled b{color:#a3acc0}
.path-lesson-steps .course-lesson.checkpoint-card{background:#eae7ff;border-color:#dad4ff;font-weight:700}
.path-lesson-steps .course-lesson.checkpoint-card:disabled{background:#f0edff;border-color:#e3ddff;color:#52567d}
.path-lesson-steps .checkpoint-card small{display:block;margin-top:2px;font-size:11px;font-weight:400;color:#697195}
.path-lesson-steps .lesson-step-final{margin-top:11px}
@media(max-width:390px){.path-lesson-steps .course-lesson.lesson-step-card{font-size:12px;padding:10px}.path-lesson-steps .lesson-step{column-gap:5px}}


:root{--blue:#536bff;--blue-soft:#edf0ff;--parlem-blue:#536bff;--parlem-blue-light:#7587f6;--parlem-navy:#10134b}
/* Dark navy is for text; bright blue is for clickable primary surfaces. */
#course-lesson-screen .grammar-catalan{color:var(--parlem-navy);font-weight:800}
#course-lesson-screen .course-conjugation td:nth-child(2),
#course-lesson-screen .course-conjugation td:nth-child(2) b,
#course-lesson-screen .course-lesson-content p>b{color:var(--parlem-navy);font-weight:800}
.course-cta{background:var(--parlem-blue)!important;color:#fff!important}
.course-back,.back-button{color:var(--parlem-navy)!important}
/* Consistent colors on progress and active navigation, retaining semantic green success. */
.path-node.current,.learn-progress .progress-bar{background:var(--parlem-blue)!important}
.path-toggle.current,.path-toggle[aria-expanded="true"]{border-color:var(--parlem-blue-light)!important}
#course-lesson-screen,#course-quiz-screen{font-size:14.667px}
#course-lesson-screen p,#course-lesson-screen td,#course-lesson-screen th,
#course-quiz-screen p,#course-quiz-screen .course-option{font-size:14.667px}
#course-lesson-screen h2,#course-quiz-screen h2{font-size:calc(1.3rem - 1.333px)}
#course-lesson-screen h3,#course-quiz-screen h3{font-size:calc(1.1rem - 1.333px)}
#course-lesson-screen .course-progress,#course-quiz-screen .course-progress{font-size:12.667px}


/* New tab headers, consistent with Aprendre, no modifications to Aprendre layout */
#review-screen,#complete-screen{background:linear-gradient(180deg,#edf3ff 0,#f8faff 430px,#fff 100%);padding-bottom:96px}
.section-mascot-hero{height:205px;position:relative;overflow:hidden;border-radius:0 0 23px 23px;background:linear-gradient(140deg,#f7f9ff,#d8e5ff);padding:23px 16px}
.section-mascot-copy{position:relative;z-index:2;max-width:62%}
.section-mascot-brand{font-size:17px;font-weight:850;color:#10134b;letter-spacing:-.4px}
.section-mascot-hero h1{font-size:32px;line-height:1.12;letter-spacing:-.04em;margin:28px 0 7px;color:#10134b}
.section-mascot-hero p{font-size:12px;line-height:1.35;margin:0;color:#263b75}
.section-mascot-hero img{position:absolute;right:0;bottom:0;width:47%;height:95%;object-fit:contain;object-position:bottom right;pointer-events:none}
#complete-screen .section-mascot-hero img{width:46%;height:100%;right:1%}
#review-screen .status-grid,#complete-screen #complete-home{margin-top:17px}
#review-screen .word-list,#review-screen .review-panel,#review-screen .status-grid,#complete-screen .category-grid,#complete-screen .review-panel{font-size:calc(1rem - 2pt)}
#review-screen .word-list button,#complete-screen .category-grid button,#complete-screen #category-words,#complete-screen #enki-question{font-size:calc(1rem - 2pt)}
#review-screen .review-intro{display:none}
#course-quiz-screen .quiz-swipe-prompt{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:22px 0 12px;text-align:center;color:#2c41c8;font-size:13px;font-weight:650}
#course-quiz-screen .quiz-manual-next{border:1px solid #b9c7ff;background:#edf2ff;border-radius:12px;color:#2c41c8;font-weight:700;padding:9px 12px;cursor:pointer}
#course-quiz-screen .course-feedback.correct{color:#176c49}
#course-quiz-screen .course-feedback.wrong{color:#9c1f28}
/* The Catalan expressions in grammar and examples use the requested navy-blue shade */
#course-lesson-screen .grammar-explanation strong,#course-lesson-screen .course-conjugation td:nth-child(2) b,#course-lesson-screen #course-lesson-content>p>b{color:#2c41c8!important;font-weight:750!important}
@media(max-width:380px){.section-mascot-hero h1{font-size:29px}.section-mascot-hero img{width:44%}}


#review-screen .practicar-quiz-cta{margin:12px 0 16px;background:#536bff;color:#fff;border-radius:16px}
#review-screen .status-grid{gap:8px;margin:0 0 14px}
#review-screen .status-card{position:relative;background:#fff!important;border:1px solid #e3e9fa!important;box-shadow:0 3px 9px #283f7b12!important;border-radius:15px;padding:12px 5px 14px;overflow:hidden;color:#10134b}
#review-screen .status-card:after{content:"";position:absolute;bottom:0;left:0;right:0;height:4px}
#review-screen .status-card.working:after{background:#e74750}
#review-screen .status-card.review:after{background:#ffbf21}
#review-screen .status-card.mastered:after{background:#29b66a}
#review-screen .status-card.selected{outline:2px solid #7587f6}
#review-screen .status-card strong{font-size:18px;color:#10134b}
#review-screen .status-card span{font-size:11px;color:#52617e}
#review-screen #review-list-panel{background:transparent;box-shadow:none;border:0;padding:0}
#review-screen #review-list-panel .screen-top h2{font-size:16px}
#review-screen .word-list{display:grid;gap:5px}
#review-screen .practicar-word-row{display:grid;grid-template-columns:11px minmax(0,1fr) minmax(0,1fr);align-items:center;gap:10px;background:#fff;border:1px solid #e3e9fa;border-radius:12px;padding:9px 12px;min-height:42px;box-shadow:0 2px 6px #263b7510;font-size:calc(1rem - 2pt)}
#review-screen .practicar-word-row strong{color:#2c41c8;font-weight:750;overflow-wrap:anywhere}
#review-screen .practicar-fr{color:#263b75;overflow-wrap:anywhere}
#review-screen .practicar-dot{width:10px;height:10px;border-radius:50%}
#review-screen .practicar-dot.working{background:#e74750}
#review-screen .practicar-dot.review{background:#ffbf21}
#review-screen .practicar-dot.mastered{background:#29b66a}
#review-screen .review-filter-action{margin:14px 0;padding:12px;background:#fff;border-radius:14px;border:1px solid #dce5fc}
#review-screen .review-filter-action p{font-size:12px;margin:0 0 9px;color:#263b75}
#review-screen #review-quiz-panel{margin-top:12px}
#review-screen #review-quiz-panel .question-prompt{color:#2c41c8;font-weight:750}

.learn-hero img{width:49%;max-height:205px;object-fit:contain;object-position:bottom right}

/* The two hero panels are composed as layouts, not image screenshots. */
#learn-screen .learn-hero,
#review-screen .section-mascot-hero {
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  height:258px!important;
  min-height:258px!important;
  padding:21px 15px 0!important;
  background:linear-gradient(125deg,#f0f5ff 0%,#e0ebff 64%,#cbdfff 100%)!important;
  border-radius:0 0 26px 26px!important;
  margin:0 -12px 0!important;
}
#learn-screen .learn-hero:before,
#review-screen .section-mascot-hero:before {
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-14%;right:-18%;bottom:-53px;height:135px;
  background:linear-gradient(120deg,#c1d9ff,#9dc4ff);
  border-radius:50% 42% 0 0/47% 40% 0 0;
  transform:rotate(-3deg);
}
#learn-screen .learn-hero:after,
#review-screen .section-mascot-hero:after {
  content:"";position:absolute;z-index:-2;pointer-events:none;
  right:7%;bottom:60px;width:48px;height:95px;opacity:.27;
  background:linear-gradient(0deg,#4e8fe8,#4e8fe8);
  clip-path:polygon(0 100%,0 60%,16% 60%,23% 5%,30% 60%,42% 60%,49% 0,57% 60%,69% 60%,77% 14%,85% 60%,100% 60%,100% 100%);
}
#learn-screen .learn-hero .learn-logo,
#review-screen .section-mascot-brand {
  font-size:16px!important;font-weight:850!important;
  color:#10134b!important;line-height:1.1!important;
  max-width:145px;position:relative;z-index:2;
}
#learn-screen .learn-hero h1,
#review-screen .section-mascot-hero h1 {
  color:#10134b!important;font-size:33px!important;line-height:1.05!important;
  letter-spacing:-.045em!important;font-weight:850!important;
  margin:33px 0 8px!important;position:relative;z-index:2;
}
#learn-screen .learn-hero p,
#review-screen .section-mascot-hero p {
  color:#263b75!important;font-size:12px!important;line-height:1.4!important;
  position:relative;z-index:2;max-width:53%;margin:0!important;
}
#learn-screen .learn-hero img {
  position:absolute!important;right:0!important;bottom:0!important;
  width:59%!important;height:235px!important;max-height:none!important;
  object-fit:contain!important;object-position:right bottom!important;
  mask-image:none!important;-webkit-mask-image:none!important;
  z-index:1!important;pointer-events:none!important;
}
#review-screen .section-mascot-hero img {
  position:absolute!important;right:-2%!important;bottom:0!important;
  width:52%!important;height:226px!important;max-height:none!important;
  object-fit:contain!important;object-position:right bottom!important;
  z-index:1!important;pointer-events:none!important;
}
#review-screen .section-mascot-copy{position:static!important;max-width:none!important}
#review-screen .section-mascot-hero h1{margin-top:38px!important}
#review-screen .section-mascot-hero p{max-width:57%!important}
#learn-screen .learn-progress.big {
  margin:-2px -2px 17px!important;
  width:calc(100% + 4px)!important;
  min-height:82px!important;border:1px solid #bfd4ff!important;
  border-radius:22px!important;box-shadow:0 7px 17px #385ba52a!important;
  padding:15px 13px!important;z-index:3!important;
}
#learn-screen .learn-progress.big .progress-heading{font-size:15px!important}
#learn-screen .learn-progress.big .progress-number{font-size:20px!important}
#learn-screen .learn-progress.big .progress-rail{height:10px!important}
#review-screen .practicar-quiz-cta{
  display:block!important;width:100%!important;
  margin:15px 0 17px!important;padding:15px 10px!important;
  background:#536bff!important;border-radius:40px!important;
  box-shadow:0 6px 13px #365cf535!important;color:#fff!important;
  font-size:16px!important;font-weight:800!important;
}
#review-screen .status-grid{margin:0 0 17px!important;gap:9px!important}
#review-screen .status-card{
  min-height:76px!important;text-align:center!important;
  border-radius:18px!important;background:#fff!important;
  border:1px solid #dce6fa!important;box-shadow:0 5px 11px #3651a21c!important;
  padding:10px 3px 13px!important;
}
#review-screen .status-card strong{font-size:20px!important;line-height:1.1!important}
#review-screen .status-card span{font-size:11px!important;margin-top:6px!important}
#review-screen .practicar-word-row{
  border-radius:22px!important;padding:9px 13px!important;min-height:43px!important;
  box-shadow:0 3px 8px #3651a217!important;
}
#review-screen .practicar-word-row strong{color:#2c41c8!important}
#review-screen .practicar-word-row .practicar-fr{color:#172247!important}
@media(max-width:360px){
 #learn-screen .learn-hero img{width:55%!important;height:208px!important}
 #learn-screen .learn-hero h1,#review-screen .section-mascot-hero h1{font-size:29px!important}
 #learn-screen .learn-hero p,#review-screen .section-mascot-hero p{font-size:11px!important}
}


/* Final overrides of the two headers; mobile first, no changes to course mechanics */
#learn-screen .learn-hero,
#review-screen .section-mascot-hero{
 height:215px!important;min-height:215px!important;
 padding:17px 15px 0!important;
 margin:0 -12px!important;
 border-radius:0 0 24px 24px!important;
 overflow:hidden!important;
 background:linear-gradient(125deg,#eef4ff 0%,#e1ebff 64%,#d2e3ff 100%)!important;
}
#learn-screen .learn-hero:before,
#review-screen .section-mascot-hero:before{
 z-index:0!important;bottom:-82px!important;height:128px!important;
 left:-25%!important;right:-25%!important;
 border-radius:50% 55% 0 0!important;
 transform:rotate(-4deg)!important;
 background:linear-gradient(110deg,#c5dbff,#9fc5ff)!important;
}
#learn-screen .learn-hero:after,
#review-screen .section-mascot-hero:after{right:5%!important;bottom:57px!important;opacity:.25!important}
#learn-screen .learn-hero .learn-logo,
#review-screen .section-mascot-brand{
 font-size:15px!important;line-height:1.15!important;
 max-width:148px!important;position:relative!important;z-index:3!important;
}
#learn-screen .learn-hero h1,
#review-screen .section-mascot-hero h1{
 font-size:32px!important;line-height:1.08!important;
 margin:32px 0 7px!important;letter-spacing:-.04em!important;
 position:relative!important;z-index:3!important;
}
#learn-screen .learn-hero p,
#review-screen .section-mascot-hero p{
 font-size:12px!important;line-height:1.3!important;
 max-width:56%!important;position:relative!important;z-index:3!important;
}
#learn-screen .learn-hero img{
 position:absolute!important;right:0!important;bottom:0!important;
 width:53%!important;height:202px!important;max-height:none!important;
 object-fit:contain!important;object-position:right bottom!important;
 z-index:2!important;mask-image:none!important;-webkit-mask-image:none!important;
}
#review-screen .section-mascot-hero img{
 position:absolute!important;right:1%!important;bottom:-2px!important;
 width:44%!important;height:174px!important;max-height:none!important;
 object-fit:contain!important;object-position:right bottom!important;z-index:2!important;
}
#review-screen .section-mascot-hero h1{margin-top:34px!important}
#learn-screen .learn-progress.big{
 margin:0 -2px 15px!important;min-height:76px!important;
 padding:12px 13px!important;border-radius:19px!important;
}
#review-screen .practicar-quiz-cta{margin:13px 0 13px!important;padding:13px 8px!important;font-size:15px!important}
#review-screen .status-card{min-height:68px!important;padding:9px 3px 11px!important}
#review-screen .status-card strong{font-size:18px!important}
#review-screen .status-card span{font-size:11px!important;margin-top:5px!important}
#review-screen .practicar-word-row{min-height:38px!important;padding:7px 12px!important}
@media(min-width:600px){
 #learn-screen .learn-hero,#review-screen .section-mascot-hero{height:250px!important;min-height:250px!important}
 #learn-screen .learn-hero img{height:240px!important;width:48%!important}
 #review-screen .section-mascot-hero img{height:216px!important;width:41%!important}
}


#learn-screen .learn-hero .learn-logo,
#review-screen .section-mascot-brand{display:flex!important;align-items:center!important;gap:7px!important;max-width:185px!important;font-size:15px!important}
.parlem-brand-bubble{position:relative;display:inline-grid;place-items:center;flex:none;width:37px;height:31px;border:3px solid #093b2a;border-radius:50%;background:#fff;transform:rotate(-6deg)}
.parlem-brand-bubble:after{content:"";position:absolute;bottom:-7px;left:4px;width:10px;height:9px;border-left:3px solid #093b2a;border-bottom:3px solid #093b2a;background:#fff;transform:skew(-28deg)}
.parlem-brand-stripes{display:block;width:27px;height:21px;border-radius:50%;background:repeating-linear-gradient(90deg,#ffdb16 0 5px,#ed3d20 5px 9px)}


/* Clearer, larger branding, consistent for both tabs */
#learn-screen .learn-hero,#review-screen .section-mascot-hero{height:252px!important;min-height:252px!important;padding:18px 17px 0!important}
#learn-screen .learn-hero .learn-logo,#review-screen .section-mascot-brand{font-size:19px!important;max-width:230px!important;gap:10px!important;line-height:1.05!important}
#learn-screen .parlem-brand-bubble,#review-screen .parlem-brand-bubble{width:46px!important;height:39px!important;border-width:3px!important}
#learn-screen .parlem-brand-stripes,#review-screen .parlem-brand-stripes{width:34px!important;height:27px!important}
#learn-screen .learn-hero h1,#review-screen .section-mascot-hero h1{font-size:39px!important;line-height:1.03!important;margin:32px 0 7px!important}
#learn-screen .learn-hero p,#review-screen .section-mascot-hero p{font-size:13px!important;max-width:55%!important}
/* Keep complete donkey within frame, not clipped at top or sides */
#learn-screen .learn-hero img{width:53%!important;height:222px!important;right:2%!important;bottom:0!important;object-fit:contain!important;object-position:center bottom!important}
#review-screen .section-mascot-hero img{width:43%!important;height:205px!important;right:4%!important;bottom:0!important;object-fit:contain!important;object-position:center bottom!important}
#learn-screen .learn-hero:before,#review-screen .section-mascot-hero:before{bottom:-77px!important;height:130px!important}
#review-screen .section-mascot-hero h1{margin-top:32px!important}
#review-screen .status-grid{margin-top:2px!important}
#review-screen #review-list-panel{margin-top:4px!important}
#review-screen .word-list{display:grid!important;gap:6px!important}
#review-screen .practicar-word-row{display:grid!important;grid-template-columns:11px minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important;align-items:center!important;min-height:43px!important;font-size:calc(1rem - 2pt)!important}
#review-screen .practicar-word-row strong{color:#2c41c8!important;font-weight:750!important}
@media(max-width:370px){#learn-screen .learn-hero h1,#review-screen .section-mascot-hero h1{font-size:35px!important}#learn-screen .learn-hero img{width:50%!important}#review-screen .section-mascot-hero img{width:41%!important}}


/* Only Practicar / Aprofundir mascots and active navigation; Aprendre hero untouched */
#review-screen .section-mascot-hero img{
  width:54%!important;height:192px!important;
  right:0!important;bottom:-2px!important;
  object-fit:contain!important;object-position:center bottom!important;
  filter:none!important;opacity:1!important;
}
#complete-screen .section-mascot-hero img{
  width:50%!important;height:190px!important;
  right:0!important;bottom:0!important;
  object-fit:contain!important;object-position:center bottom!important;
  filter:none!important;opacity:1!important;
}
.bottom-nav .nav-tab.active,
.bottom-nav .nav-tab[data-action="tab-learn"].active{
 background:#dce8ff!important;color:#2355ee!important;
 border-radius:18px!important;
}
.bottom-nav .nav-tab.active .nav-line-icon{color:#2355ee!important;stroke:#2355ee!important}
@media(max-width:380px){
 #review-screen .section-mascot-hero img{width:52%!important;height:181px!important}
 #complete-screen .section-mascot-hero img{width:48%!important;height:180px!important}
}


/* Option 3 — illustrated horizontal category banners; preserve existing header and category interactions. */
#complete-screen #complete-home{margin-top:17px!important;padding:0 2px 24px}
#complete-screen #category-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-auto-rows:auto!important;gap:12px!important;margin:0!important}
#complete-screen .category-card.apro-banner{
 --apro-ink:#20356b;--apro-bg:#eef4ff;--apro-border:#dce7fa;
 display:grid!important;grid-template-columns:minmax(0,1fr) 102px 16px!important;
 align-items:center!important;column-gap:3px!important;position:relative!important;
 width:100%!important;min-width:0!important;height:auto!important;min-height:104px!important;
 padding:12px 13px 12px 17px!important;text-align:left!important;
 border-radius:20px!important;border:1px solid var(--apro-border)!important;
 background:linear-gradient(105deg,#fff 0%,var(--apro-bg) 100%)!important;
 box-shadow:0 4px 11px rgba(31,67,135,.11)!important;
 color:#10134b!important;overflow:hidden!important;
 transition:transform .15s ease,box-shadow .15s ease;
}
#complete-screen .category-card.apro-banner:active{transform:scale(.99)}
#complete-screen .category-card.apro-banner:focus-visible{outline:3px solid #536bff;outline-offset:2px}
#complete-screen .apro-banner-copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:7px;min-width:0}
#complete-screen .apro-banner-copy strong{font-size:calc(1rem - 2pt)!important;line-height:1.2!important;font-weight:800!important;color:#10134b!important;overflow-wrap:anywhere}
#complete-screen .apro-banner-copy small{font-size:calc(.94rem - 2pt)!important;line-height:1.2!important;color:#344b7c!important}
#complete-screen .apro-banner-art{position:relative;z-index:1;display:grid;place-items:center;width:98px;height:72px;font-size:53px;line-height:1;filter:drop-shadow(0 3px 2px rgba(22,48,96,.10));transform:rotate(-3deg)}
#complete-screen .apro-banner-chevron{z-index:2;font-size:30px;font-weight:400;line-height:1;color:#14275d}
#complete-screen .apro-home{--apro-bg:#fff2d7!important;--apro-border:#f5e1ae!important}
#complete-screen .apro-family{--apro-bg:#e8f7e9!important;--apro-border:#d4ebd8!important}
#complete-screen .apro-food,#complete-screen .apro-kitchen{--apro-bg:#fff0e8!important;--apro-border:#f2ddcf!important}
#complete-screen .apro-nature,#complete-screen .apro-animals{--apro-bg:#e7f3ff!important;--apro-border:#d1e6fa!important}
#complete-screen .apro-verbs,#complete-screen .apro-questions{--apro-bg:#eee9ff!important;--apro-border:#ded6fc!important}
#complete-screen .apro-prepositions,#complete-screen .apro-places{--apro-bg:#e8f3ff!important;--apro-border:#d5e6fb!important}
#complete-screen .apro-time,#complete-screen .apro-adverbs{--apro-bg:#fff3db!important;--apro-border:#f5e4bc!important}
#complete-screen .apro-jobs,#complete-screen .apro-clothes{--apro-bg:#edf2ff!important;--apro-border:#dce5fa!important}
#complete-screen .apro-colors,#complete-screen .apro-body{--apro-bg:#ffebf1!important;--apro-border:#f6dbe5!important}
#complete-screen .category-card.apro-banner.completed{box-shadow:0 4px 11px rgba(31,67,135,.11)!important}
@media(max-width:360px){#complete-screen .category-card.apro-banner{grid-template-columns:minmax(0,1fr) 78px 12px!important;min-height:83px!important}#complete-screen .apro-banner-art{width:76px;font-size:43px}#complete-screen .apro-banner-copy strong{font-size:12px!important}}
@media(min-width:600px){#complete-screen #category-grid{max-width:570px;margin:0 auto!important}}


#complete-screen .apro-categories-heading{display:flex;justify-content:space-between;align-items:center;padding:6px 4px 15px;font-weight:800;color:#10134b;font-size:17px}
#complete-screen .apro-categories-heading span{font-size:11px;font-weight:650;color:#536bff}
#complete-screen #category-grid{grid-auto-rows:auto!important;grid-template-columns:minmax(0,1fr)!important}
#complete-screen #category-grid .category-card.apro-banner{height:auto!important;min-height:104px!important;max-height:none!important;display:grid!important;grid-template-columns:minmax(0,1fr) 100px 15px!important;align-items:center!important;justify-content:initial!important}
#complete-screen #category-grid .category-card.apro-banner .apro-banner-art{font-size:49px!important}


/* Exact shared header geometry, only complete tab affected */
#complete-screen .section-mascot-hero{height:215px!important;min-height:215px!important;margin:0 -12px!important;padding:17px 15px 0!important;border-radius:0 0 24px 24px!important;background:linear-gradient(125deg,#eef4ff,#d2e3ff)!important;overflow:hidden!important;position:relative!important}
#complete-screen .section-mascot-hero:before{content:"";position:absolute;left:-25%;right:-25%;bottom:-82px;height:128px;background:linear-gradient(110deg,#c5dbff,#9fc5ff);border-radius:50% 55% 0 0;transform:rotate(-4deg)}
#complete-screen .section-mascot-brand{display:flex!important;align-items:center!important;gap:7px!important;font-size:17px!important;font-weight:850!important;max-width:185px!important;position:relative;z-index:3}
#complete-screen .section-mascot-hero h1{font-size:35px!important;line-height:1.08!important;letter-spacing:-.04em!important;margin:30px 0 7px!important;color:#10134b!important;position:relative;z-index:3}
#complete-screen .section-mascot-hero p{font-size:12px!important;color:#263b75!important;max-width:54%!important;position:relative;z-index:3}
#complete-screen .section-mascot-hero img{position:absolute!important;right:1%!important;bottom:0!important;width:45%!important;height:183px!important;object-fit:contain!important;object-position:right bottom!important;opacity:1!important;filter:none!important;z-index:2!important}
/* Option 3: refined, illustrated horizontal banners, single-column portrait layout */
#complete-screen #complete-home{margin-top:15px!important}
#complete-screen .apro-categories-heading{padding:5px 3px 12px!important;font-size:16px!important;color:#10134b!important}
#complete-screen #category-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-auto-rows:auto!important;gap:9px!important;margin:0!important}
#complete-screen #category-grid .category-card.apro-banner{display:grid!important;grid-template-columns:minmax(0,1fr) 54px 13px!important;align-items:center!important;gap:9px!important;height:80px!important;min-height:80px!important;max-height:80px!important;width:100%!important;min-width:0!important;border-radius:17px!important;padding:10px 13px 10px 17px!important;box-shadow:0 3px 9px #23457816!important;text-align:left!important;overflow:hidden!important}
#complete-screen #category-grid .apro-banner-copy{display:flex!important;flex-direction:column!important;gap:5px!important;min-width:0!important}
#complete-screen #category-grid .apro-banner-copy strong{font-size:14px!important;line-height:1.2!important;color:#10134b!important;font-weight:800!important}
#complete-screen #category-grid .apro-banner-copy small{font-size:12px!important;line-height:1.1!important;color:#4c6085!important}
#complete-screen #category-grid .apro-banner-art{display:grid!important;place-items:center!important;width:51px!important;height:51px!important;background:#ffffff9c!important;border-radius:15px!important;transform:none!important;filter:none!important;font-size:0!important}
#complete-screen #category-grid .apro-banner-art svg{width:30px!important;height:30px!important;color:#2c41c8!important;display:block!important}
#complete-screen #category-grid .apro-banner-chevron{font-size:24px!important;color:#526bb7!important}
@media(min-width:600px){#complete-screen .section-mascot-hero{height:250px!important;min-height:250px!important}#complete-screen .section-mascot-hero img{height:215px!important}}


/* Reuse precisely the same hero geometry as Practicar. Only the mascot differs. */
#complete-screen .section-mascot-hero{
 height:215px!important;min-height:215px!important;
 padding:17px 15px 0!important;margin:0 -12px!important;
 border-radius:0 0 24px 24px!important;overflow:hidden!important;
 background:linear-gradient(125deg,#eef4ff 0%,#e1ebff 64%,#d2e3ff 100%)!important;
}
#complete-screen .section-mascot-hero:before{
 z-index:0!important;bottom:-82px!important;height:128px!important;
 left:-25%!important;right:-25%!important;border-radius:50% 55% 0 0!important;
 transform:rotate(-4deg)!important;background:linear-gradient(110deg,#c5dbff,#9fc5ff)!important;
}
#complete-screen .section-mascot-hero:after{right:5%!important;bottom:57px!important;opacity:.25!important}
#complete-screen .section-mascot-brand{
 display:flex!important;align-items:center!important;gap:7px!important;
 max-width:185px!important;font-size:15px!important;line-height:1.15!important;
 position:relative!important;z-index:3!important;
}
#complete-screen .section-mascot-hero h1{
 font-size:32px!important;line-height:1.08!important;
 margin:34px 0 7px!important;letter-spacing:-.04em!important;
 position:relative!important;z-index:3!important;
}
#complete-screen .section-mascot-hero p{
 font-size:12px!important;line-height:1.3!important;
 max-width:56%!important;position:relative!important;z-index:3!important;
}
#complete-screen .section-mascot-hero img{
 position:absolute!important;right:1%!important;bottom:-2px!important;
 width:44%!important;height:174px!important;max-height:none!important;
 object-fit:contain!important;object-position:right bottom!important;
 z-index:2!important;filter:none!important;opacity:1!important;
}
#complete-screen #category-grid{
 display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
 grid-auto-rows:auto!important;gap:10px!important;margin:0!important;
}
#complete-screen #category-grid .category-card.apro-clean-tile{
 display:flex!important;flex-direction:column!important;align-items:flex-start!important;
 justify-content:center!important;gap:5px!important;
 height:76px!important;min-height:76px!important;max-height:76px!important;
 width:100%!important;min-width:0!important;
 padding:11px 13px!important;border-radius:15px!important;
 background:#fff!important;border:1px solid #dbe5f8!important;
 box-shadow:0 3px 9px rgba(34,61,116,.07)!important;text-align:left!important;
}
#complete-screen #category-grid .apro-clean-tile strong{
 font-size:calc(1rem - 2pt)!important;line-height:1.2!important;
 font-weight:750!important;color:#2c41c8!important;overflow-wrap:anywhere;
}
#complete-screen #category-grid .apro-clean-tile small{
 font-size:calc(.94rem - 2pt)!important;color:#65728c!important;
 font-weight:500!important;line-height:1.2!important;
}
#complete-screen #category-grid .apro-clean-tile.completed{
 border-color:#b9dec9!important;background:#f7fcf9!important;
}
#complete-screen #category-grid .apro-clean-tile:focus-visible{outline:2px solid #536bff!important;outline-offset:2px}
#complete-screen .apro-categories-heading{padding:6px 2px 12px!important}
@media(max-width:360px){
 #complete-screen #category-grid{gap:8px!important}
 #complete-screen #category-grid .category-card.apro-clean-tile{padding:10px!important}
}


/* Identical to the Practicar header, with its own donkey and wording. */
#complete-screen .section-mascot-hero{height:252px!important;min-height:252px!important;padding:18px 17px 0!important;margin:0 -12px!important;border-radius:0 0 24px 24px!important;overflow:hidden!important;background:linear-gradient(125deg,#eef4ff 0%,#e1ebff 64%,#d2e3ff 100%)!important}
#complete-screen .section-mascot-hero:before{z-index:0!important;bottom:-77px!important;height:130px!important;left:-25%!important;right:-25%!important;border-radius:50% 55% 0 0!important;transform:rotate(-4deg)!important;background:linear-gradient(110deg,#c5dbff,#9fc5ff)!important}
#complete-screen .section-mascot-hero:after{right:5%!important;bottom:57px!important;opacity:.25!important}
#complete-screen .section-mascot-brand{display:flex!important;align-items:center!important;gap:7px!important;max-width:185px!important;font-size:15px!important;line-height:1.15!important;position:relative!important;z-index:3!important}
#complete-screen .section-mascot-hero h1{font-size:39px!important;line-height:1.03!important;margin:32px 0 7px!important;letter-spacing:-.04em!important;position:relative!important;z-index:3!important}
#complete-screen .section-mascot-hero p{font-size:13px!important;line-height:1.3!important;max-width:55%!important;position:relative!important;z-index:3!important}
#complete-screen .section-mascot-hero img{position:absolute!important;right:0!important;bottom:-2px!important;width:54%!important;height:192px!important;max-height:none!important;object-fit:contain!important;object-position:center bottom!important;z-index:2!important;filter:none!important;opacity:1!important}
@media(max-width:380px){#complete-screen .section-mascot-hero img{width:52%!important;height:181px!important}}
@media(min-width:600px){#complete-screen .section-mascot-hero img{width:54%!important;height:192px!important}}


/* Same logo typography and Catalan flag size as Practicar, no other changes */
#complete-screen .section-mascot-brand{font-size:19px!important;max-width:230px!important;gap:10px!important;line-height:1.05!important}
#complete-screen .parlem-brand-bubble{width:46px!important;height:39px!important;border-width:3px!important}
#complete-screen .parlem-brand-stripes{width:34px!important;height:27px!important}


#complete-screen .apro-quiz-launch{margin:12px 0 17px!important;background:#536bff!important;border:0!important;border-radius:16px!important;color:white!important;min-height:53px!important;font-weight:750!important;font-size:15px!important;box-shadow:0 7px 18px rgba(83,107,255,.15)!important}
#complete-screen .apro-category-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:15px 0 12px}
#complete-screen .apro-category-heading h2{margin:0!important;font-size:21px!important;line-height:1.2!important;color:#11144b!important}
#complete-screen .apro-return-icon{display:grid;place-items:center;width:43px;height:43px;flex:none;background:#edf2ff;border:1px solid #dbe4ff;border-radius:13px;color:#2c41c8}
#complete-screen .apro-return-icon svg{width:23px;height:23px}
#complete-screen .apro-category-tools{display:flex;align-items:center;gap:8px;margin-bottom:14px}
#complete-screen .apro-train-toggle,#complete-screen .apro-tool{min-height:40px;border:1px solid #dbe3f7;border-radius:12px;background:#fff;color:#2c41c8;font-size:13px;font-weight:700;padding:8px 11px}
#complete-screen .apro-train-toggle{display:flex;align-items:center;gap:8px;margin-right:auto}
#complete-screen .apro-toggle-dot{width:13px;height:13px;border-radius:50%;background:#dce2ed;border:2px solid #dce2ed;display:inline-block}
#complete-screen .apro-train-toggle.on .apro-toggle-dot{background:#536bff;border-color:#536bff;box-shadow:0 0 0 3px #e1e8ff}
#complete-screen .apro-tool{min-width:43px;font-size:15px}
#complete-screen .apro-quiz-top{display:flex;align-items:center;justify-content:space-between;margin:14px 0}
#complete-screen .apro-quiz-card{background:white;border:1px solid #dce5fa;border-radius:18px;padding:19px 16px;display:flex;flex-direction:column;gap:12px}
#complete-screen .apro-quiz-card h3{font-size:22px;margin:0;color:#2c41c8}
#complete-screen .apro-quiz-card p{margin:0;color:#4b5875}
#complete-screen .apro-quiz-card input{width:100%;box-sizing:border-box;padding:13px;border:1px solid #d1dbef;border-radius:11px;font-size:16px}
#complete-screen .apro-quiz-card .primary{background:#536bff;color:white;border-radius:12px;padding:12px}
#complete-screen .apro-answer-good{color:#087b48;font-weight:700}#complete-screen .apro-answer-bad{color:#b53b36;font-weight:700}


#complete-screen .apro-inline-tools{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr)) 39px 39px!important;gap:5px!important;align-items:stretch!important}
#complete-screen .apro-mode{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;padding:7px 3px;border:1px solid #dbe3f7;border-radius:11px;background:#fff;color:#10134b;font-weight:700;font-size:12px}
#complete-screen .apro-mode.selected{background:#e0eaff;border-color:#bed0ff;color:#2c41c8}
#complete-screen .apro-mode-mark{font-size:19px;color:#2c41c8}
#complete-screen .apro-radio{width:13px;height:13px;flex:none;border-radius:50%;border:2px solid #a6afc1;background:#e9edf4;margin-left:2px}
#complete-screen .apro-mode.selected .apro-radio{border-color:#536bff;background:#536bff;box-shadow:inset 0 0 0 3px #e0eaff}
#complete-screen .apro-flag-fr{width:19px;height:19px;border-radius:50%;background:linear-gradient(90deg,#1735a4 0 33.33%,white 33.33% 66.66%,#ed3044 66.66%);border:1px solid #e2e5ed;flex:none}
#complete-screen .apro-flag-cat{width:19px;height:19px;border-radius:50%;background:repeating-linear-gradient(to bottom,#f8d127 0 3px,#cf2736 3px 5px);border:1px solid #e2e5ed;flex:none}
#complete-screen .apro-inline-tools .apro-tool{min-width:0!important;padding:5px 2px!important;font-size:13px!important}
#complete-screen .apro-inline-table{table-layout:fixed;width:100%;margin-top:8px}
#complete-screen .apro-inline-table td{width:50%;padding:11px 7px!important;vertical-align:middle;overflow-wrap:anywhere;font-size:13px}
#complete-screen .apro-inline-table td:first-child{color:#2c41c8;font-weight:750}
#complete-screen .apro-inline-answer{width:100%;min-width:0;box-sizing:border-box;border:1px solid #c9d2e6;border-radius:9px;background:#fff;padding:9px 7px;font-size:12px;color:#10134b}
#complete-screen .apro-inline-answer.answer-correct{border-color:#4fb17c;background:#eaf9ef}
#complete-screen .apro-inline-answer.answer-wrong{border-color:#ef8892;background:#fff0f1}
#complete-screen .apro-inline-result{display:block;font-size:11px;margin-top:3px;overflow-wrap:anywhere}
#complete-screen .apro-inline-result.good{color:#187a4d}#complete-screen .apro-inline-result.bad{color:#b92c3b}
#complete-screen .apro-inline-footer{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:6px;margin:17px 0 12px}
#complete-screen .apro-inline-footer button{font-size:11px!important;min-height:44px!important;padding:7px 5px!important;border-radius:11px!important;white-space:normal}
#complete-screen .apro-inline-footer button.primary{background:#536bff;color:white;border:0}


#complete-screen .apro-inline-tools{grid-template-columns:repeat(3,minmax(0,1fr)) 38px 38px!important;column-gap:5px!important;align-items:stretch!important}
#complete-screen .apro-inline-tools .apro-mode{width:100%!important;min-width:0!important;box-sizing:border-box!important;padding:7px 2px!important;gap:3px!important;font-size:11px!important;white-space:nowrap!important}
#complete-screen .apro-inline-tools .apro-tool:nth-last-child(2){margin-left:9px!important}
#complete-screen .apro-inline-tools{grid-template-columns:repeat(3,minmax(0,1fr)) 47px 38px!important}
#complete-screen .apro-inline-table td:first-child{color:#2c41c8!important;font-weight:750!important}
#complete-screen .apro-inline-table td:nth-child(2){color:#111827!important}
#review-screen .review-home-icon{display:inline-flex;align-items:center;justify-content:center;width:41px;height:39px;flex:none;border:1px solid #c9d7fa;border-radius:12px;background:#eef3ff;color:#2c41c8;cursor:pointer}
#review-screen .review-home-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#review-screen .review-home-icon.hidden{display:none!important}
#review-screen .screen-top{display:flex;align-items:center;justify-content:space-between;gap:10px}


/* Same switch geometry in both tabs, neutral gray off and official blue on */
#complete-screen .apro-inline-tools{grid-template-columns:repeat(3,minmax(0,1fr)) 47px 38px!important}
#complete-screen .apro-inline-tools .apro-mode,
#review-screen .parlem-switch{position:relative!important;display:flex!important;align-items:center!important;justify-content:space-between!important;min-width:0!important;min-height:38px!important;box-sizing:border-box!important;padding:5px 7px!important;gap:4px!important;border:1px solid #d4dce9!important;border-radius:12px!important;background:#e9edf4!important;color:#34425e!important;font-size:11px!important;font-weight:750!important;white-space:nowrap!important;box-shadow:none!important}
#complete-screen .apro-inline-tools .apro-mode.selected,
#review-screen .parlem-switch.selected{background:#536bff!important;border-color:#536bff!important;color:white!important}
#complete-screen .apro-inline-tools .apro-mode .apro-radio,
#review-screen .parlem-switch-knob{display:block!important;width:18px!important;height:18px!important;min-width:18px!important;border-radius:50%!important;background:white!important;border:1px solid #c5cedc!important;box-shadow:0 1px 2px rgba(0,0,0,.1)!important;order:-1!important}
#complete-screen .apro-inline-tools .apro-mode.selected .apro-radio,
#review-screen .parlem-switch.selected .parlem-switch-knob{order:2!important;background:white!important;border-color:white!important;box-shadow:0 1px 2px rgba(0,0,0,.13)!important}
#complete-screen .apro-inline-tools .apro-mode-mark{font-size:11px!important;color:inherit!important}
#complete-screen .apro-inline-tools .apro-flag-fr,#complete-screen .apro-inline-tools .apro-flag-cat{flex:none!important}
#review-screen .review-switch-modes{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;margin:12px 0!important}
#review-screen .review-switch-modes.hidden{display:none!important}
#review-screen .review-direction.review-switch-modes{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#review-screen .review-home-icon svg{width:22px!important;height:22px!important}


#review-screen #review-quiz-panel .screen-top{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;flex-wrap:nowrap!important;margin-bottom:14px!important}
#review-screen #review-quiz-panel .screen-top .review-direction.review-switch-modes{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin:0!important;flex:1 1 auto!important;min-width:0!important;max-width:340px!important}
#review-screen #review-quiz-panel .screen-top .review-home-icon{flex:0 0 42px!important;margin:0!important}
#review-screen #review-quiz-panel .screen-counter{display:none!important}


/* Aprendre — bleu lavande */
#learn-screen .learn-hero {
 background:radial-gradient(circle at 88% 7%,#c9d6ff 0 22%,transparent 22.4%),radial-gradient(circle at 4% 104%,#d7e1ff 0 23%,transparent 23.4%),linear-gradient(125deg,#e8eeff,#e8eeff)!important;
}
#learn-screen .learn-hero:before {
 background:linear-gradient(110deg,#d7e1ff,#b8c9ff)!important;
 opacity:.58!important;
}
/* Practicar — vert menthe */
#review-screen .section-mascot-hero {
 background:radial-gradient(circle at 90% 6%,#b8e7d5 0 23%,transparent 23.4%),radial-gradient(circle at 2% 100%,#d0f0e4 0 24%,transparent 24.4%),linear-gradient(125deg,#e3f5ee,#e3f5ee)!important;
}
#review-screen .section-mascot-hero:before {
 background:linear-gradient(110deg,#c9ebdc,#a8dcc8)!important;
 opacity:.58!important;
}
/* Aprofundir — bleu glacier */
#complete-screen .section-mascot-hero {
 background:radial-gradient(circle at 91% 7%,#c7e6fb 0 23%,transparent 23.4%),radial-gradient(circle at 1% 105%,#dcefff 0 24%,transparent 24.4%),linear-gradient(125deg,#e8f5ff,#e8f5ff)!important;
}
#complete-screen .section-mascot-hero:before {
 background:linear-gradient(110deg,#dcefff,#b7dcf7)!important;
 opacity:.60!important;
}


/* Supprime les trois tours géométriques des en-têtes, sans toucher aux vagues ni aux mascottes. */
#learn-screen .learn-hero::after,
#review-screen .section-mascot-hero::after,
#complete-screen .section-mascot-hero::after {
  content:none!important; display:none!important; background:none!important;
}


.bottom-nav{gap:2px!important;padding-left:7px!important;padding-right:7px!important}.bottom-nav .nav-tab{width:25%!important;min-width:0!important;padding:7px 1px!important;font-size:11px!important;gap:4px!important}
#inici-screen{background:linear-gradient(145deg,#E5EAFF 0%,#F1F3FF 44%,#E6ECFF 100%);min-height:calc(100dvh - 90px);padding-bottom:24px;color:#16266A;font-family:inherit}
#inici-screen .inici-top{height:83px;text-align:center;padding:14px 12px 10px;background:linear-gradient(145deg,#CBD6FF,#E4E9FF);border-radius:0 0 45% 15%/0 0 24% 10%}
.inici-brand{font-size:23px;font-weight:900;letter-spacing:-.6px;color:#14235C}.inici-flag{display:inline-flex;background:white;border:3px solid #15512E;border-radius:50%;width:33px;height:33px;align-items:center;justify-content:center;color:#D83120;font-size:19px;margin-right:6px;vertical-align:middle}.inici-heading{display:none}
.inici-content{max-width:420px;margin:0 auto;padding:11px 16px 20px;text-align:center}
.inici-content h1{font-size:36px;line-height:1.1;color:#304CF0;margin:6px 0 4px;font-weight:900}.inici-rays{color:#FFB41F}.inici-intro{font-size:16px;font-weight:700;color:#203269;margin:0}
.inici-donkey-progress{height:320px;position:relative;margin:0 auto;max-width:375px}
.inici-arc{position:absolute;left:50%;transform:translateX(-50%);bottom:42px;width:100%;height:245px;overflow:visible}
.inici-donkey{position:absolute;top:1px;left:50%;transform:translateX(-50%);height:262px;width:275px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 5px 7px #26376520)}
.inici-progress-text{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:210px;display:flex;align-items:center;flex-direction:column;gap:0;background:linear-gradient(#ffffffea,#fffffffa);border-radius:70px 70px 20px 20px;padding:3px 10px 7px;box-shadow:0 3px 15px #536bff14}
.inici-a1{border-radius:20px;background:#E0E7FF;color:#1D3187;padding:1px 22px;font-size:20px;font-weight:850}.inici-progress-text strong{font-size:33px;line-height:1.15;color:#19318B}.inici-progress-text>span:last-child{font-size:14px;font-weight:800;color:#213578}
.inici-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.inici-stat{background:#ffffffed;border-radius:19px;padding:14px 8px;display:flex;align-items:center;justify-content:center;gap:7px;box-shadow:0 5px 16px #536bff17}.inici-stat-icon{font-size:26px}.inici-stat strong{font-size:25px;display:block;color:#304cf0;line-height:1.1}.inici-stat small{display:block;font-size:12px;color:#24366D;margin-top:4px}
.inici-calendar{background:#ffffffed;border-radius:23px;padding:15px 13px 18px;box-shadow:0 5px 18px #536bff1a}.inici-calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.inici-calendar-header strong{font-size:19px}.inici-calendar-header button{border:0;background:transparent;color:#304CF0;font-size:29px;line-height:1;cursor:pointer;padding:0 8px}.inici-weekdays,.inici-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.inici-weekdays span{font-size:11px;color:#64748B;font-weight:750;margin-bottom:8px}.inici-day{width:100%;aspect-ratio:1;max-height:38px;display:grid;place-items:center;border-radius:50%;font-size:13px;color:#26335F}.inici-day.done{background:#62BD41;color:white;font-weight:800}.inici-day.today{box-shadow:inset 0 0 0 2px #536BFF;color:#304CF0;font-weight:800}.inici-day.done.today{background:#536BFF;color:white;box-shadow:none}.inici-day.future{color:#A6ACC2}
.inici-continue{width:100%;margin:18px 0 8px;background:linear-gradient(100deg,#536BFF,#304CF0);color:white;border:0;border-radius:18px;padding:17px 12px;font-size:16px;font-weight:850;box-shadow:0 4px 10px #536bff38;cursor:pointer}
body:has(#inici-screen.active) .app-header{display:none!important}body:has(#inici-screen.active) .learn-sticky-progress{display:none!important}
@media(max-width:370px){.inici-donkey-progress{height:290px}.inici-donkey{height:235px;width:245px}.inici-arc{height:225px}.inici-content h1{font-size:32px}}


/* Same brand treatment as the other sections. */
#inici-screen .inici-brand{display:flex;align-items:center;justify-content:center;gap:10px;font-size:19px!important;font-weight:850!important;letter-spacing:-.4px!important;line-height:1.06!important;color:#10134b!important;text-align:left}
#inici-screen .inici-brand .parlem-brand-bubble{width:37px;height:31px;flex-shrink:0}
/* Four equal navigation cells in a single row at any mobile width. */
.bottom-nav{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;justify-content:stretch!important;align-items:stretch!important;gap:2px!important;padding:5px 6px max(6px,env(safe-area-inset-bottom))!important;width:100%!important;box-sizing:border-box!important}
.bottom-nav .nav-tab{width:100%!important;max-width:none!important;min-width:0!important;box-sizing:border-box!important;padding:6px 1px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;white-space:nowrap!important}
.bottom-nav .nav-tab span{font-size:clamp(9px,2.8vw,12px)!important;white-space:nowrap!important}
.bottom-nav .nav-line-icon{width:21px!important;height:21px!important;flex-shrink:0!important}