/* ========================================================================
   EXPLAN v2 login — 登录页样式
   ========================================================================
   设计原则:
   1. Token 跟 agency base.css 对齐 (纯灰避紫, brand 蓝主色)
   2. Split 布局: 左 brand-side (orb + slogan) | 右 form-side (login card)
   3. Brand-side 用纯 CSS orb (.breathing-circle) — 登录是首屏, 不引入 WebGL
   4. 表单字段 hover/focus 蓝边 + halo (跟主 app 一致)
   5. mobile (<880px) 堆叠成上下两段
   ======================================================================== */

:root {
    /* 品牌色 */
    --brand-primary: #0064D2;
    --brand-primary-hover: #004FB3;
    --vitality-blue: var(--brand-primary);
    --vitality-blue-hover: var(--brand-primary-hover);
    --vitality-blue-soft: rgba(0, 100, 210, 0.18);
    --vitality-orange: #F5AF02;
    --brand-danger: #E53238;

    /* 亮色 token (默认) */
    --bg-page: #F7F7F7;
    --bg-center: #FFFFFF;
    --text-main: #191919;
    --text-grey: #707070;
    --text-3: rgba(25, 25, 25, 0.42);
    --divider: #E5E5E5;
    --chip-bg: rgba(15, 23, 42, 0.04);
    --chip-bg-hover: rgba(15, 23, 42, 0.07);
    --field-bg: rgba(15, 23, 42, 0.025);
    --field-bg-active: rgba(15, 23, 42, 0.05);

    /* 历史别名 */
    --input-bg: var(--field-bg);
    --glass-base: var(--bg-center);
    --glass-border: var(--divider);
    --glass-shadow: transparent;
    --fluid-bg-dark: var(--bg-page);
    --fluid-bg-light: var(--bg-center);
    --btn-theme-bg: var(--brand-primary);

    /* 登录卡片液态玻璃 (右侧透明面板上浮一张玻璃卡, 透出背景光晕/渐变) */
    --login-card-bg: rgba(255, 255, 255, 0.58);
    --login-card-border: rgba(255, 255, 255, 0.7);

    /* 尺寸 */
    --radius-base: 10px;
    --radius-lg: 14px;
    --field-h: 44px;
    --field-h-compact: 34px;
    --font-xs: 11px;
    --font-sm: 12px;
    --font-md: 13px;
    --font-base: 14px;
    --font-lg: 15px;
    --font-xl: 18px;
    --font-xxl: 22px;
    --font-display: 30px;
}

[data-theme="dark"] {
    /* 暗色 token (纯灰三档, 跟 agency base.css 一致) */
    --bg-page: #141414;
    --bg-center: #1E1E1E;
    --text-main: #F7F7F7;
    --text-grey: rgba(247, 247, 247, 0.72);
    --text-3: rgba(247, 247, 247, 0.45);
    --divider: #2A2A2A;
    --chip-bg: #262626;
    --chip-bg-hover: #2E2E2E;
    --field-bg: #161616;
    --field-bg-active: #1A1A1A;
    --vitality-blue-soft: rgba(0, 100, 210, 0.22);
    --input-bg: var(--field-bg);
    --glass-base: var(--bg-center);
    --login-card-bg: rgba(30, 30, 32, 0.55);
    --login-card-border: rgba(255, 255, 255, 0.08);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
    -webkit-font-smoothing: antialiased;
}

body {
    background: radial-gradient(circle at 30% 45%, var(--bg-center) 0%, var(--bg-page) 72%);
    color: var(--text-main);
    height: 100vh;
    display: flex;
    overflow: hidden;
    transition: background 0.5s ease, color 0.5s ease;
}

/* ============================================================================
   主题切换按钮 — 右上角 fixed
   ============================================================================ */
.theme-toggle {
    position: fixed;
    top: 24px;
    right: 24px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--chip-bg);
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: background 0.15s ease, transform 0.15s ease;
}
.theme-toggle:hover { background: var(--chip-bg-hover); transform: rotate(20deg); }
.theme-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ============================================================================
   Split 布局: 左 brand-side | 右 form-side
   ============================================================================ */
