/* ==========================================================================
   Location: assets/css/auth.css
   CampusGlows — shared Authentication design system
   Used by BOTH index.php (school/org code entry) and login.php
   (username/password + 2FA). Split-card layout: branding panel (left)
   + form panel (right), joined by a large soft curved boundary.

   This file previously existed as two near-identical <style> blocks,
   one inline in each page. It is now the single source of truth for
   the shared auth shell — index.php and login.php each keep only the
   handful of rules that are genuinely page-specific (see the note at
   the bottom of each page's own <style> block, if any).

   TABLE OF CONTENTS
   -----------------------------------------------------------------------
     1.  Variables / foundation
     2.  Page shell
     3.  Authentication card
     4.  Branding panel
     5.  Decorative elements
     6.  Authentication panel
     7.  School switcher
     8.  School identity
     9.  Form controls
    10.  Buttons
    11.  Secondary actions (forgot password, passkey)
    12.  Social media
    13.  Footer
    14.  Dark mode
    15.  Responsive
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES / FOUNDATION
   ========================================================================== */

:root{
    --paper:#F6F4EC;
    --paper-2:#EFEBDD;
    --card-bg:#FFFFFF;
    --card-border:#E9E6DA;
    --card-shadow:0 30px 70px -24px rgba(20,30,24,.28);

    --ink:#16241C;
    --ink-dim:#4C5A52;
    --ink-faint:#7C8A81;

    --green:#1F6D4A;
    --green-dark:#153F2B;
    --green-soft:rgba(31,109,74,.10);
    --green-ring:rgba(31,109,74,.20);

    --left-1:#E7F1EA;
    --left-2:#D7E9DE;
    --leaf-1:rgba(31,109,74,.14);
    --leaf-2:rgba(31,109,74,.09);

    --border:#E7E4D8;
    --input-bg:#FBFAF6;
    --placeholder:#9AA69E;

    --alert-text:#A5301F;
    --alert-bg:#FBE8E4;
    --alert-border:#EFC2B7;
    --notice-text:#16241C;
    --notice-bg:#F3F1E6;
    --notice-border:var(--border);

    --toggle-track:#153F2B;
    --toggle-knob:#FFFFFF;
    --autofill-bg:#F3F1E6;

    --radius-input:11px;
    --radius-btn:11px;
}
[data-theme="dark"]{
    --paper:#0D1310;
    --paper-2:#080B09;
    --card-bg:#121815;
    --card-border:rgba(90,150,120,.20);
    --card-shadow:0 30px 70px -24px rgba(0,0,0,.65);

    --ink:#EDF2EE;
    --ink-dim:#B6C2BB;
    --ink-faint:#84948C;

    --green:#4CAF7D;
    --green-dark:#7BC79E;
    --green-soft:rgba(76,175,125,.14);
    --green-ring:rgba(76,175,125,.24);

    --left-1:#152019;
    --left-2:#0E1712;
    --leaf-1:rgba(76,175,125,.14);
    --leaf-2:rgba(76,175,125,.08);

    --border:rgba(255,255,255,.08);
    --input-bg:rgba(255,255,255,.04);
    --placeholder:rgba(237,242,238,.36);

    --alert-text:#F3B6A8;
    --alert-bg:rgba(165,48,31,.16);
    --alert-border:rgba(165,48,31,.38);
    --notice-text:#EDF2EE;
    --notice-bg:rgba(255,255,255,.04);
    --notice-border:var(--border);

    --toggle-track:#4CAF7D;
    --toggle-knob:#0D1310;
    --autofill-bg:#182019;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ overflow-x:hidden; }

/* Reset native form-control chrome. Without this, browsers draw their
   own border/background/padding around plain <button> elements — most
   visible on the small icon-only buttons (password show/hide, clear
   username) once the input's autofill background makes the mismatched
   box outline obvious. */
button{
    font:inherit;
    color:inherit;
    background:none;
    border:0;
    margin:0;
    padding:0;
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
input,select,textarea{ font:inherit; color:inherit; }
a{ -webkit-tap-highlight-color:transparent; }


/* ==========================================================================
   2. PAGE SHELL
   ========================================================================== */

body.auth-page{
    margin:0;
    min-height:100vh;
    font-family:'Inter','Segoe UI',Arial,Helvetica,sans-serif;
    background:var(--card-bg);
    color:var(--ink-dim);
    transition:background .3s ease,color .3s ease;
}
.auth-page ::selection{ background:var(--green-soft); color:var(--green-dark); }

/* -- theme toggle -- */
.theme-toggle{
    position:fixed;
    top:22px;
    right:26px;
    z-index:5;
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--card-bg);
    border:1px solid var(--card-border);
    padding:7px 14px 7px 7px;
    border-radius:999px;
    box-shadow:0 10px 24px -12px rgba(20,30,24,.22);
    font-size:13px;
    color:var(--ink);
    font-weight:600;
    user-select:none;
}
.switch{
    position:relative;
    width:40px;
    height:22px;
    border-radius:20px;
    background:var(--toggle-track);
    cursor:pointer;
    transition:background .3s ease;
    flex:none;
}
.switch .knob{
    position:absolute;
    top:2px; left:2px;
    width:18px; height:18px;
    border-radius:50%;
    background:var(--toggle-knob);
    transition:left .3s ease;
    box-shadow:0 1px 3px rgba(0,0,0,.3);
}
[data-theme="dark"] .switch .knob{ left:20px; }


/* ==========================================================================
   3. AUTHENTICATION CARD (shell)
   ========================================================================== */

.auth-card{
    position:relative;
    display:flex;
    min-height:100vh;
    background:var(--card-bg);
    overflow:hidden;
}


/* ==========================================================================
   4. BRANDING PANEL (left)
   ========================================================================== */

.auth-left{
    position:relative;
    z-index:1;
    flex:0 0 42%;
    display:flex;
    flex-direction:column;
    padding:56px 64px 48px;
    background:linear-gradient(165deg,var(--left-1),var(--left-2));
    overflow:hidden;
}

/* -- login.php variant: ALL of the school's uploaded background
   photos, cross-fading through a stacked set of layers (pure CSS —
   the exact fade timing/keyframe percentages depend on how many
   images the school has, so those are generated once, per request,
   into the small inline <style> block login.php prints in <head>;
   everything else — the layer positioning, the colour-tint scrim
   that keeps any photo feeling on-brand, the text treatment — lives
   here so it isn't duplicated per page load). -- */
.auth-left.has-bg{ background:var(--left-2); }

.left-bg-stack{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.left-bg-slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    opacity:0;
    animation-name:cg-bg-crossfade;
    animation-duration:var(--bg-total, 6s);
    animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;
}
.left-bg-slide.is-static{ opacity:1; animation:none; }

/* Colour-fade tint: a green→black duotone laid over every photo so a
   school's own image — whatever its palette — still reads as part of
   the CampusGlows system rather than a raw, disconnected photo. Built
   from the live theme tokens (color-mix) so it shifts with dark mode
   the same way the rest of the shell does. Slightly lighter through
   the middle so the photo itself still shows through. */
.auth-left.has-bg::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(185deg,
        color-mix(in srgb, var(--green-dark) 78%, black) 0%,
        color-mix(in srgb, var(--green) 46%, transparent) 42%,
        color-mix(in srgb, var(--green-dark) 90%, black) 100%);
    pointer-events:none;
}
.auth-left.has-bg .brand-row,
.auth-left.has-bg .left-tagline{ position:relative; z-index:2; }
.auth-left.has-bg .brand-name,
.auth-left.has-bg .brand-name b,
.auth-left.has-bg .left-tagline h1{ color:#F5F7F2; }
.auth-left.has-bg .brand-sub,
.auth-left.has-bg .left-tagline p{ color:rgba(245,247,242,.78); }
.auth-left.has-bg .brand-sub span{ color:rgba(245,247,242,.55); }
.auth-left.has-bg .left-tagline{ margin-top:auto; }
.auth-left.has-bg .leaf{ display:none; }

@media (prefers-reduced-motion:reduce){
    .left-bg-slide{ animation:none; opacity:0; }
    .left-bg-slide:first-child{ opacity:1; }
}

.brand-row{
    display:flex;
    align-items:center;
    gap:12px;
    position:relative;
    z-index:2;
}
.brand-row img{
    width:38px;
    height:38px;
    object-fit:contain;
    flex:none;
}
.brand-name{
    font-size:19px;
    font-weight:700;
    letter-spacing:-.01em;
    color:var(--ink);
    line-height:1.1;
}
.brand-name b{ font-weight:800; color:var(--green); }
.brand-sub{
    margin:2px 0 0;
    font-size:11.5px;
    font-weight:600;
    color:var(--ink-dim);
    line-height:1.4;
}
.brand-sub span{ display:block; font-size:10.5px; font-weight:500; color:var(--ink-faint); }

/* -- product mockup collage: a couple of small floating UI cards that
   hint at the ERP product itself (attendance, fees), built from plain
   CSS shapes — no images, no icon libraries. Kept intentionally to
   two cards for breathing room; see each page's own comment if a
   third, purely-decorative card was ever reintroduced. -- */
.mock-stack{
    position:relative;
    z-index:2;
    flex:1 1 auto;
    min-height:200px;
    margin:40px 0 8px;
}
.mock-card{
    position:absolute;
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:14px;
    box-shadow:0 20px 40px -18px rgba(15,30,22,.35);
    padding:14px;
}
.mock-card-a{ top:8%; left:2%; width:240px; z-index:2; transform:rotate(-3deg); }
.mock-card-b{ top:2%; right:6%; width:126px; z-index:3; transform:rotate(6deg); padding:14px 12px; text-align:center; }

.mock-head{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.mock-dot{ width:9px; height:9px; border-radius:50%; background:var(--green); flex:none; }
.mock-line{ display:block; height:7px; border-radius:4px; background:var(--border); }
.mock-line.w-60{ width:60%; }
.mock-line.w-70{ width:70%; }
.mock-line.w-50{ width:50%; }
.mock-pill{
    margin-left:auto;
    font-size:9px;
    font-weight:700;
    letter-spacing:.03em;
    color:var(--green-dark);
    background:var(--green-soft);
    padding:2px 7px;
    border-radius:999px;
    flex:none;
}
.mock-bars{
    display:flex;
    align-items:flex-end;
    gap:7px;
    height:56px;
    margin-bottom:10px;
}
.mock-bars span{
    flex:1 1 0;
    border-radius:4px 4px 1px 1px;
    background:linear-gradient(180deg,var(--green),var(--green-dark));
    opacity:.85;
}
.mock-caption{ font-size:10.5px; font-weight:600; color:var(--ink-faint); }

.mock-ring{
    position:relative;
    width:62px; height:62px;
    margin:2px auto 10px;
    border-radius:50%;
    background:conic-gradient(var(--green) 0 82%, var(--border) 0);
    display:flex; align-items:center; justify-content:center;
}
.mock-ring::before{
    content:"";
    position:absolute;
    width:44px; height:44px;
    border-radius:50%;
    background:var(--card-bg);
}
.mock-ring span{
    position:relative;
    z-index:1;
    font-size:11px;
    font-weight:800;
    color:var(--ink);
}

.left-tagline{
    position:relative;
    z-index:2;
    margin-top:8px;
}
.left-tagline h1{
    margin:0 0 14px;
    font-size:clamp(24px,2.6vw,30px);
    font-weight:700;
    letter-spacing:-.015em;
    line-height:1.22;
    color:var(--ink);
    max-width:340px;
}
.left-tagline p{
    margin:0;
    max-width:280px;
    font-size:13.5px;
    line-height:1.6;
    color:var(--ink-dim);
}


/* ==========================================================================
   5. DECORATIVE ELEMENTS
   ========================================================================== */

.leaf{
    position:absolute;
    border-radius:44% 56% 62% 38% / 50% 42% 58% 50%;
    z-index:1;
    pointer-events:none;
}
.leaf-1{
    width:300px; height:300px;
    left:-100px; bottom:-140px;
    background:var(--leaf-1);
    transform:rotate(-12deg);
}
.leaf-2{
    width:190px; height:190px;
    left:30px; bottom:-110px;
    background:var(--leaf-2);
    transform:rotate(18deg);
}


/* ==========================================================================
   6. AUTHENTICATION PANEL (right)
   ========================================================================== */

.auth-right{
    position:relative;
    z-index:2;
    flex:1 1 60%;
    display:flex;
    align-items:center;
    background:var(--card-bg);
    padding:44px 56px 90px;
}
/* extra breathing room on the right only when the social rail is
   actually rendered — a school with no social links on file keeps
   the plain, centred layout instead of dead reserved space */
.auth-right.has-social-rail{ padding-right:96px; }
/* the big soft curve that bites into the left panel */
.auth-right::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:50%;
    left:-120px;
    width:240px;
    height:150%;
    transform:translateY(-50%);
    background:var(--card-bg);
    border-radius:50%;
}
/* faint environmental accent toward the right edge — a CSS hint of a
   place/campus, never a literal image, kept well behind the form and
   behind the social rail */
.auth-right::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        radial-gradient(420px 320px at 108% 18%, var(--green-soft), transparent 70%),
        radial-gradient(360px 300px at 112% 92%, rgba(120,150,190,.12), transparent 70%);
    opacity:.9;
    pointer-events:none;
}

