/* ==================================================================
   Elety — админ-консоль, волна 2
   По ELETY-ADMIN-WAVE2-CLAUDE-HANDOFF.md и макетам Figma (80:2, 87:2).

   Консоль — плотный рабочий инструмент: администратор сидит в ней весь
   день. Отсюда меньше воздуха, больше данных на экране и таблицы,
   рассчитанные на 200 строк, а не на красивый скриншот.

   Живёт рядом со старой консолью, включается флагом ?ui=2.
================================================================== */

.ec {
	/* ---- цвет: тот же язык, что в кабинете, но плотнее ---- */
	--ec-canvas:   #f2f1ec;
	--ec-surface:  #ffffff;
	--ec-ink:      #132c2e;
	--ec-ink-2:    #3c5153;
	--ec-muted:    #6b7d7e;
	--ec-line:     #dfe3dd;
	--ec-line-soft:#ebeee9;

	--ec-coral:      #f05a3c;   /* только главное действие */
	--ec-coral-dark: #d4482c;
	--ec-coral-soft: #fde8e3;

	--ec-teal:      #147d76;    /* подтверждено, успешно */
	--ec-teal-soft: #e3f0ee;

	--ec-amber:     #a86a12;    /* ожидание, требует внимания */
	--ec-amber-soft:#fdefd6;

	--ec-red:       #b3392a;    /* ошибка, необратимое действие */
	--ec-red-soft:  #fbe6e3;

	--ec-r:      10px;
	--ec-r-sm:   8px;
	--ec-r-pill: 999px;

	--ec-s1: 4px;  --ec-s2: 8px;  --ec-s3: 12px;
	--ec-s4: 16px; --ec-s5: 24px; --ec-s6: 32px;

	--ec-side: 208px;
	--ec-row:  64px;            /* минимальная высота строки таблицы */

	--ec-shadow: 0 10px 30px rgba(19,44,46,.10), 0 2px 5px rgba(19,44,46,.05);

	background: var(--ec-canvas);
	color: var(--ec-ink);
	font-family: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
}

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

.ec :where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure) { margin: 0; }
.ec :where(ul,ol) { padding: 0; list-style: none; }
.ec :where(img) { display: block; max-width: 100%; }
.ec :where(a) { color: inherit; text-decoration: none; }
.ec :where(button, input, select, textarea) { font: inherit; color: inherit; }

/* Суммы, часы и счётчики не должны прыгать по ширине */
.ec :where(.ec-num, .ec-kpi-val, td.is-num, .ec-money) { font-variant-numeric: tabular-nums; }

.ec-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==================================================================
   Каркас консоли
================================================================== */

.ec-shell { display: grid; grid-template-columns: var(--ec-side) 1fr; min-height: 100vh; }

.ec-side {
	background: var(--ec-ink);
	color: #fff;
	padding: var(--ec-s5) var(--ec-s3);
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
}

.ec-brand { font-size: 19px; font-weight: 700; letter-spacing: -.02em; padding: 0 var(--ec-s3) var(--ec-s6); }

.ec-nav { display: grid; gap: 2px; }

.ec-nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px var(--ec-s3);
	border-radius: var(--ec-r-sm);
	font-size: 14px;
	color: rgba(255,255,255,.72);
	min-height: 40px;
}

.ec-nav a svg { width: 17px; height: 17px; flex: none; }
.ec-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.ec-nav a.is-active { background: rgba(255,255,255,.12); color: #fff; font-weight: 500; }
.ec-nav a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.ec-side-foot { margin-top: auto; padding: var(--ec-s3); font-size: 13px; color: rgba(255,255,255,.5); }

.ec-main { min-width: 0; padding: var(--ec-s5) var(--ec-s6) var(--ec-s6); overflow-x: auto; }

/* ---- шапка страницы ---- */

.ec-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ec-s4);
	flex-wrap: wrap;
	margin-bottom: var(--ec-s4);
}

.ec-head h1 { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.02em; }
.ec-head-sub { margin-top: 3px; font-size: 13px; color: var(--ec-muted); }
.ec-head-actions { display: flex; align-items: center; gap: var(--ec-s2); flex-wrap: wrap; }

/* ==================================================================
   Кнопки и управление
================================================================== */

.ec .ec-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 40px;
	padding: 9px 16px;
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-r-sm);
	background: var(--ec-surface);
	color: var(--ec-ink);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color .15s ease, background .15s ease;
}

.ec .ec-btn:hover { border-color: var(--ec-ink-2); }
.ec .ec-btn:focus-visible { outline: 2px solid var(--ec-coral); outline-offset: 2px; }
.ec .ec-btn[disabled], .ec .ec-btn[aria-disabled="true"] {
	background: var(--ec-line-soft);
	color: var(--ec-muted);
	border-color: var(--ec-line);
	cursor: not-allowed;
}

.ec .ec-btn--primary { background: var(--ec-coral); border-color: var(--ec-coral); color: #fff; font-weight: 600; }
.ec .ec-btn--primary:hover { background: var(--ec-coral-dark); border-color: var(--ec-coral-dark); }
.ec .ec-btn--danger { border-color: #e0b3ac; color: var(--ec-red); }
.ec .ec-btn--danger:hover { background: var(--ec-red-soft); border-color: var(--ec-red); }
.ec .ec-btn--sm { min-height: 32px; padding: 5px 11px; font-size: 13px; }
.ec-btn svg { width: 15px; height: 15px; flex: none; }

.ec-seg { display: inline-flex; gap: var(--ec-s2); }

.ec-seg a, .ec-seg button {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 9px 18px;
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-r-sm);
	background: var(--ec-surface);
	font-size: 14px;
	cursor: pointer;
}

.ec-seg .is-active { background: var(--ec-coral); border-color: var(--ec-coral); color: #fff; font-weight: 600; }

/* ==================================================================
   Показатели
================================================================== */

.ec-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--ec-s3); margin-bottom: var(--ec-s4); }

.ec-kpi {
	background: var(--ec-surface);
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-r);
	padding: 12px var(--ec-s4) 14px;
}

