/* Alfiya Academy · student app: tabs, home, lessons, lesson, profile */

.app{max-width:1240px}
.card{background:var(--white);border-radius:18px;box-shadow:0 0 0 1px var(--line),0 24px 40px -36px rgba(16,12,46,.35)}

/* top bar + tabs */
.apptop__nav a{display:inline-flex;align-items:center;height:40px;padding:0 4px}
.apptop__me{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0;color:var(--ink-2);transition:color .25s}
.apptop__me:hover{color:var(--ink)}
.avatar{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--indigo);color:#fff;font:600 .8125rem/1 var(--sans);letter-spacing:.04em}
.avatar--lg{width:68px;height:68px;font-size:1.25rem}
.tabbar{display:none}

/* home */
.home__date{font:500 .75rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.home__head .h-md{margin-top:12px}
.home__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px;margin-top:clamp(22px,4vh,34px)}
.ring{display:flex;align-items:center;gap:22px;padding:24px}
.ring__dial{position:relative;flex:none;width:132px;height:132px}
.ring__svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring__svg circle{fill:none;stroke:rgba(16,12,46,.08);stroke-width:8}
.ring__svg .ring__fill{stroke:var(--gold-lit);stroke-linecap:round;transition:stroke-dashoffset 1.4s var(--out) .15s}
.ring__txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ring__txt b{font:400 2.6rem/1 var(--serif);letter-spacing:-.04em;font-variant-numeric:lining-nums}
.ring__txt span{font-size:1rem;color:var(--ink-2);margin-left:2px;align-self:flex-start;margin-top:calc(50% - 20px)}
.ring__k{font:500 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.ring__v{margin-top:10px;font:400 1.35rem/1.2 var(--serif);letter-spacing:-.02em}
.cont{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);overflow:hidden}
.cont__pic{position:relative;display:block;background:var(--paper-2);min-height:100%}
.cont__pic img{width:100%;height:100%;object-fit:cover;display:block}
.cont__play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(16,12,46,.78);transition:transform .4s var(--out),background .3s}
.cont__play::after{content:"";position:absolute;left:21px;top:17px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff}
.cont__pic:hover .cont__play{transform:scale(1.08);background:var(--indigo)}
.cont__body{display:grid;align-content:center;justify-items:start;gap:6px;padding:24px 26px}
.cont__body .btn{margin-top:14px;height:50px;padding:0 24px;font-size:1rem}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0 0}
.stat{padding:16px 18px;border-radius:14px;background:var(--paper-2)}
.stat dt{font:500 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.stat dd{margin:10px 0 0;font:400 1.6rem/1 var(--serif);letter-spacing:-.03em}
.block{margin-top:clamp(28px,5vh,44px)}
.block__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.block__head h2{font:400 clamp(1.35rem,2.2vw,1.75rem)/1.15 var(--serif);letter-spacing:-.025em}
.block__head .ulink{flex:none;font-size:.9375rem}

/* lesson rows */
.list{display:grid;gap:10px}
.lrow{display:grid;grid-template-columns:132px minmax(0,1fr) auto;align-items:center;gap:16px;padding:10px 14px 10px 10px;border:0;border-radius:14px;background:var(--white);box-shadow:0 0 0 1px var(--line);transition:box-shadow .25s,transform .35s var(--out)}
a.lrow:hover{padding-left:10px;transform:translateY(-1px);box-shadow:0 0 0 1px var(--line-2),0 16px 26px -22px rgba(16,12,46,.45);color:inherit}
.lrow.is-current{box-shadow:0 0 0 2px var(--indigo)}
.lrow__pic{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--paper-2)}
.lrow__pic img{width:100%;height:100%;object-fit:cover;display:block}
.lrow__badge{position:absolute;right:6px;bottom:6px;width:22px;height:22px;border-radius:50%;display:none;background-position:center;background-repeat:no-repeat;background-size:14px}
.lrow.is-done .lrow__badge{display:block;background-color:var(--gold-lit);background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22%3E%3Cpath d=%22M5 10.5l3.2 3.2L15 6.8%22 fill=%22none%22 stroke=%22%23100C2E%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E")}
.lrow.is-locked .lrow__badge,.lrow.is-paywall .lrow__badge{display:block;background-color:rgba(16,12,46,.72);background-size:13px;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22%3E%3Crect x=%225%22 y=%229%22 width=%2210%22 height=%227.5%22 rx=%221.5%22 fill=%22white%22/%3E%3Cpath d=%22M7 9V7a3 3 0 0 1 6 0v2%22 fill=%22none%22 stroke=%22white%22 stroke-width=%221.6%22/%3E%3C/svg%3E")}
.lrow.is-locked .lrow__pic img,.lrow.is-paywall .lrow__pic img{filter:grayscale(.55) brightness(.92)}
.lrow__body{display:grid;gap:4px;min-width:0}
.lrow__n{font:500 .6875rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.lrow__t{font:400 1.0625rem/1.3 var(--serif);letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.lrow.is-locked .lrow__t{color:var(--ink-2)}
.lrow__s{display:flex;align-items:center;gap:8px}
.pill{padding:6px 12px;border-radius:999px;font:500 .75rem/1 var(--sans);white-space:nowrap;background:var(--paper-2);color:var(--ink-2)}
.pill--open{background:var(--indigo);color:#fff}
.pill--done{background:rgba(227,182,87,.25);color:#6b4a00}
.pill--paywall{background:#fdf0cf;color:#6b4a00}
.pill--soon{background:transparent;color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line)}
.lrow.is-soon{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.lrow.is-soon .lrow__pic img{opacity:.55;filter:grayscale(.3)}
.lrow.is-soon .lrow__t{color:var(--ink-2)}

/* lessons page */
.page__head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 20px}
.page__head .h-md{margin:0}
.filters{position:sticky;top:64px;z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:18px 0 4px;padding:10px 0;background:var(--paper)}
.seg{display:inline-flex;padding:4px;border-radius:999px;background:var(--paper-2)}
.seg button{all:unset;box-sizing:border-box;cursor:pointer;padding:9px 18px;border-radius:999px;font:500 .875rem/1 var(--sans);color:var(--ink-2);transition:background .3s,color .3s}
.seg button[aria-pressed="true"]{background:var(--white);color:var(--ink);box-shadow:0 1px 2px rgba(16,12,46,.12)}
.seg button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.search{flex:1 1 220px;max-width:360px;margin-left:auto}
.search input{all:unset;box-sizing:border-box;width:100%;height:42px;padding:0 16px 0 40px;border-radius:999px;background-color:var(--white);background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22%3E%3Ccircle cx=%229%22 cy=%229%22 r=%225.5%22 fill=%22none%22 stroke=%22%238C899E%22 stroke-width=%221.6%22/%3E%3Cpath d=%22m13.2 13.2 3.3 3.3%22 stroke=%22%238C899E%22 stroke-width=%221.6%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");background-position:14px center;background-size:18px;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px var(--line-2);font:400 .9375rem/1 var(--sans);color:var(--ink)}
.search input:focus{box-shadow:inset 0 0 0 1.5px var(--indigo)}
.series{margin-top:clamp(26px,4vh,40px)}
.series__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
.series__n{font:500 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.series__head h2{margin-top:8px;font:400 clamp(1.35rem,2.4vw,1.9rem)/1.1 var(--serif);letter-spacing:-.025em}
.series__prog{display:grid;justify-items:end;gap:6px;font-size:.8125rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.series__prog i{display:block;width:96px;height:5px;border-radius:3px;background:rgba(16,12,46,.09);overflow:hidden}
.series__prog b{display:block;height:100%;background:var(--gold-lit)}
.empty{padding:40px 0;color:var(--ink-2);text-align:center}

/* lesson page */
.lesson__grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(22px,3vw,40px);align-items:start}
.lesson__grid[hidden]{display:none}
.lesson .player{margin-top:0;border-radius:16px}
.lesson__sub{margin-top:22px}
.lesson__t{margin-top:12px}
.upnext{position:sticky;top:84px;max-height:calc(100vh - 110px);overflow:auto;padding:2px 4px 2px 2px}
.upnext h2{font:400 1.2rem/1.2 var(--serif);letter-spacing:-.02em;margin-bottom:12px}
.list--tight .lrow{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:8px}
.list--tight .lrow__s{grid-column:2;justify-self:start}
.list--tight .lrow__t{font-size:.9375rem}
.lnav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:clamp(32px,6vh,56px)}
.lnav__a{display:grid;gap:6px;padding:16px 18px;border-radius:14px;background:var(--white);box-shadow:0 0 0 1px var(--line);transition:box-shadow .25s}
.lnav__a small{font:500 .6875rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.lnav__a b{font:400 1rem/1.3 var(--serif)}
.lnav__a--next{text-align:right}
a.lnav__a:hover{box-shadow:0 0 0 1px var(--indigo)}
.lnav__a.is-off{opacity:.55}
.gate .h-md{margin:0}

/* profile */
.profile{max-width:760px}
.profile__head{display:flex;align-items:center;gap:18px}
.profile__head .h-md{margin:0;font-size:clamp(1.6rem,3.6vw,2.4rem);overflow-wrap:anywhere}
.access{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;padding:18px 20px;border-left:4px solid var(--gold)}
.access div{display:grid;gap:4px}
.access b{font-weight:600}
.access span{color:var(--ink-2);font-size:.9375rem}
.access.is-good{border-left-color:#1FAF54}
.access.is-wait{border-left-color:var(--indigo)}
.access .btn{flex:none}
.card.form{padding:22px 24px;gap:22px}
.card[data-payments]{padding:6px 20px}
.card[data-payments] .payrow{grid-template-columns:minmax(0,1fr) auto;padding:14px 0}
.card[data-payments] .payrow:first-child{border-top:0}
.card[data-payments] .payrow span{display:grid;gap:3px}
.card[data-payments] small{font-size:.8125rem;color:var(--ink-2)}
.payrow__r{text-align:right;justify-items:end}
[data-payments] .fine{margin:12px 0}
.menu-list{display:grid;padding:4px 0;overflow:hidden}
.menu-list a,.menu-list button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;font-size:1rem;transition:background .2s}
.menu-list>*+*{border-top:1px solid var(--line)}
.menu-list a:hover,.menu-list button:hover{background:var(--paper)}
.menu-list i{font-style:normal;font-size:1.3rem;color:var(--ink-3)}
.menu-list .is-danger{color:var(--red)}
.menu-list :focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

/* ── phones and small tablets: a real app ── */
@media (max-width:899px){
  .apptop{grid-template-columns:1fr auto;padding-block:10px}
  .apptop__nav{display:none}
  .avatar{width:34px;height:34px;font-size:.75rem}
  .app{padding:20px 16px calc(96px + env(safe-area-inset-bottom));min-height:calc(100vh - 60px)}
  .appfoot{display:none}
  .tabbar{
    position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(4,1fr);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    background:rgba(251,249,244,.94);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);
    border-top:1px solid var(--line);
  }
  .tabbar a{display:grid;justify-items:center;gap:4px;padding:7px 0 6px;border-radius:12px;font:500 .6875rem/1 var(--sans);color:var(--ink-3);-webkit-tap-highlight-color:transparent;transition:color .2s}
  .tabbar svg{width:24px;height:24px}
  .tabbar a[aria-current]{color:var(--indigo)}
  .tabbar a[aria-current] svg{stroke-width:2}
  .tabbar a:active{background:rgba(16,12,46,.05)}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}

  .home__grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .ring{padding:18px;gap:18px}
  .ring__dial{width:104px;height:104px}
  .ring__txt b{font-size:2.1rem}
  .cont{grid-template-columns:minmax(0,1fr)}
  .cont__pic{aspect-ratio:16/9}
  .cont__body{padding:18px 20px 20px}
  .cont__body .btn{width:100%}
  .stats{gap:8px;margin-top:12px}
  .stat{padding:14px 12px}
  .stat dd{font-size:1.3rem}
  .block{margin-top:28px}
  .lrow{grid-template-columns:104px minmax(0,1fr);gap:12px;padding:8px}
  .lrow__s{grid-column:2;justify-self:start}
  .lrow__t{font-size:.9375rem}
  .filters{top:56px;margin-inline:-16px;padding:10px 16px}
  .search{flex-basis:100%;max-width:none;margin:0}
  .series__prog i{width:64px}

  .lesson__grid{grid-template-columns:minmax(0,1fr)}
  .lesson .back{margin-bottom:14px}
  .lesson .player{margin-inline:-16px;border-radius:0}
  .upnext{position:static;max-height:none;overflow:visible;margin-top:8px}
  .lnav__a{padding:14px}

  .profile__head{gap:14px}
  .avatar--lg{width:56px;height:56px;font-size:1rem}
  .access{flex-direction:column;align-items:stretch}
  .access .btn{width:100%}
  .card.form{padding:18px}
}
@media (max-width:380px){
  .stats{grid-template-columns:1fr 1fr}
  .stats .stat:last-child{grid-column:1/-1}
  .lrow{grid-template-columns:88px minmax(0,1fr)}
}
@media print{.tabbar{display:none !important}}

/* ═══════════════ crisp extras ═══════════════ */
.home__top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.streak{display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 10px;border-radius:999px;background:#fff1d6;color:#8a5a00;font:600 .8125rem/1 var(--sans)}
.streak[hidden]{display:none}
.streak svg{width:16px;height:16px;color:#e8892b}

.stats--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stat dd{font-variant-numeric:lining-nums}

.home__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:18px}
.week{padding:20px 22px;display:grid;gap:16px;align-content:start}
.week header{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.week h2{font:400 1.35rem/1.1 var(--serif);letter-spacing:-.02em}
.week__days{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.week__days li{display:grid;justify-items:center;gap:8px;font:500 .75rem/1 var(--sans);color:var(--ink-3)}
.week__days i{display:block;width:100%;max-width:40px;aspect-ratio:1;border-radius:12px;background:var(--paper-2);transition:background .4s}
.week__days li.is-on i{background:var(--gold-lit);box-shadow:inset 0 0 0 1px rgba(180,132,42,.35)}
.week__days li.is-today span{color:var(--indigo);font-weight:600}
.week__days li.is-today i{box-shadow:inset 0 0 0 2px var(--indigo)}
.week__days li.is-today.is-on i{box-shadow:inset 0 0 0 2px var(--indigo);background:var(--gold-lit)}
.week__note{font-size:.9375rem;color:var(--ink-2)}

/* certificate previews (home + profile) */
.certmini,.certlink{display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;color:inherit;transition:box-shadow .3s,transform .4s var(--out)}
.certmini:hover,.certlink:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line-2),0 30px 46px -34px rgba(16,12,46,.5)}
.certmini__paper{position:relative;height:170px;overflow:hidden;background:var(--paper-2)}
.certmini__paper .paper{position:absolute;left:50%;top:16px;width:760px;margin:0;transform:translateX(-50%) scale(.38);transform-origin:top center;pointer-events:none}
.certmini__txt{padding:14px 20px 18px;border-top:1px solid var(--line)}
.certmini__t{margin-top:6px;font:400 1.15rem/1.2 var(--serif);letter-spacing:-.015em}
.certlink{margin-top:clamp(28px,5vh,44px)}

.paper--preview{position:relative;overflow:hidden}
.paper--preview .paper__n{color:var(--ink)}
.paper__wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-18deg);font:600 clamp(3rem,10vw,7.5rem)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(31,10,140,.06);white-space:nowrap;pointer-events:none;z-index:2}
.qrbox--ghost{aspect-ratio:1;background:repeating-linear-gradient(45deg,rgba(16,12,46,.08) 0 4px,transparent 4px 8px);border-radius:4px}
.certprog{display:grid;gap:10px;min-width:min(100%,300px)}
.certprog p{display:flex;align-items:baseline;gap:8px}
.certprog b{font:400 2.2rem/1 var(--serif);letter-spacing:-.03em}
.certprog p span{color:var(--ink-2)}
.certprog .meter{margin:0}
.certprog .btn{justify-self:start}
.certpage .lead{margin-top:12px}

/* profile stats + achievements */
.stats--profile{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:18px}
.stats--profile dd{font-size:1.35rem}
.badges{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.badge{display:grid;justify-items:center;text-align:center;gap:6px;padding:18px 10px 16px;border-radius:16px;background:var(--white);box-shadow:0 0 0 1px var(--line)}
.badge__ico{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--paper-2);color:var(--ink-3)}
.badge__ico svg{width:24px;height:24px}
.badge b{font-weight:600;font-size:.875rem}
.badge small{font-size:.75rem;color:var(--ink-3);line-height:1.3}
.badge.is-on .badge__ico{background:linear-gradient(140deg,#f6d27a,#E3B657 55%,#c99632);color:var(--ink);box-shadow:0 8px 18px -10px rgba(180,132,42,.9)}
.badge.is-on small{color:#8a5a00;font-weight:500}
.badge:not(.is-on){opacity:.8}

/* lessons + lesson page */
.note-soon{margin:14px 0 0;padding:12px 16px;border-radius:12px;background:var(--paper-2);font-size:.9375rem;color:var(--ink-2)}
.pill--open{position:relative}
.qhist{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.qhist span{padding:6px 12px;border-radius:999px;background:var(--paper-2);font:500 .8125rem/1 var(--sans);color:var(--ink-2)}
.lquiz{position:relative}
.lquiz>.btn--ghost{margin-top:12px}

/* pass celebration */
.burst{position:absolute;left:50%;top:40px;width:0;height:0;pointer-events:none;z-index:5}
.burst i{position:absolute;width:8px;height:12px;border-radius:2px;opacity:0;animation:burst 1.5s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes burst{0%{opacity:1;transform:translate(0,0) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 260px)) rotate(var(--r))}}

@media (max-width:1100px){
  .stats--profile{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:899px){
  .stats--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home__row{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:12px}
  .week{padding:18px}
  .certmini__paper{height:150px}
  .certmini__paper .paper{transform:translateX(-50%) scale(.34)}
  .stats--profile{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats--profile .stat:last-child{grid-column:1/-1}
  .badges{grid-template-columns:repeat(2,minmax(0,1fr))}
  .certprog .btn{justify-self:stretch}
}

/* ═══════════════ app features ═══════════════ */

/* page to page: a soft cross-fade where the browser supports it */
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:ease}
.tabbar{view-transition-name:tabbar}
.apptop{view-transition-name:apptop}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none}}

/* loading: a quiet skeleton instead of an empty page */
.app{position:relative;opacity:1}
.app:not(.is-ready)>*{visibility:hidden}
.app:not(.is-ready)::before{
  content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:clamp(32px,6vh,72px);height:420px;border-radius:18px;
  background:
    linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%) 0 0/200% 100% no-repeat,
    linear-gradient(var(--paper-2),var(--paper-2)) 0 0/180px 12px no-repeat,
    linear-gradient(var(--paper-2),var(--paper-2)) 0 30px/min(420px,70%) 36px no-repeat,
    linear-gradient(var(--paper-2),var(--paper-2)) 0 100px/100% 150px no-repeat,
    linear-gradient(var(--paper-2),var(--paper-2)) 0 270px/100% 64px no-repeat,
    linear-gradient(var(--paper-2),var(--paper-2)) 0 346px/100% 64px no-repeat;
  animation:shimmer 1.3s linear infinite;
}
.app.is-ready>*{animation:appIn .45s var(--out) both}
@keyframes shimmer{from{background-position:150% 0,0 0,0 30px,0 100px,0 270px,0 346px}to{background-position:-50% 0,0 0,0 30px,0 100px,0 270px,0 346px}}
@keyframes appIn{from{opacity:0;transform:translateY(6px)}}
@media (max-width:899px){.app:not(.is-ready)::before{left:16px;right:16px;top:20px}}
@media (prefers-reduced-motion:reduce){.app:not(.is-ready)::before{animation:none}.app.is-ready>*{animation:none}}

/* series colours */
.series{--accent:var(--gold)}
.series__n{color:var(--accent)}
.series__prog b{background:var(--accent)}
.series__head{position:relative;padding-left:16px}
.series__head::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:4px;border-radius:2px;background:var(--accent)}
.lrow__n{display:flex;align-items:center;gap:8px}
.lrow__star{width:12px;height:12px;flex:none;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M6.5 3.5h11a1 1 0 0 1 1 1v16l-6.5-4-6.5 4v-16a1 1 0 0 1 1-1z%22/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M6.5 3.5h11a1 1 0 0 1 1 1v16l-6.5-4-6.5 4v-16a1 1 0 0 1 1-1z%22/%3E%3C/svg%3E") center/contain no-repeat}

/* announcement */
.broadcast{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:13px 14px 13px 18px;border-radius:14px;background:var(--indigo);color:#fff;animation:appIn .5s var(--out)}
.broadcast[hidden]{display:none}
.broadcast p{flex:1;min-width:0;font-size:.9375rem;line-height:1.4}
.broadcast__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--gold-lit);box-shadow:0 0 0 4px rgba(227,182,87,.25)}
.broadcast .ulink{flex:none;color:#fff;border-color:rgba(255,255,255,.5);font-weight:500}
.broadcast__x{all:unset;cursor:pointer;flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-size:1.3rem;line-height:1;color:rgba(255,255,255,.8)}
.broadcast__x:hover{background:rgba(255,255,255,.12);color:#fff}

/* leaderboard */
.board{padding:6px 20px}
.board>.fine{margin:14px 0}
.board>.btn{margin:0 0 16px}
.board__row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 0;font-size:.9375rem}
.board__row+.board__row{border-top:1px solid var(--line)}
.board__n{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--paper-2);font:600 .75rem/1 var(--sans)}
.board__row:nth-child(1) .board__n{background:var(--gold-lit);color:var(--ink)}
.board__row.is-me{font-weight:600}
.board__row.is-me .board__n{box-shadow:0 0 0 2px var(--indigo)}
.board__v{color:var(--ink-2);font-size:.8125rem;font-variant-numeric:tabular-nums}

/* lesson: save + notes */
.lesson__bar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.lesson__bar .lesson__t{min-width:0}
.savebtn{all:unset;box-sizing:border-box;cursor:pointer;flex:none;display:inline-flex;align-items:center;gap:8px;height:42px;margin-top:12px;padding:0 16px 0 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);font:500 .875rem/1 var(--sans);color:var(--ink-2);transition:box-shadow .25s,color .25s,background .25s}
.savebtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;transition:fill .25s}
.savebtn:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.savebtn[aria-pressed="true"]{color:var(--ink);background:rgba(227,182,87,.18);box-shadow:inset 0 0 0 1px rgba(180,132,42,.5)}
.savebtn[aria-pressed="true"] svg{fill:var(--gold-lit);stroke:var(--gold)}
.savebtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mynote{max-width:760px;margin-top:clamp(36px,6vh,56px)}
.mynote header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.mynote h2{font:400 1.35rem/1.1 var(--serif);letter-spacing:-.02em}
.mynote .fine{margin:0;font-size:.8125rem}
.mynote textarea{display:block;box-sizing:border-box;width:100%;min-height:120px;padding:16px 18px;border:0;border-radius:14px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line-2);font:400 1rem/1.55 var(--sans);color:var(--ink);resize:vertical;transition:box-shadow .25s}
.mynote textarea::placeholder{color:var(--ink-3)}
.mynote textarea:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--indigo)}

