:root {
  color-scheme: light;
  --violet: #6C4CE0;
  --teal: #15C3AE;
  --coral: #FF6B4A;
  --yellow: #FFC93C;
  --ink: #1B1B2F;
  --cloud: #F4F2FC;
  --error: #E5484D;
  --white: #ffffff;
  /* Похідні токени — щоб тема перемикалась одним блоком нижче. */
  --muted: #4F4F5A;
  /* 12.10.2026: було #9C97B8 — підписи читались погано (контраст 2,8:1). */
  --muted-2: #6E6987;
  --line: #ECE9F9;
  --line-2: #E1DEF3;
  --cloud-2: #F1F0F5;
  --violet-soft: #EFEBFC;
  /* Фіолетова заливка під білим текстом (активні вкладки, картка «Моє місце»).
     У темній темі --violet світлий, і білий текст на ньому не читався (пакет 138). */
  --violet-deep: #6C4CE0; --violet-deep-2: #8B6BF0;
  --info-bg: #E2F1FB; --info-fg: #1C7FB8;
  --ok-bg: #E7F9F6;  --ok-fg: #0E8F7F;
  --warn-bg: #FFF4DE; --warn-fg: #B8791A;
  --medal-fg: #8A5A06; /* місця 1–3 у рейтингу: золото, читабельне на білому */
  --err-bg: #FCEBEC;  --err-fg: #B23036;
  --shadow-card: 0 4px 16px rgba(27,27,47,.05);
}

/* Темна тема. Світла лишається типовою: авто — лише коли система темна і
   користувач не вибрав світлу вручну; ручний вибір пишеться в data-theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #ECEAF2;
    --cloud: #141319;
    --white: #1E1C25;
    --muted: #ABA6B9;
    --muted-2: #8E89A0;
    --line: #302D3A;
    --line-2: #3A3646;
    --cloud-2: #23212C;
    --violet: #A289FF;
    --violet-soft: #2A2340;
    --violet-deep: #6448DE; --violet-deep-2: #7257E6;
    --info-bg: #16293A; --info-fg: #6DB8E8;
    --teal: #3FC7AD;
    --ok-bg: #16322D;  --ok-fg: #5FD9C0;
    --warn-bg: #3A2E18; --warn-fg: #E0A44B; --medal-fg: #E0A44B;
    --err-bg: #3A1F22;  --err-fg: #F08A90;
    --shadow-card: 0 4px 16px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ECEAF2;
  --cloud: #141319;
  --white: #1E1C25;
  --muted: #ABA6B9;
  --muted-2: #8E89A0;
  --line: #302D3A;
  --line-2: #3A3646;
  --cloud-2: #23212C;
  --violet: #A289FF;
  --violet-soft: #2A2340;
  --violet-deep: #6448DE; --violet-deep-2: #7257E6;
  --info-bg: #16293A; --info-fg: #6DB8E8;
  --teal: #3FC7AD;
  --ok-bg: #16322D;  --ok-fg: #5FD9C0;
  --warn-bg: #3A2E18; --warn-fg: #E0A44B; --medal-fg: #E0A44B;
  --err-bg: #3A1F22;  --err-fg: #F08A90;
  --shadow-card: 0 4px 16px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cloud);
  color: var(--ink);
  font-family: 'Lato', -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

/* Посилання (пакет 141): без підкреслення браузера по всьому сайту. Текстові
   посилання фіолетові й напівжирні, при наведенні зʼявляється тонка риска.
   Картки-посилання й кнопки задають свій колір класами — їх це не чіпає. */
a { color: var(--violet); text-decoration: none; }
p a:not([class]):hover, td a:not([class]):hover, li a:not([class]):hover, .callout a:not([class]):hover {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
td > a:not([class]) { color: var(--violet); font-weight: 700; }
.callout a:not([class]) { color: inherit; font-weight: 700; }
.ck-list a, .org-person > a, .hm-warn a { font-weight: 700; }
.ck-list a:hover, .org-person > a:hover, .hm-warn a:hover { color: var(--violet); }

.wordmark {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--ink);
}
.wordmark span { color: var(--violet); }

.container { max-width: 960px; margin: 0 auto; padding: 24px 16px; }
.center-page {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px;
}

.brand-header { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 28px; }
.brand-header img { width: 68px; height: auto; }
.brand-sub { color: var(--muted); font-size: 14px; }

.card {
  background: var(--white);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 8px 30px rgba(27,27,47,0.06);
  width: 100%;
  max-width: 420px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--violet); color: var(--white); border: none;
  border-radius: 12px; padding: 13px 20px; font-size: 15px; font-weight: 700;
  font-family: 'Lato', sans-serif; cursor: pointer; text-decoration: none; width: 100%;
}
.btn:hover { opacity: .92; }
.btn.secondary { background: var(--cloud); color: var(--ink); }
.btn.small { width: auto; padding: 8px 14px; font-size: 13px; }

.input {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2);
  font-size: 15px; font-family: 'Lato', sans-serif; margin-bottom: 14px; background: var(--cloud);
}

.tabs { display: flex; gap: 6px; background: var(--cloud); border-radius: 14px; padding: 4px; margin-bottom: 18px; }
.tab { flex: 1; text-align: center; padding: 10px; border-radius: 10px; font-weight: 700; font-size: 14px; text-decoration: none; color: var(--ink); }
.tab.active { background: var(--white); color: var(--violet); box-shadow: 0 2px 6px rgba(0,0,0,.06); }

