/* ============================================================================
   Sign-in surface — ported from MayonFlow's auth/login.blade.php.
   Shared by sign-in, the TOTP challenge, and TOTP enrolment.
   See DESIGN-TOKENS.md for provenance.
   ============================================================================ */

/* Page never scrolls sideways; the background overhang is clipped, not scrolled. */
html,body{overflow-x:hidden;}
body{background:var(--void);}

/* Fixed, clipped background layer. Everything decorative lives in here so its
   overhang can never create scrollable area. */
.lg-bg{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none;background:var(--void);}

/* Content layer. min-height rather than a fixed inset, so a tall card (TOTP
   enrolment, with its QR) scrolls the page normally while the background
   stays put. */
.lg{position:relative;z-index:1;min-height:100vh;min-height:100dvh;
    display:grid;place-items:center;padding:24px;}

.lg-aurora{position:absolute;inset:-25%;filter:blur(80px);opacity:.5;pointer-events:none;}
html[data-theme="dark"] .lg-aurora{opacity:.62;}
.lg-aurora i{position:absolute;display:block;border-radius:50%;}
html[data-theme="dark"] .lg-aurora i{mix-blend-mode:screen;}
.lg-aurora i:nth-child(1){width:48vw;height:48vw;inset-inline-start:-8vw;top:-14vh;
    background:radial-gradient(circle,var(--brand-500),transparent 68%);animation:lgD1 30s ease-in-out infinite alternate;}
.lg-aurora i:nth-child(2){width:42vw;height:42vw;inset-inline-end:-10vw;top:8vh;
    background:radial-gradient(circle,var(--brand-300),transparent 66%);animation:lgD2 38s ease-in-out infinite alternate;}
.lg-aurora i:nth-child(3){width:56vw;height:56vw;inset-inline-start:18vw;bottom:-34vh;
    background:radial-gradient(circle,var(--brand-700),transparent 70%);animation:lgD3 44s ease-in-out infinite alternate;}
@keyframes lgD1{to{transform:translate3d(10vw,8vh,0) scale(1.2);}}
@keyframes lgD2{to{transform:translate3d(-12vw,11vh,0) scale(.84);}}
@keyframes lgD3{to{transform:translate3d(7vw,-10vh,0) scale(1.14);}}

/* Mesh above the aurora, below the card; dimmed in light mode so the green
   threads don't compete with dark text. */
.lg-web{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;
    opacity:0;transition:opacity 1.4s ease;}
.lg-web.on{opacity:.9;}
html:not([data-theme="dark"]) .lg-web.on{opacity:.85;}

.lg-lang{position:fixed;top:22px;inset-inline-end:26px;z-index:5;padding:7px 15px;border-radius:99px;
    background:var(--sheet);border:1px solid var(--edge);color:var(--ink-2);font-weight:800;font-size:.75rem;
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:.26s var(--swift);}
.lg-lang:hover{border-color:var(--edge-2);color:var(--ink);}

.lg-card{position:relative;z-index:2;width:min(410px,100%);padding:38px 36px 30px;text-align:center;
    max-width:100%;
    border-radius:var(--r-xl);background:var(--sheet);border:1px solid var(--edge);box-shadow:var(--glow);
    backdrop-filter:blur(34px) saturate(160%);-webkit-backdrop-filter:blur(34px) saturate(160%);
    animation:lgIn .7s var(--spring);margin:auto;}
@keyframes lgIn{from{opacity:0;transform:translateY(20px) scale(.97);}to{opacity:1;transform:none;}}

/* Logo on a white plate: its mark is translucent green and dissolves into the
   gradient without one. */
.lg-mark{width:76px;height:76px;margin:0 auto 18px;border-radius:24px;display:grid;place-items:center;
    background:#fff;box-shadow:0 0 0 1px rgba(13,79,79,.10),0 18px 40px -16px rgba(0,0,0,.45),
    0 0 44px -8px rgba(46,196,166,.35);animation:lgFloat 5s ease-in-out infinite;}
.lg-mark img{width:100%;height:100%;object-fit:contain;padding:9px;}
@keyframes lgFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.lg-card h1{font-size:1.75rem;font-weight:800;letter-spacing:-.9px;margin:0;color:var(--ink);}
.lg-card .tag{font-size:.79rem;color:var(--muted);margin:8px 0 28px;line-height:1.75;}

.lg-form{display:flex;flex-direction:column;gap:11px;text-align:start;}
.lg-fld{position:relative;}
.lg-fld input{width:100%;height:56px;padding:22px 16px 8px;border-radius:14px;background:var(--input-bg);
    border:1px solid var(--edge);color:var(--ink);font-family:inherit;font-size:.9rem;outline:0;
    transition:.26s var(--swift);}
