/* ============================================
   登录/注册页 - 共享样式
   用于: register.php, sa.php, admin/login.php
   ============================================ */

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;margin:0;max-width:100vw;overflow-x:hidden}

/* ---- 页面容器 ---- */
body{
    font-family:'PingFang SC','Microsoft YaHei','Helvetica Neue',-apple-system,BlinkMacSystemFont,sans-serif;
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:#fff9f5;position:relative;
}

/* ---- 背景装饰圆 ---- */
body::before{content:'';position:absolute;width:720px;height:720px;border-radius:50%;
    background:radial-gradient(circle,rgba(246,211,101,0.12),transparent 70%);
    top:-240px;right:-180px;pointer-events:none;}
body::after{content:'';position:absolute;width:600px;height:600px;border-radius:50%;
    background:radial-gradient(circle,rgba(253,160,133,0.08),transparent 70%);
    bottom:-200px;left:-160px;pointer-events:none;}

/* ---- 主容器: 左右分栏 ---- */
.login-wrapper{
    position:relative;z-index:1;width:960px;max-width:92vw;min-height:560px;
    display:flex;border-radius:24px;overflow:hidden;background:#fff;
    box-shadow:0 30px 80px rgba(0,0,0,0.12),0 8px 24px rgba(0,0,0,0.06);
}

/* ---- 左侧品牌展示区 ---- */
.login-banner{
    flex:1;background:linear-gradient(160deg,#f6d365 0%,#fda085 40%,#f78ca0 100%);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:60px 40px;position:relative;overflow:hidden;color:#fff;text-align:center;
}
.login-banner::before{content:'';position:absolute;width:420px;height:420px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,0.25),transparent 70%);
    top:-140px;right:-140px;pointer-events:none;}
.login-banner::after{content:'';position:absolute;width:320px;height:320px;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,0.15),transparent 70%);
    bottom:-100px;left:-100px;pointer-events:none;}

/* ---- 漂浮硬币动画 ---- */
.floating-coin{position:absolute;font-size:30px;opacity:0.55;pointer-events:none;
    animation:floatUp 8s ease-in-out infinite;
    text-shadow:0 4px 12px rgba(0,0,0,0.1);filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1));}
.coin-1{left:12%;top:18%;font-size:24px;animation-delay:0s;}
.coin-2{right:15%;top:32%;font-size:36px;animation-delay:-2s;}
.coin-3{left:18%;bottom:22%;font-size:28px;animation-delay:-4s;}
.coin-4{right:12%;bottom:28%;font-size:22px;animation-delay:-6s;}

@keyframes floatUp{
    0%,100%{transform:translateY(0) rotate(0deg)}
    50%{transform:translateY(-20px) rotate(8deg)}
}

/* ---- 品牌区内容 ---- */
.banner-content{position:relative;z-index:1}
.banner-logo{width:90px;height:90px;background:rgba(255,255,255,0.25);border-radius:24px;
    display:flex;align-items:center;justify-content:center;margin:0 auto 30px;
    font-size:40px;color:#fff;border:1px solid rgba(255,255,255,0.4);
    box-shadow:0 16px 40px rgba(0,0,0,0.12),inset 0 1px 0 rgba(255,255,255,0.3);}
