/*!
 * 后台登录页 · 基础样式（公共组件 + 样式1「大图轮播」）
 * 样式 2-6 见 login-themes.css
 * 切换入口：后台 → 系统设置 → 登录设置
 * 作用域：body[data-style="N"]
 */

/* ===================== 全局重置 ===================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif; }
body { background: #f7f9fc; }

.login-wrap { display: flex; height: 100vh; width: 100%; position: relative; }

/* ===================== 轮播（公共） ===================== */
.carousel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.carousel-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease-in-out; }
.carousel-slide.active { opacity: 1; }
.carousel-slide.active .slide-bg { animation: kenBurns 6s ease-out forwards; }
.slide-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transform: scale(1); }
.slide-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(10,30,50,.45) 0%, rgba(10,30,50,.15) 35%, rgba(10,30,50,.55) 100%); z-index: 1; }

.slide-caption { position: absolute; bottom: 130px; left: 48px; color: #fff; z-index: 3; opacity: 0; transform: translateY(24px); transition: opacity .8s ease .4s, transform .8s ease .4s; }
.carousel-slide.active .slide-caption { opacity: 1; transform: translateY(0); }
.slide-caption .caption-tag { display: inline-block; padding: 4px 14px; border-radius: 20px; background: rgba(255,255,255,.15); backdrop-filter: blur(6px); font-size: 12px; letter-spacing: 2px; margin-bottom: 12px; border: 1px solid rgba(255,255,255,.2); }
.slide-caption .caption-title { font-size: 30px; font-weight: 700; text-shadow: 0 2px 16px rgba(0,0,0,.5); margin-bottom: 6px; letter-spacing: 2px; }
.slide-caption .caption-subtitle { font-size: 14px; opacity: .7; letter-spacing: 3px; }

.carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.12); backdrop-filter: blur(10px); color: #fff; font-size: 22px; cursor: pointer; z-index: 10; transition: all .3s ease; display: flex; align-items: center; justify-content: center; line-height: 1; }
.carousel-arrow:hover { background: rgba(255,255,255,.28); transform: translateY(-50%) scale(1.08); border-color: rgba(255,255,255,.4); }
.carousel-prev { left: 20px; }
.carousel-next { right: 20px; }

.carousel-dots { position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; }
.carousel-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); cursor: pointer; transition: all .35s ease; }
.carousel-dots .dot.active { width: 30px; border-radius: 4px; background: rgba(255,255,255,.9); }

.carousel-progress { position: absolute; bottom: 0; left: 0; height: 3px; width: 0; z-index: 5; }
.carousel-slide.active .carousel-progress { animation: progressFill 4s linear forwards; }
@keyframes progressFill { from { width: 0; } to { width: 100%; } }
@keyframes kenBurns { from { transform: scale(1); } to { transform: scale(1.06); } }

/* ===================== 品牌区（公共） ===================== */
.hero-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; z-index: 5; width: 80%; max-width: 480px; }
.hero-content .brand-icon { width: 72px; height: 72px; margin: 0 auto 20px; opacity: .92; }
.hero-content h1 { font-size: 36px; font-weight: 700; letter-spacing: 4px; text-shadow: 0 2px 24px rgba(0,0,0,.5); margin-bottom: 10px; }
.hero-content .subtitle { font-size: 15px; font-weight: 300; opacity: .8; letter-spacing: 6px; text-transform: uppercase; }
.hero-content .tagline { margin-top: 24px; font-size: 13px; opacity: .6; line-height: 1.8; letter-spacing: 1px; }

.hero-footer { position: absolute; bottom: 24px; left: 0; width: 100%; text-align: center; color: rgba(255,255,255,.5); font-size: 12px; z-index: 6; letter-spacing: 1px; }
.hero-footer .hero-version { font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 6px; letter-spacing: 1.5px; }
.hero-footer .hero-beian a { color: rgba(255,255,255,.4); font-size: 11px; text-decoration: none; transition: color .2s; }
.hero-footer .hero-beian a:hover { color: rgba(255,255,255,.7); }

