/* Страница входа в стиле сайта аналитики: те же цвета, шрифт, логотип, карточки и кнопки. */
:root {
  --ink: #101a29;
  --ink-2: #23344d;
  --paper: #f4f3ef;
  --line: #dfe2e6;
  --muted: #687386;
  --red: #e1262f;
  --red-soft: #fff0ef;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--paper); color: var(--ink); font-family: "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }

.login { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 52fr 48fr; }

/* Левая половина — как боковое меню и блок «Рекомендации AI» */
.intro { position: relative; display: flex; flex-direction: column; padding: 32px 56px 36px; color: white; background: radial-gradient(circle at 88% -6%, rgba(225, 38, 47, .34), transparent 42%), linear-gradient(140deg, #101a29, #20334c); overflow: hidden; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 40px; height: 40px; border-radius: 12px; background: var(--red); display: grid; place-items: center; font-weight: 800; letter-spacing: -1px; transform: skew(-7deg); box-shadow: 0 10px 22px rgba(225, 38, 47, .3); }
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { font-size: 13px; letter-spacing: .04em; }
.brand-copy small { margin-top: 5px; color: #94a1b4; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.intro-copy { margin: auto 0; padding: 40px 0; }
.eyebrow { margin: 0 0 12px; color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.intro .eyebrow { color: #ff6b70; }
.headline { max-width: 12em; margin: 0; font-size: clamp(34px, 3.6vw, 58px); font-weight: 800; line-height: 1.06; letter-spacing: -.045em; }
.lead { max-width: 30em; margin: 18px 0 0; color: #aeb9c8; font-size: 15px; line-height: 1.6; }
.copyright { margin: 0; color: #718096; font-size: 11px; }

/* Правая половина — фон сайта и белая карточка, как панели */
.panel { display: grid; place-items: center; padding: 48px 24px; }
.card { width: 100%; max-width: 400px; padding: 34px 32px 32px; border: 1px solid rgba(16, 26, 41, .08); border-radius: 18px; background: white; box-shadow: 0 18px 50px rgba(20, 28, 40, .08); }
.card h1 { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.06; letter-spacing: -.045em; }
.hint { margin: 10px 0 26px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.error { margin: -8px 0 20px; padding: 10px 12px; border-radius: 11px; background: var(--red-soft); color: var(--red); font-size: 12px; font-weight: 700; }

label { display: block; margin: 0 0 7px; color: var(--muted); font-size: 11px; font-weight: 700; }
input { display: block; width: 100%; height: 44px; margin: 0 0 18px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: white; color: var(--ink); font-size: 14px; font-weight: 600; }
input:focus { outline: 2px solid rgba(225, 38, 47, .16); border-color: var(--red); }

button { width: 100%; height: 46px; margin-top: 8px; border: 1px solid var(--ink); border-radius: 11px; background: var(--ink); color: white; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px rgba(16, 26, 41, .16); transition: background .15s, transform .15s; }
button:hover { background: var(--ink-2); transform: translateY(-1px); }
button:focus-visible { outline: 3px solid rgba(225, 38, 47, .3); outline-offset: 2px; }
button:disabled { opacity: .75; cursor: progress; transform: none; }

@media (max-width: 820px) {
  .login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .intro { padding: 22px 16px 26px; }
  .intro-copy { padding: 26px 0 0; }
  .headline { font-size: 30px; }
  .lead { margin-top: 10px; font-size: 14px; }
  .copyright { display: none; }
  .panel { place-items: start center; padding: 22px 16px 40px; }
  .card { padding: 26px 20px 24px; }
}