/* ============================================================
   PRISMA HEALTH ANALYTICS — DESIGN SYSTEM
   ============================================================ */

/* --- 1. DESIGN TOKENS --- */
:root {
	/* Brand Palette */
	--prism-lemon: #ffd600;
	--prism-tangerine: #f99b1c;
	--prism-apricot: #f15f22;
	--prism-rubine: #ed1849;
	--prism-fuchsia: #ec0086;
	--prism-plum: #b32572;
	--prism-eggplant: #830065;

	/* Functional Colors */
	--color-primary: #7c3aed;
	--color-primary-hover: #6d28d9;
	--color-primary-light: #ede9fe;
	--color-primary-ring: rgba(124, 58, 237, 0.25);
	--color-accent: #ec0086;
	--color-accent-hover: #d1006f;
	--color-accent-light: #fdf2f8;

	/* Semantic Colors */
	--color-success: #10b981;
	--color-success-light: #ecfdf5;
	--color-success-border: #a7f3d0;
	--color-warning: #f59e0b;
	--color-warning-light: #fffbeb;
	--color-warning-border: #fde68a;
	--color-danger: #ef4444;
	--color-danger-light: #fef2f2;
	--color-danger-border: #fecaca;
	--color-info: #3b82f6;
	--color-info-light: #eff6ff;
	--color-info-border: #bfdbfe;

	/* Neutral Scale */
	--slate-50: #f8fafc;
	--slate-100: #f1f5f9;
	--slate-200: #e2e8f0;
	--slate-300: #cbd5e1;
	--slate-400: #94a3b8;
	--slate-500: #64748b;
	--slate-600: #475569;
	--slate-700: #334155;
	--slate-800: #1e293b;
	--slate-900: #0f172a;
	--slate-950: #020617;

	/* Surface & Layout */
	--surface: #ffffff;
	--surface-raised: #ffffff;
	--surface-sunken: var(--slate-50);
	--bg: #f4f5f7;
	--border: var(--slate-200);
	--border-light: var(--slate-100);
	--text-primary: #111827;
	--text-secondary: var(--slate-600);
	--text-muted: var(--slate-400);
	--text-inverse: #ffffff;

	/* Sidebar */
	--sidebar-bg: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
	--sidebar-text: var(--slate-300);
	--sidebar-active-bg: rgba(124, 58, 237, 0.15);
	--sidebar-active-border: var(--color-primary);
	--sidebar-hover-bg: rgba(255, 255, 255, 0.06);
	--sidebar-width: 260px;
	--header-height: 60px;

	/* Spacing Scale */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-8: 32px;
	--sp-10: 40px;
	--sp-12: 48px;

	/* Border Radius */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-xl: 12px;
	--radius-2xl: 16px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--shadow-glow-primary: 0 0 20px rgba(124, 58, 237, 0.15);
	--shadow-glow-accent: 0 0 20px rgba(236, 0, 134, 0.15);

	/* Typography */
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;
	--text-xs: 11px;
	--text-sm: 13px;
	--text-base: 14px;
	--text-md: 15px;
	--text-lg: 16px;
	--text-xl: 18px;
	--text-2xl: 20px;
	--text-3xl: 24px;
	--leading-tight: 1.25;
	--leading-normal: 1.5;

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 200ms ease;
	--transition-slow: 300ms ease;
}

/* --- 2. BASE STYLES --- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: var(--font-sans);
	background: var(--bg);
	color: var(--text-primary);
	margin: 0;
	padding: 0;
	height: 100vh;
	display: flex;
	overflow: hidden;
	font-size: var(--text-base);
	line-height: var(--leading-normal);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Custom scrollbar */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: var(--slate-300);
	border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
	background: var(--slate-400);
}

/* --- 3. SIDEBAR --- */
.admin-sidebar {
	width: var(--sidebar-width);
	background: var(--sidebar-bg);
	color: var(--sidebar-text);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-header {
	height: auto;
	padding: var(--sp-5);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(0, 0, 0, 0.15);
}
.sidebar-header img {
	max-height: 44px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}
.sidebar-header h1 {
	font-size: var(--text-lg);
	font-weight: 700;
	margin: 0;
	color: #fff;
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	line-height: var(--leading-tight);
	letter-spacing: -0.01em;
}

.sidebar-nav {
	padding: var(--sp-4) 0;
	flex: 1;
	overflow-y: scroll;
}

.nav-section {
	padding: var(--sp-5) var(--sp-5) var(--sp-1);
	font-size: 10px;
	text-transform: uppercase;
	color: var(--slate-500);
	font-weight: 700;
	letter-spacing: 1px;
}

.nav-section-container {
	margin-bottom: var(--sp-1);
}

.nav-section-header {
	padding: var(--sp-3) var(--sp-5);
	font-size: var(--text-sm);
	color: var(--slate-300);
	font-weight: 600;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background var(--transition-fast);
	user-select: none;
}
.nav-section-header:hover {
	background: var(--sidebar-hover-bg);
}
.nav-section-header .chevron {
	font-size: 10px;
	transition: transform var(--transition-fast);
	color: var(--slate-500);
}
.nav-section-container.expanded .nav-section-header .chevron {
	transform: rotate(90deg);
}

.nav-subpages {
	display: none;
	flex-direction: column;
	background: rgba(0, 0, 0, 0.15);
	padding: var(--sp-1) 0;
}
.nav-section-container.expanded .nav-subpages {
	display: flex;
}

.nav-item,
.nav-subpage {
	display: flex;
	align-items: center;
	padding: var(--sp-2) var(--sp-5);
	color: var(--slate-400);
	text-decoration: none;
	font-size: var(--text-sm);
	font-weight: 500;
	border-left: 3px solid transparent;
	transition: all var(--transition-fast);
	cursor: pointer;
}
.nav-item:hover,
.nav-subpage:hover {
	background: var(--sidebar-hover-bg);
	color: var(--slate-200);
}
.nav-item.active,
.nav-subpage.active {
	background: var(--sidebar-active-bg);
	color: #fff;
	border-left-color: var(--sidebar-active-border);
}
.nav-icon {
	width: 22px;
	margin-right: var(--sp-3);
	text-align: center;
	font-size: var(--text-md);
	opacity: 0.85;
}

.sidebar-footer {
	padding: var(--sp-5);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar-footer .btn {
	width: 100%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--slate-300);
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-footer .btn:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* --- 4. MAIN CONTENT LAYOUT --- */
.admin-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
}

.main-header {
	height: var(--header-height);
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	padding: 0 var(--sp-8);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}
.main-header h2 {
	margin: 0;
	font-size: var(--text-2xl);
	font-weight: 700;
	color: var(--text-primary);
	letter-spacing: -0.02em;
}

.breadcrumbs-bar {
	padding: var(--sp-2) var(--sp-8);
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.main-content-scroll {
	flex: 1;
	overflow-y: auto;
	padding: var(--sp-8);
}

/* User Profile (header) */
.user-profile {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	font-size: var(--text-sm);
	color: var(--text-secondary);
	font-weight: 500;
}
.user-avatar-circle {
	width: 34px;
	height: 34px;
	background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: var(--text-sm);
	box-shadow: var(--shadow-sm);
}

/* --- 5. CONTEXT BANNER --- */
.context-banner {
	background: var(--color-warning-light);
	border-bottom: 1px solid var(--color-warning-border);
	padding: var(--sp-2) var(--sp-8);
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--text-sm);
	color: #92400e;
	flex-shrink: 0;
}
.context-banner .org-info {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}
.context-banner .org-name {
	font-weight: 700;
	color: #b45309;
}
.context-banner .restore-btn {
	color: #b45309;
	text-decoration: underline;
	cursor: pointer;
	font-weight: 600;
	background: none;
	border: none;
	padding: 0;
	font-size: var(--text-xs);
	transition: color var(--transition-fast);
}
.context-banner .restore-btn:hover {
	color: #92400e;
}

/* --- 6. BREADCRUMBS --- */
.breadcrumbs {
	margin-bottom: 0;
	display: flex;
	align-items: center;
}

.breadcrumbs-bar {
	padding: var(--sp-2) var(--sp-8);
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
	display: flex;
	align-items: center;
}
.breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: var(--sp-2);
}
.breadcrumb-item {
	display: flex;
	align-items: center;
	font-size: var(--text-sm);
	color: var(--text-secondary);
}
.breadcrumb-link {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--text-secondary);
	text-decoration: none;
	padding: var(--sp-1) var(--sp-2);
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
}
.breadcrumb-link:hover {
	color: var(--color-primary);
	background: var(--slate-100);
}
.breadcrumb-icon {
	font-size: 14px;
	line-height: 1;
}
.breadcrumb-sep {
	color: var(--slate-400);
	font-size: 12px;
	user-select: none;
	padding: 0 var(--sp-1);
}
.breadcrumb-current {
	color: var(--text-primary);
	font-weight: 600;
	padding: var(--sp-1) var(--sp-2);
	background: var(--surface);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

/* --- 7. CARDS --- */
.phat-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	margin-bottom: var(--sp-5);
	box-shadow: var(--shadow-sm);
	padding: var(--sp-5);
	transition: box-shadow var(--transition-base);
}
.phat-card-elevated {
	box-shadow: var(--shadow-md);
}
.phat-card-interactive {
	cursor: pointer;
}
.phat-card-interactive:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-1px);
}
.phat-section {
	padding: var(--sp-5);
}
.phat-site-header {
	padding: var(--sp-4) var(--sp-5);
	background: var(--surface-sunken);
	border-bottom: 1px solid var(--border);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* --- 7. BUTTONS --- */
.btn,
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-4);
	font-size: var(--text-sm);
	font-weight: 600;
	font-family: var(--font-sans);
	border-radius: var(--radius-md);
	cursor: pointer;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-primary);
	transition: all var(--transition-fast);
	text-decoration: none;
	line-height: var(--leading-tight);
	white-space: nowrap;
	min-height: 36px;
}
.btn:hover,
.button:hover {
	background: var(--slate-50);
	border-color: var(--slate-300);
	box-shadow: var(--shadow-xs);
}
.btn:active,
.button:active {
	transform: scale(0.98);
}

