/* ---- twa/twa.css ---- */
/* Каркас TWA сотрудника. admin.css на странице не грузится, поэтому здесь же базовые классы (.btn, .badge, .avatar, .icon, .select-wrap, .segmented, .card).
   Цвета только через токены; единственное исключение, градиент нижней навигации (в продукте его нет в токенах): две переменные в light-dark() ниже. */
:root {
  --twa-nav-from: light-dark(#E615A3, #E615A3);
  --twa-nav-to: light-dark(#5C00FD, #8C48FF);
  --twa-nav-gradient: radial-gradient(157.89% 157.89% at 10.25% 85.81%, var(--twa-nav-from) 0%, var(--twa-nav-to) 100%);
  --twa-header-h: 44px;
  --twa-rail-w: 56px;
}

/* ---------- Базовые классы ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; background: var(--background); color: var(--foreground); overflow: hidden; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
button, select, input, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 8px; border: 1px solid transparent; background: transparent; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-outline { border-color: var(--input); background: var(--background); }
.btn-outline:hover, .btn-ghost:hover { background: var(--accent); }
.btn-destructive { background: var(--destructive); color: var(--destructive-foreground); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-icon { width: 36px; padding: 0; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--muted); color: var(--muted-foreground); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; line-height: 1.5; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.plain::before { display: none; }
.badge-done { background: var(--info-tint); color: var(--info-ink); }
.badge-ok { background: var(--success-tint); color: var(--success-ink); }
.badge-late { background: var(--warning-tint); color: var(--warning-ink); }
.badge-risk { background: var(--destructive-tint); color: var(--destructive-ink); }
.badge-none { background: var(--secondary); color: var(--muted-foreground); border-color: var(--border); }
.select-wrap { position: relative; display: block; }
.select-wrap select { appearance: none; -webkit-appearance: none; width: 100%; height: 36px; padding: 0 32px 0 12px; border: 1px solid var(--input); border-radius: 8px; background: var(--background); font-size: 14px; cursor: pointer; text-overflow: ellipsis; }
.select-wrap .icon { position: absolute; right: 10px; top: 10px; pointer-events: none; color: var(--muted-foreground); }
.segmented { display: inline-flex; padding: 3px; background: var(--muted); border-radius: 8px; gap: 2px; }
.segmented button { border: 0; background: transparent; padding: 4px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--muted-foreground); cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--background); color: var(--foreground); box-shadow: inset 0 0 0 1px var(--border); }
.card { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px; display: flex; flex-direction: column; gap: 12px; }

/* ---------- Каркас ---------- */
.twa { display: flex; flex-direction: column; height: 100vh; height: 100dvh; width: 100%; overflow: hidden; position: relative; }
.twa-header { height: var(--twa-header-h); flex: none; display: flex; align-items: center; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--border); background: var(--background); }
.twa-logo { font-weight: 600; font-size: 16px; letter-spacing: -.01em; padding: 0 4px; }
.twa-logo span { color: var(--primary); }
.twa-spacer { flex: 1; }
.twa-ibtn { position: relative; width: 32px; height: 32px; }
.twa-ibtn .icon { width: 18px; height: 18px; }
[data-t="btn-bell"]:not([data-unread="0"])::after { content: attr(data-unread); position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; }
.twa-banner { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--warning-tint); color: var(--warning-ink); font-size: 13px; }

