/* ==========================================================================
   Вымпел — визуальная система
   Плотная, спокойная, инженерная. Цвет — только для смысла: виды нарядов,
   статусы, внимание. Шрифты системные — без загрузки, мгновенно.
   ========================================================================== */

:root {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Roboto Mono", monospace;

  --bg: #f6f5f1;
  --side: #efede7;
  --panel: #ffffff;
  --sunk: #f4f3ef;
  --hover: #f1f0eb;
  --ink: #131a23;
  --ink2: #3a4552;
  --mute: #75808c;
  --faint: #a7aeb6;
  --line: #e4e1d9;
  --line2: #efede8;
  --strong: #d3cfc5;

  --brand: #14273d;
  --brand-h: #1f3955;
  --on-brand: #ffffff;
  --signal: #d2402f;
  --accent: #1f5596;
  --accent-bg: rgba(31, 85, 150, .08);
  --ring: rgba(31, 85, 150, .35);

  --bad: #c0362a;
  --bad-bg: #fcebe8;
  --warn: #985a00;
  --warn-bg: #fcf2df;
  --ok: #2d6c42;
  --ok-bg: #e7f2ea;

  --we: #f7f3ea;
  --we-ink: #b0483a;
  --today-col: rgba(31, 85, 150, .045);
  --hc: rgba(31, 85, 150, .055);
  --row-h: rgba(19, 26, 35, .028);
  --hatch: rgba(19, 26, 35, .075);

  --k1-bg: #14273d; --k1-fg: #ffffff;
  --k2-bg: #dde7f3; --k2-fg: #1c3d68;
  --k3-bg: #deede1; --k3-fg: #255633;
  --k4-bg: #b26a14; --k4-fg: #ffffff;
  --k5-bg: #f5e5c6; --k5-fg: #714705;

  --r-sick: #c0362a; --r-leave: #2f68b3; --r-vacation: #2d8452; --r-duty: #74499e; --r-practice: #ad6a12; --r-other: #75808c;

  --g0: #2f62a8; --g1: #2c7a4b; --g2: #a36a12; --g3: #7d4199; --g4: #1d7b7c; --g5: #9a3b3b;

  --sh-1: 0 1px 2px rgba(19, 26, 35, .06);
  --sh-2: 0 4px 16px rgba(19, 26, 35, .08), 0 1px 3px rgba(19, 26, 35, .05);
  --sh-3: 0 24px 60px rgba(19, 26, 35, .18), 0 4px 12px rgba(19, 26, 35, .08);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0d1217;
  --side: #0a0e13;
  --panel: #121920;
  --sunk: #0f151b;
  --hover: #18212a;
  --ink: #e6eaef;
  --ink2: #b3bdc8;
  --mute: #7d8995;
  --faint: #56616c;
  --line: #222c36;
  --line2: #1a222b;
  --strong: #2e3a46;
  --brand: #dde6f1;
  --brand-h: #ffffff;
  --on-brand: #0d1217;
  --accent: #82b2ea;
  --accent-bg: rgba(130, 178, 234, .12);
  --ring: rgba(130, 178, 234, .45);
  --bad: #ef8a7f; --bad-bg: #331d1b;
  --warn: #e0b064; --warn-bg: #2f2516;
  --ok: #8cc79c; --ok-bg: #18291e;
  --we: #151c23;
  --we-ink: #e0897d;
  --today-col: rgba(130, 178, 234, .06);
  --hc: rgba(130, 178, 234, .07);
  --row-h: rgba(255, 255, 255, .03);
  --hatch: rgba(255, 255, 255, .07);
  --k1-bg: #dde6f1; --k1-fg: #0d1217;
  --k2-bg: #20354d; --k2-fg: #b8d1ee;
  --k3-bg: #1d3826; --k3-fg: #a8d7b3;
  --k4-bg: #d9a55a; --k4-fg: #1c1306;
  --k5-bg: #3a2d16; --k5-fg: #e9c98d;
  --r-sick: #ef8a7f; --r-leave: #82b2ea; --r-vacation: #7dc495; --r-duty: #bd9ae0; --r-practice: #e0b064; --r-other: #7d8995;
  --g0: #7ea8e4; --g1: #74c393; --g2: #ddae5f; --g3: #c39ad9; --g4: #6cc5c5; --g5: #e08a8a;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 4px 16px rgba(0, 0, 0, .4);
  --sh-3: 0 24px 60px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --bg: #0d1217; --side: #0a0e13; --panel: #121920; --sunk: #0f151b; --hover: #18212a;
    --ink: #e6eaef; --ink2: #b3bdc8; --mute: #7d8995; --faint: #56616c; --line: #222c36; --line2: #1a222b; --strong: #2e3a46;
    --brand: #dde6f1; --brand-h: #ffffff; --on-brand: #0d1217; --accent: #82b2ea; --accent-bg: rgba(130, 178, 234, .12); --ring: rgba(130, 178, 234, .45);
    --bad: #ef8a7f; --bad-bg: #331d1b; --warn: #e0b064; --warn-bg: #2f2516; --ok: #8cc79c; --ok-bg: #18291e;
    --we: #151c23; --we-ink: #e0897d; --today-col: rgba(130, 178, 234, .06); --hc: rgba(130, 178, 234, .07); --row-h: rgba(255, 255, 255, .03); --hatch: rgba(255, 255, 255, .07);
    --k1-bg: #dde6f1; --k1-fg: #0d1217; --k2-bg: #20354d; --k2-fg: #b8d1ee; --k3-bg: #1d3826; --k3-fg: #a8d7b3; --k4-bg: #d9a55a; --k4-fg: #1c1306; --k5-bg: #3a2d16; --k5-fg: #e9c98d;
    --r-sick: #ef8a7f; --r-leave: #82b2ea; --r-vacation: #7dc495; --r-duty: #bd9ae0; --r-practice: #e0b064; --r-other: #7d8995;
    --g0: #7ea8e4; --g1: #74c393; --g2: #ddae5f; --g3: #c39ad9; --g4: #6cc5c5; --g5: #e08a8a;
    --sh-1: 0 1px 2px rgba(0, 0, 0, .4); --sh-2: 0 4px 16px rgba(0, 0, 0, .4); --sh-3: 0 24px 60px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

/* ---------- основа ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 14px/1.45 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1 { font-size: 26px; font-weight: 600; letter-spacing: -.022em; line-height: 1.15; }
h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: 12px; font-weight: 600; color: var(--mute); letter-spacing: .02em; display: flex; align-items: center; gap: 8px; }
b { font-weight: 600; }
a { color: var(--accent); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
kbd { font: 500 11px/1 var(--mono); padding: 3px 5px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel); color: var(--mute); box-shadow: 0 1px 0 var(--line); }
::selection { background: var(--accent-bg); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ico { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

input, select, textarea {
  width: 100%; min-height: 36px; padding: 7px 11px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, select:hover, textarea:hover { border-color: var(--strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%); background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
input[type="date"] { font-family: var(--mono); font-size: 13px; }
input.num { width: 72px; font-family: var(--mono); text-align: center; }
textarea { resize: vertical; line-height: 1.5; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.muted { color: var(--mute); }
.sm { font-size: 12.5px; }
.r { text-align: right; }
.grow { flex: 1; }
.bad-t { color: var(--bad); }
.warn-t { color: var(--warn); display: flex; align-items: center; gap: 6px; }
.ok-t { color: var(--ok); display: inline-flex; align-items: center; gap: 4px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-s { display: flex; flex-direction: column; gap: 8px; }
.stack-l { display: flex; flex-direction: column; gap: 28px; }
.row { display: flex; gap: 8px; align-items: center; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sp { flex: 1; }
.pad { padding: 12px 10px; }
.tag { display: inline-block; font: 500 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--mute); padding: 3px 5px; border-radius: 4px; background: var(--sunk); border: 1px solid var(--line2); margin-left: 8px; vertical-align: 1px; }
.with-gn, .with-mk { display: inline-flex; align-items: center; gap: 8px; }
.cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font: 600 11px/1 var(--mono); background: var(--sunk); color: var(--ink2); letter-spacing: 0; }
.cnt.bad { background: var(--bad); color: #fff; }
.cnt.warn { background: var(--warn-bg); color: var(--warn); }

/* ---------- кнопки ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font-weight: 500; font-size: 13.5px; white-space: nowrap;
  box-shadow: var(--sh-1); transition: background-color .15s, border-color .15s, color .15s, transform .08s;
}
.btn:hover { border-color: var(--strong); background: var(--hover); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.primary:hover { background: var(--brand-h); border-color: var(--brand-h); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--hover); }
.btn.danger-t { color: var(--bad); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 7px; }
.btn.lg { height: 46px; font-size: 15px; border-radius: 10px; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .6; cursor: default; }
.btn.busy { color: transparent !important; }
.btn.busy::after { content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--mute); border-right-color: transparent; animation: spin .7s linear infinite; }
.btn.primary.busy::after { border-color: var(--on-brand); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.ibtn {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none;
  border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--mute); transition: background-color .15s, color .15s;
}
.ibtn:hover { background: var(--hover); color: var(--ink); }

.link { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 500; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 4px 0; color: var(--mute); font-size: 13px; font-weight: 500; }
.back:hover { color: var(--ink); }

/* ---------- переключатели, чипы, поля ---------- */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: var(--sunk); border: 1px solid var(--line2); flex-wrap: wrap; }
.seg button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 11px; border: 0; border-radius: 6px;
  background: transparent; color: var(--mute); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background-color .15s, color .15s;
}
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: var(--sh-1), 0 0 0 1px var(--line2); }
.seg.sm button { height: 24px; padding: 0 9px; font-size: 12.5px; }
.grp-seg button { min-width: 32px; font-family: var(--mono); }
.grp-seg button:first-child { font-family: var(--sans); }

.chips { display: flex; gap: 6px; align-items: center; }
.chips.wrap { flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 15px;
  border: 1px solid var(--line); background: var(--panel); font-size: 13px; font-weight: 500; color: var(--ink2); transition: all .15s;
}
.chip:hover { border-color: var(--strong); color: var(--ink); }
.chip.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld-l { font-size: 12.5px; font-weight: 500; color: var(--ink2); }
.fld-h { font-size: 12px; color: var(--mute); }
.fld[hidden] { display: none; }

.chk { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; color: var(--ink2); user-select: none; position: relative; }
.chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chk-box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--strong); background: var(--panel); display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: all .15s; flex: none; }
.chk-box .ico { stroke-width: 2.4; }
.chk input:checked + .chk-box { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.chk input:focus-visible + .chk-box { box-shadow: 0 0 0 3px var(--accent-bg); border-color: var(--accent); }

.search { position: relative; display: flex; align-items: center; min-width: 200px; max-width: 280px; flex: 1; }
.search .ico { position: absolute; left: 11px; color: var(--faint); pointer-events: none; }
.search input { padding-left: 34px; height: 36px; background: var(--panel); }

.empty { padding: 56px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.empty-t { font-size: 15px; font-weight: 600; }
.empty-d { color: var(--mute); max-width: 46ch; }
.empty .btn { margin-top: 12px; }

.callout { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 9px; background: var(--sunk); color: var(--ink2); font-size: 13.5px; }
.callout .ico { margin-top: 1px; }
.callout.bad { background: var(--bad-bg); color: var(--bad); }
.callout.ok { background: var(--ok-bg); color: var(--ok); }
.callout.warn { background: var(--warn-bg); color: var(--warn); }
.callout .btn { margin-top: 8px; }
.callout p + p { margin-top: 3px; }

.skel { display: flex; flex-direction: column; gap: 10px; padding: 8px 10px; }
.skel i { height: 14px; border-radius: 5px; background: linear-gradient(90deg, var(--sunk), var(--hover), var(--sunk)); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; }
.skel i:nth-child(3n) { width: 70%; } .skel i:nth-child(3n+2) { width: 88%; }
@keyframes shimmer { to { background-position: -200% 0; } }

details.more > summary { list-style: none; cursor: pointer; color: var(--mute); font-size: 13px; font-weight: 500; padding: 6px 0; display: flex; align-items: center; gap: 6px; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: ""; width: 5px; height: 5px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .15s; margin-right: 2px; }
details.more[open] > summary::before { transform: rotate(45deg); }
details.more > summary:hover { color: var(--ink); }
.cands details.more > summary { padding: 8px 10px; }

dl.kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px 16px; font-size: 13.5px; }
dl.kv dt { color: var(--mute); }
dl.kv.big dd { font-size: 18px; font-weight: 500; }
.form-foot { display: flex; gap: 8px; align-items: center; padding-top: 6px; }

/* ---------- метки ---------- */
.mk {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 20px; padding: 0 4px;
  border-radius: 5px; font: 600 10.5px/1 var(--mono); letter-spacing: .01em; white-space: nowrap; flex: none;
  background: var(--sunk); color: var(--ink2);
}
.mk.k1 { background: var(--k1-bg); color: var(--k1-fg); }
.mk.k2 { background: var(--k2-bg); color: var(--k2-fg); }
.mk.k3 { background: var(--k3-bg); color: var(--k3-fg); }
.mk.k4 { background: var(--k4-bg); color: var(--k4-fg); }
.mk.k5 { background: var(--k5-bg); color: var(--k5-fg); }
.mk.lg { min-width: 38px; height: 30px; font-size: 13px; border-radius: 7px; }
.mk.ab-l { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--hatch) 3px 4px); color: var(--mute); box-shadow: inset 0 0 0 1px var(--line); }
.mk.empty { background: var(--bad-bg); color: var(--bad); border: 0; }
.mk sup { font-size: 8px; margin-left: 1px; }
.gn { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; font: 600 11px/1 var(--mono); color: var(--g0); background: color-mix(in srgb, currentColor 12%, transparent); flex: none; }
.gn.g1 { color: var(--g1); } .gn.g2 { color: var(--g2); } .gn.g3 { color: var(--g3); } .gn.g4 { color: var(--g4); } .gn.g5 { color: var(--g5); }
.pips { display: inline-flex; gap: 3px; align-items: center; }
.pips i { width: 6px; height: 6px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px var(--strong); }
.pips i.on { background: var(--ink2); box-shadow: none; }
.pips i.over { background: var(--bad); box-shadow: none; }

/* ---------- вход ---------- */
body.is-login { background: var(--panel); }
body.leaving .login { opacity: 0; transition: opacity .2s; }
.login { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(400px, 1fr); min-height: 100vh; min-height: 100dvh; }
.login-art {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: 40px 52px; background-color: #11223a; color: #e8edf3;
  background-image: radial-gradient(1100px 600px at 115% -15%, rgba(210, 64, 47, .2), transparent 60%), radial-gradient(900px 520px at -25% 125%, rgba(96, 150, 220, .16), transparent 60%);
}
.la-brand { display: flex; align-items: center; gap: 12px; }
.la-brand .wordmark { font-size: 21px; color: #fff; }
.la-grid { display: grid; gap: 4px; max-width: 620px; width: 100%; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); position: relative; overflow: hidden; }
.la-grid::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent); transform: translateX(-120%); animation: scan 8s 2.6s infinite var(--ease); pointer-events: none; }
@keyframes scan { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(380%); } }
.la-cell { aspect-ratio: 1.15; border-radius: 4px; background: rgba(255, 255, 255, .035); display: flex; align-items: center; justify-content: center; }
.la-cell.we { background: rgba(255, 255, 255, .07); }
.la-cell i.k4 { background: #6b4a1c; color: #f6d39a; }
/* значки пасхалки и вернувшиеся после неё — без CSS-анимации появления, ими управляет JS */
.la-cell i.egg, .la-cell i.back { animation: none; opacity: 1; transform: none; }
.la-cell i { font: 600 10px/1 var(--mono); font-style: normal; width: 84%; height: 66%; border-radius: 4px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.5); animation: cellIn .5s var(--ease) forwards; }
.la-cell i.k1 { background: #e8edf3; color: #11223a; }
.la-cell i.k2 { background: #2b4a72; color: #cfe0f4; }
.la-cell i.k3 { background: #2c4d3a; color: #c5e5cd; }
.la-cell i.k5 { background: #5a4520; color: #f1d9a8; }
@keyframes cellIn { to { opacity: 1; transform: none; } }
.la-copy h2 { font-size: clamp(30px, 3.5vw, 46px); font-weight: 600; letter-spacing: -.035em; line-height: 1.06; color: #fff; }
.la-copy p { margin-top: 18px; max-width: 46ch; color: rgba(232, 237, 243, .68); font-size: 15px; line-height: 1.6; }
.la-foot { font: 500 12px/1 var(--mono); color: rgba(232, 237, 243, .42); letter-spacing: .02em; }
.login-side { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--panel); }
.login-form { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 18px; }
.login-form.shake { animation: shake .4s var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.lf-head { margin-bottom: 8px; }
.lf-head h1 { font-size: 32px; letter-spacing: -.03em; }
.lf-head p { color: var(--mute); margin-top: 10px; line-height: 1.5; }
.login-form input { height: 46px; font-size: 15px; border-radius: 10px; }
.pw { position: relative; }
.pw input { padding-right: 46px; }
.pw .eye { position: absolute; right: 7px; top: 7px; }
.pw .eye.on { color: var(--accent); }
.login-err { color: var(--bad); font-size: 13px; min-height: 18px; margin: -6px 0 -4px; }
.lf-note { color: var(--mute); font-size: 12.5px; text-align: center; margin-top: 4px; }
.login-side { position: relative; }
.lf-sign { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; color: var(--faint); opacity: .5; transition: opacity .3s; cursor: default; user-select: none; }
.lf-sign:hover { opacity: 1; }
.pwr { display: inline-flex; align-items: center; gap: 6px; font: 500 9.5px/1 var(--mono); letter-spacing: .08em; }
.pwr .tk { height: 13px; width: auto; aspect-ratio: 38 / 14.6; overflow: visible; margin-bottom: -2px; }
.pwr .tk path { fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.pwr .tk path.tk-x { stroke: var(--signal); stroke-width: 1.6; }
.lf-sign:hover .tk path { stroke-dasharray: 1; animation: tkDraw 1.1s cubic-bezier(.6, .1, .3, 1) both; }
.lf-sign:hover .tk path:nth-child(2) { animation-delay: .08s; } .lf-sign:hover .tk path:nth-child(3) { animation-delay: .16s; }
.lf-sign:hover .tk path:nth-child(4) { animation-delay: .24s; } .lf-sign:hover .tk path:nth-child(5) { animation-delay: .32s; }
.lf-sign:hover .tk path:nth-child(6) { animation-delay: .4s; } .lf-sign:hover .tk path:nth-child(7) { animation-delay: .5s; }
.lf-sign:hover .tk path:nth-child(8) { animation-delay: .75s; }
@keyframes tkDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.pwr.sm .tk { height: 11px; }
.pop-cap { padding: 7px 10px 5px; color: var(--faint); opacity: .7; user-select: none; }
.pop-cap .pwr { font-size: 9px; }
.wordmark { font-weight: 600; letter-spacing: -.02em; }
.wordmark b { font-family: var(--mono); font-weight: 600; color: var(--signal); margin-left: 1px; }

/* ---------- каркас ---------- */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.side { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 14px; padding: 18px 12px 12px; background: var(--side); border-right: 1px solid var(--line); }
.side-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.side-brand { display: flex; align-items: center; gap: 12px; padding: 4px 4px 14px; color: var(--ink); min-width: 0; flex: 1; border-bottom: 1px solid var(--line); }
.side-brand .logo { border-radius: 10px; flex: none; }
.side-tg { position: absolute; top: 4px; right: -2px; color: var(--faint); opacity: 0; transition: opacity .15s; }
.side:hover .side-tg, .side-tg:focus-visible { opacity: 1; }
.sb-text { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; }
.sb-text .wordmark { font-size: 19px; line-height: 1; letter-spacing: -.03em; }
.sb-unit { display: flex; align-items: center; gap: 6px; font: 600 10.5px/1 var(--mono); color: var(--mute); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.sb-unit i { width: 12px; height: 2px; border-radius: 1px; background: var(--signal); flex: none; }
.side-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 7px 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--mute); font-size: 13px; box-shadow: var(--sh-1); }
.side-search span { flex: 1; text-align: left; }
.side-search:hover { border-color: var(--strong); color: var(--ink2); }
.side-nav { position: relative; display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.nav-i { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; height: 36px; padding: 0 10px; border-radius: 8px; color: var(--ink2); font-size: 13.5px; font-weight: 500; transition: background-color .15s, color .15s; }
.nav-i .ico { color: var(--mute); }
.nav-i:hover { background: var(--hover); color: var(--ink); }
.nav-i.on { color: var(--ink); }
.side-nav .nav-i.on:hover { background: none; }
.nav-i .ico { transition: color .2s, transform .3s var(--ease); }
.nav-i:hover .ico { transform: translateX(1px) scale(1.06); }
.nav-ink { position: absolute; left: 0; right: 0; top: 0; z-index: 0; border-radius: 8px; background: var(--panel); box-shadow: var(--sh-1), 0 0 0 1px var(--line); pointer-events: none; opacity: 0; }
.nav-ink::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 2px 2px 0; background: var(--signal); }
.nav-ink.ready { opacity: 1; transition: transform .42s cubic-bezier(.3, 1.25, .5, 1), height .3s, opacity .2s; }
body.side-min .nav-ink { left: 50%; right: auto; width: 44px; margin-left: -22px; }
body.side-min .nav-ink::before { left: -10px; }
.nav-ink.off { opacity: 0; }
.nav-i.on .ico { color: var(--signal); }
.side-foot { margin-top: auto; display: flex; align-items: center; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.side-foot .side-user { flex: 1; min-width: 0; }
.side-gear { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 9px; color: var(--mute); transition: background-color .15s, color .15s; }
.side-gear .ico { transition: transform .6s var(--ease); }
.side-gear:hover { background: var(--hover); color: var(--ink); }
.side-gear:hover .ico { transform: rotate(60deg); }
.side-gear.on { background: var(--panel); color: var(--signal); box-shadow: var(--sh-1), 0 0 0 1px var(--line); }
.nav-sep { height: 1px; margin: 10px 10px; background: var(--line); }
body.side-min .side-foot { flex-direction: column; border-top: 0; }
body.side-min .nav-sep { width: 24px; margin: 10px auto; }
.side-user { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 9px; border: 0; background: none; text-align: left; color: var(--mute); }
.side-user:hover { background: var(--hover); }
.avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; background: var(--brand); color: var(--on-brand); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.su-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.su-name { color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.su-role { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main { min-width: 0; outline: none; }
.tabbar { display: none; }
.fatal { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }

/* ---------- страницы ---------- */
.page { padding: 30px 36px 60px; max-width: 1400px; }
.page.narrow { max-width: 1060px; }
.pg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.pg-head h1, .ab-title h1 { font-size: 28px; font-weight: 600; letter-spacing: -.025em; }
.pg-head, .ab-title { animation: fadeUp .45s var(--ease) backwards; }
.pg-sub { color: var(--mute); margin-top: 6px; max-width: 68ch; font-size: 14px; line-height: 1.5; }
.pg-acts { display: flex; gap: 8px; }
.tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.sel-auto { width: auto; min-width: 180px; }

/* ---------- всплывающее меню ---------- */
.pop { position: fixed; z-index: 90; min-width: 220px; padding: 5px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--sh-3); animation: popIn .14s var(--ease); }
@keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.pop-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 7px; background: none; text-align: left; font-size: 13.5px; color: var(--ink); }
.pop-item .ico { color: var(--mute); }
.pop-item span { flex: 1; }
.pop-item:hover, .pop-item:focus-visible { background: var(--hover); outline: none; }
.pop-item.danger, .pop-item.danger .ico { color: var(--bad); }
.ico-sp { width: 16px; }
.pop-sep { height: 1px; margin: 5px 4px; background: var(--line2); }

/* ---------- лист и диалог ---------- */
.sh-root { position: fixed; inset: 0; z-index: 60; }
.sh-shade { position: absolute; inset: 0; background: rgba(13, 18, 23, .32); opacity: 0; transition: opacity .2s; }
.sh {
  position: absolute; top: 10px; right: 10px; bottom: 10px; width: min(460px, calc(100% - 20px)); display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-3);
  transform: translateX(24px); opacity: 0; transition: transform .26s var(--ease), opacity .2s;
}
.sh-root.wide .sh { width: min(680px, calc(100% - 20px)); }
.sh-root.open .sh-shade { opacity: 1; }
.sh-root.open .sh { transform: none; opacity: 1; }
.sh-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 16px 16px 24px; border-bottom: 1px solid var(--line2); }
.sh-title { flex: 1; min-width: 0; }
.sh-title h2 { font-size: 19px; letter-spacing: -.015em; }
.sh-sub { color: var(--mute); font-size: 13px; margin-top: 3px; }
.sh-body { flex: 1; overflow-y: auto; padding: 22px 24px 28px; overscroll-behavior: contain; }
.sh-body section > h3, .sh-body .sec-h { margin-bottom: 10px; }
.sec-h { display: flex; align-items: center; justify-content: space-between; }
.sec-h h3 { margin: 0; }

.dlg-root { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 16px; }
.dlg-shade { position: absolute; inset: 0; background: rgba(13, 18, 23, .32); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s; }
.dlg { position: relative; width: min(452px, 100%); overflow: hidden; background: var(--panel); border-radius: 16px; box-shadow: 0 24px 64px rgba(13, 18, 23, .22), 0 0 0 1px var(--line); transform: translateY(10px) scale(.97); opacity: 0; transition: transform .28s cubic-bezier(.2, 1.1, .3, 1), opacity .18s; }
.dlg-root.open .dlg-shade { opacity: 1; }
.dlg-root.open .dlg { transform: none; opacity: 1; }
/* окно подтверждения: значок и вопрос в строку, пояснение, список последствий, кнопки на подложке */
.dlg-body { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 20px; color: var(--ink2); }
.dlg-hd { display: flex; align-items: center; gap: 12px; }
.dlg-hd h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); }
.dlg-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--accent-bg); color: var(--accent); animation: dlgIc .45s cubic-bezier(.3, 1.5, .5, 1) .05s backwards; }
@keyframes dlgIc { from { transform: scale(.5) rotate(-12deg); opacity: 0; } }
.dlg[data-tone="danger"] .dlg-ic { background: var(--bad-bg); color: var(--bad); }
.dlg[data-tone="warn"] .dlg-ic { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.dlg[data-tone="ok"] .dlg-ic { background: var(--ok-bg); color: var(--ok); }
.dlg-t { font-size: 13.5px; line-height: 1.5; color: var(--mute); }
.dlg-body > h3 { font-size: 16.5px; color: var(--ink); font-weight: 600; }
.dlg-pts { display: flex; flex-direction: column; margin: 2px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--ink2); }
.dlg-pts li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; line-height: 1.4; border-top: 1px solid var(--line2); }
.dlg-pts li:last-child { border-bottom: 1px solid var(--line2); }
.dlg-pts li > i { flex: none; width: 6px; height: 6px; margin: 6px 4px 0; border-radius: 2px; background: var(--strong); }
.dlg[data-tone="danger"] .dlg-pts li > i { background: color-mix(in srgb, var(--bad) 55%, transparent); }
.dlg-pts li > .ico { flex: none; margin-top: 1px; color: var(--mute); }
.dlg-warn { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 9px; font-size: 12.5px; line-height: 1.4; color: var(--ink2); background: color-mix(in srgb, var(--warn) 11%, transparent); }
.dlg-warn .ico { flex: none; margin-top: 1px; color: var(--warn); }
.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; background: var(--sunk); border-top: 1px solid var(--line2); }

