/**
 * AI Outreach Front App — SPA + marketing UI.
 * Palette: ink navy + amber (distinct from Video Agents teal).
 */

:root {
	--op-ink: #121826;
	--op-navy: #1a2744;
	--op-navy-deep: #0f1729;
	--op-accent: #c4782a;
	--op-accent-hot: #d4892f;
	--op-accent-soft: rgba(196, 120, 42, 0.14);
	--op-sky: #eef2f8;
	--op-mist: #e4ebf5;
	--op-paper: #ffffff;
	--op-cream: #f4f6fb;
	--op-line: rgba(26, 39, 68, 0.1);
	--op-muted: rgba(18, 24, 38, 0.58);
	--op-warn: #b42318;
	--op-ok: #0f766e;
	--op-info: #2563eb;
	/* Aliases used by existing component classes */
	--op-forest: var(--op-navy);
	--op-teal: var(--op-accent);
	--op-mint: var(--op-mist);
	--op-sand: #f3e8d8;
	--op-font-display: "Fraunces", Georgia, serif;
	--op-font-body: "Outfit", system-ui, sans-serif;
	--op-shadow: 0 14px 36px rgba(26, 39, 68, 0.08);
	--op-shadow-sm: 0 4px 14px rgba(26, 39, 68, 0.06);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body.op-front-page {
	margin: 0;
	background: var(--op-cream);
	color: var(--op-ink);
	font-family: var(--op-font-body);
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--op-teal);
	text-decoration: none;
}

.op-front-brand {
	font-family: var(--op-font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--op-navy) !important;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}

.op-front-brand--on-dark {
	color: #fff !important;
}

.op-brand-mark {
	width: 36px;
	height: 36px;
	border-radius: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg, var(--op-navy) 0%, #243556 100%);
	color: #fff;
	font-weight: 700;
	font-size: 0.72rem;
	font-family: var(--op-font-body);
	flex-shrink: 0;
	box-shadow: 0 0 0 3px var(--op-accent-soft), 0 8px 18px rgba(26, 39, 68, 0.22);
}

.op-brand-mark--light {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.op-front-brand--side {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

.op-brand-text {
	display: grid;
	line-height: 1.2;
}

.op-brand-text strong {
	font-family: var(--op-font-body);
	font-size: 15px;
	font-weight: 700;
}

.op-brand-text small {
	color: var(--op-muted);
	font-size: 11px;
	font-weight: 500;
}

.op-front-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
}

.op-front-top__nav {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.op-front-link {
	font-weight: 500;
	color: var(--op-ink) !important;
}

button.op-front-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
}

.op-front-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	border-radius: 12px;
	padding: 0.55rem 0.95rem;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none !important;
	transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.op-front-btn:hover {
	transform: translateY(-1px);
}

.op-front-btn--solid {
	background: linear-gradient(135deg, var(--op-navy) 0%, #243556 100%);
	color: #fff !important;
	box-shadow: 0 10px 24px rgba(26, 39, 68, 0.28);
}

.op-front-btn--solid:hover {
	background: var(--op-navy-deep);
}

.op-front-btn--accent {
	background: linear-gradient(135deg, var(--op-accent) 0%, var(--op-accent-hot) 100%);
	color: #fff !important;
	box-shadow: 0 10px 22px rgba(196, 120, 42, 0.28);
}

.op-front-btn--ghost {
	background: var(--op-paper);
	border-color: var(--op-line);
	color: var(--op-ink) !important;
	box-shadow: var(--op-shadow-sm);
}

.op-front-btn--ghost:hover {
	border-color: rgba(196, 120, 42, 0.45);
	color: var(--op-navy) !important;
}

.op-front-btn--ghost.is-on {
	border-color: var(--op-accent);
	background: var(--op-accent-soft);
	color: var(--op-navy) !important;
}

.op-front-btn:disabled,
.op-front-btn.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

.op-front-btn:disabled:hover,
.op-front-btn.is-disabled:hover {
	transform: none;
	border-color: inherit;
}

.op-front-btn--lg {
	padding: 0.7rem 1.15rem;
	font-size: 15px;
}

.op-front-btn--sm {
	padding: 0.4rem 0.75rem;
	font-size: 13px;
}

.op-front-btn--block {
	width: 100%;
}

.op-icon-btn {
	border: 0;
	background: transparent;
	font-size: 1.25rem;
	cursor: pointer;
	padding: 0.35rem 0.5rem;
	border-radius: 0.5rem;
}

.op-icon-btn:hover {
	background: rgba(196, 120, 42, 0.14);
}

.op-front-brand--hero {
	font-size: clamp(1.85rem, 4vw, 2.75rem);
	margin: 0 0 0.65rem;
	display: block;
}

.op-front-brand--auth {
	display: inline-block;
	margin-bottom: 1.25rem;
	font-size: 1.35rem;
}

/* Landing */
.op-front--landing {
	min-height: 100vh;
	background:
		radial-gradient(ellipse 70% 50% at 50% 0%, rgba(196, 120, 42, 0.12), transparent 55%),
		radial-gradient(ellipse 45% 35% at 100% 20%, rgba(26, 39, 68, 0.06), transparent 50%),
		linear-gradient(180deg, #f4f6fb 0%, var(--op-cream) 38%, #f7f4ef 100%);
}

/* Centered hero + journey (fills first screen without empty side panel) */
.op-hero {
	padding: clamp(1.75rem, 4.5vw, 3rem) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 4.5vw, 3rem);
	text-align: center;
}

.op-hero__inner {
	max-width: 42rem;
	margin: 0 auto 1.85rem;
}

.op-hero__badge {
	display: inline-flex;
	align-items: center;
	margin: 0 0 1.1rem;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	border: 1px solid rgba(196, 120, 42, 0.35);
	background: rgba(196, 120, 42, 0.1);
	color: #8a5418;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.op-hero__title {
	font-family: var(--op-font-display);
	font-size: clamp(1.85rem, 4.2vw, 2.85rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 auto 0.85rem;
	max-width: 20ch;
	color: var(--op-ink);
}

.op-hero__lede {
	margin: 0 auto 1.35rem;
	max-width: 42ch;
	font-size: clamp(0.98rem, 1.35vw, 1.08rem);
	line-height: 1.55;
	color: var(--op-muted);
}

.op-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

.op-hero__actions--center {
	justify-content: center;
}

.op-journey {
	max-width: 56rem;
	margin: 0 auto;
	padding: 1.35rem 1.25rem 1.2rem;
	border-radius: 0.85rem;
	background:
		linear-gradient(135deg, rgba(26, 39, 68, 0.04), transparent 42%),
		rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(26, 39, 68, 0.1);
	border-left: 3px solid var(--op-accent);
	box-shadow: none;
	text-align: left;
	animation: op-rise 0.75s ease both;
}

.op-journey__label {
	margin: 0 0 1rem;
	text-align: left;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--op-navy);
}

.op-journey__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	position: relative;
}

.op-journey__step {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: start;
	text-align: left;
	gap: 0.3rem;
	padding: 0.85rem 1rem;
	min-height: 6.5rem;
	background: rgba(255, 255, 255, 0.55);
}

.op-journey__step + .op-journey__step {
	border-left: 1px solid rgba(26, 39, 68, 0.1);
}

.op-journey__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.7rem;
	height: 1.35rem;
	padding: 0 0.35rem;
	margin-bottom: 0.2rem;
	border-radius: 0.35rem;
	background: rgba(26, 39, 68, 0.08);
	color: var(--op-navy);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

.op-journey__step.is-live .op-journey__num {
	background: rgba(196, 120, 42, 0.18);
	color: #8a5418;
}

.op-journey__step.is-end .op-journey__num {
	background: var(--op-navy);
	color: #fff;
}

.op-journey__step strong {
	display: block;
	font-size: 0.95rem;
	font-weight: 650;
	color: var(--op-ink);
	line-height: 1.3;
}

.op-journey__step span:not(.op-journey__num) {
	font-size: 0.82rem;
	color: var(--op-muted);
	line-height: 1.35;
}

.op-journey__note {
	margin: 0.95rem 0 0;
	padding-top: 0.85rem;
	border-top: 1px dashed rgba(26, 39, 68, 0.14);
	text-align: left;
	font-size: 0.88rem;
	color: var(--op-muted);
	line-height: 1.45;
}

/* Old two-column hero unused */
.op-front-hero {
	display: none;
}

@keyframes op-rise {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes op-pulse {
	0%,
	100% {
		opacity: 0.55;
	}
	50% {
		opacity: 1;
	}
}

/* Auth */
.op-front--auth {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem 1.25rem;
	background:
		radial-gradient(circle at 18% 12%, rgba(47, 143, 125, 0.16), transparent 42%),
		var(--op-cream);
}

.op-front-auth {
	width: min(100%, 420px);
	padding: 2rem;
	border-radius: 1.35rem;
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid var(--op-line);
	box-shadow: var(--op-shadow);
	backdrop-filter: blur(10px);
}

.op-front-auth__title {
	font-family: var(--op-font-display);
	font-size: 1.85rem;
	margin: 0 0 0.35rem;
}

.op-front-auth__hint,
.op-front-auth__foot {
	color: var(--op-muted);
	margin: 0 0 1.25rem;
}

.op-front-auth__foot {
	margin-top: 1.25rem;
	margin-bottom: 0;
}

.op-front-field {
	display: grid;
	gap: 0.35rem;
	margin-bottom: 1rem;
	font-size: 0.9rem;
	font-weight: 500;
}

.op-front-field input,
.op-front-field textarea,
.op-search {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border-radius: 0.7rem;
	border: 1px solid var(--op-line);
	background: #fff;
	font: inherit;
	color: var(--op-ink);
}

.op-front-field textarea {
	resize: vertical;
	min-height: 4.5rem;
}

.op-front-field input:focus,
.op-front-field textarea:focus,
.op-search:focus {
	outline: 2px solid rgba(47, 143, 125, 0.3);
	border-color: var(--op-teal);
}

.op-front-form__error {
	color: var(--op-warn);
	font-size: 0.9rem;
	margin: 0 0 0.75rem;
}

/* SPA shell */
.op-app {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 268px 1fr;
	background:
		radial-gradient(ellipse 55% 42% at 100% -5%, rgba(196, 120, 42, 0.12), transparent 58%),
		radial-gradient(ellipse 45% 36% at 0% 100%, rgba(26, 39, 68, 0.07), transparent 55%),
		var(--op-cream);
}

.op-app-sidebar {
	padding: 1rem 0.7rem 1.15rem;
	border-right: 1px solid var(--op-line);
	background:
		linear-gradient(180deg, #ffffff 0%, #f7f9fc 55%, #f3f1ec 100%);
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	position: sticky;
	top: 0;
	height: 100vh;
	box-shadow: 4px 0 24px rgba(26, 39, 68, 0.03);
}

.op-nav-label {
	margin: 0.7rem 0.7rem 0.4rem;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--op-muted);
	font-weight: 700;
}

.op-app-nav {
	display: grid;
	gap: 4px;
	flex: 1;
	align-content: start;
	overflow-y: auto;
}

.op-sidebar-user {
	margin-top: auto;
	padding: 0.75rem 0.7rem 0.15rem;
	border-top: 1px solid var(--op-line);
}

.op-sidebar-user__email,
.op-sidebar-user__plan {
	margin: 0;
	font-size: 12px;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.op-sidebar-user__email {
	color: var(--op-ink);
	font-weight: 600;
}

.op-sidebar-user__plan {
	margin-top: 0.2rem;
	color: var(--op-muted);
	font-weight: 600;
}

.op-app-nav__item {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.65rem;
	padding: 0.62rem 0.75rem;
	border-radius: 12px;
	color: var(--op-ink) !important;
	font-size: 13.5px;
	font-weight: 600;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	border: 1px solid transparent;
}

.op-app-nav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--op-sky);
	color: var(--op-navy);
	flex-shrink: 0;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.op-app-nav__icon svg {
	display: block;
}

.op-app-nav__label {
	flex: 1;
	min-width: 0;
}

.op-app-nav__item:hover {
	background: rgba(26, 39, 68, 0.05);
	color: var(--op-navy) !important;
}

.op-app-nav__item:hover .op-app-nav__icon {
	background: var(--op-accent-soft);
	color: var(--op-accent);
}

.op-app-nav__item.is-active {
	background: rgba(26, 39, 68, 0.08);
	color: var(--op-navy) !important;
	border-color: rgba(26, 39, 68, 0.06);
	box-shadow: inset 3px 0 0 var(--op-accent);
}

.op-app-nav__item.is-active .op-app-nav__icon {
	background: linear-gradient(145deg, var(--op-navy), #2a3d63);
	color: #fff;
	box-shadow: 0 6px 14px rgba(26, 39, 68, 0.22);
}

.op-nav-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 0.32rem;
	border-radius: 999px;
	background: var(--op-accent);
	color: #fff !important;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
	flex-shrink: 0;
	margin-left: 0.05rem;
	box-shadow: 0 4px 10px rgba(196, 120, 42, 0.35);
}

.op-nav-badge[hidden] {
	display: none !important;
}

.op-app-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.op-app-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem clamp(1rem, 2.5vw, 1.65rem);
	border-bottom: 1px solid var(--op-line);
	background: #ffffff;
	position: sticky;
	top: 0;
	z-index: 5;
	box-shadow: 0 1px 0 rgba(26, 39, 68, 0.03);
}

.op-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	border: 1px solid var(--op-line);
	background: var(--op-paper);
	color: var(--op-navy);
	cursor: pointer;
	box-shadow: var(--op-shadow-sm);
	text-decoration: none !important;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.op-icon-btn:hover {
	border-color: rgba(196, 120, 42, 0.45);
	color: var(--op-accent);
}

.op-icon-btn--logout:hover {
	border-color: rgba(180, 35, 24, 0.35);
	color: var(--op-warn);
	background: #fef2f2;
}

#op-mobile-menu {
	display: none;
}

