/* ============================================
   Flag.red — Premium Design System
   Built on Inter + Bootstrap 5.
   ============================================ */

/* =============================================
   0. CSS VARIABLES — Design Tokens
   ============================================= */
:root,
[data-bs-theme="light"] {
	/* Brand */
	--fr-accent: #e5484d;
	--fr-accent-hover: #d93d42;
	--fr-accent-subtle: rgba(229, 72, 77, 0.06);
	--fr-accent-glow: rgba(229, 72, 77, 0.15);

	/* Override Phoenix/Bootstrap primary to match brand red */
	--phoenix-primary: #e5484d;
	--phoenix-primary-rgb: 229, 72, 77;
	--phoenix-primary-text-emphasis: #d93d42;
	--phoenix-primary-bg-subtle: rgba(229, 72, 77, 0.08);
	--phoenix-primary-border-subtle: rgba(229, 72, 77, 0.3);
	--bs-primary: #e5484d;
	--bs-primary-rgb: 229, 72, 77;
	--bs-link-color: #e5484d;
	--bs-link-color-rgb: 229, 72, 77;
	--bs-link-hover-color: #d93d42;
	--bs-link-hover-color-rgb: 217, 61, 66;
	--phoenix-primary-lighter: rgba(229, 72, 77, 0.3);
	--phoenix-primary-light: rgba(229, 72, 77, 0.5);
	--phoenix-primary-dark: #d93d42;
	--phoenix-primary-darker: #c0343a;
	--phoenix-primary-lighter-rgb: 229, 72, 77;
	--phoenix-primary-light-rgb: 229, 72, 77;
	--phoenix-primary-dark-rgb: 217, 61, 66;
	--phoenix-primary-darker-rgb: 192, 52, 58;
	--phoenix-primary-bg-subtle-rgb: 229, 72, 77;

	/* Surfaces */
	--fr-bg: #ffffff;
	--fr-bg-subtle: #fafafb;
	--fr-bg-muted: #f4f4f6;
	--fr-bg-elevated: #ffffff;
	--fr-bg-dark: #0b0b0e;

	/* Text */
	--fr-text: #111113;
	--fr-text-secondary: #52525b;
	--fr-text-muted: #a1a1aa;

	/* Borders */
	--fr-border: #e4e4e7;
	--fr-border-subtle: #f0f0f3;

	/* Radius */
	--fr-radius-sm: 0.5rem;
	--fr-radius: 0.75rem;
	--fr-radius-lg: 1rem;
	--fr-radius-xl: 1.5rem;
	--fr-radius-full: 9999px;

	/* Shadows */
	--fr-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
	--fr-shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
	--fr-shadow: 0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
	--fr-shadow-md: 0 8px 24px -4px rgba(0,0,0,0.08), 0 4px 10px -6px rgba(0,0,0,0.03);
	--fr-shadow-lg: 0 20px 50px -12px rgba(0,0,0,0.12);
	--fr-shadow-xl: 0 25px 60px -15px rgba(0,0,0,0.18);

	/* Severity */
	--fr-critical: #dc2626;
	--fr-critical-bg: #fef2f2;
	--fr-high: #ea580c;
	--fr-high-bg: #fff7ed;
	--fr-medium: #ca8a04;
	--fr-medium-bg: #fefce8;
	--fr-low: #16a34a;
	--fr-low-bg: #f0fdf4;
}

[data-bs-theme="dark"] {
	--fr-bg: #0b0b0e;
	--fr-bg-subtle: #111115;
	--fr-bg-muted: #19191e;
	--fr-bg-elevated: #161619;
	--fr-bg-dark: #0b0b0e;
	--fr-text: #f4f4f5;
	--fr-text-secondary: #a1a1aa;
	--fr-text-muted: #63636e;
	--fr-border: #27272a;
	--fr-border-subtle: #1e1e22;
	--phoenix-primary: #e5484d;
	--phoenix-primary-rgb: 229, 72, 77;
	--bs-primary: #e5484d;
	--bs-primary-rgb: 229, 72, 77;
	--bs-link-color: #e5484d;
	--bs-link-color-rgb: 229, 72, 77;
	--bs-link-hover-color: #d93d42;
	--bs-link-hover-color-rgb: 217, 61, 66;
	--fr-shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
	--fr-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
	--fr-shadow: 0 4px 6px rgba(0,0,0,0.25);
	--fr-shadow-md: 0 8px 25px rgba(0,0,0,0.35);
	--fr-shadow-lg: 0 20px 50px rgba(0,0,0,0.4);
	--fr-shadow-xl: 0 25px 60px rgba(0,0,0,0.5);
	--fr-critical-bg: rgba(220,38,38,0.12);
	--fr-high-bg: rgba(234,88,12,0.12);
	--fr-medium-bg: rgba(202,138,4,0.12);
	--fr-low-bg: rgba(22,163,74,0.12);
}


/* =============================================
   1. GLOBAL TYPOGRAPHY
   ============================================= */
html {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
body,
.main {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	color: var(--fr-text);
	background-color: var(--fr-bg);
	font-size: 0.9375rem;
	line-height: 1.7;
	letter-spacing: -0.01em;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--fr-text);
}
h1, .h1 { font-size: 2.75rem; font-weight: 800; }
h2, .h2 { font-size: 2.25rem; font-weight: 800; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.0625rem; }
h6, .h6 { font-size: 0.875rem; }
.display-3 { font-size: clamp(2.5rem, 5vw, 4.5rem) !important; font-weight: 900 !important; letter-spacing: -0.04em; line-height: 1.05 !important; }
.display-4 { font-size: clamp(2.25rem, 4.5vw, 3.75rem) !important; font-weight: 900 !important; letter-spacing: -0.04em; line-height: 1.05 !important; }
.display-5 { font-size: 2.75rem !important; font-weight: 800 !important; letter-spacing: -0.03em; }
.display-6 { font-size: 2.25rem !important; font-weight: 800 !important; }
p { color: var(--fr-text-secondary); }
.lead { font-size: 1.1875rem; line-height: 1.7; color: var(--fr-text-secondary); }
.small, small { font-size: 0.8125rem; }
a { color: var(--fr-accent); transition: color 0.15s ease; }
a:hover { color: var(--fr-accent-hover); }
.fw-black { font-weight: 900 !important; }
.text-balance { text-wrap: balance; }