.btn-primary,
.button-primary {
	background: var(--color-primary);
	color: var(--text-inverse);
	border-color: var(--color-primary);
	box-shadow: var(--shadow-sm);
}
.btn-primary:hover,
.button-primary:hover {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	color: var(--text-inverse);
	box-shadow: var(--shadow-md), var(--shadow-glow-primary);
}

.btn-danger,
.button-danger {
	background: var(--color-danger);
	color: var(--text-inverse);
	border-color: var(--color-danger);
}
.btn-danger:hover,
.button-danger:hover {
	background: #dc2626;
	border-color: #dc2626;
	color: var(--text-inverse);
}

.btn-ghost,
.button-ghost {
	background: transparent;
	border-color: transparent;
	color: var(--text-secondary);
}
.btn-ghost:hover,
.button-ghost:hover {
	background: var(--slate-100);
	color: var(--text-primary);
}

.btn-sm,
.button-small {
	padding: var(--sp-1) var(--sp-3);
	font-size: var(--text-xs);
	min-height: 28px;
}
.btn-lg {
	padding: var(--sp-3) var(--sp-6);
	font-size: var(--text-md);
	min-height: 42px;
}

/* --- 8. FORM CONTROLS --- */
.form-group {
	margin-bottom: var(--sp-5);
}
.form-label {
	display: block;
	margin-bottom: var(--sp-2);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--text-primary);
}
.form-help {
	margin: var(--sp-1) 0 0 0;
	font-size: var(--text-xs);
	color: var(--text-muted);
}

input,
select,
textarea {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--sp-2) var(--sp-3);
	font-size: var(--text-base);
	font-family: var(--font-sans);
	width: 100%;
	background: var(--surface);
	color: var(--text-primary);
	transition: all var(--transition-fast);
}
input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-ring);
}
input::placeholder,
textarea::placeholder {
	color: var(--text-muted);
}

/* --- 9. TOGGLE SWITCH --- */
.toggle-switch-label {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	cursor: pointer;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--text-primary);
	user-select: none;
}
.toggle-switch-wrapper {
	position: relative;
	width: 40px;
	height: 22px;
	flex-shrink: 0;
}
.toggle-switch-wrapper input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}
.toggle-switch {
	position: absolute;
	cursor: pointer;
	inset: 0;
	background: var(--slate-300);
	transition:
		background var(--transition-base),
		box-shadow var(--transition-base);
	border-radius: var(--radius-full);
}
.toggle-switch::before {
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 3px;
	bottom: 3px;
	background: white;
	transition:
		transform var(--transition-base),
		box-shadow var(--transition-base);
	border-radius: 50%;
	box-shadow: var(--shadow-sm);
}
.toggle-switch-wrapper input:checked + .toggle-switch {
	background: var(--color-primary);
	box-shadow: var(--shadow-glow-primary);
}
.toggle-switch-wrapper input:checked + .toggle-switch::before {
	transform: translateX(18px);
}
.toggle-switch-wrapper input:focus + .toggle-switch {
	box-shadow: 0 0 0 3px var(--color-primary-ring);
}

/* --- HIPAA Scanner Settings --- */
.hipaa-pattern-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-4);
	border-bottom: 1px solid var(--border);
	background: linear-gradient(180deg, rgba(248, 250, 252, 0.85), rgba(248, 250, 252, 0.45));
}
.hipaa-enabled-cell {
	text-align: right;
	vertical-align: middle;
}
.hipaa-enabled-cell .toggle-switch-wrapper {
	margin-left: auto;
}
@media (max-width: 900px) {
	.hipaa-pattern-controls {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* --- 10. BADGES & CHIPS --- */
.badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-1);
	padding: 2px var(--sp-2);
	border-radius: var(--radius-sm);
	font-size: var(--text-xs);
	font-weight: 600;
	line-height: var(--leading-tight);
	white-space: nowrap;
	transition: all var(--transition-fast);
}

/* Circular Icon Badges (Destinations) */
.badge:has(i), 
.badge-icon {
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	flex-shrink: 0;
	font-size: 14px;
	box-shadow: var(--shadow-xs);
}

.badge:has(i) i {
	margin: 0;
}
.phat-badge {
	background: var(--color-info-light);
	color: #0369a1;
	padding: 3px var(--sp-2);
	border-radius: var(--radius-sm);
	font-size: var(--text-xs);
	font-weight: 600;
}
.badge-success {
	background: var(--color-success);
	color: #fff;
}
.badge:not(:has(i)).badge-success {
	background: var(--color-success-light);
	color: #065f46;
}

.badge-warning {
	background: #d97706; /* High contrast Amber */
	color: #fff;
}
.badge:not(:has(i)).badge-warning {
	background: var(--color-warning-light);
	color: #92400e;
}

.badge-danger {
	background: var(--color-danger);
	color: #fff;
}
.badge:not(:has(i)).badge-danger {
	background: var(--color-danger-light);
	color: #991b1b;
}

.badge-info {
	background: var(--color-info);
	color: #fff;
}
.badge:not(:has(i)).badge-info {
	background: var(--color-info-light);
	color: #1e40af;
}
.badge-purple {
	background: #ede9fe;
	color: #5b21b6;
}
.badge-pink {
	background: #fdf2f8;
	color: #9d174d;
}

.badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
}
.badge-dot-success {
	background: var(--color-success);
}
.badge-dot-warning {
	background: var(--color-warning);
}
.badge-dot-danger {
	background: var(--color-danger);
}
.badge-dot-info {
	background: var(--color-info);
}

/* Chips */
.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	padding: var(--sp-1) var(--sp-3);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: 500;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-secondary);
	cursor: default;
	transition: all var(--transition-fast);
	user-select: none;
}
.chip-filter {
	cursor: pointer;
}
.chip-filter:hover {
	border-color: var(--slate-400);
	background: var(--slate-50);
}
.chip-filter.active {
	background: var(--color-primary);
	color: var(--text-inverse);
	border-color: var(--color-primary);
	box-shadow: var(--shadow-sm);
}

/* Transformation Badges */
.badge-hash {
	background: #e0f2fe;
	color: #0369a1;
}
.badge-mask {
	background: #fce7f3;
	color: #be185d;
}
.badge-truncate {
	background: #fef3c7;
	color: #b45309;
}
.badge-rename {
	background: #dcfce7;
	color: #15803d;
}
.badge-delete {
	background: #fee2e2;
	color: #b91c1c;
}
.badge-round {
	background: #dbeafe;
	color: #1e40af;
}
.badge-regex_replace {
	background: #fae8ff;
	color: #86198f;
}
.badge-static {
	background: #f1f5f9;
	color: #475569;
}