.op-app-topbar__welcome {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.35rem 0.45rem;
	min-width: 0;
	flex: 1;
}

.op-app-topbar__hello {
	font-size: 14px;
	color: var(--op-muted);
	font-weight: 500;
}

.op-app-topbar__welcome strong {
	font-size: 15px;
	color: var(--op-navy);
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 16rem;
}

.op-app-topbar__actions {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin-left: auto;
	flex-shrink: 0;
}

.op-user-avatar {
	width: 38px;
	height: 38px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(145deg, var(--op-accent), var(--op-accent-hot));
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(196, 120, 42, 0.35);
	text-decoration: none !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.op-user-avatar:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(196, 120, 42, 0.4);
}

.op-theme-toggle .op-theme-toggle__moon {
	display: none;
}

html.op-theme-dark .op-theme-toggle .op-theme-toggle__sun {
	display: none;
}

html.op-theme-dark .op-theme-toggle .op-theme-toggle__moon {
	display: inline-flex;
}

.op-app-topbar__user {
	display: none;
}

.op-app-content {
	padding: 1.25rem clamp(1rem, 2.5vw, 1.65rem) 2.25rem;
	transition: opacity 0.15s ease;
}

.op-app-content.is-switching {
	opacity: 0.55;
}

.op-app-loading {
	padding: 2rem;
	color: var(--op-muted);
}

.op-page-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.15rem;
}

.op-page-head__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.op-app-eyebrow {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 11px;
	color: var(--op-accent);
	font-weight: 700;
}

.op-app-title {
	font-family: var(--op-font-body);
	font-size: clamp(1.4rem, 2vw, 1.75rem);
	margin: 0.15rem 0 0;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--op-navy);
}

.op-app-kpis {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.9rem;
	margin-bottom: 1.25rem;
}

.op-app-kpis--6 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.op-app-kpi {
	position: relative;
	padding: 1.05rem 1.15rem 1.1rem;
	border-radius: 1.15rem;
	background: var(--op-paper);
	border: 1px solid var(--op-line);
	display: grid;
	gap: 0.45rem;
	box-shadow: var(--op-shadow-sm);
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.op-app-kpi:hover {
	transform: translateY(-2px);
	box-shadow: var(--op-shadow);
}

.op-app-kpi__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.op-app-kpi__icon {
	width: 36px;
	height: 36px;
	border-radius: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.op-app-kpi__icon svg {
	display: block;
}

.op-app-kpi__icon--navy {
	background: rgba(26, 39, 68, 0.1);
	color: var(--op-navy);
}

.op-app-kpi__icon--amber {
	background: var(--op-accent-soft);
	color: var(--op-accent);
}

.op-app-kpi__icon--teal {
	background: rgba(15, 118, 110, 0.12);
	color: var(--op-ok);
}

.op-app-kpi__icon--blue {
	background: rgba(37, 99, 235, 0.12);
	color: var(--op-info);
}

.op-app-kpi span {
	font-size: 12px;
	color: var(--op-muted);
	font-weight: 600;
}

.op-app-kpi strong {
	font-family: var(--op-font-body);
	font-size: 1.55rem;
	font-weight: 700;
	color: var(--op-navy);
	letter-spacing: -0.02em;
}

.op-quick-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 0.85rem;
}

.op-quick-card {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.85rem 0.95rem;
	border-radius: 14px;
	background: var(--op-paper);
	border: 1px solid var(--op-line);
	color: var(--op-navy) !important;
	font-weight: 700;
	font-size: 13.5px;
	box-shadow: var(--op-shadow-sm);
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.op-quick-card:hover {
	transform: translateY(-2px);
	border-color: rgba(196, 120, 42, 0.4);
	box-shadow: var(--op-shadow);
}

.op-quick-card__icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--op-sky);
	color: var(--op-navy);
	flex-shrink: 0;
}

.op-quick-card--primary {
	background: linear-gradient(135deg, var(--op-navy) 0%, #243556 100%);
	color: #fff !important;
	border-color: transparent;
}

.op-quick-card--primary .op-quick-card__icon {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.op-quick-card--primary:hover {
	border-color: transparent;
}

.op-quick-stack {
	display: grid;
	gap: 0.65rem;
}

.op-nav-label--account {
	margin-top: 1.1rem;
}

.op-ov-about {
	display: none;
}

.op-profile-hero {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.op-profile-hero__icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--op-accent-soft);
	color: var(--op-accent);
	flex-shrink: 0;
}

.op-profile-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.95rem;
}

.op-profile-card--ai {
	margin-top: 0.95rem;
}

.op-ai-conn .op-sa-form__h {
	margin-top: 1.15rem;
}

.op-ai-conn .op-form-actions {
	margin-top: 1rem;
}

.op-profile-card__head {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.op-profile-card__head h2 {
	margin: 0;
}

.op-profile-card__icon {
	width: 36px;
	height: 36px;
	border-radius: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.op-profile-form {
	display: grid;
	gap: 0.75rem;
}

.op-profile-form .op-front-btn {
	justify-self: start;
	margin-top: 0.25rem;
}

.op-profile-msg {
	margin: 0.15rem 0 0;
	font-size: 13px;
	font-weight: 600;
}

.op-profile-msg.is-ok {
	color: var(--op-ok);
}

.op-profile-msg.is-err {
	color: var(--op-warn);
}

.op-an-footnote {
	margin: -0.35rem 0 1rem;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--op-muted);
}

.op-an-grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 0.85rem;
	margin-bottom: 0.85rem;
}

.op-an-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-bottom: 0.65rem;
	font-size: 12px;
	color: var(--op-muted);
}

.op-an-leg::before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 0.35rem;
	border-radius: 2px;
	vertical-align: -1px;
}

.op-an-leg--sent::before {
	background: #0f766e;
}

.op-an-leg--opens::before {
	background: #38bdf8;
}

.op-an-leg--replies::before {
	background: #1a2744;
}

.op-an-bars {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.25rem;
	min-height: 140px;
	padding: 0.35rem 0.1rem 0;
	overflow-x: auto;
}

.op-an-day {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	min-width: 18px;
}

.op-an-pair {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 2px;
	width: 100%;
	height: 120px;
}

.op-an-bar {
	display: block;
	width: 4px;
	max-width: 8px;
	flex: 1;
	border-radius: 2px 2px 0 0;
	min-height: 0;
}

.op-an-bar--sent {
	background: #0f766e;
}

.op-an-bar--opens {
	background: #38bdf8;
}

.op-an-bar--replies {
	background: #1a2744;
}

.op-an-day-label {
	font-size: 10px;
	color: var(--op-muted);
	white-space: nowrap;
	transform: scale(0.92);
}

.op-an-chart-empty {
	padding: 2rem 1rem;
	text-align: center;
	color: var(--op-muted);
	font-size: 13px;
	background: var(--op-cream, #f8fafc);
	border-radius: 10px;
}

.op-an-eng {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.op-an-eng__meta {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 13px;
	margin-bottom: 0.25rem;
}

.op-an-eng__track {
	height: 8px;
	border-radius: 999px;
	background: #e2e8f0;
	overflow: hidden;
}

.op-an-eng__track span {
	display: block;
	height: 100%;
	border-radius: inherit;
}

.op-an-eng--replied {
	background: #059669;
}

.op-an-eng--opened {
	background: #2563eb;
}

.op-an-eng--not-opened {
	background: #94a3b8;
}

.op-an-eng--bounced {
	background: #dc2626;
}

.op-an-cmp {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}

.op-an-cmp__meta {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	font-size: 13px;
	margin-bottom: 0.3rem;
}

.op-an-cmp__meta a {
	font-weight: 600;
	color: var(--op-ink);
	text-decoration: none;
}

.op-an-cmp__meta a:hover {
	color: var(--op-accent, #c4782a);
}

.op-an-cmp__track {
	height: 8px;
	border-radius: 999px;
	background: #e2e8f0;
	overflow: hidden;
}

.op-an-cmp__track span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #1a2744, #0f766e);
}

.op-an-cmp__sub {
	display: block;
	margin-top: 0.25rem;
	font-size: 11.5px;
	color: var(--op-muted);
}

.op-an-subjects {
	display: grid;
	gap: 0.55rem;
}

.op-an-subjects__head,
.op-an-subjects__row {
	display: grid;
	grid-template-columns: minmax(0, 1.8fr) 64px 88px 88px;
	gap: 0.65rem;
	align-items: center;
	font-size: 13px;
}

.op-an-subjects__head {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--op-muted);
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--op-line);
}