/* Section label — uppercase accent kicker above headings */
.fr-label {
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--fr-accent);
	margin-bottom: 0.5rem;
}


/* =============================================
   2. NAVBAR
   ============================================= */
.fr-navbar-wrap {
	position: sticky;
	top: 0;
	z-index: 1030;
	background: transparent;
	border-bottom: 1px solid transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.fr-navbar-wrap.is-scrolled {
	background: rgba(255,255,255,0.92);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom-color: var(--fr-border);
	box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}
[data-bs-theme="dark"] .fr-navbar-wrap.is-scrolled {
	background: rgba(11,11,14,0.88);
	border-bottom-color: var(--fr-border);
	box-shadow: 0 1px 8px rgba(0,0,0,0.2);
}
.bg-body-emphasis[data-navbar-shadow-on-scroll] {
	background: transparent !important;
	border-bottom: 1px solid transparent !important;
}
.bg-body-emphasis[data-navbar-shadow-on-scroll].is-scrolled {
	background: rgba(255,255,255,0.92) !important;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom-color: var(--fr-border) !important;
	box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}
[data-bs-theme="dark"] .bg-body-emphasis[data-navbar-shadow-on-scroll].is-scrolled {
	background: rgba(11,11,14,0.88) !important;
	border-bottom-color: var(--fr-border) !important;
	box-shadow: 0 1px 8px rgba(0,0,0,0.2);
}
.fr-topbar .nav-link {
	font-weight: 500;
	font-size: 0.875rem;
	color: var(--fr-text-secondary);
	padding: 0.375rem;
	border-radius: var(--fr-radius-sm);
	transition: color 0.15s ease, background-color 0.15s ease;
}
.fr-topbar .nav-link:hover,
.fr-topbar .nav-link:focus {
	color: var(--fr-text);
	background-color: var(--fr-bg-muted);
}
.fr-topbar .dropdown-menu {
	border: 1px solid var(--fr-border) !important;
	border-radius: var(--fr-radius) !important;
	box-shadow: var(--fr-shadow-md) !important;
	padding: 0.5rem !important;
	background: var(--fr-bg-elevated) !important;
	margin-top: 0.5rem !important;
}
.fr-topbar .dropdown-item {
	border-radius: var(--fr-radius-sm) !important;
	padding: 0.5rem 0.75rem !important;
	font-size: 0.875rem !important;
	font-weight: 500;
	color: var(--fr-text-secondary) !important;
}
.fr-topbar .dropdown-item:hover {
	background-color: var(--fr-bg-muted) !important;
	color: var(--fr-text) !important;
}
.navbar-shadow {
	box-shadow: none !important;
	background: transparent !important;
	border: none !important;
}
/* Kill any Phoenix bg-body-emphasis on nav wrapper */
.fr-navbar-wrap .navbar,
.fr-navbar-wrap > nav {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}


/* =============================================
   3. BUTTONS
   ============================================= */
.btn {
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em;
	border-radius: var(--fr-radius-sm) !important;
	transition: all 0.2s ease !important;
	font-size: 0.875rem !important;
	padding: 0.5rem 1.25rem !important;
	border: 1px solid transparent !important;
}
.btn-lg {
	padding: 0.8125rem 2rem !important;
	font-size: 0.9375rem !important;
	border-radius: var(--fr-radius) !important;
}
.btn-sm {
	padding: 0.375rem 0.875rem !important;
	font-size: 0.8125rem !important;
}
.btn-primary {
	background-color: var(--fr-accent) !important;
	border-color: var(--fr-accent) !important;
	color: #fff !important;
	box-shadow: 0 1px 2px rgba(229,72,77,0.15) !important;
}
.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--fr-accent-hover) !important;
	border-color: var(--fr-accent-hover) !important;
	box-shadow: 0 6px 20px rgba(229,72,77,0.25) !important;
	transform: translateY(-1px);
}
.btn-primary:active {
	transform: translateY(0);
	box-shadow: 0 1px 2px rgba(229,72,77,0.15) !important;
}
.btn-outline-primary {
	color: var(--fr-accent) !important;
	border-color: var(--fr-accent) !important;
	background: transparent !important;
}
.btn-outline-primary:hover {
	background-color: var(--fr-accent) !important;
	color: #fff !important;
	box-shadow: 0 6px 20px rgba(229,72,77,0.2) !important;
	transform: translateY(-1px);
}
.btn-outline-secondary {
	color: var(--fr-text-secondary) !important;
	border-color: var(--fr-border) !important;
	background: var(--fr-bg) !important;
}
.btn-outline-secondary:hover {
	background-color: var(--fr-bg-muted) !important;
	color: var(--fr-text) !important;
	border-color: var(--fr-border) !important;
}
.rounded-pill {
	border-radius: var(--fr-radius-full) !important;
}
.btn-link {
	color: var(--fr-accent) !important;
	text-decoration: none !important;
	font-weight: 600 !important;
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
}
.btn-link:hover {
	color: var(--fr-accent-hover) !important;
	transform: none;
}
/* Ghost button for dark backgrounds */
.btn-ghost-light {
	color: rgba(255,255,255,0.7) !important;
	border-color: rgba(255,255,255,0.2) !important;
	background: transparent !important;
}
.btn-ghost-light:hover {
	color: #fff !important;
	border-color: rgba(255,255,255,0.4) !important;
	background: rgba(255,255,255,0.06) !important;
	transform: translateY(-1px);
}


/* =============================================
   4. CARDS
   ============================================= */
.card {
	border: 1px solid var(--fr-border) !important;
	border-radius: var(--fr-radius-lg) !important;
	box-shadow: var(--fr-shadow-xs) !important;
	background: var(--fr-bg-elevated) !important;
	transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease !important;
	overflow: hidden;
}
.card:hover {
	box-shadow: var(--fr-shadow-md) !important;
}
.card-body {
	padding: 1.75rem !important;
}
.card-header {
	background: transparent !important;
	border-bottom: 1px solid var(--fr-border) !important;
	padding: 1.25rem 1.75rem !important;
}
.card-footer {
	background: transparent !important;
	border-top: 1px solid var(--fr-border) !important;
	padding: 1.25rem 1.75rem !important;
}