.top-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; background: var(--white); border-bottom: 1px solid var(--line);
}
.top-nav .right { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.points-pill {
  background: var(--cloud); color: var(--violet); font-weight: 700; padding: 6px 14px;
  border-radius: 999px; font-family: 'Poppins', sans-serif; font-size: 14px;
}

.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 16px; margin-top: 20px; }
.course-card {
  background: var(--white); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-card);
}
.course-card h3 { margin: 0 0 6px; font-size: 17px; }
.course-card p { color: var(--muted); font-size: 13px; margin: 0 0 14px; }

.progress-bar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 10px 0; }
.progress-bar > div { height: 100%; background: var(--teal); }

.lesson-list { list-style: none; padding: 0; margin: 16px 0; }
.lesson-list li {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px;
  background: var(--white); margin-bottom: 8px; box-shadow: 0 2px 8px rgba(27,27,47,.04);
}
.lesson-list li.locked { opacity: .5; }
.lesson-list a { color: var(--ink); text-decoration: none; font-weight: 700; flex: 1; }
/* Кнопка статусу праворуч — не тягнеться на всю вільну ширину, як назва уроку. */
.lesson-list a.btn { flex: 0 0 auto; color: var(--white); }
.lesson-list a.btn.secondary { color: var(--ink); }
/* На вузькому екрані назва уроку займає весь рядок, а кроки й статус ідуть
   під нею — інакше довга назва стискається в колонку по два слова. */
.lesson-list .lesson-title { flex: 1; min-width: 0; font-weight: 700; }
@media (max-width: 560px) {
  .lesson-list li { flex-wrap: wrap; row-gap: 10px; }
  .lesson-list .lesson-title { flex: 1 1 calc(100% - 38px); }
  .lesson-list li > :nth-child(3) { margin-left: 38px; }
  .lesson-list li > :nth-child(4) { margin-left: auto; }
}
.badge-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.badge-dot.done { background: var(--teal); color: var(--white); }
.badge-dot.open { background: var(--violet); color: var(--white); }
.badge-dot.locked { background: var(--line-2); color: var(--muted-2); }

.quiz-question { background: var(--white); border-radius: 14px; padding: 18px; margin-bottom: 14px; }
.quiz-question label { display: block; padding: 10px 12px; border-radius: 10px; margin-bottom: 8px; background: var(--cloud); cursor: pointer; }
.quiz-question label:hover { background: var(--violet-soft); }
textarea.input { min-height: 100px; resize: vertical; }

.callout { padding: 14px 16px; border-radius: 14px; margin-bottom: 16px; font-size: 14px; }
.callout.success { background: var(--ok-bg); color: var(--ok-fg); }
.callout.error { background: var(--err-bg); color: var(--err-fg); }
.callout.info { background: var(--violet-soft); color: var(--violet); }

.mascot-line { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.mascot-line img { width: 56px; }
.mascot-line p { margin: 0; font-size: 14px; }

.stat-number { font-family: 'Poppins', sans-serif; font-weight: 700; }

.table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.table select.input, .table td select { min-width: 128px; }
.table th { color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }

.dev-banner {
  background: var(--yellow); color: var(--ink); text-align: center; padding: 8px; font-size: 13px; font-weight: 700;
}

/* Дорожня карта уроку: загальний прогрес + ряд кроків (матеріал/тест) будь-якої кількості й порядку. */
.roadmap { margin-bottom: 22px; }
.roadmap-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.roadmap-head .step-count { font-size: 12px; color: var(--muted); font-weight: 700; }
.roadmap-head .step-pct { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 13px; color: var(--violet); }
.roadmap-track { height: 6px; border-radius: 999px; background: var(--cloud); overflow: hidden; margin-bottom: 16px; }
.roadmap-track > div { height: 100%; background: linear-gradient(90deg, var(--violet), var(--teal)); border-radius: 999px; transition: width .3s ease; }
.roadmap-steps { display: flex; align-items: center; overflow-x: auto; padding: 6px 2px 10px; gap: 0; }
.roadmap-step {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; text-decoration: none; position: relative; background: var(--line-2); color: var(--muted-2);
}
.roadmap-step.material { border-radius: 11px; }
.roadmap-step.quiz { border-radius: 50%; }
.roadmap-step.done { background: var(--teal); color: var(--white); }
.roadmap-step.current { background: var(--violet); color: var(--white); box-shadow: 0 0 0 4px rgba(108,76,224,.18); animation: roadmap-pulse 1.8s ease-in-out infinite; }
.roadmap-link { transform: scale(1); }
.roadmap-link:hover { filter: brightness(1.08); }
.roadmap-seg { flex-shrink: 0; width: 16px; height: 3px; background: var(--line-2); }
.roadmap-seg.done { background: var(--teal); }
@keyframes roadmap-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(108,76,224,.18); }
  50% { box-shadow: 0 0 0 8px rgba(108,76,224,.08); }
}

/* ===== Новий вигляд (2026-09): бічне меню замість верхньої навігації,
   картки з пастельними іконками, плитки-статистика, pill-фільтри. ===== */

.app-shell { display: flex; min-height: 100vh; align-items: stretch; }

