.fcm-app {
	--fcm-bg: #081211;
	--fcm-ink: #f1f7f5;
	--fcm-muted: #9eb1ab;
	--fcm-line: #25413b;
	--fcm-surface: #111f1d;
	--fcm-soft: #172b27;
	--fcm-input: #0d1917;
	--fcm-accent: #57c7ae;
	--fcm-accent-2: #93bcff;
	--fcm-accent-soft: rgba(87, 199, 174, 0.16);
	--fcm-on-accent: #071210;
	--fcm-danger: #ff938c;
	--fcm-shadow: rgba(0, 0, 0, 0.28);
	color: var(--fcm-ink);
	background: var(--fcm-bg);
	border-radius: 8px;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	left: 50%;
	margin: 0;
	max-width: none;
	min-height: calc(100vh - 32px);
	padding: 16px;
	position: relative;
	transform: translateX(-50%);
	width: min(calc(100vw - 32px), 1760px);
}

.fcm-app.fcm-theme-light {
	--fcm-bg: #ffffff;
	--fcm-ink: #15211f;
	--fcm-muted: #62706c;
	--fcm-line: #d9e2de;
	--fcm-surface: #ffffff;
	--fcm-soft: #f4f8f6;
	--fcm-input: #ffffff;
	--fcm-accent: #256f63;
	--fcm-accent-2: #315f93;
	--fcm-accent-soft: rgba(37, 111, 99, 0.14);
	--fcm-on-accent: #ffffff;
	--fcm-danger: #8a2f2d;
	--fcm-shadow: rgba(21, 33, 31, 0.06);
}

.fcm-app.fcm-theme-dark {
	--fcm-bg: #081211;
	--fcm-ink: #f1f7f5;
	--fcm-muted: #9eb1ab;
	--fcm-line: #25413b;
	--fcm-surface: #111f1d;
	--fcm-soft: #172b27;
	--fcm-input: #0d1917;
	--fcm-accent: #57c7ae;
	--fcm-accent-2: #93bcff;
	--fcm-accent-soft: rgba(87, 199, 174, 0.16);
	--fcm-on-accent: #071210;
	--fcm-danger: #ff938c;
	--fcm-shadow: rgba(0, 0, 0, 0.28);
}

.fcm-app.fcm-theme-champagne {
	--fcm-bg: #fffaf7;
	--fcm-ink: #261b22;
	--fcm-muted: #75656e;
	--fcm-line: rgba(75, 45, 55, 0.14);
	--fcm-surface: #ffffff;
	--fcm-soft: #fffaf7;
	--fcm-input: #fffaf7;
	--fcm-accent: #b76e79;
	--fcm-accent-2: #d7a84f;
	--fcm-accent-soft: rgba(183, 110, 121, 0.16);
	--fcm-on-accent: #ffffff;
	--fcm-danger: #9c3638;
	--fcm-shadow: rgba(75, 45, 55, 0.08);
}

.fcm-app.fcm-theme-rose {
	--fcm-bg: #fff2f5;
	--fcm-ink: #27141c;
	--fcm-muted: #7b5f68;
	--fcm-line: rgba(178, 79, 112, 0.18);
	--fcm-surface: #fff7f9;
	--fcm-soft: #fff1f5;
	--fcm-input: #fff7f9;
	--fcm-accent: #b24f70;
	--fcm-accent-2: #c48a6a;
	--fcm-accent-soft: rgba(178, 79, 112, 0.16);
	--fcm-on-accent: #ffffff;
	--fcm-danger: #9f303a;
	--fcm-shadow: rgba(178, 79, 112, 0.08);
}

.fcm-app.fcm-theme-onyx {
	--fcm-bg: #070707;
	--fcm-ink: #f8f4ec;
	--fcm-muted: #d4c8b8;
	--fcm-line: rgba(255, 255, 255, 0.14);
	--fcm-surface: #111111;
	--fcm-soft: #161616;
	--fcm-input: #080808;
	--fcm-accent: #d4af6a;
	--fcm-accent-2: #d7b15f;
	--fcm-accent-soft: rgba(212, 175, 106, 0.18);
	--fcm-on-accent: #171316;
	--fcm-danger: #ff938c;
	--fcm-shadow: rgba(0, 0, 0, 0.32);
}

.fcm-app.fcm-theme-pearl {
	--fcm-bg: #f8fafb;
	--fcm-ink: #182028;
	--fcm-muted: #5f6974;
	--fcm-line: rgba(24, 32, 40, 0.14);
	--fcm-surface: #ffffff;
	--fcm-soft: #f7f9fa;
	--fcm-input: #ffffff;
	--fcm-accent: #6f8290;
	--fcm-accent-2: #b9c1c8;
	--fcm-accent-soft: rgba(111, 130, 144, 0.16);
	--fcm-on-accent: #ffffff;
	--fcm-danger: #9c3638;
	--fcm-shadow: rgba(24, 32, 40, 0.07);
}

.fcm-app.fcm-theme-emerald {
	--fcm-bg: #f5fbf7;
	--fcm-ink: #11231a;
	--fcm-muted: #52685d;
	--fcm-line: rgba(47, 122, 86, 0.18);
	--fcm-surface: #f8fff9;
	--fcm-soft: #eef8f1;
	--fcm-input: #f8fff9;
	--fcm-accent: #2f7a56;
	--fcm-accent-2: #c8a65b;
	--fcm-accent-soft: rgba(47, 122, 86, 0.16);
	--fcm-on-accent: #ffffff;
	--fcm-danger: #9c3638;
	--fcm-shadow: rgba(47, 122, 86, 0.08);
}

.fcm-app.fcm-theme-sapphire {
	--fcm-bg: #050b14;
	--fcm-ink: #f7f9ff;
	--fcm-muted: #c7d2e4;
	--fcm-line: rgba(255, 255, 255, 0.14);
	--fcm-surface: #0b1422;
	--fcm-soft: #101c2c;
	--fcm-input: #07101c;
	--fcm-accent: #8bb7e8;
	--fcm-accent-2: #d5b86b;
	--fcm-accent-soft: rgba(139, 183, 232, 0.18);
	--fcm-on-accent: #08101c;
	--fcm-danger: #ff938c;
	--fcm-shadow: rgba(0, 0, 0, 0.32);
}

.fcm-app.fcm-theme-black-gold {
	--fcm-bg: #050505;
	--fcm-ink: #fff9e8;
	--fcm-muted: #d7c69d;
	--fcm-line: rgba(240, 196, 95, 0.22);
	--fcm-surface: #11100d;
	--fcm-soft: #17140e;
	--fcm-input: #080706;
	--fcm-accent: #e0bc63;
	--fcm-accent-2: #f0c45f;
	--fcm-accent-soft: rgba(240, 196, 95, 0.18);
	--fcm-on-accent: #080706;
	--fcm-danger: #ff938c;
	--fcm-shadow: rgba(0, 0, 0, 0.32);
}

.fcm-app.fcm-theme-platinum {
	--fcm-bg: #f3f5f7;
	--fcm-ink: #111820;
	--fcm-muted: #5b6570;
	--fcm-line: rgba(17, 24, 32, 0.16);
	--fcm-surface: #ffffff;
	--fcm-soft: #f2f5f7;
	--fcm-input: #ffffff;
	--fcm-accent: #566778;
	--fcm-accent-2: #9aa8b5;
	--fcm-accent-soft: rgba(86, 103, 120, 0.16);
	--fcm-on-accent: #ffffff;
	--fcm-danger: #9c3638;
	--fcm-shadow: rgba(17, 24, 32, 0.07);
}

