/* Sprintup · наша админка (skelet/29, экран 30). Токены — из дизайн-системы продукта (ui/design/tokens.css + komnaty.css:
   нейтральная база «Комнат», шрифт, радиусы, отступы, тёмная и светлая тема); клубный каталог ui/ хост ops не отдаёт — поэтому копия здесь.
   Рабочий инструмент: плотнее клубного приложения. Телефон первым (390 px, кнопки ≥ 44 px), с 1024 px — боковое меню и две колонки.
   У каждого раздела свой цвет (--room): шапка, метка в меню, главная кнопка — чтобы «где я» было видно сразу.
   Синего рядом с жёлтым нет нигде; значки — только свои простые SVG (назад, шеврон, крестик). */

:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 12px; --fs-s: 13.5px; --fs-m: 15px; --fs-l: 18px; --fs-xl: 22px;
  --lh: 1.4;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --r-s: 8px; --r-m: 14px; --r-l: 18px;
  --tap: 44px;
  --nav-h: 60px;

  /* день — нейтральная база «Комнат» */
  --ground: #F4F3EF; --panel: #FFFFFF; --panel-2: #EFEDE7; --rule: #E4E1DA; --rule-2: #D3D0C8;
  --ink: #1B1C1F; --ink-2: #5F636B; --ink-3: #666A72;
  --warn: #9E4500; --warn-bg: #FBEEE3;          /* h 48 — не жёлтый */
  --danger: #B3261E; --danger-bg: #FCEAE8;
  --ok: #1D7A46; --ok-bg: #E4F2E9;
  --focus: #1B1C1F;

  /* цвета разделов (комнаты). Синего нет ни в одном. */
  --c-today: #0F6B66; --c-clubs: #34383F; --c-req: #9B3F64; --c-tar: #A5582A;
  --c-spr: #2F6E4E; --c-inc: #B8342A; --c-health: #5C2B5C; --c-team: #6A4E3A;
  --room: var(--c-clubs); --on-room: #FFFFFF;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #111214; --panel: #1B1C20; --panel-2: #26272C; --rule: #2B2D33; --rule-2: #3A3C44;
    --ink: #EEEDE9; --ink-2: #A9ACB3; --ink-3: #A2A5AC;
    --warn: #F7A07E; --warn-bg: #36241A;
    --danger: #FF8A80; --danger-bg: #3A1F1E;
    --ok: #6FD39A; --ok-bg: #16291E;
    --focus: #EEEDE9;
    --c-today: #0E5B57; --c-clubs: #363C4A; --c-req: #863757; --c-tar: #8A5000;
    --c-spr: #285F43; --c-inc: #9E2E25; --c-health: #52408F; --c-team: #5C4432;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #111214; --panel: #1B1C20; --panel-2: #26272C; --rule: #2B2D33; --rule-2: #3A3C44;
  --ink: #EEEDE9; --ink-2: #A9ACB3; --ink-3: #A2A5AC;
  --warn: #F7A07E; --warn-bg: #36241A;
  --danger: #FF8A80; --danger-bg: #3A1F1E;
  --ok: #6FD39A; --ok-bg: #16291E;
  --focus: #EEEDE9;
  --c-today: #0E5B57; --c-clubs: #363C4A; --c-req: #863757; --c-tar: #8A5000;
  --c-spr: #285F43; --c-inc: #9E2E25; --c-health: #52408F; --c-team: #5C4432;
  color-scheme: dark;
}

