/**
 * Free Resume Builder
 *
 * Global application styles.
 *
 * @package Free_Resume_Builder
 */

/* ==========================================================================
   1. Root Variables
   ========================================================================== */

:root {
	--rm-font-family:
		"Inter",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif;

	--rm-font-mono:
		"SFMono-Regular",
		Consolas,
		"Liberation Mono",
		monospace;

	--rm-color-primary: #1d4ed8;
	--rm-color-primary-hover: #1e40af;
	--rm-color-primary-active: #1e3a8a;
	--rm-color-primary-soft: #eff6ff;

	--rm-color-navy: #0f172a;
	--rm-color-navy-soft: #172554;

	--rm-color-text: #111827;
	--rm-color-text-secondary: #4b5563;
	--rm-color-text-muted: #6b7280;
	--rm-color-text-light: #9ca3af;

	--rm-color-white: #ffffff;
	--rm-color-black: #000000;

	--rm-color-bg: #f5f7fb;
	--rm-color-bg-soft: #f8fafc;
	--rm-color-bg-muted: #f1f5f9;

	--rm-color-border: #e5e7eb;
	--rm-color-border-light: #eef2f7;
	--rm-color-border-dark: #d1d5db;

	--rm-color-success: #15803d;
	--rm-color-success-soft: #f0fdf4;

	--rm-color-danger: #dc2626;
	--rm-color-danger-hover: #b91c1c;
	--rm-color-danger-soft: #fef2f2;

	--rm-color-warning: #b45309;
	--rm-color-warning-soft: #fffbeb;

	--rm-color-info: #0369a1;
	--rm-color-info-soft: #f0f9ff;

	--rm-radius-xs: 4px;
	--rm-radius-sm: 6px;
	--rm-radius-md: 8px;
	--rm-radius-lg: 12px;
	--rm-radius-xl: 16px;
	--rm-radius-2xl: 20px;
	--rm-radius-full: 999px;

	--rm-shadow-xs:
		0 1px 2px rgba(15, 23, 42, 0.04);

	--rm-shadow-sm:
		0 2px 8px rgba(15, 23, 42, 0.06);

	--rm-shadow-md:
		0 8px 24px rgba(15, 23, 42, 0.08);

	--rm-shadow-lg:
		0 16px 40px rgba(15, 23, 42, 0.12);

	--rm-shadow-xl:
		0 24px 60px rgba(15, 23, 42, 0.16);

	--rm-container-width: 1240px;
	--rm-content-width: 860px;

	--rm-header-height: 72px;

	--rm-transition-fast:
		150ms ease;

	--rm-transition:
		220ms ease;

	--rm-transition-slow:
		320ms ease;

	--rm-focus-ring:
		0 0 0 3px rgba(29, 78, 216, 0.18);
}


/* ==========================================================================
   2. Global Scope
   ========================================================================== */

.rm-site-header,
.rm-site-footer,
.rm-main-navigation,
.rm-mobile-navigation,
.rm-modal,
.rm-toast-container,
.rm-loading,
.rm-empty-state,
.rm-app-shell,
.rm-page,
.rm-builder,
.rm-dashboard,
.rm-templates-page,
.rm-auth-page {
	font-family: var(--rm-font-family);
	box-sizing: border-box;
}

.rm-site-header *,
.rm-site-header *::before,
.rm-site-header *::after,
.rm-site-footer *,
.rm-site-footer *::before,
.rm-site-footer *::after,
.rm-main-navigation *,
.rm-main-navigation *::before,
.rm-main-navigation *::after,
.rm-mobile-navigation *,
.rm-mobile-navigation *::before,
.rm-mobile-navigation *::after,
.rm-modal *,
.rm-modal *::before,
.rm-modal *::after,
.rm-toast-container *,
.rm-toast-container *::before,
.rm-toast-container *::after,
.rm-loading *,
.rm-loading *::before,
.rm-loading *::after,
.rm-empty-state *,
.rm-empty-state *::before,
.rm-empty-state *::after,
.rm-app-shell *,
.rm-app-shell *::before,
.rm-app-shell *::after,
.rm-page *,
.rm-page *::before,
.rm-page *::after,
.rm-builder *,
.rm-builder *::before,
.rm-builder *::after,
.rm-dashboard *,
.rm-dashboard *::before,
.rm-dashboard *::after,
.rm-templates-page *,
.rm-templates-page *::before,
.rm-templates-page *::after,
.rm-auth-page *,
.rm-auth-page *::before,
.rm-auth-page *::after {
	box-sizing: border-box;
}


/* ==========================================================================
   3. Global Application Container
   ========================================================================== */

.rm-page,
.rm-app-shell {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	color: var(--rm-color-text);
	background: var(--rm-color-bg);
}

.rm-container {
	width: min(
		calc(100% - 40px),
		var(--rm-container-width)
	);
	max-width: var(--rm-container-width);
	margin-left: auto;
	margin-right: auto;
}

.rm-content-container {
	width: min(
		calc(100% - 40px),
		var(--rm-content-width)
	);
	max-width: var(--rm-content-width);
	margin-left: auto;
	margin-right: auto;
}


/* ==========================================================================
   4. Typography
   ========================================================================== */

