/**
 * 用户登录样式表 —— 按 media/（theme.thyuu.com）设计标准重构
 * 设计令牌、玻璃卡片、字体、过渡曲线均与参考站 styles.css 对齐：
 *  - 令牌：--gap / --nap / --color-main-* / --color-grey-* / --color-silv-* / --transition-* / --shadow-card
 *  - 字体：正文 MiSans VF（小米 CDN），标题 字制区喜脉喜欢体（font-weight 200）
 *  - 卡片：background var(--color-silv-50) + backdrop-filter blur(1em) saturate(2) + 0 0 1em 阴影
 */

/* 标题字体（server.js 别名路由指向主站根目录 ttf） */
@font-face {
    font-family: '字制区喜脉喜欢体';
    src: url('/font-title.ttf') format('truetype');
    font-weight: 200;
    font-display: swap;
}

/* ================= 设计令牌（与 media/styles.css 一致） ================= */
body {
    --gap: 1.5rem;
    --nap: 4rem;

    --bgc: hsl(0deg 0% 98%);
    --hue: var(--custom-main-hue, 0deg);
    --sat: var(--custom-main-sat, 77%);
    --lig: var(--custom-main-lig, 77%);
    --color-main-10: hsl(var(--hue) var(--sat) var(--lig) / .1);
    --color-main-50: hsl(var(--hue) var(--sat) var(--lig) / .5);
    --color-main-100: hsl(var(--hue) var(--sat) var(--lig));
    --color-grey-05: hsl(0deg 0% 0% / .05);
    --color-grey-10: hsl(0deg 0% 0% / .1);
    --color-grey-50: hsl(0deg 0% 0% / .5);
    --color-silv-10: hsl(0deg 0% 100% / .1);
    --color-silv-50: hsl(0deg 0% 100% / .5);

    --transition-fast: .15s ease;
    --transition-normal: .2s ease;
    --transition-slow: .5s ease;
    --transition-panel: .5s cubic-bezier(.5, 0, 0, 1.4);
    --transition-hover: .3s ease;
    --shadow-card: 0 0 1em var(--color-grey-05);
    --shadow-card-hover: 0 1em 3em var(--color-grey-10);

    font: 300 16px / 2 'MiSans VF', sans-serif;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    color: hsl(0deg 0% 20%);
    background: var(--bgc);
    min-height: 100vh;
}

/* 参考站式柔光背景：两团主/辅色光晕缓慢漂浮 */
body::before {
    content: '';
    position: fixed;
    inset: -20%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 22% 24%, hsl(var(--hue) var(--sat) var(--lig) / .09), transparent 55%),
        radial-gradient(circle at 78% 76%, hsl(20deg 77% 77% / .07), transparent 55%),
        radial-gradient(circle at 60% 10%, hsl(0deg 0% 100% / .8), transparent 60%);
    animation: loginGlow 24s ease-in-out infinite alternate;
}

@keyframes loginGlow {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(2%, -2%, 0) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
}

a {
    text-decoration: none;
}

::placeholder {
    color: var(--color-grey-50);
}

/* ================= 工具类（HTML 既有钩子，保留） ================= */
.fl { float: left; }
.fr { float: right; }
.pb0 { padding-bottom: 0; }
.red { color: var(--color-main-100); }

/* login.js 依赖 .active 切换显示（表单区 + 右上角切换按钮共用） */
.active { display: block !important; }

.forgot-link {
    color: var(--color-main-100);
    font-size: .8125rem;
    cursor: pointer;
    transition: var(--transition-hover);
}

.forgot-link:hover {
    opacity: .75;
}

/* ================= 顶部 Logo ================= */
#header {
    position: relative;
    text-align: center;
    padding: var(--nap) 0 var(--gap);
}

#header .logo {
    display: inline-flex;
    align-items: center;
    gap: .5em;
    font-family: '字制区喜脉喜欢体', 'MiSans VF', sans-serif;
    font-weight: 200;
    font-size: 1.75rem;
    letter-spacing: .12em;
    color: hsl(0deg 0% 22%);
}

#header .logo img {
    height: 2.25rem;
    vertical-align: middle;
}

/* ================= 登录卡片（参考站标准玻璃卡片） ================= */
.layui-fluid.userLogin {
    position: relative; /* 右上角切换圆钮的定位锚点 */
    padding: 0;
    width: 25rem;
    max-width: calc(100vw - 2rem);
    margin: clamp(1rem, 8vh, 3rem) auto var(--nap);
    background: var(--color-silv-50);
    -webkit-backdrop-filter: blur(1em) saturate(2);
    backdrop-filter: blur(1em) saturate(2);
    border-radius: var(--gap);
    box-shadow: var(--shadow-card);
    padding: var(--gap);
    box-sizing: border-box;
}

