/* ==========================================
   ADMIN PANEL STYLESHEET
   Unified Design with Main Site
   Dark Theme • Professional • Code-Inspired
   ========================================== */

/* --------------------------
   Core Admin Layout & Header
   Matches main site's frosted glass navigation
   -------------------------- */
.admin-header {
	position: sticky;
	top: 0;
	background: rgba(13, 17, 23, 0.8);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border-primary);
	padding: var(--spacing-xl) 0;
	margin-bottom: var(--spacing-3xl);
	z-index: 100;
	transition: background var(--transition-normal), box-shadow var(--transition-normal);
}

.admin-header .container { 
	display: flex; 
	justify-content: space-between; 
	align-items: center; 
	flex-wrap: wrap; 
	gap: var(--spacing-lg); 
}

.admin-header h1 { 
	font-size: clamp(1.75rem, 4vw, 2.5rem); 
	font-weight: 700;
	margin: 0;
	font-family: var(--font-mono);
}

.admin-header .highlight { 
	color: var(--accent-blue); 
}

.admin-nav { 
	display: flex; 
	gap: var(--spacing-xl); 
	align-items: center; 
}

.admin-nav a { 
	color: var(--text-secondary); 
	text-decoration: none;
	font-weight: 500;
	transition: color var(--transition-fast);
}

.admin-nav a:hover {
	color: var(--accent-blue);
}

.admin-page { 
	min-height: 100vh; 
	padding-bottom: var(--spacing-3xl); 
	background: var(--bg-primary);
}

/* --------------------------
   Dashboard Cards
   Matches main site's project cards
   -------------------------- */
.dashboard-grid { 
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
	gap: var(--spacing-xl); 
	margin-bottom: var(--spacing-3xl); 
}

.admin-card { 
	background: var(--bg-secondary); 
	border: 1px solid var(--border-primary); 
	border-radius: var(--radius-lg); 
	padding: var(--spacing-2xl); 
	transition: all var(--transition-normal);
	position: relative;
	overflow: hidden;
}

.admin-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
	opacity: 0;
	transition: opacity var(--transition-normal);
}

.admin-card:hover {
	border-color: var(--accent-blue);
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

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

.admin-card h3 { 
	color: var(--accent-blue); 
	margin-bottom: var(--spacing-lg); 
	font-size: 1.5rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.admin-card h3::before { 
	content: '▶'; 
	font-size: 0.875rem;
	opacity: 0.7;
}

.admin-card p { 
	color: var(--text-secondary); 
	margin-bottom: var(--spacing-lg); 
	line-height: 1.7; 
}

.admin-links { 
	display: flex; 
	flex-direction: column; 
	gap: var(--spacing-sm); 
}

.admin-link { 
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-md); 
	background: var(--bg-tertiary); 
	border: 1px solid var(--border-primary); 
	border-radius: var(--radius-md); 
	color: var(--text-primary); 
	text-decoration: none; 
	transition: all var(--transition-fast);
	font-weight: 500;
}

.admin-link:hover { 
	border-color: var(--accent-blue); 
	background: var(--bg-elevated); 
	transform: translateX(6px);
	color: var(--accent-blue);
}

.admin-link::after {
	content: '→';
	opacity: 0;
	transition: opacity var(--transition-fast);
}

.admin-link:hover::after {
	opacity: 1;
}

.admin-link.primary { 
	background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-green) 100%);
	border-color: var(--accent-blue); 
	color: #000;
	font-weight: 600;
}

.admin-link.primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(88, 166, 255, 0.3);
	color: #000;
}

.admin-link.primary strong { 
	color: #000; 
}


/* --------------------------
   Status Boxes & Messages
   Professional alert styling
   -------------------------- */
.status-box { 
	padding: var(--spacing-lg); 
	background: var(--bg-tertiary); 
	border-radius: var(--radius-md); 
	border-left: 4px solid var(--border-primary); 
	margin-bottom: var(--spacing-lg);
	font-size: 0.95rem;
	line-height: 1.6;
}

.status-ok { 
	border-left-color: var(--accent-green); 
	background: rgba(63, 185, 80, 0.08);
}

.status-error { 
	border-left-color: var(--accent-red); 
	background: rgba(248, 81, 73, 0.08);
}

.status-icon { 
	margin-right: var(--spacing-sm); 
}

.stats-grid { 
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); 
	gap: var(--spacing-lg); 
	margin-top: var(--spacing-xl); 
}

.stat-item { 
	background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
	padding: var(--spacing-xl); 
	border-radius: var(--radius-md); 
	border: 1px solid var(--border-primary);
	transition: all var(--transition-normal);
	position: relative;
	overflow: hidden;
}

.stat-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--accent-blue);
	transform: scaleX(0);
	transition: transform var(--transition-normal);
}

.stat-item:hover::before {
	transform: scaleX(1);
}

.stat-item:hover {
	border-color: var(--accent-blue);
	transform: translateY(-4px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.stat-item strong { 
	display: block; 
	font-size: clamp(1.75rem, 3vw, 2.5rem); 
	color: var(--accent-blue); 
	margin-bottom: var(--spacing-xs);
	font-family: var(--font-mono);
	font-weight: 700;
}

.stat-item span { 
	color: var(--text-secondary); 
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 500;
}

.quick-actions { 
	display: flex; 
	gap: var(--spacing-md); 
	margin-top: var(--spacing-xl); 
	flex-wrap: wrap; 
}

/* --------------------------
   Buttons
   Matches main site's professional button styles
   -------------------------- */
.btn {
	padding: 12px 24px;
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: all var(--transition-normal);
	letter-spacing: 0.3px;
	font-family: var(--font-primary);
	text-align: center;
}

.btn-primary {
	background: var(--accent-blue);
	color: #000;
	border-color: var(--accent-blue);
}

.btn-primary:hover {
	background: var(--accent-blue-hover);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(88, 166, 255, 0.4);
}

.btn-secondary {
	background: var(--bg-secondary);
	color: var(--text-primary);
	border-color: var(--border-primary);
}

.btn-secondary:hover {
	background: var(--bg-tertiary);
	border-color: var(--accent-blue);
	color: var(--accent-blue);
}

.btn-danger {
	background: var(--accent-red);
	color: #fff;
	border-color: var(--accent-red);
}

.btn-danger:hover {
	background: #dc3930;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(248, 81, 73, 0.4);
}

.btn-sm {
	padding: 8px 16px;
	font-size: 0.875rem;
}

.btn-logout {
	background: var(--bg-tertiary);
	color: var(--text-secondary);
	padding: 8px 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-primary);
	text-decoration: none;
	font-weight: 500;
	transition: all var(--transition-fast);
	display: inline-block;
}

.btn-logout:hover {
	background: var(--accent-red);
	color: #fff;
	border-color: var(--accent-red);
}

.btn-login {
	width: 100%;
	background: var(--accent-blue);
	color: #000;
	padding: 14px;
	border: none;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	margin-top: var(--spacing-md);
	transition: all var(--transition-normal);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.btn-login:hover {
	background: var(--accent-blue-hover);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(88, 166, 255, 0.4);
}

.btn-group {
	display: flex;
	gap: var(--spacing-md);
	flex-wrap: wrap;
}

.btn-block {
	width: 100%;
	text-align: center;
}

/* --------------------------
   Tables
   Professional data table styling
   -------------------------- */
table, .submissions-table, .bans-table, .data-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin-top: var(--spacing-lg);
	background: var(--bg-secondary);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-md);
	overflow: hidden;
}

th, .submissions-table th, .bans-table th, .data-table th {
	padding: var(--spacing-md) var(--spacing-lg);
	text-align: left;
	background: var(--bg-tertiary);
	color: var(--accent-blue);
	font-weight: 600;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 2px solid var(--border-primary);
	position: sticky;
	top: 0;
	z-index: 10;
}

td, .submissions-table td, .bans-table td, .data-table td {
	padding: var(--spacing-md) var(--spacing-lg);
	border-bottom: 1px solid var(--border-primary);
	color: var(--text-primary);
	font-size: 0.95rem;
	vertical-align: middle;
}

tr:last-child td {
	border-bottom: none;
}

tbody tr {
	transition: background-color var(--transition-fast);
}

tbody tr:hover {
	background: var(--bg-tertiary);
}

