.vp-root {
	--vp-accent: #c8202f;
	--vp-accent-fg: #c8202f;
	--vp-accent-hover: #9d1723;
	--vp-accent-fg-hover: #9d1723;
	--vp-accent-bg: #fdeaec;
	--vp-accent-bg-hover: #ffe9eb;
	--vp-accent-border: #f0c2c6;

	--vp-page: #f4f5f7;
	--vp-zone: #f6f7f9;
	--vp-border: #eceef1;
	--vp-border-2: #e6e8ec;
	--vp-divider: #f2f3f5;

	--vp-text: #21252b;
	--vp-text-2: #5a6270;
	--vp-text-3: #4a5260;
	--vp-text-4: #3c4250;
	--vp-muted: #8b93a1;
	--vp-label: #98a0ad;
	--vp-empty: #6b7280;

	--vp-success: #2fb45f;
	--vp-warn: #f5821f;
	--vp-pending: #a9b0bb;

	--vp-ach-bg: #fdf3e7;
	--vp-ach-text: #8a4f0d;
	--vp-ach-sub: #a97a3c;

	/* Поверхности и «цвета на акценте» вынесены в токены, чтобы тёмная тема
	   переопределялась одним блоком ниже, а не правкой каждого правила. */
	--vp-surface: #fff;
	--vp-surface-2: #fafbfc;
	--vp-field-bg: #fff;
	--vp-on-accent: #fff;
	--vp-btn-white-bg: #fff;
	--vp-btn-white-bg-hover: #ffe9eb;
	--vp-accent-strong: #8f1420;
	--vp-accent-focus: #f0a0a8;
	--vp-row-selected: #fdf7f7;
	--vp-logo-bg: #e3e6ec;
	--vp-logo-bg-2: #cfd4dd;
	--vp-neutral-soft: #dfe2e7;
	--vp-pill-empty-text: #c9ced7;
	--vp-success-bg: #eaf7ef;
	--vp-success-text: #1f8f4a;
	--vp-manual-bg: #fff4e6;
	--vp-manual-text: #c96a12;
	--vp-warn-glow: #fdf0e3;
	--vp-gradient: linear-gradient(115deg, #a5182a 0%, #c62b34 55%, #d9534f 100%);
	--vp-gradient-cta: linear-gradient(140deg, #c62b34, #d9534f);
	--vp-gradient-btn: linear-gradient(100deg, #d9534f, #a5182a);
	--vp-select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235a6270' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

	max-width: 1000px;
	margin: 0 auto;
	padding: 24px 24px 70px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	font-family: Manrope, -apple-system, "Segoe UI", Helvetica, sans-serif;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--vp-text);
	background: var(--vp-page);
	-webkit-font-smoothing: antialiased;
}

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

.vp-root :where(a) { color: var(--vp-accent-fg); text-decoration: none; }
.vp-root :where(a):hover { color: var(--vp-accent-fg-hover); text-decoration: underline; }
.vp-root :where(h1, h2, h3, p) { margin: 0; }
.vp-root button { font-family: inherit; }

.vp-card {
	background: var(--vp-surface);
	border: 1px solid var(--vp-border);
	border-radius: 12px;
	padding: 18px 22px 20px;
}
.vp-card--narrow { padding: 18px 20px 20px; }

.vp-card__title { font-size: 17px; font-weight: 800; margin: 0 0 14px; }
.vp-card__title--sm { font-size: 16px; }
.vp-card__title--tight { margin: 0 0 4px; }
.vp-card__sub { font-size: 12.5px; color: var(--vp-label); margin: 0 0 16px; }
.vp-card__sub--sm { font-size: 12px; margin: 0 0 14px; }
.vp-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}
.vp-card__head .vp-card__title { margin: 0; }
.vp-card__head--tight { margin-bottom: 14px; }

.vp-crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 12.5px;
	color: var(--vp-label);
}

.vp-hero {
	background: var(--vp-gradient);
	border-radius: 12px;
	padding: 26px 30px;
	color: var(--vp-on-accent);
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}
.vp-hero__main { min-width: 220px; flex: 1; }
.vp-hero__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vp-hero h1 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.vp-hero__text {
	margin-top: 8px;
	font-size: 13.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .88);
	max-width: 540px;
}
.vp-root .vp-hero__text a,
.vp-root .vp-hero a.vp-hero__link { color: var(--vp-on-accent); text-decoration: underline; }
.vp-hero__link { font-size: 12.5px; font-weight: 700; }
.vp-hero__aside { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.vp-hero__note { font-size: 12px; color: rgba(255, 255, 255, .8); }
.vp-hero__avatar {
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	border: 2px solid rgba(255, 255, 255, .45);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	font-weight: 800;
	object-fit: cover;
	flex: 0 0 auto;
}
.vp-hero__metrics { display: flex; gap: 26px; flex-wrap: wrap; }
.vp-hero__metric { display: flex; flex-direction: column; gap: 2px; }
.vp-hero__metric b { font-size: 24px; font-weight: 800; }
.vp-hero__metric span { font-size: 12px; color: rgba(255, 255, 255, .8); }

.vp-chip {
	background: rgba(255, 255, 255, .2);
	font-size: 11.5px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: .05em;
	white-space: nowrap;
}

.vp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--vp-accent);
	color: var(--vp-on-accent);
	border: 0;
	border-radius: 9px;
	padding: 10px 18px;
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}
.vp-btn:hover { background: var(--vp-accent-hover); color: var(--vp-on-accent); text-decoration: none; }
.vp-btn--sm { padding: 8px 15px; font-size: 12.5px; border-radius: 8px; }
.vp-btn--white { background: var(--vp-btn-white-bg); color: var(--vp-accent); padding: 11px 22px; font-size: 14px; }
.vp-btn--white:hover { background: var(--vp-btn-white-bg-hover); color: var(--vp-accent); }
.vp-btn--subscribed {
	background: var(--vp-surface);
	color: var(--vp-accent-fg);
	border: 1px solid var(--vp-accent-border);
}
.vp-btn--subscribed:hover { background: var(--vp-accent-bg); color: var(--vp-accent-fg); }
.vp-root a.vp-btn { color: var(--vp-on-accent); }
.vp-root a.vp-btn:hover { color: var(--vp-on-accent); text-decoration: none; }
.vp-root a.vp-btn--white { color: var(--vp-accent); }
.vp-root a.vp-btn--white:hover { color: var(--vp-accent); }

