/* Вигляд застосунку — варіант 8 (Микола обрав 04.11.2026; токени — docs/design/v8-src/v8.css, бриф — docs/plans/dyzain-vprovadzhennya.md, розділ 1); старий вигляд прибрано 05.11.2026 («мені нова подобається - то стару можеш уже прибирати»).
   Клас v8 стоїть на <html> завжди (public/index.html): правила тут сильніші за спільні компоненти public/app.css, якими користується й планшет (public/kiosk.html). Кольори компонентів змінюємо через їхні змінні, каркас — public/shell.js. Нічної теми поки немає. */
/* ---------- шрифт Rubik — у себе (пункт 22 docs/plans/ipad-dilnytsi.md): без стилів Google на старті; змінний шрифт 300–900 (Rubik 2.300), кирилиця й латиниця,
   ліцензія OFL — public/fonts/rubik-OFL.txt. Штамп ?v= — відбиток файла (scripts/build-ui.js), тож телефон тримає шрифт рік і бере новий, щойно файл зміниться.
   Діапазон ваги — одним правилом ---------- */
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/fonts/rubik-cyrillic-ext.woff2?v=79891522e6") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/fonts/rubik-cyrillic.woff2?v=963fc62d2c") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/fonts/rubik-latin.woff2?v=99ec7ccb40") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
html.v8:not(#v8) {
  color-scheme: light;
  --bg: #EEF0F3; --surface: #FFFFFF; --surface-2: #F5F7FA; --ink: #1E2A4A; --ink-2: #586B82; --ink-3: #8A9BB3;
  --line: rgba(30, 42, 74, .12); --axis: rgba(30, 42, 74, .26);
  --accent: #2F8FEF; --accent-wash: #DCEBFC; --accent-strong: #1B6FD6; --band: rgba(47, 143, 239, .16); --track: #E9EEF4; --plan: #586B82; --gold: #9A4B00;
  --good: #0A8F62; --bad: #E0392B; --warn: #F2C400; --alert: #F2A33A; --alert-ink: #4A2A00; --focus: #2F8FEF;
  --shadow: 0 8px 24px rgba(30, 42, 74, .08);
  --font: "Rubik", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display: var(--font);
  --on-accent: #fff; --on-status: #fff;
  --v8-panel: #EEF0F3; --v8-well: #E4E8EE; --v8-coral: #F26B52; --v8-coral-soft: #F6DCD6; --v8-coral-ink: #D8311C; --v8-sky: #D4E7F6; --v8-act-hover: #175FB8; --v8-act-soft-hover: #CBE1FA; --v8-danger: #E0392B; --v8-danger-soft: #FDECEA;
}
html.v8 body { background: var(--v8-panel); font-size: 14px; -webkit-font-smoothing: antialiased; }

