/* =============================================================================
   登录页样式 —— 医美行业高端风（玫瑰金 + 香槟 + 紫调）
   为避免某些设备/驱动上的 GPU renderer 崩溃：
   - 去掉 backdrop-filter（Chrome 在部分核显/驱动上触发 STATUS_BREAKPOINT）
   - 去掉持续动画（animation: float），改用静态多层径向渐变
   - 不再使用超大半径 blur filter
   ============================================================================= */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #2a1f2d;
    background: #1d1224;
    overflow: hidden;
}

.login-wrap { position: relative; width: 100%; height: 100vh; display: grid; place-items: center; }

/* 背景：多层径向渐变代替大 blur blob，渲染开销极低 */
.login-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(380px 300px at 12% 18%, rgba(255,158,194,.55) 0%, transparent 65%),
        radial-gradient(420px 340px at 88% 82%, rgba(176,133,255,.45) 0%, transparent 65%),
        radial-gradient(500px 400px at 55% 50%, rgba(255,214,165,.18) 0%, transparent 65%),
        linear-gradient(180deg, #160d1c 0%, #2a1331 55%, #3a1740 100%);
}
/* blob 已改为静态装饰，不再使用 filter: blur 与动画 */
.blob { display: none; }

.login-card {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.1fr 1fr;
    width: min(1060px, 92vw);
    min-height: 580px;
    background: rgba(255,255,255,.97);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.55);
}

/* 左侧品牌封面 */
.login-cover {
    position: relative;
    padding: 48px 44px;
    color: #fff;
    background:
        linear-gradient(160deg, rgba(203, 108, 130, .92) 0%, rgba(154, 88, 160, .9) 50%, rgba(95, 79, 180, .88) 100%);
}
.login-cover::before {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(600px 400px at 80% 10%, rgba(255,255,255,.18), transparent 55%),
        radial-gradient(500px 400px at 10% 90%, rgba(255,210,230,.18), transparent 55%);
    pointer-events: none;
}
.cover-inner { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-logo {
    width: 52px; height: 52px; border-radius: 14px;
    background: linear-gradient(135deg, #ffd1c1, #f7a5c0);
    display: grid; place-items: center;
    color: #7a2b5a; font-weight: 700; font-size: 22px;
    box-shadow: 0 10px 28px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.6);
}
.brand-title { font-size: 18px; font-weight: 600; letter-spacing: .5px; }
.brand-sub   { font-size: 12px; opacity: .75; margin-top: 3px; letter-spacing: 1.5px; }

.cover-title {
    font-size: 28px; font-weight: 500; line-height: 1.5;
    letter-spacing: .5px; margin: 32px 0 24px;
}
.features { list-style: none; padding: 0; margin: 0; }
.features li {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; font-size: 14px; opacity: .92;
}
.features li span {
    width: 6px; height: 6px; border-radius: 50%;
    background: #ffd1c1; box-shadow: 0 0 10px #ffd1c1;
}
.cover-badge {
    margin-top: 24px;
    font-size: 11px; letter-spacing: 2px; opacity: .7;
    padding-top: 18px; border-top: 1px dashed rgba(255,255,255,.25);
}

/* 右侧表单 */
.login-form-area {
    background: rgba(255,255,255,.92);
    padding: 56px 52px;
    display: flex; flex-direction: column;
    justify-content: center;
}
.form-header h2 { margin: 0 0 6px; font-size: 24px; color: #2a1f2d; }
.form-header p  { margin: 0 0 28px; font-size: 13px; color: #7a6a75; }

.alert { background: #fde8ea; color: #c43a4a; border: 1px solid #f5c1c7; padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 18px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: #5a4c55; margin-bottom: 8px; }
.input-wrap {
    display: flex; align-items: center; gap: 10px;
    height: 46px; padding: 0 14px;
    border: 1px solid rgba(154, 88, 160, .25);
    background: #fff; border-radius: 12px;
    transition: all .2s;
}
.input-wrap:focus-within { border-color: #c25a84; box-shadow: 0 0 0 3px rgba(194, 90, 132, .18); }
.input-wrap .ico { width: 18px; height: 18px; color: #b099a7; flex-shrink: 0; }
.input-wrap input {
    flex: 1; border: 0; outline: 0; background: transparent;
    font-size: 14px; color: #2a1f2d; height: 100%;
}

.submit {
    margin-top: 8px; width: 100%; height: 48px;
    border: 0; border-radius: 12px; color: #fff; font-size: 15px;
    letter-spacing: 6px; cursor: pointer;
    background: linear-gradient(135deg, #cb6c82 0%, #9a58a0 55%, #6a4fb4 100%);
    box-shadow: 0 16px 32px -10px rgba(154, 88, 160, .55);
    transition: all .2s;
}
.submit:hover { filter: brightness(1.05); transform: translateY(-1px); }
.submit:active { transform: translateY(0); }

.form-foot { margin-top: 28px; text-align: center; color: #8a7a83; font-size: 12px; }

.lang-switch { text-align: right; margin: -6px 0 12px; font-size: 12px; }
.lang-switch a { color: #9a58a0; text-decoration: none; }
.lang-switch a:hover { text-decoration: underline; }

.captcha-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.captcha-inp { flex: 1; min-width: 120px; }
.captcha-img img { display: block; border-radius: 8px; border: 1px solid rgba(154, 88, 160, .2); }
.captcha-math {
    min-width: 100px; padding: 8px 12px; font-size: 15px; font-weight: 600; color: #2a1f2d;
    background: #faf6fa; border-radius: 8px; border: 1px solid rgba(154, 88, 160, .2);
}
.form-2fa-back { text-align: center; margin: 12px 0 0; font-size: 13px; }
.form-2fa-back a { color: #9a58a0; }

@media (max-width: 860px) {
    .login-card { grid-template-columns: 1fr; width: 92vw; min-height: unset; }
    .login-cover { padding: 32px; }
    .cover-title { font-size: 22px; margin: 20px 0 14px; }
    .login-form-area { padding: 36px 28px; }
}