/* ---------- уведомления ---------- */
.toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 99; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 10px; background: #14273d; color: #fff; box-shadow: var(--sh-3); font-size: 13.5px; font-weight: 500; opacity: 0; transform: translateY(10px); transition: all .25s var(--ease); max-width: calc(100vw - 32px); }
:root[data-theme="dark"] .toast { background: #dde6f1; color: #0d1217; }
.toast.in { opacity: 1; transform: none; }
.toast.ok .ico { color: #7fd39a; }
:root[data-theme="dark"] .toast.ok .ico { color: #2d6c42; }
.toast.err { background: var(--bad); color: #fff; }
.toast.warn .ico { color: #ffc35c; }

/* ---------- быстрый поиск ---------- */
.pal-root { position: fixed; inset: 0; z-index: 97; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.pal-shade { position: absolute; inset: 0; background: rgba(13, 18, 23, .35); animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.pal { position: relative; width: min(560px, 100%); background: var(--panel); border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--sh-3); overflow: hidden; animation: popIn .16s var(--ease); }
.pal-in { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--line2); color: var(--mute); }
.pal-in input { border: 0; box-shadow: none !important; height: 56px; font-size: 16px; padding: 0; background: none; }
.pal-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
.pal-item { display: flex; align-items: center; gap: 12px; width: 100%; height: 42px; padding: 0 12px; border: 0; border-radius: 9px; background: none; text-align: left; color: var(--ink); }
.pal-item .ico { color: var(--mute); }
.pal-item.on { background: var(--hover); }
.pal-l { flex: 1; font-weight: 500; }
.pal-k { font-size: 12px; color: var(--faint); }
.pal-empty { padding: 22px; text-align: center; color: var(--mute); }

/* ==========================================================================
   График
   ========================================================================== */
.mo { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-width: 0; }
.mo-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 14px 20px 14px 22px; }
.mb-where { display: flex; align-items: center; gap: 10px; flex: none; }
.mb-today { width: 34px; height: 34px; margin-left: -8px; }
.mb-view { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; padding-left: 12px; border-left: 1px solid var(--line); }
.mb-grp { gap: 6px; height: 32px; }
.mb-grp .gn { height: 18px; min-width: 18px; }
.mb-search { display: flex; align-items: center; }
.mb-search:not(.open) .search { display: none; }
.mb-search.open .search { width: 190px; animation: fadeUp .18s var(--ease); }
.mb-search.open .mb-sb { display: none; }
.mb-search .search input { height: 32px; }
.mb-sb { width: 34px; height: 34px; }
.icon-seg button { width: 34px; padding: 0; justify-content: center; }
.mo-bar .mo-acts { margin-left: auto; }
.tg { display: inline-flex; align-items: center; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.tg-b { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 100%; border: 0; background: none; color: var(--ink2); transition: background-color .15s, color .15s; }
.tg-b + .tg-b { border-left: 1px solid var(--line2); }
.tg-b:hover { background: var(--hover); color: var(--ink); }
.mb-dem { gap: 5px; padding: 0 11px; }
.mo-bar .mo-acts { gap: 5px; }
.mb-more { width: 34px; height: 34px; }
.lg-list { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink2); }
.lg-list > div { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 8px; }
.lg-list .mk { min-width: 36px; }
.mk.out { font-style: italic; }
.mo-title { display: flex; align-items: center; gap: 4px; }
.mo-title h1 { font-size: 23px; display: flex; align-items: baseline; gap: 9px; white-space: nowrap; letter-spacing: -.03em; padding: 0 2px; min-width: 6.1em; justify-content: center; }
.mo-title .yr { font: 400 16px/1 var(--mono); color: var(--faint); letter-spacing: 0; }
.mo-acts { display: flex; gap: 6px; align-items: center; }

.stage { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; color: var(--ink2); transition: border-color .15s, background-color .15s; }
.stage:hover, .stage.pressed { border-color: var(--strong); background: var(--hover); }
.stage i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.stage.draft i { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); animation: breathe 2.4s ease-in-out infinite; }
.stage.ok i { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.stage b { font-weight: 600; color: var(--ink); }
.stage span { color: var(--mute); font-family: var(--mono); font-size: 12px; }
.stage .ico { color: var(--faint); transition: transform .2s var(--ease); }
.stage.pressed .ico { transform: rotate(180deg); }
@keyframes breathe { 50% { box-shadow: 0 0 0 5px transparent; } }
.btn.issues { color: var(--bad); font-family: var(--mono); font-weight: 600; }
.btn.issues:hover { background: var(--bad-bg); }
.btn.pressed { background: var(--hover); border-color: var(--strong); }


.mo-work { position: relative; flex: 1; min-height: 0; border-top: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.mo-work.blank { background: var(--bg); border-top: 0; overflow: auto; }
.board { position: absolute; inset: 0; overflow: auto; outline: none; overscroll-behavior: contain; scroll-padding: 56px 110px 40px 220px; }
.mo-work.insp-open .board { scroll-padding-right: 460px; }
/* запас справа под инспектор: иначе у конца месяца выбранная клетка оставалась под ним — прокрутить было некуда */
@media (min-width: 761px) { .mo-work.insp-open .board > .mx { margin-right: 392px; } }
.board.is-list { background: var(--bg); padding: 12px; }
.board.slide-next { animation: slideN .32s var(--ease); }
.board.slide-prev { animation: slideP .32s var(--ease); }
@keyframes slideN { from { opacity: 0; transform: translateX(28px); } }
@keyframes slideP { from { opacity: 0; transform: translateX(-28px); } }
.mo-work.blank .board { position: static; overflow: visible; }

/* пустой месяц */
.mo-blank { max-width: 640px; margin: 28px auto; padding: 0 28px 40px; display: flex; flex-direction: column; gap: 16px; }
.mb-art { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; width: 182px; margin-bottom: 8px; }
.mb-art i { aspect-ratio: 1.2; border-radius: 4px; border: 1px dashed var(--strong); animation: fadeUp .5s var(--ease) backwards; }
.mb-art i.we { background: var(--we); }
.mo-blank h2 { font-size: 23px; letter-spacing: -.025em; }
.mb-lead { color: var(--ink2); font-size: 15px; line-height: 1.6; }
.mb-rules { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 4px 0; }
.mb-rules th { text-align: left; font-weight: 600; padding: 10px 16px 10px 0; white-space: nowrap; vertical-align: top; width: 1%; }
.mb-rules td { color: var(--mute); padding: 10px 0; }
.mb-rules tr + tr > * { border-top: 1px solid var(--line); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } }

/* скелет таблицы при первой загрузке */
.mx-skel { padding: 18px 0; display: flex; flex-direction: column; gap: 9px; }
.mx-skel > div { display: flex; gap: 6px; padding-left: 16px; }
.mx-skel i { width: 26px; height: 18px; border-radius: 4px; background: var(--sunk); animation: pulse 1.4s ease-in-out infinite; }
.mx-skel i.n { width: 150px; margin-right: 18px; }
.mx-skel i.m { background: var(--k2-bg); }
@keyframes pulse { 50% { opacity: .45; } }

/* таблица «люди × даты» */
table.mx { border-collapse: separate; border-spacing: 0; font-size: 13px; table-layout: fixed; width: max-content; min-width: 100%; }
.mx col { width: 36px; }
.mx col.c-nm { width: 200px; }
.mx col.c-sum { width: 86px; }
.mx col.we { background: var(--we); }
.mx col.today { background: var(--today-col); }
.mx col.hc { background: var(--hc); }
.mx th, .mx td { padding: 0; border: 0; }
.mx td { height: 30px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--line2); position: relative; }
.mx td.wk, .mx th.dh.wk { box-shadow: inset 1px 0 0 var(--line); }
.mx thead th { position: sticky; top: 0; z-index: 4; background: var(--panel); border-bottom: 1px solid var(--line); height: 50px; transition: box-shadow .2s; }
.board.sy .mx thead th { box-shadow: 0 8px 12px -10px rgba(19, 26, 35, .25); }
.board.sy .mx thead th.dh.wk { box-shadow: inset 1px 0 0 var(--line), 0 8px 12px -10px rgba(19, 26, 35, .25); }
.mx th.dh { cursor: pointer; user-select: none; }
.mx th.dh.we { background: var(--we); }
.mx .dw { display: block; font-size: 10.5px; font-weight: 500; color: var(--faint); line-height: 1; margin-bottom: 5px; }
.mx .dn { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 3px; border-radius: 6px; font: 500 13px/1 var(--mono); color: var(--ink2); transition: background-color .12s, color .12s; }
.mx th.dh.we .dw, .mx th.dh.we .dn { color: var(--we-ink); }
.mx th.dh.past .dn { color: var(--mute); }
.mx th.dh.hc .dn { background: var(--hover); color: var(--ink); }
.mx th.dh.today .dn { background: var(--signal); color: #fff; font-weight: 600; }
.mx th.dh.today .dw { color: var(--signal); font-weight: 600; }
.mx th.dh.sel .dn { background: var(--brand); color: var(--on-brand); }
.mx th.nm { position: sticky; left: 0; z-index: 2; background: var(--panel); text-align: left; font-weight: 400; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line2); transition: box-shadow .2s; }
.board.sx .mx th.nm { box-shadow: 8px 0 12px -10px rgba(19, 26, 35, .28); }
.mx thead th.nm { z-index: 5; border-bottom-color: var(--line); vertical-align: bottom; }
.mx th.corner span { display: block; padding: 0 16px 9px; font-size: 12px; color: var(--mute); font-weight: 500; }
.mx th.nm button { display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; padding: 0 12px 0 16px; border: 0; background: none; text-align: left; color: var(--ink); }
.mx .nm-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx .nm-r { font: 500 9.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.mx th.nm button:hover .nm-t { color: var(--accent); }
.mx tbody tr:hover > td:not(.sum) { background-color: var(--row-h); }
.mx tbody tr:hover > th.nm, .mx tbody tr:hover > td.sum { background: var(--hover); }
.mx tr.sel > th.nm { box-shadow: inset 3px 0 0 var(--accent); background: var(--hover); }
.mx tr.gone .nm-t { color: var(--faint); text-decoration: line-through; }
.mx .mk { cursor: pointer; min-width: 28px; }
.mx td:hover .mk { filter: brightness(1.04); box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--strong); }
.mx td.past .mk { opacity: .5; }
.mx td.past:hover .mk, .mx td.past.sel .mk { opacity: 1; }
.mx .mk.chg::after { content: ""; position: absolute; top: -2px; right: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 1.5px var(--panel); }
.mx td.abs { background-image: repeating-linear-gradient(135deg, transparent 0 4px, var(--hatch) 4px 5px); }
.mx td .ab { font: 500 10px/1 var(--mono); color: var(--mute); }
.mx td.bad .mk { box-shadow: 0 0 0 1.5px var(--panel), 0 0 0 3px var(--bad); }
.mx td.cur { box-shadow: inset 0 0 0 1.5px var(--accent); }
.mx td.sel { box-shadow: inset 0 0 0 2px var(--accent); background-color: var(--accent-bg) !important; }
.board:not(:focus-within) .mx td.cur:not(.sel) { box-shadow: none; }
.mx td.sum, .mx th.sum { position: sticky; right: 0; z-index: 2; background: var(--panel); border-left: 1px solid var(--line); }
.mx thead th.sum { z-index: 5; font-size: 12px; color: var(--mute); font-weight: 500; vertical-align: bottom; padding-bottom: 9px; }
.mx td.sum .sum-n { font: 600 12.5px/1 var(--mono); margin-right: 7px; color: var(--ink); }
.mx td.sum.over .sum-n { color: var(--bad); }
.mx tr.gsec td { height: 40px; background: var(--panel); border-bottom: 1px solid var(--line); text-align: left; }
.mx tr.gsec:not(:first-child) td { border-top: 8px solid var(--bg); }
.gsec-in { position: sticky; left: 0; display: inline-flex; align-items: center; gap: 10px; padding: 0 16px; white-space: nowrap; }
.gsec-in b { font-size: 13.5px; }
.gsec-in > span:not(.gn):not(.gchk) { font-size: 12.5px; color: var(--mute); }
.gchk { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px; background: var(--warn-bg); color: var(--warn); font-weight: 500; font-size: 12px; }
.gchk.ok { background: var(--ok-bg); color: var(--ok); }
.mx tfoot th, .mx tfoot td { position: sticky; bottom: 0; z-index: 3; background: var(--panel); border-top: 1px solid var(--line); height: 34px; }
.mx tfoot th.nm { z-index: 4; }
.foot-l { display: block; padding: 0 16px; font-size: 12.5px; color: var(--bad); font-weight: 500; }
.mx td.none { padding: 48px; color: var(--mute); text-align: left; }
/* раскладка волной после формирования */
.mx.reveal .mk { animation: mkIn .42s var(--ease) backwards; animation-delay: var(--d, 0ms); }
@keyframes mkIn { from { opacity: 0; transform: scale(.4); } }
/* только что изменённое */
.flash { animation: flash 1.6s var(--ease); }
@keyframes flash { 0%, 30% { box-shadow: 0 0 0 2px var(--panel), 0 0 0 6px var(--signal); transform: scale(1.15); } 100% { box-shadow: 0 0 0 2px var(--panel), 0 0 0 2px transparent; } }
td.sl.flash button { animation: flashBg 1.6s var(--ease); }
@keyframes flashBg { 0%, 30% { background: color-mix(in srgb, var(--signal) 18%, transparent); } }

/* таблица «дни × места» */
table.slots { border-collapse: separate; border-spacing: 0; font-size: 13px; width: max-content; min-width: 100%; }
.slots th, .slots td { padding: 0; border-bottom: 1px solid var(--line2); }
.slots thead th { position: sticky; top: 0; z-index: 3; background: var(--panel); height: 46px; padding: 0 12px; text-align: left; font-weight: 500; font-size: 12.5px; color: var(--ink2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.slots thead th + th { box-shadow: inset 1px 0 0 var(--line2); }
.slots th.sl-d { position: sticky; left: 0; z-index: 2; width: 74px; background: var(--panel); border-right: 1px solid var(--line); }
.slots thead th.sl-d { z-index: 4; }
.slots th.sl-d button { display: flex; align-items: baseline; gap: 8px; width: 100%; height: 34px; padding: 0 14px; border: 0; background: none; }
.slots .dn { font: 500 13px/1 var(--mono); min-width: 18px; text-align: right; }
.slots .dw { font-size: 11px; color: var(--faint); }
.slots tr.we td, .slots tr.we th.sl-d { background: var(--we); }
.slots tr.we .dn, .slots tr.we .dw { color: var(--we-ink); }
.slots tr.today th.sl-d { box-shadow: inset 3px 0 0 var(--signal); }
.slots tr.today .dn { color: var(--signal); font-weight: 600; }
.slots tr.wk td, .slots tr.wk th { border-top: 1px solid var(--line); }
.slots td.sl { min-width: 148px; }
.slots td.sl + td.sl, .slots td.sl-none + td.sl { box-shadow: inset 1px 0 0 var(--line2); }
.slots td.sl button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 34px; padding: 0 10px 0 12px; border: 0; background: none; text-align: left; color: var(--ink); white-space: nowrap; }
.slots td.sl button:hover { background: var(--hover); }
.slots tr.past td.sl button { color: var(--mute); }
.slots td.sl.empty .sl-n { color: var(--bad); font-style: italic; }
.slots td.sl.bad button { background: var(--bad-bg); }
.slots td.sl.chg .sl-n::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); margin-left: 6px; vertical-align: 2px; }
.slots td.sl.dim button { opacity: .25; }
.slots td.sl.hit button { background: var(--warn-bg); }
.slots td.sl.sel button { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-bg); }
.slots td.sl-none { background: var(--sunk); }
.slots .sl-x { min-width: 170px; padding: 0 8px; }
.slots .chips { gap: 4px; }
.slots .chip { height: 26px; padding: 0 8px 0 3px; border-radius: 7px; gap: 5px; font-family: var(--mono); font-size: 12px; }
.slots .chip .mk { height: 20px; }
.slots .chip.bad { border-color: var(--bad); }
.slots .chip.add { width: 26px; padding: 0; justify-content: center; opacity: 0; border-style: dashed; color: var(--mute); }
.slots tr:hover .chip.add, .slots .chip.add:focus-visible { opacity: 1; }

/* список по дням (телефон) */
.dl { display: flex; flex-direction: column; gap: 10px; }
.dl-day { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 2px 10px 8px; }
.dl-day.today { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); }
.dl-h { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 10px 4px 6px; border: 0; background: none; text-align: left; }
.dl-h .dn { font: 600 20px/1 var(--mono); }
.dl-h .dw { color: var(--mute); }
.dl-day.we .dn, .dl-day.we .dw { color: var(--we-ink); }
.dl-today { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--signal); }
.dl-rows { display: flex; flex-direction: column; }
.dl-n { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 7px 4px; border-radius: 7px; font-size: 14.5px; text-align: left; border-top: 1px solid var(--line2); }
.dl-n span:not(.gn) { flex: 1; }
.dl-n:hover { background: var(--hover); }
.dl-n.empty span { color: var(--bad); font-style: italic; }
.dl-n.bad { background: var(--bad-bg); }