.twa-body { flex: 1; min-height: 0; display: flex; position: relative; }
.twa-main { flex: 1; min-width: 0; min-height: 0; overflow: auto; }
.twa-col { max-width: 920px; width: 100%; height: 100%; margin: 0 auto; display: flex; flex-direction: column; min-height: 0; }
.twa-zone { flex: 1; min-height: 0; min-width: 0; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.twa-state { display: flex; flex-direction: column; }
.twa-state .empty { padding: 32px 16px; }
.twa-skel { display: grid; gap: 12px; }
.twa-skel i { display: block; height: 16px; border-radius: 6px; background: var(--muted); }
.twa-skel i:nth-child(odd) { width: 60%; }

/* Панели и рейки */
.twa-panel { width: 280px; flex: none; min-height: 0; display: flex; flex-direction: column; background: var(--background); }
.twa-panel-profile { width: 300px; border-left: 1px solid var(--border); }
.twa-panel-learn { border-right: 1px solid var(--border); }
.twa-panel-head { height: var(--twa-header-h); flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 16px; border-bottom: 1px solid var(--border); }
.twa-panel-title { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-foreground); }
.twa-panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.twa-panel-foot { flex: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-top: 1px solid var(--border); }
.twa-rail { width: var(--twa-rail-w); flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0; border: 0; background: var(--background); cursor: pointer; color: var(--muted-foreground); }
.twa-rail:first-child { border-right: 1px solid var(--border); }
.twa-rail:last-child { border-left: 1px solid var(--border); }
.twa-rail:hover { background: var(--accent); color: var(--foreground); }
.twa-rail .icon { width: 20px; height: 20px; }
.twa-rail span { writing-mode: vertical-rl; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.twa-panel.is-overlay { position: absolute; top: 0; bottom: 0; z-index: 20; box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.twa-panel-learn.is-overlay { left: var(--twa-rail-w); }
.twa-panel-profile.is-overlay { right: var(--twa-rail-w); }

/* Колокольчик */
.twa-scrim { position: absolute; inset: 0; z-index: 30; background: var(--scrim); }
.twa-bell { position: absolute; z-index: 31; top: var(--twa-header-h); right: 8px; width: min(380px, calc(100% - 16px)); max-height: 70%; display: flex; flex-direction: column; background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-lg); overflow: hidden; }

/* ---------- Нижняя навигация ---------- */
.twa-nav { flex: none; display: flex; justify-content: space-around; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--background); }
.twa-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: transparent; padding: 2px 0; font-size: 11px; font-weight: 500; color: var(--muted-foreground); cursor: pointer; }
.twa-nav-item[aria-current="page"] { color: var(--foreground); }
.twa-nav-ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--twa-nav-gradient); color: var(--primary-foreground); opacity: .55; }
.twa-nav-item[aria-current="page"] .twa-nav-ico { opacity: 1; }
.twa-nav-ico .icon { width: 18px; height: 18px; }

/* ---------- Телефон: шапка-карточка ---------- */
.twa[data-bp="phone"] .twa-header { height: 48px; margin: 8px 8px 0; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); }
.twa[data-bp="phone"] .twa-banner { margin: 8px 8px 0; border-radius: var(--radius); }
.twa[data-bp="phone"] .twa-main > .twa-panel { width: 100%; height: 100%; border: 0; }
.twa[data-bp="phone"] .twa-panel-head { display: none; }
.twa[data-bp="phone"] .twa-bell { top: 60px; right: 8px; max-height: 60%; }

/* ---- twa/twa-chat.css ---- */
/* Чат и колокольчик сотрудника. Цвета только токены. */
.twa-zone.tc-zone { padding: 0; overflow: hidden; gap: 0; }
.tc-tabs { flex: none; display: flex; gap: 4px; padding: 8px 16px 0; border-bottom: 1px solid var(--border); }
.tc-tab { border: 0; background: transparent; padding: 8px 12px; font-size: 14px; font-weight: 500; color: var(--muted-foreground); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tc-tab[aria-selected="true"] { color: var(--foreground); border-bottom-color: var(--primary); }
.tc-count, .twa-nav-count { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; }
.tc-count { display: inline-block; margin-left: 6px; vertical-align: 1px; }
.twa-nav-item { position: relative; }
.twa-nav-count { position: absolute; top: 0; left: calc(50% + 6px); }
.tc-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.tc-list .twa-state { margin: auto 0; }
.tc-msg { display: flex; gap: 8px; max-width: 100%; align-items: flex-start; }
.tc-msg.tc-me { justify-content: flex-end; }
.tc-mark { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--primary); color: var(--primary-foreground); }
.tc-mark-tr { background: var(--muted); color: var(--muted-foreground); }
.tc-bub { max-width: min(560px, calc(100% - 36px)); min-width: 0; padding: 10px 14px; border-radius: 16px; background: var(--muted); display: flex; flex-direction: column; gap: 6px; overflow-wrap: anywhere; }
.tc-me .tc-bub { background: var(--primary); color: var(--primary-foreground); max-width: 80%; }
.tc-who { font-size: 11px; font-weight: 600; color: var(--muted-foreground); }
.tc-offer { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); color: var(--card-foreground); cursor: pointer; }
.tc-offer:hover { background: var(--accent); }
.tc-offer-ico { width: 32px; height: 32px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--primary-tint); color: var(--primary); }
.tc-offer-txt { display: flex; flex-direction: column; min-width: 0; }
.tc-offer-txt small { font-size: 12px; color: var(--muted-foreground); }
.tc-slot:empty { display: none; }
.tc-composer { flex: none; display: flex; align-items: flex-end; gap: 4px; padding: 8px 12px 12px; border-top: 1px solid var(--border); background: var(--background); }
.tc-composer.is-off { background: var(--muted); }
.tc-input { flex: 1; min-width: 0; resize: none; max-height: 160px; padding: 8px 12px; border: 1px solid var(--input); border-radius: 8px; background: var(--background); font-size: 14px; line-height: 1.4; }
.tc-input:disabled { opacity: .7; cursor: not-allowed; }
.tc-cbtn { flex: none; width: 36px; height: 36px; }
.tc-cbtn.is-rec { color: var(--destructive-ink); }
.twa[data-bp="phone"] .tc-input { font-size: 16px; }
.twa[data-bp="phone"] .tc-tabs { padding: 4px 8px 0; }
.twa[data-bp="phone"] .tc-list { padding: 12px 8px; }