.ec-kpi-val { font-size: 24px; line-height: 28px; font-weight: 700; letter-spacing: -.02em; }
.ec-kpi-cap { font-size: 12px; color: var(--ec-muted); margin-top: 2px; }
.ec-kpi--warn { background: var(--ec-amber-soft); border-color: #eddcbc; }
.ec-kpi--warn .ec-kpi-cap { color: #8a5710; }

/* ==================================================================
   Статусы: всегда значок и подпись, не только цвет
================================================================== */

.ec-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--ec-r-pill);
	background: var(--ec-teal-soft);
	color: var(--ec-teal);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.ec-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.ec-badge--wait { background: var(--ec-amber-soft); color: var(--ec-amber); }
.ec-badge--bad { background: var(--ec-red-soft); color: var(--ec-red); }
.ec-badge--muted { background: var(--ec-line-soft); color: var(--ec-ink-2); }
.ec-badge--slot { background: var(--ec-amber-soft); color: #8a5710; }
.ec-badge--slot::before { border-radius: 1px; }

/* Присутствие: буква + подпись для скринридера */
.ec-att { display: inline-flex; gap: 5px; }

.ec-att span {
	width: 26px; height: 26px;
	display: grid;
	place-items: center;
	border-radius: 7px;
	background: var(--ec-line-soft);
	color: var(--ec-muted);
	font-size: 12px;
	font-weight: 700;
}

.ec-att span.is-on { background: var(--ec-teal-soft); color: var(--ec-teal); }

/* ==================================================================
   Таблица: контракт из инструкции
================================================================== */

.ec-panel {
	background: var(--ec-surface);
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-r);
	overflow: hidden;
}

.ec-filters {
	display: flex;
	align-items: center;
	gap: var(--ec-s2);
	flex-wrap: wrap;
	padding: var(--ec-s3) var(--ec-s4);
	border-bottom: 1px solid var(--ec-line);
	background: var(--ec-surface);
}

.ec-input, .ec-select {
	min-height: 40px;
	padding: 9px 12px;
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-r-sm);
	background: var(--ec-surface);
	font-size: 14px;
	color: var(--ec-ink);
}

.ec-input:focus, .ec-select:focus { outline: none; border-color: var(--ec-teal); box-shadow: 0 0 0 3px rgba(20,125,118,.14); }
.ec-input--search { min-width: 260px; }
.ec-filters-clear { margin-left: auto; }

.ec-table-wrap { overflow: auto; max-height: calc(100vh - 320px); }

.ec-table { width: 100%; border-collapse: separate; border-spacing: 0; }

.ec-table th {
	position: sticky;
	top: 0;
	z-index: 3;
	background: var(--ec-surface);
	border-bottom: 1px solid var(--ec-line);
	padding: 11px var(--ec-s3);
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	color: var(--ec-muted);
	white-space: nowrap;
}

.ec-table th a { display: inline-flex; align-items: center; gap: 5px; }
.ec-table th a:hover { color: var(--ec-ink); }

.ec-table td {
	padding: var(--ec-s3);
	border-bottom: 1px solid var(--ec-line-soft);
	height: var(--ec-row);
	vertical-align: middle;
}

.ec-table tr:hover td { background: #fbfbf9; }
.ec-table tr.is-selected td { background: var(--ec-teal-soft); }
.ec-table td.is-num, .ec-table th.is-num { text-align: right; }

/* Первая колонка остаётся на месте при горизонтальной прокрутке */
.ec-table th.is-sticky, .ec-table td.is-sticky {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--ec-surface);
	box-shadow: 1px 0 0 var(--ec-line-soft);
}

.ec-table th.is-sticky { z-index: 4; }
.ec-table tr:hover td.is-sticky { background: #fbfbf9; }
.ec-table tr.is-selected td.is-sticky { background: var(--ec-teal-soft); }

/* Длинное имя — две строки, дальше многоточие */
.ec-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 22ch;
}

.ec-nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 24ch; }
.ec-cell-sub { font-size: 12px; color: var(--ec-muted); margin-top: 2px; }

/* Полоса заполненности отчётов */
.ec-bar { width: 92px; height: 6px; border-radius: 3px; background: var(--ec-line); overflow: hidden; }
.ec-bar i { display: block; height: 100%; background: var(--ec-teal); }
.ec-bar--warn i { background: var(--ec-amber); }

/* ---- низ таблицы ---- */

.ec-tfoot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ec-s3);
	padding: var(--ec-s3) var(--ec-s4);
	border-top: 1px solid var(--ec-line);
	font-size: 13px;
	color: var(--ec-muted);
	flex-wrap: wrap;
}

.ec-pages { display: flex; align-items: center; gap: var(--ec-s2); }
.ec-pages .ec-btn--sm { min-width: 34px; }
.ec-pagesize { display: flex; align-items: center; gap: var(--ec-s2); }

/* ---- панель выбранных строк ---- */

.ec-selection {
	display: flex;
	align-items: center;
	gap: var(--ec-s3);
	padding: var(--ec-s3) var(--ec-s4);
	background: var(--ec-ink);
	color: #fff;
	font-size: 13px;
}

.ec-selection .ec-btn { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.ec-selection .ec-btn:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.ec-selection .ec-btn--primary { background: var(--ec-coral); border-color: var(--ec-coral); }

/* ==================================================================
   Состояния: пусто, загрузка, ошибка, нет прав
================================================================== */

.ec-state { padding: 56px var(--ec-s5); text-align: center; }
.ec-state h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.ec-state p { font-size: 14px; color: var(--ec-muted); max-width: 44ch; margin: 0 auto var(--ec-s4); }

.ec-state-icon {
	width: 52px; height: 52px;
	margin: 0 auto var(--ec-s3);
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ec-line-soft);
	color: var(--ec-muted);
}

.ec-state--bad .ec-state-icon { background: var(--ec-red-soft); color: var(--ec-red); }
.ec-state--lock .ec-state-icon { background: var(--ec-amber-soft); color: var(--ec-amber); }
.ec-state-icon svg { width: 24px; height: 24px; }