/* ===================== 登录卡片（公共） ===================== */
.login-card { width: 460px; max-width: 90%; padding: 48px; background: #fff; border-radius: 20px; box-shadow: 0 20px 60px rgba(10,77,104,.12); position: relative; z-index: 2; animation: cardSlide .6s ease-out; }
.login-card .card-header { text-align: center; margin-bottom: 36px; }
.login-card .card-header .logo-circle { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 18px; background: linear-gradient(135deg, #088395, #05bfdb); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(8,131,149,.3); }
.login-card .card-header .logo-circle svg { width: 34px; height: 34px; }
.login-card .card-header h2 { font-size: 24px; font-weight: 700; color: #1a2a3a; margin-bottom: 6px; }
.login-card .card-header p { font-size: 13px; color: #8896a6; letter-spacing: 1px; }

.field-group { position: relative; margin-bottom: 22px; }
.field-group .field-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: #b0bcc8; pointer-events: none; z-index: 2; }
.field-group input { width: 100%; height: 52px; padding: 0 16px 0 46px; border: 2px solid #e8edf2; border-radius: 12px; font-size: 15px; color: #1a2a3a; background: #f9fafb; transition: all .2s; outline: none; }
.field-group input::placeholder { color: #b0bcc8; }
.field-group input:focus { border-color: #05bfdb; background: #fff; box-shadow: 0 0 0 4px rgba(5,191,219,.1); }
.field-group .input-append { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); height: 44px; display: flex; align-items: center; }

.captcha-group input { padding-right: 120px; }
.captcha-group .captcha-img { height: 40px; width: 100px; border-radius: 8px; cursor: pointer; margin-right: 4px; border: 1px solid #e8edf2; }

.login-options { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.keep-login { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: #6b7a8a; }
.keep-login input[type=checkbox] { width: 18px; height: 18px; accent-color: #05bfdb; cursor: pointer; }
.version-tag { font-size: 12px; color: #b0bcc8; }

.login-btn { width: 100%; height: 52px; border: none; border-radius: 12px; background: linear-gradient(135deg, #088395 0%, #05bfdb 100%); color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 2px; cursor: pointer; transition: all .25s; box-shadow: 0 8px 20px rgba(8,131,149,.25); position: relative; overflow: hidden; }
.login-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(8,131,149,.35); }
.login-btn:active { transform: translateY(0); }
.login-btn::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); transition: left .5s; }
.login-btn:hover::after { left: 100%; }
.login-btn[disabled] { opacity: .7; cursor: not-allowed; transform: none; }

.login-card .card-footer { text-align: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid #f0f3f6; }
.login-card .card-footer p { font-size: 12px; color: #b0bcc8; line-height: 1.6; }
.login-card .card-footer .support { font-size: 13px; color: #6b7a8a; margin-bottom: 4px; }

#errtips { display: none; }
#errtips.show { display: block; background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; font-size: 13px; border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; line-height: 1.6; animation: errIn .25s ease; }
@keyframes errIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes cardSlide { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* ===================== 样式 1：大图轮播（原有） ===================== */
body[data-style="1"] .hero-side { flex: 1; position: relative; overflow: hidden; background: #0a1929; }
body[data-style="1"] .form-side { flex: 0 0 640px; display: flex; align-items: center; justify-content: center; background: #f7f9fc; position: relative; }
body[data-style="1"] .form-side::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 20% 80%, rgba(8,131,149,.04) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(5,191,219,.04) 0%, transparent 50%); }

/* ===================== 响应式（样式1） ===================== */
@media (max-width: 1040px) {
    body[data-style="1"] .hero-side { display: none; }
    body[data-style="1"] .form-side { flex: 1; }
}
@media (max-width: 480px) {
    .login-card { padding: 36px 24px; box-shadow: none; background: #f7f9fc; }
    body[data-style="1"] .form-side { background: #f7f9fc; }
}