/* Sign in / Register / Accept invitation — the pages before the shell. The product's name sits
   in the TOP-LEFT corner of the page, the sign-in card in the TOP-RIGHT; heading, form and
   actions inside the card. On a phone everything stacks: name on top, the card full width below. */
:root {
    --auth-bg: #f0f4f9; --auth-card: #fff; --auth-text: #1f1f1f; --auth-muted: #444746;
    --auth-line: #747775; --auth-accent: #0b57d0; --auth-accent-hover: #0842a0; --auth-err: #b3261e;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif; background: var(--auth-bg); color: var(--auth-text);
    display: flex; flex-direction: column; min-height: 100%;
}

.auth-top { padding: 20px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auth-lang { display: flex; gap: 4px; font-size: .85rem; font-weight: 600; }
.auth-lang a, .auth-lang-on { padding: 6px 10px; border-radius: 999px; text-decoration: none; color: var(--auth-muted); }
.auth-lang a:hover { background: rgba(11, 87, 208, .08); color: var(--auth-accent); }
.auth-lang-on { background: var(--auth-card); color: var(--auth-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 600; color: var(--auth-text); text-decoration: none; }
.auth-brand svg { width: 40px; height: 40px; flex: 0 0 auto; }

.auth-main { flex: 1 1 auto; display: flex; justify-content: flex-end; align-items: flex-start; padding: 8px 32px 24px; }
.auth-card {
    background: var(--auth-card); border-radius: 28px; width: 100%; max-width: 440px;
    padding: 32px 36px 28px; box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.auth-intro h1 { font-size: 2rem; font-weight: 400; line-height: 1.2; margin: 0 0 8px; }
.auth-intro p { margin: 0; font-size: .95rem; color: var(--auth-muted); line-height: 1.5; }
.auth-form { padding-top: 28px; display: flex; flex-direction: column; }
.auth-errors { background: #fce8e6; color: var(--auth-err); border-radius: 8px; padding: 10px 14px; font-size: .9rem; margin-bottom: 18px; }
.auth-errors div + div { margin-top: 4px; }

/* Outlined fields with the label sitting in the border once there's text or focus. */
.auth-field { position: relative; margin-bottom: 18px; }
.auth-field input {
    width: 100%; height: 56px; padding: 18px 15px 6px; font: inherit; font-size: 1rem; color: var(--auth-text);
    background: transparent; border: 1px solid var(--auth-line); border-radius: 4px; outline: none;
}
.auth-field label {
    position: absolute; left: 11px; top: 17px; padding: 0 4px; font-size: 1rem; color: var(--auth-muted);
    background: var(--auth-card); pointer-events: none; transition: top .15s, font-size .15s, color .15s;
}
.auth-field input:focus { border: 2px solid var(--auth-accent); padding-left: 14px; }
.auth-field input:focus + label, .auth-field input:not(:placeholder-shown) + label { top: -8px; font-size: .75rem; }
.auth-field input:focus + label { color: var(--auth-accent); }
.auth-row { display: flex; gap: 14px; }
.auth-row .auth-field { flex: 1 1 0; min-width: 0; }

.auth-check { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--auth-text); margin: 2px 0 10px; cursor: pointer; width: max-content; }
.auth-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--auth-accent); }
.auth-actions { padding-top: 22px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.auth-link {
    color: var(--auth-accent); font-weight: 600; font-size: .9rem; text-decoration: none; padding: 10px 14px; border-radius: 999px;
}
.auth-link:hover { background: rgba(11, 87, 208, .08); }
.auth-primary {
    background: var(--auth-accent); color: #fff; border: none; border-radius: 999px; padding: 10px 26px;
    font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; text-decoration: none;
}
.auth-primary:hover { background: var(--auth-accent-hover); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }

.auth-sub { font-size: 1rem; font-weight: 600; margin: 0 0 14px; }
.auth-form-tight { padding-top: 8px; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--auth-muted); font-size: .85rem; margin: 24px 0 8px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1 1 auto; height: 1px; background: #dadce0; }
.auth-ok { background: #e6f4ea; color: #0d652d; border-radius: 8px; padding: 10px 14px; font-size: .9rem; margin-bottom: 18px; }
.auth-forgot { display: inline-block; font-size: .85rem; color: var(--auth-accent); text-decoration: none; font-weight: 600; margin: -6px 0 12px; }
.auth-forgot:hover { text-decoration: underline; }

/* Register has more fields: a wider card. */
.auth-card-wide { max-width: 560px; }

@media (max-width: 640px) {
    .auth-top { padding: 16px; }
    .auth-main { padding: 0 16px 16px; justify-content: stretch; }
    .auth-card, .auth-card-wide { max-width: none; padding: 24px 20px; border-radius: 20px; }
    .auth-intro h1 { font-size: 1.6rem; }
    .auth-row { flex-direction: column; gap: 0; }
}