.vp-kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
}
.vp-kpi { background: var(--vp-surface); border: 1px solid var(--vp-border); border-radius: 12px; padding: 16px 18px; }
.vp-kpi__label {
	font-size: 11.5px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--vp-label);
	font-weight: 700;
}
.vp-kpi__row { margin-top: 9px; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.vp-kpi__val { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.vp-kpi__note { font-size: 12.5px; color: var(--vp-muted); }

/* Нет выборки: вместо числа прочерк и пояснение. Строка значения по умолчанию
   nowrap — это правильно для «12%» с дельтой, но пояснение так вылезает
   за карточку, поэтому в этом состоянии раскладываем в колонку. */
.vp-kpi__row--empty { flex-direction: column; align-items: flex-start; gap: 2px; white-space: normal; }
.vp-kpi__row--empty .vp-kpi__val { font-size: 22px; line-height: 1.1; }
.vp-kpi__row--empty .vp-kpi__note { font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }

.vp-neg { color: var(--vp-accent-fg); }
.vp-pos { color: var(--vp-success); }

.vp-cols {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}
.vp-col { display: flex; flex-direction: column; gap: 18px; }

.vp-segments {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--vp-page);
	border: 1px solid var(--vp-border-2);
	border-radius: 8px;
	padding: 3px;
	flex-wrap: wrap;
}
.vp-segments--lg { background: var(--vp-surface); border-radius: 9px; padding: 4px; }
.vp-segment {
	padding: 5px 11px;
	font-size: 12px;
	color: var(--vp-text-2);
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}
.vp-segment:hover { background: var(--vp-border); color: var(--vp-text); text-decoration: none; }
.vp-segment.is-active { color: var(--vp-accent-fg); background: var(--vp-accent-bg); font-weight: 700; }
.vp-segments--lg .vp-segment { padding: 7px 14px; font-size: 13px; }
.vp-segments--lg .vp-segment:hover { background: var(--vp-page); }
.vp-root a.vp-segment { color: var(--vp-text-2); }
.vp-root a.vp-segment.is-active { color: var(--vp-accent-fg); }

.vp-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}
.vp-toolbar__note { font-size: 12.5px; color: var(--vp-muted); }

.vp-feed { display: flex; flex-direction: column; gap: 10px; }
.vp-pick {
	border: 1px solid var(--vp-border);
	border-radius: 10px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.vp-pick:hover { border-color: var(--vp-accent-border); }
.vp-pick__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vp-pick__match { display: flex; align-items: center; gap: 9px; min-width: 0; }
.vp-pick__emblems { display: flex; flex: 0 0 auto; }
.vp-pick__emblems span {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--vp-logo-bg);
	border: 1.5px solid var(--vp-surface);
}
.vp-pick__emblems span + span { background: var(--vp-logo-bg-2); margin-left: -7px; }
.vp-root .vp-pick__name { font-size: 14px; font-weight: 700; color: var(--vp-text); overflow-wrap: anywhere; }
.vp-root .vp-pick__name:hover { color: var(--vp-accent-fg); }
.vp-pick__odds {
	background: var(--vp-accent);
	color: var(--vp-on-accent);
	font-size: 12.5px;
	font-weight: 800;
	padding: 4px 11px;
	border-radius: 999px;
	white-space: nowrap;
}
.vp-pick__tip { font-size: 13px; color: var(--vp-text-4); overflow-wrap: anywhere; }
.vp-pick__comment { font-size: 12.5px; color: var(--vp-muted); font-style: italic; }
.vp-pick__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.vp-pick__foot--divided { padding-top: 8px; border-top: 1px solid var(--vp-divider); }
.vp-pick__stamp { font-size: 12px; color: var(--vp-label); }

.vp-badge {
	font-size: 12px;
	font-weight: 700;
	padding: 4px 11px;
	border-radius: 999px;
	color: var(--vp-on-accent);
	display: inline-block;
	white-space: nowrap;
	background: var(--vp-pending);
}
.vp-badge--win { background: var(--vp-success); }
.vp-badge--lose { background: var(--vp-accent); }
.vp-badge--warn { background: var(--vp-warn); }
.vp-badge--muted { background: var(--vp-muted); }

