/**
 * 光速数卡 - Auth (登录/注册) 独立样式
 * 主色: LOGO 紫蓝 #7c89e6
 * 与主站 style.css 完全独立,只服务 /assets/views/auth_*.php
 */

/* ============ 基础重置 ============ */
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body.auth-body{
    font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','PingFang SC','Segoe UI',system-ui,sans-serif;
    color:#1c1c1e;
    overflow-x:hidden;
    min-height:100vh;
    position:relative;
    background:#f4f5fb;
}

/* ============ 渐变背景 (LOGO 紫蓝色调) ============ */
.auth-bg{
    position:fixed;
    inset:0;
    z-index:-1;
    background:
        radial-gradient(circle at 18% 22%, rgba(124,137,230,0.32) 0%, transparent 42%),
        radial-gradient(circle at 82% 78%, rgba(99,102,241,0.22) 0%, transparent 45%),
        radial-gradient(circle at 50% 100%, rgba(167,177,234,0.18) 0%, transparent 55%),
        linear-gradient(135deg,#eef0fb 0%,#f6f4fc 50%,#fbf4f9 100%);
}
.auth-bg::after{
    content:'';
    position:absolute;
    inset:0;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.6 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity:0.025;
    mix-blend-mode:overlay;
    pointer-events:none;
}

/* ============ 主壳 + 品牌头 ============ */
.auth-shell{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px 20px 20px;
    gap:28px;
}
.auth-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}
.auth-logo{
    width:72px;
    height:72px;
    filter:drop-shadow(0 8px 20px rgba(124,137,230,0.25));
    animation:auth-logo-in .6s cubic-bezier(.2,.8,.2,1);
}
@keyframes auth-logo-in{
    from{opacity:0;transform:translateY(-8px) scale(0.9);}
    to{opacity:1;transform:translateY(0) scale(1);}
}
.auth-sitename{
    font-size:22px;
    font-weight:700;
    letter-spacing:0.5px;
    color:#3d4080;
    margin:0;
}

/* ============ 卡片 ============ */
.auth-card{
    width:100%;
    max-width:420px;
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    border:1px solid rgba(255,255,255,0.9);
    border-radius:20px;
    padding:28px 28px 24px;
    box-shadow:
        0 20px 60px rgba(99,102,241,0.10),
        0 4px 16px rgba(124,137,230,0.06);
    animation:auth-card-in .5s cubic-bezier(.2,.8,.2,1) .15s both;
}
@keyframes auth-card-in{
    from{opacity:0;transform:translateY(12px);}
    to{opacity:1;transform:translateY(0);}
}

/* ============ Tab 切换 (登录页) ============ */
.auth-tabs{
    display:flex;
    background:#eef0fb;
    border-radius:12px;
    padding:4px;
    margin-bottom:22px;
    position:relative;
}
.auth-tab{
    flex:1;
    padding:9px 12px;
    background:transparent;
    border:none;
    border-radius:9px;
    font-size:14px;
    font-weight:600;
    color:#6c6c8a;
    cursor:pointer;
    transition:all .25s cubic-bezier(.2,.8,.2,1);
}
.auth-tab.active{
    background:#fff;
    color:#3d4080;
    box-shadow:0 2px 8px rgba(124,137,230,0.18);
}
.auth-tab-pane{display:none;}
.auth-tab-pane.active{display:block;animation:auth-pane-in .25s ease;}
@keyframes auth-pane-in{from{opacity:0;}to{opacity:1;}}