.fcm-app.fcm-theme-opal-mist {
	--fcm-bg: #f7fbfb;
	--fcm-ink: #17212a;
	--fcm-muted: #65727c;
	--fcm-line: rgba(23, 33, 42, 0.15);
	--fcm-surface: #ffffff;
	--fcm-soft: #f1f8f8;
	--fcm-input: #ffffff;
	--fcm-accent: #7197a3;
	--fcm-accent-2: #c9b985;
	--fcm-accent-soft: rgba(113, 151, 163, 0.16);
	--fcm-on-accent: #10202a;
	--fcm-danger: #9c3638;
	--fcm-shadow: rgba(23, 33, 42, 0.07);
}

.fcm-app.fcm-theme-ruby-velvet {
	--fcm-bg: #0b0507;
	--fcm-ink: #fff8fa;
	--fcm-muted: #e4c7cf;
	--fcm-line: rgba(255, 255, 255, 0.15);
	--fcm-surface: #1a0d12;
	--fcm-soft: #241018;
	--fcm-input: #10070a;
	--fcm-accent: #d06a88;
	--fcm-accent-2: #d5a85d;
	--fcm-accent-soft: rgba(208, 106, 136, 0.18);
	--fcm-on-accent: #12070a;
	--fcm-danger: #ffaaa2;
	--fcm-shadow: rgba(0, 0, 0, 0.32);
}

.fcm-app.fcm-theme-cocoa-rose {
	--fcm-bg: #fff7f2;
	--fcm-ink: #2b1d18;
	--fcm-muted: #7b6259;
	--fcm-line: rgba(43, 29, 24, 0.15);
	--fcm-surface: #fffaf7;
	--fcm-soft: #f8ece5;
	--fcm-input: #fffaf7;
	--fcm-accent: #a56a68;
	--fcm-accent-2: #bd8f55;
	--fcm-accent-soft: rgba(165, 106, 104, 0.16);
	--fcm-on-accent: #ffffff;
	--fcm-danger: #9c3638;
	--fcm-shadow: rgba(43, 29, 24, 0.07);
}

.fcm-app.fcm-theme-ice-blue {
	--fcm-bg: #f3fbff;
	--fcm-ink: #0f2430;
	--fcm-muted: #55707c;
	--fcm-line: rgba(15, 36, 48, 0.15);
	--fcm-surface: #ffffff;
	--fcm-soft: #eff8fc;
	--fcm-input: #ffffff;
	--fcm-accent: #347b9a;
	--fcm-accent-2: #a6c6d5;
	--fcm-accent-soft: rgba(52, 123, 154, 0.16);
	--fcm-on-accent: #ffffff;
	--fcm-danger: #9c3638;
	--fcm-shadow: rgba(15, 36, 48, 0.07);
}

.fcm-app.fcm-theme-forest-gold {
	--fcm-bg: #07120c;
	--fcm-ink: #f8fff9;
	--fcm-muted: #c9dccf;
	--fcm-line: rgba(255, 255, 255, 0.14);
	--fcm-surface: #0e1a12;
	--fcm-soft: #142218;
	--fcm-input: #07120c;
	--fcm-accent: #8fbf7b;
	--fcm-accent-2: #d8b95f;
	--fcm-accent-soft: rgba(143, 191, 123, 0.18);
	--fcm-on-accent: #07120c;
	--fcm-danger: #ff938c;
	--fcm-shadow: rgba(0, 0, 0, 0.32);
}

.fcm-app.fcm-theme-ivory-noir {
	--fcm-bg: #fbf8f0;
	--fcm-ink: #1b1712;
	--fcm-muted: #6b6256;
	--fcm-line: rgba(27, 23, 18, 0.15);
	--fcm-surface: #fffdf8;
	--fcm-soft: #f4ecdc;
	--fcm-input: #fffdf8;
	--fcm-accent: #7e6b50;
	--fcm-accent-2: #bda45d;
	--fcm-accent-soft: rgba(126, 107, 80, 0.16);
	--fcm-on-accent: #ffffff;
	--fcm-danger: #9c3638;
	--fcm-shadow: rgba(27, 23, 18, 0.07);
}

.fcm-app.fcm-theme-lavender-pearl {
	--fcm-bg: #faf7ff;
	--fcm-ink: #231b2e;
	--fcm-muted: #70647d;
	--fcm-line: rgba(35, 27, 46, 0.15);
	--fcm-surface: #ffffff;
	--fcm-soft: #f4effb;
	--fcm-input: #ffffff;
	--fcm-accent: #8d76aa;
	--fcm-accent-2: #c8b9dc;
	--fcm-accent-soft: rgba(141, 118, 170, 0.16);
	--fcm-on-accent: #ffffff;
	--fcm-danger: #9c3638;
	--fcm-shadow: rgba(35, 27, 46, 0.07);
}

.fcm-app.fcm-theme-copper-silk {
	--fcm-bg: #fff5ef;
	--fcm-ink: #2a1811;
	--fcm-muted: #76594e;
	--fcm-line: rgba(42, 24, 17, 0.15);
	--fcm-surface: #fffaf7;
	--fcm-soft: #f7e7dd;
	--fcm-input: #fffaf7;
	--fcm-accent: #b86f4b;
	--fcm-accent-2: #d89b63;
	--fcm-accent-soft: rgba(184, 111, 75, 0.16);
	--fcm-on-accent: #ffffff;
	--fcm-danger: #9c3638;
	--fcm-shadow: rgba(42, 24, 17, 0.07);
}

.fcm-app.fcm-theme-midnight-diamond {
	--fcm-bg: #030407;
	--fcm-ink: #f8fbff;
	--fcm-muted: #c4d1df;
	--fcm-line: rgba(255, 255, 255, 0.14);
	--fcm-surface: #0c111b;
	--fcm-soft: #111827;
	--fcm-input: #05070b;
	--fcm-accent: #9db8d5;
	--fcm-accent-2: #d7dce4;
	--fcm-accent-soft: rgba(157, 184, 213, 0.18);
	--fcm-on-accent: #05070b;
	--fcm-danger: #ff938c;
	--fcm-shadow: rgba(0, 0, 0, 0.34);
}

.fcm-app.fcm-theme-blush-gold {
	--fcm-bg: #fff6f5;
	--fcm-ink: #2b1b20;
	--fcm-muted: #7a6269;
	--fcm-line: rgba(43, 27, 32, 0.15);
	--fcm-surface: #ffffff;
	--fcm-soft: #fff0ef;
	--fcm-input: #ffffff;
	--fcm-accent: #c57d8b;
	--fcm-accent-2: #d7ab57;
	--fcm-accent-soft: rgba(197, 125, 139, 0.16);
	--fcm-on-accent: #2b1b20;
	--fcm-danger: #9c3638;
	--fcm-shadow: rgba(43, 27, 32, 0.07);
}