/* ---------- инспектор: выезжает поверх таблицы ---------- */
.insp {
  position: absolute; z-index: 20; top: 10px; right: 10px; bottom: 10px; width: 372px; max-width: calc(100% - 20px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-3);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(calc(100% + 24px)); visibility: hidden; transition: transform .3s var(--ease), visibility 0s .3s;
}
.mo-work.insp-open .insp { transform: none; visibility: visible; transition: transform .3s var(--ease); }
.ins { display: flex; flex-direction: column; min-height: 100%; animation: fadeUp .22s var(--ease); }
.ih { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; gap: 12px; padding: 16px 12px 14px 18px; background: var(--panel); border-bottom: 1px solid var(--line2); border-radius: 14px 14px 0 0; }
.ih > .mk.lg { margin-top: 1px; }
.ih-t { flex: 1; min-width: 0; }
.ih-t h2 { font-size: 15.5px; line-height: 1.3; }
.ih-t p { color: var(--mute); font-size: 12.5px; margin-top: 2px; }
.ib { padding: 14px 18px 22px; display: flex; flex-direction: column; gap: 16px; }
.is { display: flex; flex-direction: column; gap: 8px; }
.is h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.cap { font-size: 12.5px; color: var(--mute); }
.pad { padding: 12px 10px; }
table.kv-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.kv-t th { text-align: left; font-weight: 400; color: var(--mute); padding: 7px 10px 7px 0; vertical-align: top; white-space: nowrap; }
.kv-t td { padding: 7px 0; text-align: right; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.kv-t tr + tr > * { border-top: 1px solid var(--line2); }
.kv-t tr.warn td { color: var(--warn); }
.kv-t tr.ok td { color: var(--ok); }
.kv-t tr.bad td, .kv-t tr.bad th { color: var(--bad); }
.kv-t.day th, .kv-t.shifts th, .kv-t.duties th { width: 1%; padding-right: 12px; }
.kv-t.day td, .kv-t.shifts td, .kv-t.duties td { text-align: left; }
.kv-t.day td.r, .kv-t.shifts td.r, .kv-t.duties td.r { text-align: right; }
.kv-t.day tr, .kv-t.duties tr { cursor: pointer; }
.kv-t.day tr:hover > *, .kv-t.duties tr:hover > * { background: var(--hover); }
.kv-t.duties th { font-family: var(--mono); font-size: 12.5px; }
.kv-t.duties td:nth-child(2) { width: 1%; padding-right: 10px; }
.kv-t .link { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.pline { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 10px 10px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); text-align: left; color: var(--ink); transition: border-color .15s, background-color .15s; }
.pline:hover { border-color: var(--strong); background: var(--hover); }
.pline > .ico { color: var(--faint); }
.pl-av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; color: var(--g0); background: color-mix(in srgb, currentColor 12%, transparent); }
.pl-av.g1 { color: var(--g1); } .pl-av.g2 { color: var(--g2); } .pl-av.g3 { color: var(--g3); } .pl-av.g4 { color: var(--g4); } .pl-av.g5 { color: var(--g5); }
.pl-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pl-t b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-t span { font-size: 12px; color: var(--mute); }
.pstat { display: flex; align-items: baseline; gap: 8px; }
.pstat b { font-size: 28px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pstat span { color: var(--mute); }
.pstat .pips { margin-left: auto; }
ul.why { list-style: disc; padding-left: 18px; color: var(--ink2); font-size: 13px; display: grid; gap: 4px; }
.iacts { display: flex; gap: 6px; flex-wrap: wrap; }
.lead { font-size: 13.5px; color: var(--ink2); }
.abs-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.date-sm { width: auto; min-height: 30px; height: 30px; padding: 2px 8px; }
.cand-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ib .search { max-width: none; }
.cands { display: flex; flex-direction: column; margin: 0 -8px; }
.cands .callout { margin: 0 8px 8px; }
.cand-h, .cand-r { display: grid; grid-template-columns: minmax(0, 1fr) 40px 44px 34px; gap: 4px; align-items: center; }
.cand-h { padding: 4px 8px 6px; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.cand-h span:not(:first-child) { text-align: right; cursor: help; }
.cand { border-radius: 9px; transition: background-color .15s; }
.cand-r { width: 100%; min-height: 38px; padding: 0 8px; border: 0; background: none; text-align: left; color: var(--ink); border-radius: 9px; }
.cand-r:hover { background: var(--hover); }
.cand-n { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cand-n b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cand-f { text-align: right; font: 500 12.5px/1 var(--mono); color: var(--ink2); }
.best { font: 600 9.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--ok); background: var(--ok-bg); padding: 3px 5px; border-radius: 4px; flex: none; }
.cand.open { background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); }
.cand.open .cand-r:hover { background: none; }
.cand-go { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 10px; animation: fadeUp .18s var(--ease); }
.cand-why { padding: 0 8px 8px 36px; margin-top: -4px; font-size: 12px; color: var(--warn); }
.cand.hard .cand-r { opacity: .45; cursor: not-allowed; }
.cand.hard .cand-why { color: var(--bad); opacity: .8; }
details.demand { border-top: 1px solid var(--line2); padding-top: 14px; }
details.demand > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: var(--accent); }
details.demand > summary::-webkit-details-marker { display: none; }
details.demand[open] > summary { margin-bottom: 12px; }
details.demand .row select { flex: 1; }
.spread { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.spread .cap { margin-right: 2px; }

.ibtn.xs { width: 24px; height: 24px; }
.ilist { display: flex; flex-direction: column; margin: 0 -8px; }
.ilist.tight .irow { min-height: 40px; }
.irow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 8px; border: 0; border-radius: 9px; background: none; text-align: left; color: var(--ink); }
.irow:hover { background: var(--hover); }
.irow > .ico { color: var(--faint); }
.ir-d { font: 500 12.5px/1 var(--mono); color: var(--mute); min-width: 38px; }
.ir-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ir-m b { font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ir-m span { font-size: 12px; color: var(--mute); }
.ir-m .bad-t { color: var(--bad); }
.pp { display: flex; flex-direction: column; gap: 4px; }
.pp .search { max-width: none; }
.pp-list { display: flex; flex-direction: column; }
.pp-item { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: none; text-align: left; }
.pp-item:hover { background: var(--hover); }

/* ---------- всплывающие панели (сводка, этапы, замечания) ---------- */
.pane { position: fixed; z-index: 85; max-height: calc(100vh - 80px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-3); animation: paneIn .2s var(--ease); transform-origin: top right; }
.pane.out { animation: paneOut .14s ease forwards; }
@keyframes paneIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes paneOut { to { opacity: 0; transform: translateY(-4px) scale(.98); } }
.pane.w-360 { width: 360px; transform-origin: top left; }
.pane.w-380 { width: 380px; }
.pane.w-400 { width: 400px; }
.pane-in { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 16px; }
.pane-sec { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line2); }
.pane h4, .pane-h { margin: 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 600; }
.steps { display: flex; flex-direction: column; position: relative; }
.steps li { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.steps li:last-child { padding-bottom: 0; }
.steps li:not(:last-child)::before { content: ""; position: absolute; left: 8px; top: 20px; bottom: 2px; width: 1.5px; background: var(--line); }
.steps li.done:not(:last-child)::before { background: var(--ok); }
.steps i { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid var(--strong); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; background: var(--panel); position: relative; }
.steps i .ico { stroke-width: 2.6; }
.steps li.done i { background: var(--ok); border-color: var(--ok); color: #fff; }
.steps li.cur i { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); background: radial-gradient(circle, var(--accent) 0 3.5px, var(--panel) 4px); }
.steps li.warn i { background: var(--warn); border-color: var(--warn); }
.steps li div { display: flex; flex-direction: column; gap: 2px; }
.steps b { font-size: 13.5px; }
.steps li.todo b { color: var(--mute); font-weight: 500; }
.steps span { font-size: 12.5px; color: var(--mute); }
table.ptab { width: 100%; border-collapse: collapse; font-size: 13px; }
.ptab th { font-size: 11px; font-weight: 500; color: var(--faint); text-align: left; padding: 0 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.ptab td { padding: 7px 0; border-top: 1px solid var(--line2); }
.ptab tr:first-child td { border-top: 0; }
.ptab thead + tbody tr:first-child td { border-top: 1px solid var(--line2); }
.ptab .r, .ptab th.r { text-align: right; }
.ptab tr.over td { color: var(--bad); }
.ptab td.bar-c { width: 50%; padding: 0 12px; }
.hbar { display: block; height: 8px; border-radius: 4px; background: var(--sunk); overflow: hidden; }
.hbar i { display: block; height: 100%; background: var(--k2-fg); opacity: .55; border-radius: inherit; animation: grow .6s var(--ease) backwards; transform-origin: left; }
.ptab tr.over .hbar i { background: var(--bad); opacity: 1; }
@keyframes grow { from { transform: scaleX(0); } }
.sum-top { display: flex; flex-direction: column; gap: 2px; }
.sum-top div { display: flex; align-items: baseline; gap: 6px; }
.sum-top b { font-size: 34px; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1; }
.sum-top div span { font: 500 16px/1 var(--mono); color: var(--faint); }
.sum-top p { color: var(--mute); font-size: 12.5px; }
.chlist { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.chlist li { display: flex; flex-direction: column; gap: 2px; }
.chlist .muted { font-size: 11.5px; }

/* ---------- подсказка ---------- */
.tip { position: fixed; z-index: 92; pointer-events: none; max-width: 280px; padding: 9px 11px; border-radius: 10px; background: #12223a; color: #e9eef4; font-size: 12.5px; box-shadow: var(--sh-3); opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s var(--ease); }
.tip.on { opacity: 1; transform: none; }
:root[data-theme="dark"] .tip { background: #e6ebf1; color: #0d1217; }
.tip-in { display: flex; flex-direction: column; gap: 3px; }
.tip-h { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.tip-h b { font-weight: 600; }
.tip .muted { color: rgba(233, 238, 244, .6); }
.tip .bad-t { color: #ff9d92; }
:root[data-theme="dark"] .tip .bad-t { color: #b4261d; }

/* ---------- формирование ---------- */
.gen { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--panel) 80%, transparent); animation: fade .2s; }
.gen.out { opacity: 0; transition: opacity .25s; }
.gen-in { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.gen-in b { font-size: 16px; margin-top: 14px; }
.gen-in span { color: var(--mute); font-size: 13px; }
.gen-grid { display: grid; grid-template-columns: repeat(7, 22px); gap: 5px; }
.gen-grid i { height: 16px; border-radius: 4px; background: var(--sunk); animation: genCell 1.2s var(--ease) infinite; }
.gen-grid i:nth-child(3n) { --c: var(--k2-bg); } .gen-grid i:nth-child(4n) { --c: var(--k3-bg); } .gen-grid i:nth-child(7n) { --c: var(--k1-bg); }
@keyframes genCell { 0%, 100% { background: var(--sunk); transform: scale(.85); } 40% { background: var(--c, var(--k2-bg)); transform: none; } }

/* ---------- штамп ---------- */
.stamp-root { position: fixed; inset: 0; z-index: 96; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.stamp { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 28px; border: 4px solid var(--signal); border-radius: 12px; color: var(--signal); background: color-mix(in srgb, var(--panel) 85%, transparent); transform: rotate(-9deg); animation: stampIn .45s cubic-bezier(.2, 1.6, .4, 1) both; box-shadow: 0 20px 60px rgba(210, 64, 47, .18); }
.stamp b { font: 700 34px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.stamp span { font: 500 13px/1 var(--mono); letter-spacing: .06em; }
.stamp-root.out .stamp { animation: stampOut .5s ease forwards; }
@keyframes stampIn { from { opacity: 0; transform: rotate(-9deg) scale(2.2); } }
@keyframes stampOut { to { opacity: 0; transform: rotate(-9deg) scale(.96) translateY(-8px); } }

/* ==========================================================================
   Люди
   ========================================================================== */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--sh-1); }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.tbl th { text-align: left; font-size: 12px; font-weight: 500; color: var(--mute); background: var(--panel); padding: 12px 16px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th.r { text-align: right; }
.tbl th.srt { cursor: pointer; user-select: none; }
.tbl th.srt:hover, .tbl th.srt.on { color: var(--ink); }
.tbl th.srt .ico { vertical-align: -3px; margin-left: 2px; }
.tbl th[aria-sort="ascending"] .ico { transform: rotate(180deg); }
.tbl td { padding: 10px 16px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
.tbl tbody tr { cursor: pointer; transition: background-color .1s; }
.tbl tbody tr:hover { background: var(--hover); }
.tbl tbody tr:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.tbl tr.off td { color: var(--mute); }
.tbl tfoot td { color: var(--mute); font-size: 12.5px; border-bottom: 0; }

.who { display: inline-flex; align-items: center; }
.who b { font-weight: 500; }
.month-n { display: inline-flex; align-items: center; gap: 10px; }
.month-n.over b { color: var(--bad); }
.mks { display: inline-flex; gap: 8px; }
.mkc { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ink2); }
.state { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.state i { width: 8px; height: 8px; border-radius: 50%; background: var(--r-other); flex: none; }
.state i.sick { background: var(--r-sick); } .state i.leave { background: var(--r-leave); } .state i.vacation { background: var(--r-vacation); }
.state i.duty { background: var(--r-duty); } .state i.practice { background: var(--r-practice); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line2); border: 1px solid var(--line2); border-radius: 12px; overflow: hidden; }
.kpis > div { background: var(--panel); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.kpis b { font-size: 19px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kpis span { font-size: 12px; color: var(--mute); }
.kpis .pips { margin-top: 4px; }
.strips { display: flex; flex-direction: column; gap: 6px; }
.strip { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 8px; }
.strip-m { font-size: 12.5px; color: var(--ink2); }
.strip-d { display: grid; grid-template-columns: repeat(31, 1fr); gap: 2px; }
.strip-d i { height: 20px; border-radius: 3px; background: var(--sunk); font: 600 8.5px/20px var(--mono); font-style: normal; text-align: center; color: transparent; overflow: hidden; }
.strip-d i.we { background: var(--we); box-shadow: inset 0 0 0 1px var(--line2); }
.strip-d i.today { box-shadow: inset 0 0 0 1.5px var(--signal); }
.strip-d i.abs { background: repeating-linear-gradient(135deg, var(--sunk) 0 3px, var(--hatch) 3px 4px); }
.strip-d i.k1 { background: var(--k1-bg); color: var(--k1-fg); }
.strip-d i.k2 { background: var(--k2-bg); color: var(--k2-fg); }
.strip-d i.k3 { background: var(--k3-bg); color: var(--k3-fg); }
.strip-d i.k4 { background: var(--k4-bg); color: var(--k4-fg); }
.strip-d i.k5 { background: var(--k5-bg); color: var(--k5-fg); }
ul.rows { display: flex; flex-direction: column; }
ul.rows li { display: flex; align-items: center; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line2); font-size: 13px; }
ul.rows li:first-child { border-top: 0; }

/* ==========================================================================
   Журнал
   ========================================================================== */
/* журнал: лента со временем слева, точка с видом действия, «было → стало» */
.lg-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-list { display: flex; flex-direction: column; gap: 28px; transition: opacity .2s; }
.lg-list.busy { opacity: .55; }
.lg-day { position: relative; }
.lg-dh { position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; gap: 10px; padding: 10px 0 8px; margin-bottom: 4px; background: var(--bg); }
.lg-dh b { font: 500 19px/1.1 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.lg-dh span { font-size: 12px; color: var(--faint); }
.lg-feed { position: relative; display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.lg-feed::before { content: ""; position: absolute; left: 63px; top: 14px; bottom: 14px; width: 1px; background: var(--line); }
.lg-i { position: relative; display: grid; grid-template-columns: 44px 40px minmax(0, 1fr); align-items: start; padding: 7px 10px 7px 0; border-radius: 10px; animation: lgIn .45s var(--ease) calc(var(--i, 0) * 30ms) backwards; transition: background-color .15s; }
.lg-i:hover { background: var(--hover); }
@keyframes lgIn { from { opacity: 0; transform: translateY(6px); } }
.lg-i time { padding-top: 6px; font: 500 12px/1 var(--mono); color: var(--mute); text-align: right; }
.lg-dot { position: relative; z-index: 1; justify-self: center; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); color: var(--mute); transition: transform .25s var(--ease); }
.lg-i:hover .lg-dot { transform: scale(1.1); }
.lg-i[data-tone="ok"] .lg-dot { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-bg); }
.lg-i[data-tone="bad"] .lg-dot { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); background: var(--bad-bg); }
.lg-i[data-tone="warn"] .lg-dot { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.lg-i[data-tone="acc"] .lg-dot { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-bg); }
.lg-i[data-tone="ink"] .lg-dot { color: var(--ink2); }
.lg-b { min-width: 0; padding-top: 3px; }
.lg-t { font-size: 13.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.lg-was { color: var(--mute); text-decoration-color: color-mix(in srgb, var(--mute) 60%, transparent); }
.lg-arr { margin: 0 6px; color: var(--faint); }
.lg-now { font-weight: 600; }
.lg-m { display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: 3px; font-size: 12px; color: var(--mute); }
.lg-m span + span::before { content: "·"; margin-right: 12px; color: var(--faint); }
.lg-list > .btn { margin-top: -6px; }
@media (max-width: 760px) {
  .lg-i { grid-template-columns: 38px 34px minmax(0, 1fr); }
  .lg-feed::before { left: 54px; }
  .lg .tools .sp { display: none; }
}

/* ==========================================================================
   Настройки
   ========================================================================== */
.set { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: start; }

.preview { display: inline-flex; }

/* ==========================================================================
   Экран загрузки
   ========================================================================== */
@keyframes mast { from { transform: scaleY(0); } }
@keyframes hoist { from { transform: translateY(104px) scaleX(.6); opacity: 0; } 15% { opacity: 1; } }
@keyframes wave { 50% { transform: skewY(-3deg) scaleX(.97); } }
@keyframes tick { from { opacity: 0; transform: translateY(5px); } }
.main.enter { animation: fadeUp .25s var(--ease); }

/* ==========================================================================
   Адаптация
   ========================================================================== */
body.side-min .app { grid-template-columns: 64px minmax(0, 1fr); }
body.side-min .side { padding: 16px 10px 12px; align-items: center; }
body.side-min .sb-text, body.side-min .side-search span, body.side-min .side-search kbd, body.side-min .nav-i span,
body.side-min .su-text, body.side-min .side-user > .ico:last-child { display: none; }
body.side-min .side-top { flex-direction: column; gap: 10px; }
body.side-min .side-brand { padding: 2px 0; }
body.side-min .side-search { width: 40px; justify-content: center; padding: 0; }
body.side-min .nav-i { width: 44px; justify-content: center; padding: 0; }
body.side-min .side-user { justify-content: center; padding: 6px 0; }
body.side-min .side-tg .ico { transform: scaleX(-1); }
body.side-min .side-tg { opacity: 1; position: static; }
body.side-min .side-brand { border-bottom: 0; padding-bottom: 2px; }
.app { transition: grid-template-columns .25s var(--ease); }

@media (max-width: 1080px) { .hide-md { display: none; } }
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; }
  .login-art { padding: 28px 24px 30px; gap: 24px; }
  .la-grid, .la-foot { display: none; }
  .la-copy h2 { font-size: 28px; }
  .la-copy p { font-size: 14px; margin-top: 12px; }
  .login-side { align-items: flex-start; padding: 32px 24px 48px; }
  .set { grid-template-columns: 1fr; gap: 16px; }

}
@media (max-width: 760px) {
  body { font-size: 15px; }
  .app, body.side-min .app { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .side { display: none; }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line);
  }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; border: 0; background: none; color: var(--mute); font-size: 10.5px; font-weight: 500; }
  .tabbar > a, .tabbar > button { flex: 1 1 0; min-width: 0; }
  .tabbar span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; letter-spacing: -.02em; }
  .tabbar .on { color: var(--ink); }
  .tabbar .on .ico { color: var(--signal); }
  .page { padding: 20px 16px 40px; }
  h1 { font-size: 24px; }
  .pg-head { align-items: flex-start; margin-bottom: 16px; }
  .pg-acts { width: 100%; }
  .pg-acts .btn { flex: 1; }
  .tools .search { max-width: none; flex-basis: 100%; }
  .hide-sm { display: none; }

  .mo { height: calc(100dvh - 62px - env(safe-area-inset-bottom)); }
  .mo-bar { padding: 12px 12px 8px; gap: 8px; }
  .mb-view { order: 3; flex-basis: 100%; padding-left: 0; border-left: 0; }
  /* три строки вместо четырёх: месяц; «сегодня», статус и действия; вид */
  .mb-where { display: contents; }
  .mo-acts .tg a.tg-b { display: none; }   /* печать с телефона не нужна — освобождает место в строке */
  .mo-bar .stage > span { display: none; }   /* номер редакции — в окне статуса */
  .mb-view .search { flex: 1; width: auto; }
  .mb-dem span { display: none; }
  .mo-title { width: 100%; justify-content: space-between; }
  .mo-title h1 { font-size: 22px; min-width: 0; }
  .mo-bar > .sp { display: none; }
  .mo-acts { margin-left: auto; }
  .mx col.c-nm { width: 124px; }
  .mx col { width: 34px; }
  .mx col.c-sum { width: 40px; }
  .mx th.nm button { padding: 0 8px 0 12px; }
  .mx .nm-r, .mx td.sum .nb, .mx th.sum small { display: none; }
  .mx td.sum .sum-n { margin: 0; }
  .mx th.corner span { padding: 0 12px 9px; }
  .gsec-in { padding: 0 12px; }
  .board { scroll-padding: 56px 50px 40px 130px; }
  .insp { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; max-height: 84dvh; border-radius: 16px 16px 0 0; transform: translateY(105%); z-index: 45; }
  .ih { border-radius: 16px 16px 0 0; }
  .ib { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
  .sh { top: auto; left: 0; right: 0; bottom: 0; width: 100% !important; max-height: 92dvh; border-radius: 16px 16px 0 0; transform: translateY(40px); }
  .sh-body { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .pane { left: 8px !important; right: 8px; width: auto !important; }
  .grid2 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .toasts { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .pal-root { padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Печать
   ========================================================================== */
body.is-print { background: #fff; color: #000; }
.print { padding: 16px; }
.print-bar { position: sticky; top: 10px; z-index: 5; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; max-width: 1120px; margin: 0 auto 20px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--sh-2); color: var(--ink); }
.print-bar select { width: auto; }
.pb-t { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 6px; }
.psheet { background: #fff; color: #000; max-width: 1120px; margin: 0 auto 28px; font: 11px/1.35 var(--sans); }
.p-head { position: relative; text-align: center; margin-bottom: 10px; min-height: 64px; }
.p-head h1 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding-top: 8px; }
.p-sub { font-size: 13px; margin-top: 2px; }
.p-approve { position: absolute; right: 0; top: 0; text-align: left; font-size: 11px; line-height: 1.55; }
.p-group .p-head { text-align: left; min-height: 0; }
.p-group .p-head h1 { text-transform: none; font-size: 14px; padding-top: 0; letter-spacing: 0; }
.p-draft { color: #b4261d; font-weight: 700; margin-top: 4px; }
.p-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.p-group .p-table { margin-top: 8px; }
.p-table th, .p-table td { border: 1px solid #000; padding: 2px 4px; text-align: left; white-space: nowrap; }
.p-table th { font-weight: 700; text-align: center; background: #ececec; }
.p-table tr.we td { background: #efefef; }
.p-table sup { font-size: 8px; margin-left: 1px; }
.p-date { width: 46px; font-family: var(--mono); }
.p-list { white-space: normal !important; }
.p-empty { color: #999; }
.p-extra h2 { font-size: 13px; margin-top: 14px; }
.p-extra .p-table { margin-top: 6px; }
.p-matrix th, .p-matrix td { text-align: center; padding: 2px 1px; font-size: 10px; }
.p-matrix td.p-n { text-align: left; padding-left: 4px; white-space: nowrap; font-size: 10.5px; }
.p-matrix th.we, .p-matrix td.we { background: #e9e9e9; }
.p-matrix th .wd { display: block; font-weight: 400; font-size: 8px; }
.p-matrix td.k1 { font-weight: 700; }
.p-legend, .p-foot { margin-top: 8px; font-size: 10px; color: #333; }
@media print {
  @page { size: A4 landscape; margin: 9mm; }
  .no-print { display: none !important; }
  .print { padding: 0; }
  .psheet { max-width: none; margin: 0; }
  .p-group { break-after: page; }
  .p-table tr { break-inside: avoid; }
  .p-table th, .p-table tr.we td, .p-matrix .we { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==========================================================================
   Закрытые дни
   ========================================================================== */
.mx th.dh.lk .dn { color: var(--faint); }
.mx th.dh.lk .dw { display: flex; align-items: center; justify-content: center; gap: 2px; }   /* flex, а не inline-flex: иначе узкие «вт 13» вставали в строку с числом */
.lk-i { stroke-width: 2.4; vertical-align: -1px; color: var(--faint); }
.mx td.lk .mk { opacity: .42; }
.mx td.lk:hover .mk { opacity: .9; }
.mx th.dh.lke, .mx td.lke { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--faint) 55%, transparent); }
.lock-line { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.lock-line .ico { color: var(--mute); }

/* уведомление с действием */
.toast { position: relative; overflow: hidden; pointer-events: auto; }
.toast-act { margin-left: 6px; border: 0; background: rgba(255, 255, 255, .14); color: inherit; font-weight: 600; font-size: 13px; padding: 4px 10px; border-radius: 6px; }
.toast-act:hover { background: rgba(255, 255, 255, .24); }
:root[data-theme="dark"] .toast-act { background: rgba(0, 0, 0, .08); }
.toast-life { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; opacity: .35; transform-origin: left; animation: life linear forwards; }
@keyframes life { to { transform: scaleX(0); } }

/* заступают */
.duty-head { display: flex; flex-direction: column; gap: 10px; }
.duty-body { display: flex; flex-direction: column; gap: 12px; min-height: 120px; }
.kv-t.duty th { width: 1%; padding-right: 12px; }
.kv-t.duty td { text-align: left; font-weight: 400; }
.kv-t.duty td.r { text-align: right; }
.kv-t.duty tr.mine td:nth-child(2) { font-weight: 600; }
.kv-t.duty tr.mine > * { background: var(--accent-bg); }
.duty-acts { flex-wrap: wrap; }

.ps { flex: 1 1 170px; background: var(--panel); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; min-height: 76px; }
.ps b { font-size: 26px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }

.ps span { font-size: 12.5px; color: var(--mute); }
.ps em { font-style: normal; color: var(--ok); }
.ps.warn span { color: var(--warn); }

.tbl.ops td:first-child, .tbl.ops th:first-child { padding-left: 20px; }
.tbl.ops tr:last-child td { border-bottom: 0; }
.op { display: inline-flex; align-items: center; gap: 11px; }

.seen { font-size: 13px; color: var(--mute); }
.seen.on { color: var(--ok); font-weight: 500; }
.seen.on::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 6px; box-shadow: 0 0 0 3px var(--ok-bg); }

.creds { display: flex; flex-direction: column; gap: 10px; }
.cred { border: 1px dashed var(--strong); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.cred > b small { font-size: 12.5px; font-weight: 500; color: var(--mute); }
.cred-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; color: var(--mute); }
.cred code { font: 600 15px/1.3 var(--mono); color: var(--ink); letter-spacing: .02em; }

/* ==========================================================================
   Руководство и наглядные схемы (общие с журналом изменений)
   ========================================================================== */
.uic { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--sh-1); font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.keys { display: inline-flex; gap: 4px; align-items: center; }
.mk.g-bad { box-shadow: 0 0 0 1.5px var(--panel), 0 0 0 3px var(--bad); }
.mk.g-chg { position: relative; }
.mk.g-chg::after { content: ""; position: absolute; top: -2px; right: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 1.5px var(--panel); }
.g-lockm { display: inline-flex; width: 34px; justify-content: center; color: var(--faint); }

.gd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; color: var(--mute); font-size: 13px; }
.gd-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; font-size: 13.5px; color: var(--ink2); }
.gd-legend > div { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 10px; }
.gd-lg-m { display: flex; }
.gd-lg-m .mk { min-width: 36px; }

/* схема в рамке */
.gd-fig { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.gd-fig-in { padding: 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--sunk); overflow-x: auto; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.gd-fig figcaption { font-size: 12.5px; color: var(--mute); line-height: 1.45; }
.gd-mx { border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; font-size: 13px; }
.gd-mx th, .gd-mx td { height: 34px; min-width: 48px; text-align: center; border-left: 1px solid var(--line2); border-top: 1px solid var(--line2); }
.gd-mx thead th { border-top: 0; height: 40px; vertical-align: bottom; padding-bottom: 5px; }
.gd-mx thead th b { display: block; font: 500 12.5px/1 var(--mono); color: var(--ink2); }
.gd-mx .gd-lk { display: block; height: 12px; color: var(--faint); }
.gd-mx thead th.today b { color: #fff; background: var(--signal); border-radius: 4px; padding: 2px 4px; display: inline-block; }
.gd-mx tbody th { text-align: left; padding: 0 14px; font-weight: 500; border-left: 0; min-width: 96px; color: var(--ink); }
.gd-mx thead th:first-child { border-left: 0; }
.gd-mx .lk .mk { opacity: .42; }   /* как в графике: закрытый день — бледные метки, без замков и штриховки */
.gd-mx thead th.lk b { color: var(--faint); }
.gd-mx td.abs { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--hatch) 3px 4px); }
.gd-ab { font: 500 10.5px/1 var(--mono); color: var(--mute); }
.gd-mx td.hl { box-shadow: inset 0 0 0 2px var(--accent); }
.gd-mx td.out { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--hatch) 5px 6px); }
.gd-mx tr.off th { color: var(--mute); font-style: italic; }
.gd-out { font-size: 11.5px; font-style: italic; color: var(--mute); }
.gd-bars { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 520px; }
.gd-bars-r { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 10px; }
.gd-bars-t { font-size: 12px; color: var(--mute); }
.gd-bars-d, .gd-bars-l { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; }
.gd-bars-d span { text-align: center; font: 500 11px/1 var(--mono); color: var(--faint); }
.gd-bars-l { height: 26px; }
.gd-bars-l span { display: flex; align-items: center; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: #fff; background: var(--r-other); white-space: nowrap; overflow: hidden; }
.gd-bars-l .sick { background: var(--r-sick); } .gd-bars-l .leave { background: var(--r-leave); } .gd-bars-l .vacation { background: var(--r-vacation); } .gd-bars-l .practice { background: var(--r-practice); } .gd-bars-l .duty { background: var(--r-duty); }

@media (max-width: 760px) {
  .gd-legend { grid-template-columns: 1fr; }
  .gd-fig-in { padding: 12px; }
}

/* служебные разделы — отдельно, тише */
.nav-i.svc { height: 31px; font-size: 13px; color: var(--mute); }
.nav-i.svc .ico { color: var(--faint); }
.nav-i.svc.on { color: var(--ink); background: var(--panel); box-shadow: var(--sh-1), 0 0 0 1px var(--line); }
.nav-i.svc.on .ico { color: var(--signal); }

/* ==========================================================================
   Устав роты
   ========================================================================== */
:root { --serif: "New York", "Iowan Old Style", "Charter", "Georgia", "Times New Roman", ui-serif, serif; }

@keyframes spinSlow { to { transform: rotate(360deg); } }

.ch-p { font-size: 16px; color: var(--ink2); line-height: 1.6; max-width: 62ch; }

.ch-day { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-day span { min-width: 46px; height: 38px; padding: 0 8px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font: 600 13px/1 var(--mono); background: var(--sunk); color: var(--ink2); animation: mkIn .45s var(--ease) backwards; }
.ch-day span.k1 { background: var(--k1-bg); color: var(--k1-fg); }
.ch-day span.k2 { background: var(--k2-bg); color: var(--k2-fg); }
.ch-day span.k3 { background: var(--k3-bg); color: var(--k3-fg); }

.ch-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1.5px dashed var(--strong); border-radius: 10px; background: none; color: var(--mute); font-weight: 500; font-size: 13.5px; transition: all .15s; }
.ch-add:hover { border-color: var(--accent); color: var(--accent); }

.ch-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ch-group { --gc: var(--g0); position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); text-align: left; color: var(--ink); overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.ch-group.g1 { --gc: var(--g1); } .ch-group.g2 { --gc: var(--g2); } .ch-group.g3 { --gc: var(--g3); } .ch-group.g4 { --gc: var(--g4); } .ch-group.g5 { --gc: var(--g5); }
.ch-group:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--gc) 40%, var(--line)); }
.cg-num { font: 600 46px/1 var(--mono); color: var(--gc); letter-spacing: -.04em; margin-bottom: 8px; }
.ch-group b { font-weight: 600; }
.cg-meta { font-size: 12.5px; color: var(--mute); }
.cg-meta em { font-style: normal; color: var(--warn); }
.cg-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: color-mix(in srgb, var(--gc) 12%, transparent); }
.cg-bar i { display: block; height: 100%; background: var(--gc); animation: grow .7s var(--ease) backwards; transform-origin: left; }
.cg-off { position: absolute; top: 12px; right: 12px; font: 600 9.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.ch-group.off { opacity: .55; }
.ch-group.add { align-items: center; justify-content: center; gap: 8px; border: 1.5px dashed var(--strong); background: transparent; color: var(--mute); min-height: 130px; }
.ch-group.add:hover { color: var(--accent); border-color: var(--accent); box-shadow: none; }

.avatar.role .ico { stroke-width: 1.9; }
.avatar.r-chief .ico, .avatar.r-admin .ico { stroke-width: 1.7; }

.pl-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); align-items: start; gap: 18px; }
.pl-g { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; }
.pl-g > h4 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px 6px; font-size: 12px; font-weight: 600; color: var(--mute); }
.pl-g > h4 span { font-weight: 500; color: var(--faint); }
.pl-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 36px; align-items: center; gap: 14px; min-height: 64px; padding: 8px 8px 8px 16px; cursor: pointer; transition: background-color .15s; }
.pl-row + .pl-row { border-top: 1px solid var(--line2); }
.pl-row:hover { background: var(--hover); }
.pl-row.off { opacity: .5; }
.pl-av { position: relative; display: flex; }
.pl-av .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--sunk); color: var(--ink2); }
.pl-av.on::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--panel); }
.pl-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pl-t b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-t b .tag { margin: 0; }
.pl-t > span { font-size: 12.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-t code { font: 500 12px/1 var(--mono); color: var(--ink2); }
.pl-seen { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.pl-seen.on { color: var(--ok); font-weight: 600; }
.pl-seen small { font-size: inherit; }
@media (max-width: 640px) { .pl-row { grid-template-columns: 40px minmax(0, 1fr) 36px; } .pl-seen { display: none; } }

.ch-vault { display: flex; flex-direction: column; gap: 10px; }
.vault { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); flex-wrap: wrap; }
.vault > div:nth-child(2) { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 3px; }
.vault > div:nth-child(2) b { font-size: 15px; }
.vault > div:nth-child(2) span { font-size: 13px; color: var(--mute); }
.vault.warn > div:nth-child(2) span:nth-child(2) { color: var(--warn); }
.vault.ok > div:nth-child(2) span:nth-child(2) { color: var(--ok); }
.vault-ic { width: 46px; height: 46px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--sunk); color: var(--ink2); }
.vault.warn .vault-ic { background: var(--warn-bg); color: var(--warn); }
.vault select { width: auto; }

.ch-save { position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translate(-50%, 140%); transition: transform .35s var(--ease); pointer-events: none; }
.ch-save.on { transform: translate(-50%, 0); pointer-events: auto; }
.ch-save-in { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 14px; background: #12223a; color: #e9eef4; box-shadow: var(--sh-3); }
.ch-save-in > span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; margin-right: 8px; }
.ch-save-in .btn.ghost { color: #e9eef4; }
.ch-save-in .btn.ghost:hover { background: rgba(255, 255, 255, .1); }
.ch-save-in .btn.primary { background: var(--signal); border-color: var(--signal); color: #fff; }
:root[data-theme="dark"] .ch-save-in { background: #dde6f1; color: #0d1217; }
:root[data-theme="dark"] .ch-save-in .btn.ghost { color: #0d1217; }

@media (max-width: 760px) {

  .ch-save { bottom: calc(74px + env(safe-area-inset-bottom)); width: calc(100% - 24px); }
  .ch-save-in > span { flex: 1; }
}

/* ==========================================================================
   Параметры
   ========================================================================== */
.params { max-width: 1320px; padding-bottom: 120px; }

.pm-panel.in { animation: pmIn .22s ease-out; }
@keyframes pmIn { from { opacity: 0; } to { opacity: 1; } }
.pm-split { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 22px; align-items: start; }
.pm-ctrl { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pm-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--sh-1); }
.pm-card > header h3 { font-size: 15px; color: var(--ink); letter-spacing: -.01em; display: block; }
.pm-card > header p { font-size: 13px; color: var(--mute); margin-top: 4px; line-height: 1.5; max-width: 62ch; }
.pm-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pm-big { display: flex; align-items: baseline; gap: 10px; }
.pm-big b { font: 600 34px/1 var(--mono); letter-spacing: -.03em; }
.pm-big span { color: var(--mute); }
.pm-note { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mute); }
.pm-lead { font-size: 15px; color: var(--ink2); margin-bottom: 16px; max-width: 70ch; }
.pm-full { display: flex; flex-direction: column; gap: 14px; }
.print-prev { padding: 12px 16px; border-radius: 10px; border: 1px dashed var(--strong); font: 600 13px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .04em; color: var(--ink2); text-align: center; }
.print-prev b { color: var(--accent); }

/* степпер */
.stp { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; flex: none; }
.stp > button { width: 38px; height: 44px; border: 0; background: var(--sunk); font: 500 20px/1 var(--sans); color: var(--ink2); transition: background-color .15s; }
.stp > button:hover { background: var(--hover); color: var(--ink); }
.stp > button:active { background: var(--line); }
.pm-card > .stp { align-self: flex-start; }
.stp-c { min-width: 64px; padding: 0 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.stp-v { font: 600 20px/1 var(--mono); }
.stp-v.bump { animation: bump .25s var(--ease); }
.stp-c small { font-size: 10.5px; color: var(--mute); }
@keyframes bump { 40% { transform: scale(1.25); color: var(--signal); } }

/* ползунки */
.rng-w, .dual { position: relative; padding: 6px 0 22px; }
input.rng { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; padding: 0; border: 0; background: transparent; box-shadow: none !important; min-height: 0; }
input.rng::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--brand) var(--p, 0%), var(--line) var(--p, 0%)); }
input.rng::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
input.rng::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--brand); }
input.rng::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--panel); border: 2px solid var(--brand); box-shadow: var(--sh-2); cursor: grab; transition: transform .12s; }
input.rng::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--panel); border: 2px solid var(--brand); cursor: grab; }
input.rng:active::-webkit-slider-thumb { transform: scale(1.18); cursor: grabbing; }
.rng-m { position: absolute; left: 11px; right: 11px; bottom: 0; height: 16px; }
.rng-m span { position: absolute; transform: translateX(-50%); font: 500 10.5px/1 var(--mono); color: var(--faint); }
.dual { height: 52px; }
.dual-track, .dual-fill { position: absolute; top: 16px; height: 6px; border-radius: 3px; }
.dual-track { left: 11px; right: 11px; background: var(--line); }
.dual-fill { background: var(--brand); margin-left: 11px; max-width: calc(100% - 22px); transition: left .05s, width .05s; }
.dual input.rng.dual { position: absolute; left: 0; right: 0; top: 6px; pointer-events: none; }
.dual input.rng.dual::-webkit-slider-runnable-track { background: none; }
.dual input.rng.dual::-moz-range-track { background: none; }
.dual input.rng.dual::-moz-range-progress { background: none; }
.dual input.rng.dual::-webkit-slider-thumb { pointer-events: auto; }
.dual input.rng.dual::-moz-range-thumb { pointer-events: auto; }

/* отдых — полоска дней */
.rest-strip { display: flex; flex-direction: column; gap: 8px; }
.rs-cells { display: flex; gap: 4px; }
.rs-cells span { flex: 1 1 0; min-width: 0; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font: 500 12px/1 var(--mono); background: var(--sunk); color: var(--faint); animation: popIn .25s var(--ease) backwards; }
.rs-cells .duty, .rs-cells .next { flex: 2 1 0; font: 600 11.5px/1 var(--sans); }
.rs-cells .duty { background: var(--k2-bg); color: var(--k2-fg); }
.rs-cells .rest { background: repeating-linear-gradient(135deg, var(--sunk) 0 4px, var(--hatch) 4px 5px); color: var(--mute); }
.rs-cells .next { background: var(--ok-bg); color: var(--ok); box-shadow: inset 0 0 0 1.5px var(--ok); }
.rs-cap { font-size: 12.5px; color: var(--mute); }

/* закрытие дня — шкала */
.lock-tl { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 2px; }
.ltl-bar { position: relative; height: 10px; border-radius: 5px; background: var(--sunk); }
.ltl-bar i { position: absolute; top: 0; height: 100%; border-radius: 5px; transition: left .25s var(--ease), width .25s var(--ease); }
.ltl-duty { background: var(--k2-fg); opacity: .65; }
.ltl-open { background: var(--warn); opacity: .35; }
.ltl-lock { width: 3px; margin-left: -1px; top: -6px !important; height: 22px !important; background: var(--signal); border-radius: 2px !important; }
.ltl-leg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ltl-leg li { display: grid; grid-template-columns: 14px auto 1fr; align-items: center; gap: 8px; font-size: 13px; }
.ltl-leg li > i { width: 12px; height: 12px; border-radius: 4px; }
.ltl-leg .duty > i { background: var(--k2-fg); opacity: .65; }
.ltl-leg .open > i { background: var(--warn); opacity: .5; }
.ltl-leg .lk .ico { color: var(--signal); }
.ltl-leg b { font-weight: 600; }
.ltl-leg span { color: var(--mute); font-variant-numeric: tabular-nums; }
.pm-sub { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pm-sub > span:first-child { min-width: 132px; font-size: 13px; color: var(--mute); }

/* состав */
.ch-day.big { display: flex; flex-direction: column; gap: 12px; }
.day-cells { display: flex; flex-wrap: wrap; gap: 6px; }
.day-cells span { min-width: 50px; height: 42px; padding: 0 8px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font: 600 13px/1 var(--mono); background: var(--sunk); animation: mkIn .35s var(--ease) backwards; }
.day-cells .k1 { background: var(--k1-bg); color: var(--k1-fg); }
.day-cells .k2 { background: var(--k2-bg); color: var(--k2-fg); }
.day-cells .k3 { background: var(--k3-bg); color: var(--k3-fg); }
.day-sum { font-size: 13.5px; color: var(--mute); }
.day-sum b { color: var(--ink); font: 600 16px/1 var(--mono); }
.cr-list { display: flex; flex-direction: column; }
.cr-week { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--sunk); border: 1px solid var(--line2); }
.cr-week > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-week small { color: var(--mute); font-size: 12px; line-height: 1.35; }
.cr-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "m n s" "m f f"; column-gap: 12px; row-gap: 8px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line2); transition: opacity .2s; }
.cr-row:first-child { border-top: 0; padding-top: 2px; }
.cr-row.off { opacity: .5; }
.cr-mk { grid-area: m; display: flex; justify-content: center; }
.cr-mk .mk { min-width: 40px; height: 28px; font-size: 12px; border-radius: 7px; }
.cr-name { grid-area: n; display: flex; flex-direction: column; gap: 2px; border: 0; background: none; text-align: left; padding: 0; min-width: 0; color: var(--ink); }
.cr-name b { font-weight: 600; font-size: 14px; }
.cr-name small { font-size: 12px; color: var(--mute); }
.cr-name:hover b { color: var(--accent); }
.cr-row .stp { grid-area: s; }
.cr-row .stp > button { height: 36px; width: 32px; font-size: 17px; }
.cr-row .stp-v { font-size: 17px; }
.cr-flags { grid-area: f; display: flex; flex-wrap: wrap; gap: 6px; }
.flag { height: 26px; padding: 0 11px; border-radius: 13px; border: 1px dashed var(--strong); background: none; font-size: 12px; font-weight: 500; color: var(--mute); transition: all .15s; }
.flag:hover { color: var(--ink); border-color: var(--mute); }
.flag.on { border-style: solid; border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.flag { display: inline-flex; align-items: center; gap: 5px; }
.flag .ico { display: none; }
.flag.on .ico { display: block; }
.cr-act { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mute); cursor: pointer; }
.cr-act .switch { width: 38px; height: 22px; }
.cr-act .switch i { width: 16px; height: 16px; }
.cr-act .switch.on i { transform: translateX(16px); }

/* прогноз */
.fc { position: sticky; top: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-2); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 16px; }
.fc-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fc-h h3 { color: var(--ink); font-size: 16px; letter-spacing: -.01em; display: block; }
.fc-h p { font-size: 12px; color: var(--mute); margin-top: 2px; }
.fc-load { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 0; color: var(--mute); font-size: 13px; }
.fc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line2); border-radius: 12px; overflow: hidden; border: 1px solid var(--line2); transition: opacity .2s; }
.fc-grid.busy { opacity: .45; }
.fc-k { background: var(--panel); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; position: relative; }
.fc-k > span { font-size: 11.5px; color: var(--mute); }
.fc-k > b { font: 600 26px/1.1 var(--mono); letter-spacing: -.03em; }
.fc-k small { font-size: 11.5px; color: var(--faint); }
.fc-k.bad > b { color: var(--bad); }
.fc-d { position: absolute; top: 12px; right: 12px; font: 600 11px/1 var(--mono); padding: 3px 6px; border-radius: 5px; }
.fc-d.up { color: var(--ok); background: var(--ok-bg); }
.fc-d.down { color: var(--bad); background: var(--bad-bg); }
.fc-d.eq { color: var(--faint); font-weight: 500; }
.fc-sec { display: flex; flex-direction: column; gap: 10px; }
.fc-sec h4 { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); font-weight: 600; }
.fc-hist { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.fc-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.fc-bars { position: relative; flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; border-radius: 6px; }
.fc-col.norm .fc-bars { background: var(--ok-bg); }
.fc-bars i { position: absolute; bottom: 0; width: 64%; border-radius: 5px 5px 2px 2px; transition: height .45s var(--ease); }
.fc-bars i.val { background: var(--brand); }
.fc-bars i.ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--strong); width: 80%; }
.fc-col b { font: 600 11px/1 var(--mono); min-height: 11px; }
.fc-col span { font: 500 11px/1 var(--mono); color: var(--mute); }
.fc-cap { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mute); }
.fc-sw { width: 12px; height: 12px; border-radius: 3px; background: var(--ok-bg); }
.fc-sw.ghost { background: none; box-shadow: inset 0 0 0 1.5px var(--strong); margin-left: 10px; }
.fc-groups { display: flex; flex-direction: column; gap: 7px; }
.fc-groups > div { display: grid; grid-template-columns: 24px 1fr 28px 32px; gap: 8px; align-items: center; }
.fc-gbar { position: relative; height: 8px; border-radius: 4px; background: var(--sunk); }
.fc-gbar i { display: block; height: 100%; border-radius: 4px; background: var(--k2-fg); opacity: .55; transition: width .45s var(--ease); }
.fc-gbar em { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--ink2); border-radius: 1px; }
.fc-groups b { font: 600 12px/1 var(--mono); text-align: right; }
.fc-groups small { font: 500 11px/1 var(--mono); color: var(--mute); }
.fc-foot { font-size: 11.5px; color: var(--faint); line-height: 1.45; }