.op-an-subjects__row {
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--op-line);
}

.op-an-subjects__row:last-child {
	border-bottom: 0;
}

.op-an-subjects__sub {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}

.op-an-rank-block h3,
.op-an-rank-title {
	margin: 0 0 0.55rem;
	font-size: 13px;
	font-weight: 700;
}

.op-an-rank-title--best {
	color: #059669;
}

.op-an-rank-title--warn {
	color: #b45309;
}

.op-an-rank {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
}

.op-an-rank li {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	align-items: baseline;
	font-size: 13px;
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--op-line);
}

.op-an-rank li:last-child {
	border-bottom: 0;
}

.op-an-rank a {
	font-weight: 600;
	color: var(--op-ink);
	text-decoration: none;
}

.op-an-rank a:hover {
	color: var(--op-accent, #c4782a);
}

.op-an-rank span {
	color: var(--op-muted);
	white-space: nowrap;
	font-size: 12px;
}

.op-app-panel {
	padding: 1.05rem 1.15rem;
	border-radius: 16px;
	background: var(--op-paper);
	border: 1px solid var(--op-line);
	margin-bottom: 0.95rem;
	box-shadow: var(--op-shadow-sm);
}

.op-app-panel h2 {
	font-family: var(--op-font-body);
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 0.3rem;
	letter-spacing: -0.01em;
}

.op-ov-about p {
	margin: 0.35rem 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--op-ink);
	max-width: 42rem;
}

.op-app-panel__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.65rem;
}

.op-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin-top: 0.75rem;
}

.op-chip {
	padding: 0.5rem 0.95rem;
	border-radius: 999px;
	background: var(--op-paper);
	border: 1px solid var(--op-line);
	color: var(--op-navy) !important;
	font-weight: 650;
	font-size: 0.9rem;
	box-shadow: var(--op-shadow-sm);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.op-chip:hover {
	border-color: rgba(196, 120, 42, 0.4);
}

.op-chip.is-on,
.op-chip.is-active {
	background: linear-gradient(135deg, var(--op-navy), #243556);
	border-color: transparent;
	color: #fff !important;
	box-shadow: 0 8px 18px rgba(26, 39, 68, 0.22);
}

.op-app-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.op-app-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--op-line);
}

.op-app-list li:last-child {
	border-bottom: 0;
}

.op-app-list__empty {
	color: var(--op-muted);
	justify-content: flex-start !important;
}

.op-row-title {
	display: block;
	font-weight: 600;
	color: var(--op-ink);
}

.op-row-meta,
.op-muted,
.op-row-preview {
	display: block;
	font-size: 0.88rem;
	color: var(--op-muted);
}

.op-row-preview {
	margin-top: 0.25rem;
}

.op-row-link a {
	flex: 1;
	min-width: 0;
}

.op-app-badge {
	font-size: 0.72rem;
	padding: 0.22rem 0.6rem;
	border-radius: 999px;
	background: var(--op-accent-soft);
	color: var(--op-navy);
	text-transform: capitalize;
	font-weight: 700;
	white-space: nowrap;
}

.op-toolbar {
	margin-bottom: 0.85rem;
}

.op-search {
	max-width: 420px;
}

.op-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-bottom: 0.85rem;
}

.op-filter {
	border: 1px solid var(--op-line);
	background: #fff;
	border-radius: 999px;
	padding: 0.4rem 0.85rem;
	font: inherit;
	font-size: 0.88rem;
	cursor: pointer;
	color: var(--op-ink);
	box-shadow: var(--op-shadow-sm);
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.op-filter.is-active {
	background: linear-gradient(135deg, var(--op-navy), #243556);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 8px 16px rgba(26, 39, 68, 0.18);
}

.op-detail-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	text-align: left;
}

.op-detail-grid > div {
	display: grid;
	gap: 0.25rem;
}

.op-detail-block {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--op-line);
}

.op-detail-block h3 {
	margin: 0 0 0.35rem;
	font-size: 0.95rem;
}

.op-detail-block p {
	margin: 0;
	color: var(--op-muted);
	white-space: pre-wrap;
}

.op-empty {
	background: #fff;
	border-radius: 12px;
	padding: 1.5rem 1.25rem;
}

.op-empty h3 {
	margin: 0 0 0.35rem;
	font-family: var(--op-font-body);
	font-weight: 700;
}

.op-empty p {
	margin: 0;
	color: var(--op-muted);
}

.op-sidebar-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(18, 24, 38, 0.4);
	z-index: 20;
}

/* Landing sections + auth split */
.op-land-section {
	padding: clamp(2.75rem, 6vw, 4.25rem) clamp(1.25rem, 4vw, 3rem);
	max-width: 1080px;
	margin: 0 auto;
}

.op-land-title {
	font-family: var(--op-font-display);
	font-size: clamp(1.55rem, 2.8vw, 2.2rem);
	margin: 0 0 0.7rem;
	max-width: 24ch;
	line-height: 1.22;
}

.op-land-lede {
	margin: 0 0 1.75rem;
	max-width: 48ch;
	color: var(--op-muted);
	font-size: 1.02rem;
	line-height: 1.55;
}

.op-land-section--alt {
	max-width: none;
	background: rgba(255, 255, 255, 0.55);
	border-block: 1px solid var(--op-line);
}

.op-land-section--alt .op-steps {
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}

.op-land-kicker {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--op-accent);
}

.op-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.op-feature {
	padding: 1.25rem 1.3rem;
	border-radius: 1.1rem;
	background: var(--op-paper);
	border: 1px solid var(--op-line);
	box-shadow: 0 10px 28px rgba(18, 24, 38, 0.04);
}

.op-feature__tag {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--op-accent);
	margin-bottom: 0.55rem;
}

.op-feature h3 {
	margin: 0 0 0.45rem;
	font-size: 1.08rem;
	font-family: var(--op-font-display);
}

.op-feature p {
	margin: 0;
	color: var(--op-muted);
	font-size: 0.95rem;
}

.op-steps {
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.op-steps li {
	display: grid;
	gap: 0.75rem;
	padding: 1.15rem;
	border-radius: 1.1rem;
	background: var(--op-paper);
	border: 1px solid var(--op-line);
}

.op-steps__n {
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--op-navy);
	color: #fff;
	font-weight: 700;
	font-size: 0.9rem;
}

.op-steps h3 {
	margin: 0 0 0.35rem;
	font-size: 1.02rem;
}

.op-steps p {
	margin: 0;
	color: var(--op-muted);
	font-size: 0.92rem;
}

.op-safety-list {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.65rem;
	max-width: 720px;
}

.op-safety-list li {
	padding: 0.85rem 1rem 0.85rem 2.5rem;
	border-radius: 0.85rem;
	background: var(--op-paper);
	border: 1px solid var(--op-line);
	position: relative;
}

.op-safety-list li::before {
	content: "";
	position: absolute;
	left: 1rem;
	top: 1.15rem;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 999px;
	background: var(--op-accent);
}

.op-land-cta {
	margin: 1rem clamp(1.25rem, 4vw, 3rem) 3rem;
	padding: clamp(2rem, 5vw, 3rem);
	border-radius: 1.5rem;
	background: linear-gradient(135deg, var(--op-navy) 0%, #2a3d66 55%, #3a2e1a 140%);
	color: #fff;
	text-align: center;
}

.op-land-cta h2 {
	font-family: var(--op-font-display);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	margin: 0 0 0.5rem;
}

.op-land-cta p {
	margin: 0 auto 1.35rem;
	max-width: 42ch;
	opacity: 0.88;
}

.op-land-cta .op-front-btn--solid {
	background: var(--op-accent);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.op-land-cta .op-front-btn--solid:hover {
	background: var(--op-accent-hot);
}

.op-land-cta .op-front-btn--ghost,
.op-land-cta .op-land-cta__login {
	background: #fff;
	border-color: #fff;
	color: var(--op-navy) !important;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.op-land-cta .op-front-btn--ghost:hover,
.op-land-cta .op-land-cta__login:hover {
	background: #f8fafc;
	border-color: #f8fafc;
	color: var(--op-navy) !important;
}

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

.op-gs-modal {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(15, 23, 42, 0.45);
}

.op-gs-modal__card {
	width: min(440px, 100%);
	background: #fff;
	border-radius: 18px;
	padding: 1.15rem 1.25rem 1.3rem;
	box-shadow: 0 24px 56px rgba(15, 23, 42, 0.22);
}

.op-gs-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.85rem;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #64748b;
}

.op-gs-modal__close {
	width: 1.75rem;
	height: 1.75rem;
	border: 0;
	background: transparent;
	color: #94a3b8;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
}

.op-gs-modal__card h2 {
	margin: 0 0 0.7rem;
	font-size: 1.2rem;
	line-height: 1.35;
	color: var(--op-ink);
}

.op-gs-modal__card p {
	margin: 0 0 0.45rem;
	color: var(--op-muted);
	line-height: 1.5;
}

.op-gs-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.15rem;
}

.op-land-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem clamp(1.25rem, 4vw, 3rem) 2.5rem;
	border-top: 1px solid var(--op-line);
	max-width: 1120px;
	margin: 0 auto;
}

.op-front-brand--foot {
	font-size: 1.1rem;
}

.op-land-foot nav {
	display: flex;
	gap: 1.25rem;
}

.op-land-foot a {
	color: var(--op-muted) !important;
	font-weight: 500;
}

.op-front--auth-split {
	min-height: 100vh;
	display: grid;
	grid-template-columns: minmax(280px, 0.95fr) 1.05fr;
}