.fcm-app.fcm-theme-arctic-platinum {
	--fcm-bg: #f6fbff;
	--fcm-ink: #14232d;
	--fcm-muted: #61717c;
	--fcm-line: rgba(20, 35, 45, 0.14);
	--fcm-surface: #ffffff;
	--fcm-soft: #f0f6fa;
	--fcm-input: #ffffff;
	--fcm-accent: #6e8799;
	--fcm-accent-2: #c8d2dc;
	--fcm-accent-soft: rgba(110, 135, 153, 0.16);
	--fcm-on-accent: #ffffff;
	--fcm-danger: #9c3638;
	--fcm-shadow: rgba(20, 35, 45, 0.07);
}

.fcm-app.fcm-theme-jade-luxe {
	--fcm-bg: #f5fff9;
	--fcm-ink: #10231c;
	--fcm-muted: #526d62;
	--fcm-line: rgba(16, 35, 28, 0.15);
	--fcm-surface: #ffffff;
	--fcm-soft: #eef8f2;
	--fcm-input: #ffffff;
	--fcm-accent: #397a60;
	--fcm-accent-2: #c8a95e;
	--fcm-accent-soft: rgba(57, 122, 96, 0.16);
	--fcm-on-accent: #ffffff;
	--fcm-danger: #9c3638;
	--fcm-shadow: rgba(16, 35, 28, 0.07);
}

.fcm-app.fcm-theme-wine-cellar {
	--fcm-bg: #080303;
	--fcm-ink: #fff8f5;
	--fcm-muted: #dbc5bd;
	--fcm-line: rgba(255, 255, 255, 0.14);
	--fcm-surface: #1b0d0e;
	--fcm-soft: #251112;
	--fcm-input: #120707;
	--fcm-accent: #b86468;
	--fcm-accent-2: #c79b5f;
	--fcm-accent-soft: rgba(184, 100, 104, 0.18);
	--fcm-on-accent: #ffffff;
	--fcm-danger: #ffaaa2;
	--fcm-shadow: rgba(0, 0, 0, 0.34);
}

.fcm-app.fcm-theme-sandstone {
	--fcm-bg: #fbf5ea;
	--fcm-ink: #2a2116;
	--fcm-muted: #776a58;
	--fcm-line: rgba(42, 33, 22, 0.15);
	--fcm-surface: #fffaf1;
	--fcm-soft: #f3e6d1;
	--fcm-input: #fffaf1;
	--fcm-accent: #9b8060;
	--fcm-accent-2: #c09a55;
	--fcm-accent-soft: rgba(155, 128, 96, 0.16);
	--fcm-on-accent: #ffffff;
	--fcm-danger: #9c3638;
	--fcm-shadow: rgba(42, 33, 22, 0.07);
}

.fcm-app.fcm-theme-carbon-ice {
	--fcm-bg: #050607;
	--fcm-ink: #f7fbff;
	--fcm-muted: #c4ccd5;
	--fcm-line: rgba(255, 255, 255, 0.14);
	--fcm-surface: #11161b;
	--fcm-soft: #171d23;
	--fcm-input: #080a0d;
	--fcm-accent: #9fb5c6;
	--fcm-accent-2: #d8e4ee;
	--fcm-accent-soft: rgba(216, 228, 238, 0.16);
	--fcm-on-accent: #080a0d;
	--fcm-danger: #ff938c;
	--fcm-shadow: rgba(0, 0, 0, 0.34);
}

.fcm-app.fcm-theme-champagne-noir {
	--fcm-bg: #050403;
	--fcm-ink: #fff6df;
	--fcm-muted: #dfcfa8;
	--fcm-line: rgba(240, 202, 114, 0.2);
	--fcm-surface: #15110b;
	--fcm-soft: #21190e;
	--fcm-input: #0c0905;
	--fcm-accent: #d0aa60;
	--fcm-accent-2: #f0ca72;
	--fcm-accent-soft: rgba(240, 202, 114, 0.18);
	--fcm-on-accent: #0c0905;
	--fcm-danger: #ff938c;
	--fcm-shadow: rgba(0, 0, 0, 0.34);
}

.fcm-header {
	align-items: center;
	border-bottom: 1px solid var(--fcm-line);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 18px;
	padding-bottom: 16px;
}

.fcm-header-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
}

.fcm-theme-picker {
	align-items: center;
	display: flex;
	gap: 8px;
}

.fcm-theme-picker span {
	color: var(--fcm-muted);
	font-size: 12px;
	font-weight: 700;
}

.fcm-theme-picker select {
	background: var(--fcm-input);
	border: 1px solid var(--fcm-line);
	border-radius: 6px;
	color: var(--fcm-ink);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	min-height: 36px;
	max-width: 190px;
	padding: 6px 9px;
}

.fcm-kicker {
	color: var(--fcm-accent);
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 4px;
	text-transform: uppercase;
}

.fcm-user-line {
	color: var(--fcm-muted);
	font-size: 14px;
	margin: 6px 0 0;
}

.fcm-header h2,
.fcm-panel h2 {
	font-size: 28px;
	line-height: 1.2;
	margin: 0;
}

.fcm-workspace-shell {
	align-items: stretch;
	display: grid;
	gap: 18px;
	grid-template-columns: 240px minmax(0, 1fr);
	height: calc(100vh - 80px);
	min-height: calc(100vh - 80px);
}

.fcm-sidebar {
	background: var(--fcm-surface);
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	align-content: start;
	display: grid;
	gap: 16px;
	grid-template-rows: auto minmax(0, 1fr) auto auto;
	height: calc(100vh - 80px);
	max-height: calc(100vh - 80px);
	overflow: visible;
	padding: 16px;
	position: sticky;
	top: 16px;
}

.fcm-sidebar-header {
	align-content: start;
	align-items: stretch;
	border-bottom: 1px solid var(--fcm-line);
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0 0 14px;
}

.fcm-sidebar-header .fcm-header-actions {
	align-content: start;
	align-items: stretch;
	display: grid;
	justify-content: stretch;
}

.fcm-sidebar-header .fcm-theme-picker {
	align-items: stretch;
	display: grid;
}

.fcm-sidebar-header .fcm-theme-picker select {
	max-width: none;
	width: 100%;
}

.fcm-sidebar-account {
	border-top: 1px solid var(--fcm-line);
	padding-top: 12px;
}

.fcm-sidebar-account .fcm-theme-picker {
	display: grid;
	gap: 6px;
}

.fcm-sidebar-account .fcm-theme-picker select {
	max-width: none;
	width: 100%;
}

.fcm-sidebar-nav {
	align-content: start;
	display: grid;
	gap: 6px;
	overflow: auto;
}

.fcm-sidebar-nav button {
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	color: var(--fcm-ink);
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	font-weight: 800;
	min-height: 38px;
	padding: 8px 10px;
	text-align: left;
}

.fcm-sidebar-nav button:hover,
.fcm-sidebar-nav button.is-active {
	background: var(--fcm-accent-soft);
	border-color: var(--fcm-line);
	color: var(--fcm-accent);
}

.fcm-sidebar-signout {
	border: 1px solid var(--fcm-line);
	border-radius: 6px;
	color: var(--fcm-ink);
	display: block;
	font-size: 14px;
	font-weight: 800;
	padding: 10px;
	text-align: center;
	text-decoration: none;
}

.fcm-sidebar-signout:hover {
	background: var(--fcm-accent-soft);
	color: var(--fcm-accent);
}