.rm-page h1,
.rm-page h2,
.rm-page h3,
.rm-page h4,
.rm-page h5,
.rm-page h6,
.rm-app-shell h1,
.rm-app-shell h2,
.rm-app-shell h3,
.rm-app-shell h4,
.rm-app-shell h5,
.rm-app-shell h6 {
	margin-top: 0;
	color: var(--rm-color-text);
	font-family: var(--rm-font-family);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.rm-page h1 {
	font-size: clamp(2rem, 4vw, 3.5rem);
}

.rm-page h2 {
	font-size: clamp(1.65rem, 3vw, 2.4rem);
}

.rm-page h3 {
	font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.rm-page p,
.rm-app-shell p {
	margin-top: 0;
	color: var(--rm-color-text-secondary);
	font-size: 1rem;
	line-height: 1.7;
}

.rm-page small,
.rm-app-shell small {
	font-size: 0.8125rem;
	line-height: 1.5;
}

.rm-text-muted {
	color: var(--rm-color-text-muted);
}

.rm-text-secondary {
	color: var(--rm-color-text-secondary);
}

.rm-text-primary {
	color: var(--rm-color-primary);
}

.rm-text-success {
	color: var(--rm-color-success);
}

.rm-text-danger {
	color: var(--rm-color-danger);
}


/* ==========================================================================
   5. Links
   ========================================================================== */

.rm-page a,
.rm-app-shell a {
	color: var(--rm-color-primary);
	text-decoration: none;
	transition:
		color var(--rm-transition-fast),
		background-color var(--rm-transition-fast),
		border-color var(--rm-transition-fast);
}

.rm-page a:hover,
.rm-app-shell a:hover {
	color: var(--rm-color-primary-hover);
}

.rm-page a:focus-visible,
.rm-app-shell a:focus-visible,
.rm-site-header a:focus-visible,
.rm-site-footer a:focus-visible,
.rm-modal button:focus-visible,
.rm-toast-container button:focus-visible {
	outline: none;
	box-shadow: var(--rm-focus-ring);
}


/* ==========================================================================
   6. Buttons
   ========================================================================== */

.rm-button,
.rm-page button,
.rm-page input[type="button"],
.rm-page input[type="submit"],
.rm-page input[type="reset"],
.rm-app-shell button,
.rm-app-shell input[type="button"],
.rm-app-shell input[type="submit"],
.rm-app-shell input[type="reset"] {
	font-family: inherit;
}

.rm-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 10px 17px;
	border: 1px solid transparent;
	border-radius: var(--rm-radius-md);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--rm-transition-fast),
		border-color var(--rm-transition-fast),
		color var(--rm-transition-fast),
		box-shadow var(--rm-transition-fast),
		transform var(--rm-transition-fast);
}

.rm-button:hover {
	transform: translateY(-1px);
}

.rm-button:active {
	transform: translateY(0);
}

.rm-button:disabled,
.rm-button[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

.rm-button-primary {
	color: var(--rm-color-white);
	background: var(--rm-color-primary);
	border-color: var(--rm-color-primary);
}

.rm-button-primary:hover {
	color: var(--rm-color-white);
	background: var(--rm-color-primary-hover);
	border-color: var(--rm-color-primary-hover);
	box-shadow: var(--rm-shadow-sm);
}

.rm-button-secondary {
	color: var(--rm-color-text);
	background: var(--rm-color-white);
	border-color: var(--rm-color-border-dark);
}

.rm-button-secondary:hover {
	color: var(--rm-color-text);
	background: var(--rm-color-bg-soft);
	border-color: #bfc6d1;
}

.rm-button-ghost {
	color: var(--rm-color-text-secondary);
	background: transparent;
	border-color: transparent;
}

.rm-button-ghost:hover {
	color: var(--rm-color-text);
	background: var(--rm-color-bg-muted);
}

.rm-button-danger {
	color: var(--rm-color-white);
	background: var(--rm-color-danger);
	border-color: var(--rm-color-danger);
}

.rm-button-danger:hover {
	color: var(--rm-color-white);
	background: var(--rm-color-danger-hover);
	border-color: var(--rm-color-danger-hover);
}

.rm-button-small {
	min-height: 36px;
	padding: 8px 13px;
	font-size: 0.875rem;
}

.rm-button-large {
	min-height: 48px;
	padding: 12px 20px;
	font-size: 1rem;
}


/* ==========================================================================
   7. Cards
   ========================================================================== */

.rm-card {
	background: var(--rm-color-white);
	border: 1px solid var(--rm-color-border-light);
	border-radius: var(--rm-radius-lg);
	box-shadow: var(--rm-shadow-sm);
}

.rm-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
	border-bottom: 1px solid var(--rm-color-border-light);
}

.rm-card-body {
	padding: 22px;
}

.rm-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 22px;
	border-top: 1px solid var(--rm-color-border-light);
}


/* ==========================================================================
   8. Forms
   ========================================================================== */

.rm-form-group {
	margin-bottom: 20px;
}

.rm-form-label {
	display: block;
	margin-bottom: 7px;
	color: var(--rm-color-text);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
}

.rm-form-label-required::after {
	margin-left: 3px;
	color: var(--rm-color-danger);
	content: "*";
}

