/**
 * CPS Design System v3
 * 3-Tier Token Architecture + Complete Component Library
 * Brand: CABSIN (#00A1B0 teal / #002B4A navy)
 * Scoped to .cps-container — zero leakage in or out.
 *
 * @package CPS
 * @version 0.2.0
 */

/* ============================================================
   TIER 1: PRIMITIVES
   Raw color/size values. NEVER used in components directly.
   ============================================================ */
:root {
	/* Absolute primitives */
	--cps-white: #ffffff;
	--cps-black: #000000;

	/* Teal scale (base #00A1B0 at 500) */
	--cps-teal-50:  #F0FAFB;
	--cps-teal-100: #D1F0F3;
	--cps-teal-200: #A3E1E7;
	--cps-teal-300: #4DCAD4;
	--cps-teal-400: #26BDC8;
	--cps-teal-500: #00A1B0;
	--cps-teal-600: #008A97;
	--cps-teal-700: #00727D;
	--cps-teal-800: #005B63;
	--cps-teal-900: #004249;

	/* Navy scale (base #002B4A at 500) */
	--cps-navy-50:  #E8EEF4;
	--cps-navy-100: #C2D1E0;
	--cps-navy-200: #8AA8C4;
	--cps-navy-300: #5580A4;
	--cps-navy-400: #2D5577;
	--cps-navy-500: #002B4A;
	--cps-navy-600: #00243F;
	--cps-navy-700: #001D34;
	--cps-navy-800: #001629;
	--cps-navy-900: #000F1E;

	/* Neutral scale (navy-derived, not generic gray) */
	--cps-neutral-50:  #F5F7F9;
	--cps-neutral-100: #E8ECF0;
	--cps-neutral-150: #D9DEE4;
	--cps-neutral-200: #C5CDD5;
	--cps-neutral-300: #A6B2BD;
	--cps-neutral-400: #8494A2;
	--cps-neutral-500: #637586;
	--cps-neutral-600: #4D5D6B;
	--cps-neutral-700: #3A4752;
	--cps-neutral-800: #2A333B;
	--cps-neutral-900: #1A2029;

	/* Named secondary colors (CABSIN official) */
	--cps-blue-gray:      #40738D;
	--cps-blue-medium:    #206092;
	--cps-blue-electric:  #2B7EE2;
	--cps-dark-slate:     #425464;
	--cps-light-blue-gray:#A6BBC9;
	--cps-pale-blue-ice:  #B9D2DD;

	/* Green (health/nature) */
	--cps-green-50:  #E8F5E9;
	--cps-green-100: #C8E6C9;
	--cps-green-300: #66BB6A;
	--cps-green-500: #2D6A4F;
	--cps-green-700: #1B4332;
	--cps-green-900: #0D2818;

	/* Semantic status */
	--cps-red-50:  #FFEBEE;
	--cps-red-200: #EF9A9A;
	--cps-red-300: #EF5350;
	--cps-red-700: #C62828;
	--cps-yellow-50:  #FFF8E1;
	--cps-yellow-300: #FFB300;
	--cps-yellow-700: #F57F17;
	--cps-orange-50:  #FFF3E0;
	--cps-orange-300: #FF8A65;
	--cps-orange-500: #fd7e14;
	--cps-orange-700: #b45309;
	--cps-purple-50:  #F3E5F5;
	--cps-purple-300: #AB47BC;
	--cps-purple-500: #9c6fda;
	--cps-purple-700: #6f42c1;

	/* Legacy aliases (S2.5 backward compat — will be removed in S4) */
	--cps-gray-50:  var(--cps-neutral-50);
	--cps-gray-100: var(--cps-neutral-100);
	--cps-gray-150: var(--cps-neutral-150);
	--cps-gray-200: var(--cps-neutral-200);
	--cps-gray-300: var(--cps-neutral-300);
	--cps-gray-400: var(--cps-neutral-400);
	--cps-gray-500: var(--cps-neutral-500);
	--cps-gray-600: var(--cps-neutral-600);
	--cps-gray-700: var(--cps-neutral-700);
	--cps-gray-800: var(--cps-neutral-800);
	--cps-gray-900: var(--cps-neutral-900);
	--cps-blue-50:  var(--cps-navy-50);
	--cps-blue-100: var(--cps-navy-100);
	--cps-blue-300: var(--cps-teal-500);
	--cps-blue-500: var(--cps-navy-400);
	--cps-blue-700: var(--cps-blue-medium);
	--cps-blue-900: var(--cps-navy-500);

	/* ============================================================
	   TIER 2: SEMANTIC
	   Aliases that map primitives to purposes.
	   ALL components consume Tier 2 only.
	   ============================================================ */

	/* Surfaces */
	--cps-surface-canvas:  var(--cps-neutral-50);
	--cps-surface-chrome:  var(--cps-neutral-100);
	--cps-surface-card:    #FFFFFF;
	--cps-surface-raised:  var(--cps-neutral-150);
	--cps-surface-overlay: #FFFFFF;
	--cps-surface-dark:    var(--cps-navy-500);
	--cps-surface-tinted:  #F5FAFB;

	/* Text */
	--cps-text-primary:   var(--cps-navy-400);
	--cps-text-heading:   var(--cps-blue-gray);
	--cps-text-heading-sub: var(--cps-neutral-500);
	--cps-text-secondary: var(--cps-neutral-700);
	--cps-text-body:      var(--cps-dark-slate);
	--cps-text-muted:     var(--cps-neutral-500);
	--cps-text-hint:      var(--cps-neutral-400);
	--cps-text-disabled:  var(--cps-neutral-300);
	--cps-text-link:      var(--cps-blue-medium);
	--cps-text-on-accent: #FFFFFF;
	--cps-text-on-dark:   #FFFFFF;

	/* Lines/borders — near-invisible, minimalist */
	--cps-line-subtle:  rgba(0, 43, 74, 0.06);
	--cps-line-default: rgba(0, 43, 74, 0.10);
	--cps-line-strong:  rgba(0, 43, 74, 0.16);
	--cps-line-focus:   var(--cps-teal-300);

	/* Accent */
	--cps-accent:       var(--cps-teal-500);
	--cps-accent-hover: var(--cps-teal-600);
	--cps-accent-bg:    var(--cps-teal-50);

	/* Status */
	--cps-danger:      var(--cps-red-300);
	--cps-danger-bg:   var(--cps-red-50);
	--cps-warning:     var(--cps-yellow-300);
	--cps-warning-bg:  var(--cps-yellow-50);
	--cps-success:     var(--cps-green-300);
	--cps-success-bg:  var(--cps-green-50);

	/* ============================================================
	   MOTION TOKENS
	   ============================================================ */
	--cps-transition-fast:   150ms ease-out;
	--cps-transition-normal: 250ms ease-out;
	--cps-transition-slow:   350ms ease-out;
	--cps-transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Legacy alias */
	--cps-transition: var(--cps-transition-normal);

	/* ============================================================
	   OVERLAY TOKENS (navy-based rgba, for media/modal scrim)
	   ============================================================ */
	--cps-overlay-mid:     rgba(0, 43, 74, 0.45);  /* hover-reveal overlay */
	--cps-overlay-dark:    rgba(0, 43, 74, 0.72);  /* modal scrim + gradient bottom */
	--cps-surface-frosted: rgba(255, 255, 255, 0.92); /* frosted glass UI element */

	/* ============================================================
	   HOVER / INTERACTION TOKENS
	   ============================================================ */
	--cps-hover-brighten: brightness(1.12);
	--cps-hover-scale:    scale(1.04);

	/* ============================================================
	   ELEVATION / SHADOW TOKENS (navy-based rgba)
	   ============================================================ */
	--cps-shadow-xs: 0 1px 2px rgba(0, 43, 74, 0.04);
	--cps-shadow-sm: 0 1px 3px rgba(0, 43, 74, 0.06), 0 1px 2px rgba(0, 43, 74, 0.04);
	--cps-shadow-md: 0 4px 6px rgba(0, 43, 74, 0.07), 0 2px 4px rgba(0, 43, 74, 0.04);
	--cps-shadow-lg: 0 10px 15px rgba(0, 43, 74, 0.08), 0 4px 6px rgba(0, 43, 74, 0.04);
	--cps-shadow-xl: 0 20px 25px rgba(0, 43, 74, 0.10), 0 8px 10px rgba(0, 43, 74, 0.05);

	/* ============================================================
	   TYPOGRAPHY TOKENS
	   ============================================================ */
	--cps-font-heading: 'Outfit', sans-serif;
	--cps-font-body:    'Outfit', sans-serif;
	--cps-font-mono:    'Fira Code', 'Consolas', monospace;

	/* Type scale */
	--cps-text-2xs: 9px;
	--cps-text-xs:  10px;
	--cps-text-sm:  13px;
	--cps-text-md:  14px;
	--cps-text-base: 16px;
	--cps-text-lg:  18px;
	--cps-text-xl:  20px;
	--cps-text-2xl: 24px;
	--cps-text-2-5xl: 28px;
	--cps-text-3xl: 32px;
	--cps-text-4xl: 40px;

	/* ============================================================
	   SPACING TOKENS (4px grid)
	   ============================================================ */
	--cps-space-1:   4px;
	--cps-space-2:   8px;
	--cps-space-3:   12px;
	--cps-space-4:   16px;
	--cps-space-5:   20px;
	--cps-space-6:   24px;
	--cps-space-8:   32px;
	--cps-space-10:  40px;
	--cps-space-12:  48px;
	--cps-space-16:  64px;

	/* Named spacing (legacy + semantic) */
	--cps-space-2xs: 2px;
	--cps-space-xs:  4px;
	--cps-space-sm:  8px;
	--cps-space-md:  16px;
	--cps-space-lg:  24px;
	--cps-space-xl:  32px;
	--cps-space-2xl: 48px;
	--cps-space-3xl: 64px;

	/* ============================================================
	   BORDER TOKENS
	   ============================================================ */
	--cps-border-thin:   1px;
	--cps-border-medium: 2px;
	--cps-border-accent: 3px;
	--cps-ring-focus:    0 0 0 2px rgba(0, 161, 176, 0.15);

	/* ============================================================
	   COMPONENT TOKENS — Tier 3
	   ============================================================ */
	--cps-doc-embed-height: 480px;  /* doc/PDF embed iframe min-height */

	/* ============================================================
	   RADIUS TOKENS
	   ============================================================ */
	--cps-radius-xs:   3px;
	--cps-radius-sm:   6px;
	--cps-radius-md:   10px;
	--cps-radius-lg:   14px;
	--cps-radius-xl:   20px;
	--cps-radius-full: 9999px;

	/* ============================================================
	   CATEGORY TOKENS (MECE portfolio)
	   ============================================================ */
	--cps-cat-publicacao:  var(--cps-teal-500);
	--cps-cat-mapas:       var(--cps-blue-electric);
	--cps-cat-editorial:   var(--cps-blue-medium);
	--cps-cat-eventos:     var(--cps-navy-400);
	--cps-cat-educacao:    var(--cps-blue-gray);
	--cps-cat-comunicacao: var(--cps-dark-slate);
}

/* ============================================================
   SCOPED RESET
   ============================================================ */