.table-responsive {
	width: 100%;
	overflow-x: auto;
	margin-top: var(--spacing-md);
	border-radius: var(--radius-md);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Sortable headers */
th.sortable {
	cursor: pointer;
	user-select: none;
	position: relative;
	transition: background-color var(--transition-fast);
}

th.sortable:hover {
	background: var(--bg-elevated);
	color: var(--accent-blue-hover);
}

th.sortable::after {
	content: '⇅';
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.4;
	font-size: 0.875rem;
	transition: opacity var(--transition-fast);
}

th.sortable:hover::after {
	opacity: 0.8;
}

th.sorted-asc::after {
	content: '↑';
	opacity: 1;
	color: var(--accent-blue);
}

th.sorted-desc::after {
	content: '↓';
	opacity: 1;
	color: var(--accent-blue);
}

.sortable-link {
	color: inherit;
	text-decoration: none;
	display: block;
}

/* Table row states */
.row-unread {
	background: rgba(88, 166, 255, 0.08);
}

.row-inactive {
	background: rgba(248, 81, 73, 0.05);
	opacity: 0.7;
}

.row-blocked {
	background: rgba(248, 81, 73, 0.08);
}

.table-empty-state {
	text-align: center;
	padding: var(--spacing-3xl);
	color: var(--text-muted);
	font-size: 1rem;
}

/* --------------------------
   Forms
   Professional form components
   -------------------------- */
.form-group {
	margin-bottom: var(--spacing-lg);
}

.form-group label {
	display: block;
	margin-bottom: var(--spacing-sm);
	color: var(--text-primary);
	font-weight: 600;
	font-size: 0.95rem;
}

.form-group input,
.form-group textarea,
.form-group select,
.form-control,
.setting-input {
	width: 100%;
	padding: 12px 16px;
	background: var(--bg-tertiary);
	border: 2px solid var(--border-primary);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	font-family: inherit;
	font-size: 1rem;
	transition: all var(--transition-fast);
	box-sizing: border-box;
}

.form-group textarea {
	min-height: 120px;
	resize: vertical;
	line-height: 1.6;
	font-family: var(--font-primary);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.form-control:focus,
.setting-input:focus {
	outline: none;
	border-color: var(--accent-blue);
	background: var(--bg-elevated);
	box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
	color: var(--text-muted);
}

.form-group small,
.form-help,
.help-text,
.setting-description {
	color: var(--text-muted);
	display: block;
	margin-top: var(--spacing-xs);
	font-size: 0.875rem;
	line-height: 1.5;
}

.form-actions {
	display: flex;
	gap: var(--spacing-md);
	margin-top: var(--spacing-2xl);
	flex-wrap: wrap;
}

.checkbox-group,
.checkbox-wrapper {
	padding: var(--spacing-md);
	background: var(--bg-tertiary);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-sm);
}

.checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-md);
	cursor: pointer;
	margin: 0;
}

.checkbox-input,
.checkbox-group input[type="checkbox"] {
	margin-top: 2px;
	width: 18px;
	height: 18px;
	cursor: pointer;
	accent-color: var(--accent-blue);
}

.checkbox-text {
	flex: 1;
}

.checkbox-text strong {
	color: var(--text-primary);
	font-size: 0.95rem;
}

.checkbox-subtext {
	font-size: 0.85rem;
	color: var(--text-secondary);
	margin-top: 4px;
}

/* Form sections */
.form-container {
	max-width: 960px;
	margin: 0 auto var(--spacing-3xl);
	padding: 0 var(--spacing-lg);
}

.form-section {
	background: var(--bg-secondary);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-lg);
	padding: var(--spacing-2xl);
	margin-bottom: var(--spacing-xl);
	position: relative;
	overflow: hidden;
}

.form-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
}

.form-section h2 {
	color: var(--accent-blue);
	font-size: 1.5rem;
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-md);
	border-bottom: 2px solid var(--border-primary);
}

.intro-text {
	color: var(--text-secondary);
	margin-bottom: var(--spacing-2xl);
	font-size: 1.05rem;
	line-height: 1.7;
}

/* --------------------------
   Cards & Containers
   Professional content containers
   -------------------------- */
.container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--spacing-xl);
}

.card {
	background: var(--bg-secondary);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-lg);
	padding: var(--spacing-2xl);
	margin-bottom: var(--spacing-xl);
	transition: all var(--transition-normal);
	position: relative;
	overflow: hidden;
}

.card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--accent-blue);
	opacity: 0;
	transition: opacity var(--transition-normal);
}

.card:hover {
	border-color: var(--accent-blue);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

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

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing-lg);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--border-primary);
}

.card-header h2 {
	color: var(--accent-blue);
	margin: 0;
	font-size: 1.5rem;
}

.card-title {
	font-size: 1.25rem;
	margin-bottom: var(--spacing-md);
	color: var(--text-primary);
}

.card-text {
	color: var(--text-secondary);
	margin-bottom: var(--spacing-lg);
	line-height: 1.7;
}

/* --------------------------
   Badges & Tags
   Status indicators and labels
   -------------------------- */
.badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 0.85rem;
	font-weight: 600;
	font-family: var(--font-mono);
	letter-spacing: 0.3px;
}

.badge-active,
.badge-read {
	background: rgba(63, 185, 80, 0.15);
	color: var(--accent-green);
	border: 1px solid rgba(63, 185, 80, 0.3);
}

.badge-inactive {
	background: rgba(248, 81, 73, 0.15);
	color: var(--accent-red);
	border: 1px solid rgba(248, 81, 73, 0.3);
}

.badge-unread {
	background: rgba(88, 166, 255, 0.15);
	color: var(--accent-blue);
	border: 1px solid rgba(88, 166, 255, 0.3);
}

.tag,
.tag-small,
.example-tag {
	background: var(--bg-tertiary);
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	font-size: 0.75rem;
	color: var(--text-secondary);
	font-family: var(--font-mono);
	border: 1px solid var(--border-primary);
	display: inline-block;
}

.year-badge {
	background: var(--accent-blue);
	color: #000;
	padding: 6px 14px;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 0.95rem;
	font-family: var(--font-mono);
}

.setting-key {
	font-family: var(--font-mono);
	background: var(--bg-tertiary);
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	color: var(--accent-blue);
	font-weight: 600;
	border: 1px solid var(--border-primary);
	font-size: 0.9rem;
}

.code-inline {
	background: var(--bg-tertiary);
	padding: 3px 8px;
	border-radius: var(--radius-sm);
	color: var(--accent-blue);
	font-family: var(--font-mono);
	font-size: 0.9rem;
	border: 1px solid var(--border-primary);
}

.ip-code,
.ip-address-code {
	display: inline-block;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--font-mono);
	background: var(--bg-primary);
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	color: var(--accent-blue);
	font-size: 0.9rem;
	border: 1px solid var(--border-primary);
}
/* --------------------------
	Tables (submissions, bans)
	-------------------------- */
.table-responsive { width:100%; overflow-x:auto; margin-top:var(--spacing-md); }

.submissions-table, .bans-table { width:100%; border-collapse:collapse; margin-top:var(--spacing-lg); }
.submissions-table th, .submissions-table td, .bans-table th, .bans-table td { padding: var(--spacing-md); text-align:left; border-bottom:1px solid var(--border-primary); vertical-align:middle; }
.submissions-table th, .bans-table th { background: var(--bg-tertiary); color: var(--accent-blue); font-weight:600; }

.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; max-width:100%; vertical-align:middle; }
.col-select { width:50px; min-width:40px; text-align:center; }
.col-date { width:140px; min-width:110px; }
.col-name { width:200px; min-width:140px; white-space:nowrap; }
.col-email { width:220px; min-width:160px; white-space:nowrap; }
.col-message { width:auto; white-space:normal; }
.col-status { width:110px; min-width:90px; }
.col-actions { width:160px; min-width:120px; }
.actions { display:flex; gap:var(--spacing-xs); align-items:center; }
.message-preview { max-width:520px; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; white-space:normal; }
.message-preview code { max-width: 350px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bans-table .col-id { width:60px; min-width:50px; }
.bans-table .col-ip { width:220px; min-width:160px; }
.bans-table .col-expires { width:160px; min-width:120px; }
.bans-table .col-active { width:90px; min-width:70px; }
.bans-table .col-actions { width:160px; min-width:120px; }
.bans-table .ip-code { display:inline-block; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-mono); word-break:break-all; }

.row-unread { background: rgba(59,130,246,0.05); }
.row-inactive { background: rgba(239,68,68,0.05); opacity: 0.7; }
.ip-code { display:inline-block; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-mono); word-break:break-all; }

.btn-sm { padding:8px 16px; font-size:0.875rem; }
.badge-read { background: rgba(52,211,153,0.2); color:var(--accent-green); }
.badge-unread { background: rgba(59,130,246,0.2); color:var(--accent-blue); }

/* Card / spacing defaults */
.admin .card { padding: var(--spacing-lg); }
.card { margin-top: var(--spacing-md); margin-bottom: var(--spacing-xl); }

/* Prefer automatic table layout so columns size naturally; allow message column to flex */
.submissions-table { table-layout: auto; }

/* Allow message column to wrap text while keeping other columns compact */
.col-message { white-space: normal; }
.col-email, .col-name { white-space: nowrap; }

/* Hide table captions visually (captions remain in DOM for assistive tech) */
.submissions-table caption, .bans-table caption { display:none; }

/* --------------------------
	Extracted per-page admin styles
	(kept here for provenance and to avoid visual regressions)
	-------------------------- */
/* Source: manage_browser_games.php */
.container { max-width:1200px; margin:0 auto; padding:0 var(--spacing-lg); }
.form-grid { display:grid; grid-template-columns:2fr 1fr; gap:var(--spacing-md); }
.thumbnail-preview { width:80px; height:60px; object-fit:cover; border-radius:var(--radius-sm); border:2px solid var(--border-primary); }
.help-text { font-size:0.875rem; color:var(--text-secondary); margin-top:4px; }

