/* Оформление страницы «AO Avengers»: шапка, выбор класса, панель действий, карточки.
   Поля умений и вех (клетки, фоны, рамки) остаются из assets/vendor/calc.css. */

/* ---------- Палитра ---------- */
:root {
	--av-bg: #eef0f5;
	--av-bg-glow: rgba(109, 94, 252, .10);
	--av-surface: #ffffff;
	--av-surface-2: #f5f6fa;
	--av-surface-3: #eceef4;
	--av-border: #dde1ea;
	--av-border-strong: #c7cddb;
	--av-text: #171c2a;
	--av-muted: #5f6880;
	--av-faint: #8c94a8;
	--av-accent: #6150f0;
	--av-accent-hover: #5140e0;
	--av-accent-soft: rgba(97, 80, 240, .10);
	--av-accent-ring: rgba(97, 80, 240, .35);
	--av-on-accent: #ffffff;
	--av-gold: #a8761c;
	--av-gold-soft: rgba(212, 160, 60, .16);
	--av-danger: #d93d42;
	--av-danger-soft: rgba(217, 61, 66, .10);
	--av-success: #1f9d63;
	--av-success-soft: rgba(31, 157, 99, .12);
	--av-shadow: 0 1px 2px rgba(20, 24, 40, .05), 0 6px 24px rgba(20, 24, 40, .06);
	--av-shadow-lg: 0 24px 64px rgba(10, 12, 30, .22);
	--av-radius: 14px;
	--av-radius-sm: 10px;
	--av-logo-a: #8f80ff;
	--av-logo-b: #4a35e8;
	--av-top-h: 64px;
	--av-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
html.dark {
	--av-bg: #0b0e15;
	--av-bg-glow: rgba(120, 100, 255, .16);
	--av-surface: #141924;
	--av-surface-2: #1a2030;
	--av-surface-3: #212839;
	--av-border: #252d3f;
	--av-border-strong: #343e55;
	--av-text: #e6e9f2;
	--av-muted: #98a1b7;
	--av-faint: #6c7590;
	--av-accent: #8072ff;
	--av-accent-hover: #9387ff;
	--av-accent-soft: rgba(128, 114, 255, .14);
	--av-accent-ring: rgba(128, 114, 255, .45);
	--av-gold: #e8bc63;
	--av-gold-soft: rgba(232, 188, 99, .14);
	--av-danger: #ff6369;
	--av-danger-soft: rgba(255, 99, 105, .12);
	--av-success: #3dd68c;
	--av-success-soft: rgba(61, 214, 140, .12);
	--av-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 28px rgba(0, 0, 0, .35);
	--av-shadow-lg: 0 30px 80px rgba(0, 0, 0, .6);
	color-scheme: dark;
}

/* Переменные стилей калькулятора и Element Plus — под палитру страницы
   (html.dark — чтобы перекрыть тёмные значения из vendor/base.css) */
html, html.dark {
	--calc-body: var(--av-bg);
	--calc-main-background: var(--av-surface);
	--calc-main-text: var(--av-text);
	--calc-form-border-color: var(--av-border);
	--calc-form-hover-border-color: var(--av-border-strong);
	--calc-form-active-background: var(--av-accent-soft);
	--calc-form-input-background: var(--av-surface);
	--calc-form-input-color: var(--av-text);
	--calc-class-select-card-background: var(--av-surface-2);
	--calc-form-switch-inactive-background: var(--av-surface);
	--calc-form-switch-inactive-text: var(--av-text);
	--calc-form-switch-inactive-hover-background: var(--av-accent-soft);
	--calc-skeleton-background: var(--av-surface-3);

	--el-color-primary: var(--av-accent);
	--el-color-primary-light-3: var(--av-accent-hover);
	--el-color-primary-light-5: var(--av-accent-ring);
	--el-color-primary-light-7: var(--av-accent-soft);
	--el-color-primary-light-8: var(--av-accent-soft);
	--el-color-primary-light-9: var(--av-accent-soft);
	--el-color-primary-dark-2: var(--av-accent-hover);
	--el-color-danger: var(--av-danger);
	--el-bg-color: var(--av-surface);
	--el-bg-color-overlay: var(--av-surface);
	--el-text-color-primary: var(--av-text);
	--el-text-color-regular: var(--av-muted);
	--el-border-color: var(--av-border-strong);
	--el-border-color-light: var(--av-border);
	--el-border-color-lighter: var(--av-border);
	--el-fill-color-blank: var(--av-surface);
	--el-font-family: var(--av-font);

	/* Редактор пользуется переменными старой темы (--bk-*): отдаём ему новую палитру */
	--bk-cream: var(--av-surface-2);
	--bk-cream-light: var(--av-surface-2);
	--bk-white: var(--av-surface);
	--bk-brown: var(--av-text);
	--bk-brown-text: var(--av-text);
	--bk-brown-muted: var(--av-muted);
	--bk-brown-light: var(--av-faint);
	--bk-border: var(--av-border);
	--bk-border-light: var(--av-border);
	--bk-orange: var(--av-accent);
	--bk-orange-hover: var(--av-accent-hover);
}

/* ---------- Страница ---------- */
html { scrollbar-gutter: stable; }
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	color: var(--av-text) !important;
	font-family: var(--av-font) !important;
	background:
		radial-gradient(1100px 420px at 15% -120px, var(--av-bg-glow), transparent 70%),
		radial-gradient(900px 380px at 100% -160px, var(--av-gold-soft), transparent 70%),
		var(--av-bg) !important;
	background-repeat: no-repeat !important;
}
.av-page { flex: 1 0 auto; width: 100%; }
#aoprocalc { min-height: 640px; max-width: 1358px; margin: 0 auto; }
::selection { background: var(--av-accent-ring); }