.cps-container,
.cps-container *,
.cps-container *::before,
.cps-container *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.cps-container {
	font-family: var(--cps-font-body);
	font-size: var(--cps-text-md);
	font-weight: 300;
	line-height: 1.65;
	color: var(--cps-text-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.cps-container img {
	max-width: 100%;
	height: auto;
	display: block;
}

.cps-container a {
	color: var(--cps-text-link);
	text-decoration: none;
	transition: color var(--cps-transition-normal);
}

.cps-container a:hover {
	color: var(--cps-accent-hover);
	text-decoration: underline;
}

/* Selection */
.cps-container ::selection {
	background: var(--cps-teal-500);
	color: var(--cps-text-on-accent);
}

/* Scrollbar — standard properties only (no webkit custom scrollbar, which forces arrow buttons) */
.cps-container,
.cps-scroll-container {
	scrollbar-width: thin;
	scrollbar-color: var(--cps-teal-300) var(--cps-neutral-100);
}
/* Suppress any webkit scrollbar customization to avoid forced arrow buttons */
.cps-container ::-webkit-scrollbar,
.cps-scroll-container::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}
.cps-container ::-webkit-scrollbar-track,
.cps-scroll-container::-webkit-scrollbar-track {
	background: var(--cps-neutral-100);
}
.cps-container ::-webkit-scrollbar-thumb,
.cps-scroll-container::-webkit-scrollbar-thumb {
	background: var(--cps-teal-300);
	border-radius: var(--cps-radius-full);
}
.cps-container ::-webkit-scrollbar-thumb:hover,
.cps-scroll-container::-webkit-scrollbar-thumb:hover {
	background: var(--cps-teal-500);
}
.cps-container ::-webkit-scrollbar-button,
.cps-scroll-container::-webkit-scrollbar-button {
	height: 0;
	width: 0;
	display: none;
}

/* ============================================================
   FOCUS-VISIBLE GLOBAL
   ============================================================ */
.cps-container *:focus-visible {
	outline: 2px solid var(--cps-teal-500);
	outline-offset: 2px;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.cps-container,
	.cps-container *,
	.cps-container *::before,
	.cps-container *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

/* Canonical heading classes */
.cps-t-h1 {
	font-family: var(--cps-font-heading);
	font-size: var(--cps-text-3xl);
	font-weight: 300;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--cps-text-heading);
	margin-bottom: var(--cps-space-lg);
}

.cps-t-h2 {
	font-family: var(--cps-font-heading);
	font-size: var(--cps-text-2-5xl);
	font-weight: 300;
	letter-spacing: -0.005em;
	line-height: 1.2;
	color: var(--cps-text-heading);
	margin-bottom: var(--cps-space-md);
}

.cps-t-h3 {
	font-family: var(--cps-font-heading);
	font-size: var(--cps-text-2xl);
	font-weight: 300;
	line-height: 1.3;
	color: var(--cps-text-heading);
	margin-bottom: var(--cps-space-md);
}

.cps-t-h4 {
	font-family: var(--cps-font-heading);
	font-size: var(--cps-text-xl);
	font-weight: 300;
	line-height: 1.3;
	color: var(--cps-text-heading-sub);
	margin-bottom: var(--cps-space-sm);
}

.cps-t-h5 {
	font-family: var(--cps-font-heading);
	font-size: var(--cps-text-lg);
	font-weight: 300;
	line-height: 1.4;
	color: var(--cps-text-heading-sub);
	margin-bottom: var(--cps-space-sm);
}

.cps-t-h6 {
	font-family: var(--cps-font-heading);
	font-size: var(--cps-text-base);
	font-weight: 300;
	line-height: 1.4;
	color: var(--cps-text-heading-sub);
	margin-bottom: var(--cps-space-sm);
}

.cps-t-section {
	font-family: var(--cps-font-heading);
	font-size: var(--cps-text-xs);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--cps-text-muted);
}

.cps-t-label {
	font-family: var(--cps-font-heading);
	font-size: var(--cps-text-xs);
	font-weight: 400;
	color: var(--cps-text-muted);
}

.cps-t-lead {
	font-family: var(--cps-font-body);
	font-size: var(--cps-text-lg);
	font-weight: 300;
	line-height: 1.6;
	color: var(--cps-text-secondary);
}

.cps-t-body {
	font-family: var(--cps-font-body);
	font-size: var(--cps-text-md);
	font-weight: 300;
	line-height: 1.65;
	color: var(--cps-text-body);
}

.cps-t-hint {
	font-family: var(--cps-font-body);
	font-size: var(--cps-text-xs);
	font-weight: 300;
	color: var(--cps-text-hint);
}

.cps-t-caption {
	font-family: var(--cps-font-body);
	font-size: var(--cps-text-sm);
	font-weight: 300;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--cps-blue-gray);
}

.cps-t-mono {
	font-family: var(--cps-font-mono);
	font-size: var(--cps-text-xs);
	font-weight: 400;
	color: var(--cps-text-muted);
}

/* Backward-compat aliases (S2 → S2.5) */
.cps-h1 { font-family: var(--cps-font-heading); font-size: var(--cps-text-4xl); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; color: var(--cps-text-heading); margin-bottom: var(--cps-space-lg); }
.cps-h2 { font-family: var(--cps-font-heading); font-size: var(--cps-text-3xl); font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; color: var(--cps-text-heading); margin-bottom: var(--cps-space-md); }
.cps-h3 { font-family: var(--cps-font-heading); font-size: var(--cps-text-2xl); font-weight: 400; line-height: 1.3; color: var(--cps-text-heading); margin-bottom: var(--cps-space-md); }
.cps-h4 { font-family: var(--cps-font-heading); font-size: var(--cps-text-xl); font-weight: 400; line-height: 1.3; color: var(--cps-text-heading-sub); margin-bottom: var(--cps-space-sm); }
.cps-h5 { font-family: var(--cps-font-heading); font-size: var(--cps-text-lg); font-weight: 400; line-height: 1.4; color: var(--cps-text-heading-sub); margin-bottom: var(--cps-space-sm); }
.cps-h6 { font-family: var(--cps-font-heading); font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--cps-text-heading-sub); margin-bottom: var(--cps-space-sm); }
.cps-body { font-size: var(--cps-text-md); font-weight: 300; line-height: 1.65; color: var(--cps-text-body); }
.cps-caption { font-size: var(--cps-text-sm); font-weight: 300; color: var(--cps-text-muted); }
.cps-small { font-size: var(--cps-text-xs); font-weight: 300; color: var(--cps-text-hint); }

/* Text color utilities */
.cps-text-primary  { color: var(--cps-text-primary); }
.cps-text-secondary { color: var(--cps-text-secondary); }
.cps-text-muted    { color: var(--cps-text-muted); }
.cps-text-disabled { color: var(--cps-text-disabled); }
.cps-text-hint     { color: var(--cps-text-hint); }

/* Page header */
.cps-page-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--cps-space-md);
	margin-bottom: var(--cps-space-xl);
}

/* cps-page-header__title and __sub: use .cps-t-h1 and .cps-t-body/.cps-t-hint directly — no shadow classes here */

/* ============================================================
   BUTTONS
   ============================================================ */
.cps-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: var(--cps-space-sm) !important;
	padding: 6px var(--cps-space-md) !important;
	font-family: var(--cps-font-body) !important;
	font-size: var(--cps-text-sm) !important;
	font-weight: 400 !important;
	border: var(--cps-border-thin) solid transparent !important;
	border-radius: var(--cps-radius-sm) !important;
	cursor: pointer !important;
	transition: all var(--cps-transition-normal) !important;
	text-decoration: none !important;
	line-height: 1.4 !important;
	position: relative !important;
}

.cps-btn:focus,
.cps-btn:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(0, 161, 176, 0.08) !important;
}
.cps-btn:active {
	outline: none !important;
}

.cps-btn--primary {
	background: var(--cps-teal-500) !important;
	color: var(--cps-text-on-accent) !important;
	border-color: transparent !important;
}
.cps-btn--primary:hover {
	background: var(--cps-teal-400) !important;
	color: var(--cps-text-on-accent) !important;
	text-decoration: none;
}
.cps-btn--primary:focus,
.cps-btn--primary:active {
	background: var(--cps-teal-600) !important;
	color: var(--cps-text-on-accent) !important;
}

.cps-btn--secondary {
	background: transparent !important;
	color: var(--cps-text-secondary) !important;
	border-color: var(--cps-line-strong) !important;
}
.cps-btn--secondary:hover {
	background: var(--cps-teal-50) !important;
	color: var(--cps-teal-700) !important;
	text-decoration: none;
}
.cps-btn--secondary:focus,
.cps-btn--secondary:active {
	background: var(--cps-teal-50) !important;
	color: var(--cps-teal-700) !important;
}

.cps-btn--ghost {
	background: transparent !important;
	color: var(--cps-text-muted) !important;
	border-color: transparent !important;
}
.cps-btn--ghost:hover {
	background: var(--cps-teal-50) !important;
	color: var(--cps-teal-600) !important;
}
.cps-btn--ghost:focus,
.cps-btn--ghost:active {
	background: var(--cps-teal-50) !important;
	color: var(--cps-teal-600) !important;
}

.cps-btn--danger {
	background: var(--cps-danger) !important;
	color: var(--cps-text-on-accent) !important;
	border-color: transparent !important;
}
.cps-btn--danger:hover {
	background: var(--cps-red-50) !important;
	color: var(--cps-danger) !important;
}
.cps-btn--danger:focus,
.cps-btn--danger:active {
	background: var(--cps-red-50) !important;
	color: var(--cps-danger) !important;
}

/* Button states */
.cps-btn[disabled],
.cps-btn--disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

.cps-btn--small {
	padding: var(--cps-space-xs) var(--cps-space-md) !important;
	font-size: var(--cps-text-xs) !important;
}

.cps-btn--icon {
	background: transparent !important;
	border: none !important;
	color: var(--cps-text-muted) !important;
	padding: var(--cps-space-xs) !important;
	border-radius: var(--cps-radius-sm) !important;
	box-shadow: none !important;
}
.cps-btn--icon:hover {
	background: var(--cps-surface-chrome) !important;
	color: var(--cps-text-secondary) !important;
	box-shadow: none !important;
	outline: none !important;
}
.cps-btn--icon:focus,
.cps-btn--icon:focus-visible,
.cps-btn--icon:active,
.cps-container button.cps-btn--icon:focus,
.cps-container button.cps-btn--icon:active {
	background: var(--cps-surface-chrome) !important;
	color: var(--cps-text-muted) !important;
	box-shadow: none !important;
	outline: none !important;
	border-color: transparent !important;
	text-decoration: none !important;
}
.cps-btn--icon.cps-btn--danger-icon {
	color: var(--cps-red-300) !important;
	background: transparent !important;
}
.cps-btn--icon.cps-btn--danger-icon:hover {
	color: var(--cps-red-300) !important;
	background: rgba(220, 53, 69, 0.07) !important;
}
.cps-btn--icon.cps-btn--danger-icon:focus,
.cps-btn--icon.cps-btn--danger-icon:focus-visible,
.cps-btn--icon.cps-btn--danger-icon:active,
.cps-container button.cps-btn--icon.cps-btn--danger-icon:focus,
.cps-container button.cps-btn--icon.cps-btn--danger-icon:active {
	color: var(--cps-red-300) !important;
	background: rgba(220, 53, 69, 0.07) !important;
	box-shadow: none !important;
	outline: none !important;
	border-color: transparent !important;
	text-decoration: none !important;
}

/* ============================================================
   FORM CONTROLS
   ============================================================ */

/* Input / Textarea */
.cps-input,
.cps-textarea {
	display: block;
	width: 100%;
	padding: var(--cps-space-sm) var(--cps-space-md);
	font-family: var(--cps-font-body);
	font-size: var(--cps-text-sm);
	color: var(--cps-text-body) !important;
	background: var(--cps-surface-card) !important;
	border: 1px solid var(--cps-line-default) !important;
	border-radius: var(--cps-radius-sm) !important;
	transition: border-color var(--cps-transition-normal), box-shadow var(--cps-transition-normal);
	outline: none !important;
	box-shadow: none;
}

.cps-input:focus,
.cps-textarea:focus {
	border-color: var(--cps-line-focus) !important;
	box-shadow: var(--cps-ring-focus) !important;
}

.cps-input::placeholder,
.cps-textarea::placeholder {
	color: var(--cps-text-hint);
}

.cps-input--error {
	border-color: var(--cps-red-200) !important;
}
.cps-input--error:focus {
	border-color: var(--cps-red-200) !important;
	box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.07) !important;
}

.cps-textarea {
	min-height: 80px;
	resize: vertical;
}

/* Floating label pattern */
.cps-float-field {
	position: relative;
}
.cps-float-field .cps-input {
	padding-top: 20px;
	padding-bottom: 4px;
}
.cps-float-field .cps-float-label {
	position: absolute;
	top: 50%;
	left: var(--cps-space-md);
	transform: translateY(-50%);
	font-size: var(--cps-text-sm);
	color: var(--cps-text-hint);
	pointer-events: none;
	transition: all var(--cps-transition-fast);
}
.cps-float-field .cps-input:focus + .cps-float-label,
.cps-float-field .cps-input:not(:placeholder-shown) + .cps-float-label {
	top: 8px;
	transform: translateY(0);
	font-size: var(--cps-text-2xs);
	color: var(--cps-teal-600);
}

/* Label pattern */
.cps-label-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--cps-space-xs);
}

.cps-label {
	font-family: var(--cps-font-heading);
	font-size: var(--cps-text-xs);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cps-text-muted);
}

.cps-label-counter {
	font-size: var(--cps-text-xs);
	color: var(--cps-text-hint);
}

/* Select */
.cps-select {
	display: block;
	width: 100%;
	padding: var(--cps-space-sm) var(--cps-space-lg) var(--cps-space-sm) var(--cps-space-md);
	font-family: var(--cps-font-body);
	font-size: var(--cps-text-sm);
	color: var(--cps-text-body) !important;
	background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300A1B0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right var(--cps-space-sm) center !important;
	border: 1px solid var(--cps-line-default) !important;
	border-radius: var(--cps-radius-sm) !important;
	appearance: none;
	cursor: pointer;
	outline: none !important;
	box-shadow: none;
	transition: border-color var(--cps-transition-normal), background-color var(--cps-transition-normal);
}
.cps-select:hover {
	border-color: var(--cps-line-strong) !important;
}
.cps-select:focus {
	border-color: var(--cps-teal-300) !important;
	box-shadow: 0 0 0 2px rgba(0, 161, 176, 0.05) !important;
}

/* Checkbox / Radio (custom) */
.cps-check,
.cps-radio {
	display: inline-flex;
	align-items: center;
	gap: var(--cps-space-sm);
	font-size: var(--cps-text-sm);
	color: var(--cps-text-body);
	cursor: pointer;
}

