@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* 背景装饰样式 */
.background-decoration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}
.dark-mode .background-decoration{
    background: #1d1b1b;
}
.floating-shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(147, 51, 234, 0.25));
    animation: floatDark 8s ease-in-out infinite;
    box-shadow: 
        0 8px 32px rgba(59, 130, 246, 0.3),
        0 0 20px rgba(147, 51, 234, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.shape-1 {
    width: 120px;
    height: 120px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
    animation-duration: 6s;
}

.shape-2 {
    width: 180px;
    height: 180px;
    top: 70%;
    right: 10%;
    animation-delay: 2s;
    animation-duration: 8s;
}

.shape-3 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 20%;
    animation-delay: 4s;
    animation-duration: 5s;
}

.shape-4 {
    width: 140px;
    height: 140px;
    top: 40%;
    right: 40%;
    animation-delay: 1s;
    animation-duration: 7s;
}

.shape-5 {
    width: 90px;
    height: 90px;
    top: 5%;
    left: 60%;
    animation-delay: 3s;
    animation-duration: 5.5s;
}

.shape-6 {
    width: 110px;
    height: 110px;
    top: 80%;
    left: 5%;
    animation-delay: 5s;
    animation-duration: 7.5s;
}

.shape-7 {
    width: 130px;
    height: 130px;
    top: 50%;
    right: 5%;
    animation-delay: 2s;
    animation-duration: 6.5s;
}

.shape-8 {
    width: 85px;
    height: 85px;
    bottom: 15%;
    right: 30%;
    animation-delay: 4s;
    animation-duration: 8.5s;
}

.shape-9 {
    width: 95px;
    height: 95px;
    top: 25%;
    left: 75%;
    animation-delay: 6s;
    animation-duration: 5.8s;
}

.shape-10 {
    width: 105px;
    height: 105px;
    bottom: 40%;
    left: 45%;
    animation-delay: 1.5s;
    animation-duration: 7.8s;
}

.shape-11 {
    width: 115px;
    height: 115px;
    top: 60%;
    left: 30%;
    animation-delay: 3.5s;
    animation-duration: 6.8s;
}

.shape-12 {
    width: 125px;
    height: 125px;
    bottom: 10%;
    right: 50%;
    animation-delay: 5.5s;
    animation-duration: 8.8s;
}



@keyframes float {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg) scale(1); 
        opacity: 0.9;
        filter: brightness(1) blur(0px);
    }
    25% { 
        transform: translateY(-35px) rotate(90deg) scale(1.15); 
        opacity: 1;
        filter: brightness(1.2) blur(0.5px);
    }
    50% { 
        transform: translateY(-50px) rotate(180deg) scale(1.3); 
        opacity: 0.95;
        filter: brightness(1.4) blur(0px);
    }
    75% { 
        transform: translateY(-25px) rotate(270deg) scale(1.1); 
        opacity: 1;
        filter: brightness(1.1) blur(0.3px);
    }
}

@keyframes floatDark {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg) scale(1); 
        opacity: 0.9;
        filter: brightness(1) blur(0px);
    }
    25% { 
        transform: translateY(-35px) rotate(90deg) scale(1.15); 
        opacity: 1;
        filter: brightness(1.2) blur(0.5px);
    }
    50% { 
        transform: translateY(-50px) rotate(180deg) scale(1.3); 
        opacity: 0.95;
        filter: brightness(1.4) blur(0px);
    }
    75% { 
        transform: translateY(-25px) rotate(270deg) scale(1.1); 
        opacity: 1;
        filter: brightness(1.1) blur(0.3px);
    }
}

:root {
    --primary-color: #ffffff;
    --secondary-color: #f8fafc;
    --accent-color: #3b82f6;
    --accent-hover: #2563eb;
    --text-color: #1e293b;
    --text-secondary: #64748b;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --border-color: #e2e8f0;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --footer-link-bg: rgba(59, 130, 246, 0.08);
    --footer-link-border: rgba(59, 130, 246, 0.15);
    --footer-link-shadow: rgba(59, 130, 246, 0.1);
    --footer-link-hover-shadow: rgba(59, 130, 246, 0.3);
    --card-bg: #ffffff;
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
}

* {
    box-sizing: border-box;
}

/* 移除所有連結的底線 */
a {
    text-decoration: none;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 0;
    background: #f8fafc;
    color: var(--text-color);
    transition: all 0.3s ease;
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
}

/* 深色模式下的简单背景色 */
.dark-mode body {
    background: #1a202c;
}

/* 页面操作按钮区域 */
.page-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.page-actions .btn {
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.page-actions .btn-secondary {
    background: #f8fafc;
    color: #374151;
    border: 1px solid #d1d5db;
}

.page-actions .btn-secondary:hover {
    background: #f1f5f9;
    border-color: #9ca3af;
}

.page-actions .btn-primary {
    background: var(--accent-color);
    color: white;
    border: 1px solid var(--accent-color);
}

.page-actions .btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

/* 深色模式下的页面操作按钮 */
.dark-mode .page-actions {
    background: #2d3748;
    border: 1px solid #4a5568;
}

.dark-mode .page-actions .btn-secondary {
    background: #374151;
    color: #f9fafb;
    border: 1px solid #4b5563;
}

.dark-mode .page-actions .btn-secondary:hover {
    background: #4b5563;
    border-color: #6b7280;
}

.dark-mode .page-actions .btn-primary {
    background: var(--accent-color);
    color: white;
    border: 1px solid var(--accent-color);
}

.dark-mode .page-actions .btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

/* 卡片和内容背景 - 简单纯色背景 */
.hero,
.feature-card,
.candidate-card,
.settings-card,
.password-card,
.edit-form-card,
.candidate-grid-card,
.card,
.candidate-management,
.upload-card,
.profile-edit-container,
.change-password-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 深色模式下的背景 */
.dark-mode .hero,
.dark-mode .feature-card,
.dark-mode .candidate-card,
.dark-mode .settings-card,
.dark-mode .password-card,
.dark-mode .edit-form-card,
.dark-mode .candidate-grid-card,
.dark-mode .card,
.dark-mode .candidate-management,
.dark-mode .upload-card,
.dark-mode .profile-edit-container,
.dark-mode .change-password-container {
    background: #2d3748;
    border: 1px solid #4a5568;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* 交互元素样式 - 简单纯色背景 */
.btn,
button,
input,
select,
textarea {
    background: #ffffff;
    border: 1px solid #d1d5db;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 深色模式下的交互元素 */
.dark-mode .btn,
.dark-mode button,
.dark-mode input,
.dark-mode select,
.dark-mode textarea {
    background: #374151;
    border: 1px solid #4b5563;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* 模态框和弹窗背景 - 简单纯色背景 */
.modal,
.modal-content {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dark-mode .modal,
.dark-mode .modal-content {
    background: #2d3748;
    border: 1px solid #4a5568;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* 确认删除弹窗样式 */
.confirmation-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.confirmation-modal.show {
    opacity: 1;
    visibility: visible;
}

/* 新的确认弹窗样式 */
.modal-content-new {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: modalFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-30px) rotateX(10deg);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0) rotateX(0deg);
    }
}

/* 美化确认删除视窗 */
.delete-modal-container {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
    backdrop-filter: blur(25px);
    border: 1px solid rgba(203, 213, 225, 0.4);
    border-radius: 28px;
    box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.12),
        0 15px 40px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(0, 0, 0, 0.02);
    padding: 2.5rem;
    width: 380px;
    max-width: 90vw;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

.delete-modal-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #ef4444, #dc2626, #b91c1c, #991b1b);
    border-radius: 28px 28px 0 0;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.3);
}

.delete-modal-container::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: shimmer 3s infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* 删除模态框头部样式 */
.delete-modal-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.delete-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-radius: 50%;
    margin-bottom: 1rem;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.2);
}

.delete-icon-svg {
    width: 28px;
    height: 28px;
    color: #dc2626;
}

/* 删除模态框内容样式 */
.delete-modal-content {
    text-align: center;
    margin-bottom: 2rem;
}

.delete-modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.75rem;
    letter-spacing: -0.025em;
}

.delete-modal-message {
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

.delete-modal-message strong {
    color: #374151;
    font-weight: 600;
}

/* 删除模态框操作按钮样式 */
.delete-modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.delete-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    justify-content: center;
}

.delete-modal-btn-cancel {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.delete-modal-btn-cancel:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.delete-modal-btn-confirm {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border: 1px solid #dc2626;
}

.delete-modal-btn-confirm:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.4);
}

.btn-icon {
    font-size: 1rem;
    line-height: 1;
}

.btn-text {
    font-weight: 600;
}

/* 深色模式样式 */
.dark-mode .delete-modal-container {
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.98), rgba(17, 24, 39, 0.95));
    border-color: rgba(75, 85, 99, 0.4);
}

.dark-mode .delete-modal-title {
    color: #f9fafb;
}

.dark-mode .delete-modal-message {
    color: #d1d5db;
}

.dark-mode .delete-modal-message strong {
    color: #e5e7eb;
}

.dark-mode .delete-modal-btn-cancel {
    background: #374151;
    color: #d1d5db;
    border-color: #4b5563;
}

.dark-mode .delete-modal-btn-cancel:hover {
    background: #4b5563;
    border-color: #6b7280;
}

.dark-mode .delete-icon-wrapper {
    background: linear-gradient(135deg, #374151, #4b5563);
}

.dark-mode .delete-icon-svg {
    color: #f87171;
}

.delete-modal-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background: var(--border-color);
}

.delete-modal-btn:disabled:hover {
    background: var(--border-color);
    transform: none;
}

/* Dark mode styles for disabled button */
[data-theme="dark"] .delete-modal-btn:disabled {
    background: var(--border-color);
    color: var(--text-muted);
}

[data-theme="dark"] .delete-modal-btn:disabled:hover {
    background: var(--border-color);
    color: var(--text-muted);
}

/* 滚动条美化 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--secondary-color);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-hover);
}

/* Legacy header styles removed - replaced with modern AppBar */

/* Legacy user-info styles removed - replaced with modern AppBar user section */

/* 主题切换开关美化 - now positioned in nav-right */
.theme-switch {
    flex-shrink: 0;
}

/* Main Content 美化 - padding adjusted for fixed header */
main {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    background: transparent;
    position: relative;
    z-index: 1;
}

/* Hero Section 美化 */
.hero {
    display: flex;
    align-items: center;
    min-height: 80vh;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    position: relative;
    overflow: hidden;
}

/* Compact Hero for Dashboard and Candidates pages */
.hero.hero-compact {
    min-height: 40vh;
    padding: 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px 20px 0 0;
}

.hero.hero-compact h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

.hero.hero-compact p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    text-align: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero.hero-compact .hero-content {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    max-width: 800px;
    width: 100%;
}

.hero.hero-compact .hero-content::before {
    display: none;
}

.hero.hero-compact .hero-actions {
    justify-content: center;
    padding: 0.5rem 0;
}

.hero.hero-compact .hero-actions::before {
    display: none;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    top: 20%;
    right: 10%;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border-radius: 50%;
    filter: blur(20px);
    animation: float 8s ease-in-out infinite;
    pointer-events: none;
}

