/* Alfiya Academy · learning area. Same paper, ink and light as the site. */

.h-md{font:400 clamp(2rem,4.4vw,3.6rem)/1 var(--serif);letter-spacing:-.035em;margin-top:18px;text-wrap:balance}
.h-md em{color:var(--indigo)}
.ulink{border-bottom:1px solid var(--line-2);color:var(--ink);cursor:pointer;background:none;font:inherit;padding:0;transition:color .25s,border-color .25s}
button.ulink{border-width:0 0 1px}
.ulink:hover{color:var(--indigo);border-color:var(--indigo)}
.chip{padding:3px 9px;border-radius:999px;background:var(--paper-2);font:500 .6875rem/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}

/* forms shared with the site */
.auth{padding-bottom:clamp(80px,13vh,160px)}
.form__two{display:grid;grid-template-columns:1fr 1fr;gap:26px 22px}
.field small{display:block;margin-top:8px;font-size:.8125rem;color:var(--ink-2)}
.form__err{padding:12px 16px;background:rgba(215,38,30,.07);color:var(--red);font-size:.9375rem;font-weight:500}
.form__err[hidden]{display:none}
.ticks{list-style:none;margin:clamp(26px,4vh,40px) 0 0;padding:0;border-top:1px solid var(--line);max-width:420px}
.ticks li{position:relative;padding:15px 0 15px 30px;border-bottom:1px solid var(--line);font-size:1.0625rem}
.ticks li::before{content:"";position:absolute;left:4px;top:50%;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:var(--gold-lit);box-shadow:0 0 0 3px rgba(227,182,87,.22)}
.verdict{display:grid;gap:4px;padding:18px 20px;border-left:3px solid}
.verdict[hidden]{display:none}
.verdict b{font:400 1.5rem/1.1 var(--serif);letter-spacing:-.02em}
.verdict span{color:var(--ink-2)}
.verdict.is-good{border-color:var(--gold);background:rgba(227,182,87,.12)}
.verdict.is-bad{border-color:var(--red);background:rgba(215,38,30,.06)}


.demo{display:grid;gap:8px;padding:14px 16px;background:var(--paper-2);border-left:3px solid var(--gold)}
.demo__t{font:500 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:2px}
.demo__row{display:grid;grid-template-columns:4.5rem minmax(0,1fr) auto auto;gap:6px 12px;align-items:baseline;font-size:.875rem;overflow-wrap:anywhere}
.demo__row b{font-weight:600}
.demo__row code{font:500 .8125rem/1.3 ui-monospace,Consolas,monospace}
@media (max-width:480px){.demo__row{grid-template-columns:4.5rem minmax(0,1fr)}.demo__row code,.demo__row .ulink{grid-column:2}}

/* app chrome */
.apptop{
  position:sticky;top:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding:13px var(--gutter);background:rgba(251,249,244,.9);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line);
}
.apptop__logo img{height:32px;width:auto}
.apptop__nav{display:flex;gap:clamp(18px,2.4vw,34px);font-size:.9375rem;color:var(--ink-2)}
.apptop__nav a{position:relative;padding:6px 0;transition:color .25s}
.apptop__nav a:hover,.apptop__nav a[aria-current]{color:var(--ink)}
.apptop__nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink)}
.apptop__me{display:flex;align-items:center;justify-content:flex-end;gap:16px;min-width:0}
.apptop__name{font-size:.875rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app{max-width:1180px;margin-inline:auto;padding:clamp(32px,6vh,72px) var(--gutter) clamp(72px,12vh,140px);min-height:72vh;opacity:0;transition:opacity .5s ease}
.app.is-ready{opacity:1}
.appfoot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 24px;max-width:1180px;margin-inline:auto;padding:22px var(--gutter) 30px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--ink-2)}
.appfoot a{margin-left:22px}
.appfoot a:hover{color:var(--ink)}
.back{display:flex;width:max-content;align-items:center;gap:8px;margin-bottom:clamp(22px,4vh,36px);font-size:.9375rem;color:var(--ink-2);transition:color .25s,gap .4s var(--out)}
.back::before{content:"←"}
.back:hover{color:var(--ink);gap:12px}
.toast{position:fixed;left:50%;bottom:26px;z-index:80;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:13px 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:.9375rem;box-shadow:0 18px 40px -16px rgba(16,12,46,.6);animation:toastIn .4s var(--out)}
.toast[hidden]{display:none}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}}