.cps-check input[type="checkbox"],
.cps-radio input[type="radio"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 14px !important;
	height: 14px !important;
	flex-shrink: 0 !important;
	cursor: pointer !important;
	background: var(--cps-surface-card) !important;
	border-style: solid !important;
	border-width: var(--cps-border-thin) !important;
	border-color: var(--cps-line-default) !important;
	transition: border-color var(--cps-transition-normal), background var(--cps-transition-normal), box-shadow var(--cps-transition-normal);
	position: relative !important;
}
.cps-check input[type="checkbox"] {
	border-radius: var(--cps-radius-xs) !important;
}
.cps-radio input[type="radio"] {
	border-radius: var(--cps-radius-full) !important;
}
.cps-check input[type="checkbox"]:checked,
.cps-radio input[type="radio"]:checked {
	background: var(--cps-teal-500) !important;
	border-color: var(--cps-teal-500) !important;
}
.cps-check input[type="checkbox"]:checked::after {
	content: '' !important;
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	width: 3px !important;
	height: 6px !important;
	border: 1.5px solid var(--cps-text-on-accent) !important;
	border-top: none !important;
	border-left: none !important;
	transform: translate(-50%, -60%) rotate(45deg) !important;
}
.cps-radio input[type="radio"]:checked::after {
	content: '' !important;
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	width: 5px !important;
	height: 5px !important;
	background: var(--cps-text-on-accent) !important;
	border-radius: var(--cps-radius-full) !important;
	transform: translate(-50%, -50%) !important;
}
.cps-check input[type="checkbox"]:focus-visible,
.cps-radio input[type="radio"]:focus-visible {
	border-color: var(--cps-teal-300) !important;
	box-shadow: 0 0 0 2px rgba(0, 161, 176, 0.08) !important;
	outline: none !important;
}

/* Toggle switch */
.cps-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--cps-space-sm);
	cursor: pointer;
	font-size: var(--cps-text-sm);
	color: var(--cps-text-body);
}
.cps-toggle__track {
	position: relative;
	width: 30px;
	height: 16px;
	background: var(--cps-neutral-300);
	border-radius: var(--cps-radius-full);
	transition: background var(--cps-transition-normal);
	flex-shrink: 0;
}
.cps-toggle__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 12px;
	height: 12px;
	background: var(--cps-surface-card);
	border-radius: var(--cps-radius-full);
	box-shadow: var(--cps-shadow-sm);
	transition: transform var(--cps-transition-spring);
}
.cps-toggle input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.cps-toggle input:checked + .cps-toggle__track {
	background: var(--cps-teal-500);
}
.cps-toggle input:checked + .cps-toggle__track .cps-toggle__thumb {
	transform: translateX(14px);
}
.cps-toggle input:focus-visible + .cps-toggle__track {
	box-shadow: 0 0 0 2px rgba(0, 161, 176, 0.08);
}
.cps-toggle input:active + .cps-toggle__track .cps-toggle__thumb {
	transform: scale(0.9);
}
.cps-toggle input:checked:active + .cps-toggle__track .cps-toggle__thumb {
	transform: translateX(14px) scale(0.9);
}

/* Chip select */
.cps-chip-trigger {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cps-space-xs);
	min-height: 36px;
	padding: var(--cps-space-xs) var(--cps-space-sm);
	background: var(--cps-surface-card) !important;
	border: 1px solid var(--cps-line-default) !important;
	border-radius: var(--cps-radius-sm) !important;
	cursor: pointer;
	transition: border-color var(--cps-transition-normal);
}
.cps-chip-trigger:focus,
.cps-chip-trigger:focus-within,
.cps-chip-trigger[aria-expanded="true"] {
	border-color: var(--cps-teal-300) !important;
	box-shadow: 0 0 0 2px rgba(0, 161, 176, 0.05) !important;
}

.cps-chip-value {
	display: inline-flex;
	align-items: center;
	gap: var(--cps-space-2xs);
	padding: var(--cps-space-2xs) var(--cps-space-sm);
	font-size: var(--cps-text-2xs);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: rgba(0,161,176,0.13);
	color: var(--cps-teal-700);
	border-radius: var(--cps-radius-full);
	transition: opacity var(--cps-transition-fast), transform var(--cps-transition-fast);
	white-space: nowrap;
}
.cps-chip-value [data-cps-chip-dismiss] {
	cursor: pointer;
	opacity: 0.6;
	font-size: var(--cps-text-sm);
	line-height: 1;
}
.cps-chip-value [data-cps-chip-dismiss]:hover {
	opacity: 1;
}
.cps-chip-value--removing {
	opacity: 0;
	transform: scale(0.8);
}

/* Chip add-more placeholder */
.cps-chip-placeholder {
	font-size: var(--cps-text-xs);
	color: var(--cps-text-hint);
}

.cps-chip-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--cps-surface-overlay);
	border: 1px solid var(--cps-line-default);
	border-radius: var(--cps-radius-md);
	box-shadow: var(--cps-shadow-lg);
	padding: var(--cps-space-xs) 0;
	display: none;
}
.cps-chip-trigger[aria-expanded="true"] .cps-chip-dropdown {
	display: block;
}

.cps-chip-dropdown-item {
	display: flex;
	align-items: center;
	gap: var(--cps-space-sm);
	width: 100%;
	padding: var(--cps-space-sm) var(--cps-space-md);
	font-size: var(--cps-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cps-text-body);
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	transition: background var(--cps-transition-fast);
}
.cps-chip-dropdown-item:hover,
.cps-chip-dropdown-item[aria-selected="true"] {
	background: var(--cps-teal-50);
	color: var(--cps-teal-700);
}

/* Search input */
.cps-input-search {
	display: flex;
	align-items: center;
	gap: var(--cps-space-xs);
	background: var(--cps-surface-card) !important;
	border: 1px solid var(--cps-line-default) !important;
	border-radius: var(--cps-radius-sm) !important;
	padding: 0 var(--cps-space-sm);
	transition: border-color var(--cps-transition-normal), box-shadow var(--cps-transition-normal);
	box-shadow: none;
}
.cps-input-search:focus-within {
	border-color: var(--cps-teal-300) !important;
	box-shadow: 0 0 0 2px rgba(0, 161, 176, 0.05) !important;
}

.cps-input-search__field {
	flex: 1;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	background: transparent !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	font-family: var(--cps-font-body);
	font-size: var(--cps-text-sm);
	color: var(--cps-text-body) !important;
	padding: var(--cps-space-sm) var(--cps-space-xs);
}
.cps-input-search__field::placeholder {
	color: var(--cps-text-hint);
}

.cps-input-search__btn,
.cps-input-search__clear {
	background: none;
	border: none;
	color: var(--cps-text-muted);
	cursor: pointer;
	padding: var(--cps-space-xs);
	display: flex;
	align-items: center;
	transition: color var(--cps-transition-fast);
}
.cps-input-search__btn:hover,
.cps-input-search__clear:hover {
	color: var(--cps-teal-500);
}

/* Segmented / Toggle */
.cps-segmented,
.cps-container .cps-segmented,
div.cps-segmented {
	display: inline-flex !important;
	background: var(--cps-surface-chrome) !important;
	border-style: solid !important;
	border-width: var(--cps-border-thin) !important;
	border-color: var(--cps-line-default) !important;
	border-radius: var(--cps-radius-sm) !important;
	overflow: hidden !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 0 !important;
}

.cps-segmented__option {
	padding: var(--cps-space-sm) var(--cps-space-md);
	font-family: var(--cps-font-body);
	font-size: var(--cps-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 400;
	color: var(--cps-text-muted);
	background: transparent;
	border: none !important;
	border-radius: 0 !important;
	cursor: pointer;
	transition: all var(--cps-transition-normal);
}
.cps-segmented__option:hover {
	background: var(--cps-teal-500) !important;
	color: var(--cps-text-on-accent) !important;
}
.cps-segmented__option:focus,
.cps-segmented__option:active {
	background: var(--cps-teal-500) !important;
	color: var(--cps-text-on-accent) !important;
	outline: none;
}
.cps-segmented__option.active {
	background: var(--cps-surface-card) !important;
	color: var(--cps-accent) !important;
	font-weight: 400;
	box-shadow: var(--cps-shadow-sm);
}
.cps-segmented__option.active:hover {
	background: var(--cps-teal-500) !important;
	color: var(--cps-text-on-accent) !important;
}

.cps-toggle-opt {
	padding: var(--cps-space-xs);
}

/* Range slider */
.cps-range {
	width: 100%;
	height: 6px;
	-webkit-appearance: none;
	appearance: none;
	background: linear-gradient(to right, var(--cps-teal-500) 0%, var(--cps-teal-500) 60%, var(--cps-neutral-200) 60%);
	border-radius: var(--cps-radius-full);
	cursor: pointer;
	outline: none;
}
.cps-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border-radius: var(--cps-radius-full);
	background: var(--cps-teal-500);
	box-shadow: var(--cps-shadow-md);
	cursor: pointer;
	transition: transform var(--cps-transition-fast);
}
.cps-range::-webkit-slider-thumb:hover {
	transform: scale(1.15);
}
.cps-range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border: none;
	border-radius: var(--cps-radius-full);
	background: var(--cps-teal-500);
	box-shadow: var(--cps-shadow-md);
	cursor: pointer;
}

/* Combobox / Search-select */
.cps-combobox {
	position: relative;
}
.cps-combobox__wrapper {
	display: flex;
	align-items: center;
	gap: var(--cps-space-xs);
	background: var(--cps-surface-card) !important;
	border: 1px solid var(--cps-line-default) !important;
	border-radius: var(--cps-radius-sm) !important;
	padding: 0 var(--cps-space-sm);
	box-shadow: none;
	transition: border-color var(--cps-transition-normal), box-shadow var(--cps-transition-normal);
}
.cps-combobox__wrapper:focus-within {
	border-color: var(--cps-teal-300) !important;
	box-shadow: 0 0 0 2px rgba(0, 161, 176, 0.05) !important;
}
.cps-combobox__icon {
	color: var(--cps-text-muted);
	pointer-events: none;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	padding: var(--cps-space-xs);
}
.cps-combobox__input {
	flex: 1;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	background: transparent !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	font-family: var(--cps-font-body);
	font-size: var(--cps-text-sm);
	color: var(--cps-text-body) !important;
	padding: var(--cps-space-sm) var(--cps-space-xs);
}
.cps-combobox__input:-webkit-autofill,
.cps-combobox__input:-webkit-autofill:hover,
.cps-combobox__input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 100px var(--cps-surface-card) inset !important;
	box-shadow: 0 0 0 100px var(--cps-surface-card) inset !important;
	-webkit-text-fill-color: var(--cps-text-body) !important;
}
.cps-combobox__listbox {
	position: absolute;
	z-index: 200;
	width: 100%;
	max-height: 240px;
	overflow-y: auto;
	background: var(--cps-surface-overlay);
	border: 1px solid var(--cps-line-default);
	border-radius: var(--cps-radius-md);
	box-shadow: var(--cps-shadow-lg);
	margin-top: var(--cps-space-xs);
	padding: var(--cps-space-xs) 0;
}
.cps-combobox__option {
	display: flex;
	align-items: center;
	gap: var(--cps-space-sm);
	padding: var(--cps-space-sm) var(--cps-space-md);
	font-size: var(--cps-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--cps-text-body);
	cursor: pointer;
	transition: background var(--cps-transition-fast), color var(--cps-transition-fast);
}
.cps-combobox__option:hover,
.cps-combobox__option[aria-selected="true"] {
	background: var(--cps-teal-50);
	color: var(--cps-teal-700);
}
.cps-combobox__option--active {
	background: var(--cps-teal-50);
	color: var(--cps-teal-700);
}
.cps-combobox__empty {
	padding: var(--cps-space-md);
	text-align: center;
	color: var(--cps-text-hint);
	font-size: var(--cps-text-sm);
}

/* ============================================================
   FEEDBACK & STATUS
   ============================================================ */

/* Tags */
.cps-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--cps-space-xs);
	padding: var(--cps-space-2xs) var(--cps-space-sm);
	font-size: var(--cps-text-2xs);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: var(--cps-radius-full);
	background: var(--cps-surface-chrome);
	color: var(--cps-text-muted);
}
.cps-tag--gray   { background: rgba(66,84,100,0.09);    color: var(--cps-text-muted); }
.cps-tag--teal   { background: rgba(0,161,176,0.13);    color: var(--cps-teal-700); }
.cps-tag--red    { background: rgba(220,53,69,0.11);    color: var(--cps-red-700); }
.cps-tag--orange { background: rgba(253,126,20,0.13);   color: var(--cps-orange-700); }
.cps-tag--yellow { background: rgba(255,193,7,0.18);    color: var(--cps-yellow-700); }
.cps-tag--green  { background: rgba(102,187,106,0.20);  color: var(--cps-green-500); }
.cps-tag--blue   { background: rgba(43,126,226,0.15);   color: var(--cps-blue-electric); }
.cps-tag--purple { background: rgba(111,66,193,0.11);   color: var(--cps-purple-300); }

