*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
                 "Microsoft YaHei", "Segoe UI", sans-serif;
    font-size: 14px;
    color: #1d2129;
    -webkit-font-smoothing: antialiased;
}
 
/* ── 全页背景 ───────────────────────────────────── */
.login-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(125deg, #fdf4ee 0%, #f0eeff 30%, #ddeaff 65%, #c8deff 100%);
}

/* 页面级装饰：左下大光晕 */
.login-page::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251,191,36,.14) 0%, rgba(253,164,175,.08) 50%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* 页面级装饰：左上小圆环 */
.login-page::after {
    content: "";
    position: absolute;
    top: 40px;
    left: 30%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 24px solid rgba(99,102,241,.07);
    pointer-events: none;
    z-index: 0;
}

/* 右上角几何体容器 */
.login-page-deco {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 460px;
    height: 460px;
    pointer-events: none;
    z-index: 0;
}

/* 最大块：深色圆角矩形 */
.login-page-deco::before {
    content: "";
    position: absolute;
    top: 50px; right: 50px;
    width: 220px; height: 220px;
    border-radius: 36px;
    background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(168,85,247,.14));
    transform: rotate(16deg);
    box-shadow: 0 20px 60px rgba(99,102,241,.18);
}

/* 中块：蓝色旋转矩形 */
.login-page-deco::after {
    content: "";
    position: absolute;
    top: 160px; right: 160px;
    width: 130px; height: 130px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(59,130,246,.25), rgba(99,102,241,.18));
    transform: rotate(40deg);
    box-shadow: 0 12px 36px rgba(59,130,246,.2);
}

/* 小块：纯描边矩形（第三层次） */
.login-page-deco-sm {
    position: absolute;
    top: 240px;
    right: 80px;
    width: 72px;
    height: 72px;
    border-radius: 14px;
    border: 3px solid rgba(168,85,247,.22);
    transform: rotate(28deg);
    pointer-events: none;
    z-index: 0;
}

/* 光点：右侧散布小圆 */
.login-page-deco-dots {
    position: absolute;
    top: 0; right: 0;
    width: 460px;
    height: 460px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle, rgba(168,85,247,.35) 2px, transparent 2px) 320px 80px / 1px 1px no-repeat,
        radial-gradient(circle, rgba(99,102,241,.3) 2.5px, transparent 2.5px) 260px 200px / 1px 1px no-repeat,
        radial-gradient(circle, rgba(59,130,246,.3) 2px, transparent 2px) 380px 300px / 1px 1px no-repeat,
        radial-gradient(circle, rgba(168,85,247,.25) 3px, transparent 3px) 200px 360px / 1px 1px no-repeat,
        radial-gradient(circle, rgba(99,102,241,.2) 2px, transparent 2px) 340px 400px / 1px 1px no-repeat;
}

/* ── 顶部 header ────────────────────────────────── */
.login-header {
    position: relative;
    z-index: 10;
    padding: 20px;
    display: flex;
    align-items: center;
}

.login-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.login-logo-img{
    width: 164px;
    height:32px;
}

/* ── 主体 ────────────────────────────────────────── */
.login-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    z-index: 10;
}

.login-slogan {
    text-align: center;
    margin-bottom: 28px;
}

.login-slogan-line1 {
    display: block;
    font-size: 46px;
    font-weight: 700;
    color: #4A4F57;
    letter-spacing: .02em;
    line-height: 1.2;
    margin-bottom: 8px;
}

