:root {
    --primary: #409eff;
    --primary-light: #66b1ff;
    --primary-dark: #3a8ee6;
    --success: #67c23a;
    --success-light: #85ce61;
    --warning: #e6a23c;
    --warning-light: #ebb563;
    --danger: #f56c6c;
    --danger-light: #f78989;
    --info: #909399;
    --info-light: #a6a9ad;

    --text-primary: #303133;
    --text-regular: #606266;
    --text-secondary: #909399;
    --text-placeholder: #c0c4cc;

    --bg-page: #f0f2f5;
    --bg-white: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f5f7fa;
    --bg-sidebar: #304156;
    --bg-sidebar-hover: #263445;
    --bg-header: #ffffff;

    --border-color: #dcdfe6;
    --border-light: #e4e7ed;
    --border-lighter: #ebeef5;

    --shadow-sm: 0 1px 4px rgba(0,0,0,0.08);
    --shadow-md: 0 2px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 20px rgba(0,0,0,0.12);
}

body {
    background-color: var(--bg-page);
    color: var(--text-primary);
}

a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-light);
}

::-webkit-scrollbar-thumb {
    background: #c0c4cc;
}

::-webkit-scrollbar-thumb:hover {
    background: #909399;
}

.admin-sidebar {
    background-color: var(--bg-sidebar);
}

.admin-sidebar .sidebar-logo {
    color: #ffffff;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.admin-sidebar .sidebar-menu a {
    color: #bfcbd9;
}

.admin-sidebar .sidebar-menu a:hover,
.admin-sidebar .sidebar-menu a.active {
    background-color: var(--bg-sidebar-hover);
    color: #ffffff;
}

.admin-sidebar .sidebar-user {
    color: #bfcbd9;
}

.admin-sidebar .sidebar-user .logout-btn {
    color: #f56c6c;
}

.admin-sidebar .sidebar-user .logout-btn:hover {
    color: #f78989;
}

.admin-header {
    background-color: var(--bg-header);
    border-bottom: 1px solid var(--border-lighter);
    box-shadow: var(--shadow-sm);
}

.admin-header .page-title {
    color: var(--text-primary);
}

.view-header {
    background-color: var(--bg-white);
    border-bottom: 1px solid var(--border-lighter);
    box-shadow: var(--shadow-sm);
}

.view-header .logo {
    color: var(--primary);
}

.view-header .nav-links a {
    color: var(--text-regular);
}

.view-header .nav-links a:hover,
.view-header .nav-links a.active {
    color: var(--primary);
}