/* Badge backward compat aliases */
.cps-badge { display: inline-flex; align-items: center; gap: var(--cps-space-xs); padding: var(--cps-space-2xs) var(--cps-space-sm); font-size: var(--cps-text-2xs); font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em; border-radius: var(--cps-radius-full); background: var(--cps-accent); color: var(--cps-text-on-accent); }
.cps-badge--secondary { background: var(--cps-navy-500); }
.cps-badge--accent    { background: var(--cps-orange-300); }
.cps-badge--outline   { background: transparent; color: var(--cps-accent); border: 1px solid var(--cps-accent); }

/* Toast container (fixed position for JS-managed toasts) */
.cps-toast-container {
	position: fixed;
	bottom: var(--cps-space-lg);
	right: var(--cps-space-lg);
	z-index: 10000;
	display: flex;
	flex-direction: column-reverse;
	gap: var(--cps-space-sm);
	pointer-events: none;
}
.cps-toast-container > * {
	pointer-events: auto;
}

/* Toasts — backgrounds match 4.1 tag rgba pattern */
.cps-toast {
	display: flex;
	align-items: center;
	gap: var(--cps-space-sm);
	padding: var(--cps-space-sm) var(--cps-space-md);
	border-radius: var(--cps-radius-sm);
	font-size: var(--cps-text-sm);
	border-left: var(--cps-border-accent) solid;
	animation: cps-slideInRight var(--cps-transition-spring) forwards;
}
.cps-toast--info    { background: rgba(0,161,176,0.13) !important;   border-color: var(--cps-teal-300) !important;   color: var(--cps-teal-700) !important; }
.cps-toast--success { background: rgba(102,187,106,0.20) !important; border-color: rgba(102,187,106,0.40) !important; color: var(--cps-green-500) !important; }
.cps-toast--error   { background: rgba(220,53,69,0.11) !important;   border-color: rgba(220,53,69,0.30) !important;   color: var(--cps-red-700) !important; }
.cps-toast--warning { background: rgba(255,193,7,0.18) !important;   border-color: rgba(255,193,7,0.40) !important;   color: var(--cps-yellow-700) !important; }
.cps-toast--dismissing {
	animation: cps-slideOutRight var(--cps-transition-normal) forwards;
}
.cps-toast__close {
	background: none;
	border: none;
	color: inherit;
	opacity: 0.5;
	cursor: pointer;
	padding: 0;
	margin-left: auto;
	font-size: var(--cps-text-lg);
	line-height: 1;
	transition: opacity var(--cps-transition-fast);
}
.cps-toast__close:hover {
	opacity: 1;
}

@keyframes cps-slideInRight {
	from { transform: translateX(100%); opacity: 0; }
	to   { transform: translateX(0); opacity: 1; }
}
@keyframes cps-slideOutRight {
	from { transform: translateX(0); opacity: 1; }
	to   { transform: translateX(100%); opacity: 0; }
}

/* Indicator dots */
.cps-indicator-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: var(--cps-radius-full);
	background: var(--cps-line-strong);
}
.cps-indicator-dot--critical  { background: var(--cps-danger); }
.cps-indicator-dot--attention { background: var(--cps-warning); }
.cps-indicator-dot--ok        { background: var(--cps-success); }
.cps-indicator-dot--info      { background: var(--cps-accent); }
.cps-indicator-dot--inactive  { background: var(--cps-line-default); }
.cps-indicator-dot--teal      { background: var(--cps-teal-500); }
.cps-indicator-dot--red       { background: var(--cps-red-300); }
.cps-indicator-dot--orange    { background: var(--cps-orange-500); }
.cps-indicator-dot--yellow    { background: var(--cps-yellow-300); }
.cps-indicator-dot--green     { background: var(--cps-green-500); }
.cps-indicator-dot--blue      { background: var(--cps-blue-electric); }
.cps-indicator-dot--purple    { background: var(--cps-purple-500); }
.cps-indicator-dot--gray      { background: var(--cps-text-muted); }

/* Badge count */
.cps-badge-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	font-size: var(--cps-text-2xs);
	font-weight: 400;
	letter-spacing: 0.02em;
	border-radius: var(--cps-radius-sm);
	background: var(--cps-neutral-100);
	color: var(--cps-neutral-600);
}
.cps-badge-count--teal   { background: rgba(0,161,176,0.13) !important;   color: var(--cps-teal-700) !important; }
.cps-badge-count--red    { background: rgba(220,53,69,0.11) !important;   color: var(--cps-red-700) !important; }
.cps-badge-count--orange { background: rgba(253,126,20,0.13) !important;  color: var(--cps-orange-700) !important; }
.cps-badge-count--yellow { background: rgba(255,193,7,0.18) !important;   color: var(--cps-yellow-700) !important; }
.cps-badge-count--green  { background: rgba(102,187,106,0.20) !important; color: var(--cps-green-500) !important; }
.cps-badge-count--blue   { background: rgba(43,126,226,0.15) !important;  color: var(--cps-blue-electric) !important; }
.cps-badge-count--purple { background: rgba(111,66,193,0.11) !important;  color: var(--cps-purple-500) !important; }
.cps-badge-count--gray   { background: rgba(66,84,100,0.09) !important;   color: var(--cps-text-muted) !important; }

/* Progress bar */
.cps-progress {
	width: 100%;
	height: 6px;
	background: var(--cps-surface-chrome);
	border-radius: var(--cps-radius-full);
	overflow: hidden;
}
.cps-progress__bar {
	height: 100%;
	background: var(--cps-teal-500);
	border-radius: var(--cps-radius-full);
	transition: width var(--cps-transition-slow);
}
.cps-progress--striped .cps-progress__bar {
	background-image: linear-gradient(
		45deg,
		rgba(255,255,255,0.15) 25%,
		transparent 25%,
		transparent 50%,
		rgba(255,255,255,0.15) 50%,
		rgba(255,255,255,0.15) 75%,
		transparent 75%,
		transparent
	);
	background-size: 20px 20px;
	animation: cps-progress-stripe 0.6s linear infinite;
}
@keyframes cps-progress-stripe {
	from { background-position: 20px 0; }
	to   { background-position: 0 0; }
}

.cps-progress--segmented {
	display: flex;
	gap: 2px;
	background: transparent;
}
.cps-progress__segment {
	height: 6px;
	border-radius: var(--cps-radius-full);
	flex: 1;
}
.cps-progress__segment--blue   { background: var(--cps-accent); }
.cps-progress__segment--green  { background: var(--cps-success); }
.cps-progress__segment--yellow { background: var(--cps-warning); }
.cps-progress__segment--red    { background: var(--cps-danger); }
.cps-progress__segment--gray   { background: var(--cps-line-default); }

/* Skeleton loading */
.cps-skeleton {
	background: linear-gradient(90deg, var(--cps-surface-chrome) 25%, var(--cps-surface-raised) 50%, var(--cps-surface-chrome) 75%);
	background-size: 200% 100%;
	animation: cps-shimmer 1.5s ease-in-out infinite;
	border-radius: var(--cps-radius-sm);
	min-height: 16px;
}
@keyframes cps-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Status tag — follows 4.1 tag pattern */
.cps-status-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--cps-space-xs);
	padding: 2px var(--cps-space-sm);
	font-size: var(--cps-text-2xs);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: var(--cps-radius-full);
}
.cps-status-tag:hover { opacity: 0.85; }
.cps-status--green  { background: rgba(25,135,84,0.13) !important;   color: var(--cps-green-700) !important; }
.cps-status--yellow { background: rgba(255,193,7,0.20) !important;   color: var(--cps-yellow-700) !important; }
.cps-status--red    { background: rgba(220,53,69,0.13) !important;   color: var(--cps-red-700) !important; }
.cps-status--blue   { background: rgba(0,161,176,0.13) !important;   color: var(--cps-teal-700) !important; }
.cps-status--gray   { background: rgba(66,84,100,0.10) !important;   color: var(--cps-text-muted) !important; }

/* ============================================================
   LAYOUT & CONTAINERS
   ============================================================ */

/* Grid */
.cps-grid {
	display: grid;
	gap: var(--cps-space-lg);
}
.cps-grid--2col { grid-template-columns: repeat(2, 1fr); }
.cps-grid--3col { grid-template-columns: repeat(3, 1fr); }
.cps-grid--4col { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
	.cps-grid--4col { grid-template-columns: repeat(2, 1fr); }
	.cps-grid--3col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.cps-grid--2col,
	.cps-grid--3col,
	.cps-grid--4col { grid-template-columns: 1fr; }
}

/* Card */
.cps-card {
	background: var(--cps-surface-card);
	border: 1px solid var(--cps-line-subtle);
	border-radius: var(--cps-radius-md);
	padding: var(--cps-space-lg);
	box-shadow: var(--cps-shadow-sm);
	transition: box-shadow var(--cps-transition-normal), transform var(--cps-transition-normal), border-color var(--cps-transition-normal);
}
.cps-card:hover {
	box-shadow: var(--cps-shadow-md);
	border-color: var(--cps-teal-200);
}

.cps-card--hero {
	border-top: var(--cps-border-accent) solid var(--cps-accent);
	background: linear-gradient(150deg, var(--cps-teal-50) 0%, var(--cps-surface-card) 55%);
	box-shadow: var(--cps-shadow-md);
}
.cps-card--hero .cps-card__title {
	color: var(--cps-teal-700);
}

.cps-card--has-header {
	padding: 0;
	overflow: hidden;
}
.cps-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--cps-space-md) var(--cps-space-lg);
	border-bottom: var(--cps-border-thin) solid var(--cps-line-subtle);
}
.cps-card__header-title {
	font-family: var(--cps-font-heading);
	font-size: var(--cps-text-md);
	font-weight: 400;
	color: var(--cps-text-secondary);
}
.cps-card__header-actions {
	display: flex;
	align-items: center;
	gap: var(--cps-space-sm);
}
.cps-card__body {
	padding: var(--cps-space-lg);
}

.cps-card__image {
	border-radius: var(--cps-radius-sm);
	margin-bottom: var(--cps-space-md);
	overflow: hidden;
}
/* .cps-card__title — use .cps-t-body .cps-card__title in markup; weight emphasis via component token */
.cps-card__title {
	font-weight: 400 !important;
	margin-bottom: var(--cps-space-sm);
}
/* .cps-card__meta — use .cps-t-hint in markup */
.cps-card__meta {
	margin-bottom: var(--cps-space-sm);
}
.cps-card__excerpt {
	font-size: var(--cps-text-md);
	color: var(--cps-text-body);
	margin-bottom: var(--cps-space-md);
}

/* Stat card */
.cps-stat-card {
	background: var(--cps-surface-card);
	border: 1px solid var(--cps-line-subtle);
	border-radius: var(--cps-radius-md);
	padding: var(--cps-space-lg);
	text-align: center;
	transition: box-shadow var(--cps-transition-normal), transform var(--cps-transition-normal);
}
.cps-stat-card:hover {
	box-shadow: var(--cps-shadow-md);
}
.cps-stat-card__value {
	font-family: var(--cps-font-heading);
	font-size: var(--cps-text-4xl);
	font-weight: 400;
	color: var(--cps-text-heading);
	line-height: 1;
}
.cps-stat-card__label {
	font-size: var(--cps-text-xs);
	color: var(--cps-text-muted);
	margin-top: var(--cps-space-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Modal */
.cps-modal-scrim {
	position: fixed;
	inset: 0;
	background: var(--cps-overlay-dark);
	pointer-events: none;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--cps-transition-normal);
}
.cps-modal-scrim.active {
	opacity: 1;
	pointer-events: all;
}
.cps-modal-panel {
	background: var(--cps-surface-overlay);
	border-radius: var(--cps-radius-lg);
	box-shadow: var(--cps-shadow-xl);
	max-width: 560px;
	width: 90%;
	max-height: 90vh;
	overflow-y: auto;
	transform: scale(0.95) translateY(10px);
	transition: transform var(--cps-transition-spring), opacity var(--cps-transition-normal);
	opacity: 0;
}
.cps-modal-scrim.active .cps-modal-panel {
	transform: scale(1) translateY(0);
	opacity: 1;
}
.cps-modal-panel--sm { max-width: 400px; }
.cps-modal-panel--lg { max-width: 720px; }
.cps-modal-panel--full { max-width: 95vw; max-height: 95vh; }

.cps-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--cps-space-md) var(--cps-space-lg);
	border-bottom: var(--cps-border-thin) solid var(--cps-line-subtle);
}
.cps-modal__body {
	padding: var(--cps-space-md) var(--cps-space-lg);
}
.cps-modal__footer {
	display: flex;
	justify-content: flex-end;
	gap: var(--cps-space-sm);
	padding: var(--cps-space-sm) var(--cps-space-lg);
	border-top: var(--cps-border-thin) solid var(--cps-line-subtle);
}
/* Modal parts promoted from affiliation pattern (AUDIT-001 PARTE 8.4) */
.cps-modal__close {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	border: none !important;
	background: transparent !important;
	color: var(--cps-text-muted) !important;
	border-radius: var(--cps-radius-sm) !important;
	cursor: pointer !important;
	transition: background var(--cps-transition-fast), color var(--cps-transition-fast) !important;
}
.cps-modal__close:hover {
	background: var(--cps-surface-chrome) !important;
	color: var(--cps-text-body) !important;
}
.cps-modal__actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--cps-space-sm) !important;
	margin-top: var(--cps-space-md) !important;
}