/* Скелет сохраняет ширину колонок — таблица не «прыгает» при обновлении */
.ec-skel { display: block; height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--ec-line-soft) 25%, #f6f7f4 50%, var(--ec-line-soft) 75%); background-size: 200% 100%; animation: ec-sh 1.2s infinite; }
@keyframes ec-sh { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.ec-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 11px var(--ec-s4);
	border-radius: var(--ec-r);
	background: var(--ec-teal-soft);
	color: #0f5f5a;
	font-size: 13px;
	margin-bottom: var(--ec-s3);
}

.ec-note--warn { background: var(--ec-amber-soft); color: #8a5710; }
.ec-note--bad { background: var(--ec-red-soft); color: var(--ec-red); }
.ec-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }

/* ==================================================================
   Доска кабинетов
================================================================== */

.ec-board { background: var(--ec-surface); border: 1px solid var(--ec-line); border-radius: var(--ec-r); overflow: auto; max-height: calc(100vh - 260px); }

.ec-board-grid { display: grid; grid-template-columns: 68px repeat(var(--cols), minmax(132px, 1fr)); min-width: max-content; }

.ec-board-corner, .ec-board-head {
	position: sticky;
	top: 0;
	z-index: 3;
	background: var(--ec-surface);
	border-bottom: 1px solid var(--ec-line);
	padding: 10px var(--ec-s3);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.ec-board-corner { left: 0; z-index: 5; color: var(--ec-muted); }

/* Час занимает две строки подписи (преподаватель и ученик), как в таблице
   кабинетов, — в прежние 36px они не помещались */
.ec-board-times { position: sticky; left: 0; z-index: 2; background: var(--ec-surface); border-right: 1px solid var(--ec-line); }
.ec-board-time { height: 64px; position: relative; }
.ec-board-time span { position: absolute; top: -7px; right: 8px; font-size: 11px; color: var(--ec-muted); }
/* первая подпись иначе срезается верхним краем доски */
.ec-board-time:first-child span { top: 1px; }

/* Линии сетки: час — сплошная, половина часа — едва заметная, между
   кабинетами — вертикальная. Без них по доске нельзя было прочитать, кто в
   каком кабинете и в какое время стоит. */
.ec-board-col { position: relative; border-left: 1px solid var(--ec-line); }
.ec-board-cell {
	/* ячейка — ссылка «поставить урок», а ссылка по умолчанию строчная:
	   высота и линия к ней не применялись, и сетка часов не рисовалась вовсе */
	display: block;
	height: 64px;
	border-top: 1px solid rgba(19,44,46,.16);
	/* получас — едва заметный пунктир: помогает попасть взглядом в время,
	   но не спорит с часовой линией */
	background-image: linear-gradient(to right, rgba(19,44,46,.10) 0 4px, transparent 4px 10px);
	background-size: 10px 1px;
	background-position: 0 50%;
	background-repeat: repeat-x;
}

.ec-ev {
	position: absolute;
	left: 3px; right: 3px;
	border-left: 3px solid var(--ec-teal);
	border-radius: 6px;
	background: var(--ec-teal-soft);
	padding: 5px 7px;
	font-size: 11px;
	line-height: 1.25;
	overflow: hidden;
	z-index: 2;
}

.ec-ev b { display: block; font-weight: 700; }
.ec-ev.is-wait { border-color: var(--ec-red); background: var(--ec-red-soft); }
.ec-ev.is-future { border-color: #8fa3a5; background: #eef1f0; }
.ec-ev.is-live { border-color: var(--ec-coral); background: var(--ec-coral-soft); }

/* Слот из таблицы StudyRoom — не урок Elety. Отличается не только цветом:
   штриховка, пунктирная рамка и подпись «слот StudyRoom». */
.ec-ev.is-slot {
	border: 1px dashed var(--ec-amber);
	border-left: 3px solid var(--ec-amber);
	background:
		repeating-linear-gradient(45deg, rgba(168,106,18,.10) 0 6px, transparent 6px 12px),
		var(--ec-amber-soft);
	color: #7a5210;
}

/* Ссылки внутри подписей: цвет наследовался от текста, и «Войдите» выглядело
   обычным словом — его не нажимали. Касается формы создания школы и подсказок
   в консоли. */
.ec-hint a, .ec-foot-note a, .ec-auth-box a { color: var(--ec-coral); text-decoration: underline; text-underline-offset: 2px; }
.ec-hint a:hover, .ec-foot-note a:hover, .ec-auth-box a:hover { color: var(--ec-coral-dark); }

/* Демо-кабинеты на главной консоли: вход в продукт глазами преподавателя и
   ученика. Блок стоит выше цифр, пока у школы своих данных нет. */
.ec-demo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ec-s4); margin-bottom: var(--ec-s4); }
.ec-demo-copy { flex: 1 1 420px; }
.ec-demo-copy p { margin-top: 4px; max-width: 640px; font-size: 13px; line-height: 19px; }
.ec-demo-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ec-s2); }
/* каждая кнопка — своя POST-форма; без этого они встают в столбик */
.ec-demo-acts form { display: inline-flex; margin: 0; }

/* Подпись урока строками, как в таблице кабинетов: преподаватель, под ним
   ученик. ID держим рядом с именем — по именам в школе бывают совпадения. */
