/* Вигляд застосунку — варіант 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. Нічної теми поки немає. */
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-outer: #2C3C4D; --v8-panel: #EEF0F3; --v8-well: #E4E8EE; --v8-right: #FAFCFE; --v8-coral: #F26B52; --v8-coral-soft: #F6DCD6; --v8-coral-ink: #D8311C; --v8-sky: #D4E7F6;
}
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.v8-sales-only #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; color: var(--ink-3); cursor: pointer; border-radius: 14px; }
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: 700; }
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; }

/* шторка «Ще» */
html.v8 .v8-dim { position: fixed; inset: 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 .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); }

/* перемикач очима працівника й вигляду — власнику */
html.v8 .viewbar { border: 0; background: none; padding: 0; gap: 8px; }
html.v8 body:not(.as-worker) .viewbar #viewText { color: var(--ink-3); font-size: 12px; }
html.v8 body.as-worker .viewbar { background: var(--alert); padding: 8px 12px; border-radius: 12px; }
@media (max-width: 1179px) {
  html.v8 body:not(.as-worker) .viewbar { display: none; }
  html.v8 body.as-worker .viewbar .seg { display: none; }
}

/* ---------- ПК від 1180 px: темне тло, панель, ліве меню 180 px, правий стовпчик ---------- */
@media (min-width: 1180px) {
  html.v8 body { background: var(--v8-outer); }
  html.v8 .v8-bar, html.v8 .v8-top, html.v8 .v8-dim, html.v8 .v8-sheet { display: none !important; }
  html.v8 .v8-frame { padding: clamp(16px, 2.6vw, 40px); box-sizing: border-box; min-height: 100vh; }
  html.v8 .v8-panel { display: flex; align-items: stretch; background: var(--v8-panel); border-radius: 28px; min-height: calc(100vh - 2 * clamp(16px, 2.6vw, 40px)); }
  html.v8 .v8-side { display: flex; flex-direction: column; width: 180px; flex: none; box-sizing: border-box; padding: 28px 18px 24px 22px; border-right: 1px solid var(--line); position: sticky; top: clamp(16px, 2.6vw, 40px); align-self: flex-start; height: calc(100vh - 2 * clamp(16px, 2.6vw, 40px)); overflow-y: auto; }
  html.v8 .v8-logo { width: 72px; height: 16px; color: var(--ink); flex: none; }
  html.v8 .v8-me { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 0 20px; text-align: center; }
  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%; padding: 9px 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink-2); text-align: left; cursor: pointer; }
  html.v8 .v8-nv .v8-i { color: var(--ink-3); flex: none; }
  html.v8 .v8-nv .v8-cnt { margin-left: auto; }
  html.v8 .v8-nv.on { color: var(--ink); font-weight: 700; }
  html.v8 .v8-nv.on .v8-i { color: var(--ink); }
  html.v8 .v8-main { flex: 1; min-width: 0; max-width: none; margin: 0; padding: 26px 30px 32px; gap: 16px; }
  html.v8 .v8-greet h1 { font-size: 34px; }
  html.v8 .v8-right { width: clamp(340px, 30vw, 430px); flex: none; box-sizing: border-box; max-width: none; margin: 0; background: var(--v8-right); border-radius: 0 28px 28px 0; padding: 22px 26px 28px; display: flex; flex-direction: column; gap: 16px; }
  html.v8 .v8-icons { display: flex; justify-content: flex-end; min-height: 36px; }
  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: 76px; right: clamp(28px, 4vw, 60px); }
}

/* ---------- компоненти: наявні екрани в токенах варіанта 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 .btn.st-primary { background: var(--v8-coral); color: #fff; }
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); }
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-big.in { background: var(--v8-coral); color: #fff; }
html.v8 .att-mini { border: 0; border-radius: 12px; background: #fff; box-shadow: var(--shadow); font-weight: 500; font-size: 13px; }
/* зелена й натиснута кнопка: правило вище важить більше за стани з app.css, і без цих рядків напис був білий на білому (Микола, 05.11.2026: «немає кнопки») */
html.v8 .att-mini.good { background: var(--good); color: var(--on-status); }
html.v8 .att-mini[aria-pressed="true"] { background: var(--ink); color: var(--surface); box-shadow: none; }
/* значки ідей «В роботі» й «Доопрацювання»: помаранчевий текст на білому тут ледь читається (контраст 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 .viewbar { justify-content: flex-end; }
  html.v8 body:not(.as-worker) .viewbar #viewText { margin-right: 2px; }
  html.v8 .viewbar .seg button { min-height: 28px; padding: 0 10px; font-size: 12px; }
}
/* поля вводу: однаково на всіх екранах */
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); }
/* плитки дільниць */
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 #salesSamplesBody .sm-cards { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
html.v8 #salesSamplesBody .sm-c { min-height: 0; }
html.v8 #salesSamplesBody .sm-chips { margin: 2px 0; }
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-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%; }

/* ---------- Кнопки зі своїм кольором: загальне правило html.v8 .btn робить тло білим, тож колір повторюємо тут ---------- */
html.v8 .sl-copy { background: var(--accent); }
html.v8 .sl-copy:hover { background: var(--accent-strong); }
html.v8 .sl-copy.is-done, html.v8 .sl-copy.is-done:hover { background: var(--good); }
html.v8 .pl-primary { background: var(--accent); color: var(--on-accent); }
html.v8 .pl-primary:hover { background: var(--accent-strong); }