* {margin:0;padding:0;box-sizing:border-box}:root{--primary-color:#2c3e50;--primary-hover:#34495e;--secondary-color:#3498db;--secondary-hover:#2980b9;--success-color:#27ae60;--warning-color:#f39c12;--danger-color:#e74c3c;--bg-primary:#ffffff;--bg-secondary:#f8f9fa;--bg-tertiary:#e9ecef;--text-primary:#212529;--text-secondary:#6c757d;--text-tertiary:#adb5bd;--border-color:#dee2e6;--border-light:#f1f3f5;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-xxl:48px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--shadow-sm:0 1px 3px rgba(0,0,0,0.08);--shadow-md:0 2px 6px rgba(0,0,0,0.1);--shadow-lg:0 4px 12px rgba(0,0,0,0.15);--transition:0.3s ease;--transition-fast:0.2s ease;--transition-normal:0.3s ease;--transition-slow:0.5s ease;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-7:1.75rem;--space-8:2rem}body{font-family:'Microsoft YaHei',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;background-color:var(--bg-secondary);color:var(--text-primary);line-height:1.6;font-size:14px;margin:0;padding:0}.container{width:100%;min-height:100vh;background-color:var(--bg-secondary);display:flex;flex-direction:column}.header{background-color:var(--bg-primary);color:var(--text-primary);padding:0 20px;height:60px;box-shadow:var(--shadow-sm);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:1000;display:flex;align-items:center}.header-content{width:100%;max-width:100%;margin:0;padding:0 20px;display:flex;justify-content:space-between;align-items:center}.header .logo{font-size:20px;font-weight:700;color:var(--primary-color);text-decoration:none;display:flex;align-items:center;gap:8px;transition:color var(--transition)}.header .logo:hover{color:var(--primary-hover)}.header .nav{flex:1;margin:0 20px;overflow-x:auto;white-space:nowrap}.header .nav>ul{list-style:none;display:flex;gap:10px;margin:0;padding:0}.header .nav>ul>li{position:relative}.header .nav>ul>li>a{display:block;padding:8px 12px;color:var(--text-primary);text-decoration:none;font-weight:500;font-size:13px;transition:all var(--transition);border-radius:var(--radius-sm);display:flex;align-items:center;gap:5px}.header .nav>ul>li>a:hover{background-color:var(--bg-secondary);color:var(--primary-color)}.header .nav .submenu{position:absolute;top:100%;left:0;background-color:var(--bg-primary);min-width:180px;display:none;box-shadow:var(--shadow-md);border:1px solid var(--border-color);border-radius:var(--radius-md);z-index:1000;margin-top:4px;padding:8px 0}.header .nav>ul>li:hover .submenu{display:block}.header .nav .submenu li a{display:block;padding:8px 16px;color:var(--text-primary);text-decoration:none;font-size:14px;transition:all 0.2s ease;display:flex;align-items:center;gap:8px}.header .nav .submenu li a:hover{background-color:var(--bg-tertiary);color:var(--primary-color)}.header-right{display:flex;align-items:center;gap:10px;flex-shrink:0}.notifications{position:relative}.notification-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background-color:transparent;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-md);transition:all 0.2s ease}.notification-btn:hover{background-color:var(--bg-tertiary);color:var(--primary-color)}.notification-btn svg{width:20px;height:20px}.user-info{display:flex;align-items:center;gap:10px}.user-greeting{font-size:13px;color:var(--text-secondary)}.user-actions{display:flex;align-items:center;gap:6px}.user-actions a{display:inline-flex;align-items:center;justify-content:center;padding:4px 8px;color:var(--text-primary);text-decoration:none;font-weight:500;font-size:12px;border:1px solid var(--border-primary);border-radius:var(--radius-sm);transition:all 0.2s ease;background-color:var(--bg-primary)}.user-actions a:hover{background-color:var(--bg-secondary);color:var(--primary-color);border-color:var(--primary-color)}.main-nav{background-color:var(--bg-primary);border-bottom:1px solid var(--border-color);box-shadow:0 2px 4px rgba(0,0,0,0.1)}.nav-content{width:100%;max-width:100%;margin:0;padding:0 20px}.main-nav{position:relative;z-index:1000}.main-nav ul{list-style:none;display:flex;gap:5px;margin:0;padding:0;justify-content:flex-end}.main-nav ul>li{position:relative}.main-nav ul>li>a{display:block;padding:8px 10px;color:var(--text-primary);text-decoration:none;font-weight:500;font-size:12px;transition:all var(--transition);border-radius:var(--radius-sm);display:flex;align-items:center;gap:4px}.main-nav ul>li>a:hover{background-color:var(--bg-secondary);color:var(--primary-color)}.main-nav .submenu{position:absolute;top:100%;left:0;background-color:var(--bg-primary);min-width:180px;display:none;box-shadow:var(--shadow-md);border:1px solid var(--border-color);border-radius:var(--radius-md);z-index:1000;margin-top:4px;padding:8px 0}.main-nav ul>li:hover .submenu{display:block}.main-nav .submenu li a{display:block;padding:8px 16px;color:var(--text-primary);text-decoration:none;font-size:14px;transition:all 0.2s ease;display:flex;align-items:center;gap:8px}.main-nav .submenu li a:hover{background-color:var(--bg-tertiary);color:var(--primary-color)}@media (max-width:1024px){.header{padding:12px 20px}.main-nav ul{gap:10px}.main-nav ul>li>a{padding:10px 14px;font-size:13px}}.main-content{width:100%;max-width:100%;margin:0;padding:0;background-color:var(--bg-secondary);border-radius:0;box-shadow:none;border:none;flex:1;min-height:calc(100vh - 60px)}.content{padding:20px;overflow-y:auto;background-color:var(--bg-primary)}.header .nav{display:block}.content-title{font-size:24px;color:var(--text-primary);margin-bottom:20px;font-weight:600;border-bottom:1px solid var(--border-light);padding-bottom:12px}h2{color:var(--text-primary);font-size:18px;margin-bottom:16px;font-weight:600}p{color:var(--text-secondary);margin-bottom:16px}.message{padding:12px 16px;margin-bottom:20px;border-radius:var(--radius-sm);border-left:4px solid transparent;background-color:var(--bg-primary);border:1px solid var(--border-color);transition:all var(--transition)}.message.success{background-color:#f0fff4;color:var(--success-color);border-left-color:var(--success-color);border-color:#bbf7d0}.message.error{background-color:#fef2f2;color:var(--danger-color);border-left-color:var(--danger-color);border-color:#fee2e2}.message.info{background-color:#ebf8ff;color:var(--secondary-color);border-left-color:var(--secondary-color);border-color:#bee3f8}.message.warning{background-color:#fffaf0;color:var(--warning-color);border-left-color:var(--warning-color);border-color:#ffeaa7}.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;border:1px solid transparent;border-radius:var(--radius-sm);background-color:var(--primary-color);color:white;text-decoration:none;cursor:pointer;gap:6px;font-weight:500;font-size:14px;transition:all var(--transition)}.btn:hover{background-color:var(--primary-hover)}.btn:active{transform:translateY(1px)}.btn-primary{background-color:var(--primary-color);border-color:var(--primary-color)}.btn-primary:hover{background-color:var(--primary-hover)}.btn-secondary{background-color:var(--bg-primary);color:var(--text-primary);border-color:var(--border-color)}.btn-secondary:hover{background-color:var(--bg-secondary)}.btn-success{background-color:var(--success-color);border-color:var(--success-color)}.btn-success:hover{background-color:#229954}.btn-danger{background-color:var(--danger-color);border-color:var(--danger-color)}.btn-danger:hover{background-color:#c0392b}.btn-info{background-color:var(--secondary-color);border-color:var(--secondary-color)}.btn-info:hover{background-color:var(--secondary-hover)}.btn-warning{background-color:var(--warning-color);border-color:var(--warning-color)}.btn-warning:hover{background-color:#e67e22}.btn-sm{padding:6px 12px;font-size:13px}.btn-lg{padding:10px 20px;font-size:15px}.form-group{margin-bottom:20px}.form-group label{display:block;font-weight:500;color:var(--text-primary);font-size:14px;margin-bottom:6px}.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:14px;font-family:inherit;transition:all var(--transition);background-color:var(--bg-primary);color:var(--text-primary)}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--secondary-color);box-shadow:0 0 0 2px rgba(52,152,219,0.2)}.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-tertiary);font-size:14px}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;margin-bottom:20px}.form-actions{display:flex;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border-light);justify-content:flex-end;flex-wrap:wrap}.form-input{width:100%;padding:10px 12px;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:14px;font-family:inherit;transition:all var(--transition);background-color:var(--bg-primary);color:var(--text-primary)}.form-input:focus{outline:none;border-color:var(--secondary-color);box-shadow:0 0 0 2px rgba(52,152,219,0.2)}table{width:100%;border-collapse:collapse;margin:20px 0;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);overflow:hidden}table th,table td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--border-light)}table th{background-color:var(--bg-secondary);font-weight:600;color:var(--text-primary);font-size:14px}table td{color:var(--text-primary);font-size:14px}table tr:last-child td{border-bottom:none}table tr:hover{background-color:var(--bg-secondary);transition:background-color var(--transition)}.table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:20px 0}.table-wrapper{position:relative;margin:var(--space-5) 0}.pagination{display:flex;justify-content:center;margin:var(--space-8) 0;gap:var(--space-2)}.pagination a{padding:var(--space-3) var(--space-4);margin:0;border:1px solid var(--gray-300);background-color:white;color:var(--gray-600);text-decoration:none;border-radius:var(--radius-md);font-size:0.875rem;font-weight:500;transition:all var(--transition-fast)}.pagination a:hover{background-color:var(--gray-100);color:var(--primary-color);border-color:var(--primary-color)}.pagination a.active{background-color:var(--primary-color);color:white;border-color:var(--primary-color);box-shadow:var(--shadow-sm)}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:#f0f0f0}.login-card{background-color:white;padding:30px;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,0.1);width:100%;max-width:400px}.login-card h2{text-align:center;margin-bottom:20px}.notifications{float:right;margin-right:20px;position:relative}.notification-dropdown{position:relative;display:inline-block}.notification-btn{display:inline-flex;align-items:center;justify-content:center;position:relative;padding:10px;color:#666666;background:none;border:none;border-radius:50%;cursor:pointer;transition:all 0.3s ease}.notification-btn:hover{background-color:#f8f9fa;color:#2c3e50}.notification-badge{position:absolute;top:5px;right:5px;background-color:#dc3545;color:white;font-size:12px;font-weight:bold;border-radius:50%;width:20px;height:20px;display:flex;justify-content:center;align-items:center;min-width:20px}.notification-panel{position:absolute;top:100%;right:0;width:350px;background-color:white;box-shadow:0 8px 32px rgba(0,0,0,0.1);border-radius:8px;border:1px solid #e9ecef;z-index:1000;display:none;animation:slideDown 0.2s ease}.notification-dropdown:hover .notification-panel{display:block}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.notification-panel-header{padding:15px;border-bottom:1px solid #e9ecef;display:flex;justify-content:space-between;align-items:center}.notification-panel-header h3{margin:0;font-size:16px;font-weight:600;color:#1e293b}.notification-panel-header a{font-size:14px;color:#3b82f6;text-decoration:none;transition:color 0.3s ease}.notification-panel-header a:hover{color:#2563eb}.notification-panel-content{max-height:300px;overflow-y:auto}.notification-item{display:block;padding:15px;color:#333;text-decoration:none;border-bottom:1px solid #f1f5f9;transition:all 0.2s ease}.notification-item:hover{background-color:#f8fafc;padding-left:20px}.notification-item:last-child{border-bottom:none}.notification-content{width:100%}.notification-title{margin:0 0 5px 0;font-size:14px;font-weight:600;color:#1e293b}.notification-text{margin:0 0 8px 0;font-size:13px;color:#64748b;line-height:1.4}.notification-time{font-size:12px;color:#94a3b8}.no-notifications{padding:30px;text-align:center;color:#94a3b8;font-size:14px}#notification-toasts{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:9999;pointer-events:none}.notification-toast{background-color:white;border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,0.3);border:3px solid #3b82f6;width:380px;max-width:calc(100% - 40px);opacity:0;transform:translateY(20px);transition:all 0.3s cubic-bezier(0.25,0.8,0.25,1);pointer-events:auto;animation:toastSlideIn 0.4s ease-out forwards}@keyframes toastSlideIn{0%{opacity:0;transform:translateY(50px) scale(0.9)}100%{opacity:1;transform:translateY(0) scale(1)}}.notification-toast.show{opacity:1;transform:translateY(0)}.toast-header{padding:14px 16px;background-color:#3b82f6;border-bottom:2px solid #2563eb;border-radius:8px 8px 0 0;display:flex;justify-content:space-between;align-items:center}.toast-header h4{margin:0;font-size:17px;font-weight:700;color:white;letter-spacing:0.5px}.toast-close{background:rgba(255,255,255,0.25);border:none;font-size:22px;color:white;cursor:pointer;padding:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all 0.2s ease}.toast-close:hover{background-color:rgba(255,255,255,0.4);color:white;transform:scale(1.1)}.toast-body{padding:18px;background-color:#ffffff}.toast-body p{margin:0;color:#1e293b;line-height:1.7;font-size:15px;white-space:pre-wrap;word-wrap:break-word}.notification-toast-info{border-left:5px solid #3b82f6;border-color:#3b82f6}.notification-toast-success{border-left:5px solid #22c55e;border-color:#22c55e}.notification-toast-warning{border-left:5px solid #f59e0b;border-color:#f59e0b}.notification-toast-error{border-left:5px solid #ef4444;border-color:#ef4444}.notification-toast-info .toast-header{background-color:#3b82f6;border-bottom-color:#2563eb}.notification-toast-success .toast-header{background-color:#22c55e;border-bottom-color:#16a34a}.notification-toast-success .toast-header h4{color:white}.notification-toast-error .toast-header{background-color:#ef4444;border-bottom-color:#dc2626}.notification-toast-error .toast-header h4{color:white}.notification-toast-warning .toast-header{background-color:#f59e0b;border-bottom-color:#d97706}.notification-toast-warning .toast-header h4{color:white}.notification-toast:not(.show){opacity:0;transform:translateY(20px) scale(0.95);animation:toastSlideOut 0.3s ease-in forwards}@keyframes toastSlideOut{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(50px) scale(0.9)}}.notification-panel{box-shadow:0 12px 40px rgba(0,0,0,0.2);border:2px solid #e2e8f0}.notification-item{border-left:4px solid transparent;transition:all 0.2s ease}.notification-item:hover{background-color:#f0f9ff;border-left-color:#3b82f6;transform:translateX(2px)}.notification-item.unread{background-color:#fef3c7;border-left-color:#f59e0b}.notification-item.unread:hover{background-color:#fde68a}.card{background-color:white;border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);overflow:hidden;transition:all var(--transition-normal);margin-bottom:var(--space-6)}.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.card-header{padding:var(--space-6) var(--space-6);border-bottom:1px solid var(--gray-200);display:flex;align-items:center;justify-content:space-between}.card-header.bg-blue-600{background-color:#2563eb}.card-header.bg-green-600{background-color:#16a34a}.card-header.bg-purple-600{background-color:#7c3aed}.card-header.bg-orange-600{background-color:#ea580c}.card-header.bg-teal-600{background-color:#0d9488}.card-header.text-white{color:white}.card-header h2{margin:0;font-size:1.5rem;color:var(--gray-900);font-weight:600}.card-header h3{margin:0;font-size:1.5rem;color:var(--gray-800);font-weight:700}.card-header.text-white h3{color:white}.card-body{padding:var(--space-6)}.table{width:100%;border-collapse:collapse;margin:0;background-color:white;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200)}table tr{transition:all var(--transition-fast)}table tr:hover{background-color:var(--gray-50);transform:translateX(4px)}.table-link{color:var(--primary-color);text-decoration:none;font-weight:500;transition:all var(--transition-fast);position:relative}.table-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background-color:var(--primary-color);transition:width var(--transition-fast)}.table-link:hover{color:var(--primary-hover)}.table-link:hover::after{width:100%}.status-badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-full);font-size:1rem;font-weight:600;text-transform:capitalize;transition:all var(--transition-fast)}.status-badge:hover{transform:scale(1.05);box-shadow:var(--shadow-sm)}.status-badge.active{background-color:#dcfce7;color:var(--success-color)}.status-badge.resigned,.status-badge.inactive{background-color:#fee2e2;color:var(--danger-color)}.status-badge.suspended{background-color:#fef3c7;color:var(--warning-color)}.action-buttons{display:flex;gap:6px;flex-wrap:wrap}.empty-state{text-align:center;padding:60px 20px;color:#64748b}.btn-info{background-color:#3b82f6;color:white}.btn-info:hover{background-color:#2563eb}.btn-warning{background-color:#f59e0b;color:white}.btn-warning:hover{background-color:#d97706}.btn-success{background-color:#22c55e;color:white}.btn-success:hover{background-color:#16a34a}.btn-secondary{background-color:#6b7280;color:white}.btn-secondary:hover{background-color:#4b5563}.hover-lift{transition:all var(--transition-fast)}.hover-lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn:active{transform:scale(0.98);transition:transform 0.1s ease}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{box-shadow:0 0 0 3px rgba(59,130,246,0.15)}@keyframes fadeIn{from{opacity:0;transform:translateY(var(--space-4))}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn var(--transition-normal)}html{scroll-behavior:smooth}