@media (max-width: 1180px) { .pm-split { grid-template-columns: 1fr; } .fc { position: static; } }

.pane.w-340 { width: 340px; }

/* календарь */
.rcal { user-select: none; }
.rcal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.rcal-h b { font-size: 14px; }
.rcal-w, .rcal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.rcal-w span { text-align: center; font-size: 10.5px; color: var(--faint); padding: 4px 0; }
.rcal-g button { aspect-ratio: 1; max-height: 40px; border: 0; border-radius: 9px; background: none; font: 500 13px/1 var(--mono); color: var(--ink); transition: background-color .1s; }
.rcal-g button:hover { background: var(--hover); }
.rcal-g button.we { color: var(--we-ink); }
.rcal-g button.today { box-shadow: inset 0 0 0 1.5px var(--signal); }
.rcal-g button.in { background: var(--accent-bg); border-radius: 0; }
.rcal-g button.lo, .rcal-g button.hi { background: var(--brand); color: var(--on-brand); }
.rcal-g button.lo { border-radius: 9px 0 0 9px; }
.rcal-g button.hi { border-radius: 0 9px 9px 0; }
.rcal-g button.lo.hi { border-radius: 9px; }
.rcal-hint { font-size: 11.5px; color: var(--faint); margin-top: 6px; text-align: center; }

/* ==========================================================================
   Вход: мудрость дня
   ========================================================================== */
.la-kick { font: 600 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #ff8f80; }
.la-q { margin: 16px 0 0; padding: 0; }
.la-q p { font: 500 clamp(24px, 2.7vw, 36px)/1.22 var(--serif); letter-spacing: -.01em; color: #fff; max-width: 22em; }
.la-q cite { display: block; margin-top: 14px; font: 500 13px/1 var(--mono); font-style: normal; color: rgba(232, 237, 243, .55); }
.la-q.in p, .la-q.in cite { animation: fadeUp .5s var(--ease) backwards; }
.la-q.in cite { animation-delay: 120ms; }
@media (max-width: 900px) { .la-q p { font-size: 22px; } }

/* ==========================================================================
   Пасхалка admin/admin
   ========================================================================== */
body.glitching .login { animation: glitchShake .18s steps(2) infinite, glitchHue 1.1s steps(6) infinite; }
body.glitching .login h1, body.glitching .login .la-q p, body.glitching .wordmark { text-shadow: 3px 0 #ff2a4f, -3px 0 #22e1ff; animation: glitchText .35s steps(3) infinite; }
@keyframes glitchShake { 0% { transform: translate(0, 0); } 25% { transform: translate(-6px, 2px) skewX(2deg); } 50% { transform: translate(5px, -3px); } 75% { transform: translate(-3px, 4px) skewX(-3deg); } 100% { transform: translate(2px, -1px); } }
@keyframes glitchHue { 0% { filter: none; } 30% { filter: hue-rotate(90deg) saturate(3); } 60% { filter: invert(1) contrast(1.4); } 80% { filter: hue-rotate(-60deg) brightness(1.4); } }
@keyframes glitchText { 0% { clip-path: inset(0 0 60% 0); transform: translateX(-4px); } 50% { clip-path: inset(40% 0 10% 0); transform: translateX(5px); } 100% { clip-path: inset(0); } }
.pk { position: fixed; inset: 0; z-index: 300; pointer-events: none; color: #c9ffd1; font-family: var(--mono); overflow: hidden; }
.pk.dark { pointer-events: auto; background: #050807; animation: pkFlash .5s steps(4); }
.pk.out { opacity: 0; transition: opacity .4s; }
@keyframes pkFlash { 0%, 50% { background: #fff; } 25%, 75% { background: #050807; } }
.pk-noise { position: absolute; inset: -50%; background-image: repeating-radial-gradient(circle at 17% 32%, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px); animation: noise .2s steps(3) infinite; opacity: .7; }
@keyframes noise { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } }
.pk-scan { position: absolute; inset: 0; background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .35) 2px 3px); }
.pk-scan::after { content: ""; position: absolute; left: 0; right: 0; height: 120px; background: linear-gradient(transparent, rgba(120, 255, 160, .08), transparent); animation: scanY 2.2s linear infinite; }
@keyframes scanY { from { top: -120px; } to { top: 100%; } }
.pk-term { position: relative; margin: 0; padding: 9vh 7vw; font: 500 clamp(13px, 1.6vw, 18px)/1.75 var(--mono); white-space: pre-wrap; text-shadow: 0 0 8px rgba(120, 255, 160, .55); }
.pk-ln.red { color: #ff5a5a; text-shadow: 0 0 10px rgba(255, 60, 60, .7); animation: glitchText .5s steps(2) 2; }
.pk-ln.amber { color: #ffcf5a; text-shadow: 0 0 12px rgba(255, 200, 80, .7); font-weight: 700; }
.pk-bar { color: #ffcf5a; }
.pk-rain { position: absolute; inset: 0; }
.pk-rain .mk { position: absolute; top: -40px; height: auto; padding: 4px 7px; animation: fall linear infinite; box-shadow: 0 0 18px rgba(255, 200, 80, .4); }
@keyframes fall { from { transform: translateY(0) rotate(0); } to { transform: translateY(115vh) rotate(260deg); } }
.pk-final { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9); width: min(520px, 90vw); padding: 34px 32px 30px; border-radius: 18px; background: rgba(8, 14, 12, .92); border: 1px solid rgba(201, 255, 209, .2); box-shadow: 0 30px 90px rgba(0, 0, 0, .7); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0; pointer-events: none; color: #e8f6ea; font-family: var(--sans); }
.pk-final.on { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; transition: all .45s cubic-bezier(.2, 1.4, .4, 1); }
.pk-stamp { display: flex; flex-direction: column; align-items: center; padding: 10px 26px; border: 4px solid #ff4a3a; border-radius: 12px; color: #ff4a3a; transform: rotate(-8deg); animation: stampIn .5s cubic-bezier(.2, 1.6, .4, 1) .1s both; margin-bottom: 8px; }
.pk-stamp b { font: 800 34px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.pk-stamp span { font: 600 13px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .2em; }
.pk-big { font: 600 26px/1.2 var(--serif); color: #fff; }
.pk-final p { color: rgba(232, 246, 234, .78); line-height: 1.55; max-width: 38ch; }
.pk-ok { margin-top: 10px; background: #ffcf5a; border-color: #ffcf5a; color: #1b1405; }
.pk-ok:hover { background: #ffe08f; border-color: #ffe08f; }
@media (prefers-reduced-motion: reduce) { body.glitching .login { animation: none; } }

/* ---------- шканечный журнал ---------- */
.unseen-dot { position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 2px var(--side); animation: dotPulse 2.4s ease-in-out infinite; }
.avatar, .tabbar button { position: relative; }
.tabbar .unseen-dot { top: 2px; right: calc(50% - 16px); box-shadow: 0 0 0 2px var(--panel); }
@keyframes dotPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.pop-item.ver { height: 30px; margin-top: 2px; font: 500 11.5px/1 var(--mono); color: var(--faint); letter-spacing: .02em; }
.pop-item.ver kbd { font: 500 10.5px/1 var(--sans); background: none; border: 0; color: var(--faint); opacity: 0; transition: opacity .15s; }
.pop-item.ver:hover, .pop-item.ver:focus-visible { color: var(--ink2); }
.pop-item.ver:hover kbd, .pop-item.ver:focus-visible kbd { opacity: 1; }
.pop-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }

/* статьи об обновлениях */

.cg-ver code, .cg-meta code, .cg-nav code { font: 600 12px/1 var(--mono); padding: 4px 7px; border-radius: 6px; background: var(--brand); color: var(--on-brand); }

.cg-meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--mute); }




/* схемы для статей */
.gd-mx td.x .mk { text-decoration: line-through; }
.gd-sl td { padding: 0 12px; font-size: 12.5px; text-align: left; }
.gd-sl thead th { vertical-align: middle; padding: 0 10px; }
.gd-panel { min-width: 300px; max-width: 420px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--sh-2); overflow: hidden; }
.gd-panel-h { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-bottom: 1px solid var(--line2); }
.gd-panel-h b { font-size: 14px; }
.gd-panel-h span { font-size: 12px; color: var(--mute); }
.gd-panel table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gd-panel th { text-align: left; font-weight: 400; color: var(--mute); padding: 8px 14px; white-space: nowrap; vertical-align: top; }
.gd-panel td { padding: 8px 14px 8px 0; color: var(--ink); }
.gd-panel tr + tr > * { border-top: 1px solid var(--line2); }
.gd-panel tr.warn td { color: var(--warn); }
.gd-panel .gd-chips { padding: 0 14px 12px; margin-top: 4px; }
.gd-toast { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px 12px 14px; border-radius: 10px; background: var(--ink); color: var(--panel); font-size: 13.5px; overflow: hidden; box-shadow: var(--sh-3); }
.gd-toast .ico { color: #7fd69b; }
.gd-toast b { margin-left: 8px; padding: 5px 10px; border-radius: 7px; background: rgba(255, 255, 255, .14); font-weight: 600; font-size: 13px; }
.gd-toast i { position: absolute; left: 0; bottom: 0; height: 3px; width: 62%; background: rgba(255, 255, 255, .5); }
.gd-hist { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 8px; }
.gd-hist > div { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 44px; height: 100%; }
.gd-hist > div.norm { background: color-mix(in srgb, var(--ok) 9%, transparent); border-radius: 8px 8px 0 0; }
.gd-hist-b { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.gd-hist-b i { width: 14px; border-radius: 4px 4px 0 0; background: var(--brand); min-height: 2px; }
.gd-hist-b i.was { background: var(--strong); }
.gd-hist span { font: 500 12px/1 var(--mono); color: var(--mute); }
.gd-time { display: flex; width: 100%; max-width: 640px; padding: 2px 0; }
.gd-time > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gd-time em { height: 14px; font: 500 11.5px/1 var(--mono); font-style: normal; color: var(--ink2); white-space: nowrap; border-left: 2px solid var(--ink2); padding-left: 5px; }
.gd-time > div:first-child em { border-left: 0; }
.gd-time i { height: 14px; background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gd-time b { font-size: 12px; font-weight: 600; padding-left: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-time .duty i { background: var(--k2-bg); border-color: transparent; }
.gd-time .duty b { color: var(--k2-fg); }
.gd-time .grace i { background: var(--warn-bg); border-color: transparent; }
.gd-time .grace b { color: var(--warn); }
.gd-time .lock i { background: repeating-linear-gradient(135deg, var(--sunk) 0 5px, var(--line) 5px 7px); border-color: transparent; }
.gd-time .lock em { border-color: var(--signal); color: var(--signal); }
.gd-time .lock b { color: var(--mute); }
.gd-cal { display: grid; grid-template-columns: repeat(7, 34px); gap: 2px; }
.gd-cal span { height: 30px; display: flex; align-items: center; justify-content: center; font: 500 12.5px/1 var(--mono); color: var(--ink); border-radius: 7px; }
.gd-cal span.w { font: 400 10.5px/1 var(--sans); color: var(--faint); height: 22px; }
.gd-cal span.we { color: var(--we-ink); }
.gd-cal span.in { background: var(--accent-bg); border-radius: 0; }
.gd-cal span.lo, .gd-cal span.hi { background: var(--brand); color: var(--on-brand); }
.gd-cal span.lo { border-radius: 7px 0 0 7px; }
.gd-cal span.hi { border-radius: 0 7px 7px 0; }
.gd-cal span.today { box-shadow: inset 0 0 0 1.5px var(--signal); }
@media (max-width: 760px) {

  .gd-panel { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .unseen-dot { animation: none; } }

/* ---------- апробация ---------- */
.pilot-tag { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 9px; border-radius: 99px; border: 1px dashed var(--strong); font-size: 12.5px; font-weight: 550; color: var(--ink2); white-space: nowrap; }
.pilot-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.pilot-tag b { font: 600 11.5px/1 var(--mono); padding: 3px 6px; border-radius: 5px; background: var(--sunk); color: var(--ink); }
.mx tr.gsec.off .gsec-in { color: var(--mute); }
.mx tr.gsec.off .gsec-in > span:last-child { font-size: 12.5px; }
.gn.off { background: repeating-linear-gradient(135deg, var(--sunk) 0 3px, var(--line) 3px 4px); color: var(--mute); letter-spacing: .12em; padding: 0 6px; width: auto; }
.mx tr.offrow th.nm, .mx tr.offrow td { background-image: repeating-linear-gradient(135deg, transparent 0 5px, var(--hatch) 5px 6px); }
.mx tr.offrow .off-l { padding-left: 14px; font-size: 12px; color: var(--mute); }
.mk.out { min-width: 22px; background: var(--panel); color: var(--mute); box-shadow: inset 0 0 0 1px var(--strong); border: 0; cursor: pointer; font-variant-numeric: tabular-nums; }
.mk.out:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink2); }
td.sl.out > button { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--hatch) 5px 6px); color: var(--mute); }
td.sl.out .sl-n { font-style: italic; }
.dl-n.out { color: var(--mute); background-image: repeating-linear-gradient(135deg, transparent 0 5px, var(--hatch) 5px 6px); }
.callout.out { background: var(--sunk); border: 1px dashed var(--strong); color: var(--ink2); }
.callout.out b { color: var(--ink); }
.callout.out p { margin-top: 3px; font-size: 13px; line-height: 1.45; }
.pilot { margin-top: 28px; padding: 18px 20px; border-radius: 16px; border: 1.5px dashed var(--strong); background: var(--panel); }
.pilot-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.pilot-h h3 { font-size: 16px; }
.pilot-h p { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--ink2); max-width: 64ch; }
.pilot-b { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); transition: opacity .2s; }
.pilot-b.dim { opacity: .5; }
.pilot-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: center; }
.pilot-l { font-size: 12.5px; color: var(--mute); }
.pilot-row .chip { display: inline-flex; align-items: center; gap: 6px; }
.pilot-share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--mute); }
.pilot-share b { font: 600 20px/1 var(--mono); color: var(--ink); }
.pilot-share .num { width: 76px; }
.pilot-calc { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font: 600 13px/1 var(--mono); color: var(--ink); }
.pilot-calc > span { display: inline-flex; align-items: center; gap: 6px; }
.pilot-calc em { font: 400 12.5px/1 var(--sans); color: var(--mute); font-style: normal; }
.pilot-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mute); }
.pilot-f { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: 13px; }
.switch { position: relative; flex: none; width: 46px; height: 28px; border-radius: 99px; border: 0; background: var(--strong); transition: background-color .2s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s var(--ease); }
.switch.on { background: var(--ok); }
.switch.on i { transform: translateX(18px); }
@media (max-width: 760px) { .pilot-row { grid-template-columns: 1fr; gap: 6px; } }

/* ==========================================================================
   Отсутствия
   ========================================================================== */
.abs { max-width: 1440px; }
.ab-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin-bottom: 22px; }
.ab-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ab-nav { display: flex; align-items: center; gap: 4px; }
.ab-date { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 190px; padding: 6px 30px 6px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); text-align: left; position: relative; box-shadow: var(--sh-1); }
.ab-date b { font-size: 14px; color: var(--ink); }
.ab-date span { font-size: 11.5px; color: var(--mute); }
.ab-date > .ico { position: absolute; right: 10px; top: 50%; margin-top: -7px; color: var(--mute); }
.ab-date:hover { border-color: var(--strong); }
.seg.sm > button { height: 30px; padding: 0 11px; font-size: 12.5px; }

.ab-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }
.ab-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ab-side { position: sticky; top: 18px; }
.ab-card, .ab-roll, .ab-needs, .ab-out, .ab-tl { padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--sh-1); }
.ab-sh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ab-sh h2 { font-size: 16px; letter-spacing: -.015em; }
.ab-sh > span { font-size: 12.5px; color: var(--mute); }
.ab-sh > .btn, .ab-sh > .ab-search { margin-left: auto; }
.ab-empty { padding: 6px 0; font-size: 13.5px; color: var(--mute); }

/* расход */
.ab-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ab-nums > div { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; background: var(--sunk); }
.ab-nums span { font-size: 12px; color: var(--mute); }
.ab-nums b { font: 600 30px/1.05 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.ab-nums small { font-size: 12px; color: var(--mute); }
.ab-nums .here b { color: var(--ok); }
.ab-nums .out b { color: var(--ink); }
.ab-bar { display: flex; gap: 2px; height: 10px; margin-top: 14px; border-radius: 99px; overflow: hidden; }
.ab-bar i { min-width: 3px; }
.ab-bar i.here, .ab-legend i.here { background: color-mix(in srgb, var(--ok) 55%, var(--panel)); }
.ab-bar i.onduty, .ab-legend i.onduty { background: var(--k1-bg); }
.ab-bar i.sick, .ab-legend i.sick, .dot.sick { background: var(--r-sick); }
.ab-bar i.leave, .ab-legend i.leave, .dot.leave { background: var(--r-leave); }
.ab-bar i.vacation, .ab-legend i.vacation, .dot.vacation { background: var(--r-vacation); }
.ab-bar i.duty, .ab-legend i.duty, .dot.duty { background: var(--r-duty); }
.ab-bar i.practice, .ab-legend i.practice, .dot.practice { background: var(--r-practice); }
.ab-bar i.other, .ab-legend i.other, .dot.other { background: var(--r-other); }
.ab-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12.5px; color: var(--ink2); }
.ab-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ab-legend i { width: 9px; height: 9px; border-radius: 3px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ab-gt { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ab-gt th, .ab-gt td { padding: 8px 6px; text-align: center; border-top: 1px solid var(--line2); white-space: nowrap; }
.ab-gt thead th { border-top: 0; font-size: 11.5px; font-weight: 500; color: var(--mute); }
.ab-gt thead th .dot { margin-right: 4px; vertical-align: 1px; }
.ab-gt tbody th { text-align: left; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.ab-gt td { color: var(--faint); }
.ab-gt td:nth-child(2), .ab-gt td:nth-child(3), .ab-gt td.n { color: var(--ink); }
.ab-gt td.n { font-weight: 600; }
.ab-gt tbody tr { cursor: pointer; }
.ab-gt tbody tr:hover > * { background: var(--hover); }

/* требует замены */
.ab-needs { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); background: color-mix(in srgb, var(--bad-bg) 40%, var(--panel)); }
.ab-needs .ab-sh > .ico { color: var(--bad); }
.ab-nl { display: flex; flex-direction: column; }
.ab-nl li { display: grid; grid-template-columns: 52px auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--bad) 12%, var(--line2)); }
.ab-nl li:first-child { border-top: 0; }
.ab-nd { display: flex; flex-direction: column; font-size: 11.5px; color: var(--mute); }
.ab-nd b { font: 600 14px/1.2 var(--mono); color: var(--ink); }
.ab-nm { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ab-nm b { font-size: 14px; }
.ab-nm span { font-size: 12.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-na { display: flex; gap: 6px; }

/* кто отсутствует */
.ab-search { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--mute); }
.ab-search input, .ab-search input:focus { border: 0; background: none; box-shadow: none; width: 130px; height: 28px; font-size: 13px; padding: 0; outline: none; }
.ab-ol { display: flex; flex-direction: column; gap: 14px; }
.ab-og h3 { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); margin-bottom: 4px; }
.ab-og h3 span { font-weight: 500; color: var(--faint); }
.ab-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 4px 6px 0; border-top: 1px solid var(--line2); }
.ab-og h3 + .ab-row { border-top: 0; }
.ab-rl { align-self: stretch; width: 3px; border-radius: 2px; background: var(--r-other); flex: none; margin: 4px 0; }
.ab-row.sick .ab-rl { background: var(--r-sick); } .ab-row.leave .ab-rl { background: var(--r-leave); } .ab-row.vacation .ab-rl { background: var(--r-vacation); }
.ab-row.duty .ab-rl { background: var(--r-duty); } .ab-row.practice .ab-rl { background: var(--r-practice); }
.ab-who { flex: 1; min-width: 0; display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 4px 6px; border: 0; border-radius: 8px; background: none; text-align: left; color: var(--ink); }
.ab-who:hover { background: var(--hover); }
.ab-who b { font-size: 14px; font-weight: 600; }
.ab-who > span:not(.gn) { grid-column: 1 / -1; font-size: 12.5px; color: var(--mute); }
.ab-who em { grid-column: 1 / -1; font-style: normal; font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-stale { flex: none; font-size: 11.5px; font-weight: 600; color: var(--warn); background: var(--warn-bg); padding: 3px 8px; border-radius: 99px; }
.ab-acts { display: flex; align-items: center; gap: 4px; flex: none; }
.ab-x { min-width: 34px; padding: 0 8px; font: 600 12px/1 var(--mono); }

/* уходят / возвращаются */
.ab-soon { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.ab-soon .ab-sh .ico { color: var(--mute); }
.ab-sl { display: flex; flex-direction: column; }
.ab-sl li { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 4px; border-top: 1px solid var(--line2); border-radius: 6px; cursor: pointer; }
.ab-sl li:first-child { border-top: 0; }
.ab-sl li:hover { background: var(--hover); }
.ab-sd { display: flex; flex-direction: column; font-size: 11.5px; color: var(--mute); }
.ab-sd b { font: 600 13px/1.2 var(--mono); color: var(--ink); }
.ab-sn { display: flex; align-items: center; gap: 6px; font-size: 13.5px; min-width: 0; }
.ab-sr { font-size: 11.5px; padding: 3px 8px; border-radius: 99px; color: var(--r-other); background: color-mix(in srgb, currentColor 11%, transparent); white-space: nowrap; }
.ab-sr.sick { color: var(--r-sick); } .ab-sr.leave { color: var(--r-leave); } .ab-sr.vacation { color: var(--r-vacation); } .ab-sr.duty { color: var(--r-duty); } .ab-sr.practice { color: var(--r-practice); }

/* календарь */
.ab-tlw { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }
.ab-tlg { --nm: 150px; min-width: calc(var(--nm) + var(--n) * 20px); display: flex; flex-direction: column; }
.ab-tlh { display: grid; grid-template-columns: var(--nm) minmax(0, 1fr); position: sticky; top: 0; }
.ab-tlm, .ab-tld, .ab-tlt, .ab-tlbg { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.ab-tlm span { font-size: 11.5px; font-weight: 600; color: var(--ink2); padding-bottom: 4px; text-transform: capitalize; }
.ab-tld span { display: flex; flex-direction: column; align-items: center; padding: 2px 0 6px; font-size: 11px; color: var(--mute); border-bottom: 1px solid var(--line); }
.ab-tld b { font: 500 11.5px/1.3 var(--mono); color: var(--ink2); }
.ab-tld i { font-style: normal; font-size: 9.5px; }
.ab-tld .we b, .ab-tld .we i { color: var(--we-ink); }
.ab-tld .today b { color: #fff; background: var(--signal); border-radius: 4px; padding: 0 3px; }
.ab-tld .sel { box-shadow: inset 0 -2px 0 var(--accent); }
.ab-tlr { display: grid; grid-template-columns: var(--nm) minmax(0, 1fr); align-items: center; border-bottom: 1px solid var(--line2); }
.ab-tln { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 8px 0 2px; border: 0; background: none; font-size: 13px; text-align: left; color: var(--ink); min-width: 0; }
.ab-tln span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-tln:hover span:last-child { text-decoration: underline; }
.ab-tlt { position: relative; height: 34px; align-items: center; cursor: copy; }
.ab-tlbg { position: absolute; inset: 0; }
.ab-tlbg i.we { background: var(--we); }
.ab-tlbg i.today { background: color-mix(in srgb, var(--signal) 9%, transparent); }
.ab-tlbg i.sel { box-shadow: inset 1px 0 0 var(--accent), inset -1px 0 0 var(--accent); }
.ab-tlbg i.wk { box-shadow: inset 1px 0 0 var(--line); }
.ab-tlb { position: relative; z-index: 1; grid-row: 1; height: 22px; margin: 0 1px; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 7px; border: 0; border-radius: 6px; overflow: hidden; font-size: 11.5px; font-weight: 600; color: #fff; background: var(--r-other); cursor: pointer; white-space: nowrap; }
.ab-tlb.sick { background: var(--r-sick); } .ab-tlb.leave { background: var(--r-leave); } .ab-tlb.vacation { background: var(--r-vacation); } .ab-tlb.duty { background: var(--r-duty); } .ab-tlb.practice { background: var(--r-practice); }
.ab-tlb.open { -webkit-mask-image: linear-gradient(90deg, #000 70%, rgba(0, 0, 0, .25)); mask-image: linear-gradient(90deg, #000 70%, rgba(0, 0, 0, .25)); }
.ab-tlb.cut-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ab-tlb em { font-style: normal; opacity: .85; }
.ab-tlb:hover { filter: brightness(1.08); }
:root[data-theme="dark"] .ab-tlb { color: #0d1217; }

/* форма */
.ab-form h2 { font-size: 16px; margin-bottom: 14px; }
.ae { display: flex; flex-direction: column; gap: 16px; }
.ae-sec { display: flex; flex-direction: column; gap: 8px; }
.ae-l { font-size: 12px; font-weight: 600; color: var(--mute); }
.ae-who { display: flex; flex-direction: column; gap: 8px; }
.ae-picked { display: flex; flex-wrap: wrap; gap: 6px; }
.ae-picked:empty { display: none; }
.ae-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 4px 0 6px; border-radius: 8px; background: var(--sunk); border: 1px solid var(--line); font-size: 13px; }
.ae-chip button { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: 5px; background: none; color: var(--mute); }
.ae-chip button:hover { background: var(--hover); color: var(--ink); }
.ae-in { position: relative; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--mute); }
.ae-in:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.ae-in input, .ae-in input:hover, .ae-in input:focus { flex: 1; height: 100%; border: 0; border-radius: 0; background: none; box-shadow: none; outline: none; padding: 0; font-size: 14px; color: var(--ink); min-width: 0; }
.ae-drop[hidden] { display: none; }
.ae-drop { position: absolute; left: -1px; right: -1px; top: calc(100% + 4px); z-index: 20; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--sh-3); }
.ae-drop button { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 8px; border: 0; border-radius: 7px; background: none; text-align: left; font-size: 13.5px; color: var(--ink); }
.ae-drop button > span:not(.gn) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ae-drop button em { font-style: normal; font-size: 11.5px; color: var(--warn); }
.ae-drop button:hover, .ae-drop button.first { background: var(--hover); }
.ae-quick { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; }
.ae-reasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 6px; }
.ae-reasons button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ae-reasons button { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; color: var(--ink2); transition: border-color .15s, background-color .15s; }
.ae-reasons button i { width: 8px; height: 8px; border-radius: 50%; background: var(--r-other); flex: none; }
.ae-reasons .sick i { background: var(--r-sick); } .ae-reasons .leave i { background: var(--r-leave); } .ae-reasons .vacation i { background: var(--r-vacation); } .ae-reasons .duty i { background: var(--r-duty); } .ae-reasons .practice i { background: var(--r-practice); }
.ae-reasons button:hover { border-color: var(--strong); }
.ae-reasons button.on { border-color: var(--ink); background: var(--sunk); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--ink); }
.ae-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.ae-presets button { height: 30px; padding: 0 11px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); font-size: 12.5px; color: var(--ink2); }
.ae-presets button:hover { border-color: var(--strong); }
.ae-presets button.on { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.ae-cal > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--accent); cursor: pointer; }
.ae-cal > summary::-webkit-details-marker { display: none; }
.ae-cal[open] > summary { margin-bottom: 8px; }
.ae.is-open .ae-cal .rcal .hi:not(.lo) { opacity: .6; }
.ae-sum { font-size: 13px; color: var(--ink2); line-height: 1.45; }
.ae-sum b { color: var(--ink); }
.ae input:not([type="search"]) { width: 100%; }
.ae-warn .callout ul { margin: 6px 0 0; padding-left: 16px; list-style: disc; font-size: 12.5px; line-height: 1.5; }
.ae-foot { display: flex; flex-wrap: wrap; gap: 8px; }
.ae-foot .btn.wide { flex: 1 1 100%; }
.ae.compact .ae-foot .btn.wide { height: 42px; font-size: 14.5px; }
.ae-hit ul { margin: 6px 0 8px; padding-left: 16px; list-style: disc; font-size: 12.5px; }
.ae-sheet { display: flex; flex-direction: column; gap: 14px; }
.ae-person { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--sunk); font-size: 14.5px; }

@media (max-width: 1280px) { .ab-grid { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (max-width: 1099px) {
  .ab-grid { grid-template-columns: 1fr; }
  .ab-side { display: none; }
}
@media (min-width: 1100px) { .ab-add { display: none; } }
@media (max-width: 760px) {
  .ab-head { align-items: stretch; }
  .ab-ctl { width: 100%; }
  .ab-date { flex: 1; min-width: 0; }
  .ab-nav { flex: 1; }
  .ab-card, .ab-roll, .ab-needs, .ab-out, .ab-tl { padding: 14px; border-radius: 14px; }
  .ab-nums b { font-size: 24px; }
  .ab-nums > div { padding: 10px; }
  .ab-gt { display: block; overflow-x: auto; }
  .ab-soon { grid-template-columns: 1fr; }
  /* таблица расхода шире телефона — листается внутри карточки, а не обрезается */
  .ab-gt { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ab-nl li { grid-template-columns: 44px auto minmax(0, 1fr); }
  .ab-na { grid-column: 1 / -1; justify-content: flex-end; }
  .ab-row { flex-wrap: wrap; }
  .ab-acts { width: 100%; justify-content: flex-end; padding-left: 13px; }
  .ab-tlg { --nm: 110px; }
}

/* наряд по требованию */
.dd { display: flex; flex-direction: column; gap: 18px; }
.dd-sec { display: flex; flex-direction: column; gap: 8px; }
.dd-kits { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.dd-kit { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); text-align: left; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.dd-kit:hover { border-color: var(--strong); }
.dd-kit.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.dd-kit b { font-size: 14.5px; }
.dd-kit > span { font-size: 12px; color: var(--mute); line-height: 1.35; }
.dd-mks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.dd-mks > span { display: inline-flex; align-items: center; gap: 4px; font: 500 12px/1 var(--mono); color: var(--ink2); }
.dd-n { display: flex; flex-direction: column; gap: 6px; }
.dd-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13.5px; }
.dd-row .mk { min-width: 38px; }
.stp.sm > button { width: 32px; height: 32px; font-size: 17px; }
.stp.sm .stp-v { min-width: 34px; text-align: center; font: 600 14px/1 var(--mono); }
.dd .ae-presets input[type="date"] { height: 30px; width: auto; padding: 0 8px; border-radius: 99px; }
.dd .callout p + p { margin-top: 6px; }

/* загрузка: тонкая полоса сверху вместо заставки */
.boot-line { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 300; overflow: hidden; pointer-events: none; transition: opacity .3s; }
.boot-line::before { content: ""; position: absolute; top: 0; bottom: 0; width: 35%; background: linear-gradient(90deg, transparent, var(--signal), transparent); animation: bootLine 1.1s cubic-bezier(.4, 0, .2, 1) infinite; }
.boot-line.out { opacity: 0; }
@keyframes bootLine { from { left: -35%; } to { left: 100%; } }
.app { animation: appIn .35s var(--ease) both; }
@keyframes appIn { from { opacity: 0; } to { opacity: 1; } }

/* обязательная смена пароля */
.mc { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--bg); }
.mc-card { width: 100%; max-width: 420px; padding: 28px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--sh-2); display: flex; flex-direction: column; gap: 16px; animation: fadeUp .3s var(--ease); }
.mc-ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--warn-bg); color: var(--warn); }
.mc-card h1 { font-size: 22px; letter-spacing: -.02em; }
.mc-card > p { font-size: 14px; line-height: 1.55; color: var(--ink2); }
.mc-who { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--sunk); font-size: 13.5px; }
.mc-who > div { display: flex; flex-direction: column; }
.mc-who span { font-size: 12px; color: var(--mute); }
.mc-rules { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--mute); }
.mc-rules li { display: flex; align-items: center; gap: 6px; }
.mc-rules li.ok { color: var(--ok); }
.mc-rules .ico { flex: none; }