.status-green {
	background: var(--color-success);
}
.status-orange {
	background: var(--color-warning);
}
.log-status-badge {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: var(--sp-2);
}

/* --- 11. TABLES --- */
.wp-list-table,
.phat-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
	text-align: left;
}
.wp-list-table th,
.phat-table th {
	padding: var(--sp-3) var(--sp-5);
	background: var(--surface-sunken);
	border-bottom: 2px solid var(--border);
	font-weight: 700;
	font-size: var(--text-xs);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.wp-list-table td,
.phat-table td {
	padding: var(--sp-4) var(--sp-5);
	border-bottom: 1px solid var(--border-light);
	color: var(--text-primary);
	vertical-align: middle;
}
.wp-list-table tr:hover,
.phat-table tr:hover {
	background: var(--slate-50);
}
.wp-list-table tr:last-child td,
.phat-table tr:last-child td {
	border-bottom: none;
}

/* --- 12. MODALS --- */
.phat-modal {
	display: none;
	position: fixed;
	z-index: 1000;
	inset: 0;
	overflow: auto;
}
.phat-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 1000;
	animation: fadeIn var(--transition-base);
}
.phat-modal-content {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--surface);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-xl);
	width: 800px;
	max-width: 95vw;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	z-index: 1001;
	overflow: hidden;
	animation: slideUp var(--transition-slow) ease-out;
}
.modal-header {
	padding: var(--sp-5) var(--sp-8);
	border-bottom: 1px solid var(--border);
}
.modal-header h2 {
	margin: 0;
	font-size: var(--text-xl);
	font-weight: 700;
	letter-spacing: -0.01em;
}
.modal-body {
	padding: var(--sp-8);
	overflow-y: auto;
	flex: 1;
}
.modal-footer {
	padding: var(--sp-5) var(--sp-8);
	border-top: 1px solid var(--border);
	background: var(--surface-sunken);
	display: flex;
	justify-content: flex-end;
	gap: var(--sp-3);
	flex-shrink: 0;
}
.modal-form {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
	min-height: 0;
}

.phat-modal-tabs {
	display: flex;
	background: var(--surface-sunken);
	border-bottom: 1px solid var(--border);
	padding: 0 var(--sp-5);
}
.phat-modal-tabs .modal-tab {
	padding: var(--sp-4) var(--sp-5);
	cursor: pointer;
	color: var(--text-muted);
	font-weight: 600;
	font-size: var(--text-sm);
	border-bottom: 2px solid transparent;
	transition: all var(--transition-fast);
}
.phat-modal-tabs .modal-tab:hover {
	color: var(--text-secondary);
}
.phat-modal-tabs .modal-tab.active {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
}

/* Tab Content */
.tab-content,
.modal-tab-content {
	display: none;
}
.tab-content.active,
.modal-tab-content.active {
	display: block;
	animation: fadeIn var(--transition-slow);
}
.active-tab-content {
	display: block !important;
}

/* --- 13. TOOLBAR --- */
.toolbar,
.phat-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--sp-5);
	gap: var(--sp-4);
}
.toolbar-title {
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--text-primary);
	margin: 0;
}
.toolbar-subtitle {
	margin: var(--sp-1) 0 0 0;
	color: var(--text-secondary);
	font-size: var(--text-sm);
}
.toolbar-actions {
	display: flex;
	gap: var(--sp-3);
	align-items: center;
}

/* --- 14. FILTER BAR --- */
.filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	align-items: flex-end;
	margin-bottom: var(--sp-5);
	padding: var(--sp-4);
	background: var(--surface-sunken);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
}
.filter-group {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}
.filter-group label {
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.filter-group input,
.filter-group select {
	padding: var(--sp-2) var(--sp-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	outline: none;
	background: var(--surface);
	width: auto;
}
.filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}
.filter-chip {
	padding: var(--sp-1) var(--sp-3);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: 500;
	cursor: pointer;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-secondary);
	transition: all var(--transition-fast);
	user-select: none;
}
.filter-chip:hover {
	border-color: var(--slate-400);
	background: var(--slate-50);
}
.filter-chip.active {
	background: var(--color-primary);
	color: var(--text-inverse);
	border-color: var(--color-primary);
	box-shadow: var(--shadow-sm);
}

/* --- 15. LOGS SPLIT VIEW --- */
.logs-split-view {
	display: flex;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	height: 600px;
	background: var(--surface);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}
.logs-list-pane {
	width: 350px;
	border-right: 1px solid var(--border);
	overflow-y: auto;
	background: var(--surface-sunken);
}
.logs-details-pane {
	flex: 1;
	overflow-y: auto;
	padding: 0;
}
.log-item {
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid var(--border-light);
	cursor: pointer;
	transition: background var(--transition-fast);
}
.log-item:hover {
	background: var(--surface);
}
.log-item.active {
	background: var(--color-primary-light);
	border-left: 3px solid var(--color-primary);
}

/* --- 16. PAYLOAD VIEWER --- */
.payload-viewer {
	background: var(--slate-900);
	border-radius: var(--radius-lg);
	padding: var(--sp-4);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--slate-300);
	overflow-x: auto;
	line-height: 1.6;
}
.payload-row {
	display: flex;
	padding: 2px 0;
}
.payload-key {
	color: #a78bfa;
	margin-right: var(--sp-2);
	white-space: nowrap;
	font-weight: 600;
}
.payload-value {
	color: #6ee7b7;
	word-break: break-all;
}
.payload-value-string {
	color: #6ee7b7;
}
.payload-value-number {
	color: #fbbf24;
}
.payload-value-bool {
	color: #60a5fa;
}
.payload-value-null {
	color: var(--slate-500);
	font-style: italic;
}

/* --- 17. TIMELINE --- */
.event-timeline {
	position: relative;
	padding-left: var(--sp-5);
	border-left: 2px solid var(--border);
}
.event-item {
	margin-bottom: var(--sp-5);
	position: relative;
}
.event-dot {
	position: absolute;
	left: -27px;
	top: 2px;
	width: 10px;
	height: 10px;
	background: var(--color-accent);
	border-radius: 50%;
	border: 2px solid var(--surface);
	box-shadow: 0 0 0 3px rgba(236, 0, 134, 0.15);
}
.event-time {
	font-size: var(--text-xs);
	color: var(--text-muted);
	margin-bottom: 2px;
}
.event-name {
	font-weight: 600;
	color: var(--text-primary);
	font-size: var(--text-base);
}
.event-details {
	background: var(--surface-sunken);
	padding: var(--sp-3);
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	margin-top: var(--sp-2);
	font-size: var(--text-xs);
	font-family: var(--font-mono);
	color: var(--text-secondary);
	overflow-x: auto;
}

/* --- 18. STAT CARDS --- */
.stat-card {
	text-align: center;
	padding: 0 var(--sp-5);
	border-left: 1px solid var(--border-light);
}
.stat-card:first-child {
	border-left: none;
}
.stat-value {
	font-size: var(--text-3xl);
	font-weight: 800;
	color: var(--color-primary);
	letter-spacing: -0.02em;
}
.stat-label {
	font-size: var(--text-xs);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
	margin-top: 2px;
}

/* Profile header */
.profile-header {
	background: var(--surface);
	padding: var(--sp-5);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	margin-bottom: var(--sp-5);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.profile-stat {
	text-align: center;
	padding: 0 var(--sp-5);
	border-left: 1px solid var(--border-light);
}
.profile-stat:first-child {
	border-left: none;
}
.profile-stat-value {
	font-size: var(--text-3xl);
	font-weight: 800;
	color: var(--color-accent);
}
.profile-stat-label {
	font-size: var(--text-xs);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
}

.section-title {
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--text-primary);
	margin-bottom: var(--sp-3);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-bottom: 2px solid var(--color-accent);
	display: inline-block;
	padding-bottom: var(--sp-1);
}
.identity-chip {
	background: var(--surface-sunken);
	border: 1px solid var(--border);
	padding: var(--sp-1) var(--sp-2);
	border-radius: var(--radius-sm);
	font-size: var(--text-xs);
	color: var(--text-primary);
	margin-bottom: var(--sp-1);
	display: flex;
	flex-direction: column;
}
.identity-type {
	font-size: 9px;
	color: var(--text-muted);
	text-transform: uppercase;
	font-weight: 700;
}