/* Колокольчик */
.twa-zone.tb-zone { padding: 0; gap: 0; overflow: hidden; }
.tb-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--border); }
.tb-list { flex: 1; min-height: 0; overflow-y: auto; }
.tb-item { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
.tb-item:hover { background: var(--accent); }
.tb-item[data-read="false"] { background: var(--primary-tint); }
.tb-item[data-read="false"] b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--primary); }
.tb-ico { width: 32px; height: 32px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--muted); color: var(--muted-foreground); }
.tb-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.tb-txt p { font-size: 13px; color: var(--muted-foreground); }
.tb-txt small { font-size: 12px; color: var(--muted-foreground); }

/* ---- twa/twa-learn.css ---- */
/* Обучение, каталог, читалка, профиль TWA. Цвета только токены. Префиксы: tl- (обучение), tp- (профиль). */
.tl-muted, .tp-muted { color: var(--muted-foreground); font-size: 12px; }
.tl-ico, .tp-ico { display: inline-grid; place-items: center; flex: none; }
.tl-bar, .tp-bar { position: relative; height: 6px; border-radius: 999px; background: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
.tl-bar > i, .tp-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.tl-bar > b, .tp-bar > b { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--foreground); }

/* ---------- Панель курса ---------- */
.tl-head { display: flex; flex-direction: column; gap: 8px; }
.tl-course { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tl-continue { height: auto; min-height: 44px; padding: 8px 12px; justify-content: flex-start; text-align: left; white-space: normal; }
.tl-continue > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.tl-continue small { font-size: 12px; font-weight: 400; opacity: .9; }
.tl-stream { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; }
.tl-stream b { font-weight: 600; min-width: 0; }
.tl-acc { display: flex; flex-direction: column; gap: 4px; }
.tl-mod { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); overflow: hidden; }
.tl-mod[data-status="current"] { border-color: var(--primary); }
.tl-mod-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.tl-mod-head:hover { background: var(--accent); }
.tl-mod-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tl-mod-main b { font-size: 14px; font-weight: 600; }
.tl-mod-main small, .tl-count { font-size: 12px; color: var(--muted-foreground); }
.tl-chev { color: var(--muted-foreground); }
.tl-st-done, .tl-mod-passed { color: var(--success-ink); }
.tl-st-current, .tl-mod-current { color: var(--primary); }
.tl-st-todo, .tl-st-locked, .tl-mod-open, .tl-mod-locked { color: var(--muted-foreground); }
.tl-items { display: flex; flex-direction: column; padding: 0 4px 6px; }
.tl-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: 13px; cursor: pointer; }
.tl-item:hover:not(:disabled) { background: var(--accent); }
.tl-item:disabled { cursor: not-allowed; color: var(--muted-foreground); }
.tl-item[data-state="current"] { background: var(--primary-tint); }
.tl-item-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tl-kind { color: var(--muted-foreground); }
.tl-slot:empty, .tp-slot:empty { display: none; }

