/* ==========================================================================
   Scriptif — dashboard theme for MedyaAI
   Developed by Mostafa M Naser
   The studio shell: one floating top bar with section tabs that open
   sand panels of numbered tiles. Loaded after medya-ui.css (identity tokens).
   ========================================================================== */

[x-cloak] { display: none !important; }

body.scriptif {
	--navbar-width: 0px;
	--ms-bar-h: 64px;
	--ms-gap: clamp(12px, 1.6vw, 22px);
	--ms-bar-bg: #FFFFFF;
	--ms-panel-bg: #ECE6DA;
	--ms-tile-bg: #FFFFFF;
	--ms-tile-ink: #14201E;
	--ms-tab-ink: #474747;
	background: #F6F3EE !important;
}
body.scriptif.theme-dark {
	--ms-bar-bg: #0F2B27;
	--ms-panel-bg: #12322E;
	--ms-tile-bg: #0F2B27;
	--ms-tile-ink: #EBE5D8;
	--ms-tab-ink: #C9CFC9;
	background: #0A1E1B !important;
}

/* the legacy shell pieces never render in Scriptif, but guard anyway */
body.scriptif .lqd-navbar,
body.scriptif .lqd-navbar-expander { display: none !important; }

/* ---------- Bar ---------- */
.ms-bar {
	position: sticky !important;
	top: 12px;
	z-index: 80;
	margin: 12px var(--ms-gap) 0;
	height: auto !important;
	border: 0 !important;
	border-radius: 22px;
	background: var(--ms-bar-bg) !important;
	box-shadow: 0 0 0 1px var(--mb-line), 0 12px 32px -20px rgba(20, 32, 30, .28);
}
body.theme-dark .ms-bar { box-shadow: 0 0 0 1px rgba(235, 229, 216, .08), 0 18px 40px -24px rgba(0, 0, 0, .7); }
.ms-bar-inner {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: var(--ms-bar-h);
	padding: 0 10px 0 18px;
}
[dir="rtl"] .ms-bar-inner { padding: 0 18px 0 10px; }

.ms-logo { display: inline-flex; align-items: center; flex-shrink: 0; height: 40px; }
.ms-logo a { display: inline-flex; align-items: center; height: 40px; }
.ms-logo img { max-height: 34px !important; height: 34px !important; width: auto !important; }
/* the light logo is a square canvas with the wordmark in its middle band: crop to the band */
.ms-logo img[class~="dark:hidden"] { width: 150px !important; height: 44px !important; max-height: none !important; object-fit: cover; object-position: center; }
@media (max-width: 1023px) { .ms-logo img[class~="dark:hidden"] { width: 128px !important; height: 38px !important; } }
.ms-tab[hidden], .ms-more-group[hidden] { display: none !important; }
.ms-panel-more .ms-more-group { flex: 1 1 320px; min-width: 0; }