/* печать карточек: выбор */
.cp-quick { gap: 6px 16px; font-size: 13px; }
.cp-list { display: flex; flex-direction: column; max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.cp-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; }
.cp-row + .cp-row { border-top: 1px solid var(--line2); }
.cp-row:hover { background: var(--hover); }
.cp-row.off { opacity: .5; cursor: default; }
.cp-row input { position: absolute; opacity: 0; pointer-events: none; }
.cp-row .chk-box { flex: none; }
.cp-row input:checked + .chk-box { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.cp-t { display: flex; flex-direction: column; min-width: 0; }
.cp-t b { font-size: 13.5px; }
.cp-t span { font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd .row input[type="date"] { width: auto; flex: 1; }
.day-fill { padding: 12px 14px; border-radius: 12px; background: var(--sunk); }
.day-fill .cap { margin: 2px 0 10px; }

/* ---------- мастерская turlak: окно по нажатию на надпись ---------- */
.pwr .tk[role="button"] { cursor: pointer; border-radius: 3px; }
.pwr .tk[role="button"]:hover path { stroke-dasharray: 1; animation: tkDraw 1s cubic-bezier(.6, .1, .3, 1) both; }
.st-root { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 24px 16px; --night: #0e1520; --paper: #f3efe6; }
.st-shade { position: absolute; inset: 0; background: rgba(4, 6, 10, .88); backdrop-filter: blur(10px) saturate(.7); -webkit-backdrop-filter: blur(10px) saturate(.7); opacity: 0; transition: opacity .45s; }
.st-root.open .st-shade { opacity: 1; }
.st-frame { position: relative; width: min(980px, 100%); }
.st-frame::before { content: ""; position: absolute; inset: 0; border-radius: 20px; box-shadow: 0 40px 120px rgba(0, 0, 0, .6); opacity: 0; transition: opacity .5s; pointer-events: none; }
.st-root.open .st-frame::before { opacity: 1; transition-delay: .45s; }
.st-card { position: relative; width: 100%; border-radius: 20px; overflow: hidden; background: var(--night);
  clip-path: circle(0 at var(--cx, 50%) var(--cy, 50%)); transition: clip-path .8s cubic-bezier(.7, 0, .2, 1); }
.st-root.open .st-card { clip-path: circle(var(--cr, 150%) at var(--cx, 50%) var(--cy, 50%)); }
.st-root.open .st-card.shown { clip-path: none; }   /* раскрылось — круг больше не нужен */
.st-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--paper); opacity: .18; transition: opacity .3s, transform .4s; }
.st-x:hover, .st-x:focus-visible { opacity: .8; transform: rotate(90deg); }
.st-stage { position: relative; height: clamp(260px, 52vw, 540px); cursor: crosshair; overflow: hidden;
  background: radial-gradient(ellipse 55% 60% at 50% 50%, rgba(31, 57, 85, .5), transparent 72%), var(--night); }
.st-cv { position: absolute; inset: 0; display: block; }
@media (prefers-reduced-motion: reduce) { .st-card { transition: none; clip-path: none; } }

/* ---------- «Обновления»: баннеры выпусков ---------- */
/* в покое баннер показывает законченный рисунок, а не первый кадр движения */
@keyframes bnPulse { 0%, 30%, 100% { transform: scale(1); } 12% { transform: scale(2); } }
@keyframes bnRing { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(5); opacity: 0; } }
@keyframes bnTurn { 0%, 15% { transform: rotate(0); } 35%, 65% { transform: rotate(90deg); } 85%, 100% { transform: rotate(180deg); } }
@keyframes bnFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-10px, -10px); } }
@keyframes bnFloatBig { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-26px, -26px); } }
@keyframes bnGrow { 0%, 100% { transform: scaleX(.35); } 45%, 60% { transform: scaleX(1); } }
@keyframes bnDraw { 0% { stroke-dashoffset: 1; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes bnTip { 0%, 30% { opacity: 0; } 42%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bnHand { to { transform: rotate(360deg); } }
@keyframes bnRise { 0%, 100% { transform: scaleY(.25); } 45%, 75% { transform: scaleY(1); } }
@keyframes bnClick { 0%, 60%, 100% { transform: scale(1); } 66% { transform: scale(.86); } }

/* список выпусков */
@keyframes rlNew { 0% { box-shadow: 0 0 0 0 rgba(210, 64, 47, .55); } 70%, 100% { box-shadow: 0 0 0 10px rgba(210, 64, 47, 0); } }

/* проявление при прокрутке */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* страница выпуска */
@keyframes rlZoom { from { transform: scale(1.12); filter: brightness(.4); } to { transform: none; filter: none; } }
@keyframes rlNum { from { color: transparent; } to { color: color-mix(in srgb, var(--rc) 22%, transparent); } }
@media (max-width: 900px) {
}
@media (max-width: 760px) {
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* живые схемы («Попробуйте») */
.tw { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; position: relative; min-width: 0; max-width: 100%; }
.tw > table, .tw-flip { max-width: 100%; overflow-x: auto; }
.tw .mk { transition: opacity .3s, transform .4s cubic-bezier(.2, 1.4, .4, 1); }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--brand); }   /* цвет знака, а не синий браузера */
@keyframes twFlash { 0% { background: color-mix(in srgb, var(--rc) 35%, transparent); } 100% { background: transparent; } }
@keyframes twLife { to { transform: scaleX(0); } }
@media (max-width: 760px) { .tw-cal { grid-template-columns: repeat(7, minmax(0, 1fr)); } .tw-hist > div { width: 36px; } }
/* ВЫМПЕЛ-27: роты качаются на фале, клетки графика проявляются от древка к хвосту */
@keyframes bnSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes bnCell { 0%, 24%, 100% { transform: none; } 10% { transform: scale(1.22); } }
@keyframes bnSweep { from { transform: translateX(0); } to { transform: translateX(1180px); } }
@keyframes twPop { from { opacity: 0; transform: scale(.4) translateY(6px); } }
@media (max-width: 760px) { .tw-prow { grid-template-columns: 96px minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .tw-chip { animation: none; } }

/* ==========================================================================
   Руководство: обложка, главы со сценами, курсор-проигрыватель
   ========================================================================== */
.gx { padding-bottom: 80px; }
.gx-cover { position: relative; overflow: hidden; min-height: clamp(380px, 52vw, 560px); display: flex; align-items: flex-end; background: radial-gradient(ellipse 70% 90% at 80% 20%, #1f3955, transparent 70%), #0e1520; color: #f3efe6; isolation: isolate; }
.gx-mosaic { position: absolute; inset: -10px -10px auto auto; width: min(760px, 70%); display: grid; grid-template-columns: repeat(var(--c), 1fr); gap: 5px; padding: 24px; opacity: .9; transform: perspective(1200px) rotateY(-18deg) rotateX(8deg); transform-origin: right top; z-index: -1; mask-image: linear-gradient(200deg, #000 30%, transparent 85%); -webkit-mask-image: linear-gradient(200deg, #000 30%, transparent 85%); }
.gx-mosaic span { aspect-ratio: 1.25; border-radius: 6px; background: rgba(255, 255, 255, .04); display: grid; place-items: center; animation: gxCell .6s var(--ease) var(--d) backwards; }
.gx-mosaic span.lk { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 3px, transparent 3px 7px), rgba(255, 255, 255, .02); }
.gx-mosaic .mk.k1 { background: #f3efe6; color: #0e1520; }
.gx-mosaic .mk { font-size: 9px; height: 18px; min-width: 0; padding: 0 4px; animation: gxPop .5s cubic-bezier(.2, 1.5, .4, 1) calc(var(--d) + .5s) backwards; }
@keyframes gxCell { from { opacity: 0; transform: scale(.6); } }
@keyframes gxPop { from { opacity: 0; transform: scale(.3); } }
.gx-scan { position: absolute; top: 0; bottom: 0; width: 120px; left: 0; z-index: -1; background: linear-gradient(90deg, transparent, rgba(130, 178, 234, .1), transparent); animation: gxScan 7s linear infinite; }
@keyframes gxScan { from { transform: translateX(-120px); } to { transform: translateX(110vw); } }
.gx-cover-in { padding: 40px 44px 44px; max-width: 760px; display: flex; flex-direction: column; gap: 16px; }
.gx-cover-in > * { animation: fadeUp .9s var(--ease) backwards; }
.gx-cover-in > :nth-child(2) { animation-delay: .1s; } .gx-cover-in > :nth-child(3) { animation-delay: .2s; } .gx-cover-in > :nth-child(4) { animation-delay: .3s; } .gx-cover-in > :nth-child(5) { animation-delay: .4s; }
.gx-kick { display: flex; align-items: center; gap: 10px; font: 600 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: #8b98a8; }
.gx-kick i { width: 22px; height: 2px; background: var(--signal); }
.gx-cover h1 { font: 500 clamp(48px, 8vw, 104px)/.92 var(--serif); letter-spacing: -.045em; color: #fff; }
.gx-cover-l { font: 400 clamp(17px, 1.8vw, 21px)/1.5 var(--serif); color: rgba(243, 239, 230, .88); max-width: 30em; }
.gx-cover-n { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; font-size: 13px; color: #8b98a8; }
.gx-cover-n > * + *::before { content: "·"; margin-right: 14px; color: #4d5866; }
.gx-role { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font: inherit; color: #dfe5ec; border-bottom: 1px dashed rgba(223, 229, 236, .35); transition: color .2s, border-color .2s; }
.gx-role:hover { color: #fff; border-bottom-color: #fff; }
.gx-tailm { display: inline-block; width: 26px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--mute), transparent); vertical-align: middle; }

.gx-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 40px; max-width: 1240px; padding: 36px 40px 0; }
.gx-rail-nav { position: sticky; top: 28px; align-self: start; display: flex; flex-direction: column; gap: 2px; padding-left: 16px; }
.gx-prog { position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--line); }
.gx-prog i { display: block; width: 100%; height: 0; border-radius: 2px; background: var(--signal); transition: height .5s var(--ease); }
.gx-rail-nav a { display: flex; align-items: baseline; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 13.5px; color: var(--mute); transition: color .2s, background-color .2s; }
.gx-rail-nav a b { font: 600 11px/1 var(--mono); color: var(--faint); }
.gx-rail-nav a:hover { background: var(--hover); color: var(--ink); }
.gx-rail-nav a.done { color: var(--ink2); }
.gx-rail-nav a.on { color: var(--ink); font-weight: 600; }
.gx-rail-nav a.on b { color: var(--signal); }
.gx-main { min-width: 0; }
.gx-ch { scroll-margin-top: 24px; padding: 30px 0 54px; }
.gx-ch + .gx-ch { border-top: 1px solid var(--line2); }
.gx-ch-h { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 26px; }
.gx-num { flex: none; font: 500 56px/.85 var(--serif); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.2px var(--strong); transition: color .8s, -webkit-text-stroke-color .8s; }
.gx-ch.in .gx-num { color: var(--ink); -webkit-text-stroke-color: transparent; }
.gx-ch-h h2 { font: 500 clamp(28px, 3.2vw, 38px)/1.08 var(--serif); letter-spacing: -.025em; color: var(--ink); }
.gx-ch-h p { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--ink2); max-width: 44em; }
.gx-ch .gx-ch-h, .gx-ch .gx-ch-b { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.gx-ch .gx-ch-b { transition-delay: .12s; }
.gx-ch.in .gx-ch-h, .gx-ch.in .gx-ch-b { opacity: 1; transform: none; }
.gx-muted { color: var(--mute); font-size: 13px; }
.gx-end { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 28px 0; border-top: 1px solid var(--line); font: 500 20px/1.3 var(--serif); }
.gx-end a { display: inline-flex; align-items: center; gap: 6px; font: 600 13.5px/1 var(--sans); }

/* права */
.gx-rights { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px 28px; align-items: start; }
.gx-badge { grid-row: span 2; position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 16px; background: #0e1520; color: #f3efe6; overflow: hidden; box-shadow: var(--sh-2); }
.gx-badge::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--signal); }
.gx-badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .12) 50%, transparent 60%); transform: translateX(-100%); }
.gx-ch.in .gx-badge::after { animation: gxShine 1.4s .5s var(--ease); }
@keyframes gxShine { to { transform: translateX(100%); } }
.gx-badge .avatar { width: 54px; height: 54px; background: #f3efe6; color: #0e1520; }
.gx-badge .avatar .ico { width: 26px; height: 26px; }
.gx-badge b { display: block; font: 500 22px/1.15 var(--serif); }
.gx-badge > div > span { display: block; margin-top: 4px; font-size: 13px; color: #9aa6b4; }
.gx-badge em { display: inline-block; margin-top: 10px; font: 600 10.5px/1 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #0e1520; background: #f2c14e; padding: 4px 7px; border-radius: 5px; }
.gx-can, .gx-cant { display: flex; flex-direction: column; gap: 2px; }
.gx-can li, .gx-cant li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 14.5px; color: var(--ink); opacity: 0; transform: translateX(-10px); transition: opacity .4s var(--d), transform .5s var(--ease) var(--d), background-color .2s; }
.gx-can li:hover, .gx-cant li:hover { background: var(--hover); }
.gx-ch.in .gx-can li, .gx-ch.in .gx-cant li { opacity: 1; transform: none; }
.gx-can i, .gx-cant i { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; }
.gx-can i { color: var(--ok); background: var(--ok-bg); }
.gx-cant i { color: var(--bad); background: var(--bad-bg); }
.gx-cant li span { position: relative; color: var(--mute); }
.gx-cant li span::after { content: ""; position: absolute; left: 0; right: 0; top: 55%; height: 1.5px; background: var(--bad); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease) calc(var(--d) + .3s); }
.gx-ch.in .gx-cant li span::after { transform: scaleX(1); }

/* месяц по шагам */
.gx-flow { display: flex; flex-direction: column; gap: 18px; }
.gx-rail { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.gx-rail::before { content: ""; position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 11px; height: 3px; border-radius: 2px; background: var(--line); }
.gx-fill { position: absolute; left: calc(50% / var(--n)); top: 11px; height: 3px; border-radius: 2px; background: var(--signal); max-width: calc(100% - 100% / var(--n)); transition: width .7s var(--ease); }
.gx-stop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; border: 0; background: none; padding: 0; font-size: 13px; font-weight: 600; color: var(--mute); }
.gx-stop i { width: 25px; height: 25px; border-radius: 50%; background: var(--panel); border: 3px solid var(--line); transition: border-color .4s, background-color .4s, transform .4s var(--ease); }
.gx-stop.done i { border-color: var(--signal); background: var(--signal); }
.gx-stop.on i { border-color: var(--signal); transform: scale(1.25); box-shadow: 0 0 0 6px color-mix(in srgb, var(--signal) 15%, transparent); }
.gx-stop.on { color: var(--ink); }
.gx-sts { display: grid; }
.gx-st { grid-area: 1 / 1; padding: 22px 24px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--sh-1); opacity: 0; transform: translateY(8px) scale(.99); transition: opacity .45s, transform .5s var(--ease); pointer-events: none; }
.gx-st.on { opacity: 1; transform: none; pointer-events: auto; }
.gx-st b { font: 500 22px/1.2 var(--serif); }
.gx-st p { margin: 8px 0 12px; font-size: 15px; line-height: 1.6; color: var(--ink2); max-width: 40em; }

/* типовые задачи */
.gx-tasks { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.gx-tlist { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 24px; }
.gx-ti { display: flex; align-items: baseline; gap: 10px; padding: 9px 10px; border: 0; border-radius: 9px; background: none; text-align: left; font-size: 13.5px; color: var(--ink2); transition: background-color .15s, color .15s; }
.gx-ti b { font: 600 11px/1 var(--mono); color: var(--faint); }
.gx-ti:hover { background: var(--hover); color: var(--ink); }
.gx-ti.on { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: var(--sh-1), inset 3px 0 0 var(--signal); }
.gx-ti.on b { color: var(--signal); }
.gx-tstage { min-width: 0; animation: fadeUp .4s var(--ease); }
.gx-tt { font: 500 24px/1.2 var(--serif); margin-bottom: 14px; letter-spacing: -.015em; }
.gx-play { display: flex; flex-direction: column; gap: 14px; }
.gx-frame { position: relative; padding: 22px; border-radius: 18px; background: radial-gradient(ellipse at 30% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), var(--sunk); border: 1px solid var(--line); overflow: hidden; min-height: 300px; }
.gx-screen { position: relative; }
.gx-cur { position: absolute; left: 0; top: 0; z-index: 20; width: 22px; height: 22px; margin: -3px 0 0 -5px; pointer-events: none; opacity: 0; transition: transform .75s cubic-bezier(.5, 0, .2, 1), opacity .3s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.gx-cur svg { width: 100%; height: 100%; fill: #fff; stroke: #0e1520; stroke-width: 1.4; stroke-linejoin: round; }
.gx-cur.on { opacity: 1; }
.gx-cur::after { content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -14px 0 0 -12px; border-radius: 50%; border: 2px solid var(--signal); opacity: 0; transform: scale(.3); }
.gx-cur.tap::after { animation: gxTap .45s var(--ease); }
@keyframes gxTap { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.3); } }
.gx-hit { animation: gxHit .3s; }
@keyframes gxHit { 50% { transform: scale(.94); } }
.gx-cap { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.gx-steps { display: flex; flex-direction: column; gap: 4px; counter-reset: s; }
.gx-steps li { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border-radius: 9px; font-size: 14.5px; line-height: 1.45; color: var(--mute); transition: color .3s, background-color .3s; }
.gx-steps li b { flex: none; width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%; font: 600 11px/1 var(--mono); background: var(--sunk); color: var(--mute); transition: background-color .3s, color .3s; }
.gx-steps li.on { color: var(--ink); background: var(--panel); box-shadow: var(--sh-1); }
.gx-steps li.on b { background: var(--signal); color: #fff; }
.gx-steps li.done { color: var(--ink2); }
.gx-steps li.done b { background: var(--ok-bg); color: var(--ok); }
.gx-again { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-size: 12.5px; color: var(--mute); }
.gx-again:hover { color: var(--ink); border-color: var(--strong); }

/* окно сцены */
.gx-win { position: relative; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); box-shadow: var(--sh-2); overflow: hidden; }
.gx-wbar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: var(--side); border-bottom: 1px solid var(--line); }
.gx-wbar i { width: 9px; height: 9px; border-radius: 50%; background: var(--strong); }
.gx-wbar span { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--mute); }
.gx-wbody { display: flex; flex-direction: column; gap: 12px; padding: 16px; min-height: 200px; }
.gx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.gx-form, .gx-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gx-rel { position: relative; }
.gx-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gx-sp { flex: 1; }
.gx-k { font: 600 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.gx-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; transition: background-color .2s, opacity .3s; }
.gx-btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.gx-btn.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); background: var(--bad-bg); }
.gx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gx-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); font-size: 12.5px; color: var(--ink2); transition: background-color .25s, color .25s, border-color .25s; }
.gx-chip.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.gx-fld { display: flex; flex-direction: column; gap: 4px; padding: 8px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); min-height: 50px; }
.gx-fld span { font-size: 11px; color: var(--mute); }
.gx-fld b { font-size: 14px; min-height: 18px; }
.gx-fld b:empty::after { content: "|"; color: var(--accent); animation: gxBlink 1s steps(1) infinite; }
@keyframes gxBlink { 50% { opacity: 0; } }
.gx-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.gx-ok { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ok); }
.gx-flash { animation: gxFlash 1.2s var(--ease); }
@keyframes gxFlash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 35%, transparent); } }
.gx-hide { opacity: 0; transform: translateY(6px) scale(.98); pointer-events: none; transition: opacity .3s, transform .35s var(--ease); }
.gx-hide.in { opacity: 1; transform: none; pointer-events: auto; }
td.gx-pop > * { animation: gxPop .45s cubic-bezier(.2, 1.5, .4, 1); }
.gx-in { animation: gxPop .45s cubic-bezier(.2, 1.5, .4, 1); }
.gx-toast { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 5; animation: gxUp .4s var(--ease); }
@keyframes gxUp { from { opacity: 0; transform: translate(-50%, 10px); } }
.gx-toast .gd-toast i.gx-life { width: 100%; transform-origin: left; animation: twLife 6s linear forwards; }
.gx-menu { position: absolute; z-index: 4; top: 34px; left: 40%; display: flex; flex-direction: column; padding: 5px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--sh-3); }
.gx-menu.r { left: auto; right: 0; top: 0; }
.gx-menu > span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; font-size: 13px; }
.gx-menu > span:hover { background: var(--hover); }
.gx-dlg { position: absolute; z-index: 4; top: 10px; right: 10px; width: min(300px, 90%); display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--sh-3); }
.gx-tip { position: absolute; z-index: 4; left: 30%; top: 46px; display: flex; gap: 8px; align-items: center; max-width: 280px; padding: 10px 12px; border-radius: 9px; background: var(--ink); color: var(--panel); font-size: 12.5px; box-shadow: var(--sh-3); }
.gx-pre { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 9px; background: var(--accent-bg); color: var(--accent); font-size: 13px; font-weight: 550; }
.gx-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--warn-bg); color: var(--warn); font-size: 11.5px; font-weight: 600; }
.gx-bars { display: flex; flex-direction: column; gap: 6px; }
.gx-ruler { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; font: 500 10.5px/1 var(--mono); color: var(--faint); text-align: center; }
.gx-track { position: relative; height: 30px; border-radius: 7px; background: repeating-linear-gradient(90deg, var(--line2) 0 1px, transparent 1px 10%), var(--panel); border: 1px solid var(--line2); }
.gx-bar { position: absolute; top: 3px; bottom: 3px; display: flex; align-items: center; padding: 0 8px; border-radius: 5px; font-size: 11.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; transition: left .6s var(--ease), width .6s var(--ease), opacity .4s, transform .5s cubic-bezier(.2, 1.4, .4, 1); }
.gx-bar.leave { background: var(--r-leave); } .gx-bar.sick { background: var(--r-sick); }
.gx-bar.open { -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent); }
.gx-bar.drop { transform: translateY(-34px); opacity: 0; }
.gx-now { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--signal); transition: left .6s var(--ease); }
.gx-now::before { content: "сегодня"; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font: 600 9.5px/1.4 var(--mono); color: var(--signal); }
.gx-people { display: flex; flex-wrap: wrap; gap: 6px; min-height: 64px; padding: 10px; border-radius: 9px; border: 1px dashed var(--strong); background: var(--panel); align-content: flex-start; }
.gx-person { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 99px; background: var(--accent-bg); color: var(--accent); font-size: 12px; font-weight: 600; animation: gxPop .4s cubic-bezier(.2, 1.5, .4, 1); }
.gx-shift { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); }
.gx-shift.me { border-color: var(--accent); }
.gx-shift b { transition: opacity .25s, transform .25s; }
.gx-shift b.gx-out { opacity: 0; transform: translateY(-8px); }
.gx-cand { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); transition: opacity .4s, background-color .3s; }
.gx-cand em { font-style: normal; font-size: 12px; color: var(--bad); }
.gx-cand.x { opacity: .55; } .gx-cand.x b { text-decoration: line-through; }
.gx-cand.alt em { color: var(--mute); }
.gx-cand.pick { border-color: var(--ok); background: var(--ok-bg); }
.gx-cand.gx-hide, .gx-cand em.gx-hide { transform: none; }
.gx-groups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.gx-groups > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); min-height: 130px; }
.gx-groups > div > b { font-size: 13px; } .gx-groups > div > span { font-size: 11px; color: var(--mute); }
.gx-lane { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.gx-groups .gx-tag { font-size: 10.5px; height: auto; padding: 3px 6px; text-align: center; }
.gx-pill { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 99px; background: var(--sunk); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; transition: background-color .4s, color .4s; }
.gx-pill.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.gx-bal { display: flex; gap: 14px; align-items: flex-end; height: 130px; padding: 8px 4px 0; }
.gx-bal > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.gx-bal i { width: 70%; border-radius: 5px 5px 0 0; background: var(--brand); transition: height .9s var(--ease); }
.gx-bal span { font-size: 11px; color: var(--mute); } .gx-bal b { font: 600 11px/1 var(--mono); }
.gx-stamp { position: absolute; right: 12%; top: 10%; padding: 8px 16px; border: 3px solid var(--ok); border-radius: 8px; color: var(--ok); font: 700 20px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-8deg) scale(1.6); }
.gx-stamp.in { transform: rotate(-8deg) scale(1); transition: opacity .2s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.gx-keep { box-shadow: inset 0 0 0 2px var(--ok); }
.gx-lockflash td.lk, .gx-lockflash th.lk { animation: gxLock 1.4s var(--ease); }
@keyframes gxLock { 30% { background-color: color-mix(in srgb, var(--signal) 18%, transparent); } }
.gx-rowflash tbody tr:last-child td { animation: gxLock 1.4s var(--ease); }
.gx-chat { display: flex; flex-direction: column; gap: 8px; padding: 12px; min-height: 160px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, var(--panel)); border: 1px solid var(--line); }
.gx-bub { align-self: flex-start; max-width: 92%; padding: 9px 12px; border-radius: 4px 14px 14px 14px; background: var(--panel); box-shadow: var(--sh-1); font-size: 13px; line-height: 1.5; animation: gxPop .35s var(--ease); }
.gx-bub.typing { display: inline-flex; gap: 4px; padding: 12px; }
.gx-bub.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: gxDot 1s infinite; }
.gx-bub.typing i:nth-child(2) { animation-delay: .15s; } .gx-bub.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes gxDot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.gx-kv th { text-align: left; font-weight: 400; color: var(--mute); padding: 3px 14px 3px 0; font-size: 13px; }
.gx-kv td { font: 600 15px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.gx-log { display: flex; flex-direction: column; gap: 4px; min-height: 22px; }
.gx-log p { display: flex; gap: 10px; font-size: 12.5px; color: var(--ink2); animation: fadeUp .4s var(--ease); }
.gx-log b { font: 600 11px/1.6 var(--mono); color: var(--warn); }
.gx-passes { display: flex; flex-direction: column; gap: 8px; }
.gx-pass { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); transition: opacity .4s, filter .4s; }
.gx-pass b { display: block; font-size: 14px; } .gx-pass span { font-size: 12px; color: var(--mute); }
.gx-pass em { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--mute); }
.gx-pass.off { opacity: .45; filter: grayscale(1); }
.gx-pass.off em::before { content: "отключён · "; color: var(--bad); }

/* обозначения */
.gx-legend { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
.gx-lgt { padding: 18px; border-radius: 16px; background: var(--sunk); border: 1px solid var(--line); overflow-x: auto; }
.gx-lgl { display: flex; flex-direction: column; gap: 2px; }
.gx-lg { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 8px; border: 0; border-radius: 9px; background: none; text-align: left; font-size: 13.5px; color: var(--ink2); transition: background-color .2s, color .2s; }
.gx-lg.on { background: var(--panel); color: var(--ink); box-shadow: var(--sh-1); }
.gx-spot { position: relative; animation: gxSpot 1.2s var(--ease); box-shadow: inset 0 0 0 2px var(--signal) !important; }
@keyframes gxSpot { 0% { box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--signal) 40%, transparent); } }
.gx-todaym { display: inline-block; width: 22px; height: 18px; border-radius: 4px; background: var(--today-col); box-shadow: inset 0 0 0 1.5px var(--accent); }

