/* =====================================================================
 * F45 UI v2 — Sprint 2: Overview Dashboard
 * ---------------------------------------------------------------------
 * Все стили строго под html[data-ui-v2="1"] — при выключенном флаге файл
 * не грузится вообще (см. functions.php), но даже если попадёт в кэш,
 * ни одно правило не применится.
 *
 * Философия: Linear/Notion минимализм. Тонкие границы, subtle тени,
 * крупная типографика, много воздуха, цвет — точечно.
 *
 * Зависимости: motion.css (--f45-dur-*, --f45-ease-*, --f45-depth-*).
 * Fallback-значения указаны везде через var(--token, fallback).
 *
 * ОТКАТ: выключить f45_ui_v2_enabled в WP-админке.
 * ===================================================================== */

/* --- 2026-07-28: правило скрытия .lk-hello на табе Overview удалено.
   Старый .lk-ov-hero вынесен в buildNextWorkoutCard без аватара/приветствия,
   дублирования больше нет. legacy .lk-hello виден на всех табах, включая Обзор. */

/* =====================================================================
 * 0. ANIMATABLE CUSTOM PROPERTIES (@property)
 * Baseline: Chrome 85+, Safari 16.4+, Firefox 128+.
 * В браузерах без @property значения работают как обычные переменные —
 * анимации нет, финальное состояние корректное.
 * ===================================================================== */

/* --progress ставится JS-ом на .lk-ov-ring, а читается дочерним <circle> —
   поэтому inherits: true (иначе круг всегда получал бы initial-value). */
@property --progress {
	syntax: '<number>';
	inherits: true;
	initial-value: 0;
}

@property --num {
	syntax: '<number>';
	inherits: false;
	initial-value: 0;
}

/* --fill ставится на .lk-ov-bar, читается дочерним .lk-ov-bar__fill. */
@property --fill {
	syntax: '<percentage>';
	inherits: true;
	initial-value: 0%;
}

/* =====================================================================
 * 1. ТОКЕНЫ OVERVIEW v2
 * ===================================================================== */

html[data-ui-v2="1"] .lk-ov {
	--ov-bg:            #FFFFFF;
	--ov-ink:           #0A0A0A;
	--ov-ink-soft:      #4A5578;
	--ov-ink-mute:      #8A93AB;
	--ov-line:          rgba(10, 10, 10, 0.08);
	--ov-line-strong:   rgba(10, 10, 10, 0.14);
	--ov-radius:        16px;
	--ov-radius-sm:     10px;
	--ov-gap:           16px;
	--ov-pad:           20px;
	--ov-navy:          #2E4F8B;
	--ov-red:           #E30613;
	--ov-green:         #4CAF50;
	--ov-gold:          #FFD700;

	display: flex;
	flex-direction: column;
	gap: var(--ov-gap);
}

/* Никакого фона на body/html — только карточки. */

/* =====================================================================
 * 2. WIDGET SHELL + CONTAINER QUERIES (п.2.8)
 * ===================================================================== */

html[data-ui-v2="1"] .lk-widget {
	container-type: inline-size;
	container-name: lkwidget;
	background: var(--ov-bg);
	border: 1px solid var(--ov-line);
	border-radius: var(--ov-radius);
	padding: var(--ov-pad);
	box-shadow: var(--f45-depth-rest, 0 1px 2px rgba(10, 10, 10, 0.06));
	transition: box-shadow var(--f45-dur-base, 220ms) var(--f45-ease-standard, ease),
	            border-color var(--f45-dur-base, 220ms) var(--f45-ease-standard, ease);
}

html[data-ui-v2="1"] .lk-widget:hover {
	box-shadow: var(--f45-depth-hover, 0 3px 8px rgba(10, 10, 10, 0.08));
	border-color: var(--ov-line-strong);
}

html[data-ui-v2="1"] .lk-ov-grid {
	display: grid;
	gap: var(--ov-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	html[data-ui-v2="1"] .lk-ov-grid--2 {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}
}

html[data-ui-v2="1"] .lk-ov-widget__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

html[data-ui-v2="1"] .lk-ov-widget__title {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ov-ink-mute);
	margin: 0;
}

