*{box-sizing:border-box}

:root{
    --navy:#05152c;
    --navy-2:#08294e;
    --navy-3:#0e3d70;
    --blue:#278fff;
    --cyan:#53dcff;
    --violet:#8259ff;
    --gold:#ffd45c;
    --green:#39d79c;
    --white:#fff;
    --text:#eaf6ff;
    --muted:#9eb9d0;
    --panel:rgba(8,30,58,.82);
    --line:rgba(102,202,255,.18);
    --shadow:0 40px 100px rgba(0,9,27,.46);
}

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

body{
    margin:0;
    min-height:100vh;
    overflow-x:hidden;
    font-family:'Sarabun',Tahoma,sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 15% 0%,rgba(47,169,255,.22),transparent 30%),
        radial-gradient(circle at 90% 80%,rgba(116,76,255,.20),transparent 34%),
        linear-gradient(135deg,#041226 0%,#071e3d 48%,#07142d 100%);
}

button,input{
    font:inherit;
}

.ambient{
    position:fixed;
    pointer-events:none;
    border-radius:50%;
    filter:blur(80px);
    opacity:.42;
}

.ambient-a{
    width:420px;
    height:420px;
    background:#168add;
    left:-170px;
    top:-160px;
}

.ambient-b{
    width:500px;
    height:500px;
    background:#6d45d8;
    right:-220px;
    bottom:-200px;
}

.grid-overlay{
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.08;
    background-image:
        linear-gradient(rgba(102,210,255,.32) 1px,transparent 1px),
        linear-gradient(90deg,rgba(102,210,255,.32) 1px,transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(180deg,#000,transparent 95%);
}

.auth-shell{
    position:relative;
    z-index:2;
    width:min(1450px,calc(100% - 32px));
    min-height:calc(100vh - 32px);
    margin:16px auto;

    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(420px,.65fr);

    overflow:hidden;
    border:1px solid rgba(100,202,255,.18);
    border-radius:34px;
    background:rgba(6,22,44,.72);
    box-shadow:var(--shadow);
    backdrop-filter:blur(18px);
}


/* =========================
   LEFT VISUAL PANEL
   ========================= */

.visual-panel{
    position:relative;
    min-height:760px;
    overflow:hidden;
    background:
        radial-gradient(circle at 74% 45%,rgba(69,202,255,.16),transparent 27%),
        linear-gradient(135deg,rgba(9,46,82,.96),rgba(6,24,52,.96) 58%,rgba(25,28,81,.90));
}

.visual-panel::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(76,191,255,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(76,191,255,.04) 1px,transparent 1px);
    background-size:34px 34px;
}

.visual-panel::after{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    right:40px;
    top:90px;
    border:1px solid rgba(87,209,255,.08);
    box-shadow:
        0 0 0 60px rgba(87,209,255,.018),
        0 0 0 120px rgba(87,209,255,.012);
}

.brand-bar{
    position:relative;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:26px 30px;
}

.back-home{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#d9edfc;
    text-decoration:none;
    font-weight:700;
    font-size:13px;
    transition:.18s ease;
}

.back-home:hover{
    color:#fff;
    transform:translateX(-2px);
}

.back-home svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.system-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    color:#bfe9d9;
    border:1px solid rgba(71,216,162,.20);
    background:rgba(43,173,126,.08);
    font-size:10px;
    font-weight:800;
    letter-spacing:1.1px;
}

.system-chip i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 5px rgba(57,215,156,.10),0 0 16px #42dba1;
}

.visual-copy{
    position:relative;
    z-index:4;
    width:min(600px,60%);
    padding:84px 0 0 68px;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#9edfff;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.4px;
}