/* комната задаётся на body; текст цветом комнаты ночью светлеет */
body.r-today { --room: var(--c-today); } body.r-clubs { --room: var(--c-clubs); } body.r-req { --room: var(--c-req); }
body.r-tar { --room: var(--c-tar); } body.r-spr { --room: var(--c-spr); } body.r-inc { --room: var(--c-inc); }
body.r-health { --room: var(--c-health); } body.r-team { --room: var(--c-team); }
body { --room-text: var(--room); --room-tint: color-mix(in srgb, var(--room) 10%, var(--panel)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { --room-text: color-mix(in oklab, var(--room) 40%, #FFFFFF); --room-tint: color-mix(in srgb, var(--room) 26%, var(--panel)); } }
:root[data-theme="dark"] body { --room-text: color-mix(in oklab, var(--room) 40%, #FFFFFF); --room-tint: color-mix(in srgb, var(--room) 26%, var(--panel)); }

/* ---------- база ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); font-size: var(--fs-m); line-height: var(--lh); color: var(--ink); background: var(--ground);
  -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol { margin: 0; }
h1 { font-size: var(--fs-l); line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: 16px; line-height: 1.3; font-weight: 750; }
h3 { font-size: var(--fs-m); font-weight: 700; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.muted { color: var(--ink-2); } .small { font-size: var(--fs-s); } .xs { font-size: var(--fs-xs); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0; word-break: break-all; }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- каркас: телефон ---------- */
.shell { min-height: 100vh; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); }
.shell.bare { padding-bottom: 0; }
.side { display: none; }
.head { position: sticky; top: 0; z-index: 6; background: var(--room); color: var(--on-room);
  padding: calc(6px + env(safe-area-inset-top, 0px)) var(--s-3) 6px; display: flex; align-items: center; gap: var(--s-2); min-height: 56px; }
.head .ht { flex: 1; min-width: 0; padding-left: 4px; }
.head .crumb { display: block; font-size: var(--fs-xs); font-weight: 700; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; }
.head h1 { font-size: var(--fs-l); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--on-room); }
.head .hb { width: var(--tap); height: var(--tap); flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; background: rgba(255,255,255,.16); color: var(--on-room); border: 0; cursor: pointer; }
.head .hb svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.head .hbtn { min-height: var(--tap); padding: 0 14px; border-radius: 12px; background: rgba(255,255,255,.94); color: var(--room); font-weight: 750;
  border: 0; cursor: pointer; flex: none; display: inline-flex; align-items: center; white-space: nowrap; font-size: 14px; }
:root[data-theme="dark"] .head .hbtn { background: rgba(255,255,255,.9); color: #1B1C1F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .head .hbtn { color: #1B1C1F; } }
.page { padding: var(--s-3) var(--s-3) var(--s-6); max-width: 100%; }
.lead { font-size: var(--fs-s); color: var(--ink-2); margin: 2px 2px var(--s-3); }

/* нижняя панель: 4 главных + «Ещё»; у каждого пункта полоска цвета раздела */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--panel); border-top: 1px solid var(--rule); display: flex; }
.tabbar a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; position: relative;
  font-size: 12.5px; font-weight: 650; color: var(--ink-2); min-height: var(--nav-h); }
.tabbar a::before { content: ""; width: 22px; height: 4px; border-radius: 2px; background: var(--mark, var(--ink-3)); opacity: .45; }
.tabbar a.on { color: var(--ink); font-weight: 800; }
.tabbar a.on::before { opacity: 1; width: 32px; }
.tabbar a .cnt { position: absolute; top: 5px; left: calc(50% + 10px); }
.tabbar a span.lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }

/* счётчик у пункта меню */
.cnt { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11.5px; font-weight: 800; line-height: 20px; text-align: center;
  background: var(--ink); color: var(--panel); font-variant-numeric: tabular-nums; }
.cnt.hot { background: var(--danger); color: #FFFFFF; }
:root[data-theme="dark"] .cnt.hot { color: #1B1C1F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cnt.hot { color: #1B1C1F; } }

/* ---------- широкий экран: боковое меню ---------- */
@media (min-width: 1024px) {
  .shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); padding-bottom: 0; }
  .shell.bare { display: block; }
  .tabbar { display: none; }
  .side { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    padding: var(--s-4) var(--s-3); border-right: 1px solid var(--rule); background: var(--panel); }
  .side .brand { font-weight: 800; font-size: 15px; padding: 6px 10px 2px; }
  .side .brand small { display: block; font-size: var(--fs-xs); color: var(--ink-2); font-weight: 600; margin-bottom: var(--s-3); }
  .side a.it { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 10px; border-radius: 10px; font-weight: 650; color: var(--ink-2); font-size: 14.5px; }
  .side a.it::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--mark); opacity: .55; flex: none; }
  .side a.it:hover { background: var(--panel-2); color: var(--ink); }
  .side a.it.on { background: color-mix(in srgb, var(--mark) 12%, var(--panel)); color: var(--ink); font-weight: 800; }
  .side a.it.on::before { opacity: 1; }
  .side a.it .lbl { flex: 1; }
  .side .me { margin-top: auto; border-top: 1px solid var(--rule); padding-top: var(--s-3); }
  .side .me b { display: block; font-size: 14px; padding: 0 10px; }
  .side .me .muted { font-size: var(--fs-xs); padding: 0 10px 6px; display: block; }
  .side .me a, .side .me button { display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 10px; font-size: 14px; color: var(--ink-2);
    font-weight: 600; background: none; border: 0; width: 100%; text-align: left; cursor: pointer; }
  .side .me a:hover, .side .me button:hover { background: var(--panel-2); color: var(--ink); }
  .head { padding: 10px var(--s-5); min-height: 64px; }
  .head .hb.back-m { display: none; }
  .page { padding: var(--s-4) var(--s-5) var(--s-6); }
  .cols { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
  .cols > .c-list { position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow-y: auto; border-radius: var(--r-l); }
  .cols.wide-left { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); }
  .cols.wide-left > .c-list { position: static; max-height: none; overflow: visible; }
  .narrow { max-width: 760px; }
  .phone-only { display: none !important; }
}
@media (max-width: 1023px) {
  .wide-only { display: none !important; }
  .cols > .c-list.hide-phone { display: none; }
}

