/**
 * TestimonialFlow ? Premium Layer
 * Loaded AFTER frontend.css / public.css. Purely additive: overrides tokens and
 * upgrades every existing component to a 3D, glass, motion-rich surface.
 * Scoped to .tf-app, .tf-builder, .tf-public-form, .tf-recorder, .tf-collect-wrap.
 *
 * @package TestimonialFlow
 */

/* ==========================================================================
   1. TOKENS ? Aurora (light) & Obsidian (dark)
   ========================================================================== */

.tf-app {
	--tf-color-primary: #4f46e5;
	--tf-primary-600: #4338ca;
	--tf-primary-300: #a5b4fc;
	--tf-accent: #06b6d4;
	--tf-accent-2: #ec4899;
	--tf-color-secondary: #475569;

	--tf-color-bg: #eef1f8;
	--tf-color-surface: #ffffff;
	--tf-color-text: #0b1220;
	--tf-color-muted: #64748b;
	--tf-color-border: rgba(15, 23, 42, 0.08);

	--tf-color-success: #047857;
	--tf-color-success-bg: #d1fae5;
	--tf-color-warning: #b45309;
	--tf-color-warning-bg: #fef3c7;
	--tf-color-error: #be123c;
	--tf-color-error-bg: #ffe4e6;

	/* Glass */
	--tf-glass: rgba(255, 255, 255, 0.72);
	--tf-glass-strong: rgba(255, 255, 255, 0.9);
	--tf-glass-line: rgba(255, 255, 255, 0.75);
	--tf-blur: 18px;

	/* Depth ? layered shadows create real perceived elevation */
	--tf-e1: 0 1px 2px rgba(11, 18, 32, 0.05), 0 2px 6px rgba(11, 18, 32, 0.04);
	--tf-e2: 0 2px 4px rgba(11, 18, 32, 0.05), 0 8px 20px -6px rgba(11, 18, 32, 0.1);
	--tf-e3: 0 4px 10px rgba(11, 18, 32, 0.06), 0 20px 44px -12px rgba(11, 18, 32, 0.18);
	--tf-e4: 0 10px 24px rgba(11, 18, 32, 0.1), 0 40px 80px -20px rgba(11, 18, 32, 0.28);
	--tf-glow: 0 0 0 1px rgba(79, 70, 229, 0.18), 0 12px 36px -10px rgba(79, 70, 229, 0.45);
	--tf-inner-top: inset 0 1px 0 rgba(255, 255, 255, 0.85);

	--tf-shadow: var(--tf-e3);
	--tf-shadow-sm: var(--tf-e1);

	--tf-radius: 18px;
	--tf-radius-sm: 12px;
	--tf-radius-lg: 26px;

	--tf-grad-primary: linear-gradient(135deg, #6366f1 0%, #4f46e5 45%, #7c3aed 100%);
	--tf-grad-sheen: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.55) 48%, transparent 74%);
	--tf-grad-border: linear-gradient(135deg, rgba(99, 102, 241, 0.55), rgba(6, 182, 212, 0.35), rgba(236, 72, 153, 0.35));

	--tf-font: "Inter", "IBM Plex Sans", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
	--tf-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--tf-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--tf-fast: 160ms;
	--tf-mid: 320ms;
	--tf-slow: 620ms;

	/* Pointer-tracked tilt, written by premium.js */
	--tf-rx: 0deg;
	--tf-ry: 0deg;
	--tf-mx: 50%;
	--tf-my: 50%;

	background: transparent;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.tf-app[data-tf-theme="dark"] {
	--tf-color-bg: #070b14;
	--tf-color-surface: #111827;
	--tf-color-surface-2: #1f2937;
	--tf-color-text: #f3f4f6;
	--tf-color-muted: #9ca3af;
	--tf-color-border: rgba(148, 163, 184, 0.22);
	/* Accent for fills/borders/focus ? body text uses neutrals instead */
	--tf-color-primary: #6366f1;
	--tf-primary-300: #c7d2fe;
	--tf-color-secondary: #cbd5e1;

	--tf-color-success: #34d399;
	--tf-color-success-bg: rgba(16, 185, 129, 0.16);
	--tf-color-warning: #fbbf24;
	--tf-color-warning-bg: rgba(245, 158, 11, 0.16);
	--tf-color-error: #fb7185;
	--tf-color-error-bg: rgba(244, 63, 94, 0.16);
	--tf-color-danger: #f87171;

	--tf-glass: rgba(17, 24, 39, 0.82);
	--tf-glass-strong: rgba(15, 23, 42, 0.96);
	--tf-glass-line: rgba(148, 163, 184, 0.18);

	--tf-e1: 0 1px 2px rgba(0, 0, 0, 0.4);
	--tf-e2: 0 6px 18px -6px rgba(0, 0, 0, 0.6);
	--tf-e3: 0 18px 44px -14px rgba(0, 0, 0, 0.75);
	--tf-e4: 0 32px 80px -20px rgba(0, 0, 0, 0.85);
	--tf-glow: 0 0 0 1px rgba(99, 102, 241, 0.28), 0 16px 44px -12px rgba(99, 102, 241, 0.45);
	--tf-inner-top: inset 0 1px 0 rgba(255, 255, 255, 0.07);
	--tf-grad-sheen: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.12) 48%, transparent 74%);
	--tf-grad-primary: linear-gradient(135deg, #818cf8 0%, #6366f1 45%, #7c3aed 100%);

	color: var(--tf-color-text);
	color-scheme: dark;
}

/* ==========================================================================
   2. AMBIENT STAGE ? animated aurora mesh + fine grid + grain
   ========================================================================== */

/* NOTE: `perspective` is deliberately NOT set on .tf-app. A perspective on the root
   would make it the containing block for the position:fixed modal, drawer, toasts and
   backdrop, breaking full-viewport overlays. Perspective lives on the inner content
   and grid layers instead, which contain no fixed descendants. */
.tf-app {
	background-color: var(--tf-color-bg);
}

.tf-app__stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
	contain: layout paint;
}

.tf-app__stage-blob {
	position: absolute;
	width: 46vw;
	height: 46vw;
	min-width: 380px;
	min-height: 380px;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.5;
	will-change: transform;
}

.tf-app__stage-blob--a {
	top: -14vw;
	left: -8vw;
	background: radial-gradient(circle at 30% 30%, #818cf8, transparent 65%);
	animation: tf-drift-a 26s var(--tf-ease) infinite alternate;
}

.tf-app__stage-blob--b {
	top: 8vw;
	right: -12vw;
	background: radial-gradient(circle at 60% 40%, #22d3ee, transparent 65%);
	animation: tf-drift-b 32s var(--tf-ease) infinite alternate;
	opacity: 0.38;
}

.tf-app__stage-blob--c {
	bottom: -18vw;
	left: 28vw;
	background: radial-gradient(circle at 50% 50%, #f472b6, transparent 65%);
	animation: tf-drift-c 38s var(--tf-ease) infinite alternate;
	opacity: 0.3;
}

.tf-app[data-tf-theme="dark"] .tf-app__stage-blob {
	opacity: 0.34;
}

.tf-app__stage-grid {
	position: absolute;
	inset: -2px;
	background-image:
		linear-gradient(to right, rgba(15, 23, 42, 0.055) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(15, 23, 42, 0.055) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 25%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 25%, transparent 78%);
}

.tf-app[data-tf-theme="dark"] .tf-app__stage-grid {
	background-image:
		linear-gradient(to right, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
}

@keyframes tf-drift-a {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	100% { transform: translate3d(6vw, 5vw, 0) scale(1.18); }
}

@keyframes tf-drift-b {
	0%   { transform: translate3d(0, 0, 0) scale(1.1); }
	100% { transform: translate3d(-7vw, 8vw, 0) scale(0.92); }
}

@keyframes tf-drift-c {
	0%   { transform: translate3d(0, 0, 0) scale(0.95); }
	100% { transform: translate3d(8vw, -6vw, 0) scale(1.2); }
}

/* Keep real content above the stage.
   NOTE: sidebar/topbar are sticky, and modal/drawer/toasts/backdrop are fixed in
   frontend.css ? we must NOT touch their `position`, only guarantee stacking. */
.tf-app__main,
.tf-app__auth-card {
	position: relative;
	z-index: 1;
}

.tf-app__sidebar {
	z-index: var(--tf-z-sidebar);
}

/* ==========================================================================
   3. MOTION PRIMITIVES
   ========================================================================== */

@keyframes tf-rise {
	from { opacity: 0; transform: translate3d(0, 22px, -40px) rotateX(6deg); }
	to   { opacity: 1; transform: none; }
}

@keyframes tf-pop {
	0%   { opacity: 0; transform: scale(0.9) translateY(10px); }
	100% { opacity: 1; transform: none; }
}

@keyframes tf-sheen {
	0%   { transform: translateX(-130%) skewX(-18deg); }
	100% { transform: translateX(230%) skewX(-18deg); }
}

@keyframes tf-shimmer {
	0%   { background-position: -600px 0; }
	100% { background-position: 600px 0; }
}

@keyframes tf-pulse-ring {
	0%   { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.45); }
	70%  { box-shadow: 0 0 0 12px rgba(79, 70, 229, 0); }
	100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}

@keyframes tf-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

@keyframes tf-spin {
	to { transform: rotate(360deg); }
}

@keyframes tf-ripple {
	to { transform: scale(3.2); opacity: 0; }
}

/* Scroll-reveal.
   Deliberately an ANIMATION with `backwards` fill rather than a transition on
   `transform`: a settled transform here would out-specify the card hover-lift and
   the pointer tilt below and silently kill both. With `backwards`, no transform is
   retained once the entrance finishes, so hover/tilt own the property afterwards.
   The .tf-reveal class is only ever added by JS ? no JS, no hidden content. */
.tf-app .tf-reveal {
	opacity: 0;
	will-change: transform, opacity;
}

.tf-app .tf-reveal.is-revealed {
	opacity: 1;
	animation: tf-rise var(--tf-slow) var(--tf-ease) var(--tf-delay, 0ms) backwards;
	transform-origin: 50% 100%;
}

.tf-app.tf-no-js .tf-reveal {
	opacity: 1;
	animation: none;
}

/* ==========================================================================
   4. SIDEBAR + NAVIGATION
   ========================================================================== */

.tf-app__sidebar {
	/* Gradient rail painted as a background layer so it stays pinned while the
	   sidebar's own overflow scrolls. */
	background:
		linear-gradient(90deg, #6366f1, #7c3aed 55%, #06b6d4) top left / 100% 3px no-repeat,
		radial-gradient(circle at 12% 18%, color-mix(in srgb, #6366f1 13%, transparent), transparent 32%),
		radial-gradient(circle at 88% 78%, color-mix(in srgb, #06b6d4 10%, transparent), transparent 35%),
		var(--tf-glass);
	backdrop-filter: blur(var(--tf-blur)) saturate(160%);
	-webkit-backdrop-filter: blur(var(--tf-blur)) saturate(160%);
	border-right: 1px solid var(--tf-color-border);
	box-shadow: var(--tf-e2);
}

.tf-app__brand {
	align-items: center;
	display: flex;
	gap: 0.7rem;
	padding: 0 var(--tf-space-4) var(--tf-space-4);
}

.tf-brand--app {
	padding: 0.1rem 0.95rem 1.05rem;
}

.tf-brand__mark {
	border-radius: 14px;
	box-shadow: var(--tf-glow), var(--tf-inner-top);
	height: 40px;
	transform-style: preserve-3d;
	transition: transform var(--tf-mid) var(--tf-spring);
	width: 40px;
}

.tf-brand--app:hover .tf-brand__mark {
	transform: rotateY(-12deg) rotateX(6deg) translateZ(4px) scale(1.04);
}

.tf-brand__text {
	font-weight: 750;
	letter-spacing: -0.03em;
}

.tf-app[data-tf-theme="dark"] .tf-brand__name {
	color: #f8fafc;
}

.tf-app__brand-mark {
	align-items: center;
	background: var(--tf-grad-primary);
	border-radius: 14px;
	box-shadow: var(--tf-glow), var(--tf-inner-top);
	color: #fff;
	display: inline-flex;
	flex: 0 0 40px;
	font-size: 1rem;
	font-weight: 800;
	height: 40px;
	justify-content: center;
	letter-spacing: 0.02em;
	position: relative;
	overflow: hidden;
	transform-style: preserve-3d;
	transition: transform var(--tf-mid) var(--tf-spring);
	width: 40px;
}

.tf-app__brand-mark::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--tf-grad-sheen);
	animation: tf-sheen 4.5s var(--tf-ease) infinite;
}

.tf-app__brand:hover .tf-app__brand-mark {
	transform: rotateY(-18deg) rotateX(8deg) translateZ(6px) scale(1.06);
}

.tf-app__brand-text {
	font-weight: 700;
	letter-spacing: -0.02em;
}

.tf-app__nav {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0 0.75rem;
}

.tf-app__nav-link {
	--tf-nav-color: var(--tf-color-primary);
	align-items: center;
	border: 1px solid transparent;
	border-radius: 14px;
	color: var(--tf-color-muted);
	display: flex;
	font-size: var(--tf-text-sm);
	font-weight: 600;
	gap: 0.7rem;
	overflow: hidden;
	padding: 0.62rem 0.75rem;
	position: relative;
	text-decoration: none !important;
	transform-style: preserve-3d;
	/* Soft enter — never hide the nav (avoids broken flash on each route) */
	animation: tf-nav-enter 280ms var(--tf-spring) both;
	transition:
		color var(--tf-fast) var(--tf-ease),
		transform var(--tf-mid) var(--tf-spring),
		background-color var(--tf-fast) var(--tf-ease),
		box-shadow var(--tf-mid) var(--tf-ease);
}

.tf-app__nav-link:nth-child(2) { animation-delay: 20ms; }
.tf-app__nav-link:nth-child(3) { animation-delay: 40ms; }
.tf-app__nav-link:nth-child(4) { animation-delay: 60ms; }
.tf-app__nav-link:nth-child(5) { animation-delay: 80ms; }
.tf-app__nav-link:nth-child(6) { animation-delay: 100ms; }
.tf-app__nav-link:nth-child(7) { animation-delay: 120ms; }
.tf-app__nav-link:nth-child(8) { animation-delay: 140ms; }
.tf-app__nav-link:nth-child(9) { animation-delay: 160ms; }
.tf-app__nav-link:nth-child(n+10) { animation-delay: 180ms; }

@keyframes tf-nav-enter {
	from {
		opacity: 0.92;
		transform: translateX(-6px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.tf-app__nav-link::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--tf-nav-color) 20%, transparent),
		color-mix(in srgb, var(--tf-nav-color) 7%, transparent)
	);
	opacity: 0;
	transition: opacity var(--tf-mid) var(--tf-ease);
	z-index: -1;
}

.tf-app__nav-link:hover {
	background: color-mix(in srgb, var(--tf-nav-color) 10%, transparent);
	border-color: color-mix(in srgb, var(--tf-nav-color) 28%, transparent);
	box-shadow: 0 8px 22px -14px color-mix(in srgb, var(--tf-nav-color) 70%, transparent);
	color: var(--tf-color-text);
	transform: translateX(4px) translateZ(4px);
}

.tf-app__nav-link:hover::before {
	opacity: 1;
}

.tf-app__nav-link.is-active {
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--tf-nav-color) 78%, #312e81),
		var(--tf-nav-color)
	);
	border-color: color-mix(in srgb, var(--tf-nav-color) 55%, transparent);
	box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--tf-nav-color) 75%, transparent), var(--tf-inner-top);
	color: #fff;
	transform: translateZ(10px);
}

.tf-app__nav-link.is-active::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--tf-grad-sheen);
	animation: tf-sheen 5s var(--tf-ease) 0.6s infinite;
}

