/* 1. 核心变量定义 - 支持明暗双色调 */
:root {
    /* 暗黑模式 */
    --fluid-bg-dark: #02060f; 
    --fluid-bg-light: #0d121f;
    
    --vitality-blue: #3b82f6; 
    --vitality-purple: #8b5cf6;
    --vitality-blue-soft: rgba(59, 130, 246, 0.15);
    
    /* 液态玻璃参数 - 暗黑 */
    --glass-base: rgba(255, 255, 255, 0.04); 
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: rgba(0, 0, 0, 0.2);
    
    --text-main: #f8fafc;
    --text-grey: #94a3b8;
    --input-bg: rgba(255, 255, 255, 0.03);
    --btn-theme-bg: rgba(255, 255, 255, 0.1);
}

/* 浅色模式 */
[data-theme="light"] {
    --fluid-bg-dark: #f8fafc; 
    --fluid-bg-light: #e2e8f0;
    
    --vitality-blue-soft: rgba(59, 130, 246, 0.2);
    
    /* 液态玻璃参数 - 浅色 (更通透) */
    --glass-base: rgba(255, 255, 255, 0.4); 
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-shadow: rgba(31, 38, 135, 0.1);
    
    --text-main: #0f172a;
    --text-grey: #64748b;
    --input-bg: rgba(0, 0, 0, 0.03);
    --btn-theme-bg: rgba(0, 0, 0, 0.05);
}

* { margin: 0; padding: 0; box-shadow: none; border: none; outline: none; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }

/* 全局背景直接挂在 body 上 */
body { 
    background: radial-gradient(circle at 30% 50%, var(--fluid-bg-light) 0%, var(--fluid-bg-dark) 100%);
    color: var(--text-main); 
    height: 100vh; 
    display: flex; 
    overflow: hidden; 
    transition: background 0.5s ease;
}

/* 🌟 解决需求7：彻底干掉登录页的浏览器自动填充底色 (透明背景通用解法) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s;
    -webkit-text-fill-color: var(--text-main) !important;
    caret-color: var(--text-main);
}

/* ============================
   右上角：主题切换按钮
   ============================ */
.theme-toggle {
    position: absolute;
    top: 30px;
    right: 40px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--btn-theme-bg);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: 0.3s;
    color: var(--text-main);
}
.theme-toggle:hover { transform: scale(1.1); }
.theme-toggle svg { width: 20px; height: 20px; fill: currentColor; }

/* ============================
   左侧：品牌展示区与呼吸圆环
   ============================ */
.left-panel {
    flex: 1.2; 
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible; 
    z-index: 1;
}

/* 新增的视觉锚点，负责把整体往右平移 */
.visual-anchor {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(6vw); 
}

/* 呼吸圆环 */
.breathing-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70vh; 
    height: 70vh;
    border-radius: 50%;
    background: transparent;
    box-shadow: -40px -40px 120px rgba(236, 72, 153, 0.2),
                40px 40px 120px rgba(0, 122, 255, 0.2),
                -40px -40px 120px rgba(139, 92, 246, 0.2);
    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(139, 92, 246, 0.1); 
    animation: breatheInner 6s ease-in-out infinite reverse;
}

.brand-content { 
    position: relative; 
    z-index: 2; 
    text-align: left; 
}

.brand-subtitle { font-size: 20px; font-weight: 600; color: var(--text-grey); letter-spacing: 4px; padding-left: 5px; opacity: 0.8; }

.brand-logo { 
    font-size: 64px; 
    font-weight: 800; 
    letter-spacing: -3px; 
    background: linear-gradient(135deg, var(--text-main) 30%, var(--vitality-blue) 100%); 
    -webkit-background-clip: text; 
    background-clip: text;
    -webkit-text-fill-color: transparent; 
    color: transparent;
    margin-bottom: 10px; 
    transition: 0.5s; 
}

/* ============================
   右侧：液态玻璃登录卡片
   ============================ */
.right-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background-color: transparent; 
    z-index: 2;
}

.login-card {
    width: 100%;
    max-width: 420px;
    padding: 50px 40px;
    background: var(--glass-base); 
    backdrop-filter: blur(25px); 
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--glass-border);
    border-radius: 32px;
    box-shadow: 0 16px 40px var(--glass-shadow);
    transition: all 0.5s ease;
}
.login-card:hover { transform: translateY(-5px); box-shadow: 0 24px 60px rgba(59, 130, 246, 0.15); }