/* отбор */
.gx-contest { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 18px; background: var(--sunk); border: 1px solid var(--line); }
.gx-cstages { display: flex; flex-wrap: wrap; gap: 6px; }
.gx-cstages span { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: var(--faint); background: var(--panel); border: 1px solid var(--line); transition: color .3s, background-color .3s, border-color .3s; }
.gx-cstages span.done { color: var(--ink2); }
.gx-cstages span.on { color: #fff; background: var(--signal); border-color: var(--signal); }
.gx-cl { position: relative; height: calc(8 * 44px); }
.gx-cr { position: absolute; left: 0; right: 0; top: 0; height: 40px; display: grid; grid-template-columns: 110px 50px 140px minmax(0, 1fr); gap: 12px; align-items: center; padding: 0 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font-size: 13.5px; transition: transform .7s cubic-bezier(.6, 0, .2, 1), opacity .4s, background-color .4s, border-color .4s; margin-bottom: 4px; }
.gx-cl .gx-cr { height: 40px; }
.gx-cr > span { color: var(--mute); font-size: 12px; }
.gx-cm { display: flex; align-items: center; gap: 8px; }
.gx-cm i { display: block; height: 6px; max-width: 80px; border-radius: 3px; background: var(--brand); }
.gx-cm small { font-size: 11.5px; color: var(--mute); }
.gx-cr em { font-style: normal; font-size: 12.5px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-cr.x { opacity: .45; } .gx-cr.x b { text-decoration: line-through; } .gx-cr.x em { color: var(--bad); }
.gx-cr.win { border-color: var(--ok); background: var(--ok-bg); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 15%, transparent); }
.gx-cr.win em { color: var(--ok); font-weight: 600; }

/* жизнь дня */
.gx-day { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 30px; align-items: center; padding: 24px; border-radius: 18px; background: var(--sunk); border: 1px solid var(--line); }
.gx-dial svg { width: 100%; display: block; }
.gx-ring { fill: none; stroke: var(--line); stroke-width: 18; }
.gx-arc { fill: none; stroke-width: 18; opacity: .35; transition: opacity .4s; }
.gx-arc.duty { stroke: var(--k2-fg); } .gx-arc.grace { stroke: var(--warn); } .gx-arc.lock { stroke: var(--mute); }
.gx-day[data-ph="duty"] .gx-arc.duty, .gx-day[data-ph="grace"] .gx-arc.grace, .gx-day[data-ph="lock"] .gx-arc.lock { opacity: 1; }
.gx-hand { transform-origin: 110px 110px; transform-box: view-box; transition: transform .14s linear; }
.gx-hand line { stroke: var(--signal); stroke-width: 3; stroke-linecap: round; }
.gx-hand circle, .gx-hub { fill: var(--signal); }
.gx-dtxt { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.gx-time { font: 500 30px/1.1 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gx-state { font-size: 14px; font-weight: 700; padding: 4px 10px; border-radius: 99px; transition: background-color .3s, color .3s; }
.gx-day[data-ph="duty"] .gx-state { color: var(--k2-fg); background: var(--k2-bg); }
.gx-day[data-ph="grace"] .gx-state { color: var(--warn); background: var(--warn-bg); }
.gx-day[data-ph="lock"] .gx-state { color: var(--bad); background: var(--bad-bg); }
.gx-dwho { font-size: 14px; color: var(--ink2); line-height: 1.5; }
.gx-dtxt table { margin-top: 6px; transition: filter .4s; }
.gx-locked td { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--hatch) 3px 4px); }
.gx-locked .mk { filter: grayscale(.8); opacity: .7; }

/* клавиши */
.gx-keys { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 26px; align-items: start; padding: 22px; border-radius: 18px; background: var(--sunk); border: 1px solid var(--line); }
.gx-kb { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.gx-kb > div { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mute); }
.gx-key { min-width: 38px; height: 34px; display: inline-grid; place-items: center; padding: 0 8px; font: 600 13px/1 var(--mono); border-radius: 8px; border: 1px solid var(--line); border-bottom-width: 3px; background: var(--panel); color: var(--ink); transition: transform .08s, border-bottom-width .08s, background-color .15s, color .15s; }
.gx-key.down { transform: translateY(2px); border-bottom-width: 1px; background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.gx-keys .gx-rel { position: relative; overflow: hidden; border-radius: 10px; }
.gx-focus { box-shadow: inset 0 0 0 2px var(--accent) !important; background: var(--accent-bg); transition: box-shadow .15s; }
.gx-kinsp { position: absolute; top: 6px; right: 6px; bottom: 6px; width: 150px; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 9px; background: var(--panel); box-shadow: var(--sh-3); font-size: 12px; transform: translateX(120%); opacity: 0; transition: transform .35s var(--ease), opacity .3s; }
.gx-kinsp.in { transform: none; opacity: 1; }
.gx-ksay { grid-column: 1 / -1; font: 600 13px/1 var(--mono); color: var(--accent); min-height: 14px; }

/* вопросы */
.gx-faq { display: flex; flex-direction: column; gap: 10px; }
.gx-qa { display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--d), transform .6s var(--ease) var(--d); }
.gx-ch.in .gx-qa { opacity: 1; transform: none; }
.gx-q { align-self: flex-end; max-width: 80%; padding: 11px 16px; border: 0; border-radius: 16px 16px 4px 16px; background: var(--brand); color: var(--on-brand); font-size: 14px; font-weight: 550; text-align: left; transition: transform .2s, box-shadow .2s; }
.gx-q:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.gx-q:not(.on) { background: var(--panel); color: var(--ink); border: 1px solid var(--line); }
.gx-a { display: flex; }
.gx-a .gx-bub { max-width: 80%; font-size: 14px; }

@media (max-width: 1080px) {
  .gx-body { grid-template-columns: minmax(0, 1fr); }
  .gx-rail-nav { display: none; }
  .gx-tasks { grid-template-columns: minmax(0, 1fr); }
  .gx-tlist { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .gx-ti { flex: none; }
}
@media (max-width: 760px) {
  .gx-cover-in { padding: 24px 16px 28px; }
  .gx-mosaic { width: 120%; opacity: .55; }
  .gx-body { padding: 20px 16px 0; }
  .gx-ch-h { gap: 12px; } .gx-num { font-size: 40px; }
  .gx-rights, .gx-legend, .gx-day, .gx-keys, .gx-split { grid-template-columns: minmax(0, 1fr); }
  .gx-badge { grid-row: auto; }
  .gx-frame { padding: 12px; }
  .gx-cap { flex-direction: column; }
  .gx-cr { grid-template-columns: 90px 40px minmax(0, 1fr); } .gx-cr .gx-cm { display: none; }
  .gx-day { padding: 16px; } .gx-dial { max-width: 220px; }
  .gx-groups { grid-template-columns: repeat(5, minmax(56px, 1fr)); overflow-x: auto; }
  .gx-rail .gx-stop span { font-size: 11px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .gx-mosaic span, .gx-mosaic .mk, .gx-scan, .gx-cover-in > * { animation: none; }
  .gx-ch .gx-ch-h, .gx-ch .gx-ch-b, .gx-can li, .gx-cant li, .gx-qa { opacity: 1; transform: none; transition: none; }
}

/* ---------- объявления ---------- */
.nav-n { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 99px; background: var(--signal); color: #fff; font: 700 10.5px/1 var(--sans); font-style: normal; animation: gxPop .4s cubic-bezier(.2, 1.5, .4, 1); }
.tabbar .nav-n { position: absolute; top: 0; left: calc(50% + 4px); min-width: 16px; height: 16px; font-size: 9.5px; }
.tabbar a { position: relative; }
body.side-min .side .nav-n { position: absolute; top: 3px; right: 3px; min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; }
body.side-min .nav-i { position: relative; }
.nt { position: relative; display: flex; gap: 14px; padding: 16px 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); transition: opacity .25s, transform .25s; }
.nt > .avatar { margin-top: 2px; }
.nt.imp { border-color: color-mix(in srgb, var(--signal) 35%, var(--line)); background: linear-gradient(90deg, color-mix(in srgb, var(--signal) 6%, var(--panel)), var(--panel) 60%); }
.nt.imp::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--signal); }
.nt-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.nt-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; }
.nt-h b { font-size: 14px; }

.nt-to { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--sunk); color: var(--ink2); font-size: 12px; font-weight: 600; }
.nt-sp { flex: 1; }
.nt-h time { font-size: 12px; color: var(--mute); }
.nt-tag { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font: 700 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--signal); }
.nt-text { font-size: 15.5px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.nt-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 4px; }
.nt-ack { animation: ntPulse 2s ease-in-out infinite; }
@keyframes ntPulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--signal) 18%, transparent); } }
.nt-stat { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font-size: 12.5px; color: var(--ink2); }
.nt-stat:hover span:first-of-type { text-decoration: underline; }
.nt-ring { width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(var(--ok) calc(var(--p) * 360deg), var(--line) 0); -webkit-mask: radial-gradient(circle, transparent 4.5px, #000 5px); mask: radial-gradient(circle, transparent 4.5px, #000 5px); }
.nt-until { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--mute); }
@media (max-width: 760px) {
  .nt { padding: 14px; gap: 10px; }
  .nt > .avatar { width: 28px; height: 28px; }

}

/* ---------- Вымпел на телефоне ---------- */
.in-wrap { display: flex; flex-direction: column; gap: 20px; }
.in-phone { position: relative; align-self: center; width: 190px; height: 300px; padding: 10px; border-radius: 34px; background: #0e1520; box-shadow: var(--sh-3), inset 0 0 0 2px #2a3646; }
.in-notch { position: absolute; top: 14px; left: 50%; width: 60px; height: 16px; margin-left: -30px; border-radius: 10px; background: #000; }
.in-screen { height: 100%; border-radius: 26px; overflow: hidden; padding: 38px 14px 14px; background: radial-gradient(circle at 30% 20%, #2c4a70, #14273d 70%); }
.in-time { position: absolute; top: 15px; left: 28px; font: 600 10px/1 var(--sans); color: #fff; }
.in-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; }
.in-grid > i { aspect-ratio: 1; border-radius: 9px; background: rgba(255, 255, 255, .16); animation: gxCell .5s var(--ease) var(--d) backwards; }
.in-app { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 500 7.5px/1 var(--sans); color: #fff; animation: inDrop 1s cubic-bezier(.3, 1.5, .5, 1) .5s backwards; }
.in-app img { width: 100%; min-width: 0; aspect-ratio: 1; border-radius: 9px; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }
@keyframes inDrop { from { opacity: 0; transform: translateY(-60px) scale(1.6); } }
.in-txt { display: flex; flex-direction: column; gap: 14px; }
.in-lead { font-size: 14.5px; line-height: 1.55; color: var(--ink2); }
.in-tabs { display: inline-flex; align-self: flex-start; padding: 3px; border-radius: 10px; background: var(--sunk); border: 1px solid var(--line); }
.in-tabs button { height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: none; font-size: 13px; font-weight: 600; color: var(--mute); }
.in-tabs button.on { background: var(--panel); color: var(--ink); box-shadow: var(--sh-1); }
.in-steps { display: flex; flex-direction: column; gap: 10px; }
.in-steps li { display: flex; align-items: baseline; gap: 10px; font-size: 14px; line-height: 1.6; animation: fadeUp .4s var(--ease) backwards; }
.in-steps li:nth-child(2) { animation-delay: .06s; } .in-steps li:nth-child(3) { animation-delay: .12s; } .in-steps li:nth-child(4) { animation-delay: .18s; }
.in-steps li > b { flex: none; width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--brand); color: var(--on-brand); font: 600 11px/1 var(--mono); }
.in-pill { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; margin: 0 2px; border-radius: 6px; background: var(--sunk); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; vertical-align: 1px; }
.in-go { align-self: flex-start; height: 42px; padding: 0 18px; font-size: 14.5px; }
.in-warn { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: 12.5px; line-height: 1.5; }
.in-warn .ico { margin-top: 2px; }
@media (display-mode: standalone) { .lf-sign { bottom: calc(16px + env(safe-area-inset-bottom)); } }

@keyframes bnWave { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(9); opacity: 0; } }

/* ==========================================================================
   Объявления: стена баннеров
   ========================================================================== */
.bd { position: relative; overflow: hidden; isolation: isolate; display: block; padding: 0; border: 0; border-radius: 20px; text-align: left; color: #f3efe6; cursor: pointer; font: inherit;
  box-shadow: 0 10px 30px rgba(14, 21, 32, .12), 0 2px 6px rgba(14, 21, 32, .06);
  transition: transform .45s var(--ease), box-shadow .35s; animation: bdIn .7s var(--ease) calc(var(--i) * 70ms) backwards; }
@keyframes bdIn { from { opacity: 0; transform: translateY(24px); } }
.bd:hover, .bd:focus-visible { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(14, 21, 32, .24), 0 4px 12px rgba(14, 21, 32, .1); z-index: 3; }
.bd.s-l { grid-column: span 4; grid-row: span 3; }
.bd.s-t { grid-column: span 2; grid-row: span 4; }
.bd.s-m { grid-column: span 2; grid-row: span 2; }
.bd.s-w { grid-column: span 4; grid-row: span 1; }
.bd.s-s { grid-column: span 2; grid-row: span 1; }
.bd.later { filter: saturate(.55); opacity: .82; }
.bd.fresh::after { content: "новое"; position: absolute; top: 12px; right: 12px; z-index: 5; padding: 4px 8px; border-radius: 99px; background: var(--signal); color: #fff; font: 700 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* тона */
.t-blueprint { background: linear-gradient(140deg, #123a66, #0a2240); }
.t-winter { background: radial-gradient(ellipse at 70% 0%, #2b4f8c, #0b1730 70%); }
.t-night { background: linear-gradient(150deg, #1a2433, #0e1520); }
.t-autumn { background: linear-gradient(170deg, #c96b2c, #7a2e1a 85%); }
.t-brand { background: linear-gradient(150deg, #1f3955, #11223a); }
.t-paper { background: #f6f1e6; color: #1b2430; box-shadow: 0 10px 30px rgba(14, 21, 32, .1), inset 0 0 0 1px rgba(20, 30, 40, .08); }
.t-cream { background: linear-gradient(150deg, #fff3dc, #f6dfb8); color: #3a2410; }
.t-gold { background: linear-gradient(150deg, #3a2e10, #1d170a); color: #f6d58a; }
.t-green { background: linear-gradient(150deg, #2a4a34, #142619); }
.t-spring { background: linear-gradient(160deg, #ffe3ec, #f7c6d6); color: #5a1b33; }
.t-ember { background: radial-gradient(ellipse at 20% 100%, #5a2410, #140b07 70%); }

/* снег, гирлянда, листья */
@keyframes bdFall { to { transform: translate(var(--x), 110vh); } }
@keyframes bdFallBox { from { top: -8px; } to { top: 105%; transform: translateX(var(--x)); } }
@keyframes bdBlink { 50% { opacity: .35; box-shadow: none; } }
@keyframes bdLeaf { 0% { top: -20px; transform: translateX(0) rotate(0); } 50% { transform: translateX(var(--x)) rotate(calc(var(--r) / 2)); } 100% { top: 105%; transform: translateX(0) rotate(var(--r)); } }

/* «готовится обновление» */
/* чертёж — в правом верхнем углу, над подписью: крупный заголовок внизу на него не наезжает */
@keyframes bdPlan { 0% { stroke-dashoffset: 1; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@media (max-width: 900px) { .bd-plan { right: 6%; width: 50%; opacity: .7; } }
@keyframes bdSpin { to { transform: rotate(360deg); } }
@keyframes bdProg { 0% { transform: translateX(-100%); width: 30%; } 60% { width: 60%; } 100% { transform: translateX(260%); width: 30%; } }

/* телефон, клавиша, торт */
@keyframes bdDrop { 0%, 10% { opacity: 0; transform: translateY(-50px) scale(1.4); } 30%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes bdPress { 0%, 70%, 100% { transform: none; border-bottom-width: 4px; } 78% { transform: translateY(3px); border-bottom-width: 1px; } }
@keyframes bdFlick { to { transform: scale(.85, 1.1) rotate(-4deg); } }

/* звезда, тюльпаны, пламя, страницы */
@keyframes bdGrow { from { transform: scaleY(0); } }
@keyframes bdFlame { to { transform: scale(.9, 1.08) skewX(3deg); } }
@keyframes bdPage { 0%, 20% { transform: rotateY(0); } 50%, 100% { transform: rotateY(-178deg); } }

/* раскрытый баннер */
@keyframes bdSketch { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bdFlip { from { transform: perspective(300px) rotateX(-80deg); opacity: .3; } }
@media (max-width: 900px) {
  .bd.s-l { grid-column: span 2; grid-row: span 3; }
  .bd.s-w { grid-column: span 2; }
  .bd.s-t { grid-column: span 1; grid-row: span 3; }
  .bd.s-m { grid-column: span 1; grid-row: span 2; }
  .bd.s-s { grid-column: span 1; grid-row: span 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bd, .bd *, .bd-card, .bd-card * { animation: none !important; }
}
@keyframes bdSway { 50% { transform: rotate(-6deg) translateY(-6px); } }

/* личное: плотность таблицы и спокойное движение */
html.dense .mx td { height: 24px; } html.dense .mx th.nm button { height: 24px; } html.dense .mx .mk { font-size: 10px; }
html.roomy .mx td { height: 38px; } html.roomy .mx th.nm button { height: 38px; }
html.calm *, html.calm *::before, html.calm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
html.calm .st-cv { display: block; }


/* ---------- разделы роты в «Параметрах»: одна карточка с разделителями, светлый прогноз ---------- */
.cz { max-width: none; padding-bottom: 40px; }
.cz .pz-lead { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--mute); margin-bottom: 14px; }

/* разделы: одна карточка, внутри части через разделитель */
.cz .pm-split { grid-template-columns: minmax(0, 1fr) 380px; }
.cz .pm-ctrl { gap: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-1); }
.cz .pm-card { border: 0; border-top: 1px solid var(--line2); border-radius: 0; box-shadow: none; background: none; padding: 20px 22px 22px; }
.cz .pm-card:first-child { border-top: 0; }
.cz .pm-card > header h3 { font-size: 14.5px; font-weight: 600; }
.cz .pm-card > header p { font-size: 12.5px; }
.cz .pm-panel.in .pm-card, .cz .pm-panel.in .fc { animation: fadeUp .4s var(--ease) backwards; }
.cz .pm-panel.in .pm-card:nth-child(2) { animation-delay: .05s; } .cz .pm-panel.in .pm-card:nth-child(3) { animation-delay: .1s; } .cz .pm-panel.in .pm-card:nth-child(4) { animation-delay: .15s; } .cz .pm-panel.in .pm-card:nth-child(5) { animation-delay: .2s; }
.cz .pm-panel.in .fc { animation-delay: .1s; }
.cz .pm-big b { font-size: 28px; }

/* прогноз: светлая карточка, при пересчёте сверху бежит полоса */
.cz .fc { overflow: hidden; border-radius: 16px; box-shadow: var(--sh-1); }
.cz .fc::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 30%; background: var(--signal); transform: translateX(-100%); opacity: 0; }
.cz .fc.busy::before { opacity: 1; animation: fcRun 1s var(--ease) infinite; }
@keyframes fcRun { to { transform: translateX(340%); } }
.cz .fc-h h3 { font: 500 19px/1.1 var(--serif); letter-spacing: -.01em; }
.cz .fc-k > b { font-size: 24px; }
.cz .ch-group { border-radius: 14px; }
.cz .vault { border-radius: 16px; padding: 18px 20px; }
.cz .ch-vault { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.cz .pilot { border-radius: 16px; }
@media (max-width: 1280px) { .cz .pm-split { grid-template-columns: minmax(0, 1fr); } .cz .fc { position: static; } }
@media (max-width: 760px) {
  .cz .pm-card { padding: 16px; }
}

/* ==========================================================================
   График: хвост отдыха, линия «сегодня», шкала нормы, липкие группы, перекрестие выбора
   ========================================================================== */
:root { --tail: color-mix(in srgb, var(--strong) 70%, transparent); }
/* после наряда — тонкая линия через дни отдыха: видно, кто отдыхает и сколько ещё */
.mx td.rs::before, .mx td.rs0::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2px; margin-top: -1px; background: var(--tail); pointer-events: none; transition: background-color .25s; }
.mx td.rs0::before { left: 50%; }
.mx td.rse::before { right: 35%; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, var(--tail), transparent); }
.mx .mk { z-index: 1; }
.mx td.past.rs::before, .mx td.past.rs0::before { opacity: .45; }
.mx tbody tr:hover td.rs::before, .mx tbody tr:hover td.rs0::before { background-color: var(--mute); }
.mx tbody tr:hover td.rse::before { background: linear-gradient(90deg, var(--mute), transparent); }
.mx tr.rowon td.rs::before, .mx tr.rowon td.rs0::before { background-color: var(--accent); opacity: 1; }
.mx tr.rowon td.rse::before { background: linear-gradient(90deg, var(--accent), transparent); }
.mx.reveal td.rs::before, .mx.reveal td.rs0::before { animation: tailIn .6s var(--ease) .35s backwards; transform-origin: left; }
@keyframes tailIn { from { transform: scaleX(0); } }

/* перекрестие выбранной клетки: строка и столбец чуть подсвечены */
.mx tr.rowon > th.nm { background: var(--hover); box-shadow: inset 3px 0 0 var(--accent); }
.mx tr.rowon > td:not(.sum) { background-color: color-mix(in srgb, var(--accent) 4%, transparent); }
.mx col.colon { background: var(--accent-bg); }

/* сегодня: красная черта по всей высоте и точка над датой */
.mx td.today { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--signal) 40%, transparent); }
.mx th.dh.today { box-shadow: inset 2px 0 0 var(--signal); }
.mx th.dh.today::before { content: ""; position: absolute; left: -3px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 45%, transparent); animation: nowPulse 2.6s ease-out infinite; }
@keyframes nowPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }

/* итог: полоска до нормы — подложка зоны нормы, заливка нарядов */
.mx th.sum small { display: block; margin-top: 3px; font: 500 10px/1 var(--mono); color: var(--faint); }
.mx td.sum .sum-n { display: inline-block; min-width: 14px; text-align: right; }
.nb { position: relative; display: inline-block; width: 40px; height: 6px; vertical-align: middle; border-radius: 3px; overflow: hidden;
  background: linear-gradient(90deg, transparent calc(var(--a) * 100%), color-mix(in srgb, var(--ok) 26%, transparent) calc(var(--a) * 100%) calc(var(--b) * 100%), transparent calc(var(--b) * 100%)), var(--sunk); }
.nb i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--n) * 100%); border-radius: 3px; background: var(--faint); transition: width .5s var(--ease); }
.nb.ok i { background: var(--ink2); }
.nb.over i { background: var(--bad); }
.mx.reveal .nb i { animation: nbIn .8s var(--ease) .25s backwards; }
@keyframes nbIn { from { width: 0; } }

/* группы: заголовок прилипает под шапкой — всегда видно, чья это часть списка */
.mx tr.gsec td { position: sticky; top: 50px; z-index: 3; }
.mx tr.gsec:not(:first-child) td { top: 42px; }
.mx tr.gsec td::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line); }

/* ==========================================================================
   Люди: сводка над таблицей, месяц человека полоской, шкала нормы
   ========================================================================== */
.pp-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 14px; border-radius: 12px; overflow: hidden; background: var(--line); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.pp-sum > div { display: flex; align-items: baseline; gap: 8px; padding: 12px 16px; background: var(--panel); animation: fadeUp .4s var(--ease) backwards; }
.pp-sum > div:nth-child(2) { animation-delay: .04s; } .pp-sum > div:nth-child(3) { animation-delay: .08s; } .pp-sum > div:nth-child(4) { animation-delay: .12s; }
.pp-sum b { font: 600 22px/1 var(--mono); letter-spacing: -.02em; color: var(--ink); }
.pp-sum span { font-size: 12.5px; color: var(--mute); }
.pp-sum .warn b { color: var(--warn); }
.tbl td.pp-m { min-width: 200px; }
.pp-m .month-n { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pp-m .month-n b { min-width: 12px; }
.pp-strip { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1.5px; width: 160px; height: 10px; }
.with-gn { white-space: nowrap; }
.pp-strip i { border-radius: 1.5px; background: var(--sunk); }
.pp-strip i.k1 { background: var(--k1-fg); } .pp-strip i.k2 { background: var(--k2-fg); } .pp-strip i.k3 { background: var(--k3-fg); } .pp-strip i.k4 { background: var(--k4-fg); } .pp-strip i.k5 { background: var(--k5-fg); }
.pp-strip i[class] { animation: gxPop .35s var(--ease) backwards; }
.pp-strip::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: calc((var(--t) - .5) / var(--n) * 100%); width: 1.5px; border-radius: 1px; background: var(--signal); }
.tbl tr.away td:first-child b { color: var(--ink2); }
.state.ok { color: var(--mute); }
.state.ok i { background: var(--ok); opacity: .7; }
@media (max-width: 900px) { .pp-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-strip { width: 110px; } .tbl td.pp-m { min-width: 130px; } }

/* ==========================================================================
   Параметры: меню разделов слева, раздел справа, живой предпросмотр
   ========================================================================== */
.ps-page { max-width: 1320px; padding-bottom: 100px; }
.ps-grid { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 32px; align-items: start; }

/* меню: подложка переезжает к выбранному пункту */
.ps-menu { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px; }
.ps-ink { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 12px; background: var(--panel); box-shadow: var(--sh-1), 0 0 0 1px var(--line); pointer-events: none; opacity: 0; }
.ps-ink::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 2px 2px 0; background: var(--signal); }
.ps-menu.ready .ps-ink { opacity: 1; transition: transform .45s cubic-bezier(.3, 1.2, .5, 1), width .3s, height .3s, opacity .2s; }
.ps-grp { display: flex; align-items: center; gap: 6px; padding: 16px 12px 6px; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.ps-grp:first-of-type { padding-top: 4px; }
.ps-i { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 0; border-radius: 12px; background: none; text-align: left; color: var(--ink2); transition: background-color .15s; }
.ps-i:hover { background: var(--hover); }
.ps-i.on:hover { background: none; }
.ps-i-ic { position: relative; width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--sunk); color: var(--mute); transition: background-color .3s, color .3s, transform .3s var(--ease); }
.ps-i:hover .ps-i-ic { transform: scale(1.06); }
.ps-i.on .ps-i-ic { background: var(--brand); color: var(--on-brand); }
.ps-i.warn .ps-i-ic::after { content: ""; position: absolute; right: -2px; top: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 2px var(--bg); }
.ps-i-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ps-i-t b { font-size: 14px; font-weight: 600; color: var(--ink); }
.ps-i-t small { font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* раздел */
.ps-body { min-width: 0; }
.ps-mine.in .ps-h, .ps-mine.in .ps-ctl > *, .ps-mine.in .ps-pv, .ps-mine.in .ps-rule { animation: psIn .45s var(--ease) backwards; }
.ps-mine.in .ps-ctl > :nth-child(2) { animation-delay: .05s; } .ps-mine.in .ps-ctl > :nth-child(3) { animation-delay: .1s; }
.ps-mine.in .ps-pv { animation-delay: .08s; }
.ps-mine.in .ps-rule:nth-child(2) { animation-delay: .04s; } .ps-mine.in .ps-rule:nth-child(3) { animation-delay: .08s; } .ps-mine.in .ps-rule:nth-child(4) { animation-delay: .12s; } .ps-mine.in .ps-rule:nth-child(5) { animation-delay: .16s; } .ps-mine.in .ps-rule:nth-child(6) { animation-delay: .2s; }
.ps-zone.in { animation: psIn .35s var(--ease); }
@keyframes psIn { from { opacity: 0; transform: translateY(8px); } }
.ps-h { margin-bottom: 20px; }
.ps-h h2 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.ps-h p { margin-top: 4px; font-size: 13.5px; color: var(--mute); }
.ps-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: start; }
.ps-ctl { display: flex; flex-direction: column; gap: 24px; }
.ps-f { display: flex; flex-direction: column; gap: 10px; }
.ps-f-t b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.ps-f-t span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--mute); }

/* переключатель с бегунком */
.ps-seg { position: relative; display: inline-flex; flex-wrap: wrap; align-self: flex-start; max-width: 100%; gap: 2px; padding: 3px; border-radius: 11px; background: var(--sunk); border: 1px solid var(--line2); }
.ps-thumb { position: absolute; z-index: 0; left: 0; top: 0; border-radius: 8px; background: var(--panel); box-shadow: var(--sh-1), 0 0 0 1px var(--line2); pointer-events: none; opacity: 0; }
.ps-seg.ready .ps-thumb { opacity: 1; transition: left .35s var(--ease), top .35s var(--ease), width .35s var(--ease), height .35s var(--ease); }
.ps-o { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: none; font-size: 13px; font-weight: 500; color: var(--mute); white-space: nowrap; transition: color .2s; }
.ps-o:hover, .ps-o.on { color: var(--ink); }
.ps-o .ico { color: var(--faint); transition: color .2s; }
.ps-o.on .ico { color: var(--signal); }

/* предпросмотр: рамка-окно с подписью */
.ps-pv { position: sticky; top: 20px; margin: 0; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--sh-2); overflow: hidden; }
.ps-pv figcaption { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line2); font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.ps-pv figcaption::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); animation: nowPulse 2.6s ease-out infinite; }
.ps-pv-in { padding: 4px 0; }

/* мини-график */
.mb { --h: 30px; font-size: 12px; }
.d-dense .mb { --h: 24px; } .d-roomy .mb { --h: 38px; }
.mb-r { display: grid; grid-template-columns: 104px repeat(9, minmax(0, 1fr)) 58px; align-items: center; height: var(--h); border-bottom: 1px solid var(--line2); transition: height .35s var(--ease); animation: fadeUp .4s var(--ease) calc(var(--r, 0) * 45ms) backwards; }
.mb-r:last-child { border-bottom: 0; }
.mb-hd { height: 34px; border-bottom-color: var(--line); }
.mb-n { padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.mb-hd .mb-n { font-size: 11px; color: var(--mute); }
.mb-d { text-align: center; }
.mb-d b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 5px; font: 500 11.5px/1 var(--mono); color: var(--ink2); }
.mb-d.we b { color: var(--we-ink); }
.mb-d.today b { background: var(--signal); color: #fff; }
.mb-c { position: relative; height: 100%; display: grid; place-items: center; }
.mb-c.today { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--signal) 40%, transparent); }
/* метка во всю клетку — как в графике «в руке» */
.mb-c .mk { position: absolute; inset: 1px 0; min-width: 0; height: auto; border-radius: 0; font-size: 9.5px; animation: mkIn .45s var(--ease) calc(var(--r, 0) * 60ms + .15s) backwards; }
.mb-s { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding-right: 12px; font: 600 11.5px/1 var(--mono); }
.mb-hd .mb-s { font: 500 11px/1 var(--sans); color: var(--mute); }
.mb-s .nb { width: 26px; }

/* мини-окно: какой экран откроется */
.ma { display: grid; grid-template-columns: 46px minmax(0, 1fr); height: 230px; }
.ma-side { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; background: var(--side); border-right: 1px solid var(--line2); }
.ma-side img { width: 22px; height: 22px; border-radius: 6px; margin-bottom: 8px; }
.ma-side span { width: 30px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: var(--faint); transition: background-color .3s, color .3s, box-shadow .3s; }
.ma-side span.on { background: var(--panel); color: var(--signal); box-shadow: var(--sh-1), 0 0 0 1px var(--line); }
.ma-main { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; min-width: 0; animation: psIn .4s var(--ease); }
.ma-top { display: flex; align-items: center; gap: 10px; }
.ma-top b { font-size: 16px; letter-spacing: -.01em; }
.ma-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--line); font-size: 11.5px; color: var(--ink2); animation: psIn .4s var(--ease) .1s backwards; }
.ma-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.ma-grid i { height: 18px; border-radius: 4px; background: var(--sunk); animation: gxPop .35s var(--ease) calc(var(--i) * 10ms) backwards; }
.ma-grid i.k { background: var(--k2-bg); box-shadow: inset 0 0 0 1.5px var(--k2-fg); }
.ma-lines { display: flex; flex-direction: column; gap: 10px; }
.ma-lines i { height: 12px; border-radius: 6px; background: var(--sunk); transform-origin: left; animation: tailIn .5s var(--ease) calc(var(--i) * 50ms) backwards; }

/* пароль и пропуск */
.ps-pw { display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.ps-meter { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--mute); }
.ps-meter > div { display: flex; gap: 4px; }
.ps-meter i { width: 30px; height: 4px; border-radius: 2px; background: var(--line); transition: background-color .3s; }
.ps-meter[data-n="1"] i:nth-child(-n+1) { background: var(--bad); }
.ps-meter[data-n="2"] i:nth-child(-n+2) { background: var(--warn); }
.ps-meter[data-n="3"] i:nth-child(-n+3) { background: var(--ok); }
.ps-meter[data-n="4"] i { background: var(--ok); }
.ps-pass { position: relative; overflow: hidden; margin: 18px; padding: 16px 18px 18px 22px; border-radius: 14px; background: #0e1520; color: #f3efe6; box-shadow: 0 20px 44px rgba(14, 21, 32, .25); }
.ps-pass::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--signal); }
.ps-pass-top { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px dashed rgba(255, 255, 255, .16); font-size: 13px; }
.ps-pass-top img { width: 20px; height: 20px; border-radius: 5px; }
.ps-pass-top span { margin-left: auto; font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #8b98a8; }
.ps-pass-who { display: flex; align-items: center; gap: 12px; }
.ps-pass-who .avatar { width: 44px; height: 44px; background: #f3efe6; color: #0e1520; }
.ps-pass-who > div > b { display: block; font-size: 16px; }
.ps-pass-who > div > span { display: block; margin-top: 2px; font-size: 12.5px; color: #9aa6b4; }
.ps-pass dl { display: flex; gap: 28px; margin: 16px 0 0; }
.ps-pass dt { font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #6d7a8a; }
.ps-pass dd { margin: 5px 0 0; font: 600 14px/1 var(--mono); }
.ps-pass-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .14) 50%, transparent 65%); transform: translateX(-110%); animation: sxSweep 1.6s var(--ease) .4s; }
@keyframes sxSweep { to { transform: translateX(110%); } }

/* правила роты для справки */
.ps-rules { border-radius: 16px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--sh-1); }
.ps-rule { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--line2); }
.ps-rule:first-child { border-top: 0; }
.ps-rule b { display: block; font-size: 14px; font-weight: 600; }
.ps-rule span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--mute); }
.ps-big { font: 600 22px/1 var(--mono) !important; letter-spacing: -.02em; }
.ps-cells { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.ps-rest { display: flex; gap: 3px; }
.ps-rest span { width: 30px; height: 22px; display: grid; place-items: center; border-radius: 5px; font: 600 9.5px/1 var(--mono); background: repeating-linear-gradient(135deg, var(--sunk) 0 3px, var(--hatch) 3px 4px); }
.ps-rest .duty { background: var(--k2-bg); color: var(--k2-fg); }
.ps-rest .next { width: auto; padding: 0 6px; background: var(--ok-bg); color: var(--ok); }

@media (max-width: 1180px) { .ps-cols { grid-template-columns: minmax(0, 1fr); } .ps-pv { position: static; } }
@media (max-width: 900px) {
  .ps-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ps-menu { position: relative; top: 0; flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 2px 4px 4px; }
  .ps-grp { display: none; }
  .ps-i { flex: none; padding: 7px 12px 7px 7px; }
  .ps-i-t small { display: none; }
  .ps-ink::before { display: none; }
  .ps-rule { grid-template-columns: minmax(0, 1fr); }
  .ps-cells { justify-content: flex-start; }
  .mb-r { grid-template-columns: 84px repeat(9, minmax(0, 1fr)) 34px; }
  .mb-s .nb { display: none; }
}

/* хвост отдыха по желанию: «Параметры → Вид» */

/* баннер выпуска «Хвост вымпела»: хвосты прочерчиваются, черта «сегодня» идёт по полю */
@keyframes bnTail { from { stroke-dashoffset: var(--l); } }
@keyframes bnTip { from { opacity: 0; } }
/* в покое (карточка без наведения) вымпел нарисован целиком; наведение прорисовывает его заново */
@keyframes bnStaff { from { transform: scaleY(0); } }
@keyframes bnNow { from { transform: translateX(380px); } to { transform: translateX(860px); } }

/* живая схема: хвост отдыха */
@media (max-width: 760px) { .tw-tails { grid-template-columns: repeat(9, minmax(0, 1fr)); } .tw-tc:nth-child(9) { border-right: 0; } }

/* баннер «Вышел выпуск»: рисунок выпуска во всю карточку, снизу затемнение под текст */
.bd.rel { background: #0e1520; }
/* «Внесите отсутствия»: следующий месяц, дни отсутствий заштрихованы */

/* время смен дневальных: «Параметры → Состав», обозначения графика */
.sh-times { display: flex; flex-direction: column; gap: 8px; }
.sh-time { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; }
.sh-time input { font-family: var(--mono); font-size: 13px; }
.lg-shift { display: block; margin-top: 2px; font: 500 11px/1.4 var(--mono); color: var(--mute); }

.avatar.r-owner { background: var(--brand); color: var(--on-brand); }
.side-hq { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border: 1px dashed var(--strong); border-radius: 9px; background: none; color: var(--ink2); font-size: 13px; font-weight: 600; transition: background-color .15s, border-color .15s; }
.side-hq em { margin-left: auto; font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--faint); }
.side-hq:hover { background: var(--hover); border-color: var(--mute); }
.side-hq .ico { transition: transform .25s var(--ease); }
.side-hq:hover .ico { transform: translateX(-2px); }
body.side-min .side-hq span, body.side-min .side-hq em { display: none; }
body.side-min .side-hq { width: 40px; justify-content: center; padding: 0; }

/* ==========================================================================
   Первоначальная настройка роты: шаги слева, шаг справа, внизу «Отложить и выйти»
   ========================================================================== */
body.is-setup { background: var(--bg); }
.su { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.su-top { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--panel); }
.su-brand { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.su-brand .wordmark { font-size: 18px; }
.su-brand > i { width: 1px; height: 18px; background: var(--line); }
.su-brand > span { font-weight: 600; color: var(--ink2); }
.su-sp { flex: 1; }
.su-who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); }
.su-who .avatar { width: 26px; height: 26px; }
.su-body { flex: 1; display: grid; grid-template-columns: 260px minmax(0, 1fr); max-width: 1100px; width: 100%; margin: 0 auto; }
.su-side { padding: 32px 20px; border-right: 1px solid var(--line); }
.su-cap { font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; }
.su-rail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; position: relative; }
.su-rail li { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 13.5px; color: var(--faint); }
.su-rail li i { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line); font: 600 11px/1 var(--mono); font-style: normal; background: var(--bg); transition: background-color .3s, border-color .3s, color .3s; }
.su-rail li.done { color: var(--ink2); }
.su-rail li.done i { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.su-rail li.on { color: var(--ink); font-weight: 600; }
.su-rail li.on i { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); }
.su-note { margin-top: 22px; font-size: 12.5px; line-height: 1.5; color: var(--mute); }
.su-main { display: flex; flex-direction: column; min-width: 0; }
.su-pane { flex: 1; padding: 36px 40px 24px; }
.su-step { max-width: 640px; display: flex; flex-direction: column; gap: 16px; animation: psIn .4s var(--ease); }
.su-k { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--signal); }
.su-step h1 { font: 500 34px/1.05 var(--serif); letter-spacing: -.025em; }
.su-lead { font-size: 15px; line-height: 1.55; color: var(--ink2); }
.su-muted { font-size: 13px; color: var(--mute); }
.su-foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 14px 40px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); }
.su-later { color: var(--mute); }
.su-card { padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); box-shadow: var(--sh-1); }
.su-unit { display: flex; align-items: center; gap: 16px; }
.su-unit > b { font: 500 56px/.9 var(--serif); letter-spacing: -.04em; }
.su-unit span { display: block; font-size: 15px; font-weight: 600; }
.su-unit em { display: block; margin-top: 3px; font-style: normal; font-size: 13px; color: var(--mute); }
.su-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; font-size: 14px; color: var(--ink2); }
.su-list li { display: flex; align-items: center; gap: 8px; }
.su-list .ico { color: var(--ok); }
.su-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.su-pair { display: flex; align-items: center; gap: 8px; color: var(--mute); }
.su-pair input { width: 80px; }
.su-groups { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.su-g { display: grid; grid-template-columns: 26px minmax(0, 1fr) 90px 34px; gap: 8px; align-items: center; width: 100%; }
.su-g-n { font: 600 12px/1 var(--mono); color: var(--faint); text-align: center; }
.su-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.su-l { display: flex; flex-direction: column; gap: 6px; }
.su-l-h { display: flex; align-items: baseline; justify-content: space-between; font-size: 13.5px; }
.su-l-h span { font-size: 12px; color: var(--mute); }
.su-l textarea { font-size: 12.5px; resize: vertical; }
.su-leaders { display: flex; flex-direction: column; gap: 12px; }
.su-ld { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 12px; align-items: end; padding-bottom: 12px; border-bottom: 1px solid var(--line2); }
.su-ld > b { align-self: center; font-size: 14px; }
.su-duty { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.su-d { display: grid; grid-template-columns: 20px 44px minmax(0, 1fr) 70px 30px; gap: 10px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line2); cursor: pointer; }
.su-d:first-child { border-top: 0; }
.su-d b { display: block; font-size: 14px; font-weight: 600; }
.su-d small { font-size: 12px; color: var(--mute); }
.su-d em { font-style: normal; font-size: 12px; color: var(--mute); }
.su-h3 { margin-top: 6px; font-size: 14px; font-weight: 600; }
.su-times { display: flex; flex-direction: column; gap: 8px; }
.su-t { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; }
.su-sum { display: flex; flex-direction: column; margin: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.su-sum > div { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line2); }
.su-sum > div:first-child { border-top: 0; }
.su-sum dt { font-size: 13px; color: var(--mute); }
.su-sum dd { margin: 0; font-size: 14px; font-weight: 600; }
.su-mks { display: flex; flex-wrap: wrap; gap: 4px; }
.su-warn { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 12%, transparent); font-size: 13px; }
.su-warn .ico { color: var(--warn); }
.su.wait { align-items: center; justify-content: center; }
.su-wait { max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 24px; }
.su-wait h1 { font: 500 30px/1.1 var(--serif); }
.su-wait p { color: var(--mute); line-height: 1.55; }
@media (max-width: 860px) {
  .su-body { grid-template-columns: minmax(0, 1fr); }
  .su-side { padding: 14px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .su-rail { flex-direction: row; overflow-x: auto; gap: 6px; }
  .su-rail li span { display: none; }
  .su-rail li.on span { display: inline; }
  .su-cap, .su-note { display: none; }
  .su-pane { padding: 22px 16px; }
  .su-foot { padding: 12px 16px; }
  .su-grid, .su-lists, .su-list { grid-template-columns: minmax(0, 1fr); }
  .su-ld { grid-template-columns: minmax(0, 1fr); }
  .su-who { display: none; }
}

/* ==========================================================================
   «Что такое Вымпел»: до входа и первой главой руководства
   ========================================================================== */
.lf-about { position: absolute; top: 22px; right: 26px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--mute); transition: color .15s; }
.lf-about:hover { color: var(--ink); }
.login-side { position: relative; }
body.is-about { background: var(--bg); }
.ab { max-width: 1120px; margin: 0 auto; padding: 0 24px 40px; }
.ab-top { display: flex; align-items: center; gap: 12px; padding: 18px 0; }
.ab-logo { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.ab-logo .wordmark { font-size: 19px; }
.ab-sp { flex: 1; }
.ab-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: center; padding: 40px 0 56px; }
.ab-hero h1 { font: 500 clamp(36px, 4.6vw, 56px)/1.02 var(--serif); letter-spacing: -.03em; }
.ab-hero h1 em { font-style: italic; color: var(--mute); }
.ab-hero p { margin: 18px 0 24px; font-size: 16px; line-height: 1.6; color: var(--ink2); max-width: 34em; }
.ab-scene { padding: 10px 0; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--sh-2); font-size: 12.5px; }
.ab-r { display: grid; grid-template-columns: 112px repeat(9, minmax(0, 1fr)); align-items: center; height: 34px; border-bottom: 1px solid var(--line2); animation: fadeUp .5s var(--ease) calc(var(--r, 0) * 70ms) backwards; }
.ab-r:last-child { border-bottom: 0; }
.ab-r.hd { height: 30px; }
.ab-n { padding: 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-d { text-align: center; font: 500 11.5px/1 var(--mono); color: var(--ink2); }
.ab-c { position: relative; height: 100%; display: grid; place-items: center; }
.ab-c.today, .ab-d.today { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--signal) 45%, transparent); }
.ab-r.hd .ab-d.today { color: var(--signal); font-weight: 700; }
.ab-c .mk { min-width: 26px; height: 19px; font-size: 10px; animation: mkIn .45s var(--ease) calc(var(--r, 0) * 90ms + .3s) backwards; }
.ab-c.rs::before, .ab-c.rs0::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2px; margin-top: -1px; background: var(--tail); transform-origin: left; animation: tailIn .7s var(--ease) calc(var(--r, 0) * 90ms + .6s) backwards; }
.ab-c.rs0::before { left: 50%; }
.ab-c.rse::before { right: 35%; background: linear-gradient(90deg, var(--tail), transparent); }
.ab-body h2 { font: 500 30px/1.1 var(--serif); letter-spacing: -.02em; margin-bottom: 20px; }
.ab-feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ab-f { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); animation: fadeUp .5s var(--ease) calc(var(--i) * 70ms) backwards; }
.ab-f-i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-bg); color: var(--accent); }
.ab-f b { font-size: 15px; }
.ab-f p { font-size: 13.5px; line-height: 1.5; color: var(--mute); }
.ab-h3 { margin: 26px 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--mute); }
.ab-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ab-roles > div { display: flex; gap: 12px; padding: 16px; border-radius: 14px; border: 1px dashed var(--strong); }
.ab-role-i { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: var(--on-brand); }
.ab-roles b { font-size: 14px; }
.ab-roles p { margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--mute); }
.ab-start { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ab-start li { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 14px; background: var(--sunk); font-size: 13.5px; line-height: 1.45; color: var(--ink2); }
.ab-start i { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--signal); color: #fff; font: 700 12px/1 var(--mono); font-style: normal; }
.ab-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--mute); }
.gx-about { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 900px) {
  .ab-hero { grid-template-columns: minmax(0, 1fr); padding: 16px 0 32px; }
  .ab-feats { grid-template-columns: 1fr 1fr; }
  .ab-roles, .ab-start { grid-template-columns: minmax(0, 1fr); }
  .ab-r { grid-template-columns: 90px repeat(9, minmax(0, 1fr)); }
  .lf-about { top: 14px; right: 16px; }
}

