/* Login (templates/login.html): one card over a live dot field (js/login_field.js).
   The top bar goes see-through so the field runs under it; its logo moves into the card.
   The auth pages below (.page-auth) share the whole look. */
.page-login .top-nav,
.page-auth .top-nav { position: relative; z-index: 2; background: transparent; border-bottom-color: transparent; }
.page-login .top-nav .brand,
.page-login .top-nav .user-menu > .btn,
.page-auth .top-nav .brand,
.page-auth .top-nav .user-menu > .btn { display: none; }
.page-login .top-nav .nav-left,
.page-auth .top-nav .nav-left { min-height: 1px; }

.login-field { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

.login-page {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 20px;
    min-height: calc(100dvh - var(--topbar-h));
    padding: 12vh 16px 48px;
    box-sizing: border-box;
}
.login-card { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 380px; padding: 28px 28px 24px; box-sizing: border-box; }
.login-logo { height: 18px; align-self: flex-start; }
.login-card h1 { margin: 12px 0 0; font-size: 22px; font-weight: 600; color: var(--label-1); }
.login-sub { margin: 4px 0 0; color: var(--label-2); font-size: 14px; }
.login-card .flash { margin: 0; }

/* Sign-in buttons: neutral, icon first; the platform's color stays on its icon. */
.login-sso { display: flex; flex-direction: column; gap: 8px; max-width: none; margin: 4px 0 0; }
.login-sso .login-sso-btn {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    width: 100%; height: 40px; padding: 0 14px;
    border: 1px solid var(--hairline); border-radius: var(--r-md);
    background: var(--fill-1); color: var(--label-1);
    font-size: 14px; font-weight: 500; text-decoration: none;
    transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.login-sso .login-sso-btn:hover { background: var(--fill-2); border-color: var(--line-strong); color: var(--label-1); filter: none; }
.login-sso .login-sso-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.login-sso .telegram-oauth-icon { fill: var(--platform-telegram); }
.login-sso .discord-oauth-icon { fill: var(--platform-discord); }
.login-sso .demo-login-form { margin: 4px 0 0; }
.login-demo-btn,
.auth-btn { width: 100%; height: 40px; }

.login-fine { margin: 0; color: var(--label-3); font-size: 12.5px; line-height: 1.5; }
.demo-login-form .login-fine { margin-top: 6px; text-align: center; }
.login-back { position: relative; z-index: 1; color: var(--label-3); font-size: 13px; text-decoration: none; }
.login-back:hover { color: var(--label-1); }

/* ---------- Auth pages: the login card for sign-up and account linking ----------
   auth/new_account.html, auth/ai_app_consent.html, link_confirm.html, link_error.html,
   link_required.html: body class .page-auth, the same field, card, buttons and fine print. */
.auth-btn { font-size: 14px; }
.auth-card-wide { max-width: 560px; }
.auth-page-tall { padding-top: 6vh; }
.login-card h1 b { font-weight: 600; }
.auth-text { margin: 0; color: var(--label-2); font-size: 13.5px; line-height: 1.55; }
.auth-text strong { color: var(--label-1); font-weight: 500; }
.auth-actions { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; }
.auth-actions form { margin: 0; }

/* New account: "Used collony.ai before?" is a labelled hairline over the sign-in buttons. */
.auth-or { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--label-2); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.auth-or::before,
.auth-or::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }
.new-account-link { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0; }
.new-account-link > * + * { margin-top: 0; }
.new-account-link .login-sso { margin: 0; }

/* Link confirm: the Telegram account the magic link belongs to. */
.auth-identity { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--fill-1); }
.auth-identity-pic { position: relative; width: 40px; height: 40px; flex-shrink: 0; }
.auth-identity-pic .platform-icon { width: 40px; height: 40px; fill: var(--platform-telegram); color: var(--platform-telegram); }
.auth-identity-pic img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.auth-identity-name { min-width: 0; }
.auth-identity-name b { display: block; overflow: hidden; color: var(--label-1); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.auth-identity-name span { display: block; color: var(--label-3); font-size: 12.5px; }
.auth-identity-platform { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; color: var(--label-3); font-size: 12px; }
.auth-identity-platform svg { width: 14px; height: 14px; fill: var(--platform-telegram); }

/* Numbered steps (link error, link required). */
.auth-steps { display: flex; flex-direction: column; gap: 10px; }
.auth-steps .micro { margin: 0; }
.auth-steps ol { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: auth-step; }
.auth-steps li { position: relative; margin: 0; padding-left: 30px; color: var(--label-1); font-size: 13.5px; line-height: 20px; list-style: none; counter-increment: auth-step; }
.auth-steps li::before { content: counter(auth-step); position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--fill-2); color: var(--label-2); font: 500 11px/20px var(--font-mono); text-align: center; }
.auth-steps code { padding: 1px 5px; border-radius: var(--r-xs); background: var(--fill-2); color: var(--label-1); font-size: 12px; }
.auth-steps p { margin: 0; color: var(--label-3); font-size: 12.5px; line-height: 1.5; }
.auth-steps em { font-style: normal; }