/* =============================================
   5. BADGES & PILLS
   ============================================= */
.badge {
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	letter-spacing: 0;
	border-radius: var(--fr-radius-full) !important;
	font-size: 0.75rem !important;
}
.bg-primary {
	background-color: var(--fr-accent) !important;
}
.text-primary {
	color: var(--fr-accent) !important;
}
.bg-body-secondary,
.bg-body-emphasis {
	background-color: var(--fr-bg-subtle) !important;
}
.text-body-secondary {
	color: var(--fr-text-secondary) !important;
}
.text-body-tertiary {
	color: var(--fr-text-muted) !important;
}


/* =============================================
   6. SECTIONS & LAYOUT
   ============================================= */
.fr-hero {
	padding: 6rem 0 5rem;
	padding-top: calc(6rem + 65px);
	margin-top: -65px;
	position: relative;
	overflow: hidden;
	background: var(--fr-bg) !important;
}
.fr-section {
	padding: 6rem 0;
	background: var(--fr-bg) !important;
}
.fr-section-sm {
	padding: 3rem 0;
}
.fr-section-lg {
	padding: 8rem 0;
}
section.bg-body-emphasis,
.fr-section.bg-body-emphasis,
.fr-hero.bg-body-emphasis {
	background: var(--fr-bg-subtle) !important;
}
.container-small {
	max-width: 1120px !important;
}


/* =============================================
   6B. FORM ALERTS — inline error / success banners
   ============================================= */
.fr-form-error,
.fr-form-success {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.6875rem 0.875rem;
	border-radius: var(--fr-radius);
	font-size: 0.8125rem;
	line-height: 1.5;
	font-weight: 500;
	margin-top: 0.75rem;
	margin-bottom: 0.5rem;
}
.fr-form-error {
	background: rgba(220, 38, 38, 0.07);
	border: 1px solid rgba(220, 38, 38, 0.22);
	color: var(--fr-critical);
}
.fr-form-success {
	background: rgba(22, 163, 74, 0.07);
	border: 1px solid rgba(22, 163, 74, 0.22);
	color: var(--fr-low);
}
.fr-form-error i,
.fr-form-success i {
	flex-shrink: 0;
	margin-top: 0.125rem;
}
.fr-form-error.d-none,
.fr-form-success.d-none {
	display: none !important;
}
[data-bs-theme="dark"] .fr-form-error {
	background: rgba(220, 38, 38, 0.1);
	border-color: rgba(220, 38, 38, 0.28);
}
[data-bs-theme="dark"] .fr-form-success {
	background: rgba(22, 163, 74, 0.1);
	border-color: rgba(22, 163, 74, 0.28);
}


/* =============================================
   7. SEVERITY SYSTEM
   ============================================= */
.fr-severity {
	display: inline-flex;
	align-items: center;
	padding: 0.1875rem 0.625rem;
	border-radius: var(--fr-radius-full);
	font-family: 'Inter', sans-serif;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
.fr-severity-critical {
	background-color: var(--fr-critical);
	color: #fff;
}
.fr-severity-high {
	background-color: var(--fr-high);
	color: #fff;
}
.fr-severity-medium {
	background-color: var(--fr-medium);
	color: #fff;
}
.fr-severity-low {
	background-color: var(--fr-low);
	color: #fff;
}


/* =============================================
   8. ISSUE CARDS
   ============================================= */
.fr-issue-card {
	border-radius: var(--fr-radius) !important;
	border: 1px solid var(--fr-border) !important;
	transition: box-shadow 0.2s ease;
	overflow: hidden;
	background: var(--fr-bg-elevated);
}
.fr-issue-card:hover {
	box-shadow: var(--fr-shadow) !important;
}
.fr-issue-card .card-body {
	padding: 1rem 1.25rem;
}
.fr-issue-card-critical { border-left: 3px solid var(--fr-critical) !important; }
.fr-issue-card-high { border-left: 3px solid var(--fr-high) !important; }
.fr-issue-card-medium { border-left: 3px solid var(--fr-medium) !important; }
.fr-issue-card-low { border-left: 3px solid var(--fr-low) !important; }


/* =============================================
   9. STEP INDICATORS
   ============================================= */
.fr-step-number {
	width: 3.25rem;
	height: 3.25rem;
	border-radius: var(--fr-radius);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Inter', sans-serif;
	font-size: 1.25rem;
	font-weight: 800;
	flex-shrink: 0;
	background: var(--fr-accent);
	color: #fff;
}


/* =============================================
   10. ICON BOXES
   ============================================= */
.fr-icon-box {
	width: 3rem;
	height: 3rem;
	border-radius: var(--fr-radius);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: var(--fr-accent-subtle);
	color: var(--fr-accent);
	font-size: 1.125rem;
}
.fr-icon-box-lg {
	width: 3.5rem;
	height: 3.5rem;
	font-size: 1.25rem;
	border-radius: var(--fr-radius-lg);
}


/* =============================================
   11. SAMPLE/PREVIEW CARD — Premium product preview
   ============================================= */
.fr-preview-card {
	border-radius: var(--fr-radius-xl);
	border: 1px solid var(--fr-border);
	background: var(--fr-bg-elevated);
	overflow: hidden;
	box-shadow: var(--fr-shadow-lg);
	position: relative;
}
.fr-preview-card::before {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: var(--fr-radius-xl);
	padding: 1px;
	background: linear-gradient(135deg, rgba(229,72,77,0.2), transparent 50%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
}
.fr-preview-header {
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--fr-border);
	background: var(--fr-bg-subtle);
}
.fr-preview-body {
	padding: 1.25rem 1.5rem;
}
/* Risk score ring */
.fr-risk-score {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1.125rem;
	border: 3px solid var(--fr-high);
	color: var(--fr-high);
	background: var(--fr-high-bg);
	flex-shrink: 0;
}


/* =============================================
   12. NEGOTIATE/TIP BLOCKS
   ============================================= */
.fr-negotiate {
	border-left: 2px solid var(--fr-accent);
	padding: 0.625rem 0.875rem;
	margin-top: 0.75rem;
	background: var(--fr-accent-subtle);
	border-radius: 0 var(--fr-radius-sm) var(--fr-radius-sm) 0;
}


/* =============================================
   13. TRUST STRIP
   ============================================= */
.fr-trust-strip {
	border-top: 1px solid var(--fr-border) !important;
	border-bottom: 1px solid var(--fr-border) !important;
	background: var(--fr-bg) !important;
}


/* =============================================
   14. PRICING CARDS
   ============================================= */
.fr-pricing-card {
	border-radius: var(--fr-radius-lg) !important;
	border: 1px solid var(--fr-border) !important;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	position: relative;
	overflow: visible !important;
	background: var(--fr-bg-elevated) !important;
}
.fr-pricing-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--fr-shadow-lg) !important;
}
.fr-pricing-popular {
	border: 2px solid var(--fr-accent) !important;
	box-shadow: var(--fr-shadow-md) !important;
}


