:root{
	/* Professional Color System */
	--bg: #f8fafc;
	--bg-secondary: #f1f5f9;
	--bg-tertiary: #e2e8f0;
	--paper: #ffffff;
	--text: #0f172a;
	--text-secondary: #475569;
	--text-muted: #64748b;
	--text-disabled: #94a3b8;
	--border: #e2e8f0;
	--border-strong: #cbd5e1;
	--border-light: #f1f5f9;
	
	/* Brand Colors - Professional Blue */
	--primary: #2563eb;
	--primary-hover: #1d4ed8;
	--primary-active: #1e40af;
	--primary-light: #dbeafe;
	--primary-lighter: #eff6ff;
	--primary-dark: #1e3a8a;
	
	/* Semantic Colors */
	--success: #16a34a;
	--success-hover: #15803d;
	--success-light: #dcfce7;
	--success-lighter: #f0fdf4;
	
	--danger: #dc2626;
	--danger-hover: #b91c1c;
	--danger-light: #fecaca;
	--danger-lighter: #fef2f2;
	
	--warning: #ea580c;
	--warning-hover: #c2410c;
	--warning-light: #fed7aa;
	--warning-lighter: #fff7ed;
	
	--info: #0891b2;
	--info-hover: #0e7490;
	--info-light: #cffafe;
	--info-lighter: #ecfeff;
	
	/* Judge/Court Colors */
	--judge: #7c3aed;
	--judge-hover: #6d28d9;
	--judge-light: #ede9fe;
	--judge-lighter: #f5f3ff;
	
	/* Elevation System */
	--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	
	/* Border Radius Scale */
	--radius-xs: 4px;
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-2xl: 20px;
	--radius-full: 9999px;
	
	/* Spacing Scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	
	/* Typography Scale */
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;
	
	/* Transitions */
	--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
	
	/* Z-index Scale */
	--z-base: 0;
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-fixed: 1030;
	--z-modal-backdrop: 1040;
	--z-modal: 1050;
	--z-popover: 1060;
	--z-tooltip: 1070;
}

html, body { 
	height: 100%; 
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	background: var(--bg);
	color: var(--text);
	padding-top: 64px;
	line-height: 1.6;
	font-size: 15px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Typography Scale */
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 700;
	line-height: 1.2;
	color: var(--text);
}

