/**
 * Color Scheme 1 — изолированные стили UI Kit (Space Grotesk, локальные woff2).
 * Подключается только на /color-scheme-1/
 */

/* --------------------------------------------------------------------------
   Fonts (GDPR: только локальные файлы, font-display: swap)
   -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/space-grotesk-latin-ext-400.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/space-grotesk-latin-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/space-grotesk-latin-ext-500.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/space-grotesk-latin-500.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/space-grotesk-latin-ext-600.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/space-grotesk-latin-600.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/space-grotesk-latin-ext-700.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/space-grotesk-latin-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Tokens — Figma Design System (Brand / Color, Typography, Shadows)
   file: xfH4D9DwwK2XpekNfiRbg9 · nodes 0:1052 / 0:888 / 0:816
   -------------------------------------------------------------------------- */
.cs1 {
	--cs1-font: 'Space Grotesk', system-ui, sans-serif;

	/* Primary: Light 8% → Darker 84% */
	--cs1-primary-light: #dee6ff;
	--cs1-primary-medium: #8390fa;
	--cs1-primary-main: #4352c9;
	--cs1-primary-dark: #1d2f6f;
	--cs1-primary-darker: #07174d;
	/* aliases for UI */
	--cs1-primary-50: var(--cs1-primary-light);
	--cs1-primary-100: var(--cs1-primary-light);
	--cs1-primary-400: var(--cs1-primary-medium);
	--cs1-primary-500: var(--cs1-primary-main);
	--cs1-primary-600: var(--cs1-primary-main);
	--cs1-primary-700: var(--cs1-primary-dark);
	--cs1-primary-800: var(--cs1-primary-dark);
	--cs1-primary-900: var(--cs1-primary-darker);

	/* Secondary */
	--cs1-secondary-light: #c8fff1;
	--cs1-secondary-medium: #62dcbc;
	--cs1-secondary-main: #3ebf9d;
	--cs1-secondary-dark: #1f9475;
	--cs1-secondary-darker: #074d3b;
	--cs1-secondary-50: var(--cs1-secondary-light);
	--cs1-secondary-100: var(--cs1-secondary-light);
	--cs1-secondary-400: var(--cs1-secondary-medium);
	--cs1-secondary-500: var(--cs1-secondary-main);
	--cs1-secondary-600: var(--cs1-secondary-dark);
	--cs1-secondary-700: var(--cs1-secondary-dark);
	--cs1-secondary-900: var(--cs1-secondary-darker);

	/* Accent */
	--cs1-accent-yellow: #ffbf6e;
	--cs1-accent-green: #1de397;
	--cs1-accent-blue: #30b6ed;
	--cs1-accent-red: #ed412d;
	--cs1-accent-peach: #f9e9ec;
	--cs1-accent-purple: #c48deb;
	--cs1-accent-indigo: #6776ed;

	/* Grey 10–100 */
	--cs1-gray-10: #f6f6f6;
	--cs1-gray-20: #d9dee2;
	--cs1-gray-30: #bfc6cc;
	--cs1-gray-40: #a9b2b9;
	--cs1-gray-50: #a4abb1;
	--cs1-gray-60: #919ca2;
	--cs1-gray-70: #5e6b74;
	--cs1-gray-80: #434d56;
	--cs1-gray-90: #232c35;
	--cs1-gray-100: #1a2129;
	--cs1-gray-0: #ffffff;
	--cs1-gray-100-bg: #f6f6f6;
	--cs1-gray-200: var(--cs1-gray-20);
	--cs1-gray-300: var(--cs1-gray-30);
	--cs1-gray-400: var(--cs1-gray-40);
	--cs1-gray-500: var(--cs1-gray-60);
	--cs1-gray-600: var(--cs1-gray-70);
	--cs1-gray-700: var(--cs1-gray-80);
	--cs1-gray-800: var(--cs1-gray-90);
	--cs1-gray-900: var(--cs1-gray-100);
	--cs1-gray-950: #1a2129;

	/* Text */
	--cs1-text-primary: #1a2129;
	--cs1-text-secondary: #434d56;
	--cs1-text-tertiary: #a9b2b9;

	--cs1-radius-sm: 1.6px;
	--cs1-radius-md: 2px;
	--cs1-radius-lg: 2.4px;
	--cs1-radius-xl: 6.8px;
	--cs1-radius-pill: 5px;

	/* Light shadows (Figma Brand / Shadows) */
	--cs1-shadow-xs: 0 6px 16px rgba(217, 222, 226, 0.6);
	--cs1-shadow-sm: 0 8px 18px rgba(217, 222, 226, 0.6);
	--cs1-shadow-md: 0 10px 20px rgba(217, 222, 226, 0.8);
	--cs1-shadow-lg: 0 12px 24px #d9dee2;
	--cs1-shadow-xl: 0 14px 26px #d9dee2;
	--cs1-shadow-xxl: 0 16px 32px #d9dee2;

	/* Dark shadows */
	--cs1-shadow-dark-xs: 0 6px 16px rgba(0, 0, 0, 0.6);
	--cs1-shadow-dark-sm: 0 8px 18px rgba(0, 0, 0, 0.6);
	--cs1-shadow-dark-md: 0 10px 20px #000;
	--cs1-shadow-dark-lg: 0 12px 24px #000;
	--cs1-shadow-dark-xl: 0 14px 26px #000;
	--cs1-shadow-dark-xxl: 0 16px 32px #000;

	--cs1-space-1: 4px;
	--cs1-space-2: 8px;
	--cs1-space-3: 12px;
	--cs1-space-4: 16px;
	--cs1-space-5: 24px;
	--cs1-space-6: 32px;
	--cs1-space-7: 48px;
	--cs1-space-8: 64px;

	box-sizing: border-box;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	font-family: var(--cs1-font);
	font-size: 16px;
	line-height: 1.55;
	color: var(--cs1-text-primary);
	background:
		radial-gradient(1200px 600px at 10% -10%, rgba(67, 82, 201, 0.12), transparent 55%),
		radial-gradient(900px 500px at 100% 0%, rgba(62, 191, 157, 0.1), transparent 50%),
		var(--cs1-gray-10);
	-webkit-font-smoothing: antialiased;
}

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