/* Empty state */
.cps-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--cps-space-3xl) var(--cps-space-lg);
	text-align: center;
	color: var(--cps-text-hint);
}
.cps-empty-state__icon {
	font-size: 48px;
	margin-bottom: var(--cps-space-md);
	opacity: 0.4;
}
.cps-empty-state__message {
	font-size: var(--cps-text-md);
	margin-bottom: var(--cps-space-md);
}

/* Table */
.cps-table-wrap {
	border: 1px solid var(--cps-line-subtle) !important;
	border-radius: var(--cps-radius-md) !important;
	overflow: visible !important;
}
.cps-table {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	font-size: var(--cps-text-sm) !important;
}
.cps-table th {
	text-align: left !important;
	padding: 6px var(--cps-space-sm) !important;
	font-weight: 400 !important;
	font-size: var(--cps-text-xs) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: var(--cps-text-muted) !important;
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	border-bottom: var(--cps-border-medium) solid var(--cps-line-default) !important;
	background: var(--cps-surface-chrome) !important;
}
.cps-table th:first-child { border-radius: var(--cps-radius-md) 0 0 0 !important; }
.cps-table th:last-child  { border-radius: 0 var(--cps-radius-md) 0 0 !important; }
.cps-table td {
	padding: 6px var(--cps-space-sm) !important;
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	border-bottom: var(--cps-border-thin) solid var(--cps-line-subtle) !important;
	color: var(--cps-text-body) !important;
	background: var(--cps-surface-card) !important;
}
.cps-table tbody tr:last-child td {
	border-bottom: none !important;
}
.cps-table tbody tr:last-child td:first-child { border-radius: 0 0 0 var(--cps-radius-md) !important; }
.cps-table tbody tr:last-child td:last-child  { border-radius: 0 0 var(--cps-radius-md) 0 !important; }
/* Table variants */
.cps-table--teal th { background: var(--cps-teal-50) !important; color: var(--cps-teal-700) !important; }
.cps-table--teal th { border-bottom-color: var(--cps-teal-200) !important; }

/* Section header */
.cps-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--cps-space-sm);
	border-bottom: var(--cps-border-thin) solid var(--cps-line-subtle);
	margin-bottom: var(--cps-space-md);
}
.cps-section-header--toggle {
	cursor: pointer;
}

/* Divider */
.cps-divider {
	border: none;
	border-top: var(--cps-border-thin) solid var(--cps-line-subtle);
	margin: var(--cps-space-lg) 0;
}
.cps-divider--vertical {
	display: inline-block;
	width: 1px;
	height: 1em;
	background: var(--cps-line-default);
	margin: 0 var(--cps-space-sm);
	vertical-align: middle;
	border: none;
}

/* Accordion */
.cps-accordion {
	border: 1px solid var(--cps-line-subtle);
	border-radius: var(--cps-radius-md);
	overflow: hidden;
}
.cps-accordion__item {
	border-bottom: var(--cps-border-thin) solid var(--cps-line-subtle);
}
.cps-accordion__item:last-child {
	border-bottom: none;
}
.cps-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--cps-space-sm);
	width: 100%;
	padding: var(--cps-space-md) var(--cps-space-lg);
	font-family: var(--cps-font-heading);
	font-size: var(--cps-text-md);
	font-weight: 400;
	color: var(--cps-text-secondary);
	background: var(--cps-surface-card);
	border: none;
	cursor: pointer;
	transition: background var(--cps-transition-fast);
	text-align: left;
}
.cps-accordion__trigger:hover {
	background: var(--cps-surface-tinted) !important;
	color: var(--cps-text-secondary) !important;
}
.cps-accordion__trigger:focus,
.cps-accordion__trigger:active {
	background: var(--cps-surface-tinted) !important;
	color: var(--cps-text-secondary) !important;
	outline: none;
}
.cps-accordion__trigger[aria-expanded="true"] {
	color: var(--cps-text-secondary) !important;
	background: var(--cps-surface-card) !important;
}
.cps-accordion__chevron {
	transition: transform var(--cps-transition-normal);
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	color: var(--cps-text-hint);
	margin-top: 1px;
}
.cps-accordion__trigger[aria-expanded="true"] .cps-accordion__chevron {
	transform: rotate(180deg);
}
.cps-accordion__content {
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--cps-transition-slow);
}
.cps-accordion__content[aria-hidden="false"] {
	max-height: 500px;
}
.cps-accordion__body {
	padding: var(--cps-space-md) var(--cps-space-lg) var(--cps-space-lg);
}

/* ============================================================
   PRODUÇÕES V2 — Premium (full-bleed hero + Netflix poster gallery)
   Inviolable Rule 11: every visual declaration carries !important.
   ============================================================ */

/* ── Hero — full-bleed band, readable centered column, on-dark typography ── */
.cps-prod-hero {
	padding: var(--cps-space-3xl) var(--cps-space-xl) !important;
	border-radius: 0 !important;            /* full-bleed page: square edges */
	text-align: center !important;
	isolation: isolate !important;
}
.cps-prod-hero__glow {
	position: absolute !important;
	top: -45% !important;
	left: 50% !important;
	width: 90% !important;
	height: 90% !important;
	transform: translateX(-50%) !important;
	background: radial-gradient(closest-side, rgba(0, 161, 176, 0.40), transparent 72%) !important;
	pointer-events: none !important;
	z-index: 0 !important;
	animation: cps-prod-glow 7s ease-in-out infinite alternate !important;
}
.cps-prod-hero__dots {
	position: absolute !important;
	inset: 0 !important;
	opacity: 0.55 !important;
	pointer-events: none !important;
	z-index: 0 !important;
}
/* Drifting decorative orbs — the livelier, richer hero motion. Blurred brand-tinted
   blobs that float slowly on their own paths behind the copy. */