/* Nav icons ? CSS masks, no image requests, inherit currentColor. */
.tf-app__nav-icon {
	background-color: currentColor;
	color: var(--tf-nav-color);
	display: inline-block;
	flex: 0 0 auto;
	filter: drop-shadow(0 3px 7px color-mix(in srgb, var(--tf-nav-color) 38%, transparent));
	height: 18px;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	opacity: 0.9;
	transition: transform var(--tf-mid) var(--tf-spring);
	width: 18px;
}

.tf-app__nav-link:hover .tf-app__nav-icon {
	transform: scale(1.2) rotate(-8deg);
}

.tf-app__nav-link.is-active .tf-app__nav-icon {
	color: #fff;
	animation: tf-nav-icon-pulse 2.4s var(--tf-ease) infinite;
}

@keyframes tf-nav-icon-pulse {
	0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3)); }
	50% { filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.75)); }
}

.tf-app__nav-link[data-tf-nav="dashboard"] { --tf-nav-color: #6366f1; }
.tf-app__nav-link[data-tf-nav="forms"] { --tf-nav-color: #06b6d4; }
.tf-app__nav-link[data-tf-nav="testimonials"] { --tf-nav-color: #ec4899; }
.tf-app__nav-link[data-tf-nav="embeds"] { --tf-nav-color: #8b5cf6; }
.tf-app__nav-link[data-tf-nav="analytics"] { --tf-nav-color: #14b8a6; }
.tf-app__nav-link[data-tf-nav="campaigns"] { --tf-nav-color: #3b82f6; }
.tf-app__nav-link[data-tf-nav="imports"] { --tf-nav-color: #22c55e; }
.tf-app__nav-link[data-tf-nav="team"] { --tf-nav-color: #f59e0b; }
.tf-app__nav-link[data-tf-nav="agency"] { --tf-nav-color: #0f766e; }
.tf-app__nav-link[data-tf-nav="workspace_settings"],
.tf-app__nav-link[data-tf-nav="settings"] { --tf-nav-color: #64748b; }
.tf-app__nav-link[data-tf-nav="privacy"] { --tf-nav-color: #0ea5e9; }
.tf-app__nav-link[data-tf-nav="exports"] { --tf-nav-color: #10b981; }
.tf-app__nav-link[data-tf-nav="billing"] { --tf-nav-color: #f97316; }
.tf-app__nav-link[data-tf-nav="profile"] { --tf-nav-color: #a855f7; }
.tf-app__nav-link[data-tf-nav="help"] { --tf-nav-color: #0ea5e9; }
.tf-app__nav-link[data-tf-nav="logout"] { --tf-nav-color: #ef4444; }

.tf-app__nav-link[data-tf-nav="dashboard"] .tf-app__nav-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1'/%3E%3C/svg%3E");
}

.tf-app__nav-link[data-tf-nav="forms"] .tf-app__nav-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h4'/%3E%3C/svg%3E");
}

.tf-app__nav-link[data-tf-nav="testimonials"] .tf-app__nav-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

.tf-app__nav-link[data-tf-nav="embeds"] .tf-app__nav-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
}

.tf-app__nav-link[data-tf-nav="analytics"] .tf-app__nav-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 15l4-5 3 3 5-7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 15l4-5 3 3 5-7'/%3E%3C/svg%3E");
}

.tf-app__nav-link[data-tf-nav="campaigns"] .tf-app__nav-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}

.tf-app__nav-link[data-tf-nav="imports"] .tf-app__nav-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}

.tf-app__nav-link[data-tf-nav="team"] .tf-app__nav-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

.tf-app__nav-link[data-tf-nav="agency"] .tf-app__nav-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l7-4 7 4v14'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V7l7-4 7 4v14'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E");
}

.tf-app__nav-link[data-tf-nav="workspace_settings"] .tf-app__nav-icon,
.tf-app__nav-link[data-tf-nav="settings"] .tf-app__nav-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}

.tf-app__nav-link[data-tf-nav="privacy"] .tf-app__nav-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}

.tf-app__nav-link[data-tf-nav="exports"] .tf-app__nav-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}

.tf-app__nav-link[data-tf-nav="billing"] .tf-app__nav-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3C/svg%3E");
}

.tf-app__nav-link[data-tf-nav="profile"] .tf-app__nav-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.tf-app__nav-link[data-tf-nav="help"] .tf-app__nav-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

.tf-app__nav-link[data-tf-nav="logout"] .tf-app__nav-icon {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

/* ==========================================================================
   5. TOPBAR + DROPDOWNS + AVATAR
   ========================================================================== */

.tf-app__topbar {
	align-items: center;
	backdrop-filter: blur(var(--tf-blur)) saturate(160%);
	-webkit-backdrop-filter: blur(var(--tf-blur)) saturate(160%);
	background: var(--tf-glass);
	border-bottom: 1px solid var(--tf-color-border);
	box-shadow: var(--tf-e1);
	transition: box-shadow var(--tf-mid) var(--tf-ease), background-color var(--tf-mid) var(--tf-ease);
}

.tf-app__topbar.is-stuck {
	background: var(--tf-glass-strong);
	box-shadow: var(--tf-e3);
}

.tf-app__page-title {
	background: linear-gradient(120deg, var(--tf-color-text) 25%, color-mix(in srgb, var(--tf-color-primary) 85%, var(--tf-color-text)) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
	letter-spacing: -0.03em;
	animation: tf-pop var(--tf-slow) var(--tf-ease) both;
}

.tf-app__page-desc {
	animation: tf-pop var(--tf-slow) var(--tf-ease) 80ms both;
	color: var(--tf-color-muted);
}

.tf-app__tier-badge {
	box-shadow: var(--tf-e1), var(--tf-inner-top);
	transition: transform var(--tf-fast) var(--tf-spring), box-shadow var(--tf-fast) var(--tf-ease);
}

.tf-app__tier-badge:hover {
	box-shadow: var(--tf-e2);
	transform: translateY(-1px);
}

.tf-app__tier-badge--personal,
.tf-app__tier-badge--bronze { background: linear-gradient(135deg, #fdf1e3, #f8dfc0); }
.tf-app__tier-badge--advanced,
.tf-app__tier-badge--silver { background: linear-gradient(135deg, #f8fafc, #e2e8f0); }
.tf-app__tier-badge--unlimited,
.tf-app__tier-badge--gold { background: linear-gradient(135deg, #fefce8, #fde68a); }
.tf-app__tier-badge--agency { background: linear-gradient(135deg, #f5f3ff, #ddd6fe); }

.tf-app[data-tf-theme="dark"] .tf-app__tier-badge--personal,
.tf-app[data-tf-theme="dark"] .tf-app__tier-badge--bronze {
	background: rgba(180, 83, 9, 0.2);
	border-color: rgba(217, 119, 6, 0.5);
	color: #fbbf77;
}

.tf-app[data-tf-theme="dark"] .tf-app__tier-badge--advanced,
.tf-app[data-tf-theme="dark"] .tf-app__tier-badge--silver {
	background: rgba(148, 163, 184, 0.16);
	border-color: rgba(148, 163, 184, 0.45);
	color: #cbd5e1;
}

.tf-app[data-tf-theme="dark"] .tf-app__tier-badge--unlimited,
.tf-app[data-tf-theme="dark"] .tf-app__tier-badge--gold {
	background: rgba(250, 204, 21, 0.16);
	border-color: rgba(250, 204, 21, 0.45);
	color: #fde047;
}

.tf-app[data-tf-theme="dark"] .tf-app__tier-badge--agency {
	background: rgba(139, 92, 246, 0.2);
	border-color: rgba(167, 139, 250, 0.5);
	color: #c4b5fd;
}

.tf-app__avatar-btn {
	align-items: center;
	background: var(--tf-grad-primary);
	border: 0;
	border-radius: 50%;
	box-shadow: var(--tf-glow), var(--tf-inner-top);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-weight: 700;
	height: 38px;
	justify-content: center;
	position: relative;
	transition: transform var(--tf-mid) var(--tf-spring), box-shadow var(--tf-mid) var(--tf-ease);
	width: 38px;
}

.tf-app__avatar-btn:hover {
	transform: translateY(-2px) scale(1.07);
}

.tf-app__avatar-btn:active {
	transform: scale(0.96);
}

.tf-app__icon-btn {
	background: var(--tf-color-surface);
	border: 1px solid var(--tf-color-border);
	border-radius: 12px;
	color: var(--tf-color-text);
	cursor: pointer;
	box-shadow: var(--tf-e1);
	transition: transform var(--tf-mid) var(--tf-spring), box-shadow var(--tf-mid) var(--tf-ease), background-color var(--tf-fast) linear;
}

.tf-app__icon-btn:hover {
	box-shadow: var(--tf-e2);
	transform: translateY(-1px) scale(1.04);
}

.tf-app__icon-btn:active {
	transform: scale(0.95);
}

/* Theme switch injected by premium.js */
.tf-app__theme-toggle {
	overflow: hidden;
}

.tf-app__theme-toggle span[aria-hidden] {
	display: inline-block;
	transition: transform var(--tf-mid) var(--tf-spring);
}

.tf-app__theme-toggle:hover span[aria-hidden] {
	transform: rotate(120deg) scale(1.15);
}

.tf-app__dropdown-menu {
	animation: tf-pop 240ms var(--tf-spring) both;
	backdrop-filter: blur(var(--tf-blur)) saturate(160%);
	-webkit-backdrop-filter: blur(var(--tf-blur)) saturate(160%);
	background: var(--tf-glass-strong);
	border: 1px solid var(--tf-color-border);
	border-radius: var(--tf-radius);
	box-shadow: var(--tf-e4);
	overflow: hidden;
	padding: 0.35rem;
	transform-origin: top right;
}

.tf-app__dropdown-menu.is-flip-up {
	transform-origin: bottom right;
}

.tf-app__dropdown-item {
	border-radius: 10px;
	transition: background-color var(--tf-fast) var(--tf-ease), transform var(--tf-fast) var(--tf-ease), color var(--tf-fast) var(--tf-ease);
}

.tf-app__dropdown-item:hover {
	background: color-mix(in srgb, var(--tf-color-primary) 12%, transparent);
	transform: translateX(3px);
}

.tf-app__dropdown-item.is-active {
	background: var(--tf-grad-primary);
	color: #fff;
}

/* ==========================================================================
   6. SURFACES ? panels, sections, cards (real 3D)
   ========================================================================== */

.tf-app__content {
	perspective: 1500px;
	perspective-origin: 50% 20%;
	position: relative;
	z-index: 1;
}

.tf-app__section-title {
	font-weight: 800;
	letter-spacing: -0.02em;
	position: relative;
	padding-left: 0.85rem;
}

.tf-app__section-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.18em;
	bottom: 0.18em;
	width: 4px;
	border-radius: 4px;
	background: var(--tf-grad-primary);
	box-shadow: 0 0 12px color-mix(in srgb, var(--tf-color-primary) 60%, transparent);
}

.tf-app__panel,
.tf-app__stat-card,
.tf-app__auth-card,
.tf-app__table-wrap,
.tf-builder__pane {
	background: var(--tf-glass-strong);
	backdrop-filter: blur(12px) saturate(150%);
	-webkit-backdrop-filter: blur(12px) saturate(150%);
	border: 1px solid var(--tf-color-border);
	border-radius: var(--tf-radius);
	box-shadow: var(--tf-e2), var(--tf-inner-top);
	position: relative;
	transform-style: preserve-3d;
	transition:
		transform var(--tf-mid) var(--tf-ease),
		box-shadow var(--tf-mid) var(--tf-ease),
		border-color var(--tf-mid) var(--tf-ease);
	will-change: transform;
}

.tf-app__panel:hover,
.tf-builder__pane:hover {
	border-color: color-mix(in srgb, var(--tf-color-primary) 28%, var(--tf-color-border));
	box-shadow: var(--tf-e3), var(--tf-inner-top);
	transform: translateY(-3px);
}

/* Gradient hairline border on hover */
.tf-app__panel::before,
.tf-app__stat-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: var(--tf-grad-border);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tf-mid) var(--tf-ease);
}

.tf-app__panel:hover::before,
.tf-app__stat-card:hover::before {
	opacity: 1;
}

.tf-app__forms-toolbar,
.tf-app__form-card {
	background: var(--tf-glass-strong);
	backdrop-filter: blur(12px) saturate(150%);
	-webkit-backdrop-filter: blur(12px) saturate(150%);
	border-color: var(--tf-color-border);
	box-shadow: var(--tf-e2), var(--tf-inner-top);
}

.tf-app__forms-toolbar {
	position: relative;
}

.tf-app__forms-toolbar::before {
	background: var(--tf-grad-primary);
	border-radius: var(--tf-radius) var(--tf-radius) 0 0;
	content: "";
	height: 3px;
	inset: 0 0 auto;
	position: absolute;
}

.tf-app__form-card {
	transition:
		border-color var(--tf-mid) var(--tf-ease),
		box-shadow var(--tf-mid) var(--tf-ease),
		transform var(--tf-mid) var(--tf-ease);
}

.tf-app__form-card:hover {
	border-color: color-mix(in srgb, var(--tf-color-primary) 28%, var(--tf-color-border));
	box-shadow: var(--tf-e3), var(--tf-inner-top);
	transform: translateY(-2px);
}

/* Keep open menus from shifting with hover transform / stacking */
.tf-app__form-card.is-dropdown-open,
.tf-app__form-card.is-dropdown-open:hover {
	transform: none;
	z-index: 6;
}

.tf-app__form-card-title {
	font-weight: 800;
	letter-spacing: -0.02em;
}

.tf-app__form-card-stats > div {
	background: color-mix(in srgb, var(--tf-color-primary) 6%, var(--tf-color-surface));
	box-shadow: var(--tf-e1), var(--tf-inner-top);
	position: relative;
	transition: transform var(--tf-mid) var(--tf-spring), border-color var(--tf-fast) var(--tf-ease);
}

.tf-app__form-card-stats > div::before {
	background: var(--tf-grad-primary);
	border-radius: 999px;
	content: "";
	height: 3px;
	inset: 0.55rem 0.8rem auto;
	opacity: 0.72;
	position: absolute;
}

.tf-app__form-card-stats > div:hover {
	border-color: color-mix(in srgb, var(--tf-color-primary) 30%, var(--tf-color-border));
	transform: translateY(-2px);
}

.tf-app__form-card-stats dt {
	padding-top: 0.45rem;
}

.tf-app__form-card-stats dd {
	background: linear-gradient(135deg, var(--tf-color-text), color-mix(in srgb, var(--tf-color-primary) 72%, var(--tf-color-text)));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.tf-app__form-card-stats .tf-app__form-updated {
	background: none;
	color: var(--tf-color-text);
	-webkit-text-fill-color: currentColor;
}

.tf-app__forms-count {
	font-weight: 600;
}

/* ---- Stat cards: pointer-tracked 3D tilt + cursor glare ---- */

.tf-app__stat-grid {
	perspective: 1200px;
}

.tf-app__stat-card {
	overflow: hidden;
	padding: var(--tf-space-4);
	transform: rotateX(var(--tf-rx)) rotateY(var(--tf-ry));
	transition:
		transform 220ms var(--tf-ease),
		box-shadow var(--tf-mid) var(--tf-ease);
}

.tf-app__stat-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		420px circle at var(--tf-mx) var(--tf-my),
		color-mix(in srgb, var(--tf-color-primary) 22%, transparent),
		transparent 45%
	);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tf-mid) var(--tf-ease);
}

.tf-app__stat-card:hover {
	box-shadow: var(--tf-e4), var(--tf-inner-top);
	z-index: 2;
}

.tf-app__stat-card:hover::after {
	opacity: 1;
}

.tf-app__stat-label {
	color: var(--tf-color-muted);
	font-size: var(--tf-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transform: translateZ(18px);
}

.tf-app__stat-value {
	background: var(--tf-grad-primary);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.7rem);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.04em;
	line-height: 1.1;
	transform: translateZ(34px);
}

.tf-app[data-tf-theme="dark"] .tf-app__stat-value,
.tf-app[data-tf-theme="dark"] .tf-app__page-title,
.tf-app[data-tf-theme="dark"] .tf-app__form-card-stats dd {
	background: none;
	-webkit-background-clip: unset;
	background-clip: unset;
	color: #f9fafb;
	-webkit-text-fill-color: #f9fafb;
}

.tf-app__panel-head {
	align-items: center;
	border-bottom: 1px solid var(--tf-color-border);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: space-between;
}

/* ==========================================================================
   7. BUTTONS ? gradient, sheen, ripple, 3D press
   ========================================================================== */

.tf-app__btn {
	border-radius: 12px;
	border: 1px solid transparent;
	font-weight: 650;
	isolation: isolate;
	letter-spacing: -0.01em;
	overflow: hidden;
	position: relative;
	transform-style: preserve-3d;
	transition:
		transform 180ms var(--tf-spring),
		box-shadow var(--tf-mid) var(--tf-ease),
		background-color var(--tf-fast) var(--tf-ease),
		filter var(--tf-fast) var(--tf-ease);
	will-change: transform;
}

.tf-app__btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--tf-grad-sheen);
	opacity: 0;
	pointer-events: none;
	transform: translateX(-130%) skewX(-18deg);
	z-index: -1;
}

.tf-app__btn:hover::after {
	animation: tf-sheen 900ms var(--tf-ease) forwards;
	opacity: 1;
}

.tf-app__btn:hover {
	transform: translateY(-2px) translateZ(6px);
}

.tf-app__btn:active {
	transform: translateY(1px) scale(0.985);
}

.tf-app__btn:disabled,
.tf-app__btn[aria-disabled="true"] {
	filter: grayscale(0.4);
	opacity: 0.55;
	pointer-events: none;
	transform: none;
}

.tf-app__btn--primary {
	background: var(--tf-grad-primary);
	border-color: color-mix(in srgb, var(--tf-color-primary) 55%, transparent);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.28) inset,
		0 6px 16px -6px color-mix(in srgb, var(--tf-color-primary) 75%, transparent),
		0 2px 4px rgba(11, 18, 32, 0.14);
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

.tf-app__btn--primary:hover {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.35) inset,
		0 16px 34px -10px color-mix(in srgb, var(--tf-color-primary) 85%, transparent),
		0 4px 10px rgba(11, 18, 32, 0.18);
}

.tf-app__btn--ghost {
	background: var(--tf-color-surface);
	border-color: var(--tf-color-border);
	box-shadow: var(--tf-e1);
	color: var(--tf-color-text);
}

.tf-app__btn--ghost:hover {
	background: color-mix(in srgb, var(--tf-color-primary) 7%, var(--tf-color-surface));
	border-color: color-mix(in srgb, var(--tf-color-primary) 35%, var(--tf-color-border));
	box-shadow: var(--tf-e2);
}

.tf-app__btn--danger {
	background: linear-gradient(135deg, #f43f5e, #be123c);
	border-color: rgba(190, 18, 60, 0.6);
	box-shadow: 0 6px 18px -6px rgba(190, 18, 60, 0.65), var(--tf-inner-top);
	color: #fff;
}

.tf-app__btn--danger:hover {
	box-shadow: 0 16px 34px -10px rgba(190, 18, 60, 0.8);
}

/* Button labels must remain readable through host-theme link states. */
.tf-app .tf-app__btn--primary,
.tf-app a.tf-app__btn--primary,
.tf-app a.tf-app__btn--primary:link,
.tf-app a.tf-app__btn--primary:visited,
.tf-app a.tf-app__btn--primary:hover,
.tf-app a.tf-app__btn--primary:focus,
.tf-app a.tf-app__btn--primary:active,
.tf-app .tf-app__btn--danger,
.tf-app a.tf-app__btn--danger:link,
.tf-app a.tf-app__btn--danger:visited {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	opacity: 1;
}

.tf-app .tf-app__btn--ghost,
.tf-app a.tf-app__btn--ghost,
.tf-app a.tf-app__btn--ghost:link,
.tf-app a.tf-app__btn--ghost:visited {
	color: var(--tf-color-text) !important;
	-webkit-text-fill-color: var(--tf-color-text) !important;
	opacity: 1;
}

/* Keep host-theme hover rules from washing out button labels in light mode. */
.tf-app .tf-app__btn--ghost:hover,
.tf-app .tf-app__btn--ghost:focus-visible,
.tf-app .tf-app__icon-btn:hover,
.tf-app .tf-app__icon-btn:focus-visible,
.tf-app .tf-app__dropdown-item:hover,
.tf-app .tf-app__dropdown-item:focus-visible,
.tf-app .tf-app__tab:hover,
.tf-app .tf-app__tab:focus-visible {
	color: var(--tf-color-text) !important;
	text-shadow: none;
}

.tf-app .tf-app__btn--primary:hover,
.tf-app .tf-app__btn--primary:focus-visible,
.tf-app .tf-app__btn--danger:hover,
.tf-app .tf-app__btn--danger:focus-visible,
.tf-app .tf-app__avatar-btn:hover,
.tf-app .tf-app__avatar-btn:focus-visible,
.tf-app .tf-app__dropdown-item.is-active:hover,
.tf-app .tf-app__dropdown-item.is-active:focus-visible {
	color: #fff !important;
}

/*
 * Host themes (Twenty Twenty / Twenty Twenty-One, Astra, Kadence, etc.) often
 * force a red/pink background on button:hover / :focus / :active.
 * Lock ALL interaction states for TF controls so that flash never appears.
 */
.tf-app button:hover,
.tf-app button:focus,
.tf-app button:focus-visible,
.tf-app button:active,
.tf-app input[type="button"]:hover,
.tf-app input[type="button"]:focus,
.tf-app input[type="button"]:focus-visible,
.tf-app input[type="button"]:active,
.tf-app input[type="submit"]:hover,
.tf-app input[type="submit"]:focus,
.tf-app input[type="submit"]:focus-visible,
.tf-app input[type="submit"]:active,
.tf-app .tf-app__btn:hover,
.tf-app .tf-app__btn:focus,
.tf-app .tf-app__btn:focus-visible,
.tf-app .tf-app__btn:active,
.tf-app .tf-app__btn[aria-expanded="true"],
.tf-app a.tf-app__btn:hover,
.tf-app a.tf-app__btn:focus,
.tf-app a.tf-app__btn:focus-visible,
.tf-app a.tf-app__btn:active,
.tf-app .tf-app__icon-btn:hover,
.tf-app .tf-app__icon-btn:focus,
.tf-app .tf-app__icon-btn:focus-visible,
.tf-app .tf-app__icon-btn:active,
.tf-app .tf-app__tab:hover,
.tf-app .tf-app__tab:focus,
.tf-app .tf-app__tab:focus-visible,
.tf-app .tf-app__tab:active,
.tf-app .tf-app__page-btn:hover,
.tf-app .tf-app__page-btn:focus,
.tf-app .tf-app__page-btn:focus-visible,
.tf-app .tf-app__page-btn:active,
.tf-app .tf-app__dropdown-trigger:hover,
.tf-app .tf-app__dropdown-trigger:focus,
.tf-app .tf-app__dropdown-trigger:focus-visible,
.tf-app .tf-app__dropdown-trigger:active,
.tf-app .tf-app__dropdown-trigger[aria-expanded="true"],
.tf-app .tf-app__dropdown-item:hover,
.tf-app .tf-app__dropdown-item:focus,
.tf-app .tf-app__dropdown-item:focus-visible,
.tf-app .tf-app__dropdown-item:active,
.tf-app .tf-builder__palette-chip:hover,
.tf-app .tf-builder__palette-chip:focus,
.tf-app .tf-builder__palette-chip:focus-visible,
.tf-app .tf-builder__palette-chip:active,
.tf-app .tf-builder__field-toggle:hover,
.tf-app .tf-builder__field-toggle:focus,
.tf-app .tf-builder__field-toggle:focus-visible,
.tf-app .tf-builder__field-toggle:active,
.tf-app .tf-app__theme-toggle:hover,
.tf-app .tf-app__theme-toggle:focus,
.tf-app .tf-app__theme-toggle:focus-visible,
.tf-app .tf-app__theme-toggle:active,
.tf-app .tf-builder__back:hover,
.tf-app .tf-builder__back:focus,
.tf-app .tf-builder__back:focus-visible,
.tf-app .tf-builder__back:active,
.tf-app .tf-builder__link:hover,
.tf-app .tf-builder__link:focus,
.tf-app .tf-builder__link:focus-visible,
.tf-app .tf-builder__link:active,
.tf-app summary:hover,
.tf-app summary:focus,
.tf-app summary:active {
	background-color: var(--tf-color-surface) !important;
	background-image: none !important;
	border-color: var(--tf-color-border) !important;
	color: var(--tf-color-text) !important;
	-webkit-text-fill-color: var(--tf-color-text) !important;
}

.tf-app .tf-app__btn--ghost:hover,
.tf-app .tf-app__btn--ghost:focus,
.tf-app .tf-app__btn--ghost:focus-visible,
.tf-app .tf-app__btn--ghost:active,
.tf-app .tf-app__btn--ghost[aria-expanded="true"],
.tf-app a.tf-app__btn--ghost:hover,
.tf-app a.tf-app__btn--ghost:focus,
.tf-app a.tf-app__btn--ghost:focus-visible,
.tf-app a.tf-app__btn--ghost:active,
.tf-app .tf-app__dropdown-trigger:hover,
.tf-app .tf-app__dropdown-trigger:focus,
.tf-app .tf-app__dropdown-trigger:focus-visible,
.tf-app .tf-app__dropdown-trigger:active,
.tf-app .tf-app__dropdown-trigger[aria-expanded="true"] {
	background-color: color-mix(in srgb, var(--tf-color-primary) 8%, var(--tf-color-surface)) !important;
	border-color: color-mix(in srgb, var(--tf-color-primary) 35%, var(--tf-color-border)) !important;
	color: var(--tf-color-text) !important;
	-webkit-text-fill-color: var(--tf-color-text) !important;
}

.tf-app .tf-builder__palette-chip:hover,
.tf-app .tf-builder__palette-chip:focus-visible,
.tf-app .tf-builder__palette-chip:active {
	background-color: color-mix(in srgb, var(--tf-color-primary) 14%, var(--tf-color-surface)) !important;
	border-color: color-mix(in srgb, var(--tf-color-primary) 40%, var(--tf-color-border)) !important;
}

.tf-app .tf-app__dropdown-item:hover,
.tf-app .tf-app__dropdown-item:focus,
.tf-app .tf-app__dropdown-item:focus-visible {
	background-color: color-mix(in srgb, var(--tf-color-primary) 10%, var(--tf-color-surface)) !important;
	background-image: none !important;
	color: var(--tf-color-text) !important;
	-webkit-text-fill-color: var(--tf-color-text) !important;
}

.tf-app .tf-app__btn--primary:hover,
.tf-app .tf-app__btn--primary:focus,
.tf-app .tf-app__btn--primary:focus-visible,
.tf-app .tf-app__btn--primary:active,
.tf-app a.tf-app__btn--primary:hover,
.tf-app a.tf-app__btn--primary:focus,
.tf-app a.tf-app__btn--primary:focus-visible,
.tf-app a.tf-app__btn--primary:active {
	background-color: var(--tf-color-primary) !important;
	background-image: var(--tf-grad-primary) !important;
	border-color: color-mix(in srgb, var(--tf-color-primary) 55%, transparent) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.tf-app .tf-app__btn--danger:hover,
.tf-app .tf-app__btn--danger:focus,
.tf-app .tf-app__btn--danger:focus-visible,
.tf-app .tf-app__btn--danger:active,
.tf-app a.tf-app__btn--danger:hover,
.tf-app a.tf-app__btn--danger:focus,
.tf-app a.tf-app__btn--danger:focus-visible,
.tf-app a.tf-app__btn--danger:active {
	background-color: #be123c !important;
	background-image: linear-gradient(135deg, #f43f5e, #be123c) !important;
	border-color: rgba(190, 18, 60, 0.6) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.tf-app .tf-app__tab.is-active,
.tf-app .tf-app__tab.is-active:hover,
.tf-app .tf-app__tab.is-active:focus-visible,
.tf-app .tf-app__tab.is-active:active {
	background-color: var(--tf-color-surface) !important;
	background-image: none !important;
	border-color: var(--tf-color-border) !important;
	color: var(--tf-color-text) !important;
	-webkit-text-fill-color: var(--tf-color-text) !important;
}

.tf-app .tf-app__page-btn.is-active,
.tf-app .tf-app__page-btn.is-active:hover,
.tf-app .tf-app__page-btn.is-active:focus-visible,
.tf-app .tf-app__page-btn.is-active:active,
.tf-app .tf-app__dropdown-item.is-active,
.tf-app .tf-app__dropdown-item.is-active:hover,
.tf-app .tf-app__dropdown-item.is-active:focus,
.tf-app .tf-app__dropdown-item.is-active:focus-visible,
.tf-app .tf-app__dropdown-item.is-active:active {
	background-color: var(--tf-color-primary) !important;
	background-image: var(--tf-grad-primary) !important;
	border-color: var(--tf-color-primary) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.tf-app .tf-app__avatar-btn,
.tf-app .tf-app__avatar-btn:hover,
.tf-app .tf-app__avatar-btn:focus,
.tf-app .tf-app__avatar-btn:focus-visible,
.tf-app .tf-app__avatar-btn:active {
	background-color: var(--tf-color-primary) !important;
	background-image: var(--tf-grad-primary) !important;
	border-color: transparent !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

/* Ripple (spawned by premium.js) */
.tf-ripple {
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	height: var(--tf-ripple-size, 12px);
	left: var(--tf-ripple-x, 50%);
	pointer-events: none;
	position: absolute;
	top: var(--tf-ripple-y, 50%);
	transform: scale(0);
	transform-origin: center;
	width: var(--tf-ripple-size, 12px);
	animation: tf-ripple 620ms var(--tf-ease) forwards;
	z-index: 0;
}

.tf-app__btn--ghost .tf-ripple {
	background: color-mix(in srgb, var(--tf-color-primary) 18%, transparent);
}

/* Inline loading state */
.tf-app__btn.is-loading {
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	pointer-events: none;
}

.tf-app__btn.is-loading::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	color: #fff;
	animation: tf-spin 700ms linear infinite;
	z-index: 2;
}

/* ==========================================================================
   8. FORMS
   ========================================================================== */

.tf-app__label {
	color: var(--tf-color-text);
	font-weight: 650;
	letter-spacing: -0.01em;
}

.tf-app__input,
.tf-app__select,
.tf-app textarea {
	background: var(--tf-color-surface);
	border: 1px solid var(--tf-color-border);
	border-radius: 12px;
	box-shadow: inset 0 1px 2px rgba(11, 18, 32, 0.05);
	color: var(--tf-color-text);
	transition:
		border-color var(--tf-fast) var(--tf-ease),
		box-shadow var(--tf-mid) var(--tf-ease),
		transform var(--tf-fast) var(--tf-ease),
		background-color var(--tf-fast) var(--tf-ease);
}

.tf-app__input:hover,
.tf-app__select:hover,
.tf-app textarea:hover {
	border-color: color-mix(in srgb, var(--tf-color-primary) 30%, var(--tf-color-border));
}

.tf-app__input:focus,
.tf-app__select:focus,
.tf-app textarea:focus {
	border-color: var(--tf-color-primary);
	box-shadow:
		0 0 0 4px color-mix(in srgb, var(--tf-color-primary) 16%, transparent),
		0 8px 20px -10px color-mix(in srgb, var(--tf-color-primary) 60%, transparent);
	outline: none;
	transform: translateY(-1px);
}

.tf-app__field-error {
	animation: tf-pop 240ms var(--tf-spring) both;
	color: var(--tf-color-error);
	font-weight: 600;
}

.tf-app__input[aria-invalid="true"],
.tf-app__input.is-invalid {
	border-color: var(--tf-color-error);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--tf-color-error) 14%, transparent);
}

.tf-app__checkbox {
	cursor: pointer;
}

.tf-app__checkbox input[type="checkbox"],
.tf-app__checkbox input[type="radio"] {
	accent-color: var(--tf-color-primary);
	transform: scale(1.1);
	transition: transform var(--tf-fast) var(--tf-spring);
}

.tf-app__checkbox:hover input[type="checkbox"] {
	transform: scale(1.22);
}

.tf-app__help {
	color: var(--tf-color-muted);
}

.tf-app__swatch {
	border-radius: 10px;
	box-shadow: var(--tf-e1), var(--tf-inner-top);
	transition: transform var(--tf-mid) var(--tf-spring);
}

.tf-app__swatch:hover {
	transform: scale(1.1) rotate(-4deg);
}

/* ==========================================================================
   9. TABLES / LISTS / PAGINATION
   ========================================================================== */

.tf-app__table-wrap {
	overflow: hidden;
	padding: 0;
}

.tf-app__table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

.tf-app__table thead th {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	background: color-mix(in srgb, var(--tf-color-primary) 6%, var(--tf-color-surface));
	border-bottom: 1px solid var(--tf-color-border);
	color: var(--tf-color-muted);
	font-size: var(--tf-text-xs);
	font-weight: 700;
	letter-spacing: 0.07em;
	position: sticky;
	text-transform: uppercase;
	top: 0;
	z-index: 2;
}

.tf-app__table tbody tr {
	transition: background-color var(--tf-fast) var(--tf-ease), box-shadow var(--tf-mid) var(--tf-ease), transform var(--tf-mid) var(--tf-ease);
}

.tf-app__table tbody tr:hover {
	background: color-mix(in srgb, var(--tf-color-primary) 5%, transparent);
	box-shadow: inset 3px 0 0 var(--tf-color-primary);
}

.tf-app__table tbody td {
	border-bottom: 1px solid var(--tf-color-border);
}

.tf-app__row-actions .tf-app__btn {
	padding: 0.32rem 0.62rem;
	font-size: var(--tf-text-xs);
}

.tf-app__pagination .tf-app__page-btn,
.tf-app__pagination a,
.tf-app__pagination span {
	border-radius: 10px;
	transition: transform var(--tf-fast) var(--tf-spring), background-color var(--tf-fast) var(--tf-ease);
}

.tf-app__pagination a:hover {
	background: color-mix(in srgb, var(--tf-color-primary) 12%, transparent);
	transform: translateY(-2px);
}

/* ==========================================================================
   10. TABS / FILTERS / CHIPS / BADGES
   ========================================================================== */

/* Only the tab-style groups become pills. `.tf-app__filters--wrap` is a real
   <form> with inputs/selects on Testimonials + Analytics ? leave it alone. */
.tf-app__tabs,
.tf-app__filters[role="group"]:not(.tf-app__filters--wrap) {
	background: color-mix(in srgb, var(--tf-color-text) 4%, transparent);
	border-radius: 999px;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.2rem;
	padding: 0.28rem;
}

.tf-app__tab {
	border-radius: 999px;
	color: var(--tf-color-muted);
	font-weight: 650;
	position: relative;
	text-decoration: none !important;
	transition:
		color var(--tf-fast) var(--tf-ease),
		background-color var(--tf-mid) var(--tf-ease),
		box-shadow var(--tf-mid) var(--tf-ease),
		transform var(--tf-mid) var(--tf-spring);
}

.tf-app__tab:hover {
	color: var(--tf-color-text);
	transform: translateY(-1px);
}

.tf-app__tab.is-active {
	background: var(--tf-color-surface);
	box-shadow: var(--tf-e2), var(--tf-inner-top);
	color: var(--tf-color-primary);
	transform: translateY(-1px);
}

.tf-app__badge {
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	background: color-mix(in srgb, var(--tf-color-primary) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--tf-color-primary) 26%, transparent);
	border-radius: 999px;
	color: color-mix(in srgb, var(--tf-color-primary) 88%, var(--tf-color-text));
	font-size: var(--tf-text-xs);
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: transform var(--tf-mid) var(--tf-spring);
}

.tf-app__badge:hover {
	transform: translateY(-1px) scale(1.04);
}

.tf-app__badge--success {
	background: var(--tf-color-success-bg);
	border-color: color-mix(in srgb, var(--tf-color-success) 35%, transparent);
	color: var(--tf-color-success);
}

.tf-app__badge--warning {
	background: var(--tf-color-warning-bg);
	border-color: color-mix(in srgb, var(--tf-color-warning) 35%, transparent);
	color: var(--tf-color-warning);
}

.tf-app__badge--danger,
.tf-app__badge--error {
	background: var(--tf-color-error-bg);
	border-color: color-mix(in srgb, var(--tf-color-error) 35%, transparent);
	color: var(--tf-color-error);
}

.tf-app__chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.tf-app__rating {
	color: #f59e0b;
	filter: drop-shadow(0 2px 6px rgba(245, 158, 11, 0.4));
	letter-spacing: 0.08em;
}

.tf-app__code {
	background: color-mix(in srgb, var(--tf-color-text) 6%, transparent);
	border: 1px solid var(--tf-color-border);
	border-radius: 10px;
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ==========================================================================
   11. PROGRESS / USAGE / METERS
   ========================================================================== */

.tf-app__progress,
.tf-app__usage-bar,
.tf-app__password-meter {
	background: color-mix(in srgb, var(--tf-color-text) 8%, transparent);
	border-radius: 999px;
	box-shadow: inset 0 1px 3px rgba(11, 18, 32, 0.16);
	overflow: hidden;
	position: relative;
}

.tf-app__progress-bar,
.tf-app__usage-fill,
.tf-app__password-bar {
	background: var(--tf-grad-primary);
	border-radius: 999px;
	box-shadow: 0 0 14px color-mix(in srgb, var(--tf-color-primary) 60%, transparent);
	position: relative;
	transition: width 900ms var(--tf-ease);
}

.tf-app__progress-bar::after,
.tf-app__usage-fill::after,
.tf-app__password-bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--tf-grad-sheen);
	animation: tf-sheen 2.4s var(--tf-ease) infinite;
}

.tf-app__usage-fill.is-warning {
	background: linear-gradient(135deg, #fbbf24, #d97706);
}

.tf-app__usage-fill.is-danger,
.tf-app__usage-fill.is-over {
	background: linear-gradient(135deg, #fb7185, #be123c);
}

/* ==========================================================================
   12. EMPTY STATES / SKELETONS
   ========================================================================== */

.tf-app__empty {
	background:
		radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--tf-color-primary) 8%, transparent), transparent 62%),
		var(--tf-glass);
	border: 1px dashed color-mix(in srgb, var(--tf-color-primary) 30%, var(--tf-color-border));
	border-radius: var(--tf-radius);
	box-shadow: var(--tf-e1);
	text-align: center;
	transition: transform var(--tf-mid) var(--tf-ease), border-color var(--tf-mid) var(--tf-ease);
}

.tf-app__empty:hover {
	border-color: var(--tf-color-primary);
	transform: translateY(-2px);
}

.tf-app__empty::before {
	content: "";
	display: block;
	height: 46px;
	width: 46px;
	margin: 0 auto 0.75rem;
	border-radius: 16px;
	background: var(--tf-grad-primary);
	box-shadow: var(--tf-glow);
	opacity: 0.9;
	animation: tf-float 3.4s var(--tf-ease) infinite;
}

.tf-app__empty--compact::before {
	height: 30px;
	width: 30px;
	border-radius: 10px;
}

.tf-skeleton {
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--tf-color-text) 6%, transparent) 25%,
		color-mix(in srgb, var(--tf-color-text) 12%, transparent) 50%,
		color-mix(in srgb, var(--tf-color-text) 6%, transparent) 75%
	);
	background-size: 600px 100%;
	border-radius: 10px;
	animation: tf-shimmer 1.4s linear infinite;
	color: transparent !important;
}

/* ==========================================================================
   13. MODAL / DRAWER / TOASTS
   ========================================================================== */

.tf-app__modal-backdrop,
.tf-app__drawer-backdrop,
.tf-app__backdrop {
	backdrop-filter: blur(8px) saturate(120%);
	-webkit-backdrop-filter: blur(8px) saturate(120%);
	background: rgba(6, 10, 22, 0.55);
	animation: tf-fade-in 240ms var(--tf-ease) both;
}

@keyframes tf-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.tf-app__modal-dialog {
	animation: tf-modal-in 420ms var(--tf-spring) both;
	/* The accent rail is a background layer, not an ::before: the dialog is a
	   scroll container (overflow:auto, max-height 85vh in frontend.css), so an
	   absolutely positioned bar would scroll away ? and `overflow: hidden` here
	   would clip tall modal bodies entirely. Do not add it. */
	background:
		linear-gradient(90deg, #6366f1, #7c3aed 55%, #06b6d4) top left / 100% 4px no-repeat,
		var(--tf-glass-strong);
	backdrop-filter: blur(var(--tf-blur)) saturate(160%);
	-webkit-backdrop-filter: blur(var(--tf-blur)) saturate(160%);
	border: 1px solid var(--tf-color-border);
	border-radius: var(--tf-radius-lg);
	box-shadow: var(--tf-e4), var(--tf-inner-top);
}

/* frontend.css centres the dialog with translate(-50%, -50%) ? every keyframe
   below must reapply it or the modal jumps off-centre. */
@keyframes tf-modal-in {
	from { opacity: 0; transform: translate(-50%, -50%) perspective(1200px) translateY(28px) rotateX(9deg) scale(0.94); }
	to   { opacity: 1; transform: translate(-50%, -50%) perspective(1200px) translateY(0) rotateX(0) scale(1); }
}

.tf-app__drawer-panel {
	animation: tf-drawer-in 420ms var(--tf-ease) both;
	background: var(--tf-glass-strong);
	backdrop-filter: blur(var(--tf-blur)) saturate(160%);
	-webkit-backdrop-filter: blur(var(--tf-blur)) saturate(160%);
	border-left: 1px solid var(--tf-color-border);
	box-shadow: var(--tf-e4);
}

@keyframes tf-drawer-in {
	from { opacity: 0.4; transform: perspective(1400px) translateX(40px) rotateY(-8deg); }
	to   { opacity: 1; transform: none; }
}

.tf-app__toasts > * {
	animation: tf-toast-in 420ms var(--tf-spring) both;
	backdrop-filter: blur(var(--tf-blur)) saturate(160%);
	-webkit-backdrop-filter: blur(var(--tf-blur)) saturate(160%);
	background: var(--tf-glass-strong);
	border: 1px solid var(--tf-color-border);
	border-radius: 14px;
	box-shadow: var(--tf-e4);
	overflow: hidden;
	position: relative;
}

.tf-app__toast {
	border-left-color: var(--tf-color-primary);
	border-left-width: 4px;
}

.tf-app__toast.is-success,
.tf-app__toast--success {
	border-left-color: var(--tf-color-success);
}

.tf-app__toast.is-error,
.tf-app__toast--error {
	border-left-color: var(--tf-color-error);
}

@keyframes tf-toast-in {
	from { opacity: 0; transform: translateX(30px) scale(0.94); }
	to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   14. BUILDERS (form builder / embed builder)
   ========================================================================== */

.tf-builder__topbar {
	animation: tf-builder-bar-in 420ms var(--tf-spring) both;
	backdrop-filter: blur(var(--tf-blur)) saturate(160%);
	-webkit-backdrop-filter: blur(var(--tf-blur)) saturate(160%);
	background:
		linear-gradient(90deg, #6366f1, #7c3aed 55%, #06b6d4) top left / 100% 2px no-repeat,
		linear-gradient(
			135deg,
			color-mix(in srgb, var(--tf-color-primary) 8%, var(--tf-glass)) 0%,
			var(--tf-glass) 45%,
			color-mix(in srgb, #06b6d4 5%, var(--tf-glass)) 100%
		);
	border-color: color-mix(in srgb, var(--tf-color-primary) 18%, var(--tf-color-border));
	box-shadow: var(--tf-e2), var(--tf-inner-top);
}

.tf-builder__topbar::before {
	display: none;
}

@keyframes tf-builder-bar-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.tf-builder__back {
	backdrop-filter: blur(8px);
	box-shadow: var(--tf-e1);
}

.tf-builder__action-group {
	backdrop-filter: blur(8px);
	box-shadow: var(--tf-e1), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.tf-builder__btn--publish {
	transform: translateZ(0);
}

.tf-app[data-tf-theme="dark"] .tf-builder__topbar {
	background:
		linear-gradient(90deg, #818cf8, #7c3aed 55%, #22d3ee) top left / 100% 2px no-repeat,
		linear-gradient(
			135deg,
			color-mix(in srgb, #6366f1 16%, var(--tf-color-surface)) 0%,
			var(--tf-color-surface) 50%,
			color-mix(in srgb, #06b6d4 10%, var(--tf-color-surface)) 100%
		);
	border-color: color-mix(in srgb, #818cf8 28%, var(--tf-color-border));
	box-shadow: var(--tf-e2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.tf-app[data-tf-theme="dark"] .tf-builder__back,
.tf-app[data-tf-theme="dark"] .tf-builder__action-group {
	background: color-mix(in srgb, var(--tf-color-text) 4%, var(--tf-color-surface));
	border-color: var(--tf-color-border);
	box-shadow: none;
}

.tf-app[data-tf-theme="dark"] .tf-builder__pill[data-status="active"] {
	background: color-mix(in srgb, var(--tf-color-success) 18%, transparent);
	color: #86efac;
}

.tf-app[data-tf-theme="dark"] .tf-builder__pill[data-status="draft"],
.tf-app[data-tf-theme="dark"] .tf-builder__pill--warn {
	background: color-mix(in srgb, var(--tf-color-warning) 18%, transparent);
	color: #fbbf24;
}


.tf-builder__pane-title {
	font-weight: 800;
	letter-spacing: -0.02em;
}

.tf-builder__field-card {
	background: var(--tf-color-surface);
	border: 1px solid var(--tf-color-border);
	border-radius: var(--tf-radius-sm);
	box-shadow: var(--tf-e1);
	transition:
		transform var(--tf-mid) var(--tf-spring),
		box-shadow var(--tf-mid) var(--tf-ease),
		border-color var(--tf-fast) var(--tf-ease);
}

.tf-builder__field-card:hover {
	border-color: color-mix(in srgb, var(--tf-color-primary) 35%, var(--tf-color-border));
	box-shadow: var(--tf-e3);
	transform: translateY(-2px) scale(1.008);
}

.tf-builder__field-card.is-dragging {
	box-shadow: var(--tf-e4);
	opacity: 0.9;
	transform: scale(1.03) rotate(1deg);
}

.tf-builder__drag {
	cursor: grab;
	transition: color var(--tf-fast) var(--tf-ease), transform var(--tf-fast) var(--tf-ease);
}

.tf-builder__drag:active {
	cursor: grabbing;
	transform: scale(1.2);
}

.tf-builder__preview-frame {
	border-radius: var(--tf-radius);
	box-shadow: var(--tf-e3);
	transform: perspective(1600px) rotateY(-1.5deg);
	transition: transform var(--tf-slow) var(--tf-ease);
}

.tf-builder__preview-frame:hover {
	transform: perspective(1600px) rotateY(0deg) translateZ(10px);
}

.tf-builder__status {
	border-radius: 999px;
	font-weight: 700;
}

.tf-builder__status.is-dirty {
	animation: tf-pulse-ring 1.8s var(--tf-ease) infinite;
}

/* ==========================================================================
   15. AUTH SCREENS
   ========================================================================== */

.tf-app--guest {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 100vh;
	padding: var(--tf-space-5) var(--tf-space-4);
}

.tf-app--guest.tf-auth {
	padding: 0;
}

.tf-app__auth-card {
	animation: tf-auth-in 700ms var(--tf-spring) both;
	max-width: 28rem;
	overflow: hidden;
	padding: var(--tf-space-5);
	width: 100%;
	box-shadow: var(--tf-e4), var(--tf-inner-top);
}

.tf-auth .tf-app__auth-card,
.tf-auth__card {
	animation: tf-auth-card-in 650ms var(--tf-spring) both;
	box-shadow: none;
	overflow: visible;
	padding: 0;
}

.tf-app__auth-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: var(--tf-grad-primary);
	z-index: 2;
}

.tf-auth .tf-app__auth-card::before {
	display: none;
}

.tf-app[data-tf-theme="dark"] .tf-auth__panel {
	background: rgba(8, 12, 18, 0.72);
	border-color: rgba(255, 255, 255, 0.1);
}

.tf-app[data-tf-theme="dark"] .tf-auth__grid {
	opacity: 0.85;
}

@keyframes tf-auth-in {
	from { opacity: 0; transform: perspective(1400px) translateY(36px) rotateX(10deg) scale(0.95); }
	to   { opacity: 1; transform: none; }
}

.tf-app__brand--center {
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.tf-app__brand--center .tf-app__brand-mark {
	animation: tf-float 4s var(--tf-ease) infinite;
	height: 56px;
	width: 56px;
	font-size: 1.2rem;
}

.tf-app__errors {
	animation: tf-pop 300ms var(--tf-spring) both;
	background: var(--tf-color-error-bg);
	border: 1px solid color-mix(in srgb, var(--tf-color-error) 35%, transparent);
	border-radius: var(--tf-radius-sm);
	color: var(--tf-color-error);
}

/* ==========================================================================
   16. PUBLIC COLLECTION FORM + RECORDER (customer-facing)
   ========================================================================== */

.tf-collect-wrap {
	--tf-pub-ease: cubic-bezier(0.22, 1, 0.36, 1);
	perspective: 1400px;
}

.tf-public-form {
	animation: tf-auth-in 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
	backdrop-filter: blur(14px) saturate(150%);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	border-radius: 22px;
	box-shadow:
		0 2px 6px rgba(11, 18, 32, 0.05),
		0 24px 60px -18px rgba(11, 18, 32, 0.28);
	overflow: hidden;
	position: relative;
	transform-style: preserve-3d;
}

.tf-public-form::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: linear-gradient(90deg, #6366f1, #06b6d4, #ec4899);
	background-size: 200% 100%;
	animation: tf-hue 6s linear infinite;
}

@keyframes tf-hue {
	0%   { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}

.tf-public-form__logo {
	filter: drop-shadow(0 8px 18px rgba(11, 18, 32, 0.2));
	transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tf-public-form__logo:hover {
	transform: scale(1.05) rotate(-2deg);
}

.tf-public-form__field {
	animation: tf-rise 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tf-public-form__field:nth-child(1) { animation-delay: 60ms; }
.tf-public-form__field:nth-child(2) { animation-delay: 120ms; }
.tf-public-form__field:nth-child(3) { animation-delay: 180ms; }
.tf-public-form__field:nth-child(4) { animation-delay: 240ms; }
.tf-public-form__field:nth-child(5) { animation-delay: 300ms; }
.tf-public-form__field:nth-child(6) { animation-delay: 360ms; }
.tf-public-form__field:nth-child(7) { animation-delay: 420ms; }
.tf-public-form__field:nth-child(8) { animation-delay: 480ms; }

.tf-public-form__input {
	border-radius: 12px;
	transition:
		border-color 160ms ease,
		box-shadow 300ms ease,
		transform 160ms ease;
}

.tf-public-form__input:focus {
	box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.16), 0 10px 24px -12px rgba(79, 70, 229, 0.6);
	outline: none;
	transform: translateY(-1px);
}

.tf-public-form__submit {
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 300ms ease;
}

.tf-public-form__submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 36px -12px rgba(11, 18, 32, 0.42);
}

.tf-public-form__submit:active {
	transform: translateY(1px) scale(0.985);
}

.tf-public-form__choice {
	border-radius: 12px;
	transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 260ms ease, border-color 160ms ease;
}

.tf-public-form__choice:hover {
	box-shadow: 0 10px 24px -12px rgba(11, 18, 32, 0.4);
	transform: translateY(-2px);
}

.tf-public-form__chip {
	transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tf-public-form__chip:hover {
	transform: translateY(-2px) scale(1.04);
}

.tf-recorder__preview,
.tf-recorder__video,
.tf-recorder__playback {
	border-radius: 16px;
	box-shadow: 0 20px 44px -16px rgba(11, 18, 32, 0.5);
	overflow: hidden;
}

.tf-recorder__btn {
	border-radius: 999px;
	transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 260ms ease;
}

.tf-recorder__btn:hover {
	transform: translateY(-2px) scale(1.03);
}

.tf-recorder__btn.is-recording,
.tf-recorder__btn[data-tf-recording="1"] {
	animation: tf-pulse-ring 1.5s ease-out infinite;
}

.tf-recorder__timer {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.tf-recorder__progress-bar {
	background: linear-gradient(90deg, #6366f1, #06b6d4);
	box-shadow: 0 0 12px rgba(99, 102, 241, 0.6);
	transition: width 200ms linear;
}

/* ==========================================================================
   16b. DARK-MODE RECONCILIATION
   frontend.css hard-codes a couple of light values that would glow white in the
   obsidian theme. The embed preview stays light on purpose ? it is a preview of
   how the widget renders on a (light) customer site.
   ========================================================================== */

.tf-app[data-tf-theme="dark"] .tf-app__skeleton-line,
.tf-app[data-tf-theme="dark"] .tf-skeleton {
	background: linear-gradient(
		90deg,
		rgba(148, 163, 184, 0.1),
		rgba(148, 163, 184, 0.22),
		rgba(148, 163, 184, 0.1)
	);
	background-size: 200% 100%;
}

.tf-app[data-tf-theme="dark"] .tf-app__embed-preview {
	border-color: rgba(148, 163, 184, 0.28);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.tf-app[data-tf-theme="dark"] .tf-app__empty-visual {
	background: linear-gradient(135deg, rgba(129, 140, 248, 0.24), rgba(6, 182, 212, 0.14));
}

.tf-app[data-tf-theme="dark"] {
	--tf-color-muted: #9ca3af;
	--tf-color-border: rgba(148, 163, 184, 0.24);
	--tf-glass: rgba(17, 24, 39, 0.88);
	--tf-glass-strong: rgba(15, 23, 42, 0.96);
}

/* Default links: neutral light text (not indigo/blue) ? exclude chrome controls */
.tf-app[data-tf-theme="dark"] a:not(.tf-app__btn):not(.tf-app__nav-link):not(.tf-app__tab):not(.tf-app__page-btn):not(.tf-app__dropdown-item):not(.tf-app__icon-btn):not(.tf-app__avatar-btn),
.tf-app[data-tf-theme="dark"] a:not(.tf-app__btn):not(.tf-app__nav-link):not(.tf-app__tab):not(.tf-app__page-btn):not(.tf-app__dropdown-item):not(.tf-app__icon-btn):not(.tf-app__avatar-btn):visited {
	color: #e5e7eb;
}

.tf-app[data-tf-theme="dark"] a:not(.tf-app__btn):not(.tf-app__nav-link):not(.tf-app__tab):not(.tf-app__page-btn):not(.tf-app__dropdown-item):not(.tf-app__icon-btn):not(.tf-app__avatar-btn):hover,
.tf-app[data-tf-theme="dark"] a:not(.tf-app__btn):not(.tf-app__nav-link):not(.tf-app__tab):not(.tf-app__page-btn):not(.tf-app__dropdown-item):not(.tf-app__icon-btn):not(.tf-app__avatar-btn):focus-visible {
	color: #ffffff;
}

.tf-app[data-tf-theme="dark"] .tf-app__brand-text,
.tf-app[data-tf-theme="dark"] .tf-app__user-name,
.tf-app[data-tf-theme="dark"] .tf-app__workspace-name {
	color: #f9fafb;
	text-shadow: none;
}

.tf-app[data-tf-theme="dark"] .tf-app__nav-link,
.tf-app[data-tf-theme="dark"] .tf-app__nav-link:visited,
.tf-app[data-tf-theme="dark"] .tf-app__nav-link:not(.is-active) {
	color: #e5e7eb !important;
}

.tf-app[data-tf-theme="dark"] .tf-app__nav-link:not(.is-active):hover,
.tf-app[data-tf-theme="dark"] .tf-app__nav-link:not(.is-active):focus-visible {
	color: #ffffff !important;
	background: color-mix(in srgb, #ffffff 10%, transparent);
}

.tf-app[data-tf-theme="dark"] .tf-app__nav-link.is-active {
	color: #ffffff !important;
	background: color-mix(in srgb, #6366f1 32%, transparent);
	box-shadow: inset 3px 0 0 #a5b4fc;
	text-shadow: none;
}

.tf-app[data-tf-theme="dark"] .tf-app__page-title,
.tf-app[data-tf-theme="dark"] .tf-app__stat-value,
.tf-app[data-tf-theme="dark"] .tf-app__form-card-stats dd,
.tf-app[data-tf-theme="dark"] .tf-app__form-card-title,
.tf-app[data-tf-theme="dark"] .tf-app__embed-card-title,
.tf-app[data-tf-theme="dark"] .tf-app__embed-card-title a,
.tf-app[data-tf-theme="dark"] .tf-app__subsection-title,
.tf-app[data-tf-theme="dark"] .tf-app__panel-title,
.tf-app[data-tf-theme="dark"] h1,
.tf-app[data-tf-theme="dark"] h2,
.tf-app[data-tf-theme="dark"] h3,
.tf-app[data-tf-theme="dark"] h4 {
	background: none !important;
	-webkit-background-clip: unset !important;
	background-clip: unset !important;
	color: #f9fafb !important;
	-webkit-text-fill-color: #f9fafb !important;
}

.tf-app[data-tf-theme="dark"] .tf-app__page-desc,
.tf-app[data-tf-theme="dark"] .tf-app__help,
.tf-app[data-tf-theme="dark"] .tf-app__muted,
.tf-app[data-tf-theme="dark"] .tf-app__stat-label,
.tf-app[data-tf-theme="dark"] .tf-app__filter-label,
.tf-app[data-tf-theme="dark"] .tf-app__forms-count,
.tf-app[data-tf-theme="dark"] .tf-app__form-card-meta,
.tf-app[data-tf-theme="dark"] .tf-app__form-updated,
.tf-app[data-tf-theme="dark"] .tf-app__form-card-stats dt,
.tf-app[data-tf-theme="dark"] .tf-app__dropdown-meta,
.tf-app[data-tf-theme="dark"] .tf-app__dashboard-meta,
.tf-app[data-tf-theme="dark"] .tf-app__toolbar-meta,
.tf-app[data-tf-theme="dark"] .tf-app__url,
.tf-app[data-tf-theme="dark"] .tf-app__field-help,
.tf-app[data-tf-theme="dark"] .tf-app__table th {
	color: #9ca3af !important;
	-webkit-text-fill-color: #9ca3af !important;
}

.tf-app[data-tf-theme="dark"] .tf-app__label,
.tf-app[data-tf-theme="dark"] .tf-app__empty-title,
.tf-app[data-tf-theme="dark"] .tf-app__table td,
.tf-app[data-tf-theme="dark"] .tf-app__check-row,
.tf-app[data-tf-theme="dark"] .tf-app__toggle-row,
.tf-app[data-tf-theme="dark"] .tf-app__subsection,
.tf-app[data-tf-theme="dark"] label:not(.tf-app__btn) {
	color: #e5e7eb;
}

.tf-app[data-tf-theme="dark"] .tf-app__dropdown-item,
.tf-app[data-tf-theme="dark"] .tf-app__dropdown-item:visited {
	color: #e5e7eb !important;
}

.tf-app[data-tf-theme="dark"] .tf-app__dropdown-item:hover,
.tf-app[data-tf-theme="dark"] .tf-app__dropdown-item.is-active,
.tf-app[data-tf-theme="dark"] .tf-app__dropdown-item--action,
.tf-app[data-tf-theme="dark"] .tf-app__dropdown-item--action:hover {
	background: rgba(99, 102, 241, 0.22);
	color: #f9fafb !important;
}

.tf-app[data-tf-theme="dark"] .tf-app__usage-bar,
.tf-app[data-tf-theme="dark"] .tf-app__progress {
	background: rgba(148, 163, 184, 0.2);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.tf-app[data-tf-theme="dark"] .tf-app__field-error {
	background: rgba(244, 63, 94, 0.18);
	border-color: rgba(251, 113, 133, 0.5);
	color: #fda4af;
}

.tf-app[data-tf-theme="dark"] .tf-app__checkbox:has(input:disabled) {
	color: var(--tf-color-muted);
	opacity: 0.78;
}

.tf-app[data-tf-theme="dark"] .tf-app__embed-card-title a:hover {
	color: #ffffff !important;
}

.tf-app[data-tf-theme="dark"] .tf-app__tab {
	color: #d1d5db;
}

.tf-app[data-tf-theme="dark"] .tf-app__tab.is-active,
.tf-app[data-tf-theme="dark"] .tf-app__tab:hover,
.tf-app[data-tf-theme="dark"] .tf-app__tab:focus-visible {
	color: #f9fafb !important;
	-webkit-text-fill-color: #f9fafb !important;
}

/* ==========================================================================
   16b. ANALYTICS CHART + DARK-MODE REPAIRS
   frontend.css hardcodes a few light-only colours (skeletons, embed preview,
   chart bars). Left alone they render as white blocks on the dark theme, so
   they are re-tokenised here.
   ========================================================================== */

.tf-analytics__bar i {
	background: var(--tf-grad-primary);
	border-radius: 4px 4px 2px 2px;
	box-shadow: 0 -2px 12px color-mix(in srgb, var(--tf-color-primary) 55%, transparent);
	transform-origin: 50% 100%;
	animation: tf-bar-grow 900ms var(--tf-ease) backwards;
	transition: filter var(--tf-fast) var(--tf-ease);
}

@keyframes tf-bar-grow {
	from { transform: scaleY(0); }
	to   { transform: scaleY(1); }
}

.tf-analytics__bar:hover i {
	filter: brightness(1.15) saturate(1.2);
}

.tf-analytics__bar:nth-child(2n) i  { animation-delay: 40ms; }
.tf-analytics__bar:nth-child(3n) i  { animation-delay: 80ms; }
.tf-analytics__bar:nth-child(5n) i  { animation-delay: 120ms; }

.tf-app__embed-preview,
.tf-embed-builder__preview {
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--tf-color-primary) 6%, var(--tf-color-surface)), var(--tf-color-surface));
	border: 1px solid color-mix(in srgb, var(--tf-color-primary) 18%, var(--tf-color-border));
	border-radius: var(--tf-radius);
	box-shadow: var(--tf-e1), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.tf-embed-builder__settings,
.tf-embed-builder__preview-pane {
	box-shadow: var(--tf-e1);
}

.tf-embed-builder__pane-tab.is-active {
	box-shadow: var(--tf-e1);
}

.tf-app[data-tf-theme="dark"] .tf-embed-builder__settings,
.tf-app[data-tf-theme="dark"] .tf-embed-builder__preview-pane {
	background: var(--tf-color-surface);
	border-color: var(--tf-color-border);
}

.tf-app[data-tf-theme="dark"] .tf-embed-builder__pane-tabs {
	background: color-mix(in srgb, var(--tf-color-text) 5%, var(--tf-color-surface));
}

.tf-app__skeleton-line {
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--tf-color-text) 7%, transparent),
		color-mix(in srgb, var(--tf-color-text) 14%, transparent),
		color-mix(in srgb, var(--tf-color-text) 7%, transparent)
	);
	background-size: 200% 100%;
}

.tf-app__field-error {
	border-color: color-mix(in srgb, var(--tf-color-error) 40%, transparent);
}

.tf-app__empty-visual {
	background: linear-gradient(135deg, color-mix(in srgb, var(--tf-color-primary) 26%, transparent), color-mix(in srgb, var(--tf-accent) 18%, transparent));
	box-shadow: var(--tf-e2);
}

/* Dark theme: neutralise any remaining light-only fills + blue body text. */
.tf-app[data-tf-theme="dark"] .tf-app__toast,
.tf-app[data-tf-theme="dark"] .tf-app__code,
.tf-app[data-tf-theme="dark"] .tf-builder__field-card,
.tf-app[data-tf-theme="dark"] .tf-app__panel,
.tf-app[data-tf-theme="dark"] .tf-app__card,
.tf-app[data-tf-theme="dark"] .tf-app__stat,
.tf-app[data-tf-theme="dark"] .tf-app__form-card,
.tf-app[data-tf-theme="dark"] .tf-app__empty,
.tf-app[data-tf-theme="dark"] .tf-app__forms-toolbar,
.tf-app[data-tf-theme="dark"] .tf-app__testimonials-toolbar,
.tf-app[data-tf-theme="dark"] .tf-app__embeds-toolbar,
.tf-app[data-tf-theme="dark"] .tf-app__analytics-toolbar,
.tf-app[data-tf-theme="dark"] .tf-app__team-toolbar,
.tf-app[data-tf-theme="dark"] .tf-app__workspace-toolbar,
.tf-app[data-tf-theme="dark"] .tf-app__table-wrap,
.tf-app[data-tf-theme="dark"] .tf-app__modal,
.tf-app[data-tf-theme="dark"] .tf-app__drawer,
.tf-app[data-tf-theme="dark"] .tf-app__dropdown-menu,
.tf-app[data-tf-theme="dark"] .tf-app__embed-card,
.tf-app[data-tf-theme="dark"] .tf-app__testimonial-card,
.tf-app[data-tf-theme="dark"] .tf-app__workspace-section,
.tf-app[data-tf-theme="dark"] .tf-app__team-invite-panel,
.tf-app[data-tf-theme="dark"] .tf-app__subusers-panel,
.tf-app[data-tf-theme="dark"] .tf-app__billing-panel,
.tf-app[data-tf-theme="dark"] .tf-app__upgrades-panel {
	background: var(--tf-color-surface);
	border-color: var(--tf-color-border);
	color: var(--tf-color-text);
}

.tf-app[data-tf-theme="dark"] .tf-app__form-card-stats > div {
	background: color-mix(in srgb, #ffffff 4%, var(--tf-color-surface));
	border-color: var(--tf-color-border);
}

.tf-app[data-tf-theme="dark"] .tf-app__badge,
.tf-app[data-tf-theme="dark"] .tf-app__status {
	background: color-mix(in srgb, #ffffff 10%, transparent) !important;
	border-color: color-mix(in srgb, #ffffff 20%, transparent) !important;
	color: #f3f4f6 !important;
	-webkit-text-fill-color: #f3f4f6 !important;
}

.tf-app[data-tf-theme="dark"] .tf-app__badge--success,
.tf-app[data-tf-theme="dark"] .tf-app__status.is-published,
.tf-app[data-tf-theme="dark"] .tf-app__status--published {
	background: color-mix(in srgb, #34d399 16%, transparent) !important;
	border-color: color-mix(in srgb, #34d399 35%, transparent) !important;
	color: #6ee7b7 !important;
	-webkit-text-fill-color: #6ee7b7 !important;
}

.tf-app[data-tf-theme="dark"] .tf-app__badge--warning {
	background: color-mix(in srgb, #fbbf24 16%, transparent) !important;
	border-color: color-mix(in srgb, #fbbf24 35%, transparent) !important;
	color: #fcd34d !important;
	-webkit-text-fill-color: #fcd34d !important;
}

.tf-app[data-tf-theme="dark"] .tf-app__badge--danger,
.tf-app[data-tf-theme="dark"] .tf-app__status.is-rejected {
	background: color-mix(in srgb, #f87171 16%, transparent) !important;
	border-color: color-mix(in srgb, #f87171 35%, transparent) !important;
	color: #fca5a5 !important;
	-webkit-text-fill-color: #fca5a5 !important;
}

.tf-app[data-tf-theme="dark"] .tf-app__input,
.tf-app[data-tf-theme="dark"] .tf-app__select,
.tf-app[data-tf-theme="dark"] .tf-app__textarea,
.tf-app[data-tf-theme="dark"] textarea,
.tf-app[data-tf-theme="dark"] select,
.tf-app[data-tf-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]) {
	background: #0b1220;
	border-color: #4b5563;
	color: #f9fafb;
}

.tf-app[data-tf-theme="dark"] .tf-app__input:focus,
.tf-app[data-tf-theme="dark"] .tf-app__select:focus,
.tf-app[data-tf-theme="dark"] .tf-app__textarea:focus,
.tf-app[data-tf-theme="dark"] textarea:focus,
.tf-app[data-tf-theme="dark"] select:focus,
.tf-app[data-tf-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):focus {
	border-color: #818cf8;
	box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.28);
	color: #f9fafb;
}

.tf-app[data-tf-theme="dark"] .tf-app__input::placeholder,
.tf-app[data-tf-theme="dark"] textarea::placeholder {
	color: #6b7280;
}

.tf-app[data-tf-theme="dark"] .tf-app__btn--primary,
.tf-app[data-tf-theme="dark"] a.tf-app__btn--primary,
.tf-app[data-tf-theme="dark"] a.tf-app__btn--primary:link,
.tf-app[data-tf-theme="dark"] a.tf-app__btn--primary:visited,
.tf-app[data-tf-theme="dark"] a.tf-app__btn--primary:hover,
.tf-app[data-tf-theme="dark"] a.tf-app__btn--primary:focus-visible {
	background: linear-gradient(135deg, #818cf8, #6366f1 45%, #7c3aed);
	border-color: transparent;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

.tf-app[data-tf-theme="dark"] .tf-app__btn--ghost,
.tf-app[data-tf-theme="dark"] a.tf-app__btn--ghost,
.tf-app[data-tf-theme="dark"] a.tf-app__btn--ghost:link,
.tf-app[data-tf-theme="dark"] a.tf-app__btn--ghost:visited,
.tf-app[data-tf-theme="dark"] .tf-app__btn--secondary,
.tf-app[data-tf-theme="dark"] a.tf-app__btn--secondary {
	background: color-mix(in srgb, #ffffff 8%, var(--tf-color-surface));
	border-color: #4b5563;
	color: #f3f4f6 !important;
	-webkit-text-fill-color: #f3f4f6 !important;
}

.tf-app[data-tf-theme="dark"] .tf-app__btn--ghost:hover,
.tf-app[data-tf-theme="dark"] a.tf-app__btn--ghost:hover,
.tf-app[data-tf-theme="dark"] .tf-app__btn--ghost:focus-visible,
.tf-app[data-tf-theme="dark"] a.tf-app__btn--ghost:focus-visible,
.tf-app[data-tf-theme="dark"] .tf-app__btn--secondary:hover,
.tf-app[data-tf-theme="dark"] a.tf-app__btn--secondary:hover {
	background: color-mix(in srgb, #ffffff 14%, var(--tf-color-surface));
	border-color: #6b7280;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

.tf-app[data-tf-theme="dark"] .tf-app__btn--danger,
.tf-app[data-tf-theme="dark"] a.tf-app__btn--danger {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

.tf-app[data-tf-theme="dark"] .tf-app__btn--link,
.tf-app[data-tf-theme="dark"] a.tf-app__btn--link,
.tf-app[data-tf-theme="dark"] a.tf-app__btn--link:visited {
	background: transparent;
	border-color: transparent;
	color: #e5e7eb !important;
	-webkit-text-fill-color: #e5e7eb !important;
}

.tf-app[data-tf-theme="dark"] .tf-app__btn--link:hover,
.tf-app[data-tf-theme="dark"] a.tf-app__btn--link:hover {
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

.tf-app[data-tf-theme="dark"] .tf-app__icon-btn {
	background: color-mix(in srgb, #ffffff 6%, var(--tf-color-surface));
	border-color: #4b5563;
	color: #f3f4f6 !important;
}

.tf-app[data-tf-theme="dark"] .tf-app__icon-btn:hover,
.tf-app[data-tf-theme="dark"] .tf-app__icon-btn:focus-visible {
	background: color-mix(in srgb, #ffffff 12%, var(--tf-color-surface));
	color: #ffffff !important;
}

.tf-app[data-tf-theme="dark"] .tf-app__tab.is-active {
	background: color-mix(in srgb, #ffffff 10%, var(--tf-color-surface));
	color: #f9fafb !important;
}

.tf-app[data-tf-theme="dark"] .tf-app__page-btn {
	background: color-mix(in srgb, #ffffff 6%, var(--tf-color-surface));
	border-color: #4b5563;
	color: #e5e7eb !important;
}

.tf-app[data-tf-theme="dark"] .tf-app__page-btn:hover,
.tf-app[data-tf-theme="dark"] .tf-app__page-btn.is-active {
	background: var(--tf-grad-primary);
	color: #ffffff !important;
}

.tf-app[data-tf-theme="dark"] .tf-app__tier-badge--agency {
	color: #e9d5ff;
}

/* ==========================================================================
   17. MISC ? scrollbars, selection, links, page transition
   ========================================================================== */

.tf-app ::selection {
	background: color-mix(in srgb, var(--tf-color-primary) 26%, transparent);
	color: var(--tf-color-text);
}

.tf-app__content,
.tf-app__sidebar,
.tf-app__drawer-body,
.tf-app__modal-body,
.tf-app__table-wrap {
	scrollbar-color: color-mix(in srgb, var(--tf-color-primary) 45%, transparent) transparent;
	scrollbar-width: thin;
}

.tf-app ::-webkit-scrollbar {
	height: 10px;
	width: 10px;
}

.tf-app ::-webkit-scrollbar-track {
	background: transparent;
}

.tf-app ::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--tf-color-primary) 40%, transparent);
	border: 2px solid transparent;
	background-clip: padding-box;
	border-radius: 999px;
}

.tf-app ::-webkit-scrollbar-thumb:hover {
	background: color-mix(in srgb, var(--tf-color-primary) 70%, transparent);
	background-clip: padding-box;
}

/* Route progress bar (premium.js) */
.tf-app__progress-top {
	position: fixed;
	top: var(--tf-admin-bar, 0px);
	left: 0;
	height: 3px;
	width: 0;
	background: var(--tf-grad-primary);
	box-shadow: 0 0 12px color-mix(in srgb, var(--tf-color-primary) 80%, transparent);
	z-index: 99999;
	transition: width 320ms var(--tf-ease), opacity 320ms var(--tf-ease);
	pointer-events: none;
}

.tf-app__skip-link:focus {
	background: var(--tf-grad-primary);
	border-radius: 0 0 12px 0;
	box-shadow: var(--tf-e3);
	color: #fff;
}

/* ==========================================================================
   18. STRUCTURED MANAGEMENT PAGES
   ========================================================================== */

.tf-app__management-toolbar,
.tf-app__analytics-summary,
.tf-app__embed-card,
.tf-app__team-summary > div,
.tf-app__settings-create-form,
.tf-app__testimonials-toolbar {
	background: var(--tf-glass-strong);
	backdrop-filter: blur(12px) saturate(150%);
	-webkit-backdrop-filter: blur(12px) saturate(150%);
	border-color: var(--tf-color-border);
	box-shadow: var(--tf-e2), var(--tf-inner-top);
}

.tf-app__embed-card,
.tf-app__team-summary > div {
	transition: transform var(--tf-mid) var(--tf-ease), box-shadow var(--tf-mid) var(--tf-ease), border-color var(--tf-fast) var(--tf-ease);
}

.tf-app__embed-card:hover,
.tf-app__team-summary > div:hover {
	border-color: color-mix(in srgb, var(--tf-color-primary) 30%, var(--tf-color-border));
	box-shadow: var(--tf-e3), var(--tf-inner-top);
	transform: translateY(-3px);
}

.tf-app__embed-card-head {
	background: linear-gradient(135deg, color-mix(in srgb, var(--tf-color-primary) 8%, transparent), transparent);
}

.tf-app__embed-card-title a {
	color: var(--tf-color-text);
	text-decoration: none;
}

.tf-app__embed-card-title a:hover {
	color: var(--tf-color-primary);
}

.tf-app[data-tf-theme="dark"] .tf-app__embed-card-title a:hover {
	color: #ffffff !important;
}

.tf-app__embed-card-actions {
	background: color-mix(in srgb, var(--tf-color-text) 2%, transparent);
}

.tf-app__page-btn {
	box-shadow: var(--tf-e1);
	transition: transform var(--tf-fast) var(--tf-spring), background-color var(--tf-fast) var(--tf-ease), box-shadow var(--tf-fast) var(--tf-ease);
}

.tf-app__page-btn:hover,
.tf-app__page-btn.is-active {
	background: var(--tf-grad-primary);
	box-shadow: var(--tf-glow);
	color: #fff !important;
	transform: translateY(-2px);
}

.tf-app__analytics-summary {
	position: relative;
}

.tf-app__analytics-summary::before {
	background: var(--tf-grad-primary);
	border-radius: var(--tf-radius-sm) 0 0 var(--tf-radius-sm);
	content: "";
	inset: 0 auto 0 0;
	position: absolute;
	width: 4px;
}

.tf-app__analytics-panel,
.tf-app__analytics-grid .tf-app__panel {
	min-width: 0;
}

.tf-app__subsection {
	color: var(--tf-color-text);
}

.tf-analytics__dist li,
.tf-analytics__list li,
.tf-app__settings-choice-group,
.tf-app__list > li {
	box-shadow: var(--tf-e1), var(--tf-inner-top);
	transition: border-color var(--tf-fast) var(--tf-ease), transform var(--tf-fast) var(--tf-spring);
}

.tf-analytics__dist li:hover,
.tf-analytics__list li:hover,
.tf-app__list > li:hover {
	border-color: color-mix(in srgb, var(--tf-color-primary) 28%, var(--tf-color-border));
	transform: translateX(3px);
}

.tf-app__team-summary > div:nth-child(1) { border-top: 3px solid #6366f1; }
.tf-app__team-summary > div:nth-child(2) { border-top: 3px solid #06b6d4; }
.tf-app__team-summary > div:nth-child(3) { border-top: 3px solid #a855f7; }

.tf-app__team-invite-panel {
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--tf-color-primary) 7%, transparent), transparent 60%),
		var(--tf-glass-strong);
}

.tf-app__settings-panel {
	overflow: hidden;
}

.tf-app__settings-panel > .tf-app__section-head,
.tf-app__settings-panel > .tf-app__settings-panel-head {
	border-bottom: 1px solid var(--tf-color-border);
	margin-bottom: 0;
	padding-bottom: var(--tf-space-3);
}

.tf-app__settings-panel--profile { border-top: 3px solid #0f766e; }
.tf-app__settings-panel--notifications { border-top: 3px solid #0891b2; }
.tf-app__settings-panel--api { border-top: 3px solid #14b8a6; }
.tf-app__settings-panel--webhooks { border-top: 3px solid #0e7490; }
.tf-app__settings-panel--ai { border-top: 3px solid #155e75; }
.tf-app__settings-panel--ownership { border-top: 3px solid #64748b; }

.tf-app__panel--danger {
	box-shadow: 0 12px 30px -20px color-mix(in srgb, var(--tf-color-error) 65%, transparent), var(--tf-inner-top);
}

.tf-app__panel--danger:hover {
	border-color: color-mix(in srgb, var(--tf-color-error) 58%, var(--tf-color-border));
	transform: none;
}

.tf-app[data-tf-theme="dark"] .tf-app__management-toolbar,
.tf-app[data-tf-theme="dark"] .tf-app__testimonials-toolbar,
.tf-app[data-tf-theme="dark"] .tf-app__analytics-summary,
.tf-app[data-tf-theme="dark"] .tf-app__embed-card,
.tf-app[data-tf-theme="dark"] .tf-app__team-summary > div,
.tf-app[data-tf-theme="dark"] .tf-app__settings-create-form,
.tf-app[data-tf-theme="dark"] .tf-app__list > li,
.tf-app[data-tf-theme="dark"] .tf-app__settings-choice-group {
	color: var(--tf-color-text);
}

.tf-app[data-tf-theme="dark"] .tf-app__dropdown-item--danger {
	color: #fda4af !important;
}

/* ==========================================================================
   19. RESPONSIVE + ACCESSIBILITY GUARDS
   ========================================================================== */

@media (max-width: 900px) {
	.tf-app__sidebar {
		box-shadow: var(--tf-e4);
	}

	.tf-app__stat-card:hover {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tf-app *,
	.tf-app *::before,
	.tf-app *::after,
	.tf-public-form *,
	.tf-recorder * {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.tf-app .tf-reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	.tf-app__stage-blob,
	.tf-app__stage-grid {
		display: none;
	}
}

@media print {
	.tf-app__stage,
	.tf-app__sidebar,
	.tf-app__topbar-actions,
	.tf-app__toasts {
		display: none !important;
	}

	.tf-app .tf-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Help Center ? keep topic buttons & article text readable (esp. light mode hover). */
.tf-app .tf-app__kb-toc-btn,
.tf-app .tf-app__kb-toc-btn:hover,
.tf-app .tf-app__kb-toc-btn:focus-visible,
.tf-app .tf-app__kb-toc-btn.is-active {
	color: var(--tf-color-text) !important;
	-webkit-text-fill-color: var(--tf-color-text) !important;
}

.tf-app .tf-app__kb-toc-btn:hover .tf-app__kb-toc-title,
.tf-app .tf-app__kb-toc-btn.is-active .tf-app__kb-toc-title,
.tf-app .tf-app__kb-article-title,
.tf-app .tf-app__kb-section p,
.tf-app .tf-app__kb-steps li {
	color: var(--tf-color-text) !important;
	-webkit-text-fill-color: var(--tf-color-text) !important;
}

.tf-app .tf-app__kb-toc-summary,
.tf-app .tf-app__kb-toc-btn:hover .tf-app__kb-toc-summary,
.tf-app .tf-app__kb .tf-app__muted {
	color: var(--tf-color-muted) !important;
	-webkit-text-fill-color: var(--tf-color-muted) !important;
}

.tf-app[data-tf-page="help"] .tf-app__page-title {
	background: none !important;
	color: var(--tf-color-text) !important;
	-webkit-text-fill-color: var(--tf-color-text) !important;
}

/*
 * Final lock ? workspace / Actions dropdown triggers stay on-brand.
 * Some host themes win the earlier cascade with !important red/pink hover.
 */
.tf-app .tf-app__topbar .tf-app__dropdown-trigger,
.tf-app .tf-app__topbar .tf-app__dropdown-trigger:link,
.tf-app .tf-app__topbar .tf-app__dropdown-trigger:visited,
.tf-app .tf-app__topbar .tf-app__dropdown-trigger:hover,
.tf-app .tf-app__topbar .tf-app__dropdown-trigger:focus,
.tf-app .tf-app__topbar .tf-app__dropdown-trigger:focus-visible,
.tf-app .tf-app__topbar .tf-app__dropdown-trigger:active,
.tf-app .tf-app__topbar .tf-app__dropdown-trigger[aria-expanded="true"],
.tf-app .tf-app__form-card .tf-app__dropdown-trigger,
.tf-app .tf-app__form-card .tf-app__dropdown-trigger:hover,
.tf-app .tf-app__form-card .tf-app__dropdown-trigger:focus,
.tf-app .tf-app__form-card .tf-app__dropdown-trigger:focus-visible,
.tf-app .tf-app__form-card .tf-app__dropdown-trigger:active,
.tf-app .tf-app__form-card .tf-app__dropdown-trigger[aria-expanded="true"] {
	background: var(--tf-color-surface) !important;
	background-color: var(--tf-color-surface) !important;
	background-image: none !important;
	border-color: var(--tf-color-border) !important;
	color: var(--tf-color-text) !important;
	-webkit-text-fill-color: var(--tf-color-text) !important;
	outline-color: var(--tf-color-primary);
}

.tf-app .tf-app__topbar .tf-app__dropdown-trigger:hover,
.tf-app .tf-app__topbar .tf-app__dropdown-trigger:focus-visible,
.tf-app .tf-app__topbar .tf-app__dropdown-trigger[aria-expanded="true"],
.tf-app .tf-app__form-card .tf-app__dropdown-trigger:hover,
.tf-app .tf-app__form-card .tf-app__dropdown-trigger:focus-visible,
.tf-app .tf-app__form-card .tf-app__dropdown-trigger[aria-expanded="true"] {
	background: color-mix(in srgb, var(--tf-color-primary) 8%, var(--tf-color-surface)) !important;
	background-color: color-mix(in srgb, var(--tf-color-primary) 8%, var(--tf-color-surface)) !important;
	border-color: color-mix(in srgb, var(--tf-color-primary) 35%, var(--tf-color-border)) !important;
}

.tf-app .tf-embed-builder__pane-tab,
.tf-app .tf-embed-builder__pane-tab:hover,
.tf-app .tf-embed-builder__pane-tab:focus,
.tf-app .tf-embed-builder__pane-tab:focus-visible,
.tf-app .tf-embed-builder__pane-tab:active {
	background-color: transparent !important;
	background-image: none !important;
	border-color: transparent !important;
	color: var(--tf-color-muted) !important;
	-webkit-text-fill-color: var(--tf-color-muted) !important;
}

.tf-app .tf-embed-builder__pane-tab.is-active,
.tf-app .tf-embed-builder__pane-tab.is-active:hover,
.tf-app .tf-embed-builder__pane-tab.is-active:focus-visible,
.tf-app .tf-embed-builder__pane-tab.is-active:active {
	background-color: var(--tf-color-surface) !important;
	color: var(--tf-color-text) !important;
	-webkit-text-fill-color: var(--tf-color-text) !important;
}

/* Premium dashboard polish */
.tf-app__dashboard-heading {
	background: linear-gradient(135deg, var(--tf-color-text), color-mix(in srgb, var(--tf-color-primary) 55%, var(--tf-color-text)));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.tf-app[data-tf-theme="dark"] .tf-app__dashboard-heading {
	background: none;
	-webkit-background-clip: unset;
	background-clip: unset;
	color: #f9fafb;
	-webkit-text-fill-color: #f9fafb;
}

.tf-dash-kpi__card,
.tf-dash-secondary__item,
.tf-dash-links__item {
	box-shadow: var(--tf-e1), var(--tf-inner-top);
}

.tf-dash-chart-panel,
.tf-dash-matrix__card {
	overflow: hidden;
}

.tf-dash-chart-panel::after,
.tf-dash-matrix__card::after {
	background: radial-gradient(420px circle at 12% 0%, color-mix(in srgb, var(--tf-color-primary) 14%, transparent), transparent 55%);
	content: "";
	inset: 0;
	opacity: 0.9;
	pointer-events: none;
	position: absolute;
}

.tf-dash-chart-panel > *,
.tf-dash-matrix__card > * {
	position: relative;
	z-index: 1;
}

.tf-dash-chart__bar i,
.tf-dash-chart__col i {
	box-shadow: 0 0 12px color-mix(in srgb, var(--tf-color-primary) 28%, transparent);
}

.tf-dash-recent__link {
	background: var(--tf-glass-strong);
	backdrop-filter: blur(10px) saturate(140%);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	box-shadow: var(--tf-e1), var(--tf-inner-top);
}

a.tf-dash-recent__link:hover {
	box-shadow: var(--tf-e3), var(--tf-inner-top);
}

.tf-dash-recent__name {
	letter-spacing: -0.02em;
}

.tf-app[data-tf-theme="dark"] .tf-dash-recent__quote,
.tf-app[data-tf-theme="dark"] .tf-dash-recent__foot {
	color: color-mix(in srgb, #e5e7eb 72%, transparent);
}

.tf-app[data-tf-theme="dark"] .tf-dash-recent__type.is-audio {
	color: #cbd5e1;
}

@media (max-width: 640px) {
	.tf-dash-recent__link {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.tf-dash-recent__chevron {
		display: none;
	}

	.tf-dash-recent__top {
		flex-direction: column;
	}
}