/* --- 19. ACCORDION --- */
.accordion-trigger {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--sp-4) var(--sp-5);
	background: var(--surface-sunken);
	border: none;
	cursor: pointer;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--text-primary);
	transition: background var(--transition-fast);
}
.accordion-trigger:hover {
	background: var(--slate-100);
}
.accordion-trigger::after {
	content: "▸";
	transition: transform var(--transition-base);
	font-size: var(--text-xs);
	color: var(--text-muted);
}
.accordion-trigger.open::after {
	transform: rotate(90deg);
}
.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--transition-slow);
}
.accordion-content.open {
	max-height: 2000px;
}

/* --- 20. DESTINATION CARDS --- */
.phat-destinations-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--sp-5);
}
.destination-card {
	background: var(--surface-sunken);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 0;
	transition: all var(--transition-base);
}
.destination-card.active {
	border-color: var(--color-primary);
	background: var(--surface);
	box-shadow:
		var(--shadow-md),
		0 0 0 1px var(--color-primary);
}
.destination-header {
	display: flex;
	align-items: center;
	padding: var(--sp-4);
	border-bottom: 1px solid var(--border-light);
	gap: var(--sp-3);
}
.destination-card.active .destination-header {
	border-bottom-color: var(--border-light);
}
.dest-icon {
	width: 38px;
	height: 38px;
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: var(--text-lg);
	flex-shrink: 0;
}
.dest-info {
	flex: 1;
}
.dest-info strong {
	display: block;
	font-size: var(--text-base);
	color: var(--text-primary);
	margin-bottom: 2px;
}
.dest-info p {
	margin: 0;
	font-size: var(--text-xs);
	color: var(--text-muted);
}
.destination-body {
	padding: var(--sp-4);
}
.destination-body input {
	padding: var(--sp-2) var(--sp-3);
	font-size: var(--text-sm);
}

/* --- 21. DATASET SELECTOR CARDS --- */
.ds-selector {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-3);
	margin-top: var(--sp-1);
}
.ds-card {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--sp-3);
	cursor: pointer;
	text-align: center;
	opacity: 0.55;
	transition: all var(--transition-fast);
	background: var(--surface-sunken);
	user-select: none;
}
.ds-card:hover {
	opacity: 0.75;
	border-color: var(--slate-300);
}
.ds-card.selected {
	opacity: 1;
	border-color: var(--color-primary);
	background: var(--color-primary-light);
	box-shadow: 0 0 0 1px var(--color-primary);
	color: var(--color-primary-hover);
}
.ds-card.selected[data-value="ga4"] {
	border-color: #f59e0b;
	background: #fffbeb;
	box-shadow: 0 0 0 1px #f59e0b;
	color: #92400e;
}
.ds-card.selected[data-value="google_ads"] {
	border-color: #10b981;
	background: #ecfdf5;
	box-shadow: 0 0 0 1px #10b981;
	color: #065f46;
}
.ds-card.selected[data-value="floodlight"] {
	border-color: #8b5cf6;
	background: #f5f3ff;
	box-shadow: 0 0 0 1px #8b5cf6;
	color: #5b21b6;
}
.ds-icon {
	width: 40px;
	height: 40px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	background: var(--slate-100);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.ds-label {
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
}

/* --- 22. LOGIN PAGE --- */
.login-page {
	background: var(--slate-950);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	margin: 0;
	font-family: var(--font-sans);
	position: relative;
	overflow: hidden;
}

/* Cosmic Background Elements */
.login-bg-container {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.login-blob {
	position: absolute;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
	opacity: 0.15;
	filter: blur(80px);
	border-radius: 50%;
	animation: float 20s infinite alternate;
}

.login-blob:nth-child(2) {
	background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
	width: 500px;
	height: 500px;
	right: -100px;
	top: -100px;
	animation-delay: -5s;
	opacity: 0.1;
}

.login-blob:nth-child(3) {
	background: radial-gradient(circle, var(--prism-plum) 0%, transparent 70%);
	width: 400px;
	height: 400px;
	left: 10%;
	bottom: -100px;
	animation-delay: -10s;
	opacity: 0.08;
}

.login-grid {
	position: absolute;
	inset: 0;
	background-image: 
		linear-gradient(rgba(124, 58, 237, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(124, 58, 237, 0.05) 1px, transparent 1px);
	background-size: 40px 40px;
	mask-image: radial-gradient(circle at center, black, transparent 80%);
}

@keyframes float {
	0% { transform: translate(0, 0) scale(1); }
	100% { transform: translate(100px, 50px) scale(1.1); }
}

.login-card {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	width: 100%;
	max-width: 420px;
	padding: var(--sp-10);
	border-radius: var(--radius-2xl);
	box-shadow: 
		var(--shadow-xl),
		0 0 0 1px rgba(255, 255, 255, 0.4) inset;
	text-align: center;
	position: relative;
	z-index: 1;
	animation: slideUp var(--transition-slow) ease-out;
}

.login-header {
	margin-bottom: var(--sp-8);
}

.login-header h2 {
	color: var(--color-primary);
	margin: 0 0 var(--sp-3) 0;
	font-size: var(--text-3xl);
	font-weight: 800;
	letter-spacing: -0.03em;
	background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.login-header p {
	color: var(--text-secondary);
	margin: 0;
	font-size: var(--text-sm);
	font-weight: 500;
}

.login-form-group {
	margin-bottom: var(--sp-5);
	text-align: left;
}

.login-form-group label {
	display: block;
	margin-bottom: var(--sp-2);
	font-size: 11px;
	font-weight: 700;
	color: var(--slate-500);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.login-form-group input {
	width: 100%;
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid rgba(148, 163, 184, 0.3);
	background: rgba(255, 255, 255, 0.5);
	border-radius: var(--radius-lg);
	font-size: var(--text-md);
	transition: all var(--transition-fast);
	outline: none;
}

.login-form-group input:focus {
	background: #fff;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 4px var(--color-primary-ring);
	transform: translateY(-1px);
}

.login-btn {
	width: 100%;
	background: var(--color-primary);
	color: white;
	border: none;
	padding: var(--sp-4);
	font-size: var(--text-md);
	font-weight: 700;
	font-family: var(--font-sans);
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: all var(--transition-fast);
	box-shadow: var(--shadow-md);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
}

.login-btn:hover {
	background: var(--color-primary-hover);
	box-shadow: var(--shadow-lg), var(--shadow-glow-primary);
	transform: translateY(-1px);
}

.login-btn:active {
	transform: translateY(0);
}
.login-error {
	background: var(--color-danger-light);
	color: var(--color-danger);
	padding: var(--sp-3);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	margin-top: var(--sp-5);
	display: none;
	border: 1px solid var(--color-danger-border);
}

/* --- 23. SPINNER --- */
#phat-loader-overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	inset: 0;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(4px);
	z-index: 9999;
}
.phat-spinner {
	width: 40px;
	height: 40px;
	border: 3px solid var(--border);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

/* --- 24. EMPTY STATE --- */
.empty-state {
	text-align: center;
	padding: var(--sp-10);
	color: var(--text-muted);
}
.empty-state-icon {
	font-size: 48px;
	margin-bottom: var(--sp-4);
	opacity: 0.5;
}
.empty-state-title {
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: var(--sp-2);
}
.empty-state-text {
	font-size: var(--text-sm);
	color: var(--text-muted);
}

/* --- 25. LOGO UPLOAD --- */
.org-logo-upload-area {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
}
.org-logo-preview {
	width: 100px;
	height: 80px;
	border: 2px dashed var(--slate-300);
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--surface);
	flex-shrink: 0;
	transition: border-color var(--transition-fast);
	overflow: hidden;
}
.org-logo-preview:hover {
	border-color: var(--slate-400);
}
.org-logo-actions {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	align-items: flex-start;
}

/* --- 26. MISC ROWS --- */
.phat-row {
	display: flex;
	gap: var(--sp-3);
	margin-bottom: var(--sp-3);
	align-items: center;
}
.property-row,
.condition-row,
.transformation-row,
.shared-var-row {
	background: var(--surface-sunken);
	padding: var(--sp-3);
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	margin-bottom: var(--sp-3);
}
.condition-row {
	display: flex;
	gap: var(--sp-3);
	align-items: center;
}
.condition-row select,
.condition-row input {
	flex: 1;
}
.condition-row .btn-remove {
	background: none;
	border: none;
	color: var(--color-danger);
	cursor: pointer;
	font-size: var(--text-xl);
	padding: var(--sp-1);
	transition: color var(--transition-fast);
}
.condition-row .btn-remove:hover {
	color: #dc2626;
}

.transformation-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--sp-3);
	background: var(--surface-sunken);
	border: 1px solid var(--border);
	margin-bottom: var(--sp-2);
	border-radius: var(--radius-md);
	transition: background var(--transition-fast);
}
.transformation-item:hover {
	background: var(--surface);
}

.segment-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--sp-4);
	background: var(--surface-sunken);
	border: 1px solid var(--border);
	margin-bottom: var(--sp-3);
	border-radius: var(--radius-lg);
	transition: background var(--transition-fast);
}
.segment-item:hover {
	background: var(--surface);
}
.segment-info h4 {
	margin: 0 0 var(--sp-1) 0;
	font-size: var(--text-lg);
}
.segment-info p {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--text-sm);
}