html[data-ui-v2="1"] .lk-ov-link {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--ov-ink-soft);
	cursor: pointer;
	transition: color var(--f45-dur-fast, 140ms) var(--f45-ease-standard, ease);
}
html[data-ui-v2="1"] .lk-ov-link:hover { color: var(--ov-red); }
html[data-ui-v2="1"] .lk-ov-link:focus-visible {
	outline: 2px solid var(--ov-navy);
	outline-offset: 3px;
	border-radius: 4px;
}

html[data-ui-v2="1"] .lk-ov-empty {
	margin: 0 0 12px;
	color: var(--ov-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* CTA-кнопка Overview v2 */
html[data-ui-v2="1"] .lk-ov-cta {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--ov-line-strong);
	background: #0A0A0A;
	color: #FFFFFF;
	border-radius: 999px;
	padding: 10px 18px;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform var(--f45-dur-fast, 140ms) var(--f45-ease-standard, ease),
	            box-shadow var(--f45-dur-fast, 140ms) var(--f45-ease-standard, ease),
	            background-color var(--f45-dur-fast, 140ms) var(--f45-ease-standard, ease);
}
html[data-ui-v2="1"] .lk-ov-cta:hover {
	transform: scale(var(--f45-scale-hover, 1.015));
	box-shadow: var(--f45-depth-hover, 0 3px 8px rgba(10, 10, 10, 0.08));
}
html[data-ui-v2="1"] .lk-ov-cta:active {
	transform: scale(var(--f45-scale-tap, 0.985));
	box-shadow: var(--f45-depth-active, 0 1px 2px rgba(10, 10, 10, 0.08));
}
html[data-ui-v2="1"] .lk-ov-cta:focus-visible {
	outline: 2px solid var(--ov-navy);
	outline-offset: 3px;
}

/* =====================================================================
 * 3. HERO (п.2.1)
 * ===================================================================== */

html[data-ui-v2="1"] .lk-ov-hero {
	position: relative;
	overflow: hidden;
	background: var(--ov-bg);
	border: 1px solid var(--ov-line);
	border-radius: var(--ov-radius);
	padding: 28px var(--ov-pad);
	box-shadow: var(--f45-depth-rest, 0 1px 2px rgba(10, 10, 10, 0.06));
	container-type: inline-size;
}

/* Ambient-градиент: очень тихий, только намёк на направление тренировки. */
html[data-ui-v2="1"] .lk-ov-hero__ambient {
	position: absolute;
	inset: 0;
	background: var(--hero-accent, none);
	opacity: 0.06;
	pointer-events: none;
	transition: opacity var(--f45-dur-slow, 360ms) var(--f45-ease-standard, ease),
	            background var(--f45-dur-slow, 360ms) var(--f45-ease-standard, ease);
}

/* Milestone: 30 секунд золотой accent поверх обычного. */
html[data-ui-v2="1"] .lk-ov-hero.is-milestone .lk-ov-hero__ambient {
	background: linear-gradient(135deg, #FFD700 0%, transparent 60%);
	opacity: 0.12;
}

html[data-ui-v2="1"] .lk-ov-hero__inner {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

html[data-ui-v2="1"] .lk-ov-hero__avatar {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid var(--ov-line);
	background: #F4F5F8;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 0;
	cursor: default;
}
html[data-ui-v2="1"] .lk-ov-hero__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
html[data-ui-v2="1"] .lk-ov-hero__avatar--empty {
	cursor: pointer;
	appearance: none;
	transition: transform var(--f45-dur-fast, 140ms) var(--f45-ease-standard, ease);
}
html[data-ui-v2="1"] .lk-ov-hero__avatar--empty:hover { transform: scale(var(--f45-scale-hover, 1.015)); }
html[data-ui-v2="1"] .lk-ov-hero__initials {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--ov-ink-soft);
	letter-spacing: 0.02em;
}
html[data-ui-v2="1"] .lk-ov-hero__avatar-badge {
	position: absolute;
	right: 4px;
	bottom: 4px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ov-red);
	color: #fff;
	font-size: 15px;
	line-height: 20px;
	font-weight: 700;
	border: 2px solid #fff;
}

html[data-ui-v2="1"] .lk-ov-hero__body {
	min-width: 0;
	flex: 1 1 auto;
}

html[data-ui-v2="1"] .lk-ov-hero__greeting {
	margin: 0 0 18px;
	font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ov-ink);
}

