@font-face{font-family:ReplayWM;src:url(fonts/replay-wordmark.woff2) format("woff2");font-weight:800;font-style:italic;font-display:swap}
@font-face{font-family:Plex;src:url(fonts/plex-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url(fonts/plex-semibold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Plex;src:url(fonts/plex-bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{--bg:#0a0e14;--bg2:#111823;--card:#151e2b;--line:#223042;--tx:#eef3f8;--mut:#93a3b8;--neon:#00e676;--neon2:#19c3ff;--warn:#ffc048;--bad:#ff5d6c;--r:18px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--tx);font-family:Plex,-apple-system,"SF Arabic","Noto Sans Arabic",Tahoma,sans-serif;font-size:16px;line-height:1.65}
body{min-height:100vh;background:radial-gradient(120% 60% at 80% -10%,#0f3b2a 0%,transparent 55%),radial-gradient(90% 50% at 0% 0%,#0b2440 0%,transparent 60%),var(--bg);background-attachment:fixed}
button,input{font:inherit;color:inherit}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:rgba(10,14,20,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.05)}
.brand{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;font-size:18px;font-weight:700;cursor:pointer}
.brand img{width:32px;height:32px;border-radius:9px}
.brand b{color:var(--neon)}
.pill{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:6px 14px;font-size:14px;cursor:pointer}
main{max-width:520px;margin:0 auto;padding:18px 16px calc(40px + env(safe-area-inset-bottom))}
.screen{display:none;animation:in .25s ease}
.screen.active{display:block}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tag{display:inline-block;font-size:13px;font-weight:600;color:var(--neon);background:rgba(0,230,118,.1);border:1px solid rgba(0,230,118,.25);border-radius:99px;padding:3px 12px}
.tag.warn{color:var(--warn);background:rgba(255,192,72,.1);border-color:rgba(255,192,72,.3)}
h1{font-size:30px;line-height:1.35;margin:14px 0 10px;font-weight:700}
h1 em{font-style:normal;color:var(--neon)}
h2{font-size:22px;line-height:1.45;margin:8px 0 12px}
h3{font-size:17px;margin:20px 0 8px;color:#cfe0f2}
.lead{color:var(--mut);margin:0 0 18px;font-size:16.5px}
.fine{color:var(--mut);font-size:13px;text-align:center;margin:16px 0}
.card{width:100%;display:flex;align-items:center;gap:14px;text-align:right;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 12px;cursor:pointer}
.card .ic{font-size:30px;width:52px;height:52px;display:grid;place-items:center;background:var(--bg2);border-radius:14px;flex:none}
.card b{display:block;font-size:18px}
.card small{display:block;color:var(--mut);font-size:13.5px;line-height:1.5}
.card .arrow{margin-right:auto;font-size:26px;color:var(--mut)}
.primary-card{border-color:rgba(0,230,118,.55);background:linear-gradient(135deg,rgba(0,230,118,.16),rgba(25,195,255,.06)),var(--card);box-shadow:0 0 0 1px rgba(0,230,118,.15),0 10px 30px -10px rgba(0,230,118,.35)}
.primary-card .arrow{color:var(--neon)}
.how{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.how li{display:flex;gap:12px;align-items:center;color:#c9d6e4;font-size:15px}
.how b{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--bg2);border:1px solid var(--line);color:var(--neon)}
.seg{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:4px;margin-bottom:12px}
.seg button{flex:1;border:0;background:none;padding:9px;border-radius:10px;font-weight:600;color:var(--mut);cursor:pointer}
.seg button.on{background:var(--card);color:var(--tx);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 0 0 1px var(--line)}
[data-for]{display:none}
body.m-match [data-for=match],body.m-goal [data-for=goal]{display:block}
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:170px;border:2px dashed #2e4157;border-radius:var(--r);background:rgba(21,30,43,.6);text-align:center;padding:18px;cursor:pointer;overflow:hidden}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop-ic{font-size:30px}
.drop small{color:var(--mut)}
.drop video{display:none;width:100%;max-height:220px;border-radius:12px;margin-top:10px;background:#000}
.drop.has{border-style:solid;border-color:rgba(0,230,118,.6)}
.drop.has video{display:block}
.field{display:block;margin:14px 0}
.field label,.field span{display:block;font-weight:600;margin-bottom:6px}
.field small{color:var(--mut);font-weight:400}
.field input[type=text]{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:11px 12px;outline:none}
.field input[type=text]:focus{border-color:var(--neon)}
.file-mini{position:relative;display:flex;align-items:center;justify-content:space-between;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.file-mini span{margin:0}
.file-mini input{position:absolute;inset:0;opacity:0}
.file-mini em{font-style:normal;color:var(--neon2);font-size:14px}
.tips{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:14px 0}
.tips summary{font-weight:600;cursor:pointer}
.tips ul{margin:8px 0 0;padding-inline-start:18px;color:#c3d0de;font-size:14.5px}
.tips li{margin:4px 0}
.btn{display:block;width:100%;border:0;border-radius:14px;padding:14px;font-size:17px;font-weight:700;cursor:pointer;margin-top:12px}
.btn.primary{background:linear-gradient(135deg,var(--neon),#00c2a8);color:#03130b}
.btn.primary:disabled{opacity:.4;cursor:default}
.btn.ghost{background:var(--card);border:1px solid var(--line);color:var(--tx)}
.err{color:var(--bad);text-align:center;font-size:14.5px}
.spin{display:none;place-items:center;place-items:center;height:140px;margin-top:20px}
.ball{width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 8%,var(--neon) 9% 100%);box-shadow:0 0 40px rgba(0,230,118,.55);animation:bounce .9s ease-in-out infinite alternate}
@keyframes bounce{from{transform:translateY(-18px) rotate(0)}to{transform:translateY(14px) rotate(160deg)}}
#processing h2{text-align:center}
.steps{list-style:none;padding:0;margin:16px 0;display:grid;gap:8px}
.steps li{padding:10px 14px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);color:var(--mut)}
.steps li.now{color:var(--tx);border-color:rgba(0,230,118,.5)}
.steps li.done{color:var(--neon)}
.steps li.done::before{content:"✓ "}
.bar{height:6px;background:var(--bg2);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--neon2),var(--neon));transition:width .4s}
.demo-banner{background:rgba(255,192,72,.1);border:1px solid rgba(255,192,72,.4);color:#ffe2a8;border-radius:14px;padding:10px 12px;font-size:14px;margin-bottom:14px}
.km{margin:0 0 12px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#000}
.km canvas{display:block;max-width:100%;max-height:62vh;width:auto;height:auto;margin:0 auto}
.km figcaption{font-size:13px;color:var(--mut);padding:8px 12px;background:var(--card)}
.sum{font-size:21px}
.nums{list-style:none;counter-reset:n;padding:0;margin:0;display:grid;gap:10px}
.nums li{counter-increment:n;position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 52px 12px 14px}
.nums li::before{content:counter(n,arabic-indic);position:absolute;right:12px;top:12px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,93,108,.15);color:var(--bad);font-weight:700}
#m-pr li::before{background:rgba(0,230,118,.15);color:var(--neon)}
.hl{color:var(--neon)}
.bul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.bul li{position:relative;background:rgba(0,230,118,.06);border:1px solid rgba(0,230,118,.25);border-radius:14px;padding:11px 36px 11px 14px}
.bul li::before{content:"•";position:absolute;right:14px;top:8px;color:var(--neon);font-size:22px;line-height:1.3}
.sec{margin-bottom:6px}
.sec p{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0}
.tac{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0}
.tac dt{color:var(--mut);font-size:14px}
.tac dd{margin:0;font-weight:600}
.note{color:var(--mut);font-size:14px;border-top:1px solid var(--line);padding-top:12px;margin-top:18px}
.conf{font-size:13px;color:var(--mut);margin:4px 0}
.invalid{background:rgba(255,93,108,.1);border:1px solid rgba(255,93,108,.4);border-radius:14px;padding:12px 14px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row .btn{margin-top:14px;font-size:15.5px}
.plans{display:grid;gap:10px;margin:8px 0 8px}
.plan{display:grid;grid-template-columns:1fr auto;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.plan small{grid-column:1/-1;color:var(--mut);font-size:13.5px}
.plan .price{font-size:26px;font-weight:700;color:var(--neon)}
.plan .price small{display:inline;font-size:14px;color:var(--mut)}
.plan.hot{border-color:rgba(0,230,118,.6);box-shadow:0 0 0 1px rgba(0,230,118,.2)}

.chain .tm{display:inline-block;background:rgba(25,195,255,.14);color:var(--neon2);font-weight:700;font-size:.82em;border-radius:8px;padding:1px 7px;margin-left:4px}
.chain b{font-weight:600}
.chain .wr{display:inline-block;margin-top:4px;color:#ffb3ba;font-size:.95em}
.stop p{border-color:rgba(0,230,118,.45)!important;background:rgba(0,230,118,.07)!important}
.stop p.st{font-weight:700;color:var(--neon);margin-bottom:8px}

/* ===== v3 polish ===== */
#splash{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:radial-gradient(80% 60% at 50% 40%,#0f3b2a 0%,#0a0e14 70%);animation:spAuto .5s 2.4s forwards}
#splash.out{opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s .55s}
@keyframes spAuto{to{opacity:0;visibility:hidden}}
.sp-in{display:grid;justify-items:center;gap:14px;animation:spPop .6s cubic-bezier(.2,1.4,.4,1) both}
.sp-in img{width:108px;height:108px;border-radius:28px;box-shadow:0 0 60px rgba(0,230,118,.45),0 0 0 1px rgba(0,230,118,.35)}
.sp-in b{font-size:26px}.sp-in b i{font-style:normal;color:var(--neon)}
.sp-bar{width:120px;height:4px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}
.sp-bar i{display:block;height:100%;width:40%;background:linear-gradient(90deg,var(--neon2),var(--neon));animation:spRun 1s ease-in-out infinite}
@keyframes spPop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes spRun{from{transform:translateX(160%)}to{transform:translateX(-260%)}}
.bgfx-old{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bgfx i{position:absolute;width:46vmax;height:46vmax;border-radius:50%;filter:blur(60px);opacity:.22;animation:drift 18s ease-in-out infinite alternate}
.bgfx i:nth-child(1){background:#00e676;top:-18vmax;right:-14vmax}
.bgfx i:nth-child(2){background:#19c3ff;bottom:-22vmax;left:-16vmax;animation-duration:22s;opacity:.16}
.bgfx i:nth-child(3){background:#7c4dff;top:40%;left:30%;width:28vmax;height:28vmax;animation-duration:26s;opacity:.1}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-6vmax,5vmax) scale(1.15)}}
.screen.active{animation:scrIn .42s cubic-bezier(.2,.8,.2,1)}
@keyframes scrIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.hero>*{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
.hero>*:nth-child(2){animation-delay:.08s}.hero>*:nth-child(3){animation-delay:.16s}
#home>.card{animation:rise .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:.24s}
#home>.card+.card{animation-delay:.32s}
#home>.preview-card{animation:rise .6s .42s cubic-bezier(.2,.8,.2,1) both}
.rise{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.tag.glow{box-shadow:0 0 18px rgba(0,230,118,.25)}
.shine{background:linear-gradient(90deg,var(--neon) 0%,#b9ffd9 40%,var(--neon2) 60%,var(--neon) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:shine 4s linear infinite}
@keyframes shine{to{background-position:-250% 0}}
.card,.btn,.pill,.fbb,.chips button{transition:transform .15s ease,box-shadow .25s ease,border-color .25s ease,filter .2s}
.card:active,.btn:active,.pill:active,.fbb:active,.chips button:active{transform:scale(.97)}
@media (hover:hover){.card:hover{border-color:rgba(0,230,118,.5);box-shadow:0 8px 30px -12px rgba(0,230,118,.45)}.btn.primary:hover{filter:brightness(1.08)}}
.pulse{position:relative}
.pulse::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 0 rgba(0,230,118,.55);animation:ring 2.4s ease-out infinite;pointer-events:none}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(0,230,118,.5)}70%,100%{box-shadow:0 0 0 14px rgba(0,230,118,0)}}
.btn.primary:not(:disabled){box-shadow:0 8px 26px -10px rgba(0,230,118,.7)}
#go:not(:disabled){animation:goPulse 2s ease-in-out infinite}
@keyframes goPulse{50%{box-shadow:0 0 0 6px rgba(0,230,118,.14),0 8px 30px -8px rgba(0,230,118,.8)}}
.preview-card{margin:6px 0 4px;border-radius:var(--r);padding:14px;background:linear-gradient(160deg,rgba(25,195,255,.08),rgba(0,230,118,.05)),var(--card);border:1px solid rgba(25,195,255,.25)}
.pc-head{font-size:13px;color:var(--mut);display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pc-head .dot{width:8px;height:8px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.3}}
.pc-chain{list-style:none;margin:0;padding:0 14px 0 0;border-right:2px solid rgba(25,195,255,.35);display:grid;gap:7px;font-size:14.5px}
.pc-chain li{position:relative;opacity:0;animation:rise .5s both}
.pc-chain li:nth-child(1){animation-delay:.7s}.pc-chain li:nth-child(2){animation-delay:.95s}.pc-chain li:nth-child(3){animation-delay:1.2s}
.pc-chain li::before{content:"";position:absolute;right:-20px;top:9px;width:10px;height:10px;border-radius:50%;background:var(--neon2);box-shadow:0 0 8px var(--neon2)}
.tm{display:inline-block;background:rgba(25,195,255,.14);color:var(--neon2);font-weight:700;font-size:.82em;border-radius:8px;padding:1px 7px;margin-left:4px}
.pc-stop{margin-top:10px;font-size:14px;background:rgba(0,230,118,.08);border:1px solid rgba(0,230,118,.35);border-radius:12px;padding:8px 10px;opacity:0;animation:rise .5s 1.5s both}
.pc-stop b{color:var(--neon)}
.how-t{margin-top:22px}
.how{margin-top:8px}
.how b svg{width:17px;height:17px}
.how b{background:rgba(0,230,118,.08)!important;border-color:rgba(0,230,118,.3)!important;box-shadow:0 0 14px rgba(0,230,118,.15)}
.pitch{position:relative;margin:18px auto 8px;max-width:320px;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#0f2a1d,#0b1f16);border:1px solid rgba(0,230,118,.3);box-shadow:0 0 40px -10px rgba(0,230,118,.45)}
.pitch svg{display:block;width:100%;height:auto}
.pitch svg rect,.pitch svg line,.pitch svg circle:not(.pl){fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.5}
.pl{animation:bob 1.6s ease-in-out infinite alternate}
.pl.a{fill:#ff5d6c}.pl.b{fill:#19c3ff;animation-delay:.4s}
@keyframes bob{to{transform:translateY(-5px)}}
.pass{fill:none;stroke:var(--neon);stroke-width:2.5;stroke-dasharray:6 7;stroke-linecap:round;animation:dash 1.2s linear infinite;filter:drop-shadow(0 0 4px var(--neon))}
@keyframes dash{to{stroke-dashoffset:-26}}
.scan{position:absolute;top:0;bottom:0;width:30%;background:linear-gradient(90deg,transparent,rgba(0,230,118,.28),transparent);animation:scan 1.8s ease-in-out infinite}
@keyframes scan{from{right:-30%}to{right:100%}}
.steps li{transition:all .3s}
.steps li.now{box-shadow:0 0 18px -6px rgba(0,230,118,.6);animation:nowGlow 1.2s ease-in-out infinite alternate}
@keyframes nowGlow{to{border-color:rgba(0,230,118,.9)}}
.bar i{box-shadow:0 0 12px var(--neon)}
.sum{background:linear-gradient(90deg,#fff,#bfe9ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.chain li .wr::before{content:"✗ ";color:var(--bad);font-weight:700}
.roles{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;margin:0;background:rgba(0,230,118,.06);border:1px solid rgba(0,230,118,.35);border-radius:14px;padding:12px 14px}
.roles dt{font-weight:700;color:var(--neon);white-space:nowrap}
.roles dd{margin:0}
.stop{position:relative}
.km{box-shadow:0 0 0 1px rgba(255,59,82,.25),0 12px 34px -14px rgba(255,59,82,.5)}
.fb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:18px 0 0;padding:12px 14px;border-radius:14px;background:var(--bg2);border:1px solid var(--line)}
.fb>span{font-weight:600;margin-left:auto}
.fbb{width:46px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-size:20px;cursor:pointer}
.fbb.on{border-color:var(--neon);box-shadow:0 0 14px rgba(0,230,118,.35);transform:scale(1.08)}
.fb-more{flex-basis:100%;display:flex;gap:8px}
.fb-more textarea,.chat input{flex:1;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 11px;color:var(--tx);font:inherit;font-size:15px;outline:none;resize:none}
.fb-more textarea:focus,.chat input:focus{border-color:var(--neon)}
.btn.sm{width:auto;margin:0;padding:9px 16px;font-size:15px}
#fb-ok{flex-basis:100%;color:var(--neon)}
.chat{margin-top:16px;padding:14px;border-radius:var(--r);background:linear-gradient(160deg,rgba(25,195,255,.07),transparent),var(--card);border:1px solid rgba(25,195,255,.25)}
.chat h3{margin:0 0 10px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chips button{border:1px solid rgba(25,195,255,.35);background:rgba(25,195,255,.08);color:#cdeeff;border-radius:99px;padding:5px 12px;font-size:13.5px;cursor:pointer}
.msgs{display:grid;gap:8px;margin-bottom:10px}
.msg{max-width:88%;padding:9px 12px;border-radius:14px;font-size:15px;white-space:pre-wrap;animation:rise .3s both}
.msg.user{justify-self:start;background:linear-gradient(135deg,var(--neon),#00c2a8);color:#03130b;border-bottom-right-radius:4px}
.msg.coach{justify-self:end;background:var(--bg2);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.typing{color:var(--mut);animation:blink 1s infinite}
#ask{display:flex;gap:8px}
#chat-left{display:block;margin:8px 0 0;text-align:right}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.pc-chain li,.pc-stop{opacity:1}}

[hidden]{display:none!important}

.tac.pi dd{font-weight:500}
.tac.pi dt{color:var(--neon);font-weight:700;font-size:14px}

#ask input{min-width:0;width:100%}
#ask .btn{flex:none}
.fb-more textarea{min-width:0}
html,body{overflow-x:hidden}
.bul li,.nums li,.tac dd,.roles dd{overflow-wrap:anywhere}

/* ===== v8: night stadium background + glowing pitch lines ===== */
html{background:#05090f!important}body{background:transparent!important}
.stadium{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#05090f}
.stadium .photo{position:absolute;inset:-12px;background:#05090f url(stadium.webp) center top/cover no-repeat;transform-origin:50% 20%;top:30px;animation:camDrift 30s ease-in-out infinite alternate}
.stadium .glow{position:absolute;top:4vh;width:60vw;max-width:520px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(220,235,255,.55) 0%,rgba(160,200,255,.18) 35%,transparent 65%);animation:flood 6s ease-in-out infinite alternate;mix-blend-mode:screen}
.stadium .glow.l{left:-22vw}.stadium .glow.r{right:-22vw;animation-delay:-3s}
@keyframes camDrift{from{transform:scale(1.04)}to{transform:scale(1.10) translateY(-1%)}}
.stadium .haze{position:absolute;inset:0;background:radial-gradient(70% 40% at 50% 62%,rgba(0,230,118,.10),transparent 70%),radial-gradient(60% 35% at 50% 8%,rgba(160,200,255,.10),transparent 70%)}
.stadium .lines{position:absolute;left:50%;top:50%;width:min(150vw,900px);height:min(150vh,1500px);transform:translate(-50%,-50%) perspective(900px) rotateX(38deg);
  opacity:.2;filter:drop-shadow(0 0 4px #4dffb0) drop-shadow(0 0 12px rgba(0,230,118,.55));animation:pitchDrift 22s ease-in-out infinite alternate, pitchPulse 5s ease-in-out infinite}
.stadium .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,14,0) 0%,rgba(4,8,14,.22) 25%,rgba(4,8,14,.45) 50%,rgba(4,8,14,.58) 75%,rgba(4,8,14,.72) 100%)}
@keyframes flood{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.08)}}
@keyframes pitchDrift{from{transform:translate(-50%,-50%) perspective(900px) rotateX(38deg) translateY(-2%) rotateZ(-1.5deg)}to{transform:translate(-50%,-50%) perspective(900px) rotateX(38deg) translateY(3%) rotateZ(1.5deg)}}
@keyframes pitchPulse{0%,100%{opacity:.28}50%{opacity:.5}}
.hero .sub{margin:-4px 0 10px;font-size:18px;font-weight:700;color:#cfe9ff;letter-spacing:.2px;animation:rise .6s cubic-bezier(.2,.8,.2,1) .12s both;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.hero h1{text-shadow:0 3px 24px rgba(0,0,0,.55)}
.hero>*:nth-child(4){animation-delay:.22s}
.card,.preview-card,.how li,.sec,.chat,.fb,.plan,.drop,.field input,.tips{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media (prefers-reduced-motion:reduce){.stadium .lines,.stadium .glow,.stadium .photo{animation:none!important}.stadium .lines{opacity:.22}}
:root{--card:rgba(17,26,39,.80)}
.top{background:rgba(5,9,15,.35)!important}

.errcode{display:inline-block;margin-top:6px;font-size:11px;color:#8a8f98;opacity:.8;font-family:ui-monospace,Menlo,monospace;letter-spacing:.5px}

.score{font-weight:700;margin:.2em 0 .8em;opacity:.9}

/* ===== v11 landing + report ===== */
:root{--vio:#7c5cff;--grad:linear-gradient(90deg,#2bff88,#19c3ff 55%,#7c5cff)}
body{background:radial-gradient(110% 55% at 85% -10%,#0f3b2a 0%,transparent 55%),radial-gradient(90% 50% at 0% 10%,#1d1450 0%,transparent 60%),var(--bg);background-attachment:fixed}
.bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bgfx .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(#000,transparent 70%);-webkit-mask-image:linear-gradient(#000,transparent 70%)}
.bgfx .g1,.bgfx .g2{position:absolute;width:340px;height:340px;border-radius:50%;filter:blur(80px);opacity:.35;animation:drift 14s ease-in-out infinite alternate}
.bgfx .g1{background:#00e676;top:-120px;left:-80px}.bgfx .g2{background:#7c5cff;top:240px;right:-140px;animation-delay:-6s}
@keyframes drift{to{transform:translate(40px,60px)}}
.brand img{border-radius:0;width:30px;height:30px}
.nav{display:flex;gap:8px;align-items:center}
.pill.cta{background:var(--grad);color:#05110b;border:0;font-weight:700}
.hc{font-style:normal;background:var(--neon);color:#04110a;border-radius:99px;padding:0 7px;font-size:12px;margin-right:4px;font-weight:700}
.hero{padding:10px 0 6px;text-align:center}
.hero .lead{max-width:420px;margin:0 auto 18px}
h1.big{font-size:38px;line-height:1.25;margin:16px 0 14px;letter-spacing:-.5px}
h1.big span,h1.big em{display:block}
h1.big em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn.xl{font-size:18px;padding:16px;border-radius:16px}
.hero .btn{margin-bottom:10px}
.micro{color:var(--mut);font-size:13px;margin:4px 0 0}
.mini-rep{display:block;width:100%;text-align:right;margin:22px 0 18px;background:linear-gradient(160deg,#172234,#0f1620);border:1px solid #2a3b52;border-radius:22px;padding:16px;cursor:pointer;box-shadow:0 20px 50px -20px rgba(43,255,136,.25),inset 0 1px 0 rgba(255,255,255,.06);transform:rotate(-1.2deg)}
.mr-top{display:flex;justify-content:space-between;font-size:13px;color:var(--mut)}
.mr-lab{font-weight:600;color:#bfe9ff}.mr-score{font-weight:700;color:var(--tx);letter-spacing:1px}
.mr-body{display:flex;gap:14px;align-items:center;margin:12px 0}
.mr-txt{flex:1}.mr-txt small{color:var(--neon);font-size:12.5px;font-weight:600}.mr-txt b{display:block;font-size:17px;line-height:1.4;margin:2px 0 8px}
.mr-bars{display:grid;gap:5px}.mr-bars i{display:block;height:6px;border-radius:9px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.mr-bars i:after{content:"";position:absolute;top:0;bottom:0;right:0;width:var(--w);background:var(--grad);border-radius:9px}
.mr-moments{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mm{font-size:12px;border-radius:8px;padding:2px 8px;font-weight:600}.mm.good{background:rgba(0,230,118,.14);color:var(--neon)}.mm.bad{background:rgba(255,93,108,.14);color:var(--bad)}
.mr-open{margin-right:auto;font-size:13px;color:var(--neon2);font-weight:600}
.ring{--v:0;flex:none;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;align-content:center;background:conic-gradient(#2bff88 calc(var(--v)*1%),rgba(255,255,255,.08) 0);position:relative}
.ring:before{content:"";position:absolute;inset:7px;border-radius:50%;background:#101824}
.ring b,.ring small{position:relative;line-height:1}.ring b{font-size:24px}.ring small{font-size:11px;color:var(--mut);margin-top:3px}
.ring.lo{background:conic-gradient(var(--warn) calc(var(--v)*1%),rgba(255,255,255,.08) 0)}
.ring.lg{width:96px;height:96px}.ring.lg b{font-size:30px}
.ring.s{width:44px;height:44px}.ring.s:before{inset:5px}.ring.s b{font-size:14px}
.games{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;margin:0 -16px 8px;padding-inline:16px;scrollbar-width:none}
.games::-webkit-scrollbar{display:none}
.gm{flex:none;border:1px solid var(--line);background:rgba(21,30,43,.7);border-radius:12px;padding:8px 12px;font-size:14px;color:var(--mut);white-space:nowrap}
.gm small{display:block;font-size:11px;opacity:.8}.gm.on{color:var(--tx);border-color:rgba(0,230,118,.5);background:rgba(0,230,118,.08)}.gm.on small{color:var(--neon)}
.sec-t{font-size:24px;margin:34px 0 14px}.sec-t small{font-size:14px;color:var(--mut);font-weight:400;margin-right:6px}
.steps4{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.steps4 li{display:flex;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px}
.steps4 li>i{font-style:normal;flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-weight:700;background:var(--grad);color:#05110b}
.steps4 b{display:block;font-size:17px}.steps4 span{color:var(--mut);font-size:14.5px;line-height:1.55}
.mock{margin-top:10px;background:#0c131c;border:1px solid #1f2c3d;border-radius:12px;padding:10px 12px;font-size:13.5px;display:flex;align-items:center;gap:10px}
.mock.rec b{margin-right:auto}.dotr{width:10px;height:10px;border-radius:50%;background:var(--bad);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
.mock.up span:first-child{color:var(--mut)}.pb{flex:1;height:7px;background:rgba(255,255,255,.08);border-radius:9px;overflow:hidden}.pb i{display:block;height:100%;background:var(--grad)}
.mock .lines{flex:1;display:grid;gap:6px}.mock .lines i{height:6px;border-radius:9px;background:rgba(255,255,255,.1)}.mock .lines i:nth-child(1){width:90%}.mock .lines i:nth-child(2){width:70%}.mock .lines i:nth-child(3){width:50%}
.mock.ms b{color:var(--neon)}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ft{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px}.ft b{display:block;font-size:15px;margin-bottom:4px}.ft span{color:var(--mut);font-size:13px;line-height:1.5;display:block}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0;text-align:center}
.stats div{background:rgba(21,30,43,.6);border:1px solid var(--line);border-radius:14px;padding:12px 6px}.stats b{display:block;font-size:20px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.stats small{color:var(--mut);font-size:12.5px}
.sample-cta{background:linear-gradient(135deg,rgba(124,92,255,.18),rgba(25,195,255,.1));border:1px solid rgba(124,92,255,.4);border-radius:20px;padding:18px;text-align:center}
.sample-cta b{display:block;font-size:19px}.sample-cta span{display:block;color:var(--mut);font-size:14px;margin:6px 0 12px}
.lead.sm{font-size:15px;margin-bottom:12px}
.plans3{display:grid;gap:12px}
.plans3 .plan{position:relative;display:block;text-align:right;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px}
.plans3 .plan.hot{border-color:transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;border:2px solid transparent}
.plans3 .badge{position:absolute;top:-11px;left:16px;background:var(--grad);color:#05110b;font-size:12px;font-weight:700;border-radius:99px;padding:2px 10px}
.plans3 .plan>b{font-size:18px}.plans3 .price{font-size:32px;font-weight:700;margin:2px 0}.plans3 .price small{font-size:14px;color:var(--mut);font-weight:400}
.plans3 .pn{display:block;color:var(--neon2);font-size:13px}
.plans3 ul{margin:10px 0 12px;padding:0 18px 0 0;color:#cdd8e5;font-size:14.5px}.plans3 li{margin:3px 0}
.cmp-wrap{overflow-x:auto;margin:14px 0 0}
.cmp{width:100%;border-collapse:collapse;font-size:14px}.cmp th,.cmp td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:right}.cmp td{text-align:center;color:#cdd8e5}.cmp tr:first-child th{color:var(--neon);text-align:center}.cmp tr:first-child th:first-child{text-align:right}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:0 0 8px;padding:0 14px}
.faq summary{cursor:pointer;padding:13px 0;font-weight:600;list-style:none}.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";float:left;color:var(--neon);font-size:20px;line-height:1}.faq details[open] summary:after{content:"–"}
.faq p{margin:0 0 14px;color:var(--mut);font-size:14.5px}
.final{text-align:center;margin:34px 0 10px;padding:22px 16px;border-radius:22px;background:radial-gradient(80% 100% at 50% 0%,rgba(43,255,136,.15),transparent),var(--card);border:1px solid var(--line)}
.final b{display:block;font-size:21px;margin:10px 0 14px}
.foot{text-align:center;color:var(--mut);font-size:13px;margin:22px 0 0}.foot a,.lnk{color:var(--neon2);text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.gpick{display:flex;gap:6px;overflow-x:auto;margin:-4px 0 14px;scrollbar-width:none}.gpick span{flex:none;font-size:13px;border:1px solid var(--line);border-radius:99px;padding:5px 12px;color:var(--mut);opacity:.7}.gpick span.on{opacity:1;color:var(--neon);border-color:rgba(0,230,118,.5);background:rgba(0,230,118,.08)}.gpick small{font-size:11px}
/* report */
.rep-head{background:linear-gradient(160deg,#172234,#0f1620);border:1px solid #2a3b52;border-radius:22px;padding:16px;margin-bottom:12px}
.rh-meta{display:flex;justify-content:space-between;color:var(--mut);font-size:13px}.rh-game{color:#bfe9ff;font-weight:600}
.rh-main{display:flex;gap:14px;align-items:center;margin-top:12px}
.rh-word{font-size:13px;font-weight:700;color:var(--neon);letter-spacing:.3px}
.rep-head .sum{margin:2px 0 4px;font-size:20px}.rep-head .score{margin:0}
.assign{background:linear-gradient(135deg,rgba(43,255,136,.14),rgba(25,195,255,.08));border:1px solid rgba(43,255,136,.45);border-radius:18px;padding:14px 16px;margin-bottom:12px}
.assign small{color:var(--neon);font-weight:700;font-size:13px}.assign b{display:block;font-size:19px;margin:4px 0}.assign p{margin:0 0 8px;color:#d7e3ef}.as-foot{font-size:12.5px;color:var(--mut)}
.rats{display:grid;gap:12px}.rat .rt{display:flex;justify-content:space-between;font-size:15px}.rat .rt span{font-weight:700;color:var(--neon)}
.rat.lo .rt span{color:var(--warn)}.rat .rb{height:8px;background:rgba(255,255,255,.07);border-radius:9px;overflow:hidden;margin:5px 0}.rat .rb i{display:block;height:100%;background:var(--grad);border-radius:9px;transition:width .8s}
.rat.lo .rb i{background:linear-gradient(90deg,#ffc048,#ff8a5c)}.rat small{color:var(--mut);font-size:13px;line-height:1.5;display:block}
#m-km li.good{border-right:3px solid var(--neon);padding-right:8px}#m-km li.bad{border-right:3px solid var(--bad);padding-right:8px}
.bul.good li::marker{color:var(--neon)}
.drills{display:grid;gap:10px}.drill{background:#0f1620;border:1px solid var(--line);border-radius:14px;padding:12px}
.drill .dh{display:flex;justify-content:space-between;align-items:center}.drill .min{font-size:12.5px;color:var(--neon2);background:rgba(25,195,255,.1);border-radius:99px;padding:2px 9px}
.drill p{margin:6px 0;font-size:14.5px;color:#d7e3ef}.drill small{color:var(--mut);font-size:12.5px}
.demo-banner.sample{background:rgba(124,92,255,.14);border-color:rgba(124,92,255,.45);color:#e4dcff}
.hist{display:grid;gap:10px}.hrow{display:flex;align-items:center;gap:12px;width:100%;text-align:right;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;cursor:pointer}
.hrow .ht{flex:1;min-width:0}.hrow .ht b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hrow .ht small{color:var(--mut);font-size:12.5px}.hrow .arrow{color:var(--mut);font-size:22px}
.empty{text-align:center;background:var(--card);border:1px dashed var(--line);border-radius:18px;padding:22px 16px}.empty b{display:block;font-size:18px}.empty span{display:block;color:var(--mut);margin:6px 0 14px}
#hist-clear{margin-top:16px}

#m-km .wr{color:#cfe0f2}#m-km li .wr::before{content:"💡 ";color:inherit}#m-km li.bad .wr{color:#ffc9ce}
.drill p{background:none!important;border:0!important;padding:0!important}

/* ===== v13 UX: upload steps, sticky action, skeleton, clips ===== */
.ustep{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--mut);margin:16px 2px 8px}
.ustep span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(0,230,118,.14);color:var(--neon);font-size:13px}
.drop.has{border-style:solid;border-color:rgba(0,230,118,.45);min-height:0;padding:0}
.drop.has video{display:block;width:100%;max-height:230px;object-fit:cover;border-radius:calc(var(--r) - 2px)}
.drop.has .drop-ic{display:none}
.drop.has b,.drop.has #drop-s{position:absolute;right:12px;z-index:2;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.drop.has b{bottom:30px;font-size:14px}.drop.has #drop-s{bottom:8px;color:#dfe8f2}
.drop.has::after{content:"";position:absolute;inset:auto 0 0 0;height:70px;background:linear-gradient(transparent,rgba(0,0,0,.75));pointer-events:none}
.dur-b{position:absolute;top:10px;left:10px;z-index:2;background:rgba(0,0,0,.65);color:#fff;font-size:13px;font-weight:700;border-radius:8px;padding:2px 8px}
.chg{position:absolute;top:10px;right:10px;z-index:2;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:12.5px;border-radius:99px;padding:3px 10px}
.cta-bar{position:sticky;bottom:0;z-index:20;margin:14px -16px 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(rgba(10,14,20,0),rgba(10,14,20,.92) 30%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cta-bar .btn{margin-top:0;min-height:54px}
.cta-hint{display:block;text-align:center;color:var(--mut);font-size:12.5px;margin-top:4px}
.btn,.pill,.seg button,.gpick span{min-height:44px}
.skel{margin:18px auto 6px;max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;grid-template-columns:56px 1fr;gap:8px 12px;align-items:center}
.skel i{display:block;border-radius:8px;height:12px;background:linear-gradient(90deg,#1b2635 0,#26354a 40%,#1b2635 80%);background-size:300% 100%;animation:sk 1.4s infinite linear}
.skel .sk-ring{width:56px;height:56px;border-radius:50%;grid-row:span 2}
.skel .w80{width:80%}.skel .w60{width:60%}
.sk-row{grid-column:1/-1;display:flex;gap:8px}.sk-row i{flex:1;height:54px;border-radius:10px}
@keyframes sk{from{background-position:100% 0}to{background-position:-100% 0}}
.h-sub{font-weight:400;color:var(--mut);font-size:12.5px;margin-right:6px}
.cp{background:#05080c;border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:10px}
.cp-stage{position:relative;background:#000;aspect-ratio:16/9}
.cp-stage video{width:100%;height:100%;display:block;object-fit:contain}
.cp-big{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;border:0;background:rgba(0,230,118,.9);color:#03130b;font-size:24px;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.cp-badge{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.7);color:#fff;font-weight:700;font-size:13px;border-radius:8px;padding:2px 8px}
.cp-tl{position:relative;height:26px;margin:0 12px;cursor:pointer}
.cp-tl::before{content:"";position:absolute;left:0;right:0;top:12px;height:3px;border-radius:3px;background:#263447}
.cp-pos{position:absolute;top:7px;width:3px;height:13px;margin-left:-1px;background:#fff;border-radius:2px;left:0;pointer-events:none}
.cp-tl .mk{position:absolute;top:6px;width:14px;height:14px;margin-left:-7px;border-radius:50%;border:2px solid #05080c;background:var(--neon2);padding:0;cursor:pointer}
.cp-tl .mk.good{background:var(--neon)}.cp-tl .mk.bad{background:var(--bad)}
.cp-tl .mk.on{transform:scale(1.35);box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.cp-cap{padding:4px 14px 8px;border-right:3px solid var(--neon2);margin:0 12px 8px}
.cp-cap.good{border-color:var(--neon)}.cp-cap.bad{border-color:var(--bad)}
.cp-cap b{display:block;font-size:15px}.cp-cap small{display:block;color:#cfe9da;font-size:13.5px;margin-top:2px}
.cp-ctl{display:grid;grid-template-columns:1fr auto auto 1fr;gap:6px;padding:0 10px 10px}
.cp-ctl button{min-height:42px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--tx);font:inherit;font-size:14px;padding:0 10px;cursor:pointer}
.cp-ctl button.on{border-color:var(--neon);color:var(--neon)}
.clips{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 10px;margin:0 -2px;-webkit-overflow-scrolling:touch}
.clip{flex:0 0 46%;max-width:210px;scroll-snap-align:start;text-align:right;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0;overflow:hidden;color:var(--tx);font:inherit;cursor:pointer;transition:transform .15s,border-color .15s}
.clip:active{transform:scale(.97)}
.clip.on{border-color:var(--neon2);box-shadow:0 0 0 2px rgba(25,195,255,.25)}
.clip-th{position:relative;display:block;aspect-ratio:16/9;background:linear-gradient(135deg,#132131,#0c1520)}
.clip-th canvas{width:100%;height:100%;display:block;opacity:0;transition:opacity .3s}
.clip-th.ok canvas{opacity:1}
.clip-t{position:absolute;bottom:6px;left:6px;background:rgba(0,0,0,.75);color:#fff;font-weight:700;font-size:12px;border-radius:6px;padding:1px 6px;direction:ltr}
.clip-pl{position:absolute;inset:0;margin:auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff;font-size:13px}
.clip.good .clip-th{box-shadow:inset 0 -3px 0 var(--neon)}.clip.bad .clip-th{box-shadow:inset 0 -3px 0 var(--bad)}
.clip-tx{display:block;padding:8px 10px 10px}
.clip-tx small{display:block;font-size:11.5px;font-weight:700;color:var(--neon2)}
.clip.good .clip-tx small{color:var(--neon)}.clip.bad .clip-tx small{color:var(--bad)}
.clip-tx b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;font-weight:600;line-height:1.5}
.clips.nothumb .clip-th{display:none}
.cp-none{color:var(--mut);font-size:13.5px;margin:0 0 8px}

#upload.active .cta-bar{position:fixed;left:0;right:0;bottom:0;margin:0 auto;max-width:520px}
#upload{padding-bottom:96px}
.cp-badge{top:auto;bottom:8px}
.dur-b{top:auto;bottom:10px}

/* ===== v14: motion landing — hero background video, live analysis screen, autoplay demos ===== */
.hv{position:relative;margin:-18px calc(50% - 50vw) 6px;padding:40px 16px 34px;min-height:min(88svh,760px);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;overflow:hidden;isolation:isolate}
.hv-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;background:#05090f;opacity:0;transition:opacity .9s ease}
.hv-v.on{opacity:1}
.hv-v[poster]{opacity:1}
.hv-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,9,15,.5) 0%,rgba(5,9,15,.08) 26%,rgba(5,9,15,.1) 42%,rgba(5,9,15,.58) 64%,rgba(5,9,15,.94) 88%,#05090f 100%),radial-gradient(90% 55% at 50% 78%,rgba(0,0,0,.3),transparent 70%)}
.hv .hero{position:relative;max-width:520px;width:100%}
.hv .hero h1,.hv .hero .lead{text-shadow:0 2px 18px rgba(0,0,0,.75)}
.hv .hero .lead{color:#dfe8f2}
.hv-down{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:22px;color:rgba(255,255,255,.55);animation:hvb 1.8s ease-in-out infinite}
@keyframes hvb{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}
.btn.primary.pulse{box-shadow:0 0 0 1px rgba(0,230,118,.35),0 10px 34px -6px rgba(0,230,118,.55)}
.btn.primary.pulse:hover{box-shadow:0 0 0 1px rgba(0,230,118,.5),0 12px 44px -4px rgba(0,230,118,.75)}
.scr{margin:4px 0 18px;perspective:900px}
.scr-in{position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:#0a121b;border:1px solid #2a3b52;box-shadow:0 30px 70px -28px rgba(0,230,118,.35),0 0 0 6px rgba(255,255,255,.03),inset 0 1px 0 rgba(255,255,255,.08);transform:rotateX(6deg);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.scr.in .scr-in{transform:none}
.scr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.1) contrast(1.05)}
.scr-in::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),linear-gradient(180deg,rgba(5,9,15,.25),transparent 30%,transparent 65%,rgba(5,9,15,.75))}
.scr-in::before{content:"";position:absolute;left:0;right:0;height:30%;top:-30%;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(0,230,118,.12),transparent);animation:scan 3.6s linear infinite}
@keyframes scan{to{top:100%}}
.scr-ov{position:absolute;inset:0;width:100%;height:100%;z-index:1;fill:none;stroke-linecap:round}
.scr-ov .br{stroke:rgba(255,255,255,.55);stroke-width:3}
.scr-ov .rg{stroke:#00e676;stroke-width:3;transform-origin:300px 190px;animation:rg 2.2s ease-out infinite}
.scr-ov .ar,.scr-ov .ah{stroke:#ffc048;stroke-width:4;stroke-dasharray:260;stroke-dashoffset:260;animation:draw 3.3s ease-in-out infinite}
.scr-ov .ah{stroke-dasharray:40;stroke-dashoffset:40;animation-name:drawh}
@keyframes rg{0%{transform:scale(.6);opacity:0}25%{opacity:1}100%{transform:scale(1.35);opacity:0}}
@keyframes draw{0%,10%{stroke-dashoffset:260}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes drawh{0%,50%{stroke-dashoffset:40}62%,85%{stroke-dashoffset:0}100%{opacity:0}}
.scr-live{position:absolute;top:12px;right:12px;z-index:3;font-size:12px;font-weight:700;background:rgba(5,9,15,.7);border:1px solid rgba(255,93,108,.5);border-radius:99px;padding:3px 10px;display:flex;align-items:center;gap:6px}
.scr-live i{width:8px;height:8px;border-radius:50%;background:#ff5d6c;box-shadow:0 0 10px #ff5d6c;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.scr-cap{position:absolute;right:12px;left:12px;bottom:26px;z-index:3;display:flex;gap:8px;align-items:center;font-size:14px;font-weight:600}
.scr-cap .scr-t{background:#00e676;color:#04110a;border-radius:8px;padding:1px 8px;font-size:12.5px}
.scr-cap .scr-txt{background:rgba(5,9,15,.72);border-radius:8px;padding:2px 10px;transition:opacity .35s}
.scr-cap.bad .scr-t{background:#ff5d6c;color:#fff}
.scr-tl{position:absolute;right:12px;left:12px;bottom:12px;height:4px;border-radius:4px;background:rgba(255,255,255,.18);z-index:3}
.scr-tl .mk{position:absolute;top:-3px;width:10px;height:10px;border-radius:50%;margin-right:-5px;background:#00e676}
.scr-tl .mk.bad{background:#ff5d6c}
.scr-ph{position:absolute;top:0;right:0;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#19c3ff,#00e676);animation:ph 9s linear infinite}
@keyframes ph{to{width:100%}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 22px}
.stats>div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 8px;text-align:center}
.stats b{display:block;font-size:26px;line-height:1.2;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.stats small{display:block;font-size:12px;color:var(--mut);line-height:1.45;margin-top:2px}
.phones{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;margin:0 -16px;padding-inline:16px;scrollbar-width:none}
.phones::-webkit-scrollbar{display:none}
.phones figure{margin:0;flex:0 0 44%;max-width:200px;scroll-snap-align:center;text-align:center}
.phones .ph{position:relative;aspect-ratio:390/844;border-radius:26px;overflow:hidden;background:#0a121b;border:5px solid #1b2636;box-shadow:0 22px 44px -22px rgba(0,230,118,.4),inset 0 0 0 1px rgba(255,255,255,.06)}
.phones .ph::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:34%;height:12px;border-radius:10px;background:#05090f;z-index:2}
.phones video{width:100%;height:100%;object-fit:cover;display:block}
.phones figcaption{margin-top:8px;font-size:14px;font-weight:600}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (min-width:700px){.hv{min-height:min(80vh,720px)}.phones{justify-content:center;overflow:visible}.phones figure{flex:0 0 31%}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.scr-in{transform:none}.scr-in::before,.scr-ov .rg,.scr-ov .ar,.scr-ov .ah,.scr-ph,.hv-down,.scr-live i{animation:none}.scr-ov .ar,.scr-ov .ah{stroke-dashoffset:0}}

/* ===== v16: Replay wordmark + sharper hero ===== */
.bn{font-family:ReplayWM,Plex,system-ui,sans-serif;font-style:italic;font-weight:800;letter-spacing:.6px;unicode-bidi:isolate}
.brand .bn{font-size:25px;line-height:1;background:linear-gradient(90deg,#2bff88,#19c3ff);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 3px 0 1px}
.sp-in b.bn{font-size:44px;background:linear-gradient(90deg,#2bff88,#19c3ff);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 4px}
.foot .bn{font-size:17px;color:var(--neon)}
.hv-v{filter:saturate(1.06) contrast(1.03)}

/* ===== v17: Replay to Win (R2W) + 2 paid plans ===== */
.brand .bn-s{display:none}
@media (max-width:430px){.brand .bn-full{display:none}.brand .bn-s{display:inline}}
.brand .bn{white-space:nowrap}
.sp-in b.bn{white-space:nowrap;font-size:40px}
.plans3{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
@media (min-width:720px){.plans3{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}}
.cmp-wrap{max-width:760px;margin-inline:auto}

/* ===== v18: full-page motion background, accounts, legal ===== */
.pagebg{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden;background:#05090f}
.pagebg .hv-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:1}
.pg-dim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,9,15,.55),rgba(5,9,15,.82) 60%,rgba(5,9,15,.9));opacity:.18;transition:opacity .25s linear}
.pagebg::after{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(120% 70% at 50% 0%,transparent 40%,rgba(5,9,15,.55) 100%)}
.bgfx{z-index:-2}
.bgfx .grid{mask-image:none;-webkit-mask-image:none;opacity:.6;animation:gridpan 40s linear infinite}
@keyframes gridpan{to{background-position:0 34px,34px 0}}
.bgfx .g1,.bgfx .g2,.bgfx .g3{opacity:.16;will-change:transform}
.bgfx .g3{position:absolute;width:300px;height:300px;border-radius:50%;filter:blur(80px);background:#19c3ff;bottom:-80px;left:20%;opacity:.12;animation:drift 20s ease-in-out infinite alternate;animation-delay:-9s}
#fx{position:absolute;inset:0;width:100%;height:100%}
.hv{background:transparent}
.hv-shade{background:linear-gradient(180deg,rgba(5,9,15,.45) 0%,rgba(5,9,15,.05) 30%,rgba(5,9,15,.15) 50%,rgba(5,9,15,.55) 78%,rgba(5,9,15,.0) 100%)!important}
@media (prefers-reduced-motion:reduce){.bgfx .grid,.bgfx .g1,.bgfx .g2,.bgfx .g3{animation:none}#fx{display:none}}
.authbox{max-width:420px;margin:0 auto;text-align:center}
.authbox>img{display:block;margin:6px auto 4px}
.authbox form{text-align:right;margin-top:12px}
.auth-seg{margin:14px 0 4px}
.authbox .field input,.legal .field input{width:100%;box-sizing:border-box;background:var(--bg2);color:var(--tx);border:1px solid var(--line);border-radius:12px;padding:11px 12px;outline:none;font:inherit}
.authbox .field input:focus,.legal .field input:focus,.legal textarea:focus{border-color:var(--neon)}
.hint{display:block;color:var(--mut);font-size:12.5px;margin-top:4px}
.err{background:rgba(255,82,82,.12);border:1px solid rgba(255,82,82,.4);color:#ffb4b4;border-radius:12px;padding:9px 12px;font-size:14px}
.paymsg{background:rgba(25,195,255,.1);border:1px solid rgba(25,195,255,.35);color:#cfeeff;border-radius:12px;padding:10px 12px;font-size:14.5px;text-align:center;max-width:760px;margin:12px auto}
.paymsg.ok{background:rgba(0,230,118,.1);border-color:rgba(0,230,118,.4);color:#c9ffe2}
.acct-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:6px 16px;margin:10px 0 14px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.acct-row{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}.acct-row:last-child{border-bottom:0}
.acct-row span{color:var(--mut)}.acct-row b{font-weight:700;overflow:hidden;text-overflow:ellipsis}
#account .btn{margin-bottom:8px}
.owner-box{display:grid;gap:6px;border:1px dashed rgba(255,193,7,.5);border-radius:14px;padding:12px;margin:14px 0;font-size:14px}
.owner-box span{color:var(--mut)}
.plans3 .plan .btn{display:block;width:100%;margin-top:6px}
.foot a{color:inherit}
.legal{max-width:760px;margin:0 auto;padding:8px 0 40px}
.legal h1{font-size:28px;margin:10px 0 4px}.legal h2{font-size:19px;margin:22px 0 6px;color:var(--neon)}
.legal p,.legal li{color:#d6dee8;font-size:15.5px}.legal .upd{color:var(--mut);font-size:13px}
.legal .ph-note{background:rgba(255,193,7,.1);border:1px dashed rgba(255,193,7,.5);border-radius:10px;padding:2px 6px}
.legal .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;margin:12px 0}

/* ===== v19: full-match sources + illustrated guides ===== */
.srcseg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:rgba(21,30,43,.7);border:1px solid var(--line);border-radius:16px;padding:5px;margin:4px 0 14px}
.srcseg button{background:none;border:0;color:var(--mut);font:inherit;font-size:14px;font-weight:700;padding:9px 4px;border-radius:12px;line-height:1.25;cursor:pointer}
.srcseg button small{display:block;font-size:11.5px;font-weight:500}
.srcseg button.on{background:var(--grad);color:#05110b}.srcseg button.on small{color:#05110b}
.u-link,.u-clips{display:none}
body.src-link .u-one,body.src-clips .u-one{display:none!important}
body.src-link .u-link,body.src-clips .u-clips{display:block}
.u-link .field input{width:100%;box-sizing:border-box;background:var(--bg2);color:var(--tx);border:1px solid var(--line);border-radius:12px;padding:12px;font:inherit;outline:none}
.u-link .field input:focus{border-color:var(--neon)}
.drop.small{min-height:auto;padding:16px}
.guide{margin:16px 0 8px}
.guide .g-t{display:block;font-size:15px;margin-bottom:8px}
.g-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;margin:0 -16px;padding-inline:16px;scrollbar-width:none}
.g-row::-webkit-scrollbar{display:none}
.gstep{flex:0 0 78%;max-width:300px;margin:0;scroll-snap-align:center;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.gstep svg{display:block;width:100%;height:auto}
.gstep figcaption{display:flex;gap:9px;align-items:flex-start;padding:10px 12px 12px;font-size:14px;line-height:1.55;color:#dbe6f1}
.gstep figcaption i{flex:0 0 24px;height:24px;border-radius:50%;background:var(--grad);color:#05110b;font-style:normal;font-weight:800;display:grid;place-items:center;font-size:13px}
.g-dots{display:flex;justify-content:center;gap:6px}.g-dots i{width:6px;height:6px;border-radius:50%;background:#2a3a50;transition:background .2s,width .2s}.g-dots i.on{background:var(--neon);width:16px;border-radius:3px}
@media (min-width:720px){.g-row{margin:0;padding-inline:2px}.gstep{flex-basis:46%}}
.cliplist{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.cliplist li{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px;touch-action:pan-y}
.cliplist li.drag{opacity:.5}.cliplist li.over{border-color:var(--neon)}
.cliplist .n{flex:0 0 26px;height:26px;border-radius:50%;background:var(--grad);color:#05110b;font-weight:800;display:grid;place-items:center;font-size:13px}
.cliplist video{width:72px;height:44px;object-fit:cover;border-radius:8px;background:#05090f;flex:0 0 72px}
.cliplist .meta{flex:1;min-width:0;font-size:13px}.cliplist .meta b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}.cliplist .meta small{color:var(--mut)}
.cliplist .ord{display:flex;gap:4px}.cliplist .ord button{width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:#1b2636;color:var(--tx);font-size:15px;cursor:pointer}
.cliplist .ord button:disabled{opacity:.35}
.cliplist .grip{cursor:grab;color:var(--mut);font-size:18px;padding:0 2px}

/* ===== v20: upload wizard, back buttons, guide prev/next, account fixes ===== */
.backbar{display:inline-flex;align-items:center;gap:6px;background:rgba(21,30,43,.72);border:1px solid var(--line);color:var(--tx);font:inherit;font-size:14.5px;font-weight:700;border-radius:99px;padding:8px 16px;min-height:40px;margin:2px 0 10px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.backbar:active{transform:scale(.97)}
body.ws-2 #upload>.backbar,body.ws-3 #upload>.backbar{display:none}
.wiz{list-style:none;display:flex;gap:6px;margin:0 0 14px;padding:0;counter-reset:none}
.wiz li{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:700;color:var(--mut);padding:7px 4px;border-radius:12px;background:rgba(21,30,43,.6);border:1px solid var(--line);position:relative}
.wiz li b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#1b2636;color:var(--mut);font-size:12px}
.wiz li.on{color:var(--tx);border-color:rgba(43,255,136,.55)}
.wiz li.on b{background:var(--grad);color:#05110b}
.wiz li.done b{background:rgba(0,230,118,.18);color:var(--neon)}
.ws{display:none}
body:not(.ws-2):not(.ws-3) #upload .ws1,body.ws-2 #upload .ws2,body.ws-3 #upload .ws3{display:block}
.srcseg.srcpick{display:flex;flex-direction:column;gap:10px;background:none;border:0;padding:0;margin:8px 0 16px}
.srcseg.srcpick button{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:right;padding:14px;border-radius:16px;background:var(--card);border:1px solid var(--line);color:var(--tx);min-height:76px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.srcseg.srcpick .sp-ic{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(43,255,136,.1);font-size:22px}
.srcseg.srcpick b{font-size:16px}
.srcseg.srcpick b em{font-style:normal;font-weight:500;color:var(--mut);font-size:13px}
.srcseg.srcpick small{display:block;font-size:13px;color:var(--mut);font-weight:500;margin-top:2px}
.srcseg.srcpick button.on{background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;border:2px solid transparent;color:var(--tx)}
.srcseg.srcpick button.on small{color:var(--mut)}
.srcseg.srcpick button.on b em{color:var(--mut)}
.usum{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:6px 14px 10px;margin:8px 0 6px}
.us-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.us-row span{color:var(--mut);flex:none}
.us-row b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.us-chg{margin-top:8px;font-weight:700;font-size:14px}
.cta-row{display:flex;gap:8px}
.cta-row .btn{margin-top:0;min-height:54px}
.cta-row #u-back{flex:0 0 32%;font-size:16px}
.cta-row #go{flex:1}
.g-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.g-nav button{background:rgba(21,30,43,.8);border:1px solid var(--line);color:var(--tx);font:inherit;font-size:14px;font-weight:700;border-radius:99px;padding:8px 16px;min-height:42px;cursor:pointer}
.g-nav .g-next{background:var(--grad);color:#05110b;border:0}
.g-nav button:disabled{opacity:.35;cursor:default}
.g-nav .g-num{font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums}
#ac-sub{margin:4px 0 10px}
.acct-row.go{cursor:pointer}
.acct-row.go b{color:var(--neon2)}
a.backbar{text-decoration:none}
#ac-sub{width:100%}

/* v21: analysis keeps running after the page is closed — banner, upload warning, processing note, «سجلّي» status */
.ready-bar{position:sticky;top:64px;z-index:40;display:flex;align-items:center;gap:10px;margin:8px auto 0;max-width:720px;width:calc(100% - 24px);padding:10px 12px;border-radius:16px;background:rgba(10,30,22,.92);border:1px solid rgba(43,255,136,.45);box-shadow:0 8px 30px rgba(0,0,0,.45),0 0 0 1px rgba(43,255,136,.08) inset;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ready-bar[hidden]{display:none}
.ready-bar .rb-ic{width:34px;height:34px;flex:none;border-radius:50%;background:radial-gradient(circle,#2bff88 0 30%,transparent 32%),rgba(43,255,136,.15);box-shadow:0 0 18px rgba(43,255,136,.5)}
.ready-bar.running{background:rgba(12,22,36,.92);border-color:rgba(25,195,255,.45)}
.ready-bar.running .rb-ic{background:conic-gradient(#19c3ff 0 25%,transparent 0) ,rgba(25,195,255,.15);animation:rbspin 1.1s linear infinite;box-shadow:0 0 14px rgba(25,195,255,.4)}
@keyframes rbspin{to{transform:rotate(360deg)}}
.ready-bar .rb-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.ready-bar .rb-tx b{font-size:15px}
.ready-bar .rb-tx small{color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ready-bar .btn.sm{padding:9px 14px;font-size:13.5px;white-space:nowrap}
.ready-bar .rb-x{background:none;border:0;color:var(--mut);font-size:16px;padding:6px;cursor:pointer}
.upwarn{margin:14px 0 4px;padding:11px 13px;border-radius:14px;background:rgba(255,192,72,.10);border:1px solid rgba(255,192,72,.38);color:var(--tx);font-size:13.5px;line-height:1.7}
.upwarn b{color:var(--warn)}
body.ws-1 .upwarn{display:none}
#processing .p-fine{font-size:14px;line-height:1.8;color:var(--tx);max-width:420px;margin:16px auto 8px}
.p-done{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:10px;text-align:center;margin:10px auto 0;max-width:420px;padding:12px 14px;border-radius:16px;background:rgba(43,255,136,.08);border:1px solid rgba(43,255,136,.35)}
.p-done[hidden]{display:none}
.p-done b{color:var(--neon);font-size:15px}
.p-done span{color:var(--tx);font-size:13.5px;line-height:1.7}
.p-push{display:block;margin:10px auto 0}
.p-push[hidden]{display:none}
#hist-jobs{margin-bottom:10px}
#hist-jobs[hidden]{display:none}
.hrow.job .pill-st{flex:none;font-size:12px;padding:4px 9px;border-radius:999px;border:1px solid var(--line);color:var(--mut)}
.hrow.job .pill-st.running{color:#19c3ff;border-color:rgba(25,195,255,.45)}
.hrow.job .pill-st.done{color:var(--neon);border-color:rgba(43,255,136,.5)}
.hrow.job .pill-st.error{color:var(--bad);border-color:rgba(255,93,108,.45)}
.hrow.job.error{cursor:default;opacity:.85}
.hrow.job.running .ring{animation:rbpulse 1.6s ease-in-out infinite}
@keyframes rbpulse{50%{opacity:.55}}
#processing.up-done .skel{display:none}
body[data-scr="history"] .ready-bar,body[data-scr="result"] .ready-bar,body[data-scr="processing"] .ready-bar,body[data-scr="upload"] .ready-bar{display:none}
.hrow.job .st-running{color:#19c3ff}.hrow.job .st-done{color:var(--neon)}.hrow.job .st-error{color:var(--bad)}

/* ===== v22: pricing 29 / 39→69 / 399, card checkout, renewal bar, «رحلتي», leaderboard ===== */
.plans3 .price s.was{font-size:20px;color:var(--mut);font-weight:600;margin-inline-start:4px;text-decoration-thickness:2px}
.plans3 .badge.save{left:auto;right:16px;background:rgba(255,192,72,.16);color:var(--warn);border:1px solid rgba(255,192,72,.5)}
.plans3 .plan.p-year .badge.save{position:absolute;top:-11px}
.ready-bar.renew{border-color:rgba(255,192,72,.55);background:rgba(36,28,8,.94)}
.co-sum{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 16px;margin-bottom:6px}
.co-price b{font-size:30px;color:var(--neon)}.co-price span{color:var(--mut);font-weight:600}
.co-sum p{margin:6px 0 0;color:#cfe0f2;font-size:14.5px}.co-sum .co-test{color:var(--warn);font-size:13px}
.inp{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:11px 12px;outline:none;color:var(--tx);font-size:16px}
.inp:focus{border-color:var(--neon2)}
.co-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.co-row .field{margin:6px 0}
#checkout .btn{width:100%}#co-prepaid{margin-top:6px}
.jr-note{margin-top:-4px}
.jr-rate{background:linear-gradient(135deg,rgba(43,255,136,.12),rgba(25,195,255,.08));border:1px solid rgba(43,255,136,.4);border-radius:20px;padding:14px 16px;margin:8px 0 12px}
.rt-big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.rt-big small{color:var(--neon);font-weight:700;font-size:14px;width:100%}
.rt-big b{font-size:64px;line-height:1;font-weight:700;letter-spacing:-1px}
.rt-d{font-weight:700;font-size:18px;color:var(--mut)}.rt-d.up{color:var(--neon)}.rt-d.down{color:var(--bad)}
.rt-subs{margin-top:10px;display:grid;gap:6px}.rs{display:grid;grid-template-columns:92px 1fr 28px;align-items:center;gap:8px;font-size:14px}
.rs span{color:#cfe0f2}.rs i{display:block;height:8px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}.rs u{display:block;height:100%;background:var(--grad,linear-gradient(90deg,#2bff88,#19c3ff));border-radius:9px}
.rs b{text-align:left}.rt-note{display:block;color:var(--mut);font-size:12.5px;margin-top:8px}
.jr-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}.chip{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:6px 12px;font-weight:600;font-size:14px}
.chip.lock{color:var(--mut);border-style:dashed}
.jr-sec{margin:16px 0}.jr-sec h3{font-size:18px;margin:0 0 8px}.jr-sec .h-sub,.jr-res .h-sub{color:var(--mut);font-weight:400;font-size:13px}
.jr-p{color:var(--mut);margin:4px 0}
.jr-goal{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:10px}
.jg-h{display:flex;gap:10px;align-items:center}.jg-h .ic{font-size:24px}.jg-h b{display:block;font-size:17px}.jg-h small{color:var(--mut);font-size:13px}
.jg-m{margin:8px 0 4px;color:#cfe0f2;font-size:14.5px}
.jg-n{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:14.5px}.jg-n .tg{color:var(--neon);font-weight:700}
.jg-tip{margin:6px 0;color:var(--mut);font-size:13.5px}
.jg-dots{display:flex;align-items:center;gap:6px}.jg-dots i{width:12px;height:12px;border-radius:50%;border:2px solid var(--neon);display:inline-block}.jg-dots i.on{background:var(--neon)}.jg-dots small{color:var(--mut);font-size:12.5px;margin-inline-start:4px}
.jr-goal.locked{border-style:dashed}
.jr-lock{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;background:rgba(255,255,255,.03);border:1px dashed var(--line);border-radius:14px;padding:12px;margin-top:8px}
.jr-lock .lk{font-size:22px}.jr-lock b{font-size:14.5px}
.jr-cmp{background:var(--card);border:1px solid var(--line);border-inline-start:4px solid var(--mut);border-radius:14px;padding:10px 14px;margin-bottom:8px}
.jr-cmp.s-up{border-inline-start-color:var(--neon)}.jr-cmp.s-down{border-inline-start-color:var(--bad)}.jr-cmp.s-same{border-inline-start-color:var(--warn)}
.jc-t{display:flex;justify-content:space-between;gap:8px}.jc-s{font-weight:700;font-size:14px}.s-up .jc-s{color:var(--neon)}.s-down .jc-s{color:var(--bad)}.s-same .jc-s{color:var(--warn)}.s-unk .jc-s{color:var(--mut)}
.jr-cmp small{color:var(--mut);font-size:13px}
.jc-n{display:flex;align-items:center;gap:12px;font-size:26px;font-weight:700;margin:2px 0}.jc-n span{color:var(--mut)}.jc-n i{font-style:normal;color:var(--mut);font-size:20px}
.jc-m{margin:4px 0;color:var(--neon);font-weight:700;font-size:14.5px}.jr-cmp .btn{margin-top:6px}
.jr-unl{background:rgba(43,255,136,.1);border:1px solid rgba(43,255,136,.45);border-radius:14px;padding:10px 14px;margin-bottom:8px}
.jr-svg{width:100%;height:auto;background:var(--card);border:1px solid var(--line);border-radius:14px}
.jr-lg{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;margin-top:6px}.jr-lg span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:5px;vertical-align:-1px}
.jr-lg .k0::before{background:#2bff88}.jr-lg .k1::before{background:#19c3ff}
.jr-lv{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin-bottom:8px}.jr-lv.act{border-color:rgba(43,255,136,.45)}
.jr-lv .ic{font-size:22px}.lv-steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;font-size:13px}.lv-steps span{border:1px solid var(--line);border-radius:99px;padding:2px 9px;color:var(--mut)}
.lv-steps span.done{color:var(--neon);border-color:rgba(43,255,136,.5)}.lv-steps span.now{color:var(--tx);border-color:var(--neon2)}
.jr-lv.blur{filter:blur(2.5px);opacity:.6;pointer-events:none}
.jr-nick{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-top:10px;display:grid;gap:8px}.jr-nick label{font-weight:600}
.jr-nick .chk{font-weight:400;color:#cfe0f2;display:flex;align-items:center;gap:6px}.nk-m{color:var(--neon)}
.jr-cta{text-align:center;background:linear-gradient(135deg,rgba(43,255,136,.14),rgba(25,195,255,.08));border:1px solid rgba(43,255,136,.45);border-radius:18px;padding:16px;margin:14px 0}
.jr-cta b{display:block;font-size:19px}.jr-cta span{display:block;color:#cfe0f2;margin:4px 0 10px;font-size:14.5px}
.jr-res{margin:4px 0 14px}.jr-res h3{margin:0 0 4px}.jr-res .jr-nx{display:block;margin:10px 0 6px}
.lb-me{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:10px}
.lb{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:6px}
.lb li{display:grid;grid-template-columns:34px 1fr auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:9px 12px}
.lb li.me{border-color:var(--neon)}.lb .rk{grid-row:1/3;font-weight:700;font-size:18px;color:var(--neon2);text-align:center}
.lb .nk{font-size:16px}.lb .sc{grid-row:1/3;grid-column:3;font-size:22px;font-weight:700;color:var(--neon)}.lb .nn{color:var(--mut);font-size:12.5px}
.lb li.lb-empty{display:block;color:var(--mut);text-align:center}
#jr-btn{white-space:nowrap}
@media (max-width:400px){.top .nav{gap:6px}.top .pill{padding-inline:10px;font-size:13.5px}}
.jr-unl.lk{background:rgba(255,255,255,.03);border-style:dashed;border-color:var(--line)}

/* v23: goal clip = its own one-time purchase */
.plans3 .goal-line{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,255,255,.03);border:1px dashed var(--line);border-radius:16px;padding:12px 14px}
.plans3 .goal-line .gl-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.plans3 .goal-line b{font-size:15px}.plans3 .goal-line small{color:var(--mut);font-size:12.5px;line-height:1.5}
.plans3 .goal-line .btn{flex:none;width:auto;margin:0;white-space:nowrap}
.goalbuy{display:flex;flex-direction:column;gap:8px;margin:12px 0;padding:14px 16px;border-radius:16px;background:var(--card);border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box}
.goalbuy[hidden]{display:none}
.goalbuy>b{font-size:18px}.goalbuy small{color:var(--mut);font-size:13.5px}
.goalbuy .btn{width:100%}
.goalbuy .lnk{align-self:center;background:none;border:0;color:var(--neon2);font:inherit;font-size:14px;cursor:pointer;padding:4px}
.g-up{display:flex;flex-direction:column;gap:8px;margin:18px 0 6px;padding:16px;border-radius:18px;border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;text-align:center}
.g-up[hidden]{display:none}
.g-up>b{font-size:19px}.g-up small{color:var(--mut);font-size:13.5px;line-height:1.6}
.g-up .btn{width:100%}.g-up .lnk{align-self:center;background:none;border:0;color:var(--neon2);font:inherit;font-size:14px;cursor:pointer;padding:4px}
.plans3 .plan.focus{box-shadow:0 0 0 3px rgba(43,255,136,.35),0 8px 30px rgba(43,255,136,.18)}

/* v24: fair use */
.fair-note{margin:0;padding:0 0 10px;color:#ffd27a;font-size:13.5px;border-bottom:1px solid var(--line)}
.fair-note[hidden]{display:none}
#fair .fair-btns{display:flex;flex-direction:column;gap:10px;max-width:520px;margin:14px auto}
#fair .fair-btns .btn{width:100%}
#fair h2{text-align:center}

/* v25: goals list + drill moment */
.goals{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.goals li{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px;display:grid;gap:3px;border-inline-start:4px solid var(--line)}
.goals li.good{border-inline-start-color:var(--neon)}.goals li.bad{border-inline-start-color:var(--bad)}
.goals .tm{justify-self:start;width:auto;font-size:12.5px;color:var(--neon2);background:rgba(25,195,255,.1);border-radius:99px;padding:1px 10px;direction:rtl;unicode-bidi:isolate}.goals small{color:var(--mut);font-size:13px}
.drill small.dm{display:block;margin-bottom:3px;color:var(--neon2)}

/* v26: YouTube moment player */
.clips.ytm .clip.not .clip-pl{display:none}
.tlink{display:inline;background:rgba(25,195,255,.14);border:0;color:var(--neon2);font:inherit;font-weight:700;border-radius:99px;padding:0 8px;margin:0 2px;cursor:pointer;direction:ltr;unicode-bidi:isolate;text-decoration:underline;text-underline-offset:3px}
.tlink::before{content:"▶ ";font-size:.8em;text-decoration:none}
.goals .tm .tlink{padding:0 6px;margin:0}
body.ytv-on{overflow:hidden}
.ytv{position:fixed;inset:0;z-index:90;background:rgba(5,9,15,.94);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:max(12px,env(safe-area-inset-top)) 12px 24px}
.ytv[hidden]{display:none}
.ytv-in{width:100%;max-width:720px}
.ytv-bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ytv-badge{background:rgba(0,0,0,.6);border:1px solid var(--line);color:#fff;font-weight:700;border-radius:8px;padding:3px 10px;direction:ltr}
.ytv-fr{position:relative;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.ytv-fr iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ytv-cap{margin-top:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.ytv-cap.good{border-color:var(--neon)}.ytv-cap.bad{border-color:var(--bad)}
.ytv-cap b{display:block;font-size:15px;line-height:1.6}.ytv-cap p{margin:6px 0 0;color:#d7e3ef;font-size:14px}
.ytv-nav{display:flex;gap:10px;margin-top:12px}.ytv-nav .btn{flex:1}
.ytv-nav .btn:disabled{opacity:.35}

/* ===== v27: short report — summary card first, details as swipeable cards ===== */
.sumcard{background:linear-gradient(160deg,#172234,#0f1620);border:1px solid #2a3b52;border-radius:22px;padding:14px 14px 12px;margin-bottom:10px}
.sc-meta{display:flex;justify-content:space-between;color:var(--mut);font-size:12.5px}
.sc-top{display:flex;gap:14px;align-items:center;margin-top:8px}
.sc-top .ring.lg{width:84px;height:84px}.sc-top .ring.lg b{font-size:28px}
.sc-main{display:grid;gap:2px;min-width:0}
.sc-k{color:#bfe9ff;font-weight:700;font-size:13px}
.sc-main .rh-word{font-size:12.5px}
.sumcard .score{font-size:20px;font-weight:700;margin:2px 0 0;opacity:1;direction:ltr;text-align:right;unicode-bidi:plaintext}
.sumcard .sc-sum{font-size:18px;margin:2px 0 0;line-height:1.45}
#r-goal .sumcard .sc-sum{margin-top:8px}
.sc-h{font-size:15px;margin:12px 0 6px;color:#cfe0f2}
.top3{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.t3{display:flex;align-items:flex-start;gap:8px;background:rgba(255,255,255,.035);border:1px solid var(--line);border-inline-start:3px solid var(--bad);border-radius:12px;padding:8px 10px;font-size:15px;line-height:1.5}
.t3.good{border-inline-start-color:var(--neon)}.t3.fix{border-inline-start-color:var(--warn)}
.t3-i{font-style:normal;font-size:11px;line-height:2.1;flex:none}
.t3-x{flex:1;min-width:0}
.t3 .tlink{flex:none;margin:1px 0 0;padding:1px 8px;font-size:13.5px;text-decoration:none;white-space:nowrap}
.tlink.gt{direction:rtl}
.tlink.gt.off{background:rgba(255,255,255,.06);color:var(--mut);cursor:default;text-decoration:none}.tlink.gt.off::before{content:""}
.nd{margin-top:10px;background:linear-gradient(135deg,rgba(43,255,136,.13),rgba(25,195,255,.07));border:1px solid rgba(43,255,136,.4);border-radius:14px;padding:9px 12px}
.nd small{color:var(--neon);font-weight:700;font-size:12.5px;display:block}
.nd b{display:block;font-size:16px;margin:2px 0 0}.nd p{margin:2px 0 0;color:#d7e3ef;font-size:14px;line-height:1.55}
.dtl-tg{width:100%;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:10px;text-align:right;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 14px;color:var(--tx);font:inherit;cursor:pointer;margin:0 0 4px}
.dtl-tg span{font-weight:700;font-size:15.5px}.dtl-tg small{grid-row:2;color:var(--mut);font-size:12.5px}
.dtl-tg i{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;color:var(--neon2);transition:transform .2s}
.dtl-tg.open i{transform:rotate(180deg)}.dtl-tg.open{border-color:rgba(25,195,255,.45)}
.dtl{margin:6px 0 4px}
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0 8px;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;border:1px solid var(--line);background:var(--bg2);color:#cfe0f2;border-radius:99px;padding:6px 12px;font:inherit;font-size:13.5px;cursor:pointer;white-space:nowrap}
.tab.on{background:rgba(0,230,118,.14);border-color:var(--neon);color:#eafff3;font-weight:700}
.panes{position:relative;overflow:hidden;touch-action:pan-y}
.pane{display:none;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 14px}
.pane.act{display:block}
.pane.in-n{animation:paneN .22s ease-out}.pane.in-p{animation:paneP .22s ease-out}
@keyframes paneN{from{transform:translateX(-28px);opacity:.3}to{transform:none;opacity:1}}
@keyframes paneP{from{transform:translateX(28px);opacity:.3}to{transform:none;opacity:1}}
.pane h3{font-size:14.5px;margin:2px 0 6px}
.pane .sec{margin:0 0 10px}.pane .sec:last-child{margin-bottom:0}
.pane .pane-sub{display:block;margin:0 0 8px}
.pane .bul,.pane .nums{font-size:14.5px}
.pane .nums{gap:7px}
.pane .assign{padding:10px 12px;margin-bottom:10px}.pane .assign b{font-size:16px}.pane .assign p{margin:0;font-size:14px}
.pane .jr-res{margin:0;padding:0;border:0;background:none}
.pane .km canvas{max-height:38vh}
.dots{display:flex;justify-content:center;gap:5px;margin-top:8px}
.dots i{width:6px;height:6px;border-radius:50%;background:#2a3b52}.dots i.on{background:var(--neon);width:14px;border-radius:4px}
.clipbar{height:4px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;margin:6px 0 0}
.clipbar i{display:block;height:100%;width:0;background:var(--neon);transition:width .25s linear}
.cp-end,.ytv-end{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:10px;background:rgba(5,9,15,.72)}
.cp-end[hidden],.ytv-end[hidden]{display:none}
.cp-end button,.ytv-end button{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font:inherit;font-weight:700;font-size:14.5px;border-radius:99px;padding:8px 14px;cursor:pointer}
.cp-end button#cp-nx,.ytv-end button#ytv-nx{background:var(--neon);border-color:var(--neon);color:#04210f}
.ytv-st{position:relative}
.ytv-fr video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.clip-th.yt{background-size:cover;background-position:center;background-repeat:no-repeat}
.clip-th.yt::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.55))}
.clip-th .clip-t,.clip-th .clip-pl{z-index:1}
/* compact extras under the card */
#result .fb{margin:12px 0 0;padding:9px 12px}
#result .chat{margin-top:10px;padding:12px}
#result .chat h3{font-size:15px;margin:0 0 8px}
#result .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:8px}
#result .chips::-webkit-scrollbar{display:none}
#result .chips button{flex:none;white-space:nowrap}
#result .row{margin-top:12px}
#result .note{font-size:12.5px;margin-top:12px;padding-top:8px}
.pane .goals{gap:5px}
.pane .goals li{display:block;padding:6px 10px;font-size:14px;line-height:1.55;border-radius:12px}
.pane .goals li>b{font-size:14px;margin-inline-start:4px}.pane .goals li>small{display:inline;margin-inline-start:6px;font-size:13px}
.pane .goals .tm{display:inline-block;padding:0 8px}
/* v27: tighter lists inside the detail cards so each card fits one screen */
.pane .bul,.pane .nums{gap:6px}
.pane .bul li{padding:7px 30px 7px 10px;font-size:14px;line-height:1.55;border-radius:12px}.pane .bul li::before{right:11px;top:3px;font-size:20px}
.pane .nums li{padding:7px 42px 7px 10px;font-size:14px;line-height:1.55;border-radius:12px}.pane .nums li::before{right:9px;top:6px;width:24px;height:24px;font-size:13px}
.pane .tac{gap:5px 10px;padding:9px 11px;border-radius:12px;font-size:14px;line-height:1.55}.pane .tac dt{font-size:13px}
.pane .drill{padding:9px 11px;border-radius:12px}.pane .drill p{font-size:14px;margin:4px 0}
.t3-i{width:8px;height:8px;border-radius:50%;background:var(--bad);margin-top:9px;font-size:0;overflow:hidden}
.t3.good .t3-i{background:var(--neon)}.t3.fix .t3-i{background:var(--warn)}
.sumcard .score{direction:rtl;text-align:right;unicode-bidi:normal}.sumcard .score bdi{direction:ltr;unicode-bidi:isolate}
.sumcard .score small{display:block;font-size:12px;color:var(--mut);font-weight:600}

/* v29: FAQ «كيف أسجّل…» carries the upload step's guide (built in app.js from the upload step) */
.faq .faq-rec{overflow:hidden}
.faq-rec .fr{padding:0 0 14px}
.fr-seg{display:flex;gap:4px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:3px;margin:0 0 10px}
.fr-seg button{flex:1;min-width:0;min-height:44px;border:0;background:none;border-radius:9px;padding:6px 4px;font:inherit;font-size:13px;font-weight:600;line-height:1.3;color:var(--mut);cursor:pointer}
.fr-seg button em{display:block;font-style:normal;font-size:11.5px;font-weight:500}
.fr-seg button.on{background:var(--card);color:var(--tx);box-shadow:0 0 0 1px var(--line)}
.fr-pane .g-t{display:block;font-size:15px;margin-bottom:6px}
.fr-pane ul{margin:0;padding-inline-start:18px;color:#c3d0de;font-size:14.5px;line-height:1.6}
.fr-pane li{margin:4px 0}
.fr .guide{margin:0}
.fr .g-row{margin:0 -14px;padding-inline:14px}
@media (min-width:720px){.fr .g-row{margin:0;padding-inline:2px}}

/* ===== v30 ===== */
/* links in text use the site's link colour (good contrast on the dark background), never the browser's default blue */
a:not(.btn):not(.brand):not(.pill):not(.backbar){color:var(--neon2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:not(.btn):not(.brand):not(.pill):not(.backbar):visited{color:var(--neon2)}
a:not(.btn):not(.brand):not(.pill):not(.backbar):hover{color:#7fdcff}
/* guide arrows: small round icons, clearly not the wizard's «رجوع / التالي» */
.g-nav{justify-content:center;gap:16px}
.g-nav .g-arr,.g-nav .g-next.g-arr{width:38px;height:38px;min-height:38px;padding:0;border-radius:50%;background:transparent;border:1px solid var(--line);color:var(--mut);font-size:22px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.g-nav .g-arr:not(:disabled):active{background:rgba(25,195,255,.12);color:var(--tx)}
/* one small line instead of the «قريبًا» game chips */
.games-line{text-align:center;color:var(--mut);font-size:13.5px;margin:4px 0 14px}
.matchbuy>b{font-size:17px}
.hist-note{display:block;text-align:center;margin-top:6px}
.hist-note[hidden]{display:none}
bdi.ltr{unicode-bidi:isolate;direction:ltr;display:inline-block}

/* ===== v31: smoother home page on phones =====
   The colour lift that used to be a CSS filter on the videos is now baked into the files (a filter on a playing video
   is redone every frame). Cards no longer blur the moving background behind them (that blur was recomputed every
   video frame); they are a little more opaque instead. The background grid and glow blobs no longer animate, and the
   two looping strips on the analysis "screen" move with transforms instead of layout. */
.hv-v,.pagebg .hv-v,.scr video{filter:none}
:root{--card:rgba(17,26,39,.9)}
.card,.preview-card,.how li,.sec,.chat,.fb,.plan,.drop,.field input,.tips{backdrop-filter:none;-webkit-backdrop-filter:none}
.bgfx .grid,.bgfx .g1,.bgfx .g2,.bgfx .g3{animation:none}
.scr-in::before{top:0;transform:translateY(-100%);animation:scanY 3.6s linear infinite;will-change:transform}
@keyframes scanY{from{transform:translateY(-100%)}to{transform:translateY(334%)}}
.scr-ph{width:100%;transform:scaleX(0);transform-origin:100% 50%;animation:phX 9s linear infinite}
@keyframes phX{to{transform:scaleX(1)}}
@media (max-width:700px){.top{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,14,20,.94)}}
@media (prefers-reduced-motion:reduce){.scr-in::before,.scr-ph{animation:none}}
/* v31: the moment cards strip swipes without a visible scrollbar (desktop browsers showed one) */
.clips{scrollbar-width:none}.clips::-webkit-scrollbar{display:none}
/* v31: time labels use the system Arabic font, whose zero is a round dot (the site font draws «٠» like a dash, read as a minus) */
.clip-t,#cp-badge,.tlink,.t3 .tm,.tm{font-family:"Geeza Pro","Segoe UI",Tahoma,"Noto Sans Arabic",system-ui,sans-serif}

/* ===== v33: people-free moment and goal cards (no frame, thumbnail or clip of the player's match) ===== */
.clips.mo-list{display:grid;gap:8px;overflow:visible;scroll-snap-type:none;padding:0;margin:0}
.clip.mo{display:grid;grid-template-columns:112px 1fr;gap:0;align-items:start;max-width:none;width:100%;flex:none;border-inline-start:3px solid var(--neon2)}
.clip.mo.good{border-inline-start-color:var(--neon)}.clip.mo.bad{border-inline-start-color:var(--bad)}
.clip.mo:active{transform:scale(.985)}
.mo-art{position:relative;display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;margin:8px 8px 8px 0;background:#0c1c16;border:1px solid rgba(255,255,255,.06)}
.mo-svg{display:block;width:100%;height:100%;color:var(--neon2)}
.good .mo-svg{color:var(--neon)}.bad .mo-svg{color:var(--bad)}
.mo-svg .mo-bg{fill:#0a0e14;stroke:currentColor;stroke-width:2}
.mo-k{position:absolute;top:5px;right:5px;background:rgba(5,9,15,.78);color:var(--tx);font-size:10.5px;font-weight:700;border-radius:6px;padding:0 6px;line-height:1.7}
.mo-art .clip-t{bottom:5px;left:5px;font-size:11.5px}
.clip.mo .clip-tx{padding:8px 10px 10px}
.clip.mo .clip-tx b{-webkit-line-clamp:3}
.mo-more{display:none;margin-top:6px;padding-top:6px;border-top:1px solid var(--line);color:#d7e3ef;font-size:13.5px;line-height:1.6}
.mo-hint{display:inline-block;margin-top:5px;font-size:12px;font-weight:700;color:var(--neon2)}
.mo-hint::after{content:" ▾"}
.clip.mo.open .clip-tx b{-webkit-line-clamp:unset;display:block}
.clip.mo.open .mo-more{display:block}
.clip.mo.open .mo-hint{display:none}
.goals li.gl,.pane .goals li.gl{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center;padding:6px 10px 6px 6px}
.goals li.gl .mo-art{margin:0}
.gl-tx{display:grid;gap:2px;min-width:0}
.gl-tx b{font-size:14px}.pane .goals .gl-tx small{display:block;margin:0}
.goals .gl-tx .tm{justify-self:start}
.tlink::before{content:none}
.km{background:var(--card)}
.km-art{margin:0;border:0;border-radius:0;aspect-ratio:16/8}
.km-lab{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);background:rgba(255,59,82,.92);color:#fff;font-weight:700;font-size:13px;border-radius:99px;padding:2px 12px;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis}
.drop.has{min-height:130px;padding:18px 14px 14px;background:linear-gradient(160deg,rgba(0,230,118,.07),rgba(25,195,255,.05)),rgba(21,30,43,.6)}
.drop.has .drop-ic{display:block}
.drop.has b,.drop.has #drop-s{position:static;text-shadow:none}
.drop.has::after{display:none}
.cl-ic{flex:0 0 44px;height:44px;border-radius:10px;background:#0c1c16;border:1px solid var(--line);display:grid;place-items:center;font-size:20px}

/* ===== v34: animated attack replay (dots on a pitch; real from the clip's radar, or illustrative and labelled) ===== */
.clip.mo.rp{display:block;padding:0;cursor:default;border-inline-start-width:3px}
.clip.mo.rp:active{transform:none}
.rp-head{display:flex;gap:7px;align-items:center;padding:10px 12px 8px;flex-wrap:wrap}
.rp-tag{font-size:12px;font-weight:700;padding:1px 10px;border-radius:99px;background:rgba(25,195,255,.14);color:var(--neon2)}
.good .rp-tag{background:rgba(0,230,118,.14);color:var(--neon)}.bad .rp-tag{background:rgba(255,93,108,.14);color:var(--bad)}
.rp-type{font-size:12.5px;font-weight:700;color:#cfdbe8}
.rp-time{margin-inline-start:auto;font-size:12px;color:var(--mut);background:rgba(255,255,255,.06);border-radius:7px;padding:1px 8px;font-family:"Geeza Pro","Segoe UI",Tahoma,"Noto Sans Arabic",system-ui,sans-serif}
.rp-host{padding:0 10px}
.rp-stage{position:relative;border-radius:12px;overflow:hidden;background:#155a37;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.35);cursor:pointer}
.rp-svg{display:block;width:100%;height:auto}
.rp-dot circle{stroke-width:3.5}
.rp-dot.u circle{fill:#19c3ff;stroke:#04131d}
.rp-dot.o circle{fill:#ff5d6c;stroke:#22070b}
.rp-badge{position:absolute;top:7px;right:7px;font-size:10.5px;font-weight:700;line-height:1.5;padding:2px 9px;border-radius:99px;background:rgba(5,9,15,.74);color:#e9f2fb;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.rp-badge.demo{color:#ffd166;box-shadow:inset 0 0 0 1px rgba(255,209,102,.35)}
.rp-ev{position:absolute;top:7px;left:7px;font-size:11.5px;font-weight:700;line-height:1.5;padding:2px 10px;border-radius:99px;background:#ffd166;color:#1a1300;opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s}
.bad .rp-ev{background:#ff5d6c;color:#fff}.rp-ev.on{opacity:1;transform:none}
.rp-leg{position:absolute;bottom:6px;right:7px;display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:#e6eef6;background:rgba(5,9,15,.6);padding:1px 8px;border-radius:99px}
.rp-leg i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-start:4px;box-shadow:0 0 0 1.5px rgba(0,0,0,.5)}
.rp-leg i:first-child{margin-inline-start:0}.rp-leg i.u{background:#19c3ff}.rp-leg i.o{background:#ff5d6c}
.rp-ctl{display:flex;align-items:center;gap:10px;padding:9px 0 2px;direction:ltr}
.rp-play{flex:none;width:38px;height:38px;border-radius:50%;border:0;background:var(--neon2);color:#04131d;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(25,195,255,.35)}
.rp-wrap.on .rp-play{background:#e9f2fb}
.rp-play svg{width:18px;height:18px;fill:currentColor}
.rp-rng{flex:1;min-width:0;accent-color:var(--neon2);height:18px;margin:0;cursor:pointer}
.rp-spd{flex:none;min-width:46px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:#cfdbe8;font:inherit;font-size:12px;font-weight:700;border-radius:9px;padding:4px 8px;cursor:pointer}
.clip.mo.rp .clip-tx{display:block;padding:8px 12px 12px}
.clip.mo.rp .clip-tx b{display:block;cursor:pointer}
button.mo-hint{background:none;border:0;padding:0;font:inherit;font-size:12px;font-weight:700;color:var(--neon2);cursor:pointer}
.rp-note{display:block;margin:2px 0 10px;font-size:12.5px;line-height:1.6;color:#cfdbe8;background:rgba(25,195,255,.08);border:1px solid rgba(25,195,255,.18);border-radius:10px;padding:6px 10px}
@media (prefers-reduced-motion:reduce){.rp-ev{transition:none}}

/* v35 «طبّقها في مباراتك الجاية» + optional extra drills */
.nm-sub{margin:0 0 8px;font-size:13px;color:var(--mut)}
.nmt{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:nm}
.nmt .nm{position:relative;background:#0f1620;border:1px solid var(--line);border-inline-start:3px solid var(--neon);border-radius:12px;padding:9px 11px 9px 11px;padding-inline-start:40px;counter-increment:nm}
.nmt .nm::before{content:counter(nm,arabic-indic);position:absolute;inset-inline-start:10px;top:9px;width:22px;height:22px;border-radius:50%;background:rgba(43,255,136,.14);color:var(--neon);font-weight:800;font-size:13px;display:grid;place-items:center}
.nmt .nm .nw{display:block;color:var(--neon2);font-size:12.5px;margin-bottom:2px}
.nmt .nm b{display:block;font-size:14.5px;line-height:1.5}
.nmt .nm small.dm{display:block;margin-top:4px;color:var(--mut);font-size:12.5px}
.xtra{margin-top:12px}
.xbtn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14.5px;padding:11px 14px;border-radius:12px}
.xbtn i{font-style:normal;transition:transform .2s}.xbtn.on i{transform:rotate(180deg)}
.xbody{margin-top:10px}

/* v40: history — per-analysis delete, «حذف السجل من الحساب», confirm dialog */
.hist{grid-template-columns:minmax(0,1fr)}.hitem{display:flex;align-items:stretch;gap:6px;min-width:0;max-width:100%}.hitem>.hrow{flex:1;min-width:0;width:auto}
.hdel{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:52px;padding:6px 8px;background:var(--card);border:1px solid var(--line);border-radius:16px;color:var(--mut);font:inherit;font-size:12px;cursor:pointer}
.hdel svg{width:17px;height:17px}.hdel:hover,.hdel:focus-visible{color:var(--bad);border-color:rgba(255,93,108,.5)}
.hdel[disabled]{opacity:.5;cursor:default}
.hitem.out{opacity:0;transform:translateX(-14px);transition:opacity .25s,transform .25s}
.hist-tools{margin-top:22px;border-top:1px solid var(--line);padding-top:16px;display:grid;gap:14px}
.hist-tools .ht-t{font-size:14px;color:var(--mut);font-weight:600}
.ht-opt{display:grid;gap:6px;justify-items:start}.ht-opt .btn.sm{width:100%}
.ht-opt small{color:var(--mut);font-size:12.5px;line-height:1.6}.ht-opt small b{color:var(--tx);font-weight:600}
.btn.danger{background:transparent;border:1px solid rgba(255,93,108,.6);color:var(--bad)}
.btn.danger:hover,.btn.danger:focus-visible{background:rgba(255,93,108,.1)}
.btn.danger[disabled]{opacity:.6}
.hist-done{text-align:center;color:var(--neon);font-weight:600;margin:0 0 10px}
.cfm{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;background:rgba(4,7,12,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.cfm[hidden]{display:none}
.cfm-card{width:100%;max-width:360px;background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:22px 18px 16px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:cfmIn .2s ease-out}
.cfm-ic{width:52px;height:52px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:rgba(255,93,108,.14);color:var(--bad)}
.cfm-t{display:block;font-size:18px;margin-bottom:8px}.cfm-m{color:var(--mut);font-size:14.5px;line-height:1.7;margin:0 0 16px}
.cfm-b{display:grid;gap:8px}.cfm-b .btn{width:100%;margin:0}
.cfm-b .btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
@keyframes cfmIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cfm-card{animation:none}.hitem.out{transition:none}}

/* v41 account deletion */
.del-lnk{color:var(--bad)!important;opacity:.85}
.del-acct{margin:14px 0;padding:16px;border:1px solid rgba(255,93,108,.45);border-radius:16px;background:rgba(255,93,108,.06);display:grid;gap:10px;text-align:right}
.del-acct[hidden]{display:none}
.del-acct b{color:var(--bad)}
.del-acct p{margin:0;font-size:14px;line-height:1.7;opacity:.9}

/* v43: current formation from the clip -> recommended formation */
.shape-card{margin:0 0 14px;padding:14px;border-radius:16px;background:rgba(16,26,40,.82);border:1px solid rgba(120,160,200,.18)}
.shape-card h3{margin:0 0 10px;font-size:15px}
.sh-row{display:flex;align-items:center;justify-content:center;gap:10px}
.sh-c{margin:0;flex:1;max-width:150px;text-align:center}
.sh-c figcaption{font-size:12px;color:#9fb3c8;margin-bottom:6px}
.sh-c svg{width:100%;height:auto;display:block}
.sh-c b{display:block;margin-top:6px;font-size:17px;letter-spacing:.5px}
.sh-p{fill:#0f3a26;stroke:#2f7a52;stroke-width:1.5}.sh-l{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.2}
.sh-d{fill:#3ddc84;stroke:#05110b;stroke-width:1.2}.sh-g{fill:#f5c542;stroke:#05110b;stroke-width:1.2}
.sh-ar{font-size:24px;color:#3ddc84}.sh-na{height:120px;display:flex;align-items:center;justify-content:center;color:#9fb3c8;font-size:13px;border:1px dashed rgba(255,255,255,.2);border-radius:8px}
.tac-ex{font-size:13px;color:#f5c542;background:rgba(245,197,66,.08);border-radius:10px;padding:8px 10px;margin:0 0 8px}