/* ============================================================
   app-login.css —— 登录页样式（蓝色主题，手机优先，≥768px 适配 PC）
   前缀 lg-*，与其他页面完全隔离
   ============================================================ */
* { box-sizing: border-box; }
body.lg-body { margin: 0; }

/* ---------- 整页蓝色渐变背景，内容自动居中 ---------- */
.lg-bg {
    min-height: 100vh;
    background: linear-gradient(170deg, #4d8dff 0%, #7fb0ff 38%, #d4e5ff 72%, #f5f5f7 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* 整体内容随窗体大小水平+垂直自动居中 */
    gap: 30px;
    padding: 40px 24px;
    position: relative;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
}
.lg-bg::before { /* 左上装饰圆 */
    content: ""; position: absolute; top: -70px; left: -70px;
    width: 220px; height: 220px; border-radius: 50%;
    background: rgba(255, 255, 255, .14);
}
.lg-bg::after { /* 右下装饰圆 */
    content: ""; position: absolute; bottom: -90px; right: -60px;
    width: 260px; height: 260px; border-radius: 50%;
    background: rgba(255, 255, 255, .12);
}

/* ---------- 品牌区 ---------- */
.lg-brand {
    text-align: center; color: #fff; position: relative; z-index: 1;
}
.lg-brand h1 { font-size: 22px; font-weight: 700; text-shadow: 0 1px 3px rgba(20, 60, 150, .2); }
.lg-brand p { font-size: 13px; opacity: .92; margin-top: 5px; }

/* ---------- 登录卡片 ---------- */
.lg-card {
    width: 100%; max-width: 400px;
    background: #fff; border-radius: 18px;
    padding: 28px 24px 24px;
    box-shadow: 0 12px 40px rgba(31, 45, 61, .12);
    position: relative; z-index: 1;
}
.lg-card h2 { font-size: 18px; font-weight: 700; color: #222; margin-bottom: 20px; }

.lg-field {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid #e5e8ee; border-radius: 12px;
    padding: 0 14px; height: 48px;
    margin-bottom: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.lg-field:focus-within {
    border-color: #4d8dff;
    box-shadow: 0 0 0 3px rgba(77, 141, 255, .15);
}
.lg-field svg { width: 20px; height: 20px; stroke: #9aa5b5; flex-shrink: 0; }
.lg-field:focus-within svg { stroke: #2e6fe8; }
.lg-field input {
    border: 0; outline: 0; flex: 1; height: 100%;
    font-size: 15px; color: #333; background: transparent;
    min-width: 0;
}
.lg-field input::placeholder { color: #b3bac4; }

/* 验证码行 */
.lg-captcha { display: flex; gap: 10px; margin-bottom: 14px; }
.lg-captcha .lg-field { flex: 1; margin-bottom: 0; min-width: 0; }
.lg-codeimg {
    width: 118px; height: 44px; border-radius: 12px;
    border: 1px solid #e5e8ee; overflow: hidden; cursor: pointer;
    flex-shrink: 0; background: #fff;
}
/* 验证码原图 70x26（比例≈2.69:1），容器 118x44 同比例；contain 完整显示防裁切（2026-10-15 修复手机端显示不全） */
.lg-codeimg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lg-codeimg:hover { border-color: #4d8dff; }

/* 辅助行 */
.lg-aux {
    display: flex; align-items: center; justify-content: flex-start;
    font-size: 13px; color: #8a94a6; margin: 4px 0 18px;
}
.lg-remember { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.lg-remember input { accent-color: #2e6fe8; width: 15px; height: 15px; }

/* 登录按钮 */
.lg-btn {
    width: 100%; height: 48px; border: 0; border-radius: 12px;
    background: linear-gradient(90deg, #4d8dff, #2e6fe8);
    color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 6px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(46, 111, 232, .35);
    transition: transform .1s, box-shadow .15s;
}
.lg-btn:active { transform: scale(.98); box-shadow: 0 3px 10px rgba(46, 111, 232, .3); }

/* ---------- PC 端（≥768px） ---------- */
@media (min-width: 768px) {
    .lg-bg { padding: 40px 24px; }
    .lg-brand h1 { font-size: 26px; }
    .lg-card { max-width: 440px; padding: 34px 36px 30px; }
}