/* Same palette and metrics as the local interface, from the design handoff.
   Kept as one stylesheet rather than the prototype's inline styles: the landing
   and the cabinet share every token, and two copies drift. */

:root {
  --bg: #17171a;
  --panel: #1c1c20;
  --panel-2: #1e1e23;
  --line: #2b2b31;
  --line-2: #34343b;
  --line-3: #232329;
  --edge: #3d3d45;
  --text: #e8e7ec;
  --text-2: #cfced6;
  --text-3: #a9a8b3;
  --dim: #8f8e99;
  --dim-2: #74737e;
  --dim-3: #5c5c66;
  --accent: #b3a0ea;
  --accent-2: #cec0f2;
  --accent-bg: #242134;
  --accent-bg-2: #282437;
  --green: #93cfaa;
  --amber: #dcbd85;
  --pink: #e293b4;
  --pink-2: #e5aec6;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Self-hosted, no CDN: a font request to a third party from a page a customer
   is logged into is a beacon, and this product's whole claim is about where
   data goes. Inter rather than the mock's Archivo, which has no Cyrillic
   subset at all — see pseudex/localui/static/app.css. */
@font-face {
  font-family: 'Inter';
  src: url("/static/fonts/Inter-latin.260c81a4759b.woff2") format('woff2');
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Inter';
  src: url("/static/fonts/Inter-cyrillic.06ab411342ac.woff2") format('woff2');
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url("/static/fonts/JetBrainsMono-latin.b058178d7f30.woff2") format('woff2');
  font-weight: 100 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url("/static/fonts/JetBrainsMono-cyrillic.615bf869ebeb.woff2") format('woff2');
  font-weight: 100 800; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
::selection { background: var(--accent); color: var(--bg); }
pre, code, .mono, input, textarea, select { font-family: var(--mono); }

.frame { max-width: 1440px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }

header.top {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 0 28px; height: 76px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: rgba(23,23,26,.9); backdrop-filter: blur(12px); z-index: 20;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand b { font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
header.top nav { display: flex; align-items: center; gap: 30px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; }
header.top nav a { color: var(--dim); }
header.top nav a:hover { color: var(--text); }
.head-cta { display: flex; align-items: center; gap: 10px; }

/* `[hidden]` ПРОИГРЫВАЕТ ЛЮБОМУ СВОЕМУ `display`, и это ловушка, а не тонкость:
   браузерное правило `[hidden]{display:none}` идёт из UA-стилей, поэтому
   `.btn{display:inline-block}` его перебивает — кнопка, которой в JS выставлен
   `hidden`, остаётся ВИДНОЙ. Поймано браузерной проверкой конфигуратора: там
   кнопка «отправить как заявку» не должна показываться, когда всё отмеченное мы
   находим, и она показывалась. Правило стоит ДО `.btn`, но с `!important`,
   потому что специфичность здесь ни при чём. */
[hidden] { display: none !important; }

.btn {
  display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  padding: 11px 16px; border: 1px solid var(--line-2); color: var(--dim);
  background: transparent; cursor: pointer;
}
.btn:hover { color: var(--text); border-color: var(--edge); }
.btn.solid { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 700; }
.btn.accent { background: var(--accent); color: var(--bg); border: 0; font-weight: 700; }
.btn.accent:hover { background: var(--accent-2); color: var(--bg); }
.btn.lg { font-size: 13px; letter-spacing: .1em; padding: 16px 24px; }
.btn.block { display: block; width: 100%; text-align: center; }

section { border-top: 1px solid var(--line); padding: 80px 28px; }
section:first-of-type { border-top: 0; }
h1.hero { margin: 0; font-size: clamp(40px, 7vw, 104px); line-height: .92; font-weight: 900; letter-spacing: -.04em; max-width: 1180px; text-wrap: balance; }
h1.hero span { color: var(--accent); }
h2 { margin: 0; font-size: clamp(30px, 4vw, 46px); font-weight: 900; letter-spacing: -.03em; }
.eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; }
.eyebrow i { width: 56px; height: 1px; background: var(--accent); display: block; }
.eyebrow span { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; color: var(--accent); }
.lede { margin: 0; max-width: 620px; font-size: 19px; line-height: 1.62; color: var(--text-3); text-wrap: pretty; }
.sub { margin: 0 0 44px; font-size: 17px; color: var(--dim); max-width: 720px; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,460px); gap: 56px; margin-top: 56px; align-items: end; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 36px; }
.sec-meta { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--dim-2); }

.card { border: 1px solid var(--line-2); background: var(--panel-2); padding: 20px 20px 22px; }
.label { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--dim-2); }
.report { margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.75; color: var(--green); white-space: pre-wrap; }
.copybar { display: flex; border: 1px solid var(--line-2); background: var(--panel-2); max-width: 640px; margin-top: 36px; }
.copybar code { flex: 1; padding: 16px 18px; font-size: 13px; color: var(--text-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.copybar button { border: 0; border-left: 1px solid var(--line-2); background: transparent; color: var(--dim); font-family: var(--mono); font-size: 12px; letter-spacing: .14em; padding: 0 20px; cursor: pointer; }
.fineprint { margin-top: 22px; font-family: var(--mono); font-size: 12.5px; color: var(--dim-2); line-height: 2; }

.tabs { display: flex; border: 1px solid var(--line-2); flex-wrap: wrap; }
.tabs button { flex: 1; min-width: 160px; border: 0; border-right: 1px solid var(--line-2); padding: 15px 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; cursor: pointer; text-align: left; background: transparent; color: var(--dim-2); }
.tabs button[aria-selected="true"] { background: var(--accent-bg-2); color: var(--accent); }
.demo { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-2); border-top: 0; }
.demo > div { padding: 26px 24px 28px; }
.demo > div:first-child { border-right: 1px solid var(--line-2); background: var(--panel); }
.demo > div:last-child { background: var(--panel-2); }
.demo .body { font-family: var(--mono); font-size: 14px; line-height: 2; color: var(--text-2); white-space: pre-wrap; }
.mark-pii { background: rgba(226,147,180,.16); color: var(--pink-2); padding: 2px 4px; border-radius: 2px; }
.mark-fake { background: rgba(179,160,234,.18); color: var(--accent-2); padding: 2px 4px; border-radius: 2px; }
.notes { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 26px; }
.notes div { font-size: 14.5px; line-height: 1.65; color: var(--dim); text-wrap: pretty; }
.notes b { color: var(--text); }

.rows { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 56px; }
.numbered { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 24px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: start; }
.numbered .n { font-family: var(--mono); font-size: 13px; color: #43434c; font-weight: 700; }
.numbered h3 { margin: 0 0 10px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.numbered p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--dim); max-width: 760px; text-wrap: pretty; }

.flow { border: 1px solid var(--line-2); background: var(--panel-2); padding: 28px 26px; font-family: var(--mono); font-size: 13.5px; line-height: 2.4; color: var(--dim); overflow-x: auto; }
.flow em { color: var(--accent); font-style: normal; }
.flow i { color: #43434c; font-style: normal; }
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); margin-top: 32px; }
.trio > div { background: var(--panel); padding: 26px 24px 30px; }
.trio .step { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--accent); margin-bottom: 20px; }
.trio h3 { margin: 0 0 12px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.trio p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--dim); text-wrap: pretty; }