/* ---------- карточки, списки, строки ---------- */
.card { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-l); padding: var(--s-3) var(--s-4); }
.card + .card, .card + .blk, .blk + .blk, .blk + .card, .list + .blk, .blk + .list { margin-top: var(--s-3); }
.blk { margin-top: var(--s-4); }
.blk > h2, .bh { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin: 0 2px var(--s-2); min-height: 32px; }
.bh h2 { flex: 1; min-width: 0; }
.bh .muted { font-size: var(--fs-s); }
.list { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-l); overflow: hidden; }
.row { display: flex; align-items: center; gap: var(--s-3); padding: 10px 14px; min-height: 52px; border-top: 1px solid var(--rule); position: relative; }
.row:first-child { border-top: 0; }
a.row:hover { background: color-mix(in srgb, var(--ink) 3%, var(--panel)); }
a.row.on { background: var(--room-tint); }
a.row.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--room); }
.row .g { flex: 1; min-width: 0; }
.row .t { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.row .d { font-size: var(--fs-s); color: var(--ink-2); margin-top: 2px; line-height: 1.35; overflow-wrap: anywhere; }
.row .r { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.row.top { align-items: flex-start; }
.row.wrap { flex-wrap: wrap; }
.chev { width: 18px; height: 18px; flex: none; color: var(--ink-3); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.kv { margin: 0; display: grid; grid-template-columns: minmax(96px, 38%) 1fr; gap: 6px var(--s-3); font-size: var(--fs-s); }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.pair { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 600px) { .pair { grid-template-columns: 1fr 1fr; } }
.stat4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
@media (min-width: 600px) { .stat4 { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-m); padding: 10px 12px; }
.stat b { display: block; font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; font-weight: 800; }
.stat span { display: block; font-size: var(--fs-xs); color: var(--ink-2); margin-top: 3px; font-weight: 600; }
.sep { height: 1px; background: var(--rule); margin: var(--s-3) 0; border: 0; }

/* метки */
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--r-s);
  background: var(--panel-2); color: var(--ink-2); white-space: nowrap; line-height: 1.5; }
.tag.ok { background: var(--ok-bg); color: var(--ok); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.bad { background: var(--danger-bg); color: var(--danger); }
.tag.room { background: var(--room-tint); color: var(--room-text); }
.tag.line { background: transparent; border: 1px solid var(--rule-2); color: var(--ink-2); }
.tags { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 5px; }
.kind { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }

/* светофор: цвет + слово + форма метки (круг, ромб, квадрат) */
.lamp { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 800; padding: 3px 9px 3px 7px; border-radius: var(--r-s); white-space: nowrap; }
.lamp::before { content: ""; width: 10px; height: 10px; flex: none; background: currentColor; }
.lamp.ok { background: var(--ok-bg); color: var(--ok); } .lamp.ok::before { border-radius: 50%; }
.lamp.warn { background: var(--warn-bg); color: var(--warn); } .lamp.warn::before { transform: rotate(45deg) scale(.85); border-radius: 1px; }
.lamp.bad { background: var(--danger-bg); color: var(--danger); } .lamp.bad::before { border-radius: 2px; }

/* таймер: осталось / просрочено */
.due { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 750; padding: 2px 8px; border-radius: var(--r-s);
  background: var(--panel-2); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.due.soon { background: var(--warn-bg); color: var(--warn); }
.due.late { background: var(--danger); color: #FFFFFF; }
:root[data-theme="dark"] .due.late { color: #1B1C1F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .due.late { color: #1B1C1F; } }
.due.done { background: var(--ok-bg); color: var(--ok); }

/* полоска использования лимита */
.bar { height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; margin-top: 6px; }
.bar > i { display: block; height: 100%; background: var(--ink-2); border-radius: 3px; }
.bar.warn > i { background: var(--warn); } .bar.bad > i { background: var(--danger); }

/* ---------- кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); padding: 0 16px; border-radius: var(--r-m);
  border: 1.5px solid var(--rule-2); background: var(--panel); color: var(--ink); font-weight: 750; font-size: 14.5px; cursor: pointer; white-space: nowrap;
  text-align: center; line-height: 1.2; }
.btn:hover { border-color: var(--ink-3); }
.btn:active { transform: scale(.98); }
.btn.pri { background: var(--room); border-color: var(--room); color: var(--on-room); }
.btn.dng { background: var(--danger); border-color: var(--danger); color: #FFFFFF; }
:root[data-theme="dark"] .btn.dng { color: #1B1C1F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.dng { color: #1B1C1F; } }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.full { width: 100%; }
.btn.sm { min-height: var(--tap); padding: 0 12px; font-size: 14px; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .5; cursor: default; pointer-events: none; }
.btns { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.btns.end { justify-content: flex-end; }
.btns.grow > .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; }
.linkish { background: none; border: 0; padding: 0; color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: var(--tap); }
.xbtn { width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 0; background: var(--panel-2); color: var(--ink); cursor: pointer; flex: none; }
.xbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* ---------- поля ---------- */
.f { display: block; margin-top: var(--s-3); }
.f:first-child { margin-top: 0; }
.f > span.l { display: block; font-size: var(--fs-s); font-weight: 650; color: var(--ink); margin-bottom: 5px; }
.f > span.l i { font-style: normal; color: var(--ink-2); font-weight: 500; }
.f > .h { display: block; font-size: var(--fs-xs); color: var(--ink-2); margin-top: 4px; line-height: 1.35; }
.f > .e { display: block; font-size: var(--fs-xs); color: var(--danger); margin-top: 4px; font-weight: 700; }
.in { width: 100%; min-height: var(--tap); padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--rule-2); background: var(--panel); color: var(--ink);
  font-size: 16px; line-height: 1.3; }
.in:focus { border-color: var(--ink); outline: none; }
.in.bad, .bad .in { border-color: var(--danger); }
textarea.in { min-height: 88px; resize: vertical; }
textarea.in.tall { min-height: 220px; }
select.in { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.affix { display: flex; align-items: stretch; }
.affix .in { border-radius: 12px 0 0 12px; min-width: 0; width: auto; flex: 1 1 auto; }
.affix b { flex: none; }
.affix b { display: inline-flex; align-items: center; padding: 0 10px; border: 1.5px solid var(--rule-2); border-left: 0; border-radius: 0 12px 12px 0;
  background: var(--panel-2); color: var(--ink-2); font-weight: 600; font-size: 14px; white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-3); }
.grid2 > .f { margin-top: var(--s-3); }
.grid2 > .f:first-child, .grid2 > .f:nth-child(2) { margin-top: 0; }
.ctr { float: right; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.checks { display: grid; grid-template-columns: 1fr; gap: 0; border: 1.5px solid var(--rule-2); border-radius: 12px; overflow: hidden; background: var(--panel); }
@media (min-width: 560px) { .checks.two { grid-template-columns: 1fr 1fr; } }
.ck { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 8px 12px; border-top: 1px solid var(--rule); cursor: pointer; font-size: 15px; }
.checks > .ck:first-child { border-top: 0; }
@media (min-width: 560px) { .checks.two > .ck:nth-child(2) { border-top: 0; } }
.ck input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--ink); }
.ck .g { flex: 1; min-width: 0; }
.ck small { display: block; color: var(--ink-2); font-size: var(--fs-xs); }
.ck.dis { opacity: .5; }

/* фильтры: поиск + сегменты; сегменты переносятся, горизонтальной прокрутки страницы нет */
.filters { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-3); }
.search { display: flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--rule-2); background: var(--panel); }
.search:focus-within { border-color: var(--ink); }
.search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-2); stroke-width: 2.2; stroke-linecap: round; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 16px; min-height: 41px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg > a, .seg > button { min-height: var(--tap); padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--rule-2); background: var(--panel); font-size: 14px; font-weight: 650;
  color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.seg > .on { background: var(--ink); border-color: var(--ink); color: var(--panel); font-weight: 750; }