/* =============================================
   15. DROPZONE
   ============================================= */
.fr-dropzone {
	border: 2px dashed var(--fr-border);
	border-radius: var(--fr-radius-lg);
	padding: 3rem 2rem;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
	background: var(--fr-bg-subtle);
}
.fr-dropzone:hover,
.fr-dropzone.dragover {
	border-color: var(--fr-accent);
	background-color: var(--fr-accent-subtle);
}


/* =============================================
   16. RISK BANNER
   ============================================= */
.fr-risk-banner {
	border-radius: var(--fr-radius-lg) !important;
	padding: 2rem;
	position: relative;
	overflow: hidden;
	background: var(--fr-bg-subtle) !important;
	border: 1px solid var(--fr-border) !important;
}


/* =============================================
   17. DISCLAIMER
   ============================================= */
.fr-disclaimer {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--fr-text-muted);
}


/* =============================================
   18. PULSE ANIMATION
   ============================================= */
.fr-pulse {
	animation: fr-pulse-anim 2s ease-in-out infinite;
}
@keyframes fr-pulse-anim {
	0%, 100% { opacity: 0.4; }
	50% { opacity: 1; }
}


/* =============================================
   19. TABLES
   ============================================= */
.table {
	--bs-table-bg: transparent;
	border-color: var(--fr-border) !important;
}
.table thead th {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--fr-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 2px solid var(--fr-border);
	padding: 0.875rem 1rem;
}
.table td {
	padding: 0.875rem 1rem;
	color: var(--fr-text-secondary);
	border-color: var(--fr-border);
	font-size: 0.875rem;
}
.fr-compare-table th,
.fr-compare-table td {
	vertical-align: middle;
	padding: 1rem;
}


/* =============================================
   20. ACCORDION — FAQ
   ============================================= */
.accordion {
	border: none !important;
}
.accordion-item {
	border: 1px solid var(--fr-border) !important;
	border-radius: var(--fr-radius) !important;
	margin-bottom: 0.5rem;
	overflow: hidden;
	background: var(--fr-bg-elevated) !important;
}
.accordion-button {
	font-family: 'Inter', sans-serif !important;
	font-weight: 600 !important;
	font-size: 0.9375rem !important;
	color: var(--fr-text) !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 1.125rem 1.25rem !important;
	width: 100% !important;
	position: relative !important;
	padding-right: 3rem !important;
}
.accordion-button::after {
	position: absolute !important;
	right: 1.25rem !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	flex-shrink: 0 !important;
}
.accordion-button:not(.collapsed)::after {
	transform: translateY(-50%) rotate(-180deg) !important;
}
.accordion-button:not(.collapsed) {
	color: var(--fr-accent) !important;
	background: transparent !important;
}
.accordion-body {
	padding: 0 1.25rem 1.125rem !important;
	color: var(--fr-text-secondary);
	font-size: 0.875rem;
	line-height: 1.7;
}


/* =============================================
   21. FORMS
   ============================================= */