.app-sidebar {
  width: 216px; flex-shrink: 0; background: var(--white); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 22px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  /* position:sticky сам створює контекст накладання, тож без z-index усе
     меню малювалось ПІД вмістом сторінки: підкладка випадного меню не
     ловила клік по картці курсу. Висувна панель у «Співробітниках» має
     60/61 і все одно лишається вище. */
  z-index: 30;
}
.app-sidebar .wordmark-row { display: flex; align-items: center; gap: 10px; padding: 0 6px 22px; }
.app-sidebar .wordmark-row svg { flex-shrink: 0; }

.sidebar-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); padding: 4px 14px 6px; margin-top: 8px; }

.sidebar-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px;
  font-weight: 700; font-size: 14px; color: var(--muted); text-decoration: none;
}
.sidebar-link svg { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; }
.sidebar-link:hover { background: var(--cloud); color: var(--ink); }
.sidebar-link.active { background: var(--cloud); color: var(--violet); }

/* Група меню, що розкривається («Навчання»). Зроблено на прихованому
   чекбоксі, а не на <details>: на вузькому екрані меню перетворюється на
   горизонтальну стрічку, і там групу треба показати плоско, без згортання.
   Закритий <details> ховає вміст засобами самого браузера, і перекрити це
   через CSS надійно не вийде; чекбокс лишає видимість повністю за нами. */
.nav-group { display: contents; }
.nav-group-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav-group-head { cursor: pointer; user-select: none; }
.nav-group-chev { margin-left: auto; width: 15px !important; height: 15px !important; transition: transform .15s ease; }
.nav-group-toggle:checked ~ .nav-group-head .nav-group-chev { transform: rotate(90deg); }
.nav-group-toggle:not(:checked) ~ .nav-group-items { display: none; }
.nav-group-toggle:focus-visible ~ .nav-group-head { outline: 2px solid var(--violet); outline-offset: 1px; }
.nav-group-items { display: flex; flex-direction: column; gap: 2px; }
/* Підпункт: вужчий відступ і дрібніший шрифт, щоб читалась ієрархія. */
.sidebar-link.sub { padding: 8px 14px 8px 32px; font-size: 13px; }
.sidebar-link.sub svg { width: 17px; height: 17px; }
/* Коли група згорнута, а активна сторінка всередині — підсвічуємо заголовок. */
.nav-group-toggle:not(:checked) ~ .nav-group-head.has-active { color: var(--violet); }

.sidebar-foot {
  margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 6px 0; border-top: 1px solid var(--line);
}
.sidebar-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--violet); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.sidebar-foot .who { min-width: 0; }
.sidebar-foot .who .name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-foot .who .sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-foot .logout { margin-left: auto; color: var(--muted-2); flex-shrink: 0; }
.sidebar-foot .logout svg { width: 18px; height: 18px; stroke: currentColor; display: block; }
.sidebar-foot .logout:hover { color: var(--coral); }

/* Картка себе внизу меню з випадним меню (профіль, вихід).
   Той самий прихований чекбокс, що й у групи «Навчання»: без JS, і так само
   працює від тапу. .userbox-back — прозора підкладка на весь екран, щоб
   клік повз меню його закривав. */
.userbox { position: relative; margin-top: 0; }
.userbox-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.userbox-back { display: none; position: fixed; inset: 0; z-index: 40; }
.userbox-toggle:checked ~ .userbox-back { display: block; }
.userbox-head { cursor: pointer; position: relative; z-index: 41; border-radius: 12px; }
.userbox-head:hover { background: var(--cloud); }
.userbox-head.here { background: var(--cloud); }
.userbox-head.here .name { color: var(--violet); }
.userbox-toggle:focus-visible ~ .userbox-head { outline: 2px solid var(--violet); outline-offset: 1px; }
.userbox-chev { margin-left: auto; width: 15px; height: 15px; flex-shrink: 0;
                stroke: var(--muted-2); transform: rotate(-90deg); transition: transform .15s ease; }
.userbox-toggle:checked ~ .userbox-head .userbox-chev { transform: rotate(90deg); }
.userbox-menu {
  display: none; position: absolute; z-index: 42; left: 0; right: 0; bottom: calc(100% + 6px);
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-card); padding: 6px;
}
.userbox-toggle:checked ~ .userbox-menu { display: block; }
/* Імʼя повністю: у вузькій картці воно обрізане трикрапкою. */
.userbox-name { font-size: 12px; color: var(--muted-2); padding: 6px 10px 8px; line-height: 1.3;
                border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.userbox-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
  font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none;
}
.userbox-item svg { width: 17px; height: 17px; flex-shrink: 0; stroke: currentColor; }
.userbox-item:hover { background: var(--cloud); }
.userbox-item.danger { color: var(--coral); }

.app-main { flex: 1; min-width: 0; padding: 28px 32px; }
.content-row { display: flex; gap: 24px; align-items: flex-start; }
.content-row .main-col { flex: 1; min-width: 0; }
.app-rail { width: 288px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
/* Розділ бази знань: «Зміст» ліворуч від вмісту, як на старому сайті.
   Переставляємо порядком, щоб не чіпати розмітку сторінки уроку. */
.content-row.kb-row .app-rail { order: -1; width: 252px; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; font-weight: 900; margin: 0 0 4px; }
.page-head .sub { margin: 0; color: var(--muted); font-size: 14px; }
.page-head-icon { display: flex; gap: 14px; align-items: center; }

.pts-pill {
  display: inline-flex; align-items: center; gap: 6px; background: var(--cloud); color: var(--violet); font-weight: 700;
  padding: 8px 16px; border-radius: 999px; font-family: 'Poppins', sans-serif; font-size: 14px; white-space: nowrap;
}

.section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

.hero-card {
  background: var(--white); border-radius: 20px; box-shadow: 0 8px 30px rgba(27,27,47,.06); padding: 26px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 26px;
}
.eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--coral); margin-bottom: 8px; }

