*{box-sizing:border-box}
body{
    margin:0;min-height:100vh;font-family:'Segoe UI',Arial;
    background:linear-gradient(rgba(15,32,39,.88),rgba(44,83,100,.88)),
    url("../assets/img/bg-mpk.jpg") center/cover no-repeat;
    display:flex;justify-content:center;align-items:center;
}
.login-box{
    width:460px;background:#fff;padding:36px 34px;border-radius:16px;
    box-shadow:0 25px 50px rgba(0,0,0,.4);
}
.logo{text-align:center;margin-bottom:15px}
.logo img{width:95px}
h3{text-align:center;margin:10px 0 25px;color:#1f3d4d}
label{font-size:14px;font-weight:600}
input{
    width:100%;padding:13px;margin-top:8px;border-radius:10px;
    border:1px solid #ccc;font-size:14px;
}
.drag-zone{
    border:2px dashed #2c5364;border-radius:12px;
    padding:15px;min-height:55px;text-align:center;
    font-size:18px;font-weight:bold;letter-spacing:6px;margin-top:10px;
}
.puzzle-drag{text-align:center;margin-top:12px}
.drag-item{
    display:inline-block;padding:12px 18px;background:#edf2f7;
    border-radius:10px;margin:6px;cursor:grab;font-weight:bold;
}
.btn{
    width:100%;padding:14px;border:none;border-radius:40px;
    font-size:15px;cursor:pointer;margin-top:14px;
}
.btn-login{background:linear-gradient(135deg,#2c5364,#0f2027);color:#fff}
.btn-reset{background:#eaeaea}
.btn-ai{background:linear-gradient(135deg,#16a085,#0e6655);color:#fff}
.info{
    margin-top:25px;padding:16px;border-radius:12px;
    background:#f1f5f8;text-align:center;font-size:13px;
}
.ai-popup{
    position:fixed;inset:0;background:rgba(0,0,0,.6);
    display:none;justify-content:center;align-items:center;z-index:999;
}
.ai-card{
    width:90%;max-width:420px;background:#fff;
    padding:20px;border-radius:14px;
}
.ai-chat{min-height:120px;font-size:14px;margin-bottom:10px}
.ai-chat p{margin:6px 0}
.ai-note{font-size:11px;color:#666}
@media(max-width:480px){
    .login-box{width:92%;padding:26px}
}
.get-code-tip{
font-size:13px;
color:#0a3b4a;
margin-top:10px;
font-weight:600;
}

.login-help{
font-size:12px;
color:#666;
margin-top:6px;
}

.login-help a{
color:#0a6aa1;
font-weight:600;
text-decoration:none;
}

.login-help a:hover{
text-decoration:underline;
}
.ai-helper{
background:#f2f7f9;
border:1px solid #d7e6ec;
padding:14px;
border-radius:10px;
margin-top:10px;
}

.ai-row{
display:flex;
align-items:center;
gap:10px;
margin-bottom:8px;
}

.ai-icon{
font-size:22px;
}

.ai-info{
font-size:13px;
color:#333;
line-height:1.4;
}

.btn-ai{
width:100%;
background:linear-gradient(135deg,#1f8a70,#146356);
color:white;
border:none;
padding:10px;
border-radius:6px;
font-size:13px;
font-weight:600;
cursor:pointer;
transition:0.2s;
}

.btn-ai:hover{
opacity:0.9;
transform:translateY(-1px);
}