/* ---------- каркас: телефон і вузькі екрани ---------- */
html.v8 .v8-side, html.v8 .v8-icons { display: none; }
html.v8 .v8-main { padding: 14px 16px calc(100px + env(safe-area-inset-bottom)); max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
html.v8 .v8-right { padding: 0 16px calc(100px + env(safe-area-inset-bottom)); max-width: 760px; margin: -88px auto 0; }
html.v8 .v8-panel.no-right .v8-right { display: none; }
html.v8 .v8-pane { display: flex; flex-direction: column; gap: 12px; }
html.v8 .v8-pane[hidden] { display: none; }
html.v8 .wrap { max-width: none; margin: 0; padding: 0; gap: 12px; }
html.v8 #sectionBar, html.v8 #tabs { display: none !important; }
/* «Продажі» — вкладки тепер у меню (ПК) і рядком під заголовком (телефон), тож своя смуга вкладок не потрібна нікому, і власнику теж */
html.v8 #tabsSales { display: none !important; }

html.v8 .v8-top { display: flex; align-items: center; gap: 10px; }
html.v8 .v8-av { width: 56px; height: 56px; border-radius: 28px; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: var(--ink); box-shadow: var(--shadow); flex: none; }
html.v8 .v8-av.sm { width: 40px; height: 40px; border-radius: 20px; font-size: 13px; }
html.v8 .v8-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
html.v8 .v8-nm b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.v8 .v8-nm span { font-size: 11px; color: var(--ink-2); }
html.v8 .v8-chip { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border: 0; border-radius: 13px; background: #fff; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink); box-shadow: var(--shadow); cursor: pointer; flex: none; white-space: nowrap; }
html.v8 .v8-chip[hidden] { display: none; }
html.v8 .v8-bell { position: relative; width: 36px; height: 36px; border: 0; border-radius: 18px; background: none; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
html.v8 .v8-bell[hidden] { display: none; }
html.v8 .v8-dot { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 4px; background: var(--v8-coral); }
html.v8 .v8-dot[hidden] { display: none; }
html.v8 .v8-greet h1 { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
html.v8 .v8-greet[hidden] { display: none; }

/* панель знизу: 4 розділи + «Ще» */
html.v8 .v8-bar { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 50; min-height: 64px; border-radius: 20px; background: #fff; display: flex; justify-content: space-around; align-items: center; padding: 4px 4px; box-shadow: 0 8px 28px rgba(30, 42, 74, .16); }
html.v8 .v8-it { position: relative; flex: 1 1 0; min-width: 0; height: 56px; border: 0; background: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: inherit; font-size: 10px; letter-spacing: -.02em; color: var(--ink-3); cursor: pointer; border-radius: 14px; padding: 0 1px; }
html.v8 .v8-it span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
html.v8 .v8-it.on { color: var(--v8-coral); font-weight: 600; }             /* «Виробництво» й «Пропозиції» вміщаються й підсвіченими (меню на вісім розділів) */
html.v8 .v8-it .v8-cnt { position: absolute; top: 3px; left: calc(50% + 6px); }
html.v8 .v8-cnt { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--v8-coral); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
html.v8 .v8-cnt[hidden] { display: none; }

/* вкладки розділу рядком під заголовком — на телефоні й планшеті (на ПК вони в лівому меню); прокручуються вбік, як папки в Telegram */
html.v8 .v8-pills-box { display: contents; }
html.v8 .v8-pills { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -4px -16px -6px; padding: 4px 16px 10px; scroll-padding-inline: 16px; }
html.v8 .v8-pills::-webkit-scrollbar { display: none; }
html.v8 .v8-pills[hidden] { display: none; }
html.v8 .v8-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border: 0; border-radius: 17px; background: #fff; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; box-shadow: 0 2px 8px rgba(30, 42, 74, .08); cursor: pointer; white-space: nowrap; }
html.v8 .v8-pill.on { background: var(--ink); color: #fff; }

/* власні екрани каркаса (етап 3 меню): «Я», «Рахунки», «Тони», «Назви зразків», «Заступник» — свій контейнер поверх частин сторінки */
html.v8 .v8-own-box { display: none; }
html.v8 body.v8-own .v8-main > .wrap:not(.v8-own-box) { display: none !important; }
html.v8 body.v8-own .v8-own-box.on { display: flex; }
html.v8 body.v8-own #tabsSettings, html.v8 body.v8-own #tabsShtab { display: none !important; }
html.v8 .v8-own-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
html.v8 .v8-me-card { display: flex; align-items: center; gap: 16px; }
html.v8 .v8-me-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
html.v8 .v8-me-tx h2 { margin: 0; font-size: 20px; }
html.v8 .v8-me-tx > span { font-size: 13px; color: var(--ink-2); }
html.v8 .v8-me-tx .v8-me-chip { align-self: flex-start; margin-top: 4px; padding: 4px 10px; border-radius: 12px; background: var(--v8-panel); color: var(--ink); font-weight: 600; }
html.v8 .v8-me-rows { padding-top: 6px; padding-bottom: 6px; }

/* шторка «Ще» */
html.v8 .v8-dim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; background: rgba(30, 42, 74, .45); }
html.v8 .v8-dim[hidden], html.v8 .v8-sheet[hidden] { display: none; }
html.v8 .v8-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; background: #fff; border-radius: 24px 24px 0 0; padding: 10px 18px calc(24px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(30, 42, 74, .12); display: flex; flex-direction: column; max-height: 85vh; overflow-y: auto; }
html.v8 .v8-hd { width: 40px; height: 4px; border-radius: 2px; background: var(--track); margin: 0 auto 12px; flex: none; }
html.v8 .v8-sheet h3 { margin: 0; font-size: 16px; font-weight: 700; }
html.v8 .v8-cap { font-size: 12px; color: var(--ink-3); margin: 2px 0 6px; }
html.v8 .v8-mrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
html.v8 .v8-mrow:last-child { border-bottom: 0; }
html.v8 .v8-mic { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-wash); color: var(--accent-strong); display: inline-flex; align-items: center; justify-content: center; flex: none; }
html.v8 .v8-mic.coral { background: var(--v8-coral-soft); color: var(--v8-coral-ink); }
html.v8 .v8-mtx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
html.v8 .v8-mtx b { font-size: 14px; font-weight: 700; }
html.v8 .v8-mtx span { font-size: 12px; color: var(--ink-3); }
html.v8 .v8-mcnt { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--v8-coral); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
html.v8 .v8-mcnt[hidden] { display: none; }
html.v8 .v8-mch { color: var(--ink-3); display: inline-flex; flex: none; }
html.v8 .v8-sh2 { margin: 14px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }

/* сповіщення: панель більше не прив'язана до смуги розділу */
html.v8 .nt-panel { position: fixed; top: 60px; left: auto !important; right: 12px; width: min(460px, calc(100vw - 24px)); z-index: 70; border: 0; border-radius: 18px; box-shadow: 0 24px 60px rgba(30, 42, 74, .28); }

/* ---------- ПК від 1180 px: темне тло, панель, ліве меню 180 px, правий стовпчик ---------- */
@media (min-width: 1180px) {
  /* як повноцінний сайт, за зразком кабінету дилера (Микола, 06.11.2026: «воно зараз виглядає як планшет в середині екрану»): сіре тло на всю сторінку, ліва панель окремою карткою на всю висоту, робоча частина на всю ширину */
  html.v8 body { background: var(--v8-panel); margin: 0; }
  html.v8 .v8-bar, html.v8 .v8-top, html.v8 .v8-dim, html.v8 .v8-sheet { display: none !important; }
  html.v8 .v8-frame { padding: 16px; box-sizing: border-box; min-height: 100vh; }
  html.v8 .v8-panel { display: flex; align-items: flex-start; gap: 20px; min-height: calc(100vh - 32px); }
  html.v8 .v8-side { display: flex; flex-direction: column; width: 232px; flex: none; box-sizing: border-box; padding: 18px 14px; background: #fff; border-radius: 20px; box-shadow: var(--shadow); position: -webkit-sticky; position: sticky; top: 16px; align-self: flex-start; height: calc(100vh - 32px); overflow-y: auto; }
  html.v8 .v8-logo { width: 72px; height: 16px; color: var(--ink); flex: none; margin: 4px 6px 0; }
  html.v8 .v8-me { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 3px; align-items: center; justify-items: start; margin: 16px 0 12px; padding: 10px; border-radius: 12px; background: var(--v8-panel); }
  html.v8 .v8-me .v8-av { grid-row: span 2; width: 36px; height: 36px; border-radius: 18px; font-size: 12px; }
  html.v8 .v8-me b { font-size: 13px; font-weight: 700; }
  html.v8 .v8-nav { display: flex; flex-direction: column; gap: 2px; }
  html.v8 .v8-foot { margin-top: auto; padding-top: 12px; }
  html.v8 .v8-nv { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 10px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 13px; color: var(--ink-2); text-align: left; cursor: pointer; }
  html.v8 .v8-nv:hover { background: var(--v8-panel); }
  html.v8 .v8-nv .v8-i { color: var(--ink-3); flex: none; }
  html.v8 .v8-nv .v8-cnt { margin-left: auto; }
  /* меню на вісім розділів (Микола, 08.11.2026; макет 527:2): відкритий розділ — сірий рядок, під ним його вкладки; активна вкладка — м'яка голуба */
  html.v8 .v8-nv.v8-sec.cur, html.v8 .v8-nv.v8-sec.cur:hover { background: var(--v8-panel); color: var(--ink); font-weight: 700; }
  html.v8 .v8-nv.v8-sec.cur .v8-i { color: var(--ink); }
  html.v8 .v8-subs { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px; }
  html.v8 .v8-subs[hidden] { display: none; }
  html.v8 .v8-nv.v8-sub { padding: 8px 10px 8px 38px; }
  html.v8 .v8-nv.on, html.v8 .v8-nv.on:hover { background: var(--accent-wash); color: var(--accent-strong); font-weight: 700; }
  html.v8 .v8-nv.on .v8-i { color: var(--accent-strong); }
  html.v8 .v8-pills-box { display: none; }
  html.v8 .v8-main { flex: 1; min-width: 0; max-width: none; margin: 0; padding: 8px 0 24px; gap: 16px; }
  html.v8 .v8-greet h1 { font-size: 34px; }
  html.v8 .v8-right { width: 360px; width: clamp(320px, 26vw, 400px); flex: none; box-sizing: border-box; max-width: none; margin: 0; background: #fff; border-radius: 20px; box-shadow: var(--shadow); position: -webkit-sticky; position: sticky; top: 16px; align-self: flex-start; max-height: calc(100vh - 32px); overflow-y: auto; padding: 18px 22px 24px; display: flex; flex-direction: column; gap: 16px; }
  html.v8 .v8-icons { display: flex; justify-content: flex-end; min-height: 36px; }
  html.v8 .v8-icons:not(:has(.v8-bell:not([hidden]))) { display: none; }
  html.v8 .v8-panel.no-right .v8-right { display: none; }
  /* прогноз у вузькому правому стовпчику — одна колонка (видно, коли за поточний місяць є план) */
  html.v8 .v8-right .fc { grid-template-columns: minmax(0, 1fr); }
  html.v8 .v8-right .fc-stats { grid-template-columns: minmax(0, 1fr); }
  html.v8 .v8-right .fc-stat, html.v8 .v8-right .fc-stat:first-child { border-left: 0; padding: 10px 0; border-top: 1px solid var(--line); }
  html.v8 .v8-pane .card { box-shadow: none; background: transparent; padding: 0; }
  html.v8 .nt-panel { top: 64px; right: 28px; }
}

/* ---------- компоненти: наявні екрани в токенах варіанта 8 ---------- */
html.v8 h1 { font-weight: 700; }
html.v8 h2 { font-size: 15px; font-weight: 700; }
html.v8 .hero, html.v8 .tile, html.v8 .card { border: 0; border-radius: 18px; box-shadow: var(--shadow); background: #fff; }
html.v8 .btn, html.v8 .icon-btn, html.v8 select { border: 0; border-radius: 12px; min-height: 40px; background: #fff; color: var(--ink); box-shadow: var(--shadow); }
html.v8 .btn { font-weight: 600; }
html.v8 .btn:hover, html.v8 .icon-btn:hover { background: var(--surface-2); }
html.v8 .seg { border: 0; border-radius: 12px; background: var(--v8-well); padding: 3px; gap: 2px; }
html.v8 .seg button { background: none; border: 0 !important; border-radius: 10px; min-height: 34px; color: var(--ink-2); }
html.v8 .seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(30, 42, 74, .1); }
html.v8 .tabs { padding: 0; background: none; border: 0; gap: 6px; }
html.v8 .tabs button { flex: 0 0 auto; min-height: 36px; padding: 0 14px; border: 0; border-radius: 18px; background: #fff; color: var(--ink-2); font-size: 13px; box-shadow: var(--shadow); }
html.v8 .tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; }
html.v8 .banner { border: 0; border-radius: 14px; box-shadow: var(--shadow); }
/* помилка — червоною смугою й рожевим тлом, а не білою плашкою, як звичайний текст (09.11.2026: маляр не помітив, чому рецепт не зберігся) */
html.v8 .banner.err { background: #FDEDEB; color: #7A1A12; box-shadow: inset 4px 0 0 var(--bad), var(--shadow); }
html.v8 #app .top { align-items: center; }
html.v8 .table-scroll { border-radius: 12px; }
html.v8 .att-big.out { box-shadow: var(--shadow); }
html.v8 #samplesBody, html.v8 #salesSamplesBody, html.v8 #paintBody { --sm-ink: #1E2A4A; }

/* «Прохідна»: як у макеті — без спільної білої картки навколо; картки приходу білі з тінню, кнопки — білі, «Прийшов» — корал */
html.v8 #prokhBody .att-card:first-of-type:has(.st-cards) { background: none; box-shadow: none; padding: 0; margin-top: 0; }
html.v8 #prokhBody .att-card:first-of-type:has(.st-cards) > .card-head { display: none; }
html.v8 .att-card { margin-top: 0; }
html.v8 .st-cards { gap: 12px; }
html.v8 .st-card { border: 0; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
html.v8 .att-status { font-size: 13px; font-weight: 500; color: var(--ink-2); margin: 10px 2px; }
html.v8 .att-big { border: 0; font-weight: 600; font-size: 15px; border-radius: 14px; }
html.v8 .att-big.ghost, html.v8 .att-big.out { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
html.v8 .att-mini { border: 0; border-radius: 12px; background: #fff; box-shadow: var(--shadow); font-weight: 500; font-size: 13px; }
/* значки ідей «В роботі» й «Доопрацювання»: помаранчевий текст на білому тут ледь читається (контраст 2,1) */
html.v8 .idea-chip.accepted, html.v8 .idea-chip.rework, html.v8 .idea-chip.bought { color: var(--gold); }
html.v8 .att-week li { border-top: 1px solid var(--line); }
html.v8 .st-week { background: #fff; border-radius: 18px; padding: 14px 16px 16px; box-shadow: var(--shadow); margin: 12px 0; }
html.v8 .v8-pane .st-week { background: none; padding: 0; box-shadow: none; margin: 0; }
html.v8 .v8-pane h2, html.v8 .v8-pane h3 { font-size: 15px; }
html.v8 .v8-pane .st-week .st-bars { height: 240px; }

/* дзвінок у рядку заголовка: на ПК, коли правого стовпчика немає; на телефоні він у шапці */
html.v8 .v8-greet { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
html.v8 .v8-greet h1 { min-width: 0; }
html.v8 .v8-greet .v8-bell { display: none; }
html.v8 .v8-greet.empty h1 { display: none; }
@media (max-width: 1179px) { html.v8 .v8-greet.empty { display: none; } }
@media (min-width: 1180px) {
  html.v8 .v8-panel.no-right .v8-greet .v8-bell:not([hidden]) { display: inline-flex; }
  html.v8 .v8-panel:not(.no-right) .v8-greet.empty { display: none; }
}
/* поля вводу: однаково на всіх екранах */
html.v8 input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), html.v8 textarea { box-sizing: border-box; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; padding: 9px 12px; min-height: 40px; max-width: 100%; }
html.v8 input:focus-visible, html.v8 textarea:focus-visible, html.v8 select:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
html.v8 select { padding: 0 10px; font: inherit; font-weight: 600; }

/* заголовки екранів зі своїм заголовком: той самий розмір, що в каркаса */
html.v8 .sm-title, html.v8 .sl-head h1 { font-size: 26px; font-weight: 700; line-height: 1.15; }
@media (min-width: 1180px) { html.v8 .sm-title, html.v8 .sl-head h1 { font-size: 34px; } }
/* вхід: картка на темному тлі ПК */
html.v8 .gate { border: 0; border-radius: 18px; box-shadow: var(--shadow); }

/* ---------- «Прохідна» під макет (рамки 272:2, 226:811): підпис, картки, кнопки, блакитна картка бота, дні кружечками ---------- */
html.v8 #prokhBody .att-mine { display: flex; flex-direction: column; gap: 12px; background: none; box-shadow: none; padding: 0; margin: 0; }
html.v8 .att-mine .att-status { order: -5; margin: 0; font-size: 13px; font-weight: 400; color: var(--ink-2); line-height: 1.5; }
html.v8 .att-mine .st-cards { order: -4; margin: 0; }
html.v8 .att-mine .att-main { order: -3; margin: 0; }
html.v8 .att-mine .st-bot { order: -1; display: flex; background: var(--v8-sky); box-shadow: none; gap: 4px; }
html.v8 .att-mine .st-bot b { font-size: 14px; font-weight: 700; }
html.v8 .att-mine .st-big { font-weight: 700; }
html.v8 .att-mine > .st-week { order: 5; }
html.v8 .att-mine .att-big { min-height: 52px; }
/* «Забули відмітити» — посиланням, як у макеті */
html.v8 .att-mine > .att-btns:not(.att-main) { order: -2; margin: 0; justify-content: center; }
html.v8 .att-mine > .att-btns:not(.att-main) .att-mini { background: none; box-shadow: none; min-height: 0; color: var(--ink-2); font-size: 12px; padding: 2px 4px; text-decoration: underline; text-underline-offset: 2px; }
/* заголовки всередині екранів — без великих літер */
html.v8 .att-card h3, html.v8 .st-week h3 { margin: 4px 0 0; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); }
/* дні кружечками: спізнення — жовтий кружечок */
html.v8 .att-week li:has(> .att-wd) { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 0; align-items: center; padding: 6px 0; border-top: 0; }
html.v8 .att-week .att-wd { display: inline-flex; grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 20px; background: #fff; box-shadow: var(--shadow); align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--ink); }
html.v8 .att-week li.is-late .att-wd { background: var(--warn); }
html.v8 .att-week li:has(> .att-wd) .att-d { grid-column: 2; grid-row: 1; font-size: 13px; font-weight: 700; }
html.v8 .att-week li:has(> .att-wd) .att-meta { grid-column: 2; grid-row: 2; font-size: 12px; flex-basis: auto; }
html.v8 .att-week li:has(> .att-wd) .att-chips { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
html.v8 .att-chip { border: 0; border-radius: 13px; font-weight: 600; font-size: 11px; background: var(--accent-wash); color: var(--accent-strong); }
html.v8 .att-chip.confirmed { background: #D9F5EB; color: var(--good); }
html.v8 .att-chip.pending { background: #FFE3C4; color: #9A4B00; }
html.v8 .att-chip.late { background: #FFF1B3; color: #7A5E00; }
html.v8 .att-chip.warn { background: #FBDAD3; color: #C8392A; }
@media (min-width: 1180px) {
  /* ПК: підпис і кнопки над картками; картки в один рядок; кнопки не на всю ширину */
  html.v8 #prokhBody .att-mine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  html.v8 .att-mine > * { grid-column: 1 / -1; }
  html.v8 .att-mine > .st-cards { display: contents; }
  html.v8 .att-mine .st-card { grid-column: auto; order: -2; min-height: 172px; }
  html.v8 .att-mine .st-bot { order: -2; }
  html.v8 .att-mine .att-status { order: -5; }
  html.v8 .att-mine .att-main { order: -4; display: flex; justify-content: flex-start; }
  html.v8 .att-mine .att-main .att-big { flex: 0 0 auto; min-height: 44px; padding: 0 22px; font-size: 14px; }
  html.v8 .att-mine > .att-btns:not(.att-main) { order: -1; justify-content: flex-start; }
}

/* між картками екрана — той самий проміжок; прихованого не показуємо */
html.v8 .wrap > div[id$="Body"]:not([hidden]) { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
html.v8 #prokh h3, html.v8 #pay h3, html.v8 #ideas h3 { margin: 4px 0 0; font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); }
html.v8 .att-grp { font-size: 11px; color: var(--ink-3); margin-top: 12px; }
/* «Сьогодні в цеху»: кільце, плитки, рядки з круглими номерами */
html.v8 .att-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 4px 0 8px; }
html.v8 .att-top .st-card { box-shadow: none; background: var(--surface-2); }
html.v8 .att-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
html.v8 .att-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 64px; padding: 6px; border-radius: 12px; background: var(--surface-2); font-size: 12px; color: var(--ink-2); text-align: center; }
html.v8 .att-tile b { font-size: 11px; font-weight: 600; color: var(--ink); }
html.v8 .att-tile.good span { color: var(--good); font-weight: 700; }
html.v8 .att-tile.warn span { color: #7A5E00; font-weight: 700; }
html.v8 .att-tile.bad span { color: var(--bad); font-weight: 700; }
html.v8 .att-tile.blue span { color: var(--accent-strong); font-weight: 700; }
html.v8 .att-person { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; border-top: 0; padding: 5px 0; }
html.v8 .att-no { display: inline-flex; grid-column: 1; grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 20px; background: var(--surface-2); align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--ink); align-self: start; }
html.v8 .att-person.is-late .att-no { background: var(--warn); }
html.v8 .att-person.is-away .att-no { background: var(--accent-wash); color: var(--accent-strong); }
html.v8 .att-person.absent .att-no { background: var(--v8-coral); color: #fff; }
html.v8 .att-person > .att-pname { grid-column: 2; min-height: 0; padding: 0; }
html.v8 .att-person > .att-meta { grid-column: 2; font-size: 12px; }
html.v8 .att-person > *:not(.att-no):not(.att-pname):not(.att-meta) { grid-column: 1 / -1; }
html.v8 .att-n { font-size: 13px; }
/* телефон: сірі ярлики не стискають текст */
@media (max-width: 559px) {
  html.v8 .att-week li:has(> .att-wd) { grid-template-columns: 40px minmax(0, 1fr); }
  html.v8 .att-week li:has(> .att-wd) .att-wd { grid-row: 1 / span 3; align-self: start; }
  html.v8 .att-week li:has(> .att-wd) .att-chips { grid-column: 2; grid-row: 3; flex-direction: row; flex-wrap: wrap; align-items: flex-start; margin-top: 3px; }
  html.v8 .att-pname { flex-wrap: wrap; }
}
@media (min-width: 720px) {
  html.v8 .att-top { grid-template-columns: 220px minmax(0, 1fr); align-items: stretch; }
  html.v8 .att-tiles { align-content: center; }
}

/* ---------- План-факт під макет (рамка 265:2): три картки, плитки дільниць ---------- */
html.v8 .v8-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html.v8 .v8-cards > .hero { grid-column: 1 / -1; }
html.v8 .v8-card { position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 16px; border: 0; border-radius: 18px; font: inherit; color: var(--ink); text-align: left; }
html.v8 .v8-card.peach { background: var(--v8-coral-soft); cursor: pointer; }
html.v8 .v8-card.peach b { font-size: 14px; font-weight: 700; color: var(--v8-coral-ink); line-height: 1.3; }
html.v8 .v8-card.peach.calm { background: #fff; box-shadow: var(--shadow); cursor: default; }
html.v8 .v8-card.peach.calm b { color: var(--ink); }
html.v8 .v8-attn-text { font-size: 12px; color: var(--ink-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html.v8 .v8-ptiles { display: grid; grid-template-columns: repeat(2, 40px); gap: 8px; margin-bottom: 4px; }
html.v8 .v8-ptiles i { width: 40px; height: 40px; border-radius: 12px; box-sizing: border-box; border: 1.5px dashed #F3C9C2; display: inline-flex; align-items: center; justify-content: center; font-style: normal; color: var(--v8-coral-ink); }
html.v8 .v8-ptiles i.on { background: #F3C9C2; border: 0; }
html.v8 .v8-card.peach.calm .v8-ptiles { display: none; }
html.v8 .v8-card.sky { background: var(--v8-sky); }
html.v8 .v8-card.sky:has(#heroOtif[hidden]) { display: none; }
html.v8 .v8-card.sky .hero-otif { align-items: flex-start; text-align: left; padding: 0; width: 100%; }
html.v8 .v8-card.sky .ho-num { font-size: 30px; font-weight: 700; }
/* кільце замість смуги: смугу й велику цифру ховаємо, підпис — під кільцем */
html.v8 .hero { align-items: center; text-align: center; padding: 18px 16px; }
html.v8 .hero-top { flex-direction: column; align-items: center; }
html.v8 .hero-main { align-items: center; gap: 6px; }
html.v8 .v8-hero-ring { display: block; order: -1; }
html.v8 .hero .label { font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); }
html.v8 .hero .chip { align-self: center; }
html.v8 .hero .asof { font-size: 12px; color: var(--ink-3); }
html.v8 .chip { border: 0; background: var(--surface-2); }
/* «Доплати» трьома етапами (Микола, 09.11.2026): вибраний етап — блакитний, як вибране в інших картках */
html.v8 .dlv-stage { background: var(--v8-panel); }
html.v8 .dlv-stage:hover { background: var(--v8-well); }
html.v8 .dlv-stage[aria-pressed="true"] { background: var(--v8-sky); box-shadow: none; }
html.v8 .dlv-stage.dlv-wt { background: #F4F5F7; box-shadow: none; border: 1px dashed #C5CFDB; }
html.v8 .dlv-stage.dlv-wt[aria-pressed="true"] { background: #FFF4E5; border-color: #F2C27A; }
html.v8 .dlv-ol { background: #F6F8FB; }
/* плитки дільниць */
html.v8 #secCard { background: none; box-shadow: none; padding: 0; }
html.v8 #secCard .card-head { margin-bottom: 8px; }
html.v8 .sec-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; column-gap: 10px; }
html.v8 .sec-group, html.v8 .sec-rows { display: contents; }
html.v8 .sec-ghead { grid-column: 1 / -1; padding: 2px 2px 0; }
html.v8 .sec-gname { font-size: 11px; color: var(--ink-3); }
html.v8 .sec-gmeta { font-size: 12px; }
html.v8 .sec-row { background: #fff; border: 0 !important; border-radius: 14px; box-shadow: var(--shadow); min-width: 0; }
html.v8 .sec-row:has(.sec-btn[aria-expanded="true"]) { grid-column: 1 / -1; }
html.v8 .sec-btn { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name pct" "val val" "bar bar" "meta meta"; gap: 3px 6px; padding: 10px 12px; border-radius: 14px; }
html.v8 .sec-name { font-size: 13px; }
html.v8 .sec-val { font-size: 12px; }
html.v8 .sec-val b { font-size: 18px; font-weight: 700; }
html.v8 .sec-pct { font-size: 12px; font-weight: 700; }
html.v8 .sec-meta { font-size: 11px; line-height: 1.3; }
html.v8 .sec-orders { padding: 0 12px 6px; }
@media (min-width: 720px) {
  html.v8 .v8-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  html.v8 .v8-cards > .hero { grid-column: auto; }
}

/* дрібниці План-факту */
html.v8 .hero .chip { font-size: 12px; padding: 3px 10px 3px 4px; white-space: nowrap; }
/* ---------- Зарплата під макет (рамки 274:2, 226:990): кільце, персикова сума, місяці, рядки ---------- */
html.v8 .pay-card { margin-top: 0; }
html.v8 .pay-balance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; background: none; box-shadow: none; padding: 0; }
html.v8 .pay-balance > * { grid-column: 1 / -1; margin: 0; min-width: 0; }
html.v8 .pay-balance > .card-head { margin: 0; flex-wrap: wrap; }
html.v8 .pay-balance > .pay-stat { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: 16px; }
html.v8 .pay-balance > .pay-peach { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; justify-content: center; gap: 4px; background: var(--v8-coral-soft); border-radius: 18px; padding: 16px; }
html.v8 .pay-peach .label { font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--v8-coral-ink); }
html.v8 .pay-peach .bal-money { font-weight: 700; color: var(--v8-coral-ink); }
html.v8 .bal-acorns { font-size: 13px; font-weight: 600; color: var(--ink-2); }
html.v8 .bal-status { font-size: 12px; color: var(--ink-2); margin: 0; }
html.v8 .bal-full { font-size: 12px; margin: 0; }
html.v8 .pay-sum { font-weight: 700; font-size: 14px; }
html.v8 .pay-facts { font-size: 13px; }
html.v8 .pay-break { background: var(--surface-2); }
html.v8 .v8-pane .pay-break { background: #fff; box-shadow: var(--shadow); border-radius: 14px; }
html.v8 .pay-table { font-size: 13px; }
html.v8 .pay-table th { font-size: 13px; }
/* рядки власника: круглі номери, як у макеті */
html.v8 .pay-row { border-top: 0; }
html.v8 .pay-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 0; padding: 6px 0; text-align: left; }
html.v8 .pay-head .att-no { grid-row: 1; }
html.v8 .pay-head[disabled] { grid-template-columns: minmax(0, 1fr) auto; }
html.v8 .pay-name .att-meta { font-size: 12px; }

/* дрібниці Зарплати на телефоні: сума не переноситься */
@media (max-width: 559px) { html.v8 .pay-peach .bal-money { font-size: 26px; } }
/* дошка менеджерки: на ПК без правого стовпчика чотири колонки вміщаються */
html.v8 .sm-pill.blue { background: var(--accent-wash); color: var(--accent-strong); }
html.v8 .sm-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- План дня під макет (рамка 266:2): кільце, персикова, блакитна, плитки дільниць ---------- */
html.v8 .pl-top { display: flex; flex-direction: column; gap: 12px; }
html.v8 .pl-top .st-card { border: 0; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
html.v8 .pl-top .v8-card.sky b { font-size: 14px; font-weight: 700; line-height: 1.3; }
html.v8 .pl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
html.v8 .pl-tiles .att-tile { background: #fff; box-shadow: var(--shadow); }
html.v8 .pl-tiles .att-tile.bad span { color: var(--bad); font-weight: 700; }
html.v8 .pl-switch { margin: 0; }
html.v8 .pl-switch[hidden] { display: none; }                  /* .pl-switch має display: flex — без цього атрибут hidden не діяв (дошка зразків з «Логістики») */
html.v8 .pl-plan .pl-line { font-size: 13px; }
html.v8 .pl-st-btn { padding-top: 8px; }
html.v8 .pl-switch { margin-bottom: 12px; }

/* ---------- Зарплата: блакитна картка минулого місяця, жолуді, верх власника ---------- */
html.v8 .v8-cards .st-card { border: 0; border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
html.v8 .pay-top { display: flex; flex-direction: column; gap: 12px; }
html.v8 .pay-top .v8-card b { font-size: 18px; font-weight: 700; line-height: 1.25; }
html.v8 .pay-balance > .pay-sky { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--v8-sky); border-radius: 18px; padding: 16px; font-size: 12px; color: var(--ink-2); }
html.v8 .pay-balance > .pay-sky[hidden] { display: none; }
html.v8 .pay-sky b { font-size: 14px; font-weight: 700; color: var(--ink); }
html.v8 .pay-sky-pill { margin-top: auto; padding: 3px 10px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; }
html.v8 .pay-acorn-box { display: block; }
html.v8 .pay-acorn-box[hidden] { display: none; }
html.v8 .pay-acorn-box .btn { margin-top: 10px; }
@media (min-width: 720px) {
  html.v8 .pay-balance { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.v8 .pay-balance > .pay-sky { grid-column: 3; grid-row: 2; }
}
/* ---------- Дашборд «Продажів»: кільце замість смуги, асортимент праворуч ---------- */
html.v8 .sl-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-content: start; }
html.v8 .sl-hero > * { grid-column: 2; }
html.v8 .sl-hero > .sl-ring { grid-column: 1; grid-row: 1 / span 6; align-self: center; }
html.v8 .sl-big { font-weight: 700; }
html.v8 .sl-val { font-weight: 700; }
html.v8 .sl-tile .label { letter-spacing: 0; text-transform: none; }
html.v8 .v8-pane .sl-cols { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
html.v8 .v8-pane .sl-sec-title { margin-bottom: 8px; font-size: 15px; }
html.v8 .v8-pane .sl-mix { display: block; }
@media (max-width: 559px) {
  html.v8 .sl-hero { grid-template-columns: minmax(0, 1fr); text-align: center; }
  html.v8 .sl-hero > * { grid-column: 1; }
  html.v8 .sl-hero > .sl-ring { grid-row: auto; justify-self: center; }
}
html.v8 .pay-top .v8-card.sky b { font-size: 14px; }
html.v8 .v8-pane table { width: 100%; }

/* ---------- Кнопки (Микола, 06.11.2026: варіант 1 «синя дія, корал лише тривога»; правила — docs/plans/dyzain-vprovadzhennya.md, макет — секція 10 робочої копії у Figma) ----------
   Головна дія — голуба заливка. Повторювана на картці — м'який голубий. Третій рівень — біла з тінню. Посилання — голубий текст.
   Небезпечна — червоний контур і підтвердження. Корал — ніколи не кнопка, лише стани й позначки; зелений — лише стан «зроблено».
   Загальне правило html.v8 .btn робить тло білим, а стани з app.css слабші за нього, тож колір кнопок задано тут. */
html.v8 .btn.st-primary, html.v8 .att-big.in, html.v8 .att-big.return, html.v8 .att-big.leave, html.v8 .att-mini.good { background: var(--accent-strong); color: #fff; }
html.v8 .btn.st-primary:hover, html.v8 .att-big.in:hover, html.v8 .att-big.return:hover, html.v8 .att-big.leave:hover, html.v8 .att-mini.good:hover { background: var(--v8-act-hover); }
html.v8 .sm-btn { background: var(--accent-strong); color: #fff; }
html.v8 .sm-btn.sm { background: var(--accent-wash); color: var(--accent-strong); }
html.v8 .sm-btn.ok { background: var(--accent-strong); color: #fff; }
html.v8 .sm-btn.ghost { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
html.v8 .sm-btn.link { background: none; color: var(--accent-strong); text-decoration: none; }
html.v8 .sm-btn:not([disabled]):hover, html.v8 .sm-btn.ok:not([disabled]):hover { background: var(--v8-act-hover); }
html.v8 .sm-btn.sm:not([disabled]):hover { background: var(--v8-act-soft-hover); }
html.v8 .sm-btn.ghost:not([disabled]):hover { background: var(--surface-2); }
html.v8 .sm-btn.link:not([disabled]):hover { background: none; text-decoration: underline; }
html.v8 .sl-copy { background: var(--accent-wash); color: var(--accent-strong) !important; }
html.v8 .sl-copy:hover { background: var(--v8-act-soft-hover); }
html.v8 .sl-copy.is-done, html.v8 .sl-copy.is-done:hover { background: var(--good); color: #fff !important; }
html.v8 .link-btn { color: var(--accent-strong); }
html.v8 .btn.danger, html.v8 .att-big.bad, html.v8 .att-mini.bad, html.v8 .link-btn.st-danger { background: #fff; color: var(--v8-danger); box-shadow: inset 0 0 0 1.5px var(--v8-danger); }
html.v8 .btn.danger:hover, html.v8 .att-big.bad:hover, html.v8 .att-mini.bad:hover, html.v8 .link-btn.st-danger:hover { background: var(--v8-danger-soft); }
html.v8 .link-btn.st-danger { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 600; }
/* натиснута кнопка-перемикач темна, якого б рівня вона не була */
html.v8 .att-mini[aria-pressed="true"] { background: var(--ink); color: var(--surface); box-shadow: none; }
html.v8 .att-mini[aria-pressed="true"]:hover { background: var(--ink); }

/* ---------- «Аналіз 2026» у «Продажах» (public/salesreport.js): компоненти варіанта 8, рамка 267:2 робочої копії ---------- */
html.v8 #salesReportBody { gap: 20px; color: var(--ink); font-size: 13px; line-height: 1.5; }
html.v8 .sr-head h1 { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.12; letter-spacing: -.01em; }
html.v8 .sr-lede { margin: 12px 0 0; max-width: 760px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
html.v8 .sr-jumps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
html.v8 .sr-jump { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 0; border-radius: 15px; background: #fff; box-shadow: var(--shadow); font: inherit; font-size: 12px; font-weight: 500; color: var(--ink-2); text-decoration: none; cursor: pointer; }
html.v8 .sr-jump:hover { color: var(--ink); }
html.v8 .sr-jump:focus-visible, html.v8 .sr-open:focus-visible, html.v8 .sr-col:focus-visible, html.v8 .sr-dark:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
html.v8 .sr-sec { display: flex; flex-direction: column; gap: 12px; min-width: 0; scroll-margin-top: 16px; }
html.v8 .sr-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
html.v8 .sr-h h2 { margin: 0; font-size: 15px; font-weight: 700; line-height: 21px; }
html.v8 .sr-h > span { font-size: 11px; line-height: 15px; color: var(--ink-3); }
html.v8 .sr-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; min-width: 0; }
html.v8 .sr-note { margin: 0; font-size: 11px; line-height: 15px; color: var(--ink-2); }
html.v8 .sr-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; min-width: 0; }

html.v8 .sr-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
html.v8 .sr-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; min-width: 0; }
html.v8 .sr-kpi-l { font-size: 12px; color: var(--ink-2); }
html.v8 .sr-kpi-v { font-size: 24px; font-size: clamp(22px, 2.6vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; }
html.v8 .sr-kpi-s { font-size: 11px; line-height: 15px; color: var(--ink-3); }

html.v8 .sr-top3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html.v8 .sr-ring { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px; text-align: center; min-width: 0; }
html.v8 .sr-ring b { font-size: 13px; font-weight: 700; line-height: 17px; }
html.v8 .sr-ring > span:last-child { font-size: 11px; line-height: 15px; color: var(--ink-3); }
html.v8 .sr-peach, html.v8 .sr-sky { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 18px; min-width: 0; }
html.v8 .sr-peach { background: var(--v8-coral-soft); }
html.v8 .sr-peach > b { padding-top: 6px; font-size: 13px; font-weight: 700; line-height: 17px; color: var(--v8-coral-ink); }
html.v8 .sr-peach > span { font-size: 11px; line-height: 15px; color: var(--ink-2); }
html.v8 .sr-tiles { display: grid; grid-template-columns: repeat(2, 44px); gap: 8px; }
html.v8 .sr-tiles i { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #F3C9C2; color: var(--v8-coral-ink); box-sizing: border-box; }
html.v8 .sr-tiles i.empty { background: none; border: 1px dashed #F3C9C2; }
html.v8 .sr-open { position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; padding: 4px; border: 0; background: none; color: var(--ink-2); cursor: pointer; box-sizing: border-box; display: flex; }
html.v8 .sr-sky { background: var(--v8-sky); }
html.v8 .sr-sky > b { font-size: 13px; font-weight: 700; line-height: 17px; }
html.v8 .sr-sky-list { display: flex; flex-direction: column; gap: 4px; font-size: 11px; line-height: 15px; color: var(--ink-2); }
html.v8 .sr-dark { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; box-sizing: border-box; border-radius: 13px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 600; line-height: 15px; text-decoration: none; }

/* смужки «За типами» */
html.v8 .sr-ms { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
html.v8 .sr-ms.tight { gap: 9px; }
html.v8 .sr-m { min-width: 0; }
html.v8 .sr-m-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; line-height: 17px; }
html.v8 .sr-m-n { min-width: 0; color: var(--ink-2); }
html.v8 .sr-m-v { flex: none; color: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
html.v8 .sr-m-v b { color: var(--ink); font-size: 12px; font-weight: 700; }
html.v8 .sr-m-tr { height: 8px; margin-top: 6px; border-radius: 4px; background: var(--track); overflow: hidden; }
html.v8 .sr-m-fl { display: block; height: 8px; border-radius: 4px; background: var(--accent); }
html.v8 .sr-m-fl.coral { background: var(--v8-coral); }
html.v8 .sr-m-fl.green { background: var(--good); }
html.v8 .sr-m-fl.amber { background: var(--alert); }
html.v8 .sr-m-fl.soft, html.v8 .sr-mini i.soft { background: #AEBBCC; }
html.v8 .sr-m-s { margin-top: 4px; font-size: 11px; line-height: 15px; color: var(--ink-3); }
html.v8 .sr-fillgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 10px 20px; }

/* стовпчики в доріжках */
html.v8 .sr-plot { position: relative; display: flex; height: 190px; margin: 8px 0 0 18px; }
html.v8 .sr-y { position: absolute; left: -18px; width: 12px; text-align: right; font-size: 9px; line-height: 10px; color: var(--ink-3); transform: translateY(50%); }
html.v8 .sr-col { flex: 1 1 0; display: flex; justify-content: center; height: 100%; min-width: 0; border-radius: 7px; cursor: default; outline: 0; touch-action: pan-y; }
html.v8 .sr-track { position: relative; display: block; width: 14px; height: 100%; border-radius: 7px; background: var(--track); }
html.v8 .sr-fill { position: absolute; left: 0; right: 0; bottom: 0; display: block; border-radius: 7px; background: var(--accent); }
html.v8 .sr-fill.live { opacity: .5; }
html.v8 .sr-col:hover .sr-fill, html.v8 .sr-col:focus-visible .sr-fill { background: var(--accent-strong); }
html.v8 .sr-top { position: absolute; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; line-height: 12px; white-space: nowrap; color: var(--ink); }
html.v8 .sr-x { display: flex; margin: 6px 0 0 18px; }
html.v8 .sr-x span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 10px; line-height: 12px; color: var(--ink-3); }

/* лінії: одна шкала у відсотках */
html.v8 .sr-chart { min-height: 220px; }
html.v8 .sr-chart svg { display: block; }
html.v8 .sr-chart text { font-family: var(--font); font-size: 10px; }
html.v8 .sr-grid { stroke: var(--line); stroke-width: 1; }
html.v8 .sr-ax { fill: var(--ink-3); }
html.v8 .sr-end { fill: var(--ink); font-weight: 700; font-size: 11px !important; }
html.v8 .sr-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
html.v8 .sr-line.coral { stroke: var(--v8-coral); }
html.v8 .sr-line.blue { stroke: var(--accent); }
html.v8 .sr-pt { stroke: #fff; stroke-width: 2; }
html.v8 .sr-pt.coral { fill: var(--v8-coral); }
html.v8 .sr-pt.blue { fill: var(--accent); }
html.v8 .sr-rule { stroke: var(--axis); stroke-width: 1; }
html.v8 .sr-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; line-height: 15px; color: var(--ink-2); }
html.v8 .sr-legend span { display: inline-flex; align-items: center; gap: 6px; }
html.v8 .sr-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 4px; background: var(--accent); }
html.v8 .sr-dot.coral { background: var(--v8-coral); }
html.v8 .sr-dot.yellow { background: var(--warn); }
html.v8 .tip .sr-dot { align-self: center; }
html.v8 #salesReportBody .tip, html.v8 #v8Pane-sreport .tip { border: 0; border-radius: 12px; box-shadow: 0 8px 24px rgba(30, 42, 74, .16); font-size: 12px; z-index: 3; }

/* список із круглими номерами */
html.v8 .sr-list { display: flex; flex-direction: column; gap: 14px; }
html.v8 .sr-list.tight { gap: 10px; }
html.v8 .sr-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: start; }
html.v8 .sr-num { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 20px; background: #fff; box-shadow: var(--shadow); font-size: 12px; font-weight: 700; color: var(--ink); }
html.v8 .sr-num.coral { background: var(--v8-coral); color: #fff; }
html.v8 .sr-row-t { min-width: 0; }
html.v8 .sr-row-t > b { display: block; font-size: 13px; font-weight: 700; line-height: 16px; }
html.v8 .sr-row-t p { margin: 3px 0 0; max-width: 720px; font-size: 12px; line-height: 17px; color: var(--ink-2); }
html.v8 .sr-row-t p.sr-idea { color: var(--ink-3); }
html.v8 .sr-list:not(.tight) .sr-row-t p.sr-idea { color: var(--ink); }
html.v8 .sr-row-p { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
html.v8 .sr-row-p .sm-pill { box-shadow: none; }
html.v8 .sr-row-p .sm-pill:not(.blue):not(.red):not(.yellow) { background: #fff; color: var(--ink); box-shadow: var(--shadow); }

/* таблиці */
html.v8 .sr-table th { padding: 0 10px 8px 0; border-bottom: 0; font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
html.v8 .sr-table td { padding: 9px 10px 9px 0; border-top: 1px solid var(--line); border-bottom: 0; font-size: 13px; vertical-align: middle; }
html.v8 .sr-table th:last-child, html.v8 .sr-table td:last-child { padding-right: 0; }
html.v8 .sr-table b { font-weight: 700; }
html.v8 .sr-table .sm-pill { height: 22px; font-size: 12px; }
html.v8 .sr-table tr.sr-nd td, html.v8 .sr-table tr.sr-nd b { color: var(--ink-2); font-weight: 500; }
html.v8 .sr-minor { display: none; margin-top: 1px; font-size: 11px; line-height: 15px; color: var(--ink-3); font-weight: 400; }
html.v8 .sr-share { min-width: 72px; }
html.v8 .sr-mini { display: block; height: 4px; margin-top: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
html.v8 .sr-mini i { display: block; height: 4px; border-radius: 2px; background: var(--accent); }
html.v8 .sr-heat { display: grid; gap: 4px; align-items: center; min-width: 0; }
html.v8 .sr-heat-h { padding-bottom: 2px; font-size: 11px; line-height: 13px; text-align: center; color: var(--ink-3); }
html.v8 .sr-heat-h.first { visibility: hidden; }
html.v8 .sr-heat-n { padding-right: 8px; font-size: 12px; line-height: 15px; color: var(--ink-2); }
html.v8 .sr-heat-n i { display: block; font-style: normal; font-size: 10px; line-height: 13px; color: var(--ink-3); }
html.v8 .sr-heat-c { display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
html.v8 .sr-heat-c.dark { color: #fff; }
html.v8 .sr-heat-c.none { background: var(--surface-2); color: var(--ink-3); font-weight: 400; }

/* блоки з текстом */
html.v8 .sr-chk { gap: 8px; }
html.v8 .sr-chk-h { display: flex; align-items: center; gap: 8px; }
html.v8 .sr-chk-h h3, html.v8 .sr-grp h3 { margin: 0; font-size: 13px; font-weight: 700; line-height: 17px; }
html.v8 .sr-ul { margin: 0; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 17px; color: var(--ink-2); }
html.v8 .sr-grp { display: flex; flex-direction: column; gap: 6px; }
html.v8 .sr-kv { display: flex; flex-direction: column; gap: 8px; }
html.v8 .sr-kv b { display: block; font-size: 12px; font-weight: 700; line-height: 17px; }
html.v8 .sr-kv span { display: block; font-size: 12px; line-height: 17px; color: var(--ink-2); }
html.v8 .sr-chips { display: flex; flex-wrap: wrap; gap: 4px; }
html.v8 .sr-chips span { padding: 2px 8px; border-radius: 10px; background: var(--surface-2); font-size: 11px; line-height: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
html.v8 .sr-tagsum { display: flex; flex-wrap: wrap; gap: 6px; }

html.v8 #v8Pane-sreport { gap: 22px; }
@media (min-width: 1180px) and (max-width: 1360px) {
  html.v8 .sr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  html.v8 .sr-head h1 { font-size: 34px; }
}
@media (max-width: 760px) {
  html.v8 .sr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.v8 .sr-kpi-v { font-size: 22px; }
  html.v8 .sr-top3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html.v8 .sr-sky { grid-column: 1 / -1; }
  html.v8 .sr-dark { margin-top: 4px; }
}
@media (max-width: 560px) {
  html.v8 .sr-row { grid-template-columns: 40px minmax(0, 1fr); }
  html.v8 .sr-row-p { grid-column: 2; justify-content: flex-start; }
  html.v8 .sr-minor { display: block; }
  html.v8 .sr-heat { grid-template-columns: repeat(var(--sr-n, 4), minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  html.v8 .sr-heat-h.first { display: none; }
  html.v8 .sr-heat-h { font-size: 9px; line-height: 11px; }
  html.v8 .sr-list.tight { gap: 16px; }
  html.v8 .sr-heat-n { grid-column: 1 / -1; padding: 6px 0 0; }
}

/* ---------- «Зразки»: поле пошуку без власної рамки — рамка в обгортки (public/samples.js, searchBox) ---------- */
html.v8 .sm-srch input.sm-search:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
html.v8 .sm-srch input.sm-search:focus-visible { outline: 0; }
html.v8 .sm-srch:focus-within { box-shadow: 0 0 0 2px var(--accent); }

/* «Домовик»: текст дня над відмітками в «Прохідній» (public/prokhidna.js, src/inspire/service.js) */
html.v8 .dom-card { position: relative; display: flex; flex-direction: column; gap: 8px; background: var(--v8-sky); box-shadow: none; }
html.v8 .dom-who { padding-right: 32px; font-size: 14px; font-weight: 700; color: var(--accent-strong); }
html.v8 .dom-text { margin: 0; font-size: 16px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
html.v8 .dom-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
html.v8 .dom-btns .dom-stop { min-height: 40px; margin-left: auto; padding: 0; font-size: 13px; font-weight: 400; color: var(--ink-2); }
html.v8 .dom-toast { margin: 0; }
/* «Домовик» власнику: щоранку при першому відкритті — поверх будь-якої вкладки; на телефоні знизу, на ПК посередині */
html.v8 .dom-sheet { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
html.v8 .dom-sheet-dim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(30, 42, 74, .45); }
html.v8 .dom-sheet .dom-sheet-card { position: relative; width: 100%; max-width: 520px; margin: 0; box-shadow: 0 24px 60px rgba(30, 42, 74, .28); }
@media (min-width: 768px) { html.v8 .dom-sheet { align-items: center; } }
/* реакція (public/prokhidna.js, domVanish): обрана кнопка коротко підстрибує, далі картка тане й згортається; у власника — тане вся шторка.
   Без анімації на телефоні з вимкненим рухом — картка просто зникає */
html.v8 .dom-card { transition: opacity .25s ease, transform .25s ease, height .3s ease .15s, padding .3s ease .15s, margin .3s ease .15s; }
html.v8 .dom-card.dom-busy { pointer-events: none; }
html.v8 .dom-card.dom-gone { height: 0 !important; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; opacity: 0; transform: scale(.97); overflow: hidden; }
html.v8 .dom-btns .dom-picked { animation: dom-pop .35s ease-out; }
html.v8 .dom-sheet { transition: opacity .3s ease .1s; }
html.v8 .dom-sheet.dom-gone { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { html.v8 .dom-card, html.v8 .dom-sheet { transition: none; } html.v8 .dom-btns .dom-picked { animation: none; } }

/* перепис старих зразків (docs/plans/zrazky-perepys.md) */
html.v8 .sm-old { display: inline-flex; align-items: center; align-self: flex-start; flex: none; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--warn, #F2C400); color: #000; }
html.v8 .sm-bc-id { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
html.v8 .sm-cs-st { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
html.v8 .sm-cs-st > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; background: var(--well, #E4E8EE); }
html.v8 .sm-cs-st b { font-size: 20px; line-height: 1.1; color: var(--ink); }
html.v8 .sm-cs-last { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #FFF1B3; }
html.v8 .sm-cs-last .sm-cap { color: #7A5E00; }
html.v8 .sm-cs-no { font-size: 24px; line-height: 1.15; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
html.v8 .sm-cs .sm-srch { margin-left: 0; flex: none; width: 100%; height: 36px; border-radius: 18px; }
html.v8 .sm-cs-list { display: flex; flex-direction: column; gap: 6px; }
html.v8 .sm-cs-h { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; font-size: 15px; font-weight: 700; color: var(--ink); }
html.v8 .sm-cs-row { width: 100%; box-sizing: border-box; }
html.v8 .sm-cs-row.ro { cursor: default; }
html.v8 .sm-cs-w.open > .sm-cs-row { background: var(--sm-soft, #DCEBFC); border-color: var(--sm-soft-ink, #1B6FD6); }
html.v8 .sm-cs-chat { font-size: 12px; font-weight: 600; color: var(--accent-strong, #1B6FD6); }
html.v8 .sm-cs-form { display: flex; flex-direction: column; gap: 8px; padding: 10px 2px 14px; }

/* ---------- «Відправка зразків» (public/ship.js, src/ship/; Микола, 08.11.2026; макети — Figma, секція 2ж робочої копії): заявка менеджерки з трьох кроків,
   черга логіста, «Викраски сьогодні» маляра (public/paint.js). Кнопки — варіант 1 (дія на картці м'яка, головна — заливка, небезпечна — червоний контур), дошка — .sm-kan і .sm-col ---------- */
html.v8 .sh-modes { display: flex; flex-wrap: wrap; gap: 6px; }
html.v8 .sh-lead { margin-top: -8px; }
html.v8 .sh-okmsg { display: flex; align-items: flex-start; gap: 8px; padding: 10px 8px 10px 14px; border-radius: 14px; background: #D9F5EB; color: #0A6B4A; font-size: 13px; line-height: 1.45; }
html.v8 .sh-okmsg > span { flex: 1; min-width: 0; padding-top: 1px; overflow-wrap: anywhere; }
html.v8 .sh-okmsg .sm-iconbtn { width: 24px; height: 24px; color: #0A6B4A; }
/* кружечок тону: фото зразка, під ним — колір із бібліотеки */
html.v8 .sh-sw { position: relative; display: inline-flex; flex: none; box-sizing: border-box; border-radius: 50%; overflow: hidden; background: #E4E8EE; border: 1px solid rgba(30, 42, 74, .18); vertical-align: middle; }
html.v8 .sh-sw img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.v8 .sh-sw.xs { width: 14px; height: 14px; }
html.v8 .sh-sw.md { width: 28px; height: 28px; }
html.v8 .sh-sw.lg { width: 40px; height: 40px; }
html.v8 .sh-its { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
html.v8 .sh-it { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
html.v8 .sh-mk { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex: none; color: var(--ink-3); }
html.v8 .sm-pill.sh-grey { background: #E4E7EB; color: #5F6B7A; }
html.v8 .sm-btn.sh-danger { background: #fff; color: var(--v8-danger); box-shadow: inset 0 0 0 1.5px var(--v8-danger); }
html.v8 .sm-btn.sh-danger:not([disabled]):hover { background: var(--v8-danger-soft); }
html.v8 .sh-sub { font-size: 12px; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
html.v8 .sh-sub.warn { color: #9A4B00; font-weight: 600; }
/* верх: сьогодні поїде · у дорозі */
html.v8 .sh-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html.v8 .sh-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; box-sizing: border-box; padding: 16px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); color: var(--ink); }
html.v8 .sh-card.sky { background: var(--v8-sky); box-shadow: none; }
html.v8 .sh-card-t { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
html.v8 .sh-big { font-size: 30px; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; }
html.v8 .sh-big small { margin-left: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
/* логіст: можна збирати · чекає · на завтра · поїхало сьогодні */
html.v8 .sh-hint { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--ink-3); }
html.v8 .sh-pc, html.v8 .sh-mc { display: flex; flex-direction: column; gap: 6px; min-width: 0; box-sizing: border-box; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); color: var(--ink); }
html.v8 .sh-pc.dim { opacity: .62; }
html.v8 .sh-pc.act { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
html.v8 .sh-pc-top { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 28px; }
html.v8 .sh-pc-top .sh-no { flex: none; }
html.v8 .sh-pc-top .sm-pill { flex: 0 1 auto; min-width: 0; height: auto; min-height: 20px; padding-block: 2px; white-space: normal; line-height: 1.2; text-align: center; }
html.v8 .sh-pc-top .sm-pill, html.v8 .sh-pc-top .sh-more { margin-left: auto; }
html.v8 .sh-pc-top .sm-pill + .sh-more { margin-left: 0; }
html.v8 .sh-no { font-size: 15px; font-weight: 700; letter-spacing: .01em; }
html.v8 .sh-to { font-size: 13px; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
html.v8 .sh-to b { font-weight: 700; color: var(--ink); }
html.v8 .sh-note { font-size: 12px; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
html.v8 .sh-ttn { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; font-weight: 600; color: var(--ink); white-space: nowrap; }
html.v8 .sh-cks { display: flex; flex-direction: column; gap: 2px; margin: 2px 0; }
html.v8 .sh-ck { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 2px 0; font-size: 13px; cursor: pointer; }
html.v8 .sh-ck input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--accent-strong); cursor: pointer; }
html.v8 .sh-ck.off, html.v8 .sh-ck.off input { cursor: default; }
html.v8 .sh-ck-t { flex: 1; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
html.v8 .sh-ck-m { flex: none; max-width: 48%; text-align: right; font-size: 11.5px; line-height: 1.3; color: var(--ink-2); }
html.v8 .sh-ck.wait .sh-ck-t { color: var(--ink-2); }
html.v8 .sh-ck.wait .sh-ck-m { color: #7A5E00; font-weight: 600; }
html.v8 .sh-acts { margin-top: 4px; }
html.v8 .sh-step { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 10px; border-radius: 12px; background: var(--surface-2); }
/* список заявок: на ПК таблиця, далі картки */
html.v8 .sh-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
html.v8 .sh-h { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 6px 0 0; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; }
html.v8 .sh-tbl { display: flex; flex-direction: column; min-width: 0; border-radius: 18px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
html.v8 .sh-tr { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1.25fr) 18px; gap: 14px; align-items: center; padding: 12px 18px; border-top: 1px solid rgba(30, 42, 74, .08); cursor: pointer; }
html.v8 .sh-tr.th { border-top: 0; padding-top: 12px; padding-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); cursor: default; }
html.v8 .sh-tr:not(.th):hover { background: #F7F9FB; }
html.v8 .sh-tr.sel, html.v8 .sh-tr.sel:hover { background: #EEF5FE; }
html.v8 .sh-tr.gone .sh-td { opacity: .6; }
html.v8 .sh-td { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
html.v8 .sh-td.sh-its { flex-direction: row; }
html.v8 .sh-open { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); text-align: left; cursor: pointer; }
html.v8 .sh-chev { display: inline-flex; color: var(--ink-3); }
html.v8 .sh-chev.up { transform: rotate(180deg); }
html.v8 .sh-det-row { padding: 0 18px 16px; background: #EEF5FE; }
html.v8 .sh-det { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
html.v8 .sh-det-row .sh-det { padding: 14px 16px; border-radius: 14px; background: #fff; }
html.v8 .sh-det-its { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
html.v8 .sh-det-i { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2px 12px; }
html.v8 .sh-kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; font-size: 12.5px; line-height: 1.45; }
html.v8 .sh-k { color: var(--ink-3); }
html.v8 .sh-v { min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
html.v8 .sh-v .sm-copy { display: inline-flex; vertical-align: middle; margin-left: 2px; }
html.v8 .sh-mcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 10px; }
html.v8 .sh-mc.open { grid-column: 1 / -1; }
html.v8 .sh-mc.gone { opacity: .65; }
html.v8 .sh-mc-who { font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
html.v8 .sh-next { font-size: 12px; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
html.v8 .sh-mc .sh-det { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
/* пошук і порядок — праворуч від чипів (Микола, 10.11.2026: кнопка сортування, типово нові зверху); кнопка — третього рівня: біла з тінню */
html.v8 .sh-flr { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 1 auto; min-width: 0; }
html.v8 .sh-flr .sm-srch { margin-left: 0; width: 260px; }
/* галочки «у пакеті» в рядку таблиці: позначка («з шафи», «маляр · 13:10») поруч, а не на краю широкого рядка */
html.v8 .sh-det-row .sh-ck { max-width: 560px; }
html.v8 .sh-sort { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; box-sizing: border-box; padding: 0 12px; border: 0; border-radius: 16px; background: #fff; box-shadow: var(--shadow); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
html.v8 .sh-sort:hover { color: var(--ink); }
/* дошка менеджерки: у вузькому стовпчику підпис над значенням */
html.v8 .sh-sboard .sh-kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
/* форма «Відправити зразки»: на ПК — праворуч «що поїде» і «що буде далі» */
html.v8 .sh-two { display: block; min-width: 0; }
html.v8 .sh-side { display: none; }
html.v8 .sh-form { gap: 12px; padding: 20px; }
html.v8 .sh-form h2 { font-size: 20px; }
html.v8 .sh-step-h { margin-top: 10px; }
html.v8 .sh-lbl { margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
html.v8 .sh-seg { display: flex; }
html.v8 .sh-seg button { flex: 1 1 0; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
html.v8 .sh-opt { display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box; padding: 11px 12px; border: 0; border-radius: 12px; background: var(--v8-well); font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
html.v8 .sh-opt.on { background: var(--accent-wash); }
html.v8 .sh-box { width: 20px; height: 20px; box-sizing: border-box; flex: none; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; border: 2px solid var(--ink-3); border-radius: 6px; background: #fff; color: #fff; }
html.v8 .sh-opt.on .sh-box { background: var(--accent-strong); border-color: var(--accent-strong); }
html.v8 .sh-opt-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.v8 .sh-opt-t b { font-size: 14px; font-weight: 600; }
html.v8 .sh-tones { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
html.v8 .sh-tn { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 90px; box-sizing: border-box; padding: 10px 4px 8px; border: 2px solid transparent; border-radius: 12px; background: var(--v8-well); font: inherit; font-size: 12px; line-height: 1.2; color: var(--ink-2); text-align: center; cursor: pointer; overflow-wrap: anywhere; }
html.v8 .sh-tn.on { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-strong); font-weight: 700; }
html.v8 .sh-tn-l { display: block; max-width: 100%; overflow-wrap: anywhere; }
html.v8 .sh-tn.more { justify-content: center; color: var(--accent-strong); font-weight: 600; }
html.v8 .sh-fabs { display: flex; flex-direction: column; gap: 6px; }
html.v8 .sm-srch.sh-srch { margin-left: 0; flex: none; width: 100%; height: 40px; border-radius: 12px; background: var(--v8-well); box-shadow: none; }
html.v8 .sh-fh { display: flex; flex-direction: column; gap: 6px; }
html.v8 .sh-fh:empty { display: none; }
html.v8 .sh-fh .sm-opt { width: 100%; box-sizing: border-box; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
html.v8 .sh-fab { display: flex; align-items: center; gap: 8px; padding: 5px 4px 5px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
html.v8 .sh-fab b { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
html.v8 .sm-chip.sh-bring { display: inline-flex; align-items: center; gap: 4px; height: 28px; background: var(--v8-well); color: var(--ink-2); }
html.v8 .sm-chip.sh-bring.on { background: var(--accent-wash); color: var(--accent-strong); }
html.v8 .sh-ta { height: auto; min-height: 64px; padding: 10px 12px; line-height: 1.45; resize: vertical; background: var(--v8-well); border-color: transparent; }
html.v8 .sh-found { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--v8-well); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
html.v8 .sh-found > .sm-i { margin-top: 1px; }
html.v8 .sh-found b { font-weight: 700; color: var(--ink); }
html.v8 .sh-found.ok, html.v8 .sh-found.ok b { background: #D9F5EB; color: #0A6B4A; }
html.v8 .sh-found.bad { background: #FFF1B3; color: #5C4700; }
html.v8 .sh-man { display: flex; flex-direction: column; gap: 8px; }
html.v8 .sh-fld { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
html.v8 .sh-when { display: flex; align-items: flex-start; gap: 8px; padding: 11px 12px; border-radius: 12px; background: var(--v8-sky); font-size: 13px; line-height: 1.45; color: var(--ink); }
html.v8 .sh-when > .sm-i { margin-top: 2px; }
html.v8 .sh-when.ok { background: #D9F5EB; color: #0A6B4A; }
html.v8 .sh-when.wait { background: #FFF1B3; color: #5C4700; }
html.v8 .sh-when b { font-weight: 700; }
html.v8 .sh-hl { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; line-height: 1.4; color: var(--ink-2); }
html.v8 .sh-hl .sm-i { margin-top: 1px; color: var(--ink-3); }
html.v8 .sh-after { padding: 10px 12px; border-radius: 12px; background: var(--v8-sky); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
html.v8 .sh-formmsg { padding: 10px 12px; border-radius: 12px; background: #FBDAD3; color: #C8392A; font-size: 13px; font-weight: 600; line-height: 1.4; }
html.v8 .sh-submit { margin-top: 4px; gap: 10px; }
html.v8 .sh-sl { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
html.v8 .sh-sl b { font-weight: 700; color: var(--ink); }
html.v8 .sh-tl { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
html.v8 .sh-dot { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; border-radius: 10px; background: var(--v8-well); color: var(--ink-2); font-size: 10px; font-weight: 700; }
html.v8 .sh-tl.on .sh-dot { background: var(--accent); color: #fff; }
/* маляр: «Викраски сьогодні» зверху дошки покраски */
html.v8 .sh-sws { gap: 10px; }
html.v8 .sh-sws-h { display: flex; align-items: center; gap: 8px; }
html.v8 .sh-sws-h > b { font-size: 15px; font-weight: 700; }
html.v8 .sh-sws-n { margin-left: auto; font-size: 34px; font-weight: 700; line-height: 1; color: var(--ink); }
html.v8 .sh-swr { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: var(--v8-well); }
html.v8 .sh-swr.done { background: #F3F5F8; }
html.v8 .sh-swr.done .sh-swr-t, html.v8 .sh-swr.done .sh-sw { opacity: .55; }
html.v8 .sh-swr-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; }
html.v8 .sh-swr-t b { font-weight: 700; }
html.v8 .sh-swr-t span { font-size: 12px; color: var(--ink-2); }
html.v8 .sh-swr-e { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
html.v8 .sh-done { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: 15px; background: #D9F5EB; color: #0A8F62; font-size: 12.5px; font-weight: 700; }
/* викраски по заявках (11.11.2026): заявка — рамка з номером і «N з M»; ціла — сіра, згорнута в рядок кружечків */
html.v8 .sh-swg { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--line); }
html.v8 .sh-swg.full { background: #F3F5F8; box-shadow: none; }
html.v8 .sh-swg-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; min-width: 0; padding: 0 2px; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; }
html.v8 button.sh-swg-h { width: 100%; cursor: pointer; }
html.v8 .sh-swg-h b { font-size: 15px; font-weight: 700; }
html.v8 .sh-swg-w { font-size: 12px; color: var(--ink-2); }
html.v8 .sh-swg-n { margin-left: auto; font-size: 14px; font-weight: 700; color: #9A4B00; white-space: nowrap; }
html.v8 .sh-swg-n.ok { color: #0A8F62; }
html.v8 .sh-swg-dots { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 2px; }
html.v8 .sh-swg.full .sh-swg-dots .sh-sw { opacity: .7; }
html.v8 .sh-sws-f { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
html.v8 .sh-sws-f .sm-cap { margin-left: auto; }
html.v8 .sh-late { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
html.v8 .sh-late .sh-ck { min-height: 30px; }
@media (min-width: 1180px) {
  html.v8 .sh-two { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
  html.v8 .sh-side { display: flex; flex-direction: column; gap: 14px; position: -webkit-sticky; position: sticky; top: 16px; }
}
@media (max-width: 767px) {
  /* на телефоні 3 плитки в рядку: складні назви ADLER (Mahagonibraun, Schwemmholz) вміщаються цілими (Микола, 08.11.2026) */
  html.v8 .sh-tones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  html.v8 .sh-tn { min-height: 88px; padding: 10px 2px 8px; font-size: 12px; }
  html.v8 .sh-tn-l.long { font-size: 11px; letter-spacing: -.02em; }
  html.v8 .sh-form { padding: 16px; }
  html.v8 .sh-go { width: 100%; height: 52px; border-radius: 14px; font-size: 15px; }
  html.v8 .sh-no-ph { display: none; }
  html.v8 .sh-kv { grid-template-columns: 104px minmax(0, 1fr); gap: 8px; }
  html.v8 .sh-flr { margin-left: 0; }
  html.v8 .sh-flr .sm-srch { flex: 1 1 auto; width: auto; min-width: 0; }
  html.v8 .sh-sort { height: 36px; border-radius: 18px; }
}
@media (max-width: 559px) {
  html.v8 .sh-cards { gap: 10px; }
  html.v8 .sh-card { padding: 14px; }
  html.v8 .sh-big { font-size: 26px; }
}

/* ---------- планшет 768–1179 px (Микола, 09.11.2026, iPad: «чомусь воно не розтягнулось на всю ширину планшету»): робоча частина на всю ширину, меню — як на телефоні ---------- */
@media (min-width: 768px) and (max-width: 1179px) {
  html.v8 .v8-main, html.v8 .v8-right { max-width: none; padding-left: 24px; padding-right: 24px; }
}

/* ---------- «На весь екран» (Микола, 09.11.2026, про планшет у цеху: «щоб там була тільки поточна робота і нічого не відволікало»): кнопка в шапці на планшеті й у лівому меню на ПК, на телефоні її немає.
   У цьому режимі — лише поточний екран: без меню, шапки, рядка вкладок, правого стовпчика й панелі знизу; вийти — кнопкою в кутку (public/shell.js, setFocus) ---------- */
html.v8 .v8-full, html.v8 .v8-unfocus { display: none; }
@media (min-width: 768px) {
  html.v8 .v8-top .v8-full { display: inline-flex; width: 36px; height: 36px; border: 0; border-radius: 18px; background: none; color: var(--ink-2); align-items: center; justify-content: center; cursor: pointer; flex: none; }
}
@media (min-width: 1180px) { html.v8 .v8-side .v8-full { display: flex; } }
html.v8 body.v8-focus .v8-side, html.v8 body.v8-focus .v8-top, html.v8 body.v8-focus .v8-greet, html.v8 body.v8-focus .v8-pills-box, html.v8 body.v8-focus .v8-pills, html.v8 body.v8-focus .v8-right,
html.v8 body.v8-focus .v8-bar, html.v8 body.v8-focus .v8-dim, html.v8 body.v8-focus .v8-sheet { display: none !important; }
html.v8 body.v8-focus .v8-frame { padding: 0; }
html.v8 body.v8-focus .v8-main { max-width: none; margin: 0; padding: 16px 20px calc(88px + env(safe-area-inset-bottom)); }
html.v8 body.v8-focus .v8-unfocus { display: inline-flex; align-items: center; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 55; height: 44px; padding: 0 16px 0 14px; border: 0; border-radius: 22px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; box-shadow: 0 8px 28px rgba(30, 42, 74, .2); cursor: pointer; }
html.v8 body.v8-focus .v8-unfocus .v8-i { margin-right: 8px; flex: none; }