@pallasoft/ps-design-system 1.0.0

package/dist/styles.css

@@ -0,0 +1,1424 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
+
+:root,
+.ps-theme-light {
+	--ps-color-background: #f5f7fb;
+	--ps-color-background-rgb: 245 247 251;
+	--ps-color-foreground: #0f172a;
+	--ps-color-muted: #64748b;
+	--ps-color-panel: #ffffff;
+	--ps-color-panel-border: #e2e8f0;
+	--ps-color-muted-rgb: 100 116 139;
+	--ps-color-subtle-rgb: 148 163 184;
+	--ps-color-panel-rgb: 255 255 255;
+	--ps-color-panel-muted-rgb: 248 250 252;
+	--ps-liquid-highlight-rgb: 255 255 255;
+	--ps-liquid-shadow-rgb: 15 23 42;
+	--ps-liquid-depth-opacity: 0.08;
+	--ps-liquid-fill-a: 0.82;
+	--ps-liquid-fill-b: 0.56;
+	--ps-liquid-line-opacity: 0.68;
+	--ps-privacy-shimmer-a: #e2e8f0;
+	--ps-privacy-shimmer-b: #f8fafc;
+	--ps-privacy-shimmer-c: #dbe3ee;
+	--ps-color-danger-rgb: 220 38 38;
+	--ps-color-danger-soft-rgb: 254 242 242;
+	--ps-color-accent-rgb: 37 99 235;
+	--ps-color-accent-soft-rgb: 239 246 255;
+	--ps-color-ink-rgb: 15 23 42;
+	--ps-color-line-rgb: 226 232 240;
+	--ps-color-mist-rgb: 239 246 255;
+	--ps-color-success-rgb: 22 163 74;
+	--ps-color-success-soft-rgb: 240 253 244;
+	--ps-color-surface-rgb: 255 255 255;
+	--ps-color-warning-rgb: 217 119 6;
+	--ps-color-warning-soft-rgb: 255 247 237;
+	--ps-color-primary-contrast: #ffffff;
+	--ps-chart-1: rgb(71 85 105);
+	--ps-chart-1-rgb: 71 85 105;
+	--ps-chart-2: rgb(15 159 110);
+	--ps-chart-2-rgb: 15 159 110;
+	--ps-chart-3: rgb(37 99 235);
+	--ps-chart-3-rgb: 37 99 235;
+	--ps-chart-4: rgb(217 119 6);
+	--ps-chart-4-rgb: 217 119 6;
+	--ps-chart-5: rgb(124 58 237);
+	--ps-chart-5-rgb: 124 58 237;
+	--ps-chart-inflow: rgb(15 159 110);
+	--ps-chart-inflow-rgb: 15 159 110;
+	--ps-chart-outflow: rgb(71 85 105);
+	--ps-chart-outflow-rgb: 71 85 105;
+	color-scheme: light;
+}
+
+.ps-theme-dark {
+	--ps-color-background: #0f172a;
+	--ps-color-background-rgb: 15 23 42;
+	--ps-color-foreground: #f8fafc;
+	--ps-color-muted: #94a3b8;
+	--ps-color-panel: #111c34;
+	--ps-color-panel-border: #23314d;
+	--ps-color-muted-rgb: 174 187 206;
+	--ps-color-subtle-rgb: 151 164 184;
+	--ps-color-panel-rgb: 17 28 52;
+	--ps-color-panel-muted-rgb: 15 23 42;
+	--ps-liquid-highlight-rgb: 255 255 255;
+	--ps-liquid-shadow-rgb: 0 0 0;
+	--ps-liquid-depth-opacity: 0;
+	--ps-liquid-fill-a: 0.034;
+	--ps-liquid-fill-b: 0.014;
+	--ps-liquid-line-opacity: 0.07;
+	--ps-privacy-shimmer-a: #1e293b;
+	--ps-privacy-shimmer-b: #273449;
+	--ps-privacy-shimmer-c: #162033;
+	--ps-color-danger-rgb: 248 113 113;
+	--ps-color-danger-soft-rgb: 69 10 10;
+	--ps-color-accent-rgb: 96 165 250;
+	--ps-color-accent-soft-rgb: 30 41 59;
+	--ps-color-ink-rgb: 248 250 252;
+	--ps-color-line-rgb: 51 65 85;
+	--ps-color-mist-rgb: 15 23 42;
+	--ps-color-success-rgb: 74 222 128;
+	--ps-color-success-soft-rgb: 20 83 45;
+	--ps-color-surface-rgb: 17 28 52;
+	--ps-color-warning-rgb: 251 191 36;
+	--ps-color-warning-soft-rgb: 69 26 3;
+	--ps-color-primary-contrast: #ffffff;
+	--ps-chart-1: rgb(148 163 184);
+	--ps-chart-1-rgb: 148 163 184;
+	--ps-chart-2: rgb(52 211 153);
+	--ps-chart-2-rgb: 52 211 153;
+	--ps-chart-3: rgb(96 165 250);
+	--ps-chart-3-rgb: 96 165 250;
+	--ps-chart-4: rgb(251 191 36);
+	--ps-chart-4-rgb: 251 191 36;
+	--ps-chart-5: rgb(196 181 253);
+	--ps-chart-5-rgb: 196 181 253;
+	--ps-chart-inflow: rgb(52 211 153);
+	--ps-chart-inflow-rgb: 52 211 153;
+	--ps-chart-outflow: rgb(148 163 184);
+	--ps-chart-outflow-rgb: 148 163 184;
+	color-scheme: dark;
+}
+
+.ps-theme-dark input,
+.ps-theme-dark select,
+.ps-theme-dark textarea {
+	color-scheme: dark;
+}
+
+.ps-theme-dark input::placeholder,
+.ps-theme-dark textarea::placeholder {
+	color: rgb(100 116 139);
+}
+
+.ps-theme-dark option {
+	background-color: rgb(var(--ps-color-surface-rgb, 17 28 52));
+	color: rgb(var(--ps-color-ink-rgb, 248 250 252));
+}
+
+.ps-theme-dark .bg-white,
+.ps-theme-dark .bg-white\/20,
+.ps-theme-dark .bg-white\/24,
+.ps-theme-dark .bg-white\/28,
+.ps-theme-dark .bg-white\/30,
+.ps-theme-dark .bg-white\/35,
+.ps-theme-dark .bg-white\/36,
+.ps-theme-dark .bg-white\/40,
+.ps-theme-dark .bg-white\/44,
+.ps-theme-dark .bg-white\/45,
+.ps-theme-dark .bg-white\/48,
+.ps-theme-dark .bg-white\/50,
+.ps-theme-dark .bg-white\/58,
+.ps-theme-dark .bg-white\/60,
+.ps-theme-dark .bg-white\/62,
+.ps-theme-dark .bg-white\/65,
+.ps-theme-dark .bg-white\/70,
+.ps-theme-dark .bg-white\/72,
+.ps-theme-dark .bg-white\/76,
+.ps-theme-dark .bg-white\/78,
+.ps-theme-dark .bg-white\/80,
+.ps-theme-dark .bg-white\/85,
+.ps-theme-dark .bg-white\/90,
+.ps-theme-dark .bg-white\/92,
+.ps-theme-dark .bg-white\/95,
+.ps-theme-dark .bg-white\/96 {
+	background-color: rgb(var(--ps-color-surface-rgb, 17 28 52) / 0.82);
+}
+
+.ps-theme-dark .bg-slate-50,
+.ps-theme-dark .bg-slate-50\/40,
+.ps-theme-dark .bg-slate-50\/70,
+.ps-theme-dark .bg-slate-50\/80,
+.ps-theme-dark .bg-slate-50\/85,
+.ps-theme-dark .bg-slate-100,
+.ps-theme-dark .bg-slate-100\/70,
+.ps-theme-dark .bg-slate-200 {
+	background-color: rgb(var(--ps-color-panel-muted-rgb, 15 23 42) / 0.78);
+}
+
+.ps-theme-dark .bg-amber-50,
+.ps-theme-dark .bg-amber-100 {
+	background-color: rgb(var(--ps-color-warning-rgb) / 0.13);
+}
+
+.ps-theme-dark .bg-emerald-50,
+.ps-theme-dark .bg-emerald-100 {
+	background-color: rgb(var(--ps-color-success-rgb) / 0.13);
+}
+
+.ps-theme-dark .bg-rose-50,
+.ps-theme-dark .bg-rose-100 {
+	background-color: rgb(var(--ps-color-danger-rgb) / 0.13);
+}
+
+.ps-theme-dark .bg-primary-soft,
+.ps-theme-dark .bg-primary-soft\/30,
+.ps-theme-dark .bg-primary-soft\/40,
+.ps-theme-dark .bg-primary-soft\/50,
+.ps-theme-dark .bg-primary-soft\/60 {
+	background-color: rgb(var(--ps-color-primary-rgb) / 0.14);
+}
+
+.ps-theme-dark .text-ink {
+	color: rgb(var(--ps-color-ink-rgb, 248 250 252));
+}
+
+.ps-theme-dark .text-primary {
+	color: rgb(var(--ps-color-primary-rgb));
+}
+
+.ps-theme-dark .text-slate-300,
+.ps-theme-dark .text-slate-400 {
+	color: rgb(var(--ps-color-subtle-rgb, 151 164 184));
+}
+
+.ps-theme-dark .text-slate-500,
+.ps-theme-dark .text-slate-600,
+.ps-theme-dark .text-slate-700 {
+	color: rgb(var(--ps-color-muted-rgb, 174 187 206));
+}
+
+.ps-theme-dark .text-amber-700 {
+	color: rgb(252 211 77);
+}
+
+.ps-theme-dark .text-emerald-700 {
+	color: rgb(134 239 172);
+}
+
+.ps-theme-dark .text-rose-700 {
+	color: rgb(254 202 202);
+}
+
+.ps-theme-dark .border-line,
+.ps-theme-dark .border-line\/60,
+.ps-theme-dark .border-line\/70,
+.ps-theme-dark .border-line\/80,
+.ps-theme-dark .border-white,
+.ps-theme-dark .border-white\/40 {
+	border-color: rgb(var(--ps-color-line-rgb, 51 65 85) / 0.78);
+}
+
+.ps-theme-dark .hover\:border-primary\/20:hover,
+.ps-theme-dark .hover\:border-primary\/25:hover,
+.ps-theme-dark .hover\:border-primary\/30:hover,
+.ps-theme-dark .hover\:border-primary\/40:hover {
+	border-color: rgb(var(--ps-color-primary-rgb) / 0.5);
+}
+
+.ps-theme-dark .hover\:bg-slate-50:hover,
+.ps-theme-dark .hover\:bg-slate-50\/70:hover,
+.ps-theme-dark .hover\:bg-white:hover,
+.ps-theme-dark .hover\:bg-white\/50:hover,
+.ps-theme-dark .hover\:bg-white\/92:hover,
+.ps-theme-dark .hover\:bg-primary-soft:hover,
+.ps-theme-dark .hover\:bg-primary-soft\/30:hover,
+.ps-theme-dark .hover\:bg-primary-soft\/40:hover,
+.ps-theme-dark .hover\:bg-primary-soft\/60:hover {
+	background-color: rgb(30 41 59 / 0.82);
+}
+
+.ps-theme-dark .disabled\:bg-slate-50:disabled {
+	background-color: rgb(15 23 42 / 0.62);
+}
+
+.ps-theme-dark .disabled\:text-slate-400:disabled {
+	color: rgb(100 116 139);
+}
+
+.ps-app-surface {
+	background:
+		linear-gradient(180deg, rgb(var(--ps-color-mist-rgb, 239 246 255) / 0.38), transparent 18rem),
+		var(--ps-color-background);
+	color: var(--ps-color-foreground);
+}
+
+html,
+body {
+	min-height: 100%;
+}
+
+body {
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+body,
+button,
+input,
+select,
+textarea {
+	font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
+}
+
+a {
+	text-decoration: none;
+}
+
+.ps-card {
+	background:
+		linear-gradient(
+			145deg,
+			rgb(var(--ps-liquid-highlight-rgb) / 0.94),
+			rgb(var(--ps-liquid-highlight-rgb) / 0.76)
+		),
+		rgb(var(--ps-color-surface-rgb, 255 255 255) / 0.9);
+	backdrop-filter: blur(24px) saturate(1.2);
+	border: 1px solid rgb(var(--ps-color-line-rgb, 226 232 240) / 0.72);
+	border-radius: 1rem;
+	box-shadow: none;
+}
+
+.ps-card-muted {
+	background:
+		linear-gradient(
+			145deg,
+			rgb(var(--ps-liquid-highlight-rgb) / 0.72),
+			rgb(var(--ps-liquid-highlight-rgb) / 0.5)
+		),
+		rgb(var(--ps-color-surface-rgb, 255 255 255) / 0.7);
+	backdrop-filter: blur(18px) saturate(1.1);
+	border: 1px solid rgb(var(--ps-color-line-rgb, 226 232 240) / 0.78);
+	border-radius: 0.875rem;
+	box-shadow: none;
+}
+
+.ps-surface {
+	position: relative;
+	overflow: hidden;
+	background:
+		linear-gradient(
+			145deg,
+			rgb(var(--ps-liquid-highlight-rgb) / calc(var(--ps-liquid-fill-a) * 0.46)),
+			rgb(var(--ps-liquid-highlight-rgb) / calc(var(--ps-liquid-fill-b) * 0.36))
+		),
+		rgb(var(--ps-color-surface-rgb, 255 255 255) / 0.82);
+	-webkit-backdrop-filter: blur(24px) saturate(1.16);
+	backdrop-filter: blur(24px) saturate(1.16);
+	border: 1px solid rgb(var(--ps-color-line-rgb, 226 232 240) / 0.76);
+	border-radius: 0.875rem;
+	color: rgb(var(--ps-color-ink-rgb, 15 23 42));
+}
+
+.ps-surface-muted {
+	position: relative;
+	overflow: hidden;
+	background:
+		linear-gradient(
+			145deg,
+			rgb(var(--ps-liquid-highlight-rgb) / calc(var(--ps-liquid-fill-a) * 0.34)),
+			rgb(var(--ps-liquid-highlight-rgb) / calc(var(--ps-liquid-fill-b) * 0.28))
+		),
+		rgb(var(--ps-color-panel-muted-rgb, 248 250 252) / 0.74);
+	-webkit-backdrop-filter: blur(18px) saturate(1.1);
+	backdrop-filter: blur(18px) saturate(1.1);
+	border: 1px solid rgb(var(--ps-color-line-rgb, 226 232 240) / 0.68);
+	border-radius: 0.75rem;
+	color: rgb(var(--ps-color-ink-rgb, 15 23 42));
+}
+
+.ps-surface::before,
+.ps-surface-muted::before {
+	background: linear-gradient(
+		120deg,
+		rgb(var(--ps-liquid-highlight-rgb) / 0.24),
+		transparent 34%,
+		rgb(var(--ps-color-primary-rgb) / 0.045) 70%,
+		transparent
+	);
+	border-radius: inherit;
+	content: '';
+	inset: 0;
+	pointer-events: none;
+	position: absolute;
+}
+
+.ps-surface > *,
+.ps-surface-muted > * {
+	position: relative;
+}
+
+.ps-app-reflection {
+	background:
+		radial-gradient(
+			circle at 18% 0%,
+			rgb(var(--ps-liquid-highlight-rgb) / calc(var(--ps-liquid-fill-a) * 0.66)),
+			transparent 30rem
+		),
+		linear-gradient(
+			145deg,
+			rgb(var(--ps-color-mist-rgb, 239 246 255) / 0.46),
+			rgb(var(--ps-color-background-rgb, 245 247 251) / 1)
+		);
+}
+
+.ps-theme-dark .ps-surface::before,
+.ps-theme-dark .ps-surface-muted::before {
+	background: linear-gradient(
+		120deg,
+		rgb(var(--ps-liquid-highlight-rgb) / 0.035),
+		transparent 36%,
+		rgb(var(--ps-color-primary-rgb) / 0.018) 72%,
+		transparent
+	);
+}
+
+.ps-theme-dark .ps-liquid::before,
+.ps-theme-dark .ps-liquid-strong::before,
+.ps-theme-dark .ps-glass::before,
+.ps-theme-dark .ps-glass-strong::before {
+	background: linear-gradient(
+		120deg,
+		rgb(var(--ps-liquid-highlight-rgb) / 0.045),
+		transparent 36%,
+		rgb(var(--ps-color-primary-rgb) / 0.018) 72%,
+		transparent
+	);
+}
+
+.ps-theme-dark .ps-app-reflection {
+	background:
+		radial-gradient(circle at 18% 0%, rgb(255 255 255 / 0.035), transparent 28rem),
+		linear-gradient(145deg, rgb(var(--ps-color-background-rgb) / 1), rgb(7 13 28 / 1));
+}
+
+.ps-surface-compact {
+	padding: 0.875rem;
+}
+
+.ps-surface-normal {
+	padding: 1rem;
+}
+
+.ps-surface-spacious {
+	padding: 1.25rem;
+}
+
+.ps-text-muted {
+	color: rgb(var(--ps-color-muted-rgb, 100 116 139));
+}
+
+.ps-text-subtle {
+	color: rgb(var(--ps-color-subtle-rgb, 148 163 184));
+}
+
+.ps-eyebrow {
+	color: rgb(var(--ps-color-subtle-rgb, 148 163 184));
+	font-size: 0.7rem;
+	font-weight: 800;
+	letter-spacing: 0.14em;
+	text-transform: uppercase;
+}
+
+.ps-chip {
+	align-items: center;
+	background: rgb(var(--ps-color-panel-muted-rgb, 248 250 252) / 0.78);
+	border: 1px solid rgb(var(--ps-color-line-rgb, 226 232 240) / 0.62);
+	border-radius: 999px;
+	color: rgb(var(--ps-color-muted-rgb, 100 116 139));
+	display: inline-flex;
+	font-size: 0.72rem;
+	font-weight: 800;
+	gap: 0.35rem;
+	line-height: 1;
+	min-height: 1.75rem;
+	padding: 0.35rem 0.7rem;
+}
+
+.ps-pressable {
+	transition:
+		background 160ms ease,
+		border-color 160ms ease,
+		color 160ms ease,
+		transform 160ms ease;
+}
+
+.ps-pressable:hover {
+	transform: translateY(-1px);
+}
+
+.ps-pressable:active {
+	box-shadow: none;
+	transform: translateY(0);
+}
+
+.ps-icon-surface {
+	align-items: center;
+	background: rgb(var(--ps-color-primary-rgb) / 0.1);
+	border: 1px solid rgb(var(--ps-color-primary-rgb) / 0.12);
+	border-radius: 0.875rem;
+	color: rgb(var(--ps-color-primary-rgb));
+	display: inline-flex;
+	flex-shrink: 0;
+	justify-content: center;
+}
+
+.ps-status-dot {
+	border-radius: 999px;
+	display: inline-block;
+	height: 0.55rem;
+	width: 0.55rem;
+}
+
+.ps-status-dot-success {
+	background: rgb(var(--ps-color-success-rgb));
+}
+
+.ps-status-dot-warning {
+	background: rgb(var(--ps-color-warning-rgb));
+}
+
+.ps-status-dot-danger {
+	background: rgb(var(--ps-color-danger-rgb));
+}
+
+.ps-status-dot-muted {
+	background: rgb(var(--ps-color-subtle-rgb));
+}
+
+.ps-liquid,
+.ps-glass {
+	position: relative;
+	background:
+		linear-gradient(
+			145deg,
+			rgb(var(--ps-liquid-highlight-rgb) / var(--ps-liquid-fill-a)),
+			rgb(var(--ps-liquid-highlight-rgb) / var(--ps-liquid-fill-b))
+		),
+		rgb(var(--ps-color-surface-rgb, 255 255 255) / 0.78);
+	-webkit-backdrop-filter: blur(24px) saturate(1.22);
+	backdrop-filter: blur(24px) saturate(1.22);
+	border: 1px solid rgb(var(--ps-color-line-rgb, 226 232 240) / var(--ps-liquid-line-opacity));
+	box-shadow: none;
+}
+
+.ps-liquid-strong,
+.ps-glass-strong {
+	position: relative;
+	background:
+		linear-gradient(
+			145deg,
+			rgb(var(--ps-liquid-highlight-rgb) / 0.9),
+			rgb(var(--ps-liquid-highlight-rgb) / 0.64)
+		),
+		rgb(var(--ps-color-surface-rgb, 255 255 255) / 0.86);
+	-webkit-backdrop-filter: blur(32px) saturate(1.28);
+	backdrop-filter: blur(32px) saturate(1.28);
+	border: 1px solid rgb(var(--ps-color-line-rgb, 226 232 240) / 0.78);
+	box-shadow: none;
+}
+
+.ps-liquid::before,
+.ps-liquid-strong::before,
+.ps-glass::before,
+.ps-glass-strong::before {
+	background: linear-gradient(
+		120deg,
+		rgb(255 255 255 / 0.28),
+		transparent 32%,
+		rgb(var(--ps-color-primary-rgb) / 0.06) 68%,
+		transparent
+	);
+	border-radius: inherit;
+	content: '';
+	inset: 0;
+	pointer-events: none;
+	position: absolute;
+}
+
+.ps-liquid-panel {
+	border-radius: 1rem;
+	overflow: hidden;
+}
+
+.ps-liquid-control {
+	border-radius: 999px;
+	-webkit-backdrop-filter: blur(18px) saturate(1.18);
+	backdrop-filter: blur(18px) saturate(1.18);
+	box-shadow: none;
+}
+
+.ps-reflective-frame {
+	background: linear-gradient(
+		135deg,
+		rgb(var(--ps-color-background-rgb, 245 247 251) / 0.98),
+		rgb(var(--ps-color-mist-rgb, 239 246 255) / 0.74)
+	);
+}
+
+.ps-theme-dark .ps-card,
+.ps-theme-dark .ps-card-muted,
+.ps-theme-dark .ps-glass,
+.ps-theme-dark .ps-glass-strong,
+.ps-theme-dark .ps-liquid,
+.ps-theme-dark .ps-liquid-strong {
+	background:
+		linear-gradient(145deg, rgb(255 255 255 / 0.04), rgb(255 255 255 / 0.016)),
+		rgb(var(--ps-color-surface-rgb, 15 23 42) / 0.9);
+	border-color: rgb(255 255 255 / 0.08);
+	box-shadow: none;
+}
+
+.ps-theme-dark .ps-liquid::before,
+.ps-theme-dark .ps-liquid-strong::before,
+.ps-theme-dark .ps-glass::before,
+.ps-theme-dark .ps-glass-strong::before {
+	background: linear-gradient(
+		125deg,
+		rgb(255 255 255 / 0.034),
+		transparent 34%,
+		rgb(var(--ps-color-primary-rgb) / 0.026) 72%,
+		transparent
+	);
+}
+
+.ps-app-frame {
+	background:
+		radial-gradient(circle at top left, rgb(var(--ps-color-primary-rgb) / 0.08), transparent 30rem),
+		radial-gradient(
+			circle at right top,
+			rgb(var(--ps-color-secondary-rgb) / 0.06),
+			transparent 28rem
+		),
+		linear-gradient(
+			180deg,
+			rgb(var(--ps-color-mist-rgb, 239 246 255) / 0.75),
+			rgb(255 255 255 / 0.94)
+		);
+	color: var(--ps-color-foreground);
+	min-height: 100vh;
+}
+
+.ps-theme-dark .ps-app-frame,
+.ps-theme-dark .ps-reflective-frame {
+	background: linear-gradient(
+		180deg,
+		rgb(var(--ps-color-surface-rgb, 2 6 23)),
+		rgb(var(--ps-color-background-rgb, 15 23 42))
+	);
+}
+
+.ps-app-grid {
+	display: grid;
+	grid-template-columns: minmax(15rem, 17.5rem) minmax(0, 1fr);
+	min-height: 100vh;
+}
+
+.ps-app-sidebar {
+	background: rgb(var(--ps-color-surface-rgb, 255 255 255) / 0.92);
+	border-right: 1px solid rgb(var(--ps-color-line-rgb, 226 232 240) / 0.86);
+	position: sticky;
+	top: 0;
+	height: 100vh;
+}
+
+.ps-app-main {
+	min-width: 0;
+	padding: clamp(1rem, 2vw, 1.5rem);
+}
+
+.ps-page-stack {
+	display: grid;
+	gap: 1rem;
+}
+
+.ps-page-header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 1rem;
+	margin-bottom: 1rem;
+}
+
+.ps-page-kicker {
+	color: rgb(148 163 184);
+	font-size: 0.72rem;
+	font-weight: 700;
+	letter-spacing: 0.18em;
+	text-transform: uppercase;
+}
+
+.ps-page-title {
+	color: rgb(var(--ps-color-ink-rgb, 15 23 42));
+	font-size: clamp(1.75rem, 3vw, 2.5rem);
+	font-weight: 800;
+	letter-spacing: -0.04em;
+	line-height: 1.05;
+}
+
+.ps-page-description {
+	color: rgb(100 116 139);
+	font-size: 0.95rem;
+	line-height: 1.7;
+	margin-top: 0.35rem;
+	max-width: 48rem;
+}
+
+.ps-section-grid {
+	display: grid;
+	gap: 1rem;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+}
+
+.ps-action-grid {
+	display: grid;
+	gap: 0.75rem;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
+}
+
+.ps-action-tile {
+	align-items: center;
+	background:
+		linear-gradient(
+			145deg,
+			rgb(var(--ps-liquid-highlight-rgb) / 0.76),
+			rgb(var(--ps-liquid-highlight-rgb) / 0.46)
+		),
+		rgb(var(--ps-color-surface-rgb, 255 255 255) / 0.78);
+	border: 1px solid rgb(var(--ps-color-line-rgb, 226 232 240) / 0.72);
+	border-radius: 0.75rem;
+	color: rgb(var(--ps-color-ink-rgb, 15 23 42));
+	display: flex;
+	font-size: 0.9rem;
+	font-weight: 700;
+	gap: 0.75rem;
+	justify-content: space-between;
+	min-height: 3.5rem;
+	padding: 0.75rem 0.9rem;
+	text-align: left;
+	-webkit-backdrop-filter: blur(18px) saturate(1.12);
+	backdrop-filter: blur(18px) saturate(1.12);
+}
+
+.ps-action-tile:hover {
+	border-color: rgb(var(--ps-color-primary-rgb) / 0.32);
+}
+
+.ps-theme-dark .ps-action-tile {
+	background:
+		linear-gradient(145deg, rgb(255 255 255 / 0.04), rgb(255 255 255 / 0.016)),
+		rgb(var(--ps-color-surface-rgb, 15 23 42) / 0.9);
+	border-color: rgb(255 255 255 / 0.08);
+	color: rgb(var(--ps-color-ink-rgb, 248 250 252));
+}
+
+.ps-theme-dark .ps-action-tile:hover {
+	border-color: rgb(var(--ps-color-primary-rgb) / 0.4);
+}
+
+.ps-action-tile-primary {
+	background: linear-gradient(
+		135deg,
+		rgb(var(--ps-color-primary-rgb)),
+		rgb(var(--ps-color-primary-dark-rgb))
+	);
+	border-color: rgb(var(--ps-color-primary-rgb));
+	color: #ffffff;
+}
+
+.ps-tabs-grid {
+	display: grid;
+	gap: 0.75rem;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+}
+
+.ps-tab-button {
+	align-items: center;
+	background:
+		linear-gradient(145deg, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.68)),
+		rgb(var(--ps-color-surface-rgb, 255 255 255) / 0.82);
+	border: 1px solid rgb(var(--ps-color-line-rgb, 226 232 240) / 0.78);
+	border-radius: 999px;
+	color: rgb(71 85 105);
+	display: flex;
+	font-size: 0.875rem;
+	font-weight: 800;
+	gap: 0.65rem;
+	min-height: 3.25rem;
+	padding: 0.55rem 0.95rem;
+	text-align: left;
+	box-shadow: none;
+	transition:
+		background 160ms ease,
+		border-color 160ms ease,
+		color 160ms ease,
+		transform 160ms ease;
+}
+
+.ps-theme-dark .ps-tab-button {
+	background:
+		linear-gradient(145deg, rgb(255 255 255 / 0.04), rgb(255 255 255 / 0.016)),
+		rgb(255 255 255 / 0.028);
+	border-color: rgb(255 255 255 / 0.075);
+	color: rgb(203 213 225);
+	box-shadow: none;
+}
+
+.ps-tab-button-active {
+	background:
+		linear-gradient(
+			145deg,
+			rgb(var(--ps-color-primary-rgb) / 0.16),
+			rgb(var(--ps-color-primary-rgb) / 0.07)
+		),
+		rgb(var(--ps-color-primary-soft-rgb) / 0.84);
+	border-color: rgb(var(--ps-color-primary-rgb) / 0.72);
+	box-shadow: none;
+	color: rgb(var(--ps-color-primary-rgb));
+}
+
+.ps-theme-dark .ps-tab-button-active {
+	background:
+		linear-gradient(
+			145deg,
+			rgb(var(--ps-color-primary-rgb) / 0.25),
+			rgb(var(--ps-color-primary-rgb) / 0.1)
+		),
+		rgb(255 255 255 / 0.035);
+	border-color: rgb(var(--ps-color-primary-rgb) / 0.56);
+	box-shadow: none;
+	color: rgb(255 255 255);
+}
+
+.ps-tab-button:active {
+	transform: scale(0.98);
+}
+
+.ps-data-table {
+	background:
+		linear-gradient(
+			145deg,
+			rgb(var(--ps-liquid-highlight-rgb) / 0.74),
+			rgb(var(--ps-liquid-highlight-rgb) / 0.48)
+		),
+		rgb(var(--ps-color-surface-rgb, 255 255 255) / 0.74);
+	border: 1px solid rgb(var(--ps-color-line-rgb, 226 232 240) / 0.72);
+	border-radius: 0.875rem;
+	-webkit-backdrop-filter: blur(18px) saturate(1.14);
+	backdrop-filter: blur(18px) saturate(1.14);
+	overflow: hidden;
+}
+
+.ps-data-table-header {
+	background: rgb(var(--ps-color-surface-rgb, 255 255 255) / 0.44);
+	color: rgb(148 163 184);
+	font-size: 0.7rem;
+	font-weight: 900;
+	letter-spacing: 0.16em;
+	text-transform: uppercase;
+}
+
+.ps-data-table-row {
+	border-color: rgb(var(--ps-color-line-rgb, 226 232 240) / 0.72);
+}
+
+.ps-data-table-row:hover {
+	background: rgb(var(--ps-color-primary-soft-rgb, 238 238 255) / 0.28);
+}
+
+.ps-table-action {
+	align-items: center;
+	background: rgb(var(--ps-color-surface-rgb, 255 255 255) / 0.58);
+	border: 1px solid rgb(var(--ps-color-line-rgb, 226 232 240) / 0.72);
+	border-radius: 999px;
+	color: rgb(var(--ps-color-ink-rgb, 15 23 42));
+	display: inline-flex;
+	font-size: 0.75rem;
+	font-weight: 800;
+	justify-content: center;
+	min-height: 2rem;
+	padding: 0.4rem 0.8rem;
+	-webkit-backdrop-filter: blur(14px) saturate(1.12);
+	backdrop-filter: blur(14px) saturate(1.12);
+}
+
+.ps-table-action-primary {
+	background: rgb(var(--ps-color-primary-rgb) / 0.92);
+	border-color: rgb(var(--ps-color-primary-rgb) / 0.72);
+	color: var(--ps-color-primary-contrast);
+}
+
+.ps-theme-dark .ps-data-table,
+.ps-theme-dark .ps-table-action {
+	background: rgb(255 255 255 / 0.045);
+	border-color: rgb(255 255 255 / 0.12);
+}
+
+.ps-theme-dark .ps-table-action {
+	color: rgb(var(--ps-color-ink-rgb, 241 245 249));
+}
+
+.ps-theme-dark .ps-table-action-primary {
+	background: rgb(var(--ps-color-primary-rgb) / 0.82);
+	border-color: rgb(var(--ps-color-primary-rgb) / 0.68);
+	color: var(--ps-color-primary-contrast);
+}
+
+.ps-theme-dark .ps-data-table-header {
+	background: rgb(255 255 255 / 0.035);
+	color: rgb(148 163 184);
+}
+
+.ps-theme-dark .ps-data-table-row:hover {
+	background: rgb(255 255 255 / 0.045);
+}
+
+.ps-theme-dark .ps-surface,
+.ps-theme-dark .ps-surface-muted {
+	background:
+		linear-gradient(145deg, rgb(255 255 255 / 0.038), rgb(255 255 255 / 0.016)),
+		rgb(var(--ps-color-surface-rgb, 15 23 42) / 0.72);
+	border-color: rgb(255 255 255 / 0.1);
+}
+
+.ps-scrollbar {
+	scrollbar-color: rgb(var(--ps-color-primary-rgb) / 0.46) transparent;
+	scrollbar-width: thin;
+}
+
+.ps-scrollbar::-webkit-scrollbar {
+	height: 0.65rem;
+	width: 0.65rem;
+}
+
+.ps-scrollbar::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+.ps-scrollbar::-webkit-scrollbar-thumb {
+	background: rgb(var(--ps-color-primary-rgb) / 0.34);
+	border: 2px solid transparent;
+	border-radius: 999px;
+	background-clip: padding-box;
+}
+
+.ps-scrollbar::-webkit-scrollbar-thumb:hover {
+	background: rgb(var(--ps-color-primary-rgb) / 0.52);
+	background-clip: padding-box;
+}
+
+.ps-scrollbar-hidden {
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+}
+
+.ps-scrollbar-hidden::-webkit-scrollbar {
+	display: none;
+	height: 0;
+	width: 0;
+}
+
+.ps-form-label {
+	color: rgb(148 163 184);
+	display: block;
+	font-size: 0.72rem;
+	font-weight: 700;
+	letter-spacing: 0.16em;
+	text-transform: uppercase;
+}
+
+.ps-input-label {
+	color: rgb(var(--ps-color-ink-rgb, 15 23 42));
+	display: block;
+	font-size: 0.875rem;
+	font-weight: 700;
+}
+
+.ps-input-label-compact {
+	color: rgb(148 163 184);
+	display: block;
+	font-size: 0.75rem;
+	font-weight: 700;
+	letter-spacing: 0.18em;
+	text-transform: uppercase;
+}
+
+.ps-input-control {
+	background:
+		linear-gradient(
+			145deg,
+			rgb(var(--ps-liquid-highlight-rgb) / 0.82),
+			rgb(var(--ps-liquid-highlight-rgb) / 0.62)
+		),
+		rgb(var(--ps-color-surface-rgb, 255 255 255) / 0.82);
+	backdrop-filter: blur(18px) saturate(1.12);
+	border: 1px solid rgb(var(--ps-color-line-rgb, 226 232 240) / 0.78);
+	border-radius: 0.75rem;
+	color: rgb(var(--ps-color-ink-rgb, 15 23 42));
+	font-size: 0.875rem;
+	padding: 0.68rem 0.85rem;
+	transition:
+		background 160ms ease,
+		border-color 160ms ease,
+		color 160ms ease;
+	width: 100%;
+}
+
+.ps-liquid-popover {
+	overflow: hidden;
+	padding: 0.75rem;
+}
+
+.ps-liquid-modal {
+	background:
+		linear-gradient(
+			145deg,
+			rgb(var(--ps-liquid-highlight-rgb) / 0.92),
+			rgb(var(--ps-liquid-highlight-rgb) / 0.66)
+		),
+		rgb(var(--ps-color-surface-rgb, 255 255 255) / 0.9);
+	-webkit-backdrop-filter: blur(34px) saturate(1.28);
+	backdrop-filter: blur(34px) saturate(1.28);
+	border: 1px solid rgb(var(--ps-color-line-rgb, 226 232 240) / 0.76);
+	box-shadow: none;
+}
+
+.ps-theme-dark .ps-liquid-modal {
+	background:
+		linear-gradient(145deg, rgb(255 255 255 / 0.035), rgb(255 255 255 / 0.014)),
+		rgb(var(--ps-color-surface-rgb, 2 6 23) / 0.92);
+	border-color: rgb(255 255 255 / 0.075);
+}
+
+.ps-input-control:hover:not(:disabled) {
+	border-color: rgb(var(--ps-color-primary-rgb) / 0.4);
+}
+
+.ps-input-control:focus,
+.ps-input-control:focus-visible {
+	border-color: rgb(var(--ps-color-primary-rgb));
+	box-shadow: none;
+	outline: 3px solid rgb(var(--ps-color-primary-rgb) / 0.1);
+	outline-offset: 0;
+}
+
+.ps-input-control::placeholder {
+	color: rgb(148 163 184);
+}
+
+.ps-input-control:disabled {
+	background: rgb(241 245 249 / 0.78);
+	color: rgb(148 163 184);
+	cursor: not-allowed;
+}
+
+.ps-theme-dark .ps-input-control:disabled {
+	background: rgb(var(--ps-color-surface-rgb, 15 23 42) / 0.62);
+	color: rgb(100 116 139);
+}
+
+.ps-theme-dark .ps-input-control {
+	background:
+		linear-gradient(145deg, rgb(255 255 255 / 0.045), rgb(255 255 255 / 0.02)),
+		rgb(var(--ps-color-surface-rgb, 15 23 42) / 0.9);
+	border-color: rgb(255 255 255 / 0.09);
+}
+
+.ps-input-helper {
+	color: rgb(100 116 139);
+	display: block;
+	font-size: 0.75rem;
+	line-height: 1.5;
+	margin-top: 0.25rem;
+}
+
+.ps-theme-dark .ps-input-helper {
+	color: rgb(148 163 184);
+}
+
+.ps-soft-divider {
+	background: rgb(var(--ps-color-line-rgb, 226 232 240));
+	height: 1px;
+	width: 100%;
+}
+
+.ps-dashboard-shell {
+	background: rgb(var(--ps-color-surface-rgb, 255 255 255) / 0.78);
+	border: 1px solid rgb(var(--ps-color-line-rgb, 226 232 240) / 0.72);
+	border-radius: 1rem;
+	backdrop-filter: blur(20px);
+}
+
+.ps-topbar-surface {
+	background: rgb(var(--ps-color-surface-rgb, 255 255 255) / 0.92);
+	border: 1px solid rgb(var(--ps-color-line-rgb, 226 232 240) / 0.9);
+	border-radius: 999px;
+	box-shadow: none;
+}
+
+.ps-metric-card {
+	background: linear-gradient(
+		180deg,
+		rgb(var(--ps-color-surface-rgb, 255 255 255)),
+		rgb(248 250 252 / 0.92)
+	);
+	border: 1px solid rgb(var(--ps-color-line-rgb, 226 232 240) / 0.88);
+	border-radius: 1.25rem;
+	box-shadow: none;
+}
+
+.ps-rail-stack {
+	display: grid;
+	gap: 1rem;
+}
+
+.ps-auth-card {
+	background: rgb(var(--ps-color-surface-rgb, 255 255 255) / 0.95);
+	border: 1px solid rgb(var(--ps-color-line-rgb, 226 232 240) / 0.9);
+	border-radius: 1rem;
+}
+
+.ps-focus-ring:focus-visible {
+	outline: 2px solid var(--ps-color-primary);
+	outline-offset: 2px;
+}
+
+.ps-header-scroll {
+	transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ps-header-scroll-hidden {
+	transform: translateY(-100%);
+}
+
+@keyframes ps-accordion-down {
+	from {
+		height: 0;
+	}
+	to {
+		height: var(--radix-accordion-content-height);
+	}
+}
+
+@keyframes ps-accordion-up {
+	from {
+		height: var(--radix-accordion-content-height);
+	}
+	to {
+		height: 0;
+	}
+}
+
+.ps-accordion-content {
+	overflow: hidden;
+}
+
+.ps-accordion-content[data-state='open'] {
+	animation: ps-accordion-down 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ps-accordion-content[data-state='closed'] {
+	animation: ps-accordion-up 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ps-page-enter {
+	animation: ps-page-enter 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+
+.ps-panel-enter {
+	animation: ps-panel-enter 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+
+.ps-panel-exit {
+	animation: ps-panel-exit 180ms cubic-bezier(0.4, 0, 1, 1) both;
+}
+
+.ps-popover-enter {
+	animation: ps-popover-enter 160ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+	transform-origin: top right;
+}
+
+.ps-popover-exit {
+	animation: ps-popover-exit 140ms cubic-bezier(0.4, 0, 1, 1) both;
+	transform-origin: top right;
+}
+
+.animate-ps-mobile-menu-in {
+	animation: ps-mobile-menu-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+
+.animate-ps-mobile-menu-out {
+	animation: ps-mobile-menu-out 180ms cubic-bezier(0.4, 0, 1, 1) both;
+}
+
+.animate-ps-fade-out {
+	animation: ps-fade-out 140ms ease-in both;
+}
+
+.animate-ps-slide-down {
+	animation: ps-slide-down 180ms ease-in both;
+}
+
+.ps-chart-enter {
+	animation: ps-chart-enter 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+	transform-origin: center;
+}
+
+.ps-chart-line-enter {
+	animation: ps-chart-line-enter 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+	stroke-dasharray: 1200;
+	stroke-dashoffset: 1200;
+}
+
+.ps-chart-area-enter {
+	animation: ps-chart-area-enter 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+	transform-origin: bottom;
+}
+
+.ps-chart-marker-1 {
+	background: var(--ps-chart-1);
+}
+
+.ps-chart-marker-2 {
+	background: var(--ps-chart-2);
+}
+
+.ps-chart-marker-3 {
+	background: var(--ps-chart-3);
+}
+
+.ps-chart-marker-4 {
+	background: var(--ps-chart-4);
+}
+
+.ps-chart-marker-5 {
+	background: var(--ps-chart-5);
+}
+
+.ps-privacy-hidden .private-number {
+	animation: ps-privacy-shimmer 1.35s ease-in-out infinite;
+	background: linear-gradient(
+		100deg,
+		var(--ps-privacy-shimmer-a) 0%,
+		var(--ps-privacy-shimmer-b) 44%,
+		var(--ps-privacy-shimmer-c) 88%
+	);
+	background-size: 220% 100%;
+	border-radius: 0.6rem;
+	color: transparent;
+	display: inline-block;
+	min-height: 1.15em;
+	min-width: min(9rem, 100%);
+	text-shadow: none;
+	user-select: none;
+}
+
+.ps-privacy-hidden .private-number * {
+	color: transparent;
+}
+
+.ps-theme-dark .ps-privacy-hidden .private-number {
+	background: linear-gradient(
+		100deg,
+		rgb(255 255 255 / 0.034) 0%,
+		rgb(var(--ps-color-primary-rgb) / 0.08) 44%,
+		rgb(255 255 255 / 0.026) 88%
+	);
+	background-size: 180% 100%;
+	opacity: 0.92;
+}
+
+@keyframes ps-page-enter {
+	0% {
+		opacity: 0;
+		transform: translateY(6px);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes ps-popover-enter {
+	0% {
+		opacity: 0;
+		transform: translateY(-4px) scale(0.985);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+}
+
+@keyframes ps-popover-exit {
+	0% {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+
+	100% {
+		opacity: 0;
+		transform: translateY(-4px) scale(0.985);
+	}
+}
+
+@keyframes ps-panel-enter {
+	0% {
+		opacity: 0.85;
+		transform: translateX(1rem);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+@keyframes ps-panel-exit {
+	0% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+
+	100% {
+		opacity: 0.8;
+		transform: translateX(1rem);
+	}
+}
+
+@keyframes ps-fade-out {
+	0% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+	}
+}
+
+@keyframes ps-slide-down {
+	0% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	100% {
+		opacity: 0;
+		transform: translateY(8px);
+	}
+}
+
+@keyframes ps-chart-enter {
+	0% {
+		opacity: 0;
+		transform: translateY(6px);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes ps-chart-line-enter {
+	0% {
+		opacity: 0.72;
+		stroke-dashoffset: 1200;
+	}
+
+	100% {
+		opacity: 1;
+		stroke-dashoffset: 0;
+	}
+}
+
+@keyframes ps-chart-area-enter {
+	0% {
+		opacity: 0;
+		transform: scaleY(0.92);
+	}
+
+	100% {
+		opacity: 1;
+		transform: scaleY(1);
+	}
+}
+
+@keyframes ps-privacy-shimmer {
+	0% {
+		background-position: 120% 0;
+	}
+
+	100% {
+		background-position: -120% 0;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	*,
+	::before,
+	::after {
+		animation-duration: 1ms !important;
+		animation-iteration-count: 1 !important;
+		scroll-behavior: auto !important;
+		transition-duration: 1ms !important;
+	}
+
+	.ps-pressable:hover {
+		transform: none;
+	}
+}
+
+@keyframes ps-mobile-menu-in {
+	0% {
+		opacity: 0.75;
+		transform: translateX(-100%);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}
+
+@keyframes ps-mobile-menu-out {
+	0% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+
+	100% {
+		opacity: 0.75;
+		transform: translateX(-100%);
+	}
+}
+
+@media (max-width: 1023px) {
+	.ps-app-grid {
+		grid-template-columns: 1fr;
+	}
+
+	.ps-app-sidebar {
+		border-bottom: 1px solid rgb(var(--ps-color-line-rgb, 231 223 249) / 0.86);
+		border-right: 0;
+		height: auto;
+		position: relative;
+	}
+
+	.ps-page-header {
+		flex-direction: column;
+	}
+}