.right-inner{ width:100%; max-width:380px; margin:0 auto; }

.right-inner h2{
    margin:0 0 6px;
    font-size:23px;
    font-weight:700;
    letter-spacing:-.01em;
    color:var(--ink);
}
.right-inner .lede{
    margin:0 0 20px;
    font-size:13.5px;
    color:var(--ink-faint);
}


/* ==========================================================================
   7. SCHOOL / ORGANIZATION SWITCHER
   ========================================================================== */

/* Deliberately quiet — a context-switcher affordance, not a call to
   action. No background chrome at rest; the pill only appears on
   hover/focus so it reads as a small utility control next to the
   heading, not competing with "Welcome Back" or the identity card. */
.change-school-form{ margin:0 0 14px; }
.back-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:transparent;
    border:1px solid transparent;
    color:var(--ink-faint);
    font-size:11.5px;
    font-weight:600;
    padding:5px 9px 5px 7px;
    border-radius:999px;
    cursor:pointer;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.back-pill:hover{ background:var(--green-soft); color:var(--green-dark); border-color:var(--green-ring); }
.back-pill:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
.back-pill svg{ flex:none; width:12px; height:12px; }
.back-pill-chevron{ opacity:.5; }


/* ==========================================================================
   8. SCHOOL IDENTITY
   ========================================================================== */

