/* ═══════════════════════════════════════════════════════════════════════════
   AUTH SUITE KIT  (.ait-*)   — login / register / forgot / reset
   ---------------------------------------------------------------------------
   Consumed by resources/views/livewire/public/auth/{login,register,
   forgot-password,reset-password}.blade.php and route-gated in
   layouts/auth.blade.php, so the rest of the install doesn't pay for it.

   Was an inline <style> duplicated into every auth render; now one cacheable
   file. Loads AFTER custom.{ltr,rtl}.css and reads its --aits-* tokens, but
   every token has a literal fallback so the kit still renders standalone.

   CONTRACT NOTES (learned the hard way on the .crs-/.hpx kits):
     • Private --ait-* namespace. Never write bare --aits-*-ink: those have no
       dark twin and render ink-on-ink the moment the user flips theme.
     • Every colour declared here has a `body.theme-dark` twin further down.
     • Links AND buttons get an explicit `color`. Several page kits declare
       `a{color:inherit}` and would otherwise wash this one out.
     • Logical properties only (inset-inline, margin-inline, padding-block…)
       so one file serves LTR and RTL.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */
.ait-auth{
    --ait-primary:var(--aits-blue,#3680ED);
    --ait-primary-deep:var(--aits-blue-dark,#2060C0);
    --ait-primary-light:var(--aits-blue-light,#60A4F5);
    --ait-tint:var(--aits-blue-tint,#EAF2FD);
    --ait-line-brand:var(--aits-blue-line,#CFE0FA);
    --ait-grad:linear-gradient(135deg,var(--ait-primary-light) 0%,var(--ait-primary) 52%,var(--ait-primary-deep) 100%);

    --ait-ink:var(--aits-ink,#111111);
    --ait-body:var(--aits-txt,#444444);
    --ait-muted:var(--aits-mut,#666666);
    --ait-faint:var(--aits-faint,#999999);

    --ait-card:var(--aits-card,#FFFFFF);
    --ait-line:var(--aits-line,#ECECEC);
    --ait-line-strong:var(--aits-line-strong,#DADADA);
    --ait-field:var(--aits-surface-2,#FAFAFA);

    /* Semantic hues get private ink tokens — the public --aits-*-ink set has
       no dark twin (see kit contract). */
    --ait-ok:#0CA678;      --ait-ok-ink:#087F5B;  --ait-ok-soft:rgba(12,166,120,.10);  --ait-ok-line:rgba(12,166,120,.26);
    --ait-bad:#E03131;     --ait-bad-ink:#B71C1C; --ait-bad-soft:rgba(224,49,49,.09);  --ait-bad-line:rgba(224,49,49,.24);

    --ait-ring:0 0 0 4px rgba(54,128,237,.16);
    --ait-ring-bad:0 0 0 4px rgba(224,49,49,.15);
    --ait-glow:rgba(54,128,237,.14);
    --ait-sheen:rgba(255,255,255,.32);

    --ait-shadow:0 28px 68px -26px rgba(15,23,42,.20);
    --ait-shadow-sm:0 6px 20px -10px rgba(15,23,42,.14);
    --ait-shadow-brand:0 16px 32px -14px rgba(54,128,237,.62);

    --ait-r:24px;
    --ait-r-md:14px;
    --ait-r-sm:11px;

    --ait-e:var(--ease,cubic-bezier(.16,1,.3,1));
    --ait-t:var(--t,.18s);
    --ait-t-slow:.42s;
}

/* ── 2. Page shell + backdrop ────────────────────────────────────────────── */

/* The auth layout drops this section inside `.container.py-4`, so the ambient
   wash has to be painted by the page-content ancestor to reach the viewport
   edges. :has() does that without touching the shared layout. */
.page-content:has(.ait-auth){
    background:
        radial-gradient(58% 52% at 84% 8%,  rgba(96,164,245,.20), transparent 62%),
        radial-gradient(46% 46% at 6% 92%,  rgba(54,128,237,.13), transparent 62%),
        radial-gradient(38% 40% at 50% 55%, rgba(112,72,232,.06), transparent 70%),
        linear-gradient(180deg,#F5F9FE 0%,#EAF2FD 100%);
}

.ait-auth{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    padding-block:clamp(26px,5.5vw,76px);
    font-family:var(--font,inherit);
    /* Flat fallback for browsers without :has() — no seam against the layout. */
    background:linear-gradient(180deg,#F5F9FE 0%,#EAF2FD 100%);
}
@supports selector(:has(*)){
    .ait-auth{ background:transparent; }
}

.ait-auth__inner{
    position:relative;
    z-index:2;
    width:100%;
    max-width:1160px;
    margin-inline:auto;
}

.ait-auth__grid{
    display:grid;
    grid-template-columns:1.04fr .96fr;
    align-items:center;
    gap:clamp(28px,5vw,76px);
}

/* ── 3. Decorative art ───────────────────────────────────────────────────── */
.ait-decor{
    position:absolute;
    inset:0;
    z-index:1;
    overflow:hidden;
    pointer-events:none;
    contain:strict;
}
.ait-decor__orb{
    position:absolute;
    border-radius:50%;
    filter:blur(52px);
    opacity:.55;
    will-change:transform;
}
.ait-decor__orb--1{
    width:380px; height:380px;
    inset-block-start:-130px; inset-inline-end:-90px;
    background:radial-gradient(circle,rgba(96,164,245,.48),transparent 70%);
    animation:ait-drift-a 17s var(--ait-e) infinite alternate;
}
.ait-decor__orb--2{
    width:320px; height:320px;
    inset-block-end:-130px; inset-inline-start:-100px;
    background:radial-gradient(circle,rgba(54,128,237,.34),transparent 70%);
    animation:ait-drift-b 21s var(--ait-e) infinite alternate;
}
.ait-decor__orb--3{
    width:240px; height:240px;
    inset-block-start:42%; inset-inline-start:38%;
    background:radial-gradient(circle,rgba(112,72,232,.20),transparent 70%);
    animation:ait-drift-a 25s var(--ait-e) infinite alternate-reverse;
}
@keyframes ait-drift-a{
    from{ transform:translate3d(0,0,0) scale(1); }
    to  { transform:translate3d(-26px,34px,0) scale(1.09); }
}
@keyframes ait-drift-b{
    from{ transform:translate3d(0,0,0) scale(1); }
    to  { transform:translate3d(30px,-28px,0) scale(1.07); }
}

.ait-decor__dots{
    position:absolute;
    inset-block-start:44px; inset-inline-end:44px;
    width:158px; height:116px;
    opacity:.5;
    color:var(--aits-blue-line,#CFE0FA);
    background-image:radial-gradient(currentColor 1.6px,transparent 1.6px);
    background-size:18px 18px;
    -webkit-mask-image:linear-gradient(200deg,#000,transparent 78%);
            mask-image:linear-gradient(200deg,#000,transparent 78%);
}

/* Fine grid that keeps the empty space from reading as flat colour. */
.ait-decor__grid{
    position:absolute;
    inset:0;
    opacity:.42;
    background-image:
        linear-gradient(to right,  rgba(54,128,237,.07) 1px,transparent 1px),
        linear-gradient(to bottom, rgba(54,128,237,.07) 1px,transparent 1px);
    background-size:58px 58px;
    -webkit-mask-image:radial-gradient(75% 62% at 50% 42%,#000,transparent 76%);
            mask-image:radial-gradient(75% 62% at 50% 42%,#000,transparent 76%);
}

.ait-decor__shield{
    position:absolute;
    inset-block-start:50%; inset-inline-end:-60px;
    transform:translateY(-50%);
    width:420px; max-width:34vw;
    opacity:.9;
    animation:ait-float 9s var(--ait-e) infinite alternate;
}
@keyframes ait-float{
    from{ transform:translateY(-50%) translateY(0); }
    to  { transform:translateY(-50%) translateY(-16px); }
}

/* ── 4. Brand panel ──────────────────────────────────────────────────────── */
.ait-brand{
    max-width:470px;
    color:var(--ait-ink);
}

.ait-brand__badge{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-block-end:24px;
    padding:8px 16px;
    border:1px solid var(--ait-line);
    border-radius:999px;
    background:var(--ait-card);
    box-shadow:var(--ait-shadow-sm);
    font-size:13px;
    font-weight:650;
    letter-spacing:-.01em;
    color:var(--ait-primary-deep);
    overflow:hidden;
    transition:transform var(--ait-t) var(--ait-e),
               box-shadow var(--ait-t) var(--ait-e),
               border-color var(--ait-t) var(--ait-e);
}
.ait-brand__badge svg{ width:15px; height:15px; flex:0 0 auto; }
/* Light sweeps left→right across the pill on hover. */
.ait-brand__badge::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(115deg,transparent 26%,var(--ait-tint) 50%,transparent 74%);
    transform:translateX(-115%);
    transition:transform var(--ait-t-slow) var(--ait-e);
}
.ait-brand__badge:hover{
    transform:translateY(-2px);
    border-color:var(--ait-line-brand);
    box-shadow:0 12px 26px -12px rgba(54,128,237,.42);
}
.ait-brand__badge:hover::before{ transform:translateX(115%); }
.ait-brand__badge > *{ position:relative; z-index:1; }

/* Three-class chain on purpose. custom.ltr.css ships
   `body:not(.admin-shell):not(.theme-dark) h1,h2 {font-weight:700;
   letter-spacing:-.02em; line-height:1.2}` (0,2,2) plus a both-themes
   `body:not(.admin-shell) h1,h2,h3 {letter-spacing:-.015em}` (0,1,2).
   A bare `.ait-brand__title` (0,1,0) loses to both, and the headline silently
   reverts to 1.2 leading. Same reason for every other heading in this file. */
.ait-auth .ait-brand .ait-brand__title{
    margin:0 0 18px;
    font-size:clamp(32px,4.6vw,54px);
    font-weight:800;
    line-height:1.04;
    letter-spacing:-.028em;
    color:var(--ait-ink);
}
/* The accent half of the headline rides a gradient. background-clip needs an
   explicit transparent fill, and a solid `color` first so unsupported engines
   still show readable text rather than nothing. */
.ait-brand__title span{
    display:block;
    color:var(--ait-primary);
    background:linear-gradient(96deg,var(--ait-primary-light),var(--ait-primary) 45%,var(--ait-primary-deep));
    -webkit-background-clip:text;
            background-clip:text;
    -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
    .ait-brand__title span{ -webkit-text-fill-color:currentColor; }
}

.ait-brand__lead{
    max-width:410px;
    margin:0 0 32px;
    font-size:clamp(15px,1.35vw,17px);
    line-height:1.62;
    color:var(--ait-body);
}

/* Feature rows behave as cards that lift out of the page on hover. */
.ait-features{ display:grid; gap:8px; }

.ait-feature{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:12px 14px;
    border-radius:16px;
    transition:transform var(--ait-t) var(--ait-e);
}
.ait-feature::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:var(--ait-card);
    border:1px solid var(--ait-line);
    box-shadow:var(--ait-shadow-sm);
    opacity:0;
    transition:opacity var(--ait-t) var(--ait-e);
}
/* Brand rail that grows down the inline-start edge. */
.ait-feature::after{
    content:"";
    position:absolute;
    inset-block:14px;
    inset-inline-start:0;
    width:3px;
    border-radius:3px;
    background:var(--ait-grad);
    transform:scaleY(0);
    transform-origin:center top;
    transition:transform var(--ait-t) var(--ait-e);
}
.ait-feature:hover{ transform:translateY(-2px); }
.ait-feature:hover::before,
.ait-feature:hover::after{ opacity:1; transform:none; }
.ait-feature:hover::after{ transform:scaleY(1); }
.ait-feature > *{ position:relative; z-index:1; }

.ait-feature__icon{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:46px; height:46px;
    border-radius:14px;
    background:var(--ait-tint);
    color:var(--ait-primary);
    box-shadow:inset 0 0 0 1px rgba(54,128,237,.10);
    transition:transform var(--ait-t) var(--ait-e),
               background var(--ait-t) var(--ait-e),
               color var(--ait-t) var(--ait-e),
               box-shadow var(--ait-t) var(--ait-e);
}
.ait-feature__icon svg{ width:22px; height:22px; }
.ait-feature:hover .ait-feature__icon{
    transform:translateY(-1px) scale(1.06);
    background:var(--ait-grad);
    color:#fff;
    box-shadow:0 10px 20px -10px rgba(54,128,237,.72);
}

.ait-feature__title{
    margin:2px 0 3px;
    font-size:15.5px;
    font-weight:700;
    letter-spacing:-.01em;
    color:var(--ait-ink);
}
.ait-feature__desc{
    margin:0;
    font-size:13.5px;
    line-height:1.5;
    color:var(--ait-body);
}

/* Reassurance strip under the feature list. */
.ait-trust{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 18px;
    margin-block-start:26px;
    padding-block-start:22px;
    border-block-start:1px solid var(--ait-line);
    font-size:12.75px;
    color:var(--ait-muted);
}
.ait-trust__item{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-weight:600;
}
.ait-trust__item svg{ width:15px; height:15px; color:var(--ait-ok); flex:0 0 auto; }
.ait-auth .ait-trust__link{
    color:var(--ait-primary);
    font-weight:650;
    text-decoration:none;
    transition:color var(--ait-t) var(--ait-e);
}
.ait-auth .ait-trust__link:hover{ color:var(--ait-primary-deep); text-decoration:underline; }

/* ── 5. Form card ────────────────────────────────────────────────────────── */
.ait-card-wrap{ display:flex; justify-content:center; }

.ait-card{
    position:relative;
    isolation:isolate;
    width:100%;
    max-width:468px;
    padding:clamp(26px,3vw,40px);
    border:1px solid var(--ait-line);
    border-radius:var(--ait-r);
    background:var(--ait-card);
    box-shadow:var(--ait-shadow);
    transition:box-shadow var(--ait-t-slow) var(--ait-e),
               transform var(--ait-t-slow) var(--ait-e);
}
/* Gradient hairline that brightens while the user is filling the form. */
.ait-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    padding:1px;
    border-radius:inherit;
    background:linear-gradient(150deg,rgba(96,164,245,.65),rgba(96,164,245,0) 34%,rgba(96,164,245,0) 64%,rgba(54,128,237,.45));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    opacity:.5;
    transition:opacity var(--ait-t-slow) var(--ait-e);
    pointer-events:none;
}
/* Brand wash bleeding down from the top edge. */
.ait-card::after{
    content:"";
    position:absolute;
    z-index:-1;
    inset-block-start:0;
    inset-inline:0;
    height:210px;
    border-start-start-radius:inherit;
    border-start-end-radius:inherit;
    background:radial-gradient(120% 100% at 50% 0%,var(--ait-glow),transparent 68%);
    pointer-events:none;
}
.ait-card:hover{ box-shadow:0 34px 78px -28px rgba(15,23,42,.26); }
.ait-card:hover::before,
.ait-card:focus-within::before{ opacity:1; }

.ait-card__head{
    text-align:center;
    margin-block-end:24px;
}

.ait-card__icon{
    position:relative;
    display:grid;
    place-items:center;
    width:58px; height:58px;
    margin:0 auto 16px;
    border-radius:18px;
    color:#fff;
    box-shadow:0 14px 28px -10px rgba(54,128,237,.58);
}
/* ::before is a slowly rotating conic halo; ::after is the solid gradient
   face painted over it, so only the -7px rim of the halo shows. */
.ait-card__icon::before{
    content:"";
    position:absolute;
    inset:-7px;
    border-radius:23px;
    background:conic-gradient(from 0deg,transparent 0deg,var(--ait-primary-light) 78deg,transparent 190deg,transparent 360deg);
    opacity:.75;
    animation:ait-rotate 5.5s linear infinite;
}
.ait-card__icon::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:var(--ait-grad);
}
.ait-card__icon svg{ position:relative; z-index:2; width:26px; height:26px; }
@keyframes ait-rotate{ to{ transform:rotate(360deg); } }

.ait-auth .ait-card .ait-card__title{
    margin:0 0 7px;
    font-size:clamp(21px,2.2vw,25px);
    font-weight:800;
    letter-spacing:-.022em;
    line-height:1.2;
    color:var(--ait-ink);
}
.ait-card__subtitle{
    margin:0 auto;
    max-width:34ch;
    font-size:14px;
    line-height:1.55;
    color:var(--ait-muted);
}

/* ── 6. Fields ───────────────────────────────────────────────────────────── */
.ait-field{ margin-block-end:17px; }

.ait-label{
    display:block;
    margin-block-end:8px;
    font-size:13.5px;
    font-weight:650;
    letter-spacing:-.005em;
    color:var(--ait-ink);
}

.ait-input{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    min-height:52px;
    padding-inline:15px;
    border:1.5px solid var(--ait-line);
    border-radius:var(--ait-r-md);
    background:var(--ait-field);
    transition:border-color var(--ait-t) var(--ait-e),
               box-shadow var(--ait-t) var(--ait-e),
               background var(--ait-t) var(--ait-e);
}
/* Accent that wipes across the bottom edge as the field takes focus. */
.ait-input::after{
    content:"";
    position:absolute;
    inset-inline:12px;
    inset-block-end:-1.5px;
    height:2px;
    border-radius:2px;
    background:var(--ait-grad);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform var(--ait-t-slow) var(--ait-e);
}
.ait-input:hover{ border-color:var(--ait-line-strong); }
.ait-input:focus-within{
    border-color:var(--ait-primary);
    background:var(--ait-card);
    box-shadow:var(--ait-ring);
}
.ait-input:focus-within::after{ transform:scaleX(1); }

.ait-input__icon{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    color:var(--ait-faint);
    transition:color var(--ait-t) var(--ait-e), transform var(--ait-t) var(--ait-e);
}
.ait-input__icon svg{ width:19px; height:19px; }
.ait-input:focus-within .ait-input__icon{ color:var(--ait-primary); transform:scale(1.06); }

.ait-input input{
    flex:1 1 auto;
    min-width:0;
    height:48px;
    padding:0;
    border:0;
    outline:none;
    box-shadow:none;
    background:transparent;
    font-size:15px;
    font-family:inherit;
    color:var(--ait-ink);
}
.ait-input input::placeholder{ color:var(--ait-faint); }
.ait-input input:disabled{ color:var(--ait-muted); cursor:not-allowed; }
.ait-input input:-webkit-autofill{
    -webkit-text-fill-color:var(--ait-ink);
    transition:background-color 9999s ease-out;
}

.ait-input__toggle{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    padding:6px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--ait-faint);
    cursor:pointer;
    transition:color var(--ait-t) var(--ait-e), background var(--ait-t) var(--ait-e);
}
.ait-input__toggle:hover{ color:var(--ait-primary); background:var(--ait-tint); }
.ait-input__toggle:focus-visible{ outline:none; box-shadow:var(--ait-ring); color:var(--ait-primary); }
.ait-input__toggle svg{ width:19px; height:19px; }
.ait-input__toggle .ait-eye-off{ display:none; }
.ait-input__toggle[data-shown="1"] .ait-eye-on{ display:none; }
.ait-input__toggle[data-shown="1"] .ait-eye-off{ display:block; }

.ait-input.is-invalid{ border-color:var(--ait-bad); background:var(--ait-bad-soft); }
.ait-input.is-invalid .ait-input__icon{ color:var(--ait-bad); }
.ait-input.is-invalid:focus-within{ box-shadow:var(--ait-ring-bad); }
.ait-input.is-invalid::after{ background:var(--ait-bad); }

/* Password rule checklist */
.ait-rules{
    display:grid;
    gap:8px;
    margin:13px 2px 0;
}
.ait-rule{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:12.8px;
    color:var(--ait-muted);
    transition:color var(--ait-t) var(--ait-e);
}
.ait-rule__tick{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:17px; height:17px;
    border-radius:50%;
    background:var(--ait-line);
    color:var(--ait-card);
    transition:background var(--ait-t) var(--ait-e),
               transform var(--ait-t) var(--ait-e),
               color var(--ait-t) var(--ait-e);
}
.ait-rule__tick svg{ width:10px; height:10px; }
.ait-rule[data-ok="1"]{ color:var(--ait-ok-ink); font-weight:650; }
.ait-rule[data-ok="1"] .ait-rule__tick{
    background:var(--ait-ok);
    color:#fff;
    transform:scale(1.12);
}

/* ── 7. Utility rows ─────────────────────────────────────────────────────── */
.ait-row-between{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    margin:6px 2px 20px;
}

.ait-check{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin:0;
    font-size:13.5px;
    color:var(--ait-body);
    cursor:pointer;
    user-select:none;
    transition:color var(--ait-t) var(--ait-e);
}
.ait-check:hover{ color:var(--ait-ink); }
/* Native input restyled in place — no extra markup, so nothing can end up
   visually hidden behind a decorative span. */
.ait-check input{
    -webkit-appearance:none;
            appearance:none;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    width:18px; height:18px;
    margin:0;
    border:1.5px solid var(--ait-line-strong);
    border-radius:6px;
    background:var(--ait-card);
    cursor:pointer;
    transition:background var(--ait-t) var(--ait-e),
               border-color var(--ait-t) var(--ait-e),
               box-shadow var(--ait-t) var(--ait-e);
}
.ait-check input::before{
    content:"";
    width:10px; height:10px;
    background:#fff;
    clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);
    transform:scale(0);
    transition:transform var(--ait-t) var(--ait-e);
}
.ait-check input:hover{ border-color:var(--ait-primary); }
.ait-check input:focus-visible{ outline:none; box-shadow:var(--ait-ring); }
.ait-check input:checked{ background:var(--ait-grad); border-color:transparent; }
.ait-check input:checked::before{ transform:scale(1); }

.ait-auth .ait-link{
    position:relative;
    font-size:13.5px;
    font-weight:650;
    color:var(--ait-primary);
    text-decoration:none;
    transition:color var(--ait-t) var(--ait-e);
}
.ait-auth .ait-link::after{
    content:"";
    position:absolute;
    inset-inline:0;
    inset-block-end:-3px;
    height:1.5px;
    border-radius:2px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:center right;
    transition:transform var(--ait-t) var(--ait-e);
}
.ait-auth .ait-link:hover{ color:var(--ait-primary-deep); text-decoration:none; }
.ait-auth .ait-link:hover::after{ transform:scaleX(1); transform-origin:center left; }
.ait-auth .ait-link:focus-visible{ outline:none; box-shadow:var(--ait-ring); border-radius:4px; }

/* ── 8. Buttons ──────────────────────────────────────────────────────────── */
.ait-auth .ait-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    min-height:53px;
    padding-inline:20px;
    border:0;
    border-radius:var(--ait-r-md);
    overflow:hidden;
    background:var(--ait-grad);
    color:#fff;
    font-family:inherit;
    font-size:15.5px;
    font-weight:700;
    letter-spacing:-.01em;
    text-decoration:none;
    cursor:pointer;
    box-shadow:var(--ait-shadow-brand);
    transition:transform var(--ait-t) var(--ait-e),
               box-shadow var(--ait-t) var(--ait-e),
               filter var(--ait-t) var(--ait-e);
}
/* Specular sweep on hover. */
.ait-auth .ait-btn::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(115deg,transparent 22%,var(--ait-sheen) 48%,transparent 72%);
    transform:translateX(-125%);
    transition:transform .72s var(--ait-e);
}
.ait-auth .ait-btn > *{ position:relative; z-index:1; }
.ait-auth .ait-btn:hover{
    transform:translateY(-2px);
    filter:brightness(1.04);
    box-shadow:0 22px 40px -14px rgba(54,128,237,.72);
    color:#fff;
}
.ait-auth .ait-btn:hover::before{ transform:translateX(125%); }
.ait-auth .ait-btn:active{ transform:translateY(0); box-shadow:var(--ait-shadow-brand); }
.ait-auth .ait-btn:focus-visible{ outline:none; box-shadow:var(--ait-ring),var(--ait-shadow-brand); }
.ait-auth .ait-btn:disabled{ opacity:.72; cursor:progress; transform:none; }
.ait-auth .ait-btn:disabled::before{ transform:translateX(-125%); }
.ait-auth .ait-btn .spinner-border{ width:1.05rem; height:1.05rem; border-width:.15em; }

/* Divider */
.ait-divider{
    display:flex;
    align-items:center;
    gap:14px;
    margin-block:22px;
    font-size:12.25px;
    font-weight:650;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--ait-faint);
}
.ait-divider::before,
.ait-divider::after{
    content:"";
    flex:1 1 auto;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--ait-line),transparent);
}

/* Social buttons — each provider tints its own hover wash. */
.ait-social{ display:grid; gap:10px; }

.ait-auth .ait-social__btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    width:100%;
    min-height:51px;
    padding-inline:16px;
    border:1.5px solid var(--ait-line);
    border-radius:var(--ait-r-md);
    overflow:hidden;
    background:var(--ait-card);
    color:var(--ait-ink);
    font-size:14.5px;
    font-weight:650;
    text-decoration:none;
    transition:transform var(--ait-t) var(--ait-e),
               border-color var(--ait-t) var(--ait-e),
               box-shadow var(--ait-t) var(--ait-e),
               color var(--ait-t) var(--ait-e);
    --ait-brand-wash:rgba(54,128,237,.08);
    --ait-brand-line:var(--ait-line-brand);
}
.ait-auth .ait-social__btn::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--ait-brand-wash);
    opacity:0;
    transition:opacity var(--ait-t) var(--ait-e);
}
.ait-auth .ait-social__btn > *{ position:relative; z-index:1; }
.ait-auth .ait-social__btn svg,
.ait-auth .ait-social__btn img{
    position:relative;
    z-index:1;
    flex:0 0 auto;
    width:20px; height:20px;
    transition:transform var(--ait-t) var(--ait-e);
}
.ait-auth .ait-social__btn:hover{
    transform:translateY(-2px);
    border-color:var(--ait-brand-line);
    box-shadow:0 14px 26px -14px rgba(15,23,42,.30);
    color:var(--ait-ink);
    text-decoration:none;
}
.ait-auth .ait-social__btn:hover::before{ opacity:1; }
.ait-auth .ait-social__btn:hover svg,
.ait-auth .ait-social__btn:hover img{ transform:scale(1.12); }
.ait-auth .ait-social__btn:active{ transform:translateY(0); }
.ait-auth .ait-social__btn:focus-visible{ outline:none; box-shadow:var(--ait-ring); }

.ait-auth .ait-social__btn.is-google  { --ait-brand-wash:rgba(66,133,244,.09);  --ait-brand-line:rgba(66,133,244,.42); }
.ait-auth .ait-social__btn.is-facebook{ --ait-brand-wash:rgba(24,119,242,.09);  --ait-brand-line:rgba(24,119,242,.42); }
.ait-auth .ait-social__btn.is-github  { --ait-brand-wash:rgba(24,23,23,.07);    --ait-brand-line:rgba(24,23,23,.34); }
.ait-auth .ait-social__btn.is-apple   { --ait-brand-wash:rgba(0,0,0,.06);       --ait-brand-line:rgba(0,0,0,.32); }

/* When only two providers are enabled they read better side by side. */
@media (min-width:420px){
    .ait-social.is-pair{ grid-template-columns:1fr 1fr; }
    .ait-social.is-pair .ait-social__btn{ padding-inline:10px; font-size:14px; }
}

/* ── 9. Notes, alerts, foot ──────────────────────────────────────────────── */
.ait-note{
    display:flex;
    align-items:center;
    gap:13px;
    margin-block-start:20px;
    padding:14px 16px;
    border:1px solid var(--ait-line);
    border-radius:var(--ait-r-md);
    background:var(--ait-field);
    transition:border-color var(--ait-t) var(--ait-e), background var(--ait-t) var(--ait-e);
}
.ait-note:hover{ border-color:var(--ait-line-brand); background:var(--ait-tint); }
.ait-note__icon{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:40px; height:40px;
    border-radius:12px;
    background:var(--ait-tint);
    color:var(--ait-primary);
    transition:transform var(--ait-t) var(--ait-e);
}
.ait-note:hover .ait-note__icon{ transform:translateX(-2px) scale(1.05); }
.ait-note__icon svg{ width:19px; height:19px; }
.ait-note__title{ margin:0 0 2px; font-size:13.5px; font-weight:700; color:var(--ait-ink); }
.ait-note__text{ margin:0; font-size:13px; color:var(--ait-body); }
.ait-auth .ait-note__text a{
    color:var(--ait-primary);
    font-weight:650;
    text-decoration:none;
    transition:color var(--ait-t) var(--ait-e);
}
.ait-auth .ait-note__text a:hover{ color:var(--ait-primary-deep); text-decoration:underline; }

/* Re-skin the Tabler/Bootstrap alerts the shared x-auth-* components emit. */
.ait-auth .alert{
    margin-block-end:17px;
    padding:13px 15px;
    border:1px solid transparent;
    border-radius:var(--ait-r-sm);
    font-size:13.5px;
    line-height:1.5;
}
.ait-auth .alert-success{
    background:var(--ait-ok-soft);
    border-color:var(--ait-ok-line);
    color:var(--ait-ok-ink);
}
.ait-auth .alert-danger{
    background:var(--ait-bad-soft);
    border-color:var(--ait-bad-line);
    color:var(--ait-bad-ink);
}
.ait-auth .alert .font-medium{ margin-block-end:5px; font-weight:700; }
.ait-auth .alert ul{ margin:0; padding-inline-start:18px; }
.ait-auth .alert li + li{ margin-block-start:3px; }

/* reCAPTCHA is a fixed 304px iframe — centre it and stop it forcing a
   horizontal scrollbar on the narrowest phones. */
.ait-auth .g-recaptcha{
    display:flex;
    justify-content:center;
    margin-block-end:16px;
}
@media (max-width:359.98px){
    .ait-auth .g-recaptcha{ transform:scale(.88); transform-origin:top center; }
}

.ait-card__foot{
    margin-block-start:24px;
    padding-block-start:20px;
    border-block-start:1px solid var(--ait-line);
    text-align:center;
    font-size:14px;
    color:var(--ait-body);
}
.ait-auth .ait-card__foot a{
    position:relative;
    margin-inline-start:4px;
    color:var(--ait-primary);
    font-weight:700;
    text-decoration:none;
    transition:color var(--ait-t) var(--ait-e);
}
.ait-auth .ait-card__foot a::after{
    content:"";
    position:absolute;
    inset-inline:0;
    inset-block-end:-2px;
    height:1.5px;
    border-radius:2px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:center right;
    transition:transform var(--ait-t) var(--ait-e);
}
.ait-auth .ait-card__foot a:hover{ color:var(--ait-primary-deep); text-decoration:none; }
.ait-auth .ait-card__foot a:hover::after{ transform:scaleX(1); transform-origin:center left; }

/* ── 10. Entrance motion ─────────────────────────────────────────────────── */
.ait-brand,
.ait-card{ animation:ait-rise .62s var(--ait-e) both; }
.ait-card{ animation-delay:.09s; }
@keyframes ait-rise{
    from{ opacity:0; transform:translateY(16px); }
    to  { opacity:1; transform:none; }
}

/* ── 11. Responsive ──────────────────────────────────────────────────────── */

/* Small desktop / large tablet — tighten the gutter before stacking. */
@media (max-width:1199.98px){
    .ait-auth__grid{ gap:clamp(24px,4vw,48px); }
    .ait-brand{ max-width:430px; }
    .ait-decor__shield{ max-width:30vw; }
}

/* Tablet portrait — one column, brand panel centred above the card. */
@media (max-width:991.98px){
    .ait-auth{ padding-block:clamp(24px,5vw,48px); }
    .ait-auth__grid{
        grid-template-columns:1fr;
        gap:34px;
        justify-items:center;
    }
    .ait-brand{
        order:0;
        max-width:620px;
        text-align:center;
    }
    .ait-brand__lead{ margin-inline:auto; }
    .ait-card-wrap{ order:1; width:100%; }
    .ait-card{ max-width:520px; }

    /* Features go two-up so the panel stays compact but keeps its value. */
    .ait-features{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        max-width:620px;
        margin-inline:auto;
        text-align:start;
    }
    .ait-trust{ justify-content:center; max-width:620px; margin-inline:auto; }
    .ait-decor__shield,
    .ait-decor__dots{ display:none; }
}

/* Large phone / small tablet */
@media (max-width:767.98px){
    .ait-auth__grid{ gap:26px; }
    .ait-brand__title{ font-size:clamp(27px,7vw,34px); }
    .ait-brand__lead{
        margin-block-end:22px;
        font-size:14.75px;
    }
    .ait-features{ grid-template-columns:1fr; max-width:440px; }
    /* Keep one feature so the panel still says something; hide the rest. */
    .ait-features .ait-feature:nth-child(n+2){ display:none; }
    .ait-trust{
        margin-block-start:20px;
        padding-block-start:18px;
        gap:8px 14px;
        font-size:12.25px;
    }
}

/* Phone */
@media (max-width:575.98px){
    .ait-auth{ padding-block:20px; }
    .ait-auth__grid{ gap:22px; }
    .ait-brand__badge{
        margin-block-end:16px;
        padding:7px 13px;
        font-size:12.25px;
    }
    .ait-brand__title{ margin-block-end:12px; }
    .ait-brand__lead{ margin-block-end:18px; }
    .ait-features{ display:none; }
    .ait-trust{ margin-block-start:0; padding-block-start:0; border:0; }

    .ait-card{
        padding:24px 19px;
        border-radius:20px;
        box-shadow:0 18px 44px -22px rgba(15,23,42,.22);
    }
    .ait-card__icon{ width:52px; height:52px; border-radius:16px; }
    .ait-card__icon svg{ width:24px; height:24px; }
    .ait-card__title{ font-size:20.5px; }
    .ait-card__subtitle{ font-size:13.5px; }
    .ait-input{ min-height:50px; }
    .ait-input input{ height:46px; font-size:16px; } /* 16px = no iOS zoom on focus */
    .ait-auth .ait-btn{ min-height:51px; font-size:15px; }
    .ait-auth .ait-social__btn{ min-height:49px; font-size:14px; }
    .ait-row-between{ margin-block-end:18px; }
    .ait-decor__orb--3{ display:none; }
}

@media (max-width:379.98px){
    .ait-card{ padding:20px 15px; }
    .ait-brand__title{ font-size:25px; }
    .ait-auth .ait-social__btn{ gap:8px; font-size:13.25px; }
}

/* Coarse pointers never hover — retire the lift so taps don't leave a stuck
   transform, and give the hit targets a little more room. */
@media (hover:none){
    .ait-auth .ait-btn:hover,
    .ait-auth .ait-social__btn:hover,
    .ait-feature:hover,
    .ait-brand__badge:hover{ transform:none; }
    .ait-auth .ait-btn:hover::before{ transform:translateX(-125%); }
    .ait-auth .ait-btn:active{ filter:brightness(.96); }
    .ait-auth .ait-social__btn:active{ background:var(--ait-field); }
}

/* ── 12. Dark twins ──────────────────────────────────────────────────────── */
body.theme-dark .page-content:has(.ait-auth){
    background:
        radial-gradient(58% 52% at 84% 8%,  rgba(54,128,237,.24), transparent 62%),
        radial-gradient(46% 46% at 6% 92%,  rgba(96,164,245,.14), transparent 62%),
        radial-gradient(38% 40% at 50% 55%, rgba(112,72,232,.10), transparent 70%),
        linear-gradient(180deg,#0F0F11 0%,#0A0A0C 100%);
}
body.theme-dark .ait-auth{
    background:linear-gradient(180deg,#0F0F11 0%,#0A0A0C 100%);

    --ait-field:var(--aits-surface-3,#1C1C1F);
    --ait-faint:#7B7B82;
    --ait-ring:0 0 0 4px rgba(96,164,245,.26);
    --ait-ring-bad:0 0 0 4px rgba(224,49,49,.24);
    --ait-glow:rgba(54,128,237,.20);
    --ait-sheen:rgba(255,255,255,.20);

    /* Dark ink twins — the light-mode values are unreadable on #17171A. */
    --ait-ok-ink:#6BE3B8;   --ait-ok-soft:rgba(12,166,120,.14);  --ait-ok-line:rgba(107,227,184,.26);
    --ait-bad-ink:#FF8A8A;  --ait-bad-soft:rgba(224,49,49,.14);  --ait-bad-line:rgba(255,138,138,.26);

    --ait-shadow:0 28px 68px -26px rgba(0,0,0,.72);
    --ait-shadow-sm:0 8px 24px rgba(0,0,0,.5);
    --ait-shadow-brand:0 16px 32px -16px rgba(0,0,0,.7);
}
@supports selector(:has(*)){
    body.theme-dark .ait-auth{ background:transparent; }
}

/* The deep tone is unreadable on a dark surface — links flip to the light
   brand blue (trap 3 of the kit contract). */
body.theme-dark .ait-auth .ait-link:hover,
body.theme-dark .ait-auth .ait-card__foot a:hover,
body.theme-dark .ait-auth .ait-note__text a:hover,
body.theme-dark .ait-auth .ait-trust__link:hover{ color:#8FC0F8; }
body.theme-dark .ait-auth .ait-link,
body.theme-dark .ait-auth .ait-card__foot a,
body.theme-dark .ait-auth .ait-note__text a,
body.theme-dark .ait-auth .ait-trust__link{ color:var(--ait-primary-light); }

body.theme-dark .ait-brand__badge{
    background:var(--aits-card,#17171A);
    color:var(--ait-primary-light);
}
body.theme-dark .ait-brand__badge::before{
    background:linear-gradient(115deg,transparent 26%,rgba(96,164,245,.16) 50%,transparent 74%);
}
body.theme-dark .ait-brand__badge:hover{ box-shadow:0 12px 26px -12px rgba(0,0,0,.7); }

body.theme-dark .ait-feature__icon{ color:var(--ait-primary-light); }
body.theme-dark .ait-feature:hover .ait-feature__icon{ color:#fff; }

body.theme-dark .ait-card:hover{ box-shadow:0 34px 78px -28px rgba(0,0,0,.8); }
body.theme-dark .ait-card__icon{ box-shadow:0 14px 28px -10px rgba(0,0,0,.65); }

body.theme-dark .ait-input:focus-within{ background:var(--aits-surface-2,#18181B); }
body.theme-dark .ait-input input:-webkit-autofill{
    -webkit-text-fill-color:var(--ait-ink);
    -webkit-box-shadow:0 0 0 1000px var(--aits-surface-3,#1C1C1F) inset;
}
body.theme-dark .ait-input__toggle:hover{ color:var(--ait-primary-light); }

body.theme-dark .ait-rule__tick{ background:rgba(255,255,255,.11); }
body.theme-dark .ait-rule[data-ok="1"] .ait-rule__tick{ color:#0F0F11; }

body.theme-dark .ait-check input{ background:var(--aits-surface-3,#1C1C1F); }
body.theme-dark .ait-check input:hover{ border-color:var(--ait-primary-light); }

body.theme-dark .ait-auth .ait-btn:hover{ box-shadow:0 22px 40px -16px rgba(0,0,0,.78); }

/* GitHub's #181717 mark and Apple's #000 mark are invisible on the dark card. */
body.theme-dark .ait-auth .ait-social__btn svg [fill="#181717"],
body.theme-dark .ait-auth .ait-social__btn svg [fill="#000000"],
body.theme-dark .ait-auth .ait-social__btn svg [fill="#000"]{ fill:var(--ait-ink); }
body.theme-dark .ait-auth .ait-social__btn{ background:var(--aits-card,#17171A); }
body.theme-dark .ait-auth .ait-social__btn:hover{ box-shadow:0 14px 26px -14px rgba(0,0,0,.8); }
body.theme-dark .ait-auth .ait-social__btn.is-github{ --ait-brand-wash:rgba(255,255,255,.07); --ait-brand-line:rgba(255,255,255,.30); }
body.theme-dark .ait-auth .ait-social__btn.is-apple { --ait-brand-wash:rgba(255,255,255,.06); --ait-brand-line:rgba(255,255,255,.26); }

body.theme-dark .ait-note:hover{ border-color:var(--ait-line-brand); }
body.theme-dark .ait-note__icon{ color:var(--ait-primary-light); }
body.theme-dark .ait-trust__item svg{ color:#6BE3B8; }

body.theme-dark .ait-decor__dots{ color:rgba(255,255,255,.10); }
body.theme-dark .ait-decor__grid{
    opacity:.30;
    background-image:
        linear-gradient(to right,  rgba(255,255,255,.05) 1px,transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.05) 1px,transparent 1px);
}
body.theme-dark .ait-decor__orb--1{ background:radial-gradient(circle,rgba(54,128,237,.40),transparent 70%); }
body.theme-dark .ait-decor__orb--2{ background:radial-gradient(circle,rgba(96,164,245,.22),transparent 70%); }

/* Shield art: the hardcoded white orbiting nodes and pale #CFE0FA rings read as
   loud specular blobs against #0F0F11. The padlock body and shackle stay white
   on purpose — they need contrast against the blue shield gradient. */
body.theme-dark .ait-decor__shield circle[fill='#fff']{
    fill:var(--aits-card,#17171A);
    stroke:rgba(96,164,245,.28);
}
body.theme-dark .ait-decor__shield [stroke='#CFE0FA']{ stroke:rgba(96,164,245,.20); }

@media (max-width:575.98px){
    body.theme-dark .ait-card{ box-shadow:0 18px 44px -22px rgba(0,0,0,.75); }
}

/* ── 13. Motion preferences ──────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
    .ait-decor__orb,
    .ait-decor__shield,
    .ait-card__icon::before{ animation:none; }
    .ait-brand,
    .ait-card{ animation:none; opacity:1; transform:none; }
    .ait-auth *,
    .ait-auth *::before,
    .ait-auth *::after{
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
    }
    .ait-auth .ait-btn:hover,
    .ait-auth .ait-social__btn:hover,
    .ait-feature:hover,
    .ait-brand__badge:hover{ transform:none; }
}

/* ── 14. Print ───────────────────────────────────────────────────────────── */
@media print{
    .ait-decor{ display:none; }
    .ait-card{ box-shadow:none; border-color:#DADADA; }
}