/* ---------- Каталог ---------- */
.tl-catalog, .tl-reader { display: flex; flex-direction: column; gap: 16px; width: 100%; min-width: 0; }
.tl-title h2, .tl-reader h2 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.tl-title p { margin-top: 4px; font-size: 13px; }
.tl-sec { display: flex; flex-direction: column; gap: 8px; }
.tl-sec h3, .tl-mini h3 { font-size: 14px; font-weight: 600; }
.tl-rows, .tl-groups { display: flex; flex-direction: column; gap: 6px; }
.tl-groups { gap: 12px; }
.tl-row, .tl-top { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); text-align: left; cursor: pointer; }
.tl-row:hover, .tl-top:hover { background: var(--accent); }
.tl-top { border-color: var(--primary); background: var(--primary-tint); }
.tl-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tl-row-main b { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.tl-row-main small { font-size: 12px; color: var(--muted-foreground); }
.tl-score { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.tl-score small { font-size: 11px; color: var(--muted-foreground); white-space: nowrap; }
.tl-group > summary { display: flex; align-items: center; gap: 8px; padding: 6px 4px; cursor: pointer; list-style: none; }
.tl-group > summary::-webkit-details-marker { display: none; }
.tl-group > summary b { flex: 1; font-size: 14px; font-weight: 600; }
.tl-group[open] > summary .tl-chev { transform: rotate(180deg); }
.tl-group .tl-rows { margin-top: 4px; }

/* ---------- Читалка ---------- */
.tl-back { align-self: flex-start; }
.tl-toc { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-toc-item { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); font-size: 13px; cursor: pointer; text-align: left; }
.tl-toc-item[aria-current="true"] { border-color: var(--primary); background: var(--primary-tint); font-weight: 600; }
.tl-prose { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.6; }
.tl-prose h3 { font-size: 16px; font-weight: 600; }
.tl-prose p + p, .tl-prose p + ul, .tl-prose ul + p, .tl-prose p + ol { margin-top: 8px; }
.tl-prose ul, .tl-prose ol { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.tl-mini { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); }
.tl-opt { width: 100%; padding: 10px 12px; border: 1px solid var(--input); border-radius: 8px; background: var(--background); text-align: left; cursor: pointer; }
.tl-opt:hover:not(:disabled) { background: var(--accent); }
.tl-opt:disabled { cursor: default; }
.tl-opt.is-ok { background: var(--success-tint); color: var(--success-ink); border-color: var(--success); }
.tl-opt.is-bad { background: var(--destructive-tint); color: var(--destructive-ink); border-color: var(--destructive); }
.tl-explain { font-size: 13px; color: var(--muted-foreground); }
.tl-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.tl-nav .btn { height: auto; min-height: 36px; padding-top: 6px; padding-bottom: 6px; white-space: normal; text-align: left; }
.tl-nav .btn-primary { margin-left: auto; }

/* ---------- Профиль ---------- */
.tp-sec, .tp-user { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); min-width: 0; }
.tp-h { font-size: 13px; font-weight: 600; }
.tp-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tp-av { width: 40px; height: 40px; font-size: 15px; }
.tp-who-text { display: flex; flex-direction: column; min-width: 0; }
.tp-who-text b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.tp-who-text small { font-size: 12px; color: var(--muted-foreground); overflow-wrap: anywhere; }
.tp-stat small { font-size: 11px; color: var(--muted-foreground); }
.tp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tp-stat { display: flex; flex-direction: column; padding: 8px; border-radius: 8px; background: var(--muted); }
.tp-stat b { font-size: 18px; font-weight: 600; }
.tp-flame { display: inline-flex; align-items: center; gap: 4px; }
.tp-flame .icon { color: var(--warning-ink); }
.tp-plan-top, .tp-prog-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.tp-pace { font-size: 13px; }
.tp-next { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 10px 12px; border: 1px solid var(--primary); border-radius: 8px; background: var(--primary-tint); text-align: left; cursor: pointer; }
.tp-next:disabled { cursor: default; }
.tp-next small { font-size: 11px; color: var(--muted-foreground); }
.tp-next b { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.tp-opt { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--secondary); color: var(--muted-foreground); border: 1px solid var(--border); }
.tp-stream { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.tp-stream-text { display: flex; flex-direction: column; min-width: 0; }
.tp-stream-text b { font-size: 13px; font-weight: 600; }
.tp-prog { display: flex; flex-direction: column; gap: 6px; }
.tp-ok-text, .tp-ok { color: var(--success-ink); font-size: 12px; }
.tp-ach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tp-ach-item { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.tp-ach-item small { font-size: 11px; line-height: 1.3; overflow-wrap: anywhere; }
.tp-ach-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-tint); color: var(--primary); }
.tp-ach-item[data-got="0"] { color: var(--muted-foreground); }
.tp-ach-item[data-got="0"] .tp-ach-ico { background: var(--muted); color: var(--muted-foreground); }
.tp-prio, .tp-hist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.tp-prio li { padding-left: 14px; position: relative; }
.tp-prio li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.tp-hist li { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-top: 1px solid var(--border); }
.tp-hist-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; }
.tp-slot { display: flex; flex-direction: column; gap: 8px; }
.tp-modal { display: flex; flex-direction: column; gap: 12px; }
.tp-plan-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tp-plan-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 14px; }
.tp-plan-list li span:nth-child(3) { flex: 1; min-width: 0; }
.tp-opts { display: flex; flex-direction: column; gap: 8px; }
.tp-opt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); text-align: left; cursor: pointer; }
.tp-opt-row:hover { background: var(--accent); }
.tp-opt-row[data-current="1"] { border-color: var(--primary); background: var(--primary-tint); }