.ec-ev-who { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-ev-who i { font-style: normal; opacity: .6; font-size: 10px; }
.ec-ev-who--student { font-weight: 600; }
.ec-ev-who--none { opacity: .7; font-style: italic; }

.ec-ev-kind { display: block; font-size: 10px; opacity: .85; margin-top: 1px; }
.ec-chip-student { opacity: .8; }
.ec-ev:hover { filter: brightness(.97); }
.ec-ev:focus-visible { outline: 2px solid var(--ec-coral); outline-offset: 1px; }

/* числовые колонки: подпись и значение по одной оси */
.ec-table th.is-num { text-align: center; }

.ec-legend { display: flex; gap: var(--ec-s4); flex-wrap: wrap; margin-top: var(--ec-s4); font-size: 12px; color: var(--ec-muted); }
.ec-lg { display: inline-flex; align-items: center; gap: 6px; }
.ec-lg::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--ec-teal); }
.ec-lg--wait::before { background: var(--ec-red); }
.ec-lg--future::before { background: #8fa3a5; }
.ec-lg--slot::before { background: var(--ec-amber); }
.ec-lg--live::before { background: var(--ec-coral); }

/* ==================================================================
   Узкие экраны: консоль остаётся плотной, но не ломается
================================================================== */

@media (max-width: 1279px) {
	.ec { --ec-side: 64px; }
	.ec-brand { font-size: 0; padding-left: 0; padding-right: 0; text-align: center; }
	.ec-brand::first-letter { font-size: 20px; }
	.ec-nav a { justify-content: center; padding: 11px 0; }
	.ec-nav a span { display: none; }
	.ec-side-foot { display: none; }
	.ec-main { padding: var(--ec-s4); }
	.ec-warn-narrow { display: flex; }
}

.ec-warn-narrow { display: none; }

/* ==================================================================
   Экран «Онлайн-уроки дня» и общие табличные примитивы
================================================================== */

/* кнопка-иконка: 44px тач-таргет, как в кабинете */
.ec-btn--icon { padding: 0; width: 38px; justify-content: center; }
.ec-btn--icon svg { width: 16px; height: 16px; }

.ec-daynav { display: flex; gap: var(--ec-s2); align-items: center; }

.ec-datepick { display: flex; gap: var(--ec-s2); align-items: center; }
.ec-datepick .ec-input { width: 152px; }

/* время урока: начало крупно, конец приглушённо — читается по вертикали */
.ec-time b { display: block; font-size: 14px; }
.ec-time span { display: block; font-size: 12px; color: var(--ec-muted); }

.ec-name a { color: var(--ec-ink); text-decoration: none; border-bottom: 1px solid var(--ec-line); }
.ec-name a:hover { color: var(--ec-coral); border-bottom-color: currentColor; }

.ec-dim { color: var(--ec-muted); }
.ec-half { color: var(--ec-amber); }

.ec-tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--ec-r-pill);
	background: var(--ec-line-soft);
	color: var(--ec-ink-2);
	font-size: 12px;
	white-space: nowrap;
}
.ec-tag--offline { background: var(--ec-amber-soft); color: var(--ec-amber); }

/* присутствие: словами и временем, а не одними буквами T/S */
.ec-presence { display: flex; flex-direction: column; gap: 2px; }
.ec-pres { font-size: 12px; color: var(--ec-muted); white-space: nowrap; }
.ec-pres b { font-weight: 500; color: var(--ec-muted); }
.ec-pres::before {
	content: "";
	display: inline-block;
	width: 8px; height: 8px;
	margin-right: 6px;
	border-radius: 50%;
	border: 1px solid var(--ec-line);
	background: var(--ec-surface);
	vertical-align: baseline;
}
.ec-pres.is-in { color: var(--ec-ink-2); }
.ec-pres.is-in b { color: var(--ec-teal); font-weight: 600; }
.ec-pres.is-in::before { background: var(--ec-teal); border-color: var(--ec-teal); }

/* проблемная строка: не только цветом — слева полоса */
.ec-table tbody tr.is-bad td:first-child { box-shadow: inset 3px 0 0 var(--ec-red); }

.ec-state-actions { display: flex; gap: var(--ec-s2); justify-content: center; flex-wrap: wrap; }

.ec-foot-note { margin-top: var(--ec-s3); font-size: 12px; color: var(--ec-muted); max-width: 88ch; }
/* ==================================================================
   Репорты: сводка пар и карточка пары
================================================================== */

.ec-badge--good { background: var(--ec-teal-soft); color: var(--ec-teal); }
.ec-badge--good::before { background: var(--ec-teal); }

.ec-kpi--bad { border-color: var(--ec-red); background: var(--ec-red-soft); }
.ec-kpi--bad .ec-kpi-cap { color: var(--ec-red); }

.ec-btn--ghost { background: transparent; border-color: transparent; color: var(--ec-muted); }
.ec-btn--ghost:hover { color: var(--ec-ink); background: var(--ec-line-soft); }