.banner-title{font-size:28px;font-weight:700;letter-spacing:2px;margin-bottom:14px;
    color:#fff;text-shadow:0 2px 8px rgba(0,0,0,0.1);}
.banner-desc{font-size:15px;color:rgba(255,255,255,0.9);line-height:1.8;letter-spacing:1px;}
.banner-slogan{margin-top:36px;padding:14px 26px;background:rgba(255,255,255,0.25);
    border-radius:30px;font-size:13px;color:#fff;display:inline-block;
    border:1px solid rgba(255,255,255,0.35);text-shadow:0 1px 2px rgba(0,0,0,0.05);}

/* ---- 右侧表单区 ---- */
.login-form-area{
    flex:1;background:#fff;display:flex;flex-direction:column;
    align-items:center;justify-content:center;padding:50px 45px;
}
.form-inner{width:100%;max-width:360px;}
.form-header{text-align:center;margin-bottom:30px;}
.form-header h2{font-size:24px;font-weight:700;color:#1e293b;margin-bottom:8px;}
.form-header p{font-size:14px;color:#94a3b8;}

/* ---- 带图标的输入框 ---- */
.input-group{position:relative;margin-bottom:20px;}
.input-group .input-icon{
    position:absolute;left:16px;top:50%;transform:translateY(-50%);
    font-size:16px;line-height:1;color:#94a3b8;transition:color 0.3s;pointer-events:none;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
}
.input-group .input-icon svg{width:16px;height:16px;display:block}
.input-group input{
    width:100%;height:50px;padding:0 16px 0 44px;
    border:1.5px solid #e2e8f0;border-radius:12px;font-size:15px;color:#334155;
    background:#f8fafc;transition:all 0.3s;outline:none;font-family:inherit;
}
.input-group input:focus{
    border-color:#f6a85f;background:#fff;box-shadow:0 0 0 4px rgba(246,168,95,0.1);
}
.input-group input:focus~.input-icon{color:#f6a85f;}

/* ---- 登录按钮 ---- */
.btn-login{
    width:100%;height:50px;
    background:linear-gradient(135deg,#f6d365,#fda085);
    color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;
    cursor:pointer;transition:all 0.3s;letter-spacing:2px;
    position:relative;overflow:hidden;
}
.btn-login::after{
    content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
    transition:left 0.5s;
}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(253,160,133,0.35);}
.btn-login:hover::after{left:100%;}
.btn-login:active{transform:translateY(0);}

/* ---- 提示消息 ---- */
.form-footer{text-align:center;margin-top:24px;}
.form-footer a{
    color:#94a3b8;text-decoration:none;font-size:13px;transition:color 0.3s;
    display:inline-flex;align-items:center;gap:6px;
}
.form-footer a:hover{color:#fda085;}

/* ---- 通用错误提示 ---- */
.error-msg{
    background:#fef2f2;color:#dc2626;padding:12px 16px;border-radius:10px;
    margin-bottom:22px;text-align:center;font-size:13px;font-weight:500;
    border:1px solid rgba(220,38,38,0.15);
    display:flex;align-items:center;justify-content:center;gap:8px;
}
.error-msg::before{content:'\f071';font-family:'Font Awesome 6 Free';font-weight:900;font-size:14px;}

/* ============================================
   📱 响应式
   ============================================ */
@media (max-width:768px){
    body{align-items:flex-start;padding:16px 0;}
    .login-wrapper{flex-direction:column;width:92vw;min-height:auto;border-radius:18px;}
    .login-banner{padding:30px 25px;border-radius:0;}
    .login-banner::before{width:220px;height:220px;top:-60px;right:-60px;}
    .login-banner::after{width:180px;height:180px;bottom:-50px;left:-50px;}
    .banner-logo{width:70px;height:70px;font-size:32px;border-radius:20px;margin-bottom:16px;}
    .banner-title{font-size:22px;}
    .banner-desc{font-size:13px;}
    .banner-slogan{margin-top:22px;padding:10px 18px;font-size:12px;}
    .floating-coin{font-size:20px;}
    .coin-2{font-size:26px;}
    .coin-3{font-size:22px;}
    .login-form-area{padding:32px 24px;}
    .form-inner{max-width:100%;}
    .form-header h2{font-size:20px;}
    .form-header p{font-size:13px;}
    .input-group input{height:46px;font-size:14px;}
    .btn-login{height:46px;font-size:15px;}
}

@media (max-width:400px){
    .login-wrapper{width:96vw;border-radius:14px;}
    .login-banner{padding:26px 18px;min-height:190px;}
    .login-form-area{padding:22px 16px;}
}