/* Вход: фирменная панель (тёмно-синий, золотые линии, знак AB DOC антиквой) и светлая карточка с логотипом.
   Карточка светлая и в тёмной теме системы: логотип синий, ему нужен светлый лист; темнеют только фон и подпись под ней. */
:root {
  --brand-navy: #1B2741;
  --brand-gold: #CEAD6F;
  --brand-ivory: #F4EFE4;
  --gold-text: #8A6A2E;
  --gold-soft: #F9F4EA;
  --gold-focus: #A2803F;
  --bg: #F6F4EF;
  --surface: #ffffff;
  --line: #E7E3DA;
  --line-strong: #D6D0C3;
  --text: #23262D;
  --text-2: #50545E;
  --text-3: #60646D;
  --page-note: #60646D;
  --bad: #BF342D;
  --bad-bg: #FCEBEA;
  --focus: rgba(206, 173, 111, .38);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-brand: Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0F1422;
    --page-note: #A09F9A;
  }
  /* поля карточки остаются светлыми */
  .lg-card { color-scheme: light; }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }

.lg { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* ---------- фирменная панель ---------- */
.lg-brand {
  position: relative; overflow: hidden; padding: 64px 56px; color: var(--brand-ivory);
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  background: radial-gradient(120% 90% at 0% 0%, #2A3A5E 0%, var(--brand-navy) 52%, #131B2E 100%);
}
/* «ТОО» между золотыми линиями, как в подписи логотипа */
.lg-brand .lg-kicker {
  display: flex; align-items: center; gap: 14px; margin: 0;
  font: 400 12px/1.3 var(--font-brand); letter-spacing: .2em; text-transform: uppercase; color: var(--brand-gold);
}
.lg-brand .lg-kicker::after { content: ""; width: 56px; height: 1px; background: var(--brand-gold); opacity: .8; }
.lg-brand h2 { margin: 0; font: 400 58px/1.05 var(--font-brand); letter-spacing: .08em; color: var(--brand-ivory); }
.lg-rule { width: 72px; height: 1px; background: var(--brand-gold); }
.lg-brand p { margin: 0; max-width: 430px; font-size: 17px; line-height: 1.55; color: rgba(244, 239, 228, .8); }
.lg-brand ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.lg-brand li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgba(244, 239, 228, .9); }
/* маркер списка: золотой ромб контуром */
.lg-brand li::before {
  content: ""; width: 7px; height: 7px; flex: none; transform: rotate(45deg); border: 1px solid var(--brand-gold);
}
/* два тонких золотых круга в углу: линии логотипа без лишней графики */
.lg-swoosh {
  position: absolute; right: -170px; bottom: -170px; width: 440px; height: 440px; border-radius: 50%;
  border: 1px solid rgba(206, 173, 111, .24); pointer-events: none;
}
.lg-swoosh::after {
  content: ""; position: absolute; inset: 56px; border-radius: 50%; border: 1px solid rgba(206, 173, 111, .14);
}

/* ---------- карточка входа ---------- */
.lg-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; gap: 18px; }
.lg-card {
  position: relative; width: min(420px, 100%); padding: 30px 30px 26px; border-radius: 18px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 48px rgba(27, 39, 65, .14);
  display: flex; flex-direction: column; gap: 14px;
}
/* золотая линия по верху карточки */
.lg-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, rgba(206, 173, 111, 0), var(--brand-gold) 20%, var(--brand-gold) 80%, rgba(206, 173, 111, 0));
}
.lg-card-logo { width: 150px; margin: 0 auto; }
.lg-card-logo img { width: 100%; height: auto; display: block; }
.lg-badge {
  align-self: center; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  padding: 6px 12px; border-radius: 20px; background: var(--gold-soft); color: var(--gold-text);
  border: 1px solid rgba(206, 173, 111, .35); font-size: 12.5px; font-weight: 600; text-align: center; text-wrap: balance;
}
.lg-badge svg { flex: none; }
.lg-card h1 { margin: 4px 0 0; text-align: center; font: 400 26px/1.2 var(--font-brand); color: var(--brand-navy); }
.lg-sub { margin: -4px 0 6px; text-align: center; font-size: 13.5px; line-height: 1.45; color: var(--text-3); }
.lg-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); font-weight: 500; }
.lg-field input {
  width: 100%; height: 44px; padding: 0 13px; border-radius: 11px; font: inherit; font-size: 15px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); outline: none;
}
.lg-field input:focus { border-color: var(--gold-focus); box-shadow: 0 0 0 3px var(--focus); }
.lg-pass { position: relative; display: block; }
.lg-pass input { padding-right: 96px; }
.lg-pass button {
  position: absolute; right: 6px; top: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--brand-navy); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.lg-pass button:hover { background: var(--gold-soft); }
.lg-pass button:focus-visible, .lg-submit:focus-visible { outline: 2px solid var(--gold-focus); outline-offset: 2px; }
.lg-error { padding: 10px 12px; border-radius: 10px; background: var(--bad-bg); color: var(--bad); font-size: 13.5px; }
.lg-submit {
  height: 46px; margin-top: 4px; border: 0; border-radius: 11px; cursor: pointer;
  background: var(--brand-navy); color: #fff; font: inherit; font-size: 15px; font-weight: 600;
  box-shadow: 0 6px 16px rgba(27, 39, 65, .28); transition: background .15s;
}
.lg-submit:hover { background: #2A3B5F; }
.lg-submit:disabled { opacity: .6; cursor: wait; }
.lg-foot { margin: 2px 0 0; text-align: center; font-size: 12.5px; color: var(--text-3); }
.lg-copy { margin: 0; font-size: 12px; letter-spacing: .02em; color: var(--page-note); }

@media (max-width: 900px) {
  .lg { grid-template-columns: 1fr; }
  .lg-brand { display: none; }
  .lg-panel { padding: 28px 16px; }
  .lg-card { padding: 26px 20px 22px; }
  .lg-card-logo { width: 128px; }
}