.op-auth-aside {
	padding: clamp(1.75rem, 4vw, 3rem);
	background:
		radial-gradient(circle at 20% 15%, rgba(196, 120, 42, 0.22), transparent 42%),
		linear-gradient(165deg, var(--op-navy) 0%, var(--op-navy-deep) 100%);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.op-front--auth-split-signup .op-auth-aside {
	background:
		radial-gradient(circle at 80% 80%, rgba(196, 120, 42, 0.2), transparent 40%),
		linear-gradient(200deg, #152038 0%, var(--op-navy-deep) 55%, #1c1830 100%);
}

.op-auth-aside__title {
	font-family: var(--op-font-display);
	font-size: clamp(1.75rem, 3.2vw, 2.45rem);
	font-weight: 500;
	line-height: 1.2;
	margin: 1.5rem 0 0.85rem;
	max-width: 14ch;
}

.op-auth-aside__title em {
	font-style: italic;
	color: #f0c48a;
}

.op-auth-aside__lede {
	margin: 0 0 1.5rem;
	max-width: 34ch;
	opacity: 0.86;
	line-height: 1.55;
}

.op-auth-aside__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.65rem;
}

.op-auth-aside__list li {
	padding: 0.75rem 0.9rem;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.95rem;
}

.op-auth-aside__bullets {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1rem;
}

.op-auth-aside__bullets li {
	display: grid;
	gap: 0.2rem;
}

.op-auth-aside__bullets strong {
	font-size: 1rem;
}

.op-auth-aside__bullets span {
	opacity: 0.78;
	font-size: 0.9rem;
}

.op-auth-main {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1.25rem;
	background:
		radial-gradient(circle at 90% 10%, rgba(196, 120, 42, 0.08), transparent 35%),
		var(--op-cream);
}

.op-auth-card {
	width: min(100%, 420px);
	padding: 2rem;
	border-radius: 1.35rem;
	background: var(--op-paper);
	border: 1px solid var(--op-line);
	box-shadow: var(--op-shadow);
}

.op-auth-card__brand {
	margin: 0 0 0.75rem;
	font-family: var(--op-font-display);
	font-weight: 700;
	color: var(--op-navy);
}

.op-pw-wrap {
	position: relative;
	display: block;
}

.op-pw-wrap input {
	width: 100%;
	padding: 0.75rem 2.75rem 0.75rem 0.9rem;
	border-radius: 0.7rem;
	border: 1px solid var(--op-line);
	background: #fff;
	font: inherit;
	color: var(--op-ink);
}

.op-pw-toggle {
	position: absolute;
	right: 0.45rem;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 0.35rem 0.45rem;
	opacity: 0.65;
	font-size: 0.95rem;
}

.op-pw-toggle:hover {
	opacity: 1;
}

.op-app-sidebar {
	background:
		linear-gradient(180deg, #ffffff 0%, #f7f9fc 55%, #f3f1ec 100%) !important;
}

.op-filter.is-active {
	background: linear-gradient(135deg, var(--op-navy), #243556) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 8px 16px rgba(26, 39, 68, 0.18);
}

@media (max-width: 960px) {
	.op-journey__track {
		grid-template-columns: 1fr 1fr;
	}

	.op-journey__step {
		min-height: 0;
	}

	.op-journey__step:nth-child(2n) {
		border-left: 1px solid rgba(26, 39, 68, 0.1);
	}

	.op-journey__step:nth-child(n + 3) {
		border-top: 1px solid rgba(26, 39, 68, 0.1);
	}

	.op-journey__step:nth-child(odd) {
		border-left: none;
	}

	.op-feature-grid,
	.op-steps {
		grid-template-columns: 1fr;
	}

	.op-front--auth-split {
		grid-template-columns: 1fr;
	}

	.op-auth-aside {
		min-height: auto;
		padding-bottom: 2rem;
	}

	.op-front-top__nav .op-front-link:nth-child(-n+3) {
		display: none;
	}

	.op-app {
		grid-template-columns: 1fr;
	}

	.op-app-sidebar {
		position: fixed;
		inset: 0 auto 0 0;
		width: min(280px, 86vw);
		z-index: 30;
		transform: translateX(-105%);
		transition: transform 0.2s ease;
		height: 100vh;
	}

	.op-app-sidebar.is-open {
		transform: translateX(0);
	}

	.op-app-kpis,
	.op-app-kpis--6,
	.op-an-grid,
	.op-quick-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.op-profile-grid,
	.op-ar-grid {
		grid-template-columns: 1fr;
	}

	.op-an-subjects__head,
	.op-an-subjects__row {
		grid-template-columns: minmax(0, 1fr) 48px 72px 72px;
		font-size: 12px;
	}

	#op-mobile-menu {
		display: inline-flex !important;
	}

	.op-app-topbar__welcome strong {
		max-width: 9rem;
	}
}

@media (min-width: 961px) {
	#op-mobile-menu {
		display: none !important;
	}
}

/* Contacts module + VA-scale workspace type */
.op-page-sub {
	margin: 0 0 0.35rem;
	color: var(--op-muted);
	font-size: 13px;
}

.op-list-howto {
	margin: 0 0 1rem;
	color: var(--op-muted);
	font-size: 13px;
	line-height: 1.45;
}

.op-list-howto a {
	font-weight: 650;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.op-shortcode-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin: 0 0 1rem;
	padding: 0.95rem 1.1rem;
	border-radius: 12px;
	border: 1px dashed rgba(196, 120, 42, 0.45);
	background: linear-gradient(135deg, rgba(26, 39, 68, 0.04) 0%, #fff 72%);
}

.op-shortcode-card__text {
	flex: 1 1 220px;
	min-width: 0;
}

.op-shortcode-card__title {
	display: block;
	margin: 0 0 0.2rem;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--op-ink, #1a2744);
}

.op-shortcode-card__desc {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--op-muted);
}

.op-shortcode-card__code {
	display: inline-block;
	padding: 0.45rem 0.7rem;
	border-radius: 8px;
	background: #1a2744;
	color: #f6e7d4;
	font-size: 12.5px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 0.01em;
	user-select: all;
	max-width: min(100%, 28rem);
	overflow-wrap: anywhere;
}

.op-share-card__actions {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	flex: 0 0 auto;
}

.op-sa-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1rem;
}

.op-sa-card {
	background: #fff;
	border: 1px solid var(--op-line, #d8dee8);
	border-radius: 12px;
	padding: 1rem 1.1rem;
}

.op-sa-card__top {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	align-items: flex-start;
}

.op-sa-card__name {
	flex: 1;
	min-width: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--op-ink, #1a2744);
	overflow-wrap: anywhere;
}

.op-sa-card__meta {
	color: var(--op-muted);
	margin: 0.35rem 0 0.85rem;
	font-size: 12px;
}

.op-sa-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
}

.op-sa-badge {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 22px;
	min-width: 3.4rem;
	padding: 0 0.55rem;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	border-radius: 999px;
	white-space: nowrap;
}

.op-sa-badge.is-ready {
	background: #dcfce7;
	color: #166534;
}

.op-sa-badge.is-draft {
	background: #fef3c7;
	color: #92400e;
}

.op-sa-form__h {
	margin: 1.25rem 0 0.65rem;
	font-size: 1rem;
	color: var(--op-ink, #1a2744);
}

.op-sa-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.op-sa-notice {
	margin: 0 0 1rem;
	padding: 0.75rem 0.9rem;
	border-radius: 10px;
	background: #fff7ed;
	color: #9a3412;
	font-size: 13px;
	line-height: 1.45;
}

.op-sa-notice.is-ok {
	background: #ecfdf5;
	color: #166534;
}

.op-sa-test-msg {
	margin: 0.75rem 0 0;
	font-size: 0.9rem;
}

.op-sa-test-msg.is-ok {
	color: #067647;
}

.op-sa-test-msg.is-error {
	color: var(--op-warn, #b42318);
}

body.op-front-page:has(.op-front--contact) {
	overflow: hidden;
}

.op-front--contact {
	height: 100vh;
	min-height: 100vh;
	max-height: 100vh;
	overflow: hidden;
}

.admin-bar .op-front--contact {
	height: calc(100vh - 32px);
	min-height: calc(100vh - 32px);
	max-height: calc(100vh - 32px);
}

.op-front--contact .op-auth-aside {
	padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3.2vw, 2.75rem);
	justify-content: center;
}

.op-front--contact .op-auth-aside__title {
	margin: 1rem 0 0.6rem;
	font-size: clamp(1.55rem, 2.6vw, 2.15rem);
	max-width: 16ch;
}

.op-front--contact .op-auth-aside__lede {
	margin: 0 0 1rem;
	font-size: 0.95rem;
}

.op-front--contact .op-auth-aside__list {
	gap: 0.45rem;
}

.op-front--contact .op-auth-aside__list li {
	padding: 0.55rem 0.8rem;
	font-size: 0.88rem;
}

.op-front--contact .op-auth-main {
	padding: 1.25rem 1.5rem;
	align-items: center;
}

.op-front--contact .op-auth-card--contact {
	width: min(100%, 36rem);
	max-width: 36rem;
	padding: 1.35rem 1.5rem 1.45rem;
	border-radius: 1.2rem;
}

.op-front--contact .op-auth-card__brand {
	margin: 0 0 0.35rem;
	font-size: 0.95rem;
}

.op-front--contact .op-front-auth__title {
	margin: 0 0 0.25rem;
	font-size: 1.45rem;
}

.op-front--contact .op-front-auth__hint {
	margin: 0 0 0.9rem;
	font-size: 0.88rem;
}

.op-front--contact .op-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.55rem 0.75rem;
}

.op-front--contact .op-contact-grid__full {
	grid-column: 1 / -1;
}

.op-front--contact .op-front-field {
	margin-bottom: 0;
	gap: 0.22rem;
	font-size: 0.8rem;
}

.op-front--contact .op-front-field input,
.op-front--contact .op-front-field textarea {
	padding: 0.5rem 0.7rem;
	border-radius: 0.6rem;
	font-size: 0.9rem;
}

.op-front--contact .op-front-field textarea {
	min-height: 3.1rem;
	resize: none;
}

.op-front--contact .op-front-btn--block {
	margin-top: 0.85rem;
	padding: 0.7rem 1rem;
}

.op-front--contact .op-pcf__submit,
.op-front--contact .op-front-btn--solid.op-pcf__submit {
	background: #1a2744 !important;
	color: #fff !important;
	border-color: transparent;
}

.op-front--contact .op-pcf__submit-label {
	color: #fff !important;
	opacity: 1;
	visibility: visible;
}

.op-front--contact .op-pcf__feedback {
	margin: 0.55rem 0 0;
	font-size: 0.85rem;
}

.op-front--contact .op-pcf__feedback.is-ok {
	color: #067647;
}

.op-front--contact .op-pcf__feedback.is-error {
	color: var(--op-warn, #b42318);
}

@media (max-width: 960px) {
	body.op-front-page:has(.op-front--contact) {
		overflow: auto;
	}

	.op-front--contact,
	.admin-bar .op-front--contact {
		height: auto;
		min-height: 100vh;
		max-height: none;
		overflow: visible;
	}

	.op-front--contact .op-contact-grid {
		grid-template-columns: 1fr;
	}

	.op-front--contact .op-auth-card--contact {
		width: 100%;
	}
}

.op-toolbar--contacts {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.55rem;
	margin-bottom: 0.75rem;
	flex-wrap: wrap;
}

.op-search--wide {
	flex: 1 1 14rem;
	min-width: min(100%, 14rem);
	max-width: 22rem;
	font-size: 14px;
}

.op-filter {
	height: 38px;
	min-width: 9.5rem;
	max-width: 14rem;
	padding: 0 0.65rem;
	border: 1px solid var(--op-line);
	border-radius: 8px;
	background: #fff;
	color: var(--op-ink);
	font-size: 13px;
}

.op-contacts-panel {
	padding: 0.25rem 0.75rem 0.5rem;
}

.op-contacts-table {
	display: grid;
	gap: 0;
}

.op-contacts-head,
.op-contacts-row {
	display: grid;
	grid-template-columns: 1.3fr 1.4fr 1fr 1.1fr 0.75fr 0.95fr;
	gap: 0.55rem;
	align-items: center;
	padding: 0.5rem 0.25rem;
	border-bottom: 1px solid var(--op-line);
	font-size: 13px;
}

.op-contacts-head--admin,
.op-contacts-row--admin {
	grid-template-columns: 1.1fr 1.2fr 0.85fr 0.85fr 1.1fr 0.7fr 0.85fr;
}

.op-contacts-head {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--op-muted);
	border-bottom-color: rgba(26, 39, 68, 0.14);
}

