/* IzyShift — телефон и Mini App (< 1024 px), 02.10.2026.
   Утверждённые мобильные макеты: design/mobile-mockups-2026-10 (вариант B —
   таб-бар внизу и плавающая «+» над ним), токены десктопа B «Pass».

   Слой поверх app.css, как desk.css у компьютера: каждое правило — под
   body.mb. Класс ставит mob.js, когда приложение открыто уже 1024 px или
   внутри Telegram Mini App. На компьютере (body.dk) этот файл не работает;
   экраны входа и терминал отметки (punch/) его не видят. */

@font-face { font-family: "Inter"; src: url("fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* 03.10: греческий — отдельные файлы, браузер берёт их, только когда на странице греческий (unicode-range) */
@font-face { font-family: "Inter"; src: url("fonts/inter-greek-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Inter"; src: url("fonts/inter-greek-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Inter"; src: url("fonts/inter-greek-600.woff2") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF; }
@font-face { font-family: "Inter"; src: url("fonts/inter-greek-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0370-03FF, U+1F00-1FFF; }

body.mb {
  --rail: #1B1E22; --rail-2: #262A30; --rail-ink: #A7AEB8;
  --canvas: #F1F2F4; --surface: #FFFFFF; --head: #F7F8F9;
  --ink: #15181C; --ink-2: #3E444C; --muted: #6A727D;
  --line: #E1E4E8; --line-2: #CDD2D8;
  --primary: #1B1E22; --signal: #F0A202; --signal-soft: #FFF4D6;
  --ok: #1A7F4B; --ok-soft: #E3F2E9; --warn: #A65500; --warn-soft: #FDEBD3;
  --err: #C7302B; --err-soft: #FBE4E3; --live: #0B6FB8; --live-soft: #E1EEF8;
  --off: #7B3F98; --off-soft: #F3E8F8;
  --accent: #1B1E22; --bg: #F1F2F4; --card: #fff;
  --t-xs: 12px; --t-sm: 13px; --t-md: 15px; --t-lg: 17px; --t-xl: 22px;
  --r: 6px; --r-lg: 10px; --r-sheet: 14px; --radius: 10px;
  --bar-h: 52px; --tab-h: 56px; --hit: 44px;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --mb-demo: 0px;                 /* высота панели публичного демо — ставит mob.js */
  --mb-bottom: calc(var(--tab-h) + var(--sab) + var(--mb-demo));
  font: 400 var(--t-md)/1.4 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "tnum" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  background: var(--canvas); color: var(--ink);
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  overflow-x: hidden;
}
body.mb.mb-tg { --sat: 0px; }   /* шапку рисует сам Telegram */
body.mb :focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
body.mb button, body.mb input, body.mb select, body.mb textarea { font-family: inherit; }

body:not(.mb) .mb-only { display: none !important; }
body.mb.mb-mgr .mb-hk { display: none; }

/* ── Каркас: шапка экрана, таб-бар, плавающая кнопка ─────────────── */
body.mb #app { min-height: 100dvh; padding-bottom: calc(var(--mb-bottom) + 20px); max-width: 640px; margin: 0 auto; }
body.mb #app > .top, body.mb #app > .tabs, body.mb #navbar { display: none !important; }
body.mb.has-nav, body.mb.has-demo-bar { padding-bottom: 0; }
body.mb #app > .view { margin: 0; }

.mb-bar { display: none; }
body.mb .mb-bar { display: block; position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); padding-top: var(--sat); }
.mb-bar-in { height: var(--bar-h); display: flex; align-items: center; gap: 2px; padding: 0 6px; }
.mb-ttl { flex: 1; min-width: 0; padding: 0 8px; }
.mb-ttl h1 { margin: 0; font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.mb-ttl small { display: block; font-size: var(--t-xs); color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-back:not([hidden]) + .mb-ttl { padding-left: 0; }
body.mb-tg .mb-back { display: none !important; }    /* в Mini App «Назад» — системная кнопка Telegram */
.mb-acts { display: flex; align-items: center; flex: none; }
.mb-ib { width: var(--hit); height: var(--hit); display: grid; place-items: center; border: 0; background: none; border-radius: var(--r-lg);
  color: var(--ink); position: relative; flex: none; cursor: pointer; padding: 0; }
.mb-ib:active { background: var(--head); }
.mb-ib:disabled { opacity: .35; }
.mb-ib .pip { position: absolute; top: 6px; right: 5px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--err); color: #fff;
  font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.mb-ib.tx { width: auto; padding: 0 10px; font-weight: 600; font-size: var(--t-md); }
.mb-pos { font-size: var(--t-xs); color: var(--muted); font-weight: 600; min-width: 34px; text-align: center; }

.mb-tabs { display: none; }
body.mb .mb-tabs { position: fixed; left: 0; right: 0; bottom: var(--mb-demo); z-index: 40; background: var(--rail); padding-bottom: var(--sab);
  display: flex; height: calc(var(--tab-h) + var(--sab)); border-top: 1px solid #2D3239; }
body.mb.has-demo-bar .mb-tabs { padding-bottom: 0; height: var(--tab-h); }
.mb-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none;
  color: var(--rail-ink); font-size: 10.5px; font-weight: 500; letter-spacing: .01em; position: relative; min-width: 0; cursor: pointer; padding: 0 2px; }
.mb-tab .ic { color: #808894; }
.mb-tab span.l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-tab.on { color: #fff; }
.mb-tab.on .ic { color: var(--signal); }
.mb-tab.on::before { content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 2px; background: var(--signal); border-radius: 0 0 2px 2px; }
.mb-tab .badge { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 16px; height: 16px; border-radius: 8px; background: var(--err); color: #fff;
  font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }

.mb-fab { display: none; }
body.mb .mb-fab:not([hidden]) { position: fixed; right: 16px; bottom: calc(var(--mb-bottom) + 14px); z-index: 35; height: 48px; padding: 0 18px 0 14px;
  border-radius: 24px; background: var(--primary); color: #fff; border: 0; display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: var(--t-md); box-shadow: 0 8px 20px -6px rgba(21,24,28,.55); cursor: pointer; }
.mb-fab .ic { color: var(--signal); }
.mb-top { display: none; }
body.mb .mb-top:not([hidden]) { position: fixed; right: 16px; bottom: calc(var(--mb-bottom) + 14px); z-index: 35; width: 44px; height: 44px; border-radius: 22px;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2); display: grid; place-items: center; box-shadow: 0 6px 16px -6px rgba(21,24,28,.35); cursor: pointer; }
body.mb.mb-has-fab .mb-top { bottom: calc(var(--mb-bottom) + 72px); }
body.mb.mb-has-fab #app { padding-bottom: calc(var(--mb-bottom) + 84px); }
body.mb:has(.sheet-wrap:not([hidden])) .mb-fab, body.mb:has(.sheet-wrap:not([hidden])) .mb-top { display: none !important; }

/* тост «Сохранено · Отменить» */
.mb-toast { min-height: 44px; position: fixed; left: 50%; bottom: calc(var(--mb-bottom, 0px) + 14px); z-index: 60; transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  background: #15181C; color: #fff; border-radius: 22px; padding: 0 6px 0 14px; display: inline-flex; align-items: center; gap: 8px;
  font: 600 13px/1.3 "Inter", system-ui, sans-serif; white-space: nowrap; box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); transition: opacity .18s, transform .18s; max-width: calc(100vw - 24px); }
.mb-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.mb-toast .ic { color: #5BD08C; }
.mb-toast span { overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.mb-toast button { color: var(--signal, #F0A202); background: none; border: 0; font: inherit; min-height: 44px; padding: 0 10px; cursor: pointer; }
body.mb.mb-has-fab .mb-toast { bottom: calc(var(--mb-bottom) + 72px); }
body.mb:has(.sheet-wrap:not([hidden])) .mb-toast { bottom: calc(var(--sab) + 90px); }
body.mb .nav-toast { display: none !important; }

/* ── Базовые компоненты в токенах B ──────────────────────────────── */
body.mb .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin: 12px; padding: 14px 16px; }
body.mb .card + .card { margin-top: 0; }
body.mb h2 { font-size: var(--t-md); font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--ink); margin-bottom: 10px; }
body.mb h3.sub { font-size: var(--t-sm); font-weight: 700; color: var(--ink-2); text-transform: none; letter-spacing: 0; }
body.mb .muted { color: var(--muted); }
body.mb .small { font-size: var(--t-sm); }
body.mb .btn { min-height: 44px; height: auto; padding: 8px 14px; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--surface);
  color: var(--ink); font-weight: 600; font-size: var(--t-sm); box-shadow: none; }
body.mb .btn.small { min-height: 44px; padding: 6px 12px; }
body.mb .btn.big { min-height: 48px; font-size: var(--t-md); border-radius: 12px; }
body.mb .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
body.mb .btn.out { background: var(--primary); border-color: var(--primary); color: #fff; }
body.mb .btn.danger-ghost { color: var(--err); border-color: #F0B7B4; background: var(--surface); }
body.mb .btn:disabled { opacity: .45; }
body.mb .link { color: var(--ink-2); font-weight: 600; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
body.mb .th-sort { min-height: 44px; }
body.mb .th-help { min-width: 44px; min-height: 44px; }
body.mb .inp { min-height: 44px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); font-size: 16px; color: var(--ink); padding: 0 12px; }
body.mb textarea.inp { padding: 10px 12px; }
body.mb .inp:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
body.mb .segmented { background: #E6E8EB; border-radius: var(--r-lg); padding: 3px; gap: 2px; border: 0; }
body.mb .segmented .seg { min-height: 44px; border: 0; background: none; border-radius: 8px; font-weight: 600; font-size: var(--t-sm); color: var(--ink-2); }
body.mb .segmented .seg.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
body.mb .chip { min-width: 44px; min-height: 44px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--surface); color: var(--ink-2); font-weight: 600; font-size: var(--t-sm); padding: 0 12px; }
body.mb .chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
body.mb .chips.filter, body.mb #sf-status { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; }
body.mb .chips.filter::-webkit-scrollbar, body.mb #sf-status::-webkit-scrollbar { display: none; }
body.mb .chips.filter > .chip { flex: none; white-space: nowrap; }   /* 22.10.2026: «V&A Waterfront · Bar» не сжимается в столбик — лента листается вбок */
body.mb .pill { border-radius: 4px; font-weight: 600; font-size: var(--t-xs); padding: 2px 7px; background: #EEF0F2; color: var(--ink-2); }
body.mb .pill.wait { background: var(--signal-soft); color: #8A5A00; }
body.mb .radio { border: 1px solid var(--line-2); border-radius: var(--r-lg); min-height: 56px; }
body.mb .radio:has(input:checked) { border-color: var(--ink); background: var(--head); }
body.mb .radio input, body.mb .check input { accent-color: #1B1E22; width: 20px; height: 20px; }
body.mb .check { min-height: 44px; align-items: center; }
body.mb .note.ok { color: var(--ok); } body.mb .note.bad { color: var(--err); }
body.mb .row { min-height: 44px; align-items: center; }
body.mb .tbl-scroll { border-radius: var(--r-lg); }
body.mb table.rep th { background: var(--head); color: var(--ink-2); font-weight: 600; }

/* общие строки списка */
.mb-sec { margin: 18px 16px 6px; font-size: var(--t-sm); font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.mb-sec b { color: var(--ink); font-weight: 700; font-size: var(--t-md); }
.mb-sec .n { font-size: var(--t-xs); font-weight: 700; background: var(--ink); color: #fff; border-radius: 4px; padding: 0 6px; line-height: 18px; }
.mb-sec .n.err { background: var(--err); }
.mb-sec .r { margin-left: auto; font-weight: 500; }
.mb-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin: 0 12px; overflow: hidden; }
.mb-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; border: 0; border-bottom: 1px solid var(--line);
  background: var(--surface); width: 100%; text-align: left; color: var(--ink); font: inherit; cursor: pointer; }
.mb-row:last-child { border-bottom: 0; }
.mb-row:active { background: var(--head); }
.mb-row .main { flex: 1; min-width: 0; }
.mb-row .main b { display: block; font-weight: 600; font-size: var(--t-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-row .main small { display: block; font-size: var(--t-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-row .end { display: flex; align-items: center; gap: 6px; flex: none; color: var(--muted); font-size: var(--t-sm); text-align: right; }
.mb-row .end b { color: var(--ink); font-weight: 600; }
.mb-row .chev { color: #AEB4BC; flex: none; }
.mb-row > .ic { color: var(--muted); }
.mb-row.hd { min-height: 34px; padding: 6px 16px; background: #EEF0F2; font-size: var(--t-xs); font-weight: 700; color: var(--ink-2); cursor: default; }
.mb-row.hd .r { margin-left: auto; color: var(--muted); font-weight: 600; }
.mb-row.lead { border-left: 3px solid var(--ac, var(--line-2)); padding-left: 13px; }
.mb-av { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; font-size: 12px; font-weight: 700; flex: none; }
.mb-av.sm { width: 26px; height: 26px; font-size: 10px; border-radius: 6px; }
.mb-tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); font-weight: 600; padding: 2px 7px; border-radius: 4px; background: #EEF0F2; color: var(--ink-2); white-space: nowrap; line-height: 1.4; }
.mb-tag.ok { background: var(--ok-soft); color: var(--ok); } .mb-tag.warn { background: var(--warn-soft); color: var(--warn); }
.mb-tag.err { background: var(--err-soft); color: var(--err); } .mb-tag.live { background: var(--live-soft); color: var(--live); }
.mb-tag.sig { background: var(--signal-soft); color: #8A5A00; } .mb-tag.off { background: var(--off-soft); color: var(--off); }
.mb-tag.draft { background: repeating-linear-gradient(135deg, #EEF0F2 0 4px, #fff 4px 8px); box-shadow: inset 0 0 0 1px var(--line-2); }
.mb-empty { padding: 20px 16px; color: var(--muted); font-size: var(--t-sm); text-align: center; }
.mb-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.mb-tiles.t3 { grid-template-columns: repeat(3, 1fr); } .mb-tiles.t2 { grid-template-columns: 1fr 1fr; }
.mb-tiles > div { background: var(--surface); padding: 10px 10px 9px; min-width: 0; display: flex; flex-direction: column; }
/* 03.10: подпись — до двух строк (греческие и украинские длиннее), число прижато вниз — в ряд с соседями */
.mb-tiles span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 11px; line-height: 1.25;
  color: var(--muted); font-weight: 500; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; }
.mb-tiles > div > b { margin-top: auto; }
.mb-tiles b { display: block; font-size: clamp(15px, 4.6vw, 20px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-tiles b small { display: block; font-size: 11px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.mb-tiles .warn b { color: var(--warn); } .mb-tiles .err b { color: var(--err); } .mb-tiles .ok b { color: var(--ok); } .mb-tiles .live b { color: var(--live); }

/* ── Листы снизу ─────────────────────────────────────────────────── */
body.mb .sheet-wrap { background: rgba(21,24,28,.45); align-items: flex-end; justify-content: center; z-index: 50; padding: 0; }
body.mb .sheet { max-width: 640px; width: 100%; border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 0 16px calc(16px + var(--sab));
  max-height: calc(100dvh - var(--sat) - 24px); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 -12px 40px -12px rgba(0,0,0,.4);
  margin: 0; position: relative; }
body.mb.mb-tg .sheet { max-height: calc(var(--tg-vh, 100dvh) - 24px); }
body.mb .sheet::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 8px auto 0; }
body.mb .sheet-head { position: sticky; top: 0; z-index: 5; background: var(--surface); margin: 0 -16px 12px; padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 4px; min-height: 52px; touch-action: none; }
body.mb .sheet-head h2 { flex: 1; margin: 0; font-size: var(--t-lg); font-weight: 700; color: var(--ink); }
body.mb .sheet-head .link { min-width: 44px; min-height: 44px; font-size: 0; position: relative; color: var(--ink-2); border-radius: var(--r-lg); }
body.mb .sheet-head .link::after { content: "✕"; font-size: 18px; line-height: 44px; }
/* главная кнопка листа — внизу во всю ширину, всегда видна */
body.mb .sheet .row-add:has(> .btn.primary) { position: sticky; bottom: calc(-16px - var(--sab)); z-index: 4; background: var(--surface); margin: 8px -16px 0;
  padding: 10px 16px calc(10px + var(--sab)); border-top: 1px solid var(--line); display: flex; gap: 10px; }
body.mb .sheet .row-add > .btn.primary { flex: 1; min-height: 48px; font-size: var(--t-md); border-radius: 12px; }
body.mb .sheet .row-add > .btn.danger-ghost { flex: 0 0 auto; min-height: 48px; }
body.mb.mb-tg.mb-main .sheet .row-add:has(> .btn.mb-mainsrc) .btn.mb-mainsrc { display: none; }
body.mb.mb-tg.mb-main .sheet .row-add:has(> .btn.mb-mainsrc):not(:has(> .btn:not(.mb-mainsrc):not([hidden]))) { display: none; }
body.mb .sheet .stack { gap: 12px; }
body.mb #sheet .row3 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body.mb #sheet .row3:not(.brk) > #sh-date { grid-column: 1 / -1; width: 100%; }
body.mb #sheet .row3 > .inp { width: 100%; min-width: 0; }
body.mb #sheet .row3.brk { grid-template-columns: 1fr 1.4fr; }
body.mb #sheet .chips { gap: 6px; flex-wrap: wrap; }
body.mb .punchbox { background: var(--head); border: 1px solid var(--line); border-radius: var(--r-lg); }
body.mb .rep-days { gap: 2px; }
body.mb .repeat { padding-left: 0; padding-right: 0; border: 0; background: none; }
body.mb .rep-days .rd { min-height: 44px; min-width: 0; border-radius: 8px; }
body.mb .rep-days .rd.on { background: var(--ink); color: #fff; border-color: var(--ink); }
body.mb .lv-warn { background: var(--signal-soft); border: 1px solid #F3CF7A; color: #6E4700; border-radius: var(--r-lg); }
body.mb .rq-card { border: 1px solid var(--line); border-left: 3px solid var(--signal); border-radius: var(--r-lg); padding: 10px 12px; }
body.mb .rq-card .row-add { display: flex; gap: 8px; }
body.mb .rq-card .row-add .btn { flex: 1; min-height: 44px; }
body.mb .ch-opts .btn { min-height: 56px; text-align: left; justify-content: flex-start; width: 100%; white-space: normal; }

/* барабан времени 24 ч (лист смены) */
.mb-pick { display: none; }
body.mb .mb-pick { display: block; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.mb-pick-h { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px 0 12px; background: var(--head); border-bottom: 1px solid var(--line);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.mb-pick-h .grow { flex: 1; }
.mb-pick-h button { min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); font: 600 13px/1 "Inter", sans-serif; color: var(--ink-2); cursor: pointer; }
.mb-pick-h button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.mb-drums { display: grid; grid-template-columns: 1fr 1fr; height: 176px; position: relative; }
.mb-drums::before { content: ""; position: absolute; left: 8px; right: 8px; top: 66px; height: 44px; border-radius: 8px; background: var(--signal-soft);
  box-shadow: inset 0 0 0 1.5px var(--signal); pointer-events: none; }
.mb-drum { overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; position: relative; padding: 66px 0; overscroll-behavior: contain; }
.mb-drum::-webkit-scrollbar { display: none; }
.mb-drum + .mb-drum { border-left: 1px solid var(--line); }
.mb-drum button { display: block; width: 100%; height: 44px; line-height: 44px; scroll-snap-align: center; text-align: center; border: 0; background: none;
  font: 600 22px/44px "Inter", sans-serif; color: var(--muted); opacity: .55; cursor: pointer; position: relative; z-index: 1; }
.mb-drum button.on { color: var(--ink); opacity: 1; font-weight: 700; }

/* «Фильтры» и «⋮» — свои листы */
body.mb #mb-menu .mb-list, body.mb #mb-filters .mb-list { margin: 0 0 8px; }
body.mb #mb-filters .filters { display: flex; flex-direction: column; gap: 10px; }

/* ── Сегодня: менеджер ───────────────────────────────────────────── */
body.mb.mb-mgr #attention, body.mb.mb-mgr #today-team, body.mb.mb-mgr #today-timeline { display: none !important; }
.mb-today { display: none; }
body.mb .mb-today { display: block; }
.mb-ask { background: var(--surface); border-left: 3px solid var(--ac, var(--line-2)); border-bottom: 1px solid var(--line); padding: 10px 16px 12px 13px; }
.mb-ask:last-child { border-bottom: 0; }
.mb-ask .k { font-size: var(--t-xs); font-weight: 700; color: var(--ac, var(--ink-2)); display: flex; align-items: center; gap: 8px; }
.mb-ask .who { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-weight: 600; min-width: 0; }
.mb-ask .who small { color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-ask p { margin: 4px 0 0; color: var(--ink-2); font-size: var(--t-sm); }
.mb-ask .acts { display: flex; gap: 8px; margin-top: 10px; }
.mb-ask .acts .btn { flex: 1; min-height: 44px; }
.mb-ask.warn { --ac: var(--warn); } .mb-ask.err { --ac: var(--err); } .mb-ask.live { --ac: var(--signal); } .mb-ask.muted { --ac: var(--line-2); }

/* лента дня (из C): имена закреплены, часы листаются */
.mb-tl { display: grid; grid-template-columns: 112px 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin: 0 12px; overflow: hidden; }
.mb-tl-names { border-right: 1px solid var(--line); min-width: 0; }
.mb-tl-names > div, .mb-tl-lanes > div { height: 44px; border-bottom: 1px solid var(--line); }
.mb-tl-names > div { display: flex; align-items: center; gap: 6px; padding: 0 4px 0 8px; font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.mb-tl-names > div > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mb-tl-names small { display: block; font-weight: 500; color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
.mb-tl-names > .g, .mb-tl-lanes > .g { height: 26px; background: #EEF0F2; font-size: 10.5px; font-weight: 700; color: var(--ink-2); padding-left: 10px; display: flex; align-items: center; }
.mb-tl-names > .ax, .mb-tl-lanes > .ax { height: 22px; background: var(--head); border-bottom-color: var(--line-2); font-size: 10px; color: var(--muted); font-weight: 600; }
.mb-tl-scroll { overflow-x: auto; scrollbar-width: none; position: relative; }
.mb-tl-scroll::-webkit-scrollbar { display: none; }
.mb-tl-lanes { position: relative; width: var(--tw); }
.mb-tl-lanes > div { position: relative; }
.mb-tl-lanes > .ax span { position: absolute; top: 4px; transform: translateX(-50%); }
.mb-tl-lanes .plan { position: absolute; top: 9px; height: 26px; border-radius: 5px; border: 0; padding: 0 6px; background: color-mix(in srgb, var(--rc) 28%, #fff);
  font: 700 10.5px/26px "Inter", sans-serif; color: var(--ink); white-space: nowrap; overflow: hidden; text-align: left; cursor: pointer; }
.mb-tl-lanes .plan.draft { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--rc) 25%, #fff) 0 4px, #fff 4px 8px); box-shadow: inset 0 0 0 1px var(--rc); }
.mb-tl-lanes .fact { position: absolute; top: 13px; height: 18px; border-radius: 4px; background: var(--rc); color: #fff; font: 700 10px/18px "Inter", sans-serif; padding: 0 4px; white-space: nowrap; overflow: hidden; pointer-events: none; }
.mb-tl-lanes .fact.live::after { content: ""; position: absolute; right: 1px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 2px #fff; }
.mb-tl-lanes .flag { position: absolute; top: 14px; font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 3px; white-space: nowrap; line-height: 16px; background: var(--warn-soft); color: var(--warn); pointer-events: none; }
.mb-tl-lanes .flag.err { background: var(--err-soft); color: var(--err); }
.mb-tl-lanes > .now { position: absolute; top: 0; bottom: 0; height: auto; border: 0; border-left: 2px solid var(--err); z-index: 3; pointer-events: none; }
.mb-tl-lanes > .now span { position: absolute; top: 3px; left: -17px; background: var(--err); color: #fff; font-size: 9.5px; font-weight: 700; padding: 1px 4px; border-radius: 3px; }
.mb-legend { display: flex; gap: 12px; flex-wrap: wrap; padding: 8px 16px; font-size: var(--t-xs); color: var(--muted); font-weight: 500; }
.mb-legend i { display: inline-block; width: 14px; height: 8px; border-radius: 2px; margin-right: 5px; }

/* своя отметка у руководителя — строкой, не героем */
body.mb.mb-mgr #view-today > .card.center { text-align: left; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; }
body.mb.mb-mgr #view-today > .card.center .clock { font-size: 24px; grid-column: 1; }
body.mb.mb-mgr #view-today > .card.center #today-shift { grid-column: 1; font-size: var(--t-sm); }
body.mb.mb-mgr #view-today > .card.center #punch-btn { grid-column: 2; grid-row: 1 / span 2; min-height: 44px; width: auto; margin: 0; font-size: var(--t-sm); }
body.mb.mb-mgr #view-today > .card.center .note, body.mb.mb-mgr #view-today > .card.center .attend { grid-column: 1 / -1; margin-top: 4px; }

/* ── Сегодня: сотрудник — тёмная карта смены ─────────────────────── */
body.mb.mb-emp #view-today > .card.center { background: var(--rail); color: #fff; border: 0; text-align: left; position: relative; overflow: hidden; padding: 18px 16px 16px; margin: 12px; }
body.mb.mb-emp #view-today > .card.center::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,162,2,.35), transparent 70%); pointer-events: none; }
body.mb.mb-emp #view-today > .card.center .mb-hk { font-size: var(--t-sm); color: var(--rail-ink); font-weight: 500; }
body.mb.mb-emp #view-today > .card.center .clock { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin: 8px 0 2px; color: #fff; }
body.mb.mb-emp #view-today > .card.center #today-shift { color: var(--rail-ink); font-size: var(--t-sm); }
body.mb.mb-emp #view-today > .card.center .attend { margin-top: 10px; font-weight: 600; text-align: left; }
body.mb.mb-emp #view-today > .card.center .attend span { color: #fff; }
body.mb.mb-emp #view-today > .card.center .attend .late { color: #FFC56B; }
body.mb.mb-emp #view-today > .card.center .attend .ok::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #5BD08C; box-shadow: 0 0 0 3px rgba(91,208,140,.25); margin-right: 8px; }
body.mb.mb-emp #view-today > .card.center #punch-btn { width: 100%; margin-top: 14px; min-height: 48px; background: #fff; border-color: #fff; color: var(--ink); border-radius: 12px; font-size: var(--t-md); position: relative; z-index: 1; }
body.mb.mb-emp #view-today > .card.center .note { color: var(--rail-ink); font-size: var(--t-sm); margin-top: 10px; }
body.mb.mb-emp #view-today > .card.center .note.ok { color: #7EE0A6; }
body.mb.mb-emp #view-today > .card.center .note.bad { color: #FF9C97; }
body.mb.mb-emp #view-today > .card.center .note.warn { color: #FFC56B; }
body.mb #today-colleagues { padding: 0; overflow: hidden; }
body.mb #today-colleagues h2 { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--head); font-size: var(--t-sm); }
body.mb #today-colleagues .row { padding: 10px 16px; min-height: 48px; }
body.mb .tg-banner { border-color: #B9D6EE; background: var(--live-soft); }

/* ── График ──────────────────────────────────────────────────────── */
body.mb #view-schedule .weekbar, body.mb #view-shifts > .weekbar { padding: 4px 6px 0; background: var(--surface); }
body.mb .wk-arr { min-width: 44px; min-height: 44px; font-size: 20px; color: var(--ink-2); }
body.mb .wk-mid { font-size: var(--t-md); font-weight: 700; display: flex; flex-direction: column; align-items: center; }
body.mb .wk-now { min-height: 44px; font-size: var(--t-xs); color: #8A5A00; }
body.mb #sch-grid, body.mb .grid-tip, body.mb #sch-actions .sch-more-btn, body.mb #sch-sec, body.mb #sch-actions #sch-requests { display: none !important; }
body.mb .daystrip:not([hidden]) { display: flex !important; margin: 0; border-radius: 0; border: 0; gap: 2px; padding: 2px 6px 8px; background: var(--surface); border-bottom: 1px solid var(--line); overflow: visible; }
body.mb .dstrip { flex: 1; min-width: 0; height: 60px; border-radius: 10px; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 0; }
body.mb .dstrip .dw { font-size: 11px; color: var(--muted); font-weight: 500; }
body.mb .dstrip .dn { font-size: var(--t-lg); font-weight: 700; line-height: 1.2; color: var(--ink); }
body.mb .dstrip .dc { font-size: 10.5px; color: var(--muted); font-weight: 500; min-height: 13px; }
body.mb .dstrip.today .dn { color: #8A5A00; }
body.mb .dstrip.today::after { content: ""; position: absolute; top: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--signal); }
body.mb .dstrip.on { background: var(--ink); }
body.mb .dstrip.on .dn { color: #fff; } body.mb .dstrip.on.today .dn { color: var(--signal); }
body.mb .dstrip.on .dw, body.mb .dstrip.on .dc { color: var(--rail-ink); }
/* 03.10: полоса недель — карусель из трёх панелей (прошлая · эта · следующая), едет за пальцем */
body.mb .daystrip.mb-wk:not([hidden]) { display: block !important; padding: 0; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body.mb .mb-wtrack { display: flex; transform: translate3d(-100%, 0, 0); will-change: transform; }
body.mb .mb-wpanel { flex: 0 0 100%; min-width: 0; display: flex; gap: 2px; padding: 2px 6px 8px; box-sizing: border-box; }
body.mb .mb-wpanel .dstrip { -webkit-tap-highlight-color: transparent; }
body.mb .dstrip .dc .ph { display: inline-block; width: 12px; height: 4px; border-radius: 2px; background: var(--line); vertical-align: middle; }
body.mb .dstrip.on .dc .ph { background: rgba(255, 255, 255, .25); }
body.mb #view-schedule:not(.mb-weekmode) #sch-list { touch-action: pan-y; }
body.mb #sch-list.mb-wait { opacity: .55; transition: opacity .15s; }
@media (prefers-reduced-motion: reduce) { body.mb .mb-wtrack, body.mb #sch-list { transition: none !important; } }
body.mb #sch-depts { padding: 10px 16px 6px; margin: 0; }
body.mb #sch-actions { margin: 0; padding: 0; }
body.mb #sch-actions .sch-main { display: block; }
body.mb #sch-publish, body.mb #sch-published { display: none !important; }
.mb-pub { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--signal-soft); border-top: 1px solid #F3CF7A; border-bottom: 1px solid #F3CF7A;
  font-size: var(--t-sm); font-weight: 600; color: #8A5A00; }
.mb-pub .btn { margin-left: auto; min-height: 44px; }
.mb-pub.ok { background: var(--ok-soft); border-color: #B9DCC8; color: var(--ok); }
body.mb #sch-note:empty { display: none; }
body.mb #sch-note { margin: 8px 12px; }
body.mb #sch-list .day { margin: 0; padding: 0; border: 0; background: none; }
.mb-dayhd { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 6px; font-size: var(--t-md); font-weight: 700; }
.mb-dayhd small { color: var(--muted); font-weight: 500; font-size: var(--t-sm); }
.mb-shift { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 16px 8px 12px; border: 0; border-bottom: 1px solid var(--line); background: var(--surface);
  width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.mb-shift:last-child { border-bottom: 0; }
.mb-shift:active { background: var(--head); }
.mb-shift .bar { width: 4px; align-self: stretch; border-radius: 2px; background: var(--rc); flex: none; }
.mb-shift.draft .bar { background: repeating-linear-gradient(180deg, var(--rc) 0 5px, #fff 5px 9px); box-shadow: inset 0 0 0 1px var(--rc); }
.mb-shift .main { flex: 1; min-width: 0; }
.mb-shift .main b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-shift .main small { display: block; font-size: var(--t-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-shift .main .ex { white-space: normal; }
.mb-shift .t { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; max-width: 46%; }
.mb-shift .t b { font-weight: 600; font-size: var(--t-md); }
.mb-shift .t .pm { font-size: var(--t-xs); white-space: normal; text-align: right; }
.mb-shift.off { background: var(--off-soft); }
.mb-shift .chev { color: #AEB4BC; flex: none; margin-left: -4px; }
.mb-addrow { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; color: var(--ink-2); font-weight: 600; font-size: var(--t-sm); background: var(--surface);
  width: 100%; border: 0; border-top: 1px dashed var(--line-2); cursor: pointer; font-family: inherit; }
body.mb #sch-list .lab-day { margin: 0 12px 8px; }
body.mb .sch-empty { margin: 12px; }

/* неделя: компактная сетка «люди × 7 дней» */
.mb-week { margin: 8px 0 0; background: var(--surface); border-top: 1px solid var(--line); }
.mb-wgrid { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: var(--surface); }
.mb-wgrid th, .mb-wgrid td { border-bottom: 1px solid var(--line); padding: 0; height: 50px; font-weight: 400; }
.mb-wgrid thead th { position: sticky; top: calc(var(--sat) + var(--bar-h)); z-index: 2; background: var(--head); text-align: center; font-size: 10.5px; color: var(--muted); font-weight: 600; border-bottom-color: var(--line-2); }
.mb-wgrid thead th b { display: block; font-size: var(--t-sm); color: var(--ink); line-height: 1.1; }
.mb-wgrid thead th.today { background: var(--signal-soft); box-shadow: inset 0 3px 0 var(--signal); }
.mb-wgrid col.who { width: 92px; }
.mb-wgrid tbody th { text-align: left; padding: 0 4px 0 10px; font-size: var(--t-xs); font-weight: 600; background: var(--surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-wgrid tbody th small { display: block; font-weight: 500; color: var(--muted); font-size: 10px; }
.mb-wgrid td { text-align: center; vertical-align: middle; cursor: pointer; }
.mb-wgrid td.today { background: #FFFDF6; }
.mb-wgrid .c { display: block; margin: 3px 2px; min-height: 44px; border-radius: 4px; background: var(--rc); color: var(--rt, #fff); font-size: 10.5px; font-weight: 700; line-height: 44px; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; border: 0; width: calc(100% - 4px); padding: 0; font-family: inherit; cursor: pointer; }
.mb-wgrid .c.draft { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--rc) 25%, #fff) 0 4px, #fff 4px 8px); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rc); }
.mb-wgrid .c.off { background: var(--off-soft); color: var(--off); box-shadow: inset 0 0 0 1px #B78BCB; }
.mb-wgrid .c.req { background: var(--signal-soft); color: #8A5A00; box-shadow: inset 0 0 0 1px #F3CF7A; }
.mb-wgrid .c.late { box-shadow: inset 0 -3px 0 var(--warn); }
.mb-wgrid .c.miss { box-shadow: inset 0 -3px 0 var(--err); }
.mb-wgrid .c.live { box-shadow: inset 0 -3px 0 var(--live); }
.mb-wgrid tr.grp th { background: #EEF0F2; height: 26px; font-size: 10.5px; font-weight: 700; color: var(--ink-2); }
.mb-wgrid tfoot td, .mb-wgrid tfoot th { background: var(--head); font-size: 10.5px; font-weight: 600; color: var(--ink-2); height: 30px; border-top: 1px solid var(--line-2); text-align: center;
  position: sticky; bottom: var(--mb-bottom); z-index: 2; }
.mb-wgrid tfoot th { text-align: left; padding-left: 10px; }

/* ── Люди ────────────────────────────────────────────────────────── */
body.mb #view-staff > .row-add.actions { display: none; }
body.mb #view-staff > .card:last-of-type { background: none; border: 0; padding: 0; margin: 0; }
body.mb #view-staff .filters { display: none; }
body.mb #mb-filters .filters { display: flex; }
.mb-search { position: sticky; top: calc(var(--sat) + var(--bar-h) + 1px); z-index: 20; background: var(--canvas); padding: 10px 12px 8px; }
.mb-search input { width: 100%; }
body.mb #sf-status { padding: 0 12px 8px; background: none; margin: 0; }
body.mb #sf-status .seg { flex: none; min-height: 44px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--surface); padding: 0 12px; }
body.mb #sf-status .seg.active { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: none; }
body.mb #sf-status { background: none !important; }
body.mb .sf-hint:empty { display: none; }
body.mb .sf-hint { margin: 0 16px 8px; }
body.mb #sf-banner { margin: 0 12px 8px; border-radius: var(--r-lg); background: var(--signal-soft); border: 1px solid #F3CF7A; color: #6E4700; }
body.mb #staff-list .mb-list + .mb-sec { margin-top: 14px; }
body.mb #st-form, body.mb #inv-card { margin: 12px; }

/* ── Карточка сотрудника ─────────────────────────────────────────── */
body.mb #card-box .card-head > .link { display: none; }
body.mb #card-box .card-head { background: var(--surface); border-bottom: 1px solid var(--line); padding: 14px 16px 12px; margin: 0; }
body.mb #card-box .card-head h1 { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.01em; }
body.mb #card-box .stats { margin-top: 10px; }
.mb-jump { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px 12px; background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: calc(var(--sat) + var(--bar-h) + 1px); z-index: 20; }
.mb-jump::-webkit-scrollbar { display: none; }
.mb-jump button { flex: none; min-height: 44px; padding: 0 12px; border-radius: 17px; font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); background: var(--head); border: 0; cursor: pointer; font-family: inherit; }
.mb-jump button.on { background: var(--ink); color: #fff; }
body.mb #card-box > .card { scroll-margin-top: calc(var(--sat) + var(--bar-h) + 56px); }
body.mb #card-box .two { gap: 8px; }

/* ── Отчёты ──────────────────────────────────────────────────────── */
body.mb #view-reports .rep-bar { position: sticky; top: calc(var(--sat) + var(--bar-h) + 1px); z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); padding: 8px 0 8px; margin: 0; }
body.mb #rep-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; background: none; padding: 0 12px; gap: 6px; }
body.mb #rep-tabs::-webkit-scrollbar { display: none; }
body.mb #rep-tabs .seg { flex: none; border-radius: 17px; border: 1px solid var(--line-2); background: var(--surface); padding: 0 12px; min-height: 44px; }
body.mb #rep-tabs .seg.active { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: none; }
body.mb #view-reports .rep-period { padding: 8px 12px 0; flex-wrap: wrap; gap: 8px; }
body.mb #rep-xlsx, body.mb #lr-xlsx, body.mb #lr-csv { display: none; }
body.mb .per-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; }
body.mb .per-ctl .segmented { flex: 1 1 100%; }
body.mb .per-nav { display: flex; align-items: center; gap: 4px; width: 100%; justify-content: space-between; }
body.mb .per-nav .inp { flex: 1; min-width: 0; }
body.mb #rep-box { margin: 0; border: 0; border-radius: 0; padding: 0 0 12px; background: none; }
body.mb #rep-box > .tbl-scroll, body.mb #rep-box > table, body.mb #rep-box > p, body.mb #rep-box > details, body.mb #rep-box > .note { margin-left: 12px; margin-right: 12px; }
.mb-sortbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; }
.mb-sortbar .grow { flex: 1; }
.mb-sortbar select { appearance: none; -webkit-appearance: none; min-height: 44px; border-radius: 22px; border: 1px solid var(--ink); background: var(--ink); color: #fff;
  font: 600 13px/1 "Inter", sans-serif; padding: 0 30px 0 12px; background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 15px) 19px, calc(100% - 10px) 19px; background-size: 5px 5px; background-repeat: no-repeat; max-width: 60vw; }
.mb-sortbar .dir, .mb-sortbar .tbl { min-height: 44px; min-width: 44px; border-radius: 22px; border: 1px solid var(--line-2); background: var(--surface); font: 600 13px/1 "Inter", sans-serif; padding: 0 12px; color: var(--ink-2); cursor: pointer; }
.mb-pc { background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 16px; width: 100%; text-align: left; border-top: 0; border-left: 0; border-right: 0; font: inherit; color: var(--ink); cursor: pointer; display: block; }
.mb-pc:last-child { border-bottom: 0; }
.mb-pc .hd { display: flex; align-items: center; gap: 10px; }
.mb-pc .hd .main { flex: 1; min-width: 0; }
.mb-pc .hd b { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-pc .hd small { color: var(--muted); font-size: var(--t-xs); display: block; }
.mb-pc .amt { text-align: right; flex: none; }
.mb-pc .amt b { font-size: var(--t-lg); letter-spacing: -0.01em; }
.mb-pc .amt.warn b { color: var(--warn); }
.mb-pc .nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; }
.mb-pc .nums div { background: var(--head); border-radius: 6px; padding: 5px 7px; min-width: 0; }
.mb-pc .nums span { display: block; font-size: 10.5px; color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-pc .nums b { display: block; font-weight: 600; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-pc .nums .warn b { color: var(--warn); } .mb-pc .nums .err b { color: var(--err); }
.mb-pc .nums .z { color: var(--muted); font-weight: 500; }
.mb-pc .foot { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

/* ── Ещё и Настройки — сгруппированные списки ────────────────────── */
body.mb #view-more > .card.menu { display: none; }
.mb-more-me { display: flex; align-items: center; gap: 12px; }
select.mb-lang { min-height: 44px; font: 600 14px "Inter", sans-serif; color: var(--ink); background-color: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; padding: 0 28px 0 10px; max-width: 46vw; }
.mb-row.danger .main b { color: var(--err); }
body.mb #view-settings.mb-root > .card, body.mb #view-settings.mb-root > .danger-zone { display: none !important; }
body.mb #view-settings.mb-sub > .card:not(.mb-cur), body.mb #view-settings.mb-sub > .danger-zone:not(.mb-cur) { display: none !important; }
body.mb #view-settings.mb-sub > .card.mb-cur > h2:first-child { display: none; }
body.mb #view-settings > .card { padding: 14px 16px; }
body.mb #view-settings.mb-sub > .card.mb-cur { margin-top: 12px; }
body.mb #view-settings .rule { min-height: 52px; border-bottom: 1px solid var(--line); gap: 12px; align-items: center; }
body.mb #view-settings .rule .inp.num { max-width: 96px; }
body.mb .danger-zone.mb-cur { margin: 16px; }

/* ── Мои смены, Мои часы ─────────────────────────────────────────── */
body.mb #view-shifts .shift { border-radius: 0; margin: 0; border: 0; border-bottom: 1px solid var(--line); padding: 10px 16px; min-height: 60px; }
body.mb #shift-list, body.mb #my-requests:not(:empty) { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin: 0 12px 12px; overflow: hidden; }
body.mb #shift-list > p { padding: 16px; margin: 0 !important; }
body.mb #view-shifts .shift.today { border-left: 3px solid var(--signal); padding-left: 13px; background: #FFFDF6; }
body.mb #view-shifts .shift .when { font-size: var(--t-md); }
body.mb #view-shifts .shift:last-child { border-bottom: 0; }
body.mb #scope-switch { margin: 8px 12px; }
body.mb #view-shifts .req-row { margin: 8px 12px; display: flex; gap: 8px; }
body.mb #view-shifts .req-row .link { flex: 1; min-height: 44px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); font-size: var(--t-sm); padding: 0 10px; }
body.mb #shifts-export-row { display: none !important; }
body.mb #view-hours.mb-on > #mb-hours + .card { display: none; }
body.mb .hday { display: grid; grid-template-columns: 52px 1fr 1fr 56px; gap: 6px; font-size: var(--t-sm); }
body.mb .hday.hhead { text-transform: none; letter-spacing: 0; }
body.mb .hday > :last-child { text-align: right; }
body.mb #view-hours > .card:last-child { padding: 0; overflow: hidden; }
body.mb #view-hours > .card:last-child h2 { padding: 12px 16px; margin: 0; border-bottom: 1px solid var(--line); background: var(--head); font-size: var(--t-sm); }
body.mb .hday { padding: 10px 16px; min-height: 48px; border-bottom: 1px solid var(--line); align-items: center; }
body.mb .hday.hhead { min-height: 34px; background: var(--head); font-size: var(--t-xs); font-weight: 700; color: var(--ink-2); }
.mb-hours-tiles { margin: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.mb-hours-tiles .mb-tiles { border: 0; }
.mb-hours-tiles p { margin: 0; padding: 8px 12px; font-size: var(--t-xs); color: var(--muted); background: var(--surface); border-top: 1px solid var(--line); }

/* прочие экраны — те же поверхности */
body.mb #view-structure .card, body.mb #view-rating .card { margin: 12px; }
body.mb .rt-tops { margin: 0; }
body.mb #notices .card { margin: 12px; }
body.mb .stats .stat { background: var(--head); border-radius: 8px; }
body.mb .att { min-height: 52px; }
body.mb #sch-empty .btn { min-height: 44px; }

/* узкий телефон */
@media (max-width: 374px) {
  body.mb .mb-tiles b { font-size: 18px; }
  body.mb .mb-tl { grid-template-columns: 96px 1fr; }
  body.mb .mb-pc .nums { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { body.mb * { transition: none !important; scroll-behavior: auto !important; } }

/* 26.10.2026: явка разошлась со сменой — красная точка в углу смены (неделя) и у полосы (сегодня) */
.mb-wgrid .c.drift { position: relative; }
.mb-wgrid .c.drift::after { content: ""; position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; border-radius: 50%;
  background: #DC2626; box-shadow: 0 0 0 1.5px #fff; }
.mb-tl .flag.drift { background: transparent; padding: 0; }