.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 56px; align-items: start; }
.boundary { border: 1px solid var(--line-2); }
.boundary .row { display: grid; grid-template-columns: minmax(120px,1fr) minmax(70px,.5fr) minmax(80px,.6fr); border-bottom: 1px solid var(--line); align-items: center; }
.boundary .row > * { padding: 14px 18px; }
.boundary .row > *:not(:first-child) { border-left: 1px solid var(--line); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; }
.boundary .head { background: var(--panel); border-bottom: 0; }
.boundary .head > * { padding: 12px 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--dim-2); }
.yes { color: var(--green); } .no { color: var(--pink); }
.warnbox { border: 1px solid #3b3427; background: #221d12; padding: 22px; margin-top: 20px; }
.warnbox .label { color: var(--amber); margin-bottom: 14px; }
.warnbox p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text-2); text-wrap: pretty; }

.steps { display: grid; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); }
.steps > div { background: var(--panel); display: grid; grid-template-columns: minmax(0,320px) minmax(0,1fr) 120px; align-items: center; gap: 24px; }
.steps .what { padding: 22px 24px; }
.steps .step { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--accent); margin-bottom: 8px; }
.steps h3 { margin: 0; font-size: 17px; font-weight: 600; }
.steps .note { font-size: 13.5px; color: var(--dim-2); margin-top: 6px; }
.steps pre { margin: 0; padding: 22px 0; font-size: 13px; line-height: 1.9; color: var(--text-2); white-space: pre-wrap; overflow-x: auto; }
.steps button { height: 100%; border: 0; border-left: 1px solid var(--line-2); background: transparent; color: var(--dim); font-family: var(--mono); font-size: 11px; letter-spacing: .16em; cursor: pointer; }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); }
.plan { background: var(--panel); padding: 30px 26px 32px; display: flex; flex-direction: column; gap: 20px; }
.plan.featured { background: var(--accent-bg); }
.plan .tag { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--dim-2); }
.plan.featured .tag { color: var(--accent); }
.plan .price { font-size: 40px; font-weight: 900; letter-spacing: -.03em; margin-top: 18px; }
.plan .per { font-size: 13.5px; color: var(--dim-2); margin-top: 6px; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--text-3); }
.plan li { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 8px; }
.plan li::before { content: "→"; color: var(--accent); font-family: var(--mono); font-size: 12px; }
.plan form { margin-top: auto; }
.pricing-foot { border: 1px solid var(--line-2); border-top: 0; padding: 20px 26px; display: flex; gap: 32px; flex-wrap: wrap; font-size: 14px; color: var(--dim); }