.left-panel {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    overflow: visible;
}

.right-panel {
    flex: 1;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    transition: background 0.5s ease;
}

/* ============================================================================
   Brand-side 视觉: CSS orb + slogan
   ============================================================================ */
.visual-anchor {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(6vw);  /* 整体往右挪 (v1 同款), 光晕更靠近中部 */
}

/* v1 呼吸光晕: 蓝/金/绿 三色 box-shadow 大光晕, scale+opacity 呼吸,
   内圈反向 ::after。绝对定位居中, 铺在品牌文字背后 (文字 z-index:2 叠在上层)。 */
.breathing-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70vh;
    height: 70vh;
    border-radius: 50%;
    background: transparent;
    box-shadow: -40px -40px 120px rgba(0, 100, 210, 0.18),
                40px 40px 120px rgba(245, 175, 2, 0.18),
                -40px -40px 120px rgba(134, 184, 23, 0.14);
    border: 2px solid rgba(255, 255, 255, 0.03);
    animation: breathe 6s ease-in-out infinite;
    filter: blur(8px);
    z-index: 1;
}
.breathing-circle::after {
    content: '';
    position: absolute;
    top: 15%; left: 15%; right: 15%; bottom: 15%;
    border-radius: 50%;
    border: 2px solid rgba(0, 100, 210, 0.12);
    animation: breatheInner 6s ease-in-out infinite reverse;
}
@keyframes breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; box-shadow: -40px -40px 120px rgba(0, 100, 210, 0.18), 40px 40px 120px rgba(245, 175, 2, 0.18), -40px -40px 120px rgba(134, 184, 23, 0.14); }
    50% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; box-shadow: -50px -50px 150px rgba(0, 100, 210, 0.3), 50px 50px 150px rgba(245, 175, 2, 0.24), -50px -50px 150px rgba(134, 184, 23, 0.2); }
}
@keyframes breatheInner {
    0%, 100% { transform: scale(1); border-color: rgba(0, 100, 210, 0.06); }
    50% { transform: scale(1.15); border-color: rgba(0, 100, 210, 0.3); }
}

.brand-content {
    position: relative;
    z-index: 2;
    text-align: center;
}
.brand-logo {
    font-size: var(--font-display);
    font-weight: 900;
    letter-spacing: 0.05em;
    color: var(--brand-primary);
    line-height: 1.1;
    margin-bottom: 8px;
}
.brand-subtitle {
    font-size: var(--font-md);
    color: var(--text-grey);
    letter-spacing: 0.2em;
    font-weight: 500;
}

/* ============================================================================
   Form-side: login card
   ============================================================================ */
.login-card {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    padding: 40px 36px;
    background: var(--login-card-bg);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--login-card-border);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.card-header {
    margin-bottom: 32px;
}
.card-header h1 {
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 8px;
}
.card-header p {
    font-size: var(--font-md);
    color: var(--text-3);
    line-height: 1.5;
}