.slogan-accent {
    background: linear-gradient(225deg, rgb(165, 123, 250) 0%, rgb(255, 132, 172) 64%, rgb(255, 159, 79) 100%) text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-slogan-line2 {
    display: block;
    font-size: 20px;
    color: #4A4F57;
    letter-spacing: .04em;
    line-height: 1.5;
}

/* ── 卡片容器（左右分栏） ────────────────────────── */
.login-card {
    background: #fff;
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    display: flex;
    width: 100%;
    max-width: 780px;
    min-height: 400px;
    overflow: hidden;
}

/* ── 左侧：标题 + 二维码 ─────────────────────────── */
.lc-left {
    flex: 0 0 290px;
    padding: 44px 36px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.lc-title {
    font-size: 26px;
    font-weight: 600;
    color: #1d2129;
    align-self: flex-start;
    margin-bottom: 32px;
}

.lc-qr-hint {
    font-size: 12px;
    color: #86909c;
    margin-bottom: 10px;
    width: 152px;
    text-align: left;
}

.lc-qr-box {
    position: relative;
    width: 152px; height: 152px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    background: white;
    padding: 10px;
}
.lc-qr-box img {
    width: 100%; height: 100%;
    display: block;
    object-fit: contain;
}
.lc-qr-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.lc-qr-overlay-text {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.lc-qr-status {
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
    margin: 6px 0 0;
    width: 152px;
}
.lc-qr-refresh {
    background: #f53f3f;
    border: none;
    border-radius: 16px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 20px;
}

/* ── 其他方式（图标行） ─────────────────────────── */
.lc-other {
    width: 152px;
    margin-top: 18px;
    align-self: center;
}

.lc-other-label {
    display: block;
    font-size: 12px;
    color: #c9cdd4;
    margin-bottom: 10px;
    text-align: left;
}

.lc-other-icons {
    display: flex;
    gap: 12px;
}

.lc-icon-btn {
    position: relative;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    transition: transform .15s, opacity .15s;
    flex-shrink: 0;
}

.lc-icon-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 30, 30, 0.82);
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
}

.lc-icon-btn:hover {
    transform: scale(1.1);
    opacity: .9;
}

.lc-icon-btn:hover::after {
    opacity: 1;
}

.lc-icon-btn svg,
.lc-icon-btn img {
    width: 22px;
    height: 22px;
    display: block;
}

/* ── 竖分割线 ─────────────────────────────────────── */
.lc-divider {
    width: 1px;
    background: #f0f0f0;
    flex-shrink: 0;
    margin: 24px 0;
}

/* ── 右侧：Tab + 表单 ────────────────────────────── */
.lc-right {
    flex: 1;
    padding: 44px 44px 40px;
    min-width: 0;
}

/* 无左侧扫码区时，卡片宽度收窄居中 */
.lc-card--no-left {
    max-width: 460px;
}
.lc-card--no-left .lc-right {
    padding: 44px 40px 40px;
}

/* ── Tab 栏 ──────────── */
.lc-tabs {
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 28px;
}

.lc-tab {
    padding: 0 2px 12px;
    margin-right: 28px;
    font-size: 14px;
    color: #86909c;
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .18s;
    white-space: nowrap;
}

.lc-tab.active {
    color: #1366ec;
    font-weight: 500;
    border-bottom-color: #1366ec;
}

/* ── Tab 面板 ─────────────────────────────────────── */
.lc-pane { display: none; }
.lc-pane.active { display: block; }

/* ── 输入字段（label 在左，与阿里云一致） ─────────── */
.lf-field {
    margin-bottom: 16px;
}

.lf-input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #dcdfe6;
    border-radius: 0;
    overflow: hidden;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.lf-input-wrap:focus-within {
    border-color: #1366ec;
    box-shadow: 0 0 0 2px rgba(19,102,236,.12);
}

.lf-input-wrap.has-error {
    border-color: #f53f3f;
}

.lf-label {
    flex-shrink: 0;
    width: 72px;
    padding: 10px 10px 10px 14px;
    font-size: 13px;
    color: #181818;
    background: #fff;
    user-select: none;
}

.lf-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 10px 12px;
    font-size: 14px;
    color: #1d2129;
    background: #fff;
    min-width: 0;
}

.lf-input::placeholder {
    color: #c9cdd4;
    font-size: 13px;
}

/* 密码可见切换 */
.lf-eye {
    flex-shrink: 0;
    padding: 0 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: #c9cdd4;
    display: flex;
    align-items: center;
    transition: color .15s;
}