/* подтверждено вручную: действие «снять», а не главная кнопка */
.ec-btn--done { background: var(--ec-teal-soft); border-color: var(--ec-teal); color: var(--ec-teal); }
.ec-btn--done:hover { background: var(--ec-teal); color: #fff; }

/* решение по заявке в «Пользователях»: принять — заливка бирюзой,
   отклонить — красный контур (см. .ec-btn--sm.ec-btn--danger) */
.ec .ec-btn--approve { background: var(--ec-teal); border-color: var(--ec-teal); color: #fff; font-weight: 600; }
.ec .ec-btn--approve:hover { filter: brightness(.92); }

.ec-back {
	display: inline-flex;
	align-items: center;
	gap: var(--ec-s2);
	margin-bottom: var(--ec-s3);
	color: var(--ec-muted);
	text-decoration: none;
	font-size: 13px;
}
.ec-back:hover { color: var(--ec-coral); }
.ec-back svg { width: 14px; height: 14px; }

.ec-field { display: flex; flex-direction: column; gap: 4px; }
.ec-field label { font-size: 12px; color: var(--ec-muted); }

.ec-check { display: inline-flex; align-items: center; gap: var(--ec-s2); font-size: 13px; cursor: pointer; }
.ec-check input { width: 16px; height: 16px; accent-color: var(--ec-coral); }

/* пара: ученик крупно, преподаватель под ним — сортировка глазами идёт по ученику */
.ec-pair a { display: block; text-decoration: none; color: var(--ec-ink); }
.ec-pair a b { display: block; font-weight: 600; }
.ec-pair a span { display: block; font-size: 12px; color: var(--ec-muted); }
.ec-pair a:hover b { color: var(--ec-coral); }
.ec-pair .ec-tag { margin-top: 4px; }

.ec-fill { display: flex; align-items: center; gap: var(--ec-s2); }
.ec-fill .ec-bar { flex: 1; min-width: 72px; height: 6px; border-radius: var(--ec-r-pill); background: var(--ec-line-soft); overflow: hidden; }
.ec-fill .ec-bar span { display: block; height: 100%; background: var(--ec-teal); }
.ec-fill-gap { color: var(--ec-red); font-weight: 600; }

.ec-month {
	margin: var(--ec-s5) 0 var(--ec-s3);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ec-muted);
}

.ec-program { display: flex; flex-wrap: wrap; gap: var(--ec-s3) var(--ec-s5); align-items: baseline; padding: var(--ec-s3) var(--ec-s4); }
.ec-program-name { font-size: 14px; }
.ec-program-facts { display: flex; flex-wrap: wrap; gap: var(--ec-s4); font-size: 13px; color: var(--ec-ink-2); }
.ec-program.is-behind { border-left: 3px solid var(--ec-amber); }

.ec-warn-text { color: var(--ec-amber); }
.ec-good-text { color: var(--ec-teal); }

/* урок в ленте пары */
.ec-lesson {
	background: var(--ec-surface);
	border: 1px solid var(--ec-line);
	border-left: 3px solid var(--ec-line);
	border-radius: var(--ec-r);
	padding: var(--ec-s3) var(--ec-s4);
	margin-bottom: var(--ec-s2);
}
.ec-lesson.is-held { border-left-color: var(--ec-teal); }
.ec-lesson.is-planned { border-left-color: var(--ec-line); }
.ec-lesson.is-noshow { border-left-color: var(--ec-red); }
.ec-lesson.is-gap { border-left-color: var(--ec-amber); }

.ec-lesson-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ec-s3); }
.ec-lesson-when { min-width: 96px; }
.ec-lesson-when b { margin-right: 6px; }
.ec-lesson-act { margin-left: auto; }

.ec-lesson-body, .ec-checkpoint {
	margin-top: var(--ec-s3);
	padding-top: var(--ec-s3);
	border-top: 1px solid var(--ec-line-soft);
	display: grid;
	gap: var(--ec-s2);
}
.ec-checkpoint-head { display: flex; align-items: center; gap: var(--ec-s2); font-size: 13px; color: var(--ec-muted); }

.ec-lesson-field b { display: block; font-size: 12px; font-weight: 600; color: var(--ec-muted); }
.ec-lesson-field span { display: block; max-width: 90ch; }
/* ==================================================================
   Пользователи: список и карточка
================================================================== */

.ec-row-acts { display: flex; gap: var(--ec-s2); justify-content: flex-end; align-items: center; white-space: nowrap; }

.ec-table-foot { padding: var(--ec-s3) var(--ec-s4); border-top: 1px solid var(--ec-line); font-size: 12px; color: var(--ec-muted); }

.ec-pagination { display: flex; align-items: center; justify-content: center; gap: var(--ec-s3); }
.ec-pagination .is-disabled { opacity: .4; pointer-events: none; }

/* карточки в два-три столбца: консоль широкая, вертикальная простыня в ней неудобна */
.ec-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--ec-s3); align-items: start; }

.ec-card { padding: var(--ec-s4); display: grid; gap: var(--ec-s3); }
.ec-card-title { font-size: 15px; font-weight: 600; }
.ec-card-lead { display: flex; align-items: center; gap: var(--ec-s2); }
.ec-card .ec-foot-note { margin-top: 0; }

.ec-form { display: grid; gap: var(--ec-s2); justify-items: start; }
.ec-form .ec-input { width: 100%; }
.ec-form .ec-field { width: 100%; }

.ec-bad-text { color: var(--ec-red); }

.ec-level { display: grid; gap: 2px; }
.ec-level-label { font-size: 20px; font-weight: 600; }
.ec-level-score { color: var(--ec-muted); }
.ec-level-delta { font-weight: 600; }
.ec-level-delta.is-up { color: var(--ec-teal); }
.ec-level-delta.is-down { color: var(--ec-red); }

.ec-details summary { cursor: pointer; font-size: 13px; color: var(--ec-muted); }
.ec-details summary:hover { color: var(--ec-ink); }
.ec-level-history { display: grid; gap: var(--ec-s2); margin-top: var(--ec-s3); }
.ec-level-history li { display: flex; gap: var(--ec-s3); align-items: baseline; font-size: 13px; border-top: 1px solid var(--ec-line-soft); padding-top: var(--ec-s2); }
.ec-level-history-n { min-width: 86px; color: var(--ec-muted); }
/* ==================================================================
   Платежи и программы
================================================================== */

/* список слева, формы справа: администратор смотрит данные и тут же правит */
.ec-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--ec-s3); align-items: start; }
@media (max-width: 1279px) { .ec-split { grid-template-columns: minmax(0, 1fr); } }

.ec-side-stack { display: grid; gap: var(--ec-s3); }

/* KPI внутри панели — без своих рамок, чтобы не было «коробки в коробке» */
.ec-kpis--flat { padding: var(--ec-s3) var(--ec-s4) 0; }
.ec-kpis--flat .ec-kpi { border: 0; background: transparent; padding: 0 var(--ec-s5) 0 0; }

.ec-name span { display: block; font-size: 12px; color: var(--ec-muted); }

.ec-card .ec-note { margin: 0; }
/* числа и суммы не переносим — колонка читается взглядом сверху вниз */
.ec-table td.is-num, .ec-table th.is-num { white-space: nowrap; }
.ec-table td.is-num.ec-row-acts { white-space: nowrap; }

/* danger как вторичное действие в строке: рамка, а не заливка */
.ec-btn--sm.ec-btn--danger { background: transparent; color: var(--ec-red); border-color: var(--ec-red); }
.ec-btn--sm.ec-btn--danger:hover { background: var(--ec-red); color: #fff; }
/* ==================================================================
   Формы консоли: создание урока, слот StudyRoom
================================================================== */

.ec-form--wide { justify-items: stretch; }
.ec-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ec-s3); }
.ec-grid-2 .ec-input { width: 100%; }