.btn-cta {
  /* Одна головна кнопка на весь сайт — фіолетова, як .btn (12.10.2026).
     Помаранчевий лишаємо для попереджень і небезпечних дій. */
  display: inline-flex; align-items: center; justify-content: center; background: var(--violet); color: var(--white);
  border: none; border-radius: 12px; padding: 13px 22px; font-size: 14px; font-weight: 700; font-family: 'Lato', sans-serif;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn-cta:hover { opacity: .92; }

.new-card { background: var(--white); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-card); }
.new-card.pad-lg { padding: 26px; }
.new-card.pad-sm { padding: 18px; }

.stat-tile { background: var(--white); border-radius: 16px; padding: 20px; box-shadow: var(--shadow-card); flex: 1; }
.stat-tile .num { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 30px; }
.stat-tile .lbl { font-size: 12px; color: var(--muted); margin-top: 4px; }

.pill-filter {
  padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; border: none; cursor: pointer;
  font-family: 'Lato', sans-serif; text-decoration: none; display: inline-flex; align-items: center;
}
.pill-filter.active { background: var(--violet); color: var(--white); }
.pill-filter:not(.active) { background: var(--white); color: var(--ink); }

.icon-block { border-radius: 12px; height: 88px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; overflow: hidden; }
.icon-block img, .icon-block svg { max-width: 100%; }
.icon-block.tone-violet { background: var(--violet-soft); }
.icon-block.tone-teal { background: var(--ok-bg); }
.icon-block.tone-coral { background: var(--err-bg); }
.icon-block.tone-yellow { background: var(--warn-bg); }
.icon-block.tone-muted { background: var(--cloud-2); }

.opt-card { border: 2px solid transparent; border-radius: 16px; padding: 16px; background: var(--white); box-shadow: var(--shadow-card); cursor: pointer; display: block; }
.opt-card.selected, .opt-card:has(input:checked) { border-color: var(--violet); }

.table-card { background: var(--white); border-radius: 18px; padding: 22px; box-shadow: var(--shadow-card); overflow-x: auto; }

.new-tabs { display: flex; gap: 8px; flex-wrap: wrap; }

/* Конструктор курсів (адмінка): панель фільтра + сітка карток курсів. */
.filter-toggle > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--violet); padding: 10px 18px; border: 1.5px solid var(--violet); border-radius: 999px; width: fit-content; }
.filter-toggle > summary::-webkit-details-marker { display: none; }
.filter-toggle[open] > summary { background: var(--violet); color: var(--white); }
.filter-panel { background: var(--white); border-radius: 16px; padding: 16px; margin: 12px 0 20px; display: flex; gap: 12px; flex-wrap: wrap; box-shadow: var(--shadow-card); }
.filter-panel .input { margin: 0; }
.filter-panel > * { flex: 1; min-width: 160px; }

.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; margin-top: 8px; }
.course-card { background: var(--white); border-radius: 16px; padding: 18px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 8px; position: relative; }
.chip { display: inline-flex; align-items: center; width: fit-content; padding: 3px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.chip.published { background: var(--ok-bg); color: var(--ok-fg); }
.chip.draft { background: var(--warn-bg); color: var(--warn-fg); }
.course-card h3 { margin: 4px 0 0; font-size: 17px; font-family: 'Lato'; font-weight: 900; }
.course-card p.desc { margin: 0; font-size: 13px; color: var(--muted); flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.course-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 4px; }
.course-stats b { color: var(--ink); font-family: 'Poppins'; }
.course-card .btn.small { margin-top: 6px; }

/* ===== Мобільні екрани (2026-09).
   Продавці вчаться переважно з телефона, тому бічне меню на вузьких
   екранах перетворюється на верхню панель зі стрічкою розділів,
   бічна колонка йде під основну, а таблиці скролляться всередині картки,
   а не ламають сторінку горизонтальним скролом. ===== */

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }

