/* =========================================================
   梵叶 · 全链路库存智能调配系统
   login.css —— 登录 / 注册
   ========================================================= */
.auth-body {
    background: #07151c;
    min-height: 100vh;
    overflow-x: hidden;
}

.auth-shell {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    min-height: 100vh;
}

/* 左侧品牌视觉 */
.auth-visual {
    position: relative;
    overflow: hidden;
    padding: 34px 46px 26px;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(720px 520px at 18% 12%, rgba(23, 195, 165, .22), transparent 62%),
        radial-gradient(680px 560px at 88% 88%, rgba(47, 124, 246, .2), transparent 60%),
        linear-gradient(155deg, #06131a 0%, #0a2028 55%, #071820 100%);
    color: #e7f7fa;
}
.visual-grid-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(800px 600px at 30% 20%, #000 30%, transparent 78%);
    pointer-events: none;
}
.visual-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    opacity: .55;
}
.orb-a { width: 360px; height: 360px; background: rgba(31, 208, 172, .3); top: -100px; left: -80px; }
.orb-b { width: 420px; height: 420px; background: rgba(47, 124, 246, .24); bottom: -150px; right: -100px; }

.auth-brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; }
.auth-brand .brand-mark { width: 44px; height: 44px; }
.auth-brand .brand-mark svg { width: 32px; height: 32px; }
.auth-brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.auth-brand-text strong { font-size: 16px; letter-spacing: .02em; color: #f3fdfe; }
.auth-brand-text span { font-size: 11px; color: #7fa1ac; letter-spacing: .14em; }
.auth-ver {
    margin-left: auto;
    font-size: 10.5px;
    color: #7ea1ac;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 20px;
    padding: 2px 9px;
    letter-spacing: .06em;
}

.visual-copy { position: relative; z-index: 2; margin-top: auto; padding-bottom: 90px; max-width: 600px; }
.auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #62e3c7;
    background: rgba(75, 230, 200, .08);
    border: 1px solid rgba(75, 230, 200, .18);
    border-radius: 20px;
    padding: 5px 12px;
    margin-bottom: 18px;
}
.auth-kicker i { width: 6px; height: 6px; border-radius: 50%; background: #4be6c8; box-shadow: 0 0 10px #4be6c8; animation: pulseDot 2.4s infinite; }
.visual-copy h1 {
    font-size: 45px;
    line-height: 1.18;
    letter-spacing: -.035em;
    font-weight: 700;
    color: #f4feff;
}
.visual-copy h1 em {
    font-style: normal;
    background: linear-gradient(100deg, #4be6c8, #56c6f0 60%, #8ea6ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.visual-copy > p {
    margin-top: 16px;
    font-size: 13.5px;
    line-height: 1.85;
    color: #94b4be;
    max-width: 500px;
}
.visual-features { display: grid; grid-template-columns: 1fr; gap: 11px; margin-top: 30px; max-width: 460px; }
.vf-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .07);
    backdrop-filter: blur(4px);
}
.vf-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: rgba(75, 230, 200, .1);
    color: #4be6c8;
    border: 1px solid rgba(75, 230, 200, .16);
    flex-shrink: 0;
}
.vf-icon .icon { width: 17px; height: 17px; }
.vf-item strong { display: block; font-size: 12.5px; color: #e8f8fb; font-weight: 600; }
.vf-item small { font-size: 11px; color: #7fa0aa; }

.visual-network {
    position: absolute;
    right: -8%;
    bottom: 4%;
    width: 68%;
    max-width: 720px;
    opacity: .8;
    z-index: 1;
    pointer-events: none;
}
.visual-network svg { width: 100%; height: auto; }

.auth-foot {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 10.5px;
    color: #5e7f8a;
    letter-spacing: .02em;
    flex-wrap: wrap;
}

/* 右侧表单区 */
.auth-panel {
    background:
        radial-gradient(600px 400px at 100% 0, rgba(23, 195, 165, .08), transparent 60%),
        #f6f9fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 34px;
    position: relative;
}
.auth-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .14), transparent);
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border: 1px solid #e3ecef;
    border-radius: 22px;
    padding: 30px 30px 26px;
    box-shadow: 0 40px 90px -46px rgba(7, 35, 45, .38), 0 4px 16px rgba(7, 35, 45, .04);
    animation: fadeUp .5s cubic-bezier(.2, .75, .2, 1);
}
.auth-card-wide { max-width: 560px; }
.auth-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.mini-brand { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--brand); font-weight: 600; letter-spacing: .02em; }
.mini-brand .icon { width: 15px; height: 15px; }
.secure-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: #6d8a94; background: #f3f8f9; border: 1px solid #e6eef0; border-radius: 20px; padding: 2px 8px; }
.secure-chip .icon { width: 11px; height: 11px; }
.auth-card h2 { font-size: 25px; letter-spacing: -.03em; }
.auth-sub { font-size: 12.5px; color: var(--text-3); margin-top: 5px; margin-bottom: 20px; line-height: 1.65; }

