/* صفحه‌ی ورود پنل صاد — مستقل از style.css قدیمی */
:root{
  --bg:#F6F1E6;
  --ink:#211E1A;
  --muted:#8B8477;
  --sage:#AEC49C;
  --sage-deep:#6C8F58;
  --amber:#E7AC3F;
  --amber-ink:#5A3E0C;
  --clay:#CC7C57;
  --line:#EAE2D2;
  --ok:#3E7A4E;
  --err:#B4452C;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:'Vazirmatn', sans-serif;
  background:var(--bg);
  color:var(--ink);
  direction:rtl;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  overflow:hidden;
  font-feature-settings:"tnum" 1;
}
::selection{background:var(--amber); color:#1B1917;}

/* ---------- صحنه‌ی پس‌زمینه ---------- */
.scene{position:fixed; inset:0; z-index:0; pointer-events:none;}
.scene svg{width:100%; height:100%; display:block;}

@keyframes sway{
  0%,100%{transform:rotate(-1.4deg);}
  50%{transform:rotate(1.4deg);}
}
@keyframes glowPulse{
  0%,100%{opacity:.55;}
  50%{opacity:.9;}
}
@keyframes flicker{
  0%,100%{opacity:1;}
  45%{opacity:.82;}
  70%{opacity:.95;}
}
@keyframes floatMote{
  0%{transform:translateY(0) translateX(0); opacity:0;}
  15%{opacity:.7;}
  85%{opacity:.5;}
  100%{transform:translateY(-120px) translateX(18px); opacity:0;}
}
.chandelier{
  transform-box:view-box;
  transform-origin:600px 0px;
  animation:sway 7s ease-in-out infinite;
}
.chandelier-glow{animation:glowPulse 5s ease-in-out infinite;}
.flame{animation:flicker 3.2s ease-in-out infinite;}
.flame:nth-of-type(2){animation-delay:.7s;}
.flame:nth-of-type(3){animation-delay:1.4s;}
.mote{animation:floatMote 11s linear infinite;}
.mote:nth-child(2){animation-delay:3s;}
.mote:nth-child(3){animation-delay:6s;}
.mote:nth-child(4){animation-delay:8.5s;}

/* ---------- کارت شیشه‌ای ---------- */
.stage{position:relative; z-index:1; perspective:1100px; width:100%; max-width:400px;}
.card{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  border:1px solid rgba(255,255,255,.7);
  border-radius:28px;
  padding:34px 30px 30px;
  box-shadow:0 26px 60px -28px rgba(33,30,26,.45), inset 0 1px 0 rgba(255,255,255,.8);
  position:relative; overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .18s cubic-bezier(.22,.9,.3,1), box-shadow .25s ease;
  animation:cardIn .7s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes cardIn{from{opacity:0; transform:translateY(22px) scale(.97);} to{opacity:1; transform:none;}}
.glare{
  position:absolute; inset:-40%;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.55), transparent 45%);
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.stage:hover .glare{opacity:1;}

.brand{display:flex; flex-direction:column; align-items:center; gap:9px; margin-bottom:22px;}
.brand img{width:60px; height:60px; border-radius:50%; box-shadow:0 8px 20px -10px rgba(33,30,26,.5);}
.brand .name{font-size:20px; font-weight:800; letter-spacing:.5px;}
.brand .domain{font-size:10px; color:var(--muted); letter-spacing:2.5px; font-weight:600;}
.welcome{text-align:center; font-size:13px; color:var(--muted); margin-bottom:22px;}

.field{position:relative; margin-bottom:14px;}
.field label{
  display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:6px; padding-right:4px;
}
.field input{
  width:100%; font-family:inherit; font-size:14px; color:var(--ink);
  background:rgba(255,255,255,.75);
  border:1px solid rgba(234,226,210,.9);
  border-radius:15px; padding:13px 16px;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field input::placeholder{color:#B3ABA0;}
.field input:focus{
  outline:none; background:#fff;
  border-color:var(--sage);
  box-shadow:0 0 0 3px rgba(174,196,156,.35);
}
.field.has-toggle input{padding-left:46px;}
.eye{
  position:absolute; left:8px; bottom:6px;
  width:34px; height:34px; border:0; border-radius:10px; background:transparent;
  cursor:pointer; color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, color .18s ease;
}
.eye:hover{background:rgba(234,226,210,.8); color:var(--ink);}
.eye:focus-visible{outline:2px solid var(--sage); outline-offset:2px;}
.eye svg{width:19px; height:19px;}
.eye .icon-off{display:none;}
.eye.shown .icon-on{display:none;}
.eye.shown .icon-off{display:block;}

.msg{
  font-size:12.5px; border-radius:13px; padding:10px 14px; margin-bottom:14px;
  display:none; line-height:1.8;
}
.msg.show{display:block; animation:shake .4s ease;}
.msg.error{background:rgba(180,69,44,.12); color:var(--err); border:1px solid rgba(180,69,44,.25);}
@keyframes shake{
  0%,100%{transform:translateX(0);} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);}
}

.submit{
  width:100%; height:50px; margin-top:6px;
  font-family:inherit; font-size:15px; font-weight:700; color:#1B1917;
  background:var(--amber); border:0; border-radius:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:9px;
  position:relative; overflow:hidden;
  transition:background .3s ease, color .3s ease, transform .18s ease, box-shadow .25s ease;
}
.submit:hover:not(:disabled){transform:translateY(-2px); box-shadow:0 14px 26px -14px rgba(231,172,63,.9);}
.submit:active:not(:disabled){transform:translateY(0);}
.submit:disabled{cursor:default;}
.submit .label{transition:opacity .2s ease;}

.spinner{
  display:none; width:20px; height:20px; border-radius:50%;
  border:2.5px solid rgba(27,25,23,.25); border-top-color:#1B1917;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

.check{display:none; width:22px; height:22px;}
.check path{
  stroke:#fff; stroke-width:3.4; fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:30; stroke-dashoffset:30;
}

.submit.loading .label{display:none;}
.submit.loading .spinner{display:block;}
.submit.success{background:var(--ok); color:#fff;}
.submit.success .label{display:block;}
.submit.success .spinner{display:none;}
.submit.success .check{display:block;}
.submit.success .check path{animation:drawCheck .45s cubic-bezier(.22,.9,.3,1) forwards;}
@keyframes drawCheck{to{stroke-dashoffset:0;}}

.foot{text-align:center; font-size:11px; color:var(--muted); margin-top:18px;}
noscript .msg{display:block; background:rgba(231,172,63,.15); color:var(--amber-ink); border:1px solid rgba(231,172,63,.4);}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  .card{transform:none !important;}
}
@media (max-width:520px){
  body{padding:16px; overflow:auto;}
  .card{padding:28px 22px 24px; border-radius:24px;}
  .brand img{width:52px; height:52px;}
}