includio-cms 0.1.3 → 0.5.0

package/dist/admin/styles/admin.css

@@ -4,99 +4,65 @@
 
 @source '../../';
 
-@custom-variant dark (&:is(.dark *));
-
 :root {
-	--radius: 0.65rem;
-	--background: oklch(1 0 0);
-	--foreground: oklch(0.141 0.005 285.823);
-	/* Depth system - light mode */
-	--depth-0-bg: oklch(1 0 0);
-	--depth-1-bg: oklch(0.98 0.002 286);
-	--depth-2-bg: oklch(0.96 0.003 286);
-	--depth-3-bg: oklch(0.94 0.004 286);
-	--depth-border-1: oklch(0.92 0.004 286);
-	--depth-border-2: oklch(0.88 0.006 286);
-	--depth-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08);
-	--depth-shadow-md: 0 4px 8px rgb(0 0 0 / 0.1);
+	--radius: 0.5rem;
+	--background: oklch(0.986 0.005 286);
+	--foreground: oklch(0.228 0.038 283);
 	--card: oklch(1 0 0);
-	--card-foreground: oklch(0.141 0.005 285.823);
+	--card-foreground: oklch(0.228 0.038 283);
 	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.141 0.005 285.823);
-	--primary: oklch(0.623 0.214 259.815);
-	--primary-foreground: oklch(0.97 0.014 254.604);
-	--secondary: oklch(0.967 0.001 286.375);
-	--secondary-foreground: oklch(0.21 0.006 285.885);
-	--muted: oklch(0.967 0.001 286.375);
-	--muted-foreground: oklch(0.552 0.016 285.938);
-	--accent: oklch(0.967 0.001 286.375);
-	--accent-foreground: oklch(0.21 0.006 285.885);
-	--destructive: oklch(0.577 0.245 27.325);
-	--border: oklch(0.92 0.004 286.32);
-	--input: oklch(0.92 0.004 286.32);
-	--ring: oklch(0.623 0.214 259.815);
+	--popover-foreground: oklch(0.228 0.038 283);
+	--primary: oklch(0.469 0.131 290);
+	--primary-foreground: oklch(1 0 0);
+	--secondary: oklch(0.944 0.019 299);
+	--secondary-foreground: oklch(0.469 0.131 290);
+	--muted: oklch(0.965 0.011 297);
+	--muted-foreground: oklch(0.456 0.028 285);
+	--accent: oklch(0.944 0.019 299);
+	--accent-foreground: oklch(0.469 0.131 290);
+	--destructive: oklch(0.576 0.155 23);
+	--border: oklch(0.911 0.023 294);
+	--input: oklch(0.911 0.023 294);
+	--ring: oklch(0.469 0.131 290);
 	--chart-1: oklch(0.646 0.222 41.116);
 	--chart-2: oklch(0.6 0.118 184.704);
 	--chart-3: oklch(0.398 0.07 227.392);
 	--chart-4: oklch(0.828 0.189 84.429);
 	--chart-5: oklch(0.769 0.188 70.08);