/* Source: manage_contact.php */
.form-grid { display:grid; grid-template-columns:1fr 2fr 1fr; gap:var(--spacing-md); }

/* Source: manage_projects.php */
.project-thumb { width:80px; height:60px; object-fit:cover; border-radius:var(--radius-sm); }
.tags { display:flex; flex-wrap:wrap; gap:4px; }
.tag-small { background:var(--bg-tertiary); padding:2px 8px; border-radius:4px; font-size:0.75rem; color:var(--text-secondary); }

/* Source: manage_settings.php */
.setting-key { font-family:'Courier New', monospace; background:var(--bg-tertiary); padding:4px 8px; border-radius:4px; color:var(--accent-blue); font-weight:600; }

/* Source: manage_stats.php */
.form-inline { display:grid; grid-template-columns:2fr 2fr 1fr auto; gap:var(--spacing-md); align-items:end; }

/* Source: manage_timeline.php */
.year-badge { background:var(--accent-blue); color:#000; padding:6px 14px; border-radius:6px; font-weight:700; font-size:0.95rem; }

/* ===== Extracted per-file inline styles added below ===== */
/* Source: add_project.php */
.form-container { max-width:900px; margin:0 auto var(--spacing-3xl); padding:0 var(--spacing-lg); }
.intro-text { color:var(--text-secondary); margin-bottom:var(--spacing-2xl); font-size:1.05rem; line-height:1.6; }
.form-section { background:var(--bg-secondary); border:1px solid var(--border-primary); border-radius:var(--radius-lg); padding:var(--spacing-2xl); margin-bottom:var(--spacing-xl); }
.form-section h2 { color:var(--accent-blue); font-size:1.5rem; margin-bottom:var(--spacing-lg); padding-bottom:var(--spacing-sm); border-bottom:2px solid var(--border-primary); }
.form-group { margin-bottom:var(--spacing-lg); }
.form-group label { display:block; margin-bottom:var(--spacing-xs); color:var(--text-primary); font-weight:600; font-size:0.95rem; }
.form-group input, .form-group textarea, .form-group select { width:100%; padding:12px 16px; background:var(--bg-tertiary); border:2px solid var(--border-primary); border-radius:var(--radius-sm); color:var(--text-primary); font-family:var(--font-sans); font-size:1rem; transition:all var(--transition-fast); box-sizing:border-box; }
.form-group textarea { min-height:120px; resize:vertical; line-height:1.6; }
.form-group small { color:var(--text-muted); display:block; margin-top:var(--spacing-xs); font-size:0.875rem; }
.form-actions { display:flex; gap:var(--spacing-md); margin-top:var(--spacing-2xl); flex-wrap:wrap; }
.btn { padding:14px 28px; border:none; border-radius:var(--radius-sm); font-weight:700; cursor:pointer; font-size:1rem; text-decoration:none; display:inline-block; transition:all var(--transition-fast); text-transform:uppercase; letter-spacing:0.5px; }
.btn-primary { background:var(--accent-blue); color:#000; }
.btn-primary:hover { background:var(--accent-blue-hover); transform:translateY(-2px); box-shadow:0 4px 12px rgba(52,211,153,0.3); }
.btn-secondary { background:var(--bg-tertiary); color:var(--text-primary); border:1px solid var(--border-primary); }
.success { background:rgba(52,211,153,0.1); border:2px solid var(--accent-green); padding:var(--spacing-lg); border-radius:var(--radius-md); color:var(--accent-green); margin-bottom:var(--spacing-xl); font-weight:600; }
.error { background:rgba(239,68,68,0.1); border:2px solid var(--accent-red); padding:var(--spacing-lg); border-radius:var(--radius-md); color:var(--accent-red); margin-bottom:var(--spacing-xl); font-weight:600; }
.checkbox-group { display:flex; align-items:center; gap:var(--spacing-sm); }
.info-box { background:var(--bg-tertiary); border-left:4px solid var(--accent-blue); padding:var(--spacing-lg); border-radius:var(--radius-sm); margin-bottom:var(--spacing-2xl); }
.info-box h3 { color:var(--accent-blue); margin-bottom:var(--spacing-sm); }
.info-box ol { color:var(--text-secondary); padding-left:var(--spacing-lg); }
.info-box code { color:var(--accent-blue); background:var(--bg-primary); padding:2px 6px; border-radius:3px; font-size:0.9rem; }

/* Source: edit_project.php */
.message { padding:var(--spacing-md); border-radius:var(--radius-sm); margin-bottom:var(--spacing-lg); font-weight:600; }
.message.success { background:rgba(52,211,153,0.1); border:2px solid var(--accent-green); color:var(--accent-green); }
.message.error { background:rgba(239,68,68,0.1); border:2px solid var(--accent-red); color:var(--accent-red); }


/* --------------------------
   Login Page
   Professional authentication interface
   -------------------------- */
body.login-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-xl);
	background: var(--bg-primary);
	position: relative;
}

/* Subtle background gradient like main site hero */
body.login-page::before {
	content: '';
	position: fixed;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
	width: 800px;
	height: 600px;
	background: radial-gradient(circle, rgba(88, 166, 255, 0.06) 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}

.login-wrapper {
	width: 100%;
	max-width: 480px;
	position: relative;
	z-index: 1;
}

.login-header {
	text-align: center;
	margin-bottom: var(--spacing-2xl);
}

.login-header h1 {
	font-size: clamp(2rem, 5vw, 2.75rem);
	margin-bottom: var(--spacing-md);
	font-weight: 700;
}

.login-header .highlight {
	color: var(--accent-blue);
}

.login-header p {
	color: var(--text-secondary);
	font-size: 1rem;
	line-height: 1.6;
}

.login-container {
	background: var(--bg-secondary);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-lg);
	padding: var(--spacing-3xl);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
	position: relative;
	overflow: hidden;
}

.login-container::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
}

.back-link {
	text-align: center;
	margin-top: var(--spacing-2xl);
	padding-top: var(--spacing-xl);
	border-top: 1px solid var(--border-primary);
}

.back-link a {
	color: var(--accent-blue);
	text-decoration: none;
	font-weight: 500;
	transition: color var(--transition-fast);
	font-size: 0.95rem;
}

.back-link a:hover {
	color: var(--accent-blue-hover);
}

/* Responsive */
@media (max-width: 768px) {
	.login-container {
		padding: var(--spacing-2xl);
	}
	
	body.login-page {
		padding: var(--spacing-md);
	}
}

/* End extracted styles */
.admin-card h3::before { content: '●'; font-size: 1rem; }
.admin-card p { color: var(--text-secondary); margin-bottom: var(--spacing-lg); line-height: 1.6; }
.admin-links { display:flex; flex-direction:column; gap:var(--spacing-sm); }
.admin-link { display:block; padding:var(--spacing-md); background:var(--bg-tertiary); border:1px solid var(--border-primary); border-radius:var(--radius-sm); color:var(--text-primary); text-decoration:none; transition: all var(--transition-fast); }
.admin-link.primary { background:var(--accent-blue); border-color:var(--accent-blue); color:#000; }
.admin-link.primary strong { color:#000; }
.admin-link.primary small { color: rgba(0,0,0,0.7); }
.admin-link:hover { border-color: var(--accent-blue); background: var(--bg-elevated); transform: translateX(4px); }

.status-box { padding: var(--spacing-lg); background: var(--bg-tertiary); border-radius: var(--radius-md); border-left: 4px solid var(--border-primary); margin-bottom: var(--spacing-lg); }
.status-ok { border-left-color: var(--accent-green); background: rgba(52,211,153,0.05); }
.status-error { border-left-color: var(--accent-red); background: rgba(239,68,68,0.05); }
.status-icon { margin-right: var(--spacing-sm); }

.stats-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-lg); }
.stat-item { background: var(--bg-elevated); padding: var(--spacing-md); border-radius: var(--radius-sm); border:1px solid var(--border-primary); }
.stat-item strong { display:block; font-size:2rem; color:var(--accent-blue); margin-bottom:4px; }
.stat-item span { color:var(--text-secondary); font-size:0.9rem; }

.quick-actions { display:flex; gap:var(--spacing-md); margin-top:var(--spacing-lg); flex-wrap:wrap; }

/* Table responsiveness reused across admin pages */
.table-responsive { width: 100%; overflow-x: auto; margin-top: var(--spacing-md); }

/* Submissions table */
.submissions-table { width: 100%; border-collapse: collapse; margin-top: var(--spacing-lg); table-layout: auto; }
.submissions-table th, .submissions-table td { padding: var(--spacing-md); text-align: left; border-bottom: 1px solid var(--border-primary); vertical-align: middle; }
.submissions-table th { background: var(--bg-tertiary); color: var(--accent-blue); font-weight: 600; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display:inline-block; max-width:100%; vertical-align:middle; }
.col-date { width: 140px; min-width: 110px; }
.col-name { width: 200px; min-width: 140px; white-space:nowrap; }
.col-email { width: 220px; min-width: 160px; white-space:nowrap; }
.col-message { width: auto; white-space: normal; }
.col-status { width: 110px; min-width: 90px; }
.col-actions { width: 160px; min-width: 120px; }
.actions { display:flex; gap:var(--spacing-xs); align-items:center; }
.message-preview { max-width:520px; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; white-space:normal; }

