/* ===== login.css — صفحه‌ی ورود زنده، نرم و جذاب (استاد + دانش‌آموز) =====
   بعد از pro.css بارگذاری می‌شود و ظاهر «آرام» قبلی را با انیمیشن‌های نرم جایگزین می‌کند. */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---- پس‌زمینه: شفق متحرک + شبکه‌ی نقطه‌ای ---- */
#lg,#v-login .lgw{
  background:
    radial-gradient(900px 520px at 85% -10%,color-mix(in srgb,var(--v,#a78bfa) 38%,transparent),transparent 60%),
    radial-gradient(800px 520px at 0% 110%,color-mix(in srgb,var(--a,#5eead4) 30%,transparent),transparent 60%),
    #0a0e2a!important;
  background-size:140% 140%,140% 140%,auto!important;
  animation:lgAurora 18s ease-in-out infinite alternate!important;
}
:root[data-theme="light"] #lg,:root[data-theme="light"] #v-login .lgw{
  background:
    radial-gradient(900px 520px at 85% -10%,color-mix(in srgb,var(--v,#a78bfa) 30%,transparent),transparent 60%),
    radial-gradient(800px 520px at 0% 110%,color-mix(in srgb,var(--a,#5eead4) 32%,transparent),transparent 60%),
    #eef1fb!important;
}
@keyframes lgAurora{from{background-position:0% 0%,100% 100%,0 0}to{background-position:100% 30%,0% 70%,0 0}}
#lg::before,#v-login .lgw::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.2px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse at center,#000 15%,transparent 72%);
}
:root[data-theme="light"] #lg::before,:root[data-theme="light"] #v-login .lgw::before{background-image:radial-gradient(rgba(60,70,140,.18) 1px,transparent 1.2px)}
/* گوی‌های نورانی و ذرات دوباره فعال می‌شوند */
#lg .lgbg,#v-login .lgbg{display:block!important;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
#lg .lgcv,#v-login .lgcv{display:block!important;z-index:0;opacity:.9}
.lgbg i{filter:blur(46px)!important;opacity:.5!important;will-change:transform}
.lgbg i:nth-child(1){background:var(--v,#7c3aed)!important}
.lgbg i:nth-child(2){background:var(--a,#14b8a6)!important}

/* ---- اشکال شناور (کتاب، مداد، ستاره…) ---- */
.lgfl{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.lgfl span{position:absolute;bottom:-60px;font-size:22px;opacity:0;filter:saturate(.9);animation:lgRise linear infinite;will-change:transform,opacity}
@keyframes lgRise{0%{transform:translateY(0) rotate(0);opacity:0}12%{opacity:.5}85%{opacity:.35}100%{transform:translateY(-115vh) rotate(40deg);opacity:0}}

/* ---- کارت: شیشه‌ای + حاشیه‌ی نوری چرخان ---- */
#lg .lgc,#v-login .lgc{
  position:relative;z-index:1;overflow:visible!important;
  animation:lgIn .8s cubic-bezier(.2,.8,.2,1) backwards!important;
  transition:transform .25s ease-out,box-shadow .4s;transform-style:flat;
  backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07),0 0 80px -20px color-mix(in srgb,var(--v,#a78bfa) 45%,transparent)!important;
}
#lg .lgc{background:color-mix(in srgb,var(--pop,#141a3d) 82%,transparent)!important}
#v-login .lgc{background:color-mix(in srgb,var(--g,#141a3d) 82%,transparent)!important}
#lg .lgc::after,#v-login .lgc::after{
  display:block!important;content:'';position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--ang),var(--a,#5eead4),var(--v,#a78bfa),#ec4899,#fbbf24,var(--a,#5eead4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:lgAng 8s linear infinite;opacity:.8;
}
@keyframes lgAng{to{--ang:360deg}}
@keyframes lgIn{from{opacity:0;transform:translateY(26px) scale(.96);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.lgbrand{border-radius:0 26px 26px 0}
/* ورود پله‌ای اجزای فرم */
.lgform>*{animation:lgItem .6s cubic-bezier(.2,.8,.2,1) backwards!important}
.lgform>*:nth-child(1){animation-delay:.10s}.lgform>*:nth-child(2){animation-delay:.16s}.lgform>*:nth-child(3){animation-delay:.22s}
.lgform>*:nth-child(4){animation-delay:.28s}.lgform>*:nth-child(5){animation-delay:.34s}.lgform>*:nth-child(6){animation-delay:.40s}
.lgform>*:nth-child(n+7){animation-delay:.46s}
@keyframes lgItem{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---- لوگو: حلقه‌های نوری ---- */
#lg .lgl,#v-login .logo{position:relative;animation:lgFloat 4s ease-in-out infinite!important;
  background:linear-gradient(135deg,var(--a,#5eead4),var(--v,#a78bfa))!important;
  box-shadow:0 12px 34px -8px color-mix(in srgb,var(--v,#a78bfa) 70%,transparent)!important}
#lg .lgl::before,#v-login .logo::before,#lg .lgl::after,#v-login .logo::after{content:'';position:absolute;inset:-8px;border-radius:inherit;border:1.5px solid color-mix(in srgb,var(--a,#5eead4) 55%,transparent);animation:lgPulse 2.8s ease-out infinite;pointer-events:none}
#lg .lgl::after,#v-login .logo::after{animation-delay:1.4s}
@keyframes lgFloat{50%{transform:translateY(-5px) rotate(-3deg)}}
@keyframes lgPulse{from{transform:scale(.9);opacity:.8}to{transform:scale(1.6);opacity:0}}
.bmark{animation:lgFloat 5s ease-in-out infinite}

/* ---- عنوان با درخشش ---- */
#lg .lgt,#v-login .lgt{
  background:linear-gradient(100deg,var(--a,#5eead4),var(--v,#a78bfa),#ec4899,var(--a,#5eead4));background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:lgShine 6s linear infinite!important}
@keyframes lgShine{to{background-position:-250% 0}}
.lgs,#lgSub{transition:opacity .35s,transform .35s}

/* ---- فیلدها: نرم‌تر با حالت فوکوس زنده ---- */
.fxw{transition:border-color .25s,box-shadow .25s,transform .25s,background .25s}
.fxw:focus-within{transform:translateY(-1px);background:color-mix(in srgb,var(--a,#5eead4) 7%,var(--fill,rgba(255,255,255,.07)))}
.fxw:focus-within>svg{animation:lgBob .5s ease}
@keyframes lgBob{40%{transform:scale(1.25) rotate(-8deg)}}
.fx>span{transition:color .2s,transform .2s}
.fx:focus-within>span{color:var(--a,#5eead4);transform:translateX(-2px)}
.fxw.filled>svg{color:var(--a,#5eead4)}
.fxw .tick{flex:none;width:20px;height:20px;margin-inline-end:10px;color:#22c55e;opacity:0;transform:scale(.4);transition:.3s cubic-bezier(.3,1.6,.5,1)}
.fxw.filled .tick{opacity:1;transform:none}

/* ---- دکمه: درخشش + موج لمس + فلش ---- */
.lgb,.lgx{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(110deg,var(--a,#5eead4),var(--v,#a78bfa) 40%,#ec4899 62%,var(--a,#5eead4))!important;background-size:260% 100%!important;
  animation:lgBtn 5s linear infinite!important;color:#0a0e2a!important}
@keyframes lgBtn{to{background-position:-260% 0}}
.lgb::before,.lgx::before{content:'';position:absolute;top:0;bottom:0;width:60%;left:-80%;z-index:-1;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:lgSweep 3.4s ease-in-out infinite}
@keyframes lgSweep{0%,55%{left:-80%}100%{left:140%}}
.lgb:hover,.lgx:hover{transform:translateY(-2px);box-shadow:0 18px 38px -12px color-mix(in srgb,var(--v,#a78bfa) 75%,transparent)!important}
.lgb .arr,.lgx .arr{display:inline-block;transition:transform .25s}
.lgb:hover .arr,.lgx:hover .arr{transform:translateX(-5px)}
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:lgRip .6s ease-out forwards;pointer-events:none;z-index:-1}
@keyframes lgRip{to{transform:scale(1);opacity:0}}

/* ---- خطا: ظاهر نرم و لرزش ---- */
.lgerr{transition:.25s}
.lgerr:not(:empty){background:color-mix(in srgb,#fb7185 14%,transparent);border:1px solid color-mix(in srgb,#fb7185 40%,transparent);border-radius:12px;padding:9px 12px;animation:lgErr .35s ease both}
@keyframes lgErr{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
.shk,.shake{animation:lgShk .45s!important}
@keyframes lgShk{20%{transform:translateX(10px)}40%{transform:translateX(-9px)}60%{transform:translateX(6px)}80%{transform:translateX(-3px)}}

/* ---- پیام کمکی زیر فرم ---- */
.lghint{text-align:center;font-size:12px;color:var(--m);line-height:1.9;opacity:.9}
.lghint b{color:var(--t);font-weight:600}

/* ---- موفقیت ورود ---- */
.lgok{position:absolute;inset:0;z-index:5;border-radius:inherit;display:grid;place-items:center;
  background:color-mix(in srgb,var(--bg,#0a0e2a) 78%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:lgFade .3s both}
.lgok div{display:flex;flex-direction:column;align-items:center;gap:12px;font-weight:700;color:var(--t)}
.lgok svg{width:92px;height:92px}
.lgok circle{fill:none;stroke:var(--a,#5eead4);stroke-width:4;stroke-dasharray:289;stroke-dashoffset:289;animation:lgDraw .6s .05s ease forwards;transform-origin:center;transform:rotate(-90deg)}
.lgok path{fill:none;stroke:var(--v,#a78bfa);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:lgDraw .4s .5s ease forwards}
@keyframes lgDraw{to{stroke-dashoffset:0}}
@keyframes lgFade{from{opacity:0}to{opacity:1}}
.lgc.lgout{animation:lgOut .55s .7s ease forwards!important}
@keyframes lgOut{to{opacity:0;transform:scale(1.06);filter:blur(8px)}}

/* ---- تم و حالت شب/روز ---- */
.lgth{gap:8px;align-items:center;flex-wrap:wrap}
.lgth .acc{transition:transform .2s,box-shadow .2s}
.lgth .acc:hover{transform:scale(1.18)}

/* ---- موبایل: سبک‌تر و فشرده‌تر ---- */
@media(max-width:899px){
  #lg .lgc,#v-login .lgc{width:min(420px,100%)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .lgfl span{font-size:18px}
}
@media(max-height:640px){.lgform{gap:10px;padding-block:22px 14px}#lg .lgl,#v-login .logo{display:none!important}}
@media(prefers-reduced-motion:reduce){
  #lg,#v-login .lgw,.lgfl span,.lgbg i,#lg .lgc::after,#v-login .lgc::after,.lgb::before,.lgx::before,#lg .lgl,#v-login .logo,.bmark,#lg .lgt,#v-login .lgt,.lgb,.lgx{animation:none!important}
  .lgfl{display:none}
}