/* 账号登录 / 扫码登录 两个视图（.active 显示） */
.form-items.formLogin,
.form-items.scanLogin {
    display: none;
}

/* ================= 方式切换胶囊（参考站 toggle-btnist 风格） ================= */
.userLogin .layui-tab {
    margin: 0;
}

.userLogin .layui-tab-title {
    display: flex;
    gap: .25em;
    height: 3rem;
    padding: .25em;
    margin: 0 0 var(--gap);
    background: hsl(0deg 0% 0% / .04);
    border: 0 !important;
    border-radius: 1.5rem;
    box-sizing: border-box;
    white-space: nowrap;
}

.userLogin .layui-tab-title li {
    flex: 1;
    height: 2.5rem;
    line-height: 2.5rem;
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: .875rem;
    color: var(--color-grey-50);
    border-radius: 1.25rem;
    cursor: pointer;
    transition: var(--transition-hover);
    box-sizing: border-box;
}

.userLogin .layui-tab-title li:hover {
    color: var(--color-main-100);
}

.userLogin .layui-tab-title li.layui-this {
    color: #fff;
    font-weight: 400;
    background: var(--color-main-100);
    box-shadow: 0 .2em .6em var(--color-main-50);
}

.userLogin .layui-tab-title li.layui-this:hover {
    color: #fff;
}

/* 去掉 layui 默认下划线指示条 */
.userLogin .layui-tab-brief > .layui-tab-title .layui-this:after,
.userLogin .layui-tab-brief > .layui-tab-more li.layui-this:after {
    display: none;
}

.userLogin .layui-tab-content {
    padding: 0;
}

/* ================= 输入框（胶囊玻璃字段） ================= */
.userLogin .item-input {
    display: flex;
    align-items: center;
    height: 2.75rem;
    margin-top: .75em;
    padding: 0 .25em 0 1em;
    background: hsl(0deg 0% 100% / .6);
    border: thin solid var(--color-grey-10);
    border-radius: 1.375rem;
    box-sizing: border-box;
    transition: var(--transition-hover);
}

.userLogin .item-input:hover {
    border-color: var(--color-main-50);
}

.userLogin .item-input:focus-within {
    border-color: var(--color-main-100);
    box-shadow: 0 0 .6em var(--color-main-10);
}

.userLogin .item-input .inputStyle {
    flex: 1;
    min-width: 0;
    height: 100%;
    line-height: normal;
    padding: 0 .5em 0 0;
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    outline: 0;
    resize: none;
    box-sizing: border-box;
}

.userLogin .item-input .fr-icon {
    flex: none;
    cursor: pointer;
    color: var(--color-grey-50);
    transition: var(--transition-hover);
}

.userLogin .item-input .fr-icon:hover {
    color: var(--color-main-100);
}

/* 短信验证码入口：独立胶囊按钮（参考站 toggle 按钮风格，与输入行光学对齐） */
.userLogin .item-input .getCaptcha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.875rem;
    padding: 0 .9375em;
    margin-left: .5em;
    background: var(--color-main-10);
    border-radius: 1rem;
    color: var(--color-main-100);
    font-size: .8125rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: var(--transition-hover);
}

.userLogin .item-input .getCaptcha:hover {
    background: hsl(var(--hue) var(--sat) var(--lig) / .18);
}

.userLogin .item-input .getCaptcha:active {
    transform: scale(.96);
}

/* 图形验证码 */
.userLogin .captcha {
    flex: none;
    margin-left: .5em;
}

.userLogin .captcha img {
    display: block;
    height: 2rem;
    border-radius: .625rem;
    cursor: pointer;
    transition: var(--transition-hover);
}

.userLogin .captcha img:hover {
    transform: scale(1.03);
}

/* ================= 记住密码 / 忘记密码 ================= */
.userLogin .layui-form-item {
    margin-bottom: 0;
    margin-top: .75em;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.userLogin .layui-form-checkbox[lay-skin="primary"] > *,
.userLogin .layui-form-checkbox[lay-skin="primary"] span {
    color: hsl(0deg 0% 40%);
    font-size: .8125rem;
    padding-right: 0;
}

.userLogin .layui-form-checkbox[lay-skin="primary"]:hover i {
    border-color: var(--color-main-100) !important;
    color: #fff !important;
}

.userLogin .layui-form-checked[lay-skin="primary"] i {
    border-color: var(--color-main-100) !important;
    background-color: var(--color-main-100) !important;
    color: #fff !important;
}

/* ================= 登录按钮（参考站 CTA：主色渐变 + 主色投光） ================= */
.userLogin #iframeSubmit {
    width: 100%;
    height: 2.75rem;
    line-height: 2.75rem;
    padding: 0;
    margin-top: .75em;
    border: 0;
    border-radius: 1.375rem;
    box-sizing: border-box;
    cursor: pointer;
    color: #fff;
    font: 400 .9375rem / 2.75rem 'MiSans VF', sans-serif;
    letter-spacing: .25em;
    text-indent: .25em; /* 抵消字距，保持视觉居中 */
    background: linear-gradient(135deg, var(--color-main-100), hsl(var(--hue) calc(var(--sat) * .8) calc(var(--lig) - 10%)));
    box-shadow: 0 .2em .6em var(--color-main-50);
    transition: var(--transition-hover);
    -webkit-appearance: none;
    appearance: none;
}

