/* «Завдання» — записник власника, окремий розділ (public/ob.js; макет — Figma, секція 11, джерело — docs/design/v8-src/v8obitsianky.py). Кольори — токени варіанта 8 з public/v8.css.
   Кнопки — варіант 1 (Микола, 06.11.2026): головна дія — голуба заливка, одна на екран; повторювана — м’який голубий; третій рівень — біла з тінню;
   небезпечна — червоний контур; корал — ніколи не кнопка, лише тривога («прострочено»); зелений — лише стан «зроблено» (кружечок). Натиснутий перемикач — темний.
   Кожне правило — під html.v8, щоб бути сильнішим за спільні компоненти public/app.css. */

/* ---------- розділ: видно лише коли відкрито «Завдання» ---------- */
html.v8 #shtab, html.v8 #tabsShtab[hidden], html.v8 #secShtab[hidden] { display: none; }
html.v8 body.sec-shtab #shtab { display: flex; flex-direction: column; }
html.v8 body.sec-shtab #app, html.v8 body.sec-shtab #tabs, html.v8 body.sec-shtab #ideas, html.v8 body.sec-shtab #prokh, html.v8 body.sec-shtab #pay, html.v8 body.sec-shtab #career,
html.v8 body.sec-shtab #planning, html.v8 body.sec-shtab #catalog, html.v8 body.sec-shtab #salesDash, html.v8 body.sec-shtab #salesHints, html.v8 body.sec-shtab #salesDealers,
html.v8 body.sec-shtab #salesSamples, html.v8 body.sec-shtab #salesCatalog, html.v8 body.sec-shtab #salesReport, html.v8 body.sec-shtab #settings, html.v8 body.sec-shtab #tabsSales,
html.v8 body.sec-shtab #tabsSettings { display: none !important; }
html.v8 #shtabBody { --sm-ink: #1E2A4A; --sm-ink2: #586B82; --sm-mute: #8A9BB3; --sm-well: #E4E8EE; --sm-blue: #1B6FD6; --sm-coral: #F26B52; --sm-shadow: 0 8px 24px rgba(30, 42, 74, .08); color: var(--ink); width: 100%; min-width: 0; }
html.v8 #shtabBody .ob-i, html.v8 .ob-sheet .ob-i, html.v8 .v8-pane .ob-i { flex: none; display: inline-block; vertical-align: middle; }

