/* 职遇优寻 - 前台登录 / 注册（PC 与 H5 自适应） */

:root {
    --brand: #2f6bff;
    --brand-dark: #1f55e0;
    --brand-light: #eaf1ff;
    --title: #1d263a;
    --sub: #777d89;
    --border: #dcdfe6;
    --border-strong: #a5a8b0;
    --error: #eb5757;
}

* {
    box-sizing: border-box;
}

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

body {
    background: #fff;
    color: var(--title);
    font-size: 14px;
    line-height: 1.5;
    font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    border: 0;
    vertical-align: middle;
}

.login-main {
    display: flex;
    align-items: stretch;
    min-height: 100%;
}

/* ---------------- 左侧品牌区 ---------------- */

.brand-side {
    width: 520px;
    flex: 0 0 520px;
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #eaf4ff url(/static/index/images/left-bg.eaf5ff6b.png) center / cover no-repeat;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand-logo img {
    height: 38px;
    object-fit: contain;
}

.brand-name {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--title);
}

/* 标语文字只在 H5 出现 */
.brand-slogan {
    display: none;
}

.brand-showcase {
    margin-top: 34px;
}

.brand-showcase h1 {
    margin: 0 0 18px;
    color: #0f2a52;
    font-size: 40px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 1px;
    white-space: nowrap;
}