.ec-hint { font-size: 12px; color: var(--ec-muted); }

.ec-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--ec-s2) var(--ec-s3); font-size: 13px; }
.ec-facts dt { color: var(--ec-muted); }
.ec-facts dd { margin: 0; }

/* подсказка по ученикам под полем телефона */
.ec-suggest { position: relative; }
.ec-suggest-list {
	position: absolute;
	top: 62px; left: 0; right: 0;
	z-index: 20;
	background: var(--ec-surface);
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-r-sm);
	box-shadow: var(--ec-shadow);
	max-height: 260px;
	overflow: auto;
}
.ec-suggest-item {
	display: block;
	width: 100%;
	padding: var(--ec-s2) var(--ec-s3);
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: var(--ec-ink);
}
.ec-suggest-item:hover, .ec-suggest-item:focus-visible { background: var(--ec-line-soft); }
.ec-suggest-item b { display: block; }
.ec-suggest-item span { font-size: 12px; color: var(--ec-muted); }
.ec-suggest-empty { padding: var(--ec-s2) var(--ec-s3); font-size: 13px; color: var(--ec-muted); }

/* компактный список уроков в боковой колонке */
.ec-mini-list { display: grid; gap: var(--ec-s3); }
.ec-mini-list li { display: grid; gap: 4px; padding-bottom: var(--ec-s3); border-bottom: 1px solid var(--ec-line-soft); }
.ec-mini-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.ec-mini-when { font-size: 13px; }
.ec-mini-who { font-size: 13px; }
.ec-mini-who a { color: var(--ec-ink); }
.ec-mini-state { display: flex; flex-wrap: wrap; gap: var(--ec-s2); align-items: center; font-size: 12px; }
.ec-mini-list .ec-btn { justify-self: start; }
.ec-inline-form { display: flex; gap: var(--ec-s2); align-items: center; flex-wrap: nowrap; }
.ec-input--tight { min-height: 34px; padding: 5px 10px; width: 116px; }

/* выключенный кабинет: приглушён, но читаем — админ должен видеть его данные */
.ec-table tbody tr.is-off td { color: var(--ec-muted); }
.ec-table tbody tr.is-off td:first-child { box-shadow: inset 3px 0 0 var(--ec-line); }
/* ==================================================================
   Главная консоли, вход, видео, тексты лендинга
================================================================== */

.ec-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ec-s3); }
.ec-tile {
	display: grid;
	gap: 6px;
	padding: var(--ec-s4);
	background: var(--ec-surface);
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-r);
	text-decoration: none;
	color: var(--ec-ink);
}
.ec-tile:hover { border-color: var(--ec-coral); box-shadow: var(--ec-shadow); }
.ec-tile svg { width: 22px; height: 22px; color: var(--ec-coral); }
.ec-tile b { font-size: 15px; }
.ec-tile span { font-size: 13px; color: var(--ec-muted); }

.ec-auth { display: grid; place-items: center; padding: var(--ec-s6); }
.ec-auth-box {
	width: 100%;
	max-width: 380px;
	background: var(--ec-surface);
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-r);
	padding: var(--ec-s5);
	display: grid;
	gap: var(--ec-s3);
	box-shadow: var(--ec-shadow);
}
.ec-auth-brand { font-weight: 700; letter-spacing: -.01em; text-align: center; }
.ec-auth-box h1 { font-size: 20px; text-align: center; }
.ec-auth-box .ec-btn { width: 100%; justify-content: center; }

/* вход через Google на странице консоли */
.ec-auth-or { display: flex; align-items: center; gap: 12px; color: var(--ec-muted); font-size: 12px; }
.ec-auth-or::before, .ec-auth-or::after { content: ''; flex: 1; height: 1px; background: var(--ec-line); }
.ec-auth-note { font-size: 13px; color: var(--ec-red); }
.ec-auth-google { gap: 8px; }
.ec-auth-google svg { width: 16px; height: 16px; flex: none; }

.ec-video { padding: var(--ec-s3); }
.ec-video video { width: 100%; max-height: calc(100vh - 260px); background: #000; border-radius: var(--ec-r-sm); }

.ec-land { display: grid; gap: var(--ec-s3); }
.ec-land textarea.ec-input { width: 100%; resize: vertical; font: inherit; }
.ec-land .ec-input { width: 100%; }
.ec-land label { display: flex; align-items: center; gap: var(--ec-s2); }

/* панель сохранения всегда на виду: полей много, крутить вверх незачем */
.ec-land-save {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: var(--ec-s3);
	padding: var(--ec-s3) var(--ec-s4);
	background: var(--ec-surface);
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-r);
	box-shadow: var(--ec-shadow);
}

.ec-links { display: grid; gap: var(--ec-s2); }
.ec-links .ec-input { width: 100%; font-size: 12px; }
/* ==================================================================
   Доска: линия «сейчас», конфликты, чипы недели, QR в шапке колонки
================================================================== */

.ec-board-head { display: flex; align-items: center; gap: var(--ec-s2); }
.ec-board-head.is-off { color: var(--ec-muted); }
.ec-board-qr { margin-left: auto; font-size: 11px; color: var(--ec-muted); text-decoration: none; border-bottom: 1px dotted currentColor; }
.ec-board-qr:hover { color: var(--ec-coral); }

.ec-board-col.is-off { background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(19,44,46,.03) 8px, rgba(19,44,46,.03) 16px); }

/* текущее время: линия через колонку с подписью слева */
.ec-board-now { position: absolute; left: 0; right: 0; border-top: 2px solid var(--ec-coral); z-index: 4; pointer-events: none; }
.ec-board-now span {
	position: absolute;
	top: -9px; left: 2px;
	background: var(--ec-coral);
	color: #fff;
	font-size: 10px;
	line-height: 1;
	padding: 3px 5px;
	border-radius: var(--ec-r-pill);
}

