/* ==========================================================================
   卡哇猫 · 认证页设计（登录 / 注册 / 找回密码）
   ========================================================================== */

* {
    box-sizing: border-box;
}

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

body {
    background: #F5F6FA;
    font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: #111827;
    -webkit-font-smoothing: antialiased;
}

/* ---------- 布局 ---------- */
.km-auth {
    display: flex;
    min-height: 100vh;
}

/* 左侧品牌区 */
.km-auth__aside {
    position: relative;
    flex: 1 1 46%;
    max-width: 620px;
    padding: 56px 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    overflow: hidden;
    background: linear-gradient(140deg, #4F46E5 0%, #7C3AED 55%, #A855F7 100%);
}

.km-auth__aside:before,
.km-auth__aside:after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
    pointer-events: none;
}

.km-auth__aside:before {
    width: 380px;
    height: 380px;
    top: -140px;
    right: -120px;
}

.km-auth__aside:after {
    width: 260px;
    height: 260px;
    bottom: -110px;
    left: -80px;
}

.km-auth__brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.km-auth__brand img {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .18);
    padding: 4px;
}

.km-auth__brand-name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .5px;
}

.km-auth__brand-sub {
    display: block;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: .75;
    margin-top: 2px;
}

.km-auth__hero {
    position: relative;
    max-width: 460px;
}

.km-auth__hero h1 {
    font-size: 34px;
    line-height: 1.35;
    font-weight: 700;
    margin: 0 0 16px;
    letter-spacing: -.5px;
}

.km-auth__hero p {
    font-size: 15px;
    line-height: 1.8;
    opacity: .82;
    margin: 0 0 36px;
}

.km-auth__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 16px;
}

.km-auth__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.6;
    opacity: .95;
}

.km-auth__list i {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.km-auth__list b {
    display: block;
    font-weight: 600;
}

.km-auth__list span {
    font-size: 13px;
    opacity: .8;
}

.km-auth__foot {
    position: relative;
    font-size: 12px;
    opacity: .7;
}

/* 右侧表单区 */
.km-auth__main {
    flex: 1 1 54%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    background: #F5F6FA;
}

.km-auth__card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border: 1px solid #E8EAF2;
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .08);
    padding: 40px;
}

.km-auth__title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: -.3px;
}

.km-auth__desc {
    font-size: 13px;
    color: #9CA3AF;
    margin: 0 0 28px;
}

/* ---------- 表单 ---------- */
.km-field {
    margin-bottom: 18px;
}

.km-field__label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #4B5563;
    margin-bottom: 8px;
}

.km-field__wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.km-field__wrap > .layui-icon {
    position: absolute;
    left: 13px;
    font-size: 17px;
    color: #9CA3AF;
    pointer-events: none;
    line-height: 1;
}

.km-field__wrap .layui-input {
    width: 100%;
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 14px 0 42px !important;
    border: 1px solid #D5D9E5 !important;
    border-radius: 10px !important;
    font-size: 14px;
    background: #fff;
    transition: all .18s cubic-bezier(.4, 0, .2, 1);
}

.km-field__wrap .layui-input:focus {
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .14) !important;
}

.km-field__wrap .layui-input::-webkit-input-placeholder {
    color: #B9BFCE;
}

.km-field--code .layui-input {
    padding-right: 118px !important;
}

/* 验证码图片 */
.km-captcha {
    position: absolute;
    right: 6px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #E8EAF2;
    background: #FAFBFD;
}

/* 获取验证码按钮：倒计时期间锁定固定宽度，数字从 59→9 也不抖动 */
.km-field--code .km-code-btn {
    position: absolute;
    right: 6px;
    height: 32px;
    line-height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    border: none;
    background: #EEF2FF;
    color: #4F46E5;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
    white-space: nowrap;
    /* 固定宽度 + 居中：文字从「获取验证码」到「59 秒后重获」到「8 秒后重获」
       宽度完全一致，倒计时数字跳变时按钮不抖动（2026-09-18） */
    font-variant-numeric: tabular-nums;
    width: 108px;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
}

.km-field--code .km-code-btn:hover:not(.layui-disabled) {
    background: #E0E7FF;
}

.km-field--code .km-code-btn.layui-disabled {
    background: #F3F4F6;
    color: #9CA3AF;
    cursor: not-allowed;
}