.rm-form-help {
	display: block;
	margin-top: 6px;
	color: var(--rm-color-text-muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.rm-form-error {
	display: block;
	margin-top: 6px;
	color: var(--rm-color-danger);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.rm-form-control,
.rm-page input[type="text"],
.rm-page input[type="email"],
.rm-page input[type="url"],
.rm-page input[type="tel"],
.rm-page input[type="number"],
.rm-page input[type="password"],
.rm-page input[type="search"],
.rm-page input[type="date"],
.rm-page input[type="month"],
.rm-page input[type="time"],
.rm-page textarea,
.rm-page select,
.rm-app-shell input[type="text"],
.rm-app-shell input[type="email"],
.rm-app-shell input[type="url"],
.rm-app-shell input[type="tel"],
.rm-app-shell input[type="number"],
.rm-app-shell input[type="password"],
.rm-app-shell input[type="search"],
.rm-app-shell input[type="date"],
.rm-app-shell input[type="month"],
.rm-app-shell input[type="time"],
.rm-app-shell textarea,
.rm-app-shell select {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	color: var(--rm-color-text);
	background: var(--rm-color-white);
	border: 1px solid var(--rm-color-border-dark);
	border-radius: var(--rm-radius-md);
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.5;
	box-shadow: none;
	outline: none;
	transition:
		border-color var(--rm-transition-fast),
		box-shadow var(--rm-transition-fast),
		background-color var(--rm-transition-fast);
}

.rm-page textarea,
.rm-app-shell textarea {
	min-height: 110px;
	resize: vertical;
}

.rm-form-control::placeholder,
.rm-page input::placeholder,
.rm-page textarea::placeholder,
.rm-app-shell input::placeholder,
.rm-app-shell textarea::placeholder {
	color: var(--rm-color-text-light);
	opacity: 1;
}

.rm-form-control:hover,
.rm-page input:hover,
.rm-page textarea:hover,
.rm-page select:hover,
.rm-app-shell input:hover,
.rm-app-shell textarea:hover,
.rm-app-shell select:hover {
	border-color: #b8c0cc;
}

.rm-form-control:focus,
.rm-page input:focus,
.rm-page textarea:focus,
.rm-page select:focus,
.rm-app-shell input:focus,
.rm-app-shell textarea:focus,
.rm-app-shell select:focus {
	border-color: var(--rm-color-primary);
	box-shadow: var(--rm-focus-ring);
}

.rm-form-control.is-invalid,
.rm-page input.is-invalid,
.rm-page textarea.is-invalid,
.rm-page select.is-invalid {
	border-color: var(--rm-color-danger);
}

.rm-form-control.is-valid,
.rm-page input.is-valid,
.rm-page textarea.is-valid,
.rm-page select.is-valid {
	border-color: var(--rm-color-success);
}


/* ==========================================================================
   9. Badges
   ========================================================================== */

.rm-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 26px;
	padding: 4px 9px;
	border-radius: var(--rm-radius-full);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.rm-badge-primary {
	color: var(--rm-color-primary);
	background: var(--rm-color-primary-soft);
}

.rm-badge-success {
	color: var(--rm-color-success);
	background: var(--rm-color-success-soft);
}

.rm-badge-warning {
	color: var(--rm-color-warning);
	background: var(--rm-color-warning-soft);
}

.rm-badge-danger {
	color: var(--rm-color-danger);
	background: var(--rm-color-danger-soft);
}

.rm-badge-info {
	color: var(--rm-color-info);
	background: var(--rm-color-info-soft);
}


/* ==========================================================================
   10. Utility Classes
   ========================================================================== */

.rm-flex {
	display: flex;
}

.rm-inline-flex {
	display: inline-flex;
}

.rm-grid {
	display: grid;
}

.rm-items-center {
	align-items: center;
}

.rm-justify-between {
	justify-content: space-between;
}

.rm-justify-center {
	justify-content: center;
}

.rm-gap-1 {
	gap: 4px;
}

.rm-gap-2 {
	gap: 8px;
}

.rm-gap-3 {
	gap: 12px;
}

.rm-gap-4 {
	gap: 16px;
}

.rm-gap-5 {
	gap: 20px;
}

.rm-gap-6 {
	gap: 24px;
}

.rm-w-full {
	width: 100%;
}

.rm-hidden {
	display: none !important;
}

.rm-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}


/* ==========================================================================
   11. Header Base
   ========================================================================== */

.rm-site-header {
	position: relative;
	z-index: 100;
	width: 100%;
	background: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid var(--rm-color-border-light);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.rm-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: min(
		calc(100% - 40px),
		var(--rm-container-width)
	);
	min-height: var(--rm-header-height);
	margin: 0 auto;
}

.rm-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	color: var(--rm-color-navy);
	text-decoration: none;
}

.rm-brand:hover {
	color: var(--rm-color-navy);
}

.rm-brand-mark {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--rm-color-primary);
}

.rm-brand-mark svg {
	display: block;
	width: 100%;
	height: 100%;
}

.rm-brand-copy {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.rm-brand-name {
	overflow: hidden;
	color: var(--rm-color-navy);
	font-size: 0.95rem;
	font-weight: 750;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rm-brand-tagline {
	margin-top: 2px;
	color: var(--rm-color-text-muted);
	font-size: 0.68rem;
	font-weight: 500;
	line-height: 1.2;
}

.rm-header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.rm-header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 9px 15px;
	color: var(--rm-color-white) !important;
	background: var(--rm-color-primary);
	border: 1px solid var(--rm-color-primary);
	border-radius: var(--rm-radius-md);
	font-size: 0.875rem;
	font-weight: 650;
	text-decoration: none;
}

.rm-header-cta:hover {
	color: var(--rm-color-white) !important;
	background: var(--rm-color-primary-hover);
	border-color: var(--rm-color-primary-hover);
}

.rm-login-link,
.rm-header-dashboard {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 40px;
	padding: 8px 10px;
	color: var(--rm-color-text-secondary) !important;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.rm-login-link:hover,
.rm-header-dashboard:hover {
	color: var(--rm-color-text) !important;
}


/* ==========================================================================
   12. Navigation Base
   ========================================================================== */

.rm-main-navigation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.rm-navigation-primary,
.rm-navigation-secondary {
	display: flex;
	align-items: center;
	gap: 4px;
}

.rm-navigation-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 8px 11px;
	color: var(--rm-color-text-secondary) !important;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--rm-radius-md);
	font-size: 0.875rem;
	font-weight: 550;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.rm-navigation-link:hover,
.rm-navigation-link.is-active {
	color: var(--rm-color-primary) !important;
	background: var(--rm-color-primary-soft);
}

.rm-navigation-link-primary {
	color: var(--rm-color-primary) !important;
	font-weight: 650;
}

.rm-navigation-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.rm-navigation-secondary-link {
	padding: 8px 10px;
	color: var(--rm-color-text-secondary) !important;
	font-size: 0.8125rem;
	font-weight: 550;
	text-decoration: none;
}

.rm-navigation-secondary-link:hover {
	color: var(--rm-color-primary) !important;
}

.rm-navigation-register-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 8px 13px;
	color: var(--rm-color-white) !important;
	background: var(--rm-color-primary);
	border: 1px solid var(--rm-color-primary);
	border-radius: var(--rm-radius-md);
	font-size: 0.8125rem;
	font-weight: 650;
	text-decoration: none;
}

.rm-navigation-register-link:hover {
	color: var(--rm-color-white) !important;
	background: var(--rm-color-primary-hover);
}


/* ==========================================================================
   13. Navigation Dropdown
   ========================================================================== */

.rm-navigation-dropdown,
.rm-user-menu {
	position: relative;
}