/* Split view for transformations */
.trans-scope {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	min-width: 140px;
}
.trans-scope-icons {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	flex-wrap: nowrap;
}
.trans-scope-icon {
	cursor: help;
}
.trans-scope-caption {
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.split-view {
	display: flex;
	gap: var(--sp-5);
	margin-top: var(--sp-5);
}
.split-pane {
	flex: 1;
	background: var(--surface);
	padding: var(--sp-4);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--border);
}
.split-pane h4 {
	margin-top: 0;
	margin-bottom: var(--sp-3);
	color: var(--text-secondary);
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
textarea.code-editor {
	width: 100%;
	height: 200px;
	font-family: var(--font-mono);
	padding: var(--sp-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--slate-900);
	color: var(--slate-200);
	resize: vertical;
	font-size: var(--text-sm);
}

/* --- 27. TOAST NOTIFICATIONS --- */
.toast-container {
	position: fixed;
	top: var(--sp-5);
	right: var(--sp-5);
	z-index: 10000;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}
.toast {
	padding: var(--sp-3) var(--sp-5);
	border-radius: var(--radius-lg);
	font-size: var(--text-sm);
	font-weight: 500;
	box-shadow: var(--shadow-lg);
	animation: slideIn var(--transition-slow) ease-out;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-width: 280px;
	color: var(--text-inverse);
}
.toast-success {
	background: var(--color-success);
}
.toast-error {
	background: var(--color-danger);
}
.toast-info {
	background: var(--color-info);
}
.toast-warning {
	background: var(--color-warning);
	color: #78350f;
}

/* --- 28. CUSTOM MULTISELECT --- */
.custom-multiselect {
	position: relative;
	width: 100%;
}

.multiselect-trigger {
	min-height: 42px;
	padding: 6px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.multiselect-trigger .placeholder {
	color: var(--text-muted);
	font-size: var(--text-sm);
}

.selected-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.selected-chips .chip {
	margin: 0;
	background: var(--color-primary-light);
	color: var(--color-primary);
	border-color: var(--color-primary-ring);
}

.multiselect-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	margin-top: 4px;
	display: none;
	flex-direction: column;
	max-height: 300px;
}

.multiselect-search {
	padding: 8px;
	border-bottom: 1px solid var(--border);
}

.multiselect-search input {
	font-size: var(--text-sm);
	padding: 6px 10px;
}

.multiselect-options {
	overflow-y: auto;
	padding: 4px 0;
}

.multiselect-option {
	padding: 8px 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	transition: background var(--transition-fast);
}

.multiselect-option:hover {
	background: var(--slate-50);
}

.multiselect-option input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
}

.multiselect-option label {
	flex: 1;
	cursor: pointer;
	font-size: var(--text-sm);
	margin: 0;
}

/* --- 29. UTILITIES --- */
.flex {
	display: flex;
}
.flex-col {
	flex-direction: column;
}
.flex-1 {
	flex: 1;
}
.items-center {
	align-items: center;
}
.items-start {
	align-items: flex-start;
}
.justify-between {
	justify-content: space-between;
}
.justify-end {
	justify-content: flex-end;
}
.gap-1 {
	gap: var(--sp-1);
}
.gap-2 {
	gap: var(--sp-2);
}
.gap-3 {
	gap: var(--sp-3);
}
.gap-4 {
	gap: var(--sp-4);
}
.gap-5 {
	gap: var(--sp-5);
}
.text-muted {
	color: var(--text-muted);
}
.text-sm {
	font-size: var(--text-sm);
}
.text-xs {
	font-size: var(--text-xs);
}
.text-mono {
	font-family: var(--font-mono);
}
.text-right {
	text-align: right;
}
.text-center {
	text-align: center;
}
.font-semibold {
	font-weight: 600;
}
.font-bold {
	font-weight: 700;
}
.mb-0 {
	margin-bottom: 0;
}
.mb-2 {
	margin-bottom: var(--sp-2);
}
.mb-3 {
	margin-bottom: var(--sp-3);
}
.mb-4 {
	margin-bottom: var(--sp-4);
}
.mb-5 {
	margin-bottom: var(--sp-5);
}
.mt-0 {
	margin-top: 0;
}
.mt-2 {
	margin-top: var(--sp-2);
}
.mt-3 {
	margin-top: var(--sp-3);
}
.mt-4 {
	margin-top: var(--sp-4);
}
.mt-5 {
	margin-top: var(--sp-5);
}
.p-0 {
	padding: 0;
}
.p-3 {
	padding: var(--sp-3);
}
.p-4 {
	padding: var(--sp-4);
}
.p-5 {
	padding: var(--sp-5);
}
.w-full {
	width: 100%;
}
.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
.rounded-full {
	border-radius: var(--radius-full);
}
.overflow-hidden {
	overflow: hidden;
}
.no-border {
	border: none;
}
.cursor-pointer {
	cursor: pointer;
}

/* --- 29. KEYFRAME ANIMATIONS --- */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes slideUp {
	from {
		opacity: 0;
		transform: translate(-50%, -48%);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
}
@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}
@keyframes shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

/* --- 30. CAMPAIGN ITEMS --- */
.campaign-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--sp-4);
	background: var(--surface-sunken);
	border: 1px solid var(--border);
	margin-bottom: var(--sp-3);
	border-radius: var(--radius-lg);
	transition: background var(--transition-fast);
}
.campaign-item:hover {
	background: var(--surface);
}
.campaign-info h4 {
	margin: 0 0 var(--sp-1) 0;
	font-size: var(--text-lg);
}
.campaign-info p {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--text-sm);
}
.campaign-actions {
	display: flex;
	gap: var(--sp-3);
	align-items: center;
}

.badge.active {
	background: var(--color-success-light);
	color: #166534;
}
.badge.inactive {
	background: var(--slate-100);
	color: var(--slate-600);
}
.badge.segment {
	background: #e0e7ff;
	color: #3730a3;
}
.badge.content {
	background: #fce7f3;
	color: #9d174d;
}

/* --- 31. PAGE TABS --- */
.tabs {
	display: flex;
	border-bottom: 2px solid var(--border);
	margin-bottom: var(--sp-5);
}
.tab {
	padding: var(--sp-3) var(--sp-5);
	cursor: pointer;
	border-bottom: 3px solid transparent;
	font-weight: 600;
	font-size: var(--text-sm);
	color: var(--text-muted);
	transition: all var(--transition-fast);
	margin-bottom: -2px;
}
.tab:hover {
	color: var(--text-secondary);
}
.tab.active {
	border-bottom-color: var(--color-primary);
	color: var(--color-primary);
}

/* --- 32. CONTENT ITEMS --- */
.type-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--sp-4);
	background: var(--surface-sunken);
	border: 1px solid var(--border);
	margin-bottom: var(--sp-3);
	border-radius: var(--radius-lg);
	transition: background var(--transition-fast);
}
.type-item:hover {
	background: var(--surface);
}
.type-info h4 {
	margin: 0 0 var(--sp-1) 0;
	font-size: var(--text-lg);
}
.type-info p {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--text-sm);
}

.content-item {
	padding: var(--sp-4);
	margin-bottom: var(--sp-3);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	transition: box-shadow var(--transition-fast);
}
.content-item:hover {
	box-shadow: var(--shadow-sm);
}
.content-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--sp-3);
}
.content-header h4 {
	margin: 0;
	font-size: var(--text-lg);
}