@media (max-width: 767px) {
  .tl-title h2, .tl-reader h2 { font-size: 18px; }
  .tp-ach { grid-template-columns: repeat(3, 1fr); }
}

/* ---- twa/twa-ex.css ---- */
/* Рамка упражнения и пять типов. Цвета только токены. */
.ex { display: flex; flex-direction: column; gap: 12px; width: 100%; min-width: 0; padding-bottom: 64px; }
.ex-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ex-title { font-size: 16px; font-weight: 600; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.ex-head .btn { flex: none; }
.ex-progress { height: 4px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.ex-progress i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .2s ease; }
.ex-pin { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 16px; border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--radius-card); background: var(--primary-tint); }
.ex-pin b { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--muted-foreground); }
.ex-pin-in { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ex-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ex-muted { color: var(--muted-foreground); font-size: 13px; }
.ex-start, .ex-call-intro, .ex-case-task, .ex-case-sol, .ex-question, .ex-thread, .ex-final { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ex-start { align-items: flex-start; }
.ex-call-intro { align-items: flex-start; }
.ex-actions, .ex-draft-foot, .ex-final-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ex-draft-foot { justify-content: space-between; }

/* Ошибки */
.ex-error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius); background: var(--destructive-tint); color: var(--destructive-ink); font-size: 13px; }
.ex-error p { flex: 1; min-width: 12rem; }
.ex-error[data-reason="offline"], .ex-error[role="status"] { background: var(--warning-tint); color: var(--warning-ink); }

/* Диалог */
.ex-msg { max-width: 85%; padding: 10px 14px; border-radius: var(--radius-card); font-size: 14px; overflow-wrap: anywhere; }
.ex-msg-ai { align-self: flex-start; background: var(--muted); }
.ex-msg-me { align-self: flex-end; background: var(--primary); color: var(--primary-foreground); }
.ex-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-chips .btn { white-space: normal; height: auto; min-height: 32px; padding-top: 6px; padding-bottom: 6px; text-align: left; }
.ex-verdict { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border-radius: var(--radius); font-size: 13px; }
.ex-verdict.is-ok { background: var(--success-tint); color: var(--success-ink); }
.ex-verdict.is-warn { background: var(--warning-tint); color: var(--warning-ink); }
.ex-past { font-size: 12px; color: var(--muted-foreground); }
.ex-composer { display: flex; gap: 8px; }
.ex-input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--input); border-radius: var(--radius); background: var(--background); }

/* Кейс */
.ex-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.ex-tab { border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 8px 12px; font-weight: 500; color: var(--muted-foreground); cursor: pointer; }
.ex-tab[aria-selected="true"] { color: var(--foreground); border-bottom-color: var(--primary); }
.ex-sec h3 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.ex-sec p, .ex-sec li { font-size: 14px; margin-bottom: 4px; overflow-wrap: anywhere; }
.ex-sec ul, .ex-sec ol { padding-left: 20px; }
.ex-draft { width: 100%; min-height: 200px; padding: 12px; border: 1px solid var(--input); border-radius: var(--radius); background: var(--background); resize: vertical; }
.ex-count { font-size: 12px; color: var(--muted-foreground); }
.ex-count.is-over { color: var(--destructive-ink); font-weight: 600; }

