/* AZ Class v3: motion, daily goal, sync, offline, landing video, teacher dashboard. Loads after clear.css.
   Animations use transform/opacity only (ring fills animate stroke-dashoffset on small SVGs: paint only, no layout). */
:root{--mo-fast:.18s;--mo:.32s;--mo-slow:.6s;--mo-spring:cubic-bezier(.2,1.25,.35,1);--mo-out:cubic-bezier(.16,1,.3,1)}

/* ---------- screen transitions (direction-aware) ---------- */
:root[data-mo-nav="fwd"] #app.screen-in{animation:mo-screen-fwd .38s var(--mo-out) both}
:root[data-mo-nav="back"] #app.screen-in{animation:mo-screen-back .38s var(--mo-out) both}
[dir="rtl"][data-mo-nav="fwd"] #app.screen-in{animation-name:mo-screen-back}
[dir="rtl"][data-mo-nav="back"] #app.screen-in{animation-name:mo-screen-fwd}
@keyframes mo-screen-fwd{from{opacity:0;transform:translate3d(18px,0,0)}to{opacity:1;transform:none}}
@keyframes mo-screen-back{from{opacity:0;transform:translate3d(-18px,0,0)}to{opacity:1;transform:none}}
.mo-in{animation:mo-rise .46s var(--mo-out) both;animation-delay:calc(var(--mo-i,0) * 45ms)}
@keyframes mo-rise{from{opacity:0;transform:translate3d(0,12px,0) scale(.985)}to{opacity:1;transform:none}}

/* ---------- skeletons: transform shimmer instead of background-position ---------- */
.skel,.skel-line,.skel-block{position:relative;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r);animation:none}
.skel::after,.skel-line::after,.skel-block::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);transform:translate3d(-100%,0,0);animation:mo-shimmer 1.3s ease-in-out infinite}
@keyframes mo-shimmer{to{transform:translate3d(100%,0,0)}}
.skel-line{min-height:92px}.skel-block{min-height:220px}.skel-block.tall{min-height:320px}

/* ---------- practice: flips, ticks, misses, result ring ---------- */
.pr-cards{perspective:900px}
.pr-card.mo-flip{animation:mo-flip .42s var(--mo-out) both;backface-visibility:hidden;transform-origin:50% 50%}
@keyframes mo-flip{from{opacity:.2;transform:rotateX(-78deg) scale(.98)}to{opacity:1;transform:none}}
.pr-card.mo-had{animation:mo-pop .42s var(--mo-spring) both}
.pr-card.mo-had .pr-n{animation:mo-tickpop .5s var(--mo-spring) both}
.pr-card.mo-miss{animation:mo-shake .38s ease both}
@keyframes mo-pop{0%{transform:scale(.97)}55%{transform:scale(1.02)}100%{transform:none}}
@keyframes mo-tickpop{0%{transform:scale(.4) rotate(-20deg);opacity:.3}60%{transform:scale(1.25) rotate(4deg);opacity:1}100%{transform:none}}
@keyframes mo-shake{0%,100%{transform:none}20%{transform:translate3d(-5px,0,0)}40%{transform:translate3d(4px,0,0)}60%{transform:translate3d(-3px,0,0)}80%{transform:translate3d(2px,0,0)}}
.mo-tick{animation:mo-pop .4s var(--mo-spring)}
.mo-tick input[type=checkbox]{animation:mo-tickpop .45s var(--mo-spring)}
.pr-ring-wrap{position:relative;width:176px;height:176px;margin:8px auto 12px;display:grid;place-items:center}
.pr-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.pr-ring circle{fill:none;stroke-width:8}
.mo-ring-t{stroke:rgba(255,255,255,.1)}
.mo-ring-a{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset 1.1s var(--mo-out)}
.mo-ring-a.ok{stroke:var(--okc)}
.pr-ring-wrap .score{margin:0!important;position:relative;font-variant-numeric:tabular-nums}
.pr-newbest{animation:mo-rise .5s .5s var(--mo-spring) both}
.pr-sync{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;color:var(--tx-3);flex:none}
.pr-sync svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.pr-sync.ok{color:var(--okc);background:rgba(125,211,160,.1)}
.pr-sync-note{margin:10px 0 0;min-height:1em}
.mo-confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:10000}