/* profile: notes, toggles, install hint */
.notes-list{display:grid;gap:10px}
.notecard{display:grid;gap:6px;padding:16px 18px 16px 20px;position:relative;color:inherit;transition:box-shadow .25s}
.notecard::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 2px 2px 0;background:var(--accent,var(--gold))}
.notecard:hover{box-shadow:0 0 0 1px var(--line-2),0 18px 30px -26px rgba(16,12,46,.5)}
.notecard__k{font:500 .6875rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.notecard b{font:400 1.05rem/1.25 var(--serif)}
.notecard p{font-size:.9375rem;color:var(--ink-2);white-space:pre-line;overflow-wrap:anywhere}
.notecard small{font-size:.75rem;color:var(--ink-3)}
.toggles{display:grid;padding:4px 0}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;cursor:pointer;position:relative}
.toggle+.toggle{border-top:1px solid var(--line)}
.toggle span{display:grid;gap:3px}
.toggle b{font-weight:500}
.toggle small{font-size:.8125rem;color:var(--ink-2)}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle i{flex:none;position:relative;width:46px;height:28px;border-radius:999px;background:rgba(16,12,46,.16);transition:background .3s}
.toggle i::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,12,46,.3);transition:transform .35s var(--out)}
.toggle input:checked+i{background:var(--indigo)}
.toggle input:checked+i::after{transform:translateX(18px)}
.toggle input:focus-visible+i{outline:2px solid var(--gold);outline-offset:2px}
.install-hint{margin:10px 4px 0}
.install-hint[hidden],[data-install][hidden]{display:none}

