/* ============================================================
   插件市场 · 登录页独立样式
   ------------------------------------------------------------
   为什么不复用 backend/merchant 的 login.css：
     它有自己的 .login-page/.login-card/.card-left/.card-right 规则，
     且 DOM 结构依赖 .form-group/.input-wrapper，
     与本页 layui-form 结构冲突，会导致文字叠压、输入框被压扁。
   这里用 mg- 前缀彻底隔离，互不干扰。
   ============================================================ */

* { box-sizing: border-box; }

.mg-login-page {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #eef1f6;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(30, 96, 145, .10) 0, transparent 42%),
        radial-gradient(circle at 88% 82%, rgba(45, 138, 138, .10) 0, transparent 42%);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ---------- 卡片 ---------- */
.mg-login-card {
    display: flex;
    width: 880px;
    max-width: 100%;
    min-height: 440px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(23, 43, 77, .14);
}

/* ---------- 左：品牌区 ---------- */
.mg-login-brand {
    flex: 0 0 46%;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    background: linear-gradient(150deg, #1e6091 0%, #2d8a8a 100%);
    position: relative;
    overflow: hidden;
}
.mg-login-brand::after {
    /* 右下角装饰光斑 */
    content: "";
    position: absolute;
    right: -60px; bottom: -60px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
}
.mg-login-brand .mg-brand-title {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: .5px;
    line-height: 1.35;
    position: relative;
    z-index: 1;
}
.mg-login-brand .mg-brand-desc {
    margin: 0 0 28px;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .86);
    position: relative;
    z-index: 1;
}
.mg-login-brand .mg-brand-feats {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}
.mg-login-brand .mg-brand-feats li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    line-height: 1;
    padding: 11px 0;
    color: rgba(255, 255, 255, .94);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.mg-login-brand .mg-brand-feats li:last-child { border-bottom: 0; }
.mg-login-brand .mg-brand-feats i { font-size: 15px; opacity: .9; }

/* ---------- 右：表单区 ---------- */
.mg-login-form-wrap {
    flex: 1 1 54%;
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.mg-login-form-wrap .mg-login-title {
    margin: 0 0 6px;
    font-size: 21px;
    font-weight: 600;
    color: #1d2129;
}
.mg-login-form-wrap .mg-login-sub {
    margin: 0 0 26px;
    font-size: 12px;
    color: #86909c;
    line-height: 1.6;
}

/* layui 表单在本页的适配：label 上置，输入框满宽 */
.mg-login-form-wrap .layui-form-item { margin-bottom: 18px; }
.mg-login-form-wrap .layui-form-label {
    float: none;
    display: block;
    width: auto;
    padding: 0 0 8px;
    text-align: left;
    font-size: 13px;
    color: #4e5969;
    line-height: 1.4;
}
.mg-login-form-wrap .layui-input-block {
    margin-left: 0 !important;
    min-height: 0;
}
.mg-login-form-wrap .layui-input {
    height: 42px;
    line-height: 42px;
    border-radius: 4px;
    border-color: #dcdfe6;
    font-size: 14px;
    padding-left: 12px;
}
.mg-login-form-wrap .layui-input:focus {
    border-color: #1e6091;
    box-shadow: 0 0 0 2px rgba(30, 96, 145, .12);
}
.mg-login-form-wrap .layui-btn {
    height: 42px;
    line-height: 42px;
    border-radius: 4px;
    background: #1e6091;
    font-size: 15px;
    letter-spacing: 2px;
}
.mg-login-form-wrap .layui-btn:hover { background: #174a73; }
.mg-login-form-wrap .mg-login-error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
    padding: 8px 12px;
    border-radius: 4px;
    background: #fef0f0;
    color: #f56c6c;
    font-size: 13px;
}

/* ---------- 页脚 ---------- */
.mg-login-foot {
    margin-top: 22px;
    font-size: 12px;
    color: #a0a8b4;
    text-align: center;
}

/* ---------- 响应式 ---------- */
@media (max-width: 760px) {
    .mg-login-card { flex-direction: column; min-height: 0; }
    .mg-login-brand { flex: none; padding: 32px 26px; }
    .mg-login-brand .mg-brand-feats { display: none; }
    .mg-login-form-wrap { padding: 32px 26px; }
}