.cs1-wrap {
	width: min(1120px, calc(100% - 32px));
	margin: 0 auto;
	padding: var(--cs1-space-6) 0 var(--cs1-space-8);
}

.cs1-hero {
	margin-bottom: var(--cs1-space-6);
	animation: cs1-fade-up 0.55s ease both;
}

.cs1-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--cs1-space-3);
	padding: 6px 12px;
	border-radius: var(--cs1-radius-pill);
	background: var(--cs1-primary-light);
	color: var(--cs1-primary-dark);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cs1-title {
	margin: 0 0 var(--cs1-space-3);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--cs1-text-primary);
}

.cs1-lead {
	margin: 0;
	max-width: 42rem;
	color: var(--cs1-text-secondary);
	font-size: 1.05rem;
}

.cs1-lead code {
	font-size: 0.9em;
	color: var(--cs1-primary-main);
}

/* Tabs */
.cs1-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 var(--cs1-space-5);
	padding: 6px;
	border-radius: var(--cs1-radius-lg);
	background: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--cs1-gray-200);
	backdrop-filter: blur(8px);
	box-shadow: var(--cs1-shadow-xs);
	animation: cs1-fade-up 0.55s ease 0.08s both;
}

.cs1-tab {
	appearance: none;
	border: 0;
	border-radius: var(--cs1-radius-md);
	padding: 10px 16px;
	background: transparent;
	color: var(--cs1-gray-600);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.cs1-tab:hover {
	background: var(--cs1-primary-medium);
	color: #fff;
}

.cs1-tab:focus-visible {
	outline: 2px solid var(--cs1-primary-main);
	outline-offset: 2px;
}

.cs1-tab.is-active,
.cs1-tab.is-active:hover {
	background: var(--cs1-primary-main);
	color: #fff;
	box-shadow: 0 6px 16px rgba(67, 82, 201, 0.35);
}

.cs1-panel {
	animation: cs1-fade-up 0.4s ease both;
}

.cs1-panel[hidden] {
	display: none !important;
}

.cs1-card {
	background: var(--cs1-gray-0);
	border: 1px solid var(--cs1-gray-200);
	border-radius: var(--cs1-radius-xl);
	box-shadow: var(--cs1-shadow-sm);
	overflow: hidden;
}

.cs1-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 22px;
	background: linear-gradient(90deg, var(--cs1-primary-dark), var(--cs1-primary-main));
	color: #fff;
}