.hero-content::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.1) 0%, rgba(102, 126, 234, 0.1) 100%);
    border-radius: 50%;
    filter: blur(30px);
    animation: float 6s ease-in-out infinite reverse;
    pointer-events: none;
    z-index: -1;
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    position: relative;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.hero h1::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hero p {
    font-size: 1.25rem;
    color: #ffffff;
    margin-bottom: 2.5rem;
    line-height: 1.6;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding: 1rem 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.hero p::before {
    content: '✨';
    position: absolute;
    top: -10px;
    left: -20px;
    font-size: 1.5rem;
    opacity: 0.9;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.hero p::after {
    content: '✨';
    position: absolute;
    bottom: -10px;
    right: -20px;
    font-size: 1.5rem;
    opacity: 0.9;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.hero-content {
    flex: 1;
    max-width: 600px;
    z-index: 2;
    animation: fadeInUp 1s ease-out;
    text-align: center;
    position: relative;
    padding: 2.5rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    margin: 0 auto;
}

.hero-content::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 24px;
    z-index: -1;
}

.hero-actions {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 1rem 0;
}

.hero-actions::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: #ffffff;
    border-radius: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-large {
    padding: 1.2rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-large::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 ease;
}

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

.btn-large:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.btn-outline {
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.btn-large:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
}

.btn-outline:hover {
    color: white;
}

.hero-visual {
    flex: 1;
    position: relative;
    height: 500px;
    animation: fadeInUp 1s ease-out 0.3s both;
}

.dashboard-preview {
    position: relative;
    width: 100%;
    height: 100%;
}

.preview-card {
    position: absolute;
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    animation: float 6s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.preview-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.card-1 {
    top: 15%;
    right: 20%;
    animation-delay: 0s;
}

.card-2 {
    top: 40%;
    left: 18%;
    animation-delay: 2s;
}

.card-3 {
    top: 65%;
    right: 25%;
    animation-delay: 4s;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.card-icon {
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
    /* 重新设计图标背景 */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    position: relative;
    overflow: hidden;
}

.card-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    z-index: 1;
}

.card-icon svg {
    color: white;
    transition: all 0.3s ease;
    /* 增强SVG图标可见性 */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    stroke-width: 2.5;
    position: relative;
    z-index: 2;
    width: 24px;
    height: 24px;
}

.card-icon:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.5);
}

.card-icon:hover svg {
    transform: scale(1.1);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.preview-card h4 {
    margin: 0;
    color: var(--text-color);
    font-weight: 600;
    font-size: 1rem;
}

.card-content {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.stat-number {
    font-weight: 700;
    color: var(--accent-color);
    font-size: 1.1rem;
}

.stat-label {
    font-size: 0.8rem;
}

.candidate-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.candidate-avatar {
    width: 32px;
    height: 32px;
    background: var(--gradient-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
}

.candidate-info h5 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-color);
    font-weight: 600;
}

.candidate-info p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.status {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status.dr {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.status.ndr {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.search-preview {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.search-icon {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    transition: all 0.3s ease;
}

.search-icon svg {
    color: var(--text-muted, #9ca3af);
    transition: all 0.3s ease;
    stroke-width: 2;
    width: 16px;
    height: 16px;
}

.search-icon:hover {
    color: var(--accent-color);
}

.search-icon:hover svg {
    color: var(--accent-color);
}

/* Candidates页面搜索图标特殊样式 */
.candidate-management .search-icon {
    color: var(--text-muted, #9ca3af);
}

.candidate-management .search-icon svg {
    color: var(--text-muted, #9ca3af);
    stroke-width: 2;
}

.candidate-management .search-icon:hover {
    color: var(--accent-color);
}

.candidate-management .search-icon:hover svg {
    color: var(--accent-color);
}

.search-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.filter-tags {
    display: flex;
    gap: 0.25rem;
}

.filter-tag {
    padding: 0.25rem 0.5rem;
    background: var(--accent-color);
    color: white;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
}

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

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

/* Features Section */
.features {
    padding: 5rem 2rem;
    background: var(--bg-secondary);
}

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

.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 3rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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

.feature-card {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 340px;
    justify-content: flex-start;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-accent);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

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

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
    height: 48px;
}

.feature-icon svg {
    color: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    transition: all 0.3s ease;
}

.feature-icon:hover svg {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3));
}

.feature-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 1rem;
    text-align: left;
    flex-shrink: 0;
    min-height: 3.5rem;
    display: flex;
    align-items: flex-start;
    line-height: 1.3;
}

.feature-card p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
    text-align: left;
    flex-grow: 1;
    min-height: 4.8rem;
    display: flex;
    align-items: flex-start;
    margin-top: 0;
}

.feature-highlight {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: auto;
    padding-top: 1rem;
    flex-shrink: 0;
    min-height: 2.5rem;
    position: relative;
    top: 1rem;
}

.highlight-text {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-color);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
}

/* Recent Candidates Section */
.recent-candidates {
    padding: 5rem 2rem;
    background: var(--bg-primary);
}

.candidates-grid {
    position: relative;
    min-height: 400px;
    margin-bottom: 3rem;
}

.candidate-card {
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.candidate-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.candidate-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.candidate-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.candidate-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    background: var(--gradient-accent);
}

.candidate-info {
    flex: 1;
}

.candidate-info h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
}

.candidate-info p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.candidate-actions {
    display: flex;
    gap: 0.75rem;
}

.candidate-actions .btn {
    flex: 1;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    font-size: 0.95rem;
    min-height: 2.5rem;
    color: var(--text-color);
    background: transparent;
    transform: translateY(0);
    text-decoration: none;
    max-width: calc(50% - 0.375rem);
}

.candidate-actions .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-accent);
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
    border-radius: 8px;
    transform: translateZ(0);
}

.candidate-actions .btn:hover::before {
    left: 0;
}

.candidate-actions .btn:hover {
    color: white;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    animation: buttonPulse 0.8s ease-in-out infinite;
}

.candidate-actions .btn:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.3);
}

.candidate-actions .btn-primary::before {
    background: var(--gradient-accent);
}

.candidate-actions .btn-secondary::before {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

@keyframes buttonPulse {
    0% { transform: translateY(-3px) scale(1.02); }
    50% { transform: translateY(-3px) scale(1.05); }
    100% { transform: translateY(-3px) scale(1.02); }
}

.view-all-container {
    text-align: center;
}

/* How It Works Section */
.how-it-works {
    padding: 5rem 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.step-card {
    text-align: center;
    padding: 2rem;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-color);
}

.step-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.step-number {
    width: 60px;
    height: 60px;
    background: var(--gradient-accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 1.5rem;
    position: relative;
}

.step-number::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: var(--gradient-accent);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.3;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.1; }
    100% { transform: scale(1); opacity: 0.3; }
}

.step-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 1rem;
}

.step-card p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.step-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-color);
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.action-icon {
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-icon svg {
    color: var(--accent-color);
    transition: all 0.3s ease;
}

.action-icon:hover svg {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.3));
}

/* CTA Section */
.cta-section {
    padding: 5rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
}