.op-contacts-row:last-child {
	border-bottom: 0;
}

.op-contacts-name a {
	font-weight: 650;
	color: var(--op-navy);
	text-decoration: none;
	font-size: 13px;
}

.op-contacts-name a:hover {
	text-decoration: underline;
}

.op-contacts-email,
.op-contacts-company,
.op-contacts-owner {
	color: var(--op-muted);
	word-break: break-word;
	font-size: 12px;
}

.op-contacts-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-size: 12px;
}

.op-contacts-actions a,
.op-contacts-actions button {
	font-weight: 600;
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: 12px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	color: var(--op-navy);
}

.op-contacts-actions a:hover,
.op-contacts-actions button:hover {
	text-decoration: underline;
}

.op-contacts-actions .op-link-ok,
.op-link-ok {
	color: #0f766e;
}

.op-contacts-actions .op-link-info,
.op-link-info {
	color: #1d4ed8;
}

.op-contacts-actions .op-link-warn,
.op-link-warn {
	color: #b45309;
}

.op-contacts-actions .op-link-muted,
.op-link-muted {
	color: #64748b;
}

.op-contacts-actions .op-link-dnc,
.op-link-dnc {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	color: #9a3412;
}

.op-dnc-done {
	cursor: default;
}

.op-contacts-actions .op-link-dnc.is-disabled,
.op-link-dnc.is-disabled,
.op-front-btn--dnc.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.op-front-btn--dnc {
	color: #9a3412;
	border-color: rgba(154, 52, 18, 0.28);
}

html.op-theme-dark .op-contacts-actions .op-link-dnc,
html.op-theme-dark .op-link-dnc,
html.op-theme-dark .op-front-btn--dnc {
	color: #fdba74;
}

.op-contacts-actions .op-link-danger,
.op-link-danger,
.op-front-btn--danger {
	color: #b42318;
	background: transparent;
	border: 0;
	padding: 0;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.op-front-btn--danger {
	border: 1px solid rgba(180, 35, 24, 0.35);
	padding: 0.45rem 0.8rem;
	border-radius: 10px;
	background: #fff;
	font-size: 13px;
}

.op-tag-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-top: 0.35rem;
}

.op-tag {
	display: inline-flex;
	padding: 0.1rem 0.4rem;
	border-radius: 999px;
	background: rgba(26, 39, 68, 0.07);
	color: var(--op-ink);
	font-size: 11px;
	font-weight: 600;
}

.op-tag--camp {
	background: rgba(26, 39, 68, 0.08);
	color: var(--op-navy);
	border: 1px solid rgba(26, 39, 68, 0.12);
}

.op-tag--camp-unsub {
	background: rgba(180, 35, 24, 0.1);
	color: #9f1239;
	border-color: rgba(180, 35, 24, 0.22);
}

.op-tag__pipe {
	font-weight: 700;
	opacity: 0.9;
}

.op-camp-more__tip em {
	font-style: normal;
	font-weight: 700;
	color: #fecaca;
}

.op-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem 0.9rem;
}

.op-field {
	display: grid;
	gap: 0.28rem;
	font-size: 13px;
	font-weight: 600;
	color: var(--op-ink);
}

.op-field--full {
	grid-column: 1 / -1;
}

.op-field input,
.op-field select,
.op-field textarea {
	font: inherit;
	font-size: 14px;
	font-weight: 450;
	padding: 0.65rem 0.8rem;
	border-radius: 12px;
	border: 1px solid var(--op-line);
	background: #fff;
	color: var(--op-ink);
	width: 100%;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.op-field input:focus,
.op-field select:focus,
.op-field textarea:focus {
	outline: none;
	border-color: rgba(196, 120, 42, 0.55);
	box-shadow: 0 0 0 3px rgba(196, 120, 42, 0.16);
}

.op-field input:disabled,
.op-field input[readonly],
.op-field select:disabled,
.op-field textarea:disabled {
	background: #f3f5f9;
	color: rgba(18, 24, 38, 0.72);
	cursor: not-allowed;
	border-color: rgba(26, 39, 68, 0.08);
	box-shadow: none;
}

.op-profile-form .op-field-hint {
	margin: -0.15rem 0 0;
}

.op-field-hint {
	font-weight: 450;
	font-size: 12px;
	color: var(--op-muted);
}

.op-audience-help {
	margin: 0 0 0.7rem;
	padding: 0.55rem 0.8rem;
	border: 1px solid var(--op-line);
	border-radius: 12px;
	background: rgba(26, 39, 68, 0.03);
}

.op-audience-help p {
	margin: 0 0 0.45rem;
	font-size: 13px;
	line-height: 1.5;
	color: var(--op-ink);
}

.op-audience-help p:last-child {
	margin-bottom: 0;
	color: var(--op-muted);
}

.op-aud-pick {
	margin: 0 0 0.85rem;
}

.op-app-panel > .op-audience-help {
	margin-top: 0.45rem;
}

.op-app-panel > .op-aud-pick,
.op-app-panel .op-aud-pick:last-child {
	margin-bottom: 0;
}

.op-aud-pick > .op-field {
	margin: 0;
}

.op-aud-filters {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 0.55rem 0.75rem;
	margin: 0 0 0.75rem;
}

.op-aud-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0.85rem;
	align-items: stretch;
	margin-top: 0;
}

.op-aud-col {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--op-line);
	border-radius: 14px;
	background: #fff;
	min-height: 220px;
	overflow: hidden;
}

.op-aud-col__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.55rem 0.85rem;
	border-bottom: 1px solid var(--op-line);
	background: rgba(26, 39, 68, 0.03);
}

.op-aud-col__head h3 {
	margin: 0;
	font-size: 14px;
	font-weight: 650;
	line-height: 1.3;
}

.op-aud-col__head .op-muted {
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 600;
}

.op-aud-col__body {
	flex: 1;
	max-height: 380px;
	overflow: auto;
}

.op-aud-col__body .op-muted {
	padding: 1.2rem 1.15rem 1.3rem;
	line-height: 1.5;
}

.op-aud-people {
	margin: 0;
	padding: 0.2rem 0;
}

.op-aud-people.op-app-list li,
.op-aud-person {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.15rem;
}

.op-aud-person:hover {
	background: rgba(26, 39, 68, 0.03);
}

.op-aud-person__info {
	min-width: 0;
	flex: 1;
}

.op-aud-person__info strong,
.op-aud-person__info a {
	display: block;
	margin: 0 0 0.2rem;
	font-size: 14px;
	font-weight: 650;
	line-height: 1.35;
	color: inherit;
	text-decoration: none;
}

.op-aud-person__info a:hover {
	text-decoration: underline;
}

.op-aud-person .op-row-meta {
	margin: 0;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.op-aud-person__action {
	flex-shrink: 0;
	align-self: center;
	white-space: nowrap;
}

.op-aud-person .op-front-btn--sm {
	min-width: 4.4rem;
	justify-content: center;
}

.op-aud-person .op-link-danger {
	padding: 0.35rem 0.15rem;
}

.op-aud-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 0.5rem;
}

.op-aud-chip {
	display: inline-block;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: rgba(15, 118, 110, 0.1);
	color: #0f766e;
	font-size: 11px;
	font-weight: 650;
	line-height: 1.3;
}

.op-aud-chip--tag {
	background: rgba(26, 39, 68, 0.08);
	color: #334155;
}

.op-aud-chip--unsub {
	background: #fee2e2;
	color: #b91c1c;
}

@media (max-width: 800px) {
	.op-aud-split,
	.op-aud-filters {
		grid-template-columns: 1fr;
	}
}

html.op-theme-dark .op-aud-col {
	background: #151b27;
	border-color: #2b3548;
}

html.op-theme-dark .op-aud-col__head {
	background: #10151f;
	border-bottom-color: #2b3548;
}

html.op-theme-dark .op-aud-chip--tag {
	background: #243044;
	color: #d5deeb;
}

html.op-theme-dark .op-aud-person:hover {
	background: rgba(255, 255, 255, 0.04);
}

.op-form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.55rem;
	margin-top: 1rem;
	flex-wrap: wrap;
}

.op-form-error {
	margin: 0.75rem 0 0;
	color: #b42318;
	font-size: 13px;
}

.op-back-link {
	display: inline-flex;
	margin-bottom: 0.7rem;
	font-weight: 600;
	color: var(--op-navy);
	text-decoration: none;
	font-size: 13px;
}

.op-contact-hero {
	display: flex;
	justify-content: space-between;
	gap: 0.85rem;
	align-items: flex-start;
	margin-bottom: 0.85rem;
	flex-wrap: wrap;
}

.op-contact-hero__id {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}

.op-avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--op-navy);
	color: #fff;
	font-weight: 700;
	font-size: 0.8rem;
	flex-shrink: 0;
}

.op-contact-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.op-detail-two {
	display: grid;
	grid-template-columns: 1.2fr 0.9fr;
	gap: 0.85rem;
}

.op-detail-stack {
	display: grid;
	gap: 0.85rem;
	align-content: start;
}

.op-detail-grid--sm,
.op-detail-grid.op-detail-grid--stack {
	grid-template-columns: 1fr;
	text-align: left;
}

.op-detail-grid .op-muted {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
}

.op-detail-grid strong {
	font-size: 14px;
	font-weight: 600;
}

.op-research-card,
.op-research-block {
	padding: 0.75rem 0.85rem;
	border-radius: 12px;
	background: rgba(26, 39, 68, 0.03);
	border: 1px solid var(--op-line);
	margin-bottom: 0.65rem;
}

.op-research-card h4,
.op-research-block h4 {
	margin: 0 0 0.35rem;
	font-size: 13px;
	font-weight: 700;
}

.op-research-card p,
.op-research-block li {
	margin: 0;
	color: var(--op-ink);
	line-height: 1.5;
	font-size: 13px;
}

.op-research-block ul {
	margin: 0;
	padding-left: 1.05rem;
}

.op-research-hooks {
	display: grid;
	gap: 0.35rem;
}

.op-hook {
	display: grid;
	gap: 0.12rem;
	padding: 0.45rem 0.6rem;
	border-radius: 8px;
	background: rgba(196, 120, 42, 0.08);
	font-size: 12px;
}