.vp-table__head,
.vp-table__row { display: grid; grid-template-columns: var(--vp-cols); }
.vp-table__head {
	font-size: 12px;
	color: var(--vp-label);
	padding: 0 12px 10px;
	border-bottom: 1px solid var(--vp-border);
}
.vp-table__row {
	align-items: center;
	font-size: 13px;
	padding: 11px 12px;
	background: var(--vp-zone);
	border-radius: 8px;
	margin-top: 8px;
}
.vp-table--months {
	--vp-cols: minmax(70px, 1fr) minmax(0, 70px) minmax(0, 74px) minmax(0, 46px) minmax(0, 34px) minmax(0, 34px) minmax(0, 34px);
}
.vp-table--summary {
	--vp-cols: minmax(150px, 1.4fr) minmax(0, 70px) minmax(0, 96px) minmax(0, 76px) minmax(0, 84px) minmax(0, 90px);
}
.vp-table--summary .vp-table__head { font-size: 12.5px; padding: 0 14px 10px; }
.vp-table--summary .vp-table__row { font-size: 13.5px; padding: 13px 14px; }
.vp-table__period { font-weight: 600; }
.vp-table__val { color: var(--vp-text-3); }

.vp-stats { display: flex; flex-direction: column; gap: 8px; }
.vp-stat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: var(--vp-zone);
	border-radius: 9px;
	padding: 11px 14px;
}
.vp-stat__label { font-size: 12.5px; color: var(--vp-text-2); font-weight: 600; }
.vp-stat__val { font-size: 17px; font-weight: 800; }

.vp-outcomes {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	height: 140px;
	border-bottom: 1px solid var(--vp-border);
	padding: 0 6px;
}
.vp-outcome {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	gap: 6px;
}
.vp-outcome__num { font-size: 12px; font-weight: 800; }
.vp-outcome__bar { width: 100%; border-radius: 6px 6px 0 0; }
.vp-outcome__bar--win { background: var(--vp-success); }
.vp-outcome__bar--lose { background: var(--vp-accent); }
.vp-outcome__bar--draw { background: var(--vp-warn); }
.vp-outcome__bar--empty { background: var(--vp-neutral-soft); height: 2px; }
.vp-outcome--win .vp-outcome__num { color: var(--vp-success); }
.vp-outcome--lose .vp-outcome__num { color: var(--vp-accent-fg); }
.vp-outcome--draw .vp-outcome__num { color: var(--vp-label); }
.vp-outcomes__legend {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	padding: 9px 6px 0;
	font-size: 11.5px;
	color: var(--vp-label);
	text-align: center;
}

.vp-chart { display: flex; gap: 10px; }
.vp-chart__axis {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-size: 11px;
	color: var(--vp-label);
	text-align: right;
	width: 42px;
	flex: 0 0 auto;
}
.vp-chart__plot { flex: 1; min-width: 0; }
.vp-chart__plot svg { width: 100%; height: 100%; display: block; }
.vp-chart--h200 .vp-chart__axis, .vp-chart--h200 .vp-chart__plot { height: 200px; }
.vp-chart--h220 .vp-chart__axis, .vp-chart--h220 .vp-chart__plot { height: 220px; }
.vp-chart__legend {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin-left: 52px;
	padding-top: 9px;
	font-size: 11.5px;
	color: var(--vp-label);
}
.vp-spark { height: 56px; }
.vp-spark svg { width: 100%; height: 100%; display: block; }

.vp-channels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
	align-items: start;
}
.vp-channel {
	background: var(--vp-surface);
	border: 1px solid var(--vp-border);
	border-radius: 12px;
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.vp-channel:hover { border-color: var(--vp-accent-border); }
.vp-channel__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vp-root .vp-channel__name { font-size: 17px; font-weight: 800; color: var(--vp-text); overflow-wrap: anywhere; }
.vp-root .vp-channel__name:hover { color: var(--vp-accent-fg); }
.vp-channel__meta { margin-top: 5px; font-size: 12.5px; color: var(--vp-label); }
.vp-channel__roi {
	background: var(--vp-accent);
	color: var(--vp-on-accent);
	font-size: 12.5px;
	font-weight: 800;
	padding: 5px 12px;
	border-radius: 999px;
	white-space: nowrap;
}
.vp-channel__roi--pos { background: var(--vp-success); }
.vp-channel__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vp-metric { background: var(--vp-zone); border-radius: 9px; padding: 11px 12px; }
.vp-metric__label { font-size: 11px; color: var(--vp-muted); font-weight: 600; }
.vp-metric__val { margin-top: 4px; font-size: 17px; font-weight: 800; }
.vp-channel__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 12px;
	border-top: 1px solid var(--vp-divider);
	flex-wrap: wrap;
}
.vp-channel__last { margin-left: auto; font-size: 12px; color: var(--vp-label); }

.vp-cta {
	background: var(--vp-gradient-cta);
	border-radius: 12px;
	padding: 20px;
	color: var(--vp-on-accent);
}
.vp-cta h2 { font-size: 16px; font-weight: 800; margin: 0 0 8px; }
.vp-cta p { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .9); margin: 0 0 14px; }

.vp-author { display: flex; align-items: center; gap: 12px; }
.vp-author__pic {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--vp-accent-bg);
	color: var(--vp-accent-fg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 800;
	object-fit: cover;
	flex: 0 0 auto;
}
.vp-root .vp-author__name { font-size: 15px; font-weight: 800; color: var(--vp-text); }
.vp-root .vp-author__name:hover { color: var(--vp-accent-fg); }
.vp-author__meta { font-size: 12px; color: var(--vp-label); }
.vp-author__link { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; }

.vp-ach { display: flex; flex-direction: column; gap: 8px; }
.vp-ach__item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--vp-ach-bg);
	border-radius: 9px;
	padding: 12px 14px;
}
.vp-ach__num {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--vp-warn);
	color: var(--vp-on-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 800;
	flex: 0 0 auto;
}
.vp-ach__name { display: block; font-size: 13px; font-weight: 700; color: var(--vp-ach-text); }
.vp-ach__sub { display: block; font-size: 12px; color: var(--vp-ach-sub); }
.vp-ach__body { flex: 1; min-width: 0; }
.vp-ach__side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; flex: 0 0 auto; max-width: 46%; }
.vp-ach__reward { font-size: 12px; font-weight: 700; color: var(--vp-ach-text); }
.vp-ach__state { font-size: 11.5px; color: var(--vp-ach-sub); }
.vp-ach__total { margin: 14px 0 0; }
.vp-section-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; margin: 6px 0 -6px; }