.form-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fff2f4;
    border: 1px solid #fbd5db;
    color: #b53f51;
    font-size: 11.5px;
    margin-bottom: 15px;
    line-height: 1.5;
}
.form-alert .icon { width: 15px; height: 15px; margin-top: 1px; flex-shrink: 0; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .field > span:first-child { font-size: 11.5px; font-weight: 550; color: #4c626d; }
.auth-form .field-control { height: 44px; border-radius: 10px; background: #fbfdfd; }
.auth-form .field-control input { font-size: 13px; }
.auth-form .field-control:focus-within { background: #fff; }
.eye-btn { border: 0; background: transparent; color: #93a6ae; display: grid; place-items: center; padding: 2px; }
.eye-btn:hover { color: var(--brand); }
.eye-btn .icon { width: 16px; height: 16px; }
.form-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hint-text { font-size: 10.5px; color: var(--text-3); }
.agree-line { font-size: 11.5px; color: var(--text-2); line-height: 1.5; }
.agree-line input { margin-top: 1px; }

.btn-auth {
    height: 46px;
    border-radius: 11px;
    border: 1px solid rgba(26, 178, 154, .35);
    background: linear-gradient(120deg, #45e2c4, #2ccfbc 52%, #45b4e8);
    color: #042d27;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    box-shadow: 0 14px 28px -14px rgba(23, 195, 165, .8), inset 0 1px 0 rgba(255, 255, 255, .45);
    transition: all .18s ease;
}
.btn-auth:hover { transform: translateY(-1px); box-shadow: 0 18px 34px -14px rgba(23, 195, 165, .9); }
.btn-auth .icon { width: 17px; height: 17px; }
.btn-auth-ghost {
    height: 42px;
    border-radius: 10px;
    border: 1px solid var(--line-2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--text-2);
    background: #fff;
    transition: all .16s;
}
.btn-auth-ghost:hover { border-color: #b5ddd5; color: var(--brand); background: #fbfffe; }
.btn-auth-ghost .icon { width: 14px; height: 14px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 13px; color: var(--text-3); font-size: 10.5px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-security {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed var(--line);
    font-size: 10.5px;
    color: var(--text-3);
    line-height: 1.6;
}
.auth-security .icon { width: 13px; height: 13px; margin-top: 1px; color: #9db5bc; flex-shrink: 0; }
.auth-copyright { font-size: 10.5px; color: #9aacb3; margin-top: 22px; text-align: center; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; margin-bottom: 13px; }
.auth-form .form-grid + .form-grid { margin-top: 0; }
.register-mode .visual-copy h1 { font-size: 40px; }
.register-mode .auth-card { max-width: 600px; padding: 26px 30px 24px; }
.register-mode .auth-sub { margin-bottom: 16px; }
.register-mode .auth-form { gap: 12px; }

@media (max-width: 1180px) {
    .auth-shell { grid-template-columns: 1fr 1fr; }
    .visual-copy h1 { font-size: 36px; }
    .visual-network { width: 80%; }
}
@media (max-width: 960px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-visual { min-height: 420px; padding: 26px 28px; }
    .visual-copy { padding-bottom: 30px; margin-top: 26px; }
    .visual-copy h1 { font-size: 30px; }
    .visual-features { display: none; }
    .visual-network { display: none; }
    .auth-panel { padding: 26px 18px 40px; }
    .auth-copyright { margin-bottom: 10px; }
}
@media (max-width: 620px) {
    .auth-card, .register-mode .auth-card { padding: 24px 20px; border-radius: 18px; }
    .form-grid { grid-template-columns: 1fr; }
    .auth-visual { min-height: 340px; }
    .visual-copy h1 { font-size: 25px; }
    .visual-copy > p { font-size: 12.5px; }
    .auth-foot { flex-direction: column; gap: 4px; }
}