.lg-fld label{position:absolute;inset-inline-start:17px;top:18px;font-size:.86rem;color:var(--muted);
    pointer-events:none;transition:.22s var(--swift);}
.lg-fld input:focus{border-color:var(--brand-400);box-shadow:0 0 0 4px rgba(46,196,166,.14);}
.lg-fld input:focus+label,.lg-fld input:not(:placeholder-shown)+label{
    top:8px;font-size:.63rem;color:var(--brand-400);font-weight:800;letter-spacing:.5px;}
.lg-bad{font-size:.73rem;color:#e5484d;font-weight:700;display:flex;align-items:center;gap:6px;margin-top:-4px;}

.lg-fld.pw input{padding-inline-end:52px;}
.lg-eye{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;
    display:grid;place-items:center;border:0;border-radius:11px;background:transparent;cursor:pointer;
    color:var(--muted);font-size:1rem;transition:.22s var(--swift);}
.lg-eye:hover{color:var(--ink);background:var(--input-bg);}
.lg-eye:focus-visible{outline:2px solid var(--brand-400);outline-offset:2px;}
.lg-eye i{grid-area:1/1;transition:opacity .18s var(--swift);}
.lg-eye .bi-eye-slash{opacity:0;}
.lg-eye.on{color:var(--brand-400);}
.lg-eye.on .bi-eye{opacity:0;}
.lg-eye.on .bi-eye-slash{opacity:1;}

.lg-remember{display:flex;align-items:center;gap:10px;font-size:.79rem;color:var(--ink-2);
    cursor:pointer;user-select:none;margin:4px 0 6px;}
.lg-remember input{position:absolute;opacity:0;pointer-events:none;}
.lg-remember .box{width:19px;height:19px;border-radius:7px;border:1.5px solid var(--edge-2);
    display:grid;place-items:center;transition:.24s var(--spring);flex:none;}
.lg-remember .box i{font-size:.68rem;color:var(--on-acc);opacity:0;transform:scale(.4);transition:.24s var(--spring);}
.lg-remember input:checked+.box{background:var(--brand-400);border-color:var(--brand-400);}
.lg-remember input:checked+.box i{opacity:1;transform:none;}

.lg-go{position:relative;overflow:hidden;height:52px;border:0;border-radius:14px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:10px;font-family:inherit;
    color:var(--on-acc);font-weight:800;font-size:.92rem;
    background:linear-gradient(135deg,var(--brand-400),var(--brand-600));
    box-shadow:0 14px 32px -14px var(--brand-400);transition:.3s var(--swift);}
.lg-go:hover{transform:translateY(-2px);box-shadow:0 20px 40px -16px var(--brand-300);}
.lg-go:active{transform:translateY(0);}
.lg-go i{transition:transform .3s var(--spring);}
.lg-go:hover i{transform:translateX(var(--dx,4px));}
html[dir="rtl"] .lg-go{--dx:-4px;}

.lg-note{display:flex;align-items:center;justify-content:center;gap:7px;margin:22px 0 0;
    font-size:.7rem;color:var(--muted);}
.lg-back{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:.75rem;
    color:var(--muted);transition:.22s var(--swift);}
.lg-back:hover{color:var(--brand-400);}

/* ——— TOTP ———
   The code is digits only: force LTR and wide tracking so it reads correctly
   inside an Arabic RTL page (FR-230). */
.lg-code input{text-align:center;font-size:1.5rem;font-weight:800;letter-spacing:.7rem;
    padding:16px 16px 14px;text-indent:.7rem;direction:ltr;unicode-bidi:isolate;
    font-variant-numeric:tabular-nums;}
.lg-code label{inset-inline-start:50%;transform:translateX(-50%);}
html[dir="rtl"] .lg-code label{transform:translateX(50%);}
.lg-code input:focus+label,.lg-code input:not(:placeholder-shown)+label{
    top:8px;font-size:.63rem;letter-spacing:.5px;}

.lg-qr{background:#fff;border-radius:var(--r);padding:14px;width:min(248px,100%);margin:0 auto 18px;
    box-shadow:0 0 0 1px rgba(13,79,79,.10),0 14px 34px -18px rgba(0,0,0,.4);}
.lg-qr svg{display:block;width:100%;height:auto;}
.lg-secret{font-size:.72rem;color:var(--muted);margin:0 0 6px;}
.lg-secret-val{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;
    font-weight:700;color:var(--ink-2);background:var(--input-bg);border:1px solid var(--edge);
    border-radius:10px;padding:9px 12px;margin-bottom:20px;word-break:break-all;
    direction:ltr;unicode-bidi:isolate;}

@media (prefers-reduced-motion:reduce){
    .lg-aurora i,.lg-mark,.lg-card{animation:none!important;}
}