@charset "utf-8";
/* 暖心益联 - 后台登录/注册/找回密码 新版样式
   独立文件，不改动共用的 login.css，避免影响收银台登录、餐饮收银台登录、排队大屏等页面 */

html, body { height: 100%; }
body { margin: 0; }

.lg-wrap {
    position: relative;
    min-height: 100%;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 48px 20px 96px;
    overflow: hidden;
    background-color: #eef3fb;
    background-image:
        radial-gradient(circle at 10% 14%, rgba(79, 140, 255, .22), transparent 52%),
        radial-gradient(circle at 90% 86%, rgba(45, 107, 240, .18), transparent 52%),
        linear-gradient(160deg, #f4f8fe 0%, #e8eefb 100%);
}

/* 背景装饰光斑 */
.lg-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lg-deco span {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(2px);
    opacity: .45;
}
.lg-deco span:nth-child(1) {
    width: 320px; height: 320px; top: -90px; right: -70px;
    background: linear-gradient(135deg, rgba(79, 140, 255, .30), rgba(79, 140, 255, 0));
}
.lg-deco span:nth-child(2) {
    width: 240px; height: 240px; bottom: 40px; left: -80px;
    background: linear-gradient(135deg, rgba(45, 107, 240, .22), rgba(45, 107, 240, 0));
}
.lg-deco span:nth-child(3) {
    width: 140px; height: 140px; top: 22%; left: 12%;
    background: linear-gradient(135deg, rgba(120, 170, 255, .28), rgba(120, 170, 255, 0));
}

/* 设了后台「登录背景图」时：铺满 + 压暗遮罩，保证表单可读 */
.lg-has-bg {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.lg-has-bg .lg-deco { display: none; }
.lg-has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(9, 24, 52, .48) 0%, rgba(9, 24, 52, .66) 100%);
}