.cs1-card__head h2 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.cs1-card__head span {
	font-size: 0.8rem;
	opacity: 0.85;
}

.cs1-card__body {
	padding: 22px;
}

.cs1-section-label {
	margin: 0 0 12px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cs1-gray-500);
}

.cs1-section-label + .cs1-swatch-row,
.cs1-block + .cs1-block {
	margin-top: 22px;
}

/* Colors */
.cs1-swatch-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
	gap: 10px;
}

.cs1-swatch {
	border-radius: var(--cs1-radius-md);
	overflow: hidden;
	border: 1px solid var(--cs1-gray-200);
	background: #fff;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cs1-swatch:hover {
	transform: translateY(-2px);
	box-shadow: var(--cs1-shadow-md);
}

.cs1-swatch__chip {
	height: 56px;
}

.cs1-swatch__meta {
	padding: 8px 8px 10px;
}

.cs1-swatch__meta strong {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--cs1-gray-800);
}

.cs1-swatch__meta code {
	font-size: 0.65rem;
	color: var(--cs1-gray-500);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.cs1-demo-dark {
	margin-top: 22px;
	padding: 18px;
	border-radius: var(--cs1-radius-lg);
	background: var(--cs1-gray-900);
	color: #fff;
}

.cs1-demo-dark__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

.cs1-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: var(--cs1-radius-pill);
	font-size: 0.85rem;
	font-weight: 600;
	color: #fff;
}