/* ============ Step 进度条 (注册页) ============ */
.auth-steps{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:24px;
}
.auth-step-dot{
    flex:1;
    height:4px;
    background:#e6e8f5;
    border-radius:980px;
    transition:background .3s;
}
.auth-step-dot.active{background:#7c89e6;}
.auth-step-dot.passed{background:#a5b1ee;}
.auth-step-label{
    font-size:13px;
    color:#6c6c8a;
    margin-bottom:6px;
    font-weight:500;
}
.auth-step-pane{display:none;}
.auth-step-pane.active{display:block;animation:auth-pane-in .3s ease;}

/* ============ 表单元素 ============ */
.auth-form-group{margin-bottom:16px;}
.auth-form-group label{
    display:block;
    font-size:13px;
    font-weight:500;
    color:#3a3a3c;
    margin-bottom:6px;
}
.auth-form-group label .req{color:#dc2626;margin-left:2px;}
.auth-input,
.auth-form-group input{
    width:100%;
    padding:11px 14px;
    border:1.5px solid #e2e4f0;
    border-radius:11px;
    font-size:14px;
    background:rgba(255,255,255,0.9);
    color:#1c1c1e;
    transition:all .2s;
    font-family:inherit;
}
.auth-input:focus,
.auth-form-group input:focus{
    outline:none;
    border-color:#7c89e6;
    box-shadow:0 0 0 3px rgba(124,137,230,0.14);
    background:#fff;
}
.auth-input::placeholder,
.auth-form-group input::placeholder{color:#a8a8b0;}
.auth-form-group small{
    display:block;
    margin-top:6px;
    font-size:12px;
    color:#8a8a9a;
    line-height:1.5;
}

/* ============ 短信验证码组合 ============ */
.auth-input-group{
    display:flex;
    gap:10px;
}
.auth-input-group .auth-input{flex:1;}
.auth-input-group .auth-input-action{
    flex-shrink:0;
    padding:0 16px;
    background:#fff;
    border:1.5px solid #e2e4f0;
    border-radius:11px;
    color:#5a64b8;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
    transition:all .2s;
    min-width:108px;
}
.auth-input-group .auth-input-action:hover:not(:disabled){
    background:#eef0fb;
    border-color:#7c89e6;
    color:#3d4080;
}
.auth-input-group .auth-input-action:disabled{
    background:#f4f5fb;
    color:#a8a8b0;
    cursor:not-allowed;
    border-color:#e2e4f0;
}

.auth-captcha-row{
    display:flex;
    gap:10px;
    align-items:center;
}
.auth-captcha-row .auth-input{
    flex:1;
    text-transform:uppercase;
    letter-spacing:2px;
    text-align:center;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.auth-captcha-image-btn{
    width:120px;
    height:42px;
    padding:0;
    border:1.5px solid #e2e4f0;
    border-radius:11px;
    background:#fff;
    cursor:pointer;
    overflow:hidden;
}
.auth-captcha-image-btn:hover{
    border-color:#7c89e6;
}
.auth-captcha-image-btn img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ============ 主操作按钮 ============ */
.auth-btn{
    width:100%;
    padding:13px 16px;
    border:none;
    border-radius:12px;
    font-size:15px;
    font-weight:600;
    color:#fff;
    cursor:pointer;
    background:linear-gradient(135deg,#7c89e6 0%,#6366f1 100%);
    box-shadow:0 6px 16px rgba(99,102,241,0.28);
    transition:all .2s;
    margin-top:6px;
    font-family:inherit;
}
.auth-btn:hover:not(:disabled){
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(99,102,241,0.36);
}
.auth-btn:active:not(:disabled){transform:translateY(0);}
.auth-btn:disabled{
    background:#c5cae8;
    box-shadow:none;
    cursor:not-allowed;
}
.auth-btn-secondary{
    background:transparent;
    color:#5a64b8;
    box-shadow:none;
    border:1.5px solid #d4d8ec;
}
.auth-btn-secondary:hover:not(:disabled){
    background:#eef0fb;
    border-color:#7c89e6;
    box-shadow:none;
    transform:none;
}

/* ============ 步骤导航(返回上一步) ============ */
.auth-step-nav{
    display:flex;
    gap:10px;
    margin-top:14px;
}
.auth-step-nav .auth-btn{flex:1;}

/* ============ 链接 + 底部 ============ */
.auth-meta{
    margin-top:18px;
    text-align:center;
    font-size:13px;
    color:#6c6c8a;
}
.auth-meta a{
    color:#5a64b8;
    text-decoration:none;
    font-weight:500;
    transition:color .2s;
}
.auth-meta a:hover{color:#3d4080;text-decoration:underline;}
.auth-meta-row{display:flex;justify-content:space-between;align-items:center;}

.auth-divider{
    display:flex;
    align-items:center;
    gap:12px;
    margin:18px 0;
    color:#a8a8b0;
    font-size:12px;
}
.auth-divider::before,.auth-divider::after{
    content:'';
    flex:1;
    height:1px;
    background:#e2e4f0;
}

.auth-footer{
    margin-top:auto;
    padding-top:24px;
    text-align:center;
    font-size:12px;
    color:#8a8a9a;
}
.auth-footer a{color:#5a64b8;text-decoration:none;}
.auth-footer a:hover{text-decoration:underline;}

/* ============ Notice ============ */
.auth-notice{
    padding:11px 14px;
    border-radius:10px;
    margin-bottom:16px;
    font-size:13.5px;
    line-height:1.5;
    display:flex;
    gap:8px;
    align-items:flex-start;
}
.auth-notice-success{background:rgba(34,197,94,0.1);color:#15803d;border:1px solid rgba(34,197,94,0.2);}
.auth-notice-error{background:rgba(239,68,68,0.08);color:#b91c1c;border:1px solid rgba(239,68,68,0.18);}
.auth-notice-warning{background:rgba(245,158,11,0.1);color:#92400e;border:1px solid rgba(245,158,11,0.2);}
.auth-notice-info{background:rgba(124,137,230,0.1);color:#3d4080;border:1px solid rgba(124,137,230,0.2);}

/* ============ 密码强度提示 ============ */
.auth-pw-meter{
    display:flex;
    gap:4px;
    margin-top:8px;
    height:4px;
}
.auth-pw-bar{
    flex:1;
    background:#e6e8f5;
    border-radius:980px;
    transition:background .25s;
}
.auth-pw-bar.weak{background:#dc2626;}
.auth-pw-bar.medium{background:#f59e0b;}
.auth-pw-bar.strong{background:#22c55e;}
.auth-pw-text{font-size:12px;color:#8a8a9a;margin-top:6px;}
.auth-pw-text.weak{color:#dc2626;}
.auth-pw-text.medium{color:#92400e;}
.auth-pw-text.strong{color:#15803d;}

/* ============ 加载状态 ============ */
.auth-spin{
    display:inline-block;
    width:14px;
    height:14px;
    border:2px solid rgba(255,255,255,0.4);
    border-top-color:#fff;
    border-radius:50%;
    animation:auth-spin 0.7s linear infinite;
    vertical-align:middle;
    margin-right:6px;
}
@keyframes auth-spin{to{transform:rotate(360deg);}}

/* ============ 移动端适配 ============ */
@media (max-width: 480px){
    .auth-shell{padding:24px 16px 16px;gap:20px;}
    .auth-card{padding:22px 20px 20px;border-radius:16px;}
    .auth-logo{width:60px;height:60px;}
    .auth-sitename{font-size:19px;}
    .auth-input-group .auth-input-action{min-width:96px;font-size:12px;padding:0 10px;}
}