/* ---------- Section tabs ---------- */
.ms-tabs {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 2px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	padding-inline-start: 10px;
	border-inline-start: 1px solid var(--mb-line);
}
.ms-tabs::-webkit-scrollbar { display: none; }
.ms-tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: 9999px;
	background: transparent;
	color: var(--ms-tab-ink);
	font: 600 13.5px/1 var(--mb-font-ui);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .18s var(--mb-ease), color .18s var(--mb-ease);
}
:lang(ar) .ms-tab, [dir="rtl"] .ms-tab { font-size: 14.5px; }
.ms-tab:hover { background: var(--mb-bone); color: var(--mb-green); }
body.theme-dark .ms-tab:hover { background: rgba(235, 229, 216, .06); color: #FBFAF7; }
.ms-tab-caret { width: 12px; height: 12px; opacity: .55; transition: transform .25s var(--mb-ease); }
.ms-tab.is-open { background: var(--mb-green); color: #EBE5D8; }
.ms-tab.is-open .ms-tab-caret { transform: rotate(180deg); opacity: .9; }
body.theme-dark .ms-tab.is-open { background: #EBE5D8; color: #0F2B27; }
/* the section you are in: a lime stroke under the tab */
.ms-tab.is-current::after {
	content: "";
	position: absolute;
	left: 50%; bottom: 4px;
	width: 18px; height: 3px;
	border-radius: 3px;
	background: var(--mb-lime);
	transform: translateX(-50%);
}
.ms-tab-admin { margin-inline-start: 6px; }
.ms-tab-admin::before {
	content: "";
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--mb-sand-2);
}

/* ---------- Tools ---------- */
.ms-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-inline-start: auto;
	flex-shrink: 0;
}
.ms-actions > * { flex-shrink: 0; }
.ms-burger {
	display: none;
	width: 40px; height: 40px;
	border: 0;
	border-radius: 9999px;
	background: var(--mb-green);
	cursor: pointer;
	place-content: center;
	gap: 5px;
}
.ms-burger span { display: block; width: 16px; height: 2px; border-radius: 2px; background: #EBE5D8; transition: transform .25s var(--mb-ease); }
.ms-burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.ms-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
body.theme-dark .ms-burger { background: #EBE5D8; }
body.theme-dark .ms-burger span { background: #0F2B27; }

/* ---------- Panels ---------- */
.ms-panel,
.ms-sheet {
	position: absolute;
	top: calc(100% + 10px);
	inset-inline: 0;
	z-index: 81;
	display: flex;
	gap: 18px;
	max-height: min(72vh, 680px);
	overflow-y: auto;
	padding: 22px;
	border-radius: 24px;
	background: var(--ms-panel-bg);
	box-shadow: 0 0 0 1px var(--mb-line), 0 30px 60px -30px rgba(20, 32, 30, .45);
	overscroll-behavior: contain;
}
.ms-panel-admin { flex-wrap: wrap; }
.ms-panel-admin .ms-section { flex: 1 1 320px; }
.ms-sheet { flex-direction: column; max-height: calc(100vh - 110px); }
body.theme-dark .ms-panel, body.theme-dark .ms-sheet { box-shadow: 0 0 0 1px rgba(235, 229, 216, .08), 0 30px 60px -30px rgba(0, 0, 0, .8); }

.ms-in { transition: opacity .2s ease, transform .28s cubic-bezier(.23, 1, .32, 1); }
.ms-out { transition: opacity .14s ease, transform .14s ease; }
.ms-in-start { opacity: 0; transform: translateY(-8px) scale(.99); }

.ms-section { flex: 1; min-width: 0; }
.ms-section + .ms-section { padding-top: 6px; }
.ms-section-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px !important;
	font-family: var(--mb-font-display) !important;
	font-size: 20px !important;
	font-weight: 800 !important;
	color: var(--mb-green) !important;
}
body.theme-dark .ms-section-title { color: #FBFAF7 !important; }
.ms-section-title::after {
	content: "";
	flex: 1;
	height: 2px;
	background-image: radial-gradient(circle, rgba(22, 58, 54, .25) 1px, transparent 1.5px);
	background-size: 7px 2px;
	background-repeat: repeat-x;
}
body.theme-dark .ms-section-title::after { background-image: radial-gradient(circle, rgba(235, 229, 216, .2) 1px, transparent 1.5px); }

.ms-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ms-tile { list-style: none; min-width: 0; }
.ms-tile-link {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 10px 12px 10px 10px;
	border-radius: 16px;
	background: var(--ms-tile-bg);
	color: var(--ms-tile-ink) !important;
	text-decoration: none !important;
	box-shadow: inset 0 0 0 1px var(--mb-line);
	transition: transform .2s var(--mb-ease), box-shadow .2s var(--mb-ease), background-color .2s;
}
[dir="rtl"] .ms-tile-link { padding: 10px 10px 10px 12px; }
.ms-tile-link:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--mb-line-strong), 0 10px 20px -14px rgba(20, 32, 30, .35); }
.ms-tile-link:active { transform: scale(.98); }
.ms-tile-icon {
	display: grid; place-items: center;
	width: 40px; height: 40px;
	border-radius: 12px;
	background: var(--mb-bone);
	color: var(--mb-green);
}
body.theme-dark .ms-tile-icon { background: rgba(235, 229, 216, .06); color: #EBE5D8; }
.ms-tile-icon svg { width: 20px !important; height: 20px !important; }
.ms-tile-letter { font: 800 16px/1 var(--mb-font-display); }
.ms-tile-label { font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
:lang(ar) .ms-tile-label { font-size: 14.5px; }
.ms-tile-num {
	font: 600 11px/1 var(--mb-font-ui);
	color: var(--mb-muted);
	font-variant-numeric: tabular-nums;
	padding: 4px 7px;
	border-radius: 9999px;
	box-shadow: inset 0 0 0 1px var(--mb-line);
}
.ms-tile-badge {
	grid-column: 2;
	justify-self: start;
	font-size: 9.5px; font-weight: 700;
	padding: 2px 6px; border-radius: 9999px;
	background: var(--mb-lime); color: #0F2B27;
}
/* current page */
.ms-tile.is-active > .ms-tile-link { background: var(--mb-green); color: #FBFAF7 !important; box-shadow: none; }
.ms-tile.is-active .ms-tile-icon { background: rgba(235, 229, 216, .1); color: var(--mb-lime); }
.ms-tile.is-active .ms-tile-num { background: var(--mb-lime); color: #0F2B27; box-shadow: none; }
body.theme-dark .ms-tile.is-active > .ms-tile-link { background: #EBE5D8; color: #0F2B27 !important; }
body.theme-dark .ms-tile.is-active .ms-tile-icon { background: rgba(15, 43, 39, .08); color: #1E4D46; }

.ms-sub { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 6px 2px; padding: 0; list-style: none; }
.ms-sub-link {
	display: inline-block;
	padding: 5px 10px;
	border-radius: 9999px;
	font-size: 12px; font-weight: 500;
	color: var(--mb-text) !important;
	background: rgba(255, 255, 255, .55);
	text-decoration: none !important;
	transition: background-color .15s, color .15s;
}
body.theme-dark .ms-sub-link { background: rgba(235, 229, 216, .05); color: #C9CFC9 !important; }
.ms-sub-link:hover { background: var(--ms-tile-bg); color: var(--mb-green) !important; }
.ms-sub-link.is-active { background: var(--mb-green); color: #EBE5D8 !important; }

/* credits / invite column in the first panel */
.ms-panel-aside {
	flex: 0 0 260px;
	align-self: flex-start;
	padding: 16px;
	border-radius: 18px;
	background: var(--ms-tile-bg);
	box-shadow: inset 0 0 0 1px var(--mb-line);
}
.ms-panel-kicker { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--mb-muted); }
.ms-invite {
	display: inline-flex; align-items: center;
	margin-top: 12px;
	padding: 6px 6px 6px 14px;
	border-radius: 9999px;
	background: var(--mb-green); color: #EBE5D8 !important;
	font-size: 12.5px; font-weight: 600;
	text-decoration: none !important;
}
[dir="rtl"] .ms-invite { padding: 6px 14px 6px 6px; }

/* ---------- Page frame ---------- */
body.scriptif .ms-page-wrapper { min-width: 0; }
body.scriptif .ms-content { overflow: visible !important; min-width: 0; }
body.scriptif .lqd-page-content-container.container { max-width: 1320px; }
body.scriptif .lqd-titlebar {
	background: transparent !important;
	border: 0 !important;
	padding-top: clamp(18px, 3vw, 34px) !important;
}
body.scriptif .lqd-page-footer, body.scriptif footer.lqd-footer {
	border-top: 0 !important;
	color: var(--mb-muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
	.ms-tab { padding: 0 11px; font-size: 13px; }
}
@media (max-width: 1023px) {
	.ms-tabs { display: none; }
	.ms-burger { display: inline-grid; }
	.ms-panel { display: none !important; }
	.ms-bar { top: 8px; margin: 8px 10px 0; border-radius: 18px; }
	.ms-bar-inner { gap: 8px; padding: 0 8px 0 12px; }
	[dir="rtl"] .ms-bar-inner { padding: 0 12px 0 8px; }
	.ms-actions { gap: 6px; }
	.ms-actions .header-language-dropdown, .ms-actions .mb-lang { display: none !important; }
	.ms-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
}
@media (min-width: 1024px) {
	.ms-sheet { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	.ms-in, .ms-out, .ms-tile-link, .ms-tab { transition: none !important; }
}

/* ==========================================================================
   Phone: feels like an app, not a web page
   - edge-to-edge top app bar that respects the notch
   - bottom tab bar (dock) with Home + 3 pages + More
   - "More" is a bottom sheet with a drag handle over a dimmed backdrop
   ========================================================================== */
.ms-dock, .ms-backdrop { display: none; }

@media (max-width: 1023px) {
	html { -webkit-tap-highlight-color: transparent; }
	body.scriptif {
		overscroll-behavior-y: none;
		padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
	}

	/* top app bar: full width, glued to the top, frosted */
	.ms-bar {
		top: 0;
		margin: 0;
		border-radius: 0 0 22px 22px;
		padding-top: env(safe-area-inset-top);
		/* solid on purpose: a backdrop-filter here would trap the fixed dock and sheet inside the bar */
		background: var(--ms-bar-bg) !important;
	}
	.ms-bar-inner { min-height: 58px; }
	.ms-burger { display: none !important; }
	.ms-actions .header-search-container,
	.ms-actions form.header-search { display: none !important; }

	/* tab bar */
	.ms-dock {
		position: fixed;
		inset-inline: 10px;
		bottom: calc(10px + env(safe-area-inset-bottom));
		z-index: 90;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		align-items: stretch;
		height: 66px;
		padding: 6px;
		border-radius: 24px;
		background: #0F2B27;
		box-shadow: 0 18px 40px -18px rgba(10, 30, 27, .65), 0 0 0 1px rgba(235, 229, 216, .06);
	}
	body.theme-dark .ms-dock { background: #12322E; }
	.ms-dock-item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-width: 0;
		border: 0;
		border-radius: 18px;
		background: transparent;
		color: rgba(235, 229, 216, .62) !important;
		text-decoration: none !important;
		cursor: pointer;
		transition: color .2s var(--mb-ease), background-color .2s var(--mb-ease), transform .12s var(--mb-ease);
	}
	.ms-dock-item:active { transform: scale(.92); }
	.ms-dock-icon { display: grid; place-items: center; height: 26px; }
	.ms-dock-icon svg { width: 24px !important; height: 24px !important; }
	.ms-dock-label {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 10.5px;
		font-weight: 600;
		line-height: 1.1;
		padding-inline: 2px;
	}
	.ms-dock-item.is-active { color: #FBFAF7 !important; background: rgba(235, 229, 216, .08); }
	.ms-dock-item.is-active .ms-dock-icon { color: var(--mb-lime); }
	.ms-dock-item.is-active::before {
		content: "";
		position: absolute;
		top: 4px;
		width: 5px; height: 5px;
		border-radius: 50%;
		background: var(--mb-lime);
	}

	/* bottom sheet */
	.ms-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 88;
		background: rgba(10, 30, 27, .45);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
	}
	.ms-sheet {
		position: fixed;
		top: auto;
		inset-inline: 0;
		bottom: 0;
		z-index: 89;
		max-height: 86vh;
		padding: 10px 16px calc(96px + env(safe-area-inset-bottom));
		border-radius: 28px 28px 0 0;
		flex-direction: column;
		gap: 22px;
	}
	.ms-sheet-handle {
		align-self: center;
		flex-shrink: 0;
		width: 42px; height: 5px;
		margin-bottom: 4px;
		border-radius: 5px;
		background: rgba(22, 58, 54, .2);
	}
	body.theme-dark .ms-sheet-handle { background: rgba(235, 229, 216, .2); }
	.ms-sheet-in { transition: transform .38s cubic-bezier(.32, .72, 0, 1), opacity .2s ease; }
	.ms-sheet-out { transition: transform .24s cubic-bezier(.32, .72, 0, 1), opacity .2s ease; }
	.ms-sheet-from { transform: translateY(100%); opacity: .6; }
	.ms-sheet .ms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.ms-sheet .ms-tile-link {
		grid-template-columns: 1fr;
		justify-items: start;
		gap: 10px;
		min-height: 104px;
		padding: 12px;
		border-radius: 18px;
	}
	.ms-sheet .ms-tile-num { position: absolute; top: 10px; inset-inline-end: 10px; }
	.ms-sheet .ms-tile { position: relative; }
	.ms-sheet .ms-tile-link:hover { transform: none; }
	.ms-sheet-credits { padding: 14px; border-radius: 18px; background: var(--ms-tile-bg); box-shadow: inset 0 0 0 1px var(--mb-line); }

	/* page content: app spacing, bigger touch targets, no hover lifts */
	body.scriptif .lqd-page-content-container { padding-inline: 14px !important; }
	body.scriptif .lqd-titlebar { padding-top: 14px !important; }
	body.scriptif .lqd-btn, body.scriptif .lqd-input, body.scriptif select { min-height: 44px; }
	body.scriptif .lqd-card:hover { transform: none !important; }
	body.scriptif .lqd-card { border-radius: 22px !important; }
	body.scriptif footer, body.scriptif .lqd-page-footer { display: none !important; }
}
@media (max-width: 1023px) and (hover: none) {
	.ms-tile-link:hover, .lqd-btn:hover { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	.ms-sheet-in, .ms-sheet-out { transition: none !important; }
}

/* ==========================================================================
   Home — studio desk + bento
   ========================================================================== */
.sc-home { display: flex; flex-direction: column; gap: 18px; padding: clamp(18px, 3vw, 32px) 0 40px; }
.sc-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	align-items: center;
	gap: 24px;
	padding: clamp(24px, 4vw, 48px);
	border-radius: 32px;
	background: #0F2B27;
	color: #EBE5D8;
	overflow: hidden;
	isolation: isolate;
}
body.theme-dark .sc-hero { background: #12322E; box-shadow: inset 0 0 0 1px rgba(235, 229, 216, .06); }
.sc-hero::before {
	content: "";
	position: absolute; inset: 0;
	z-index: -1;
	background-image: radial-gradient(circle, rgba(216, 203, 178, .16) 1.2px, transparent 1.6px);
	background-size: 14px 14px;
	-webkit-mask-image: linear-gradient(to left, #000 0%, transparent 60%);
	mask-image: linear-gradient(to left, #000 0%, transparent 60%);
}
[dir="rtl"] .sc-hero::before { -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 60%); mask-image: linear-gradient(to right, #000 0%, transparent 60%); }
.sc-kicker { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: rgba(235, 229, 216, .6); }
.sc-hello {
	margin: 0 !important;
	font-family: var(--mb-font-display) !important;
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem) !important;
	font-weight: 800 !important;
	line-height: 1.05 !important;
	color: #FBFAF7 !important;
	letter-spacing: -.02em;
}
:lang(ar) .sc-hello, [dir="rtl"] .sc-hello { letter-spacing: 0; line-height: 1.2 !important; }
.sc-mark { background-image: linear-gradient(transparent 58%, rgba(166, 199, 50, .55) 58%, rgba(166, 199, 50, .55) 90%, transparent 90%); padding-inline: 4px; }
.sc-sub { margin: 14px 0 22px; font-size: 16px; color: rgba(235, 229, 216, .75); }
.sc-command form.header-search { width: 100% !important; max-width: 560px; }
.sc-command .lqd-input {
	height: 58px !important;
	border-radius: 9999px !important;
	background: #FBFAF7 !important;
	color: #14201E !important;
	border: 0 !important;
	font-size: 15px !important;
	box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .6) !important;
}
.sc-command .header-search-icon { color: #163A36 !important; opacity: 1 !important; }
.sc-hero-art { display: flex; justify-content: center; }
.sc-hero-art .mb-puzzle { width: min(100%, 360px); height: auto; }
.sc-hero:hover .mb-puzzle .mb-p4 { transform: translate(0, 0) rotate(0deg); }
.sc-hero:hover .mb-puzzle .mb-slot { opacity: 0; }

.sc-row:empty { display: none; }
.sc-bento {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}
.sc-bento > * { min-width: 0; }
.sc-bento > div > .lqd-card { height: 100%; margin: 0 !important; }
.sc-span-2 { grid-column: span 2; }
.sc-tile {
	grid-column: span 2;
	display: flex; flex-direction: column; gap: 12px;
	padding: 22px;
	border-radius: 24px;
	background: var(--mb-card);
	box-shadow: inset 0 0 0 1px var(--mb-line);
}
.sc-tile-plan { background: #ECE6DA; box-shadow: none; }
body.theme-dark .sc-tile-plan { background: #12322E; }
.sc-tile-head { display: flex; align-items: center; gap: 10px; }
.sc-num {
	display: inline-grid; place-items: center;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: var(--mb-lime); color: #0F2B27;
	font: 800 12px/1 var(--mb-font-ui);
}
.sc-tile-title { margin: 0 !important; font-size: 20px !important; font-weight: 800 !important; }
.sc-plan-name { margin: 0; font: 800 clamp(1.6rem, 1.2rem + 1vw, 2.2rem)/1.1 var(--mb-font-display); color: var(--mb-green); }
body.theme-dark .sc-plan-name { color: #FBFAF7; }
/* the plan tile's upgrade button is the page's commercial call to action: the boldest control on the screen */
.sc-cta {
	align-self: flex-start;
	display: inline-flex; align-items: center;
	gap: 14px !important;
	margin-top: auto;
	min-height: 54px;
	padding: 8px 8px 8px 26px !important;
	border-radius: 9999px;
	background: var(--mb-green); color: #FBFAF7 !important;
	font-weight: 800; font-size: 17px; letter-spacing: -.005em;
	text-decoration: none !important;
	transition: transform .2s var(--mb-ease), background-color .2s var(--mb-ease);
}
[dir="rtl"] .sc-cta { padding: 8px 26px 8px 8px !important; }
.sc-cta::after { width: 38px !important; height: 38px !important; }
.sc-cta:hover { transform: translateY(-2px); background: var(--mb-mid); }
body.theme-dark .sc-cta { background: #A6C732; color: #0F2B27 !important; }
body.theme-dark .sc-cta:hover { background: #B6D43F; }
body.theme-dark .sc-cta::after {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6C732' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / 52% no-repeat,
		#0F2B27 !important;
}

@media (max-width: 1023px) {
	.sc-hero { grid-template-columns: 1fr; border-radius: 26px; padding: 24px 20px; }
	.sc-hero-art { display: none; }
	.sc-sub { margin-bottom: 16px; }
	.sc-bento { grid-template-columns: 1fr; gap: 12px; }
	.sc-span-2, .sc-tile { grid-column: auto; }
	.sc-command .lqd-input { height: 52px !important; }
}

/* ---------- Home: metrics strip, referral card ---------- */
.sc-span-4 { grid-column: 1 / -1; }
.sc-metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-radius: 24px;
	background: var(--mb-card);
	box-shadow: inset 0 0 0 1px var(--mb-line);
	overflow: hidden;
}
.sc-metric {
	display: flex; flex-direction: column; gap: 10px;
	padding: 22px 24px;
	min-width: 0;
}
.sc-metric + .sc-metric { border-inline-start: 1px solid var(--mb-line); }
.sc-metric-label { margin: 0; font-size: 14px; font-weight: 600; color: var(--mb-muted); line-height: 1.4; }
.sc-metric-value {
	font-family: var(--mb-font-display) !important;
	font-size: clamp(2rem, 1.6rem + 1vw, 2.6rem) !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	color: var(--mb-green);
	font-variant-numeric: tabular-nums;
}
body.theme-dark .sc-metric-value { color: #FBFAF7; }

.sc-ref { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: start; }
.sc-ref-art { width: 140px; height: auto; margin-bottom: 4px; }
.sc-ref-lead { margin: 0; font: 800 19px/1.3 var(--mb-font-display); color: var(--mb-green); }
body.theme-dark .sc-ref-lead { color: #FBFAF7; }
.sc-ref-sub { margin: 0; font-size: 13.5px; color: var(--mb-muted); line-height: 1.6; }
.sc-ref-earn {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	width: 100%;
	margin-top: 6px;
	padding: 12px 16px;
	border-radius: 16px;
	background: var(--mb-bone);
	font-size: 13px; color: var(--mb-muted);
}
body.theme-dark .sc-ref-earn { background: rgba(235, 229, 216, .05); }
.sc-ref-earn strong { font: 800 24px/1 var(--mb-font-display); color: var(--mb-green); font-variant-numeric: tabular-nums; }
body.theme-dark .sc-ref-earn strong { color: #C6DE6B; }
.sc-ref-link {
	display: flex; align-items: center; gap: 8px;
	width: 100%;
	padding: 6px 6px 6px 16px;
	border-radius: 9999px;
	box-shadow: inset 0 0 0 1px var(--mb-line-strong);
	direction: ltr;
}
.sc-ref-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--mb-text); }
.sc-ref-copy {
	display: grid; place-items: center;
	width: 40px; height: 40px; flex-shrink: 0;
	border: 0; border-radius: 50%;
	background: var(--mb-lime); color: #0F2B27;
	cursor: pointer;
	transition: transform .14s var(--mb-ease);
}
.sc-ref-copy:active { transform: scale(.92); }

@media (max-width: 1023px) {
	.sc-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sc-metric:nth-child(3) { border-inline-start: 0; }
	.sc-metric:nth-child(n+3) { border-top: 1px solid var(--mb-line); }
	.sc-span-4 { grid-column: auto; }
}

/* ---------- Dark logo: match the light one's visual size ---------- */
.ms-logo img[class~="dark:block"] { height: 50px !important; max-height: none !important; width: auto !important; margin-block: -6px; }
@media (max-width: 1023px) { .ms-logo img[class~="dark:block"] { height: 44px !important; } }

/* ---------- Charts (ApexCharts) in the brand palette ---------- */
.apexcharts-gridline { stroke: rgba(22, 58, 54, .08) !important; }
.apexcharts-xaxis-label, .apexcharts-yaxis-label, .apexcharts-text { fill: var(--mb-muted) !important; }
.apexcharts-bar-area { fill: #1E4D46 !important; }
.apexcharts-line, .apexcharts-series path.apexcharts-line { stroke: #163A36 !important; }
.apexcharts-area { fill: rgba(166, 199, 50, .22) !important; }
.apexcharts-area-series .apexcharts-series > path:not(.apexcharts-area) { stroke: #163A36 !important; }
.apexcharts-pie-series:nth-of-type(4n+1) path, .apexcharts-pie-area:nth-of-type(4n+1) { fill: #A6C732 !important; }
.apexcharts-pie-series:nth-of-type(4n+2) path, .apexcharts-pie-area:nth-of-type(4n+2) { fill: #1E4D46 !important; }
.apexcharts-pie-series:nth-of-type(4n+3) path, .apexcharts-pie-area:nth-of-type(4n+3) { fill: #D8CBB2 !important; }
.apexcharts-pie-series:nth-of-type(4n+4) path, .apexcharts-pie-area:nth-of-type(4n+4) { fill: #5F6B68 !important; }
.apexcharts-datalabel, .apexcharts-pie-label { fill: #0F2B27 !important; font-weight: 700 !important; }
.apexcharts-tooltip { background: #0F2B27 !important; color: #EBE5D8 !important; border: 0 !important; border-radius: 12px !important; }

body.theme-dark .apexcharts-gridline { stroke: rgba(235, 229, 216, .07) !important; }
body.theme-dark .apexcharts-xaxis-label, body.theme-dark .apexcharts-yaxis-label, body.theme-dark .apexcharts-text { fill: rgba(235, 229, 216, .62) !important; }
body.theme-dark .apexcharts-bar-area { fill: #A6C732 !important; }
body.theme-dark .apexcharts-line, body.theme-dark .apexcharts-area-series .apexcharts-series > path:not(.apexcharts-area) { stroke: #A6C732 !important; stroke-width: 2.5px; }
body.theme-dark .apexcharts-area { fill: rgba(166, 199, 50, .18) !important; }
body.theme-dark .apexcharts-pie-series:nth-of-type(4n+2) path, body.theme-dark .apexcharts-pie-area:nth-of-type(4n+2) { fill: #EBE5D8 !important; }
body.theme-dark .apexcharts-pie-series:nth-of-type(4n+3) path, body.theme-dark .apexcharts-pie-area:nth-of-type(4n+3) { fill: #2E7D5B !important; }
body.theme-dark .apexcharts-pie-series:nth-of-type(4n+4) path, body.theme-dark .apexcharts-pie-area:nth-of-type(4n+4) { fill: #9FB0AB !important; }
body.theme-dark .apexcharts-legend-text { color: rgba(235, 229, 216, .75) !important; }

/* chart labels stay readable on lime bars and on the dark card alike */
.apexcharts-datalabel, .apexcharts-datalabels text, .apexcharts-pie-label {
	fill: #FBFAF7 !important;
	stroke: #0F2B27 !important;
	stroke-width: 3px !important;
	paint-order: stroke !important;
	font-weight: 700 !important;
}
.apexcharts-pie-area { fill-opacity: 1 !important; }
.apexcharts-canvas svg, .apexcharts-svg { overflow: visible !important; }
.apexcharts-yaxis-label, .apexcharts-xaxis-label { font-variant-numeric: tabular-nums; }

/* ---------- Admin control room ---------- */
.sc-hero-admin { margin-top: clamp(18px, 3vw, 32px); }
.sc-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sc-shortcut {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 16px 6px 6px;
	border-radius: 9999px;
	background: rgba(235, 229, 216, .08);
	color: #EBE5D8 !important;
	font-weight: 600; font-size: 14px;
	text-decoration: none !important;
	box-shadow: inset 0 0 0 1px rgba(235, 229, 216, .1);
	transition: background-color .18s var(--mb-ease), transform .14s var(--mb-ease);
}
[dir="rtl"] .sc-shortcut { padding: 6px 6px 6px 16px; }
.sc-shortcut:hover { background: rgba(235, 229, 216, .14); }
.sc-shortcut:active { transform: scale(.97); }
.sc-shortcut svg, .sc-shortcut .mb-ph { width: 18px !important; height: 18px !important; color: var(--mb-lime); }
/* admin widget board sits under the hero */
body.scriptif.page-admin .lqd-page-content-container > .py-10 { padding-top: 18px !important; }
/* the "Hey name" line and the vendor upsell are replaced by the hero */
body.scriptif.page-admin .lqd-card.mbh-1.mbh-1 { display: none !important; }
body.scriptif.page-admin .lqd-page-content-container > .py-10 > .mb-4 > h2.font-bold { display: none !important; }
body.scriptif.page-admin .lqd-page-content-container > .py-10 > .mb-4 { justify-content: flex-end !important; }

/* template / tool icon discs: one brand family instead of a rainbow */
.lqd-icon[style*="--color"] {
	background: var(--mb-bone) !important;
	color: var(--mb-green) !important;
	box-shadow: inset 0 0 0 1px var(--mb-line) !important;
}
body.theme-dark .lqd-icon[style*="--color"] {
	background: rgba(235, 229, 216, .07) !important;
	color: #C6DE6B !important;
	box-shadow: inset 0 0 0 1px rgba(235, 229, 216, .08) !important;
}
.lqd-icon[style*="--color"] svg, .lqd-icon[style*="--color"] .mb-ph { color: inherit !important; }
img[data-mb="chat-default"] { border-radius: 50%; }

/* template icons with hard-coded fills (YouTube, Facebook…): paint them in the disc colour */
.lqd-icon[style*="--color"] svg [fill]:not([fill="none"]),
.lqd-icon[style*="--color"] svg[fill]:not([fill="none"]) { fill: currentColor !important; }
.lqd-icon[style*="--color"] svg [stroke]:not([stroke="none"]),
.lqd-icon[style*="--color"] svg[stroke]:not([stroke="none"]) { stroke: currentColor !important; }
.lqd-icon[style*="--color"] svg path:not([fill]):not([stroke]) { fill: currentColor; }
.lqd-icon[style*="--color"] img { filter: grayscale(1) brightness(2.4) contrast(.9); }
body:not(.theme-dark) .lqd-icon[style*="--color"] img { filter: grayscale(1) brightness(.35); }
/* the little "active" dot on template icons: lime instead of web green */
.lqd-icon[style*="--color"] + span[class*="bg-green"], .lqd-icon [class*="bg-green-500"] { background: var(--mb-lime) !important; }

/* ==========================================================================
   Writer / generator workbook
   ========================================================================== */
.lqd-generator-wrap { gap: 16px !important; }
/* form column: real breathing room inside the cards */
.lqd-generator-wrap > .flex-col > .lqd-card > .lqd-card-body.lqd-card-size-none { padding: 22px !important; }
.lqd-generator-wrap > .flex-col > .lqd-card { border-radius: 24px !important; }
.lqd-generator-form { row-gap: 18px; }
.lqd-generator-form .lqd-input-label,
.lqd-generator-form label { font-size: 13.5px !important; font-weight: 600 !important; color: var(--mb-ink) !important; }
.lqd-generator-form .lqd-input-label.mbh-2 {
	justify-content: space-between !important;
	width: 100%;
	padding: 10px 14px;
	border-radius: 14px;
	background: var(--mb-bone);
}
body.theme-dark .lqd-generator-form .lqd-input-label.mbh-2 { background: rgba(235, 229, 216, .05); }
.lqd-generator-form textarea.lqd-input { min-height: 120px; resize: vertical; }
.lqd-generator-form button[type="submit"],
.lqd-generator-form .lqd-btn[type="submit"] {
	width: 100%;
	height: 52px;
	border: 0 !important;
	border-radius: 9999px !important;
	background: var(--mb-green) !important;
	color: #EBE5D8 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	box-shadow: 0 10px 22px -14px rgba(15, 43, 39, .7) !important;
}
.lqd-generator-form button[type="submit"]:hover { background: var(--mb-mid) !important; }
body.theme-dark .lqd-generator-form button[type="submit"] { background: var(--mb-lime) !important; color: #0F2B27 !important; }

/* editor card */
#workbook_textarea {
	background: var(--mb-card) !important;
	border: 1px solid var(--mb-line) !important;
	border-radius: 24px !important;
	overflow: hidden;
}
#workbook_textarea > .lqd-card-body { padding: 0 !important; }
#workbook_textarea > .lqd-card-body > .flex.flex-wrap:first-child {
	justify-content: space-between !important;
	gap: 10px !important;
	padding: 14px 18px !important;
	border-bottom: 1px solid var(--mb-line);
}
#workbook_textarea > .lqd-card-body > .flex.flex-wrap:first-child > :is(hr, span, div):empty { display: none !important; }
#workbook_textarea #workbook_title {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding-inline: 4px !important;
	font: 800 20px/1.2 var(--mb-font-display) !important;
	color: var(--mb-green) !important;
	min-width: 220px;
}
body.theme-dark #workbook_textarea #workbook_title { color: #FBFAF7 !important; }
#workbook_textarea #workbook_title:focus { box-shadow: inset 0 -2px 0 var(--mb-lime) !important; border-radius: 0 !important; }
#workbook_textarea .lqd-card-body > .flex.flex-wrap:first-child :is(button, a) {
	width: 36px; height: 36px;
	display: inline-grid; place-items: center;
	border-radius: 50%;
	color: var(--mb-green);
	transition: background-color .15s;
}
#workbook_textarea .lqd-card-body > .flex.flex-wrap:first-child :is(button, a):hover { background: var(--mb-bone); }
body.theme-dark #workbook_textarea .lqd-card-body > .flex.flex-wrap:first-child :is(button, a) { color: #EBE5D8; }
body.theme-dark #workbook_textarea .lqd-card-body > .flex.flex-wrap:first-child :is(button, a):hover { background: rgba(235, 229, 216, .06); }

/* TinyMCE: quiet toolbar in the brand ink */
.tox.tox-tinymce { border: 0 !important; border-radius: 0 !important; }
.tox .tox-editor-header, .tox .tox-toolbar-overlord, .tox .tox-toolbar, .tox .tox-toolbar__primary, .tox .tox-toolbar__overflow {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}
.tox .tox-editor-header { padding: 8px 12px !important; border-bottom: 1px solid var(--mb-line) !important; }
.tox .tox-toolbar__group { padding: 0 4px !important; border: 0 !important; }
.tox .tox-tbtn { border-radius: 10px !important; color: var(--mb-green) !important; }
.tox .tox-tbtn svg { fill: var(--mb-green) !important; }
.tox .tox-tbtn svg [fill]:not([fill="none"]) { fill: currentColor !important; }
.tox .tox-tbtn:hover, .tox .tox-tbtn--enabled { background: var(--mb-bone) !important; }
.tox .tox-tbtn--select { border-radius: 9999px !important; box-shadow: inset 0 0 0 1px var(--mb-line) !important; padding-inline: 10px !important; }
.tox .tox-tbtn__select-label { color: var(--mb-ink) !important; font-family: var(--mb-font-ui) !important; }
body.theme-dark .tox .tox-tbtn, body.theme-dark .tox .tox-tbtn__select-label { color: #EBE5D8 !important; }
body.theme-dark .tox .tox-tbtn svg { fill: #EBE5D8 !important; }
body.theme-dark .tox .tox-tbtn:hover, body.theme-dark .tox .tox-tbtn--enabled { background: rgba(235, 229, 216, .07) !important; }
.tox .tox-edit-area__iframe { background: transparent !important; }

@media (max-width: 1023px) {
	.lqd-generator-wrap > .flex-col > .lqd-card > .lqd-card-body.lqd-card-size-none { padding: 16px !important; }
	#workbook_textarea #workbook_title { min-width: 0; font-size: 18px !important; }
}
#workbook_textarea > .lqd-card-body > *,
#workbook_textarea .tox.tox-tinymce { width: 100% !important; max-width: none !important; }
.tox .tox-tbtn svg [stroke]:not([stroke="none"]) { stroke: currentColor !important; }
.lqd-generator-form .lqd-input-switcher:not(:checked) { background-color: rgba(22, 58, 54, .2) !important; }
body.theme-dark .lqd-generator-form .lqd-input-switcher:not(:checked) { background-color: rgba(235, 229, 216, .18) !important; }
#workbook_textarea > .lqd-card-body { width: 100% !important; max-width: none !important; }

/* ---------- Headings never collide (some extension pages set line-height below font-size) ---------- */
body.scriptif .lqd-page-content-container :is(h1, h2) { line-height: 1.3 !important; }
body.scriptif .lqd-page-content-container :is(h1, h2) > .block + * , body.scriptif .lqd-page-content-container :is(h1, h2) > .block { display: block; }

/* ---------- AI Agent page ---------- */
img[data-mb^="ai-agent/"] { object-fit: contain; }
img[data-mb="ai-agent/images/img-1"] { max-height: 132px; width: auto !important; margin-bottom: 24px; }
img[data-mb^="ai-agent/images/avatars/"] { border-radius: 50%; }
/* featured agent tiles: sand instead of lilac gradients */
.lqd-page-content-container [class*="aspect-[1/0.6]"][class*="bg-gra"],
.lqd-page-content-container [class*="aspect-"][class*="bg-gradient"] {
	background: #ECE6DA !important;
	background-image: none !important;
	color: var(--mb-green);
	box-shadow: inset 0 0 0 1px var(--mb-line);
	transition: background-color .2s var(--mb-ease), transform .2s var(--mb-ease);
}
body.theme-dark .lqd-page-content-container [class*="aspect-"][class*="bg-gra"] { background: #12322E !important; color: #C6DE6B; box-shadow: inset 0 0 0 1px rgba(235, 229, 216, .07); }
.lqd-page-content-container .group:hover > [class*="aspect-"][class*="bg-gra"] { transform: translateY(-3px); }
[class*="aspect-"][class*="bg-gra"] .mb-ph.mb-emoji { width: 40px !important; height: 40px !important; color: inherit; }

/* ---------- Replaced vendor illustrations (flat Scriptif family) ---------- */
img[data-mb^="social-media"], img[data-mb^="crm/"], img[data-mb^="phone-call-agent/"], img[data-mb^="chatbot-voice/"], img[data-mb^="auto-edit-videos/"] { object-fit: contain; }
[style*="social-media-agent/images/img-5"] {
	background-color: #0F2B27 !important;
	background-image: radial-gradient(circle, rgba(216, 203, 178, .16) 1.2px, transparent 1.6px) !important;
	background-size: 14px 14px !important;
}

/* ---------- Legacy Tailwind hues -> brand (audit: blue / indigo / violet / purple / fuchsia / pink) ---------- */
[class*="text-blue-"], [class*="text-indigo-"], [class*="text-violet-"], [class*="text-purple-"], [class*="text-fuchsia-"], [class*="text-pink-"], [class*="text-sky-"] { color: var(--mb-green) !important; }
body.theme-dark :is([class*="text-blue-"], [class*="text-indigo-"], [class*="text-violet-"], [class*="text-purple-"], [class*="text-fuchsia-"], [class*="text-pink-"], [class*="text-sky-"]) { color: #C6DE6B !important; }
[class*="bg-blue-"], [class*="bg-indigo-"], [class*="bg-violet-"], [class*="bg-purple-"], [class*="bg-fuchsia-"], [class*="bg-pink-"], [class*="bg-sky-"] { background-color: var(--mb-mid) !important; }
[class*="bg-blue-"][class*="rounded-sm"], [class*="bg-indigo-"][class*="rounded-sm"] { background-color: #A6C732 !important; }
[class*="bg-violet-"][class*="rounded-sm"], [class*="bg-purple-"][class*="rounded-sm"] { background-color: #D8CBB2 !important; }
[class*="border-blue-"], [class*="border-indigo-"], [class*="border-violet-"], [class*="border-purple-"] { border-color: var(--mb-line-strong) !important; }
[class*="fill-blue-"], [class*="fill-indigo-"], [class*="fill-violet-"] { fill: var(--mb-green) !important; }
/* generated avatar placeholders (random hues) -> brand disc */
figure[style*="background"][class*="size-full"], figure.relative.grid.size-full { background-color: var(--mb-green) !important; color: #EBE5D8 !important; }
/* the old flag language menu is teleported to <body>; the ع | EN switch replaces it */
.lqd-dropdown-dropdown.mbh-3:not(mbh) { display: none !important; }

/* Composer: the prompt, its tools and the send button live in one card */
.lqd-page div.mbh-5.mbh-5:not(mbh).mbh-4:not(mbh):not(mbh) {
	background: var(--mb-card) !important;
	border: 1px solid var(--mb-line-strong) !important;
	border-radius: 22px !important;
	box-shadow: var(--mb-lift) !important;
	overflow: hidden;
	transition: border-color .2s var(--mb-ease);
}
.lqd-page div.mbh-5.mbh-5:not(mbh).mbh-4:not(mbh):not(mbh):focus-within { border-color: var(--mb-green) !important; }
body.theme-dark .lqd-page div.mbh-5.mbh-5:not(mbh).mbh-4:not(mbh):not(mbh):focus-within { border-color: var(--mb-lime) !important; }
.lqd-page div.mbh-4:not(mbh):not(mbh) > .lqd-input-container > textarea.lqd-input {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	min-height: 120px;
	padding: 22px 24px 6px !important;
	font-size: 16px !important;
	line-height: 1.7;
	color: var(--mb-ink) !important;
}
.lqd-page div.mbh-5.mbh-5:not(mbh) > .lqd-input-container + div:where(.mbh-6):not(mbh) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 14px 14px 24px !important;
}
[dir="rtl"] .lqd-page div.mbh-5.mbh-5:not(mbh) > .lqd-input-container + div:where(.mbh-6):not(mbh) { padding: 8px 24px 14px 14px !important; }
.lqd-page div.mbh-5.mbh-5:not(mbh) > .lqd-input-container + div > button:last-child.rounded-full {
	width: 44px !important;
	height: 44px !important;
	background: var(--mb-green) !important;
	color: #FBFAF7 !important;
	border: 0 !important;
	box-shadow: none !important;
	transform: none !important;
}
body.theme-dark .lqd-page div.mbh-5.mbh-5:not(mbh) > .lqd-input-container + div > button:last-child.rounded-full { background: var(--mb-lime) !important; color: var(--mb-deep) !important; }
.lqd-page div.mbh-5.mbh-5:not(mbh) > .lqd-input-container + div > button:last-child.rounded-full:disabled {
	background: var(--mb-line) !important;
	color: var(--mb-muted) !important;
}
.lqd-page div.mbh-5.mbh-5:not(mbh) > .lqd-input-container + div > button:last-child.rounded-full svg { width: 20px; height: 20px; }
[dir="rtl"] .lqd-page div.mbh-5.mbh-5:not(mbh) > .lqd-input-container + div > button:last-child.rounded-full svg { transform: scaleX(-1); }
.lqd-page div.mbh-5.mbh-5:not(mbh) > .lqd-input-container + div > button:first-child .rounded-full {
	border-color: var(--mb-card) !important;
	background: var(--mb-bone) !important;
}
body.theme-dark .lqd-page div.mbh-5.mbh-5:not(mbh) > .lqd-input-container + div > button:first-child .rounded-full { background: var(--mb-ivory) !important; }
body.theme-dark .lqd-page div.mbh-5.mbh-5:not(mbh) > .lqd-input-container + div > button:last-child.rounded-full:disabled { background: rgba(235, 229, 216, .08) !important; color: var(--mb-muted) !important; }

/* Pastel shortcut cards (CRM quick shortcuts): sand cards with ink text */
.lqd-page-content-container a[class*="bg-gradient-to-b"][class*="[--color:"] {
	background: #ECE6DA !important;
	background-image: none !important;
	color: var(--mb-ink) !important;
	box-shadow: inset 0 0 0 1px var(--mb-line);
	filter: none !important;
}
.lqd-page-content-container a[class*="bg-gradient-to-b"][class*="[--color:"]:hover { background: #D8CBB2 !important; }
.lqd-page-content-container a[class*="bg-gradient-to-b"][class*="[--color:"] .mb-ph { color: var(--mb-green); opacity: 1 !important; }
body.theme-dark .lqd-page-content-container a[class*="bg-gradient-to-b"][class*="[--color:"] { background: #12322E !important; color: #EBE5D8 !important; box-shadow: inset 0 0 0 1px rgba(235, 229, 216, .07); }
body.theme-dark .lqd-page-content-container a[class*="bg-gradient-to-b"][class*="[--color:"]:hover { background: #18403A !important; }
body.theme-dark .lqd-page-content-container a[class*="bg-gradient-to-b"][class*="[--color:"] .mb-ph { color: #C6DE6B; }

/* Stacked filter selects (inbox side panels): breathing room instead of edge-to-edge rows */
.lqd-page .flex.flex-col.mbh-7.mbh-7.mbh-7:not(mbh) { gap: 8px; padding: 12px 16px; }
.lqd-page .lqd-input-container > select.lqd-input.rounded-none {
	height: 44px !important;
	border-radius: 12px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 13px !important;
}

/* Emoji picker (picmo) in brand surfaces */
body :is([x-ref="emojiPicker"], .lqd-chatbot-emoji) .picmo__picker.picmo__picker {
	--background-color: #FFFFFF;
	--secondary-background-color: #F6F3EE;
	--border-color: rgba(22, 58, 54, .12);
	--text-color: #14201E;
	--secondary-text-color: #5F6B68;
	--category-name-background-color: #FFFFFF;
	--category-name-text-color: #5F6B68;
	--category-tab-color: #5F6B68;
	--category-tab-active-color: #163A36;
	--category-tab-active-background-color: rgba(166, 199, 50, .28);
	--hover-background-color: rgba(166, 199, 50, .18);
	--focus-indicator-color: #163A36;
	--focus-indicator-background-color: rgba(166, 199, 50, .28);
	--accent-color: #163A36;
	--search-background-color: #F6F3EE;
	--search-focus-background-color: #FFFFFF;
	--search-icon-color: #5F6B68;
	--search-placeholder-color: #5F6B68;
	--emoji-preview-background-color: #F6F3EE;
	--placeholder-background-color: #ECE6DA;
	border: 1px solid rgba(22, 58, 54, .12) !important;
	border-radius: 16px !important;
	box-shadow: var(--mb-pop) !important;
	overflow: hidden;
	font-family: var(--mb-font-ui);
}
body.theme-dark :is([x-ref="emojiPicker"], .lqd-chatbot-emoji) .picmo__picker.picmo__picker {
	--background-color: #0F2B27;
	--secondary-background-color: #0A1E1B;
	--border-color: rgba(235, 229, 216, .09);
	--text-color: #EBE5D8;
	--secondary-text-color: #9FB0AB;
	--category-name-background-color: #0F2B27;
	--category-name-text-color: #9FB0AB;
	--category-tab-color: #9FB0AB;
	--category-tab-active-color: #A6C732;
	--category-tab-active-background-color: rgba(166, 199, 50, .14);
	--hover-background-color: rgba(166, 199, 50, .12);
	--focus-indicator-color: #A6C732;
	--focus-indicator-background-color: rgba(166, 199, 50, .14);
	--accent-color: #A6C732;
	--search-background-color: #0A1E1B;
	--search-focus-background-color: #0A1E1B;
	--search-icon-color: #9FB0AB;
	--search-placeholder-color: #9FB0AB;
	--emoji-preview-background-color: #0A1E1B;
	--placeholder-background-color: #12322E;
	border-color: rgba(235, 229, 216, .09) !important;
}
/* selected category tab: readable mark on a soft lime chip in both modes */
body .picmo__picker .picmo__categoryButton { color: #5F6B68 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
body .picmo__picker .picmo__categoryButton[aria-selected="true"] { color: #163A36 !important; background: rgba(166, 199, 50, .32) !important; }
body.theme-dark .picmo__picker .picmo__categoryButton { color: #9FB0AB !important; }
body.theme-dark .picmo__picker .picmo__categoryButton[aria-selected="true"] { color: #A6C732 !important; background: rgba(166, 199, 50, .16) !important; }

/* Brand swatches that replace hard-coded legacy hues (set by medya-ui.js legacyHues) */
:root { --mb-hue-1: #D8CBB2; --mb-hue-2: #163A36; --mb-hue-3: #A6C732; --mb-hue-4: #5F6B68; --mb-hue-5: #B42318; --mb-hue-6: #B7791F; --mb-hue-7: #2E7D5B; }
body.theme-dark { --mb-hue-1: #D8CBB2; --mb-hue-2: #EBE5D8; --mb-hue-3: #A6C732; --mb-hue-4: #9FB0AB; --mb-hue-5: #D9574A; --mb-hue-6: #C9922F; --mb-hue-7: #3E9A72; }

/* Highcharts (admin user analytics) in the brand series */
.highcharts-color-0 { fill: #163A36; stroke: #163A36; }
.highcharts-color-1 { fill: #A6C732; stroke: #A6C732; }
.highcharts-color-2 { fill: #D8CBB2; stroke: #D8CBB2; }
.highcharts-color-3 { fill: #B7791F; stroke: #B7791F; }
.highcharts-color-4 { fill: #2E7D5B; stroke: #2E7D5B; }
.highcharts-color-5 { fill: #5F6B68; stroke: #5F6B68; }
:is(path, rect).highcharts-point.highcharts-color-0, .highcharts-series.highcharts-color-0 :is(.highcharts-point, .highcharts-area) { fill: #163A36 !important; }
:is(path, rect).highcharts-point.highcharts-color-1, .highcharts-series.highcharts-color-1 :is(.highcharts-point, .highcharts-area) { fill: #A6C732 !important; }
:is(path, rect).highcharts-point.highcharts-color-2, .highcharts-series.highcharts-color-2 :is(.highcharts-point, .highcharts-area) { fill: #D8CBB2 !important; }
:is(path, rect).highcharts-point.highcharts-color-3, .highcharts-series.highcharts-color-3 :is(.highcharts-point, .highcharts-area) { fill: #B7791F !important; }
.highcharts-series.highcharts-color-0 .highcharts-graph { stroke: #163A36 !important; }
.highcharts-series.highcharts-color-1 .highcharts-graph { stroke: #A6C732 !important; }
body.theme-dark :is(path, rect).highcharts-point.highcharts-color-0, body.theme-dark .highcharts-series.highcharts-color-0 :is(.highcharts-point, .highcharts-area) { fill: #A6C732 !important; }
body.theme-dark .highcharts-series.highcharts-color-0 .highcharts-graph { stroke: #A6C732 !important; }
body.theme-dark :is(path, rect).highcharts-point.highcharts-color-1, body.theme-dark .highcharts-series.highcharts-color-1 :is(.highcharts-point, .highcharts-area) { fill: #D8CBB2 !important; }
.highcharts-background { fill: transparent !important; }
.highcharts-axis-labels text, .highcharts-legend-item text, .highcharts-title, .highcharts-subtitle { fill: var(--mb-muted) !important; color: var(--mb-muted) !important; }
.highcharts-grid-line { stroke: var(--mb-line) !important; }
/* ApexCharts tooltip / legend markers follow the series order of the brand palette */
.apexcharts-tooltip-series-group:nth-of-type(4n+1) .apexcharts-tooltip-marker, .apexcharts-legend-series:nth-of-type(4n+1) .apexcharts-legend-marker { background-color: #A6C732 !important; color: #A6C732 !important; }
.apexcharts-tooltip-series-group:nth-of-type(4n+2) .apexcharts-tooltip-marker, .apexcharts-legend-series:nth-of-type(4n+2) .apexcharts-legend-marker { background-color: #1E4D46 !important; color: #1E4D46 !important; }
.apexcharts-tooltip-series-group:nth-of-type(4n+3) .apexcharts-tooltip-marker, .apexcharts-legend-series:nth-of-type(4n+3) .apexcharts-legend-marker { background-color: #D8CBB2 !important; color: #D8CBB2 !important; }
.apexcharts-tooltip-series-group:nth-of-type(4n+4) .apexcharts-tooltip-marker, .apexcharts-legend-series:nth-of-type(4n+4) .apexcharts-legend-marker { background-color: #B7791F !important; color: #B7791F !important; }
body.theme-dark .apexcharts-tooltip-series-group:nth-of-type(4n+2) .apexcharts-tooltip-marker, body.theme-dark .apexcharts-legend-series:nth-of-type(4n+2) .apexcharts-legend-marker { background-color: #EBE5D8 !important; color: #EBE5D8 !important; }
/* user status toggle: tomato block -> quiet status chip */
.btn.btn-status-update {
	background: rgba(180, 35, 24, .08) !important;
	color: #B42318 !important;
	border: 1px solid rgba(180, 35, 24, .28) !important;
	border-radius: 999px !important;
	font-weight: 600;
	padding: 4px 12px !important;
	min-height: 0 !important;
	box-shadow: none !important;
}
body.theme-dark .btn.btn-status-update { background: rgba(232, 134, 124, .1) !important; color: #EFA79F !important; border-color: rgba(232, 134, 124, .3) !important; }
/* vendor mini-icons painted in a fixed navy (#23344D): follow the text colour instead */
svg [fill="#23344D" i], svg [fill="#23344d"] { fill: currentColor !important; }
svg [stroke="#23344D" i] { stroke: currentColor !important; }

/* Tailwind status fills -> brand status colours */
:is([class~="bg-red-500"], [class~="bg-red-600"], [class~="bg-rose-500"]) { background-color: #B42318 !important; }
:is([class~="bg-green-500"], [class~="bg-green-600"], [class~="bg-emerald-500"], [class~="bg-emerald-600"]) { background-color: #2E7D5B !important; }
:is([class~="bg-yellow-500"], [class~="bg-amber-500"], [class~="bg-orange-500"]) { background-color: #B7791F !important; }

/* Payment gateway logos sit on a bone plate so dark wordmarks stay readable in both modes */
div.mbh-8:not(mbh) {
	background: #F6F3EE;
	border-radius: 14px;
	align-items: center;
	padding: 14%;
	box-shadow: inset 0 0 0 1px rgba(22, 58, 54, .08);
}
img[src*="/img/payments/"] { max-height: 64px !important; }

/* In-header search (inbox / chat history heads): a slim pill inside the header, never a full-height box */
.lqd-page form.absolute.mbh-9.mbh-9.mbh-9.mbh-9:not(mbh) {
	display: flex;
	align-items: center;
	padding: 0 16px;
}
.lqd-page form.absolute > .lqd-input-container.mbh-10.mbh-10.mbh-10:not(mbh) { height: 46px !important; width: 100%; }
.lqd-page form.absolute input.lqd-input.rounded-none.border-none {
	height: 46px !important;
	min-height: 0 !important;
	border: 1px solid var(--mb-line-strong) !important;
	border-radius: 999px !important;
	background: var(--mb-input) !important;
	box-shadow: none !important;
	padding-inline: 44px 52px !important;
	font-size: 14px !important;
}
.lqd-page form.absolute input.lqd-input.rounded-none.border-none:focus { border-color: var(--mb-green) !important; box-shadow: none !important; }
body.theme-dark .lqd-page form.absolute input.lqd-input.rounded-none.border-none:focus { border-color: var(--mb-lime) !important; }
.lqd-page form.absolute input.lqd-input.rounded-none.border-none::placeholder { color: var(--mb-muted) !important; }
/* its icon and close button sit inside the pill */
.lqd-page form.absolute.mbh-9.mbh-9.mbh-9.mbh-9:not(mbh) > svg.absolute { inset-inline-start: 32px !important; width: 18px; height: 18px; color: var(--mb-muted); }
.lqd-page form.absolute.mbh-9.mbh-9.mbh-9.mbh-9:not(mbh) > a.lqd-btn.absolute {
	inset-inline-end: 24px !important;
	width: 30px !important;
	height: 30px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border-radius: 999px !important;
	background: var(--mb-line) !important;
	color: var(--mb-ink) !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
}
.lqd-page form.absolute.mbh-9.mbh-9.mbh-9.mbh-9:not(mbh) > a.lqd-btn.absolute:hover { background: rgba(180, 35, 24, .14) !important; color: #B42318 !important; }
.lqd-page form.absolute.mbh-9.mbh-9.mbh-9.mbh-9:not(mbh) > a.lqd-btn.absolute svg { width: 14px !important; height: 14px !important; }

/* Tabler secondary outline buttons (copy, cancel): readable ink on both surfaces */
.btn.btn-outline-secondary { color: var(--mb-ink) !important; border-color: var(--mb-line-strong) !important; background: transparent !important; }
.btn.btn-outline-secondary:hover { background: var(--mb-line) !important; }

/* Pale Tailwind tag tints (changelog, badges) -> brand status tints */
body [class~="bg-green-100"], body [class~="bg-emerald-100"] { background-color: rgba(46, 125, 91, .14) !important; }
body [class~="text-green-600"], body [class~="text-green-700"], body [class~="text-emerald-600"] { color: #2E7D5B !important; }
body [class~="bg-blue-100"], body [class~="bg-indigo-100"], body [class~="bg-sky-100"], body [class~="bg-purple-100"], body [class~="bg-violet-100"] { background-color: rgba(166, 199, 50, .2) !important; }
body :is([class~="bg-blue-100"], [class~="bg-indigo-100"], [class~="bg-sky-100"], [class~="bg-purple-100"], [class~="bg-violet-100"])[class*="text-"] { color: #163A36 !important; }
body [class~="bg-yellow-100"], body [class~="bg-amber-100"], body [class~="bg-orange-100"] { background-color: rgba(183, 121, 31, .16) !important; }
body [class~="text-yellow-600"], body [class~="text-amber-600"], body [class~="text-orange-600"] { color: #B7791F !important; }
body [class~="bg-red-100"], body [class~="bg-rose-100"] { background-color: rgba(180, 35, 24, .12) !important; }
body [class~="text-red-600"], body [class~="text-rose-600"] { color: #B42318 !important; }
body.theme-dark [class~="text-green-600"], body.theme-dark [class~="text-green-700"], body.theme-dark [class~="text-emerald-600"] { color: #7FCBA4 !important; }
body.theme-dark :is([class~="bg-blue-100"], [class~="bg-indigo-100"], [class~="bg-sky-100"], [class~="bg-purple-100"], [class~="bg-violet-100"])[class*="text-"] { color: #C6DE6B !important; }
body.theme-dark [class~="text-yellow-600"], body.theme-dark [class~="text-amber-600"], body.theme-dark [class~="text-orange-600"] { color: #E3B062 !important; }
body.theme-dark [class~="text-red-600"], body.theme-dark [class~="text-rose-600"] { color: #EFA79F !important; }

/* a card dropped straight into a Tabler .row picks up the column gutter as padding: give it the gutter as margin instead */
.row > .lqd-card { padding-inline: 0 !important; margin-inline: calc(var(--tblr-gutter-x, 20px) * .5); width: auto !important; flex: 1 1 100%; }
/* card nested inside a card (settings forms): one surface, no double frame */
.lqd-card .row > .lqd-card { background: transparent !important; border: 0 !important; box-shadow: none !important; margin-inline: 0; }
.lqd-card .row > .lqd-card > .lqd-card-body { padding: 8px 0 !important; }
.lqd-card .row.mbh-11 { margin-inline: 0 !important; }
.lqd-card-body > form.mbh-12.mbh-12 { padding-bottom: 4px; }
.lqd-card.mbh-13.mbh-13:not(.row > .lqd-card) { padding: 26px 28px 28px !important; }
@media (max-width: 767px) { .lqd-card.mbh-13.mbh-13:not(.row > .lqd-card) { padding: 20px 16px !important; } }

/* Buttons: readable label, and on desktop the button hugs its label instead of stretching across the form */
body.scriptif :is(.btn, .lqd-btn) { text-decoration: none !important; }
@media (min-width: 1024px) {
	body.scriptif :is(.btn, .lqd-btn):not(.lqd-btn-size-none):not(.btn-icon) { font-size: 14px !important; }
	body.scriptif form :is(.btn-primary, .lqd-btn-primary, [type="submit"]).w-full:not(.ms-bar *):not([class*="rounded-full"][class*="size-"]) {
		width: auto !important;
		min-width: 168px;
		padding-inline: 26px 10px !important;
		margin-inline-start: auto;
		display: flex !important;
		justify-content: center;
		font-size: 14px !important;
		min-height: 46px;
	}
	body.scriptif form :is(.btn-primary, .lqd-btn-primary, [type="submit"]).w-full:not(.mb-arrow) { padding-inline: 26px !important; }
}
/* Tabler controls default to the system UI font (its Arabic draws a long ruled baseline): use the brand faces everywhere */
body.scriptif :is(.btn, button, input, select, textarea, .form-control, .form-select, .dropdown-item, .badge, .table) { font-family: var(--mb-font-ui) !important; }

/* the indeterminate loading bar slides past the viewport edge: never let it create sideways scroll on phones */
html.mbh-14:not(mbh), body.scriptif { overflow-x: clip; }
/* the core sets body { overflow-y: auto }, which makes <body> a scroll box only as tall as the page content.
   On short pages (e.g. the extensions marketplace) that box ends mid-screen and clips the studio-bar panels
   hanging below the header. The document already scrolls on <html>, so let the body overflow visibly. */
body.scriptif { overflow-y: visible; }
.lqd-app-loading-indicator, .lqd-progress-bar-indeterminate { max-width: 100vw; }

/* Button rows in modal / card footers (plain inline buttons, no gap): space them and give them one height */
:is(div.text-end, div.text-start, div.text-center, .lqd-modal-foot, .modal-footer).mb-btn-row.mb-btn-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
div.text-end.mb-btn-row.mb-btn-row { justify-content: flex-end; }
div.text-center.mb-btn-row.mb-btn-row { justify-content: center; }
:is(div.text-end, div.text-start, div.text-center, .lqd-modal-foot, .modal-footer).mb-btn-row.mb-btn-row > :is(.lqd-btn, .btn) {
	min-height: 44px;
	height: 44px;
	margin: 0 !important;
	padding-block: 0 !important;
	font-size: 14px !important;
}
:is(div.text-end, div.text-start, div.text-center, .lqd-modal-foot, .modal-footer) > :is(.lqd-btn-outline, .btn-outline-secondary, .lqd-btn-secondary) {
	border-width: 1px !important;
	box-shadow: none !important;
	outline: 0 !important;
	padding-inline: 20px !important;
}

/* user menu: every item (sign-out included) centred in one column; sign-out reads as a destructive action */
div.lqd-dropdown-dropdown-content.mb-dd-acct.mb-dd-acct:not(form) :is(a, button):not(.lqd-btn):not([class*="rounded-full"]) {
	width: 100% !important;
	justify-content: center !important;
	text-align: center !important;
	border-radius: 10px;
}
.lqd-dropdown-dropdown-content form.w-full > button.w-full { min-width: 100% !important; min-height: 0 !important; color: #B42318; }
body.theme-dark .lqd-dropdown-dropdown-content form.w-full > button.w-full { color: #EFA79F; }
.lqd-dropdown-dropdown-content form.w-full > button.w-full:hover { background: rgba(180, 35, 24, .1) !important; }


/* Desktop control sizing: text buttons get a comfortable target and a readable label */
@media (min-width: 1024px) {
	body.scriptif :is(.btn, .lqd-btn):not(.lqd-btn-size-none):not(.btn-icon):not([class*="size-"]):not(.ms-bar *):not(.lqd-dropdown-dropdown-content *) {
		min-height: 44px;
		font-size: 15px !important;
		padding-inline: 20px;
	}
	body.scriptif :is(.btn, .lqd-btn).mb-arrow:not(.lqd-btn-size-none):not([class*="size-"]):not(.ms-bar *) { padding-inline: 20px 6px; }
	[dir="rtl"] body.scriptif :is(.btn, .lqd-btn).mb-arrow:not(.lqd-btn-size-none):not([class*="size-"]):not(.ms-bar *) { padding-inline: 20px 6px; }
}

/* Chat v2 screens (CRM assistant, AI chat): the theme ships its own neutral greys; repaint them in brand surfaces */
body.lqd-chat-v2 :is(.lqd-chat-pro-header, .lqd-chat-form-wrap) { background-color: var(--mb-page) !important; }
body.lqd-chat-v2 .chats-sidebar-wrap {
	background-color: var(--mb-card) !important;
	border-inline-start: 1px solid var(--mb-line);
}
/* one continuous panel: the inner card and the links under it share the sidebar surface */
body.lqd-chat-v2 .chats-sidebar-wrap > .lqd-card {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
body.lqd-chat-v2 .chats-sidebar-links { border-top: 1px solid var(--mb-line); padding-top: 18px; }
body.lqd-chat-v2 .chats-sidebar-links a { font-size: 13px !important; color: var(--mb-muted) !important; }
body.lqd-chat-v2 .chats-sidebar-links a:hover { color: var(--mb-ink) !important; }
body.lqd-chat-v2 .lqd-dropdown-dropdown { background-color: var(--mb-card) !important; }
body.lqd-chat-v2 input.lqd-input { background-color: var(--mb-input) !important; }
/* search row: the delete control is a quiet 44px icon button, not a big disc */
body .chats-search > :is(button, a):not(#mb-x) {
	width: 44px !important;
	height: 44px !important;
	min-height: 0 !important;
	min-width: 0 !important;
	padding: 0 !important;
	flex-shrink: 0;
	border-radius: 12px !important;
	background: transparent !important;
	border: 1px solid var(--mb-line-strong) !important;
	color: var(--mb-muted) !important;
	box-shadow: none !important;
}
body .chats-search > :is(button, a):not(#mb-x):hover { color: #B42318 !important; border-color: rgba(180, 35, 24, .4) !important; }
body .chats-search input.lqd-input { height: 44px !important; min-height: 0 !important; }

/* Anti-flash: vendor illustrations stay invisible until medya-ui.js swaps them (shown anyway after 1.5s if the swap never comes) */
@keyframes mb-reveal { to { opacity: 1; } }
img[src*="chatbot-create"]:not([data-mb]),
img[src*="chatbot-history"]:not([data-mb]),
img[src*="chat-default"]:not([data-mb]),
img[src*="ai-agent/images/img-1"]:not([data-mb]),
img[src*="ai-agent/images/avatars/avatar-1."]:not([data-mb]),
img[src*="ai-agent/images/avatars/avatar-2."]:not([data-mb]),
img[src*="ai-agent/images/avatars/avatar-3."]:not([data-mb]),
img[src*="ai-agent/images/avatars/avatar-4."]:not([data-mb]),
img[src*="ai-agent/images/avatars/avatar-5."]:not([data-mb]),
img[src*="ai-agent/images/avatars/avatar-6."]:not([data-mb]),
img[src*="ai-agent/images/avatars/avatar-7."]:not([data-mb]),
img[src*="auto-edit-videos/images/avatar-1"]:not([data-mb]),
img[src*="chatbot-voice/images/conversation-history"]:not([data-mb]),
img[src*="chatbot-voice/images/new-voice-chabot"]:not([data-mb]),
img[src*="crm/images/img-1"]:not([data-mb]),
img[src*="phone-call-agent/images/robot"]:not([data-mb]),
img[src*="social-media-agent/images/img-1"]:not([data-mb]),
img[src*="social-media-agent/images/img-2"]:not([data-mb]),
img[src*="social-media-agent/images/img-3"]:not([data-mb]),
img[src*="social-media-agent/images/img-7"]:not([data-mb]),
img[src*="social-media-agent/images/img-8"]:not([data-mb]),
img[src*="social-media-agent/images/img-9"]:not([data-mb]),
img[src*="social-media/images/like"]:not([data-mb]),
img[src*="img/auth/default-avatar"]:not([data-mb]),
img[src*="marketing-bot/images/avatar."]:not([data-mb]) {
	opacity: 0;
	animation: mb-reveal .01s 1.5s forwards;
}

/* Tailwind space-x-* puts the gap on the left of each sibling; in Arabic that lands on the wrong side and buttons touch */
[dir="rtl"] [class*="space-x-"] > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; }
/* outline buttons: a hairline, not a 3px ring */
.lqd-btn.lqd-btn-outline { outline-width: 1px !important; outline-color: var(--mb-line-strong) !important; }

/* padding-less cards that open with a heading (themes, marketplace intros): give the content room inside the frame */
.lqd-card.mbh-15.mbh-15.mbh-15:not(mbh):not(mbh) { padding: 28px 30px 30px !important; }
@media (max-width: 767px) { .lqd-card.mbh-15.mbh-15.mbh-15:not(mbh):not(mbh) { padding: 20px 16px !important; } }
.lqd-card.mbh-15.mbh-15.mbh-15:not(mbh):not(mbh) h2 { font-size: 22px; line-height: 1.3; }
.lqd-card.mbh-15.mbh-15.mbh-15:not(mbh):not(mbh) p { color: var(--mb-muted); line-height: 1.7; }

/* Admin overview: the vendor marketplace banner is not shown (its puzzle art now lives in the admin hero) */
.flex.flex-col.gap-11 > .lqd-card:first-child.mbh-16.mbh-16 { display: none; }
/* a half-width widget left alone on its row stretches across it (set by medya-ui.js) */
.mb-row-fill { grid-column: 1 / -1 !important; }

/* activity / timeline feeds start at the top of their card (the vendor centres them vertically when the card is stretched) */
.lqd-card-body.flex-col.justify-center.mbh-17.mbh-17 { justify-content: flex-start !important; gap: 14px; }

/* Bar charts with labels inside the bars: a soft tinted bar and a clean label, no outlined text */
.apexcharts-canvas.mbh-18.mbh-18 .apexcharts-bar-area { fill: rgba(22, 58, 54, .16) !important; stroke: none !important; }
body.theme-dark .apexcharts-canvas.mbh-18.mbh-18 .apexcharts-bar-area { fill: rgba(166, 199, 50, .26) !important; }
.apexcharts-bar-series .apexcharts-datalabel {
	fill: var(--mb-ink) !important;
	stroke: none !important;
	stroke-width: 0 !important;
	paint-order: normal !important;
	font-weight: 600 !important;
}
body.theme-dark .apexcharts-bar-series .apexcharts-datalabel { fill: #FBFAF7 !important; }

/* Area/line charts: the outline and point markers follow the brand (the vendor leaves them lavender and blue) */
.apexcharts-area-series path.apexcharts-area { stroke: #163A36 !important; }
body.theme-dark .apexcharts-area-series path.apexcharts-area { stroke: #A6C732 !important; }
.apexcharts-marker { fill: #A6C732 !important; stroke: var(--mb-card) !important; }
/* nothing to plot in the selected range: say so instead of showing an empty frame */
[data-mb-empty] { position: relative; }
[data-mb-empty]::after {
	content: attr(data-mb-empty);
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--mb-muted);
	font-size: 14px;
	font-weight: 500;
	pointer-events: none;
}

/* Revenue sources: total, one split bar, a ranked list */
.sc-rs { display: flex; flex-direction: column; gap: 22px; padding: 6px 4px 4px; }
.sc-rs-total { display: flex; align-items: baseline; gap: 10px; }
.sc-rs-total-value { font: 800 40px/1 var(--mb-font-display); color: var(--mb-ink); letter-spacing: -.02em; }
.sc-rs-total-label { color: var(--mb-muted); font-size: 14px; font-weight: 500; }
.sc-rs-bar { display: flex; gap: 4px; height: 14px; border-radius: 999px; overflow: hidden; background: var(--mb-line-soft); }
.sc-rs-seg { flex-basis: 0; min-width: 6px; border-radius: 999px; }
.sc-rs-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sc-rs-row {
	display: grid;
	grid-template-columns: 12px 1fr auto 52px;
	align-items: center;
	gap: 12px;
	padding: 13px 2px;
	border-top: 1px solid var(--mb-line-soft);
	font-size: 14px;
}
.sc-rs-row:first-child { border-top: 0; }
.sc-rs-dot { width: 10px; height: 10px; border-radius: 3px; }
.sc-rs-name { color: var(--mb-ink); font-weight: 600; }
.sc-rs-count { color: var(--mb-muted); font-variant-numeric: tabular-nums; }
.sc-rs-share { text-align: end; color: var(--mb-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-rs-row.is-zero :is(.sc-rs-name, .sc-rs-share) { color: var(--mb-muted); font-weight: 500; }
.sc-rs-row.is-zero .sc-rs-dot { opacity: .35; }
.sc-rs-empty { margin: auto; padding: 40px 0; color: var(--mb-muted); text-align: center; }
.sc-rs-tone-1 { background: #A6C732; }
.sc-rs-tone-2 { background: #163A36; }
.sc-rs-tone-3 { background: #D8CBB2; }
.sc-rs-tone-4 { background: #B7791F; }
.sc-rs-tone-5 { background: #5F6B68; }
body.theme-dark .sc-rs-tone-2 { background: #EBE5D8; }
.sc-rs-tone-rest { background: var(--mb-line-strong); }
.sc-rs-row.is-rest :is(.sc-rs-name, .sc-rs-share) { color: var(--mb-muted); font-weight: 500; }

/* Ranked lists (top countries, traffic sources, API cost): rows from the top, value + slim proportional bar */
.mb-gauge-hidden ~ .sc-rank, .sc-rank { list-style: none; margin: 0; padding: 4px 2px 0; display: flex; flex-direction: column; gap: 16px; align-self: stretch; }
.sc-rank-row { display: grid; grid-template-columns: 1fr auto; row-gap: 8px; column-gap: 12px; align-items: baseline; }
.sc-rank-name { color: var(--mb-ink); font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-rank-value { color: var(--mb-muted); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.sc-rank-track { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--mb-line-soft); overflow: hidden; }
.sc-rank-fill { display: block; height: 100%; border-radius: inherit; background: var(--mb-green); }
body.theme-dark .sc-rank-fill { background: #A6C732; }
.sc-rank-row:not(:first-child) .sc-rank-fill { opacity: .75; }
/* the chart's host keeps its fixed min-height for the canvas; the list needs none */
.mb-list-host.mb-list-host { min-height: 0 !important; height: auto !important; }

/* No legacy tinted gradients anywhere: blue / indigo / violet / purple / pink / sky / cyan washes become a flat brand surface */
:is([class*="from-blue-"], [class*="from-indigo-"], [class*="from-violet-"], [class*="from-purple-"], [class*="from-pink-"], [class*="from-fuchsia-"], [class*="from-sky-"], [class*="from-cyan-"])[class*="bg-gradient-to-"] {
	background-image: none !important;
}

/* Feature banners (call agents list / history / new, social media overview) ship teal-to-lilac or green-to-lime
   washes (Tailwind arbitrary bg-[linear-gradient(...)] or the gradient-from/via/to tokens).
   Scriptif has no gradients: they become a flat sand panel in light mode and a deep green panel in dark mode,
   the same surfaces as the plan tile and the home hero. */
body.scriptif .lqd-page-content-container :is(div, section)[class*="rounded-"]:is([class*="bg-[linear-gradient"], [class*="bg-[radial-gradient"], [class*="bg-gradient-to-"][class*="from-gradient-from"]):not(.lqd-btn) {
	background: #ECE6DA !important;
	background-image: none !important;
	color: var(--mb-ink);
	border: 0 !important;
	border-radius: 24px !important;
	box-shadow: none !important;
}
body.scriptif.theme-dark .lqd-page-content-container :is(div, section)[class*="rounded-"]:is([class*="bg-[linear-gradient"], [class*="bg-[radial-gradient"], [class*="bg-gradient-to-"][class*="from-gradient-from"]):not(.lqd-btn) {
	background: #12322E !important;
	color: #EBE5D8;
	box-shadow: inset 0 0 0 1px rgba(235, 229, 216, .06) !important;
}
body.scriptif .lqd-page-content-container [class*="rounded-"]:is([class*="bg-[linear-gradient"], [class*="bg-gradient-to-"][class*="from-gradient-from"]):not(.lqd-btn) :is(h1, h2, h3) {
	color: var(--mb-green) !important;
	font-family: var(--mb-font-display) !important;
	font-weight: 800 !important;
}
body.scriptif.theme-dark .lqd-page-content-container [class*="rounded-"]:is([class*="bg-[linear-gradient"], [class*="bg-gradient-to-"][class*="from-gradient-from"]):not(.lqd-btn) :is(h1, h2, h3) { color: #FBFAF7 !important; }
/* the secondary (ghost) button needs its own surface to read on the sand panel; in dark mode a hairline */
body.scriptif:not(.theme-dark) .lqd-page-content-container [class*="rounded-"]:is([class*="bg-[linear-gradient"], [class*="bg-gradient-to-"][class*="from-gradient-from"]):not(.lqd-btn) .lqd-btn-ghost-shadow { background: #FBFAF7 !important; box-shadow: inset 0 0 0 1px var(--mb-line) !important; }
body.scriptif.theme-dark .lqd-page-content-container [class*="rounded-"]:is([class*="bg-[linear-gradient"], [class*="bg-gradient-to-"][class*="from-gradient-from"]):not(.lqd-btn) .lqd-btn-ghost-shadow { box-shadow: inset 0 0 0 1px rgba(235, 229, 216, .18) !important; }
/* buttons painted with the gradient tokens (e.g. social agent chat "start") fall back to their flat primary fill */
body.scriptif .lqd-btn:is([class*="bg-gradient-to-"], [class*="bg-[linear-gradient"]) { background-image: none !important; }
/* CRM overview cards: the pastel lilac/pink hover wash becomes a flat sand tint */
body.scriptif [class*="before:bg-gradient-to-"]::before { background-image: none !important; background-color: #ECE6DA; }
body.scriptif.theme-dark [class*="before:bg-gradient-to-"]::before { background-color: rgba(235, 229, 216, .05); }
/* toastr "info" notices are teal-blue: use the brand green */
body.scriptif #toast-container > .toast-info { background-color: #163A36 !important; color: #FBFAF7 !important; }

/* Affiliate overview: flat card, invitation on one side, earnings in an inset panel on the other */
.lqd-affiliate-overview { background-image: none !important; }
.lqd-affiliate-overview > .lqd-card-body > .flex { align-items: center; column-gap: 32px; }
.lqd-affiliate-overview h4.mb-10 { width: auto !important; margin-bottom: 26px !important; font-size: 22px !important; line-height: 1.55; font-weight: 800; }
.lqd-affiliate-overview .ms-auto {
	max-width: 380px;
	padding: 26px 28px;
	border-radius: 22px;
	background: var(--mb-input);
	border: 1px solid var(--mb-line);
	text-align: start !important;
}
.lqd-affiliate-overview .ms-auto > h4 { font-size: 13px !important; font-weight: 600; color: var(--mb-muted) !important; margin-bottom: 6px !important; }
.lqd-affiliate-overview .ms-auto > p.text-6xl { font: 800 52px/1.05 var(--mb-font-display) !important; color: var(--mb-green) !important; margin-bottom: 18px !important; }
body.theme-dark .lqd-affiliate-overview .ms-auto > p.text-6xl { color: #A6C732 !important; }
.lqd-affiliate-overview .ms-auto > p.mb-0 {
	display: flex; justify-content: space-between; gap: 12px;
	padding: 10px 0; border-top: 1px solid var(--mb-line-soft);
	font-size: 14px; font-weight: 600;
}
.lqd-affiliate-overview .ms-auto > p.mb-0 > span { opacity: 1 !important; color: var(--mb-muted); font-weight: 500; }

/* Auto-edit video composer: the rounded wrapper is the one card; the composer inside stays flat */
div.mbh-19 {
	background: var(--mb-card) !important;
	border: 1px solid var(--mb-line-strong) !important;
	border-radius: 22px !important;
	box-shadow: var(--mb-lift) !important;
	transition: border-color .2s var(--mb-ease);
}
div.mbh-19:focus-within { border-color: var(--mb-green) !important; }
body.theme-dark div.mbh-19:focus-within { border-color: var(--mb-lime) !important; }
.lqd-auto-edit-composer { background: transparent !important; padding: 18px 18px 14px !important; }
.lqd-auto-edit-composer textarea { font-size: 16px !important; line-height: 1.7 !important; padding: 4px 6px 12px !important; min-height: 84px; color: var(--mb-ink) !important; }
.lqd-auto-edit-composer form > .flex.flex-wrap { gap: 10px !important; padding-top: 12px; border-top: 1px solid var(--mb-line-soft); }
.lqd-auto-edit-composer form > .flex.flex-wrap :is(.lqd-btn, button) { min-height: 40px !important; height: 40px; }
.lqd-auto-edit-composer > :not(form) { margin-top: 10px; text-align: center; color: var(--mb-muted); font-size: 12px; }
/* alerts dropped into wrapping flex rows (composer pages) take the full row instead of shrinking to their text */
.flex.flex-wrap > .lqd-alert { width: 100% !important; max-width: none !important; flex-basis: 100%; margin: 0 0 16px !important; border-radius: 14px !important; padding: 12px 16px !important; align-items: center; }
/* setup / "not configured" alerts read as warnings: amber tint, not success green */
.lqd-alert.mb-alert-tone:not(svg) {
	background: rgba(183, 121, 31, .1) !important;
	border-color: rgba(183, 121, 31, .32) !important;
	color: #8A5A14 !important;
}
.lqd-alert.mb-alert-tone:not(svg) * { color: inherit !important; }
body.theme-dark .lqd-alert.mb-alert-tone:not(svg) { color: #E3B062 !important; background: rgba(183, 121, 31, .12) !important; }

/* FullCalendar is initialised left-to-right by the vendor: mirror its grids for Arabic so the week starts on the right */
[dir="rtl"] .fc-direction-ltr :is(.fc-scrollgrid-sync-table, .fc-col-header, .fc-daygrid-body table, .fc-timegrid-body table, .fc-list-table) { direction: rtl; }
[dir="rtl"] .fc-direction-ltr .fc-daygrid-day-top { flex-direction: row; }

/* KPI title markers use bg-secondary (same as the card): give them the brand accent so they read */
.lqd-statistic-title > span[class*="rounded"][class*="size-"] { background-color: var(--mb-green) !important; }
body.theme-dark .lqd-statistic-title > span[class*="rounded"][class*="size-"] { background-color: #A6C732 !important; }

/* Workflow builder: the name field in the top bar grows with its text instead of clipping it */
.lqd-ai-agent-mobile-nav-wrap .lqd-input-container { width: auto !important; }
.lqd-ai-agent-mobile-nav-wrap .lqd-input-container > input.lqd-input {
	field-sizing: content;
	min-width: 200px;
	max-width: 380px;
	height: 40px !important;
	padding-inline: 14px !important;
	border-radius: 12px !important;
	unicode-bidi: plaintext;
	text-overflow: ellipsis;
}

/* Arabic glyphs need room: tight vendor leadings (1–1.2em) made stacked headline lines touch */
[dir="rtl"] body.scriptif :is(p, h1, h2, h3, h4, h5, h6):is([class*="leading-[1em]"], [class*="leading-[1.1em]"], [class*="leading-[1.15em]"], [class*="leading-[1.2em]"], .leading-none, .leading-tight) { line-height: 1.45; }
/* workflow copilot welcome: greeting line set apart from the headline */
body.scriptif .group\/copilot p > span.block { margin-bottom: .4em; font-size: .82em; }

/* settings pages whose single form card ships with a size-none body (and no inner cards of its own): give it real inner padding */
body.scriptif .lqd-page-settings .lqd-card > .lqd-card-body.lqd-card-size-none:not(.mbh-20) { padding: 32px clamp(20px, 3vw, 40px); }
/* UGC camera presets: the "auto" artwork is a bare white tile, sit it on the bone surface instead */
body.scriptif img[src*="camera-presets/auto"] { filter: sepia(.18) brightness(.94); }
/* native field chrome (number spinners, date pickers, select arrows) follows the dark theme instead of flashing white */
body.scriptif.theme-dark :is(input, select, textarea) { color-scheme: dark; }

/* ==========================================================================
   Themes page — the installed theme introduces itself (name, release, maker)
   ========================================================================== */
.sc-theme-feature {
	position: relative;
	margin-bottom: 48px;
	padding: clamp(22px, 3.4vw, 34px);
	border-radius: 28px;
	background: #0F2B27;
	color: #EBE5D8;
	overflow: hidden;
	isolation: isolate;
}
body.theme-dark .sc-theme-feature { background: #12322E; box-shadow: inset 0 0 0 1px rgba(235, 229, 216, .07); }
.sc-theme-feature-art { position: absolute; top: clamp(14px, 2.4vw, 22px); inset-inline-end: clamp(10px, 2vw, 20px); width: 168px; }
.sc-theme-status, .sc-theme-name { margin-inline-end: 176px !important; }
.sc-theme-tagline { min-height: 1em; }
.sc-theme-feature-art .mb-puzzle { display: block; width: 100%; height: auto; }
.sc-theme-feature:hover .mb-puzzle .mb-p4 { transform: translate(0, 0) rotate(0deg); }
.sc-theme-feature:hover .mb-puzzle .mb-slot { opacity: 0; }
.sc-theme-status {
	display: inline-flex; align-items: center; gap: 8px;
	margin: 0 0 18px; padding: 6px 12px 6px 14px;
	border-radius: 9999px;
	background: rgba(166, 199, 50, .12);
	color: #C6DE6B; font-size: 12.5px; font-weight: 600;
}
.sc-theme-status > span { width: 7px; height: 7px; border-radius: 50%; background: #A6C732; }
.sc-theme-name {
	margin: 0 !important;
	font-family: 'Bricolage Grotesque', var(--mb-font-display), sans-serif !important;
	font-size: clamp(2.6rem, 2rem + 2.4vw, 3.6rem) !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: -.035em;
	color: #FBFAF7 !important;
	text-align: start;
}
[dir="rtl"] .sc-theme-name { text-align: right; }
.sc-theme-name > span { background-image: linear-gradient(transparent 62%, rgba(166, 199, 50, .55) 62%, rgba(166, 199, 50, .55) 90%, transparent 90%); padding-inline: 2px; }
.sc-theme-tagline { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: rgba(235, 229, 216, .72); }
.sc-theme-specs {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 22px 0 0; padding: 0;
	row-gap: 4px;
	border-top: 1px solid rgba(235, 229, 216, .1);
}
.sc-theme-specs > div { padding: 16px 0 0; }
.sc-theme-specs > div:nth-child(even) { padding-inline-start: 18px; border-inline-start: 1px solid rgba(235, 229, 216, .1); }
.sc-theme-specs dt { margin: 0 0 6px; font-size: 12px; font-weight: 500; color: rgba(235, 229, 216, .55); }
.sc-theme-specs dd { margin: 0; font-size: 16px; font-weight: 600; color: #FBFAF7; }
[dir="rtl"] .sc-theme-specs dd[dir="ltr"] { text-align: right; }
.sc-theme-specs > div:nth-child(odd) { padding-inline-end: 18px; }
.sc-theme-type { display: flex; align-items: baseline; gap: 8px; }
.sc-theme-type span { font-size: 17px; line-height: 1; }
.sc-theme-swatches { display: flex; padding-top: 3px; }
.sc-theme-swatches span { width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 2px #0F2B27; outline: 1px solid rgba(235, 229, 216, .2); outline-offset: -1px; }
body.theme-dark .sc-theme-swatches span { box-shadow: 0 0 0 2px #12322E; }
.sc-theme-swatches span + span { margin-inline-start: -5px; }
.sc-theme-author {
	display: flex; align-items: center; gap: 12px;
	margin-top: 22px; padding: 12px 14px;
	border-radius: 18px;
	background: rgba(235, 229, 216, .06);
}
.sc-theme-monogram {
	display: grid; place-items: center; flex-shrink: 0;
	width: 42px; height: 42px; border-radius: 50%;
	background: #A6C732; color: #0F2B27;
	font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; font-weight: 800; letter-spacing: -.02em;
}
.sc-theme-author-text { display: flex; flex-direction: column; gap: 2px; }
.sc-theme-author-text small { font-size: 12px; color: rgba(235, 229, 216, .6); }
.sc-theme-author-text strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700; color: #FBFAF7; text-align: right; }
@media (max-width: 640px) {
	.sc-theme-feature-art { display: none; }
	.sc-theme-status, .sc-theme-name { margin-inline-end: 0 !important; }
}

/* ==========================================================================
   Marketing Bot (روبوت التسويق) — visual fixes. Paste at the end of scriptif.css.
   Global-safe (same vendor markup on Social Media / generator pages): groups 1, 2, 3, 5 and the
   last rule of 6 (white-on-ivory fix). Everything else is scoped to body[class*="page-user-marketing-bot"].
   ========================================================================== */

/* 1 · Card hover: drop the vendor conic "outline glow"; a flat hairline is the hover cue (as .ms-tile-link) */
body.scriptif .lqd-outline-glow { display: none !important; }
body.scriptif .lqd-card.mbh-21:hover { border-color: var(--mb-line-strong) !important; }

/* 2 · Overview stat icons: flat single-colour stroke instead of the green→lime SVG gradient */
body.scriptif svg[stroke^="url(#social-posts-overview-gradient"] { stroke: currentColor; color: var(--mb-green); }
body.scriptif.theme-dark svg[stroke^="url(#social-posts-overview-gradient"] { color: var(--mb-lime); }

/* 3 · Vendor "AI sparkle" (purple→blue→green gradient fill) -> the brand lightning mark, flat in the button's own colour */
body.scriptif svg.mbh-22:not(mbh) {
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M96,240l16-80L48,136,160,16,144,96l64,24Z' opacity='0.2'/%3E%3Cpath d='M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M96,240l16-80L48,136,160,16,144,96l64,24Z' opacity='0.2'/%3E%3Cpath d='M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.scriptif svg > path[fill^="url(#paint0_linear_8906_3722"] { fill: none; }

/* 4 · Marketing overview: the four stat icons drawn in the theme's Phosphor style (megaphone / clock / paper plane / users) */
body.scriptif.page-user-marketing-bot-dashboard .lqd-social-media-overview-card svg[stroke^="url(#social-posts-overview-gradient"] {
	width: 34px; height: 34px;
	stroke: none; background-color: currentColor;
	-webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}
body.scriptif.page-user-marketing-bot-dashboard .lqd-social-media-overview-card svg[stroke^="url(#social-posts-overview-gradient"] > * { display: none; }
body.scriptif.page-user-marketing-bot-dashboard .lqd-social-media-overview-card svg.mbh-23:not(mbh) { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,120a40,40,0,0,1-40,40H160V80h40A40,40,0,0,1,240,120Z' opacity='0.2'/%3E%3Cpath d='M248,120a48.05,48.05,0,0,0-48-48H160.2c-2.91-.17-53.62-3.74-101.91-44.24A16,16,0,0,0,32,40V200a16,16,0,0,0,26.29,12.25c37.77-31.68,77-40.76,93.71-43.3v31.72A16,16,0,0,0,159.12,214l11,7.33A16,16,0,0,0,194.5,212l11.77-44.36A48.07,48.07,0,0,0,248,120ZM48,199.93V40h0c42.81,35.91,86.63,45,104,47.24v65.48C134.65,155,90.84,164.07,48,199.93Zm131,8,0,.11-11-7.33V168h21.6ZM200,152H168V88h32a32,32,0,1,1,0,64Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,120a40,40,0,0,1-40,40H160V80h40A40,40,0,0,1,240,120Z' opacity='0.2'/%3E%3Cpath d='M248,120a48.05,48.05,0,0,0-48-48H160.2c-2.91-.17-53.62-3.74-101.91-44.24A16,16,0,0,0,32,40V200a16,16,0,0,0,26.29,12.25c37.77-31.68,77-40.76,93.71-43.3v31.72A16,16,0,0,0,159.12,214l11,7.33A16,16,0,0,0,194.5,212l11.77-44.36A48.07,48.07,0,0,0,248,120ZM48,199.93V40h0c42.81,35.91,86.63,45,104,47.24v65.48C134.65,155,90.84,164.07,48,199.93Zm131,8,0,.11-11-7.33V168h21.6ZM200,152H168V88h32a32,32,0,1,1,0,64Z'/%3E%3C/svg%3E"); transform: scaleX(-1); }
body.scriptif.page-user-marketing-bot-dashboard .lqd-social-media-overview-card svg.mbh-24:not(mbh) { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z' opacity='0.2'/%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z' opacity='0.2'/%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z'/%3E%3C/svg%3E"); }
body.scriptif.page-user-marketing-bot-dashboard .lqd-social-media-overview-card svg.mbh-25:not(mbh) { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M223.69,42.18l-58.22,192a8,8,0,0,1-14.92,1.25L108,148,20.58,105.45a8,8,0,0,1,1.25-14.92l192-58.22A8,8,0,0,1,223.69,42.18Z' opacity='0.2'/%3E%3Cpath d='M227.32,28.68a16,16,0,0,0-15.66-4.08l-.15,0L19.57,82.84a16,16,0,0,0-2.49,29.8L102,154l41.3,84.87A15.86,15.86,0,0,0,157.74,248q.69,0,1.38-.06a15.88,15.88,0,0,0,14-11.51l58.2-191.94c0-.05,0-.1,0-.15A16,16,0,0,0,227.32,28.68ZM157.83,231.85l-.05.14,0-.07-40.06-82.3,48-48a8,8,0,0,0-11.31-11.31l-48,48L24.08,98.25l-.07,0,.14,0L216,40Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M223.69,42.18l-58.22,192a8,8,0,0,1-14.92,1.25L108,148,20.58,105.45a8,8,0,0,1,1.25-14.92l192-58.22A8,8,0,0,1,223.69,42.18Z' opacity='0.2'/%3E%3Cpath d='M227.32,28.68a16,16,0,0,0-15.66-4.08l-.15,0L19.57,82.84a16,16,0,0,0-2.49,29.8L102,154l41.3,84.87A15.86,15.86,0,0,0,157.74,248q.69,0,1.38-.06a15.88,15.88,0,0,0,14-11.51l58.2-191.94c0-.05,0-.1,0-.15A16,16,0,0,0,227.32,28.68ZM157.83,231.85l-.05.14,0-.07-40.06-82.3,48-48a8,8,0,0,0-11.31-11.31l-48,48L24.08,98.25l-.07,0,.14,0L216,40Z'/%3E%3C/svg%3E"); }
body.scriptif.page-user-marketing-bot-dashboard .lqd-social-media-overview-card svg.mbh-26:not(mbh) { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M136,108A52,52,0,1,1,84,56,52,52,0,0,1,136,108Z' opacity='0.2'/%3E%3Cpath d='M117.25,157.92a60,60,0,1,0-66.5,0A95.83,95.83,0,0,0,3.53,195.63a8,8,0,1,0,13.4,8.74,80,80,0,0,1,134.14,0,8,8,0,0,0,13.4-8.74A95.83,95.83,0,0,0,117.25,157.92ZM40,108a44,44,0,1,1,44,44A44.05,44.05,0,0,1,40,108Zm210.14,98.7a8,8,0,0,1-11.07-2.33A79.83,79.83,0,0,0,172,168a8,8,0,0,1,0-16,44,44,0,1,0-16.34-84.87,8,8,0,1,1-5.94-14.85,60,60,0,0,1,55.53,105.64,95.83,95.83,0,0,1,47.22,37.71A8,8,0,0,1,250.14,206.7Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M136,108A52,52,0,1,1,84,56,52,52,0,0,1,136,108Z' opacity='0.2'/%3E%3Cpath d='M117.25,157.92a60,60,0,1,0-66.5,0A95.83,95.83,0,0,0,3.53,195.63a8,8,0,1,0,13.4,8.74,80,80,0,0,1,134.14,0,8,8,0,0,0,13.4-8.74A95.83,95.83,0,0,0,117.25,157.92ZM40,108a44,44,0,1,1,44,44A44.05,44.05,0,0,1,40,108Zm210.14,98.7a8,8,0,0,1-11.07-2.33A79.83,79.83,0,0,0,172,168a8,8,0,0,1,0-16,44,44,0,1,0-16.34-84.87,8,8,0,1,1-5.94-14.85,60,60,0,0,1,55.53,105.64,95.83,95.83,0,0,1,47.22,37.71A8,8,0,0,1,250.14,206.7Z'/%3E%3C/svg%3E"); }

/* 5 · Campaign editor: the content field is a labelled composer — keep its label/“تحسين” row inside the card, chips left-packed */
body.scriptif .lqd-page div.mbh-5.mbh-5:not(mbh).mbh-4:not(mbh):not(mbh) > .lqd-input-container > .lqd-input-label {
	padding: 16px 24px 0 !important; margin-bottom: 0 !important;
}
body.scriptif .lqd-page div.mbh-5.mbh-5:not(mbh) > .lqd-input-container + div.flex-wrap:where(.mbh-27):not(mbh) {
	justify-content: flex-start !important; gap: 6px !important;
}

/* 6 · Campaign preview: brand colours for the "Your Business" badge and image placeholder; dark mode: no white icon on the ivory primary dot (global) */
body.scriptif[class*="page-user-marketing-bot"] svg.mb-ph:is(.text-green-500, .text-sky-500) { color: var(--mb-mid) !important; }
body.scriptif.theme-dark[class*="page-user-marketing-bot"] svg.mb-ph:is(.text-green-500, .text-sky-500) { color: var(--mb-lime) !important; }
body.scriptif[class*="page-user-marketing-bot"] .rounded-xl.bg-gray-100.text-gray-300 { background: #ECE6DA !important; color: rgba(30, 77, 70, .45) !important; }
body.scriptif.theme-dark .bg-primary.text-white { color: hsl(var(--primary-foreground)) !important; }

/* 7 · Campaign preview: the Telegram wallpaper keeps its doodles but takes the brand's soft green instead of blue */
body.scriptif[class*="page-user-marketing-bot"] [style*="telegram-background"] {
	background-color: #D5E6DF !important; background-blend-mode: luminosity;
}

/* 8 · Channel logos (vendor full-colour PNGs: WhatsApp green, Telegram blue) -> single-colour Phosphor marks in the text colour */
body.scriptif[class*="page-user-marketing-bot"] img:is([src*="marketing-bot/images/whatsapp.png"], [src*="marketing-bot/images/telegram.png"]) {
	object-position: -999px 0; background-color: currentColor; aspect-ratio: 1; height: auto;
	-webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}
body.scriptif[class*="page-user-marketing-bot"] img[src*="marketing-bot/images/whatsapp.png"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,32A96,96,0,0,0,44.89,176.07L32.42,213.46a8,8,0,0,0,10.12,10.12l37.39-12.47A96,96,0,1,0,128,32Zm24,152a80,80,0,0,1-80-80,32,32,0,0,1,32-32l16,32-12.32,18.47a48.19,48.19,0,0,0,25.85,25.85L152,136l32,16A32,32,0,0,1,152,184Z' opacity='0.2'/%3E%3Cpath d='M187.58,144.84l-32-16a8,8,0,0,0-8,.5l-14.69,9.8a40.55,40.55,0,0,1-16-16l9.8-14.69a8,8,0,0,0,.5-8l-16-32A8,8,0,0,0,104,64a40,40,0,0,0-40,40,88.1,88.1,0,0,0,88,88,40,40,0,0,0,40-40A8,8,0,0,0,187.58,144.84ZM152,176a72.08,72.08,0,0,1-72-72A24,24,0,0,1,99.29,80.46l11.48,23L101,118a8,8,0,0,0-.73,7.51,56.47,56.47,0,0,0,30.15,30.15A8,8,0,0,0,138,155l14.62-9.74,23,11.48A24,24,0,0,1,152,176ZM128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24Zm0,192a87.87,87.87,0,0,1-44.06-11.81,8,8,0,0,0-6.54-.67L40,216,52.47,178.6a8,8,0,0,0-.66-6.54A88,88,0,1,1,128,216Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,32A96,96,0,0,0,44.89,176.07L32.42,213.46a8,8,0,0,0,10.12,10.12l37.39-12.47A96,96,0,1,0,128,32Zm24,152a80,80,0,0,1-80-80,32,32,0,0,1,32-32l16,32-12.32,18.47a48.19,48.19,0,0,0,25.85,25.85L152,136l32,16A32,32,0,0,1,152,184Z' opacity='0.2'/%3E%3Cpath d='M187.58,144.84l-32-16a8,8,0,0,0-8,.5l-14.69,9.8a40.55,40.55,0,0,1-16-16l9.8-14.69a8,8,0,0,0,.5-8l-16-32A8,8,0,0,0,104,64a40,40,0,0,0-40,40,88.1,88.1,0,0,0,88,88,40,40,0,0,0,40-40A8,8,0,0,0,187.58,144.84ZM152,176a72.08,72.08,0,0,1-72-72A24,24,0,0,1,99.29,80.46l11.48,23L101,118a8,8,0,0,0-.73,7.51,56.47,56.47,0,0,0,30.15,30.15A8,8,0,0,0,138,155l14.62-9.74,23,11.48A24,24,0,0,1,152,176ZM128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24Zm0,192a87.87,87.87,0,0,1-44.06-11.81,8,8,0,0,0-6.54-.67L40,216,52.47,178.6a8,8,0,0,0-.66-6.54A88,88,0,1,1,128,216Z'/%3E%3C/svg%3E"); }
body.scriptif[class*="page-user-marketing-bot"] img[src*="marketing-bot/images/telegram.png"] { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M223.41,32.09,80,134.87,21,123.3A6.23,6.23,0,0,1,20,111.38L222.63,32.07A1,1,0,0,1,223.41,32.09ZM80,200a8,8,0,0,0,13.76,5.56l30.61-31.76L80,134.87Z' opacity='0.2'/%3E%3Cpath d='M228.88,26.19a9,9,0,0,0-9.16-1.57L17.06,103.93a14.22,14.22,0,0,0,2.43,27.21L72,141.45V200a15.92,15.92,0,0,0,10,14.83,15.91,15.91,0,0,0,17.51-3.73l25.32-26.26L165,220a15.88,15.88,0,0,0,10.51,4,16.3,16.3,0,0,0,5-.79,15.85,15.85,0,0,0,10.67-11.63L231.77,35A9,9,0,0,0,228.88,26.19ZM78.15,126.35l-49.61-9.73,139.2-54.48ZM88,200V152.52l24.79,21.74Zm87.53,8L92.85,135.5l119-85.29Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M223.41,32.09,80,134.87,21,123.3A6.23,6.23,0,0,1,20,111.38L222.63,32.07A1,1,0,0,1,223.41,32.09ZM80,200a8,8,0,0,0,13.76,5.56l30.61-31.76L80,134.87Z' opacity='0.2'/%3E%3Cpath d='M228.88,26.19a9,9,0,0,0-9.16-1.57L17.06,103.93a14.22,14.22,0,0,0,2.43,27.21L72,141.45V200a15.92,15.92,0,0,0,10,14.83,15.91,15.91,0,0,0,17.51-3.73l25.32-26.26L165,220a15.88,15.88,0,0,0,10.51,4,16.3,16.3,0,0,0,5-.79,15.85,15.85,0,0,0,10.67-11.63L231.77,35A9,9,0,0,0,228.88,26.19ZM78.15,126.35l-49.61-9.73,139.2-54.48ZM88,200V152.52l24.79,21.74Zm87.53,8L92.85,135.5l119-85.29Z'/%3E%3C/svg%3E"); }

/* 9 · Contact form: the legacy .card form sits inside an lqd card — one frame, not two */
body.scriptif[class*="page-user-marketing-bot"] .lqd-card form.card { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 24px clamp(20px, 3vw, 32px) 28px !important; border-radius: 0 !important; }

/* ---------- Header bar menus (notifications, account, language) ----------
   One position for hover, click and keyboard: centred under the button (medya-ui.js sets --mb-dd-x,
   clamped 8px inside the viewport). It wins over floating-ui's inline left. */
body.scriptif .lqd-dropdown-dropdown.mb-bar-menu { left: var(--mb-dd-x) !important; right: auto !important; }
/* the default focus outline is dark green on the dark bar: make keyboard focus on those buttons visible */
body.scriptif .ms-actions .lqd-dropdown > :is(a, button):focus-visible { outline: 2px solid #1E4D46 !important; outline-offset: 2px; }
body.scriptif.theme-dark .ms-actions .lqd-dropdown > :is(a, button):focus-visible { outline-color: #A6C732 !important; }

/* ---------- Agent hero (marketing bot, AI agent, CRM, auto-edit videos): the illustration sits beside the heading, never on the prompt card ---------- */
/* the vendor art column (w-[230px] self-end) was drawn for a half-length figure rising from behind the card; our flat discs are whole shapes,
   so they sat flush on the card (0px gap) and outgrew the heading. On phones the core moved it above the heading at 60vw with a fade mask. */
body.scriptif .flex-wrap.mbh-28.mbh-28:not(mbh) { row-gap: 28px; }
body.scriptif .flex-wrap.mbh-28.mbh-28:not(mbh) > .grow { flex: 1 1 0%; min-width: 0; }
body.scriptif .flex-wrap.mbh-28.mbh-28:not(mbh) > .grow > h2 { margin-bottom: 0; }
/* art: as tall as the pill + heading block (140px), centred on it, shrinking with the viewport */
body.scriptif .flex-wrap > div[class~="w-[230px]"][class~="self-end"] {
	width: clamp(64px, 12vw, 140px);
	flex: 0 0 auto;
	align-self: center;
	order: 0;
	margin: 0;
	-webkit-mask-image: none;
	mask-image: none;
}
/* one size rule for every swapped illustration (overrides the AI-agent img max-height / margin above) */
body.scriptif .flex-wrap > div[class~="w-[230px]"][class~="self-end"] > img { width: 100% !important; max-height: none; margin: 0; }
/* phones: decorative only, the heading gets the full width */
@media (max-width: 479.98px) {
	body.scriptif .flex-wrap > div[class~="w-[230px]"][class~="self-end"] { display: none; }
}

/* ---------- Arabic display leading (Zain) ----------
   Zain draws ~1.65em tall (dots, shadda, hamza), so the 1.05–1.3em leadings the vendor views use
   and that line 856 forces on content headings make stacked Arabic lines touch. Arabic display
   text gets 1.5 (the landing page value); English hero headings keep Bricolage at 1.2. */

/* content h1/h2 in Arabic: overrides line 856 (1.3 !important) and the vendor 1.05em / 1.1em classes */
html[dir="rtl"] body.scriptif .lqd-page-content-container :is(h1, h2) { line-height: 1.5 !important; }

/* Zain paragraphs set as headings (chatbot / voice-bot cards: p.font-heading.leading-[1.3em]) */
html[dir="rtl"] body.scriptif .font-heading:is([class*="leading-["], .leading-none, .leading-tight, .leading-snug) { line-height: 1.5 !important; }

/* dashboard greeting (huge, 2 lines on phones): 1.4 keeps it compact without touching */
html[dir="rtl"] body.scriptif .lqd-page-content-container h1.sc-hello { line-height: 1.4 !important; }

/* hero headings with a smaller eyebrow line (agents hub, Jotsy report): a little air before the headline.
   Same-size eyebrows (marketing bot, AI agent) need none, 1.5 already separates them */
body.scriptif .lqd-page-content-container :is(h1, h2) > span.block[class*="text-["]:first-child { margin-bottom: .2em; }

/* English: Bricolage needs less; hero headings with an eyebrow or a vendor em-leading sit at 1.2 */
html[dir="ltr"] body.scriptif .lqd-page-content-container :is(h1, h2):is(.mbh-30.mbh-30:not(mbh), :where(.mbh-29):not(mbh), [class*="leading-[1"]) { line-height: 1.2 !important; }

/* calendars inside always-dark cards (social media agent report, text-white): the global light table header
   (medya-ui.css "table thead th") put white weekday labels on bone in light mode */
body.scriptif .text-white .fc thead th { background: rgba(235, 229, 216, .06) !important; color: rgba(251, 250, 247, .7) !important; border-color: rgba(235, 229, 216, .12) !important; }

/* ---------- Social media section (patch on top of scriptif.css v=1793232503) ---------- */

/* Social agent hero banners (agent overview, agents list) paint a glossy raster with light streaks (img-4 / img-6, lilac on light): flat sand on light, deep green on dark, like the other Scriptif banners */
body.scriptif .social-media-agent-banner { background-image: none !important; background-color: #ECE6DA !important; }
body.scriptif.theme-dark .social-media-agent-banner { background-color: #12322E !important; }
/* the "posts ready for review" pill on that banner is rust brown (#8F4E34); the half-opacity kicker lines drop under 3:1 on sand */
body.scriptif:not(.theme-dark) .social-media-agent-banner [class*="text-[#8F4E34]"] { color: var(--mb-green) !important; }
body.scriptif .lqd-page-content-container .social-media-agent-banner :is(.opacity-50, [class*="text-heading-foreground/50"]) { opacity: 1 !important; color: var(--mb-text) !important; }
body.scriptif.theme-dark .lqd-page-content-container .social-media-agent-banner :is(.opacity-50, [class*="text-heading-foreground/50"]) { color: #9FB0AB !important; }

/* «اختر منصة» (automation step 1): the extension ships x / linkedin / instagram-logo.png as 0-byte files; draw flat brand marks in their place (stays correct after the files are re-uploaded) */
body.scriptif img[src$="/vendor/ai-social-media/images/x-logo.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23163A36' d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/%3E%3C/svg%3E"); }
body.scriptif img[src$="/vendor/ai-social-media/images/linkedin-logo.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23163A36' d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.948 1.637-1.947 3.37-1.947 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E"); }
body.scriptif img[src$="/vendor/ai-social-media/images/instagram-logo.png"] { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163A36' stroke-width='2.1'%3E%3Crect x='2.25' y='2.25' width='19.5' height='19.5' rx='5.6'/%3E%3Ccircle cx='12' cy='12' r='4.6'/%3E%3Ccircle cx='17.65' cy='6.35' r='1.35' fill='%23163A36' stroke='none'/%3E%3C/svg%3E"); }
body.scriptif img[src*="/vendor/ai-social-media/images/"][src$="-logo.png"] { width: 22px; height: 22px; object-fit: contain; }
body.scriptif.theme-dark img[src*="/vendor/ai-social-media/images/"][src$="-logo.png"] { filter: brightness(0) invert(.92); }

/* «اختر منصة» rows: the marker is a grey bg-foreground/10 disc; make it a brand radio (hairline ring; green / lime fill with the check when picked) */
body.scriptif #stepsForm button[onclick^="handleButtonClick"] { transform: none !important; transition: border-color .18s var(--mb-ease); }
body.scriptif #stepsForm button[onclick^="handleButtonClick"]:hover { border-color: var(--mb-line-strong) !important; }
body.scriptif #stepsForm button[onclick^="handleButtonClick"] > span.rounded-full:first-child { width: 26px; height: 26px; background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--mb-line-strong); transition: background-color .18s var(--mb-ease), box-shadow .18s var(--mb-ease); }
body.scriptif #stepsForm button[onclick^="handleButtonClick"] > span.rounded-full:first-child .mb-ph { width: 15px; height: 15px; }
body.scriptif #stepsForm button[onclick^="handleButtonClick"].lqd-is-active { border-color: var(--mb-green) !important; box-shadow: inset 0 0 0 1px var(--mb-green) !important; }
body.scriptif #stepsForm button[onclick^="handleButtonClick"].lqd-is-active > span.rounded-full:first-child { background: var(--mb-green) !important; box-shadow: none; color: #FBFAF7 !important; }
body.scriptif.theme-dark #stepsForm button[onclick^="handleButtonClick"].lqd-is-active { border-color: #A6C732 !important; box-shadow: inset 0 0 0 1px #A6C732 !important; }
body.scriptif.theme-dark #stepsForm button[onclick^="handleButtonClick"].lqd-is-active > span.rounded-full:first-child { background: #A6C732 !important; color: #0F2B27 !important; }
body.scriptif #stepsForm button[onclick^="handleButtonClick"] .bg-green-500 { background-color: #A6C732 !important; }

/* Overview platform cards the admin hasn't enabled get saturate(0) on the whole card, turning the green surface neutral grey: keep the surface, grey out only the logo */
body.scriptif .lqd-social-media-card.saturate-0 { filter: none !important; }
body.scriptif .lqd-social-media-card.saturate-0 figure { filter: grayscale(1); opacity: .45; }

/* X and TikTok marks are black and have no dark twin on the overview / platforms cards: flip the black to ivory on dark (hue-rotate keeps TikTok's cyan / red) */
body.scriptif.theme-dark img[src$="/vendor/social-media/icons/x.svg"] { filter: invert(.92); }
body.scriptif.theme-dark img[src$="/vendor/social-media/icons/tiktok.svg"] { filter: invert(.92) hue-rotate(180deg); }

/* Create-post preview: Facebook-style reaction badges are blue / red gradients; flat brand fills */
body.scriptif span[class*="from-[#48ADF8]"] { background: #1E4D46 !important; color: #FBFAF7 !important; }
body.scriptif.theme-dark span[class*="from-[#48ADF8]"] { background: #A6C732 !important; color: #0F2B27 !important; }
body.scriptif span[class*="from-[#F95E73]"] { background: #E9B872 !important; color: #0F2B27 !important; }

/* Calendar headers: weekday labels are 50% ink on the cream header row (2.8:1 on light); the agent overview week view sits on an always-dark card, so it gets ivory instead */
body.scriptif:not(.theme-dark) .fc:not(#social-media-agent-calendar) .fc-col-header-cell-cushion { color: var(--mb-muted) !important; opacity: 1 !important; }
body.scriptif #social-media-agent-calendar .fc-col-header-cell-cushion [class*="text-white/50"] { color: rgba(235, 229, 216, .75) !important; }

/* Social pages mute secondary text with opacity-50/60 or /50 alpha colours (1.9–4.3:1: post-preview meta, table heads, empty states, other-month calendar days): the muted ink token reads ≥5:1 on both themes */
body.scriptif:is([class*="page-user-social-media"], [class*="page-user-automation"]) :is(p, span, small, label, h2):is(.opacity-50, .opacity-60, [class*="text-foreground/50"], [class*="text-foreground/60"], [class*="text-heading-foreground/50"]),
body.scriptif:is([class*="page-user-social-media"], [class*="page-user-automation"]) .lqd-social-posts-head,
body.scriptif:is([class*="page-user-social-media"], [class*="page-user-automation"]) .lqd-social-media-card-footer-bar-top,
body.scriptif:is([class*="page-user-social-media"], [class*="page-user-automation"]) .lqd-social-media-card-action-text,
body.scriptif:is([class*="page-user-social-media"], [class*="page-user-automation"]) .fc .fc-day-other .fc-daygrid-day-number { opacity: 1 !important; color: var(--mb-muted) !important; }
/* FullCalendar fades the whole other-month day header to .3; the muted ink above already marks them */
body.scriptif:is([class*="page-user-social-media"], [class*="page-user-automation"]) .fc .fc-day-other .fc-daygrid-day-top { opacity: 1 !important; }
/* swapped stat icons keep the vendor's uneven width/height attributes (25-36px): one square size */
body.scriptif .lqd-social-media-overview-card svg.mb-ph { width: 34px; height: 34px; }

/* agent hero composer (marketing bot, AI agent, CRM, auto-edit videos): the channel chips / send row had no top padding,
   so the send button sat on the textarea's bottom border; and the vendor send arrow points right, against RTL reading */
body.scriptif form > .lqd-input-container:where(.mbh-31):not(mbh) + div.justify-between { padding-top: 14px; }
html[dir="rtl"] body.scriptif button svg.mbh-32:not(mbh) { transform: scaleX(-1); }

/* ==========================================================================
   Design pass 2026-10-30 · Top bar, mega panels, theme switch
   ========================================================================== */
/* ==========================================================================
   Header audit patch — floating bar, tabs, mega panels, phone sheet/dock, theme switch
   Append to the end of scriptif.css.
   ========================================================================== */

/* ---------- Theme switch: one instant restyle, no page-wide colour fade ----------
   medya-ui.css gives every element a .9s colour transition while body.mb-theme-anim is on (set by the sky
   toggle for 1.2s). One switch started ~1,450 transitions and blocked the main thread for 2.4–3 s.
   Now nothing transitions during the switch (pseudo-elements included); only the sky itself animates. */
body.scriptif.mb-theme-anim,
body.scriptif.mb-theme-anim *:not(.mb-sky, .mb-sky *),
body.scriptif.mb-theme-anim *::before,
body.scriptif.mb-theme-anim *::after,
body.scriptif.mb-theme-anim .mb-sky .mb-stars i { transition: none !important; }
/* the sky keeps its own motion (the old rule above also replaced the sun/moon transform transitions with colour ones) */
@media (prefers-reduced-motion: no-preference) {
	body.scriptif.mb-theme-anim .mb-sky { transition: transform .14s var(--mb-ease) !important; }
	body.scriptif.mb-theme-anim .mb-sky :is(.mb-day, .mb-night) { transition: opacity var(--d) cubic-bezier(.65, 0, .35, 1) !important; }
	body.scriptif.mb-theme-anim .mb-sky .mb-stars { transition: opacity calc(var(--d) * .8) ease !important; }
	body.scriptif.mb-theme-anim .mb-sky .mb-sun { transition: transform var(--d) cubic-bezier(.34, 1.36, .64, 1), opacity calc(var(--d) * .6) ease !important; }
	body.scriptif.mb-theme-anim .mb-sky .mb-moon { transition: transform var(--d) cubic-bezier(.55, 0, .25, 1), opacity calc(var(--d) * .7) ease !important; }
	body.scriptif.theme-dark.mb-theme-anim .mb-sky .mb-stars { transition-delay: calc(var(--d) * .25) !important; }
	body.scriptif.theme-dark.mb-theme-anim .mb-sky .mb-sun { transition-timing-function: cubic-bezier(.55, 0, .25, 1), ease !important; }
	body.scriptif.theme-dark.mb-theme-anim .mb-sky .mb-moon { transition-timing-function: cubic-bezier(.34, 1.3, .64, 1), ease !important; }
}

/* ---------- Logo: one box in both modes ----------
   The light wordmark is 150px wide, the dark one was 114px, so a theme switch changed the room left for the
   tabs without resizing anything the Priority+ fit watches (bar, tools): the last tab ("Admin") stayed
   half-scrolled out of .ms-tabs with a cut edge and a stray caret. Same box now, same wordmark width. */
body.scriptif .ms-logo { width: 150px; justify-content: flex-start; }
body.scriptif .ms-logo img[class~="dark:block"] { width: 138px !important; height: 44px !important; margin-block: 0; object-fit: cover; object-position: center; }
@media (max-width: 1023px) {
	body.scriptif .ms-logo { width: 128px; }
	body.scriptif .ms-logo img[class~="dark:block"] { width: 118px !important; height: 38px !important; }
}

/* ---------- Tiles are never icon buttons ----------
   medya-ui.js headerButtons() tags icon-only links in .lqd-header as .mb-ibtn (40px round). It runs while the
   page is still streaming, so a tile caught half-parsed (icon in, label not yet) was tagged for good: a
   random tile per load collapsed into a 40px circle with its label and number spilling out.
   patch.js stops the tagging; this keeps tiles, sub-links and dock items intact even if a tag slips through. */
body.scriptif .ms-bar :is(.ms-panel, .ms-sheet) .ms-tile-link.mb-ibtn {
	display: grid !important;
	width: auto !important; height: auto !important; min-width: 0;
	padding: 10px 12px 10px 10px !important;
	border-radius: 16px !important;
	background: var(--ms-tile-bg) !important;
	color: var(--ms-tile-ink) !important;
	box-shadow: inset 0 0 0 1px var(--mb-line) !important;
}
[dir="rtl"] body.scriptif .ms-bar .ms-panel .ms-tile-link.mb-ibtn { padding: 10px 10px 10px 12px !important; }
body.scriptif .ms-bar .ms-sheet .ms-tile-link.mb-ibtn { padding: 12px !important; border-radius: 18px !important; }
body.scriptif .ms-bar .ms-tile.is-active > .ms-tile-link.mb-ibtn { background: var(--mb-green) !important; color: #FBFAF7 !important; box-shadow: none !important; }
body.scriptif.theme-dark .ms-bar .ms-tile.is-active > .ms-tile-link.mb-ibtn { background: #EBE5D8 !important; color: #0F2B27 !important; }

/* ---------- Keyboard focus in the shell ----------
   Tabs, tiles, sub-links, dock and the invite pill had only the UA outline: 1px dark green, invisible on the
   dark bar, and cut top/bottom by the scrolling tab strip. Tabs get an inset ring, the rest an outer ring. */
body.scriptif :is(.ms-tile-link, .ms-sub-link, .ms-dock-item, .ms-burger, .ms-invite):focus-visible { outline: 2px solid var(--mb-mid) !important; outline-offset: 2px; }
body.scriptif .ms-tab:focus-visible { outline: 2px solid var(--mb-mid) !important; outline-offset: -2px; }
body.scriptif .ms-tab.is-open:focus-visible { outline-color: var(--mb-lime) !important; }
body.scriptif.theme-dark :is(.ms-tab, .ms-tile-link, .ms-sub-link, .ms-dock-item, .ms-burger, .ms-invite):focus-visible { outline-color: var(--mb-lime) !important; }
body.scriptif.theme-dark .ms-tab.is-open:focus-visible { outline-color: var(--mb-mid) !important; }

/* ---------- Phone dock: Home listed once ----------
   The dock adds its own Home and then the first shortcut is the same page (/dashboard/user): two "Home"
   items, both lit. Hide the repeat and give the remaining four items the full width. */
@media (max-width: 1023px) {
	body.scriptif .ms-dock > .ms-dock-item:first-child ~ a.ms-dock-item[href$="/dashboard/user"] { display: none; }
	body.scriptif .ms-dock.mbh-33.mbh-33.mbh-33.mbh-33:not(mbh):not(mbh) { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Tools cluster: one round 40px family on every width ----------
   The account trigger was 34px next to 40px siblings, and on phones/tablets the page-wide
   ".lqd-btn { min-height: 44px }" stretched every bar button into a 40x44 oval (account 34x44). */
body.scriptif .ms-actions .header-user-dropdown .lqd-dropdown-trigger { width: 40px !important; height: 40px !important; }
@media (max-width: 1023px) {
	body.scriptif .ms-actions :is(.lqd-btn, .lqd-dropdown-trigger) { min-height: 0; }
}

/* ---------- Account menu: the name/email block follows the centred items below it ---------- */
div.lqd-dropdown-dropdown-content.mb-dd-acct.mb-dd-acct:not(form) > div.px-3.pt-3:first-child { text-align: center; }

/* ==========================================================================
   Design pass 2026-10-30 · One button system
   ========================================================================== */
/* ==========================================================================
   Scriptif button system (buttons audit patch) — append to scriptif.css
   One family for every action control: pill, display face 700, three fixed heights,
   five intents (primary · secondary · ghost · link · danger/success), one round icon button.
   The studio bar (.ms-bar) and the side nav keep their own controls.
   ========================================================================== */

/* -- tokens: sizes are shared, fills flip with the theme -- */
body.scriptif {
	--mbb-h-sm: 36px; --mbb-h-md: 44px; --mbb-h-lg: 52px;
	--mbb-px-sm: 14px; --mbb-px-md: 20px; --mbb-px-lg: 26px;
	--mbb-fs-sm: 13px; --mbb-fs-md: 15px; --mbb-fs-lg: 16px;
	--mbb-gap: 8px; --mbb-ico: 18px; --mbb-ico-sm: 16px;
	--mbb-fill: var(--mb-green); --mbb-on-fill: #EBE5D8; --mbb-fill-hover: var(--mb-mid);
	--mbb-ink: var(--mb-green); --mbb-surface: var(--mb-card);
	--mbb-ring: var(--mb-line-strong); --mbb-tint: rgba(22, 58, 54, .06); --mbb-tint-strong: rgba(22, 58, 54, .1);
	--mbb-focus: var(--mb-mid); --mbb-link: var(--mb-green);
	--mbb-danger: #B42318; --mbb-danger-ink: #B42318; --mbb-success: #2E7D5B;
}
body.scriptif.theme-dark {
	--mbb-fill: #EBE5D8; --mbb-on-fill: #0F2B27; --mbb-fill-hover: #FBFAF7;
	--mbb-ink: #EBE5D8; --mbb-surface: transparent;
	--mbb-ring: rgba(235, 229, 216, .2); --mbb-tint: rgba(235, 229, 216, .06); --mbb-tint-strong: rgba(235, 229, 216, .1);
	--mbb-focus: var(--mb-lime); --mbb-link: #C6DE6B; --mbb-danger-ink: #EFA79F;
}
@media (max-width: 767px) {
	/* phones: the small size grows to a thumb target; side padding tightens so toolbar titles keep their room */
	body.scriptif { --mbb-h-sm: 40px; --mbb-px-md: 14px; --mbb-px-lg: 20px; --mbb-gap: 6px; }
}
/* touch screens: scriptif's `.lqd-btn { min-height: 44px }` turned every icon-only button into a tall capsule.
   Icon buttons stay square: the round family has its own 44 / 40 box, the rest keep their vendor square */
@media (max-width: 1023px) {
	body.scriptif:not(#mbb) .mb-ico:not(.mb-icb, .ms-bar *, .lqd-header *) { min-height: 0 !important; }
}

/* -- shape: every text button (vendor lqd-btn sizes + Tabler .btn) is one pill on one grid -- */
body.scriptif:not(#mbb) :is(.lqd-btn:not(.lqd-btn-size-none, .lqd-btn-link, .lqd-btn-variant-none), .btn:not(.btn-link, .btn-icon, .btn-close, .btn-status-update, .btn-action)):not([class*=" size-"], .mb-ico, .mb-icb, .mb-icx, .ms-bar *, .lqd-header *, .lqd-navbar *, .tox *, .lqd-input-container *) {
	--mbb-h: var(--mbb-h-md); --mbb-px: var(--mbb-px-md); --mbb-fs: var(--mbb-fs-md); --mbb-i: var(--mbb-ico);
	align-items: center; justify-content: center;
	gap: var(--mbb-gap) !important;
	height: auto; min-height: var(--mbb-h) !important;
	padding-block: 0 !important; padding-inline: var(--mbb-px) !important;
	font-family: var(--mb-font-display) !important; font-size: var(--mbb-fs) !important; font-weight: 700 !important;
	line-height: 1.2 !important; letter-spacing: 0; text-align: center;
}
/* a pill reads as one line: labels never break (a full-width button may still wrap a very long label) */
body.scriptif:not(#mbb) :is(.lqd-btn, .btn):not(.w-full, .lqd-btn-size-none, .lqd-btn-variant-none, .mb-ico, .ms-bar *, .lqd-header *, .lqd-navbar *) { white-space: nowrap; }
/* one radius: the pill (segmented tab triggers keep their joined inner edges) */
body.scriptif:not(#mbb) :is(.lqd-btn:not(.lqd-btn-size-none, .lqd-btn-variant-none, .lqd-tabs-trigger), .btn:not(.btn-close)):not(.mb-icx, .ms-bar *, .lqd-header *, .lqd-navbar *, .tox *) { border-radius: 9999px !important; }
body.scriptif:not(#mbb) :is(.lqd-btn-sm, .btn-sm):is(.lqd-btn, .btn):not([class*=" size-"], .mb-icb) { --mbb-h: var(--mbb-h-sm); --mbb-px: var(--mbb-px-sm); --mbb-fs: var(--mbb-fs-sm); --mbb-i: var(--mbb-ico-sm); }
body.scriptif:not(#mbb) :is(.lqd-btn-lg, .lqd-btn-xl, .btn-lg):is(.lqd-btn, .btn):not([class*=" size-"], .mb-icb) { --mbb-h: var(--mbb-h-lg); --mbb-px: var(--mbb-px-lg); --mbb-fs: var(--mbb-fs-lg); }
/* the lime arrow chip keeps its tight end padding */
body.scriptif:not(#mbb) :is(.lqd-btn, .btn).mb-arrow:not([class*=" size-"], .mb-icb, .lqd-btn-size-none, .ms-bar *, .lqd-header *) { padding-inline: var(--mbb-px) 6px !important; }
body.scriptif:not(#mbb) :is(.lqd-btn, .btn).mb-arrow::after { width: calc(var(--mbb-h, 44px) - 12px) !important; height: calc(var(--mbb-h, 44px) - 12px) !important; }
/* icons inside text buttons: one size, one gap, never squeezed */
body.scriptif:not(#mbb) :is(.lqd-btn, .btn):not(.ms-bar *, .lqd-header *, .lqd-navbar *) > :is(svg, .mb-ph, i[class*="ti-"]) { width: var(--mbb-i, 18px) !important; height: var(--mbb-i, 18px) !important; flex-shrink: 0; margin: 0 !important; font-size: var(--mbb-i, 18px); }
/* the generator's big submit is the large primary */
body.scriptif:not(#mbb) .lqd-generator-form :is(button, .lqd-btn)[type="submit"] { height: auto !important; min-height: var(--mbb-h-lg) !important; font-size: var(--mbb-fs-lg) !important; }

/* -- no lift, no glow: vendor hover translate / shadow-xl / gradient rings are gone on every button -- */
body.scriptif:not(#mbb) :is(.lqd-btn, .btn, .mb-icb):not(.ms-bar *, .lqd-header *):is([class*="gradient"], [style*="gradient"]) { background-image: none !important; }
/* the glossy MagicAI glass (backdrop blur + contrast + white inset bevels) reads as a grey disc: flat brand surfaces only */
body.scriptif:not(#mbb) :is(.lqd-btn, .btn, .mb-icb):not(.ms-bar *, .lqd-header *):is([class*="backdrop-"], [class*="shadow-[inset"]) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.scriptif:not(#mbb) .lqd-btn-variant-none[class*="shadow-[inset"]:not(.mb-icb, .ms-bar *, .lqd-header *) { box-shadow: inset 0 0 0 1px var(--mbb-ring) !important; background-color: transparent !important; }
body.scriptif:not(#mbb) :is(.lqd-btn, .btn):not(.ms-bar *, .lqd-header *) { transition: background-color .18s var(--mb-ease), color .18s var(--mb-ease), box-shadow .18s var(--mb-ease), transform .14s var(--mb-ease), scale .14s var(--mb-ease) !important; }
/* the lift lives in Tailwind's translate/scale vars: zero those (positioning translates such as -translate-y-1/2 stay) */
body.scriptif:not(#mbb) .lqd-btn:not(.ms-bar *, .lqd-header *):is([class*="hover:-translate-y-0.5"], [class*="hover:-translate-y-1 "], [class*="hover:-translate-y-px"]):is(:hover, :focus-visible) { --tw-translate-y: 0px !important; }
body.scriptif:not(#mbb) .lqd-btn:not(.ms-bar *, .lqd-header *)[class*="hover:scale-1"]:hover { --tw-scale-x: 1 !important; --tw-scale-y: 1 !important; }
body.scriptif:not(#mbb) :is(.lqd-btn, .btn, .mb-icb):not(.ms-bar *, .lqd-header *, :disabled):active { scale: .97; }
body.scriptif:not(#mbb) .lqd-titlebar-actions .lqd-btn-primary::before { display: none !important; }
/* image generator: the submit drew its arrow as a background image behind hidden text; draw the real icon instead */
body.scriptif:not(#mbb) .lqd-image-generator-inputs-wrap .lqd-btn[type="submit"] { text-indent: 0 !important; background-image: none !important; }
body.scriptif:not(#mbb) .lqd-image-generator-inputs-wrap .lqd-btn[type="submit"] svg { visibility: visible !important; }
/* (vendor keeps it a 2.75rem square at every width, so it is a round icon button on phones too) */
body.scriptif:not(#mbb) .lqd-image-generator-inputs-wrap .lqd-btn[type="submit"] {
	width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 0 !important; padding: 0 !important;
	place-items: center; justify-content: center; font-size: 0 !important; line-height: 0 !important; gap: 0 !important; white-space: nowrap;
}
body.scriptif:not(#mbb) .lqd-image-generator-inputs-wrap .lqd-btn[type="submit"]:not([class*="hidden"], [style*="display: none"], [style*="display:none"]) { display: inline-flex !important; align-items: center; }

/* -- primary: deep green / ivory text (dark: ivory / deep text) -- */
body.scriptif:not(#mbb) :is(.lqd-btn-primary, .btn-primary, .lqd-generator-form :is(button, .lqd-btn)[type="submit"]):not(.ms-bar *, .lqd-header *, .lqd-navbar *) {
	background-color: var(--mbb-fill) !important; color: var(--mbb-on-fill) !important;
	border-color: transparent !important; box-shadow: none !important; outline: 0;
}
body.scriptif:not(#mbb) :is(.lqd-btn-primary, .btn-primary, .lqd-generator-form :is(button, .lqd-btn)[type="submit"]):not(.ms-bar *, .lqd-header *, .lqd-navbar *, :disabled):is(:hover, :focus-visible) { background-color: var(--mbb-fill-hover) !important; color: var(--mbb-on-fill) !important; box-shadow: none !important; }

/* -- secondary (secondary · outline · ghost-shadow · Tabler outline/light/white): surface + hairline ring -- */
body.scriptif:not(#mbb) :is(.lqd-btn-secondary, .lqd-btn-outline, .lqd-btn-ghost-shadow, .btn-secondary, .btn-light, .btn-white, .btn-default, .btn:not([class*="btn-"]), [class*="btn-outline-"]):not(.lqd-generator-form [type="submit"], .ms-bar *, .lqd-header *, .lqd-navbar *) {
	background-color: var(--mbb-surface) !important; color: var(--mbb-ink) !important;
	border-color: transparent !important; outline: 0 !important;
	box-shadow: inset 0 0 0 1px var(--mbb-ring) !important;
}
body.scriptif:not(#mbb) :is(.lqd-btn-secondary, .lqd-btn-outline, .lqd-btn-ghost-shadow, .btn-secondary, .btn-light, .btn-white, .btn-default, .btn:not([class*="btn-"]), [class*="btn-outline-"]):not(.lqd-generator-form [type="submit"], .ms-bar *, .lqd-header *, .lqd-navbar *, :disabled):is(:hover, :focus-visible) {
	background-color: var(--mbb-tint) !important; color: var(--mbb-ink) !important;
	box-shadow: inset 0 0 0 1px var(--mbb-ink) !important;
}
/* Tabler semantic outlines keep their meaning in the ring and label */
body.scriptif:not(#mbb) .btn-outline-danger:not(.ms-bar *, .lqd-header *) { color: var(--mbb-danger-ink) !important; box-shadow: inset 0 0 0 1px currentColor !important; }
body.scriptif:not(#mbb) .btn-outline-success:not(.ms-bar *, .lqd-header *) { color: var(--mbb-success) !important; box-shadow: inset 0 0 0 1px currentColor !important; }
body.scriptif.theme-dark:not(#mbb) .btn-outline-success:not(.ms-bar *, .lqd-header *) { color: #C6DE6B !important; }

/* -- ghost: no surface, tint on hover -- */
body.scriptif:not(#mbb) :is(.lqd-btn-ghost, [class*="btn-ghost-"]):not(.ms-bar *, .lqd-header *, .lqd-navbar *) { box-shadow: none !important; outline: 0 !important; }
body.scriptif:not(#mbb) :is(.lqd-btn-ghost, [class*="btn-ghost-"]):not(.ms-bar *, .lqd-header *, .lqd-navbar *, :disabled):hover { background-color: var(--mbb-tint-strong) !important; }

/* -- link: text only, brand ink, underline on hover -- */
body.scriptif:not(#mbb) :is(.lqd-btn-link, .btn-link):not(.ms-bar *, .lqd-header *, .lqd-navbar *) {
	background: transparent !important; color: var(--mbb-link) !important; box-shadow: none !important;
	font-family: var(--mb-font-display) !important; font-weight: 700 !important;
	text-underline-offset: 3px;
}
body.scriptif:not(#mbb) .btn-link:not(.ms-bar *, .lqd-header *) { padding-inline: 0 !important; min-height: 0 !important; }

/* -- danger / success / warning: solid status fills (Tabler + vendor + hover-danger) -- */
body.scriptif:not(#mbb) :is(.lqd-btn-danger, .btn-danger, .btn-red):not(.ms-bar *, .lqd-header *) { background-color: var(--mbb-danger) !important; color: #FFFFFF !important; border-color: transparent !important; box-shadow: none !important; }
body.scriptif:not(#mbb) :is(.lqd-btn-success, .btn-success, .btn-green):not(.ms-bar *, .lqd-header *) { background-color: var(--mbb-success) !important; color: #FFFFFF !important; border-color: transparent !important; box-shadow: none !important; }
body.scriptif:not(#mbb) :is(.lqd-btn-warning, .btn-warning, .btn-yellow):not(.ms-bar *, .lqd-header *) { background-color: #B7791F !important; color: #FFFFFF !important; border-color: transparent !important; box-shadow: none !important; }
body.scriptif:not(#mbb) :is(.lqd-btn-danger, .btn-danger, .btn-red, .lqd-btn-success, .btn-success, .btn-green, .lqd-btn-warning, .btn-warning, .btn-yellow):not(.ms-bar *, .lqd-header *, :disabled):hover { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .12) !important; }
body.scriptif:not(#mbb) .lqd-btn-hover-danger:not(:disabled):is(:hover, :focus-visible) { background-color: var(--mbb-danger) !important; color: #FFFFFF !important; box-shadow: none !important; }
/* vendor "rose-500" hover on plain menu buttons -> brand danger */
body.scriptif:not(#mbb) .lqd-btn[class*="hover:bg-rose-"]:hover, body.scriptif:not(#mbb) .lqd-btn[class*="hover:bg-red-"]:hover { background-color: var(--mbb-danger) !important; color: #FFFFFF !important; }

/* -- states shared by every intent -- */
body.scriptif:not(#mbb) :is(.lqd-btn, .btn, .mb-icb):not(.ms-bar *, .lqd-header *):focus-visible { outline: 2px solid var(--mbb-focus) !important; outline-offset: 2px !important; }
body.scriptif:not(#mbb) :is(.lqd-btn, .btn, .mb-icb):not(.ms-bar *, .lqd-header *):is(:disabled, .disabled, [aria-disabled="true"]) {
	opacity: .45 !important; cursor: not-allowed; scale: none; pointer-events: none;
}
/* filled intents never fade to a ghost of themselves (a deep label on a 45 % ivory fill vanished on dark cards):
   disabled = a quiet tinted pill with a muted label, legible in both themes */
body.scriptif:not(#mbb) :is(.lqd-btn-primary, .btn-primary, .lqd-generator-form :is(button, .lqd-btn)[type="submit"], .lqd-btn-danger, .btn-danger, .lqd-btn-success, .btn-success, .lqd-btn-warning, .btn-warning):not(.ms-bar *, .lqd-header *):is(:disabled, .disabled, [aria-disabled="true"]) {
	background-color: var(--mbb-tint-strong) !important; color: var(--mb-muted) !important;
	opacity: 1 !important; box-shadow: none !important;
}
body.scriptif:not(#mbb) .mb-arrow:is(:disabled, .disabled, [aria-disabled="true"])::after { opacity: .45 !important; }

/* -- icon-only buttons (tagged .mb-icb by patch.js): one round family, 44px · compact 36px (same rows as the text sizes) -- */
body.scriptif:not(#mbb) .mb-icb:not(.ms-bar *, .lqd-header *) {
	--mbb-icb: 44px;
	width: var(--mbb-icb) !important; height: var(--mbb-icb) !important; min-width: var(--mbb-icb) !important; min-height: 0 !important;
	padding: 0 !important; flex-shrink: 0;
	align-items: center; justify-content: center; place-items: center; gap: 0 !important;
	border-radius: 9999px !important; border-color: transparent !important; outline: 0;
	line-height: 1 !important;
}
body.scriptif:not(#mbb) .mb-icb.mb-icb-sm { --mbb-icb: 36px; }
/* centre the glyph without ever un-hiding a button (Tailwind .hidden / Alpine x-show keep control of display) */
body.scriptif:not(#mbb) .mb-icb:not([class*="hidden"], [style*="display: none"], [style*="display:none"]) { display: inline-flex !important; }
body.scriptif:not(#mbb) .mb-icb > :is(svg, .mb-ph, i) { width: 18px !important; height: 18px !important; font-size: 18px !important; margin: 0 !important; }
body.scriptif:not(#mbb) .mb-icb.mb-icb-sm > :is(svg, .mb-ph, i) { width: 16px !important; height: 16px !important; font-size: 16px !important; }
/* neutral icon buttons: quiet round glyphs (no surface, no ring) that light up with a tint on hover; one look in
   tables, toolbars, composers and card corners. Filled intents (primary / danger / success / send) keep their fill. */
body.scriptif:not(#mbb) .mb-icb:not(.lqd-btn-primary, .btn-primary, .lqd-btn-danger, .btn-danger, .lqd-btn-success, .btn-success, [type="submit"], .lqd-input-container + div > button:last-child) {
	background-color: transparent !important; color: var(--mbb-ink) !important;
	box-shadow: none !important;
}
body.scriptif:not(#mbb) .mb-icb:not(.lqd-btn-primary, .btn-primary, .lqd-btn-danger, .btn-danger, .lqd-btn-success, .btn-success, [type="submit"], .lqd-input-container + div > button:last-child, :disabled):is(:hover, :focus-visible, [aria-expanded="true"]) {
	background-color: var(--mbb-tint-strong) !important;
}
/* selected toggles (view switchers, pressed tools) stay visibly on: tint + ink ring */
body.scriptif:not(#mbb) .mb-icb:is(.active, .lqd-is-active, [aria-pressed="true"], [aria-selected="true"]):not(.lqd-btn-primary, .btn-primary) { background-color: var(--mbb-tint-strong) !important; box-shadow: inset 0 0 0 1px var(--mbb-ink) !important; }
/* filled icon actions: submit / composer send read as the primary */
body.scriptif:not(#mbb) .mb-icb:is([type="submit"], .lqd-input-container + div > button:last-child):not(.lqd-btn-danger, .btn-danger) { background-color: var(--mbb-fill) !important; color: var(--mbb-on-fill) !important; box-shadow: none !important; }
body.scriptif:not(#mbb) .mb-icb:is([type="submit"], .lqd-input-container + div > button:last-child):not(.lqd-btn-danger, .btn-danger, :disabled):hover { background-color: var(--mbb-fill-hover) !important; }
body.scriptif:not(#mbb) .mb-icb:is([type="submit"], .lqd-input-container + div > button:last-child):disabled { background-color: var(--mbb-tint-strong) !important; color: var(--mb-muted) !important; opacity: 1 !important; }
/* destructive icon actions read red on hover only */
body.scriptif:not(#mbb) .mb-icb:is([class*="hover:text-red"], [class*="hover:bg-red"], [class*="hover:bg-rose"], [class*="text-red-"], [class*="danger"], .chats-search > *):not(.lqd-btn-danger, .btn-danger):hover { color: var(--mbb-danger-ink) !important; background-color: rgba(180, 35, 24, .1) !important; }

/* -- Tailwind-built action chips that had their own MagicAI look -- */
/* prompt suggestions (AI chat / CRM assistant marquee): grey rounded-xl chips -> the secondary pill */
body.scriptif:not(#mbb) button.lqd-marquee-cell {
	min-height: var(--mbb-h-md); padding: 0 var(--mbb-px-md) !important; gap: var(--mbb-gap) !important;
	border-radius: 9999px !important;
	background: var(--mbb-surface) !important; color: var(--mbb-ink) !important;
	box-shadow: inset 0 0 0 1px var(--mbb-ring) !important;
	font-size: var(--mbb-fs-md) !important; font-weight: 600 !important;
	--tw-translate-y: 0px !important;
}
body.scriptif:not(#mbb) button.lqd-marquee-cell:hover { background: var(--mbb-tint) !important; box-shadow: inset 0 0 0 1px var(--mbb-ink) !important; color: var(--mbb-ink) !important; }
/* option cards (CRM scope picker): no hover zoom, the brand ring marks the active one */
body.scriptif:not(#mbb) .lqd-crm-scope-option { --tw-scale-x: 1 !important; --tw-scale-y: 1 !important; border-radius: 18px !important; }
body.scriptif:not(#mbb) .lqd-crm-scope-option.active { border-color: var(--mbb-ink) !important; background: var(--mbb-tint) !important; }

/* -- square vendor buttons (Tailwind size-*) and placed icon buttons (.mb-icx) keep their own square: the phone
      rule `.lqd-btn { min-height: 44px }` was stretching them into ovals (copilot close, media overlays) -- */
body.scriptif:not(#mbb) :is(.lqd-btn[class*=" size-"], .mb-icx):not(.mb-icb, .ms-bar *, .lqd-header *) { min-height: 0 !important; }
body.scriptif:not(#mbb) .mb-icx:not(.ms-bar *, .lqd-header *, .lqd-stepper-btn) { border-radius: 9999px !important; padding: 0 !important; }

/* -- text-only actions painted `text-secondary` (a surface colour in the brand: sand in light, deep green in dark)
      were invisible (e.g. image generator "إنشاء موجّه نموذجي"): they are links -- */
body.scriptif:not(#mbb) :is(button, a)[class~="text-secondary"]:not([class*="bg-"], .lqd-btn-secondary, .ms-bar *, .lqd-header *, .lqd-navbar *) { color: var(--mbb-link) !important; font-weight: 700; text-underline-offset: 3px; }

/* -- segmented tabs that wrap on phones: joined edges only work on one line, so each segment becomes its own pill -- */
@media (max-width: 767px) {
	body.scriptif:not(#mbb) .lqd-tabs-nav.mbh-34 { gap: 6px; }
	body.scriptif:not(#mbb) .lqd-tabs-nav > .lqd-tabs-trigger { border-radius: 9999px !important; }
}

/* -- chatbot editor (training step): the form's «تدريب GPT» submit stood half-width above full-width «التالي» /
      «تخطي»; the "hug the label" desktop rule for form submits must not apply inside this stacked wizard -- */
body.scriptif:not(#mbb) [class*="lqd-ext-chatbot"] :is(.lqd-btn, .btn).w-full { width: 100% !important; margin-inline: 0 !important; }

/* -- agent inbox list toolbar (search · calendar · export · assign · filter) on phones: five compact icons and the
      inbox title share 390px, so the row tightens instead of pushing the first icon off-screen -- */
@media (max-width: 767px) {
	body.scriptif:not(#mbb) .lqd-ext-chatbot-history-sidebar .ms-auto.flex.mbh-35 { gap: 2px !important; }
	body.scriptif:not(#mbb) .lqd-ext-chatbot-history-sidebar .ms-auto.flex .mb-icb { --mbb-icb: 34px; }
}

/* ==========================================================================
   Design pass 2026-10-30 · Previous-theme leftovers: colours, gradients, tokens, icons
   ========================================================================== */
/* ==========================================================================
   Legacy-theme leftovers (audit: legacy) — append to scriptif.css.
   Colours only from the brand set; no gradients; no button base styles.
   ========================================================================== */

/* ---------- 1. Tailwind alpha tints (bg-blue-500/10, border-amber-500/30 …) ----------
   The hue swap (scriptif.css "Legacy Tailwind hues": bg-blue-* -> --mb-mid) and the status swaps matched the solid
   classes only, so "/10" tints became solid green bars (info alerts, CRM type chips: 1.3:1) or kept the vendor
   emerald / rose / amber. A class that carries an alpha ("…00/", "…50/") is a tint: soft brand tint, readable ink.
   Selectors match the token start only, so hover:/dark: variants are not painted permanently. */
body.scriptif :is([class^="bg-blue-"], [class*=" bg-blue-"], [class^="bg-indigo-"], [class*=" bg-indigo-"], [class^="bg-sky-"], [class*=" bg-sky-"], [class^="bg-cyan-"], [class*=" bg-cyan-"]):is([class*="00/"], [class*="50/"]) { background-color: rgba(166, 199, 50, .18) !important; }
body.scriptif :is([class^="bg-violet-"], [class*=" bg-violet-"], [class^="bg-purple-"], [class*=" bg-purple-"], [class^="bg-fuchsia-"], [class*=" bg-fuchsia-"], [class^="bg-pink-"], [class*=" bg-pink-"]):is([class*="00/"], [class*="50/"]) { background-color: rgba(216, 203, 178, .4) !important; }
body.scriptif :is([class^="bg-green-"], [class*=" bg-green-"], [class^="bg-emerald-"], [class*=" bg-emerald-"], [class^="bg-teal-"], [class*=" bg-teal-"]):is([class*="00/"], [class*="50/"]) { background-color: rgba(46, 125, 91, .12) !important; }
body.scriptif :is([class^="bg-amber-"], [class*=" bg-amber-"], [class^="bg-yellow-"], [class*=" bg-yellow-"], [class^="bg-orange-"], [class*=" bg-orange-"]):is([class*="00/"], [class*="50/"]) { background-color: rgba(183, 121, 31, .14) !important; }
body.scriptif :is([class^="bg-red-"], [class*=" bg-red-"], [class^="bg-rose-"], [class*=" bg-rose-"]):is([class*="00/"], [class*="50/"]) { background-color: rgba(180, 35, 24, .1) !important; }
body.scriptif.theme-dark :is([class^="bg-blue-"], [class*=" bg-blue-"], [class^="bg-indigo-"], [class*=" bg-indigo-"], [class^="bg-sky-"], [class*=" bg-sky-"], [class^="bg-cyan-"], [class*=" bg-cyan-"]):is([class*="00/"], [class*="50/"]) { background-color: rgba(166, 199, 50, .14) !important; }
body.scriptif.theme-dark :is([class^="bg-violet-"], [class*=" bg-violet-"], [class^="bg-purple-"], [class*=" bg-purple-"], [class^="bg-fuchsia-"], [class*=" bg-fuchsia-"], [class^="bg-pink-"], [class*=" bg-pink-"]):is([class*="00/"], [class*="50/"]) { background-color: rgba(216, 203, 178, .12) !important; }
body.scriptif.theme-dark :is([class^="bg-green-"], [class*=" bg-green-"], [class^="bg-emerald-"], [class*=" bg-emerald-"], [class^="bg-teal-"], [class*=" bg-teal-"]):is([class*="00/"], [class*="50/"]) { background-color: rgba(127, 203, 164, .14) !important; }
body.scriptif.theme-dark :is([class^="bg-amber-"], [class*=" bg-amber-"], [class^="bg-yellow-"], [class*=" bg-yellow-"], [class^="bg-orange-"], [class*=" bg-orange-"]):is([class*="00/"], [class*="50/"]) { background-color: rgba(227, 176, 98, .14) !important; }
body.scriptif.theme-dark :is([class^="bg-red-"], [class*=" bg-red-"], [class^="bg-rose-"], [class*=" bg-rose-"]):is([class*="00/"], [class*="50/"]) { background-color: rgba(239, 167, 159, .14) !important; }
/* tint borders follow the same family */
body.scriptif :is([class^="border-blue-"], [class*=" border-blue-"], [class^="border-indigo-"], [class*=" border-indigo-"], [class^="border-sky-"], [class*=" border-sky-"], [class^="border-cyan-"], [class*=" border-cyan-"], [class^="border-violet-"], [class*=" border-violet-"], [class^="border-purple-"], [class*=" border-purple-"], [class^="border-fuchsia-"], [class*=" border-fuchsia-"], [class^="border-pink-"], [class*=" border-pink-"]) { border-color: var(--mb-line-strong) !important; }
body.scriptif :is([class^="border-green-"], [class*=" border-green-"], [class^="border-emerald-"], [class*=" border-emerald-"], [class^="border-teal-"], [class*=" border-teal-"]) { border-color: rgba(46, 125, 91, .32) !important; }
body.scriptif :is([class^="border-amber-"], [class*=" border-amber-"], [class^="border-yellow-"], [class*=" border-yellow-"], [class^="border-orange-"], [class*=" border-orange-"]) { border-color: rgba(183, 121, 31, .34) !important; }
body.scriptif :is([class^="border-red-"], [class*=" border-red-"], [class^="border-rose-"], [class*=" border-rose-"]) { border-color: rgba(180, 35, 24, .3) !important; }
body.scriptif.theme-dark :is([class^="border-green-"], [class*=" border-green-"], [class^="border-emerald-"], [class*=" border-emerald-"], [class^="border-teal-"], [class*=" border-teal-"]) { border-color: rgba(127, 203, 164, .3) !important; }
body.scriptif.theme-dark :is([class^="border-amber-"], [class*=" border-amber-"], [class^="border-yellow-"], [class*=" border-yellow-"], [class^="border-orange-"], [class*=" border-orange-"]) { border-color: rgba(227, 176, 98, .3) !important; }
body.scriptif.theme-dark :is([class^="border-red-"], [class*=" border-red-"], [class^="border-rose-"], [class*=" border-rose-"]) { border-color: rgba(239, 167, 159, .3) !important; }

/* ---------- 2. Status ink: every emerald / green / teal / amber / orange / rose / red text shade ----------
   The theme mapped -500/-600/-700 of some families only; 400 / 800 and dark: variants kept Tailwind (2.1–3:1 on tints).
   Light ink is darker than the fill so small badge text passes AA (success 5.4:1, warning 5.0:1, danger 5.6:1). */
body.scriptif :is([class^="text-green-"], [class*=" text-green-"], [class^="text-emerald-"], [class*=" text-emerald-"], [class^="text-teal-"], [class*=" text-teal-"]):not(svg) { color: var(--mb-mid) !important; }
body.scriptif :is([class^="text-amber-"], [class*=" text-amber-"], [class^="text-yellow-"], [class*=" text-yellow-"], [class^="text-orange-"], [class*=" text-orange-"]):not(svg) { color: #8A5A14 !important; }
body.scriptif :is([class^="text-red-"], [class*=" text-red-"], [class^="text-rose-"], [class*=" text-rose-"]):not(svg) { color: #B42318 !important; }
body.scriptif.theme-dark :is([class^="text-green-"], [class*=" text-green-"], [class^="text-emerald-"], [class*=" text-emerald-"], [class^="text-teal-"], [class*=" text-teal-"], [class^="dark:text-green-"], [class*=" dark:text-green-"], [class^="dark:text-emerald-"], [class*=" dark:text-emerald-"], [class^="dark:text-teal-"], [class*=" dark:text-teal-"]):not(svg) { color: #7FCBA4 !important; }
body.scriptif.theme-dark :is([class^="text-amber-"], [class*=" text-amber-"], [class^="text-yellow-"], [class*=" text-yellow-"], [class^="text-orange-"], [class*=" text-orange-"], [class^="dark:text-amber-"], [class*=" dark:text-amber-"], [class^="dark:text-yellow-"], [class*=" dark:text-yellow-"], [class^="dark:text-orange-"], [class*=" dark:text-orange-"]):not(svg) { color: #E3B062 !important; }
body.scriptif.theme-dark :is([class^="text-red-"], [class*=" text-red-"], [class^="text-rose-"], [class*=" text-rose-"], [class^="dark:text-red-"], [class*=" dark:text-red-"], [class^="dark:text-rose-"], [class*=" dark:text-rose-"]):not(svg) { color: #EFA79F !important; }
/* status icons keep the status colour */
body.scriptif svg:is([class^="text-green-"], [class*=" text-green-"], [class^="text-emerald-"], [class*=" text-emerald-"], [class^="text-teal-"], [class*=" text-teal-"]) { color: #2E7D5B !important; }
body.scriptif.theme-dark svg:is([class^="text-green-"], [class*=" text-green-"], [class^="text-emerald-"], [class*=" text-emerald-"], [class^="text-teal-"], [class*=" text-teal-"]) { color: #7FCBA4 !important; }
/* hover fills / coloured hover shadows on status badges -> the solid brand status colour, no glow */
body.scriptif [class*="hover:bg-emerald-"]:hover, body.scriptif [class*="hover:bg-green-"]:hover { background-color: #2E7D5B !important; color: #FBFAF7 !important; }
body.scriptif :is([class*="hover:bg-rose-"], [class*="hover:bg-red-"]):not(.lqd-btn):not(.btn):hover { background-color: #B42318 !important; color: #FBFAF7 !important; }
body.scriptif :is([class*="hover:shadow-emerald-"], [class*="hover:shadow-rose-"], [class*="hover:shadow-green-"], [class*="hover:shadow-red-"]):hover { box-shadow: none !important; }
body.scriptif :is([class*="hover:text-red-"], [class*="hover:text-rose-"]):hover { color: #B42318 !important; }
body.scriptif.theme-dark :is([class*="hover:text-red-"], [class*="hover:text-rose-"]):hover { color: #EFA79F !important; }
/* legend / type dots (empty discs): four tellable brand swatches instead of one green for blue and violet alike */
body.scriptif :is([class*="bg-blue-"], [class*="bg-indigo-"], [class*="bg-sky-"])[class*="rounded-"]:empty { background-color: #A6C732 !important; }
body.scriptif :is([class*="bg-violet-"], [class*="bg-purple-"], [class*="bg-fuchsia-"], [class*="bg-pink-"])[class*="rounded-"]:empty { background-color: var(--mb-mid) !important; }
body.scriptif.theme-dark :is([class*="bg-violet-"], [class*="bg-purple-"], [class*="bg-fuchsia-"], [class*="bg-pink-"])[class*="rounded-"]:empty { background-color: #D8CBB2 !important; }

/* ---------- 3. Tokens captured at :root by the vendor ----------
   These are declared on :root from vendor values (--primary 262 93% 26% purple, --font-heading "Spline Sans") and
   inherit as already-resolved values, so the brand tokens on <body> never reach them. Re-declare them on body. */
body.scriptif {
	--headings-font-family: var(--font-heading), ui-sans-serif, system-ui, sans-serif;
	--headings-color: hsl(var(--heading-foreground));
	--lqd-shadow-color: rgba(20, 32, 30, .07);
	--folder-foreground: var(--card-foreground);
	--folder-border: var(--card-border);
	--tblr-bg-forms: var(--input-background);
	--fc-border-color: hsl(var(--border));
	--fc-button-bg-color: hsl(var(--primary));
	--fc-button-text-color: hsl(var(--primary-foreground));
	--fc-button-border-color: hsl(var(--primary));
	--fc-button-hover-bg-color: hsl(var(--primary) / 80%);
	--fc-button-hover-text-color: hsl(var(--primary-foreground));
}

/* ---------- 4. Custom checkbox tick (admin forms) ----------
   The vendor tick is a data-URI drawn in purple #7A63DF; same 9x7 mark in deep green (reads on the white light box and
   on the ivory checked box of dark mode) */
body.scriptif input:checked ~ .lqd-input-checkbox-custom-wrap {
	background-image: url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.55664 5.30859L7.43359 0.431641L8.05664 1.07617L2.55664 6.57617L0 4.01953L0.644531 3.375L2.55664 5.30859Z' fill='%23163A36' stroke='%23163A36' stroke-width='.4'/%3E%3C/svg%3E") !important;
}

/* ---------- 5. Native controls and autofill ----------
   radios / checkboxes left to the browser drew system blue; Chrome autofill paints inputs light blue (dark: slate blue) */
body.scriptif input:is([type="checkbox"], [type="radio"], [type="range"]) { accent-color: var(--mb-green); }
body.scriptif.theme-dark input:is([type="checkbox"], [type="radio"], [type="range"]) { accent-color: var(--mb-lime); }
body.scriptif :is(input, textarea, select):-webkit-autofill,
body.scriptif :is(input, textarea, select):-webkit-autofill:is(:hover, :focus) {
	-webkit-box-shadow: 0 0 0 1000px var(--mb-input) inset !important;
	-webkit-text-fill-color: var(--mb-ink) !important;
	caret-color: var(--mb-ink);
	transition: background-color 99999s;
}

/* ---------- 6. ApexCharts toolbar (zoom / pan / reset / menu) ----------
   injected by the library at runtime: slate #6E8192 icons, blue #008FFB selected state */
body.scriptif .apexcharts-toolbar svg { fill: var(--mb-muted) !important; }
body.scriptif .apexcharts-toolbar .apexcharts-pan-icon svg { fill: none !important; stroke: var(--mb-muted) !important; }
body.scriptif .apexcharts-toolbar :is(.apexcharts-selected, > div:hover) svg { fill: var(--mb-green) !important; }
body.scriptif .apexcharts-toolbar .apexcharts-pan-icon:is(.apexcharts-selected, :hover) svg { fill: none !important; stroke: var(--mb-green) !important; }
body.scriptif.theme-dark .apexcharts-toolbar :is(.apexcharts-selected, > div:hover) svg { fill: var(--mb-lime) !important; }
body.scriptif.theme-dark .apexcharts-toolbar .apexcharts-pan-icon:is(.apexcharts-selected, :hover) svg { fill: none !important; stroke: var(--mb-lime) !important; }
body.scriptif .apexcharts-menu { background: var(--mb-card) !important; border-color: var(--mb-line) !important; color: var(--mb-ink); border-radius: 12px; }
body.scriptif .apexcharts-menu-item:hover { background: var(--mb-input) !important; }

/* ---------- 7. Brand-token gradients that are still gradients ----------
   progress bars, wizard step underlines (chatbot editor, automation, social agent, call agent), tool discs
   (advanced image) painted from-gradient-from via/to-gradient-to: flat lime signal. Panels keep the sand/green
   surface rule above; buttons are owned by the button layer. */
body.scriptif [class*="from-gradient-from"]:not([class*="from-gradient-from/"]):not(section):not(.lqd-btn):not(.btn):not(button) { background-image: none !important; background-color: var(--mb-lime) !important; }
body.scriptif [class*="from-gradient-from"]:not([class*="from-gradient-from/"]):not(section):not(.lqd-btn):not(.btn):not(button) > :is(svg, .mb-ph) { color: var(--mb-deep) !important; }
/* the admin status gauge draws its arc with an SVG gradient: one flat lime arc */
body.scriptif .mb-gauge-svg .mb-g-bar { stroke: var(--mb-lime) !important; }

/* ---------- 8. Vendor decorative rasters ----------
   advanced image: a blurred purple / blue / pink blob photo behind the hero (light mode, 30% opacity) */
body.scriptif img[src*="/advanced-image/image-editor-bg"] { display: none !important; }
/* image / video / voiceover generators: teal-to-pink glow ring raster (generators-bg-*.png) across the card */
body.scriptif :is(.lqd-video-generator, .lqd-image-generator, .lqd-voiceover-generator) { background-image: none !important; }
/* …and without the ring the frosted inner card only draws a second frame: flatten it into the card (U29) */
body.scriptif .lqd-card .workbook-form > .rounded-3xl.backdrop-blur-lg { background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding-inline: 0 !important; }
/* lavender card fill (bg-[#F2F1FD]) on the generator cards */
body.scriptif [class*="bg-[#F2F1FD]"] { background-color: var(--mb-bone) !important; }
body.scriptif.theme-dark [class*="bg-[#F2F1FD]"] { background-color: rgba(235, 229, 216, .05) !important; }

/* ---------- 9. Hard-coded vendor tints the runtime hue swap skips ----------
   medya-ui.js legacyHues() ignores very light tints (l > .9) and the 18–25° orange band, so these stay vendor */
/* writer v2 template rows: lavender pills (bg-[#E2E5FF]) -> card pills on the bone sidebar */
body.scriptif .lqd-generator-item[class*="bg-[#E2E5FF]"] { background-color: var(--mb-card) !important; box-shadow: inset 0 0 0 1px var(--mb-line); }
body.scriptif .lqd-generator-item[class*="bg-[#E2E5FF]"]:hover { box-shadow: inset 0 0 0 1px var(--mb-line-strong), var(--mb-lift); }
body.scriptif.theme-dark .lqd-generator-item[class*="bg-[#E2E5FF]"] { background-color: rgba(235, 229, 216, .05) !important; color: var(--mb-ink); }
/* admin users finance / edit: violet section header bands */
body.scriptif [class*="bg-[rgba(157,107,221"] { background-color: #ECE6DA !important; }
body.scriptif.theme-dark [class*="bg-[rgba(157,107,221"] { background-color: rgba(235, 229, 216, .06) !important; }
/* admin dashboard usage bar + legend: the orange series (bg-[#E77B35]) -> brand sand accent */
body.scriptif [class*="bg-[#E77B35]"] { background-color: #E9B872 !important; }

/* ---------- 10. Vendor empty-state illustration (documents, folders) ----------
   grey disc + grey lines (fill-primary/30) -> the flat Scriptif pair: soft lime disc, bone page, deep-green lines */
body.scriptif .lqd-empty-doc svg > path:first-child { fill: #E6EEC4; }
body.scriptif .lqd-empty-doc svg > path:not(:first-child):not(.fill-background) { fill: var(--mb-green); }
body.scriptif .lqd-empty-doc svg > path.fill-background { fill: var(--mb-page); }
body.scriptif.theme-dark .lqd-empty-doc svg > path:first-child { fill: rgba(166, 199, 50, .16); }
body.scriptif.theme-dark .lqd-empty-doc svg > path:not(:first-child):not(.fill-background) { fill: var(--mb-lime); }
body.scriptif.theme-dark .lqd-empty-doc svg > path.fill-background { fill: var(--mb-card); }

/* ---------- 11. Gradient-stroked vendor glyphs (fallback while medya-ui.js swaps them) ----------
   plan summary, admin config tiles, card heads: blue -> violet -> lime strokes become one brand ink */
body.scriptif svg:not(.apexcharts-svg):not(.highcharts-root):not([class*="mb-"]) [stroke^="url(#"] { stroke: currentColor !important; }
body.scriptif :is(.lqd-card, .lqd-card-body) svg:not(.apexcharts-svg):not(.highcharts-root):not([class*="mb-"]):not([width="150"]) [fill^="url(#"] { fill: currentColor !important; }
/* the 40–44px feature glyphs that replace them (config tiles, plan summary) speak in the brand green / lime */
body.scriptif svg.mb-ph:is([width="40"], [width="44"]) { color: var(--mb-green); }
body.scriptif.theme-dark svg.mb-ph:is([width="40"], [width="44"]) { color: var(--mb-lime); }
body.scriptif svg.mb-ph[width="40"][height="20"] { width: 26px; height: 26px; }
/* generator template discs: some template glyphs ship an orange -> magenta gradient fill */
body.scriptif span.inline-grid[class*="size-"] > svg:not([class*="mb-"]) [fill^="url(#"] { fill: currentColor !important; }

/* ---------- 12. Tabler / Bootstrap alerts and arbitrary vendor inks ---------- */
body.scriptif .alert.alert-danger { background-color: rgba(180, 35, 24, .08) !important; border-color: rgba(180, 35, 24, .28) !important; color: #B42318 !important; }
body.scriptif.theme-dark .alert.alert-danger { background-color: rgba(239, 167, 159, .1) !important; border-color: rgba(239, 167, 159, .3) !important; color: #EFA79F !important; }
body.scriptif .alert.alert-danger :is(strong, b, a) { color: inherit !important; }
/* plan feature ticks: indigo ink + 10% indigo chip (text-[#684AE2] bg-[#684AE2] bg-opacity-10) */
body.scriptif [class*="text-[#684AE2]"] { color: var(--mb-green) !important; }
body.scriptif.theme-dark [class*="text-[#684AE2]"] { color: var(--mb-lime) !important; }
/* caption template picker: the close (×) turned red-500 on hover; a close is not a destructive action */
body.scriptif a.absolute[class*="-top-4"][class*="-end-4"]:is([class*="hover:text-red-"], [class*="hover:bg-red-"]):hover { color: var(--mb-ink) !important; background-color: var(--mb-input) !important; }

/* ---------- 13. Multi-series ApexCharts: the second series must be tellable ----------
   every area / line / bar was painted the same green + lime (CRM revenue forecast: "forecast" vs "achieved",
   vendor #20C69F marker); series 2 takes the sand accent, in the chart and in its legend marker */
body.scriptif .apexcharts-series[rel="2"] path.apexcharts-area { fill: rgba(233, 184, 114, .26) !important; stroke: #B7791F !important; }
body.scriptif .apexcharts-series[rel="2"] path.apexcharts-line { stroke: #B7791F !important; }
body.scriptif .apexcharts-series[rel="2"] path.apexcharts-bar-area { fill: #E9B872 !important; }
body.scriptif.theme-dark .apexcharts-series[rel="2"] :is(path.apexcharts-area, path.apexcharts-line) { stroke: #E9B872 !important; }
body.scriptif .apexcharts-legend-series[rel="2"] .apexcharts-legend-marker { background-color: #E9B872 !important; color: #E9B872 !important; }
body.scriptif .apexcharts-legend-series .apexcharts-legend-marker path { fill: currentColor !important; stroke: none !important; }

/* ==========================================================================
   Design pass 2026-10-30 · User pages: layout & finish
   ========================================================================== */
/* ==========================================================================
   Sweep · user pages (home, writer / generators, chat, documents, image tools,
   brand, affiliates, orders, settings, support) — layout & finish fixes
   ========================================================================== */

/* ---------- Page title bar ---------- */
/* the vendor fixes the title column at 5/12, so longer Arabic titles ("التعليق الصوتي بالذكاء الاصطناعي") broke onto two lines beside a half-empty actions column. Title takes the room, actions hug their buttons */
@media (min-width: 992px) {
	body.scriptif .lqd-titlebar .lqd-titlebar-col-nav { width: auto; flex: 1 1 0; min-width: 0; }
	body.scriptif .lqd-titlebar .lqd-titlebar-col-actions { width: auto; flex: 0 0 auto; max-width: 60%; }
}

/* ---------- Cards ---------- */
/* card heads (title + "المزيد" link): the 44px touch-target link stretched the title and left it on the top edge; centre both on one line */
body.scriptif .lqd-card-head.flex { align-items: center; }

/* ---------- Number counters (home metrics…) ---------- */
/* the rolling digit column fades 8px of its neighbours in; the next digit peeked under every "0" as a stray mark */
body.scriptif .lqd-number-counter-numbers-col { clip-path: inset(8px 0); }

/* ---------- Numbered step lists (affiliates "how it works") ---------- */
/* wrapped lines ran back under the number disc; hang the text beside it */
body.scriptif ol > li.mbh-36.mbh-36.mbh-36:not(mbh) { position: relative; padding-inline-start: 38px; min-height: 28px; padding-top: 3px; }
body.scriptif ol > li > span.inline-flex.size-7:first-child { position: absolute; inset-inline-start: 0; top: 0; margin: 0 !important; }

/* ---------- Inputs ---------- */
/* inputs with an action button laid over their end (referral link + copy): the value ran under the button */
body.scriptif .relative.mbh-37:not(mbh) > .lqd-input-container > input.lqd-input { padding-inline-end: 48px; }
/* phones/tablets: the 44px touch-target rule (.lqd-input) also hit switches, checkboxes and radios (lqd-input-switcher…), stretching them into 34x44 slabs */
@media (max-width: 1023px) {
	body.scriptif input.lqd-input:is([type="checkbox"], [type="radio"]) { min-height: 0; }
}
/* Arabic UI: phone / email / URL values are Latin; keep their characters in reading order ("+000…" not "…000+") and sit them on the start edge */
[dir="rtl"] body.scriptif input:is([type="tel"], [type="email"], [type="url"], [name="phone"], #phone) { direction: ltr; text-align: right; }

/* ---------- Text colour token ---------- */
/* .text-secondary: --secondary is a surface tone in the theme (sand / deep green), so text painted with it vanished in both modes (image generator "إنشاء موجّه نموذجي"). Use its foreground pair */
body.scriptif .text-secondary { color: hsl(var(--secondary-foreground)) !important; }

/* ---------- Filter chip lists (templates, documents…) ---------- */
/* rows start at the reading edge; on phones one swipeable row instead of a wall of 9 chip rows */
body.scriptif ul.lqd-filter-list { justify-content: flex-start !important; }
@media (max-width: 767px) {
	body.scriptif ul.lqd-filter-list { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding: 2px 20px 6px; }
	body.scriptif ul.lqd-filter-list::-webkit-scrollbar { display: none; }
	body.scriptif ul.lqd-filter-list > li { flex-shrink: 0; }
	body.scriptif ul.lqd-filter-list .lqd-btn { white-space: nowrap; }
}

/* ---------- Segmented tab bars (image generator modes…) ---------- */
/* built from edge-joined buttons: when they wrap on phones the joined corners broke apart. The bar is now one rounded track, each segment a pill inside it */
body.scriptif .lqd-tabs-nav.mbh-38.mbh-38 { gap: 4px; padding: 4px; border-radius: 24px; background: var(--mb-bone); box-shadow: inset 0 0 0 1px var(--mb-line); }
body.scriptif.theme-dark .lqd-tabs-nav.mbh-38.mbh-38 { background: rgba(235, 229, 216, .05); }
body.scriptif .lqd-tabs-nav.mbh-38.mbh-38 > .lqd-btn { border-radius: 9999px !important; }
body.scriptif .lqd-tabs-nav.mbh-38.mbh-38 > .lqd-btn:not(.active):not(:hover) { background: transparent !important; }

/* ---------- Tables ---------- */
/* tables with no rows (orders, referred users, brands, support tickets): a header strip alone read as broken; say it is empty */
body.scriptif .lqd-table-outline.mbh-40:not(mbh):not(:where(.mbh-39):not(mbh):not(mbh))::after {
	content: "Nothing here yet";
	display: block;
	padding: 28px 16px 30px;
	text-align: center;
	font-size: 14px;
	color: var(--mb-muted);
}
html[lang="ar"] body.scriptif .lqd-table-outline.mbh-40:not(mbh):not(:where(.mbh-39):not(mbh):not(mbh))::after { content: "لا توجد عناصر بعد"; }
/* the table scrolls sideways on phones anyway: keep each header on one line instead of stacking "رقم / الطلب" */
@media (max-width: 767px) { body.scriptif .lqd-table-outline > table.lqd-table th { white-space: nowrap; } }

/* ---------- Templates list (/openai) ---------- */
/* a category heading with no templates under it ("Youtube 0") is not shown */
body.scriptif #lqd-generators-list > h2:is(:where(.mbh-41):not(mbh), :last-child) { display: none !important; }

/* ---------- Writer / generator pages ---------- */
/* the results table card stretched to the form column's height, leaving a tall empty white box under "no entries yet" */
body.scriptif .lqd-generator-wrap > #generator_sidebar_table { align-self: start; }
/* workbook editor card: the vendor lg:ps-16 gutter (meant for the old borderless column) left the title row, toolbar and their dividers 64px short of the framed card's edge */
body.scriptif #workbook_textarea { padding-inline-start: 0 !important; }
/* writer (generator v2) template search: below 1024px the vendor pushes the magnifier to 24px, onto the placeholder */
body.scriptif .lqd-generator-search-form svg.lqd-header-search-icon { inset-inline-start: 14px !important; }
body.scriptif .lqd-generator-search-form .lqd-input { padding-inline-start: 44px !important; }

/* ---------- AI image generator ---------- */
/* "إنشاء موجّه نموذجي" reads as a link (its colour comes from the .text-secondary fix above) */
body.scriptif .lqd-image-generator-random-prompt-trigger { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--mb-lime); }
/* advanced settings: flex-grow rows gave every select a different width; an even grid instead */
body.scriptif .lqd-image-generator-tabs-content :is(.lqd-input-group, form > div.w-full.flex-wrap.justify-between):not(.hidden) { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* below 992px the generate button drops under the prompt but the vendor keeps it a 44px icon square (label clipped) pushed 16px past the card edge by end-4 */
@media (max-width: 991px) {
	body.scriptif .lqd-image-generator-inputs-wrap .lqd-btn[type="submit"] { width: 100%; inset-inline: auto; }
}

/* ---------- Advanced image editor (/advanced-image) ---------- */
/* prompt bar: one pill — model select and prompt sit flat inside it, split by a hairline (they were two boxed fields touching the pill's edges) */
body.scriptif .lqd-adv-img-editor-form { background: var(--mb-card) !important; border: 1px solid var(--mb-line) !important; }
body.scriptif .lqd-adv-img-editor-form :is(select, input).lqd-input { background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
body.scriptif .lqd-adv-img-editor-form > .lqd-input-container:where(.mbh-42):not(mbh) { border-inline-end: 1px solid var(--mb-line); }
@media (max-width: 639px) {
	body.scriptif .lqd-adv-img-editor-form > .lqd-input-container:where(.mbh-42):not(mbh) { border-inline-end: 0; border-bottom: 1px solid var(--mb-line); }
}
/* its top bar: buttons keep their label on one line; logo gets the studio-bar crop / size (the light file is a 175px square canvas, the dark one 70px tall) — together they overflowed 390px phones */
body.scriptif .lqd-adv-img-editor .lqd-btn { white-space: nowrap; }
body.scriptif .lqd-adv-img-editor-nav img[class~="dark:hidden"] { width: 128px !important; height: 38px !important; object-fit: cover; object-position: center; }
body.scriptif .lqd-adv-img-editor-nav img[class~="dark:block"] { height: 44px !important; width: auto !important; margin-block: -6px; }
@media (max-width: 479px) {
	body.scriptif .lqd-adv-img-editor-nav img[class~="dark:hidden"] { width: 108px !important; height: 32px !important; }
	body.scriptif .lqd-adv-img-editor-nav img[class~="dark:block"] { height: 38px !important; }
	body.scriptif .lqd-adv-img-editor-nav .lqd-btn { padding-inline: 14px !important; }
}

/* ---------- AI chat ---------- */
/* bubbles: each paragraph takes the direction of its own text, so English replies don't throw their full stop / brackets to the wrong end in the Arabic UI */
body.scriptif .chat-content-container .chat-content :is(p, li, h1, h2, h3, h4, h5, h6, blockquote) { unicode-bidi: plaintext; text-align: start; }
/* model picker label (Latin model names with brackets: "GPT-5 Chat (Sep 30, …") */
body.scriptif #openRouterModel .lqd-btn > span > span { unicode-bidi: plaintext; }
/* chat head tool row (realtime toggle, share, export, new, more): mixed 32/44px controls sat on the top edge; centre them on one line */
body.scriptif .lqd-chat-head .flex.grow > .flex, body.scriptif .lqd-chat-head .flex.grow { align-items: center; }
/* persona avatars without a picture: the hue swap paints the disc dark green (light) / ivory (dark) but the initials stay 65% ink, i.e. invisible. One brand disc with readable initials */
body.scriptif .lqd-chat-category-avatar[style*="background"] { background-color: var(--mb-green) !important; color: #EBE5D8 !important; }
body.scriptif.theme-dark .lqd-chat-category-avatar[style*="background"] { background-color: #EBE5D8 !important; color: #0F2B27 !important; }

/* ---------- Settings / brand forms ---------- */
/* account settings: the "change password" sub-heading was centred inside a start-aligned form */
body.scriptif #user_edit_form h4 { text-align: start; }
/* step forms (brand voice / company): the settings-card padding rule skips bodies that contain a card, so these fields ran edge to edge on the frame */
body.scriptif .lqd-page-settings .lqd-card > .lqd-card-body.lqd-card-size-none.mbh-43:not(mbh) { padding: 28px clamp(18px, 3vw, 36px); }

/* ==========================================================================
   Design pass 2026-10-30 · CRM, bots, marketing, social, automation: layout & finish
   ========================================================================== */
/* ==========================================================================
   sweep-crm-bots — CRM, chatbots, marketing bot, social media, automation
   layout / spacing / alignment / RTL / contrast / component finish
   ========================================================================== */

/* ---------- Phone touch-target rule (scriptif.css ~L460 `.lqd-input {min-height:44px}`) also hit switches/checkboxes/radios/ranges: toggles became 34x44 blobs; give them back their own height ---------- */
@media (max-width: 1023px) {
	body.scriptif :is(.lqd-input-switcher, input[type="checkbox"].lqd-input, input[type="radio"].lqd-input, input[type="range"].lqd-input, input[type="color"].lqd-input) { min-height: 0; }
}

/* ---------- Modals: the vendor swaps --input-background to neutral grey inside .lqd-modal-modal (#F2F3F1 / #454545 on dark); use the brand input token like cards do ---------- */
body.scriptif .lqd-modal-modal { --input-background: 37 31% 95%; }
body.scriptif.theme-dark .lqd-modal-modal { --input-background: 171 50% 8%; }
/* file pickers use .rounded-input (32px pill) while every other field in the form is 12px */
body.scriptif input[type="file"].rounded-input { border-radius: 12px; }

/* ---------- Mixed-script fields: English values / URLs / multi-line text pick their own direction per paragraph instead of inheriting RTL («?Hi, how can I help you») ---------- */
body.scriptif :is(textarea.lqd-input, textarea.form-control, input[type="url"], input[type="email"]) { unicode-bidi: plaintext; }

/* ---------- Empty data tables (knowledge base, canned responses, customers, tags, marketing-bot lists): the vendor renders only the header strip; add the quiet empty line the CRM tables already have ---------- */
body.scriptif .lqd-table-wrap.mbh-45:not(mbh):not(mbh):not(:where(.mbh-44):not(mbh):not(mbh))::after { content: "لا توجد عناصر بعد"; display: block; padding: 26px 16px 28px; text-align: center; font-size: 13px; color: var(--mb-muted); border-top: 1px solid var(--mb-line); }
html[lang="en"] body.scriptif .lqd-table-wrap.mbh-45:not(mbh):not(mbh):not(:where(.mbh-44):not(mbh):not(mbh))::after { content: "Nothing here yet"; }

/* ---------- Stats strip (CRM deals / contacts / companies / tasks / reports): equal columns so the dividers sit at even intervals ---------- */
@media (min-width: 640px) {
	body.scriptif .lqd-card-body.mbh-46.mbh-46.mbh-46:not(mbh) > div { flex: 1 1 0; min-width: 0; padding-inline: 24px; }
	body.scriptif .lqd-card-body.mbh-46.mbh-46.mbh-46:not(mbh) > div:first-child { padding-inline-start: 0; }
	body.scriptif .lqd-card-body.mbh-46.mbh-46.mbh-46:not(mbh) > div:last-child { padding-inline-end: 0; }
}

/* ---------- CRM overview «ما الجديد» 2x2 grid: divide-x paints physical left borders, so in RTL the top row lost its divider; draw it on the logical side ---------- */
@media (min-width: 768px) {
	body.scriptif .lqd-card .grid.divide-y.md\:divide-x.md\:grid-cols-2 > * { border-left-width: 0 !important; border-right-width: 0 !important; }
	body.scriptif .lqd-card .grid.divide-y.md\:divide-x.md\:grid-cols-2 > :nth-child(odd) { border-inline-end: 1px solid var(--mb-line) !important; }
}

/* ---------- Kanban (deals pipeline, task board, project board): empty lanes were fully transparent, so the board read as a row of floating pills; give lanes a soft well ---------- */
body.scriptif .overflow-x-auto > div > div.min-h-\[200px\].border-dashed.border-transparent { background-color: var(--mb-line-soft); }

/* ---------- Empty states (CRM overview cards, …): the icon disc was foreground at 3% — a neutral grey; bone disc with brand ink like the other Scriptif empty states ---------- */
body.scriptif .lqd-empty-state > div.rounded-full:first-child { background-color: var(--mb-bone); color: var(--mb-green); }
body.scriptif.theme-dark .lqd-empty-state > div.rounded-full:first-child { background-color: rgba(235, 229, 216, .06); color: #A6C732; }

/* ---------- Agent hero kicker («مرحباً،» CRM, «رسائل جماعية» marketing bot) sat at opacity .35 (1.96:1): muted ink ---------- */
body.scriptif :is(h1, h2) span.opacity-35 { opacity: 1; color: var(--mb-muted); }

/* ---------- FullCalendar in RTL: the grid is already mirrored (scriptif.css), mirror the toolbar too so views sit at the start and prev/next point the Arabic way ---------- */
[dir="rtl"] .fc-direction-ltr .fc-header-toolbar { direction: rtl; }
[dir="rtl"] .fc-direction-ltr .fc-header-toolbar :is(.fc-icon-chevron-left, .fc-icon-chevron-right, .fc-icon-chevrons-left, .fc-icon-chevrons-right) { transform: scaleX(-1); }
/* other-month day numbers sat at opacity .3–.5 (1.9:1 light / 2.4:1 dark) on every calendar, not only social: muted ink instead */
body.scriptif .fc .fc-day-other .fc-daygrid-day-top { opacity: 1 !important; }
body.scriptif .fc .fc-day-other .fc-daygrid-day-number { color: var(--mb-muted) !important; }
/* social agent planner on a light page: weekday heads were excluded from the muted rule (meant for the dark report card) and stayed at 2.8:1 */
body.scriptif:not(.theme-dark) #social-media-agent-calendar .fc-col-header-cell-cushion:not(.text-white *) { color: var(--mb-muted) !important; }

/* ---------- CRM calendar type filters (المهام / الصفقات / المشاريع / الأنشطة): the legacy hue remap turned the /10 tints of «المهام» and «المشاريع» into solid mid-green under green text (1.3:1); one sand chip, ink text, the hue lives on the dot ---------- */
body.scriptif.page-user-crm-calendar button.rounded-full.border[class*="-500/10"] { background-color: var(--mb-sand) !important; border-color: var(--mb-line-strong) !important; color: var(--mb-ink) !important; }
body.scriptif.theme-dark.page-user-crm-calendar button.rounded-full.border[class*="-500/10"] { background-color: rgba(235, 229, 216, .08) !important; }
body.scriptif.page-user-crm-calendar button.rounded-full.border[class*="-500/10"] > span.rounded-full[class*="bg-purple-"] { background-color: var(--mb-green) !important; }
body.scriptif.theme-dark.page-user-crm-calendar button.rounded-full.border[class*="-500/10"] > span.rounded-full[class*="bg-purple-"] { background-color: #EBE5D8 !important; }
body.scriptif.page-user-crm-calendar button.rounded-full.border[class*="-500/10"] > span.rounded-full[class*="bg-blue-"] { background-color: #A6C732 !important; }

/* ---------- Chatbot / voice-bot editor window ---------- */
/* «الموضع» picker: RTL mirrored it, so «يسار» sat on the right with the widget drawn on the right; lay the two cards out physically */
body.scriptif div.flex:where(.mbh-48):not(#mbh):not(mbh):not(mbh):where(.mbh-47):not(#mbh):not(mbh):not(mbh) { direction: ltr; }
/* English sample/default values in the editor fields read in their own direction */
body.scriptif .lqd-chatbot-edit-window :is(input[type="text"], input:not([type]), input[type="url"], textarea) { unicode-bidi: plaintext; }
/* embed snippet is code: always LTR, left-aligned (it was bidi-scrambled and right-aligned) */
[dir="rtl"] body.scriptif :is(#embed-code-wrapper, pre > code) { direction: ltr; text-align: left; unicode-bidi: isolate; }
/* the options column is 430px but its grid track sized to content (462px channel row), so step 5 overflowed the column */
body.scriptif .lqd-chatbot-edit-window-options { grid-template-columns: minmax(0, 1fr); }
body.scriptif .lqd-chatbot-edit-window .lqd-social-media-cards-grid > * { flex: 1 1 0; min-width: 0; }
body.scriptif .lqd-chatbot-edit-window .lqd-social-media-cards-grid .lqd-btn { width: 100%; border-radius: 14px; }
/* the preview widget stays white in dark mode: its «مدعوم بـ» footer inherited the dark foreground (1.1:1) */
body.scriptif.theme-dark .lqd-chatbot-edit-window .lqd-ext-chatbot-window-foot { color: #5F6B68 !important; }

/* ---------- Chat bubbles (editor preview, conversations, inboxes): each message picks its own direction (English punctuation no longer jumps to the wrong end) ---------- */
body.scriptif .lqd-ext-chatbot-window-conversation-message-content :is(p, li, pre) { unicode-bidi: plaintext; }

/* ---------- Inboxes (chatbot agent, chatbot conversations, marketing-bot inbox) ---------- */
/* phone: the 100vh inbox sat under the sticky bar and above the dock, so the page scrolled and the composer hid under the dock */
@media (max-width: 1023px) { body.scriptif .lqd-ext-chatbot-history.h-screen { height: calc(100dvh - 142px); } }
/* side panel: inactive «السجلات» tab (opacity .5) and /40–/60 hints were 2.4–4.3:1 */
body.scriptif .lqd-ext-chatbot-history .lqd-btn-link.opacity-50:not(.active) { opacity: 1; color: var(--mb-muted) !important; }
body.scriptif .lqd-ext-chatbot-history :is(p, span):is([class*="text-foreground/40"], [class*="text-foreground/50"], [class*="text-foreground/60"], .opacity-50, .opacity-60) { color: var(--mb-muted) !important; opacity: 1; }

/* ---------- Marketing bot campaign builders: phone-preview timestamps were text-gray-400 on the white bubble (2.3–2.5:1) ---------- */
body.scriptif[class*="page-user-marketing-bot"] span.text-gray-400 { color: #5F6B68 !important; }

/* ---------- Platform card rows (.lqd-social-media-cards-grid — social accounts, automation): the flex row never wrapped, so on phone 4 of 7 cards ran off the left edge; wrap into even tiles ---------- */
body.scriptif .lqd-social-media-cards-grid { flex-wrap: wrap; }
body.scriptif .lqd-social-media-cards-grid > * { flex: 1 1 140px; min-width: 0; }
/* logos keep a common box so titles line up across the row (YouTube was 25px tall, the rest 36px) */
body.scriptif .lqd-social-media-cards-grid figure.w-9 { height: 36px; display: flex; align-items: center; }

/* ---------- Social / automation hints at text-foreground/40 («اختر حسابًا.» 2.5:1) — the existing social rule stops at /50 ---------- */
body.scriptif:is([class*="page-user-social-media"], [class*="page-user-automation"]) :is(p, span, small, label):is([class*="text-foreground/40"], [class*="text-heading-foreground/40"]) { color: var(--mb-muted) !important; }

/* ---------- Automation wizard step bar: upcoming steps at text-foreground/25 (1.7:1) — muted ink keeps them secondary but legible ---------- */
body.scriptif .grid.grid-flow-col.overflow-x-auto > div[class*="text-foreground/25"] { color: var(--mb-muted) !important; }

/* ==========================================================================
   Design pass 2026-10-30 · Video tools, agents, sales: layout & finish
   ========================================================================== */
/* ==========================================================================
   Sweep: video tools, AI agent, call agents, sales, payment (layout & finish)
   Append to scriptif.css. Every rule was prototyped live in light + dark, 1440 + 390.
   ========================================================================== */

/* ---------- Video agent composer: the same card as the auto-edit composer ----------
   vendor wrapper is borderless with a shadow-2xl halo and the inner panel is painted
   with the page colour, so the composer read as a blur on the page */
body.scriptif div.mbh-49:not(mbh) {
	background: var(--mb-card) !important;
	border: 1px solid var(--mb-line-strong) !important;
	border-radius: 22px !important;
	box-shadow: var(--mb-lift) !important;
	transition: border-color .2s var(--mb-ease);
}
body.scriptif div.mbh-49:not(mbh):focus-within { border-color: var(--mb-green) !important; }
body.scriptif.theme-dark div.mbh-49:not(mbh):focus-within { border-color: var(--mb-lime) !important; }
body.scriptif form.lqd-va-composer > div.bg-background { background: transparent !important; padding: 16px 16px 10px !important; }

/* ---------- Channel-messages sidebar (AI agent > messages, shared chatbot-history layout) ----------
   the "all channels" select ran edge to edge of the sidebar with clipped rounded corners */
body.scriptif .lqd-ext-chatbot-history-sidebar .lqd-input-container:where(.mbh-42):not(mbh) { margin: 10px 16px 6px; }
body.scriptif .lqd-ext-chatbot-history-sidebar .lqd-input-container > select { border-radius: 12px; padding-inline: 14px; }

/* ---------- Feature banners on phones (call agents list / history / new) ----------
   vendor px-20 (80px each side) left the copy a 200px column and stacked the two buttons out of line */
@media (max-width: 767px) {
	body.scriptif .lqd-page-content-container [class*="rounded-"][class*="px-20"]:is([class*="bg-[linear-gradient"], [class*="bg-gradient-to-"][class*="from-gradient-from"]) { padding: 28px 22px !important; }
}

/* ---------- Switches on touch widths ----------
   the 44px touch-target rule (.lqd-input min-height) also hit checkbox switches, stretching them into tall pills */
@media (max-width: 1023px) {
	body.scriptif input.lqd-input:is([type="checkbox"], [type="radio"]) { min-height: 0; }
}

/* ---------- Mixed-direction field values (RTL) ----------
   Latin values typed in Arabic fields lost their punctuation order ("?Hello, how can I help you today");
   each value takes its own direction, still aligned to the right edge like the labels */
html[dir="rtl"] body.scriptif :is(input.lqd-input:not([type="checkbox"], [type="radio"]), textarea.lqd-input):not([class*="text-center"]) { unicode-bidi: plaintext; text-align: right; }
/* URL fields are always left-to-right (placeholder "youtube.com/watch?v=..." rendered as "...=youtube.com/watch?v") */
html[dir="rtl"] body.scriptif input:is([type="url"], [placeholder*="://"], [placeholder*=".com"]) { direction: ltr; text-align: right; }
/* caption style previews: Latin samples keep their own order ("POP!" not "!POP") */
html[dir="rtl"] body.scriptif [class*="group/template"] span.rounded-full { unicode-bidi: plaintext; }

/* ---------- Custom select triggers (.rounded-input: dubbing language, call-agent voice, avatar picker) ----------
   they kept the vendor pill radius / white fill next to 12px sand fields */
body.scriptif :is(button, div).rounded-input.border { border-radius: 12px !important; border-color: var(--mb-line) !important; background-color: hsl(var(--input-background)); }
/* a button inside a field (avatar background colour "clear") filled the field's full 44px height and sat on its borders */
body.scriptif div.lqd-input > .lqd-btn { min-height: 0 !important; height: 30px; padding-block: 0 !important; }

/* ---------- Option pills in narrow side forms (AI Video Pro, video dubbing) ----------
   a 3-column grid in a 400px panel truncated the values ("...0x1280", "العنو..."): pills take their own width and wrap */
body.scriptif .grid.mbh-50 { display: flex !important; flex-wrap: wrap; }

/* ---------- Video studio tool cards ----------
   the vendor artwork (/upload/images/studio/*.webp) returns 404: the broken image becomes a flat brand tile with the tool name */
body.scriptif .lqd-page-content-container [class*="aspect-[1/0.62]"] > img { position: relative; color: transparent; }
body.scriptif .lqd-page-content-container [class*="aspect-[1/0.62]"] > img::before { content: ""; position: absolute; inset: 0; background: #ECE6DA; }
body.scriptif .lqd-page-content-container [class*="aspect-[1/0.62]"] > img::after {
	content: attr(alt);
	position: absolute; inset: 0;
	display: grid; place-items: center;
	padding: 12px;
	font: 800 22px/1.2 var(--mb-font-display);
	color: var(--mb-green);
	text-align: center;
}
body.scriptif.theme-dark .lqd-page-content-container [class*="aspect-[1/0.62]"] > img::before { background: #12322E; }
body.scriptif.theme-dark .lqd-page-content-container [class*="aspect-[1/0.62]"] > img::after { color: #EBE5D8; }

/* ---------- Video agent sub-nav (create / speech / tools / batches / hyperframes) ----------
   the vendor never sets .active on the current page's pill: mark it from the page class */
body.scriptif.page-user-video-agent-create a.rounded-button[href$="/video-agent/create"],
body.scriptif.page-user-video-agent-speech a.rounded-button[href$="/video-agent/speech"],
body.scriptif.page-user-video-agent-tools a.rounded-button[href$="/video-agent/tools"],
body.scriptif.page-user-video-agent-batches a.rounded-button[href$="/video-agent/batches"],
body.scriptif.page-user-video-agent-hyperframes a.rounded-button[href$="/video-agent/hyperframes"] { background: rgba(22, 58, 54, .08) !important; color: var(--mb-ink) !important; font-weight: 600; }
body.scriptif.theme-dark.page-user-video-agent-create a.rounded-button[href$="/video-agent/create"],
body.scriptif.theme-dark.page-user-video-agent-speech a.rounded-button[href$="/video-agent/speech"],
body.scriptif.theme-dark.page-user-video-agent-tools a.rounded-button[href$="/video-agent/tools"],
body.scriptif.theme-dark.page-user-video-agent-batches a.rounded-button[href$="/video-agent/batches"],
body.scriptif.theme-dark.page-user-video-agent-hyperframes a.rounded-button[href$="/video-agent/hyperframes"] { background: rgba(235, 229, 216, .08) !important; }

/* ---------- Info alerts (lqd-alert-info: bg-blue-700/10 + text-blue-800) ----------
   the blanket bg-blue-* -> var(--mb-mid) swap (scriptif.css ~l.887) drops the /10 alpha, so the alert became a solid
   dark-green bar with dark-green text in light mode (1.5:1, video agent "fetching catalogue"); a soft green tint */
body.scriptif .lqd-alert.lqd-alert-info { background-color: #D5E6DF !important; color: var(--mb-green) !important; }
body.scriptif .lqd-alert.lqd-alert-info * { color: inherit !important; }
body.scriptif.theme-dark .lqd-alert.lqd-alert-info { background-color: rgba(166, 199, 50, .10) !important; color: #C6DE6B !important; }

/* ---------- Muted text contrast ----------
   empty-state descriptions use text-foreground/60 (4.3:1) */
body.scriptif .lqd-empty-state p { color: var(--mb-muted) !important; opacity: 1 !important; }
/* agent hero greeting ("مرحباً، …" above the headline: AI agent, video agent, auto-edit) is opacity-35: 1.96:1 on light */
body.scriptif .lqd-page-content-container :is(h1, h2) > span.block.opacity-35 { opacity: 1 !important; color: var(--mb-muted) !important; }
/* video / agent / call / sales / payment pages mute secondary text with opacity-50/60 or /50-/60 alpha (2.4–4.3:1):
   studio card blurbs, call-wizard notes, upload limits, channel-messages empty text, "edit:" labels */
body.scriptif:is([class*="page-user-video"], [class*="page-user-ai-video"], [class*="page-user-ai-captions"], [class*="page-user-auto-edit"], [class*="page-user-ai-avatar"], [class*="page-user-ai-agent"], [class*="page-user-sales"], [class*="phone-call-agent"], [class*="page-user-payment"]) .lqd-page-content-container :is(p, span, small, label, h6, td):is(.opacity-50, .opacity-60, [class*="text-foreground/50"], [class*="text-foreground/60"], [class*="text-heading-foreground/50"]) { opacity: 1 !important; color: var(--mb-muted) !important; }

/* channel-messages empty state (AI agent > messages): the whole block is text-foreground/40 (2.4:1) */
body.scriptif .lqd-ext-chatbot-history [class*="text-foreground/40"] { color: var(--mb-muted) !important; }

/* ---------- Plan cards (payment) ----------
   the feature-info trigger carries -mt-6, so the (i) floated half a line above its row; its 20% icon nearly vanished */
body.scriptif .lqd-price-table li > .group.inline-block { vertical-align: middle; }
body.scriptif .lqd-price-table li > .group.inline-block > span.peer[class*="-mt-6"] { margin-top: 0 !important; vertical-align: middle; }
body.scriptif .lqd-price-table li > .group.inline-block > span.peer svg.opacity-20 { opacity: .55 !important; }

/* ---------- Composer cards (workflow copilot, shared composer at scriptif.css ~l.898) ----------
   the textarea kept its resize grip, drawn in the card's bottom corner next to the send button */
.lqd-page div.mbh-4:not(mbh):not(mbh) > .lqd-input-container > textarea.lqd-input { resize: none; }

/* ==========================================================================
   Design pass 2026-10-30 · Admin pages: layout & finish
   ========================================================================== */
/* ==== sweep-admin patch (admin / blog / pages / email templates / newsletter / support) ==== */

/* Air Datepicker → Scriptif tokens (export invoices, finance filters…), both modes */
body.scriptif .air-datepicker {
	--adp-font-family: inherit;
	--adp-font-size: 13px;
	--adp-width: 252px;
	--adp-padding: 6px;
	--adp-border-radius: 14px;
	--adp-border-color: var(--mb-line);
	--adp-border-color-inner: var(--mb-line-soft, var(--mb-line));
	--adp-border-color-inline: var(--mb-line);
	--adp-background-color: var(--mb-card);
	--adp-background-color-hover: var(--mb-bone);
	--adp-background-color-active: var(--mb-sand);
	--adp-color: var(--mb-text);
	--adp-color-secondary: var(--mb-muted);
	--adp-color-other-month: var(--mb-muted);
	--adp-color-other-month-hover: var(--mb-text);
	--adp-color-disabled: var(--mb-muted);
	--adp-color-disabled-in-range: var(--mb-muted);
	--adp-color-current-date: var(--mb-green);
	--adp-accent-color: var(--mb-green);
	--adp-day-name-color: var(--mb-muted);
	--adp-day-name-color-hover: var(--mb-text);
	--adp-nav-arrow-color: var(--mb-muted);
	--adp-nav-color-secondary: var(--mb-muted);
	--adp-cell-background-color-hover: var(--mb-bone);
	--adp-cell-background-color-selected: var(--mb-green);
	--adp-cell-background-color-selected-hover: var(--mb-mid);
	--adp-cell-background-color-in-range: #E6EEC4;
	--adp-cell-background-color-in-range-hover: #D5E6DF;
	--adp-cell-border-color-in-range: var(--mb-green);
	--adp-cell-border-radius: 10px;
	--adp-btn-color: var(--mb-green);
	--adp-btn-color-hover: var(--mb-deep);
	--adp-btn-border-radius: 10px;
	--adp-btn-background-color-hover: var(--mb-bone);
	--adp-btn-background-color-active: var(--mb-sand);
	--adp-time-track-color: var(--mb-line);
	--adp-time-thumb-color: var(--mb-green);
	--adp-pointer-size: 8px;
	--adp-poiner-border-radius: 2px;
	color: var(--mb-text);
}
body.scriptif.theme-dark .air-datepicker {
	--adp-background-color-hover: rgba(255, 255, 255, .06);
	--adp-background-color-active: rgba(255, 255, 255, .1);
	--adp-cell-background-color-hover: rgba(255, 255, 255, .06);
	--adp-btn-background-color-hover: rgba(255, 255, 255, .06);
	--adp-btn-background-color-active: rgba(255, 255, 255, .1);
	--adp-color-current-date: var(--mb-lime);
	--adp-accent-color: var(--mb-lime);
	--adp-cell-background-color-selected: var(--mb-lime);
	--adp-cell-background-color-selected-hover: #B8D64A;
	--adp-cell-background-color-in-range: rgba(166, 199, 50, .16);
	--adp-cell-background-color-in-range-hover: rgba(166, 199, 50, .24);
	--adp-cell-border-color-in-range: var(--mb-lime);
	--adp-btn-color: var(--mb-lime);
	--adp-btn-color-hover: var(--mb-lime);
}
body.scriptif.theme-dark .air-datepicker-cell.-selected-,
body.scriptif.theme-dark .air-datepicker-cell.-selected-.-current- { color: var(--mb-deep); }
body.scriptif .air-datepicker-cell.-current- { font-weight: 700; }
body.scriptif .air-datepicker-nav--title { font-weight: 600; color: var(--mb-ink, var(--mb-text)); }
body.scriptif .air-datepicker-nav--title i { color: var(--mb-muted); }
/* RTL: prev sits on the right → its chevron must point right (and next left) */
html[dir="rtl"] body.scriptif .air-datepicker-nav--action svg { transform: scaleX(-1); }
/* RTL: range ends were rounded on the LTR sides */
html[dir="rtl"] body.scriptif .air-datepicker-cell.-range-from- { border-radius: 0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0; }
html[dir="rtl"] body.scriptif .air-datepicker-cell.-range-to- { border-radius: var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius); }
html[dir="rtl"] body.scriptif .air-datepicker-cell.-range-from-.-range-to- { border-radius: var(--adp-cell-border-radius); }
body.scriptif .air-datepicker-nav--title i { margin-inline-start: 4px; }

/* Users admin › «تصدير الفواتير» dropdown: inline range calendar + export button (was a 176px box with an empty band) */
body.scriptif .lqd-dropdown-dropdown-content:where(.mbh-51):not(#mbh) {
	width: auto !important;
	min-width: 0;
	padding: 10px;
}
body.scriptif .lqd-dropdown-dropdown-content:where(.mbh-51):not(#mbh) > .air-datepicker.-inline- {
	border: 0;
	background: transparent;
	margin: 0 auto;
}
body.scriptif .lqd-dropdown-dropdown-content:where(.mbh-51):not(#mbh) > .mt-3 {
	margin: 8px 2px 0 !important;
	padding-top: 10px !important;
	border-top: 1px solid var(--mb-line) !important;
	justify-content: stretch;
}
body.scriptif .lqd-dropdown-dropdown-content:where(.mbh-51):not(#mbh) > .mt-3 > .lqd-btn { width: 100%; }
/* safety net: if the calendar ever fails to mount, never show an empty band above the divider */
body.scriptif .lqd-dropdown-dropdown-content.mbh-52.mbh-52.mbh-52.mbh-52:not(mbh) > .mt-3.border-t {
	margin-top: 0 !important;
	padding-top: 0 !important;
	border-top: 0 !important;
}

/* Settings › General, AI chat models (any settings form built from numbered .lqd-form-step sections): the size-none card body
   was excluded from the padding rule because a nested Pusher card lives inside the form → labels/inputs touched the card edge */
body.scriptif .lqd-page-settings .lqd-card > .lqd-card-body.lqd-card-size-none.mbh-53:not(mbh):not(mbh) { padding: 28px clamp(16px, 3vw, 36px); }

/* Highcharts (users dashboard map + registrations, finance charts): v12 ships `color-scheme: light dark` on its container, so its
   light-dark() palette follows the OS, not the site theme (black menu button / grey-on-grey labels on a light page).
   Pin the scheme to the theme and map its neutrals onto the brand tokens; text uses the page font */
body.scriptif .highcharts-container {
	color-scheme: light;
	font-family: inherit !important;
	--highcharts-background-color: var(--mb-card);
	--highcharts-neutral-color-100: var(--mb-ink, var(--mb-text));
	--highcharts-neutral-color-80: var(--mb-text);
	--highcharts-neutral-color-60: var(--mb-muted);
	--highcharts-neutral-color-40: var(--mb-muted);
	--highcharts-neutral-color-20: var(--mb-line-strong, var(--mb-line));
	--highcharts-neutral-color-10: var(--mb-line);
	--highcharts-neutral-color-5: var(--mb-line-soft, var(--mb-line));
	--highcharts-neutral-color-3: var(--mb-bone);
	--highcharts-highlight-color-100: var(--mb-green);
	--highcharts-highlight-color-10: #E6EEC4;
}
body.scriptif.theme-dark .highcharts-container { color-scheme: dark; --highcharts-neutral-color-3: rgba(255, 255, 255, .04); --highcharts-highlight-color-100: var(--mb-lime); --highcharts-highlight-color-10: rgba(166, 199, 50, .16); }
body.scriptif .highcharts-container :is(text, .highcharts-title, .highcharts-axis-labels) { font-family: inherit !important; }
body.scriptif .highcharts-contextbutton .highcharts-button-box { rx: 10px; ry: 10px; }

/* Admin data tables (.lqd-table): status badges are display:block → they stretched into long pills when the column widened */
body.scriptif table td > .lqd-badge { width: fit-content; }
/* Phone: the table already scrolls inside .lqd-table-wrap, but auto layout squeezed every column to fit 390px, so text cells
   broke one word per line (rows 140–200px tall). Give cells a readable minimum and let the wrapper scroll instead */
@media (max-width: 767px) {
	body.scriptif .lqd-table-wrap > table.lqd-table th { white-space: nowrap; }
	body.scriptif .lqd-table-wrap > table.lqd-table td { min-width: 7rem; }
	body.scriptif .lqd-table-wrap > table.lqd-table td:not(:where(.mbh-54)) { min-width: 11rem; }
	body.scriptif .lqd-table-wrap > table.lqd-table td:is(:last-child, .whitespace-nowrap) { min-width: 0; }
}

/* Plan editor wizard (finance/plan/{id}/edit, token-pack-plan/create): the active step chip is filled with primary but keeps
   text-primary → its number vanished (1.0:1 in light, 1.2:1 in dark) */
body.scriptif .lqd-step.active > span.inline-grid { color: var(--mb-bone) !important; }
body.scriptif.theme-dark .lqd-step.active > span.inline-grid { color: var(--mb-deep) !important; }
/* Users › finance / edit section headers: the numbered dot is lime (remapped from vendor violet) but kept text-white (1.9:1) */
body.scriptif span.text-white[class*="bg-[#9D6BDD]"] { color: var(--mb-deep) !important; }

/* Credits editor (users/add, users/edit, plan editor): the «غير محدود» switch is absolutely pinned to the label row while the
   label is w-2/3 → on phones long model names wrapped one word per line and collided with the switch. Stack it under the label */
@media (max-width: 767px) {
	body.scriptif .lqd-input-container.relative > .absolute.end-0.mbh-55:not(mbh) { position: static; margin: 0 !important; }
	body.scriptif .lqd-input-container.relative.mbh-56.mbh-56.mbh-56:not(mbh) > label.form-label { width: 100%; }
}

/* Chatbot › training › «الموقع الإلكتروني / رابط واحد» switcher: the inactive option sat at opacity .25 (1.7:1) */
body.scriptif.is-admin-page label.cursor-pointer > span.inline-block.opacity-25 { opacity: .6; }

/* Payment gateways grid: the نشط / غير نشط pill sat at 8px inside a p-4 card, i.e. straddling the logo well's border */
body.scriptif.page-admin-finance-paymentGateways .lqd-card-body.lqd-card-sm.p-4 > .absolute.start-2.top-2.rounded-full { top: 24px; inset-inline-start: 24px; }

/* Translations editor: the language code next to the title was opacity .2 (1.4:1) */
body.scriptif.is-admin-page :is(h2, h4) > span.opacity-20 { opacity: .6; }

/* API settings pages (settings/openai, anthropic, gemini, …): form = h3 + section cards, so the size-none body was excluded
   from the padding rule too → the «إعدادات X» heading sat on the card border */
body.scriptif .lqd-page-settings .lqd-card > .lqd-card-body.lqd-card-size-none.mbh-57:not(mbh):not(mbh) { padding: 28px clamp(16px, 3vw, 36px); }

/* select2 multi (API-key chips): select2 measures its width from the content, so one long key made the field 570px wide on a
   390px phone (clipped by the card, chip cut at the edge on desktop). Cap it and ellipsize the chip */
body.scriptif .select2-container { max-width: 100%; }
body.scriptif .select2-selection--multiple .select2-selection__rendered { min-width: 0; max-width: 100%; }
body.scriptif .select2-selection--multiple .select2-selection__choice { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; }
body.scriptif .select2-selection--multiple .select2-selection__choice__display { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Admin meta text that relied on 50% opacity / Tailwind grey and fell to 2.5–3.3:1 in light mode
   (users › creation time, all-models hints, overview «مقارنة بالأسبوع الماضي» and the share list) → the muted token */
body.scriptif.is-admin-page td.sort-date > p.opacity-50,
body.scriptif.is-admin-page td > span.text-gray-400 { opacity: 1; color: var(--mb-muted) !important; }
body.scriptif.page-admin .lqd-statistic-info > p.mb-0,
body.scriptif.page-admin li.justify-between > span.text-center { color: var(--mb-muted) !important; }
body.scriptif .select2-selection__choice__remove > span { color: var(--mb-muted); }

/* Settings hub (admin/config): tiles are <a> grid items that stretch, but the visible card inside did not → uneven heights per row */
body.scriptif.is-admin-page .grid > a > .flex.rounded-xl.p-5:only-child { height: 100%; }

/* Empty admin tables (blog, AI assistants, support requests, mega menus, bank transfers…) rendered only a header row and a
   blank gap. Give every .lqd-table without body rows a quiet empty line (tables that ship their own «no data» <tr> are untouched) */
body.scriptif .lqd-table-wrap.mbh-45:not(mbh):not(mbh):not(:where(.mbh-44):not(mbh):not(mbh))::after {
	content: "Nothing here yet";
	display: block;
	padding: 28px 16px 30px;
	border-top: 1px solid var(--mb-line-soft);
	text-align: center;
	font-size: 13px;
	color: var(--mb-muted);
}
html[dir="rtl"] body.scriptif .lqd-table-wrap.mbh-45:not(mbh):not(mbh):not(:where(.mbh-44):not(mbh):not(mbh))::after { content: "لا توجد عناصر بعد"; }

/* TinyMCE (pages / blog editors): hide the vendor «Upgrade» promo pill (off-brand blue, not actionable) */
body.scriptif .tox .tox-promotion { display: none !important; }

/* writer v2 (/dashboard/user/generator): while the template picker is open the vendor fades the top-bar tools to 10 %
   and lays its 90 % backdrop over the editor toolbar, so every label read as missing. Keep them visibly disabled but
   legible, and lift the toolbar above the backdrop (still not clickable until a template is picked). */
body.scriptif .lqd-generator-v2:not(.lqd-generator-sidebar-collapsed) :is(.lqd-generator-actions-top-bar-col-middle, .lqd-generator-actions-top-bar-col-end) { opacity: .55 !important; }
body.scriptif .lqd-generator-v2:not(.lqd-generator-sidebar-collapsed) .tox-editor-header { position: relative; z-index: 31; opacity: .55; pointer-events: none; }
/* template names: the vendor's dark:text-black left them black on the dark sidebar */
body.scriptif.theme-dark .lqd-generator-item h4 { color: var(--mb-ink) !important; }

/* ==========================================================================
   Verify pass — fixes for defects still visible after the design pass.
   Append to scriptif.css. Every rule is scoped to body.scriptif and uses tokens.
   ========================================================================== */

/* ---------- Generator template list: icon disc in dark ----------
   (titles already fixed live) the disc stayed pure white in dark, and glyphs the theme recoloured to ivory vanished on it («تصحيح لغوي») */
body.scriptif.theme-dark .lqd-generator-item .rounded-full.bg-white { background: rgba(235, 229, 216, .1) !important; color: var(--mb-ink); }
body.scriptif.theme-dark .lqd-generator-item .rounded-full.bg-white svg :is([fill]:not([fill="none"]), path:not([fill]):not([stroke])) { fill: currentColor !important; }

/* ---------- Tables: empty-state row on phones ----------
   The table scrolls sideways, so a centred message in the full-width colspan cell starts off-screen. */
@media (max-width: 767px) {
	body.scriptif .lqd-table tbody td[colspan] { text-align: start !important; }
}

/* ---------- Muted helper text: readable contrast ----------
   foreground at 40–60 % gave 2.5–4.3:1 on cards; the muted token is ≥ 5:1 in both themes. */
body.scriptif :is(.text-foreground\/40, .text-foreground\/50, .text-foreground\/60):not(:is(button, a, .lqd-btn) *) { color: var(--mb-muted); }

/* ---------- AI chat composer: one icon-button family ----------
   attach / templates / brand voice drew a 1px ring at 42px next to a plain 44px mic. */
body.scriptif:not(#mbb):not(#vfy) .lqd-chat-form .lqd-chat-actions :is(.lqd-chat-attach, .lqd-chat-templates-trigger, .lqd-chat-brand-voice-trigger) {
	width: 44px !important; height: 44px !important;
	border-color: transparent !important;
	box-shadow: none !important;
}
body.scriptif .lqd-chat-form textarea { resize: none; }

/* ---------- FullCalendar toolbar: «اليوم» flush against the arrows ---------- */
body.scriptif .fc .fc-toolbar-chunk > .fc-today-button { margin-inline-end: 6px !important; }

/* ---------- Themes page: segmented filter wraps on phones ---------- */
@media (max-width: 480px) {
	body.scriptif ul.flex.w-full.justify-between > li > button.px-6.py-3.leading-tight {
		padding-inline: 12px !important;
		white-space: nowrap;
	}
}

/* ---------- Phone dock: long labels on two lines instead of «روبوتات الذكاء الا…» ---------- */
@media (max-width: 1023px) {
	body.scriptif .ms-dock-label {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		white-space: normal;
		text-align: center;
		font-size: 10px;
		line-height: 1.05;
	}
}

/* ---------- Back control on full-screen pages · social post primary action ---------- */
/* =====================================================================================================
   Back control on full-screen pages without the Scriptif top bar / phone dock  (pairs with backLinks() in medya-ui.js)
   Pages: social-media/post/create, marketing-bot/inbox, chatbot-agent, ai-agent/messages, social-media/automation/create
   Uses the --mbb-* button tokens of scriptif.css (ring, surface, ink, focus) so light / dark follow the theme.
   ===================================================================================================== */
.mb-back-row { display: none; align-items: center; }
/* the vendor hides the bar from 992px up; below it the bar and phone dock are on screen, so no extra control */
@media (min-width: 992px) { .mb-back-row { display: flex; } }
/* social-media/automation/create has no header at all (any width): float the control in the top-start corner */
.mb-back-row--float { display: flex; position: fixed; top: 16px; inset-inline-start: 20px; z-index: 40; }
@media (max-width: 991px) { .mb-back-row--float { top: 12px; inset-inline-start: 16px; } }
/* social post editor: sits above the platform pills, inside the header's own .container */
.lqd-social-media-post-create-header > .mb-back-row { padding-block: 12px 0; }
/* full-screen inbox: first row of the conversations column; a hairline separates it from the vendor header */
.mb-back-row--side { flex: none; padding: 10px 16px; border-bottom: 1px solid var(--mb-line); }
@media (min-width: 1280px) { .mb-back-row--side { padding-inline: 24px; } }

body.scriptif .mb-back {
	display: inline-flex; align-items: center; gap: 10px; min-height: 40px; max-width: 100%;
	color: var(--mbb-ink, var(--mb-ink)); text-decoration: none !important;
	font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
body.scriptif .mb-back-ic {
	flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
	background: var(--mbb-surface, var(--mb-card)); color: inherit;
	box-shadow: inset 0 0 0 1px var(--mbb-ring, var(--mb-line-strong));
	transition: background-color .15s ease, box-shadow .15s ease;
}
body.scriptif .mb-back-ic svg { width: 20px; height: 20px; display: block; }
/* the arrow is drawn pointing left (back in LTR); in RTL back is to the right */
[dir="rtl"] body.scriptif .mb-back-ic svg { transform: scaleX(-1); }
body.scriptif .mb-back-tx { overflow: hidden; text-overflow: ellipsis; }
body.scriptif .mb-back:is(:hover, :focus-visible) .mb-back-ic { background: var(--mbb-tint, rgba(22, 58, 54, .06)); box-shadow: inset 0 0 0 1px var(--mbb-ink, var(--mb-ink)); }
body.scriptif .mb-back:active .mb-back-ic { scale: .96; }
body.scriptif .mb-back:focus-visible { outline: 2px solid var(--mbb-focus, var(--mb-mid)); outline-offset: 3px; border-radius: 999px; }

/* the vendor's own "Back to Dashboard" icon shows only below 1024px; in the 992-1023px band it would sit next to ours */
@media (min-width: 992px) { body.scriptif.mb-has-back .lqd-ext-chatbot-history-sidebar > div > a.lqd-btn[aria-label="Back to Dashboard"] { display: none !important; } }

/* -- social post editor: «نشر الآن» / Post Now is the main action = filled primary; «جدولة» / Schedule stays the outlined secondary --
   Post Now is the only .lqd-btn-secondary.w-full of the form column; Schedule is .lqd-btn-outline inside its modal trigger. */
body.scriptif.page-user-social-media-post-create:not(#mbb) .lqd-social-media-post-create-content-wrap button.lqd-btn-secondary.w-full {
	background-color: var(--mbb-fill) !important; color: var(--mbb-on-fill) !important;
	border-color: transparent !important; box-shadow: none !important;
}
body.scriptif.page-user-social-media-post-create:not(#mbb) .lqd-social-media-post-create-content-wrap button.lqd-btn-secondary.w-full:not(:disabled):is(:hover, :focus-visible) {
	background-color: var(--mbb-fill-hover) !important; color: var(--mbb-on-fill) !important; box-shadow: none !important;
}

/* ---------- AI engine logo fallback chip ---------- */
/* MedyaAI | engine logo chip, fallback for broken /upload/enginelogo/*.svg (pairs with engineLogos() in patch.js) */
.mb-logo-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 50%;
	background: var(--mb-bone);
	color: var(--mb-ink);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	vertical-align: middle;
	user-select: none;
}

body.theme-dark .mb-logo-chip {
	background: rgba(235, 229, 216, .08);
}

/* AI engine logos drawn in one dark ink (OpenAI, Grok, OpenRouter): flip to ivory on dark surfaces */
body.scriptif.theme-dark img:is([src*="/upload/enginelogo/openai.svg"], [src*="/upload/enginelogo/Grok_logo.svg"], [src*="/upload/enginelogo/openrouter.svg"]) { filter: invert(.92); }
/* small count / status chips inside table cells («25 نموذجاً») never break onto two lines */
body.scriptif td > span.rounded.text-xs:is([class*="bg-blue-1"], [class*="bg-green-1"], [class*="bg-gray-1"], [class*="bg-yellow-1"], [class*="bg-red-1"]) { white-space: nowrap; display: inline-block; }
/* admin › AI engines: the narrow 5/12 column clipped the file pickers («لم يـ…») and squeezed the table — give the
   logo table room, and let each picker show its full "no file chosen" label */
@media (min-width: 1024px) {
	body.scriptif .lg\:w-5\/12.mbh-58:not(mbh):not(mbh) { width: min(860px, 100%); }
}
body.scriptif td input[type="file"].lqd-input { width: auto; min-width: 0; padding-inline: 6px; font-size: 12px; color: var(--mb-muted); }
/* RTL tables: vendor headers hard-coded text-left sat on the opposite side of their cells (which follow the
   reading direction) — headers start where their values start */
[dir="rtl"] body.scriptif table:not(.mbh-59:not(mbh)) th.text-left { text-align: start; }
/* table rows with the vendor hover:bg-gray-50/100: on hover they turned near-white, so dark-mode text vanished —
   hover is a quiet tint of the current surface in both themes */
body.scriptif tr:is([class*="hover:bg-gray-50"], [class*="hover:bg-gray-100"], [class*="hover:bg-slate-50"]):hover { background-color: var(--mb-line-soft) !important; }
body.scriptif.theme-dark tr:is([class*="hover:bg-gray-50"], [class*="hover:bg-gray-100"], [class*="hover:bg-slate-50"]):hover { background-color: rgba(235, 229, 216, .04) !important; }

/* Turkish UI: the empty-table lines written in CSS (Arabic default / English override above) */
html[lang="tr"] body.scriptif .lqd-table-outline.mbh-40:not(mbh):not(:where(.mbh-39):not(mbh):not(mbh))::after,
html[lang="tr"] body.scriptif .lqd-table-wrap.mbh-45:not(mbh):not(mbh):not(:where(.mbh-44):not(mbh):not(mbh))::after { content: "Henüz öğe yok"; }

/* ========== auth shell: sign in / sign up / password reset / OTP / 2FA (panel/authentication/layout) ========== */
body.scriptif.mbh-60 { background: var(--mb-page); }
body.scriptif.mbh-60 .lqd-page-content-container { padding: 0 !important; max-width: none; }
body.scriptif.mbh-60 .lqd-page-wrapper, body.scriptif.mbh-60 .lqd-page-content-wrap { padding: 0 !important; margin: 0 !important; }
.mb-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); min-height: 100vh; min-height: 100dvh; background: var(--mb-page); color: var(--mb-text); font-family: var(--mb-font-ui); }
.mb-auth__main { display: flex; flex-direction: column; min-width: 0; padding: 26px clamp(20px, 4.2vw, 60px) 22px; }
.mb-auth__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.mb-auth__logo { display: inline-flex; flex: none; }
/* the uploaded light logo is a square canvas around a wide wordmark: crop it the way the top bar does */
.mb-auth__logo-light { width: 164px; height: 44px; object-fit: cover; object-position: center; }
.mb-auth__logo-dark { height: 52px; width: auto; margin-block: -6px; }
.mb-auth__logo-dark, body.theme-dark .mb-auth__logo-light { display: none; }
body.theme-dark .mb-auth__logo-dark { display: block; }
.mb-auth__tools { display: flex; align-items: center; gap: 12px; }
.mb-auth__lang { display: inline-flex; gap: 2px; height: 36px; padding: 3px; border: 1px solid var(--mb-line-strong); border-radius: 999px; background: var(--mb-card); }
.mb-auth__lang > * { display: grid; place-items: center; min-width: 30px; padding: 0 8px; border-radius: 999px; font: 700 12px/1 "Bricolage Grotesque", system-ui, sans-serif; letter-spacing: .05em; color: var(--mb-ink); text-decoration: none; transition: background-color .2s var(--mb-ease), color .2s var(--mb-ease); }
.mb-auth__lang > .is-ar { font: 800 16px/1 "Zain", sans-serif; letter-spacing: 0; }
.mb-auth__lang > .is-cur { background: var(--mb-deep); color: var(--mb-lime); }
body.theme-dark .mb-auth__lang > .is-cur { background: var(--mb-lime); color: var(--mb-deep); }
.mb-auth__lang > a:hover, .mb-auth__lang > a:focus-visible { background: rgba(166, 199, 50, .28); }
.mb-auth__back { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--mb-muted); text-decoration: none; white-space: nowrap; transition: color .2s var(--mb-ease); }
.mb-auth__back:hover { color: var(--mb-ink); }
.mb-auth__back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .mb-auth__back svg { transform: scaleX(-1); }
.mb-auth__body { flex: 1; display: grid; place-items: center; padding-block: clamp(28px, 6vh, 64px); }
.mb-auth__card { width: min(440px, 100%); text-align: start; font-size: 14.5px; }
.mb-auth__card .container-tight { max-width: none; padding: 0; }
/* heading: display face with the dashboard's lime underline */
.mb-auth__card h1 { position: relative; margin: 0 0 34px !important; padding-bottom: 14px; font-family: var(--mb-font-display); font-size: clamp(2rem, 1.6rem + 1.2vw, 2.55rem); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; color: var(--mb-ink); }
[dir="rtl"] .mb-auth__card h1 { line-height: 1.3; letter-spacing: 0; }
.mb-auth__card h1::after { content: ""; position: absolute; inset-inline-start: -2px; bottom: -2px; width: 72px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9C22 5 46 4 70 5s36 1 47-1' stroke='%23A6C732' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M10 12c26-2 58-3 96-4' stroke='%2393B22A' stroke-width='2' fill='none' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
[dir="rtl"] .mb-auth__card h1::after { transform: scaleX(-1); }
.mb-auth__card form { gap: 18px !important; }
.mb-auth__card .lqd-input-label { margin-bottom: 8px !important; font-size: 13.5px; font-weight: 600; color: var(--mb-ink); }
.mb-auth__card .lqd-input:not([type="checkbox"]):not([type="radio"]) { height: 50px !important; padding-inline: 16px !important; border: 1px solid var(--mb-line-strong) !important; border-radius: 14px !important; background: var(--mb-input) !important; color: var(--mb-ink) !important; font-size: 15px !important; box-shadow: none !important; transition: border-color .2s var(--mb-ease), box-shadow .2s var(--mb-ease), background-color .2s var(--mb-ease); }
.mb-auth__card .lqd-input::placeholder { color: var(--mb-muted); opacity: .75; }
.mb-auth__card .lqd-input:not([type="checkbox"]):hover { border-color: rgba(22, 58, 54, .38) !important; }
.mb-auth__card .lqd-input:not([type="checkbox"]):focus { border-color: var(--mb-green) !important; background: var(--mb-card) !important; box-shadow: 0 0 0 4px rgba(166, 199, 50, .28) !important; outline: 0 !important; }
body.theme-dark .mb-auth__card .lqd-input:not([type="checkbox"]):hover { border-color: rgba(235, 229, 216, .3) !important; }
body.theme-dark .mb-auth__card .lqd-input:not([type="checkbox"]):focus { border-color: var(--mb-lime) !important; background: var(--mb-input) !important; box-shadow: 0 0 0 4px rgba(166, 199, 50, .2) !important; }
.mb-auth__card .lqd-input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--mb-line-strong) !important; border-radius: 6px !important; background: var(--mb-card) center / 13px no-repeat; cursor: pointer; transition: background-color .15s var(--mb-ease), border-color .15s var(--mb-ease); }
.mb-auth__card .lqd-input[type="checkbox"]:checked { border-color: var(--mb-deep); background-color: var(--mb-deep); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6C732' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
body.theme-dark .mb-auth__card .lqd-input[type="checkbox"]:checked { border-color: var(--mb-lime); background-color: var(--mb-lime); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2B27' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.mb-auth__card .lqd-input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 4px rgba(166, 199, 50, .3); outline: 0; }
.mb-auth__mtag { display: none; }
.mb-auth__card .lqd-input-container .relative > button, .mb-auth__card .lqd-input-container [x-on\:click], .mb-auth__card .lqd-input-container [\@click] { color: var(--mb-muted); }
/* primary action: the brand pill, deep green / ivory (ivory / deep in dark mode) */
/* the submit pill hugs its label instead of spanning the form */
.mb-auth__card .lqd-btn-primary, .mb-auth__card button[type="submit"].lqd-btn { align-self: flex-start; width: auto; min-width: 168px; height: 50px; margin-top: 6px; padding-inline: 26px !important; border-radius: 999px !important; background: var(--mb-deep) !important; color: var(--mb-ivory) !important; font-size: 15.5px !important; font-weight: 700 !important; letter-spacing: -.005em; box-shadow: 0 10px 24px -14px rgba(15, 43, 39, .55) !important; transition: transform .2s var(--mb-ease), background-color .2s var(--mb-ease), box-shadow .2s var(--mb-ease) !important; }
.mb-auth__card .lqd-btn-primary:hover, .mb-auth__card button[type="submit"].lqd-btn:hover { background: var(--mb-mid) !important; transform: translateY(-1px); }
.mb-auth__card .lqd-btn-primary:active, .mb-auth__card button[type="submit"].lqd-btn:active { transform: translateY(0) scale(.99); }
body.theme-dark .mb-auth__card .lqd-btn-primary, body.theme-dark .mb-auth__card button[type="submit"].lqd-btn { background: var(--mb-ivory) !important; color: var(--mb-deep) !important; box-shadow: none !important; }
body.theme-dark .mb-auth__card .lqd-btn-primary:hover, body.theme-dark .mb-auth__card button[type="submit"].lqd-btn:hover { background: #fff !important; }
/* social sign-in */
.mb-auth__card .lqd-btn-outline { justify-content: center !important; height: 50px; border-radius: 999px !important; outline: 0 !important; border: 1px solid var(--mb-line-strong) !important; background: var(--mb-card) !important; color: var(--mb-ink) !important; font-size: 14.5px !important; font-weight: 600 !important; box-shadow: none !important; }
.mb-auth__card .lqd-btn-outline:hover { border-color: var(--mb-green) !important; transform: translateY(-1px); }
.mb-auth__card .my-6 { margin-block: 22px !important; gap: 14px !important; color: var(--mb-muted) !important; font-size: 13px; }
.mb-auth__card .my-6 > span { background: var(--mb-line-strong) !important; }
/* links and small print */
.mb-auth__card a.text-indigo-600, .mb-auth__card .lqd-auth-form-foot-text a { color: var(--mb-green) !important; font-weight: 700; text-decoration: underline; text-decoration-color: var(--mb-lime); text-decoration-thickness: 2px; text-underline-offset: 4px; }
body.theme-dark .mb-auth__card a.text-indigo-600, body.theme-dark .mb-auth__card .lqd-auth-form-foot-text a { color: var(--mb-lime) !important; }
.mb-auth__card .lqd-auth-form-foot-text { margin-top: 30px !important; text-align: center; font-size: 14px; color: var(--mb-muted); }
.mb-auth__card .text-foreground\/70 { font-size: 12.5px; line-height: 1.7; color: var(--mb-muted) !important; text-align: center; }
.mb-auth__card .g-recaptcha { display: flex; justify-content: center; }
.mb-auth__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 12.5px; color: var(--mb-muted); }
.mb-auth__foot a { color: inherit; text-decoration: none; }
.mb-auth__foot a:hover { color: var(--mb-ink); text-decoration: underline; }

/* the showcase: MedyaAI at work while you sign in */
.mb-auth__show { position: relative; display: flex; align-items: center; margin: 14px; margin-inline-start: 0; padding: clamp(40px, 5vw, 76px); overflow: hidden; border-radius: 30px; color: var(--mb-ivory); background-color: var(--mb-deep); background-image: linear-gradient(rgba(235, 229, 216, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(235, 229, 216, .045) 1px, transparent 1px); background-size: 36px 36px; }
body.theme-dark .mb-auth__show { border: 1px solid var(--mb-line); }
.mb-auth__show::before { content: ""; position: absolute; width: 420px; height: 420px; inset-inline-end: -150px; bottom: -170px; border: 2px solid rgba(166, 199, 50, .28); border-radius: 50%; box-shadow: 0 0 0 46px rgba(166, 199, 50, .05), 0 0 0 92px rgba(166, 199, 50, .03); }
.mb-auth__show-in { position: relative; width: 100%; max-width: 600px; container-type: inline-size; }
.mb-auth__eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border: 1px solid rgba(235, 229, 216, .22); border-radius: 999px; font-size: 13px; font-weight: 600; color: rgba(235, 229, 216, .88); }
[dir="rtl"] .mb-auth__eyebrow { padding: 5px 5px 5px 14px; }
.mb-auth__eyebrow b { padding: 4px 9px; border-radius: 999px; background: var(--mb-lime); color: var(--mb-deep); font: 800 12px/1 "Bricolage Grotesque", sans-serif; }
.mb-auth__headline { margin: 20px 0 0; font-family: var(--mb-font-display); font-size: clamp(1.9rem, 1.05rem + 1.9vw, 2.9rem); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; color: var(--mb-ivory); }
/* Arabic: always two lines, sized to the panel (the first line is ~13.4em wide in Zain) */
[dir="rtl"] .mb-auth__headline { font-size: min(7.3cqi, 3.1rem); line-height: 1.32; letter-spacing: 0; white-space: nowrap; }
.mb-auth__headline span { display: block; }
/* the landing page's hand-drawn marker stroke */
.mb-auth__headline mark { display: inline; padding: .04em .24em .26em; margin: 0 .02em; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M5 12C34 5 84 8 122 5c30-2 56 0 74 3 2 8-1 17 1 25-38 4-84 1-124 3-25 1-48-1-68-2 3-8-1-15 0-22z' fill='%23A6C732'/%3E%3C/svg%3E") center 46% / 100% 100% no-repeat; color: var(--mb-deep); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mb-auth__lead { margin: 18px 0 0; max-width: 44ch; font-size: 16px; line-height: 1.65; color: rgba(235, 229, 216, .72); }
.mb-auth__feed { display: grid; gap: 10px; max-width: 430px; margin-top: 30px; }
.mb-auth__live { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mb-lime); }
[dir="rtl"] .mb-auth__live { letter-spacing: 0; font-size: 13px; }
.mb-auth__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--mb-lime); animation: mbAuthPulse 2s var(--mb-ease) infinite; }
.mb-auth__item { display: grid; grid-template-columns: 42px minmax(0, 1fr) 26px; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid rgba(235, 229, 216, .12); border-radius: 18px; background: rgba(235, 229, 216, .06); animation: mbAuthIn .7s var(--mb-ease) both; animation-delay: calc(var(--i) * .5s + .25s); }
.mb-auth__item:nth-of-type(even) { margin-inline-start: 34px; }
.mb-auth__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--mb-lime); }
.mb-auth__ico--calendar { background: #E9B872; }
.mb-auth__ico--deal { background: #D5E6DF; }
.mb-auth__ico--megaphone { background: #E6EEC4; }
.mb-auth__ico svg { width: 21px; height: 21px; fill: none; stroke: var(--mb-deep); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mb-auth__txt { display: grid; gap: 2px; min-width: 0; }
.mb-auth__txt b { overflow: hidden; font-size: 15px; font-weight: 600; color: var(--mb-ivory); white-space: nowrap; text-overflow: ellipsis; }
.mb-auth__txt small { overflow: hidden; font-size: 12.5px; color: rgba(235, 229, 216, .58); white-space: nowrap; text-overflow: ellipsis; }
.mb-auth__tick { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--mb-lime); animation: mbAuthTick .45s var(--mb-ease) both; animation-delay: calc(var(--i) * .5s + .85s); }
.mb-auth__tick svg { width: 15px; height: 15px; fill: none; stroke: var(--mb-deep); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mb-auth__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.mb-auth__chips li { padding: 7px 14px; border: 1px solid rgba(235, 229, 216, .2); border-radius: 999px; font-size: 13px; font-weight: 600; color: rgba(235, 229, 216, .86); }
@keyframes mbAuthIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mbAuthTick { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes mbAuthPulse { 0% { box-shadow: 0 0 0 0 rgba(166, 199, 50, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(166, 199, 50, 0); } }
@media (prefers-reduced-motion: reduce) { .mb-auth__item, .mb-auth__tick, .mb-auth__live i { animation: none !important; } }
@media (max-width: 1023px) {
	.mb-auth { grid-template-columns: minmax(0, 1fr); }
	.mb-auth__show { display: none; }
	.mb-auth__mtag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 4px 12px 4px 4px; border: 1px solid var(--mb-line-strong); border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--mb-ink); }
	[dir="rtl"] .mb-auth__mtag { padding: 4px 4px 4px 12px; }
	.mb-auth__mtag b { padding: 4px 8px; border-radius: 999px; background: var(--mb-deep); color: var(--mb-lime); font: 800 11px/1 "Bricolage Grotesque", sans-serif; }
	body.theme-dark .mb-auth__mtag b { background: var(--mb-lime); color: var(--mb-deep); }
}
@media (max-height: 820px) and (min-width: 1024px) { .mb-auth__show { padding-block: 32px; } .mb-auth__lead { margin-top: 12px; } .mb-auth__feed { margin-top: 22px; gap: 8px; } .mb-auth__item { padding-block: 9px; } .mb-auth__chips { margin-top: 20px; } }
@media (max-width: 480px) {
	.mb-auth__main { padding: 18px 16px; }
	.mb-auth__logo-light { width: 140px; height: 38px; }
	.mb-auth__logo-dark { height: 44px; }
	.mb-auth__back span { display: none; }
	.mb-auth__body { place-items: start center; padding-block: 34px 28px; }
}

/* auth fields: an icon tile sits at the start of the field and lights up while you type */
.mb-auth__card .lqd-input-container { --mb-f-ico: none; }
.mb-auth__card .lqd-input-container.mbh-61:not(mbh) { --mb-f-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E"); }
.mb-auth__card .lqd-input-container.mbh-62:not(mbh), .mb-auth__card .lqd-input-container.mbh-63.mbh-63:not(mbh) { --mb-f-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V8a4 4 0 018 0v2.5'/%3E%3Ccircle cx='12' cy='15.5' r='1.3' fill='%23000'/%3E%3C/svg%3E"); }
.mb-auth__card .lqd-input-container.mbh-64:not(mbh), .mb-auth__card .lqd-input-container.mbh-65:not(mbh) { --mb-f-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.8'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0115 0'/%3E%3C/svg%3E"); }
.mb-auth__card .lqd-input-container.mbh-66:not(mbh), .mb-auth__card .lqd-input-container.mbh-67:not(mbh) { --mb-f-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12V5h7l9 9-7 7z'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.4' fill='%23000'/%3E%3C/svg%3E"); }
.mb-auth__card .lqd-input-container.mbh-68.mbh-68:not(mbh)::after { content: ""; position: absolute; z-index: 2; inset-inline-start: 8px; bottom: 8px; width: 38px; height: 38px; border-radius: 11px; background-color: rgba(166, 199, 50, .2); pointer-events: none; transition: background-color .25s var(--mb-ease), transform .25s var(--mb-ease); }
.mb-auth__card .lqd-input-container.mbh-68.mbh-68:not(mbh)::before { content: ""; position: absolute; z-index: 3; inset-inline-start: 17px; bottom: 17px; width: 20px; height: 20px; background-color: var(--mb-green); -webkit-mask: var(--mb-f-ico) center / contain no-repeat; mask: var(--mb-f-ico) center / contain no-repeat; pointer-events: none; transition: background-color .25s var(--mb-ease); }
.mb-auth__card .lqd-input-container.mbh-68.mbh-68:not(mbh) .lqd-input:not([type="checkbox"]) { height: 54px !important; padding-left: 58px !important; padding-right: 16px !important; border-width: 1.5px !important; border-radius: 16px !important; }
/* the tile follows the page direction, so the gap does too (an email field types left-to-right even on an Arabic page) */
[dir="rtl"] .mb-auth__card .lqd-input-container.mbh-68.mbh-68:not(mbh) .lqd-input:not([type="checkbox"]) { padding-right: 58px !important; padding-left: 16px !important; }
[dir="rtl"] .mb-auth__card .lqd-input-container.mbh-63.mbh-63:not(mbh) .lqd-input { padding-left: 48px !important; }
[dir="ltr"] .mb-auth__card .lqd-input-container.mbh-63.mbh-63:not(mbh) .lqd-input { padding-right: 48px !important; }
.mb-auth__card .lqd-input-container.mbh-69.mbh-69:not(mbh)::after { background-color: var(--mb-lime); transform: rotate(-6deg); }
.mb-auth__card .lqd-input-container.mbh-69.mbh-69:not(mbh)::before { background-color: var(--mb-deep); }
.mb-auth__card .lqd-input-container.mbh-69.mbh-69:not(mbh) .lqd-input-label { color: var(--mb-green); }
/* filled fields keep a calm lime-tinted tile with a check-like accent */
.mb-auth__card .lqd-input-container.mbh-70.mbh-70.mbh-70:not(mbh)::after { background-color: rgba(166, 199, 50, .42); }
body.theme-dark .mb-auth__card .lqd-input-container.mbh-68.mbh-68:not(mbh)::after { background-color: rgba(166, 199, 50, .14); }
body.theme-dark .mb-auth__card .lqd-input-container.mbh-68.mbh-68:not(mbh)::before { background-color: var(--mb-lime); }
body.theme-dark .mb-auth__card .lqd-input-container.mbh-69.mbh-69:not(mbh)::after { background-color: var(--mb-lime); }
body.theme-dark .mb-auth__card .lqd-input-container.mbh-69.mbh-69:not(mbh)::before { background-color: var(--mb-deep); }
body.theme-dark .mb-auth__card .lqd-input-container.mbh-69.mbh-69:not(mbh) .lqd-input-label { color: var(--mb-lime); }
@media (prefers-reduced-motion: reduce) { .mb-auth__card .lqd-input-container::after { transition: none; transform: none !important; } }

/* ==========================================================================
   Phone chrome pass — dock · "More" sheet · language switch · top-bar tools
   Append to scriptif.css (after the existing "Phone dock" blocks). Phones/tablets only.
   Pairs with qa-briefs/mobile/dock/studio-bar.blade.php
   ========================================================================== */
@media (max-width: 1023px) {

	/* ---------- Dock ---------- */
	/* Home + up to three pages + More: n columns, never an empty slot (replaces repeat(5) and the repeat(4) :has() fix) */
	body.scriptif .ms-dock {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		padding-inline: max(6px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-right));
	}
	/* one line, centred; the vendor label is only the fallback, the short labels fit */
	body.scriptif .ms-dock .ms-dock-label {
		display: block;
		-webkit-line-clamp: unset;
		-webkit-box-orient: unset;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		font-size: 10.5px;
		line-height: 1.2;
		padding-inline: 1px;
	}
	body.scriptif .ms-dock .ms-dock-icon { width: 100%; }
	body.scriptif .ms-dock .ms-dock-icon > svg,
	body.scriptif .ms-dock .ms-dock-icon > .ms-tile-letter { margin-inline: auto; }
	/* the sheet is open: only "More" is the current spot, Home stops glowing */
	body.scriptif .ms-dock.mbh-71.mbh-71 .ms-dock-item:not(.ms-dock-more).is-active {
		color: rgba(235, 229, 216, .62) !important;
		background: transparent;
	}
	body.scriptif .ms-dock.mbh-71.mbh-71 .ms-dock-item:not(.ms-dock-more).is-active .ms-dock-icon { color: inherit; }
	body.scriptif .ms-dock.mbh-71.mbh-71 .ms-dock-item:not(.ms-dock-more).is-active::before { display: none; }
	/* "More" is lit (dot only) when the current page is not one of the dock pages */
	body.scriptif .ms-dock-more.is-current:not(.is-active)::before {
		content: "";
		position: absolute;
		top: 4px;
		width: 5px; height: 5px;
		border-radius: 50%;
		background: var(--mb-lime);
	}
	body.scriptif .ms-dock-more.is-current:not(.is-active) { color: #FBFAF7 !important; }

	/* the dock floats 10px above the edge: keep the last card clear of it */
	body.scriptif { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }

	/* ---------- "More" sheet ---------- */
	/* dynamic viewport: the iOS toolbar no longer pushes the sheet's top off-screen */
	@supports (height: 100dvh) {
		body.scriptif .ms-sheet { max-height: 86dvh; }
	}
	body.scriptif .ms-sheet { overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
	/* handle: a real 44px touch target (tap closes), the visible bar stays 5px */
	body.scriptif .ms-sheet-handle { position: relative; cursor: pointer; }
	body.scriptif .ms-sheet-handle::before { content: ""; position: absolute; inset: -14px -40px; }
	/* page behind the open sheet does not scroll */
	body.scriptif.mbh-72.mbh-72 { overflow: hidden; }
	/* keep the sheet's content inside the viewport on 360px */
	body.scriptif .ms-sheet .ms-tile-label { overflow-wrap: anywhere; min-width: 0; }
	body.scriptif .ms-sheet .ms-sub { flex-wrap: wrap; max-width: 100%; }

	/* ---------- Language switch at the top of the sheet ---------- */
	body.scriptif .ms-sheet-lang {
		flex-shrink: 0;
		display: grid;
		grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
		gap: 4px;
		padding: 4px;
		border-radius: 9999px;
		background: var(--ms-tile-bg);
		box-shadow: inset 0 0 0 1px var(--mb-line);
	}
	body.scriptif .ms-sheet-lang-item {
		display: grid;
		place-items: center;
		min-height: 44px;
		border-radius: 9999px;
		font-family: var(--mb-font-display);
		font-size: 14px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0;
		color: var(--mb-muted) !important;
		text-decoration: none !important;
		-webkit-tap-highlight-color: transparent;
		transition: background-color .25s var(--mb-ease), color .25s var(--mb-ease), transform .14s var(--mb-ease);
	}
	body.scriptif .ms-sheet-lang-item[lang="ar"] { font-size: 18px; padding-bottom: 3px; }
	body.scriptif a.ms-sheet-lang-item:active { transform: scale(.95); }
	/* current language: deep green fill, lime text — inverted in dark mode */
	body.scriptif .ms-sheet-lang-item.is-on { background: var(--mb-green); color: var(--mb-lime) !important; }
	body.scriptif.theme-dark .ms-sheet-lang-item.is-on { background: #EBE5D8; color: #0F2B27 !important; }
	body.scriptif .ms-sheet-lang a.ms-sheet-lang-item:focus-visible { outline: 2px solid var(--mb-mid) !important; outline-offset: 2px; }
	body.scriptif.theme-dark .ms-sheet-lang a.ms-sheet-lang-item:focus-visible { outline-color: var(--mb-lime) !important; }

	/* ---------- Top bar tools ---------- */
	/* the light/dark switch was 42x42 (40 + its hairline) beside the 40px account button */
	body.scriptif .ms-actions a.lqd-light-dark-switch {
		box-sizing: border-box;
		width: 40px !important;
		height: 40px !important;
		min-height: 0;
	}
}

@media (max-width: 380px) {
	body.scriptif .ms-dock { inset-inline: 6px; }
	body.scriptif .ms-dock .ms-dock-label { font-size: 10px; }
	body.scriptif .ms-sheet { padding-inline: 12px; }
}

/* ---------- Phone: the language switch lives in the top bar (not in the "More" sheet) ---------- */
@media (max-width: 1023px) {
	body.scriptif .ms-actions .mb-lang { display: inline-grid !important; --seg: 30px; height: 36px; }
	body.scriptif .ms-sheet-lang { display: none !important; }
}
@media (max-width: 360px) {
	body.scriptif .ms-logo { width: auto !important; }
	body.scriptif .ms-logo img[class~="dark:hidden"] { width: 104px !important; height: 32px !important; }
	body.scriptif .ms-logo img[class~="dark:block"] { height: 36px !important; }
	body.scriptif .ms-bar-inner { gap: 6px; }
}
@media (max-width: 340px) {
	body.scriptif .ms-logo img[class~="dark:hidden"] { width: 92px !important; height: 28px !important; }
	body.scriptif .ms-logo img[class~="dark:block"] { height: 31px !important; }
	body.scriptif .ms-actions { gap: 4px !important; }
	body.scriptif .ms-actions > .lqd-btn, body.scriptif .ms-actions > .lqd-dropdown > :first-child { width: 36px !important; height: 36px !important; min-width: 36px !important; }
	body.scriptif .ms-actions .mb-lang { --seg: 26px; height: 34px; }
}


/* ========== phone QA pass: user pages ========== */
/* ==========================================================================
   Phone QA · user pages (/dashboard/user/... and non-admin /dashboard/...)
   Append to scriptif.css. Every rule below was injected live into the 390px / 360px
   iframe (light + dark) before it was written down. All scoped to phones + body.scriptif.
   ========================================================================== */

/* ---------- 1. Call-agent history (/dashboard/phone-call-agent/history) ----------
   The history panel is a `fixed top-0 h-screen` overlay. On phones the sticky studio bar (58px) sat on top of its
   first 58px, so the title row ("سجل المكالمات"), search / calendar / export icons were half hidden, and the
   100vh height pushed the last row under the dock. Start it under the bar, end at the screen bottom, let it
   scroll, keep the last row clear of the dock. */
@media (max-width: 1023px) {
	body.scriptif .lqd-ext-phone-history.fixed {
		top: 58px;
		height: calc(100dvh - 58px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-bottom: 96px;
	}
	body.scriptif .lqd-ext-phone-history-sidebar { min-height: 0; }
	/* vendor --header-height (90px) made the title row tall; it wraps to two lines on phones */
	body.scriptif .lqd-ext-phone-history-sidebar > div:first-child { height: auto; min-height: 64px; padding-block: 10px; }
}

/* ---------- 2. Inbox side panel is 14px off the screen (chatbot agent, AI agent messages, marketing inbox) ----------
   On phones the history list is `max-lg:fixed` with no start/end, so it kept its static position inside the
   14px page gutter: 360px wide starting at x=14 (RTL: x=-14..346). At 360px the search icon of the toolbar was
   cut by the screen edge and the panel was not centred. Pin it edge to edge. */
@media (max-width: 1023px) {
	body.scriptif .lqd-ext-chatbot-history-sidebar > div.fixed,
	body.scriptif .lqd-ext-chatbot-history-sidebar > div[class*="max-lg:fixed"] { inset-inline: 0; width: auto; }
}

/* ---------- 3. Title-bar action rows that cannot wrap (contact list, CRM calendar, …) ----------
   `.lqd-titlebar-actions` wraps, but the inner `div.flex` holding the buttons / chips does not: at 360px the
   "إضافة جهة اتصال جديدة" button ran 23px past the screen edge (contacts import + add) and the CRM
   calendar chip «الأنشطة» was cut. Let the inner row wrap. */
@media (max-width: 767px) {
	body.scriptif .lqd-titlebar-actions > div.flex:not(.flex-wrap, .flex-col) { flex-wrap: wrap; max-width: 100%; min-width: 0; row-gap: 8px; }
}

/* ---------- 4. Filter rows made of buttons become one swipeable row (social posts, sales: payments / proposals / estimates) ----------
   The status chips wrapped into 2-3 rows (+ an orphan "يوتيوب شورتس" chip alone on the third). Same treatment as
   ul.lqd-filter-list: one row, swipe, starts at the reading edge. */
@media (max-width: 767px) {
	body.scriptif form.lqd-filter-list {
		flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none;
		margin-inline: -16px; padding: 2px 16px 6px; max-width: 100vw; width: auto;
	}
	body.scriptif form.lqd-filter-list::-webkit-scrollbar { display: none; }
	body.scriptif form.lqd-filter-list > * { flex-shrink: 0; }
	body.scriptif form.lqd-filter-list .lqd-btn { white-space: nowrap; }

	body.scriptif div.flex.flex-wrap.text-heading-foreground.mbh-73.mbh-73:not(mbh):not(mbh) {
		flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none;
		margin-inline: -14px; padding: 2px 14px 6px;
	}
	body.scriptif div.flex.flex-wrap.text-heading-foreground.mbh-73.mbh-73:not(mbh):not(mbh)::-webkit-scrollbar { display: none; }
	body.scriptif div.flex.flex-wrap.text-heading-foreground.mbh-73.mbh-73:not(mbh):not(mbh) > * { flex-shrink: 0; white-space: nowrap; }
}

/* 5. the FullCalendar «2 day» label is translated by the client dictionaries instead of a CSS swap */

/* ---------- 6. Dark mode: AI chat header / composer were neutral black on a deep-green card (CRM assistant, chat pages) ----------
   `.lqd-chat-head` is rgba(20,20,20,.95) and the composer container rgb(20,20,20) in dark: two grey-black bands
   inside the green card. Brand surfaces instead. */
@media (max-width: 1023px) {
	body.scriptif.theme-dark .lqd-chat-head { background-color: rgba(15, 43, 39, .96) !important; }
	body.scriptif.theme-dark .lqd-chat-form-inputs-container { background-color: var(--mb-input, #0A1E1B) !important; }
}

/* ---------- 7. Tap targets under 40px ----------
   Round icon buttons (.mb-icb) in inbox / assistant toolbars are 34-36px by design (seven of them share a
   row), so keep their look and widen only the hit area. Text chips / calendar buttons get a real 40px height. */
@media (max-width: 1023px) {
	body.scriptif:not(#mbb) .mb-icb:not(.ms-bar *, .lqd-header *, .absolute, .fixed, .sticky) { position: relative; }
	body.scriptif:not(#mbb) .mb-icb:not(.ms-bar *, .lqd-header *, .absolute, .fixed, .sticky)::after { content: ""; position: absolute; inset: -3px; }
	body.scriptif .fc .fc-button { min-height: 40px; }
	body.scriptif .lqd-titlebar-actions button.rounded-full.border { min-height: 40px; }
}


/* ========== phone QA pass: admin pages ========== */
/* ==========================================================================
   Admin pages · phone layout pass (2026-10-31) — append to scriptif.css
   All rules are phone-scoped and use body.scriptif. Tested live in a 390px / 360px iframe,
   light + dark, RTL. No gradients, brand tokens only.
   ========================================================================== */

/* 1. Fixed-width buttons wider than the screen.
   /admin/settings/thumbnail: the red "Empty" button is `.btn.w-96` (384px) and ran 29px off the screen edge
   in RTL. Any button with a fixed Tailwind width may shrink to its container on phones. */
@media (max-width: 1023px) {
	body.scriptif :is(.btn, .lqd-btn).w-96,
	body.scriptif :is(.btn, .lqd-btn)[class*="w-["] { max-width: 100%; }
}

/* 2. Nested cards in settings forms ate 35% of the screen.
   /admin/settings/<provider> (OpenAI, Gemini, Anthropic, x-ai, deepseek, fal-ai…): page container 14 + outer card 16 +
   inner card 16 + field box 20 = ~69px of padding per side; the label column was 252px of 390.
   The inner card (.col-md-12 > .mb-3 > .lqd-card — not caught by the `.row > .lqd-card` rule) becomes plain content
   and the field box gets 12px, so inputs use ~320px. */
@media (max-width: 767px) {
	body.scriptif .lqd-page-settings .lqd-card .lqd-card:not(.row > .lqd-card) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
	body.scriptif .lqd-page-settings .lqd-card .lqd-card > .lqd-card-body.lqd-card-sm { padding: 4px 0 !important; }
	body.scriptif .lqd-page-settings .lqd-card .form-control.border-none { padding: 12px !important; }
}

/* 3. Long Latin option text in selects, in an RTL page.
   "GPT-5 Chat (Sep 30, 2024 knowledge cutoff…)" showed its END ("…ledge cutoff, 128k max output tokens.)") with the
   start cut off. Make the select LTR so a long value starts at its beginning and ends with an ellipsis; short Arabic
   values stay on the right edge, the chevron stays on the left. */
@media (max-width: 1023px) {
	[dir="rtl"] body.scriptif select.form-select { direction: ltr; text-align: right; text-overflow: ellipsis; padding-left: 38px; padding-right: 14px; }
}

/* 4. Tables (users, activity, deletion requests, templates…).
   They already scroll inside .lqd-table-outline, but a user-agent string wrapped to 8 lines (145px rows) and
   "منذ 33 دقيقة" broke into 3 lines in a 44px column. One line per cell, long text ellipsised, buttons untouched. */
@media (max-width: 767px) {
	body.scriptif table.lqd-table :is(td, th) { white-space: nowrap; padding: 10px 12px; }
	body.scriptif table.lqd-table td { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
	body.scriptif table.lqd-table td.mbh-74:not(mbh) { overflow: visible; max-width: none; }
}

/* 5. 24–28px controls: keep the look, grow the touch area (+8px on every side, invisible).
   .remove-inputs-group (red − on repeater rows, 24px), .lqd-show-password (eye in key fields, 28px),
   button.table-sort and the 28px pagination links. */
@media (max-width: 1023px) {
	body.scriptif :is(button.table-sort, a.page-link.size-7) { position: relative; }
	body.scriptif :is(.remove-inputs-group, .lqd-show-password) { position: absolute; }
	body.scriptif :is(.remove-inputs-group, .lqd-show-password, button.table-sort, a.page-link.size-7)::before { content: ""; position: absolute; inset: -8px; }
}

/* ---------- Phone: admin menu builder (/dashboard/admin/menu) — item rows wrap their toggles instead of running off the screen ---------- */
@media (max-width: 767px) {
	body.scriptif.page-admin-menu :is(li.group\/item > div > div.flex.w-full.items-center.gap-3, li div.flex.items-center.gap-3.rounded-xl.border) { flex-wrap: wrap; row-gap: 10px; column-gap: 12px; }
	body.scriptif.page-admin-menu :is(li.group\/item > div > div.flex.w-full.items-center.gap-3, li div.flex.items-center.gap-3.rounded-xl.border) > .flex.grow { flex: 1 1 calc(100% - 40px); min-width: 0; }
	body.scriptif.page-admin-menu :is(li.group\/item > div > div.flex.w-full.items-center.gap-3, li div.flex.items-center.gap-3.rounded-xl.border) > .ms-auto { margin-inline-start: 0; }
	body.scriptif.page-admin-menu :is(li.group\/item > div > div.flex.w-full.items-center.gap-3, li div.flex.items-center.gap-3.rounded-xl.border) > .flex.grow + .ms-auto { margin-inline-start: 36px; }
	body.scriptif.page-admin-menu li.group\/item > div { padding-inline: 12px; }
	body.scriptif.page-admin-menu li li div.flex.items-center.gap-3.rounded-xl.border { padding-inline: 12px; }
	body.scriptif.page-admin-menu li ul, body.scriptif.page-admin-menu li ol { padding-inline-start: 10px; margin-inline-start: 0; }
	body.scriptif.page-admin-menu div.lqd-input.flex > * { min-width: 0; }
	body.scriptif.page-admin-menu div.lqd-input.flex > input, body.scriptif.page-admin-menu div.lqd-input.flex > div { flex: 1 1 auto; }
	body.scriptif.page-admin-menu div.lqd-input.flex > button { flex: none; }
}


/* ========== phone paint cost (long admin menu rows, blur on phones) ========== */
/* ==========================================================================
   paint.css - phone rendering-cost reductions (append to the END of scriptif.css)
   Append-only: no existing rule is edited. All rules are phone-scoped
   (max-width: 1023px) and use the body.scriptif prefix. Brand untouched.
   Evidence: /Users/mostfa/Documents/Claude/ميديا/qa-briefs/mobile/paint/report.txt
   ========================================================================== */

@media (max-width: 1023px) {

	/* 1. Admin menu builder (/dashboard/admin/menu: 7 MB HTML, ~22.8k nodes, 142 sortable rows).
	   Skip style/layout/paint for rows that are off-screen.
	   - :not(:hover):not(:focus-within): content-visibility:auto adds layout+paint containment, which
	     (a) makes the row the containing block of its position:fixed info tooltips (lqdInfoTooltip) and
	     (b) clips them. Dropping the rule while the row is hovered/focused/tapped keeps tooltips correct.
	     A hovered/focused row is on screen anyway, so its size does not change.
	   - contain-intrinsic-block-size (logical, RTL-safe) instead of contain-intrinsic-size so the inline
	     size is never forced; "auto" remembers the real height once a row has been rendered.
	   - 280px = measured mean row height (39370px / 142 rows). */
	body.scriptif ol.lqd-menu-list > li:not(:hover):not(:focus-within) {
		content-visibility: auto;
		contain-intrinsic-block-size: auto 280px;
	}

	/* 2. Blur-behind that is re-computed on every scroll frame on phones.
	   2a. Chat composer (marketing-bot inbox / chatbot agent history): backdrop blur(40px) contrast(1.05)
	       over the scrolling messages, on a 5% tint. Replace with the solid page colour. */
	body.scriptif .lqd-chat-form.backdrop-blur-2xl {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background-color: var(--mb-page);
	}

	/* 2b. Fixed mobile panel that is already 90% opaque (bg-background/90 + blur 16px): the blur is not
	       visible through 90% fill. Make it fully solid instead. */
	body.scriptif [class~="max-lg:backdrop-blur-lg"] {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background-color: var(--mb-page);
	}

	/* 2c. Full-viewport dimmers (modal backdrop blur 3px, "More" sheet backdrop blur 2px): the dim colour
	       stays, only the full-screen blur pass goes. */
	body.scriptif .lqd-modal-backdrop,
	body.scriptif .ms-backdrop {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* --------------------------------------------------------------------------
   NOT ENABLED (no data in the test account to verify - selectors unconfirmed).
   Enable only after checking on an account that has rows:
     - documents list rows / cards      (/dashboard/user/openai/documents/all)
     - inbox / chatbot conversation rows
     - CRM kanban cards (children of the column drop zone `.min-h-[200px].flex-col`)
   Template (same pattern as rule 1; keep tooltips/dropdown-in-row caveat in mind):
   @media (max-width: 1023px) {
       body.scriptif <ROW-SELECTOR>:not(:hover):not(:focus-within) {
           content-visibility: auto;
           contain-intrinsic-block-size: auto <measured-row-height>px;
       }
   }
   -------------------------------------------------------------------------- */