.seg > .on .cnt { background: var(--panel); color: var(--ink); }
.seg.tabs2 { display: grid; grid-template-columns: 1fr 1fr; }
.seg.tabs2 > * { justify-content: center; min-height: var(--tap); }
.frow { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.frow > .in { flex: 1 1 160px; width: auto; min-width: 0; }

/* сообщения */
.note { border-radius: var(--r-m); padding: 10px 14px; font-size: var(--fs-s); line-height: 1.4; border-left: 4px solid var(--ink-3); background: var(--panel); border-top: 1px solid var(--rule); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.note b { display: block; margin-bottom: 2px; }
.note.warn { border-left-color: var(--warn); background: var(--warn-bg); border-color: transparent; border-left-color: var(--warn); }
.note.bad { background: var(--danger-bg); border-color: transparent; border-left-color: var(--danger); }
.note.ok { background: var(--ok-bg); border-color: transparent; border-left-color: var(--ok); }
.note ul { margin: 4px 0 0; padding-left: 18px; }
.note + .note { margin-top: var(--s-2); }
.form-err:empty, .form-err-b:empty { display: none; }
.form-err, .form-err-b { scroll-margin-top: 90px; }
.form-err-b { margin-top: var(--s-3); }
.fw { margin-top: var(--s-3); }
.form-err { margin-bottom: var(--s-3); }

/* пусто, загрузка, ошибка */
.empty { text-align: center; padding: var(--s-6) var(--s-4); background: var(--panel); border: 1px dashed var(--rule-2); border-radius: var(--r-l); }
.empty h2 { font-size: var(--fs-l); }
.empty p { color: var(--ink-2); font-size: var(--fs-s); margin: 6px auto 0; max-width: 340px; }
.empty .btns { justify-content: center; margin-top: var(--s-3); }
.sk { display: block; height: 12px; border-radius: 6px; background: var(--panel-2); animation: sk 1.4s ease-in-out infinite; }
.sk.w40 { width: 40%; } .sk.w60 { width: 60%; } .sk.w80 { width: 80%; }
@keyframes sk { 50% { opacity: .5; } }
.skrow { padding: 14px; border-top: 1px solid var(--rule); display: grid; gap: 8px; }
.skrow:first-child { border-top: 0; }

/* таблица-инструмент (широкий экран) */
.tbl-wrap { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-l); overflow: hidden; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { text-align: left; padding: 9px 12px; border-top: 1px solid var(--rule); vertical-align: middle; }
.tbl th { font-size: var(--fs-xs); color: var(--ink-2); font-weight: 750; border-top: 0; background: var(--panel-2); white-space: nowrap; }
.tbl td.n, .tbl th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: color-mix(in srgb, var(--ink) 3%, var(--panel)); }
.tbl td .t { font-weight: 700; }
.tbl td .d { font-size: var(--fs-xs); color: var(--ink-2); }
.tbl tr.up td.n.delta { color: var(--danger); font-weight: 750; }
.tbl tr.down td.n.delta { color: var(--ok); font-weight: 750; }
.tbl tr.same td { color: var(--ink-2); }

/* текст справочника: опубликовано | черновик */
.doc { white-space: pre-wrap; font-size: 14px; line-height: 1.5; background: var(--panel-2); border-radius: 12px; padding: 10px 12px; max-height: 320px; overflow: auto; overflow-wrap: anywhere; }
.diff2 { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 1200px) { .diff2 { grid-template-columns: 1fr 1fr; } }
.diff2 .changed { outline: 2px solid var(--warn); outline-offset: -2px; }

/* ссылка, которую показываем один раз */
.once { border: 2px solid var(--room); border-radius: var(--r-l); padding: var(--s-4); background: var(--panel); }
.once .mono { display: block; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); margin: var(--s-2) 0; user-select: all; }
.qr { background: #FFFFFF; padding: 10px; border-radius: 12px; width: 220px; max-width: 100%; margin: var(--s-2) 0; }
.qr svg { display: block; width: 100%; height: auto; }

/* окно (dialog): снизу на телефоне, по центру на широком */
dialog.sheet { border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0;
  background: var(--panel); color: var(--ink); box-shadow: 0 -8px 40px rgba(0,0,0,.25); }
dialog.sheet::backdrop { background: rgba(10,10,12,.5); }
dialog.sheet form, dialog.sheet .sb { display: flex; flex-direction: column; max-height: 92vh; }
.sh-h { display: flex; align-items: center; gap: var(--s-2); padding: 10px 10px 8px 16px; border-bottom: 1px solid var(--rule); }
.sh-h h2 { flex: 1; min-width: 0; font-size: 17px; }
.sh-b { padding: var(--s-3) var(--s-4); overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.sh-h, .sh-f { flex: none; }
.sh-f { padding: 10px var(--s-4) calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rule); display: flex; gap: var(--s-2); }
.sh-f .btn { flex: 1; }
@media (min-width: 700px) {
  dialog.sheet { margin: auto; width: 520px; border-radius: 20px; max-height: 86vh; }
  dialog.sheet form, dialog.sheet .sb { max-height: 86vh; }
}

/* всплывающее «готово» */
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + 14px + env(safe-area-inset-bottom, 0px)); z-index: 50;
  background: var(--ink); color: var(--panel); padding: 10px 16px; border-radius: 12px; font-weight: 700; font-size: 14px; max-width: calc(100% - 32px); box-shadow: 0 6px 24px rgba(0,0,0,.2); }