h1 { font-size: 2rem; letter-spacing: -0.025em; }
h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
h3 { font-size: 1.25rem; letter-spacing: -0.015em; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

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

a {
	color: var(--primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}

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

.container { 
	max-width: 960px; 
	margin: var(--space-6) auto; 
	background: var(--paper); 
	padding: var(--space-6); 
	border-radius: var(--radius-lg); 
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition-base);
}

.container:hover {
	box-shadow: var(--shadow-md);
}

label { 
	display: block; 
	margin-top: var(--space-4); 
	margin-bottom: var(--space-2);
	font-size: var(--text-sm); 
	font-weight: 600;
	color: var(--text); 
}

input, select, textarea { 
	width: 100%; 
	padding: 10px 14px; 
	margin-top: var(--space-1);
	border: 1.5px solid var(--border); 
	border-radius: var(--radius-md); 
	background: #fff; 
	outline: none; 
	transition: all var(--transition-base);
	font-size: var(--text-base);
	color: var(--text);
	font-family: inherit;
}

input:hover, select:hover, textarea:hover {
	border-color: var(--border-strong);
}

input:focus, select:focus, textarea:focus { 
	border-color: var(--primary); 
	box-shadow: 0 0 0 3px var(--primary-lighter);
	background: #fff;
}

input:disabled, select:disabled, textarea:disabled {
	background: var(--bg-secondary);
	cursor: not-allowed;
	opacity: 0.6;
}

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

/* Modern Checkbox & Radio */
input[type="checkbox"], input[type="radio"] {
	width: auto;
	margin-right: var(--space-2);
	cursor: pointer;
	accent-color: var(--primary);
}

/* Button sizing normalization */
button, .btn { 
	display: inline-flex; 
	align-items: center; 
	justify-content: center;
	gap: var(--space-2); 
	border: none; 
	border-radius: var(--radius-md); 
	padding: 8px 14px; 
	font-weight: 600; 
	font-size: var(--text-sm);
	cursor: pointer; 
	transition: all var(--transition-base);
	text-decoration: none;
	font-family: inherit;
	white-space: nowrap;
	position: relative;
	overflow: hidden;
	line-height: 1.35;
}

button:disabled, .btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Primary Button - Modern solid with hover lift */
.btn-primary { 
	background: var(--primary);
	color: #fff;
	box-shadow: var(--shadow-sm);
}

.btn-primary:hover { 
	background: var(--primary-hover);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.btn-primary:active {
	transform: translateY(0);
	box-shadow: var(--shadow-sm);
}

/* Success Button */
.btn-success { 
	background: var(--success);
	color: #fff;
	box-shadow: var(--shadow-sm);
}

.btn-success:hover { 
	background: var(--success-hover);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

/* Danger Button */
.btn-danger { 
	background: var(--danger);
	color: #fff;
	box-shadow: var(--shadow-sm);
}

.btn-danger:hover { 
	background: var(--danger-hover);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

/* Secondary Button */
.btn-secondary { 
	background: var(--text-secondary);
	color: #fff;
	box-shadow: var(--shadow-sm);
}

.btn-secondary:hover { 
	background: var(--text);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

/* Ghost Button - Minimal style */
.btn-ghost { 
	background: transparent;
	color: var(--text);
	border: 1px solid var(--border);
}

.btn-ghost:hover { 
	background: var(--bg-secondary);
	border-color: var(--border-strong);
}

/* Outline Button */
.btn-outline {
	background: transparent;
	color: var(--primary);
	border: 1.5px solid var(--primary);
}

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

/* Loading State */
.btn-loading {
	position: relative;
	color: transparent;
	pointer-events: none;
}

.btn-loading::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	top: 50%;
	left: 50%;
	margin-left: -8px;
	margin-top: -8px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
}

@media (max-width: 640px) {
	.category-action-buttons {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.category-action-buttons .btn {
		display: inline-flex;
		width: 100%;
		flex: 0 0 auto;
		min-width: 0;
		justify-content: center;
		align-items: center;
		text-align: center;
		white-space: normal;
		line-height: 1.2;
		padding: 10px 12px;
	}
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* Navigation Links */
nav a { 
	margin-right: var(--space-4); 
	color: var(--text); 
	text-decoration: none;
	font-weight: 500;
	transition: color var(--transition-fast);
}

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

/* Error Message */
#msg { 
	color: var(--danger); 
	margin-top: var(--space-4);
	padding: var(--space-3) var(--space-4);
	background: var(--danger-lighter);
	border-left: 3px solid var(--danger);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	font-weight: 500;
}

/* Modern Topbar */
.app-navbar { 
	position: fixed; 
	top: 0; 
	left: 0; 
	right: 0; 
	height: 64px; 
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border-light); 
	display: flex; 
	align-items: center; 
	z-index: 50;
	box-shadow: var(--shadow-sm);
}

.app-navbar .inner { 
	max-width: 1400px; 
	margin: 0 auto; 
	padding: 0 var(--space-lg); 
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	width: 100%; 
}

.brand { 
	display: flex; 
	align-items: center; 
	gap: 10px; 
	font-weight: 700;
	font-size: 18px;
	color: var(--text);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.brand:hover {
	color: var(--primary);
}

.brand .dot { 
	width: 10px; 
	height: 10px; 
	background: var(--primary);
	border-radius: 50%; 
	display: inline-block;
	box-shadow: 0 0 8px rgba(37, 99, 235, 0.5);
	animation: pulse 2s ease-in-out infinite;
}

.brand-logo {
	width: 22px;
	height: 22px;
	object-fit: contain;
	display: inline-block;
}

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 36px;
	padding: 0 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: #fff;
	color: var(--text);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.nav-toggle:hover {
	background: var(--bg-secondary);
}

.nav-actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
}

@keyframes pulse {
	0%, 100% { 
		opacity: 1;
		transform: scale(1);
	}
	50% { 
		opacity: 0.7;
		transform: scale(0.92);
	}
}

/* Modern Cards */
.card { 
	background: var(--paper); 
	border: 1px solid var(--border); 
	border-radius: var(--radius-lg); 
	padding: var(--space-6); 
	box-shadow: var(--shadow-sm);
	transition: all var(--transition-base);
}

.card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.card-sm { 
	padding: var(--space-4); 
	border-radius: var(--radius-md); 
}

/* Card Header */
.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--border-light);
}

.card-title {
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--text);
	margin: 0;
}

.card-body {
	color: var(--text-secondary);
	line-height: 1.6;
}

.card-footer {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--border-light);
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}