/* ==========================================================================
   Вымпел | Штаб — штабная ведомость под вымпелом, в гибриде «Ясный» (22.10).
   Шапка — само полотнище: кобальт, красная полоса у древка (левый край экрана), раздвоенный хвост справа,
   «ШТАБ» жирным гротеском. Ниже — белый лист: тонкие линии вместо карточек, номера рот, отточия бланка.
   Спокойно для долгой работы: вес 600–800 (не 900), крупное — только числа, линии волосяные,
   движение медленное и редкое.
   Кобальт и белый; красный — только у древка и при тревоге. Токены переопределены на body.is-hq —
   кнопки, листы, меню и окна берут кобальт сами. Штаб всегда светлый: тёмным в нём только полотнище.
   ========================================================================== */
:root:has(body.is-hq) { background: #fbfbf9; color-scheme: light; }
body.is-hq {
  --cob: #2441b4; --cob-d: #1a3192; --cob-p: #eff2fb; --hoist: #d2402f;
  --bg: #fbfbf9; --side: #f4f5f8; --panel: #ffffff; --sunk: #f3f4f8; --hover: #eef1fb;
  --ink: #0d1733; --ink2: #2f3a57; --mute: #687189; --faint: #9ca4b8;
  --line: #e0e3eb; --line2: #eef0f5; --strong: #c3c9d8;
  --brand: var(--cob); --brand-h: var(--cob-d); --on-brand: #fff; --signal: var(--hoist);
  --accent: var(--cob); --accent-bg: rgba(36, 65, 180, .08); --ring: rgba(36, 65, 180, .3);
  --bad: #c0362a; --bad-bg: #fcebe8; --warn: #96600a; --warn-bg: #fbf1dc; --ok: #2b6a43; --ok-bg: #e6f1e9;
  --sh-1: 0 1px 2px rgba(13, 23, 51, .06); --sh-2: 0 6px 20px rgba(13, 23, 51, .08); --sh-3: 0 28px 70px rgba(13, 23, 51, .2), 0 4px 12px rgba(13, 23, 51, .08);
  --hq-f: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light; background: var(--bg); color: var(--ink); font-family: var(--hq-f);
}
body.is-hq input, body.is-hq textarea, body.is-hq select, body.is-hq button, body.is-hq .mono { font-family: var(--hq-f); }
body.is-hq .btn { border-radius: 7px; font-weight: 600; }
body.is-hq .switch.on { background: var(--cob); }
:root body.is-hq .toast { background: var(--ink); color: #fff; }
:root body.is-hq .toast.err { background: var(--bad); }
body.is-hq ::selection { background: rgba(36, 65, 180, .16); }
body.is-hq .num { font-variant-numeric: tabular-nums; }

/* ---------- полоса-вымпел: знак штаба, разделы, состояние — в одну строку ---------- */
.hq-bar { position: sticky; z-index: 40; top: 0; isolation: isolate; color: #fff; }
.hq-bar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cob);
  clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 50%, 100% 100%, 0 100%);
  box-shadow: inset 7px 0 0 var(--hoist); transition: box-shadow .3s; animation: unfurl .9s cubic-bezier(.5, 0, .2, 1); }
@keyframes unfurl { from { clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%); } }
.hq-bar.low { filter: drop-shadow(0 6px 16px rgba(13, 23, 51, .16)); }
.hq-bar-in { display: flex; align-items: center; gap: 40px; height: 76px; padding: 0 76px 0 40px; transition: height .4s var(--ease); }
.hq-bar.low .hq-bar-in { height: 60px; }
/* знак и подпись — одна связка: знак 40px, две строки текста той же высоты */
.hq-brand { flex: none; display: flex; align-items: center; gap: 12px; color: inherit; animation: hqFade .6s var(--ease) .35s backwards; }
.hq-mark { display: block; width: 40px; height: 40px; }
.hq-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hm-pole { stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .7; }
.hm-f { fill: currentColor; } .hm-h { fill: var(--hoist); }
.hq-bar .hm-h { fill: #ff7b6b; }
.hm-a, .hm-b { transform-box: fill-box; transform-origin: 0 50%; animation: hmSway 6s ease-in-out infinite; }
.hm-b { animation-delay: -2.2s; animation-duration: 7s; }
@keyframes hmSway { 0%, 100% { transform: skewY(0) scaleX(1); } 50% { transform: skewY(-3deg) scaleX(.95); } }
.hq-brand:hover .hm-a, .hq-brand:hover .hm-b { animation-duration: 1.6s; }
.hq-bt { display: flex; flex-direction: column; justify-content: center; gap: 5px; height: 40px; }
.hq-bt b { font: 700 10.5px/1 var(--hq-f); letter-spacing: .26em; text-transform: uppercase; opacity: .66; }
.hq-bt span { font: 800 23px/1 var(--hq-f); letter-spacing: -.02em; }
.hq-meta { display: flex; align-items: center; gap: 22px; margin-left: auto; white-space: nowrap; font-size: 13px; color: rgba(255, 255, 255, .74); animation: hqFade .6s var(--ease) .9s backwards; }
.hq-when { font: 500 13px/1 var(--hq-f); color: rgba(255, 255, 255, .86); font-variant-numeric: tabular-nums; }
.hq-when::first-letter { text-transform: uppercase; }
.hq-st { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .78); }
.hq-st:hover { color: #fff; }
.hq-st i { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #9fe0b8; }
.hq-st[data-t="bad"] { color: #fff; }
.hq-st[data-t="bad"] i { background: #ff8d80; }
.hq-st[data-t="bad"] i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid #ff8d80; animation: ping 3s ease-out infinite; }
@keyframes ping { 0% { opacity: .9; transform: scale(.5); } 80%, 100% { opacity: 0; transform: scale(1.7); } }
.hq-me { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 2px; border: 0; background: none; color: #fff; font-size: 13px; font-weight: 600; }
.hq-me .ico { opacity: .6; transition: transform .25s var(--ease); }
.hq-me .ico:first-child { display: none; opacity: 1; }
.hq-me:hover .ico { transform: translateY(2px); opacity: 1; }
.hq-me-cap { display: flex; flex-direction: column; gap: 2px; padding: 4px 2px 6px; }
.hq-me-cap b { font-size: 13.5px; color: var(--ink); }
.hq-me-cap span { font-size: 12px; color: var(--mute); }
.hq-nav { position: relative; align-self: stretch; display: flex; align-items: center; gap: 28px; padding-left: 40px; border-left: 1px solid rgba(255, 255, 255, .18); animation: hqFade .6s var(--ease) .6s backwards; }
.hq-bar .hq-nav { margin: 18px 0; transition: margin .4s var(--ease); }
.hq-bar.low .hq-nav { margin: 12px 0; }
.hq-nav a { position: relative; z-index: 1; display: flex; align-items: center; height: 100%; font-size: 14.5px; font-weight: 600; color: rgba(255, 255, 255, .64); white-space: nowrap; transition: color .2s; }
.hq-nav a:hover, .hq-nav a.on { color: #fff; }
.hq-ink { position: absolute; left: 0; bottom: -2px; height: 2px; border-radius: 1px; background: #fff; opacity: 0; transition: transform .5s var(--ease), width .5s var(--ease), opacity .2s; }
.hq-ink.still { transition: opacity .2s; }
@keyframes hqFade { from { opacity: 0; transform: translateY(6px); } }

/* ---------- лист ---------- */
.hq-sheet { min-width: 0; }
.hq-page { max-width: 1200px; margin: 0 auto; padding: 44px 48px 120px; }
.hq-page.in > * { animation: hqRise .5s var(--ease) backwards; }
.hq-page.in > :nth-child(2) { animation-delay: .08s; } .hq-page.in > :nth-child(3) { animation-delay: .16s; } .hq-page.in > :nth-child(n + 4) { animation-delay: .24s; }
@keyframes hqRise { from { opacity: 0; transform: translateY(8px); } }
.hq-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.hq-head h1 { font: 700 38px/1 var(--hq-f); letter-spacing: -.035em; color: var(--ink); }
.hq-head p { margin-top: 10px; max-width: 58ch; font-size: 14.5px; line-height: 1.55; color: var(--mute); }
.hq-part { margin-top: 48px; }
.hq-part-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 14px; margin-bottom: 4px; border-top: 1px solid var(--strong); }
.hq-part-h h2 { font: 700 20px/1.15 var(--hq-f); letter-spacing: -.02em; }
.hq-more { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--cob); }
.hq-more .ico { transition: transform .3s var(--ease); }
.hq-more:hover .ico { transform: translateX(4px); }
.hq-count { font: 700 11px/1 var(--hq-f); letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.hq-count.big { font: 800 38px/1 var(--hq-f); color: var(--cob); letter-spacing: -.03em; }
.hq-quiet { padding: 18px 0; font: 500 15px/1.4 var(--hq-f); color: var(--mute); }
.hq-quiet.pad { padding: 28px 8px; }
.hq-note { max-width: 66ch; font-size: 14px; line-height: 1.55; color: var(--mute); }
.hq-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0 56px; }

/* обзор: сводка фразой */
.hq-hello { font: 700 11px/1 var(--hq-f); letter-spacing: .09em; text-transform: uppercase; color: var(--cob); }
.hq-sum { margin-top: 14px; max-width: 32ch; font: 600 32px/1.22 var(--hq-f); letter-spacing: -.025em; color: var(--ink); }
.hq-n { font-weight: 800; color: var(--cob); font-variant-numeric: tabular-nums; }

/* реестр: строки ведомости */
.hq-ledger { display: flex; flex-direction: column; }
.hq-row { position: relative; display: grid; grid-template-columns: 88px minmax(0, 2.1fr) minmax(0, 1.2fr) 84px 84px minmax(0, 1.5fr) 112px 20px; gap: 0 20px; align-items: center;
  padding: 15px 10px; border-radius: 8px; color: var(--ink2); text-align: left; transition: background-color .2s; animation: hqRise .5s var(--ease) calc(var(--i) * 50ms + .1s) backwards; }
.hq-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: left; animation: tailIn .8s var(--ease) calc(var(--i) * 50ms + .2s) backwards; }
a.hq-row:hover, .hq-row.add:hover { background: var(--cob-p); }
.hq-row-n { font: 800 40px/.9 var(--hq-f); letter-spacing: -.04em; color: var(--cob); font-variant-numeric: tabular-nums; transition: transform .4s var(--ease); }
a.hq-row:hover .hq-row-n { transform: translateX(3px); }
.hq-row-t b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.hq-row small { display: block; margin-top: 5px; font-size: 12.5px; color: var(--mute); }
.hq-row-f b { display: block; font: 700 20px/1 var(--hq-f); color: var(--ink); font-variant-numeric: tabular-nums; }
.hq-row-l { font-size: 13px; color: var(--mute); }
.hq-row-l em { font-style: normal; color: var(--warn); font-weight: 600; }
.hq-row-go { color: var(--faint); transition: transform .3s var(--ease), color .2s; }
a.hq-row:hover .hq-row-go { color: var(--cob); transform: translateX(4px); }
.hq-row[data-s="archived"] .hq-row-n { color: var(--faint); }
.hq-row.hd { padding-top: 0; padding-bottom: 12px; font: 600 10.5px/1 var(--hq-f); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); animation: none; }
.hq-row.hd::after { animation: none; background: var(--strong); }
.hq-row.add { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; }
.hq-row.add .hq-row-n { color: var(--strong); font-weight: 300; transition: transform .45s var(--ease), color .2s; }
.hq-row.add:hover .hq-row-n { color: var(--cob); transform: rotate(90deg); }
.hq-row.add .hq-row-t { grid-column: 2 / -1; }
.hq-row.add b { color: var(--cob); }
.hq-pay b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.hq-pay small { display: flex !important; align-items: center; gap: 6px; }
.hq-pay[data-t] small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.hq-pay[data-t="ok"] small::before { background: var(--ok); }
.hq-pay[data-t="warn"] small { color: var(--warn); } .hq-pay[data-t="warn"] small::before { background: var(--warn); }
.hq-pay[data-t="bad"] small { color: var(--bad); } .hq-pay[data-t="bad"] small::before { background: var(--bad); }
/* курсовка: нашивки наискосок */
.cv { display: inline-flex; gap: 3px; padding: 2px 0; }
.cv i { width: 14px; height: 4px; border-radius: 1px; transform: skewX(-38deg); background: var(--line); animation: cvIn .45s var(--ease) calc(var(--i) * 70ms + .45s) backwards; }
.cv i.on { background: var(--cob); }
.cv.big i { width: 20px; height: 5px; }
@keyframes cvIn { from { opacity: 0; transform: skewX(-38deg) translateY(-6px) scaleX(.2); } }

.hq-tools { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.hq-filter { display: flex; gap: 22px; }
.hq-filter button { position: relative; padding: 6px 0; border: 0; background: none; font-size: 14.5px; font-weight: 600; color: var(--mute); }
.hq-filter button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cob); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.hq-filter button:hover { color: var(--ink); }
.hq-filter button.on { color: var(--ink); }
.hq-filter button.on::after { transform: none; }
.hq-filter sup, .hq-utabs sup { margin-left: 3px; font: 600 10.5px/1 var(--hq-f); color: var(--faint); }
.hq-find { width: 280px; height: 38px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--strong); border-radius: 0; background: transparent; font-size: 15px; box-shadow: none !important; }
.hq-find:focus { border-bottom-color: var(--cob); }
.hq-trash { margin-top: 28px; font-size: 13px; color: var(--mute); }
.hq-trash summary { width: max-content; cursor: pointer; }
.hq-trash summary:hover { color: var(--ink); }
.hq-trash ul { list-style: none; margin: 10px 0 0; padding: 0; }
.hq-trash li { display: flex; gap: 14px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--line2); }
.hq-trash code { font-size: 12px; color: var(--faint); }

/* заметки и журнал */
.hq-notes { list-style: none; margin: 0; padding: 0; }
.hq-notes li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); animation: hqRise .5s var(--ease) calc(var(--i) * 60ms + .3s) backwards; }
.hq-notes li::before { content: ""; width: 9px; height: 9px; transform: translateY(-1px) rotate(45deg); background: var(--faint); }
.hq-notes [data-t="warn"]::before { background: var(--warn); }
.hq-notes [data-t="bad"]::before { background: var(--bad); }
.hq-notes p { font-size: 15px; line-height: 1.45; color: var(--ink2); }
.hq-notes a { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; color: var(--cob); white-space: nowrap; }
.hq-notes a .ico { transition: transform .3s var(--ease); }
.hq-notes a:hover .ico { transform: translateX(3px); }
.hq-logrows { list-style: none; margin: 0; padding: 0; }
.hq-logrows li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); animation: hqRise .5s var(--ease) calc(var(--i) * 40ms + .25s) backwards; }
.hq-logrows time { padding-top: 2px; font: 700 12.5px/1.4 var(--hq-f); font-variant-numeric: tabular-nums; color: var(--faint); }
.hq-logrows p { font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.hq-logrows small { display: block; margin-top: 3px; font-size: 12px; color: var(--mute); }
.hq-logrows [data-a="delete"] time, .hq-logrows [data-a="security"] time { color: var(--bad); }
.hq-logrows [data-a="units"] time, .hq-logrows [data-a="course"] time { color: var(--cob); }
.hq-book { display: flex; flex-direction: column; gap: 36px; max-width: 880px; }
.hq-day h3 { display: flex; align-items: baseline; gap: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--strong); font: 700 20px/1 var(--hq-f); letter-spacing: -.02em; }
.hq-day h3 small { font: 500 14px/1 var(--hq-f); color: var(--mute); }