/* certificates per series */
.seriescerts__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.seriescert{display:grid;gap:6px;padding:18px 20px;position:relative;overflow:hidden;color:inherit;transition:transform .35s var(--out),box-shadow .25s}
.seriescert::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--accent)}
.seriescert:hover{transform:translateY(-2px);box-shadow:0 0 0 1px var(--line-2),0 22px 34px -26px rgba(16,12,46,.5)}
.seriescert__n{font:500 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.seriescert b{font:400 1.15rem/1.2 var(--serif)}
.seriescert small{font-size:.8125rem;color:var(--ink-2)}
.seriescerts>.fine{margin-top:0}
.paper--series{outline-color:var(--accent)}
.paper--series .paper__t{color:var(--ink)}
.paper__foot--two{grid-template-columns:1fr 1fr}

/* parent / teacher view */
.snap{max-width:640px}
.snap__body{display:grid;gap:12px;margin-top:clamp(22px,4vh,34px)}
.snap__top{padding:22px 24px}
.snap__top p{display:flex;align-items:baseline;gap:10px}
.snap__top b{font:400 2.6rem/1 var(--serif);letter-spacing:-.04em}
.snap__top span{color:var(--ink-2)}
.snap__cert{margin-top:14px;font-size:.9375rem}
.snap__series{padding:8px 22px}
.snap__row{display:grid;grid-template-columns:minmax(0,1fr) 90px 44px;align-items:center;gap:12px;padding:11px 0;font-size:.9375rem}
.snap__row+.snap__row{border-top:1px solid var(--line)}
.snap__row i{display:block;height:5px;border-radius:3px;background:rgba(16,12,46,.09);overflow:hidden}
.snap__row b{display:block;height:100%;background:var(--accent)}
.snap__row small{text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums}

@media (max-width:899px){
  .lesson__bar{flex-direction:column;gap:0}
  .savebtn{margin-top:14px}
  .toggle{padding:15px 18px}
  .snap__row{grid-template-columns:minmax(0,1fr) 60px 40px}
}

/* ═══════════════ night mode (student app only, off by default) ═══════════════ */
[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0E0C1D;--paper-2:#1B1830;--white:#16132A;
  --ink:#EEEBF8;--ink-2:#B3AFC9;--ink-3:#837F9C;
  --indigo:#6C57F5;--indigo-deep:#5541E0;
  --gold:#D8A848;--red:#FF5A4F;
  --line:rgba(238,235,248,.1);--line-2:rgba(238,235,248,.2);
}
[data-theme="dark"] body{background:var(--paper);color:var(--ink)}
[data-theme="dark"] .apptop{background:rgba(14,12,29,.88)}
[data-theme="dark"] .tabbar{background:rgba(14,12,29,.92)}
[data-theme="dark"] .apptop__logo img{filter:brightness(0) invert(.94)}
[data-theme="dark"] .h-md em,[data-theme="dark"] .tabbar a[aria-current],[data-theme="dark"] .quiz__opts button:hover{color:#A898FF}
[data-theme="dark"] .card,[data-theme="dark"] .lrow,[data-theme="dark"] .badge{box-shadow:0 0 0 1px var(--line)}
[data-theme="dark"] .ring__svg circle,[data-theme="dark"] .meter,[data-theme="dark"] .series__prog i,[data-theme="dark"] .snap__row i,[data-theme="dark"] .tq__prog i{background:rgba(238,235,248,.1);stroke:rgba(238,235,248,.1)}
[data-theme="dark"] .ring__svg .ring__fill{stroke:var(--gold-lit)}
[data-theme="dark"] .streak{background:rgba(232,137,43,.16);color:#F3B46B}
[data-theme="dark"] .pill--done{background:rgba(227,182,87,.18);color:var(--gold-lit)}
[data-theme="dark"] .pill--paywall{background:rgba(227,182,87,.14);color:var(--gold-lit)}
[data-theme="dark"] .badge.is-on small{color:var(--gold-lit)}
[data-theme="dark"] .toast{background:#EEEBF8;color:#100C2E}
[data-theme="dark"] .toggle i{background:rgba(238,235,248,.2)}
[data-theme="dark"] .app:not(.is-ready)::before{background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%),linear-gradient(var(--paper-2),var(--paper-2)),linear-gradient(var(--paper-2),var(--paper-2)),linear-gradient(var(--paper-2),var(--paper-2)),linear-gradient(var(--paper-2),var(--paper-2)),linear-gradient(var(--paper-2),var(--paper-2))}
[data-theme="dark"] .lrow.is-locked .lrow__pic img,[data-theme="dark"] .lrow.is-paywall .lrow__pic img{filter:grayscale(.55) brightness(.7)}
[data-theme="dark"] dialog{background:var(--paper)}
/* certificates stay on paper, even at night */
[data-theme="dark"] .paper,[data-theme="dark"] .certmini__paper{
  --paper:#FBF9F4;--paper-2:#F4F0E7;--white:#fff;--ink:#100C2E;--ink-2:#4F4C66;--ink-3:#8C899E;--indigo:#1F0A8C;--gold:#B4842A;
  --line:rgba(16,12,46,.12);--line-2:rgba(16,12,46,.2);color:var(--ink)
}
[data-theme="dark"] .certmini__paper{background:#F4F0E7}
@media print{[data-theme="dark"]{--paper:#fff;--white:#fff;--ink:#100C2E;--ink-2:#4F4C66}}