@media (max-width: 900px) {
  .app-shell { flex-direction: column; }

  .app-sidebar {
    width: auto; height: auto; position: sticky; top: 0; z-index: 30;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 10px 14px; overflow: visible;
    border-right: none; border-bottom: 1px solid var(--line);
  }
  .app-sidebar .wordmark-row { padding: 0; }
  .app-sidebar .wordmark { font-size: 19px; }

  .sidebar-foot {
    margin: 0 0 0 auto; padding: 0; border-top: none; width: auto; gap: 8px;
  }
  .sidebar-avatar { width: 32px; height: 32px; font-size: 12px; }
  .sidebar-foot .who { display: none; }
  /* Угорі екрана картка себе стоїть праворуч, тож меню падає вниз і
     притискається до правого краю, а не розтягується на всю ширину. */
  .userbox { margin: 0 0 0 auto; }
  .userbox-head { padding: 4px; }
  .userbox-chev { display: none; }
  .userbox-menu { left: auto; right: 0; bottom: auto; top: calc(100% + 8px); min-width: 200px; }

  /* стрічка розділів на всю ширину — гортається пальцем */
  .sidebar-nav {
    order: 3; flex-basis: 100%; flex-direction: row; gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .sidebar-link { white-space: nowrap; padding: 8px 12px; font-size: 13px; flex-shrink: 0; }
  /* У стрічці згортати нема куди: показуємо підпункти як звичайні розділи. */
  .nav-group-head { display: none; }
  .nav-group-items { display: contents !important; }
  .sidebar-link.sub { padding: 8px 12px; font-size: 13px; }
  .sidebar-link.sub svg { width: 20px; height: 20px; }

  .app-main { padding: 18px 14px; }
  .content-row { flex-direction: column; align-items: stretch; }
  .content-row .main-col { width: 100%; }
  .app-rail { width: 100%; }
  /* На телефоні «Зміст» бази знань стає звичайним блоком під вмістом:
     тримати його першим на вузькому екрані означало б гортати список
     розділів щоразу, перш ніж дістатись до самого матеріалу. */
  .content-row.kb-row .app-rail { order: 0; width: 100%; }

  .page-head { gap: 12px; }
  .page-head h1 { font-size: 20px; }

  .hero-card { padding: 20px; gap: 16px; }
  .new-card.pad-lg { padding: 20px; }
  .card { padding: 22px; }

  .course-grid { grid-template-columns: 1fr; }
  .stat-tile { min-width: 132px; padding: 16px; }
  .stat-tile .num { font-size: 24px; }

  /* таблиці: скрол усередині картки, сторінка лишається без зсуву */
  .table-card { padding: 16px; }
  .table { min-width: 520px; }

  .btn-cta, .btn.small { width: auto; }
  .center-page { padding: 16px; }
}

/* ---- Телефон: нижнє меню для учня (12.10.2026) -------------------------
   Верх — один рядок: логотип, дзвіночок, аватар. Розділи — знизу під пальцем.
   Тема, крамниця й події переїхали в меню аватара. Персонал не чіпаємо. */
.bottom-nav { display: none; }
.userbox-item.only-mobile { display: none; }
@media (max-width: 900px) {
  .app-shell.learner .sidebar-nav,
  .app-shell.learner .sb-theme { display: none; }
  .app-shell.learner .app-sidebar { flex-wrap: nowrap; padding: 8px 14px; }
  .app-shell.learner .sb-inbox { margin: 0 0 0 auto !important; padding: 0 !important; }
  .app-shell.learner .inbox-btn { padding: 8px; width: auto; }
  .app-shell.learner .inbox-label { display: none; }
  .app-shell.learner .inbox-count { margin-left: 0; }
  .app-shell.learner .userbox { margin: 0; }
  .app-shell.learner .userbox-item.only-mobile { display: flex; }
  .app-shell.learner .app-main { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .app-shell.learner .bottom-nav {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--white); border-top: 1px solid var(--line);
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 20px rgba(27,27,47,.06);
  }
  .bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px;
    font-size: 11.5px; font-weight: 700; color: var(--muted-2); text-decoration: none; border-radius: 10px; }
  .bottom-nav a svg { width: 23px; height: 23px; stroke: currentColor; }
  .bottom-nav a.on { color: var(--violet); }
  .bottom-nav a.on svg { background: var(--violet-soft); border-radius: 9px; padding: 2px; width: 27px; height: 27px; margin: -2px 0; }
}

/* ---- Телефон: шапка персоналу (пакет 134) ------------------------------
   Раніше шапка адміна йшла в три рядки: логотип з підписом «Щоденне»,
   потім дзвіночок і тема, потім стрічка розділів. Тепер як в учня: один
   рядок (логотип, дзвіночок, аватар), тема в меню аватара, нижче стрічка. */
@media (max-width: 900px) {
  .app-shell.staff .app-sidebar { flex-wrap: wrap; row-gap: 8px; }
  .app-shell.staff .app-sidebar .sidebar-group-label { display: none; }
  .app-shell.staff .sb-theme { display: none; }
  .app-shell.staff .sb-inbox { margin: 0 0 0 auto !important; padding: 0 !important; }
  .app-shell.staff .inbox-btn { padding: 8px; width: auto; }
  .app-shell.staff .inbox-label { display: none; }
  .app-shell.staff .inbox-count { margin-left: 0; }
  .app-shell.staff .userbox { margin: 0; }
  .app-shell.staff .sidebar-nav { order: 3; }
}
@media (max-width: 900px) {
  .userbox-item.only-mobile.mob-theme { display: flex; }
}

@media (max-width: 420px) {
  body { font-size: 14px; }
  .app-main { padding: 14px 10px; }
  .app-sidebar { padding: 8px 10px; }
  .card, .new-card, .hero-card { padding: 16px; border-radius: 16px; }
  .page-head h1 { font-size: 18px; }
  .mascot-line img { width: 44px; }
  .quiz-question { padding: 14px; }
}


/* Перемикач теми в підвалі бічного меню. */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 12px;
  font-weight: 700; cursor: pointer;
}
.theme-toggle:hover { background: var(--violet-soft); color: var(--violet); border-color: var(--violet); }
.theme-toggle svg { width: 14px; height: 14px; }

