/* ADLTIX Academy — the 21-day challenge app, in the ADLTIX design system:
   white paper, orange #EF5E1E, neon #D5FF2A as an accent (never a text
   colour on white), near-black ink, pill buttons, soft long shadows.
   The learner's identity is the Creator Card. Motion uses transform and
   opacity only and calms down under prefers-reduced-motion.            */

:root{
  --bg:#FFFFFF; --bg-2:#F7F7F5; --bg-3:#F0F0EE;
  --text:#0A0A0A; --text-2:#5C5F66; --text-3:#8A8D94;
  --rule:#E4E4E1; --rule-2:#CFCFCB;
  --orange:#EF5E1E; --orange-lift:#FF7A3D; --orange-deep:#C9430C;
  --neon:#D5FF2A; --neon-deep:#A8CC12; --neon-text:#5E7A00;
  --ink:#0A0A0A; --ink-2:#17171A; --ink-3:#24242A;
  --o-04:rgba(239,94,30,.04); --o-08:rgba(239,94,30,.08); --o-16:rgba(239,94,30,.16); --o-32:rgba(239,94,30,.32);
  --n-14:rgba(213,255,42,.14); --n-28:rgba(213,255,42,.28);
  --gold:#F2B21B; --red:#E2453C; --blue:#2F6BEF;
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:24px; --r-xl:34px;
  --lift-sm:0 10px 26px -18px rgba(5,5,5,.4);
  --lift:0 24px 60px -34px rgba(5,5,5,.34);
  --plate:0 34px 90px -46px rgba(10,10,10,.42);
  --glow-o:0 10px 26px -12px rgba(239,94,30,.82),0 2px 6px -2px rgba(201,67,12,.46);
  --ease:cubic-bezier(.22,.68,.28,1); --ease-out:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.32,.5,1);
  --f-d:"Inter Tight",Inter,system-ui,sans-serif;
  --f-b:Inter,"Inter Tight",system-ui,sans-serif;
  --f-n:"Inter Tight",Inter,system-ui,sans-serif;
}
html[lang=ar]{
  --f-d:"Noto Kufi Arabic","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-b:"IBM Plex Sans Arabic","Noto Kufi Arabic",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--f-b);font-size:16px;line-height:1.6;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
html[lang=ar] body{line-height:1.8;letter-spacing:0}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(900px 520px at 88% -10%,rgba(239,94,30,.10),transparent 60%),radial-gradient(700px 480px at -5% 0%,rgba(213,255,42,.16),transparent 60%),
  radial-gradient(rgba(10,10,10,.045) 1px,transparent 1.2px) 0 0/22px 22px}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:not-allowed}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
h1,h2,h3{font-family:var(--f-d);margin:0;letter-spacing:-.03em;line-height:1.08;font-weight:700}
html[lang=ar] h1,html[lang=ar] h2,html[lang=ar] h3{letter-spacing:0;line-height:1.4}
p{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:2.5px solid var(--orange);outline-offset:3px;border-radius:10px}
.ic{flex:none}
html[dir=rtl] .ic-arrow,html[dir=rtl] .ic-back{transform:scaleX(-1)}
.row{display:flex;align-items:center;flex-wrap:wrap}.gap{gap:10px}.center{justify-content:center}
.u-mt{margin-top:16px}
#app{position:relative;min-height:100vh}
.view{min-height:100vh}
.view.leaving{position:absolute;inset:0 0 auto 0;pointer-events:none;z-index:0}
.meta{font-size:.84rem;color:var(--text-3)}

/* ── type ── */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-d);font-size:.8rem;font-weight:600;color:var(--orange);letter-spacing:.01em}
.eyebrow.pill{padding:7px 14px;border-radius:100px;background:var(--o-08);border:1px solid var(--o-16)}
.eyebrow.pill.dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}
.eyebrow.pill.neon{background:var(--neon);border-color:var(--neon-deep);color:var(--ink)}
.live{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(239,94,30,.5);animation:livePulse 2s infinite}
.dark .live,.neon .live{background:var(--neon)}
@keyframes livePulse{70%{box-shadow:0 0 0 8px rgba(239,94,30,0)}100%{box-shadow:0 0 0 0 rgba(239,94,30,0)}}
.card-eye{display:block;font-family:var(--f-d);font-size:.8rem;font-weight:600;color:var(--text-3);margin-bottom:14px;letter-spacing:.01em}

/* ── buttons: the site's pills ── */
.b{--bg:var(--bg);--fg:var(--text);display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 24px;border-radius:100px;
  border:1px solid transparent;background:var(--bg);color:var(--fg);font-family:var(--f-d);font-weight:600;font-size:.96rem;line-height:1.15;white-space:nowrap;
  position:relative;overflow:hidden;isolation:isolate;transition:transform .22s var(--spring),box-shadow .36s var(--ease),background-color .3s,border-color .3s,color .3s}
.b:hover{transform:translateY(-1px)}
.b:active{transform:translateY(1px) scale(.98);transition-duration:.08s}
.b:disabled{opacity:.42;transform:none!important;box-shadow:none!important}
.b-primary{--fg:#fff;background:linear-gradient(180deg,var(--orange-lift),var(--orange) 55%);
  box-shadow:0 1px 0 rgba(255,255,255,.26) inset,0 -1px 0 rgba(0,0,0,.14) inset,var(--glow-o)}