.op-hook span {
	color: var(--op-muted);
}

.op-app-badge {
	font-size: 11px;
	padding: 0.18rem 0.5rem;
}

.op-empty h3 {
	font-family: var(--op-font-body);
	font-weight: 700;
	font-size: 15px;
}

.op-empty p {
	font-size: 13px;
}

.op-select {
	font: inherit;
	font-size: 13px;
	padding: 0.45rem 0.65rem;
	border-radius: 10px;
	border: 1px solid var(--op-line);
	background: #fff;
}

.op-camp-head,
.op-camp-row {
	grid-template-columns: 1.5fr 0.7fr 0.55fr 0.7fr 0.55fr 1.4fr !important;
}

.op-camp-head--admin,
.op-camp-row--admin {
	grid-template-columns: 1.3fr 0.65fr 0.5fr 0.65fr 0.5fr 1fr 1.2fr !important;
}

.op-link-ok,
.op-link-warn,
.op-link-info,
.op-link-muted {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
}

.op-form-section {
	margin-bottom: 1.15rem;
	padding: 1rem;
	border: 1px solid var(--op-line);
	border-radius: 12px;
	background: var(--op-paper);
}

.op-form-section h3 {
	margin: 0 0 0.75rem;
	font-size: 14px;
	font-weight: 700;
}

.op-mode-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.65rem;
}

.op-mode-card {
	display: grid;
	gap: 0.35rem;
	padding: 0.75rem;
	border: 1px solid var(--op-line);
	border-radius: 10px;
	cursor: pointer;
	font-size: 12px;
	color: var(--op-muted);
}

.op-mode-card input {
	position: absolute;
	opacity: 0;
}

.op-mode-card strong {
	color: var(--op-ink);
	font-size: 13px;
}

.op-mode-card.is-active {
	border-color: var(--op-navy);
	background: rgba(26, 39, 68, 0.04);
}

.op-mode-card.is-locked {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

.op-mode-card__unlock {
	display: block;
	margin-top: 0.2rem;
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	color: #1d4ed8;
}

.op-day-row,
.op-check {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	align-items: center;
	font-weight: 500;
	font-size: 13px;
}

.op-unsub-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-weight: 600;
	cursor: pointer;
}

.op-unsub-toggle input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--op-line);
	border-radius: 4px;
	background: #fff;
	accent-color: var(--op-navy);
	flex-shrink: 0;
}

.op-chip.is-on {
	background: var(--op-navy);
	color: #fff !important;
}

.op-lists-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
}

.op-list-card {
	position: relative;
	padding: 1.15rem 2.4rem 1.2rem 1.2rem;
	border-radius: 14px;
	border: 1px solid #e2e8f0;
	background: #fff;
}

.op-list-card h3 {
	margin: 0 0 0.35rem;
	font-size: 16px;
	padding-right: 0.25rem;
}

.op-list-card__del {
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #b42318;
	cursor: pointer;
}

.op-list-card__del:hover,
.op-list-card__del:focus {
	color: #912018;
	background: rgba(180, 35, 24, 0.08);
}

html.op-theme-dark .op-list-card__del {
	color: #f87171;
}

html.op-theme-dark .op-list-card__del:hover,
html.op-theme-dark .op-list-card__del:focus {
	color: #fca5a5;
	background: rgba(248, 113, 113, 0.12);
}

.op-list-card__owner {
	margin: 0 0 0.35rem;
	color: var(--op-muted);
	font-size: 12px;
	line-height: 1.4;
	word-break: break-word;
}

.op-list-card__count {
	margin: 0.35rem 0 0.85rem;
	font-size: 13px;
	font-weight: 650;
}

.op-list-card__actions {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.4rem;
	align-items: center;
}

.op-list-card__actions .op-front-btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

.op-list-add-results {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #fff;
}

.op-list-add-results li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 0.85rem;
	border-top: 1px solid #eef2f7;
}

.op-list-add-results li:first-child {
	border-top: 0;
}

.op-list-add-results em {
	font-style: normal;
	color: #64748b;
	margin-left: 0.35rem;
	font-size: 12px;
}

html.op-theme-dark .op-list-card,
html.op-theme-dark .op-list-add-results {
	background: #1e2433;
	border-color: #2c3548;
}

.op-list-bar {
	margin: 0 0 1rem;
	padding: 0.95rem 1.1rem;
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	background: #fff;
}

.op-list-bar__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.75rem;
	margin-bottom: 0.65rem;
}

.op-list-bar__head strong {
	font-size: 14px;
}

.op-list-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.55rem;
}

.op-list-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.28rem 0.7rem;
	border-radius: 999px;
	border: 1px solid #dbe3ee;
	background: #f8fafc;
	color: #334155;
	font-size: 12px;
	font-weight: 650;
	cursor: pointer;
}

.op-list-chip em {
	font-style: normal;
	opacity: 0.65;
	font-weight: 600;
}

.op-list-chip.is-on {
	background: var(--op-navy);
	border-color: var(--op-navy);
	color: #fff;
}

.op-list-bar__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.15rem;
}

.op-list-manage {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid #e2e8f0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem 0.75rem;
	align-items: flex-end;
}

.op-list-manage .op-field {
	flex: 1 1 220px;
	margin: 0;
}

.op-list-manage__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	padding: 0.35rem 0;
	font-size: 13px;
}

html.op-theme-dark .op-list-bar,
html.op-theme-dark .op-list-manage {
	background: #1e2433;
	border-color: #2c3548;
}

html.op-theme-dark .op-list-chip {
	background: #161b27;
	border-color: #2c3548;
	color: #dbe3ee;
}

html.op-theme-dark .op-list-chip.is-on {
	background: var(--op-navy);
	border-color: var(--op-navy);
	color: #fff;
}

.op-bulk-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 0.65rem;
}

.op-bulk-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.op-contacts-head--enroll,
.op-contacts-row--enroll {
	grid-template-columns: 2rem 1.15fr 1.25fr 0.9fr 1.1fr 0.7fr 1.15fr !important;
}

.op-list-members .op-contacts-head--enroll,
.op-list-members .op-contacts-row--enroll,
#op-list-members.op-contacts-table .op-contacts-head--enroll,
#op-list-members.op-contacts-table .op-contacts-row--enroll {
	grid-template-columns: 1.2fr 1.3fr 1fr 0.7fr !important;
}

.op-contacts-head--admin-enroll,
.op-contacts-row--admin-enroll {
	grid-template-columns: 2rem 1.05fr 1.15fr 0.8fr 1fr 0.95fr 0.65fr 1.1fr !important;
}

.op-camp-more {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
	cursor: default;
}

.op-camp-more__tip {
	display: none;
	position: absolute;
	left: 0;
	bottom: calc(100% + 6px);
	z-index: 20;
	min-width: 10rem;
	max-width: 16rem;
	padding: 0.45rem 0.55rem;
	border-radius: 8px;
	background: var(--op-navy);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.35;
	box-shadow: 0 10px 24px rgba(18, 24, 38, 0.22);
	pointer-events: none;
}

.op-camp-more__tip span {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.op-camp-more__tip::after {
	content: "";
	position: absolute;
	left: 0.7rem;
	top: 100%;
	border: 5px solid transparent;
	border-top-color: var(--op-navy);
}

.op-camp-more:hover .op-camp-more__tip,
.op-camp-more:focus .op-camp-more__tip,
.op-camp-more:focus-within .op-camp-more__tip {
	display: grid;
	gap: 0.2rem;
}

.op-tag--danger {
	background: rgba(180, 35, 24, 0.12);
	color: #b42318;
}

.op-audience-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	margin: 0 0 0.65rem;
}

.op-audience-stat {
	padding: 0.7rem 0.85rem;
	border-radius: 10px;
	background: rgba(26, 39, 68, 0.04);
	border: 1px solid var(--op-line);
	display: grid;
	gap: 0.2rem;
}

.op-audience-stat span {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--op-muted);
}

.op-audience-stat strong {
	font-size: 1.25rem;
}

.op-aud-col__head .op-front-btn--sm {
	flex-shrink: 0;
}

.op-enrolled-box {
	margin-top: 1rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--op-line);
}

.op-enrolled-box h3 {
	margin: 0;
	font-size: 14px;
}

.op-modal {
	position: fixed;
	inset: 0;
	z-index: 80;
	background: rgba(18, 24, 38, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.op-modal__card {
	width: min(420px, 100%);
	background: #fff;
	border-radius: 14px;
	padding: 1.15rem 1.25rem;
	box-shadow: 0 24px 48px rgba(18, 24, 38, 0.2);
}

.op-modal__card h3 {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
}

.op-modal__card .op-field {
	margin: 0.85rem 0;
}

.op-modal__card--import {
	width: min(560px, 100%);
}

.op-import-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.85rem;
}

.op-import-head h3 {
	margin: 0 0 0.25rem;
}

.op-import-head .op-muted {
	margin: 0;
}

.op-import-map {
	display: grid;
	gap: 0.6rem;
	margin: 0 0 0.9rem;
	padding: 0.75rem 0.85rem;
	border-radius: 10px;
	background: #f1f5f9;
}

.op-import-map[hidden] {
	display: none !important;
}

.op-import-map__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.55rem;
	align-items: flex-start;
}

.op-import-map__label {
	flex: 0 0 4.5rem;
	padding-top: 0.15rem;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--op-muted);
}

.op-import-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	flex: 1 1 12rem;
}

.op-import-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.18rem 0.5rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--op-line);
	font-size: 11.5px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.op-import-chip--req {
	background: #ccfbf1;
	border-color: #99f6e4;
	color: #115e59;
	font-weight: 700;
}

.op-import-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 9.5rem;
	margin: 0 0 0.85rem;
	padding: 1.25rem 1rem;
	border: 1.5px dashed #cbd5e1;
	border-radius: 12px;
	background: #f8fafc;
	cursor: pointer;
	text-align: center;
}

.op-import-drop:hover,
.op-import-drop.is-over {
	border-color: var(--op-navy);
	background: rgba(26, 39, 68, 0.04);
}

.op-import-drop.is-busy {
	pointer-events: none;
	opacity: 0.75;
}

.op-import-drop__icon {
	width: 2.6rem;
	height: 2.6rem;
	margin-bottom: 0.75rem;
	border-radius: 999px;
	background: #e2e8f0;
	color: var(--op-navy);
	font-size: 1.15rem;
	line-height: 2.6rem;
	font-weight: 700;
}

.op-import-drop__title {
	margin: 0 0 0.3rem;
	font-size: 15px;
	font-weight: 650;
	color: var(--op-ink);
}

.op-import-drop__hint {
	margin: 0;
	font-size: 13px;
	color: var(--op-muted);
}

.op-import-drop__status {
	margin: 0.85rem 0 0;
	font-size: 13px;
}

.op-import-drop__status.is-ok {
	color: #067647;
}

