@layer f88-foundation, f88-structure, f88-compatibility;
@layer f88-foundation {
/* Theme-safe foundation shared by every AIF88Master front-end component. */
.f88s2 {
	--f88s2-card: var(--theme-palette-color-8, #fff);
	--f88s2-text: var(--theme-palette-color-1, #172033);
	--f88s2-muted: var(--theme-palette-color-3, #64748b);
	--f88s2-line: var(--theme-palette-color-6, #e2e8f0);
	--f88s2-accent: #1d4ed8;
	width: 100%;
	max-width: 1180px;
	min-width: 0;
	margin-inline: auto;
	color: var(--f88s2-text);
	font-family: "Be Vietnam Pro", Inter, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.65;
	font-variant-numeric: tabular-nums;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	isolation: isolate;
	container-type: inline-size;
}

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

.f88s2 :where(img, svg, video, iframe) {
	max-width: 100%;
}

.f88s2 :where(p, li, dd, td, th, a, span, strong) {
	overflow-wrap: anywhere;
}

.f88s2 :where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid color-mix(in srgb, var(--f88s2-accent) 70%, transparent);
	outline-offset: 3px;
}

.f88s2-table-wrap,
.f88s2-fixtures-wrap,
.f88s2-bracket {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 680px) {
	.f88s2 {
		font-size: 15px;
	}

	.f88s2 :where(input, select, textarea) {
		max-width: 100%;
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.f88s2 *,
	.f88s2 *::before,
	.f88s2 *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}
}