.cs1-pill--primary { background: #4352c9; }
.cs1-pill--secondary { background: #3ebf9d; }
.cs1-pill--yellow { background: #ffbf6e; color: #1a2129; }
.cs1-pill--red { background: #ed412d; }
.cs1-pill--green { background: #1de397; color: #1a2129; }
.cs1-pill--blue { background: #30b6ed; }
.cs1-pill--peach { background: #f9e9ec; color: #1a2129; }
.cs1-pill--purple { background: #c48deb; }

/* Typography */
.cs1-type-list {
	display: grid;
	gap: 18px;
}

.cs1-type-item {
	display: grid;
	grid-template-columns: minmax(140px, 180px) 1fr;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--cs1-gray-100);
	align-items: baseline;
}

.cs1-type-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.cs1-type-meta {
	font-size: 0.78rem;
	color: var(--cs1-gray-500);
	line-height: 1.45;
}

.cs1-type-meta strong {
	display: block;
	color: var(--cs1-gray-800);
	font-size: 0.85rem;
	margin-bottom: 4px;
}

.cs1-t-display {
	font-size: 64px;
	font-weight: 700;
	line-height: 92px;
	letter-spacing: -0.02em;
	color: var(--cs1-text-primary);
}

.cs1-t-h1 {
	font-size: 64px;
	font-weight: 700;
	line-height: 92px;
	letter-spacing: -0.02em;
	color: var(--cs1-text-primary);
}

.cs1-t-h2 {
	font-size: 58px;
	font-weight: 700;
	line-height: 82px;
	letter-spacing: -0.02em;
	color: var(--cs1-text-primary);
}

.cs1-t-h3 {
	font-size: 42px;
	font-weight: 700;
	line-height: 62px;
	color: var(--cs1-text-primary);
}

.cs1-t-h4 {
	font-size: 36px;
	font-weight: 700;
	line-height: 52px;
	color: var(--cs1-text-primary);
}

.cs1-t-h5 {
	font-size: 28px;
	font-weight: 700;
	line-height: 42px;
	color: var(--cs1-text-primary);
}

.cs1-t-h6 {
	font-size: 24px;
	font-weight: 700;
	line-height: 36px;
	color: var(--cs1-text-primary);
}

.cs1-t-subtitle1 {
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: var(--cs1-text-primary);
}

.cs1-t-subtitle2 {
	font-size: 14px;
	font-weight: 700;
	line-height: 22px;
	color: var(--cs1-text-primary);
}

.cs1-t-body-lg,
.cs1-t-body1 {
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: var(--cs1-text-primary);
}

.cs1-t-body,
.cs1-t-body2 {
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	color: var(--cs1-text-primary);
}

.cs1-t-body-md {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
}

.cs1-t-btn-lg {
	font-size: 15px;
	font-weight: 700;
	line-height: 26px;
}

.cs1-t-btn-md {
	font-size: 14px;
	font-weight: 700;
	line-height: 22px;
}

.cs1-t-btn-sm {
	font-size: 13px;
	font-weight: 700;
	line-height: 20px;
}

.cs1-t-caption {
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
	color: var(--cs1-gray-60);
}

.cs1-t-caption-bold {
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	color: var(--cs1-text-primary);
}

.cs1-t-label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cs1-gray-60);
}

@media (max-width: 720px) {
	.cs1-t-h1,
	.cs1-t-display { font-size: 40px; line-height: 52px; }
	.cs1-t-h2 { font-size: 34px; line-height: 46px; }
	.cs1-t-h3 { font-size: 28px; line-height: 40px; }
	.cs1-t-h4 { font-size: 24px; line-height: 34px; }
}

/* Shadows */
.cs1-shadow-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 18px;
}

.cs1-shadow-card {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 110px;
	border-radius: var(--cs1-radius-lg);
	background: #fff;
	border: 1px solid transparent;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--cs1-gray-700);
}

.cs1-shadow-card--xs { box-shadow: var(--cs1-shadow-xs); }
.cs1-shadow-card--sm { box-shadow: var(--cs1-shadow-sm); }
.cs1-shadow-card--md { box-shadow: var(--cs1-shadow-md); }
.cs1-shadow-card--lg { box-shadow: var(--cs1-shadow-lg); }
.cs1-shadow-card--xl { box-shadow: var(--cs1-shadow-xl); }
.cs1-shadow-card--xxl { box-shadow: var(--cs1-shadow-xxl); }

.cs1-shadow-dark {
	margin-top: 22px;
	padding: 18px;
	border-radius: var(--cs1-radius-lg);
	background: #1a2129;
}

.cs1-shadow-dark .cs1-shadow-grid {
	margin-top: 12px;
}

.cs1-shadow-card--on-dark {
	background: #fff;
	color: var(--cs1-text-primary);
	border: 0;
}

.cs1-shadow-card--dark-xs { box-shadow: var(--cs1-shadow-dark-xs); }
.cs1-shadow-card--dark-sm { box-shadow: var(--cs1-shadow-dark-sm); }
.cs1-shadow-card--dark-md { box-shadow: var(--cs1-shadow-dark-md); }
.cs1-shadow-card--dark-lg { box-shadow: var(--cs1-shadow-dark-lg); }
.cs1-shadow-card--dark-xl { box-shadow: var(--cs1-shadow-dark-xl); }
.cs1-shadow-card--dark-xxl { box-shadow: var(--cs1-shadow-dark-xxl); }

/* Icons */
.cs1-icon-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 12px;
}

.cs1-icon-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border-radius: var(--cs1-radius-md);
	border: 1px solid var(--cs1-gray-200);
	background: #fff;
	color: var(--cs1-gray-800);
	transition: transform 0.15s ease, border-color 0.15s ease;
}

.cs1-icon-cell:hover {
	transform: translateY(-2px);
	border-color: var(--cs1-primary-300);
}

.cs1-icon-cell svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cs1-icon-grid--dark {
	padding: 16px;
	border-radius: var(--cs1-radius-lg);
	background: var(--cs1-primary-darker);
}

.cs1-icon-grid--dark .cs1-icon-cell {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* Buttons */
.cs1-btn-rows {
	display: grid;
	gap: 20px;
}

.cs1-btn-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.cs1-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 18px;
	border-radius: var(--cs1-radius-sm);
	border: 1.5px solid transparent;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 22px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
}

.cs1-btn:focus-visible {
	outline: 2px solid var(--cs1-primary-500);
	outline-offset: 2px;
}

.cs1-btn:hover:not(:disabled) {
	transform: translateY(-1px);
}

.cs1-btn:active:not(:disabled) {
	transform: translateY(0);
}

.cs1-btn:disabled,
.cs1-btn.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.cs1-btn--sm {
	min-height: 42px;
	padding: 0 16px;
	font-size: 13px;
	line-height: 20px;
}

.cs1-btn--lg {
	min-height: 56px;
	padding: 0 22px;
	font-size: 15px;
	line-height: 26px;
}

.cs1-btn--primary {
	background: var(--cs1-primary-main);
	color: #fff;
	box-shadow: var(--cs1-shadow-sm);
}

.cs1-btn--primary:hover:not(:disabled) {
	background: var(--cs1-primary-dark);
}

.cs1-btn--secondary {
	background: var(--cs1-secondary-main);
	color: #fff;
	box-shadow: var(--cs1-shadow-sm);
}

.cs1-btn--secondary:hover:not(:disabled) {
	background: var(--cs1-secondary-dark);
}

.cs1-btn--outline {
	background: transparent;
	border-color: var(--cs1-primary-main);
	color: var(--cs1-primary-main);
}

.cs1-btn--outline:hover:not(:disabled) {
	background: var(--cs1-primary-light);
}

.cs1-btn--outline-secondary {
	background: transparent;
	border-color: var(--cs1-secondary-main);
	color: var(--cs1-secondary-dark);
}

.cs1-btn--outline-secondary:hover:not(:disabled) {
	background: var(--cs1-secondary-light);
}

.cs1-btn--ghost {
	background: transparent;
	color: var(--cs1-primary-main);
}

.cs1-btn--ghost:hover:not(:disabled) {
	background: var(--cs1-primary-light);
}

.cs1-btn--rounded {
	border-radius: var(--cs1-radius-pill);
}

.cs1-btn svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Spacing */
.cs1-space-stack {
	display: grid;
	gap: 10px;
}

.cs1-space-item {
	display: grid;
	grid-template-columns: 72px 1fr 64px;
	gap: 12px;
	align-items: center;
}

.cs1-space-bar {
	height: 28px;
	border-radius: 1.2px;
	background: linear-gradient(90deg, var(--cs1-primary-400), var(--cs1-secondary-400));
}

.cs1-space-item code,
.cs1-space-item span {
	font-size: 0.8rem;
	color: var(--cs1-gray-600);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.cs1-note {
	margin-top: 18px;
	padding: 14px 16px;
	border-radius: var(--cs1-radius-md);
	background: var(--cs1-primary-50);
	border: 1px solid var(--cs1-primary-100);
	color: var(--cs1-primary-800);
	font-size: 0.9rem;
}

@keyframes cs1-fade-up {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 640px) {
	.cs1-type-item {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.cs1-wrap {
		width: min(100% - 24px, 1120px);
		padding-top: var(--cs1-space-5);
	}

	.cs1-tabs {
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.cs1-tab {
		flex: 0 0 auto;
	}
}

/* Скрыть артефакты темы на этой странице */
body.page-template-page-color-scheme-1 .site-header,
body.page-template-page-color-scheme-1 .site-footer,
body.page-slug-color-scheme-1 .site-header,
body.page-slug-color-scheme-1 .site-footer {
	display: none !important;
}

body.page-template-page-color-scheme-1,
body.page-slug-color-scheme-1 {
	margin: 0;
	background: var(--cs1-gray-50, #f8fafc);
}