.userLogin #iframeSubmit:hover {
    color: #fff;
    box-shadow: 0 .3em 1em var(--color-main-50);
    filter: brightness(1.03);
}

.userLogin #iframeSubmit:active {
    transform: scale(.98);
}

/* ================= 协议 ================= */
.userLogin .agreement {
    display: block;
    margin-top: .875em;
    color: hsl(0deg 0% 42%);
    font-size: .8125rem;
    line-height: 1.8;
    text-align: left;
}

.userLogin .agreement a {
    color: var(--color-main-100);
    transition: var(--transition-hover);
}

.userLogin .agreement a:hover {
    opacity: .75;
}

/* ================= 扫码登录 ================= */
.userLogin .scanLogin {
    text-align: center;
    padding: .25em 0 .5em;
}

.userLogin .scanLogin .qrcode-title {
    font-family: '字制区喜脉喜欢体', 'MiSans VF', sans-serif;
    font-weight: 200;
    font-size: 1.375rem;
    letter-spacing: .1em;
    color: hsl(0deg 0% 25%);
    line-height: 2;
    margin-bottom: .5em;
}

.userLogin .scanLogin .qrcode-Box {
    height: auto;
}

.userLogin .scanLogin .qrcode-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 11.25rem;
    height: 11.25rem;
    margin: 0 auto .875em;
    padding: .5rem;
    background: hsl(0deg 0% 100% / .7);
    border: thin solid var(--color-grey-05);
    border-radius: var(--gap);
    box-shadow: var(--shadow-card);
    box-sizing: border-box;
    line-height: 0;
    overflow: hidden;
    transition: var(--transition-hover);
}

.userLogin .scanLogin .qrcode-img:hover {
    box-shadow: var(--shadow-card-hover);
}

.userLogin .scanLogin .qrcode-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: calc(var(--gap) / 2);
}

.userLogin .scanLogin .qrcode-Box p {
    font-size: .8125rem;
    line-height: 2;
    color: var(--color-grey-50);
}

/* ================= 分隔线（参考站渐隐 hr） ================= */
.userLogin .loginLine {
    height: 1px;
    border: 0;
    margin: var(--gap) 0 0;
    background: linear-gradient(90deg, transparent, var(--color-grey-10), transparent);
}

/* ================= 右上角扫码/表单切换按钮（玻璃圆钮） ================= */
.userLogin .switchTabs {
    position: absolute;
    top: var(--gap);
    right: var(--gap);
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--color-silv-50);
    -webkit-backdrop-filter: blur(1em) saturate(2);
    backdrop-filter: blur(1em) saturate(2);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-hover);
    z-index: 2;
}

.userLogin .switchTabs:hover {
    box-shadow: var(--shadow-card-hover);
    transform: rotate(6deg);
}

.userLogin .switch-item {
    display: none;
    width: 2rem;
    height: 2rem;
}

.userLogin .switch-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: .85;
    transition: var(--transition-hover);
}

.userLogin .switchTabs:hover .switch-item img {
    opacity: 1;
    transform: scale(1.06);
}

/* ================= 移动端适配 ================= */
@media (max-width: 500px) {
    #header {
        padding: var(--gap) 0 var(--gap);
    }

    .layui-fluid.userLogin {
        padding: calc(var(--gap) - .25rem);
    }

    .userLogin .switchTabs {
        top: calc(var(--gap) - .25rem);
        right: calc(var(--gap) - .25rem);
        width: 2.75rem;
        height: 2.75rem;
    }

    .userLogin .switch-item {
        width: 1.75rem;
        height: 1.75rem;
    }
}

/* ================= 键盘焦点可见性 ================= */
.userLogin .layui-tab-title li:focus-visible,
.userLogin .switchTabs:focus-visible,
.userLogin .forgot-link:focus-visible,
.userLogin .agreement a:focus-visible,
.userLogin .visiblePwd:focus-visible {
    outline: .125rem solid var(--color-main-50);
    outline-offset: .125rem;
    border-radius: 1rem;
}