.form-control {
	border: 1px solid var(--fr-border) !important;
	border-radius: var(--fr-radius-sm) !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 0.875rem !important;
	padding: 0.625rem 0.875rem !important;
	color: var(--fr-text) !important;
	background: var(--fr-bg) !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus {
	border-color: var(--fr-accent) !important;
	box-shadow: 0 0 0 3px var(--fr-accent-glow) !important;
	outline: none;
}
.form-control::placeholder {
	color: var(--fr-text-muted) !important;
}
.form-label {
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--fr-text);
	margin-bottom: 0.375rem;
}
.form-check-input:checked {
	background-color: var(--fr-accent) !important;
	border-color: var(--fr-accent) !important;
}
.form-switch .form-check-input {
	border-radius: var(--fr-radius-full) !important;
}
.was-validated .form-control:valid,
.form-control.is-valid {
	background-image: none !important;
}
.was-validated .form-control:invalid,
.form-control.is-invalid {
	background-image: none !important;
}
.input-group-pw > .form-control {
	border-right: none !important;
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.input-group-pw .input-group-text {
	background: var(--fr-bg) !important;
	border-top: 1px solid var(--fr-border) !important;
	border-right: 1px solid var(--fr-border) !important;
	border-bottom: 1px solid var(--fr-border) !important;
	border-left: none !important;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-top-right-radius: var(--fr-radius-sm) !important;
	border-bottom-right-radius: var(--fr-radius-sm) !important;
	color: var(--fr-text-muted);
}


/* =============================================
   22. FOOTER
   ============================================= */
footer a:hover {
	color: var(--fr-text) !important;
}


/* =============================================
   23. BREADCRUMBS
   ============================================= */
.breadcrumb {
	font-size: 0.8125rem;
}
.breadcrumb-item a {
	color: var(--fr-text-muted);
	text-decoration: none;
}
.breadcrumb-item a:hover {
	color: var(--fr-accent);
}
.breadcrumb-item.active {
	color: var(--fr-text-secondary);
}
.breadcrumb-item+.breadcrumb-item::before {
	font-family: "Font Awesome 6 Pro";
	content: '\f101';
	color: var(--fr-text-muted);
}


/* =============================================
   24. ALERTS
   ============================================= */
.alert {
	border-radius: var(--fr-radius) !important;
	font-size: 0.875rem;
	border: 1px solid !important;
}
.alert-warning {
	background: var(--fr-medium-bg) !important;
	border-color: rgba(202,138,4,0.25) !important;
	color: var(--fr-medium) !important;
}


/* =============================================
   25. DARK SECTIONS
   ============================================= */
.fr-dark-section {
	background: #0b0b0e !important;
	color: #fff !important;
}
[data-bs-theme="dark"] .fr-dark-section {
	background: var(--fr-bg-muted) !important;
}


/* =============================================
   26. SPINNER
   ============================================= */
.spinner-border.text-primary {
	color: var(--fr-accent) !important;
}


/* =============================================
   27. STARS / TESTIMONIALS
   ============================================= */
.fa-star.text-warning {
	color: #f59e0b !important;
}
.fa-star.text-primary {
	color: #f59e0b !important;
}


/* =============================================
   28. THEME OVERRIDES — Remove legacy visual elements
   ============================================= */
.bg-holder {
	display: none !important;
}
.container-small.hero-header-container {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
svg path.fill-body-bg,
svg path.fill-emphasis-bg {
	display: none;
}
.pt-8, .pt-15 { padding-top: 3rem !important; }
.pb-8 { padding-bottom: 3rem !important; }
.border-start-lg {
	border-left: none !important;
}
.border-dashed {
	border-style: solid !important;
}
[data-navbar-shadow-on-scroll].navbar-shadow {
	box-shadow: none !important;
	border-bottom: 1px solid var(--fr-border);
}


/* =============================================
   29. PRICING LEGACY COMPAT
   ============================================= */
.pricing-card {
	width: auto;
	min-width: auto;
	max-width: 100%;
}
.badge-pricing {
	margin: 0 -2px;
	top: -34px;
}
.pricing-list {
	padding-left: 1.25rem;
}
.form-switch.form-switch-lg .form-check-input {
	width: 3rem;
	height: 1.5rem;
	margin-right: 10px;
}
.form-switch.form-switch-lg .form-check-input:checked {
	background-position: right center;
}
.form-switch.form-switch-lg .form-check-label {
	font-size: 0.9375rem;
	margin-top: 4px;
	font-weight: 500;
}


/* =============================================
   30. OLD COMPAT
   ============================================= */
.ts-homeicons {
	font-size: 28px;
	width: 28px;
	height: 28px;
	display: inline-block;
	text-align: center;
}
.ts-flagicon {
	font-size: 40px;
	width: 40px;
	height: 40px;
	display: inline-block;
	text-align: center;
}
.text-themeblack {
	color: var(--fr-text) !important;
}
.i-icon-position {
	position: absolute;
	top: 16px;
	right: 10px;
	z-index: 10;
}
.radgrad {
	background: radial-gradient(116.18% 118% at 50% 100%, rgba(229,72,77,0.06) 0%, rgba(229,72,77,0.03) 42%, transparent 83%);
}
.form-icon-container .form-icon {
	top: 11px !important;
	left: 11px !important;
}
.password-toggle-btn .password-toggle-indicator::before {
	font-family: "Font Awesome 6 Pro";
	content: '\f06e';
}


/* =============================================
   31. STICKY CTA (MOBILE)
   ============================================= */
.fr-sticky-cta {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1030;
	padding: 0.75rem 1rem;
	background: var(--fr-bg);
	border-top: 1px solid var(--fr-border);
	box-shadow: var(--fr-shadow-md);
}


/* =============================================
   32. LIST GROUP
   ============================================= */
.list-group-item {
	border-color: var(--fr-border) !important;
	background: transparent !important;
	font-size: 0.875rem;
}


/* =============================================
   33. BG OPACITY UTILITIES
   ============================================= */
.bg-primary.bg-opacity-10 {
	background-color: var(--fr-accent-subtle) !important;
}
section.bg-primary.bg-opacity-10 {
	background: linear-gradient(180deg, var(--fr-accent-subtle) 0%, var(--fr-bg) 100%) !important;
}


/* =============================================
   34. HOMEPAGE-SPECIFIC SECTIONS
   ============================================= */

/* Hero gradient — warm mesh with depth */
.fr-hero-gradient {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 80% 50% at 20% -20%, rgba(229,72,77,0.07), transparent 60%),
		radial-gradient(ellipse 60% 70% at 75% 10%, rgba(229,72,77,0.09), transparent 55%),
		radial-gradient(ellipse 50% 40% at 50% 80%, rgba(251,191,146,0.06), transparent 60%),
		linear-gradient(180deg, rgba(229,72,77,0.03) 0%, transparent 40%);
	pointer-events: none;
}
[data-bs-theme="dark"] .fr-hero-gradient {
	background:
		radial-gradient(ellipse 70% 50% at 20% -10%, rgba(229,72,77,0.12), transparent 60%),
		radial-gradient(ellipse 50% 60% at 75% 15%, rgba(229,72,77,0.15), transparent 50%),
		radial-gradient(ellipse 40% 30% at 50% 90%, rgba(251,146,60,0.04), transparent 60%);
}

/* Audience cards with hover reveal */
.fr-audience-card {
	border: 1px solid var(--fr-border);
	border-radius: var(--fr-radius-lg);
	padding: 2rem;
	background: var(--fr-bg-elevated);
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.fr-audience-card:hover {
	border-color: var(--fr-accent);
	box-shadow: var(--fr-shadow-md);
	transform: translateY(-4px);
}

/* Risk category item */
.fr-risk-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--fr-border-subtle);
}
.fr-risk-item:last-child {
	border-bottom: none;
}

/* Trust badge row */
.fr-trust-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--fr-text-muted);
}
.fr-trust-badge i {
	color: var(--fr-accent);
	font-size: 0.875rem;
}

/* CTA section */
.fr-cta-dark {
	background: var(--fr-bg-subtle) !important;
	position: relative;
	overflow: hidden;
}
.fr-cta-dark::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(229,72,77,0.1), transparent);
	pointer-events: none;
}