.rm-navigation-dropdown-toggle {
	appearance: none;
}

.rm-navigation-chevron {
	transition: transform var(--rm-transition-fast);
}

.rm-navigation-dropdown.is-open .rm-navigation-chevron {
	transform: rotate(180deg);
}

.rm-navigation-dropdown-menu {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 200;
	width: 290px;
	padding: 7px;
	background: var(--rm-color-white);
	border: 1px solid var(--rm-color-border);
	border-radius: var(--rm-radius-lg);
	box-shadow: var(--rm-shadow-lg);
}

.rm-navigation-dropdown-item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	width: 100%;
	padding: 11px;
	color: var(--rm-color-text) !important;
	border-radius: var(--rm-radius-md);
	text-decoration: none;
}

.rm-navigation-dropdown-item:hover {
	background: var(--rm-color-bg-soft);
}

.rm-navigation-dropdown-item-icon {
	display: inline-flex;
	flex: 0 0 32px;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--rm-color-primary);
	background: var(--rm-color-primary-soft);
	border-radius: var(--rm-radius-sm);
	font-size: 0.8125rem;
	font-weight: 700;
}

.rm-navigation-dropdown-item strong,
.rm-navigation-dropdown-item small {
	display: block;
}

.rm-navigation-dropdown-item strong {
	margin-bottom: 2px;
	font-size: 0.8125rem;
}

.rm-navigation-dropdown-item small {
	color: var(--rm-color-text-muted);
	font-size: 0.7rem;
	line-height: 1.4;
}


/* ==========================================================================
   14. User Menu
   ========================================================================== */

.rm-user-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 5px 8px 5px 5px;
	color: var(--rm-color-text);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--rm-radius-full);
	font-family: inherit;
	cursor: pointer;
}

.rm-user-trigger:hover,
.rm-user-menu.is-open .rm-user-trigger {
	background: var(--rm-color-bg-muted);
}

.rm-user-avatar {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: var(--rm-color-white);
	background: var(--rm-color-navy);
	border-radius: 50%;
	font-size: 0.75rem;
	font-weight: 700;
}

.rm-user-avatar-large {
	width: 38px;
	height: 38px;
}

.rm-user-name {
	max-width: 120px;
	overflow: hidden;
	font-size: 0.8125rem;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rm-user-chevron {
	color: var(--rm-color-text-muted);
	transition: transform var(--rm-transition-fast);
}

.rm-user-menu.is-open .rm-user-chevron {
	transform: rotate(180deg);
}

.rm-user-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 250;
	width: 270px;
	padding: 8px;
	background: var(--rm-color-white);
	border: 1px solid var(--rm-color-border);
	border-radius: var(--rm-radius-lg);
	box-shadow: var(--rm-shadow-lg);
}

.rm-user-dropdown-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
}

.rm-user-dropdown-header strong,
.rm-user-dropdown-header small {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rm-user-dropdown-header strong {
	color: var(--rm-color-text);
	font-size: 0.8125rem;
}

.rm-user-dropdown-header small {
	margin-top: 2px;
	color: var(--rm-color-text-muted);
	font-size: 0.7rem;
}

.rm-user-dropdown-divider {
	height: 1px;
	margin: 5px 0;
	background: var(--rm-color-border-light);
}

.rm-dropdown-link {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 38px;
	padding: 8px 10px;
	color: var(--rm-color-text-secondary) !important;
	border-radius: var(--rm-radius-sm);
	font-size: 0.8125rem;
	font-weight: 550;
	text-decoration: none;
}

.rm-dropdown-link:hover {
	color: var(--rm-color-text) !important;
	background: var(--rm-color-bg-soft);
}

.rm-dropdown-link-danger {
	color: var(--rm-color-danger) !important;
}

.rm-dropdown-link-danger:hover {
	color: var(--rm-color-danger) !important;
	background: var(--rm-color-danger-soft);
}

.rm-dropdown-icon {
	width: 18px;
	color: currentColor;
	text-align: center;
}


/* ==========================================================================
   15. Mobile Menu
   ========================================================================== */

.rm-mobile-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 4px;
	width: 42px;
	height: 42px;
	padding: 8px;
	color: var(--rm-color-text);
	background: transparent;
	border: 1px solid var(--rm-color-border);
	border-radius: var(--rm-radius-md);
	cursor: pointer;
}

.rm-mobile-menu-toggle span {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition:
		transform var(--rm-transition-fast),
		opacity var(--rm-transition-fast);
}

.rm-mobile-menu-toggle.is-open span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.rm-mobile-menu-toggle.is-open span:nth-child(2) {
	opacity: 0;
}

.rm-mobile-menu-toggle.is-open span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

.rm-mobile-navigation {
	display: none;
	width: 100%;
	background: var(--rm-color-white);
	border-top: 1px solid var(--rm-color-border-light);
}

.rm-mobile-navigation-inner {
	display: flex;
	flex-direction: column;
	gap: 3px;
	width: min(
		calc(100% - 28px),
		var(--rm-container-width)
	);
	margin: 0 auto;
	padding: 12px 0 16px;
}

.rm-mobile-nav-link {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 12px;
	color: var(--rm-color-text-secondary) !important;
	border-radius: var(--rm-radius-md);
	font-size: 0.9375rem;
	font-weight: 550;
	text-decoration: none;
}

.rm-mobile-nav-link:hover {
	color: var(--rm-color-primary) !important;
	background: var(--rm-color-primary-soft);
}

.rm-mobile-nav-danger {
	color: var(--rm-color-danger) !important;
}

.rm-mobile-nav-divider {
	height: 1px;
	margin: 8px 0;
	background: var(--rm-color-border-light);
}

.rm-mobile-create-button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	margin-top: 5px;
	padding: 10px 15px;
	color: var(--rm-color-white) !important;
	background: var(--rm-color-primary);
	border-radius: var(--rm-radius-md);
	font-size: 0.9375rem;
	font-weight: 650;
	text-decoration: none;
}


/* ==========================================================================
   16. Footer Base
   ========================================================================== */