.b-primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.26) inset,0 -1px 0 rgba(0,0,0,.14) inset,0 16px 34px -12px rgba(239,94,30,.9),0 2px 6px -2px rgba(201,67,12,.46)}
.b-primary::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-120%)}
.b-primary:not(:disabled):hover::before{animation:sheen .9s var(--ease-out)}
@keyframes sheen{to{transform:translateX(120%)}}
.b-ink{--fg:#fff;background:var(--ink);box-shadow:0 12px 26px -14px rgba(0,0,0,.6)}
.b-ink:hover{background:#1d1d22}
.b-ghost{background:#fff;border-color:var(--rule-2)}
.b-ghost:hover{border-color:var(--text);box-shadow:var(--lift-sm)}
.b-paper{--fg:var(--orange-deep);background:#fff;box-shadow:0 12px 26px -16px rgba(0,0,0,.45)}
.b-text{background:transparent;padding-inline:12px;color:var(--text-2)}
.b-text:hover{color:var(--text)}
.b-text.danger{color:var(--red)}
.b-rec{--fg:#fff;background:var(--red);box-shadow:0 12px 26px -14px rgba(226,69,60,.8)}
.b-rec.on{background:var(--ink);animation:recPulse 1.2s infinite}
@keyframes recPulse{50%{box-shadow:0 0 0 7px rgba(226,69,60,.22)}}
.b-sm{padding:9px 16px;font-size:.86rem;gap:7px}
.b-lg{padding:15px 28px;font-size:1.02rem}
.b-xl{padding:18px 36px;font-size:1.1rem}
.b-wide{width:100%}
.icon-btn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--rule);background:var(--bg);
  transition:transform .22s var(--spring),border-color .3s,box-shadow .3s}
.icon-btn:hover{border-color:var(--text);box-shadow:var(--lift-sm)}
.icon-btn:disabled{opacity:.4}
.pill-btn{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 15px;border-radius:100px;border:1px solid var(--rule);background:var(--bg);font-weight:600;font-size:.88rem;transition:.3s}
.pill-btn:hover{border-color:var(--text)}
.pill-btn.lang span{font-family:"IBM Plex Sans Arabic",Inter,sans-serif}

/* ── fields ── */
.field{width:100%;padding:14px 18px;border:1px solid var(--rule);border-radius:14px;background:var(--bg-2);font-size:1rem;transition:border-color .25s,box-shadow .25s,background .25s}
.field:hover{border-color:var(--rule-2)}
.field:focus{outline:0;border-color:var(--orange);background:#fff;box-shadow:0 0 0 4px var(--o-16)}
.field.big{font-size:1.2rem;padding:17px 20px;font-weight:600;font-family:var(--f-d)}
.lab{display:grid;gap:8px;font-weight:600;font-size:.9rem;color:var(--text-2)}
.field-ic{display:flex;align-items:center;gap:10px;margin-top:14px;padding-inline-start:16px;border:1px solid var(--rule);border-radius:14px;background:var(--bg-2);color:var(--text-3)}
.field-ic .field{border:0;background:none;padding-inline-start:0;box-shadow:none}
.field-ic:focus-within{border-color:var(--orange);box-shadow:0 0 0 4px var(--o-16)}
.check{display:flex;gap:12px;align-items:flex-start;margin-top:16px;font-size:.92rem;color:var(--text-2);cursor:pointer}
.check input{position:absolute;opacity:0}
.check .box{flex:none;display:grid;place-items:center;width:22px;height:22px;border:1.5px solid var(--rule-2);border-radius:7px;background:#fff;color:transparent;transition:.2s}
.check input:checked + .box{background:var(--orange);border-color:var(--orange);color:#fff}
.check input:focus-visible + .box{outline:2.5px solid var(--orange);outline-offset:2px}

/* ── top bars ── */
.obar,.abar,.qbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;padding:12px clamp(14px,2.4vw,32px);
  background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid rgba(10,10,10,.06)}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand img{width:88px;height:auto}
.brand-sub{display:grid;line-height:1.2;padding-inline-start:12px;border-inline-start:1px solid var(--rule)}
.brand-sub b{font-family:var(--f-d);font-size:.96rem;font-weight:700}
.brand-sub small{font-size:.74rem;color:var(--text-3)}
.obar-mid{flex:1;display:flex;align-items:center;justify-content:center;gap:14px}
.obar-end,.abar-end{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.steps-bar{display:flex;gap:6px;width:min(300px,40vw)}
.steps-bar i{flex:1;height:6px;border-radius:9px;background:var(--bg-3);position:relative;overflow:hidden}
.steps-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--orange-lift),var(--orange));transform:scaleX(0);transform-origin:var(--o,left);transition:transform .8s var(--ease-out)}
html[dir=rtl] .steps-bar i::after{--o:right}
.steps-bar i.full::after{transform:none}
.steps-bar i.now::after{transform:scaleX(.5)}
.steps-n{font-family:var(--f-n);font-size:.8rem;font-weight:600;color:var(--text-3);white-space:nowrap}
.tabs{position:relative;display:flex;margin-inline:auto;padding:4px;border-radius:100px;background:var(--bg-2);border:1px solid var(--rule)}
.tab{position:relative;z-index:1;display:flex;align-items:center;gap:8px;padding:9px 20px;border-radius:100px;font-family:var(--f-d);font-weight:600;font-size:.92rem;color:var(--text-2);transition:color .35s}
.tab:hover{color:var(--text)}
.tab.on{color:#fff}
.tab-ink{position:absolute;z-index:0;top:4px;bottom:4px;left:0;border-radius:100px;background:linear-gradient(180deg,var(--orange-lift),var(--orange));
  box-shadow:var(--glow-o);opacity:0;transition:transform .55s var(--spring),width .55s var(--spring)}
.tab-ink.ready{opacity:1}
.xp-pill{display:flex;align-items:center;gap:8px;padding:4px;padding-inline-start:10px;border:1px solid var(--rule);border-radius:100px;background:#fff;position:relative;overflow:hidden;transition:box-shadow .3s}
.xp-pill:hover{box-shadow:var(--lift-sm)}
.xp-coin{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(180deg,var(--orange-lift),var(--orange));color:#fff}
.xp-coin .ic{width:15px;height:15px}
.xp-n{direction:ltr;unicode-bidi:isolate;font-family:var(--f-n);font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums}
.xp-pill small{font-size:.7rem;font-weight:600;color:var(--text-3);margin-inline-end:2px}
.xp-bar{position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:3px;background:var(--bg-3)}
.xp-bar::after{content:"";position:absolute;inset:0;width:var(--p);background:var(--orange);border-radius:3px}
html[dir=rtl] .xp-bar::after{right:0;left:auto}

/* ── surfaces ── */
.card{background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);padding:22px;box-shadow:var(--lift-sm)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:100px;border:1px solid var(--rule);background:#fff;font-weight:600;font-size:.9rem;color:var(--text-2);
  transition:transform .22s var(--spring),background .25s,color .25s,border-color .25s}
button.chip:hover{border-color:var(--text);color:var(--text)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chips.sm .chip{padding:5px 12px;font-size:.8rem}
.chips.sm .chip.on{background:var(--o-08);border-color:var(--o-16);color:var(--orange-deep)}

/* ── face (photo or initials) and the coach mark ── */
.face{--s:44px;position:relative;display:inline-grid;place-items:center;flex:none;width:var(--s);height:var(--s);border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.28),transparent 55%),var(--fc,var(--orange));color:#fff}
.face img{width:100%;height:100%;object-fit:cover}
.face b{font-family:var(--f-d);font-weight:700;font-size:calc(var(--s) * .38);line-height:1;letter-spacing:-.02em}
.cmark{--s:44px;display:inline-grid;place-items:center;flex:none;width:var(--s);height:var(--s);border-radius:30%;background:var(--ink);box-shadow:0 10px 22px -12px rgba(0,0,0,.6)}
.cmark svg{width:68%;height:68%}
.cmark path{stroke-dasharray:44;stroke-dashoffset:44;animation:cmDraw .9s .2s var(--ease-out) forwards}
@keyframes cmDraw{to{stroke-dashoffset:0}}

/* ═════════════ THE CREATOR CARD ═════════════ */
.cc{--w:300px;--hx:50%;--hy:30%;width:var(--w);aspect-ratio:5/7;font-size:calc(var(--w) / 300 * 16px);perspective:1100px;flex:none;position:relative}
.cc-sm{--w:230px}.cc-xs{--w:150px}.cc-md{--w:260px}.cc-lg{--w:min(330px,78vw)}
.cc-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s var(--ease-out)}
.cc.tilting .cc-in{transition:transform .12s linear}
.cc.flip .cc-in{transform:rotateY(180deg)}
.cc-face{position:absolute;inset:0;border-radius:1.4em;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;padding:1.1em;
  --c1:#fff;--c2:#FBFBFA;--fg:var(--text);--fg2:var(--text-2);--acc:var(--orange);--line:rgba(10,10,10,.08);--tile:rgba(10,10,10,.035);
  background:linear-gradient(160deg,var(--c1),var(--c2));color:var(--fg);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 0 0 1px var(--line) inset,0 30px 60px -30px rgba(10,10,10,.5),0 8px 18px -12px rgba(10,10,10,.3)}
.cc-front::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 60% at 100% 0%,var(--o-16),transparent 55%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 48 48'%3E%3Cpath d='M12 25.5 L20.5 34 L37 14' fill='none' stroke='%23EF5E1E' stroke-opacity='.07' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") calc(100% + 3em) calc(100% + 2.2em)/14em no-repeat}
.cc-back{transform:rotateY(180deg);align-items:center;justify-content:center;gap:.8em;background:radial-gradient(circle at 50% 30%,#2a2a30,#0A0A0A 70%);color:rgba(255,255,255,.6);font-family:var(--f-d);font-size:.8em;font-weight:600}
.cc-back::before{content:"";position:absolute;inset:.7em;border:1px solid rgba(255,255,255,.12);border-radius:1em;
  background:repeating-linear-gradient(45deg,rgba(239,94,30,.07) 0 2px,transparent 2px 12px)}
.cc-back img{position:relative;width:52%;height:auto}
.cc-back span{position:relative}
.cc-top{position:relative;flex:none;display:flex;align-items:center;justify-content:space-between;gap:.5em}
.cc-top img{width:4.6em;height:auto}
.cc-tier{white-space:nowrap;padding:.3em .7em;border-radius:100px;background:var(--acc);color:#fff;font-family:var(--f-d);font-size:.66em;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
html[lang=ar] .cc-tier{letter-spacing:0;font-size:.7em}
.cc-photo{position:relative;flex:none;width:6.6em;height:6.6em;margin:1.1em auto .8em}
.cc-photo .face{--s:100%;width:100%;height:100%;box-shadow:0 0 0 .22em var(--c1),0 0 0 .4em var(--acc),0 18px 30px -14px rgba(0,0,0,.45)}
.cc-photo .face b{font-size:2.4em}
.cc-ring{position:absolute;inset:-.55em;border-radius:50%;border:1px dashed color-mix(in srgb,var(--acc) 45%,transparent);animation:spin 26s linear infinite}
.cc-photo::after{content:"";position:absolute;inset-inline-end:.15em;bottom:.25em;width:1.5em;height:1.5em;border-radius:50%;
  background:var(--neon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230A0A0A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/62% no-repeat;
  box-shadow:0 0 0 .18em var(--c1)}
.cc-name{position:relative;text-align:center;font-family:var(--f-d);font-weight:700;font-size:1.42em;line-height:1.15;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[lang=ar] .cc-name{letter-spacing:0;line-height:1.4}
.cc-role{position:relative;display:flex;align-items:center;justify-content:center;gap:.5em;margin-top:.25em;font-size:.78em;font-weight:600;color:var(--fg2);white-space:nowrap}
.cc-role i{width:.3em;height:.3em;border-radius:50%;background:var(--acc)}
.cc-ph{font-style:normal;opacity:.45}
.cc-stats{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:.4em;margin-top:auto}
.cc-stats div{display:grid;justify-items:center;padding:.55em .2em;border-radius:.8em;background:var(--tile)}
.cc-stats b{direction:ltr;unicode-bidi:isolate;font-family:var(--f-n);font-weight:700;font-size:1.06em;line-height:1.2;font-variant-numeric:tabular-nums}
.cc-stats small{font-size:.62em;font-weight:600;color:var(--fg2)}
.cc-foot{position:relative;display:flex;justify-content:space-between;margin-top:.75em;padding-top:.6em;border-top:1px solid var(--line);font-family:var(--f-n);font-size:.6em;font-weight:600;letter-spacing:.06em;color:var(--fg2);text-transform:uppercase}
html[lang=ar] .cc-foot{letter-spacing:0;font-size:.64em}
.cc-holo,.cc-glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.cc-holo{display:none}
.cc-glare{background:radial-gradient(circle at var(--hx) var(--hy),rgba(255,255,255,.55),rgba(255,255,255,0) 45%);mix-blend-mode:soft-light;opacity:0;transition:opacity .4s}
.cc.tilting .cc-glare{opacity:1}
.cc.shine .cc-front .cc-glare{animation:shineSweep 1.4s var(--ease-out)}
@keyframes shineSweep{0%{opacity:1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%) -150% 0/200% 100% no-repeat}
  100%{opacity:1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%) 250% 0/200% 100% no-repeat}}
[data-f].flash{animation:flash .7s var(--ease-out)}
@keyframes flash{0%{color:var(--acc);transform:scale(1.08)}100%{transform:none}}
/* themes */
.cc-sunset .cc-front{--c1:#FF7A3D;--c2:#C9430C;--fg:#fff;--fg2:rgba(255,255,255,.78);--acc:#0A0A0A;--line:rgba(255,255,255,.22);--tile:rgba(255,255,255,.14)}
.cc-sunset .cc-front::before{background:radial-gradient(90% 60% at 100% 0%,rgba(255,255,255,.28),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(213,255,42,.22),transparent 60%)}
.cc-sunset .cc-photo::after{box-shadow:0 0 0 .18em #E05418}
.cc-midnight .cc-front{--c1:#1A1A1F;--c2:#0A0A0A;--fg:#fff;--fg2:rgba(255,255,255,.62);--acc:var(--orange);--line:rgba(255,255,255,.1);--tile:rgba(255,255,255,.06)}
.cc-midnight .cc-front::before{background:radial-gradient(100% 60% at 100% 0%,rgba(239,94,30,.42),transparent 55%),radial-gradient(80% 50% at 0% 100%,rgba(213,255,42,.16),transparent 60%)}
.cc-neon .cc-front{--c1:#E4FF6B;--c2:#B9E01F;--fg:#0A0A0A;--fg2:rgba(10,10,10,.62);--acc:#0A0A0A;--line:rgba(10,10,10,.12);--tile:rgba(10,10,10,.06)}
.cc-neon .cc-front::before{background:radial-gradient(100% 60% at 100% 0%,rgba(255,255,255,.55),transparent 55%)}
.cc-neon .cc-photo::after{background-color:#fff}
.cc-holo .cc-front{--c1:#16161C;--c2:#0B0B10;--fg:#fff;--fg2:rgba(255,255,255,.66);--acc:#FF7A3D;--line:rgba(255,255,255,.14);--tile:rgba(255,255,255,.07)}
.cc-holo .cc-holo{display:block;mix-blend-mode:color-dodge;opacity:.55;
  background:conic-gradient(from calc(var(--hx) * 3.6deg) at var(--hx) var(--hy),#ff7a3d,#d5ff2a,#58e0ff,#b46bff,#ff5fa2,#ff7a3d);animation:holo 6s linear infinite}
@keyframes holo{50%{filter:hue-rotate(60deg)}}
.cc-gold .cc-front{--c1:#FFF4C9;--c2:#D9A93A;--fg:#2A1E05;--fg2:rgba(42,30,5,.66);--acc:#8A5A00;--line:rgba(80,50,0,.18);--tile:rgba(255,255,255,.32)}
.cc-gold .cc-holo{display:block;mix-blend-mode:overlay;opacity:.8;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.75) 40%,transparent 48%,rgba(255,255,255,.4) 60%,transparent 70%) var(--hx) 0/250% 100%}
/* idle float for cards that are just shown */
.float{animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}

/* small theme swatches (onboarding + studio) */
.th i,.st-sw{display:block;border-radius:10px;box-shadow:0 0 0 1px rgba(10,10,10,.08) inset}
.th-classic i,.th-classic .st-sw{background:linear-gradient(160deg,#fff,#F5F5F3);box-shadow:0 0 0 1px var(--rule) inset}
.th-sunset i,.th-sunset .st-sw{background:linear-gradient(160deg,#FF7A3D,#C9430C)}
.th-midnight i,.th-midnight .st-sw{background:radial-gradient(100% 70% at 100% 0%,rgba(239,94,30,.6),transparent 60%),#0A0A0A}
.th-neon i,.th-neon .st-sw{background:linear-gradient(160deg,#E4FF6B,#B9E01F)}
.th-holo i,.th-holo .st-sw{background:conic-gradient(from 90deg,#ff7a3d,#d5ff2a,#58e0ff,#b46bff,#ff5fa2,#ff7a3d)}
.th-gold i,.th-gold .st-sw{background:linear-gradient(135deg,#FFF4C9,#D9A93A 50%,#FFF1BF 62%,#B98A1E)}

/* ═════════════ WELCOME ═════════════ */
.wl{position:relative;min-height:calc(100vh - 68px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:30px;
  padding:clamp(24px,4vw,60px) clamp(18px,5vw,80px);overflow:hidden;max-width:1500px;margin:0 auto}
.wl-glow,.stage-glow{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wl-glow i{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none}
.wl-glow i:first-child{width:520px;height:520px;inset-inline-end:2%;top:8%;background:rgba(239,94,30,.22);animation:blob 14s ease-in-out infinite}
.wl-glow i:last-child{width:380px;height:380px;inset-inline-end:26%;bottom:-6%;background:rgba(213,255,42,.35);animation:blob 18s ease-in-out infinite reverse}
@keyframes blob{50%{transform:translate(40px,-30px) scale(1.12)}}
.wl-copy{position:relative;z-index:2}
.wl-h{font-size:clamp(2.6rem,5.8vw,5.3rem);line-height:1;letter-spacing:-.045em;margin:20px 0 22px;font-weight:700}
html[lang=ar] .wl-h{line-height:1.3;font-size:clamp(2.3rem,5vw,4.5rem)}
.wl-h span{display:block}
.wl-h .hl{background:linear-gradient(90deg,var(--orange-deep),var(--orange) 40%,var(--orange-lift));-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content;padding-bottom:.06em}
.wl-p{font-size:clamp(1.02rem,1.25vw,1.16rem);color:var(--text-2);max-width:52ch;margin-bottom:30px}
.wl-stats{display:flex;flex-wrap:wrap;gap:28px;margin-top:40px;padding-top:24px;border-top:1px solid var(--rule)}
.wst{display:grid}
.wst b{font-family:var(--f-n);font-size:1.8rem;font-weight:700;line-height:1.1;letter-spacing:-.03em}
.wst span{font-size:.86rem;color:var(--text-3)}
.wl-copy > *{animation:rise .9s var(--ease-out) both}
.wl-copy > *:nth-child(2){animation-delay:.08s}.wl-copy > *:nth-child(3){animation-delay:.16s}.wl-copy > *:nth-child(4){animation-delay:.24s}.wl-copy > *:nth-child(5){animation-delay:.32s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.wl-fan{position:relative;height:min(600px,70vh);display:grid;place-items:center}
.fan-c{position:absolute;left:50%;top:50%;transition:translate .7s var(--ease-out);animation:fanIn 1.1s calc(var(--i) * .09s + .25s) var(--spring) both}
.fan-c > .cc{animation:float 7s calc(var(--i) * -1.3s) ease-in-out infinite}
.fan-c:nth-child(1){transform:translate(-50%,-50%) translate(-62%,8%) rotate(-16deg)}
.fan-c:nth-child(2){transform:translate(-50%,-50%) translate(62%,8%) rotate(16deg)}
.fan-c:nth-child(3){transform:translate(-50%,-50%) translate(-32%,0) rotate(-8deg)}
.fan-c:nth-child(4){transform:translate(-50%,-50%) translate(32%,0) rotate(8deg)}
.fan-c:nth-child(5){transform:translate(-50%,-50%) translateY(-4%);z-index:3}
.fan-c:nth-child(5) .cc{--w:280px}
@keyframes fanIn{from{opacity:0;translate:0 140px;scale:.7}}

/* ═════════════ ONBOARDING / GATE (shared split) ═════════════ */
.ob,.auth{max-width:1240px;width:calc(100% - 28px);margin:clamp(12px,2.4vw,28px) auto 48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  background:#fff;border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--plate);overflow:hidden;min-height:640px}
.ob-stage,.auth-art{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:42px 24px;background:var(--ink);color:#fff}
.stage-glow i{position:absolute;border-radius:50%;filter:blur(50px);pointer-events:none}
.stage-glow i:first-child{width:380px;height:380px;top:-60px;inset-inline-end:-80px;background:rgba(239,94,30,.55);animation:blob 12s ease-in-out infinite}
.stage-glow i:last-child{width:300px;height:300px;bottom:-80px;inset-inline-start:-60px;background:rgba(213,255,42,.28);animation:blob 15s ease-in-out infinite reverse}
.ob-stage::after,.auth-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px) 0 0/20px 20px;
  -webkit-mask:radial-gradient(circle at 50% 50%,#000,transparent 75%);mask:radial-gradient(circle at 50% 50%,#000,transparent 75%)}
.say{position:relative;z-index:2;display:flex;align-items:center;gap:12px;max-width:min(380px,92%);padding:8px 18px 8px 8px;border-radius:100px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html[dir=rtl] .say{padding:8px 8px 8px 18px}
.say p{font-family:var(--f-d);font-weight:600;font-size:.98rem;line-height:1.35}
.ob-card{position:relative;z-index:2}
.ob-card .cc{animation:float 6s ease-in-out infinite}
.ob-hint{position:relative;z-index:2;max-width:32ch;text-align:center;font-size:.86rem;color:rgba(255,255,255,.55)}
.ob-form,.auth-form{display:flex;flex-direction:column;padding:clamp(26px,3.6vw,50px)}
.ob-step{flex:1}
.ob-step > *{animation:rise .6s var(--ease-out) both}
.ob-step > *:nth-child(2){animation-delay:.05s}.ob-step > *:nth-child(3){animation-delay:.1s}.ob-step > *:nth-child(4){animation-delay:.15s}
.ob-step > *:nth-child(5){animation-delay:.2s}.ob-step > *:nth-child(6){animation-delay:.25s}.ob-step > *:nth-child(7){animation-delay:.3s}.ob-step > *:nth-child(n+8){animation-delay:.35s}
.fq{display:flex;align-items:center;gap:14px;margin-bottom:18px;font-family:var(--f-d);font-weight:700;font-size:clamp(1.3rem,2vw,1.6rem);letter-spacing:-.02em}
html[lang=ar] .fq{letter-spacing:0}
.qn{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(180deg,var(--orange-lift),var(--orange));color:#fff;
  font-family:var(--f-n);font-size:1rem;box-shadow:var(--glow-o)}
.fq2{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:24px 0 12px;font-family:var(--f-d);font-weight:600;font-size:1rem}
.fq2.sp{margin-top:30px}
.opt-tag{font-family:var(--f-b);font-size:.76rem;font-weight:600;color:var(--text-3);padding:3px 10px;border-radius:100px;background:var(--bg-2)}
.age-n{font-family:var(--f-n);font-size:2.1rem;line-height:1;font-weight:700;color:var(--orange);font-variant-numeric:tabular-nums}
.range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:9px;background:linear-gradient(90deg,var(--orange) var(--p),var(--bg-3) var(--p));cursor:pointer}
html[dir=rtl] .range{background:linear-gradient(270deg,var(--orange) var(--p),var(--bg-3) var(--p))}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--orange);box-shadow:0 6px 14px -6px rgba(239,94,30,.8);transition:transform .15s}
.range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--orange)}
.range:active::-webkit-slider-thumb{transform:scale(1.15)}
.range-wrap{padding:6px 0}
.range-lb{display:flex;justify-content:space-between;font-family:var(--f-n);font-size:.78rem;color:var(--text-3);margin-top:6px}
.photo-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.drop{flex:1;min-width:240px;display:flex;align-items:center;gap:14px;padding:12px 16px 12px 12px;border:1.5px dashed var(--rule-2);border-radius:18px;background:var(--bg-2);cursor:pointer;transition:.25s}
html[dir=rtl] .drop{padding:12px 12px 12px 16px}
.drop:hover,.drop.over{border-color:var(--orange);background:var(--o-04)}
.drop.has{border-style:solid;border-color:var(--rule)}
.drop.busy{opacity:.6;pointer-events:none}
.drop-face .face{box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--o-32)}
.drop-t{display:grid}
.drop-t b{font-family:var(--f-d);font-weight:600}
.drop-t small{font-size:.8rem;color:var(--text-3)}
.themes{display:flex;gap:10px;flex-wrap:wrap}
.th{display:grid;justify-items:center;gap:6px;padding:8px;border:1px solid var(--rule);border-radius:16px;background:#fff;font-size:.8rem;font-weight:600;color:var(--text-2);transition:.25s var(--spring)}
.th i{width:64px;height:44px}
.th:hover{transform:translateY(-2px);border-color:var(--rule-2)}
.th.on{border-color:var(--orange);box-shadow:0 0 0 3px var(--o-16);color:var(--text)}
.opts{display:grid;gap:10px}
.opts-1{grid-template-columns:1fr}
.opts-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.opt{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--rule);border-radius:18px;background:#fff;text-align:start;
  transition:transform .25s var(--spring),border-color .25s,box-shadow .25s,background .25s}
.opt:hover{transform:translateY(-2px);border-color:var(--rule-2);box-shadow:var(--lift-sm)}
.opt-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--bg-2);color:var(--text-2);transition:.25s}
.opt-t{display:grid;line-height:1.35}
.opt-t b{font-family:var(--f-d);font-weight:600;font-size:1rem}
.opt-t small{font-size:.84rem;color:var(--text-3)}
.opt-ok{position:absolute;top:12px;inset-inline-end:12px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--orange);color:#fff;transform:scale(0);transition:transform .35s var(--spring)}
.opt.on,.nopt.on{border-color:var(--orange);background:linear-gradient(180deg,#fff,var(--o-04));box-shadow:0 0 0 3px var(--o-16)}
.opt.on .opt-ic{background:var(--orange);color:#fff}
.opt.on .opt-ok,.nopt.on .opt-ok{transform:none}
.opts-niche{grid-template-columns:repeat(5,minmax(0,1fr))}
.nopt{position:relative;display:grid;justify-items:center;gap:10px;padding:20px 6px 16px;border:1px solid var(--rule);border-radius:18px;background:#fff;color:var(--text-2);
  font-family:var(--f-d);font-size:.88rem;text-align:center;transition:transform .25s var(--spring),border-color .25s,box-shadow .25s}
.nopt:hover{transform:translateY(-3px);border-color:var(--rule-2);box-shadow:var(--lift-sm);color:var(--text)}
.nopt .ic{width:28px;height:28px}
.nopt.on{color:var(--orange-deep)}
.nopt b{font-weight:600;line-height:1.25}
.nopt .opt-ok{top:8px;inset-inline-end:8px;width:18px;height:18px}
.ob-nav,.qnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:32px}

/* the gate */
.auth-cards{position:relative;z-index:2;width:300px;height:400px}
.ac{position:absolute;left:50%;top:50%}
.ac1{transform:translate(-78%,-46%) rotate(-12deg);opacity:.75}
.ac2{transform:translate(-36%,-52%) rotate(6deg)}
.ac2 .cc{animation:float 6s ease-in-out infinite}
.auth-h{font-size:clamp(1.8rem,3vw,2.5rem)}
.auth-p{color:var(--text-2);margin:12px 0 26px}
.form{display:grid;gap:16px}
.form-err{color:var(--red);font-weight:600;font-size:.92rem}
.form-note{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px;font-size:.8rem;color:var(--text-3)}
.cr-new{margin-top:24px;padding:20px;border:1px solid var(--rule);border-radius:20px;background:var(--bg-2)}
.cr-new > b{font-family:var(--f-d);font-size:1.05rem}
.cr-new > p{color:var(--text-2);font-size:.92rem;margin:4px 0 14px}
.cr-steps{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cr-steps li{display:grid;justify-items:center;gap:6px;padding:12px 6px;border-radius:14px;background:#fff;border:1px solid var(--rule);text-align:center;font-size:.8rem;font-weight:600;line-height:1.35}
.cr-steps b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--orange);color:#fff;font-family:var(--f-n);font-size:.82rem}

/* ═════════════ REVEAL ═════════════ */
.view-meet{background:var(--ink);color:#fff}
.view-meet .obar{background:rgba(10,10,10,.6);border-color:rgba(255,255,255,.06)}
.view-meet .brand img{filter:invert(1) hue-rotate(180deg)}
.view-meet .brand-sub{border-color:rgba(255,255,255,.18)}
.view-meet .brand-sub small{color:rgba(255,255,255,.5)}
.view-meet .pill-btn,.view-meet .icon-btn{background:transparent;border-color:rgba(255,255,255,.2);color:#fff}
.meet-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.meet-bg i{position:absolute;border-radius:50%;filter:blur(70px)}
.meet-bg i:nth-child(1){width:600px;height:600px;left:50%;top:40%;transform:translate(-50%,-50%);background:rgba(239,94,30,.35)}
.meet-bg i:nth-child(2){width:360px;height:360px;left:10%;bottom:-10%;background:rgba(213,255,42,.18);animation:blob 14s infinite}
.meet-bg i:nth-child(3){width:300px;height:300px;right:8%;top:6%;background:rgba(255,122,61,.25);animation:blob 18s infinite reverse}
.meet{position:relative;display:grid;justify-items:center;text-align:center;gap:14px;padding:clamp(18px,3vw,40px) 16px 60px}
.meet-h{font-size:clamp(2rem,4.6vw,3.4rem);max-width:18ch}
.meet-h em{font-style:normal;color:var(--orange-lift)}
.meet-p{max-width:52ch;color:rgba(255,255,255,.66)}
.meet-stage{position:relative;display:grid;place-items:center;padding:26px 0 18px}
.meet-ring{position:absolute;width:520px;height:520px;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(239,94,30,.55),transparent 35%,rgba(213,255,42,.45),transparent 70%);
  -webkit-mask:radial-gradient(circle,transparent 55%,#000 56%,#000 57%,transparent 58%);mask:radial-gradient(circle,transparent 55%,#000 56%,#000 57%,transparent 58%);animation:spin 9s linear infinite}
#mt-cc{opacity:0;transform:translateY(80px) scale(.7)}
#mt-cc.show{opacity:1;transform:none;transition:opacity .6s,transform 1s var(--spring)}
#mt-cc.flip .cc-in{transform:rotateY(180deg) rotateZ(-4deg)}
#mt-cc .cc-in{transition:transform 1.1s cubic-bezier(.6,-0.2,.25,1.2)}

/* ═════════════ TRAIL ═════════════ */
.trail{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:24px;max-width:1460px;margin:0 auto;padding:20px clamp(12px,2vw,26px) 40px}
.map-col{position:relative;min-width:0;padding-bottom:150px}
.map{position:relative;width:100%;border:1px solid var(--rule);border-radius:28px;overflow:hidden;box-shadow:var(--plate);background:#F3D39A}
.map-svg{position:absolute;inset:0;width:100%;height:100%}
.map-svg .tw{animation:twinkle 3s ease-in-out infinite;animation-delay:var(--d)}
@keyframes twinkle{50%{opacity:.15}}
.map-svg .ripple{animation:ripple 3s ease-in-out infinite}
@keyframes ripple{50%{transform:translateX(8px)}}
.map-svg .stage-glow{animation:glowS 3.5s ease-in-out infinite;transform-origin:500px 230px}
@keyframes glowS{50%{transform:scale(1.08);opacity:.7}}
.clouds{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.clouds i{position:absolute;width:150px;height:46px;border-radius:40px;background:#fff;opacity:.7;animation:cloud 30s linear infinite}
.clouds i::before,.clouds i::after{content:"";position:absolute;background:#fff;border-radius:50%}
.clouds i::before{width:64px;height:64px;left:22px;top:-30px}
.clouds i::after{width:46px;height:46px;left:74px;top:-20px}
.clouds i:nth-child(even){opacity:.45;scale:.7}
@keyframes cloud{from{transform:translateX(-30vw)}to{transform:translateX(60vw)}}
.region{position:absolute;inset-inline-start:18px;transform:translateY(-50%);z-index:3;display:flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;
  background:rgba(10,10,10,.82);backdrop-filter:blur(8px);color:#fff;border-radius:100px;font-size:.8rem;font-weight:500}
html[dir=rtl] .region{padding:5px 5px 5px 14px}
.region b{padding:3px 10px;border-radius:100px;background:var(--orange);color:#fff;font-family:var(--f-d);font-size:.74rem;font-weight:600}
.region.r1 b{background:var(--gold);color:var(--ink)}
.region.r2 b{background:var(--neon);color:var(--ink)}
.node{position:absolute;z-index:4;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:8px;width:180px}
.node-dot{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;color:var(--text-3);
  box-shadow:0 0 0 5px rgba(255,255,255,.55),0 14px 26px -12px rgba(0,0,0,.45);transition:transform .3s var(--spring)}
.node:hover .node-dot{transform:translateY(-3px) scale(1.07)}
.node-dot b{font-family:var(--f-n);font-size:1.35rem;font-weight:700}
.node-lab{display:grid;max-width:170px;padding:7px 13px;border-radius:14px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  font-family:var(--f-d);font-weight:600;font-size:.82rem;line-height:1.3;text-align:center;box-shadow:0 10px 24px -14px rgba(0,0,0,.45)}
.node-lab small{font-family:var(--f-n);font-size:.68rem;font-weight:700;color:var(--orange)}
.node.lock .node-lab{color:var(--text-3)}
.node.lock .node-lab small{color:var(--text-3)}
.node.done .node-dot{background:var(--ink);color:var(--neon)}
.node.now .node-dot{width:72px;height:72px;background:linear-gradient(180deg,var(--orange-lift),var(--orange));color:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.7),0 16px 34px -10px rgba(239,94,30,.85)}
.node.now .node-dot::before,.node.now .node-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--orange);animation:ring 2.2s ease-out infinite}
.node.now .node-dot::after{animation-delay:1.1s}
@keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(1.6);opacity:0}}
.node.now .node-lab{background:var(--ink);color:#fff;font-size:.9rem;padding:9px 15px}
.node.now .node-lab small{color:var(--neon)}
.node.boss .node-dot{width:80px;height:80px;border-radius:24px;transform:rotate(45deg);background:linear-gradient(135deg,#F1EDE4,#DDD6C8)}
.node.boss .node-dot > *{transform:rotate(-45deg)}
.node.boss:hover .node-dot{transform:rotate(45deg) scale(1.06)}
.node.boss.now .node-dot{background:linear-gradient(135deg,#FFD866,#F2A20C);color:var(--ink)}
.node.boss.done .node-dot{background:var(--ink)}
.node.pop .node-dot{animation:popN .7s var(--spring)}
@keyframes popN{40%{transform:scale(1.35)}}
.node.boss.pop .node-dot{animation:popB .7s var(--spring)}
@keyframes popB{40%{transform:rotate(45deg) scale(1.3)}}
.node.arrive .node-dot{animation:popN .6s var(--spring)}
.walker{position:absolute;z-index:5;transform:translate(-50%,-100%);transition:left .62s cubic-bezier(.45,0,.2,1),top .62s cubic-bezier(.45,0,.2,1);pointer-events:none}
.walker-in{display:grid;justify-items:center;animation:pinBob 2.6s ease-in-out infinite}
@keyframes pinBob{50%{transform:translateY(-7px)}}
.walker-in.cheer{animation:cheer .5s var(--spring) 3}
@keyframes cheer{50%{transform:translateY(-22px) rotate(-6deg) scale(1.08)}}
.pin{display:block;padding:4px;border-radius:50%;background:linear-gradient(180deg,var(--orange-lift),var(--orange));box-shadow:0 14px 26px -10px rgba(239,94,30,.9)}
.pin .face{--s:clamp(44px,5vw,58px);box-shadow:0 0 0 3px #fff}
.pin-tip{width:14px;height:14px;margin-top:-8px;background:var(--orange);transform:rotate(45deg);border-radius:0 0 4px 0}
.coach{position:fixed;z-index:30;bottom:18px;inset-inline-start:clamp(12px,2vw,26px);width:min(560px,calc(100vw - 440px));min-height:96px;
  padding:16px 20px 16px 76px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border:1px solid var(--rule);border-radius:22px;box-shadow:var(--plate);
  cursor:pointer;animation:rise .7s .3s var(--ease-out) both}
html[dir=rtl] .coach{padding:16px 76px 16px 20px}
.coach-av{position:absolute;top:16px;inset-inline-start:16px}
.coach-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-d);font-size:.82rem;font-weight:700;color:var(--orange)}
.coach-tag i{width:7px;height:7px;border-radius:50%;background:var(--neon-deep)}
.coach p{font-family:var(--f-d);font-weight:500;font-size:1rem;line-height:1.55;min-height:3.1em;margin-top:2px}
.coach-more{position:absolute;bottom:8px;inset-inline-end:14px;color:var(--text-3);font-size:.8rem;animation:nudge 1.2s infinite}
@keyframes nudge{50%{transform:translateY(3px)}}

.side{position:sticky;top:84px;align-self:start;display:grid;gap:16px;max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:2px 2px 14px}
.side::-webkit-scrollbar{display:none}
.qcard{position:relative;overflow:hidden;padding:26px;border-radius:var(--r-lg);color:#fff;
  background:radial-gradient(120% 80% at 100% 0%,rgba(255,255,255,.22),transparent 55%),linear-gradient(155deg,var(--orange-lift),var(--orange) 45%,var(--orange-deep));
  box-shadow:0 30px 60px -30px rgba(239,94,30,.75);transition:transform .5s var(--ease-out);transform-style:preserve-3d}
.qcard::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.3),transparent 45%)}
.qcard.is-boss{background:radial-gradient(120% 80% at 100% 0%,rgba(242,178,27,.4),transparent 55%),linear-gradient(155deg,#26262C,#0A0A0A);box-shadow:var(--plate)}
.qcard.fin{background:linear-gradient(155deg,#E4FF6B,#B9E01F);color:var(--ink)}
.qc-num{position:absolute;inset-inline-end:-10px;bottom:-40px;font-family:var(--f-n);font-weight:800;font-size:11rem;line-height:1;opacity:.14;letter-spacing:-.06em;pointer-events:none}
.qc-eye{position:relative;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:100px;background:rgba(255,255,255,.18);font-family:var(--f-d);font-weight:600;font-size:.8rem}
.qcard.fin .qc-eye{background:rgba(10,10,10,.08)}
.qcard h2{position:relative;font-size:1.65rem;margin:14px 0 8px;max-width:13em}
.qcard p{position:relative;opacity:.86;max-width:26ch}
.qc-meta{position:relative;font-family:var(--f-n);font-size:.82rem;font-weight:600;margin:16px 0 20px;opacity:.85}
.qcard .b{position:relative}
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px}
.st{display:flex;align-items:center;gap:10px;min-width:0}
.st > div{display:grid;min-width:0}
.st b{font-family:var(--f-d);font-size:1.15rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st small{font-size:.76rem;color:var(--text-3)}
.st-ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:14px}
.st-ic.fl{background:var(--o-08);color:var(--orange)}
.st-ic.lv{background:var(--ink);color:var(--neon);font-family:var(--f-n);font-weight:700;font-size:1.1rem}
.lvbar{display:block;height:6px;border-radius:6px;background:var(--bg-3);margin-top:6px;position:relative;overflow:hidden}
.lvbar.big{height:10px;margin-top:12px}
.lvbar::after{content:"";position:absolute;inset:0;width:var(--p);background:linear-gradient(90deg,var(--orange-lift),var(--orange));border-radius:6px;animation:grow 1.2s var(--ease-out) both}
@keyframes grow{from{width:0}}
html[dir=rtl] .lvbar::after{right:0;left:auto}
.how ol{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.how li{display:flex;gap:14px}
.hn{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--o-08);color:var(--orange);font-family:var(--f-n);font-weight:700;font-size:.88rem}
.how b{display:block;font-family:var(--f-d);font-size:1rem;font-weight:600}
.how small{color:var(--text-3);font-size:.86rem}
.wks{display:grid;gap:12px}
.wk{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:12px;font-size:.86rem;color:var(--text-2)}
.wk i{height:8px;border-radius:9px;background:var(--bg-3);position:relative;overflow:hidden}
.wk i::after{content:"";position:absolute;inset:0;width:var(--p);background:linear-gradient(90deg,var(--orange-lift),var(--orange));border-radius:9px}
html[dir=rtl] .wk i::after{right:0;left:auto}
.wk b{font-family:var(--f-n);font-size:.8rem;color:var(--text)}

/* ═════════════ HALL ═════════════ */
.hall{max-width:960px;margin:0 auto;padding:34px 16px 80px}
.hall-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:34px}
.hall-head h1{font-size:clamp(2.2rem,4.6vw,3.4rem);margin:12px 0 8px}
.hall-head p{color:var(--text-2)}
.seg{display:flex;padding:4px;border-radius:100px;background:var(--bg-2);border:1px solid var(--rule)}
.seg button{padding:9px 18px;border-radius:100px;font-family:var(--f-d);font-weight:600;font-size:.9rem;color:var(--text-2);transition:.3s}
.seg button.on{background:#fff;color:var(--text);box-shadow:var(--lift-sm)}
.podium{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:14px;max-width:620px;margin:0 auto 30px}
.pd{display:grid;justify-items:center;text-align:center;gap:4px;animation:rise .9s calc(var(--i) * .12s + .1s) var(--spring) both}
.pd-m{position:relative;margin-bottom:6px}
.pd-m .face{--s:clamp(64px,10vw,84px);box-shadow:0 0 0 4px #fff,0 18px 30px -14px rgba(0,0,0,.45)}
.pd.p1 .pd-m .face{--s:clamp(84px,13vw,110px);box-shadow:0 0 0 4px #fff,0 0 0 7px var(--gold),0 22px 36px -14px rgba(0,0,0,.45)}
.pd-crown{position:absolute;top:-16px;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--gold);color:var(--ink);box-shadow:0 0 0 3px #fff}
.pd b{font-family:var(--f-d);font-size:1rem;font-weight:700}
.pd small{font-family:var(--f-n);font-size:.78rem;color:var(--text-3)}
.pd-block{width:100%;margin-top:10px;display:grid;place-items:center;border-radius:20px 20px 0 0;font-family:var(--f-n);font-weight:800;font-size:2rem;color:#fff}
.pd.p1 .pd-block{height:130px;background:linear-gradient(180deg,#FFD866,#F2A20C)}
.pd.p2 .pd-block{height:96px;background:linear-gradient(180deg,#D9DBE0,#A9ADB6)}
.pd.p3 .pd-block{height:72px;background:linear-gradient(180deg,#F0B184,#C9743E)}
.pd.you b{color:var(--orange)}
.board{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.br{display:grid;grid-template-columns:40px 44px minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:10px 18px 10px 12px;background:#fff;border:1px solid var(--rule);border-radius:18px;
  animation:rise .55s calc(var(--i) * .035s) var(--ease-out) both;transition:box-shadow .3s,transform .3s var(--spring)}
.br:hover{box-shadow:var(--lift-sm);transform:translateY(-1px)}
.br-r{font-family:var(--f-n);font-weight:700;font-size:1.02rem;text-align:center;color:var(--text-3)}
.br-n{display:grid;min-width:0;line-height:1.3}
.br-n b{font-family:var(--f-d);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-n small{font-size:.78rem;color:var(--text-3)}
.br-s{display:flex;align-items:center;gap:4px;font-size:.82rem;color:var(--orange);font-weight:600}
.br-x{font-family:var(--f-n);font-size:1.05rem;white-space:nowrap}
.br-x small{font-size:.7rem;color:var(--text-3)}
.br.you{border-color:var(--orange);box-shadow:0 0 0 3px var(--o-16),var(--lift-sm);position:relative;z-index:2}
.br:nth-child(-n+3) .br-r{color:var(--orange)}

/* ═════════════ QUEST ═════════════ */
.qsteps{list-style:none;margin:0 auto;padding:0;display:flex;align-items:center}
.qsteps li{display:flex;align-items:center;gap:8px;color:var(--text-3);font-family:var(--f-d);font-weight:600;font-size:.9rem}
.qsteps li + li::before{content:"";width:clamp(18px,4vw,52px);height:2px;margin:0 10px;border-radius:2px;background:var(--rule);transition:background .5s}
.qsteps li.done + li::before{background:var(--orange)}
.qs-dot{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--bg-2);border:1px solid var(--rule);transition:.4s var(--spring)}
.qsteps li.now{color:var(--text)}
.qsteps li.now .qs-dot{background:linear-gradient(180deg,var(--orange-lift),var(--orange));border-color:transparent;color:#fff;transform:scale(1.1);box-shadow:var(--glow-o)}
.qsteps li.done{color:var(--text)}
.qsteps li.done .qs-dot{background:var(--ink);border-color:var(--ink);color:var(--neon)}
.qmain{max-width:900px;margin:0 auto;padding:30px 16px 80px}
.qhead{text-align:center;margin-bottom:24px}
.qday{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-d);font-size:.86rem;font-weight:600;color:var(--orange)}
.qday b{color:var(--ink);background:var(--gold);padding:2px 10px;border-radius:100px;font-size:.78rem}
.qhead h1{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-top:8px}
.qstage{position:relative}
.qcoach{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.qc-say{padding:12px 18px;background:#fff;border:1px solid var(--rule);border-radius:18px;border-end-start-radius:6px;box-shadow:var(--lift-sm);max-width:640px}
.qc-say b{display:block;font-family:var(--f-d);font-size:.8rem;color:var(--orange)}
.lcard{position:relative;padding:clamp(26px,4vw,46px);border-radius:28px;background:#fff;border:1px solid var(--rule);box-shadow:var(--plate);min-height:260px;overflow:hidden}
.lcard::before{content:"";position:absolute;inset-inline-end:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:var(--o-08);pointer-events:none}
.lcard.c1{background:linear-gradient(155deg,#1A1A1F,#0A0A0A);color:#fff;border-color:transparent}
.lcard.c1::before{background:rgba(213,255,42,.12)}
.tagline{position:relative;display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:100px;background:var(--o-08);color:var(--orange-deep);font-family:var(--f-d);font-size:.8rem;font-weight:600}
.tagline.neon{background:rgba(213,255,42,.16);color:var(--neon)}
.who{position:relative;display:flex;align-items:center;gap:12px;margin:24px 0 14px}
.who-av{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:linear-gradient(180deg,var(--orange-lift),var(--orange));color:#fff;font-family:var(--f-d);font-weight:700;font-size:1.15rem}
.who b{font-family:var(--f-d);font-size:1.08rem;font-weight:600}
.story{position:relative;font-size:clamp(1.12rem,1.8vw,1.32rem);line-height:1.75;color:#2A2B30}
.result{position:relative;font-family:var(--f-d);font-weight:600;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.45;margin-top:22px}
.pts{position:relative;list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.pts li{display:flex;align-items:flex-start;gap:14px;font-size:1.12rem;font-weight:500;animation:rise .6s calc(var(--i) * .14s + .1s) var(--ease-out) both}
.pts li span{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--neon);color:var(--ink);margin-top:2px}
.ldots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.ldots i{width:8px;height:8px;border-radius:9px;background:var(--rule-2);transition:.35s var(--ease-out)}
.ldots i.on{background:var(--orange);width:26px}
.qzcard{padding:clamp(24px,3.6vw,40px);border-radius:28px;background:#fff;border:1px solid var(--rule);box-shadow:var(--plate)}
.qzcard h2{font-size:clamp(1.3rem,2.4vw,1.75rem);margin-bottom:22px}
.qz-opts{display:grid;gap:10px}
.qz-o{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--rule);border-radius:18px;background:#fff;text-align:start;font-weight:500;font-size:1.04rem;
  transition:transform .25s var(--spring),border-color .25s,box-shadow .25s,background .25s}
.qz-o:not(:disabled):hover{transform:translateY(-2px);border-color:var(--rule-2);box-shadow:var(--lift-sm)}
.qz-k{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--bg-2);font-family:var(--f-d);font-weight:700;color:var(--text-2)}
.qz-o.right{border-color:var(--neon-deep);background:#F8FFE0;box-shadow:0 0 0 3px rgba(168,204,18,.22)}
.qz-o.right .qz-k{background:var(--neon);color:var(--ink)}
.qz-o.wrong{border-color:#F3B4AD;background:#FFF4F2}
.qz-o.wrong .qz-k{background:var(--red);color:#fff}
.qz-o:disabled:not(.right):not(.wrong){opacity:.5}
.qz-why{margin-top:18px;padding:14px 18px;border-radius:16px;background:var(--bg-2);animation:rise .45s var(--ease-out) both}
.qz-why.ok{background:#F8FFE0}
.qz-why.no{background:#FFF4F2}
.qz-why b{font-family:var(--f-d)}
.scr-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 14px}
.scr-head h2{font-size:1.5rem}
.blocks{display:grid;gap:12px}
.blk{position:relative;border:1px solid var(--rule);border-radius:20px;background:#fff;box-shadow:var(--lift-sm);overflow:hidden;animation:rise .55s var(--ease-out) both}
.blk::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--rule-2)}
.blk:nth-child(2){animation-delay:.08s}.blk:nth-child(3){animation-delay:.16s}
.blk-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px 0}
.blk-l{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-d);font-size:.8rem;font-weight:700;color:var(--text-3)}
.blk-hook::before{background:linear-gradient(180deg,var(--orange-lift),var(--orange))}
.blk-hook .blk-l{color:var(--orange)}
.blk-cta::before{background:var(--neon-deep)}
.blk-cta .blk-l{color:var(--neon-text)}
.blk textarea,.post textarea{display:block;width:100%;border:0;background:none;resize:none;padding:8px 18px 16px;font-size:1.1rem;line-height:1.7;overflow:hidden}
.blk-hook textarea{font-family:var(--f-d);font-weight:600;font-size:1.2rem}
.blk textarea:focus,.post textarea:focus{outline:0}
.blk:focus-within{border-color:var(--orange);box-shadow:0 0 0 4px var(--o-16)}
.scr-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.task{display:flex;gap:14px;align-items:flex-start;margin-top:18px;padding:16px 18px;border-radius:18px;background:var(--o-04);border:1px dashed var(--o-32)}
.task > .ic{flex:none;color:var(--orange);margin-top:3px}
.task b{font-family:var(--f-d);font-weight:600}
.task p{color:var(--text-2);font-size:.95rem}
.task.sm{margin-top:4px;padding:12px 14px}
.film-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:24px;align-items:start}
.tp{position:relative;aspect-ratio:9/16;width:min(100%,calc(78vh * 9 / 16));height:auto;margin-inline:auto;border-radius:32px;overflow:hidden;background:linear-gradient(160deg,#1A1A1F,#0A0A0A);
  box-shadow:0 0 0 8px #fff,0 0 0 9px var(--rule),var(--plate)}
.tp video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tp video.mir{transform:scaleX(-1)}
.tp-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:26px;text-align:center;color:#fff}
.tp-idle::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(239,94,30,.35);filter:blur(60px);top:20%}
.tp-m{position:relative;display:grid;place-items:center;width:96px;height:96px;border-radius:50%;background:linear-gradient(180deg,var(--orange-lift),var(--orange));box-shadow:0 0 0 10px rgba(239,94,30,.18),0 0 0 22px rgba(239,94,30,.08)}
.tp-idle p{position:relative;font-size:.92rem;color:rgba(255,255,255,.7);max-width:30ch}
.tp-idle .row{position:relative}
.tp-idle .b-paper{--fg:var(--text)}
/* the idle panel stays on top and scrolls if the help steps are long */
.tp-idle{z-index:4;overflow-y:auto;justify-content:safe center;gap:14px}
.tp-idle::before{pointer-events:none}
.tp-idle button,.tp-idle label{position:relative;z-index:1}
.tp-text,.tp-line,.tp-count,.tp-rec{pointer-events:none}
#cam.busy{opacity:.75;cursor:progress}
.tp-help{position:relative;list-style:none;counter-reset:st;display:grid;gap:8px;width:100%;max-width:34ch;margin:0;padding:12px 14px;border-radius:16px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);text-align:start;font-size:.84rem;line-height:1.45;color:#fff}
.tp-help li{counter-increment:st;display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start}
.tp-help li::before{content:counter(st);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--orange);color:#fff;font-weight:700;font-size:.75rem}
.tp-file{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:100px;border:1px dashed rgba(255,255,255,.35);color:rgba(255,255,255,.9);
  font-size:.86rem;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s}
.tp-file:hover,.tp-file:focus-within{background:rgba(255,255,255,.08);border-color:var(--neon)}
.tp-file input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.tp-text{position:absolute;inset:0 0 40% 0;overflow:hidden;padding:26px 22px;
  -webkit-mask:linear-gradient(180deg,transparent,#000 14%,#000 72%,transparent);mask:linear-gradient(180deg,transparent,#000 14%,#000 72%,transparent)}
.tp-text::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.2));z-index:-1}
.tp-scroll{padding-top:30%;will-change:transform}
.tp-scroll p{color:#fff;font-family:var(--f-d);font-weight:600;font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.6;margin-bottom:1.1em;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.tp-scroll p:first-child{color:var(--neon)}
.tp-line{position:absolute;left:14px;right:14px;top:30%;height:2px;background:var(--orange);opacity:.8;pointer-events:none;display:none;box-shadow:0 0 12px var(--orange)}
.tp.on-air .tp-line,.tp.dark .tp-line{display:block}
.tp-count{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-n);font-weight:800;font-size:8rem;color:#fff;background:rgba(0,0,0,.4)}
.tp-rec{position:absolute;top:16px;inset-inline-end:16px;display:flex;align-items:center;gap:7px;padding:5px 12px;border-radius:100px;background:rgba(0,0,0,.6);color:#fff;font-family:var(--f-n);font-size:.8rem;font-weight:600}
.tp-rec i{width:9px;height:9px;border-radius:50%;background:var(--red);animation:blinkR 1s infinite}
@keyframes blinkR{50%{opacity:.3}}
.tp-out{z-index:3;background:#000}
.tp-ctl{display:grid;gap:14px}
.ctl-row{display:flex;align-items:center;gap:10px}
.ctl{flex:1;display:grid;gap:6px;font-weight:600;font-size:.88rem;color:var(--text-2)}
.ctl input{accent-color:var(--orange)}
.after{display:grid;gap:8px}
.post-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px}
.post-grid .card{padding:0;overflow:hidden}
.post-grid .card:last-child{padding:20px}
.post-grid .card:last-child .blk-l{display:block;margin-bottom:12px}
.post-grid .card .blk-top{padding:14px 18px 0}

/* reward overlay */
.overlay{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(10,10,10,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .35s;overflow-y:auto}
.overlay.in{opacity:1}
.overlay.out{opacity:0}
.rw-in{position:relative;width:min(540px,100%);display:grid;justify-items:center;gap:12px;text-align:center;padding:30px 26px 26px;margin:auto;background:#fff;border-radius:var(--r-xl);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.7);overflow:hidden;transform:translateY(40px) scale(.94);transition:transform .7s var(--spring)}
.overlay.in .rw-in{transform:none}
.rw-in::before{content:"";position:absolute;inset:0 0 auto;height:280px;pointer-events:none;background:radial-gradient(80% 100% at 50% 0%,var(--o-16),transparent 70%)}
.rays{position:absolute;pointer-events:none}
.rays.big{inset:-40% -40% auto;height:140%;opacity:.6;background:repeating-conic-gradient(from 0deg at 50% 30%,rgba(239,94,30,.07) 0 8deg,transparent 8deg 16deg);
  -webkit-mask:radial-gradient(circle at 50% 30%,#000 5%,transparent 55%);mask:radial-gradient(circle at 50% 30%,#000 5%,transparent 55%);animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.rw-m{position:relative;perspective:1000px}
.rw-in h2{position:relative;font-size:clamp(1.9rem,4vw,2.5rem)}
.rw-xp{position:relative;display:grid;padding:10px 28px;border-radius:20px;color:#fff;background:linear-gradient(155deg,var(--orange-lift),var(--orange-deep));box-shadow:var(--glow-o)}
.rw-xp small{font-weight:600;font-size:.82rem;opacity:.85}
.rw-xp b{font-family:var(--f-n);font-size:2.3rem;line-height:1.1;font-variant-numeric:tabular-nums}
.lvup{display:flex;align-items:center;gap:12px;padding:10px 18px;border-radius:18px;background:var(--ink);color:#fff;text-align:start;animation:rise .6s .9s var(--spring) both}
.lvup .ic{color:var(--neon)}
.lvup b{display:block;font-family:var(--f-d);color:var(--neon)}
.rw-sec{width:100%;display:grid;justify-items:center;gap:10px;margin-top:6px}
.bdgs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.bdgs.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.bdg{display:grid;justify-items:center;gap:4px;padding:16px 10px;border:1px solid var(--rule);border-radius:20px;background:#fff;text-align:center;min-width:130px}
.bdg-ic{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:var(--ink);color:var(--neon);box-shadow:0 12px 20px -12px rgba(0,0,0,.6)}
.bdg b{font-family:var(--f-d);font-size:.92rem;font-weight:600;line-height:1.3}
.bdg small{font-size:.74rem;color:var(--text-3);line-height:1.4}
.bdg.off{background:var(--bg-2);border-style:dashed}
.bdg.off .bdg-ic{background:var(--bg-3);color:var(--text-3);box-shadow:none}
.bdg.off b{color:var(--text-3)}
.bdg.new{animation:flipIn .8s calc(var(--i) * .18s + 1s) var(--spring) both}
@keyframes flipIn{from{opacity:0;transform:perspective(600px) rotateY(90deg) scale(.7)}}
.unl{display:flex;align-items:center;gap:16px;width:100%;padding:12px;border-radius:20px;background:var(--bg-2);text-align:start;animation:rise .6s 1.4s var(--ease-out) both}
.unl-c{flex:none}
.unl .eyebrow{display:block;margin-bottom:2px}
.unl-t{display:block;font-family:var(--f-d);font-size:1.15rem;margin-bottom:10px}
.rw-in > .b-wide{margin-top:10px}

/* ═════════════ PASSPORT ═════════════ */
.pass{max-width:1240px;margin:0 auto;padding:28px clamp(12px,2vw,26px) 80px;display:grid;gap:22px}
.pass-hero{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);background:#fff;border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--plate);overflow:hidden}
.ph-stage{position:relative;display:grid;place-items:center;min-height:500px;padding:36px;background:var(--ink);overflow:hidden}
.ph-stage .cc{position:relative;z-index:2;animation:float 6s ease-in-out infinite}
.ph-meta{display:grid;align-content:center;justify-items:start;gap:4px;padding:36px clamp(22px,3vw,44px)}
.ph-meta h1{font-size:clamp(2rem,3.6vw,2.9rem);margin:14px 0 6px}
.ph-meta .lvbar{width:100%}
.lv-line{display:flex;justify-content:space-between;gap:10px;width:100%;font-size:.9rem;color:var(--text-2)}
.lv-line b{font-family:var(--f-d);color:var(--text)}
.lv-line span{font-family:var(--f-n)}
.ph-meta .card-eye{margin-top:24px;margin-bottom:10px}
#ps-studio{width:100%}
.studio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.st-t{position:relative;display:grid;gap:8px;padding:8px 8px 10px;border:1px solid var(--rule);border-radius:16px;background:#fff;font-size:.82rem;font-weight:600;color:var(--text-2);text-align:start;transition:.25s var(--spring)}
.st-t:hover{transform:translateY(-2px);border-color:var(--rule-2)}
.st-sw{height:52px}
.st-t em{position:absolute;top:14px;inset-inline-end:14px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--orange);color:#fff;font-style:normal}
.st-t em.lk{background:rgba(10,10,10,.75)}
.st-t.on{border-color:var(--orange);box-shadow:0 0 0 3px var(--o-16);color:var(--text)}
.st-t.lock{opacity:.6}
.st-t.lock .st-sw{filter:grayscale(.85)}
.pass-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sb{display:grid;justify-items:center;gap:2px;padding:14px 6px;border-radius:16px;background:var(--bg-2);text-align:center}
.sb .ic{color:var(--orange)}
.sb b{font-family:var(--f-n);font-size:1.3rem}
.sb small{font-size:.74rem;color:var(--text-3);line-height:1.3}
.cert-lock{display:grid;justify-items:center;gap:10px;padding:20px;border:1px dashed var(--rule-2);border-radius:18px;text-align:center;color:var(--text-3)}
.cert-lock .lvbar{width:100%}
.acct-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.acct-row b{font-family:var(--f-d)}
.acct-row p{font-size:.9rem;color:var(--text-2)}

/* certificate */
.cert{position:relative;border-radius:20px;background:#fff;padding:10px;border:1px solid var(--rule);overflow:hidden}
.cert::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:linear-gradient(90deg,var(--orange-lift),var(--orange-deep))}
.cert-in{position:relative;border:1px solid var(--rule);border-radius:14px;padding:26px 28px;min-height:300px}
.cert-top{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.cert-top img{width:84px}
.cert-top span{font-family:var(--f-d);font-size:.8rem;font-weight:600;padding-inline-start:10px;border-inline-start:1px solid var(--rule)}
.cert-eye{font-family:var(--f-d);font-weight:700;font-size:.86rem;color:var(--orange)}
.cert-line{color:var(--text-2);font-size:.92rem;margin-top:6px;max-width:62%}
.cert-name{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:4px 0;max-width:62%}
.cert-of{font-family:var(--f-d);font-weight:600;margin-top:4px;max-width:62%}
.cert-foot{display:flex;align-items:center;gap:14px;margin-top:24px;font-family:var(--f-n);font-size:.78rem;color:var(--text-3)}
.cert-seal{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--neon);color:var(--ink)}
.cert-ph{position:absolute;inset-inline-end:28px;top:50%;transform:translateY(-40%)}
.cert-ph .face{--s:clamp(90px,12vw,130px);box-shadow:0 0 0 5px #fff,0 0 0 8px var(--orange),0 0 0 26px var(--o-08)}
.cert.mini .cert-in{min-height:0;padding:18px}
.cert.mini .cert-name{font-size:1.4rem}
.cert.mini .cert-ph .face{--s:80px}

/* ═════════════ GRADUATION ═════════════ */
.view-grad{background:var(--ink)}
.view-grad .abar{background:rgba(10,10,10,.7);border-color:rgba(255,255,255,.06)}
.view-grad .brand img{filter:invert(1) hue-rotate(180deg)}
.view-grad .brand-sub{border-color:rgba(255,255,255,.18);color:#fff}
.view-grad .tabs{display:none}
.view-grad .pill-btn,.view-grad .icon-btn{background:transparent;border-color:rgba(255,255,255,.2);color:#fff}
.grad{position:relative;max-width:1180px;margin:0 auto;padding:30px 16px 80px;color:#fff;overflow:hidden}
.grad-sky i{position:absolute;top:-10%;width:30%;height:90%;background:linear-gradient(180deg,rgba(213,255,42,.18),transparent);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);pointer-events:none;animation:sway 6s ease-in-out infinite;transform-origin:50% 0}
.grad-sky i:nth-child(1){left:5%;animation-delay:-2s}.grad-sky i:nth-child(2){left:35%;background:linear-gradient(180deg,rgba(239,94,30,.28),transparent)}.grad-sky i:nth-child(3){left:65%;animation-delay:-4s}
@keyframes sway{50%{transform:rotate(8deg)}}
.grad-hero{position:relative;display:grid;justify-items:center;text-align:center;gap:14px;margin-bottom:36px}
.grad-card{margin-bottom:10px;animation:fanIn 1.1s var(--spring) both}
.grad-card .cc{animation:float 6s ease-in-out infinite}
.grad-hero h1{font-size:clamp(2.2rem,5vw,3.8rem)}
.grad-hero p{max-width:56ch;color:rgba(255,255,255,.72);font-size:1.06rem}
.grad-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;color:var(--text);align-items:start}
.code{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;margin-bottom:12px;border:1.5px dashed var(--neon-deep);border-radius:18px;background:#F8FFE0}
.code b{font-family:var(--f-n);font-size:clamp(1.4rem,3vw,2rem);letter-spacing:.06em}
.code-card{display:grid;gap:10px}
.code .icon-btn{flex:none;background:#fff;color:var(--text);border:1px solid var(--rule);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.code .icon-btn:hover{background:var(--orange);color:#fff;border-color:var(--orange)}

/* ═════════════ FX ═════════════ */
.iris{position:fixed;inset:0;z-index:150;pointer-events:none;overflow:hidden}
.iris > i{position:absolute;border-radius:50%;background:radial-gradient(circle,#FF7A3D,#EF5E1E 55%,#D84A10);transform:translate(-50%,-50%) scale(0)}
.iris.full{background:#EF5E1E}
.iris-rays{position:absolute;inset:-50%;opacity:0;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.1) 0 8deg,transparent 8deg 16deg);transition:opacity .3s}
.iris.full .iris-rays{opacity:1;animation:spin 20s linear infinite}
.iris-m{position:absolute;left:50%;top:50%;width:min(220px,46vw);transform:translate(-50%,-50%) scale(.6);opacity:0}
.iris.full .iris-m{animation:irisPop .55s var(--spring) forwards}
@keyframes irisPop{to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.fx-confetti{position:fixed;inset:0;pointer-events:none;z-index:120;overflow:hidden}
.fx-confetti i{position:absolute;width:9px;height:13px;border-radius:2px}
.fx-coin{position:fixed;z-index:121;pointer-events:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(180deg,var(--orange-lift),var(--orange));color:#fff;box-shadow:0 6px 14px -6px rgba(239,94,30,.9)}
.fx-coin .ic{width:15px;height:15px}
.fx-plus{position:fixed;z-index:121;pointer-events:none;transform:translate(-50%,-50%);font-family:var(--f-n);font-weight:800;font-size:1.2rem;color:var(--ink);
  background:var(--neon);padding:3px 13px;border-radius:100px;box-shadow:0 10px 20px -10px rgba(0,0,0,.4);animation:plus 1.2s var(--ease-out) forwards}
@keyframes plus{from{opacity:0;transform:translate(-50%,-30%) scale(.6)}20%{opacity:1;transform:translate(-50%,-80%) scale(1.1)}to{opacity:0;transform:translate(-50%,-260%) scale(1)}}
.toast{position:fixed;z-index:130;left:50%;bottom:28px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:12px 20px;border-radius:100px;
  background:var(--ink);color:#fff;font-weight:500;box-shadow:var(--plate);animation:toastIn .5s var(--spring)}
.toast .ic{color:var(--neon)}
.toast.out{opacity:0;transform:translate(-50%,20px);transition:.35s}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,30px) scale(.9)}}

/* ═════════════ RESPONSIVE ═════════════ */
@media (max-width:1100px){
  .trail{grid-template-columns:minmax(0,1fr) 320px}
  .coach{width:min(520px,calc(100vw - 380px))}
  .opts-niche{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:940px){
  .wl{grid-template-columns:1fr;text-align:center;justify-items:center;padding-top:20px}
  .wl-copy .row,.wl-stats{justify-content:center}
  .wl-h .hl{margin-inline:auto}
  .wl-p{margin-inline:auto}
  .wl-fan{width:100%;height:420px}
  .ob,.auth{grid-template-columns:1fr;min-height:0}
  .ob-stage{padding:22px 16px 26px;gap:14px}
  .ob-card .cc{--w:220px}
  .ob-hint{display:none}
  .auth-art{display:none}
  .trail{grid-template-columns:1fr}
  .side{position:static;max-height:none;overflow:visible;grid-template-columns:1fr 1fr;order:-1}
  .side .qcard{grid-column:1/-1}
  .side .how{display:none}
  .coach{width:auto;inset-inline-end:12px;bottom:12px}
  .pass-hero{grid-template-columns:1fr}
  .ph-stage{min-height:0;padding:30px 16px}
  .pass-grid{grid-template-columns:1fr}
  .grad-grid{grid-template-columns:1fr}
  .film-grid,.post-grid{grid-template-columns:1fr}
  .tp{width:min(100%,380px,calc(80vh * 9 / 16));min-height:0}
}
@media (max-width:640px){
  .brand-sub small{display:none}
  .brand img{width:74px}
  .obar .lang span,.abar .lang span{display:none}
  .obar .lang,.abar .lang{width:42px;padding:0;justify-content:center}
  .obar{flex-wrap:wrap}
  .obar-mid{order:3;width:100%;flex-basis:100%}
  .steps-bar{width:100%}
  .abar{flex-wrap:wrap;gap:8px;padding-bottom:10px}
  .abar .tabs{order:3;width:100%}
  .abar .tab{flex:1;justify-content:center;padding:8px 6px}
  .abar .snd{display:none}
  .opts-2{grid-template-columns:1fr}
  .opts-niche{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nopt{grid-template-columns:auto 1fr;justify-items:start;align-items:center;padding:12px 14px;text-align:start}
  .wl-fan{height:360px}
  .fan-c .cc-sm{--w:170px}
  .fan-c:nth-child(5) .cc{--w:210px}
  .side{grid-template-columns:1fr}
  .node{width:auto}
  .node .node-lab{display:none}
  .node.now .node-lab,.node.boss .node-lab{display:grid}
  .node.boss:not(.now) .node-lab{font-size:.66rem;padding:3px 8px}
  .node-dot{width:44px;height:44px}
  .node.now .node-dot{width:54px;height:54px}
  .node.boss .node-dot{width:58px;height:58px;border-radius:18px}
  .node-dot .ic{width:18px;height:18px}
  .node-dot b{font-size:1.05rem}
  .region{font-size:.7rem;inset-inline-start:8px}
  .region span{display:none}
  .qbar{gap:8px;padding:10px}
  .qbar .icon-btn{width:38px;height:38px}
  .qs-dot{width:32px;height:32px}
  .qsteps .qs-l{display:none}
  .qsteps li + li::before{width:14px;margin:0 4px}
  .qxp small,.qxp .xp-coin{display:none}
  .qhead h1{font-size:1.5rem}
  .studio{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,1fr)}
  .br{grid-template-columns:28px 40px minmax(0,1fr) auto;padding:8px 12px 8px 8px}
  .br-s{display:none}
  .qnav{flex-wrap:wrap}
  .qnav > .row{width:100%;justify-content:space-between}
  .cert-line,.cert-name,.cert-of{max-width:100%}
  .cert-ph{position:relative;inset:auto;transform:none;margin:16px auto 0;width:fit-content}
  .coach{padding:14px 16px 14px 66px}
  html[dir=rtl] .coach{padding:14px 66px 14px 16px}
  .coach .cmark{--s:38px!important}
  .coach p{font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ═════════════ TIX, the companion ═════════════ */
.ax{display:block;width:100%;height:auto;overflow:visible}
.ax-bob{animation:bob 3.2s cubic-bezier(.45,0,.55,1) infinite;transform-origin:120px 250px}
@keyframes bob{0%,100%{transform:none}45%{transform:translateY(-6px) scale(.985,1.02)}70%{transform:translateY(-2px) scale(1.01,.99)}}
.ax-head{animation:tilt 7s ease-in-out infinite;transform-origin:120px 240px}
@keyframes tilt{0%,62%,100%{transform:none}68%{transform:rotate(-4deg)}76%{transform:rotate(3deg)}84%{transform:rotate(0)}}
.ax-eyes{animation:blink 4.6s infinite;transform-origin:120px 98px}
@keyframes blink{0%,44%,49%,100%{transform:none}46.5%{transform:scaleY(.08)}}
.ax-ant{animation:ant 2.6s ease-in-out infinite;transform-origin:120px 34px}
@keyframes ant{0%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}60%{transform:rotate(6deg)}}
.ax-glow{animation:glowP 2s ease-in-out infinite;transform-origin:134px 9px}
@keyframes glowP{50%{transform:scale(1.35);opacity:.45}}
.ax-arm{animation:wave 2.4s ease-in-out infinite;transform-origin:178px 160px}
@keyframes wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg)}}
.ax-wl{animation:flap 3.2s ease-in-out infinite;transform-origin:62px 156px}
.ax-wr:not(.up){animation:flapR 3.2s ease-in-out infinite;transform-origin:178px 156px}
@keyframes flap{50%{transform:rotate(7deg)}}
@keyframes flapR{50%{transform:rotate(-7deg)}}
.ax-happy .ax-bob{animation:hop .9s cubic-bezier(.3,1.5,.5,1) 2,bob 3.2s 1.8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes hop{0%,100%{transform:none}35%{transform:translateY(-16px) scale(.95,1.06)}60%{transform:translateY(0) scale(1.07,.93)}}
.ax-sh{animation:shadow 3.2s ease-in-out infinite;transform-origin:120px 250px}
.ax-happy .ax-sh{animation:shadowHop .9s ease-in-out 2,shadow 3.2s 1.8s ease-in-out infinite}
@keyframes shadow{45%{transform:scaleX(.9);opacity:.75}}
@keyframes shadowHop{35%{transform:scaleX(.72);opacity:.5}}
.ax-look{transition:transform .25s ease-out}
.ax-head{transition:translate .3s ease-out}
.poof{position:absolute;left:50%;top:52%;width:70%;aspect-ratio:1;border-radius:50%;border:3px dashed var(--orange);pointer-events:none;
  transform:translate(-50%,-50%) scale(.4);opacity:.9;animation:poof .7s var(--ease-out) forwards}
@keyframes poof{to{transform:translate(-50%,-50%) scale(1.4) rotate(40deg);opacity:0}}
.wi-m *,.br-m *,.unl-m .ax-bob,.unl-m .ax-head{animation:none!important}

/* speech bubble (Tix talking) */
.bubble{position:relative;z-index:2;max-width:min(380px,86%);padding:12px 20px;border-radius:20px;background:#fff;color:var(--text);
  font-family:var(--f-d);font-weight:600;font-size:1rem;line-height:1.4;text-align:center;box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.bubble::after{content:"";position:absolute;left:50%;bottom:-8px;width:16px;height:16px;background:#fff;border-radius:3px;transform:translateX(-50%) rotate(45deg)}
.ob-m{position:relative;z-index:1;width:min(280px,60%);margin-top:4px}
.ob-who{position:relative;z-index:1;display:flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:100px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);font-size:.86rem;color:rgba(255,255,255,.7)}
html[dir=rtl] .ob-who{padding:5px 5px 5px 14px}
.ob-who b{color:#fff;font-family:var(--f-d)}
.ob-who .face{box-shadow:0 0 0 2px var(--orange)}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.sw{position:relative;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.4),transparent 55%),var(--c);
  color:transparent;display:grid;place-items:center;box-shadow:0 6px 14px -8px rgba(0,0,0,.5);transition:transform .3s var(--spring),box-shadow .3s}
.sw:hover{transform:translateY(-3px) scale(1.06)}
.sw.on{color:#fff;transform:scale(1.08);box-shadow:0 0 0 3px #fff,0 0 0 5.5px var(--orange),0 10px 18px -8px rgba(0,0,0,.5)}

/* welcome: Tix in front of the card fan */
.wl-tix{position:absolute;z-index:5;left:50%;bottom:-2%;width:clamp(150px,15vw,210px);transform:translateX(-50%);animation:tixIn 1.1s .9s var(--spring) both}
@keyframes tixIn{from{opacity:0;transform:translate(-50%,80px) scale(.5)}}
.wl-bubble{position:absolute;z-index:6;left:50%;bottom:calc(-2% + clamp(150px,15vw,210px) * .98);transform:translateX(10%);padding:9px 16px;border-radius:16px 16px 16px 4px;
  background:var(--ink);color:#fff;font-family:var(--f-d);font-weight:600;font-size:.9rem;white-space:nowrap;box-shadow:var(--lift);animation:rise .6s 1.7s var(--spring) both}
html[dir=rtl] .wl-bubble{transform:translateX(-110%);border-radius:16px 16px 4px 16px}
.fan-c:nth-child(5){transform:translate(-50%,-50%) translateY(-14%)}

/* the gate */
.ac-tix{position:absolute;z-index:4;left:50%;bottom:-6%;width:150px;transform:translateX(10%);animation:tixIn 1s .5s var(--spring) both}
.auth-art .bubble{margin-bottom:6px}

/* reveal */
.meet-stage{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:10px;min-height:400px;padding:20px 0 6px;width:min(720px,100%)}
.meet-stage .spot{position:absolute;bottom:0;left:50%;width:420px;height:320px;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 90%,rgba(239,94,30,.55),transparent 65%);pointer-events:none}
.meet-ring{left:50%;top:50%;transform:translate(-50%,-50%)}
.meet-m{position:relative;z-index:2;width:min(270px,58vw)}
.meet-card{position:relative;z-index:1;margin-inline-start:-40px;margin-bottom:40px;transform:rotate(8deg)}
html[dir=rtl] .meet-card{transform:rotate(-8deg)}
#mt-cc{opacity:0;transform:translateY(60px) scale(.7)}
#mt-cc.show{opacity:1;transform:none;transition:opacity .6s,transform 1s var(--spring)}
.meet-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:6px 0 4px}
.rename{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:100px;border:1px dashed var(--rule-2);background:#fff}
.rename input{border:0;background:none;width:11ch;font-weight:700;font-family:var(--f-d)}
.rename input:focus{outline:0}
.rename:focus-within{border-style:solid;border-color:var(--orange)}
.view-meet .rename,.rename.dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff}
.b-glass{--fg:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.b-glass:hover{background:rgba(255,255,255,.16)}
.wardrobe-slot{width:min(620px,100%);padding:18px;border-radius:24px;background:#fff;color:var(--text);text-align:start;box-shadow:var(--plate)}
.view-meet .meet{gap:16px}

/* trail */
.walker{width:clamp(70px,8vw,108px);transform:translate(-50%,-88%)}
.walker-in{animation:none}
.qc-m{position:absolute;inset-inline-end:-6px;bottom:-26px;width:118px;transform:rotate(-10deg);pointer-events:none;filter:drop-shadow(0 16px 20px rgba(0,0,0,.25))}
html[dir=rtl] .qc-m{transform:rotate(10deg)}
.qcard .qc-num{inset-inline-end:auto;inset-inline-start:-10px}

/* reward */
.rw-hero{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:4px}
.rw-m{position:relative;width:150px;z-index:2}
.rw-card{margin-inline-start:-26px;margin-bottom:10px}
.unl-m{flex:none;width:80px}

/* passport */
.ph-stage{display:flex;align-items:flex-end;justify-content:center;flex-wrap:wrap;gap:0;padding:40px 24px 28px}
.ph-card{position:relative;z-index:1;transform:rotate(-7deg) translateY(-30px);margin-inline-end:-50px}
html[dir=rtl] .ph-card{transform:rotate(7deg) translateY(-30px)}
.ph-card .cc{animation:float 6s ease-in-out infinite}
.ph-m{position:relative;z-index:2;width:min(240px,48%)}
.ph-stage .rename{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3}
.ph-tabs{width:100%}
.ph-tabs button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.ph-panel{width:100%;margin-top:14px}
.wd{display:grid;gap:14px}
.wd-tabs{flex-wrap:wrap;width:fit-content}
.wd-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.wd-items.cols{display:flex;flex-wrap:wrap;gap:10px}
.wi{position:relative;aspect-ratio:1;border:1px solid var(--rule);border-radius:16px;background:var(--bg-2);overflow:hidden;transition:transform .25s var(--spring),border-color .25s,box-shadow .25s}
.wi:hover{transform:translateY(-2px);border-color:var(--rule-2);box-shadow:var(--lift-sm)}
.wi-m{position:absolute;inset:4% 6% 0}
.wi.on{border-color:var(--orange);background:#fff;box-shadow:0 0 0 3px var(--o-16)}
.wi.lock{opacity:.55}
.wi.lock .wi-m{filter:grayscale(1)}
.wi-lock{position:absolute;top:6px;inset-inline-end:6px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff}
.wd-sub{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-weight:600;font-size:.86rem;color:var(--text-2)}
.mini-sw{display:flex;gap:8px}
.msw{width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(10,10,10,.12) inset;transition:transform .25s var(--spring)}
.msw.on{transform:scale(1.15);box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px var(--orange)}

/* graduation */
.grad-pair{display:flex;align-items:flex-end;justify-content:center;margin-bottom:6px}
.grad-pair .grad-card{transform:rotate(-6deg);margin-inline-end:-40px;margin-bottom:30px}
html[dir=rtl] .grad-pair .grad-card{transform:rotate(6deg)}
.grad-m{position:relative;z-index:2;width:min(230px,46vw);animation:tixIn 1.1s .4s var(--spring) both}

@media (max-width:940px){
  .ob-stage{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .ob-stage .bubble{order:2;max-width:58%;font-size:.88rem}
  .ob-stage .bubble::after{left:-6px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}
  html[dir=rtl] .ob-stage .bubble::after{left:auto;right:-6px}
  .ob-m{order:1;width:120px}
  .ob-who{order:3}
  .meet-stage{min-height:0}
  .meet-card{display:none}
  .ph-stage{min-height:0}
}
@media (max-width:640px){
  .wl-tix{width:120px;bottom:-4%}
  .wl-bubble{display:none}
  .ph-card .cc{--w:190px}
  .ph-m{width:150px}
  .rw-m{width:120px}
  .rw-card .cc{--w:118px}
  .grad-pair .grad-card .cc{--w:190px}
  .grad-m{width:140px}
}

.cc-xs .cc-foot{display:none}
.cc-xs .cc-stats small{font-size:.7em}

/* ═════════════ ACADEMY PRO: deep content ═════════════ */
.lcard.k-brief,.lcard.k-lesson,.lcard.k-example,.lcard.k-gcc{min-height:0}
.brief-top{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.sm-chip{padding:5px 11px;font-size:.78rem;color:var(--text-2);background:var(--bg-2)}
.promise{position:relative;font-family:var(--f-d);font-weight:700;font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.35;margin:18px 0 18px;letter-spacing:-.02em}
html[lang=ar] .promise{letter-spacing:0;line-height:1.6}
.why{position:relative;padding:16px 18px;border-radius:18px;background:var(--o-04);border:1px solid var(--o-16)}
.why b{display:block;font-family:var(--f-d);font-size:.84rem;color:var(--orange-deep);margin-bottom:4px}
.why p{font-size:1.04rem;line-height:1.7}
.term{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-top:14px;padding:12px 16px;border-radius:16px;background:var(--ink);color:#fff}
.term span{font-size:.76rem;font-weight:600;color:var(--neon);width:100%}
.term b{font-family:var(--f-d);font-size:1.1rem}
.term small{color:rgba(255,255,255,.7)}
.md{position:relative;margin-top:14px;font-size:1.02rem;line-height:1.8;color:#2A2B30}
.md p{margin:0 0 12px}
.md h4{font-family:var(--f-d);font-size:1.18rem;font-weight:700;color:var(--text);margin:22px 0 8px;padding-top:16px;border-top:1px solid var(--rule)}
.md h4:first-child{margin-top:4px;padding-top:0;border-top:0}
.md ul,.md ol{margin:6px 0 14px;padding-inline-start:22px}
.md li{margin:6px 0;padding-inline-start:4px}
.md ul li::marker{color:var(--orange)}
.md ol li::marker{color:var(--orange);font-weight:700;font-family:var(--f-n)}
.md b{color:var(--text)}
.md-ok{font-style:normal;color:var(--neon-text);font-weight:700}
.md-formula{margin:16px 0;padding:18px 20px;border-radius:18px;background:linear-gradient(155deg,#1A1A1F,#0A0A0A);color:#fff;font-family:var(--f-d);font-weight:600;
  font-size:clamp(1rem,1.8vw,1.2rem);text-align:center;line-height:1.6;box-shadow:var(--lift-sm)}
.md-table{margin:12px 0 16px;overflow-x:auto;border:1px solid var(--rule);border-radius:16px}
.md-table table{width:100%;border-collapse:collapse;font-size:.92rem;line-height:1.5}
.md-table th,.md-table td{padding:10px 12px;text-align:start;border-bottom:1px solid var(--rule);vertical-align:top}
.md-table thead th{background:var(--bg-2);font-family:var(--f-d);font-weight:700;font-size:.84rem;color:var(--text-2);white-space:nowrap}
.md-table tbody tr:last-child td,.md-table tbody tr:last-child th{border-bottom:0}
.md-table tbody tr:nth-child(even){background:#FCFCFB}
.md-table td.num{font-family:var(--f-n);font-weight:700;color:var(--orange-deep);white-space:nowrap}
.md-data{margin:14px 0;padding:14px 16px;border-radius:16px;border:1px dashed var(--neon-deep);background:#F8FFE0}
.md-data b{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-d);font-size:.8rem;color:var(--neon-text)}
.md-data b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--neon-deep)}
.md-data p{margin:4px 0 2px;font-weight:600;color:var(--text)}
.md-data small{color:var(--text-3);font-size:.78rem}
.md-note{margin:12px 0;padding:12px 16px;border-radius:14px;background:var(--bg-2);font-size:.96rem;line-height:1.7}
.md-pre{position:relative;margin:12px 0;padding:16px 16px 14px;border-radius:14px;background:#0F0F12;color:#E9E9EC;font:500 .82rem/1.6 ui-monospace,Menlo,monospace;
  white-space:pre-wrap;word-break:break-word;text-align:left}
.md-copy{position:absolute;top:8px;right:8px;padding:4px 10px;border-radius:100px;background:rgba(255,255,255,.12);color:#fff;font:600 .72rem var(--f-d)}
.md-copy:hover{background:var(--orange)}
.k-gcc .md li{padding:8px 12px;border-radius:12px;list-style:none;margin-inline-start:-22px;transition:background .3s}
.k-gcc .md li.mine{background:var(--o-08);box-shadow:inset 3px 0 0 var(--orange)}
html[dir=rtl] .k-gcc .md li.mine{box-shadow:inset -3px 0 0 var(--orange)}
.wk-intro{margin-top:14px}
.ldots{flex-wrap:wrap}

/* assignment, criteria, earn, review, gate */
.assign{margin:0 0 18px;padding:18px 20px;border-radius:20px;background:#fff;border:1px solid var(--rule);box-shadow:var(--lift-sm)}
.assign > b,.crit > b,.rev-h{display:flex;align-items:center;gap:8px;font-family:var(--f-d);font-weight:700;font-size:1rem;color:var(--orange-deep)}
.assign .md{margin-top:6px;font-size:.98rem}
.task .md{margin-top:4px;font-size:.94rem}
.crit{display:grid;gap:2px;padding:16px 18px;border-radius:18px;background:var(--bg-2);border:1px solid var(--rule)}
.crit small{color:var(--text-3);font-size:.8rem}
.crit .check{margin-top:8px}
.crit-note{margin-top:10px;font-size:.78rem;color:var(--text-3)}
.earn{display:flex;gap:14px;align-items:flex-start;margin-top:18px;padding:18px 20px;border-radius:20px;color:#fff;
  background:radial-gradient(120% 80% at 100% 0%,rgba(239,94,30,.35),transparent 55%),linear-gradient(155deg,#1A1A1F,#0A0A0A)}
.earn-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(180deg,var(--orange-lift),var(--orange))}
.earn b{display:block;font-family:var(--f-d);color:var(--neon);margin-bottom:4px}
.earn p{color:rgba(255,255,255,.85);margin-bottom:12px;line-height:1.7}
.earn .b-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.earn .b-ink{background:#fff;--fg:var(--ink)}
.rev{margin-top:18px;padding:20px;border-radius:20px;background:#fff;border:1px solid var(--rule);box-shadow:var(--lift-sm);display:grid;gap:12px}
.rev-q{display:grid;gap:6px;font-weight:600;font-size:.94rem}
.rev-q textarea{width:100%;padding:10px 14px;border:1px solid var(--rule);border-radius:12px;background:var(--bg-2);resize:none;overflow:hidden;font-weight:400;line-height:1.6}
.rev-q textarea:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 3px var(--o-16);background:#fff}
.gate{margin-top:6px;padding:16px;border-radius:16px;background:var(--bg-2)}
.gate-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.gate-top b{display:flex;align-items:center;gap:8px;font-family:var(--f-d)}
.gate-score{font-family:var(--f-n);font-weight:600;color:var(--text-2)}
.gate-score i{font-style:normal;font-size:1.3rem;color:var(--orange)}
.gate .check em{margin-inline-start:auto;font-style:normal;font-family:var(--f-n);font-weight:700;color:var(--text-3)}
.gate-res{margin-top:10px;font-weight:700;color:var(--text-3)}
.gate-res.ok{color:var(--neon-text)}
.gate-res.ok::before{content:"✔ "}

/* track card */
.trk .trk-t{display:block;font-family:var(--f-d);font-size:1.25rem}
.trk small{color:var(--text-3)}
.trk-goal{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--o-04);border:1px solid var(--o-16)}
.trk-goal span{display:flex;align-items:center;gap:6px;font-family:var(--f-d);font-weight:700;font-size:.82rem;color:var(--orange-deep)}
.trk-goal p{font-size:.92rem;margin-top:4px}

/* toolkit */
.tk{max-width:980px;margin:0 auto;padding:30px 16px 90px}
.tk-head h1{font-size:clamp(2rem,4vw,3rem);margin:12px 0 8px}
.tk-head p{color:var(--text-2);max-width:62ch;margin-bottom:24px}
.tk-list{display:grid;gap:10px}
.tk-item{background:#fff;border:1px solid var(--rule);border-radius:20px;overflow:hidden;transition:box-shadow .3s}
.tk-item.open{box-shadow:var(--lift)}
.tk-btn{display:flex;align-items:center;gap:12px;width:100%;padding:16px 20px;text-align:start}
.tk-btn b{font-family:var(--f-d);font-size:1.05rem}
.tk-day{flex:none;padding:4px 10px;border-radius:100px;background:var(--o-08);color:var(--orange-deep);font-family:var(--f-n);font-weight:700;font-size:.76rem}
.tk-count{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:100px;background:#F8FFE0;color:var(--neon-text);font-family:var(--f-n);font-weight:700;font-size:.74rem}
.tk-chev{margin-inline-start:auto;color:var(--text-3);transition:transform .35s var(--spring)}
.tk-item.open .tk-chev{transform:rotate(90deg)}
html[dir=rtl] .tk-item.open .tk-chev{transform:rotate(-90deg)}
.tk-body{display:none;padding:0 20px 20px}
.tk-item.open .tk-body,.tk-sheet .tk-body{display:block}
.tk-form{position:relative}
.tk-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tk-f{display:grid;gap:6px;font-size:.86rem;font-weight:600;color:var(--text-2)}
.tk-f .field{padding:11px 14px;font-size:.95rem}
.tk-check{display:grid;gap:4px}
.tk-grid{overflow-x:auto;border:1px solid var(--rule);border-radius:14px}
.tk-grid table{border-collapse:collapse;min-width:100%;font-size:.86rem}
.tk-grid th,.tk-grid td{border-bottom:1px solid var(--rule);border-inline-end:1px solid var(--rule);padding:0;text-align:start}
.tk-grid thead th{padding:9px 10px;background:var(--bg-2);font-family:var(--f-d);font-size:.78rem;color:var(--text-2);white-space:nowrap}
.tk-grid .tk-rowh{padding:9px 10px;background:#FCFCFB;font-weight:600;white-space:nowrap}
.tk-grid input{width:100%;min-width:110px;border:0;background:none;padding:9px 10px;font-size:.88rem}
.tk-grid input:focus{outline:0;background:var(--o-04)}
.tk-form > .tk-f{margin-top:12px}
.tk-saved{position:absolute;top:-34px;inset-inline-end:0;display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:100px;background:#F8FFE0;color:var(--neon-text);
  font-size:.76rem;font-weight:700;opacity:0;transition:opacity .3s}
.tk-saved.on{opacity:1}
.tk-sheet{width:min(860px,100%);max-height:86vh;overflow:auto;margin:auto;background:#fff;border-radius:24px;box-shadow:var(--plate);transform:translateY(30px);transition:transform .5s var(--spring)}
.overlay.in .tk-sheet{transform:none}
.tk-sheet-top{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:16px 20px 30px;background:linear-gradient(#fff 70%,rgba(255,255,255,0))}
.tk-sheet-top b{font-family:var(--f-d);font-size:1.15rem}

/* certification on the graduation page */
.cert-info{grid-column:1/-1}
.ci-h{display:block;font-family:var(--f-d);margin:16px 0 8px}
.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.lvl{padding:14px;border-radius:16px;background:var(--bg-2)}
.lvl b{display:block;font-family:var(--f-d)}
.lvl small{color:var(--orange-deep);font-weight:600}
.lvl p{font-size:.88rem;color:var(--text-2);margin-top:4px}
.lvl.l1{background:var(--o-04)}
.lvl.l2{background:#F8FFE0}
@media (max-width:640px){
  .abar .tab span{font-size:.8rem}
  .abar .tab .ic{display:none}
  .tk-fields{grid-template-columns:1fr}
  .levels{grid-template-columns:1fr}
  .md-table{font-size:.86rem}
}

.tp-flip{position:absolute;z-index:4;top:14px;inset-inline-start:14px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:rgba(0,0,0,.5);color:#fff;backdrop-filter:blur(6px)}
.tp-flip:hover{background:rgba(0,0,0,.7)}

/* creator profile editor (passport) */
.prof-edit{display:grid;gap:4px}
.pe-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px}
.pe-head .card-eye{margin-bottom:4px}
.pe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:10px}
.pe-f{display:grid;gap:6px;font-size:.84rem;font-weight:600;color:var(--text-2)}
.pe-f select.field{appearance:none;-webkit-appearance:none;padding:12px 40px 12px 14px;font-size:.95rem;cursor:pointer;
  background:var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235C5F66' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center}
html[dir=rtl] .pe-f select.field{padding:12px 14px 12px 40px;background-position:left 14px center}
.custom-niche{margin-top:14px}
.tp-idle:has(.tp-help:not([hidden])) .tp-m{display:none}
.tp-file.up svg{transform:rotate(180deg)}
.tp-text{padding-top:58px}

/* ═══ Graduation: the certificate, presented (cert.js draws it) ═══ */
.gc-eye{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:100px;background:rgba(213,255,42,.12);border:1px solid rgba(213,255,42,.35);
  color:var(--neon);font-family:var(--f-d);font-weight:700;font-size:.82rem;letter-spacing:.02em}
.gcert{position:relative;display:grid;justify-items:center;gap:18px;margin:6px auto 44px;max-width:1080px}
.gc-stage{width:100%;perspective:1800px;padding:6px 0 10px}
.gc-frame{position:relative;width:100%;max-width:1040px;margin:0 auto;aspect-ratio:2480/1754;border-radius:14px;overflow:hidden;background:#FBF7EE;
  transform-style:preserve-3d;transition:transform .35s var(--ease-out),box-shadow .35s;will-change:transform;
  box-shadow:0 50px 120px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.1),0 0 90px -20px rgba(239,94,30,.35);
  animation:certIn 1.3s .25s var(--ease-out) both}
.gc-frame img{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:1;transition:opacity .6s}
.gc-frame.loading img{opacity:0}
.gc-frame.loading::after,.pc-frame.loading::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%) #F3EEE2;
  background-size:220% 100%;animation:certShim 1.2s linear infinite}
.gc-sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--gx,25%) var(--gy,15%),rgba(255,255,255,.75),transparent 42%),
    linear-gradient(115deg,transparent 35%,rgba(255,236,170,.55) 48%,rgba(213,255,42,.25) 52%,transparent 62%);
  background-size:100% 100%,260% 100%;animation:certSweep 2.6s 1.4s var(--ease) both}
@keyframes certIn{from{opacity:0;transform:translateY(60px) rotateX(22deg) scale(.92)}to{opacity:1;transform:none}}
@keyframes certSweep{from{background-position:0 0,120% 0}to{background-position:0 0,-60% 0}}
@keyframes certShim{to{background-position:-120% 0}}
.gc-bar{width:100%;max-width:1040px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.gc-id{display:grid;grid-template-columns:auto auto;align-items:center;gap:2px 14px}
.gc-id small{grid-column:1/-1;color:rgba(255,255,255,.55);font-size:.78rem;font-weight:600}
.gc-id b{font-family:var(--f-n);font-size:1.12rem;letter-spacing:.04em;color:#fff}
.gc-id a{display:inline-flex;align-items:center;gap:5px;color:var(--neon);font-weight:600;font-size:.86rem;text-decoration:none}
.gc-id a:hover{text-decoration:underline}
.gc-acts{display:flex;gap:10px;flex-wrap:wrap}
.b-li{--fg:#fff;background:#0A66C2;box-shadow:0 12px 26px -14px rgba(10,102,194,.8)}
.b-li:hover{background:#0958a8}
.b-li svg{color:#fff}

/* ═══ Graduation: next step (account → approval → coupons) ═══ */
.gnext{position:relative;max-width:1080px;margin:0 auto 40px;padding:28px clamp(18px,3vw,36px) 32px;border-radius:30px;background:#fff;color:var(--text);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.6);overflow:hidden}
.gnext::before{content:"";position:absolute;inset-inline-end:-120px;top:-140px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,var(--o-16),transparent 70%);pointer-events:none}
.gn-head .gc-eye{background:var(--o-08);border-color:var(--o-16);color:var(--orange-deep)}
.gn-steps{position:relative;list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.gn-steps li{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:4px 12px;align-items:center;padding:14px;border-radius:20px;border:1px solid var(--rule);background:#FBFBFA}
.gn-steps li div{display:grid;min-width:0}
.gn-steps li b{font-family:var(--f-d);font-size:.98rem;line-height:1.25}
.gn-steps li small{color:var(--text-3);font-size:.8rem;line-height:1.35}
.gn-steps li em{grid-column:1/-1;justify-self:start;font-style:normal;font-family:var(--f-d);font-weight:700;font-size:.72rem;padding:3px 10px;border-radius:100px;background:#F0F0EE;color:var(--text-3)}
.gn-dot{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-family:var(--f-n);font-weight:800;background:#fff;border:2px solid var(--rule-2);color:var(--text-3)}
.gn-steps li.done .gn-dot{background:var(--orange);border-color:var(--orange);color:#fff}
.gn-steps li.done em{background:var(--o-08);color:var(--orange-deep)}
.gn-steps li.now{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 18px 40px -18px rgba(0,0,0,.7);transform:translateY(-3px)}
.gn-steps li.now small{color:rgba(255,255,255,.65)}
.gn-steps li.now .gn-dot{background:var(--neon);border-color:var(--neon);color:var(--ink);animation:gnPulse 1.8s infinite}
.gn-steps li.now em{background:var(--neon);color:var(--ink)}
.gn-steps li:not(:last-child)::after{content:"";position:absolute;top:33px;inset-inline-end:-15px;width:16px;height:2px;background:var(--rule-2)}
.gn-steps li.done:not(:last-child)::after{background:var(--orange)}
@keyframes gnPulse{0%{box-shadow:0 0 0 0 rgba(213,255,42,.55)}70%{box-shadow:0 0 0 14px rgba(213,255,42,0)}100%{box-shadow:0 0 0 0 rgba(213,255,42,0)}}
.gn-panel{position:relative;margin-top:24px;padding-top:24px;border-top:1px solid var(--rule);animation:fadeUp .5s var(--ease-out) both}
.gn-panel h2{font-size:clamp(1.4rem,2.6vw,1.9rem);letter-spacing:-.02em;margin-bottom:8px}
.gn-panel p{color:var(--text-2);max-width:66ch}
.gn-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.gn-note{display:flex;align-items:center;gap:7px;margin-top:14px;font-size:.86rem;color:var(--text-3)}
.gn-note svg{color:var(--neon-text);flex:none}
.gn-wait,.gn-sent{display:flex;gap:18px;align-items:flex-start}
.gn-pulse{flex:none;width:18px;height:18px;margin-top:10px;border-radius:50%;background:#F5A524;box-shadow:0 0 0 0 rgba(245,165,36,.5);animation:gnAmber 1.8s infinite}
@keyframes gnAmber{70%{box-shadow:0 0 0 14px rgba(245,165,36,0)}}
.gn-big{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--neon);color:var(--ink);box-shadow:0 0 0 8px rgba(213,255,42,.25)}
.gn-sent .chips{margin-top:12px}
.gn-pick{margin-top:18px;padding:18px;border-radius:20px;background:#FAFAF8;border:1px solid var(--rule)}
.gn-lab{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.gn-lab b{font-family:var(--f-d)}
.gn-lab small{color:var(--text-3)}
.gn-pick .chip svg{opacity:.8}
.gn-for{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:.84rem;color:var(--text-3)}
.gn-panel .form-err{margin-top:10px}
.b.busy{opacity:.7;pointer-events:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* passport: the certificate thumbnail */
.pc-frame{position:relative;display:block;aspect-ratio:2480/1754;border-radius:12px;overflow:hidden;background:#FBF7EE;
  box-shadow:0 16px 40px -20px rgba(0,0,0,.45),0 0 0 1px var(--rule);transition:transform .3s var(--ease-out)}
.pc-frame:hover{transform:translateY(-3px)}
.pc-frame img{position:absolute;inset:0;width:100%;height:100%;display:block}
.pc-frame.loading img{opacity:0}

/* ═══ public verify page ═══ */
.vfy{min-height:100vh;display:grid;align-content:center;justify-items:center;gap:26px;padding:40px 16px;background:radial-gradient(circle at 50% 0,var(--o-08),transparent 60%),var(--bg)}
.vfy-logo{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-family:var(--f-d);font-weight:600}
.vfy-logo img{height:34px;width:auto}
.vfy-logo span{padding-inline-start:10px;border-inline-start:1px solid var(--rule)}
.vfy-card{width:100%;max-width:720px;display:grid;justify-items:center;gap:12px;text-align:center;padding:34px clamp(18px,4vw,40px);border-radius:28px;background:#fff;border:1px solid var(--rule);box-shadow:0 30px 70px -40px rgba(0,0,0,.4)}
.vfy-card h1{font-size:clamp(1.8rem,4vw,2.6rem)}
.vfy-card p{color:var(--text-2)}
.vfy-badge{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--neon);color:var(--ink);box-shadow:0 0 0 10px rgba(213,255,42,.25)}
.vfy-badge.no{background:#FDE8E6;color:var(--red);box-shadow:0 0 0 10px rgba(229,72,77,.08)}
.vfy-dl{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 6px;text-align:start}
.vfy-dl div{padding:12px 14px;border-radius:14px;background:#FAFAF8;border:1px solid var(--rule)}
.vfy-dl dt{font-size:.78rem;color:var(--text-3);font-weight:600}
.vfy-dl dd{margin:2px 0 0;font-family:var(--f-d);font-weight:700}
.vfy-card .pc-frame{width:100%;margin-top:8px}
.vfy-card code{font-family:var(--f-n);background:#F3F3F1;padding:6px 12px;border-radius:10px}
.vfy-spin{width:40px;height:40px;border-radius:50%;border:4px solid var(--rule);border-top-color:var(--orange);animation:spin .8s linear infinite}

@media (max-width:860px){
  .gn-steps{grid-template-columns:1fr 1fr}
  .gn-steps li:not(:last-child)::after{display:none}
}
@media (max-width:560px){
  .gn-steps{grid-template-columns:1fr;gap:8px}
  .gn-steps li{grid-template-columns:auto 1fr auto;grid-template-rows:auto;padding:12px}
  .gn-steps li em{grid-column:auto;justify-self:end}
  .gn-steps li.now{transform:none}
  .gc-bar{justify-content:center;text-align:center}
  .gc-id{justify-content:center}
  .gc-acts{justify-content:center}
  .gc-acts .b{flex:1 1 100%}
  .gn-wait,.gn-sent{flex-direction:column}
  .vfy-dl{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.gc-frame,.gc-sheen,.gn-panel{animation:none}.gn-steps li.now .gn-dot,.gn-pulse{animation:none}}
.grad .grad-grid{max-width:1080px;margin-inline:auto}
.gc-frame{cursor:zoom-in}
.gc-zoom{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;background:rgba(5,5,6,.92);overflow:auto;cursor:zoom-out;animation:fadeUp .25s var(--ease-out)}
.gc-zoom img{width:min(1600px,100%);height:auto;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.gc-zoom .icon-btn{position:fixed;top:14px;inset-inline-end:14px;background:#fff}
@media (max-width:700px) and (orientation:portrait){.gc-zoom img{width:auto;max-width:none;height:min(92vw,560px);transform:rotate(90deg)}}