/* درسنامه‌ی تصویری و متحرک */
.note{align-items:stretch;gap:12px}
.nstage{position:relative;height:150px;display:grid;place-items:center;margin-top:2px}
.nglow{position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(123,107,214,.35),rgba(31,163,155,.22) 55%,transparent 72%);animation:nglow 3.2s ease-in-out infinite}
.nicon{position:relative;font-size:78px;line-height:1;cursor:pointer;filter:drop-shadow(0 10px 12px rgba(60,40,110,.28));animation:nbob 2.6s ease-in-out infinite;user-select:none}
.nicon.pop{animation:npop .8s cubic-bezier(.3,1.6,.4,1)}
.nsp{position:absolute;font-size:20px;animation:ntw 2.4s ease-in-out infinite}
.nsp.s0{top:14px;inset-inline-start:24%}.nsp.s1{top:30px;inset-inline-end:22%;animation-delay:.5s}.nsp.s2{bottom:18px;inset-inline-start:30%;animation-delay:1s}.nsp.s3{bottom:26px;inset-inline-end:28%;animation-delay:1.5s}
@keyframes nbob{50%{transform:translateY(-9px) rotate(3deg)}}
@keyframes nglow{50%{transform:scale(1.12);opacity:.8}}
@keyframes npop{0%{transform:scale(1)}30%{transform:scale(1.35) rotate(-10deg)}60%{transform:scale(.92) rotate(6deg)}100%{transform:scale(1)}}
@keyframes ntw{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
.ntitle{margin:0;text-align:center;font:900 24px/1.6 Estedad,Vazirmatn;background:linear-gradient(135deg,#1FA39B,#7B6BD6);-webkit-background-clip:text;background-clip:text;color:transparent}
.ncard{display:grid;gap:12px;background:#fff;border:1px solid #ECE6FA;border-radius:26px;padding:18px 18px 20px;box-shadow:0 12px 34px rgba(60,40,110,.12)}
.ncard>*{animation:nrise .5s both;animation-delay:var(--d,0ms)}
@keyframes nrise{from{opacity:0;transform:translateY(14px)}}
.ncard p{margin:0;line-height:2.15;color:#3b3752;text-align:justify;text-justify:inter-word}
.nlead{font-size:17.5px;font-weight:800;color:#2E2A44!important;padding-bottom:10px;border-bottom:2px dashed #E4DDF5}
.npar{font-size:16px}
.nb{font-weight:900;color:#7B6BD6;border-bottom:3px solid rgba(123,107,214,.28);padding-bottom:1px}
.nq{background:linear-gradient(180deg,transparent 52%,rgba(245,165,36,.4) 52%);color:#2E2A44;border-radius:4px;padding:0 3px;font-weight:800}
.nn{color:#EF6C57;font-weight:900}
.nen{display:inline-block;vertical-align:baseline;margin:0 2px;padding:0 10px;border-radius:12px;border:0;font:800 15.5px/1.9 Vazirmatn,sans-serif;color:var(--c);background:color-mix(in srgb,var(--c) 13%,#fff);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 40%,transparent);cursor:pointer;transition:transform .15s}
.nen:active{transform:scale(.93)}
.nen::after{content:' 🔊';font-size:12px;opacity:.7}
.nlist{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.nlist li{position:relative;padding-inline-start:34px;line-height:2;color:#3b3752;text-align:justify;font-size:15.5px}
.nlist li::before{content:'✓';position:absolute;inset-inline-start:0;top:5px;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#1FA39B,#7B6BD6);color:#fff;font-size:13px;font-weight:900;display:grid;place-items:center;line-height:1}
.nhead{font-weight:900;color:#3a2f6b;font-size:16.5px}
.nrow{display:flex;gap:10px;align-items:flex-start;border-radius:16px;padding:10px 12px}
.nrow i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:15px;margin-top:2px}
.nrow.bad{background:#FFF0EE}.nrow.bad i{background:#EF6C57;color:#fff}.nrow.bad p{text-decoration:line-through;text-decoration-color:rgba(239,108,87,.6)}
.nrow.good{background:#EAF8F0}.nrow.good i{background:#4CAF7A;color:#fff}
.nrow.why{background:#FFF6E0}.nrow.why i{background:transparent;font-size:20px}
.nhint{text-align:center;color:#8d86a3;font-size:13px}
@media (prefers-reduced-motion:reduce){.nicon,.nglow,.nsp,.ncard>*{animation:none}}

/* کلینیک تلفظ و نوار کاوش */
.xstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 12px}
.xtile{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;border-radius:20px;padding:12px 6px;font:inherit;cursor:pointer;color:#fff;text-align:center;box-shadow:0 8px 18px rgba(60,40,110,.2);transition:transform .15s}
.xtile:active{transform:scale(.95)}
.xtile i{font-style:normal;font-size:30px;line-height:1.2;animation:nbob 3s ease-in-out infinite}
.xtile b{font-size:13.5px;font-weight:900;line-height:1.5}.xtile small{font-size:11.5px;opacity:.9;line-height:1.5}
.xtile.x1{background:linear-gradient(135deg,#1FA39B,#2FB9C9)}.xtile.x2{background:linear-gradient(135deg,#7B6BD6,#A06BD6)}.xtile.x3{background:linear-gradient(135deg,#F5A524,#EF6C57)}
.pcw{display:grid;gap:12px}.pch0{text-align:center}.pch0 h2{margin:0;font:900 22px/1.6 Estedad,Vazirmatn}.pch0 .sub{margin:0;color:var(--mut,#6B6684);font-size:14px}
.pch0 .nstage{height:110px}.pch0 .nicon{font-size:56px}.pch0 .nglow{width:110px;height:110px}
.pchips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.pchips::-webkit-scrollbar{display:none}
.pchip{flex:none;border:1.5px solid #E4DDF5;background:#fff;border-radius:99px;padding:6px 16px;font:800 14px/1.8 inherit;color:var(--mut,#6B6684);cursor:pointer}.pchip.on{background:linear-gradient(135deg,#1FA39B,#7B6BD6);color:#fff;border-color:transparent}
.pcl{display:grid;gap:10px}
.pcard{background:#fff;border:1px solid #ECE6FA;border-radius:20px;overflow:hidden;box-shadow:0 6px 16px rgba(60,40,110,.08)}
.pch{width:100%;display:flex;align-items:center;gap:12px;border:0;background:none;padding:12px 14px;font:inherit;cursor:pointer;text-align:start}
.pci{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:color-mix(in srgb,var(--c) 16%,#fff)}
.pct{flex:1;display:grid}.pct b{font-weight:900;color:#2E2A44;font-size:15.5px;line-height:1.7}.pct small{color:var(--mut,#6B6684);font-size:12.5px}
.pcx{font-size:22px;color:var(--c);transition:transform .25s;transform:rotate(-90deg)}.pcard.open .pcx{transform:rotate(90deg)}
.pcb{display:none;padding:0 14px 14px;gap:10px}.pcard.open .pcb{display:grid;animation:nrise .35s}
.pcr{display:grid;gap:8px;background:#FAF8FF;border-radius:16px;padding:12px}.pcr p,.pcr li{font-size:14.5px!important}
.pex{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.pe{display:flex;flex-direction:column;align-items:center;gap:0;border:0;border-radius:14px;padding:8px 6px;background:color-mix(in srgb,var(--c) 11%,#fff);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 35%,transparent);cursor:pointer;font:inherit}
.pe b{color:var(--c);font:900 16px/1.6 Vazirmatn}.pe small{color:#6B6684;font-size:12px}.pe i{font-style:normal;font-size:12px;opacity:.7}.pe:active{transform:scale(.95)}
.pq{background:#FFF6E0;border-radius:16px;padding:12px;display:grid;gap:6px}.pq b{color:#8a5a00}.pq p{margin:0;font-size:14.5px}
.pqo{display:flex;flex-wrap:wrap;gap:8px}.pqo button{flex:1;min-width:90px;border:2px solid #F0DDB0;background:#fff;border-radius:14px;padding:8px 10px;font:800 15px/1.6 inherit;cursor:pointer}
.pqo button.ok{background:#4CAF7A;color:#fff;border-color:#4CAF7A}.pqo button.no{background:#EF6C57;color:#fff;border-color:#EF6C57}
.pqr{min-height:22px;font-weight:800;color:#3a2f6b}

/* کارت نوتیفیکیشن بازاریابی */
.promo{position:fixed;inset-inline:14px;top:calc(env(safe-area-inset-top) + var(--nt,0px) + 12px);z-index:300;background:#fff;border-radius:24px;padding:18px 16px 16px;box-shadow:0 18px 50px rgba(60,40,110,.38);border:1px solid #ECE6FA;display:grid;gap:6px;text-align:center;animation:promoin .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes promoin{from{transform:translateY(-120%);opacity:0}}
.promoi{font-size:42px;animation:nbob 2.4s ease-in-out infinite}.promo b{font:900 18px/1.6 Estedad,Vazirmatn;color:#3a2f6b}.promo p{margin:0;color:#3b3752;line-height:1.95;text-align:justify;font-size:15px}
.promox{position:absolute;top:8px;inset-inline-start:10px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(60,40,110,.1);cursor:pointer;font-size:15px}

/* هدو داخل برگه‌ها (پیام‌ها و ...): پرش کوتاه‌تر تا زیر نوار بالا نرود */
.sheet .hodo.fly{animation-name:hfly2}
@keyframes hfly2{0%{translate:0 0;scale:1 1}14%{translate:0 2px;scale:1.05 .95}40%{translate:0 -10px;scale:.98 1.04;rotate:-3deg}62%{translate:0 -11px;rotate:3deg}86%{translate:0 1px;scale:1.04 .96;rotate:0deg}100%{translate:0 0;scale:1 1;rotate:0deg}}
.sheet .shop-hero{padding-top:6px}

/* باشگاه فیلم و صدا */
.cl3{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.cl3 span{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #ECE6FA;border-radius:99px;padding:3px 12px 3px 6px;font-weight:800;font-size:13px;color:#3a2f6b}
.cl3 i{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#1FA39B,#7B6BD6);color:#fff;font-style:normal;font-size:12px;display:grid;place-items:center}
.clnote{background:#F1ECFF;border-radius:16px;padding:10px 14px;font-size:14px;line-height:1.95;color:#3a2f6b;text-align:justify}
.clip{width:100%;display:flex;align-items:center;gap:12px;border:1px solid #ECE6FA;background:#fff;border-radius:20px;padding:10px 12px;font:inherit;cursor:pointer;text-align:start;box-shadow:0 5px 14px rgba(60,40,110,.07)}
.clip.locked{opacity:.78}.clip:active{transform:scale(.98)}
.clic{flex:none;width:50px;height:50px;border-radius:16px;display:grid;place-items:center;font-size:28px;background:linear-gradient(135deg,#F1ECFF,#E3F7F3)}
.clt{flex:1;display:grid}.clt b{font-weight:900;color:#2E2A44;line-height:1.7}.clt small{color:#6B6684;font-size:12.5px}
.clb{display:grid;gap:3px;justify-items:center}.clb i{font-style:normal;font-weight:900;font-size:12px;background:#7B6BD6;color:#fff;border-radius:99px;padding:0 9px}.clb em{font-style:normal;font-size:12px;color:#6B6684}.clb em.fr{color:#1FA39B;font-weight:900}
.cmedia{position:relative;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:16/9}.cmedia iframe,.cmedia video{position:absolute;inset:0;width:100%;height:100%;border:0}
.cact{display:flex;gap:8px;flex-wrap:wrap}.cact .btn{flex:1}
.cwrap{display:grid;gap:10px}.cwrap.nofa .cfa{display:none}
.cline{background:#fff;border:1.5px solid #ECE6FA;border-radius:18px;padding:10px 12px;display:grid;gap:2px;transition:box-shadow .2s,border-color .2s}
.cline.now{border-color:#1FA39B;box-shadow:0 0 0 4px rgba(31,163,155,.18)}
.clsp{font-size:12px;font-weight:900;color:#7B6BD6}.cen{font:800 16.5px/1.9 Vazirmatn;color:#2E2A44}.cfa{color:#6B6684;font-size:14px;text-align:start}
.cbtn{display:flex;gap:8px;margin-top:4px}.cb{width:42px;height:42px;border-radius:14px;border:0;background:#F1ECFF;font-size:19px;cursor:pointer}.cb.big{width:58px;height:58px;font-size:26px;border-radius:18px}.cb:active{transform:scale(.92)}
.cb.mic.rec{background:#EF6C57;animation:nglow 1s infinite}
.cres{min-height:4px}.cbar{height:10px;border-radius:99px;background:#EEE8FA;overflow:hidden;margin-top:6px}.cbar i{display:block;height:100%;border-radius:99px;transition:width .5s}.cres small{color:#3a2f6b;font-weight:800}
/* حالت خانواده */
.fam{display:grid;gap:12px;justify-items:center;text-align:center}
.ffield{width:100%;display:grid;gap:4px;text-align:start}.ffield label{font-weight:800;color:#3a2f6b}.ffield input{border:1.5px solid #E4DDF5;border-radius:14px;padding:10px 12px;font:inherit;font-size:16px}
.fprog{display:flex;gap:6px}.fprog i{width:26px;height:8px;border-radius:99px;background:#E4DDF5}.fprog i.on{background:#4CAF7A}.fprog i.cur{background:#F5A524}
.fturn{border-radius:99px;padding:4px 18px;font-weight:900;color:#fff}.fturn.kid{background:linear-gradient(135deg,#F5A524,#EF6C57)}.fturn.par{background:linear-gradient(135deg,#1FA39B,#7B6BD6)}
.femo{font-size:96px;line-height:1.1;cursor:pointer;animation:nbob 2.6s ease-in-out infinite}.fen{font:900 34px/1.4 Vazirmatn;color:#2E2A44}.ffa{font-size:18px;color:#6B6684}
.fam .btn{width:100%}.ftrophy{font-size:84px;animation:npop 1.2s both}
/* جعبه‌ی شانس */
.luckybar{width:100%;display:flex;align-items:center;gap:12px;border:0;border-radius:20px;padding:10px 14px;margin:0 0 10px;font:inherit;cursor:pointer;text-align:start;background:linear-gradient(135deg,#7B6BD6,#A06BD6);color:#fff;box-shadow:0 8px 18px rgba(60,40,110,.2)}
.luckybar i{font-style:normal;font-size:32px}.luckybar span{display:grid}.luckybar b{font-weight:900}.luckybar small{opacity:.9;font-size:12.5px}
.luckybar.ready{background:linear-gradient(135deg,#F5A524,#EF6C57);animation:lpulse 1.8s ease-in-out infinite}.luckybar.ready i{animation:nbob 1.2s ease-in-out infinite}
@keyframes lpulse{50%{box-shadow:0 0 0 7px rgba(245,165,36,.28)}}
.lucky{text-align:center}.lbox{width:190px;height:190px;margin:6px auto;border-radius:50%;display:grid;place-items:center;gap:0;align-content:center;background:radial-gradient(circle,#FFF3D6,#F7E3FF 70%);cursor:pointer;box-shadow:inset 0 0 0 4px #fff,0 14px 34px rgba(60,40,110,.25)}
.lbx{font-size:96px;line-height:1;filter:drop-shadow(0 10px 10px rgba(0,0,0,.25))}.lbox.ready .lbx{animation:nbob 1.4s ease-in-out infinite}
.lbox.shake .lbx{animation:lshake .9s both}@keyframes lshake{0%,100%{transform:rotate(0)}15%{transform:rotate(-16deg) scale(1.1)}30%{transform:rotate(14deg) scale(1.15)}45%{transform:rotate(-12deg) scale(1.2)}60%{transform:rotate(10deg) scale(1.25)}80%{transform:scale(1.4);opacity:.6}}
.lbox.open{cursor:default;animation:npop .8s cubic-bezier(.3,1.6,.4,1)}.lrw{font-size:80px;line-height:1.1}.lbox.open b{font-weight:900;color:#3a2f6b;padding:0 12px;line-height:1.6}
.lmsg{font-weight:800;color:#3a2f6b;margin:0;min-height:26px}.lodds{background:#F7F5FC;border-radius:16px;padding:8px 14px;text-align:start;font-size:14px}.lodds summary{cursor:pointer;font-weight:800;color:#3a2f6b}.lodds ul{margin:6px 0;padding-inline-start:20px;line-height:2}

/* کیبورد: ارتفاعش را اندروید در --kb می‌دهد؛ برگه‌ها و دکمه‌های پایین بالای کیبورد می‌مانند */
.sheet{inset:0 0 var(--kb,0px) 0}
.sheet>div{max-height:min(94dvh,100%)}
.dock{bottom:var(--kb,0px)}

.pqo.col{flex-direction:column}.pqo.col button{text-align:start;font-size:14.5px;line-height:1.9}
.pq.ear{background:#EEF6FF}.pq.ear b{color:#2c4a8a}
.pcard .pcx{font-size:18px}