/* ═══════════════════════════════════════════════════════════════
   KIRISH EKRANI
   Karkas luxsms loyihasidan: chapda forma (brend tepada, izoh pastda),
   o'ngda DIAGONAL kesilgan brend paneli.

   ⚠️ Ranglar luxsms dan OLINMAGAN. U teal aksentli, bizniki esa panelning
      o'zi bilan bir xil — brend ko'ki (--brand). Shu sababli bu yerda
      birorta yangi "o'ylab topilgan" rang yo'q: hammasi lux.css
      tokenlaridan yoki shulardan hosil qilingan uchta panel tokenidan.

   ⚠️ Nomlar `.login-*` prefiksi bilan: lux.css dagi `.auth*` boshqa
      dizayn (markazlashgan karta) va u bilan to'qnashmasligi kerak.

   ⚠️ Kirish ekrani IKKALA temada ham qorong'i qoladi — bu ataylab:
      panelga kirishdan oldingi ekran o'z shaxsiga ega.
   ═══════════════════════════════════════════════════════════════ */

.login {
  /* O'ng paneldagi chuqur ko'k — brendning quyuqlashtirilgan versiyasi. */
  --login-panel-1: #054E68;
  --login-panel-2: #02202C;
  --login-on-panel: rgba(232, 241, 247, .78);

  /* Tema qanday bo'lishidan qat'i nazar — qorong'i. */
  --bg-base: #000000;
  --surface-1: #0E1114;
  --surface-2: #161A1F;
  --surface-3: #1E242B;
  --border: #232A32;
  --border-strong: #313A45;
  --text-primary: #F2F5F7;
  --text-secondary: #9BA7B4;
  --text-muted: #6B7885;
  --brand: #01C0F6;
  --brand-solid: #01C0F6;
  --on-brand: #002430;
  --good: #22C55E;
  --critical: #EF4444;

  color-scheme: dark;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg-base);
  color: var(--text-primary);
}

/* O'ng diagonal panel — FAQAT bezak, bosishni to'smaydi.
   `clip-path` diagonalni beradi: tepada 38% dan, pastda 62% dan. */
.login-panel {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  clip-path: polygon(38% 0, 100% 0, 100% 100%, 62% 100%);
  background:
    url('/static/img/login-poly.svg') center / cover no-repeat,
    linear-gradient(155deg, var(--login-panel-1), var(--login-panel-2));
}

/* Yuqori-chapdan yengil nur + pastki-o'ngda brend gardishi */
.login-panel::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(200deg, rgba(255, 255, 255, .07) 0%, transparent 45%),
    radial-gradient(52% 52% at 100% 100%, rgba(1, 192, 246, .22) 0%, transparent 70%);
}

/* ---- Chap ustun: brend + forma + izoh ---- */
.login-left {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 96px 5vw;
}

.login-col { width: 100%; max-width: 380px; }

.login-brand {
  position: absolute; top: 40px; left: 5vw;
  display: flex; align-items: center; gap: 14px;
}
.login-brand img { height: 48px; width: auto; display: block; }

.login-sub {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .4px;
  color: var(--text-muted);
}

.login-title { font-size: 30px; font-weight: 600; letter-spacing: -.5px; margin: 0 0 6px; }
.login-lead { font-size: 13.5px; color: var(--text-secondary); margin: 0 0 26px; }

.login-strip {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--good); margin-bottom: 18px;
}

.login-err {
  background: rgba(239, 68, 68, .1);
  border: 1px solid rgba(239, 68, 68, .3);
  color: var(--critical);
  padding: 10px 12px; border-radius: 10px; font-size: 13px; margin-top: 14px;
}

.login-foot {
  position: absolute; bottom: 34px; left: 5vw;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
}
.login-foot .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); }

/* Kirish ekranidagi maydonlar panelnikidan yiriqroq — forma yolg'iz
   turgani uchun u yerda zichlik shart emas. */
.login input {
  padding: 12px 14px; border-radius: 10px; font-size: 14px;
  min-height: 46px; background: var(--surface-2);
}
.login input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(1, 192, 246, .12);
  outline: none;
}
.login .field > label { font-size: 12.5px; color: var(--text-secondary); }

.login-submit {
  width: 100%; justify-content: center;
  padding: 13px; font-size: 14.5px; border-radius: 10px;
  margin-top: 18px;
}

/* ---- O'ng ustun: salomlashuv ---- */
.login-right {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-end;
  text-align: right;
  padding: 96px 6vw;
  color: #fff;
}
.login-right h2 {
  font-size: clamp(40px, 5vw, 68px); line-height: 1.05;
  letter-spacing: -1.6px; font-weight: 600; margin: 0 0 22px;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .35);
}
.login-right p {
  max-width: 440px; margin: 0;
  font-size: clamp(14px, 1.1vw, 17px); line-height: 1.6;
  color: var(--login-on-panel);
}
.login-pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 24px; padding: 8px 16px; border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase; color: #fff;
}

/* ---- Tor ekran: panel tepaga, forma pastga ---- */
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login-panel { clip-path: polygon(0 0, 100% 0, 100% 74%, 0 100%); }

  .login-right {
    order: -1;
    align-items: flex-start; text-align: left;
    padding: 84px 24px 56px;
    min-height: 40vh; justify-content: flex-end;
  }
  .login-right h2 { font-size: clamp(30px, 8vw, 42px); }

  .login-left { padding: 36px 24px 80px; justify-content: flex-start; }
  .login-col { max-width: none; }

  .login-brand { top: 26px; left: 24px; }
  .login-foot { left: 24px; bottom: 24px; }
}