@media (min-width: 1024px) { .toast { bottom: 24px; } }

/* экраны без меню: вход, код */
.center { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s-4); }
.center .box { width: 100%; max-width: 440px; }
.center .brandline { font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s-3); }
.center h1 { font-size: var(--fs-xl); margin-bottom: var(--s-2); }
.center p { color: var(--ink-2); }
.steps { margin: var(--s-3) 0; padding-left: 20px; }
.steps li + li { margin-top: 6px; }
.code-in { font-size: 26px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }

/* инциденты */
.inc + .inc { margin-top: var(--s-3); }
.inc .ih { padding: 12px 14px; }
.inc .club { border-top: 1px solid var(--rule); padding: 12px 14px; }
.timers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.timers .tm { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; border-radius: 10px; background: var(--panel-2); min-width: 0; }
.timers .tm small { font-size: 11.5px; color: var(--ink-2); font-weight: 650; }
.timers .tm.late { background: var(--danger-bg); }
.timers .tm.late small { color: var(--danger); }
.timers .tm.done { background: var(--ok-bg); }
.log { margin: 8px 0 0; padding: 0; list-style: none; font-size: var(--fs-s); }
.log li { padding: 5px 0; border-top: 1px dashed var(--rule); display: flex; gap: 8px; }
.log li:first-child { border-top: 0; }
.log time { color: var(--ink-2); flex: none; font-variant-numeric: tabular-nums; font-size: var(--fs-xs); padding-top: 1px; min-width: 76px; }
.addlog { display: flex; gap: var(--s-2); margin-top: 8px; }
.addlog .in { flex: 1; min-width: 0; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* строка-полоса быстрых переходов: одна строка, листается пальцем внутри карточки (страница не прокручивается вбок) */
.jump { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 10px -16px -4px; padding: 0 16px 4px; -webkit-overflow-scrolling: touch; }
.jump::-webkit-scrollbar { display: none; }
.jump > button { flex: none; min-height: var(--tap); padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--rule-2); background: var(--panel); font-size: 14px; font-weight: 650; color: var(--ink); cursor: pointer; white-space: nowrap; }
.hint-code { white-space: nowrap; background: var(--panel-2); padding: 1px 5px; border-radius: 5px; font-family: var(--mono); font-size: 13px; }
/* широкий экран: список слева — фильтры стоят, листается только список */
@media (min-width: 1024px) {
  .cols > .c-list[data-compact], .cols > .c-list.split { display: flex; flex-direction: column; overflow: hidden; }
  .cols > .c-list[data-compact] > [data-rows], .cols > .c-list.split > .scroll { overflow-y: auto; min-height: 0; flex: 1 1 auto; border-radius: var(--r-l); }
  .cols > .c-list[data-compact] .filters, .cols > .c-list.split .filters { flex: none; }
}

