/* Страница входа шлюза — по образцу нашей сборки agent-swarm (extras/public-access/login/swarm.css).
   Токены, шрифты и база — общие с консолью: ui/css/core.css (дизайн-система SWARM). */

body { font-size: 14px; }

main { display: flex; min-height: 100svh; align-items: center; justify-content: center; padding: 1.5rem; }

/* Card: w-full max-w-md, rounded-xl, border, shadow-sm, py-6, gap-6 */
.card {
  width: 100%; max-width: 28rem; display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem 0;
  background: var(--color-card); color: var(--color-card-foreground);
  border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
}
.card-header, .card-content, .card-footer { padding: 0 1.5rem; }
.card-header { display: flex; flex-direction: column; gap: 0.375rem; }
.brand-row { margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.logo {
  width: 2.5rem; height: 2.5rem; flex: none; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: var(--color-primary-foreground); font-size: 0.875rem; font-weight: 700; letter-spacing: -0.3px;
}
.brand-name { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.card-title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.2; text-wrap: balance; }
.card-description { margin: 0; font-size: 0.875rem; color: var(--color-muted-foreground); text-wrap: pretty; }
.card-content form, .stack { display: flex; flex-direction: column; gap: 1rem; }

.field { display: flex; flex-direction: column; gap: 0.5rem; }
label { font-size: 0.875rem; font-weight: 500; line-height: 1; }

/* Input: h-9 rounded-md border bg-transparent px-3 shadow-xs, в тёмной теме bg-input/30 */
input[type="text"], input[type="password"] {
  width: 100%; height: 2.25rem; padding: 0.25rem 0.75rem; font: inherit; font-size: 0.875rem;
  color: var(--color-foreground); background: transparent; border: 1px solid var(--color-input);
  border-radius: var(--radius-md); box-shadow: var(--shadow-xs); outline: none;
  transition: border-color 150ms var(--ease-snappy), box-shadow 150ms var(--ease-snappy);
}
[data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="password"] { background: color-mix(in oklab, var(--color-input) 30%, transparent); }
input::placeholder { color: var(--color-muted-foreground); }
input:focus-visible { border-color: var(--color-ring); box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-ring) 60%, transparent); outline: none; }
input[aria-invalid="true"] { border-color: var(--color-destructive); }
/* Автозаполнение браузера красит поле своим цветом: оставляем цвета темы. */
input:-webkit-autofill { -webkit-text-fill-color: var(--color-foreground); caret-color: var(--color-foreground); box-shadow: 0 0 0 1000px var(--color-card) inset; transition: background-color 600000s 0s; }

input.code { height: 2.75rem; font-family: var(--font-mono); font-size: 1.25rem; letter-spacing: 0.5em; text-align: center; padding-left: calc(0.75rem + 0.25em); }
/* Код подтверждения — восемь заглавных букв и цифр: плотнее, чем шесть цифр из приложения. */
input.code.otc { letter-spacing: 0.25em; padding-left: calc(0.75rem + 0.125em); text-transform: uppercase; }

.check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 400; color: var(--color-muted-foreground); cursor: pointer; }
.check input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--color-primary); }

/* Button default: h-9 px-4 rounded-md bg-primary text-primary-foreground font-medium */
.button {
  display: inline-flex; width: 100%; height: 2.25rem; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 1rem;
  font: inherit; font-size: 0.875rem; font-weight: 500; color: var(--color-primary-foreground); background: var(--color-primary);
  border: 0; border-radius: var(--radius-md); text-decoration: none; cursor: pointer;
  transition: background-color 200ms var(--ease-snappy), transform 200ms var(--ease-snappy);
}
.button:hover { background: color-mix(in oklab, var(--color-primary) 90%, transparent); text-decoration: none; color: var(--color-primary-foreground); }
.button:active { transform: scale(0.98); transition-duration: 100ms; }
.button[disabled] { opacity: 0.5; pointer-events: none; }
.button.outline { color: var(--color-foreground); background: transparent; border: 1px solid var(--color-border); box-shadow: var(--shadow-xs); }
.button.outline:hover { background: var(--color-accent); color: var(--color-accent-foreground); }

.spinner { width: 1rem; height: 1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.error { margin: 0; font-size: 0.875rem; color: var(--color-status-error-strong); }
.hint { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--color-muted-foreground); }
/* Строка состояния — живая область (role="status"). Пустую не прячем (display: none — читалка может
   не объявить появившийся текст), а схлопываем: отступы стопки вокруг неё — как без неё. */
#resend-status:empty { margin: -0.5rem 0; }
.links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; font-size: 0.875rem; }
.link { padding: 0; font: inherit; color: var(--color-muted-foreground); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link:hover { color: var(--color-foreground); }
button.link:disabled { cursor: default; text-decoration: none; opacity: 0.7; }
.footnote { margin: 0; font-size: 0.75rem; color: var(--color-muted-foreground); text-align: center; }

/* ─── Первая привязка приложения ─── */
.steps { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.875rem; }
.steps ::marker { color: var(--color-primary); font-weight: 600; }
/* Пояснение про код: утопленный блок, как код и журнал в консоли (--recessed). */
.note {
  margin: 0; padding: 0.75rem; font-size: 0.8125rem; line-height: 1.5; color: var(--muted-on-tint);
  background: var(--recessed); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-wrap: pretty;
}
.command { display: block; margin: 0.375rem 0; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--color-foreground); overflow-wrap: anywhere; }
/* QR-код: тёмные модули на белом в обеих темах — так его читает любое приложение. */
.qr {
  align-self: center; width: 13.5rem; max-width: 100%; aspect-ratio: 1; overflow: hidden;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.qr svg { display: block; width: 100%; height: 100%; }
.manual { font-size: 0.875rem; }
.manual > summary { width: fit-content; cursor: pointer; color: var(--color-primary); font-weight: 500; }
.manual-body { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.75rem; }
.params { display: grid; grid-template-columns: auto 1fr; gap: 0.375rem 0.75rem; margin: 0; }
.params dt { color: var(--color-muted-foreground); }
.params dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.secret { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.04em; }