/* Пошук по курсах — завжди на видноті, без згортання. */
.filter-open { margin-bottom: 6px; }
.filter-open .filter-panel { margin: 0 0 14px; }

/* Опис курсу або бази знань: HTML із редактора старої платформи, пропущений
   через octoprof_rich_text(). Свого шрифту й кольору він уже не несе — усе
   оформлення задається тут, щоб опис виглядав так само, як решта сторінки. */
.rich { font-size: 14px; line-height: 1.6; color: var(--muted); }
.rich > :first-child { margin-top: 0; }
.rich > :last-child { margin-bottom: 0; }
.rich p { margin: 0 0 10px; }
.rich ul, .rich ol { margin: 0 0 10px; padding-left: 20px; }
.rich li { margin: 0 0 4px; }
.rich h3, .rich h4 { font-family: 'Poppins', sans-serif; font-size: 15px;
  color: var(--ink); margin: 14px 0 6px; }
.rich strong, .rich b { color: var(--ink); font-weight: 700; }
.rich a { color: var(--violet); }
.rich blockquote { margin: 0 0 10px; padding-left: 12px;
  border-left: 3px solid var(--line-2); }

/* Термін проходження курсу: каталог, головна, сторінка курсу, звіт. */
.due { display:inline-block; font-size:12px; font-weight:700; padding:2px 8px; border-radius:7px; line-height:1.5; }
.due.ok { background:var(--violet-soft); color:var(--violet); }
.due.soon { background:var(--warn-bg); color:var(--warn-fg); }
.due.late { background:var(--err-bg); color:var(--err-fg); }

/* Перемикач «увімкнено / вимкнено» для курсів, модулів і уроків. Це кнопка
   форми: клік одразу зберігає стан, без окремої кнопки «Зберегти». */
.tgl { display:inline-flex; align-items:center; gap:8px; border:0; background:none; padding:2px 0; margin:0;
       font:inherit; font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer; white-space:nowrap; }
.tgl i { position:relative; flex:none; width:38px; height:22px; border-radius:999px; background:var(--line-2); transition:background .15s; }
.tgl i::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%;
       background:#fff; box-shadow:0 1px 3px rgba(27,27,47,.3); transition:left .15s; }
.tgl.on { color:var(--ok-fg); }
.tgl.on i { background:var(--teal); }
.tgl.on i::after { left:19px; }
.tgl.part { color:var(--warn-fg); }
.tgl.part i { background:var(--warn-fg); opacity:.75; }
.tgl.part i::after { left:11px; }
.tgl:hover i { filter:brightness(.95); }
.tgl:focus-visible { outline:2px solid var(--violet); outline-offset:3px; border-radius:6px; }

/* Редактор: збереження кнопкою, підтвердження, «Повернути» (12.10.2026). */
.ui-save-btn:disabled, .btn:disabled { background:var(--line-2); color:var(--muted-2); cursor:default; box-shadow:none; }
.ui-save-form .ui-changed { border-color:var(--violet) !important; box-shadow:0 0 0 3px var(--violet-soft); }
/* left:0/right:0 + margin:auto замість left:50% (пакет 137): з left:50% смужці лишалась
   половина ширини екрана, і на телефоні кнопки падали в два-три рядки. */
