* {
	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

:root {
	/* Primary - soft pink */
	--md-primary: #d4a0a8;
	--md-on-primary: #ffffff;
	--md-primary-container: #fce4ec;
	--md-on-primary-container: #5d3a3e;
	/* Secondary - sky blue #66ccff */
	--md-secondary: #7fb8cc;
	--md-on-secondary: #ffffff;
	--md-secondary-container: #e0f2f8;
	--md-on-secondary-container: #2a5a6a;
	/* Tertiary - warm beige */
	--md-tertiary: #c4b5a5;
	--md-on-tertiary: #ffffff;
	--md-tertiary-container: #f0ebe4;
	--md-on-tertiary-container: #5a4e42;
	/* Error - muted rose */
	--md-error: #c06060;
	--md-on-error: #ffffff;
	--md-error-container: #fde0e0;
	--md-on-error-container: #5c1a1a;
	/* Surface - near white */
	--md-surface: #fafafa;
	--md-surface-dim: #e8e4e6;
	--md-surface-bright: #fefefe;
	--md-surface-container-lowest: #ffffff;
	--md-surface-container-low: #f8f6f7;
	--md-surface-container: #f3f1f2;
	--md-surface-container-high: #edebec;
	--md-surface-container-highest: #e7e5e6;
	--md-on-surface: #2c2a2b;
	--md-on-surface-variant: #6b6568;
	/* Outline */
	--md-outline: #9e9598;
	--md-outline-variant: #d6cfd2;
	/* Inverse */
	--md-inverse-surface: #3a3638;
	--md-inverse-on-surface: #f5f0f2;
	--md-inverse-primary: #f0c4ca;
	/* Shadow */
	--md-shadow: rgba(0, 0, 0, 0.06);
	--md-shadow-elevated: rgba(0, 0, 0, 0.10);
	/* Success - muted sage */
	--md-success: #7ba87b;
	--md-success-container: #e6f2e6;
	--md-on-success-container: #1e3a1e;
	/* Warning - muted amber */
	--md-warning: #c4a55a;
	--md-warning-container: #faf0d6;
	--md-on-warning-container: #4a3a10;
	/* Shape */
	--md-shape-xs: 4px;
	--md-shape-sm: 8px;
	--md-shape-md: 12px;
	--md-shape-lg: 16px;
	--md-shape-xl: 28px;
	--md-shape-full: 9999px;
	/* Spacing */
	--md-spacing-xs: 4px;
	--md-spacing-sm: 8px;
	--md-spacing-md: 12px;
	--md-spacing-lg: 16px;
	--md-spacing-xl: 24px;
	--md-spacing-2xl: 32px;
	--md-spacing-3xl: 48px;
	/* Typography */
	--md-font-xs: 11px;
	--md-font-sm: 12px;
	--md-font-base: 13px;
	--md-font-md: 14px;
	--md-font-lg: 16px;
	--md-font-xl: 18px;
	--md-font-2xl: 24px;
	--md-font-3xl: 32px;
	/* Elevation */
	--md-elevation-0: none;
	--md-elevation-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
	--md-elevation-2: 0 1px 2px rgba(0,0,0,0.05), 0 2px 6px rgba(0,0,0,0.08);
	--md-elevation-3: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08);
	--md-elevation-4: 0 2px 4px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.10);
	/* Transition */
	--md-transition-fast: 0.15s ease;
	--md-transition-normal: 0.2s ease;
	--md-transition-slow: 0.3s ease;

	font-family: 'Google Sans', 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
		'Noto Sans SC', sans-serif;
	line-height: 1.5;
	font-weight: 400;
	color: var(--md-on-surface);
	background-color: var(--md-surface);
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#root {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

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

a:hover {
	color: var(--md-on-primary-container);
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--md-outline-variant);
	border-radius: var(--md-shape-full);
	transition: background var(--md-transition-fast);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--md-outline);
}

/* Ant Design overrides */
.ant-table-tbody > tr:hover > td {
	background: var(--md-primary-container) !important;
}

.ant-btn {
	transition: all var(--md-transition-normal);
}

.ant-card {
	transition: box-shadow var(--md-transition-normal);
}

.ant-tag {
	border: none;
}

/* Animations */
@keyframes pulse {
	0% { opacity: 1; }
	50% { opacity: 0.5; }
	100% { opacity: 1; }
}

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

@keyframes slideInLeft {
	from { transform: translateX(-100%); }
	to { transform: translateX(0); }
}

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