.rm-site-footer {
	color: #dbe4f0;
	background: #0b1220;
}

.rm-footer-main {
	padding: 64px 0 52px;
}

.rm-footer-container {
	display: grid;
	grid-template-columns:
		minmax(250px, 1.6fr)
		repeat(3, minmax(150px, 1fr));
	gap: 48px;
	width: min(
		calc(100% - 40px),
		var(--rm-container-width)
	);
	margin: 0 auto;
}

.rm-footer-brand {
	min-width: 0;
}

.rm-footer-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--rm-color-white) !important;
	text-decoration: none;
}

.rm-footer-logo-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	color: #3b82f6;
}

.rm-footer-logo-mark svg {
	display: block;
	width: 100%;
	height: 100%;
}

.rm-footer-logo-text {
	font-size: 1rem;
	font-weight: 700;
}

.rm-footer-description {
	max-width: 360px;
	margin: 17px 0 20px;
	color: #94a3b8 !important;
	font-size: 0.875rem !important;
	line-height: 1.7 !important;
}

.rm-footer-primary-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 9px 14px;
	color: var(--rm-color-white) !important;
	background: var(--rm-color-primary);
	border: 1px solid var(--rm-color-primary);
	border-radius: var(--rm-radius-md);
	font-size: 0.8125rem;
	font-weight: 650;
	text-decoration: none;
}

.rm-footer-primary-button:hover {
	color: var(--rm-color-white) !important;
	background: var(--rm-color-primary-hover);
}

.rm-footer-heading {
	margin: 2px 0 15px !important;
	color: var(--rm-color-white) !important;
	font-size: 0.875rem !important;
	font-weight: 650 !important;
	letter-spacing: 0;
}

.rm-footer-links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rm-footer-links a {
	color: #94a3b8 !important;
	font-size: 0.8125rem;
	text-decoration: none;
}

.rm-footer-links a:hover {
	color: var(--rm-color-white) !important;
}

.rm-footer-free-badge {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-top: 20px;
	padding: 11px;
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--rm-radius-md);
}

.rm-footer-free-badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 23px;
	height: 23px;
	color: #86efac;
	background: rgba(34, 197, 94, 0.12);
	border-radius: 50%;
	font-size: 0.7rem;
	font-weight: 700;
}

.rm-footer-free-badge strong,
.rm-footer-free-badge small {
	display: block;
}

.rm-footer-free-badge strong {
	color: var(--rm-color-white);
	font-size: 0.75rem;
}

.rm-footer-free-badge small {
	margin-top: 2px;
	color: #64748b;
	font-size: 0.65rem;
}

.rm-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.rm-footer-bottom-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
	width: min(
		calc(100% - 40px),
		var(--rm-container-width)
	);
	min-height: 66px;
	margin: 0 auto;
}

.rm-footer-copyright,
.rm-footer-bottom-links,
.rm-footer-made-with {
	color: #64748b;
	font-size: 0.7rem;
}

.rm-footer-bottom-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
}

.rm-footer-bottom-links a {
	color: #64748b !important;
}

.rm-footer-bottom-links a:hover {
	color: #cbd5e1 !important;
}

.rm-footer-made-with {
	justify-self: end;
}

.rm-footer-heart {
	margin-left: 3px;
	color: #94a3b8;
}


/* ==========================================================================
   17. Modal
   ========================================================================== */

.rm-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 20px;
}

.rm-modal[hidden] {
	display: none;
}

.rm-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.62);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.rm-modal-dialog {
	position: relative;
	z-index: 1;
	width: min(100%, 520px);
	max-height: min(760px, calc(100vh - 40px));
	overflow: auto;
	background: var(--rm-color-white);
	border: 1px solid var(--rm-color-border);
	border-radius: var(--rm-radius-xl);
	box-shadow: var(--rm-shadow-xl);
}

.rm-modal-small .rm-modal-dialog {
	max-width: 400px;
}

.rm-modal-medium .rm-modal-dialog {
	max-width: 520px;
}

.rm-modal-large .rm-modal-dialog {
	max-width: 700px;
}

.rm-modal-wide .rm-modal-dialog {
	max-width: 960px;
}

.rm-modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 24px;
	border-bottom: 1px solid var(--rm-color-border-light);
}

.rm-modal-heading {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}

.rm-modal-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	color: var(--rm-color-primary);
	background: var(--rm-color-primary-soft);
	border-radius: var(--rm-radius-md);
}

.rm-modal-icon-success {
	color: var(--rm-color-success);
	background: var(--rm-color-success-soft);
}

.rm-modal-icon-danger {
	color: var(--rm-color-danger);
	background: var(--rm-color-danger-soft);
}

.rm-modal-icon-warning {
	color: var(--rm-color-warning);
	background: var(--rm-color-warning-soft);
}

.rm-modal-icon-info {
	color: var(--rm-color-info);
	background: var(--rm-color-info-soft);
}

.rm-modal-title {
	margin: 2px 0 0 !important;
	color: var(--rm-color-text) !important;
	font-size: 1.1rem !important;
	line-height: 1.35 !important;
}

.rm-modal-close {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	color: var(--rm-color-text-muted);
	background: transparent;
	border: 0;
	border-radius: var(--rm-radius-md);
	cursor: pointer;
}

.rm-modal-close:hover {
	color: var(--rm-color-text);
	background: var(--rm-color-bg-muted);
}

.rm-modal-body {
	padding: 24px;
}

.rm-modal-message {
	color: var(--rm-color-text-secondary);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.rm-modal-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding: 16px 24px;
	border-top: 1px solid var(--rm-color-border-light);
}

.rm-modal-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 9px 15px;
	border: 1px solid transparent;
	border-radius: var(--rm-radius-md);
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.rm-modal-secondary-action {
	color: var(--rm-color-text);
	background: var(--rm-color-white);
	border-color: var(--rm-color-border-dark);
}

.rm-modal-secondary-action:hover {
	background: var(--rm-color-bg-soft);
}

.rm-modal-primary-action {
	color: var(--rm-color-white);
	background: var(--rm-color-primary);
	border-color: var(--rm-color-primary);
}