.attributes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--sp-4);
	background: var(--surface-sunken);
	padding: var(--sp-4);
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
}
.attr-field {
	font-size: var(--text-sm);
}
.attr-label {
	display: block;
	color: var(--text-muted);
	font-size: var(--text-xs);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.5px;
	margin-bottom: 2px;
}

/* --- SEGMENTS --- */

/* Segment list items */
.segment-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--sp-4) var(--sp-5);
	border-bottom: 1px solid var(--border-light);
	transition: background var(--transition-fast);
}
.segment-item:last-child {
	border-bottom: none;
}
.segment-item:hover {
	background: var(--slate-50);
}
.segment-info h4 {
	margin: 0 0 var(--sp-1) 0;
	font-size: var(--text-base);
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}
.segment-info p {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--text-secondary);
}
.segment-link {
	color: var(--text-primary);
	text-decoration: none;
	font-weight: 600;
	transition: color var(--transition-fast);
}
.segment-link:hover {
	color: var(--color-primary);
}

/* Enhanced segment list cards */
.segment-item-rich {
	gap: var(--sp-4);
	align-items: center;
}

.segment-chart-area {
	flex-shrink: 0;
	width: 100px;
	display: flex;
	align-items: center;
}

.segment-chart-area canvas {
	display: block;
	opacity: 0.8;
}

/* Segment detail page */
.segment-stat-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-4);
}

.growth-chart-container {
	position: relative;
	width: 100%;
	min-height: 200px;
}
.growth-chart-container canvas {
	width: 100% !important;
	display: block;
}

.time-range-chips {
	display: flex;
	gap: var(--sp-2);
}

/* Campaign link cards */
.campaign-link-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--sp-3);
}
.campaign-link-card {
	text-decoration: none;
	color: inherit;
	display: block;
	margin-bottom: 0;
}
.campaign-link-card:hover {
	text-decoration: none;
	color: inherit;
}

/* Segment user search */
.segment-user-search {
	width: 260px !important;
	padding: var(--sp-2) var(--sp-3) !important;
	font-size: var(--text-sm) !important;
}

/* Rule display cards */
.rule-card {
	display: flex;
	gap: var(--sp-3);
	background: var(--surface-sunken);
	border: 1px solid var(--border);
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--radius-md);
}
.rule-card-number {
	width: 24px;
	height: 24px;
	background: var(--color-primary);
	color: var(--text-inverse);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-xs);
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 2px;
}
.rule-card-body {
	flex: 1;
	min-width: 0;
}
.rule-event {
	margin-bottom: var(--sp-1);
}
.rule-condition {
	font-size: var(--text-sm);
	color: var(--text-secondary);
	margin-bottom: var(--sp-1);
}
.rule-condition code {
	background: var(--slate-200);
	padding: 1px var(--sp-2);
	border-radius: var(--radius-sm);
	font-size: var(--text-xs);
	font-family: var(--font-mono);
}
.rule-operator {
	color: var(--color-primary);
	font-weight: 600;
	text-transform: lowercase;
}
.rule-time {
	margin-top: var(--sp-1);
}
.rule-connector {
	display: flex;
	justify-content: center;
	padding: var(--sp-1) 0;
}

/* Condition row in the segment builder modal */
.condition-row {
	background: var(--surface-sunken);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--sp-3);
	margin-bottom: var(--sp-3);
	transition: border-color var(--transition-fast);
}
.condition-row:hover {
	border-color: var(--slate-300);
}
.condition-row-inputs {
	display: flex;
	gap: var(--sp-2);
	align-items: flex-end;
}
.cond-field {
	flex: 1;
	min-width: 0;
}
.cond-field label {
	display: block;
	margin-bottom: 2px;
	font-size: var(--text-xs);
	color: var(--text-muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.cond-field input,
.cond-field select {
	width: 100%;
	padding: var(--sp-2);
	font-size: var(--text-sm);
}
.cond-field-sm {
	flex: 0 0 130px;
}
.cond-time-row {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-2);
	padding-top: var(--sp-2);
	border-top: 1px solid var(--border-light);
}
.cond-time-row .cond-days {
	width: 70px !important;
}
.cond-time-toggle {
	margin: 0;
}
.btn-remove {
	background: none;
	border: none;
	color: var(--text-muted);
	font-size: 20px;
	cursor: pointer;
	padding: var(--sp-1);
	line-height: 1;
	transition: color var(--transition-fast);
	flex-shrink: 0;
	align-self: flex-end;
	margin-bottom: 4px;
}
.btn-remove:hover {
	color: var(--color-danger);
}

/* --- 33. DATA LINEAGE DIFF UI --- */
.diff-deleted {
	text-decoration: line-through;
	opacity: 0.6;
	color: var(--prism-rubine);
}
.diff-added {
	background-color: #bbf7d0;
	color: #166534;
	padding: 2px 4px;
	border-radius: 4px;
}
.diff-modified {
	background-color: #fef08a;
	color: #854d0e;
	padding: 2px 4px;
	border-radius: 4px;
}

/* --- 34. TRANSFORMATIONS PAGE --- */
.trans-split-view {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-5);
	margin-top: var(--sp-3);
}
.trans-pane {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.trans-pane-header {
	padding: var(--sp-3) var(--sp-4);
	background: var(--surface-sunken);
	border-bottom: 1px solid var(--border);
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.trans-code-editor {
	width: 100%;
	min-height: 240px;
	padding: var(--sp-4);
	background: var(--slate-900);
	color: #e2e8f0;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	line-height: 1.6;
	border: none;
	resize: vertical;
	outline: none;
	flex: 1;
}
.trans-code-editor:focus {
	box-shadow: none;
	border-color: transparent;
}
.trans-preview-output {
	background: var(--slate-900);
	padding: var(--sp-4);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: #e2e8f0;
	line-height: 1.6;
	overflow: auto;
	flex: 1;
	min-height: 240px;
}
.trans-preview-output .diff-row {
	display: flex;
	gap: var(--sp-2);
	padding: 1px 0;
	align-items: baseline;
}
.trans-preview-output .diff-key {
	color: #a78bfa;
	font-weight: 600;
	white-space: nowrap;
}
.trans-preview-output .diff-val-unchanged {
	color: #6ee7b7;
}
.trans-preview-output .diff-val-modified {
	color: #fbbf24;
}
.trans-preview-output .diff-val-modified .diff-old {
	text-decoration: line-through;
	opacity: 0.5;
	color: #f87171;
	margin-right: var(--sp-2);
}
.trans-preview-output .diff-val-modified .diff-arrow {
	color: var(--slate-500);
	margin: 0 var(--sp-1);
}
.trans-preview-output .diff-val-deleted {
	color: #f87171;
	text-decoration: line-through;
	opacity: 0.6;
}
.trans-preview-output .diff-val-added {
	color: #34d399;
}
.trans-preview-output .diff-badge {
	font-size: 9px;
	padding: 1px 5px;
	border-radius: 3px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin-left: var(--sp-2);
}
.trans-preview-output .diff-badge-modified {
	background: rgba(251, 191, 36, 0.2);
	color: #fbbf24;
}
.trans-preview-output .diff-badge-deleted {
	background: rgba(248, 113, 113, 0.2);
	color: #f87171;
}
.trans-preview-output .diff-badge-added {
	background: rgba(52, 211, 153, 0.2);
	color: #34d399;
}

/* In-modal preview panel */
.trans-modal-preview {
	margin-top: var(--sp-4);
	background: var(--slate-900);
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid var(--slate-700, #334155);
}
.trans-modal-preview-header {
	padding: var(--sp-2) var(--sp-3);
	background: rgba(255, 255, 255, 0.05);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--slate-400);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}
.trans-modal-preview-body {
	padding: var(--sp-3);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	line-height: 1.6;
	color: #e2e8f0;
	max-height: 120px;
	overflow-y: auto;
}
.trans-modal-preview-body .preview-before {
	color: #f87171;
	text-decoration: line-through;
	opacity: 0.6;
}
.trans-modal-preview-body .preview-after {
	color: #34d399;
}
.trans-modal-preview-body .preview-label {
	color: var(--slate-500);
	font-size: 9px;
	text-transform: uppercase;
	font-weight: 700;
	margin-right: var(--sp-2);
}

/* Field autocomplete dropdown */
.field-autocomplete-wrapper {
	position: relative;
}
.field-autocomplete {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--surface);
	border: 1px solid var(--border);
	border-top: none;
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	max-height: 180px;
	overflow-y: auto;
	z-index: 100;
	box-shadow: var(--shadow-lg);
	display: none;
}
.field-autocomplete.open {
	display: block;
	animation: fadeIn var(--transition-fast);
}
.field-autocomplete-item {
	padding: var(--sp-2) var(--sp-3);
	font-size: var(--text-sm);
	font-family: var(--font-mono);
	cursor: pointer;
	transition: background var(--transition-fast);
	color: var(--text-primary);
	border-bottom: 1px solid var(--border-light);
}
.field-autocomplete-item:last-child {
	border-bottom: none;
}
.field-autocomplete-item:hover,
.field-autocomplete-item.active {
	background: var(--color-primary-light);
	color: var(--color-primary-hover);
}
.field-autocomplete-item .match {
	font-weight: 700;
	color: var(--color-primary);
}

/* Destination preset tabs */
.trans-dest-tabs {
	display: flex;
	gap: var(--sp-1);
	margin-bottom: var(--sp-2);
}
.trans-dest-tab {
	padding: var(--sp-1) var(--sp-3);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-secondary);
	transition: all var(--transition-fast);
	user-select: none;
}
.trans-dest-tab:hover {
	border-color: var(--slate-400);
}
.trans-dest-tab.active {
	background: var(--color-primary);
	color: var(--text-inverse);
	border-color: var(--color-primary);
}