html[data-ui-v2="1"] .lk-ov-hero__eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ov-ink-mute);
	margin-bottom: 4px;
}

html[data-ui-v2="1"] .lk-ov-hero__line {
	font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--ov-ink);
	line-height: 1.3;
}

html[data-ui-v2="1"] .lk-ov-hero__meta {
	margin-top: 6px;
	font-size: 0.9375rem;
	color: var(--ov-ink-soft);
}

html[data-ui-v2="1"] .lk-ov-hero__actions {
	margin-top: 18px;
}

/* Узкий контейнер (мобильный) — аватар над текстом, компактнее. */
@container (max-width: 460px) {
	html[data-ui-v2="1"] .lk-ov-hero__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
	html[data-ui-v2="1"] .lk-ov-hero__avatar {
		width: 72px;
		height: 72px;
	}
	html[data-ui-v2="1"] .lk-ov-hero__greeting { margin-bottom: 12px; }
}

/* =====================================================================
 * 3.4. TABS — style guard: никаких красных подчеркиваний под табами.
 * Страховка от возврата в случае перегенерации темы.
 * ===================================================================== */

html[data-ui-v2="1"] .lk-tab,
html[data-ui-v2="1"] .lk-tab.is-active,
html[data-ui-v2="1"] .lk-tab::before,
html[data-ui-v2="1"] .lk-tab::after {
	text-decoration: none !important;
	border-bottom: 0 !important;
	background-image: none;
}
html[data-ui-v2="1"] .lk-tab::after,
html[data-ui-v2="1"] .lk-tab.is-active::after {
	content: none !important;
}

/* =====================================================================
 * 3.5. NEXT-WORKOUT CARD (Sprint 2 rev-2, 2026-07-28)
 *
 * Отдельная первая карточка Overview. Без аватара и приветствия
 * (они теперь в глобальном .lk-hello над табами). Ambient hint меняет
 * цвет по --hero-accent (cardio red-orange / hybrid navy-purple / resistance navy-blue).
 * ===================================================================== */

html[data-ui-v2="1"] .lk-ov-nextcard {
	position: relative;
	overflow: hidden;
	background: var(--ov-bg);
	border: 1px solid var(--ov-line);
	border-radius: var(--ov-radius);
	padding: 24px var(--ov-pad);
	box-shadow: var(--f45-depth-rest, 0 1px 2px rgba(10, 10, 10, 0.06));
}

html[data-ui-v2="1"] .lk-ov-nextcard__ambient {
	position: absolute;
	inset: 0;
	background: var(--hero-accent, none);
	opacity: 0.06;
	pointer-events: none;
	transition: opacity var(--f45-dur-slow, 360ms) var(--f45-ease-standard, ease),
		            background var(--f45-dur-slow, 360ms) var(--f45-ease-standard, ease);
}

html[data-ui-v2="1"] .lk-ov-nextcard__inner {
	position: relative;
}

html[data-ui-v2="1"] .lk-ov-nextcard__eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ov-ink-mute);
	margin-bottom: 6px;
}

html[data-ui-v2="1"] .lk-ov-nextcard__line {
	font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--ov-ink);
	line-height: 1.3;
}

html[data-ui-v2="1"] .lk-ov-nextcard__meta {
	margin-top: 6px;
	font-size: 0.9375rem;
	color: var(--ov-ink-soft);
}

html[data-ui-v2="1"] .lk-ov-nextcard__actions {
	margin-top: 16px;
}

/* =====================================================================
 * 4. PROGRESS RING (п.2.2)
 * ===================================================================== */