/* ============ 卡片 ============ */
.lg-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    padding: 38px 40px 30px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px -18px rgba(21, 48, 105, .28), 0 2px 8px rgba(21, 48, 105, .06);
    animation: lg-in .42s cubic-bezier(.22, .68, .36, 1) both;
}
@keyframes lg-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 品牌区 */
.lg-brand {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 30px;
}
.lg-mark {
    -ms-flex: none;
    flex: none;
    width: 52px;
    height: 52px;
    margin-right: 14px;
    border-radius: 15px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: linear-gradient(135deg, #4f8cff 0%, #2d6bf0 100%);
    box-shadow: 0 8px 18px -6px rgba(45, 107, 240, .62);
}
.lg-mark svg { width: 26px; height: 26px; display: block; }
.lg-brand-text { min-width: 0; }
.lg-brand-text h1 {
    margin: 0;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.25;
    color: #1b2536;
    letter-spacing: .5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lg-brand-text p {
    margin: 3px 0 0;
    font-size: 13px;
    color: #8a94a6;
    letter-spacing: 1.5px;
}

/* ============ 表单 ============ */
.lg-form .layui-form-item { position: relative; margin-bottom: 18px; }
.lg-form .layui-form-item:last-child { margin-bottom: 0; }
.lg-form .layui-form-label { display: none; }

.lg-form .layui-input {
    width: 100%;
    box-sizing: border-box;
    height: 48px;
    line-height: 48px;
    padding: 0 14px 0 44px;
    font-size: 14px;
    color: #1b2536;
    background-color: #f5f7fb;
    border: 1px solid #e6ebf5;
    border-radius: 11px;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
    -webkit-appearance: none;
}
.lg-form .layui-input::-webkit-input-placeholder { color: #a9b2c3; }
.lg-form .layui-input::placeholder { color: #a9b2c3; }
.lg-form .layui-input:hover { border-color: #cfdcf2; }
.lg-form .layui-input:focus {
    background-color: #fff;
    border-color: #4f8cff;
    box-shadow: 0 0 0 3px rgba(79, 140, 255, .16);
}

/* 输入框左侧图标 */
.lg-icon {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 44px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 17px;
    color: #a9b2c3;
    pointer-events: none;
    transition: color .18s ease;
}
.lg-field-focus .lg-icon { color: #2d6bf0; }

/* 验证码行 */
.lg-row { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; }
.lg-row .lg-cell-input { -ms-flex: 1; flex: 1; position: relative; min-width: 0; }
/* 155px 由验证码原图比例推得：原图 200x62，按 155px 宽渲染时高度恰为 48px，正好与输入框对齐。
   这里刻意「按原始比例缩放」而不是裁切——验证码一旦被裁掉首尾字符就登不进去了。
   若日后改了 config/captcha.php 的尺寸配置，只会轻微错位，不会裁切。 */
.lg-row .lg-cell-img { -ms-flex: none; flex: none; width: 155px; margin-left: 12px; }

.lg-form .layadmin-user-login-codeimg {
    display: block;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    cursor: pointer;
    border: 1px solid #e6ebf5;
    border-radius: 11px;
    background-color: #f5f7fb;
    transition: border-color .18s ease;
}
.lg-form .layadmin-user-login-codeimg:hover { border-color: #cfdcf2; }

/* 验证码为 0/空时的占位（图片没加载出来也不塌陷） */
.lg-form .layadmin-user-login-codeimg[src=""] { visibility: hidden; }

/* 记住密码 */
.lg-form .layui-form-item.lg-opt { margin: 4px 0 0; }
.lg-form .layui-form-checkbox[lay-skin="primary"] { padding-left: 26px; }
.lg-form .layui-form-checkbox[lay-skin="primary"] span { font-size: 13px; color: #6b7485; padding-right: 0; }
.lg-form .layui-form-checkbox[lay-skin="primary"] i {
    width: 16px;
    height: 16px;
    line-height: 15px;
    border-radius: 5px;
    border: 1px solid #d3dbe9;
    background-color: #fff;
    transition: all .18s ease;
}
.lg-form .layui-form-checkbox[lay-skin="primary"]:hover i { border-color: #4f8cff; }
.lg-form .layui-form-checkbox[lay-skin="primary"] i.layui-icon-ok:before { font-size: 11px; }
.lg-form .layui-form-checked[lay-skin="primary"] i {
    border-color: #2d6bf0 !important;
    background-color: #2d6bf0 !important;
    color: #fff !important;
}

/* 主按钮 */
.lg-form .lg-submit {
    width: 100%;
    height: 48px;
    line-height: 48px;
    padding: 0;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 4px;
    text-indent: 4px;
    color: #fff;
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    background: linear-gradient(135deg, #4f8cff 0%, #2d6bf0 100%);
    box-shadow: 0 12px 24px -10px rgba(45, 107, 240, .82);
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.lg-form .lg-submit:hover {
    filter: brightness(1.06);
    box-shadow: 0 16px 28px -10px rgba(45, 107, 240, .9);
}
.lg-form .lg-submit:active { transform: translateY(1px); }
.lg-form .layui-btn.lg-submit:hover { color: #fff; }

/* 次要按钮（短信验证码等） */
.lg-form .lg-subbtn {
    width: 100%;
    height: 48px;
    line-height: 46px;
    padding: 0 14px;
    font-size: 13px;
    color: #2d6bf0;
    background: #fff;
    border: 1px solid #cfdcf2;
    border-radius: 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .18s ease, background-color .18s ease;
}
.lg-form .lg-subbtn:hover { border-color: #4f8cff; background-color: #f4f8ff; }

/* 底部链接行 */
.lg-links {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 20px;
    font-size: 13px;
    min-height: 20px;
}
.lg-links .lg-link {
    color: #2d6bf0;
    text-decoration: none;
    transition: color .18s ease;
}
.lg-links .lg-link:hover { color: #1e52c4; text-decoration: underline; }
.lg-links .lg-link-r { margin-left: auto; }

/* 协议勾选 */
.lg-agree {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 4px;
}
.lg-agree .lg-agree-text { margin-left: 6px; font-size: 13px; color: #6b7485; }
.lg-agree .lg-agree-text a { color: #2d6bf0; text-decoration: none; }
.lg-agree .lg-agree-text a:hover { text-decoration: underline; }

/* ============ 页脚 ============ */
.lg-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 18px 20px;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.7;
    color: #98a2b3;
    box-sizing: border-box;
}
.lg-footer a { color: #98a2b3; text-decoration: none; padding: 0 3px; }
.lg-footer a:hover { color: #2d6bf0; }
.lg-footer .lg-sep { padding: 0 6px; opacity: .6; }
.lg-has-bg .lg-footer { color: rgba(255, 255, 255, .82); }
.lg-has-bg .lg-footer a { color: rgba(255, 255, 255, .82); }
.lg-has-bg .lg-footer a:hover { color: #fff; }

/* ============ 小屏适配 ============ */
@media screen and (max-width: 768px) {
    .lg-wrap { padding: 24px 16px 72px; }
    .lg-card { max-width: none; padding: 28px 22px 24px; border-radius: 16px; }
    .lg-mark { width: 46px; height: 46px; border-radius: 13px; }
    .lg-mark svg { width: 23px; height: 23px; }
    .lg-brand-text h1 { font-size: 20px; }
    .lg-row .lg-cell-img { width: 132px; margin-left: 10px; }
    .lg-footer { position: static; margin-top: 22px; }
}
@media screen and (max-width: 380px) {
    /* 再窄就把验证码换到下一行，避免输入框被压得没法用 */
    .lg-row { -ms-flex-wrap: wrap; flex-wrap: wrap; }
    .lg-row .lg-cell-input { -ms-flex: 1 1 100%; flex: 1 1 100%; }
    .lg-row .lg-cell-img { -ms-flex: 1 1 100%; flex: 1 1 100%; width: auto; margin: 10px 0 0; }
    /* 换行后容器变整行宽，图片改回按高度定尺寸，避免被拉成巨幅 */
    .lg-form .layadmin-user-login-codeimg { width: auto; height: 46px; }
}