:root{--primary: #49b749;--primary-dark: #2f9d2f;--primary-light: rgba(73,183,73,0.1);--secondary: #6b7280;--success: #059669;--danger: #dc2626;--warning: #d97706;--info: #0891b2;--light: #fafafa;--dark: #09090b;--border: #e4e4e7;--text: #18181b;--text-muted: #71717a;--bg: #ffffff;--bg-secondary: #f4f4f5;--shadow: 0 1px 2px 0 rgba(0,0,0,0.05);--shadow-lg: 0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--radius: 8px;--radius-lg: 12px} [data-theme="dark"]{--light: #09090b;--dark: #fafafa;--border: #27272a;--text: #fafafa;--text-muted: #a1a1aa;--bg: #18181b;--bg-secondary: #27272a} *{box-sizing: border-box;margin: 0;padding: 0} body{font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background: var(--light);color: var(--text);line-height: 1.5;font-size: 14px;transition: all 0.2s ease} .login-container{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);padding: 1rem} .login-card{background: var(--bg);padding: 2rem;border-radius: var(--radius-lg);box-shadow: var(--shadow-lg);width: 100%;max-width: 360px;border: 1px solid var(--border)} .login-header{text-align: center;margin-bottom: 1.5rem} .login-header p{color: var(--text-muted);font-size: 0.8rem} .login-logo{height: 60px;margin-bottom: 15px} .form-group{margin-bottom: 1rem} .form-group label{display: block;margin-bottom: 0.375rem;font-weight: 500;color: var(--text);font-size: 0.8rem} .form-input{width: 100%;padding: 0.625rem 0.75rem;border: 1px solid var(--border);border-radius: var(--radius);font-size: 0.875rem;background: var(--bg);color: var(--text);transition: all 0.15s ease} .form-input:focus{outline: none;border-color: var(--primary);box-shadow: 0 0 0 2px var(--primary-light)} .btn{display: inline-flex;align-items: center;justify-content: center;gap: 0.375rem;padding: 0.5rem 1rem;border: none;border-radius: var(--radius);font-size: 0.8rem;font-weight: 500;cursor: pointer;transition: all 0.15s ease;text-decoration: none} .btn-primary{background: var(--primary);color: white} .btn-primary:hover{background: var(--primary-dark)} .btn-secondary{background: var(--secondary);color: white} .btn-success{background: var(--success);color: white} .btn-danger{background: var(--danger);color: white} .btn-sm{padding: 0.375rem 0.75rem;font-size: 0.75rem} .error{color: var(--danger);font-size: 0.75rem;margin-top: 0.375rem;display: none} .success{color: var(--success);font-size: 0.75rem;margin-top: 0.375rem;display: none} .dashboard{display: none;min-height: 100vh} .header{background: var(--bg);border-bottom: 1px solid var(--border);padding: 0.75rem 1.5rem;display: flex;justify-content: space-between;align-items: center;position: sticky;top: 0;z-index: 100;height: 60px} .header-center{display: flex;align-items: center;position: absolute;left: 50%;transform: translateX(-50%)} .header-left{display: flex;align-items: center;gap: 0.75rem} .header-logo{height: 32px} .header-right{display: flex;align-items: center;gap: 0.75rem} .theme-toggle{background: none;border: 1px solid var(--border);border-radius: var(--radius);padding: 0.375rem;cursor: pointer;color: var(--text);transition: all 0.15s ease;width: 32px;height: 32px;display: flex;align-items: center;justify-content: center} .theme-toggle:hover{border-color: var(--primary);color: var(--primary)} .user-info{display: flex;align-items: center;gap: 0.375rem;color: var(--text-muted);font-size: 0.75rem} .sidebar{position: fixed;left: 0;top: 60px;width: 240px;height: calc(100vh - 60px);background: var(--bg);border-right: 1px solid var(--border);padding: 1rem 0 0 0;overflow-y: auto;display: flex;flex-direction: column} .nav-section{margin-bottom: 1.5rem} .nav-section-title{padding: 0 1rem;margin-bottom: 0.5rem;font-size: 0.65rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.05em;color: var(--text-muted)} .nav-item{display: flex;align-items: center;gap: 0.625rem;padding: 0.625rem 1rem;margin: 0 0.5rem;color: var(--text-muted);text-decoration: none;transition: all 0.15s ease;cursor: pointer;border-radius: var(--radius);font-size: 0.8rem} .nav-item:hover{background: var(--bg-secondary);color: var(--text)} .nav-item.active{background: var(--primary);color: white} .nav-item i{width: 16px;text-align: center;font-size: 0.75rem;flex-shrink: 0} .main-content{margin-left: 240px;padding: 1.5rem;min-height: calc(100vh - 60px)} .page-header{margin-bottom: 1.5rem} .page-title{font-size: 1.5rem;font-weight: 600;color: var(--text);margin-bottom: 0.25rem} .page-subtitle{color: var(--text-muted);font-size: 0.8rem} .card{background: var(--bg);border: 1px solid var(--border);border-radius: var(--radius-lg);padding: 1rem;margin-bottom: 1rem;box-shadow: var(--shadow)} .card-header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 1rem;padding-bottom: 0.75rem;border-bottom: 1px solid var(--border)} .card-title{font-size: 1rem;font-weight: 600;color: var(--text)} .stats-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(180px,1fr));gap: 1rem;margin-bottom: 1.5rem} .stat-card{background: var(--bg);border: 1px solid var(--border);border-radius: var(--radius-lg);padding: 1rem;text-align: center} .stat-icon{width: 36px;height: 36px;border-radius: var(--radius);display: flex;align-items: center;justify-content: center;margin: 0 auto 0.75rem;font-size: 1rem} .stat-icon.primary{background: var(--primary-light);color: var(--primary)} .stat-icon.success{background: rgba(5,150,105,0.1);color: var(--success)} .stat-icon.warning{background: rgba(217,119,6,0.1);color: var(--warning)} .stat-icon.danger{background: rgba(220,38,38,0.1);color: var(--danger)} .stat-number{font-size: 1.5rem;font-weight: 600;color: var(--text);margin-bottom: 0.125rem} .stat-label{color: var(--text-muted);font-size: 0.75rem} .table-container{overflow-x: auto;border-radius: var(--radius);border: 1px solid var(--border)} .dataTables_wrapper:has(.dataTables_empty) .dataTables_length,.dataTables_wrapper:has(.dataTables_empty) .dataTables_filter,.dataTables_wrapper:has(.dataTables_empty) .dataTables_info,.dataTables_wrapper:has(.dataTables_empty) .dataTables_paginate{display: none} .table{width: 100%;border-collapse: collapse;background: var(--bg)} .table th,.table td{padding: 0.75rem;text-align: left;border-bottom: 1px solid var(--border)} .table th{background: var(--bg-secondary);font-weight: 600;color: var(--text);font-size: 0.75rem} .table td{color: var(--text);font-size: 0.8rem} .table tr:hover{background: var(--bg-secondary)} .badge{display: inline-flex;align-items: center;padding: 0.125rem 0.5rem;border-radius: 9999px;font-size: 0.65rem;font-weight: 500} .badge.success{background: rgba(5,150,105,0.1);color: var(--success)} .badge.danger{background: rgba(220,38,38,0.1);color: var(--danger)} .badge.warning{background: rgba(217,119,6,0.1);color: var(--warning)} .badge.info{background: rgba(8,145,178,0.1);color: var(--info)} .badge.primary{background: var(--primary-light);color: var(--primary)} .modal{display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.4);z-index: 1000;backdrop-filter: blur(2px)} .modal-content{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background: var(--bg);border-radius: var(--radius-lg);padding: 1.5rem;width: 90%;max-width: 450px;max-height: 90vh;overflow-y: auto;border: 1px solid var(--border)} .modal-header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 1rem} .modal-title{font-size: 1rem;font-weight: 600;color: var(--text)} .modal-close{background: none;border: none;font-size: 1.25rem;cursor: pointer;color: var(--text-muted);padding: 0.25rem} .hidden{display: none !important} .chart-container{position: relative;height: 250px;margin: 0.75rem 0} @media (max-width: 768px){.sidebar{transform: translateX(-100%);transition: transform 0.2s ease} .sidebar.open{transform: translateX(0)} .main-content{margin-left: 0;padding: 1rem} .header{padding: 0.75rem 1rem} .stats-grid{grid-template-columns: 1fr} } .loading{display: inline-block;width: 16px;height: 16px;border: 2px solid rgba(255,255,255,.3);border-radius: 50%;border-top-color: #fff;animation: spin 1s ease-in-out infinite} @keyframes spin{to{transform: rotate(360deg)} } .notification{position: fixed;top: 16px;right: 16px;z-index: 1000;min-width: 280px;max-width: 400px;border-radius: var(--radius);box-shadow: var(--shadow-lg);animation: slideIn 0.2s ease} .notification-success{background: var(--success);color: white} .notification-error{background: var(--danger);color: white} .notification-info{background: var(--info);color: white} .notification-content{display: flex;align-items: center;gap: 0.5rem;padding: 0.75rem;font-size: 0.8rem} .notification-close{background: none;border: none;color: white;cursor: pointer;margin-left: auto;opacity: 0.8;padding: 0.125rem} .notification-close:hover{opacity: 1} @keyframes slideIn{from{transform: translateX(100%);opacity: 0} to{transform: translateX(0);opacity: 1} } .tooltip{position: absolute;background: var(--dark);color: var(--light);padding: 0.5rem 0.75rem;border-radius: var(--radius);font-size: 0.75rem;font-weight: 500;white-space: nowrap;z-index: 1000;opacity: 0;visibility: hidden;transition: all 0.2s ease;pointer-events: none;box-shadow: var(--shadow-lg);border: 1px solid var(--border)} .tooltip.show{opacity: 1;visibility: visible} .tooltip::after{content: '';position: absolute;width: 0;height: 0;border: 4px solid transparent} .tooltip.top::after{top: 100%;left: 50%;transform: translateX(-50%);border-top-color: var(--dark)} .tooltip.bottom::after{bottom: 100%;left: 50%;transform: translateX(-50%);border-bottom-color: var(--dark)} .tooltip.left::after{left: 100%;top: 50%;transform: translateY(-50%);border-left-color: var(--dark)} .tooltip.right::after{right: 100%;top: 50%;transform: translateY(-50%);border-right-color: var(--dark)} [data-tooltip]{position: relative} .user-dropdown-menu .dropdown-item:hover{background: var(--bg-secondary)} .test-result{padding: 1rem;border-radius: var(--radius);margin-top: 1rem;font-family: 'Courier New',monospace;font-size: 0.75rem} .test-result.success{background: rgba(5,150,105,0.1);border: 1px solid var(--success);color: var(--success)} .test-result.error{background: rgba(220,38,38,0.1);border: 1px solid var(--danger);color: var(--danger)} .test-result.info{background: rgba(8,145,178,0.1);border: 1px solid var(--info);color: var(--info)} .settings-tab.active{color: var(--primary) !important;border-bottom-color: var(--primary) !important} .settings-tab:hover{color: var(--text) !important} .settings-tab-content{padding: 1rem} .dataTables_wrapper{font-size: 0.8rem;margin-top: 1rem} .table-wrapper{margin-bottom: 1rem} .table-controls-top{display: flex;justify-content: space-between;align-items: center;margin: 1rem 0;padding: 0 10px} .table-controls-bottom{display: flex;justify-content: space-between;align-items: center;margin-top: 1rem;padding: 0 10px} .dataTables_wrapper .dataTables_length label,.dataTables_wrapper .dataTables_filter label{font-weight: 500;color: var(--text);font-size: 0.8rem} .dataTables_filter input{border: 1px solid var(--border) !important;border-radius: var(--radius) !important;padding: 0.375rem 0.75rem !important;background: var(--bg) !important;color: var(--text) !important;margin-left: 0.5rem !important} .dataTables_length select{border: 1px solid var(--border) !important;border-radius: var(--radius) !important;padding: 0.25rem 0.5rem !important;background: var(--bg) !important;color: var(--text) !important;margin: 0 0.5rem !important} .table-info{color: var(--text-muted);font-size: 0.8rem} .pagination{display: flex;gap: 0.25rem} .page-btn{padding: 0.25rem 0.5rem;border: 1px solid var(--border);background: var(--bg);color: var(--text);cursor: pointer;border-radius: 4px} .page-btn:hover:not(:disabled){background: var(--bg-secondary)} .page-btn.active{background: var(--primary);color: white;border-color: var(--primary)} .page-btn:disabled{opacity: 0.5;cursor: not-allowed} .page-ellipsis{padding: 0.25rem 0.5rem;color: var(--text-muted)} th.sort-asc::after{content: ' ↑'} th.sort-desc::after{content: ' ↓'} .length-select,.search-input{padding: 0.25rem;border: 1px solid var(--border);border-radius: 4px;background: var(--bg);color: var(--text)} .dataTables_paginate .paginate_button{border: 1px solid var(--border) !important;background: var(--bg) !important;color: var(--text) !important;padding: 0.375rem 0.75rem !important;margin: 0 0.125rem !important;border-radius: var(--radius) !important;font-size: 0.8rem !important} .dataTables_paginate .paginate_button:hover{background: var(--bg-secondary) !important;border-color: var(--primary) !important;color: var(--primary) !important} .dataTables_paginate .paginate_button.current{background: var(--primary) !important;border-color: var(--primary) !important;color: white !important} .dataTables_paginate .paginate_button.disabled{opacity: 0.5 !important;cursor: not-allowed !important} .dataTable thead th{background: var(--bg-secondary) !important;border-bottom: 1px solid var(--border) !important;color: var(--text) !important;font-weight: 600 !important;font-size: 0.75rem !important;padding: 0.75rem !important} .dataTable tbody td{border-bottom: 1px solid var(--border) !important;padding: 0.75rem !important;font-size: 0.8rem !important} .dataTable tbody tr:hover{background: var(--bg-secondary) !important} .dataTables_wrapper .dataTables_paginate .paginate_button.previous,.dataTables_wrapper .dataTables_paginate .paginate_button.next{border-radius: var(--radius) !important} .dataTables_wrapper .dataTables_scroll{border-radius: var(--radius)}