/* Onyx design system (extracted from d-onyx.html) */

		/* ============================================================
		   Мокап D «Onyx» — переосмысление админки: ночной сад,
		   жидкое стекло, светящиеся акценты. Не классическая панель.
		   ============================================================ */

		:root {
			color-scheme: dark;
			--bg: #060807;
			--glass: rgba(255, 255, 255, .05);
			--glass-2: rgba(255, 255, 255, .08);
			--line: rgba(255, 255, 255, .09);
			--text: #ecebe4;
			--muted: rgba(236, 235, 228, .55);
			--dim: rgba(236, 235, 228, .38);
			--heading: #f6f3ea;
			--sage: #a9e2bc;
			--sage-rgb: 169, 226, 188;
			--gold: #e3c693;
			--gold-rgb: 227, 198, 147;
			--danger: #e3a297;
			--font-ui: 'DM Sans', 'Segoe UI', sans-serif;
			--font-display: 'Cormorant Garamond', Georgia, serif;
			--r-lg: 22px;
			--r-md: 16px;
		}

		* { box-sizing: border-box; margin: 0; padding: 0; }
		body { font-family: var(--font-ui); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg); min-height: 100vh; }
		a { color: inherit; text-decoration: none; }
		button { font: inherit; cursor: pointer; }

		/* ---------- Фон: аврора + зерно + виньетка ---------- */
		.bg { position: fixed; inset: 0; z-index: -3; overflow: hidden; }
		.bg i { position: absolute; border-radius: 50%; filter: blur(100px); }
		.bg .a { width: 640px; height: 640px; left: -180px; top: -200px; background: #2f5a44; opacity: .55; }
		.bg .b { width: 520px; height: 520px; right: -140px; top: -60px; background: #6b5a3d; opacity: .3; }
		.bg .c { width: 700px; height: 700px; left: 34%; bottom: -320px; background: #1e3a2c; opacity: .55; }
		.bg .d { width: 380px; height: 380px; right: 18%; top: 32%; background: #3d3354; opacity: .22; }
		.noise {
			position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .3;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
		}
		.vignette { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0, 0, 0, .5)); }

		/* ---------- Стекло ---------- */
		.glass {
			background: var(--glass);
			border: 1px solid var(--line);
			backdrop-filter: blur(24px) saturate(1.5);
			-webkit-backdrop-filter: blur(24px) saturate(1.5);
			box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 60px rgba(0, 0, 0, .45);
		}

		/* ---------- Каркас ---------- */
		.app { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 18px; padding: 16px 18px; }

		/* ---------- Рейл навигации (иконки + подписи) ---------- */
		.rail {
			position: sticky; top: 16px; height: calc(100vh - 32px);
			display: flex; flex-direction: column; align-items: stretch;
			padding: 16px 12px; gap: 4px; border-radius: var(--r-lg);
		}
		.rail__logo {
			display: block; padding: 4px 10px 16px; margin-bottom: 8px;
			border-bottom: 1px solid var(--line);
			font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.1;
			color: #f3ead9; letter-spacing: .01em; white-space: nowrap;
		}
		.rail__logo em { font-style: italic; font-weight: 500; color: var(--sage); }
		.rail__link {
			display: flex; align-items: center; gap: 12px;
			height: 42px; padding: 0 12px; border-radius: 14px;
			color: var(--muted); white-space: nowrap;
			transition: background .15s, color .15s, box-shadow .15s;
		}
		.rail__link svg { width: 20px; height: 20px; flex-shrink: 0; }
		.rail__label { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
		.rail__link:hover { color: #fff; background: rgba(255, 255, 255, .06); }
		.rail__link.is-active {
			color: #eafaf0;
			background: linear-gradient(135deg, rgba(var(--sage-rgb), .24), rgba(var(--gold-rgb), .14));
			box-shadow: inset 0 0 0 1px rgba(var(--sage-rgb), .35), 0 0 22px rgba(var(--sage-rgb), .12);
		}
		.rail__sep { height: 1px; background: var(--line); margin: 8px 6px; }
		.rail__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 6px; }
		.avatar {
			width: 38px; height: 38px; border-radius: 50%;
			background: linear-gradient(135deg, #e3c693, #9a7b4f);
			color: #1c1409; font-size: 12px; font-weight: 700;
			display: grid; place-items: center;
			box-shadow: 0 0 18px rgba(var(--gold-rgb), .35);
		}

		/* ---------- Топбар ---------- */
		.topbar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 18px; }
		.search {
			flex: 1; display: flex; align-items: center; gap: 10px;
			height: 42px; padding: 0 16px; border-radius: 999px;
			background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
		}
		.search svg { width: 16px; height: 16px; color: var(--dim); flex-shrink: 0; }
		.search input { flex: 1; background: none; border: none; outline: none; color: var(--text); font: inherit; }
		.search input::placeholder { color: var(--dim); }
		.chip-meta {
			display: inline-flex; align-items: center; gap: 8px;
			height: 42px; padding: 0 16px; border-radius: 999px;
			background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
			font-size: 12.5px; color: var(--muted); white-space: nowrap;
		}
		.chip-meta i { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 10px var(--sage); }
		.icon-btn {
			width: 42px; height: 42px; border-radius: 50%;
			background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
			color: var(--muted); display: grid; place-items: center;
		}
		.icon-btn:hover { color: #fff; border-color: rgba(var(--sage-rgb), .5); }
		.icon-btn svg { width: 17px; height: 17px; }

		/* ---------- Hero ---------- */
		.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 30px 6px 8px; }
		.eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--sage); opacity: .85; margin-bottom: 8px; }
		.hero h1 { font-family: var(--font-display); font-size: 54px; font-weight: 600; line-height: 1.04; color: var(--heading); }
		.hero h1 em {
			font-style: italic;
			background: linear-gradient(120deg, #eedfbf, #c6a675);
			-webkit-background-clip: text; background-clip: text; color: transparent;
		}
		.hero__meta { text-align: right; }
		.hero__meta b { display: block; font-family: var(--font-display); font-size: 27px; font-weight: 600; color: var(--heading); line-height: 1.1; }
		.hero__meta span { font-size: 12.5px; color: var(--muted); }
		.hairline { height: 1px; margin: 18px 6px 22px; background: linear-gradient(90deg, rgba(var(--sage-rgb), .4), rgba(var(--gold-rgb), .25), transparent); }

		/* ---------- Стат-чипы со спарклайнами ---------- */
		.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
		.stats--hero { grid-template-columns: repeat(5, 1fr); }
		.stat { position: relative; overflow: hidden; padding: 16px 18px; border-radius: var(--r-md); }
		.stat__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.stat__row { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.cart-history__event { display: grid; grid-template-columns: minmax(0, 1fr) 126px; align-items: start; gap: 16px; padding: 11px 0; }
.cart-history__date { white-space: nowrap; text-align: right; }
@media (max-width: 560px) {
	.cart-history__event { grid-template-columns: 1fr; gap: 4px; }
	.cart-history__date { text-align: left; }
}
.stat__value { font-family: var(--font-display); font-size: 31px; font-weight: 600; color: var(--heading); line-height: 1; }
		.delta { font-size: 12px; font-weight: 600; }
		.delta--up { color: var(--sage); }
		.delta--down { color: var(--danger); }
		.stat .spark { position: absolute; right: 10px; bottom: 10px; width: 86px; height: 34px; opacity: .85; filter: drop-shadow(0 0 6px rgba(var(--sage-rgb), .35)); }
		.stat .spark path { fill: none; stroke: rgba(var(--sage-rgb), .8); stroke-width: 1.6; stroke-linecap: round; }
		.stat .spark--gold path { stroke: rgba(var(--gold-rgb), .85); }
		.stat .spark--gold { filter: drop-shadow(0 0 6px rgba(var(--gold-rgb), .35)); }

		/* ---------- Командная строка (фильтры) ---------- */
		.bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r-md); margin-bottom: 14px; }
		.bar .search { height: 38px; flex: 1 1 240px; }
		.chip-select {
			display: inline-flex; align-items: center; gap: 8px;
			height: 38px; padding: 0 14px; border-radius: 999px;
			background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
			color: var(--text); font-size: 13px; white-space: nowrap;
		}
		/* Без этого браузер рисует выпадающий список опций светлой системной
		   темой (белый фон + бледный текст, почти нечитаемо) — в отличие от
		   .select, у .chip-select не было своего цвета для option. */
		.chip-select option { background: #141815; color: var(--text); }
		/* optgroup игнорируется этим же системным светлым фоном отдельно от option —
		   без явного правила подписи групп («Клематисы», «Гортензии» и т.п.) рисуются
		   белой плашкой поверх тёмного списка. */
		.chip-select optgroup { background: #141815; color: var(--gold); font-style: normal; font-weight: 700; }
		.chip-select svg { width: 13px; height: 13px; color: var(--dim); }
		.chip-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; height: 38px; }
		.chip-toggle input { display: none; }
		.chip-toggle i { width: 34px; height: 20px; border-radius: 20px; background: rgba(255, 255, 255, .09); position: relative; transition: background .15s; }
		.chip-toggle i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
		.chip-toggle input:checked + i { background: var(--sage); box-shadow: 0 0 12px rgba(var(--sage-rgb), .4); }
		.chip-toggle input:checked + i::after { transform: translateX(14px); background: #0b130e; }
		.btn-glow {
			display: inline-flex; align-items: center; justify-content: center;
			height: 38px; padding: 0 20px; border-radius: 999px; border: none;
			background: linear-gradient(135deg, #c9efd4, #79b98f); color: #0b130e; font-weight: 700;
			box-shadow: 0 6px 22px rgba(var(--sage-rgb), .3), inset 0 1px 0 rgba(255, 255, 255, .4);
		}
		.btn-glow:hover { background: linear-gradient(135deg, #d6f2df, #8ac7a1); }
		.btn-ghost {
			display: inline-flex; align-items: center; justify-content: center;
			height: 38px; padding: 0 16px; border-radius: 999px;
			background: rgba(255, 255, 255, .05); border: 1px solid var(--line); color: var(--text); font-weight: 500;
		}
		.btn-ghost:hover { border-color: rgba(var(--sage-rgb), .5); }
		.bar__spacer { flex: 1; }

		/* ---------- Список товаров: стеклянные строки ---------- */
		.plist { display: flex; flex-direction: column; gap: 10px; }
		.prow {
			display: grid; align-items: center; gap: 16px;
			grid-template-columns: 20px 48px minmax(0, 1fr) 96px 60px 128px 26px 130px auto;
			padding: 12px 18px; border-radius: var(--r-md);
			transition: transform .15s, border-color .15s, box-shadow .15s;
		}
		.prow:hover {
			transform: translateY(-2px);
			border-color: rgba(var(--sage-rgb), .35);
			box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 18px 44px rgba(0, 0, 0, .5), 0 0 24px rgba(var(--sage-rgb), .08);
		}
		.prow__check input { width: 16px; height: 16px; accent-color: var(--sage); cursor: pointer; }
		.prow__thumb {
			/* Портретные пропорции (не квадрат) — вертикальные фото товара
			   (частый случай: саженец в кадре во весь рост) не обрезаются
			   в квадрат по бокам. */
			width: 48px; height: 64px; border-radius: 12px; flex-shrink: 0;
			display: grid; place-items: center;
			font-family: var(--font-display); font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, .88);
			box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .2);
		}
		img.prow__thumb { object-fit: cover; }
		.t1 { background: linear-gradient(135deg, #3f6b52, #24402f); }
		.t2 { background: linear-gradient(135deg, #7a6440, #4a3a26); }
		.t3 { background: linear-gradient(135deg, #4d5f7a, #2c3648); }
		.t4 { background: linear-gradient(135deg, #7a4d52, #472a2e); }
		.t5 { background: linear-gradient(135deg, #5a6b3f, #36402a); }
		.prow__main { flex: 1; min-width: 0; }
		.prow__name { font-weight: 600; font-size: 15px; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
		.prow__sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
		.prow__price { text-align: right; font-variant-numeric: tabular-nums; min-width: 92px; }
		.prow__price b { font-size: 16px; font-weight: 600; color: var(--heading); }
		.prow__price s { display: block; font-size: 12px; color: var(--dim); }
		.prow__stock { width: 56px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
		.prow__stock b { color: var(--text); font-weight: 600; }
		.pill {
			display: inline-flex; align-items: center; gap: 7px;
			height: 26px; padding: 0 12px; border-radius: 999px;
			font-size: 12px; font-weight: 600; white-space: nowrap;
		}
		/* Пилюля статуса — прямой ребёнок .prow/.orow (grid) — без этого
		   растягивается на всю ширину своей колонки (justify-self:stretch
		   по умолчанию), фон получается шире текста. */
		.prow > .pill, .orow > .pill { justify-self: start; }
		.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
		.pill--ok { background: rgba(var(--sage-rgb), .13); color: var(--sage); box-shadow: inset 0 0 0 1px rgba(var(--sage-rgb), .28); }
		.pill--out { background: rgba(255, 255, 255, .06); color: var(--muted); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
		.prow__hit { width: 26px; text-align: center; }
		.prow__hit svg { width: 16px; height: 16px; color: var(--gold); filter: drop-shadow(0 0 8px rgba(var(--gold-rgb), .5)); }
		.prow__ship { width: 128px; font-size: 13px; color: var(--muted); }
		.prow__edit {
			display: inline-flex; align-items: center; justify-content: center; justify-self: end;
			height: 32px; padding: 0 14px; border-radius: 999px;
			background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
			color: var(--text); font-size: 12.5px; font-weight: 500;
		}
		.prow__edit:hover { border-color: rgba(var(--sage-rgb), .5); color: var(--sage); }
		.prow__actions { display: flex; align-items: center; justify-self: end; gap: 12px; }

		/* ---------- Пагинация ---------- */
		.pages { display: flex; justify-content: center; margin-top: 22px; }
		.pages__in { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; }
		.pages a, .pages span { min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; color: var(--muted); font-weight: 500; padding: 0 6px; }
		.pages a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
		.pages .cur {
			background: linear-gradient(135deg, #c9efd4, #79b98f); color: #0b130e; font-weight: 700;
			box-shadow: 0 4px 16px rgba(var(--sage-rgb), .3);
		}
		.pages .dots { color: var(--dim); }

		@media (max-width: 1100px) {
			.stats { grid-template-columns: repeat(2, 1fr); }
			.hero h1 { font-size: 40px; }
			/* .prow/.orow (скрытые колонки + сетка) — в конце файла,
			   в блоке «Мобильная адаптация»: та же специфичность, что у
			   базовых правил, которые объявлены ниже по файлу — иначе
			   базовое правило выигрывает по порядку каскада. */
		}

/* ============================================================
   Расширение: Дашборд / Заказы / Медиатека
   ============================================================ */

:root { --line-soft: rgba(255, 255, 255, .06); }

/* Пилюли статусов заказов */
.pill--amber { background: rgba(227, 198, 147, .13); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(227, 198, 147, .3); }
.pill--red { background: rgba(227, 138, 128, .12); color: #e8a89e; box-shadow: inset 0 0 0 1px rgba(227, 138, 128, .28); }
.pill--blue { background: rgba(140, 170, 220, .12); color: #a9c3e8; box-shadow: inset 0 0 0 1px rgba(140, 170, 220, .26); }

/* Панель-карточка */
.panel { border-radius: var(--r-lg); padding: 20px 22px; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel__title { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--heading); }
.panel__note { font-size: 12.5px; color: var(--muted); }

/* Дашборд: сетка */
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }

/* Воронка конверсии: посетитель → заказ → выручка */
.funnel { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.funnel__step { flex: 1; min-width: 120px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; }
.funnel__step .stat__value { font-size: 28px; }
.funnel__arrow { color: var(--sage); font-size: 18px; display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }
.funnel__arrow span { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* Большой график */
.chart-wrap { position: relative; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid-line { stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.chart .axis-label { fill: rgba(236, 235, 228, .4); font-size: 11px; font-family: 'DM Sans', sans-serif; }
.chart .area-line { fill: none; stroke: rgba(169, 226, 188, .9); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(169, 226, 188, .35)); }
.chart .ma-line { fill: none; stroke: rgba(var(--gold-rgb), .8); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 5 4; }
.chart .dot { fill: #c9efd4; stroke: rgba(169, 226, 188, .5); stroke-width: 2; }

/* Легенда «факт / тренд (скользящая средняя)» над графиком */
.chart-legend { display: flex; gap: 16px; margin-bottom: 8px; }
.chart-legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.chart-legend__swatch { display: inline-block; width: 14px; height: 2px; border-radius: 2px; }
.chart-legend__swatch--fact { background: rgba(169, 226, 188, .9); }
.chart-legend__swatch--ma { background: repeating-linear-gradient(90deg, rgba(var(--gold-rgb), .8) 0 4px, transparent 4px 7px); }

/* Переключатель диапазона графика (3/6/12 мес) */
.chart-tabs { display: flex; gap: 4px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 999px; padding: 3px; flex-shrink: 0; }
.chart-tab { border: none; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 999px; transition: background .15s, color .15s; }
.chart-tab:hover { color: var(--heading); }
.chart-tab.is-active { background: rgba(var(--sage-rgb), .16); color: var(--sage); box-shadow: inset 0 0 0 1px rgba(var(--sage-rgb), .3); }

/* Единый блок метрик дашборда: переключатель Заказы/Выручка/Посетители/Конверсия сверху */
.metric-tabs { display: flex; gap: 4px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 999px; padding: 4px; flex-shrink: 0; flex-wrap: wrap; }
.metric-tab { border: none; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; transition: background .15s, color .15s; white-space: nowrap; }
.metric-tab:hover { color: var(--heading); }
.metric-tab.is-active { background: rgba(var(--sage-rgb), .18); color: var(--sage); box-shadow: inset 0 0 0 1px rgba(var(--sage-rgb), .32); }
.chart-panel__tabs { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.chart-range-form { display: flex; align-items: center; gap: 6px; }
.chart-range-form .input--sm { width: 132px; }
.chart-range-form__sep { color: var(--muted); font-size: 12.5px; }
@media (max-width: 680px) {
	.metrics-panel .panel__head { flex-direction: column; align-items: stretch; }
	.metric-tabs { justify-content: center; }
	.chart-panel__tabs { justify-content: center; }
}

/* Точка + вертикальная линия под курсором, тултип со значением дня */
.chart-cursor-line { stroke: rgba(255, 255, 255, .14); stroke-width: 1; }
.chart-dot { fill: #c9efd4; stroke: rgba(6, 8, 7, .8); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(169, 226, 188, .6)); }
.chart-tooltip {
	position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none;
	transform: translate(-50%, -100%);
	background: rgba(14, 18, 15, .92); border: 1px solid var(--line); border-radius: 10px;
	padding: 7px 11px; white-space: nowrap;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.chart-tooltip__date { font-size: 11px; color: var(--muted); }
.chart-tooltip__value { font-size: 14px; font-weight: 600; color: var(--heading); font-variant-numeric: tabular-nums; }
.chart-tooltip__ma { font-size: 12px; color: var(--gold); font-variant-numeric: tabular-nums; margin-top: 2px; }

/* Мини-списки (последние заказы, топ сортов) */
.mlist { display: flex; flex-direction: column; }
.mrow { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--line-soft); }
.mrow:last-child { border-bottom: none; }
.mrow__no { font-weight: 600; color: var(--heading); white-space: nowrap; }
.mrow__no span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.mrow__name { flex: 1; min-width: 0; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow__sum { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--heading); white-space: nowrap; }

.trow { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line-soft); }
.trow:last-child { border-bottom: none; }
.trow__thumb {
	width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
	display: grid; place-items: center;
	font-family: var(--font-display); font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .88);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.trow__name { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow__bar { width: 88px; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.trow__bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--sage), var(--gold)); }
.trow__n { width: 36px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--heading); }

/* Сегмент-чипы (фильтры статусов) */
.seg { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.seg button, .seg a { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; border: none; background: none; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.seg button:hover, .seg a:hover { color: var(--text); }
.seg button.is-on, .seg a.is-on { background: rgba(169, 226, 188, .16); color: var(--sage); box-shadow: inset 0 0 0 1px rgba(169, 226, 188, .3); }

/* Строки заказов: grid с фиксированными колонками — одинаковая раскладка
   во всех строках независимо от длины контента (раньше flex «плыл»). */
.orow {
	display: grid; align-items: center; gap: 16px;
	/* Клиент — capped (minmax(0,280px)), а не minmax(0,1fr): на широких
	   мониторах 1fr отъедал всю свободную ширину и утаскивал адрес/сумму/
	   статус в правый край. Лишнее пространство теперь достаётся адресу
	   (тоже minmax(0,1fr)) — там реально бывают длинные строки. */
	grid-template-columns: 20px 168px minmax(0, 280px) minmax(0, 1fr) 70px 100px 136px 82px auto;
	padding: 14px 18px; border-radius: var(--r-md);
	transition: transform .15s, border-color .15s, box-shadow .15s;
}
.orow:hover {
	transform: translateY(-2px);
	border-color: rgba(169, 226, 188, .35);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 18px 44px rgba(0, 0, 0, .5), 0 0 24px rgba(169, 226, 188, .08);
}
.orow__no { font-weight: 600; color: var(--heading); min-width: 168px; white-space: nowrap; }
.orow__no span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; margin-top: 1px; }
.orow__cust { min-width: 0; overflow: hidden; }
.orow__cust b { display: block; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orow__cust span { display: block; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orow__items { width: 76px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.orow__sum { min-width: 104px; text-align: right; font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--heading); white-space: nowrap; }
.orow__pr { width: 86px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 12px rgba(227, 198, 147, .4); white-space: nowrap; }
.olist { display: flex; flex-direction: column; gap: 10px; }

/* Медиатека */
.media-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 1280px) { .media-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1100px) { .media-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px) { .media-grid { grid-template-columns: repeat(2, 1fr); } }
.mtile { border-radius: var(--r-md); overflow: hidden; position: relative; transition: transform .15s, border-color .15s, box-shadow .15s; }
.mtile:hover {
	transform: translateY(-2px);
	border-color: rgba(169, 226, 188, .35);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 18px 44px rgba(0, 0, 0, .5);
}
.mtile__img {
	aspect-ratio: 1 / 1; position: relative; overflow: hidden;
	display: grid; place-items: center; background: #0d110e;
}
.mtile__img img, .mtile__img video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mtile__img svg.flower { width: 44%; height: 44%; opacity: .3; }
.mtile__kind {
	position: absolute; right: 8px; bottom: 8px;
	height: 22px; padding: 0 9px; border-radius: 999px;
	display: inline-flex; align-items: center; gap: 6px;
	background: rgba(10, 14, 11, .55); backdrop-filter: blur(6px);
	font-size: 10.5px; font-weight: 600; color: rgba(236, 235, 228, .85);
}
.mtile__check { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: rgba(10, 14, 11, .55); backdrop-filter: blur(6px); }
.mtile__check input { width: 14px; height: 14px; accent-color: var(--sage); cursor: pointer; }
.mtile__body { padding: 8px 10px 10px; }
.mtile__name { font-size: 11.5px; line-height: 1.3; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtile__meta { font-size: 10.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtile--add {
	display: grid; place-items: center; aspect-ratio: auto; min-height: 100%;
	border: 1.5px dashed rgba(255, 255, 255, .18); color: var(--muted);
	font-size: 13px; text-align: center; cursor: pointer; background: none;
}
.mtile--add:hover { border-color: rgba(169, 226, 188, .5); color: var(--sage); transform: none; box-shadow: none; }
.mtile--add b { display: block; font-size: 22px; font-weight: 400; margin-bottom: 4px; }

/* ============================================================
   Расширения поверх мокапа — то, чего в d-onyx*.html не было,
   но нужно для боя (логин, чекбокс у строки заказа, легаси-панели
   дашборда). Основной блок выше — не трогать, это 1:1 копия мокапа.
   ============================================================ */

/* Та же страховка, что была в старом admin.css: без неё [hidden]
   иногда проигрывает компонентным классам с той же специфичностью
   (0,0,1,0), которые идут позже в каскаде и явно задают display. */
[hidden] { display: none !important; }

/* Заказы: в мокапе .orow без чекбокса и без метода доставки/адреса — на бою
   нужны оба (bulk-статусы + недавно сделанная цветная пилюля способа доставки). */
.orow__check input { width: 16px; height: 16px; accent-color: var(--sage); cursor: pointer; }
.orow__deliver { width: auto; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.orow__deliver .pill { align-self: flex-start; height: 22px; padding: 0 9px; font-size: 11px; }
.orow__deliver-addr { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Панель массовых действий (bulkbar) — тот же приём, что и .bar/.chip-select. */
.bulkbar {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 16px; border-radius: var(--r-md);
	background: rgba(var(--sage-rgb), .08); border: 1px solid rgba(var(--sage-rgb), .3);
}
.bulkbar__count { font-size: 13px; color: var(--muted); }
.bulkbar__count b { color: var(--heading); }

/* Выход — реальная POST-форма (CSRF), а не просто <a>, как в мокапе;
   .rail__foot form { display:contents } — чтобы форма не ломала flex-раскладку. */
.rail__foot form { display: contents; }
button.rail__link { border: none; background: none; font: inherit; }

/* Уведомления (напр. «Удалено файлов: N») и список ошибок логина. */
.notice {
	padding: 12px 16px; margin-bottom: 14px; border-radius: var(--r-md);
	background: rgba(169, 226, 188, .1); border: 1px solid rgba(169, 226, 188, .25);
	color: var(--sage); font-size: 13.5px; font-weight: 500;
}
.errors {
	list-style: none; padding: 12px 16px; margin-bottom: 14px; border-radius: var(--r-md);
	background: rgba(227, 162, 151, .1); border: 1px solid rgba(227, 162, 151, .28);
	color: var(--danger); font-size: 13px;
}
.errors li + li { margin-top: 4px; }

/* Логин: стеклянная карточка по центру авроры. */
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { width: 100%; max-width: 380px; padding: 40px 36px; border-radius: var(--r-lg); text-align: center; }
.login-card .login-card__logo {
	margin: 0 auto 20px; width: 56px; height: 56px; border-radius: 16px;
	display: grid; place-items: center;
	font-family: var(--font-display); font-size: 26px; font-weight: 600; color: #0b130e;
	background: linear-gradient(135deg, #c9efd4, #6fae87);
	box-shadow: 0 0 30px rgba(var(--sage-rgb), .4), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.login-card h1 { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--heading); margin-bottom: 22px; }
.login-card .field { text-align: left; margin-bottom: 14px; }
.login-card .label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.login-card .input {
	width: 100%; height: 42px; padding: 0 14px; border-radius: 12px;
	background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
	color: var(--text); font: inherit;
}
.login-card .input:focus { outline: none; border-color: rgba(var(--sage-rgb), .5); }
.login-card .btn-glow { width: 100%; margin-top: 6px; }

/* Дашборд: легаси-панели ниже хиро — те же .stats/.stat/.mlist/.trow/.mrow
   мокапа, плюс кликабельные варианты (просто <a class="stat">/<a class="trow">
   вместо <div> — глобальное a{color:inherit} из мокапа уже всё красит верно). */
.stat.stat--link { display: block; text-decoration: none; transition: transform .15s, border-color .15s; }
.stat.stat--link:hover { transform: translateY(-2px); border-color: rgba(var(--sage-rgb), .35); }
.stat--alert .stat__value { color: var(--danger); }
a.trow, a.mrow { cursor: pointer; }
/* ============================================================
   Onyx · Лайтбокс медиатеки + кнопка загрузки
   ============================================================ */

.media-lightbox {
	position: fixed; inset: 0; z-index: 1000;
	display: flex; align-items: center; justify-content: center;
	background: rgba(5, 7, 6, .88);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	padding: 40px;
}
.media-lightbox[hidden] { display: none !important; }
.media-lightbox img, .media-lightbox video {
	max-width: 100%; max-height: 100%;
	border-radius: 14px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .1);
}
.media-lightbox__close {
	position: absolute; top: 18px; right: 22px;
	width: 42px; height: 42px; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .1); color: #fff;
	font-size: 22px; line-height: 1; cursor: pointer;
}
.media-lightbox__close:hover { background: rgba(255, 255, 255, .2); }
.mtile__img img, .mtile__img video { cursor: zoom-in; }

/* Пикер медиатеки в редакторе товара (карточка «Фотографии») — тот же
   .media-lightbox/.mtile/.media-grid/.upload-btn, что и на /admin/media,
   плюс центрированная карточка-бокс и сброс кнопки-плитки (там div, тут
   button — для клика и доступности). */
.mp__box { width: min(1400px, 94vw); max-height: 88vh; overflow-y: auto; }
/* Сброс только «родом из <button>» — фон/бордер/паддинг/шрифт — чтобы не
   затирать сам .mtile (position/overflow/border-radius и т.д. задаёт он,
   через класс .glass — фон/блюр, как у оригинальных плиток медиатеки). */
.mp__tile {
	appearance: none; background: none; border: 0; padding: 0; margin: 0;
	font: inherit; color: inherit; text-align: inherit; cursor: pointer; width: 100%;
}
.mp__tile:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
/* .mtile__img img по умолчанию cursor:zoom-in (лайтбокс на /admin/media) —
   тут клик выделяет, а не открывает просмотр, курсор должен быть pointer. */
.mp__tile .mtile__img img { cursor: pointer; }
.mp__tile.is-selected { outline: 2px solid var(--sage); outline-offset: -2px; }
/* Галочка выбора — тот же приём, что .mtile__check в /admin/media, но без
   вложенного <input> (плитка сама — button, чекбокс внутри кнопки невалиден
   и путает клик) — состояние переключается классом .is-selected на плитке. */
.mp__tile-check {
	position: absolute; top: 8px; left: 8px; width: 22px; height: 22px;
	display: grid; place-items: center; border-radius: 7px;
	background: rgba(10, 14, 11, .55); backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, .3); color: transparent;
	font-size: 13px; font-weight: 700; transition: background .15s, color .15s, border-color .15s;
}
.mp__tile.is-selected .mp__tile-check { background: var(--sage); color: #0b130e; border-color: var(--sage); }
.mp__error { color: #e88a8a; margin-top: 10px; }
.btn:disabled { opacity: .45; cursor: default; }

/* Загрузка файла: input=file, замаскированный под btn-glow */
.upload-btn {
	position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
	height: 38px; padding: 0 20px; border-radius: 999px; border: none;
	background: linear-gradient(135deg, #c9efd4, #79b98f); color: #0b130e; font-weight: 700; font-size: 13.5px;
	box-shadow: 0 6px 22px rgba(var(--sage-rgb), .3), inset 0 1px 0 rgba(255, 255, 255, .4);
	cursor: pointer;
}
.upload-btn:hover { background: linear-gradient(135deg, #d6f2df, #8ac7a1); }
.upload-btn input[type="file"] {
	position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0;
}

/* ============================================================
   Onyx · Легаси-компоненты внутренних страниц
   (product_edit, order_view, Семён, Опросы, очередь, API, blacklist).
   Разметку не трогаем — те же классы, что были в старом admin.css,
   но в токенах Onyx.
   ============================================================ */

/* Хлебные крошки и шапка страницы */
.crumbs { font-size: 12.5px; color: var(--muted); margin: 22px 6px 8px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--sage); }
.crumbs span { margin: 0 6px; color: var(--dim); }

.page-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap; margin: 6px 6px 18px;
}
.page-head h1 { font-family: var(--font-display); font-size: 34px; font-weight: 600; line-height: 1.15; color: var(--heading); }
.page-head h1 .count {
	font-family: var(--font-ui); font-size: 13px; font-weight: 600;
	color: var(--muted); background: rgba(255, 255, 255, .07);
	border-radius: 999px; padding: 3px 12px; vertical-align: middle; margin-left: 10px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.page-head .sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.page-head .sub a { color: var(--sage); }
.order-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Карточки */
.card {
	background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-lg);
	backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 60px rgba(0, 0, 0, .45);
}
.card + .card { margin-top: 16px; }
.card__head {
	padding: 15px 20px; border-bottom: 1px solid var(--line-soft);
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.card__head h2 { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--heading); }
.card__body { padding: 18px 20px; }

/* Кнопки (легаси) */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	height: 38px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent;
	font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer;
	transition: background .15s, border-color .15s, color .15s; white-space: nowrap; text-decoration: none;
}
.btn--primary {
	background: linear-gradient(135deg, #c9efd4, #79b98f); color: #0b130e; border: none;
	box-shadow: 0 6px 22px rgba(var(--sage-rgb), .3), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.btn--primary:hover { background: linear-gradient(135deg, #d6f2df, #8ac7a1); color: #0b130e; }
.btn--ghost {
	background: rgba(255, 255, 255, .05); border-color: var(--line); color: var(--text); font-weight: 500;
}
.btn--ghost:hover { border-color: rgba(var(--sage-rgb), .5); color: var(--sage); }
.btn--sm { height: 32px; padding: 0 13px; font-size: 12.5px; }

/* Формы */
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.label { display: block; font-size: 12.5px; font-weight: 600; color: var(--heading); margin-bottom: 6px; }
.label small { font-weight: 400; color: var(--muted); }
.input, .select {
	height: 38px; padding: 0 13px; border-radius: 12px;
	background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
	color: var(--text); font: inherit; font-size: 13.5px;
	transition: border-color .15s, background .15s;
}
.input::placeholder { color: var(--dim); }
.input:focus, .select:focus { outline: none; border-color: rgba(var(--sage-rgb), .55); box-shadow: 0 0 0 2px rgba(var(--sage-rgb), .22); }
.input.is-invalid { border-color: #c96a52 !important; box-shadow: 0 0 0 2px rgba(201, 106, 82, .25); }
.select option, select.input option { background: #141815; color: var(--text); }
.input--sm { width: 110px; }
.input--grow { flex: 1; min-width: 220px; }
.field .input, .field .select, .field textarea { width: 100%; }
textarea.input { height: auto; min-height: 110px; padding: 10px 13px; resize: vertical; line-height: 1.55; }
.hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form-row .input, .form-row .select { min-width: 0; }

.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text); cursor: pointer; user-select: none; }
.check input { accent-color: var(--sage); width: 15px; height: 15px; cursor: pointer; }

.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; color: var(--text); user-select: none; min-height: 38px; }
.switch input { display: none; }
.switch i { width: 34px; height: 20px; border-radius: 20px; background: rgba(255, 255, 255, .09); position: relative; transition: background .15s; flex-shrink: 0; }
.switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch input:checked + i { background: var(--sage); box-shadow: 0 0 12px rgba(var(--sage-rgb), .4); }
.switch input:checked + i::after { transform: translateX(14px); background: #0b130e; }

/* Фильтры (легаси, если остались) */
.filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }

/* Таблицы */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
	text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: var(--muted); padding: 11px 14px; border-bottom: 1px solid var(--line);
	background: rgba(255, 255, 255, .028); white-space: nowrap;
}
.table th a { color: inherit; text-decoration: none; }
.table th a:hover { color: var(--sage); }
.table td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: rgba(169, 226, 188, .05); }
.table tbody tr:last-child td { border-bottom: none; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .muted { color: var(--muted); }
.table .strong { font-weight: 600; color: var(--heading); }
.table .empty { color: var(--muted); text-align: center; padding: 22px 14px; }
.table--roomy td, .table--roomy th { font-size: 15px; padding: 14px; }
.row-service td { background: rgba(227, 198, 147, .05); }
tbody tr[data-href] { cursor: pointer; }

.thumb {
	width: 44px; height: 44px; border-radius: 10px; object-fit: cover; display: block;
	border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .05);
}
.thumb--lg { width: 64px; height: 64px; border-radius: 12px; }

.cell-main { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.cell-main__name { font-weight: 600; color: var(--heading); }
.cell-main__sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.cell-actions { white-space: nowrap; }
.cell-actions form { display: inline; margin: 0; }

.price-now { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--heading); }
.price-old { color: var(--dim); text-decoration: line-through; font-size: 12.5px; margin-right: 6px; white-space: nowrap; }

/* Легаси-пилюли → Onyx */
.pill--green { background: rgba(var(--sage-rgb), .13); color: var(--sage); box-shadow: inset 0 0 0 1px rgba(var(--sage-rgb), .28); }
.pill--gray { background: rgba(255, 255, 255, .06); color: var(--muted); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }

/* Хит-бейдж */
.hit { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); font-size: 12.5px; font-weight: 600; white-space: nowrap; text-shadow: 0 0 14px rgba(var(--gold-rgb), .4); }
.hit svg { width: 14px; height: 14px; }

/* Двухколоночный редактор */
.edit-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 16px; align-items: start; }
.edit-grid > aside, .edit-grid > div:last-child { position: sticky; top: 16px; }
@media (max-width: 980px) {
	.edit-grid { grid-template-columns: minmax(0, 1fr); }
	.edit-grid > aside, .edit-grid > div:last-child { position: static; }
}

/* Чек-список категорий */
.cat-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
.cat-list__child { margin-left: 22px; font-size: 12.5px; color: var(--muted); }

/* Галерея */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gallery__item {
	aspect-ratio: 1; border-radius: 12px; overflow: hidden;
	border: 1px solid var(--line-soft); position: relative; background: rgba(255, 255, 255, .05);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__item .gallery__tools {
	position: absolute; left: 0; right: 0; bottom: 0;
	display: flex; justify-content: center; gap: 4px; padding: 4px;
	background: rgba(10, 14, 11, .6); opacity: 0; transition: opacity .15s;
}
.gallery__item:hover .gallery__tools { opacity: 1; }
.gallery__tools form { display: inline; margin: 0; }
.gallery__tools button {
	width: 24px; height: 24px; border: none; border-radius: 6px;
	background: rgba(255, 255, 255, .92); color: #1c2a22; font-size: 13px; line-height: 1; cursor: pointer; padding: 0;
}
.gallery__tools button:hover { background: #fff; }
.gallery__tools button:disabled { opacity: .4; cursor: default; }

/* Атрибуты (просмотр) */
.attrs { width: 100%; border-collapse: collapse; font-size: 13px; }
.attrs td { padding: 7px 0; border-bottom: 1px dashed var(--line-soft); vertical-align: top; }
.attrs tr:last-child td { border-bottom: none; }
.attrs td:first-child { color: var(--muted); width: 45%; padding-right: 12px; }

/* Карточка заказа */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; font-size: 13.5px; }
.kv dt { color: var(--muted); }
.kv dd { font-weight: 500; color: var(--text); margin: 0; }
.total-row {
	display: flex; justify-content: space-between; align-items: baseline;
	padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--line);
}
.total-row b { font-family: var(--font-display); font-size: 23px; color: var(--heading); }
.total-row--right { justify-content: flex-end; gap: 16px; }

/* Варианты товара */
.var-grid {
	display: grid;
	grid-template-columns: minmax(140px, 1fr) 110px 110px 90px 130px auto;
	gap: 8px; align-items: center;
}
.var-grid--head { padding-bottom: 6px; font-size: 11.5px; color: var(--muted); }
.var-grid .input, .var-grid .select { min-width: 0; width: 100%; }
.var-row { display: flex; align-items: center; gap: 6px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.var-row:last-of-type { border-bottom: none; }
.var-row__form { flex: 1; margin: 0; }
.var-grid--add { margin-top: 12px; }

/* Список ответов */
.answers-list { margin: 0; padding-left: 18px; }
.answers-list li { margin: 2px 0; }

/* Поиск товара при добавлении позиции в заказ */
.item-picker__row { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.item-picker__search-wrap { position: relative; flex: 1 1 260px; min-width: 220px; }
.item-picker__search-wrap input { width: 100%; min-width: 0; }
.item-picker__results {
	position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
	max-height: 320px; overflow-y: auto;
	background: #141815; border: 1px solid var(--line); border-radius: 12px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
/* Вариант для пикера вне карточки (см. привязку клиента в order_view) —
   .card имеет backdrop-filter, а он создаёт свой stacking context: обычный
   position:absolute+z-index внутри карточки не может перекрыть СЛЕДУЮЩУЮ
   карточку ниже (та красится поверх независимо от z-index предыдущей).
   Тот же приём, что и у .media-lightbox — элемент вынесен из карточки в
   конец страницы, position:fixed, координаты считает JS по инпуту. */
.item-picker__results--fixed { position: fixed; top: auto; left: auto; right: auto; z-index: 1100; }
.item-picker__result { padding: 9px 12px; font-size: 13.5px; cursor: pointer; border-bottom: 1px solid var(--line-soft); color: var(--text); }
.item-picker__result:last-child { border-bottom: none; }
.item-picker__result:hover { background: rgba(169, 226, 188, .07); }
.item-picker__empty { padding: 10px 12px; font-size: 13px; color: var(--muted); }

/* Редактирование заказа: неактивные поля как текст */
.field input[data-editable]:disabled,
.field select[data-editable]:disabled,
.table input[data-editable]:disabled {
	background: transparent; border-color: transparent; color: var(--text);
	opacity: 1; padding-left: 0; cursor: default;
	-webkit-appearance: none; appearance: none;
}
.switch input[data-editable]:disabled ~ i { opacity: .55; cursor: default; }
[data-item-row].is-removed { opacity: .45; }
[data-item-row].is-removed td { text-decoration: line-through; }
[data-item-row].is-removed .item-qty-input, [data-item-row].is-removed input { text-decoration: none; }
tr.is-staged-new { background: rgba(169, 226, 188, .08); }
tr.is-staged-new .hint { display: block; margin-top: 2px; }

/* Ошибка-версия notice */
.notice--error {
	background: rgba(227, 162, 151, .1); border-color: rgba(227, 162, 151, .28); color: var(--danger);
}

/* Визуальный редактор описаний (editor.js) */
.rte { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .04); overflow: hidden; transition: border-color .15s; }
.rte:focus-within { border-color: rgba(var(--sage-rgb), .55); box-shadow: 0 0 0 2px rgba(var(--sage-rgb), .22); }
.rte__tabs { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--line-soft); background: rgba(255, 255, 255, .03); }
.rte__tab {
	border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0;
	background: none; padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 600;
	color: var(--muted); cursor: pointer;
}
.rte__tab:hover { color: var(--text); }
.rte__tab.is-active { background: rgba(255, 255, 255, .06); border-color: var(--line-soft); color: var(--heading); margin-bottom: -1px; }
.rte__toolbar { display: flex; align-items: center; gap: 3px; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); }
.rte__btn {
	min-width: 28px; height: 26px; padding: 0 7px; border: 1px solid transparent; border-radius: 6px;
	background: none; font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer; line-height: 1;
}
.rte__btn:hover { background: rgba(255, 255, 255, .07); border-color: var(--line-soft); }
.rte__area {
	min-height: 110px; max-height: 480px; overflow-y: auto; padding: 10px 13px;
	font-size: 13.5px; line-height: 1.55; color: var(--text); outline: none;
}
.rte__area p { margin: 0 0 8px; }
.rte__area p:last-child { margin-bottom: 0; }
.rte__area ul { margin: 0 0 8px; padding-left: 20px; }
.rte__area li { margin: 2px 0; }
.rte textarea.input { border: none; border-radius: 0; width: 100%; background: transparent; }
.rte textarea.input:focus { outline: none; box-shadow: none; }

/* Прочее */
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* ============================================================
   Мобильная адаптация
   Сайдбар (.rail) на десктопе — часть грида .app; на мобильном
   становится off-canvas drawer (fixed + translateX), открывается
   гамбургером в топбаре, закрывается бэкдропом/Escape/пунктом меню
   (JS — theme.js, блок «Мобильный сайдбар»).
   ============================================================ */

.hamburger {
	display: none; width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
	align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .05); border: 1px solid var(--line); color: var(--text);
}
.hamburger svg { width: 20px; height: 20px; }
.hamburger:hover { border-color: rgba(var(--sage-rgb), .5); color: var(--sage); }
.rail-backdrop { display: none; }

/* Сжатые .prow/.orow — через именованные grid-area, а не авто-раскладку по
   счёту: auto-placement привязан к порядку видимых элементов, из-за чего при
   скрытии части колонок остальные разъезжались по чужим трекам. Именованная
   область у каждого класса не зависит от того, сколько соседей скрыто.
   Порог 1400px — не 1100px: 9 колонок .orow (сайдбар 212px + фикс-колонки +
   gap'ы) физически не помещаются вплоть до ~1420px, при 1100-1400px имя
   клиента схлопывалось в 0 (см. историю правки). Должно идти ПОСЛЕ базовых
   .prow/.orow/.orow__deliver по каскаду (та же специфичность — выигрывает
   более позднее правило), поэтому блок здесь, в конце файла. */
@media (max-width: 1400px) {
	.prow {
		grid-template-columns: 20px 48px minmax(0, 1fr) 96px 60px 128px auto;
		grid-template-areas: "check thumb main price stock status edit";
	}
	.prow__check { grid-area: check; }
	.prow__thumb { grid-area: thumb; }
	.prow__main { grid-area: main; min-width: 0; }
	.prow__price { grid-area: price; }
	.prow__stock { grid-area: stock; }
	.prow .pill { grid-area: status; }
	.prow__edit, .prow__actions { grid-area: edit; }
	.prow__ship, .prow__hit { display: none; }

	.orow {
		grid-template-columns: 20px 150px minmax(0, 1fr) 100px 130px auto;
		grid-template-areas: "check no cust sum status edit";
	}
	.orow__check { grid-area: check; }
	.orow__no { grid-area: no; min-width: 0; }
	.orow__cust { grid-area: cust; }
	.orow__sum { grid-area: sum; }
	.orow .pill { grid-area: status; }
	.orow .prow__edit { grid-area: edit; }
	.orow__deliver, .orow__items, .orow__pr { display: none; }
}

@media (max-width: 860px) {
	.app { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 12px; }
	.hamburger { display: inline-flex; }

	.rail {
		position: fixed; top: 0; left: 0; z-index: 100;
		width: 250px; height: 100vh; border-radius: 0; border-right: 1px solid var(--line);
		transform: translateX(-100%); transition: transform .25s ease;
	}
	.rail.is-open { transform: translateX(0); }

	.rail-backdrop {
		display: block; position: fixed; inset: 0; z-index: 90;
		background: rgba(4, 6, 5, .6); opacity: 0; pointer-events: none; transition: opacity .2s ease;
	}
	.rail-backdrop.is-open { opacity: 1; pointer-events: auto; }
	body.rail-open { overflow: hidden; }

	/* Хамбургер + поиск + аватар — в одну строку (не переносим поиск вниз,
	   иначе топбар растягивается по высоте и съедает экран). */
	.topbar { flex-wrap: nowrap; gap: 8px; }
	.search { min-width: 0; padding: 0 12px; }
	.search input { min-width: 0; }
	.chip-meta { display: none; }

	.hero { flex-wrap: wrap; row-gap: 10px; margin-top: 18px; }
	.hero__meta { text-align: left; }
	.hero h1 { font-size: 32px; }

	/* iOS Safari зумит страницу при фокусе на поле с font-size < 16px —
	   ломает раскладку до ручного возврата масштаба. 16px — порог, ниже
	   которого зум срабатывает гарантированно. */
	.input, .select, .chip-select, .search input, textarea.input { font-size: 16px; }
}

@media (max-width: 680px) {
	/* 2 в ряд, а не во всю ширину — иначе подпись+число смотрятся непропорционально
	   крупно на пустой карточке и съедают высоту экрана. */
	.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.stat { padding: 12px 14px; }
	.stat__label { font-size: 10px; letter-spacing: .08em; }
	.stat__value { font-size: 24px; }
	.hero h1 { font-size: 27px; }
	.page-head h1 { font-size: 26px; }
	.grid-2 { grid-template-columns: minmax(0, 1fr); }

	/* Фильтры (категория/наличие/сортировка) — по 2 в ряд вместо
	   растягивания каждого во всю ширину. */
	.bar { gap: 8px; padding: 10px 12px; }
	.bar .search { flex: 1 1 100%; }
	.bar .chip-select { flex: 1 1 calc(50% - 4px); min-width: 0; font-size: 12.5px; padding: 0 10px; }
	.bar .chip-toggle { flex: 1 1 100%; justify-content: center; }
	.bar .bar__spacer { flex-basis: 100%; height: 0; }
	.bar .btn-ghost, .bar .btn-glow { flex: 1 1 calc(50% - 4px); }

	/* Редактор вариаций товара — фикс-колонки не сжимаются, вместо этого
	   скроллится вся секция (не подгонять индивидуальные поля, их набор
	   специфичен для карточки товара). */
	.card__body { overflow-x: auto; }
	.var-grid { min-width: 620px; }

	/* Строки товаров/заказов: 9-колоночная сетка → компактная карточка.
	   Второстепенные колонки скрыты (доступны при открытии карточки —
	   вся строка кликабельна через data-href). */
	.prow {
		grid-template-columns: 20px 40px minmax(0, 1fr) auto;
		grid-template-areas: "check thumb main  price" "check thumb pillrow pillrow";
		row-gap: 6px;
	}
	.prow__check { grid-area: check; }
	.prow__thumb { grid-area: thumb; width: 40px; height: 52px; font-size: 12px; }
	.prow__main { grid-area: main; min-width: 0; }
	.prow__price { grid-area: price; min-width: 0; }
	.prow__stock, .prow__hit, .prow__ship { display: none; }
	.prow .pill { grid-area: pillrow; justify-self: start; }

	.orow {
		grid-template-columns: 20px minmax(0, 1fr) auto;
		grid-template-areas: "check no   sum" "check cust status";
		row-gap: 6px;
	}
	.orow__check { grid-area: check; }
	.orow__no { grid-area: no; min-width: 0; }
	.orow__cust { grid-area: cust; min-width: 0; }
	.orow__sum { grid-area: sum; }
	.orow__deliver, .orow__items, .orow__pr { display: none; }
	.orow .pill { grid-area: status; justify-self: end; }

	.prow__edit, .prow__actions { display: none; }

	.seg { flex-wrap: wrap; }
}