.identity-chip{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--paper-2);
    border:1px solid var(--border);
    border-radius:12px;
    padding:9px 11px;
    margin:0 0 22px;
}
.identity-logo{
    width:32px;
    height:32px;
    border-radius:8px;
    object-fit:cover;
    flex:none;
    background:var(--card-bg);
    box-shadow:0 0 0 1px var(--border);
}
.identity-logo-fallback{
    width:32px;
    height:32px;
    border-radius:8px;
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--green-soft);
    color:var(--green-dark);
    font-weight:800;
    font-size:13px;
}
.identity-text{ min-width:0; }
.identity-name{
    font-size:13.5px;
    font-weight:700;
    color:var(--ink);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.identity-tagline{
    margin:1px 0 0;
    font-size:11.5px;
    color:var(--ink-faint);
    font-style:italic;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


/* ==========================================================================
   9. FORM CONTROLS
   ========================================================================== */

label.field-label{
    display:block;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:0;
    color:var(--ink-dim);
    margin-bottom:7px;
    text-transform:none;
}
.field{ margin-bottom:16px; }

.input-group{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--input-bg);
    border:1.5px solid var(--border);
    border-radius:var(--radius-input);
    padding:12px 13px;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.input-group:focus-within{
    border-color:var(--green);
    box-shadow:0 0 0 4px var(--green-ring);
}
.input-group svg{ flex-shrink:0; color:var(--green); }
.input-group input{
    border:none;
    outline:none;
    background:transparent;
    width:100%;
    font-size:14px;
    font-family:inherit;
    color:var(--ink);
}
.input-group input::placeholder{ color:var(--placeholder); }
.input-group input:-webkit-autofill,
.input-group input:-webkit-autofill:hover,
.input-group input:-webkit-autofill:focus,
.input-group input:-webkit-autofill:active{
    -webkit-text-fill-color:var(--ink);
    caret-color:var(--ink);
    transition:background-color 9999s ease-in-out 0s;
    box-shadow:0 0 0 1000px var(--autofill-bg) inset;
}

/* -- clear (x) button inside the username field -- */
.input-clear{
    display:none;
    flex:none;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    border-radius:50%;
    color:var(--ink-faint);
    transition:color .15s ease, background .15s ease;
}
.input-clear.visible{ display:flex; }
.input-clear:hover{ color:var(--ink); background:var(--border); }

/* -- password show/hide toggle inside the password field -- */
.pw-toggle{
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    color:var(--ink-faint);
    transition:color .15s ease;
}
.pw-toggle:hover{ color:var(--green); }
.pw-toggle .icon-hide{ display:none; }
.pw-toggle.is-visible .icon-show{ display:none; }
.pw-toggle.is-visible .icon-hide{ display:block; }

.field-inline-end{ text-align:right; margin:-6px 0 18px; }
.field-inline-end .link{ font-size:12px; font-weight:600; color:var(--ink-faint); text-decoration:none; }
.field-inline-end .link:hover{ color:var(--green); text-decoration:underline; }

.alert{
    color:var(--alert-text);
    background:var(--alert-bg);
    border:1px solid var(--alert-border);
    padding:10px 13px;
    border-radius:9px;
    font-size:13px;
    font-weight:600;
    margin-bottom:18px;
}
.notice{
    color:var(--notice-text);
    background:var(--notice-bg);
    border:1px solid var(--notice-border);
    padding:10px 13px;
    border-radius:9px;
    font-size:13px;
    margin-bottom:18px;
}


/* ==========================================================================
   10. BUTTONS
   ========================================================================== */

.btn-primary{
    width:100%;
    margin-top:18px;
    background:var(--green);
    color:#FFFFFF;
    border:none;
    border-radius:var(--radius-btn);
    padding:13px;
    font-size:14.5px;
    font-weight:700;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition:background .2s ease, transform .1s ease, opacity .2s ease;
}
.btn-primary:hover{ background:var(--green-dark); }
.btn-primary:active{ transform:translateY(1px); }
.btn-primary:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
.btn-primary:disabled,
.btn-primary.is-loading{ opacity:.7; cursor:not-allowed; }

.field .btn-primary{ margin-top:6px; }


/* ==========================================================================
   11. SECONDARY ACTIONS (forgot password, passkey)
   ========================================================================== */

.btn-passkey{
    width:100%;
    display:none;
    align-items:center;
    justify-content:space-between;
    background:var(--card-bg);
    border:1.5px solid var(--border);
    border-radius:var(--radius-btn);
    padding:12px 14px;
    font-size:14px;
    font-weight:700;
    color:var(--ink);
    cursor:pointer;
    margin:4px 0 0;
    transition:border-color .2s ease, background .2s ease;
}
.btn-passkey:hover{ border-color:var(--green); background:var(--green-soft); }
.btn-passkey:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
.btn-passkey-label{ display:flex; align-items:center; gap:9px; }
.btn-passkey-arrow{ opacity:.5; }
.divider-or{
    display:flex;
    align-items:center;
    gap:10px;
    margin:16px 0;
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    color:var(--ink-faint);
}
.divider-or::before,
.divider-or::after{ content:""; flex:1 1 auto; height:1px; background:var(--border); }

.help-line{
    margin-top:16px;
    text-align:center;
    font-size:12.5px;
    color:var(--ink-faint);
}
.help-line a{ color:var(--green); font-weight:600; text-decoration:none; }
.help-line a:hover{ text-decoration:underline; }


/* ==========================================================================
   12. SOCIAL MEDIA (vertical rail — login.php only, present only when
   a school has at least one social URL on file)
   ========================================================================== */

.social-rail{
    position:absolute;
    top:50%;
    right:34px;
    transform:translateY(-50%);
    z-index:3;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}
.social-rail::before{
    content:"";
    width:1px;
    height:26px;
    background:var(--border);
    margin-bottom:2px;
}
.social-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--card-bg);
    border:1px solid var(--border);
    color:var(--ink-faint);
    box-shadow:0 6px 16px -10px rgba(20,30,24,.3);
    transition:color .2s ease, border-color .2s ease, background .2s ease, transform .15s ease;
}
.social-icon svg{ width:14px; height:14px; }
.social-icon:hover{ color:var(--green-dark); border-color:var(--green-ring); background:var(--green-soft); transform:translateY(-1px); }
.social-icon:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }


