:root {
            --tan:#DCAF86;--caramel:#BF825C;--cocoa:#A76C4E;--cream:#FEF7E3;
            --ink:#2a1f17;--ink-2:#5a473a;--ink-3:#8a7565;--ink-4:#b09a85;
            --bg:#F5E7C8;--bg2:#FBF1D9;--line:rgba(167,108,78,.12);
            --green:#5a7a3f;--green-bg:#daead0;--red:#a04f3f;--red-bg:#f0d9d0;
        }
        *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
        html,body{min-height:100vh;background:linear-gradient(135deg,var(--bg2),var(--bg));font-family:"Geist",ui-sans-serif,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;letter-spacing:-0.005em}
        body{display:flex;align-items:center;justify-content:center;padding:1.5rem}
        .bg-blobs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
        .b{position:absolute;border-radius:50%;filter:blur(100px);mix-blend-mode:multiply;animation:blobDrift 24s ease-in-out infinite}
        .b1{width:600px;height:600px;background:#DCAF86;right:-150px;top:-100px;opacity:.35;animation-duration:26s}
        .b2{width:500px;height:500px;background:#BF825C;left:200px;bottom:-200px;opacity:.18;animation-duration:30s;animation-delay:-6s}
        .b3{width:420px;height:420px;background:#E0D0BF;left:44%;top:8%;opacity:.28;animation-duration:20s;animation-delay:-12s}
        @keyframes blobDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-3%,4%) scale(1.06)}}
        .floaters{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
        .floater{position:absolute;opacity:.1;filter:saturate(120%);animation:floatDrift ease-in-out infinite alternate}
        .f1{width:40px;height:40px;top:10%;left:7%;animation-duration:16s}
        .f2{width:26px;height:26px;top:66%;right:9%;animation-duration:19s;animation-delay:-4s}
        .f3{width:52px;height:52px;top:22%;right:14%;animation-duration:22s;animation-delay:-9s;opacity:.07}
        .f4{width:22px;height:22px;bottom:12%;left:16%;animation-duration:14s;animation-delay:-2s}
        .f5{width:18px;height:18px;top:6%;right:26%;animation-duration:13s;animation-delay:-7s;opacity:.08}
        .f6{width:32px;height:32px;bottom:6%;right:30%;animation-duration:20s;animation-delay:-11s}
        .f7{width:16px;height:16px;top:40%;left:4%;animation-duration:15s;animation-delay:-3s;opacity:.07}
        .f8{width:24px;height:24px;top:80%;right:20%;animation-duration:18s;animation-delay:-10s}
        @keyframes floatDrift{0%{transform:translateY(0) rotate(-6deg)}100%{transform:translateY(-30px) rotate(10deg)}}
        .grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.045;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>")}
        .auth-wrap{position:relative;z-index:2;width:100%;max-width:440px;opacity:0;animation:cardIn .75s cubic-bezier(0.16,1,0.3,1) .05s both}
        @keyframes cardIn{0%{opacity:0;transform:translateY(32px) scale(.94)}100%{opacity:1;transform:translateY(0) scale(1)}}
        @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
        @keyframes ringPulse{0%{box-shadow:0 0 0 0 rgba(191,130,92,.35)}100%{box-shadow:0 0 0 26px rgba(191,130,92,0)}}
        .auth-card{
            position:relative;
            background:rgba(255,255,255,.6);
            backdrop-filter:blur(28px) saturate(160%);
            -webkit-backdrop-filter:blur(28px) saturate(160%);
            border:1px solid rgba(255,255,255,.7);
            border-radius:24px;padding:2.5rem;
            box-shadow:0 1px 0 0 rgba(255,255,255,.7) inset,0 -1px 0 0 rgba(167,108,78,.05) inset,0 32px 64px -24px rgba(90,55,30,.25),0 8px 24px -10px rgba(90,55,30,.14);
        }
        .auth-card::before{
            content:'';position:absolute;inset:0;border-radius:24px;pointer-events:none;
            animation:ringPulse 1s cubic-bezier(0.16,1,0.3,1) .15s both;
        }
        .auth-brand,.auth-title,.auth-sub,.alert,#passkeyBtn.is-visible,.auth-divider,.auth-form,.auth-footer{
            opacity:0;animation:fadeUp .6s cubic-bezier(0.16,1,0.3,1) both;
        }
        .auth-brand{animation-delay:.22s}
        .auth-title{animation-delay:.28s}
        .auth-sub{animation-delay:.33s}
        .alert{animation-delay:.38s}
        #passkeyBtn.is-visible{animation-delay:.42s}
        .auth-divider{animation-delay:.52s}
        .auth-form{animation-delay:.57s}
        .auth-footer{animation-delay:.68s}
        #pkAlert{opacity:0;animation:fadeUp .35s cubic-bezier(0.16,1,0.3,1) both}
        .auth-brand{display:flex;align-items:center;justify-content:center;margin-bottom:1.75rem;text-decoration:none}
        .auth-brand img{height:26px;width:auto;display:block}
        .btn-passkey{
            position:relative;display:flex;align-items:center;justify-content:center;gap:8px;
            width:100%;padding:11px;border-radius:10px;
            background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.85);
            color:var(--ink-2);font-family:inherit;font-size:14px;font-weight:500;
            cursor:pointer;transition:background .2s,border-color .2s,transform .2s;
        }
        .btn-passkey:hover{background:rgba(255,255,255,.85);border-color:var(--caramel);transform:translateY(-1px)}
        .btn-passkey:active{transform:none}
        .btn-passkey:disabled{opacity:.55;cursor:default;pointer-events:none}
        .btn-passkey i{color:var(--cocoa)}
        .auth-divider{display:flex;align-items:center;gap:10px;margin:1.1rem 0;color:var(--ink-4);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
        .auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--line)}
        .auth-title{font-size:22px;font-weight:500;letter-spacing:-0.025em;text-align:center;margin-bottom:4px}
        .auth-sub{font-size:13.5px;color:var(--ink-3);text-align:center;margin-bottom:1.75rem}
        .alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;font-size:13.5px;margin-bottom:1.25rem}
        .alert-error{background:var(--red-bg);border:1px solid rgba(160,79,63,.2);color:var(--red)}
        .alert-success{background:var(--green-bg);border:1px solid rgba(90,122,63,.2);color:var(--green)}
        .auth-form{display:flex;flex-direction:column;gap:1.1rem}
        .form-group{display:flex;flex-direction:column;gap:5px}
        .form-group label{font-size:12.5px;font-weight:500;color:var(--ink-2)}
        .input-icon-wrap{position:relative;display:flex;align-items:center}
        .input-icon-wrap>i{position:absolute;left:13px;color:var(--ink-4);font-size:13px;pointer-events:none;transition:color .2s}
        .input-icon-wrap:focus-within>i{color:var(--cocoa)}
        .input-icon-wrap input,.form-input{
            width:100%;padding:10px 12px 10px 36px;
            background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);
            border-radius:10px;font-family:inherit;font-size:14px;color:var(--ink);
            outline:none;transition:border-color .25s,box-shadow .25s,background .25s;
        }
        .input-icon-wrap input::placeholder,.form-input::placeholder{color:var(--ink-4)}
        .input-icon-wrap input:focus,.form-input:focus{border-color:var(--caramel);box-shadow:0 0 0 3px rgba(191,130,92,.15);background:rgba(255,255,255,.75)}
        .pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--ink-4);cursor:pointer;font-size:13px;padding:4px;transition:color .2s}
        .pw-toggle:hover{color:var(--ink-2)}
        .btn-auth{
            position:relative;
            display:flex;align-items:center;justify-content:center;
            width:100%;padding:11px;border-radius:10px;
            background:linear-gradient(180deg,var(--caramel),var(--cocoa));
            color:var(--cream);font-family:inherit;font-size:14px;font-weight:500;
            border:none;cursor:pointer;margin-top:4px;
            box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 6px 16px -6px rgba(167,108,78,.6);
            transition:transform .25s,box-shadow .25s;
        }
        .btn-auth:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 10px 24px -8px rgba(167,108,78,.7)}
        .btn-auth:active{transform:none}
        .btn-auth.is-loading{cursor:default;pointer-events:none}
        .btn-inner{
            display:flex;align-items:center;gap:8px;
        }
        .btn-auth.is-loading .btn-inner{opacity:0}
        .btn-spinner{
            position:absolute;top:50%;left:50%;
            width:17px;height:17px;
            border:2px solid rgba(254,247,227,.28);
            border-top-color:rgba(254,247,227,.92);
            border-radius:50%;
            opacity:0;
            transition:opacity .18s ease;
            animation:btnSpin .65s linear infinite;
        }
        .btn-auth.is-loading .btn-spinner{opacity:1}
        @keyframes btnSpin{
            from{transform:translate(-50%,-50%) rotate(0deg)}
            to  {transform:translate(-50%,-50%) rotate(360deg)}
        }
        .forgot-link{text-align:right;margin-top:2px}
        .forgot-link a{font-size:12px;color:var(--ink-3);text-decoration:none;transition:color .2s}
        .forgot-link a:hover{color:var(--cocoa)}
        .auth-footer{text-align:center;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
        .auth-footer a{color:var(--cocoa);font-weight:500;text-decoration:none;transition:opacity .2s}
        .auth-footer a:hover{opacity:.75}
        .verify-notice{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);border-radius:14px;padding:1.25rem;text-align:center;margin-bottom:1.25rem}
        .verify-icon{width:40px;height:40px;margin:0 auto .75rem;border-radius:10px;background:var(--green-bg);border:1px solid rgba(90,122,63,.2);display:flex;align-items:center;justify-content:center;color:var(--green)}
        @media(max-width:480px){.auth-card{padding:2rem 1.5rem;border-radius:20px}}
        @media(prefers-reduced-motion:reduce){
            .b,.floater,.auth-wrap,.auth-card::before,
            .auth-brand,.auth-title,.auth-sub,.alert,#pkAlert,#passkeyBtn.is-visible,.auth-divider,.auth-form,.auth-footer{
                animation:none!important;opacity:1!important;transform:none!important
            }
        }