/* X-Font Layout — Layout Studio shell (aligned with X-GLYPHS) */

.xfp-app {
	--xf-toolrail-w: 60px;
	--ls-header-h: 44px;
	--ls-accent: #2f6fed;
	--ls-accent-hover: #3b82f6;
	--ls-accent-rgb: 47, 111, 237;
	--ls-accent-grad: #3b82f6;
	--ls-btn-primary: #2f6fed;
	--ls-btn-primary-hover: #3b82f6;
	--ls-btn-primary-text: #ffffff;
	--ls-selection-rgb: 47, 111, 237;
	--ls-selection: rgba(47, 111, 237, 0.16);
	--ls-hover-accent: rgba(47, 111, 237, 0.1);
}

.xfp-app.ls-app {
	display: flex;
	flex-direction: column;
}

.xfp-app .ls-brand__logo.xfp-brand__logo {
	height: 24px;
	width: 24px;
	object-fit: contain;
}

.xfp-app .ls-brand__btn--with-name {
	gap: 8px;
	padding: 6px 10px 6px 6px;
}

.xfp-app .ls-brand__name.xfp-brand__name {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--ls-text);
	line-height: 1;
	white-space: nowrap;
	user-select: none;
}

.xfp-app .ls-brand__beta.xfp-brand__beta {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	margin-left: 2px;
	padding: 3px 8px;
	border-radius: 999px;
	border: 1px solid var(--ls-border);
	background: var(--ls-hover);
	font-size: 0.625rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ls-text-dim);
	user-select: none;
}

