* { box-sizing: border-box; }
:root { --gold:#eab84f; --gold-bright:#ffd875; }
html, body { min-height:100%; }
body { margin:0; color:#fff; font-family:"Vazirmatn",Tahoma,sans-serif; background:#080d15; }
.login-page {
  min-height:100vh; display:flex; flex-direction:column; position:relative; isolation:isolate;
  overflow:hidden; padding:0 4.2vw;
  background:
    linear-gradient(90deg,rgba(3,7,13,.22),rgba(3,7,13,.34)),
    url("images/login-desktop-bg.png") center 48%/cover no-repeat;
}
.login-page::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(4,8,14,.42),rgba(4,8,14,.08) 38%,rgba(4,8,14,.62));
}
.topbar,.footer {
  min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-bottom:1px solid rgba(234,184,79,.55); color:var(--gold-bright); position:relative;
}
.brand { direction:ltr; display:flex; align-items:center; gap:14px; font:700 21px Georgia,serif; letter-spacing:.5px; }
.crown { font-size:30px; color:var(--gold-bright); }
.top-tag { font-size:14px; font-weight:600; }
.top-tag i { color:#fff; padding:0 9px; font-style:normal; }
.login-layout {
  width:min(940px,100%); margin:auto; display:grid; grid-template-columns:.88fr 1.12fr;
  border:1px solid rgba(255,211,119,.9); border-radius:22px; overflow:hidden;
  background:rgba(7,12,20,.96); box-shadow:0 24px 80px rgba(0,0,0,.62),0 0 35px rgba(234,184,79,.12);
  position:relative;
}
.clan-panel {
  min-height:490px; padding:42px 24px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(ellipse at center,rgba(74,48,17,.28),rgba(5,9,15,.18) 70%);
  border-left:1px solid rgba(234,184,79,.42);
}
.crest {
  width:108px;height:108px;border-radius:50%;display:grid;place-items:center;
  color:var(--gold-bright);font-size:72px;border:2px solid var(--gold);
  box-shadow:0 0 0 7px rgba(234,184,79,.09),inset 0 0 25px rgba(234,184,79,.2),0 0 30px rgba(234,184,79,.2);
  margin-bottom:22px;
}
.clan-name { color:var(--gold-bright);font:800 40px Georgia,serif;letter-spacing:1px;text-shadow:0 3px 12px #000; }
.clan-name small { display:block;font-size:13px;line-height:1; }
.clan-caption { font:700 17px Georgia,serif;letter-spacing:1.4px;margin-top:17px; }
.ornament { display:flex;align-items:center;gap:13px;color:var(--gold);margin:18px 0 8px; }
.ornament span { width:65px;height:1px;background:linear-gradient(90deg,transparent,var(--gold)); }
.ornament span:last-child { transform:rotate(180deg); }
.clan-tag { color:var(--gold-bright);font:700 19px Georgia,serif;letter-spacing:2px; }
.clan-panel p { color:#e9dfce;font-size:14px;margin-top:22px; }
.clan-panel p b { color:var(--gold);padding:0 5px; }
.form-panel { padding:44px clamp(26px,4vw,58px) 34px;text-align:center; }
.form-crown { color:var(--gold-bright);font-size:34px;line-height:1; }
h1 { color:var(--gold-bright);font-size:clamp(23px,2.4vw,29px);margin:12px 0 7px;font-weight:800; }
.subtitle { color:#c9c5bf;font-size:13px;margin:0 0 28px; }
form { display:flex;flex-direction:column;gap:17px; }
.field {
  min-height:60px;display:flex;align-items:center;gap:12px;padding:0 16px;
  border:1px solid #596170;border-radius:12px;background:linear-gradient(110deg,rgba(22,29,41,.96),rgba(9,15,24,.96));
  box-shadow:inset 0 1px 8px rgba(0,0,0,.35);transition:border-color .2s,box-shadow .2s;
}
.field:focus-within { border-color:var(--gold);box-shadow:0 0 0 3px rgba(234,184,79,.12); }
.field-icon { color:var(--gold);font-size:22px; }
.field input {
  min-width:0;width:100%;border:0;outline:0;background:transparent;color:#fff;
  font:500 15px "Vazirmatn",Tahoma,sans-serif;text-align:right;
}
.field input::placeholder { color:#b9b6b3;opacity:1; }
.show-password { border:0;background:transparent;color:#c8b27e;font-size:21px;cursor:pointer; }
.form-options { display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px; }
.remember { display:inline-flex;align-items:center;gap:9px;color:#e7e1d7;cursor:pointer; }
.remember input { position:absolute;opacity:0; }
.custom-check { width:18px;height:18px;border:1px solid #b68b37;border-radius:4px;display:inline-block;position:relative; }
.remember input:checked+.custom-check { background:linear-gradient(135deg,#ffe18a,#bd8125); }
.remember input:checked+.custom-check::after { content:"✓";color:#201608;position:absolute;inset:-3px 0 0;text-align:center;font-weight:900; }
.forgot { color:#e8bd61;text-decoration:none; }
.forgot:hover { text-decoration:underline; }
.submit-button {
  min-height:60px;border:1px solid #ffe08a;border-radius:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:18px;color:#211707;
  font:800 18px "Vazirmatn",Tahoma,sans-serif;
  background:linear-gradient(180deg,#ffdc76 0%,#e5a92f 52%,#b97919 100%);
  box-shadow:0 7px 0 #70470f,0 12px 24px rgba(0,0,0,.35),inset 0 1px 0 #fff0b8;
  transition:transform .15s,filter .15s;margin-top:3px;
}
.submit-button:hover { filter:brightness(1.08);transform:translateY(-2px); }
.submit-button:active { transform:translateY(3px);box-shadow:0 3px 0 #70470f; }
.submit-button b { font-size:23px; }
.form-footer { display:flex;align-items:center;justify-content:center;gap:12px;color:#b5a17b;font-size:12px;margin-top:26px; }
.form-footer span { height:1px;width:45px;background:linear-gradient(90deg,transparent,#a57b31); }
.form-footer span:last-child { transform:rotate(180deg); }
.footer { min-height:58px;border-top:1px solid rgba(234,184,79,.4);border-bottom:0;font-size:12px;font-weight:600; }
.footer>span:first-child { direction:ltr;font:700 13px Georgia,serif; }
.footer-tag { font:700 15px Georgia,serif;letter-spacing:1px; }

@media(max-width:760px) {
  .login-page {
    min-height:100svh;padding:0 15px;
    background:linear-gradient(180deg,rgba(4,8,14,.30),rgba(4,8,14,.68)),
      url("images/login-mobile-bg.png") center top/cover no-repeat;
  }
  .topbar { min-height:56px;justify-content:center; }
  .brand { font-size:17px;gap:9px; }
  .crown { font-size:25px; }
  .top-tag { display:none; }
  .login-layout { width:min(430px,100%);margin:22px auto;display:flex;flex-direction:column;border-radius:18px; }
  .clan-panel {
    min-height:auto;padding:22px 14px 17px;border-left:0;border-bottom:1px solid rgba(234,184,79,.38);
    background:radial-gradient(ellipse at center,rgba(74,48,17,.25),rgba(5,9,15,.35) 72%);
  }
  .crest { width:70px;height:70px;font-size:48px;margin-bottom:10px; }
  .clan-name { font-size:29px; }
  .clan-name small { font-size:10px; }
  .clan-caption { font-size:13px;margin-top:8px; }
  .ornament { margin:8px 0 4px; }
  .clan-tag { font-size:15px; }
  .clan-panel p { margin:7px 0 0;font-size:11px; }
  .form-panel { padding:24px 20px 23px; }
  .form-crown { font-size:27px; }
  h1 { font-size:21px;margin-top:8px; }
  .subtitle { font-size:12px;margin-bottom:19px; }
  form { gap:13px; }
  .field { min-height:54px;padding:0 12px; }
  .field input { font-size:14px; }
  .form-options { font-size:12px; }
  .forgot { display:none; }
  .submit-button { min-height:55px;font-size:17px; }
  .form-footer { margin-top:20px; }
  .footer { justify-content:center;min-height:46px; }
  .footer>span:first-child,.footer>span:last-child { display:none; }
}
@media(max-width:360px) {
  .login-page { padding:0 9px; }
  .login-layout { margin:14px auto; }
  .form-panel { padding:20px 14px; }
  .clan-panel { padding:18px 10px 14px; }
  .form-options { font-size:11px; }
}
.crest {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.crest-logo {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 64px !important;
    max-height: 64px !important;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #eab84f;
    box-shadow: 0 0 18px rgba(234, 184, 79, 0.35);
}

.clan-telegram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    padding: 9px 18px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 30px;
    color: #fff;
    background: rgba(255,255,255,.07);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: all .25s ease;
}

    .clan-telegram:hover {
        background: #229ED9;
        border-color: #229ED9;
        color: #fff;
        transform: translateY(-2px);
    }