:root{
            --text:#f5f5f5;
            --shadow-outer:0 0 0 1px rgba(255,255,255,0.04), 0 20px 80px rgba(0,0,0,0.35);
        }

        *{
            box-sizing:border-box;
        }

        html,
        body{
            width:100%;
            min-height:100%;
            height:100%;
        }

        body{
            margin:0;
            font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
            background:#0e1325;
            color:var(--text);
            overflow-x:hidden;
        }

        img{
            max-width:100%;
            display:block;
        }

        a{
            transition:all .2s ease;
        }

        .auth-shell{
            width:100%;
            min-height:100vh;
            min-height:100svh;
            height:100vh;
            height:100svh;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:20px;
        }

        .auth-frame{
            width:min(1188px, 100%);
            background:rgba(255, 255, 255, 0.05);
            border-radius:36px;
            padding:14px;
            box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03);
            position:relative;
        }

        .auth-card{
            border-radius:30px;
            background:rgba(255, 255, 255, 0.05);
            overflow:hidden;
            position:relative;
            box-shadow:var(--shadow-outer);
        }

        .auth-left,
        .auth-right{
            position:relative;
            z-index:2;
        }

        .auth-left{
            display:flex;
            align-items:center;
            justify-content:center;
            padding:72px 54px 48px;
        }

        .auth-left-inner{
            width:100%;
            max-width:430px;
            text-align:center;
        }

        .brand-mark{
            width:56px;
            height:56px;
            margin:0 auto 24px;
            display:flex;
            align-items:center;
            justify-content:center;
            border-radius:18px;
        }

        .brand-mark img{
            width:100%;
            height:100%;
            object-fit:contain;
        }

        .auth-title{
            font-size:34px;
            line-height:1.12;
            font-weight:400;
            letter-spacing:-0.6px;
            margin:0 0 14px;
            color:#f0f0f0;
        }

        .auth-subtitle{
            margin:0 auto 34px;
            max-width:420px;
            font-size:14px;
            line-height:1.6;
            color:#aaaaaa;
            font-weight:400;
        }

        .floating-wrap{
            position:relative;
            margin-bottom:18px;
        }

        .floating-input{
            width:100%;
            height:60px;
            border-radius:19px;
            border:1px solid rgba(255,255,255,0.14);
            background:rgba(255,255,255,0.025);
            color:#fff;
            padding:22px 22px 8px 22px;
            font-size:16px;
            outline:none;
            box-shadow:none;
            transition:all .25s ease;
        }

        .floating-input::placeholder{
            color:transparent;
        }

        .floating-label{
            position:absolute;
            left:22px;
            top:20px;
            font-size:15px;
            color:#9e9e9e;
            pointer-events:none;
            transition:all .2s ease;
            line-height:1;
        }

        .floating-input:hover{
            border-color:rgba(255,255,255,0.22);
            background:rgba(255,255,255,0.03);
        }

        .floating-input:focus,
        .floating-input:not(:placeholder-shown){
            border-color:rgba(255,255,255,0.34);
            background:rgba(255,255,255,0.04);
        }

        .floating-input:focus{
            box-shadow:0 0 0 4px rgba(255,255,255,0.03);
        }

        .floating-input:focus + .floating-label,
        .floating-input:not(:placeholder-shown) + .floating-label{
            top:11px;
            font-size:11px;
            color:#bebebe;
            letter-spacing:0.2px;
        }

        .auth-btn{
            width:100%;
            height:58px;
            border:none;
            border-radius:19px;
            margin-top:6px;
            background: #ffffff;
            color:#0b0b0b;
            font-size:15px;
            font-weight:600;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            transition:all .25s ease;
        }

        .auth-btn:hover{
            transform:translateY(-1px);
            background:linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
        }

        .auth-meta{
            margin-top:26px;
            color:#9d9d9d;
            font-size:13px;
            line-height:1.6;
        }

        .auth-meta a,
        .auth-login a{
            color:#efefef;
            text-decoration:none;
        }

        .auth-meta a:hover,
        .auth-login a:hover{
            color:#ffffff;
            text-decoration:underline;
        }

        .auth-login{
            margin-top:46px;
            color:#9f9f9f;
            font-size:14px;
        }

        .auth-right{
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
            padding:44px 46px;
        }

        .visual-stage{
            width:100%;
            max-width:470px;
            position:relative;
            height:384px;
            display:flex;
            align-items:center;
            justify-content:center;
            margin-top:10px;
        }

        .stack-visual{
            position:relative;
            width:330px;
            height:250px;
            border-radius:28px;
            background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
            border:1px solid rgba(255,255,255,0.08);
            box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 20px 60px rgba(0,0,0,0.35);
            overflow:hidden;
        }

        .stack-visual::before{
            content:"";
            position:absolute;
            inset:14px;
            border-radius:22px;
            border:1px solid rgba(255,255,255,0.06);
            pointer-events:none;
        }

        .logo-emblem{
            position:absolute;
            inset:0;
            display:flex;
            align-items:center;
            justify-content:center;
            z-index:1;
            padding:18px;
        }

        .logo-emblem img{
            width:100%;
            height:100%;
            object-fit:cover;
            border-radius:20px;
            opacity:.96;
            filter:drop-shadow(0 6px 8px rgba(0,0,0,.18));
        }

        .right-copy-wrap{
            width:100%;
            max-width:430px;
            text-align:center;
            position:relative;
            min-height:110px;
            margin-top:30px;
        }

        .slide{
            opacity:0;
            transform:translateY(8px);
            transition:opacity .45s ease, transform .45s ease;
            position:absolute;
            inset:0;
            pointer-events:none;
        }

        .slide.active{
            opacity:1;
            transform:translateY(0);
            pointer-events:auto;
        }

        .right-title{
            margin:0 0 12px;
            font-size:23px;
            font-weight:400;
            line-height:1.2;
            color:#f0f0f0;
        }

        .right-text{
            margin:0 auto;
            max-width:360px;
            font-size:14px;
            line-height:1.6;
            color:#9f9f9f;
        }

        .slider-dots{
            display:flex;
            align-items:center;
            justify-content:center;
            gap:7px;
            margin-top:116px;
        }

        .slider-dot{
            width:7px;
            height:7px;
            border-radius:999px;
            background:rgba(255,255,255,0.16);
            transition:all .3s ease;
        }

        .slider-dot.active{
            width:24px;
            background:#f1f1f1;
        }

        /* LARGE DEVICES ONLY */
        @media (min-width:992px){
            .auth-shell{
                min-height:100vh;
                min-height:100svh;
                height:100vh;
                height:100svh;
            }

            .auth-frame{
                height:calc(100vh - 40px);
                height:calc(100svh - 40px);
                min-height:700px;
                max-height:980px;
            }

            .auth-card,
            .auth-card > .row,
            .auth-left,
            .auth-right{
                height:100%;
            }
        }

        /* TABLET */
        @media (max-width: 991.98px){
            .auth-shell{
                min-height:100vh;
                min-height:100svh;
                height:100vh;
                height:100svh;
                padding:16px;
                align-items:center;
                justify-content:center;
            }

            .auth-frame{
                height:auto;
                min-height:auto;
            }

            .auth-card > .row{
                height:auto;
            }

            .auth-left,
            .auth-right{
                height:auto;
                min-height:auto;
            }

            .auth-left{
                padding:56px 36px 36px;
            }

            .auth-login{
                margin-top:34px;
            }
        }

        /* MOBILE */
        @media (max-width: 767.98px){
            .auth-shell{
                min-height:100vh;
                min-height:100svh;
                height:100vh;
                height:100svh;
                padding:20px 14px;
            }

            .auth-frame{
                padding:10px;
                border-radius:26px;
            }

            .auth-card{
                border-radius:22px;
            }

            .auth-left{
                padding:38px 20px 30px;
            }

            .auth-right{
                padding:8px 20px 30px;
            }

            .auth-title{
                font-size:28px;
            }

            .auth-subtitle,
            .right-text{
                font-size:13px;
            }

            .visual-stage{
                height:260px;
                margin-top:0;
            }

            .stack-visual{
                width:280px;
                height:210px;
                transform:scale(.92);
            }

            .right-copy-wrap{
                margin-top:12px;
                min-height:100px;
            }

            .slider-dots{
                margin-top:95px;
            }

            .brand-mark{
                width:46px;
                height:46px;
                margin-bottom:18px;
            }
        }

        @media (max-width: 480px){
            .auth-shell{
                padding:16px 10px;
            }

            .auth-frame{
                border-radius:22px;
                padding:8px;
            }

            .auth-card{
                border-radius:18px;
            }

            .auth-left{
                padding:30px 16px 22px;
            }

            .auth-right{
                padding:0 16px 24px;
            }

            .auth-title{
                font-size:24px;
            }

            .floating-input{
                height:56px;
                font-size:16px;
            }

            .auth-btn{
                height:56px;
            }

            .visual-stage{
                height:220px;
            }

            .stack-visual{
                width:240px;
                height:180px;
                transform:scale(.84);
            }

            .right-title{
                font-size:20px;
            }

            .slider-dots{
                margin-top:88px;
            }

            .auth-login{
                margin-top:28px;
            }
        }