/* 验证码 toast：替代 layer.msg 的默认样式，顶部居中滑入 */
.km-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    z-index: 999999;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 88%;
    padding: 11px 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid #E8EAF2;
    box-shadow: 0 10px 32px rgba(17, 24, 39, .14), 0 2px 8px rgba(17, 24, 39, .06);
    color: #111827;
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
    backdrop-filter: blur(8px);
}

.km-toast--show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.km-toast__icon {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    line-height: 1;
}

.km-toast--ok .km-toast__icon { background: #10B981; }
.km-toast--err .km-toast__icon { background: #EF4444; }

/* 登录/注册成功的小猫加载动画：替代 pear button.load 的旋转加载圈 */
.km-cat-loading {
    position: fixed;
    inset: 0;
    z-index: 999998;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(4px);
}

.km-cat-loading--show {
    display: flex;
}

/* 弹跳的小猫：上下浮动 + 轻微左右摇摆，比旋转加载圈更贴合「卡哇猫」品牌 */
.km-cat-loading__cat {
    width: 76px;
    height: 76px;
    animation: kmCatBounce 1.1s ease-in-out infinite;
}

@keyframes kmCatBounce {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-12px) rotate(3deg); }
}

.km-cat-loading__dots {
    display: flex;
    gap: 6px;
}

.km-cat-loading__dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #818CF8;
    animation: kmCatDots 1s ease-in-out infinite;
}

.km-cat-loading__dots span:nth-child(2) { animation-delay: .15s; }
.km-cat-loading__dots span:nth-child(3) { animation-delay: .3s; }

@keyframes kmCatDots {
    0%, 100% { opacity: .3; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.km-cat-loading__text {
    font-size: 13px;
    color: #6B7280;
    font-weight: 500;
}

/* 行内工具（记住密码 / 链接） */
.km-auth__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 22px;
    font-size: 13px;
}

/* 勾选框 + 条款链接同一行，只有这一个入口 */
.km-auth__agree {
    display: flex;
    align-items: center;
    gap: 4px;
}

.km-auth__agree a {
    color: #4F46E5;
    text-decoration: none;
}

.km-auth__agree a:hover {
    text-decoration: underline;
}

.km-auth__row a {
    color: #4F46E5;
    text-decoration: none;
    font-weight: 500;
}

.km-auth__row a:hover {
    text-decoration: underline;
}

.km-auth__row .layui-form-checkbox {
    padding-left: 24px !important;
}

.km-auth__row .layui-form-checkbox span {
    font-size: 13px;
    color: #4B5563;
}

/* 提交按钮 */
.km-auth__submit {
    width: 100%;
    height: 44px !important;
    line-height: 44px !important;
    border: none !important;
    border-radius: 10px !important;
    background: #4F46E5 !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(79, 70, 229, .28);
    transition: all .18s cubic-bezier(.4, 0, .2, 1);
}

.km-auth__submit:hover {
    background: #4338CA !important;
    box-shadow: 0 8px 22px rgba(79, 70, 229, .36);
    transform: translateY(-1px);
}

.km-auth__submit:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(79, 70, 229, .24);
}

/* 底部切换 */
.km-auth__switch {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #EEF0F6;
    text-align: center;
    font-size: 13px;
    color: #9CA3AF;
}

.km-auth__switch a {
    color: #4F46E5;
    font-weight: 600;
    text-decoration: none;
}

.km-auth__switch a:hover {
    text-decoration: underline;
}

/* 第三方登录（占位，不展示“开发中”文案） */
.km-auth__oauth {
    margin-top: 22px;
    display: flex;
    gap: 10px;
}

.km-auth__oauth button {
    flex: 1;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #E8EAF2;
    background: #fff;
    color: #4B5563;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all .18s ease;
}

.km-auth__oauth button:hover {
    border-color: #4F46E5;
    color: #4F46E5;
    background: #EEF2FF;
}

.km-auth__oauth .layui-icon {
    font-size: 18px;
}

/* 合规提示 */
.km-auth__terms {
    font-size: 12px;
    color: #9CA3AF;
    line-height: 1.7;
    margin: 0 0 20px;
}

.km-auth__terms a {
    color: #4F46E5;
    text-decoration: none;
}

/* 隐藏原始的 body > form 直排样式干扰 */
form.km-form {
    margin: 0;
}

/* ---------- 响应式 ---------- */
@media screen and (max-width: 900px) {
    .km-auth__aside {
        display: none;
    }

    .km-auth__main {
        padding: 32px 20px;
    }

    .km-auth__card {
        padding: 32px 24px;
        box-shadow: none;
        border-color: transparent;
        background: transparent;
    }
}