/* Modern Tables */
.table { 
	width: 100%; 
	border-collapse: collapse; 
	table-layout: fixed;
	font-size: var(--text-sm);
}

.table th, .table td { 
	border: 1px solid var(--border-light); 
	padding: 8px 10px; 
	vertical-align: top; 
	word-break: break-word;
	transition: background var(--transition-fast);
}

.table thead th { 
	background: var(--bg-secondary);
	text-align: left; 
	font-size: var(--text-xs); 
	font-weight: 700;
	color: var(--text); 
	letter-spacing: 0.05em; 
	text-transform: uppercase;
	border-bottom: 2px solid var(--border-strong);
}

.table tbody tr { 
	background: #fff;
	transition: all var(--transition-fast);
}

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

.table tbody tr:nth-child(even) { 
	background: var(--bg);
}

.table tbody tr:nth-child(even):hover {
	background: var(--bg-secondary);
}

.table-wrap { 
	width: 100%; 
	overflow-x: auto; 
	-webkit-overflow-scrolling: touch; 
	border: 1px solid var(--border); 
	border-radius: var(--radius-lg); 
	background: #fff;
	box-shadow: var(--shadow-sm);
}

/* Modern Badges */
.badge { 
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	border-radius: var(--radius-full); 
	padding: 4px 12px; 
	font-size: 12px;
	font-weight: 600;
	background: var(--primary-light);
	color: var(--primary-dark);
	border: 1px solid transparent;
	transition: all var(--transition-fast);
}

.badge:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}

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

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

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

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

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

/* Utility Classes */
.truncate { 
	white-space: nowrap; 
	overflow: hidden; 
	text-overflow: ellipsis; 
	display: block; 
	max-width: 100%; 
}

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

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

.spacer { 
	height: var(--space-lg); 
}

.grid { 
	display: grid; 
	gap: var(--space-md); 
}

/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--space-sm); }
.gap-4 { gap: var(--space-md); }

/* Spacing utilities */
.mt-2 { margin-top: var(--space-sm); }
.mt-4 { margin-top: var(--space-md); }
.mb-2 { margin-bottom: var(--space-sm); }
.mb-4 { margin-bottom: var(--space-md); }
.p-2 { padding: var(--space-sm); }
.p-4 { padding: var(--space-md); }

/* Width utilities */
.w-full { width: 100%; }
.w-60 { width: 15rem; }

/* Text utilities */
.text-center { text-align: center; }
.text-right { text-align: right; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }

/* Background utilities */
.bg-primary { background: var(--primary); }
.bg-success { background: var(--success); }
.bg-danger { background: var(--danger); }
.bg-white { background: #fff; }

/* Border utilities */
.border { border: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Modern Collapsible Sections */
.collapsible { 
	border: 1px solid var(--border); 
	border-radius: var(--radius-lg); 
	padding: var(--space-md); 
	background: #fff;
	transition: all var(--transition-base);
	box-shadow: var(--shadow-sm);
}

.collapsible:hover {
	box-shadow: var(--shadow-md);
	border-color: var(--muted);
}

.collapsible + .collapsible { 
	margin-top: var(--space-md); 
}

.order-header { 
	display: flex; 
	align-items: center; 
	gap: var(--space-md); 
	cursor: pointer; 
	user-select: none;
	padding: var(--space-sm);
	border-radius: var(--radius-md);
	transition: background var(--transition-fast);
}

.order-header:hover { 
	background: var(--bg-secondary);
}

.order-header h2 { 
	margin: 0; 
	font-size: 18px;
	font-weight: 600;
}

.collapsible .content { 
	margin-top: var(--space-md);
	padding-top: var(--space-md);
	border-top: 1px solid var(--border-light);
}

/* Details/Summary styling */
details {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	background: #fff;
	transition: all var(--transition-base);
}

details:hover {
	box-shadow: var(--shadow-sm);
}

details[open] {
	box-shadow: var(--shadow-md);
}

summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--text);
	padding: var(--space-sm);
	border-radius: var(--radius-sm);
	transition: background var(--transition-fast);
	list-style: none;
}

summary::-webkit-details-marker {
	display: none;
}

summary:hover {
	background: var(--bg-secondary);
}