/* Недостигнутый уровень на странице условий достижений */

/* Недостигнутый уровень на странице условий достижений */
.vp-ach__item--todo { background: var(--vp-zone); }
.vp-ach__item--todo .vp-ach__num { background: var(--vp-pending); }
.vp-ach__item--todo .vp-ach__name { color: var(--vp-text-4); }
.vp-ach__item--todo .vp-ach__sub { color: var(--vp-muted); }

.vp-list {
	margin: 0;
	padding-left: 18px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--vp-text-4);
}
.vp-list li::marker { color: var(--vp-muted); }

.vp-empty {
	background: var(--vp-zone);
	border-radius: 8px;
	padding: 14px 12px;
	font-size: 13.5px;
	color: var(--vp-empty);
}

@media (max-width: 900px) {
	.vp-cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
	.vp-root { padding: 16px 14px 50px; }
	.vp-hero { padding: 20px; }
	.vp-hero h1 { font-size: 22px; }
	.vp-card { padding: 16px; }
	.vp-kpi__val { font-size: 22px; }
	.vp-table--months { --vp-cols: minmax(58px, 1fr) minmax(0, 58px) minmax(0, 62px) minmax(0, 38px) minmax(0, 28px) minmax(0, 28px) minmax(0, 28px); }
	.vp-table--summary { --vp-cols: minmax(110px, 1.4fr) minmax(0, 54px) minmax(0, 76px) minmax(0, 62px) minmax(0, 68px) minmax(0, 70px); }
}

.vp-match { overflow: hidden; padding: 0; }
.vp-match__status {
	background: var(--vp-gradient);
	padding: 20px 26px;
	color: var(--vp-on-accent);
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
}
.vp-match__status-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vp-match__badge {
	background: rgba(255, 255, 255, .2);
	font-size: 11px;
	font-weight: 800;
	padding: 4px 9px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: .05em;
	white-space: nowrap;
}
.vp-match__tournament { font-size: 12.5px; color: rgba(255, 255, 255, .9); }
.vp-match__when { font-size: 12.5px; color: rgba(255, 255, 255, .85); }