/* ---------- страница роты ---------- */
.hq-back { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; color: var(--mute); }
.hq-back .ico { transition: transform .3s var(--ease); }
.hq-back:hover { color: var(--cob); }
.hq-back:hover .ico { transform: translateX(-4px); }
.hq-unit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 36px; align-items: end; margin: 22px 0 26px; }
.hq-unit-n { display: flex; flex-direction: column; gap: 16px; }
.hq-unit-n b { font: 800 112px/.8 var(--hq-f); letter-spacing: -.045em; color: var(--cob); font-variant-numeric: tabular-nums; }
.hq-unit[data-s="archived"] .hq-unit-n b { color: var(--faint); }
.hq-unit-s { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--mute); }
.hq-unit-s i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.hq-unit-s[data-t="ok"] i { background: var(--ok); } .hq-unit-s[data-t="warn"] i { background: var(--warn); }
.hq-unit-t h1 { margin-top: 8px; font: 700 32px/1.05 var(--hq-f); letter-spacing: -.035em; }
.hq-dl { display: flex; flex-wrap: wrap; row-gap: 16px; margin: 22px 0 6px; }
.hq-dl div { padding: 2px 26px 2px 0; margin-right: 26px; border-right: 1px solid var(--line); }
.hq-dl div:last-child { border-right: 0; }
.hq-dl dt { font: 600 10.5px/1 var(--hq-f); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.hq-dl dd { margin: 8px 0 0; font-size: 15px; color: var(--ink); }
.hq-dl .hq-pay b { font-size: 15px; font-weight: 400; }
.hq-unit-a { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.hq-utabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.hq-utabs button { position: relative; flex: none; padding: 13px 0; border: 0; background: none; font-size: 14.5px; font-weight: 600; color: var(--mute); }
.hq-utabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--cob); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.hq-utabs button:hover { color: var(--ink); }
.hq-utabs button.on { color: var(--ink); }
.hq-utabs button.on::after { transform: none; }
.hq-ubody { display: flex; flex-direction: column; gap: 22px; padding-top: 10px; }
.hq-ubody > .hq-part:first-child { margin-top: 30px; }
.hq-ubody > .hq-part:first-child > .hq-part-h { padding-top: 0; border-top: 0; }
.hq-ubody.in > * { animation: hqRise .5s var(--ease) backwards; }
.hq-ubody.in > :nth-child(2) { animation-delay: .06s; } .hq-ubody.in > :nth-child(3) { animation-delay: .12s; }
.hq-ubody > .hq-note:first-child { margin-top: 22px; }
/* путь роты: линейка учебных лет */
.hq-path { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); list-style: none; margin: 18px 0 0; padding: 0; }
.hq-path li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 30px 12px 0 0; animation: hqRise .5s var(--ease) calc(var(--i) * 80ms + .1s) backwards; }
.hq-path li::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--line); }
.hq-path li.done::before { height: 4px; top: 7px; background: var(--cob); }
.hq-path li.now::before { background: linear-gradient(90deg, var(--cob) 0 14px, var(--line) 14px); }
.hq-path li > i { position: absolute; top: 2px; left: 0; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); border: 2px solid var(--strong); }
.hq-path li.done > i { background: var(--cob); border-color: var(--cob); }
.hq-path li.now > i { background: #fff; border: 4px solid var(--cob); box-shadow: 0 0 0 0 rgba(30, 63, 192, .4); animation: nowRing 3.2s ease-out infinite; }
@keyframes nowRing { 0% { box-shadow: 0 0 0 0 rgba(30, 63, 192, .4); } 80%, 100% { box-shadow: 0 0 0 12px rgba(30, 63, 192, 0); } }
.hq-path li.grad::before { display: none; }
.hq-path li.grad > i { top: -4px; width: 26px; height: 26px; border: 0; background: none; color: var(--faint); }
.hq-path li.grad.now > i { color: var(--cob); animation: none; }
.hq-path b { font-size: 15px; font-weight: 600; color: var(--faint); }
.hq-path .done b, .hq-path .now b { color: var(--ink); }
.hq-path small { font: 600 11.5px/1 var(--hq-f); color: var(--faint); }
.hq-figs { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hq-figs > div { display: flex; flex-direction: column; gap: 6px; padding: 18px 32px 18px 0; margin-right: 32px; border-right: 1px solid var(--line); }
.hq-figs > div:last-child { border-right: 0; }
.hq-figs b { font: 700 32px/1 var(--hq-f); color: var(--ink); letter-spacing: -.03em; }
.hq-figs span { font-size: 13px; color: var(--mute); }
/* пропуска */
.hq-passes { display: flex; flex-direction: column; border-top: 1px solid var(--strong); }
.hq-pass { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 150px 32px; gap: 16px; align-items: center; padding: 14px 6px; border-bottom: 1px solid var(--line); transition: background-color .2s; animation: hqRise .45s var(--ease) calc(var(--i) * 40ms) backwards; }
.hq-pass:hover { background: var(--cob-p); }
.hq-pass.off { opacity: .5; }
.hq-pass .avatar { width: 34px; height: 34px; }
.hq-pass b { display: block; font-size: 15px; color: var(--ink); }
.hq-pass > div > span { font-size: 13px; color: var(--mute); }
.hq-pass code { font-size: 12.5px; color: var(--ink2); }
.hq-seen { font-size: 12.5px; color: var(--mute); text-align: right; }
.hq-seen[data-t="ok"] { color: var(--ok); } .hq-seen[data-t="warn"] { color: var(--warn); } .hq-seen[data-t="off"] { color: var(--bad); }
.hq-dots { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 6px; background: none; color: var(--mute); }
.hq-dots:hover { background: #fff; color: var(--ink); }
/* оплата, сведения: бланк с отточиями */
.hq-paynow { display: flex; align-items: baseline; gap: 18px; margin-top: 26px; }
.hq-paynow > span { font: 500 18px/1 var(--hq-f); color: var(--mute); }
.hq-paynow .hq-pay b { font: 700 26px/1 var(--hq-f); }
.hq-paynow .hq-pay small { font-size: 14px; }
.hq-form { max-width: 760px; }
.hq-line { display: flex; align-items: center; min-height: 54px; padding: 8px 0; }
.hq-line-l { flex: none; font-size: 15px; font-weight: 600; color: var(--ink); }
.hq-line-l small { display: block; margin-top: 2px; font-size: 12px; color: var(--mute); }
.hq-dots-l { flex: 1; min-width: 24px; height: 1px; margin: 0 14px; border-bottom: 2px dotted var(--strong); }
.hq-line-c { flex: none; display: flex; align-items: center; }
.hq-line.wide .hq-line-c { flex: 0 1 400px; }
.hq-line.wide .hq-line-c > * { width: 100%; }
.hq-inl { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--mute); }
.hq-inl input[type="date"] { width: 160px; }
.hq-form-f { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 18px 0 4px; }
.hq-acts { max-width: 860px; margin-top: 14px; border-top: 1px solid var(--strong); }
.hq-act { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.hq-act b { font: 700 17px/1.25 var(--hq-f); color: var(--ink); }
.hq-act p { margin-top: 5px; font-size: 14px; color: var(--mute); }
.hq-act[data-t="bad"] b { color: var(--bad); }
.hq-confirm { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink2); }
.hq-confirm input { font-size: 16px; letter-spacing: .1em; }

/* ---------- настройки: параграфы бланка ---------- */
.hq-pars { border-top: 1px solid var(--strong); }
.hq-par { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.hq-par > header { align-self: start; position: sticky; top: 92px; }
.hq-par-no { font: 600 10.5px/1 var(--hq-f); letter-spacing: .08em; text-transform: uppercase; color: var(--cob); }
.hq-par h2 { margin-top: 8px; font: 700 20px/1.15 var(--hq-f); letter-spacing: -.02em; }
.hq-par header p { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--mute); }
.hq-par-b > textarea { width: 100%; margin: 10px 0 0; }
.hq-shifts { display: flex; flex-direction: column; gap: 6px; }
.hq-shift { display: flex; align-items: center; gap: 10px; }
.hq-shift span { font: 600 12px/1 var(--hq-f); color: var(--cob); }
.hq-shift input { width: 220px; font-size: 13px; }
.hq-bk { margin-right: auto; font-size: 13px; color: var(--mute); }
.hq-owners { border-top: 1px solid var(--line); }
.hq-owner { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.hq-owner b { display: block; font-size: 15px; }
.hq-owner span { font-size: 13px; color: var(--mute); }
.hq-owner code { font-size: 12.5px; color: var(--ink2); }

/* ---------- мастер новой роты ---------- */
.hq-wiz { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 40px; align-items: start; }
.hq-wiz-f { display: flex; flex-direction: column; gap: 26px; }
.hq-wiz-f section { display: flex; flex-direction: column; gap: 10px; }
.hq-wiz-f h3 { display: flex; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--strong); font: 700 17px/1.1 var(--hq-f); }
.hq-wiz-f h3 span { font: 600 10.5px/1 var(--hq-f); letter-spacing: .08em; text-transform: uppercase; color: var(--cob); }
.hq-wiz .seg { flex-wrap: nowrap; }
.hq-big-in { font: 700 22px/1 var(--hq-f) !important; }
.hq-wg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hq-g { display: flex; align-items: center; border-bottom: 1px solid var(--strong); }
.hq-g input { width: 100px; height: 32px; padding: 0 2px; border: 0; border-radius: 0; background: none; box-shadow: none !important; font-size: 14px; }
.hq-g button { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 4px; background: none; color: var(--faint); }
.hq-g button:hover { color: var(--bad); }
.hq-wiz-pv { position: sticky; top: 0; }
.hq-wpv { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.hq-wpv > p { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--mute); }
.hq-wpv > p b { font-size: 14px; color: var(--ink); }
.hq-wpv > p code { font-size: 12px; }
.hq-wpv > p > span:first-child { font: 500 14px/1 var(--hq-f); }
.hq-wpen { position: relative; width: 168px; height: 232px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 16px 0 28px; background: var(--cob); color: #fff; text-align: left;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); transform-origin: 50% 0; animation: penDown 1s cubic-bezier(.2, .85, .25, 1) .2s backwards; }
@keyframes penDown { from { opacity: 0; transform: perspective(700px) rotateX(-85deg); } 40% { opacity: 1; } }
.hq-wpen::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9px; background: var(--hoist); }
.hq-wpen > b { font: 800 54px/.88 var(--hq-f); letter-spacing: -.045em; }
.hq-wpen > b.tick { animation: numTick .3s var(--ease); }
@keyframes numTick { from { opacity: .2; transform: translateY(8px); } }
.hq-wpen > span { font-size: 14px; color: rgba(255, 255, 255, .72); }
.hq-wpen .cv i { background: rgba(255, 255, 255, .22); }
.hq-wpen .cv i.on { background: #fff; }
.hq-wpen small { margin-top: auto; margin-bottom: 62px; font-size: 12px; color: rgba(255, 255, 255, .8); }
.hq-done { display: flex; align-items: baseline; gap: 12px; }
.hq-done b { font: 800 54px/.9 var(--hq-f); letter-spacing: -.045em; color: var(--cob); }
.hq-done span { font: 500 18px/1 var(--hq-f); color: var(--ink2); }

/* ---------- баннеры обзора: плакатные полотна ---------- */
.hq-bn { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: minmax(196px, auto) minmax(196px, auto); gap: 12px; margin-top: 40px; }
.hq-bn-c { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 24px 26px 22px; border-radius: 12px; }
.hq-bn-k { font: 700 10.5px/1 var(--hq-f); letter-spacing: .12em; text-transform: uppercase; opacity: .66; }
.hq-bn-s { margin-top: 10px; max-width: 34ch; font-size: 14px; font-weight: 500; line-height: 1.45; opacity: .8; }
.hq-bn-mid { display: block; margin-top: 14px; font: 800 40px/.95 var(--hq-f); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
/* строй */
.hq-bn-c.line { grid-row: span 2; min-height: 404px; background: var(--cob); color: #fff; }
.hq-bn-head { display: flex; align-items: flex-end; gap: 16px; margin-top: 16px; }
.hq-bn-head .hq-n { font: 800 104px/.8 var(--hq-f); letter-spacing: -.05em; color: #fff; }
.hq-bn-head > span { padding-bottom: 4px; font: 700 20px/1.1 var(--hq-f); letter-spacing: -.015em; }
.hq-flags { position: absolute; left: 0; right: 0; bottom: 0; height: 190px; }
.hq-bl-rope { position: absolute; left: -2%; top: 18px; width: 104%; height: 40px; overflow: visible; }
.hq-bl-rope path { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1.5; }
.hq-bf { position: absolute; z-index: 1; margin-top: 18px; width: 66px; height: 96px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 18px; border: 0;
  background: #fff; color: var(--cob); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); translate: -50% 0; transform-origin: 50% 0;
  animation: bfIn .8s cubic-bezier(.2, .85, .25, 1) calc(var(--i) * 90ms + .4s) backwards, bfSway 6.5s ease-in-out calc(var(--i) * -1.3s) infinite; transition: scale .3s var(--ease); }
.hq-bf::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--hoist); }
.hq-bf b { font: 800 23px/1 var(--hq-f); letter-spacing: -.035em; }
.hq-bf .cv i { width: 8px; height: 4px; }
.hq-bf:hover { scale: 1.06; }
.hq-bf.ghost { background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; }
.hq-bf.ghost::before { display: none; }
@keyframes bfIn { from { opacity: 0; scale: 1 .1; } }
@keyframes bfSway { 0%, 100% { rotate: -1.6deg; } 50% { rotate: 1.8deg; } }
/* ветер: тонкие штрихи пролетают через полотно */
.hq-wind { position: absolute; inset: 0; pointer-events: none; }   /* ветер — только у вымпелов: выше он читался как подчёркивание текста */
.hq-wind i { position: absolute; left: 0; width: 120px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .12); top: calc(62% + var(--i) * 8%); animation: wind 10s linear calc(var(--i) * -2.6s) infinite; }
.hq-wind i:nth-child(2) { width: 70px; } .hq-wind i:nth-child(3) { width: 160px; animation-duration: 13s; } .hq-wind i:nth-child(4) { width: 50px; }
@keyframes wind { from { transform: translateX(-200px); } to { transform: translateX(1200px); } }
/* учебный год */
.hq-bn-c.year { background: var(--ink); color: #fff; }
.hq-weeks { display: flex; gap: 3px; align-items: flex-end; width: 100%; height: 34px; margin-top: auto; padding-top: 16px; }
.hq-weeks i { flex: 1; height: 100%; border-radius: 1px; background: rgba(255, 255, 255, .14); transform-origin: bottom; animation: weekUp .5s var(--ease) calc(var(--i) * 18ms + .4s) backwards; }
.hq-weeks i.on { background: #fff; }
.hq-weeks i.now { background: var(--cob); box-shadow: 0 0 0 2px #fff inset; animation: weekUp .5s var(--ease) calc(var(--i) * 18ms + .4s) backwards, weekNow 3s ease-in-out 1.6s infinite; }
@keyframes weekUp { from { transform: scaleY(0); } }
@keyframes weekNow { 50% { background: #fff; } }
/* резервная копия: листы ложатся в стопку */
.hq-bn-c.copy { background: var(--cob-p); color: var(--ink); }
.hq-bn-c.copy .btn { margin-top: auto; }
.hq-bn-c.copy > :not(.hq-stack) { position: relative; z-index: 1; max-width: calc(100% - 104px); }
.hq-bn-c.copy .hq-bn-mid { font-size: 36px; }
.hq-stack { position: absolute; right: 28px; bottom: 26px; width: 78px; height: 96px; }
.hq-stack i { position: absolute; left: 0; bottom: 0; width: 78px; height: 96px; border-radius: 3px; background: #fff; box-shadow: 0 1px 0 var(--line), 0 6px 14px rgba(13, 23, 51, .08);
  background-image: linear-gradient(var(--cob) 0 0), linear-gradient(var(--line) 0 0), linear-gradient(var(--line) 0 0), linear-gradient(var(--line) 0 0);
  background-size: 28px 5px, 54px 3px, 46px 3px, 50px 3px; background-position: 12px 14px, 12px 30px, 12px 40px, 12px 50px; background-repeat: no-repeat; }
.hq-stack i:nth-child(1) { transform: translate(10px, -10px) rotate(4deg); }
.hq-stack i:nth-child(2) { transform: translate(5px, -5px) rotate(-2deg); }
.hq-stack i.fly { animation: sheetIn 8s var(--ease) 1s infinite; }
@keyframes sheetIn { 0% { opacity: 0; transform: translate(-40px, -70px) rotate(-14deg); } 22% { opacity: 1; transform: none; } 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
/* обслуживание: бегущие полосы ограждения */
.hq-bn-c.maint { padding: 18px; color: var(--ink); }
.hq-tape { position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, var(--cob) 0 22px, #fff 22px 44px); background-size: 62.2px 62.2px; animation: tape 6s linear infinite; }
@keyframes tape { to { background-position: 62.2px 0; } }
.hq-plate { position: relative; display: flex; flex-direction: column; align-items: flex-start; height: 100%; width: 100%; padding: 20px 22px; border-radius: 8px; background: #fff; }
.hq-plate .hq-bn-mid { font-size: 34px; color: var(--bad); }
.hq-plate .btn { margin-top: auto; }

@media (max-width: 1180px) {
  .hq-when { display: none; }
}
@media (max-width: 1100px) {
  .hq-row { grid-template-columns: 80px minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.4fr) 100px 20px; }
  .hq-row-f, .hq-row.hd > :nth-child(4), .hq-row.hd > :nth-child(5) { display: none; }
  .hq-row-n { font-size: 36px; }
  .hq-unit { grid-template-columns: auto minmax(0, 1fr); }
  .hq-unit-a { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .hq-par { grid-template-columns: 220px minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 900px) {
  .hq-st { font-size: 0; gap: 0; }
  .hq-bn { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .hq-bn-c.line { grid-row: auto; min-height: 370px; }
  .hq-cols { grid-template-columns: minmax(0, 1fr); }
  .hq-par { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hq-par > header { position: static; }
}
@media (max-width: 760px) {
  .hq-bar { position: relative; }
  .hq-bar::before { clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 50%, 100% 100%, 0 100%); box-shadow: inset 5px 0 0 var(--hoist); }
  .hq-bar-in, .hq-bar.low .hq-bar-in { height: auto; flex-wrap: wrap; gap: 0 12px; padding: 14px 40px 0 22px; }
  .hq-meta { gap: 14px; }
  .hq-st { font-size: 0; gap: 0; }
  .hq-me > span { display: none; }
  .hq-me .ico:first-child { display: block; }
  .hq-bar .hq-nav, .hq-bar.low .hq-nav { order: 3; flex-basis: 100%; height: 46px; margin: 10px 0 0; padding: 0; gap: 22px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); overflow-x: auto; scrollbar-width: none; }
  .hq-nav a { font-size: 14px; }
  .hq-ink { bottom: 0; }
  .hq-page { padding: 28px 16px 80px; }
  .hq-head h1, .hq-count.big { font-size: 30px; }
  .hq-sum { font-size: 23px; }
  .hq-bn { margin-top: 28px; }
  .hq-bn-c.line { min-height: 310px; }
  .hq-flags { height: 160px; }
  .hq-bn-head .hq-n { font-size: 80px; }
  .hq-bn-head > span { font-size: 17px; }
  .hq-bf { width: 52px; height: 78px; padding-top: 14px; }
  .hq-bf b { font-size: 19px; }
  .hq-bn-mid { font-size: 32px; }
  .hq-part { margin-top: 38px; }
  .hq-row { grid-template-columns: 56px minmax(0, 1fr) 18px; gap: 8px 14px; padding: 14px 4px; align-items: start; }
  .hq-row.hd, .hq-row-l { display: none; }
  .hq-row-n { grid-row: span 3; font-size: 34px; }
  .hq-row-t, .hq-row-c, .hq-row .hq-pay { grid-column: 2; }
  .hq-row-c { display: flex; align-items: center; gap: 10px; }
  .hq-row-c small { margin: 0; }
  .hq-row-go { grid-column: 3; grid-row: 1; }
  .hq-row.add .hq-row-n { grid-row: auto; }
  .hq-find { width: 100%; }
  .hq-unit { gap: 18px 24px; }
  .hq-unit-n b { font-size: 80px; }
  .hq-unit-t h1 { font-size: 26px; }
  .hq-dl div { padding-right: 16px; margin: 0 16px 12px 0; }
  .hq-path { grid-auto-columns: 104px; overflow-x: auto; }
  .hq-figs > div { padding-right: 22px; margin-right: 22px; }
  .hq-figs b { font-size: 26px; }
  .hq-pass { grid-template-columns: 34px minmax(0, 1fr) 32px; }
  .hq-pass code, .hq-seen { display: none; }
  .hq-line { flex-wrap: wrap; gap: 8px; }
  .hq-dots-l { display: none; }
  .hq-line-l { flex: 1 0 100%; }
  .hq-act { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hq-act .btn { justify-self: start; }
  .hq-wiz { grid-template-columns: minmax(0, 1fr); }
  .hq-wiz-pv { position: static; order: -1; }
}
.lf-notice { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; padding: 12px 14px; border-radius: 12px; background: var(--accent-bg); color: var(--ink2); font-size: 13.5px; line-height: 1.45; animation: fadeUp .4s var(--ease); }
.lf-notice .ico { flex: none; margin-top: 1px; color: var(--accent); }
.lf-notice.mt { background: color-mix(in srgb, var(--warn) 13%, transparent); }
.lf-notice.mt .ico { color: var(--warn); }

/* ==========================================================================
   График «в руке» (22.10): метка — вся клетка; перетаскивание по своему дню,
   протяжка по пустым дням под отсутствие, фокус одного вида наряда.
   ========================================================================== */
/* метка занимает клетку целиком: без полей и скруглений, тонкая линия строки остаётся сеткой */
.mx tbody td > .mk, .mx tfoot td > .mk {
  position: absolute; inset: 0; width: auto; height: auto; min-width: 0; padding: 0 2px; border-radius: 0;
  font-size: 11px; letter-spacing: 0; transition: opacity .2s, box-shadow .15s, filter .15s;
}
.mx tbody td > .mk sup { position: absolute; top: 3px; right: 3px; margin: 0; font-size: 8px; line-height: 1; }
.mx tbody td:hover > .mk { filter: brightness(1.06); box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 40%, transparent); }
.mx tbody td.bad > .mk { box-shadow: inset 0 0 0 2px var(--bad); }
.mx tbody td.bad > .mk::before { content: ""; position: absolute; left: 0; top: 0; border: 5px solid transparent; border-top-color: var(--bad); border-left-color: var(--bad); }
.mx tbody td.sel > .mk, .mx tbody td.cur > .mk { box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 3px var(--panel); }
.mx tbody td > .mk.chg::after { top: 3px; right: 3px; width: 5px; height: 5px; box-shadow: none; background: var(--warn); }
.mx tbody td.past:hover > .mk, .mx tbody td.past.sel > .mk { opacity: 1; }
.mx tfoot td > .mk.empty { box-shadow: inset 0 2px 0 var(--bad); font-weight: 700; }
.mx tfoot td > .mk.out { box-shadow: inset 0 0 0 1px var(--line); }
/* появление и «только что изменено» — внутри клетки, без выхода за край */
.mx.reveal tbody td > .mk { animation: mkFill .45s var(--ease) backwards; animation-delay: var(--d, 0ms); }
@keyframes mkFill { from { opacity: 0; clip-path: inset(50% 0 50% 0); } }
.mx tbody td > .mk.flash { animation: mkFlash 1.6s var(--ease); }
@keyframes mkFlash { 0%, 35% { box-shadow: inset 0 0 0 3px var(--signal); filter: brightness(1.15); } }
/* отсутствие тоже на всю клетку: буква причины в углу */
.mx td.abs .ab { font-weight: 600; }

/* перетаскивание: столбец дня показывает, кто подходит */
.board.hands, .board.hands * { cursor: grabbing !important; user-select: none; }
.mx tbody td.dz-src > .mk { opacity: .28; box-shadow: inset 0 0 0 1px currentColor; }
.mx tbody td.dz-wait { background-color: color-mix(in srgb, var(--accent) 5%, transparent) !important; }
.mx tbody td.dz-ok { background-color: color-mix(in srgb, var(--ok) 18%, transparent) !important; }
.mx tbody td.dz-warn { background-color: color-mix(in srgb, var(--warn) 20%, transparent) !important; }
.mx tbody td.dz-no { background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--bad) 16%, transparent) 4px 5px) !important; }
.mx tbody td.dz-at { box-shadow: inset 0 0 0 2px var(--ink) !important; }
.mx tbody td.dz-at.dz-no { box-shadow: inset 0 0 0 2px var(--bad) !important; }
.mk-ghost { position: fixed; left: 0; top: 0; z-index: 900; pointer-events: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mk-ghost > .mk { position: static; width: var(--w); height: var(--h); border-radius: 0; box-shadow: 0 10px 24px rgba(19, 26, 35, .28), 0 0 0 2px var(--panel); transform: scale(1.08); transition: transform .15s; }
.mk-ghost-t { display: flex; flex-direction: column; gap: 2px; max-width: 260px; padding: 7px 10px; border-radius: 8px; background: var(--ink); color: var(--panel); font-size: 12px; line-height: 1.3; white-space: nowrap; box-shadow: 0 8px 22px rgba(19, 26, 35, .25); }
.mk-ghost-t b { font-weight: 600; }
.mk-ghost-t span { opacity: .72; overflow: hidden; text-overflow: ellipsis; }
.mk-ghost-t[data-v="ok"] b::before, .mk-ghost-t[data-v="swap"] b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #4bbf7a; vertical-align: 1px; }
.mk-ghost-t[data-v="warn"] b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #e3a33b; vertical-align: 1px; }
.mk-ghost-t[data-v="no"] b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #e2574a; vertical-align: 1px; }

/* протяжка по строке: отрезок дней под отсутствие */
.mx tbody td.sw { background-color: color-mix(in srgb, var(--accent) 16%, transparent) !important; box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }
.mx tbody td.sw-a { box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent), inset 2px 0 0 var(--accent); }
.mx tbody td.sw-b { box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent), inset -2px 0 0 var(--accent); }
.mx tbody td.sw-a.sw-b { box-shadow: inset 0 0 0 2px var(--accent); }
.mx tbody td.sw > .mk { opacity: .5; }
.sw-tip { position: fixed; z-index: 900; pointer-events: none; padding: 5px 9px; border-radius: 7px; background: var(--ink); color: var(--panel); font-size: 12px; font-weight: 600; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); box-shadow: 0 6px 18px rgba(19, 26, 35, .22); }
.sw-tip small { font-weight: 500; opacity: .7; margin-left: 6px; }

/* фокус одного вида: остальные метки уходят в тень */
.mx.focus tbody td > .mk[data-a]:not(.fx) { opacity: .1; }
.mx.focus tbody td:hover > .mk[data-a]:not(.fx) { opacity: .5; }
.mb-focus { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 6px 0 5px; border: 1px solid var(--strong); border-radius: 7px; background: var(--panel); color: var(--ink); font-size: 12.5px; font-weight: 600; animation: fadeUp .3s var(--ease); }
.mb-focus .mk { height: 20px; }
.mb-focus .ico { color: var(--mute); }
.mb-focus:hover .ico { color: var(--ink); }
.lg-list .lg-pick { display: contents; }
.lg-list .lg-pick > * { cursor: pointer; }
.lg-hint { margin-top: 10px; font-size: 12px; color: var(--mute); }

/* меню по правому клику */
.pop.at-point { animation-duration: .14s; }
.pop-cap.ctx { max-width: 260px; white-space: normal; }
/* схемы руководства и статей — как в графике: метка на всю клетку */
.gd-mx tbody td { position: relative; }
.gd-mx tbody td > .mk { position: absolute; inset: 0; height: auto; min-width: 0; border-radius: 0; }
.gd-mx tbody td.hl > .mk { box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 3px var(--panel); }
.gd-mx tbody td > .mk.g-bad { box-shadow: inset 0 0 0 2px var(--bad); }
.tip-hint { margin-top: 3px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 11.5px; opacity: .62; }
.mx tfoot .mk.empty { cursor: grab; }
/* руководство, «Руками» */
.gx-hands { display: grid; gap: 16px; padding: 22px; border-radius: 18px; background: var(--sunk); border: 1px solid var(--line); }
.gx-hands .gx-rel { justify-self: start; max-width: 100%; }
.gx-hands .gd-mx td { transition: background-color .3s, box-shadow .2s; }
.gx-hands td.gx-src > .mk { opacity: .3; }
.gx-hands td.gx-ok { background: color-mix(in srgb, var(--ok) 18%, transparent); }
.gx-hands td.gx-warn { background: color-mix(in srgb, var(--warn) 20%, transparent); }
.gx-hands td.gx-no { background: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--bad) 18%, transparent) 4px 5px); }
.gx-hands td.gx-at { box-shadow: inset 0 0 0 2px var(--ink); }
.gx-hands td.gx-sw { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }
.gx-ghost { position: absolute; z-index: 2; border-radius: 0; opacity: 0; box-shadow: 0 10px 22px rgba(19, 26, 35, .25), 0 0 0 2px var(--panel); transform: scale(1.08); transition: top .45s var(--ease), opacity .25s; pointer-events: none; }
.gx-ghost.on { opacity: 1; }
.gx-htip, .gx-hmenu { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 2px; padding: 6px 9px; border-radius: 7px; background: var(--ink); color: var(--panel); font-size: 11.5px; white-space: nowrap; opacity: 0; transform: translate(56px, -2px); transition: top .45s var(--ease), opacity .25s; pointer-events: none; }
.gx-htip.on, .gx-hmenu.on { opacity: 1; }
.gx-htip span { opacity: .7; }
.gx-htip[data-v="ok"] b::before, .gx-htip[data-v="warn"] b::before, .gx-htip[data-v="no"] b::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; background: #4bbf7a; }
.gx-htip[data-v="warn"] b::before { background: #e3a33b; }
.gx-htip[data-v="no"] b::before { background: #e2574a; }
.gx-hmenu { gap: 1px; padding: 6px; border-radius: 9px; background: var(--panel); color: var(--ink); box-shadow: var(--sh-3); border: 1px solid var(--line); }
.gx-hmenu b { padding: 2px 6px 5px; font-size: 10.5px; font-weight: 600; color: var(--mute); }
.gx-hmenu i { font-style: normal; padding: 5px 8px; border-radius: 6px; transition: background-color .2s; }
.gx-hmenu i.hot { background: var(--accent-bg); color: var(--accent); }
/* баннер «В руке»: метка едет по столбцу, отрезок отсутствия тянется по строке */
@keyframes bnLift { 0%, 12% { transform: translateY(0); } 30%, 40% { transform: translateY(92px); } 58%, 66% { transform: translateY(-46px); } 84%, 100% { transform: translateY(46px); } }
@keyframes bnSweep { 0%, 20% { transform: scaleX(.2); opacity: 0; } 26% { opacity: 1; } 55%, 92% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
/* живая схема «В руке» */
@media (max-width: 560px) { .tw-hands { min-width: 0; max-width: 100%; overflow-x: auto; touch-action: pan-x; } }
/* статья «В руке»: образцы цвета столбца и меню */