.cps-prod-hero__orb {
	position: absolute !important;
	border-radius: var(--cps-radius-full) !important;
	filter: blur(38px) !important;
	opacity: 0.5 !important;
	pointer-events: none !important;
	z-index: 0 !important;
	will-change: transform !important;
	animation: cps-prod-float 18s ease-in-out infinite alternate !important;
}
.cps-prod-hero__orb--a {
	top: 6% !important;
	left: 4% !important;
	width: 220px !important;
	height: 220px !important;
	background: radial-gradient(closest-side, rgba(43, 126, 226, 0.55), transparent 70%) !important;
	animation-duration: 21s !important;
}
.cps-prod-hero__orb--b {
	bottom: 2% !important;
	right: 6% !important;
	width: 260px !important;
	height: 260px !important;
	background: radial-gradient(closest-side, rgba(0, 161, 176, 0.50), transparent 70%) !important;
	animation-duration: 16s !important;
	animation-delay: -4s !important;
}
.cps-prod-hero__body {
	max-width: 760px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	gap: var(--cps-space-md) !important;
}
.cps-prod-hero__eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	font-family: var(--cps-font-heading) !important;
	font-size: var(--cps-text-xs) !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.18em !important;
	color: var(--cps-teal-200) !important;
	padding: var(--cps-space-2xs) var(--cps-space-md) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: var(--cps-radius-full) !important;
	background: rgba(255, 255, 255, 0.05) !important;
}
.cps-prod-hero .cps-t-h1,
.cps-prod-hero__title {
	color: var(--cps-text-on-dark) !important;
	margin-bottom: 0 !important;
	font-size: var(--cps-text-4xl) !important;
}
.cps-prod-hero .cps-t-lead,
.cps-prod-hero__lead {
	color: rgba(255, 255, 255, 0.85) !important;
	max-width: 60ch !important;
}
.cps-prod-hero .cps-t-body,
.cps-prod-hero__text {
	color: rgba(255, 255, 255, 0.62) !important;
	max-width: 62ch !important;
}
.cps-prod-hero__stats {
	display: flex !important;
	gap: var(--cps-space-2xl) !important;
	justify-content: center !important;
	margin-top: var(--cps-space-md) !important;
	padding-top: var(--cps-space-lg) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.cps-prod-stat {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}
.cps-prod-stat__num {
	font-family: var(--cps-font-heading) !important;
	font-size: var(--cps-text-2-5xl) !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	color: #FFFFFF !important;
}
.cps-prod-stat__label {
	margin-top: var(--cps-space-2xs) !important;
	font-size: var(--cps-text-2xs) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	color: rgba(255, 255, 255, 0.60) !important;
}
/* Stats rise in on load; the numbers themselves also count up via JS. */
.cps-prod-stat {
	animation: cps-prod-rise 0.6s ease both !important;
}
.cps-prod-stat:nth-child(2) { animation-delay: 0.08s !important; }
.cps-prod-stat:nth-child(3) { animation-delay: 0.16s !important; }
.cps-prod-stat:nth-child(4) { animation-delay: 0.24s !important; }
.cps-prod-stat__num {
	background: linear-gradient(180deg, #FFFFFF, var(--cps-teal-200)) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	font-variant-numeric: tabular-nums !important;
}
/* Hero motion keyframes: drifting orbs + a slow breathing glow. */
@keyframes cps-prod-float {
	0%   { transform: translate3d(0, 0, 0) scale(1) !important; }
	50%  { transform: translate3d(28px, -22px, 0) scale(1.08) !important; }
	100% { transform: translate3d(-18px, 16px, 0) scale(0.96) !important; }
}
@keyframes cps-prod-glow {
	0%   { opacity: 0.55 !important; transform: translateX(-50%) scale(1) !important; }
	100% { opacity: 0.9 !important;  transform: translateX(-50%) scale(1.12) !important; }
}

/* ── Category — always-visible segmented section (no accordion) ── */
/* Per-category accent: defaults to brand teal, themed per .cps-prod-cat--N below.
   Drives the animated header art, kicker, count chip and the monogram posters. */
.cps-prod-category {
	--cps-prod-accent: var(--cps-accent) !important;
	margin-bottom: var(--cps-space-3xl) !important;
}
/* CABSIN brand palette only — teal + navy + the secondary blue family. */
.cps-prod-cat--1 { --cps-prod-accent: var(--cps-teal-500) !important; }
.cps-prod-cat--2 { --cps-prod-accent: var(--cps-blue-electric) !important; }
.cps-prod-cat--3 { --cps-prod-accent: var(--cps-navy-500) !important; }
.cps-prod-cat--4 { --cps-prod-accent: var(--cps-blue-medium) !important; }
.cps-prod-cat--5 { --cps-prod-accent: var(--cps-blue-gray) !important; }
.cps-prod-cat--6 { --cps-prod-accent: var(--cps-teal-700) !important; }
.cps-prod-cat--7 { --cps-prod-accent: var(--cps-navy-400) !important; }
.cps-prod-cat--8 { --cps-prod-accent: var(--cps-teal-600) !important; }

/* Illustrated, animated header band */
.cps-prod-cathead {
	position: relative !important;
	overflow: hidden !important;
	isolation: isolate !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: var(--cps-space-sm) !important;
	padding: var(--cps-space-2xl) var(--cps-space-xl) !important;
	margin-bottom: var(--cps-space-xl) !important;
	border-radius: var(--cps-radius-lg) !important;
	background: var(--cps-surface-tinted) !important;
	border: 1px solid var(--cps-line-subtle) !important;
}
/* Decorative animated SVG art (abstract concentric arcs) + drifting accent orbs */
.cps-prod-cathead__art {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	pointer-events: none !important;
	opacity: 0.18 !important;
	color: var(--cps-prod-accent) !important;
	background-image:
		radial-gradient(38% 60% at 90% 18%, var(--cps-prod-accent), transparent 60%),
		radial-gradient(30% 55% at 72% 92%, var(--cps-prod-accent), transparent 60%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220' fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Ccircle cx='200' cy='40' r='34'/%3E%3Ccircle cx='200' cy='40' r='58'/%3E%3Ccircle cx='200' cy='40' r='82'/%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat, no-repeat !important;
	background-position: right top, right bottom, right -20px top -20px !important;
	background-size: auto, auto, 220px 220px !important;
	animation: cps-prod-drift 16s ease-in-out infinite alternate !important;
}
/* Title + count share one baseline row; the count sits to the right of the title. */
.cps-prod-cathead__row {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: var(--cps-space-md) !important;
	flex-wrap: wrap !important;
	width: 100% !important;
}
.cps-prod-cathead__title {
	margin-bottom: 0 !important;
	color: var(--cps-text-heading) !important;
}
.cps-prod-cathead__count {
	flex: 0 0 auto !important;
	white-space: nowrap !important;
	background: var(--cps-prod-accent) !important;
	color: var(--cps-text-on-accent) !important;
}

@keyframes cps-prod-drift {
	from { transform: translate3d(0, 0, 0) scale(1) !important; }
	to   { transform: translate3d(-20px, -12px, 0) scale(1.12) !important; }
}

/* ── Rich material cards (2–3 per row): cover + full title + description + actions ── */
/* Produções — search + filter toolbar (Phase 1B). Client-side (cps-prod-filter.js). */
/* Compound selector out-specifies .cps-section (declared later with padding:3xl).
   Asymmetric: keep breathing room ABOVE the guias (separates from the hero),
   tight BELOW so the gallery starts close under the filters. */
.cps-section.cps-prod-toolbar {
	position: sticky !important;
	top: 0 !important;
	z-index: 20 !important;
	background: var(--cps-surface-card) !important;
	border-bottom: 1px solid var(--cps-line-subtle) !important;
	padding: var(--cps-space-xl) var(--cps-space-lg) var(--cps-space-sm) !important;
}
.cps-prod-toolbar__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: var(--cps-space-md) !important;
	max-width: 1100px !important;
	margin: 0 auto !important;
}
/* Guias row: the tab bar takes the left, the result count sits at the far right
   on the same baseline; the underline spans the whole row. */
.cps-prod-toolbar__tabsrow {
	display: flex !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	gap: var(--cps-space-md) !important;
	border-bottom: 1px solid var(--cps-line-subtle) !important;
}
.cps-prod-toolbar__tabsrow .cps-prod-tabs {
	flex: 1 1 auto !important;
	border-bottom: none !important;
}
.cps-prod-toolbar__tabsrow .cps-prod-toolbar__count {
	flex: 0 0 auto !important;
	padding-bottom: var(--cps-space-sm) !important;
}
/* Asset-type tabs (guias). The DS .cps-tab-btn is underline-style but carries no
   !important, so the host theme's button chrome (magenta border/box) bleeds in.
   This scoped block re-asserts the clean underline tab with !important (Rule 11). */
.cps-prod-tabs {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--cps-space-2xs) !important;
	border-bottom: 1px solid var(--cps-line-subtle) !important;
}
.cps-prod-tabs .cps-tab-btn {
	appearance: none !important;
	-webkit-appearance: none !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	margin: 0 0 -1px 0 !important;
	padding: var(--cps-space-sm) var(--cps-space-md) !important;
	font-family: var(--cps-font-body) !important;
	font-weight: 400 !important;
	font-size: var(--cps-text-sm) !important;
	line-height: 1 !important;
	color: var(--cps-text-secondary) !important;
	cursor: pointer !important;
	transition: color var(--cps-transition-fast) !important;
}
.cps-prod-tabs .cps-tab-btn::after {
	background: var(--cps-teal-600) !important;
	height: 2px !important;
}
.cps-prod-tabs .cps-tab-btn:hover {
	color: var(--cps-teal-600) !important;
	background: transparent !important;
}
.cps-prod-tabs .cps-tab-btn:focus-visible {
	outline: 2px solid var(--cps-teal-500) !important;
	outline-offset: 2px !important;
}
.cps-prod-tabs .cps-tab-btn.active {
	color: var(--cps-teal-600) !important;
	background: transparent !important;
	font-weight: 400 !important;
}
.cps-prod-tabs .cps-tab-btn.active::after {
	transform: scaleX(1) !important;
}
/* Controls row: refine chips fixed LEFT, search fixed RIGHT, on the same line.
   The chips grow to fill; the search keeps a fixed width pinned to the right. */
.cps-prod-toolbar__controls {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: var(--cps-space-md) !important;
}
.cps-prod-toolbar__filters {
	order: 1 !important;
	flex: 1 1 auto !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: var(--cps-space-xs) !important;
}
/* Fixed-width search field (does not stretch), pinned to the right. */
.cps-prod-toolbar__searchwrap {
	order: 2 !important;
	flex: 0 0 300px !important;
	width: 300px !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin-left: auto !important;
}
.cps-prod-search {
	width: 100% !important;
}
.cps-prod-filter {
	appearance: none !important;
	-webkit-appearance: none !important;
	cursor: pointer !important;
	font-family: var(--cps-font-body) !important;
	font-weight: 400 !important;
	font-size: var(--cps-text-sm) !important;
	line-height: 1 !important;
	color: var(--cps-text-secondary) !important;
	background: var(--cps-surface-tinted) !important;
	border: 1px solid var(--cps-line-subtle) !important;
	border-radius: var(--cps-radius-full) !important;
	padding: 0.45rem 0.85rem !important;
	transition: color var(--cps-transition-fast), background var(--cps-transition-fast), border-color var(--cps-transition-fast) !important;
}
.cps-prod-filter:hover {
	border-color: var(--cps-teal-500) !important;
	color: var(--cps-text-primary) !important;
}
.cps-prod-filter:focus-visible {
	outline: 2px solid var(--cps-teal-500) !important;
	outline-offset: 2px !important;
}
.cps-prod-filter--active {
	color: var(--cps-text-on-dark) !important;
	background: var(--cps-teal-600) !important;
	border-color: var(--cps-teal-600) !important;
}
.cps-prod-toolbar__count {
	margin: 0 !important;
	font-size: var(--cps-text-sm) !important;
	color: var(--cps-text-muted) !important;
	white-space: nowrap !important;
	text-align: right !important;
}
/* Client-side filter hides non-matching cards / empty category sections. */
.cps-is-hidden {
	display: none !important;
}
/* Tighter vertical rhythm than a generic .cps-section: the sticky toolbar already
   provides separation, so the gallery starts close under it. NB: the compound
   selector (.cps-section.cps-prod-category) is required to out-specify .cps-section,
   which is declared later in the file with padding: 3xl !important. */
.cps-section.cps-prod-category {
	padding-top: var(--cps-space-lg) !important;
	padding-bottom: var(--cps-space-xl) !important;
}
.cps-prod-gallery {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: var(--cps-space-xl) !important;
}
/* Horizontal card: thumbnail on the left, content on the right — one flat white
   surface, no internal divider between the thumb area and the body. */
.cps-prod-card {
	position: relative !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	min-width: 0 !important;
	background: var(--cps-surface-card) !important;
	border: 1px solid var(--cps-line-subtle) !important;
	border-radius: var(--cps-radius-lg) !important;
	box-shadow: var(--cps-shadow-sm) !important;
	overflow: hidden !important;
	transition: transform var(--cps-transition-spring), box-shadow var(--cps-transition-normal), border-color var(--cps-transition-normal) !important;
	animation: cps-prod-rise 0.5s ease both !important;
}
.cps-prod-card:nth-child(2) { animation-delay: 0.05s !important; }
.cps-prod-card:nth-child(3) { animation-delay: 0.10s !important; }
.cps-prod-card:nth-child(4) { animation-delay: 0.15s !important; }
.cps-prod-card:nth-child(5) { animation-delay: 0.20s !important; }
.cps-prod-card:nth-child(6) { animation-delay: 0.25s !important; }
@keyframes cps-prod-rise {
	from { opacity: 0 !important; transform: translateY(14px) !important; }
	to   { opacity: 1 !important; transform: translateY(0) !important; }
}
.cps-prod-card:hover {
	transform: translateY(-4px) !important;
	box-shadow: var(--cps-shadow-lg) !important;
	border-color: var(--cps-prod-accent) !important;
}
/* Thumbnail column (left): the small PDF preview (~212px) sits INSIDE the card,
   contained (never cropped or upscaled to fill) so it stays sharp and undistorted.
   White surface, no divider — the card reads as one flat white panel; the image
   carries its own sheet shadow + radius to read as a document. */
.cps-prod-card__cover {
	position: relative !important;
	flex: 0 0 auto !important;
	width: 148px !important;
	display: flex !important;
	align-items: flex-start !important;
	justify-content: center !important;
	overflow: hidden !important;
	padding: var(--cps-space-lg) !important;
	background: var(--cps-surface-card) !important;
}
/* Standardized A4 thumbnail: every preview fills the SAME fixed-width A4 frame
   (portrait 1:1.414) regardless of source aspect, so the grid reads evenly.
   The sources are ~A4 PDF pages downscaled into a small tile, so object-fit:
   cover fills cleanly and stays sharp (downscale, never upscaled). */
.cps-prod-card__img {
	width: 100% !important;
	aspect-ratio: 1 / 1.414 !important;
	height: auto !important;
	object-fit: cover !important;
	object-position: top center !important;
	display: block !important;
	border-radius: var(--cps-radius-xs) !important;
	box-shadow: var(--cps-shadow-md) !important;
	transition: transform var(--cps-transition-spring) !important;
}
.cps-prod-card:hover .cps-prod-card__cover .cps-prod-card__img {
	transform: scale(1.03) !important;
}
/* Monogram fallback keeps the branded gradient tile, sized to the thumb column. */
.cps-prod-card__cover--mono {
	align-items: flex-start !important;
	padding: var(--cps-space-lg) !important;
	background: var(--cps-surface-card) !important;
}
.cps-prod-card__cover--mono .cps-prod-card__mono {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	aspect-ratio: 1 / 1.414 !important;
	border-radius: var(--cps-radius-sm) !important;
	box-shadow: var(--cps-shadow-md) !important;
	background: linear-gradient(150deg, var(--cps-navy-700) 0%, var(--cps-prod-accent) 100%) !important;
}
.cps-prod-card__mono {
	font-family: var(--cps-font-heading) !important;
	font-weight: 300 !important;
	font-size: 2.5rem !important;
	line-height: 1 !important;
	color: rgba(255, 255, 255, 0.92) !important;
}
.cps-prod-card__sheen {
	position: absolute !important;
	inset: 0 !important;
	background: radial-gradient(120% 80% at 22% 12%, rgba(255, 255, 255, 0.22), transparent 55%) !important;
	pointer-events: none !important;
}
.cps-prod-card__body {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--cps-space-sm) !important;
	padding: var(--cps-space-lg) !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
}
/* Category eyebrow ("chapéu" do título): small, uppercase, gray label. */
.cps-prod-card__eyebrow {
	font-family: var(--cps-font-body) !important;
	font-size: var(--cps-text-xs) !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	color: var(--cps-text-muted) !important;
	line-height: 1.2 !important;
}
/* Full titles — no line-clamp truncation (per CABSIN request). */
.cps-prod-card__title {
	font-family: var(--cps-font-heading) !important;
	font-size: var(--cps-text-base) !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	color: var(--cps-text-heading) !important;
	transition: color var(--cps-transition-fast) !important;
}
.cps-prod-card__title--link {
	color: var(--cps-text-heading) !important;
	text-decoration: none !important;
}
.cps-prod-card:hover .cps-prod-card__title--link {
	color: var(--cps-prod-accent) !important;
	text-decoration: none !important;
}
.cps-prod-card__title--link:focus-visible {
	outline: 2px solid var(--cps-line-focus) !important;
	outline-offset: 3px !important;
	border-radius: var(--cps-radius-xs) !important;
}
.cps-prod-card__desc {
	font-family: var(--cps-font-body) !important;
	font-size: var(--cps-text-sm) !important;
	font-weight: 300 !important;
	line-height: 1.55 !important;
	color: var(--cps-text-secondary) !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 4 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}
/* Authors byline: comma-separated names, linked when an author_url is present. */
.cps-prod-card__authors {
	margin: 0 !important;
	font-family: var(--cps-font-body) !important;
	font-size: var(--cps-text-sm) !important;
	font-weight: 300 !important;
	line-height: 1.5 !important;
	color: var(--cps-text-secondary) !important;
}
.cps-prod-author {
	color: var(--cps-text-secondary) !important;
}
.cps-prod-author:not(:last-child)::after {
	content: ', ' !important;
	color: var(--cps-text-muted) !important;
}
.cps-prod-author--link {
	color: var(--cps-text-link) !important;
	text-decoration: none !important;
	transition: color var(--cps-transition-fast) !important;
}
.cps-prod-author--link:hover {
	text-decoration: underline !important;
}
.cps-prod-author--link:focus-visible {
	outline: 2px solid var(--cps-line-focus) !important;
	outline-offset: 2px !important;
	border-radius: var(--cps-radius-xs) !important;
}
.cps-prod-card__orgs {
	margin: 0 !important;
	font-family: var(--cps-font-body) !important;
	font-size: var(--cps-text-xs) !important;
	font-weight: 300 !important;
	line-height: 1.5 !important;
	color: var(--cps-text-muted) !important;
}
.cps-prod-org {
	color: var(--cps-text-muted) !important;
}
.cps-prod-org:not(:last-child)::after {
	content: ' · ' !important;
	color: var(--cps-text-muted) !important;
}
.cps-prod-org--link {
	color: var(--cps-text-link) !important;
	text-decoration: none !important;
	transition: color var(--cps-transition-fast) !important;
}
.cps-prod-org--link:hover {
	text-decoration: underline !important;
}
.cps-prod-org--link:focus-visible {
	outline: 2px solid var(--cps-line-focus) !important;
	outline-offset: 2px !important;
	border-radius: var(--cps-radius-xs) !important;
}
.cps-prod-card__actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--cps-space-sm) !important;
	margin-top: auto !important;
	padding-top: var(--cps-space-sm) !important;
}
.cps-prod-card__actions:empty {
	display: none !important;
}
.cps-prod-card__btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: var(--cps-space-2xs) !important;
}