.cta-card {
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cta-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.cta-section p {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    opacity: 0.9;
}

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

/* Dark Mode Styles */
.dark-mode .hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

.dark-mode .hero.hero-compact {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.dark-mode .hero-content {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(20px);
}

.dark-mode .hero h1 {
    color: #ffffff;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}

.dark-mode .hero p {
    color: rgba(255, 255, 255, 0.95);
}

.dark-mode .btn-large {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark-mode .preview-card {
    background: rgba(51, 65, 85, 0.9);
    border-color: var(--border-color);
}

.dark-mode .feature-card {
    background: rgba(51, 65, 85, 0.9);
    border-color: var(--border-color);
}

.dark-mode .step-card {
    background: rgba(51, 65, 85, 0.9);
    border-color: var(--border-color);
}

.dark-mode .how-it-works {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
}

.dark-mode .section-title {
    color: white;
}

.dark-mode .candidate-card {
    background: rgba(51, 65, 85, 0.9);
    border-color: var(--border-color);
}

.dark-mode .cta-section {
    background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1rem;
    }
    
    .hero.hero-compact {
        min-height: 30vh;
        padding: 1.5rem 1rem;
    }
    
    .hero.hero-compact h1 {
        font-size: 2rem;
    }
    
    .hero.hero-compact p {
        font-size: 1rem;
    }
    
    .hero.hero-compact .hero-content {
        padding: 1rem;
        margin: 0 0.5rem;
    }
    
    .hero-content {
        padding: 1.5rem;
        margin: 0 1rem;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero h1::after {
        width: 60px;
        height: 3px;
    }
    
    .hero p::before,
    .hero p::after {
        display: none;
    }
    
    .hero-visual {
        height: 300px;
        margin-top: 2rem;
    }
    
    .preview-card {
        position: relative;
        margin-bottom: 1rem;
        animation: none;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .steps-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-actions,
    .cta-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-large {
        width: 100%;
        max-width: 300px;
    }
    
    .candidates-grid {
        min-height: 300px;
    }
    
    .candidate-actions {
        flex-direction: column;
    }
    
    .candidate-actions .btn {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero.hero-compact {
        min-height: 25vh;
        padding: 1rem 0.5rem;
    }
    
    .hero.hero-compact h1 {
        font-size: 1.75rem;
    }
    
    .hero.hero-compact p {
        font-size: 0.9rem;
    }
    
    .hero.hero-compact .hero-content {
        padding: 0.75rem;
        margin: 0 0.25rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .feature-card,
    .step-card {
        padding: 1.5rem;
    }
    
    .cta-card {
        padding: 2rem 1rem;
    }
}

/* Dashboard 美化 */
.dashboard {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Summary Cards 美化 */
.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-accent);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

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

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.card .number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

.card .trend {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Candidate Management 美化 */
.candidate-management {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: -20px;
    position: relative;
    z-index: 1;
}

.candidate-management h2 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.candidate-management h2::before {
    content: "";
    font-size: 1.5rem;
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-right: 0.5rem;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='7' r='4' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M23 21V19C23 18.1137 22.7311 17.2528 22.2312 16.5528C21.7313 15.8529 21.0282 15.3516 20.25 15.13' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 3.13C16.7782 3.3516 17.4813 3.8529 17.9812 4.5528C18.4811 5.2528 18.75 6.1137 18.75 7C18.75 7.8863 18.4811 8.7472 17.9812 9.4472C17.4813 10.1471 16.7782 10.6484 16 10.87' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.candidate-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.candidates-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.candidate-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9));
    border-radius: 20px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 4px 16px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    min-height: 280px;
    justify-content: space-between;
}

.candidate-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 20px 20px 0 0;
}

.candidate-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

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

.candidate-card:hover::after {
    opacity: 1;
}

.candidate-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 10px 30px rgba(59, 130, 246, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.candidate-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.candidate-card img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent-color);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.candidate-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 60px;
}

.candidate-info h3 {
    font-size: 1.375rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: var(--text-color);
    background: linear-gradient(135deg, #1f2937, #374151);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease;
    line-height: 1.3;
}

.candidate-info p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
    font-weight: 500;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.candidate-card:hover .candidate-info h3 {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    background-clip: text;
    -webkit-background-clip: text;
    transform: translateX(5px);
}

.candidate-card:hover .candidate-info p {
    opacity: 1;
    color: var(--text-color);
    transform: translateX(5px);
}

.status {
    padding: 0.6rem 1rem;
    border-radius: 20px;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    min-height: 1.75rem;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    margin-top: 0.25rem;
}

.status::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    border-radius: inherit;
    z-index: -1;
    transform: translateZ(0);
}

.status.new {
    background: var(--gradient-accent);
    box-shadow: 0 2px 8px rgba(79, 172, 254, 0.3);
}

.status.interviewed {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.status.hired {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.status.dr {
    background: linear-gradient(135deg, #10b981, #059669, #047857);
    color: white;
    box-shadow: 
        0 4px 15px rgba(16, 185, 129, 0.4),
        0 2px 8px rgba(5, 150, 105, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.status.ndr {
    background: linear-gradient(135deg, #f59e0b, #d97706, #b45309);
    color: white;
    box-shadow: 
        0 4px 15px rgba(245, 158, 11, 0.4),
        0 2px 8px rgba(217, 119, 6, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 状态标签悬停效果 */
.candidate-card:hover .status {
    transform: translateY(-2px) scale(1.05);
}

.candidate-card:hover .status.dr {
    box-shadow: 
        0 8px 25px rgba(16, 185, 129, 0.5),
        0 4px 15px rgba(5, 150, 105, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.candidate-card:hover .status.ndr {
    box-shadow: 
        0 8px 25px rgba(245, 158, 11, 0.5),
        0 4px 15px rgba(217, 119, 6, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.candidate-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-grow: 1;
}

.candidate-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: auto;
    flex-shrink: 0;
}

.candidate-actions button {
    flex: 1;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    font-size: 0.95rem;
    min-height: 2.5rem;
    color: var(--text-color);
    background: transparent;
}

.candidate-actions button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-accent);
    z-index: -1;
    border-radius: 8px;
}

.candidate-actions button:hover::before {
    left: 0;
}

.candidate-actions button:hover {
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.candidate-actions button:active {
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.3);
}

/* 深色模式下的按鈕樣式 */
.dark-mode .candidate-actions button {
    color: var(--text-color);
}

.dark-mode .candidate-actions button:hover {
    color: white;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5);
}

/* 深色模式下的View Profile按钮样式 - 保持蓝色背景 */
.dark-mode .candidate-actions a {
    background: #3b82f6;
    border-color: #3b82f6;
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.dark-mode .candidate-actions a:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: white;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

.dark-mode .candidate-actions a:active {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

/* 添加脈衝動畫效果 */
@keyframes buttonPulse {
    0% { transform: translateY(-3px) scale(1.02); }
    50% { transform: translateY(-3px) scale(1.05); }
    100% { transform: translateY(-3px) scale(1.02); }
}

/* 移除动画效果 */

/* View Profile 按钮样式 - 蓝色背景无动画 */
.candidate-actions a {
    flex: 1;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    font-size: 0.95rem;
    min-height: 2.8rem;
    color: white;
    background: #3b82f6;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    border: 1px solid #3b82f6;
}

.candidate-actions a:hover {
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.candidate-actions a:active {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

/* 头像系统 - 根据名字生成动态颜色 */
.candidate-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    position: relative;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

/* 根据首字母生成不同颜色的头像 */
.candidate-avatar[data-initials^="A"], .candidate-avatar[data-initials^="N"] {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
}

.candidate-avatar[data-initials^="B"], .candidate-avatar[data-initials^="O"] {
    background: linear-gradient(135deg, #4ecdc4, #26d0ce);
}

.candidate-avatar[data-initials^="C"], .candidate-avatar[data-initials^="P"] {
    background: linear-gradient(135deg, #45b7d1, #96ceb4);
}

.candidate-avatar[data-initials^="D"], .candidate-avatar[data-initials^="Q"] {
    background: linear-gradient(135deg, #f39c12, #f1c40f);
}

.candidate-avatar[data-initials^="E"], .candidate-avatar[data-initials^="R"] {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

.candidate-avatar[data-initials^="F"], .candidate-avatar[data-initials^="S"] {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.candidate-avatar[data-initials^="G"], .candidate-avatar[data-initials^="T"] {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
}

.candidate-avatar[data-initials^="H"], .candidate-avatar[data-initials^="U"] {
    background: linear-gradient(135deg, #e67e22, #d35400);
}

.candidate-avatar[data-initials^="I"], .candidate-avatar[data-initials^="V"] {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.candidate-avatar[data-initials^="J"], .candidate-avatar[data-initials^="W"] {
    background: linear-gradient(135deg, #1abc9c, #16a085);
}

.candidate-avatar[data-initials^="K"], .candidate-avatar[data-initials^="X"] {
    background: linear-gradient(135deg, #34495e, #2c3e50);
}

.candidate-avatar[data-initials^="L"], .candidate-avatar[data-initials^="Y"] {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

.candidate-avatar[data-initials^="M"], .candidate-avatar[data-initials^="Z"] {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}

/* 默认头像颜色 */
.candidate-avatar:not([data-initials]) {
    background: linear-gradient(135deg, #6c757d, #495057);
}

/* 头像悬停效果 */
.candidate-card:hover .candidate-avatar {
    transform: scale(1.1);
    box-shadow: 
        0 12px 35px rgba(0, 0, 0, 0.2),
        0 6px 18px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 深色模式下的头像样式 */
.dark-mode .candidate-avatar {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.dark-mode .candidate-card:hover .candidate-avatar {
    box-shadow: 
        0 12px 35px rgba(0, 0, 0, 0.4),
        0 6px 18px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Footer 美化 */
footer {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    text-align: center;
    margin-top: 4rem;
    border-top: 1px solid var(--border-color);
}

footer p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

footer ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 0;
    margin: 0;
}

footer a {
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.3s ease;
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    min-height: 2.5rem;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

footer a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-accent);
    transition: left 0.3s ease;
    z-index: -1;
    border-radius: 10px;
}

footer a:hover::before {
    left: 0;
}

footer a:hover {
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

/* 深色模式样式 */
.dark-mode {
    --primary-color: #1e293b;
    --secondary-color: #334155;
    --text-color: #f1f5f9;
    --text-secondary: #94a3b8;
    --shadow-color: rgba(255, 255, 255, 0.1);
    --border-color: #475569;
    --footer-link-bg: rgba(59, 130, 246, 0.15);
    --footer-link-border: rgba(59, 130, 246, 0.3);
    --footer-link-shadow: rgba(59, 130, 246, 0.1);
    --footer-link-hover-shadow: rgba(59, 130, 246, 0.25);
    --card-bg: #1e293b;
    --bg-primary: #1e293b;
    --bg-secondary: #334155;
}

/* 深色模式下的body背景渐变 */
.dark-mode body {
    background: gradient linear-gradient(135deg, #1e293b 0%, #334155 50%,
  #475569 100%);
}

/* 渐变背景动画效果 */






.dark-mode header {
    background: rgba(30, 41, 59, 0.95);
    border-bottom-color: var(--border-color);
}

.dark-mode .card,
.dark-mode .candidate-management {
    background: rgba(51, 65, 85, 0.9);
    border-color: rgba(71, 85, 105, 0.2);
}

.dark-mode .candidate-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.9));
    border-color: rgba(71, 85, 105, 0.3);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    min-height: 280px;
    justify-content: space-between;
}

.dark-mode .candidate-card:hover {
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 10px 30px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.dark-mode .candidate-info {
    min-height: 60px;
}

.dark-mode .candidate-info h3 {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.3;
}

.dark-mode .candidate-card:hover .candidate-info h3 {
    background: linear-gradient(135deg, #60a5fa, #a78bfa);
    background-clip: text;
    -webkit-background-clip: text;
}

.dark-mode .candidate-info p {
    color: #94a3b8;
    line-height: 1.4;
}

.dark-mode footer {
    background: rgba(30, 41, 59, 0.95);
    border-top-color: var(--border-color);
    backdrop-filter: blur(15px);
}

.dark-mode footer a {
    background: transparent;
    border-color: transparent;
    color: var(--text-color);
    box-shadow: none;
}

.dark-mode footer a:hover {
    background: transparent;
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Legacy responsive nav styles removed - replaced with modern AppBar responsive design */

@media (max-width: 480px) {
    .hero {
        padding: 3rem 1rem;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .card {
        padding: 1.5rem;
    }
    
    .candidate-management {
        padding: 1.5rem;
    }
    
    nav {
        padding: 0.75rem 1rem;
        padding-right: 3rem;
    }
    
    .menu {
        gap: 0.5rem;
    }
    
    .menu a {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }
    
    .logo {
        font-size: 1.25rem;
    }
    
    .user-info {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
    }
    
    .username-text {
        font-size: 0.8rem;
    }
    
    .theme-switch {
        right: 0.5rem;
    }
    
    .menu {
        margin-right: 2rem;
    }
}

/* 动画效果 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card,
.candidate-card {
    animation: fadeInUp 0.6s ease forwards;
}

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }

.candidate-card:nth-child(1) { animation-delay: 0.5s; }
.candidate-card:nth-child(2) { animation-delay: 0.6s; }
.candidate-card:nth-child(3) { animation-delay: 0.7s; }

/* 新的深色模式切换开关样式 */
/* From Uiverse.io by Galahhad */ 
.theme-switch {
  --toggle-size: 30px;
  /* the size is adjusted using font-size,
     this is not transform scale,
     so you can choose any size */
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 6.25em;
  /* radius 0 - minecraft mode :) */
  --container-light-bg: #3D7EAE;
  --container-night-bg: #1D1F2C;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #ECCA2F;
  --moon-bg: #C4C9D1;
  --spot-color: #959DB1;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #fff;
  --clouds-color: #F3FDFF;
  --back-clouds-color: #AACADF;
  --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
}

.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--toggle-size);
}

.theme-switch__container {
  width: var(--container-width);
  height: var(--container-height);
  background-color: var(--container-light-bg);
  border-radius: var(--container-radius);
  overflow: hidden;
  cursor: pointer;
  -webkit-box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  position: relative;
}

.theme-switch__container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  -webkit-box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  border-radius: var(--container-radius)
}

.theme-switch__checkbox {
  display: none;
}

.theme-switch__circle-container {
  width: var(--circle-container-diameter);
  height: var(--circle-container-diameter);
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: var(--circle-container-offset);
  top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  -webkit-box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: var(--circle-transition);
  -o-transition: var(--circle-transition);
  transition: var(--circle-transition);
  pointer-events: none;
}

.theme-switch__sun-moon-container {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: var(--sun-moon-diameter);
  height: var(--sun-moon-diameter);
  margin: auto;
  border-radius: var(--container-radius);
  background-color: var(--sun-bg);
  -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  -webkit-filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  overflow: hidden;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.theme-switch__moon {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  width: 100%;
  height: 100%;
  background-color: var(--moon-bg);
  border-radius: inherit;
  -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  position: relative;
}

.theme-switch__spot {
  position: absolute;
  top: 0.75em;
  left: 0.312em;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--container-radius);
  background-color: var(--spot-color);
  -webkit-box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
  box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}

.theme-switch__spot:nth-of-type(2) {
  width: 0.375em;
  height: 0.375em;
  top: 0.937em;
  left: 1.375em;
}

.theme-switch__spot:nth-last-of-type(3) {
  width: 0.25em;
  height: 0.25em;
  top: 0.312em;
  left: 0.812em;
}

.theme-switch__clouds {
  width: 1.25em;
  height: 1.25em;
  background-color: var(--clouds-color);
  border-radius: var(--container-radius);
  position: absolute;
  bottom: -0.625em;
  left: 0.312em;
  -webkit-box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--clouds-color), 4.125em -2.125em 0 0.437em var(--clouds-color);
  box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--clouds-color), 4.125em -2.125em 0 0.437em var(--clouds-color);
  -webkit-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  -o-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
}

.theme-switch__stars-container {
  position: absolute;
  color: var(--stars-color);
  top: -100%;
  left: 0.312em;
  width: 2.75em;
  height: auto;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

/* actions */

.theme-switch__checkbox:checked + .theme-switch__container {
  background-color: var(--container-night-bg);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em)
}

.theme-switch__circle-container:hover {
  left: calc(var(--circle-container-offset) + 0.187em);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  transform: translate(0);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds {
  bottom: -4.062em;
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
} 

/* 登录和注册页面样式 */
/* 使用基础的hero样式，保持简洁 */ 

/* ===== PROFILE EDIT PAGE STYLES ===== */
.profile-edit-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.page-title {
    color: var(--text-color);
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
}

.edit-form-card {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow-color);
    overflow: hidden;
}

.profile-form {
    padding: 2rem;
}

.form-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.form-section h3 {
    color: var(--text-color);
    margin: 0 0 1.5rem 0;
    font-size: 1.2rem;
    font-weight: 600;
}

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

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-color);
}

.form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-size: 1rem;
    background: var(--bg-primary);
    color: var(--text-color);
    transition: border-color 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(32, 201, 151, 0.1);
}

.form-group small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.info-display {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 1rem;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

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

.info-item label {
    font-weight: 600;
    color: var(--text-color);
}

.info-item span {
    color: var(--text-secondary);
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--accent-color);
    color: white;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 3px 12px rgba(59, 130, 246, 0.25);
}

.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    backdrop-filter: blur(20px);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.35);
}

.btn-secondary {
    background: var(--text-secondary);
    color: white;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 3px 12px rgba(107, 114, 128, 0.25);
}

.btn-secondary:hover {
    background: var(--text-color);
    backdrop-filter: blur(20px);
    box-shadow: 0 5px 15px rgba(107, 114, 128, 0.35);
}

.alert {
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-weight: 500;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-danger {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-warning {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.alert-info {
    background: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* ===== SETTINGS PAGE STYLES ===== */
.settings-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    animation: fadeInUp 0.6s ease-out;
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
    border-radius: 16px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    backdrop-filter: blur(10px);
}

.header-content {
    flex: 1;
}

.page-title {
    color: var(--text-color);
    margin: 0 0 0.5rem 0;
    font-size: 2.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.title-icon {
    font-size: 2rem;
    animation: rotate 3s linear infinite;
}

.page-subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin: 0;
    font-weight: 400;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.settings-card {
    background: var(--primary-color);
    border-radius: 16px;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-color);
    position: relative;
}

.settings-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-color), #8b5cf6, #ec4899);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.settings-card:hover::before {
    opacity: 1;
}

.settings-card:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.12),
        0 8px 16px rgba(0, 0, 0, 0.08);
}

.card-header {
    background: linear-gradient(135deg, var(--accent-color) 0%, #8b5cf6 100%);
    color: white;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.settings-card:hover .card-header::before {
    transform: translateX(100%);
}

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

.header-icon {
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.header-text h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.header-text p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

.user-profile-card .card-header {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.user-profile-card .btn-primary {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: white;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    border: 1px solid rgba(245, 158, 11, 0.2);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: glow 2s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.user-profile-card .btn-primary::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 ease;
}

.user-profile-card .btn-primary:hover::before {
    left: 100%;
}

.user-profile-card .btn-primary:hover {
    background: linear-gradient(135deg, #d97706, #ea580c);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
    border-color: rgba(245, 158, 11, 0.4);
}

.user-profile-card .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.profile-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.card-content {
    padding: 1.5rem;
}

.info-grid {
    display: grid;
    gap: 1rem;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--secondary-color);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.info-item:hover {
    background: var(--accent-color);
    color: white;
    transform: translateX(4px);
}

.info-icon {
    font-size: 1.2rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    color: var(--accent-color);
}

.info-item:hover .info-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.info-content {
    flex: 1;
}

.info-content label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-content span {
    display: block;
    font-weight: 500;
    color: var(--text-color);
}

.info-item:hover .info-content label,
.info-item:hover .info-content span {
    color: white;
}

.security-list, .preferences-list, .danger-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.security-item, .preference-item, .danger-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--secondary-color);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.security-item:hover, .preference-item:hover, .danger-item:hover {
    background: rgba(59, 130, 246, 0.05);
    transform: translateX(4px);
}

.security-info, .preference-info, .danger-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.security-icon, .preference-icon, .danger-icon {
    font-size: 1.2rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    color: var(--accent-color);
}

.security-details h4, .preference-details h4, .danger-details h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

.security-details p, .preference-details p, .danger-details p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.status-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-verified {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.badge-icon {
    font-size: 0.7rem;
}

.switch {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 28px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked + .slider {
    background: linear-gradient(135deg, var(--accent-color), #8b5cf6);
}

input:checked + .slider:before {
    transform: translateX(28px);
}

.danger-zone {
    border: 2px solid #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05) 0%, rgba(239, 68, 68, 0.02) 100%);
}

.danger-zone .card-header {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.danger-zone .danger-icon {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-color);
}

.btn-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-icon {
    font-size: 0.9rem;
}

.btn-outline {
    background: transparent;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
}

.btn-outline:hover {
    background: var(--accent-color);
    color: white;
    transform: translateY(-2px);
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
}

.btn-danger:disabled {
    background: #6c757d;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


/* Animations */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

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

@keyframes glow {
    0% {
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    }
    50% {
        box-shadow: 0 4px 20px rgba(245, 158, 11, 0.5);
    }
    100% {
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    }
}

/* Dark mode styles for new components */
.dark-mode .profile-edit-container {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.dark-mode .edit-form-card {
    background: rgba(51, 65, 85, 0.9);
    border-color: rgba(71, 85, 105, 0.3);
}

.dark-mode .settings-container {
 
}

.dark-mode .settings-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: rgba(59, 130, 246, 0.3);
}

.dark-mode .page-title {
    color: #f1f5f9;
}

.dark-mode .page-subtitle {
    color: #ffff;
}

.dark-mode .settings-card {
    background: rgba(51, 65, 85, 0.9);
    border-color: rgba(71, 85, 105, 0.3);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dark-mode .settings-card:hover {
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 10px 30px rgba(59, 130, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.dark-mode .info-item,
.dark-mode .security-item,
.dark-mode .preference-item,
.dark-mode .danger-item {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(71, 85, 105, 0.3);
}

.dark-mode .info-item:hover,
.dark-mode .security-item:hover,
.dark-mode .preference-item:hover,
.dark-mode .danger-item:hover {
    background: rgba(59, 130, 246, 0.2);
}

.dark-mode .info-content label,
.dark-mode .security-details h4,
.dark-mode .preference-details h4,
.dark-mode .danger-details h4 {
    color: #f1f5f9;
}

.dark-mode .info-content span,
.dark-mode .security-details p,
.dark-mode .preference-details p,
.dark-mode .danger-details p {
    color: #94a3b8;
}

.dark-mode .danger-zone {
    border-color: #ef4444;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
}

.dark-mode .btn-outline {
    color: #60a5fa;
    border-color: #60a5fa;
}

.dark-mode .btn-outline:hover {
    background: #60a5fa;
    color: #0f172a;
}

.dark-mode .user-profile-card .btn-primary {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    border: 1px solid rgba(245, 158, 11, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    animation: glow 2s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.dark-mode .user-profile-card .btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.dark-mode .user-profile-card .btn-primary:hover::before {
    left: 100%;
}

.dark-mode .user-profile-card .btn-primary:hover {
    background: linear-gradient(135deg, #d97706, #ea580c);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.5);
    border-color: rgba(245, 158, 11, 0.5);
    transform: translateY(-2px);
}

.dark-mode .user-profile-card .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.dark-mode .btn-icon {
    filter: brightness(1.1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* SVG icon styles */
.danger-icon .svgIcon {
    width: 24px;
    height: 24px;
}

.danger-icon {
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    width: 40px;
    flex-shrink: 0;
}

.danger-info {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
}

.danger-details {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 50px;
    flex: 1;
    padding-right: 1rem;
}

.danger-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem;
    background: var(--secondary-color);
    border-radius: 12px;
    transition: all 0.2s ease;
    min-height: 90px;
    gap: 1rem;
}

.danger-item .btn {
    flex-shrink: 0;
    min-width: 140px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.25rem;
}

.danger-details h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.2;
}

.danger-details p {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
    max-width: 280px;
}

/* Delete Account icon styles */
.danger-item:first-child .danger-icon .svgIcon path {
    fill: #ef4444;
}

.danger-item:first-child:hover .danger-icon .svgIcon path {
    fill: #dc2626;
}

/* Export Data icon styles */
.danger-item:last-child .danger-icon .svgIcon path {
    fill: #f59e0b;
}

.danger-item:last-child:hover .danger-icon .svgIcon path {
    fill: #d97706;
}

/* Dark mode icon styles */
.dark-mode .danger-item:first-child .danger-icon .svgIcon path {
    fill: #f87171;
}

.dark-mode .danger-item:first-child:hover .danger-icon .svgIcon path {
    fill: #ef4444;
}

.dark-mode .danger-item:last-child .danger-icon .svgIcon path {
    fill: #fbbf24;
}

.dark-mode .danger-item:last-child:hover .danger-icon .svgIcon path {
    fill: #f59e0b;
}

/* Responsive design for new components */
@media (max-width: 768px) {
    .profile-edit-container {
        padding: 1rem;
    }
    
    .page-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .profile-form {
        padding: 1rem;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
        text-align: center;
    }
    
    .settings-container {
        padding: 1rem;
    }
    
    .settings-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    .settings-grid {
        grid-template-columns: 1fr;
    }
    
    .card-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .security-item, .preference-item, .danger-item {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        min-height: auto;
    }
    
    .danger-item .btn {
        min-width: auto;
        width: 100%;
        max-width: 200px;
        margin-top: 0.5rem;
    }
    
    .danger-details p {
        max-width: 100%;
        margin-bottom: 0.75rem;
    }
    
    .info-item {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .settings-header {
        padding: 1.5rem;
    }
    
    .page-title {
        font-size: 1.75rem;
    }
    
    .card-content {
        padding: 1rem;
    }
    
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    
    .user-profile-card .btn-primary {
        font-size: 0.85rem;
        padding: 0.6rem 1.2rem;
        animation: none;
    }
    
    .user-profile-card .btn-primary:hover {
        animation: pulse 1s ease-in-out;
    }
    
    .dark-mode .user-profile-card .btn-primary {
        animation: none;
    }
    
    .dark-mode .user-profile-card .btn-primary:hover {
        animation: pulse 1s ease-in-out;
    }
} 

/* Change Password Page Styles */
.change-password-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    animation: fadeInUp 0.6s ease-out;
    background: var(--bg-primary, #ffffff);
}

.change-password-container .page-header {
    margin-bottom: 2rem;
}

.change-password-container .header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.change-password-container .header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.change-password-container .title-icon {
    font-size: 2.5rem;
    color: #3b82f6;
}

.change-password-container .title-text h1 {
    color: var(--text-primary, #111827);
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.change-password-container .page-subtitle {
    color: var(--text-secondary, #4b5563);
    font-size: 1.1rem;
    margin: 0;
}

.change-password-container .btn-back {
    background: var(--surface-secondary, #f3f4f6);
    color: var(--text-primary, #111827);
    border: 1px solid var(--border-color, #e5e7eb);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.change-password-container .btn-back:hover {
    background: var(--surface-hover, #e5e7eb);
    transform: translateY(-2px);
}

/* Password Cards */
.password-card {
    background: var(--card-bg, #ffffff);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color, #e5e7eb);
    transition: all 0.3s ease;
}

.password-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.password-card .card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.password-card .card-icon {
    font-size: 1.5rem;
    color: #3b82f6;
}

.password-card .card-title {
    flex: 1;
    text-align: left;
}

.password-card .card-title h3 {
    color: var(--text-primary, #111827);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    text-align: left;
}

.password-card .card-title p {
    color: var(--text-secondary, #4b5563);
    font-size: 0.9rem;
    margin: 0;
    text-align: left;
}

/* Form Groups */
.password-card .form-group {
    margin-bottom: 1.5rem;
}

.password-card .form-group label {
    display: block;
    color: var(--text-primary, #111827);
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.password-card .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-card .input-wrapper input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--input-bg, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    color: var(--text-primary, #111827);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.password-card .input-wrapper input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.password-card .input-wrapper input::placeholder {
    color: var(--text-muted, #9ca3af);
}

.password-card .password-toggle {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--text-secondary, #4b5563);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.password-card .password-toggle:hover {
    color: var(--text-primary, #111827);
}

.password-card .form-group small {
    display: block;
    color: var(--text-muted, #6b7280);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

/* Password Inputs Layout */
.password-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .password-inputs {
        grid-template-columns: 1fr;
    }
}

/* Strength Indicator */
.strength-indicator {
    margin-bottom: 1.5rem;
}

.strength-bar {
    width: 100%;
    height: 8px;
    background: var(--surface-secondary, #f3f4f6);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.strength-fill {
    height: 100%;
    width: 0%;
    background: #ff4444;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.strength-text {
    color: var(--text-secondary, #4b5563);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Form Actions */
.change-password-container .form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.change-password-container .btn {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.change-password-container .btn-primary {
    background: #3b82f6;
    color: #ffffff;
}

.change-password-container .btn-primary:hover {
    background: #2563eb;
    transform: translateY(-2px);
}

.change-password-container .btn-secondary {
    background: var(--surface-secondary, #f3f4f6);
    color: var(--text-primary, #111827);
    border: 1px solid var(--border-color, #e5e7eb);
}

.change-password-container .btn-secondary:hover {
    background: var(--surface-hover, #e5e7eb);
    transform: translateY(-2px);
}

/* Alert Styles */
.change-password-container .alert {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: slideInDown 0.3s ease;
}

.change-password-container .alert-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.change-password-container .alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.change-password-container .alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #f59e0b;
}

.change-password-container .alert-info {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

.change-password-container .alert-close {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1.2rem;
    margin-left: auto;
    padding: 0;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.change-password-container .alert-close:hover {
    opacity: 1;
    transform: none;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Dark Mode Support */
.dark-mode .change-password-container {
    background: var(--bg-primary);
}

.dark-mode .change-password-container .title-text h1 {
    color: var(--text-color);
}

.dark-mode .change-password-container .page-subtitle {
    color: var(--text-secondary);
}

.dark-mode .change-password-container .btn-back {
    background: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

.dark-mode .change-password-container .btn-back:hover {
    background: var(--bg-secondary);
}

.dark-mode .password-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.dark-mode .password-card .card-title h3 {
    color: var(--text-color);
}

.dark-mode .password-card .card-title p {
    color: var(--text-secondary);
}

.dark-mode .password-card .form-group label {
    color: var(--text-color);
}

.dark-mode .password-card .input-wrapper input {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-color);
}

.dark-mode .password-card .input-wrapper input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.dark-mode .password-card .password-toggle {
    color: var(--text-secondary);
}

.dark-mode .password-card .password-toggle:hover {
    color: var(--text-color);
}

.dark-mode .password-card .form-group small {
    color: var(--text-secondary);
}

.dark-mode .strength-bar {
    background: var(--bg-secondary);
}

.dark-mode .strength-text {
    color: var(--text-secondary);
}

.dark-mode .change-password-container .form-actions {
    border-top-color: var(--border-color);
}

.dark-mode .change-password-container .btn-secondary {
    background: var(--card-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

.dark-mode .change-password-container .btn-secondary:hover {
    background: var(--bg-secondary);
}

/* Responsive Design */
@media (max-width: 768px) {
    .change-password-container {
        padding: 1rem;
    }
    
    .change-password-container .header-content {
        flex-direction: column;
        gap: 1rem;
    }
    
    .change-password-container .title-text h1 {
        font-size: 2rem;
    }
    
    .change-password-container .form-actions {
        flex-direction: column;
    }
    
    .change-password-container .btn {
        width: 100%;
        justify-content: center;
    }
} 

/* Responsive Design */
@media (max-width: 768px) {
    .change-password-container {
        padding: 1rem;
    }
    
    .change-password-container .header-content {
        flex-direction: column;
        gap: 1rem;
    }
    
    .change-password-container .title-text h1 {
        font-size: 2rem;
    }
    
    .change-password-container .form-actions {
        flex-direction: column;
    }
    
    .change-password-container .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Candidate Grid Card Styles */
.candidate-grid-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.candidate-grid-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

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

.candidate-grid-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Delete Icon Button */
.delete-icon.button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(
        to bottom right,
        rgb(69, 120, 255),
        rgb(255, 69, 69)
    );
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 10;
}

.delete-icon.button:hover {
    background: linear-gradient(
        to bottom right,
        rgb(59, 110, 245),
        rgb(245, 59, 59)
    );
    transform: scale(1.1);
}

.delete-icon.button .svgIcon {
    width: 16px;
    height: 16px;
    fill: white;
    transition: fill 0.3s ease;
}

.delete-icon.button:hover .svgIcon {
    fill: white;
}

/* Candidate Header */
.candidate-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.candidate-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.2rem;
    color: white;
    background: var(--gradient-primary);
    flex-shrink: 0;
}

.candidate-info h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
}

.candidate-info p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Candidate Details */
.candidate-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value {
    font-size: 0.95rem;
    color: var(--text-color);
    font-weight: 500;
}

/* Candidate Actions */
.candidate-actions {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.candidate-actions .btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

.candidate-actions .btn-primary {
    background: var(--accent-color);
    color: white;
}

.candidate-actions .btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.candidate-actions .btn-secondary {
    background: var(--secondary-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.candidate-actions .btn-secondary:hover {
    background: #2563eb !important;
    color: white !important;
    transform: translateY(-1px);
}

.candidate-actions .btn-danger {
    background: #ef4444;
    color: white;
}

.candidate-actions .btn-danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

/* 深色模式下的按钮悬停效果 */
.dark-mode .candidate-actions .btn-secondary:hover {
    background: #2563eb !important;
    color: white !important;
    transform: translateY(-1px);
}

/* Candidate Footer */
.candidate-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.call-notes-count {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.count-text {
    font-weight: 600;
    color: var(--accent-color);
}

/* Candidate Status */
.candidate-status {
    display: flex;
    align-items: center;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-inactive {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-hired {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-interviewed {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Dark Mode Support for Candidate Grid Cards */
.dark-mode .candidate-grid-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.dark-mode .candidate-info h3 {
    color: var(--text-color);
}

.dark-mode .candidate-info p {
    color: var(--text-secondary);
}

.dark-mode .detail-label {
    color: var(--text-secondary);
}

.dark-mode .detail-value {
    color: var(--text-color);
}

.dark-mode .candidate-footer {
    border-color: var(--border-color);
}

.dark-mode .call-notes-count {
    color: var(--text-secondary);
}

.dark-mode .count-text {
    color: var(--accent-color);
}

/* Dark mode styles for delete icon button */
.dark-mode .delete-icon.button {
    background: linear-gradient(
        to bottom right,
        rgb(69, 120, 255),
        rgb(255, 69, 69)
    );
}

.dark-mode .delete-icon.button .svgIcon {
    fill: white;
}

.dark-mode .delete-icon.button:hover {
    background: linear-gradient(
        to bottom right,
        rgb(59, 110, 245),
        rgb(245, 59, 59)
    );
}

.dark-mode .delete-icon.button:hover .svgIcon {
    fill: white;
}

/* Responsive Design for Candidate Grid Cards */
@media (max-width: 768px) {
    .candidate-details {
        grid-template-columns: 1fr;
    }
    
    .candidate-actions {
        flex-direction: column;
    }
    
    .candidate-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .candidate-footer {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .candidate-grid-card {
        padding: 1rem;
    }
    
    .candidate-header {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
    
    .candidate-avatar {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* Dark Mode Support for SVG Icons */
.dark-mode .search-icon svg {
    color: rgba(255, 255, 255, 0.8);
}

.dark-mode .search-icon:hover svg {
    color: var(--accent-color);
}

.dark-mode .card-icon svg {
    color: var(--accent-color);
}

.dark-mode .feature-icon svg {
    fill: #667eea;
    filter: drop-shadow(0 0 8px rgba(102, 126, 234, 0.6));
}

.dark-mode .feature-icon:hover svg {
    fill: #764ba2;
    filter: drop-shadow(0 0 12px rgba(118, 75, 162, 0.8));
}

.dark-mode .action-icon svg {
    color: var(--accent-color);
}

.dark-mode .action-icon:hover svg {
    filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.5));
}

.dark-mode .highlight-text {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-color);
}

.dark-mode .candidate-management h2::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='7' r='4' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M23 21V19C23 18.1137 22.7311 17.2528 22.2312 16.5528C21.7313 15.8529 21.0282 15.3516 20.25 15.13' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 3.13C16.7782 3.3516 17.4813 3.8529 17.9812 4.5528C18.4811 5.2528 18.75 6.1137 18.75 7C18.75 7.8863 18.4811 8.7472 17.9812 9.4472C17.4813 10.1471 16.7782 10.6484 16 10.87' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 深色模式图标可见性增强 */
.dark-mode .card-icon {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4);
}

.dark-mode .card-icon:hover {
    box-shadow: 0 8px 20px rgba(79, 172, 254, 0.5);
}

.dark-mode .search-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.dark-mode .search-icon:hover {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Candidates页面深色模式搜索图标 */
.dark-mode .candidate-management .search-icon {
    background: #2d3748;
    box-shadow: 0 2px 6px rgba(45, 55, 72, 0.4);
}

.dark-mode .candidate-management .search-icon svg {
    color: #60a5fa;
    filter: drop-shadow(0 1px 2px rgba(96, 165, 250, 0.4));
}

.dark-mode .candidate-management .search-icon:hover {
    background: #1a202c;
    box-shadow: 0 4px 10px rgba(45, 55, 72, 0.5);
}

.dark-mode .candidate-management .search-icon:hover svg {
    color: #3b82f6;
    filter: drop-shadow(0 2px 4px rgba(96, 165, 250, 0.5));
}

/* Settings页面SVG图标样式 */
.settings-container svg {
    transition: all 0.3s ease;
}

.settings-container .title-icon svg {
    color: #ffffff;
    width: 24px;
    height: 24px;
}

.settings-container .header-icon svg {
    color: var(--accent-color);
    width: 20px;
    height: 20px;
}

.settings-container .info-icon svg,
.settings-container .security-icon svg,
.settings-container .preference-icon svg {
    color: var(--text-secondary);
    width: 16px;
    height: 16px;
}

.settings-container .btn-icon svg {
    color: currentColor;
    width: 16px;
    height: 16px;
}

.settings-container .badge-icon svg {
    color: currentColor;
    width: 12px;
    height: 12px;
}

/* Settings页面图标悬停效果 */
.settings-container .info-icon:hover svg,
.settings-container .security-icon:hover svg,
.settings-container .preference-icon:hover svg {
    color: var(--accent-color);
    transform: scale(1.1);
}

.settings-container .header-icon:hover svg {
    color: var(--accent-color);
    transform: scale(1.1);
}r svg {
    transform: scale(1.05);
}

/* 深色模式Settings图标 */
.dark-mode .settings-container .info-icon svg,
.dark-mode .settings-container .security-icon svg,
.dark-mode .settings-container .preference-icon svg {
    color: #94a3b8;
}

.dark-mode .settings-container .info-icon:hover svg,
.dark-mode .settings-container .security-icon:hover svg,
.dark-mode .settings-container .preference-icon:hover svg {
    color: #60a5fa;
}

/* Settings页面危险区域图标样式 */
.settings-container .danger-icon svg {
    color: #ef4444;
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
}

.settings-container .danger-icon:hover svg {
    color: #dc2626;
    transform: scale(1.1);
}

/* 深色模式危险区域图标 */
.dark-mode .settings-container .danger-icon svg {
    color: #f87171;
}

.dark-mode .settings-container .danger-icon:hover svg {
    color: #ef4444;
}

/* 图标动画效果 */
@keyframes iconGlow {
    0% {
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
    50% {
        box-shadow: 0 6px 16px rgba(102, 126, 234, 0.6);
    }
    100% {
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
}

@keyframes iconPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.card-icon {
    animation: iconGlow 3s ease-in-out infinite;
}

.search-icon:hover {
    animation: iconPulse 0.6s ease-in-out;
}

/* SignUp页面标题区域背景优化 - 确保字体可读性 */
.signup-page .auth-header {
    background: #ffffff;
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

.signup-page .auth-header .page-title {
    color: #1f2937;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: none;
}

.signup-page .auth-header .page-subtitle {
    color: #6b7280;
    font-size: 1.1rem;
    opacity: 1;
    text-shadow: none;
    font-weight: 500;
}

/* 深色模式下的SignUp页面标题区域 */
.dark-mode .signup-page .auth-header {
    background: #2d3748;
    border: 1px solid #4a5568;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.dark-mode .signup-page .auth-header .page-title {
    color: #f9fafb;
}

.dark-mode .signup-page .auth-header .page-subtitle {
    color: #d1d5db;
}

/* 登录页面标题区域背景优化 - 确保字体可读性 */
.login-page .auth-header {
    background: #ffffff;
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

.login-page .auth-header .page-title {
    color: #1f2937;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: none;
}

.login-page .auth-header .page-subtitle {
    color: #6b7280;
    font-size: 1.1rem;
    opacity: 1;
    text-shadow: none;
    font-weight: 500;
}

/* 深色模式下的登录页面标题区域 */
.dark-mode .login-page .auth-header {
    background: #2d3748;
    border: 1px solid #4a5568;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.dark-mode .login-page .auth-header .page-title {
    color: #f9fafb;
}

.dark-mode .login-page .auth-header .page-subtitle {
    color: #d1d5db;
}

/* Settings页面Username图标动画效果 */
.settings-card .info-item .info-icon svg {
    transition: all 0.3s ease;
}

.settings-card .info-item:hover .info-icon svg {
    animation: userHeadMove 0.6s ease-in-out;
}

/* 用户头部移动动画 */
@keyframes userHeadMove {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-2px) rotate(-2deg);
    }
    50% {
        transform: translateY(-4px) rotate(0deg);
    }
    75% {
        transform: translateY(-2px) rotate(2deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

/* 深色模式下的动画效果 */
.dark-mode .settings-card .info-item:hover .info-icon svg {
    animation: userHeadMove 0.6s ease-in-out;
    filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
}

/* Settings页面图标美化 - 独特动画效果 */

/* 基础图标样式 - 所有SVG图标 */
.settings-card svg,
.settings-header svg,
.security-card svg,
.preferences-card svg {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    stroke-width: 2;
}

/* 设置标题图标 - 齿轮旋转动画 */
.settings-header .title-icon svg {
    animation: gearSpin 3s linear infinite;
    filter: drop-shadow(0 2px 6px rgba(139, 92, 246, 0.2));
}

.settings-header:hover .title-icon svg {
    animation: gearSpinFast 0.8s ease-in-out;
    filter: drop-shadow(0 4px 12px rgba(139, 92, 246, 0.5));
    stroke-width: 2.5;
}

/* 用户信息图标 - 独特动画 */
/* 用户图标 - 点头动画 */
.settings-card .info-item:nth-child(1) .info-icon svg {
    animation: userNod 4s ease-in-out infinite;
}

.settings-card .info-item:nth-child(1):hover .info-icon svg {
    animation: userNodFast 0.6s ease-in-out;
    filter: drop-shadow(0 4px 8px rgba(139, 92, 246, 0.4));
    stroke-width: 2.5;
}

/* 邮件图标 - 信封弹跳动画 */
.settings-card .info-item:nth-child(2) .info-icon svg {
    animation: envelopeFloat 3s ease-in-out infinite;
}

.settings-card .info-item:nth-child(2):hover .info-icon svg {
    animation: envelopeBounce 0.8s ease-in-out;
    filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.4));
    stroke-width: 2.5;
}

/* 日历图标 - 翻页动画 */
.settings-card .info-item:nth-child(3) .info-icon svg {
    animation: calendarFlip 5s ease-in-out infinite;
}

.settings-card .info-item:nth-child(3):hover .info-icon svg {
    animation: calendarFlipFast 0.6s ease-in-out;
    filter: drop-shadow(0 4px 8px rgba(16, 185, 129, 0.4));
    stroke-width: 2.5;
}

/* 编辑按钮图标 - 笔写动画 */
.settings-card .btn-primary .btn-icon svg {
    animation: penWrite 4s ease-in-out infinite;
}

.settings-card .btn-primary:hover .btn-icon svg {
    animation: penWriteFast 0.8s ease-in-out;
    filter: drop-shadow(0 4px 8px rgba(34, 197, 94, 0.4));
    stroke-width: 2.5;
}

/* 安全图标 - 锁保护动画 */
.security-card .header-icon svg {
    animation: lockProtect 3s ease-in-out infinite;
}

.security-card:hover .header-icon svg {
    animation: lockProtectFast 0.6s ease-in-out;
    filter: drop-shadow(0 4px 8px rgba(239, 68, 68, 0.4));
    stroke-width: 2.5;
}

/* 密码图标 - 钥匙旋转动画 */
.security-card .security-item:nth-child(1) .security-icon svg {
    animation: keyRotate 4s ease-in-out infinite;
}

.security-card .security-item:nth-child(1):hover .security-icon svg {
    animation: keyRotateFast 0.8s ease-in-out;
    filter: drop-shadow(0 4px 8px rgba(245, 158, 11, 0.4));
    stroke-width: 2.5;
}

/* 验证图标 - 勾选动画 */
.security-card .security-item:nth-child(2) .security-icon svg {
    animation: checkPulse 3s ease-in-out infinite;
}

.security-card .security-item:nth-child(2):hover .security-icon svg {
    animation: checkPulseFast 0.6s ease-in-out;
    filter: drop-shadow(0 4px 8px rgba(34, 197, 94, 0.4));
    stroke-width: 2.5;
}

/* 双因素认证图标 - 设备闪烁动画 */
.security-card .security-item:nth-child(3) .security-icon svg {
    animation: deviceBlink 4s ease-in-out infinite;
}

.security-card .security-item:nth-child(3):hover .security-icon svg {
    animation: deviceBlinkFast 0.8s ease-in-out;
    filter: drop-shadow(0 4px 8px rgba(99, 102, 241, 0.4));
    stroke-width: 2.5;
}

/* 应用设置图标 - 齿轮脉冲动画 */
.preferences-card .header-icon svg {
    animation: gearPulse 3s ease-in-out infinite;
}

.preferences-card:hover .header-icon svg {
    animation: gearPulseFast 0.6s ease-in-out;
    filter: drop-shadow(0 4px 8px rgba(139, 92, 246, 0.4));
    stroke-width: 2.5;
}

/* 邮件通知图标 - 邮件飞行动画 */
.preferences-card .preference-item:nth-child(1) .preference-icon svg {
    animation: emailFly 4s ease-in-out infinite;
}

.preferences-card .preference-item:nth-child(1):hover .preference-icon svg {
    animation: emailFlyFast 0.8s ease-in-out;
    filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.4));
    stroke-width: 2.5;
}

/* 推送通知图标 - 铃铛摇晃动画 */
.preferences-card .preference-item:nth-child(2) .preference-icon svg {
    animation: bellRing 3s ease-in-out infinite;
}

.preferences-card .preference-item:nth-child(2):hover .preference-icon svg {
    animation: bellRingFast 0.6s ease-in-out;
    filter: drop-shadow(0 4px 8px rgba(239, 68, 68, 0.4));
    stroke-width: 2.5;
}

/* 头像图标 - 呼吸动画 */
.settings-card .profile-avatar {
    animation: avatarBreathe 4s ease-in-out infinite;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-card:hover .profile-avatar {
    animation: avatarBreatheFast 0.8s ease-in-out;
    filter: drop-shadow(0 4px 8px rgba(139, 92, 246, 0.4));
    transform: scale(1.05);
}

/* 状态徽章图标 - 星星闪烁动画 */
.settings-card .badge-icon svg {
    animation: starTwinkle 2s ease-in-out infinite;
}

.settings-card:hover .badge-icon svg {
    animation: starTwinkleFast 0.6s ease-in-out;
    filter: drop-shadow(0 4px 8px rgba(34, 197, 94, 0.5));
    stroke-width: 2.5;
}

/* 按钮图标动画 */
.settings-card .btn-secondary .btn-icon svg,
.settings-card .btn-outline .btn-icon svg {
    animation: buttonGlow 3s ease-in-out infinite;
}

.settings-card .btn-secondary:hover .btn-icon svg,
.settings-card .btn-outline:hover .btn-icon svg {
    animation: buttonGlowFast 0.6s ease-in-out;
    filter: drop-shadow(0 4px 8px rgba(99, 102, 241, 0.4));
    stroke-width: 2.5;
}

/* 动画关键帧定义 */

/* 齿轮旋转动画 */
@keyframes gearSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes gearSpinFast {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

/* 用户点头动画 */
@keyframes userNod {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-1px) rotate(-1deg); }
    75% { transform: translateY(-1px) rotate(1deg); }
}

@keyframes userNodFast {
    0% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-3px) rotate(-2deg); }
    50% { transform: translateY(-5px) rotate(0deg); }
    75% { transform: translateY(-3px) rotate(2deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* 信封浮动动画 */
@keyframes envelopeFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.02); }
}

@keyframes envelopeBounce {
    0% { transform: translateY(0) scale(1); }
    25% { transform: translateY(-4px) scale(1.1); }
    50% { transform: translateY(-8px) scale(1.2); }
    75% { transform: translateY(-4px) scale(1.1); }
    100% { transform: translateY(0) scale(1); }
}

/* 日历翻页动画 */
@keyframes calendarFlip {
    0%, 100% { transform: rotateX(0deg); }
    50% { transform: rotateX(5deg); }
}

@keyframes calendarFlipFast {
    0% { transform: rotateX(0deg) scale(1); }
    50% { transform: rotateX(15deg) scale(1.1); }
    100% { transform: rotateX(0deg) scale(1); }
}

/* 笔写动画 */
@keyframes penWrite {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(5deg) scale(1.05); }
}

@keyframes penWriteFast {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(15deg) scale(1.2); }
    100% { transform: rotate(0deg) scale(1); }
}

/* 锁保护动画 */
@keyframes lockProtect {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes lockProtectFast {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* 钥匙旋转动画 */
@keyframes keyRotate {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(10deg); }
}

@keyframes keyRotateFast {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

/* 勾选脉冲动画 */
@keyframes checkPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

@keyframes checkPulseFast {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* 设备闪烁动画 */
@keyframes deviceBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes deviceBlinkFast {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}

/* 齿轮脉冲动画 */
@keyframes gearPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes gearPulseFast {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* 邮件飞行动画 */
@keyframes emailFly {
    0%, 100% { transform: translateX(0) scale(1); }
    50% { transform: translateX(2px) scale(1.02); }
}

@keyframes emailFlyFast {
    0% { transform: translateX(0) scale(1); }
    25% { transform: translateX(-3px) scale(1.1); }
    50% { transform: translateX(-6px) scale(1.2); }
    75% { transform: translateX(-3px) scale(1.1); }
    100% { transform: translateX(0) scale(1); }
}

/* 铃铛摇晃动画 */
@keyframes bellRing {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    75% { transform: rotate(-2deg); }
}

@keyframes bellRingFast {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(5deg) scale(1.1); }
    50% { transform: rotate(0deg) scale(1.2); }
    75% { transform: rotate(-5deg) scale(1.1); }
    100% { transform: rotate(0deg) scale(1); }
}

/* 头像呼吸动画 */
@keyframes avatarBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@keyframes avatarBreatheFast {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* 星星闪烁动画 */
@keyframes starTwinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

@keyframes starTwinkleFast {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
    100% { opacity: 1; transform: scale(1); }
}

/* 按钮发光动画 */
@keyframes buttonGlow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(99, 102, 241, 0.3)); }
    50% { filter: drop-shadow(0 0 6px rgba(99, 102, 241, 0.6)); }
}

@keyframes buttonGlowFast {
    0% { filter: drop-shadow(0 0 2px rgba(99, 102, 241, 0.3)); }
    50% { filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.8)); }
    100% { filter: drop-shadow(0 0 2px rgba(99, 102, 241, 0.3)); }
}

/* 深色模式下的增强效果 */
.dark-mode .settings-card svg,
.dark-mode .settings-header svg,
.dark-mode .security-card svg,
.dark-mode .preferences-card svg {
    filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.1));
}

.dark-mode .settings-card:hover svg,
.dark-mode .settings-header:hover svg,
.dark-mode .security-card:hover svg,
.dark-mode .preferences-card:hover svg {
    filter: drop-shadow(0 4px 8px rgba(139, 92, 246, 0.6));
}

/* 危险区域图标保持静态（不添加动画） */
.danger-zone svg {
    animation: none !important;
    transition: all 0.3s ease;
}

.danger-zone:hover svg {
    filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.3));
}

/* Modern AppBar Navigation Styles */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.dark-mode .app-header {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(20px);
    border-bottom-color: var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.app-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    max-width: 1400px;
    margin: 0 auto;
    height: 70px;
    gap: 2rem;
}

/* Brand/Logo Section */
.nav-brand {
    flex-shrink: 0;
}

.brand-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.3s ease;
}

.brand-link:hover {
    transform: translateY(-1px);
}

.brand-icon {
    font-size: 1.8rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.brand-text {
    font-size: 1.4rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Desktop Navigation Links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
    justify-content: center;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-accent);
    transition: left 0.3s ease;
    z-index: -1;
    border-radius: 12px;
}

.nav-link:hover::before {
    left: 0;
}

.nav-link:hover {
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.nav-icon {
    font-size: 1.1rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.nav-text {
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Admin Dropdown */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.nav-dropdown-toggle::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-accent);
    transition: left 0.3s ease;
    z-index: -1;
    border-radius: 12px;
}

.nav-dropdown-toggle:hover::before {
    left: 0;
}

.nav-dropdown-toggle:hover {
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.dropdown-arrow {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.nav-dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 0.5rem;
    margin-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 100;
    min-width: 200px;
}

.nav-dropdown.active .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--text-color);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-color);
    transform: translateX(4px);
}

/* Override for user dropdown items to remove conflicting styles */
.user-dropdown-menu .dropdown-item:hover {
    background: transparent !important;
    transform: none !important;
}

.dropdown-icon {
    font-size: 1rem;
}

/* Right Section */
.nav-right {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-shrink: 0;
    justify-content: flex-end;
}

/* User Section */
.user-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-right: 15px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.user-info:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
    transform: translateY(-1px);
}

.username {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.9rem;
}

/* Role Chips */
.role-chip {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.role-admin {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.role-lead_consultant {
    background: linear-gradient(135deg, #ea580c, #c2410c);
}

.role-consultant {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.role-researcher {
    background: linear-gradient(135deg, #059669, #047857);
}

/* Logout Button */
.logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    color: #ef4444;
    text-decoration: none;
    transition: all 0.3s ease;
}

.logout-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.logout-icon {
    font-size: 1.1rem;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle:hover {
    background: rgba(59, 130, 246, 0.1);
}

.hamburger-line {
    width: 24px;
    height: 2px;
    background: var(--text-color);
    border-radius: 1px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Drawer */
.mobile-drawer {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
    overflow-y: auto;
}

.mobile-drawer.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
    background: rgba(59, 130, 246, 0.02);
}

.drawer-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
}

.drawer-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-color);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.drawer-close:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-color);
}

.drawer-content {
    padding: 1rem 0;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 2rem;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    text-decoration: none;
    color: var(--text-color);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.mobile-nav-link:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-color);
    transform: translateX(8px);
}

.mobile-nav-icon {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

/* Mobile Admin Section */
.mobile-admin-section {
    margin: 1rem 0;
    padding: 1rem 1.5rem;
    background: rgba(59, 130, 246, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(59, 130, 246, 0.1);
}

.mobile-admin-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

.mobile-admin-icon {
    font-size: 1.2rem;
}

.mobile-admin-title {
    font-weight: 600;
    color: var(--text-color);
    font-size: 1rem;
}

.mobile-admin-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--text-color);
    border-radius: 8px;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
}

.mobile-admin-link:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--primary-color);
    transform: translateX(4px);
}

.mobile-admin-link-icon {
    font-size: 1rem;
    width: 20px;
    text-align: center;
}

/* Mobile User Info */
.mobile-user-info {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(59, 130, 246, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(59, 130, 246, 0.1);
}

.mobile-user-details {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mobile-username {
    font-weight: 600;
    color: var(--text-color);
    font-size: 1rem;
}

.mobile-role-chip {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
}

.mobile-logout-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    color: #ef4444;
    text-decoration: none;
    transition: all 0.2s ease;
    width: 100%;
    justify-content: center;
}

.mobile-logout-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.3);
}

.mobile-logout-icon {
    font-size: 1.1rem;
}

/* Main Content Spacing */
.main-content {
    margin-top: 70px;
    min-height: calc(100vh - 70px);
    padding-top: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .nav-links {
        gap: 1rem;
    }
    
    .nav-link {
        padding: 0.6rem 0.8rem;
    }
    
    .nav-text {
        font-size: 0.85rem;
    }
}

@media (max-width: 768px) {
    .app-nav {
        padding: 0 1rem;
        height: 60px;
    }
    
    .brand-text {
        font-size: 1.2rem;
    }
    
    .nav-links {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .main-content {
        margin-top: 60px;
        min-height: calc(100vh - 60px);
    }
    
    .mobile-drawer {
        top: 60px;
    }
}

@media (max-width: 480px) {
    .app-nav {
        padding: 0 0.75rem;
        gap: 1rem;
    }
    
    .brand-text {
        display: none;
    }
    
    .user-info {
        padding: 0.4rem 0.8rem;
    }
    
    .username {
        font-size: 0.85rem;
    }
    
    .role-chip {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }
    
    .drawer-header {
        padding: 1rem 1.5rem;
    }
    
    .mobile-nav-links {
        padding: 0 1.5rem;
    }
    
    .mobile-user-info {
        margin: 1rem 1.5rem;
    }
}

/* Utility Classes */
.desktop-only {
    display: flex;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }
}

/* Dark Mode Enhancements */
.dark-mode .nav-dropdown-menu {
    background: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.dark-mode .mobile-drawer {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.dark-mode .mobile-admin-section {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.2);
}

.dark-mode .mobile-user-info {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.2);
}

/* Focus States for Accessibility */
.nav-link:focus,
.nav-dropdown-toggle:focus,
.dropdown-item:focus,
.mobile-nav-link:focus,
.mobile-admin-link:focus,
.mobile-logout-btn:focus,
.drawer-close:focus,
.mobile-menu-toggle:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Smooth Scrolling for Mobile Drawer */
.mobile-drawer {
    scroll-behavior: smooth;
}

/* Animation for Role Chips */
.role-chip {
    animation: chipPulse 2s ease-in-out infinite;
}

@keyframes chipPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Hover Effects for Brand */
.brand-link:hover .brand-icon {
    transform: rotate(5deg);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.brand-icon {
    transition: all 0.3s ease;
}

/* Enhanced Dropdown Animation */
.nav-dropdown-menu {
    transform-origin: top center;
}

.nav-dropdown.active .nav-dropdown-menu {
    animation: dropdownSlide 0.3s ease-out;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

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

/* New Navbar Styles for Combined User Dropdown */
.user-dropdown-toggle {
    background: transparent;
    border: none;
    padding: 8px 16px 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    color: inherit;
    font-family: inherit;
    position: relative;
}

.user-dropdown-toggle:hover {
    transform: translateY(-1px);
}

.user-dropdown-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
}

.user-dropdown-menu {
    min-width: 220px;
    padding: 8px 0;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.95);
    position: absolute;
    top: calc(100% - 2px);
    right: 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    margin-top: -2px;
}

.user-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
    background: transparent;
}

.dark-mode .user-dropdown-menu {
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dropdown-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    margin: 8px 16px;
}

.dark-mode .dropdown-divider {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.dropdown-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dark-mode .dropdown-section-header {
    color: #9ca3af;
}

.logout-item {
    color: #dc2626 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: 8px;
    padding-top: 12px;
}

.dark-mode .logout-item {
    color: #f87171 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.logout-item:hover {
    background: rgba(220, 38, 38, 0.1) !important;
}

.dark-mode .logout-item:hover {
    background: rgba(248, 113, 113, 0.1) !important;
}

/* Theme Switch Container with proper spacing */
.theme-switch-container {
    margin-left: 4rem;
    padding: 8px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

.dark-mode .theme-switch-container {
    margin-left: 4.5rem;
}

/* Enhanced dropdown animations */
.user-dropdown-menu .dropdown-item {
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.user-dropdown-menu .dropdown-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent);
    transition: left 0.4s ease;
    z-index: 1;
}

.user-dropdown-menu .dropdown-item:hover::before {
    left: 100%;
}

/* Responsive adjustments for the new navbar */
@media (max-width: 768px) {
    .user-dropdown-toggle {
        padding: 6px 12px;
    }
    
    .user-dropdown-menu {
        min-width: 200px;
    }
    
    .theme-switch-container {
        margin-left: 2.5rem;
        padding: 5px;
    }
    
    .user-section {
        margin-right: 10px;
    }
}

@media (max-width: 480px) {
    .user-dropdown-toggle {
        padding: 4px 8px;
    }
    
    .user-dropdown-menu {
        min-width: 180px;
    }
    
    .theme-switch-container {
        margin-left: 2rem;
        padding: 3px;
    }
    
    .user-section {
        margin-right: 8px;
    }
}

/* Enhanced Table Styling for Admin Users */
.card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.card-header {
    background: linear-gradient(135deg, #3b82f6 0%, #9333ea 100%);
    color: white;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.card-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.card-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.card-body {
    padding: 2rem;
    overflow-x: auto;
}

/* Improved Table Styling */
#users-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 1rem;
}

#users-table thead th {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #475569;
    font-weight: 600;
    padding: 1rem 0.75rem;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#users-table tbody td {
    padding: 1rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    font-size: 0.875rem;
}

#users-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.02);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.btn-edit {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    min-width: 80px;
    justify-content: center;
}

.btn-edit:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-edit .btn-icon {
    font-size: 0.875rem;
}

.btn-edit .btn-text {
    font-size: 0.75rem;
}

.btn-delete {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    min-width: 80px;
    justify-content: center;
}

.btn-delete:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* DataTables Customization */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    margin: 1rem 0;
    color: var(--text-muted);
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-color);
    margin-left: 0.5rem;
}

.dataTables_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin: 0 0.25rem;
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    font-weight: 600;
}

/* Dark mode styles */
.dark-mode .card {
    background: rgba(51, 65, 85, 0.95);
    border-color: var(--border-color);
}

.dark-mode #users-table thead th {
    background: linear-gradient(135deg, #334155 0%, #475569 100%);
    color: #e2e8f0;
    border-bottom-color: #475569;
}

.dark-mode #users-table tbody td {
    border-bottom-color: #334155;
    color: #e2e8f0;
}

.dark-mode #users-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.1);
}

.dark-mode .dataTables_wrapper .dataTables_filter input,
.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: rgba(51, 65, 85, 0.8);
    border-color: var(--border-color);
    color: var(--text-color);
}

.dark-mode .dataTables_wrapper .dataTables_filter input:focus {
    background: rgba(51, 65, 85, 0.95);
}

/* Responsive table */
@media (max-width: 768px) {
    .card-header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    #users-table {
        font-size: 0.8rem;
    }
    
    #users-table thead th,
    #users-table tbody td {
        padding: 0.75rem 0.5rem;
    }
}

/* Add Candidate Page Styles */
.add-candidate-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(15px);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-size: 1rem;
    background: var(--bg-primary);
    color: var(--text-color);
    transition: border-color 0.2s;
    resize: vertical;
    min-height: 100px;
}

.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(32, 201, 151, 0.1);
}

.form-group select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-size: 1rem;
    background: var(--bg-primary);
    color: var(--text-color);
    transition: border-color 0.2s;
    cursor: pointer;
}

.form-group select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(32, 201, 151, 0.1);
}

.upload-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(15px);
    margin-top: 2rem;
}

.alert {
    padding: 1rem;
    border-radius: 6px;
    margin-top: 1rem;
    border: 1px solid;
}

.alert-success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: #16a34a;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #dc2626;
}

/* Dark mode styles for add candidate page */
.dark-mode .add-candidate-card,
.dark-mode .upload-card {
    background: rgba(51, 65, 85, 0.95);
    border-color: var(--border-color);
}

.dark-mode .form-group input,
.dark-mode .form-group textarea,
.dark-mode .form-group select {
    background: rgba(51, 65, 85, 0.8);
    border-color: var(--border-color);
    color: var(--text-color);
}

.dark-mode .form-group input:focus,
.dark-mode .form-group textarea:focus,
.dark-mode .form-group select:focus {
    background: rgba(51, 65, 85, 0.95);
}

/* Responsive design for add candidate page */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .add-candidate-card,
    .upload-card {
        padding: 1.5rem;
    }
    
    .form-actions {
        flex-direction: column;
        gap: 1rem;
    }
    
    .form-actions .btn {
        width: 100%;
        text-align: center;
    }
}






/* SVG Icon Theme Support */
svg {
    color: inherit;
}

.nav__brand-icon svg,
.header-icon svg,
.card-icon svg,
.btn-icon svg,
.alert-icon svg,
.empty-icon svg,
.preference-icon svg,
.security-icon svg,
.label-icon svg,
.role-icon svg,
.danger-icon svg {
    color: currentColor;
}

/* Light mode icon colors */
.nav__brand-icon svg {
    color: #3b82f6;
}

.header-icon svg {
    color: #ffffff;
}

.alert-icon svg {
    color: inherit;
}

.btn-icon svg {
    color: inherit;
}

/* Dark mode icon colors */
.dark-mode .nav__brand-icon svg {
    color: #60a5fa;
}

.dark-mode .header-icon svg {
    color: #ffffff;
}

/* Empty state icons */
.empty-icon svg {
    color: #9ca3af;
    opacity: 0.8;
}

.dark-mode .empty-icon svg {
    color: #6b7280;
    opacity: 0.8;
}

/* Enhanced pseudo-element icon support */
.dark-mode .detail-section h3::before,
.dark-mode .form-section h3::before {
    filter: brightness(1.5) hue-rotate(15deg);
}

/* ===== REDESIGNED CLEAN NAVIGATION STYLES ===== */

/* Basic layout */
.nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg, #ffffff);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.dark-mode .nav {
    background: var(--bg, #1f2937);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.nav__inner {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    height: 100px;
    max-width: 1600px;
    margin: 0 auto;
    justify-content: space-between;
}

.nav__center {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.nav__right {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-shrink: 0;
}

.dark-mode .nav__right {
    gap: 2.5rem;
}

.nav__right--login {
    margin-left: auto;
}

/* Brand styling with gradient text */
.nav__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #3b82f6, #1e40af, #7c3aed, #3b82f6, #1e40af);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: fit-content;
    padding: 0.25rem 0;
}

.dark-mode .nav__brand {
    background: linear-gradient(135deg, #60a5fa, #3b82f6, #a78bfa, #60a5fa, #3b82f6);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav__brand:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
}

.dark-mode .nav__brand:hover {
    filter: brightness(1.2);
}

.nav__brand-icon {
    height: 56px;
    width: auto;
    object-fit: contain;
    transition: all 0.3s ease;
}

.dark-mode .nav__brand-icon {
    /* Keep original colors in dark mode */
}

.nav__brand-text {
    background: inherit;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: inherit;
    position: relative;
    animation: shine-brand 3s infinite linear;
    animation-fill-mode: forwards;
}

@keyframes shine-brand {
    0% {
        background-position: 0;
    }
    60% {
        background-position: 200px;
    }
    100% {
        background-position: 200px;
    }
}

@-webkit-keyframes shine-brand {
    0% {
        background-position: 0;
    }
    60% {
        background-position: 200px;
    }
    100% {
        background-position: 200px;
    }
}

/* Menu styling */
.nav__menu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

.nav__item {
    position: relative;
}

/* Enhanced nav links with better visibility */
.nav__link {
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 0 1.25rem;
    border-radius: 8px;
    text-decoration: none;
    color: #374151;
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    min-height: 48px;
}

.dark-mode .nav__link {
    color: #f9fafb;
}

.nav__link:hover {
    background: var(--surface-hover, #f3f4f6);
    color: #1f2937;
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.dark-mode .nav__link:hover {
    background: var(--surface-hover, #374151);
    color: #f9fafb;
    border-color: #60a5fa;
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3);
}

.nav__link:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
}

/* User dropdown styling */
.nav__user-dropdown {
    position: relative;
}

.nav__user-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 48px;
}

.nav__user-btn:hover,
.nav__user-btn[aria-expanded="true"] {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.dark-mode .nav__user-btn {
    background: #1e40af;
}

.dark-mode .nav__user-btn:hover,
.dark-mode .nav__user-btn[aria-expanded="true"] {
    background: #1e3a8a;
    box-shadow: 0 8px 25px rgba(30, 64, 175, 0.5);
}

.nav__username {
    font-size: 1rem;
    font-weight: 600;
}

.nav__role {
    font-size: 0.75rem;
    opacity: 1;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
    font-weight: 600;
}

.nav__dropdown-arrow {
    font-size: 0.875rem;
    transition: transform 0.3s ease;
}

.nav__user-btn[aria-expanded="true"] .nav__dropdown-arrow {
    transform: rotate(180deg);
}

/* User popover */
.nav__user-popover {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 200px;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 0.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 1001;
}

.dark-mode .nav__user-popover {
    background: var(--surface, #374151);
    border-color: var(--border-color, #4b5563);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.nav__user-popover[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.nav__user-popover--animating {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav__popover-link {
    display: block;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    color: var(--text-primary, #1f2937);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateY(-5px);
    animation: slideInItem 0.3s ease forwards;
}

.dark-mode .nav__popover-link {
    color: var(--text-primary, #f9fafb);
}

.nav__popover-link:hover,
.nav__popover-link:focus-visible {
    background: var(--surface-hover, #f3f4f6);
    color: #3b82f6;
    outline: none;
}

.dark-mode .nav__popover-link:hover,
.dark-mode .nav__popover-link:focus-visible {
    background: var(--surface-hover, #4b5563);
    color: #60a5fa;
}

.nav__popover-link:nth-child(1) { animation-delay: 0.05s; }
.nav__popover-link:nth-child(2) { animation-delay: 0.1s; }
.nav__popover-link:nth-child(3) { animation-delay: 0.15s; }

@keyframes slideInItem {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Login button for non-authenticated users */
.nav__login-btn {
    display: none;
    align-items: center;
    padding: 0.5rem 1.5rem;
    background: #3b82f6;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    min-height: 48px;
}

.nav__login-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.dark-mode .nav__login-btn {
    background: #1e40af;
}

.dark-mode .nav__login-btn:hover {
    background: #1e3a8a;
    box-shadow: 0 8px 25px rgba(30, 64, 175, 0.5);
}

/* Mobile hamburger */
.nav__toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    margin-left: auto;
    border-radius: 6px;
    transition: all 0.3s ease;
    width: 48px;
    height: 48px;
    justify-content: center;
    align-items: center;
}

.nav__toggle:hover {
    background: var(--surface-hover, #f3f4f6);
}

.dark-mode .nav__toggle:hover {
    background: var(--surface-hover, #374151);
}

.nav__toggle-line {
    width: 24px;
    height: 3px;
    background: var(--text-primary, #1f2937);
    margin: 2px 0;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.dark-mode .nav__toggle-line {
    background: var(--text-primary, #f9fafb);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(2) {
    transform: rotate(45deg) translate(7px, 7px);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(3) {
    opacity: 0;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(4) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Override main content spacing for new navbar */
.main-content {
    margin-top: 0px !important;
    min-height: calc(100vh - 60px) !important;
}

/* Responsive styles */
@media (max-width: 768px) {
    .nav__toggle {
        display: flex;
    }

    .nav__center {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg, #ffffff);
        padding: 1rem;
        display: none;
        flex-direction: column;
        margin: 0;
    }

    .dark-mode .nav__center {
        background: var(--bg, #1f2937);
    }

    .nav__center[data-open="true"] {
        display: flex;
    }

    .nav__menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        width: 100%;
    }

    .nav__item {
        width: 100%;
    }

    .nav__link {
        width: 100%;
        justify-content: flex-start;
        padding: 1rem;
    }

    .nav__right {
        position: absolute;
        top: calc(100% + 1rem);
        right: 1rem;
        flex-direction: column;
        gap: 1rem;
        background: var(--bg, #ffffff);
        padding: 1rem;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        margin: 0 1rem;
        order: 2;
    }

    .dark-mode .nav__right {
        background: var(--bg, #1f2937);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    .nav__user-dropdown {
        order: 1;
    }

    .nav__user-btn {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    .nav__user-popover {
        position: static;
        box-shadow: none;
        border: none;
        padding: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        background: transparent;
        margin-top: 0.5rem;
    }

    .nav__brand {
        font-size: 1.1rem;
        padding: 0.25rem 0;
    }

    .nav__brand-text {
        display: block;
        margin-top: 0.125rem;
    }
}

@media (max-width: 480px) {
    .nav__brand {
        font-size: 1rem;
        padding: 0.25rem 0;
    }

    .nav__brand-icon {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 360px) {
    .nav__brand {
        font-size: 0.9rem;
        line-height: 1.1;
    }
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
    .nav *,
    .nav__user-popover,
    .nav__popover-link {
        transition: none !important;
        animation: none !important;
    }
}

/* =============================================================================
   SEARCH AND FILTER COMPONENTS
   ============================================================================= */

.search-filter-container {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 2rem;
}

.search-section {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    position: relative;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
}

.search-input {
    width: 100%;
    padding: 1rem 3rem 1rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background: rgba(255, 255, 255, 0.95);
}

.search-input:focus + .search-icon {
    color: var(--accent-color);
}

.search-input:not(:placeholder-shown) {
    border-color: var(--accent-color);
    background: rgba(255, 255, 255, 0.98);
}

.search-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    pointer-events: none;
}

.search-loading {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.search-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top: 2px solid var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.search-status {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    min-height: 1.25rem;
    width: 100%;
}

.clear-filters-btn {
    white-space: nowrap;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    flex-shrink: 0;
    align-self: center;
    margin-top: 0;
}

.filter-section {
    display: flex;
    gap: 2rem;
    align-items: end;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 150px;
}

.filter-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-select {
    padding: 0.5rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.filter-select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background: rgba(255, 255, 255, 0.95);
}

.results-info {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    border-left: 4px solid var(--accent-color);
}

.view-only-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-weight: 500;
    margin-left: 1rem;
}

.view-only-notice svg {
    color: var(--primary);
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

/* Loading states */
.loading-state, 
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.loading-spinner, 
.empty-icon {
    margin-bottom: 1rem;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top: 3px solid var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.empty-icon svg {
    width: 48px;
    height: 48px;
    color: var(--text-tertiary);
}

/* Dark mode support for search and filter */
.dark-mode .search-filter-container {
    background: rgba(51, 65, 85, 0.9);
    border-color: var(--border-color);
}

.dark-mode .search-input,
.dark-mode .filter-select {
    background: rgba(51, 65, 85, 0.8);
    border-color: var(--border-color);
    color: var(--text-color);
}

.dark-mode .search-input:focus,
.dark-mode .filter-select:focus {
    background: rgba(51, 65, 85, 0.95);
}

/* Responsive design for search and filter */
@media (max-width: 768px) {
    .search-filter-container {
        padding: 1.5rem;
    }
    
    .search-section {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .search-input-wrapper {
        flex: none;
    }
    
    .filter-section {
        gap: 1rem;
    }
    
    .filter-group {
        min-width: 120px;
    }
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ============= ENHANCED SCROLLABLE NAVIGATION ============= */

/* Scrollable navigation overlay for existing nav structure */
.scrollable-nav {
    position: relative;
    height: 100%;
    overflow: hidden;
    flex: 1;
    justify-content: center;
}

.scrollable-nav .nav-track {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    will-change: transform;
}

/* Enhanced nav items with original styling + scrollable effects */
.scrollable-nav .nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    min-width: 120px;
    padding: 0.5rem 1.25rem;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transform-origin: center center;
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    margin: 0 2px;
}

/* Original hover effects preserved */
.scrollable-nav .nav__link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--gradient-accent);
    transition: left 0.3s ease;
    z-index: -1;
    border-radius: 12px;
}

.scrollable-nav .nav__link:hover::before {
    left: 0;
}

.scrollable-nav .nav__link:hover {
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Active state styling */
.scrollable-nav .nav__link.active {
    color: white;
    background: var(--gradient-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.scrollable-nav .nav__text {
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Edge hover zones for scrolling */
.scrollable-nav .edge {
    position: absolute;
    top: 0;
    width: 56px;
    height: 100%;
    z-index: 2;
    pointer-events: auto;
}

.scrollable-nav .edge.left {
    left: 0;
    background: linear-gradient(90deg, var(--card-bg, rgba(255, 255, 255, 0.95)), rgba(255, 255, 255, 0));
}

.scrollable-nav .edge.right {
    right: 0;
    background: linear-gradient(270deg, var(--card-bg, rgba(255, 255, 255, 0.95)), rgba(255, 255, 255, 0));
}

/* Dark mode edge gradients */
.dark-mode .scrollable-nav .edge.left {
    background: linear-gradient(90deg, var(--card-bg, rgba(30, 41, 59, 0.95)), rgba(30, 41, 59, 0));
}

.dark-mode .scrollable-nav .edge.right {
    background: linear-gradient(270deg, var(--card-bg, rgba(30, 41, 59, 0.95)), rgba(30, 41, 59, 0));
}

/* Enhanced user info styling to match original */
.nav__user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.nav__user-info:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
    transform: translateY(-1px);
}

.nav__username {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.9rem;
}

/* Enhanced role chips matching original design */
.nav__role {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav__role.role-admin {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}

.nav__role.role-lead_consultant {
    background: linear-gradient(135deg, #ea580c, #c2410c);
}

.nav__role.role-consultant {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.nav__role.role-researcher {
    background: linear-gradient(135deg, #059669, #047857);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .scrollable-nav .nav__link {
        min-width: 100px;
        height: 38px;
        padding: 0.4rem 1rem;
    }
    
    .scrollable-nav .nav__text {
        font-size: 0.9rem;
        font-weight: 600;
    }
    
    .nav__username {
        font-size: 0.85rem;
    }
    
    .nav__role {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }
}

@media (max-width: 480px) {
    .scrollable-nav .nav__link {
        min-width: 80px;
        height: 36px;
        padding: 0.3rem 0.8rem;
    }
    
    .scrollable-nav .nav__text {
        font-size: 0.85rem;
    }
}

@media (max-width: 520px) {
    .nav__brand-text {
        display: none;
    }
    
    .nav__username {
        display: none;
    }
    
    .nav__role {
        font-size: 0.6rem;
        padding: 1px 4px;
    }
}

/* New Modern Spinner */
.spinner {
    background-image: linear-gradient(rgb(186, 66, 255) 35%, rgb(0, 225, 255));
    width: 100px;
    height: 100px;
    animation: spinning82341 1.7s linear infinite;
    text-align: center;
    border-radius: 50px;
    filter: blur(1px);
    box-shadow: 0px -5px 20px 0px rgb(186, 66, 255), 0px 5px 20px 0px rgb(0, 225, 255);
}

.spinner1 {
    background-color: rgb(36, 36, 36);
    width: 100px;
    height: 100px;
    border-radius: 50px;
    filter: blur(10px);
}

@keyframes spinning82341 {
    to {
        transform: rotate(360deg);
    }
}

/* Small spinner variants */
.spinner-small {
    background-image: linear-gradient(rgb(186, 66, 255) 35%, rgb(0, 225, 255));
    width: 20px;
    height: 20px;
    animation: spinning82341 1.7s linear infinite;
    text-align: center;
    border-radius: 10px;
    filter: blur(0.5px);
    box-shadow: 0px -2px 8px 0px rgb(186, 66, 255), 0px 2px 8px 0px rgb(0, 225, 255);
}

.spinner-medium {
    background-image: linear-gradient(rgb(186, 66, 255) 35%, rgb(0, 225, 255));
    width: 48px;
    height: 48px;
    animation: spinning82341 1.7s linear infinite;
    text-align: center;
    border-radius: 24px;
    filter: blur(0.8px);
    box-shadow: 0px -3px 12px 0px rgb(186, 66, 255), 0px 3px 12px 0px rgb(0, 225, 255);
}