/* ==========================================================================
   13. FOOTER
   ========================================================================== */

footer.site-footer{
    position:absolute;
    left:0;
    right:0;
    bottom:22px;
    z-index:2;
    text-align:center;
    font-size:11.5px;
    color:var(--ink-faint);
    opacity:.85;
}
footer.site-footer a{ color:var(--ink-faint); text-decoration:none; }
footer.site-footer a:hover{ text-decoration:underline; }
footer.site-footer .links{ margin-bottom:4px; }


/* ==========================================================================
   14. DARK MODE
   ========================================================================== */
/* Handled entirely via the [data-theme="dark"] variable overrides in
   §1 — every component above reads from those tokens, so no
   component-level dark-mode overrides are needed here. */


/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */

@media (max-width:1080px){
    .social-rail{ right:20px; }
    .auth-right.has-social-rail{ padding-right:78px; }
}

@media (max-width:860px){
    .auth-card{ flex-direction:column; min-height:100vh; }
    .auth-left{
        flex:none;
        padding:84px 28px 56px;
    }
    .mock-stack{ display:none; }
    .left-tagline p{ max-width:none; }
    .auth-right::before{ display:none; }
    .auth-right::after{ opacity:.5; }
    .auth-right,
    .auth-right.has-social-rail{ padding:34px 28px 84px; flex-direction:column; }
    .right-inner{ max-width:none; }
    footer.site-footer{ bottom:20px; }
    .leaf-1{ width:190px; height:190px; left:-70px; bottom:-90px; }
    .leaf-2{ width:130px; height:130px; left:10px; bottom:-70px; }
    .theme-toggle{ top:14px; right:14px; }

    /* social icons: compact horizontal row placed AFTER the form
       (order:2) instead of a column eating into a narrow single
       column layout — the login form always stays the priority */
    .right-inner{ order:1; }
    .social-rail{
        order:2;
        position:static;
        transform:none;
        flex-direction:row;
        justify-content:center;
        margin:28px 0 0;
    }
    .social-rail::before{ width:26px; height:1px; margin:0 2px 0 0; }
}
@media (max-width:420px){
    .theme-toggle{ padding:6px 11px 6px 6px; font-size:12px; }
    .switch{ width:36px; height:20px; }
    .switch .knob{ width:16px; height:16px; }
    [data-theme="dark"] .switch .knob{ left:18px; }
}


