/* Fontxsis Lab — LIGHT black accent theme */

:root {
	--fx-bg: #f5f7fa;
	--fx-bg-panel: #ffffff;
	--fx-bg-soft: #eef2f7;
	--fx-bg-rail: #f8fafc;
	--fx-bg-card: #ffffff;
	--fx-bg-card-hover: #f3f4f6;

	--fx-blue: #111827;
	--fx-blue-hover: #000000;
	--fx-blue-soft: #eef0f3;
	--fx-blue-tint: rgba(17, 24, 39, 0.1);
	--fx-blue-ring: rgba(17, 24, 39, 0.22);
	--fx-blue-ring-strong: rgba(17, 24, 39, 0.4);
	--fx-on-blue: #ffffff;

	--fx-text: #111827;
	--fx-text-secondary: #4b5563;
	--fx-text-muted: #6b7280;
	--fx-text-faint: #9ca3af;

	--fx-border: rgba(15, 23, 42, 0.08);
	--fx-border-strong: rgba(15, 23, 42, 0.14);
	--fx-shadow-panel: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 40px rgba(15, 23, 42, 0.06);
	--fx-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04);

	--fx-radius-sm: 8px;
	--fx-radius: 14px;
	--fx-radius-lg: 22px;
	--fx-radius-pill: 10px;
	--fx-radius-circle: 999px;

	--fx-titlebar-h: 52px;
	--fx-sidebar-w: 280px;
	--fx-sidebar-rail-w: 56px;
	--fx-vz-panel-w: 320px;
	--fx-dock-w: 240px;
	--fx-kern-right-w: 280px;
	--fx-export-side-w: min(320px, 32%);
	--fx-font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

	--fx-cursor-v: default;
	--fx-cursor-pen: url("/assets/cursor-pen.svg") 3 21, crosshair;
	--fx-cursor-draw: url("/assets/cursor-draw.svg") 3 21, crosshair;
	--fx-cursor-brush: url("/assets/cursor-brush.svg") 4 20, crosshair;
	--fx-cursor-fillgrid: url("/assets/cursor-fillgrid.svg") 11 24, crosshair;
	--fx-cursor-knife: url("/assets/cursor-knife.svg") 3 20, crosshair;
	--fx-ruler-size: 18px;
	--fx-titlebar-bg: rgba(255, 255, 255, 0.82);
	--fx-app-glow-a: rgba(17, 24, 39, 0.06);
	--fx-app-glow-b: rgba(17, 24, 39, 0.04);
	color-scheme: light;
}

/* Dark — X-GLYPHS chrome surfaces + blue selection accent */
html[data-fx-theme="dark"] {
	--fx-bg: #0b0d0f;
	--fx-bg-panel: #111318;
	--fx-bg-soft: #171a20;
	--fx-bg-rail: #111318;
	--fx-bg-card: #0b0d0f;
	--fx-bg-card-hover: #151820;

	/* Blue accent (selection / tools) — match X-GLYPHS screenshot */
	--fx-blue: #3366ff;
	--fx-blue-hover: #4d7aff;
	--fx-blue-soft: rgba(51, 102, 255, 0.22);
	--fx-blue-tint: rgba(51, 102, 255, 0.28);
	--fx-blue-ring: rgba(51, 102, 255, 0.45);
	--fx-blue-ring-strong: rgba(51, 102, 255, 0.65);
	--fx-on-blue: #ffffff;

	--fx-text: #ffffff;
	--fx-text-secondary: rgba(255, 255, 255, 0.65);
	--fx-text-muted: rgba(255, 255, 255, 0.42);
	--fx-text-faint: rgba(255, 255, 255, 0.32);

	--fx-border: rgba(255, 255, 255, 0.06);
	--fx-border-strong: rgba(255, 255, 255, 0.12);
	--fx-shadow-panel: 0 16px 40px rgba(0, 0, 0, 0.55);
	--fx-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35);

	--fx-titlebar-bg: rgba(11, 13, 15, 0.82);
	--fx-app-glow-a: transparent;
	--fx-app-glow-b: transparent;
	--fx-cursor-v: default;
	--fx-cursor-pen: url("/assets/cursor-pen-white.svg") 3 21, crosshair;
	--fx-cursor-draw: url("/assets/cursor-draw-white.svg") 3 21, crosshair;
	--fx-cursor-brush: url("/assets/cursor-brush-white.svg") 4 20, crosshair;
	--fx-cursor-fillgrid: url("/assets/cursor-fillgrid-white.svg") 11 24, crosshair;
	--fx-cursor-knife: url("/assets/cursor-knife-white.svg") 3 20, crosshair;
	color-scheme: dark;
}

/* Logo & raster icons → white */
html[data-fx-theme="dark"] .fx-brand__mark,
html[data-fx-theme="dark"] .fx-help__trigger-icon,
html[data-fx-theme="dark"] .fx-help__item-icon,
html[data-fx-theme="dark"] .fx-sb__busy-logo,
html[data-fx-theme="dark"] .fx-newglyph__logo,
html[data-fx-theme="dark"] .fx-scan-overlay__logo,
html[data-fx-theme="dark"] img[src*="/assets/logo.svg"],
html[data-fx-theme="dark"] img[src*="/assets/icons/"] {
	filter: invert(1) brightness(1.2);
}

/* Keep color GIFs (success / fail) in their original palette */
html[data-fx-theme="dark"] img[src*="/assets/icons/success.gif"],
html[data-fx-theme="dark"] img[src*="/assets/icons/failed-cross.gif"],
html[data-fx-theme="dark"] .fx-sb-import-modal__glyph-stat-icon,
html[data-fx-theme="dark"] .fx-sb-import-modal__result-icon {
	filter: none;
}

html[data-fx-theme="dark"] .fx-theme-toggle__icon--moon {
	display: none;
}

html[data-fx-theme="dark"] .fx-theme-toggle__icon--sun {
	display: block;
}

/* Soft elev hover */
html[data-fx-theme="dark"] .fx-menubar__trigger:hover,
html[data-fx-theme="dark"] .fx-menubar__root.is-open .fx-menubar__trigger,
html[data-fx-theme="dark"] .fx-menubar__item:hover:not(:disabled),
html[data-fx-theme="dark"] .fx-menubar__item:focus-visible,
html[data-fx-theme="dark"] .fx-help__item:hover,
html[data-fx-theme="dark"] .fx-help__item:focus-visible,
html[data-fx-theme="dark"] .fx-web-nav__item:hover,
html[data-fx-theme="dark"] .fx-web-nav__item:focus-visible,
html[data-fx-theme="dark"] .fx-btn--ghost:hover,
html[data-fx-theme="dark"] .fx-theme-toggle:hover,
html[data-fx-theme="dark"] .fx-help__trigger:hover,
html[data-fx-theme="dark"] .fx-help__trigger[aria-expanded="true"],
html[data-fx-theme="dark"] .fx-web-nav__trigger:hover,
html[data-fx-theme="dark"] .fx-web-nav.is-open .fx-web-nav__trigger,
html[data-fx-theme="dark"] .fx-window-controls__btn:hover:not(.fx-window-controls__btn--close),
html[data-fx-theme="dark"] .fx-vz-menu__item:hover:not(:disabled),
html[data-fx-theme="dark"] .fx-cat-item:hover,
html[data-fx-theme="dark"] .fx-sys-item:hover,
html[data-fx-theme="dark"] .fx-account__trigger:hover,
html[data-fx-theme="dark"] .fx-sidebar__filter:hover,
html[data-fx-theme="dark"] .fx-glyph-statusbar__nav:hover {
	background: rgba(255, 255, 255, 0.05);
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.12);
}

html[data-fx-theme="dark"] .fx-menubar__item:hover:not(:disabled) .fx-menubar__shortcut,
html[data-fx-theme="dark"] .fx-menubar__item:focus-visible .fx-menubar__shortcut {
	color: rgba(255, 255, 255, 0.42);
}

/* Nav / category active — soft elev (not blue wash) */
html[data-fx-theme="dark"] .fx-sidebar__filter.is-active,
html[data-fx-theme="dark"] .fx-cat-item.is-active:not(.fx-cat-item--accent),
html[data-fx-theme="dark"] .fx-sys-item.is-active {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	border-color: transparent;
}

/* Tool / control active — blue like X-GLYPHS */
html[data-fx-theme="dark"] .fx-workflow-pill__btn.is-active,
html[data-fx-theme="dark"] .fx-vz-toolrail__btn.is-active,
html[data-fx-theme="dark"] .fx-kern__filter.is-active,
html[data-fx-theme="dark"] .fx-export__case-btn.is-active,
html[data-fx-theme="dark"] .fx-export-sampler__align-btn.is-active,
html[data-fx-theme="dark"] .fx-fontinfo__nav-btn.is-active {
	background: var(--fx-blue);
	color: var(--fx-on-blue);
	border-color: var(--fx-blue);
}

/* Primary CTA — white fill, black label */
html[data-fx-theme="dark"] .fx-btn--primary,
html[data-fx-theme="dark"] .fx-btn--pro,
html[data-fx-theme="dark"] .fx-cat-item--accent,
html[data-fx-theme="dark"] .fx-sidebar__cta,
html[data-fx-theme="dark"] .fx-export__run {
	background: #ffffff;
	color: #000000;
	border-color: #ffffff;
}

html[data-fx-theme="dark"] .fx-btn--primary:hover,
html[data-fx-theme="dark"] .fx-btn--pro:hover,
html[data-fx-theme="dark"] .fx-cat-item--accent:hover {
	background: #e5e5e5;
	color: #000000;
}

html[data-fx-theme="dark"] .fx-cat-item--accent .fx-cat-item__icon {
	color: #000000;
}

html[data-fx-theme="dark"] .fx-brand__badge {
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.65);
	border: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-fx-theme="dark"] .fx-toggle {
	background: #2a2e36;
}

html[data-fx-theme="dark"] .fx-toggle.is-on {
	background: var(--fx-blue);
}

html[data-fx-theme="dark"] .fx-toggle.is-on .fx-toggle__thumb {
	background: #ffffff;
}

html[data-fx-theme="dark"] .fx-sys-item.is-active::before,
html[data-fx-theme="dark"] .fx-sys-item:focus-visible::before {
	background: var(--fx-blue);
}

html[data-fx-theme="dark"] .fx-window-controls__btn--close:hover {
	background: #e81123;
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-sidebar-toggle {
	background: #1a1d21;
	border-color: rgba(255, 255, 255, 0.12);
	color: #9ca3af;
}

html[data-fx-theme="dark"] .fx-sidebar-toggle:hover {
	color: #f3f4f6;
	border-color: #60a5fa;
	background: rgba(37, 99, 235, 0.22);
}

html[data-fx-theme="dark"] .fx-sidebar-toggle[aria-pressed='true'] {
	color: #93c5fd;
	border-color: rgba(96, 165, 250, 0.5);
	background: rgba(17, 24, 39, 0.14);
}

/* Sidebar — dark panel (override light frosted glass) */
html[data-fx-theme="dark"] .fx-sidebar {
	background: rgba(17, 19, 24, 0.94);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

html[data-fx-theme="dark"] .fx-sidebar__sys {
	background: transparent;
	border-top-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-web-nav__menu,
html[data-fx-theme="dark"] .fx-web-nav__submenu {
	background: var(--fx-bg-panel);
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}

html[data-fx-theme="dark"] .fx-web-nav__sep {
	background: rgba(255, 255, 255, 0.1);
}

html[data-fx-theme="dark"] .fx-web-signin {
	background: #f3f4f6;
	color: #111;
}

html[data-fx-theme="dark"] .fx-web-signin:hover {
	background: #fff;
}

html[data-fx-theme="dark"] .fx-web-signin__mark {
	filter: none;
}

html[data-fx-theme="dark"] .fx-account__popover {
	background: var(--fx-bg-panel);
	border-color: var(--fx-border-strong);
	color: var(--fx-text);
	box-shadow: var(--fx-shadow-panel);
}

html[data-fx-theme="dark"] .fx-account__popover-badge.is-pro {
	background: var(--fx-blue);
	color: var(--fx-on-blue);
}

html[data-fx-theme="dark"] .fx-sys-item--danger:hover,
html[data-fx-theme="dark"] .fx-sys-item--danger:focus-visible {
	background: rgba(220, 38, 38, 0.16);
	color: #fca5a5;
}

html[data-fx-theme="dark"] .fx-vz-glyphs {
	background: var(--fx-bg-panel);
	border-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-vz-glyph {
	background: var(--fx-bg-soft);
	border-color: var(--fx-border);
	color: var(--fx-text);
}

html[data-fx-theme="dark"] .fx-vz-glyph:hover {
	background: var(--fx-bg-card-hover);
}

html[data-fx-theme="dark"] .fx-vz-glyph.is-selected {
	background: var(--fx-blue-soft);
	border-color: var(--fx-blue-ring);
}

/* ---- Kerning dark ---- */
html[data-fx-theme="dark"] .fx-kern__main,
html[data-fx-theme="dark"] .fx-kern__adjust,
html[data-fx-theme="dark"] .fx-workspace .fx-kern__main,
html[data-fx-theme="dark"] .fx-workspace .fx-kern__adjust,
html[data-fx-theme="dark"] .fx-workspace .fx-kern__spacing,
html[data-fx-theme="dark"] .fx-kern__spacing.fx-export-card,
html[data-fx-theme="dark"] .fx-export-card.fx-kern__spacing,
html[data-fx-theme="dark"] .fx-kern__side {
	background: var(--fx-bg-panel);
	border-color: var(--fx-border);
	box-shadow: none;
}

html[data-fx-theme="dark"] .fx-kern__filter {
	background: var(--fx-bg-soft);
	border-color: var(--fx-border-strong);
	color: var(--fx-text-secondary);
}

html[data-fx-theme="dark"] .fx-kern__filter:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-kern__filter.is-active {
	background: var(--fx-blue);
	border-color: var(--fx-blue);
	color: var(--fx-on-blue, #fff);
}

html[data-fx-theme="dark"] .fx-kern-side__tabs {
	background: var(--fx-bg-soft);
	border-color: var(--fx-border-strong);
}

html[data-fx-theme="dark"] .fx-kern-side__tab.is-active {
	background: #1a1f2a;
	color: #ffffff;
	box-shadow: none;
}

html[data-fx-theme="dark"] .fx-kern-side__filter input,
html[data-fx-theme="dark"] .fx-kern-side__num,
html[data-fx-theme="dark"] .fx-kern-side__glyph {
	background: var(--fx-bg-soft);
	border-color: var(--fx-border-strong);
	color: var(--fx-text);
}

html[data-fx-theme="dark"] .fx-kern-side__row:hover {
	background: rgba(255, 255, 255, 0.06);
}

html[data-fx-theme="dark"] .fx-kern-side__row.is-selected {
	background: var(--fx-blue-soft);
}

html[data-fx-theme="dark"] .fx-kern-pair {
	background: var(--fx-bg-soft);
	border-color: var(--fx-border-strong);
	box-shadow: none;
}

html[data-fx-theme="dark"] .fx-kern-pair:hover {
	background: var(--fx-bg-card-hover);
	border-color: rgba(255, 255, 255, 0.16);
}

html[data-fx-theme="dark"] .fx-kern-pair.is-selected {
	background: var(--fx-blue-soft);
	border-color: var(--fx-blue-ring);
}

html[data-fx-theme="dark"] .fx-kern-pair__face .is-side {
	color: #f3f4f6;
}

html[data-fx-theme="dark"] .fx-kern-pair__face .is-mid,
html[data-fx-theme="dark"] .fx-kern__focus-face .is-mid {
	color: #8eb6ff;
}

html[data-fx-theme="dark"] .fx-kern__focus-wrap {
	background: var(--fx-bg-soft);
	border-color: var(--fx-border-strong);
}

html[data-fx-theme="dark"] .fx-kern__focus {
	background: transparent;
	border-color: transparent;
}

html[data-fx-theme="dark"] .fx-kern__pair-under {
	background: rgba(0, 0, 0, 0.22);
	border-top-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-kern__focus-empty {
	color: var(--fx-text-muted);
}

html[data-fx-theme="dark"] .fx-kern__adjust-note,
html[data-fx-theme="dark"] .fx-kern__main-sub {
	color: var(--fx-text-muted);
}

html[data-fx-theme="dark"] .fx-export-card__head h3 {
	color: var(--fx-text-muted);
}

html[data-fx-theme="dark"] .fx-export-card__spacing,
html[data-fx-theme="dark"] .fx-export-card__meta {
	color: var(--fx-text-secondary);
}

html[data-fx-theme="dark"] .fx-pill--soft {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--fx-border);
	color: var(--fx-text-muted);
}

/* Workspace / overview — dark canvas, not white sheet */
html[data-fx-theme="dark"] .fx-overview__panel,
html[data-fx-theme="dark"] .fx-workspace .fx-overview__panel,
html[data-fx-theme="dark"] .fx-workflow-bar,
html[data-fx-theme="dark"] .fx-workflow-pill,
html[data-fx-theme="dark"] .fx-workspace .fx-kern__spacing,
html[data-fx-theme="dark"] .fx-workspace .fx-kern__main,
html[data-fx-theme="dark"] .fx-workspace .fx-kern__adjust {
	background: var(--fx-bg);
}

html[data-fx-theme="dark"] .fx-workflow-bar {
	background: var(--fx-bg-panel);
}

html[data-fx-theme="dark"] .fx-workflow-pill {
	background: var(--fx-bg-soft);
}

html[data-fx-theme="dark"] .fx-overview-grid {
	background: rgba(255, 255, 255, 0.06);
}

html[data-fx-theme="dark"] .fx-overview-grid::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.14);
}

/* Glyph cards — dark cells, white ink */
html[data-fx-theme="dark"] .fx-glyph-card {
	background: var(--fx-bg);
}

html[data-fx-theme="dark"] .fx-glyph-card:hover {
	background: var(--fx-bg-card-hover);
	box-shadow: none;
}

html[data-fx-theme="dark"] .fx-glyph-card__label {
	background: transparent;
	border-top-color: rgba(255, 255, 255, 0.06);
	color: var(--fx-text-muted);
}

html[data-fx-theme="dark"] .fx-glyph-card.is-filled .fx-glyph-card__label {
	color: var(--fx-text-secondary);
}

html[data-fx-theme="dark"] .fx-glyph-card__glyph,
html[data-fx-theme="dark"] .fx-glyph-preview {
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-glyph-card__host--empty .fx-glyph-card__glyph {
	color: rgba(255, 255, 255, 0.22);
}

html[data-fx-theme="dark"] .fx-glyph-card__status {
	background: rgba(255, 255, 255, 0.22);
}

/* Selected glyph — solid blue cell (X-GLYPHS) */
html[data-fx-theme="dark"] .fx-glyph-card.is-selected,
html[data-fx-theme="dark"] .fx-glyph-card.is-active,
html[data-fx-theme="dark"] .fx-glyph-card.is-selected.is-active {
	background: var(--fx-blue);
	box-shadow: none;
}

html[data-fx-theme="dark"] .fx-glyph-card.is-selected .fx-glyph-card__glyph,
html[data-fx-theme="dark"] .fx-glyph-card.is-active .fx-glyph-card__glyph,
html[data-fx-theme="dark"] .fx-glyph-card.is-selected .fx-glyph-preview,
html[data-fx-theme="dark"] .fx-glyph-card.is-active .fx-glyph-preview {
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-glyph-card.is-selected .fx-glyph-card__label,
html[data-fx-theme="dark"] .fx-glyph-card.is-active .fx-glyph-card__label {
	background: transparent;
	border-top-color: rgba(255, 255, 255, 0.2);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-glyph-card.is-selected .fx-glyph-card__status,
html[data-fx-theme="dark"] .fx-glyph-card.is-active .fx-glyph-card__status {
	background: #ffffff;
}

html[data-fx-theme="dark"] .fx-vz-glyph.is-selected,
html[data-fx-theme="dark"] .fx-kern-pair.is-selected {
	background: var(--fx-blue-soft);
	box-shadow: inset 0 0 0 1px var(--fx-blue-ring);
}

html[data-fx-theme="dark"] .fx-glyph-statusbar {
	background: var(--fx-bg-panel);
}

/* Home gate — flat dark */
html[data-fx-theme="dark"] .fx-home {
	background: #0b0d0f;
}

html[data-fx-theme="dark"] .fx-home__glow {
	display: none;
}

html[data-fx-theme="dark"] .fx-export-sampler__panel {
	--fx-sampler-color: #ffffff;
	--fx-sampler-bg: var(--fx-blue);
}

/* ---- Export page dark ---- */
html[data-fx-theme="dark"] .fx-export-card,
html[data-fx-theme="dark"] .fx-export-card--sampler,
html[data-fx-theme="dark"] .fx-fontinfo {
	background: var(--fx-bg-panel);
	border-color: var(--fx-border);
	box-shadow: none;
	color: var(--fx-text);
}

html[data-fx-theme="dark"] .fx-export-card__stage {
	color: #f3f4f6;
	caret-color: #8eb6ff;
}

html[data-fx-theme="dark"] .fx-export-card__stage:empty::before,
html[data-fx-theme="dark"] .fx-export-card__stage.is-empty:empty::before {
	color: var(--fx-text-faint);
}

html[data-fx-theme="dark"] .fx-export-sampler__title,
html[data-fx-theme="dark"] .fx-export-sampler__control,
html[data-fx-theme="dark"] .fx-export-sampler__swatch,
html[data-fx-theme="dark"] .fx-export-sampler__control strong,
html[data-fx-theme="dark"] .fx-export-card__spacing,
html[data-fx-theme="dark"] .fx-export-card__spacing strong,
html[data-fx-theme="dark"] .fx-export-card__meta,
html[data-fx-theme="dark"] .fx-export-card__head h3 {
	color: var(--fx-text-secondary);
}

html[data-fx-theme="dark"] .fx-export-sampler__control strong,
html[data-fx-theme="dark"] .fx-export-card__spacing strong,
html[data-fx-theme="dark"] .fx-export-sampler__title {
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-export-sampler__features select {
	background:
		linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.55) 50%) calc(100% - 12px) calc(50% - 2px) / 5px 5px no-repeat,
		linear-gradient(135deg, rgba(255, 255, 255, 0.55) 50%, transparent 50%) calc(100% - 8px) calc(50% - 2px) / 5px 5px no-repeat,
		var(--fx-bg-soft);
	border-color: var(--fx-border-strong);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-export-sampler__features select option {
	background: #111318;
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-export-sampler__swatch input[type='color'] {
	background: var(--fx-bg-soft);
	border-color: var(--fx-border-strong);
}

html[data-fx-theme="dark"] .fx-export__case-btn,
html[data-fx-theme="dark"] .fx-export-sampler__align-btn {
	background: var(--fx-bg-soft);
	border-color: var(--fx-border);
	color: rgba(255, 255, 255, 0.72);
}

html[data-fx-theme="dark"] .fx-export__case-btn:hover,
html[data-fx-theme="dark"] .fx-export-sampler__align-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-export__case-btn.is-active,
html[data-fx-theme="dark"] .fx-export-sampler__align-btn.is-active {
	background: var(--fx-blue);
	border-color: var(--fx-blue);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-export-tray__cell {
	background: var(--fx-bg-soft);
	border-color: var(--fx-border);
	color: #f3f4f6;
}

html[data-fx-theme="dark"] .fx-export-tray__cell:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.16);
}

html[data-fx-theme="dark"] .fx-export-tray__cell.is-empty {
	color: var(--fx-text-faint);
}

html[data-fx-theme="dark"] .fx-export-ladder__size {
	color: var(--fx-text-muted);
}

html[data-fx-theme="dark"] .fx-export-ladder__text {
	color: #f3f4f6;
}

html[data-fx-theme="dark"] .fx-fontinfo__nav {
	background: var(--fx-bg-soft);
	border-color: var(--fx-border);
	box-shadow: none;
}

html[data-fx-theme="dark"] .fx-fontinfo__nav-btn {
	color: var(--fx-text-secondary);
}

html[data-fx-theme="dark"] .fx-fontinfo__nav-btn:hover {
	background: rgba(255, 255, 255, 0.06);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-fontinfo__nav-btn.is-active {
	background: var(--fx-blue);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-fontinfo__pages {
	background: var(--fx-bg-soft);
	border-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-fontinfo__pages::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.16);
	border-radius: 999px;
}

html[data-fx-theme="dark"] .fx-fontinfo__label,
html[data-fx-theme="dark"] .fx-fontinfo__page-lead,
html[data-fx-theme="dark"] .fx-fontinfo__check,
html[data-fx-theme="dark"] .fx-fontinfo__dot {
	color: var(--fx-text-muted);
}

html[data-fx-theme="dark"] .fx-fontinfo__input,
html[data-fx-theme="dark"] .fx-fontinfo__input--area,
html[data-fx-theme="dark"] .fx-fontinfo__input--num {
	background: #0e1014;
	border-color: var(--fx-border-strong);
	color: #ffffff;
	color-scheme: dark;
}

html[data-fx-theme="dark"] .fx-fontinfo__input::placeholder,
html[data-fx-theme="dark"] .fx-fontinfo__input--area::placeholder {
	color: var(--fx-text-faint);
}

html[data-fx-theme="dark"] .fx-fontinfo__input:focus {
	border-color: var(--fx-blue-ring);
	box-shadow: 0 0 0 3px var(--fx-blue-tint);
}

html[data-fx-theme="dark"] .fx-fontinfo__input option {
	background: #111318;
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-fontinfo__version-preview {
	color: var(--fx-text-secondary);
}

html[data-fx-theme="dark"] .fx-export-modal__backdrop {
	background: rgba(4, 5, 8, 0.72);
}

html[data-fx-theme="dark"] .fx-export-modal__panel {
	background: var(--fx-bg-panel);
	border-color: var(--fx-border-strong);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

html[data-fx-theme="dark"] .fx-export-modal__header {
	background: var(--fx-bg-soft);
	border-bottom-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-export-modal__eyebrow {
	color: #8eb6ff;
}

html[data-fx-theme="dark"] .fx-export-modal__title,
html[data-fx-theme="dark"] .fx-export-modal__format-name,
html[data-fx-theme="dark"] .fx-export-modal__dest-check,
html[data-fx-theme="dark"] .fx-export-modal__instance-name,
html[data-fx-theme="dark"] .fx-export-modal__content-name,
html[data-fx-theme="dark"] .fx-export-modal__info-title {
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-export-modal__col--info {
	background: var(--fx-bg-soft);
	border-right-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-export-modal__col--content {
	background: #0e1013;
	border-left-color: rgba(255, 255, 255, 0.1);
}

html[data-fx-theme="dark"] .fx-export-modal__info-head {
	border-bottom-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-export-modal__info-meta {
	color: var(--fx-text-secondary);
}

html[data-fx-theme="dark"] .fx-export-modal__close:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-export-modal__body,
html[data-fx-theme="dark"] .fx-export-modal__footer {
	background: var(--fx-bg-panel);
	border-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-export-modal__format-label {
	background: var(--fx-bg-soft);
	border-color: var(--fx-border-strong);
}

html[data-fx-theme="dark"] .fx-export-modal__format-label:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.16);
}

html[data-fx-theme="dark"] .fx-export-modal__format-label:has(.fx-export-modal__format-check:checked) {
	background: var(--fx-blue-soft);
	border-color: var(--fx-blue-ring);
	box-shadow: 0 0 0 3px var(--fx-blue-tint);
}

html[data-fx-theme="dark"] .fx-export-modal__format-icon {
	background: #0e1014;
	border-color: var(--fx-border-strong);
	color: rgba(255, 255, 255, 0.65);
}

html[data-fx-theme="dark"] .fx-export-modal__format-check:checked + .fx-export-modal__format-icon {
	background: var(--fx-blue);
	border-color: var(--fx-blue);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-export-modal__dest-folder {
	background: #0e1014;
	border-color: var(--fx-border-strong);
}

html[data-fx-theme="dark"] .fx-export-modal__dest-path {
	color: #ffffff;
	background: transparent;
}

html[data-fx-theme="dark"] .fx-export-modal__dest-path::placeholder,
html[data-fx-theme="dark"] .fx-export-modal__dest-path.is-empty {
	color: var(--fx-text-faint);
}

html[data-fx-theme="dark"] .fx-export-modal__dest-browse {
	background: var(--fx-bg-soft);
	border-left-color: var(--fx-border);
	color: rgba(255, 255, 255, 0.65);
}

html[data-fx-theme="dark"] .fx-export-modal__dest-browse:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-export-modal__dest-browse--static {
	background: var(--fx-bg-soft);
	border-left-color: var(--fx-border);
	color: rgba(255, 255, 255, 0.65);
}

html[data-fx-theme="dark"] .fx-export-modal__dest-select {
	background: #0e1014;
	border-color: var(--fx-border-strong);
	color: #ffffff;
	color-scheme: dark;
}

html[data-fx-theme="dark"] .fx-export-modal__dest-select option {
	background: #111318;
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-export-modal__instance {
	background: var(--fx-bg-soft);
	border-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-export-modal__content-list,
html[data-fx-theme="dark"] .fx-export-modal__content-tabs {
	background: var(--fx-bg-soft);
	border-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-export-modal__content-tab.is-active {
	background: #1a1d24;
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-export-modal__content-row.is-selected {
	background: rgba(51, 102, 255, 0.22);
	border-color: #60a5fa;
}

html[data-fx-theme="dark"] .fx-export-modal__footer .fx-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.18);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-export-modal__footer .fx-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-export-modal__footer .fx-btn--primary {
	background: #ffffff;
	color: #000000;
	border-color: #ffffff;
}

/* ---- Template / worksheet modal dark ---- */
html[data-fx-theme="dark"] .fx-modal__backdrop {
	background: rgba(4, 5, 8, 0.72);
}

html[data-fx-theme="dark"] .fx-modal__card {
	background: var(--fx-bg-panel);
	border-color: var(--fx-border-strong);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
	color: var(--fx-text);
}

html[data-fx-theme="dark"] .fx-modal__head,
html[data-fx-theme="dark"] .fx-worksheet-modal__page-head {
	background: rgba(51, 102, 255, 0.18);
	border-bottom-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-modal__title,
html[data-fx-theme="dark"] .fx-worksheet-modal__page-title,
html[data-fx-theme="dark"] .fx-worksheet-modal__chrome-title,
html[data-fx-theme="dark"] .fx-worksheet-step__name {
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-modal__sub,
html[data-fx-theme="dark"] .fx-worksheet-modal__page-sub {
	color: rgba(255, 255, 255, 0.72);
}

html[data-fx-theme="dark"] .fx-modal__close {
	color: rgba(255, 255, 255, 0.55);
}

html[data-fx-theme="dark"] .fx-modal__close:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-modal__foot {
	background: var(--fx-bg-soft);
	border-top-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-worksheet-modal__chrome {
	background: var(--fx-bg-panel);
	border-bottom-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-worksheet-modal__rail {
	background: var(--fx-bg-soft);
	border-right-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-worksheet-step {
	color: rgba(255, 255, 255, 0.72);
}

html[data-fx-theme="dark"] .fx-worksheet-step:hover {
	border-color: rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.05);
}

html[data-fx-theme="dark"] .fx-worksheet-step.is-active {
	border-color: var(--fx-blue-ring);
	background: var(--fx-blue-soft);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-worksheet-step__thumb {
	background: #0e1014;
	border-color: rgba(255, 255, 255, 0.14);
}

html[data-fx-theme="dark"] .fx-worksheet-modal__main {
	background: var(--fx-bg-panel);
}

html[data-fx-theme="dark"] .fx-worksheet-modal__body {
	background: #0e1014;
}

html[data-fx-theme="dark"] .fx-worksheet-modal__field,
html[data-fx-theme="dark"] .fx-worksheet-modal__preview-label,
html[data-fx-theme="dark"] .fx-worksheet-modal__meta {
	color: rgba(255, 255, 255, 0.65);
}

html[data-fx-theme="dark"] .fx-worksheet-modal__field select {
	background: #111318;
	border-color: var(--fx-border-strong);
	color: #ffffff;
	color-scheme: dark;
}

html[data-fx-theme="dark"] .fx-worksheet-modal__field select option {
	background: #111318;
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-worksheet-modal__preview,
html[data-fx-theme="dark"] .fx-worksheet-modal__drop {
	background: #151820;
	border-color: rgba(255, 255, 255, 0.12);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-worksheet-modal__drop-title {
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-worksheet-modal__drop-sub {
	color: rgba(255, 255, 255, 0.65);
}

html[data-fx-theme="dark"] .fx-worksheet-modal__preview img {
	border-color: rgba(255, 255, 255, 0.12);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

html[data-fx-theme="dark"] .fx-worksheet-modal .fx-btn--primary {
	background: #ffffff;
	color: #000000;
	border-color: #ffffff;
}

html[data-fx-theme="dark"] .fx-worksheet-modal .fx-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.18);
	color: #ffffff;
}

/* ---- Confirm / Create New (new font) dark ---- */
html[data-fx-theme="dark"] .fx-confirm__backdrop {
	background: rgba(4, 5, 8, 0.72);
}

html[data-fx-theme="dark"] .fx-confirm__card {
	background: var(--fx-bg-panel);
	border-color: var(--fx-border-strong);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
	color: var(--fx-text);
}

html[data-fx-theme="dark"] .fx-confirm__title {
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-confirm__text {
	color: rgba(255, 255, 255, 0.65);
}

html[data-fx-theme="dark"] .fx-confirm__input {
	background: var(--fx-bg-soft);
	border-color: rgba(255, 255, 255, 0.18);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-confirm__input:focus {
	border-color: var(--fx-blue);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.28);
}

html[data-fx-theme="dark"] .fx-confirm__actions {
	background: var(--fx-bg-soft);
	border-top-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-confirm__btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.18);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-confirm__btn--ghost:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-confirm__btn--danger {
	background: var(--fx-blue);
	color: var(--fx-on-blue);
}

html[data-fx-theme="dark"] .fx-confirm__btn--danger:hover {
	background: var(--fx-blue-hover);
	color: var(--fx-on-blue);
}

/* ---- Create New Glyph modal dark ---- */
html[data-fx-theme="dark"] .fx-newglyph__panel {
	background: var(--fx-bg-panel);
	border-color: var(--fx-border-strong);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
	color: var(--fx-text);
}

html[data-fx-theme="dark"] .fx-newglyph__titlebar {
	background: rgba(51, 102, 255, 0.18);
	border-bottom-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-newglyph__title {
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-newglyph__close {
	color: rgba(255, 255, 255, 0.65);
}

html[data-fx-theme="dark"] .fx-newglyph__close:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-newglyph__body {
	background: var(--fx-bg-panel);
}

html[data-fx-theme="dark"] .fx-newglyph__input {
	background: #0e1014;
	border-color: var(--fx-border-strong);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-newglyph__input::placeholder {
	color: rgba(255, 255, 255, 0.35);
}

html[data-fx-theme="dark"] .fx-newglyph__input:focus {
	border-color: var(--fx-blue-ring-strong);
	box-shadow: 0 0 0 3px var(--fx-blue-soft);
}

html[data-fx-theme="dark"] .fx-newglyph__hint {
	color: rgba(255, 255, 255, 0.55);
}

html[data-fx-theme="dark"] .fx-newglyph__suffix {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.85);
}

html[data-fx-theme="dark"] .fx-newglyph__suffix:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-newglyph__foot {
	background: var(--fx-bg-soft);
	border-top-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-newglyph__btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.18);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-newglyph__btn--ghost:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-newglyph__btn--primary {
	background: #ffffff;
	color: #000000;
	border-color: #ffffff;
}

html[data-fx-theme="dark"] .fx-newglyph__btn--primary:hover {
	background: #e5e5e5;
	color: #000000;
}

html[data-fx-theme="dark"] .fx-ctx {
	background: var(--fx-bg-panel);
	border-color: var(--fx-border-strong);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
	color: var(--fx-text);
}

html[data-fx-theme="dark"] .fx-ctx__item {
	color: rgba(255, 255, 255, 0.85);
}

html[data-fx-theme="dark"] .fx-ctx__item:hover,
html[data-fx-theme="dark"] .fx-ctx__item:focus-visible {
	background: var(--fx-blue-soft);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-ctx--overview {
	background: #2a2d33;
	border-color: rgba(255, 255, 255, 0.08);
}

html[data-fx-theme="dark"] .fx-ctx--overview .fx-ctx__item:hover,
html[data-fx-theme="dark"] .fx-ctx--overview .fx-ctx__item:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-account__plan-pill {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-cat-item.is-active .fx-cat-item__icon {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-glyph-statusbar__nav:hover {
	background: rgba(255, 255, 255, 0.05);
}

/* ---- Glyph Editor (vectorize) dark chrome ---- */
html[data-fx-theme="dark"] .fx-vz__canvas-col {
	background: var(--fx-bg);
}

html[data-fx-theme="dark"] .fx-vz__panel {
	background: var(--fx-bg-panel);
	border-left-color: var(--fx-border);
}

/* Artboard — dark canvas (glyph ink remapped in vectorize.js) */
html[data-fx-theme="dark"] .fx-vz__stage {
	background: #0e1014;
}

html[data-fx-theme="dark"] .fx-vz__stage::before {
	opacity: 0.5;
	background-color: #0e1014;
	background-image:
		radial-gradient(rgba(255, 255, 255, 0.14) 1.2px, transparent 1.2px),
		radial-gradient(rgba(255, 255, 255, 0.14) 1.2px, #0e1014 1.2px);
	background-size: 20px 20px;
	background-position: 0 0, 10px 10px;
}

html[data-fx-theme="dark"] .fx-vz-toolrail {
	background: rgba(17, 19, 24, 0.94);
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

html[data-fx-theme="dark"] .fx-vz-toolrail__grip:hover {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.85);
}

html[data-fx-theme="dark"] .fx-vz-toolrail__btn {
	background: transparent;
	border-color: transparent;
	color: rgba(255, 255, 255, 0.72);
}

html[data-fx-theme="dark"] .fx-vz-toolrail__btn:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: transparent;
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-vz-toolrail__btn.is-active {
	background: var(--fx-blue);
	border-color: var(--fx-blue);
	color: #ffffff;
	box-shadow: none;
}

html[data-fx-theme="dark"] .fx-vz__eye {
	background: rgba(17, 19, 24, 0.94);
	border-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.72);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

html[data-fx-theme="dark"] .fx-vz__eye:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.16);
}

html[data-fx-theme="dark"] .fx-vz__eye.is-on {
	background: var(--fx-blue);
	border-color: var(--fx-blue);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-vz__hud {
	background: rgba(17, 19, 24, 0.94);
	border-color: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

html[data-fx-theme="dark"] .fx-vz__hud-label,
html[data-fx-theme="dark"] .fx-vz__hud-pct {
	color: rgba(255, 255, 255, 0.85);
}

html[data-fx-theme="dark"] .fx-vz__hud-sep {
	background: rgba(255, 255, 255, 0.14);
}

html[data-fx-theme="dark"] .fx-vz__hud-btn {
	color: rgba(255, 255, 255, 0.72);
}

html[data-fx-theme="dark"] .fx-vz__hud-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-vz__check,
html[data-fx-theme="dark"] .fx-vz__field-label,
html[data-fx-theme="dark"] .fx-vz__sub,
html[data-fx-theme="dark"] .fx-vz__status,
html[data-fx-theme="dark"] .fx-vz__worksheet-hint,
html[data-fx-theme="dark"] .fx-vz__metrics-title,
html[data-fx-theme="dark"] .fx-vz__section-label {
	color: var(--fx-text-secondary);
}

html[data-fx-theme="dark"] .fx-vz__section-label {
	color: var(--fx-text-faint);
}

html[data-fx-theme="dark"] .fx-vz__field-label strong,
html[data-fx-theme="dark"] .fx-vz__worksheet-status {
	color: #8eb6ff;
}

html[data-fx-theme="dark"] .fx-vz__metrics-row {
	color: var(--fx-text-secondary);
}

html[data-fx-theme="dark"] .fx-vz-menu {
	background: var(--fx-bg-panel);
	border-color: var(--fx-border-strong);
	color: var(--fx-text);
}

html[data-fx-theme="dark"] .fx-vz-refine,
html[data-fx-theme="dark"] .fx-vz-refine__preview {
	background: var(--fx-bg-soft);
	border-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-vz__scan-card,
html[data-fx-theme="dark"] .fx-scan-overlay__card {
	background: var(--fx-bg-panel);
	color: var(--fx-text);
}

/* Sketchboard dark chrome */
html[data-fx-theme="dark"] .fx-sb__canvas-col {
	background: #0e1014;
}

html[data-fx-theme="dark"] .fx-sb__stage {
	background: #0e1014;
}

html[data-fx-theme="dark"] .fx-sb__stage::before {
	opacity: 0.22;
	background-image:
		radial-gradient(#3f4450 1.5px, transparent 1.5px),
		radial-gradient(#3f4450 1.5px, #0e1014 1.5px);
}

html[data-fx-theme="dark"] .fx-sb-toolrail {
	background: #1a1d21;
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.35),
		0 12px 32px rgba(0, 0, 0, 0.45);
}

html[data-fx-theme="dark"] .fx-sb-toolrail__sep {
	background: rgba(255, 255, 255, 0.12);
}

html[data-fx-theme="dark"] .fx-sb-toolrail__btn {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.78);
}

html[data-fx-theme="dark"] .fx-sb-toolrail__btn.is-active {
	background: #ffffff;
	border-color: transparent;
	color: #0b0d0f;
	box-shadow: none;
}

html[data-fx-theme="dark"] .fx-sb-toolrail__btn--accent:not(:disabled) {
	background: rgba(17, 24, 39, 0.14);
	border-color: var(--fx-blue);
	color: #93c5fd;
}

html[data-fx-theme="dark"] .fx-sb-toolrail__btn[data-fx-sb-clear]:not(:disabled) {
	color: #f87171;
	background: rgba(248, 113, 113, 0.12);
	border-color: rgba(248, 113, 113, 0.28);
}

html[data-fx-theme="dark"] .fx-sb-sticky__inner {
	background: #1a1d21;
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

html[data-fx-theme="dark"] .fx-sb-sticky__btn {
	color: #e5e7eb;
}

html[data-fx-theme="dark"] .fx-sb-sticky__btn:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.08);
}

html[data-fx-theme="dark"] .fx-sb-sticky__btn--danger {
	color: #f87171;
}

html[data-fx-theme="dark"] .fx-sb-sticky__btn--primary {
	background: #ffffff;
	color: #0b0d0f;
}

html[data-fx-theme="dark"] .fx-sb-sticky__btn--primary:hover:not(:disabled) {
	background: #e8eaed;
}

html[data-fx-theme="dark"] .fx-sb__params {
	background: rgba(17, 19, 24, 0.96);
	border-color: rgba(255, 255, 255, 0.08);
}

html[data-fx-theme="dark"] .fx-sb__panel {
	background: var(--fx-bg-panel);
	border-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-sb__charset {
	background: var(--fx-bg-panel);
	border-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-sb__charset-btn {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.85);
}

html[data-fx-theme="dark"] .fx-sb__charset-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-sb__charset-btn.is-active {
	background: var(--fx-blue);
	border-color: var(--fx-blue);
	color: var(--fx-on-blue);
}

html[data-fx-theme="dark"] .fx-sb__charset-apply {
	background: #ffffff;
	color: #000000;
}

html[data-fx-theme="dark"] .fx-sb__charset-apply:hover:not(:disabled) {
	background: #e5e5e5;
}

html[data-fx-theme="dark"] .fx-sb__hud {
	background: rgba(17, 19, 24, 0.94);
	border-color: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

html[data-fx-theme="dark"] .fx-sb__hud-label,
html[data-fx-theme="dark"] .fx-sb__hud-pct {
	color: rgba(255, 255, 255, 0.85);
}

html[data-fx-theme="dark"] .fx-sb__hud-btn {
	color: rgba(255, 255, 255, 0.72);
}

html[data-fx-theme="dark"] .fx-sb__hud-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-sb-rail {
	background: rgba(17, 19, 24, 0.94);
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

html[data-fx-theme="dark"] .fx-sb-rail__btn {
	color: rgba(255, 255, 255, 0.72);
}

html[data-fx-theme="dark"] .fx-sb-rail__btn:hover:not(:disabled),
html[data-fx-theme="dark"] .fx-sb-rail__btn:focus-visible:not(:disabled) {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-sb-rail__btn--accent:not(:disabled) {
	background: var(--fx-blue);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-sb-rail__tip {
	background: rgba(17, 19, 24, 0.98);
	border-color: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

html[data-fx-theme="dark"] .fx-sb-rail__sep {
	background: rgba(255, 255, 255, 0.14);
}

html[data-fx-theme="dark"] .fx-sb-rail__count {
	color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.06);
	border-radius: 8px;
}

html[data-fx-theme="dark"] .fx-sb__sheet-field select,
html[data-fx-theme="dark"] .fx-sb-assign__filter select,
html[data-fx-theme="dark"] .fx-sb-assign__input {
	background: var(--fx-bg-soft);
	border-color: var(--fx-border-strong);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-sb__sheet-field select option,
html[data-fx-theme="dark"] .fx-sb-assign__filter select option {
	background: #111318;
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-sb__empty.is-dragover {
	background: rgba(51, 102, 255, 0.12);
}

html[data-fx-theme="dark"] .fx-sb__busy,
html[data-fx-theme="dark"] .fx-vz__busy {
	background: rgba(11, 13, 15, 0.72);
}

html[data-fx-theme="dark"] .fx-sb__busy-card,
html[data-fx-theme="dark"] .fx-vz__busy-card {
	background: var(--fx-bg-panel);
	border-color: var(--fx-border-strong);
	color: var(--fx-text);
}

html[data-fx-theme="dark"] .fx-sb-assign {
	background: var(--fx-bg-panel);
	border-color: var(--fx-border-strong);
	color: var(--fx-text);
	box-shadow: var(--fx-shadow-panel);
}

html[data-fx-theme="dark"] .fx-sb-assign__char {
	background: var(--fx-bg-soft);
	border-color: var(--fx-border);
	color: var(--fx-text);
}

html[data-fx-theme="dark"] .fx-sb-assign__char:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.16);
}

html[data-fx-theme="dark"] .fx-sb-assign__char.is-active {
	background: var(--fx-blue);
	border-color: var(--fx-blue);
	color: #ffffff;
}

html[data-fx-theme="dark"] .fx-sb__status,
html[data-fx-theme="dark"] .fx-sb__hint,
html[data-fx-theme="dark"] .fx-sb__sheet-note,
html[data-fx-theme="dark"] .fx-sb__panel-sub {
	color: var(--fx-text-muted);
}

html[data-fx-theme="dark"] .fx-sb__chip {
	background: rgba(16, 185, 129, 0.18);
	color: #6ee7b7;
}

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

html,
body {
	margin: 0;
	height: 100%;
	overflow: hidden;
	background: var(--fx-bg);
	color: var(--fx-text);
	font-family: var(--fx-font);
	-webkit-font-smoothing: antialiased;
	accent-color: var(--fx-blue);
	cursor: var(--fx-cursor-v);
}

input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='button']):not([type='submit']),
textarea,
[contenteditable='true'] {
	cursor: text;
}

/* Global range — thin track + square thumb (app-wide) */
input[type='range'] {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 16px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	accent-color: transparent;
	--fx-range-pct: 0%;
	--fx-range-fill: #111827;
	--fx-range-track: rgba(15, 23, 42, 0.16);
	--fx-range-thumb: #111827;
}

html[data-fx-theme='dark'] input[type='range'] {
	--fx-range-fill: rgba(255, 255, 255, 0.78);
	--fx-range-track: rgba(255, 255, 255, 0.14);
	--fx-range-thumb: #ffffff;
}

input[type='range']:focus {
	outline: none;
}

input[type='range']:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-blue) 28%, transparent);
}

input[type='range']:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-blue) 28%, transparent);
}

input[type='range']::-webkit-slider-runnable-track {
	height: 2px;
	border: none;
	border-radius: 999px;
	background: linear-gradient(
		to right,
		var(--fx-range-fill) 0%,
		var(--fx-range-fill) var(--fx-range-pct),
		var(--fx-range-track) var(--fx-range-pct),
		var(--fx-range-track) 100%
	);
}

input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 12px;
	height: 12px;
	margin-top: -5px;
	border: none;
	border-radius: 3px;
	background: var(--fx-range-thumb);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
	cursor: pointer;
}

input[type='range']::-moz-range-track {
	height: 2px;
	border: none;
	border-radius: 999px;
	background: var(--fx-range-track);
}

input[type='range']::-moz-range-progress {
	height: 2px;
	border: none;
	border-radius: 999px;
	background: var(--fx-range-fill);
}

input[type='range']::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border: none;
	border-radius: 3px;
	background: var(--fx-range-thumb);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
	cursor: pointer;
}

input[type='range']:disabled {
	opacity: 0.42;
	cursor: not-allowed;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}

.fx-app {
	display: flex;
	flex-direction: column;
	height: 100%;
	background:
		radial-gradient(900px 420px at 12% -10%, var(--fx-app-glow-a), transparent 60%),
		radial-gradient(700px 380px at 92% 8%, var(--fx-app-glow-b), transparent 55%),
		var(--fx-bg);
	--fx-navrail-expanded-w: 232px;
	--fx-navrail-rail-w: 64px;
	--fx-navrail-w: var(--fx-navrail-expanded-w);
	--fx-navrail-current: var(--fx-navrail-w);
}

.fx-app[data-fx-navrail='collapsed'] {
	--fx-navrail-w: var(--fx-navrail-rail-w);
	--fx-navrail-current: var(--fx-navrail-rail-w);
}

/* ---- Title bar ---- */

.fx-titlebar {
	height: var(--fx-titlebar-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 0 10px 0 14px;
	margin-left: var(--fx-navrail-current);
	border-bottom: 1px solid var(--fx-border);
	background: var(--fx-titlebar-bg);
	backdrop-filter: blur(12px);
	-webkit-app-region: drag;
	user-select: none;
	z-index: 40;
	flex-shrink: 0;
	overflow: visible;
	position: relative;
	box-sizing: border-box;
}

.fx-titlebar__drag {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
	flex: 1;
	overflow: visible;
}

/* Brand lives in the left nav rail — hide duplicate titlebar logo (+ WEB/BETA badge). */
.fx-titlebar .fx-brand {
	display: none !important;
}

.fx-titlebar__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	margin-left: auto;
	-webkit-app-region: no-drag;
}

html[data-fx-surface='web'] .fx-titlebar__actions {
	min-width: 0;
	max-width: min(62vw, 720px);
	overflow: visible;
}

html[data-fx-surface='web'] .fx-titlebar__actions .fx-gb-chrome__cta {
	flex-shrink: 0;
}

.fx-titlebar__actions [data-fx-step].is-active {
	color: var(--fx-on-blue);
	border-color: var(--fx-blue);
	background: var(--fx-blue);
}

.fx-titlebar__actions [data-fx-step].is-active:hover {
	color: var(--fx-on-blue);
	background: var(--fx-blue);
}

.fx-titlebar__center {
	display: none;
	align-items: center;
	justify-content: center;
	flex: 1;
	min-width: 0;
	-webkit-app-region: no-drag;
}

html[data-fx-surface='web'] .fx-titlebar__center {
	display: flex;
}

html[data-fx-surface='web'] .fx-titlebar__center .fx-workflow-pill {
	flex-shrink: 1;
}

html[data-fx-surface='web'] .fx-titlebar__drag {
	flex: 0 1 auto;
}

/*
 * Web chrome:
 * full-height left nav rail; titlebar/shell offset beside it.
 * File / Edit / View / Help menubar matches Electron (Exit stays desktop-only).
 */
html[data-fx-surface='web'] .fx-menubar {
	display: flex;
}

html[data-fx-surface='web'] .fx-titlebar {
	display: flex;
}

html[data-fx-surface='web'] [data-fx-desktop-chrome] {
	display: none !important;
}

html[data-fx-surface='web'] .fx-web-signin:not([hidden]) {
	display: inline-flex;
}

html[data-fx-surface='web'] .fx-web-nav:not([hidden]) {
	display: block;
}

html[data-fx-surface='web'] .fx-shell__body > .fx-sidebar {
	position: relative;
	top: auto;
	left: auto;
	bottom: auto;
	height: auto;
	z-index: auto;
}

html[data-fx-surface='web'] .fx-workflow-bar {
	display: none;
}

html[data-fx-surface='web'] .fx-sidebar__head {
	display: none;
}

html[data-fx-surface='web'] .fx-sidebar__sys {
	display: none;
}

html[data-fx-surface='desktop'] .fx-sidebar__sys[data-fx-auth='signed-in'] {
	display: none;
}

html[data-fx-surface='desktop'] [data-fx-web-only],
html[data-fx-surface='desktop'] [data-menu-web-only] {
	display: none !important;
}

/* Variable font / multi-master UI is desktop-only. */
html[data-fx-surface='web'] [data-fx-desktop-only],
html[data-fx-surface='web'] [data-menu-desktop-only] {
	display: none !important;
}

html[data-fx-surface='web'] .fx-titlebar__account,
html[data-fx-surface='desktop'] .fx-titlebar__account {
	position: relative;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

html[data-fx-surface='web'] .fx-titlebar__account .fx-sidebar__sys-user,
html[data-fx-surface='desktop'] .fx-titlebar__account .fx-sidebar__sys-user {
	display: block;
	width: auto;
}

html[data-fx-surface='web'] .fx-titlebar__account .fx-sidebar__sys-user[hidden],
html[data-fx-surface='desktop'] .fx-titlebar__account .fx-sidebar__sys-user[hidden] {
	display: none;
}

html[data-fx-surface='web'] .fx-titlebar__account .fx-account__trigger .fx-account__plan-pill,
html[data-fx-surface='desktop'] .fx-titlebar__account .fx-account__trigger .fx-account__plan-pill {
	display: none;
}

html[data-fx-surface='web'] .fx-titlebar__account .fx-account__trigger,
html[data-fx-surface='desktop'] .fx-titlebar__account .fx-account__trigger {
	width: auto;
	min-height: 36px;
	padding: 4px 10px 4px 4px;
	border-radius: 10px;
	gap: 8px;
}

html[data-fx-surface='web'] .fx-titlebar__account .fx-account__avatar,
html[data-fx-surface='desktop'] .fx-titlebar__account .fx-account__avatar {
	width: 28px;
	height: 28px;
	font-size: 11px;
}

html[data-fx-surface='web'] .fx-titlebar__account .fx-account__name,
html[data-fx-surface='desktop'] .fx-titlebar__account .fx-account__name {
	font-size: 13px;
}

html[data-fx-surface='web'] .fx-titlebar__account .fx-account__popover,
html[data-fx-surface='desktop'] .fx-titlebar__account .fx-account__popover {
	left: auto;
	right: 0;
	bottom: auto;
	top: calc(100% + 8px);
	width: min(300px, calc(100vw - 24px));
}

.fx-sidebar__head {
	display: none;
}

.fx-help {
	position: relative;
	flex-shrink: 0;
}

.fx-theme-toggle {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--fx-border-strong);
	border-radius: 8px;
	background: var(--fx-bg-panel);
	color: var(--fx-text-muted);
	flex-shrink: 0;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fx-theme-toggle:hover {
	background: var(--fx-bg-soft);
	border-color: var(--fx-border-strong);
	color: var(--fx-text);
}

.fx-theme-toggle__icon {
	display: block;
	width: 16px;
	height: 16px;
}

.fx-theme-toggle__icon--sun {
	display: none;
}

.fx-web-signin {
	display: none;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 12px 0 10px;
	border: 0;
	border-radius: 8px;
	background: #111;
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.01em;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.15s ease, transform 0.12s ease;
}

.fx-web-signin:hover {
	background: #000;
}

.fx-web-signin:active {
	transform: scale(0.98);
}

.fx-web-signin__mark {
	width: 15px;
	height: 15px;
	display: block;
	filter: brightness(0) invert(1);
}

.fx-web-nav {
	display: none;
	position: relative;
	flex-shrink: 0;
}

.fx-web-nav__trigger {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--fx-border-strong);
	border-radius: 8px;
	background: var(--fx-bg-panel);
	color: var(--fx-text-muted);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fx-web-nav__trigger:hover,
.fx-web-nav.is-open .fx-web-nav__trigger {
	background: var(--fx-bg-soft);
	border-color: var(--fx-border-strong);
	color: var(--fx-text);
}

.fx-web-nav__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 80;
	min-width: 240px;
	padding: 8px;
	border: 1px solid var(--fx-border);
	border-radius: 14px;
	background: var(--fx-bg-panel);
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.fx-web-nav__menu[hidden],
.fx-web-nav__submenu[hidden] {
	display: none !important;
}

.fx-web-nav__label {
	margin: 4px 8px 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fx-text-faint, #9ca3af);
}

.fx-web-nav__item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 9px 10px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--fx-text);
	font: inherit;
	font-size: 13.5px;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.12s ease;
}

.fx-web-nav__item:hover,
.fx-web-nav__item:focus-visible {
	background: var(--fx-bg-soft);
	outline: none;
}

.fx-web-nav__icon {
	flex-shrink: 0;
	color: var(--fx-text-muted);
}

.fx-web-nav__item:hover .fx-web-nav__icon,
.fx-web-nav__item:focus-visible .fx-web-nav__icon {
	color: var(--fx-text);
}

.fx-web-nav__chevron {
	margin-left: auto;
	color: var(--fx-text-faint, #9ca3af);
}

.fx-web-nav__item--more {
	position: relative;
}

.fx-web-nav__sep {
	height: 1px;
	margin: 6px 4px;
	background: var(--fx-border);
}

.fx-web-nav__more {
	position: relative;
}

.fx-web-nav__submenu {
	position: absolute;
	top: 0;
	right: calc(100% + 6px);
	z-index: 81;
	min-width: 200px;
	padding: 8px;
	border: 1px solid var(--fx-border);
	border-radius: 14px;
	background: var(--fx-bg-panel);
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, 23, 42, 0.04);
}

.fx-help__trigger {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--fx-border-strong);
	border-radius: 8px;
	background: var(--fx-bg-panel);
	color: var(--fx-text-muted);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fx-help__trigger:hover,
.fx-help__trigger[aria-expanded="true"] {
	background: var(--fx-bg-soft);
	border-color: var(--fx-border-strong);
	color: var(--fx-text);
}

.fx-help__trigger-icon {
	display: block;
	width: 18px;
	height: 18px;
	opacity: 0.72;
	pointer-events: none;
}

.fx-help__trigger:hover .fx-help__trigger-icon,
.fx-help__trigger[aria-expanded="true"] .fx-help__trigger-icon {
	opacity: 1;
}

.fx-help__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 80;
	min-width: 196px;
	padding: 10px 8px 8px;
	border: 1px solid var(--fx-border);
	border-radius: 12px;
	background: var(--fx-bg-panel);
	box-shadow: var(--fx-shadow-panel);
}

.fx-help__menu[hidden] {
	display: none;
}

.fx-help__heading {
	margin: 0 8px 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--fx-border);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fx-text-faint);
}

.fx-help__item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 10px;
	border-radius: 8px;
	color: var(--fx-text);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.12s ease;
}

.fx-help__item:hover,
.fx-help__item:focus-visible {
	background: var(--fx-blue-soft);
	outline: none;
}

.fx-help__item-icon {
	display: block;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	opacity: 0.85;
	pointer-events: none;
}

.fx-brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.fx-brand__mark {
	display: block;
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.fx-brand__name {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--fx-text);
}

.fx-brand__badge {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fx-blue);
	background: var(--fx-blue-soft);
	border-radius: var(--fx-radius-pill);
	padding: 3px 8px;
}

.fx-menubar {
	display: flex;
	align-items: center;
	gap: 0;
	flex-shrink: 0;
	-webkit-app-region: no-drag;
}

.fx-menubar__root {
	position: relative;
}

.fx-menubar__trigger {
	padding: 6px 10px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--fx-text-secondary);
	background: transparent;
	transition: background 0.12s ease, color 0.12s ease;
}

.fx-menubar__trigger:hover,
.fx-menubar__root.is-open .fx-menubar__trigger {
	background: var(--fx-blue-soft);
	color: var(--fx-blue);
}

.fx-menubar__menu {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 120;
	min-width: 240px;
	padding: 6px;
	border: 1px solid var(--fx-border-strong);
	border-radius: var(--fx-radius-sm);
	background: var(--fx-bg-panel);
	box-shadow: var(--fx-shadow-panel);
	overflow: visible;
}

.fx-menubar__menu[hidden] {
	display: none;
}

.fx-menubar__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--fx-text);
	text-align: left;
	background: transparent;
	transition: background 0.12s ease, color 0.12s ease;
}

.fx-menubar__item:hover:not(:disabled),
.fx-menubar__item:focus-visible {
	outline: none;
	background: var(--fx-blue-soft);
	color: var(--fx-blue);
}

.fx-menubar__item:disabled {
	opacity: 0.4;
	cursor: var(--fx-cursor-v);
}

.fx-menubar__item--flyout {
	gap: 16px;
}

.fx-menubar__chevron {
	margin-left: auto;
	font-size: 16px;
	line-height: 1;
	color: var(--fx-text-faint);
}

.fx-menubar__flyout {
	position: relative;
}

.fx-menubar__flyout.is-open > .fx-menubar__item--flyout,
.fx-menubar__item--flyout:hover,
.fx-menubar__item--flyout:focus-visible {
	outline: none;
	background: var(--fx-blue-soft);
	color: var(--fx-blue);
}

.fx-menubar__submenu {
	position: absolute;
	/* Overlap parent so the pointer never crosses a dead gap */
	left: calc(100% - 2px);
	top: -6px;
	z-index: 130;
	min-width: 240px;
	padding: 6px;
	border: 1px solid var(--fx-border-strong);
	border-radius: var(--fx-radius-sm);
	background: var(--fx-bg-panel);
	box-shadow: var(--fx-shadow-panel);
}

/* Invisible bridge for diagonal mouse travel into the submenu */
.fx-menubar__submenu::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: -14px;
	width: 14px;
}

.fx-menubar__submenu[hidden] {
	display: none;
}

@media (max-width: 720px) {
	.fx-menubar__submenu {
		left: 8px;
		right: 8px;
		top: calc(100% + 4px);
		min-width: 0;
	}

	.fx-menubar__submenu::before {
		left: 0;
		right: 0;
		top: -10px;
		bottom: auto;
		width: auto;
		height: 10px;
	}
}

.fx-menubar__label {
	flex: 1;
}

.fx-menubar__shortcut {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: 500;
	color: var(--fx-text-faint);
	letter-spacing: 0.01em;
}

.fx-menubar__item:hover:not(:disabled) .fx-menubar__shortcut,
.fx-menubar__item:focus-visible .fx-menubar__shortcut {
	color: var(--fx-blue);
}

.fx-menubar__sep {
	height: 1px;
	margin: 4px 8px;
	background: var(--fx-border);
}

.fx-menubar__sep[hidden],
.fx-menubar__item[hidden] {
	display: none;
}

.fx-menubar[hidden] {
	display: none;
}

/* ---- Buttons ---- */

.fx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 38px;
	padding: 0 16px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.01em;
	transition: background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
}

.fx-btn--sm {
	height: 32px;
	padding: 0 14px;
	font-size: 12.5px;
}

.fx-btn--primary {
	background: var(--fx-blue);
	color: var(--fx-on-blue);
}

.fx-btn--primary:hover {
	background: var(--fx-blue-hover);
	color: var(--fx-on-blue);
}

/* Pro CTA — solid blue + light sweep */
@keyframes fx-pro-sweep {
	0% {
		left: -120%;
	}
	45%,
	100% {
		left: 140%;
	}
}

.fx-btn--pro {
	position: relative;
	overflow: hidden;
	border: 0;
	background: var(--fx-blue);
	color: var(--fx-on-blue);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.fx-btn--pro:hover {
	background: var(--fx-blue-hover);
	color: var(--fx-on-blue);
}

.fx-btn--pro::before {
	content: '';
	position: absolute;
	top: 0;
	left: -120%;
	width: 55%;
	height: 100%;
	background: linear-gradient(
		105deg,
		transparent 0%,
		rgba(255, 255, 255, 0.12) 35%,
		rgba(255, 255, 255, 0.7) 50%,
		rgba(255, 255, 255, 0.12) 65%,
		transparent 100%
	);
	transform: skewX(-18deg);
	animation: fx-pro-sweep 2.8s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

.fx-btn--pro > * {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.fx-btn--pro::before {
		animation: none;
	}
}

.fx-btn--ghost {
	background: transparent;
	color: var(--fx-text-secondary);
	border: 1px solid var(--fx-border-strong);
}

.fx-btn--ghost:hover {
	background: var(--fx-bg-soft);
	color: var(--fx-text);
}

/* ---- Window controls ---- */

.fx-window-controls {
	display: flex;
	align-items: stretch;
	margin-left: 4px;
	height: 32px;
	flex-shrink: 0;
	-webkit-app-region: no-drag;
	app-region: no-drag;
	z-index: 50;
	position: relative;
}

.fx-window-controls[hidden] {
	display: none !important;
}

.fx-window-controls__btn {
	width: 42px;
	display: grid;
	place-items: center;
	color: var(--fx-text-muted);
	border-radius: 8px;
	border: 0;
	background: transparent;
	cursor: pointer;
	-webkit-app-region: no-drag;
	app-region: no-drag;
	pointer-events: auto;
}

.fx-window-controls__btn svg {
	display: block;
	width: 12px;
	height: 12px;
	grid-area: 1 / 1;
}

.fx-window-controls__btn [data-window-maximize-icon="restore"] {
	display: none;
}

.fx-window-controls__btn.is-maximized [data-window-maximize-icon="maximize"] {
	display: none;
}

.fx-window-controls__btn.is-maximized [data-window-maximize-icon="restore"] {
	display: block;
}

.fx-window-controls__btn:hover {
	background: var(--fx-bg-soft);
	color: var(--fx-text);
}

.fx-window-controls__btn--close:hover {
	background: #ef4444;
	color: #fff;
}

/* ---- Shell ---- */

.fx-shell {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	position: relative;
	margin-left: var(--fx-navrail-current);
	min-width: 0;
	box-sizing: border-box;
}

.fx-shell__body {
	flex: 1;
	display: flex;
	min-height: 0;
	min-width: 0;
}

/* ---- Primary nav rail (StockStudio-style expand / collapse) ---- */

.fx-navrail {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--fx-navrail-current);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	padding: 12px 10px 14px;
	border-right: 1px solid var(--fx-border);
	background: #0b0d10;
	color: rgba(255, 255, 255, 0.78);
	z-index: 45;
	box-sizing: border-box;
	overflow: hidden;
	-webkit-app-region: no-drag;
}

.fx-app[data-fx-gate='home'] .fx-navrail {
	display: none !important;
}

.fx-app[data-fx-gate='home'] {
	--fx-navrail-current: 0px;
}

.fx-navrail__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 40px;
	margin-bottom: 10px;
	padding: 0 2px;
}

.fx-navrail__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1;
}

.fx-navrail__brand-mark {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border-radius: 6px;
}

.fx-navrail__brand-mark.is-spinning {
	animation: fx-navrail-logo-spin 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fx-navrail__brand-name {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fx-navrail__toggle {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.fx-navrail__toggle-icon--logo {
	display: none;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	object-fit: contain;
}

.fx-navrail__toggle-icon--logo.is-spinning {
	animation: fx-navrail-logo-spin 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fx-navrail__toggle:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.fx-app[data-fx-navrail='collapsed'] .fx-navrail__toggle-icon--collapse {
	display: none;
}

.fx-app[data-fx-navrail='collapsed'] .fx-navrail__toggle-icon--logo {
	display: block;
}

@keyframes fx-navrail-logo-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.fx-navrail__section {
	margin: 10px 8px 6px;
	padding: 0;
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.38);
	white-space: nowrap;
	overflow: hidden;
}

.fx-navrail__group,
.fx-navrail__steps {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	width: 100%;
	padding: 0;
}

.fx-navrail__spacer {
	flex: 0 0 8px;
	min-height: 8px;
}

.fx-navrail__btn {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
	min-height: 40px;
	padding: 0 10px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: rgba(255, 255, 255, 0.72);
	cursor: pointer;
	text-align: left;
	position: relative;
	transition:
		background 0.15s ease,
		color 0.15s ease;
}

.fx-navrail__btn[hidden] {
	display: none !important;
}

.fx-navrail__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.fx-navrail__icon--glyph {
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	font-family: var(--fx-font, inherit);
}

.fx-navrail__icon--sm {
	font-size: 10px;
	letter-spacing: -0.04em;
}

.fx-navrail__scroll {
	flex: 1;
	min-height: 0;
	overflow: auto;
	margin-top: 4px;
	padding-bottom: 4px;
}

.fx-navrail__label {
	flex: 1;
	min-width: 0;
	font-size: 13.5px;
	font-weight: 550;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fx-navrail__btn:hover {
	background: rgba(255, 255, 255, 0.07);
	color: #fff;
}

.fx-navrail__btn.is-active,
.fx-navrail__btn[aria-selected='true'] {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	box-shadow: none;
}

.fx-navrail__btn.is-active::before,
.fx-navrail__btn[aria-selected='true']::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--fx-blue);
}

.fx-navrail__btn.is-active:hover,
.fx-navrail__btn[aria-selected='true']:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.fx-navrail__btn--create {
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.04);
	margin-bottom: 2px;
}

.fx-navrail__btn--create:hover {
	border-color: rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

/* Collapsed = icon rail (still visible; expand grows to the right) */
.fx-app[data-fx-navrail='collapsed'] .fx-navrail {
	padding-left: 10px;
	padding-right: 10px;
	align-items: center;
}

.fx-app[data-fx-navrail='collapsed'] .fx-navrail__head {
	justify-content: center;
	padding: 0;
}

.fx-app[data-fx-navrail='collapsed'] .fx-navrail__brand-name,
.fx-app[data-fx-navrail='collapsed'] .fx-navrail__brand-mark,
.fx-app[data-fx-navrail='collapsed'] .fx-navrail__label,
.fx-app[data-fx-navrail='collapsed'] .fx-navrail__section {
	display: none;
}

.fx-app[data-fx-navrail='collapsed'] .fx-navrail__brand {
	display: none;
}

.fx-app[data-fx-navrail='collapsed'] .fx-navrail__group,
.fx-app[data-fx-navrail='collapsed'] .fx-navrail__steps {
	align-items: center;
}

.fx-app[data-fx-navrail='collapsed'] .fx-navrail__scroll {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.fx-app[data-fx-navrail='collapsed'] .fx-navrail__btn {
	width: 44px;
	min-height: 44px;
	padding: 0;
	justify-content: center;
	gap: 0;
}

.fx-app[data-fx-navrail='collapsed'] .fx-navrail__btn.is-active::before,
.fx-app[data-fx-navrail='collapsed'] .fx-navrail__btn[aria-selected='true']::before {
	display: none;
}

.fx-app[data-fx-navrail='collapsed'] .fx-navrail__btn--create {
	border-radius: 12px;
}

/* Navrail stays dark in both themes — invert logos so marks read on dark chrome. */
html[data-fx-theme='light'] .fx-navrail .fx-navrail__brand-mark,
html[data-fx-theme='light'] .fx-navrail .fx-navrail__toggle-icon--logo,
html[data-fx-theme='light'] .fx-navrail img[src*='/assets/logo.svg'] {
	filter: invert(1) brightness(1.2);
}

/* Active accent on dark rail: use blue even in light theme (app accent is black). */
html[data-fx-theme='light'] .fx-navrail__btn.is-active::before,
html[data-fx-theme='light'] .fx-navrail__btn[aria-selected='true']::before {
	background: #3366ff;
}

.fx-workflow-bar {
	display: none !important;
}

html[data-fx-surface='web'] .fx-titlebar__center {
	display: none;
}

/* ---- All Glyphs FontLab-style status bar ---- */

.fx-glyph-statusbar {
	flex-shrink: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	min-height: 36px;
	padding: 0 12px;
	border-top: 1px solid var(--fx-border-strong);
	background: var(--fx-bg-soft);
	color: var(--fx-text-secondary);
	font-size: 12px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	user-select: none;
}

.fx-glyph-statusbar__group {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.fx-glyph-statusbar__group--left {
	justify-self: start;
}

.fx-glyph-statusbar__group--center {
	justify-self: center;
	gap: 10px;
	padding: 0 4px;
}

.fx-glyph-statusbar__group--right {
	justify-self: end;
}

.fx-glyph-statusbar__label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fx-text-faint);
}

.fx-glyph-statusbar__value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 14ch;
	color: var(--fx-text);
	font-weight: 600;
}

.fx-glyph-statusbar__char {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: var(--fx-text);
}

.fx-glyph-statusbar__mono {
	font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-text-secondary);
	letter-spacing: 0.02em;
}

.fx-glyph-statusbar__sep {
	width: 1px;
	height: 14px;
	background: var(--fx-border-strong);
	flex-shrink: 0;
}

.fx-glyph-statusbar__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	border: 1px solid transparent;
	color: var(--fx-text-muted);
	font-size: 16px;
	line-height: 1;
}

.fx-glyph-statusbar__nav:hover {
	background: #ffffff;
	border-color: var(--fx-border);
	color: var(--fx-text);
}

.fx-glyph-statusbar__nav:disabled {
	opacity: 0.35;
	cursor: var(--fx-cursor-v);
}

.fx-glyph-statusbar__check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 2px 8px;
	border-radius: 6px;
	border: 1px solid transparent;
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-text-secondary);
	cursor: pointer;
	user-select: none;
}

.fx-glyph-statusbar__check:hover {
	background: rgba(15, 23, 42, 0.04);
	border-color: var(--fx-border);
	color: var(--fx-text);
}

.fx-glyph-statusbar__check input {
	width: 13px;
	height: 13px;
	margin: 0;
	accent-color: var(--fx-blue, #111827);
	cursor: pointer;
}

.fx-glyph-statusbar--editor {
	position: relative;
	z-index: 30;
	background: #121212;
	border-top-color: rgba(255, 255, 255, 0.08);
	color: #aaaaaa;
	pointer-events: auto;
}

.fx-glyph-statusbar--editor .fx-glyph-statusbar__label {
	color: #888888;
}

.fx-glyph-statusbar--editor .fx-glyph-statusbar__char,
.fx-glyph-statusbar--editor .fx-glyph-statusbar__mono,
.fx-glyph-statusbar--editor .fx-glyph-statusbar__check {
	color: #dddddd;
	pointer-events: auto;
}

.fx-glyph-statusbar--editor .fx-glyph-statusbar__char {
	color: #ffffff;
	font-weight: 700;
}

.fx-glyph-statusbar--editor .fx-glyph-statusbar__sep {
	background: rgba(255, 255, 255, 0.14);
}

.fx-glyph-statusbar--editor .fx-glyph-statusbar__nav {
	color: #bbbbbb;
	pointer-events: auto;
}

.fx-glyph-statusbar--editor .fx-glyph-statusbar__nav:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.12);
	color: #ffffff;
}

.fx-glyph-statusbar--editor .fx-glyph-statusbar__check {
	cursor: pointer;
}

.fx-glyph-statusbar--editor .fx-glyph-statusbar__check:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

.fx-glyph-statusbar--editor .fx-glyph-statusbar__check input {
	pointer-events: auto;
	cursor: pointer;
	accent-color: #3366ff;
}

html[data-fx-theme="dark"] .fx-glyph-statusbar:not(.fx-glyph-statusbar--editor) {
	background: var(--fx-bg-soft);
	border-top-color: var(--fx-border-strong);
}

html[data-fx-theme="dark"] .fx-glyph-statusbar__nav:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.1);
	color: #ffffff;
}

/* ---- Sidebar (StockStudio-style nav) ---- */

.fx-sidebar {
	width: var(--fx-sidebar-w);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	min-height: 0;
	border-right: 1px solid var(--fx-border);
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: width 0.18s ease;
	overflow: hidden;
}

.fx-shell[data-fx-sidebar='rail'] {
	--fx-sidebar-w: var(--fx-sidebar-rail-w, 56px);
}

.fx-shell[data-fx-sidebar='rail'] .fx-sidebar {
	width: var(--fx-sidebar-rail-w, 56px);
}

.fx-shell[data-fx-sidebar='rail'] .fx-sidebar__label,
.fx-shell[data-fx-sidebar='rail'] .fx-cat-item__label,
.fx-shell[data-fx-sidebar='rail'] .fx-sys-item__label,
.fx-shell[data-fx-sidebar='rail'] .fx-account__meta,
.fx-shell[data-fx-sidebar='rail'] .fx-sidebar__editor-head,
.fx-shell[data-fx-sidebar='rail'] .fx-vz-glyphs__head,
.fx-shell[data-fx-sidebar='rail'] .fx-vz-glyphs__active,
.fx-shell[data-fx-sidebar='rail'] .fx-vz-glyphs__title,
.fx-shell[data-fx-sidebar='rail'] .fx-vz-glyphs__count {
	display: none !important;
}

.fx-shell[data-fx-sidebar='rail'] .fx-sidebar__section {
	padding: 10px 6px;
}

.fx-shell[data-fx-sidebar='rail'] .fx-sidebar__filter-row {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 4px;
}

.fx-shell[data-fx-sidebar='rail'] .fx-sidebar__filter {
	padding: 0;
	min-height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	font-size: 10px;
	letter-spacing: -0.02em;
}

.fx-shell[data-fx-sidebar='rail'] .fx-sidebar__categories {
	padding: 8px 6px;
}

.fx-shell[data-fx-sidebar='rail'] .fx-cat-nav {
	align-items: center;
	gap: 4px;
}

.fx-shell[data-fx-sidebar='rail'] .fx-cat-item {
	width: 40px;
	min-height: 40px;
	padding: 0;
	justify-content: center;
	gap: 0;
	border-radius: 10px;
}

.fx-shell[data-fx-sidebar='rail'] .fx-cat-nav > .fx-cat-item--accent {
	margin-bottom: 4px;
}

.fx-shell[data-fx-sidebar='rail'] .fx-sidebar__glyphs {
	padding: 0;
	overflow: hidden;
}

.fx-shell[data-fx-sidebar='rail'] .fx-vz-glyphs {
	border: 0;
	background: transparent;
	padding: 6px 4px;
}

.fx-shell[data-fx-sidebar='rail'] .fx-vz-glyphs__grid {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	overflow: auto;
}

.fx-shell[data-fx-sidebar='rail'] .fx-vz-glyphs__grid .fx-vz-glyph {
	width: 40px;
	height: 40px;
	min-width: 40px;
	padding: 0;
	font-size: 14px;
}

.fx-shell[data-fx-sidebar='rail'] .fx-sidebar__sys {
	padding: 8px 6px;
	align-items: center;
}

.fx-shell[data-fx-sidebar='rail'] .fx-sidebar__sys-guest,
.fx-shell[data-fx-sidebar='rail'] .fx-sidebar__sys-user {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.fx-shell[data-fx-sidebar='rail'] .fx-sys-item {
	width: 40px;
	min-height: 40px;
	padding: 0;
	justify-content: center;
	gap: 0;
}

.fx-shell[data-fx-sidebar='rail'] .fx-sys-item::before {
	display: none;
}

.fx-shell[data-fx-sidebar='rail'] .fx-account {
	width: 100%;
	display: flex;
	justify-content: center;
}

.fx-shell[data-fx-sidebar='rail'] .fx-account__trigger {
	width: 40px;
	min-height: 40px;
	padding: 0;
	justify-content: center;
	gap: 0;
}

.fx-shell[data-fx-sidebar='rail'] .fx-account__avatar {
	margin: 0;
}

.fx-sidebar__section {
	flex-shrink: 0;
	padding: 12px 16px;
	border-bottom: 1px solid var(--fx-border);
}

.fx-sidebar__label {
	margin: 0 0 8px;
	padding: 0 2px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fx-text-faint);
}

.fx-sidebar__filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.fx-sidebar__filter {
	padding: 5px 10px;
	border: 1px solid var(--fx-border);
	border-radius: var(--fx-radius-pill);
	background: var(--fx-bg-panel);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--fx-text-muted);
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.fx-sidebar__filter:hover {
	border-color: var(--fx-blue-ring);
	color: var(--fx-text);
}

.fx-sidebar__filter.is-active {
	border-color: var(--fx-blue-ring);
	background: var(--fx-blue-soft);
	color: var(--fx-blue);
}

.fx-sidebar__categories {
	display: none;
	flex: 1;
	min-height: 0;
	flex-direction: column;
	padding: 14px 12px 12px;
	overflow: auto;
	border-bottom: 1px solid var(--fx-border);
}

.fx-sidebar__categories .fx-sidebar__label {
	margin: 0 6px 10px;
}

.fx-cat-nav > .fx-sidebar__label {
	margin: 12px 6px 8px;
}

.fx-cat-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fx-cat-nav > .fx-cat-item--accent {
	margin-bottom: 2px;
}

.fx-cat-nav > .fx-cat-item--accent + .fx-cat-item {
	margin-top: 2px;
}

.fx-cat-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 42px;
	padding: 8px 10px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--fx-text-secondary);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}

.fx-cat-item:hover {
	background: var(--fx-bg-soft);
	color: var(--fx-text);
}

.fx-cat-item.is-active {
	background: var(--fx-blue-soft);
	color: var(--fx-blue);
	font-weight: 600;
}

.fx-cat-item--accent {
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	border: 0;
	background: var(--fx-blue);
	color: var(--fx-on-blue);
	font-weight: 700;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		inset 0 -1px 0 rgba(0, 0, 0, 0.12),
		0 1px 2px rgba(0, 0, 0, 0.2);
}

.fx-cat-item--accent:hover {
	background: var(--fx-blue-hover);
	color: var(--fx-on-blue);
}

.fx-cat-item__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--fx-bg-soft);
	color: inherit;
}

.fx-cat-item.is-active .fx-cat-item__icon {
	background: var(--fx-blue-tint);
	color: var(--fx-blue);
}

.fx-cat-item--accent .fx-cat-item__icon {
	width: auto;
	height: auto;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
}

.fx-cat-item__icon--glyph {
	font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.fx-cat-item__icon--sm {
	font-size: 9px;
	letter-spacing: 0.04em;
}

.fx-cat-item__label {
	min-width: 0;
	line-height: 1.25;
}

.fx-sidebar__sys {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 10px 12px;
	border-top: 1px solid var(--fx-border);
	background: rgba(255, 255, 255, 0.55);
	overflow: visible;
	position: relative;
	z-index: 20;
}

.fx-sys-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 40px;
	padding: 8px 10px 8px 12px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--fx-text-secondary);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}

.fx-sys-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 999px;
	background: transparent;
	transition: background 0.12s ease;
}

.fx-sys-item:hover {
	background: var(--fx-bg-soft);
	color: var(--fx-text);
}

.fx-sys-item.is-active,
.fx-sys-item:focus-visible {
	background: var(--fx-blue-soft);
	color: var(--fx-blue);
	outline: none;
}

.fx-sys-item.is-active::before,
.fx-sys-item:focus-visible::before {
	background: var(--fx-blue);
}

.fx-sys-item__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 22px;
	height: 22px;
	color: inherit;
}

.fx-sys-item__icon svg {
	display: block;
}

.fx-sys-item[data-fx-action="settings"] .fx-sys-item__icon svg {
	width: 20px;
	height: 20px;
	transform: scale(1.08);
}

.fx-sys-item__label {
	min-width: 0;
	line-height: 1.25;
}

.fx-sys-item--danger {
	color: #dc2626;
}

.fx-sys-item--danger:hover,
.fx-sys-item--danger:focus-visible {
	background: #fef2f2;
	color: #b91c1c;
}

.fx-sys-item--danger::before {
	display: none;
}

.fx-sidebar__sys-user {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fx-sidebar__sys-user[hidden],
.fx-sidebar__sys-guest[hidden] {
	display: none;
}

.fx-account {
	position: relative;
}

.fx-account__trigger {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--fx-border);
	border-radius: 12px;
	background: var(--fx-bg-panel);
	text-align: left;
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease;
}

.fx-account__chevron {
	display: none;
	flex: none;
	margin-left: auto;
	color: var(--fx-text-muted);
	opacity: 0.85;
}

html[data-fx-surface='web'] .fx-account__chevron,
html[data-fx-surface='desktop'] .fx-titlebar__account .fx-account__chevron {
	display: block;
}

.fx-account__trigger:hover,
.fx-account__trigger[aria-expanded="true"] {
	background: var(--fx-bg-soft);
	border-color: var(--fx-blue-ring);
}

.fx-account__avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: linear-gradient(135deg, #111827, #4b5563);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.02em;
	overflow: hidden;
}

.fx-account__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fx-account__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.fx-account__name {
	font-size: 13px;
	font-weight: 700;
	color: var(--fx-text);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fx-account__plan-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	width: fit-content;
	padding: 2px 8px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 10px;
	background: #fff;
	color: var(--fx-text-muted);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
}

.fx-account__plan-pill[hidden] {
	display: none !important;
}

.fx-account__plan-pill--lg {
	padding: 4px 10px;
	font-size: 12px;
}

.fx-account__popover {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% + 8px);
	z-index: 90;
	padding: 6px;
	border: 1px solid var(--fx-border);
	border-radius: 16px;
	background: var(--fx-bg-panel);
	box-shadow: var(--fx-shadow-panel);
	min-width: 280px;
	overflow: visible;
}

.fx-account__popover[hidden] {
	display: none;
}

.fx-account__popover-head {
	padding: 12px 12px 10px;
}

.fx-account__popover-identity {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.fx-account__popover-name {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--fx-text);
}

.fx-account__popover-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: rgba(11, 13, 15, 0.08);
	color: var(--fx-text);
	line-height: 1.4;
}

.fx-account__popover-badge.is-pro {
	background: #0b0d0f;
	color: #fff;
}

.fx-account__popover-email {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--fx-text-muted);
	word-break: break-all;
}

.fx-account__popover-billing {
	margin: 8px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-text);
}

.fx-account__popover-remaining {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 2px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--fx-text-muted);
}

.fx-account__popover-remaining [data-fx-account-remaining] {
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: normal;
	letter-spacing: -0.01em;
	color: var(--fx-text);
}

.fx-account__popover-remaining.is-warn [data-fx-account-remaining],
.fx-account__popover-remaining.is-warn {
	color: #b45309;
}

.fx-account__popover-remaining.is-expired [data-fx-account-remaining],
.fx-account__popover-remaining.is-expired {
	color: #dc2626;
}

.fx-account__popover-remaining-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: currentColor;
}

.fx-account__popover-remaining.is-warn {
	color: #b45309;
}

.fx-account__popover-remaining.is-expired {
	color: #dc2626;
}

.fx-account__promo {
	margin-top: 12px;
	padding: 12px;
	border-radius: 12px;
	background: var(--fx-bg-soft);
	border: 1px solid var(--fx-border);
}

.fx-account__promo-text {
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--fx-text-secondary);
}

.fx-account__promo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	min-height: 34px;
	padding: 0 12px;
	border: 0;
	border-radius: 10px;
	background: #e8eaed;
	color: #111;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.fx-account__promo-btn:hover {
	background: #f3f4f6;
}

.fx-account__popover-section {
	padding: 4px;
	border-top: 1px solid var(--fx-border);
}

.fx-account__popover-signout {
	padding: 4px;
	border-top: 1px solid var(--fx-border);
}

.fx-account__item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 40px;
	padding: 8px 10px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--fx-text);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.fx-account__item[hidden] {
	display: none !important;
}

.fx-account__item svg {
	flex: none;
	color: var(--fx-text-muted);
}

.fx-account__item:hover,
.fx-account__item:focus-visible {
	background: var(--fx-bg-soft);
	outline: none;
}

.fx-account__item-hint {
	margin-left: auto;
	font-size: 11px;
	font-weight: 600;
	color: var(--fx-text-faint);
}

.fx-account__item-ext {
	margin-left: auto;
	color: var(--fx-text-faint);
}

.fx-account__item-chevron {
	margin-left: auto;
	color: var(--fx-text-faint);
	flex: none;
}

.fx-account__submenu-wrap {
	position: relative;
}

.fx-account__submenu-wrap.is-open > .fx-account__item--submenu,
.fx-account__item--submenu:hover,
.fx-account__item--submenu:focus-visible {
	background: var(--fx-bg-soft);
}

.fx-account__submenu {
	position: absolute;
	/* Overlap parent so the pointer never crosses a dead gap */
	right: calc(100% - 2px);
	top: 0;
	z-index: 95;
	min-width: 168px;
	padding: 6px;
	border: 1px solid var(--fx-border);
	border-radius: 14px;
	background: var(--fx-bg-panel);
	box-shadow: var(--fx-shadow-panel);
}

/* Invisible bridge toward the parent row (submenu opens to the left) */
.fx-account__submenu::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: -14px;
	width: 14px;
}

.fx-account__submenu[hidden] {
	display: none;
}

.fx-account__submenu .fx-account__item.is-active {
	background: var(--fx-bg-soft);
}

html[data-fx-theme="dark"] .fx-account__submenu {
	background: var(--fx-bg-panel);
	border-color: var(--fx-border);
}

@media (max-width: 720px) {
	.fx-account__submenu {
		right: 0;
		left: 0;
		top: calc(100% + 4px);
		min-width: 0;
	}

	.fx-account__submenu::before {
		left: 0;
		right: 0;
		top: -10px;
		bottom: auto;
		width: auto;
		height: 10px;
	}
}

.fx-account__item--danger {
	color: #ef4444;
}

.fx-account__item--danger svg {
	color: #ef4444;
}

.fx-sidebar__glyphs {
	flex: 1;
	min-height: 0;
	display: none;
	flex-direction: column;
	overflow: hidden;
}

.fx-shell[data-fx-step="vectorize"] .fx-sidebar__glyphs {
	display: flex;
}

.fx-shell[data-fx-step="kerning"] .fx-sidebar__glyphs {
	display: none !important;
}

.fx-shell[data-fx-step="allglyphs"] .fx-sidebar__filters {
	display: none;
}

.fx-shell[data-fx-step="allglyphs"] .fx-sidebar {
	display: none !important;
}

.fx-shell[data-fx-step="kerning"] .fx-sidebar__filters,
.fx-shell[data-fx-step="preview"] .fx-sidebar__filters,
.fx-shell[data-fx-step="preview"] .fx-sidebar__glyphs,
.fx-shell[data-fx-step="vectorize"] .fx-sidebar__categories,
.fx-shell[data-fx-step="kerning"] .fx-sidebar__categories,
.fx-shell[data-fx-step="preview"] .fx-sidebar__categories {
	display: none;
}

.fx-sidebar__glyphs .fx-vz-glyphs {
	flex: 1;
	min-height: 0;
	padding: 12px 12px 8px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.fx-sidebar__editor-head {
	display: none;
	flex-shrink: 0;
	flex-direction: column;
	gap: 4px;
	padding: 16px 16px 12px;
	border-bottom: 1px solid var(--fx-border);
}

.fx-shell[data-fx-step="vectorize"] .fx-sidebar__editor-head {
	display: flex;
}

.fx-sidebar__editor-title {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: var(--fx-text);
}

.fx-sidebar__editor-sub {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--fx-text-muted);
}

/* ---- Workspace ---- */

.fx-workspace {
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: var(--fx-bg);
}

.fx-workflow-bar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	padding: 8px 12px;
	min-height: 52px;
	border-bottom: 1px solid var(--fx-border);
	background: #ffffff;
}

.fx-sidebar-toggle {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--fx-border-strong);
	border-radius: 8px;
	background: #ffffff;
	color: var(--fx-text-muted);
	cursor: pointer;
	transition:
		background 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

.fx-sidebar-toggle:hover {
	color: var(--fx-text);
	border-color: #93c5fd;
	background: #eff6ff;
}

.fx-sidebar-toggle[aria-pressed='true'] {
	color: var(--fx-blue);
	border-color: var(--fx-blue-ring);
	background: var(--fx-blue-soft);
}

.fx-sidebar-toggle svg {
	display: block;
}

.fx-workflow-pill {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	width: auto;
	max-width: 100%;
	min-width: 0;
	padding: 3px;
	border: 1px solid var(--fx-border-strong);
	border-radius: var(--fx-radius-pill);
	background: #ffffff;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.fx-workflow-pill__btn {
	padding: 6px 14px;
	border: 0;
	border-radius: var(--fx-radius-pill);
	background: transparent;
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-text-muted);
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.fx-workflow-pill__btn:hover {
	color: var(--fx-text);
	background: transparent;
}

.fx-workflow-pill__btn.is-active {
	background: var(--fx-blue);
	color: var(--fx-on-blue);
	border-bottom-color: transparent;
}

.fx-workflow-pill__btn.is-active:hover {
	background: var(--fx-blue-hover);
	color: var(--fx-on-blue);
}

.fx-workspace .fx-overview__panel {
	height: 100%;
	display: flex;
	flex-direction: column;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: #ffffff;
}

.fx-workspace .fx-kern {
	gap: 0;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr) auto;
}

.fx-workspace .fx-kern__spacing {
	grid-column: 1 / -1;
	border: 0;
	border-bottom: 1px solid var(--fx-border);
	border-top: 1px solid var(--fx-border);
	border-radius: 0;
	box-shadow: none;
	background: #ffffff;
}

.fx-workspace .fx-kern__focus-wrap {
	border-radius: 0;
	border: 0;
	border-bottom: 1px solid var(--fx-border);
	background: #ffffff;
	min-height: 560px;
}

.fx-workspace .fx-kern__focus {
	border-radius: 0;
	border: 0;
	background: transparent;
	flex: 1 1 auto;
	height: auto;
	min-height: 560px;
}

.fx-workspace .fx-kern__pair-under {
	background: #ffffff;
	border-top-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-workspace .fx-kern__focus-wrap {
	background: var(--fx-bg-panel, #0b0d0f);
}

html[data-fx-theme="dark"] .fx-workspace .fx-kern__pair-under {
	background: var(--fx-bg-panel, #0b0d0f);
}

.fx-workspace .fx-kern__main,
.fx-workspace .fx-kern__adjust {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: #ffffff;
}

.fx-workspace .fx-kern__adjust {
	grid-row: 1;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--fx-border);
	border-radius: 0;
	box-shadow: none;
	background: #ffffff;
}

.fx-workspace .fx-kern__adjust-head {
	padding: 10px 18px;
}

.fx-workspace .fx-kern__main {
	border-top: 1px solid var(--fx-border);
}

.fx-workspace .fx-export {
	padding: 18px 20px 20px;
}

.fx-breadcrumb-bar,
.fx-breadcrumb {
	display: none !important;
}

.fx-breadcrumb__badge {
	display: none !important;
}

html[data-fx-theme='dark'] .fx-breadcrumb__badge {
	display: none !important;
}

/* ---- Doc chrome (open glyph tabs) ---- */

.fx-docchrome {
	flex-shrink: 0;
	margin-left: var(--fx-navrail-current);
	border-bottom: 1px solid var(--fx-border);
	background: var(--fx-bg-panel, #fff);
	z-index: 35;
}

.fx-docchrome[hidden] {
	display: none !important;
}

/* Keep titlebar chrome on the home gate; hide crumb + tabs. */
.fx-app[data-fx-gate='home'] .fx-docchrome {
	display: none !important;
}

.fx-app[data-fx-gate='home'] .fx-doc-tabs {
	visibility: hidden;
	pointer-events: none;
}

.fx-doc-tabs {
	display: flex;
	align-items: stretch;
	min-height: 34px;
	padding: 0 12px;
	background: var(--fx-bg-soft, #f5f7fa);
}

.fx-doc-tabs[hidden] {
	display: none;
}

.fx-doc-tabs__scroll {
	display: flex;
	align-items: stretch;
	gap: 4px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: thin;
}

.fx-doc-tabs__tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: 220px;
	height: 28px;
	margin-top: 4px;
	padding: 0 10px 0 8px;
	border: 1px solid transparent;
	border-bottom: none;
	border-radius: 8px 8px 0 0;
	background: transparent;
	color: var(--fx-text-muted);
	font-size: 12px;
	font-weight: 550;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition:
		color 0.12s ease,
		background 0.12s ease,
		border-color 0.12s ease;
}

.fx-doc-tabs__tab:hover {
	color: var(--fx-text);
	background: rgba(15, 23, 42, 0.04);
}

.fx-doc-tabs__tab.is-active {
	color: var(--fx-text);
	background: var(--fx-bg-panel, #fff);
	border-color: var(--fx-border);
}

.fx-doc-tabs__icon {
	display: grid;
	place-items: center;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: var(--fx-blue);
}

.fx-doc-tabs__icon svg {
	width: 14px;
	height: 14px;
}

.fx-doc-tabs__glyph-icon {
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	border: 1px solid var(--fx-border-strong);
	border-radius: 3px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	color: var(--fx-text);
	background: #fff;
}

.fx-doc-tabs__label {
	overflow: hidden;
	text-overflow: ellipsis;
}

.fx-doc-tabs__close {
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	margin-left: 2px;
	padding: 0;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--fx-text-muted);
	opacity: 0;
	cursor: pointer;
	transition:
		opacity 0.12s ease,
		color 0.12s ease,
		background 0.12s ease;
}

.fx-doc-tabs__tab:hover .fx-doc-tabs__close,
.fx-doc-tabs__tab.is-active .fx-doc-tabs__close {
	opacity: 1;
}

.fx-doc-tabs__close:hover {
	color: var(--fx-text);
	background: rgba(15, 23, 42, 0.08);
}

.fx-doc-tabs__close svg {
	width: 10px;
	height: 10px;
}

html[data-fx-theme='dark'] .fx-docchrome {
	background: #12151a;
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-fx-theme='dark'] .fx-doc-tabs {
	background: rgba(0, 0, 0, 0.22);
	border-top-color: rgba(255, 255, 255, 0.08);
}

html[data-fx-theme='dark'] .fx-doc-tabs__tab.is-active {
	background: #0a0b0d;
	border-color: rgba(255, 255, 255, 0.1);
	color: #fff;
}

html[data-fx-theme='dark'] .fx-doc-tabs__glyph-icon {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.16);
	color: #fff;
}

html[data-fx-theme='dark'] .fx-breadcrumb__current {
	color: #fff;
}

.fx-pill {
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-blue);
	background: var(--fx-blue-soft);
	border-radius: var(--fx-radius-pill);
	padding: 5px 10px;
}

.fx-pill--soft {
	color: var(--fx-text-muted);
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid var(--fx-border);
}

/* ---- Views / placeholders ---- */

.fx-view {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.fx-view[hidden] {
	display: none !important;
}

.fx-placeholder {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 8px;
	padding: 40px 36px;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	border: 1px solid var(--fx-border);
	border-radius: var(--fx-radius-lg);
	box-shadow: var(--fx-shadow-panel);
}

.fx-placeholder__kicker {
	margin: 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fx-blue);
}

.fx-placeholder__title {
	margin: 0;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.04em;
	color: var(--fx-text);
}

.fx-placeholder__body {
	margin: 4px 0 0;
	max-width: 42ch;
	font-size: 14px;
	line-height: 1.55;
	color: var(--fx-text-muted);
}

/* ---- Glyph Editor ---- */

.fx-vz-layout {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.fx-vz-glyphs {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 14px 12px 12px;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	border: 1px solid var(--fx-border);
	border-radius: var(--fx-radius-lg);
	box-shadow: var(--fx-shadow-panel);
}

.fx-vz-glyphs__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 0 4px 2px;
}

.fx-vz-glyphs__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--fx-text);
}

.fx-vz-glyphs__count {
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-text-muted);
	font-variant-numeric: tabular-nums;
}

.fx-vz-glyphs__active {
	margin: 4px 4px 12px;
	font-size: 12px;
	font-weight: 500;
	color: var(--fx-blue);
}

.fx-vz-glyphs__grid {
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding: 2px 4px 6px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	align-content: start;
}

.fx-vz-glyphs__grid::-webkit-scrollbar {
	width: 8px;
}

.fx-vz-glyphs__grid::-webkit-scrollbar-thumb {
	background: rgba(15, 23, 42, 0.16);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
}

.fx-vz-glyph {
	position: relative;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	border: 1px solid var(--fx-border-strong);
	background: var(--fx-bg-panel);
	box-shadow: var(--fx-shadow-card);
	font-size: 1.45rem;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--fx-text-faint);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.fx-vz-glyph:hover {
	border-color: var(--fx-blue-ring);
	background: var(--fx-bg-card-hover);
	color: var(--fx-text-secondary);
}

.fx-vz-glyph.is-filled {
	color: var(--fx-text);
	background: #f8fbff;
}

.fx-vz-glyph.is-selected {
	border-color: var(--fx-blue);
	box-shadow: none;
	color: var(--fx-text);
	background: #ffffff;
}

.fx-vz-glyph.is-filled::after {
	content: '';
	position: absolute;
	top: 6px;
	right: 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--fx-blue);
}

.fx-vz-glyph.has-preview {
	padding: 12%;
}

.fx-glyph-preview {
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	color: #111827;
}

.fx-vz-glyph .fx-glyph-preview--ghost {
	opacity: 0.28;
	color: var(--fx-text-faint);
}

.fx-glyph-preview__ghost-mark {
	opacity: 0.35;
	pointer-events: none;
}

.fx-glyph-card__glyph {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	font-size: clamp(1.5rem, 4vw, 2.35rem);
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--fx-text);
	user-select: none;
}

.fx-glyph-card__glyph--preview {
	padding: 6% 8%;
}

.fx-glyph-card__glyph--preview .fx-glyph-preview {
	width: 100%;
	height: 100%;
	max-height: 86%;
	margin: auto;
	display: block;
}

.fx-glyph-card__glyph--preview .fx-glyph-preview--ghost {
	overflow: visible;
	opacity: 0.28;
	color: var(--fx-text-faint);
}

.fx-glyph-card__host--empty .fx-glyph-card__glyph {
	color: var(--fx-text-faint);
	font-weight: 600;
}

.fx-glyph-card__host--empty .fx-glyph-preview--ghost {
	opacity: 0.28;
}

.fx-vz {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
	gap: 0;
}

.fx-vz__canvas-col {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 0;
	min-width: 0;
	background: #f8fafc;
}

.fx-vz__panel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 16px;
	background: #ffffff;
	border-left: 1px solid var(--fx-border);
	overflow: auto;
}

.fx-vz__panel-top {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--fx-border);
}

.fx-vz__panel-title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--fx-text);
}

.fx-vz__panel-sub {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--fx-text-muted);
}

.fx-vz__section {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fx-vz__section-label {
	margin: 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fx-text-faint);
}

.fx-vz__toggles--compact {
	padding-top: 0;
}

.fx-vz__panel-head {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fx-vz__kicker {
	margin: 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fx-blue);
}

.fx-vz__title {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.04em;
	color: var(--fx-text);
}

.fx-vz__sub {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--fx-text-muted);
}

.fx-vz__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fx-vz__actions .fx-btn {
	width: 100%;
}

.fx-vz__worksheet {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 0 2px;
	border-top: 1px solid var(--fx-border);
}

.fx-vz__worksheet-hint {
	margin: 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--fx-text-muted);
}

.fx-vz__worksheet-status {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--fx-blue);
	font-weight: 600;
}

.fx-vz__worksheet-status[hidden] {
	display: none;
}

.fx-vz__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fx-vz__field-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-text-secondary);
}

.fx-vz__field-label strong {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	color: var(--fx-blue);
}

.fx-vz__range {
	width: 100%;
}

.fx-vz__toggles {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 4px;
}

.fx-vz__check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--fx-text-secondary);
	cursor: pointer;
}

.fx-vz__check input {
	accent-color: var(--fx-blue);
}

/* ---- Move Tool floating panel (bottom-left) ---- */
.fx-vz-move-panel {
	position: absolute;
	left: calc(14px + var(--fx-ruler-inset-x, 0px));
	bottom: 14px;
	z-index: 5;
	width: min(272px, calc(100% - 88px));
	height: auto;
	max-height: none;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	margin: 0;
	border: 1px solid var(--fx-border-strong);
	border-radius: 0;
	background: var(--fx-bg-panel);
	color: var(--fx-text);
	box-shadow: var(--fx-shadow-panel);
	overflow: hidden;
	pointer-events: auto;
}

.fx-vz-move-panel[hidden] {
	display: none !important;
}

.fx-vz-move-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 10px 12px;
	border: 0;
	border-radius: 0;
	background: #3366ff;
	color: #ffffff;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-align: left;
	cursor: grab;
	flex: none;
	user-select: none;
	touch-action: none;
}

.fx-vz-move-panel__head:hover {
	background: #2952e0;
}

.fx-vz-move-panel.is-dragging .fx-vz-move-panel__head {
	cursor: grabbing;
}

.fx-vz-move-panel__head-start {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.fx-vz-move-panel__head-start svg {
	flex: none;
}

.fx-vz-move-panel__chevron {
	flex: none;
	transition: transform 0.15s ease;
}

.fx-vz-move-panel.is-collapsed .fx-vz-move-panel__chevron {
	transform: rotate(-90deg);
}

.fx-vz-move-panel__body {
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding: 12px;
	overflow: visible;
	height: auto;
	min-height: 0;
	flex: none;
	background: var(--fx-bg-panel);
	color: var(--fx-text);
}

.fx-vz-move-panel .fx-vz-stroke[hidden],
.fx-vz-move-panel .fx-cr[hidden] {
	display: none !important;
}

.fx-vz-move-panel.is-collapsed .fx-vz-move-panel__body {
	display: none;
}

.fx-vz-move-panel .fx-vz-shapemodes {
	padding: 10px 0 0;
	border-top: 1px solid var(--fx-border);
}

.fx-vz-move-panel .fx-vz-shapemodes__label {
	color: var(--fx-text-muted);
	letter-spacing: 0.04em;
	text-transform: none;
	font-size: 11px;
}

.fx-vz-move-panel .fx-cr {
	border-top-color: var(--fx-border);
}

html[data-fx-theme='dark'] .fx-vz-move-panel {
	border-color: rgba(255, 255, 255, 0.1);
	background: #121417;
}

html[data-fx-theme='dark'] .fx-vz-move-panel__body {
	background: #121417;
}

html[data-fx-theme='dark'] .fx-vz-move-panel .fx-vz-shapemodes {
	border-top-color: rgba(255, 255, 255, 0.1);
}

html[data-fx-theme='dark'] .fx-vz-move-panel .fx-vz-shapemodes__tool,
html[data-fx-theme='dark'] .fx-vz-move-panel .fx-vz-shapemodes__expand {
	border-color: rgba(255, 255, 255, 0.12);
	background: #1a1d21;
	color: #f3f4f6;
}

html[data-fx-theme='dark'] .fx-vz-move-panel .fx-vz-shapemodes__tool:hover:not(:disabled),
html[data-fx-theme='dark'] .fx-vz-move-panel .fx-vz-shapemodes__expand:hover:not(:disabled) {
	background: rgba(37, 99, 235, 0.22);
	border-color: #60a5fa;
}

html[data-fx-theme='dark'] .fx-vz-move-panel .fx-vz-transform__tool,
html[data-fx-theme='dark'] .fx-vz-move-panel .fx-vz-transform__link,
html[data-fx-theme='dark'] .fx-vz-move-panel .fx-vz-transform__reset,
html[data-fx-theme='dark'] .fx-vz-move-panel .fx-vz-transform__field {
	border-color: rgba(255, 255, 255, 0.12);
	background: #1a1d21;
	color: #f3f4f6;
}

html[data-fx-theme='dark'] .fx-vz-move-panel .fx-vz-transform__tool:hover,
html[data-fx-theme='dark'] .fx-vz-move-panel .fx-vz-transform__link:hover,
html[data-fx-theme='dark'] .fx-vz-move-panel .fx-vz-transform__reset:hover {
	background: rgba(37, 99, 235, 0.22);
	border-color: #60a5fa;
}

html[data-fx-theme='dark'] .fx-vz-move-panel .fx-cr {
	border-top-color: rgba(255, 255, 255, 0.1);
}

/* ---- Transform controls (Move Tool body / legacy) ---- */
.fx-vz-transform {
	display: flex;
	flex-direction: column;
	gap: 11px;
	padding: 12px 0 4px;
	border-top: 1px solid var(--fx-border);
}

.fx-vz-move-panel.fx-vz-transform {
	padding: 0;
	border-top: 0;
	gap: 0;
}

.fx-vz-transform__title {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	color: var(--fx-text-muted);
}

.fx-vz-transform__align {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 5px;
}

.fx-vz-transform__tools {
	display: flex;
	align-items: center;
	gap: 5px;
}

.fx-vz-transform__row--rot {
	justify-content: flex-start;
}

.fx-vz-transform__tool,
.fx-vz-transform__link,
.fx-vz-transform__reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding: 0;
	border: 1px solid var(--fx-border-strong);
	border-radius: 8px;
	background: #f8fafc;
	color: var(--fx-text);
	cursor: pointer;
}

.fx-vz-transform__tool {
	width: 100%;
}

.fx-vz-transform__tools .fx-vz-transform__tool {
	width: 34px;
	flex: none;
}

.fx-vz-transform__link {
	width: 30px;
	flex: none;
}

.fx-vz-transform__reset {
	width: 34px;
	flex: none;
}

.fx-vz-transform__tool:hover,
.fx-vz-transform__link:hover,
.fx-vz-transform__reset:hover {
	background: #eff6ff;
	border-color: #93c5fd;
}

.fx-vz-transform__link.is-active {
	background: #dbeafe;
	border-color: var(--fx-blue);
	color: var(--fx-blue);
}

.fx-vz-transform__grid {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.fx-vz-transform__row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.fx-vz-transform__field {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 8px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 8px;
	background: #fff;
}

.fx-vz-transform__field:focus-within {
	border-color: var(--fx-blue);
	box-shadow: 0 0 0 2px var(--fx-blue-ring);
}

.fx-vz-transform__field--rot {
	flex: 0 0 calc(50% - 3px);
}

.fx-vz-transform__lbl {
	flex: none;
	font-size: 11px;
	font-weight: 700;
	color: var(--fx-text-muted);
}

.fx-vz-transform__unit {
	flex: none;
	font-size: 12px;
	color: var(--fx-text-muted);
}

.fx-vz-transform__field input {
	flex: 1;
	min-width: 0;
	width: 100%;
	border: 0;
	background: transparent;
	color: var(--fx-text);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	outline: none;
}

.fx-vz-transform__field input::-webkit-outer-spin-button,
.fx-vz-transform__field input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.fx-vz-transform__field input[type='number'] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.fx-vz-transform__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.fx-vz-transform__apply {
	flex: 1;
	height: 34px;
	border: 0;
	border-radius: 8px;
	background: var(--fx-blue);
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.fx-vz-transform__apply:hover {
	filter: brightness(1.06);
}

.fx-vz-transform--empty {
	opacity: 1;
}

.fx-vz-transform--empty .fx-vz-transform__tool,
.fx-vz-transform--empty .fx-vz-transform__link,
.fx-vz-transform--empty .fx-vz-transform__reset,
.fx-vz-transform--empty .fx-vz-transform__field,
.fx-vz-transform--empty .fx-vz-transform__apply,
.fx-vz-transform--empty .fx-vz-stroke {
	opacity: 0.55;
	pointer-events: none;
}

/* ---- Corner radius properties ---- */
.fx-cr {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid var(--fx-border);
}

.fx-cr[hidden] {
	display: none !important;
}

.fx-vz-stroke {
	display: grid;
	gap: 8px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--fx-border);
}

.fx-vz-stroke[hidden] {
	display: none !important;
}

.fx-vz-stroke__title {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fx-text-muted);
}

.fx-vz-stroke__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--fx-text);
	cursor: pointer;
	user-select: none;
}

.fx-vz-stroke__toggle input {
	margin: 0;
}

.fx-vz-stroke__weight {
	margin: 0;
}

.fx-vz-stroke__weight .fx-vz__range {
	width: 100%;
}

.fx-vz-stroke__field {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 8px;
	background: #fff;
}

.fx-vz-stroke__field:focus-within {
	border-color: var(--fx-blue);
	box-shadow: 0 0 0 2px var(--fx-blue-ring);
}

.fx-vz-stroke__field .fx-vz-transform__lbl {
	flex: none;
	min-width: 2.75em;
}

.fx-vz-stroke__field input {
	flex: 1;
	min-width: 0;
	width: 100%;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--fx-text);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	outline: none;
}

.fx-vz-stroke__field input::-webkit-outer-spin-button,
.fx-vz-stroke__field input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.fx-vz-stroke__field input[type='number'] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.fx-vz-stroke__expand {
	height: 30px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 8px;
	background: #f8fafc;
	color: var(--fx-text);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.fx-vz-stroke__expand:hover:not(:disabled) {
	background: #fff;
	border-color: rgba(17, 24, 39, 0.45);
	color: var(--fx-blue);
}

.fx-vz-stroke__expand:disabled {
	opacity: 0.45;
	cursor: default;
}

/* Brush tool: only size + smooth freehand — hide Move/boolean chrome. */
.fx-vz-move-panel[data-fx-vz-context='brush'] .fx-vz-transform__align,
.fx-vz-move-panel[data-fx-vz-context='brush'] .fx-vz-transform__actions,
.fx-vz-move-panel[data-fx-vz-context='brush'] .fx-vz-shapemodes {
	display: none !important;
}
.fx-vz-move-panel[data-fx-vz-context='brush'] .fx-vz-stroke {
	display: none !important;
}

.fx-vz-pen-style {
	display: none !important; /* Fill/Stroke moved into Move/Pen context panel */
	position: absolute;
	top: 14px;
	left: 64px;
	z-index: 4;
	gap: 4px;
	padding: 4px;
	border-radius: 12px;
	border: 1px solid var(--fx-border-strong);
	background: rgba(255, 255, 255, 0.94);
	box-shadow: var(--fx-shadow-panel);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	pointer-events: auto;
}

.fx-vz-move-panel__pen {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fx-vz-move-panel__pen[hidden] {
	display: none !important;
}

.fx-vz-move-panel__select[hidden] {
	display: none !important;
}

.fx-vz-move-panel__pen-label {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--fx-text-muted);
}

.fx-vz-move-panel__pen-modes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.fx-vz-move-panel__pen-modes .fx-vz-pen-style__btn {
	min-width: 0;
	width: 100%;
	height: 36px;
	border-radius: 0;
	border: 1px solid var(--fx-border-strong);
	background: var(--fx-bg-soft);
	color: var(--fx-text-secondary);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.fx-vz-move-panel__pen-modes .fx-vz-pen-style__btn:hover {
	border-color: var(--fx-blue-ring-strong);
	color: var(--fx-text);
}

.fx-vz-move-panel__pen-modes .fx-vz-pen-style__btn.is-on {
	background: #3366ff;
	border-color: #3366ff;
	color: #ffffff;
}

html[data-fx-theme='dark'] .fx-vz-move-panel__pen-modes .fx-vz-pen-style__btn {
	border-color: rgba(255, 255, 255, 0.12);
	background: #1a1d21;
	color: #e5e7eb;
}

html[data-fx-theme='dark'] .fx-vz-move-panel__pen-modes .fx-vz-pen-style__btn:hover {
	border-color: #60a5fa;
	background: rgba(37, 99, 235, 0.22);
}

html[data-fx-theme='dark'] .fx-vz-move-panel__pen-modes .fx-vz-pen-style__btn.is-on {
	background: #3366ff;
	border-color: #3366ff;
	color: #ffffff;
}

.fx-vz-move-panel__draw {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fx-vz-move-panel__draw[hidden] {
	display: none !important;
}

.fx-vz-move-panel__check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--fx-text);
	cursor: pointer;
	user-select: none;
}

.fx-vz-move-panel__check input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: #3366ff;
	flex: none;
}

.fx-vz-move-panel__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.fx-vz-move-panel__field[hidden] {
	display: none !important;
}

.fx-vz-move-panel__field-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-text-muted);
}

.fx-vz-move-panel__field-label strong {
	color: var(--fx-text);
	font-weight: 700;
}

.fx-vz-move-panel__field .fx-vz__range {
	width: 100%;
}

html[data-fx-theme='dark'] .fx-vz-move-panel__check {
	color: #f3f4f6;
}

html[data-fx-theme='dark'] .fx-vz-move-panel__check input {
	accent-color: #ffffff;
}

.fx-vz-pen-style[hidden] {
	display: none !important;
}

.fx-vz-pen-style__btn {
	min-width: 52px;
	height: 28px;
	padding: 0 10px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: var(--fx-text-muted);
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.fx-vz-pen-style__btn:hover {
	background: rgba(17, 24, 39, 0.08);
	color: var(--fx-text);
}

.fx-vz-pen-style__btn.is-on {
	background: var(--fx-blue);
	border-color: var(--fx-blue);
	color: #fff;
}

.fx-vz-brush-presets {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.fx-vz-brush-preset {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	min-height: 0;
	margin: 0;
	padding: 8px 6px 7px;
	border: 1.5px solid var(--fx-border-strong, rgba(15, 23, 42, 0.14));
	border-radius: 10px;
	background: var(--fx-bg-soft, #eef2f7);
	color: var(--fx-text);
	font: inherit;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.fx-vz-brush-preset:hover {
	background: var(--fx-bg-card-hover, #f3f4f6);
	border-color: var(--fx-text-faint, #9ca3af);
	color: var(--fx-text);
}

.fx-vz-brush-preset.is-on {
	background: var(--fx-bg-card, #fff);
	border-color: var(--fx-text);
	box-shadow: 0 0 0 1px var(--fx-text);
	color: var(--fx-text);
}

.fx-vz-brush-preset__preview {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	color: inherit;
}

.fx-vz-brush-preset__preview svg {
	display: block;
	width: 100%;
	max-width: 64px;
	height: 28px;
}

.fx-vz-brush-preset__label {
	display: block;
	text-align: center;
	font-size: 10px;
	font-weight: 650;
	letter-spacing: 0.01em;
	line-height: 1.2;
	color: var(--fx-text-secondary, #4b5563);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fx-vz-brush-preset.is-on .fx-vz-brush-preset__label {
	color: var(--fx-text);
	font-weight: 750;
}

html[data-fx-theme='dark'] .fx-vz-brush-preset {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.12);
	color: #e5e7eb;
}

html[data-fx-theme='dark'] .fx-vz-brush-preset:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.28);
	color: #f3f4f6;
}

html[data-fx-theme='dark'] .fx-vz-brush-preset.is-on {
	background: rgba(255, 255, 255, 0.08);
	border-color: #f9fafb;
	box-shadow: 0 0 0 1px #f9fafb;
	color: #f9fafb;
}

html[data-fx-theme='dark'] .fx-vz-brush-preset__label {
	color: #d1d5db;
}

html[data-fx-theme='dark'] .fx-vz-brush-preset.is-on .fx-vz-brush-preset__label {
	color: #f9fafb;
}

html[data-fx-theme='dark'] .fx-vz-stroke__field,
html[data-fx-theme='dark'] .fx-vz-stroke__expand {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.14);
	color: #f3f4f6;
}

html[data-fx-theme='dark'] .fx-vz-stroke__field input {
	background: transparent;
	color: #f3f4f6;
}

html[data-fx-theme='dark'] .fx-vz-pen-style {
	background: rgba(17, 19, 24, 0.94);
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

html[data-fx-theme='dark'] .fx-vz-pen-style__btn {
	color: rgba(255, 255, 255, 0.72);
}

html[data-fx-theme='dark'] .fx-vz-pen-style__btn:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

html[data-fx-theme='dark'] .fx-vz-pen-style__btn.is-on {
	background: var(--fx-blue);
	border-color: var(--fx-blue);
	color: #fff;
}

.fx-cr__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.fx-cr__title {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fx-text-muted);
}

.fx-cr__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--fx-border-strong);
	border-radius: 8px;
	background: #f8fafc;
	color: var(--fx-text);
	cursor: pointer;
}

.fx-cr__link:hover {
	background: #fff;
}

.fx-cr__link.is-active {
	border-color: rgba(17, 24, 39, 0.45);
	background: #e8f0ff;
	color: var(--fx-blue);
}

.fx-cr__all,
.fx-cr__field {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 8px;
	background: #f8fafc;
}

.fx-cr__all:focus-within,
.fx-cr__field:focus-within {
	border-color: rgba(17, 24, 39, 0.55);
	background: #fff;
}

.fx-cr__lbl {
	flex: none;
	font-size: 11px;
	font-weight: 700;
	color: var(--fx-text-muted);
	min-width: 1.6em;
}

.fx-cr__lbl--icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	width: 16px;
	height: 16px;
	color: var(--fx-text-muted);
}

.fx-cr__lbl--icon img {
	display: block;
	width: 14px;
	height: 14px;
}

.fx-cr__all input,
.fx-cr__field input {
	width: 100%;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--fx-text);
}

.fx-cr__all input:disabled,
.fx-cr__field input:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.fx-cr__all input::-webkit-outer-spin-button,
.fx-cr__all input::-webkit-inner-spin-button,
.fx-cr__field input::-webkit-outer-spin-button,
.fx-cr__field input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.fx-cr__all input[type='number'],
.fx-cr__field input[type='number'] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.fx-cr__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

.fx-cr.is-linked .fx-cr__grid {
	opacity: 0.55;
}

.fx-cr:not(.is-linked) .fx-cr__all {
	opacity: 0.55;
}

.fx-cr--gb {
	margin-top: 10px;
	padding-top: 12px;
	border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.fx-cr--gb .fx-cr__title {
	color: #6b7280;
}

.fx-cr--gb .fx-cr__link,
.fx-cr--gb .fx-cr__all,
.fx-cr--gb .fx-cr__field {
	background: #f3f4f6;
	border-color: rgba(15, 23, 42, 0.1);
}

html[data-fx-theme='dark'] .fx-cr {
	border-top-color: rgba(255, 255, 255, 0.1);
}

html[data-fx-theme='dark'] .fx-cr__link,
html[data-fx-theme='dark'] .fx-cr__all,
html[data-fx-theme='dark'] .fx-cr__field {
	background: #1f2937;
	border-color: rgba(255, 255, 255, 0.12);
	color: #f3f4f6;
}

html[data-fx-theme='dark'] .fx-cr__link.is-active {
	background: rgba(17, 24, 39, 0.14);
	border-color: rgba(96, 165, 250, 0.5);
	color: #93c5fd;
}

html[data-fx-theme='dark'] .fx-cr--gb {
	border-top-color: rgba(255, 255, 255, 0.1);
}

html[data-fx-theme='dark'] .fx-cr--gb .fx-cr__title {
	color: #9ca3af;
}

/* ---- Sticky selection bar (top-center workspace) ---- */
.fx-vz-sticky {
	position: absolute;
	top: calc(14px + var(--fx-ruler-inset-y, 0px));
	left: 50%;
	z-index: 5;
	transform: translateX(-50%) translateY(-6px);
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.18s ease,
		transform 0.18s ease;
}

.fx-vz-sticky:not([hidden]) {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}

.fx-vz-sticky__inner {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 8px;
	border-radius: 10px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	background: #ffffff;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.04),
		0 10px 28px rgba(15, 23, 42, 0.12);
}

.fx-vz-sticky__modes {
	display: flex;
	align-items: center;
	gap: 2px;
}

.fx-vz-sticky__sep {
	width: 1px;
	height: 22px;
	margin: 0 4px;
	background: rgba(15, 23, 42, 0.1);
	flex: none;
}

.fx-vz-sticky__btn {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #1f2937;
	cursor: pointer;
	transition:
		background 0.12s ease,
		color 0.12s ease;
}

.fx-vz-sticky__btn:hover:not(:disabled) {
	background: #f3f4f6;
}

.fx-vz-sticky__btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.fx-vz-sticky__btn.is-active {
	background: #eff6ff;
	color: var(--fx-blue);
}

.fx-vz-sticky__btn--danger {
	color: #dc2626;
}

.fx-vz-sticky__btn--danger:hover:not(:disabled) {
	background: #fef2f2;
}

.fx-vz-sticky__btn svg {
	display: block;
	width: 18px;
	height: 18px;
}

html[data-fx-theme='dark'] .fx-vz-sticky__inner {
	border-color: rgba(255, 255, 255, 0.1);
	background: #1a1d21;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.35),
		0 12px 32px rgba(0, 0, 0, 0.45);
}

html[data-fx-theme='dark'] .fx-vz-sticky__btn {
	color: #e5e7eb;
}

html[data-fx-theme='dark'] .fx-vz-sticky__btn:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.08);
}

html[data-fx-theme='dark'] .fx-vz-sticky__btn.is-active {
	background: rgba(17, 24, 39, 0.14);
	color: #93c5fd;
}

html[data-fx-theme='dark'] .fx-vz-sticky__btn--danger {
	color: #f87171;
}

html[data-fx-theme='dark'] .fx-vz-sticky__btn--danger:hover:not(:disabled) {
	background: rgba(248, 113, 113, 0.14);
}

html[data-fx-theme='dark'] .fx-vz-sticky__sep {
	background: rgba(255, 255, 255, 0.12);
}

/* ---- Shape Modes (boolean / solid-exclude) ---- */
.fx-vz-shapemodes {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 0 4px;
	border-top: 1px solid var(--fx-border);
}

.fx-vz-shapemodes__label {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--fx-text-muted);
}

.fx-vz-shapemodes__row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.fx-vz-shapemodes__tools {
	display: grid;
	grid-template-columns: repeat(4, 34px);
	gap: 5px;
	flex: none;
}

.fx-vz-shapemodes__tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--fx-border-strong);
	border-radius: 8px;
	background: #f8fafc;
	color: var(--fx-text);
	cursor: pointer;
}

.fx-vz-shapemodes__tool:hover:not(:disabled) {
	background: #eff6ff;
	border-color: #93c5fd;
}

.fx-vz-shapemodes__tool.is-active {
	background: #dbeafe;
	border-color: var(--fx-blue);
	color: var(--fx-blue);
}

.fx-vz-shapemodes__tool:disabled,
.fx-vz-shapemodes__expand:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.fx-vz-shapemodes__expand {
	flex: 1;
	min-width: 0;
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 8px;
	background: #f8fafc;
	color: var(--fx-text-secondary);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.fx-vz-shapemodes__expand:hover:not(:disabled) {
	background: #eff6ff;
	border-color: #93c5fd;
	color: var(--fx-text);
}

html[data-fx-theme='dark'] .fx-vz-shapemodes {
	border-top-color: rgba(255, 255, 255, 0.08);
}

html[data-fx-theme='dark'] .fx-vz-shapemodes__tool,
html[data-fx-theme='dark'] .fx-vz-shapemodes__expand {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.1);
	color: inherit;
}

html[data-fx-theme='dark'] .fx-vz-shapemodes__tool:hover:not(:disabled),
html[data-fx-theme='dark'] .fx-vz-shapemodes__expand:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.09);
}

html[data-fx-theme='dark'] .fx-vz-shapemodes__tool.is-active {
	background: rgba(17, 24, 39, 0.14);
	border-color: rgba(96, 165, 250, 0.55);
	color: #93c5fd;
}

html[data-fx-theme='dark'] .fx-vz-transform {
	border-top-color: rgba(255, 255, 255, 0.08);
}

html[data-fx-theme='dark'] .fx-vz-transform__tool,
html[data-fx-theme='dark'] .fx-vz-transform__link,
html[data-fx-theme='dark'] .fx-vz-transform__reset,
html[data-fx-theme='dark'] .fx-vz-transform__field {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.1);
	color: inherit;
}

html[data-fx-theme='dark'] .fx-vz-transform__tool:hover,
html[data-fx-theme='dark'] .fx-vz-transform__link:hover,
html[data-fx-theme='dark'] .fx-vz-transform__reset:hover {
	background: rgba(255, 255, 255, 0.09);
}

html[data-fx-theme='dark'] .fx-vz-transform__link.is-active {
	background: rgba(17, 24, 39, 0.14);
	border-color: rgba(96, 165, 250, 0.55);
	color: #93c5fd;
}

.fx-vz__metrics {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 4px;
}

.fx-vz__metrics[hidden] {
	display: none !important;
}

.fx-vz__metrics-title {
	margin: 0 0 2px;
	font-size: 12px;
	font-weight: 700;
	color: var(--fx-text-secondary);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.fx-vz__metrics-title span {
	font-size: 11px;
	font-weight: 500;
	color: var(--fx-text-faint);
}

.fx-vz__metrics.is-locked .fx-vz__metrics-row {
	opacity: 0.72;
}

.fx-vz__metrics-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fx-vz__metrics-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	align-items: center;
	font-size: 12px;
	line-height: 1.4;
	padding: 2px 0;
}

.fx-vz__metrics-row--guide {
	grid-template-columns: 1fr auto auto;
}

.fx-vz__metrics-guide-del {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--fx-text-muted);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 0 2px;
	border-radius: 4px;
}

.fx-vz__metrics-guide-del:hover {
	color: #b91c1c;
	background: rgba(185, 28, 28, 0.08);
}

.fx-vz__metrics-row span {
	color: var(--fx-text-muted);
	font-weight: 500;
}

.fx-vz__metrics-row strong {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	color: var(--fx-text);
	min-width: 3.5ch;
	text-align: right;
}

.fx-vz__metrics-row.is-active span,
.fx-vz__metrics-row.is-active strong {
	color: var(--fx-blue);
}

.fx-vz-refine {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 14px;
	margin-bottom: 2px;
	border-bottom: 1px solid var(--fx-border);
}

.fx-vz-refine__head {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fx-vz-refine__title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--fx-text);
}

.fx-vz-refine__kicker {
	margin: 0;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fx-text-muted);
}

.fx-vz-refine__preview {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1.15 / 1;
	min-height: 140px;
	padding: 18px;
	border-radius: 14px;
	border: 1px solid var(--fx-border-strong);
	background: linear-gradient(180deg, #fbfcfe 0%, #f3f6fa 100%);
	overflow: hidden;
}

.fx-vz-refine__preview .fx-glyph-preview {
	width: 78%;
	height: 78%;
}

.fx-vz-refine__preview-empty {
	font-size: 12px;
	font-weight: 500;
	color: var(--fx-text-faint);
	text-align: center;
	line-height: 1.4;
	max-width: 16ch;
}

.fx-vz-refine__actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fx-vz-refine__actions .fx-btn {
	width: 100%;
}

.fx-vz__status {
	margin: auto 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--fx-border);
	font-size: 12px;
	line-height: 1.4;
	color: var(--fx-text-muted);
}

.fx-vz__stage,
.fx-vz--solo,
.fx-gb,
.fx-sb {
	--fx-ruler-inset-x: 0px;
	--fx-ruler-inset-y: 0px;
}

/* Inherit from .fx-gb / .fx-sb so chrome/dock clear the canvas rulers. */
.fx-gb__stage,
.fx-sb__stage {
	--fx-ruler-inset-x: inherit;
	--fx-ruler-inset-y: inherit;
}

.fx-vz__stage[data-fx-rulers='on'],
.fx-vz--solo[data-fx-rulers='on'],
.fx-gb[data-fx-rulers='on'],
.fx-sb[data-fx-rulers='on'],
.fx-gb__stage[data-fx-rulers='on'],
.fx-sb__stage[data-fx-rulers='on'] {
	--fx-ruler-inset-x: var(--fx-ruler-size);
	--fx-ruler-inset-y: var(--fx-ruler-size);
}
.fx-vz__stage {
	position: relative;
	flex: 1;
	min-height: 0;
	border: 0;
	border-radius: 0;
	background: #ffffff;
	box-shadow: none;
	overflow: hidden;
	touch-action: none;
}

.fx-vz__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.28;
	background-color: #ffffff;
	background-image:
		radial-gradient(#c4c4c4 1.5px, transparent 1.5px),
		radial-gradient(#c4c4c4 1.5px, #ffffff 1.5px);
	background-size: 20px 20px;
	background-position: 0 0, 10px 10px;
}

.fx-vz__stage.is-dragover {
	border-color: var(--fx-blue);
	box-shadow: var(--fx-shadow-panel);
}

.fx-vz__canvas {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	background: transparent;
	cursor: var(--fx-cursor-v);
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

.fx-vz-toolrail {
	position: absolute;
	top: calc(14px + var(--fx-ruler-inset-y, 0px));
	left: calc(14px + var(--fx-ruler-inset-x, 0px));
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	padding: 6px;
	border-radius: 14px;
	border: 1px solid var(--fx-border-strong);
	background: rgba(255, 255, 255, 0.94);
	box-shadow: var(--fx-shadow-panel);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	pointer-events: auto;
}

.fx-vz-toolrail__grip {
	display: grid;
	place-items: center;
	width: 38px;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--fx-text-muted, #94a3b8);
	cursor: grab;
	touch-action: none;
	flex: none;
}

.fx-vz-toolrail__grip-bar {
	display: block;
	width: 16px;
	height: 3px;
	border-radius: 999px;
	background: currentColor;
	opacity: 0.7;
}

.fx-vz-toolrail__grip:hover {
	color: var(--fx-text-secondary);
	background: rgba(15, 23, 42, 0.04);
}

.fx-vz-toolrail__grip:active,
.fx-vz-toolrail.is-dragging .fx-vz-toolrail__grip {
	cursor: grabbing;
}

.fx-gb-dock > *.is-floating {
	/* Floating dock panels disabled — keep rule inert for leftover classes. */
	position: static;
	box-shadow: none;
}

.fx-vz-toolrail.is-floating {
	position: absolute;
	right: auto;
	bottom: auto;
	z-index: 8;
}

.fx-vz-toolrail.is-dragging {
	user-select: none;
	box-shadow: var(--fx-shadow-panel);
}

.fx-vz-toolrail__btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--fx-border);
	border-radius: 10px;
	background: #ffffff;
	color: var(--fx-text-secondary);
	cursor: pointer;
	transition:
		border-color 0.12s ease,
		background 0.12s ease,
		color 0.12s ease,
		box-shadow 0.12s ease;
}

.fx-vz-toolrail__btn svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.fx-vz-toolrail__btn:hover:not(.is-active) {
	border-color: rgba(15, 23, 42, 0.14);
	color: #111827;
	background: rgba(15, 23, 42, 0.06);
}

.fx-vz-toolrail__btn.is-active {
	border-color: #0b0d0f;
	background: #0b0d0f;
	color: #ffffff;
	box-shadow: none;
}

[data-fx-vz-tool-active='text'] .fx-vz__canvas,
[data-fx-vz-tool-active='text'] [data-fx-vz-canvas] {
	cursor: text;
}

/* Soft-keyboard catcher for Text (T) glyph run — must be focusable (iPadOS). */
.fx-vz-text-kb {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0.01;
	color: transparent;
	caret-color: transparent;
	background: transparent;
	resize: none;
	overflow: hidden;
	outline: none;
	z-index: 2;
	font-size: 16px; /* avoid iOS focus zoom */
	pointer-events: none;
}

.fx-vz__eye {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 3;
	width: 40px;
	height: 40px;
	display: none; /* hidden: solid preview toggle */
	place-items: center;
	border-radius: 12px;
	border: 1px solid var(--fx-border-strong);
	background: rgba(255, 255, 255, 0.92);
	color: var(--fx-text-secondary);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.fx-vz__metrics-toggle {
	position: absolute;
	left: 14px;
	bottom: 62px;
	z-index: 3;
	width: 40px;
	height: 40px;
	display: none; /* hidden: metrics / matrix toggle */
	place-items: center;
	padding: 0;
	border-radius: 12px;
	border: 1px solid var(--fx-border-strong);
	background: rgba(255, 255, 255, 0.92);
	color: var(--fx-text-secondary);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.fx-vz__metrics-toggle:hover {
	color: var(--fx-blue);
	border-color: var(--fx-blue-ring-strong);
	background: #fff;
}

.fx-vz__metrics-toggle.is-on {
	color: var(--fx-blue);
	border-color: var(--fx-blue-ring-strong);
	background: var(--fx-blue-soft);
}

.fx-vz__metrics-toggle svg {
	display: block;
}

html[data-fx-theme="dark"] .fx-vz__metrics-toggle {
	background: rgba(24, 28, 34, 0.92);
	border-color: rgba(255, 255, 255, 0.12);
	color: var(--fx-text-secondary);
}

html[data-fx-theme="dark"] .fx-vz__metrics-toggle:hover,
html[data-fx-theme="dark"] .fx-vz__metrics-toggle.is-on {
	color: var(--fx-blue);
	border-color: var(--fx-blue-ring-strong);
	background: var(--fx-blue-soft);
}

.fx-vz__eye:hover {
	color: var(--fx-blue);
	border-color: var(--fx-blue-ring-strong);
	background: #fff;
}

.fx-vz__eye.is-on {
	color: var(--fx-blue);
	border-color: var(--fx-blue-ring-strong);
	background: var(--fx-blue-soft);
}

.fx-vz__eye-icon {
	width: 20px;
	height: 20px;
	display: block;
}

.fx-vz__eye.is-on .fx-vz__eye-icon--off,
.fx-vz__eye:not(.is-on) .fx-vz__eye-icon--on {
	display: none;
}

.fx-vz__hud {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 4px;
	height: 42px;
	padding: 0 8px 0 14px;
	border-radius: 10px;
	border: 1px solid var(--fx-border-strong);
	background: rgba(255, 255, 255, 0.94);
	color: var(--fx-text);
	box-shadow: var(--fx-shadow-panel);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	pointer-events: auto;
}

.fx-vz__hud-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--fx-text-secondary);
	padding-right: 4px;
	user-select: none;
}

.fx-vz__hud-sep {
	width: 1px;
	height: 18px;
	margin: 0 4px;
	background: var(--fx-border-strong);
	flex-shrink: 0;
}

.fx-vz__hud-btn {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	color: var(--fx-text-secondary);
	transition: background 0.15s ease, color 0.15s ease;
}

.fx-vz__hud-btn:hover {
	background: var(--fx-blue-soft);
	color: var(--fx-blue);
}

.fx-vz__hud-pct {
	min-width: 44px;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--fx-text);
	user-select: none;
}

.fx-vz__scan,
.fx-scan-overlay {
	position: fixed;
	inset: 0;
	z-index: 220;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	pointer-events: auto;
}

.fx-vz__scan[hidden],
.fx-scan-overlay[hidden] {
	display: none !important;
}

.fx-vz__scan-card,
.fx-scan-overlay__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	min-width: 220px;
	max-width: 320px;
	padding: 24px 28px;
	border-radius: var(--fx-radius-lg);
	background: #fff;
	border: 1px solid var(--fx-border);
	box-shadow: var(--fx-shadow-panel);
	text-align: center;
}

.fx-vz__scan-spinner,
.fx-scan-overlay__spinner {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 3px solid var(--fx-blue-soft);
	border-top-color: var(--fx-blue);
	animation: fx-scan-spin 0.8s linear infinite;
}

.fx-vz__scan-logo,
.fx-scan-overlay__logo {
	width: 44px;
	height: 44px;
	display: block;
	flex-shrink: 0;
	animation: fx-scan-spin 1.1s linear infinite;
}

@keyframes fx-scan-spin {
	to {
		transform: rotate(360deg);
	}
}

.fx-vz__scan-title,
.fx-scan-overlay__title {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--fx-text);
}

.fx-vz__scan-status,
.fx-scan-overlay__status {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--fx-text-muted);
}

.fx-vz-menu {
	position: fixed;
	z-index: 80;
	min-width: 168px;
	padding: 6px;
	border-radius: 12px;
	border: 1px solid var(--fx-border-strong);
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}

.fx-vz-menu[hidden] {
	display: none !important;
}

.fx-vz-menu__item {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--fx-text);
	text-align: left;
}

.fx-vz-menu__item:hover:not(:disabled) {
	background: var(--fx-blue-soft);
	color: var(--fx-blue);
}

.fx-vz-menu__item:disabled {
	opacity: 0.38;
	cursor: var(--fx-cursor-v);
}

.fx-vz-menu__item[hidden],
.fx-vz-menu__sep[hidden] {
	display: none !important;
}

.fx-vz-menu__item--danger:hover:not(:disabled) {
	background: #fef2f2;
	color: #dc2626;
}

.fx-vz-menu__sep {
	height: 1px;
	margin: 4px 6px;
	background: var(--fx-border);
}

.fx-vz-menu__shortcut {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	color: var(--fx-text-faint);
}

/* ---- Overview panel ---- */

.fx-overview__panel {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid var(--fx-border);
	border-radius: var(--fx-radius-lg);
	box-shadow: var(--fx-shadow-panel);
	overflow: hidden;
}

.fx-overview__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px 12px;
}

.fx-overview__title {
	margin: 0;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.15;
	color: var(--fx-text);
}

.fx-overview__sub {
	margin: 8px 0 0;
	max-width: 42ch;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fx-text-muted);
}

.fx-overview-grid {
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
	gap: 1px;
	align-content: start;
	background: var(--fx-border-strong);
}

/* ---- Shared font preview (Home + Glyphs Builder) ---- */

.fx-font-preview {
	flex: 0 0 auto;
	display: none;
	flex-direction: column;
	position: relative;
	border-top: 1px solid var(--fx-border);
	background: var(--fx-bg-panel, #f4f4f5);
	min-height: 0;
	z-index: 4;
}

.fx-shell[data-fx-step='allglyphs'] .fx-font-preview,
.fx-shell[data-fx-step='glyphsbuilder'] .fx-font-preview {
	display: flex;
}

.fx-font-preview.is-hidden {
	display: none !important;
}

.fx-font-preview__resize {
	position: absolute;
	top: -4px;
	left: 0;
	right: 0;
	height: 8px;
	cursor: ns-resize;
	z-index: 5;
	touch-action: none;
}

.fx-font-preview__resize::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 2px;
	width: 36px;
	height: 3px;
	margin-left: -18px;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.22);
	opacity: 0;
	transition: opacity 0.12s ease;
}

.fx-font-preview__resize:hover::after,
.fx-font-preview.is-resizing .fx-font-preview__resize::after {
	opacity: 1;
}

.fx-font-preview__toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 4px 10px;
	min-height: 32px;
	border-bottom: 1px solid var(--fx-border);
	background: var(--fx-bg-soft, #ececee);
}

.fx-font-preview__field {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 11px;
	color: var(--fx-text-muted);
}

.fx-font-preview__lbl {
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 10px;
}

.fx-font-preview__field input {
	width: 52px;
	height: 22px;
	padding: 0 6px;
	border: 1px solid var(--fx-border);
	border-radius: 4px;
	background: var(--fx-bg, #fff);
	color: var(--fx-text);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.fx-font-preview__field input:focus {
	outline: none;
	border-color: var(--fx-blue);
}

.fx-font-preview__align {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-left: 2px;
}

.fx-font-preview__align-btn,
.fx-font-preview__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 22px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 4px;
	background: transparent;
	color: var(--fx-text-muted);
	cursor: pointer;
}

.fx-font-preview__align-btn:hover,
.fx-font-preview__toggle:hover {
	background: rgba(0, 0, 0, 0.06);
	color: var(--fx-text);
}

.fx-font-preview__align-btn.is-active {
	background: var(--fx-bg, #fff);
	border-color: var(--fx-border);
	color: var(--fx-text);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.fx-font-preview__toggle {
	margin-left: auto;
}

.fx-font-preview__chevron {
	transition: transform 0.15s ease;
}

.fx-font-preview.is-collapsed .fx-font-preview__chevron {
	transform: rotate(-90deg);
}

.fx-font-preview.is-collapsed .fx-font-preview__toolbar {
	border-bottom: 0;
}

.fx-font-preview.is-collapsed .fx-font-preview__body,
.fx-font-preview.is-collapsed .fx-font-preview__resize {
	display: none;
}

.fx-font-preview__body {
	display: flex;
	align-items: stretch;
	height: var(--fx-font-preview-body-h, 148px);
	min-height: 72px;
	max-height: 420px;
	background: #ffffff;
	color: #111827;
	border-top: 1px solid var(--fx-border);
}

.fx-font-preview__rail {
	flex: 0 0 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(15, 23, 42, 0.4);
	border-right: 1px solid rgba(15, 23, 42, 0.1);
	user-select: none;
}

.fx-font-preview__stage {
	flex: 1;
	min-width: 0;
	padding: 18px 20px;
	overflow: auto;
	outline: none;
	caret-color: var(--fx-blue, #3366ff);
	color: #111827;
	font-family: "FontxsisPreview", var(--fx-font);
	font-weight: 400;
	font-size: 72px;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: break-word;
	font-kerning: normal;
	font-feature-settings: "kern" 1;
	cursor: text;
}

.fx-font-preview__stage:empty::before {
	content: attr(data-placeholder);
	color: rgba(15, 23, 42, 0.35);
	font-family: var(--fx-font);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	pointer-events: none;
}

html[data-fx-theme="dark"] .fx-font-preview {
	background: var(--fx-bg);
	border-top-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-font-preview__toolbar {
	background: var(--fx-bg-panel);
	border-bottom-color: var(--fx-border);
}

html[data-fx-theme="dark"] .fx-font-preview__field input {
	background: var(--fx-bg-soft);
}

html[data-fx-theme="dark"] .fx-font-preview__align-btn:hover,
html[data-fx-theme="dark"] .fx-font-preview__toggle:hover {
	background: rgba(255, 255, 255, 0.08);
}

html[data-fx-theme="dark"] .fx-font-preview__align-btn.is-active {
	background: var(--fx-bg-soft);
}

html[data-fx-theme="dark"] .fx-font-preview__body {
	background: #0e0e10;
	color: #f5f5f5;
	border-top-color: rgba(255, 255, 255, 0.08);
}

html[data-fx-theme="dark"] .fx-font-preview__rail {
	color: rgba(255, 255, 255, 0.45);
	border-right-color: rgba(255, 255, 255, 0.08);
}

html[data-fx-theme="dark"] .fx-font-preview__stage {
	color: #ffffff;
	caret-color: #7eb6ff;
}

html[data-fx-theme="dark"] .fx-font-preview__stage:empty::before {
	color: rgba(255, 255, 255, 0.35);
}

.fx-overview-grid::-webkit-scrollbar {
	width: 10px;
}

.fx-overview-grid::-webkit-scrollbar-thumb {
	background: rgba(15, 23, 42, 0.16);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
}

/* ---- Glyph cards (dense overview sheet, match X-GLYPHS card anatomy) ---- */

.fx-glyph-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	aspect-ratio: 1 / 1.18;
	gap: 0;
	padding: 0;
	margin: 0;
	background: #ffffff;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
	text-align: center;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background 0.12s ease;
}

.fx-glyph-card:hover {
	background: var(--fx-bg-card-hover);
	transform: none;
}

.fx-glyph-card.is-selected {
	background: var(--fx-blue-tint);
	box-shadow: inset 0 0 0 1px var(--fx-blue-ring-strong);
}

.fx-glyph-card.is-active {
	background: var(--fx-blue-soft);
}

.fx-glyph-card.is-selected.is-active {
	background: var(--fx-blue-tint);
}

.fx-glyph-card__host {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	min-height: 0;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	box-sizing: border-box;
	overflow: hidden;
}

.fx-glyph-card__metrics {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	padding: 6% 8%;
	box-sizing: border-box;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.14s ease;
}

.fx-glyph-card:hover .fx-glyph-card__metrics {
	opacity: 1;
}

.fx-glyph-card__metrics-svg {
	width: 100%;
	height: 100%;
	max-height: 86%;
	margin: auto;
	display: block;
	overflow: visible;
}

.fx-glyph-card__metric {
	fill: none;
	stroke-width: 1.35;
	stroke-dasharray: 5 3;
	vector-effect: non-scaling-stroke;
}

.fx-glyph-card__metric--cap {
	stroke: var(--fx-blue);
}

.fx-glyph-card__metric--base {
	stroke: #e11d48;
}

.fx-glyph-card:hover .fx-glyph-card__host,
.fx-glyph-card.is-selected .fx-glyph-card__host,
.fx-glyph-card.is-active .fx-glyph-card__host,
.fx-glyph-card.is-selected.is-active .fx-glyph-card__host {
	border: 0;
	box-shadow: none;
	background: transparent;
}

.fx-glyph-card__label {
	flex: none;
	display: block;
	width: 100%;
	padding: 7px 4px;
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--fx-text-muted);
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	border-top: 1px solid var(--fx-border);
	background: var(--fx-bg-rail);
	box-sizing: border-box;
}

.fx-glyph-card.is-filled .fx-glyph-card__label {
	color: var(--fx-text);
}

.fx-glyph-card.is-selected .fx-glyph-card__label,
.fx-glyph-card.is-active .fx-glyph-card__label {
	color: #ffffff;
	font-weight: 600;
	background: var(--fx-blue);
	border-top-color: var(--fx-blue-hover);
}

.fx-glyph-card__status {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #d1d5db;
	flex-shrink: 0;
	pointer-events: none;
	z-index: 1;
}

.fx-glyph-card.is-filled .fx-glyph-card__status {
	background: var(--fx-blue);
}

.fx-glyph-card.is-selected .fx-glyph-card__status,
.fx-glyph-card.is-active .fx-glyph-card__status {
	background: #ffffff;
}

/* ---- Kerning ---- */

.fx-kern {
	flex: 1;
	min-height: 0;
	display: grid;
	/* Context preview + side table hidden for now */
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr) auto;
	gap: 14px;
}

.fx-kern__adjust {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 0;
	background: #ffffff;
	border: 1px solid var(--fx-border);
	border-radius: var(--fx-radius-lg);
	box-shadow: var(--fx-shadow-panel);
	gap: 0;
	overflow: hidden;
}

.fx-kern__focus-wrap {
	position: relative;
	grid-column: 1;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	min-height: 560px;
	border-radius: 16px;
	border: 1px solid var(--fx-border-strong);
	background: linear-gradient(180deg, #fbfcfe 0%, #f3f6fa 100%);
	overflow: hidden;
}

.fx-kern__main {
	display: none !important; /* temporarily hidden — keep markup/JS for later */
	grid-column: 1;
	grid-row: 4;
	min-height: 0;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	border: 1px solid var(--fx-border);
	border-radius: var(--fx-radius-lg);
	box-shadow: var(--fx-shadow-panel);
}

.fx-kern__spacing {
	grid-column: 1;
	grid-row: 3;
	margin: 0;
	min-height: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.fx-kern__spacing.fx-export-card {
	padding: 0;
}

.fx-kern__spacing-head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 10px 16px;
	margin: 0;
	border: 0;
	border-bottom: 1px solid var(--fx-border);
	background: var(--fx-bg-soft, #f5f7fa);
	box-sizing: border-box;
}

.fx-kern__spacing-head-start {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.fx-kern__spacing-head-icon {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 8px;
	border: 1px solid var(--fx-border);
	background: #ffffff;
	color: var(--fx-text-secondary, #64748b);
}

.fx-kern__spacing-head-icon svg {
	display: block;
}

.fx-kern__spacing-head-text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.fx-kern__spacing-title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--fx-text);
}

.fx-kern__spacing-sub {
	margin: 0;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--fx-text-muted);
}

.fx-kern__spacing-head-badge {
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 3px 8px;
	border-radius: 999px;
	border: 1px solid rgba(45, 212, 191, 0.4);
	background: rgba(45, 212, 191, 0.1);
	color: #0f766e;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.fx-workspace .fx-kern__spacing.fx-export-card {
	padding: 0;
	border-radius: 0;
}

.fx-workspace .fx-kern__spacing-head {
	padding: 10px 18px;
	margin: 0;
	border-bottom: 1px solid var(--fx-border);
	background: var(--fx-bg-soft, #f5f7fa);
}

html[data-fx-theme='dark'] .fx-kern__spacing-head,
html[data-fx-theme='dark'] .fx-workspace .fx-kern__spacing-head {
	background: rgba(255, 255, 255, 0.03);
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

html[data-fx-theme='dark'] .fx-kern__spacing-head-icon {
	background: #1a1d21;
	border-color: rgba(255, 255, 255, 0.1);
	color: #d1d5db;
}

html[data-fx-theme='dark'] .fx-kern__spacing-title {
	color: #f3f4f6;
}

html[data-fx-theme='dark'] .fx-kern__spacing-sub {
	color: #9ca3af;
}

html[data-fx-theme='dark'] .fx-kern__spacing-head-badge {
	border-color: rgba(45, 212, 191, 0.35);
	background: rgba(45, 212, 191, 0.12);
	color: #5eead4;
}

html[data-fx-theme='dark'] .fx-kern__spacing .fx-export-card__foot {
	border-top-color: rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.03);
}

.fx-kern__side {
	display: none !important; /* temporarily hidden — keep markup/JS for later */
	grid-column: 2;
	grid-row: 1 / -1;
	position: sticky;
	top: 12px;
	align-self: stretch;
	flex-direction: column;
	gap: 10px;
	width: 300px;
	min-width: 300px;
	max-width: 300px;
	box-sizing: border-box;
	min-height: 0;
	height: 100%;
	max-height: calc(100vh - var(--fx-titlebar-h, 52px) - 28px);
	padding: 12px;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	border: 1px solid var(--fx-border);
	border-radius: var(--fx-radius-lg);
	box-shadow: var(--fx-shadow-panel);
	overflow: hidden;
}

.fx-kern-side__tabs {
	display: flex;
	gap: 4px;
	padding: 3px;
	border-radius: 10px;
	background: var(--fx-bg-soft, #f1f5f9);
	border: 1px solid var(--fx-border);
	flex-shrink: 0;
}

.fx-kern-side__tab {
	flex: 1;
	margin: 0;
	padding: 7px 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--fx-text-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: -0.01em;
	cursor: pointer;
}

.fx-kern-side__tab:hover {
	color: var(--fx-text);
}

.fx-kern-side__tab.is-active {
	background: var(--fx-bg-panel, #fff);
	color: var(--fx-text);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.fx-kern-side__hint {
	margin: 0;
	font-size: 11px;
	line-height: 1.35;
	font-style: italic;
	color: var(--fx-text-muted);
	flex-shrink: 0;
}

.fx-kern-side__filter {
	display: block;
	margin: 0;
	flex-shrink: 0;
}

.fx-kern-side__filter input {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var(--fx-border);
	border-radius: 8px;
	background: var(--fx-bg-panel, #fff);
	color: var(--fx-text);
	font-size: 12px;
	outline: none;
}

.fx-kern-side__filter input:focus {
	border-color: var(--fx-blue);
	box-shadow: 0 0 0 3px var(--fx-blue-ring);
}

.fx-kern-side__panel {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1;
	overflow: hidden;
}

.fx-kern-side__panel[hidden] {
	display: none !important;
}

.fx-kern-side__head {
	display: grid;
	gap: 6px;
	padding: 0 6px 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fx-text-faint, var(--fx-text-muted));
	flex-shrink: 0;
}

.fx-kern-side__head--kern,
.fx-kern-side__row--kern {
	grid-template-columns: 40px 40px minmax(0, 1fr) 32px;
}

.fx-kern-side__head--space,
.fx-kern-side__row--space {
	grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

.fx-kern-side__list {
	flex: 1;
	min-height: 0;
	overflow: auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-right: 2px;
}

.fx-kern-side__row {
	display: grid;
	gap: 6px;
	align-items: center;
	padding: 6px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--fx-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
}

.fx-kern-side__row:hover {
	background: var(--fx-blue-soft);
}

.fx-kern-side__row.is-selected {
	background: var(--fx-blue-tint);
}

.fx-kern-side__glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 28px;
	max-width: 100%;
	padding: 0 4px;
	border-radius: 6px;
	background: var(--fx-bg-soft, #f1f5f9);
	border: 1px solid var(--fx-border);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.fx-kern-side__num {
	width: 100%;
	box-sizing: border-box;
	padding: 5px 6px;
	border: 1px solid var(--fx-border);
	border-radius: 6px;
	background: var(--fx-bg-panel, #fff);
	color: var(--fx-text);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.fx-kern-side__num:focus {
	outline: none;
	border-color: var(--fx-blue);
	box-shadow: 0 0 0 2px var(--fx-blue-ring);
}

.fx-kern-side__num[readonly] {
	opacity: 0.75;
	cursor: default;
}

.fx-kern-side__del {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--fx-text-muted);
	cursor: pointer;
}

.fx-kern-side__del:hover {
	background: rgba(220, 38, 38, 0.12);
	color: #dc2626;
}

.fx-kern-side__empty {
	padding: 18px 10px;
	text-align: center;
	font-size: 12px;
	line-height: 1.45;
	color: var(--fx-text-muted);
}

.fx-kern-side__foot {
	flex-shrink: 0;
	padding-top: 6px;
	border-top: 1px solid var(--fx-border);
	font-size: 11px;
	font-weight: 600;
	color: var(--fx-text-muted);
}

.fx-kern__spacing .fx-export-card__stage {
	min-height: 360px;
	max-height: 560px;
	height: 420px;
	font-size: var(--fx-kern-preview-size, 72px);
	padding: 16px 18px;
	margin: 0;
	white-space: pre-wrap;
	word-break: break-word;
	line-height: 1.25;
}

.fx-kern__spacing .fx-export-card__foot {
	padding: 12px 18px 16px;
	margin: 0;
	border-top: 1px solid var(--fx-border);
	background: var(--fx-bg-soft, #f5f7fa);
}

.fx-kern-toolrail {
	position: absolute;
	top: auto;
	left: auto;
	right: 12px;
	bottom: 12px;
	z-index: 5;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	padding: 6px;
	border-radius: 10px;
	border: 1px solid var(--fx-border-strong);
	background: rgba(255, 255, 255, 0.94);
	box-shadow: var(--fx-shadow-panel);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	pointer-events: auto;
}

.fx-kern-toolrail__btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--fx-text-secondary, #64748b);
	cursor: pointer;
}

.fx-kern-toolrail__btn svg {
	width: 18px;
	height: 18px;
	display: block;
}

.fx-kern-toolrail__btn:hover:not(.is-active) {
	background: rgba(15, 23, 42, 0.05);
	color: var(--fx-text, #0f172a);
}

.fx-kern-toolrail__btn.is-active {
	background: rgba(51, 102, 255, 0.12);
	color: #3366ff;
}

.fx-kern-toolrail__btn--reset:hover {
	background: rgba(220, 38, 38, 0.08);
	color: #dc2626;
}

html[data-fx-theme='dark'] .fx-kern-toolrail {
	background: rgba(15, 18, 22, 0.92);
	border-color: rgba(255, 255, 255, 0.12);
}

html[data-fx-theme='dark'] .fx-kern-toolrail__btn {
	color: rgba(226, 232, 240, 0.7);
}

html[data-fx-theme='dark'] .fx-kern-toolrail__btn:hover:not(.is-active) {
	background: rgba(255, 255, 255, 0.06);
	color: #f8fafc;
}

html[data-fx-theme='dark'] .fx-kern-toolrail__btn.is-active {
	background: rgba(51, 102, 255, 0.22);
	color: #8eb6ff;
}

.fx-kern__focus[data-fx-kern-tool='text'],
.fx-kern__focus.is-text-tool {
	cursor: text;
}

.fx-kern__focus[data-fx-kern-tool='select'],
.fx-kern__focus.is-select-tool {
	cursor: default;
}

.fx-kern-caret {
	stroke: #3366ff;
	stroke-width: 2;
	stroke-linecap: round;
	pointer-events: none;
	animation: fx-kern-caret-blink 1s steps(1, end) infinite;
}

.fx-kern-sel {
	fill: rgba(17, 24, 39, 0.16);
	pointer-events: none;
}

html[data-fx-theme='dark'] .fx-kern-sel {
	fill: rgba(51, 102, 255, 0.38);
}

@keyframes fx-kern-caret-blink {
	0%,
	50% {
		opacity: 1;
	}
	50.01%,
	100% {
		opacity: 0;
	}
}

html[data-fx-theme='dark'] .fx-kern-caret {
	stroke: #8eb6ff;
}

.fx-kern__focus {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	height: auto;
	min-height: 560px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	overflow: hidden;
	touch-action: none;
	user-select: none;
}

.fx-kern__adjust-head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 10px 16px;
	margin: 0;
	border: 0;
	border-bottom: 1px solid var(--fx-border);
	background: var(--fx-bg-soft, #f5f7fa);
	box-sizing: border-box;
}

.fx-kern__main-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.fx-kern__adjust-head-start {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.fx-kern__adjust-head-icon {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 8px;
	border: 1px solid var(--fx-border);
	background: #ffffff;
	color: var(--fx-text-secondary, #64748b);
}

.fx-kern__adjust-head-icon svg {
	display: block;
}

.fx-kern__adjust-head-text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.fx-kern__adjust-title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--fx-text);
}

.fx-kern__adjust-sub {
	margin: 0;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--fx-text-muted);
}

.fx-kern__main-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--fx-text);
}

.fx-kern__main-title {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.fx-kern__main-sub {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--fx-text-muted);
}

.fx-kern__filters {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

.fx-kern__filter {
	height: 32px;
	padding: 0 12px;
	border-radius: var(--fx-radius-pill);
	border: 1px solid var(--fx-border-strong);
	background: #fff;
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-text-secondary);
}

.fx-kern__filter:hover {
	background: var(--fx-bg-soft);
	color: var(--fx-text);
}

.fx-kern__filter.is-active {
	border-color: var(--fx-blue);
	background: var(--fx-blue-soft);
	color: var(--fx-blue);
}

.fx-kern__pairs {
	flex: 1;
	min-height: 0;
	overflow: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 14px;
	align-content: start;
	padding: 2px;
}

.fx-kern-pair {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 128px;
	padding: 14px 12px 12px;
	border-radius: 16px;
	border: 1px solid var(--fx-border-strong);
	background: #fff;
	box-shadow: var(--fx-shadow-card);
	overflow: hidden;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.fx-kern-pair:hover {
	border-color: var(--fx-blue-ring-strong);
	background: var(--fx-bg-card-hover);
}

.fx-kern-pair.is-selected {
	border-color: var(--fx-blue);
	background: #f8fbff;
}

.fx-kern-pair__face {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	min-height: 64px;
	line-height: 1;
	font-size: 2.15rem;
	font-weight: 700;
	letter-spacing: -0.08em;
	color: var(--fx-text);
	user-select: none;
}

.fx-kern-pair__face .is-mid {
	color: var(--fx-blue);
}

.fx-kern-pair__face .is-side {
	color: var(--fx-text);
}

.fx-kern-pair__svg {
	width: 100%;
	height: 88px;
	display: block;
	pointer-events: none;
	overflow: hidden;
	flex: none;
}

.fx-kern-pair__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 16px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	color: var(--fx-blue);
	line-height: 1;
}

.fx-kern-pair:not(.is-selected) .fx-kern-pair__meta {
	color: var(--fx-text-faint);
}

.fx-kern__focus-empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 500;
	color: var(--fx-text-faint);
}

.fx-kern__focus-face {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11rem;
	font-weight: 800;
	letter-spacing: -0.08em;
	line-height: 1;
	color: var(--fx-text);
	user-select: none;
}

.fx-kern__focus-face .is-mid {
	color: var(--fx-blue);
}

.fx-kern__focus-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	display: block;
	overflow: hidden;
	touch-action: none;
	user-select: none;
}

.fx-kern-guide {
	cursor: ew-resize;
}

.fx-kern-guide__hit {
	cursor: ew-resize;
}

.fx-kern-slot {
	cursor: pointer;
}

.fx-kern-slot__hit {
	cursor: pointer;
}

.fx-kern-slot.is-selected .fx-kern-slot__hit {
	cursor: default;
}

.fx-kern-guide__line {
	stroke: #94a3b8;
	stroke-width: 1.25;
	stroke-dasharray: 5 4;
	stroke-linecap: round;
	pointer-events: none;
}

.fx-kern-metrics {
	pointer-events: none;
}

.fx-kern-metrics-hits {
	pointer-events: none;
}

.fx-kern-metrics__hit {
	pointer-events: all;
	fill: transparent;
	cursor: ns-resize;
}

.fx-kern-metrics__line.is-active {
	stroke-width: 2;
}

.fx-kern-metrics__grid {
	stroke: rgba(15, 23, 42, 0.06);
	stroke-width: 1;
}

.fx-kern-metrics__line {
	stroke: rgba(51, 102, 255, 0.35);
	stroke-width: 1;
	stroke-dasharray: 6 5;
	pointer-events: none;
}

.fx-kern-metrics__line--base {
	stroke: rgba(15, 23, 42, 0.45);
	stroke-dasharray: none;
	stroke-width: 1.25;
}

.fx-kern-metrics__line--cap,
.fx-kern-metrics__line--x {
	stroke: rgba(51, 102, 255, 0.42);
}

.fx-kern-metrics__line--asc,
.fx-kern-metrics__line--desc {
	stroke: rgba(100, 116, 139, 0.4);
}

.fx-kern-metrics__label {
	fill: rgba(100, 116, 139, 0.75);
	font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.fx-kern-metrics__label--base {
	fill: rgba(15, 23, 42, 0.7);
}

html[data-fx-theme='dark'] .fx-kern-metrics__grid {
	stroke: rgba(255, 255, 255, 0.05);
}

html[data-fx-theme='dark'] .fx-kern-metrics__line {
	stroke: rgba(142, 182, 255, 0.35);
}

html[data-fx-theme='dark'] .fx-kern-metrics__line--base {
	stroke: rgba(255, 255, 255, 0.45);
}

html[data-fx-theme='dark'] .fx-kern-metrics__label {
	fill: rgba(226, 232, 240, 0.55);
}

html[data-fx-theme='dark'] .fx-kern-metrics__label--base {
	fill: rgba(248, 250, 252, 0.7);
}

.fx-kern-guide.is-sidebearing .fx-kern-guide__line {
	stroke-dasharray: 3 5;
}

.fx-kern-guide__val {
	fill: #64748b;
	pointer-events: none;
	font-size: 13px;
}

.fx-kern-guide:hover .fx-kern-guide__line,
.fx-kern__focus.is-dragging .fx-kern-guide.is-active .fx-kern-guide__line {
	stroke: #3366ff;
	stroke-width: 1.75;
	stroke-dasharray: none;
}

.fx-kern-guide:hover .fx-kern-guide__val,
.fx-kern__focus.is-dragging .fx-kern-guide.is-active .fx-kern-guide__val {
	fill: #3366ff;
}

html[data-fx-theme='dark'] .fx-kern-guide__line {
	stroke: rgba(255, 255, 255, 0.38);
}

html[data-fx-theme='dark'] .fx-kern-guide__val {
	fill: rgba(255, 255, 255, 0.5);
}

html[data-fx-theme='dark'] .fx-kern-guide:hover .fx-kern-guide__line,
html[data-fx-theme='dark'] .fx-kern__focus.is-dragging .fx-kern-guide.is-active .fx-kern-guide__line {
	stroke: #8eb6ff;
}

html[data-fx-theme='dark'] .fx-kern-guide:hover .fx-kern-guide__val,
html[data-fx-theme='dark'] .fx-kern__focus.is-dragging .fx-kern-guide.is-active .fx-kern-guide__val {
	fill: #8eb6ff;
}

.fx-kern__focus.is-dragging,
.fx-kern__focus.is-dragging .fx-kern-guide,
.fx-kern__focus.is-dragging .fx-kern-guide__hit {
	cursor: ew-resize;
}

.fx-kern-dir.is-dragging .fx-kern-dir__value {
	color: var(--fx-blue);
}

.fx-kern__pair-under {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px 16px 16px;
	border-top: 1px solid var(--fx-border);
	background: rgba(255, 255, 255, 0.55);
}

.fx-kern__pair-under[hidden] {
	display: none !important;
}

.fx-kern__pair-under-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.fx-kern__pair-under-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px;
	align-items: stretch;
}

.fx-kern__pair-under-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.fx-kern__pair-under-note {
	margin: 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--fx-text-muted);
}

.fx-kern__glyph-panel {
	display: flex;
	flex-direction: column;
	gap: 0;
	flex: 1;
	min-height: 0;
}

.fx-kern__adjust-fields {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px 16px;
	align-items: end;
	padding: 14px 16px 16px;
}

.fx-kern__adjust-fields .fx-vz__field {
	margin: 0;
	min-width: 0;
}

@media (max-width: 1100px) {
	.fx-kern__adjust-fields {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.fx-kern__adjust-fields {
		grid-template-columns: minmax(0, 1fr);
	}
}

.fx-kern__glyph-panel[hidden] {
	display: none !important;
}

.fx-kern__reset {
	flex: none;
	margin: 0;
	padding: 6px 10px;
	border: 1px solid var(--fx-border);
	border-radius: 8px;
	background: #ffffff;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-text-secondary, #64748b);
	cursor: pointer;
}

.fx-kern__reset:hover {
	border-color: rgba(15, 23, 42, 0.18);
	background: #f8fafc;
	color: var(--fx-text, #0f172a);
	text-decoration: none;
}

html[data-fx-theme='dark'] .fx-kern__adjust-head {
	background: rgba(255, 255, 255, 0.03);
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

html[data-fx-theme='dark'] .fx-kern__adjust-head-icon {
	background: #1a1d21;
	border-color: rgba(255, 255, 255, 0.1);
	color: #d1d5db;
}

html[data-fx-theme='dark'] .fx-kern__adjust-title {
	color: #f3f4f6;
}

html[data-fx-theme='dark'] .fx-kern__adjust-sub {
	color: #9ca3af;
}

html[data-fx-theme='dark'] .fx-kern__reset {
	background: #1a1d21;
	border-color: rgba(255, 255, 255, 0.12);
	color: #d1d5db;
}

html[data-fx-theme='dark'] .fx-kern__reset:hover {
	background: rgba(255, 255, 255, 0.06);
	color: #f3f4f6;
}

.fx-kern-dir {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 0;
	border-top: 1px solid var(--fx-border);
}

.fx-kern-dir:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.fx-kern-dir.fx-kern-dir--under {
	padding: 0;
	border-top: 0;
	gap: 6px;
}

.fx-kern-dir--under .fx-kern-dir__head {
	align-items: center;
	min-height: 22px;
}

.fx-kern-dir--under .fx-kern-dir__range {
	width: 100%;
	margin: 0;
	display: block;
}

.fx-kern-dir__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.fx-kern-dir__pair {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--fx-text);
}

.fx-kern-dir__value {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-blue);
}

.fx-kern-dir__scale {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 10px;
	font-weight: 500;
	color: var(--fx-text-faint);
}

.fx-kern__pair-under .fx-btn {
	width: auto;
}

.fx-kern__adjust-note {
	margin: 0;
	margin-top: auto;
	padding-top: 8px;
	border-top: 1px solid var(--fx-border);
	font-size: 12px;
	line-height: 1.45;
	color: var(--fx-text-muted);
}

/* ---- Export / Preview ---- */

.fx-export {
	flex: 1;
	min-height: 0;
	width: 100%;
	max-width: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 18px 20px 20px;
	overflow: auto;
	box-sizing: border-box;
}

.fx-export__top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.fx-export__top[hidden] {
	display: none !important;
}

.fx-export__title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--fx-text);
}

.fx-export__sub {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--fx-text-muted);
}

.fx-export__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.fx-export__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}

.fx-export__main,
.fx-export__side {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.fx-export-card {
	background: #fff;
	border: 1px solid var(--fx-border);
	border-radius: var(--fx-radius-lg);
	box-shadow: var(--fx-shadow-card);
	padding: 16px 18px;
	min-width: 0;
}

.fx-export-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.fx-export-card__head h3 {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fx-text-muted);
}

.fx-export-card__stage {
	min-height: 140px;
	max-height: 320px;
	display: block;
	overflow: auto;
	color: var(--fx-text);
	font-family: "FontxsisPreview", var(--fx-font);
	font-weight: 400;
	font-size: 96px;
	line-height: 1.08;
	letter-spacing: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: break-word;
	font-kerning: normal;
	font-feature-settings: "kern" 1;
	cursor: text;
	outline: none;
	caret-color: var(--fx-blue);
}

.fx-export-card__stage:focus {
	outline: none;
}

.fx-export-card__stage:empty::before {
	content: attr(data-placeholder);
	color: var(--fx-text-faint);
	font-family: var(--fx-font);
	font-size: 18px;
	font-weight: 500;
	pointer-events: none;
}

.fx-export-card__stage--body {
	margin: 0;
	min-height: 0;
	max-height: none;
	overflow: visible;
	font-size: var(--fx-sampler-size, 70px);
	line-height: var(--fx-sampler-lh, 1.35);
	letter-spacing: calc(var(--fx-sampler-tracking, 0) * 1px);
	color: var(--fx-sampler-color, #ffffff);
	text-align: var(--fx-sampler-align, center);
	font-kerning: normal;
	font-feature-settings: "kern" 1;
	cursor: var(--fx-cursor-v);
	caret-color: auto;
}

.fx-export-card__stage--body:empty::before {
	content: none;
}

.fx-export-card__stage--body.is-empty {
	font-family: var(--fx-font);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.72);
}

.fx-export-card--sampler {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px 18px 18px;
}

.fx-export-sampler__title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--fx-text);
}

.fx-export-sampler__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
}

.fx-export-sampler__features select {
	appearance: none;
	-webkit-appearance: none;
	min-height: 32px;
	padding: 6px 28px 6px 10px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 8px;
	background:
		linear-gradient(45deg, transparent 50%, var(--fx-text-muted) 50%) calc(100% - 12px) calc(50% - 2px) / 5px 5px no-repeat,
		linear-gradient(135deg, var(--fx-text-muted) 50%, transparent 50%) calc(100% - 8px) calc(50% - 2px) / 5px 5px no-repeat,
		#fff;
	color: var(--fx-text);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	max-width: 180px;
	cursor: var(--fx-cursor-v);
}

.fx-export-sampler__features select:disabled {
	opacity: 1;
	color: var(--fx-text);
}

.fx-export-sampler__control {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 600;
	color: var(--fx-text-secondary);
	white-space: nowrap;
	flex: 1 1 180px;
	min-width: 160px;
	max-width: 280px;
}

.fx-export-sampler__control input[type='range'] {
	flex: 1 1 auto;
	width: 100%;
	min-width: 120px;
}

.fx-export-sampler__control strong {
	min-width: 28px;
	font-size: 12px;
	font-weight: 700;
	color: var(--fx-text);
	font-variant-numeric: tabular-nums;
}

.fx-export-sampler__swatch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 600;
	color: var(--fx-text-secondary);
}

.fx-export-sampler__swatch input[type='color'] {
	width: 28px;
	height: 22px;
	padding: 0;
	border: 1px solid var(--fx-border-strong);
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
}

.fx-export-sampler__swatch input[type='color']::-webkit-color-swatch-wrapper {
	padding: 2px;
}

.fx-export-sampler__swatch input[type='color']::-webkit-color-swatch {
	border: none;
	border-radius: 3px;
}

.fx-export-sampler__align {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

.fx-export-sampler__align-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 6px;
	background: transparent;
	color: var(--fx-text-secondary);
	cursor: pointer;
}

.fx-export-sampler__align-btn:hover {
	background: var(--fx-bg-soft);
	color: var(--fx-text);
}

.fx-export-sampler__align-btn.is-active {
	background: #ffe8e4;
	border-color: #e35d4a;
	color: #c2412f;
}

.fx-export-sampler__panel {
	--fx-sampler-size: 70px;
	--fx-sampler-lh: 1.35;
	--fx-sampler-tracking: 0;
	--fx-sampler-color: #ffffff;
	--fx-sampler-bg: var(--fx-blue);
	--fx-sampler-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	padding: 28px 32px;
	border-radius: 14px;
	background: var(--fx-sampler-bg);
	overflow: auto;
}

.fx-export-sampler__panel .fx-export-card__stage--body {
	width: 100%;
	background: transparent;
}

.fx-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.fx-export-card__stage.is-empty {
	font-family: "FontxsisPreview", var(--fx-font);
	color: var(--fx-text);
}

.fx-export-card__stage.is-empty:empty::before {
	font-family: var(--fx-font);
	font-size: 18px;
	color: var(--fx-text-faint);
}

.fx-export-card__foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--fx-border);
	flex-wrap: wrap;
}

.fx-export-card__spacing-row {
	display: flex;
	flex: 1;
	gap: 16px;
	min-width: 0;
	flex-wrap: wrap;
}

.fx-export-card__spacing {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	min-width: 160px;
	font-size: 12px;
	color: var(--fx-text-secondary);
}

.fx-export-card__spacing strong {
	font-weight: 700;
	color: var(--fx-text);
}

.fx-export-card__spacing input[type='range'] {
	width: 100%;
}

.fx-export__case {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
	align-items: center;
}

.fx-export-sampler__toolbar .fx-export__case-btn {
	height: 28px;
	padding: 0 10px;
	border-radius: 8px;
}

.fx-export__case-btn {
	height: 32px;
	padding: 0 12px;
	border-radius: var(--fx-radius-pill);
	border: 1px solid var(--fx-border-strong);
	background: #fff;
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-text-secondary);
}

.fx-export__case-btn:hover {
	background: var(--fx-bg-soft);
	color: var(--fx-text);
}

.fx-export__case-btn.is-active {
	border-color: var(--fx-blue);
	background: var(--fx-blue-soft);
	color: var(--fx-blue);
}

.fx-export-card__meta {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-text-faint);
	white-space: nowrap;
	padding-bottom: 8px;
}

.fx-export-tray {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
	gap: 8px;
}

.fx-export-tray__cell {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 10px;
	background: var(--fx-bg-soft);
	font-family: "FontxsisPreview", var(--fx-font);
	font-size: 28px;
	line-height: 1;
	color: var(--fx-text);
	cursor: pointer;
}

.fx-export-tray__cell:hover {
	background: color-mix(in srgb, var(--fx-blue) 12%, var(--fx-bg-soft));
}

.fx-export-tray__cell:focus-visible {
	outline: 2px solid var(--fx-blue);
	outline-offset: 2px;
}

.fx-export-tray__cell.is-empty {
	font-family: var(--fx-font);
	font-size: 11px;
	color: var(--fx-text-faint);
	background: transparent;
	border: 1px dashed var(--fx-border-strong);
}

.fx-export-tray__cell.is-empty:hover {
	background: color-mix(in srgb, var(--fx-blue) 8%, transparent);
}

.fx-export-ladder {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fx-export-ladder__row {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 10px;
	align-items: baseline;
}

.fx-export-ladder__size {
	font-size: 11px;
	font-weight: 600;
	color: var(--fx-text-faint);
	font-variant-numeric: tabular-nums;
}

.fx-export-ladder__text {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	font-family: "FontxsisPreview", var(--fx-font);
	line-height: 1.1;
	color: var(--fx-text);
}

.fx-fontinfo {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 0;
}

.fx-fontinfo__nav {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--fx-border-strong);
	border-radius: var(--fx-radius-pill);
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.fx-fontinfo__nav-btn {
	padding: 6px 14px;
	border: 0;
	border-radius: var(--fx-radius-pill);
	background: transparent;
	color: var(--fx-text-muted);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.fx-fontinfo__nav-btn:hover {
	color: var(--fx-text);
}

.fx-fontinfo__nav-btn.is-active {
	background: var(--fx-blue);
	color: var(--fx-on-blue);
}

.fx-fontinfo__nav-btn.is-active:hover {
	background: var(--fx-blue-hover);
	color: var(--fx-on-blue);
}

.fx-fontinfo__pages {
	min-width: 0;
	max-height: min(52vh, 520px);
	overflow: auto;
	padding: 14px 14px 16px;
	border: 1px solid var(--fx-border);
	border-radius: 12px;
	background: #fff;
}

.fx-fontinfo__page[hidden] {
	display: none;
}

.fx-fontinfo__page-lead {
	margin: 0 0 12px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--fx-text-muted);
}

.fx-fontinfo__grid {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 10px 10px;
}

.fx-fontinfo__field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.fx-fontinfo__field--full {
	grid-column: 1 / -1;
}

.fx-fontinfo__field--grow {
	grid-column: 2 / -1;
}

.fx-fontinfo__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--fx-text-muted);
}

.fx-fontinfo__input {
	width: 100%;
	min-height: 34px;
	padding: 7px 10px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 9px;
	background: #fff;
	color: var(--fx-text);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fx-fontinfo__input:focus {
	outline: none;
	border-color: var(--fx-blue);
	box-shadow: 0 0 0 3px var(--fx-blue-tint);
}

.fx-fontinfo__input--area {
	min-height: 72px;
	resize: vertical;
	line-height: 1.4;
}

.fx-fontinfo__row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.fx-fontinfo__row--version {
	flex-wrap: nowrap;
}

.fx-fontinfo__input--num {
	width: 64px;
	flex: 0 0 auto;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.fx-fontinfo__dot {
	font-weight: 700;
	color: var(--fx-text-muted);
}

.fx-fontinfo__version-preview {
	margin-left: auto;
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-text-faint);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.fx-fontinfo__check {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--fx-text-secondary);
	cursor: pointer;
}

.fx-fontinfo__check input {
	width: 15px;
	height: 15px;
	accent-color: var(--fx-blue);
}

@media (max-width: 1100px) {
	.fx-export__grid {
		grid-template-columns: 1fr;
	}

	.fx-export-sampler__align {
		margin-left: 0;
	}

	.fx-kern {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto minmax(0, 1fr) auto auto;
	}

	.fx-kern__spacing,
	.fx-kern__focus-wrap,
	.fx-kern__main,
	.fx-kern__adjust,
	.fx-kern__side {
		grid-column: 1 / -1;
		grid-row: auto;
		position: relative;
		top: auto;
		max-height: min(420px, 50vh);
	}

	.fx-kern__side {
		width: 100%;
		min-width: 0;
		max-width: none;
	}
}

.fx-shell[data-fx-step="preview"] {
	--fx-wf-right: 0;
}

.fx-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 50;
	padding: 10px 16px;
	border-radius: var(--fx-radius-pill);
	background: var(--fx-text);
	color: var(--fx-bg);
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25);
	animation: fx-toast-in 0.22s ease;
}

html[data-fx-theme='dark'] .fx-toast {
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

@keyframes fx-toast-in {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

/* ---- Responsive ---- */

@media (max-width: 1100px) {
	.fx-overview-grid {
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	}
}

@media (max-width: 900px) {
	.fx-kern {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto minmax(280px, 1fr) auto;
	}

	.fx-kern__spacing,
	.fx-kern__focus-wrap,
	.fx-kern__main,
	.fx-kern__adjust {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.fx-kern__pair-under-row {
		grid-template-columns: 1fr;
	}

	.fx-titlebar {
		padding: 0 6px 0 10px;
		gap: 8px;
	}

	.fx-titlebar__drag {
		gap: 10px;
		min-width: 0;
		flex: 1;
	}

	.fx-menubar {
		display: none;
	}

	.fx-brand__badge {
		display: none;
	}

	.fx-titlebar__actions .fx-btn--ghost {
		display: none;
	}

	.fx-shell {
		flex-direction: column;
	}

	.fx-sidebar {
		width: 100%;
		max-height: min(42vh, 320px);
		border-right: 0;
		border-bottom: 1px solid var(--fx-border);
	}

	.fx-sidebar__sys {
		padding: 8px;
	}

	.fx-workflow-bar {
		padding: 8px;
		min-height: 48px;
	}

	.fx-workflow-pill {
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.fx-workflow-pill::-webkit-scrollbar {
		display: none;
	}

	.fx-workflow-pill__btn {
		padding: 6px 10px;
		font-size: 11px;
	}

	.fx-sidebar__glyphs {
		max-height: 140px;
	}

	.fx-vz:not(.fx-vz--solo) {
		grid-template-columns: 1fr;
		grid-template-rows: minmax(280px, 1fr) auto;
	}

	.fx-vz-glyphs__grid {
		grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
	}

	.fx-vz:not(.fx-vz--solo) .fx-vz__panel {
		padding: 14px;
		border-left: 0;
		border-top: 1px solid var(--fx-border);
	}

	.fx-vz__actions {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.fx-vz__actions .fx-btn {
		width: auto;
		flex: 1 1 auto;
	}

	.fx-overview__head {
		flex-direction: column;
		align-items: stretch;
		padding: 16px 16px 8px;
	}

	.fx-overview__title {
		font-size: 22px;
	}

	.fx-overview__sub {
		font-size: 13px;
	}

	.fx-overview-grid {
		padding: 0;
		grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
		gap: 1px;
	}

	.fx-kern {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto minmax(0, 1fr) auto;
	}

	.fx-kern__spacing {
		grid-column: 1 / -1;
	}

	.fx-kern__focus-wrap,
	.fx-kern__main,
	.fx-kern__adjust {
		grid-column: 1;
		grid-row: auto;
	}

	.fx-workspace .fx-kern__main {
		border-right: 0;
		border-bottom: 1px solid var(--fx-border);
	}
}

@media (max-width: 720px) {
	:root {
		--fx-sidebar-w: 100%;
		--fx-titlebar-h: 46px;
	}

	.fx-glyph-statusbar {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 6px;
		padding: 8px 10px;
		min-height: 0;
	}

	.fx-glyph-statusbar__group--left,
	.fx-glyph-statusbar__group--right {
		justify-self: center;
	}

	.fx-workflow-pill__btn {
		padding: 6px 8px;
		font-size: 10.5px;
	}

	.fx-window-controls__btn {
		width: 36px;
	}

	.fx-titlebar__actions .fx-btn--primary {
		padding: 0 10px;
		font-size: 11.5px;
	}

	.fx-brand__name {
		font-size: 13px;
	}

	.fx-overview__panel {
		border-radius: 16px;
	}

	.fx-overview__head .fx-btn {
		width: 100%;
	}

	.fx-overview-grid {
		grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
		gap: 1px;
	}

	.fx-glyph-card__label {
		font-size: 10px;
		padding: 6px 2px;
	}

	.fx-glyph-card__status {
		top: 5px;
		right: 5px;
		width: 5px;
		height: 5px;
	}
}

@media (max-width: 560px) {
	.fx-brand__name {
		max-width: 96px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.fx-titlebar__actions .fx-btn--primary {
		letter-spacing: -0.02em;
	}

	.fx-breadcrumb__badge {
		display: none;
	}

	.fx-overview__title {
		font-size: 20px;
	}

	.fx-overview__sub {
		display: none;
	}

	.fx-overview-grid {
		grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
		padding: 0;
		gap: 1px;
	}
}

@media (max-height: 700px) {
	.fx-overview__head {
		padding-top: 14px;
		padding-bottom: 6px;
	}

	.fx-overview__sub {
		display: none;
	}
}

/* ---- Web responsive: tablet & desktop (≥768). Phone (≤767) left as-is. ---- */
html[data-fx-surface='web'] {
	--fx-dock-w: 240px;
}

@media (min-width: 768px) and (max-width: 1279px) {
	html[data-fx-surface='web'] {
		--fx-dock-w: clamp(220px, 20vw, 240px);
		--fx-navrail-expanded-w: 200px;
		--fx-vz-panel-w: clamp(260px, 24vw, 300px);
	}

	html[data-fx-surface='web'] .fx-breadcrumb-bar {
		gap: 8px;
		padding: 0 10px;
		min-width: 0;
	}

	html[data-fx-surface='web'] .fx-breadcrumb-bar__actions {
		min-width: 0;
		flex: 0 1 auto;
		overflow-x: auto;
		scrollbar-width: thin;
	}

	html[data-fx-surface='web'] .fx-gb-chrome,
	html[data-fx-surface='web'] .fx-sb .fx-gb-chrome {
		max-width: calc(100% - 20px);
	}

	html[data-fx-surface='web'] .fx-gb-chrome__inner {
		max-width: 100%;
		overflow-x: auto;
		scrollbar-width: thin;
	}

	html[data-fx-surface='web'] .fx-vz:not(.fx-vz--solo) {
		grid-template-columns: minmax(0, 1fr) var(--fx-vz-panel-w, 280px);
	}
}

@media (min-width: 768px) and (max-width: 900px) {
	/* Keep editor chrome desktop-like on tablets; phone stack stays ≤767. */
	html[data-fx-surface='web'] .fx-shell {
		flex-direction: row;
	}

	html[data-fx-surface='web'] .fx-shell__body > .fx-sidebar {
		display: none !important;
	}

	html[data-fx-surface='web'] .fx-vz--solo {
		grid-template-columns: none;
	}

	html[data-fx-surface='web'] .fx-vz--solo .fx-vz__canvas-col {
		right: 0;
	}

	html[data-fx-surface='web'] .fx-vz--solo .fx-gb-dock {
		position: absolute;
		top: var(--fx-ruler-inset-y, 0px);
		right: 0;
		bottom: 0;
		width: var(--fx-dock-w, 240px);
		min-width: var(--fx-dock-w, 240px);
		max-width: var(--fx-dock-w, 240px);
		height: auto;
		background: transparent;
		border-left: 0;
		border-top: 0;
	}

	html[data-fx-surface='web'] .fx-menubar {
		display: none;
	}

	html[data-fx-surface='web'] .fx-overview-grid {
		grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	}

	html[data-fx-surface='web'] .fx-kern {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 1280px) and (max-width: 1439px) {
	html[data-fx-surface='web'] {
		--fx-dock-w: 240px;
	}
}

@media (min-width: 1440px) {
	html[data-fx-surface='web'] {
		--fx-dock-w: 260px;
	}
}

@media (min-width: 768px) {
	html[data-fx-surface='web'] .fx-workspace,
	html[data-fx-surface='web'] .fx-vz--solo,
	html[data-fx-surface='web'] .fx-gb,
	html[data-fx-surface='web'] .fx-sb--editor {
		min-width: 0;
	}

	html[data-fx-surface='web'] .fx-vz--solo {
		grid-template-columns: none;
	}

	html[data-fx-surface='web'] .fx-vz--solo .fx-vz__canvas-col {
		right: 0;
	}

	html[data-fx-surface='web'] .fx-gb-dock {
		position: absolute;
		top: var(--fx-ruler-inset-y, 0px);
		right: 0;
		bottom: 0;
		width: var(--fx-dock-w, 240px);
		min-width: var(--fx-dock-w, 240px);
		max-width: var(--fx-dock-w, 240px);
		background: transparent;
		border-left: 0;
	}
}

.fx-shell[data-fx-step="sketchboard"] .fx-sidebar,
.fx-shell[data-fx-step="glyphsbuilder"] .fx-sidebar,
.fx-shell[data-fx-step="kerning"] .fx-sidebar,
.fx-shell[data-fx-step="preview"] .fx-sidebar {
	display: none !important;
}

.fx-shell[data-fx-step="sketchboard"] .fx-workspace,
.fx-shell[data-fx-step="glyphsbuilder"] .fx-workspace,
.fx-shell[data-fx-step="kerning"] .fx-workspace,
.fx-shell[data-fx-step="preview"] .fx-workspace {
	width: 100%;
	flex: 1;
	min-width: 0;
}

/* Hide workflow pill on Sketchboard (web titlebar + desktop bar) */
.fx-shell[data-fx-step="sketchboard"] .fx-workflow-pill,
html:has(.fx-shell[data-fx-step="sketchboard"]) .fx-titlebar .fx-workflow-pill {
	display: none !important;
}

/* Web: collapse app titlebar on Glyphs Builder for canvas height, but keep
   notifications (and account/menu) as a floating strip — hiding the whole
   titlebar was trapping the notice panel and causing open/close glitches. */
html[data-fx-surface='web']:has(.fx-shell[data-fx-step='glyphsbuilder']) {
	--fx-titlebar-h: 0px;
}

html[data-fx-surface='web']:has(.fx-shell[data-fx-step='glyphsbuilder']) .fx-titlebar {
	position: fixed;
	top: 0;
	right: 0;
	left: auto;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 8px 12px 0 0;
	border: 0;
	background: transparent;
	backdrop-filter: none;
	pointer-events: none;
	z-index: 70;
	overflow: visible;
}

html[data-fx-surface='web']:has(.fx-shell[data-fx-step='glyphsbuilder']) .fx-titlebar__drag,
html[data-fx-surface='web']:has(.fx-shell[data-fx-step='glyphsbuilder']) .fx-titlebar__center {
	display: none !important;
}

html[data-fx-surface='web']:has(.fx-shell[data-fx-step='glyphsbuilder']) .fx-titlebar__actions {
	pointer-events: auto;
	max-width: none;
	margin-left: 0;
	gap: 6px;
}

html[data-fx-surface='web']:has(.fx-shell[data-fx-step='glyphsbuilder']) .fx-titlebar__actions .fx-gb-chrome__cta,
html[data-fx-surface='web']:has(.fx-shell[data-fx-step='glyphsbuilder']) .fx-titlebar__actions .fx-help__trigger {
	display: none !important;
}

/* Desktop Electron: full titlebar on Glyphs Builder — menubar/account/notices,
   but never Import SVG/JPG or AI Generate (those stay on All Glyphs / home). */
html[data-fx-surface='desktop']:has(.fx-shell[data-fx-step='glyphsbuilder']) .fx-titlebar__actions .fx-gb-chrome__cta,
html[data-fx-surface='desktop']:has(.fx-shell[data-fx-step='glyphsbuilder']) .fx-titlebar__actions [data-fx-header-ai-generate],
html[data-fx-surface='desktop']:has(.fx-shell[data-fx-step='glyphsbuilder']) .fx-titlebar__actions [data-fx-header-sb-import] {
	display: none !important;
}

/* ---- Glyphs Builder (full-width outline editor) ---- */

.fx-gb {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	background: var(--fx-surface);
	--fx-gb-grid-size: 32px;
	--fx-gb-grid-opacity: 1;
}

.fx-gb__stage {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.fx-gb-chrome {
	position: absolute;
	top: calc(12px + var(--fx-ruler-inset-y, 0px));
	left: 50%;
	z-index: 6;
	transform: translateX(-50%);
	pointer-events: none;
}

.fx-gb-chrome__inner {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	border-radius: 10px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	background: #ffffff;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.04),
		0 10px 28px rgba(15, 23, 42, 0.12);
	pointer-events: auto;
}

.fx-gb-grid-pop {
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	z-index: 7;
	width: min(360px, calc(100vw - 32px));
	padding: 16px;
	border-radius: 14px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	background: #ffffff;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.04),
		0 16px 40px rgba(15, 23, 42, 0.14);
	transform: translateX(-50%);
	pointer-events: auto;
}

.fx-gb-grid-pop[hidden] {
	display: none;
}

.fx-gb-grid-pop__title {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #111827;
}

.fx-gb-grid-pop__seg {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.fx-gb-grid-pop__choice {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 38px;
	padding: 0 12px;
	border: 1px solid rgba(15, 23, 42, 0.12);
	border-radius: 10px;
	background: #ffffff;
	color: #111827;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.01em;
	cursor: pointer;
	transition:
		background 0.12s ease,
		color 0.12s ease,
		border-color 0.12s ease;
}

.fx-gb-grid-pop__choice:hover:not(.is-active) {
	background: #f8fafc;
}

.fx-gb-grid-pop__choice.is-active {
	border-color: transparent;
	background: #111827;
	color: #ffffff;
}

.fx-gb-grid-pop__choice svg {
	display: block;
	flex: none;
}

.fx-gb-grid-pop__hint {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: #6b7280;
}

.fx-gb-grid-pop__rule {
	height: 1px;
	margin: 14px 0;
	background: rgba(15, 23, 42, 0.08);
}

.fx-gb-grid-pop__check {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	font-size: 13px;
	font-weight: 600;
	color: #111827;
	cursor: pointer;
	user-select: none;
}

.fx-gb-grid-pop__check input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: #111827;
	cursor: pointer;
}

.fx-gb[data-fx-gb-grid='off'] .fx-vz--solo .fx-vz__stage::before {
	opacity: 0;
	background-image: none;
}

.fx-gb-grid-pop__iso {
	display: grid;
	gap: 8px;
	margin-top: 2px;
}

.fx-gb-grid-pop__iso[hidden] {
	display: none;
}

.fx-gb[data-fx-gb-grid='on'][data-fx-gb-grid-type='square'] .fx-vz--solo .fx-vz__stage::before {
	opacity: var(--fx-gb-grid-opacity);
	background-color: #ffffff;
	background-image:
		linear-gradient(to right, #d4d4d8 1px, transparent 1px),
		linear-gradient(to bottom, #d4d4d8 1px, transparent 1px);
	/* Cell size/origin synced to world lattice via JS (zoom/pan stable). */
	background-size: var(--fx-gb-grid-cell-w, var(--fx-gb-grid-size))
		var(--fx-gb-grid-cell-h, var(--fx-gb-grid-size));
	background-position: var(--fx-gb-grid-pos-x, 0px) var(--fx-gb-grid-pos-y, 0px);
}

/* Isometric is drawn on the canvas so Cube/Triangular lattices stay world-aligned. */
.fx-gb[data-fx-gb-grid='on'][data-fx-gb-grid-type='isometric'] .fx-vz--solo .fx-vz__stage::before {
	opacity: 0;
	background-image: none;
	background-color: #ffffff;
}

.fx-gb[data-fx-gb-grid-above='true'] .fx-vz--solo .fx-vz__stage::before {
	z-index: 2;
}

html[data-fx-theme='dark'] .fx-gb[data-fx-gb-grid='on'][data-fx-gb-grid-type='square'] .fx-vz--solo .fx-vz__stage::before {
	background-color: #0b0d0f;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
}

html[data-fx-theme='dark'] .fx-gb[data-fx-gb-grid='on'][data-fx-gb-grid-type='isometric'] .fx-vz--solo .fx-vz__stage::before {
	background-color: #0b0d0f;
	background-image: none;
}

.fx-gb-chrome__sep {
	width: 1px;
	height: 22px;
	margin: 0 2px;
	background: rgba(15, 23, 42, 0.1);
	flex: none;
}

.fx-gb-chrome__btn {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid rgba(15, 23, 42, 0.1);
	border-radius: 10px;
	background: #ffffff;
	color: #111827;
	cursor: pointer;
	transition:
		background 0.12s ease,
		color 0.12s ease,
		border-color 0.12s ease;
}

.fx-gb-chrome__btn[hidden],
.fx-gb-chrome__cta[hidden] {
	display: none !important;
}

/* Import SVG/JPG lives in the titlebar on All Glyphs only (toggled in JS). */
html:not(:has(.fx-shell[data-fx-step='allglyphs'])) .fx-titlebar__actions [data-fx-header-sb-import] {
	display: none !important;
}

.fx-gb-chrome__btn:hover {
	background: #f3f4f6;
}

.fx-gb-chrome__btn--solid {
	border-color: transparent;
	background: #111827;
	color: #ffffff;
}

/* Grid controls moved into Settings dock */
.fx-gb-chrome__btn[data-fx-gb-action='grid'],
.fx-gb-grid-pop {
	display: none !important;
}

.fx-gb-chrome__btn--solid:hover {
	background: #000000;
	color: #ffffff;
}

.fx-gb-chrome__btn.is-active {
	box-shadow: inset 0 0 0 2px var(--fx-blue);
}

.fx-gb-chrome__btn--danger {
	border-color: transparent;
	background: #fef2f2;
	color: #dc2626;
}

.fx-gb-chrome__btn--danger:hover {
	background: #fee2e2;
	color: #b91c1c;
}

.fx-gb-chrome__btn svg {
	display: block;
}

.fx-gb-chrome__cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 36px;
	padding: 0 14px 0 10px;
	border: 0;
	border-radius: 10px;
	background: #111827;
	color: #ffffff;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.01em;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.12s ease;
}

.fx-gb-chrome__cta:hover {
	background: #000000;
}

.fx-gb-chrome__cta--secondary {
	background: #ffffff;
	color: #111827;
	border: 1px solid rgba(17, 24, 39, 0.16);
	box-shadow: 0 1px 0 rgba(17, 24, 39, 0.04);
}

.fx-gb-chrome__cta--secondary:hover {
	background: #f3f4f6;
}

.fx-gb-chrome__cta svg {
	display: block;
	flex: none;
}

.fx-gb .fx-vz-sticky {
	display: none !important;
}

.fx-vz-shapemodes--dock {
	flex: 0 0 auto;
	margin-top: 0;
	padding: 12px;
	border: 0;
	border-bottom: 1px solid rgba(15, 23, 42, 0.1);
	border-radius: 0;
	background: #ffffff;
}

html[data-fx-theme='dark'] .fx-vz-shapemodes--dock {
	border-bottom-color: rgba(255, 255, 255, 0.1);
	background: #121417;
}

.fx-gb-glyphpick__input {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 10px;
	padding: 8px 10px;
	border: 1px solid rgba(15, 23, 42, 0.12);
	border-radius: 8px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #111827;
	background: #fff;
}

.fx-gb-glyphpick__input:focus {
	outline: 2px solid var(--fx-blue-ring);
	border-color: var(--fx-blue);
}

.fx-gb-glyphpick__picker {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	min-height: 0;
}

.fx-gb-glyphpick__filter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex: none;
}

.fx-gb-glyphpick__filter-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #9ca3af;
}

.fx-gb-glyphpick__filter select {
	flex: 1;
	min-width: 0;
	max-width: 160px;
	padding: 6px 8px;
	border: 1px solid rgba(15, 23, 42, 0.12);
	border-radius: 8px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: #111827;
	background: #fff;
	cursor: pointer;
}

.fx-gb-glyphpick__filter select:focus {
	outline: 2px solid var(--fx-blue-ring);
	border-color: var(--fx-blue);
}

.fx-gb-glyphpick__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 6px;
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	align-content: start;
	overflow: auto;
	padding: 2px 2px 8px;
}

.fx-gb-glyphpick__char {
	aspect-ratio: 1;
	min-height: 40px;
	border: 1px solid rgba(15, 23, 42, 0.1);
	border-radius: 10px;
	background: #fff;
	color: #111827;
	font: inherit;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.fx-gb-glyphpick__char:hover {
	border-color: #93c5fd;
	background: #eff6ff;
}

.fx-gb-glyphpick__char.is-active {
	border-color: var(--fx-blue);
	background: var(--fx-blue);
	color: var(--fx-on-blue);
}

.fx-gb-glyphpick__empty {
	grid-column: 1 / -1;
	margin: 8px 0;
	font-size: 12px;
	color: #6b7280;
	text-align: center;
}


.fx-gb-settings {
	flex: 0 0 auto;
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	padding: 0 0 12px;
	border-radius: 0;
	border: 0;
	border-bottom: 1px solid rgba(15, 23, 42, 0.1);
	background: #ffffff;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.fx-gb-settings > *:not(.fx-dock-panel__head) {
	margin-left: 10px;
	margin-right: 10px;
}

.fx-gb-opentype {
	flex: 0 0 auto;
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	padding: 0 0 12px;
	border-radius: 0;
	border: 0;
	border-bottom: 1px solid rgba(15, 23, 42, 0.1);
	background: #ffffff;
	box-shadow: none;
}

.fx-gb-opentype[hidden] {
	display: none !important;
}

.fx-gb-opentype > *:not(.fx-dock-panel__head) {
	margin-left: 12px;
	margin-right: 12px;
}

.fx-gb-opentype__sub {
	margin: 0 0 10px;
	font-size: 11px;
	line-height: 1.4;
	color: var(--fx-text-muted, #6b7280);
}

.fx-gb-opentype__group {
	margin-bottom: 12px;
}

.fx-gb-opentype__group:last-child {
	margin-bottom: 0;
}

.fx-gb-opentype__group-label {
	margin: 0 0 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fx-text-faint, #9ca3af);
}

.fx-gb-opentype__grid {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.fx-gb-opentype__card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex: 0 0 auto;
	width: 72px;
	gap: 4px;
	margin: 0;
	padding: 6px;
	border: 1px solid rgba(15, 23, 42, 0.1);
	border-radius: 10px;
	background: #f8fafc;
	color: #111827;
	cursor: pointer;
	text-align: center;
	font: inherit;
}

.fx-gb-opentype__card:hover {
	border-color: rgba(15, 23, 42, 0.28);
	background: #f1f5f9;
}

.fx-gb-opentype__face {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
	color: #111827;
}

.fx-gb-opentype__face svg {
	width: 100%;
	height: 100%;
	display: block;
}

.fx-gb-opentype__name {
	display: block;
	min-width: 0;
	padding: 0 2px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--fx-text-muted, #4b5563);
}

html[data-fx-theme='dark'] .fx-gb-opentype {
	background: #151a24;
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-fx-theme='dark'] .fx-gb-opentype__card {
	border-color: rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
	color: #f3f5fa;
}

html[data-fx-theme='dark'] .fx-gb-opentype__card:hover {
	border-color: rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.08);
}

html[data-fx-theme='dark'] .fx-gb-opentype__face {
	background: #0f131c;
	color: #f3f5fa;
}

html[data-fx-theme='dark'] .fx-gb-opentype__name {
	color: #9ca3af;
}

.fx-sb-template {
	flex: 0 0 auto;
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	padding: 0 0 12px;
	border-radius: 0;
	border: 0;
	border-bottom: 1px solid rgba(15, 23, 42, 0.1);
	background: #ffffff;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.fx-sb-template > *:not(.fx-dock-panel__head) {
	margin-left: 12px;
	margin-right: 12px;
}

.fx-sb-template__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fx-sb-template__btn {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #111827;
	text-align: left;
	cursor: pointer;
}

.fx-sb-template__btn:hover {
	background: rgba(15, 23, 42, 0.06);
}

.fx-sb-template__btn.is-active {
	background: rgba(15, 23, 42, 0.1);
}

.fx-sb-template__btn.is-filled:not(.is-active) .fx-sb-template__icon {
	box-shadow: inset 0 0 0 2px #3366ff;
}

.fx-sb-template__btn.is-filled .fx-sb-template__label::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 8px;
	border-radius: 50%;
	background: #3366ff;
	vertical-align: middle;
}

.fx-sb-template__icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #111827;
	color: #e5e7eb;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	flex-shrink: 0;
}

.fx-sb-template__icon--sm {
	font-size: 11px;
	letter-spacing: -0.02em;
}

.fx-sb-template__label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.fx-sb-template__hide {
	margin-top: 10px;
	width: 100%;
	height: 34px;
	border-radius: 10px;
	border: 1px solid rgba(15, 23, 42, 0.1);
	background: #fff;
	color: #4b5563;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.fx-sb-template__hide:hover {
	background: #f8fafc;
	color: #111827;
}

html[data-fx-theme='dark'] .fx-sb-template {
	background: #121417;
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: none;
}

html[data-fx-theme='dark'] .fx-sb-template .fx-gb-settings__title,
html[data-fx-theme='dark'] .fx-sb-template__label {
	color: #f3f4f6;
}

html[data-fx-theme='dark'] .fx-sb-template__btn {
	color: #e5e7eb;
}

html[data-fx-theme='dark'] .fx-sb-template__btn:hover {
	background: rgba(255, 255, 255, 0.06);
}

html[data-fx-theme='dark'] .fx-sb-template__btn.is-active {
	background: rgba(255, 255, 255, 0.1);
}

html[data-fx-theme='dark'] .fx-sb-template__btn.is-filled:not(.is-active) .fx-sb-template__icon {
	box-shadow: inset 0 0 0 2px #5b8cff;
}

html[data-fx-theme='dark'] .fx-sb-template__btn.is-filled .fx-sb-template__label::after {
	background: #5b8cff;
}

html[data-fx-theme='dark'] .fx-sb-template__icon {
	background: #0b0d0f;
	color: #d1d5db;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-fx-theme='dark'] .fx-sb-template__hide {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.12);
	color: #9ca3af;
}

html[data-fx-theme='dark'] .fx-sb-template__hide:hover {
	background: rgba(255, 255, 255, 0.06);
	color: #f3f4f6;
}

.fx-gb-settings__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: inherit;
}

.fx-gb-settings__title svg {
	flex-shrink: 0;
	display: block;
}

.fx-gb-settings__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 12px;
}

.fx-gb-settings__block {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 12px;
}

.fx-gb-settings__seg {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

.fx-gb-settings__choice {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 0 10px;
	border: 1px solid rgba(15, 23, 42, 0.14);
	border-radius: 0;
	background: #ffffff;
	color: #4b5563;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.fx-gb-settings__choice:hover:not(.is-active) {
	background: #f3f4f6;
	color: #111827;
}

.fx-gb-settings__choice.is-active {
	background: #111827;
	border-color: #111827;
	color: #ffffff;
}

html[data-fx-theme='dark'] .fx-gb-settings__choice {
	border-color: rgba(255, 255, 255, 0.12);
	background: #1a1d21;
	color: #e5e7eb;
}

html[data-fx-theme='dark'] .fx-gb-settings__choice:hover:not(.is-active) {
	background: rgba(255, 255, 255, 0.06);
}

html[data-fx-theme='dark'] .fx-gb-settings__choice.is-active {
	background: #ffffff;
	border-color: transparent;
	color: #0b0d0f;
}

.fx-gb-settings__label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	color: #4b5563;
}

.fx-gb-settings__label strong {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 700;
	color: var(--fx-blue);
}

.fx-gb-settings__check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 2px;
	margin-bottom: 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: #111827;
	cursor: pointer;
	user-select: none;
}

.fx-gb-settings__check:last-child {
	margin-bottom: 0;
}

.fx-gb-settings__check input {
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: #111827;
	cursor: pointer;
}

html[data-fx-theme='dark'] .fx-gb-dock {
	border-left-color: transparent;
	background: transparent;
}

html[data-fx-theme='dark'] .fx-gb-dock > * {
	border-left-color: rgba(255, 255, 255, 0.1);
}

html[data-fx-theme='dark'] .fx-vz-transform--gb,
html[data-fx-theme='dark'] .fx-gb-glyphpick,
html[data-fx-theme='dark'] .fx-gb-masters,
html[data-fx-theme='dark'] .fx-gb-variation,
html[data-fx-theme='dark'] .fx-gb-settings,
html[data-fx-theme='dark'] .fx-sb-template {
	border-color: rgba(255, 255, 255, 0.1);
	background: #121417 !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

html[data-fx-theme='dark'] .fx-gb-variation__tool {
	border-color: rgba(255, 255, 255, 0.16);
	background: rgba(15, 23, 42, 0.35);
	color: #e5e7eb;
}

html[data-fx-theme='dark'] .fx-gb-variation__tool:hover:not(:disabled) {
	background: rgba(51, 65, 85, 0.65);
	color: #f8fafc;
}

html[data-fx-theme='dark'] .fx-gb-variation__row {
	color: #e5e7eb;
}

html[data-fx-theme='dark'] .fx-gb-variation__row:hover {
	background: rgba(59, 130, 246, 0.18);
}

html[data-fx-theme='dark'] .fx-gb-variation__row.is-active {
	border-color: #60a5fa;
	background: rgba(37, 99, 235, 0.28);
}

html[data-fx-theme='dark'] .fx-gb-variation__row-meta {
	color: #94a3b8;
}

html[data-fx-theme='dark'] .fx-gb-variation__row.is-active .fx-gb-variation__row-meta {
	color: #93c5fd;
}

html[data-fx-theme='dark'] .fx-gb-variation__empty {
	color: #94a3b8;
	background: rgba(15, 23, 42, 0.45);
}

html[data-fx-theme='dark'] .fx-gb-variation.is-preview .fx-gb-masters__weight-row strong {
	color: #93c5fd;
}

html[data-fx-theme='dark'] .fx-dock-panel.is-collapsed > .fx-dock-panel__head {
	border-left-color: rgba(255, 255, 255, 0.1);
}

html[data-fx-theme='dark'] .fx-dock-panel__head {
	background: #3366ff;
	color: #ffffff;
}

html[data-fx-theme='dark'] .fx-dock-panel__head:hover {
	background: #2952e0;
}

html[data-fx-theme='dark'] .fx-gb-settings__check {
	color: #f3f4f6;
}

html[data-fx-theme='dark'] .fx-vz-transform--gb .fx-cr {
	border-top-color: rgba(255, 255, 255, 0.1);
}

html[data-fx-theme='dark'] .fx-vz-transform--gb .fx-vz-transform__tool,
html[data-fx-theme='dark'] .fx-vz-transform--gb .fx-vz-transform__link,
html[data-fx-theme='dark'] .fx-vz-transform--gb .fx-vz-transform__reset,
html[data-fx-theme='dark'] .fx-vz-transform--gb .fx-vz-transform__field {
	border-color: rgba(255, 255, 255, 0.12);
	background: #1a1d21;
	color: #f3f4f6;
}

html[data-fx-theme='dark'] .fx-vz-transform--gb .fx-vz-transform__tool:hover,
html[data-fx-theme='dark'] .fx-vz-transform--gb .fx-vz-transform__link:hover,
html[data-fx-theme='dark'] .fx-vz-transform--gb .fx-vz-transform__reset:hover {
	background: rgba(37, 99, 235, 0.22);
	border-color: #60a5fa;
}

html[data-fx-theme='dark'] .fx-gb-glyphpick__sub,
html[data-fx-theme='dark'] .fx-gb-glyphpick__empty,
html[data-fx-theme='dark'] .fx-gb-settings__label {
	color: #9ca3af;
}

html[data-fx-theme='dark'] .fx-gb-glyphpick__filter-label {
	color: #6b7280;
}

html[data-fx-theme='dark'] .fx-gb-glyphpick__input,
html[data-fx-theme='dark'] .fx-gb-glyphpick__filter select,
html[data-fx-theme='dark'] .fx-gb-glyphpick__char {
	border-color: rgba(255, 255, 255, 0.12);
	background: #121417;
	color: #f3f4f6;
}

html[data-fx-theme='dark'] .fx-gb-glyphpick__filter select option {
	background: #1a1d21;
	color: #f3f4f6;
}

html[data-fx-theme='dark'] .fx-gb-glyphpick__char:hover {
	border-color: #60a5fa;
	background: rgba(37, 99, 235, 0.22);
}

html[data-fx-theme='dark'] .fx-gb-glyphpick__char.is-active {
	border-color: var(--fx-blue);
	background: var(--fx-blue);
	color: var(--fx-on-blue);
}

html[data-fx-theme='dark'] .fx-gb-settings__check input {
	accent-color: #ffffff;
}

html[data-fx-theme='dark'] .fx-gb-chrome__inner {
	border-color: rgba(255, 255, 255, 0.1);
	background: #1a1d21;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.35),
		0 12px 32px rgba(0, 0, 0, 0.45);
}

html[data-fx-theme='dark'] .fx-gb-grid-pop {
	border-color: rgba(255, 255, 255, 0.1);
	background: #1a1d21;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.35),
		0 16px 40px rgba(0, 0, 0, 0.5);
}

html[data-fx-theme='dark'] .fx-gb-grid-pop__title,
html[data-fx-theme='dark'] .fx-gb-grid-pop__check {
	color: #f3f4f6;
}

html[data-fx-theme='dark'] .fx-gb-grid-pop__choice {
	border-color: rgba(255, 255, 255, 0.12);
	background: #23272c;
	color: #e5e7eb;
}

html[data-fx-theme='dark'] .fx-gb-grid-pop__choice:hover:not(.is-active) {
	background: rgba(255, 255, 255, 0.06);
}

html[data-fx-theme='dark'] .fx-gb-grid-pop__choice.is-active {
	background: #ffffff;
	color: #0b0d0f;
	border-color: transparent;
}

html[data-fx-theme='dark'] .fx-gb-grid-pop__hint {
	color: #9ca3af;
}

html[data-fx-theme='dark'] .fx-gb-grid-pop__rule {
	background: rgba(255, 255, 255, 0.1);
}

html[data-fx-theme='dark'] .fx-gb-grid-pop__check input {
	accent-color: #ffffff;
}

html[data-fx-theme='dark'] .fx-gb-chrome__sep {
	background: rgba(255, 255, 255, 0.12);
}

html[data-fx-theme='dark'] .fx-gb-chrome__btn {
	border-color: rgba(255, 255, 255, 0.12);
	background: #23272c;
	color: #e5e7eb;
}

html[data-fx-theme='dark'] .fx-gb-chrome__btn:hover {
	background: rgba(255, 255, 255, 0.08);
}

html[data-fx-theme='dark'] .fx-gb-chrome__btn--solid {
	border-color: transparent;
	background: #ffffff;
	color: #0b0d0f;
}

html[data-fx-theme='dark'] .fx-gb-chrome__btn--solid:hover {
	background: #e8eaed;
	color: #0b0d0f;
}

html[data-fx-theme='dark'] .fx-gb-chrome__btn--danger {
	border-color: transparent;
	background: rgba(248, 113, 113, 0.14);
	color: #f87171;
}

html[data-fx-theme='dark'] .fx-gb-chrome__btn--danger:hover {
	background: rgba(248, 113, 113, 0.22);
}

html[data-fx-theme='dark'] .fx-gb-chrome__cta {
	background: #ffffff;
	color: #0b0d0f;
}

html[data-fx-theme='dark'] .fx-gb-chrome__cta:hover {
	background: #e8eaed;
}

html[data-fx-theme='dark'] .fx-gb-chrome__cta--secondary {
	background: rgba(255, 255, 255, 0.08);
	color: #f3f4f6;
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow: none;
}

html[data-fx-theme='dark'] .fx-gb-chrome__cta--secondary:hover {
	background: rgba(255, 255, 255, 0.14);
}

.fx-vz--solo {
	position: relative;
	flex: 1;
	min-height: 0;
	display: block;
	height: 100%;
	overflow: hidden;
}

.fx-vz--solo .fx-vz__canvas-col {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	background: #ffffff;
	min-width: 0;
	min-height: 0;
}

.fx-vz--solo .fx-vz__stage::before {
	opacity: 0;
	background-image: none;
	background-color: transparent;
}

html[data-fx-theme='dark'] .fx-vz--solo .fx-vz__canvas-col {
	background: #0b0d0f;
}

/* Right workspace dock: sticky flush right; transparent shell so
   collapsed panels reveal the workspace underneath. */
.fx-gb-dock {
	position: absolute;
	top: var(--fx-ruler-inset-y, 0px);
	right: 0;
	bottom: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
	width: var(--fx-dock-w, 240px);
	min-width: var(--fx-dock-w, 240px);
	max-width: var(--fx-dock-w, 240px);
	height: auto;
	max-height: none;
	min-height: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	pointer-events: none;
	overflow-x: hidden;
	overflow-y: auto;
	border: 0;
	background: transparent;
	scrollbar-width: thin;
}

.fx-gb-dock > * {
	pointer-events: auto;
	position: relative;
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	flex: 0 0 auto;
	max-height: none;
	overflow: visible;
	border-radius: 0 !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border-left: 1px solid rgba(15, 23, 42, 0.12);
}

.fx-dock-panel {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	border-radius: 0;
	overflow: hidden;
}

.fx-dock-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 11px 12px;
	border: 0;
	border-radius: 0 !important;
	background: #3366ff;
	color: #ffffff;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-align: left;
	cursor: pointer;
	user-select: none;
	position: sticky;
	top: 0;
	z-index: 2;
}

.fx-dock-panel__head:hover {
	background: #2952e0;
}

.fx-dock-panel__head-start {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.fx-dock-panel__head-start svg {
	flex: none;
	display: block;
	color: #ffffff;
}

.fx-dock-panel__chevron {
	flex: none;
	display: block;
	transition: transform 0.15s ease;
}

.fx-dock-panel.is-collapsed .fx-dock-panel__chevron {
	transform: rotate(-90deg);
}

.fx-dock-panel.is-collapsed {
	background: transparent !important;
	border-left-color: transparent;
	border-bottom: 0;
}

.fx-dock-panel.is-collapsed > .fx-dock-panel__head {
	border-left: 1px solid rgba(15, 23, 42, 0.12);
}

.fx-dock-panel.is-collapsed > *:not(.fx-dock-panel__head) {
	display: none !important;
}

.fx-dock-panel > .fx-dock-panel__head + * {
	margin-top: 12px;
}

.fx-vz-shapemodes--dock {
	flex: 0 0 auto;
	margin-top: 0;
	padding: 12px;
	border: 0;
	border-bottom: 1px solid rgba(15, 23, 42, 0.1);
	border-radius: 0;
	background: #ffffff;
}

html[data-fx-theme='dark'] .fx-vz-shapemodes--dock {
	border-bottom-color: rgba(255, 255, 255, 0.1);
	background: #121417;
}

.fx-vz-transform--gb {
	flex: 0 0 auto;
	gap: 10px;
	padding: 0 0 12px;
	border: 0;
	border-bottom: 1px solid rgba(15, 23, 42, 0.1);
	border-radius: 0;
	background: #ffffff !important;
	opacity: 1 !important;
	box-shadow: none;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

.fx-vz-transform--gb .fx-vz-transform__title,
.fx-vz-transform--gb > .fx-dock-panel__head {
	text-align: left;
	letter-spacing: 0.01em;
	text-transform: none;
	font-size: 13px;
	font-weight: 700;
	color: #ffffff;
}

.fx-vz-transform--gb > *:not(.fx-dock-panel__head) {
	margin-left: 12px;
	margin-right: 12px;
}

.fx-vz-transform--gb .fx-cr {
	margin-top: 2px;
	padding-top: 10px;
	border-top-color: rgba(15, 23, 42, 0.08);
}

.fx-gb-dock .fx-vz-transform__tool,
.fx-gb-dock .fx-vz-transform__link,
.fx-gb-dock .fx-vz-transform__reset,
.fx-gb-dock .fx-vz-transform__field,
.fx-gb-dock .fx-vz-transform__apply,
.fx-gb-dock .fx-vz-stroke__field,
.fx-gb-dock .fx-vz-stroke__expand,
.fx-gb-dock .fx-vz-shapemodes__tool,
.fx-gb-dock .fx-vz-shapemodes__expand,
.fx-gb-dock .fx-cr__link,
.fx-gb-dock .fx-cr__field,
.fx-gb-dock .fx-cr__all,
.fx-gb-dock .fx-sb-template__btn,
.fx-gb-dock .fx-sb-template__icon,
.fx-gb-dock .fx-gb-glyphpick__input,
.fx-gb-dock .fx-gb-glyphpick__btn {
	border-radius: 0 !important;
}

.fx-gb-glyphpick {
	display: none; /* hidden: Active glyph dock panel */
	flex: 1 1 auto;
	min-height: 0;
	flex-direction: column;
	padding: 0;
	border-radius: 0;
	border: 0;
	border-bottom: 0;
	background: #ffffff;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	overflow: hidden;
}

.fx-gb-dock > .fx-gb-glyphpick {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	overflow: hidden;
}

.fx-gb-dock > .fx-dock-panel.is-collapsed,
.fx-gb-dock > .fx-gb-glyphpick.is-collapsed {
	flex: 0 0 auto;
	min-height: 0;
	background: transparent !important;
	overflow: visible;
}

.fx-gb-glyphpick__head {
	margin: 0;
}

.fx-gb-glyphpick > *:not(.fx-dock-panel__head) {
	margin-left: 12px;
	margin-right: 12px;
}

.fx-gb-glyphpick > .fx-gb-glyphpick__picker {
	flex: 1 1 auto;
	min-height: 0;
	margin-bottom: 0;
	padding-bottom: 12px;
}

.fx-gb-glyphpick__title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: inherit;
}

.fx-gb-glyphpick__sub {
	margin: 8px 0 10px;
	font-size: 12px;
	color: #6b7280;
}

.fx-sb,
.fx-sb--editor {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	height: 100%;
	min-height: 0;
	background: var(--fx-surface);
	--fx-gb-grid-size: 32px;
	--fx-gb-grid-opacity: 1;
}

.fx-sb__stage-wrap {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.fx-sb--editor .fx-vz--solo {
	flex: 1;
	min-height: 0;
	height: 100%;
}

.fx-sb[data-fx-sb-grid='off'] .fx-vz--solo .fx-vz__stage::before {
	opacity: 0 !important;
	background-image: none;
}

.fx-sb[data-fx-sb-grid='on'][data-fx-sb-grid-type='square'] .fx-vz--solo .fx-vz__stage::before {
	opacity: var(--fx-gb-grid-opacity);
	background-color: #ffffff;
	background-image:
		linear-gradient(to right, #d4d4d8 1px, transparent 1px),
		linear-gradient(to bottom, #d4d4d8 1px, transparent 1px);
	background-size: var(--fx-gb-grid-cell-w, var(--fx-gb-grid-size))
		var(--fx-gb-grid-cell-h, var(--fx-gb-grid-size));
	background-position: var(--fx-gb-grid-pos-x, 0px) var(--fx-gb-grid-pos-y, 0px);
}

.fx-sb[data-fx-sb-grid='on'][data-fx-sb-grid-type='isometric'] .fx-vz--solo .fx-vz__stage::before {
	opacity: 0;
	background-image: none;
	background-color: #ffffff;
}

.fx-sb[data-fx-sb-grid-above='true'] .fx-vz--solo .fx-vz__stage::before {
	z-index: 2;
}

html[data-fx-theme='dark'] .fx-sb[data-fx-sb-grid='on'][data-fx-sb-grid-type='square'] .fx-vz--solo .fx-vz__stage::before {
	background-color: #0b0d0f;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
}

html[data-fx-theme='dark'] .fx-sb[data-fx-sb-grid='on'][data-fx-sb-grid-type='isometric'] .fx-vz--solo .fx-vz__stage::before {
	background-color: #0b0d0f;
}

.fx-sb .fx-gb-dock {
	padding-top: 0;
}

.fx-sb__canvas-col {
	position: relative;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: #ffffff;
}

.fx-sb__stage {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

.fx-sb__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.28;
	background-image:
		radial-gradient(#c4c4c4 1.5px, transparent 1.5px),
		radial-gradient(#c4c4c4 1.5px, #ffffff 1.5px);
	background-size: 20px 20px;
	background-position: 0 0, 10px 10px;
}

.fx-sb__canvas {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	cursor: var(--fx-cursor-v);
	background: transparent;
}

/* Sketchboard tools — sticky horizontal chrome (Glyphs Builder style) */
.fx-sb-toolrail {
	position: absolute;
	top: 14px;
	left: 50%;
	z-index: 6;
	transform: translateX(-50%);
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	border-radius: 10px;
	border: 1px solid var(--fx-border-strong);
	background: rgba(255, 255, 255, 0.96);
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.04),
		0 10px 28px rgba(15, 23, 42, 0.12);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.fx-sb-toolrail__sep {
	width: 1px;
	height: 22px;
	margin: 0 2px;
	flex: none;
	background: var(--fx-border);
}

.fx-sb-toolrail__btn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--fx-border);
	border-radius: 10px;
	background: #ffffff;
	color: var(--fx-text-secondary);
	cursor: pointer;
	flex: none;
}

.fx-sb-toolrail__btn svg {
	width: 18px;
	height: 18px;
}

.fx-sb-toolrail__btn:hover:not(:disabled):not(.is-active) {
	border-color: rgba(15, 23, 42, 0.14);
	color: #111827;
	background: rgba(15, 23, 42, 0.06);
}

.fx-sb-toolrail__btn.is-active {
	border-color: #0b0d0f;
	background: #0b0d0f;
	color: #ffffff;
	box-shadow: none;
}

.fx-sb-toolrail__btn--accent:not(:disabled) {
	border-color: var(--fx-blue);
	background: #eff6ff;
	color: var(--fx-blue);
}

.fx-sb-toolrail__btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.fx-sb-toolrail__btn[data-fx-sb-clear]:not(:disabled) {
	color: #dc2626;
	background: #fff5f5;
	border-color: #fecaca;
}

.fx-sb-toolrail__btn[data-fx-sb-clear]:hover:not(:disabled) {
	background: #fee2e2;
	border-color: #f87171;
}

/* Top sticky selection bar — sits below the horizontal tool chrome */
.fx-sb-sticky {
	position: absolute;
	top: 68px;
	left: 50%;
	z-index: 5;
	transform: translateX(-50%);
	pointer-events: none;
}

.fx-sb-sticky:not([hidden]) {
	pointer-events: auto;
}

.fx-sb-sticky__inner {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 10px;
	border-radius: 10px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	background: #ffffff;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.04),
		0 10px 28px rgba(15, 23, 42, 0.12);
}

.fx-sb-sticky__count {
	min-width: 1.5em;
	padding: 0 6px;
	font-size: 12px;
	font-weight: 800;
	color: var(--fx-blue);
	text-align: center;
}

.fx-sb-sticky__sep {
	width: 1px;
	height: 22px;
	margin: 0 4px;
	background: rgba(15, 23, 42, 0.1);
}

.fx-sb-sticky__btn {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #1f2937;
	cursor: pointer;
}

.fx-sb-sticky__btn:hover:not(:disabled) {
	background: #f3f4f6;
}

.fx-sb-sticky__btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.fx-sb-sticky__btn--danger {
	color: #dc2626;
}

.fx-sb-sticky__btn--danger:hover:not(:disabled) {
	background: #fef2f2;
}

.fx-sb-sticky__btn--primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: auto;
	min-width: 0;
	padding: 0 12px;
	background: #111827;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.fx-sb-sticky__btn--primary:hover:not(:disabled) {
	background: #000000;
}

.fx-sb-sticky__btn--primary span {
	line-height: 1;
}

.fx-sb-sticky__btn svg {
	width: 18px;
	height: 18px;
	flex: none;
}

/* Bottom params strip */
.fx-sb__params {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	padding: 10px 14px;
	border-top: 1px solid var(--fx-border);
	background: rgba(255, 255, 255, 0.96);
	z-index: 3;
}

.fx-sb__param {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 140px;
	font-size: 11px;
	font-weight: 700;
	color: var(--fx-text-muted);
}

.fx-sb__param strong {
	color: var(--fx-text);
	font-weight: 800;
}

.fx-sb__params .fx-sb__charset {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
}

.fx-sb__params .fx-sb__status {
	margin: 0;
	flex: 1;
	min-width: 160px;
	font-size: 12px;
	color: var(--fx-text-secondary);
}

.fx-sb__params .fx-sb__assigned {
	display: flex;
	align-items: center;
	max-width: 240px;
	overflow: hidden;
}

.fx-sb__panel {
	display: none !important;
}

.fx-sb-rail {
	display: none !important;
}

.fx-sb__empty {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 32px;
	text-align: center;
	cursor: pointer;
	background: transparent;
	z-index: 2;
	outline: none;
}

.fx-sb__empty[hidden] {
	display: none !important;
}

.fx-sb__empty.is-dragover {
	background: rgba(17, 24, 39, 0.06);
}

.fx-sb__empty-icon {
	display: grid;
	place-items: center;
	margin-bottom: 6px;
	color: var(--fx-text-faint);
}

.fx-sb__empty:hover .fx-sb__empty-icon,
.fx-sb__empty:focus-visible .fx-sb__empty-icon,
.fx-sb__empty.is-dragover .fx-sb__empty-icon {
	color: var(--fx-blue);
}

.fx-sb__empty-title {
	margin: 0;
	font-size: clamp(20px, 2.4vw, 28px);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--fx-text);
}

.fx-sb__empty-meta {
	margin: 2px 0 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fx-text-muted);
}

.fx-sb__empty-formats {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fx-text-faint);
}

.fx-sb__empty-sub {
	margin: 0;
	max-width: 420px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--fx-text-secondary);
}

.fx-sb__busy,
.fx-vz__busy {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 4;
}

.fx-sb__busy[hidden],
.fx-vz__busy[hidden] {
	display: none !important;
}

.fx-sb__busy-card,
.fx-vz__busy-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	min-width: 240px;
	max-width: 320px;
	padding: 26px 28px 24px;
	border-radius: var(--fx-radius-lg);
	background: #fff;
	border: 1px solid var(--fx-border);
	box-shadow: var(--fx-shadow-panel);
	text-align: center;
}

.fx-sb__busy-logo,
.fx-vz__busy-logo {
	width: 44px;
	height: 44px;
	display: block;
	animation: fx-scan-spin 1.1s linear infinite;
}

.fx-sb__busy-title,
.fx-vz__busy-title {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--fx-text);
}

.fx-sb__busy-track,
.fx-vz__busy-track {
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: var(--fx-blue-soft);
	overflow: hidden;
}

.fx-sb__busy-track[hidden],
.fx-vz__busy-track[hidden] {
	display: none !important;
}

.fx-sb__busy-fill,
.fx-vz__busy-fill {
	display: block;
	width: 0%;
	height: 100%;
	border-radius: 999px;
	background: var(--fx-blue);
}

.fx-sb__busy-fill.is-running,
.fx-vz__busy-fill.is-running {
	animation: fx-sb-progress 1.5s ease-in-out forwards;
}

@keyframes fx-sb-progress {
	0% { width: 0%; }
	100% { width: 100%; }
}

.fx-sb__hud {
	position: absolute;
	left: 16px;
	bottom: 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
	z-index: 3;
}

.fx-sb__hud-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--fx-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0 4px;
}

.fx-sb__hud-btn {
	min-width: 28px;
	height: 28px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--fx-text);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.fx-sb__hud-btn:hover {
	background: #eef2ff;
	color: var(--fx-blue);
}

.fx-sb__hud-pct {
	min-width: 42px;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.fx-sb-rail {
	position: absolute;
	top: 16px;
	left: 16px;
	right: auto;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 44px;
	padding: 8px 6px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	overflow: visible;
}

.fx-sb-rail__btn {
	position: relative;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--fx-text-secondary);
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}

.fx-sb-rail__btn:hover:not(:disabled),
.fx-sb-rail__btn:focus-visible:not(:disabled) {
	background: var(--fx-blue-soft);
	color: var(--fx-blue);
	z-index: 2;
}

.fx-sb-rail__btn--accent:not(:disabled) {
	color: var(--fx-blue);
}

.fx-sb-rail__btn:disabled {
	opacity: 0.38;
	cursor: not-allowed;
}

.fx-sb-rail__btn svg,
.fx-sb-rail__icon {
	display: block;
	width: 18px;
	height: 18px;
	flex: none;
}

.fx-sb-rail__btn[data-fx-sb-trace] .fx-sb-rail__icon {
	transform: scale(0.9);
}

.fx-sb-rail__tip {
	position: absolute;
	left: calc(100% + 14px);
	top: 50%;
	transform: translateY(-50%) translateX(-4px);
	padding: 7px 12px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1);
	color: var(--fx-text);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
}

.fx-sb-rail__btn:hover:not(:disabled) .fx-sb-rail__tip,
.fx-sb-rail__btn:focus-visible:not(:disabled) .fx-sb-rail__tip {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
}

.fx-sb-rail__sep {
	display: block;
	width: 18px;
	height: 1px;
	margin: 2px 0;
	background: var(--fx-border-strong);
}

.fx-sb-rail__count {
	display: grid;
	place-items: center;
	min-width: 28px;
	height: 28px;
	margin-top: 2px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--fx-text-muted);
}

.fx-sb__panel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 0 0 20px;
	border-left: 1px solid var(--fx-border);
	background: #fff;
	overflow: auto;
}

.fx-sb__charset {
	position: sticky;
	top: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	margin: 0;
	background: #fff;
	border-bottom: 1px solid var(--fx-border);
}

.fx-sb__charset-btn {
	flex: 1;
	min-width: 0;
	height: 34px;
	padding: 0 8px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 8px;
	background: var(--fx-bg-soft, #f3f4f6);
	color: var(--fx-text);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fx-sb__charset-btn:hover {
	background: rgba(0, 0, 0, 0.05);
}

.fx-sb__charset-btn.is-active {
	background: var(--fx-blue);
	border-color: var(--fx-blue);
	color: var(--fx-on-blue);
}

.fx-sb__charset-apply {
	flex: none;
	height: 34px;
	padding: 0 14px;
	border: 0;
	border-radius: 8px;
	background: #111;
	color: #fff;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.fx-sb__charset-apply:hover:not(:disabled) {
	background: #000;
}

.fx-sb__charset-apply:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.fx-sb__panel-top {
	padding: 10px 16px 8px;
	border-bottom: 1px solid var(--fx-border);
}

.fx-sb__panel-title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.fx-sb__panel-sub {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--fx-text-secondary);
	line-height: 1.4;
}

.fx-sb__section {
	padding: 0 16px;
}

.fx-sb__section-label {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fx-text-muted);
}

.fx-sb__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.fx-sb__panel .fx-vz__field,
.fx-sb__status,
.fx-sb__hint,
.fx-sb__assigned {
	padding-left: 16px;
	padding-right: 16px;
}

.fx-sb__sheet-note {
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--fx-text-muted);
}

.fx-sb__sheet-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 10px;
}

.fx-sb__sheet-field-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fx-text-muted);
}

.fx-sb__sheet-field select {
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-size: 13px;
	color: var(--fx-text);
}

.fx-sb__sheet-field select:focus {
	outline: none;
	border-color: var(--fx-blue-ring-strong);
	box-shadow: 0 0 0 3px var(--fx-blue-tint);
}

.fx-btn--block {
	width: 100%;
}

.fx-sb__status {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-text-secondary);
	line-height: 1.4;
}

.fx-sb__hint {
	margin: 0;
	font-size: 12px;
	color: var(--fx-text-muted);
	line-height: 1.4;
}

.fx-sb__assigned-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.fx-sb__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 8px;
	border-radius: 8px;
	background: #ecfdf5;
	color: #047857;
	font-size: 13px;
	font-weight: 700;
}

.fx-sb-assign {
	position: absolute;
	z-index: 20;
	width: min(420px, calc(100% - 24px));
	padding: 14px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.fx-sb-assign__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: -14px -14px 4px;
	padding: 14px 14px 8px;
	border-radius: 14px 14px 0 0;
	cursor: grab;
	user-select: none;
	touch-action: none;
}

.fx-sb-assign.is-dragging {
	user-select: none;
}

.fx-sb-assign.is-dragging .fx-sb-assign__head {
	cursor: grabbing;
}

.fx-sb-assign__title {
	margin: 0;
	font-size: 14px;
	font-weight: 800;
	pointer-events: none;
}

.fx-sb-assign__close {
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--fx-text-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
}

.fx-sb-assign__close:hover {
	background: #f3f4f6;
	color: var(--fx-text);
}

.fx-sb-assign__sub {
	margin: 0 0 10px;
	font-size: 12px;
	color: var(--fx-text-secondary);
}

.fx-sb-assign__input {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 10px;
	padding: 8px 10px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 8px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
}

.fx-sb-assign__input:focus {
	outline: 2px solid var(--fx-blue-ring);
	border-color: var(--fx-blue);
}

.fx-sb-assign__picker {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 12px;
}

.fx-sb-assign__filter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.fx-sb-assign__filter-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fx-text-muted);
}

.fx-sb-assign__filter select {
	flex: 1;
	min-width: 0;
	height: 30px;
	padding: 0 10px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 8px;
	background: #fff;
	color: var(--fx-text);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
}

.fx-sb-assign__filter select:focus {
	outline: 2px solid var(--fx-blue-ring);
	border-color: var(--fx-blue);
}

.fx-sb-assign__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
	max-height: 280px;
	overflow: auto;
	padding: 2px;
}

.fx-sb-assign__char {
	aspect-ratio: 1;
	min-height: 48px;
	border: 1px solid var(--fx-border);
	border-radius: 10px;
	background: #fff;
	color: var(--fx-text);
	font: inherit;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

.fx-sb-assign__char:hover {
	border-color: #93c5fd;
	background: #eff6ff;
}

.fx-sb-assign__char.is-active {
	border-color: var(--fx-blue);
	background: var(--fx-blue);
	color: var(--fx-on-blue);
}

.fx-sb-assign__empty {
	grid-column: 1 / -1;
	margin: 0;
	padding: 12px 4px;
	font-size: 12px;
	text-align: center;
	color: var(--fx-text-muted);
}

.fx-sb-assign__actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

@media (max-width: 960px) {
	.fx-sb__params {
		flex-direction: column;
		align-items: stretch;
	}

	.fx-sb__param {
		min-width: 0;
		width: 100%;
	}
}

/* ---- Confirm dialog (New Font) ---- */

.fx-confirm {
	position: fixed;
	inset: 0;
	z-index: 260;
	display: grid;
	place-items: center;
	padding: 24px;
}

.fx-confirm[hidden] {
	display: none;
}

.fx-confirm__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.42);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.fx-confirm__card {
	position: relative;
	z-index: 1;
	width: min(380px, 100%);
	border: 1px solid var(--fx-border-strong);
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
	overflow: hidden;
}

.fx-confirm__body {
	padding: 22px 22px 16px;
}

/* ---- Overview context menu ---- */

.fx-ctx {
	position: fixed;
	z-index: 270;
	min-width: 168px;
	padding: 6px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}

.fx-ctx[hidden] {
	display: none;
}

.fx-ctx__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	width: 100%;
	padding: 9px 12px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--fx-text);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
}

.fx-ctx__item:hover,
.fx-ctx__item:focus-visible {
	background: var(--fx-blue-soft);
	color: var(--fx-blue);
	outline: none;
}

.fx-ctx__item:disabled {
	opacity: 0.38;
	cursor: default;
	pointer-events: none;
}

.fx-ctx__shortcut {
	font-size: 12px;
	font-weight: 500;
	color: var(--fx-text-faint);
	letter-spacing: 0.01em;
}

.fx-ctx__item:hover .fx-ctx__shortcut,
.fx-ctx__item:focus-visible .fx-ctx__shortcut {
	color: inherit;
	opacity: 0.72;
}

/* All Glyphs — dark charcoal menu (x-glyphs style) */
.fx-ctx--overview {
	min-width: 210px;
	padding: 8px;
	border-radius: 12px;
	border-color: rgba(255, 255, 255, 0.08);
	background: #2a2d33;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
	color: rgba(255, 255, 255, 0.88);
}

.fx-ctx--overview .fx-ctx__item {
	color: rgba(255, 255, 255, 0.88);
	font-weight: 600;
}

.fx-ctx--overview .fx-ctx__shortcut {
	color: rgba(255, 255, 255, 0.42);
}

.fx-ctx--overview .fx-ctx__item:hover,
.fx-ctx--overview .fx-ctx__item:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

.fx-ctx--overview .fx-ctx__item:hover .fx-ctx__shortcut,
.fx-ctx--overview .fx-ctx__item:focus-visible .fx-ctx__shortcut {
	color: rgba(255, 255, 255, 0.55);
}

.fx-ctx__sep {
	height: 1px;
	margin: 6px 8px;
	background: rgba(255, 255, 255, 0.1);
}

/* ---- About Fontxsis modal ---- */

.fx-about {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: grid;
	place-items: center;
	padding: 24px;
}

.fx-about[hidden] {
	display: none;
}

.fx-about__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.58);
}

.fx-about__card {
	position: relative;
	z-index: 1;
	width: min(440px, 100%);
	max-height: min(92vh, 720px);
	overflow: auto;
	padding: 0;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: #12141a;
	color: #ffffff;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
	scrollbar-width: thin;
}

.fx-about__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.72);
	cursor: pointer;
}

.fx-about__close:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.fx-about__head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 28px 28px 16px;
	padding-right: 56px;
	position: sticky;
	top: 0;
	z-index: 2;
	background: #12141a;
}

.fx-about__logo {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: var(--fx-blue);
	color: #ffffff;
}

.fx-about__logo svg {
	display: block;
}

.fx-about__eyebrow {
	margin: 0 0 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: #4d8dff;
}

.fx-about__title {
	margin: 0;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.05;
	color: #ffffff;
}

.fx-about__lead {
	margin: 0;
	padding: 0 28px 20px;
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.58);
}

.fx-about__section {
	margin: 0;
	padding: 0 28px 18px;
}

.fx-about__section-label {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.42);
}

.fx-about__list {
	margin: 0;
	padding: 0 0 0 1.15em;
	display: grid;
	gap: 7px;
	font-size: 13.5px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.9);
}

.fx-about__meta {
	margin: 0 28px 20px;
	padding: 12px 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.fx-about__meta-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 6px 0;
	font-size: 13px;
}

.fx-about__meta-row + .fx-about__meta-row {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.fx-about__meta-row dt {
	margin: 0;
	color: rgba(255, 255, 255, 0.45);
	font-weight: 500;
}

.fx-about__meta-row dd {
	margin: 0;
	color: #ffffff;
	font-weight: 600;
	text-align: right;
}

.fx-about__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 16px 28px 22px;
	position: sticky;
	bottom: 0;
	z-index: 2;
	background: #12141a;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.fx-about__social {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 10px;
	border-radius: 9px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	font-size: 12.5px;
	font-weight: 600;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fx-about__social:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.22);
	color: #ffffff;
}

.fx-about__btn {
	flex-shrink: 0;
	min-width: 96px;
	height: 40px;
	padding: 0 18px;
	border: 0;
	border-radius: 10px;
	background: var(--fx-blue);
	color: #ffffff;
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}

.fx-about__btn:hover {
	background: var(--fx-blue-hover);
}

/* ---- Keyboard shortcuts modal ---- */

.fx-shortcuts {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: grid;
	place-items: center;
	padding: 24px;
}

.fx-shortcuts[hidden] {
	display: none;
}

.fx-shortcuts__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.58);
}

.fx-shortcuts__card {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(760px, 100%);
	max-height: min(92vh, 820px);
	overflow: hidden;
	padding: 0;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: #12141a;
	color: #ffffff;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}

.fx-shortcuts__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.72);
	cursor: pointer;
}

.fx-shortcuts__close:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.fx-shortcuts__head {
	flex-shrink: 0;
	margin: 0;
	padding: 28px 28px 16px;
	padding-right: 56px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fx-shortcuts__title {
	margin: 0 0 6px;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: #ffffff;
}

.fx-shortcuts__sub {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.5);
}

.fx-shortcuts__grid {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px 36px;
	align-content: start;
	align-items: start;
	margin: 0;
	padding: 22px 28px;
	scrollbar-width: thin;
}

.fx-shortcuts__stack {
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
}

.fx-shortcuts__col {
	min-width: 0;
}

.fx-shortcuts__label {
	margin: 0 0 12px;
	padding-bottom: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fx-shortcuts__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.fx-shortcuts__list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 28px;
}

.fx-shortcuts__name {
	font-size: 13.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.92);
	line-height: 1.25;
}

.fx-shortcuts__name small {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.42);
}

.fx-shortcuts__keys {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.35);
	font-size: 12px;
}

.fx-shortcuts__keys kbd,
.fx-shortcuts__note kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.88);
	font: inherit;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.fx-shortcuts__foot {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 28px 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	background: #12141a;
}

.fx-shortcuts__note {
	margin: 0;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.45);
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.fx-shortcuts__btn {
	flex-shrink: 0;
	min-width: 96px;
	height: 40px;
	padding: 0 18px;
	border: 1px solid rgba(77, 141, 255, 0.55);
	border-radius: 10px;
	background: rgba(17, 24, 39, 0.28);
	color: #ffffff;
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.fx-shortcuts__btn:hover {
	background: rgba(17, 24, 39, 0.42);
	border-color: rgba(77, 141, 255, 0.8);
}

@media (max-width: 720px) {
	.fx-shortcuts__grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}

/* ---- OpenType feature code modal ---- */

.fx-fea {
	--fea-bg: #1e1e1e;
	--fea-panel: #252526;
	--fea-title: #2d2d2d;
	--fea-border: #3c3c3c;
	--fea-text: #d4d4d4;
	--fea-muted: #858585;
	--fea-gutter: #858585;
	--fea-accent: #c678dd;
	--fea-accent-soft: #9b4dca;
	--fea-error: #5a1d1d;
	--fea-error-text: #f0c0c0;
	--fea-ok: #1e3a2f;
	--fea-ok-text: #a8d5b5;
	--fea-font: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--fea-fs: 13px;
	--fea-lh: 20px;
	position: fixed;
	inset: 0;
	z-index: 300;
	display: grid;
	place-items: center;
	padding: 20px;
}

.fx-fea[hidden] {
	display: none;
}

.fx-fea__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

.fx-fea__card {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(920px, 100%);
	height: min(78vh, 640px);
	overflow: hidden;
	border-radius: 8px;
	border: 1px solid var(--fea-border);
	background: var(--fea-bg);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
	color: var(--fea-text);
}

.fx-fea__titlebar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	min-height: 34px;
	padding: 0 8px 0 6px;
	border-bottom: 1px solid var(--fea-border);
	background: var(--fea-title);
}

.fx-fea__collapse {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 4px;
	color: var(--fea-muted);
	background: transparent;
}

.fx-fea__collapse:hover {
	color: var(--fea-text);
	background: rgba(255, 255, 255, 0.06);
}

.fx-fea__title {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	color: #e8e8e8;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fx-fea__titlebar-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
}

.fx-fea__tb-btn {
	min-height: 24px;
	padding: 0 10px;
	border-radius: 4px;
	border: 1px solid transparent;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--fea-text);
	background: transparent;
}

.fx-fea__tb-btn:hover {
	background: rgba(255, 255, 255, 0.08);
}

.fx-fea__tb-btn--primary {
	background: var(--fea-accent-soft);
	color: #fff;
}

.fx-fea__tb-btn--primary:hover {
	background: var(--fea-accent);
}

.fx-fea__tb-btn--icon {
	width: 24px;
	padding: 0;
	display: grid;
	place-items: center;
	color: var(--fea-muted);
}

.fx-fea__workspace {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	flex: 1 1 auto;
	min-height: 0;
	background: var(--fea-bg);
}

.fx-fea__gutter {
	margin: 0;
	padding: 12px 10px 12px 14px;
	min-width: 36px;
	text-align: right;
	font-family: var(--fea-font);
	font-size: var(--fea-fs);
	line-height: var(--fea-lh);
	color: var(--fea-gutter);
	background: var(--fea-bg);
	user-select: none;
	white-space: pre;
	overflow: hidden;
	border-right: 1px solid transparent;
}

.fx-fea__editor {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 12px 16px 12px 12px;
	resize: none;
	border: 0;
	border-radius: 0;
	background: var(--fea-bg);
	color: var(--fea-text);
	caret-color: #fff;
	font-family: var(--fea-font);
	font-size: var(--fea-fs);
	line-height: var(--fea-lh);
	tab-size: 2;
	white-space: pre;
	overflow: auto;
}

.fx-fea__editor:focus {
	outline: none;
	box-shadow: none;
	border-color: transparent;
}

.fx-fea__suggest {
	position: absolute;
	z-index: 5;
	display: flex;
	align-items: stretch;
	max-width: calc(100% - 24px);
	border: 1px solid var(--fea-border);
	border-radius: 4px;
	background: var(--fea-panel);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
	overflow: hidden;
}

.fx-fea__suggest[hidden] {
	display: none;
}

.fx-fea__suggest-list {
	list-style: none;
	margin: 0;
	padding: 4px 0;
	min-width: 168px;
	max-height: 220px;
	overflow: auto;
}

.fx-fea__suggest-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px 5px 10px;
	font-family: var(--fea-font);
	font-size: 12.5px;
	color: var(--fea-text);
	cursor: pointer;
	white-space: nowrap;
}

.fx-fea__suggest-item.is-active,
.fx-fea__suggest-item:hover {
	background: var(--fea-accent);
	color: #fff;
}

.fx-fea__suggest-glyph {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.55;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M3 3.5A1.5 1.5 0 0 1 4.5 2h2.1c.4 0 .77.16 1.04.43L8.5 3.3c.14.14.32.2.5.2H11.5A1.5 1.5 0 0 1 13 5v7.5A1.5 1.5 0 0 1 11.5 14h-7A1.5 1.5 0 0 1 3 12.5v-9Z'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M3 3.5A1.5 1.5 0 0 1 4.5 2h2.1c.4 0 .77.16 1.04.43L8.5 3.3c.14.14.32.2.5.2H11.5A1.5 1.5 0 0 1 13 5v7.5A1.5 1.5 0 0 1 11.5 14h-7A1.5 1.5 0 0 1 3 12.5v-9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.fx-fea__suggest-item.is-active .fx-fea__suggest-glyph,
.fx-fea__suggest-item:hover .fx-fea__suggest-glyph {
	opacity: 0.95;
	background: #fff;
}

.fx-fea__suggest-doc {
	min-width: 220px;
	max-width: 280px;
	padding: 10px 12px;
	border-left: 1px solid var(--fea-border);
	background: #1b1b1b;
	font-family: var(--fea-font);
	font-size: 11.5px;
	line-height: 1.45;
	color: #b5b5b5;
	white-space: pre-wrap;
}

.fx-fea__suggest-doc[hidden] {
	display: none;
}

.fx-fea__status {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	min-height: 24px;
	padding: 0 10px;
	border-top: 1px solid transparent;
	font-family: var(--fea-font);
	font-size: 11.5px;
	line-height: 1.3;
	background: var(--fea-ok);
	color: var(--fea-ok-text);
}

.fx-fea__status[data-state='error'] {
	background: var(--fea-error);
	color: var(--fea-error-text);
}

.fx-fea__status-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.fx-fea__status[data-state='ok'] .fx-fea__status-bug,
.fx-fea__status[data-state='error'] .fx-fea__status-ok {
	display: none;
}

.fx-fea__status-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fx-fea__status-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #3ecf8e;
	box-shadow: 0 0 0 2px rgba(62, 207, 142, 0.18);
}

.fx-fea__status[data-state='error'] .fx-fea__status-dot {
	background: #f07178;
	box-shadow: 0 0 0 2px rgba(240, 113, 120, 0.2);
}

@media (max-width: 640px) {
	.fx-fea {
		padding: 0;
	}

	.fx-fea__card {
		width: 100%;
		height: 100%;
		max-height: none;
		border-radius: 0;
	}

	.fx-fea__suggest {
		flex-direction: column;
		max-width: calc(100% - 16px);
	}

	.fx-fea__suggest-doc {
		min-width: 0;
		max-width: none;
		border-left: 0;
		border-top: 1px solid var(--fea-border);
	}
}

/* ---- Create New Glyph modal (light, reference layout) ---- */

.fx-newglyph {
	z-index: 280;
}

.fx-newglyph__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(420px, calc(100vw - 32px));
	border: 1px solid var(--fx-border-strong);
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 20px 56px rgba(15, 23, 42, 0.2);
	overflow: hidden;
}

.fx-newglyph__titlebar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 40px;
	padding: 0 10px 0 14px;
	border-bottom: 1px solid var(--fx-border);
	background: #f8fafc;
}

.fx-newglyph__brand {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.fx-newglyph__logo {
	flex: none;
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.fx-newglyph__title {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--fx-text);
	white-space: nowrap;
}

.fx-newglyph__close {
	display: grid;
	place-items: center;
	width: 36px;
	height: 32px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--fx-text-muted);
	cursor: pointer;
}

.fx-newglyph__close:hover {
	background: #fee2e2;
	color: #dc2626;
}

.fx-newglyph__body {
	padding: 18px 18px 8px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #ffffff;
}

.fx-newglyph__input {
	width: 100%;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 8px;
	background: #f8fafc;
	color: var(--fx-text);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	box-sizing: border-box;
}

.fx-newglyph__input::placeholder {
	color: var(--fx-text-faint);
	font-weight: 400;
}

.fx-newglyph__input:focus {
	outline: none;
	border-color: var(--fx-blue);
	background: #ffffff;
	box-shadow: 0 0 0 3px var(--fx-blue-tint);
}

.fx-newglyph__hint {
	margin: 0;
	font-size: 12px;
	line-height: 1.35;
	color: var(--fx-text-muted);
}

.fx-newglyph__suffixes {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin-top: 4px;
}

.fx-newglyph__suffix {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 6px 8px;
	border: 1px solid var(--fx-border);
	border-radius: 8px;
	background: #f1f5f9;
	color: var(--fx-text);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.fx-newglyph__suffix:hover {
	border-color: var(--fx-blue-ring-strong);
	background: var(--fx-blue-soft);
	color: var(--fx-blue);
}

.fx-newglyph__foot {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	padding: 12px 16px 14px;
	border-top: 1px solid var(--fx-border);
	background: #f8fafc;
}

.fx-newglyph__btn {
	min-height: 34px;
	padding: 0 14px;
	border: 1px solid transparent;
	border-radius: 8px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.fx-newglyph__btn--ghost {
	border-color: var(--fx-border-strong);
	background: #ffffff;
	color: var(--fx-text);
}

.fx-newglyph__btn--ghost:hover {
	background: #f1f5f9;
	border-color: #cbd5e1;
}

.fx-newglyph__btn--primary {
	border-color: var(--fx-blue);
	background: var(--fx-blue);
	color: var(--fx-on-blue);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.fx-newglyph__btn--primary:hover {
	background: var(--fx-blue-hover);
	border-color: var(--fx-blue-hover);
}



@media (max-width: 520px) {
	.fx-newglyph__suffixes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.fx-confirm__title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--fx-text);
}

.fx-confirm__text {
	margin: 8px 0 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--fx-text-muted);
}

.fx-confirm__input {
	display: block;
	width: 100%;
	margin-top: 14px;
	padding: 10px 12px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 8px;
	background: var(--fx-bg, #fff);
	color: var(--fx-text);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	box-sizing: border-box;
}

.fx-confirm__input:focus {
	outline: none;
	border-color: var(--fx-blue);
	box-shadow: 0 0 0 3px var(--fx-blue-tint);
}

.fx-confirm__actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 14px 16px;
	border-top: 1px solid var(--fx-border);
	background: var(--fx-bg-soft);
}

.fx-confirm__actions--unsaved {
	justify-content: flex-end;
	flex-wrap: wrap;
}

.fx-confirm__actions--unsaved [data-fx-unsaved-discard] {
	margin-right: auto;
}

.fx-confirm__btn {
	min-height: 34px;
	padding: 0 14px;
	border-radius: 10px;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.fx-confirm__btn--ghost {
	border: 1px solid var(--fx-border-strong);
	background: #fff;
	color: var(--fx-text-secondary);
}

.fx-confirm__btn--ghost:hover {
	background: #f8fafc;
	color: var(--fx-text);
}

.fx-confirm__btn--danger {
	border: 0;
	background: var(--fx-blue);
	color: var(--fx-on-blue);
}

.fx-confirm__btn--danger:hover {
	background: var(--fx-blue-hover);
	color: var(--fx-on-blue);
}

/* ---- Modal (Worksheet template) ---- */

.fx-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

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

.fx-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.fx-modal__card {
	position: relative;
	z-index: 1;
	display: flex;
	width: min(980px, 100%);
	height: min(86vh, 760px);
	background: #ffffff;
	border: 1px solid var(--fx-border);
	border-radius: 12px;
	box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
	overflow: hidden;
}

.fx-modal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--fx-border);
	background: #bfdbfe;
}

.fx-modal__title {
	margin: 0;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--fx-text);
}

.fx-modal__sub {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: #334155;
}

.fx-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 8px;
	color: var(--fx-text-muted);
}

.fx-modal__close:hover {
	background: var(--fx-bg-soft);
	color: var(--fx-text);
}

.fx-modal__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 10px;
	border-top: 1px solid var(--fx-border);
	background: #f8fafc;
}

.fx-worksheet-modal {
	flex-direction: column;
}

.fx-worksheet-modal__chrome {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--fx-border);
	background: #ffffff;
}

.fx-worksheet-modal__chrome-title {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--fx-text);
}

.fx-worksheet-modal__layout {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: row;
}

.fx-worksheet-modal__rail {
	width: 126px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 8px;
	border-right: 1px solid var(--fx-border-strong);
	background: #ffffff;
}

.fx-worksheet-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 8px 6px;
	border: 1px solid transparent;
	border-radius: 8px;
	text-align: center;
	color: var(--fx-text);
}

.fx-worksheet-step:hover,
.fx-worksheet-step.is-active {
	border-color: #93c5fd;
	background: #dbeafe;
}

.fx-worksheet-step__label {
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	color: #ef4444;
	transform: rotate(-4deg);
}

.fx-worksheet-step__thumb {
	display: grid;
	place-items: center;
	width: 58px;
	height: 78px;
	border: 1px solid #cbd5e1;
	background: #ffffff;
	overflow: hidden;
}

.fx-worksheet-step__grid {
	display: block;
	width: 100%;
	height: 100%;
}

.fx-worksheet-step__name {
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--fx-text);
}

.fx-worksheet-modal__main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: #f8fafc;
}

.fx-worksheet-modal__page-head {
	flex-shrink: 0;
	padding: 12px 14px 10px;
	border-bottom: 1px solid var(--fx-border);
	background: #bfdbfe;
}

.fx-worksheet-modal__page-title {
	margin: 0;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--fx-text);
}

.fx-worksheet-modal__page-sub {
	margin: 3px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: #334155;
}

.fx-worksheet-modal__body {
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding: 8px 10px 10px;
	background: #f1f5f9;
}

.fx-worksheet-page {
	height: 100%;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.fx-worksheet-page[hidden] {
	display: none;
}

.fx-worksheet-modal__toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0 10px;
}

.fx-worksheet-modal__field {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-text-secondary);
}

.fx-worksheet-modal__field select {
	width: min(320px, 42vw);
	height: 30px;
	padding: 0 10px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 6px;
	background: #ffffff;
	color: var(--fx-text);
	font: inherit;
}

.fx-worksheet-modal__preview-label {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--fx-text-secondary);
}

.fx-worksheet-modal__preview {
	flex: 1;
	min-height: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	overflow: auto;
	padding: 10px;
	border: 1px solid #d1d5db;
	background: #9ca3af;
}

.fx-worksheet-modal__preview img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: none;
	border: 1px solid var(--fx-border-strong);
	border-radius: 0;
	box-shadow: var(--fx-shadow-card);
	background: #ffffff;
}

.fx-worksheet-modal__drop {
	flex: 1;
	min-height: 0;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 8px;
	padding: 24px;
	border: 1px solid #d1d5db;
	background: #9ca3af;
	text-align: center;
	color: #111827;
}

.fx-worksheet-modal__drop-title {
	margin: 0;
	font-size: 13px;
	font-weight: 800;
}

.fx-worksheet-modal__drop-sub {
	margin: 0;
	max-width: 42ch;
	font-size: 12px;
	line-height: 1.5;
	color: #1f2937;
}

.fx-worksheet-modal__meta {
	margin: 0;
	font-size: 11px;
	font-weight: 500;
	color: var(--fx-text-muted);
	font-variant-numeric: tabular-nums;
}

/* ---- Sketchboard Import SVG/JPG modal ---- */

.fx-sb-import-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: 20px;
}

.fx-sb-import-modal[hidden] {
	display: none !important;
}

.fx-sb-import-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.42);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.fx-sb-import-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(1800px, 100%);
	height: min(90vh, 960px);
	border: 1px solid var(--fx-border);
	border-radius: 14px;
	background: var(--fx-bg-panel);
	color: var(--fx-text);
	box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
	overflow: hidden;
}

.fx-sb-import-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-shrink: 0;
	padding: 16px 20px 14px;
	border-bottom: 1px solid var(--fx-border);
}

.fx-sb-import-modal__eyebrow {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fx-blue);
}

.fx-sb-import-modal__title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.fx-sb-import-modal__close {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--fx-text-muted);
	cursor: pointer;
}

.fx-sb-import-modal__close:hover {
	background: var(--fx-blue-soft);
	color: var(--fx-text);
}

.fx-sb-import-modal__layout {
	display: grid;
	grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
	min-height: 0;
	flex: 1;
}

.fx-sb-import-modal__col {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}

.fx-sb-import-modal__col--upload {
	border-right: 1px solid var(--fx-border);
	background: var(--fx-bg-rail);
	padding: 16px 18px;
	gap: 14px;
}

.fx-sb-import-modal__col--editor {
	background: var(--fx-bg-panel);
}

.fx-sb-import-modal__tabs {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

.fx-sb-import-modal__target {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fx-sb-import-modal__target-label {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fx-text-muted);
}

.fx-sb-import-modal__target-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.fx-sb-import-modal__target-opt {
	display: block;
	margin: 0;
	cursor: pointer;
}

.fx-sb-import-modal__target-opt input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.fx-sb-import-modal__target-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-height: 72px;
	padding: 10px 12px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 10px;
	background: var(--fx-bg-panel);
	transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.fx-sb-import-modal__target-opt:hover .fx-sb-import-modal__target-card {
	border-color: var(--fx-blue-ring);
}

.fx-sb-import-modal__target-opt input:checked + .fx-sb-import-modal__target-card {
	border-color: var(--fx-blue);
	background: var(--fx-blue-soft);
	box-shadow: 0 0 0 3px var(--fx-blue-tint);
}

.fx-sb-import-modal__target-sample {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--fx-text);
}

.fx-sb-import-modal__target-name {
	font-size: 12px;
	font-weight: 700;
	color: var(--fx-text);
}

.fx-sb-import-modal__target-meta {
	font-size: 11px;
	font-weight: 600;
	color: var(--fx-text-muted);
}

.fx-sb-import-modal__tab {
	flex: 1;
	height: 36px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 10px;
	background: var(--fx-bg-panel);
	color: var(--fx-text-muted);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.fx-sb-import-modal__tab:hover {
	color: var(--fx-text);
}

.fx-sb-import-modal__tab.is-active {
	background: var(--fx-blue);
	border-color: var(--fx-blue);
	color: var(--fx-on-blue);
}

.fx-sb-import-modal__upload {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.fx-sb-import-modal__pane {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.fx-sb-import-modal__pane[hidden] {
	display: none !important;
}

.fx-sb-import-modal__drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	flex: 1;
	min-height: 220px;
	padding: 28px 16px;
	border: 1.5px dashed var(--fx-border-strong);
	border-radius: 12px;
	background: var(--fx-bg-panel);
	color: var(--fx-text);
	font: inherit;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease;
}

.fx-sb-import-modal__drop:hover {
	border-color: var(--fx-blue);
	background: var(--fx-blue-soft);
}

.fx-sb-import-modal__drop-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 6px;
	border-radius: 12px;
	background: var(--fx-bg-soft);
	color: var(--fx-blue);
}

.fx-sb-import-modal__drop-title {
	font-size: 15px;
	font-weight: 700;
}

.fx-sb-import-modal__drop-sub {
	font-size: 12px;
	color: var(--fx-text-muted);
	text-align: center;
}

.fx-sb-import-modal__file {
	margin: 12px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-text-secondary);
	word-break: break-all;
}

.fx-sb-import-modal__file[hidden] {
	display: none !important;
}

.fx-sb-import-modal__editor-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-shrink: 0;
	padding: 14px 20px 12px;
	border-bottom: 1px solid var(--fx-border);
}

.fx-sb-import-modal__editor-copy {
	min-width: 0;
}

.fx-sb-import-modal__editor-title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.fx-sb-import-modal__editor-sub {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--fx-text-muted);
}

.fx-sb-import-modal__glyph-stat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	margin-top: 1px;
	padding: 6px 10px 6px 8px;
	border-radius: 10px;
	background: var(--fx-blue-soft);
	border: 1px solid color-mix(in srgb, var(--fx-blue) 22%, transparent);
	color: var(--fx-blue);
	white-space: nowrap;
}

.fx-sb-import-modal__glyph-stat[hidden] {
	display: none !important;
}

.fx-sb-import-modal__glyph-stat.is-error {
	background: #fef2f2;
	border-color: #fecaca;
	color: #dc2626;
}

.fx-sb-import-modal__glyph-stat-icon {
	display: block;
	width: 22px;
	height: 22px;
	object-fit: contain;
	flex-shrink: 0;
}

.fx-sb-import-modal__glyph-stat-count {
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.fx-sb-import-modal__glyph-stat-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
}

.fx-sb-import-modal__editor-stage {
	position: relative;
	flex: 1;
	min-height: 0;
	background:
		linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
		linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px);
	background-size: 24px 24px;
	background-color: var(--fx-bg-soft);
	overflow: hidden;
}

.fx-sb-import-modal__canvas-wrap {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	touch-action: none;
}

.fx-sb-import-modal__canvas-wrap[hidden] {
	display: none !important;
}

.fx-sb-import-modal__canvas {
	display: block;
	width: 100%;
	height: 100%;
	cursor: crosshair;
}

.fx-sb-import-modal__sticky {
	top: 14px;
	z-index: 3;
}

.fx-sb-import-modal__assign {
	z-index: 5;
	left: 16px;
	top: 64px;
}

.fx-sb-import-modal__hud {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 6px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--fx-border);
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
}

.fx-sb-import-modal__hud-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 8px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--fx-text);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.fx-sb-import-modal__hud-btn:hover {
	background: var(--fx-bg-soft);
}

.fx-sb-import-modal__hud-pct {
	min-width: 44px;
	padding: 0 4px;
	font-size: 11px;
	font-weight: 700;
	color: var(--fx-text-muted);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.fx-sb-import-modal__busy {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 5;
}

.fx-sb-import-modal__busy[hidden] {
	display: none !important;
}

.fx-sb-import-modal__busy-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	min-width: 240px;
	max-width: 320px;
	padding: 26px 28px 24px;
	border-radius: var(--fx-radius-lg);
	background: #fff;
	border: 1px solid var(--fx-border);
	box-shadow: var(--fx-shadow-panel);
	text-align: center;
}

.fx-sb-import-modal__busy-logo {
	width: 48px;
	height: 48px;
	display: block;
	animation: fx-scan-spin 1.1s linear infinite;
}

.fx-sb-import-modal__busy-name {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.04em;
	color: var(--fx-text);
}

.fx-sb-import-modal__busy-title {
	margin: 4px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-text-muted);
}

.fx-sb-import-modal__busy-pct {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--fx-text-muted);
	font-variant-numeric: tabular-nums;
}

.fx-sb-import-modal__busy-track {
	width: min(200px, 100%);
	height: 2px;
	border-radius: 999px;
	background: var(--fx-blue-soft);
	overflow: hidden;
}

.fx-sb-import-modal__busy-fill {
	display: block;
	width: 0%;
	height: 100%;
	border-radius: 999px;
	background: var(--fx-blue);
	transition: width 0.05s linear;
}

.fx-sb-import-modal__editor-empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 6px;
	padding: 24px;
	text-align: center;
	pointer-events: none;
}

.fx-sb-import-modal__editor-empty[hidden] {
	display: none !important;
}

.fx-sb-import-modal__editor-empty-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--fx-text-secondary);
}

.fx-sb-import-modal__editor-empty-sub {
	margin: 0;
	max-width: 36ch;
	font-size: 13px;
	line-height: 1.45;
	color: var(--fx-text-muted);
}

.fx-sb-import-modal__result {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 4;
}

.fx-sb-import-modal__result[hidden] {
	display: none !important;
}

.fx-sb-import-modal__result-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	min-width: 240px;
	max-width: 320px;
	padding: 28px 28px 22px;
	border-radius: var(--fx-radius-lg);
	background: #fff;
	border: 1px solid var(--fx-border);
	box-shadow: var(--fx-shadow-panel);
	text-align: center;
}

.fx-sb-import-modal__result-icon {
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 0 4px;
	object-fit: contain;
	pointer-events: none;
}

.fx-sb-import-modal__result-icon[hidden] {
	display: none !important;
}

.fx-sb-import-modal__result-count {
	margin: 0;
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--fx-blue);
	font-variant-numeric: tabular-nums;
}

.fx-sb-import-modal__result.is-error .fx-sb-import-modal__result-count {
	color: #dc2626;
}

.fx-sb-import-modal__result-title {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--fx-text);
}

.fx-sb-import-modal__result-status {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--fx-text-muted);
}

.fx-sb-import-modal__result.is-error .fx-sb-import-modal__result-status {
	color: #dc2626;
	font-weight: 500;
	line-height: 1.4;
}

.fx-sb-import-modal__result-go {
	margin-top: 4px;
	border-radius: 10px;
	min-width: 148px;
}

.fx-sb-import-modal__result-go[hidden] {
	display: none !important;
}

.fx-sb-import-modal__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	flex-shrink: 0;
	padding: 14px 20px 16px;
	border-top: 1px solid var(--fx-border);
	background: var(--fx-bg-rail);
}

.fx-sb-import-modal__footer .fx-btn--ghost,
.fx-sb-import-modal__footer .fx-btn--primary {
	border-radius: 10px;
}

@media (max-width: 900px) {
	.fx-sb-import-modal__layout {
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(0, 1fr);
		overflow: auto;
	}

	.fx-sb-import-modal__col--upload {
		border-right: 0;
		border-bottom: 1px solid var(--fx-border);
	}

	.fx-sb-import-modal__drop {
		min-height: 140px;
		flex: 0 0 auto;
	}

	.fx-sb-import-modal__editor-stage {
		min-height: 280px;
	}
}

html[data-fx-theme='dark'] .fx-sb-import-modal__backdrop {
	background: rgba(4, 5, 8, 0.72);
}

html[data-fx-theme='dark'] .fx-sb-import-modal__panel {
	background: var(--fx-bg-panel);
	border-color: var(--fx-border-strong);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

html[data-fx-theme='dark'] .fx-sb-import-modal__header,
html[data-fx-theme='dark'] .fx-sb-import-modal__footer,
html[data-fx-theme='dark'] .fx-sb-import-modal__editor-head {
	border-color: var(--fx-border);
	background: var(--fx-bg-soft);
}

html[data-fx-theme='dark'] .fx-sb-import-modal__col--upload {
	background: var(--fx-bg-soft);
	border-right-color: var(--fx-border);
}

html[data-fx-theme='dark'] .fx-sb-import-modal__glyph-stat {
	background: rgba(51, 102, 255, 0.16);
	border-color: rgba(142, 182, 255, 0.28);
	color: #8eb6ff;
}

html[data-fx-theme='dark'] .fx-sb-import-modal__glyph-stat.is-error {
	background: rgba(220, 38, 38, 0.16);
	border-color: rgba(248, 113, 113, 0.35);
	color: #f87171;
}

html[data-fx-theme='dark'] .fx-sb-import-modal__title,
html[data-fx-theme='dark'] .fx-sb-import-modal__editor-title {
	color: #ffffff;
}

html[data-fx-theme='dark'] .fx-sb-import-modal__eyebrow {
	color: #8eb6ff;
}

html[data-fx-theme='dark'] .fx-sb-import-modal__tab {
	background: #0e1014;
	border-color: var(--fx-border-strong);
	color: rgba(255, 255, 255, 0.65);
}

html[data-fx-theme='dark'] .fx-sb-import-modal__target-label {
	color: var(--fx-text-faint);
}

html[data-fx-theme='dark'] .fx-sb-import-modal__target-card {
	background: #0e1014;
	border-color: var(--fx-border-strong);
}

html[data-fx-theme='dark'] .fx-sb-import-modal__target-opt:hover .fx-sb-import-modal__target-card {
	border-color: rgba(255, 255, 255, 0.2);
}

html[data-fx-theme='dark'] .fx-sb-import-modal__target-opt input:checked + .fx-sb-import-modal__target-card {
	background: var(--fx-blue-soft);
	border-color: var(--fx-blue-ring);
}

html[data-fx-theme='dark'] .fx-sb-import-modal__target-sample,
html[data-fx-theme='dark'] .fx-sb-import-modal__target-name {
	color: #ffffff;
}

html[data-fx-theme='dark'] .fx-sb-import-modal__tab.is-active {
	background: var(--fx-blue);
	border-color: var(--fx-blue);
	color: #ffffff;
}

html[data-fx-theme='dark'] .fx-sb-import-modal__drop {
	background: #0e1014;
	border-color: var(--fx-border-strong);
	color: #ffffff;
}

html[data-fx-theme='dark'] .fx-sb-import-modal__drop:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--fx-blue-ring);
}

html[data-fx-theme='dark'] .fx-sb-import-modal__drop-icon {
	background: var(--fx-bg-soft);
}

html[data-fx-theme='dark'] .fx-sb-import-modal__editor-stage {
	background-color: #0e1014;
	background-image:
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 24px 24px;
}

html[data-fx-theme='dark'] .fx-sb-import-modal__busy {
	background: rgba(8, 10, 14, 0.82);
}

html[data-fx-theme='dark'] .fx-sb-import-modal__busy-card {
	background: var(--fx-bg-panel);
	border-color: var(--fx-border-strong);
}

html[data-fx-theme='dark'] .fx-sb-import-modal__busy-name {
	color: #ffffff;
}

html[data-fx-theme='dark'] .fx-sb-import-modal__busy-title {
	color: var(--fx-text-muted);
}

html[data-fx-theme='dark'] .fx-sb-import-modal__busy-pct {
	color: var(--fx-text-muted);
}

html[data-fx-theme='dark'] .fx-sb-import-modal__hud {
	background: rgba(17, 19, 24, 0.94);
	border-color: var(--fx-border-strong);
}

html[data-fx-theme='dark'] .fx-sb-import-modal__hud-btn {
	color: #ffffff;
}

html[data-fx-theme='dark'] .fx-sb-import-modal__hud-btn:hover {
	background: rgba(255, 255, 255, 0.08);
}

html[data-fx-theme='dark'] .fx-sb-import-modal__result {
	background: rgba(8, 10, 14, 0.78);
}

html[data-fx-theme='dark'] .fx-sb-import-modal__result-card {
	background: var(--fx-bg-panel);
	border-color: var(--fx-border-strong);
}

html[data-fx-theme='dark'] .fx-sb-import-modal__result-count {
	color: #8eb6ff;
}

html[data-fx-theme='dark'] .fx-sb-import-modal__result.is-error .fx-sb-import-modal__result-count {
	color: #f87171;
}

html[data-fx-theme='dark'] .fx-sb-import-modal__result-title {
	color: #ffffff;
}

html[data-fx-theme='dark'] .fx-sb-import-modal__result-status {
	color: var(--fx-text-muted);
}

html[data-fx-theme='dark'] .fx-sb-import-modal__result.is-error .fx-sb-import-modal__result-status {
	color: #fca5a5;
}

html[data-fx-theme='dark'] .fx-sb-import-modal__footer .fx-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.18);
	color: #ffffff;
}

html[data-fx-theme='dark'] .fx-sb-import-modal__footer .fx-btn--primary {
	background: #ffffff;
	color: #000000;
	border-color: #ffffff;
}

/* ---- Export Font modal (multi-format) ---- */

.fx-export-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: 24px;
}

.fx-export-modal[hidden] {
	display: none !important;
}

.fx-export-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.42);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.fx-export-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(920px, 100%);
	max-height: min(90vh, 720px);
	border: 1px solid var(--fx-border);
	border-radius: 14px;
	background: var(--fx-bg-panel);
	color: var(--fx-text);
	box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
	overflow: hidden;
}

.fx-export-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px 14px;
	border-bottom: 1px solid var(--fx-border);
	background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
}

.fx-export-modal__eyebrow {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fx-blue);
}

.fx-export-modal__title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--fx-text);
}

.fx-export-modal__close {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	color: var(--fx-text-muted);
	transition: background 0.12s, color 0.12s;
}

.fx-export-modal__close:hover {
	background: var(--fx-blue-soft);
	color: var(--fx-text);
}

.fx-export-modal__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 0.95fr);
	min-height: 0;
	flex: 1;
	overflow: hidden;
}

.fx-export-modal__col {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
}

.fx-export-modal__col--export {
	border-right: 1px solid var(--fx-border);
}

.fx-export-modal__col--content {
	background: var(--fx-bg-rail);
	min-height: 0;
}

.fx-export-modal__body {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-height: 0;
	flex: 1;
	padding: 18px 20px;
	overflow: auto;
	background: var(--fx-bg-panel);
}

.fx-export-modal__body--content {
	background: transparent;
	height: 100%;
}

.fx-export-modal__section--content {
	display: flex;
	flex-direction: column;
	min-height: 0;
	flex: 1;
	height: 100%;
}

.fx-export-modal__section--content .fx-export-modal__content-list {
	flex: 1;
	max-height: none;
	min-height: 180px;
}

@media (max-width: 720px) {
	.fx-export-modal__layout {
		grid-template-columns: 1fr;
		overflow: auto;
	}

	.fx-export-modal__col--export {
		border-right: 0;
		border-bottom: 1px solid var(--fx-border);
	}

	.fx-export-modal__section--content .fx-export-modal__content-list {
		max-height: 240px;
		min-height: 120px;
	}
}

.fx-fontinfo-modal {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: grid;
	place-items: center;
	padding: 24px;
	box-sizing: border-box;
}

.fx-fontinfo-modal[hidden] {
	display: none !important;
}

.fx-fontinfo-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.42);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.fx-fontinfo-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(640px, 100%);
	max-height: min(90vh, 760px);
	border: 1px solid var(--fx-border);
	border-radius: 14px;
	background: var(--fx-bg-panel);
	color: var(--fx-text);
	box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
	overflow: hidden;
}

.fx-fontinfo-modal__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px 14px;
	border-bottom: 1px solid var(--fx-border);
	background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
}

.fx-fontinfo-modal__eyebrow {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fx-blue);
}

.fx-fontinfo-modal__title {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--fx-text);
}

.fx-fontinfo-modal__sub {
	margin: 6px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-text-muted);
}

.fx-fontinfo-modal__close {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	color: var(--fx-text-muted);
	transition: background 0.12s, color 0.12s;
}

.fx-fontinfo-modal__close:hover {
	background: var(--fx-blue-soft);
	color: var(--fx-text);
}

.fx-fontinfo-modal__body {
	min-height: 0;
	flex: 1;
	padding: 16px 18px 8px;
	overflow: auto;
}

.fx-fontinfo-modal__body .fx-fontinfo {
	min-height: 0;
}

.fx-fontinfo-modal__body .fx-fontinfo__pages {
	max-height: none;
}

.fx-fontinfo-modal__footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 12px 18px 16px;
	border-top: 1px solid var(--fx-border);
	background: var(--fx-bg-rail);
}

html[data-fx-theme='dark'] .fx-fontinfo-modal__header {
	background: linear-gradient(180deg, #1a2438 0%, #121417 100%);
}

html[data-fx-theme='dark'] .fx-fontinfo-modal__title {
	color: #ffffff;
}

html[data-fx-theme='dark'] .fx-fontinfo-modal__panel {
	background: #121417;
	border-color: rgba(255, 255, 255, 0.1);
}

html[data-fx-theme='dark'] .fx-fontinfo-modal__footer {
	background: #0e1013;
	border-top-color: rgba(255, 255, 255, 0.1);
}

.fx-export-modal__section + .fx-export-modal__section {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--fx-border);
}

.fx-export-modal__section-title {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fx-text-muted);
}

.fx-export-modal__format-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.fx-export-modal__format-label {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 10px;
	background: var(--fx-bg-soft);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.fx-export-modal__format-label:hover {
	border-color: var(--fx-blue-ring-strong);
	background: var(--fx-bg-card-hover);
}

.fx-export-modal__format-check {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.fx-export-modal__format-check:checked + .fx-export-modal__format-icon {
	border-color: var(--fx-blue);
	background: var(--fx-blue);
	color: var(--fx-on-blue);
}

.fx-export-modal__format-check:checked ~ .fx-export-modal__format-copy .fx-export-modal__format-name {
	color: var(--fx-text);
}

.fx-export-modal__format-label:has(.fx-export-modal__format-check:checked) {
	border-color: var(--fx-blue-ring-strong);
	background: var(--fx-blue-soft);
	box-shadow: 0 0 0 3px var(--fx-blue-tint);
}

.fx-export-modal__format-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 8px;
	background: #fff;
	font: 700 12px/1 ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
	color: var(--fx-text-secondary);
}

.fx-export-modal__format-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.fx-export-modal__format-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--fx-text);
}

.fx-export-modal__format-ext {
	font: 500 11px/1 ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
	color: var(--fx-text-faint);
}

.fx-export-modal__format-count {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--fx-text-muted);
}

.fx-export-modal__dest-panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fx-export-modal__dest-panel[hidden],
.fx-export-modal__dest-hint[hidden] {
	display: none !important;
}

.fx-export-modal__dest-folder--web .fx-export-modal__dest-path {
	cursor: default;
}

.fx-export-modal__dest-browse--static {
	display: grid;
	place-items: center;
	width: 40px;
	flex-shrink: 0;
	border-left: 1px solid var(--fx-border);
	background: var(--fx-bg-soft);
	color: var(--fx-text-muted);
	pointer-events: none;
}

.fx-export-modal__dest-radio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--fx-text);
	cursor: pointer;
	user-select: none;
}

.fx-export-modal__dest-radio input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.fx-export-modal__dest-radio-mark {
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	border: 1.5px solid var(--fx-border-strong);
	border-radius: 50%;
	background: #fff;
}

.fx-export-modal__dest-radio-mark::after {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: transparent;
}

.fx-export-modal__dest-radio input:checked + .fx-export-modal__dest-radio-mark {
	border-color: var(--fx-blue);
}

.fx-export-modal__dest-radio input:checked + .fx-export-modal__dest-radio-mark::after {
	background: var(--fx-blue);
}

.fx-export-modal__dest-folder-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.fx-export-modal__dest-folder {
	flex: 1;
	min-width: 180px;
	display: flex;
	align-items: center;
	gap: 0;
	border: 1px solid var(--fx-border-strong);
	border-radius: 9px;
	background: #fff;
	overflow: hidden;
}

.fx-export-modal__dest-path {
	flex: 1;
	min-width: 0;
	height: 34px;
	padding: 0 10px;
	border: 0;
	background: transparent;
	color: var(--fx-text);
	font: inherit;
	font-size: 12px;
}

.fx-export-modal__dest-path.is-empty {
	color: var(--fx-text-faint);
}

.fx-export-modal__dest-browse {
	display: grid;
	place-items: center;
	width: 36px;
	height: 34px;
	border: 0;
	border-left: 1px solid var(--fx-border);
	background: var(--fx-bg-soft);
	color: var(--fx-text-muted);
	cursor: pointer;
}

.fx-export-modal__dest-browse:hover {
	background: var(--fx-blue-soft);
	color: var(--fx-blue);
}

.fx-export-modal__dest-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.fx-export-modal__dest-row-label {
	font-size: 13px;
	color: var(--fx-text-secondary);
}

.fx-export-modal__dest-row-controls {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.fx-export-modal__dest-check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--fx-text);
	cursor: pointer;
}

.fx-export-modal__dest-check input {
	accent-color: var(--fx-blue);
}

.fx-export-modal__dest-select {
	min-width: 132px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 9px;
	background: #fff;
	color: var(--fx-text);
	font: inherit;
	font-size: 13px;
}

.fx-export-modal__dest-hint {
	margin: 2px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--fx-text-muted);
}

.fx-export-modal__dest-radio:has(input:disabled) {
	cursor: default;
	opacity: 1;
}

.fx-export-modal__instance {
	border: 1px solid var(--fx-border);
	border-radius: 10px;
	overflow: hidden;
	background: var(--fx-bg-soft);
}

.fx-export-modal__instance-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
}

.fx-export-modal__instance-sample {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: var(--fx-blue);
	font-size: 14px;
	font-weight: 700;
	color: var(--fx-on-blue);
}

.fx-export-modal__instance-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--fx-text);
}

.fx-export-modal__content-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}

.fx-export-modal__content-head .fx-export-modal__section-title {
	margin: 0;
}

.fx-export-modal__content-select {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.fx-export-modal__content-select-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--fx-border);
	border-radius: 8px;
	background: var(--fx-bg);
	color: var(--fx-text-muted);
	cursor: pointer;
}

.fx-export-modal__content-select-btn:hover {
	color: var(--fx-text);
	background: var(--fx-bg-soft);
}

.fx-export-modal__content-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 8px;
	padding: 3px;
	border: 1px solid var(--fx-border);
	border-radius: 10px;
	background: var(--fx-bg-soft);
}

.fx-export-modal__content-tab {
	flex: 1 1 auto;
	min-height: 30px;
	padding: 0 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--fx-text-muted);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.fx-export-modal__content-tab:hover {
	color: var(--fx-text);
}

.fx-export-modal__content-tab.is-active {
	background: var(--fx-bg);
	color: var(--fx-text);
	box-shadow: 0 0 0 1px var(--fx-border);
}

.fx-export-modal__content-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 220px;
	overflow: auto;
	scrollbar-width: thin;
	border: 1px solid var(--fx-border);
	border-radius: 10px;
	background: var(--fx-bg-soft);
	padding: 4px;
}

.fx-export-modal__content-headrow {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 10px 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fx-text-muted);
}

.fx-export-modal__content-headrow-check {
	flex: 0 0 10px;
}

.fx-export-modal__content-headrow-sample {
	flex: 0 0 108px;
}

.fx-export-modal__content-headrow-name {
	flex: 1 1 auto;
	min-width: 0;
}

.fx-export-modal__content-row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: var(--fx-text);
	text-align: left;
	cursor: pointer;
	font: inherit;
}

.fx-export-modal__content-row:hover {
	background: var(--fx-bg);
}

.fx-export-modal__content-row.is-selected {
	border-color: var(--fx-blue);
	background: color-mix(in srgb, var(--fx-blue) 12%, var(--fx-bg));
}

.fx-export-modal__content-check {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--fx-border);
}

.fx-export-modal__content-row.is-selected .fx-export-modal__content-check {
	background: var(--fx-blue);
	box-shadow: none;
}

.fx-export-modal__content-sample {
	flex: 0 0 108px;
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: clip;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--fx-text);
	font-family: "FontxsisPreview", "Plus Jakarta Sans", system-ui, sans-serif;
}

.fx-export-modal__content-main {
	min-width: 0;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.fx-export-modal__content-name {
	font-size: 13px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fx-export-modal__content-meta {
	font-size: 11px;
	color: var(--fx-text-muted);
	font-variant-numeric: tabular-nums;
}

.fx-export-modal__content-empty {
	margin: 0;
	padding: 14px 12px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--fx-text-muted);
}

.fx-export-modal__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-shrink: 0;
	padding: 14px 20px 16px;
	border-top: 1px solid var(--fx-border);
	background: var(--fx-bg-rail);
}

.fx-export-modal__footer-start {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	flex: 1;
}

.fx-export-modal__status {
	margin: 0;
	min-width: 0;
	font-size: 12px;
	color: var(--fx-text-muted);
}

.fx-export-modal__status[hidden] {
	display: none !important;
}

.fx-export-modal__footer > .fx-btn--primary {
	flex-shrink: 0;
	margin-left: auto;
}

.fx-export-modal__run {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 10px;
}

.fx-export-modal__run-icon {
	flex-shrink: 0;
}

.fx-export-modal__run-icon[hidden] {
	display: none !important;
}

.fx-export-modal__footer .fx-btn--ghost {
	border: 1px solid var(--fx-border-strong);
	border-radius: 10px;
	color: var(--fx-text-secondary);
	background: #fff;
}

.fx-export-modal__footer .fx-btn--ghost:hover {
	background: var(--fx-bg-soft);
	color: var(--fx-text);
}

@media (max-width: 520px) {
	.fx-export-modal__format-list {
		grid-template-columns: 1fr;
	}
}

/* ---- Settings page ---- */

.fx-settings {
	position: fixed;
	inset: 0;
	z-index: 220;
	display: flex;
	background: var(--fx-bg);
}

.fx-settings[hidden] {
	display: none;
}

.fx-settings__shell {
	display: flex;
	width: 100%;
	height: 100%;
	min-height: 0;
	background:
		radial-gradient(1200px 500px at 10% -10%, rgba(17, 24, 39, 0.08), transparent 55%),
		radial-gradient(900px 420px at 100% 0%, rgba(56, 189, 248, 0.08), transparent 50%),
		var(--fx-bg);
}

.fx-settings__nav {
	width: 240px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 28px 18px 24px;
	border-right: 1px solid var(--fx-border);
	background: color-mix(in srgb, var(--fx-bg-panel) 88%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.fx-settings__nav-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 8px;
}

.fx-settings__nav-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.04em;
	color: var(--fx-text);
}

.fx-settings__nav-title svg {
	flex-shrink: 0;
	display: block;
}

.fx-settings__close {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--fx-border);
	border-radius: 10px;
	background: var(--fx-bg-panel);
	color: var(--fx-text-muted);
}

.fx-settings__close:hover {
	background: var(--fx-bg-soft);
	color: var(--fx-text);
}

.fx-settings__nav-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fx-settings__nav-item {
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--fx-text-secondary);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
}

.fx-settings__nav-item:hover {
	background: var(--fx-bg-soft);
	color: var(--fx-text);
}

.fx-settings__nav-item.is-active {
	background: var(--fx-blue-soft);
	color: var(--fx-blue);
	font-weight: 700;
}

.fx-settings__main {
	flex: 1;
	min-width: 0;
	overflow: auto;
	padding: 36px 40px 48px;
}

.fx-settings__panel {
	width: min(720px, 100%);
}

.fx-settings__panel[hidden] {
	display: none;
}

.fx-settings__panel-head {
	margin-bottom: 22px;
}

.fx-settings__panel-title {
	margin: 0;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--fx-text);
}

.fx-settings__panel-sub {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--fx-text-muted);
}

.fx-settings__rows {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--fx-border);
	border-radius: 14px;
	background: var(--fx-bg-panel);
	overflow: hidden;
}

.fx-settings__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--fx-border);
}

.fx-settings__row:last-child {
	border-bottom: 0;
}

.fx-settings__row--stack {
	flex-direction: column;
	align-items: stretch;
}

.fx-settings__row--danger {
	background: color-mix(in srgb, #ef4444 8%, var(--fx-bg-panel));
}

.fx-settings__row-copy {
	min-width: 0;
	flex: 1;
}

.fx-settings__row-title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--fx-text);
}

.fx-settings__row-desc {
	margin: 4px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--fx-text-muted);
}

.fx-settings__row-value {
	margin: 0;
	flex-shrink: 0;
	font-size: 13px;
	color: var(--fx-text-secondary);
	text-align: right;
	word-break: break-all;
}

.fx-toggle {
	position: relative;
	flex: none;
	width: 44px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--fx-text-faint) 55%, var(--fx-bg-soft));
	cursor: pointer;
	transition: background 0.15s ease;
}

.fx-toggle.is-on {
	background: var(--fx-blue);
}

.fx-toggle__thumb {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
	transition: transform 0.15s ease;
}

.fx-toggle.is-on .fx-toggle__thumb {
	transform: translateX(18px);
}

.fx-settings__support {
	margin-top: 28px;
}

.fx-settings__support-grid {
	display: grid;
	gap: 12px;
}

.fx-settings__support-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--fx-border);
	border-radius: 14px;
	background: var(--fx-bg-panel);
	text-decoration: none;
	color: inherit;
	transition: border-color 0.12s ease, background 0.12s ease;
}

.fx-settings__support-card:hover {
	background: var(--fx-bg-soft);
	border-color: var(--fx-blue-ring);
}

.fx-settings__support-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--fx-bg-soft);
}

.fx-settings__support-icon--wa {
	background: color-mix(in srgb, #10b981 16%, var(--fx-bg-soft));
}

.fx-settings__support-icon--mail {
	background: var(--fx-blue-soft);
}

.fx-settings__support-icon img {
	display: block;
	width: 20px;
	height: 20px;
}

.fx-settings__support-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.fx-settings__support-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--fx-text);
}

.fx-settings__support-meta {
	font-size: 13px;
	color: var(--fx-text-secondary);
}

.fx-settings__support-note {
	font-size: 12px;
	color: var(--fx-text-faint);
}

.fx-settings__support-ext {
	flex: none;
	color: var(--fx-text-faint);
	font-size: 14px;
}

.fx-settings__empty-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 22px;
	border: 1px solid var(--fx-border);
	border-radius: 14px;
	background: var(--fx-bg-panel);
}

.fx-settings__empty-title {
	margin: 0;
	font-size: 16px;
	font-weight: 750;
	color: var(--fx-text);
}

.fx-settings__empty-sub {
	margin: 0 0 6px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--fx-text-muted);
}

.fx-settings__signed-out[hidden],
.fx-settings__signed-in[hidden] {
	display: none;
}

.fx-settings__profile-card {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
	padding: 16px 18px;
	border: 1px solid var(--fx-border);
	border-radius: 14px;
	background: var(--fx-bg-panel);
}

.fx-settings__profile-avatar {
	width: 48px;
	height: 48px;
	font-size: 14px;
}

.fx-settings__profile-meta {
	min-width: 0;
	flex: 1;
}

.fx-settings__profile-name {
	margin: 0;
	font-size: 15px;
	font-weight: 750;
	color: var(--fx-text);
}

.fx-settings__profile-email {
	margin: 4px 0 0;
	font-size: 12.5px;
	color: var(--fx-text-muted);
	word-break: break-all;
}

.fx-settings__input-wrap {
	display: block;
	margin-top: 10px;
}

.fx-settings__input {
	width: 100%;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 10px;
	background: var(--fx-bg-panel);
	color: var(--fx-text);
	font: inherit;
	font-size: 13px;
}

.fx-settings__input:focus {
	outline: none;
	border-color: var(--fx-blue-ring-strong);
	box-shadow: 0 0 0 3px var(--fx-blue-tint);
}

.fx-settings__upgrade {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 16px 0;
	padding: 16px 18px;
	border: 1px solid var(--fx-blue-ring);
	border-radius: 14px;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--fx-blue) 10%, var(--fx-bg-panel)) 0%,
		var(--fx-bg-panel) 100%
	);
}

.fx-settings__upgrade-title {
	margin: 0;
	font-size: 14px;
	font-weight: 750;
	color: var(--fx-text);
}

.fx-settings__upgrade-sub {
	margin: 4px 0 0;
	font-size: 12.5px;
	color: var(--fx-text-muted);
}

.fx-btn--danger-outline {
	border: 1px solid color-mix(in srgb, #ef4444 45%, var(--fx-border-strong));
	background: var(--fx-bg-panel);
	color: #ef4444;
}

.fx-btn--danger-outline:hover {
	background: color-mix(in srgb, #ef4444 12%, var(--fx-bg-panel));
	border-color: #f87171;
	color: #f87171;
}

@media (max-width: 860px) {
	.fx-settings__shell {
		flex-direction: column;
	}

	.fx-settings__nav {
		width: 100%;
		border-right: 0;
		border-bottom: 1px solid var(--fx-border);
		padding: 16px;
	}

	.fx-settings__nav-list {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.fx-settings__nav-item {
		width: auto;
	}

	.fx-settings__main {
		padding: 20px 16px 32px;
	}

	.fx-settings__upgrade {
		flex-direction: column;
		align-items: stretch;
	}

	.fx-settings__row {
		flex-direction: column;
		align-items: stretch;
	}

	.fx-settings__row-value {
		text-align: left;
	}
}

/* ---- Home gate + license activation ---- */

.fx-app[data-fx-gate="home"] .fx-menubar,
.fx-app[data-fx-gate="home"] .fx-workflow-pill,
.fx-app[data-fx-gate="home"] .fx-workflow-bar,
.fx-app[data-fx-gate="home"] [data-fx-web-steps-mount],
.fx-app[data-fx-gate="home"] .fx-titlebar__actions > * {
	visibility: hidden;
	pointer-events: none;
}

.fx-app[data-fx-gate="home"] .fx-workflow-pill,
.fx-app[data-fx-gate="home"] .fx-workflow-bar,
.fx-app[data-fx-gate="home"] [data-fx-web-steps-mount] {
	display: none;
}

/* Web welcome: hide chrome header (bell / Sign In / menu). */
html[data-fx-surface="web"] .fx-app[data-fx-gate="home"] .fx-titlebar {
	display: none;
}

html[data-fx-surface="web"] .fx-app[data-fx-gate="home"] .fx-home {
	top: 0;
}

.fx-app[data-fx-gate="home"] .fx-shell,
.fx-app[data-fx-gate="home"] .fx-settings {
	visibility: hidden;
	pointer-events: none;
}

.fx-home {
	position: fixed;
	top: var(--fx-titlebar-h);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: 40px 24px;
	background: #0b0d0f;
	/* Home is always dark; force light copy so light theme tokens don't wash out */
	color: #ffffff;
}

.fx-app[data-fx-gate="app"] .fx-home {
	display: none;
}

.fx-home__glow {
	display: none;
}

.fx-home__stage {
	position: relative;
	z-index: 1;
	width: min(680px, 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	animation: fx-home-stage-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fx-home-stage-in {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

.fx-home__identity {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 32px;
	min-height: 128px;
}

.fx-home__mark {
	position: relative;
	z-index: 2;
	flex: none;
	width: 128px;
	height: 128px;
	opacity: 0;
	animation: fx-home-mark-intro 4.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fx-home__mark img,
html[data-fx-theme="dark"] .fx-home__mark img {
	display: block;
	width: 100%;
	height: 100%;
	/* Dark SVG on always-dark home — invert once (beats global dark logo rule) */
	filter: invert(1) brightness(1.2) drop-shadow(0 12px 28px rgba(0, 0, 0, 0.35));
}

@keyframes fx-home-mark-intro {
	0% {
		opacity: 0;
		transform: rotate(0deg) scale(0.55);
		animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1);
	}
	12% {
		opacity: 1;
		transform: rotate(0deg) scale(1.14);
		animation-timing-function: cubic-bezier(0.34, 1.2, 0.64, 1);
	}
	18% { opacity: 1; transform: rotate(0deg) scale(0.92); }
	22% { opacity: 1; transform: rotate(0deg) scale(1.04); }
	26% {
		opacity: 1;
		transform: rotate(0deg) scale(1);
		animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
	}
	58% { opacity: 1; transform: rotate(360deg) scale(0.88); }
	100% { opacity: 1; transform: rotate(360deg) scale(0.88); }
}

.fx-home__brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	max-width: 0;
	margin-left: 0;
	opacity: 0;
	overflow: hidden;
	white-space: nowrap;
	animation: fx-home-brand-reveal 4.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fx-home__name {
	margin: 0;
	font-size: clamp(44px, 7vw, 64px);
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 1;
	color: #ffffff;
	transform: translateX(-18px);
	animation: fx-home-name-slide 4.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fx-home__badge {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 10px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.94);
	color: #111827;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0;
	animation: fx-home-badge-in 4.2s ease forwards;
}

@keyframes fx-home-brand-reveal {
	0%, 26% { max-width: 0; margin-left: 0; opacity: 0; }
	58%, 100% { max-width: 420px; margin-left: 4px; opacity: 1; }
}

@keyframes fx-home-name-slide {
	0%, 26% { transform: translateX(-28px); opacity: 0; }
	58%, 100% { transform: translateX(0); opacity: 1; }
}

@keyframes fx-home-badge-in {
	0%, 40% { opacity: 0; transform: translateX(-8px); }
	62%, 100% { opacity: 1; transform: translateX(0); }
}

.fx-home__rest {
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 0;
	transform: translateY(10px);
	animation: fx-home-rest-in 4.2s ease forwards;
}

@keyframes fx-home-rest-in {
	0%, 58% { opacity: 0; transform: translateY(12px); }
	100% { opacity: 1; transform: translateY(0); }
}

.fx-home__welcome {
	margin: 0 0 12px;
	font-size: clamp(26px, 4vw, 36px);
	font-weight: 700;
	letter-spacing: -0.03em;
	color: #ffffff;
}

.fx-home__lead {
	margin: 0 0 36px;
	max-width: 42ch;
	font-size: clamp(16px, 2.2vw, 18px);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.55);
}

.fx-home__actions {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.fx-home__google {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 0;
	height: 56px;
	padding: 0 28px;
	border: 0;
	border-radius: 12px;
	/* Always blue — not tied to theme --fx-blue (light = near-black) */
	background: #3366ff;
	color: #ffffff;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	cursor: pointer;
	box-shadow: 0 10px 28px rgba(51, 102, 255, 0.35);
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	white-space: nowrap;
	flex: 0 0 auto;
}

.fx-home__google:hover {
	background: #4d7aff;
	transform: translateY(-1px);
	box-shadow: 0 14px 32px rgba(51, 102, 255, 0.42);
}

.fx-home__google:active {
	transform: translateY(0);
}

.fx-home__google::before {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 55%;
	height: 100%;
	background: linear-gradient(
		105deg,
		transparent 0%,
		rgba(255, 255, 255, 0.12) 35%,
		rgba(255, 255, 255, 0.7) 50%,
		rgba(255, 255, 255, 0.12) 65%,
		transparent 100%
	);
	transform: skewX(-18deg);
	animation: fx-pro-sweep 2.8s ease-in-out infinite;
	pointer-events: none;
}

.fx-home__google > * {
	position: relative;
	z-index: 1;
}

.fx-home__google-icon {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: #fff;
}

.fx-home__download {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 0;
	height: 56px;
	padding: 0 22px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.08);
	color: #f3f4f6;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	cursor: not-allowed;
	opacity: 1;
	box-shadow: none;
	white-space: nowrap;
	flex: 0 0 auto;
}

.fx-home__download:disabled {
	pointer-events: none;
}

.fx-home__download-icon {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	color: #60a5fa;
	flex-shrink: 0;
}

.fx-home__download-label {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
}

.fx-home__download-soon {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 9px;
	border-radius: 999px;
	background: var(--fx-blue);
	color: var(--fx-on-blue, #fff);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}

html[data-fx-theme="light"] .fx-home__download {
	border-color: color-mix(in srgb, var(--fx-text) 14%, transparent);
	background: color-mix(in srgb, var(--fx-panel, #fff) 88%, var(--fx-text) 4%);
	color: var(--fx-text);
	box-shadow: 0 8px 22px rgba(17, 24, 39, 0.08);
	opacity: 0.9;
}

html[data-fx-theme="light"] .fx-home__download-icon {
	color: #0078d4;
}

html[data-fx-theme="light"] .fx-home__download-soon {
	background: var(--fx-blue);
	color: var(--fx-on-blue, #fff);
}

/* Welcome drawing demo (visual only — not Fontxsis editor tools) */
.fx-home-demo__canvas {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	touch-action: none;
	cursor: crosshair;
}

.fx-home__stage {
	pointer-events: none;
}

.fx-home__actions,
.fx-home-demo {
	pointer-events: auto;
}

.fx-home[data-fx-home-demo-tool="select"] .fx-home-demo__canvas {
	cursor: default;
}

.fx-home[data-fx-home-demo-tool="eraser"] .fx-home-demo__canvas {
	cursor: cell;
}

.fx-home-demo {
	position: absolute;
	left: max(20px, env(safe-area-inset-left, 0px) + 16px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 220;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	pointer-events: auto;
	touch-action: none;
	user-select: none;
}

.fx-home-demo.is-dragging {
	cursor: grabbing;
	opacity: 0.96;
}

.fx-home-demo.is-placed {
	transform: none;
}

.fx-home-demo__rail {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px;
	border-radius: 28px;
	/* Welcome demo tools panel: always light (independent of app theme) */
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(17, 24, 39, 0.1);
	box-shadow: 0 16px 36px rgba(17, 24, 39, 0.14);
	backdrop-filter: blur(12px);
}

.fx-home-demo__grip {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 54px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: rgba(17, 24, 39, 0.4);
	cursor: grab;
}

.fx-home-demo__grip:active {
	cursor: grabbing;
}

.fx-home-demo__grip-bar {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 999px;
	background: currentColor;
}

.fx-home-demo__btn {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: transparent;
	color: #111827;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}

.fx-home-demo__btn:hover {
	background: rgba(17, 24, 39, 0.06);
}

.fx-home-demo__btn.is-active {
	background: #111827;
	color: #fff;
}

.fx-home-demo__btn--trash:hover {
	color: #dc2626;
}

.fx-home-demo__sep {
	width: 28px;
	height: 1px;
	margin: 4px 0;
	background: rgba(17, 24, 39, 0.14);
}

.fx-app[data-fx-gate="app"] .fx-home-demo__canvas,
.fx-app[data-fx-gate="app"] .fx-home-demo {
	display: none;
}

@media (max-width: 560px) {
	.fx-home__actions {
		gap: 10px;
		max-width: 100%;
	}

	.fx-home__google,
	.fx-home__download {
		height: 52px;
		padding: 0 16px;
		font-size: 15px;
	}

	.fx-home__download-soon {
		display: none;
	}

	.fx-home-demo {
		left: max(12px, env(safe-area-inset-left, 0px) + 8px);
	}

	.fx-home-demo__rail {
		padding: 8px;
		gap: 4px;
		border-radius: 24px;
	}

	.fx-home-demo__grip,
	.fx-home-demo__btn {
		width: 48px;
	}

	.fx-home-demo__btn {
		height: 48px;
		border-radius: 14px;
	}

	.fx-home-demo__sep {
		width: 24px;
	}
}

.fx-license {
	position: fixed;
	inset: 0;
	z-index: 240;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(15, 23, 42, 0.42);
	backdrop-filter: blur(4px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.fx-license.is-open {
	opacity: 1;
	pointer-events: auto;
}

.fx-license[hidden] {
	display: none;
}

.fx-license.is-open[hidden] {
	display: grid;
}

.fx-license__card {
	width: min(480px, 100%);
	padding: 28px 26px 22px;
	border: 1px solid var(--fx-border);
	border-radius: 18px;
	background: var(--fx-bg-panel);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 48px rgba(15, 23, 42, 0.08);
	transform: translateY(10px);
	transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-license.is-open .fx-license__card {
	transform: translateY(0);
}

.fx-license__eyebrow {
	margin: 0 0 8px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fx-text-faint);
}

.fx-license__title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.fx-license__sub {
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--fx-text-muted);
}

.fx-license__row {
	display: flex;
	align-items: stretch;
	height: 48px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 12px;
	background: var(--fx-bg-soft);
	overflow: hidden;
}

.fx-license__field {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
	padding: 0 14px;
}

.fx-license__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--fx-text-faint);
}

.fx-license__icon svg {
	display: block;
	width: 18px;
	height: 18px;
	transform: rotate(180deg);
}

.fx-license__input {
	width: 100%;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fx-text);
}

.fx-license__input::placeholder {
	color: var(--fx-text-faint);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.fx-license__input:focus {
	outline: none;
}

.fx-license__row:focus-within {
	border-color: var(--fx-blue-ring-strong);
	box-shadow: 0 0 0 3px var(--fx-blue-tint);
}

.fx-license__row.is-invalid {
	border-color: rgba(220, 38, 38, 0.45);
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.fx-license__activate {
	flex: none;
	min-width: 108px;
	padding: 0 20px;
	border: 0;
	border-left: 1px solid var(--fx-border-strong);
	border-radius: 0;
	background: #e2e8f0;
	color: var(--fx-text);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: -0.01em;
	cursor: pointer;
	transition: background 0.12s ease;
}

.fx-license__activate:hover {
	background: #cbd5e1;
}

.fx-license__error {
	margin: 10px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: #dc2626;
}

.fx-license__error[hidden] {
	display: none;
}

.fx-license__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
}

.fx-license__cancel {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fx-text-muted);
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}

.fx-license__cancel:hover {
	color: var(--fx-text);
}

.fx-license__hint {
	margin: 0;
	font-size: 11.5px;
	color: var(--fx-text-faint);
	text-align: right;
}

.fx-dummy-google__form {
	display: grid;
	gap: 14px;
	margin-top: 4px;
}

.fx-dummy-google__field {
	display: grid;
	gap: 6px;
}

.fx-dummy-google__label {
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-text-muted);
}

.fx-dummy-google__input {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--fx-border);
	border-radius: 10px;
	background: var(--fx-bg);
	color: var(--fx-text);
	font: inherit;
	font-size: 14px;
}

.fx-dummy-google__input:focus {
	outline: none;
	border-color: var(--fx-accent);
	box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12);
}

.fx-dummy-google__foot {
	margin-top: 4px;
	justify-content: space-between;
}

@media (prefers-reduced-motion: reduce) {
	.fx-home__mark,
	.fx-home__brand,
	.fx-home__name,
	.fx-home__badge,
	.fx-home__rest,
	.fx-home__glow,
	.fx-home__google::before {
		animation: none;
	}

	.fx-home__stage { animation: none; }

	.fx-home__brand {
		max-width: 420px;
		margin-left: 4px;
		opacity: 1;
		overflow: visible;
	}

	.fx-home__name,
	.fx-home__badge,
	.fx-home__rest {
		opacity: 1;
		transform: none;
	}

	.fx-home__mark {
		opacity: 1;
		transform: scale(0.88);
	}
}

/* Homepage / marketing embed: read-only Glyphs Builder preview */
html[data-fx-embed='1'],
html[data-fx-embed='1'] body,
html[data-fx-embed='1'] .fx-app {
	height: 100%;
	margin: 0;
	overflow: hidden;
}

html[data-fx-embed='1'] .fx-home,
html[data-fx-embed='1'] .fx-navrail,
html[data-fx-embed='1'] .fx-titlebar,
html[data-fx-embed='1'] .fx-settings,
html[data-fx-embed='1'] .fx-docchrome,
html[data-fx-embed='1'] .fx-workflow-pill,
html[data-fx-embed='1'] .fx-workflow-bar,
html[data-fx-embed='1'] [data-fx-web-steps-mount],
html[data-fx-embed='1'] [data-fx-web-nav],
html[data-fx-embed='1'] [data-fx-web-signin],
html[data-fx-embed='1'] [data-fx-web-account-mount],
html[data-fx-embed='1'] [data-fx-gb-chrome],
html[data-fx-embed='1'] [data-fx-gb-dock],
html[data-fx-embed='1'] [data-fx-vz-transform],
html[data-fx-embed='1'] [data-fx-vz-move-panel],
html[data-fx-embed='1'] [data-fx-vz-toolrail-grip],
html[data-fx-embed='1'] [data-fx-vz-tool]:not([data-fx-vz-tool='hand']),
html[data-fx-embed='1'] .fx-toast,
html[data-fx-embed='1'] [data-fx-toast],
html[data-fx-embed='1'] .fx-modal,
html[data-fx-embed='1'] [data-fx-license],
html[data-fx-embed='1'] [data-fx-newfont-modal],
html[data-fx-embed='1'] [data-fx-confirm-modal],
html[data-fx-embed='1'] [data-fx-about-modal],
html[data-fx-embed='1'] [data-fx-shortcuts-modal] {
	display: none !important;
}

html[data-fx-embed='1'] .fx-app[data-fx-gate='home'] .fx-shell,
html[data-fx-embed='1'] .fx-shell {
	visibility: visible !important;
	pointer-events: auto !important;
	position: fixed;
	inset: 0;
	height: 100%;
	min-height: 100%;
}

html[data-fx-embed='1'] .fx-shell__body {
	height: 100%;
}

html[data-fx-embed='1'] .fx-workspace,
html[data-fx-embed='1'] [data-fx-view='glyphsbuilder'],
html[data-fx-embed='1'] [data-fx-gb-shell],
html[data-fx-embed='1'] [data-fx-gb-stage],
html[data-fx-embed='1'] [data-fx-gb-root],
html[data-fx-embed='1'] [data-fx-vz-stage],
html[data-fx-embed='1'] [data-fx-vz-canvas] {
	width: 100% !important;
	height: 100% !important;
	max-height: none !important;
}

html[data-fx-embed='1'] [data-fx-gb-statusbar] {
	pointer-events: none;
}

html[data-fx-embed='1'] [data-fx-vz-toolrail] {
	opacity: 0.55;
	pointer-events: none;
}

/* ---- iPad web sticky history FAB (undo / redo) ---- */

.fx-ipad-hist {
	display: none;
	position: fixed;
	left: calc(16px + env(safe-area-inset-left, 0px));
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	top: auto;
	right: auto;
	z-index: 240;
	align-items: center;
	gap: 10px;
	pointer-events: none;
	touch-action: none;
}

/* Show Actions FAB on web when enabled (footer checkbox / preference). */
html[data-fx-actions-fab='1'] .fx-ipad-hist:not([hidden]) {
	display: flex;
}

html[data-fx-surface='desktop'] .fx-ipad-hist,
html[data-fx-embed='1'] .fx-ipad-hist,
.fx-app[data-fx-gate='home'] .fx-ipad-hist {
	display: none !important;
}

.fx-ipad-hist__fab,
.fx-ipad-hist__action {
	pointer-events: auto;
}

.fx-ipad-hist__fab {
	width: 54px;
	height: 54px;
	border: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	cursor: grab;
	color: #fff;
	background: #2563eb;
	box-shadow:
		0 1px 2px rgba(37, 99, 235, 0.28),
		0 10px 28px rgba(37, 99, 235, 0.38);
	transition:
		transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
		background 0.15s ease,
		box-shadow 0.2s ease;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.fx-ipad-hist__fab:hover,
.fx-ipad-hist__fab:focus-visible {
	background: #1d4ed8;
	outline: none;
}

.fx-ipad-hist__fab:active,
.fx-ipad-hist.is-dragging .fx-ipad-hist__fab {
	cursor: grabbing;
	transform: scale(1.04);
	background: #1d4ed8;
	box-shadow:
		0 2px 6px rgba(37, 99, 235, 0.35),
		0 16px 36px rgba(37, 99, 235, 0.45);
}

.fx-ipad-hist.is-open .fx-ipad-hist__fab {
	transform: rotate(45deg);
	box-shadow:
		0 1px 2px rgba(37, 99, 235, 0.3),
		0 14px 32px rgba(37, 99, 235, 0.42);
}

.fx-ipad-hist.is-dragging {
	z-index: 80;
}

.fx-ipad-hist.is-dragging .fx-ipad-hist__fab {
	transition: none;
}

.fx-ipad-hist__fab-logo {
	display: block;
	width: 22px;
	height: 22px;
	filter: brightness(0) invert(1);
	pointer-events: none;
	transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-ipad-hist.is-open .fx-ipad-hist__fab-logo {
	transform: rotate(-45deg);
}

.fx-ipad-hist__tray {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(37, 99, 235, 0.18);
	backdrop-filter: blur(14px);
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.08),
		0 12px 28px rgba(15, 23, 42, 0.16);
	transform-origin: left center;
	opacity: 0;
	transform: translateX(-8px) scale(0.92);
	pointer-events: none;
	transition:
		opacity 0.2s ease,
		transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.fx-ipad-hist__tray:not([hidden]) {
	opacity: 1;
	transform: translateX(0) scale(1);
	pointer-events: auto;
}

.fx-ipad-hist__sep {
	width: 1px;
	height: 22px;
	margin: 0 2px;
	background: rgba(37, 99, 235, 0.22);
	flex-shrink: 0;
}

.fx-ipad-hist__group {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.fx-ipad-hist__group[hidden] {
	display: none !important;
}

.fx-ipad-hist__action {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: transparent;
	color: #1e3a8a;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.fx-ipad-hist__action[hidden] {
	display: none !important;
}

.fx-ipad-hist__action:disabled {
	opacity: 0.38;
	pointer-events: none;
}

.fx-ipad-hist__action--label {
	width: auto;
	min-width: 44px;
	padding: 0 14px;
	border-radius: 999px;
	grid-auto-flow: column;
	gap: 6px;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.fx-ipad-hist__action--label [data-fx-ipad-smart-mark]:not(:empty)::before {
	content: none;
}

.fx-ipad-hist__action--label [data-fx-ipad-smart-mark]:not(:empty) {
	font-size: 11px;
	font-weight: 700;
	color: #2563eb;
}

.fx-ipad-hist__action.is-active {
	background: rgba(37, 99, 235, 0.16);
	color: #1d4ed8;
}

.fx-ipad-hist__icon {
	display: block;
	width: 22px;
	height: 22px;
	pointer-events: none;
}

.fx-ipad-hist__icon--flip {
	transform: scaleX(-1);
}

.fx-ipad-hist__action:hover,
.fx-ipad-hist__action:focus-visible {
	background: rgba(37, 99, 235, 0.12);
	color: #1d4ed8;
	outline: none;
}

.fx-ipad-hist__action:active {
	transform: scale(0.94);
}

.fx-ipad-hist__action--danger {
	color: #dc2626;
}

.fx-ipad-hist__action--danger:hover,
.fx-ipad-hist__action--danger:focus-visible {
	background: rgba(239, 68, 68, 0.14);
	color: #b91c1c;
}

html[data-fx-theme='dark'] .fx-ipad-hist__fab {
	background: #3b82f6;
	color: #fff;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.35),
		0 12px 28px rgba(59, 130, 246, 0.45);
}

html[data-fx-theme='dark'] .fx-ipad-hist__fab:hover,
html[data-fx-theme='dark'] .fx-ipad-hist__fab:focus-visible,
html[data-fx-theme='dark'] .fx-ipad-hist__fab:active,
html[data-fx-theme='dark'] .fx-ipad-hist.is-dragging .fx-ipad-hist__fab {
	background: #60a5fa;
}

html[data-fx-theme='dark'] .fx-ipad-hist__fab-logo {
	filter: brightness(0) invert(1);
}

html[data-fx-theme='dark'] .fx-ipad-hist__tray {
	background: rgba(24, 26, 30, 0.94);
	border-color: rgba(59, 130, 246, 0.28);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.35),
		0 14px 32px rgba(0, 0, 0, 0.5);
}

html[data-fx-theme='dark'] .fx-ipad-hist__action {
	color: #93c5fd;
}

html[data-fx-theme='dark'] .fx-ipad-hist__action:hover,
html[data-fx-theme='dark'] .fx-ipad-hist__action:focus-visible {
	background: rgba(59, 130, 246, 0.18);
	color: #bfdbfe;
}

html[data-fx-theme='dark'] .fx-ipad-hist__sep {
	background: rgba(147, 197, 253, 0.28);
}

html[data-fx-theme='dark'] .fx-ipad-hist__action--danger {
	color: #f87171;
}

html[data-fx-theme='dark'] .fx-ipad-hist__action--danger:hover,
html[data-fx-theme='dark'] .fx-ipad-hist__action--danger:focus-visible {
	background: rgba(248, 113, 113, 0.18);
	color: #fca5a5;
}

/* ---- AI Generate modal ---- */

.fx-ai-gen {
	z-index: 260;
}

.fx-ai-gen__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(560px, calc(100vw - 32px));
	max-height: min(90vh, 720px);
	border: 1px solid var(--fx-border-strong);
	border-radius: 14px;
	background: var(--fx-bg-panel);
	color: var(--fx-text);
	box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
	overflow: hidden;
}

.fx-ai-gen__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-shrink: 0;
	padding: 18px 20px 14px;
	border-bottom: 1px solid var(--fx-border);
}

.fx-ai-gen__eyebrow {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fx-blue);
}

.fx-ai-gen__title {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.25;
	color: var(--fx-text);
}

.fx-ai-gen__sub {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--fx-text-secondary);
}

.fx-ai-gen__close {
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--fx-text-muted);
	cursor: pointer;
}

.fx-ai-gen__close:hover {
	background: var(--fx-blue-soft);
	color: var(--fx-text);
}

.fx-ai-gen__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 20px;
	min-height: 0;
	overflow: auto;
}

.fx-ai-gen__field {
	display: block;
	margin: 0;
}

.fx-ai-gen__prompt {
	display: block;
	width: 100%;
	min-height: 128px;
	padding: 12px 14px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 10px;
	background: var(--fx-bg-panel);
	color: var(--fx-text);
	font: inherit;
	font-size: 14px;
	line-height: 1.45;
	resize: vertical;
	outline: none;
}

.fx-ai-gen__prompt::placeholder {
	color: var(--fx-text-muted);
}

.fx-ai-gen__prompt:focus {
	border-color: var(--fx-blue);
	box-shadow: 0 0 0 3px var(--fx-blue-ring);
}

.fx-ai-gen__ref {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--fx-border);
	border-radius: 10px;
	background: var(--fx-bg-rail, var(--fx-blue-soft));
}

.fx-ai-gen__ref.is-dragover {
	border-color: var(--fx-blue);
	box-shadow: 0 0 0 3px var(--fx-blue-ring);
}

.fx-ai-gen__ref-pick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 12px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 8px;
	background: var(--fx-bg-panel);
	color: var(--fx-text);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.fx-ai-gen__ref-pick:hover {
	background: var(--fx-blue-soft);
	border-color: var(--fx-blue-ring);
}

.fx-ai-gen__ref-hint {
	margin: 0;
	flex: 1 1 160px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--fx-text-muted);
}

.fx-ai-gen__ref-preview {
	position: relative;
	flex: none;
	width: 72px;
	height: 72px;
	border: 1px solid var(--fx-border-strong);
	border-radius: 8px;
	overflow: hidden;
	background: var(--fx-bg-panel);
}

.fx-ai-gen__ref-preview[hidden] {
	display: none !important;
}

.fx-ai-gen__ref-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fx-ai-gen__ref-clear {
	position: absolute;
	top: 4px;
	right: 4px;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 6px;
	background: rgba(15, 23, 42, 0.72);
	color: #fff;
	cursor: pointer;
}

.fx-ai-gen__ref-clear:hover {
	background: #dc2626;
}

.fx-ai-gen__foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	flex-shrink: 0;
	padding: 14px 20px 18px;
	border-top: 1px solid var(--fx-border);
}

.fx-ai-gen__status {
	margin: 0 auto 0 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--fx-text-secondary);
}

.fx-ai-gen__status[hidden] {
	display: none !important;
}

.fx-ai-gen__foot .fx-btn--primary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

html[data-fx-theme='dark'] .fx-ai-gen__panel {
	background: var(--fx-bg-panel);
	border-color: var(--fx-border-strong);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

html[data-fx-theme='dark'] .fx-ai-gen__ref {
	background: rgba(255, 255, 255, 0.03);
}

html[data-fx-theme='dark'] .fx-ai-gen__ref-pick {
	background: rgba(255, 255, 255, 0.04);
}

/* —— Walkthrough (coachmarks) —— */
.fx-walk {
	position: fixed;
	inset: 0;
	z-index: 12000;
	pointer-events: none;
}

.fx-walk[hidden] {
	display: none !important;
}

.fx-walk__veil {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 16, 0.28);
	pointer-events: auto;
}

html[data-fx-theme='dark'] .fx-walk__veil {
	background: rgba(0, 0, 0, 0.45);
}

.fx-walk__spot {
	position: absolute;
	border-radius: 12px;
	box-shadow: 0 0 0 9999px rgba(10, 12, 16, 0.42);
	outline: 2px solid var(--fx-blue);
	outline-offset: 2px;
	pointer-events: none;
	transition: top 0.18s ease, left 0.18s ease, width 0.18s ease, height 0.18s ease;
}

html[data-fx-theme='dark'] .fx-walk__spot {
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
	outline-color: #4d7aff;
}

.fx-walk__card {
	position: absolute;
	z-index: 1;
	width: min(320px, calc(100vw - 32px));
	padding: 16px 16px 14px;
	border-radius: 14px;
	border: 1px solid var(--fx-border-strong);
	background: var(--fx-bg-panel);
	color: var(--fx-text);
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.08);
	pointer-events: auto;
}

html[data-fx-theme='dark'] .fx-walk__card {
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.04);
}

.fx-walk__arrow {
	position: absolute;
	width: 12px;
	height: 12px;
	background: var(--fx-bg-panel);
	border: 1px solid var(--fx-border-strong);
	transform: rotate(45deg);
	pointer-events: none;
}

.fx-walk__arrow[data-side='bottom'] {
	top: -7px;
	border-right: 0;
	border-bottom: 0;
}

.fx-walk__arrow[data-side='top'] {
	bottom: -7px;
	border-left: 0;
	border-top: 0;
}

.fx-walk__arrow[data-side='right'] {
	left: -7px;
	border-right: 0;
	border-top: 0;
}

.fx-walk__arrow[data-side='left'] {
	right: -7px;
	border-left: 0;
	border-bottom: 0;
}

.fx-walk__title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--fx-text);
}

.fx-walk__body {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--fx-text-muted);
}

.fx-walk__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
}

.fx-walk__count {
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-text-muted);
	font-variant-numeric: tabular-nums;
}

.fx-walk__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.fx-walk__btn {
	appearance: none;
	border: 0;
	border-radius: 8px;
	font: inherit;
	font-size: 13px;
	font-weight: 650;
	letter-spacing: -0.01em;
	padding: 7px 12px;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.fx-walk__btn--ghost {
	background: transparent;
	border: 1px solid var(--fx-border-strong);
	color: var(--fx-text-muted);
}

.fx-walk__btn--ghost:hover {
	background: var(--fx-bg-soft);
	color: var(--fx-text);
}

.fx-walk__btn--primary {
	background: var(--fx-blue);
	color: var(--fx-on-blue);
}

.fx-walk__btn--primary:hover {
	background: var(--fx-blue-hover);
}

html[data-fx-theme='dark'] .fx-walk__btn--primary {
	background: #fff;
	color: #0b0d0f;
}

html[data-fx-theme='dark'] .fx-walk__btn--primary:hover {
	background: #e8eaed;
}

button.fx-help__item {
	width: 100%;
	appearance: none;
	border: 0;
	background: transparent;
	font: inherit;
	text-align: left;
	cursor: pointer;
}