.fcm-workspace-main {
	align-content: start;
	align-self: start;
	display: grid;
	grid-template-rows: auto auto minmax(0, 1fr);
	height: calc(100vh - 80px);
	min-height: calc(100vh - 80px);
	min-width: 0;
	overflow: auto;
}

.fcm-workspace-panel {
	display: none;
}

.fcm-workspace-panel.is-active {
	align-self: start;
	display: block;
	height: 100%;
	min-height: 0;
	overflow: auto;
	width: 100%;
}

.fcm-active-family-bar {
	align-items: center;
	align-self: start;
	background: var(--fcm-soft);
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin: 0 0 18px;
	padding: 10px 14px;
}

.fcm-active-family-bar div {
	display: grid;
	gap: 2px;
}

.fcm-active-family-bar span,
.fcm-active-family-bar small {
	color: var(--fcm-muted);
	font-size: 12px;
	font-weight: 700;
}

.fcm-active-family-bar strong {
	color: var(--fcm-ink);
	font-size: 16px;
	line-height: 1.2;
}

.fcm-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
}

.fcm-overview {
	align-items: end;
	background: var(--fcm-soft);
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	display: grid;
	gap: 14px;
	grid-template-columns: 120px 120px 120px minmax(260px, 1fr);
	margin: 0 0 18px;
	padding: 14px;
}

.fcm-metric {
	display: grid;
	gap: 2px;
}

.fcm-metric strong {
	font-size: 22px;
	line-height: 1.1;
}

.fcm-metric span,
.fcm-inline-form label,
.fcm-form-status {
	color: var(--fcm-muted);
	font-size: 12px;
	font-weight: 700;
}

.fcm-inline-form {
	align-items: end;
	display: grid;
	gap: 8px;
	grid-template-columns: minmax(160px, 1fr) auto auto;
}

.fcm-family-create-form {
	background: var(--fcm-soft);
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	margin: 0 0 14px;
	padding: 14px;
}

.fcm-inline-form label {
	grid-column: 1 / -1;
}

.fcm-inline-form input {
	border: 1px solid var(--fcm-line);
	border-radius: 6px;
	background: var(--fcm-input);
	color: var(--fcm-ink);
	font: inherit;
	min-height: 40px;
	padding: 8px 10px;
	width: 100%;
}

.fcm-recent-text-menu {
	background: var(--fcm-surface);
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
	display: grid;
	gap: 4px;
	max-height: 220px;
	overflow: auto;
	padding: 6px;
	position: absolute;
	z-index: 99999;
}

.fcm-recent-text-row {
	display: grid;
	gap: 4px;
	grid-template-columns: minmax(0, 1fr) 34px;
}

.fcm-recent-text-choice,
.fcm-recent-text-remove,
.fcm-recent-text-clear {
	background: transparent;
	border: 1px solid var(--fcm-line);
	border-radius: 6px;
	color: var(--fcm-ink);
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	min-height: 32px;
	padding: 6px 8px;
}

.fcm-recent-text-choice {
	overflow: hidden;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fcm-recent-text-choice:hover,
.fcm-recent-text-remove:hover,
.fcm-recent-text-clear:hover {
	background: var(--fcm-accent);
	color: #ffffff;
}

.fcm-recent-text-clear {
	margin-top: 2px;
	width: 100%;
}

.fcm-workspace-split {
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(0, 1fr);
	margin: 0 0 18px;
}

.fcm-invite-row {
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
	margin: 0 0 18px;
}

.fcm-management-panel {
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(0, 1fr);
	margin: 0 0 18px;
}

.fcm-communication-panel {
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(0, 1fr);
	margin: 0 0 18px;
}

.fcm-media-panel {
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr);
	margin: 0 0 18px;
}

.fcm-photo-workspace {
	grid-template-columns: minmax(320px, 1fr) minmax(280px, 380px);
	height: 100%;
	min-height: 0;
}