/* Bans table */
.bans-table { width: 100%; border-collapse: collapse; margin-top: var(--spacing-lg); }
.bans-table th, .bans-table td { padding: var(--spacing-md); text-align:left; border-bottom:1px solid var(--border-primary); vertical-align: middle; }
.bans-table th { background: var(--bg-tertiary); color: var(--accent-blue); font-weight: 600; }
.bans-table .col-id { width:60px; min-width:50px; }
.bans-table .col-ip { width:220px; min-width:160px; }
.bans-table .col-reason { width:auto; }
.bans-table .col-expires { width:160px; min-width:120px; }
.bans-table .col-active { width:90px; min-width:70px; }
.bans-table .col-actions { width:160px; min-width:120px; }
.bans-table .ip-code { display:inline-block; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-mono); word-break:break-all; }
.bans-table .truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; max-width:100%; }
.bans-table .actions form { display:inline-block; margin-left:6px; }

.row-unread { background: rgba(59,130,246,0.05); }

.ip-code { display:inline-block; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-mono); word-break:break-all; }

.btn-sm { padding:8px 16px; font-size:0.875rem; }
.badge-read { background: rgba(52,211,153,0.2); color:var(--accent-green); }
.badge-unread { background: rgba(59,130,246,0.2); color:var(--accent-blue); }

/* Ensure admin cards inherit standard card styles but slightly denser */
.admin .card { padding: var(--spacing-lg); }

/* Ensure cards have a clear vertical gap in admin pages */
.card { margin-top: var(--spacing-md); margin-bottom: var(--spacing-xl); }

/* Table-wrapper spacing so tables don't butt up against cards */
.table-responsive { margin-top: var(--spacing-md); }

/* Prefer automatic table layout so columns size naturally; allow message column to flex */
.submissions-table { table-layout: auto; }
.submissions-table td, .submissions-table th,
.bans-table td, .bans-table th { vertical-align: middle; }

/* Allow message column to wrap text while keeping other columns compact */
.col-message { white-space: normal; }
.col-email, .col-name { white-space: nowrap; }

/* Hide table captions visually (captions remain in DOM for assistive tech if needed) */
.submissions-table caption,
.bans-table caption { display: none; }

/* ===== Extracted per-page admin styles (automatically migrated) ===== */
/* Source: manage_browser_games.php */
/* Styles previously inlined in manage_browser_games.php */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-lg); }
.card { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); padding: var(--spacing-2xl); margin-bottom: var(--spacing-xl); }
.form-group { margin-bottom: var(--spacing-lg); }
.form-group label { display: block; margin-bottom: var(--spacing-xs); color: var(--text-primary); font-weight: 600; }
.form-group input, .form-group textarea { width: 100%; padding: 12px 16px; background: var(--bg-tertiary); border: 2px solid var(--border-primary); border-radius: var(--radius-sm); color: var(--text-primary); box-sizing: border-box; font-family: inherit; }
.form-group textarea { min-height: 100px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--spacing-md); }
.btn { padding: 12px 24px; border: none; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer; transition: all var(--transition-fast); }
.btn-primary { background: var(--accent-blue); color: #000; }
.btn-primary:hover { background: var(--accent-blue-hover); }
.btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-primary); }
.btn-danger { background: var(--accent-red); color: #fff; padding: 6px 12px; font-size: 0.875rem; }
.btn-sm { padding: 6px 12px; font-size: 0.875rem; }
.btn-group { display: flex; gap: var(--spacing-sm); }
table { width: 100%; border-collapse: collapse; margin-top: var(--spacing-lg); }
th, td { padding: var(--spacing-md); text-align: left; border-bottom: 1px solid var(--border-primary); }
th { background: var(--bg-tertiary); color: var(--accent-blue); font-weight: 600; }
th.sortable { cursor: pointer; user-select: none; position: relative; }
th.sortable a { padding-right: 20px; }
th.sortable:hover { background: var(--bg-primary); }
th.sortable::after { content: '⇅'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); opacity: 0.3; font-size: 0.9em; }
th.sorted-asc::after { content: '↑'; opacity: 1; }
th.sorted-desc::after { content: '↓'; opacity: 1; }
.badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 0.85rem; font-weight: 600; }
.badge-active { background: rgba(52, 211, 153, 0.2); color: var(--accent-green); }
.badge-inactive { background: rgba(239, 68, 68, 0.2); color: var(--accent-red); }
.message { padding: var(--spacing-md); border-radius: var(--radius-sm); margin-bottom: var(--spacing-lg); font-weight: 600; }
.message.success { background: rgba(52, 211, 153, 0.1); border: 2px solid var(--accent-green); color: var(--accent-green); }
.message.error { background: rgba(239, 68, 68, 0.1); border: 2px solid var(--accent-red); color: var(--accent-red); }
.actions { display: flex; gap: var(--spacing-xs); }
.actions form { display: inline-block; }
.checkbox-group { display: flex; align-items: center; gap: var(--spacing-sm); }
.checkbox-group input[type="checkbox"] { width: auto; margin: 0; }
.thumbnail-preview { width: 80px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); border: 2px solid var(--border-primary); }
.help-text { font-size: 0.875rem; color: var(--text-secondary); margin-top: 4px; }

/* Source: manage_contact.php */
.form-grid { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: var(--spacing-md); }
.help-text { font-size: 0.875rem; color: var(--text-secondary); margin-top: 4px; }

/* Source: manage_contact_bans.php */
.card { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: 8px; padding: 20px; margin-bottom: 20px; }
.btn { padding: 8px 16px; border-radius: 6px; cursor: pointer; }
.btn-primary { background: var(--accent-blue); color: #000; }
.btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); }

/* Source: manage_projects.php */
.project-thumb { width: 80px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag-small { background: var(--bg-tertiary); padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; color: var(--text-secondary); }

/* Source: manage_settings.php */
.setting-key { font-family: 'Courier New', monospace; background: var(--bg-tertiary); padding: 4px 8px; border-radius: 4px; color: var(--accent-blue); font-weight: 600; }

/* Source: manage_stats.php */
.form-inline { display: grid; grid-template-columns: 2fr 2fr 1fr auto; gap: var(--spacing-md); align-items: end; }

/* Source: manage_timeline.php */
.year-badge { background: var(--accent-blue); color: #000; padding: 6px 14px; border-radius: 6px; font-weight: 700; font-size: 0.95rem; }

/* ===== Extracted per-file inline styles added below ===== */

/* Source: add_project.php */
.form-container { max-width: 900px; margin: 0 auto var(--spacing-3xl); padding: 0 var(--spacing-lg); }
.intro-text { color: var(--text-secondary); margin-bottom: var(--spacing-2xl); font-size: 1.05rem; line-height: 1.6; }
.form-section { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); padding: var(--spacing-2xl); margin-bottom: var(--spacing-xl); }
.form-section h2 { color: var(--accent-blue); font-size: 1.5rem; margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-sm); border-bottom: 2px solid var(--border-primary); }
.form-group { margin-bottom: var(--spacing-lg); }
.form-group label { display: block; margin-bottom: var(--spacing-xs); color: var(--text-primary); font-weight: 600; font-size: 0.95rem; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px 16px; background: var(--bg-tertiary); border: 2px solid var(--border-primary); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-sans); font-size: 1rem; transition: all var(--transition-fast); box-sizing: border-box; }
.form-group textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.form-group small { color: var(--text-muted); display: block; margin-top: var(--spacing-xs); font-size: 0.875rem; }
.form-actions { display: flex; gap: var(--spacing-md); margin-top: var(--spacing-2xl); flex-wrap: wrap; }
.btn { padding: 14px 28px; border: none; border-radius: var(--radius-sm); font-weight: 700; cursor: pointer; font-size: 1rem; text-decoration: none; display: inline-block; transition: all var(--transition-fast); text-transform: uppercase; letter-spacing: 0.5px; }
.btn-primary { background: var(--accent-blue); color: #000; }
.btn-primary:hover { background: var(--accent-blue-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(52, 211, 153, 0.3); }
.btn-secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border-primary); }
.success { background: rgba(52, 211, 153, 0.1); border: 2px solid var(--accent-green); padding: var(--spacing-lg); border-radius: var(--radius-md); color: var(--accent-green); margin-bottom: var(--spacing-xl); font-weight: 600; }
.error { background: rgba(239, 68, 68, 0.1); border: 2px solid var(--accent-red); padding: var(--spacing-lg); border-radius: var(--radius-md); color: var(--accent-red); margin-bottom: var(--spacing-xl); font-weight: 600; }
.checkbox-group { display: flex; align-items: center; gap: var(--spacing-sm); }
.info-box { background: var(--bg-tertiary); border-left: 4px solid var(--accent-blue); padding: var(--spacing-lg); border-radius: var(--radius-sm); margin-bottom: var(--spacing-2xl); }
.info-box h3 { color: var(--accent-blue); margin-bottom: var(--spacing-sm); }
.info-box ol { color: var(--text-secondary); padding-left: var(--spacing-lg); }
.info-box code { color: var(--accent-blue); background: var(--bg-primary); padding: 2px 6px; border-radius: 3px; font-size: 0.9rem; }