/* ==========================================================================
   16. FORGOT PASSWORD — TOTP CODE INPUT (.auth-forgot-*)
   Page-specific to forgot_password.php's Step 2. Every other field on
   that page (username, identifier, new password, confirm password)
   reuses the shared .field / .input-group system above unchanged —
   this is the one exception: a single, large, centred, spaced-out
   digit field with no left icon, matching the visual weight of a
   one-time code entry rather than a normal text input.
   ========================================================================== */
.auth-forgot-otp{
    width:100%;
    box-sizing:border-box;
    padding:14px 13px;
    border-radius:var(--radius-input);
    border:1.5px solid var(--border);
    background:var(--input-bg);
    color:var(--ink);
    font-size:26px;
    font-weight:700;
    letter-spacing:10px;
    text-align:center;
    font-variant-numeric:tabular-nums;
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease, background .2s ease;
}
.auth-forgot-otp::placeholder{ letter-spacing:10px; color:var(--placeholder); font-weight:400; }
.auth-forgot-otp:focus{
    border-color:var(--green);
    box-shadow:0 0 0 4px var(--green-ring);
}
.auth-forgot-otp:-webkit-autofill{
    -webkit-text-fill-color:var(--ink);
    caret-color:var(--ink);
    transition:background-color 9999s ease-in-out 0s;
    box-shadow:0 0 0 1000px var(--autofill-bg) inset;
}