.shield-mini{
    width:33px;
    height:33px;
    display:grid;
    place-items:center;
    border-radius:11px;
    color:#513b00;
    background:linear-gradient(145deg,#ffe893,#ffc740);
    box-shadow:0 8px 20px rgba(255,190,42,.18);
}

.shield-mini svg{
    width:21px;
    height:21px;
    fill:currentColor;
}

.visual-copy h1{
    margin:17px 0 14px;
    font-size:clamp(44px,4.5vw,76px);
    line-height:1.02;
    letter-spacing:-1.8px;
    color:#fff;
}

.visual-copy h1 span{
    background:linear-gradient(90deg,#fff0a8,#ffd04d 55%,#fff6c9);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:drop-shadow(0 5px 0 rgba(102,62,0,.18));
}

.visual-copy>p{
    width:min(520px,100%);
    margin:0;
    color:#acc7dc;
    font-size:15px;
    line-height:1.8;
}

.feature-row{
    display:flex;
    gap:10px;
    margin-top:28px;
}

.feature{
    min-width:105px;
    padding:12px 14px;
    border-radius:15px;
    border:1px solid rgba(106,202,255,.11);
    background:rgba(255,255,255,.045);
    backdrop-filter:blur(8px);
}

.feature b{
    display:block;
    color:#fff;
    font-size:19px;
}

.feature span{
    display:block;
    margin-top:2px;
    color:#83aac6;
    font-size:9px;
    font-weight:700;
}

.teacher-stage{
    position:absolute;
    z-index:3;
    width:47%;
    right:0;
    top:68px;
    bottom:0;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}

.teacher-halo{
    position:absolute;
    width:420px;
    height:420px;
    right:12%;
    top:90px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(67,204,255,.25),rgba(63,122,255,.05) 45%,transparent 70%);
    filter:blur(2px);
}

.orbit{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(78,208,255,.14);
}

.orbit-one{
    width:420px;
    height:420px;
    right:9%;
    top:92px;
}

.orbit-two{
    width:330px;
    height:330px;
    right:14%;
    top:138px;
    border-style:dashed;
}

.teacher-image{
    position:relative;
    z-index:3;
    height:min(690px,87%);
    max-width:95%;
    object-fit:contain;
    object-position:center bottom;
    filter:drop-shadow(0 35px 32px rgba(0,0,0,.35));
    animation:teacherFloat 4.6s ease-in-out infinite;
}

@keyframes teacherFloat{
    50%{transform:translateY(-7px)}
}

.float-card{
    position:absolute;
    z-index:6;
    min-width:190px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 13px;
    border-radius:16px;
    background:rgba(8,34,66,.88);
    border:1px solid rgba(95,207,255,.20);
    box-shadow:0 17px 40px rgba(0,0,0,.22);
    backdrop-filter:blur(12px);
}

.float-card-a{
    left:-20px;
    top:175px;
}

.float-card-b{
    right:22px;
    bottom:115px;
}

.float-card small{
    display:block;
    color:#7ea9c7;
    font-size:8px;
}

.float-card strong{
    display:block;
    margin-top:2px;
    color:#fff;
    font-size:10px;
}

.float-icon{
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:10px;
    font-weight:800;
}

.float-icon.cyan{
    color:#003f58;
    background:linear-gradient(145deg,#8cecff,#39bee8);
}

.float-icon.gold{
    color:#624400;
    background:linear-gradient(145deg,#ffe886,#ffc43e);
}

.visual-footer{
    position:absolute;
    z-index:5;
    left:30px;
    right:30px;
    bottom:24px;
    display:flex;
    justify-content:space-between;
    color:#5f88a7;
    font-size:9px;
    font-weight:700;
    letter-spacing:.4px;
}


/* =========================
   RIGHT LOGIN PANEL
   ========================= */

.login-panel{
    position:relative;
    min-height:760px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:42px clamp(34px,4vw,68px);
    background:
        radial-gradient(circle at 100% 0,rgba(93,73,216,.14),transparent 31%),
        linear-gradient(180deg,rgba(6,22,44,.96),rgba(5,18,37,.98));
    border-left:1px solid rgba(106,202,255,.12);
}

.mobile-logo{
    display:none;
}

.login-wrap{
    width:min(450px,100%);
    margin:auto;
}

.login-heading{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:27px;
}

.lock-badge{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:17px;
    color:#fff;
    background:linear-gradient(145deg,#2b96ff,#6d5bf0);
    box-shadow:
        0 14px 30px rgba(43,132,255,.18),
        inset 0 0 0 1px rgba(255,255,255,.18);
}

.lock-badge svg{
    width:27px;
    height:27px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.login-kicker{
    display:block;
    margin-bottom:3px;
    color:#67ceff;
    font-size:9px;
    font-weight:800;
    letter-spacing:1.6px;
}

.login-heading h2{
    margin:0;
    color:#fff;
    font-size:31px;
    letter-spacing:-.6px;
}

.login-heading p{
    margin:3px 0 0;
    color:#799ab4;
    font-size:11px;
}

.alert-error{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:20px;
    padding:12px 13px;
    border-radius:13px;
    color:#ffdce0;
    border:1px solid rgba(255,102,118,.23);
    background:rgba(185,45,62,.11);
}

.alert-error>span{
    width:27px;
    height:27px;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:9px;
    color:#fff;
    background:#c74654;
    font-weight:800;
}

.alert-error b{
    display:block;
    font-size:10px;
}

.alert-error small{
    display:block;
    margin-top:2px;
    color:#e9aab1;
    font-size:9px;
}

.login-form{
    display:grid;
    gap:18px;
}

.field label{
    display:block;
    margin-bottom:7px;
    color:#c9dceb;
    font-size:11px;
    font-weight:700;
}

.label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.caps-hint{
    visibility:hidden;
    opacity:0;
    color:#ffc94f;
    font-size:9px;
    font-weight:700;
    transition:.15s ease;
}

.caps-hint.visible{
    visibility:visible;
    opacity:1;
}

.input-shell{
    position:relative;
    height:55px;
    display:flex;
    align-items:center;
    border-radius:15px;
    border:1px solid rgba(103,180,233,.15);
    background:rgba(255,255,255,.048);
    transition:.18s ease;
}

.input-shell:focus-within{
    border-color:rgba(67,180,255,.66);
    background:rgba(25,92,147,.15);
    box-shadow:
        0 0 0 3px rgba(34,152,236,.08),
        0 0 28px rgba(24,143,232,.08);
}

.input-icon{
    width:49px;
    display:grid;
    place-items:center;
    color:#5da6d7;
    flex:0 0 auto;
}

.input-icon svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.input-shell input{
    width:100%;
    height:100%;
    min-width:0;
    padding:0 47px 0 0;
    border:0;
    outline:0;
    color:#fff;
    background:transparent;
    font-size:13px;
}

.input-shell input::placeholder{
    color:#56748e;
}

.password-toggle{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    padding:0;
    border:0;
    border-radius:10px;
    color:#6088a5;
    background:transparent;
    cursor:pointer;
    transition:.15s ease;
}

.password-toggle:hover{
    color:#bfeaff;
    background:rgba(255,255,255,.055);
}

.password-toggle svg{
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.eye-closed{
    display:none;
}

.password-toggle.showing .eye-open{
    display:none;
}

.password-toggle.showing .eye-closed{
    display:block;
}

.login-button{
    position:relative;
    height:57px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    overflow:hidden;
    margin-top:5px;

    border:1px solid rgba(142,223,255,.45);
    border-radius:16px;
    color:#fff;
    background:linear-gradient(135deg,#198ce8,#276ad9 54%,#6959e9);
    box-shadow:
        0 12px 30px rgba(20,100,220,.24),
        inset 0 1px rgba(255,255,255,.18);

    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:.2s ease;
}

.login-button::before{
    content:"";
    position:absolute;
    width:80px;
    height:220%;
    top:-60%;
    left:-110px;
    transform:rotate(24deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
    transition:.5s ease;
}

.login-button:hover{
    transform:translateY(-2px);
    box-shadow:
        0 16px 36px rgba(20,100,220,.30),
        0 0 28px rgba(51,178,255,.10);
}

.login-button:hover::before{
    left:110%;
}

.login-button svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.security-note{
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin-top:20px;
    padding:12px 13px;
    border-radius:13px;
    background:rgba(34,105,93,.08);
    border:1px solid rgba(62,210,164,.10);
}

.security-dot{
    width:8px;
    height:8px;
    margin-top:5px;
    flex:0 0 auto;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 10px rgba(57,215,156,.55);
}

.security-note p{
    margin:0;
    color:#709c91;
    font-size:9px;
    line-height:1.55;
}

.login-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-top:auto;
    padding-top:24px;
    color:#405f79;
    font-size:9px;
}

.login-footer a{
    color:#668ca8;
    text-decoration:none;
}

.login-footer a:hover{
    color:#9bdcff;
}


/* =========================
   RESPONSIVE
   ========================= */

@media(max-width:1120px){

    .auth-shell{
        grid-template-columns:1fr minmax(390px,.82fr);
    }

    .visual-copy{
        width:65%;
        padding-left:42px;
    }

    .visual-copy h1{
        font-size:49px;
    }

    .teacher-stage{
        width:48%;
    }

    .teacher-image{
        height:min(610px,80%);
    }

    .float-card{
        transform:scale(.88);
    }

    .float-card-a{
        left:-8px;
    }
}

@media(max-width:900px){

    body{
        background:
            radial-gradient(circle at 50% 0,rgba(33,136,211,.22),transparent 34%),
            linear-gradient(180deg,#06182f,#07152b);
    }

    .auth-shell{
        width:min(680px,calc(100% - 24px));
        min-height:auto;
        margin:12px auto;
        display:block;
        border-radius:28px;
    }

    .visual-panel{
        display:none;
    }

    .login-panel{
        min-height:calc(100vh - 24px);
        border-left:0;
        padding:30px clamp(24px,7vw,54px);
    }

    .mobile-logo{
        display:flex;
        align-items:center;
        gap:11px;
        margin-bottom:36px;
    }

    .mobile-shield{
        width:44px;
        height:44px;
        display:grid;
        place-items:center;
        border-radius:14px;
        color:#614500;
        background:linear-gradient(145deg,#ffe88e,#ffc33d);
        font-size:21px;
        box-shadow:0 9px 21px rgba(255,190,39,.16);
    }

    .mobile-logo strong{
        display:block;
        font-size:15px;
    }

    .mobile-logo small{
        display:block;
        margin-top:1px;
        color:#6387a4;
        font-size:8px;
        letter-spacing:1px;
    }

    .login-wrap{
        margin:auto;
    }
}

@media(max-width:520px){

    .auth-shell{
        width:100%;
        min-height:100vh;
        margin:0;
        border:0;
        border-radius:0;
    }

    .login-panel{
        min-height:100vh;
        padding:24px 18px;
    }

    .mobile-logo{
        margin-bottom:42px;
    }

    .login-heading{
        gap:12px;
        margin-bottom:23px;
    }

    .lock-badge{
        width:50px;
        height:50px;
        border-radius:15px;
    }

    .login-heading h2{
        font-size:25px;
    }

    .input-shell{
        height:54px;
    }

    .login-button{
        height:55px;
    }

    .login-footer{
        padding-top:30px;
    }
}

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important;
    }
}