.xfp-app .ls-brand__beta.xfp-brand__beta.is-pro {
	border-color: rgba(var(--ls-accent-rgb, 62, 100, 255), 0.45);
	background: rgba(var(--ls-accent-rgb, 62, 100, 255), 0.12);
	color: var(--ls-accent, #3e64ff);
}

.xfp-app .ls-header {
	flex: none;
	position: relative;
	z-index: 5300;
}

html.xfp-native-desktop .ls-header {
	-webkit-app-region: drag;
}

html.xfp-desktop .ls-header button,
html.xfp-desktop .ls-header input,
html.xfp-desktop .ls-header select,
html.xfp-desktop .ls-header label,
html.xfp-desktop .ls-header a,
html.xfp-native-desktop .ls-window-controls,
html.xfp-native-desktop .ls-window-controls * {
	-webkit-app-region: no-drag;
}

html.xfp-desktop .ls-header__top {
	padding-right: 0;
}

.xfp-header-actions {
	display: flex;
	align-items: stretch;
	flex-shrink: 0;
	margin-left: auto;
}

html.xfp-web .xfp-header-actions {
	gap: 8px;
	padding-right: 12px;
	align-items: center;
}

html.xfp-web .xfp-header-actions,
html.xfp-web .xfp-header-actions * {
	-webkit-app-region: no-drag;
}

html.xfp-web .xfp-header-export {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0;
}

html.xfp-native-desktop .xfp-header-export {
	display: none;
}

html.xfp-web .xfp-header-auth {
	display: flex;
	align-items: center;
}

html.xfp-native-desktop .xfp-header-auth {
	display: none;
}

/* Desktop develop: hide Free/Pro plan UI (gates unlock via auth.getTier). */
html.xfp-native-desktop [data-xsis-tier-badge],
html.xfp-native-desktop .ls-brand__beta.xfp-brand__beta,
html.xfp-native-desktop [data-fi-watermark-pro-badge],
html.xfp-native-desktop .fi-watermark__pro-badge,
html.xfp-native-desktop .fi-save-project__lock {
	display: none !important;
}

.xfp-header-sign {
	padding: 6px 14px;
	font-size: 0.8125rem;
	font-weight: 600;
	border-radius: 999px;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
}

.xfp-header-upgrade {
	padding: 6px 14px;
	font-size: 0.8125rem;
	border-radius: 999px;
	line-height: 1.2;
}

html.xfp-web .ls-window-controls {
	display: none !important;
}

html.xfp-native-desktop .ls-window-controls {
	display: inline-flex !important;
	flex-shrink: 0;
}

html.xfp-web .fi-export--toolbar {
	display: none !important;
}

.fi-export__trigger--header {
	padding: 6px 14px;
	font-size: 0.8125rem;
	font-weight: 600;
	border-radius: 999px;
	line-height: 1.2;
}

html.xfp-web .fi-export__trigger--header.it-btn--primary {
	background: var(--xfp-accent, #2f6fed);
	color: #ffffff;
	border-color: var(--xfp-accent, #2f6fed);
}

html.xfp-web .fi-export__trigger--header.it-btn--primary:hover:not(:disabled) {
	background: var(--xfp-accent-hover, #3b82f6);
	border-color: var(--xfp-accent-hover, #3b82f6);
	color: #ffffff;
}

html.xfp-web .fi-export__trigger--header.it-btn--primary:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.fi-save-project__trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	padding: 6px 14px;
	font-size: 0.8125rem;
	font-weight: 600;
	border-radius: 999px;
	line-height: 1.2;
	border: 1px solid rgba(var(--it-accent-rgb), 0.38);
	background: rgba(var(--it-accent-rgb), 0.08);
	color: rgba(148, 196, 255, 0.92);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.fi-save-project__trigger.is-pro-locked:hover {
	background: rgba(var(--it-accent-rgb), 0.12);
	border-color: rgba(var(--it-accent-rgb), 0.5);
}

.fi-save-project__trigger[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
}

.fi-save-project__trigger[aria-disabled="true"]:hover {
	background: rgba(var(--it-accent-rgb), 0.08);
	border-color: rgba(var(--it-accent-rgb), 0.38);
}

.fi-save-project__trigger:not(.is-pro-locked) .fi-save-project__lock {
	display: none;
}

.fi-save-project__trigger:not(.is-pro-locked) {
	border-color: rgba(47, 111, 237, 0.45);
	background: rgba(47, 111, 237, 0.12);
	color: #dbeafe;
}

.fi-save-project__lock {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	opacity: 0.92;
}

html.xfp-native-desktop .ls-window-controls__btn {
	color: rgba(255, 255, 255, 0.78);
}

html.xfp-desktop .ls-window-controls__btn:hover {
	color: #ffffff;
}

.xfp-app .xfp-app-shell {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: stretch;
	overflow: hidden;
	background: var(--ls-bg);
}

.xfp-app .xfp-app-shell__main {
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.xfp-app .xfp-ls-options-bar .xfp-breadcrumb-bar,
.xfp-app .xfp-ls-options-bar .xfp-canvas-header {
	flex: 1;
	min-width: 0;
	padding: 0;
	border-bottom: none;
	background: transparent;
}

.xfp-app .xfp-ls-options-inner {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-width: 0;
	min-height: var(--ls-options-bar-h, 44px);
}

.xfp-app .xfp-ls-options-bar .xfp-breadcrumb {
	font-size: 0.8125rem;
}

.xfp-app .fi-hero,
.xfp-app .it-footer {
	display: none !important;
}

/* Sidebar — X-GLYPHS rail + flyout pattern */
.xfp-app .xf-overview-sidebar {
	flex: none;
	display: flex;
	align-items: stretch;
	min-height: 0;
	background: var(--ls-bg-panel, #111318);
	border-right: 1px solid var(--ls-border, rgba(255, 255, 255, 0.08));
	overflow: hidden;
}

.xfp-app .xf-overview-rail {
	flex: none;
	width: var(--xf-toolrail-w);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	padding: 8px 8px 12px;
	background: var(--ls-bg-panel, #111318);
	overflow: hidden;
}

.xfp-app .xf-overview-flyout {
	flex: none;
	display: flex;
	flex-direction: column;
	width: 0;
	min-width: 0;
	opacity: 0;
	overflow: hidden;
	border-left: 1px solid transparent;
	background: var(--ls-bg-panel, #111318);
	transition: width 0.22s ease, opacity 0.18s ease, border-color 0.18s ease;
}

.xfp-app.xfp-sidebar-flyout-open .xf-overview-flyout {
	width: 288px;
	opacity: 1;
	border-left-color: var(--ls-border, rgba(255, 255, 255, 0.08));
	overflow: hidden;
}

.xfp-app .xf-overview-flyout__head {
	flex: none;
	padding: 14px 14px 10px;
}

.xfp-app .xf-overview-flyout__title {
	margin: 0;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ls-text-dim, rgba(255, 255, 255, 0.42));
}

.xfp-app .xf-overview-flyout__panel {
	flex: 1;
	min-height: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 0 12px 14px;
	overflow: hidden;
}

.xfp-app .xf-overview-flyout__panel[hidden] {
	display: none !important;
}

.xfp-app .xf-overview-flyout__panel[data-sidebar-panel="palette"] {
	overflow-y: auto;
}

.xfp-app .xf-overview-flyout__panel[data-sidebar-panel="background"] {
	overflow-y: auto;
	overflow-x: hidden;
}

.xfp-app .xf-overview-flyout__panel[data-sidebar-panel="background"] .fi-bg-panel,
.xfp-app .xf-overview-flyout__panel[data-sidebar-panel="background"] .fi-bg-stops-wrap,
.xfp-app .xf-overview-flyout__panel[data-sidebar-panel="background"] .fi-bg-stops-row {
	overflow: visible;
}

.xfp-app .xf-overview-flyout__panel .fi-color-palette--sidebar {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.xfp-app .xf-overview-flyout__panel .fi-color-palette--sidebar .fi-color-palette__bar {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	margin-bottom: 10px;
}

.xfp-app .xf-overview-flyout__panel .fi-color-palette--sidebar .fi-color-palette__tools {
	flex-direction: column;
	align-items: stretch;
}

.xfp-app .xf-overview-flyout__panel .fi-color-palette--sidebar .fi-color-palette__upload,
.xfp-app .xf-overview-flyout__panel .fi-color-palette--sidebar .fi-color-palette__clear,
.xfp-app .xf-overview-flyout__panel .fi-color-palette--sidebar .fi-palette-stepper {
	width: 100%;
	justify-content: center;
}

.xfp-app .xf-overview-rail__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	min-height: 48px;
	padding: 8px 6px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--ls-text-dim, rgba(255, 255, 255, 0.5));
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
}

.xfp-app .xf-overview-rail__btn svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.xfp-app .xf-overview-rail__btn-label {
	font-size: 9px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	letter-spacing: -0.01em;
}

.xfp-app .xf-overview-rail__btn:hover {
	color: var(--ls-text, #fff);
	background: var(--ls-hover, rgba(255, 255, 255, 0.05));
}

.xfp-app .xf-overview-rail__btn.is-active {
	color: var(--ls-accent, #2f6fed);
	background: rgba(var(--ls-accent-rgb, 47, 111, 237), 0.12);
}

.xfp-app .xf-overview-rail__btn--accent {
	color: var(--ls-accent, #2f6fed);
}

.xfp-app .xf-overview-rail__btn--accent:hover {
	background: rgba(var(--ls-accent-rgb, 47, 111, 237), 0.1);
	color: var(--ls-accent-hover, #3b82f6);
}

.xfp-app .xf-overview-rail__btn--toggle svg {
	transition: transform 0.15s ease;
}

.xfp-app.xfp-sidebar-flyout-open .xf-overview-rail__btn--toggle svg {
	transform: rotate(180deg);
}

.xfp-app .xf-overview-rail__sep {
	flex: none;
	height: 1px;
	margin: 4px 6px;
	background: var(--ls-border, rgba(255, 255, 255, 0.08));
}

.xfp-app .xf-overview-rail__spacer {
	flex: 1;
	min-height: 8px;
}

.xfp-app .xfp-panel-title {
	margin: 0 0 8px;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--ls-text);
}

.xfp-app .xfp-layers-panel {
	flex: 1;
	min-height: 0;
	overflow: auto;
}

.xfp-app .fi-assets-gallery-wrap {
	flex: 1;
	min-height: 0;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* Scrollbars — match Layout Studio */
.xfp-app,
.xfp-app * {
	scrollbar-width: thin;
	scrollbar-color: var(--ls-scrollbar-thumb, rgba(255, 255, 255, 0.14)) transparent;
}

.xfp-app ::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.xfp-app ::-webkit-scrollbar-button {
	display: none;
	width: 0;
	height: 0;
}

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

.xfp-app ::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 999px;
}

.xfp-app *:hover::-webkit-scrollbar-thumb {
	background: var(--ls-scrollbar-thumb, rgba(255, 255, 255, 0.14));
}

.xfp-app ::-webkit-scrollbar-thumb:hover {
	background: var(--ls-scrollbar-thumb-hover, rgba(255, 255, 255, 0.22));
}