summary::before {
	content: '▶';
	display: inline-block;
	margin-right: var(--space-sm);
	transition: transform var(--transition-base);
}

details[open] summary::before {
	transform: rotate(90deg);
}

/* Modern Forms Layout */
.form-row { 
	display: flex; 
	flex-wrap: wrap; 
	gap: var(--space-md); 
	align-items: flex-end; 
}

.form-group {
	margin-bottom: var(--space-md);
}

.form-error {
	color: var(--danger);
	font-size: 13px;
	margin-top: var(--space-xs);
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.form-success {
	color: var(--success);
	font-size: 13px;
	margin-top: var(--space-xs);
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.form-help {
	color: var(--muted);
	font-size: 13px;
	margin-top: var(--space-xs);
}

/* Input with icon */
.input-with-icon {
	position: relative;
}

.input-with-icon input {
	padding-left: 40px;
}

.input-with-icon .icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--muted);
	pointer-events: none;
}

/* Compact forms */
.compact label { 
	margin-top: var(--space-xs); 
}

.compact input, .compact select, .compact textarea { 
	padding: 8px 10px; 
	border-radius: var(--radius-sm); 
}

.compact .btn { 
	padding: 8px 14px; 
}

.compact .form-row { 
	gap: var(--space-sm); 
}

/* Responsive Grid Helpers */
.grid-2 { 
	display: grid; 
	grid-template-columns: 1fr 1fr; 
	gap: var(--space-md); 
}

.grid-3 { 
	display: grid; 
	grid-template-columns: repeat(3, 1fr); 
	gap: var(--space-md); 
}

.grid-4 { 
	display: grid; 
	grid-template-columns: repeat(4, 1fr); 
	gap: var(--space-md); 
}

@media (max-width: 1024px) {
	.grid-4 { 
		grid-template-columns: repeat(2, 1fr); 
	}
}

@media (max-width: 768px) {
	.grid-3, .grid-4 { 
		grid-template-columns: 1fr; 
	}
}

@media (max-width: 640px) {
	.grid-2 { 
		grid-template-columns: 1fr; 
	}
	
	.app-navbar .inner {
		padding: 0 var(--space-md);
	}
	
	.container {
		margin: var(--space-md);
		padding: var(--space-lg);
	}
	
	.form-row {
		flex-direction: column;
		align-items: stretch;
	}
	
	button, .btn {
		width: 100%;
		justify-content: center;
	}
}

/* Modern Footer */
.app-footer { 
	margin: var(--space-xl) auto var(--space-lg); 
	max-width: 1400px; 
	padding: 0 var(--space-lg);
	color: var(--muted); 
	font-size: 13px; 
	text-align: center;
	border-top: 1px solid var(--border-light);
	padding-top: var(--space-lg);
}

/* Loading Spinner */
.spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 3px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
}

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