.card-header { text-align: left; margin-bottom: 35px; }
.card-header h1 { font-size: 32px; font-weight: 800; color: var(--text-main); margin-bottom: 8px; letter-spacing: -1px; transition: 0.5s; }
.card-header p { font-size: 14px; color: var(--text-grey); font-weight: 400; transition: 0.5s; }

.input-group { margin-bottom: 20px; text-align: left; }
.input-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-grey); margin: 0 0 8px 15px; transition: 0.5s; }

.aside-input {
    width: 100%; height: 56px; padding: 0 20px;
    background: var(--input-bg);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    font-size: 16px; color: var(--text-main);
    transition: 0.3s;
}
.aside-input::placeholder { color: var(--text-grey); font-size: 15px; opacity: 0.7; }
.aside-input:focus { border-color: var(--vitality-blue); box-shadow: 0 0 15px rgba(59, 130, 246, 0.1); }

.input-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.15) !important;
    background: rgba(239, 68, 68, 0.02) !important;
}

.otp-row { display: flex; gap: 12px; }

.btn-otp { 
    white-space: nowrap; padding: 0 20px; height: 56px;
    background: var(--vitality-blue-soft); 
    color: var(--vitality-blue); border: 1px solid rgba(59, 130, 246, 0.2); 
    border-radius: 18px; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.3s;
}
.btn-otp:hover { background: rgba(59, 130, 246, 0.25); border-color: var(--vitality-blue); }
.btn-otp:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-login { 
    width: 100%; height: 60px;
    background: linear-gradient(135deg, var(--vitality-blue) 0%, var(--vitality-purple) 100%);
    color: #fff; border: none; border-radius: 20px; 
    font-weight: 700; font-size: 17px; cursor: pointer; transition: 0.4s ease; margin-top: 10px;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.15);
}
.btn-login:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(59, 130, 246, 0.3); opacity: 0.95; }

.mode-toggle { text-align: right; margin-top: 15px; }
.mode-toggle span {
    font-size: 13px; color: var(--vitality-blue); cursor: pointer; font-weight: 600; transition: 0.3s;
}
.mode-toggle span:hover { color: var(--vitality-purple); text-shadow: 0 0 10px rgba(139, 92, 246, 0.3); }

.card-footer { margin-top: 25px; font-size: 13px; color: var(--text-grey); transition: 0.5s; text-align: center;}
.hidden { display: none !important; }

/* ============================
   强化呼吸动画 (已合并位移矫正)
   ============================ */
@keyframes breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.7; box-shadow: -40px -40px 120px rgba(236, 72, 153, 0.2), 40px 40px 120px rgba(0, 122, 255, 0.2), -40px -40px 120px rgba(139, 92, 246, 0.2); }
    50% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; box-shadow: -50px -50px 150px rgba(236, 72, 153, 0.35), 50px 50px 150px rgba(0, 122, 255, 0.35), -50px -50px 150px rgba(139, 92, 246, 0.35); }
}
@keyframes breatheInner {
    0%, 100% { transform: scale(1); border-color: rgba(139, 92, 246, 0.05); }
    50% { transform: scale(1.15); border-color: rgba(139, 92, 246, 0.3); }
}

@media (max-width: 768px) {
    body { flex-direction: column; } 
    .left-panel { flex: 0.6; padding: 40px 20px 0; }
    .visual-anchor { transform: translateX(0); }
    .breathing-circle { width: 50vw; height: 50vw; }
    .right-panel { flex: 1.4; padding: 20px; align-items: flex-start; }
    .login-card { padding: 40px 30px; border-radius: 28px; }
    .theme-toggle { top: 20px; right: 20px; }
}

/* ============================
   5. Apple 风格 Toast 提示与震动动画
   ============================ */
#toast-container {
    position: fixed;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.apple-toast {
    padding: 14px 24px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    background: var(--glass-base);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    animation: toastSlideDown 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 成功状态（绿色） */
.apple-toast.success {
    background: rgba(52, 199, 89, 0.1);
    border-color: rgba(52, 199, 89, 0.2);
    color: #34c759;
}

/* 错误状态（红色） */
.apple-toast.error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: #ff453a;
}

.apple-toast.hide {
    animation: toastFadeOut 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes toastSlideDown {
    0% { opacity: 0; transform: translateY(-20px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastFadeOut {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-20px) scale(0.9); }
}

/* macOS 经典拒绝震动动画 */
.shake {
    animation: appleShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    transform: translate3d(0, 0, 0);
}

@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); }
}