/* двойная бронь: не только цветом — рамка и подпись внутри карточки */
.ec-ev.is-conflict { border: 2px solid var(--ec-red); border-left-width: 3px; background: var(--ec-red-soft); }

.ec-lg--conflict::before { background: var(--ec-red); }

/* неделя: чип на каждый урок вместо голого счётчика */
.ec-week td { vertical-align: top; }
.ec-week th a { color: inherit; text-decoration: none; }
.ec-week th.is-today, .ec-week td.is-today { background: var(--ec-line-soft); }

.ec-chip {
	display: block;
	margin-bottom: 4px;
	padding: 4px 6px;
	border-left: 3px solid var(--ec-line);
	border-radius: var(--ec-r-sm);
	background: var(--ec-line-soft);
	font-size: 11px;
	line-height: 1.3;
	text-decoration: none;
	color: var(--ec-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ec-chip.is-ok { border-left-color: var(--ec-teal); background: var(--ec-teal-soft); }
.ec-chip.is-conflict { border-left-color: var(--ec-red); background: var(--ec-red-soft); }
.ec-chip b { margin-right: 4px; }
.ec-chip span { color: var(--ec-ink-2); }
.ec-chip em { display: block; font-style: normal; color: var(--ec-red); }
.ec-chip i { font-style: normal; color: var(--ec-teal); }
/* колонки недели одинаковой ширины: иначе один занятый день растягивает таблицу */
.ec-week { table-layout: fixed; width: 100%; }
.ec-week td, .ec-week th { width: 11%; }
.ec-week td.is-sticky, .ec-week th.is-sticky { width: 18%; }
.ec-chip.is-wait { border-left-color: var(--ec-red); background: var(--ec-red-soft); }
/* Заголовок секции внутри панели (таблица с числом элементов и подписью):
   .ec-head снаружи панели держит крупный h1 страницы, а не подзаголовок
   раздела — здесь нужен текст поменьше и с собственным отступом от края
   панели, иначе он садится прямо на рамку. */
.ec-panel-head {
	padding: var(--ec-s3) var(--ec-s4);
	border-bottom: 1px solid var(--ec-line);
}
.ec-panel-head h2 { font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: -.01em; }
.ec-panel-head .ec-head-sub { margin-top: 3px; }

/* Вертикальный ритм страницы: панели, KPI-плитки и подписи между ними
   стоят подряд без собственных отступов друг от друга — раньше они
   склеивались краями. */
.ec-stack { display: grid; gap: var(--ec-s4); }
.ec-stack .ec-foot-note { margin-top: 0; }
.ec-stack .ec-kpis { margin-bottom: 0; }

/* ---------- приёмка 15.08: цифры на главной консоли ---------- */

.ec-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}

.ec-metric {
	display: block;
	padding: 16px 18px;
	border: 1px solid var(--ec-line, #e3e0d8);
	border-radius: 12px;
	background: var(--ec-card, #fff);
	color: inherit;
	text-decoration: none;
	transition: border-color .15s ease;
}

.ec-metric:hover {
	border-color: var(--ec-ink, #132c2e);
}

.ec-metric b {
	display: block;
	font-size: 26px;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.ec-metric span {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--ec-muted, #6b7472);
}

.ec-metric.is-warn b {
	color: #c0431f;
}

/* Вкладки раздела «Школа» */
.ec-school-tabs { margin-bottom: 16px; display: inline-flex; }
.ec-school-tabs a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; color: inherit; text-decoration: none; }
/* Переключатель школы в сайдбаре: контекст, в котором работает консоль */
.ec-side-school { padding: 12px 14px 0; }
.ec-side-school .ec-select { width: 100%; }
/* Панель фильтров с несколькими полями: раскладка в строку с переносом */
.ec-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.ec-filters .ec-field { margin: 0; }
.ec-filters .ec-input--tight { width: 110px; }
.ec-filters .ec-select { min-width: 150px; }
/* ==================================================================
   Прайс школы 3.0 — по макету Figma N670yxnW1fN2sFStuTSugs (16:2, 19:428)

   Таблица только показывает; правка — в боковой панели. Поэтому строка
   низкая и читаемая, а вся плотность ушла в drawer справа.
================================================================== */

/* Плитки состояния кликабельны: это ещё и быстрые фильтры */
.ec-pricing-health { margin-bottom: var(--ec-s4); }
.ec-pricing-health .ec-kpi {
	appearance: none; border: 1px solid var(--ec-line-soft); background: var(--ec-surface);
	text-align: left; cursor: pointer; font: inherit; color: inherit;
	border-radius: var(--ec-r); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 4px;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.ec-pricing-health .ec-kpi:hover { border-color: var(--ec-line); }
.ec-pricing-health .ec-kpi.is-active { border-color: var(--ec-coral); box-shadow: inset 0 0 0 1px var(--ec-coral); }
.ec-pricing-health .ec-kpi-val { font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: -.48px; }
.ec-pricing-health .ec-kpi-cap { font-size: 13px; color: var(--ec-ink-2); }

.ec-pricing-filters { padding: 4px 16px; margin-bottom: var(--ec-s4); }
.ec-pricing-panel   { padding: 0; overflow: hidden; }

/* Строка прайса: 64 px, без полей ввода */
.ec-pricing-table td { height: var(--ec-row); }
.ec-pricing-table tr.is-warn   td { background: var(--ec-amber-soft); }
.ec-pricing-table tr.is-off    td { background: var(--ec-canvas); color: var(--ec-muted); }
.ec-pricing-table tr.is-picked td { background: var(--ec-teal-soft); box-shadow: inset 0 0 0 1px var(--ec-teal); }
.ec-pricing-table .ec-btn--icon { width: 34px; height: 32px; padding: 0; }

.ec-pricing-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ec-s3); }

/* Пагинация */
.ec-pages { display: flex; gap: 8px; }
.ec-page {
	appearance: none; width: 28px; height: 28px; border-radius: 7px; cursor: pointer;
	border: 1px solid var(--ec-line); background: var(--ec-surface);
	font: 500 11px/16px inherit; color: var(--ec-ink-2);
}
.ec-page:hover:not(:disabled):not(.is-active) { border-color: var(--ec-ink-2); }
.ec-page.is-active { background: var(--ec-coral); border-color: var(--ec-coral); color: #fff; }
.ec-page:disabled  { opacity: .45; cursor: default; }

/* ---------- боковая панель редактирования ---------- */
.ec-drawer-scrim { position: fixed; inset: 0; background: rgba(19,44,46,.28); z-index: 40; }
.ec-drawer {
	position: fixed; top: 0; right: 0; bottom: 0; width: 380px; z-index: 41;
	background: var(--ec-surface); border-left: 1px solid var(--ec-line-soft);
	box-shadow: -10px 0 12px rgba(19,44,46,.14);
	overflow-y: auto;
}
.ec-drawer-form { display: flex; flex-direction: column; gap: var(--ec-s4); padding: var(--ec-s5); min-height: 100%; }
.ec-drawer-head { display: flex; align-items: center; justify-content: space-between; }
.ec-drawer-head h2 { font-size: 15px; font-weight: 600; line-height: 20px; }
.ec-drawer-head .ec-btn--icon { width: 32px; height: 32px; padding: 0; border: 0; background: var(--ec-canvas); font-size: 15px; }
.ec-drawer-divider { height: 1px; background: var(--ec-line-soft); }
.ec-drawer .ec-field { margin: 0; }
.ec-drawer .ec-input, .ec-drawer .ec-select { width: 100%; }

/* Маржа: то, что остаётся школе с урока */
.ec-drawer-margin {
	display: flex; align-items: center; justify-content: space-between;
	height: 56px; padding: 0 14px; border-radius: var(--ec-r);
	background: var(--ec-teal-soft); color: var(--ec-teal);
}
.ec-drawer-margin span { font-size: 13px; }
.ec-drawer-margin b    { font-size: 12px; font-weight: 600; }

.ec-drawer-check { display: flex; align-items: center; gap: 8px; }
.ec-drawer-actions { display: flex; gap: 12px; margin-top: auto; }
.ec-drawer-actions .ec-btn { flex: 1; height: 44px; }

@media (max-width: 900px) {
	.ec-drawer { width: 100%; }
}
/* Правки после сверки с макетом: жёлтой заливкой красим не всю строку —
   позиций без ставки может быть большинство, и экран становится жёлтым.
   Достаточно цветного текста в колонках «Ставка» и «Публикация». */
.ec-pricing-table tr.is-warn td { background: var(--ec-surface); }
.ec-pricing-table tr.is-warn.is-off td { background: var(--ec-canvas); }
.ec-pricing-table tr.is-picked td,
.ec-pricing-table tr.is-warn.is-picked td { background: var(--ec-teal-soft); }

/* Панель не затемняет таблицу: контекст должен остаться перед глазами */
.ec-drawer-scrim { background: transparent; }
/* Таблица шире экрана прокручивается внутри своей обёртки, а не тащит
   за собой страницу. На /console/billing страница уезжала вбок на 300 px. */
.ec-shell { max-width: 100%; overflow-x: clip; }
.ec-main  { min-width: 0; max-width: 100%; }
.ec-panel { min-width: 0; }
.ec-table-wrap { max-width: 100%; }
/* Широкая таблица «протекала» за пределы своей обёртки и тащила страницу
   вбок (нашлось на /console/billing: 297 px вправо на планшете).
   contain: paint запирает отрисовку внутри скролл-контейнера. */
.ec-table-wrap { contain: paint; }
/* ── Карточка человека в «Пользователях» (StudyRoom, 09.09.2026) ───────────
   Раскрывается строкой списка и открывается отдельной страницей. Своих
   цветов и радиусов нет — всё на токенах выше. */

.ec-card { padding: var(--ec-s4) var(--ec-s5) var(--ec-s5); }
.ec-card-head { margin-bottom: var(--ec-s4); }
.ec-card-head h1 { font-size: 22px; line-height: 28px; }

.ec-card-sec { padding-top: var(--ec-s4); margin-top: var(--ec-s4); border-top: 1px solid var(--ec-line-soft); }
.ec-card-sec:first-of-type { border-top: 0; margin-top: 0; }

.ec-card-h { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin-bottom: var(--ec-s3); }
.ec-card-h-sub { font-weight: 400; font-size: 13px; color: var(--ec-muted); margin-left: 6px; }

.ec-card-text { font-size: 14px; line-height: 21px; max-width: 78ch; }

.ec-card-form { align-items: flex-end; margin-bottom: var(--ec-s3); }
.ec-card-num { width: 140px; text-align: right; }

.ec-card-pub { display: flex; align-items: center; gap: var(--ec-s2); white-space: nowrap; }
.ec-card-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ec-muted); }
.ec-card-check input { width: 16px; height: 16px; accent-color: var(--ec-teal); }

/* Строка списка как переключатель карточки: раскрытие по клику, а не по
   отдельной кнопке — так экран открывается там же, где на него смотрят. */
.ec-table tr.ac-row { cursor: pointer; }
.ec-table tr.ac-row.is-open td { background: var(--ec-teal-soft); }
.ec-table tr.ac-row.is-pending td { background: var(--ec-amber-soft); }
.ec-table tr.ac-row.is-pending:hover td { background: #fbeed4; }

.ec-card-cell { padding: 0 !important; background: var(--ec-canvas) !important; }
.ec-card-cell .ec-card { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--ec-canvas); }
.ec-card-cell .ec-card .ec-table-wrap { max-height: none; }

.ec-card-load { padding: var(--ec-s4); font-size: 13px; color: var(--ec-muted); }

/* Раскрытая карточка выше окна: снимаем ограничение высоты у обёртки таблицы,
   иначе карточка живёт внутри скроллящейся области и видно только её шапку. */
.ec-table-wrap.is-expanded { max-height: none; overflow: visible; }