/* How-it-works connector line */
.fr-steps-connector {
	position: relative;
}
.fr-steps-connector::after {
	content: '';
	position: absolute;
	top: 1.625rem;
	left: calc(50% + 3rem);
	right: calc(50% - 3rem + 100% / 3);
	height: 2px;
	background: var(--fr-border);
}


/* =============================================
   35. RESPONSIVE
   ============================================= */
@media (max-width: 991.98px) {
	.fr-hero { padding: 4rem 0 3rem; }
	.fr-section { padding: 4.5rem 0; }
}
@media (max-width: 767.98px) {
	h1, .h1 { font-size: 2rem; }
	h2, .h2 { font-size: 1.75rem; }
	.fr-hero { padding: 3rem 0 2.5rem; }
	.fr-section { padding: 3.5rem 0; }
	.card-body { padding: 1.25rem !important; }
	.container-small { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}
@media (max-width: 575.98px) {
	.btn-lg { padding: 0.625rem 1.5rem !important; font-size: 0.875rem !important; }
}


/* =============================================
   36. CATEGORY PILLS
   ============================================= */
.fr-category-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	border-radius: var(--fr-radius-sm);
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	font-weight: 500;
	border: 1px solid var(--fr-border);
	text-decoration: none;
	color: var(--fr-text-secondary);
	transition: all 0.15s ease;
	background: var(--fr-bg);
}
.fr-category-pill:hover {
	border-color: var(--fr-accent);
	color: var(--fr-accent);
	background: var(--fr-accent-subtle);
}


/* =============================================
   37. FORM SWITCH on/off labels
   ============================================= */
.form-switch-onoff .label-off {
	display: inline;
}
.form-switch-onoff .label-on {
	display: none;
}
.form-switch-onoff .form-check-input:checked ~ .label-off {
	display: none;
}
.form-switch-onoff .form-check-input:checked ~ .label-on {
	display: inline !important;
}


/* =============================================
   38. HERO
   ============================================= */
.fr-hero-dark {
	background: var(--fr-bg);
	padding: 5rem 0 4rem;
	padding-top: calc(5rem + 65px);
	margin-top: -65px;
	position: relative;
	overflow: hidden;
}
.fr-hero-dark::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 55% 65% at 78% 48%, rgba(229,72,77,0.08), transparent 60%),
		radial-gradient(ellipse 35% 45% at 5% 92%, rgba(229,72,77,0.04), transparent 60%),
		radial-gradient(ellipse 25% 30% at 55% 5%, rgba(229,72,77,0.03), transparent 55%);
	pointer-events: none;
}
.fr-hero-headline {
	font-size: clamp(3rem, 5.5vw, 4.75rem);
	font-weight: 900;
	letter-spacing: -0.055em;
	line-height: 1.05;
	color: var(--fr-text);
	margin: 0;
}
.fr-hero-lead {
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--fr-text-secondary);
	max-width: 480px;
}
.fr-hero-trust {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--fr-text-muted);
}
.fr-hero-trust i {
	color: var(--fr-accent);
	font-size: 0.875rem;
}


/* =============================================
   39. APP WINDOW — Hero product preview
   ============================================= */
.fr-app-window {
	border-radius: 14px;
	overflow: hidden;
	background: var(--fr-bg-elevated);
	box-shadow: 0 24px 60px -12px rgba(0,0,0,0.12), 0 0 0 1px var(--fr-border);
	transform: perspective(1400px) rotateY(-4deg) rotateX(1.5deg);
	transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.fr-app-window:hover {
	transform: perspective(1400px) rotateY(0deg) rotateX(0deg);
	box-shadow: 0 32px 80px -16px rgba(0,0,0,0.16), 0 0 0 1px var(--fr-border);
}
[data-bs-theme="dark"] .fr-app-window {
	box-shadow: 0 40px 90px -20px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.07);
}
[data-bs-theme="dark"] .fr-app-window:hover {
	box-shadow: 0 50px 100px -20px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.1);
}
.fr-app-window-chrome {
	padding: 12px 16px;
	background: var(--fr-bg-subtle);
	border-bottom: 1px solid var(--fr-border);
	display: flex;
	align-items: center;
	gap: 7px;
}
.fr-app-window-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}
.fr-app-window-body {
	padding: 1.5rem;
}
.fr-app-issue {
	background: var(--fr-bg-subtle);
	border: 1px solid var(--fr-border);
	border-left: 3px solid;
	border-radius: 8px;
	padding: 0.875rem 1rem;
}
.fr-app-issue-critical { border-left-color: #dc2626 !important; }
.fr-app-issue-high    { border-left-color: #ea580c !important; }
.fr-app-issue-medium  { border-left-color: #ca8a04 !important; }


/* =============================================
   40. PROOF BAND
   ============================================= */
.fr-proof-band {
	border-top: 1px solid var(--fr-border);
	border-bottom: 1px solid var(--fr-border);
	padding: 1.125rem 0;
	background: var(--fr-bg-subtle);
}
.fr-proof-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--fr-text-muted);
	white-space: nowrap;
}
.fr-proof-item i {
	color: var(--fr-accent);
}
.fr-proof-item strong {
	color: var(--fr-text) !important;
}
.fr-proof-divider {
	width: 1px;
	height: 1.125rem;
	background: var(--fr-border);
	flex-shrink: 0;
}


/* =============================================
   41. RISK LIST (editorial, not grid)
   ============================================= */
.fr-risk-list-item {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	padding: 0.875rem 0;
	border-bottom: 1px solid var(--fr-border-subtle);
}
.fr-risk-list-item:last-child {
	border-bottom: none;
}


/* Risk right column divider (desktop only) */
@media (min-width: 576px) {
	.fr-risk-col-right { border-left: 1px solid var(--fr-border-subtle); }
}

/* =============================================
   42. PRODUCT SHOWCASE SECTION
   ============================================= */
.fr-showcase-section {
	background: var(--fr-bg-subtle);
	padding: 6rem 0;
	position: relative;
	overflow: hidden;
}
.fr-showcase-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 640px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(229,72,77,0.3), transparent);
}
.fr-label-dark {
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--fr-accent);
	margin-bottom: 0.5rem;
}
.fr-showcase-window {
	background: var(--fr-bg);
	border: 1px solid var(--fr-border);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--fr-shadow-xl);
}
.fr-showcase-issue {
	background: var(--fr-bg-subtle);
	border: 1px solid var(--fr-border);
	border-left: 3px solid;
	border-radius: 8px;
	padding: 1.125rem 1.25rem;
}


