web-bak/src/index.css

* {
	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;
	/* Elevation */
	--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);

	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;
}

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

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

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

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

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

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

/* 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); }
}