/* Toast Notifications */
.toast {
	position: fixed;
	top: 80px;
	right: var(--space-lg);
	min-width: 300px;
	max-width: 500px;
	padding: var(--space-md) var(--space-lg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xl);
	background: white;
	border-left: 4px solid var(--primary);
	z-index: 1000;
	animation: slideInRight 0.3s ease-out;
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.toast-success {
	border-left-color: var(--success);
	background: var(--success-light);
}

.toast-error {
	border-left-color: var(--danger);
	background: var(--danger-light);
}

.toast-warning {
	border-left-color: var(--warning);
	background: var(--warning-light);
}

.toast-info {
	border-left-color: var(--info);
	background: var(--info-light);
}

@keyframes slideInRight {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* Progress Bar */
.progress {
	width: 100%;
	height: 8px;
	background: var(--bg-secondary);
	border-radius: var(--radius-full);
	overflow: hidden;
}

.progress-bar {
	height: 100%;
	background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
	border-radius: var(--radius-full);
	transition: width var(--transition-base);
}

/* Skeleton Loading */
.skeleton {
	background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border-light) 50%, var(--bg-secondary) 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
	border-radius: var(--radius-md);
}

@keyframes shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.skeleton-text {
	height: 16px;
	margin-bottom: var(--space-sm);
}

.skeleton-title {
	height: 24px;
	width: 60%;
	margin-bottom: var(--space-md);
}

.skeleton-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

/* Finals entry layout polish */
td[data-series-col], th[data-series-col] { width: 5.75rem; }
input.series-input {
	width: 5.25rem;
	max-width: 100%;
	height: 2.25rem;
	line-height: 2.25rem;
	text-align: center;
	box-sizing: border-box;
}
.row-total { display: inline-block; min-width: 5.5rem; text-align: right; }
input.row-total-input { min-width: 5.5rem; text-align: right; }
.place-display, input.place-input { min-width: 3.25rem; text-align: center; display: inline-block; }
tr.is-eliminated td { background: #f3f4f6; color: #6b7280; }
tr.is-eliminated input { background: #f3f4f6; }
tr.is-eliminated { user-select: none; }
@media (max-width: 1280px){ td[data-series-col], th[data-series-col] { width: 5.25rem; } input.series-input{ width:5rem; } }

/* Medal highlights */
.medal-gold { background: #fff7cc !important; }
.medal-silver { background: #f2f5f8 !important; }
.medal-bronze { background: #ffe9d6 !important; }
.medal-text { font-weight: 700; }

/* Finals: lock previous series visually */
td.series-locked { background: #f3f4f6 !important; color: #6b7280 !important; }
input.series-locked { background: #f3f4f6 !important; color: #6b7280 !important; }

/* Public competition detail specific styles */
.public-competition h1 { line-height: 1.05; }
.public-competition .public-category { padding: 0.75rem; border-width: 1px; }
.public-competition .public-category + .public-category { margin-top: 0.75rem; }
.public-competition .table.compact th, .public-competition .table.compact td, .public-competition table.compact th, .public-competition table.compact td { padding: 6px 8px; font-size: 13px; }
.public-competition .text-lg { line-height: 1.05; }
.public-competition .start-block, .public-competition .results-block, .public-competition .final-block { background: #ffffff; border: 1px solid var(--border); padding: 8px; border-radius: 8px; }
.public-competition .start-block table, .public-competition .results-block table, .public-competition .final-block table { border-collapse: collapse; }
.public-competition .badge { font-size: 11px; padding: 2px 6px; }
.public-competition .text-sm { line-height: 1.15; }
.public-competition .grid { gap: 12px; }
.public-competition .px-2 { padding-left: 8px; padding-right: 8px; }

/* Make headings bigger and compact */
.public-competition h2, .public-competition .text-xl { font-size: 1.125rem; }
.public-competition h1 { font-size: 1.75rem; }

@media (max-width: 640px) {
	.public-competition .table.compact th, .public-competition .table.compact td { padding: 6px 6px; font-size: 12px; }
}

/* Hide number input spinner arrows */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Global responsive safeguards */
*, *::before, *::after {
	box-sizing: border-box;
}

img, svg, video, canvas {
	max-width: 100%;
	height: auto;
}

table {
	max-width: 100%;
}

@media (max-width: 768px) {
	body {
		padding-top: 56px;
	}

	.app-navbar {
		height: auto;
		min-height: 56px;
	}

	.app-navbar .inner {
		padding: 8px var(--space-3);
		flex-wrap: wrap;
		gap: var(--space-2);
		align-items: center;
	}

	.brand {
		max-width: calc(100% - 110px);
		font-size: 15px;
	}

	.brand span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.nav-toggle {
		display: inline-flex;
		margin-left: auto;
	}

	.app-navbar .inner .nav-actions {
		width: 100%;
		display: none;
		gap: 8px;
		padding: 6px 0 2px;
		white-space: normal;
		overflow: visible;
	}

	.app-navbar .inner .nav-actions.is-open {
		display: flex;
	}

	.app-navbar .inner .nav-actions .btn {
		width: calc(50% - 4px);
		justify-content: center;
		flex: 0 0 auto;
		margin: 0;
	}

	.container {
		margin: var(--space-3);
		padding: var(--space-4);
		border-radius: var(--radius-md);
	}

	.card {
		padding: var(--space-4);
	}

	.card-header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2);
	}

	input, select, textarea {
		font-size: 16px;
	}

	h1 { font-size: 1.6rem; }
	h2 { font-size: 1.25rem; }
	h3 { font-size: 1.1rem; }

	.table-wrap,
	table,
	.table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.table {
		min-width: 640px;
	}

	.toast {
		right: 10px;
		left: 10px;
		min-width: 0;
		max-width: none;
	}
}

@media (max-width: 520px) {
	.app-navbar .inner .nav-actions .btn {
		width: 100%;
	}

	.container {
		margin: 10px;
		padding: 12px;
	}
}