/* Source: edit_project.php */
.form-container { max-width: 900px; margin: 0 auto var(--spacing-3xl); padding: 0 var(--spacing-lg); }
.form-section { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); padding: var(--spacing-2xl); margin-bottom: var(--spacing-xl); }
.form-section h2 { color: var(--accent-blue); font-size: 1.5rem; margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-sm); border-bottom: 2px solid var(--border-primary); }
.form-group { margin-bottom: var(--spacing-lg); }
.form-group label { display: block; margin-bottom: var(--spacing-xs); color: var(--text-primary); font-weight: 600; font-size: 0.95rem; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px 16px; background: var(--bg-tertiary); border: 2px solid var(--border-primary); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-sans); font-size: 1rem; transition: all var(--transition-fast); box-sizing: border-box; }
.form-group textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.form-group small { color: var(--text-muted); display: block; margin-top: var(--spacing-xs); font-size: 0.875rem; }
.form-actions { display: flex; gap: var(--spacing-md); margin-top: var(--spacing-2xl); flex-wrap: wrap; }
.message { padding: var(--spacing-md); border-radius: var(--radius-sm); margin-bottom: var(--spacing-lg); font-weight: 600; }
.message.success { background: rgba(52, 211, 153, 0.1); border: 2px solid var(--accent-green); color: var(--accent-green); }
.message.error { background: rgba(239, 68, 68, 0.1); border: 2px solid var(--accent-red); color: var(--accent-red); }

/* Source: admin_login.php */
body.login-page { min-height: 100vh; }
.login-wrapper { width: 100%; max-width: 450px; margin: 0 auto; }
.login-header { text-align: center; margin-bottom: var(--spacing-2xl); }
.login-header h1 { font-size: 2.5rem; margin-bottom: var(--spacing-sm); }
.login-header .highlight { color: var(--accent-blue); }
.login-header p { color: var(--text-secondary); font-size: 1rem; }
.login-container { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); padding: var(--spacing-2xl); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.form-group { margin-bottom: var(--spacing-lg); }
.form-group label { display: block; color: var(--text-primary); font-weight: 600; margin-bottom: var(--spacing-xs); font-size: 0.95rem; }
.form-group input { width: 100%; padding: 14px 16px; background: var(--bg-tertiary); border: 2px solid var(--border-primary); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 16px; box-sizing: border-box; transition: all var(--transition-fast); font-family: var(--font-sans); }
.form-group input:focus { outline: none; border-color: var(--accent-blue); background: var(--bg-elevated); }
.btn-login { width: 100%; background: var(--accent-blue); color: #000; padding: 14px; border: none; border-radius: var(--radius-sm); font-weight: 700; font-size: 16px; cursor: pointer; margin-top: var(--spacing-md); transition: all var(--transition-fast); text-transform: uppercase; letter-spacing: 0.5px; }
.btn-login:hover { background: var(--accent-blue-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(52, 211, 153, 0.3); }
.error { background: rgba(239, 68, 68, 0.1); border: 1px solid var(--accent-red); color: var(--accent-red); padding: var(--spacing-md); border-radius: var(--radius-sm); margin-bottom: var(--spacing-lg); text-align: center; font-weight: 500; }
.info { background: rgba(52, 211, 153, 0.1); border: 1px solid var(--accent-blue); color: var(--accent-blue); padding: var(--spacing-md); border-radius: var(--radius-sm); margin-bottom: var(--spacing-lg); text-align: center; font-weight: 500; }
.back-link { text-align: center; margin-top: var(--spacing-xl); padding-top: var(--spacing-lg); border-top: 1px solid var(--border-primary); }
.back-link a { color: var(--accent-blue); text-decoration: none; font-weight: 500; transition: color var(--transition-fast); }
.back-link a:hover { color: var(--accent-blue-hover); }

/* Submission Detail View */
.submission-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-primary);
}

.submission-detail-title {
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm) 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.submission-detail-meta {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    flex-wrap: wrap;
}

