/* Public typography with tenant colours supplied from CompanySettings. */
.auth-page { --auth-accent:#6f9dc2; --auth-accent-text:#081016; --backgroundcolor:var(--auth-accent); --auth-card-text:#081016; margin:0; min-height:100svh; display:flex; flex-direction:column; background:#0a0a0a; color:#f5f5f7; font:400 14px/1.6 Inter,system-ui,sans-serif; color-scheme:dark; }
.auth-page *, .auth-page *::before, .auth-page *::after { box-sizing:border-box; }
.auth-page [hidden] { display:none !important; }
.auth-header { width:100%; max-width:1440px; margin:0 auto; padding:28px 40px; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.auth-header .doo-logo { color:#6f9dc2; font-size:48px; display:inline-flex; }
.auth-page a { color:inherit; text-underline-offset:4px; }
.auth-back { color:#a8a8ae !important; text-decoration:none; }
.auth-back span { margin-left:8px; }
.auth-main { flex:1; display:grid; place-items:center; padding:40px 24px 56px; }
.auth-panel { width:100%; max-width:480px; padding:40px; border:1px solid rgba(255,255,255,.12); border-radius:24px; background:rgba(255,255,255,.035); box-shadow:0 24px 80px rgba(0,0,0,.18); }
.auth-tenant { display:flex; align-items:center; justify-content:center; min-height:104px; padding:16px; margin-bottom:28px; background:transparent; }
.auth-tenant img { display:block; max-width:100%; width:auto; height:auto; max-height:80px; object-fit:contain; }
.auth-eyebrow { color:#a8a8ae; text-transform:uppercase; font-size:11px; font-weight:600; letter-spacing:.12em; margin:0 0 12px; }
.auth-panel h1 { font-size:clamp(30px,5vw,36px); line-height:1.15; letter-spacing:-.04em; margin:0 0 12px; font-weight:700; }
.auth-intro { color:#a8a8ae; margin:0 0 30px; }
.auth-field { margin-bottom:20px; }
.auth-field label { display:block; font-weight:500; margin-bottom:8px; }
.auth-field input { width:100%; min-height:50px; border:1px solid rgba(255,255,255,.18); border-radius:10px; background:#101112; color:#f5f5f7; padding:12px 14px; font:inherit; font-size:16px; }
.auth-field input::placeholder { color:#85858d; }
.auth-page :focus-visible { outline:2px solid #b9d9f3; outline-offset:4px; }
.auth-field input:focus { border-color:var(--auth-accent); }
.auth-options { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; font-size:12px; margin:0 0 24px; }
.auth-checkbox { display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.auth-checkbox input { width:16px; height:16px; margin:0; accent-color:var(--auth-accent); }
.auth-button { width:100%; min-height:50px; border-radius:10px; border:1px solid transparent; padding:12px 18px; font:600 14px/1.5 Inter,system-ui,sans-serif; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:12px; }
.auth-page a.auth-button { text-decoration:none; }
.auth-primary { background:var(--backgroundcolor); color:var(--auth-accent-text); }
.auth-secondary { margin-top:12px; background:transparent; border-color:rgba(255,255,255,.2); color:#f5f5f7; }
.auth-button:hover { filter:brightness(1.1); }
.auth-button:disabled { cursor:wait; opacity:.65; }
.auth-button[aria-busy="true"]::before { content:""; flex:0 0 auto; width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:auth-submit-spin .8s linear infinite; }
@keyframes auth-submit-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .auth-button[aria-busy="true"]::before { animation:none; } }
.auth-status:empty { display:none; }
.auth-status { margin:16px 0 0; color:#c4c4ca; font-size:13px; }
.auth-terms { font-size:11px; line-height:1.8; color:#a8a8ae; margin:28px 0 0; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); }
.auth-footer { text-align:center; color:#85858d; font-size:12px; padding:0 24px 28px; }
.auth-footer span { padding:0 6px; }
.auth-validation.validation-summary-valid { display:none; }
.auth-validation ul { list-style:none; padding:0; margin:0 0 20px; color:#ffcfb8; }
.auth-notice { color:#ffcfb8; }
.auth-page .toastify { font:inherit; max-width:min(420px,calc(100vw - 32px)); border:1px solid rgba(255,255,255,.18); border-radius:10px; box-shadow:0 8px 32px #0008; }
@media (max-width:540px) { .auth-header { padding:24px; } .auth-header .doo-logo { font-size:40px; } .auth-main { padding:24px 16px 40px; } .auth-panel { padding:28px 24px; } }

/* Compact sign-in form, with fluid gutters for smaller screens. */
.auth-panel-signin { max-width:520px; padding:36px; font-size:15px; text-align:center; }
.auth-panel-signin h1 { font-size:clamp(30px,5vw,36px); }
.auth-panel-signin .auth-eyebrow { font-size:11px; }
.auth-panel-signin .auth-intro { font-size:15px; margin-bottom:24px; }
.auth-panel-signin .auth-field { margin-bottom:20px; }
.auth-panel-signin .auth-field label { font-size:14px; margin-bottom:8px; }
.auth-panel-signin .auth-field input { min-height:56px; padding:14px 16px; font-size:16px; text-align:center; }
.auth-panel-signin .auth-button { min-height:56px; padding:14px 20px; font-size:15px; }
.auth-panel-signin .auth-secondary { margin-top:12px; }
.auth-panel-signin .auth-options { font-size:13px; margin-bottom:24px; justify-content:center; gap:12px 24px; }
.auth-panel-signin .auth-checkbox input { width:18px; height:18px; }
.auth-panel-signin .auth-status { font-size:15px; }
.auth-panel-signin .auth-terms { font-size:12px; margin-top:24px; padding-top:20px; }
.auth-panel-signin .auth-tenant { min-height:80px; padding:8px; margin-bottom:20px; }
.auth-panel-signin .auth-tenant img { max-height:64px; }
@media (max-width:540px) {
    .auth-panel-signin { padding:28px 24px; }
    .auth-panel-signin .auth-field input { min-height:56px; padding:14px 16px; font-size:16px; }
    .auth-panel-signin .auth-button { min-height:56px; padding:14px 16px; font-size:15px; }
}

/* Sign-in carries the tenant's solid brand colour; recovery keeps its dark surface. */
.auth-header-signin { justify-content:flex-end; }
.auth-panel-signin {
    position:relative;
    background:var(--backgroundcolor);
    color:var(--auth-card-text);
    border-color:var(--backgroundcolor);
    box-shadow:0 24px 80px rgba(0,0,0,.28);
}
.auth-panel-signin :is(.auth-eyebrow,.auth-intro,.auth-status,.auth-terms,.auth-notice) { color:inherit; }
.auth-panel-signin .auth-terms { border-top-color:currentColor; }
.auth-panel-signin .auth-validation ul { color:inherit; font-weight:600; }
.auth-panel-signin .auth-primary { color:var(--auth-card-text); border:2px solid currentColor; box-shadow:0 3px 10px #0002; }
.auth-panel-signin .auth-secondary { color:var(--auth-card-text); border-color:currentColor; }
.auth-panel-signin :focus-visible { outline-color:var(--auth-card-text); }
.auth-default-brand .doo-logo {
    display:inline-flex;
    font-size:64px;
    color:#6f9dc2;
    filter:drop-shadow(0 1px 2px #000) drop-shadow(0 0 1px #000);
}
/* The marketing site's vertical tracks and slow white-tipped runners, behind the form. */
.auth-page { isolation:isolate; }
.auth-header, .auth-main, .auth-footer { position:relative; z-index:1; }
.auth-light-field {
    position:fixed;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
    opacity:.6;
    background:radial-gradient(ellipse 82% 58% at 50% 22%, color-mix(in srgb, var(--backgroundcolor) 9%, transparent), transparent 74%);
    -webkit-mask-image:linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
    mask-image:linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent);
}
.auth-light-field > i { position:absolute; display:block; font-style:normal; }
.auth-light-rail { top:0; bottom:0; width:1px; background:rgba(255,255,255,.045); }
.auth-light-runner {
    top:-240px;
    width:2px;
    border-radius:999px;
    background:linear-gradient(to bottom, transparent, var(--backgroundcolor), #fff);
    box-shadow:0 0 14px 2px color-mix(in srgb, var(--backgroundcolor) 50%, transparent);
    animation:auth-light-fall var(--runner-duration) linear var(--runner-delay) infinite;
}
.auth-light-runner-17 { left:17%; height:200px; --runner-duration:12s; --runner-delay:-3s; }
.auth-light-runner-72 { left:72%; height:240px; --runner-duration:14s; --runner-delay:-9s; }
.auth-light-runner-41 { left:41%; height:140px; --runner-duration:18s; --runner-delay:-6s; }
.auth-light-runner-95 { left:95%; height:180px; --runner-duration:15s; --runner-delay:-12s; }
.auth-light-cross-rule { top:58%; right:0; left:0; height:1px; background:rgba(255,255,255,.04); }
.auth-light-cross-runner {
    top:58%; left:110%; width:220px; height:2px; border-radius:999px;
    background:linear-gradient(to left, transparent, var(--backgroundcolor), #fff);
    box-shadow:0 0 14px 2px color-mix(in srgb, var(--backgroundcolor) 45%, transparent);
    animation:auth-light-cross 17s linear -5s infinite;
}
@keyframes auth-light-fall {
    0% { transform:translateY(0); opacity:0; }
    10%, 85% { opacity:1; }
    100% { transform:translateY(calc(100vh + 480px)); opacity:0; }
}
@keyframes auth-light-cross {
    0% { transform:translateX(0); opacity:0; }
    12%, 85% { opacity:1; }
    100% { transform:translateX(calc(-110vw - 220px)); opacity:0; }
}
@media (prefers-reduced-motion:reduce) {
    .auth-light-runner, .auth-light-cross-runner { animation:none; display:none; }
}