/* Code Editor Textarea */
.code-editor-textarea {
	width: 100%;
	background: #1a1e2e;
	color: #e2e8f0;
	font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
	font-size: 13px;
	line-height: 1.6;
	padding: 14px 16px;
	border: 1px solid #334155;
	border-radius: var(--radius-md);
	resize: vertical;
	outline: none;
	tab-size: 2;
	caret-color: #60a5fa;
	transition: border-color var(--transition-fast);
}
.code-editor-textarea:focus {
	border-color: #60a5fa;
	box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}
.var-example {
	display: block;
	color: #0ea5e9;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	padding: 3px 6px;
	border-radius: 4px;
	transition: background var(--transition-fast);
}
.var-example:hover {
	background: var(--slate-200, #e2e8f0);
	color: #0284c7;
}

/* --- SENTRY: MODAL OVERLAY --- */
.phat-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.65);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 1050;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-5);
}
.phat-modal-box {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-xl);
	width: 100%;
	position: relative;
	padding: var(--sp-6);
}
.phat-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--sp-5);
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--border);
}

/* --- SENTRY: STATS GRID --- */
.phat-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-4);
	margin-bottom: var(--sp-5);
}
@media (max-width: 900px) {
	.phat-stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
.phat-stat-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--sp-5) var(--sp-5);
	box-shadow: var(--shadow-sm);
}
.phat-stat-card .stat-label {
	font-size: var(--text-xs);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
	margin-bottom: var(--sp-2);
}
.phat-stat-card .stat-value {
	font-size: var(--text-3xl);
	font-weight: 800;
	color: var(--text-primary);
	line-height: 1;
	margin-bottom: var(--sp-1);
}
.phat-stat-card .stat-trend {
	font-size: var(--text-xs);
	color: var(--text-muted);
}
.phat-stat-card .stat-trend.trend-up {
	color: var(--color-success);
}
.phat-stat-card .stat-trend.trend-down {
	color: var(--color-danger);
}

/* ============================================================
   ANALYTICS DASHBOARD
   ============================================================ */

.analytics-kpi-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--sp-3);
}

@media (max-width: 1400px) {
	.analytics-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
	.analytics-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

.analytics-kpi-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--sp-4);
	display: flex;
	gap: var(--sp-3);
	align-items: flex-start;
	transition: box-shadow var(--transition-fast);
}

.analytics-kpi-card:hover {
	box-shadow: var(--shadow-md);
}

.analytics-kpi-card.kpi-alert {
	border-color: var(--color-danger-border);
	background: var(--color-danger-light);
}

.kpi-icon {
	font-size: 22px;
	line-height: 1;
	flex-shrink: 0;
	margin-top: 2px;
}

.kpi-body {
	min-width: 0;
}

.kpi-label {
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--sp-1);
}

.kpi-value {
	font-size: var(--text-2xl);
	font-weight: 800;
	color: var(--text-primary);
	line-height: 1.1;
	margin-bottom: 2px;
}

.kpi-sub {
	font-size: var(--text-xs);
	color: var(--text-muted);
}

/* Two-column layout: big chart + activity feed */
.analytics-main-row {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: var(--sp-4);
	align-items: stretch;
}

.analytics-main-row > .analytics-chart-card {
	min-height: 320px;
}

@media (max-width: 1100px) {
	.analytics-main-row { grid-template-columns: 1fr; }
}

.analytics-chart-card {
	min-width: 0;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.analytics-trend-chart-wrap {
	width: 100%;
	min-height: 240px;
	flex: 1;
	min-width: 0;
	position: relative;
}

.analytics-chart-card canvas {
	width: 100% !important;
	max-width: 100%;
	display: block;
}

.trend-empty-state {
	padding: 40px 0;
	min-height: 240px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.trend-empty-hidden {
	display: none;
}

.analytics-recent-card {
	overflow: hidden;
}

/* Activity feed */
.activity-item {
	display: flex;
	gap: var(--sp-2);
	padding: var(--sp-2) 0;
	border-bottom: 1px solid var(--border-light);
	align-items: flex-start;
}

.activity-item:last-child {
	border-bottom: none;
}

.activity-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-primary);
	flex-shrink: 0;
	margin-top: 5px;
}

.activity-body {
	min-width: 0;
	flex: 1;
}

/* Two-column tables row */
.analytics-tables-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-4);
}

@media (max-width: 900px) {
	.analytics-tables-row { grid-template-columns: 1fr; }
}

/* Inline bar within table */
.analytics-bar {
	height: 3px;
	background: var(--color-primary);
	border-radius: 2px;
	opacity: 0.35;
	min-width: 4px;
}

/* Quick links */
.analytics-quick-links {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--sp-3);
}

@media (max-width: 1200px) {
	.analytics-quick-links { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
	.analytics-quick-links { grid-template-columns: repeat(2, 1fr); }
}

.analytics-quick-link {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--sp-3) var(--sp-4);
	display: flex;
	gap: var(--sp-3);
	align-items: center;
	text-decoration: none;
	color: var(--text-primary);
	transition: background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.analytics-quick-link:hover {
	background: var(--color-primary-light);
	border-color: var(--color-primary);
	box-shadow: var(--shadow-sm);
}

.analytics-quick-link.quick-link-alert {
	border-color: var(--color-danger-border);
	background: var(--color-danger-light);
}

.quick-link-icon {
	font-size: 20px;
	flex-shrink: 0;
}

.text-truncate-analytics {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 220px;
}

.ml-2 { margin-left: var(--sp-2); }
.mt-0 { margin-top: 0; }

/* ============================================================
   LIVE VIEW ENHANCEMENTS
   ============================================================ */

/* Animated pulse dot for live view */
.live-pulse-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-success);
	margin-left: 8px;
	vertical-align: middle;
	position: relative;
	top: -1px;
	box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
}

.live-pulse-dot.pulse-active {
	animation: live-pulse 0.8s ease-out;
}

@keyframes live-pulse {
	0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
	70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
	100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Filter bar input */
.filter-bar-input {
	padding: 6px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface);
	font-size: var(--text-sm);
	color: var(--text-primary);
	outline: none;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.filter-bar-input:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-ring);
}

/* Compact filter bar (no full padding block) */
.filter-bar.mb-3 {
	margin-bottom: var(--sp-3);
	padding: var(--sp-2) var(--sp-3);
	align-items: center;
}

/* ============================================================
   EVENT TEST ENGINE RESULT UI
   ============================================================ */

#test-result-container {
	border-radius: var(--radius-lg);
	padding: 16px;
	margin-top: 14px;
	font-size: 13px;
	line-height: 1.5;
}

.test-result-header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}

.test-result-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	border-radius: 50%;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	flex-shrink: 0;
}

.test-result-title {
	font-weight: 600;
	font-size: 14px;
	color: var(--text-primary);
}

.test-result-sub {
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 2px;
}

.test-result-section {
	border-top: 1px solid rgba(0,0,0,0.08);
	padding-top: 12px;
	margin-top: 12px;
}

.test-result-section-title {
	font-weight: 600;
	font-size: 12px;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
}

.test-result-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}