.submission-detail-email {
    color: var(--accent-blue);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

.metadata-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.metadata-card {
    background: var(--bg-tertiary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
}

.metadata-label {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.metadata-value {
    color: var(--text-primary);
    font-size: 1rem;
}

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

.ip-address-code {
    color: var(--accent-blue);
    background: var(--bg-primary);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    display: inline-block;
}

.message-section {
    margin-bottom: var(--spacing-2xl);
}

.message-section-title {
    color: var(--text-primary);
    margin: 0 0 var(--spacing-md) 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.message-content {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 1rem;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.admin-notes-section {
    border-top: 1px solid var(--border-primary);
    padding-top: var(--spacing-xl);
}

.admin-notes-label {
    display: block;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    font-weight: 600;
}

.admin-notes-label-main {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-notes-label-sub {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 400;
    margin-left: var(--spacing-sm);
}

.admin-notes-textarea {
    width: 100%;
    min-height: 120px;
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
}

.detail-actions {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.detail-actions .btn-danger {
    margin-left: auto;
}

/* Additional utility classes for admin pages */

/* Card headers with consistent styling */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.card-header h2 {
    color: var(--accent-blue);
    margin: 0;
}

/* Back link utility */
.back-link-container {
    margin-bottom: var(--spacing-sm);
}

/* Stat number color variations */
.stat-number-blue {
    color: var(--accent-blue);
}

.stat-number-green {
    color: var(--accent-green);
}

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

/* Form inline styles */
.form-inline-flex {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.form-inline-input {
    padding: 8px;
}

.form-inline-input-small {
    padding: 8px;
    width: 140px;
}

.form-inline-input-medium {
    padding: 8px;
    width: 160px;
}

.form-display-inline {
    display: inline;
}

.form-display-inline-block {
    display: inline-block;
}

/* Table utilities */
.table-link {
    color: var(--accent-blue);
    text-decoration: none;
}

.table-empty-state {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--text-secondary);
}

/* Code inline styling */
.code-inline {
    background: var(--bg-primary);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--accent-blue);
}

.code-small {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.code-muted {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Info box variations */
.info-box-config {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--accent-blue);
}

.info-box-config strong {
    color: var(--text-primary);
}

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

/* Stats grid with margin */
.stats-grid-spaced {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

/* Table row highlighting */
.row-blocked {
    background: rgba(239, 68, 68, 0.05);
}

/* Small text utilities */
.text-small {
    font-size: 0.875rem;
}

.text-small-muted {
    color: var(--text-muted);
    margin-left: var(--spacing-md);
}

.text-small-red {
    color: var(--accent-red);
}

/* Badge with margin */
.badge-spaced {
    margin-left: 4px;
}

/* Dynamic color utility (for conditional colors) */
.text-conditional-red {
    color: var(--accent-red);
}

.text-conditional-green {
    color: var(--accent-green);
}

/* Themed confirmation modal */
.modal-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
	z-index: 10000;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-lg);
	animation: fadeIn 0.2s ease-out;
}

.modal-overlay.active {
	display: flex;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

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

.modal-container {
	background: var(--bg-secondary);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-lg);
	max-width: 600px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	animation: slideUp 0.3s ease-out;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--spacing-xl);
	border-bottom: 1px solid var(--border-primary);
}

.modal-title {
	color: var(--accent-blue);
	font-size: 1.5rem;
	margin: 0;
	font-weight: 600;
}

.modal-close {
	background: none;
	border: none;
	color: var(--text-secondary);
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	transition: all var(--transition-fast);
}

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

.modal-body {
	padding: var(--spacing-xl);
}

.modal-message {
	color: var(--text-secondary);
	line-height: 1.6;
	font-size: 1rem;
}

.modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--spacing-md);
	padding: var(--spacing-xl);
	border-top: 1px solid var(--border-primary);
	background: var(--bg-tertiary);
}

/* Legacy modal-confirm classes (for backwards compatibility) */
.modal-confirm {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-confirm.modal-visible {
    display: flex;
}

.modal-confirm-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 520px;
    width: 100%;
    margin: 0 16px;
}

.modal-confirm h3 {
    margin-top: 0;
}

.modal-confirm-title {
    margin-top: 0;
}

.modal-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* Panel that can be hidden */
.panel-hidden {
    display: none;
    align-items: center;
    gap: 8px;
}

.panel-visible {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Button group - attached buttons with no gap */
.btn-group-attached {
    display: flex;
    gap: 0;
}

.btn-group-attached .btn {
    margin: 0;
}

.btn-group-attached .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

.btn-group-attached .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Caption hidden but accessible */
.caption-hidden {
    display: none;
}

/* Margin bottom utilities */
.mb-lg {
    margin-bottom: var(--spacing-lg);
}

.mb-xl {
    margin-bottom: var(--spacing-xl);
}

/* Form group no-margin */
.form-group-no-margin {
    margin: 0;
}

/* Sortable table header link */
.sortable-link {
    color: inherit;
    text-decoration: none;
    display: block;
}

/* Section title with blue accent */
.section-title-blue {
    color: var(--accent-blue);
    margin: 0;
    margin-bottom: 15px;
}

.section-title-blue-mb {
    color: var(--accent-blue);
    margin-bottom: var(--spacing-lg);
}

/* Code secondary (for URLs in tables) */
.code-secondary {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Message cards with colored borders */
.message-success-border {
    border-left: 4px solid var(--accent-green);
}

.message-error-border {
    border-left: 4px solid var(--accent-red);
}

/* Form inputs full width */
.form-input-full {
    width: 100%;
    padding: 8px;
}

.form-input-narrow {
    width: 120px;
    padding: 8px;
}

/* Margin bottom 8px */
.mb-sm-8 {
    margin-bottom: 8px;
}

/* Form inline block with spacing */
.form-inline-block {
    display: inline-block;
}

.form-inline-block-spaced {
    display: inline-block;
    margin-right: 6px;
}

/* Link blue (for inline links in messages/text) */
.link-blue {
    color: var(--accent-blue);
}

/* Text secondary with margin */
.text-secondary-mb-sm {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

/* Text muted (for slugs, metadata) */
.text-muted-small {
    color: var(--text-muted);
}

/* Image placeholder */
.image-placeholder {
    width: 80px;
    height: 60px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

/* Table overflow wrapper */
.table-overflow {
    overflow-x: auto;
}

/* Flex column with gap */
.flex-column-gap {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Stat value large */
.stat-value-large {
    color: var(--accent-blue);
    font-size: 1.2rem;
}

/* Small font size */
.font-small {
    font-size: 0.875rem;
}

/* Form flex wrap */
.form-flex-wrap {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* Min width wrapper */
.min-width-220 {
    min-width: 220px;
}

/* Min width flex */
.min-width-220-flex {
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Label no margin */
.label-no-margin {
    margin: 0;
}

/* Input padding 8px */
.input-padding-8 {
    padding: 8px;
}

.input-padding-8-w160 {
    padding: 8px;
    width: 160px;
}

.input-padding-8-w120 {
    padding: 8px;
    width: 120px;
}

/* Table cell max width */
.table-cell-max300 {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Table cell secondary */
.table-cell-secondary {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Help text with margin */
.help-text-mb-lg {
    margin-bottom: var(--spacing-lg);
}

/* --------------------------
   Page Header Component
   Reusable header for admin pages with title and back button
   Usage: <div class="page-header">
            <div>
              <h1>Page Title</h1>
              <p class="text-muted">Description</p>
            </div>
            <a href="admin.php" class="btn btn-secondary">← Back to Dashboard</a>
          </div>
   -------------------------- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-2xl);
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.page-header h1 {
    margin: 0;
    font-size: 2rem;
}

.page-header .text-muted {
    margin: var(--spacing-sm) 0 0 0;
    color: var(--text-secondary);
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .page-header .btn {
        width: 100%;
        text-align: center;
    }
}

/* End extracted styles */

/* ===== Settings Card Enhanced Styles ===== */
.settings-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    margin-bottom: var(--spacing-xl);
    transition: border-color var(--transition-normal);
}

.settings-card:hover {
    border-color: var(--accent-blue);
}

.card-header-with-icon {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-lg);
}

.setting-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
}

.setting-item:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-blue);
    transform: translateY(-2px);
}

.setting-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
}

.setting-content {
    flex: 1;
}

.setting-label {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.input-with-unit {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.setting-input {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-primary);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: var(--font-mono);
    font-weight: 600;
    transition: all var(--transition-fast);
    max-width: 200px;
}

.setting-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    background: var(--bg-elevated);
}

.input-unit {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.setting-description {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: var(--spacing-sm);
}

.setting-examples {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

.example-tag {
    display: inline-block;
    padding: 4px 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.current-config-display {
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-left: 4px solid var(--accent-blue);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.current-config-display strong {
    color: var(--text-primary);
}

.config-value {
    display: block;
    margin-top: var(--spacing-xs);
    color: var(--text-primary);
}

.config-value strong {
    color: var(--accent-blue);
    font-family: var(--font-mono);
}

/* Toggle Switch Styles */
.toggle-setting {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
}

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

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    border: 2px solid var(--border-primary);
    transition: var(--transition-normal);
    border-radius: 28px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-muted);
    transition: var(--transition-normal);
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.toggle-switch input:checked + .toggle-slider:before {
    background-color: var(--bg-primary);
    transform: translateX(28px);
}

.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.2);
}

.toggle-label-text {
    flex: 1;
}

.toggle-label-text strong {
    color: var(--text-primary);
    font-size: 0.95rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
    
    .setting-item {
        flex-direction: column;
    }
    
    .setting-icon {
        align-self: flex-start;
    }
    
    .input-with-unit {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .setting-input {
        max-width: 100%;
    }
}

/* ===== Professional Contact Settings Styles ===== */
.config-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    transition: border-color var(--transition-normal);
}

.config-section:hover {
    border-color: var(--accent-blue);
}

.config-header {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-primary);
}

.config-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

.config-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-sm);
}

.label-text {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.label-hint {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 400;
}

.input-group {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.form-control {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-primary);
    border: 2px solid var(--border-primary);
    border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: var(--font-mono);
    font-weight: 600;
    transition: all var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-blue);
    background: var(--bg-elevated);
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-primary);
    border-left: none;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.form-help {
    margin-top: var(--spacing-xs);
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.checkbox-wrapper {
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    cursor: pointer;
    margin: 0;
}

.checkbox-input {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-blue);
}

.checkbox-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.checkbox-text strong {
    color: var(--text-primary);
    font-size: 0.95rem;
}

.checkbox-subtext {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.config-current {
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-left: 4px solid var(--accent-blue);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

.config-current strong {
    color: var(--text-primary);
}

.current-value {
    display: block;
    margin-top: 4px;
    color: var(--text-primary);
}

.current-value strong {
    color: var(--accent-blue);
    font-family: var(--font-mono);
}

.btn-block {
    width: 100%;
    text-align: center;
}

/* --------------------------
   Filter Tabs (Professional Tabs)
   -------------------------- */
.filter-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    padding: 4px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
    width: fit-content;
}

.filter-tab {
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all var(--transition-fast);
    white-space: nowrap;
    border: 1px solid transparent;
}

.filter-tab:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.filter-tab.active {
    background: var(--accent-blue);
    color: #000;
    font-weight: 600;
    border-color: var(--accent-blue);
}

/* --------------------------
   IP Bans Form - Professional Input Groups
   -------------------------- */
.ban-form-grid {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr auto;
    gap: var(--spacing-md);
    align-items: start;
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
}

.ban-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.ban-form-field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.ban-form-field input[type="text"],
.ban-form-field input[type="number"] {
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all var(--transition-fast);
}

.ban-form-field input[type="text"]:focus,
.ban-form-field input[type="number"]:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
}

.ban-form-field input::placeholder {
    color: var(--text-muted);
}

.ban-form-field input[type="number"] {
    font-family: var(--font-mono);
}

.ban-form-submit {
    align-self: center;
    padding: var(--spacing-md) var(--spacing-xl);
    margin-top: 5px; /* Offset for label height */
}

/* Responsive - Stack on mobile */
@media (max-width: 768px) {
    .ban-form-grid {
        grid-template-columns: 1fr;
    }
    
    .ban-form-submit {
        align-self: stretch;
    }
    
    .filter-tabs {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .config-section {
        padding: var(--spacing-lg);
    }
    
    .input-group {
        flex-direction: column;
    }
    
    .form-control {
        border-right: 2px solid var(--border-primary);
        border-radius: var(--radius-sm);
    }
    
    .input-group-text {
        border-left: 2px solid var(--border-primary);
        border-radius: var(--radius-sm);
        border-top: none;
    }
}

/* --------------------------
   GitHub Integration - Professional Tabs & Components
   -------------------------- */

/* GitHub Navigation Tabs */
.github-tabs {
    display: flex;
    gap: var(--spacing-xs);
    padding: 4px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
    margin-bottom: var(--spacing-2xl);
    width: fit-content;
}

.github-tab {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    text-decoration: none;
    color: var(--text-secondary);
    background: transparent;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
    border: 1px solid transparent;
}

.github-tab:hover {
    color: var(--text-primary);
    background: var(--bg-elevated);
}

.github-tab.active {
    color: #000;
    background: var(--accent-blue);
    font-weight: 600;
    border-color: var(--accent-blue);
}

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

/* Setup Warning Cards */
.setup-warning {
    border: 2px solid var(--accent-yellow) !important;
    background: rgba(210, 153, 34, 0.05) !important;
}

.setup-warning h2 {
    color: var(--text-primary);
    margin: 0 0 var(--spacing-md) 0;
}

.setup-warning p {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
}

/* Setup Instructions List */
.setup-instructions {
    line-height: 2;
    color: var(--text-secondary);
}

.setup-instructions li {
    margin-bottom: var(--spacing-sm);
}

.setup-instructions ul {
    margin-top: var(--spacing-sm);
    margin-left: var(--spacing-xl);
}

.setup-instructions a {
    color: var(--accent-blue);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.setup-instructions a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

/* GitHub Settings Form */
.github-settings-form .settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.setting-input {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all var(--transition-fast);
}

.setting-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
}

.setting-input::placeholder {
    color: var(--text-muted);
}

.setting-description {
    margin-top: var(--spacing-xs);
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.setting-description a {
    color: var(--accent-blue);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.setting-description a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

.input-with-unit {
    display: flex;
    gap: 0;
}

.input-with-unit .setting-input {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    border-right: none;
}

.input-unit {
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 2px solid var(--border-primary);
    border-left: none;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.setting-examples {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    flex-wrap: wrap;
}

.example-tag {
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.toggle-setting {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

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

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    border: 2px solid var(--border-primary);
    transition: var(--transition-normal);
    border-radius: 28px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: var(--text-muted);
    transition: var(--transition-normal);
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
    background-color: #000;
}

.toggle-label-text {
    flex: 1;
}

.toggle-label-text strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 4px;
}

.form-actions {
    margin-top: var(--spacing-xl);
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* GitHub Stats Grid */
.github-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.github-stat {
    padding: var(--spacing-lg);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
    text-align: center;
    transition: all var(--transition-normal);
}

.github-stat:hover {
    border-color: var(--accent-blue);
    transform: translateY(-2px);
}

.github-stat .stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.github-stat .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-blue);
    font-family: var(--font-mono);
}

/* GitHub Repos Grid */
.github-repos-grid {
    display: grid;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.github-repo-card {
    padding: var(--spacing-xl);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
}

.github-repo-card:hover {
    border-color: var(--accent-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.repo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    gap: var(--spacing-md);
}

.repo-name {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
}

.repo-language {
    padding: 4px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--accent-blue);
    font-family: var(--font-mono);
    white-space: nowrap;
}

.repo-description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: var(--spacing-md) 0;
    line-height: 1.6;
}

.repo-stats {
    display: flex;
    gap: var(--spacing-lg);
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-primary);
}

.repo-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
}

/* GitHub Activity List */
.github-activity-list {
    display: grid;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.activity-item {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-tertiary);
    border-left: 3px solid var(--accent-blue);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.activity-item:hover {
    background: var(--bg-elevated);
    border-left-color: var(--accent-green);
}

.activity-text {
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
    line-height: 1.5;
}

.activity-time {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* Test Status Messages */
.test-success {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(63, 185, 80, 0.1);
    border: 2px solid var(--accent-green);
    border-radius: var(--radius-sm);
    color: var(--accent-green);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.test-error {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(248, 81, 73, 0.1);
    border: 2px solid var(--accent-red);
    border-radius: var(--radius-sm);
    color: var(--accent-red);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* --------------------------
   Traffic Analytics - Professional Components
   -------------------------- */

/* Date Range Selector */
.traffic-date-selector {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    padding: var(--spacing-lg);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
}

.date-selector-label {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 1rem;
}

.date-selector-buttons {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.date-range-display {
    margin-left: auto;
    color: var(--text-primary);
    font-size: 0.9rem;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-weight: 600;
}

/* Traffic Stats Grid */
.traffic-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

.stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    text-align: center;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.stat-card:hover {
    border-color: var(--accent-blue);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

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

.stat-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
    line-height: 1;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-blue);
    margin-bottom: var(--spacing-sm);
    font-family: var(--font-mono);
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Traffic Grid - 2 Column Layout */
.traffic-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

/* Device Breakdown */
.device-breakdown {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-primary);
}

.device-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 0;
    transition: all var(--transition-fast);
}

.device-stat:hover {
    padding-left: var(--spacing-sm);
}

.device-label {
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
}

.device-percent {
    color: var(--accent-blue);
    font-size: 1.25rem;
    font-family: var(--font-mono);
    font-weight: 700;
}

/* Browser Breakdown */
.browser-breakdown {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-primary);
}

.browser-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) 0;
    transition: all var(--transition-fast);
}

.browser-stat:hover {
    padding-left: var(--spacing-sm);
}

.browser-label {
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 500;
}

.browser-views {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-weight: 600;
}

/* Data Tables */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-lg);
}

.data-table thead {
    background: var(--bg-tertiary);
}

.data-table th {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    color: var(--accent-blue);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-primary);
}

.data-table td {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-primary);
    color: var(--text-primary);
}

.data-table tbody tr {
    transition: background var(--transition-fast);
}

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

.data-table code {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    padding: 2px 6px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

/* Max height constraints for specific traffic tables */
.table-scrollable {
    display: block;
    max-height: 500px;
}

.table-scrollable thead,
.table-scrollable tbody {
    display: block;
}

.table-scrollable tbody {
    overflow-y: auto;
    max-height: 450px;
}

.table-scrollable thead th {
    background: var(--bg-tertiary);
}

.table-scrollable tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* Sortable table headers */
.data-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: var(--spacing-xl);
    transition: background var(--transition-fast);
}

.data-table th.sortable:hover {
    background: var(--bg-elevated);
}

.data-table th.sortable::after {
    content: '⇅';
    position: absolute;
    right: var(--spacing-md);
    opacity: 0.3;
    font-size: 0.8rem;
}

.data-table th.sortable.sorted-asc::after {
    content: '▲';
    opacity: 1;
    color: var(--accent-blue);
}

.data-table th.sortable.sorted-desc::after {
    content: '▼';
    opacity: 1;
    color: var(--accent-blue);
}

/* Badge for device types, status, etc. */
.badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-transform: capitalize;
    color: var(--text-primary);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .github-tabs {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .traffic-date-selector {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .date-range-display {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
    
    .traffic-grid-2 {
        grid-template-columns: 1fr;
    }
    
    .traffic-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .form-actions .btn {
        width: 100%;
    }
}

/* --------------------------
   Tab System for Project Details
   -------------------------- */
.tab-content {
    animation: fadeIn 0.2s ease-in;
}

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

/* Form Actions Improvements */
.form-actions {
    display: flex;
    gap: var(--spacing-md);
}

.form-actions .btn {
    flex: 0 0 auto;
}

/* --------------------------
   IP Address Table Styles
   -------------------------- */
.ip-address {
    color: var(--accent-blue);
    font-weight: 600;
    font-family: var(--font-mono);
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ip-address-cell {
    min-width: 200px;
    max-width: 250px;
    width: 250px;
}

.cf-badge {
    background: var(--accent-yellow);
    color: #000;
    margin-left: var(--spacing-xs);
    font-size: 0.75rem;
}

.badge-device {
    margin-right: var(--spacing-xs);
}

.browser-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------
   Traffic Analytics Specific Styles
   Extracted from manage_traffic.php inline styles
   -------------------------- */

/* Date selector form */
.date-range-form {
    display: grid;
    grid-template-columns: auto auto auto auto 1fr auto;
    gap: var(--spacing-md);
    align-items: end;
    background: var(--bg-tertiary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
}

.date-range-form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.date-range-form-input,
.date-range-form-select {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
}

.date-range-form-input:focus,
.date-range-form-select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
}

.date-range-display {
    color: var(--text-muted);
    font-size: 0.875rem;
    text-align: right;
}

.date-range-display strong {
    color: var(--text-primary);
}

.date-range-meta {
    color: var(--text-secondary);
}

/* Traffic chart controls */
.chart-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.chart-controls h2 {
    margin: 0;
}

.chart-buttons {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.chart-info-footer {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.chart-info-text strong {
    color: var(--text-primary);
}

.chart-toggles {
    display: flex;
    gap: var(--spacing-md);
}

.chart-toggle-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-secondary);
    cursor: pointer;
}

/* Device breakdown */
.device-breakdown {
    margin-top: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.device-stat,
.browser-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.device-label,
.browser-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.device-percent,
.browser-views {
    color: var(--text-primary);
    font-weight: 600;
}

.browser-breakdown {
    margin-top: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Filter status bar (sticky bottom) */
.filter-status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-primary);
    padding: var(--spacing-md) var(--spacing-xl);
    z-index: 50;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
}

.filter-status-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.filter-controls-title {
    font-weight: 600;
    color: var(--text-primary);
}

.filter-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.filter-checkbox-label:hover {
    border-color: var(--accent-blue);
}

.filter-checkbox-input {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-blue);
}

.filter-checkbox-text {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.filter-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

.filter-status {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.filter-status-text {
    color: var(--accent-yellow);
}

.filter-status-count {
    margin-left: var(--spacing-sm);
    color: var(--text-secondary);
}

/* Spacer for sticky bar */
.sticky-bar-spacer {
    height: 80px;
}

/* Table data cell alignment helpers */
.text-center {
    text-align: center;
}

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

/* Responsive adjustments for traffic page */
@media (max-width: 1024px) {
    .date-range-form {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-md);
    }
    
    .date-range-display {
        grid-column: 1 / -1;
        text-align: left;
        margin-top: var(--spacing-md);
    }
}

@media (max-width: 768px) {
    .date-range-form {
        grid-template-columns: 1fr;
    }
    
    .filter-status-container {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: flex-start;
    }
    
    .filter-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
        width: 100%;
    }
    
    .chart-controls {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
    
    .chart-info-footer {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: flex-start;
    }
}

/* ==========================
   Common utility classes for removing inline styles
   ========================== */

/* Spacing utilities */
.mb-lg {
    margin-bottom: var(--spacing-lg);
}

.mb-xl {
    margin-bottom: var(--spacing-xl);
}

.mb-2xl {
    margin-bottom: var(--spacing-2xl);
}

/* Color/code utilities */
.code-blue {
    color: var(--accent-blue);
}

.code-green {
    color: var(--accent-green);
}

/* Table cell width helpers */
.td-w-80 {
    width: 80px;
}

.td-w-100 {
    width: 100px;
}

.td-w-125 {
    width: 125px;
}

.td-w-155 {
    width: 155px;
}

.td-w-190 {
    width: 190px;
}

.td-w-200 {
    width: 200px;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-muted);
}

/* Position relative */
.pos-relative {
    position: relative;
}

/* Canvas height constraints */
.canvas-chart {
    max-height: 400px;
}

.canvas-small-chart {
    max-height: 300px;
}

/* Table header/cell utilities */
.th-center {
    text-align: center;
}

.th-w-80 {
    text-align: center;
    width: 80px;
}

.th-w-100 {
    text-align: center;
    width: 100px;
}

.th-w-125 {
    text-align: center;
    width: 125px;
}

.th-w-155 {
    text-align: center;
    width: 155px;
}

.th-w-190 {
    text-align: center;
    width: 190px;
}

.th-w-200 {
    text-align: center;
    width: 200px;
}

/* Additional text color utilities */
.text-primary {
    color: var(--text-primary);
}

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

.text-muted {
    color: var(--text-muted);
}

/* Code snippet page utilities */
.btn-group-header {
    display: flex;
    gap: var(--spacing-md);
}

.snippet-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.snippet-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
}

.snippet-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: var(--spacing-md);
}

.snippet-title {
    color: var(--accent-blue);
    margin-bottom: var(--spacing-xs);
}

.snippet-meta {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 0;
}

.snippet-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.snippet-description {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin-bottom: var(--spacing-md);
}

.snippet-preview {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    padding: var(--spacing-md);
    overflow-x: auto;
}

.snippet-pre {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-primary);
    white-space: pre;
}