.card {
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.card-header {
    border-bottom: 1px solid var(--border-lighter);
}

.card-title {
    color: var(--text-primary);
}

.btn-primary {
    background-color: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

.btn-primary:hover {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
}

.btn-success {
    background-color: var(--success);
    color: #ffffff;
    border-color: var(--success);
}

.btn-success:hover {
    background-color: var(--success-light);
    border-color: var(--success-light);
}

.btn-warning {
    background-color: var(--warning);
    color: #ffffff;
    border-color: var(--warning);
}

.btn-warning:hover {
    background-color: var(--warning-light);
    border-color: var(--warning-light);
}

.btn-danger {
    background-color: var(--danger);
    color: #ffffff;
    border-color: var(--danger);
}

.btn-danger:hover {
    background-color: var(--danger-light);
    border-color: var(--danger-light);
}

.btn-info {
    background-color: var(--info);
    color: #ffffff;
    border-color: var(--info);
}

.btn-info:hover {
    background-color: var(--info-light);
    border-color: var(--info-light);
}

.btn-default {
    background-color: #ffffff;
    color: var(--text-regular);
    border-color: var(--border-color);
}

.btn-default:hover {
    color: var(--primary);
    border-color: var(--primary-light);
    background-color: #ecf5ff;
}

.btn-text {
    background: transparent;
    border: none;
    padding: 0 8px;
    height: auto;
}

.btn-text:hover {
    color: var(--primary-light);
}

.search-box input {
    background-color: var(--bg-white);
    color: var(--text-primary);
}

.search-box input:focus {
    border-color: var(--primary);
}

.search-box input::placeholder {
    color: var(--text-placeholder);
}

.search-box button {
    background-color: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

.form-control {
    background-color: var(--bg-white);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.form-control:focus {
    border-color: var(--primary);
}

.form-control::placeholder {
    color: var(--text-placeholder);
}

.form-group label {
    color: var(--text-primary);
}

.form-group label .required {
    color: var(--danger);
}

.data-table thead th {
    background-color: #fafafa;
    color: var(--text-regular);
    border-bottom: 1px solid var(--border-lighter);
}

.data-table tbody td {
    color: var(--text-regular);
    border-top-color: var(--border-lighter);
}

.data-table tbody tr:hover {
    background-color: var(--bg-hover);
}

.pagination .page-btn {
    background-color: var(--bg-white);
    color: var(--text-regular);
    border-color: var(--border-color);
}

.pagination .page-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.pagination .page-btn.active {
    background-color: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

.pagination .page-info {
    color: var(--text-secondary);
}

.modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal {
    background-color: var(--bg-white);
    box-shadow: var(--shadow-lg);
}

.modal-header {
    background-color: var(--bg-white);
}

.modal-title {
    color: var(--text-primary);
}

.modal-close {
    color: var(--text-secondary);
}

.modal-close:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.modal-footer {
    background-color: var(--bg-white);
}

.badge-primary {
    background-color: rgba(64, 158, 255, 0.1);
    color: var(--primary);
}

.badge-success {
    background-color: rgba(103, 194, 58, 0.1);
    color: var(--success);
}

.badge-warning {
    background-color: rgba(230, 162, 60, 0.1);
    color: var(--warning);
}

.badge-danger {
    background-color: rgba(245, 108, 108, 0.1);
    color: var(--danger);
}

.badge-info {
    background-color: rgba(144, 147, 153, 0.1);
    color: var(--info);
}

.status-dot-active {
    background-color: var(--success);
}

.status-dot-inactive {
    background-color: var(--danger);
}

.empty-state .empty-icon {
    color: var(--text-placeholder);
}

.empty-state .empty-text {
    color: var(--text-secondary);
}

.stat-card {
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.stat-card .stat-label {
    color: var(--text-secondary);
}

.stat-card .stat-value {
    color: var(--text-primary);
}

.tab-nav .tab-item {
    color: var(--text-regular);
}

.tab-nav .tab-item:hover {
    color: var(--primary);
}

.tab-nav .tab-item.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.toast-success {
    background-color: #f0f9eb;
    color: var(--success);
    border: 1px solid #e1f3d8;
}

.toast-error {
    background-color: #fef0f0;
    color: var(--danger);
    border: 1px solid #fde2e2;
}

.toast-warning {
    background-color: #fdf6ec;
    color: var(--warning);
    border: 1px solid #faecd8;
}

.toast-info {
    background-color: #f4f4f5;
    color: var(--info);
    border: 1px solid #e9e9eb;
}

.login-wrapper {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-box {
    background-color: var(--bg-white);
    box-shadow: var(--shadow-lg);
}

.login-box .login-title {
    color: var(--text-primary);
}

.login-box .login-subtitle {
    color: var(--text-secondary);
}

.lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 8px;
}

.lock-overlay .lock-icon {
    font-size: 36px;
    color: var(--text-placeholder);
    margin-bottom: 8px;
}

.lock-overlay .lock-text {
    font-size: 14px;
    color: var(--text-secondary);
}

.admin-sidebar .sidebar-user {
    border-top-color: rgba(255,255,255,0.1);
}

.search-box input {
    border-color: var(--border-color);
    background-color: var(--bg-white);
    color: var(--text-primary);
}

.search-box input:focus {
    border-color: var(--primary);
}

.search-box input::placeholder {
    color: var(--text-placeholder);
}

.search-box button {
    background-color: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

.form-control {
    border-color: var(--border-color);
    background-color: var(--bg-white);
    color: var(--text-primary);
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.form-control::placeholder {
    color: var(--text-placeholder);
}

.data-table tbody td {
    border-top-color: var(--border-lighter);
}

.data-table tbody tr:hover {
    background-color: var(--bg-hover);
}

.pagination .page-btn {
    border-color: var(--border-color);
    background-color: var(--bg-white);
    color: var(--text-regular);
}

.modal-header {
    border-bottom-color: var(--border-lighter);
}

.modal-footer {
    border-top-color: var(--border-lighter);
}

.loading-spinner {
    border-color: var(--border-lighter);
    border-top-color: var(--primary);
}

.tab-nav {
    border-bottom-color: var(--border-lighter);
}