/* ---------- кнопки ---------- */
html.v8 .ob-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 12px; background: var(--accent-strong); color: #fff; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; }
html.v8 .ob-btn:not([disabled]):hover { background: var(--v8-act-hover); }
html.v8 .ob-btn.soft { background: var(--accent-wash); color: var(--accent-strong); }
html.v8 .ob-btn.soft:not([disabled]):hover { background: var(--v8-act-soft-hover); }
html.v8 .ob-btn.ghost { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
html.v8 .ob-btn.ghost:not([disabled]):hover { background: var(--surface-2); }
html.v8 .ob-btn.danger { background: #fff; color: var(--v8-danger); box-shadow: inset 0 0 0 1.5px var(--v8-danger); }
html.v8 .ob-btn.danger:not([disabled]):hover { background: var(--v8-danger-soft); }
html.v8 .ob-btn.big { min-height: 52px; border-radius: 14px; font-size: 15px; flex: 1 1 0; white-space: normal; text-align: center; }
html.v8 .ob-btn.wide { width: 100%; flex: none; }
html.v8 .ob-btn.sm { min-height: 32px; padding: 0 12px; border-radius: 10px; font-size: 12px; flex: none; }
html.v8 .ob-btn[disabled] { opacity: .5; cursor: default; }
html.v8 .ob-fab { min-height: 36px; padding: 0 14px; flex: none; }
html.v8 .ob-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent-strong); cursor: pointer; text-align: left; }
html.v8 .ob-link:hover { text-decoration: underline; }
html.v8 .ob-dots { width: 52px; height: 52px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 26px; background: #fff; color: var(--ink-2); box-shadow: var(--shadow); cursor: pointer; }
html.v8 .ob-dots[aria-expanded="true"] { background: var(--ink); color: #fff; box-shadow: none; }

/* ---------- верх «Сьогодні» ---------- */
html.v8 .ob-hd { display: flex; align-items: center; gap: 12px; min-width: 0; }
html.v8 .ob-hd h1 { flex: 1; min-width: 0; margin: 0; font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
html.v8 .ob-sub { margin: -8px 0 0; font-size: 12px; line-height: 1.4; color: var(--ink-3); }
html.v8 .ob-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html.v8 .ob-card { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; box-sizing: border-box; padding: 14px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); color: var(--ink); }
html.v8 .ob-card.peach { background: var(--v8-coral-soft); box-shadow: none; }
html.v8 .ob-card.peach .ob-ct, html.v8 .ob-card.peach .ob-cap { color: var(--v8-coral-ink); }
html.v8 .ob-card.peach .ob-cap { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
html.v8 .ob-card.peach.calm { background: #fff; box-shadow: var(--shadow); }
html.v8 .ob-card.peach.calm .ob-ct { color: var(--ink); }
html.v8 .ob-card.peach.calm .ob-cap { color: var(--ink-3); }
html.v8 .ob-card.ring { align-items: center; text-align: center; }
html.v8 .ob-corner { position: absolute; top: 12px; right: 12px; color: var(--ink-3); display: inline-flex; }
html.v8 .ob-big { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
html.v8 .ob-ct { font-size: 13px; font-weight: 700; line-height: 1.3; }
html.v8 .ob-cap { margin: 0; font-size: 11px; line-height: 1.4; color: var(--ink-3); }
html.v8 .ob-cap.bad { color: var(--v8-coral-ink); }
html.v8 .ob-cap.c { text-align: center; }

/* перемикачі: на телефоні гортаються вбік, як папки в Telegram */
html.v8 .ob-chips { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
html.v8 .ob-chips::-webkit-scrollbar { display: none; }
html.v8 .ob-chips.flow { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
html.v8 .ob-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 16px; background: #fff; color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: var(--shadow); cursor: pointer; }
html.v8 .ob-chip b { font-weight: 700; color: var(--ink); }
html.v8 .ob-chip.bad b { color: var(--v8-coral-ink); }
html.v8 .ob-chip.on, html.v8 .ob-chip.on:hover { background: var(--ink); color: #fff; box-shadow: none; }
html.v8 .ob-chip.on b { color: #fff; }

/* ---------- групи й рядки ---------- */
html.v8 .ob-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
html.v8 .ob-grp { display: flex; align-items: center; gap: 8px; padding: 8px 2px 0; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
html.v8 .ob-grp:first-child { padding-top: 0; }
html.v8 .ob-grp.bad { color: var(--v8-coral-ink); }
html.v8 .ob-grp .n { font-weight: 600; letter-spacing: 0; text-transform: none; }
html.v8 .ob-row { display: flex; align-items: flex-start; gap: 12px; min-width: 0; box-sizing: border-box; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); color: var(--ink); cursor: pointer; }
html.v8 .ob-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; border-radius: 6px; }
html.v8 .ob-row .tx:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html.v8 .ob-row .t { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
html.v8 .ob-row.done .t { color: var(--ink-3); text-decoration: line-through; }
html.v8 .ob-row .s { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 5px; font-size: 11px; line-height: 1.3; color: var(--ink-2); }
html.v8 .ob-row .s .ob-i { color: var(--ink-3); }
html.v8 .ob-sep { color: var(--ink-3); }
html.v8 .ob-ck { width: 24px; height: 24px; flex: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; padding: 0; border: 2px solid #B9C5D3; border-radius: 12px; background: #fff; color: #fff; cursor: pointer; }
html.v8 .ob-ck:not(.ok):not([disabled]):hover { border-color: var(--accent); }
html.v8 .ob-ck.ok { background: #0CC78A; border-color: #0CC78A; }
html.v8 .ob-due { flex: none; display: inline-flex; align-items: center; gap: 4px; padding-top: 2px; font-size: 12px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
html.v8 .ob-due.bad { color: var(--v8-coral-ink); }
html.v8 .ob-due.now { color: var(--accent-strong); }
html.v8 .ob-due.mute { color: var(--ink-3); font-weight: 600; }
html.v8 .ob-due .ob-i { color: inherit; }
/* компактний рядок: стовпчик на ПК і екран людини — строк у рядку під текстом */
html.v8 .ob-row.c { gap: 10px; padding: 11px 12px; }
html.v8 .ob-row.c .t { font-size: 13px; }
html.v8 .ob-row.c .ob-ck { width: 22px; height: 22px; border-radius: 11px; }
html.v8 .ob-row.c .s .ob-due { margin-left: auto; padding-top: 0; font-size: 11px; }
html.v8 .ob-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--v8-panel); font-size: 10px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
html.v8 .ob-send { font-weight: 600; color: var(--ink-2); }
html.v8 .ob-send.grey { color: var(--ink-3); font-weight: 400; }
html.v8 .ob-none { margin: 0; padding: 6px 4px; font-size: 12px; line-height: 1.4; color: var(--ink-3); }
html.v8 .ob-empty { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
html.v8 .ob-empty b { font-size: 14px; color: var(--ink); }
html.v8 .ob-msg { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; border-radius: 12px; background: var(--v8-sky); font-size: 13px; line-height: 1.4; color: var(--ink); }
html.v8 .ob-msg.bad { background: #FBDAD3; color: #C8392A; font-weight: 600; }

/* ---------- праворуч на ПК (на телефоні — унизу): тримаєте слово, люди, нагадаю сьогодні ---------- */
html.v8 .ob-aside { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
html.v8 #shtabBody .ob-pc-only { display: none; }
html.v8 .ob-ringcard { align-items: center; gap: 6px; padding: 18px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); text-align: center; }
html.v8 .ob-sh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
html.v8 .ob-sh h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
html.v8 .ob-more-l { padding: 0; border: 0; background: none; font: inherit; font-size: 11px; color: var(--ink-3); cursor: pointer; }
html.v8 .ob-more-l:hover { color: var(--ink); }
html.v8 .ob-plist { display: flex; flex-direction: column; gap: 8px; }
html.v8 .ob-prow { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 14px; background: #fff; box-shadow: var(--shadow); font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
html.v8 .v8-pane .ob-prow { background: var(--v8-panel); box-shadow: none; }
html.v8 .ob-prow .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
html.v8 .ob-prow .tx b { font-size: 12.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
html.v8 .ob-prow .tx span { font-size: 11px; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; }
html.v8 .ob-pill { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 26px; height: 26px; box-sizing: border-box; padding: 0 9px; border-radius: 13px; background: var(--v8-panel); color: var(--ink); font-size: 11px; font-weight: 600; white-space: nowrap; }
html.v8 .v8-pane .ob-pill { background: #fff; }
html.v8 .ob-pill.red, html.v8 .v8-pane .ob-pill.red { background: #FBDAD3; color: #C8392A; }
html.v8 .ob-pill.green { background: #D9F5EB; color: #0A8F62; }
html.v8 .ob-pill.grey { background: var(--v8-panel); color: var(--ink-2); }
html.v8 .ob-av { display: inline-flex; align-items: center; justify-content: center; flex: none; font-weight: 700; }
html.v8 .ob-av.xs { width: 28px; height: 28px; border-radius: 14px; background: var(--accent-wash); color: var(--accent-strong); font-size: 10px; }
html.v8 .ob-av.lg { width: 44px; height: 44px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); color: var(--ink); font-size: 14px; }
html.v8 .ob-foot { gap: 12px; align-items: flex-start; }
html.v8 .ob-note2 { padding: 10px 12px; border-radius: 12px; background: var(--v8-sky); font-size: 12px; line-height: 1.45; color: var(--ink-2); }

/* ---------- людина: усе між вами ---------- */
html.v8 .ob-pv { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
html.v8 .ob-bk { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent-strong); cursor: pointer; }
html.v8 .ob-pp { display: flex; align-items: center; gap: 12px; min-width: 0; }
html.v8 .ob-pp .nm { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html.v8 .ob-pp h1 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
html.v8 .ob-pp .nm span { font-size: 12px; line-height: 1.4; color: var(--ink-2); }

/* ---------- ПК: рядок «як боту», «Коли», три стовпчики, таблиця ---------- */
html.v8 .ob-hd.pc { align-items: flex-start; gap: 14px; }
html.v8 .ob-hd-t { flex: 1; min-width: 0; }
html.v8 .ob-hd.pc h1 { font-size: 34px; line-height: 1.12; }
html.v8 .ob-hd.pc .ob-sub { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
html.v8 .ob-hd.pc .ob-fab { min-height: 40px; padding: 0 20px; }
html.v8 .ob-seg { width: 200px; flex: none; display: flex; }
html.v8 .ob-seg button { flex: 1 1 0; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
html.v8 .ob-qwrap { display: flex; flex-direction: column; gap: 8px; }
html.v8 .ob-inp { display: flex; align-items: center; gap: 10px; height: 48px; box-sizing: border-box; padding: 0 14px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); color: var(--accent-strong); cursor: text; }
html.v8 .ob-inp:focus-within { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
html.v8 .ob-inp input.ob-qi:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { flex: 1; min-width: 0; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 13px; color: var(--ink); }
html.v8 .ob-inp input.ob-qi:focus-visible { outline: 0; }
html.v8 .ob-inp .kbd { flex: none; padding: 3px 8px; border-radius: 6px; background: var(--v8-panel); font-size: 11px; font-weight: 700; color: var(--ink-2); }
html.v8 .ob-qfound[hidden] { display: none; }
html.v8 .ob-tbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 4px; }
html.v8 .ob-srch { display: flex; align-items: center; gap: 8px; flex: none; width: 300px; max-width: 100%; height: 36px; box-sizing: border-box; padding: 0 12px; border-radius: 18px; background: var(--v8-panel); color: var(--ink-3); }
html.v8 .ob-srch:focus-within { box-shadow: 0 0 0 2px var(--accent); }
html.v8 .ob-srch input.ob-search:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { flex: 1; min-width: 0; height: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 13px; color: var(--ink); }
html.v8 .ob-srch input.ob-search:focus-visible { outline: 0; }
html.v8 .ob-kan { min-height: 420px; }
html.v8 .ob-col h3 .ob-i { color: var(--ink-2); }
html.v8 .ob-col .ob-list { gap: 10px; }
html.v8 .ob-tbl { display: flex; flex-direction: column; min-width: 0; border-radius: 18px; background: #fff; box-shadow: var(--shadow); overflow: hidden; }
html.v8 .ob-tr { display: grid; grid-template-columns: 30px minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1.2fr) 112px minmax(0, 1.3fr); gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid rgba(30, 42, 74, .08); font-size: 13px; line-height: 1.35; cursor: pointer; }
html.v8 .ob-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 .ob-tr:not(.th):hover { background: #F7F9FB; }
html.v8 .ob-tr .ob-ck { width: 22px; height: 22px; border-radius: 11px; margin: 0; }
html.v8 .ob-tr .ob-due { padding-top: 0; }
html.v8 .ob-td-t { font-weight: 600; overflow-wrap: anywhere; border-radius: 6px; }
html.v8 .ob-td-t:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html.v8 .ob-tr.done .ob-td-t { color: var(--ink-3); text-decoration: line-through; }
html.v8 .ob-td-k { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); }
html.v8 .ob-td-m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 11px; color: var(--ink-2); }
html.v8 .ob-td-m .ob-i { color: var(--ink-3); }
html.v8 .ob-sort { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; }
html.v8 .ob-sort.on { color: var(--ink); }

/* ---------- шторка: на телефоні знизу, на ширшому екрані — панель праворуч ---------- */
html.v8 .ob-dim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 61; background: rgba(30, 42, 74, .35); }
html.v8 .ob-dim[hidden], html.v8 .ob-sheet[hidden] { display: none; }
html.v8 .ob-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 62; max-height: 88vh; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -8px 24px rgba(30, 42, 74, .12); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; }
html.v8 .ob-sheet > * { flex: none; }
html.v8 .ob-hdl { width: 40px; height: 4px; margin: 0 auto; border-radius: 2px; background: var(--track); }
html.v8 .ob-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 16px; background: var(--v8-panel); color: var(--ink-2); cursor: pointer; }
html.v8 .ob-over { display: flex; align-items: center; gap: 6px; padding-right: 44px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
html.v8 .ob-title { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
html.v8 .ob-h3 { margin: 0; padding-right: 44px; font-size: 18px; font-weight: 700; line-height: 1.25; }
html.v8 .ob-sub2 { margin: -6px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
html.v8 .ob-pills { display: flex; flex-wrap: wrap; gap: 6px; }
html.v8 .ob-kv { display: flex; flex-direction: column; border-radius: 14px; background: var(--v8-panel); overflow: hidden; }
html.v8 .ob-kv .r { display: flex; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.45; }
html.v8 .ob-kv .r:first-child { border-top: 0; }
html.v8 .ob-kv .k { width: 84px; flex: none; font-weight: 600; color: var(--ink-3); }
html.v8 .ob-kv .v { flex: 1; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
html.v8 .ob-kvlink { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--accent-strong); text-align: left; cursor: pointer; }
html.v8 .ob-lbl { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
html.v8 .ob-tl { display: flex; flex-direction: column; gap: 8px; }
html.v8 .ob-tl .e { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; }
html.v8 .ob-tl .dot { width: 10px; height: 10px; flex: none; margin-top: 4px; border-radius: 5px; background: var(--accent); }
html.v8 .ob-tl .dot.bad { background: var(--v8-coral); }
html.v8 .ob-tl .dot.mute { background: #B9C5D3; }
html.v8 .ob-tl .dot.ok { background: #0CC78A; }
html.v8 .ob-tl .e b { font-weight: 600; color: var(--ink); }
html.v8 .ob-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
html.v8 .ob-acts > .ob-link { padding: 10px 6px; }
html.v8 .ob-menu { display: flex; flex-direction: column; border-radius: 14px; background: var(--v8-panel); overflow: hidden; }
html.v8 .ob-mi { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 12px 14px; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; }
html.v8 .ob-mi:first-child { border-top: 0; }
html.v8 .ob-mi:not([disabled]):hover { background: #E6E9EE; }
html.v8 .ob-mi .ob-i { color: var(--ink-2); }
html.v8 .ob-mi.bad, html.v8 .ob-mi.bad .ob-i { color: var(--v8-danger); }
html.v8 .ob-form { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
/* поля форм */
html.v8 .ob-ta { width: 100%; min-height: 64px; box-sizing: border-box; padding: 12px; border: 0; border-radius: 12px; background: var(--v8-well); font: inherit; font-size: 14px; line-height: 1.4; color: var(--ink); resize: vertical; }
html.v8 .ob-ta::placeholder { color: var(--ink-3); }
html.v8 .ob-in { min-width: 0; }
html.v8 .ob-row2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html.v8 .ob-row2 > .ob-in { flex: 1 1 140px; }
html.v8 .ob-time { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
html.v8 .ob-found { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 12px; background: #D9F5EB; color: #0A8F62; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
html.v8 .ob-found.warn { background: #FFF1B3; color: #5C4700; }
html.v8 .ob-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
html.v8 .ob-sel { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; box-sizing: border-box; padding: 4px 12px; border: 0; border-radius: 16px; background: var(--v8-well); font: inherit; font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--ink); text-align: left; cursor: pointer; }
html.v8 .ob-sel.add { color: var(--accent-strong); }
html.v8 .ob-sel.on { background: var(--accent-wash); color: var(--accent-strong); box-shadow: 0 0 0 2px var(--accent); }
html.v8 .ob-who { display: flex; flex-direction: column; gap: 8px; }
html.v8 .ob-picker { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: var(--v8-panel); }
html.v8 .ob-picker .ob-sel:not(.on) { background: #fff; }
html.v8 .ob-opt { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 11px 12px; border: 0; border-radius: 12px; background: var(--v8-well); font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer; }
html.v8 .ob-opt .rd { position: relative; width: 18px; height: 18px; flex: none; box-sizing: border-box; border: 2px solid var(--ink-3); border-radius: 9px; }
html.v8 .ob-opt.on { background: var(--accent-wash); }
html.v8 .ob-opt.on .rd { border-color: var(--accent); }
html.v8 .ob-opt.on .rd::after { content: ""; position: absolute; left: 3px; top: 3px; width: 8px; height: 8px; border-radius: 4px; background: var(--accent); }
html.v8 .ob-kind { display: flex; }
html.v8 .ob-kind button { flex: 1 1 0; padding: 0 6px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
html.v8 .ob-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink); cursor: pointer; }
html.v8 .ob-switch { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 40px; height: 22px; margin: 0; border-radius: 11px; background: var(--track); cursor: pointer; transition: background .15s; }
html.v8 .ob-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 8px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: left .15s; }
html.v8 .ob-switch:checked { background: var(--accent); }
html.v8 .ob-switch:checked::after { left: 21px; }
html.v8 .ob-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html.v8 .ob-sendl { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 9px 12px; border-radius: 12px; background: var(--v8-sky); font-size: 12px; line-height: 1.4; color: var(--ink); }
html.v8 .ob-chk { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
html.v8 .ob-chk input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-strong); }
html.v8 .ob-part { display: flex; flex-direction: column; gap: 8px; }
html.v8 .ob-part:empty { display: none; }
html.v8 .ob-arow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--v8-panel); }
html.v8 .ob-arow .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
html.v8 .ob-arow .tx b { font-size: 13px; color: var(--ink); }

/* ---------- повідомлення знизу: «Відмінити» 5 секунд ---------- */
html.v8 .ob-toast { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 80; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100% - 32px); box-sizing: border-box; padding: 10px 16px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 13px; line-height: 1.35; box-shadow: 0 10px 28px rgba(8, 14, 22, .25); }
html.v8 .ob-toast[hidden] { display: none; }
html.v8 .ob-toast-t { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
html.v8 .ob-toast-a { flex: none; padding: 6px 2px; border: 0; background: none; font: inherit; font-weight: 700; color: #9CCBFF; cursor: pointer; }

@media (max-width: 767px) {
  html.v8.ob-lock body { overflow: hidden; }
}
@media (min-width: 768px) {
  html.v8 .ob-sheet { top: 16px; right: 16px; bottom: 16px; left: auto; width: 440px; max-height: none; padding: 20px 22px 24px; border-radius: 20px; box-shadow: 0 18px 50px rgba(30, 42, 74, .25); }
  html.v8 .ob-hdl { display: none; }
  html.v8 .ob-dim { background: rgba(30, 42, 74, .2); }
}
@media (min-width: 1180px) {
  html.v8 .ob-chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  html.v8 .ob-pv { max-width: 820px; }
  html.v8 .ob-toast { bottom: 24px; }
}
@media (max-width: 380px) {
  html.v8 .ob-hd h1 { font-size: 24px; }
  html.v8 .ob-big { font-size: 22px; }
}