/* ---------- Шапка ---------- */
.av-top {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--av-bg) 82%, transparent);
	backdrop-filter: saturate(1.4) blur(14px);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: 1px solid var(--av-border);
}
.av-top__inner {
	max-width: 1358px;
	height: var(--av-top-h);
	margin: 0 auto;
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.av-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--av-text); text-decoration: none; }
.av-logo:hover { color: var(--av-text); }
.av-logo__mark { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 4px 10px var(--av-accent-ring)); }
.av-logo__text { display: flex; flex-direction: column; line-height: 1.1; }
.av-logo__name { font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
.av-logo__accent {
	background: linear-gradient(90deg, var(--av-accent), var(--av-gold));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.av-logo__sub { font-size: 11px; font-weight: 500; color: var(--av-faint); letter-spacing: .06em; text-transform: uppercase; margin-top: 3px; }

.av-top__nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.av-link { color: var(--av-muted); font-size: 14px; font-weight: 500; padding: 8px 10px; border-radius: 8px; }
.av-link:hover { color: var(--av-text); background: var(--av-surface-3); }
.av-topbtn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 14px;
	font: 600 14px/1 var(--av-font);
	color: var(--av-text);
	background: var(--av-surface);
	border: 1px solid var(--av-border);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color .15s, background-color .15s;
}
.av-topbtn:hover { border-color: var(--av-border-strong); background: var(--av-surface-2); }
.av-topbtn svg { width: 18px; height: 18px; flex: none; }
.av-topbtn--icon { width: 38px; padding: 0; justify-content: center; }
.av-icon-moon { display: none; }
html.dark .av-icon-sun { display: none; }
html.dark .av-icon-moon { display: block; }
.av-count {
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--av-on-accent);
	background: var(--av-accent);
	border-radius: 999px;
}

/* ---------- Заголовок ---------- */
.av-hero { max-width: 1358px; margin: 0 auto; padding: 28px 16px 8px; }
.av-hero__title {
	margin: 0;
	font-size: clamp(26px, 3.2vw, 36px);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.1;
	color: var(--av-text);
}
.av-hero__lead { margin: 8px 0 0; max-width: 680px; font-size: 15px; color: var(--av-muted); }
.av-hero__lead:empty { display: none; }

/* ---------- Выбор класса и панель действий ---------- */
.av-toolbar { padding: 16px 16px 18px; }
.av-classes {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 4px 2px 8px;
	margin: 0 -2px;
	scrollbar-width: none;
}
.av-classes::-webkit-scrollbar { display: none; }
@media (max-width: 1100px) {
	/* мягкое затухание справа — видно, что список прокручивается */
	.av-classes { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 40px; }
}
@media (min-width: 1101px) {
	/* на широком экране — перенос на вторую строку: 11 классов не помещаются, а скрытую прокрутку мышью не видно */
	.av-classes { flex-wrap: wrap; overflow-x: visible; }
}
.av-class {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 14px 0 6px;
	color: var(--av-muted);
	font-size: 14px;
	font-weight: 600;
	background: var(--av-surface);
	border: 1px solid var(--av-border);
	border-radius: 12px;
	text-decoration: none;
	transition: color .15s, border-color .15s, background-color .15s, box-shadow .15s;
}
.av-class img { width: 32px; height: 32px; object-fit: contain; opacity: .75; transition: opacity .15s, transform .15s; }
.av-class:hover { color: var(--av-text); border-color: var(--av-border-strong); }
.av-class:hover img { opacity: 1; }
.av-class.is-active {
	color: var(--av-text);
	background: linear-gradient(180deg, var(--av-accent-soft), transparent), var(--av-surface);
	border-color: var(--av-accent);
	box-shadow: 0 0 0 3px var(--av-accent-soft);
}
.av-class.is-active img { opacity: 1; transform: scale(1.06); }