/* =============================================
   43. WHO IT'S FOR — editorial grid
   ============================================= */
.fr-who-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.fr-who-item {
	display: flex;
	flex-direction: column;
	padding: 2rem;
	border: 1px solid var(--fr-border);
	border-radius: var(--fr-radius-xl);
	background: var(--fr-bg-elevated);
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.fr-who-item:hover {
	border-color: var(--fr-accent);
	box-shadow: var(--fr-shadow-md);
	transform: translateY(-3px);
}
@media (min-width: 768px) and (max-width: 991.98px) {
	.fr-who-grid { grid-template-columns: repeat(2, 1fr); }
	.fr-who-item:last-child { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
	.fr-who-grid { grid-template-columns: 1fr; }
}


/* =============================================
   44. STATS
   ============================================= */
.fr-stat-number {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--fr-text);
}
.fr-stat-label {
	font-size: 0.8125rem;
	color: var(--fr-text-muted);
	margin-top: 0.25rem;
	margin-bottom: 0;
}


/* =============================================
   45. STEP NUMBERS (v2 style)
   ============================================= */
.fr-step-num {
	width: 3rem;
	height: 3rem;
	border-radius: var(--fr-radius);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9375rem;
	font-weight: 800;
	color: var(--fr-accent);
	border: 1.5px solid rgba(229,72,77,0.35);
	background: var(--fr-accent-subtle);
	letter-spacing: -0.02em;
}


/* =============================================
   46. FINAL CTA (v2)
   ============================================= */
.fr-cta-glow {
	position: absolute;
	width: 700px;
	height: 280px;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(229,72,77,0.14), transparent 70%);
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.fr-cta-headline {
	font-size: clamp(2.25rem, 4.5vw, 3.75rem);
	font-weight: 900;
	letter-spacing: -0.045em;
	line-height: 1.08;
	color: var(--fr-text);
}


/* =============================================
   47. DARK HERO RESPONSIVE
   ============================================= */
@media (max-width: 991.98px) {
	.fr-hero-dark { padding: 3.5rem 0 2.5rem; padding-top: calc(3.5rem + 65px); }
	.fr-showcase-section { padding: 4rem 0; }
}
@media (max-width: 767.98px) {
	.fr-hero-dark { padding: 2.5rem 0 2rem; padding-top: calc(2.5rem + 65px); }
	.fr-hero-headline { font-size: clamp(2.25rem, 10vw, 3rem); }
}
@media (max-width: 575.98px) {
	.fr-risk-col-right { border-left: none !important; }
	.fr-proof-band .fr-proof-item { font-size: 0.8125rem; }
}


/* =============================================
   48. APP LAYOUT — Sidebar + Topbar Overrides
   ============================================= */

/* Root layout — flex row so sidebar + content sit side by side */
.main {
	display: flex !important;
	align-items: stretch !important;
	min-height: 100dvh !important;
}

/* Sidebar */
.fr-sidebar {
	flex-shrink: 0;
	width: 15.875rem;
	background: var(--fr-bg-elevated);
	border-right: 1px solid var(--fr-border);
	position: sticky;
	top: 0;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.fr-sidebar-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
}

/* Logo area */
.fr-sidebar-logo {
	height: 56px;
	padding: 0 1rem;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--fr-border);
	flex-shrink: 0;
}
.fr-sidebar-brand {
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--fr-text);
}

/* Nav list */
.fr-sidebar-nav {
	list-style: none;
	padding: 0.625rem 0;
	margin: 0;
	flex: 1;
}
.fr-sidebar-item {
	padding: 0 0.625rem;
	margin: 0;
}
.fr-sidebar-link {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--fr-text-secondary);
	font-size: 0.84375rem;
	font-weight: 500;
	border-radius: var(--fr-radius-sm);
	padding: 0.5625rem 0.75rem;
	margin-bottom: 1px;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}
.fr-sidebar-link:hover {
	background: var(--fr-bg-muted);
	color: var(--fr-text);
}
.fr-sidebar-link.active {
	background: var(--fr-accent-subtle);
	color: var(--fr-accent);
	font-weight: 600;
}
.fr-sidebar-icon {
	width: 1rem;
	font-size: 0.875rem;
	flex-shrink: 0;
	opacity: 0.65;
}
.fr-sidebar-link.active .fr-sidebar-icon { opacity: 1; }

/* Group divider */
.fr-sidebar-divider {
	height: 1px;
	background: var(--fr-border);
	margin: 0.5rem 1.25rem;
	border: none;
}

/* Footer */
.fr-sidebar-footer {
	border-top: 1px solid var(--fr-border);
	padding: 0.875rem 1.25rem;
	flex-shrink: 0;
}
.fr-sidebar-footer a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	padding: 0.4375rem 0.5rem;
	border-radius: var(--fr-radius-sm);
	color: var(--fr-text-muted);
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}
.fr-sidebar-footer a:hover {
	color: var(--fr-text);
	background: var(--fr-bg-muted);
}

/* Mobile: sidebar slides in as overlay */
@media (max-width: 1199.98px) {
	.main {
		display: block !important;
	}
	.fr-sidebar {
		position: fixed;
		left: -15.875rem;
		top: 0;
		height: 100dvh;
		z-index: 200;
		transition: left 0.25s ease;
		box-shadow: none;
	}
	.fr-sidebar--open {
		left: 0;
		box-shadow: 4px 0 24px rgba(0,0,0,0.12);
	}
}