html[data-ui-v2="1"] .lk-ov-ring {
	--progress: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

html[data-ui-v2="1"] .lk-ov-ring__chart {
	position: relative;
	width: 160px;
	height: 160px;
	flex: 0 0 auto;
}

html[data-ui-v2="1"] .lk-ov-ring__chart svg {
	display: block;
	transform: rotate(-90deg);
}

html[data-ui-v2="1"] .lk-ov-ring__track {
	stroke: rgba(10, 10, 10, 0.08);
	stroke-width: 12;
}

html[data-ui-v2="1"] .lk-ov-ring__value {
	stroke-width: 12;
	stroke-linecap: round;
	/* 2πr при r=70 ≈ 439.8. --progress: 0..100 (число). */
	stroke-dasharray: calc(var(--progress) * 4.398) 440;
	transition: stroke-dasharray var(--f45-dur-lazy, 520ms) cubic-bezier(0.16, 1, 0.3, 1);
}

/* @property делает саму переменную анимируемой — там, где поддерживается,
   переход считается по --progress, а не по строке dasharray. */
html[data-ui-v2="1"] .lk-ov-ring {
	transition: --progress 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-ui-v2="1"] .lk-ov-ring__center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 2px;
	pointer-events: none;
}

html[data-ui-v2="1"] .lk-ov-ring__num {
	font-size: 2.75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--ov-ink);
	font-variant-numeric: tabular-nums;
}

html[data-ui-v2="1"] .lk-ov-ring__unit {
	font-size: 0.8125rem;
	color: var(--ov-ink-soft);
}

html[data-ui-v2="1"] .lk-ov-ring__month {
	font-size: 0.8125rem;
	color: var(--ov-ink-mute);
}

html[data-ui-v2="1"] .lk-ov-ring__side {
	display: flex;
	gap: 24px;
	width: 100%;
	justify-content: center;
}

html[data-ui-v2="1"] .lk-ov-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 72px;
}

html[data-ui-v2="1"] .lk-ov-stat__label {
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ov-ink-mute);
}

html[data-ui-v2="1"] .lk-ov-stat__value {
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--ov-ink);
	font-variant-numeric: tabular-nums;
}

/* Широкий контейнер — кольцо слева, цифры справа. */
@container lkwidget (min-width: 380px) {
	html[data-ui-v2="1"] .lk-ov-ring {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 28px;
	}
	html[data-ui-v2="1"] .lk-ov-ring__side {
		flex-direction: column;
		gap: 16px;
		width: auto;
		justify-content: center;
	}
}

@container lkwidget (max-width: 379px) {
	html[data-ui-v2="1"] .lk-ov-ring { flex-direction: column; }
	html[data-ui-v2="1"] .lk-ov-ring__chart { width: 140px; height: 140px; }
	html[data-ui-v2="1"] .lk-ov-ring__chart svg { width: 140px; height: 140px; }
	html[data-ui-v2="1"] .lk-ov-ring__num { font-size: 2.25rem; }
}

/* =====================================================================
 * 5. CONSISTENCY (п.2.3)
 * ===================================================================== */

html[data-ui-v2="1"] .lk-ov-consist {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	justify-content: center;
}

html[data-ui-v2="1"] .lk-ov-consist__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

html[data-ui-v2="1"] .lk-ov-consist__bolt {
	font-size: 1.25rem;
	line-height: 1;
}

html[data-ui-v2="1"] .lk-ov-consist__num {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--ov-ink);
	font-variant-numeric: tabular-nums;
}

html[data-ui-v2="1"] .lk-ov-consist__weeks {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--ov-ink-soft);
}

html[data-ui-v2="1"] .lk-ov-consist__title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--ov-ink);
}

html[data-ui-v2="1"] .lk-ov-consist__sub {
	font-size: 0.875rem;
	color: var(--ov-ink-mute);
}

html[data-ui-v2="1"] .lk-ov-consist__mercy {
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: var(--ov-radius-sm);
	background: rgba(46, 79, 139, 0.06);
	border: 1px solid rgba(46, 79, 139, 0.12);
	font-size: 0.875rem;
	color: var(--ov-navy);
}

/* Glow при 4+ неделях. */
html[data-ui-v2="1"] .lk-ov-consist.is-glow .lk-ov-consist__num {
	filter: drop-shadow(0 0 10px rgba(227, 6, 19, 0.28));
	animation: lk-ov-pulse 4s var(--f45-ease-standard, ease-in-out) infinite;
}

@keyframes lk-ov-pulse {
	0%, 100% { filter: drop-shadow(0 0 6px rgba(227, 6, 19, 0.18)); }
	50%      { filter: drop-shadow(0 0 16px rgba(227, 6, 19, 0.34)); }
}