/* Step-2 "no code linked" fallback and the identity chip's tagline
   both render as plain paragraphs using the shared lede/help-line
   type scale already defined above — no new rules needed for those. */


/* ==========================================================================
   17. TOAST NOTIFICATIONS (.auth-toast-*)
   A floating, auto-dismissing confirmation used after a redirect back
   into this auth shell — e.g. login.php?reset=success once
   forgot_password.php's Step 3 finishes. Distinct from .notice/.alert
   above, which render inline inside the card: this floats above
   everything, top-right, and clears itself after a few seconds.
   ========================================================================== */
.auth-toast-stack{
    position:fixed;
    top:22px;
    right:26px;
    z-index:80;
    display:flex;
    flex-direction:column;
    gap:10px;
    max-width:360px;
    pointer-events:none;
}
.auth-toast{
    display:flex;
    align-items:flex-start;
    gap:12px;
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:12px;
    box-shadow:var(--card-shadow);
    padding:14px 15px;
    opacity:0;
    transform:translateX(16px);
    transition:opacity .22s ease, transform .22s ease;
    pointer-events:auto;
}
.auth-toast.show{ opacity:1; transform:translateX(0); }
.auth-toast-icon{
    flex:none;
    width:28px; height:28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--green);
    color:#FFFFFF;
}
.auth-toast-body{ flex:1 1 auto; min-width:0; }
.auth-toast-title{ margin:0; font-size:13.5px; font-weight:700; color:var(--ink); }
.auth-toast-message{ margin:2px 0 0; font-size:12.5px; color:var(--ink-dim); line-height:1.5; }
.auth-toast-close{
    flex:none;
    width:22px; height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ink-faint);
    border-radius:6px;
    transition:background .15s ease, color .15s ease;
}
.auth-toast-close:hover{ background:var(--green-soft); color:var(--green-dark); }

@media (max-width:420px){
    .auth-toast-stack{ left:14px; right:14px; top:14px; max-width:none; }
}