/* Вход и регистрация демо-стенда demoerp.ru (макет 85, кадр 1): палитра Q,
   шрифт Golos Text с самого сайта — внешних хостов страница не трогает. */
@font-face { font-family: 'Golos Text'; font-weight: 400; src: url('/fonts/golos-text/golos-text-400-cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-weight: 400; src: url('/fonts/golos-text/golos-text-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Golos Text'; font-weight: 600; src: url('/fonts/golos-text/golos-text-600-cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-weight: 600; src: url('/fonts/golos-text/golos-text-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'Golos Text'; font-weight: 700; src: url('/fonts/golos-text/golos-text-700-cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-weight: 700; src: url('/fonts/golos-text/golos-text-700-latin.woff2') format('woff2'); }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font: 15px/1.45 'Golos Text', -apple-system, 'Segoe UI', Arial, sans-serif;
  color: #16163a;
  /* Цвет — отдельным свойством: в многослойном background цвет допустим
     только в ПОСЛЕДНЕМ слое, а стоял в первом — браузер отбрасывал всё
     объявление, и белый текст героя ложился на белый фон (13.10). */
  background-color: #16163a;
  background-image: radial-gradient(1200px 700px at 15% 20%, #0023cf 0%, rgba(0, 35, 207, 0) 60%),
                    radial-gradient(900px 700px at 90% 85%, #ec1f7a 0%, rgba(236, 31, 122, 0) 60%),
                    linear-gradient(120deg, #16163a 0%, #3b1a6e 55%, #9b2097 100%);
  background-attachment: fixed;
}
/* Атрибут hidden сильнее любых display у меток формы: без этого поле
   «Новый пароль» было видно всегда (13.10). */
[hidden] { display: none !important; }
.q-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 420px);
  align-items: center;
  gap: 48px;
  padding: 48px 6vw 72px;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}
.q-hero { color: #fff; }
.q-hero h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.05; margin: 0 0 14px; font-weight: 700; letter-spacing: -0.02em; }
.q-hero h1 span { color: #ff5aa6; }
.q-tag { display: inline-block; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 999px; padding: 4px 14px; font-size: 15px; }
.q-hero p { max-width: 520px; font-size: 17px; margin: 20px 0 18px; color: rgba(255, 255, 255, 0.88); }
.q-stands { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: st; }
.q-stands li { counter-increment: st; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: #fff; }
.q-stands li::before { content: counter(st) " · "; opacity: 0.7; }
.q-card { background: #fff; border-radius: 18px; padding: 24px 24px 20px; box-shadow: 0 18px 50px rgba(10, 10, 40, 0.35); }
.q-logo { height: 30px; width: auto; display: block; margin-bottom: 14px; }
.q-tabs { display: flex; gap: 6px; background: #eef0f8; border-radius: 999px; padding: 4px; margin-bottom: 14px; }
.q-tabs button { flex: 1; border: 0; background: transparent; border-radius: 999px; padding: 8px 10px; font: inherit; font-weight: 600; color: #16163a; cursor: pointer; }
.q-tabs button[aria-selected="true"] { background: #fff; box-shadow: 0 1px 4px rgba(22, 22, 58, 0.15); }
.q-form h2 { font-size: 21px; margin: 0 0 4px; }
.q-sub { margin: 0 0 10px; color: rgba(22, 22, 58, 0.6); font-size: 13.5px; }
.q-form label { display: block; font-size: 13px; color: rgba(22, 22, 58, 0.7); margin: 10px 0 0; }
.q-form label small { color: rgba(22, 22, 58, 0.45); }
.q-form textarea, .q-form input:not([type="checkbox"]) {
  display: block; width: 100%; margin-top: 4px; font: inherit; color: #16163a;
  border: 1px solid #d5d8e8; border-radius: 10px; padding: 10px 12px; background: #fff;
}
.q-form textarea { resize: vertical; min-height: 64px; font: inherit; }
.q-form textarea:focus, .q-form input:focus { outline: 2px solid #0023cf; outline-offset: 0; border-color: transparent; }
.q-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.q-check { display: flex !important; gap: 8px; align-items: flex-start; color: #16163a !important; }
.q-check input { margin-top: 3px; }
.q-check a, .q-note a { color: #0023cf; }
.q-btn {
  display: block; width: 100%; margin-top: 16px; border: 0; border-radius: 999px; padding: 12px 18px;
  font: inherit; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(90deg, #0023cf 0%, #9b2097 60%, #ec1f7a 100%);
}
.q-btn:disabled { opacity: 0.6; cursor: wait; }
.q-error { margin: 12px 0 0; color: #9b2097; font-weight: 600; font-size: 14px; }
.q-note { margin: 12px 0 0; font-size: 13px; color: rgba(22, 22, 58, 0.55); text-align: center; }
.q-foot { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: rgba(255, 255, 255, 0.75); font-size: 13px; padding: 0 16px; }
@media (max-width: 860px) {
  .q-page { grid-template-columns: 1fr; gap: 24px; padding: 28px 16px 64px; }
  .q-hero p { font-size: 15px; }
  .q-two { grid-template-columns: 1fr; gap: 0; }
}

/* Предупреждение на входе: стенд только для демонстрационных данных (13.10). */
.q-terms { margin: 16px 0 0; padding: 10px 12px; border-left: 3px solid #0023cf; background: #f3f5fc; border-radius: 0 10px 10px 0;
  font-size: 12.5px; line-height: 1.45; color: rgba(22, 22, 58, 0.82); }
.q-terms p { margin: 0; }
.q-terms p + p { margin-top: 4px; }
.q-terms a { color: #0023cf; }

/* Документы стенда: условия использования и согласие на обработку ПДн. */
.q-docpage { min-height: 100vh; padding: 40px 16px 64px; box-sizing: border-box; }
.q-doc { max-width: 820px; margin: 0 auto; background: #fff; border-radius: 18px; padding: 32px clamp(18px, 4vw, 44px) 28px;
  box-shadow: 0 18px 50px rgba(10, 10, 40, 0.35); color: #16163a; }
.q-doc-brand { margin: 0 0 6px; font-weight: 600; font-size: 13px; color: rgba(22, 22, 58, 0.6); }
.q-doc-brand span { color: #ec1f7a; }
.q-doc h1 { font-size: clamp(22px, 3.2vw, 30px); line-height: 1.2; margin: 0 0 6px; }
.q-doc h2 { font-size: 17px; margin: 22px 0 6px; }
.q-doc p { margin: 6px 0; }
.q-doc a { color: #0023cf; }
.q-doc-meta { color: rgba(22, 22, 58, 0.55); font-size: 13px; }
.q-doc-key { margin: 16px 0 4px; padding: 12px 14px; border-left: 3px solid #ec1f7a; background: #fdf0f6; border-radius: 0 10px 10px 0; }
.q-doc-back { margin-top: 24px !important; }