:root{--bg:#F7F4EC;--card:#fff;--ink:#1d2a24;--mut:#5d6b64;--line:#e4dfd2;--green:#0F5132;--g2:#009246;--red:#CE2B37;--gold:#C9A227;--sh:0 2px 10px rgba(20,40,30,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#101814;--card:#18231e;--ink:#eef2ee;--mut:#a6b4ad;--line:#2a3831;--green:#5cc592;--sh:none}}
:root[data-theme="dark"]{--bg:#101814;--card:#18231e;--ink:#eef2ee;--mut:#a6b4ad;--line:#2a3831;--green:#5cc592}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.5 "Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
body.lang-ur,body.lang-pa [lang=ur]{font-family:"Noto Nastaliq Urdu","Noto Sans",serif;line-height:2}
body.lang-ur [lang=it]{font-family:"Noto Sans",system-ui,sans-serif;line-height:1.5}
a{color:var(--green)}button,select,input,textarea{font:inherit;color:inherit}
main{max-width:860px;margin:0 auto;padding:16px 16px 60px}
.center{text-align:center}.small{font-size:.85rem;color:var(--mut)}
.top{position:sticky;top:0;z-index:5;background:var(--card);box-shadow:var(--sh)}
.flag{height:5px;background:linear-gradient(90deg,var(--g2) 33.3%,#fff 33.3% 66.6%,var(--red) 66.6%)}
.bar{display:flex;align-items:center;gap:10px;max-width:860px;margin:0 auto;padding:8px 16px}
.ttl{flex:1;font-weight:800;text-decoration:none;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon{font-size:1.4rem;text-decoration:none;color:var(--ink);padding:4px 8px}.logo{font-size:1.4rem}
#langSel{max-width:130px;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.hero{background:linear-gradient(135deg,#0F5132,#146c43);color:#fff;border-radius:20px;padding:22px 18px;margin:8px 0 18px}
.hero h1{margin:0 0 6px;font-size:1.8rem}.hero p{margin:0 0 14px;opacity:.95}.hero small{display:block;opacity:.9;margin-top:6px}.hero .note{font-size:.78rem;opacity:.8}
.btn{display:inline-block;background:var(--green);color:#fff;border:0;border-radius:14px;padding:12px 18px;font-weight:700;text-decoration:none;cursor:pointer;margin:6px 0;min-height:44px}
.hero .btn{background:#fff;color:var(--green)}.btn.big{font-size:1.08rem;padding:14px 22px;width:100%;text-align:center}
@media (prefers-color-scheme:dark){.btn{color:#08130d}}
.meter{height:10px;background:rgba(255,255,255,.25);border-radius:9px;overflow:hidden;margin-top:12px}.meter i{display:block;height:100%;background:var(--gold);border-radius:9px}
.meter.sm{height:6px;background:var(--line);margin-top:8px}
.levels,.mocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.lvl{display:block;background:var(--card);border-radius:16px;padding:14px 16px;text-decoration:none;color:var(--ink);box-shadow:var(--sh);border-inline-start:6px solid var(--g2)}
.lvl b{font-size:1.6rem;display:block}.lvl span{display:block}.lvl em{font-style:normal;font-size:.85rem;color:var(--mut)}
.lv-A0{border-color:#8BC34A}.lv-A1{border-color:#26A69A}.lv-A2{border-color:#1E88E5}.lv-B1{border-color:#8E24AA}.lv-B2{border-color:#F4511E}.lv-C1{border-color:#C62828}
.badge{display:inline-block;color:#fff;border-radius:8px;padding:0 8px;font-size:.9em;background:#1E88E5}
.badge.lv-A0{background:#689F38}.badge.lv-A1{background:#00897B}.badge.lv-B1{background:#8E24AA}.badge.lv-B2{background:#E64A19}.badge.lv-C1{background:#C62828}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.tile{background:var(--card);border:0;border-radius:16px;padding:14px 8px;text-align:center;text-decoration:none;color:var(--ink);box-shadow:var(--sh);font-size:1.8rem;cursor:pointer}
.tile span{display:block;font-size:.85rem;font-weight:600;margin-top:4px}
.lvh{font-size:1.3rem}
.units{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.units a{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;padding:12px;text-decoration:none;color:var(--ink);box-shadow:var(--sh)}
.units a.done{outline:2px solid #8BC34A}.units .em{font-size:2rem}.units .ut{flex:1}.units .ut small{display:block;color:var(--mut)}.units .ck{font-size:.9rem}
.unit h1{font-size:1.25rem}.unit h1 small{font-size:.8rem;color:var(--mut);font-weight:400}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px;scrollbar-width:none}
.tabs a{flex:0 0 auto;padding:8px 12px;border-radius:999px;background:var(--card);text-decoration:none;color:var(--ink);font-size:.9rem;box-shadow:var(--sh)}
.tabs a.on{background:var(--green);color:#fff}
.player{background:#0d1f17;border-radius:18px;overflow:hidden;color:#fff;box-shadow:var(--sh)}
.player:fullscreen{display:flex;flex-direction:column;border-radius:0}.player:fullscreen .stage{flex:1}
.stage{min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px 16px;cursor:pointer;background:radial-gradient(circle at 50% 30%,#1f4d38,#0d1f17 70%)}
.stage .pic{font-size:5.5rem;line-height:1.1;animation:pop .45s ease}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.bigt{font-size:1.4rem;font-weight:800;margin-top:6px}
.itw{font-size:1.9rem;font-weight:800;color:#FFE08A;margin-top:8px;line-height:1.25;direction:ltr}
.itw.spkB{color:#9fe3ff}
.stage .trw{font-size:1.2rem;margin-top:8px;opacity:.95}
.pr{color:#b8f5cf;margin-top:4px;font-size:1.05rem}
.rep{margin-top:12px;background:var(--red);border-radius:999px;padding:4px 14px;font-weight:700;animation:pop .3s}
.ctrl{padding:8px 12px 12px;background:#0a1711;direction:ltr}
.ctrl input[type=range]{width:100%;accent-color:var(--red);height:28px}
.ctrl .row{display:flex;align-items:center;gap:8px;direction:ltr}
.ctrl button{background:none;border:0;color:#fff;font-size:1.4rem;cursor:pointer;min-width:44px;min-height:44px}
.ctrl .pp{font-size:1.8rem}.pos{flex:1;font-size:.85rem;opacity:.8;white-space:nowrap;font-family:system-ui,sans-serif}
.spd select{background:#1b3a2b;color:#fff;border:0;border-radius:8px;padding:6px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.card{position:relative;background:var(--card);border:0;border-radius:16px;padding:14px 10px;box-shadow:var(--sh);cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.card .pic{font-size:2.6rem}.card b{font-size:1.05rem}.card .trw{color:var(--mut);font-size:.9rem}.card .pr{color:var(--g2);font-style:normal;font-size:.9rem}
.card .spk{position:absolute;top:6px;inset-inline-end:8px;font-size:.9rem}
.dlg{display:grid;gap:10px;margin-top:10px}
.bub{display:flex;gap:10px;align-items:flex-start;background:var(--card);border-radius:16px;padding:10px;box-shadow:var(--sh)}
.bub.bB{margin-inline-start:28px;background:color-mix(in srgb,var(--card) 85%,#1E88E5)}.bub.on{outline:3px solid var(--gold)}
.bub p{margin:0;font-weight:600}.bub small{color:var(--mut)}.bub div{flex:1}.who{font-size:1.6rem}
.spk{background:none;border:0;font-size:1.2rem;cursor:pointer}
.gram{background:var(--card);border-radius:16px;padding:16px;box-shadow:var(--sh)}.itg{font-weight:700}.trg{font-size:1.05rem}
.qh{font-size:.9rem;color:var(--mut);margin-bottom:10px}
.q{background:var(--card);border-radius:16px;padding:18px;text-align:center;box-shadow:var(--sh)}
.q .pic{font-size:3.5rem}.q .itw{color:var(--green);font-size:1.6rem}
.opts{display:grid;gap:10px;margin-top:14px}
.opts button{padding:14px;border-radius:14px;border:2px solid var(--line);background:var(--bg);cursor:pointer;font-size:1.02rem;min-height:48px}
.opts button.right,label.right{border-color:#2e7d32;background:#e3f4e5;color:#14381a}.opts button.bad,label.bad{border-color:var(--red);background:#fde4e6;color:#5a0d14}
.bigplay{font-size:3rem;background:var(--bg);border:0;border-radius:50%;width:110px;height:110px;cursor:pointer}
.q input,#nm,textarea{width:100%;padding:12px;border-radius:12px;border:2px solid var(--line);background:var(--bg);font-size:1.1rem;margin:10px 0}
.good{color:#2e7d32;font-weight:700}.bad{color:var(--red);font-weight:700}
.result{text-align:center;background:var(--card);border-radius:16px;padding:22px;box-shadow:var(--sh)}.result .pic{font-size:4rem}
details.info{background:var(--card);border-radius:14px;padding:12px 14px;margin:10px 0;box-shadow:var(--sh)}details summary{font-weight:700;cursor:pointer}
.mock{background:var(--card);border-radius:16px;padding:14px;margin:12px 0;box-shadow:var(--sh)}.read{background:var(--bg);border-radius:12px;padding:12px}
.mq{margin:12px 0}.mq label{display:block;padding:8px 10px;border:2px solid var(--line);border-radius:10px;margin:6px 0;cursor:pointer}
.install .qr{text-align:center;background:var(--card);border-radius:16px;padding:16px;margin:12px 0;box-shadow:var(--sh)}.install .qr img{background:#fff;padding:8px;border-radius:12px}
.steps li{margin:10px 0}
canvas#cv{width:100%;height:auto;border-radius:12px;box-shadow:var(--sh);margin:10px 0}
[dir=rtl] .itw,[dir=rtl] [lang=it]{direction:ltr;unicode-bidi:isolate}
@media (max-width:420px){.stage{min-height:300px}.stage .pic{font-size:4.5rem}.itw{font-size:1.6rem}.tiles{gap:8px}.tile{font-size:1.5rem}}

/* 24 Sep 2026: home + awmza.com buttons on every page */
.awz{flex:0 0 auto;font-weight:800;font-size:.8rem;letter-spacing:.02em;text-decoration:none;color:#fff;background:var(--green);border-radius:999px;padding:7px 10px;min-height:32px;display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.awz span{font-size:.9em;opacity:.85}
.bar .icon{flex:0 0 auto;min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px}
.bar{gap:6px}
.foot{max-width:860px;margin:28px auto 0;padding:16px 16px calc(24px + env(safe-area-inset-bottom));text-align:center;border-top:1px solid var(--line);font-size:.9rem;color:var(--mut)}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:8px}
.foot nav a{background:var(--card);box-shadow:var(--sh);border-radius:999px;padding:9px 14px;text-decoration:none;color:var(--ink);font-weight:600;min-height:40px;display:inline-flex;align-items:center}
.foot p a{color:var(--mut)}
@media (max-width:420px){#langSel{max-width:92px;font-size:.85rem}.ttl{font-size:.95rem}.awz{padding:6px 8px}}
@media (max-width:480px){.bar .ttl{visibility:hidden;min-width:0}#langSel{max-width:110px}}
@media (max-width:340px){.bar .ttl{display:none}#langSel{max-width:76px;padding:4px}.awz{font-size:.7rem;padding:5px 7px}.bar{gap:4px;padding:8px 10px}.bar .icon{min-width:36px}}