/* ---------- diagrams: arrows + highlighted part ---------- */
.cl-sheet .cl-fig .fg-lead,.cl-sheet .cl-fig .fg-tag,.cl-sheet .cl-fig .fg-tag-t{transform-box:fill-box;transform-origin:center;animation:mo-lead .5s var(--mo-out) both;animation-delay:.18s}
.cl-sheet .cl-fig .fg-tag,.cl-sheet .cl-fig .fg-tag-t{animation-delay:.1s}
.cl-sheet .cl-fig .fg-hi{animation:mo-glow 1.6s ease-in-out .6s 2}
@keyframes mo-lead{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes mo-glow{50%{opacity:.55}}
[dir="rtl"] .fg-tag-t,.cl-sheet[dir="rtl"] .fg-tag-t{direction:rtl}
.cl-sheet[dir="rtl"] .cl-sheet-top h2{font-family:var(--sans);line-height:1.6}
:lang(pa) .cl-sheet-top h2,:lang(pa) .fg-tag-t{font-family:var(--sans)}

/* ---------- daily goal + streak ---------- */
.cl-goal{display:flex;align-items:center;gap:16px;margin:18px 0 8px;padding:16px 18px;border-radius:var(--r);background:var(--card-bg);border:1px solid var(--line-2)}
.cl-goal.is-met{border-color:rgba(125,211,160,.4);background:linear-gradient(180deg,rgba(125,211,160,.1),rgba(125,211,160,.02))}
.cl-goal .grow{display:flex;flex-direction:column;gap:4px;min-width:0}
.cl-goal h2{margin:0;font:700 17px/1.2 var(--sans);color:var(--tx)}
.cl-goal-p{color:var(--tx-2);font-size:14.5px;line-height:1.4}
.cl-goal-ring{position:relative;flex:none;width:58px;height:58px;display:grid;place-items:center}
.cl-goal-ring b{position:relative;font:700 14px/1 var(--sans);color:var(--gold-hi);font-variant-numeric:tabular-nums}
.cl-goal-ring b svg{width:24px;height:24px;stroke:var(--okc);fill:none;stroke-width:2.4}
.cl-goal.is-met .cl-ring-a{stroke:var(--okc)}
.cl-goal-bar{display:block;height:6px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:4px;max-width:320px}
.cl-goal-bar i{display:block;height:100%;background:var(--gold-grad);border-radius:9px;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--mo-out)}
[dir="rtl"] .cl-goal-bar i{transform-origin:right}
.cl-goal.is-met .cl-goal-bar i{background:var(--okc)}
.cl-streak{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:86px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.04);color:var(--tx-3);text-align:center}
.cl-streak svg{width:24px;height:24px}
.cl-streak b{font:700 22px/1 var(--sans);color:var(--tx);font-variant-numeric:tabular-nums}
.cl-streak small{font-size:11.5px;line-height:1.25}
.cl-streak.on{color:#FFB547;background:rgba(255,181,71,.1)}
.cl-streak.on.today svg{animation:mo-flame 1.8s ease-in-out infinite;transform-origin:50% 90%}
@keyframes mo-flame{50%{transform:scale(1.12) rotate(-3deg)}}
@media (max-width:520px){.cl-goal{flex-wrap:wrap}.cl-streak{flex-direction:row;gap:8px;width:100%;justify-content:center}}
.cl-toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));z-index:9997;max-width:min(92vw,460px);padding:12px 18px;border-radius:14px;background:#1f3a2a;color:#E6FFF0;border:1px solid rgba(125,211,160,.5);font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.4);opacity:0;transform:translate3d(-50%,14px,0);pointer-events:none;transition:opacity .25s,transform .35s var(--mo-out)}
.cl-toast.on{opacity:1;transform:translate3d(-50%,0,0)}

