/* ==================================================================
   صفحات ورود / ثبت نام — گرافیک متحرک و شیشه ای
   سه تم مجزا: مدیر (بنفش-نیلی) / استاد (فیروزه ای-آبی) / هنرجو (صورتی-نارنجی)
   ================================================================== */

.auth-body {
  min-height:100vh; margin:0;
  display:flex; align-items:center; justify-content:center;
  padding:26px 18px; position:relative; overflow:hidden;
  background:#120c2e;
}
/* سافاری موبایل ارتفاع نوار آدرس را در 100vh حساب نمی کند */
@supports (min-height: 100dvh) { .auth-body { min-height:100dvh; } }

/* ---------------------------------------------- تم ها */
.auth-body[data-theme="admin"]   { --a1:#7c4dff; --a2:#4338ca; --a3:#c026d3; --emoji:"🛡️"; }
.auth-body[data-theme="teacher"] { --a1:#14b8a6; --a2:#0284c7; --a3:#22d3ee; --emoji:"🎼"; }
.auth-body[data-theme="student"] { --a1:#f857a6; --a2:#ff6b45; --a3:#ffae00; --emoji:"🎵"; }
.auth-body[data-theme="register"]{ --a1:#8b5cf6; --a2:#ec4899; --a3:#f59e0b; --emoji:"✨"; }

/* ---------------------------------------------- پس زمینهٔ زنده */
.auth-bg { position:absolute; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(ellipse at 18% 12%, var(--a1) 0%, transparent 48%),
    radial-gradient(ellipse at 84% 22%, var(--a3) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 92%, var(--a2) 0%, transparent 52%),
    linear-gradient(160deg,#150e35 0%,#0d0824 100%);
}
.auth-bg::after { content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:26px 26px; opacity:.5;
}

.auth-orb { position:absolute; border-radius:50%; filter:blur(72px); opacity:.55; }
.auth-orb.o1 { width:480px; height:480px; background:var(--a1); top:-140px; right:-120px; animation:orbA 22s ease-in-out infinite; }
.auth-orb.o2 { width:400px; height:400px; background:var(--a3); bottom:-130px; left:-110px; animation:orbB 26s ease-in-out infinite; }
.auth-orb.o3 { width:300px; height:300px; background:var(--a2); top:46%; left:52%; opacity:.4; animation:orbA 30s ease-in-out infinite reverse; }
@keyframes orbA { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-48px,52px) scale(1.16)} 66%{transform:translate(34px,-38px) scale(.92)} }
@keyframes orbB { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(56px,-46px) scale(1.2)} }

/* نت های موسیقی شناور */
.auth-notes { position:absolute; inset:0; pointer-events:none; z-index:1; }
.auth-notes i {
  position:absolute; font-style:normal; color:rgba(255,255,255,.22);
  animation:noteRise linear infinite;
}
@keyframes noteRise {
  0%   { transform:translateY(110vh) rotate(0deg) scale(.7); opacity:0; }
  10%  { opacity:.3; }
  90%  { opacity:.3; }
  100% { transform:translateY(-18vh) rotate(400deg) scale(1.15); opacity:0; }
}

/* ---------------------------------------------- موج متحرک پایین صفحه
   سه لایهٔ SVG با سرعت و جهت متفاوت؛ هر مسیر دو بار پشت سرهم رسم شده
   تا جابه جایی ۵۰٪ یک حلقهٔ کاملاً بی درز بسازد. */
.auth-waves {
  position:absolute; inset-inline:0; bottom:0; z-index:1;
  height:190px; pointer-events:none;
  /* وسط چین و تمام عرض */
  margin-inline:auto; width:100%;
  -webkit-mask-image:linear-gradient(to top, #000 62%, transparent 100%);
          mask-image:linear-gradient(to top, #000 62%, transparent 100%);
}
/* لایهٔ بیرونی نوسان عمودی را می گیرد، لایهٔ درونی (svg) حرکت افقی را */
.auth-waves .wave-layer {
  position:absolute; inset-inline:0; bottom:0; height:100%;
  will-change:transform;
}
.auth-waves svg {
  position:absolute; inset-inline-start:0; bottom:0;
  width:200%; height:100%;
  will-change:transform;
}
.auth-waves .l1 { animation:waveBob 7s   ease-in-out infinite; }
.auth-waves .l2 { animation:waveBob 9s   ease-in-out -3s   infinite; }
.auth-waves .l3 { animation:waveBob 5.5s ease-in-out -1.5s infinite; }

.auth-waves .w1 { opacity:.20; animation:waveSlide    22s linear infinite; }
.auth-waves .w2 { opacity:.14; animation:waveSlideRev 16s linear infinite; }
.auth-waves .w3 { opacity:.32; animation:waveSlide    11s linear infinite; }

@keyframes waveSlide    { from { transform:translateX(0);    } to { transform:translateX(-50%); } }
@keyframes waveSlideRev { from { transform:translateX(-50%); } to { transform:translateX(0);    } }
@keyframes waveBob      { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }

@media (max-width: 560px) { .auth-waves { height:130px; } }
@media (prefers-reduced-motion: reduce) {
  .auth-waves .wave-layer, .auth-waves svg { animation:none !important; }
}

/* ---------------------------------------------- کارت */
.auth-card {
  position:relative; z-index:5;
  width:min(430px,100%);
  padding:38px 34px 32px;
  border-radius:32px;
  background:rgba(255,255,255,.09);
  backdrop-filter:blur(34px) saturate(190%);
  -webkit-backdrop-filter:blur(34px) saturate(190%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 34px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.28);
  color:#fff;
  animation:cardIn .8s cubic-bezier(.22,1,.36,1);
}
@keyframes cardIn { from{opacity:0;transform:translateY(38px) scale(.94)} to{opacity:1;transform:none} }
.auth-card.wide { width:min(560px,100%); }

.auth-card::before {
  content:''; position:absolute; inset:-1px; border-radius:32px; padding:1px;
  background:linear-gradient(140deg,rgba(255,255,255,.5),transparent 42%,transparent 62%,rgba(255,255,255,.28));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}

/* ---------------------------------------------- سر کارت */
.auth-logo {
  width:88px; height:88px; margin:0 auto 18px;
  border-radius:28px; display:flex; align-items:center; justify-content:center;
  font-size:2.5rem;
  background:linear-gradient(135deg,var(--a1),var(--a3));
  box-shadow:0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4);
  animation:logoFloat 4.5s ease-in-out infinite;
  position:relative;
}
@keyframes logoFloat { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-11px) rotate(-5deg)} }
.auth-logo::after {
  content:''; position:absolute; inset:-9px; border-radius:34px;
  border:2px solid rgba(255,255,255,.24); animation:ringPulse 3s ease-in-out infinite;
}
@keyframes ringPulse { 0%,100%{transform:scale(1);opacity:.55} 50%{transform:scale(1.13);opacity:0} }

.auth-title { text-align:center; font-size:1.42rem; font-weight:900; margin:0 0 6px; color:#fff; }
.auth-sub { text-align:center; font-size:.86rem; color:rgba(255,255,255,.72); margin:0 0 26px; line-height:1.9; }

/* ---------------------------------------------- فرم
   ارتفاع برچسب و ورودی به صورت صریح تعیین شده تا آیکن ها (ذره بین و چشم)
   دقیقاً وسط ورودی بنشینند؛ پیش تر با مقدار ثابت حدسی تراز نبودند. */
.auth-field { margin-bottom:17px; position:relative; }
.auth-field label {
  display:block; font-size:.82rem; font-weight:700; color:rgba(255,255,255,.9);
  line-height:21px; height:21px; margin:0 0 8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.auth-input {
  width:100%; height:52px;
  padding-block:0;
  /* هر دو سمت به یک اندازه باز است تا با نمایش/مخفی کردن رمز
     (که type را عوض می کند) عرض متن نپرد */
  padding-inline:48px;
  border-radius:16px; font-size:.94rem; color:#fff; line-height:normal;
  background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.2);
  -webkit-appearance:none; appearance:none;
  transition:background .3s cubic-bezier(.22,1,.36,1),
             border-color .3s cubic-bezier(.22,1,.36,1),
             box-shadow .3s cubic-bezier(.22,1,.36,1),
             transform .3s cubic-bezier(.22,1,.36,1);
}
/* ورودی هایی که آیکن سمت مقابل ندارند فضای اضافی نگیرند */
.auth-field:not(:has(.eye)) .auth-input { padding-inline-end:16px; }
.auth-input::placeholder { color:rgba(255,255,255,.42); }
.auth-input:focus {
  outline:none; background:rgba(255,255,255,.17);
  border-color:rgba(255,255,255,.55);
  box-shadow:0 0 0 4px rgba(255,255,255,.1), 0 8px 24px rgba(0,0,0,.2);
  transform:translateY(-2px);
}
/* هر دو آیکن از بالای برچسب (۲۱px + ۸px حاشیه = ۲۹px) شروع می شوند
   و به اندازهٔ ارتفاع ورودی کشیده و در آن وسط چین می شوند */
.auth-field .fi,
.auth-field .eye {
  position:absolute; top:29px; height:52px;
  display:flex; align-items:center; justify-content:center;
  width:34px; padding:0; line-height:1;
  font-size:1.1rem;
}
.auth-field .fi {
  inset-inline-start:11px;
  color:rgba(255,255,255,.55); pointer-events:none; transition:color .3s;
}
.auth-field:focus-within .fi { color:#fff; }
.auth-field .eye {
  inset-inline-end:11px;
  color:rgba(255,255,255,.6); background:none; cursor:pointer;
  border:none; border-radius:10px;
  transition:color .25s, background .25s;
  -webkit-appearance:none; appearance:none;
}
.auth-field .eye:hover { color:#fff; background:rgba(255,255,255,.12); }
.auth-field .eye:focus-visible { outline:2px solid rgba(255,255,255,.7); outline-offset:1px; }

.auth-row { display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:22px; font-size:.83rem; }
.auth-row label { display:flex; align-items:center; gap:8px; cursor:pointer; color:rgba(255,255,255,.85); }
.auth-row input[type=checkbox] { width:17px; height:17px; accent-color:var(--a1); cursor:pointer; }
.auth-row a { color:rgba(255,255,255,.85); font-weight:600; }
.auth-row a:hover { color:#fff; text-decoration:underline; }

.auth-btn {
  width:100%; padding:16px; border-radius:16px;
  font-size:1rem; font-weight:800; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,var(--a1),var(--a3));
  box-shadow:0 14px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, filter .25s;
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.auth-btn::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.32),transparent 70%);
  transform:translateX(-130%); transition:transform .75s;
}
.auth-btn:hover { transform:translateY(-3px); box-shadow:0 20px 44px rgba(0,0,0,.42); filter:brightness(1.06); }
.auth-btn:hover::before { transform:translateX(130%); }
.auth-btn:active { transform:scale(.97); }
.auth-btn:disabled { opacity:.6; pointer-events:none; }

.auth-foot { text-align:center; margin-top:22px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16); font-size:.84rem; color:rgba(255,255,255,.7); }
.auth-foot a { color:#fff; font-weight:700; }
.auth-foot a:hover { text-decoration:underline; }

.auth-alert {
  padding:13px 17px; border-radius:14px; margin-bottom:18px;
  font-size:.85rem; font-weight:600; display:flex; align-items:flex-start; gap:10px;
  animation:shake .5s;
}
.auth-alert.error   { background:rgba(220,38,38,.22); border:1px solid rgba(248,113,113,.42); color:#fecaca; }
.auth-alert.success { background:rgba(22,163,74,.22); border:1px solid rgba(74,222,128,.42); color:#bbf7d0; }
.auth-alert.info    { background:rgba(2,132,199,.2);  border:1px solid rgba(125,211,252,.4); color:#bae6fd; }
.auth-alert.warning { background:rgba(217,119,6,.2);  border:1px solid rgba(252,211,77,.42); color:#fde68a; }
@keyframes shake { 0%,100%{transform:translateX(0)} 22%{transform:translateX(-7px)} 44%{transform:translateX(7px)} 66%{transform:translateX(-4px)} }

/* ---------------------------------------------- انتخاب درگاه ورود */
.gate-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.gate {
  display:flex; flex-direction:column; align-items:center; gap:11px; text-align:center;
  padding:26px 16px; border-radius:24px; color:#fff;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  transition:all .38s cubic-bezier(.34,1.56,.64,1);
}
.gate:hover { transform:translateY(-9px) scale(1.03); background:rgba(255,255,255,.17);
  box-shadow:0 22px 46px rgba(0,0,0,.36); color:#fff; }
.gate .g-ico { width:64px; height:64px; border-radius:20px; display:flex; align-items:center;
  justify-content:center; font-size:1.9rem; box-shadow:0 10px 26px rgba(0,0,0,.3); }
.gate.admin   .g-ico { background:linear-gradient(135deg,#7c4dff,#4338ca); }
.gate.teacher .g-ico { background:linear-gradient(135deg,#14b8a6,#0284c7); }
.gate.student .g-ico { background:linear-gradient(135deg,#f857a6,#ff6b45); }
.gate b { font-size:.95rem; }
.gate small { font-size:.75rem; color:rgba(255,255,255,.65); line-height:1.8; }

/* ---------------------------------------------- بازگشت به سایت */
.auth-back { position:absolute; top:24px; inset-inline-end:24px; z-index:6;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:99px; font-size:.84rem; font-weight:700; color:#fff;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:all .28s; }
.auth-back:hover { background:rgba(255,255,255,.22); color:#fff; transform:translateX(4px); }

/* ---------------------------------------------- قدرت رمز */
.pass-meter { height:5px; border-radius:99px; background:rgba(255,255,255,.16); margin-top:9px; overflow:hidden; }
.pass-meter i { display:block; height:100%; width:0; border-radius:99px; transition:width .4s, background .4s; }
.pass-hint { font-size:.74rem; color:rgba(255,255,255,.6); margin-top:6px; }

/* ---------------------------------------------- ریسپانسیو */
@media (max-width: 560px) {
  .auth-card { padding:30px 22px 26px; border-radius:26px; }
  .auth-logo { width:74px; height:74px; font-size:2.1rem; border-radius:24px; }
  .auth-title { font-size:1.2rem; }
  .gate-grid { grid-template-columns:1fr; }
  .gate { flex-direction:row; text-align:right; padding:18px; }
  .auth-back { top:14px; inset-inline-end:14px; padding:8px 14px; font-size:.78rem; }
}