.rm-modal-primary-action:hover {
	color: var(--rm-color-white);
	background: var(--rm-color-primary-hover);
}

.rm-modal-danger-action {
	color: var(--rm-color-white);
	background: var(--rm-color-danger);
	border-color: var(--rm-color-danger);
}


/* ==========================================================================
   18. Toast
   ========================================================================== */

.rm-toast-container {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 11000;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	width: min(
		calc(100vw - 44px),
		390px
	);
	pointer-events: none;
}

.rm-toast {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 11px;
	width: 100%;
	padding: 13px 42px 13px 13px;
	overflow: hidden;
	background: var(--rm-color-white);
	border: 1px solid var(--rm-color-border);
	border-radius: var(--rm-radius-lg);
	box-shadow: var(--rm-shadow-lg);
	pointer-events: auto;
}

.rm-toast-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--rm-color-info);
	background: var(--rm-color-info-soft);
	border-radius: 50%;
}

.rm-toast-success .rm-toast-icon {
	color: var(--rm-color-success);
	background: var(--rm-color-success-soft);
}

.rm-toast-error .rm-toast-icon {
	color: var(--rm-color-danger);
	background: var(--rm-color-danger-soft);
}

.rm-toast-warning .rm-toast-icon {
	color: var(--rm-color-warning);
	background: var(--rm-color-warning-soft);
}

.rm-toast-content {
	min-width: 0;
}

.rm-toast-title {
	display: block;
	margin-bottom: 2px;
	color: var(--rm-color-text);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.rm-toast-message {
	color: var(--rm-color-text-secondary);
	font-size: 0.75rem;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.rm-toast-close {
	position: absolute;
	top: 10px;
	right: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	color: var(--rm-color-text-muted);
	background: transparent;
	border: 0;
	border-radius: var(--rm-radius-sm);
	cursor: pointer;
}

.rm-toast-close:hover {
	color: var(--rm-color-text);
	background: var(--rm-color-bg-muted);
}

.rm-toast-progress {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: var(--rm-color-primary);
	transform-origin: left center;
}

.rm-toast-success .rm-toast-progress {
	background: var(--rm-color-success);
}

.rm-toast-error .rm-toast-progress {
	background: var(--rm-color-danger);
}

.rm-toast-warning .rm-toast-progress {
	background: var(--rm-color-warning);
}


/* ==========================================================================
   19. Loading
   ========================================================================== */

.rm-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: var(--rm-color-primary);
}

.rm-loading-overlay {
	position: fixed;
	inset: 0;
	z-index: 12000;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.86);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.rm-loading[hidden],
.rm-loading.is-hidden {
	display: none !important;
}

.rm-loading-spinner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.rm-loading-spinner svg {
	display: block;
	animation: rm-loading-spin 0.9s linear infinite;
}

.rm-loading-spinner-progress {
	color: var(--rm-color-primary);
}

.rm-loading-text {
	color: var(--rm-color-text-secondary);
	font-size: 0.8125rem;
	font-weight: 550;
	text-align: center;
}

.rm-loading-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.rm-loading-dots span {
	display: block;
	width: 7px;
	height: 7px;
	background: currentColor;
	border-radius: 50%;
	animation: rm-loading-dot 1.2s infinite ease-in-out;
}

.rm-loading-dots span:nth-child(2) {
	animation-delay: 0.15s;
}

.rm-loading-dots span:nth-child(3) {
	animation-delay: 0.3s;
}

.rm-loading-bar {
	width: min(260px, 80vw);
	height: 4px;
	overflow: hidden;
	background: var(--rm-color-bg-muted);
	border-radius: var(--rm-radius-full);
}

.rm-loading-bar span {
	display: block;
	width: 40%;
	height: 100%;
	background: var(--rm-color-primary);
	border-radius: inherit;
	animation: rm-loading-bar 1.2s infinite ease-in-out;
}

.rm-loading-skeleton {
	display: flex;
	flex-direction: column;
	gap: 9px;
	width: min(300px, 80vw);
}

.rm-skeleton-line {
	display: block;
	height: 11px;
	background: linear-gradient(
		90deg,
		#eef2f7 0%,
		#f8fafc 50%,
		#eef2f7 100%
	);
	background-size: 200% 100%;
	border-radius: var(--rm-radius-full);
	animation: rm-skeleton-shimmer 1.4s infinite;
}

.rm-skeleton-line-large {
	width: 100%;
}

.rm-skeleton-line-medium {
	width: 78%;
}

.rm-skeleton-line-small {
	width: 52%;
}

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

@keyframes rm-loading-dot {
	0%,
	80%,
	100% {
		opacity: 0.35;
		transform: translateY(0);
	}

	40% {
		opacity: 1;
		transform: translateY(-4px);
	}
}

@keyframes rm-loading-bar {
	0% {
		transform: translateX(-120%);
	}

	100% {
		transform: translateX(350%);
	}
}

@keyframes rm-skeleton-shimmer {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}


/* ==========================================================================
   20. Empty State
   ========================================================================== */

.rm-empty-state {
	width: 100%;
	padding: 56px 20px;
}

.rm-empty-state-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: min(100%, 620px);
	margin: 0 auto;
	text-align: center;
}

.rm-empty-state-illustration {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	margin-bottom: 22px;
	color: var(--rm-color-primary);
	background: var(--rm-color-primary-soft);
	border-radius: 50%;
}

.rm-empty-state-illustration svg {
	display: block;
	width: 72px;
	height: 72px;
}

.rm-empty-state-title {
	margin-bottom: 9px !important;
	font-size: 1.35rem !important;
}

.rm-empty-state-message {
	max-width: 520px;
	margin-bottom: 22px !important;
	color: var(--rm-color-text-muted) !important;
	font-size: 0.9rem !important;
	line-height: 1.7 !important;
}

.rm-empty-state-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 9px;
}

.rm-empty-state-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	padding: 9px 15px;
	border-radius: var(--rm-radius-md);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.rm-empty-state-primary {
	color: var(--rm-color-white) !important;
	background: var(--rm-color-primary);
	border: 1px solid var(--rm-color-primary);
}