/* тёмная тема: полоски разделов в меню светлее, иначе графит «Клубов» не виден */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabbar a::before, :root:not([data-theme="light"]) .side a.it::before { background: color-mix(in oklab, var(--mark) 60%, #FFFFFF); } }
:root[data-theme="dark"] .tabbar a::before, :root[data-theme="dark"] .side a.it::before { background: color-mix(in oklab, var(--mark) 60%, #FFFFFF); }
/* сравнение пакетов: лимит × пакет */
.cmp th, .cmp td { padding: 8px 10px; }
.cmp td:first-child { color: var(--ink-2); }
/* опубликовано | черновик: на узком — переключатель, на широком — рядом */
@media (max-width: 1199px) { .diff2[data-show="pub"] .dc-draft, .diff2[data-show="draft"] .dc-pub { display: none; } }
@media (min-width: 1200px) { .diff-tabs { display: none !important; } }
.md h4 { font-size: 15px; margin: 10px 0 4px; }
.md p { margin: 0 0 6px; }
.md ul, .md ol { margin: 0 0 6px; padding-left: 20px; }
.diff2 > .card { margin-top: 0; }
.f + .grid2, .grid2 + .f, .grid2 + .grid2, .fw + .grid2 { margin-top: var(--s-3); }
/* лента переходов: правый край гаснет — видно, что листается */
.jump { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 40px; }