.brand-showcase h1 span {
    color: #1a6cf0;
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.showcase-card {
    min-width: 0;
    padding: 22px 20px;
    border-radius: 20px;
    background: linear-gradient(147deg, #e4f6fd 0%, #f2fbfe 42%, #fff 100%);
    box-shadow: 0 6px 18px rgba(38, 84, 138, .12);
}

.showcase-card strong {
    display: block;
    margin-bottom: 12px;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1px;
    white-space: nowrap;
}

.showcase-card strong small {
    margin-left: 2px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0;
}

.showcase-card p {
    margin: 0;
    color: #16305c;
    font-size: 16px;
    line-height: 1.75;
}

.showcase-card .tone-blue {
    color: #1a6cf0;
}

.showcase-card .tone-green {
    color: #11b083;
}

.showcase-card .tone-orange {
    color: #f4681c;
    font-size: 28px;
    letter-spacing: 0;
}

.showcase-card .tone-purple {
    color: #7a3ae8;
}

/* 底部整条通栏，承载两条服务数据 */
.showcase-summary {
    margin-top: 16px;
    padding: 20px 22px;
}

.showcase-summary p {
    position: relative;
    padding-left: 22px;
    line-height: 1.75;
}

.showcase-summary p + p {
    margin-top: 10px;
}

.showcase-summary p::before {
    position: absolute;
    top: .66em;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #17c0a8;
    content: "";
}

.showcase-summary b {
    margin-left: 2px;
    color: #1a6cf0;
    font-size: 18px;
    font-weight: 800;
}

.brand-foot {
    opacity: .8;
    text-align: left;
    font-size: 12px;
    color: #58606d;
    line-height: 1.8;
}

.brand-foot a {
    color: #58606d;
}

.brand-foot a:hover {
    color: var(--brand);
}

/* 笔记本等较矮屏幕下收紧展示区，避免左栏出现滚动 */
@media screen and (max-height: 860px) {
    .brand-showcase {
        margin-top: 24px;
    }

    .brand-showcase h1 {
        margin-bottom: 13px;
        font-size: 33px;
    }

    .showcase-grid {
        gap: 10px;
    }

    .showcase-card {
        padding: 14px 15px;
        border-radius: 15px;
    }

    .showcase-card strong {
        margin-bottom: 7px;
        font-size: 25px;
    }

    .showcase-card strong small {
        font-size: 15px;
    }

    .showcase-card .tone-orange {
        font-size: 22px;
    }

    .showcase-card p {
        font-size: 13px;
        line-height: 1.6;
    }

    .showcase-summary {
        margin-top: 10px;
        padding: 13px 15px;
    }

    .showcase-summary b {
        font-size: 15px;
    }
}

/* ---------------- 右侧表单区 ---------------- */

.form-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.form-panel {
    width: 400px;
    max-width: 100%;
}

.form-tab {
    display: flex;
    margin-bottom: 28px;
    border: 1px solid #e8e9eb;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

.tab-item {
    flex: 1;
    padding: 11px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #a5a8b0;
    background: #f9fafb;
    transition: background .2s, color .2s;
}

.tab-item.active {
    background: #fff;
    color: var(--title);
}

.auth-form.is-hidden {
    display: none;
}

.form-head {
    margin-bottom: 24px;
}

.form-head h1 {
    margin: 0 0 4px;
    font-size: 28px;
    font-weight: 600;
    color: var(--title);
}

.form-head span {
    font-size: 14px;
    color: var(--sub);
}

.input-content {
    margin-bottom: 18px;
}

.input-title {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--title);
}

.input-border {
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 12px 0 15px;
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    transition: border-color .2s;
}

.input-border:hover {
    border-color: var(--brand);
}

.input-border:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(47, 107, 255, .12);
}

.input-border.is-error {
    border-color: var(--error);
}

.input-border input {
    flex: 1;
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: var(--title);
}

.input-border input::placeholder {
    color: #b6bac2;
}

.pwd-eye {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    cursor: pointer;
    opacity: .7;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777d89' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

.pwd-eye:hover {
    opacity: 1;
}

.pwd-eye.is-open {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.input-error {
    min-height: 18px;
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--error);
}

.auth-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 12px 0;
    border: none;
    border-radius: 6px;
    background: var(--brand);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: background .2s;
    font-family: inherit;
}

.auth-btn:hover {
    background: var(--brand-dark);
}

.auth-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.form-switch {
    margin: 18px 0 0;
    text-align: center;
    font-size: 14px;
    color: var(--sub);
}

.form-switch a {
    color: var(--brand);
}

.form-switch a:hover {
    color: var(--brand-dark);
}

/* 面板底部版权：仅 H5 显示，PC 由左侧品牌区承担 */
.panel-foot {
    display: none;
    margin-top: 32px;
    text-align: center;
    font-size: 12px;
    color: #9aa0aa;
}

.panel-foot a {
    color: #9aa0aa;
}

.panel-foot a:hover {
    color: var(--brand);
}

.panel-foot .foot-sep {
    margin: 0 6px;
}

/* ---------------- 轻提示 ---------------- */

.toast {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 999;
    max-width: 80%;
    padding: 14px 28px;
    border-radius: 8px;
    background: rgba(29, 38, 58, .9);
    box-shadow: 0 10px 32px rgba(29, 38, 58, .22);
    color: #fff;
    font-size: 15px;
    text-align: center;
    /* 居中显示，用缩放淡入代替下滑，位移感在屏幕正中会显得突兀 */
    transform: translate(-50%, -50%) scale(.92);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
}

.toast.is-show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.toast.is-success {
    background: rgba(31, 85, 224, .95);
}

/* ---------------- H5 自适应 ---------------- */

@media screen and (max-width: 900px) {

    html,
    body {
        height: auto;
        background: #f5f7fa;
    }

    .login-main {
        display: block;
        min-height: 100vh;
    }

    .brand-side {
        width: auto;
        flex: none;
        display: block;
        padding: 28px 24px 56px;
        background-position: center 30%;
    }

    .brand-logo img {
        height: 32px;
    }

    .brand-name {
        font-size: 19px;
    }

    /* 左侧信息卡在手机上会占满整屏，改用一行标语顶替 */
    .brand-slogan {
        display: block;
        margin-top: 16px;
    }

    .brand-slogan h2 {
        margin: 0;
        font-size: 23px;
        font-weight: 600;
        color: var(--title);
    }

    .brand-slogan p {
        margin: 6px 0 0;
        font-size: 13px;
        color: var(--sub);
    }

    .brand-showcase,
    .brand-foot {
        display: none;
    }

    .form-side {
        position: relative;
        margin-top: -28px;
        padding: 0;
    }

    .form-panel {
        width: 100%;
        min-height: 60vh;
        padding: 26px 20px 40px;
        background: #fff;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -4px 20px rgba(29, 38, 58, .06);
    }

    .form-head h1 {
        font-size: 22px;
    }

    .form-tab {
        margin-bottom: 24px;
    }

    .input-border {
        height: 46px;
    }

    /* iOS 上小于 16px 的输入框会触发自动放大 */
    .input-border input {
        font-size: 16px;
    }

    .auth-btn {
        padding: 13px 0;
    }

    .panel-foot {
        display: block;
    }
}

@media screen and (max-width: 360px) {
    .brand-side {
        padding: 24px 16px 52px;
    }

    .form-panel {
        padding: 22px 16px 32px;
    }
}