.rm-empty-state-primary:hover {
	color: var(--rm-color-white) !important;
	background: var(--rm-color-primary-hover);
}

.rm-empty-state-secondary {
	color: var(--rm-color-text) !important;
	background: var(--rm-color-white);
	border: 1px solid var(--rm-color-border-dark);
}

.rm-empty-state-secondary:hover {
	color: var(--rm-color-text) !important;
	background: var(--rm-color-bg-soft);
}


/* ==========================================================================
   21. Export Modal
   ========================================================================== */

.rm-export-dialog {
	width: min(100%, 720px);
}

.rm-export-subtitle {
	margin: 4px 0 0 !important;
	color: var(--rm-color-text-muted) !important;
	font-size: 0.75rem !important;
	line-height: 1.5 !important;
}

.rm-export-resume-info {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 20px;
	padding: 12px;
	background: var(--rm-color-bg-soft);
	border: 1px solid var(--rm-color-border-light);
	border-radius: var(--rm-radius-md);
}

.rm-export-document-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	color: var(--rm-color-primary);
	background: var(--rm-color-white);
	border: 1px solid var(--rm-color-border);
	border-radius: var(--rm-radius-md);
}

.rm-export-document-info {
	min-width: 0;
}

.rm-export-document-label,
.rm-export-document-title {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rm-export-document-label {
	margin-bottom: 2px;
	color: var(--rm-color-text-muted);
	font-size: 0.7rem;
}

.rm-export-document-title {
	color: var(--rm-color-text);
	font-size: 0.8125rem;
}

.rm-export-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.rm-export-option {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 11px;
	width: 100%;
	min-width: 0;
	padding: 13px;
	color: var(--rm-color-text);
	text-align: left;
	background: var(--rm-color-white);
	border: 1px solid var(--rm-color-border);
	border-radius: var(--rm-radius-lg);
	cursor: pointer;
	transition:
		border-color var(--rm-transition-fast),
		background-color var(--rm-transition-fast),
		box-shadow var(--rm-transition-fast),
		transform var(--rm-transition-fast);
}

.rm-export-option:hover {
	border-color: #b9c3d1;
	background: var(--rm-color-bg-soft);
	transform: translateY(-1px);
}

.rm-export-option.is-selected {
	border-color: var(--rm-color-primary);
	background: var(--rm-color-primary-soft);
	box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.08);
}

.rm-export-option-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	color: var(--rm-color-primary);
	background: var(--rm-color-primary-soft);
	border-radius: var(--rm-radius-md);
}

.rm-export-option-content {
	display: block;
	min-width: 0;
	padding-right: 20px;
}

.rm-export-option-title,
.rm-export-option-description,
.rm-export-option-extension {
	display: block;
}

.rm-export-option-title {
	margin-bottom: 3px;
	font-size: 0.8125rem;
}

.rm-export-option-description {
	color: var(--rm-color-text-muted);
	font-size: 0.7rem;
	line-height: 1.5;
}

.rm-export-option-extension {
	margin-top: 5px;
	color: var(--rm-color-text-light);
	font-family: var(--rm-font-mono);
	font-size: 0.62rem;
}

.rm-export-option-check {
	position: absolute;
	top: 13px;
	right: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--rm-color-white);
	background: var(--rm-color-primary);
	border-radius: 50%;
	opacity: 0;
	transform: scale(0.8);
	transition:
		opacity var(--rm-transition-fast),
		transform var(--rm-transition-fast);
}

.rm-export-option.is-selected .rm-export-option-check {
	opacity: 1;
	transform: scale(1);
}

.rm-export-status {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-top: 16px;
	padding: 12px;
	background: var(--rm-color-info-soft);
	border: 1px solid #dbeafe;
	border-radius: var(--rm-radius-md);
}

.rm-export-status[hidden],
.rm-export-error[hidden] {
	display: none;
}

.rm-export-status-spinner {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--rm-color-primary);
}

.rm-export-status-spinner svg {
	animation: rm-loading-spin 0.9s linear infinite;
}

.rm-export-status-content {
	min-width: 0;
}

.rm-export-status-content strong,
.rm-export-status-content span {
	display: block;
}

.rm-export-status-content strong {
	color: var(--rm-color-text);
	font-size: 0.75rem;
}

.rm-export-status-content span {
	margin-top: 2px;
	color: var(--rm-color-text-muted);
	font-size: 0.7rem;
	line-height: 1.5;
}

.rm-export-error {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-top: 16px;
	padding: 11px;
	color: var(--rm-color-danger);
	background: var(--rm-color-danger-soft);
	border: 1px solid #fecaca;
	border-radius: var(--rm-radius-md);
	font-size: 0.75rem;
	line-height: 1.5;
}

.rm-export-footer {
	justify-content: flex-end;
}


/* ==========================================================================
   22. Selection / State Helpers
   ========================================================================== */

.rm-is-loading {
	pointer-events: none;
	cursor: wait !important;
	opacity: 0.7;
}

.rm-is-disabled {
	pointer-events: none !important;
	opacity: 0.55 !important;
}

.rm-is-hidden {
	display: none !important;
}

.rm-no-scroll {
	overflow: hidden !important;
}


/* ==========================================================================
   23. Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.rm-site-header *,
	.rm-site-footer *,
	.rm-modal *,
	.rm-toast-container *,
	.rm-loading *,
	.rm-page *,
	.rm-app-shell * {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

}


/* ==========================================================================
   24. Tablet
   ========================================================================== */

@media (max-width: 1100px) {

	.rm-header-inner {
		gap: 15px;
	}

	.rm-main-navigation {
		gap: 10px;
	}

	.rm-navigation-primary {
		gap: 2px;
	}

	.rm-navigation-link {
		padding-left: 8px;
		padding-right: 8px;
	}

	.rm-navigation-link span:not(.rm-navigation-icon) {
		font-size: 0.8125rem;
	}

	.rm-navigation-icon {
		display: none;
	}

	.rm-footer-container {
		grid-template-columns:
			minmax(220px, 1.4fr)
			repeat(3, minmax(130px, 1fr));
		gap: 28px;
	}

}