.lf-eye:hover { color: #86909c; }

.lf-eye svg { width: 18px; height: 18px; display: block; }

/* 短信行：code输入 + 获取按钮 */
.lf-code-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lf-code-row .lf-input-wrap { flex: 1; }

.lf-btn-sms {
    flex-shrink: 0;
    height: 38px;
    padding: 0 14px;
    font-size: 13px;
    color: #1366ec;
    background: #fff;
    border: 1px solid #1366ec;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s, color .18s;
}

.lf-btn-sms:hover {
    background: #f0f6ff;
}

.lf-btn-sms:disabled {
    color: #c9cdd4;
    border-color: #dcdfe6;
    cursor: not-allowed;
    background: #fff;
}

/* 字段错误提示 */
.lf-err {
    font-size: 12px;
    color: #f53f3f;
    margin-top: 5px;
    padding-left: 2px;
    min-height: 0;
    display: block;
}

/* ── 记住我 ─────────────────────────────────────── */
.lf-remember {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 20px;
}

.lf-remember input[type="checkbox"] {
    width: 14px; height: 14px;
    border: 1.5px solid #c9cdd4;
    border-radius: 3px;
    cursor: pointer;
    accent-color: #1366ec;
    flex-shrink: 0;
}

.lf-remember label {
    font-size: 13px;
    color: #86909c;
    cursor: pointer;
    user-select: none;
}

/* ── 登录按钮 ───────────────────────────────────── */
.lf-btn-submit {
    display: block;
    width: 100%;
    padding: 10px 0;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .06em;
    color: #fff;
    background: #1366ec;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background .18s, box-shadow .18s, transform .1s;
}

.lf-btn-submit:hover {
    background: #0d56d4;
    box-shadow: 0 4px 14px rgba(19,102,236,.35);
}

.lf-btn-submit:active {
    transform: translateY(1px);
    box-shadow: none;
}

.lf-btn-submit:disabled {
    background: #a3c3f7;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* ── 全局表单错误横幅 ───────────────────────────── */
.lf-alert {
    font-size: 13px;
    padding: 9px 12px;
    border-radius: 4px;
    margin-bottom: 16px;
    background: #fff1f1;
    color: #cb2a2a;
    border-left: 3px solid #f53f3f;
    display: none;
}

.lf-alert.validation-summary-errors { display: block; }

.lf-alert ul { list-style: none; padding: 0; margin: 0; }

.lf-alert li {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

#lf-tooltip {
    position: fixed;
    background: rgba(30, 30, 30, 0.82);
    color: #fff;
    font-size: 12px;
    white-space: normal;
    max-width: 260px;
    word-break: break-word;
    padding: 3px 8px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    z-index: 9999;
}


/* ── 手机号登录提示条 ───────────────────────────── */
.lf-notice {
    margin-top: 16px;
    font-size: 12px;
    color: #c9cdd4;
    text-align: center;
}

/* ── 底部版权 ───────────────────────────────────── */
.login-footer {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 10px 20px 10px;
    font-size: 14px;
    color: #4A4F57;
}

.login-footer-version {
    margin-left: 8px;
    opacity: 0.6;
    font-size: 12px;
}

/* 手机端才显示的第三方图标备份（桌面端由 lc-left 承载） */
.lc-other--mobile { display: none; }

/* ── 响应式 ─────────────────────────────────────── */
@media (max-width: 680px) {
    /* 隐藏扫码区和所有装饰元素 */
    .lc-left, .lc-divider { display: none; }
    .login-page-deco, .login-page-deco-sm, .login-page-deco-dots { display: none; }

    /* 头部收窄 */
    .login-header { padding: 12px 16px; }
    .login-logo-img { width: 120px; height: 24px; }

    /* 主体改为顶部对齐，避免键盘弹起时内容被遮 */
    .login-body {
        justify-content: flex-start;
        padding: 12px 16px 16px;
    }

    /* 标语缩小 */
    .login-slogan { margin-bottom: 16px; }
    .login-slogan-line1 { font-size: 26px; }
    .login-slogan-line2 { font-size: 14px; }

    /* 卡片：撑满宽度 */
    .login-card {
        max-width: 100%;
        min-height: auto;
    }

    /* 右侧表单区收窄内边距 */
    .lc-right { padding: 28px 20px 24px; }

    /* 底部版权字号缩小 */
    .login-footer { padding: 8px 16px; font-size: 12px; }

    /* 第三方图标：lc-left 隐藏时在右侧显示 */
    .lc-other--mobile { display: block; }
}

/* 极窄屏（≤ 390px）：标语太占空间则隐藏 */
@media (max-width: 390px) {
    .login-slogan { display: none; }
    .login-body { justify-content: center; }
}