.fcm-photo-workspace > .fcm-panel {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.fcm-video-workspace,
.fcm-community-workspace,
.fcm-activity-workspace,
.fcm-recovery-workspace,
.fcm-call-workspace {
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(0, 1fr);
	margin: 0 0 18px;
}

.fcm-community-panel {
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(0, 1fr) minmax(240px, 330px) minmax(240px, 330px);
	margin: 0 0 18px;
}

.fcm-community-workspace,
.fcm-activity-workspace,
.fcm-recovery-workspace,
.fcm-call-workspace {
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
}

.fcm-video-workspace {
	align-items: stretch;
	grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
	height: 100%;
	min-height: 0;
	width: 100%;
}

.fcm-video-workspace > .fcm-panel {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.fcm-notification-panel {
	margin: 0 0 18px;
}

.fcm-toast-region {
	display: grid;
	gap: 8px;
	justify-items: end;
	margin: -6px 0 14px;
	pointer-events: none;
	position: sticky;
	top: 12px;
	z-index: 30;
}

.fcm-toast {
	align-items: center;
	background: var(--fcm-surface);
	border: 1px solid var(--fcm-accent);
	border-radius: 8px;
	box-shadow: 0 12px 28px var(--fcm-shadow);
	color: var(--fcm-ink);
	display: grid;
	gap: 12px;
	grid-template-columns: minmax(0, 1fr) auto;
	max-width: 100%;
	min-width: min(420px, 100%);
	padding: 10px;
	pointer-events: auto;
}

.fcm-toast > span {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.fcm-toast-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
}

.fcm-toast-actions .fcm-link-button {
	min-height: 30px;
}

.fcm-panel-heading {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 12px;
}

.fcm-panel-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
}

.fcm-panel-heading h3 {
	margin: 0;
}

.fcm-panel-count {
	color: var(--fcm-muted);
	font-size: 12px;
	font-weight: 700;
}

.fcm-panel h3 {
	font-size: 18px;
	line-height: 1.3;
	margin: 0 0 12px;
}

.fcm-list {
	align-content: start;
	display: grid;
	gap: 8px;
}

.fcm-list-item {
	background: var(--fcm-surface);
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	cursor: default;
	display: grid;
	gap: 3px;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 12px;
	text-align: left;
}

button.fcm-list-item {
	cursor: pointer;
}

.fcm-list-item.is-active {
	border-color: var(--fcm-accent);
	box-shadow: 0 0 0 2px var(--fcm-accent-soft);
}

.fcm-list-item strong {
	color: var(--fcm-ink);
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fcm-list-item span {
	color: var(--fcm-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: capitalize;
}

.fcm-member-row {
	align-items: center;
	gap: 12px;
	grid-template-columns: minmax(240px, 1fr) minmax(130px, 170px) auto;
	min-height: 64px;
	padding: 10px 12px;
}

.fcm-member-identity {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.fcm-member-role-cell {
	min-width: 0;
}

.fcm-member-role-cell:empty {
	display: none;
}

.fcm-member-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-end;
	white-space: nowrap;
}

.fcm-member-role-select {
	width: 100%;
}

.fcm-conversation-item {
	align-items: center;
	align-self: start;
	background: var(--fcm-surface);
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	display: grid;
	gap: 8px;
	grid-template-columns: minmax(0, 1fr) auto;
	min-width: 0;
	min-height: 68px;
	padding: 10px;
}

.fcm-conversation-item.is-active {
	border-color: var(--fcm-accent);
	box-shadow: 0 0 0 2px var(--fcm-accent-soft);
}

.fcm-conversation-select {
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: grid;
	gap: 4px;
	min-width: 0;
	padding: 0;
	text-align: left;
	width: 100%;
}

.fcm-conversation-select strong {
	color: var(--fcm-ink);
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fcm-conversation-select span {
	color: var(--fcm-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: capitalize;
}

.fcm-conversation-actions {
	align-items: center;
	display: flex;
}

.fcm-family-item,
.fcm-album-item {
	align-items: stretch;
	background: var(--fcm-surface);
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	display: grid;
	gap: 8px;
	grid-template-columns: minmax(0, 1fr) auto;
	min-width: 0;
	padding: 10px;
}

.fcm-family-item.is-active,
.fcm-album-item.is-active {
	border-color: var(--fcm-accent);
	box-shadow: 0 0 0 2px var(--fcm-accent-soft);
}

.fcm-family-select,
.fcm-album-select {
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: grid;
	gap: 4px;
	min-width: 0;
	padding: 0;
	text-align: left;
	width: 100%;
}

.fcm-family-select strong,
.fcm-album-select strong {
	color: var(--fcm-ink);
	font-size: 15px;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.fcm-family-select span,
.fcm-album-select span {
	color: var(--fcm-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: capitalize;
}

.fcm-family-actions,
.fcm-album-actions {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
}

.fcm-family-actions .fcm-link-button,
.fcm-album-actions .fcm-link-button {
	min-height: 38px;
	padding: 7px 10px;
}

.fcm-invite-form,
.fcm-member-form {
	display: grid;
	gap: 8px;
}

.fcm-upload-form {
	align-content: start;
	display: grid;
	gap: 10px;
}

.fcm-file-input {
	display: none;
}

.fcm-photo-dropzone {
	align-items: center;
	background: var(--fcm-input);
	border: 1px dashed var(--fcm-line);
	border-radius: 8px;
	display: grid;
	gap: 10px;
	justify-items: center;
	min-height: 132px;
	padding: 18px;
	text-align: center;
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.fcm-photo-dropzone.is-dragging {
	border-color: var(--fcm-accent);
	box-shadow: 0 0 0 3px var(--fcm-accent-soft);
}

.fcm-photo-dropzone strong {
	color: var(--fcm-ink);
	font-size: 15px;
}

.fcm-photo-dropzone span {
	color: var(--fcm-muted);
	font-size: 12px;
	font-weight: 700;
}

.fcm-upload-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.fcm-upload-target {
	background: var(--fcm-input);
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	display: grid;
	gap: 4px;
	padding: 10px 12px;
}

.fcm-upload-target span {
	color: var(--fcm-muted);
	font-size: 12px;
	font-weight: 700;
}

.fcm-upload-target strong {
	color: var(--fcm-muted);
	font-size: 15px;
	overflow-wrap: anywhere;
}

.fcm-upload-target.has-album {
	border-color: var(--fcm-accent);
	box-shadow: 0 0 0 2px var(--fcm-accent-soft);
}

.fcm-upload-target.has-album strong {
	color: var(--fcm-ink);
}

.fcm-community-form {
	display: grid;
	gap: 10px;
	margin-bottom: 14px;
}

.fcm-recovery-filters {
	border-bottom: 1px solid var(--fcm-line);
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	margin: 0 0 12px;
	padding: 0 0 12px;
}

.fcm-recovery-filters label {
	display: grid;
	gap: 5px;
}

.fcm-recovery-filters label span {
	color: var(--fcm-muted);
	font-size: 12px;
	font-weight: 700;
}

.fcm-invite-form input,
.fcm-invite-form textarea,
.fcm-invite-form select,
.fcm-member-form input,
.fcm-member-form select,
.fcm-message-form input,
.fcm-upload-form input,
.fcm-recovery-filters input,
.fcm-recovery-filters select,
.fcm-community-form textarea {
	border: 1px solid var(--fcm-line);
	border-radius: 6px;
	background: var(--fcm-input);
	color: var(--fcm-ink);
	font: inherit;
	min-height: 40px;
	padding: 8px 10px;
	width: 100%;
}

.fcm-invite-form textarea {
	resize: vertical;
}

.fcm-member-form {
	margin-bottom: 14px;
}

.fcm-form-status {
	overflow-wrap: anywhere;
}

.fcm-list-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.fcm-recovery-filter-actions {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.fcm-recovery-filters .fcm-form-status {
	align-self: end;
	min-height: 32px;
}

.fcm-family-controls {
	align-items: center;
	border-top: 1px solid var(--fcm-line);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
	padding-top: 12px;
}

.fcm-ownership-transfer {
	align-items: end;
	display: grid;
	gap: 8px;
	grid-template-columns: minmax(180px, 1fr) minmax(120px, auto);
	width: min(100%, 520px);
}

.fcm-ownership-transfer[hidden] {
	display: none;
}

.fcm-ownership-transfer label {
	grid-column: 1 / -1;
}

.fcm-ownership-transfer select {
	background: var(--fcm-input);
	border: 1px solid var(--fcm-line);
	border-radius: 6px;
	color: var(--fcm-ink);
	font: inherit;
	min-height: 40px;
	padding: 8px 10px;
	width: 100%;
}

.fcm-community-form textarea {
	min-height: 92px;
	resize: vertical;
}

.fcm-media-list {
	display: grid;
	gap: 8px;
	margin-top: 8px;
	max-height: 220px;
	overflow: auto;
}

.fcm-selected-album {
	border-top: 1px solid var(--fcm-line);
	margin-top: 14px;
	padding-top: 12px;
}

.fcm-photo-workspace .fcm-selected-album {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

.fcm-photo-workspace .fcm-photo-gallery {
	flex: 1 1 auto;
	max-height: none;
	min-height: 0;
}

.fcm-video-workspace .fcm-upload-form {
	min-height: 0;
}

.fcm-video-workspace .fcm-media-list {
	flex: 1 1 auto;
	max-height: none;
	min-height: 0;
}

.fcm-selected-album h4 {
	font-size: 14px;
	margin: 0 0 8px;
}

.fcm-media-item {
	background: var(--fcm-soft);
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	color: var(--fcm-ink);
	display: block;
	font-size: 13px;
	font-weight: 700;
	overflow-wrap: anywhere;
	padding: 9px 10px;
	text-decoration: none;
}

.fcm-photo-gallery .fcm-media-item {
	align-items: center;
	display: grid;
	gap: 8px;
	grid-template-columns: minmax(0, 1fr) auto;
	min-height: 62px;
}

.fcm-video-item {
	align-items: center;
	display: grid;
	gap: 8px;
	grid-template-columns: 96px minmax(0, 1fr) auto;
	min-height: 82px;
}

.fcm-video-open {
	align-items: center;
	background: #000;
	border-radius: 6px;
	color: var(--fcm-ink);
	display: grid;
	height: 54px;
	justify-items: center;
	min-width: 0;
	overflow-wrap: anywhere;
	text-decoration: none;
}

.fcm-video-open span {
	color: #fff;
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
}

.fcm-video-detail {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.fcm-video-detail strong,
.fcm-video-detail span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fcm-video-detail span {
	color: var(--fcm-muted);
	font-size: 12px;
	font-weight: 700;
}

.fcm-video-actions {
	align-items: center;
	display: flex;
	gap: 6px;
	white-space: nowrap;
}

.fcm-video-dropzone {
	align-items: center;
	border: 1px dashed var(--fcm-line);
	border-radius: 8px;
	display: grid;
	gap: 8px;
	justify-items: center;
	padding: 18px;
	text-align: center;
}

.fcm-video-dropzone.is-dragging {
	background: color-mix(in srgb, var(--fcm-accent) 14%, transparent);
	border-color: var(--fcm-accent);
}

.fcm-video-dropzone span {
	color: var(--fcm-muted);
	font-size: 13px;
	font-weight: 700;
}

.fcm-video-preview {
	align-items: center;
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	display: grid;
	gap: 10px;
	grid-template-columns: 130px minmax(0, 1fr);
	padding: 8px;
}

.fcm-video-preview[hidden] {
	display: none;
}

.fcm-video-preview video {
	background: #000;
	border-radius: 6px;
	height: 76px;
	object-fit: cover;
	width: 130px;
}

.fcm-video-preview div {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.fcm-video-preview strong,
.fcm-video-preview span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fcm-video-preview span {
	color: var(--fcm-muted);
	font-size: 12px;
	font-weight: 700;
}

.fcm-video-queue {
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	display: grid;
	gap: 6px;
	max-height: 170px;
	overflow: auto;
	padding: 8px;
}

.fcm-video-queue[hidden] {
	display: none;
}

.fcm-video-queue-item {
	align-items: center;
	display: grid;
	gap: 8px;
	grid-template-columns: 28px minmax(0, 1fr) auto;
}

.fcm-video-queue-index {
	align-items: center;
	background: var(--fcm-accent-soft);
	border-radius: 999px;
	color: var(--fcm-accent);
	display: inline-flex;
	font-size: 12px;
	font-weight: 800;
	height: 28px;
	justify-content: center;
	width: 28px;
}

.fcm-video-queue-name {
	color: var(--fcm-ink);
	font-weight: 800;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fcm-video-queue-size {
	color: var(--fcm-muted);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.fcm-upload-progress {
	accent-color: var(--fcm-accent);
	height: 10px;
	width: 100%;
}

.fcm-photo-open {
	align-items: center;
	color: var(--fcm-ink);
	display: grid;
	gap: 0 8px;
	grid-template-columns: 52px minmax(0, 1fr);
	grid-template-rows: auto auto;
	min-width: 0;
	text-decoration: none;
}

.fcm-photo-gallery .fcm-photo-open strong,
.fcm-photo-gallery .fcm-photo-open small {
	grid-column: 2;
	min-width: 0;
	overflow-wrap: anywhere;
}

.fcm-photo-gallery .fcm-photo-open small {
	color: var(--fcm-muted);
	font-weight: 600;
	margin-top: 3px;
}

.fcm-photo-bulk-actions,
.fcm-photo-delete-controls {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.fcm-photo-bulk-actions {
	border-bottom: 1px solid var(--fcm-line);
	padding-bottom: 8px;
}

.fcm-photo-delete-controls {
	border-left: 1px solid var(--fcm-line);
	flex-wrap: nowrap;
	padding-left: 8px;
	white-space: nowrap;
}

.fcm-photo-delete-controls label {
	align-items: center;
	color: var(--fcm-muted);
	display: inline-flex;
	font-size: 12px;
	font-weight: 700;
	gap: 6px;
}

.fcm-photo-delete-controls .fcm-link-button {
	min-height: 34px;
	padding: 6px 10px;
}

.fcm-photo-thumb {
	background-color: var(--fcm-surface);
	background-position: center;
	background-size: cover;
	border: 1px solid var(--fcm-line);
	border-radius: 6px;
	display: block;
	grid-row: 1 / span 2;
	height: 46px;
	width: 46px;
}

.fcm-lightbox-open {
	overflow: hidden;
}

.fcm-photo-lightbox {
	align-items: center;
	background: rgba(5, 8, 10, 0.94);
	color: #fff;
	display: grid;
	gap: 12px;
	grid-template-columns: 64px minmax(0, 1fr) 64px;
	inset: 0;
	padding: 24px;
	position: fixed;
	z-index: 999999;
}

.fcm-photo-lightbox[hidden] {
	display: none;
}

.fcm-lightbox-frame {
	align-items: center;
	display: grid;
	gap: 12px;
	justify-items: center;
	margin: 0;
	min-width: 0;
}

.fcm-lightbox-frame img {
	background: #111;
	border: 1px solid rgba(255, 255, 255, 0.28);
	display: block;
	max-height: calc(100vh - 140px);
	max-width: 100%;
	object-fit: contain;
}

.fcm-lightbox-frame figcaption {
	display: grid;
	gap: 4px;
	justify-items: center;
	max-width: min(760px, 100%);
	text-align: center;
}

.fcm-lightbox-frame strong,
.fcm-lightbox-frame span {
	color: #fff;
	overflow-wrap: anywhere;
}

.fcm-lightbox-frame span {
	color: rgba(255, 255, 255, 0.72);
	font-size: 13px;
}

.fcm-lightbox-close,
.fcm-lightbox-nav {
	align-items: center;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 8px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 34px;
	font-weight: 700;
	height: 54px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	width: 54px;
}

.fcm-lightbox-close {
	font-size: 28px;
	position: absolute;
	right: 18px;
	top: 18px;
}

.fcm-lightbox-nav:hover,
.fcm-lightbox-nav:focus,
.fcm-lightbox-close:hover,
.fcm-lightbox-close:focus {
	background: rgba(255, 255, 255, 0.24);
	outline: 2px solid rgba(255, 255, 255, 0.62);
	outline-offset: 2px;
}

.fcm-lightbox-nav:disabled {
	cursor: default;
	opacity: 0.35;
}

.fcm-lightbox-prev {
	justify-self: start;
}

.fcm-lightbox-next {
	justify-self: end;
}

.fcm-feed {
	display: grid;
	gap: 10px;
	max-height: 360px;
	overflow: auto;
}

.fcm-feed-item {
	background: var(--fcm-surface);
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	padding: 10px 12px;
}

.fcm-notification-item {
	cursor: pointer;
	font: inherit;
	text-align: left;
	width: 100%;
}

.fcm-notification-item[aria-disabled="true"] {
	cursor: default;
}

.fcm-feed-item.is-unread {
	border-color: var(--fcm-accent);
	box-shadow: 0 0 0 2px var(--fcm-accent-soft);
}

.fcm-feed-item strong {
	display: block;
	font-size: 13px;
	margin-bottom: 5px;
}

.fcm-feed-item p {
	color: var(--fcm-ink);
	font-size: 14px;
	margin: 0 0 6px;
}

.fcm-feed-item span {
	color: var(--fcm-muted);
	font-size: 12px;
	font-weight: 700;
}

.fcm-chat-create {
	margin-bottom: 12px;
}

.fcm-chat-layout {
	display: grid;
	gap: 12px;
	grid-template-columns: minmax(170px, 240px) minmax(0, 1fr);
	min-height: calc(100vh - 260px);
}

.fcm-chat-thread {
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	display: grid;
	grid-template-rows: minmax(180px, 1fr) auto;
	min-height: 100%;
	overflow: hidden;
}

.fcm-messages {
	align-content: start;
	background: var(--fcm-soft);
	display: grid;
	gap: 8px;
	grid-auto-rows: max-content;
	overflow: auto;
	padding: 12px;
}

.fcm-message {
	align-self: start;
	background: var(--fcm-surface);
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	padding: 9px 10px;
}

.fcm-message.is-deleted {
	opacity: 0.72;
}

.fcm-message-header {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: space-between;
}

.fcm-message strong {
	display: block;
	font-size: 12px;
	margin-bottom: 4px;
}

.fcm-message-header span {
	color: var(--fcm-muted);
	font-size: 11px;
}

.fcm-message p {
	color: var(--fcm-ink);
	font-size: 14px;
	margin: 0;
}

.fcm-message.is-deleted p {
	color: var(--fcm-muted);
	font-style: italic;
}

.fcm-message-actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 6px;
	min-height: 18px;
}

.fcm-message-media {
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	display: grid;
	gap: 6px;
	margin-top: 8px;
	overflow: hidden;
}

.fcm-message-media img,
.fcm-message-media video,
.fcm-message-gallery-item img {
	background: #000;
	display: block;
	max-height: 220px;
	object-fit: cover;
	width: 100%;
}

.fcm-message-media audio {
	display: block;
	margin: 10px;
	width: calc(100% - 20px);
}

.fcm-message-media.is-unavailable {
	background: var(--fcm-input);
	padding-top: 8px;
}

.fcm-message-gallery-grid {
	display: grid;
	gap: 3px;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	padding: 3px;
}

.fcm-message-gallery-item {
	aspect-ratio: 1;
	background: #000;
	border-radius: 5px;
	display: block;
	overflow: hidden;
}

.fcm-message-gallery-item img {
	height: 100%;
	max-height: none;
}

.fcm-message-media-status {
	color: var(--fcm-ink);
	font-size: 12px;
	padding: 0 8px 8px;
}

.fcm-message-media-status {
	color: var(--fcm-muted);
	font-weight: 700;
	padding-bottom: 0;
}

.fcm-message-media-open {
	border-top: 1px solid var(--fcm-line);
	color: var(--fcm-accent);
	font-size: 12px;
	font-weight: 800;
	padding: 7px 8px 8px;
	text-decoration: none;
}

.fcm-message-media-picker {
	align-items: center;
	border-top: 1px solid var(--fcm-line);
	display: grid;
	gap: 8px;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
	padding: 10px;
}

.fcm-message-media-picker select {
	min-width: 0;
}

.fcm-typing-indicator {
	border-top: 1px solid var(--fcm-line);
	color: var(--fcm-muted);
	font-size: 13px;
	font-weight: 700;
	min-height: 32px;
	padding: 8px 12px;
}

.fcm-typing-indicator[hidden] {
	display: none;
}

.fcm-message-form {
	border-top: 1px solid var(--fcm-line);
	display: grid;
	gap: 8px;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	padding: 10px;
}

.fcm-message-form.is-dragging-photo {
	background: color-mix(in srgb, var(--fcm-accent) 16%, transparent);
	outline: 2px dashed var(--fcm-accent);
	outline-offset: -6px;
}

.fcm-message-attachment-preview {
	align-items: center;
	background: var(--fcm-input);
	border: 1px solid var(--fcm-line);
	border-radius: 6px;
	display: flex;
	gap: 8px;
	grid-column: 1 / -1;
	justify-content: space-between;
	min-width: 0;
	padding: 6px 8px;
}

.fcm-message-attachment-preview[hidden] {
	display: none;
}

.fcm-message-attachment-preview span {
	color: var(--fcm-ink);
	font-size: 12px;
	font-weight: 700;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fcm-message-attachment-preview button {
	background: transparent;
	border: 1px solid var(--fcm-line);
	border-radius: 6px;
	color: var(--fcm-ink);
	cursor: pointer;
	font: inherit;
	font-size: 12px;
	font-weight: 800;
	padding: 4px 8px;
}

.fcm-message-attach-button {
	padding: 8px;
	width: 40px;
}

.fcm-message-voice-button {
	padding: 8px;
	width: 46px;
}

.fcm-message-voice-button.is-recording {
	background: #b22b5f;
	color: #fff;
}

.fcm-call-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 10px;
}

.fcm-call-modal {
	background: rgba(0, 0, 0, 0.78);
	display: grid;
	inset: 0;
	padding: 24px;
	place-items: center;
	position: fixed;
	z-index: 10000;
}

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

.fcm-call-room {
	background: var(--fcm-bg);
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	box-shadow: var(--fcm-shadow);
	color: var(--fcm-ink);
	display: grid;
	gap: 16px;
	max-width: 980px;
	min-height: min(720px, calc(100vh - 48px));
	padding: 18px;
	width: min(100%, 980px);
}

.fcm-call-room-header,
.fcm-call-controls {
	align-items: center;
	display: flex;
	gap: 10px;
	justify-content: space-between;
}

.fcm-call-room-header span {
	color: var(--fcm-accent);
	display: block;
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
}

.fcm-call-room-header strong {
	display: block;
	font-size: 22px;
}

.fcm-call-stage {
	display: grid;
	gap: 12px;
	grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
	min-height: 420px;
}

.fcm-call-tile {
	background: var(--fcm-surface);
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	display: grid;
	min-height: 260px;
	overflow: hidden;
	position: relative;
}

.fcm-call-tile video {
	background: #000;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.fcm-call-tile-label {
	background: rgba(0, 0, 0, 0.62);
	border-radius: 6px;
	bottom: 12px;
	color: #fff;
	font-weight: 800;
	left: 12px;
	padding: 6px 9px;
	position: absolute;
}

.fcm-call-remote-placeholder {
	align-items: center;
	color: var(--fcm-muted);
	justify-items: center;
	padding: 20px;
	text-align: center;
}

.fcm-call-remote-placeholder strong {
	color: var(--fcm-ink);
	display: block;
	margin-bottom: 8px;
}

.fcm-danger-action {
	background: #b22b5f;
	border-color: #b22b5f;
	color: #fff;
}

.fcm-tab,
.fcm-button,
.fcm-link-button,
.fcm-icon-button {
	align-items: center;
	border: 1px solid var(--fcm-line);
	background: var(--fcm-surface);
	color: var(--fcm-ink);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	justify-content: center;
	min-height: 40px;
	padding: 8px 12px;
	text-decoration: none;
}

.fcm-link-button {
	border-radius: 6px;
	font-size: 12px;
	min-height: 32px;
	padding: 5px 9px;
}

.fcm-danger-button {
	border-color: var(--fcm-danger);
	color: var(--fcm-danger);
}

.fcm-member-role-select {
	border: 1px solid var(--fcm-line);
	border-radius: 6px;
	background: var(--fcm-input);
	color: var(--fcm-ink);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	min-height: 32px;
	padding: 5px 9px;
}

.fcm-tab {
	border-radius: 999px;
}

.fcm-tab.is-active,
.fcm-button {
	background: var(--fcm-accent);
	border-color: var(--fcm-accent);
	color: var(--fcm-on-accent);
}

.fcm-icon-button {
	border-radius: 50%;
	height: 40px;
	padding: 0;
	width: 40px;
}

.fcm-feature-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.fcm-feature,
.fcm-panel {
	background: var(--fcm-surface);
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	box-shadow: 0 10px 24px var(--fcm-shadow);
}

.fcm-feature {
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: space-between;
	min-height: 178px;
	padding: 18px;
}

.fcm-feature:not([data-fcm-selected]) {
	opacity: 0.72;
}

.fcm-feature h3 {
	font-size: 18px;
	line-height: 1.3;
	margin: 0 0 8px;
}

.fcm-feature p,
.fcm-panel p {
	color: var(--fcm-muted);
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
}

.fcm-status {
	align-self: flex-start;
	background: var(--fcm-soft);
	border: 1px solid var(--fcm-line);
	border-radius: 999px;
	color: var(--fcm-accent-2);
	font-size: 12px;
	font-weight: 700;
	padding: 5px 9px;
}

.fcm-panel {
	padding: 24px;
}

.fcm-auth-panel {
	display: grid;
	gap: 14px;
	max-width: 520px;
}

.fcm-home {
	max-width: 1180px;
	padding: 28px;
	position: relative;
}

.fcm-home-utility {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	position: absolute;
	right: 28px;
	top: 28px;
	z-index: 2;
}

.fcm-home-hero {
	align-items: center;
	display: grid;
	gap: 28px;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
	min-height: 520px;
}

.fcm-home-copy {
	display: grid;
	gap: 18px;
	max-width: 660px;
}

.fcm-home-copy h1 {
	font-size: 46px;
	line-height: 1.05;
	margin: 0;
	max-width: 720px;
}

.fcm-home-copy p {
	color: var(--fcm-muted);
	font-size: 17px;
	line-height: 1.65;
	margin: 0;
}

.fcm-home-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.fcm-home-theme-picker {
	justify-content: flex-start;
}

.fcm-home-visual {
	aspect-ratio: 1 / 1;
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	background:
		radial-gradient(circle at 18% 18%, var(--fcm-accent-soft), transparent 30%),
		linear-gradient(135deg, var(--fcm-surface), var(--fcm-soft));
	box-shadow: 0 18px 38px var(--fcm-shadow);
	position: relative;
	overflow: hidden;
}

.fcm-home-photo {
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	box-shadow: 0 12px 28px var(--fcm-shadow);
	position: absolute;
}

.fcm-home-photo-one {
	background:
		linear-gradient(135deg, var(--fcm-accent-soft), transparent),
		linear-gradient(160deg, var(--fcm-accent), var(--fcm-soft));
	height: 46%;
	left: 10%;
	top: 10%;
	width: 50%;
}

.fcm-home-photo-two {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent),
		linear-gradient(160deg, var(--fcm-accent-2), var(--fcm-surface));
	height: 38%;
	right: 9%;
	top: 25%;
	width: 42%;
}

.fcm-home-photo-three {
	background:
		linear-gradient(135deg, var(--fcm-accent-soft), transparent),
		linear-gradient(160deg, var(--fcm-soft), var(--fcm-accent));
	bottom: 9%;
	height: 38%;
	left: 18%;
	width: 56%;
}

.fcm-home-message {
	background: var(--fcm-surface);
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	bottom: 10%;
	box-shadow: 0 12px 28px var(--fcm-shadow);
	display: grid;
	gap: 4px;
	padding: 12px;
	position: absolute;
	right: 8%;
	width: min(250px, 64%);
}

.fcm-home-message strong {
	color: var(--fcm-ink);
	font-size: 14px;
}

.fcm-home-message span {
	color: var(--fcm-muted);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}

.fcm-home-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 24px;
}

.fcm-home-card {
	background: var(--fcm-surface);
	border: 1px solid var(--fcm-line);
	border-radius: 8px;
	box-shadow: 0 10px 24px var(--fcm-shadow);
	display: grid;
	gap: 8px;
	padding: 18px;
}

.fcm-home-card strong {
	color: var(--fcm-ink);
	font-size: 16px;
}

.fcm-home-card p {
	color: var(--fcm-muted);
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
}

@media (max-width: 640px) {
	.fcm-app {
		min-height: 100vh;
		padding: 16px;
	}

	.fcm-workspace-shell {
		grid-template-columns: 1fr;
		height: auto;
		min-height: 0;
	}

	.fcm-sidebar {
		height: auto;
		max-height: none;
		position: static;
	}

	.fcm-workspace-main,
	.fcm-workspace-panel.is-active {
		height: auto;
		min-height: 0;
	}

	.fcm-photo-workspace {
		height: auto;
	}

	.fcm-chat-layout {
		min-height: 0;
	}

	.fcm-chat-thread {
		min-height: 320px;
	}

	.fcm-sidebar-nav {
		display: flex;
		overflow-x: auto;
		padding-bottom: 2px;
	}

	.fcm-sidebar-nav button {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.fcm-header {
		align-items: flex-start;
		flex-direction: column;
	}

	.fcm-header-actions {
		justify-content: flex-start;
		width: 100%;
	}

	.fcm-theme-picker {
		flex: 1 1 210px;
	}

	.fcm-theme-picker select {
		flex: 1;
		max-width: none;
	}

	.fcm-toast-region {
		justify-items: stretch;
		position: static;
	}

	.fcm-toast {
		grid-template-columns: 1fr;
		min-width: 0;
	}

	.fcm-toast-actions {
		justify-content: flex-start;
	}

	.fcm-home-utility {
		margin-bottom: 18px;
		position: static;
		width: 100%;
	}

	.fcm-home-hero,
	.fcm-home-grid {
		grid-template-columns: 1fr;
	}

	.fcm-home-hero {
		min-height: 0;
	}

	.fcm-home-copy h1 {
		font-size: 32px;
	}

	.fcm-home-visual {
		min-height: 300px;
	}

	.fcm-album-item {
		grid-template-columns: 1fr;
	}

	.fcm-family-item,
	.fcm-member-row {
		grid-template-columns: 1fr;
	}

	.fcm-member-actions {
		justify-content: flex-start;
	}

	.fcm-ownership-transfer {
		grid-template-columns: 1fr;
	}

	.fcm-family-actions {
		justify-content: flex-start;
	}

	.fcm-album-actions {
		justify-content: flex-start;
	}

	.fcm-photo-lightbox {
		gap: 8px;
		grid-template-columns: 46px minmax(0, 1fr) 46px;
		padding: 14px 10px;
	}

	.fcm-lightbox-frame img {
		max-height: calc(100vh - 120px);
	}

	.fcm-lightbox-close,
	.fcm-lightbox-nav {
		font-size: 28px;
		height: 42px;
		width: 42px;
	}

	.fcm-lightbox-close {
		right: 12px;
		top: 12px;
	}

	.fcm-header h2,
	.fcm-panel h2 {
		font-size: 23px;
	}

	.fcm-tab {
		flex: 1 1 150px;
	}

	.fcm-overview,
	.fcm-inline-form,
	.fcm-workspace-split,
	.fcm-invite-row,
	.fcm-management-panel,
	.fcm-communication-panel,
	.fcm-media-panel,
	.fcm-photo-workspace,
	.fcm-video-workspace,
	.fcm-community-workspace,
	.fcm-activity-workspace,
	.fcm-recovery-workspace,
	.fcm-call-workspace,
	.fcm-community-panel,
	.fcm-chat-layout,
	.fcm-call-stage,
	.fcm-message-media-picker,
	.fcm-video-item,
	.fcm-video-preview,
	.fcm-message-form {
		grid-template-columns: 1fr;
	}

	.fcm-video-open {
		width: 100%;
	}
}