-	--sidebar: oklch(0.985 0 0);
-	--sidebar-foreground: oklch(0.141 0.005 285.823);
-	--sidebar-primary: oklch(0.623 0.214 259.815);
-	--sidebar-primary-foreground: oklch(0.97 0.014 254.604);
-	--sidebar-accent: oklch(0.967 0.001 286.375);
-	--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-	--sidebar-border: oklch(0.92 0.004 286.32);
-	--sidebar-ring: oklch(0.623 0.214 259.815);
-}
-
-.dark {
-	--background: oklch(0.141 0.005 285.823);
-	--foreground: oklch(0.985 0 0);
-	/* Depth system - dark mode */
-	--depth-0-bg: oklch(0.141 0.005 285);
-	--depth-1-bg: oklch(0.18 0.006 285);
-	--depth-2-bg: oklch(0.21 0.006 286);
-	--depth-3-bg: oklch(0.24 0.007 286);
-	--depth-border-1: oklch(1 0 0 / 0.08);
-	--depth-border-2: oklch(1 0 0 / 0.12);
-	--depth-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.3), inset 0 1px 0 rgb(255 255 255 / 0.04);
-	--depth-shadow-md: 0 4px 8px rgb(0 0 0 / 0.3), inset 0 1px 0 rgb(255 255 255 / 0.05);
-	--card: oklch(0.21 0.006 285.885);
-	--card-foreground: oklch(0.985 0 0);
-	--popover: oklch(0.21 0.006 285.885);
-	--popover-foreground: oklch(0.985 0 0);
-	--primary: oklch(0.546 0.245 262.881);
-	--primary-foreground: oklch(0.379 0.146 265.522);
-	--secondary: oklch(0.274 0.006 286.033);
-	--secondary-foreground: oklch(0.985 0 0);
-	--muted: oklch(0.274 0.006 286.033);
-	--muted-foreground: oklch(0.705 0.015 286.067);
-	--accent: oklch(0.274 0.006 286.033);
-	--accent-foreground: oklch(0.985 0 0);
-	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(1 0 0 / 10%);
-	--input: oklch(1 0 0 / 15%);
-	--ring: oklch(0.488 0.243 264.376);
-	--chart-1: oklch(0.488 0.243 264.376);
-	--chart-2: oklch(0.696 0.17 162.48);
-	--chart-3: oklch(0.769 0.188 70.08);
-	--chart-4: oklch(0.627 0.265 303.9);
-	--chart-5: oklch(0.645 0.246 16.439);
-	--sidebar: oklch(0.21 0.006 285.885);
-	--sidebar-foreground: oklch(0.985 0 0);
-	--sidebar-primary: oklch(0.546 0.245 262.881);
-	--sidebar-primary-foreground: oklch(0.379 0.146 265.522);
-	--sidebar-accent: oklch(0.274 0.006 286.033);
-	--sidebar-accent-foreground: oklch(0.985 0 0);
-	--sidebar-border: oklch(1 0 0 / 10%);
-	--sidebar-ring: oklch(0.488 0.243 264.376);
+	--sidebar: oklch(1 0 0);
+	--sidebar-foreground: oklch(0.228 0.038 283);
+	--sidebar-primary: oklch(0.469 0.131 290);
+	--sidebar-primary-foreground: oklch(1 0 0);
+	--sidebar-accent: oklch(0.965 0.011 297);
+	--sidebar-accent-foreground: oklch(0.228 0.038 283);
+	--sidebar-border: oklch(0.911 0.023 294);
+	--sidebar-ring: oklch(0.469 0.131 290);
+
+	/* Extended palette */
+	--plum-dark: oklch(0.39 0.107 291);
+	--plum-darker: oklch(0.304 0.088 288);
+	--lavender: oklch(0.77 0.09 295);
+	--lavender-light: oklch(0.889 0.042 298);
+	--lavender-lighter: oklch(0.944 0.019 299);
+	--success: oklch(0.571 0.107 156);
+	--success-bg: oklch(0.967 0.014 156);
+	--warning: oklch(0.675 0.118 71);
+	--warning-bg: oklch(0.976 0.015 77);
+	--error-bg: oklch(0.965 0.014 17);
+	--text-light: oklch(0.635 0.036 285);
+
+	/* Shadows — plum-tinted */
+	--shadow-sm: 0 1px 2px rgba(43, 37, 88, 0.04);
+	--shadow: 0 2px 8px rgba(43, 37, 88, 0.06);
+	--shadow-lg: 0 8px 24px rgba(43, 37, 88, 0.1);
+	--shadow-xl: 0 16px 48px rgba(43, 37, 88, 0.14);
 }
 
 @theme inline {
-	--radius-sm: calc(var(--radius) - 4px);
+	--font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
+	--radius-sm: 0.375rem;
 	--radius-md: calc(var(--radius) - 2px);
-	--radius-lg: var(--radius);
+	--radius-lg: 0.75rem;
 	--radius-xl: calc(var(--radius) + 4px);
 	--color-background: var(--background);
 	--color-foreground: var(--foreground);
@@ -129,6 +95,21 @@
 	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 	--color-sidebar-border: var(--sidebar-border);
 	--color-sidebar-ring: var(--sidebar-ring);
+	--color-plum-dark: var(--plum-dark);
+	--color-plum-darker: var(--plum-darker);
+	--color-lavender: var(--lavender);
+	--color-lavender-light: var(--lavender-light);
+	--color-lavender-lighter: var(--lavender-lighter);
+	--color-success: var(--success);
+	--color-success-bg: var(--success-bg);
+	--color-warning: var(--warning);
+	--color-warning-bg: var(--warning-bg);
+	--color-error-bg: var(--error-bg);
+	--color-text-light: var(--text-light);
+	--shadow-sm: var(--shadow-sm);
+	--shadow-md: var(--shadow);
+	--shadow-lg: var(--shadow-lg);
+	--shadow-xl: var(--shadow-xl);
 }
 
 @layer base {
@@ -137,122 +118,1520 @@
 	}
 
 	body {
-		@apply bg-background text-foreground;
+		@apply bg-background text-foreground antialiased;
+	}
+}
+
+/* ═══ Sidebar navigation — match mockup ═══ */
+
+/* Scrollbar */
+[data-slot='sidebar-content'] {
+	scrollbar-width: thin;
+	scrollbar-color: var(--border) transparent;
+}
+[data-slot='sidebar-content']::-webkit-scrollbar {
+	width: 4px;
+}
+[data-slot='sidebar-content']::-webkit-scrollbar-track {
+	background: transparent;
+}
+[data-slot='sidebar-content']::-webkit-scrollbar-thumb {
+	background: var(--border);
+	border-radius: 2px;
+}
+
+/* Group separators (adjacent groups get border-top) */
+[data-slot='sidebar-content'] > [data-sidebar='group'] + [data-sidebar='group'] {
+	border-top: 1px solid var(--sidebar-border);
+	margin-top: 4px;
+	padding-top: 8px;
+}
+
+/* Group label typography */
+[data-slot='sidebar-content'] [data-sidebar='group-label'] {
+	padding: 6px 16px 4px !important;
+	font-size: 10px !important;
+	font-weight: 700 !important;
+	letter-spacing: 0.06em !important;
+	text-transform: uppercase !important;
+	height: auto !important;
+}
+
+/* Menu list spacing */
+[data-slot='sidebar-content'] [data-sidebar='menu'] {
+	gap: 1px !important;
+	padding-left: 6px !important;
+	padding-right: 6px !important;
+}
+
+/* Nav item button sizing */
+[data-slot='sidebar-content'] [data-sidebar='menu-button'] {
+	gap: 10px !important;
+	padding: 6px 10px !important;
+	font-size: 13px !important;
+	font-weight: 500 !important;
+	min-height: 36px !important;
+	height: auto !important;
+	border-radius: 6px !important;
+}
+
+/* Active state */
+[data-sidebar='menu-button'][data-active='true'] {
+	position: relative;
+	background: rgba(91, 74, 158, 0.08) !important;
+	color: var(--primary) !important;
+	font-weight: 600 !important;
+}
+[data-sidebar='menu-button'][data-active='true']:hover {
+	background: rgba(91, 74, 158, 0.12) !important;
+}
+
+/* Active left indicator bar */
+div[data-collapsible]:not([data-collapsible='icon'])
+	[data-sidebar='menu-button'][data-active='true']::before {
+	content: '';
+	position: absolute;
+	left: 0;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 3px;
+	height: 20px;
+	border-radius: 0 2px 2px 0;
+	background: var(--primary);
+}
+
+/* Prose typography — map to admin design system (outside @layer to override typography plugin) */
+.prose {
+	--tw-prose-body: var(--foreground);
+	--tw-prose-headings: var(--foreground);
+	--tw-prose-links: var(--primary);
+	--tw-prose-code: var(--foreground);
+	--tw-prose-pre-bg: var(--muted);
+	--tw-prose-borders: var(--border);
+	--tw-prose-quotes: var(--muted-foreground);
+	--tw-prose-quote-borders: var(--lavender);
+	--tw-prose-bold: var(--foreground);
+	--tw-prose-counters: var(--muted-foreground);
+	--tw-prose-bullets: var(--muted-foreground);
+	--tw-prose-captions: var(--muted-foreground);
+	--tw-prose-pre-code: var(--foreground);
+	--tw-prose-th-borders: var(--border);
+	--tw-prose-td-borders: var(--border);
+}
+
+/* Inline code styling */
+.prose :where(code):not(:where(pre *)) {
+	background: var(--muted);
+	padding: 0.2em 0.4em;
+	border-radius: 0.375rem;
+	font-size: 0.875em;
+	font-weight: 500;
+}
+
+.prose :where(code):not(:where(pre *))::before,
+.prose :where(code):not(:where(pre *))::after {
+	content: none;
+}
+
+/* Blockquote — lavender left border */
+.prose :where(blockquote) {
+	border-left-color: var(--lavender);
+	border-left-width: 3px;
+}
+
+/* Link — underline offset */
+.prose :where(a) {
+	text-underline-offset: 3px;
+	text-decoration-thickness: 1px;
+	font-weight: inherit;
+}
+
+/* Table header — stronger visual weight */
+.ProseMirror th {
+	font-size: 0.8125rem;
+	text-transform: uppercase;
+	letter-spacing: 0.03em;
+}
+
+/* ProseMirror editor shared styles */
+.ProseMirror table {
+	border-collapse: collapse;
+	width: 100%;
+	margin: 1em 0;
+}
+
+.ProseMirror th,
+.ProseMirror td {
+	border: 1px solid var(--border);
+	padding: 0.5em;
+	text-align: left;
+}
+
+.ProseMirror th {
+	background-color: var(--muted);
+	font-weight: 600;
+}
+
+.ProseMirror .selectedCell {
+	background-color: var(--accent);
+}
+
+.ProseMirror pre {
+	background-color: var(--muted);
+	border-radius: 0.5rem;
+	padding: 1rem;
+	overflow-x: auto;
+}
+
+.ProseMirror pre code {
+	background: none;
+	padding: 0;
+	font-size: 0.875rem;
+}
+
+/* Heading a11y inline warning */
+.heading-a11y-warning {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	padding: 6px 10px;
+	margin: 4px 0;
+	border-radius: 6px;
+	background: var(--warning-bg);
+	color: #7a5520;
+	font-size: 12px;
+	font-weight: 500;
+	line-height: 1.4;
+	pointer-events: none;
+}
+.heading-a11y-warning svg {
+	flex-shrink: 0;
+}
+
+.tiptap-highlight {
+	background-color: rgb(250 204 21 / 0.4);
+	padding: 0.125em 0.25em;
+	border-radius: 0.25em;
+}
+
+.tiptap-image,
+.tiptap-video {
+	max-width: 100%;
+	height: auto;
+	border-radius: 0.5rem;
+}
+
+.tiptap-figure {
+	margin: 1em 0;
+	display: table;
+}
+
+.tiptap-figure.align-left {
+	float: left;
+	margin-right: 1em;
+	max-width: 50%;
+}
+
+.tiptap-figure.align-right {
+	float: right;
+	margin-left: 1em;
+	max-width: 50%;
+}
+
+.tiptap-figure.align-center {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.tiptap-figure img {
+	max-width: 100%;
+	height: auto;
+	border-radius: 0.5rem;
+}
+
+.tiptap-figure figcaption {
+	font-size: 0.875rem;
+	color: var(--muted-foreground);
+	text-align: center;
+	margin-top: 0.5rem;
+}
+
+/* Syntax highlighting */
+.hljs-comment,
+.hljs-quote {
+	color: var(--muted-foreground);
+	font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-addition {
+	color: #c678dd;
+}
+
+.hljs-number,
+.hljs-string,
+.hljs-meta .hljs-meta-string,
+.hljs-literal,
+.hljs-doctag,
+.hljs-regexp {
+	color: #98c379;
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+	color: #e5c07b;
+}
+
+.hljs-attribute,
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-class .hljs-title,
+.hljs-type {
+	color: #61afef;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-subst,
+.hljs-meta,
+.hljs-meta .hljs-keyword,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-link {
+	color: #56b6c2;
+}
+
+.hljs-built_in,
+.hljs-deletion {
+	color: #e06c75;
+}
+
+.hljs-emphasis {
+	font-style: italic;
+}
+
+.hljs-strong {
+	font-weight: bold;
+}
+
+/* ═══════════ ACCOUNT SETTINGS ═══════════ */
+
+/* Page wrapper */
+.acct-content {
+	flex: 1;
+	overflow-y: auto;
+	padding: 32px 40px 60px;
+}
+.acct-inner {
+	max-width: 720px;
+	margin: 0 auto;
+}
+
+/* Staggered fadeUp */
+@keyframes acct-fade-up {
+	from {
+		opacity: 0;
+		transform: translateY(6px);
 	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+.acct-fade-up {
+	animation: acct-fade-up 0.3s ease both;
+}
+.acct-fade-up:nth-child(2) {
+	animation-delay: 0.04s;
+}
+.acct-fade-up:nth-child(3) {
+	animation-delay: 0.08s;
+}
+.acct-fade-up:nth-child(4) {
+	animation-delay: 0.12s;
+}
+.acct-fade-up:nth-child(5) {
+	animation-delay: 0.16s;
+}
+.acct-fade-up:nth-child(6) {
+	animation-delay: 0.2s;
+}
+
+/* Profile avatar */
+.acct-avatar {
+	width: 80px;
+	height: 80px;
+	border-radius: 50%;
+	background: linear-gradient(135deg, var(--primary), var(--lavender));
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 24px;
+	font-weight: 700;
+	color: white;
+	flex-shrink: 0;
+}
+
+/* Role badge */
+.acct-role-badge {
+	display: inline-flex;
+	align-items: center;
+	padding: 5px 12px;
+	background: var(--lavender-lighter);
+	color: var(--primary);
+	font-size: 13px;
+	font-weight: 600;
+	border-radius: var(--radius-sm);
+}
+
+/* Input with icon/button on right */
+.acct-input-wrap {
+	position: relative;
+}
+.acct-input-wrap input {
+	padding-right: 36px;
+}
+.acct-input-icon {
+	position: absolute;
+	right: 10px;
+	top: 50%;
+	transform: translateY(-50%);
+	color: var(--text-light);
+	display: flex;
+	align-items: center;
+	pointer-events: none;
+}
+
+/* Password toggle */
+.acct-pw-toggle {
+	position: absolute;
+	right: 8px;
+	top: 50%;
+	transform: translateY(-50%);
+	background: none;
+	border: none;
+	cursor: pointer;
+	color: var(--text-light);
+	padding: 2px;
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: color 0.2s ease;
+}
+.acct-pw-toggle:hover {
+	color: var(--primary);
 }
+.acct-pw-toggle:focus-visible {
+	outline: 2px solid var(--primary);
+	outline-offset: 2px;
+}
+
+/* Strength meter */
+.acct-strength-meter {
+	display: flex;
+	gap: 4px;
+	margin-top: 8px;
+	margin-bottom: 4px;
+}
+.acct-strength-seg {
+	flex: 1;
+	height: 4px;
+	border-radius: 2px;
+	background: var(--border);
+	transition: background 0.2s ease;
+}
+.acct-strength-seg.filled-weak {
+	background: var(--destructive);
+}
+.acct-strength-seg.filled-medium {
+	background: var(--warning);
+}
+.acct-strength-seg.filled-strong {
+	background: var(--success);
+}
+.acct-strength-seg.filled-very-strong {
+	background: var(--success);
+}
+
+.acct-strength-text {
+	font-size: 12px;
+	font-weight: 500;
+}
+.acct-strength-text.weak {
+	color: var(--destructive);
+}
+.acct-strength-text.medium {
+	color: var(--warning);
+}
+.acct-strength-text.strong {
+	color: var(--success);
+}
+.acct-strength-text.very-strong {
+	color: var(--success);
+}
+
+/* Form actions with border-top */
+.acct-form-actions {
+	display: flex;
+	justify-content: flex-end;
+	margin-top: 20px;
+	padding-top: 16px;
+	border-top: 1px solid var(--border);
+}
+
+/* Session items */
+.acct-session-item {
+	display: flex;
+	align-items: center;
+	gap: 14px;
+	padding: 14px 0;
+	border-bottom: 1px solid var(--border);
+}
+.acct-session-item:first-of-type {
+	padding-top: 0;
+}
+.acct-session-item:last-of-type {
+	border-bottom: none;
+}
+
+.acct-session-icon {
+	width: 40px;
+	height: 40px;
+	border-radius: var(--radius);
+	background: var(--muted);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	color: var(--muted-foreground);
+}
+
+.acct-session-badge {
+	font-size: 11px;
+	font-weight: 600;
+	background: var(--success-bg);
+	color: var(--success);
+	padding: 1px 8px;
+	border-radius: 10px;
+}
+
+.acct-dot-online {
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background: var(--success);
+	display: inline-block;
+}
+
+.acct-sessions-footer {
+	margin-top: 16px;
+	padding-top: 16px;
+	border-top: 1px solid var(--border);
+}
+
+/* ═══════════ MEDIA LIBRARY ═══════════ */
+
+/* Checkered transparency background */
+.ml-checkered-bg {
+	background: repeating-conic-gradient(var(--muted) 0% 25%, var(--card) 0% 50%) 50% / 16px 16px;
+}
+
+/* Staggered fadeUp animation for file cards */
+@keyframes ml-fade-up {
+	from {
+		opacity: 0;
+		transform: translateY(6px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+.ml-fade-up {
+	animation: ml-fade-up 0.3s ease both;
+}
+.ml-fade-up:nth-child(1) {
+	animation-delay: 0.02s;
+}
+.ml-fade-up:nth-child(2) {
+	animation-delay: 0.04s;
+}
+.ml-fade-up:nth-child(3) {
+	animation-delay: 0.06s;
+}
+.ml-fade-up:nth-child(4) {
+	animation-delay: 0.08s;
+}
+.ml-fade-up:nth-child(5) {
+	animation-delay: 0.1s;
+}
+.ml-fade-up:nth-child(6) {
+	animation-delay: 0.12s;
+}
+.ml-fade-up:nth-child(7) {
+	animation-delay: 0.14s;
+}
+.ml-fade-up:nth-child(8) {
+	animation-delay: 0.16s;
+}
+.ml-fade-up:nth-child(9) {
+	animation-delay: 0.18s;
+}
+.ml-fade-up:nth-child(10) {
+	animation-delay: 0.2s;
+}
+.ml-fade-up:nth-child(11) {
+	animation-delay: 0.22s;
+}
+.ml-fade-up:nth-child(12) {
+	animation-delay: 0.24s;
+}
+
+/* Drop zone */
+.ml-drop-zone {
+	border: 2px dashed var(--border);
+	border-radius: var(--radius-lg);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	color: var(--text-light);
+	font-size: 13px;
+	font-weight: 500;
+	transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.ml-drop-zone:hover,
+.ml-drop-zone.drag-over {
+	border-color: var(--lavender);
+	background: var(--lavender-lighter);
+	color: var(--primary);
+}
+
+/* Selection checkmark overlay */
+.ml-file-check {
+	position: absolute;
+	top: 6px;
+	right: 6px;
+	width: 22px;
+	height: 22px;
+	background: var(--primary);
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	opacity: 0;
+	transform: scale(0.6);
+	transition:
+		opacity 0.15s ease,
+		transform 0.15s ease;
+	box-shadow: 0 2px 6px rgba(91, 74, 158, 0.3);
+	z-index: 10;
+}
+.ml-file-check.visible {
+	opacity: 1;
+	transform: scale(1);
+}
+
+/* Video play button overlay */
+.ml-video-overlay {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(26, 26, 46, 0.15);
+}
+.ml-video-play {
+	width: 36px;
+	height: 36px;
+	border-radius: 50%;
+	background: rgba(255, 255, 255, 0.9);
+	backdrop-filter: blur(4px);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* File type icon thumbnail (pdf, audio, other) */
+.ml-file-thumb {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--muted);
+	color: var(--text-light);
+}
+
+/* Bulk action bar slide-up */
+@keyframes ml-bulk-slide-up {
+	from {
+		opacity: 0;
+		transform: translateX(-50%) translateY(100%);
+	}
+	to {
+		opacity: 1;
+		transform: translateX(-50%) translateY(0);
+	}
+}
+.ml-bulk-bar {
+	position: fixed;
+	bottom: 24px;
+	left: 50%;
+	transform: translateX(-50%);
+	animation: ml-bulk-slide-up 0.3s cubic-bezier(0.32, 0.72, 0, 1) both;
+	z-index: 100;
+}
+
+/* ═══════════ LOGIN PAGE ═══════════ */
 
-/* Glassmorphism animations */
-@keyframes float-slow {
+/* Orb drift animations */
+@keyframes login-drift-1 {
 	0%,
 	100% {
-		transform: translateY(0px) translateX(0px);
+		transform: translate(0, 0) scale(1);
 	}
-	25% {
-		transform: translateY(-20px) translateX(10px);
+	33% {
+		transform: translate(-30px, 20px) scale(1.05);
 	}
-	50% {
-		transform: translateY(-10px) translateX(-5px);
+	66% {
+		transform: translate(20px, -15px) scale(0.95);
+	}
+}
+@keyframes login-drift-2 {
+	0%,
+	100% {
+		transform: translate(0, 0) scale(1);
+	}
+	33% {
+		transform: translate(25px, -20px) scale(1.08);
 	}
-	75% {
-		transform: translateY(-25px) translateX(5px);
+	66% {
+		transform: translate(-15px, 25px) scale(0.96);
 	}
 }
-
-@keyframes pulse-glow {
+@keyframes login-drift-3 {
 	0%,
 	100% {
-		opacity: 0.1;
 		transform: translate(-50%, -50%) scale(1);
+		opacity: 0.3;
 	}
 	50% {
-		opacity: 0.2;
-		transform: translate(-50%, -50%) scale(1.1);
+		transform: translate(-50%, -50%) scale(1.15);
+		opacity: 0.5;
 	}
 }
 
-.animate-float-slow {
-	animation: float-slow 10s ease-in-out infinite;
+/* Card entrance */
+@keyframes login-card-enter {
+	from {
+		opacity: 0;
+		transform: translateY(16px) scale(0.98);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
 }
 
-.animate-pulse-glow {
-	animation: pulse-glow 4s ease-in-out infinite;
+/* Background orbs */
+.login-orb {
+	position: absolute;
+	border-radius: 50%;
+	filter: blur(80px);
+	opacity: 0.35;
+}
+.login-orb--1 {
+	width: 500px;
+	height: 500px;
+	background: radial-gradient(circle, var(--lavender-light) 0%, transparent 70%);
+	top: -10%;
+	right: -5%;
+	animation: login-drift-1 20s ease-in-out infinite;
+}
+.login-orb--2 {
+	width: 400px;
+	height: 400px;
+	background: radial-gradient(circle, var(--lavender) 0%, transparent 70%);
+	bottom: -8%;
+	left: -8%;
+	animation: login-drift-2 24s ease-in-out infinite;
+}
+.login-orb--3 {
+	width: 250px;
+	height: 250px;
+	background: radial-gradient(circle, var(--lavender-lighter) 0%, transparent 70%);
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	animation: login-drift-3 18s ease-in-out infinite;
 }
 
-/* Utility classes */
+/* Card & footer entrance animations */
+.login-card-enter {
+	animation: login-card-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+.login-footer-enter {
+	animation: login-card-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
+}
 
-/* Static container - no hover lift */
-.glass-panel {
-	@apply rounded-2xl border border-slate-200/50 bg-white/80 shadow-lg backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/60;
+/* Login input override — taller, hover border */
+.login-input {
+	height: 44px !important;
+}
+.login-input:hover {
+	border-color: var(--lavender) !important;
 }
 
-/* Interactive card - with hover lift (only for clickable elements) */
-.glass-card {
-	@apply rounded-2xl border border-slate-200/50 bg-white/80 shadow-lg backdrop-blur-xl transition-all duration-300 dark:border-white/10 dark:bg-slate-900/60;
+/* Reduced motion: disable login animations (WCAG 2.3.3) */
+@media (prefers-reduced-motion: reduce) {
+	.login-orb {
+		animation: none !important;
+	}
+	.login-card-enter {
+		animation: none !important;
+		opacity: 1;
+	}
+	.login-footer-enter {
+		animation: none !important;
+		opacity: 1;
+	}
 }
 
-.glass-card:hover {
-	@apply -translate-y-1 shadow-xl;
+/* ═══════════ PRELOADER ═══════════ */
+
+@keyframes preloader-spin {
+	to {
+		transform: rotate(360deg);
+	}
 }
 
-/* Better contrast for muted text on glass backgrounds */
-.glass-text-muted {
-	@apply text-slate-600 dark:text-slate-300;
+.preloader-ring {
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+	border: 3px solid var(--lavender-light);
+	border-top-color: var(--primary);
+	animation: preloader-spin 0.9s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;
 }
 
-.gradient-primary {
-	background: linear-gradient(135deg, #2d4a77 0%, #4975ae 100%);
+@keyframes preloader-fade-in {
+	from {
+		opacity: 0;
+		transform: scale(0.96);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
 }
 
-/* Depth utility classes */
-.glass-depth-1 {
-	background: var(--depth-1-bg);
-	box-shadow: var(--depth-shadow-sm);
-	border-color: var(--depth-border-1);
+.preloader-fade-in {
+	animation: preloader-fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
-.glass-depth-2 {
-	background: var(--depth-2-bg);
-	box-shadow: var(--depth-shadow-md);
-	border-color: var(--depth-border-2);
+@media (prefers-reduced-motion: reduce) {
+	.preloader-ring {
+		animation: none !important;
+		opacity: 0.7;
+	}
+	.preloader-fade-in {
+		animation: none !important;
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+/* ═══════════ TOAST NOTIFICATIONS ═══════════ */
+
+/* Rich color overrides — remap sonner vars to AriaCMS tokens */
+[data-sonner-toaster][data-sonner-theme='light'] {
+	--success-bg: #edf7f0;
+	--success-border: #3a8a5c;
+	--success-text: #3a8a5c;
+	--error-bg: #fdf0f0;
+	--error-border: #c44b4b;
+	--error-text: #c44b4b;
+	--warning-bg: #fdf6ec;
+	--warning-border: #c4893a;
+	--warning-text: #7a5520;
+	--info-bg: #eeeaf8;
+	--info-border: #b8a9e8;
+	--info-text: #463879;
+}
+
+/* Base toast */
+[data-sonner-toaster] [data-sonner-toast] {
+	font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
+	font-size: 14px;
+	box-shadow: var(--shadow);
+	border-left: 3px solid var(--border);
 }
 
-.glass-depth-3 {
-	background: var(--depth-3-bg);
-	box-shadow: var(--depth-shadow-md);
-	border-color: var(--depth-border-2);
+/* Per-type left border accent */
+[data-sonner-toaster] [data-sonner-toast][data-type='success'] {
+	border-left-color: #3a8a5c;
+}
+[data-sonner-toaster] [data-sonner-toast][data-type='error'] {
+	border-left-color: #c44b4b;
+}
+[data-sonner-toaster] [data-sonner-toast][data-type='warning'] {
+	border-left-color: #c4893a;
+}
+[data-sonner-toaster] [data-sonner-toast][data-type='info'] {
+	border-left-color: #b8a9e8;
 }
 
-.glass-inset {
-	background: oklch(0.97 0 0);
-	box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.05);
+/* Title */
+[data-sonner-toaster] [data-sonner-toast] [data-title] {
+	font-weight: 600;
+	font-size: 14px;
 }
 
-.dark .glass-inset {
-	background: oklch(0.12 0.005 285);
-	box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.2);
+/* Description */
+[data-sonner-toaster] [data-sonner-toast] [data-description] {
+	font-size: 13px;
+	font-weight: 400;
+	opacity: 0.85;
 }
 
-/* Nesting depth accent borders */
-[data-depth="1"] {
+/* Close button */
+[data-sonner-toaster] [data-sonner-toast] [data-close-button] {
+	background: var(--card);
+	border-color: var(--border);
+}
+
+/* Action button */
+[data-sonner-toaster] [data-sonner-toast] [data-button] {
+	background: var(--primary);
+	color: var(--primary-foreground);
+	font-weight: 600;
+	border-radius: 8px;
+}
+
+/* Focus ring */
+[data-sonner-toaster] [data-sonner-toast]:focus-visible {
+	outline: 2px solid var(--ring);
+	outline-offset: 2px;
+}
+
+/* Reduced motion — disable toast animations (WCAG 2.3.3) */
+@media (prefers-reduced-motion: reduce) {
+	[data-sonner-toaster] [data-sonner-toast] {
+		transition: none !important;
+		animation: none !important;
+	}
+}
+
+/* ═══════════ USERS PAGE ═══════════ */
+
+/* Avatar circle */
+.users-avatar {
+	width: 36px;
+	height: 36px;
+	border-radius: 50%;
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 13px;
+	font-weight: 700;
+	color: white;
+}
+
+/* Role badge pills */
+.users-role-badge {
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	padding: 3px 10px;
+	border-radius: 99px;
+	font-size: 11px;
+	font-weight: 600;
+	white-space: nowrap;
+}
+.users-role-admin {
+	background: rgba(91, 74, 158, 0.1);
+	color: var(--primary);
+}
+.users-role-user {
+	background: var(--muted);
+	color: var(--muted-foreground);
+}
+
+/* Sort icon in table headers */
+.users-sort-icon {
+	display: inline-block;
+	margin-left: 4px;
+	opacity: 0.4;
+	transition:
+		opacity 0.2s ease,
+		color 0.2s ease;
+}
+th[aria-sort] .users-sort-icon {
+	opacity: 1;
+	color: var(--primary);
+}
+
+/* Delete dialog warning box */
+.users-delete-warning {
+	display: flex;
+	align-items: flex-start;
+	gap: 14px;
+	padding: 16px;
+	background: var(--error-bg);
+	border-radius: var(--radius);
+	margin-bottom: 16px;
+}
+.users-delete-warning-icon {
+	width: 40px;
+	height: 40px;
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: white;
+	border-radius: 50%;
+	color: var(--destructive);
+}
+
+/* Expiring soon label */
+.users-expiring-soon {
+	color: var(--warning);
+	font-weight: 600;
+}
+
+/* Bulk actions bar */
+.users-bulk-bar {
+	position: fixed;
+	bottom: 24px;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 100;
+}
+
+/* Staggered fadeUp */
+@keyframes users-fade-up {
+	from {
+		opacity: 0;
+		transform: translateY(6px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+.users-fade-up {
+	animation: users-fade-up 0.3s ease both;
+}
+.users-fade-up:nth-child(2) {
+	animation-delay: 0.04s;
+}
+.users-fade-up:nth-child(3) {
+	animation-delay: 0.08s;
+}
+.users-fade-up:nth-child(4) {
+	animation-delay: 0.12s;
+}
+.users-fade-up:nth-child(5) {
+	animation-delay: 0.16s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.users-fade-up {
+		animation: none !important;
+		opacity: 1;
+	}
+}
+
+/* ═══════════ DASHBOARD ═══════════ */
+
+/* Page wrapper */
+.dash-main {
+	flex: 1;
+	overflow-y: auto;
+	overflow-x: hidden;
+	padding: 28px 32px 60px;
+}
+
+/* Welcome header */
+.welcome-header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 20px;
+	margin-bottom: 24px;
+	animation: dash-fade-up 0.3s ease both;
+}
+.welcome-title {
+	font-size: 24px;
+	font-weight: 700;
+	color: var(--foreground);
+	line-height: 1.3;
+	margin-bottom: 4px;
+}
+.welcome-date {
+	font-size: 14px;
+	color: var(--muted-foreground);
+}
+
+/* Two-column grid */
+.dashboard-grid {
+	display: grid;
+	grid-template-columns: 1fr 380px;
+	gap: 20px;
+}
+
+/* Dashboard card */
+.dash-card {
+	background: var(--card);
+	border: 1px solid var(--border);
+	border-radius: var(--radius-lg);
+	box-shadow: var(--shadow-sm);
+	animation: dash-fade-up 0.3s ease both;
+}
+.dash-card--entries {
+	animation-delay: 0.2s;
+}
+.dash-card--forms {
+	animation-delay: 0.22s;
+}
+.dash-card--activity {
+	animation-delay: 0.24s;
+}
+.dash-card--a11y {
+	animation-delay: 0.2s;
+}
+.dash-card--tip {
+	animation-delay: 0.24s;
+}
+
+.dash-card-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 18px 20px 14px;
+}
+.dash-card-title {
+	font-size: 16px;
+	font-weight: 700;
+	color: var(--foreground);
+}
+.dash-card-link {
+	font-size: 12px;
+	font-weight: 600;
+	color: var(--primary);
+	text-decoration: none;
+	transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.dash-card-link:hover {
+	text-decoration: underline;
+}
+.dash-card-link:focus-visible {
+	outline: 2px solid var(--primary);
+	outline-offset: 2px;
+	border-radius: 2px;
+}
+
+/* Content duo (entries + forms side by side) */
+.content-duo {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 20px;
+}
+
+/* Entries list */
+.entries-list {
+	list-style: none;
+	padding: 0 6px 6px;
+}
+.entry-item {
+	border-bottom: 1px solid var(--border);
+}
+.entry-item:last-child {
+	border-bottom: none;
+}
+.entry-item-link {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 10px 14px;
+	text-decoration: none;
+	transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+	border-radius: 6px;
+}
+.entry-item-link:hover {
+	background: var(--lavender-lighter);
+}
+.entry-item-link:focus-visible {
+	outline: 2px solid var(--primary);
+	outline-offset: -2px;
+	border-radius: 6px;
+}
+.entry-item-main {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+.entry-item-title {
+	font-size: 13px;
+	font-weight: 600;
+	color: var(--foreground);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.entry-item-link:hover .entry-item-title {
+	color: var(--primary);
+}
+.entry-item-meta {
+	font-size: 12px;
+	color: var(--text-light);
+}
+
+/* Status badges */
+.dash-status-badge {
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	padding: 3px 10px;
+	border-radius: 99px;
+	font-size: 11px;
+	font-weight: 600;
+	white-space: nowrap;
+}
+.dash-status-published {
+	background: var(--success-bg);
+	color: var(--success);
+}
+.dash-status-draft {
+	background: var(--muted);
+	color: var(--text-light);
+}
+.dash-status-review {
+	background: var(--warning-bg);
+	color: var(--warning);
+}
+
+/* Activity timeline */
+.activity-list {
+	padding: 4px 20px 20px;
+	list-style: none;
+}
+.activity-item {
+	display: flex;
+	gap: 14px;
+	padding: 12px 0;
+	border-bottom: 1px solid var(--border);
 	position: relative;
 }
-[data-depth="1"]::before {
-	content: '';
-	position: absolute;
-	left: 0;
-	top: 0;
-	bottom: 0;
-	width: 3px;
+.activity-item:last-child {
+	border-bottom: none;
+}
+
+.activity-dot-col {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding-top: 4px;
+	flex-shrink: 0;
+	width: 12px;
+}
+.activity-dot {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	flex-shrink: 0;
+	border: 2px solid var(--card);
+	box-shadow: 0 0 0 1px var(--border);
+}
+.activity-dot--edit {
+	background: var(--primary);
+	box-shadow: 0 0 0 1px var(--primary);
+}
+
+.activity-line {
+	flex: 1;
+	width: 2px;
+	background: var(--border);
+	margin-top: 4px;
+	min-height: 0;
+}
+.activity-item:last-child .activity-line {
+	display: none;
+}
+
+.activity-body {
+	flex: 1;
+	min-width: 0;
+}
+.activity-text {
+	font-size: 13px;
+	font-weight: 500;
+	color: var(--foreground);
+	line-height: 1.4;
+}
+.activity-meta {
+	font-size: 12px;
+	color: var(--text-light);
+	margin-top: 2px;
+}
+
+/* Accessibility gauge */
+.a11y-card-body {
+	padding: 0 20px 20px;
+}
+
+.gauge-wrap {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-bottom: 20px;
+}
+.gauge-svg {
+	width: 140px;
+	height: 140px;
+}
+.gauge-bg {
+	fill: none;
+	stroke: var(--border);
+	stroke-width: 8;
+}
+.gauge-fill {
+	fill: none;
+	stroke: var(--primary);
+	stroke-width: 8;
+	stroke-linecap: round;
+	transform: rotate(-90deg);
+	transform-origin: center;
+	animation: dash-gauge-anim 1s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
+}
+.gauge-text-group {
+	text-anchor: middle;
+	dominant-baseline: central;
+}
+.gauge-value {
+	font-size: 32px;
+	font-weight: 800;
+	fill: var(--primary);
+	font-family: var(--font-sans);
+}
+.gauge-label {
+	font-size: 11px;
+	font-weight: 500;
+	fill: var(--text-light);
+	font-family: var(--font-sans);
+}
+
+.a11y-breakdown {
+	list-style: none;
+	margin-bottom: 16px;
+}
+.a11y-breakdown-item {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 8px 0;
+	font-size: 13px;
+	font-weight: 500;
+	border-bottom: 1px solid var(--border);
+}
+.a11y-breakdown-item:last-child {
+	border-bottom: none;
+}
+.a11y-breakdown-icon {
+	width: 22px;
+	height: 22px;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 12px;
+	font-weight: 700;
+	flex-shrink: 0;
+}
+.a11y-breakdown-icon--ok {
+	background: var(--success-bg);
+	color: var(--success);
+}
+.a11y-breakdown-icon--warn {
+	background: var(--warning-bg);
+	color: var(--warning);
+}
+
+.a11y-hint {
+	padding: 14px;
+	border-radius: var(--radius);
+	background: var(--lavender-lighter);
+	font-size: 13px;
+	font-weight: 500;
+	color: var(--plum-dark);
+	line-height: 1.5;
+}
+
+/* Form submissions */
+.forms-card-body {
+	padding: 0 20px 20px;
+}
+
+.form-group + .form-group {
+	margin-top: 16px;
+	padding-top: 16px;
+	border-top: 1px solid var(--border);
+}
+.form-group-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 10px;
+}
+.form-group-name {
+	font-size: 13px;
+	font-weight: 700;
+	color: var(--foreground);
+}
+.form-group-badge {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 20px;
+	height: 20px;
+	padding: 0 6px;
+	font-size: 11px;
+	font-weight: 700;
+	border-radius: 10px;
+	background: var(--muted);
+	color: var(--text-light);
+}
+.form-group-badge--unread {
 	background: var(--primary);
-	opacity: 0.3;
-	border-radius: 3px 0 0 3px;
+	color: var(--primary-foreground);
+}
+
+.form-submissions-list {
+	list-style: none;
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+}
+.form-submission-item {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 8px 10px;
+	border-radius: 6px;
+	transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+	text-decoration: none;
+	color: inherit;
+}
+.form-submission-item:hover {
+	background: var(--lavender-lighter);
+}
+.form-submission-item:focus-visible {
+	outline: 2px solid var(--primary);
+	outline-offset: -2px;
+	border-radius: 6px;
+}
+
+/* Tip of the day */
+.tip-card {
+	background: linear-gradient(135deg, var(--lavender-lighter), var(--lavender-light));
+	border-color: var(--lavender);
+	padding: 24px;
+}
+.tip-card-label {
+	font-size: 11px;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 0.06em;
+	color: var(--primary);
+	margin-bottom: 12px;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+.tip-card-text {
+	font-size: 14px;
+	font-weight: 500;
+	color: var(--plum-darker);
+	line-height: 1.6;
+	margin-bottom: 14px;
+}
+.tip-card-link {
+	font-size: 13px;
+	font-weight: 600;
+	color: var(--primary);
+	text-decoration: none;
+	transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.tip-card-link:hover {
+	text-decoration: underline;
+}
+.tip-card-link:focus-visible {
+	outline: 2px solid var(--primary);
+	outline-offset: 2px;
+	border-radius: 2px;
 }
-[data-depth="2"]::before {
-	opacity: 0.5;
+
+/* Animations */
+@keyframes dash-fade-up {
+	from {
+		opacity: 0;
+		transform: translateY(6px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
 }
-[data-depth="3"]::before {
-	opacity: 0.7;
+@keyframes dash-gauge-anim {
+	from {
+		stroke-dasharray: 0 339.292;
+	}
+}
+
+/* Responsive */
+@media (max-width: 1100px) {
+	.dashboard-grid {
+		grid-template-columns: 1fr;
+	}
+	.dashboard-grid-aside {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 20px;
+	}
+}
+@media (max-width: 900px) {
+	.content-duo {
+		grid-template-columns: 1fr;
+	}
+}
+@media (max-width: 700px) {
+	.dash-main {
+		padding: 20px 16px 60px;
+	}
+	.dashboard-grid-aside {
+		grid-template-columns: 1fr;
+	}
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+	.dash-card,
+	.welcome-header {
+		animation: none !important;
+		opacity: 1;
+	}
+	.gauge-fill {
+		animation: none !important;
+	}
 }
-[data-depth="4"]::before {
-	opacity: 0.9;
-}