/* Дополнения к стилям демо-кабинета из app.css: там вкладки и фильтры были кнопками, здесь это ссылки. */
.cab { max-width: 1160px; }
.c-narrow { width: 100%; max-width: 560px; }
.c-login { margin: 8vh auto 0; }
.c-nav a { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 46px; padding: 0 12px; color: var(--muted); font-weight: 500; text-decoration: none; }
.c-nav a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -3px 0 var(--accent); }
.c-chips a { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.c-chips a[aria-current="page"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.c-head form { margin: 0; }
.c-flash { padding: 10px 14px; background: var(--surface); border: 1px solid var(--accent); border-radius: 10px; }
.c-lead-top a { color: inherit; text-decoration: none; }
.c-status { font-size: .8125rem; font-weight: 600; color: var(--muted); }
.c-status.s-new { color: var(--accent); }
.c-acts form { margin: 0; }
.c-form input[type="password"], .c-form input[type="tel"], .c-form input[type="text"] { width: 100%; min-height: 46px; padding: 8px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.c-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.c-dayh { font-size: 1.125rem; font-weight: 700; }
.c-stats4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c-bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 8px; }
.c-bars span { flex: 1; min-height: 2px; background: var(--accent); border-radius: 3px 3px 0 0; }
.c-tablewrap { overflow-x: auto; }
.c-table { width: 100%; border-collapse: collapse; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.c-table th, .c-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; }
.c-table th { color: var(--muted); font-weight: 600; font-size: .8125rem; }
.c-table td small { display: block; color: var(--muted); }
.c-tag { display: inline-block; margin: 0 4px 4px 0; padding: 2px 8px; background: #FDECEC; color: #8B1A1A; border-radius: 999px; font-size: .75rem; }
.c-ok { color: #17693F; font-size: .8125rem; }
.c-meter { display: block; height: 10px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.c-meter i { display: block; height: 100%; background: var(--accent); }
.c-ver { display: grid; gap: 6px; }
.c-ver li { display: flex; justify-content: space-between; gap: 12px; }
code { padding: 2px 6px; background: var(--bg); border-radius: 4px; }
@media (min-width: 768px) {
  .c-stats4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-color-scheme: dark) {
  .c-tag { background: #4A1414; color: #FFB4B4; }
  .c-ok { color: #6FD6A0; }
}
.c-copy { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.c-copy input[type="text"] { flex: 1 1 220px; min-width: 0; }
.c-copy .bk-go { width: auto; min-height: 44px; padding: 0 14px; border-radius: 8px; text-transform: none; }
.c-copy input[type="color"] { width: 64px; height: 44px; padding: 2px; background: none; border: 1px solid var(--line); border-radius: 8px; }
.c-grp { margin-top: 6px; color: var(--muted); font-size: .8125rem; font-weight: 600; }
.c-svclist { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.c-svc { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); }
.c-svc:first-child { border-top: 0; }
.c-svc span { display: grid; gap: 2px; min-width: 0; }
.c-svc b { font-weight: 600; overflow-wrap: anywhere; }
.c-svc small { color: var(--muted); font-size: .8125rem; }
.c-svc .bk-go { flex: 0 0 auto; width: auto; min-height: 40px; padding: 0 14px; border-radius: 10px; text-transform: none; }
.c-form .bk-f [aria-invalid="true"] { border-color: #C81E1E; }
.c-durs { min-width: 0; border: 0; padding: 0; margin: 0; }
.c-durs legend { margin-bottom: 6px; font-size: .875rem; font-weight: 600; }
.c-durlist { display: flex; flex-wrap: wrap; gap: 8px; }
.c-dur { position: relative; }
.c-dur input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.c-dur span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; transition: background-color .16s, border-color .16s, color .16s; }
.c-dur input:checked + span { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.c-dur input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.c-danger { color: #B42318; }
@media (prefers-color-scheme: dark) { .c-danger { color: #FF8A80; } }
/* График: дни — кнопками в ряд, часы — одной парой на все дни или по строке на каждый рабочий день. */
.c-week { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.c-week legend, .c-label { margin-bottom: 8px; padding: 0; font-weight: 600; }
.c-daychips { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.c-daychip { position: relative; }
.c-daychip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.c-daychip span { display: grid; place-items: center; min-height: 44px; color: var(--muted); font-weight: 600; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; transition: background-color .16s, border-color .16s, color .16s; }
.c-daychip input:checked + span { color: var(--on-accent, #fff); background: var(--accent); border-color: var(--accent); }
.c-daychip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.c-same { display: grid; }
.c-same[hidden], [data-split-wrap][hidden], .c-dayrow[hidden] { display: none; }
.c-perday { display: grid; gap: 8px; }
.c-dayrow { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; align-items: center; }
.c-dayname { font-weight: 600; }
.c-times { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; color: var(--muted); }
/* без appearance: none поле времени на iPhone держит свою ширину и наезжает на соседнее */
.c-times input[type="time"] { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 0 10px; color: var(--fg); font: inherit; text-align: center; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; -webkit-appearance: none; appearance: none; }
.c-times input::-webkit-date-and-time-value { text-align: center; }
.c-checks { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
.c-checks legend { margin-bottom: 4px; font-size: .875rem; font-weight: 600; }
.c-media { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; padding-top: 12px; border-top: 1px solid var(--line); }
.c-media-img { display: grid; place-items: center; width: 96px; height: 72px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; color: var(--muted); font-size: .8125rem; }
.c-media-img img { width: 100%; height: 100%; object-fit: contain; }
.c-media-body { display: grid; gap: 6px; }
.c-media-body small { color: var(--muted); }
.c-upload { display: flex; flex-wrap: wrap; gap: 8px; }
.c-upload .bk-go { width: auto; min-height: 44px; padding: 0 16px; }
.c-upload .c-file { flex: 1 1 200px; min-width: 0; max-width: 100%; font-size: .875rem; }
.c-pick { display: none; cursor: pointer; }
/* со скриптом родное поле выбора файла прячем: на телефоне оно широкое и вылезает за край, вместо него одна кнопка */
.js .c-upload .c-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.js .c-pick { display: inline-flex; align-items: center; justify-content: center; }
.js [data-nojs] { display: none; }
.c-upload:focus-within .c-pick { outline: 2px solid var(--accent); outline-offset: 2px; }
.c-media-body form { margin: 0; }
.c-form section, .c-form > .c-stats { margin: 0; }

/* Сайт в кабинете: на телефоне либо список разделов, либо один раздел; на компьютере рядом. */
.c-site2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.c-sections { display: grid; gap: 12px; }
.c-linkbox { display: grid; gap: 8px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.c-seclist { display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.c-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 60px; padding: 10px 14px; color: inherit; text-decoration: none; border-top: 1px solid var(--line); }
.c-sec:first-child { border-top: 0; }
.c-sec span { display: grid; gap: 2px; min-width: 0; }
.c-sec b { font-weight: 600; }
.c-sec small { color: var(--muted); font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-sec.warn small { color: #A15C00; }
.c-sec i { color: var(--muted); font-style: normal; font-size: 1.25rem; }
.c-sec:hover, .c-sec[aria-current="page"] { background: var(--bg); }
.c-sec[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); }
.c-secbody { display: grid; gap: 12px; min-width: 0; }
.c-site2.has-section .c-sections { display: none; }
.c-site2:not(.has-section) .c-secbody { display: none; }
@media (prefers-color-scheme: dark) { .c-sec.warn small { color: #F5B851; } }
@media (min-width: 900px) {
  .c-site2 { grid-template-columns: 340px minmax(0, 1fr); }
  .c-site2.has-section .c-sections, .c-site2:not(.has-section) .c-secbody { display: grid; }
  .c-sections { position: sticky; top: 8px; }
  .c-back { display: none; }
}
.c-confirm { width: min(520px, calc(100vw - 32px)); }
.c-confirm h2 { font-size: 1.125rem; font-weight: 700; margin-bottom: 10px; }
.c-confirm ul { display: grid; gap: 6px; margin: 0 0 14px; padding-left: 18px; list-style: disc; }
.c-confirm .c-acts { justify-content: flex-end; }
.c-who { color: var(--muted); font-size: .875rem; }
.c-head-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.c-mine { display: grid; gap: 10px; }
.c-job { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.c-job .t { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.c-job .t small { display: block; font-size: .8125rem; font-weight: 400; color: var(--muted); }
.c-job b { font-weight: 700; }
.c-job.done { opacity: .55; }
.c-job form { margin: 0; }
.c-job .c-acts .bk-go { min-height: 48px; }
.c-hidden { color: var(--muted); font-size: .875rem; }
.c-note { padding: 10px 14px; background: var(--bg); border-radius: 10px; color: var(--muted); font-size: .875rem; }
.c-staff { display: grid; gap: 10px; }
.c-person { display: grid; gap: 6px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.c-person-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.c-person-top b { font-weight: 700; }
.c-role { padding: 2px 10px; background: var(--bg); border-radius: 999px; font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.c-person small { color: var(--muted); }
.c-person.off { opacity: .6; }
.c-person .c-acts form { margin: 0; }
.c-more summary { cursor: pointer; color: var(--accent); font-size: .9375rem; padding: 4px 0; }
.c-inner { padding: 12px 0 0; border: 0; background: none; }
.c-pass { display: grid; gap: 8px; padding: 12px 14px; background: var(--surface); border: 2px dashed var(--accent); border-radius: 10px; }
.c-pass code { font-size: 1.0625rem; font-weight: 700; letter-spacing: .03em; }
.c-pass .c-copy { gap: 6px 16px; }

/* Каркас кабинета по образцу консоли Yandex Cloud: меню слева по разделам, на телефоне меню снизу. */
:root.cab-app[data-site] { --bg: #F4F5F7; --surface: #FFFFFF; --fg: #1B1F24; --muted: #5E6773; --line: #E2E5E9; --rail: #FFFFFF; --tint: color-mix(in srgb, var(--accent) 10%, var(--surface)); --ease: cubic-bezier(.2, .8, .2, 1); }
@media (prefers-color-scheme: dark) {
  :root.cab-app[data-site]:not([data-theme="light"]) { --bg: #15181C; --surface: #1D2126; --fg: #E6E8EB; --muted: #9AA3AE; --line: #2D333A; --rail: #1A1D22; --tint: color-mix(in srgb, var(--accent) 18%, var(--surface)); }
}
.cab-app body { font-size: .9375rem; }
/* overflow-x: clip режет то, что вылезло за экран, не ломая sticky у меню слева. */
.cab-app, .cab-app body { overflow-x: clip; }
/* двойной тап не увеличивает экран, а щипок двумя пальцами работает: он нужен тем, кто плохо видит */
.cab-app body { touch-action: manipulation; }
/* iOS увеличивает страницу при нажатии на поле со шрифтом мельче 16px, и её потом можно двигать вбок. */
@media (max-width: 767px) {
  .cab-app input, .cab-app select, .cab-app textarea { font-size: 16px; }
  /* родные поля даты и времени на iPhone не сжимаются по сетке, пока у них системное оформление */
  .cab-app input[type="time"], .cab-app input[type="date"] { min-width: 0; -webkit-appearance: none; appearance: none; }
}
.cab-app body::before { background: var(--rail); }
.cab-shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.cab-rail { display: none; }
.cab-main { min-width: 0; padding: 16px var(--gr) calc(96px + env(safe-area-inset-bottom, 0px)) var(--gl); }
.cab-page { display: grid; gap: 14px; max-width: 1160px; }
.cab-top { margin-bottom: 16px; }
.cab-top h1 { font-size: 1.375rem; font-weight: 650; letter-spacing: -.01em; }
.cab-crumb { margin-bottom: 2px; color: var(--muted); font-size: .8125rem; }
.cab-crumb a { color: inherit; text-decoration: none; }
.cab-crumb a:hover { color: var(--accent); }

.cab-rail { flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; width: 240px; overflow: hidden; background: var(--rail); border-right: 1px solid var(--line); transition: width .24s var(--ease); }
.cab-brand { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 16px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; white-space: nowrap; }
.cab-brand i { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-style: normal; font-weight: 700; }
.cab-brand span, .cab-me span { display: grid; min-width: 0; line-height: 1.25; }
.cab-brand b, .cab-me b { overflow: hidden; text-overflow: ellipsis; font-weight: 650; }
.cab-brand small, .cab-me small { color: var(--muted); font-size: .75rem; }
.cab-nav { flex: 1; display: grid; align-content: start; gap: 2px; overflow-y: auto; overflow-x: hidden; padding: 8px; }
.cab-grp { margin: 14px 0 4px 14px; color: var(--muted); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: opacity .16s; }
.cab-grp:first-child { margin-top: 4px; }
.cab-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 12px 0 14px; background: none; border: 0; border-radius: 8px; color: var(--fg); font: inherit; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .16s, color .16s; }
.cab-item:hover { background: var(--bg); }
.cab-item[aria-current="page"] { background: var(--tint); color: var(--accent); font-weight: 600; }
.cab-item:active { transform: scale(.98); }
.cab-ic { flex: 0 0 20px; }
.cab-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; transition: opacity .16s; }
.cab-badge { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .75rem; font-weight: 700; line-height: 1.4; text-align: center; }
.cab-foot { display: grid; gap: 2px; padding: 8px; border-top: 1px solid var(--line); }
.cab-foot form { margin: 0; }
.cab-me { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 10px; white-space: nowrap; }
.cab-ava { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); font-size: .8125rem; font-weight: 600; }
.cab-rail [data-menu-mini] .cab-ic { transition: transform .24s var(--ease); }

@media (min-width: 768px) {
  .cab-shell { grid-template-columns: auto minmax(0, 1fr); }
  .cab-rail { display: flex; }
  .cab-main { padding: 28px 32px 48px; }
  .cab-tabbar { display: none !important; }
  .cab-app.mini .cab-rail { width: 65px; }
  .cab-app.mini .cab-lbl, .cab-app.mini .cab-grp, .cab-app.mini .cab-brand span, .cab-app.mini .cab-me > span + span { opacity: 0; pointer-events: none; }
  .cab-app.mini .cab-badge { position: absolute; top: 3px; left: 28px; min-width: 16px; padding: 0 4px; font-size: .625rem; }
  .cab-app.mini [data-menu-mini] .cab-ic { transform: scaleX(-1); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cab-rail { width: 65px; }
  .cab-lbl, .cab-grp, .cab-brand span, .cab-me > span + span, [data-menu-mini] { opacity: 0; pointer-events: none; }
  .cab-badge { position: absolute; top: 3px; left: 28px; min-width: 16px; padding: 0 4px; font-size: .625rem; }
}

.cab-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--rail); border-top: 1px solid var(--line); }
.cab-tabbar > a, .cab-more summary { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 58px; padding: 6px 2px; color: var(--muted); font-size: .6875rem; text-decoration: none; cursor: pointer; transition: color .16s; }
.cab-tabbar > a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.cab-tabbar .cab-ic { width: 22px; height: 22px; }
.cab-tabbar > a .cab-badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; padding: 0 5px; font-size: .625rem; }
.cab-more summary { list-style: none; }
.cab-more summary::-webkit-details-marker { display: none; }
.cab-more[open] summary { color: var(--fg); }
.cab-more[open]::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(0, 0, 0, .4); animation: cab-fade .2s var(--ease); }
/* Шторка «Ещё» выезжает над нижней панелью: кнопка «Ещё» остаётся видна и закрывает её повторным нажатием. */
.cab-sheet { position: fixed; left: 8px; right: 8px; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); z-index: -1; display: grid; max-height: calc(100dvh - 120px); overflow-y: auto; padding: 4px 0 8px; background: var(--rail); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); animation: cab-pop .22s var(--ease); }
.cab-sheet-h { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 2px 16px; }
.cab-sheet-h b { font-size: 1rem; font-weight: 650; }
.cab-sheet-x { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: var(--muted); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.cab-sheet-x:active { background: var(--tint); }
.cab-sheet-list { display: grid; gap: 2px; padding: 4px 8px; }
.cab-sheet { overscroll-behavior: contain; }
/* пока открыта шторка, страница под затемнением не прокручивается */
.cab-app:has(.cab-more[open]) { overflow: hidden; }
.cab-sheet .cab-item { min-height: 48px; }
.cab-sheet .cab-foot { border-top: 1px solid var(--line); margin-top: 4px; padding: 6px 8px 0; }

.cab-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 1024px) { .cab-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cab-tile { display: grid; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; transition: border-color .16s, box-shadow .2s, transform .2s var(--ease); }
.cab-tile:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: 0 4px 16px rgba(15, 28, 43, .06); transform: translateY(-1px); }
.cab-tile:active { transform: scale(.98); }
.cab-tile span { color: var(--muted); font-size: .8125rem; }
.cab-tile b { font-size: 1.75rem; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cab-tile small { font-size: .8125rem; }
.cab-tile.hot b { color: var(--accent); }
.cab-sec { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.cab-sec h2 { font-size: 1rem; font-weight: 650; }
.cab-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: var(--fg); font-weight: 600; text-decoration: none; transition: background-color .16s, border-color .16s; }
.cab-btn:hover { border-color: var(--accent); }
.cab-rows { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.cab-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; transition: background-color .16s; }
.cab-row:first-child { border-top: 0; }
.cab-row:hover { background: var(--bg); }
.cab-row .t { font-weight: 650; font-variant-numeric: tabular-nums; }
.cab-row .t small { display: block; color: var(--muted); font-size: .75rem; font-weight: 400; }
.cab-row-b { display: grid; min-width: 0; }
.cab-row-b b { font-weight: 600; }
.cab-row-b span { overflow: hidden; color: var(--muted); font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.cab-pill { padding: 2px 10px; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.cab-pill.s-new { background: color-mix(in srgb, #D97706 14%, var(--surface)); color: #B45309; }
.cab-pill.s-confirmed { background: var(--tint); color: var(--accent); }
.cab-pill.s-done { color: #17693F; }
@media (prefers-color-scheme: dark) { .cab-pill.s-new { color: #F5B358; } .cab-pill.s-done { color: #6FD6A0; } }

/* Плавность: переходы между страницами без мигания меню, мягкие нажатия и появление окон. */
@view-transition { navigation: auto; }
.cab-rail { view-transition-name: cab-rail; }
.cab-tabbar { view-transition-name: cab-tabbar; }
.cab-main { view-transition-name: cab-main; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(cab-main) { animation: cab-out .12s ease-in both; }
::view-transition-new(cab-main) { animation: cab-in .24s var(--ease, ease-out) both; }
.cab-main.cab-enter { animation: cab-in .2s var(--ease, ease-out); }
.cab-app .bk-go, .cab-app .c-chip, .cab-app .bk-link { transition: background-color .16s, border-color .16s, color .16s, filter .16s, transform .12s; }
.cab-app .bk-go:active, .cab-app .c-chip:active { transform: scale(.97); }
.cab-app .bk-go.alt { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.cab-app .bk-go.alt:hover { box-shadow: inset 0 0 0 1px var(--accent); filter: none; }
.cab-app .c-lead, .cab-app .c-sec { transition: border-color .16s, background-color .16s; }
.cab-app [aria-busy="true"] { opacity: .65; pointer-events: none; }
.c-confirm[open] { animation: cab-pop .2s var(--ease, ease-out); }
.c-confirm[open]::backdrop { animation: cab-fade .2s ease-out; }
.c-flash { animation: cab-in .3s var(--ease, ease-out); }
@keyframes cab-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes cab-out { to { opacity: 0; } }
@keyframes cab-fade { from { opacity: 0; } }
@keyframes cab-up { from { transform: translateY(100%); } }
@keyframes cab-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .cab-app *, .cab-app *::before, .cab-app *::after, .c-confirm, .c-confirm::backdrop { animation: none !important; transition: none !important; }
}

/* История заявки: лента событий рядом с карточкой. */
.cab-lead { display: grid; gap: 14px; align-items: start; }
@media (min-width: 1024px) { .cab-lead { grid-template-columns: minmax(0, 1fr) 320px; } }
.cab-lead-main { display: grid; gap: 14px; }
.cab-move { display: grid; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.cab-move h2 { font-size: 1rem; font-weight: 650; }
.cab-move details { display: block; }
.cab-move summary { justify-content: center; width: 100%; min-height: 44px; list-style: none; cursor: pointer; }
.cab-move summary::-webkit-details-marker { display: none; }
.cab-move details[open] summary { border-color: var(--accent); background: var(--tint); }
.cab-move form { margin: 0; }
.cab-hist { display: grid; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.cab-hist h2 { font-size: 1rem; font-weight: 650; }
.cab-hist .hint { color: var(--muted); font-size: .8125rem; }
.cab-tl { position: relative; display: grid; gap: 14px; margin: 0; padding: 0 0 0 22px; list-style: none; }
.cab-tl::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.cab-tl li { position: relative; display: grid; gap: 1px; animation: cab-in .3s var(--ease, ease-out) both; }
.cab-tl li::before { content: ""; position: absolute; left: -22px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--muted); }
.cab-tl li.k-confirmed::before { border-color: var(--accent); }
.cab-tl li.k-done::before { border-color: #17693F; background: #17693F; }
.cab-tl li.k-cancelled::before { border-color: #C81E1E; }
.cab-tl b { font-weight: 600; }
.cab-tl span { font-size: .875rem; }
.cab-tl small { color: var(--muted); font-size: .8125rem; }

/* «Ждут решения»: список ждущих, выбранная раскрыта; разобранная строка держится с отметкой и уходит. */
.cab-decide { display: grid; gap: 10px; max-width: 640px; }
.cab-dl { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cab-dl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; min-height: 52px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; transition: border-color .16s, background-color .16s; }
a.cab-dl-row:hover { border-color: var(--accent); background: var(--tint); }
.cab-dl-when { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cab-dl-what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-dl-row small { color: var(--muted); font-size: .8125rem; white-space: nowrap; }
.cab-dl-gone { max-height: 120px; overflow: hidden; animation: cab-gone .45s var(--ease, ease-out) 1.6s forwards; }
.cab-dl-gone .cab-dl-row { overflow: hidden; min-height: 0; border-color: transparent; background: var(--tint); }
.cab-dl-mark { color: #17693F; font-weight: 600; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .cab-dl-mark { color: #6FD39B; } }
@keyframes cab-gone { to { max-height: 0; opacity: 0; margin-bottom: -8px; } }
@media (max-width: 560px) {
  .cab-dl-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cab-dl-what { grid-column: 1 / -1; grid-row: 2; }
}
.cab-queue { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .8125rem; }
.cab-dq { display: grid; gap: 16px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; animation: cab-in .3s var(--ease, ease-out); }
.cab-when { font-size: 1.5rem; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cab-sub { color: var(--muted); }
.cab-facts { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 6px 12px; margin: 0; }
.cab-facts dt { color: var(--muted); }
.cab-facts dd { margin: 0; overflow-wrap: anywhere; }
.cab-dq form { margin: 0; }
.cab-accept { min-height: 52px; font-size: 1rem; }
.cab-dq-more { display: grid; gap: 8px; }
.cab-dq-more details { display: block; }
.cab-dq-more summary { justify-content: center; width: 100%; min-height: 48px; list-style: none; cursor: pointer; }
.cab-dq-more summary::-webkit-details-marker { display: none; }
.cab-dq-more details[open] summary { border-color: var(--accent); background: var(--tint); }
.cab-bad { color: #B42318; }
@media (prefers-color-scheme: dark) { .cab-bad { color: #FF8A80; } }
.cab-choice { display: grid; gap: 8px; margin-top: 10px; animation: cab-in .24s var(--ease, ease-out); }
.cab-choice p { color: var(--muted); font-size: .875rem; }
.cab-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cab-chips .c-chip { cursor: pointer; }
.cab-main > .c-flash { margin-bottom: 14px; }

/* Особый день в календаре: метка у даты и форма под ней. */
.c-special-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--tint); color: var(--accent); font-size: .8125rem; font-weight: 600; vertical-align: middle; }

/* QR-приглашение: код крупно, чтобы камера взяла его с экрана ноутбука. */
.c-invite .c-qr { display: block; width: min(100%, 320px); height: auto; margin: 8px auto; border-radius: 8px; }
.c-invite .c-copy { display: flex; gap: 8px; }
.c-invite .c-copy input { flex: 1; min-width: 0; }

/* «Этот телефон»: два шага — поставить кабинет на экран и включить уведомления. */
.cab-push { display: grid; gap: 10px; padding: 16px; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--accent); border-radius: 12px; }
.cab-steps { display: grid; gap: 14px; margin: 0; padding-left: 22px; list-style: decimal; }
.cab-steps li::marker { font-weight: 650; }
.cab-steps li > * { display: block; margin-top: 6px; }
.cab-steps li > b:first-child { margin-top: 0; }
.cab-steps li > span { color: var(--muted); font-size: .875rem; }
.cab-steps .bk-go { width: auto; padding: 0 18px; }
.cab-steps [hidden], .cab-steps [data-push-state]:empty { display: none; }

/* Переход по кабинету: нажатие видно сразу, а если сеть медленная — тонкая полоска загрузки сверху. */
.cab-tabbar > a, .cab-nav a { -webkit-tap-highlight-color: transparent; }
.cab-tabbar > a:active, .cab-more summary:active { background: var(--tint); }
.cab-nav a:active { background: var(--tint); }
.cab-top h1:focus { outline: none; }
.cab-app.is-loading::after { content: ""; position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); transform-origin: left; animation: cab-load 1.6s .12s cubic-bezier(.2, .8, .2, 1) both; pointer-events: none; }
@keyframes cab-load { from { transform: scaleX(0); } to { transform: scaleX(.9); } }

/* Полоска «Заявки изменились», когда страницу нельзя обновить молча: человек что-то вводит. */
.cab-fresh { position: fixed; z-index: 30; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 16px; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--accent); border-radius: 12px; box-shadow: 0 8px 24px rgb(0 0 0 / .14); white-space: nowrap; animation: cab-pop .24s var(--ease, ease-out); }
.cab-fresh .bk-go { width: auto; min-height: 40px; padding: 0 16px; }
@media (min-width: 768px) { .cab-fresh { bottom: 24px; } }


/* Календарь: лента дней с загрузкой, обзор «пост — строка, время — по ширине» и сетка «часы × посты». */
/* minmax(0, 1fr): без него колонка растягивается по ширине сетки постов, и сетка не листается внутри себя */
.cal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cal-bar { display: flex; align-items: center; gap: 10px; }
/* «Ноябрь 2026 ▾» — это и есть выбор даты: прозрачное поле даты лежит поверх подписи. */
.cal-pick { position: relative; display: flex; flex: 1; align-items: center; gap: 6px; min-width: 0; }
.cal-month { font-weight: 650; white-space: nowrap; }
.cal-month span { color: var(--muted); font-size: .75rem; }
.js .cal-date { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; }
.cal-pick [hidden] { display: none; }
.cal-more { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.cal-more:active { background: var(--tint); }
.cal-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 54px; gap: 6px; overflow-x: auto; margin: 0 calc(-1 * var(--gr, 16px)) 0 calc(-1 * var(--gl, 16px)); padding: 2px var(--gr, 16px) 4px var(--gl, 16px); scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
.cal-strip::-webkit-scrollbar { display: none; }
.cal-d { display: grid; justify-items: center; gap: 2px; padding: 7px 0 5px; color: inherit; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; scroll-snap-align: start; transition: background-color .16s, border-color .16s; }
.cal-d small { color: var(--muted); font-size: .75rem; }
.cal-d b { font-size: 1.0625rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.cal-d .load { width: 26px; height: 4px; overflow: hidden; background: var(--line); border-radius: 2px; }
.cal-d .load i { display: block; height: 100%; background: var(--accent); }
.cal-d .tag { min-height: 12px; color: var(--muted); font-size: .625rem; font-weight: 600; line-height: 12px; }
.cal-d.off { background: var(--bg); }
.cal-d.off b, .cal-d.off small { color: var(--muted); }
.cal-d.special .tag { color: #B45309; }
.cal-d.today { border-color: var(--accent); }
.cal-d[aria-current="date"] { background: var(--accent); border-color: var(--accent); }
.cal-d[aria-current="date"] b, .cal-d[aria-current="date"] small, .cal-d[aria-current="date"] .tag { color: var(--on-accent, #fff); }
.cal-d[aria-current="date"] .load { background: color-mix(in srgb, var(--on-accent, #fff) 30%, transparent); }
.cal-d[aria-current="date"] .load i { background: var(--on-accent, #fff); }
.cal-dayh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cal-dayh h2 { font-size: 1.125rem; font-weight: 650; }
.cal-dayh > span { color: var(--muted); font-size: .875rem; }
.cal-seg { display: inline-grid; grid-auto-flow: column; gap: 2px; justify-self: start; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.cal-seg button { min-height: 36px; padding: 0 14px; color: var(--muted); font-weight: 600; background: none; border: 0; border-radius: 9px; cursor: pointer; }
.cal-seg button[aria-pressed="true"] { color: var(--accent); background: var(--tint); }
.cal-views[data-view="overview"] .cal-gridwrap, .cal-views[data-view="grid"] .cal-over { display: none; }

.cal-over { display: grid; gap: 6px; padding: 10px 12px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.g-head, .g-row { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 8px; align-items: center; }
.g-scale { position: relative; height: 16px; color: var(--muted); font-size: .6875rem; font-variant-numeric: tabular-nums; }
.g-scale i { position: absolute; top: 0; font-style: normal; transform: translateX(-50%); }
.g-scale i:first-child { transform: none; }
.g-scale i:last-child { transform: translateX(-100%); }
.g-post { display: grid; justify-items: start; padding: 4px 6px; text-align: left; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.g-post:active { background: var(--tint); }
.g-post b { font-size: .875rem; font-weight: 600; white-space: nowrap; }
.g-post small { color: var(--muted); font-size: .75rem; }
.g-track { position: relative; height: 40px; overflow: hidden; background-color: var(--bg); background-image: linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: calc(100% / var(--hours, 9)) 100%; border-radius: 8px; }
.g-track[data-track] { cursor: pointer; }
.g-ev { position: absolute; top: 4px; bottom: 4px; display: flex; align-items: center; padding: 0 6px; overflow: hidden; color: var(--on-accent, #fff); font-size: .6875rem; font-weight: 600; text-decoration: none; background: var(--accent); border-radius: 6px; box-shadow: 0 0 0 1px var(--surface); }
.g-ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-ev.s-new { color: #fff; background: #C2410C; }
.g-ev.closed { color: #fff; background: #8A939E; }
.g-ev.s-done { opacity: .55; }
.g-now { position: absolute; top: 0; bottom: 0; width: 2px; background: #E5484D; pointer-events: none; }
.g-nowlabel { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .8125rem; }
.g-nowlabel i { width: 10px; height: 2px; background: #E5484D; }
.g-nowlabel b { color: var(--fg); font-variant-numeric: tabular-nums; }

.cal-gridwrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overscroll-behavior-x: contain; }
.cal-grid { position: relative; display: grid; grid-template-columns: 52px repeat(var(--posts), minmax(108px, 1fr)); grid-template-rows: 40px repeat(var(--rows), 56px); min-width: max-content; }
@media (min-width: 768px) { .cal-grid { grid-template-columns: 56px repeat(var(--posts), minmax(140px, 1fr)); min-width: 0; } }
.cg-corner, .cg-post { position: sticky; top: 0; z-index: 3; display: grid; place-items: center; font-size: .8125rem; font-weight: 600; background: var(--surface); border-bottom: 1px solid var(--line); grid-row: 1; }
.cg-corner { left: 0; z-index: 4; grid-column: 1; }
.cg-t { position: sticky; left: 0; z-index: 2; grid-column: 1; padding: 6px 8px 0 0; color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; text-align: right; background: var(--surface); border-right: 1px solid var(--line); }
.cg-cell { position: relative; padding: 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
button.cg-cell { cursor: pointer; }
button.cg-cell:hover, button.cg-cell:focus-visible { background: var(--tint); outline: none; }
button.cg-cell:hover::after, button.cg-cell:focus-visible::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent); font-size: 1.25rem; }
.cg-ev { z-index: 1; display: grid; align-content: start; gap: 1px; margin: 3px; padding: 6px 8px; overflow: hidden; color: inherit; font-size: .8125rem; line-height: 1.3; text-decoration: none; background: var(--tint); border-left: 3px solid var(--accent); border-radius: 8px; }
.cg-ev b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cg-ev small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.cg-ev.s-new { background: color-mix(in srgb, #C2410C 14%, var(--surface)); border-left-color: #C2410C; }
.cg-ev.closed { color: var(--muted); background: var(--bg); border-left-color: #8A939E; }
.cg-ev.s-done { opacity: .6; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: .8125rem; }
.cal-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; background: var(--accent); border-radius: 3px; }
.cal-legend i.s-new { background: #C2410C; }
.cal-legend i.closed { background: #8A939E; }
.cal-off { display: grid; justify-items: start; gap: 10px; padding: 20px; background: var(--surface); border: 1px dashed var(--line); border-radius: 14px; }
.cal-off p { color: var(--muted); }
.cal-off .bk-go { width: auto; padding: 0 18px; }

/* Шторки кабинета: снизу на телефоне, по центру на компьютере. Закрываются крестиком, тапом мимо и Esc. */
.c-sheet { width: calc(100% - 16px); max-width: 560px; max-height: calc(100dvh - 40px); margin: auto auto calc(8px + env(safe-area-inset-bottom, 0px)); padding: 0; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); overscroll-behavior: contain; }
.c-sheet[open] { animation: cab-pop .22s var(--ease, ease-out); }
.c-sheet::backdrop { background: rgba(0, 0, 0, .4); }
@media (min-width: 768px) { .c-sheet { margin: auto; } }
.c-sheet > * { margin: 0 16px; }
.c-sheet > :last-child { margin-bottom: 16px; }
.sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0 6px; }
.sheet-h b { font-size: 1.0625rem; font-weight: 650; }
.sheet-x { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: var(--muted); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.sheet-x:active { background: var(--tint); }
.sheet-form { display: grid; gap: 12px; }
.sheet-menu { display: grid; }
.sheet-menu form { margin: 0; }
.sheet-menu button { display: grid; gap: 1px; width: 100%; min-height: 56px; padding: 8px 4px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.sheet-menu > :last-child button, .sheet-menu > button:last-child { border-bottom: 0; }
.sheet-menu b { font-weight: 600; }
.sheet-menu small { color: var(--muted); font-size: .8125rem; }
.p-list { display: grid; gap: 6px; }
.p-list > * { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 2px 10px; padding: 10px 12px; color: inherit; font: inherit; text-align: left; text-decoration: none; border-radius: 10px; }
.p-list span { grid-row: span 2; color: var(--muted); font-variant-numeric: tabular-nums; }
.p-list small { color: var(--muted); }
.p-ev { background: var(--tint); border: 0; border-left: 3px solid var(--accent); }
.p-ev.s-new { background: color-mix(in srgb, #C2410C 14%, var(--surface)); border-left-color: #C2410C; }
.p-ev.closed { background: var(--bg); border-left-color: #8A939E; }
.p-free { margin: 0; background: none; border: 1px dashed var(--line); }
button.p-free { cursor: pointer; }
.p-free b { color: var(--accent); font-weight: 600; }