/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background: #f5f5f5;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 头部样式 */
header {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 1rem 0;
    margin-bottom: 2rem;
}

.header-modern {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 0 0 16px 16px;
}

header .logo h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    text-transform: lowercase;
    font-weight: 700;
    letter-spacing: -0.5px;
}

header .logo h1 .logo-part-white {
    color: #ffffff;
    text-shadow: 
        0 0 2px rgba(128, 128, 128, 0.5),
        0 0 4px rgba(128, 128, 128, 0.3),
        1px 1px 2px rgba(0, 0, 0, 0.3);
}

header .logo h1 .logo-part-green {
    color: #7fff00;
    text-shadow: 
        0 0 3px rgba(127, 255, 0, 0.6),
        0 0 6px rgba(127, 255, 0, 0.4),
        0 0 9px rgba(127, 255, 0, 0.2),
        1px 1px 2px rgba(0, 0, 0, 0.3);
}

nav {
    display: flex;
    gap: 1.5rem;
}

nav a {
    text-decoration: none;
    color: #666;
    font-weight: 500;
    transition: color 0.3s;
}

nav a:hover,
nav a.active {
    color: #2563eb;
}

/* 主要内容 */
main {
    flex: 1;
    padding: 2rem 0;
}

/* 首页样式 */
.hero {
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
    color: white;
    border-radius: 20px;
    margin-bottom: 4rem;
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.hero h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

.hero p {
    font-size: 1.3rem;
    margin-bottom: 2.5rem;
    opacity: 0.95;
    position: relative;
    z-index: 1;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* 功能特性 */
.features {
    margin-bottom: 3rem;
}

.features h3 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: white;
    padding: 2.5rem;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.2);
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature-card h4 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

/* 套餐价格 */
.pricing {
    margin-bottom: 3rem;
}

.pricing h3 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.pricing-card {
    background: white;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.25);
    border-color: #667eea;
}

.pricing-card h4 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.price {
    font-size: 2.5rem;
    font-weight: bold;
    color: #2563eb;
    margin-bottom: 1rem;
}

.price span {
    font-size: 1rem;
    color: #666;
}

.pricing-card ul {
    list-style: none;
    margin: 1.5rem 0;
    text-align: left;
}

.pricing-card ul li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
}

.pricing-card ul li:last-child {
    border-bottom: none;
}

/* 按钮样式 */
.btn {
    display: inline-block;
    padding: 0.875rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn:hover::before {
    left: 100%;
}

.btn-secondary {
    background: #6b7280;
}

.btn-secondary:hover {
    background: #4b5563;
}

.btn-block {
    width: 100%;
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* 认证页面 */
.auth-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.auth-container {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 400px;
}

.auth-container h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.8rem;
}

/* 表单样式 */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
}

.form-group input:focus {
    outline: none;
    border-color: #2563eb;
}

.form-footer {
    text-align: center;
    margin-top: 1rem;
}

.form-footer a {
    color: #2563eb;
    text-decoration: none;
}

/* 消息提示 */
.message {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 5px;
    display: none;
}

.message.success {
    background: #d1fae5;
    color: #065f46;
    display: block;
}

.message.error {
    background: #fee2e2;
    color: #991b1b;
    display: block;
}

/* 用户中心 */
.dashboard {
    max-width: 900px;
    margin: 0 auto;
}

.dashboard h2 {
    margin-bottom: 2rem;
}

.info-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.info-card h3 {
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
}

.info-item {
    display: flex;
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
}

.info-item:last-child {
    border-bottom: none;
}

.info-item .label {
    font-weight: 500;
    width: 120px;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.9rem;
}