/* 字段 */
.input-group {
    margin-bottom: 16px;
}
.input-group.hidden { display: none; }
.input-label {
    display: block;
    font-size: var(--font-xs);
    color: var(--text-3);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

/* .aside-input — 跟 agency forms.css 一致, hover/focus 蓝边 */
.aside-input {
    width: 100%;
    height: var(--field-h);
    padding: 0 14px;
    background: var(--field-bg);
    border: none;
    outline: none;
    box-shadow: none;
    border-radius: var(--radius-base);
    font-size: var(--font-md);
    color: var(--text-main);
    font-family: inherit;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    cursor: text;
}
.aside-input::placeholder {
    color: var(--text-3);
    font-size: var(--font-sm);
}
.aside-input:hover,
.aside-input:focus {
    background: var(--field-bg-active);
    box-shadow: 0 0 0 2px var(--vitality-blue);
}

/* OTP row: 验证码输入 + 获取按钮并排 */
.otp-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.otp-row .aside-input {
    flex: 1;
}
.btn-otp {
    flex-shrink: 0;
    padding: 0 14px;
    background: var(--chip-bg);
    color: var(--text-main);
    border: none;
    border-radius: var(--radius-base);
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    height: var(--field-h);
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.btn-otp:hover {
    background: var(--chip-bg-hover);
    color: var(--vitality-blue);
}
.btn-otp:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 邀请码 hint */
.invite-input-hint {
    font-size: var(--font-xs);
    color: var(--text-3);
    margin-top: 6px;
    min-height: 16px;
    line-height: 1.4;
}
.invite-input-hint.success { color: var(--brand-primary); }
.invite-input-hint.error { color: var(--brand-danger); }

/* 登录按钮 */
.btn-login {
    width: 100%;
    height: var(--field-h);
    margin-top: 8px;
    background: var(--vitality-blue);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-base);
    font-size: var(--font-md);
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, transform 0.12s ease;
}
.btn-login:hover { background: var(--vitality-blue-hover); }
.btn-login:active { transform: translateY(1px); }
.btn-login:disabled {
    background: var(--chip-bg);
    color: var(--text-3);
    cursor: not-allowed;
}

/* Mode toggle: 底栏切换 (注册账号 / 验证码登录) */
.mode-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    font-size: var(--font-sm);
}
.mode-toggle-left {
    display: flex;
}
.switch-mode-btn {
    background: transparent;
    border: none;
    color: var(--vitality-blue);
    font-size: var(--font-sm);
    font-weight: 600;
    cursor: pointer;
    padding: 6px 0;
    font-family: inherit;
    transition: color 0.15s ease;
}
.switch-mode-btn:hover { color: var(--vitality-blue-hover); }

/* 错误状态 */
.aside-input.error {
    box-shadow: 0 0 0 2px var(--brand-danger);
}

/* ============================================================================
   Mobile 响应: 堆叠成上下两段, brand-side 顶, form-side 底
   ============================================================================ */
@media (max-width: 880px) {
    body {
        flex-direction: column;
        overflow-y: auto;
    }
    .left-panel {
        flex: 0 0 auto;
        min-height: 280px;
        padding: 50px 30px 20px;
    }
    .visual-anchor {
        transform: none;     /* 移动端竖排, 不右移 */
    }
    .breathing-circle {
        width: 56vw;
        height: 56vw;
    }
    .brand-logo {
        font-size: 24px;
    }
    .brand-subtitle {
        font-size: var(--font-sm);
    }
    .right-panel {
        flex: 1;
        background: transparent;        /* mobile: 透明, 让玻璃卡透出 body 渐变 */
        padding: 20px 24px 40px;
        align-items: flex-start;
    }
    .login-card {
        max-width: none;
    }
    .theme-toggle {
        top: 16px;
        right: 16px;
    }
}

/* ============================================================================
   登录 Toast (顶部居中玻璃胶囊) + 错误震动 — v2 重写时漏了, 补回。
   结构由 login.js showToast 生成: #toast-container > .apple-toast.success/.error
   ============================================================================ */
#toast-container {
    position: fixed;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}
.apple-toast {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    background: var(--login-card-bg);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--login-card-border);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
    animation: toastSlideDown 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.apple-toast svg { flex: 0 0 auto; }
.apple-toast.success { color: #34c759; border-color: rgba(52, 199, 89, 0.32); }
.apple-toast.error { color: #ff453a; border-color: rgba(255, 69, 58, 0.32); }
.apple-toast.hide { animation: toastFadeOut 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes toastSlideDown {
    0% { opacity: 0; transform: translateY(-16px) scale(0.94); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastFadeOut {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-16px) scale(0.94); }
}
/* 错误时输入框震动 (login.js 给元素加 .shake) */
.shake { animation: appleShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes appleShake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}