/* Link required: one panel per platform. */
.auth-option { display: flex; margin: 0; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--hairline); border-radius: var(--r-md); }
.auth-option h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--label-1); font-size: 14px; font-weight: 600; }
.auth-option h2 svg { width: 16px; height: 16px; flex-shrink: 0; }
.auth-option h2 .telegram { fill: var(--platform-telegram); }
.auth-option h2 .discord { fill: var(--platform-discord); }
.auth-option > p { margin: 0; color: var(--label-2); font-size: 13px; }
.auth-option .login-sso { margin: 0; }

/* AI app consent: the wide card; the choice blocks (components/ai-apps.css) tightened to v6 here. */
.ai-consent.login-card { width: 100%; margin: 0; }
.ai-consent .ai-consent-pair { justify-content: flex-start; gap: 10px; margin: 0; }
.ai-consent .ai-consent-pair img { width: 40px; height: 40px; border-radius: var(--r-md); }
.ai-consent .ai-consent-pair .dots { color: var(--label-3); }
.ai-consent.login-card h1 { margin: 4px 0 0; font-size: 20px; font-weight: 500; line-height: 1.3; text-align: left; }
.ai-consent .ai-consent-as { margin: 4px 0 0; color: var(--label-2); font-size: 13px; line-height: 1.6; text-align: left; }
.ai-consent .ai-consent-as b { color: var(--label-1); font-weight: 500; }
.ai-consent .ai-choices { display: flex; flex-direction: column; gap: 8px; }
.ai-consent .ai-choices h4 { margin: 8px 0 0; font: 500 11px var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--label-3); }
.ai-consent .ai-choices h4:first-child { margin-top: 0; }
.ai-consent .ai-projects { border-color: var(--hairline); }
.ai-consent .ai-project { min-height: 40px; padding: 0 12px; border-top-color: var(--hairline); color: var(--label-1); font-size: 13.5px; }
.ai-consent .ai-project:hover,
.ai-consent .ai-level-card:hover { background: var(--fill-1); }
.ai-consent .ai-project-role { color: var(--label-3); font-size: 12px; }
.ai-consent .ai-levels { gap: 8px; }
.ai-consent .ai-level-card,
.ai-consent .ai-superadmin { padding: 10px 12px; }
.ai-consent .ai-level-card { align-content: start; border-color: var(--hairline); }
.ai-consent .ai-level-card .ai-level { font-size: 13.5px; }
.ai-consent .ai-level-card small,
.ai-consent .ai-superadmin small { color: var(--label-2); font-size: 12.5px; line-height: 1.45; }
.ai-consent .ai-level-card:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.ai-consent .ai-expiry { gap: 12px; color: var(--label-3); font-size: 12.5px; line-height: 1.45; }
.ai-consent .ai-expiry select { flex-shrink: 0; height: 36px; min-width: 13rem; }
.ai-consent .ai-consent-note { margin: 0; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--fill-1); color: var(--label-2); font-size: 12.5px; line-height: 1.5; }
.ai-consent .ai-consent-actions { margin: 0; }
.ai-consent .ai-consent-actions .btn { height: 36px; padding: 0 16px; font-size: 14px; }

@media (max-width: 600px) {
    .login-page { padding-top: 6vh; }
    .login-page.auth-page-tall { padding-top: 16px; }
    .login-card { padding: 22px 20px 20px; }
    .ai-consent .ai-expiry { flex-direction: column; align-items: stretch; }
    .ai-consent .ai-expiry select { width: 100%; }
    .ai-consent .ai-consent-actions .btn { flex: 1; }
}