.av-bar { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.av-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 1 340px;
	min-width: 220px;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	color: var(--av-faint);
	background: var(--av-surface);
	border: 1px solid var(--av-border);
	border-radius: 10px;
	transition: border-color .15s, box-shadow .15s;
}
.av-search:focus-within { border-color: var(--av-accent); box-shadow: 0 0 0 3px var(--av-accent-soft); }
.av-search svg { width: 18px; height: 18px; flex: none; }
.av-search__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0 8px 0 10px;
	font: 14px var(--av-font);
	color: var(--av-text);
	background: transparent;
	border: 0;
	outline: 0;
}
.av-search__input::placeholder { color: var(--av-faint); }
.av-search__input::-webkit-search-cancel-button { display: none; }
.av-search__clear {
	display: none;
	width: 22px;
	height: 22px;
	padding: 0;
	font-size: 18px;
	line-height: 20px;
	color: var(--av-muted);
	background: var(--av-surface-3);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.av-search.has-value .av-search__clear { display: block; }

.av-points { display: none; gap: 8px; }
.av-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	height: 34px;
	padding: 0 12px;
	line-height: 34px;
	font-size: 13px;
	color: var(--av-muted);
	background: var(--av-surface);
	border: 1px solid var(--av-border);
	border-radius: 999px;
	white-space: nowrap;
}
.av-chip b { font-size: 15px; color: var(--av-text); }
.av-chip i { font-style: normal; color: var(--av-faint); }
.av-chip.is-over b { color: var(--av-danger); }

.av-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Кнопки */
.av-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	font: 600 14px/1 var(--av-font);
	white-space: nowrap;
	color: var(--av-text);
	background: var(--av-surface);
	border: 1px solid var(--av-border);
	border-radius: 10px;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
}
.av-btn:hover { border-color: var(--av-border-strong); background: var(--av-surface-2); }
.av-btn:active { transform: translateY(1px); }
.av-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--av-accent-ring); }
.av-btn:disabled { opacity: .55; cursor: default; transform: none; }
.av-btn .el-icon { width: 16px; height: 16px; font-size: 16px; display: inline-flex; }
.av-btn .el-icon svg { width: 16px; height: 16px; }
.av-btn svg { width: 16px; height: 16px; flex: none; }
.av-btn--primary {
	color: var(--av-on-accent);
	background: linear-gradient(180deg, var(--av-accent-hover), var(--av-accent));
	border-color: transparent;
	box-shadow: 0 6px 18px -6px var(--av-accent-ring), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.av-btn--primary:hover { color: var(--av-on-accent); background: var(--av-accent-hover); border-color: transparent; }
.av-btn--icon { width: 40px; padding: 0; }
.av-btn--danger-hover:hover { color: var(--av-danger); border-color: var(--av-danger); background: var(--av-danger-soft); }
.av-btn--block { width: 100%; height: 46px; font-size: 15px; }

/* ---------- Карточки полей ---------- */
.calculator__content { gap: 0; }
.aopro-card {
	color: var(--av-text);
	background: var(--av-surface);
	border: 1px solid var(--av-border);
	border-radius: var(--av-radius);
	box-shadow: var(--av-shadow);
}
.aopro-card__header {
	padding: 12px 12px 12px 16px;
	color: var(--av-text);
	background: var(--av-surface);
	border-bottom: 1px solid var(--av-border);
	border-radius: calc(var(--av-radius) - 1px) calc(var(--av-radius) - 1px) 0 0;
}
.skills__title, .milestones-tab__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
}
.skills__title::before, .milestones-tab__title::before {
	content: '';
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: 2px;
	transform: rotate(45deg);
	background: linear-gradient(135deg, var(--av-gold), var(--av-accent));
}
.skills__consumed, .milestones-tab__consumed { margin-top: 2px; font-size: 12.5px; color: var(--av-muted); }
.skills__consumed--overflow, .milestones-tab__consumed--overflow { color: var(--av-danger); }
.milestones-tab__consumed .tip-blue { color: var(--av-accent); font-weight: 700; }
.skills__content, .milestones-tab__content { border-radius: 0 0 calc(var(--av-radius) - 1px) calc(var(--av-radius) - 1px); }