/* ==========================================================================
   25. Mobile
   ========================================================================== */

@media (max-width: 900px) {

	.rm-header-inner {
		width: min(
			calc(100% - 28px),
			var(--rm-container-width)
		);
	}

	.rm-desktop-nav,
	.rm-main-navigation {
		display: none !important;
	}

	.rm-mobile-menu-toggle {
		display: inline-flex;
	}

	.rm-mobile-navigation:not([hidden]) {
		display: block;
	}

	.rm-header-dashboard,
	.rm-login-link {
		display: none;
	}

	.rm-header-cta {
		min-height: 38px;
		padding: 8px 11px;
		font-size: 0.8125rem;
	}

	.rm-footer-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rm-footer-brand {
		grid-column: 1 / -1;
	}

	.rm-footer-bottom-inner {
		grid-template-columns: 1fr;
		justify-items: center;
		padding: 16px 0;
		text-align: center;
	}

	.rm-footer-made-with {
		justify-self: center;
	}

}


/* ==========================================================================
   26. Small Mobile
   ========================================================================== */

@media (max-width: 640px) {

	.rm-container,
	.rm-content-container {
		width: min(
			calc(100% - 28px),
			var(--rm-container-width)
		);
	}

	.rm-brand-tagline {
		display: none;
	}

	.rm-brand-name {
		max-width: 170px;
	}

	.rm-brand-mark {
		width: 36px;
		height: 36px;
	}

	.rm-header-inner {
		min-height: 64px;
	}

	.rm-header-cta span {
		display: none;
	}

	.rm-header-cta {
		width: 40px;
		height: 40px;
		padding: 0;
	}

	.rm-footer-main {
		padding: 44px 0 38px;
	}

	.rm-footer-container {
		grid-template-columns: 1fr;
		gap: 30px;
		width: min(
			calc(100% - 28px),
			var(--rm-container-width)
		);
	}

	.rm-footer-brand {
		grid-column: auto;
	}

	.rm-footer-description {
		max-width: 100%;
	}

	.rm-footer-bottom-inner {
		width: min(
			calc(100% - 28px),
			var(--rm-container-width)
		);
	}

	.rm-modal {
		align-items: flex-end;
		padding: 0;
	}

	.rm-modal-dialog {
		width: 100%;
		max-width: 100% !important;
		max-height: calc(100vh - 12px);
		border-radius: var(--rm-radius-xl) var(--rm-radius-xl) 0 0;
	}

	.rm-modal-header {
		padding: 18px;
	}

	.rm-modal-body {
		padding: 18px;
	}

	.rm-modal-footer {
		padding: 14px 18px;
	}

	.rm-export-options {
		grid-template-columns: 1fr;
	}

	.rm-export-footer {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.rm-export-footer .rm-modal-button {
		width: 100%;
	}

	.rm-empty-state {
		padding: 42px 14px;
	}

	.rm-empty-state-illustration {
		width: 86px;
		height: 86px;
	}

	.rm-empty-state-illustration svg {
		width: 62px;
		height: 62px;
	}

	.rm-empty-state-actions {
		width: 100%;
		flex-direction: column;
	}

	.rm-empty-state-button {
		width: 100%;
		max-width: 320px;
	}

	.rm-toast-container {
		right: 12px;
		bottom: 12px;
		left: 12px;
		width: auto;
	}

	.rm-toast {
		width: 100%;
	}

}


/* ==========================================================================
   27. Very Small Devices
   ========================================================================== */

@media (max-width: 360px) {

	.rm-header-inner {
		width: calc(100% - 20px);
		gap: 8px;
	}

	.rm-brand-name {
		max-width: 135px;
		font-size: 0.85rem;
	}

	.rm-brand-mark {
		width: 34px;
		height: 34px;
	}

	.rm-header-actions {
		gap: 5px;
	}

	.rm-mobile-menu-toggle {
		width: 38px;
		height: 38px;
	}

	.rm-header-cta {
		width: 38px;
		height: 38px;
	}

	.rm-footer-container,
	.rm-footer-bottom-inner {
		width: calc(100% - 20px);
	}

	.rm-modal-footer {
		grid-template-columns: 1fr;
	}

}


/* ==========================================================================
   28. Print Safety
   ========================================================================== */

@media print {

	.rm-site-header,
	.rm-site-footer,
	.rm-mobile-navigation,
	.rm-modal,
	.rm-toast-container,
	.rm-loading-overlay {
		display: none !important;
	}

	.rm-page,
	.rm-app-shell {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #ffffff !important;
		box-shadow: none !important;
	}

}


/* ==========================================================================
   29. WordPress Theme Isolation
   ========================================================================== */

.rm-page button,
.rm-app-shell button,
.rm-site-header button,
.rm-site-footer button {
	appearance: none;
	-webkit-appearance: none;
}

.rm-page img,
.rm-app-shell img,
.rm-site-header img,
.rm-site-footer img {
	max-width: 100%;
	height: auto;
}

.rm-page table,
.rm-app-shell table {
	max-width: 100%;
	border-collapse: collapse;
}

.rm-page iframe,
.rm-app-shell iframe,
.rm-page video,
.rm-app-shell video {
	max-width: 100%;
}

.rm-page ul,
.rm-page ol,
.rm-app-shell ul,
.rm-app-shell ol {
	max-width: 100%;
}


/* ==========================================================================
   30. Overflow Protection
   ========================================================================== */

.rm-site-header,
.rm-site-footer,
.rm-page,
.rm-app-shell,
.rm-modal,
.rm-toast-container {
	max-width: 100%;
	overflow-wrap: anywhere;
}

.rm-site-header,
.rm-page,
.rm-app-shell {
	overflow-x: clip;
}

@supports not (overflow: clip) {

	.rm-site-header,
	.rm-page,
	.rm-app-shell {
		overflow-x: hidden;
	}

}