/* Новые компоненты админки роста. Базовые токены и оформление: styles.css и customers.css (утверждённая админка, копия без изменений). */
.nav-group { margin:18px 0 6px; padding:0 15px; font:600 9px/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--t3); }
.nav-group:first-child { margin-top:0; }
.sidebar { max-height:none; overflow-y:auto; }
.sidebar__nav { gap:4px; }
.nav-item { min-height:46px; }
.sidebar__foot { padding-top:22px; }

.grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:start; }
.stack { display:grid; gap:20px; }
.pad { padding:20px 24px; }
.pad-sm { padding:14px 24px; }
.muted { color:var(--t3); }
.small { font-size:11px; }
.num { font-variant-numeric:tabular-nums lining-nums; }
.row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.row.between { justify-content:space-between; }
.right { text-align:right; }
.page-head h1 { font-size:clamp(36px,3.6vw,54px); }
.page-head .row { flex:none; }

.tabs { display:flex; gap:4px; flex-wrap:wrap; padding:14px 20px; border-bottom:1px solid var(--line-soft); }
.tabs button { min-height:40px; padding:0 14px; border:1px solid transparent; border-radius:999px; background:none; color:var(--t3); font-size:12px; }
.tabs button:hover { background:#ffffff06; color:var(--t1); }
.tabs button[aria-pressed="true"] { color:var(--ivory); background:var(--blush); border-color:#ddaab13b; }

.chip { display:inline-flex; align-items:center; gap:6px; min-height:26px; padding:3px 10px; border:1px solid var(--line); border-radius:999px; font-size:11px; color:var(--t2); background:#ffffff05; }
.chip--rose { border-color:#ddaab13b; color:var(--rose); background:var(--blush); }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--rose); display:inline-block; flex:none; }
.dot--ok { background:var(--success); } .dot--warn { background:var(--warning); } .dot--bad { background:var(--error); } .dot--off { background:var(--t3); }

.kv { display:grid; grid-template-columns:150px 1fr; gap:9px 16px; font-size:12px; }
.kv dt { color:var(--t3); } .kv dd { margin:0; color:var(--t1); overflow-wrap:anywhere; }

.notice { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border:1px solid #ddaab133; border-left:2px solid var(--rose); border-radius:var(--r1); background:rgba(221,170,177,.06); font-size:12px; line-height:1.6; color:var(--t2); }
.notice b { color:var(--ivory); font-weight:600; }
.notice--bad { border-color:#f0afb833; border-left-color:var(--error); background:rgba(142,0,18,.14); }

.switch { position:relative; width:44px; height:26px; flex:none; border:1px solid var(--edge); border-radius:999px; background:#ffffff0c; padding:0; transition:background .2s; }
.switch::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--t2); transition:transform .2s var(--ease), background .2s; }
.switch[aria-checked="true"] { background:linear-gradient(135deg,#a3001a,#6a000f); border-color:rgba(255,255,255,.28); }
.switch[aria-checked="true"]::after { transform:translateX(18px); background:var(--ivory); }

.bar { height:8px; border-radius:99px; background:#ffffff0d; overflow:hidden; } .bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#8e0012,#ddaab1); }
.bar--ok i { background:linear-gradient(90deg,#6b8f72,var(--success)); }
.list { list-style:none; margin:0; padding:0; }
.list li { display:flex; align-items:center; gap:14px; padding:15px 24px; border-bottom:1px solid var(--line-soft); font-size:12px; min-height:60px; }
.list li:last-child { border:0; }
.list .grow { flex:1; min-width:0; } .list b { font-weight:500; color:var(--t1); display:block; } .list small { color:var(--t3); font-size:11px; display:block; margin-top:2px; }
.link-row { width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--line-soft); }
.link-row:hover { background:#ffffff05; }


.src-row { display:grid; grid-template-columns:110px 1fr 90px; gap:14px; align-items:center; padding:12px 24px; font-size:12px; border-bottom:1px solid var(--line-soft); }
.src-row:last-child { border:0; }

.kanban { display:grid; grid-template-columns:repeat(5,minmax(230px,1fr)); gap:14px; overflow-x:auto; padding-bottom:10px; }
.kcol { border:1px solid var(--line); border-radius:var(--r2); background:#ffffff03; min-height:360px; }
.kcol>header { display:flex; justify-content:space-between; align-items:center; padding:16px 16px 12px; font-size:12px; color:var(--t2); border-bottom:1px solid var(--line-soft); }
.kcards { display:grid; gap:10px; padding:12px; }
.kcard { padding:14px; border:1px solid var(--line); border-radius:var(--r1); background:#ffffff06; font-size:12px; text-align:left; width:100%; }
.kcard:hover { border-color:#ddaab14d; background:#ffffff0a; }
.kcard b { display:block; font:500 18px var(--serif); color:var(--ivory); margin-bottom:6px; }
.kcard small { display:block; color:var(--t3); font-size:11px; line-height:1.55; }




.seat { padding:20px 24px; } .seat b { font:500 40px var(--serif); color:var(--ivory); } .seat span { color:var(--t3); font-size:12px; margin-left:6px; }
.seat .bar { margin:12px 0 8px; }

.tab-body { padding:20px 28px 28px; }
.drawer-tabs { display:flex; gap:4px; flex-wrap:wrap; margin:26px 0 4px; border-bottom:1px solid var(--line); }
.drawer-tabs button { min-height:42px; padding:0 14px; border:0; border-bottom:2px solid transparent; background:none; color:var(--t3); font-size:12px; }
.drawer-tabs button[aria-selected="true"] { color:var(--ivory); border-bottom-color:var(--rose); }
.tl-type { display:inline-block; margin-right:6px; padding:1px 7px; border-radius:99px; background:var(--blush); color:var(--rose); font-size:9px; letter-spacing:.06em; text-transform:uppercase; }
.check { display:flex; gap:10px; align-items:flex-start; font-size:12px; line-height:1.5; color:var(--t2); }
.check input { width:18px; height:18px; margin-top:2px; accent-color:#a3001a; }
.hint { font-size:11px; color:var(--t3); margin-top:6px; line-height:1.5; }
.rule { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.rule .and { color:var(--t3); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.table-link { background:none; border:0; padding:0; text-align:left; color:var(--t1); font-weight:500; }
.table-link:hover { color:var(--rose); }
.cell-sub { display:block; color:var(--t3); font-size:11px; margin-top:2px; }

@media(max-width:1250px) { .grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); }  }
@media(max-width:1000px) { .grid-2,.grid-3 { grid-template-columns:1fr; } .kv { grid-template-columns:120px 1fr; } }
@media(max-width:720px) {
  .pad,.pad-sm { padding-left:18px; padding-right:18px; }
       .src-row { grid-template-columns:84px 1fr; padding:12px 18px; } .src-row>span:last-child { grid-column:2; }
  .list li { padding:14px 18px; flex-wrap:wrap; }
  .tab-body { padding:16px 18px 24px; } .page-head .row { width:100%; }
  .kanban { grid-template-columns:repeat(5,250px); }
  }


/* ===== Итоговый макет: продукты, уроки, контент ===== */
.chip--ok { border-color:#86b59830; color:var(--success); background:#86b59812; }
.product-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.pcard { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:var(--r3); background:linear-gradient(160deg,#ffffff07,#ffffff02); transition:border-color .25s var(--ease), transform .25s var(--ease); }
.pcard:hover,.pcard:focus-within { border-color:#ddaab14d; transform:translateY(-2px); }
.pcard-cover { position:relative; height:200px; overflow:hidden; background:var(--velvet); }
.pcard-cover img { width:100%; height:100%; object-fit:cover; filter:saturate(.95) brightness(.9); }
.pcard-cover::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(11,7,8,.8)); pointer-events:none; }
.pcard-cover--empty { background:radial-gradient(ellipse at 80% 0,rgba(221,170,177,.2),transparent 70%),linear-gradient(135deg,#3a0c18,#170a0e); }
.pcard-cover .chip { position:absolute; left:16px; top:16px; z-index:1; background:rgba(11,7,8,.62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.pcard-body { display:flex; flex-direction:column; flex:1; gap:14px; padding:22px 24px 24px; }
.pcard-body h2 { font:500 28px/1.2 var(--serif); color:var(--ivory); letter-spacing:-.01em; }
.pcard-body p { min-height:38px; color:var(--t2); font-size:12px; }
.pcard-nums { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px 0; margin-top:auto; border-block:1px solid var(--line-soft); }
.pcard-nums b { display:block; font:500 22px var(--serif); color:var(--ivory); }
.pcard-nums small { color:var(--t3); font-size:11px; }
.lesson-list { list-style:none; margin:0; padding:0; }
.lesson-list li { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft); font-size:12px; }
.lesson-list li:last-child { border:0; }
.lesson-list .order { display:grid; place-items:center; flex:none; width:30px; height:30px; border:1px solid var(--line); border-radius:50%; color:var(--rose); font-size:12px; }
.lesson-list .grow { flex:1; min-width:0; }
.lesson-list b { font-weight:500; font-size:13px; }
.icon-btn { flex:none; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:#ffffff06; color:var(--t1); font-size:16px; transition:background .2s, border-color .2s; }
.icon-btn:hover:not(:disabled) { background:#ffffff12; border-color:var(--edge); }

/* ===== Проход по качеству: читаемость, цели нажатия, состояния ===== */
.eyebrow,.panel__head .eyebrow,.sidebar__heading .eyebrow { font-size:11px; }
.nav-group { font-size:10px; color:var(--t2); }
.nav-item small,.cell-sub,.small,.status,.chip,.demo-status,.sidebar-label,.hint,.client-subtext { font-size:11px; }
.clients-table th { font-size:11px; letter-spacing:.05em; }
.tabs button,.segmented button { min-height:44px; }
.switch::before { content:''; position:absolute; inset:-9px -4px; }
.page-head { min-height:120px; }
.sidebar { scrollbar-width:thin; scrollbar-color:#ffffff25 transparent; }
.kcard { transition:border-color .2s, background .2s, transform .2s var(--ease); }
.kcard:hover { transform:translateY(-1px); }
.button:focus-visible,.text-action:focus-visible,.table-link:focus-visible,.kcard:focus-visible,.switch:focus-visible,.icon-btn:focus-visible { outline:2px solid var(--rose); outline-offset:3px; }
.list li:has(.button):hover,.list li:has(.text-action):hover { background:#ffffff04; }
.panel,.metric,.slim-metrics article { transition:border-color .25s var(--ease); }
.panel:hover { border-color:#ffffff1f; }
.empty { padding:36px 24px; text-align:center; color:var(--t3); font-size:12px; }
@media(max-width:1000px) { .product-list { grid-template-columns:1fr; } }
@media(max-width:720px) { .pcard-cover { height:170px; } .pcard-body h2 { font-size:25px; } .lesson-list li { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { .pcard,.kcard,.panel { transition:none !important; transform:none !important; } }

/* Доводка по результатам автоматической проверки */
.nav-group,.clients-table-footer,.clients-table-footer span { font-size:11px; }
.table-link { display:inline-flex; align-items:center; min-height:32px; padding:4px 0; }
.eyebrow { letter-spacing:.12em; }


/* ===== Проход ui-ux-pro-max: чистая сетка, не только цвет, состояния, таблицы ===== */
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Статус передаётся не только цветом: знак перед текстом */
.status::before { content:'•'; font-weight:700; opacity:.8; }
.status--success::before { content:'✓'; }
.status--warning::before { content:'!'; }
.status--error::before { content:'×'; }
.chip--ok::before { content:'✓'; font-weight:700; }
/* Таблицы: закреплённая шапка внутри прокручиваемой панели, цифры одной ширины */
.clients-table-wrap { max-height:min(70vh,720px); overflow:auto; scrollbar-width:thin; scrollbar-color:#ffffff25 transparent; }
.clients-table thead th { position:sticky; top:0; z-index:2; background:#1b1215; box-shadow:0 1px 0 var(--line); }
.clients-table td { font-variant-numeric:tabular-nums lining-nums; }
.th-sort { display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:0; border:0; background:none; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; }
.th-sort:hover { color:var(--ivory); }
.th-sort span { color:var(--rose); }
.empty b { display:block; margin-bottom:6px; font:500 22px var(--serif); color:var(--ivory); }
.empty p { max-width:44ch; margin:0 auto; }
/* Движение: короткое, по смыслу, с учётом настройки «меньше движения» */
.client-drawer[open] { animation:drawer-in .26s var(--ease); }
.client-dialog[open] { animation:dialog-in .2s var(--ease); }
@keyframes drawer-in { from { transform:translateX(24px); opacity:.0; } to { transform:none; opacity:1; } }
@keyframes dialog-in { from { transform:translateY(8px) scale(.985); opacity:0; } to { transform:none; opacity:1; } }
.button,.nav-item,.table-link,.text-action,.th-sort,.kcard,.switch,.icon-btn,.client-row-open { cursor:pointer; }
.button { transition:background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease); }

/* ===== Согласование с дизайн-системой 2.0 и кнопками сайта V9 =====
   Источники: design-system-2.0/DESIGN_SYSTEM.md; versions/v9-auth-ux-polish/styles.css (.btn, :focus-visible, токены движения).
   Правила: один главный CTA в блоке, радиусы 14/22/32, шаг 4 px, зона нажатия не меньше 44 px,
   текст полей и описаний 16 px, навигация, подписи и статусы 14 px, служебные метки 11-12 px. */
:root { --dur-1:160ms; --dur-2:280ms; --dur-exit:180ms; --focus:var(--rose); }

/* Кнопки: те же размеры, градиент, тень и состояния, что у .btn на сайте */
.button { min-height:48px; padding:0 26px; gap:10px; border:1px solid var(--edge); border-radius:999px; background:rgba(255,255,255,.08); font:600 14px/1 var(--sans); transition:background var(--dur-2),transform var(--dur-1),box-shadow var(--dur-2),border-color var(--dur-2); }
.button:hover { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); }
.button:active { transform:scale(.98); }
.button--primary { background:linear-gradient(135deg,#a3001a,#6a000f); border-color:rgba(255,255,255,.28); box-shadow:0 14px 34px -14px rgba(207,52,71,.8),inset 0 1px rgba(255,255,255,.22); }
.button--primary:hover { background:linear-gradient(135deg,#bb0720,#7a0013); box-shadow:0 18px 40px -12px rgba(207,52,71,.9),inset 0 1px rgba(255,255,255,.26); }
/* В таблицах, списках, карточках и окнах кнопка компактнее, но не меньше 44 px */
.clients-table .button,.list .button,.kcard .button,.client-drawer .button,.client-dialog .button,.pad-sm .button,.client-entitlement .button,.empty .button { min-height:44px; padding:0 20px; }
.client-form-footer .button { min-height:48px; }
.text-action,.table-link,.th-sort { font-family:var(--sans); }
.text-action { font-size:14px; font-weight:600; }

/* Фокус: видимый розовый контур 3 px, как на сайте */
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.button:focus-visible,.nav-item:focus-visible,.switch:focus-visible,.icon-btn:focus-visible,.segmented button:focus-visible,.tabs button:focus-visible,.client-row-open:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }

/* Типографика 2.0 */
.page-head p { font-size:16px; line-height:1.6; }
.panel__head h2,.pcard-body h2,.client-section h3 { font-size:24px; }
.nav-item,.segmented button,.clients-toolbar .segmented button,.tabs button { font-size:14px; }
.clients-table td { font-size:14px; }
.clients-table th { font-size:12px; }
.cell-sub,.clients-table-footer,.clients-table-footer span,.breadcrumbs,.demo-status,.metric p,.list small,.kcard small,.pcard-nums small { font-size:12px; }
.status { min-height:30px; padding:3px 12px; font-size:14px; }
.chip,.client-product-tag { font-size:12px; }
.notice,.hint,.client-help,.client-callout,.client-callout p,.empty,.empty p,.list li,.kv,.kcard,.pcard-body p,.toast b,.toast span,.metric>span,.slim-metrics span { font-size:14px; line-height:1.6; }
.client-field { font-size:14px; }
.client-field input,.client-field select,.client-field textarea,.table-search input { font-size:16px; }
.client-field input,.client-field select,.client-field textarea { min-height:44px; border-radius:14px; }
.table-search { min-height:44px; }

/* 06.11.2026: служебная метка «и» в правилах аудиторий: не меньше 12px по дизайн-системе */
.rule .and { font-size:12px; letter-spacing:.06em; }