.test-result-table td {
	padding: 3px 6px;
	vertical-align: top;
}

.test-result-table td:first-child {
	color: var(--text-muted);
	font-weight: 500;
	width: 70px;
	white-space: nowrap;
}

.test-result-payload-label {
	font-size: 11px;
	color: var(--text-muted);
	font-weight: 500;
	margin-bottom: 4px;
}

.test-result-payload {
	background: var(--slate-900, #0f172a);
	color: #e2e8f0;
	border-radius: var(--radius-md);
	padding: 12px;
	font-size: 11px;
	font-family: 'JetBrains Mono', monospace;
	overflow-x: auto;
	white-space: pre;
	margin: 0;
	max-height: 260px;
	overflow-y: auto;
}

/* ============================================================
   SHARED VARIABLES PAGE
   ============================================================ */

/* --- Variables Grid --- */
.vars-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--sp-4);
}

.var-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--sp-4);
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
	position: relative;
}

.var-card:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	border-color: var(--color-primary-light, #93c5fd);
}

.var-card-header {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
}

.var-card-icon {
	font-size: 20px;
	line-height: 1;
	flex-shrink: 0;
	margin-top: 2px;
}

.var-card-meta {
	flex: 1;
	min-width: 0;
}

.var-card-name {
	font-size: 14px;
	font-weight: 700;
	color: var(--text-primary);
	font-family: 'JetBrains Mono', monospace;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.var-card-snippet {
	font-size: 11px;
	font-weight: 500;
	color: var(--color-primary);
	background: var(--color-primary-bg, #eff6ff);
	border: 1px solid var(--color-primary-light, #bfdbfe);
	border-radius: var(--radius-sm);
	padding: 1px 6px;
	font-family: 'JetBrains Mono', monospace;
	cursor: pointer;
	user-select: all;
}

.var-card-snippet:hover {
	background: var(--color-primary-light, #bfdbfe);
}

.var-card-type {
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 2px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.var-card-description {
	font-size: 12px;
	color: var(--text-secondary);
	line-height: 1.5;
	margin: 0;
}

.var-card-path {
	font-size: 11px;
	color: var(--text-muted);
	font-family: 'JetBrains Mono', monospace;
	background: var(--slate-50, #f8fafc);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 4px 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}

.var-card-path:hover {
	background: var(--slate-100, #f1f5f9);
}

.var-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--sp-1);
	padding-top: var(--sp-2);
	border-top: 1px solid var(--border);
}

.var-card-usage {
	font-size: 11px;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	gap: 4px;
}

.var-card-usage.used {
	color: var(--color-success, #10b981);
	font-weight: 500;
}

.var-card-actions {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
}

/* --- Source Type Grid (in editor modal) --- */
.source-type-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-2);
}

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

.source-tile {
	border: 2px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--sp-3) var(--sp-2);
	text-align: center;
	cursor: pointer;
	transition: all 0.15s ease;
	background: var(--surface);
}

.source-tile:hover {
	border-color: var(--color-primary);
	background: var(--color-primary-bg, #eff6ff);
}

.source-tile.active {
	border-color: var(--color-primary);
	background: var(--color-primary-bg, #eff6ff);
	box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

.source-tile-icon {
	font-size: 22px;
	line-height: 1;
	margin-bottom: 4px;
}

.source-tile-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-primary);
}

.source-tile-desc {
	font-size: 10px;
	color: var(--text-muted);
	margin-top: 2px;
	line-height: 1.3;
}

/* --- Variable Editor --- */
.var-editor-wrapper {
	position: relative;
	display: flex;
	align-items: stretch;
}

.var-editor-prefix {
	background: var(--slate-100, #f1f5f9);
	border: 1px solid var(--border);
	border-right: none;
	border-radius: var(--radius-md) 0 0 var(--radius-md);
	padding: 8px 10px;
	font-size: 12px;
	font-family: 'JetBrains Mono', monospace;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	white-space: nowrap;
	flex-shrink: 0;
}

.var-editor-wrapper .code-editor-textarea {
	flex: 1;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.var-editor-wrapper:not(:has(.var-editor-prefix[style*="block"])) .code-editor-textarea,
.var-editor-wrapper .code-editor-textarea:only-child {
	border-radius: var(--radius-md);
}

/* --- Live Preview Box --- */
.var-preview-box {
	background: var(--slate-50, #f8fafc);
	border: 1px solid var(--border);
	border-left: 3px solid var(--color-success, #10b981);
	border-radius: var(--radius-md);
	padding: 10px 12px;
	margin-top: var(--sp-2);
}

.var-preview-result {
	font-size: 13px;
	font-family: 'JetBrains Mono', monospace;
	color: var(--text-primary);
	word-break: break-all;
}

.var-preview-result.error {
	color: var(--color-danger, #ef4444);
	font-size: 12px;
}

/* --- Examples Panel --- */
.examples-list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

.example-item {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 6px 8px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background 0.1s;
}

.example-item:hover {
	background: var(--color-primary-bg, #eff6ff);
}

.example-label {
	font-size: 12px;
	color: var(--text-secondary);
	flex: 0 0 160px;
}

.example-code {
	font-size: 11px;
	font-family: 'JetBrains Mono', monospace;
	color: var(--color-primary);
	background: white;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 2px 6px;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- Templates Grid --- */
.templates-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--sp-2);
}

.template-item {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: var(--sp-3);
	cursor: pointer;
	transition: all 0.15s ease;
	background: var(--surface);
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
}

.template-item:hover {
	border-color: var(--color-primary);
	background: var(--color-primary-bg, #eff6ff);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.template-icon {
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
}

.template-info {
	flex: 1;
	min-width: 0;
}

.template-name {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-primary);
}

.template-desc {
	font-size: 11px;
	color: var(--text-muted);
	margin-top: 2px;
	line-height: 1.3;
}

/* --- Variable Picker (event modal floating panel) --- */
.var-picker-panel {
	position: absolute;
	z-index: 9999;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: 0 8px 32px rgba(0,0,0,0.18);
	width: 340px;
	max-height: 380px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.var-picker-header {
	padding: 10px 12px 8px;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	gap: 8px;
}

.var-picker-search {
	flex: 1;
	height: 30px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 0 8px;
	font-size: 12px;
	outline: none;
}

.var-picker-search:focus {
	border-color: var(--color-primary);
}

.var-picker-list {
	overflow-y: auto;
	flex: 1;
	padding: 4px;
}

.var-picker-item {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background 0.1s;
}

.var-picker-item:hover {
	background: var(--color-primary-bg, #eff6ff);
}

.var-picker-icon {
	font-size: 16px;
	flex-shrink: 0;
	width: 22px;
	text-align: center;
}

.var-picker-info {
	flex: 1;
	min-width: 0;
}

.var-picker-name {
	font-size: 12px;
	font-weight: 600;
	font-family: 'JetBrains Mono', monospace;
	color: var(--text-primary);
}

.var-picker-desc {
	font-size: 11px;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.var-picker-token {
	font-size: 10px;
	color: var(--color-primary);
	background: var(--color-primary-bg, #eff6ff);
	border: 1px solid var(--color-primary-light, #bfdbfe);
	border-radius: var(--radius-sm);
	padding: 1px 5px;
	font-family: 'JetBrains Mono', monospace;
	flex-shrink: 0;
}

.var-picker-empty {
	text-align: center;
	padding: 24px 16px;
	color: var(--text-muted);
	font-size: 12px;
}

.var-picker-footer {
	padding: 8px 12px;
	border-top: 1px solid var(--border);
	font-size: 11px;
	color: var(--text-muted);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Inline {{token}} highlighting in inputs */
.var-token-highlight {
	background: var(--color-primary-bg, #eff6ff);
	color: var(--color-primary);
	border-radius: 3px;
	padding: 0 2px;
	font-family: 'JetBrains Mono', monospace;
}

/* Trigger button next to value inputs */
.var-insert-btn {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 11px;
	padding: 2px 6px;
	height: 22px;
	line-height: 1;
	cursor: pointer;
	background: var(--color-primary-bg, #eff6ff);
	border: 1px solid var(--color-primary-light, #bfdbfe);
	border-radius: var(--radius-sm);
	color: var(--color-primary);
	font-weight: 600;
	white-space: nowrap;
	transition: background 0.1s;
	z-index: 2;
}

.var-insert-btn:hover {
	background: var(--color-primary-light, #bfdbfe);
}