/* Крестик «сбросить» в шапке карточки */
#aoprocalc .skills__reset {
	width: 32px;
	height: 32px;
	padding: 0;
	color: var(--av-faint);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
}
#aoprocalc .skills__reset:hover { color: var(--av-danger); background: var(--av-danger-soft); border-color: transparent; }

/* Подсказки по управлению */
.calculator__info.info {
	color: var(--av-muted);
	background: var(--av-surface);
	border: 1px solid var(--av-border);
	border-radius: var(--av-radius);
	box-shadow: var(--av-shadow);
	padding: 16px 18px;
}
.calculator__info .info-list { font-size: 12.5px !important; }
.calculator__info .info-list li { line-height: 22px !important; }
.calculator__info b {
	display: inline-block;
	padding: 0 6px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 18px;
	color: var(--av-text);
	background: var(--av-surface-3);
	border: 1px solid var(--av-border-strong);
	border-bottom-width: 2px;
	border-radius: 5px;
}

/* ---------- Окна Element Plus (подтверждение) и сообщения ---------- */
.el-overlay { background-color: rgba(8, 10, 20, .55) !important; backdrop-filter: blur(3px); }
.el-message-box {
	border-radius: var(--av-radius) !important;
	border-color: var(--av-border) !important;
	box-shadow: var(--av-shadow-lg) !important;
	padding: 6px 6px 14px !important;
}
.el-message-box__title { font-weight: 700; }
.el-message-box .el-button { border-radius: 9px; height: 36px; padding: 0 16px; font-weight: 600; }
.el-message {
	color: var(--av-text) !important;
	background: var(--av-surface) !important;
	border: 1px solid var(--av-border) !important;
	border-radius: 12px !important;
	box-shadow: var(--av-shadow-lg) !important;
}
.el-message .el-message__content { color: var(--av-text) !important; font-weight: 500; }

/* ---------- Подвал ---------- */
.av-foot { margin-top: 40px; border-top: 1px solid var(--av-border); }
.av-foot__inner {
	max-width: 1358px;
	margin: 0 auto;
	padding: 18px 16px 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	font-size: 13px;
	color: var(--av-muted);
}
.av-foot__muted { color: var(--av-faint); }

/* ---------- Мелочи калькулятора ---------- */
.milestone { aspect-ratio: 1 / 1; }
.skills__placeholder { min-height: 40px; }
.calc-placeholder { margin: 0 16px; }
.calc-placeholder__inner p { margin: 0 0 8px; font-size: 14px; }
.info.calc-placeholder { border: 1px dashed var(--av-border-strong); border-radius: var(--av-radius); background: transparent; color: var(--av-muted); padding: 32px; text-align: center; }
.el-popper.is-dark.calc-tip { position: fixed; z-index: 2100; pointer-events: none; }

/* ---------- Адаптивность ---------- */
@media (min-width: 769px) {
	.av-toolbar { padding-left: 0; padding-right: 0; }
}
@media (max-width: 768px) {
	:root { --av-top-h: 56px; }
	.av-logo__sub { display: none; }
	.av-topbtn__text { display: none; }
	.av-topbtn { padding: 0 11px; }
	.av-hero { padding-top: 18px; }
	.av-hero__lead { font-size: 14px; }
	.av-bar { gap: 10px; }
	.av-search { flex: 1 1 100%; }
	.av-points { display: flex; }
	.av-actions { margin-left: auto; }
	.skills__header, .milestones-tab__header { top: var(--av-top-h) !important; }
}
@media (max-width: 500px) {
	.av-actions .av-btn:not(.av-btn--primary) span { display: none; }
	.av-actions .av-btn:not(.av-btn--primary) { width: 40px; padding: 0; }
	.av-points { width: 100%; }
	.av-actions { width: 100%; }
	.av-actions .av-btn--primary { flex: 1; }
}

/* ---------- Предпросмотр присланных правок (?proposal=N) ---------- */
.av-preview {
	position: sticky;
	top: var(--av-top-h);
	z-index: 90;
	background: linear-gradient(90deg, var(--av-accent-soft), var(--av-gold-soft)), var(--av-surface);
	border-bottom: 1px solid var(--av-accent);
}
.av-preview__inner {
	max-width: 1358px;
	margin: 0 auto;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.av-preview__text { flex: 1 1 420px; font-size: 14px; color: var(--av-text); line-height: 1.45; }
.av-preview__comment { display: block; color: var(--av-muted); font-style: italic; }
.av-preview__hint { display: block; font-size: 12.5px; color: var(--av-faint); }
.av-preview__actions { display: flex; gap: 8px; }
.av-preview .av-btn { text-decoration: none; }