/* ==========================================================================
   صفحه ورود — لایه هماهنگی
   --------------------------------------------------------------------------
   پس از login.css بار می‌شود و آن را با پالت گرم و زبان بصری
   وب‌سایت هماهنگ می‌کند.

   -------------------------------------------------------------------------
   چرا لایه جدا، نه بازنویسی login.css

   ساختار صفحه ورود درست است: دو ستون، نشان در سمت هویت، فرم در سمت
   دیگر. مشکلش فقط رنگ و پرداخت بود.

   بازنویسی کامل یعنی ریسک شکستن چیزی که کار می‌کند. لایه‌ی روی آن،
   فقط آنچه را لازم است عوض می‌کند.
   ========================================================================== */

:root {
  --lg-teal:      #18B3B7;
  --lg-teal-dp:   #0E8A8D;
  --lg-teal-dk:   #0A6669;
  --lg-brass:     #DFAE38;

  --lg-ink:       #16211F;
  --lg-paper:     #F7F5F2;
  --lg-sand:      #EFECE7;
  --lg-line:      rgba(22, 33, 31, .10);
  --lg-line-mid:  rgba(22, 33, 31, .17);
  --lg-soft:      #4A5654;
  --lg-mute:      #7C8785;
}

/*
| زمینه گرم — همان که در سایت و کارتابل است.
|
| کاربر از سایت به ورود می‌آید؛ اگر زمینه بپرد، حس دو سامانه جدا
| می‌دهد.
*/
body.lg {
  background: var(--lg-paper);
  color: var(--lg-ink);
}

/* ========================================================== ستون هویت */

/*
| سبز تیره به‌جای مشکی.
|
| مشکی خالص، سرد و بی‌هویت است. این سبز از خانواده فیروزه لوگو
| می‌آید — تیره ولی زنده، و با هاله فیروزه‌ای رویش یک‌دست.
*/
.lg-art {
  background: linear-gradient(160deg, #0C1A19 0%, #122422 55%, #0A1615 100%);
  color: #EFEBE4;
}

.lg-art__grid {
  background-image:
    linear-gradient(rgba(24, 179, 183, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 179, 183, .07) 1px, transparent 1px);
  background-size: 46px 46px;
}

.lg-art__glow {
  background: radial-gradient(circle, rgba(24, 179, 183, .20), transparent 62%);
}

/*
| نوار سه‌رنگ زیر نشان.
|
| تا امروز یک گرادیان بود که رنگ‌ها را در هم می‌برد. سه بخش جدا،
| امضای برند را صریح می‌گوید: فیروزه، طلایی، خاکستری.
*/
.lg-art__rule {
  display: flex !important;
  gap: 4px;
  background: none !important;
  height: 4px;
  width: 116px !important;
  overflow: hidden;
  border-radius: 2px;
}

.lg-art__rule span {
  flex: 1;
  border-radius: 2px;
}

.lg-art__rule span:nth-child(1) { background: var(--lg-teal); }
.lg-art__rule span:nth-child(2) { background: var(--lg-brass); }
.lg-art__rule span:nth-child(3) { background: rgba(239, 235, 228, .38); }

.lg-art__name { color: #FFFFFF; }
.lg-art__claim { color: rgba(239, 235, 228, .72); }

/*
| نکته‌های پایین ستون هویت.
|
| به‌جای متن ساده، هر کدام یک نشان فیروزه‌ای می‌گیرد — ریتم می‌سازد
| و خواندنش آسان‌تر است.
*/
.lg-art__foot {
  color: rgba(239, 235, 228, .62);
  border-top-color: rgba(239, 235, 228, .12);
}

/* ========================================================== ستون فرم */

.lg-form {
  background: var(--lg-paper);
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
| کارت فرم — با سایه گرم.
|
| تا امروز فرم مستقیم روی زمینه بود. کارت، تمرکز را روی آن می‌برد و
| صفحه را از «فرم شناور» به «سند» تبدیل می‌کند.
*/
.lg-card {
  width: 100%;
  max-width: 420px;
  background: #FFFFFF;
  border: 1px solid var(--lg-line);
  border-radius: 20px;
  padding: 40px 36px;
  box-shadow: 0 14px 40px rgba(22, 33, 31, .08),
              0 2px 6px rgba(22, 33, 31, .04);
}

.lg-form h1 {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--lg-ink);
  margin: 0 0 6px;
  line-height: 1.5;
}

.lg-card__sub {
  color: var(--lg-mute);
  font-size: 14px;
  margin: 0 0 28px;
}

/* ---------------------------------------- فیلد */

.lg-card .field { margin-bottom: 18px; }

.lg-card .field label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--lg-soft);
  margin-bottom: 8px;
}