/* Topbar — fully custom, no Phoenix dependency */
.fr-topbar {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
	padding: 0 1.75rem;
	background: var(--fr-bg-elevated);
	border-bottom: 1px solid var(--fr-border);
	position: sticky;
	top: 0;
	z-index: 100;
}
.fr-topbar-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--fr-radius-sm);
	color: var(--fr-text-muted);
	font-size: 1rem;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	margin-right: 0.5rem;
}
.fr-topbar-toggle:hover {
	background: var(--fr-bg-muted);
	color: var(--fr-text);
}
/* Page title in topbar */
.fr-topbar-title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--fr-text);
	letter-spacing: -0.01em;
}
/* User avatar */
.fr-topbar .avatar {
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	overflow: hidden;
	flex-shrink: 0;
}
.fr-topbar .avatar img {
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	object-fit: cover;
	display: block;
}
.fr-topbar .nav-link {
	display: inline-flex !important;
	align-items: center !important;
}
.fr-topbar .avatar-lg {
	width: 48px;
	height: 48px;
}
.fr-topbar .avatar-lg img {
	width: 48px;
	height: 48px;
}
/* User profile dropdown */
.fr-topbar .dropdown-profile {
	min-width: 220px;
	border-radius: var(--fr-radius-lg) !important;
	border: 1px solid var(--fr-border) !important;
	box-shadow: var(--fr-shadow-lg) !important;
	padding: 0 !important;
	background: var(--fr-bg-elevated) !important;
	overflow: hidden;
}
.fr-topbar .dropdown-profile .card {
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}
.fr-topbar .dropdown-profile .card-body {
	padding: 1.25rem !important;
	background: var(--fr-bg-muted) !important;
	border-bottom: 1px solid var(--fr-border) !important;
}
.fr-topbar .dropdown-profile .card-body h6 {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--fr-text);
}
.fr-topbar .dropdown-profile .card-body p {
	font-size: 0.75rem;
	color: var(--fr-text-muted);
	margin: 0;
}
.fr-topbar .dropdown-profile .nav-link {
	font-size: 0.875rem;
	font-weight: 500;
	padding: 0.5rem 1rem;
	color: var(--fr-text-secondary);
	border-radius: 0;
	display: flex;
	align-items: center;
	gap: 0.625rem;
}
.fr-topbar .dropdown-profile .nav-link:hover {
	background: var(--fr-bg-muted);
	color: var(--fr-text);
}
.fr-topbar .dropdown-profile .card-footer {
	background: transparent !important;
	border-top: 1px solid var(--fr-border) !important;
	padding: 0.75rem 1rem;
}

/* Theme toggle */
.theme-control-toggle-label {
	width: 32px !important;
	height: 32px !important;
	border-radius: var(--fr-radius-sm) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--fr-text-muted) !important;
	cursor: pointer;
	transition: color 0.15s, background 0.15s;
}
.theme-control-toggle-label:hover {
	color: var(--fr-text) !important;
	background: var(--fr-bg-muted) !important;
}

/* Content area — flex child, fills remaining width */
.content {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	background: var(--fr-bg-subtle) !important;
	padding: 0 !important;
	/* Override any Phoenix JS-injected margin-left */
	margin-left: 0 !important;
}

/* App footer */
.content .footer,
footer.footer {
	border-top: 1px solid var(--fr-border) !important;
	background: transparent !important;
	padding: 0.75rem 1.75rem !important;
}
.content .footer p,
footer.footer p {
	font-size: 0.8125rem !important;
	color: var(--fr-text-muted) !important;
}
.content .footer a,
footer.footer a {
	color: var(--fr-text-muted) !important;
}
.content .footer a:hover,
footer.footer a:hover {
	color: var(--fr-accent) !important;
}

/* Inner page padding */
.content > .pb-5,
.content > .content {
	padding: 1.75rem 2rem 2rem !important;
}


/* =============================================
   49. AUTH PAGES — Clean centered card
   ============================================= */
.fr-auth-main {
	min-height: 100vh;
	background: var(--fr-bg);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
}
.fr-auth-main::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 70% 60% at 15% -15%, rgba(229,72,77,0.07), transparent 60%),
		radial-gradient(ellipse 55% 55% at 85% 15%, rgba(229,72,77,0.05), transparent 60%),
		radial-gradient(ellipse 40% 35% at 50% 110%, rgba(229,72,77,0.04), transparent 60%);
	pointer-events: none;
}
[data-bs-theme="dark"] .fr-auth-main::before {
	background:
		radial-gradient(ellipse 70% 60% at 15% -15%, rgba(229,72,77,0.13), transparent 60%),
		radial-gradient(ellipse 55% 55% at 85% 15%, rgba(229,72,77,0.10), transparent 60%);
}
.fr-auth-inner {
	width: 100%;
	padding: 3rem 1rem;
	position: relative;
}
.fr-auth-card {
	background: var(--fr-bg-elevated) !important;
	border: 1px solid var(--fr-border) !important;
	border-radius: var(--fr-radius-xl) !important;
	box-shadow: var(--fr-shadow-xl) !important;
	padding: 2.25rem 1.75rem !important;
	width: 100%;
}
@media (min-width: 576px) {
	.fr-auth-card { padding: 2.75rem 2.5rem !important; }
}
.fr-auth-back {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--fr-text-muted);
	text-decoration: none;
	margin-bottom: 2rem;
	transition: color 0.15s;
}
.fr-auth-back:hover { color: var(--fr-text); }
.fr-auth-logo {
	display: block;
	margin-bottom: 0.75rem;
}
.fr-auth-logo img { display: block; margin: 0 auto; }
.fr-auth-wordmark {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--fr-text);
	letter-spacing: -0.01em;
}
.fr-auth-wordmark:hover { color: var(--fr-text); }
.fr-auth-wordmark img { display: block; }
.fr-auth-divider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.25rem 0;
	color: var(--fr-text-muted);
	font-size: 0.8125rem;
	font-weight: 500;
}
.fr-auth-divider::before,
.fr-auth-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--fr-border);
}
.fr-auth-footer {
	text-align: center;
	margin-top: 1.25rem;
	font-size: 0.8125rem;
	color: var(--fr-text-muted);
}
.fr-auth-footer a {
	color: var(--fr-accent);
	font-weight: 600;
	text-decoration: none;
}
.fr-auth-footer a:hover { color: var(--fr-accent-hover); }
.fr-auth-site-footer {
	text-align: center;
	margin-top: 2rem;
	font-size: 0.75rem;
	color: var(--fr-text-muted);
}
.fr-auth-site-footer a {
	color: var(--fr-text-muted);
	text-decoration: none;
}
.fr-auth-site-footer a:hover { color: var(--fr-accent); }