.op-import-drop__status.is-err {
	color: var(--op-warn, #b42318);
}

.op-import-help {
	margin: 0 0 0.5rem;
}

.op-import-help__body {
	font-size: 13px;
	line-height: 1.55;
	color: var(--op-muted);
}

.op-import-help__body code {
	font-size: 12px;
}


@media (max-width: 960px) {
	.op-mode-grid {
		grid-template-columns: 1fr;
	}

	.op-contacts-head {
		display: none;
	}

	.op-contacts-row,
	.op-contacts-row--admin,
	.op-camp-row,
	.op-camp-row--admin {
		grid-template-columns: 1fr !important;
		gap: 0.3rem;
		padding: 0.8rem 0.2rem;
	}

	.op-form-grid,
	.op-detail-two {
		grid-template-columns: 1fr;
	}
}




/* Auto-dismiss toasts (replace browser alerts) */
.op-toast-host {
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
	max-width: min(22rem, calc(100vw - 2rem));
	pointer-events: none;
}

.op-toast {
	pointer-events: auto;
	width: 100%;
	padding: 0.75rem 0.95rem;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	box-shadow: 0 12px 28px rgba(18, 24, 38, 0.18);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.op-toast.is-in {
	opacity: 1;
	transform: translateY(0);
}

.op-toast.is-out {
	opacity: 0;
	transform: translateY(-6px);
}

.op-toast--success {
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
}

.op-toast--error {
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.op-toast--info {
	background: #eff6ff;
	color: #1e40af;
	border: 1px solid #bfdbfe;
}

/* Email Review */
.op-draft-box {
	margin-top: 1rem;
	padding: 0.85rem 1rem;
	border-radius: 12px;
	border: 1px solid rgba(26, 39, 68, 0.12);
	background: rgba(26, 39, 68, 0.04);
}

.op-draft-box__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.45rem;
}

.op-em-table {
	display: grid;
	gap: 0;
	overflow-x: auto;
}

.op-em-head,
.op-em-row {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 0.95fr) minmax(0, 1.15fr);
	gap: 0.55rem;
	align-items: center;
	padding: 0.65rem 0.35rem;
	border-bottom: 1px solid var(--op-line);
	font-size: 12.5px;
}

.op-em-head span,
.op-em-row > * {
	min-width: 0;
}

.op-em-contact-cell,
.op-em-campaign-cell {
	display: flex;
	flex-direction: column;
	gap: 0.12rem;
	min-width: 0;
}

.op-em-contact-cell strong,
.op-em-contact-cell .op-muted,
.op-em-campaign-cell {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.op-em-campaign-cell .op-em-follow {
	white-space: nowrap;
}

.op-em-head {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--op-muted);
	border-bottom-width: 2px;
	white-space: nowrap;
}

.op-em-row.is-unsubscribed > :nth-child(1),
.op-em-row.is-unsubscribed > :nth-child(1) .op-muted,
.op-em-row.is-unsubscribed > :nth-child(2) {
	color: #b91c1c;
}

.op-em-label-select.is-dnc,
.op-em-label-select:disabled {
	opacity: 0.78;
	cursor: not-allowed;
}

.op-em-send-cell {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
}

.op-em-status--draft {
	background: #e2e8f0;
	color: #475569;
}

.op-em-status--queued {
	background: #dbeafe;
	color: #1d4ed8;
}

.op-em-status--sent,
.op-em-status--delivered {
	background: #dcfce7;
	color: #15803d;
}

.op-em-status--failed,
.op-em-status--bounced,
.op-em-status--rejected {
	background: #fee2e2;
	color: #b91c1c;
}

.op-em-send-reason,
.op-em-follow {
	display: block;
	margin-top: 0.15rem;
	font-size: 11px;
	font-weight: 500;
	color: var(--op-muted);
	line-height: 1.3;
}

.op-em-table-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin: 0 0 0.65rem;
}

.op-em-table-bar #op-em-count {
	margin: 0;
}

.op-em-actions {
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 0.2rem;
}

.op-em-action-sep {
	margin: 0 0.2rem;
	color: #cbd5e1;
	font-weight: 400;
}

.op-pager {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 0.45rem;
	padding: 0.8rem 0.35rem 0.2rem;
	margin-top: 0.15rem;
	border-top: 1px solid var(--op-line);
}

.op-pager__pages {
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.op-pager__btn {
	min-width: 32px;
	height: 32px;
	padding: 0 0.65rem;
	border: 1px solid var(--op-line);
	border-radius: 8px;
	background: #fff;
	color: var(--op-navy);
	font-size: 12.5px;
	font-weight: 650;
	line-height: 1;
	cursor: pointer;
}

.op-pager__btn:hover:not(:disabled):not(.is-active) {
	border-color: var(--op-navy);
}

.op-pager__btn.is-active {
	background: var(--op-navy);
	border-color: var(--op-navy);
	color: #fff;
	cursor: default;
}

.op-pager__btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.op-pager__gap {
	padding: 0 0.15rem;
	color: var(--op-muted);
	font-size: 12.5px;
}

.op-contacts-actions .op-link-muted,
.op-link-muted {
	color: #64748b;
}

.op-em-alert {
	margin: 0 0 0.85rem;
	padding: 0.65rem 0.85rem;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.op-em-alert--warn {
	background: #fef2f2;
	color: #9f1239;
	border: 1px solid #fecaca;
}

.op-em-alert--warn a {
	color: #9f1239;
	font-weight: 700;
	text-decoration: underline;
}

.op-em-actions .is-disabled,
.op-em-actions button:disabled,
.aio-em-action-link.is-disabled,
#op-em-bulk-approve:disabled,
#op-em-approve:disabled,
#op-em-save-approve:disabled,
#op-em-reject:disabled {
	opacity: 0.45;
	pointer-events: none;
	cursor: not-allowed;
}

.op-em-inbox-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.op-em-inbox-link.has-replies {
	font-weight: 700;
}

.op-em-reply-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 0.28rem;
	border-radius: 999px;
	background: #dc2626;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
}

.op-em-read-body {
	white-space: normal;
	font-family: inherit;
	font-size: 13.5px;
	line-height: 1.5;
	margin: 0;
	padding: 0.75rem;
	background: var(--op-cream);
	border-radius: 10px;
	border: 1px solid var(--op-line);
}

.op-em-read-body a {
	color: #0f766e;
}

.op-em-thread {
	display: grid;
	gap: 0.75rem;
}

.op-em-msg {
	padding: 0.75rem 0.9rem;
	border-radius: 12px;
	border: 1px solid var(--op-line);
	background: var(--op-paper);
}

.op-em-msg header {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.45rem;
	font-size: 12px;
	font-weight: 700;
}

.op-em-msg__body {
	font-size: 13.5px;
	line-height: 1.5;
	white-space: pre-wrap;
}

.op-em-msg__body a {
	color: #0f766e;
	text-decoration: underline;
}

.op-em-msg--outbound,
.op-em-msg--our_reply {
	background: rgba(26, 39, 68, 0.04);
}

.op-em-compose {
	margin-top: 0.85rem;
}

.op-em-compose .op-field {
	margin-bottom: 0.65rem;
}

.op-em-compose textarea {
	min-height: 12rem;
	width: 100%;
	font: inherit;
	font-size: 13.5px;
	line-height: 1.5;
}

.op-em-schedule-line {
	margin: 0 0 0.75rem;
	padding: 0.55rem 0.75rem;
	border-radius: 8px;
	background: rgba(15, 118, 110, 0.1);
	border: 1px solid rgba(15, 118, 110, 0.28);
	color: #0f766e;
	font-size: 13px;
	font-weight: 700;
}

.op-email-detail {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(14rem, 0.8fr);
	gap: 1rem;
	align-items: start;
}

@media (max-width: 900px) {
	.op-email-detail {
		grid-template-columns: 1fr;
	}

	.op-em-head,
	.op-em-row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.op-em-head span:nth-child(n + 3),
	.op-em-row > :nth-child(n + 3) {
		display: none;
	}

	.op-em-row > :last-child {
		display: block;
		grid-column: 1 / -1;
	}
}

/* -- Dark / light theme (front app) -- */
html.op-theme-dark body.op-front-page,
body.op-front-page.op-theme-dark {
	--op-ink: #e8edf7;
	--op-navy: #d7e0f0;
	--op-navy-deep: #f3f6fb;
	--op-accent: #e09a45;
	--op-accent-hot: #f0a84f;
	--op-accent-soft: rgba(224, 154, 69, 0.18);
	--op-sky: #243044;
	--op-mist: #2a364c;
	--op-paper: #171e2b;
	--op-cream: #0f141d;
	--op-line: rgba(232, 237, 247, 0.12);
	--op-muted: rgba(232, 237, 247, 0.62);
	--op-warn: #f87171;
	--op-ok: #34d399;
	--op-info: #60a5fa;
	--op-forest: var(--op-navy);
	--op-teal: var(--op-accent);
	--op-mint: var(--op-mist);
	--op-sand: #3a2e22;
	--op-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
	--op-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.28);
	background: var(--op-cream);
	color: var(--op-ink);
	color-scheme: dark;
}

html.op-theme-dark .op-app {
	background:
		radial-gradient(ellipse 55% 42% at 100% -5%, rgba(224, 154, 69, 0.12), transparent 58%),
		radial-gradient(ellipse 45% 36% at 0% 100%, rgba(96, 165, 250, 0.08), transparent 55%),
		var(--op-cream);
}

