/* ============================================================
   油掌柜门店中心 · 登录页样式（参考加油行业 B 端竞品风格）
   布局：左品牌区 + 右磨砂玻璃登录卡片
   配色：科技蓝主色调 + 能源橙点缀；正文字号 ≥15px
   ============================================================ */
html { height: 100%; }
body.oil-login-body {
    min-height: 100%;
    margin: 0;
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    background: #050f26;
    -webkit-font-smoothing: antialiased;
}

/* ---------- 背景：加油站夜景（内嵌SVG） + 压暗遮罩 ---------- */
.oil-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; overflow: hidden; }
.oil-bg svg { width: 100%; height: 100%; display: block; }
.oil-mask {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
    background: linear-gradient(96deg,
        rgba(4,15,35,.84) 0%,
        rgba(4,15,35,.55) 40%,
        rgba(4,15,35,.16) 68%,
        rgba(4,15,35,.42) 100%);
}

/* ---------- 主体布局 ---------- */
.oil-login-wrap {
    position: relative; z-index: 2;
    min-height: 100vh; box-sizing: border-box;
    max-width: 1280px; margin: 0 auto;
    padding: 56px 56px 96px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 64px;
}

/* ---------- 左侧品牌区 ---------- */
.oil-brand { flex: 1 1 auto; min-width: 0; max-width: 600px; color: #fff; }
.oil-logo { display: flex; align-items: center; gap: 16px; margin-bottom: 38px; }
.oil-logo-badge {
    width: 62px; height: 62px; border-radius: 16px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #ffa53c, #ff6a00);
    box-shadow: 0 10px 28px rgba(255,122,0,.45);
}
.oil-logo-badge svg { width: 36px; height: 36px; }
.oil-logo-name { font-size: 30px; font-weight: 700; letter-spacing: 3px; line-height: 1.2; }
.oil-logo-sub { font-size: 15px; letter-spacing: 2px; color: rgba(255,255,255,.62); margin-top: 3px; }
.oil-title {
    font-size: 46px; font-weight: 700; letter-spacing: 2px;
    margin: 0 0 18px; line-height: 1.25;
    text-shadow: 0 4px 22px rgba(3,12,30,.55);
}
.oil-title em { font-style: normal; color: #ffb85c; }
.oil-slogan { font-size: 19px; line-height: 1.8; color: rgba(255,255,255,.85); margin: 0 0 34px; }
.oil-features {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 28px;
    max-width: 520px;
}
.oil-features li {
    display: flex; align-items: center; gap: 12px;
    font-size: 17px; color: rgba(255,255,255,.92);
}
.oil-features .fa {
    flex: none; width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: #ffc46b;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
}

/* ---------- 右侧登录卡片（磨砂玻璃） ---------- */
.oil-card {
    flex: none; width: 430px; box-sizing: border-box;
    padding: 42px 40px 36px;
    background: rgba(255,255,255,.93);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(2,10,26,.55);
}
.oil-card-title { margin: 0; font-size: 26px; font-weight: 700; color: #12294e; }
.oil-card-sub { margin: 8px 0 30px; font-size: 15px; color: #7c8aa6; }

.oil-field { position: relative; margin-bottom: 18px; }
.oil-field > .fa {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    width: 20px; text-align: center; font-size: 16px; color: #8ba0c2; z-index: 1;
}
.oil-card .form-control {
    display: block; width: 100%; box-sizing: border-box;
    height: 48px !important;
    padding: 6px 12px 6px 44px !important;
    font-size: 16px; color: #22314e;
    background-color: #f7f9fd;
    border: 1px solid #dde5f1; border-radius: 10px;
    box-shadow: none; outline: none;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.oil-card .form-control::-webkit-input-placeholder { color: #a8b4c9; font-size: 16px; }
.oil-card .form-control:focus {
    border-color: #2e7cf6 !important;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(46,124,246,.14) !important;
}
.oil-field label.error { display: block; margin: 5px 2px 0; color: #e5484d; font-size: 15px; line-height: 1.4; }

/* 验证码行 */
.oil-captcha { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.oil-captcha .oil-field { flex: 1; margin-bottom: 0; }
.oil-captcha-img { flex: none; display: block; }
.oil-captcha-img .imgcode {
    display: block; width: 128px; height: 48px;
    border: 1px solid #dde5f1; border-radius: 10px; background: #fff;
    cursor: pointer; object-fit: cover;
}

/* 记住我 / 注册入口 */
.oil-aux {
    display: flex; align-items: center; justify-content: space-between;
    margin: 2px 0 24px; font-size: 15px;
}
.oil-aux .checkbox-custom { margin-bottom: 0; padding: 0 0 0 24px; }
.oil-aux .checkbox-custom label { font-size: 15px; color: #4b5b78; }
.oil-aux-link { font-size: 15px; color: #1e5eff; }
.oil-aux-link:hover { color: #2e7cf6; }

/* 登录按钮 */
.oil-btn-login {
    display: block; width: 100%; height: 52px;
    border: 0; border-radius: 10px; cursor: pointer;
    font-size: 18px; font-weight: 700; letter-spacing: 10px; text-indent: 10px;
    color: #fff; font-family: inherit;
    background: linear-gradient(135deg, #3b8bff, #1e5eff);
    box-shadow: 0 12px 26px rgba(30,94,255,.38);
    transition: filter .2s, transform .15s, box-shadow .2s;
}
.oil-btn-login:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 14px 30px rgba(30,94,255,.46); }
.oil-btn-login:active { transform: translateY(0); filter: brightness(.97); }

/* ---------- 注册页补充（register.html） ---------- */
.oil-aux-terms { margin-top: 2px; }
.oil-goto-login {
    display: block; text-align: center;
    margin-top: 16px;
    font-size: 15px; color: #1e5eff;
}
.oil-goto-login:hover { color: #2e7cf6; }

/* ---------- 页脚 ---------- */
.oil-footer {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 14px 16px; text-align: center;
    font-size: 14px; color: rgba(255,255,255,.55);
    border-top: 1px solid rgba(255,255,255,.12);
    background: rgba(4,14,32,.35);
}

/* ---------- 记住我 checkbox（沿用原交互结构，尺寸放大） ---------- */
.checkbox-custom { position: relative; display: inline-block; padding: 0 15px 0 25px; margin-bottom: 7px; }
.checkbox-custom input[type="checkbox"] { opacity: 0; position: absolute; cursor: pointer; z-index: 2; margin: -6px 0 0; top: 50%; left: 3px; }
.checkbox-custom label:before {
    content: ''; position: absolute; top: 50%; left: 0; margin-top: -9px;
    width: 18px; height: 18px; display: inline-block;
    border-radius: 4px; border: 1px solid #c3cede; background: #fff;
}
.checkbox-custom input[type="checkbox"]:checked + label:after {
    position: absolute; display: inline-block;
    font-family: 'Glyphicons Halflings'; content: "\e013";
    top: 42%; left: 3px; margin-top: -5px;
    font-size: 12px; line-height: 1; width: 16px; height: 16px; color: #1e5eff;
}
.checkbox-custom label { cursor: pointer; line-height: 1.2; font-weight: normal; margin-bottom: 0; text-align: left; }

/* 弹层提示（登录失败 $.modal.msg 使用） */
body .layer-ext-moon-msg[type="dialog"] { min-width: 100px !important; }
body .layer-ext-moon-msg { background-color: rgba(0,0,0,0.6); color: #fff; border: none; }
body .layer-ext-moon-msg .layui-layer-content { padding: 12px 25px; text-align: center; }

/* ---------- 响应式 ---------- */
@media (max-height: 840px) {
    .oil-login-wrap { padding-top: 36px; padding-bottom: 84px; }
    .oil-logo { margin-bottom: 24px; }
    .oil-title { font-size: 40px; }
    .oil-slogan { margin-bottom: 24px; }
}
@media (max-width: 1080px) {
    .oil-login-wrap { flex-direction: column; justify-content: center; gap: 36px; padding: 40px 20px 88px; }
    .oil-brand { text-align: center; }
    .oil-logo { justify-content: center; }
    .oil-features { margin: 0 auto; }
    .oil-card { width: 100%; max-width: 440px; }
}
@media (max-width: 560px) {
    .oil-title { font-size: 32px; }
    .oil-slogan { font-size: 17px; }
    .oil-features { grid-template-columns: 1fr; }
    .oil-card { padding: 32px 24px 28px; }
}