.lg-card .field input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--lg-line-mid);
  border-radius: 12px;
  background: #FFFFFF;
  font-family: inherit;
  font-size: 15.5px;
  color: var(--lg-ink);
  transition: border-color .16s ease, box-shadow .16s ease;
}

.lg-card .field input::placeholder { color: #A8A29A; }

.lg-card .field input:focus {
  outline: 0;
  border-color: var(--lg-teal);
  box-shadow: 0 0 0 3px rgba(24, 179, 183, .16);
}

/*
| فیلد نام کاربری و رمز چپ‌به‌راست‌اند.
|
| هر دو لاتین‌اند و در حالت راست‌به‌چپ، مکان‌نما جای غلط می‌ایستد.
*/
.lg-card .field input[name="username"],
.lg-card .field input[type="password"] {
  direction: ltr;
  text-align: left;
}

/* ---------------------------------------- دکمه */

.lg-submit {
  width: 100%;
  padding: 14px;
  border: 0;
  border-radius: 12px;
  background: var(--lg-teal-dp);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(14, 138, 141, .3);
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.lg-submit:hover {
  background: var(--lg-teal-dk);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(14, 138, 141, .36);
}

.lg-submit:active { transform: none; }

/* ---------------------------------------- خطا */

.lg-card .flash--err {
  background: #FBECEA;
  color: #8E3227;
  border: 1px solid rgba(192, 72, 60, .22);
  border-inline-start: 3px solid #C0483C;
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14px;
  line-height: 1.85;
  margin-bottom: 20px;
}

.lg-card .flash--ok {
  background: #E4F6F6;
  color: var(--lg-teal-dk);
  border: 1px solid rgba(24, 179, 183, .24);
  border-inline-start: 3px solid var(--lg-teal);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14px;
  margin-bottom: 20px;
}

/* ---------------------------------------- پانویس */

.lg-card__foot {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--lg-line);
  font-size: 13px;
  color: var(--lg-mute);
  text-align: center;
  line-height: 2;
}

.lg-card__foot a {
  color: var(--lg-teal-dp);
  font-weight: 700;
  text-decoration: none;
}

.lg-card__foot a:hover { color: var(--lg-teal-dk); }

/*
| بازگشت به سایت.
|
| کسی که اشتباهی به صفحه ورود آمده — یا فقط می‌خواهد سایت را ببیند
| — نباید در بن‌بست بماند.
*/
.lg-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 7px 16px;
  border-radius: 100px;
  border: 1px solid var(--lg-line-mid);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--lg-soft);
  transition: border-color .16s ease, color .16s ease;
}

.lg-back:hover { border-color: var(--lg-teal); color: var(--lg-teal-dp); }

/* ========================================================== واکنش‌گرا */

@media (max-width: 900px) {
  .lg-wrap { grid-template-columns: 1fr; }

  /*
  | روی موبایل ستون هویت به یک نوار کوتاه بالای فرم تبدیل می‌شود.
  |
  | حذف کاملش، صفحه را بی‌هویت می‌کند؛ نگه داشتن کاملش، فرم را زیر
  | خط دید می‌برد.
  */
  .lg-art {
    min-height: 190px;
    padding: 28px 20px;
  }

  .lg-art__foot { display: none; }

  .lg-form { padding: 26px 18px 40px; }

  .lg-card {
    max-width: 460px;
    padding: 30px 24px;
    box-shadow: 0 6px 20px rgba(22, 33, 31, .07);
  }
}

/* ========================================================== حالت شب */

/*
| همان پالت شب پورتال (theme-v2) — نه قهوه‌ای گرم قبلی، که با کارتابل
| جور نبود. متغیرهای lg بازتعریف می‌شوند؛ قاعده‌های بالا خودشان پیروی
| می‌کنند. چند جای سفید ثابت جدا هدف گرفته شده‌اند.
*/
html[data-theme="dark"] {
  --lg-teal:      #2EC4C8;
  --lg-teal-dp:   #2EC4C8;
  --lg-teal-dk:   #5BD3D6;
  --lg-brass:     #E5B84A;
  --lg-ink:       #E4E6E8;
  --lg-paper:     #121416;
  --lg-sand:      #1A1D20;
  --lg-line:      rgba(228, 230, 232, .08);
  --lg-line-mid:  rgba(228, 230, 232, .16);
  --lg-soft:      #B3B8BD;
  --lg-mute:      #8A9096;
}