details.faq { border-bottom: 1px solid var(--line); }
details.faq summary { list-style: none; cursor: pointer; padding: 22px 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; display: flex; justify-content: space-between; gap: 24px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font-family: var(--mono); font-size: 14px; color: var(--dim-3); }
details.faq[open] summary::after { content: "−"; color: var(--accent); }
details.faq p { margin: 0 0 26px; max-width: 820px; font-size: 16px; line-height: 1.65; color: var(--dim); text-wrap: pretty; }

footer { border-top: 1px solid var(--line); padding: 32px 28px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: var(--dim-3); letter-spacing: .06em; }
footer a { color: var(--dim-3); }

/* ---- signup + cabinet ---- */
.signup { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 640px; }
.signup input:not([type="checkbox"]), .signup select, .field {
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text);
  font-family: var(--mono); font-size: 13px; padding: 14px 15px; outline: none; width: 100%;
}
.signup input:focus, .field:focus { border-color: var(--edge); }
.signup .wide { grid-column: 1 / -1; }

.app { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); }
.app > div { background: var(--panel); padding: 24px; }
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line-3); font-size: 14px; }
.kv .k { color: var(--dim-2); }
.kv .v { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); text-align: right; word-break: break-all; }
.meter { height: 8px; background: var(--line-3); margin-top: 12px; }
.meter i { display: block; height: 8px; background: var(--accent); }
.meter i.over { background: var(--amber); }
table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
table.list th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--dim-3); font-weight: 400; padding: 10px 0; border-bottom: 1px solid var(--line); }
table.list td { padding: 12px 0; border-bottom: 1px solid var(--line-3); color: var(--text-2); }
table.list td.mono { font-family: var(--mono); font-size: 12.5px; }
.pill { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; padding: 4px 8px; border: 1px solid var(--line-2); color: var(--dim); }
.pill.ok { color: var(--green); border-color: #2c3f34; }
.pill.warn { color: var(--amber); border-color: #3f3728; }
.pill.bad { color: var(--pink); border-color: #4a2f3c; }
.msg { padding: 14px 18px; border: 1px solid var(--line-2); margin-bottom: 20px; font-size: 14px; }
.msg.error { border-color: #4a2f3c; background: #241a1f; color: var(--pink-2); }
.msg.success { border-color: #2c3f34; background: #17211b; color: var(--green); }

.keybox { border: 1px solid var(--accent); background: var(--accent-bg); padding: 22px; margin: 24px 0; }
.keybox .value { font-family: var(--mono); font-size: 17px; color: var(--accent-2); word-break: break-all; margin: 12px 0; }
.keybox .warn { font-size: 13.5px; color: var(--amber); line-height: 1.6; }

@media (max-width: 900px) {
  .hero-grid, .demo, .notes, .rows, .split, .signup { grid-template-columns: 1fr; }
  .steps > div { grid-template-columns: 1fr; }
  .steps button { border-left: 0; border-top: 1px solid var(--line-2); padding: 14px; }
  header.top nav { display: none; }
}

/* The setup tutorial. `.tabs` is reused from the demo, so only the note and the
   generated code blocks need anything new. */
.setup-note { margin-top: 18px; font-size: 15px; line-height: 1.6; color: var(--dim); max-width: 780px; text-wrap: pretty; }
#setup .steps pre { white-space: pre-wrap; word-break: break-word; }
#provider-tabs { flex-wrap: wrap; }
.plan .fits { font-size: 13px; color: var(--dim-2); border-top: 1px solid var(--line); padding-top: 14px; }

/* The Claude Code onboarding block. Accent border because this is the path we
   want taken — the manual commands below it are the fallback, not the default. */
.claude-block { border: 1px solid var(--accent); background: var(--accent-bg); padding: 26px; margin-top: 32px; }
.claude-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.claude-prompt { margin: 20px 0 0; padding: 20px; max-height: 340px; overflow: auto; background: var(--panel); border: 1px solid var(--line-2); font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--text-3); white-space: pre-wrap; }

/* Legal documents. Narrow measure and generous leading: these are read
   end to end by a lawyer or a security officer, not scanned like a landing. */
.legal-doc { max-width: 780px; }
.legal-doc h2 { font-size: 21px; letter-spacing: -.01em; margin: 38px 0 12px; }
.legal-doc p { font-size: 16px; line-height: 1.7; color: var(--text-3); margin: 0 0 14px; }
.legal-doc a { color: var(--accent); }
.legal-list { margin: 0 0 14px; padding-left: 22px; font-size: 16px; line-height: 1.7; color: var(--text-3); }
.legal-list li { margin-bottom: 8px; }
.legal-note { border-left: 2px solid var(--accent); background: var(--accent-bg); padding: 18px 22px; margin: 28px 0; font-size: 15.5px; line-height: 1.65; color: var(--text-3); }
.legal-doc .missing { color: var(--pink); }

/* ---- конфигуратор ---- */
/* Ни одной новой переменной: те же токены, что у остальных секций. Экран,
   нарисованный своим словарём, расходится с соседними при первой правке темы. */
.cfg { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px;
  background: var(--line-2); border: 1px solid var(--line-2); }
.cfg-item { display: flex; align-items: center; gap: 12px; padding: 15px 18px;
  background: var(--panel); cursor: pointer; min-width: 0; }
.cfg-item:hover { background: var(--panel-2); }
.cfg-item input { flex: none; width: 15px; height: 15px; accent-color: var(--accent); }
.cfg-label { flex: 1; font-size: 14.5px; color: var(--text-2); min-width: 0; }
.cfg-tag { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; }
.cfg-tag.yes { color: var(--green); }
.cfg-tag.no { color: var(--amber); }

.cfg-out { margin-top: 22px; border: 1px solid var(--line-2); background: var(--panel); }
.cfg-verdict { display: grid; grid-template-columns: 92px minmax(0, 200px) minmax(0, 1fr);
  gap: 14px; align-items: baseline; padding: 14px 18px; border-bottom: 1px solid var(--line-3);
  font-size: 14px; line-height: 1.6; }
.cfg-verdict b { color: var(--text-2); }
.cfg-verdict span:last-child { color: var(--dim); }
.cfg-mark { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; }
.cfg-mark.yes { color: var(--green); }
.cfg-mark.no { color: var(--amber); }
.cfg-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; padding: 16px 18px; }
.cfg-note { font-size: 14px; line-height: 1.6; color: var(--dim); max-width: 620px; }
@media (max-width: 700px) {
  .cfg-verdict { grid-template-columns: 1fr; gap: 6px; }
}

/* Баннер согласия на аналитику. Показывается ТОЛЬКО в режиме `full` и только
   пока выбор не сделан; в режиме без куки хранить нечего, значит и
   отказываться не от чего.

   ДВЕ КНОПКИ ОДНОГО РАЗМЕРА. Отказ, нарисованный мельче и бледнее согласия, —
   это имитация выбора, и по 152-ФЗ ст. 9 согласие должно быть свободным. */
.consent-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--line-2); background: var(--panel-2);
  padding: 16px 18px; box-shadow: 0 8px 28px rgba(0,0,0,.45); }
.consent-text { flex: 1; min-width: 260px; font-size: 13.5px; line-height: 1.6; color: var(--dim); }
.consent-text a { color: var(--accent); }
.consent-buttons { display: flex; gap: 10px; }
.consent-buttons .btn { min-width: 120px; text-align: center; }

/* --- Страницы входа/регистрации (django-allauth в брендовом каркасе) --- */
.auth { display: flex; justify-content: center; padding: 56px 20px 96px; }
.auth-card { width: 100%; max-width: 440px; border: 1px solid var(--line-2); background: var(--line-3); padding: 34px 32px; }
.auth-card h1 { font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; color: var(--text); }
.auth-card > p, .auth-card form > p { color: var(--dim); font-size: 14px; line-height: 1.65; margin: 0 0 18px; }
.auth-card a { color: var(--accent); }
.auth-card a:hover { color: var(--accent-2); }
.auth-card form { display: flex; flex-direction: column; gap: 15px; margin-top: 4px; }
.auth-card label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-3); letter-spacing: .02em; }
.auth-card input:not([type=checkbox]):not([type=radio]) {
  width: 100%; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line-2);
  color: var(--text); font-size: 14px; font-family: inherit; box-sizing: border-box;
}
.auth-card input:focus { outline: none; border-color: var(--accent); }
.auth-card input::placeholder { color: var(--dim-2); }
.auth-card label:has(input[type=checkbox]) { flex-direction: row; align-items: center; gap: 9px; color: var(--text-3); font-size: 13.5px; }
.auth-card button[type=submit], .auth-card .btn.accent { margin-top: 6px; padding: 13px 18px; font-size: 13px; letter-spacing: .08em; cursor: pointer; text-align: center; }
.auth-card .helptext, .auth-card [class*="help"] { color: var(--dim-2); font-size: 12.5px; }
.auth-card .errorlist, .auth-card [class*="error"] { color: var(--amber); font-size: 13px; list-style: none; padding: 0; margin: 0 0 4px; }
.auth-msg { padding: 11px 13px; border: 1px solid var(--line-2); margin-bottom: 8px; font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.auth-msgs { margin-bottom: 20px; }
.auth-msg--error { border-color: var(--amber); color: var(--amber); }
.auth-msg--success { border-color: var(--accent); color: var(--accent-2); }
/* вторичные ссылки под формой (забыли пароль / войти по коду) */
.auth-card hr { border: 0; border-top: 1px solid var(--line-2); margin: 22px 0 16px; }

/* Кнопка, которая обязана выглядеть ссылкой. Повтор кода — это POST (рейт-лимит
   и счётчик попыток остаются на стороне allauth), но для клиента это «ссылка
   рядом с вопросом», а не вторая крупная кнопка, спорящая с «Войти». */
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--accent);
  cursor: pointer; text-decoration: underline; }
.linkish:hover { color: var(--text); }