/* ============================================================
   css/login.css — 登录 / 注册 / 设密码 页面
   韩系 + 法式 + 唯美花间风。衬线体 + Playfair 花字装饰，无 emoji。
   遮罩挂 #app 内（position:absolute），不撑桌面宽屏。
   ============================================================ */

.login-overlay {
    position: absolute;
    inset: 0;
    z-index: 6000;
    background:
        radial-gradient(120% 90% at 85% 5%, rgba(201, 168, 168, 0.22), transparent 55%),
        radial-gradient(110% 80% at 10% 95%, rgba(184, 168, 196, 0.18), transparent 55%),
        linear-gradient(165deg, #F8F4EF 0%, #F4ECE4 55%, #F1E7DF 100%);
    display: flex;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 键盘避让：--kbd-h 由 login 键盘检测实时更新 → 内容上移，密码框不被盖 */
    padding-bottom: calc(var(--kbd-h, 0px) + env(safe-area-inset-bottom, 0px));
}

/* ---- 漂浮花瓣装饰（纯 CSS）---- */
.login-flower {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.5;
}
.login-flower::before,
.login-flower::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: inherit;
}
.login-flower-1 {
    width: 140px; height: 140px;
    top: -30px; right: -40px;
    background: radial-gradient(circle, rgba(201,168,168,0.35), rgba(201,168,168,0.05) 70%);
    animation: loginFloat 9s ease-in-out infinite;
}
.login-flower-1::before { width: 90px; height: 90px; left: -40px; top: 20px; background: radial-gradient(circle, rgba(184,168,196,0.3), transparent 70%); }
.login-flower-1::after { width: 60px; height: 60px; right: -15px; top: 80px; background: radial-gradient(circle, rgba(201,168,168,0.28), transparent 70%); }
.login-flower-2 {
    width: 110px; height: 110px;
    bottom: 8%; left: -35px;
    background: radial-gradient(circle, rgba(196,168,106,0.22), rgba(196,168,106,0.04) 70%);
    animation: loginFloat 12s ease-in-out infinite reverse;
}
.login-flower-2::before { width: 70px; height: 70px; right: -25px; top: 15px; background: radial-gradient(circle, rgba(201,168,168,0.26), transparent 70%); }

@keyframes loginFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-16px) rotate(8deg); }
}

/* ---- 卡片 ---- */
.login-card {
    position: relative;
    width: min(84%, 360px);
    margin: auto; /* flex 容器内居中对齐 + 溢出时可滚动（配合 overflow-y:auto） */
    background: rgba(255, 252, 249, 0.88);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(201, 168, 168, 0.28);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(160, 145, 130, 0.18), inset 0 1px 0 rgba(255,255,255,0.7);
    padding: 40px 32px 32px;
    animation: loginCardIn 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes loginCardIn {
    from { opacity: 0; transform: translateY(22px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 22px;
}
.login-brand-en {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 26px;
    letter-spacing: 3px;
    color: var(--accent, #C9A8A8);
}
.login-brand-cn {
    font-family: 'Noto Serif SC', 'STSong', serif;
    font-size: 13px;
    letter-spacing: 6px;
    color: var(--text-secondary, #8A8278);
}
.login-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto 26px;
    width: 72%;
}
.login-divider span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201,168,168,0.5), transparent);
}

.login-title {
    text-align: center;
    font-family: 'Noto Serif SC', 'STSong', serif;
    font-size: 15px;
    letter-spacing: 2px;
    color: var(--text-primary, #1E1C1A);
    margin-bottom: 20px;
}
.login-hint {
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary, #8A8278);
    margin: -12px 0 18px;
}

.login-field { margin-bottom: 14px; }
.login-input {
    width: 100%;
    box-sizing: border-box;
    height: 46px;
    padding: 0 18px;
    border: 1px solid rgba(201, 168, 168, 0.4);
    border-radius: 23px;
    background: rgba(255, 255, 255, 0.85);
    font-family: 'Noto Serif SC', 'STSong', serif;
    font-size: 14px;
    color: var(--text-primary, #1E1C1A);
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.login-input::placeholder { color: var(--text-muted, #BFB8AE); }
.login-input:focus {
    border-color: var(--accent, #C9A8A8);
    box-shadow: 0 0 0 3px rgba(201, 168, 168, 0.18);
}
.login-input[readonly] {
    background: rgba(201, 168, 168, 0.08);
    color: var(--text-secondary, #8A8278);
}

/* ---- 密码框 + 自定义「小眼睛」显隐 ---- */
.login-pw-wrap { position: relative; }
.login-pw { padding-right: 46px; }
.login-eye {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    color: rgba(181, 165, 154, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease;
}
.login-eye:active { transform: translateY(-50%) scale(0.9); }
.login-eye svg { display: block; }
/* 默认显示「睁眼」，点开隐藏变成「划眼」；shown = 正在显示明文 */
.login-eye .eye-closed { display: none; }
.login-eye.shown { color: var(--accent, #C9A8A8); }
.login-eye.shown .eye-open { display: none; }
.login-eye.shown .eye-closed { display: block; }

.login-btn {
    width: 100%;
    height: 46px;
    margin-top: 6px;
    border: none;
    border-radius: 23px;
    background: var(--rose-dark, #A88080);
    color: #fff;
    font-family: 'Noto Serif SC', 'STSong', serif;
    font-size: 15px;
    letter-spacing: 4px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, opacity 0.2s ease;
}
.login-btn:active { transform: scale(0.97); }
.login-btn:hover { box-shadow: 0 10px 26px rgba(201, 168, 168, 0.5); }
.login-btn:disabled { cursor: default; }

.login-switch {
    margin-top: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary, #8A8278);
}
.login-switch a {
    color: var(--accent, #C9A8A8);
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid rgba(201, 168, 168, 0.4);
    transition: color 0.2s ease;
}
.login-switch a:active { color: var(--accent-hover, #BA9696); }
/* 注册关闭：入口变灰字（点了弹「目前不开放注册」说明，不让人白填表） */
.login-switch a.login-reg-closed {
    color: var(--text-muted, #B5A59A);
    border-bottom-color: rgba(181, 165, 154, 0.35);
    cursor: pointer;
}
.login-switch a.login-reg-closed:active { color: var(--text-muted, #B5A59A); }

/* 备案号（合规展示：备案通过后网站底部必须展示，2026-11 主站切 kstarai.cn） */
.login-icp {
    margin-top: 18px;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.02em;
    line-height: 1.6;
    color: var(--text-muted, #B5A59A);
    word-break: break-all;
}
.login-icp a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}
.login-icp a:active { color: var(--accent, #C9A8A8); }

/* 窄屏 <370px */
@media (max-width: 370px) {
    .login-card { padding: 30px 22px 24px; }
    .login-brand-en { font-size: 22px; }
    .login-input, .login-btn { height: 42px; }
}