@container lkwidget (min-width: 380px) {
	html[data-ui-v2="1"] .lk-ov-consist__num { font-size: 3.5rem; }
}

/* =====================================================================
 * 6. MEMBERSHIP v2 (п.2.4)
 * ===================================================================== */

html[data-ui-v2="1"] .lk-ov-mem__name {
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--ov-ink);
	margin-bottom: 18px;
}

html[data-ui-v2="1"] .lk-ov-bar {
	--fill: 0%;
	--bar-color: #4CAF50;
	margin-bottom: 16px;
	/* Анимируем саму переменную на родителе — дочерний .lk-ov-bar__fill
	   наследует уже проинтерполированное значение. */
	transition: --fill var(--f45-dur-lazy, 520ms) cubic-bezier(0.16, 1, 0.3, 1);
}
html[data-ui-v2="1"] .lk-ov-bar:last-child { margin-bottom: 0; }

html[data-ui-v2="1"] .lk-ov-bar__track {
	height: 10px;
	border-radius: 999px;
	background: rgba(10, 10, 10, 0.06);
	overflow: hidden;
}

html[data-ui-v2="1"] .lk-ov-bar__fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(to right, var(--bar-color) var(--fill), transparent var(--fill));
	transition: background-color var(--f45-dur-slow, 360ms) var(--f45-ease-standard, ease);
}

/* Браузеры без @property: --fill остаётся обычной переменной, JS выставляет
   её сразу в финальное значение — градиент рисуется корректно, просто без
   плавной анимации. Отдельный fallback не нужен. */

html[data-ui-v2="1"] .lk-ov-bar__text {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
}

html[data-ui-v2="1"] .lk-ov-bar__label {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--ov-ink);
}

html[data-ui-v2="1"] .lk-ov-bar__hint {
	font-size: 0.875rem;
	color: var(--ov-ink-mute);
	white-space: nowrap;
}

html[data-ui-v2="1"] .lk-ov-mem__others {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--ov-line);
}

html[data-ui-v2="1"] .lk-ov-mem__other {
	font-size: 0.875rem;
	color: var(--ov-ink-soft);
}

@container lkwidget (max-width: 379px) {
	html[data-ui-v2="1"] .lk-ov-bar__text {
		flex-direction: column;
		gap: 2px;
	}
}

/* =====================================================================
 * 7. TIMELINE (п.2.5)
 * ===================================================================== */

html[data-ui-v2="1"] .lk-ov-tl__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

html[data-ui-v2="1"] .lk-ov-tl__row {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr) auto 16px;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ov-line);
}
html[data-ui-v2="1"] .lk-ov-tl__row:last-child { border-bottom: 0; }

html[data-ui-v2="1"] .lk-ov-tl__date {
	font-size: 0.875rem;
	color: var(--ov-ink-mute);
	white-space: nowrap;
}

html[data-ui-v2="1"] .lk-ov-tl__title {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--ov-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

html[data-ui-v2="1"] .lk-ov-tl__badge {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ov-green);
	white-space: nowrap;
}

html[data-ui-v2="1"] .lk-ov-tl__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1.5px solid var(--ov-line-strong);
	justify-self: end;
}
html[data-ui-v2="1"] .lk-ov-tl__dot.is-filled {
	background: var(--ov-red);
	border-color: var(--ov-red);
}

/* Fade-in самой свежей записи при монтировании. */
body:not(.reduce-motion) html[data-ui-v2="1"] .lk-ov-tl__row.is-fresh,
html[data-ui-v2="1"] body:not(.reduce-motion) .lk-ov-tl__row.is-fresh {
	animation: lk-ov-fade-up 400ms var(--f45-ease-out, cubic-bezier(0, 0, 0.2, 1)) both;
}