/* Form input/textarea utilities */
.form-input-full {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 1rem;
}

.form-textarea {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
}

.form-textarea-code {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: var(--font-mono);
    line-height: 1.6;
    resize: vertical;
}

.form-textarea-special {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
}

.form-grid-4 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.form-group-no-margin {
    margin-bottom: 0;
}

.form-hint {
    color: var(--text-muted);
    font-size: 0.8125rem;
    margin-top: var(--spacing-xs);
    display: block;
}

.form-actions-flex {
    display: flex;
    gap: var(--spacing-md);
}

/* Button size utilities */
.btn-sm-custom {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
}

.btn-danger {
    background: var(--accent-red);
    border-color: var(--accent-red);
}

.inline-form {
    display: inline;
}

/* Project details page utilities */
.heading-blue {
    color: var(--accent-blue);
    margin-bottom: var(--spacing-lg);
}

.heading-green {
    color: var(--accent-green);
    margin-bottom: var(--spacing-lg);
}

.heading-yellow {
    color: var(--accent-yellow);
    margin-bottom: var(--spacing-lg);
}

.heading-blue-md {
    color: var(--accent-blue);
    margin-bottom: var(--spacing-md);
}

.heading-green-md {
    color: var(--accent-green);
    margin-bottom: var(--spacing-md);
}