/* my course */
.dash__top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,80px);align-items:end;margin-top:clamp(28px,5vh,48px);padding-bottom:clamp(28px,5vh,48px);border-bottom:1px solid var(--line)}
.dash__lit .lights__count output{font-size:clamp(3rem,7vw,5.6rem)}
.meter{height:6px;margin-top:18px;background:rgba(16,12,46,.09);overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-lit));transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--out) .2s}
.dash__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.dash__stats dt{font:500 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.dash__stats dd{margin:8px 0 0;font:400 1.5rem/1 var(--serif);letter-spacing:-.02em}
.sub summary{grid-template-columns:5.2rem minmax(0,1fr) auto 34px}
.dash__next{display:grid;justify-items:start;gap:6px;padding-left:clamp(20px,3vw,44px);border-left:1px solid var(--line)}
.next__k{font:500 .6875rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.next__t{font:400 clamp(1.5rem,2.6vw,2.1rem)/1.1 var(--serif);letter-spacing:-.025em}
.next__s{color:var(--ink-2);font-size:.9375rem}
.dash__next .btn{margin-top:16px}

.banner{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:clamp(22px,4vh,34px);padding:16px 20px;background:var(--paper-2);border-left:3px solid var(--gold)}
.banner[hidden]{display:none}
.banner b{font-weight:600}
.banner span{color:var(--ink-2)}
.banner .ulink{margin-left:auto;font-weight:500}
.banner.is-wait{border-color:var(--indigo)}
.banner.is-good{border-color:#1FAF54;background:rgba(31,175,84,.08)}

.subs{margin-top:clamp(28px,5vh,48px);border-top:1px solid var(--line)}
.sub{border-bottom:1px solid var(--line)}
.sub summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto 34px;align-items:center;gap:12px;padding:22px 0}
.sub summary::-webkit-details-marker{display:none}
.sub__n{font:500 .75rem/1 var(--sans);letter-spacing:.1em;color:var(--gold);white-space:nowrap}
.sub__name{font:400 clamp(1.5rem,2.6vw,2.2rem)/1.1 var(--serif);letter-spacing:-.025em;transition:color .3s}
.sub summary:hover .sub__name{color:var(--indigo)}
.sub__c{font-size:.875rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.sub summary i{
  width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);
  background:linear-gradient(var(--ink),var(--ink)) center/12px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 12px no-repeat;
  transition:transform .5s var(--out),background-color .3s;
}
.sub[open] summary i{transform:rotate(135deg);background-color:var(--white)}
.sub__rows{padding:0 0 22px 5.2rem;display:grid}
.lrow{display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line);transition:padding .4s var(--out),color .25s}
.lrow__dot{width:10px;height:10px;border-radius:50%;background:rgba(16,12,46,.13)}
.lrow__t{font-size:1.0625rem}
.lrow__s{font-size:.8125rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.lrow.is-done .lrow__dot{background:var(--gold-lit);box-shadow:0 0 0 1px rgba(180,132,42,.4),0 0 10px rgba(227,182,87,.6)}
.lrow.is-open .lrow__dot{background:var(--indigo);box-shadow:0 0 0 4px rgba(31,10,140,.12)}
.lrow.is-open .lrow__s{color:var(--indigo);font-weight:500}
.lrow.is-locked{color:var(--ink-3)}
.lrow.is-locked .lrow__s,.lrow.is-paywall .lrow__s{color:var(--ink-3)}
a.lrow:hover{padding-left:8px;color:var(--indigo)}

/* lesson */
.player{position:relative;aspect-ratio:16/9;margin-top:clamp(22px,4vh,36px);background:var(--ink);overflow:hidden}
.player iframe,.player #player{position:absolute;inset:0;width:100%;height:100%;border:0}
.player__none{position:absolute;inset:0;display:grid;place-items:center;padding:20px;color:#fff;text-align:center}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;border-bottom:1px solid var(--line)}
.steps li{display:flex;align-items:center;gap:12px;padding:18px 0;color:var(--ink-3);font-size:.9375rem}
.steps li+li{padding-left:20px;border-left:1px solid var(--line)}
.steps b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);font:500 .75rem/1 var(--sans)}
.steps li.is-on{color:var(--ink)}
.steps li.is-on b{background:var(--indigo);color:#fff;box-shadow:none}
.steps li.is-done{color:var(--ink)}
.steps li.is-done b{background:var(--gold-lit);color:var(--ink);box-shadow:none}
.steps li.is-skip{opacity:.45}
.lesson .link--plain{margin-top:22px}
.notes{margin-top:26px;max-width:68ch;color:var(--ink-2);white-space:pre-line}
.notes[hidden]{display:none}
.gate{display:grid;justify-items:start;gap:22px;margin-top:26px;font-size:1.125rem;color:var(--ink-2)}
.gate[hidden]{display:none}
.lquiz{max-width:760px;margin-top:clamp(40px,7vh,72px);padding-top:clamp(28px,5vh,44px);border-top:1px solid var(--line)}
.lquiz[hidden]{display:none}
.lquiz>*{animation:stepIn .5s var(--out)}
.lquiz .quiz__q{margin-top:16px}
.lquiz .tq__prog{margin-bottom:24px}
.marks{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.marks li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:14px 0 14px 26px;border-bottom:1px solid var(--line);position:relative}
.marks li::before{position:absolute;left:0;top:14px;font-weight:600}
.marks .is-right::before{content:"\2713";color:var(--gold)}
.marks .is-wrong::before{content:"\2715";color:var(--red)}
.marks b{font-weight:500;font-size:.9375rem;color:var(--ink-2);text-align:right}
.marks .is-wrong b{color:var(--red)}

/* payment */
.paygrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,6vw,96px);align-items:start;margin-top:clamp(28px,5vh,48px)}
.paysteps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.paysteps>li{display:grid;grid-template-columns:3rem minmax(0,1fr);padding:26px 0;border-bottom:1px solid var(--line)}
.paysteps>li>b{font:500 .75rem/2.2 var(--sans);letter-spacing:.1em;color:var(--gold)}
.paysteps h2{font:400 clamp(1.5rem,2.4vw,2rem)/1.1 var(--serif);letter-spacing:-.025em;margin-bottom:12px}
.upi{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:1.25rem;font-weight:500;overflow-wrap:anywhere}
.payapp{margin-top:16px;display:none}
.payqr{display:grid;justify-items:center;gap:14px;padding:26px;background:var(--white);box-shadow:0 0 0 1px var(--line),0 30px 50px -34px rgba(16,12,46,.4)}
.qrbox{width:100%;max-width:230px;line-height:0}
.qrbox svg,.qrbox img{width:100%;height:auto;display:block}
.paylist{margin-top:clamp(28px,5vh,48px)}
.payrow{display:grid;grid-template-columns:minmax(0,1.4fr) auto minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line);font-size:.9375rem;overflow-wrap:anywhere}
.payrow b{font-weight:500}
.payrow.is-approved b{color:#12803c}
.payrow.is-rejected b{color:var(--red)}
.payrow.is-pending b{color:var(--indigo)}

/* certificate */
.certpage__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.certpage__head .cta__act{margin-top:0}
.certpage .meter{max-width:520px}
.paper{
  position:relative;display:grid;justify-items:center;text-align:center;margin-top:clamp(28px,5vh,48px);
  padding:clamp(34px,6vw,76px) clamp(22px,5vw,80px) clamp(28px,4vw,52px);
  background:var(--white);outline:1px solid var(--gold);outline-offset:calc(clamp(10px,1.6vw,20px)*-1);
  box-shadow:0 0 0 1px var(--line),0 50px 80px -50px rgba(16,12,46,.45);
}
.paper__mark{height:clamp(64px,9vw,104px);width:auto}
.paper__k{margin-top:clamp(18px,3vw,30px);font:600 clamp(.625rem,1.2vw,.8125rem)/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2)}
.paper__s{margin-top:clamp(16px,2.6vw,28px);max-width:44ch;color:var(--ink-2);font-size:clamp(.8125rem,1.4vw,1rem)}
.paper__n{margin-top:10px;padding:0 clamp(16px,4vw,56px) 12px;border-bottom:1px solid var(--line-2);font:italic 400 clamp(1.8rem,5.4vw,4rem)/1.05 var(--serif);letter-spacing:-.02em;overflow-wrap:anywhere}
.paper__t{margin-top:10px;font:400 clamp(1.3rem,3vw,2.2rem)/1 var(--serif);color:var(--indigo);letter-spacing:-.02em}
.paper__foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:clamp(12px,3vw,40px);width:100%;margin-top:clamp(26px,4vw,52px)}
.paper__foot>div{display:grid;gap:6px;justify-items:center}
.paper__foot b{font-weight:500;font-size:clamp(.8125rem,1.4vw,1rem)}
.paper__foot span{font:500 .625rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.paper__qr .qrbox{width:clamp(64px,9vw,104px)}
.paper__sign img{width:clamp(80px,11vw,130px);height:auto;margin-bottom:4px}
.paper__sign{border-top:0}
.paper__no{margin-top:clamp(14px,2vw,22px);font-size:clamp(.75rem,1.2vw,.875rem);color:var(--ink-2)}
.paper__no b{font-weight:500;color:var(--ink)}
.paper__logo{height:clamp(20px,2.6vw,30px);width:auto;margin-top:clamp(20px,3vw,36px)}

@media (hover:none) and (pointer:coarse){.payapp{display:inline-flex}}

@media (max-width:899px){
  .form__two{grid-template-columns:1fr}
  .apptop{grid-template-columns:1fr auto;padding-block:11px}
  .apptop__logo img{height:28px}
  .apptop__nav{grid-column:1/-1;grid-row:2;gap:22px;padding-top:4px;overflow-x:auto}
  .apptop__name{display:none}
  .dash__top,.paygrid{grid-template-columns:minmax(0,1fr)}
  .dash__next{padding:24px 0 0;border-left:0;border-top:1px solid var(--line)}
  .dash__next .btn{width:100%}
  .sub summary{grid-template-columns:4.4rem minmax(0,1fr) auto 30px;padding:18px 0}
  .sub summary i{width:30px;height:30px}
  .sub__rows{padding-left:0}
  .lrow{grid-template-columns:18px minmax(0,1fr) auto;row-gap:4px}
  .lrow .chip{grid-column:2;justify-self:start}
  .lrow__t{font-size:1rem}
  .steps li{flex-direction:column;align-items:flex-start;gap:8px;padding:14px 0;font-size:.875rem}
  .steps li+li{padding-left:14px}
  .payqr{order:-1;justify-self:center;width:min(100%,280px)}
  .payrow{grid-template-columns:1fr auto}
  .marks li{grid-template-columns:1fr}
  .marks b{text-align:left}
  .paper__foot{grid-template-columns:1fr 1fr}
  .paper__qr{grid-column:1/-1;grid-row:1}

  .appfoot a{margin:0 22px 0 0}
}

@media print{
  @page{size:A4 landscape;margin:10mm}
  html,body{background:#fff !important}
  .apptop,.appfoot,.back,.certpage__head,.toast{display:none !important}
  .app{opacity:1 !important;padding:0;max-width:none;min-height:0}
  .paper{margin:0;box-shadow:none;outline-offset:-5mm;padding:16mm 18mm 12mm;height:calc(100vh - 1mm);align-content:center;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

@media (max-width:560px){.certpage__head .btn{flex:1 1 100%}}

/* ── sign in: number → code → who is learning ── */
.signin{min-width:0}
.signin__step[hidden]{display:none}
.signin .demo{margin-bottom:4px}
.field--phone .tel,.field--phone .tel *{margin:0;font:inherit;letter-spacing:0;text-transform:none;color:inherit}
.field--phone .tel{display:flex;align-items:stretch;gap:12px}
.field--phone .tel__cc{display:flex;align-items:center;flex:0 0 auto;width:4.4rem;border-bottom:1px solid var(--line-2);font:400 1.125rem/1.3 var(--sans);color:var(--ink-2);transition:border-color .3s}
.field--phone .tel__cc:focus-within{border-color:var(--indigo)}
.field--phone .tel__cc b{font-weight:400;padding-right:2px}
.field--phone .tel__cc input{border:0;padding-left:0;width:100%;min-width:0;color:var(--ink)}
.field--phone .tel>input{flex:1;min-width:0}
.signin__hint{margin:-10px 0 0;font-size:.875rem;color:var(--ink-2)}
.signin__lead{font:400 1.125rem/1.45 var(--sans);color:var(--ink);margin:0}
.signin__lead b{font-weight:600}
.signin__links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:.875rem;color:var(--ink-2)}
.signin__links [data-resend-in]{margin-left:-14px}
.signin__links .ulink:disabled{opacity:.45;cursor:default;text-decoration:none}
.signin__preview{margin:0;padding:12px 14px;border-radius:12px;background:var(--paper-2);border-left:3px solid var(--gold);font-size:.875rem;color:var(--ink-2)}
.signin__preview b{font:600 1rem/1 ui-monospace,Consolas,monospace;letter-spacing:.18em;color:var(--ink)}
.otp{display:flex;gap:clamp(6px,1.6vw,10px)}
.otp__box{all:unset;box-sizing:border-box;width:clamp(40px,11vw,52px);height:clamp(50px,13vw,60px);border-radius:14px;background:var(--white);
  box-shadow:inset 0 0 0 1px var(--line-2);text-align:center;font:600 1.5rem/1 var(--sans);color:var(--ink);transition:box-shadow .2s}
.otp__box:focus{box-shadow:inset 0 0 0 2px var(--indigo)}
.signin__pick{display:grid;gap:12px}
.signin__pickhead{display:grid;gap:4px;margin-bottom:6px}
.signin__pickhead .signin__lead{font:400 clamp(1.5rem,2.4vw,1.85rem)/1.15 var(--serif);letter-spacing:-.02em}
.signin__num{margin:0;font-size:.875rem;color:var(--ink-2)}
.signin__pick .signin__links{margin-top:10px}
.signin__people{display:grid;gap:10px}
.person{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;gap:16px;width:100%;padding:16px 18px;border-radius:20px;background:var(--white);cursor:pointer;
  box-shadow:0 0 0 1px var(--line),0 1px 0 rgba(16,12,46,.03),0 18px 34px -28px rgba(16,12,46,.5);transition:box-shadow .25s,transform .25s var(--out)}
.person:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--line-2),0 22px 38px -26px rgba(16,12,46,.55)}
.person:focus-visible{box-shadow:0 0 0 2px var(--indigo),0 22px 38px -26px rgba(16,12,46,.55)}
.person:active{transform:scale(.99)}
.person:disabled{opacity:.6}
.person__ava{position:relative;display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;border-radius:50%;overflow:hidden;background:linear-gradient(150deg,#3a24c4,var(--indigo));
  color:#fff;font:600 1rem/1 var(--sans);letter-spacing:.04em;box-shadow:0 0 0 3px var(--white),0 0 0 4px var(--line)}
.person__ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.person__t{display:grid;gap:6px;flex:1;min-width:0}
.person__n{font:500 1.125rem/1.25 var(--sans);color:var(--ink);overflow-wrap:anywhere}
.person__t small{display:flex;align-items:center;gap:10px;font-size:.8125rem;color:var(--ink-2)}
.person__bar{flex:0 0 56px;height:5px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.person__bar i{display:block;height:100%;min-width:4px;border-radius:inherit;background:var(--gold-lit,#E3B657)}
.person__go{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--paper-2);font-style:normal;font-size:1.25rem;line-height:1;color:var(--ink-2);transition:background .25s,color .25s,transform .3s var(--out)}
.person:hover .person__go{background:var(--indigo);color:#fff;transform:translateX(2px)}
.person--add{background:transparent;box-shadow:none;border:1.5px dashed var(--line-2);padding:14px 18px}
.person--add:hover{transform:none;border-color:var(--indigo);box-shadow:none;background:var(--white)}
.person--add .person__ava{background:var(--paper-2);color:var(--indigo);font-size:1.5rem;font-weight:400;box-shadow:none}
.person--add .person__t b{font:500 1rem/1.25 var(--sans);color:var(--ink)}
.person--add .person__t small{display:block}
.nowrap{white-space:nowrap}
@media (max-width:440px){
  .person{gap:12px;padding:14px}
  .person__ava{flex-basis:46px;width:46px;height:46px;font-size:.9rem}
  .person__bar{flex-basis:34px}
  .person__t small{font-size:.75rem;gap:8px;white-space:nowrap}
}