:root{
  --bg:#0f1226; --bg2:#171b3a; --card:#1e2350; --card2:#262b5e;
  --primary:#6c63ff; --primary2:#8b85ff; --accent:#ffb020; --ok:#22c55e; --err:#ef4444;
  --txt:#f1f2ff; --muted:#a6abdd; --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:'Tajawal',system-ui,sans-serif;background:linear-gradient(160deg,var(--bg),var(--bg2) 60%,#101433);color:var(--txt);min-height:100vh}
.de{direction:ltr;unicode-bidi:isolate;font-weight:700;letter-spacing:.3px}
button{font-family:inherit;cursor:pointer;border:none}
img{display:block}

/* ===== Header ===== */
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(15,18,38,.82);border-bottom:1px solid rgba(255,255,255,.07)}
.hwrap{max-width:980px;margin:auto;display:flex;align-items:center;gap:12px;padding:12px 18px}
.logo{font-size:1.25rem;font-weight:800;display:flex;align-items:center;gap:8px}
.logo span{background:linear-gradient(90deg,var(--primary2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.stats{margin-inline-start:auto;display:flex;gap:10px}
.stat{background:var(--card);border:1px solid rgba(255,255,255,.08);padding:6px 12px;border-radius:999px;font-weight:700;font-size:.9rem;display:flex;gap:6px;align-items:center}
.ui-lang{display:flex;align-items:center;gap:3px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:3px;border-radius:999px;margin-inline-start:4px}.ui-lang button{background:transparent;color:var(--muted);padding:6px 9px;border-radius:999px;font-size:.78rem;font-weight:800}.ui-lang button.active{background:var(--primary);color:#fff;box-shadow:0 3px 12px rgba(108,99,255,.3)}.navselect{display:flex;align-items:center;gap:3px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:4px 8px;border-radius:12px}
/* Header dropdowns */
.dropdown-wrap{position:relative;overflow:visible !important;padding:3px 5px;}
.dropdown-trigger{display:flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer;border:0;padding:7px 9px;border-radius:10px;}
.dropdown-trigger:hover{background:rgba(255,255,255,.06);}
.dropdown-chevron{font-size:.75rem;opacity:.8;transition:transform .18s ease;}
.dropdown-wrap.open .dropdown-chevron{transform:rotate(180deg);}
.header-dropdown{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:230px;background:rgba(20,24,52,.98);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:7px;box-shadow:0 18px 45px rgba(0,0,0,.38);backdrop-filter:blur(14px);z-index:1000;display:none;}
.dropdown-wrap.open .header-dropdown{display:block;animation:dropdownIn .16s ease both;}
@keyframes dropdownIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.header-dropdown-item{width:100%;display:flex;align-items:center;gap:10px;padding:10px 11px;border:0;border-radius:11px;background:transparent;color:var(--txt);cursor:pointer;text-align:start;font:inherit;font-weight:700;}
.header-dropdown-item:hover{background:rgba(108,99,255,.15);}
.header-dropdown-item.active{background:rgba(108,99,255,.22);border:1px solid rgba(139,133,255,.35);}
.header-dropdown-item.disabled{opacity:.45;cursor:not-allowed;}
.header-dropdown-item .dropdown-flag{width:27px;height:18px;flex:0 0 auto;}
.header-dropdown-item .dropdown-level{width:38px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:.78rem;font-weight:900;flex:0 0 auto;}
.header-dropdown-item .dropdown-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
.header-dropdown-item .dropdown-sub{font-size:.68rem;color:var(--muted);font-weight:600;}
.header-dropdown-item .dropdown-check{margin-inline-start:auto;font-size:.9rem;}
.ui-en .header-dropdown{direction:ltr;}
.ui-en .header-dropdown-item{text-align:left;}
@media(max-width:700px){.header-dropdown{position:fixed;top:70px;inset-inline:12px auto;min-width:210px;max-width:calc(100vw - 24px);}.dropdown-wrap:nth-of-type(2) .header-dropdown{inset-inline-end:12px;}}
.navselect button{background:none;color:var(--txt);font-weight:700}.navselect button{background:none;color:var(--txt);font-weight:700}.topnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.navlink{background:rgba(255,255,255,.05);color:var(--txt);padding:8px 12px;border-radius:12px;font-weight:700}.ui-en{font-family:Inter,system-ui,sans-serif}.ui-en .hero,.ui-en .level-hero,.ui-en .uhead,.ui-en .card,.ui-en .selector,.ui-en .tree-unit,.ui-en .tree-lesson{direction:ltr;text-align:left}.ui-en .de{direction:ltr}.ui-en .stats{margin-inline-start:auto;margin-inline-end:0}.ui-en .logo{direction:ltr}.ui-en .navselect{direction:ltr}.ui-en .tree-unit-head,.ui-en .tree-lesson{direction:ltr}.ui-en .lesson .st,.ui-en .unit .tag{margin-inline-start:auto}.ui-en .back{direction:ltr}.flag{font-size:3rem}.lang-switch-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.lang-switch-title .mini{font-size:.78rem;color:var(--muted)}

main{max-width:980px;margin:auto;padding:22px 18px 80px}
.view{animation:fadeUp .45s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.shake{animation:shake .35s ease}.scene-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px;margin-top:14px}.room-scene{height:260px;border-radius:16px;background:linear-gradient(145deg,#c7b299,#a8896d);position:relative;overflow:hidden;border:5px solid #6b513d;box-shadow:inset 0 0 0 3px rgba(255,255,255,.15)}.room-label{position:absolute;top:12px;right:14px;background:rgba(20,20,30,.72);padding:6px 10px;border-radius:999px;z-index:2}.room-floor{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-around;gap:18px;padding:40px}.room-object{font-size:4rem;filter:drop-shadow(0 7px 6px rgba(0,0,0,.28));transition:transform .2s}.click-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.choiceBtn{background:var(--card2);color:var(--txt);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:1rem}.choiceBtn:hover{transform:translateY(-2px)}.choiceBtn.correct{border-color:var(--ok);background:rgba(34,197,94,.18)}.choiceBtn.wrong{border-color:var(--err);background:rgba(239,68,68,.15)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}70%{box-shadow:0 0 0 18px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}

/* ===== Hero / Roadmap ===== */
.hero{background:linear-gradient(135deg,var(--primary),#4338ca 55%,#312e81);border-radius:24px;padding:30px 26px;margin-bottom:26px;position:relative;overflow:hidden}
.hero::after{content:'🇩🇪';position:absolute;inset-inline-end:18px;top:50%;transform:translateY(-50%);font-size:5rem;opacity:.22;filter:saturate(1.4)}
.hero h1{font-size:1.7rem;margin-bottom:6px}
.hero p{color:#e3e4ff;max-width:560px;line-height:1.8}
.hero .lvl{display:inline-block;margin-top:12px;background:rgba(255,255,255,.15);padding:5px 14px;border-radius:999px;font-weight:700;font-size:.85rem}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.badge{flex:1;min-width:150px;background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius);padding:14px;text-align:center;font-size:.9rem;color:var(--muted)}
.badge b{display:block;color:var(--txt);font-size:1.05rem;margin-top:4px}

.roadmap{position:relative;padding-inline-start:26px}
.roadmap::before{content:'';position:absolute;inset-inline-start:9px;top:8px;bottom:8px;width:3px;background:linear-gradient(var(--primary),var(--accent));border-radius:3px;opacity:.5}
.unit{position:relative;background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:16px 18px;margin-bottom:14px;display:flex;align-items:center;gap:14px;transition:.25s;cursor:pointer}
.unit:hover{transform:translateY(-2px);border-color:var(--primary2)}
.unit.locked{opacity:.55;cursor:not-allowed}
.unit::before{content:'';position:absolute;inset-inline-start:-24px;top:50%;transform:translateY(-50%);width:13px;height:13px;border-radius:50%;background:var(--primary2);box-shadow:0 0 0 4px var(--bg2)}
.unit.locked::before{background:#565b8f}
.unit .ic{font-size:1.9rem;width:56px;height:56px;flex:none;display:grid;place-items:center;background:var(--card2);border-radius:14px}
.unit h3{font-size:1.05rem}
.unit .sub{color:var(--muted);font-size:.85rem;margin-top:2px}
.unit .tag{margin-inline-start:auto;font-size:.75rem;font-weight:700;padding:5px 12px;border-radius:999px;white-space:nowrap}
.tag.now{background:rgba(108,99,255,.2);color:var(--primary2);border:1px solid var(--primary2)}
.tag.lock{background:rgba(255,255,255,.06);color:var(--muted)}
.tag.review{background:rgba(255,176,32,.15);color:var(--accent);border:1px solid var(--accent)}
.tag.done{background:rgba(34,197,94,.15);color:var(--ok);border:1px solid var(--ok)}

/* ===== Lesson list ===== */
.back{background:none;color:var(--muted);font-size:.95rem;font-weight:700;margin-bottom:14px;display:inline-flex;gap:6px;align-items:center}
.back:hover{color:var(--txt)}
.uhead{background:linear-gradient(135deg,var(--card2),var(--card));border-radius:var(--radius);padding:22px;margin-bottom:20px;border:1px solid rgba(255,255,255,.08)}
.uhead h2{font-size:1.4rem}.uhead p{color:var(--muted);margin-top:4px}
.lesson{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:16px 18px;margin-bottom:12px;cursor:pointer;transition:.2s}
.lesson:hover:not(.locked){border-color:var(--primary2);transform:translateY(-2px)}
.lesson.locked{opacity:.5;cursor:not-allowed}
.lesson .num{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--card2);font-size:1.1rem}
.lesson.done .num{background:var(--ok);color:#052e12}
.lesson.current .num{background:var(--primary);color:#fff}
.lesson h4{font-size:1.02rem}.lesson p{color:var(--muted);font-size:.83rem;margin-top:2px}
.lesson .st{margin-inline-start:auto;font-size:1.3rem}

/* ===== Player ===== */
.pbar{height:10px;background:var(--card2);border-radius:99px;overflow:hidden;margin:10px 0 20px}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--primary2),var(--accent));border-radius:99px;transition:width .4s}
.ptitle{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.88rem}
.card{background:var(--card);border:1px solid rgba(255,255,255,.09);border-radius:22px;padding:26px 22px;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.goal{color:var(--accent);font-size:.85rem;font-weight:700;margin-bottom:14px;display:block}
h2.stepq{font-size:1.25rem;margin-bottom:18px;line-height:1.7}

.imgwrap{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#2c3270,#1a1e46);min-height:150px;display:grid;place-items:center;margin-bottom:14px}
.imgwrap .em{font-size:4.2rem;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
.imgwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vocab{display:flex;flex-direction:column;gap:14px}
.vitem{display:flex;align-items:center;gap:14px;background:var(--card2);border-radius:16px;padding:12px 14px}
.vitem .imgwrap{width:92px;height:72px;min-height:0;margin:0;flex:none;border-radius:12px}
.vitem .em{font-size:2rem}
.vitem .tx{flex:1}.vitem .de{font-size:1.15rem;display:block}
.vitem .ar{color:var(--muted);font-size:.9rem}
.vitem .note{display:block;color:var(--accent);font-size:.75rem;margin-top:2px}

.sbtn{width:46px;height:46px;flex:none;border-radius:50%;background:var(--primary);color:#fff;font-size:1.15rem;display:grid;place-items:center;transition:.2s}
.sbtn:hover{background:var(--primary2);transform:scale(1.07)}
.sbtn.big{width:64px;height:64px;font-size:1.5rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--primary);color:#fff;font-weight:800;font-size:1rem;padding:13px 30px;border-radius:14px;transition:.2s;margin-top:20px}
.btn:hover{background:var(--primary2);transform:translateY(-1px)}
.btn.ghost{background:var(--card2);color:var(--txt)}
.btn.okb{background:var(--ok)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.center{text-align:center}

.banner{border-radius:14px;padding:13px 16px;margin-top:16px;font-weight:700;line-height:1.8;display:flex;gap:10px;align-items:flex-start;animation:fadeUp .3s ease}
.banner.ok{background:rgba(34,197,94,.14);border:1px solid var(--ok);color:#86efac}
.banner.err{background:rgba(239,68,68,.12);border:1px solid var(--err);color:#fca5a5}
.banner.info{background:rgba(108,99,255,.14);border:1px solid var(--primary2);color:#c7c9ff}

.opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.opt{background:var(--card2);border:2px solid transparent;color:var(--txt);padding:12px 20px;border-radius:12px;font-size:1.05rem;font-weight:700;transition:.15s}
.opt:hover{border-color:var(--primary2)}
.opt.sel{border-color:var(--primary2);background:rgba(108,99,255,.2)}
.opt.right{border-color:var(--ok);background:rgba(34,197,94,.18)}
.opt.wrong{border-color:var(--err);background:rgba(239,68,68,.15)}

/* matching */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mcol{display:flex;flex-direction:column;gap:12px}
.mword{background:var(--card2);border:2px solid transparent;border-radius:14px;padding:16px 10px;text-align:center;font-size:1.05rem;color:var(--txt);font-weight:700;transition:.15s;width:100%}
.mword.sel{border-color:var(--accent);background:rgba(255,176,32,.12)}
.mword.hit{border-color:var(--ok);background:rgba(34,197,94,.15);pointer-events:none}
.mimg{position:relative;border:2px solid transparent;border-radius:14px;overflow:hidden;height:86px;background:linear-gradient(135deg,#2c3270,#1a1e46);display:grid;place-items:center;font-size:2.2rem;cursor:pointer;transition:.15s;width:100%;color:#fff}
.mimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mimg.sel2{border-color:var(--accent)}
.mimg.hit{border-color:var(--ok);pointer-events:none}
.mimg.hit::after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;background:rgba(34,197,94,.75);font-size:1.8rem;color:#fff;z-index:2}

/* order */
.answer{min-height:60px;border:2px dashed rgba(255,255,255,.25);border-radius:14px;padding:10px;display:flex;flex-wrap:wrap;gap:8px;direction:ltr;margin-bottom:14px}
.answer.filled{border-style:solid;border-color:var(--primary2)}
.wchip{background:var(--card2);border:1px solid rgba(255,255,255,.15);color:var(--txt);padding:9px 16px;border-radius:10px;font-weight:700;font-size:1rem;transition:.15s}
.wchip:hover{border-color:var(--primary2)}
.bank{display:flex;flex-wrap:wrap;gap:8px;direction:ltr;justify-content:center}

/* record / write */
.mic{width:92px;height:92px;border-radius:50%;background:var(--err);color:#fff;font-size:2.2rem;display:grid;place-items:center;margin:18px auto;transition:.2s}
.mic.rec{animation:pulse 1.2s infinite}
textarea{width:100%;min-height:110px;background:var(--card2);border:1px solid rgba(255,255,255,.14);border-radius:14px;color:var(--txt);padding:14px;font-family:inherit;font-size:1.05rem;resize:vertical;direction:ltr}
textarea:focus{outline:2px solid var(--primary2)}
.correction{margin-top:18px;background:var(--card2);border-radius:16px;padding:16px;border:1px solid rgba(255,255,255,.1);animation:fadeUp .5s ease}
.correction .who{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#ef4444);display:grid;place-items:center;font-size:1.3rem}
.correction .who b{display:block}.correction .who small{color:var(--muted)}
.userline{background:rgba(255,255,255,.05);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.like{background:rgba(255,255,255,.08);border-radius:99px;padding:7px 16px;color:var(--txt);font-weight:700;font-size:.9rem}
.like.on{background:rgba(34,197,94,.2);color:#86efac}

/* chat */
.chat{display:flex;flex-direction:column;gap:12px;max-height:380px;overflow-y:auto;padding:6px 2px;margin-bottom:14px}
.msg{max-width:82%;padding:12px 16px;border-radius:16px;line-height:1.8;animation:fadeUp .3s ease}
.msg.bot{background:var(--card2);border-start-start-radius:4px;align-self:flex-start}
.msg.me{background:var(--primary);border-start-end-radius:4px;align-self:flex-end}
.msg .mini{background:none;border:none;color:inherit;opacity:.8;font-size:1rem;margin-inline-start:8px;cursor:pointer}
.typing{align-self:flex-start;color:var(--muted);font-size:.9rem;padding:4px 10px}
.chatrow{display:flex;gap:8px}
.chatrow input{flex:1;background:var(--card2);border:1px solid rgba(255,255,255,.14);border-radius:12px;color:var(--txt);padding:12px 14px;font-family:inherit;font-size:1rem;direction:ltr}
.chatrow input:focus{outline:2px solid var(--primary2)}
.chatrow .send{background:var(--primary);color:#fff;border-radius:12px;padding:0 20px;font-size:1.1rem}
.report{background:var(--card2);border:1px solid var(--accent);border-radius:16px;padding:18px;margin-top:14px;animation:fadeUp .5s ease}
.report h4{color:var(--accent);margin-bottom:8px}
.report li{margin:6px 0;line-height:1.8;list-style:none}

/* celebrate */
.cele{text-align:center;padding:20px 6px}
.cele .trophy{font-size:5rem;animation:fadeUp .6s ease}
.cele h2{margin:12px 0 6px;font-size:1.6rem}
.cele p{color:var(--muted);line-height:1.9}
.pts{display:inline-block;background:rgba(255,176,32,.15);border:1px solid var(--accent);color:var(--accent);font-weight:800;border-radius:99px;padding:8px 22px;margin-top:14px;font-size:1.1rem}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:200}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(8,10,25,.8);backdrop-filter:blur(6px);z-index:300;display:grid;place-items:center;padding:20px}
.modal{background:var(--card);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:30px 26px;max-width:400px;width:100%;text-align:center;animation:fadeUp .4s ease}
.modal h2{margin-bottom:8px}.modal p{color:var(--muted);margin-bottom:16px;line-height:1.8}
.modal input{width:100%;background:var(--card2);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:13px;color:var(--txt);font-family:inherit;font-size:1.05rem;text-align:center}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:#2c3270;border:1px solid var(--primary2);color:var(--txt);padding:12px 24px;border-radius:99px;font-weight:700;z-index:400;animation:fadeUp .3s ease;box-shadow:0 10px 30px rgba(0,0,0,.4)}
footer{color:var(--muted);text-align:center;font-size:.8rem;padding:20px;line-height:1.9}
@media(max-width:560px){.hero h1{font-size:1.35rem}.mgrid{gap:8px}.stats .hideS{display:none}}

.preview-content{display:grid;gap:14px;margin-top:16px}
.preview-step{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px}
.preview-step h4{margin:0 0 12px;font-size:1rem}
.preview-row{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);margin:6px 0}
.preview-box{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);line-height:1.8}

/* ===== Busuu-inspired navigation / curriculum selector ===== */
.app-shell{max-width:1180px;margin:auto;padding:0 18px 90px}
.topnav{display:flex;align-items:center;gap:10px;flex:1}
.brand{min-width:155px}
.navselect{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);padding:7px 10px;border-radius:12px;color:var(--txt);font-weight:800;font-size:.82rem}
.navselect button{background:none;color:inherit;font:inherit;padding:0}
.navlink{background:none;color:var(--muted);padding:8px 10px;border-radius:10px;font-weight:700}
.navlink:hover{background:rgba(255,255,255,.06);color:var(--txt)}
.selector-wrap{min-height:calc(100vh - 75px);display:grid;place-items:center;padding:30px 0}
.selector{width:min(100%,980px);background:linear-gradient(145deg,rgba(38,43,94,.95),rgba(24,28,62,.96));border:1px solid rgba(255,255,255,.09);border-radius:30px;padding:34px;box-shadow:0 25px 80px rgba(0,0,0,.3)}
.selector-head{text-align:center;margin-bottom:28px}.selector-head .flag{font-size:3.8rem}.selector-head h1{font-size:2rem;margin:7px 0}.selector-head p{color:var(--muted);line-height:1.8}
.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.choice{position:relative;background:var(--card);border:2px solid rgba(255,255,255,.07);border-radius:20px;padding:22px;text-align:center;cursor:pointer;transition:.2s}.choice:hover{transform:translateY(-3px);border-color:var(--primary2)}.choice.active{border-color:var(--primary);box-shadow:0 0 0 3px rgba(108,99,255,.14)}.choice.disabled{opacity:.45;cursor:not-allowed}.choice .big{font-size:2.5rem}.choice h3{margin:8px 0 3px}.choice p{font-size:.8rem;color:var(--muted)}.choice .mini-tag{display:inline-block;margin-top:10px;padding:4px 9px;border-radius:999px;background:rgba(108,99,255,.14);color:var(--primary2);font-size:.7rem;font-weight:800}
.level-grid{grid-template-columns:repeat(3,1fr)}.level-card{text-align:right;min-height:160px}.level-card .level-badge{position:absolute;top:14px;inset-inline-start:14px;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-weight:900;font-size:1.05rem}.a1{background:#22c55e}.a2{background:#eab308}.b1{background:#f97316}.b2{background:#3b82f6}.c1{background:#8b5cf6}.c2{background:#111827;border:1px solid #fff}.level-card .big{font-size:1.8rem}.level-card .desc{margin-top:10px;line-height:1.6;color:var(--muted)}
.curriculum-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.toolbar-group{display:flex;gap:8px;flex-wrap:wrap}.pillbtn{background:var(--card);border:1px solid rgba(255,255,255,.08);color:var(--txt);padding:8px 12px;border-radius:999px;font-weight:800;font-size:.82rem}.pillbtn.active{background:rgba(108,99,255,.18);border-color:var(--primary2);color:#d7d5ff}
.level-hero{background:linear-gradient(135deg,var(--primary),#4338ca 55%,#1d4ed8);border-radius:26px;padding:25px;margin-bottom:18px;position:relative;overflow:hidden}.level-hero::after{content:'🇩🇪';position:absolute;inset-inline-end:28px;top:50%;transform:translateY(-50%);font-size:6rem;opacity:.15}.level-hero h1{font-size:1.8rem}.level-hero p{color:#e3e4ff;max-width:720px;line-height:1.8}.level-progress{display:flex;align-items:center;gap:12px;margin-top:15px}.level-progress .track{height:9px;flex:1;background:rgba(255,255,255,.18);border-radius:99px;overflow:hidden}.level-progress i{display:block;height:100%;background:#fff;border-radius:99px}
.tree{display:grid;gap:12px}.tree-unit{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden}.tree-unit-head{display:flex;align-items:center;gap:13px;padding:16px 18px;cursor:pointer}.tree-unit-head:hover{background:rgba(255,255,255,.03)}.tree-unit .unit-icon{width:48px;height:48px;border-radius:14px;background:var(--card2);display:grid;place-items:center;font-size:1.6rem;flex:none}.tree-unit .unit-meta{flex:1}.tree-unit h3{font-size:1rem}.tree-unit .de-sub{color:var(--muted);font-size:.8rem;margin-top:2px}.tree-unit .unit-progress{display:flex;align-items:center;gap:7px;margin-top:8px}.unit-progress .smalltrack{width:90px;height:6px;background:rgba(255,255,255,.09);border-radius:99px;overflow:hidden}.unit-progress i{display:block;height:100%;background:var(--ok)}.tree-chevron{font-size:1.1rem;color:var(--muted)}.tree-lessons{display:none;border-top:1px solid rgba(255,255,255,.06);padding:10px 14px 14px}.tree-unit.expanded .tree-lessons{display:grid;gap:8px}.tree-lesson{display:flex;align-items:center;gap:11px;padding:12px;border-radius:14px;background:rgba(255,255,255,.035);cursor:pointer}.tree-lesson:hover{background:rgba(108,99,255,.09)}.tree-lesson .ln{width:34px;height:34px;border-radius:50%;background:var(--card2);display:grid;place-items:center;font-size:.8rem;font-weight:900;flex:none}.tree-lesson .li{flex:1}.tree-lesson h4{font-size:.9rem}.tree-lesson p{font-size:.76rem;color:var(--muted);margin-top:2px}.tree-lesson .state{font-size:1rem}.tree-lesson.done .ln{background:var(--ok);color:#062e12}.tree-lesson.preview{opacity:.85}.preview-ribbon{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;background:rgba(255,176,32,.12);color:var(--accent);font-size:.68rem;font-weight:800;margin-inline-start:7px}
.statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 20px}.statbox{background:var(--card);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:13px;text-align:center}.statbox strong{display:block;font-size:1.15rem}.statbox span{font-size:.75rem;color:var(--muted)}
.dev-unlock-badge{display:inline-flex;align-items:center;gap:7px;margin:0 0 14px;padding:8px 12px;border-radius:999px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.4);color:#86efac;font-size:.78rem;font-weight:800}
.curriculum-note{background:rgba(255,176,32,.09);border:1px solid rgba(255,176,32,.25);color:#f8d78b;padding:12px 14px;border-radius:14px;line-height:1.8;margin:0 0 18px}
@media(max-width:760px){.choice-grid,.level-grid{grid-template-columns:1fr 1fr}.curriculum-toolbar{align-items:flex-start;flex-direction:column}.statbar{grid-template-columns:1fr 1fr}.topnav .navselect:nth-child(3){display:none}}
@media(max-width:520px){.choice-grid,.level-grid{grid-template-columns:1fr}.selector{padding:22px}.selector-head h1{font-size:1.5rem}.statbar{grid-template-columns:1fr 1fr}.brand{min-width:auto}.topnav .navselect{display:none}}

.final-a1{margin:18px auto 0;padding:18px;border:1px solid rgba(108,99,255,.35);background:linear-gradient(135deg,rgba(108,99,255,.14),rgba(34,197,94,.08));border-radius:18px;text-align:center}.final-a1 h3{margin-bottom:14px}.final-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.final-grid div{background:rgba(255,255,255,.05);padding:14px;border-radius:14px}.final-grid b{display:block;font-size:1.45rem;color:var(--accent)}.final-grid span{display:block;color:var(--muted);font-size:.82rem;margin-top:3px}@media(max-width:650px){.final-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== Busuu-style onboarding ===== */
body.onboarding header{display:none}
.onboard{min-height:100vh;display:grid;place-items:center;padding:28px 18px;background:radial-gradient(circle at 50% 0%,rgba(108,99,255,.18),transparent 45%)}
.onboard-shell{width:min(920px,100%);background:rgba(30,35,80,.82);border:1px solid rgba(255,255,255,.09);border-radius:30px;padding:34px;box-shadow:0 24px 80px rgba(0,0,0,.35);backdrop-filter:blur(14px)}
.onboard-brand{text-align:center;font-size:1.5rem;font-weight:900;margin-bottom:22px}.onboard-brand span{background:linear-gradient(90deg,var(--primary2),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.onboard-progress{display:flex;gap:7px;margin:0 auto 28px;max-width:620px}.onboard-progress i{height:5px;flex:1;background:rgba(255,255,255,.1);border-radius:99px}.onboard-progress i.on{background:linear-gradient(90deg,var(--primary),var(--primary2))}
.onboard-title{text-align:center;max-width:720px;margin:0 auto 24px}.onboard-title .eyebrow{color:var(--accent);font-size:.8rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.onboard-title h1{font-size:clamp(1.65rem,4vw,2.35rem);margin:8px 0}.onboard-title p{color:var(--muted);line-height:1.8}
.onboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.onboard-card{background:var(--card2);border:2px solid rgba(255,255,255,.07);border-radius:20px;padding:22px;text-align:center;cursor:pointer;transition:.2s}.onboard-card:hover{transform:translateY(-3px);border-color:var(--primary2)}.onboard-card.active{border-color:var(--primary);box-shadow:0 0 0 4px rgba(108,99,255,.14)}.onboard-card .flag{font-size:3rem}.onboard-card h3{margin:9px 0 3px}.onboard-card p{color:var(--muted);font-size:.82rem}.onboard-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:26px}.onboard-input{width:min(560px,100%);margin:auto;display:block;background:var(--card2);border:2px solid rgba(255,255,255,.1);border-radius:16px;padding:15px 18px;color:var(--txt);font:inherit;font-size:1.05rem;text-align:center}.onboard-input:focus{outline:none;border-color:var(--primary2)}.goal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:760px;margin:auto}.goal-card{background:var(--card2);border:2px solid rgba(255,255,255,.07);border-radius:18px;padding:18px;text-align:center;cursor:pointer}.goal-card.active{border-color:var(--primary);background:rgba(108,99,255,.14)}.goal-card strong{display:block;font-size:1.1rem}.goal-card span{display:block;color:var(--muted);font-size:.78rem;margin-top:5px}.onboard-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px auto;max-width:760px}.summary-box{background:var(--card2);border-radius:16px;padding:14px;text-align:center}.summary-box b{display:block;font-size:1.2rem}.summary-box span{color:var(--muted);font-size:.75rem}@media(max-width:700px){.onboard-shell{padding:24px 16px}.onboard-grid,.goal-grid{grid-template-columns:1fr}.onboard-summary{grid-template-columns:1fr 1fr}}


.language-option .flag,
.learning-language .flag,
.lang-card .flag,
.onboarding-language .flag {
  font-size: 2rem;
  line-height: 1;
  display: inline-block;
  margin-inline-end: 8px;
  vertical-align: middle;
}


.country-flag{display:inline-block;width:46px;height:30px;border-radius:5px;box-shadow:0 1px 4px rgba(0,0,0,.35);vertical-align:middle;flex:0 0 auto;position:relative;overflow:hidden}
.country-flag.de{background:linear-gradient(to bottom,#111 0 33.33%,#d00 33.33% 66.66%,#ffce00 66.66% 100%)}
.country-flag.fr{background:linear-gradient(to right,#0055a4 0 33.33%,#fff 33.33% 66.66%,#ef4135 66.66% 100%)}
.country-flag.gb{background:linear-gradient(90deg,transparent 42%,#fff 42% 58%,transparent 58%),linear-gradient(0deg,transparent 42%,#fff 42% 58%,transparent 58%),linear-gradient(90deg,transparent 47%,#cf142b 47% 53%,transparent 53%),linear-gradient(0deg,transparent 43%,#cf142b 43% 57%,transparent 57%),#012169}
.language-flag-card{display:flex;justify-content:center;align-items:center;min-height:64px;margin-bottom:10px}
.header-flag{width:25px;height:17px;border-radius:3px;margin-inline-end:6px}
.ui-flag{width:24px;height:16px;border-radius:3px;margin-inline-end:6px}


.global-language-flag{
  display:inline-block;
  width:28px;
  height:18px;
  border-radius:3px;
  box-shadow:0 1px 3px rgba(0,0,0,.28);
  vertical-align:middle;
  flex:0 0 auto;
  overflow:hidden;
}
.global-language-flag.de{background:linear-gradient(to bottom,#111 0 33.33%,#d00 33.33% 66.66%,#ffce00 66.66% 100%)}
.global-language-flag.fr{background:linear-gradient(to right,#0055a4 0 33.33%,#fff 33.33% 66.66%,#ef4135 66.66% 100%)}
.global-language-flag.gb{background:linear-gradient(90deg,transparent 42%,#fff 42% 58%,transparent 58%),linear-gradient(0deg,transparent 42%,#fff 42% 58%,transparent 58%),linear-gradient(90deg,transparent 47%,#cf142b 47% 53%,transparent 53%),linear-gradient(0deg,transparent 43%,#cf142b 43% 57%,transparent 57%),#012169}
.language-header-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}
.language-header-badge .global-language-flag{width:26px;height:17px}
.page-language-bar{display:flex;justify-content:flex-start;align-items:center;gap:8px;margin:0 0 14px;padding:8px 12px;width:max-content;max-width:100%;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:999px;color:var(--muted);font-size:.82rem}
.page-language-bar .global-language-flag{width:24px;height:16px}


.ui-en .ar{display:none !important;}
.ui-en .ui-ar-only{display:none !important;}

.placement-shell{max-width:980px;margin:0 auto;padding:28px 18px 60px}.placement-head,.placement-card,.placement-result{background:var(--card,#fff);border:1px solid rgba(99,102,241,.14);border-radius:24px;padding:28px;box-shadow:0 12px 35px rgba(30,41,59,.07)}.placement-head h1{margin:8px 0}.placement-meta{display:flex;justify-content:space-between;gap:12px;margin:18px 0 8px;font-weight:800}.placement-card{margin-top:18px}.placement-type{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.08em;padding:7px 10px;border-radius:999px;background:#eef2ff}.placement-card h2{line-height:1.55}.placement-options{display:grid;gap:12px;margin:24px 0}.choice-option{text-align:start;border:2px solid #e5e7eb;background:#fff;border-radius:15px;padding:15px 16px;font-size:16px;cursor:pointer;transition:.2s}.choice-option:hover{transform:translateY(-1px);border-color:#a5b4fc}.choice-option.selected{border-color:#6366f1;background:#eef2ff}.placement-actions,.placement-result-actions{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;margin-top:20px}.placement-note{opacity:.72;text-align:center;margin-top:15px}.placement-result{text-align:center}.result-icon{font-size:56px}.recommended-level{font-size:64px;font-weight:950;margin:10px}.placement-scores{text-align:start;display:grid;gap:12px;margin:25px 0}.placement-score{display:grid;grid-template-columns:45px 1fr 55px;align-items:center;gap:10px}.placement-score .track{height:10px;background:#e5e7eb;border-radius:99px;overflow:hidden}.placement-score .track i{display:block;height:100%;background:#6366f1;border-radius:99px}.placement-result-actions{justify-content:center}.choice-option:disabled,.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ===== Adaptive Professional Placement Test ===== */
.adaptive-shell{max-width:1040px;margin:0 auto;padding:28px 18px 70px}.adaptive-hero,.adaptive-card,.adaptive-result,.adaptive-production{background:var(--card,#fff);border:1px solid rgba(99,102,241,.16);border-radius:26px;padding:28px;box-shadow:0 14px 40px rgba(30,41,59,.09)}
.adaptive-hero{background:linear-gradient(135deg,rgba(108,99,255,.18),rgba(255,176,32,.08)),var(--card,#fff)}.adaptive-hero h1{margin:8px 0 10px}.adaptive-hero p,.adaptive-card p,.adaptive-result p{line-height:1.85}.adaptive-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}.adaptive-kpi{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:13px;text-align:center}.adaptive-kpi b{display:block;font-size:1.25rem}.adaptive-kpi span{font-size:.75rem;color:var(--muted)}
.adaptive-steps{display:flex;gap:8px;margin:18px 0}.adaptive-step{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.09)}.adaptive-step.on{background:linear-gradient(90deg,var(--primary),var(--primary2))}.adaptive-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:18px 0 8px;font-weight:900}.adaptive-card{margin-top:18px}.adaptive-card h2{font-size:clamp(1.15rem,2.4vw,1.65rem);line-height:1.7;margin:10px 0 18px}.adaptive-options{display:grid;gap:11px;margin:20px 0}.adaptive-option{text-align:start;border:2px solid rgba(255,255,255,.11);background:rgba(255,255,255,.035);color:var(--txt);border-radius:16px;padding:15px 16px;font-size:16px;cursor:pointer;transition:.18s}.adaptive-option:hover{transform:translateY(-1px);border-color:var(--primary2)}.adaptive-option.selected{border-color:var(--primary2);background:rgba(108,99,255,.18);box-shadow:0 0 0 3px rgba(108,99,255,.08)}.adaptive-option small{display:block;color:var(--muted);margin-top:4px}.adaptive-actions{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:22px}.adaptive-dk{background:transparent;color:var(--muted);text-decoration:underline;text-underline-offset:4px;font-weight:800;padding:8px}.adaptive-dk:hover{color:var(--txt)}.adaptive-zone{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:rgba(255,176,32,.1);border:1px solid rgba(255,176,32,.25);color:#ffd27a;font-size:.78rem;font-weight:900}.adaptive-self-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.adaptive-self{background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.08);border-radius:18px;padding:18px;text-align:center;color:var(--txt);cursor:pointer}.adaptive-self:hover,.adaptive-self.selected{border-color:var(--primary2);background:rgba(108,99,255,.15)}.adaptive-self b{display:block;font-size:1.25rem}.adaptive-self span{display:block;color:var(--muted);font-size:.78rem;margin-top:5px}.adaptive-production{margin-top:18px}.adaptive-textarea{width:100%;min-height:170px;resize:vertical;background:rgba(255,255,255,.045);border:2px solid rgba(255,255,255,.1);border-radius:16px;color:var(--txt);font:inherit;padding:15px;line-height:1.8}.adaptive-textarea:focus{outline:none;border-color:var(--primary2)}.adaptive-prod-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.adaptive-transcript{margin-top:12px;padding:12px 14px;border-radius:14px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);line-height:1.8}.adaptive-result{text-align:center}.adaptive-result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:22px 0;text-align:start}.adaptive-skill{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px}.adaptive-skill-head{display:flex;justify-content:space-between;gap:10px;font-weight:900}.adaptive-skill .track{height:9px;background:rgba(255,255,255,.09);border-radius:99px;overflow:hidden;margin-top:10px}.adaptive-skill .track i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:99px}.adaptive-recommend{margin-top:20px;text-align:start;background:rgba(108,99,255,.1);border:1px solid rgba(108,99,255,.25);border-radius:18px;padding:18px;line-height:1.85}.adaptive-result-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:20px}.adaptive-level-badge{display:inline-flex;padding:8px 14px;border-radius:999px;background:rgba(108,99,255,.16);border:1px solid rgba(108,99,255,.35);font-weight:950}.adaptive-ai-note{font-size:.82rem;color:var(--muted);margin-top:14px}.adaptive-loading{display:inline-flex;gap:8px;align-items:center}.adaptive-dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:adot 1s infinite alternate}.adaptive-dot:nth-child(2){animation-delay:.15s}.adaptive-dot:nth-child(3){animation-delay:.3s}@keyframes adot{from{opacity:.25;transform:translateY(0)}to{opacity:1;transform:translateY(-3px)}}
@media(max-width:760px){.adaptive-kpis{grid-template-columns:1fr 1fr}.adaptive-self-grid{grid-template-columns:1fr 1fr}.adaptive-result-grid{grid-template-columns:1fr}}
@media(max-width:520px){.adaptive-shell{padding:20px 12px 50px}.adaptive-hero,.adaptive-card,.adaptive-result,.adaptive-production{padding:20px}.adaptive-self-grid{grid-template-columns:1fr}.adaptive-actions{flex-direction:column}.adaptive-actions .btn{width:100%}}