/* Экран-чат упражнения: лента прокручивается, композер прибит к низу */
.twa-zone:has(> .ex-chat) { overflow: hidden; padding-bottom: 0; }
.ex.ex-chat { height: 100%; padding-bottom: 0; }
.ex-chat .ex-progress { display: none; }
.ex-chat .ex-body { flex: 1; min-height: 0; }
.ex-feed { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.ex-dock { flex: none; display: flex; flex-direction: column; gap: 8px; margin: 0 -16px; padding: 8px 16px 12px; border-top: 1px solid var(--border); background: var(--background); }
.ex-dock .tc-composer { padding: 0; border: 0; }
.ex-dock .ex-composer { width: 100%; }
.ex-flat { max-width: 100%; align-self: stretch; padding: 0; background: transparent; display: flex; flex-direction: column; gap: 8px; }
.ex-flat p, .ex-flat li { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.ex-flat p + p, .ex-flat ol + p { margin-top: 6px; }
.ex-flat ul, .ex-flat ol { padding-left: 20px; }
.ex-img { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 120px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--muted); color: var(--muted-foreground); font-size: 13px; }
.ex-img .icon { width: 28px; height: 28px; }
.ex-attach { cursor: default; }
.ex-attach:hover { background: var(--card); }
.ex-attach .tc-offer-txt { flex: 1; }
.ex-attach .btn { flex: none; }
.ex-me-text.is-clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.ex-me-more { align-self: flex-start; border: 0; background: transparent; padding: 4px 0 0; font-size: 12px; font-weight: 600; color: inherit; text-decoration: underline; cursor: pointer; }
.ex-case-final { gap: 8px; }
.ex-case-score { font-size: 28px; font-weight: 700; line-height: 1.1; }
.ex-case-final p { font-size: 14px; }

/* Тест и алгоритм */
.ex-q { font-size: 15px; font-weight: 600; }
.ex-opts { display: flex; flex-direction: column; gap: 8px; }
.ex-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 10px 14px; text-align: left; border: 1px solid var(--input); border-radius: var(--radius); background: var(--background); cursor: pointer; }
.ex-opt:hover { background: var(--accent); }
.ex-opt[aria-disabled="true"] { cursor: default; }
.ex-opt.is-ok { background: var(--success-tint); border-color: var(--success); color: var(--success-ink); }
.ex-opt.is-bad { background: var(--destructive-tint); border-color: var(--destructive); color: var(--destructive-ink); }
.ex-explain { padding: 10px 14px; border-radius: var(--radius); background: var(--muted); font-size: 13px; }
.ex-algo-meta { display: flex; align-items: center; gap: 8px; color: var(--muted-foreground); font-size: 13px; }
.ex-steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ex-step { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; text-align: left; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); cursor: pointer; }
.ex-box { width: 20px; height: 20px; flex: none; border: 1px solid var(--input); border-radius: 6px; display: grid; place-items: center; color: transparent; }
.ex-step[aria-checked="true"] .ex-box { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.ex-step[aria-checked="true"] span:last-child { color: var(--muted-foreground); text-decoration: line-through; }

/* Звонок */
.ex-persona { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; text-align: left; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); }
button.ex-persona { cursor: pointer; }
button.ex-persona:hover { background: var(--accent); }
.ex-persona-ico { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--primary-tint); color: var(--primary); }
.ex-persona span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ex-persona small { color: var(--muted-foreground); font-size: 12px; }
.ex-personas { display: flex; flex-direction: column; gap: 8px; }
.ex-debrief { display: flex; flex-direction: column; gap: 8px; }
.ex-debrief h3 { font-size: 14px; font-weight: 600; }

/* Финал */
.ex-final { padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); }
.ex-final-top { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ex-final-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ex-final-info h3 { font-size: 18px; font-weight: 600; }
.ex-th { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted-foreground); }
.ex-ring { position: relative; width: 64px; height: 64px; flex: none; }
.ex-ring svg { transform: rotate(-90deg); }
.ex-ring circle { fill: none; stroke-width: 6; }
.ex-ring-bg { stroke: var(--border); }
.ex-ring-fg { stroke: var(--warning); stroke-linecap: round; }
.ex-ring.is-pass .ex-ring-fg { stroke: var(--success); }
.ex-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 700; }
.ex-feedback { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.ex-fb-list h4 { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.ex-fb-list ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ex-fb-list li, .ex-fb-list p { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; overflow-wrap: anywhere; }
.ex-crit { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ex-crit li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 13px; }
.ex-crit p { flex-basis: 100%; color: var(--muted-foreground); }
.ex-hist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ex-hist li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }

@media (max-width: 767px) {
  .ex-bt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ex-head .btn-sm:not(.btn-icon) { width: 32px; padding: 0; }
  .ex-final-top { flex-direction: column; align-items: flex-start; }
  .ex-msg { max-width: 100%; }
}

/* ---- twa/twa-rk.css ---- */
/* Итоговая проверка в TWA: пункты в оглавлении курса; варианты ответа в чате (.tc-offer с выбором). */
.tl-item-title small { display: block; font-size: 12px; color: var(--muted-foreground); }

.tc-offer[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-tint); }
.tc-offer:disabled { opacity: .5; cursor: default; }