.status-badge.active {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.expired {
    background: #fee2e2;
    color: #991b1b;
}

.status-badge.inactive {
    background: #f3f4f6;
    color: #6b7280;
}

/* 订阅链接 */
.subscription-links {
    margin-top: 1rem;
}

.subscription-item {
    margin-bottom: 1.5rem;
}

.subscription-item label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.input-group {
    display: flex;
    gap: 0.5rem;
}

.input-group input {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 0.9rem;
}

.help-text {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* 页脚 */
footer {
    text-align: center;
    padding: 2rem 0;
    color: #666;
    margin-top: auto;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .hero h2 {
        font-size: 2rem;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .feature-grid,
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    nav {
        flex-wrap: wrap;
    }
}

/* ==================== 现代化登录页面样式 ==================== */

/* 认证页面背景 */
.auth-body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    min-height: 100vh;
    position: relative;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.auth-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.auth-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    animation: float 20s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

/* 认证容器包装 */
.auth-wrapper {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* 现代化认证容器 */
.auth-container-modern {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    padding: 3rem;
    width: 100%;
    max-width: 450px;
    animation: slideUp 0.6s ease-out;
    position: relative;
    overflow: hidden;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-container-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* 认证头部 */
.auth-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.logo-modern h1 {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.tagline {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
}

/* 标签页切换 */
.auth-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    background: #f3f4f6;
    padding: 0.25rem;
    border-radius: 12px;
    position: relative;
}

.tab-btn {
    flex: 1;
    padding: 0.75rem 1.5rem;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.tab-btn.active {
    color: #667eea;
    background: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.tab-btn:hover:not(.active) {
    color: #667eea;
}

/* 表单容器 */
.auth-form-container {
    animation: fadeIn 0.4s ease-out;
}

.auth-form-container.hidden {
    display: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 现代化表单组 */
.form-group-modern {
    margin-bottom: 1.5rem;
    position: relative;
}

.form-group-modern label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

.input-icon {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    color: #667eea;
}

.form-group-modern input {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #f9fafb;
    color: #111827;
}

.form-group-modern input:focus {
    outline: none;
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

.form-group-modern input::placeholder {
    color: #9ca3af;
}

/* 现代化按钮 */
.btn-modern {
    width: 100%;
    padding: 1rem;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

.btn-primary-modern {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-primary-modern:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.btn-primary-modern:active:not(:disabled) {
    transform: translateY(0);
}

.btn-primary-modern:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-text {
    position: relative;
    z-index: 1;
    transition: opacity 0.3s;
}

.btn-loader {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.btn-modern.loading .btn-text {
    opacity: 0;
}

.btn-modern.loading .btn-loader {
    display: block;
}

/* 现代化消息提示 */
.message-modern {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    display: none;
    animation: slideDown 0.3s ease-out;
    border-left: 4px solid;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-modern.success {
    display: block;
    background: #d1fae5;
    color: #065f46;
    border-left-color: #10b981;
}

.message-modern.error {
    display: block;
    background: #fee2e2;
    color: #991b1b;
    border-left-color: #ef4444;
}

/* 响应式设计 - 认证页面 */
@media (max-width: 768px) {
    .auth-wrapper {
        padding: 1rem;
    }
    
    .auth-container-modern {
        padding: 2rem 1.5rem;
        border-radius: 20px;
    }
    
    .logo-modern h1 {
        font-size: 1.75rem;
    }
    
    .tab-btn {
        padding: 0.625rem 1rem;
        font-size: 0.9rem;
    }
}

/* ==================== 参考页面样式（左右分栏布局）==================== */

.auth-body-reference {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #f5f7fa;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.auth-wrapper-reference {
    display: flex;
    min-height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
}

/* 左侧表单面板 */
.auth-left-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: #ffffff;
    min-width: 0;
}

.auth-form-wrapper {
    width: 100%;
    max-width: 420px;
}

.logo-section {
    margin-bottom: 2.5rem;
    text-align: center;
}

.logo-link {
    text-decoration: none;
    display: inline-block;
}

.logo-text {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-transform: lowercase;
}

.logo-text .logo-part-white {
    color: #ffffff;
    text-shadow: 
        0 0 2px rgba(128, 128, 128, 0.5),
        0 0 4px rgba(128, 128, 128, 0.3),
        1px 1px 2px rgba(0, 0, 0, 0.3);
}

.logo-text .logo-part-green {
    color: #7fff00;
    text-shadow: 
        0 0 3px rgba(127, 255, 0, 0.6),
        0 0 6px rgba(127, 255, 0, 0.4),
        0 0 9px rgba(127, 255, 0, 0.2),
        1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* 表单样式 */
.auth-form-reference {
    width: 100%;
}

.form-group-reference {
    margin-bottom: 1.5rem;
}

.form-group-reference label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
}

.required {
    color: #ef4444;
    margin-left: 2px;
}

.input-wrapper {
    position: relative;
}

.form-group-reference input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
    transition: all 0.2s ease;
    background: #ffffff;
    color: #111827;
    box-sizing: border-box;
}

.form-group-reference input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-group-reference input::placeholder {
    color: #9ca3af;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

.forgot-password-link {
    color: #2563eb;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s;
}

.forgot-password-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

/* 登录按钮 */
.btn-login-reference {
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.btn-login-reference:hover:not(:disabled) {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-login-reference:active:not(:disabled) {
    transform: translateY(0);
}

.btn-login-reference:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-login-reference .btn-text {
    position: relative;
    z-index: 1;
    transition: opacity 0.3s;
}

.btn-login-reference .btn-loader {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.btn-login-reference.loading .btn-text {
    opacity: 0;
}

.btn-login-reference.loading .btn-loader {
    display: block;
}

/* 分隔线区域 */
.auth-divider-section {
    display: flex;
    align-items: center;
    margin: 2rem 0 1.5rem;
    gap: 1rem;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.divider-text {
    color: #6b7280;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* 注册按钮 */
.register-link-section {
    margin-bottom: 1.5rem;
}

.btn-register-reference {
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: transparent;
    color: #2563eb;
    border: 1px solid #2563eb;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-register-reference:hover {
    background: #2563eb;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.btn-register-reference:active {
    transform: translateY(0);
}

/* 消息提示 */
.message-reference {
    margin-top: 1rem;
    padding: 0.875rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    display: none;
    animation: slideDown 0.3s ease-out;
}

.message-reference.success {
    display: block;
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #10b981;
}

.message-reference.error {
    display: block;
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #ef4444;
}

/* 右侧欢迎面板 */
.auth-right-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.auth-right-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.welcome-content {
    position: relative;
    z-index: 1;
    max-width: 500px;
}

.welcome-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.brand-name {
    color: #7fff00;
    display: block;
    margin-top: 0.5rem;
    text-shadow: 
        0 0 3px rgba(127, 255, 0, 0.6),
        0 0 6px rgba(127, 255, 0, 0.4),
        0 0 9px rgba(127, 255, 0, 0.2);
}

.welcome-subtitle {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    opacity: 0.95;
}

.welcome-note,
.welcome-help {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    opacity: 0.9;
    font-weight: 400;
}

/* 响应式设计 - 参考页面 */
@media (max-width: 1024px) {
    .auth-wrapper-reference {
        flex-direction: column;
    }
    
    .auth-right-panel {
        display: none;
    }
    
    .auth-left-panel {
        min-height: 100vh;
    }
}

@media (max-width: 768px) {
    .auth-left-panel {
        padding: 1.5rem;
    }
    
    .logo-text {
        font-size: 1.5rem;
    }
    
    .welcome-title {
        font-size: 2rem;
    }
    
    .welcome-subtitle {
        font-size: 1.1rem;
    }
}

/* ==================== 首页样式（imsyy风格）==================== */

.homepage-imsyy {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #0a0e27;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    overflow-x: hidden;
    position: relative;
}

.homepage-body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #0a0e27;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    overflow-x: hidden;
    position: relative;
}

.homepage-wrapper {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 背景图片 */
.cover-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.cover-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

.cover-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(10, 14, 39, 0.8) 0%, rgba(10, 14, 39, 0.95) 100%);
}

/* 主内容区域 */
.homepage-main {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    min-height: 100vh;
}

.homepage-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 头部区域 */
.homepage-header {
    text-align: center;
    margin-bottom: 3rem;
}

.logo-section-home {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.logo-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.site-title {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -1px;
}

.intro-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(102, 126, 234, 0.5);
}

.intro-text {
    text-align: left;
}

.intro-greeting {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #fff;
}

.intro-desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
}

.decoration-img {
    width: 60px;
    height: 60px;
    opacity: 0.6;
}

/* 内容区域 */
.homepage-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

/* 左侧内容 */
.content-left {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.quote-section {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.quote-text {
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 0.5rem;
    color: #fff;
}

.quote-author {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: right;
}

.time-section {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.time-display {
    margin-bottom: 1rem;
}

.time-display div {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 0.5rem;
}

#currentTime {
    font-size: 1.5rem;
    font-weight: 600;
    color: #667eea;
}

.weather-info {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

/* 右侧内容 */
.content-right {
    display: flex;
    flex-direction: column;
}

.cards-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding-left: 0.5rem;
}

.card-icon {
    width: 24px;
    height: 24px;
}

.cards-header h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.nav-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.nav-card:hover {
    background: rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.5);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.card-img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
}

.card-title {
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
}

/* 底部版权 */
.homepage-footer {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 2rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-link {
    color: #667eea;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-link:hover {
    color: #764ba2;
}

.footer-note {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

/* 欢迎弹窗 */
.welcome-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.modal-content {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    max-width: 400px;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
    border-radius: 50%;
}

.modal-content p {
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.6;
}

.modal-content strong {
    color: #667eea;
    font-size: 1.3rem;
}

/* 响应式设计 - 首页 */
@media (max-width: 768px) {
    .homepage-content {
        grid-template-columns: 1fr;
    }
    
    .site-title {
        font-size: 2rem;
    }
    
    .intro-greeting {
        font-size: 1.2rem;
    }
    
    .cards-grid {
        grid-template-columns: 1fr;
    }
    
    .intro-section {
        flex-direction: column;
        text-align: center;
    }
    
    .intro-text {
        text-align: center;
    }
}

/* ==================== imsyy风格首页样式 ==================== */

.homepage-wrapper-imsyy {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.cover-image-imsyy {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* 背景层，确保在文字下方 */
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 星空背景 - 更多星星 */
    background: 
        radial-gradient(2px 2px at 20% 30%, #fff, transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 50% 50%, #fff, transparent),
        radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 90% 70%, #fff, transparent),
        radial-gradient(1px 1px at 33% 90%, rgba(255,255,255,0.8), transparent),
        radial-gradient(3px 3px at 10% 40%, rgba(255,255,255,0.5), transparent),
        radial-gradient(2px 2px at 40% 80%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 70% 20%, #fff, transparent),
        radial-gradient(2px 2px at 15% 60%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 85% 50%, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 25% 15%, #fff, transparent),
        radial-gradient(1px 1px at 55% 85%, rgba(255,255,255,0.8), transparent),
        radial-gradient(3px 3px at 75% 30%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 45% 65%, #fff, transparent),
        radial-gradient(2px 2px at 95% 80%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 5% 25%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 65% 5%, #fff, transparent),
        radial-gradient(1px 1px at 35% 75%, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 50% 10%, rgba(255,255,255,0.5), transparent),
        /* 新增星星 */
        radial-gradient(1px 1px at 12% 45%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 28% 55%, #fff, transparent),
        radial-gradient(1px 1px at 42% 25%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 58% 35%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 72% 65%, #fff, transparent),
        radial-gradient(2px 2px at 88% 45%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 18% 75%, rgba(255,255,255,0.5), transparent),
        radial-gradient(2px 2px at 38% 15%, #fff, transparent),
        radial-gradient(1px 1px at 52% 95%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 68% 85%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 82% 25%, #fff, transparent),
        radial-gradient(2px 2px at 8% 65%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 22% 35%, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 48% 5%, #fff, transparent),
        radial-gradient(1px 1px at 62% 55%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 78% 75%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 92% 15%, #fff, transparent),
        radial-gradient(2px 2px at 32% 85%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 46% 45%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 64% 25%, #fff, transparent),
        #0a0e27; /* 深蓝色背景 */
    background-size: 
        200% 200%,
        180% 180%,
        150% 150%,
        220% 220%,
        190% 190%,
        160% 160%,
        210% 210%,
        170% 170%,
        200% 200%,
        185% 185%,
        195% 195%,
        175% 175%,
        205% 205%,
        165% 165%,
        215% 215%,
        180% 180%,
        190% 190%,
        200% 200%,
        185% 185%,
        195% 195%,
        /* 新增星星的尺寸 */
        160% 160%,
        200% 200%,
        180% 180%,
        190% 190%,
        170% 170%,
        210% 210%,
        175% 175%,
        195% 195%,
        185% 185%,
        165% 165%,
        205% 205%,
        200% 200%,
        180% 180%,
        190% 190%,
        170% 170%,
        210% 210%,
        175% 175%,
        195% 195%,
        185% 185%,
        165% 165%,
        100% 100%;
    animation: starrySky 20s linear infinite;
}

@keyframes starrySky {
    0% {
        background-position: 
            0% 0%,
            10% 20%,
            20% 10%,
            5% 15%,
            15% 5%,
            25% 25%,
            8% 12%,
            18% 8%,
            12% 18%,
            22% 22%,
            3% 7%,
            28% 3%,
            7% 28%,
            13% 13%,
            23% 23%,
            2% 2%,
            27% 27%,
            17% 17%,
            9% 9%,
            21% 21%,
            /* 新增星星的位置 */
            4% 14%,
            16% 24%,
            11% 6%,
            26% 16%,
            19% 26%,
            6% 19%,
            14% 9%,
            24% 29%,
            1% 11%,
            29% 21%,
            8% 4%,
            22% 14%,
            3% 24%,
            17% 4%,
            25% 19%,
            9% 29%,
            13% 1%,
            27% 11%,
            5% 21%,
            21% 1%,
            0% 0%;
    }
    100% {
        background-position: 
            100% 100%,
            110% 120%,
            120% 110%,
            105% 115%,
            115% 105%,
            125% 125%,
            108% 112%,
            118% 108%,
            112% 118%,
            122% 122%,
            103% 107%,
            128% 103%,
            107% 128%,
            113% 113%,
            123% 123%,
            102% 102%,
            127% 127%,
            117% 117%,
            109% 109%,
            121% 121%,
            /* 新增星星的位置 */
            104% 114%,
            116% 124%,
            111% 106%,
            126% 116%,
            119% 126%,
            106% 119%,
            114% 109%,
            124% 129%,
            101% 111%,
            129% 121%,
            108% 104%,
            122% 114%,
            103% 124%,
            117% 104%,
            125% 119%,
            109% 129%,
            113% 101%,
            127% 111%,
            105% 121%,
            121% 101%,
            0% 0%;
    }
}

.cover-image-imsyy img {
    width: auto;
    height: auto;
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain; /* 完整展示，不裁剪图片 */
    object-position: center center; /* 居中显示 */
    opacity: 1;
    filter: blur(0px);
    /* 确保图片保持原始宽高比 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.cover-image-imsyy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(1px 1px at 30% 40%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 50% 30%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 20% 70%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 80% 40%, rgba(255,255,255,0.5), transparent),
        radial-gradient(2px 2px at 10% 50%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 90% 20%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 60% 10%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,0.5), transparent),
        /* 新增闪烁星星 */
        radial-gradient(1px 1px at 35% 55%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 65% 45%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 75% 65%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 45% 15%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 55% 85%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 85% 25%, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 5% 75%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 95% 55%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 12% 45%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 48% 75%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 68% 35%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 28% 85%, rgba(255,255,255,0.5), transparent),
        radial-gradient(2px 2px at 88% 15%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 18% 65%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 58% 95%, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 38% 5%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 78% 45%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 8% 85%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 92% 65%, rgba(255,255,255,0.5), transparent);
    background-size: 
        300% 300%,
        280% 280%,
        250% 250%,
        320% 320%,
        290% 290%,
        260% 260%,
        310% 310%,
        270% 270%,
        300% 300%,
        285% 285%,
        /* 新增闪烁星星的尺寸 */
        275% 275%,
        295% 295%,
        265% 265%,
        305% 305%,
        255% 255%,
        315% 315%,
        245% 245%,
        325% 325%,
        235% 235%,
        335% 335%,
        225% 225%,
        345% 345%,
        215% 215%,
        355% 355%,
        205% 205%,
        365% 365%,
        195% 195%,
        375% 375%,
        185% 185%,
        385% 385%;
    animation: twinkle 3s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes twinkle {
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 1;
    }
}

.cover-image-imsyy::after {
    display: none;
}

.homepage-main-imsyy {
    position: relative;
    z-index: 10; /* 提高层级，确保文字在图片上方 */
    flex: 1;
    display: flex;
    flex-direction: column; /* 改为垂直布局 */
    align-items: center;
    justify-content: flex-end; /* 内容靠底部对齐，避免遮挡人物 */
    padding: 2rem;
    padding-bottom: 4rem; /* 增加底部间距 */
    min-height: 100vh;
}

.homepage-container-imsyy {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.homepage-header-imsyy {
    text-align: center;
    margin-bottom: 2rem;
    /* 头部移到顶部，不遮挡人物 */
    margin-top: 2rem;
}

.logo-section-imsyy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.logo-img-imsyy {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.site-title-imsyy {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -1px;
}

.intro-section-imsyy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.avatar-img-imsyy {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(102, 126, 234, 0.5);
}

.intro-text-imsyy {
    text-align: left;
}

.intro-greeting-imsyy {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #fff;
}

.intro-desc-imsyy {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
}

.decoration-img-imsyy {
    width: 60px;
    height: 60px;
    opacity: 0.6;
}

.social-links-imsyy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.social-link-imsyy {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.social-link-imsyy:hover {
    background: rgba(102, 126, 234, 0.3);
    transform: translateY(-3px);
}

.social-link-imsyy img {
    width: 24px;
    height: 24px;
    object-fit: cover;
}

.homepage-content-imsyy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
    /* 将内容移到页面底部，避免遮挡图片中的人物 */
    margin-top: auto;
    padding-top: 2rem;
}

.content-left-imsyy {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.hitokoto-section-imsyy {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hitokoto-text-imsyy {
    font-size: 1.2rem;
    line-height: 1.8;
    margin: 0;
    color: #fff;
    text-align: center;
}

.hitokoto-author-imsyy {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: right;
}

.time-section-imsyy {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.time-display-imsyy {
    margin-bottom: 1rem;
}

.time-display-imsyy div {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 0.5rem;
}

.time-display-imsyy #currentTime {
    font-size: 1.5rem;
    font-weight: 600;
    color: #667eea;
}

.weather-info-imsyy {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.content-right-imsyy {
    display: flex;
    flex-direction: column;
}

.cards-header-imsyy {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding-left: 0.5rem;
}

.card-icon-imsyy {
    width: 24px;
    height: 24px;
}

.cards-header-imsyy h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
}

.cards-grid-imsyy {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.nav-card-imsyy {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.nav-card-imsyy:hover {
    background: rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.5);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.card-img-imsyy {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
}

.card-title-imsyy {
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
}

.homepage-footer-imsyy {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 2rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.footer-content-imsyy {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-link-imsyy {
    color: #667eea;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-link-imsyy:hover {
    color: #764ba2;
}

.footer-note-imsyy {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.welcome-modal-imsyy {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: none; /* 隐藏弹窗 */
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.modal-content-imsyy {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    max-width: 400px;
    animation: modalSlideIn 0.3s ease;
}

.modal-icon-imsyy {
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
    border-radius: 50%;
}

.modal-content-imsyy p {
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.6;
}

.modal-content-imsyy strong {
    color: #667eea;
    font-size: 1.3rem;
}

/* 响应式设计 - imsyy风格首页 */
@media (max-width: 768px) {
    .homepage-content-imsyy {
        grid-template-columns: 1fr;
    }
    
    .site-title-imsyy {
        font-size: 2rem;
    }
    
    .intro-greeting-imsyy {
        font-size: 1.2rem;
    }
    
    .cards-grid-imsyy {
        grid-template-columns: 1fr;
    }
    
    .intro-section-imsyy {
        flex-direction: column;
        text-align: center;
    }
    
    .intro-text-imsyy {
        text-align: center;
    }
}

/* ==================== 论坛风格主题 ==================== */

/* 论坛主题基础样式 */
body.forum-theme {
    background: #1a1a1a;
    color: #e0e0e0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Liberation Sans', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
}

.forum-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
}

/* 顶部导航栏 */
.forum-header {
    background: #2a2a2a;
    border-bottom: 1px solid #3a3a3a;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 10;
}

.forum-header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.forum-logo {
    display: flex;
    align-items: center;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-transform: lowercase;
}

.logo-part-white {
    color: #ffffff;
    text-shadow: 
        0 0 2px rgba(128, 128, 128, 0.5),
        0 0 4px rgba(128, 128, 128, 0.3),
        1px 1px 2px rgba(0, 0, 0, 0.3);
}

.logo-part-green {
    color: #7fff00;
    text-shadow: 
        0 0 3px rgba(127, 255, 0, 0.6),
        0 0 6px rgba(127, 255, 0, 0.4),
        0 0 9px rgba(127, 255, 0, 0.2),
        1px 1px 2px rgba(0, 0, 0, 0.3);
}

.forum-nav {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.forum-nav-link {
    color: #e0e0e0;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
    font-size: 0.95rem;
}

.forum-nav-link:hover {
    background: #3a3a3a;
    color: #fff;
}

.forum-nav-link.active {
    background: #4a4a4a;
    color: #7fff00;
}

/* 用户信息栏 */
.forum-user-info {
    background: #252525;
    border-top: 1px solid #3a3a3a;
    padding: 0.5rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    font-size: 0.9rem;
    color: #e0e0e0;
}

.forum-user-info span {
    color: #e0e0e0;
}

/* 下拉菜单 */
.forum-nav-dropdown {
    position: relative;
}

.forum-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    min-width: 320px;
    display: none;
    z-index: 10000;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.forum-dropdown-menu.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.forum-dropdown-content {
    background: #2a2a2a;
}

.forum-dropdown-header {
    background: #252525;
    border-bottom: 1px solid #3a3a3a;
    padding: 1rem 1.25rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #e0e0e0;
}

.forum-dropdown-body {
    padding: 1rem 1.25rem;
}

.forum-dropdown-item {
    display: flex;
    padding: 0.75rem 0;
    border-bottom: 1px solid #3a3a3a;
}

.forum-dropdown-item:last-child {
    border-bottom: none;
}

.forum-dropdown-label {
    color: #a0a0a0;
    font-weight: 500;
    width: 100px;
    flex-shrink: 0;
}

.forum-dropdown-value {
    color: #e0e0e0;
    flex: 1;
    text-align: right;
}

/* 主内容区域 */
.forum-main {
    flex: 1;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.forum-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 论坛分类标题 */
.forum-section-header {
    margin-bottom: 1rem;
}

.forum-main-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #e0e0e0;
    margin: 0 0 0.5rem 0;
}

.forum-sub-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: #e0e0e0;
    margin: 0 0 0.5rem 0;
}

.forum-divider {
    height: 2px;
    background: #7fff00;
    margin-bottom: 1rem;
}

/* 论坛分类行 */
.forum-category-section {
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.forum-category-section:hover {
    background: #2f2f2f;
}

.forum-category-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    padding: 1rem 1.5rem;
    align-items: center;
}

.forum-category-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.forum-category-icon {
    font-size: 1.5rem;
    width: 32px;
    text-align: center;
}

.forum-category-content {
    flex: 1;
}

.forum-category-title {
    font-size: 1rem;
    font-weight: 600;
    color: #e0e0e0;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.forum-new-posts {
    color: #4a9eff;
    font-size: 0.85rem;
    font-weight: 400;
}

.forum-category-desc {
    font-size: 0.9rem;
    color: #a0a0a0;
}

.forum-category-right {
    text-align: right;
}

.forum-last-post {
    font-size: 0.9rem;
}

.forum-last-post-title {
    color: #e0e0e0;
    margin-bottom: 0.25rem;
    cursor: pointer;
}

.forum-last-post-title:hover {
    color: #7fff00;
}

.forum-last-post-meta {
    color: #a0a0a0;
    font-size: 0.85rem;
}

.forum-last-post-date {
    margin-right: 0.5rem;
}

.forum-last-post-by {
    color: #a0a0a0;
}

/* 标记为已读 */
.forum-mark-read {
    margin: 1rem 0;
    text-align: left;
}

.forum-link {
    color: #4a9eff;
    text-decoration: none;
    font-size: 0.9rem;
}

.forum-link:hover {
    text-decoration: underline;
}

/* 论坛面板 */
.forum-panel {
    background: #2a2a2a;
    border: none;
    border-radius: 0;
    overflow: visible;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    position: relative;
}

.forum-panel-header {
    background: #252525;
    border-bottom: 1px solid #3a3a3a;
    padding: 1.25rem 1.5rem;
    position: relative;
}

.forum-panel-header h2 {
    color: #e0e0e0;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.forum-panel-body {
    padding: 1.5rem;
    background: #2a2a2a;
    position: relative;
}

/* 信息网格 */
.forum-info-grid {
    display: grid;
    gap: 1rem;
}

.forum-info-item {
    display: flex;
    padding: 1rem 0;
    border-bottom: 1px solid #3a3a3a;
    transition: background-color 0.2s;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    border-radius: 4px;
}

.forum-info-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.forum-info-item:last-child {
    border-bottom: none;
}

.forum-info-label {
    color: #a0a0a0;
    font-weight: 500;
    width: 140px;
    flex-shrink: 0;
}

.forum-info-value {
    color: #e0e0e0;
    flex: 1;
}

/* 状态徽章 */
.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
}

.status-badge.active {
    background: #1a5a2e;
    color: #4ade80;
}

.status-badge.expired {
    background: #5a1a1a;
    color: #f87171;
}

.status-badge.inactive {
    background: #3a3a3a;
    color: #a0a0a0;
}

.status-badge.banned {
    background: #4a1a1a;
    color: #ef4444;
}

/* 帮助文本 */
.forum-help-text {
    color: #a0a0a0;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

/* 订阅链接列表 */
.forum-subscription-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.forum-subscription-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.forum-subscription-label {
    color: #e0e0e0;
    font-weight: 500;
    font-size: 0.95rem;
}

/* 输入框组 */
.forum-input-group {
    display: flex;
    gap: 0.5rem;
}

.forum-input {
    flex: 1;
    background: #1a1a1a;
    border: 1px solid #3a3a3a;
    color: #e0e0e0;
    padding: 0.75rem;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.forum-input:focus {
    outline: none;
    border-color: #4ade80;
}

.forum-input:read-only {
    background: #252525;
    cursor: text;
}

/* 按钮 */
.forum-btn {
    background: #3a3a3a;
    color: #e0e0e0;
    border: 1px solid #4a4a4a;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.forum-btn:hover {
    background: #4a4a4a;
    border-color: #5a5a5a;
    color: #fff;
}

.forum-btn:active {
    background: #2a2a2a;
}

.forum-btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

/* 聊天论坛样式 */
.forum-chat-container {
    display: flex;
    flex-direction: column;
    height: 400px;
}

.forum-chat-messages {
    flex: 1;
    overflow-y: auto;
    background: #1a1a1a;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    padding: 1rem;
    margin-bottom: 1rem;
    max-height: 350px;
}

.forum-chat-message {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #3a3a3a;
}

.forum-chat-message:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.forum-chat-user {
    color: #7fff00;
    font-weight: 600;
    margin-right: 0.5rem;
}

.forum-chat-time {
    color: #a0a0a0;
    font-size: 0.85rem;
    margin-right: 0.5rem;
}

.forum-chat-text {
    color: #e0e0e0;
    margin-top: 0.25rem;
    line-height: 1.5;
}

.forum-chat-input-area {
    display: flex;
    gap: 0.5rem;
}

.forum-chat-input {
    flex: 1;
    background: #1a1a1a;
    border: 1px solid #3a3a3a;
    color: #e0e0e0;
    padding: 0.75rem;
    border-radius: 4px;
    font-size: 0.9rem;
}

.forum-chat-input:focus {
    outline: none;
    border-color: #7fff00;
}

.forum-btn-primary {
    background: #3a3a3a;
    color: #7fff00;
    border: 1px solid #4a4a4a;
}

.forum-btn-primary:hover {
    background: #4a4a4a;
    border-color: #5a5a5a;
    color: #7fff00;
}

/* 页脚 */
.forum-footer {
    background: #1f1f1f;
    border-top: 1px solid #2a2a2a;
    padding: 1.5rem 2rem;
    margin-top: auto;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
}

.forum-footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.forum-footer-section {
    margin-bottom: 1rem;
}

.forum-footer-title {
    color: #e0e0e0;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.forum-online-users {
    color: #a0a0a0;
    font-size: 0.85rem;
    line-height: 1.6;
}

.forum-online-users .forum-user-name {
    color: #e0e0e0;
    margin-right: 0.5rem;
}

.forum-online-users .forum-user-name.red {
    color: #ff4444;
}

.forum-footer-links {
    margin-bottom: 1rem;
    font-size: 0.85rem;
}

.forum-footer-link {
    color: #4a9eff;
    text-decoration: none;
}

.forum-footer-link:hover {
    text-decoration: underline;
}

.forum-footer-separator {
    color: #a0a0a0;
    margin: 0 0.5rem;
}

.forum-footer-copyright {
    color: #a0a0a0;
    font-size: 0.9rem;
    margin-top: 1rem;
}

.forum-footer-copyright p {
    margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .forum-header-content {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .forum-nav {
        width: 100%;
        justify-content: flex-start;
    }

    .forum-main {
        padding: 1rem;
    }

    .forum-panel-body {
        padding: 1rem;
    }

    .forum-info-item {
        flex-direction: column;
        gap: 0.25rem;
    }

    .forum-info-label {
        width: 100%;
    }

    .forum-input-group {
        flex-direction: column;
    }

    .forum-dropdown-menu {
        right: 0;
        left: 0;
        min-width: auto;
        width: 100%;
    }

    .forum-dropdown-item {
        flex-direction: column;
        gap: 0.25rem;
    }

    .forum-dropdown-label {
        width: 100%;
    }

    .forum-dropdown-value {
        text-align: left;
    }
}