/* Multi-version cards (Phase 2): version switcher chips + no-JS fallback list. */
.cps-prod-card__versions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: var(--cps-space-2xs) !important;
	margin: var(--cps-space-xs) 0 !important;
}
.cps-prod-ver {
	appearance: none !important;
	-webkit-appearance: none !important;
	cursor: pointer !important;
	font-family: var(--cps-font-body) !important;
	font-weight: 400 !important;
	font-size: var(--cps-text-xs) !important;
	line-height: 1 !important;
	padding: var(--cps-space-2xs) var(--cps-space-sm) !important;
	border: 1px solid var(--cps-line-subtle) !important;
	border-radius: var(--cps-radius-full) !important;
	background: var(--cps-surface-tinted) !important;
	color: var(--cps-text-secondary) !important;
	transition: color var(--cps-transition-fast), background var(--cps-transition-fast), border-color var(--cps-transition-fast) !important;
}
.cps-prod-ver:hover,
.cps-prod-ver:focus-visible {
	border-color: var(--cps-teal-500) !important;
	color: var(--cps-text-primary) !important;
}
.cps-prod-ver--active {
	background: var(--cps-teal-600) !important;
	border-color: var(--cps-teal-600) !important;
	color: var(--cps-text-on-dark) !important;
}
.cps-prod-card__verlist {
	list-style: none !important;
	margin: var(--cps-space-xs) 0 !important;
	padding: 0 !important;
	font-size: var(--cps-text-xs) !important;
}

@media (max-width: 680px) {
	.cps-prod-gallery {
		grid-template-columns: 1fr !important;
	}
	.cps-prod-hero__stats {
		gap: var(--cps-space-lg) !important;
	}
}

/* Accessibility — honour reduced-motion: freeze all producoes-v2 motion. */
@media (prefers-reduced-motion: reduce) {
	.cps-prod-cathead__art,
	.cps-prod-card {
		animation: none !important;
	}
	.cps-prod-card:hover .cps-prod-card__cover {
		transform: none !important;
	}
}

/* Hero / Patterns */
.cps-hero {
	background: var(--cps-surface-dark);
	color: var(--cps-text-on-dark);
	padding: var(--cps-space-3xl) var(--cps-space-xl);
	border-radius: var(--cps-radius-lg);
	position: relative;
	overflow: hidden;
}
.cps-pattern-dots {
	background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
	background-size: 20px 20px;
}
.cps-pattern-gradient {
	background-image: linear-gradient(135deg, var(--cps-navy-600) 0%, var(--cps-navy-500) 50%, var(--cps-navy-700) 100%);
}

/* Glass panel */
.cps-glass {
	backdrop-filter: blur(18px) saturate(180%);
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: var(--cps-radius-lg);
	box-shadow: 0 8px 32px rgba(0, 43, 74, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* ============================================================
   NAVIGATION
   ============================================================ */

/* Tab bar */
.cps-tab-bar {
	display: flex;
	gap: 0;
	border-bottom: var(--cps-border-medium) solid var(--cps-line-subtle);
}
.cps-tab-btn {
	position: relative;
	padding: var(--cps-space-sm) var(--cps-space-md);
	font-family: var(--cps-font-body);
	font-size: var(--cps-text-sm);
	font-weight: 400;
	color: var(--cps-text-muted);
	background: transparent;
	border: none;
	margin-bottom: -2px;
	cursor: pointer;
	transition: color var(--cps-transition-normal);
}
.cps-tab-btn::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--cps-accent);
	transform: scaleX(0);
	transition: transform var(--cps-transition-normal);
}
.cps-tab-btn:hover {
	color: var(--cps-teal-600) !important;
	background: transparent !important;
}
.cps-tab-btn:focus,
.cps-tab-btn:active {
	color: var(--cps-teal-600) !important;
	background: transparent !important;
	outline: none;
}
.cps-tab-btn.active {
	color: var(--cps-accent) !important;
	font-weight: 400;
	background: transparent !important;
}
.cps-tab-btn.active::after {
	transform: scaleX(1);
}
.cps-tab-panel {
	display: none;
	padding: var(--cps-space-md) 0;
}
.cps-tab-panel.active {
	display: block;
}

/* Tab panels */
.cps-tab-panel {
	display: none;
}
.cps-tab-panel.active {
	display: block;
}

/* Link */
.cps-link {
	color: var(--cps-teal-500) !important;
	text-decoration: none !important;
	font-weight: 400 !important;
	transition: color var(--cps-transition-normal);
}
.cps-link:hover {
	color: var(--cps-teal-400) !important;
	text-decoration: none !important;
}
.cps-link:visited {
	color: var(--cps-teal-700) !important;
}
.cps-link--muted {
	color: var(--cps-text-muted);
}
.cps-link--muted:hover {
	color: var(--cps-teal-500);
}

/* Sidebar nav */
.cps-sidebar-nav__item {
	display: block;
	padding: var(--cps-space-sm) var(--cps-space-md);
	font-size: var(--cps-text-sm);
	color: var(--cps-text-muted);
	border-left: var(--cps-border-accent) solid transparent;
	transition: all var(--cps-transition-normal);
	cursor: pointer;
	text-decoration: none;
}
.cps-sidebar-nav__item:hover {
	color: var(--cps-text-secondary);
	background: var(--cps-surface-tinted);
}
.cps-sidebar-nav__item.active {
	color: var(--cps-teal-700);
	border-left-color: var(--cps-teal-500);
	background: var(--cps-teal-50);
	font-weight: 400;
}

/* Context menu */
.cps-menu {
	position: absolute;
	z-index: 100;
	min-width: 180px;
	background: var(--cps-surface-overlay);
	border: 1px solid var(--cps-line-default);
	border-radius: var(--cps-radius-md);
	box-shadow: var(--cps-shadow-lg);
	padding: var(--cps-space-xs) 0;
}
.cps-menu__item {
	display: flex;
	align-items: center;
	gap: var(--cps-space-md);
	width: 100%;
	padding: var(--cps-space-sm) var(--cps-space-md);
	font-size: var(--cps-text-sm);
	color: var(--cps-text-body);
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	transition: background var(--cps-transition-fast);
}
.cps-menu__item svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	color: var(--cps-text-muted);
	vertical-align: middle;
}
.cps-menu__item:hover {
	background: var(--cps-teal-50);
	color: var(--cps-teal-700) !important;
}
.cps-menu__item--danger {
	color: var(--cps-danger) !important;
	border-top: var(--cps-border-thin) solid var(--cps-line-subtle);
	margin-top: var(--cps-space-xs);
	padding-top: var(--cps-space-sm);
}
.cps-menu__item--danger svg {
	color: var(--cps-danger) !important;
}
.cps-menu__item--danger:hover {
	background: rgba(220,53,69,0.08) !important;
	color: var(--cps-danger) !important;
}

/* Breadcrumb */
.cps-breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--cps-space-xs);
	font-size: var(--cps-text-sm);
}
.cps-breadcrumb-link {
	color: var(--cps-teal-500) !important;
	text-decoration: none !important;
	font-weight: 400 !important;
}
.cps-breadcrumb-link:hover {
	color: var(--cps-teal-400) !important;
	text-decoration: none !important;
}
.cps-breadcrumb-link:visited {
	color: var(--cps-teal-700) !important;
}
.cps-breadcrumb-separator {
	color: var(--cps-text-disabled);
	display: flex;
	align-items: center;
}
.cps-breadcrumb-separator svg {
	width: 12px;
	height: 12px;
}
.cps-breadcrumb-current {
	color: var(--cps-text-secondary);
	font-weight: 400;
}

/* Pagination */
.cps-pagination {
	display: flex;
	align-items: center;
	gap: var(--cps-space-xs);
}
.cps-pagination__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 var(--cps-space-sm);
	font-size: var(--cps-text-sm);
	font-weight: 400;
	color: var(--cps-text-muted);
	background: transparent;
	border: 1px solid var(--cps-line-default);
	border-radius: var(--cps-radius-sm);
	cursor: pointer;
	transition: all var(--cps-transition-normal);
}
.cps-pagination__btn:hover {
	background: var(--cps-surface-chrome);
	color: var(--cps-text-secondary);
}
.cps-pagination__btn--active {
	background: var(--cps-accent);
	color: var(--cps-text-on-accent);
	border-color: var(--cps-accent);
}

/* ============================================================
   DATA DISPLAY & READ-ONLY
   ============================================================ */

/* Read field */
.cps-readfield {
	margin-bottom: var(--cps-space-md);
}
.cps-readfield__label {
	font-size: var(--cps-text-xs);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cps-text-muted);
	margin-bottom: var(--cps-space-2xs);
}
.cps-readfield__text {
	font-size: var(--cps-text-md);
	color: var(--cps-text-body);
}

/* Keyboard hint */
.cps-kbd {
	display: inline-block;
	padding: var(--cps-space-2xs) var(--cps-space-sm);
	font-family: var(--cps-font-mono);
	font-size: var(--cps-text-xs);
	background: var(--cps-surface-chrome);
	border: 1px solid var(--cps-line-default);
	border-radius: var(--cps-radius-sm);
	box-shadow: inset 0 -1px 0 var(--cps-line-strong);
	color: var(--cps-text-secondary);
}

/* Code block */
.cps-code-block {
	display: block;
	padding: var(--cps-space-md);
	font-family: var(--cps-font-mono);
	font-size: var(--cps-text-xs);
	color: var(--cps-text-body);
	background: var(--cps-surface-chrome);
	border: 1px solid var(--cps-line-default);
	border-radius: var(--cps-radius-md);
	overflow-x: auto;
	white-space: pre;
	line-height: 1.6;
}

/* Avatar */
.cps-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--cps-radius-md);
	background: var(--cps-accent-bg);
	color: var(--cps-teal-700);
	font-weight: 400;
	overflow: hidden;
	flex-shrink: 0;
	border: 1px solid var(--cps-line-default);
}
.cps-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cps-avatar--sm { width: 24px; height: 24px; font-size: var(--cps-text-2xs); }
.cps-avatar--md { width: 36px; height: 36px; font-size: var(--cps-text-sm); }
.cps-avatar--lg { width: 48px; height: 48px; font-size: var(--cps-text-md); }

/* Tooltip */
.cps-tooltip {
	position: relative;
	cursor: help;
}
.cps-tooltip::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%) scale(0.95);
	padding: var(--cps-space-xs) var(--cps-space-sm);
	font-size: var(--cps-text-xs);
	font-weight: 400;
	color: var(--cps-text-on-dark);
	background: rgba(66, 84, 100, 0.88);
	border-radius: var(--cps-radius-sm);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--cps-transition-fast), transform var(--cps-transition-fast);
	z-index: 50;
}
.cps-tooltip:hover::after {
	opacity: 1;
	transform: translateX(-50%) scale(1);
}

/* Media / icon indicators */
.cps-media-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: var(--cps-radius-sm);
	background: var(--cps-surface-chrome);
	color: var(--cps-text-muted);
	font-size: var(--cps-text-xs);
	transition: background var(--cps-transition-fast), color var(--cps-transition-fast);
	cursor: default;
}
.cps-media-icon:hover {
	background: var(--cps-neutral-200);
	color: var(--cps-text-secondary);
}
.cps-media-icon--sm { width: 20px; height: 20px; }
.cps-media-icon--lg { width: 32px; height: 32px; }

/* ============================================================
   ICONS
   ============================================================ */
.cps-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.cps-icon svg {
	stroke: currentColor;
	fill: none;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.cps-icon--sm svg { width: 16px; height: 16px; }
.cps-icon--md svg { width: 20px; height: 20px; }
.cps-icon--lg svg { width: 24px; height: 24px; }
.cps-icon--xl svg { width: 32px; height: 32px; }

/* ============================================================
   SPECIALIZED
   ============================================================ */

/* Scroll container */
.cps-scroll-container {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--cps-surface-card);
	border: 1px solid var(--cps-line-subtle);
	border-radius: var(--cps-radius-sm);
	scrollbar-width: thin;
	scrollbar-color: var(--cps-teal-300) var(--cps-neutral-100);
}

