@font-face{font-family:"Jakarta";font-weight:500;font-display:swap;src:url(fonts/jakarta-500.woff2) format("woff2")}
@font-face{font-family:"Jakarta";font-weight:600;font-display:swap;src:url(fonts/jakarta-600.woff2) format("woff2")}
@font-face{font-family:"Jakarta";font-weight:700;font-display:swap;src:url(fonts/jakarta-700.woff2) format("woff2")}
@font-face{font-family:"Jakarta";font-weight:800;font-display:swap;src:url(fonts/jakarta-800.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:400;font-display:swap;src:url(fonts/poppins-Regular.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:600;font-display:swap;src:url(fonts/poppins-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:700;font-display:swap;src:url(fonts/poppins-Bold.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:800;font-display:swap;src:url(fonts/poppins-ExtraBold.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:900;font-display:swap;src:url(fonts/poppins-Black.woff2) format("woff2")}
@font-face{font-family:"Noto Nastaliq Urdu";font-weight:400 700;font-display:swap;src:url(fonts/nastaliq.woff2) format("woff2")}

:root{--o:#0E9F94;--o2:#0B7F8F;--o3:#D9F5F0;--cream:#EAF8F6;--ink:#1d1d1f;--mute:#6b6b70;--g:#1B9E4B;--gbg:#DDF5E4;--r:#D32F2F;--rbg:#FDE2E0;--line:#CDEEE9;
  --ur:"Poppins","Noto Nastaliq Urdu","Noto Naskh Arabic","Jameel Noori Nastaleeq",serif;--en:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:var(--ur);color:var(--ink);background:var(--cream);min-height:100dvh;overflow-x:hidden}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
button:focus-visible,a:focus-visible{outline:3px solid #1d1d1f;outline-offset:3px}
.ur{font-family:var(--ur);line-height:2.25}
.en{font-family:var(--en);direction:ltr;text-align:left;unicode-bidi:isolate}
.ro{font-family:var(--en);direction:ltr;font-size:12px;font-weight:600;opacity:.8;letter-spacing:.2px;display:block;line-height:1.3}

#shell{width:100%;max-width:480px;margin:0 auto;min-height:100dvh;background:var(--cream);position:relative;display:flex;flex-direction:column}
#app{flex:1;display:flex;flex-direction:column;padding:max(14px,env(safe-area-inset-top)) 18px max(14px,env(safe-area-inset-bottom));min-width:0}
@media(min-width:600px){
  body{background:linear-gradient(135deg,#8B6CFF 0%,#0E9F94 55%,#0B7F8F 100%);padding:24px 0}
  #shell{min-height:calc(100dvh - 48px);border-radius:32px;box-shadow:0 24px 70px rgba(40,20,120,.35);overflow:hidden}
}

/* brand + home */
.brand{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0 0}
.logo{font-family:var(--en);font-weight:900;font-size:15px;letter-spacing:.4px;color:var(--o);background:#fff;border:2px solid var(--o3);border-radius:999px;padding:5px 12px;direction:ltr;line-height:1.3}
.logo b{color:var(--ink);font-weight:900}
.streak{display:flex;align-items:center;gap:6px;background:#fff;border:2px solid var(--o3);border-radius:999px;padding:2px 14px 2px 12px;font-size:18px;min-height:40px}
.streak b{font-family:var(--en);font-weight:900;font-size:22px;color:var(--o2);line-height:1}
.streak .ur{line-height:1.8;font-size:15px}
h1.title{font-family:var(--en);font-weight:900;font-size:36px;line-height:1.05;margin:0;color:var(--o);direction:ltr;text-align:left;letter-spacing:-1px}
h1.title span{color:var(--ink)}
.tag{color:var(--mute);margin:2px 0 0;font-size:16px;line-height:2}
.card{background:#fff;border:2px solid var(--line);border-radius:24px;padding:16px 18px;box-shadow:0 6px 0 var(--o3)}
.todaycard{margin:16px 0 18px;display:flex;align-items:center;gap:14px;border-color:var(--o);box-shadow:0 6px 0 var(--o)}
.todaycard .big-ico{font-size:44px;line-height:1;flex:none;width:68px;height:68px;border-radius:20px;background:var(--o3);display:grid;place-items:center;font-family:"Noto Emoji",var(--en)}
.todaycard .meta{min-width:0;flex:1}
.todaycard .kicker{font-size:15px;color:var(--o2);line-height:1.8}
.todaycard .t-en{font-family:var(--en);font-weight:800;font-size:22px;line-height:1.2;direction:ltr;text-align:right}
.todaycard .t-ur{font-size:17px;color:var(--mute);line-height:2}
.prog{height:10px;border-radius:99px;background:var(--o3);overflow:hidden;margin:8px 0 0}
.prog i{display:block;height:100%;background:var(--o);border-radius:99px;transition:width .3s}
.prog-txt{font-size:14px;color:var(--mute);line-height:2}
.big3{display:flex;flex-direction:column;gap:14px;margin-top:auto;padding-bottom:6px}
.bigbtn{display:flex;align-items:center;gap:14px;width:100%;min-height:78px;border-radius:24px;padding:10px 20px;background:#fff;border:2px solid var(--o);box-shadow:0 5px 0 var(--o2);text-align:right;transition:transform .08s,box-shadow .08s}
.bigbtn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--o2)}
.bigbtn .ico{font-size:30px;width:44px;text-align:center;flex:none;font-family:"Noto Emoji",var(--en)}
.bigbtn .txt{flex:1;min-width:0}
.bigbtn .txt .ur{font-size:24px;font-weight:700;display:block;line-height:1.9}
.bigbtn.primary{background:var(--o);color:#fff;border-color:var(--o2);box-shadow:0 5px 0 var(--o2)}
.bigbtn.soon{border-color:var(--line);box-shadow:0 5px 0 var(--line);color:var(--ink)}
.bigbtn .badge{font-size:13px;background:var(--o3);color:var(--o2);border-radius:99px;padding:0 10px;line-height:2;flex:none}
.foot{text-align:center;color:var(--mute);font-family:var(--en);font-size:12px;padding:14px 0 0;direction:ltr}
.link{color:var(--o2);text-decoration:underline;font-size:15px}

/* top bar */
.top{display:flex;align-items:center;gap:12px;padding:2px 0 10px}
.icon-btn{width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--line);display:grid;place-items:center;font-size:20px;flex:none;font-family:var(--en);font-weight:800}
.top .bar{flex:1;height:12px;border-radius:99px;background:var(--o3);overflow:hidden}
.top .bar i{display:block;height:100%;background:var(--o);border-radius:99px;transition:width .3s}
.top .count{font-family:var(--en);font-weight:800;font-size:14px;color:var(--mute);min-width:36px;text-align:center;direction:ltr}
.page-title{font-size:26px;font-weight:700;margin:0 0 6px;line-height:2}

/* lessons list */
.list{display:flex;flex-direction:column;gap:10px;padding:6px 0 18px}
.row{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--line);border-radius:20px;padding:8px 14px;width:100%;text-align:right;min-height:68px}
.row:active{background:var(--o3)}
.row .ico{font-size:28px;width:46px;height:46px;border-radius:14px;background:var(--o3);display:grid;place-items:center;flex:none;font-family:"Noto Emoji",var(--en)}
.row .mid{flex:1;min-width:0}
.row .t-en{font-family:var(--en);font-weight:700;font-size:16px;direction:ltr;text-align:right;line-height:1.3}
.row .t-ur{font-size:15px;color:var(--mute);line-height:1.9}
.row .st{font-family:var(--en);font-weight:800;font-size:13px;color:var(--g);flex:none;direction:ltr;text-align:center;min-width:52px}
.row .st.none{color:var(--mute);font-weight:600}
.row.today-row{border-color:var(--o)}

/* lesson turn */
.label{font-size:14px;color:var(--o2);line-height:1.9;font-weight:700}
.scene{background:var(--o3);color:var(--o2);border-radius:14px;padding:2px 14px;font-size:15px;line-height:2.1;margin:0 0 10px}
.partner,.reply{margin:0 0 12px}
.partner .en{font-weight:700;font-size:20px;line-height:1.35}
.reply .en{font-weight:800;font-size:25px;line-height:1.4;overflow-wrap:anywhere}
.reply{border-color:var(--o);box-shadow:0 5px 0 var(--o)}
.mean{color:var(--mute);font-size:16px;line-height:2.1;margin:2px 0 0}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--o3);color:var(--o2);border-radius:99px;padding:0 14px;min-height:42px;font-size:16px;margin-top:6px;font-weight:700}
.chip .em{font-family:"Noto Emoji",var(--en)}
.w{border-radius:8px;padding:0 3px;display:inline-block}
.w.ok{background:var(--gbg);color:var(--g)}
.w.bad{background:var(--rbg);color:var(--r);text-decoration:underline wavy var(--r) 1px;text-underline-offset:4px}
.result{min-height:10px}
.res{border-radius:20px;padding:10px 16px;margin:0 0 10px;border:2px solid var(--line);background:#fff;animation:pop .25s}
@keyframes pop{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}
.res .score{font-family:var(--en);font-weight:900;font-size:36px;line-height:1.1;direction:ltr;display:inline-block}
.res.good{border-color:var(--g);background:#F4FCF6}.res.good .score{color:var(--g)}
.res.mid{border-color:#F2A100;background:#FFFBEF}.res.mid .score{color:#C77F00}
.res.low{border-color:var(--r);background:#FFF6F5}.res.low .score{color:var(--r)}
.res .row1{display:flex;align-items:center;gap:12px;justify-content:space-between}
.res .said{font-family:var(--en);direction:ltr;text-align:left;font-size:13px;color:var(--mute);margin:2px 0 0;overflow-wrap:anywhere}
.res .said b{font-weight:600;color:var(--ink)}
.res .tipt{font-size:17px;line-height:2.15;margin:2px 0 0}
.notice{border-radius:18px;background:#EEE9FF;border:2px dashed var(--o);padding:8px 14px;margin:0 0 10px;font-size:16px;line-height:2.1}
.dock{position:sticky;bottom:0;margin:auto -18px 0;padding:10px 18px max(6px,env(safe-area-inset-bottom));background:linear-gradient(to top,var(--cream) 80%,rgba(243,241,255,0));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.mic{width:92px;height:92px;border-radius:50%;background:var(--o);color:#fff;display:grid;place-items:center;box-shadow:0 7px 0 var(--o2),0 12px 24px rgba(255,106,0,.35);transition:transform .08s}
.mic:active{transform:translateY(5px);box-shadow:0 2px 0 var(--o2)}
.mic svg{width:42px;height:42px;fill:#fff}
.mic.on{background:var(--r);box-shadow:0 7px 0 #9c1c1c;animation:pulse 1.1s infinite}
@keyframes pulse{0%{box-shadow:0 7px 0 #9c1c1c,0 0 0 0 rgba(211,47,47,.5)}100%{box-shadow:0 7px 0 #9c1c1c,0 0 0 24px rgba(211,47,47,0)}}
.mic[disabled]{opacity:.45;box-shadow:none}
.side{min-height:56px;border-radius:18px;background:#fff;border:2px solid var(--line);font-size:15px;line-height:1.9;padding:2px 8px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center}
.side.next{background:var(--ink);color:#fff;border-color:var(--ink)}
.side.next.ready{background:var(--g);border-color:var(--g)}
.side[disabled]{opacity:.35}
.side .em{font-family:"Noto Emoji",var(--en);font-size:18px;line-height:1.2}
.micl{text-align:center;font-size:15px;color:var(--mute);line-height:2;margin:0 0 4px}
.manual{width:100%;min-height:64px;border-radius:22px;background:var(--g);color:#fff;font-size:22px;font-weight:700;margin:0 0 6px;box-shadow:0 5px 0 #14753a}
.bigbtn.green{background:var(--g);border-color:#14753a;box-shadow:0 5px 0 #14753a;color:#fff}

/* done */
.done{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:18px}
.stars{font-size:54px;letter-spacing:6px;line-height:1.2;direction:ltr;font-family:"Noto Emoji",var(--en)}
.stars .on{color:#FFB400}.stars .off{color:#E5D5C5}
.done .big-score{font-family:var(--en);font-weight:900;font-size:64px;line-height:1.1;color:var(--o);direction:ltr}
.done h2{font-size:28px;margin:0;line-height:2}

/* talk */
.talk{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin:10px 0 auto}
.talk .big-ico{font-size:70px;font-family:"Noto Emoji",var(--en);line-height:1.3}
.talk .pill{font-family:var(--en);font-weight:800;color:var(--o2);background:var(--o3);border-radius:99px;padding:3px 16px;font-size:14px;direction:ltr}
.talk h2{font-size:28px;margin:6px 0 0;line-height:2}
.talk p{font-size:18px;color:var(--mute);margin:0;line-height:2.2}
.toast{position:fixed;left:50%;bottom:132px;transform:translateX(-50%);background:var(--ink);color:#fff;border-radius:16px;padding:4px 18px;font-size:16px;line-height:2.1;z-index:9;max-width:90vw;text-align:center}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-height:700px){.reply .en{font-size:22px}.mic{width:80px;height:80px}}

/* v2: tutor, home, path, review, tools */
.hero{display:flex;align-items:center;gap:12px;margin:10px 0 2px;direction:ltr}
.hero>div:last-child{min-width:0;direction:ltr}
.hero .tag{direction:rtl;text-align:right}
.brand-r{display:flex;align-items:center;gap:8px}
.brand-r .icon-btn{width:42px;height:42px;font-size:18px;font-family:"Noto Emoji",var(--en)}
.tutor{flex:none;display:block}
.tutor .mouth{opacity:0;transform-origin:60px 81px}
.tutor.talking .smile{opacity:0}
.tutor.talking .mouth{opacity:1;animation:talk .28s infinite alternate}
@keyframes talk{from{transform:scaleY(.35)}to{transform:scaleY(1.2)}}
.tutor .eyes{transform-origin:60px 60px;animation:blink 4.5s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.week{display:flex;justify-content:space-between;gap:4px;margin:10px 0 0;direction:ltr}
.wd{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;font-family:var(--en);font-weight:700;font-size:11px;color:var(--mute)}
.wd .fl{width:30px;height:30px;border-radius:50%;background:#fff;border:2px dashed var(--line);display:grid;place-items:center;font-size:16px;font-family:"Noto Emoji",var(--en)}
.wd.on .fl{background:var(--o3);border:2px solid var(--o)}
.wd.today .nm{color:var(--o2);text-decoration:underline}
.todaycard{margin:12px 0 4px;padding:12px 16px}
.todaycard .big-ico{width:56px;height:56px;font-size:34px;border-radius:16px}
.todaycard .t-en{font-size:20px}
.micwrap{display:flex;flex-direction:column;align-items:center;margin:8px 0 0}
.mic.big{width:96px;height:96px}
.micwrap .micl{margin:8px 0 0}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:auto;padding:10px 0 4px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-height:96px;border-radius:22px;background:#fff;border:2px solid var(--o);box-shadow:0 5px 0 var(--o2);padding:6px 6px;transition:transform .08s,box-shadow .08s}
.tile:active{transform:translateY(4px);box-shadow:0 1px 0 var(--o2)}
.tile .ico{font-size:28px;line-height:1.2;font-family:"Noto Emoji",var(--en)}
.tile .ur{font-size:20px;font-weight:700;line-height:1.7}
.tile .ro{font-size:11px;color:var(--o2)}
.phase{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:14px 0 6px;color:var(--o2);font-weight:700}
.phase .en{font-size:13px;font-family:var(--en);font-weight:700;direction:ltr}
.phase .ur{font-size:14px;line-height:2}
.dayn{font-family:var(--en);font-weight:900;font-size:17px;width:46px;height:46px;border-radius:14px;background:var(--o3);color:var(--o2);display:grid;place-items:center;flex:none}
.row.soon{opacity:.55;background:#FBF3EC}
.row.soon .dayn{background:#EFE4DA;color:var(--mute)}
.lvl{font-family:var(--en);font-size:11px;font-weight:700;border-radius:99px;padding:1px 9px;margin-inline-start:6px;display:inline-block;line-height:1.6;vertical-align:middle;direction:ltr}
.lvl-A1{background:#DDF5E4;color:#14753a}.lvl-A2{background:#FFF0C9;color:#8a5a00}.lvl-B1{background:#E3ECFF;color:#2a4fa8}
.meta-row{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.meta-row .kind{color:var(--mute);font-size:15px;line-height:2}
.partner{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;direction:rtl}
.partner .tut{flex:none;padding-top:6px}
.partner .bubble{flex:1;min-width:0;border-radius:22px 22px 22px 6px;padding:10px 14px}
.partner .bubble .en{font-weight:700;font-size:19px;line-height:1.35}
.label-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.speed{display:inline-flex;border-radius:99px;background:var(--o3);padding:3px;direction:ltr}
.speed button{font-family:var(--en);font-weight:700;font-size:13px;padding:2px 12px;border-radius:99px;min-height:30px;color:var(--o2)}
.speed button.on{background:var(--o);color:#fff}
.wcs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px;direction:ltr}
.wc{position:relative;display:inline-flex;align-items:baseline;gap:5px;padding:3px 9px 7px;border-radius:10px;background:#fff;border:1.5px solid var(--line);font-size:14px;overflow:hidden}
.wc .en{font-weight:700;font-size:14px}
.wc b{font-family:var(--en);font-size:11px;font-weight:700}
.wc i{position:absolute;left:0;bottom:0;height:4px;border-radius:0 4px 0 0}
.wc.g i{background:var(--g)}.wc.g b{color:var(--g)}
.wc.m i{background:#F2A100}.wc.m b{color:#C77F00}
.wc.r i{background:var(--r)}.wc.r b{color:var(--r)}
.rev{margin-top:4px}
.rev summary{cursor:pointer;color:var(--o2);font-weight:700;font-size:16px;line-height:2}
.better{font-size:15px;margin:4px 0 0;line-height:2}
.better .en{font-size:14px;direction:ltr;display:inline-block}
.fine{font-size:13px;color:var(--mute);line-height:2}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.stat{padding:10px 6px;text-align:center;box-shadow:0 4px 0 var(--o3)}
.stat b{display:block;font-family:var(--en);font-weight:900;font-size:24px;color:var(--o2);line-height:1.3;direction:ltr}
.stat .ur{font-size:13px;color:var(--mute);line-height:1.9;display:block}
#radar{max-width:340px;margin:0 auto;display:block}
.seg{display:flex;gap:6px;background:var(--o3);border-radius:16px;padding:4px;margin:0 0 10px}
.seg button{flex:1;min-height:42px;border-radius:12px;font-weight:700;font-size:15px;color:var(--o2);padding:0 6px;line-height:1.6}
.seg button.on{background:#fff;box-shadow:0 2px 0 rgba(0,0,0,.08);color:var(--ink)}
.seg.small{background:none;padding:0;align-items:center;margin:8px 0 6px}
.seg.small .lab{font-size:14px;color:var(--mute);line-height:2;white-space:nowrap}
.seg.small button{flex:none;min-width:84px;min-height:36px;background:var(--o3);font-family:var(--en);font-weight:700;font-size:13px}
.seg.small button.on{background:var(--o);color:#fff}
.tin{width:100%;border:2px solid var(--line);border-radius:18px;padding:12px 14px;font:inherit;font-size:20px;line-height:1.9;background:#fff;color:var(--ink);resize:vertical;min-height:110px;font-family:var(--ur)}
.tin:focus{outline:3px solid var(--o);border-color:var(--o)}
.tools{display:flex;gap:8px;align-items:stretch;margin:10px 0 0}
.bigbtn.compact{min-height:60px;box-shadow:0 4px 0 var(--o2);flex:1;justify-content:center;text-align:center;padding:4px 14px}
.bigbtn.compact .txt .ur{font-size:21px;line-height:1.9}
.tools .bigbtn.compact{width:auto}
#b-jawab{margin-top:10px}
.mini2{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;border-radius:18px;background:#fff;border:2px solid var(--line);font-size:13px;line-height:1.5;padding:2px 6px}
.mini2 span:first-child{font-size:20px;font-family:"Noto Emoji",var(--en)}
.mini{width:42px;height:42px;border-radius:12px;background:var(--o3);font-size:17px;font-family:"Noto Emoji",var(--en);display:grid;place-items:center}
.ocr-status{margin-top:8px}
.out{margin-top:12px;border-color:var(--o)}
.out-en{font-weight:800;font-size:26px;line-height:1.4;overflow-wrap:anywhere}
.out-ur{font-size:24px;line-height:2.4}
.out-b{display:flex;gap:8px;flex-wrap:wrap}
.pb{margin-top:14px;padding:8px 14px}
.pb summary{font-weight:700;font-size:17px;cursor:pointer;line-height:2.1}
.pq{width:100%;border:2px solid var(--line);border-radius:14px;padding:8px 12px;font-size:16px;margin:6px 0;font-family:var(--ur)}
.ph{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid var(--line)}
.ph-t{min-width:0;display:flex;flex-direction:column}
.ph-en{font-weight:700;font-size:15px}
.ph-ur{font-size:15px;line-height:1.9;color:var(--mute)}
.ph-b{display:flex;gap:6px;flex:none}
.rp{margin-top:10px}
.rp-en{font-weight:700;font-size:18px;line-height:1.4}
.row.soon-link{border-style:dashed}
.big3{margin-top:auto}
.top .page-title{font-size:22px}
@media(max-height:760px){.hero .tutor{width:62px;height:62px}.micwrap .mic.big{width:84px;height:84px}.tile{min-height:84px}}

.lt{unicode-bidi:isolate;font-family:var(--en);font-size:.9em;font-weight:600}

/* ===== Bolo AI theme (blue-purple) ===== */
body{background:#EAF8F6}
@media(min-width:600px){body{background:linear-gradient(135deg,#17B8A6 0%,#0E9F94 55%,#1E8FD0 100%)}}
#shell{background:linear-gradient(180deg,#E9E8FF 0,#EAF8F6 260px,#F7F6FF 100%)}
.logo{color:#fff;background:linear-gradient(135deg,#17B8A6,#1E8FD0);border:0;box-shadow:0 4px 12px rgba(23,184,166,.35)}
.logo b{color:#fff}
.card{border:0;border-radius:26px;box-shadow:0 8px 24px rgba(14,159,148,.12)}
.todaycard{border:0;box-shadow:0 8px 24px rgba(14,159,148,.14)}
.bigbtn{border:0;box-shadow:0 8px 20px rgba(14,159,148,.16);border-radius:26px}
.bigbtn:active{transform:scale(.98);box-shadow:0 3px 8px rgba(14,159,148,.2)}
.bigbtn.primary{background:linear-gradient(135deg,#17B8A6,#1E8FD0);border:0;box-shadow:0 10px 24px rgba(23,184,166,.4)}
.row{border:0;box-shadow:0 4px 14px rgba(14,159,148,.08);border-radius:22px}
.reply{border:2px solid #0E9F94;box-shadow:0 8px 20px rgba(14,159,148,.16)}
.streak,.icon-btn{border:0;box-shadow:0 4px 12px rgba(14,159,148,.12)}
h1.title{background:linear-gradient(90deg,#17B8A6,#1E8FD0);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.5px}
h1.title span{color:transparent}
.tutor .mouth{transform-origin:60px 76px}
.tutor{border-radius:30%;box-shadow:0 8px 20px rgba(14,159,148,.3)}
.mic:not(.on):not([disabled]){background:linear-gradient(135deg,#17B8A6,#1E8FD0);box-shadow:0 12px 28px rgba(23,184,166,.45)}
.mic.on{box-shadow:0 8px 22px rgba(211,47,47,.5)}
.meet{margin:14px 0 6px;border-radius:28px;padding:18px 18px 16px;color:#fff;background:linear-gradient(135deg,#17B8A6 0%,#1E8FD0 60%,#1E8FD0 100%);box-shadow:0 14px 30px rgba(23,184,166,.38);display:flex;align-items:center;gap:14px;position:relative;overflow:hidden}
.meet:before{content:"";position:absolute;right:-40px;top:-50px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.14)}
.meet .m-t{flex:1;min-width:0;position:relative}
.meet .m-k{font-family:var(--en);font-weight:600;font-size:12px;letter-spacing:.8px;opacity:.85;direction:ltr;text-align:right;text-transform:uppercase}
.meet .m-h{font-family:var(--en);font-weight:800;font-size:22px;line-height:1.2;direction:ltr;text-align:right;margin:2px 0 2px}
.meet .m-u{font-size:15px;line-height:2;opacity:.95}
.meet button{margin-top:6px;border:0;border-radius:99px;background:#fff;color:#0B7F8F;font-family:var(--en);font-weight:800;font-size:16px;padding:10px 20px;min-height:46px;box-shadow:0 6px 14px rgba(0,0,0,.18)}
.meet .soon{display:block;font-size:12px;opacity:.85;margin-top:4px;font-family:var(--en);direction:ltr;text-align:right}
.meet .tutor{position:relative;box-shadow:0 8px 20px rgba(0,0,0,.25)}

.tile{border:0;box-shadow:0 8px 20px rgba(14,159,148,.12);border-radius:24px}
.tile:active{transform:scale(.97);box-shadow:0 3px 8px rgba(14,159,148,.18)}
.tile .ro{color:#0E9F94}
.dock{background:linear-gradient(to top,#EAF8F6 80%,rgba(243,241,255,0))}
.side{border:0;box-shadow:0 6px 16px rgba(14,159,148,.12);border-radius:20px}
.side.next{background:linear-gradient(135deg,#34345A,#1F1F3D)}
.callbar{display:flex;align-items:center;gap:8px;justify-content:center;margin:0 0 8px;font-family:var(--en);font-size:12px;font-weight:700;color:#0B7F8F;letter-spacing:.3px;direction:ltr}
.callbar .dot{width:9px;height:9px;border-radius:50%;background:#2BD576;box-shadow:0 0 0 4px rgba(43,213,118,.25);}
.partner{display:flex;flex-direction:column;align-items:center;gap:0;background:linear-gradient(160deg,#17B8A6 0%,#1E8FD0 65%,#1E8FD0 100%);border-radius:30px;padding:18px 14px 14px;box-shadow:0 14px 30px rgba(23,184,166,.35);position:relative;overflow:hidden}
.partner:before{content:"";position:absolute;left:-50px;top:-60px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.12)}
.partner .tut{position:relative;margin-bottom:-14px;z-index:1}
.partner .tut .tutor{width:112px;height:112px;border:4px solid #fff;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.partner .bubble{width:100%;padding-top:22px;border-radius:24px;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.partner .bubble .en{direction:ltr}
.partner .bubble .mean{text-align:center}

.tiles{align-items:stretch}.tile{height:100%}

/* ===== Glass layer ===== */
#shell{background:
 radial-gradient(520px 360px at 8% -4%,rgba(91,141,255,.55),transparent 62%),
 radial-gradient(480px 380px at 105% 6%,rgba(168,85,255,.45),transparent 60%),
 radial-gradient(520px 420px at 50% 108%,rgba(255,130,200,.35),transparent 62%),
 linear-gradient(180deg,#EAEBFF 0,#F1EEFF 55%,#F7F0FF 100%);background-attachment:local}
.card,.row,.tile,.bigbtn:not(.primary),.side,.streak,.icon-btn,.res,.notice{background:rgba(255,255,255,.58)!important;-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);border:1px solid rgba(255,255,255,.75)!important;box-shadow:0 10px 30px rgba(14,159,148,.12),inset 0 1px 0 rgba(255,255,255,.9)!important}
.card.reply{border:1.5px solid rgba(23,184,166,.55)!important}
.res.good{background:rgba(226,248,233,.7)!important}.res.mid{background:rgba(255,246,222,.72)!important}.res.low{background:rgba(255,235,233,.72)!important}
.todaycard{border-radius:28px}
.meet,.partner{background:linear-gradient(150deg,rgba(79,123,255,.95) 0%,rgba(122,77,255,.95) 55%,rgba(168,85,255,.95) 100%)!important;box-shadow:0 18px 40px rgba(23,184,166,.42),inset 0 1px 0 rgba(255,255,255,.35)!important;border:1px solid rgba(255,255,255,.35)}
.meet:after,.partner:after{content:"";position:absolute;left:-30px;bottom:-70px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%);pointer-events:none}
.partner .bubble{background:rgba(255,255,255,.88)!important}
.dock{background:linear-gradient(to top,rgba(241,238,255,.96) 70%,rgba(241,238,255,0))!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bigbtn.primary,.meet button{border:1px solid rgba(255,255,255,.4)!important}
.logo{border:1px solid rgba(255,255,255,.5)}
.mic:not(.on):not([disabled]){box-shadow:0 14px 34px rgba(23,184,166,.5),0 0 0 8px rgba(23,184,166,.12)}
/* language sheet */
.langsheet{position:fixed;inset:0;z-index:50;background:rgba(30,20,80,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;padding:18px}
.ls-card{width:100%;max-width:360px;background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.8);border-radius:28px;padding:18px;box-shadow:0 24px 60px rgba(40,20,120,.4);position:relative;display:flex;flex-direction:column;gap:8px;direction:ltr}
.ls-card h3{margin:0 0 4px;font-family:var(--en);font-size:18px;text-align:center}
.ls-card button[data-pick]:not(.ls-x){min-height:46px;border-radius:16px;border:0;background:#F0ECFF;font-family:var(--en),"Noto Nastaliq Urdu";font-weight:700;font-size:16px;color:#0B4F55}
.ls-card button.on{background:linear-gradient(135deg,#17B8A6,#1E8FD0)!important;color:#fff!important}
.ls-card p{margin:6px 2px 0;font-size:12px;color:#6b6b80;font-family:var(--en);line-height:1.5}
.ls-x{position:absolute;top:10px;right:12px;border:0;background:transparent;font-size:18px}
/* English / other LTR modes */
html[dir=ltr] .todaycard .t-en,html[dir=ltr] .row .t-en,html[dir=ltr] .meet .m-k,html[dir=ltr] .meet .m-h,html[dir=ltr] .meet .soon{text-align:left}
html[dir=ltr] .bigbtn,html[dir=ltr] .row{text-align:left}
html[data-ui=en] .mean,html[data-ui=en] .t-ur,html[data-ui=en] .kind,html[data-ui=en] .phase .ur,html[data-ui=en] .scene{display:none!important}
html[dir=ltr] .ur{font-family:var(--en)}

.side.next{background:linear-gradient(135deg,#34345A,#1F1F3D)!important;color:#fff!important;border:0!important}
.side.next.ready{background:linear-gradient(135deg,#22B573,#14965B)!important}
.side.next[disabled]{opacity:.45}

html[dir=ltr] .ur,html[dir=ltr] .ur *{direction:ltr}
html[dir=ltr] .partner .bubble .ur{text-align:center}

.tutor .mouth{transform-origin:256px 350px;transform-box:view-box}
.tutor.talking .smile{opacity:0}
.tutor{border-radius:28%}
.tutor .eyes{transform-origin:256px 262px;transform-box:view-box}
.meet .tutor{width:92px;height:92px}

/* ===== SpeakNova v3: nav, topics, onboarding ===== */
#bnav{position:fixed;left:50%;transform:translateX(-50%);bottom:max(10px,env(safe-area-inset-bottom));width:min(420px,calc(100vw - 24px));z-index:20;display:flex;gap:2px;padding:6px;border-radius:26px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.85);box-shadow:0 14px 34px rgba(14,159,148,.22);direction:ltr}
#bnav[hidden]{display:none}
#bnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:0;padding:6px 2px 4px;border-radius:20px;border:0;background:transparent;font-family:var(--en);font-size:11px;font-weight:700;color:#6b6b88}
#bnav button .ni{font-size:20px;line-height:1.3;font-family:"Noto Emoji",var(--en)}
#bnav button.on{background:linear-gradient(135deg,#17B8A6,#1E8FD0);color:#fff;box-shadow:0 6px 16px rgba(23,184,166,.4)}
body.hasnav #app{padding-bottom:150px}
.sect{font-family:var(--en);font-weight:800;font-size:20px;margin:16px 2px 8px;direction:ltr;text-align:left}
.lvlgrp{margin:0 0 12px;border-radius:24px;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.8);box-shadow:0 8px 22px rgba(14,159,148,.1);overflow:hidden}
.lvlgrp summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;list-style:none;cursor:pointer;direction:ltr}
.lvlgrp summary::-webkit-details-marker{display:none}
.lvlgrp .lg-t{font-family:var(--en);font-weight:800;font-size:17px;color:#0B6F78}
.lvlgrp .lg-c{font-family:var(--en);font-weight:700;font-size:13px;color:#fff;background:linear-gradient(135deg,#17B8A6,#1E8FD0);border-radius:99px;padding:2px 12px}
.lg-b{display:flex;flex-direction:column;gap:8px;padding:0 10px 12px}
.topic{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.8);text-align:left;direction:ltr;box-shadow:0 4px 12px rgba(14,159,148,.07)}
.topic.now{border-color:#0E9F94;box-shadow:0 0 0 2px rgba(23,184,166,.25)}
.tp-i{font-size:26px;width:46px;height:46px;border-radius:15px;background:#D9F5F0;display:grid;place-items:center;flex:none;font-family:"Noto Emoji",var(--en)}
.tp-m{flex:1;min-width:0;display:flex;flex-direction:column}
.tp-t{font-family:var(--en);font-weight:700;font-size:16px;line-height:1.3;color:#1d1d3a}
.tp-u{font-size:14px;color:#6b6b88;line-height:1.7}
.tp-k{font-family:var(--en);font-size:12px;color:#7a62e8;font-weight:600}
.tp-s{font-family:var(--en);font-weight:800;font-size:13px;color:#1B9E4B}
.tp-go{font-size:22px;color:#1E8FD0}
.contbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(max(10px,env(safe-area-inset-bottom)) + 74px);width:min(396px,calc(100vw - 36px));z-index:19;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:22px;border:1px solid rgba(255,255,255,.5);background:linear-gradient(135deg,#FF8EC4,#B66BFF);color:#fff;box-shadow:0 12px 28px rgba(182,107,255,.5);direction:ltr;text-align:left}
.cb-i{font-size:24px;font-family:"Noto Emoji",var(--en)}.cb-t{flex:1;display:flex;flex-direction:column;min-width:0}.cb-t b{font-family:var(--en);font-size:16px}.cb-t small{font-family:var(--en);font-size:12px;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cb-a{font-size:26px;line-height:1}
.tiles.big .tile{min-height:120px}
.onb{display:flex;flex-direction:column;align-items:center;text-align:center;min-height:calc(100dvh - 40px);gap:8px}
.onb-top{align-self:stretch;display:flex;justify-content:flex-end;direction:ltr}
.onb-art{position:relative;margin:18px 0 8px;padding:20px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(185,170,255,.35));box-shadow:0 20px 50px rgba(23,184,166,.3)}
.onb-art .tutor{width:150px;height:150px;border-radius:32%}
.onb-badge{position:absolute;right:2px;bottom:6px;font-size:34px;background:#fff;border-radius:50%;width:62px;height:62px;display:grid;place-items:center;box-shadow:0 8px 18px rgba(0,0,0,.18);font-family:"Noto Emoji",var(--en)}
.onb-h{font-family:var(--en);font-weight:900;font-size:28px;line-height:1.2;margin:10px 6px 0;color:#0B4F55}
.onb-p{font-size:16px;color:#55557a;margin:0 10px;line-height:1.7}
.dots{display:flex;gap:8px;margin:12px 0}.dots i{width:9px;height:9px;border-radius:99px;background:#BFEDE6}.dots i.on{width:26px;background:linear-gradient(90deg,#17B8A6,#1E8FD0)}
.onb-b{margin-top:auto;align-self:stretch;display:flex;flex-direction:column;gap:12px;align-items:center;padding-bottom:10px}
.onb-next{justify-content:center;text-align:center}
.onb-next .ur,.onb-next .txt{font-size:20px;font-weight:800;color:#fff;font-family:var(--en)}
html[dir=ltr] .topic .tp-u{text-align:left}

/* ===== SpeakNova v4: premium glass ===== */
body{background:#EAF8F6;position:relative}
body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;background:
 radial-gradient(38% 32% at 18% 12%,rgba(91,141,255,.55),transparent 70%),
 radial-gradient(34% 30% at 88% 20%,rgba(120,190,255,.5),transparent 70%),
 radial-gradient(40% 34% at 70% 78%,rgba(255,142,196,.38),transparent 70%),
 radial-gradient(36% 30% at 8% 86%,rgba(70,214,255,.4),transparent 70%),linear-gradient(160deg,#EAF8F6,#DDF3F1);animation:aurora 18s ease-in-out infinite alternate}
@keyframes aurora{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,2%,0) scale(1.08)}100%{transform:translate3d(-3%,-2%,0) scale(1.04)}}
.card,.row,.tile,.topic,.lvlgrp,.streak,.icon-btn,.res,.notice,.side{background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.42))!important;-webkit-backdrop-filter:blur(26px) saturate(190%);backdrop-filter:blur(26px) saturate(190%);border:1px solid rgba(255,255,255,.75)!important;box-shadow:0 10px 30px rgba(14,159,148,.14),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(120,100,255,.08)!important}
.topic{background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.55))!important}
.tp-i{background:linear-gradient(135deg,#E3E0FF,#F6E4FF)!important;box-shadow:inset 0 1px 0 #fff}
.meet{background:linear-gradient(135deg,#17B8A6 0%,#6B4DFF 55%,#A64DFF 100%)!important;border:1px solid rgba(255,255,255,.45)!important;box-shadow:0 18px 40px rgba(31,169,196,.42),inset 0 1px 0 rgba(255,255,255,.55)!important;overflow:hidden}
.meet:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.28),transparent 38%);pointer-events:none}
.tutor{object-fit:cover;border-radius:30%;box-shadow:0 0 0 3px rgba(255,255,255,.85),0 0 26px rgba(80,200,255,.75),0 10px 26px rgba(40,30,160,.35)!important;background:#2a58ff}
.tutor.talking{animation:tglow .6s ease-in-out infinite alternate}
@keyframes tglow{from{box-shadow:0 0 0 3px #fff,0 0 22px rgba(80,200,255,.6),0 10px 26px rgba(40,30,160,.35)}to{box-shadow:0 0 0 4px #fff,0 0 44px rgba(120,230,255,.95),0 10px 26px rgba(40,30,160,.35)}}
.meet button,.bigbtn.primary,.contbar{background-image:linear-gradient(135deg,#FFFFFF,#EDE9FF)}
.bigbtn.primary,.mic.big{background:linear-gradient(135deg,#17B8A6,#1E8FD0 60%,#C04DFF)!important;box-shadow:0 12px 28px rgba(23,184,166,.5),inset 0 1px 0 rgba(255,255,255,.6)!important}
.contbar{background:linear-gradient(135deg,#FF7EB9,#B36BFF 60%,#6D6BFF)!important;box-shadow:0 14px 30px rgba(182,107,255,.55),inset 0 1px 0 rgba(255,255,255,.55)!important}
#bnav{background:linear-gradient(160deg,rgba(255,255,255,.85),rgba(255,255,255,.55));-webkit-backdrop-filter:blur(28px) saturate(200%);backdrop-filter:blur(28px) saturate(200%);box-shadow:0 18px 40px rgba(14,159,148,.28),inset 0 1px 0 #fff}
#bnav button.on{background:linear-gradient(135deg,#17B8A6,#1E8FD0);box-shadow:0 8px 20px rgba(23,184,166,.5),inset 0 1px 0 rgba(255,255,255,.5)}
.title span,.onb-h{background:linear-gradient(90deg,#17B8A6,#1E8FD0,#1E8FD0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lvlgrp .lg-c{box-shadow:0 4px 10px rgba(23,184,166,.35)}
.onb-art{background:radial-gradient(circle,rgba(255,255,255,.95),rgba(150,160,255,.35));box-shadow:0 24px 60px rgba(80,90,255,.4)}
.onb-art .tutor{border-radius:34%}
@media (prefers-reduced-motion:reduce){body::before,.tutor.talking{animation:none}}

/* ===== v5: crisp (less blur), full icon ===== */
.card,.row,.tile,.topic,.lvlgrp,.streak,.icon-btn,.res,.notice,.side{-webkit-backdrop-filter:blur(8px) saturate(150%)!important;backdrop-filter:blur(8px) saturate(150%)!important;background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(255,255,255,.86))!important;border:1px solid rgba(255,255,255,.95)!important;box-shadow:0 6px 20px rgba(14,120,130,.12),0 1px 2px rgba(14,120,130,.1)!important}
.topic{background:#fff!important}
#bnav{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(255,255,255,.95)}
.tutor{border-radius:26%!important;object-fit:contain!important;background:transparent!important;image-rendering:auto;box-shadow:0 8px 22px rgba(30,30,150,.35)!important}
.tutor.talking{animation:tglow2 .6s ease-in-out infinite alternate}
@keyframes tglow2{from{filter:drop-shadow(0 0 4px rgba(80,200,255,.5))}to{filter:drop-shadow(0 0 16px rgba(120,230,255,.95))}}
.meet .tutor{width:104px!important;height:104px!important}
.onb-art{padding:10px}.onb-art .tutor{width:190px!important;height:190px!important}

#o-eng,#o-urd{min-height:44px;min-width:92px}
.callbar button,.callbar .spd,.callbar .tg{min-height:40px;min-width:44px}
.speed button{min-height:40px;min-width:52px}
.callbar{display:flex;align-items:center;gap:8px}.callbar .cb-txt{flex:1}.cbtn{min-width:44px;min-height:40px;border-radius:99px;border:0;background:rgba(255,255,255,.9);font-size:18px;font-family:"Noto Emoji",var(--en)}.cbtn.end{background:#E5484D;color:#fff;transform:rotate(135deg)}
.vgrow{display:flex;gap:8px;direction:ltr}.vg{flex:1;min-height:46px;border-radius:16px;border:1px solid #D8D2FF;background:#fff;font-family:var(--en);font-weight:700;font-size:15px;color:#0B7F8F}.vg.on{background:linear-gradient(135deg,#17B8A6,#1E8FD0);color:#fff;border-color:transparent;box-shadow:0 6px 14px rgba(23,184,166,.4)}

/* ===== v6: soft premium (rounder, softer, lighter type) ===== */
:root{--en:"Jakarta","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--ur:"Jakarta","Noto Nastaliq Urdu","Noto Naskh Arabic",serif;--soft:0 10px 30px rgba(110,90,255,.13),0 2px 6px rgba(110,90,255,.06)}
body{color:#2b2a57;letter-spacing:.1px;-webkit-font-smoothing:antialiased}
body::before{opacity:.95}
.title,.m-h,.onb-h,.sect,.lg-t,.tp-t,.cb-t b{font-weight:700!important;letter-spacing:-.2px}
.card,.row,.tile,.topic,.lvlgrp,.streak,.icon-btn,.res,.notice,.side{border-radius:28px!important;border:1px solid rgba(255,255,255,.9)!important;background:linear-gradient(160deg,rgba(255,255,255,.86),rgba(255,255,255,.6))!important;-webkit-backdrop-filter:blur(16px) saturate(165%)!important;backdrop-filter:blur(16px) saturate(165%)!important;box-shadow:var(--soft),inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -8px 16px rgba(150,130,255,.05)!important}
.topic{border-radius:24px!important;background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(246,243,255,.78))!important}
.tp-i{border-radius:18px!important;box-shadow:0 4px 10px rgba(110,90,255,.15),inset 0 1px 0 #fff}
.meet{border-radius:32px!important;box-shadow:0 22px 46px rgba(31,169,196,.34),0 4px 10px rgba(31,169,196,.2),inset 0 2px 0 rgba(255,255,255,.55),inset 0 -14px 24px rgba(40,20,140,.18)!important}
.meet .tutor{animation:bob 4.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.tutor.talking{animation:tglow2 .6s ease-in-out infinite alternate,bob 4.5s ease-in-out infinite}
button{transition:transform .15s ease,box-shadow .2s ease}
button:active{transform:scale(.97)}
.meet button,.bigbtn.primary{border-radius:99px!important;box-shadow:0 10px 22px rgba(23,184,166,.38),inset 0 1.5px 0 rgba(255,255,255,.7),inset 0 -6px 10px rgba(80,40,200,.15)!important}
.contbar{border-radius:26px!important;box-shadow:0 18px 36px rgba(182,107,255,.45),inset 0 1.5px 0 rgba(255,255,255,.6),inset 0 -8px 14px rgba(120,40,160,.18)!important}
#bnav{border-radius:30px;background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(255,255,255,.58));-webkit-backdrop-filter:blur(22px) saturate(190%);backdrop-filter:blur(22px) saturate(190%);box-shadow:0 20px 44px rgba(14,159,148,.24),inset 0 1.5px 0 #fff}
#bnav button{font-weight:600}
.en,.t-en,.tp-t{color:#26254f}.tp-u,.mean,.t-ur,.fine{color:#6b6a92}
.speed button{border-radius:99px}
.listen-btn,#b-slow,#b-listen{white-space:nowrap}
body.hasnav #app{padding-bottom:170px}
.lvlgrp .lg-c{border-radius:99px;font-weight:700}
#o-eng,#o-urd{min-width:0;padding-left:12px;padding-right:12px}
.tiles.big .tile,.tile{min-width:0}
#app{padding-bottom:200px!important}
#b-slow{min-height:64px!important;padding:8px 10px!important}
#b-slow .ur{font-size:15px}

/* v17 — clean mint/aqua look (inspired by user's reference screenshots) */
:root{--o:#0E9F94;--o2:#0B7F8F;--o3:#D9F5F0;--cream:#EAF8F6;--line:#CDEEE9;--soft:0 8px 24px rgba(14,159,148,.12),0 1px 3px rgba(14,100,100,.06)}
body{color:#173B3D;background:#EAF8F6}
body::before{background:radial-gradient(60% 40% at 15% 0%,rgba(120,230,215,.55),transparent 70%),radial-gradient(55% 40% at 100% 8%,rgba(120,190,255,.35),transparent 70%)!important;opacity:1}
@media(min-width:600px){body{background:linear-gradient(135deg,#7FE3D6 0%,#2FB3C4 55%,#2878F8 100%)}}
h1.title,.logo{color:#0B7F8F!important}
.card,.row,.tile,.topic,.lvlgrp,.streak,.icon-btn,.res,.notice,.side{border-radius:26px!important;border:1px solid #DDF1EE!important;background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:var(--soft)!important}
.todaycard{border-color:#BFEDE6!important}
.meet{background:linear-gradient(150deg,#2FD3B8 0%,#1FA9C4 55%,#2878F8 100%)!important;border-radius:32px!important;box-shadow:0 18px 38px rgba(31,169,196,.35)!important}
.meet button,.bigbtn.primary,.contbar{background:linear-gradient(135deg,#17B8A6,#1E8FD0)!important;color:#fff!important;border-radius:99px!important;box-shadow:0 10px 22px rgba(23,184,166,.35)!important}
.tp-i,.big-ico{background:#D9F5F0!important;box-shadow:none!important}
#bnav{background:#fff!important;border-radius:30px;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 14px 34px rgba(14,100,110,.18)}
#bnav button.on,#bnav button[aria-current],#bnav .active{color:#0E9F94!important}
.en,.t-en,.tp-t{color:#173B3D}.tp-u,.mean,.t-ur,.fine{color:#5E7F80}

.title span,.onb-h{background:linear-gradient(90deg,#10A38F,#1E8FD0)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
.onb-art{background:radial-gradient(circle,rgba(255,255,255,.95),rgba(120,225,210,.4))!important;box-shadow:0 24px 60px rgba(23,184,166,.35)!important}
.onb-p{color:#4E7173}.onb-dots i.on,.dots .on{background:#17B8A6!important}

body::before{background:radial-gradient(60% 38% at 12% 0%,rgba(110,230,212,.55),transparent 70%),radial-gradient(50% 36% at 100% 6%,rgba(120,190,255,.38),transparent 70%),linear-gradient(180deg,#EAF8F6,#F3FBFA)!important;animation:none!important}
#bnav button.on{background:linear-gradient(135deg,#17B8A6,#1E8FD0)!important;color:#fff!important;box-shadow:0 8px 18px rgba(23,184,166,.4)!important}
.lvlgrp .lg-t{color:#0B6F78!important}
.lvlgrp .lg-c{background:linear-gradient(135deg,#17B8A6,#1E8FD0)!important;box-shadow:0 4px 10px rgba(23,184,166,.35)!important}
.tp-u,.tp-t+.tp-u,.topic .tp-u{color:#5E8586!important}
.row,.topic{box-shadow:var(--soft)!important}
.logo{background:#fff!important;border-color:#CDEEE9!important}
.sect,.lg-t{color:#173B3D}

html{background:#EAF8F6}
body::before{background:radial-gradient(60% 38% at 12% 0%,rgba(110,230,212,.5),transparent 70%),radial-gradient(50% 36% at 100% 6%,rgba(120,190,255,.3),transparent 70%),linear-gradient(180deg,#EAF8F6,#F3FBFA)!important}
.logo,.logo *{color:#0B7F8F!important}.logo b{color:#173B3D!important}
.topic .tp-u,.tp-u,.tp-t~.tp-u,.topic span.tp-u,.topic small{color:#5E8586!important}
.topic [class*=tp-]:not(.tp-t):not(.tp-i):not(.tp-go){color:#5E8586!important}
.tp-go{color:#17B8A6!important}

/* v18 language sheet */
.langsheet{background:rgba(10,50,60,.38)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);align-items:end!important;padding:0!important}
.ls-card{max-width:480px!important;border-radius:32px 32px 0 0!important;background:#fff!important;padding:12px 18px 26px!important;gap:12px!important;box-shadow:0 -18px 50px rgba(14,100,110,.28)!important;animation:lsup .25s ease-out}
@keyframes lsup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.ls-card::before{content:"";width:44px;height:5px;border-radius:9px;background:#CDEEE9;align-self:center}
.ls-card h3{font-size:20px!important;font-weight:800;color:#0B4F55;margin:4px 0 2px!important}
.lgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ls-card .lgrid button{position:relative;display:flex;align-items:center;gap:10px;min-height:58px!important;padding:8px 12px;border-radius:20px!important;background:#F2FBF9!important;border:1.5px solid #DDF1EE!important;color:#173B3D!important;text-align:left;box-shadow:none}
.ls-card .lgrid button.on{background:#fff!important;color:#0B4F55!important;border:2px solid #17B8A6!important;box-shadow:0 8px 20px rgba(23,184,166,.25)!important}
.lgc{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:var(--en);font-weight:800;font-size:12px;color:#fff;background:linear-gradient(135deg,#17B8A6,#1E8FD0)}
.lgn{font-weight:700;font-size:15px;line-height:1.2}
.lgk{position:absolute;top:6px;right:8px;width:18px;height:18px;border-radius:50%;background:#17B8A6;color:#fff;font-size:11px;display:grid;place-items:center}
.ls-card p{font-size:12px!important;color:#6b8c8d!important;text-align:center}
.ls-x{position:static!important;min-height:44px;border-radius:99px!important;background:#EAF8F6!important;color:#0B7F8F!important;font-weight:700}

/* v20 full-screen language page */
.langsheet{background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;align-items:start!important;overflow:auto;padding:0!important}
.ls-card{max-width:520px!important;margin:0 auto;min-height:100dvh;border-radius:0!important;box-shadow:none!important;padding:16px 16px 28px!important;gap:10px!important;animation:none;position:relative;background:#fff!important}
.ls-card::before{display:none}
.ls-card h3{font-size:18px!important;font-weight:700;color:#173B3D;text-align:center;margin:8px 0 14px!important}
.lgrid{display:flex!important;flex-direction:column;gap:10px}
.ls-card .lgrid button.lrow{display:flex;flex-direction:row;align-items:center;gap:12px;min-height:62px!important;padding:10px 16px;border-radius:18px!important;background:#F6F7F8!important;border:1.5px solid transparent!important;color:#1d2b2c!important;box-shadow:none!important;text-align:left;direction:ltr}
.ls-card .lgrid button.lrow.on{background:#E9F8F5!important;border-color:#17B8A6!important}
.lrad{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid #2b3335;display:block;position:relative}
.lrow.on .lrad{border-color:#17B8A6}.lrow.on .lrad::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#17B8A6}
.lrow .lgn{flex:1;text-align:right;font-weight:600;font-size:17px;font-family:var(--en),"Noto Nastaliq Urdu"}
.lflag{flex:none;font-size:26px;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.ls-x{position:absolute!important;top:14px;left:14px;width:42px;height:42px;min-height:42px!important;border-radius:50%!important;background:#F0F3F3!important;font-size:18px!important;padding:0}
.ls-card p{margin-top:10px!important}

/* v21 poster-style home */
.stage{position:relative;overflow:hidden;margin:calc(-1 * max(14px,env(safe-area-inset-top))) -18px 0;padding:max(14px,env(safe-area-inset-top)) 20px 26px;color:#fff;background:linear-gradient(165deg,#0B1F4D 0%,#0B4A7A 45%,#12A8A0 100%);border-radius:0 0 36px 36px;box-shadow:0 18px 40px rgba(11,74,122,.35)}
.stg-glow{position:absolute;right:-60px;top:40px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(120,240,225,.45),transparent 68%)}
.stg-top{position:relative;display:flex;align-items:center;justify-content:space-between;direction:ltr}
.stage .logo{background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.3)!important;color:#fff!important}.stage .logo *{color:#fff!important}
.stage .brand-r{display:flex;gap:8px;align-items:center}
.stage .streak,.stage .icon-btn{background:rgba(255,255,255,.16)!important;border:1px solid rgba(255,255,255,.3)!important;color:#fff!important;box-shadow:none!important}
.stage .streak b,.stage .streak .ur{color:#fff!important}
.stg-h{position:relative;font-family:var(--en);font-weight:800;font-size:38px;line-height:1.08;letter-spacing:-1px;margin:22px 0 4px;direction:ltr;text-align:left}
.stg-h span{background:linear-gradient(90deg,#7CF5E0,#8CC8FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stg-u{position:relative;margin:0;font-size:17px;color:#D4EEFF;line-height:2}
.stg-row{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:8px 0 6px;direction:ltr}
.stg-row .tutor{border-radius:32px;border:3px solid rgba(255,255,255,.55);box-shadow:0 18px 40px rgba(0,0,0,.35),0 0 0 8px rgba(124,245,224,.15);animation:bob 4.5s ease-in-out infinite}
.stg-bub{max-width:55%;background:#fff;color:#0B3A55;border-radius:22px 22px 22px 6px;padding:12px 14px;box-shadow:0 12px 26px rgba(0,0,0,.2);display:flex;flex-direction:column;gap:2px;margin-bottom:26px}
.stg-bub b{font-size:18px;font-family:var(--en)}.stg-bub span{font-size:13px;color:#4E7173;font-family:var(--en)}
.stg-cta{position:relative;display:block;width:100%;min-height:58px;border-radius:99px!important;background:linear-gradient(135deg,#7CF5E0,#46C8F5)!important;color:#06314A!important;font-family:var(--en);font-weight:800;font-size:19px;box-shadow:0 14px 28px rgba(70,200,245,.45)!important;border:0}
.stg-soon{position:relative;display:block;text-align:center;margin-top:8px;font-size:12px;color:#BFE3F5;font-family:var(--en)}
.sheet{padding:18px 0 0}
.sheet .sect{font-family:var(--en);font-weight:800;font-size:22px;color:#0B3A55}

.contbar{background:linear-gradient(135deg,#0B4A7A,#12A8A0)!important;color:#fff!important}

.partner{background:linear-gradient(165deg,#0B1F4D 0%,#0B4A7A 50%,#12A8A0 100%)!important;box-shadow:0 18px 40px rgba(11,74,122,.35)!important}
.callbar{background:linear-gradient(135deg,#0B4A7A,#12A8A0)!important}
.page-title,h1.page-title{font-family:var(--en);font-weight:800;color:#0B3A55}
.tile{border-radius:26px!important}

.callbar,.callbar *{color:#fff}.callbar .cb-txt{color:#fff!important}.callbar .dot{background:#7CF5E0}
.stg-u{display:none}

/* v22 finer sizing */
.ls-card .lgrid button.lrow{min-height:50px!important;padding:6px 14px;border-radius:15px!important}
.lrow .lgn{font-size:15px!important}.lflag{font-size:22px}.lrad{width:20px;height:20px}
.ls-card h3{font-size:16px!important}.lgrid{gap:8px}
.stg-h{font-size:32px!important}.stg-cta{min-height:52px;font-size:17px}.stg-bub b{font-size:16px}
.sheet .sect{font-size:19px}