/* ---------- offline banner ---------- */
.cl-net{position:fixed;left:0;right:0;top:0;z-index:9999;padding:10px 16px calc(10px);padding-top:calc(10px + env(safe-area-inset-top));text-align:center;font-weight:600;font-size:14.5px;background:#1f3a2a;color:#E6FFF0;transform:translate3d(0,-110%,0);transition:transform .35s var(--mo-out)}
.cl-net.is-off{background:#3a2a12;color:#FFE9C2}
.cl-net.on{transform:none}

/* ---------- landing demo video ---------- */
.cl-demo{padding-top:clamp(40px,7vw,80px);padding-bottom:clamp(20px,4vw,40px)}
.cl-demo-in{display:grid;gap:28px;align-items:center}
@media (min-width:860px){.cl-demo-in{grid-template-columns:1fr minmax(260px,360px);gap:56px}}
.cl-demo-txt h2{font:400 clamp(30px,4.4vw,44px)/1.08 var(--serif);margin:0 0 12px;color:var(--tx)}
.cl-demo-txt p{color:var(--tx-2);font-size:17px;line-height:1.5;margin:0 0 8px}
.cl-demo-frame{position:relative;justify-self:center;width:min(78vw,340px);aspect-ratio:9/16;border-radius:34px;padding:10px;background:linear-gradient(160deg,#2a2830,#111114);border:1px solid var(--gold-line);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 8px rgba(217,178,106,.05)}
.cl-demo-v{display:block;width:100%;height:100%;object-fit:cover;border-radius:26px;background:#0c0c0e}
.cl-demo-v::cue{font:600 15px/1.35 var(--sans);background:rgba(0,0,0,.72);color:#fff}
.cl-demo-pp{position:absolute;right:20px;bottom:20px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);background:rgba(10,10,12,.62);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .2s var(--mo-spring),opacity .2s}
[dir="rtl"] .cl-demo-pp{right:auto;left:20px}
.cl-demo-pp svg{width:22px;height:22px}
.cl-demo-pp:hover{transform:scale(1.06)}
.cl-demo:not(.is-playing) .cl-demo-pp{width:72px;height:72px;right:calc(50% - 36px);bottom:calc(50% - 36px);background:var(--gold-grad);color:#17120A;border-color:transparent}
[dir="rtl"] .cl-demo:not(.is-playing) .cl-demo-pp{left:calc(50% - 36px)}
.cl-demo:not(.is-playing) .cl-demo-pp svg{width:30px;height:30px}
.cl-demo.is-err .cl-demo-pp{display:none}

/* ---------- teacher dashboard ---------- */
.th{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:14px;min-width:0}
.th-head h2{font:400 clamp(28px,4vw,36px)/1.1 var(--serif);margin:0 0 6px}
.th-head p{margin:0;max-width:62ch}
.th-filters{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;padding:14px 16px}
.th-filters label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--tx-3);font-weight:600}
.th-filters select{min-height:44px;min-width:150px;padding:0 12px;border-radius:12px;border:1px solid var(--line-3);background:#17161b;color:var(--tx);font:500 15px var(--sans)}
.th-filters .th-chk{flex-direction:row;align-items:center;gap:8px;min-height:44px;color:var(--tx-2)}
.th-filters .th-chk input{width:20px;height:20px}
.th-exp{display:flex;gap:8px;margin-inline-start:auto;flex-wrap:wrap}
.th-exp .btn{min-height:44px}
.th-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:800px){.th-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.th-kpi{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:var(--r);background:var(--card-bg);border:1px solid var(--line-2)}
.th-kpi b{font:400 38px/1 var(--serif);color:var(--tx);font-variant-numeric:tabular-nums}
.th-kpi b small{font-size:18px;color:var(--tx-3)}
.th-kpi span{color:var(--tx-2);font-size:14px}
.th-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0}
@media (min-width:900px){.th-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.th-card{padding:18px;border-radius:var(--r);background:var(--card-bg);border:1px solid var(--line-2);min-width:0}
.th-card h3{margin:0 0 2px;font:700 17px/1.3 var(--sans)}
.th-card>p.small{margin:0 0 12px}
.th-chart{width:100%;height:auto;display:block}
.th-axis{stroke:rgba(255,255,255,.2)}
.th-goal{stroke:rgba(125,211,160,.45);stroke-dasharray:4 4}
.th-ab{fill:rgba(217,178,106,.55);transform-box:fill-box;transform-origin:bottom;animation:mo-barup .6s var(--mo-out) both}
.th-hb{fill:rgba(240,138,128,.5);transform-box:fill-box;transform-origin:bottom;animation:mo-barup .6s var(--mo-out) both}
.th-hb.ok{fill:rgba(125,211,160,.6)}
@keyframes mo-barup{from{transform:scaleY(0)}to{transform:none}}
.th-al{fill:none;stroke:var(--okc);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;animation:mo-fadein .6s .3s both}
.th-ad{fill:var(--okc);stroke:#111;stroke-width:1.2}.th-ad.air{fill:#4dabf7}
@keyframes mo-fadein{from{opacity:0}}
.th-ax{fill:var(--tx-3);font:600 11px var(--sans)}
.th-hv{fill:var(--tx);font:700 12px var(--sans)}
.th-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px -4px 0}
.th-table{width:100%;min-width:720px;border-collapse:collapse;font-size:14px}
.th-table th,.th-table td{padding:10px 8px;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
.th-table thead th{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--tx-3)}
.th-table th[scope=row]{display:flex;flex-direction:column;gap:2px;font-weight:400}
.th-table small{display:block}
.th-stu{background:none;border:0;padding:0;color:var(--gold-hi);font:700 15px var(--sans);text-align:start;cursor:pointer;min-height:28px}
.th-stu:hover{text-decoration:underline}
.th-pct{font-variant-numeric:tabular-nums}.th-pct.ok{color:var(--okc)}.th-pct.mid{color:var(--gold-hi)}.th-pct.low{color:var(--badc)}
.th-tag{display:inline-flex;gap:5px;align-items:center;margin:0 6px 6px 0;padding:3px 9px;border-radius:999px;background:rgba(240,138,128,.1);color:var(--tx-2);font-size:12.5px}
.th-tag b{color:var(--badc)}
.th-bars{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.th-bars li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.th-bar-t{grid-column:1/-1;display:flex;flex-direction:column;gap:1px;min-width:0}
.th-bar-t b{font-weight:600;font-size:14.5px;line-height:1.35}
.th-bar{height:8px;border-radius:9px;background:rgba(255,255,255,.07);overflow:hidden}
.th-bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#f08a80,#f5c542);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--mo-out)}
[dir="rtl"] .th-bar i{transform-origin:right}
.th-bar-n{font-weight:700;font-variant-numeric:tabular-nums;color:var(--badc)}
.th-none{margin:6px 0}
.th-empty{text-align:center;padding:36px 20px;display:grid;justify-items:center;gap:8px}
.th-empty-ic svg{width:40px;height:40px;stroke:var(--gold);fill:none;stroke-width:1.6}
.th-empty p{max-width:52ch;margin:0}
.th-err{display:grid;gap:10px;justify-items:start}
#thBody{transition:opacity .2s}#thBody.th-dim{opacity:.55}

/* ---------- polish ---------- */
.cl .btn,.cl button,.cl a.cl-step-a{-webkit-tap-highlight-color:transparent}
.cl .btn:active{transform:scale(.98)}
.cl img{max-width:100%}
@media (hover:none){.cl-step-a:hover{transform:none}}

/* ---------- reduced motion: everything still, final values shown ---------- */
@media (prefers-reduced-motion:reduce){
  #app.screen-in,.mo-in,.pr-card.mo-flip,.pr-card.mo-had,.pr-card.mo-had .pr-n,.pr-card.mo-miss,.mo-tick,.mo-tick input,.pr-newbest,.cl-sheet .cl-fig *,.th-ab,.th-hb,.th-al,.cl-streak svg{animation:none!important}
  .skel::after,.skel-line::after,.skel-block::after{animation:none;opacity:0}
  .mo-ring-a,.cl-ring-a,.cl-goal-bar i,.th-bar i,.cl-net,.cl-toast,.cl-demo-pp{transition:none!important}
}
@media (max-width:680px){
  .th-filters{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .th-filters label{min-width:0}
  .th-filters select{min-width:0;width:100%}
  .th-filters .th-chk,.th-exp{grid-column:1/-1}
  .th-exp{margin:0}
  .th-exp .btn{flex:1 1 0;min-width:0;padding-inline:10px}
}
.th-filters select{max-width:100%}

/* PayPal subscribe box: keep the renewal note clear of the PayPal button iframe. */
.pp-box #ppSubBtns{margin-bottom:14px}
.pp-box #ppSubBtns + p.small{margin-top:0;position:relative;clear:both;line-height:1.45}

/* PayPal return/cancel states (preview) */
.pp-cancel-note{display:flex;gap:10px;align-items:flex-start;margin:4px 0 14px;padding:12px 14px;border-radius:12px;border:1px solid rgba(214,178,102,.45);background:rgba(214,178,102,.10);font-size:.92rem;line-height:1.45}
.pp-cancel-note svg{flex:none;width:18px;height:18px;margin-top:2px;opacity:.85}
.sub-success .kicker{margin:6px 0 0}
.sub-success .sub-ok-list{margin:14px auto 18px;text-align:left;max-width:30rem}
.sub-success .btn-ghost{margin-top:10px}
.sub-success .btn{display:inline-flex}
.sub-success .sub-ok-list{display:inline-flex;flex-direction:column;align-items:flex-start;margin:14px auto 18px;padding:0}
.sub-success .sub-line{display:block}

/* Stripe card form on #/subscribe (preview). Stripe draws the card fields in its own iframe; this only styles the frame around it. */
.st-box{margin-top:6px}
.st-h{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.st-h .brands{margin-left:auto}
.st-mount{min-height:120px;border-radius:14px;overflow:hidden;background:#fff}
.st-mount > p{color:#444;padding:14px}
.st-note{margin-top:10px;line-height:1.45}
.st-or{display:flex;align-items:center;gap:12px;margin:18px 0 12px;color:var(--tx-2,#aaa);font-size:.85rem}
.st-or::before,.st-or::after{content:"";flex:1;height:1px;background:var(--line,rgba(255,255,255,.14))}
.st-or span{flex:none}
.st-soon{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;padding:10px 12px;border-radius:12px;border:1px solid rgba(214,178,102,.45);background:rgba(214,178,102,.10);font-size:.9rem;line-height:1.45}
.st-soon svg{flex:none;width:18px;height:18px;margin-top:2px;opacity:.85}