.vp-match__teams {
	padding: 26px 26px 22px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 18px;
}
.vp-match__team { display: flex; align-items: center; gap: 14px; min-width: 0; }
.vp-match__team--away { justify-content: flex-end; text-align: right; }
.vp-match__logo {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--vp-logo-bg);
	object-fit: contain;
	flex: 0 0 52px;
}
.vp-match__logo--away { background: var(--vp-logo-bg-2); }
.vp-match__team-name { font-size: 19px; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.vp-match__team-note { font-size: 12px; color: var(--vp-label); }
.vp-match__score { text-align: center; }
.vp-match__score b { font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1; display: block; }
.vp-match__score span { font-size: 11.5px; color: var(--vp-label); margin-top: 6px; display: block; }

.vp-match__odds {
	border-top: 1px solid var(--vp-divider);
	padding: 14px 26px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 12px;
}
.vp-odd {
	background: var(--vp-zone);
	border: 1px solid var(--vp-border);
	border-radius: 9px;
	padding: 10px 14px;
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: center;
}
.vp-odd__label { font-size: 12px; color: var(--vp-text-2); font-weight: 700; }
.vp-odd__value { font-size: 14px; font-weight: 800; }

.vp-pickcard {
	border: 1px solid var(--vp-border);
	border-radius: 10px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.vp-pickcard:hover { border-color: var(--vp-accent-border); }
.vp-pickcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vp-pickcard__author { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vp-avatar {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	border-radius: 50%;
	background: var(--vp-accent-bg);
	color: var(--vp-accent-fg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 800;
	object-fit: cover;
}
.vp-avatar--lg { width: 40px; height: 40px; flex-basis: 40px; font-size: 16px; }
.vp-root a.vp-pickcard__name { display: block; font-size: 14px; font-weight: 800; color: var(--vp-text); }
.vp-root a.vp-pickcard__name:hover { color: var(--vp-accent-fg); }
.vp-root a.vp-pickcard__list { display: block; font-size: 12px; color: var(--vp-label); }
.vp-root a.vp-pickcard__list:hover { color: var(--vp-accent-fg); }
.vp-pickcard__right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.vp-tag {
	font-size: 11px;
	font-weight: 800;
	padding: 4px 9px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: var(--vp-divider);
	color: var(--vp-muted);
	white-space: nowrap;
}
.vp-tag--sub { background: var(--vp-accent-bg); color: var(--vp-accent-fg); }
.vp-tag--verified { background: var(--vp-success-bg); color: var(--vp-success-text); }
.vp-pickcard__odds {
	background: var(--vp-accent);
	color: var(--vp-on-accent);
	font-size: 12.5px;
	font-weight: 800;
	padding: 4px 11px;
	border-radius: 999px;
	white-space: nowrap;
}
.vp-pickcard__bet {
	background: var(--vp-zone);
	border-radius: 9px;
	padding: 11px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.vp-pickcard__bet-label {
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--vp-label);
	font-weight: 700;
}
.vp-root a.vp-pickcard__bet-value { font-size: 14px; font-weight: 800; color: var(--vp-text); overflow-wrap: anywhere; }
.vp-root a.vp-pickcard__bet-value:hover { color: var(--vp-accent-fg); }
.vp-pickcard__bank { margin-left: auto; font-size: 12px; color: var(--vp-muted); }
.vp-pickcard__comment { font-size: 13px; line-height: 1.55; color: var(--vp-text-4); overflow-wrap: anywhere; }
.vp-pickcard__foot {
	padding-top: 9px;
	border-top: 1px solid var(--vp-divider);
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}
.vp-pickcard__meta { font-size: 12px; color: var(--vp-label); }
.vp-pickcard__actions { display: flex; align-items: center; gap: 10px; }

.vp-consensus__row + .vp-consensus__row { margin-top: 14px; }
.vp-consensus__head { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; flex-wrap: wrap; }
.vp-consensus__label { font-weight: 700; color: var(--vp-text-4); }
.vp-consensus__note { color: var(--vp-muted); }
.vp-consensus__track {
	margin-top: 7px;
	height: 9px;
	background: var(--vp-divider);
	border-radius: 999px;
	overflow: hidden;
}
.vp-consensus__fill { height: 100%; border-radius: 999px; background: var(--vp-accent); }

.vp-table--h2h { --vp-cols: minmax(80px, 110px) minmax(0, 1fr) minmax(0, 60px); }
.vp-table--h2h .vp-table__row { gap: 8px; }
.vp-h2h__league { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-h2h__score { font-weight: 800; text-align: right; }

.vp-form__team + .vp-form__team { margin-top: 16px; }
.vp-form__head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vp-form__name { font-size: 13.5px; font-weight: 800; }
.vp-form__note { font-size: 12px; color: var(--vp-label); }
.vp-form__row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.vp-form__box {
	width: 26px;
	height: 26px;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 800;
	color: var(--vp-on-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--vp-pending);
}
.vp-form__box--win { background: var(--vp-success); }
.vp-form__box--lose { background: var(--vp-accent); }

.vp-stat-row + .vp-stat-row { margin-top: 14px; }
.vp-stat-row__head { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; align-items: center; }
.vp-stat-row__head b { font-weight: 800; }
.vp-stat-row__title { color: var(--vp-label); }
.vp-stat-row__bar { display: flex; gap: 4px; margin-top: 6px; height: 7px; }
.vp-stat-row__bar span { border-radius: 999px; }
.vp-stat-row__bar .home { background: var(--vp-accent); }
.vp-stat-row__bar .away { background: var(--vp-neutral-soft); }

.vp-linklist { display: flex; flex-direction: column; gap: 8px; }
.vp-root a.vp-linkrow {
	background: var(--vp-zone);
	border-radius: 9px;
	padding: 11px 13px;
	display: flex;
	justify-content: space-between;
	gap: 10px;
	color: var(--vp-text);
	text-decoration: none;
}
.vp-root a.vp-linkrow:hover { background: var(--vp-accent-bg); color: var(--vp-text); text-decoration: none; }
.vp-linkrow__name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-linkrow__time { font-size: 12px; color: var(--vp-label); white-space: nowrap; }
.vp-linkrow__sub { font-size: 12px; color: var(--vp-muted); }
.vp-linkrow__col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vp-linkrow__top { display: flex; justify-content: space-between; gap: 10px; }
.vp-linkrow__odds { font-size: 12.5px; font-weight: 800; color: var(--vp-accent-fg); white-space: nowrap; }

.vp-pickpage__badge {
	font-size: 12px;
	font-weight: 800;
	padding: 6px 13px;
	border-radius: 999px;
	color: var(--vp-on-accent);
	background: var(--vp-warn);
	white-space: nowrap;
}
.vp-pickpage__badge--win { background: var(--vp-success); }
.vp-pickpage__badge--lose { background: var(--vp-accent); }
.vp-pickpage__badge--return { background: var(--vp-pending); }

.vp-pickpage__match {
	background: var(--vp-zone);
	border: 1px solid var(--vp-border);
	border-radius: 11px;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.vp-pickpage__logos { display: flex; flex: 0 0 auto; }
.vp-pickpage__logos span, .vp-pickpage__logos img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--vp-logo-bg);
	border: 2px solid var(--vp-surface);
	object-fit: contain;
}
.vp-pickpage__logos > :nth-child(2) { background: var(--vp-logo-bg-2); margin-left: -11px; }
.vp-pickpage__main { flex: 1; min-width: 0; }
.vp-root a.vp-pickpage__name { font-size: 16px; font-weight: 800; color: var(--vp-text); overflow-wrap: anywhere; }
.vp-root a.vp-pickpage__name:hover { color: var(--vp-accent-fg); }
.vp-pickpage__note { font-size: 12px; color: var(--vp-label); margin-top: 3px; }
.vp-pickpage__score { text-align: right; }
.vp-pickpage__score b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.vp-pickpage__score span { display: block; font-size: 11.5px; color: var(--vp-accent-fg); font-weight: 700; }

.vp-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vp-term { background: var(--vp-surface); border: 1px solid var(--vp-border); border-radius: 11px; padding: 14px 16px; }
.vp-term__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--vp-label);
	font-weight: 700;
}
.vp-term__value { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin-top: 7px; overflow-wrap: anywhere; }
.vp-term__note { font-size: 11.5px; color: var(--vp-muted); margin-top: 3px; }

.vp-pickpage__section-title { font-size: 14px; font-weight: 800; margin-bottom: 8px; }
.vp-pickpage__text { font-size: 14px; line-height: 1.65; color: var(--vp-text-4); overflow-wrap: anywhere; }

.vp-timeline__step { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; }
.vp-timeline__rail { display: flex; flex-direction: column; align-items: center; }
.vp-timeline__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--vp-surface);
	border: 2px solid var(--vp-neutral-soft);
	box-sizing: border-box;
	flex: 0 0 auto;
}
.vp-timeline__dot--done { background: var(--vp-accent); border-color: var(--vp-accent); }
.vp-timeline__dot--active { background: var(--vp-warn); border-color: var(--vp-warn); box-shadow: 0 0 0 4px var(--vp-warn-glow); }
.vp-timeline__line { flex: 1; width: 2px; margin: 4px 0; background: var(--vp-border); }
.vp-timeline__line--done { background: var(--vp-accent-border); }
.vp-timeline__body { padding-bottom: 16px; }
.vp-timeline__title { font-size: 13.5px; font-weight: 700; }
.vp-timeline__title--future { color: var(--vp-label); }
.vp-timeline__note { font-size: 12.5px; color: var(--vp-muted); margin-top: 3px; }