.heading-yellow-md {
    color: var(--accent-yellow);
    margin-bottom: var(--spacing-md);
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-input {
    margin-right: var(--spacing-sm);
}

.preview-box {
    background: var(--bg-tertiary);
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent-blue);
}

.preview-text {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.preview-strong {
    color: var(--accent-blue);
}

.preview-link {
    color: var(--accent-blue);
}

.section-description {
    color: var(--text-muted);
    margin-bottom: var(--spacing-lg);
    font-size: 0.9375rem;
}

.tab-content-hidden {
    display: none;
}

/* Margin bottom utilities (extend existing) */
.mb-2xl {
    margin-bottom: var(--spacing-2xl);
}

/* User management page utilities */
.setup-description {
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
}

.stat-value-green {
    color: var(--accent-green);
}

.stat-value-blue {
    color: #58a6ff;
}

.stat-value-yellow {
    color: #d29922;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.card-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.card-icon {
    font-size: 1.5rem;
}

.card-title-no-margin {
    margin: 0;
}

.form-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.input-disabled {
    background: var(--bg-tertiary);
    cursor: not-allowed;
}

.select-full {
    width: 100%;
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
}

.badge-you {
    margin-left: var(--spacing-sm);
}

/* ===========================
   User Management - Table Cells
   =========================== */
.table-cell-stacked {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.table-text-small {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.table-text-muted {
    color: var(--text-muted);
}

.table-actions-row {
    display: flex;
    gap: var(--spacing-xs);
}

.form-inline {
    display: inline;
}

.empty-state-title {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

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

/* ===========================
   CloudFlare IPs - Warning Card
   =========================== */
.card-warning {
    border-left: 4px solid var(--accent-yellow);
}

.warning-title {
    color: var(--accent-yellow);
    margin-bottom: var(--spacing-md);
}

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

/* ===========================
   CloudFlare IPs - Stat Cards
   =========================== */
.stats-grid-cf {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.stat-card-cf {
    padding: var(--spacing-lg);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.stat-card-cf-blue {
    border-left: 4px solid var(--accent-blue);
}

.stat-card-cf-green {
    border-left: 4px solid var(--accent-green);
}

.stat-card-cf-purple {
    border-left: 4px solid var(--accent-purple);
}

.stat-card-cf-yellow {
    border-left: 4px solid var(--accent-yellow);
}

.stat-cf-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
}

.stat-cf-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.stat-cf-subtitle {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: var(--spacing-xs);
}

.stat-cf-status-fresh {
    color: var(--accent-green);
}

.stat-cf-status-valid {
    color: var(--accent-blue);
}

.stat-cf-status-stale {
    color: var(--accent-yellow);
}

.stat-cf-status-expired {
    color: var(--accent-red);
}

/* ===========================
   CloudFlare IPs - IP Lists
   =========================== */
.ip-section-header {
    background: var(--bg-tertiary);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
}

.ip-count-number {
    color: var(--text-primary);
    font-size: 1.5rem;
}

.ip-count-label {
    color: var(--text-secondary);
    margin-left: var(--spacing-sm);
}

.ip-list-container {
    max-height: 400px;
    overflow-y: auto;
    background: var(--bg-secondary);
    padding: var(--spacing-md);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-primary);
}

.ip-list-item {
    padding: var(--spacing-xs) 0;
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

.ip-list-item-ipv4 {
    color: var(--accent-blue);
}

.ip-list-item-ipv6 {
    color: var(--accent-green);
}

.ip-list-empty {
    color: var(--text-muted);
    text-align: center;
    padding: var(--spacing-xl);
}

/* ===========================
   CloudFlare IPs - Cache Info Table
   =========================== */
.td-label {
    font-weight: 600;
    width: 200px;
}

.code-path {
    color: var(--accent-blue);
}

.text-success {
    color: var(--accent-green);
}

.text-error {
    color: var(--accent-red);
}

/* ===========================
   CloudFlare IPs - How It Works Section
   =========================== */
.info-box-blue {
    padding: var(--spacing-lg);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--accent-blue);
}

.info-box-title {
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.info-list {
    color: var(--text-secondary);
    line-height: 1.8;
    padding-left: var(--spacing-xl);
}

.info-list strong {
    color: var(--text-primary);
}

.info-note {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.info-note-title {
    color: var(--accent-yellow);
}

.info-note-text {
    color: var(--text-muted);
    margin-top: var(--spacing-sm);
    margin-bottom: 0;
}

.link-no-decoration {
    text-decoration: none;
}

/* ===========================
   Admin Dashboard - Welcome Banner
   =========================== */
.welcome-banner {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

.welcome-title {
    margin: 0 0 var(--spacing-sm) 0;
}

.welcome-text {
    margin: 0;
    color: var(--text-secondary);
}

.dashboard-grid-spaced {
    margin-top: var(--spacing-3xl);
}

/* ===========================
   Admin Header - Login Info
   =========================== */
.header-logo-tilde {
    color: var(--accent-blue);
}

.header-user-info {
    color: var(--text-secondary);
}

.header-user-label {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.header-username {
    color: var(--accent-blue);
    font-family: var(--font-mono);
    margin-left: 6px;
}

/* ===========================
   Edit Project - Page Header
   =========================== */
.edit-project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-2xl);
}

/* ===========================
   GitHub Settings - Description
   =========================== */
.setting-description-block {
    display: block;
    margin-top: 4px;
}

/* ===========================
   Contact Submissions - Utilities
   =========================== */
.btn-group-mb {
    margin-bottom: var(--spacing-lg);
}

.small-muted-text {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.info-text-secondary {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
}

.grid-auto-400 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-xl);
}