html[data-theme="dark"] body.lg,
html[data-theme="dark"] .lg-form { background: var(--lg-paper); }

html[data-theme="dark"] .lg-card {
  background: #1A1D20;
  border-color: var(--lg-line-mid);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
}

html[data-theme="dark"] .lg-form h1 { color: var(--lg-ink); }

html[data-theme="dark"] .lg-card .field input {
  background: #212428;
  border-color: var(--lg-line-mid);
  color: var(--lg-ink);
}
html[data-theme="dark"] .lg-card .field input::placeholder { color: var(--lg-mute); }

html[data-theme="dark"] .lg-submit       { color: #0E1214; }
html[data-theme="dark"] .lg-submit:hover { color: #0E1214; }

html[data-theme="dark"] .lg-back {
  background: #1A1D20;
  border-color: var(--lg-line-mid);
  color: var(--lg-soft);
}

html[data-theme="dark"] .lg-card .flash--err { background: #33201E; color: #F2766B; border-color: rgba(242, 118, 107, .35); }
html[data-theme="dark"] .lg-card .flash--ok  { background: #16302F; color: #7FDDE0; border-color: rgba(46, 196, 200, .35); }
html[data-theme="dark"] .lg-card .flash--warn{ background: #2C2615; color: #E5B84A; border-color: rgba(229, 184, 74, .35); }

/* کلید روز و شب صفحه ورود */
.lg-theme {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: 14px;
  z-index: 5;
  width: 38px; height: 38px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--lg-line-mid);
  border-radius: 10px;
  background: color-mix(in srgb, var(--lg-paper) 85%, transparent);
  color: var(--lg-soft);
  cursor: pointer;
}
.lg-theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.lg-theme .m { fill: currentColor; stroke: none; }
.lg-theme .s { display: none; }
html[data-theme="dark"] .lg-theme .s { display: block; }
html[data-theme="dark"] .lg-theme .m { display: none; }

/* ========================================================== حرکت */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
}


/* ==================================================== تغییر رمز */

/*
| دکمه‌ای که باید مثل پیوند دیده شود.
|
| «خروج از حساب» باید فرم باشد (به‌خاطر CSRF) ولی نباید مثل دکمه
| اصلی جلب توجه کند.
*/
.lg-card__foot .linkish {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: var(--lg-teal-dp);
  cursor: pointer;
}

.lg-card__foot .linkish:hover { color: var(--lg-teal-dk); }

/* هشدار رمز اجباری */
.lg-card .flash--warn {
  background: #FBF3DF;
  color: #7A5C10;
  border: 1px solid rgba(223, 174, 56, .3);
  border-inline-start: 3px solid var(--lg-brass);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 14px;
  line-height: 1.85;
  margin-bottom: 20px;
}

/* خطای فیلد */
.lg-card .field__error {
  color: #C0483C;
  font-size: 12.5px;
  margin-top: 6px;
}

.lg-card .field__hint {
  color: var(--lg-mute);
  font-size: 12.5px;
  margin-top: 6px;
}

.lg-card .field input.is-invalid {
  border-color: #C0483C;
  box-shadow: 0 0 0 3px rgba(192, 72, 60, .12);
}


/* ==================================================== نشان بدون پلاک */

/*
| پلاک روشن زیر نشان حذف شد.
|
| کارش این بود که بخش خاکستری لوگو روی زمینه تیره محو نشود — ولی
| نتیجه‌اش این بود که نشان مثل برچسبی به نظر می‌رسید که روی صفحه
| چسبانده شده، نه بخشی از آن.
|
| حالا نسخه زمینه‌تیره تصویر به کار می‌رود که خودش خوانا است، و
| نشان مستقیم روی زمینه می‌نشیند.
*/
.lg-art__mark .logo__mark {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box;
  height: 104px;
}

@media screen and (max-width: 1000px) {
  .lg-art__mark .logo__mark { height: 72px; padding: 0 !important; }
}

@media screen and (max-width: 480px) {
  .lg-art__mark .logo__mark { height: 60px; padding: 0 !important; }
}