:root{
    --navy:#050831;
    --deep:#070b3f;
    --blue:#0b3a8f;
    --purple:#6420b8;
    --violet:#b457ff;
    --gold:#ffd76a;
    --gold-deep:#f5a623;
    --white:#ffffff;
    --muted:rgba(255,255,255,.78);
    --glass:rgba(255,255,255,.14);
    --glass-strong:rgba(255,255,255,.22);
    --line:rgba(255,255,255,.30);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:"Noto Sans Thai","Segoe UI",Tahoma,sans-serif;color:#fff;background:var(--navy)}
body{overflow-x:hidden}
button,input{font-family:inherit}

.bo-login{
    position:relative;
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(560px,1.08fr) minmax(420px,.82fr);
    gap:4.5vw;
    align-items:center;
    padding:42px 5vw 76px;
    isolation:isolate;
    overflow:hidden;
    background:
        linear-gradient(115deg,rgba(3,7,38,.94),rgba(6,31,111,.78) 44%,rgba(91,26,145,.82)),
        url('../img/login-bg.jpg') center/cover no-repeat;
}

.bo-login:before{
    content:"";
    position:absolute;
    inset:-90px;
    z-index:-3;
    background:
        radial-gradient(circle at 82% 18%,rgba(255,195,92,.30),transparent 20%),
        radial-gradient(circle at 38% 74%,rgba(152,58,255,.32),transparent 24%),
        radial-gradient(circle at 10% 18%,rgba(52,139,255,.25),transparent 19%),
        linear-gradient(to top,rgba(2,4,30,.95),rgba(3,5,32,.10) 58%);
    animation:gradientMove 18s ease-in-out infinite;
}

.bo-login:after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background:
        linear-gradient(140deg,rgba(255,215,106,.98),transparent 17%) top left/48% 5px no-repeat,
        linear-gradient(140deg,transparent 76%,rgba(255,215,106,.96)) bottom right/56% 5px no-repeat,
        repeating-linear-gradient(120deg,rgba(255,255,255,.06) 0 1px,transparent 1px 150px);
    opacity:.9;
}

.lux-grid{
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(circle at 68% 34%,#000,transparent 62%);
    opacity:.35;
}

.lux-orb{position:absolute;border-radius:999px;filter:blur(4px);opacity:.86;pointer-events:none;z-index:-1}
.lux-orb-one{width:440px;height:440px;right:-120px;top:-120px;background:radial-gradient(circle,rgba(255,153,209,.42),transparent 68%)}
.lux-orb-two{width:560px;height:560px;left:-180px;bottom:-230px;background:radial-gradient(circle,rgba(95,77,255,.38),transparent 70%)}

.bo-hero{
    min-height:760px;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
    padding-top:2px;
}

.brand-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-bottom:20px;
    filter:drop-shadow(0 16px 32px rgba(0,0,0,.35));
}

.crest{
    width:96px;
    height:96px;
    border-radius:50%;
    display:grid;
    place-items:center;
    border:3px solid var(--gold);
    color:var(--gold);
    font-family:Georgia,serif;
    font-size:54px;
    font-weight:800;
    background:rgba(6,12,60,.62);
    box-shadow:0 0 30px rgba(255,215,106,.34),inset 0 0 22px rgba(255,255,255,.14);
    position:relative;
}
.crest:before,.crest:after{content:"";position:absolute;border-radius:inherit;inset:-9px;border:1px solid rgba(255,215,106,.35)}
.crest:after{inset:11px;border-color:rgba(255,255,255,.14)}
.crest span{transform:translateY(-1px)}

.brand-text strong{display:block;margin-top:10px;font-family:Georgia,serif;color:var(--gold);font-size:30px;letter-spacing:.07em;line-height:1;text-shadow:0 4px 18px rgba(0,0,0,.45)}
.brand-text span{display:block;margin-top:4px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.86)}