.vp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.vp-tile { background: var(--vp-zone); border-radius: 9px; padding: 14px; }
.vp-tile__label { font-size: 11.5px; color: var(--vp-muted); font-weight: 600; }
.vp-tile__val { margin-top: 6px; font-size: 22px; font-weight: 800; }

.vp-tiles--pick { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.vp-tile--pick { padding: 13px 15px; }
.vp-tile--pick .vp-tile__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--vp-label);
	font-weight: 700;
}
.vp-tile--pick .vp-tile__val { font-size: 19px; margin-top: 7px; }

.vp-bank__value { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.vp-bank__label { font-size: 13px; font-weight: 700; color: var(--vp-muted); margin-bottom: 12px; }
.vp-bank__row {
	background: var(--vp-zone);
	border-radius: 9px;
	padding: 12px 14px;
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: center;
}
.vp-bank__row + .vp-bank__row { margin-top: 8px; }
.vp-bank__row span { font-size: 12.5px; color: var(--vp-text-2); font-weight: 600; }
.vp-bank__row b { font-size: 15px; font-weight: 800; }

@media (max-width: 620px) {
	.vp-match__teams { grid-template-columns: minmax(0, 1fr); gap: 12px; text-align: center; }
	.vp-match__team, .vp-match__team--away { justify-content: center; text-align: center; }
	.vp-match__odds { padding: 14px 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vp-terms { grid-template-columns: minmax(0, 1fr); }
	.vp-table--h2h { --vp-cols: minmax(70px, 90px) minmax(0, 1fr) minmax(0, 52px); }
}

.vp-actions-bar {
	border-top: 1px solid var(--vp-divider);
	margin: 16px -22px -20px;
	padding: 13px 22px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.vp-action-btn {
	background: var(--vp-surface);
	border: 1px solid var(--vp-border-2);
	border-radius: 9px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 700;
	color: var(--vp-text-4);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.vp-action-btn:hover { border-color: var(--vp-accent-border); color: var(--vp-accent); }
.vp-action-btn.is-active { background: var(--vp-accent-bg); border-color: var(--vp-accent-border); color: var(--vp-accent); }
.vp-actions-bar__meta { margin-left: auto; font-size: 12px; color: var(--vp-label); }

@media (max-width: 620px) {
	.vp-ach__item { flex-wrap: wrap; }
	.vp-ach__side { align-items: flex-start; text-align: left; max-width: 100%; width: 100%; padding-left: 46px; }
	.vp-actions-bar { margin: 16px -16px -16px; padding: 12px 16px; }
	.vp-actions-bar__meta { margin-left: 0; width: 100%; }
}

/* Источник результата: проверяем мы или отмечает автор */
.vp-tag--manual { background: var(--vp-manual-bg); color: var(--vp-manual-text); }
.vp-settle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--vp-border);
}
.vp-settle__label { font-size: 13px; font-weight: 700; color: var(--vp-text-2); }
.vp-settle__error { font-size: 13px; color: var(--vp-accent-fg); width: 100%; }

/* ============================================================
   Публикация прогноза на матч: форма и линия букмекеров
   ============================================================ */

.vp-betform .vp-match__vs b { font-size: 13px; letter-spacing: .05em; color: var(--vp-label); }
.vp-betform .vp-match__countdown { font-weight: 700; }

/* Быстрые коэффициенты в шапке кликабельны и умеют быть выбранными */
.vp-root button.vp-odd {
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.vp-odd__row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.vp-odd__book { font-size: 11px; color: var(--vp-muted); }
.vp-root button.vp-odd:hover { border-color: var(--vp-accent-border); background: var(--vp-accent-bg); }
.vp-root button.vp-odd.is-active { background: var(--vp-accent); border-color: var(--vp-accent); color: var(--vp-on-accent); }
.vp-root button.vp-odd.is-active .vp-odd__label,
.vp-root button.vp-odd.is-active .vp-odd__book { color: rgba(255, 255, 255, .85); }

/* Форма */
.vp-form { display: flex; flex-direction: column; gap: 20px; padding: 20px 24px 22px; }
.vp-form__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vp-form__title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }

.vp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vp-field__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.vp-field__label { font-size: 12.5px; font-weight: 700; color: var(--vp-text-4); }
.vp-field__hint { font-size: 12px; color: var(--vp-label); }
.vp-field__hint b { color: var(--vp-text-4); }
.vp-field__counter { font-size: 12px; color: var(--vp-label); }
.vp-field__error { display: none; font-size: 12px; color: var(--vp-accent-fg); }
.vp-field.is-invalid .vp-field__error { display: block; }

.vp-root .vp-select,
.vp-root .vp-input,
.vp-root .vp-textarea {
	width: 100%;
	height: auto;
	margin: 0;
	border: 1px solid var(--vp-border-2);
	border-radius: 9px;
	padding: 11px 13px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--vp-text);
	background: var(--vp-field-bg);
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.vp-root .vp-select { appearance: none; cursor: pointer; padding-right: 34px;
	background-image: var(--vp-select-arrow);
	background-repeat: no-repeat; background-position: right 13px center; }
.vp-root .vp-input { font-size: 15px; font-weight: 700; }
.vp-root .vp-input--readonly { background: var(--vp-zone); border-color: var(--vp-border); }
.vp-root .vp-input--accent { color: var(--vp-accent-fg); }
.vp-root .vp-textarea { font-size: 13.5px; font-weight: 400; line-height: 1.6; border-radius: 10px; padding: 12px 13px; resize: vertical; }
.vp-root .vp-select:focus,
.vp-root .vp-input:focus,
.vp-root .vp-textarea:focus { outline: none; border-color: var(--vp-accent-focus); box-shadow: 0 0 0 3px var(--vp-accent-bg); }
.vp-field.is-invalid .vp-input,
.vp-field.is-invalid .vp-select { border-color: var(--vp-accent-fg); }

.vp-grid { display: grid; gap: 14px; }
.vp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.vp-quick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: -10px; }
.vp-quick__label { font-size: 12px; color: var(--vp-label); }
.vp-root .vp-quick__btn {
	border: 1px solid var(--vp-border-2);
	border-radius: 8px;
	background: var(--vp-surface);
	padding: 6px 12px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--vp-text-4);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.vp-root .vp-quick__btn:hover { border-color: var(--vp-accent-border); color: var(--vp-accent); }
.vp-root .vp-quick__btn.is-active { border-color: var(--vp-accent-fg); background: var(--vp-accent-bg); color: var(--vp-accent); }

/* Линия букмекеров */
.vp-line { border: 1px solid var(--vp-border); border-radius: 11px; overflow: hidden; }
.vp-line__head {
	padding: 12px 16px;
	border-bottom: 1px solid var(--vp-divider);
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.vp-line__title { font-size: 12.5px; font-weight: 700; color: var(--vp-text-4); }
.vp-line__hint { font-size: 12px; color: var(--vp-label); }
.vp-line__loading,
.vp-line__empty { padding: 26px 16px; text-align: center; font-size: 13px; color: var(--vp-label); }

.vp-line__scroll { overflow-x: auto; overflow-y: hidden; }
.vp-line__table { min-width: 100%; }
.vp-line__row { display: grid; align-items: center; background: var(--vp-surface); border-bottom: 1px solid var(--vp-zone); }
.vp-line__row:last-child { border-bottom: 0; }
.vp-line__row--head {
	background: var(--vp-surface-2);
	border-bottom: 1px solid var(--vp-divider);
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--vp-label);
	font-weight: 700;
}
.vp-line__row.is-selected { background: var(--vp-row-selected); }

.vp-line__book {
	position: sticky;
	left: 0;
	z-index: 2;
	background: inherit;
	padding: 8px 14px 8px 16px;
	font-size: 13px;
	font-weight: 700;
	color: var(--vp-text-4);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.vp-line__book--head { background: var(--vp-surface-2); padding: 10px 14px 10px 16px; font-size: inherit; font-weight: 700; color: inherit; }
.vp-line__th { text-align: center; padding: 10px 6px; white-space: nowrap; }
.vp-line__cell { display: flex; justify-content: center; padding: 8px 6px; }

.vp-root .vp-odd-pill {
	min-width: 62px;
	border: 1px solid var(--vp-accent-border);
	border-radius: 999px;
	background: var(--vp-accent-bg);
	color: var(--vp-accent-fg);
	padding: 6px 12px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 800;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.vp-root .vp-odd-pill:hover { background: var(--vp-accent-bg-hover); }
.vp-root .vp-odd-pill.is-active { background: var(--vp-accent-strong); border-color: var(--vp-accent-strong); color: var(--vp-on-accent); }
.vp-root .vp-odd-pill--empty,
.vp-root .vp-odd-pill--empty:hover { border: 1px dashed var(--vp-border); background: transparent; color: var(--vp-pill-empty-text); cursor: default; }

/* Итого и сообщения формы */
.vp-total { background: var(--vp-zone); border: 1px solid var(--vp-border); border-radius: 11px; padding: 15px 17px; }
.vp-total__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--vp-label); margin-bottom: 8px; }
.vp-total__text { font-size: 13.5px; line-height: 1.6; color: var(--vp-text-4); }

.vp-form__message { display: none; font-size: 13px; border-radius: 9px; padding: 11px 14px; }
.vp-form__message.is-error { display: block; background: var(--vp-accent-bg); color: var(--vp-accent-fg); }
.vp-form__message.is-ok { display: block; background: var(--vp-success-bg); color: var(--vp-success-text); }

.vp-form__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.vp-root .vp-btn--lg { padding: 14px 20px; font-size: 14.5px; border-radius: 10px; }
.vp-root .vp-form__actions .vp-btn--lg:first-child { flex: 1; min-width: 180px; background: var(--vp-gradient-btn); }
.vp-root .vp-btn--lg:hover { filter: brightness(.94); }
.vp-root .vp-btn[disabled] { opacity: .5; cursor: not-allowed; filter: none; }
.vp-form__note { margin: -8px 0 0; font-size: 12px; color: var(--vp-label); }

/* Правая колонка */
.vp-calc { display: flex; flex-direction: column; gap: 8px; }
.vp-calc__row {
	background: var(--vp-zone);
	border-radius: 9px;
	padding: 11px 14px;
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: baseline;
}
.vp-calc__row span { font-size: 12.5px; font-weight: 600; color: var(--vp-text-2); }
.vp-calc__row b { font-size: 15px; font-weight: 800; white-space: nowrap; }
.vp-calc__range { font-size: 13px !important; color: var(--vp-text-2); }

.vp-steps { display: flex; flex-direction: column; gap: 11px; }
.vp-steps__item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 11px; align-items: start; font-size: 12.5px; line-height: 1.55; color: var(--vp-text-4); }
.vp-steps__num {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--vp-success-bg);
	color: var(--vp-success-text);
	font-size: 11px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 900px) {
	.vp-grid--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.vp-grid--2 { grid-template-columns: minmax(0, 1fr); }
	.vp-quick { margin-top: 0; }
	.vp-root .vp-odd-pill { min-height: 44px; }
}