html.op-theme-dark .op-app-sidebar {
	background: linear-gradient(180deg, #151c28 0%, #121824 100%) !important;
	border-right-color: var(--op-line);
	box-shadow: none;
}

html.op-theme-dark .op-app-topbar {
	background: #151c28;
	border-bottom-color: var(--op-line);
	box-shadow: none;
}

html.op-theme-dark .op-app-nav__item {
	color: var(--op-ink) !important;
}

html.op-theme-dark .op-app-nav__item:hover {
	background: rgba(224, 154, 69, 0.08);
}

html.op-theme-dark .op-app-nav__item.is-active {
	background: rgba(224, 154, 69, 0.12);
	border-color: rgba(224, 154, 69, 0.18);
	box-shadow: inset 3px 0 0 var(--op-accent);
}

html.op-theme-dark .op-app-nav__icon {
	background: #243044;
	color: #d7e0f0;
}

html.op-theme-dark .op-app-nav__item.is-active .op-app-nav__icon {
	background: linear-gradient(145deg, #c4782a, #e09a45);
	color: #111827;
}

html.op-theme-dark .op-front-brand,
html.op-theme-dark .op-brand-text strong,
html.op-theme-dark .op-app-title,
html.op-theme-dark .op-app-topbar__welcome strong {
	color: #f3f6fb !important;
}

html.op-theme-dark .op-app-panel,
html.op-theme-dark .op-app-kpi,
html.op-theme-dark .op-quick-card {
	background: var(--op-paper);
	border-color: var(--op-line);
	box-shadow: var(--op-shadow-sm);
}

html.op-theme-dark .op-quick-card {
	color: var(--op-ink) !important;
}

html.op-theme-dark .op-quick-card--primary {
	background: linear-gradient(135deg, #243556 0%, #1a2744 100%);
	color: #fff !important;
}

html.op-theme-dark .op-icon-btn {
	background: #1c2433;
	border-color: var(--op-line);
	color: #e8edf7;
}

html.op-theme-dark .op-front-btn--ghost {
	background: #1c2433;
	border-color: var(--op-line);
	color: #e8edf7 !important;
}

html.op-theme-dark .op-front-btn--solid {
	background: linear-gradient(135deg, #c4782a 0%, #e09a45 100%);
	color: #111827 !important;
	box-shadow: 0 10px 22px rgba(224, 154, 69, 0.25);
}

html.op-theme-dark .op-chip {
	background: #1c2433;
	border-color: var(--op-line);
	color: #e8edf7 !important;
}

html.op-theme-dark .op-chip.is-on,
html.op-theme-dark .op-chip.is-active,
html.op-theme-dark .op-filter.is-active {
	background: linear-gradient(135deg, #c4782a, #e09a45) !important;
	color: #111827 !important;
	border-color: transparent !important;
}

html.op-theme-dark .op-filter {
	background: #1c2433;
	border-color: var(--op-line);
	color: #e8edf7;
}

html.op-theme-dark .op-field input,
html.op-theme-dark .op-field select,
html.op-theme-dark .op-field textarea,
html.op-theme-dark .op-search,
html.op-theme-dark .op-select,
html.op-theme-dark .op-filter {
	background: #121824;
	border-color: var(--op-line);
	color: #e8edf7;
}

html.op-theme-dark .op-modal__card {
	background: #1c2433;
	color: #e8edf7;
}

html.op-theme-dark .op-import-map {
	background: #121824;
}

html.op-theme-dark .op-import-chip {
	background: #1c2433;
	color: #e8edf7;
}

html.op-theme-dark .op-import-drop {
	background: #121824;
	border-color: var(--op-line);
}

html.op-theme-dark .op-import-drop:hover,
html.op-theme-dark .op-import-drop.is-over {
	background: #1c2433;
}

html.op-theme-dark .op-import-drop__icon {
	background: #1c2433;
	color: #e8edf7;
}

html.op-theme-dark .op-field input:disabled,
html.op-theme-dark .op-field input[readonly] {
	background: #0f141d;
	color: rgba(232, 237, 247, 0.55);
}

html.op-theme-dark .op-an-chart-empty,
html.op-theme-dark .op-an-eng__track,
html.op-theme-dark .op-an-cmp__track {
	background: #121824;
}

html.op-theme-dark .op-contacts-table,
html.op-theme-dark .op-app-list li,
html.op-theme-dark .op-em-row,
html.op-theme-dark .op-pager {
	border-color: var(--op-line);
}

html.op-theme-dark .op-pager__btn {
	background: #121824;
	color: var(--op-navy);
}

html.op-theme-dark .op-pager__btn.is-active {
	background: var(--op-accent);
	border-color: var(--op-accent);
	color: #fff;
}

html.op-theme-dark .op-sidebar-backdrop {
	background: rgba(0, 0, 0, 0.55);
}

/* -- Platform users (admin) -- */
.op-users-panel__head {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.85rem 0.35rem 0.65rem;
	border-bottom: 1px solid var(--op-line);
	margin-bottom: 0.15rem;
}

.op-users-panel__head strong {
	font-size: 0.95rem;
	color: var(--op-navy);
}

.op-users-panel__icon {
	display: inline-flex;
	color: var(--op-accent);
}

.op-users-head,
.op-users-row {
	grid-template-columns: 4rem 1.2fr 1.5fr 1fr;
}

a.op-users-row {
	color: inherit;
	text-decoration: none;
	transition: background 0.12s ease;
}

a.op-users-row:hover {
	background: rgba(196, 120, 42, 0.06);
}

.op-users-id {
	color: var(--op-muted);
	font-variant-numeric: tabular-nums;
	font-size: 12px;
}

.op-role-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 650;
	background: var(--op-mist);
	color: var(--op-navy);
	border: 1px solid var(--op-line);
}

.op-users-roles {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	padding: 0.35rem 0;
}

html.op-theme-dark .op-users-panel__head strong {
	color: #f3f6fb;
}

html.op-theme-dark .op-role-pill {
	background: #1c2433;
	color: #e8edf7;
	border-color: var(--op-line);
}

html.op-theme-dark a.op-users-row:hover {
	background: rgba(224, 154, 69, 0.08);
}

@media (max-width: 720px) {
	.op-users-head {
		display: none;
	}

	.op-users-row {
		grid-template-columns: 1fr;
		gap: 0.25rem;
		padding: 0.75rem 0.35rem;
	}
}

.op-plans-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1rem;
}

.op-plans-block {
	margin-bottom: 1rem;
}

.op-plans-block h3 {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
}

.op-plans-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: flex-end;
	margin: 0.85rem 0;
}

.op-plans-form .op-field {
	min-width: 11rem;
	margin: 0;
}

.op-plans-table-wrap {
	width: 100%;
	overflow: auto;
}

.op-plans-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: auto;
	font-size: 0.88rem;
}

.op-plans-table th,
.op-plans-table td {
	padding: 0.45rem 0.7rem;
	border-bottom: 1px solid var(--op-line);
	text-align: left;
	vertical-align: middle;
}

.op-plans-table th {
	color: #64748b;
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 700;
}

.op-plans-table tbody tr:last-child td {
	border-bottom: 0;
}

/* Plan / Max users / Actions stay content-sized so Actions sits on the right. */
.op-plans-table th:last-child,
.op-plans-table td:last-child,
.op-plans-table th:nth-child(2):not(:last-child),
.op-plans-table td:nth-child(2):not(:last-child),
.op-plans-table:has(th:nth-child(4)) th:first-child,
.op-plans-table:has(th:nth-child(4)) td:first-child {
	width: 1%;
	white-space: nowrap;
}

.op-plans-user {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.65rem;
	line-height: 1.25;
}

.op-plans-user strong {
	font-size: 0.88rem;
}

.op-plans-actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.45rem 0.75rem;
	white-space: nowrap;
}

.op-plans-linkcell code {
	display: inline-block;
	max-width: 100%;
	overflow-wrap: anywhere;
	font-size: 0.78rem;
	background: #f8fafc;
	border: 1px solid var(--op-line);
	border-radius: 8px;
	padding: 0.35rem 0.5rem;
}

.op-plans-msg {
	margin: 0 0 0.65rem;
	font-size: 0.85rem;
}

.op-plans-msg.is-ok {
	color: #15803d;
}

.op-plans-msg.is-err {
	color: #b91c1c;
}

html.op-theme-dark .op-plans-linkcell code {
	background: #1c2433;
}

.op-agency-top {
	margin-bottom: 1rem;
}

.op-agency-form {
	display: grid;
	gap: 0.75rem;
	margin: 0.85rem 0 0.5rem;
}

.op-agency-form .op-field {
	margin: 0;
}

#op-agency-seats {
	margin: 0 0 1rem;
}

#op-agency-members-pager {
	margin-top: 0.75rem;
	justify-content: flex-start;
}

.op-agency-copied {
	color: #15803d;
	font-size: 0.82rem;
	font-weight: 600;
}

.op-wl-panel h3 {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
}

.op-em-refine {
	margin-top: 1rem;
	padding: 0.9rem 1rem 0.75rem;
	border: 1px solid var(--op-line, #d8dee8);
	border-radius: 12px;
	background: #f8fafc;
}

.op-em-refine__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.op-em-refine__upgrade {
	font: inherit;
	font-weight: inherit;
	font-style: normal;
	line-height: inherit;
	white-space: nowrap;
	color: inherit;
}

.op-em-refine.is-locked textarea:disabled {
	background: #fff;
	color: var(--op-ink);
	border-color: var(--op-line);
	box-shadow: none;
	opacity: 1;
	-webkit-text-fill-color: inherit;
}

.op-em-refine .op-field {
	margin: 0;
}

.op-em-refine textarea {
	width: 100%;
	min-height: 4.5rem;
	resize: vertical;
	box-sizing: border-box;
}

.op-em-refine__hint {
	margin: 0.45rem 0 0;
	font-size: 0.82rem;
}

html.op-theme-dark .op-em-refine {
	background: #1c2433;
	border-color: var(--op-line);
}

html.op-theme-dark .op-em-refine.is-locked textarea:disabled {
	background: #121824;
	color: #e8edf7;
	border-color: var(--op-line);
	-webkit-text-fill-color: #e8edf7;
}

.op-ar-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
	gap: 0.95rem;
	align-items: start;
}

.op-ar-panel .op-field {
	margin-top: 0.75rem;
}

.op-ar-fields {
	display: grid;
	gap: 0.15rem;
}

.op-ar-fields[hidden] {
	display: none !important;
}

.op-ar-help {
	margin-left: 0.35rem;
	font-size: 12px;
	font-weight: 600;
}

.op-ar-info h2 {
	margin: 0 0 0.75rem;
	font-size: 1rem;
}

.op-ar-steps {
	margin: 0;
	padding-left: 1.15rem;
}

.op-ar-steps li {
	margin: 0 0 0.75rem;
	font-size: 13px;
	line-height: 1.5;
	color: var(--op-muted);
}

.op-ar-steps li:last-child {
	margin-bottom: 0;
}

.op-ar-steps strong {
	color: var(--op-ink, #1a2744);
}

.op-tpl-panel {
	margin: 0 0 1rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--op-line);
	border-radius: 14px;
	background: var(--op-paper);
	box-shadow: var(--op-shadow-sm);
}

.op-tpl-panel[hidden] {
	display: none !important;
}

.op-tpl-panel__head h2 {
	margin: 0 0 0.2rem;
	font-size: 1.05rem;
}

.op-tpl-panel__head p {
	margin: 0 0 0.85rem;
}

.op-tpl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 0.75rem;
}

.op-tpl-card {
	padding: 0.9rem 1rem;
	border: 1px solid var(--op-line);
	border-radius: 12px;
	background: var(--op-cream);
}

.op-tpl-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
}

.op-tpl-card p {
	margin: 0.4rem 0 0.75rem;
	font-size: 13px;
}

.op-tpl-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem;
}

.op-tpl-pill {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 700;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: var(--op-mist);
	color: var(--op-muted);
}

.op-tpl-pill--system {
	background: rgba(15, 118, 110, 0.12);
	color: var(--op-ok);
}

.op-tpl-start {
	margin: 0 0 1rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--op-line);
	border-radius: 12px;
	background: var(--op-paper);
}

.op-tpl-start .op-field {
	margin: 0;
}

html.op-theme-dark .op-tpl-panel,
html.op-theme-dark .op-tpl-start {
	background: #1c2433;
}

html.op-theme-dark .op-tpl-card {
	background: #121824;
}