/* Embed container (for Tableau, iframes) */
.cps-embed {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	border-radius: var(--cps-radius-md);
	overflow: hidden;
	background: var(--cps-surface-chrome);
}
.cps-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* Tree / hierarchy */
.cps-tree,
.cps-tree__children {
	list-style: none;
	padding: 0;
}
.cps-tree__item {
	position: relative;
}
.cps-tree__label {
	display: flex;
	align-items: center;
	gap: var(--cps-space-sm);
	padding: var(--cps-space-xs) var(--cps-space-sm);
	font-size: var(--cps-text-sm);
	color: var(--cps-text-body);
	cursor: pointer;
	border-radius: var(--cps-radius-sm);
	transition: background var(--cps-transition-fast);
}
.cps-tree__label:hover {
	background: var(--cps-surface-tinted);
}
.cps-tree__label[aria-expanded] .cps-tree__toggle {
	transition: transform var(--cps-transition-normal);
}
.cps-tree__label[aria-expanded="true"] .cps-tree__toggle {
	transform: rotate(90deg);
}
.cps-tree__children {
	padding-left: var(--cps-space-lg);
	margin-left: var(--cps-space-sm);
}

/* List editor */
.cps-list-editor {
	border: 1px solid var(--cps-line-subtle);
	border-radius: var(--cps-radius-md);
	overflow: hidden;
}
.cps-list-editor__item {
	display: flex;
	align-items: center;
	gap: var(--cps-space-sm);
	padding: var(--cps-space-sm) var(--cps-space-md);
	border-bottom: var(--cps-border-thin) solid var(--cps-line-subtle);
	background: var(--cps-surface-card);
	transition: background var(--cps-transition-fast);
}
.cps-list-editor__item:last-child {
	border-bottom: none;
}
.cps-list-editor__item:hover {
	background: var(--cps-surface-tinted);
}
.cps-list-editor__drag {
	cursor: grab;
	color: var(--cps-text-disabled);
	flex-shrink: 0;
	display: flex;
	align-items: center;
}
.cps-list-editor__drag:active {
	cursor: grabbing;
}
.cps-list-editor__text {
	flex: 1;
	font-size: var(--cps-text-sm);
	color: var(--cps-text-body);
}
.cps-list-editor__actions {
	display: flex;
	gap: var(--cps-space-xs);
}
.cps-list-editor__empty {
	padding: var(--cps-space-xl);
	text-align: center;
	color: var(--cps-text-hint);
	font-size: var(--cps-text-sm);
}
.cps-list-editor__item.cps-drag-over {
	border-top: var(--cps-border-medium) solid var(--cps-teal-500);
}

/* Date picker */
.cps-datepicker {
	background: var(--cps-surface-overlay);
	border: 1px solid var(--cps-line-default);
	border-radius: var(--cps-radius-md);
	box-shadow: var(--cps-shadow-lg);
	padding: var(--cps-space-md);
	width: 280px;
}
.cps-datepicker__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--cps-space-md);
}
.cps-datepicker__month {
	font-family: var(--cps-font-heading);
	font-size: var(--cps-text-md);
	font-weight: 400;
	color: var(--cps-text-heading);
}
.cps-datepicker__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	text-align: center;
}
.cps-datepicker__weekday {
	font-size: var(--cps-text-2xs);
	font-weight: 400;
	color: var(--cps-text-muted);
	padding: var(--cps-space-xs);
	text-transform: uppercase;
}
.cps-datepicker__day {
	padding: var(--cps-space-xs);
	font-size: var(--cps-text-sm);
	color: var(--cps-text-body);
	border-radius: var(--cps-radius-sm);
	cursor: pointer;
	border: none;
	background: none;
	transition: background var(--cps-transition-fast), color var(--cps-transition-fast);
}
.cps-datepicker__day:hover {
	background: var(--cps-teal-50) !important;
	color: var(--cps-text-body) !important;
}
.cps-datepicker__day:focus,
.cps-datepicker__day:active {
	background: var(--cps-teal-50) !important;
	color: var(--cps-text-body) !important;
	outline: none;
}
.cps-datepicker__day--selected:focus,
.cps-datepicker__day--selected:active {
	background: var(--cps-teal-500) !important;
	color: var(--cps-text-on-accent) !important;
}
.cps-datepicker__day--today {
	font-weight: 400;
	color: var(--cps-teal-700);
}
.cps-datepicker__day--selected {
	background: var(--cps-teal-500);
	color: var(--cps-text-on-accent);
	font-weight: 400;
}
.cps-datepicker__day--other {
	color: var(--cps-text-disabled);
}
.cps-datepicker__day--range {
	background: var(--cps-teal-50);
	border-radius: 0;
}

/* ============================================================
   SECTION 13 — MEDIA EMBEDS
   MECE: 13.1 Proporções · 13.2 Aparência · 13.3 Interação
         13.4 Composições · 13.5 Modal
   ============================================================ */

/* ------ 13.1 Proporções (base + 7 ratios + fill elements) ------ */
.cps-media {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	overflow: hidden !important;
	background: var(--cps-surface-chrome) !important;
	border-radius: var(--cps-radius-sm) !important;
}

/* Intrinsic-ratio via padding-top (fallback for older browsers) */
.cps-media::before {
	content: '' !important;
	display: block !important;
}

.cps-media--16x9::before  { padding-top: 56.25% !important; }
.cps-media--4x3::before   { padding-top: 75% !important; }
.cps-media--1x1::before   { padding-top: 100% !important; }
.cps-media--3x4::before   { padding-top: 133.33% !important; }
.cps-media--21x9::before  { padding-top: 42.86% !important; }
.cps-media--9x16::before  { padding-top: 177.78% !important; }
.cps-media--3x1::before   { padding-top: 33.33% !important; }

/* Modern aspect-ratio property (progressive enhancement) */
@supports (aspect-ratio: 1) {
	.cps-media--16x9  { aspect-ratio: 16 / 9 !important; }
	.cps-media--16x9::before  { display: none !important; }

	.cps-media--4x3   { aspect-ratio: 4 / 3 !important; }
	.cps-media--4x3::before   { display: none !important; }

	.cps-media--1x1   { aspect-ratio: 1 / 1 !important; }
	.cps-media--1x1::before   { display: none !important; }

	.cps-media--3x4   { aspect-ratio: 3 / 4 !important; }
	.cps-media--3x4::before   { display: none !important; }

	.cps-media--21x9  { aspect-ratio: 21 / 9 !important; }
	.cps-media--21x9::before  { display: none !important; }

	.cps-media--9x16  { aspect-ratio: 9 / 16 !important; }
	.cps-media--9x16::before  { display: none !important; }

	.cps-media--3x1   { aspect-ratio: 3 / 1 !important; }
	.cps-media--3x1::before   { display: none !important; }
}

/* Fill elements */
.cps-media__img,
.cps-media__video,
.cps-media__iframe {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	display: block !important;
}

.cps-media__img,
.cps-media__video {
	object-fit: cover !important;
	object-position: center !important;
}

.cps-media__iframe {
	border: none !important;
}

/* ------ 13.2 Interação (clickable, overlay, play) ------ */

/* Clickable hover fade */
.cps-media--clickable {
	cursor: pointer !important;
}

.cps-media--clickable .cps-media__img {
	transition: transform var(--cps-transition-normal), filter var(--cps-transition-normal) !important;
}

.cps-media--clickable:hover .cps-media__img {
	transform: var(--cps-hover-scale) !important;
	filter: var(--cps-hover-brighten) !important;
}

/* Overlay */
.cps-media__overlay {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--cps-overlay-mid) !important;
	opacity: 0 !important;
	transition: opacity var(--cps-transition-normal) !important;
}

.cps-media:hover .cps-media__overlay,
.cps-media:focus-within .cps-media__overlay {
	opacity: 1 !important;
}

.cps-media__overlay--always {
	opacity: 1 !important;
}

.cps-media__overlay--bottom {
	inset: auto 0 0 0 !important;
	background: linear-gradient(to top, var(--cps-overlay-dark) 0%, transparent 100%) !important;
	padding: var(--cps-space-md) !important;
	align-items: flex-end !important;
	justify-content: flex-start !important;
	opacity: 1 !important;
}

/* Play button — standalone, fundo branco, ícone navy visível em qualquer fundo */
.cps-media__play {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--cps-surface-frosted) !important;
	color: var(--cps-navy-500) !important;
	border: none !important;
	cursor: pointer !important;
	padding: var(--cps-space-md) !important;
	border-radius: var(--cps-radius-md) !important;
	transition: transform var(--cps-transition-fast), background var(--cps-transition-fast) !important;
	box-shadow: none !important;
	outline: none !important;
}

.cps-media__play:hover {
	transform: var(--cps-hover-scale) !important;
	background: var(--cps-surface-card) !important;
	color: var(--cps-navy-500) !important;
}

/* ------ 13.3 Composições (figure, card+media, doc-embed, grid) ------ */

/* Figure + caption */
.cps-figure {
	display: block !important;
	margin: 0 !important;
}

.cps-figure__caption {
	display: block !important;
	margin-top: var(--cps-space-xs) !important;
	font-size: var(--cps-text-xs) !important;
	color: var(--cps-text-muted) !important;
	font-weight: var(--cps-weight-normal) !important;
	line-height: var(--cps-leading-normal) !important;
}

.cps-figure__caption--center {
	text-align: center !important;
}

/* Media inside card: top rounded, bottom square */
.cps-card--has-header > .cps-media,
.cps-card--has-header .cps-media:first-child {
	border-radius: var(--cps-radius-md) var(--cps-radius-md) 0 0 !important;
}


/* Document / PDF embed */
.cps-doc-embed {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	background: var(--cps-surface-chrome) !important;
	border-radius: var(--cps-radius-sm) !important;
	border-style: solid !important;
	border-width: var(--cps-border-thin) !important;
	border-color: var(--cps-line-default) !important;
	overflow: hidden !important;
}

.cps-doc-embed__iframe {
	display: block !important;
	width: 100% !important;
	border: none !important;
	min-height: var(--cps-doc-embed-height) !important;
}

.cps-doc-embed__toolbar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: var(--cps-space-sm) var(--cps-space-md) !important;
	background: var(--cps-surface-raised) !important;
	font-size: var(--cps-text-sm) !important;
	color: var(--cps-text-secondary) !important;
}

.cps-doc-embed__title {
	font-weight: var(--cps-weight-medium) !important;
	color: var(--cps-text-primary) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 60% !important;
}

/* Thumbnail grid */
.cps-media-grid {
	display: grid !important;
	gap: var(--cps-space-sm) !important;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
}

.cps-media-grid--2col { grid-template-columns: repeat(2, 1fr) !important; }
.cps-media-grid--3col { grid-template-columns: repeat(3, 1fr) !important; }
.cps-media-grid--4col { grid-template-columns: repeat(4, 1fr) !important; }

@media (max-width: 640px) {
	.cps-media-grid--3col,
	.cps-media-grid--4col {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
	.cps-container {
		color: #000;
		background: #FFF;
	}
	.cps-card {
		box-shadow: none;
		border: var(--cps-border-thin) solid var(--cps-line-default);
		break-inside: avoid;
	}
	.cps-btn,
	.cps-toast-container,
	.cps-modal-scrim {
		display: none !important;
	}
	.cps-table th,
	.cps-table td {
		border: var(--cps-border-thin) solid var(--cps-line-default);
	}
}

/* ============================================================
   UTILITY: Scroll-triggered animation
   Add .cps-animate-in to any element; JS adds .cps--visible
   on IntersectionObserver entry.
   ============================================================ */
.cps-animate-in {
	opacity: 0 !important;
	transform: translateY(24px) !important;
	transition: opacity var(--cps-transition-slow), transform var(--cps-transition-slow) !important;
}
.cps-animate-in.cps--visible {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

/* ============================================================
   SECTION LAYOUT — Generic contained section (R-DSL promoted)
   Replaces .cps-aff-section for F2-promoted components.
   max-width matches the affiliation layout contract (1100px).
   ============================================================ */
.cps-section {
	padding: var(--cps-space-3xl) var(--cps-space-lg) !important;
	max-width: 1100px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.cps-section__heading {
	text-align: center !important;
	margin-bottom: var(--cps-space-2xl) !important;
}

.cps-section__heading .cps-t-h2 {
	margin-bottom: var(--cps-space-sm) !important;
}

/* ============================================================
   MEDIA SPLIT — two-column media + content layout (R-DSL promoted)
   Replaces .cps-aff-meaning for F2 Meaning section.
   ============================================================ */
.cps-media-split {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: var(--cps-space-2xl) !important;
	align-items: center !important;
}

.cps-media-split__img {
	width: 100% !important;
	height: auto !important;
	display: block !important;
}

@media (max-width: 768px) {
	.cps-media-split {
		grid-template-columns: 1fr !important;
	}
}

/* ============================================================
   HERO BODY — centered flex column inside .cps-hero (R-DSL promoted)
   Replaces .cps-aff-cta-final__content for F2 CTA section.
   ============================================================ */
.cps-hero__body {
	position: relative !important;
	z-index: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: var(--cps-space-md) !important;
	text-align: center !important;
}

.cps-hero__body .cps-t-h2 {
	color: var(--cps-text-on-dark) !important;
}

.cps-hero__body .cps-t-hint {
	color: rgba(255, 255, 255, 0.7) !important;
}