@keyframes lk-ov-fade-up {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@container lkwidget (max-width: 379px) {
	html[data-ui-v2="1"] .lk-ov-tl__row {
		grid-template-columns: 96px minmax(0, 1fr) 12px;
	}
	html[data-ui-v2="1"] .lk-ov-tl__badge { display: none; }
}

/* =====================================================================
 * 8. MILESTONE CARD (п.2.6)
 * ===================================================================== */

html[data-ui-v2="1"] .lk-ov-milestone {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(255, 215, 0, 0.45);
	border-radius: var(--ov-radius, 16px);
	background:
		linear-gradient(135deg, rgba(255, 215, 0, 0.10) 0%, rgba(255, 215, 0, 0) 60%),
		#FFFFFF;
	padding: 22px 20px;
	box-shadow: var(--f45-depth-rest, 0 1px 2px rgba(10, 10, 10, 0.06));
	animation: lk-ov-fade-up 400ms var(--f45-ease-out, cubic-bezier(0, 0, 0.2, 1)) both;
	transition: opacity var(--f45-dur-base, 220ms) var(--f45-ease-standard, ease),
	            transform var(--f45-dur-base, 220ms) var(--f45-ease-standard, ease);
}

html[data-ui-v2="1"] .lk-ov-milestone.is-hiding {
	opacity: 0;
	transform: translateY(-6px);
}

html[data-ui-v2="1"] .lk-ov-milestone__title {
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ov-ink, #0A0A0A);
	margin-bottom: 8px;
}

html[data-ui-v2="1"] .lk-ov-milestone__text {
	margin: 0 0 16px;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--ov-ink-soft, #4A5578);
	max-width: 46ch;
}

html[data-ui-v2="1"] .lk-ov-milestone__hide {
	appearance: none;
	background: none;
	border: 1px solid rgba(10, 10, 10, 0.14);
	border-radius: 999px;
	padding: 8px 16px;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	color: #4A5578;
	cursor: pointer;
	transition: background-color var(--f45-dur-fast, 140ms) var(--f45-ease-standard, ease),
	            transform var(--f45-dur-fast, 140ms) var(--f45-ease-standard, ease);
}
html[data-ui-v2="1"] .lk-ov-milestone__hide:hover {
	background: rgba(10, 10, 10, 0.04);
	transform: scale(var(--f45-scale-hover, 1.015));
}
html[data-ui-v2="1"] .lk-ov-milestone__hide:focus-visible {
	outline: 2px solid #2E4F8B;
	outline-offset: 3px;
}

/* CSS-конфетти: 8 маленьких элементов, без библиотек. */
html[data-ui-v2="1"] .lk-ov-confetti {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

html[data-ui-v2="1"] .lk-ov-confetti__piece {
	position: absolute;
	top: -8px;
	left: calc(8% + var(--i) * 11%);
	width: 6px;
	height: 10px;
	border-radius: 1px;
	opacity: 0;
	background: #FFD700;
	animation: lk-ov-confetti 4s var(--f45-ease-out, cubic-bezier(0, 0, 0.2, 1)) both;
	animation-delay: calc(var(--i) * 90ms);
}
html[data-ui-v2="1"] .lk-ov-confetti__piece:nth-child(3n)   { background: #E30613; }
html[data-ui-v2="1"] .lk-ov-confetti__piece:nth-child(3n+1) { background: #2E4F8B; }

@keyframes lk-ov-confetti {
	0%   { opacity: 0; transform: translate3d(0, -10px, 0) rotate(0deg); }
	12%  { opacity: 1; }
	100% { opacity: 0; transform: translate3d(calc(var(--i) * 6px - 20px), 140px, 0) rotate(420deg); }
}

body.reduce-motion html[data-ui-v2="1"] .lk-ov-confetti,
html[data-ui-v2="1"] body.reduce-motion .lk-ov-confetti { display: none; }

/* =====================================================================
 * 9. SKELETONS
 * ===================================================================== */

html[data-ui-v2="1"] .lk-ov-skel-block {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

html[data-ui-v2="1"] .lk-ov-skel {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	background: rgba(10, 10, 10, 0.06);
}

html[data-ui-v2="1"] .lk-ov-skel--line { height: 14px; width: 100%; }
html[data-ui-v2="1"] .lk-ov-skel--bar  { height: 10px; width: 100%; border-radius: 999px; }
html[data-ui-v2="1"] .lk-ov-skel--num  { height: 44px; width: 120px; }
html[data-ui-v2="1"] .lk-ov-skel--ring {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	align-self: center;
}

html[data-ui-v2="1"] .lk-ov-skel::after {
	content: '';
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
	animation: lk-ov-shimmer 1.4s infinite;
}

@keyframes lk-ov-shimmer {
	100% { transform: translateX(100%); }
}

body.reduce-motion html[data-ui-v2="1"] .lk-ov-skel::after,
html[data-ui-v2="1"] body.reduce-motion .lk-ov-skel::after { animation: none; }

/* =====================================================================
 * 10. REDUCED MOTION
 * ===================================================================== */

@media (prefers-reduced-motion: reduce) {
	html[data-ui-v2="1"] .lk-ov-ring,
	html[data-ui-v2="1"] .lk-ov-ring__value,
	html[data-ui-v2="1"] .lk-ov-bar,
	html[data-ui-v2="1"] .lk-ov-bar__fill,
	html[data-ui-v2="1"] .lk-widget,
	html[data-ui-v2="1"] .lk-ov-cta,
	html[data-ui-v2="1"] .lk-ov-hero__ambient {
		transition-duration: 1ms !important;
	}
	html[data-ui-v2="1"] .lk-ov-consist.is-glow .lk-ov-consist__num,
	html[data-ui-v2="1"] .lk-ov-tl__row.is-fresh,
	html[data-ui-v2="1"] .lk-ov-milestone,
	html[data-ui-v2="1"] .lk-ov-skel::after {
		animation: none !important;
	}
	html[data-ui-v2="1"] .lk-ov-confetti { display: none; }
	html[data-ui-v2="1"] .lk-ov-cta:hover,
	html[data-ui-v2="1"] .lk-ov-milestone__hide:hover { transform: none; }
}

body.reduce-motion html[data-ui-v2="1"] .lk-ov-ring,
html[data-ui-v2="1"] body.reduce-motion .lk-ov-ring,
body.reduce-motion html[data-ui-v2="1"] .lk-ov-ring__value,
html[data-ui-v2="1"] body.reduce-motion .lk-ov-ring__value,
body.reduce-motion html[data-ui-v2="1"] .lk-ov-bar,
html[data-ui-v2="1"] body.reduce-motion .lk-ov-bar,
body.reduce-motion html[data-ui-v2="1"] .lk-ov-bar__fill,
html[data-ui-v2="1"] body.reduce-motion .lk-ov-bar__fill {
	transition-duration: 1ms !important;
}

body.reduce-motion html[data-ui-v2="1"] .lk-ov-consist.is-glow .lk-ov-consist__num,
html[data-ui-v2="1"] body.reduce-motion .lk-ov-consist.is-glow .lk-ov-consist__num {
	animation: none;
	filter: none;
}

/* =====================================================================
 * 11. PRINT / SMALL SCREEN ПОЛИРОВКА
 * ===================================================================== */

@media (max-width: 480px) {
	html[data-ui-v2="1"] .lk-ov {
		--ov-pad: 16px;
		--ov-gap: 12px;
	}
	html[data-ui-v2="1"] .lk-ov-hero { padding: 22px 16px; }
	html[data-ui-v2="1"] .lk-ov-ring__side { gap: 16px; }
}

/* Совместимость: карточки v1 (бонусы, быстрая запись, быстрые действия,
   плашка долга) остаются внутри Overview v2 — просто выравниваем отступы,
   не переопределяя их собственные стили. */
html[data-ui-v2="1"] .lk-ov > .lk-card,
html[data-ui-v2="1"] .lk-ov > .lk-debt-alert,
html[data-ui-v2="1"] .lk-ov > .lk-bonus-card {
	margin: 0;
}

/* Личная цель — inline редактирование (2026-07-28) */
.lk-ov-stat--edit {
	all: unset;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	cursor: pointer;
	border-radius: 8px;
	padding: 4px 8px;
	margin: -4px -8px;
	transition: background 160ms ease;
}
.lk-ov-stat--edit:hover,
.lk-ov-stat--edit:focus-visible {
	background: rgba(46, 79, 139, 0.06);
	outline: none;
}
.lk-ov-stat--edit .lk-ov-stat__pencil {
	font-size: 0.85em;
	opacity: 0.5;
	margin-left: 4px;
	transition: opacity 160ms ease;
}
.lk-ov-stat--edit:hover .lk-ov-stat__pencil,
.lk-ov-stat--edit:focus-visible .lk-ov-stat__pencil {
	opacity: 1;
}