@charset "UTF-8";

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}

/* ===== Full-page background ===== */
.login-page{position:relative;width:100%;height:100vh;display:flex;align-items:center;justify-content:center}
.login-bg{position:absolute;inset:0;z-index:0;background:linear-gradient(135deg,#0f0c29 0%,#1a1a3e 40%,#24243e 100%);overflow:hidden}
.login-bg::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(255,183,77,.15) 0%,transparent 70%);top:-120px;right:-80px;animation:float 8s ease-in-out infinite}
.login-bg::after{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(103,58,183,.12) 0%,transparent 70%);bottom:-100px;left:-60px;animation:float 10s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-30px) scale(1.05)}}

/* ===== Glass card ===== */
.login-card{position:relative;z-index:1;width:420px;max-width:92vw;padding:48px 40px 36px;border-radius:20px;background:rgba(255,255,255,.06);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px rgba(0,0,0,.3);animation:slideUp .6s cubic-bezier(.16,1,.3,1)}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* ===== Brand area ===== */
.login-brand{text-align:center;margin-bottom:32px}
.login-logo{width:80px;height:80px;border-radius:18px;box-shadow:0 4px 20px rgba(255,183,77,.3);border:2px solid rgba(255,183,77,.4);transition:transform .3s}
.login-logo:hover{transform:scale(1.08)}
.login-title{margin:16px 0 4px;font-size:26px;font-weight:700;color:#fff;letter-spacing:2px}
.login-subtitle{margin:0;font-size:13px;color:rgba(255,255,255,.45);letter-spacing:1px;font-weight:400}

/* ===== Form groups ===== */
.form-group{margin-bottom:18px}
.input-wrapper{position:relative}
.input-wrapper i.layui-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:18px;color:rgba(255,255,255,.4);z-index:2;pointer-events:none;transition:color .25s}
.input-wrapper input.layui-input{width:100%;height:48px;padding:0 16px 0 48px;font-size:14px;color:#fff;letter-spacing:.5px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:12px;outline:none;transition:all .25s;-webkit-text-fill-color:#fff!important}
.input-wrapper input.layui-input::placeholder{color:rgba(255,255,255,.35)}
.input-wrapper input.layui-input:focus{border-color:rgba(255,183,77,.6);background:rgba(255,255,255,.1);box-shadow:0 0 0 3px rgba(255,183,77,.12)}
.input-wrapper input.layui-input:focus~i.layui-icon,.input-wrapper input.layui-input:focus+i.layui-icon{color:rgba(255,183,77,.9)}
/* focus icon — sibling + parent selector workaround */
.input-wrapper:focus-within i.layui-icon{color:rgba(255,183,77,.9)}

/* Autofill hack for dark inputs */
.input-wrapper input:-webkit-autofill,
.input-wrapper input:-webkit-autofill:hover,
.input-wrapper input:-webkit-autofill:focus,
.input-wrapper input:-webkit-autofill:active{-webkit-text-fill-color:#fff!important;-webkit-box-shadow:0 0 0 1000px rgba(30,30,60,1) inset!important;transition:background-color 9999s ease-out,color 9999s ease-out}

/* ===== Captcha row ===== */
.captcha-row{display:flex;gap:10px;align-items:center}
.captcha-input{position:relative;flex:1}
.captcha-input i.layui-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:18px;color:rgba(255,255,255,.4);z-index:2;pointer-events:none}
.captcha-input input.layui-input{width:100%;height:48px;padding:0 16px 0 48px;font-size:14px;color:#fff;letter-spacing:1px;text-transform:uppercase;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:12px;outline:none;transition:all .25s;-webkit-text-fill-color:#fff!important}
.captcha-input input.layui-input::placeholder{color:rgba(255,255,255,.35);text-transform:none}
.captcha-input input.layui-input:focus{border-color:rgba(255,183,77,.6);background:rgba(255,255,255,.1);box-shadow:0 0 0 3px rgba(255,183,77,.12)}
.captcha-input:focus-within i.layui-icon{color:rgba(255,183,77,.9)}
.captcha-img{flex-shrink:0;cursor:pointer;border-radius:10px;overflow:hidden;display:flex;align-items:center}
.captcha-img img{width:110px;height:48px;border-radius:10px;display:block}

/* ===== Submit button ===== */
.login-btn{width:100%;height:50px!important;font-size:16px!important;font-weight:600!important;letter-spacing:2px!important;border:none!important;border-radius:12px!important;color:#1a1a2e!important;background:linear-gradient(135deg,#ffb74d 0%,#ffa726 50%,#ff9800 100%)!important;box-shadow:0 4px 15px rgba(255,152,0,.35)!important;cursor:pointer;transition:all .3s!important}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,152,0,.45)!important}
.login-btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(255,152,0,.3)!important}
.login-btn.layui-disabled{opacity:.6;cursor:not-allowed;transform:none!important}

/* ===== Footer ===== */
.login-footer{position:fixed;bottom:0;left:0;width:100%;text-align:center;padding:14px 20px;color:rgba(255,255,255,.3);font-size:12px;z-index:1;letter-spacing:.5px}
.login-footer a{color:rgba(255,255,255,.4);text-decoration:none;transition:color .2s}
.login-footer a:hover{color:rgba(255,255,255,.7)}
.login-footer .sep{margin:0 8px;opacity:.4}

/* ===== Mobile responsive ===== */
@media(max-width:480px){
    .login-card{padding:36px 24px 28px;border-radius:16px}
    .login-logo{width:64px;height:64px;border-radius:14px}
    .login-title{font-size:22px}
    .login-brand{margin-bottom:24px}
}