:root {
    --primary: #FF6B6B;
    --primary-gradient: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
    --panel-bg: rgba(255, 255, 255, 0.95); /* 微微透明的面板，透出底层光晕 */
    --radius: 24px;
    
    /* 优化阴影：更轻柔、更具大厂质感的弥散阴影 */
    --shadow-card: 0 10px 40px rgba(255, 107, 107, 0.08); 
    --shadow-card-hover: 0 20px 50px rgba(255, 107, 107, 0.15);
    
    --text-main: #4A2C2A; /* 更深的品牌色 */
    --text-sub: #A1887F;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
}

/* 升级后的背景：线性渐变 + 相对定位用于放置光晕 */
body { 
    background: linear-gradient(135deg, #FFF8F3 0%, #FFF0E8 100%);
    color: var(--text-main); 
    height: 100vh; 
    display: flex; 
    justify-content: center;
    align-items: center;
    overflow: hidden; 
    position: relative;
    z-index: 1;
}

/* 背景装饰：晨曦光晕 1 */
.glass-circle-1 {
    position: absolute;
    top: -15%;
    left: -10%;
    width: 60vw;
    height: 60vw;
    max-width: 800px;
    max-height: 800px;
    background: rgba(255, 107, 107, 0.15);
    border-radius: 50%;
    filter: blur(100px);
    z-index: -1;
    animation: pulse 10s infinite alternate ease-in-out;
}

/* 背景装饰：晨曦光晕 2 */
.glass-circle-2 {
    position: absolute;
    bottom: -20%;
    right: -10%;
    width: 50vw;
    height: 50vw;
    max-width: 700px;
    max-height: 700px;
    /* 透明度降低，颜色稍微调沉，去掉刺眼的荧光感 */
    background: rgba(230, 120, 0, 0.05); 
    border-radius: 50%;
    filter: blur(120px);
    z-index: -1;
    animation: pulse 12s infinite alternate-reverse ease-in-out;
}

/* 光晕呼吸动画 */
@keyframes pulse {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.05) translate(20px, -20px); }
}

/* 登录卡片面板 */
.login-panel {
    background: var(--panel-bg);
    border-radius: var(--radius);
    padding: 48px 40px;
    width: 400px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 6px solid var(--primary);
    backdrop-filter: blur(10px); /* 磨砂玻璃质感 */
    
    /* 增加悬浮动画的 transition */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
    animation: floatUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 鼠标悬浮时的上浮动画 */
.login-panel:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

/* 入场动画 */
@keyframes floatUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 头部标题区域 */
.login-header {
    text-align: center;
    margin-bottom: 24px;
}

.login-header h1 {
    margin: 0 0 8px 0; 
    font-size: 28px; 
    font-weight: 900; /* 加粗 */
    color: var(--text-main); /* 使用深褐色，更沉稳 */
    display: flex; 
    align-items: center; 
    justify-content: center;
    gap: 10px;
    letter-spacing: 1px;
}

.login-header p {
    color: var(--text-sub);
    font-size: 14px;
    font-weight: 500;
}

/* 输入框组 */
.input-group label {
    font-size: 15px; /* 与“欢迎回来”对齐 */
    font-weight: 700;
    color: #E65100; 
    padding-left: 4px;
    margin-bottom: 4px;
}

.input-group label {
    font-size: 13px;
    font-weight: 700;
    color: #E65100; 
    padding-left: 4px;
}

/* 马卡龙风格输入框 */
.macaron-input {
    width: 100%;
    background: #FFFBF7;
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 16px 20px; /* 增加内边距，让大号字体呼吸顺畅 */
    font-size: 15px;    /* 字体大小同步 */
    color: var(--text-main);
    font-weight: 600;
    outline: none;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.02);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.macaron-input::placeholder {
    color: #D7CCC8;
    font-weight: normal;
}

.macaron-input:focus {
    border-color: #FF9800;
    background: #FFFFFF;
    box-shadow: 0 4px 16px rgba(255, 152, 0, 0.08);
}

/* 登录大按钮 */
.btn-login {
    width: 100%;
    background: var(--primary-gradient);
    color: #FFFFFF;
    border: none;
    padding: 16px 0;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 2px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(255, 107, 107, 0.25);
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    margin-top: 15px;
}

.btn-login:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 25px rgba(255, 107, 107, 0.35);
}

.btn-login:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);
}