.headline{position:relative;z-index:2;margin-top:0;text-shadow:0 5px 22px rgba(0,0,0,.48)}
.headline p{font-family:Georgia,serif;font-size:36px;margin:0 0 4px;color:#fff}
.headline h1{margin:0;color:var(--gold);font-family:Georgia,serif;font-size:72px;line-height:.93;letter-spacing:.045em}
.headline h2{margin:14px 0 10px;font-family:Georgia,serif;font-size:24px;letter-spacing:.04em;color:#fff;text-transform:uppercase}
.headline i{display:block;width:180px;height:2px;margin:0 auto 18px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.headline h3{margin:0;font-size:25px;line-height:1.34;font-weight:650;color:#fff}

.team-stage{
    position:absolute;
    left:50%;
    bottom:76px;
    transform:translateX(-50%);
    width:min(920px,100%);
    height:430px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
    border-radius:28px;
    pointer-events:none;
    -webkit-mask-image:linear-gradient(to top,#000 70%,transparent 100%);
    mask-image:linear-gradient(to top,#000 70%,transparent 100%);
}
.team-stage:before{
    content:"";
    position:absolute;
    inset:auto 6% 0;
    height:94px;
    border-radius:50%;
    background:radial-gradient(ellipse at center,rgba(255,215,106,.30),transparent 68%);
    filter:blur(8px);
}
.team-stage img{
    width:104%;
    height:auto;
    max-width:none;
    object-fit:contain;
    filter:drop-shadow(0 38px 48px rgba(0,0,0,.38));
}

.feature-bar{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    width:min(100%,940px);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:17px 22px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:18px;
    background:linear-gradient(135deg,rgba(18,25,92,.82),rgba(85,25,138,.68));
    box-shadow:0 24px 64px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.16);
    backdrop-filter:blur(16px);
    z-index:4;
}
.feature-bar div{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;text-align:left;gap:0 12px;padding:0 14px;border-right:1px solid rgba(255,255,255,.18)}
.feature-bar div:last-child{border-right:0}
.feature-bar b{grid-row:1/3;color:var(--gold);font-size:31px;line-height:1}
.feature-bar strong{color:var(--gold);font-size:15px;line-height:1.15}
.feature-bar span{font-size:13px;color:rgba(255,255,255,.88)}

.login-panel{
    width:min(100%,612px);
    justify-self:center;
    padding:54px 52px 42px;
    border-radius:34px;
    border:1px solid var(--line);
    background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(123,63,184,.24) 44%,rgba(5,15,72,.72));
    box-shadow:0 34px 85px rgba(0,0,0,.47),inset 0 1px 0 rgba(255,255,255,.30);
    backdrop-filter:blur(24px);
    position:relative;
    overflow:hidden;
}
.login-panel:before{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:33px;
    border:1px solid rgba(255,255,255,.08);
    pointer-events:none;
}
.panel-glow{position:absolute;right:-90px;top:-80px;width:270px;height:270px;border-radius:50%;background:radial-gradient(circle,rgba(255,136,220,.38),transparent 66%);filter:blur(6px)}
.member-icon{position:relative;margin:0 auto 22px;width:122px;height:122px;border-radius:50%;display:grid;place-items:center;font-size:48px;border:3px solid var(--gold);color:#fff;background:radial-gradient(circle at 65% 30%,rgba(255,255,255,.24),rgba(105,38,174,.30));box-shadow:0 0 34px rgba(255,215,106,.34),inset 0 0 24px rgba(255,255,255,.14);animation:float 4.2s ease-in-out infinite}
.member-icon:after{content:"";position:absolute;inset:-12px;border-radius:inherit;border:1px solid rgba(255,215,106,.25)}
.login-panel h4{position:relative;margin:0;text-align:center;color:var(--gold);font-family:Georgia,serif;font-size:48px;line-height:1;text-shadow:0 5px 18px rgba(0,0,0,.34)}
.login-panel p{text-align:center;margin:8px 0 28px;font-size:21px;color:#fff}
.login-error{position:relative;margin-bottom:16px;padding:12px 16px;border-radius:14px;text-align:center;background:rgba(255,48,80,.20);border:1px solid rgba(255,160,170,.55);box-shadow:0 12px 28px rgba(0,0,0,.14)}
.login-form{position:relative;display:grid;gap:17px}.field{position:relative;display:block}
.field span{position:absolute;left:22px;top:50%;transform:translateY(-50%);font-size:22px;opacity:.92;color:rgba(255,255,255,.9)}
.field input{width:100%;height:68px;border-radius:14px;border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.13);color:#fff;font-size:19px;padding:0 64px;outline:0;transition:.22s;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.field input::placeholder{color:rgba(255,255,255,.82)}
.field input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(255,215,106,.16),inset 0 1px 0 rgba(255,255,255,.18);background:rgba(255,255,255,.17)}
.eye{position:absolute;right:18px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#fff;font-size:21px;cursor:pointer;width:42px;height:42px;border-radius:999px}
.eye:hover{background:rgba(255,255,255,.10);color:var(--gold)}
.options{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:2px 0 7px;font-size:15px}.options label{display:flex;align-items:center;gap:10px}.options input{appearance:none;width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--gold),var(--gold-deep));position:relative;box-shadow:0 5px 14px rgba(245,166,35,.28)}.options input:checked:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;font-weight:800;color:#fff}.options a{color:#fff;text-decoration:none}.options a:hover{color:var(--gold)}
.submit-btn{height:70px;border:0;border-radius:14px;color:#fff;font-weight:850;font-size:22px;letter-spacing:.055em;cursor:pointer;background:linear-gradient(135deg,#ffe08a,#f5c55d,#f0a92e);box-shadow:0 17px 34px rgba(245,162,30,.30),inset 0 1px 0 rgba(255,255,255,.42);transition:.24s;position:relative;overflow:hidden}.submit-btn:before{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.36),transparent);transition:.55s}.submit-btn:hover{transform:translateY(-3px);box-shadow:0 24px 45px rgba(245,162,30,.45),inset 0 1px 0 rgba(255,255,255,.48)}.submit-btn:hover:before{transform:translateX(100%)}.submit-btn span{margin-left:14px}
.separator{display:flex;align-items:center;gap:18px;opacity:.95}.separator:before,.separator:after{content:"";height:1px;flex:1;background:rgba(255,255,255,.28)}.separator span{font-weight:700}
.home-link{height:62px;border-radius:14px;border:1px solid rgba(173,91,255,.95);display:flex;align-items:center;justify-content:center;gap:12px;color:#fff;text-decoration:none;background:rgba(5,15,70,.34);font-size:18px;transition:.22s}.home-link:hover{border-color:var(--gold);background:rgba(255,255,255,.10);transform:translateY(-2px)}
.secure-note{text-align:center;margin-top:28px;color:rgba(255,255,255,.82);font-size:15px}.secure-note i{color:var(--gold);margin-right:8px}
footer{position:absolute;left:0;right:0;bottom:20px;text-align:center;color:rgba(255,255,255,.86);font-size:14px}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes gradientMove{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(36px,-16px) scale(1.02)}}

@media(max-width:1180px){
    .bo-login{grid-template-columns:1fr;padding:28px 22px 90px;gap:26px}.bo-hero{min-height:700px}.login-panel{max-width:620px}.team-stage{width:min(820px,100%)}.feature-bar{position:relative;margin-top:auto}.headline h1{font-size:66px}
}
@media(max-width:760px){
    .bo-login{padding:18px 14px 82px;gap:18px}.bo-hero{min-height:548px}.brand-card{margin-bottom:12px}.crest{width:74px;height:74px;font-size:40px}.brand-text strong{font-size:23px}.brand-text span{font-size:10px}.headline p{font-size:28px}.headline h1{font-size:44px}.headline h2{font-size:15px}.headline h3{font-size:17px}.headline i{margin-bottom:12px}.team-stage{height:265px;bottom:94px;width:720px;max-width:118vw}.feature-bar{grid-template-columns:repeat(2,1fr);gap:12px;padding:14px}.feature-bar div{border-right:0;padding:0}.feature-bar b{font-size:25px}.feature-bar strong{font-size:13px}.feature-bar span{font-size:12px}.login-panel{padding:30px 18px;border-radius:26px}.member-icon{width:88px;height:88px;font-size:35px}.login-panel h4{font-size:37px}.login-panel p{font-size:18px}.field input{height:58px;font-size:16px}.options{font-size:13px}.submit-btn{height:60px;font-size:18px}.home-link{height:56px;font-size:16px}
}
@media(max-width:420px){
    .bo-login{padding-left:10px;padding-right:10px}.bo-hero{min-height:510px}.headline h1{font-size:38px}.headline h2{font-size:13px}.headline h3{font-size:15px}.team-stage{bottom:105px;height:235px}.feature-bar{font-size:12px}.feature-bar div{grid-template-columns:34px 1fr}.login-panel{padding:26px 14px}.options{align-items:flex-start}.field span{left:17px}.field input{padding-left:52px;padding-right:52px}.eye{right:8px}
}

/* Desktop code layout v2.5
   ใช้ HTML/CSS จริงแทนภาพการ์ด เพื่อให้แก้ข้อความได้ทั้งหมดจาก login-text.php */
@media (min-width:761px){
    html,body{
        min-height:100%;
        background:#3c2e7b !important;
    }

    body{
        overflow:hidden;
        -webkit-font-smoothing:antialiased;
        text-rendering:geometricPrecision;
    }

    .bo-login{
        min-height:100vh;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:42px 48px;
        background:#3c2e7b !important;
        overflow:hidden;
    }

    .bo-login:before,
    .bo-login:after,
    .lux-grid,
    .lux-orb{
        display:none !important;
    }

    .desktop-login-card{
        display:grid !important;
        grid-template-columns:1.58fr 1fr;
        position:relative;
        width:min(1124px,calc(100vw - 96px));
        aspect-ratio:1124/680;
        min-height:0;
        border-radius:28px;
        overflow:hidden;
        isolation:isolate;
        background:
            radial-gradient(circle at 87% 7%,rgba(255,142,186,.30),transparent 28%),
            radial-gradient(circle at 20% 80%,rgba(144,56,255,.28),transparent 34%),
            linear-gradient(105deg,rgba(3,12,59,.94) 0%,rgba(10,44,112,.78) 46%,rgba(80,31,136,.88) 100%),
            url('../img/login-bg.jpg') center/cover no-repeat !important;
        border:1px solid rgba(255,216,112,.18);
        box-shadow:
            0 28px 76px rgba(15,6,63,.28),
            0 0 0 1px rgba(255,255,255,.08) inset,
            0 18px 45px rgba(0,0,0,.16) inset;
    }

    .desktop-login-card:before{
        content:"";
        position:absolute;
        inset:0;
        pointer-events:none;
        background:
            linear-gradient(90deg,rgba(3,7,42,.08),rgba(4,8,44,.06) 56%,rgba(255,255,255,.04)),
            radial-gradient(circle at 70% 105%,rgba(135,48,255,.36),transparent 28%),
            repeating-linear-gradient(123deg,rgba(255,255,255,.055) 0 1px,transparent 1px 150px);
        z-index:-1;
    }

    .desktop-login-card:after{
        content:"";
        position:absolute;
        inset:0;
        pointer-events:none;
        background:
            linear-gradient(142deg,rgba(255,215,106,.62),transparent 13%) top left/42% 3px no-repeat,
            linear-gradient(142deg,transparent 77%,rgba(255,173,76,.58)) bottom right/48% 3px no-repeat;
        opacity:.65;
        z-index:5;
    }

    .desktop-login-card .bo-hero{
        display:flex !important;
        position:relative;
        min-height:0 !important;
        height:100%;
        padding:66px 34px 28px;
        align-items:center;
        justify-content:flex-start;
        text-align:center;
        overflow:hidden;
        z-index:1;
    }

    .desktop-login-card .brand-card{
        display:none !important;
    }

    .desktop-login-card .headline{
        position:relative;
        z-index:4;
        width:100%;
        margin:0 auto;
        transform:translateY(-54px);
        filter:drop-shadow(0 16px 18px rgba(0,0,0,.26));
    }

    .desktop-login-card .headline p{
        margin:0 0 2px;
        color:rgba(255,255,255,.94);
        font-family:Georgia,serif;
        font-size:clamp(24px,2vw,34px);
        line-height:1.05;
        text-shadow:0 5px 18px rgba(0,0,0,.38);
    }

    .desktop-login-card .headline h1{
        margin:0;
        color:var(--gold);
        font-family:Georgia,serif;
        font-size:clamp(43px,4.2vw,58px);
        line-height:.94;
        letter-spacing:.035em;
        white-space:pre-line;
        text-shadow:0 8px 22px rgba(0,0,0,.42);
    }

    .desktop-login-card .headline h2{
        margin:12px 0 0;
        color:rgba(255,255,255,.92);
        font-size:clamp(14px,1.18vw,19px);
        line-height:1.25;
        letter-spacing:.04em;
        text-transform:uppercase;
        text-shadow:0 5px 16px rgba(0,0,0,.35);
    }

    .desktop-login-card .headline i{
        display:block;
        width:112px;
        height:2px;
        margin:14px auto 14px;
        background:linear-gradient(90deg,transparent,var(--gold),transparent);
        border-radius:999px;
        opacity:.95;
    }

    .desktop-login-card .headline h3{
        margin:0;
        color:#fff;
        font-size:clamp(18px,1.65vw,25px);
        line-height:1.26;
        font-weight:800;
        text-shadow:0 7px 20px rgba(0,0,0,.36);
    }

    .desktop-login-card .team-stage{
        display:block !important;
        position:absolute;
        left:32px;
        right:16px;
        bottom:54px;
        width:auto;
        height:340px;
        z-index:3;
        pointer-events:none;
        filter:drop-shadow(0 26px 35px rgba(0,0,0,.36));
    }

    .desktop-login-card .team-stage:after{
        content:"";
        position:absolute;
        left:9%;
        right:9%;
        bottom:8px;
        height:34px;
        border-radius:50%;
        background:rgba(15,7,59,.46);
        filter:blur(18px);
        z-index:-1;
    }

    .desktop-login-card .team-stage img{
        width:100%;
        height:100%;
        object-fit:contain;
        object-position:center bottom;
        display:block;
    }

    .desktop-login-card .feature-bar{
        display:grid !important;
        position:absolute;
        left:90px;
        right:86px;
        bottom:31px;
        grid-template-columns:repeat(4,1fr);
        gap:0;
        padding:8px 8px;
        border-radius:0;
        border:1px solid rgba(255,216,112,.18);
        background:rgba(7,10,53,.76);
        box-shadow:0 20px 38px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.08);
        backdrop-filter:blur(10px);
        z-index:4;
    }

    .desktop-login-card .feature-bar div{
        display:grid;
        grid-template-columns:28px 1fr;
        grid-template-rows:auto auto;
        gap:0 8px;
        align-items:center;
        padding:0 10px;
        border-right:1px solid rgba(255,255,255,.15);
        min-width:0;
        text-align:left;
    }

    .desktop-login-card .feature-bar div:last-child{
        border-right:0;
    }

    .desktop-login-card .feature-bar b{
        grid-row:1/3;
        color:var(--gold);
        font-size:21px;
        line-height:1;
    }

    .desktop-login-card .feature-bar strong{
        color:var(--gold);
        font-size:11px;
        line-height:1.1;
        letter-spacing:.03em;
        white-space:nowrap;
    }

    .desktop-login-card .feature-bar span{
        color:rgba(255,255,255,.82);
        font-size:10px;
        line-height:1.15;
        white-space:nowrap;
    }

    .desktop-login-card .login-panel{
        display:block !important;
        position:relative !important;
        justify-self:center;
        align-self:center;
        width:min(380px,calc(100% - 42px)) !important;
        height:auto !important;
        margin:0 18px 0 0;
        padding:42px 30px 29px !important;
        border-radius:22px !important;
        overflow:hidden !important;
        border:1px solid rgba(255,255,255,.18) !important;
        background:
            radial-gradient(circle at 90% 11%,rgba(255,125,215,.18),transparent 31%),
            linear-gradient(158deg,rgba(123,75,174,.58),rgba(24,37,100,.76) 58%,rgba(4,34,92,.88)) !important;
        box-shadow:
            0 30px 66px rgba(0,0,0,.35),
            inset 0 1px 0 rgba(255,255,255,.18),
            inset 0 -1px 0 rgba(255,216,112,.06) !important;
        backdrop-filter:blur(20px);
        z-index:3;
    }

    .desktop-login-card .login-panel:before{
        display:block !important;
        content:"";
        position:absolute;
        inset:1px;
        border-radius:21px;
        border:1px solid rgba(255,255,255,.08);
        pointer-events:none;
    }

    .desktop-login-card .panel-glow{
        display:block !important;
        right:-72px;
        top:-70px;
        width:205px;
        height:205px;
        opacity:.9;
    }

    .desktop-login-card .member-icon{
        display:grid !important;
        width:84px;
        height:84px;
        margin:0 auto 20px;
        border-radius:50%;
        border:2px solid rgba(255,216,112,.92);
        color:#fff;
        font-size:34px;
        background:radial-gradient(circle at 65% 30%,rgba(255,255,255,.22),rgba(103,37,173,.34));
        box-shadow:0 0 29px rgba(255,216,112,.26),inset 0 0 20px rgba(255,255,255,.13);
    }

    .desktop-login-card .member-icon:after{
        inset:-8px;
        border-color:rgba(255,216,112,.18);
    }

    .desktop-login-card .login-panel h4{
        display:block !important;
        margin:0;
        text-align:center;
        color:var(--gold);
        font-family:Georgia,serif;
        font-size:clamp(28px,2.35vw,38px);
        line-height:1;
        text-shadow:0 6px 18px rgba(0,0,0,.38);
    }

    .desktop-login-card .login-panel > p{
        display:block !important;
        text-align:center;
        margin:8px 0 27px;
        color:rgba(255,255,255,.94);
        font-size:clamp(15px,1.25vw,19px);
        line-height:1.22;
        font-weight:700;
        text-shadow:0 5px 14px rgba(0,0,0,.25);
    }

    .desktop-login-card .login-form{
        position:relative !important;
        inset:auto !important;
        display:grid !important;
        width:100% !important;
        height:auto !important;
        gap:13px;
        z-index:2;
    }

    .desktop-login-card .login-error{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        width:100% !important;
        margin:0 0 14px !important;
        padding:10px 12px !important;
        border-radius:12px !important;
        font-size:13px !important;
        line-height:1.35;
        background:rgba(255,58,86,.22) !important;
        border:1px solid rgba(255,175,180,.50) !important;
        box-shadow:0 14px 26px rgba(0,0,0,.16) !important;
        backdrop-filter:blur(10px);
    }

    .desktop-login-card .field{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        display:block !important;
        width:100% !important;
        height:auto !important;
        margin:0 !important;
        z-index:2;
    }

    .desktop-login-card .field span{
        display:grid !important;
        place-items:center;
        position:absolute;
        left:16px !important;
        top:50% !important;
        transform:translateY(-50%) !important;
        width:25px;
        height:25px;
        color:rgba(255,255,255,.88) !important;
        font-size:18px !important;
        opacity:1 !important;
        z-index:3;
    }

    .desktop-login-card .field input{
        width:100% !important;
        height:50px !important;
        padding:0 50px 0 52px !important;
        border-radius:10px !important;
        border:1px solid rgba(255,255,255,.22) !important;
        outline:0;
        color:#fff !important;
        caret-color:var(--gold) !important;
        font-size:15px !important;
        font-weight:650 !important;
        letter-spacing:.01em;
        background:linear-gradient(135deg,rgba(255,255,255,.17),rgba(255,255,255,.075)) !important;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.17),0 10px 20px rgba(0,0,0,.09) !important;
    }

    .desktop-login-card .field input::placeholder{
        color:rgba(255,255,255,.74) !important;
    }

    .desktop-login-card .field input:focus{
        border-color:rgba(255,216,112,.85) !important;
        background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.095)) !important;
        box-shadow:0 0 0 3px rgba(255,216,112,.12),inset 0 1px 0 rgba(255,255,255,.20) !important;
    }

    .desktop-login-card .eye{
        display:grid !important;
        place-items:center;
        position:absolute !important;
        right:8px !important;
        top:50% !important;
        width:38px !important;
        height:38px !important;
        transform:translateY(-50%) !important;
        border:0 !important;
        border-radius:999px;
        color:rgba(255,255,255,.82) !important;
        background:transparent !important;
        box-shadow:none !important;
        cursor:pointer;
        z-index:4;
    }

    .desktop-login-card .eye i{
        opacity:1 !important;
        font-size:17px;
    }

    .desktop-login-card .eye:hover{
        color:var(--gold) !important;
        background:rgba(255,255,255,.08) !important;
    }

    .desktop-login-card .options{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        width:100% !important;
        height:auto !important;
        display:flex !important;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        margin:2px 0 7px !important;
        font-size:12px !important;
        z-index:2;
    }

    .desktop-login-card .options label{
        display:flex !important;
        align-items:center;
        width:auto !important;
        height:auto !important;
        gap:8px !important;
        color:#fff;
        cursor:pointer;
        white-space:nowrap;
    }

    .desktop-login-card .options input{
        opacity:1 !important;
        width:18px !important;
        height:18px !important;
        margin:0 !important;
        flex:0 0 auto;
        border:1px solid rgba(255,255,255,.24);
        border-radius:5px;
        background:linear-gradient(135deg,#ffe08a,#f2b33c) !important;
        box-shadow:0 6px 12px rgba(245,166,35,.22) !important;
        cursor:pointer;
        -webkit-appearance:none !important;
        appearance:none !important;
    }

    .desktop-login-card .options input:checked:after{
        content:"✓";
        display:grid;
        place-items:center;
        width:100%;
        height:100%;
        color:#fff;
        font-size:13px;
        font-weight:900;
        line-height:1;
    }

    .desktop-login-card .options span{
        color:#fff !important;
        text-shadow:0 4px 12px rgba(0,0,0,.25) !important;
    }

    .desktop-login-card .options a{
        display:inline-block !important;
        width:auto !important;
        height:auto !important;
        color:#fff !important;
        text-decoration:none;
        text-shadow:0 4px 12px rgba(0,0,0,.25) !important;
        white-space:nowrap;
    }

    .desktop-login-card .options a:hover{
        color:var(--gold) !important;
    }

    .desktop-login-card .submit-btn{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        width:100% !important;
        height:54px !important;
        display:flex !important;
        align-items:center;
        justify-content:center;
        gap:10px;
        border:1px solid rgba(255,255,255,.27) !important;
        border-radius:10px !important;
        color:#fff !important;
        background:linear-gradient(135deg,#ffe28a 0%,#f7c451 48%,#f0a42c 100%) !important;
        box-shadow:0 17px 33px rgba(245,166,35,.27),inset 0 1px 0 rgba(255,255,255,.48),inset 0 -1px 0 rgba(112,65,0,.14) !important;
        text-shadow:0 2px 8px rgba(45,25,77,.22) !important;
        font-size:16px !important;
        font-weight:900 !important;
        letter-spacing:.06em;
        cursor:pointer;
        overflow:hidden;
        z-index:2;
    }

    .desktop-login-card .submit-btn:before{
        display:block !important;
        content:"";
        position:absolute;
        inset:0;
        transform:translateX(-110%);
        background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
        transition:.55s ease;
    }

    .desktop-login-card .submit-btn:hover:before{
        transform:translateX(110%);
    }

    .desktop-login-card .submit-btn:hover{
        transform:translateY(-1px) !important;
        box-shadow:0 21px 42px rgba(245,166,35,.36),inset 0 1px 0 rgba(255,255,255,.56) !important;
    }

    .desktop-login-card .submit-btn span{
        color:#fff !important;
        margin:0;
        position:relative;
        z-index:1;
    }

    .desktop-login-card .separator{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        width:100% !important;
        height:auto !important;
        display:flex !important;
        align-items:center;
        gap:14px;
        opacity:1 !important;
        pointer-events:none;
        color:rgba(255,255,255,.86);
        font-size:13px;
        font-weight:800;
        z-index:2;
    }

    .desktop-login-card .separator:before,
    .desktop-login-card .separator:after{
        content:"";
        height:1px;
        flex:1;
        background:linear-gradient(90deg,transparent,rgba(255,255,255,.24));
    }

    .desktop-login-card .separator:after{
        background:linear-gradient(90deg,rgba(255,255,255,.24),transparent);
    }

    .desktop-login-card .home-link{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        width:100% !important;
        height:46px !important;
        display:flex !important;
        align-items:center;
        justify-content:center;
        gap:10px;
        border:1px solid rgba(171,93,255,.96) !important;
        border-radius:9px !important;
        color:#fff !important;
        background:linear-gradient(135deg,rgba(91,38,156,.22),rgba(8,35,92,.28)) !important;
        box-shadow:0 0 20px rgba(159,83,255,.14),inset 0 1px 0 rgba(255,255,255,.11) !important;
        text-shadow:0 4px 12px rgba(0,0,0,.24) !important;
        font-size:14px;
        font-weight:750;
        text-decoration:none;
        cursor:pointer;
        z-index:2;
    }

    .desktop-login-card .home-link i{
        opacity:1 !important;
        color:rgba(255,255,255,.94);
    }

    .desktop-login-card .home-link:hover{
        transform:translateY(-1px) !important;
        border-color:rgba(255,216,112,.86) !important;
        background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(8,35,92,.38)) !important;
    }

    .desktop-login-card .secure-note{
        display:block !important;
        position:relative;
        margin:21px 0 0;
        text-align:center;
        color:rgba(255,255,255,.72);
        font-size:12px;
        line-height:1.35;
        z-index:2;
    }

    .desktop-login-card .secure-note i{
        color:rgba(255,255,255,.78);
        margin-right:6px;
    }

    .bo-login > footer{
        display:none !important;
    }
}

/* Keep the complete desktop card inside short laptop/browser viewports. */
@media (min-width:761px){
    .bo-login{
        padding:20px 40px;
    }

    .desktop-login-card{
        width:min(1000px,calc(100vw - 80px),calc((100svh - 40px) * 1.65294));
    }

    .desktop-login-card .bo-hero{
        padding:48px 30px 24px;
    }

    .desktop-login-card .headline{
        transform:translateY(-40px);
    }

    .desktop-login-card .headline p{
        font-size:clamp(22px,1.8vw,30px);
    }

    .desktop-login-card .headline h1{
        font-size:clamp(40px,3.7vw,52px);
    }

    .desktop-login-card .headline h2{
        margin-top:9px;
        font-size:clamp(13px,1.05vw,17px);
    }

    .desktop-login-card .headline i{
        margin:10px auto;
    }

    .desktop-login-card .headline h3{
        font-size:clamp(17px,1.42vw,21px);
    }

    .desktop-login-card .team-stage{
        left:28px;
        right:14px;
        bottom:48px;
        height:300px;
    }

    .desktop-login-card .feature-bar{
        left:70px;
        right:66px;
        bottom:25px;
        padding:7px;
    }

    .desktop-login-card .login-panel{
        width:min(340px,calc(100% - 36px)) !important;
        margin-right:14px;
        padding:30px 26px 23px !important;
    }

    .desktop-login-card .member-icon{
        width:68px;
        height:68px;
        margin-bottom:15px;
        font-size:27px;
    }

    .desktop-login-card .login-panel h4{
        font-size:clamp(27px,2vw,32px);
    }

    .desktop-login-card .login-panel > p{
        margin:6px 0 18px;
        font-size:clamp(14px,1.05vw,16px);
    }

    .desktop-login-card .login-form{
        gap:10px;
    }

    .desktop-login-card .field input{
        height:46px !important;
    }

    .desktop-login-card .submit-btn{
        height:48px !important;
        font-size:15px !important;
    }

    .desktop-login-card .home-link{
        height:42px !important;
        font-size:13px;
    }

    .desktop-login-card .secure-note{
        margin-top:15px;
        font-size:11px;
    }
}

@media (min-width:761px) and (max-width:1040px){
    .bo-login{
        padding:28px 24px;
    }

    .desktop-login-card{
        width:min(940px,calc(100vw - 48px));
    }

    .desktop-login-card .bo-hero{
        padding:44px 24px 24px;
    }

    .desktop-login-card .headline{
        transform:translateY(-42px);
    }

    .desktop-login-card .team-stage{
        left:18px;
        right:10px;
        bottom:50px;
        height:295px;
    }

    .desktop-login-card .feature-bar{
        left:54px;
        right:52px;
        bottom:25px;
    }

    .desktop-login-card .login-panel{
        width:min(340px,calc(100% - 32px)) !important;
        margin-right:12px;
        padding:34px 24px 24px !important;
    }

    .desktop-login-card .member-icon{
        width:70px;
        height:70px;
        font-size:28px;
        margin-bottom:16px;
    }

    .desktop-login-card .login-panel > p{
        margin-bottom:20px;
    }

    .desktop-login-card .field input{
        height:46px !important;
    }

    .desktop-login-card .submit-btn{
        height:50px !important;
    }
}


/* Mobile exact mockup mode: keeps the same luxury login visual on phones while preserving the real PHP form. */
@media (max-width:760px){
    html,
    body{
        min-height:100%;
        background:#3c2e7b !important;
    }

    body{
        overflow-x:hidden;
        overflow-y:auto;
    }

    .bo-login{
        min-height:100vh;
        min-height:100svh;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:14px 10px;
        gap:0;
        background:#3c2e7b !important;
        overflow:visible;
    }

    .bo-login:before,
    .bo-login:after,
    .lux-grid,
    .lux-orb{
        display:none !important;
    }

    .desktop-login-card{
        display:block;
        position:relative;
        width:min(430px,calc(100vw - 20px));
        aspect-ratio:1060/1775;
        border-radius:30px;
        overflow:visible;
        background:url('../img/login-mobile-card.png') center/100% 100% no-repeat;
        box-shadow:0 24px 58px rgba(12,7,56,.22);
        isolation:isolate;
    }

    .desktop-login-card .bo-hero{
        display:none !important;
    }

    .desktop-login-card .login-panel{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        padding:0;
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
        backdrop-filter:none;
        overflow:visible;
        transform:none;
    }

    .desktop-login-card .login-panel:before,
    .desktop-login-card .panel-glow,
    .desktop-login-card .member-icon,
    .desktop-login-card .login-panel h4,
    .desktop-login-card .login-panel > p,
    .desktop-login-card .secure-note{
        display:none !important;
    }

    .desktop-login-card .login-form{
        position:absolute;
        inset:0;
        display:block;
        width:100%;
        height:100%;
    }

    .desktop-login-card .login-error{
        position:absolute;
        left:8.6%;
        top:31.8%;
        width:82.8%;
        margin:0;
        padding:8px 10px;
        border-radius:12px;
        font-size:clamp(11px,3.05vw,14px);
        line-height:1.28;
        text-align:center;
        background:rgba(255,58,86,.24);
        border:1px solid rgba(255,175,180,.50);
        backdrop-filter:blur(10px);
        z-index:4;
    }

    .desktop-login-card .field,
    .desktop-login-card .options,
    .desktop-login-card .submit-btn,
    .desktop-login-card .separator,
    .desktop-login-card .home-link{
        position:absolute;
        margin:0;
        z-index:3;
    }

    .desktop-login-card .field:nth-of-type(1){
        left:8.45%;
        top:38.10%;
        width:83.10%;
        height:8.05%;
    }

    .desktop-login-card .field:nth-of-type(2){
        left:8.45%;
        top:47.95%;
        width:83.10%;
        height:8.05%;
    }

    .desktop-login-card .field span{
        display:none !important;
    }

    .desktop-login-card .field input{
        width:100%;
        height:100%;
        padding:0 13.5% 0 14.8%;
        border:0;
        border-radius:16px;
        outline:0;
        color:#fff;
        caret-color:#fff;
        font-size:clamp(14px,4.25vw,18px);
        font-weight:700;
        background:transparent;
        box-shadow:none;
        -webkit-appearance:none;
        appearance:none;
    }

    .desktop-login-card .field input::placeholder{
        color:transparent;
    }

    .desktop-login-card .field input:focus{
        border:0;
        background:rgba(255,255,255,.045);
        box-shadow:0 0 0 2px rgba(255,215,106,.12);
    }

    .desktop-login-card .eye{
        right:1.7%;
        top:50%;
        width:14.8%;
        height:82%;
        transform:translateY(-50%);
        color:transparent;
        background:transparent;
        border:0;
        box-shadow:none;
        cursor:pointer;
    }

    .desktop-login-card .eye i{
        opacity:0;
    }

    .desktop-login-card .options{
        left:8.45%;
        top:58.70%;
        width:83.10%;
        height:5.10%;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:0;
        font-size:0;
    }

    .desktop-login-card .options label{
        width:45%;
        height:100%;
        display:flex;
        align-items:center;
        gap:0;
        cursor:pointer;
    }

    .desktop-login-card .options input{
        opacity:0;
        width:12.5%;
        height:72%;
        margin:0;
        cursor:pointer;
        -webkit-appearance:auto;
        appearance:auto;
    }

    .desktop-login-card .options span,
    .desktop-login-card .options a{
        color:transparent !important;
        text-shadow:none !important;
    }

    .desktop-login-card .options a{
        display:block;
        width:40%;
        height:100%;
        cursor:pointer;
    }

    .desktop-login-card .submit-btn{
        left:8.45%;
        top:67.45%;
        width:83.10%;
        height:8.20%;
        border:0;
        border-radius:18px;
        color:transparent;
        background:transparent;
        box-shadow:none;
        text-shadow:none;
        overflow:hidden;
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
    }

    .desktop-login-card .submit-btn:before{
        display:none;
    }

    .desktop-login-card .submit-btn:hover,
    .desktop-login-card .submit-btn:active{
        transform:none;
        box-shadow:inset 0 0 0 999px rgba(255,255,255,.045);
    }

    .desktop-login-card .submit-btn span{
        color:transparent;
    }

    .desktop-login-card .separator{
        left:8.45%;
        top:77.40%;
        width:83.10%;
        height:3.60%;
        opacity:0;
        pointer-events:none;
    }

    .desktop-login-card .home-link{
        left:8.45%;
        top:82.20%;
        width:83.10%;
        height:6.90%;
        border:0;
        border-radius:16px;
        color:transparent !important;
        background:transparent;
        box-shadow:none;
        text-shadow:none;
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
    }

    .desktop-login-card .home-link i{
        opacity:0;
    }

    .desktop-login-card .home-link:hover,
    .desktop-login-card .home-link:active{
        transform:none;
        border:0;
        background:rgba(255,255,255,.045);
    }

    .bo-login > footer{
        display:none;
    }
}

@media (max-width:380px){
    .desktop-login-card{
        width:min(390px,calc(100vw - 14px));
        border-radius:24px;
    }

    .bo-login{
        padding:10px 7px;
    }
}


/* Mobile polished code layout v2.4
   ใช้ HTML/CSS จริงแทนการวางภาพการ์ด เพื่อให้ขอบ Layout คม สวย และ Responsive กว่าเดิม */
@media (max-width:760px){
    html,
    body{
        min-height:100%;
        background:#3c2e7b !important;
    }

    body{
        overflow-x:hidden;
        overflow-y:auto;
        -webkit-font-smoothing:antialiased;
        text-rendering:geometricPrecision;
    }

    .bo-login{
        min-height:100vh;
        min-height:100svh;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:22px 16px;
        background:
            radial-gradient(circle at 72% 7%,rgba(255,178,92,.18),transparent 22%),
            radial-gradient(circle at 14% 88%,rgba(64,126,255,.22),transparent 30%),
            linear-gradient(145deg,#31236d 0%,#3c2e7b 54%,#30226c 100%) !important;
        overflow:visible;
    }

    .bo-login:before,
    .bo-login:after,
    .lux-grid,
    .lux-orb{
        display:none !important;
    }

    .desktop-login-card{
        display:flex !important;
        flex-direction:column;
        position:relative;
        width:min(460px,100%);
        aspect-ratio:auto !important;
        min-height:0;
        padding:26px 18px 22px;
        border-radius:36px;
        overflow:hidden;
        isolation:isolate;
        background:
            radial-gradient(circle at 88% 4%,rgba(255,180,95,.28),transparent 23%),
            radial-gradient(circle at 4% 88%,rgba(128,70,255,.32),transparent 28%),
            linear-gradient(150deg,rgba(8,11,62,.98) 0%,rgba(52,29,110,.96) 48%,rgba(4,36,89,.96) 100%) !important;
        border:1px solid rgba(255,216,112,.72);
        box-shadow:
            0 28px 70px rgba(10,5,45,.48),
            0 0 0 1px rgba(255,255,255,.06) inset,
            0 0 38px rgba(255,214,98,.13);
    }

    .desktop-login-card:before{
        content:"";
        position:absolute;
        inset:1px;
        border-radius:35px;
        pointer-events:none;
        border:1px solid rgba(255,255,255,.14);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
        z-index:-1;
    }

    .desktop-login-card:after{
        content:"";
        position:absolute;
        width:170px;
        height:170px;
        right:-62px;
        top:-62px;
        border-radius:999px;
        background:radial-gradient(circle,rgba(255,196,100,.44),rgba(255,134,218,.16) 38%,transparent 68%);
        filter:blur(3px);
        pointer-events:none;
        z-index:-1;
    }

    .desktop-login-card .bo-hero{
        display:block !important;
        position:relative;
        min-height:0 !important;
        height:auto;
        padding:0;
        margin:0;
        text-align:center;
    }

    .desktop-login-card .headline,
    .desktop-login-card .team-stage,
    .desktop-login-card .feature-bar{
        display:none !important;
    }

    .desktop-login-card .brand-card{
        display:flex !important;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        margin:0 0 20px;
        filter:drop-shadow(0 15px 22px rgba(0,0,0,.36));
    }

    .desktop-login-card .crest{
        width:82px;
        height:82px;
        border-radius:50%;
        display:grid;
        place-items:center;
        border:2px solid rgba(255,216,112,.92);
        background:
            radial-gradient(circle at 65% 30%,rgba(255,255,255,.18),transparent 34%),
            linear-gradient(145deg,rgba(93,37,147,.65),rgba(9,15,70,.86));
        color:var(--gold);
        font-family:Georgia,serif;
        font-size:48px;
        line-height:1;
        font-weight:800;
        box-shadow:
            0 0 24px rgba(255,215,106,.28),
            inset 0 0 18px rgba(255,255,255,.13);
    }

    .desktop-login-card .crest:before{
        content:"♛";
        position:absolute;
        top:-18px;
        left:0;
        right:0;
        inset:auto 0 auto 0;
        width:auto;
        height:auto;
        border:0;
        color:var(--gold);
        font-size:23px;
        line-height:1;
        text-align:center;
        text-shadow:0 6px 12px rgba(0,0,0,.35);
    }

    .desktop-login-card .crest:after{
        content:"";
        position:absolute;
        inset:-7px;
        border-radius:50%;
        border:1px solid rgba(255,216,112,.34);
    }

    .desktop-login-card .brand-text strong{
        display:block;
        margin-top:12px;
        font-family:Georgia,serif;
        font-size:28px;
        line-height:1;
        letter-spacing:.07em;
        color:var(--gold);
        text-shadow:0 6px 18px rgba(0,0,0,.48);
    }

    .desktop-login-card .brand-text span{
        display:block;
        margin-top:5px;
        font-size:10px;
        letter-spacing:.18em;
        text-transform:uppercase;
        color:rgba(255,255,255,.86);
    }

    .desktop-login-card .login-panel{
        display:block !important;
        position:relative !important;
        inset:auto !important;
        width:100% !important;
        height:auto !important;
        padding:29px 22px 24px !important;
        border-radius:28px !important;
        overflow:hidden !important;
        border:1px solid rgba(255,255,255,.20) !important;
        background:
            radial-gradient(circle at 90% 12%,rgba(174,75,255,.22),transparent 32%),
            linear-gradient(160deg,rgba(78,52,142,.72),rgba(12,19,80,.80) 58%,rgba(3,34,87,.84)) !important;
        box-shadow:
            0 24px 56px rgba(0,0,0,.26),
            inset 0 1px 0 rgba(255,255,255,.20),
            inset 0 -1px 0 rgba(255,216,112,.08) !important;
        backdrop-filter:blur(18px);
    }

    .desktop-login-card .login-panel:before{
        display:block !important;
        content:"";
        position:absolute;
        inset:1px;
        border-radius:27px;
        border:1px solid rgba(255,255,255,.08);
        pointer-events:none;
    }

    .desktop-login-card .panel-glow,
    .desktop-login-card .member-icon{
        display:none !important;
    }

    .desktop-login-card .login-panel h4{
        display:block !important;
        position:relative;
        margin:0;
        text-align:center;
        color:var(--gold);
        font-family:Georgia,serif;
        font-size:clamp(35px,9.8vw,49px);
        line-height:1.05;
        letter-spacing:.01em;
        text-shadow:0 7px 18px rgba(0,0,0,.42);
    }

    .desktop-login-card .login-panel > p{
        display:block !important;
        position:relative;
        text-align:center;
        margin:8px 0 26px;
        font-size:clamp(19px,5.2vw,24px);
        line-height:1.28;
        color:rgba(255,255,255,.94);
        text-shadow:0 5px 16px rgba(0,0,0,.30);
    }

    .desktop-login-card .login-form{
        position:relative !important;
        inset:auto !important;
        display:grid !important;
        width:100% !important;
        height:auto !important;
        gap:14px;
        z-index:2;
    }

    .desktop-login-card .login-error{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        width:100% !important;
        margin:0 0 15px !important;
        padding:11px 13px !important;
        border-radius:14px !important;
        font-size:14px !important;
        line-height:1.35;
        background:rgba(255,58,86,.22) !important;
        border:1px solid rgba(255,175,180,.50) !important;
        box-shadow:0 14px 26px rgba(0,0,0,.16) !important;
        backdrop-filter:blur(10px);
    }

    .desktop-login-card .field{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        display:block !important;
        width:100% !important;
        height:auto !important;
        margin:0 !important;
        z-index:2;
    }

    .desktop-login-card .field span{
        display:grid !important;
        place-items:center;
        position:absolute;
        left:18px !important;
        top:50% !important;
        transform:translateY(-50%) !important;
        width:30px;
        height:30px;
        color:rgba(255,255,255,.92) !important;
        font-size:21px !important;
        opacity:1 !important;
        z-index:3;
    }

    .desktop-login-card .field input{
        width:100% !important;
        height:62px !important;
        padding:0 58px 0 62px !important;
        border-radius:15px !important;
        border:1px solid rgba(255,255,255,.22) !important;
        outline:0;
        color:#fff !important;
        caret-color:var(--gold) !important;
        font-size:17px !important;
        font-weight:650 !important;
        letter-spacing:.01em;
        background:linear-gradient(135deg,rgba(255,255,255,.17),rgba(255,255,255,.075)) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.18),
            0 12px 24px rgba(0,0,0,.10) !important;
        -webkit-appearance:none;
        appearance:none;
    }

    .desktop-login-card .field input::placeholder{
        color:rgba(255,255,255,.76) !important;
    }

    .desktop-login-card .field input:focus{
        border-color:rgba(255,216,112,.88) !important;
        background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.095)) !important;
        box-shadow:
            0 0 0 4px rgba(255,216,112,.13),
            inset 0 1px 0 rgba(255,255,255,.22),
            0 12px 24px rgba(0,0,0,.10) !important;
    }

    .desktop-login-card .eye{
        display:grid !important;
        place-items:center;
        position:absolute !important;
        right:11px !important;
        top:50% !important;
        width:44px !important;
        height:44px !important;
        transform:translateY(-50%) !important;
        border:0 !important;
        border-radius:999px;
        background:transparent !important;
        color:rgba(255,255,255,.88) !important;
        cursor:pointer;
        box-shadow:none !important;
        -webkit-tap-highlight-color:transparent;
        z-index:4;
    }

    .desktop-login-card .eye i{
        opacity:1 !important;
        font-size:20px;
    }

    .desktop-login-card .eye:active,
    .desktop-login-card .eye:hover{
        color:var(--gold) !important;
        background:rgba(255,255,255,.08) !important;
    }

    .desktop-login-card .options{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        width:100% !important;
        height:auto !important;
        display:flex !important;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        margin:2px 0 8px !important;
        font-size:15px !important;
        z-index:2;
    }

    .desktop-login-card .options label{
        display:flex !important;
        align-items:center;
        width:auto !important;
        height:auto !important;
        gap:10px !important;
        color:#fff;
        cursor:pointer;
        white-space:nowrap;
    }

    .desktop-login-card .options input{
        opacity:1 !important;
        width:23px !important;
        height:23px !important;
        margin:0 !important;
        flex:0 0 auto;
        border:1px solid rgba(255,255,255,.24);
        border-radius:7px;
        background:linear-gradient(135deg,#ffe08a,#f2b33c) !important;
        box-shadow:0 8px 17px rgba(245,166,35,.24) !important;
        cursor:pointer;
        -webkit-appearance:none !important;
        appearance:none !important;
    }

    .desktop-login-card .options input:checked:after{
        content:"✓";
        display:grid;
        place-items:center;
        width:100%;
        height:100%;
        color:#fff;
        font-size:16px;
        font-weight:900;
        line-height:1;
    }

    .desktop-login-card .options span{
        color:#fff !important;
        text-shadow:0 4px 12px rgba(0,0,0,.25) !important;
    }

    .desktop-login-card .options a{
        display:inline-block !important;
        width:auto !important;
        height:auto !important;
        color:var(--gold) !important;
        text-decoration:none;
        text-shadow:0 4px 12px rgba(0,0,0,.25) !important;
        white-space:nowrap;
    }

    .desktop-login-card .options a:hover{
        color:#fff !important;
    }

    .desktop-login-card .submit-btn{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        width:100% !important;
        height:64px !important;
        display:flex !important;
        align-items:center;
        justify-content:center;
        gap:12px;
        border:1px solid rgba(255,255,255,.28) !important;
        border-radius:15px !important;
        color:#17144d !important;
        background:linear-gradient(135deg,#ffe28a 0%,#f7c451 48%,#f0a42c 100%) !important;
        box-shadow:
            0 18px 36px rgba(245,166,35,.30),
            inset 0 1px 0 rgba(255,255,255,.52),
            inset 0 -1px 0 rgba(112,65,0,.14) !important;
        text-shadow:none !important;
        font-size:20px !important;
        font-weight:900 !important;
        letter-spacing:.06em;
        cursor:pointer;
        overflow:hidden;
        -webkit-tap-highlight-color:transparent;
        z-index:2;
    }

    .desktop-login-card .submit-btn:before{
        display:block !important;
        content:"";
        position:absolute;
        inset:0;
        transform:translateX(-110%);
        background:linear-gradient(90deg,transparent,rgba(255,255,255,.40),transparent);
        transition:.55s ease;
    }

    .desktop-login-card .submit-btn:hover:before,
    .desktop-login-card .submit-btn:active:before{
        transform:translateX(110%);
    }

    .desktop-login-card .submit-btn:hover,
    .desktop-login-card .submit-btn:active{
        transform:translateY(-1px) !important;
        box-shadow:
            0 22px 42px rgba(245,166,35,.38),
            inset 0 1px 0 rgba(255,255,255,.58) !important;
    }

    .desktop-login-card .submit-btn span{
        color:#17144d !important;
        margin:0;
        position:relative;
        z-index:1;
    }

    .desktop-login-card .separator{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        width:100% !important;
        height:auto !important;
        display:flex !important;
        align-items:center;
        gap:16px;
        opacity:1 !important;
        pointer-events:none;
        color:rgba(255,255,255,.86);
        font-size:17px;
        font-weight:800;
        z-index:2;
    }

    .desktop-login-card .separator:before,
    .desktop-login-card .separator:after{
        content:"";
        height:1px;
        flex:1;
        background:linear-gradient(90deg,transparent,rgba(255,255,255,.26));
    }

    .desktop-login-card .separator:after{
        background:linear-gradient(90deg,rgba(255,255,255,.26),transparent);
    }

    .desktop-login-card .home-link{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        width:100% !important;
        height:59px !important;
        display:flex !important;
        align-items:center;
        justify-content:center;
        gap:12px;
        border:1px solid rgba(171,93,255,.96) !important;
        border-radius:15px !important;
        color:#fff !important;
        background:linear-gradient(135deg,rgba(91,38,156,.28),rgba(8,35,92,.32)) !important;
        box-shadow:0 0 22px rgba(159,83,255,.16),inset 0 1px 0 rgba(255,255,255,.12) !important;
        text-shadow:0 4px 12px rgba(0,0,0,.25) !important;
        font-size:18px;
        font-weight:750;
        text-decoration:none;
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
        z-index:2;
    }

    .desktop-login-card .home-link i{
        opacity:1 !important;
        color:rgba(255,255,255,.94);
    }

    .desktop-login-card .home-link:hover,
    .desktop-login-card .home-link:active{
        transform:translateY(-1px) !important;
        border-color:rgba(255,216,112,.86) !important;
        background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(8,35,92,.38)) !important;
    }

    .desktop-login-card .secure-note{
        display:block !important;
        position:relative;
        margin:22px 0 0;
        text-align:center;
        color:rgba(255,255,255,.64);
        font-size:14px;
        line-height:1.35;
        z-index:2;
    }

    .desktop-login-card .secure-note i{
        color:rgba(255,255,255,.70);
        margin-right:7px;
    }

    .bo-login > footer{
        display:none !important;
    }
}

@media (max-width:390px){
    .bo-login{
        padding:14px 10px;
        align-items:flex-start;
    }

    .desktop-login-card{
        width:100%;
        border-radius:30px;
        padding:22px 14px 18px;
    }

    .desktop-login-card:before{
        border-radius:29px;
    }

    .desktop-login-card .crest{
        width:72px;
        height:72px;
        font-size:42px;
    }

    .desktop-login-card .brand-text strong{
        font-size:24px;
    }

    .desktop-login-card .login-panel{
        padding:25px 16px 20px !important;
        border-radius:24px !important;
    }

    .desktop-login-card .login-panel:before{
        border-radius:23px;
    }

    .desktop-login-card .field input{
        height:58px !important;
        padding-left:55px !important;
        padding-right:54px !important;
        font-size:16px !important;
    }

    .desktop-login-card .field span{
        left:15px !important;
        font-size:19px !important;
    }

    .desktop-login-card .options{
        font-size:13.2px !important;
        gap:8px;
    }

    .desktop-login-card .options input{
        width:21px !important;
        height:21px !important;
    }

    .desktop-login-card .submit-btn{
        height:60px !important;
        font-size:18px !important;
    }

    .desktop-login-card .home-link{
        height:56px !important;
        font-size:16px !important;
    }

    .desktop-login-card .secure-note{
        font-size:12.5px;
    }
}


/* Desktop left hero balance fix v2.6
   แก้ฝั่งซ้ายให้ข้อความกับรูปทีมไม่ซ้อนกัน และไม่ใช้ภาพพื้นหลังที่มีข้อความฝังอยู่ */
@media (min-width:761px){
    .desktop-login-card{
        grid-template-columns:1.62fr 1fr !important;
        background:
            radial-gradient(circle at 85% 7%,rgba(255,142,206,.26),transparent 29%),
            radial-gradient(circle at 24% 82%,rgba(140,68,255,.28),transparent 36%),
            linear-gradient(105deg,#041044 0%,#071f67 43%,#4d2a91 100%) !important;
    }

    .desktop-login-card:before{
        z-index:0 !important;
        background:
            radial-gradient(circle at 18% 54%,rgba(90,133,255,.22),transparent 30%),
            radial-gradient(circle at 70% 38%,rgba(255,203,102,.10),transparent 28%),
            linear-gradient(90deg,rgba(0,0,0,.12),rgba(255,255,255,.02)),
            repeating-linear-gradient(123deg,rgba(255,255,255,.05) 0 1px,transparent 1px 155px) !important;
    }

    .desktop-login-card .bo-hero{
        display:block !important;
        position:relative !important;
        height:100% !important;
        min-height:0 !important;
        padding:46px 30px 26px !important;
        text-align:center !important;
        overflow:hidden !important;
        background:
            radial-gradient(circle at 50% 66%,rgba(100,60,190,.30),transparent 34%),
            radial-gradient(circle at 10% 68%,rgba(0,156,255,.15),transparent 29%),
            linear-gradient(180deg,rgba(4,12,55,.18),rgba(4,8,48,.42) 70%,rgba(10,7,50,.78)) !important;
        z-index:1 !important;
    }

    .desktop-login-card .bo-hero:before{
        content:"";
        position:absolute;
        inset:0;
        pointer-events:none;
        background:
            linear-gradient(180deg,rgba(2,8,43,.08),rgba(2,8,43,.03) 45%,rgba(7,8,48,.62)),
            radial-gradient(ellipse at center bottom,rgba(255,216,112,.16),transparent 42%);
        z-index:0;
    }

    .desktop-login-card .headline{
        position:relative !important;
        z-index:4 !important;
        width:100% !important;
        max-width:690px !important;
        margin:0 auto !important;
        padding-top:0 !important;
        transform:none !important;
        filter:drop-shadow(0 16px 20px rgba(0,0,0,.28));
    }

    .desktop-login-card .headline p{
        margin:0 0 4px !important;
        font-size:clamp(27px,2.6vw,38px) !important;
        line-height:1.05 !important;
        color:rgba(255,255,255,.96) !important;
    }

    .desktop-login-card .headline h1{
        margin:0 auto !important;
        font-size:clamp(50px,5.05vw,76px) !important;
        line-height:.92 !important;
        letter-spacing:.035em !important;
        color:var(--gold) !important;
        white-space:normal !important;
        text-wrap:balance;
        text-shadow:0 8px 26px rgba(0,0,0,.45),0 0 14px rgba(255,217,109,.16) !important;
    }

    .desktop-login-card .headline h2{
        margin:14px 0 10px !important;
        font-size:clamp(15px,1.55vw,22px) !important;
        line-height:1.22 !important;
        letter-spacing:.06em !important;
        color:#fff !important;
        font-weight:800 !important;
    }

    .desktop-login-card .headline i{
        width:min(360px,58%) !important;
        height:2px !important;
        margin:0 auto 18px !important;
        background:linear-gradient(90deg,transparent,rgba(255,216,112,.95),transparent) !important;
    }

    .desktop-login-card .headline i:after{
        content:"";
        display:block;
        width:14px;
        height:14px;
        margin:-6px auto 0;
        transform:rotate(45deg);
        background:linear-gradient(135deg,#fff0a5,#f5b742);
        box-shadow:0 0 18px rgba(255,216,112,.42);
    }

    .desktop-login-card .headline h3{
        margin:0 auto !important;
        max-width:470px !important;
        font-size:clamp(19px,1.9vw,27px) !important;
        line-height:1.28 !important;
        font-weight:850 !important;
        color:#fff !important;
        text-shadow:0 7px 22px rgba(0,0,0,.42) !important;
    }

    .desktop-login-card .team-stage{
        display:flex !important;
        align-items:flex-end !important;
        justify-content:center !important;
        position:absolute !important;
        left:12px !important;
        right:12px !important;
        bottom:86px !important;
        width:auto !important;
        height:255px !important;
        border-radius:0 !important;
        overflow:hidden !important;
        z-index:3 !important;
        -webkit-mask-image:linear-gradient(to top,transparent 0,#000 13%,#000 94%,transparent 100%) !important;
        mask-image:linear-gradient(to top,transparent 0,#000 13%,#000 94%,transparent 100%) !important;
        filter:drop-shadow(0 28px 34px rgba(0,0,0,.34));
    }

    .desktop-login-card .team-stage:before{
        content:"" !important;
        position:absolute !important;
        left:7% !important;
        right:7% !important;
        bottom:4px !important;
        height:56px !important;
        border-radius:50% !important;
        background:radial-gradient(ellipse at center,rgba(255,216,112,.26),transparent 70%) !important;
        filter:blur(12px) !important;
        z-index:-1 !important;
    }

    .desktop-login-card .team-stage:after{
        content:"" !important;
        position:absolute !important;
        left:8% !important;
        right:8% !important;
        bottom:18px !important;
        height:2px !important;
        border-radius:999px !important;
        background:linear-gradient(90deg,transparent,rgba(255,216,112,.86),rgba(173,91,255,.70),transparent) !important;
        filter:blur(.2px) !important;
        z-index:2 !important;
    }

    .desktop-login-card .team-stage img{
        display:block !important;
        width:min(98%,760px) !important;
        height:auto !important;
        max-width:none !important;
        object-fit:contain !important;
        object-position:center bottom !important;
        transform:translateY(2px) !important;
        filter:drop-shadow(0 30px 38px rgba(0,0,0,.34));
    }

    .desktop-login-card .feature-bar{
        left:34px !important;
        right:34px !important;
        bottom:28px !important;
        width:auto !important;
        padding:13px 12px !important;
        border-radius:16px !important;
        border:1px solid rgba(255,216,112,.28) !important;
        background:linear-gradient(135deg,rgba(8,13,60,.84),rgba(20,20,82,.78)) !important;
        box-shadow:0 22px 42px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.12) !important;
        z-index:5 !important;
    }

    .desktop-login-card .feature-bar div{
        grid-template-columns:36px 1fr !important;
        padding:0 13px !important;
        gap:0 10px !important;
    }

    .desktop-login-card .feature-bar b{
        font-size:28px !important;
    }

    .desktop-login-card .feature-bar strong{
        font-size:14px !important;
        line-height:1.05 !important;
    }

    .desktop-login-card .feature-bar span{
        font-size:12px !important;
        line-height:1.15 !important;
    }
}

@media (min-width:761px) and (max-width:1040px){
    .desktop-login-card .bo-hero{
        padding:34px 18px 22px !important;
    }

    .desktop-login-card .headline h1{
        font-size:clamp(44px,5.1vw,58px) !important;
    }

    .desktop-login-card .headline h2{
        font-size:clamp(13px,1.55vw,18px) !important;
        margin-top:10px !important;
    }

    .desktop-login-card .headline h3{
        font-size:clamp(17px,1.9vw,22px) !important;
        max-width:410px !important;
    }

    .desktop-login-card .team-stage{
        left:8px !important;
        right:8px !important;
        bottom:77px !important;
        height:220px !important;
    }

    .desktop-login-card .team-stage img{
        width:min(104%,660px) !important;
    }

    .desktop-login-card .feature-bar{
        left:18px !important;
        right:18px !important;
        bottom:22px !important;
        padding:10px 8px !important;
    }

    .desktop-login-card .feature-bar div{
        grid-template-columns:28px 1fr !important;
        padding:0 8px !important;
        gap:0 7px !important;
    }

    .desktop-login-card .feature-bar b{font-size:22px !important;}
    .desktop-login-card .feature-bar strong{font-size:11px !important;}
    .desktop-login-card .feature-bar span{font-size:10px !important;}
}


/* Desktop left image centering fix v2.7
   แก้รูปนักธุรกิจฝั่งซ้ายให้กึ่งกลาง ไม่โดน transform เดิมดึงไปทางซ้าย */
@media (min-width:761px){
    .desktop-login-card .team-stage{
        left:34px !important;
        right:34px !important;
        bottom:54px !important;
        width:auto !important;
        height:295px !important;
        transform:none !important;
        overflow:visible !important;
        border-radius:0 !important;
        -webkit-mask-image:none !important;
        mask-image:none !important;
    }

    .desktop-login-card .team-stage:before{
        display:none !important;
    }

    .desktop-login-card .team-stage img{
        width:100% !important;
        height:100% !important;
        max-width:none !important;
        display:block !important;
        object-fit:contain !important;
        object-position:center bottom !important;
        transform:none !important;
    }
}

/* Responsive desktop sizing v2.8 - final overrides. */
@media (min-width:761px){
    .bo-login{
        padding:20px 40px !important;
    }

    .desktop-login-card{
        width:min(1000px,calc(100vw - 80px),calc((100svh - 40px) * 1.65294)) !important;
    }

    .desktop-login-card .bo-hero{
        padding:48px 30px 24px !important;
    }

    .desktop-login-card .headline{
        transform:translateY(-40px) !important;
    }

    .desktop-login-card .headline p{font-size:clamp(22px,1.8vw,30px) !important;}
    .desktop-login-card .headline h1{font-size:clamp(40px,3.7vw,52px) !important;}
    .desktop-login-card .headline h2{margin-top:9px !important;font-size:clamp(13px,1.05vw,17px) !important;}
    .desktop-login-card .headline i{margin:10px auto !important;}
    .desktop-login-card .headline h3{font-size:clamp(17px,1.42vw,21px) !important;}

    .desktop-login-card .team-stage{
        left:28px !important;
        right:14px !important;
        bottom:48px !important;
        height:300px !important;
    }

    .desktop-login-card .feature-bar{
        left:70px !important;
        right:66px !important;
        bottom:25px !important;
        padding:7px !important;
        border-radius:10px !important;
    }

    .desktop-login-card .feature-bar div{grid-template-columns:28px 1fr !important;padding:0 9px !important;gap:0 7px !important;}
    .desktop-login-card .feature-bar b{font-size:21px !important;}
    .desktop-login-card .feature-bar strong{font-size:11px !important;}
    .desktop-login-card .feature-bar span{font-size:10px !important;}

    .desktop-login-card .login-panel{
        width:min(340px,calc(100% - 36px)) !important;
        margin-right:14px !important;
        padding:30px 26px 23px !important;
    }

    .desktop-login-card .member-icon{width:68px !important;height:68px !important;margin-bottom:15px !important;font-size:27px !important;}
    .desktop-login-card .login-panel h4{font-size:clamp(27px,2vw,32px) !important;}
    .desktop-login-card .login-panel > p{margin:6px 0 18px !important;font-size:clamp(14px,1.05vw,16px) !important;}
    .desktop-login-card .login-form{gap:10px !important;}
    .desktop-login-card .field input{height:46px !important;}
    .desktop-login-card .submit-btn{height:48px !important;font-size:15px !important;}
    .desktop-login-card .home-link{height:42px !important;font-size:13px !important;}
    .desktop-login-card .secure-note{margin-top:15px !important;font-size:11px !important;}
}

@media (min-width:761px) and (max-width:1040px){
    .desktop-login-card .team-stage{
        left:26px !important;
        right:26px !important;
        bottom:52px !important;
        height:285px !important;
    }
}

@media (min-width:761px) and (max-width:900px){
    .desktop-login-card .team-stage{
        left:22px !important;
        right:22px !important;
        bottom:52px !important;
        height:270px !important;
    }

    .desktop-login-card .feature-bar{
        left:30px !important;
        right:30px !important;
    }
}

/* Final viewport-fit guard. Keep this block last. */
@media (min-width:761px){
    .bo-login{padding:20px 40px !important;}
    .desktop-login-card{width:min(1000px,calc(100vw - 80px),calc((100svh - 40px) * 1.65294)) !important;}
    .desktop-login-card .bo-hero{padding:48px 30px 24px !important;}
    .desktop-login-card .headline{transform:translateY(-40px) !important;}
    .desktop-login-card .headline p{font-size:clamp(22px,1.8vw,30px) !important;}
    .desktop-login-card .headline h1{font-size:clamp(40px,3.7vw,52px) !important;}
    .desktop-login-card .headline h2{margin-top:9px !important;font-size:clamp(13px,1.05vw,17px) !important;}
    .desktop-login-card .headline i{margin:10px auto !important;}
    .desktop-login-card .headline h3{font-size:clamp(17px,1.42vw,21px) !important;}
    .desktop-login-card .team-stage{left:28px !important;right:14px !important;bottom:48px !important;height:300px !important;}
    .desktop-login-card .feature-bar{left:70px !important;right:66px !important;bottom:25px !important;padding:7px !important;border-radius:10px !important;}
    .desktop-login-card .feature-bar div{grid-template-columns:28px 1fr !important;padding:0 9px !important;gap:0 7px !important;}
    .desktop-login-card .feature-bar b{font-size:21px !important;}
    .desktop-login-card .feature-bar strong{font-size:11px !important;}
    .desktop-login-card .feature-bar span{font-size:10px !important;}
    .desktop-login-card .login-panel{width:min(340px,calc(100% - 36px)) !important;margin-right:14px !important;padding:30px 26px 23px !important;}
    .desktop-login-card .member-icon{width:68px !important;height:68px !important;margin-bottom:15px !important;font-size:27px !important;}
    .desktop-login-card .login-panel h4{font-size:clamp(27px,2vw,32px) !important;}
    .desktop-login-card .login-panel > p{margin:6px 0 18px !important;font-size:clamp(14px,1.05vw,16px) !important;}
    .desktop-login-card .login-form{gap:10px !important;}
    .desktop-login-card .field input{height:46px !important;}
    .desktop-login-card .submit-btn{height:48px !important;font-size:15px !important;}
    .desktop-login-card .home-link{height:42px !important;font-size:13px !important;}
    .desktop-login-card .secure-note{margin-top:15px !important;font-size:11px !important;}
}