/* Сторінка входу (/login). Кольори — з токенів dashboard.css, тому світла/темна тема працює сама. */
.auth-body { min-height: 100dvh; display: flex; flex-direction: column; }
.auth {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 24px 16px; max-width: none;
}
.auth-card {
    width: 100%; max-width: 380px; padding: 24px 22px 20px;
    background: var(--surface); border: 1px solid var(--card-edge); border-radius: 14px; box-shadow: var(--shadow);
}
.auth-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-head .brand { font-size: 19px; }
.auth-card h1 { font-size: 22px; font-weight: 600; margin: 18px 0 14px; letter-spacing: -.01em; }

.alert {
    padding: 10px 12px; border-radius: 8px; font-size: 14px; line-height: 1.45;
    border: 1px solid transparent; margin: 0 0 14px;
}
.alert.bad  { background: var(--bad-bg);  color: var(--bad-text);  border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.alert.info { background: var(--info-bg); color: var(--info-text); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.alert code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; word-break: break-all; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 13px; font-weight: 500; color: var(--muted); }
.field input {
    width: 100%; min-height: 44px; padding: 0 12px;
    font: inherit; font-size: 16px; /* 16px — щоб iOS не зумив поле */
    color: var(--text); background: var(--bg);
    border: 1px solid var(--border); border-radius: 8px;
    -webkit-appearance: none; appearance: none;
}
.field input:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 0; }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px var(--bg) inset; }

.btn.primary {
    min-height: 44px; margin-top: 4px; font-size: 16px; font-weight: 600;
    background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.hint { margin: 2px 0 0; font-size: 12px; text-align: center; }

/* Honeypot: не display:none (боти це бачать), а просто далеко за екраном. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 420px) {
    .auth { padding: 16px 12px; align-items: flex-start; }
    .auth-card { padding: 20px 16px 16px; }
}