/*!
 * 后台登录页 · 样式 2-6
 * 依赖 login-base.css 的公共组件；仅覆盖布局与配色
 * 切换入口：后台 → 系统设置 → 登录设置
 */

/* ============================================================
   样式 2：全屏大图 · 居中卡片
   ============================================================ */
body[data-style="2"] .login-wrap { display: block; }
body[data-style="2"] .hero-side { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; background: #0a1929; }
body[data-style="2"] .slide-overlay { background: linear-gradient(180deg, rgba(6,20,35,.55) 0%, rgba(6,20,35,.28) 45%, rgba(6,20,35,.62) 100%); }
body[data-style="2"] .slide-caption,
body[data-style="2"] .carousel-arrow,
body[data-style="2"] .carousel-dots,
body[data-style="2"] .hero-content,
body[data-style="2"] .hero-footer { display: none; }
body[data-style="2"] .form-side { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; display: flex; align-items: center; justify-content: center; background: transparent; padding: 24px; }
body[data-style="2"] .login-card { box-shadow: 0 30px 80px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.08); }

/* ============================================================
   样式 3：左右分屏（纯品牌色，不依赖图片）
   ============================================================ */
body[data-style="3"] .hero-side { flex: 0 0 46%; position: relative; overflow: hidden; background: linear-gradient(150deg, #062a3a 0%, #0e7490 52%, #0f766e 100%); }
body[data-style="3"] .carousel,
body[data-style="3"] .slide-caption,
body[data-style="3"] .carousel-arrow,
body[data-style="3"] .carousel-dots { display: none; }
/* 装饰光斑 */
body[data-style="3"] .hero-side::before { content: ''; position: absolute; top: -160px; right: -120px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(34,211,238,.28) 0%, rgba(34,211,238,.06) 48%, transparent 68%); }
body[data-style="3"] .hero-side::after { content: ''; position: absolute; bottom: -200px; left: -140px; width: 520px; height: 520px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 62%); }
body[data-style="3"] .hero-content { left: 64px; top: 50%; transform: translateY(-50%); text-align: left; width: calc(100% - 128px); max-width: 440px; }
body[data-style="3"] .hero-content .brand-icon { margin: 0 0 26px; opacity: 1; }
body[data-style="3"] .hero-content h1 { font-size: 40px; letter-spacing: 2px; margin-bottom: 14px; }
body[data-style="3"] .hero-content .subtitle { letter-spacing: 4px; font-size: 13px; }
body[data-style="3"] .hero-content .tagline { margin-top: 30px; font-size: 13px; line-height: 2; opacity: .68; }
body[data-style="3"] .hero-footer { text-align: left; padding-left: 64px; }
body[data-style="3"] .form-side { flex: 1; display: flex; align-items: center; justify-content: center; background: #fff; padding: 40px 24px; }
/* 分屏样式下卡片"消失"，表单直接长在白底上 */
body[data-style="3"] .login-card { width: 400px; max-width: 100%; padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
body[data-style="3"] .login-card .card-header { text-align: left; margin-bottom: 40px; }
body[data-style="3"] .login-card .card-header .logo-circle { margin: 0 0 22px; width: 56px; height: 56px; border-radius: 16px; }
body[data-style="3"] .login-card .card-header h2 { font-size: 26px; }
body[data-style="3"] .login-card .card-header p { letter-spacing: 2px; }
body[data-style="3"] .card-footer { text-align: left; }

/* ============================================================
   样式 4：毛玻璃
   ============================================================ */
body[data-style="4"] .login-wrap { display: block; }
body[data-style="4"] .hero-side { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; background: #0f172a; }
body[data-style="4"] .slide-overlay { background: linear-gradient(160deg, rgba(15,23,42,.62) 0%, rgba(15,23,42,.34) 46%, rgba(15,23,42,.7) 100%); }
body[data-style="4"] .slide-caption,
body[data-style="4"] .carousel-arrow,
body[data-style="4"] .carousel-dots,
body[data-style="4"] .hero-content,
body[data-style="4"] .hero-footer { display: none; }
body[data-style="4"] .form-side { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; display: flex; align-items: center; justify-content: center; background: transparent; padding: 24px; }
body[data-style="4"] .login-card {
    background: rgba(255,255,255,.15);
    -webkit-backdrop-filter: blur(26px) saturate(170%);
    backdrop-filter: blur(26px) saturate(170%);
    border: 1px solid rgba(255,255,255,.34);
    box-shadow: 0 28px 80px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.4);
    color: #fff;
}
body[data-style="4"] .login-card .card-header h2 { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.2); }
body[data-style="4"] .login-card .card-header p { color: rgba(255,255,255,.72); }
body[data-style="4"] .login-card .card-header .logo-circle { background: rgba(255,255,255,.22); box-shadow: 0 8px 24px rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.3); }
body[data-style="4"] .field-group .field-icon { color: rgba(255,255,255,.62); }
body[data-style="4"] .field-group input { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.26); color: #fff; }
body[data-style="4"] .field-group input::placeholder { color: rgba(255,255,255,.58); }
body[data-style="4"] .field-group input:focus { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.72); box-shadow: 0 0 0 4px rgba(255,255,255,.14); }
body[data-style="4"] .keep-login { color: rgba(255,255,255,.82); }
body[data-style="4"] .version-tag { color: rgba(255,255,255,.55); }
body[data-style="4"] .login-btn { background: rgba(255,255,255,.95); color: #0f172a; box-shadow: 0 10px 26px rgba(0,0,0,.22); }
body[data-style="4"] .login-btn:hover { background: #fff; box-shadow: 0 14px 32px rgba(0,0,0,.28); }
body[data-style="4"] .card-footer { border-top-color: rgba(255,255,255,.18); }
body[data-style="4"] .card-footer p { color: rgba(255,255,255,.56); }
body[data-style="4"] .card-footer .support { color: rgba(255,255,255,.78); }
body[data-style="4"] #errtips.show { background: rgba(254,226,226,.92); color: #b91c1c; }

/* ============================================================
   样式 5：极简留白
   ============================================================ */
body[data-style="5"] { background: #FAF8F5; }
body[data-style="5"] .login-wrap { display: block; background: #FAF8F5; }
body[data-style="5"] .hero-side { display: none; }
body[data-style="5"] .form-side { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #FAF8F5; padding: 24px; }
/* 顶部一条细装饰线 */
body[data-style="5"] .form-side::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #4F7D64 0%, #4F7D64 22%, #C8704A 22%, #C8704A 30%, transparent 30%); }
body[data-style="5"] .login-card { width: 380px; max-width: 100%; padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
body[data-style="5"] .login-card .card-header { text-align: left; margin-bottom: 46px; }
body[data-style="5"] .login-card .card-header .logo-circle { width: 48px; height: 48px; margin: 0 0 22px; border-radius: 12px; background: #4F7D64; box-shadow: none; }
body[data-style="5"] .login-card .card-header .logo-circle svg { width: 26px; height: 26px; }
body[data-style="5"] .login-card .card-header h2 { font-size: 27px; font-weight: 600; color: #2E2925; letter-spacing: 0; margin-bottom: 8px; }
body[data-style="5"] .login-card .card-header p { font-size: 12px; color: #837A6C; letter-spacing: 3px; }
body[data-style="5"] .field-group { margin-bottom: 28px; }
body[data-style="5"] .field-group .field-icon { left: 2px; width: 17px; height: 17px; color: #A79E90; }
body[data-style="5"] .field-group input { height: 44px; padding: 0 0 0 28px; border: none; border-bottom: 1px solid #DCD5C9; border-radius: 0; background: transparent; font-size: 15px; color: #2E2925; }
body[data-style="5"] .field-group input::placeholder { color: #A79E90; }
body[data-style="5"] .field-group input:focus { border-bottom-color: #4F7D64; background: transparent; box-shadow: none; }
body[data-style="5"] .captcha-group input { padding-right: 110px; }
body[data-style="5"] .captcha-group .captcha-img { border-radius: 4px; border-color: #DCD5C9; }
body[data-style="5"] .keep-login { color: #837A6C; }
body[data-style="5"] .keep-login input[type=checkbox] { accent-color: #4F7D64; }
body[data-style="5"] .version-tag { color: #A79E90; }
body[data-style="5"] .login-options { margin-bottom: 34px; }
body[data-style="5"] .login-btn { height: 48px; border-radius: 3px; background: #4F7D64; box-shadow: none; letter-spacing: 6px; font-weight: 500; }
body[data-style="5"] .login-btn::after { display: none; }
body[data-style="5"] .login-btn:hover { background: #3A5E4C; transform: none; box-shadow: none; }
body[data-style="5"] .card-footer { text-align: left; border-top-color: #E8E2D8; }
body[data-style="5"] .card-footer p { color: #A79E90; }
body[data-style="5"] .card-footer .support { color: #837A6C; }

/* ============================================================
   样式 6：深色科技
   ============================================================ */
body[data-style="6"] { background: #03080f; }
body[data-style="6"] .login-wrap { display: block; background: #03080f; }
body[data-style="6"] .hero-side { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; background: radial-gradient(circle at 22% 18%, #0b2b3f 0%, #060d1a 52%, #03080f 100%); }
body[data-style="6"] .carousel,
body[data-style="6"] .slide-caption,
body[data-style="6"] .carousel-arrow,
body[data-style="6"] .carousel-dots,
body[data-style="6"] .hero-content,
body[data-style="6"] .hero-footer { display: none; }
/* 科技网格 */
body[data-style="6"] .hero-side::before {
    content: '';
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image:
        linear-gradient(rgba(34,211,238,.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34,211,238,.075) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 74%);
    mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 74%);
}
/* 中央光晕 */
body[data-style="6"] .hero-side::after {
    content: '';
    position: absolute; left: 50%; top: 50%; width: 760px; height: 760px;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: radial-gradient(circle, rgba(34,211,238,.13) 0%, rgba(34,211,238,.04) 42%, transparent 68%);
    pointer-events: none;
}
body[data-style="6"] .form-side { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; display: flex; align-items: center; justify-content: center; background: transparent; padding: 24px; }
body[data-style="6"] .login-card {
    background: rgba(11,20,36,.88);
    border: 1px solid rgba(34,211,238,.22);
    box-shadow: 0 0 0 1px rgba(34,211,238,.05), 0 30px 80px rgba(0,0,0,.62), 0 0 60px rgba(34,211,238,.06);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
body[data-style="6"] .login-card .card-header h2 { color: #e6f7ff; }
body[data-style="6"] .login-card .card-header p { color: #6b8fa3; }
body[data-style="6"] .login-card .card-header .logo-circle { background: linear-gradient(135deg, #0891b2, #22d3ee); box-shadow: 0 0 28px rgba(34,211,238,.45); }
body[data-style="6"] .field-group .field-icon { color: #4b7284; }
body[data-style="6"] .field-group input { background: rgba(255,255,255,.04); border-color: rgba(34,211,238,.18); color: #dff6ff; }
body[data-style="6"] .field-group input::placeholder { color: #4b7284; }
body[data-style="6"] .field-group input:focus { border-color: #22d3ee; background: rgba(34,211,238,.06); box-shadow: 0 0 0 4px rgba(34,211,238,.12); }
body[data-style="6"] .captcha-group .captcha-img { border-color: rgba(34,211,238,.2); }
body[data-style="6"] .keep-login { color: #7fa3b5; }
body[data-style="6"] .keep-login input[type=checkbox] { accent-color: #22d3ee; }
body[data-style="6"] .version-tag { color: #3f6478; }
body[data-style="6"] .login-btn { background: linear-gradient(135deg, #0891b2, #22d3ee); color: #04121c; box-shadow: 0 8px 26px rgba(34,211,238,.32); }
body[data-style="6"] .login-btn:hover { box-shadow: 0 12px 36px rgba(34,211,238,.52); }
body[data-style="6"] .card-footer { border-top-color: rgba(34,211,238,.14); }
body[data-style="6"] .card-footer p { color: #3f6478; }
body[data-style="6"] .card-footer .support { color: #6b8fa3; }
body[data-style="6"] #errtips.show { background: rgba(220,38,38,.15); border-color: rgba(248,113,113,.42); color: #fca5a5; }

/* ============================================================
   预览模式：右上角小角标（仅 loginpreview 可见）
   ============================================================ */
.preview-badge {
    position: fixed; top: 14px; right: 14px; z-index: 9999;
    padding: 5px 12px; border-radius: 14px;
    background: rgba(15,23,42,.72); color: #fff;
    font-size: 11px; letter-spacing: 1px;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    pointer-events: none;
}

/* ============================================================
   响应式：窄屏统一降级
   ============================================================ */
@media (max-width: 1040px) {
    body[data-style="3"] .hero-side { display: none; }
    body[data-style="3"] .form-side { flex: 1; }
}
@media (max-width: 560px) {
    body[data-style="2"] .login-card,
    body[data-style="4"] .login-card,
    body[data-style="6"] .login-card { padding: 34px 24px; }
    body[data-style="5"] .login-card { width: 100%; }
    body[data-style="3"] .login-card .card-header { text-align: center; }
    body[data-style="3"] .login-card .card-header .logo-circle { margin-left: auto; margin-right: auto; }
    body[data-style="3"] .card-footer { text-align: center; }
}