.ui-savebar { position:fixed; left:0; right:0; margin:0 auto; width:max-content; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:70;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; max-width:calc(100% - 24px);
  background:#1B1B2F; border:1px solid rgba(255,255,255,.1); color:#fff; border-radius:14px; padding:9px 12px 9px 14px; box-shadow:0 10px 30px rgba(27,27,47,.3); font-size:13.5px; }
.ui-savebar[hidden] { display:none; }
.ui-savebar .dot { width:8px; height:8px; border-radius:50%; background:#FFC93C; flex:none; }
.ui-savebar .sp { flex:1; min-width:10px; }
.ui-savebar .btn { width:auto; margin:0; }
.ui-savebar .btn.secondary { background:rgba(255,255,255,.12); color:#fff; }
body.has-savebar .app-main { padding-bottom:90px; }
.ui-modal-back { position:fixed; inset:0; z-index:80; background:rgba(27,27,47,.45); display:flex; align-items:center; justify-content:center; padding:16px; }
.ui-modal-back[hidden] { display:none; }
.ui-modal { background:var(--white); color:var(--ink); border-radius:16px; padding:18px; width:100%; max-width:420px; box-shadow:0 18px 50px rgba(27,27,47,.3); }
.ui-modal-t { margin:0 0 16px; font-size:14.5px; line-height:1.5; }
.ui-modal-a { display:flex; justify-content:flex-end; gap:8px; }
.ui-modal-a .btn { width:auto; margin:0; }
.ui-modal-a .btn.danger { background:var(--error, #D9472A); }
.ui-toast { position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:65; display:flex; align-items:center; gap:12px;
  background:#1B1B2F; color:#fff; border-radius:12px; padding:9px 10px 9px 14px; font-size:13px; box-shadow:0 10px 30px rgba(27,27,47,.3); max-width:calc(100% - 32px);
  transition:opacity .3s, transform .3s; margin:0; }
.ui-toast.gone { opacity:0; transform:translateY(10px); pointer-events:none; }
.ui-toast button { border:0; background:none; color:#C8BBFF; font:inherit; font-weight:900; cursor:pointer; padding:4px 6px; }
.ui-toast .ui-toast-x { color:rgba(255,255,255,.6); font-weight:400; }
body.has-savebar .ui-toast { bottom:80px; }

/* Урок очима учня: один рядок кроків (12.10.2026). */
.lsteps { margin-bottom:18px; display:flex; flex-direction:column; gap:8px; }
.lsteps-row { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.ls { display:inline-flex; align-items:center; gap:4px; padding:5px 11px; border-radius:999px; font-size:12.5px; font-weight:700;
  background:var(--white); border:1px solid var(--line-2); color:var(--muted-2); text-decoration:none; white-space:nowrap; }
.ls.done { background:var(--ok-bg); border-color:transparent; color:var(--ok-fg); }
.ls.done:hover { filter:brightness(.97); }
.ls.cur { background:var(--violet-deep); border-color:var(--violet-deep); color:#fff; box-shadow:0 0 0 4px var(--violet-soft); }
.ls-pct { margin-left:auto; font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; color:var(--violet); }
.lsteps .roadmap-track { margin-bottom:0; }
.cm-fold > summary { list-style:none; display:flex; align-items:center; gap:8px; }
.cm-fold > summary::-webkit-details-marker { display:none; }
.cm-fold > summary::after { content:'▾'; margin-left:auto; color:var(--muted); }
.cm-fold[open] > summary::after { content:'▴'; }
.open-form { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
@media (max-width: 900px) { .content-row.lesson-row .app-rail { order:-1; } }
.lesson-brief { font-size:12px; color:var(--muted-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
@media (max-width: 560px) { .lesson-brief { display:none; } }

/* ---- Кнопки адмінки: чотири види, два розміри (пакет 135) -------------
   Головна (.btn / .btn-cta) — фіолетова, одна на блок.
   Звичайна (.btn.secondary) — біла з рамкою: раніше була світло-бузкова й
   на фоні сторінки (той самий бузковий) зливалась у «жирний текст».
   Тиха (.btn.ghost) — без рамки, для другорядного.
   Небезпечна (.btn.danger / .btn.warn) — біла з червоною / бурштиновою рамкою.
   Розмір задається класом, а не style="padding…" у кожній кнопці. */
.app-shell.staff .btn { width: auto; }
.app-shell.staff .btn.small { min-height: 34px; padding: 6px 14px; font-size: 13px; border-radius: 10px; line-height: 1.2; }
.app-shell.staff .btn:not(.small), .app-shell.staff .btn-cta { min-height: 42px; padding: 10px 20px; font-size: 14px; border-radius: 12px; }
.app-shell.staff .btn.secondary {
  background: var(--white); color: var(--ink); border: 1px solid var(--line-2);
}
.app-shell.staff .btn.secondary:hover { opacity: 1; border-color: var(--violet); color: var(--violet); }
.app-shell.staff .btn.secondary.on { background: var(--violet-deep); border-color: var(--violet-deep); color: #fff; }
.btn.ghost { background: transparent; border: 1px solid transparent; color: var(--violet); }
.btn.ghost:hover { opacity: 1; background: var(--violet-soft); }
.app-shell.staff .btn.danger, .btn.danger { background: var(--white); color: var(--err-fg); border: 1px solid color-mix(in srgb, var(--error) 45%, transparent); }
.app-shell.staff .btn.danger:hover, .btn.danger:hover { opacity: 1; background: var(--err-bg); border-color: var(--error); color: var(--err-fg); }
.app-shell.staff .btn.warn, .btn.warn { background: var(--white); color: var(--warn-fg); border: 1px solid color-mix(in srgb, var(--warn-fg) 45%, transparent); }
.app-shell.staff .btn.warn:hover, .btn.warn:hover { opacity: 1; background: var(--warn-bg); }
.btn svg.bi { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: default; }

/* Маленьке «видалити»/«✕» у рядку списку: червоний текст без підкреслення. */
.lnk-del { border: none; background: none; padding: 2px 4px; color: var(--err-fg); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; border-radius: 6px; }
.lnk-del:hover { background: var(--err-bg); }
.lnk-quiet { border: none; background: none; padding: 2px 4px; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; border-radius: 6px; }
.lnk-quiet:hover { color: var(--violet); background: var(--violet-soft); }

/* Незворотні дії: внизу сторінки або картки, окремо від звичайних дій. */
.danger-zone { border: 1px solid color-mix(in srgb, var(--error) 35%, transparent); background: color-mix(in srgb, var(--err-bg) 45%, var(--white)); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.danger-zone > .dz-title { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--err-fg); margin: 0; }
.danger-zone .dz-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.danger-zone .dz-note { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.5; }

/* Вибір файлу замість сірої кнопки браузера «Choose File» (малює admin-ui.js). */
.ui-file { position: relative; display: flex; align-items: center; gap: 12px; border: 1.5px dashed var(--line-2); border-radius: 12px; padding: 10px 12px; background: var(--white); cursor: pointer; min-width: 0; flex: 1; transition: border-color .15s, background .15s; }
.ui-file:hover, .ui-file.over { border-color: var(--violet); background: var(--violet-soft); }
.ui-file input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.ui-file .uf-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--violet-soft); color: var(--violet); display: grid; place-items: center; flex: none; }
.ui-file .uf-ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-file .uf-t { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ui-file .uf-main { font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-file .uf-main b { color: var(--violet); }
.ui-file .uf-sub { font-size: 11.5px; color: var(--muted-2); }
.ui-file.has .uf-ic { background: var(--ok-bg); color: var(--ok-fg); }
.danger-zone summary::-webkit-details-marker { display: none; }

/* ---- Перемикач замість галочки в налаштуваннях (пакет 137) ------------
   Клас .sw ставить admin-ui.js у формах налаштувань. Малюємо сам <input>,
   тож розмітку сторінок і обробку форм не чіпаємо. */
.app-shell input[type=checkbox].sw {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0 2px 0 0; cursor: pointer;
  position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--line-2);
  transition: background .15s; vertical-align: middle;
}
.app-shell input[type=checkbox].sw::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .15s;
}
.app-shell input[type=checkbox].sw:checked { background: var(--violet); }
.app-shell input[type=checkbox].sw:checked::after { left: 19px; }
.app-shell input[type=checkbox].sw:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.app-shell input[type=checkbox].sw:disabled { opacity: .5; cursor: default; }
.check-row:has(> input.sw) { align-items: center; gap: 10px; }
@media (max-width: 480px) {
  .ui-savebar { flex-wrap: nowrap; gap: 8px; padding: 8px 10px; font-size: 12.5px; }
  .ui-savebar .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .ui-savebar .sp { min-width: 0; }
  .ui-savebar .btn.small { padding: 6px 10px; }
}

/* ---- Сайт співробітника: другорядні кнопки (пакет 139, варіант «В») ----
   Були світло-бузкові на такому ж бузковому тлі сторінки й читались як текст
   («Знайти себе», «Відкрити», «Залишити коментар»). Тепер бузок яскравіший і
   фіолетовий текст: стиль той самий, але видно, що це кнопка. */
.app-shell.learner .btn.secondary {
  background: color-mix(in srgb, var(--violet) 16%, var(--white));
  color: var(--violet); border: 1px solid transparent;
}
.app-shell.learner .btn.secondary:hover { opacity: 1; background: color-mix(in srgb, var(--violet) 24%, var(--white)); }

/* Мітка стану уроку на сторінці курсу: не кнопка. */
.ls-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; }
.ls-chip.ok { background: var(--ok-bg); color: var(--ok-fg); }
.ls-chip.mut { background: var(--cloud-2); color: var(--muted); }

/* Вхід, реєстрація, заявка: посилання фіолетові, а не синій колір браузера;
   рамка поля при введенні фіолетова, а не жовто-помаранчева. */
.center-page a:not(.btn):not(.btn-cta) { color: var(--violet); }
.center-page .input:focus, .center-page textarea.input:focus { border-color: var(--violet); outline: none; box-shadow: 0 0 0 3px var(--violet-soft); }
/* Порожній стан на сторінці подій (пакет 139). */
.ev-empty { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.ev-empty img { width: 52px; flex: none; }
.ev-empty p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }

/* Пакет 140 — картка результату тесту й завершеного уроку. */
.qres { display:flex; align-items:center; gap:16px; padding:16px 18px; border-radius:16px; margin-bottom:16px;
  background:var(--white); border:1px solid var(--line); border-left:5px solid var(--ok-fg); box-shadow:var(--shadow-card); }
.qres-bad { border-left-color:var(--err-fg); }
.qres-mid { border-left-color:var(--warn-fg); }
.qres-pct { flex:none; min-width:84px; font-size:34px; line-height:1; font-weight:800; color:var(--ok-fg); font-variant-numeric:tabular-nums; }
.qres-pct small { font-size:18px; font-weight:700; margin-left:1px; }
.qres-bad .qres-pct { color:var(--err-fg); }
.qres-mid .qres-pct { color:var(--warn-fg); }
.qres-ico { flex:none; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--ok-bg); color:var(--ok-fg); font-size:22px; font-weight:800; }
.qres-body { min-width:0; }
.qres-body p { margin:0; }
.qres-title { font-size:16px; font-weight:800; color:var(--ink); }
.qres-line { font-size:14px; color:var(--ink); margin-top:4px !important; }
.qres-line a { color:var(--violet); }
.qres-meta { font-size:13px; color:var(--muted); margin-top:4px !important; }
.qres-note { font-size:13px; color:var(--muted); margin:0 0 8px; }
@media (max-width:480px) { .qres { gap:12px; padding:14px; } .qres-pct { min-width:66px; font-size:28px; } }

/* Пакет 142 — вибір людини з пошуком (admin-ui.js, select[data-person-search]). */
.ps { position:relative; min-width:0; flex:1 1 240px; }
.ps .ps-in { margin:0; width:100%; }
.ps-list { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:40; background:var(--white); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 10px 30px rgba(27,27,47,.14); padding:4px; max-height:320px; overflow:auto; }
.ps-o { display:flex; flex-direction:column; gap:1px; padding:8px 10px; border-radius:9px; cursor:pointer; }
.ps-o b { font-size:13.5px; color:var(--ink); font-weight:700; }
.ps-o span { font-size:12px; color:var(--muted); }
.ps-o.on, .ps-o:hover { background:var(--violet-soft); }
.ps-none { padding:10px; font-size:13px; color:var(--muted); }
.ps-err { font-size:12px; color:var(--err-fg); margin-top:4px; }