/* Страница оплаты подписки */
.vp-checkout { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--vp-divider); }
.vp-checkout form { margin: 0; }
.vp-checkout input[type="submit"],
.vp-checkout button[type="submit"] {
	background: var(--vp-accent);
	color: var(--vp-on-accent);
	border: 0;
	border-radius: 10px;
	padding: 14px 20px;
	font: inherit;
	font-size: 14.5px;
	font-weight: 800;
	cursor: pointer;
}
.vp-checkout input[type="submit"]:hover,
.vp-checkout button[type="submit"]:hover { filter: brightness(.94); }
.vp-root .vp-kpi__val--empty { color: var(--vp-muted); }

/* Комментарий обязателен: пока не набрано, счётчик подсвечен */
.vp-field__req { font-weight: 700; color: var(--vp-accent-fg); text-transform: none; }
.vp-field__counter.is-short { color: var(--vp-accent-fg); font-weight: 700; }

/* ------------------------------------------------------------------
   Тёмная тема. Атрибут data-theme="dark" ставит переключатель в шапке
   (themes/default/header.html) и раннее восстановление выбора в index.html.
   Меняем только токены: сами правила выше уже написаны через var().
   ------------------------------------------------------------------ */
[data-theme="dark"] .vp-root {
	--vp-accent: #d32f3b;
	--vp-accent-fg: #ff6b74;
	--vp-accent-hover: #b81b28;
	--vp-accent-fg-hover: #ff8f8f;
	--vp-accent-bg: rgba(232, 67, 78, .16);
	--vp-accent-bg-hover: rgba(232, 67, 78, .26);
	--vp-accent-border: rgba(232, 67, 78, .42);
	--vp-accent-strong: #ff6b74;
	--vp-accent-focus: rgba(232, 67, 78, .55);

	--vp-page: #0b0e14;
	--vp-surface: #141922;
	--vp-surface-2: #1a202b;
	--vp-field-bg: #11161f;
	--vp-zone: #10151d;
	--vp-border: rgba(255, 255, 255, .09);
	--vp-border-2: rgba(255, 255, 255, .14);
	--vp-divider: rgba(255, 255, 255, .07);

	--vp-text: #f1f5f9;
	--vp-text-2: #a7b0be;
	--vp-text-3: #b4bdca;
	--vp-text-4: #c3cbd7;
	--vp-muted: #8a93a3;
	--vp-label: #7b8494;
	--vp-empty: #98a1b0;

	--vp-success: #3ecf7a;
	--vp-success-bg: rgba(47, 180, 95, .18);
	--vp-success-text: #6fe0a0;
	--vp-warn: #f5a04a;
	--vp-warn-glow: rgba(245, 130, 31, .24);
	--vp-manual-bg: rgba(245, 130, 31, .18);
	--vp-manual-text: #f7b273;
	--vp-pending: #6b7480;

	--vp-ach-bg: rgba(245, 168, 60, .12);
	--vp-ach-text: #f0c58a;
	--vp-ach-sub: #c2a077;

	--vp-logo-bg: rgba(255, 255, 255, .12);
	--vp-logo-bg-2: rgba(255, 255, 255, .18);
	--vp-neutral-soft: rgba(255, 255, 255, .16);
	--vp-row-selected: rgba(232, 67, 78, .12);
	--vp-pill-empty-text: #4d5666;

	/* Белая кнопка живёт на красном градиенте — остаётся белой и в тёмной теме */
	--vp-btn-white-bg: #fff;
	--vp-btn-white-bg-hover: #ffe9eb;

	--vp-gradient: linear-gradient(115deg, #7d1220 0%, #a5182a 55%, #c62b34 100%);
	--vp-gradient-cta: linear-gradient(140deg, #8f1420, #b8242e);
	--vp-gradient-btn: linear-gradient(100deg, #c62b34, #7d1220);
	--vp-select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23a7b0be' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Плейсхолдеры и автозаполнение полей */
.vp-root ::placeholder { color: var(--vp-label); opacity: 1; }
[data-theme="dark"] .vp-root option { background: var(--vp-field-bg); color: var(--vp-text); }

/* График построен инлайновыми SVG-атрибутами — перебиваем их через CSS,
   иначе линия и сетка останутся светлыми (CSS сильнее presentation attribute). */
.vp-chart__grid { stroke: var(--vp-border); }
.vp-chart__area { fill: var(--vp-accent-bg); }
.vp-chart__path { stroke: var(--vp-accent-fg); }
.vp-chart__dots circle { fill: var(--vp-surface); stroke: var(--vp-accent-fg); }