/* ==========================================================================
   Вымпел — «Сфера» (22.10). С 23.10 единственный вид: «Ясный», прежний и экран выбора стиля вырезаны.
   Мягкий: огромные скругления, тональные подложки вместо линий, пружинное движение. Свой язык форм —
   знак Вымпела: флажок с раздвоенным хвостом и красной полосой у древка (номера глав, «сегодня»,
   значки разделов, пропуск, окна). У каждого раздела свой цвет из палитры знака — он красит страницу.
   Кнопки при нажатии меняют форму: пилюля сжимается в скруглённый квадрат.
   Всё под :root[data-design="sphere"] (атрибут стоит в index.html); style.css — основа под ним.
   ========================================================================== */

/* шрифт «Сферы» — Onest: мягкий гротеск с кириллицей; лежит рядом, без загрузки из интернета.
   В файлах одно начертание (400): жирный браузер дорисовывает сам. Диапазон «300 800» здесь запрещал это —
   до 23.10 все заголовки «Сферы» были обычного веса. Настоящий переменный Onest — положить в web/fonts. */
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/onest-cyr.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/onest-lat.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   Общее
   ========================================================================== */
/* штаб всегда светлый — без тёмной вспышки при загрузке */
:root[data-design="sphere"]:has(body.is-hq) { background: #f7f8fc; color-scheme: light; }

/* ==========================================================================
   «Сфера»: токены
   ========================================================================== */
:root[data-design="sphere"] {
  --sp-f: "Onest", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, sans-serif;
  --sp-code: ui-monospace, "SF Mono", Menlo, monospace;
  --sans: var(--sp-f); --mono: var(--sp-f); --serif: var(--sp-f); --hq-f: var(--sp-f);

  /* своя палитра от знака Вымпела: синий поля, кумач полосы у древка, латунь, морская волна */
  --sp-blue: #2f4fa8;   --sp-blue-c: #dfe6f8;   --sp-blue-on: #0e1d47;   --sp-blue-f: #fff;
  --sp-red: #d9473b;    --sp-red-c: #fde3de;    --sp-red-on: #4a0f09;    --sp-red-f: #fff;
  --sp-yellow: #d8961c; --sp-yellow-c: #f8eac9; --sp-yellow-on: #3a2600; --sp-yellow-f: #2a1b00;
  --sp-green: #138276;  --sp-green-c: #cdeee8;  --sp-green-on: #04302b;  --sp-green-f: #fff;
  --sp-navy: #15273f; --sp-flag: #15273f; --sp-flag-f: #fff;
  --sp-hoist: linear-gradient(90deg, var(--sp-red) 0 var(--hw, 8px), transparent 0);
  --sp-acc: var(--sp-blue); --sp-acc-c: var(--sp-blue-c); --sp-acc-on: var(--sp-blue-on); --sp-acc-f: var(--sp-blue-f);

  --bg: #f7f8fc; --side: #eff2f9; --panel: #ffffff; --sunk: #eff2f9; --hover: #e7ebf4;
  --sp-c1: #eff2f9; --sp-c2: #e7ebf4; --sp-c3: #dbe0ec;
  --ink: #1f1f1f; --ink2: #444746; --mute: #5f6368; --faint: #9aa0a6;
  --line: #e1e3e1; --line2: #eceff3; --strong: #c4c7c5;
  --brand: var(--sp-acc); --brand-h: var(--sp-acc); --on-brand: var(--sp-acc-f); --signal: var(--sp-red);
  --accent: var(--sp-acc); --accent-bg: color-mix(in srgb, var(--sp-acc-c) 70%, transparent); --ring: color-mix(in srgb, var(--sp-acc) 45%, transparent);
  --bad: #b3261e; --bad-bg: #fce8e6; --warn: #b06000; --warn-bg: #fef7e0; --ok: #137333; --ok-bg: #e6f4ea;
  --we: #f8f9fc; --we-ink: #d93025;
  --today-col: rgba(47, 79, 168, .045); --hc: rgba(47, 79, 168, .06); --row-h: rgba(47, 79, 168, .03); --hatch: rgba(21, 39, 63, .07);
  --k1-bg: #2f4fa8; --k1-fg: #fff;
  --k2-bg: #dfe6f8; --k2-fg: #0e1d47;
  --k3-bg: #cdeee8; --k3-fg: #04302b;
  --k4-bg: #e07a2c; --k4-fg: #fff;
  --k5-bg: #f8e3b0; --k5-fg: #3a2600;
  --r-sick: #d9473b; --r-leave: #2f4fa8; --r-vacation: #138276; --r-duty: #7a4fb5; --r-practice: #c97a16; --r-other: #5f6368;
  --g0: #2f4fa8; --g1: #138276; --g2: #c97a16; --g3: #7a4fb5; --g4: #1d8fa6; --g5: #d9473b;
  --sh-1: 0 1px 2px rgba(21, 39, 63, .12), 0 1px 3px 1px rgba(21, 39, 63, .06);
  --sh-2: 0 1px 3px rgba(21, 39, 63, .14), 0 4px 10px 3px rgba(21, 39, 63, .08);
  --sh-3: 0 6px 12px rgba(21, 39, 63, .12), 0 16px 40px 8px rgba(21, 39, 63, .13);
  --ease: cubic-bezier(.2, 0, 0, 1);
  --sp-emph: cubic-bezier(.05, .7, .1, 1);
  --sp-spring: cubic-bezier(.3, 1.45, .45, 1);
  --sp-bounce: cubic-bezier(.34, 1.8, .5, 1);
  color-scheme: light;
}
/* тёмная: глубокий графит, цвета светлее и мягче */
:root[data-design="sphere"][data-theme="dark"] {
  --sp-blue: #b4c6f5; --sp-blue-c: #24407f; --sp-blue-on: #dfe6f8; --sp-blue-f: #0e1d47;
    --sp-red: #ffb4a8; --sp-red-c: #842519; --sp-red-on: #fde3de; --sp-red-f: #5a130b;
    --sp-yellow: #f0c070; --sp-yellow-c: #5a3f05; --sp-yellow-on: #f8eac9; --sp-yellow-f: #3a2600;
    --sp-green: #84d6cb; --sp-green-c: #005048; --sp-green-on: #cdeee8; --sp-green-f: #003731;
  --bg: #10131a; --side: #161a22; --panel: #1a1f29; --sunk: #232a36; --hover: #2c3442; --sp-flag: #2a4a92;
  --sp-c1: #1a1f29; --sp-c2: #232a36; --sp-c3: #2c3442;
  --ink: #e3e3e3; --ink2: #c4c7c5; --mute: #9aa0a6; --faint: #6f7377;
  --line: #3c4043; --line2: #2d2f31; --strong: #5f6368;
  --bad: #ffb4a8; --bad-bg: #3c1f1d; --warn: #fdd663; --warn-bg: #3a2f10; --ok: #84d6cb; --ok-bg: #16301e;
  --we: #1e2430; --we-ink: #ffb4a8;
  --today-col: rgba(180, 198, 245, .06); --hc: rgba(180, 198, 245, .07); --row-h: rgba(255, 255, 255, .03); --hatch: rgba(255, 255, 255, .08);
  --k1-bg: #b4c6f5; --k1-fg: #0e1d47; --k2-bg: #24407f; --k2-fg: #dfe6f8; --k3-bg: #005048; --k3-fg: #cdeee8;
  --k4-bg: #ffb870; --k4-fg: #4a2800; --k5-bg: #594300; --k5-fg: #ffdf99;
  --r-sick: #ffb4a8; --r-leave: #b4c6f5; --r-vacation: #84d6cb; --r-duty: #d7aefb; --r-practice: #ffb870; --r-other: #9aa0a6;
  --g0: #b4c6f5; --g1: #84d6cb; --g2: #ffb870; --g3: #d7aefb; --g4: #78d9ec; --g5: #ffb4a8;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .5); --sh-2: 0 2px 8px rgba(0, 0, 0, .5); --sh-3: 0 16px 48px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-design="sphere"][data-theme="system"] {
    --sp-blue: #b4c6f5; --sp-blue-c: #24407f; --sp-blue-on: #dfe6f8; --sp-blue-f: #0e1d47;
    --sp-red: #ffb4a8; --sp-red-c: #842519; --sp-red-on: #fde3de; --sp-red-f: #5a130b;
    --sp-yellow: #f0c070; --sp-yellow-c: #5a3f05; --sp-yellow-on: #f8eac9; --sp-yellow-f: #3a2600;
    --sp-green: #84d6cb; --sp-green-c: #005048; --sp-green-on: #cdeee8; --sp-green-f: #003731;
    --bg: #10131a; --side: #161a22; --panel: #1a1f29; --sunk: #232a36; --hover: #2c3442; --sp-flag: #2a4a92;
    --sp-c1: #1a1f29; --sp-c2: #232a36; --sp-c3: #2c3442;
    --ink: #e3e3e3; --ink2: #c4c7c5; --mute: #9aa0a6; --faint: #6f7377; --line: #3c4043; --line2: #2d2f31; --strong: #5f6368;
    --bad: #ffb4a8; --bad-bg: #3c1f1d; --warn: #fdd663; --warn-bg: #3a2f10; --ok: #84d6cb; --ok-bg: #16301e;
    --we: #1e2430; --we-ink: #ffb4a8; --today-col: rgba(180, 198, 245, .06); --hc: rgba(180, 198, 245, .07); --row-h: rgba(255, 255, 255, .03); --hatch: rgba(255, 255, 255, .08);
    --k1-bg: #b4c6f5; --k1-fg: #0e1d47; --k2-bg: #24407f; --k2-fg: #dfe6f8; --k3-bg: #005048; --k3-fg: #cdeee8; --k4-bg: #ffb870; --k4-fg: #4a2800; --k5-bg: #594300; --k5-fg: #ffdf99;
    --r-sick: #ffb4a8; --r-leave: #b4c6f5; --r-vacation: #84d6cb; --r-duty: #d7aefb; --r-practice: #ffb870; --r-other: #9aa0a6;
    --g0: #b4c6f5; --g1: #84d6cb; --g2: #ffb870; --g3: #d7aefb; --g4: #78d9ec; --g5: #ffb4a8;
    --sh-1: 0 1px 2px rgba(0, 0, 0, .5); --sh-2: 0 2px 8px rgba(0, 0, 0, .5); --sh-3: 0 16px 48px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

/* цвет раздела: синий график, красные отсутствия, жёлтые люди, зелёные новости */
:root[data-design="sphere"] body {
  &[data-sec="absences"], &[data-sec="guide"] { --sp-acc: var(--sp-red); --sp-acc-c: var(--sp-red-c); --sp-acc-on: var(--sp-red-on); --sp-acc-f: var(--sp-red-f); }
  &[data-sec="people"], &[data-sec="settings"] { --sp-acc: var(--sp-yellow); --sp-acc-c: var(--sp-yellow-c); --sp-acc-on: var(--sp-yellow-on); --sp-acc-f: var(--sp-yellow-f); }
  &[data-sec="board"], &[data-sec="changes"] { --sp-acc: var(--sp-green); --sp-acc-c: var(--sp-green-c); --sp-acc-on: var(--sp-green-on); --sp-acc-f: var(--sp-green-f); }
  --brand: var(--sp-acc); --brand-h: var(--sp-acc); --on-brand: var(--sp-acc-f); --accent: var(--sp-acc);
  --accent-bg: color-mix(in srgb, var(--sp-acc-c) 70%, transparent); --ring: color-mix(in srgb, var(--sp-acc) 45%, transparent);
}
/* жёлтый на светлом — текст и линии темнее, иначе не читается */
:root[data-design="sphere"]:not([data-theme="dark"]) body:is([data-sec="people"], [data-sec="settings"]) { --accent: #a06800; }

/* ==========================================================================
   «Сфера»: основа и элементы
   ========================================================================== */
:root[data-design="sphere"] {
  & body { font: 400 14px/1.5 var(--sp-f); letter-spacing: .005em; background: var(--bg); transition: background-color .4s; }
  & h1 { font-size: 32px; font-weight: 500; letter-spacing: -.02em; }
  & h2 { font-weight: 500; letter-spacing: -.01em; }
  & h3 { font-weight: 500; letter-spacing: .01em; }
  & b { font-weight: 600; }
  & .mono, & .num { font-variant-numeric: tabular-nums; }
  & kbd { font: 500 11px/1 var(--sp-code); padding: 4px 7px; border-radius: 8px; border: 0; background: var(--sp-c2); box-shadow: none; }
  & ::selection { background: var(--sp-acc-c); color: var(--sp-acc-on); }
  & :focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
  & :is(input, select, textarea):focus-visible { outline: none; }
  & .ico { stroke-width: 1.8; }

  /* кнопки: пилюли; при нажатии сжимаются в скруглённый квадрат — форма отвечает на палец */
  & .btn {
    height: 40px; padding: 0 22px; gap: 8px; border-radius: 999px; border: 1px solid var(--strong); background: transparent; box-shadow: none;
    color: var(--accent); font: 500 14px/1 var(--sp-f); letter-spacing: .01em;
    transition: border-radius .45s var(--sp-spring), background-color .2s, box-shadow .25s, color .2s, transform .45s var(--sp-spring), border-color .2s;
  }
  & .btn:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: var(--strong); }
  & .btn:active { border-radius: 12px; transform: scale(.96); transition-duration: .12s, .2s, .25s, .2s, .12s, .2s; }
  & .btn.primary { background: var(--sp-acc); border-color: transparent; color: var(--sp-acc-f); }
  & .btn.primary:hover { background: var(--sp-acc); box-shadow: var(--sh-1); filter: brightness(1.06); }
  & .btn.danger { background: var(--sp-red); border-color: transparent; color: var(--sp-red-f); }
  & .btn.ghost { border-color: transparent; }
  & .btn.danger-t { color: var(--bad); }
  & .btn.sm { height: 34px; padding: 0 16px; border-radius: 999px; font-size: 13.5px; }
  & .btn.lg { height: 52px; padding: 0 30px; border-radius: 999px; font-size: 16px; }
  & .btn.sm:active, & .btn.lg:active { border-radius: 14px; }
  & .btn.busy::after { border-color: currentColor; border-right-color: transparent; color: var(--accent); }
  & .btn.primary.busy::after { border-color: var(--sp-acc-f); border-right-color: transparent; }
  & .ibtn { width: 40px; height: 40px; border-radius: 999px; border: 0; color: var(--ink2); transition: background-color .2s, border-radius .4s var(--sp-spring), transform .4s var(--sp-spring); }
  & .ibtn:hover { background: var(--hover); color: var(--ink); }
  & .ibtn:active { border-radius: 12px; transform: scale(.92); }
  & .link { color: var(--accent); }

  & .seg, & .ps-seg { gap: 2px; padding: 4px; border: 0; border-radius: 999px; background: var(--sp-c2); }
  & .seg button { height: 32px; padding: 0 16px; border-radius: 999px; font-weight: 500; color: var(--ink2); transition: background-color .3s, color .3s, transform .4s var(--sp-spring); }
  & .seg button:active { transform: scale(.94); }
  & .seg button.on { background: var(--panel); color: var(--ink); box-shadow: var(--sh-1); }
  & .seg.sm button { height: 28px; padding: 0 12px; }
  & .ps-thumb { border-radius: 999px; background: var(--panel); box-shadow: var(--sh-1); }
  & .ps-seg.ready .ps-thumb { transition: left .5s var(--sp-spring), top .5s var(--sp-spring), width .5s var(--sp-spring), height .4s; }
  & .ps-o { height: 36px; padding: 0 18px; border-radius: 999px; font-weight: 500; color: var(--ink2); }
  & .ps-o.on .ico { color: var(--accent); }

  & .chip { height: 34px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--strong); background: transparent; font-weight: 500; color: var(--ink2); transition: all .3s var(--sp-spring); }
  & .chip:hover { background: var(--hover); }
  & .chip.on { background: var(--sp-acc-c); border-color: transparent; color: var(--sp-acc-on); }

  & input, & select, & textarea { min-height: 44px; padding: 10px 16px; border-radius: 16px; border: 1px solid transparent; background: var(--sp-c2); font: 400 14.5px/1.4 var(--sp-f);
    transition: background-color .2s, box-shadow .25s, border-radius .4s var(--sp-spring); }
  & input:hover, & select:hover, & textarea:hover { border-color: transparent; background: var(--sp-c3); }
  & input:focus, & select:focus, & textarea:focus { border-color: transparent; background: var(--panel); box-shadow: inset 0 0 0 2px var(--accent); border-radius: 12px; }
  & select { padding-right: 38px; background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; }
  & input[type="date"], & input.num { font-family: var(--sp-f); font-variant-numeric: tabular-nums; }
  & input[type="checkbox"], & input[type="radio"] { min-height: 0; }
  & .fld-l { font-weight: 500; color: var(--ink2); }
  & .search input { padding-left: 42px; height: 44px; border-radius: 999px; background: var(--sp-c2); }
  & .search .ico { left: 15px; }
  & .chk-box { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--mute); transition: all .35s var(--sp-bounce); }
  & .chk input:checked + .chk-box { background: var(--accent); border-color: var(--accent); color: var(--sp-acc-f); transform: scale(1.08); }
  & .switch { border-radius: 999px; }
  & .switch.on { background: var(--accent); }

  & .callout { padding: 14px 18px; border-radius: 20px; background: var(--sp-c1); }
  & .callout.bad { background: var(--bad-bg); } & .callout.ok { background: var(--ok-bg); } & .callout.warn { background: var(--warn-bg); }
  & .cnt { height: 20px; min-width: 20px; padding: 0 6px; border-radius: 999px; font: 600 11px/1 var(--sp-f); background: var(--sp-c2); }
  & .cnt.bad { background: var(--sp-red); color: var(--sp-red-f); }
  & .tag { padding: 4px 9px; border-radius: 999px; border: 0; background: var(--sp-c2); font: 600 10.5px/1 var(--sp-f); }
  & .mk { border-radius: 8px; font: 600 11px/1 var(--sp-f); letter-spacing: .01em; }
  & .mk.lg { height: 32px; min-width: 42px; border-radius: 12px; font-size: 13px; }
  & .gn { height: 22px; min-width: 22px; padding: 0 7px; border-radius: 999px; font: 600 11px/1 var(--sp-f); }
  & .avatar { box-shadow: none; }
  & .skel i { border-radius: 999px; }
  & .empty-t { font-size: 18px; font-weight: 500; }
  & details.more > summary { font-weight: 500; }

  /* карточки разных экранов: крупные скругления, тональные подложки, без рамок */
  & :is(.tbl-wrap, .kpis, .pm-card, .fc, .ch-group, .vault, .pilot, .ab-card, .ab-roll, .ab-needs, .ab-out, .ab-tl, .ae-in, .mc-card, .su-card, .pp-sum, .cz .pm-ctrl, .dl-day, .print-prev, .gd-panel, .nt, .cred, .pass) {
    border-radius: 28px; border-color: transparent; box-shadow: none;
  }
  & :is(.ab-card, .ab-roll, .ab-needs, .ab-out, .ab-tl, .tbl-wrap, .pm-card, .ch-group, .vault, .pilot, .ae-in, .pp-sum) { background: var(--panel); box-shadow: var(--sh-1); }
  & :is(.ab-nums > div, .ab-date, .day-fill, .cp-list, .stp, .flag, .su-sum, .su-duty, .su-warn, .pilot-f, .ae-person, .ae-drop, .in-tabs, .in-warn) { border-radius: 20px; }
  & .tbl { font-size: 14px; }
  & .tbl th { font-weight: 500; }
  & .tbl tbody tr { transition: background-color .2s; }
  & .tbl tbody tr:hover { background: color-mix(in srgb, var(--sp-acc-c) 30%, transparent); }

  /* страницы: шапка крупно, мягкое появление */
  & .page { padding: 28px 40px 110px; max-width: 1360px; margin: 0 auto; }
  & .pg-head h1, & .ab-title h1 { font-size: 40px; font-weight: 500; letter-spacing: -.03em; }
  & .pg-sub { font-size: 15px; color: var(--mute); }
  & .pg-head { margin-bottom: 26px; }
}

/* ==========================================================================
   «Сфера»: поля внутри своих капсул, выбор причины и сроков — без чёрных заливок
   ========================================================================== */
:root[data-design="sphere"] {
  /* капсула рисует себя сама, поле внутри — прозрачное и без своих полей */
  & :is(.ae-in, .ab-search, .pal-in, .hq-g) input, & :is(.ae-in, .ab-search, .pal-in, .hq-g) input:is(:hover, :focus) {
    min-height: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  & .ae-in { height: 46px; padding: 0 16px; gap: 10px; border: 0; border-radius: 999px; background: var(--sp-c2); transition: background-color .2s, box-shadow .25s; }
  & .ae-in:hover { background: var(--sp-c3); }
  & .ae-in:focus-within { background: var(--panel); border: 0; box-shadow: inset 0 0 0 2px var(--accent); }
  & .ae-drop { left: 0; right: 0; top: calc(100% + 6px); padding: 6px; border: 0; border-radius: 22px; background: var(--sp-c1); box-shadow: var(--sh-3); animation: spMenu .35s var(--sp-spring); transform-origin: top center; }
  & .ae-drop button { height: 40px; padding: 0 12px; border-radius: 14px; }
  & .ae-drop button:hover, & .ae-drop button.first { background: var(--sp-c3); }
  & .ae-chip { height: 32px; padding: 0 4px 0 12px; border: 0; border-radius: 999px; background: var(--sp-acc-c); color: var(--sp-acc-on); font-weight: 500; animation: spPop .4s var(--sp-bounce); }
  & .ae-chip button { border-radius: 50%; color: inherit; }
  & .ae-quick a, & .ae-quick button { color: var(--accent); }
  & .ab-search { height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--sp-c2); }
  & .ab-search:focus-within { background: var(--panel); box-shadow: inset 0 0 0 2px var(--accent); }

  /* причина: тихие капсулы, выбранная — подложкой цвета раздела */
  & .ae-reasons { gap: 6px; }
  & .ae-reasons button { height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--sp-c2); color: var(--ink2); font-weight: 500;
    transition: background-color .25s, color .25s, border-radius .4s var(--sp-spring), transform .4s var(--sp-spring); }
  & .ae-reasons button:hover { background: var(--sp-c3); }
  & .ae-reasons button:active { transform: scale(.96); border-radius: 12px; }
  & .ae-reasons button.on { border: 0; background: var(--sp-acc-c); color: var(--sp-acc-on); box-shadow: none; font-weight: 600; }
  & .ae-presets button { height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--sp-c2); color: var(--ink2); font-weight: 500; transition: background-color .25s, color .25s; }
  & .ae-presets button:hover { background: var(--sp-c3); }
  & .ae-presets button.on { background: var(--sp-acc); color: var(--sp-acc-f); }
  & .dd-kit.on { border-color: transparent; box-shadow: inset 0 0 0 2px var(--sp-acc); }
  & .pips i.on { background: var(--sp-acc); }
  & .mk-ghost-t, & .sw-tip, & .gx-htip, & .gx-hmenu, & .tw-htip, & .gx-tip { border-radius: 12px; background: var(--sp-navy); color: #f3efe6; }
}

/* ==========================================================================
   «Сфера»: каркас — панель сверху, вкладки-капли, все разделы, пропуск, плавающая кнопка-вымпел
   ========================================================================== */
:root[data-design="sphere"] {
  & .sp-app { display: block; min-height: 100vh; min-height: 100dvh; }
  & .sp-head { position: sticky; top: 0; z-index: 30; background: var(--bg); transition: background-color .4s; }
  & .sp-top { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 720px) minmax(220px, 1fr); align-items: center; gap: 16px; height: 68px; padding: 0 14px 0 20px; }
  & .sp-brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); justify-self: start; }
  & .sp-brand .logo { border-radius: 12px; transition: transform .6s var(--sp-bounce), border-radius .5s var(--sp-spring); animation: spDrop .9s var(--sp-bounce) backwards; }
  & .sp-brand .logo { transform-origin: left center; }
  & .sp-brand:hover .logo { animation: spWave 1.1s ease-in-out; }
  & .sp-bt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  & .sp-bt b { font: 500 22px/1 var(--sp-f); letter-spacing: -.02em; }
  & .sp-bt small { font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  & .sp-search { display: flex; align-items: center; gap: 14px; height: 50px; padding: 0 10px 0 20px; border: 0; border-radius: 999px; background: var(--sp-c2); color: var(--mute); font-size: 16px; text-align: left;
    transition: background-color .25s, box-shadow .3s, transform .5s var(--sp-spring); animation: spGrow .8s var(--sp-spring) .1s backwards; }
  & .sp-search span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  & .sp-search:hover { background: var(--panel); box-shadow: var(--sh-2); }
  & .sp-search:active { transform: scale(.985); }
  & .sp-search .ico { color: var(--ink2); }
  & .sp-search kbd { background: var(--panel); }
  & .sp-acts { justify-self: end; display: flex; align-items: center; gap: 2px; }
  & .sp-ic { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--ink2); transition: background-color .2s, border-radius .4s var(--sp-spring), transform .4s var(--sp-spring); }
  & .sp-ic:hover { background: var(--hover); }
  & .sp-ic:active { border-radius: 14px; transform: scale(.9); }
  & .sp-hq { display: inline-flex; align-items: center; gap: 6px; height: 36px; margin-right: 6px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: var(--sp-c2); color: var(--ink); font-weight: 500; transition: transform .4s var(--sp-spring), border-radius .4s var(--sp-spring); }
  & .sp-hq:hover .ico { transform: translateX(-3px); }
  & .sp-hq .ico { transition: transform .3s var(--sp-spring); }
  & .sp-hq:active { border-radius: 12px; transform: scale(.95); }

  /* все разделы: четыре скруглённых квадрата; при наведении расходятся, один загорается цветом раздела */
  & .sp-quad { display: grid; grid-template-columns: 7px 7px; gap: 3px; }
  & .sp-quad i { width: 7px; height: 7px; border-radius: 2.5px; background: currentColor; transition: transform .45s var(--sp-spring), background-color .3s, border-radius .4s var(--sp-spring); }
  & .sp-apps:hover .sp-quad i:nth-child(1) { transform: translate(-1px, -1px); background: var(--sp-acc); border-radius: 50%; }
  & .sp-apps:hover .sp-quad i:nth-child(2) { transform: translate(1px, -1px); }
  & .sp-apps:hover .sp-quad i:nth-child(3) { transform: translate(-1px, 1px); }
  & .sp-apps:hover .sp-quad i:nth-child(4) { transform: translate(1px, 1px); }
  & .sp-apps.pressed { background: var(--hover); }

  /* солнце ↔ луна */
  & .sp-sun { position: relative; width: 22px; height: 22px; transition: transform .7s var(--sp-spring); }
  & .sp-sun::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: currentColor; transition: width .5s var(--sp-spring), height .5s var(--sp-spring), margin .5s var(--sp-spring); }
  & .sp-sun::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -12px 0 0 -2px; border-radius: 50%; background: var(--bg); transform: scale(0); transition: transform .5s var(--sp-spring); }
  & .sp-ic:hover .sp-sun::after { background: var(--hover); }
  & .sp-sun > i { position: absolute; left: 50%; top: 50%; width: 2px; height: 4px; margin: -2px -1px; border-radius: 1px; background: currentColor; transform: rotate(calc(var(--i) * 45deg)) translateY(-9px); transition: transform .5s var(--sp-spring) calc(var(--i) * 20ms), opacity .3s; }
  & .sp-theme:hover .sp-sun { transform: rotate(45deg); }
  &[data-theme="dark"] .sp-sun::before { width: 16px; height: 16px; margin: -8px; }
  &[data-theme="dark"] .sp-sun::after { transform: scale(1); }
  &[data-theme="dark"] .sp-sun > i { opacity: 0; transform: rotate(calc(var(--i) * 45deg)) translateY(-3px); }
  &[data-theme="dark"] .sp-theme:hover .sp-sun { transform: rotate(-20deg); }

  /* кнопка профиля: значок роли на тёмно-синем поле знака */
  & .sp-me { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-left: 4px; border: 0; border-radius: 14px; background: none; transition: background-color .2s; }
  & .sp-me:hover, & .sp-me.pressed { background: var(--hover); }
  & .sp-me .avatar { width: 34px; height: 34px; border-radius: 11px; background: var(--sp-flag); color: #fff; box-shadow: none; transition: border-radius .4s var(--sp-spring), transform .4s var(--sp-spring); }
  & .sp-me:hover .avatar { border-radius: 9px; transform: scale(1.06); }
  & .sp-me:active .avatar { transform: scale(.92); }
  & .sp-me .unseen-dot { z-index: 2; top: 4px; right: 4px; }

  /* вкладки разделов: у каждой свой цвет, подложка-капля перетекает */
  & .sp-tabs { position: relative; display: flex; justify-content: center; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto; padding: 2px 0 14px; }
  & .sp-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 20px 0 16px; border-radius: 999px; color: var(--ink2); font: 500 14.5px/1 var(--sp-f);
    transition: color .35s, background-color .2s, transform .45s var(--sp-spring); animation: spDrop .7s var(--sp-bounce) calc(var(--i) * 60ms + .15s) backwards; }
  & .sp-tab:hover:not(.on) { background: var(--hover); }
  & .sp-tab:active { transform: scale(.94); }
  & .sp-tab .ico { transition: transform .5s var(--sp-bounce); }
  & .sp-tab:hover .ico { transform: scale(1.12) rotate(-6deg); }
  & .sp-tab.on .ico { animation: spHop .65s var(--sp-bounce); }
  & .sp-tab[data-c="blue"].on { color: var(--sp-blue-on); } & .sp-tab[data-c="red"].on { color: var(--sp-red-on); }
  & .sp-tab[data-c="yellow"].on { color: var(--sp-yellow-on); } & .sp-tab[data-c="green"].on { color: var(--sp-green-on); }
  & .sp-tab .unseen-dot, & .sp-tab .fresh-dot { position: static; }
  & .sp-blob { position: absolute; top: 2px; height: 44px; left: 0; right: 100%; z-index: 0; border-radius: 999px; background: var(--sp-blue-c); opacity: 0; pointer-events: none; }
  & .sp-blob.ready { opacity: 1; }
  & .sp-blob.off { opacity: 0; transform: scale(.6); transition: opacity .25s, transform .3s !important; }
  & .sp-blob[data-c="red"] { background: var(--sp-red-c); } & .sp-blob[data-c="yellow"] { background: var(--sp-yellow-c); } & .sp-blob[data-c="green"] { background: var(--sp-green-c); }

  /* смена раздела: страница въезжает со стороны вкладки */
  & .sp-app .main { position: relative; }
  & .sp-app .main.enter > * { animation: spIn .55s var(--sp-emph) backwards; }
  & .sp-app .main.enter[data-dir="r"] > * { animation-name: spInR; }
  & .sp-app .main.enter[data-dir="l"] > * { animation-name: spInL; }

  /* плавающая кнопка: с подписью, при прокрутке — круг */
  /* раскрытая — вымпел: красная полоса у древка, справа раздвоенный хвост; свёрнутая — круг */
  & .sp-fab { position: fixed; right: 28px; bottom: 28px; z-index: 35; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 40px 0 22px; border: 0; border-radius: 20px 0 0 20px;
    background-color: var(--sp-acc-c); background-image: var(--sp-hoist); --hw: 6px; color: var(--sp-acc-on); font: 500 15px/1 var(--sp-f);
    clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%); filter: drop-shadow(0 4px 10px rgba(21, 39, 63, .18));
    transition: transform .5s var(--sp-spring), opacity .25s, border-radius .45s var(--sp-spring), padding .45s var(--sp-spring), gap .45s var(--sp-spring), clip-path .45s var(--sp-emph), background-color .4s, color .4s, filter .3s;
    animation: spFab .8s var(--sp-bounce) .5s backwards; }
  & .sp-fab span { max-width: 220px; overflow: hidden; white-space: nowrap; transition: max-width .45s var(--sp-spring), opacity .3s; }
  & .sp-fab .ico { transition: transform .5s var(--sp-bounce); }
  & .sp-fab:hover { filter: drop-shadow(0 10px 22px rgba(21, 39, 63, .24)); }
  & .sp-fab:hover .ico { transform: rotate(90deg); }
  & .sp-fab:active { transform: scale(.94); }
  & .sp-fab.mini { padding: 0 18px; gap: 0; border-radius: 30px; background-image: none; clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%); }
  & .sp-fab.mini span { max-width: 0; opacity: 0; }
  & .sp-fab.hide, & .sp-app:has(.mo-work.insp-open) .sp-fab, & .sp-app:has(.mo-work.blank) .sp-fab { transform: translateY(24px) scale(.7); opacity: 0; pointer-events: none; }
  & body[data-sec="month"] .sp-fab:not(.mini) { padding: 0 18px; gap: 0; border-radius: 30px; background-image: none; clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%); }
  & body[data-sec="month"] .sp-fab:not(.mini) span { max-width: 0; opacity: 0; }
  & body[data-sec="month"] .sp-fab:hover { padding: 0 40px 0 22px; gap: 12px; border-radius: 20px 0 0 20px; background-image: var(--sp-hoist); clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%); }
  & body[data-sec="month"] .sp-fab:hover span { max-width: 220px; opacity: 1; }
}
@keyframes spIn { from { opacity: 0; transform: translateY(18px) scale(.99); } }
@keyframes spInR { from { opacity: 0; transform: translateX(48px); } }
@keyframes spInL { from { opacity: 0; transform: translateX(-48px); } }
@keyframes spDrop { from { opacity: 0; transform: translateY(-14px) scale(.85); } }
@keyframes spGrow { from { opacity: 0; transform: scaleX(.6); } }
@keyframes spSpin { from { transform: rotate(-270deg) scale(.6); opacity: 0; } }
@keyframes spHop { 30% { transform: translateY(-5px) scale(1.18) rotate(-8deg); } 60% { transform: translateY(1px) scale(.96); } }
@keyframes spFab { from { opacity: 0; transform: translateY(24px) scale(.7); } }
@keyframes spPop { from { opacity: 0; transform: scale(.4); } }
@keyframes spWave { 30% { transform: skewY(-4deg) scaleX(.94); } 65% { transform: skewY(2deg) scaleX(1.02); } }

/* сетка разделов и карточка аккаунта */
:root[data-design="sphere"] {
  & .pane.sp-apps-p, & .pane.sp-acc-p { padding: 0; border: 0; border-radius: 32px; background: var(--sp-c1); box-shadow: var(--sh-3); transform-origin: top right; animation: spMenu .45s var(--sp-spring); }
  & .pane.sp-apps-p.out, & .pane.sp-acc-p.out { animation: spMenuOut .16s var(--ease) forwards; }
  & .sp-apps-in { width: 340px; padding: 18px 14px 14px; }
  & .sp-apps-h { padding: 0 8px 12px; font-size: 13px; font-weight: 500; color: var(--mute); text-align: center; }
  & .sp-apps-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 10px; border-radius: 26px; background: var(--panel); }
  & .sp-app-i { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px 12px; border: 0; border-radius: 20px; background: none; color: var(--ink); transition: background-color .2s; animation: spPop .5s var(--sp-bounce) backwards; }
  & .sp-app-i:nth-child(2) { animation-delay: .03s; } & .sp-app-i:nth-child(3) { animation-delay: .06s; } & .sp-app-i:nth-child(4) { animation-delay: .09s; }
  & .sp-app-i:nth-child(5) { animation-delay: .12s; } & .sp-app-i:nth-child(6) { animation-delay: .15s; } & .sp-app-i:nth-child(7) { animation-delay: .18s; }
  & .sp-app-i:nth-child(8) { animation-delay: .21s; } & .sp-app-i:nth-child(n + 9) { animation-delay: .24s; }
  & .sp-app-i:hover { background: var(--hover); }
  & .sp-app-i > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--sp-c2); color: var(--ink2); transition: background-color .3s, color .3s, border-radius .45s var(--sp-spring), transform .45s var(--sp-spring); }
  & .sp-app-i:hover > span { border-radius: 23px; transform: translateY(-2px); background: var(--sp-c3); color: var(--ink); }
  & .sp-app-i.on > span { background: var(--sp-acc-c); color: var(--sp-acc-on); }
  & .sp-app-i.on b { font-weight: 600; }
  & .sp-app-i b { font-size: 12.5px; font-weight: 500; }

  & .sp-acc { width: 340px; display: flex; flex-direction: column; gap: 8px; padding: 8px; }
  /* кто вошёл: значок роли, ФИО, роль и рота, логин — спокойно, на белом */
  & .sp-who { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 14px 14px 12px; border: 0; border-radius: 22px; background: var(--panel); color: var(--ink); text-align: left; transition: background-color .2s, border-radius .4s var(--sp-spring); animation: spIn .4s var(--sp-emph) backwards; }
  & .sp-who:hover { background: var(--hover); }
  & .sp-who:active { border-radius: 16px; }
  & .sp-who .avatar { flex: none; width: 48px; height: 48px; border-radius: 15px; background: var(--sp-flag); color: #fff; }
  & .sp-who .avatar svg { width: 22px; height: 22px; }
  & .sp-who-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  & .sp-who-t b { font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
  & .sp-who-t small { font-size: 12.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  & .sp-who-l { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-family: var(--sp-code); font-size: 12px !important; color: var(--ink2) !important; }
  & .sp-acc-list { width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 22px; background: var(--panel); }
  & .sp-acc-r { display: flex; align-items: center; gap: 14px; width: 100%; height: 46px; padding: 0 16px; border: 0; border-radius: 16px; background: none; color: var(--ink); font-size: 14px; text-align: left; transition: background-color .2s; }
  & .sp-acc-r:hover { background: var(--hover); }
  & .sp-acc-r .ico { color: var(--ink2); }
  & .sp-acc-r span { flex: 1; }
  & .sp-acc-f { margin: 2px 0 2px; text-align: center; }
}
@keyframes spMenu { from { opacity: 0; transform: scale(.92) translateY(-8px); } }
@keyframes spMenuOut { to { opacity: 0; transform: scale(.92); } }

/* ==========================================================================
   «Сфера»: меню, листы, окна, уведомления, поиск
   ========================================================================== */
:root[data-design="sphere"] {
  /* меню: скругление 24, появляется из угла пружиной */
  & .pop { min-width: 240px; padding: 8px; border: 0; border-radius: 24px; background: var(--sp-c1); box-shadow: var(--sh-3); transform-origin: top right; animation: spMenu .4s var(--sp-spring); }
  & .pop.at-point { transform-origin: top left; }
  & .pop.out { animation: spMenuOut .15s var(--ease) forwards; }
  & .pop-item { height: 44px; padding: 0 14px; gap: 14px; border-radius: 14px; font-size: 14px; transition: background-color .15s; }
  & .pop-item:hover, & .pop-item:focus-visible { background: var(--sp-c3); }
  & .pop-item .ico { color: var(--ink2); }
  & .pop-sep { margin: 6px 10px; background: var(--line); }

  /* всплывающие панели (сводка, этапы) */
  & .pane { border: 0; border-radius: 28px; background: var(--sp-c1); box-shadow: var(--sh-3); animation: spMenu .42s var(--sp-spring); transform-origin: top center; }
  & .pane.out { animation: spMenuOut .15s var(--ease) forwards; }
  & .tip { border-radius: 14px; }

  /* лист: не сбоку, а снизу по центру — поднимается пружиной, сверху ручка */
  & .sh-shade, & .dlg-shade, & .pal-shade { background: rgba(32, 33, 36, .4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  & .sh { top: auto; right: auto; left: 50%; bottom: 0; width: min(780px, calc(100% - 32px)); max-height: min(88vh, 900px); border: 0; border-radius: 36px 36px 0 0; background: var(--sp-c1); box-shadow: var(--sh-3);
    transform: translate(-50%, 100%); opacity: 1; transition: transform .55s var(--sp-emph); }
  & .sh-root.wide .sh { width: min(1040px, calc(100% - 32px)); }
  & .sh-root.open .sh { transform: translate(-50%, 0); }
  & .sh::before { content: ""; position: absolute; top: 10px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--strong); }
  & .sh-head { padding: 30px 20px 14px 32px; border-bottom: 0; }
  & .sh-title h2 { font-size: 26px; font-weight: 400; letter-spacing: -.015em; }
  & .sh-sub { font-size: 14px; }
  & .sh-body { padding: 8px 32px 36px; }
  & .sh-body > * { animation: spIn .5s var(--sp-emph) .12s backwards; }
  & .sh-head .ibtn { background: var(--sp-c2); }
  & .sh-head .ibtn:hover { transform: rotate(90deg); }

  /* окно подтверждения: значок сверху по центру, заголовок крупно, кнопки текстом справа */
  & .dlg { width: min(440px, 100%); border-radius: 32px; background: var(--sp-c1); box-shadow: var(--sh-3); transform: scale(.82); transition: transform .5s var(--sp-spring), opacity .2s; }
  & .dlg-body { align-items: stretch; gap: 14px; padding: 28px 28px 8px; }
  & .dlg-hd { flex-direction: column; align-items: center; gap: 16px; text-align: center; }
  & .dlg-hd h3 { font-size: 24px; font-weight: 400; line-height: 1.25; letter-spacing: -.01em; }
  /* значок — на флажке-вымпеле: полоса у древка, раздвоенный хвост, при появлении разворачивается от древка */
  & .dlg-ic { width: 72px; height: 54px; padding: 0 14px 0 6px; border-radius: 0; background: var(--sp-acc-c); color: var(--sp-acc-on);
    clip-path: polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%); box-shadow: inset 7px 0 0 var(--sp-red); transform-origin: left center; animation: spIc .8s var(--sp-spring) .05s backwards; }
  & .dlg-ic .ico { width: 24px; height: 24px; }
  & .dlg[data-tone="danger"] .dlg-ic { background: var(--sp-red-c); color: var(--sp-red-on); box-shadow: inset 7px 0 0 var(--sp-navy); }
  & .dlg[data-tone="warn"] .dlg-ic { background: var(--sp-yellow-c); color: var(--sp-yellow-on); }
  & .dlg[data-tone="ok"] .dlg-ic { background: var(--sp-green-c); color: var(--sp-green-on); }
  & .dlg-t { text-align: center; font-size: 14.5px; }
  & .dlg-pts { gap: 4px; }
  & .dlg-pts li, & .dlg-pts li:last-child { padding: 11px 14px; border: 0; border-radius: 16px; background: var(--panel); }
  & .dlg-pts li:first-child { border-radius: 20px 20px 8px 8px; } & .dlg-pts li:last-child { border-radius: 8px 8px 20px 20px; } & .dlg-pts li:only-child { border-radius: 20px; }
  & .dlg-pts li > i { border-radius: 50%; background: var(--sp-acc); }
  & .dlg[data-tone="danger"] .dlg-pts li > i { background: var(--sp-red); }
  & .dlg-warn { padding: 12px 14px; border-radius: 18px; background: var(--sp-yellow-c); color: var(--sp-yellow-on); }
  & .dlg-warn .ico { color: inherit; }
  & .dlg-foot { padding: 18px 24px 24px; background: none; border-top: 0; }
  & .dlg-foot .btn.ghost { color: var(--accent); }

  /* уведомление — тёмно-синяя плашка с красной полосой у древка, въезжает пружиной */
  & .toasts { bottom: 28px; }
  & .toast { min-height: 52px; padding: 12px 22px 12px 26px; border-radius: 16px; background: var(--sp-hoist), var(--sp-navy); --hw: 6px; color: #f3efe6; box-shadow: var(--sh-3); font-weight: 500; box-shadow: var(--sh-3); transform: translateY(30px) scale(.8); transition: all .55s var(--sp-spring); }
  &[data-theme="dark"] .toast { background: var(--sp-hoist), #e6e9f2; color: #15273f; }
  & .toast.in { transform: none; }
  & .toast.ok .ico { color: #84d6cb; }
  & .toast-act { border-radius: 10px; color: #b4c6f5; font-weight: 600; }
  &[data-theme="dark"] .toast-act { color: var(--sp-navy); }
  & .toast.err { background: linear-gradient(90deg, #ff8d80 0 6px, transparent 0), #7a1f16; color: #fff; }

  /* быстрый поиск: широкая пилюля, выпадает из панели */
  & .pal-root { padding-top: 10px; }
  & .pal { width: min(720px, 100%); border: 0; border-radius: 28px; background: var(--sp-c1); box-shadow: var(--sh-3); animation: spPal .5s var(--sp-spring); transform-origin: top center; }
  & .pal-in { gap: 14px; padding: 0 22px; border-bottom: 0; }
  & .pal-in input { height: 62px; font-size: 18px; background: none; }
  & .pal-in input:focus { box-shadow: none; }
  & .pal-list { padding: 0 10px 12px; }
  & .pal-item { height: 52px; padding: 0 16px; gap: 16px; border-radius: 18px; animation: spIn .35s var(--sp-emph) backwards; }
  & .pal-item.on { background: var(--sp-blue-c); color: var(--sp-blue-on); }
  & .pal-item.on .ico { color: inherit; }
  & .pal-k { font-size: 12.5px; }
}
@keyframes spIc { from { transform: scaleX(0) skewY(-8deg); opacity: 0; } 60% { transform: scaleX(1.04) skewY(2deg); opacity: 1; } }
@keyframes spPal { from { opacity: 0; transform: scale(.96) translateY(-14px); } }

/* ==========================================================================
   «Сфера»: график — метки-капсулы, «сегодня» флажком поля знака, всё в карточке
   ========================================================================== */
:root[data-design="sphere"] {
  & .mo { height: calc(100vh - 128px); height: calc(100dvh - 128px); }
  & .mo-bar { margin: 0 16px 12px; padding: 8px 10px 8px 14px; gap: 8px 12px; border-radius: 32px; background: var(--panel); box-shadow: var(--sh-1); animation: spIn .5s var(--sp-emph) backwards; }
  & .mo-title h1 { font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
  & .mo-title .yr { font: 400 18px/1 var(--sp-f); color: var(--mute); }
  & .mo-title .ibtn { background: var(--sp-c2); width: 36px; height: 36px; }
  & .mb-view { border-left: 0; padding-left: 4px; }
  & .mb-today { margin-left: 0; }
  & .stage { height: 36px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; background: var(--sp-c2); font-weight: 500; }
  & .stage:hover, & .stage.pressed { background: var(--sp-c3); }
  & .stage.draft { background: var(--sp-yellow-c); color: var(--sp-yellow-on); }
  & .stage.draft b, & .stage.draft span { color: inherit; }
  & .stage.ok { background: var(--sp-green-c); color: var(--sp-green-on); }
  & .stage.ok b, & .stage.ok span { color: inherit; }
  & .stage.draft i { background: var(--sp-yellow); box-shadow: none; }
  & .stage.ok i { background: var(--sp-green); box-shadow: none; }
  & .tg { height: 40px; border: 0; border-radius: 999px; background: var(--sp-c2); }
  & .tg-b { width: 44px; color: var(--ink2); }
  & .tg-b + .tg-b { border-left: 0; }
  & .tg-b:hover { background: var(--sp-c3); }
  & .mb-more, & .mb-sb, & .mb-today { width: 40px; height: 40px; }
  & .btn.issues { background: var(--sp-red-c); color: var(--sp-red-on); border-color: transparent; }
  & .mb-focus { height: 36px; border: 0; border-radius: 999px; background: var(--sp-acc-c); padding: 0 8px 0 6px; }

  & .mo-work { margin: 0 16px 16px; border: 0; border-radius: 32px; background: var(--panel); box-shadow: var(--sh-1); animation: spIn .6s var(--sp-emph) .05s backwards; }
  & .mo-work.blank { background: transparent; box-shadow: none; }
  & .board.slide-next { animation: spInR .5s var(--sp-emph); }
  & .board.slide-prev { animation: spInL .5s var(--sp-emph); }

  /* таблица */
  & table.mx { font-size: 13.5px; }
  & .mx col { width: 40px; }
  & .mx col.c-nm { width: 220px; }
  & .mx col.c-sum { width: 92px; }
  & .mx td.sum { padding: 0 14px 0 10px; white-space: nowrap; }
  & .mx col.we { background: var(--we); }
  & .mx td { height: 36px; border-bottom: 0; }
  & .mx tbody tr + tr td, & .mx tbody tr + tr th.nm { box-shadow: inset 0 1px 0 var(--line2); }
  & .mx td.wk, & .mx th.dh.wk { box-shadow: none; }
  & .mx thead th { height: 64px; border-bottom: 0; background: var(--panel); }
  & .board.sy .mx thead th, & .board.sy .mx thead th.dh.wk { box-shadow: inset 0 -1px 0 var(--line); }
  & .mx tr.gsec td { top: 64px; }
  & .mx tr.gsec:not(:first-child) td { top: 54px; }
  & .mx tr.gsec td::after { background: var(--line2); }
  & .mx .dw { font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; }
  & .mx .dn { min-width: 32px; height: 32px; border-radius: 50%; font: 500 14px/1 var(--sp-f); color: var(--ink); transition: background-color .25s, color .25s, transform .45s var(--sp-bounce); }
  & .mx th.dh:hover .dn { background: var(--hover); transform: scale(1.1); }
  & .mx th.dh.past .dn { color: var(--mute); }
  & .mx th.dh.we .dn, & .mx th.dh.we .dw { color: var(--we-ink); }
  & .mx th.dh.today { box-shadow: none; }
  & .mx th.dh.today::before { display: none; }
  /* сегодня — флажок поля знака: тёмно-синий, красная полоса у древка */
  & .mx th.dh.today .dn { min-width: 34px; padding: 0 4px 0 7px; border-radius: 10px; background: linear-gradient(90deg, var(--sp-red) 0 3px, transparent 0), var(--sp-flag); color: var(--sp-flag-f); font-weight: 600; box-shadow: none; }
  & .mx th.dh.today .dw { color: var(--ink); font-weight: 700; }
  & .mx th.dh.sel:not(.today) .dn { background: var(--sp-blue-c); color: var(--sp-blue-on); }
  & .mx td.today { box-shadow: none; }
  & .mx col.today { background: color-mix(in srgb, var(--sp-flag) 4%, transparent); }
  & .mx col.colon { background: color-mix(in srgb, var(--sp-acc) 9%, transparent); }
  & .mx th.nm { border-right: 0; border-bottom: 0; background: var(--panel); }
  & .board.sx .mx th.nm { box-shadow: 10px 0 14px -12px rgba(60, 64, 67, .35); }
  & .mx th.corner span { padding: 0 20px 12px; font-weight: 500; }
  & .mx th.nm button { height: 36px; padding: 0 12px 0 20px; font-size: 14px; border-radius: 0 999px 999px 0; transition: background-color .2s; }
  & .mx th.nm button:hover { background: var(--hover); }
  & .mx th.nm button:hover .nm-t { color: var(--ink); }
  & .mx .nm-r { font: 600 10px/1 var(--sp-f); letter-spacing: .03em; color: var(--mute); padding: 3px 6px; border-radius: 999px; background: var(--sp-c2); text-transform: none; }
  & .mx tbody tr:hover > td:not(.sum) { background-color: color-mix(in srgb, var(--sp-blue) 5%, transparent); }
  & .mx tbody tr:hover > th.nm, & .mx tbody tr:hover > td.sum { background: color-mix(in srgb, var(--sp-blue) 6%, var(--panel)); }
  & .mx tr.rowon > th.nm, & .mx tr.sel > th.nm { box-shadow: none; background: var(--sp-acc-c); }
  & .mx tr.rowon > th.nm .nm-t { color: var(--sp-acc-on); font-weight: 600; }
  & .mx tr.rowon > td:not(.sum) { background-color: color-mix(in srgb, var(--sp-acc) 7%, transparent); }
  & .mx td.sum, & .mx th.sum { border-left: 0; background: var(--panel); }
  & .mx td.sum .sum-n { font: 600 13.5px/1 var(--sp-f); }
  & .nb { width: 44px; height: 8px; border-radius: 999px; }
  & .nb i { border-radius: 999px; background: var(--faint); }
  & .nb.ok i { background: var(--sp-green); }
  & .nb.over i { background: var(--sp-red); }

  /* метка — капсула с полями внутри клетки; наведение приподнимает, выбор — кольцо */
  & .mx tbody td > .mk, & .mx tfoot td > .mk { inset: 4px 3px; border-radius: 999px; font: 600 11px/1 var(--sp-f);
    transition: transform .4s var(--sp-bounce), box-shadow .25s, border-radius .4s var(--sp-spring), opacity .25s, filter .2s; }
  & .mx tbody td:hover > .mk { transform: scale(1.12); filter: none; z-index: 3; border-radius: 10px; box-shadow: var(--sh-2); }
  & .mx tbody td.sel > .mk, & .mx tbody td.cur > .mk { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--sp-acc); border-radius: 10px; }
  & .mx td.sel { box-shadow: none; background-color: color-mix(in srgb, var(--sp-acc-c) 55%, transparent) !important; border-radius: 12px; }
  & .mx td.cur { box-shadow: inset 0 0 0 2px var(--ring); border-radius: 12px; }
  & .mx tbody td.bad > .mk { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--sp-red); }
  & .mx tbody td.bad > .mk::before { display: none; }
  & .mx tbody td.bad > .mk::after { content: "!"; position: absolute; top: -5px; right: -4px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--sp-red); color: #fff; font: 700 9px/1 var(--sp-f); }
  & .mx tbody td > .mk.chg::after { top: -3px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--sp-yellow); box-shadow: 0 0 0 2px var(--panel); }
  & .mx td.past .mk, & .mx tbody td.past > .mk { opacity: .45; }
  & .mx td.abs { background-image: none; }
  & .mx td.abs::after { content: ""; position: absolute; inset: 9px 2px; border-radius: 999px; background: repeating-linear-gradient(135deg, transparent 0 3px, var(--hatch) 3px 5px); }
  & .mx td .ab { position: relative; z-index: 1; font: 600 10px/1 var(--sp-f); }
  & .mx.reveal tbody td > .mk { animation: spMk .6s var(--sp-bounce) backwards; animation-delay: var(--d, 0ms); }
  & .mx tbody td > .mk.flash { animation: spFlash 1.4s var(--sp-spring); }
  & .mx tr.gsec td { height: 48px; border-bottom: 0; background: var(--panel); }
  & .mx tr.gsec:not(:first-child) td { border-top: 10px solid var(--panel); }
  & .gsec-in { padding: 0 20px; gap: 12px; }
  & .gsec-in b { font-size: 15px; font-weight: 600; }
  & .gchk { height: 26px; padding: 0 12px; border-radius: 999px; background: var(--sp-yellow-c); color: var(--sp-yellow-on); }
  & .gchk.ok { background: var(--sp-green-c); color: var(--sp-green-on); }
  & .mx tfoot th, & .mx tfoot td { border-top: 0; height: 40px; box-shadow: 0 -10px 14px -12px rgba(60, 64, 67, .3); }
  & .mx tfoot td > .mk.empty { box-shadow: inset 0 0 0 2px var(--sp-red); background: var(--sp-red-c); color: var(--sp-red-on); }
  & .foot-l { padding: 0 20px; color: var(--sp-red); }

  /* «места»: дни × места */
  & .slots th, & .slots td { border-bottom-color: var(--line2); }
  & .slots thead th { height: 56px; border-bottom: 0; font-weight: 500; }
  & .slots th.sl-d { border-right: 0; }
  & .slots tr.today th.sl-d { box-shadow: none; }
  & .slots tr.today .dn { display: inline-grid; place-items: center; min-width: 30px; height: 28px; padding: 0 4px 0 7px; border-radius: 4px 9px 9px 4px; background: var(--sp-flag); color: var(--sp-flag-f); box-shadow: none; background: linear-gradient(90deg, var(--sp-red) 0 3px, transparent 0), var(--sp-flag); }
  & .slots td.sl button { height: 40px; border-radius: 999px; transition: background-color .2s; }
  & .slots .chip { border-radius: 999px; }
  & .dl-day { padding: 4px 14px 10px; background: var(--panel); box-shadow: var(--sh-1); }
  & .dl-day.today { box-shadow: 0 0 0 2px var(--sp-flag); background: linear-gradient(90deg, var(--sp-red) 0 5px, transparent 0), var(--panel); }
  & .dl-h .dn { font: 500 24px/1 var(--sp-f); }
  & .dl-n { border-top: 0; border-radius: 14px; }

  /* перетаскивание: столбец светится — подходит, против правил, нельзя */
  & .mx tbody td.dz-ok { background-color: color-mix(in srgb, var(--sp-green) 20%, transparent) !important; }
  & .mx tbody td.dz-warn { background-color: color-mix(in srgb, var(--sp-yellow) 26%, transparent) !important; }
  & .mx tbody td.dz-at { box-shadow: inset 0 0 0 2px var(--ink) !important; border-radius: 12px; }
  & .mk-ghost > .mk { border-radius: 999px; transform: scale(1.18) rotate(-4deg); box-shadow: var(--sh-3); }
  & .mk-ghost-t, & .sw-tip { border-radius: 12px; background: var(--sp-navy); color: #f3efe6; padding: 9px 14px; }
  & .mx tbody td.sw { background-color: color-mix(in srgb, var(--sp-acc-c) 70%, transparent) !important; box-shadow: none; }
  & .mx tbody td.sw-a { border-radius: 999px 0 0 999px; } & .mx tbody td.sw-b { border-radius: 0 999px 999px 0; } & .mx tbody td.sw-a.sw-b { border-radius: 999px; box-shadow: none; }

  /* инспектор: не сбоку — карточка поднимается снизу посередине */
  & .insp { top: auto; right: auto; left: 50%; bottom: 14px; width: min(760px, calc(100% - 28px)); max-height: 58%; border: 0; border-radius: 32px; background: var(--sp-c1); box-shadow: var(--sh-3);
    transform: translate(-50%, calc(100% + 40px)) scale(.9); transition: transform .5s var(--sp-emph), visibility 0s .5s; }
  & .mo-work.insp-open .insp { transform: translate(-50%, 0); transition: transform .55s var(--sp-spring); }
  & .mo-work.insp-open .board > .mx { margin-right: 0; margin-bottom: 46vh; }
  & .mo-work.insp-open .board { scroll-padding: 64px 60px 62% 230px; }
  & .ih { padding: 20px 16px 14px 24px; border-bottom: 0; border-radius: 32px 32px 0 0; background: var(--sp-c1); }
  & .ih-t h2 { font-size: 20px; font-weight: 500; }
  & .ib { padding: 6px 24px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px 24px; align-items: start; }
  & .is { padding: 14px 16px; border-radius: 22px; background: var(--panel); }
  & .is h3 { font: 600 11px/1 var(--sp-f); color: var(--mute); }
  & .ins { animation: spIn .45s var(--sp-emph); }

  /* пустой месяц */
  & .mo-blank h2 { font-size: 32px; font-weight: 500; }
  & .mb-art i { border-radius: 50%; border: 0; background: var(--sp-c2); animation: spPop .6s var(--sp-bounce) backwards; }
  & .mb-art i:nth-child(4n + 1) { background: var(--sp-blue-c); } & .mb-art i:nth-child(7n + 3) { background: var(--sp-flag); }
}
@keyframes spMk { from { opacity: 0; transform: scale(0) rotate(-20deg); } }
@keyframes spFlash { 0%, 40% { transform: scale(1.3); box-shadow: 0 0 0 3px var(--panel), 0 0 0 7px var(--sp-yellow); } }

/* ==========================================================================
   «Сфера»: «Параметры» — полоса-пропуск и плитки разделов вместо меню слева
   ========================================================================== */
:root[data-design="sphere"] {
  & .ps-page { max-width: 1180px; }
  & .ps-page > .pg-head { display: none; }
  /* полоса-пропуск: тёмно-синяя, красная полоса у древка, справа раздвоенный хвост */
  & .ps-hero { position: relative; display: flex; align-items: center; gap: 18px; margin-bottom: 26px; padding: 22px 64px 22px 34px; border-radius: 28px 0 0 28px; background: var(--sp-hoist), var(--sp-navy); --hw: 9px; color: #fff;
    clip-path: polygon(0 0, 100% 0, calc(100% - 34px) 50%, 100% 100%, 0 100%); animation: spUnfurl .8s var(--sp-emph) backwards; }
  & .ps-hero-av .avatar { width: 56px; height: 56px; border-radius: 16px; background: rgba(255, 255, 255, .12); color: #fff; }
  & .ps-hero-av .avatar svg { width: 28px; height: 28px; }
  & .ps-hero-t { flex: 1; min-width: 0; }
  & .ps-hero h2 { font-size: 28px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; color: #fff; animation: spIn .6s var(--sp-emph) .15s backwards; }
  & .ps-hero p { margin-top: 4px; font-size: 14px; color: rgba(255, 255, 255, .7); animation: spIn .6s var(--sp-emph) .22s backwards; }
  & .ps-hero code { padding: 6px 11px; border-radius: 10px; background: rgba(255, 255, 255, .1); font: 500 13px/1 var(--sp-code); color: rgba(255, 255, 255, .86); }
  & .ps-grid { display: block; }
  & .ps-menu { position: relative; top: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 30px; }
  & .ps-ink { display: none; }
  & .ps-grp { grid-column: 1 / -1; padding: 10px 6px 0; font: 500 14px/1 var(--sp-f); letter-spacing: 0; text-transform: none; color: var(--ink2); }
  & .ps-grp:first-of-type { padding-top: 0; }
  & .ps-i { flex-direction: column; align-items: flex-start; gap: 18px; min-height: 120px; padding: 18px; border-radius: 28px; background: var(--panel); box-shadow: var(--sh-1);
    transition: transform .5s var(--sp-spring), border-radius .45s var(--sp-spring), background-color .3s, box-shadow .3s; animation: spPop .55s var(--sp-bounce) backwards; }
  & .ps-i:hover { background: var(--panel); transform: translateY(-3px); box-shadow: var(--sh-2); border-radius: 36px; }
  & .ps-i:active { transform: scale(.96); border-radius: 18px; }
  & .ps-i.on, & .ps-i.on:hover { background: var(--sp-acc-c); box-shadow: none; border-radius: 36px; }
  & .ps-i.on .ps-i-t b, & .ps-i.on .ps-i-t small { color: var(--sp-acc-on); }
  & .ps-i-ic { width: 44px; height: 44px; border-radius: 14px; transition: border-radius .5s var(--sp-spring), transform .5s var(--sp-bounce), background-color .3s, color .3s; }
  & .ps-i:hover .ps-i-ic { transform: scale(1.06); border-radius: 18px; }
  & .ps-i-ic { background: var(--sp-c2); color: var(--ink2); }
  & .ps-i:hover .ps-i-ic { background: var(--sp-acc-c); color: var(--sp-acc-on); }
  & .ps-i.on .ps-i-ic { background: var(--panel); color: var(--sp-acc-on); }
  & .ps-i-t b { font-size: 16px; font-weight: 500; }
  & .ps-i-t small { white-space: normal; font-size: 12.5px; line-height: 1.4; }
  & .ps-body { padding: 30px 32px 36px; border-radius: 36px; background: var(--panel); box-shadow: var(--sh-1); }
  & .ps-h h2 { font-size: 30px; font-weight: 400; letter-spacing: -.02em; }
  & .ps-pv { border: 0; border-radius: 28px; background: var(--sp-c1); box-shadow: none; }
  & .ps-pv figcaption { border-bottom: 0; font: 500 12px/1 var(--sp-f); letter-spacing: .02em; text-transform: none; color: var(--mute); }
  & .ps-f-t b { font-size: 15px; font-weight: 500; }
  & .ps-rule { border-radius: 20px; }
  & .ps-pass { border-radius: 28px; }
}

/* ==========================================================================
   «Сфера»: руководство — обложка-полотнище с вымпелами на древке, главы-карточки, оглавление чипами
   ========================================================================== */
:root[data-design="sphere"] {
  & .gx { padding: 0 16px 120px; }
  /* обложка — полотнище поля знака: тёмно-синее, красная полоса у древка; справа древко с вымпелами по числу глав */
  & .gx-cover { min-height: clamp(340px, 40vw, 480px); margin: 0 auto; max-width: 1320px; border-radius: 40px; background: var(--sp-hoist), var(--sp-navy); --hw: 12px; color: #fff; align-items: center; animation: spIn .7s var(--sp-emph) backwards; }
  & .gx-mosaic, & .gx-scan { display: none; }
  & .gx-cover-in { padding: 48px 56px 48px 64px; max-width: 640px; gap: 20px; }
  & .gx-cover h1 { font: 500 clamp(52px, 7.6vw, 108px)/.92 var(--sp-f); letter-spacing: -.05em; color: #fff; }
  & .gx-cover-l { font: 400 clamp(17px, 1.7vw, 21px)/1.5 var(--sp-f); color: rgba(255, 255, 255, .78); }
  & .gx-cover-n { gap: 8px; color: #fff; }
  & .gx-cover-n > * { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 13.5px; font-weight: 500; }
  & .gx-cover-n > * + *::before { display: none; }
  & .gx-role { gap: 6px; border: 0; color: inherit; cursor: pointer; }
  & .gx-role:hover { color: inherit; background: rgba(255, 255, 255, .18); }

  & .gx-shapes { position: absolute; top: 0; bottom: 0; right: 6%; width: min(30%, 340px); z-index: -1; pointer-events: none; }
  & .gx-pole { position: absolute; left: 0; top: 12%; bottom: -8%; width: 5px; border-radius: 3px; background: rgba(255, 255, 255, .28); animation: spPoleIn .8s var(--sp-emph) .1s backwards; }
  & .gx-pole::before { content: ""; position: absolute; left: -4px; top: -10px; width: 13px; height: 13px; border-radius: 50%; background: rgba(255, 255, 255, .4); }
  & .gx-pn { position: absolute; left: 5px; top: calc(18% + var(--i) * 19%); width: var(--w); height: 14%; background: #f3efe6; transform-origin: left center;
    clip-path: polygon(0 0, 100% 0, 84% 50%, 100% 100%, 0 100%); box-shadow: inset 12px 0 0 var(--sp-red);
    animation: spFlap calc(5s + var(--i) * .7s) ease-in-out calc(var(--i) * -1.1s) infinite, spUnfurlX .9s var(--sp-emph) calc(.35s + var(--i) * .09s) backwards; }
  & .gx-pn:nth-of-type(odd) { background: #b9c6ea; }
  & .gx-body { display: block; max-width: 1320px; margin: 0 auto; padding: 18px 0 0; }
  /* оглавление: лента чипов, прилипает под панелью, под ней — полоса прочтения */
  & .gx-rail-nav { position: sticky; top: 128px; z-index: 10; display: flex; flex-direction: row; gap: 6px; padding: 10px 8px 14px; margin: 0 -8px 10px; overflow-x: auto; scrollbar-width: none; background: var(--bg); }
  & .gx-rail-nav::-webkit-scrollbar { display: none; }
  & .gx-prog { left: 8px; right: 8px; top: auto; bottom: 4px; width: auto; height: 4px; border-radius: 999px; background: var(--sp-c2); }
  & .gx-prog i { width: calc(var(--p, 0) * 100%); height: 100% !important; border-radius: 999px; background: var(--sp-red); transition: width .7s var(--sp-spring); }
  & .gx-rail-nav a { flex: none; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 6px; border-radius: 999px; background: var(--panel); box-shadow: var(--sh-1); font-size: 13.5px; font-weight: 500; white-space: nowrap; color: var(--ink2); transition: background-color .3s, color .3s, transform .4s var(--sp-spring); }
  & .gx-rail-nav a:hover { background: var(--hover); transform: translateY(-2px); }
  & .gx-rail-nav a b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sp-c2); font: 600 11px/1 var(--sp-f); color: var(--ink2); transition: all .4s var(--sp-spring); }
  & .gx-rail-nav a.done b { background: var(--sp-red-c); color: var(--sp-red-on); }
  & .gx-rail-nav a.on { background: var(--sp-red); color: var(--sp-red-f); font-weight: 600; }
  & .gx-rail-nav a.on b { background: var(--panel); color: var(--sp-red); border-radius: 10px; }

  /* главы — большие карточки, номер в «печенье», у каждой главы свой цвет по кругу */
  & .gx-ch { scroll-margin-top: 200px; margin-top: 18px; padding: 40px 44px 44px; border-radius: 44px; background: var(--panel); box-shadow: var(--sh-1); }
  & .gx-ch + .gx-ch { border-top: 0; }
  & .gx-ch { --gc: var(--sp-flag); --gc-c: var(--sp-red-c); --gc-on: var(--sp-red-on); --gc-f: var(--sp-flag-f); }
  & .gx-ch-h { gap: 26px; align-items: center; }
  /* номер главы — на вымпеле: разворачивается от древка, когда глава видна; при наведении колышется */
  & .gx-num { position: relative; isolation: isolate; display: grid; place-items: center; flex: none; width: 96px; height: 70px; padding: 0 18px 0 10px; font: 600 28px/1 var(--sp-f); letter-spacing: -.02em; color: var(--gc-f); -webkit-text-stroke: 0;
    transform-origin: left center; transform: scaleX(0); opacity: 0; transition: transform .9s var(--sp-emph), opacity .4s; }
  & .gx-num::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gc); clip-path: polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%); box-shadow: inset 9px 0 0 var(--sp-red); }
  & .gx-ch.in .gx-num { color: var(--gc-f); transform: none; opacity: 1; }
  & .gx-ch:hover .gx-num { animation: spWave 1.1s ease-in-out; }
  & .gx-ch-h h2 { font: 500 clamp(30px, 3.4vw, 44px)/1.05 var(--sp-f); letter-spacing: -.035em; }
  & .gx-ch-h p { font-size: 16px; color: var(--mute); }
  & .gx-ch .gx-ch-h, & .gx-ch .gx-ch-b { transform: translateY(30px) scale(.98); transition: opacity .8s var(--sp-emph), transform 1s var(--sp-emph); }
  & .gx-ch.in .gx-ch-h, & .gx-ch.in .gx-ch-b { transform: none; }
  & .gx-ch-b > * { border-radius: 28px; }
  & .gx-end { margin-top: 18px; padding: 32px 44px; border: 0; border-radius: 44px; background: var(--sp-red-c); color: var(--sp-red-on); font: 400 24px/1.3 var(--sp-f); }
  & .gx-end a { height: 44px; padding: 0 22px; border-radius: 999px; background: var(--sp-red); color: var(--sp-red-f); font: 500 14px/1 var(--sp-f); transition: border-radius .4s var(--sp-spring); }
  & .gx-end a:hover { border-radius: 14px; }
  & .gx-badge { border-radius: 32px; background: var(--sp-hoist), var(--sp-navy); color: #fff; }
  & .gx-badge::before { display: none; }
  & .gx-badge .avatar { background: var(--panel); color: var(--sp-blue); }
  & :is(.gx-hands, .gd-fig-in, .gx-scene, .gx-win) { border-radius: 28px; }
}
@keyframes spFlap { 0%, 100% { transform: skewY(0) scaleX(1); } 30% { transform: skewY(-3deg) scaleX(.96); } 60% { transform: skewY(2deg) scaleX(1.01); } }
@keyframes spUnfurlX { from { scale: 0 1; } }
@keyframes spPoleIn { from { transform: scaleY(0); transform-origin: bottom; } }
@keyframes spUnfurl { from { clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%); } }
/* ==========================================================================
   «Сфера»: «Обновления» — сетка карточек с крупными скруглениями, статья с цветными разделами
   ========================================================================== */
:root[data-design="sphere"] {

  & .rv { transform: translateY(40px) scale(.97); transition: opacity .8s var(--sp-emph), transform 1s var(--sp-emph); }
  & .rv.in { transform: none; }
}

/* ==========================================================================
   «Сфера»: вход — полотнище на древке с живым графиком, форма прямо на листе
   ========================================================================== */
@keyframes enFlap { 0%, 100% { transform: skewY(0) scaleX(1); } 35% { transform: skewY(-.9deg) scaleX(.985); } 70% { transform: skewY(.6deg) scaleX(1.004); } }
@keyframes enTail { 0%, 100% { transform: none; } 40% { transform: skewY(-1.4deg) scaleX(.985); } 75% { transform: skewY(.7deg); } }
:root[data-design="sphere"] {
  & body.is-login { background: var(--bg); }
  & body.leaving .en { opacity: 0; transform: scale(.985); transition: opacity .22s, transform .3s var(--ease); }
  & .en { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(400px, 1fr); min-height: 100vh; min-height: 100dvh; background: var(--bg); }

  /* древко и полотнище: тёмно-синее поле знака, красная полоса у древка, справа раздвоенный хвост */
  & .en-flag { position: relative; display: flex; padding: 40px 0 40px 46px; min-width: 0; }
  & .en-pole { position: absolute; left: 40px; top: 26px; bottom: 26px; width: 7px; border-radius: 4px; background: var(--sp-c3); animation: spPoleIn .9s var(--sp-emph) backwards; }
  & .en-pole::before { content: ""; position: absolute; left: 50%; top: -9px; width: 17px; height: 17px; margin-left: -8.5px; border-radius: 50%; background: var(--sp-c3); }
  & .en-cloth { --hw: 16px; position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
    max-height: 760px; padding: 38px 17% 34px calc(var(--hw) + 40px); color: #f3efe6;
    background: linear-gradient(90deg, #d9473b 0 var(--hw), var(--sp-flag) 0);
    clip-path: polygon(0 0, 100% 0, 87% 50%, 100% 100%, 0 100%); transform-origin: left center;
    animation: spUnfurl 1.1s var(--sp-emph) .1s backwards, enFlap 14s ease-in-out 1.4s infinite; }
  & .en-brand { display: flex; align-items: center; gap: 12px; }
  & .en-brand b { font: 700 24px/1 var(--sp-f); letter-spacing: -.02em; color: #fff; }

  /* сетка нарядов на полотнище: клетки — тихие скругления, наряды — капсулы цветов Вымпела */
  & .en-grid .la-grid { max-width: 660px; padding: 0; gap: 6px; border: 0; border-radius: 0; background: none; overflow: visible; cursor: pointer; }
  & .en-grid .la-grid::after { display: none; }
  & .en-grid .la-cell { border-radius: 10px; background: rgba(255, 255, 255, .055); aspect-ratio: 1.2; transition: background .3s; }
  & .en-grid .la-cell.we { background: rgba(255, 255, 255, .1); }
  & .en-grid .la-grid:hover .la-cell { background: rgba(255, 255, 255, .075); }
  & .en-grid .la-cell i { width: 86%; height: 62%; border-radius: 999px; font: 600 10px/1 var(--sp-f); letter-spacing: -.01em; }
  & .en-grid .la-cell i.k1 { background: #fff; color: #15273f; }
  & .en-grid .la-cell i.k2 { background: #3a5bc2; color: #e8eeff; }
  & .en-grid .la-cell i.k3 { background: #138276; color: #e3faf6; }
  & .en-grid .la-cell i.k4 { background: #e07a2c; color: #fff; }
  & .en-grid .la-cell i.k5 { background: #d8961c; color: #2a1b00; }

  /* внизу полотнища: дата и мудрость дня — тихо */
  & .en-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
  & .en-date { flex: none; font: 600 11px/1.4 var(--sp-f); letter-spacing: .1em; text-transform: uppercase; color: rgba(243, 239, 230, .5); }
  & .en-foot .la-copy { display: grid; justify-items: start; gap: 6px; max-width: 46ch; }
  & .en-foot .la-kick { display: none; }
  & .en-foot .la-q p { font: 500 15px/1.45 var(--sp-f); color: rgba(243, 239, 230, .86); margin: 0; }
  & .en-foot .la-q cite { display: block; margin-top: 4px; font: 500 12px/1.3 var(--sp-f); font-style: normal; color: rgba(243, 239, 230, .45); }
  & .en-foot .la-q.in { animation: spIn .6s var(--sp-spring); }

  /* правая сторона: ссылки сверху, форма посередине, автограф внизу */
  & .en-side { display: flex; flex-direction: column; padding: 26px clamp(24px, 4vw, 64px) 22px; min-width: 0; }
  & .en-links { display: flex; justify-content: flex-end; gap: 4px; }
  & .en-links .lf-about, & .en-links .lf-look { position: static; display: inline-flex; align-items: center; gap: 6px; height: 34px; margin: 0; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--mute); font: 500 13px/1 var(--sp-f); text-decoration: none; transition: background .2s, color .2s; }
  & .en-links .lf-about:hover, & .en-links .lf-look:hover { background: var(--sp-c2); color: var(--ink); }
  & .en .login-form { width: 100%; max-width: 380px; margin: auto 0; gap: 16px; animation: spIn .8s var(--sp-spring) .25s backwards; }
  & .en .login-form.shake { animation: shake .4s var(--ease); }
  & .en .lf-head { margin-bottom: 10px; }
  & .en .lf-head h1 { font: 700 46px/1 var(--sp-f); letter-spacing: -.035em; }
  & .en .lf-head p { margin-top: 12px; font-size: 15px; color: var(--mute); }
  & .en .fld-l { font: 600 12.5px/1 var(--sp-f); color: var(--ink2); }
  & .en .login-form input { height: 56px; padding: 0 18px; border: 0; border-radius: 18px; background: var(--sp-c2); font: 500 16px/1 var(--sp-f); box-shadow: inset 0 0 0 2px transparent; transition: background .2s, box-shadow .2s, border-radius .4s var(--sp-spring); }
  & .en .login-form input:hover { background: var(--sp-c3); }
  & .en .login-form input:focus { outline: 0; background: var(--panel); border-radius: 14px; box-shadow: inset 0 0 0 2px var(--sp-blue), 0 0 0 5px color-mix(in srgb, var(--sp-blue) 14%, transparent); }
  & .en .pw input { padding-right: 52px; }
  & .en .pw .eye { top: 9px; right: 9px; width: 38px; height: 38px; border-radius: 12px; }
  & .en .login-err { margin: -4px 0 -2px; }
  /* «Войти» — вымпел: полоса у древка, раздвоенный хвост, при наведении хвост колышется */
  & .en .login-form .btn.primary { --hw: 8px; position: relative; justify-content: space-between; height: 60px; margin-top: 4px; padding: 0 46px 0 30px; border: 0; border-radius: 18px 0 0 18px;
    background: linear-gradient(90deg, #d9473b 0 var(--hw), var(--sp-flag) 0); color: #fff; font: 600 17px/1 var(--sp-f);
    clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%); transform-origin: left center; transition: transform .5s var(--sp-spring), filter .2s; }
  & .en .login-form .btn.primary:hover { filter: brightness(1.12); animation: enTail 1.6s ease-in-out; }
  & .en .login-form .btn.primary:active { transform: scaleX(.97); }
  & .en .login-form .btn.primary .ico { transition: transform .4s var(--sp-spring); }
  & .en .login-form .btn.primary:hover .ico { transform: translateX(4px); }
  & .en .lf-note { text-align: left; font-size: 13px; }
  & .en .lf-notice { border-radius: 18px; }
  & .en .lf-sign { position: static; justify-content: flex-start; }
}
:root[data-design="sphere"][data-theme="dark"] .en-pole, :root[data-design="sphere"][data-theme="dark"] .en-pole::before { background: var(--sp-c3); }
@media (max-width: 860px) {
  :root[data-design="sphere"] {
    & .en { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    & .en-flag { padding: 18px 14px 0 23px; }
    & .en-pole { left: 18px; top: 10px; bottom: auto; height: calc(100% + 14px); width: 5px; }
    & .en-side { position: relative; z-index: 1; }
    & .en-pole::before { width: 13px; height: 13px; margin-left: -6.5px; top: -6px; }
    & .en-cloth { --hw: 10px; gap: 16px; padding: 20px 17% 20px calc(var(--hw) + 18px); }
    & .en-brand b { font-size: 20px; }
    & .en-grid .la-grid { display: grid; gap: 3px; }
    & .en-grid .la-cell { border-radius: 5px; }
    & .en-grid .la-cell i { font-size: 6.5px; }
    & .en-foot .la-copy { display: none; }
    & .en-side { padding: 18px 20px 20px; gap: 22px; }
    & .en-links { order: 2; justify-content: flex-start; flex-wrap: wrap; margin-left: -12px; }
    & .en .login-form { margin: 0; max-width: none; }
    & .en .lf-head h1 { font-size: 38px; }
    & .en .lf-sign { order: 3; }
  }
}

/* ==========================================================================
   «Сфера»: окно turlak — светлый лист с полосой у древка вырастает пружиной из надписи
   ========================================================================== */
:root[data-design="sphere"] .st-root.sp {
  & .st-shade { background: rgba(21, 39, 63, .28); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); }
  & .st-frame::before { border-radius: 44px; box-shadow: var(--sh-3); }
  & .st-card { --st-ink: #15273f; --st-sig: #d9473b; --hw: 12px; border-radius: 44px; clip-path: none;
    background: linear-gradient(90deg, #d9473b 0 var(--hw), var(--panel) 0);
    opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(.06); transform-origin: center;
    transition: transform .9s var(--sp-spring), opacity .25s, border-radius .9s var(--sp-emph); }
  &.open .st-card { opacity: 1; transform: none; }
  &:not(.open) .st-card { border-radius: 300px; }
  & .st-stage { background: none; cursor: grab; }
  & .st-stage:active { cursor: grabbing; }
  & .st-x { top: 18px; right: 18px; width: 40px; height: 40px; color: var(--ink2); background: var(--sp-c2); opacity: .7; transition: opacity .2s, transform .5s var(--sp-spring), border-radius .4s var(--sp-spring); }
  & .st-x:hover, & .st-x:focus-visible { opacity: 1; transform: rotate(90deg); border-radius: 14px; }
}
:root[data-design="sphere"][data-theme="dark"] .st-root.sp .st-card { --st-ink: #e6e9f2; --st-sig: #ff8a7a; }
@media (prefers-color-scheme: dark) { :root[data-design="sphere"][data-theme="system"] .st-root.sp .st-card { --st-ink: #e6e9f2; --st-sig: #ff8a7a; } }

/* ==========================================================================
   «Сфера»: остальные экраны — люди, отсутствия, журнал, объявления, вход
   ========================================================================== */
:root[data-design="sphere"] {
  & .kpis { gap: 10px; background: none; border: 0; }
  & .kpis > * { border-radius: 28px; background: var(--panel); box-shadow: var(--sh-1); }
  & .lg-i { border-radius: 20px; }
  & .ab-card h2, & .ab-roll h2 { font-weight: 500; }
  & .ae-in { background: var(--sp-c1); }
  & .pline { border-radius: 999px; }

  & .mc-card { border-radius: 40px; }
}

/* ==========================================================================
   «Сфера»: штаб — светлая полоса со знаком штаба, карточки-полотна, роты на вымпелах
   ========================================================================== */
:root[data-design="sphere"] body.is-hq {
  /* штаб — кобальт, как и в других стилях: у штаба и роты разные цвета */
  --sp-blue: #2441b4; --sp-blue-c: #e1e6fa; --sp-blue-on: #0c1a55; --sp-blue-f: #fff;
  /* штаб всегда светлый — и при тёмной теме роты: свои подложки, красный, тени */
  --sp-red: #d9473b; --sp-red-c: #fde3de; --sp-red-on: #4a0f09; --sp-red-f: #fff;
  --sp-yellow: #d8961c; --sp-yellow-c: #f8eac9; --sp-yellow-on: #3a2600; --sp-yellow-f: #2a1b00;
  --sp-green: #138276; --sp-green-c: #cdeee8; --sp-green-on: #04302b; --sp-green-f: #fff;
  --sp-c1: #eff2f9; --sp-c2: #e7ebf4; --sp-c3: #dbe0ec; --sp-flag: #15273f;
  --bad: #b3261e; --bad-bg: #fce8e6; --warn: #b06000; --warn-bg: #fef7e0; --ok: #137333; --ok-bg: #e6f4ea;
  --sh-1: 0 1px 2px rgba(21, 39, 63, .12), 0 1px 3px 1px rgba(21, 39, 63, .06);
  --sh-2: 0 1px 3px rgba(21, 39, 63, .14), 0 4px 10px 3px rgba(21, 39, 63, .08);
  --sh-3: 0 6px 12px rgba(21, 39, 63, .12), 0 16px 40px 8px rgba(21, 39, 63, .13);
  color-scheme: light;
  --cob: #2441b4; --cob-d: #1a3192; --cob-p: color-mix(in srgb, var(--sp-blue-c) 50%, transparent); --hoist: var(--sp-red);
  --bg: #f7f8fc; --side: #eff2f9; --panel: #fff; --sunk: #eff2f9; --hover: #e7ebf4;
  --ink: #1f1f1f; --ink2: #444746; --mute: #5f6368; --faint: #9aa0a6; --line: #e1e3e1; --line2: #eceff3; --strong: #c4c7c5;
  --brand: var(--sp-blue); --brand-h: var(--sp-blue); --on-brand: #fff; --accent: var(--sp-blue); --accent-bg: #dfe6f899; --ring: rgba(11, 87, 208, .4);
  --sp-acc: var(--sp-blue); --sp-acc-c: var(--sp-blue-c); --sp-acc-on: var(--sp-blue-on); --sp-acc-f: #fff;
  font-family: var(--sp-f); transition: none;

  & .btn { border-radius: 999px; font-weight: 500; }
  /* полоса: светлая, знак штаба кобальтом с красными полосами у древка; разделы — капсула посередине */
  & .hq-bar { color: var(--ink); }
  & .hq-bar::before { clip-path: none; background: color-mix(in srgb, var(--bg) 88%, transparent); box-shadow: none; animation: none;
    backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); transition: background-color .3s, box-shadow .3s; }
  & .hq-bar.low { filter: none; }
  & .hq-bar.low::before { background: color-mix(in srgb, var(--panel) 92%, transparent); box-shadow: 0 1px 0 var(--line2), 0 8px 24px rgba(21, 39, 63, .08); }
  & .hq-bar-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; height: 80px; padding: 0 28px; }
  & .hq-nav { justify-self: center; }
  & .hq-bar.low .hq-bar-in { height: 64px; }
  & .hq-brand { justify-self: start; }
  & .hq-mark { width: 44px; height: 44px; padding: 6px 5px 4px 7px; border-radius: 14px; background: var(--cob-p); color: var(--cob); transition: border-radius .5s var(--sp-spring), transform .6s var(--sp-bounce); }
  & .hq-bar .hm-h { fill: var(--hoist); }
  & .hq-brand:hover .hq-mark { border-radius: 22px; transform: rotate(-6deg); }
  & .hq-bt { height: 44px; gap: 6px; }
  & .hq-bt b { font: 500 12px/1 var(--sp-f); letter-spacing: .01em; text-transform: none; color: var(--mute); opacity: 1; }
  & .hq-bt span { font: 600 22px/1 var(--sp-f); letter-spacing: -.025em; color: var(--ink); }
  & .hq-bt span::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 3px; border-radius: 50%; background: var(--hoist); }
  & .hq-nav, & .hq-bar .hq-nav, & .hq-bar.low .hq-nav { align-self: center; height: 48px; margin: 0; gap: 2px; padding: 4px; border: 0; border-radius: 999px; background: var(--sp-c2); }
  & .hq-nav a { height: 40px; padding: 0 20px; border-radius: 999px; color: var(--ink2); font: 500 14.5px/1 var(--sp-f); transition: color .3s; }
  & .hq-nav a:hover { color: var(--ink); }
  & .hq-nav a.on { color: var(--sp-blue-on); }
  & .hq-ink { top: 4px; bottom: 4px; height: auto; border-radius: 999px; background: var(--panel); box-shadow: var(--sh-1); z-index: 0; transition: transform .55s var(--sp-spring), width .45s var(--sp-spring), opacity .2s; }
  & .hq-meta { justify-self: end; margin: 0; gap: 8px; color: var(--mute); }
  & .hq-st, & .hq-when, & .hq-me { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--sp-c2); color: var(--ink2); font: 500 13px/1 var(--sp-f); }
  & .hq-st[data-t="ok"] { background: var(--sp-green-c); color: var(--sp-green-on); }
  & .hq-st[data-t="ok"] i { background: var(--sp-green); }
  & .hq-st[data-t="bad"] { background: var(--sp-red-c); color: var(--sp-red-on); }
  & .hq-me { color: var(--ink); transition: background-color .2s, border-radius .4s var(--sp-spring); }
  & .hq-me:hover { background: var(--sp-c3); }
  & .hq-me:active { border-radius: 12px; }

  & .hq-page { padding: 24px 32px 120px; max-width: 1280px; }
  & .hq-head h1 { font: 500 48px/1 var(--sp-f); letter-spacing: -.04em; }
  & .hq-part { margin-top: 28px; padding: 26px 30px; border-radius: 36px; background: var(--panel); box-shadow: var(--sh-1); }
  & .hq-part-h { padding-top: 0; margin-bottom: 10px; border-top: 0; }
  & .hq-part-h h2 { font: 500 24px/1.1 var(--sp-f); }
  & .hq-more { height: 36px; padding: 0 14px; border-radius: 999px; background: var(--sp-blue-c); color: var(--sp-blue-on); font-weight: 500; }
  & .hq-cols { gap: 0 20px; }
  & .hq-hello { font: 500 16px/1 var(--sp-f); letter-spacing: 0; text-transform: none; color: var(--mute); }
  & .hq-sum { font: 400 40px/1.15 var(--sp-f); letter-spacing: -.03em; max-width: 26ch; }
  & .hq-n { font-weight: 600; color: var(--sp-blue); }

  /* полотна обзора — цветные карточки с огромными скруглениями */
  & .hq-bn { gap: 16px; }
  & .hq-bn-c { border-radius: 40px; overflow: hidden; transition: transform .6s var(--sp-spring), border-radius .5s var(--sp-spring); animation: spPop .8s var(--sp-bounce) backwards; }
  & .hq-bn-c:hover { transform: translateY(-4px); border-radius: 52px; }
  & .hq-bn-c.line { background: var(--sp-blue); color: #fff; }
  & .hq-bn-c.line .hq-n { color: #fff; font-weight: 500; }
  & .hq-bn-c.year { background: var(--sp-navy); color: #fff; animation-delay: .1s; }
  & .hq-bn-c.copy { background: var(--sp-blue-c); color: var(--sp-blue-on); animation-delay: .2s; }
  & .hq-bn-c.maint { background: var(--sp-red-c); color: var(--sp-red-on); animation-delay: .2s; }
  & .hq-bn-c :is(.hq-bn-k, .hq-bn-s, .hq-bn-mid) { color: inherit; }
  & .hq-bn-k { font: 500 14px/1 var(--sp-f); letter-spacing: 0; text-transform: none; opacity: .85; }
  & .hq-bn-mid { font: 500 44px/1 var(--sp-f); letter-spacing: -.04em; }
  & .hq-weeks i { border-radius: 999px; }
  & .hq-weeks i.on { background: #fff; }
  & .hq-weeks i.now { background: var(--sp-red); }
  & .hq-bn-c.copy .btn { background: var(--sp-blue); color: #fff; border-color: transparent; }

  & .hq-row { border-radius: 999px; padding: 12px 18px; }
  & .hq-row::after { display: none; }
  & .hq-row + .hq-row { margin-top: 4px; }
  & a.hq-row:hover, & .hq-row.add:hover { background: var(--sp-blue-c); }
  /* номер роты — на вымпеле: полоса у древка, раздвоенный хвост; при наведении вымпел колышется */
  & .hq-row-n { display: grid; place-items: center; width: 72px; height: 56px; padding-right: 12px; padding-left: 6px; border-radius: 0; background: var(--sp-blue-c); color: var(--sp-blue-on); font: 600 24px/1 var(--sp-f);
    clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%); box-shadow: inset 6px 0 0 var(--hoist); transform-origin: left center; transition: background-color .3s, color .3s; }
  & a.hq-row:hover .hq-row-n { background: var(--sp-blue); color: #fff; animation: spWave 1.2s ease-in-out; }
  & .hq-row[data-s="archived"] .hq-row-n { background: var(--sp-c2); color: var(--mute); }
  & .hq-row.add .hq-row-n { background: var(--sp-c2); color: var(--sp-blue); font-weight: 400; }
  & .hq-row.hd { background: none; }
  & .hq-row-f b { font: 600 22px/1 var(--sp-f); }
  & .cv i { border-radius: 999px; transform: none; width: 16px; height: 6px; }
  & .cv i.on { background: var(--sp-blue); }
  & .hq-notes li { padding: 14px 16px; border: 0; border-radius: 22px; background: var(--sp-c1); margin-bottom: 6px; }
  & .hq-notes li::before { border-radius: 50%; transform: none; }
  & .hq-logrows li { border-bottom: 0; border-radius: 18px; padding: 12px 14px; }
  & .hq-logrows li:nth-child(odd) { background: var(--sp-c1); }
  & .hq-filter { gap: 4px; padding: 4px; border-radius: 999px; background: var(--sp-c2); }
  & .hq-filter button { height: 38px; padding: 0 18px; border-radius: 999px; transition: background-color .3s, color .3s; }
  & .hq-filter button::after { display: none; }
  & .hq-filter button.on { background: var(--panel); box-shadow: var(--sh-1); }
  & .hq-find { width: 300px; height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--sp-c2); }
  & .hq-day h3 { border-bottom: 0; font: 500 24px/1 var(--sp-f); }
  & :is(.hq-utabs, .hq-tabs) { gap: 4px; padding: 4px; border-radius: 999px; background: var(--sp-c2); width: max-content; max-width: 100%; }
  & :is(.hq-utabs, .hq-tabs) { gap: 2px; border-bottom: 0; }
  & :is(.hq-utabs, .hq-tabs) button { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; font: 500 14px/1 var(--sp-f); transition: background-color .25s, color .25s, box-shadow .25s; }
  & :is(.hq-utabs, .hq-tabs) button:hover:not(.on) { background: var(--sp-c3); }
  & :is(.hq-utabs, .hq-tabs) button::after { display: none; }
  & :is(.hq-utabs, .hq-tabs) button.on { background: var(--panel); box-shadow: var(--sh-1); }
}

@media (max-width: 1180px) { :root[data-design="sphere"] body.is-hq .hq-when { display: none; } }
@media (max-width: 1100px) { :root[data-design="sphere"] body.is-hq .hq-st { width: 36px; padding: 0; justify-content: center; font-size: 0; gap: 0; } }

/* ==========================================================================
   «Сфера»: телефон
   ========================================================================== */
@media (max-width: 760px) {
  :root[data-design="sphere"] {
    & .sp-top { grid-template-columns: auto minmax(0, 1fr) auto; height: 60px; gap: 8px; padding: 0 8px 0 12px; }
    & .sp-bt, & .sp-search kbd, & .sp-theme, & .sp-hq span { display: none; }
    & .sp-search { height: 44px; font-size: 14px; padding-left: 16px; }
    & .sp-tabs { display: none; }
    & .sp-head { position: sticky; }
    & .sp-fab { right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); height: 56px; border-radius: 18px; }
    & .app.sp-app { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
    & .tabbar { height: auto; padding: 10px 6px calc(12px + env(safe-area-inset-bottom)); border-top: 0; background: var(--sp-c1); }
    & .tabbar a, & .tabbar button { gap: 4px; font-size: 12px; font-weight: 500; color: var(--ink2); }
    & .tabbar .ico { width: 64px; height: 32px; padding: 4px 20px; border-radius: 999px; box-sizing: border-box; transition: background-color .3s, transform .45s var(--sp-bounce); }
    & .tabbar .on { color: var(--ink); }
    & .tabbar .on .ico { background: var(--sp-acc-c); color: var(--sp-acc-on); animation: spHop .6s var(--sp-bounce); }
    & .mo { height: calc(100dvh - 60px - 80px - env(safe-area-inset-bottom)); }
    & .mo-bar { margin: 0 8px 8px; border-radius: 26px; }
    & .mx col.c-nm { width: 124px; }
    & .mx col { width: 36px; }
    & .mx col.c-sum { width: 40px; }
    & .mx th.nm button { padding: 0 8px 0 12px; font-size: 13.5px; }
    & .mx th.corner span { padding: 0 12px 12px; }
    & .mo-work { margin: 0 8px 8px; border-radius: 26px; }
    & .insp { left: 0; bottom: 0; width: 100%; transform: translate(0, 105%); border-radius: 32px 32px 0 0; max-height: 84dvh; }
    & .mo-work.insp-open .insp { transform: none; }
    & .ib { grid-template-columns: 1fr; }
    & .sh { left: 0; width: 100% !important; transform: translateY(100%); }
    & .sh-root.open .sh { transform: none; }
    & .sh-head { padding: 28px 14px 10px 22px; }
    & .sh-body { padding: 6px 22px 36px; }
    & .page { padding: 16px 14px 120px; }
    & .pg-head h1 { font-size: 30px; }
    /* «Параметры» на телефоне: пропуск ниже, разделы — лента капсул, а не восемь плиток на два экрана */
    & .ps-hero { gap: 12px; margin-bottom: 16px; padding: 14px 44px 14px 18px; border-radius: 22px 0 0 22px; }
    & .ps-hero-av .avatar { width: 42px; height: 42px; border-radius: 12px; }
    & .ps-hero-av .avatar svg { width: 22px; height: 22px; }
    & .ps-hero h2 { font-size: 19px; }
    & .ps-hero p { font-size: 12.5px; }
    & .ps-hero code { display: none; }
    & .ps-menu { display: flex; gap: 8px; margin: 0 -14px 18px; padding: 2px 14px 6px; overflow-x: auto; scrollbar-width: none; }
    & .ps-menu::-webkit-scrollbar { display: none; }
    & .ps-grp { display: none; }
    & .ps-i, & .ps-i:hover, & .ps-i.on, & .ps-i.on:hover { flex: none; flex-direction: row; align-items: center; gap: 8px; min-height: 0; padding: 5px 16px 5px 5px; border-radius: 999px; transform: none; }
    & .ps-i:not(.on) { box-shadow: var(--sh-1); }
    & .ps-i-ic { width: 34px; height: 34px; border-radius: 999px; }
    & .ps-i-t b { font-size: 14px; white-space: nowrap; }
    & .ps-i-t small { display: none; }
    & .ps-i.warn .ps-i-ic::after { top: 2px; right: 2px; }
    & .ps-body { padding: 20px 14px; border-radius: 28px; }
    & .gx-cover { border-radius: 32px; }
    & .gx-cover-in { padding: 32px 24px; }
    & .gx-rail-nav { top: 60px; }
    & .gx-ch { padding: 26px 18px; border-radius: 32px; }
    & .gx-num { width: 64px; height: 64px; font-size: 22px; }
    & .toasts { bottom: calc(96px + env(safe-area-inset-bottom)); }
    & .pal-root { padding-top: 8px; }
    & body.is-hq .hq-bar-in, & body.is-hq .hq-bar.low .hq-bar-in { display: flex; flex-wrap: wrap; height: auto; gap: 10px 12px; padding: 12px 14px; }
    & body.is-hq .hq-meta { margin-left: auto; }
    & body.is-hq .hq-when { display: none; }
    & body.is-hq .hq-st { width: 36px; padding: 0; justify-content: center; }
    & body.is-hq .hq-bar .hq-nav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
    & body.is-hq .hq-nav a { flex: 1; justify-content: center; padding: 0 12px; }
    & body.is-hq .hq-part { padding: 20px 16px; border-radius: 28px; }
    & body.is-hq .hq-sum { font-size: 28px; }
  }
}
@media (max-width: 900px) { :root[data-design="sphere"] .gx-shapes { display: none; } }
@media (max-width: 1080px) and (min-width: 761px) {
  :root[data-design="sphere"] .sp-top { grid-template-columns: auto minmax(0, 1fr) auto; }
  :root[data-design="sphere"] .sp-bt small { display: none; }
}

/* ==========================================================================
   «Параметры» в духе Material (22.10, ночь): тональные карточки вместо карточек в карточке,
   крупные ползунки с ручкой-чертой и зазором, фильтр-чипы с галочкой, переключатели, поля с линией снизу,
   пропуска — список по разделам. Цвет — цвет раздела (латунь), без радуги.
   ========================================================================== */
:root[data-design="sphere"] .ps-page {
  /* разделы роты: каждая карточка — своя тональная поверхность, без белого поля вокруг */
  & .cz .pm-ctrl { gap: 12px; padding: 0; background: none; box-shadow: none; }
  & .cz .pm-card, & .cz .pm-card:first-child { gap: 16px; padding: 22px 24px 24px; border: 0; border-radius: 28px; background: var(--sp-c1); box-shadow: none; }
  & .cz .pm-card > header h3 { font-size: 17px; font-weight: 500; letter-spacing: 0; }
  & .cz .pm-card > header p { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--mute); }
  & .pz-lead { width: fit-content; padding: 8px 14px; border-radius: 999px; background: var(--sp-acc-c); color: var(--sp-acc-on); font-size: 13px; }
  & .pm-big { align-items: baseline; gap: 10px; }
  & .pm-big b { font: 400 40px/1 var(--sp-f); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
  & .pm-big span { font-size: 14px; color: var(--mute); }
  & .pm-sub > span:first-child { font-size: 13.5px; color: var(--ink2); }
  & .pm-note { font-size: 13.5px; }

  /* ползунок: толстая дорожка, ручка — черта, вокруг ручки зазор цвета карточки */
  & input.rng, & input.rng:hover, & input.rng:focus { height: 44px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; cursor: pointer; }
  & input.rng::-webkit-slider-runnable-track { height: 16px; border-radius: 8px; background: linear-gradient(90deg, var(--sp-acc) var(--p, 0%), var(--sp-c3) var(--p, 0%)); }
  & input.rng::-moz-range-track { height: 16px; border-radius: 8px; background: var(--sp-c3); }
  & input.rng::-moz-range-progress { height: 16px; border-radius: 8px; background: var(--sp-acc); }
  & input.rng::-webkit-slider-thumb { width: 4px; height: 44px; margin-top: -14px; border: 0; border-radius: 2px; background: var(--sp-acc); box-shadow: 0 0 0 6px var(--sp-c1); cursor: grab; transition: width .2s var(--sp-spring); }
  & input.rng::-moz-range-thumb { width: 4px; height: 44px; border: 0; border-radius: 2px; background: var(--sp-acc); box-shadow: 0 0 0 6px var(--sp-c1); cursor: grab; }
  & input.rng:active::-webkit-slider-thumb { width: 2px; transform: none; cursor: grabbing; }
  & input.rng:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px var(--sp-c1), 0 0 0 9px var(--ring); }
  & .rng-w { padding: 0 0 22px; }
  & .rng-m { left: 2px; right: 2px; }
  & .rng-m span { font: 500 11.5px/1 var(--sp-f); color: var(--mute); font-variant-numeric: tabular-nums; }
  & .dual { height: 66px; padding: 0; }
  & .dual-track, & .dual-fill { top: 14px; height: 16px; border-radius: 8px; }
  & .dual-track { left: 0; right: 0; background: var(--sp-c3); }
  & .dual-fill { margin-left: 0; max-width: 100%; background: var(--sp-acc); border-radius: 0; }
  & .dual input.rng.dual { top: 0; }
  /* webkit и moz — отдельными правилами: в одном списке чужой псевдоэлемент роняет всё правило */
  & .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; }

  /* шаговик: капсула с круглыми кнопками */
  & .stp { gap: 2px; padding: 4px; border: 0; border-radius: 999px; background: var(--sp-c2); }
  & .stp > button { width: 40px; height: 40px; border-radius: 999px; background: none; font: 400 22px/1 var(--sp-f); color: var(--ink2); transition: background-color .2s, border-radius .35s var(--sp-spring), transform .35s var(--sp-spring); }
  & .stp > button:hover { background: var(--sp-c3); color: var(--ink); }
  & .stp > button:active { border-radius: 12px; transform: scale(.92); }
  & .stp-c { min-width: 58px; }
  & .stp-v { font: 500 20px/1 var(--sp-f); font-variant-numeric: tabular-nums; }
  & .stp-c small { font-size: 11px; }
  & .cr-row .stp > button { width: 34px; height: 34px; }

  /* чипы: скругление 10, выбранный — тон раздела */
  & .chip { height: 34px; padding: 0 14px; border-radius: 10px; font-variant-numeric: tabular-nums; }
  & .chip.on { border-radius: 10px; }
  & .flag { height: 32px; padding: 0 12px; border: 1px solid var(--strong); border-radius: 10px; background: none; font-size: 13px; color: var(--ink2); transition: background-color .25s, color .25s, padding .3s var(--sp-spring); }
  & .flag:hover { background: var(--sp-c2); color: var(--ink); }
  & .flag.on { padding-left: 8px; border-color: transparent; background: var(--sp-acc-c); color: var(--sp-acc-on); }
  & .flag.on .ico { animation: spPop .3s var(--sp-bounce); }

  /* переключатель: дорожка с обводкой, ручка растёт при включении */
  & .switch { width: 52px; height: 32px; border-radius: 999px; background: var(--sp-c2); box-shadow: inset 0 0 0 2px var(--mute); transition: background-color .25s, box-shadow .25s; }
  & .switch i { top: 8px; left: 8px; width: 16px; height: 16px; background: var(--mute); box-shadow: none; transform: none; transition: all .35s var(--sp-spring); }
  & .switch.on { background: var(--sp-acc); box-shadow: none; }
  & .switch.on i { top: 4px; left: 24px; width: 24px; height: 24px; background: var(--panel); transform: none; }
  & .switch:active i { width: 28px; height: 28px; top: 2px; left: 2px; }
  & .switch.on:active i { left: 22px; }
  & .cr-act .switch { width: 44px; height: 26px; }
  & .cr-act .switch i { top: 6px; left: 6px; width: 14px; height: 14px; }
  & .cr-act .switch.on i { top: 3px; left: 21px; width: 20px; height: 20px; }
  & .cr-act { font-size: 13px; }

  /* поля: заливка и линия снизу, при фокусе линия цветом раздела */
  & :is(.cz, .ps-sec) :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select) { min-height: 52px; border: 0; border-radius: 14px 14px 4px 4px; background: var(--sp-c2); box-shadow: inset 0 -1px 0 var(--mute); }
  & :is(.cz, .ps-sec) :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select):hover { background: var(--sp-c3); }
  & :is(.cz, .ps-sec) :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select):focus { border-radius: 14px 14px 4px 4px; background: var(--sp-c2); box-shadow: inset 0 -2px 0 var(--sp-acc); }
  & .sh-time input { min-height: 46px; }

  /* лента отдыха и шкала закрытия */
  & .rs-cells { gap: 3px; }
  & .rs-cells span { height: 40px; border-radius: 6px; background: var(--sp-c2); font: 500 12.5px/1 var(--sp-f); }
  & .rs-cells span:first-child { border-radius: 14px 6px 6px 14px; }
  & .rs-cells span:last-child { border-radius: 6px 14px 14px 6px; }
  & .rs-cells .duty { background: var(--sp-flag, #15273f); color: #fff; font-weight: 600; box-shadow: inset 4px 0 0 var(--sp-red); }
  & .rs-cells .rest { background: var(--sp-acc-c); color: var(--sp-acc-on); }
  & .rs-cells .next { background: none; box-shadow: inset 0 0 0 2px var(--sp-acc); color: var(--accent); font-weight: 600; }
  & .rs-cap { font-size: 13px; }
  & .ltl-bar { height: 16px; border-radius: 8px; background: var(--sp-c2); }
  & .ltl-bar i { border-radius: 8px; }
  & .ltl-duty { background: var(--sp-flag, #15273f); opacity: 1; }
  & .ltl-open { background: var(--sp-acc); opacity: .55; }
  & .ltl-lock { top: -6px !important; height: 28px !important; width: 4px; background: var(--sp-red); }
  & .ltl-leg li { font-size: 13.5px; }
  & .ltl-leg li > i { width: 14px; height: 14px; border-radius: 5px; }
  & .ltl-leg .duty > i { background: var(--sp-flag, #15273f); opacity: 1; }
  & .ltl-leg .open > i { background: var(--sp-acc); opacity: .55; }
  & .ltl-leg .lk .ico { color: var(--sp-red); }
  & .ltl-leg b { font-weight: 500; }

  /* состав */
  & .day-cells span { height: 44px; min-width: 54px; border-radius: 12px; font: 600 13px/1 var(--sp-f); }
  & .day-sum b { font: 500 18px/1 var(--sp-f); }
  & .cr-row { border-top-color: var(--sp-c3); }
  & .cr-mk .mk { min-width: 44px; height: 32px; border-radius: 10px; }
  & .cr-name b { font-weight: 500; font-size: 15px; }
  & .cr-week { border: 0; border-radius: 20px; background: var(--panel); }
  & .ch-add { border-radius: 999px; }

  /* прогноз: обведённая карточка, плитки чисел — тональные */
  & .fc { gap: 18px; padding: 22px; border: 1px solid var(--sp-c3); border-radius: 28px; background: var(--panel); box-shadow: none; }
  & .fc-h h3 { font: 500 20px/1.2 var(--sp-f); }
  & .fc-grid { gap: 8px; border: 0; border-radius: 0; background: none; }
  & .fc-k { padding: 14px 16px; border-radius: 18px; background: var(--sp-c1); }
  & .fc-k > b { font: 400 30px/1.1 var(--sp-f); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  & .fc-k > span { font-size: 12.5px; color: var(--ink2); }
  & .fc-k small { font-size: 12px; color: var(--mute); }
  & .fc-d { top: 12px; right: 12px; padding: 4px 8px; border-radius: 8px; font: 600 11.5px/1 var(--sp-f); }
  & .fc-sec h4 { font: 500 13px/1 var(--sp-f); letter-spacing: 0; text-transform: none; color: var(--ink2); }
  & .fc-col.norm .fc-bars { background: color-mix(in srgb, var(--sp-acc-c) 55%, transparent); border-radius: 10px; }
  & .fc-bars i { width: 60%; border-radius: 8px 8px 3px 3px; }
  & .fc-bars i.val { background: var(--sp-acc); }
  & .fc-col b, & .fc-col span { font-family: var(--sp-f); }
  & .fc-sw { border-radius: 4px; background: color-mix(in srgb, var(--sp-acc-c) 55%, transparent); }
  & .fc-gbar { height: 8px; border-radius: 4px; background: var(--sp-c2); }
  & .fc-gbar i { border-radius: 4px; background: var(--sp-acc); opacity: 1; }
  & .fc-groups b, & .fc-groups small { font-family: var(--sp-f); }

  /* группы: номер тушью, цвет группы — только в полоске */
  & .ch-group { padding: 18px 18px 22px; border-radius: 28px; background: var(--sp-c1); box-shadow: none; overflow: hidden; }
  & .ch-group:hover { background: var(--sp-c2); }
  & .cg-num { font: 400 44px/1 var(--sp-f); color: var(--ink); }
  & .ch-group.add { background: none; border: 1.5px dashed var(--strong); }
  & .pilot { border-radius: 28px; background: var(--sp-c1); box-shadow: none; }
  & .pilot .chip .gn { display: none; }

  /* пропуска: список по разделам */
  & .pl { gap: 14px; }
  & .pl-g { padding: 6px; border: 0; border-radius: 28px; background: var(--sp-c1); }
  & .pl-g > h4 { padding: 12px 16px 8px; font-size: 13px; font-weight: 500; color: var(--ink2); }
  & .pl-row { min-height: 68px; padding: 8px 6px 8px 14px; border-radius: 22px; transition: background-color .2s, border-radius .35s var(--sp-spring); }
  & .pl-row + .pl-row { border-top: 0; }
  & .pl-row:hover { background: var(--panel); }
  & .pl-row:active { border-radius: 14px; }
  & .pl-av .avatar { width: 42px; height: 42px; border-radius: 999px; background: var(--sp-flag, #15273f); color: #fff; }
  & .pl-av.on::after { box-shadow: 0 0 0 2px var(--sp-c1); background: var(--sp-green); }
  & .pl-t b { font-weight: 500; font-size: 15px; }
  & .pl-t code { font-family: var(--sp-code); }
  & .pl-seen.on { color: var(--sp-green); font-weight: 500; }

  /* предпросмотр графика: «сегодня» флажком поля знака, как в самом графике */
  & .mb-d.today b { border-radius: 6px; background: var(--sp-flag); box-shadow: inset 3px 0 0 var(--sp-red); }
  & .mb-c.today { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--sp-flag) 30%, transparent); }
  & .mb-c .mk { border-radius: 0; }

  /* данные */
  & .vault { padding: 20px 22px; border: 0; border-radius: 28px; background: var(--sp-c1); box-shadow: none; }
  & .vault-ic { border-radius: 16px; background: var(--panel); }
  & .vault select { min-height: 40px; }
  @media (max-width: 760px) {
    & .cz .pm-card, & .cz .pm-card:first-child { padding: 18px 16px 20px; border-radius: 24px; }
    & .pm-sub > span:first-child { min-width: 0; width: 100%; }
    & .pl-g { border-radius: 24px; }
    & .fc { padding: 16px; }
  }
}

/* спокойное движение — без пружин и появления */
:root[data-design="sphere"].calm *, :root[data-design="sphere"].calm *::before, :root[data-design="sphere"].calm *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
@media (prefers-reduced-motion: reduce) {
  :root[data-design="sphere"] *, :root[data-design="sphere"] *::before, :root[data-design="sphere"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Сигналы штаба на входе (23.10): объявление — флажок над формой; обслуживание — своя страница
   вместо входа, полотнище перехвачено лентой ограждения; «Вход для штаба» — тихая ссылка.
   Тот же вид — живым предпросмотром в «Настройках» штаба (класс .pv — уменьшенный, без движения).
   ========================================================================== */
@keyframes sgIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes sgFlag { from { clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%); } }
@keyframes sgTape { to { background-position: 56px 0; } }
@keyframes sgSag { 0%, 100% { transform: rotate(-11deg); } 50% { transform: rotate(-10deg) translateY(3px); } }
:root[data-design="sphere"] {

/* тема на входе: точка в углу, без подписи */
  & .en-theme { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--faint); cursor: pointer; transition: background .2s, color .2s, transform .5s var(--sp-spring); }
  & .en-theme:hover { background: var(--sp-c2); color: var(--ink); }
  & .en-theme:active { transform: rotate(-30deg) scale(.9); }

/* флажок со значком: полоса у древка, раздвоенный хвост; цвет — тон объявления */
  & .sg-flag { --c: var(--sp-blue); flex: none; width: 46px; height: 34px; display: inline-grid; place-items: center; padding-right: 8px;
    background: linear-gradient(90deg, var(--sp-red) 0 5px, var(--c) 0); color: #fff;
    clip-path: polygon(0 0, 100% 0, 76% 50%, 100% 100%, 0 100%); animation: sgFlag .7s var(--sp-emph) .2s backwards; }
  & .sg-tn[data-tone="red"] { --c: #c63a2f; } .sg-tn[data-tone="yellow"] { --c: #b97c0e; } .sg-tn[data-tone="green"] { --c: #138276; } .sg-tn[data-tone="ink"] { --c: #15273f; } .sg-tn[data-tone="blue"] { --c: #2f4fa8; }
  & .sg-tn[data-tone="red"] .sg-flag { background: linear-gradient(90deg, #15273f 0 5px, var(--c) 0); }

  & .en-note { width: 100%; max-width: 420px; margin: auto 0 0; }
  & .en-note.on + .login-form { margin-top: 26px; }
  & .sg-note { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px 16px 0; border-radius: 0 22px 22px 0;
    background: color-mix(in srgb, var(--c) 9%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 14%, transparent); animation: sgIn .6s var(--sp-spring) .1s backwards; }
  & .sg-note .sg-flag { background: linear-gradient(90deg, var(--sp-red) 0 5px, var(--c) 0); margin-top: 1px; }
  & .sg-note-t { display: grid; gap: 4px; min-width: 0; }
  & .sg-note-t b { font: 700 15.5px/1.25 var(--sp-f); letter-spacing: -.01em; color: var(--ink); }
  & .sg-note-t p { margin: 0; font: 500 14px/1.45 var(--sp-f); color: var(--ink2); overflow-wrap: anywhere; }
  & .sg-note-t small { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font: 600 11.5px/1 var(--sp-f); color: color-mix(in srgb, var(--c) 80%, var(--ink)); }
  &[data-theme="dark"] .sg-note { background: color-mix(in srgb, var(--c) 22%, var(--panel)); }
  &[data-theme="dark"] .sg-note-t small { color: color-mix(in srgb, var(--c) 40%, #fff); }

/* ---------- обслуживание ---------- */
  & body.is-maint { background: var(--bg); }
  & .sg-m { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, 1fr); min-height: 100vh; min-height: 100dvh; background: var(--bg); font-family: var(--sp-f); }
  & .sg-m-cloth { position: relative; display: flex; padding: 40px 0 40px 46px; min-width: 0; }
  & .sg-pole { position: absolute; left: 40px; top: 26px; bottom: 26px; width: 7px; border-radius: 4px; background: var(--sp-c3); }
  & .sg-pole::before { content: ""; position: absolute; left: 50%; top: -9px; width: 17px; height: 17px; margin-left: -8.5px; border-radius: 50%; background: var(--sp-c3); }
  & .sg-cloth { --hw: 16px; position: relative; flex: 1; min-width: 0; max-height: 760px; overflow: hidden; display: flex; align-items: flex-start; padding: 38px 17% 34px calc(var(--hw) + 40px);
    background: linear-gradient(90deg, #d9473b 0 var(--hw), var(--sp-flag) 0); color: #fff;
    clip-path: polygon(0 0, 100% 0, 87% 50%, 100% 100%, 0 100%); transform-origin: left center; animation: spUnfurl 1.1s var(--sp-emph) .1s backwards, enFlap 18s ease-in-out 1.4s infinite; }
  & .sg-cloth-in { display: flex; align-items: center; gap: 12px; }
  & .sg-cloth-in b { font: 700 24px/1 var(--sp-f); letter-spacing: -.02em; }
/* лента ограждения: две полосы наискось через полотнище, медленно бегут */
  & .sg-tape { position: absolute; inset: 0; pointer-events: none; }
  & .sg-tape i { position: absolute; left: -10%; right: -10%; top: 46%; height: 54px; transform: rotate(-11deg); transform-origin: center;
    background: repeating-linear-gradient(90deg, #f3efe6 0 28px, #d9473b 0 56px); box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    animation: sgTape 2.4s linear infinite, sgSag 9s ease-in-out infinite; }
  & .sg-tape i + i { top: 64%; height: 38px; transform: rotate(7deg); opacity: .9; animation: sgTape 3.2s linear infinite reverse; }

  & .sg-m-side { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 40px clamp(24px, 5vw, 72px); min-width: 0; max-width: 560px; animation: spIn .8s var(--sp-spring) .25s backwards; }
  & .sg-m-kind { display: inline-flex; align-items: center; gap: 12px; font: 600 12px/1 var(--sp-f); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
  & .sg-m-side h1 { margin: 0; font: 700 clamp(34px, 4vw, 52px)/1.02 var(--sp-f); letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
  & .sg-m-text { margin: 0; font: 500 17px/1.5 var(--sp-f); color: var(--ink2); max-width: 44ch; overflow-wrap: anywhere; }
  & .sg-eta { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 6px 40px; padding: 20px 22px; border-radius: 24px; background: var(--sp-c1); }
  & .sg-eta small { display: block; font: 600 11px/1 var(--sp-f); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
  & .sg-eta b { font: 700 22px/1.1 var(--sp-f); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
  & .sg-prog { grid-column: 1 / -1; height: 8px; margin-top: 12px; border-radius: 99px; background: var(--sp-c3); overflow: hidden; }
  & .sg-prog i { display: block; height: 100%; width: 4%; border-radius: 99px; background: linear-gradient(90deg, #d9473b 0 6px, var(--sp-blue) 0); transition: width 1.2s var(--sp-emph); }
  & .sg-m-soon { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 14px/1.4 var(--sp-f); color: var(--mute); }
  & .sg-m-note { margin: 6px 0 0; font: 500 13px/1.5 var(--sp-f); color: var(--faint); max-width: 46ch; }
  & .sg-staff { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; padding: 0; border: 0; background: none; font: 500 13px/1 var(--sp-f); color: var(--faint); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
  & .sg-staff:hover { color: var(--ink); text-decoration-color: currentColor; }

/* вход для штаба поверх страницы обслуживания */
  & .sg-staff-root { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(16, 22, 34, .38); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; }
  & .sg-staff-root.in { opacity: 1; }
  & .sg-staff-card { position: relative; width: min(420px, 100%); padding: 30px 30px 24px; border-radius: 32px; background: var(--panel); box-shadow: var(--sh-3); transform: translateY(14px) scale(.97); transition: transform .5s var(--sp-spring); }
  & .sg-staff-root.in .sg-staff-card { transform: none; }
  & .sg-staff-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--sp-c2); color: var(--ink2); cursor: pointer; }
  & .sg-staff-k { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; font: 600 11.5px/1 var(--sp-f); letter-spacing: .06em; text-transform: uppercase; color: var(--sp-red); }
  & .sg-staff-card .login-form { max-width: none; margin: 0; animation: none; display: grid; gap: 14px; }
  & .sg-staff-card .lf-head h1 { font: 700 30px/1 var(--sp-f); }
  & .sg-staff-card .lf-head p, & .sg-staff-card .lf-note { display: none; }

/* предпросмотр в штабе: та же страница в рамке, мельче и без движения */
  & .sg-m.pv { min-height: 0; height: 100%; grid-template-columns: 1fr 1.1fr; }
  & .sg-m.pv .sg-m-cloth { padding: 16px 0 16px 20px; }
  & .sg-m.pv .sg-pole { left: 17px; top: 10px; bottom: 10px; width: 4px; }
  & .sg-m.pv .sg-pole::before { width: 10px; height: 10px; margin-left: -5px; top: -5px; }
  & .sg-m.pv .sg-cloth { --hw: 8px; padding: 16px 16% 16px 22px; animation: none; }
  & .sg-m.pv .sg-cloth-in b { font-size: 13px; }
  & .sg-m.pv .sg-tape i { height: 22px; background: repeating-linear-gradient(90deg, #f3efe6 0 12px, #d9473b 0 24px); }
  & .sg-m.pv .sg-tape i + i { height: 15px; }
  & .sg-m.pv .sg-m-side { gap: 8px; padding: 16px 18px; animation: none; }
  & .sg-m.pv .sg-m-kind { font-size: 9px; gap: 7px; }
  & .sg-m.pv .sg-flag { width: 30px; height: 22px; padding-right: 5px; }
  & .sg-m.pv .sg-flag .ico { width: 12px; height: 12px; }
  & .sg-m.pv h1 { font-size: 21px; }
  & .sg-m.pv .sg-m-text { font-size: 11.5px; }
  & .sg-m.pv .sg-eta { padding: 10px 12px; gap: 2px 18px; border-radius: 14px; }
  & .sg-m.pv .sg-eta small { font-size: 8px; margin-bottom: 4px; }
  & .sg-m.pv .sg-eta b { font-size: 12.5px; }
  & .sg-m.pv .sg-prog { height: 5px; margin-top: 6px; }
  & .sg-m.pv :is(.sg-m-note, & .sg-m-soon) { font-size: 10px; }
  & .sg-m.pv .sg-staff { font-size: 10px; margin-top: 4px; pointer-events: none; }

  @media (max-width: 860px) {
    & .sg-m { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    & .sg-m-cloth { height: 210px; padding: 20px 16px 10px 34px; }
    & .sg-pole { left: 28px; top: 14px; bottom: 6px; }
    & .sg-cloth { padding: 22px 20% 20px calc(var(--hw) + 22px); }
    & .sg-m-side { justify-content: flex-start; padding: 26px 16px 32px; }
    & .sg-m.pv { grid-template-columns: 1fr 1.1fr; grid-template-rows: none; }
    & .sg-m.pv .sg-m-cloth { height: auto; }
  }
  @media (prefers-reduced-motion: reduce) { .sg-tape i, .sg-cloth { animation: none !important; } }
  &.calm .sg-tape i { animation: none; }
}

/* ==========================================================================
   «Что такое Вымпел» — фундамент (23.10): вымпел поднимается и замирает на полпути — «скоро».
   Большая страница для рот будет здесь позже.
   ========================================================================== */
@keyframes abRise { from { transform: translateY(260px); } }
@keyframes abFlap { 0%, 100% { transform: skewY(0) scaleX(1); } 40% { transform: skewY(-3deg) scaleX(.95); } 70% { transform: skewY(2deg) scaleX(1.02); } }
:root[data-design="sphere"] {
  & body.is-about { background: var(--bg); }
  & .ab2 { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; font-family: var(--sp-f); }
  & .ab2-top { display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(16px, 4vw, 48px); }
  & .ab2-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
  & .ab2-logo b { font: 700 20px/1 var(--sp-f); letter-spacing: -.02em; }
  & .ab2-in { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--sp-flag); color: #fff; font: 600 14px/1 var(--sp-f); text-decoration: none; transition: border-radius .4s var(--sp-spring), filter .2s; }
  & .ab2-in:hover { filter: brightness(1.15); border-radius: 14px; }
  & .ab2-main { display: grid; grid-template-columns: auto minmax(0, 620px); align-items: center; justify-content: center; gap: clamp(32px, 7vw, 110px); padding: 24px clamp(16px, 4vw, 48px) 48px; }
  & .ab2-mast { position: relative; width: 150px; height: 420px; }
  & .ab2-pole { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; border-radius: 4px; background: var(--sp-c3); }
  & .ab2-pole::before { content: ""; position: absolute; left: 50%; top: -10px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--sp-c3); }
  & .ab2-rope { position: absolute; left: 12px; top: 6px; bottom: 30px; width: 1.5px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
  & .ab2-flag { --hw: 12px; position: absolute; left: 8px; top: 150px; width: 138px; height: 90px; background: linear-gradient(90deg, var(--sp-red) 0 var(--hw), var(--sp-flag) 0);
    clip-path: polygon(0 0, 100% 0, 76% 50%, 100% 100%, 0 100%); transform-origin: left center;
    animation: abRise 2.6s var(--sp-emph) .3s backwards, abFlap 6s ease-in-out 2.9s infinite; }
  & .ab2-t { display: grid; gap: 18px; animation: spIn .9s var(--sp-spring) .2s backwards; }
  & .ab2-k { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1 var(--sp-f); letter-spacing: .1em; text-transform: uppercase; color: var(--sp-red); }
  & .ab2-k::before { content: ""; width: 26px; height: 2px; background: currentColor; }
  & .ab2-t h1 { margin: 0; font: 700 clamp(40px, 6vw, 76px)/.98 var(--sp-f); letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
  & .ab2-t p { margin: 0; font: 500 18px/1.55 var(--sp-f); color: var(--ink2); max-width: 46ch; }
  & .ab2-t .ab2-s { font-size: 14px; color: var(--mute); }
  & .ab2-foot { display: flex; justify-content: center; padding: 20px; }
  @media (max-width: 760px) {
    & .ab2-main { grid-template-columns: 1fr; justify-items: start; gap: 8px; padding-top: 0; }
    & .ab2-mast { height: 200px; width: 120px; margin-left: 6px; }
    & .ab2-flag { top: 40px; width: 110px; height: 70px; }
  }
}

/* ==========================================================================
   «Повестка» (23.10, вместо стены баннеров): день роты на одном листе.
   Заступают — полотнище вымпела; строй — каждый курсант чертой; на заметку; объявления роты; вести.
   ========================================================================== */
@keyframes agRise { from { transform: scaleY(0); } }
@keyframes agIn { from { opacity: 0; transform: translateY(12px); } }
@keyframes agShim { to { background-position: -200% 0; } }
@keyframes agFlap { 0%, 100% { transform: skewY(0) scaleX(1); } 40% { transform: skewY(-4deg) scaleX(.94); } 70% { transform: skewY(2deg) scaleX(1.02); } }
:root[data-design="sphere"] {
  & :is(.ag-flag, .ag-post, .ag-t, .ag-c-pick i)[data-tone="blue"] { --c: #2f4fa8; }
  & :is(.ag-flag, .ag-post, .ag-t, .ag-c-pick i)[data-tone="red"] { --c: #c63a2f; }
  & :is(.ag-flag, .ag-post, .ag-t, .ag-c-pick i)[data-tone="yellow"] { --c: #b97c0e; }
  & :is(.ag-flag, .ag-post, .ag-t, .ag-c-pick i)[data-tone="green"] { --c: #138276; }
  & :is(.ag-flag, .ag-post, .ag-t, .ag-c-pick i)[data-tone="ink"] { --c: #15273f; }
  &[data-theme="dark"] :is(.ag-flag, .ag-post, .ag-t, .ag-c-pick i)[data-tone="ink"] { --c: #44557a; }

  & .ag { max-width: 1240px; }
  & .ag-body { display: grid; gap: 34px; }
  & .ag-k { margin: 0 0 8px; font: 600 11.5px/1 var(--sp-f); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
  & .ag-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 14px; font: 700 22px/1.1 var(--sp-f); letter-spacing: -.02em; color: var(--ink); }
  & .ag-h sup { font: 700 12px/1 var(--sp-f); color: var(--sp-red); }
  & .ag-part { animation: agIn .6s var(--sp-emph) .12s backwards; }
  & .ag-quiet { display: flex; align-items: center; gap: 8px; margin: 0; padding: 18px 22px; border-radius: 24px; background: var(--sp-c1); font: 500 14.5px/1.4 var(--sp-f); color: var(--mute); }
  & .ag-quiet .ico { color: var(--sp-green); }
  & .ag-quiet-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-radius: 24px; background: var(--sp-c1); }
  & .ag-quiet-box p { margin: 0; font: 500 14.5px/1.4 var(--sp-f); color: var(--mute); }

/* флажок со значком: полоса у древка, раздвоенный хвост */
  & .ag-flag { --c: #2f4fa8; flex: none; width: 44px; height: 32px; display: inline-grid; place-items: center; padding-right: 8px; color: #fff;
    background: linear-gradient(90deg, #d9473b 0 5px, var(--c) 0); clip-path: polygon(0 0, 100% 0, 76% 50%, 100% 100%, 0 100%); transform-origin: left center; }
  & .ag-flag[data-tone="red"] { background: linear-gradient(90deg, #15273f 0 5px, var(--c) 0); }

/* ---------- верх: заступают + строй ---------- */
  & .ag-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
  & .ag-watch { --hw: 12px; position: relative; display: flex; flex-direction: column; gap: 22px; min-height: 320px; padding: 30px 72px 30px calc(var(--hw) + 30px); color: #f3efe6;
    background: linear-gradient(90deg, #d9473b 0 var(--hw), var(--sp-flag) 0); border-radius: 0;
    clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 50%, 100% 100%, 0 100%); animation: spUnfurl 1s var(--sp-emph) backwards; }
  & .ag-watch .ag-k { color: rgba(243, 239, 230, .55); }
  & .ag-w-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
  & .ag-w-head h2 { margin: 0; font: 700 clamp(28px, 3vw, 40px)/1 var(--sp-f); letter-spacing: -.035em; color: #fff; }
  & .ag-w-when { margin: 10px 0 0; font: 500 14px/1.4 var(--sp-f); color: rgba(243, 239, 230, .72); }
  & .ag-w-tabs { flex: none; display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
  & .ag-w-tabs button { height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: none; color: rgba(243, 239, 230, .7); font: 600 13px/1 var(--sp-f); cursor: pointer; transition: background .3s var(--sp-spring), color .2s; }
  & .ag-w-tabs button.on { background: #fff; color: #15273f; }
  & .ag-w-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; align-content: start; }
  & .ag-w-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px 0 4px; border-radius: 14px; color: inherit; text-decoration: none; transition: background .2s; animation: agIn .5s var(--sp-emph) backwards; animation-delay: calc(var(--i) * 30ms + .25s); }
  & .ag-w-row:hover { background: rgba(255, 255, 255, .07); }
  & .ag-w-row .mk { height: 26px; border-radius: 999px; font: 600 11px/26px var(--sp-f); text-align: center; }
  & .ag-w-row .mk.k1 { background: #fff; color: #15273f; } .ag-w-row .mk.k2 { background: #3a5bc2; color: #e8eeff; } .ag-w-row .mk.k3 { background: #138276; color: #e3faf6; }
  & .ag-w-row .mk.k4 { background: #e07a2c; color: #fff; } .ag-w-row .mk.k5 { background: #d8961c; color: #2a1b00; }
  & .ag-w-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14.5px/1.2 var(--sp-f); color: #fff; }
  & .ag-w-row b.empty { color: rgba(243, 239, 230, .45); font-weight: 500; font-style: italic; }
  & .ag-w-row small { font: 500 11.5px/1 var(--sp-f); color: rgba(243, 239, 230, .5); font-variant-numeric: tabular-nums; }
  & .ag-w-row .gnum { opacity: .85; }
  & .ag-w-empty { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin: 18px 0 0; font: 500 16px/1.4 var(--sp-f); color: rgba(243, 239, 230, .78); }
  & .ag-w-empty a { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 999px; background: #fff; color: #15273f; font: 600 13px/1 var(--sp-f); text-decoration: none; }

  & .ag-form { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 36px; background: var(--panel); box-shadow: var(--sh-1); color: inherit; text-decoration: none; transition: transform .45s var(--sp-spring), box-shadow .3s; animation: agIn .6s var(--sp-emph) .08s backwards; }
  & .ag-form:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
  & .ag-f-n { display: flex; align-items: flex-end; gap: 12px; }
  & .ag-f-n b { font: 800 72px/.82 var(--sp-f); letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
  & .ag-f-n span { font: 600 14px/1.15 var(--sp-f); color: var(--mute); padding-bottom: 2px; }
  & .ag-f-groups { display: grid; gap: 7px; margin-top: 6px; }
  & .ag-f-g { display: grid; grid-template-columns: 44px minmax(0, 1fr) 26px; align-items: center; gap: 10px; }
  & .ag-f-gn { font: 600 12px/1 var(--sp-f); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  & .ag-f-gc { font: 700 12px/1 var(--sp-f); color: var(--sp-red); text-align: right; font-variant-numeric: tabular-nums; }
  & .ag-f-line { display: flex; align-items: flex-end; gap: 2px; height: 22px; }
  & .ag-f-line i { flex: 1 1 0; min-width: 1px; max-width: 6px; height: 22px; border-radius: 2px; background: var(--sp-flag); transform-origin: bottom; animation: agRise .7s var(--sp-emph) backwards; animation-delay: calc(var(--i) * 6ms + .2s); }
  & .ag-f-line i[data-r] { height: 9px; background: var(--rc, var(--sp-red)); }
  & .ag-f-line i[data-r="sick"], & .ag-f-leg [data-r="sick"] { --rc: var(--r-sick); } .ag-f-line i[data-r="leave"], .ag-f-leg [data-r="leave"] { --rc: var(--r-leave); }
  & .ag-f-line i[data-r="vacation"], & .ag-f-leg [data-r="vacation"] { --rc: var(--r-vacation); } .ag-f-line i[data-r="duty"], .ag-f-leg [data-r="duty"] { --rc: var(--r-duty); }
  & .ag-f-line i[data-r="practice"], & .ag-f-leg [data-r="practice"] { --rc: var(--r-practice); } .ag-f-line i[data-r="other"], .ag-f-leg [data-r="other"] { --rc: var(--r-other); }
  &[data-theme="dark"] .ag-f-line i:not([data-r]) { background: #8ea6e8; }
  & .ag-f-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: auto 0 0; padding: 0; list-style: none; }
  & .ag-f-leg li { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 var(--sp-f); color: var(--ink2); }
  & .ag-f-leg li i { width: 10px; height: 10px; border-radius: 3px; background: var(--rc); }
  & .ag-f-leg li b { font-weight: 700; color: var(--ink); }
  & .ag-f-all { display: flex; align-items: center; gap: 6px; margin: auto 0 0; font: 600 13.5px/1 var(--sp-f); color: var(--sp-green); }

/* ---------- на заметку ---------- */
  & .ag-todo { display: grid; gap: 8px; }
  & .ag-t { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 18px 14px 0; border-radius: 0 24px 24px 0;
    background: color-mix(in srgb, var(--c) 7%, var(--panel)); color: inherit; text-decoration: none; transition: transform .4s var(--sp-spring), background .2s; animation: agIn .5s var(--sp-emph) backwards; animation-delay: calc(var(--i) * 50ms + .15s); }
  & .ag-t:hover { transform: translateX(4px); background: color-mix(in srgb, var(--c) 12%, var(--panel)); }
  & .ag-t:hover .ag-flag { animation: agFlap 1.2s ease-in-out; }
  & .ag-t-t { display: grid; gap: 3px; min-width: 0; }
  & .ag-t-t b { font: 650 15.5px/1.25 var(--sp-f); color: var(--ink); }
  & .ag-t-t small { font: 500 13px/1.35 var(--sp-f); color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  & .ag-t-go { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 999px; background: var(--panel); font: 600 13px/1 var(--sp-f); color: color-mix(in srgb, var(--c) 85%, var(--ink)); }
  &[data-theme="dark"] .ag-t-go { color: #fff; background: color-mix(in srgb, var(--c) 30%, var(--panel)); }

/* ---------- объявления роты ---------- */
  & .ag-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
  & .ag-post { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 16px; padding: 22px 52px 20px 0; border-radius: 0 30px 30px 0;
    background: color-mix(in srgb, var(--c) 8%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 10%, transparent); animation: agIn .55s var(--sp-emph) backwards; animation-delay: calc(var(--i) * 60ms + .2s); }
  & .ag-post.pin { grid-column: 1 / -1; padding-top: 26px; padding-bottom: 24px; background: color-mix(in srgb, var(--c) 13%, var(--panel)); }
  & .ag-post.pin h3 { font-size: 26px; }
  & .ag-post .ag-flag { width: 52px; height: 38px; margin-top: 1px; }
  & .ag-p-t { display: grid; gap: 8px; min-width: 0; }
  & .ag-p-t h3 { margin: 0; font: 700 20px/1.15 var(--sp-f); letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
  & .ag-p-t p { margin: 0; font: 500 15px/1.5 var(--sp-f); color: var(--ink2); white-space: pre-line; overflow-wrap: anywhere; }
  & .ag-p-t small { font: 500 12px/1.3 var(--sp-f); color: var(--mute); }
  & .ag-p-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--mute); cursor: pointer; }
  & .ag-p-x:hover { background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--ink); }

/* ---------- вести Вымпела ---------- */
  & .ag-more { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  & .ag-rel { display: grid; grid-template-rows: 180px auto; overflow: hidden; border-radius: 32px; background: var(--panel); box-shadow: var(--sh-1); color: inherit; text-decoration: none; transition: transform .45s var(--sp-spring), box-shadow .3s; }
  & .ag-rel:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
  & .ag-rel-art { position: relative; overflow: hidden; background: var(--sp-flag); }
  & .ag-rel-art > * { position: absolute; inset: 0; }
  & .ag-rel-t { padding: 18px 22px 22px; }
  & .ag-rel-t h3 { margin: 0; font: 700 24px/1.05 var(--sp-f); letter-spacing: -.03em; color: var(--ink); }
  & .ag-rel-t p { margin: 6px 0 0; font: 500 14px/1.4 var(--sp-f); color: var(--mute); }
  & .ag-ev { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 24px; border-radius: 32px; background: var(--sp-yellow-c); color: var(--sp-yellow-on); }
  & .ag-ev .ag-k { color: inherit; opacity: .6; }
  & .ag-ev-n { display: flex; align-items: flex-end; gap: 8px; margin-top: auto; }
  & .ag-ev-n b { font: 800 64px/.85 var(--sp-f); letter-spacing: -.05em; }
  & .ag-ev-n span { font: 600 15px/1 var(--sp-f); padding-bottom: 4px; }
  & .ag-ev p { margin: 10px 0 0; font: 600 15px/1.3 var(--sp-f); }
  & .ag-ev p small { display: block; margin-top: 4px; font: 500 12.5px/1 var(--sp-f); opacity: .65; }
  & .ag-ev-flag { position: absolute; top: 22px; right: 22px; width: 58px; height: 42px; display: grid; place-items: center; padding-right: 10px; color: #fff;
    background: linear-gradient(90deg, #d9473b 0 6px, #b97c0e 0); clip-path: polygon(0 0, 100% 0, 76% 50%, 100% 100%, 0 100%); transform-origin: left center; animation: agFlap 5s ease-in-out infinite; }
  & .ag-phone { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; border: 0; border-radius: 32px; background: var(--sp-green-c); color: var(--sp-green-on); text-align: left; cursor: pointer; transition: transform .45s var(--sp-spring); }
  & .ag-phone:hover { transform: translateY(-4px); }
  & .ag-phone .ag-k { color: inherit; opacity: .6; }
  & .ag-phone h3 { margin: 0; max-width: 13ch; font: 700 19px/1.15 var(--sp-f); letter-spacing: -.02em; }
  & .ag-phone > span { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; font: 600 13px/1 var(--sp-f); }
  & .ag-ph { position: absolute; right: -14px; bottom: -26px; width: 76px; height: 120px; border-radius: 18px; background: #15273f; box-shadow: 0 0 0 4px rgba(255, 255, 255, .5); display: grid; place-items: center; transform: rotate(-12deg); transition: transform .5s var(--sp-spring); }
  & .ag-ph img { width: 34px; height: 34px; border-radius: 9px; }
  & .ag-phone:hover .ag-ph { transform: rotate(-4deg) translateY(-8px); }

/* ---------- написать объявление ---------- */
  & .ag-c { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  & .ag-c-f { display: grid; gap: 16px; min-width: 0; }
  & .ag-c-side { position: sticky; top: 0; padding: 18px; border-radius: 28px; background: var(--sp-c1); }
  & .ag-c-pv .ag-post { animation: none; }
  & .ag-c-pick { display: flex; flex-wrap: wrap; gap: 6px; }
  & .ag-c-pick button { display: grid; place-items: center; min-width: 52px; height: 44px; padding: 0 6px; border: 0; border-radius: 14px; background: var(--sp-c1); cursor: pointer; transition: background .2s, box-shadow .2s, border-radius .35s var(--sp-spring); }
  & .ag-c-pick button:hover { background: var(--sp-c2); }
  & .ag-c-pick button.on { background: var(--panel); box-shadow: inset 0 0 0 2px var(--ink); border-radius: 10px; }
  & .ag-c-pick .ag-flag { width: 36px; height: 26px; padding-right: 6px; animation: none; }
  & .ag-c-pick i { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--c); }
  & .ag-c-pin { display: inline-flex; align-items: center; gap: 10px; font: 500 14px/1 var(--sp-f); color: var(--ink2); cursor: pointer; }
  & .ag-c-pin input { width: 18px; height: 18px; accent-color: var(--sp-flag); }

/* ---------- пока грузится: места блоков, мягкий блик ---------- */
  & .ag-skel { display: grid; gap: 20px; }
  & .ag-skel i { display: block; border-radius: 32px; background: linear-gradient(90deg, var(--sp-c1) 0 40%, var(--sp-c2) 50%, var(--sp-c1) 60% 100%) 0 0 / 200% 100%; animation: agShim 1.4s linear infinite; }
  & .ag-skel .ag-top i { height: 320px; } .ag-skel i.line { height: 84px; }

  @media (max-width: 1080px) { .ag-more { grid-template-columns: 1fr 1fr; } .ag-rel { grid-column: 1 / -1; } }
  @media (max-width: 980px) { .ag-top { grid-template-columns: 1fr; } }
  @media (max-width: 760px) {
    & .ag-body { gap: 26px; }
    & .ag-watch { padding: 24px 44px 24px calc(var(--hw) + 18px); clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 50%, 100% 100%, 0 100%); min-height: 0; }
    & .ag-w-head { flex-direction: column; }
    & .ag-w-list { grid-template-columns: 1fr; }
    & .ag-w-row { grid-template-columns: 46px minmax(0, 1fr) auto; }
    & .ag-w-row small { display: none; }
    & .ag-posts { grid-template-columns: 1fr; }
    & .ag-more { grid-template-columns: 1fr; }
    & .ag-c { grid-template-columns: 1fr; }
    & .ag-c-side { position: static; }
    & .ag-t { grid-template-columns: auto minmax(0, 1fr); }
    & .ag-t-go { display: none; }
    & .ag-f-n b { font-size: 60px; }
  }
}

/* ==========================================================================
   «Обновления» с нуля (23.10): выпуск № 1 «Подъём вымпела».
   Обложка — ночное поле знака, по флагштоку поднимается вымпел, на полотнище клетки графика заполняются
   нарядами; справа огромный номер контуром. Статья — лид, оглавление, разделы с живыми демонстрациями.
   ========================================================================== */
@keyframes nxRise { from { transform: translateY(var(--rise, 110%)); } }
@keyframes nxWave { 0%, 100% { transform: skewY(0) scaleX(1); } 30% { transform: skewY(-2.4deg) scaleX(.965); } 65% { transform: skewY(1.4deg) scaleX(1.01); } }
@keyframes nxCell { from { opacity: 0; transform: scale(.2); } }
@keyframes nxWind { from { transform: translateX(-30%); opacity: 0; } 20%, 70% { opacity: 1; } to { transform: translateX(130%); opacity: 0; } }
@keyframes nxNum { from { opacity: 0; transform: translateY(40px); } }
@keyframes nxPop { 0% { opacity: 0; transform: scale(.3); } 60% { transform: scale(1.15); } }
@keyframes nxFlash { from { background: color-mix(in srgb, var(--sp-green) 22%, transparent); } }
@keyframes nxPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sp-red) 40%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }
:root[data-design="sphere"] {

/* ---------- обложка ---------- */
  & .nx-cov { position: relative; overflow: hidden; isolation: isolate; height: clamp(420px, 46vw, 560px); border-radius: 40px; background: #0f1d36; color: #f3efe6; font-family: var(--sp-f); }
  & .nx-sky i { position: absolute; left: 0; width: 46%; height: 2px; border-radius: 2px; background: rgba(243, 239, 230, .12); top: calc(14% + var(--i) * 15%); animation: nxWind 7s linear infinite; animation-delay: calc(var(--i) * -1.7s); }
  & .nx-num { position: absolute; right: 4%; bottom: -14%; z-index: -1; font: 800 clamp(320px, 42vw, 560px)/1 var(--sp-f); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px rgba(243, 239, 230, .14); animation: nxNum 1.4s var(--sp-emph) .2s backwards; user-select: none; }
  & .nx-mast { position: absolute; left: 7%; top: 0; bottom: 0; width: 52%; }
  & .nx-pole { position: absolute; left: 0; top: 7%; bottom: -2%; width: 7px; border-radius: 4px; background: linear-gradient(90deg, #c9cfdb, #8e97a8); }
  & .nx-pole::before { content: ""; position: absolute; left: 50%; top: -10px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #d8dde6; }
  & .nx-rope { position: absolute; left: 11px; top: 8%; bottom: 0; width: 1.5px; background: rgba(243, 239, 230, .28); }
  & .nx-pen { --rise: 120%; position: absolute; left: 7px; top: 11%; width: 82%; height: 46%; animation: nxRise 1.9s var(--sp-emph) .15s backwards; }
  & .nx-cloth { --hw: 16px; position: absolute; inset: 0; padding: 7% 26% 7% calc(var(--hw) + 6%); background: linear-gradient(90deg, #d9473b 0 var(--hw), #f3efe6 0);
    clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%); transform-origin: left center; animation: nxWave 7s ease-in-out 2.1s infinite; }
  & .nx-grid { height: 100%; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(4, 1fr); gap: 7%  5%; }
  & .nx-grid i { border-radius: 6px; background: rgba(21, 39, 63, .08); }
  & .nx-grid i.k1 { background: #2f4fa8; } .nx-grid i.k2 { background: #8fa6e6; } .nx-grid i.k3 { background: #138276; } .nx-grid i.k5 { background: #d8961c; }
  & .nx-grid i:is(.k1, .k2, .k3, .k5) { animation: nxCell .5s var(--sp-bounce) backwards; animation-delay: calc(1.6s + var(--i) * 45ms); }
  & .nx-cov-t { position: absolute; left: calc(7% + 34px); right: 6%; bottom: 8%; display: grid; gap: 14px; max-width: 760px; animation: spIn 1s var(--sp-spring) .9s backwards; }
  & .nx-kick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
  & .nx-kick span { padding: 7px 12px; border-radius: 999px; background: rgba(243, 239, 230, .1); font: 600 12px/1 var(--sp-f); letter-spacing: .04em; color: rgba(243, 239, 230, .85); }
  & .nx-kick span:first-child { background: #d9473b; color: #fff; }
  & .nx-cov-t h1 { margin: 0; font: 800 clamp(44px, 6.4vw, 92px)/.92 var(--sp-f); letter-spacing: -.05em; color: #fff; }
  & .nx-sub { margin: 0; max-width: 52ch; font: 500 clamp(15px, 1.4vw, 19px)/1.45 var(--sp-f); color: rgba(243, 239, 230, .75); }
  & .nx-cov.mini { height: 100%; border-radius: 0; }
  & .nx-cov.mini .nx-mast { left: 9%; width: 62%; }
  & .nx-cov.mini .nx-pen { top: 16%; height: 58%; }
  & .nx-cov.mini .nx-cloth { --hw: 9px; }
  & .nx-cov.mini .nx-grid i { border-radius: 3px; }
  & .nx-cov.mini .nx-num { font-size: 260px; right: 6%; bottom: -30%; -webkit-text-stroke-width: 1.5px; }
  & .nx-cov.mini .nx-sky i { width: 60%; }

/* ---------- список ---------- */
  & .nx-index { max-width: 1180px; }
  & .nx-lead { position: relative; display: block; border-radius: 40px; color: inherit; text-decoration: none; transition: transform .5s var(--sp-spring); }
  & .nx-lead:hover { transform: translateY(-4px); }
  & .nx-open { position: absolute; right: 26px; top: 26px; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 20px; border-radius: 999px; background: #fff; color: #15273f; font: 600 14px/1 var(--sp-f); transition: border-radius .4s var(--sp-spring); }
  & .nx-lead:hover .nx-open { border-radius: 14px; }
  & .nx-first { display: flex; align-items: center; gap: 20px; margin-top: 22px; padding: 22px 26px; border-radius: 28px; background: var(--sp-c1); }
  & .nx-first-n { flex: none; font: 800 34px/1 var(--sp-f); letter-spacing: -.04em; color: var(--sp-red); }
  & .nx-first p { margin: 0; font: 500 15px/1.5 var(--sp-f); color: var(--ink2); max-width: 70ch; }

/* ---------- статья ---------- */
  & .nx-post { max-width: 1180px; margin: 0 auto; padding: 18px clamp(12px, 3vw, 32px) 120px; font-family: var(--sp-f); }
  & .nx-prog { position: fixed; left: 0; right: 0; top: 0; z-index: 40; height: 4px; pointer-events: none; }
  & .nx-prog i { display: block; height: 100%; background: linear-gradient(90deg, #d9473b 0 24px, var(--sp-flag) 0); transform: scaleX(0); transform-origin: left; }
  & .nx-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 8px 14px 8px 10px; border-radius: 999px; font: 500 13.5px/1 var(--sp-f); color: var(--mute); text-decoration: none; transition: background .2s, color .2s; }
  & .nx-back:hover { background: var(--sp-c2); color: var(--ink); }
  & .nx-intro { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: start; margin: 54px auto 40px; max-width: 1040px; }
  & .nx-leadp { margin: 0; font: 500 clamp(20px, 2vw, 26px)/1.45 var(--sp-f); letter-spacing: -.012em; color: var(--ink); text-wrap: pretty; }
  & .nx-leadp::first-letter { float: left; margin: 6px 12px 0 0; padding: 6px 14px 6px 10px; font: 800 64px/.9 var(--sp-f); color: #fff; background: linear-gradient(90deg, #d9473b 0 6px, var(--sp-flag) 0); clip-path: polygon(0 0, 100% 0, 84% 50%, 100% 100%, 0 100%); }
  & .nx-meta { display: grid; gap: 0; margin: 0; }
  & .nx-meta div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  & .nx-meta dt { font: 500 13px/1.2 var(--sp-f); color: var(--mute); }
  & .nx-meta dd { margin: 0; font: 700 14px/1.2 var(--sp-f); color: var(--ink); }
  & .nx-toc { position: sticky; top: 118px; z-index: 12; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -8px 26px; padding: 10px 8px; background: var(--bg); }
  & .nx-toc a { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 6px; border-radius: 999px; background: var(--sp-c1); color: var(--ink2); font: 600 13.5px/1 var(--sp-f); text-decoration: none; transition: background .25s, color .25s, border-radius .4s var(--sp-spring); }
  & .nx-toc a b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; background: var(--panel); font-size: 12px; }
  & .nx-toc a:hover { background: var(--sp-c2); }
  & .nx-toc a.on { background: var(--sp-flag); color: #fff; border-radius: 12px; }
  & .nx-toc a.on b { background: #d9473b; color: #fff; }

  & .nx-sec { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: 64px 0; border-top: 1px solid var(--line); scroll-margin-top: 170px; }
  & .nx-sec:nth-of-type(even) .nx-sec-t { order: 2; }
  & .nx-sec-t { min-width: 0; }
  & .nx-no { --hw: 6px; display: inline-grid; place-items: center; width: 62px; height: 44px; padding-right: 12px; margin-bottom: 20px; color: #fff; font: 800 19px/1 var(--sp-f);
    background: linear-gradient(90deg, #d9473b 0 var(--hw), var(--sp-flag) 0); clip-path: polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%); transform-origin: left center; }
  & .nx-sec h2 { margin: 0 0 16px; font: 800 clamp(30px, 3.4vw, 46px)/1 var(--sp-f); letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
  & .nx-sec-t > p { margin: 0 0 12px; font: 500 16.5px/1.6 var(--sp-f); color: var(--ink2); max-width: 54ch; }
  & .nx-how { margin-top: 22px; padding: 18px 22px; border-radius: 0 22px 22px 0; background: var(--sp-c1); box-shadow: inset 4px 0 0 var(--sp-red); }
  & .nx-how-k { margin: 0 0 10px; font: 600 11.5px/1 var(--sp-f); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
  & .nx-how ol { margin: 0; padding: 0; list-style: none; counter-reset: h; display: grid; gap: 8px; }
  & .nx-how li { counter-increment: h; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font: 500 14.5px/1.45 var(--sp-f); color: var(--ink); }
  & .nx-how li::before { content: counter(h); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--panel); font: 700 11px/1 var(--sp-f); color: var(--ink2); }
  & .nx-fig { margin: 0; min-width: 0; }
  & .nx-fig figcaption { margin-top: 12px; font: 500 13px/1.4 var(--sp-f); color: var(--mute); text-align: center; }
/* появление при прокрутке: текст и демонстрация — с разницей */
  & .nx-rv .nx-sec-t, & .nx-rv .nx-fig, & .nx-safe.nx-rv > *, & .nx-end.nx-rv > * { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--sp-emph), transform 1s var(--sp-emph); }
  & .nx-rv .nx-fig { transition-delay: .15s; }
  & .nx-rv.in .nx-sec-t, & .nx-rv.in .nx-fig, & .nx-safe.nx-rv.in > *, & .nx-end.nx-rv.in > * { opacity: 1; transform: none; }
  & .nx-rv.in .nx-no { animation: spUnfurl .9s var(--sp-emph) .1s backwards; }

/* ---------- демонстрации ---------- */
  & .nx-demo { position: relative; padding: 26px; border-radius: 36px; background: var(--panel); box-shadow: var(--sh-2); }
  & .nx-g { display: grid; grid-template-columns: 82px repeat(var(--d), minmax(0, 1fr)); gap: 4px; align-items: center; }
  & .nx-gd { text-align: center; font: 600 11.5px/1 var(--sp-f); color: var(--mute); padding: 4px 0 6px; }
  & .nx-gd.on { color: var(--sp-blue); }
  & .nx-gn { font: 600 12.5px/1 var(--sp-f); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  & .nx-gc { position: relative; height: 34px; border-radius: 10px; background: var(--sp-c1); display: grid; place-items: center; transition: background .3s; }
  & .nx-gc .mk { width: calc(100% - 6px); height: 26px; border-radius: 999px; font: 600 10.5px/26px var(--sp-f); text-align: center; padding: 0; }
  & .nx-pop { animation: nxPop .45s var(--sp-bounce); }
  & .nx-d-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
  & .nx-btn { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--sp-flag); color: #fff; font: 600 13.5px/1 var(--sp-f); cursor: pointer; transition: border-radius .4s var(--sp-spring), transform .3s; }
  & .nx-btn:hover { border-radius: 12px; }
  & .nx-btn.busy { animation: nxPulse 1.2s ease-in-out infinite; }
  & .nx-btn.sm { height: 32px; padding: 0 14px; font-size: 12.5px; }
  & .nx-rule { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 8px 12px; border-radius: 12px; font: 500 13px/1.3 var(--sp-f); color: var(--ink2); }
  & .nx-rule b { color: var(--sp-green); }
  & .nx-rule.flash { animation: nxFlash .5s ease-out; }
  & .nx-rule i { display: none; }
/* в руке */
  & .nx-demo.hand .nx-gc.col { background: color-mix(in srgb, var(--sp-blue) 7%, var(--sp-c1)); }
  & .nx-demo.hand .nx-gc[data-v="ok"] { background: color-mix(in srgb, #138276 22%, var(--panel)); }
  & .nx-demo.hand .nx-gc[data-v="warn"] { background: color-mix(in srgb, #d8961c 28%, var(--panel)); }
  & .nx-demo.hand .nx-gc[data-v="no"] { background: repeating-linear-gradient(-45deg, var(--sp-c2) 0 5px, var(--sp-c1) 0 10px); }
  & .nx-lift { position: relative; z-index: 2; transition: transform .35s var(--sp-spring), box-shadow .35s; }
  & .nx-lift.up { transform: scale(1.12) rotate(-3deg); box-shadow: 0 10px 22px rgba(21, 39, 63, .28); }
  & .nx-tip { margin: 16px 0 0; min-height: 20px; font: 600 13.5px/1.4 var(--sp-f); color: var(--mute); }
  & .nx-tip[data-v="ok"] { color: #138276; } .nx-tip[data-v="warn"] { color: #a06800; } .nx-tip[data-v="no"] { color: var(--sp-red); }
/* отсутствие → замена */
  & .nx-g-wrap { position: relative; }
  & .nx-abs { position: absolute; left: calc(82px + 4px + (100% - 82px - 4px * 8) / 8 * 2 + 8px); top: 30px; height: 34px; width: 0; overflow: hidden; display: grid; place-items: center; border-radius: 10px;
    background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--r-sick) 22%, var(--panel)) 0 6px, color-mix(in srgb, var(--r-sick) 12%, var(--panel)) 0 12px); color: var(--r-sick); font: 700 11.5px/1 var(--sp-f); font-style: normal; white-space: nowrap; transition: width 1.2s var(--sp-emph); }
  & .nx-demo.away.s1 .nx-abs { width: calc((100% - 82px - 4px * 8) / 8 * 3 + 8px); }
  & .nx-demo.away .nx-gc .mk { position: relative; z-index: 3; }
  & .nx-demo.away.s2:not(.s3) .nx-gc .mk.k2 { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--sp-red); animation: nxPulse 1.1s ease-in-out infinite; }
  & .nx-need { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 10px 10px 16px; border-radius: 18px; background: var(--sp-c1); font: 600 13.5px/1.3 var(--sp-f); color: var(--mute); opacity: .35; transition: opacity .4s, background .4s, color .4s; }
  & .nx-need span { flex: 1; }
  & .nx-demo.away.s2 .nx-need { opacity: 1; background: color-mix(in srgb, var(--sp-red) 10%, var(--panel)); color: var(--sp-red); }
  & .nx-demo.away.s2:not(.s3) .nx-need .nx-btn { animation: nxPulse 1.1s ease-in-out infinite; }
  & .nx-demo.away.s3 .nx-need { background: color-mix(in srgb, #138276 12%, var(--panel)); color: #138276; }
  & .nx-demo.away.s3 .nx-need span { font-size: 0; } .nx-demo.away.s3 .nx-need span::after { content: "Заменено: ДН2 — Попов А."; font-size: 13.5px; }
  & .nx-demo.away.s3 .nx-need .nx-btn { visibility: hidden; }
/* повестка: строй */
  & .nx-ag-n { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 18px; }
  & .nx-ag-n b { font: 800 64px/.82 var(--sp-f); letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
  & .nx-ag-n span { font: 600 14px/1.15 var(--sp-f); color: var(--mute); }
  & .nx-fgs { display: grid; gap: 8px; }
  & .nx-fg { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; }
  & .nx-fg > span { font: 600 12px/1 var(--sp-f); color: var(--mute); }
  & .nx-fg > div { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
  & .nx-fg i { flex: 1; max-width: 9px; height: 28px; border-radius: 3px; background: var(--sp-flag); cursor: pointer; transition: height .35s var(--sp-spring), background .25s; }
  & .nx-fg i:hover { background: var(--sp-blue); }
  & .nx-fg i[data-r] { height: 12px; }
  & .nx-fg i[data-r="sick"] { background: var(--r-sick); } .nx-fg i[data-r="leave"] { background: var(--r-leave); } .nx-fg i[data-r="practice"] { background: var(--r-practice); }
  &[data-theme="dark"] .nx-fg i:not([data-r]) { background: #8ea6e8; }
/* сфера: мини-окно */
  & .nx-win { --c: #2f4fa8; --cc: #dfe6f8; position: relative; overflow: hidden; border-radius: 26px; background: #f7f8fc; box-shadow: inset 0 0 0 1px var(--line); transition: background .4s; }
  & .nx-win[data-c="red"] { --c: #d9473b; --cc: #fde3de; } .nx-win[data-c="yellow"] { --c: #b97c0e; --cc: #f8eac9; } .nx-win[data-c="green"] { --c: #138276; --cc: #cdeee8; }
  & .nx-win.dark { background: #10131a; --cc: color-mix(in srgb, var(--c) 35%, #10131a); }
  & .nx-win-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
  & .nx-win-s { flex: 1; height: 26px; border-radius: 999px; background: color-mix(in srgb, #15273f 7%, transparent); }
  & .nx-win.dark .nx-win-s { background: #232a36; }
  & .nx-win-th { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 999px; background: color-mix(in srgb, #15273f 7%, transparent); color: #444; cursor: pointer; }
  & .nx-win.dark .nx-win-th { background: #232a36; color: #e6e9f2; }
  & .nx-win-tabs { display: flex; justify-content: center; gap: 4px; padding: 0 10px 10px; }
  & .nx-win-tabs button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: #5f6368; font: 600 12px/1 var(--sp-f); cursor: pointer; transition: background .4s var(--sp-spring), color .3s; }
  & .nx-win.dark .nx-win-tabs button { color: #a7adb8; }
  & .nx-win-tabs button.on { background: var(--cc); color: var(--c); }
  & .nx-win.dark .nx-win-tabs button.on { color: #fff; }
  & .nx-win-body { display: grid; gap: 6px; padding: 8px 16px 20px; }
  & .nx-win-r { display: grid; grid-template-columns: 60px repeat(8, 1fr); gap: 4px; }
  & .nx-win-r i { height: 22px; border-radius: 7px; background: color-mix(in srgb, #15273f 5%, transparent); transition: background .4s; }
  & .nx-win.dark .nx-win-r i { background: #1a1f29; }
  & .nx-win-r i:first-child { background: color-mix(in srgb, #15273f 10%, transparent); }
  & .nx-win-r i.k { background: var(--c); border-radius: 999px; }
  & .nx-win-fab { position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; background: var(--c); color: #fff; transition: background .4s; }
/* жизнь роты */
  & .nx-demo.life { display: grid; gap: 26px; }
  & .nx-life-pen { --hw: 8px; justify-self: start; display: flex; align-items: baseline; gap: 8px; padding: 14px 54px 14px calc(var(--hw) + 18px); background: linear-gradient(90deg, #d9473b 0 var(--hw), var(--sp-flag) 0); color: #fff;
    clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 50%, 100% 100%, 0 100%); transform-origin: left center; animation: nxWave 5s ease-in-out infinite; transition: background .5s; }
  & .nx-life-pen b { font: 800 44px/1 var(--sp-f); letter-spacing: -.04em; }
  & .nx-life-pen span { font: 600 14px/1 var(--sp-f); opacity: .7; }
  & .nx-life-pen.grad { background: linear-gradient(90deg, #d9473b 0 var(--hw), #138276 0); }
  & .nx-life { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  & .nx-life > div { display: grid; justify-items: center; gap: 8px; padding: 14px 4px; border-radius: 18px; background: var(--sp-c1); color: var(--mute); transition: background .4s, color .4s, transform .5s var(--sp-spring); }
  & .nx-life > div b { font: 800 22px/1 var(--sp-f); }
  & .nx-life > div span { font: 500 11px/1 var(--sp-f); }
  & .nx-life > div.on { background: color-mix(in srgb, var(--sp-blue) 14%, var(--panel)); color: var(--sp-blue); }
  & .nx-life > div.now { background: var(--sp-flag); color: #fff; transform: translateY(-6px); }
  & .nx-life > div.grad.now { background: #138276; }

/* под капотом */
  & .nx-safe { padding: 64px 0 20px; border-top: 1px solid var(--line); }
  & .nx-safe h2 { margin: 0 0 26px; font: 800 clamp(28px, 3vw, 40px)/1 var(--sp-f); letter-spacing: -.04em; color: var(--ink); }
  & .nx-safe-l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  & .nx-safe-l > div { padding: 4px 24px 4px 0; display: grid; gap: 8px; align-content: start; }
  & .nx-safe-l > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
  & .nx-safe-i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; background: var(--sp-c1); color: var(--sp-blue); }
  & .nx-safe-l b { font: 700 16px/1.25 var(--sp-f); color: var(--ink); }
  & .nx-safe-l p { margin: 0; font: 500 14px/1.5 var(--sp-f); color: var(--mute); }
/* конец выпуска */
  & .nx-end { display: grid; justify-items: center; gap: 16px; padding: 70px 0 0; text-align: center; }
  & .nx-end-pen i { display: block; width: 92px; height: 60px; background: linear-gradient(90deg, #d9473b 0 9px, var(--sp-flag) 0); clip-path: polygon(0 0, 100% 0, 76% 50%, 100% 100%, 0 100%); transform-origin: left center; animation: nxWave 5s ease-in-out infinite; }
  & .nx-end p { margin: 0; max-width: 58ch; font: 500 18px/1.55 var(--sp-f); color: var(--ink2); }
  & .nx-end .nx-sign { font: 600 12px/1 var(--sp-f); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }

  @media (max-width: 980px) {
    & .nx-intro { grid-template-columns: 1fr; gap: 24px; }
    & .nx-sec { grid-template-columns: 1fr; padding: 46px 0; }
    & .nx-sec:nth-of-type(even) .nx-sec-t { order: 0; }
    & .nx-safe-l { grid-template-columns: 1fr 1fr; gap: 22px 0; }
    & .nx-safe-l > div:nth-child(3) { padding-left: 0; border-left: 0; }
  }
  @media (max-width: 760px) {
    & .nx-cov { height: 520px; border-radius: 28px; }
    & .nx-mast { width: 80%; left: 8%; }
    & .nx-pen { top: 8%; height: 34%; }
    & .nx-cov-t { left: 8%; right: 6%; bottom: 6%; }
    & .nx-num { font-size: 300px; bottom: 24%; right: -6%; }
    & .nx-cov.mini .nx-num { font-size: 200px; bottom: -20%; }
    & .nx-toc { top: 64px; }
    & .nx-demo { padding: 18px; border-radius: 26px; }
    & .nx-g { grid-template-columns: 64px repeat(var(--d), minmax(0, 1fr)); gap: 3px; }
    & .nx-gn { font-size: 11px; }
    & .nx-gc .mk { font-size: 9px; }
    & .nx-abs { left: calc(64px + 3px + (100% - 64px - 3px * 8) / 8 * 2 + 6px); }
    & .nx-demo.away.s1 .nx-abs { width: calc((100% - 64px - 3px * 8) / 8 * 3 + 6px); }
    & .nx-d-bar { flex-direction: column; align-items: flex-start; }
    & .nx-safe-l { grid-template-columns: 1fr; }
    & .nx-safe-l > div + div { padding-left: 0; border-left: 0; }
    & .nx-life > div span { display: none; }
    & .nx-open { top: 16px; right: 16px; }
  }
  @media (prefers-reduced-motion: reduce) { .nx-cov *, .nx-end-pen i, .nx-life-pen { animation: none !important; } }
}

/* ==========================================================================
   Штаб, 23.10: спокойный вход. Числа сразу итоговые, страница появляется одним мягким проявлением,
   без каскада всплывающих строк, ветра и качания. Полотно обзора — роты вымпелами на фале, учебный год и служба.
   Мастер «Поднять роту» — на весь экран, по шагам. Сигналы на входе — с живым предпросмотром.
   ========================================================================== */
@keyframes hxIn { from { opacity: 0; } }
@keyframes hxShim { to { background-position: -200% 0; } }
@keyframes hxWave { 0%, 100% { transform: skewY(0) scaleX(1); } 35% { transform: skewY(-5deg) scaleX(.93); } 70% { transform: skewY(3deg) scaleX(1.02); } }
@keyframes hxTape { to { background-position: 44px 0; } }
@keyframes nuIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes nuRaise { to { transform: translateY(-120%); } }
:root[data-design="sphere"] {

/* тишина: ни одного каскада и бесконечного движения — только проявление страницы */
  & body.is-hq :is(.hq-brand, .hq-meta, .hq-nav, .hq-row, .cv i, .hq-notes li, .hq-logrows li, .hq-path li, .hm-a, .hm-b, .hq-bn-c, .hq-pass) { animation: none; }
  & body.is-hq .hq-row::after { animation: none; }
  & body.is-hq :is(.hq-page.in, .hq-ubody.in) > * { animation: none; }
  & body.is-hq .hq-page.in { animation: hxIn .35s ease-out both; }
  & body.is-hq .hq-ubody.in { animation: hxIn .25s ease-out both; }
  & body.is-hq .hq-brand:hover :is(.hm-a, .hm-b) { animation: hmSway 1.6s ease-in-out; }
  & body.is-hq .hq-st[data-t="bad"] i::after { animation: none; }
  & body.is-hq .hq-path li.now > i { animation: none; }
  & body.is-hq .hq-row-l { white-space: nowrap; }

/* ожидание данных: полоса на месте, блоки — тихими местами */
  & body.is-hq .hx-wait .hq-bar-in { grid-template-columns: auto; }
  & body.is-hq .hx-skel { display: grid; gap: 22px; padding-top: 18px; }
  & body.is-hq .hx-skel i { display: block; border-radius: 36px; background: linear-gradient(90deg, var(--sp-c1) 0 40%, var(--sp-c2) 50%, var(--sp-c1) 60% 100%) 0 0 / 200% 100%; animation: hxShim 1.4s linear infinite; }
  & body.is-hq .hx-skel .s1 { height: 96px; max-width: 760px; border-radius: 24px; } body.is-hq .hx-skel .s2 { height: 300px; } body.is-hq .hx-skel .s3 { height: 220px; } body.is-hq .hx-skel .s4 { height: 160px; }

/* ---------- полотно обзора ---------- */
  & body.is-hq .hx-hero { --hw: 12px; position: relative; overflow: hidden; display: grid; gap: 4px; margin-top: 30px; padding: 28px 34px 22px calc(var(--hw) + 34px); border-radius: 0 40px 40px 0; color: #fff;
    background: linear-gradient(90deg, var(--sp-red) 0 var(--hw), var(--cob) 0); }
  & body.is-hq .hx-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; }
  & body.is-hq .hx-k { margin: 0 0 10px; font: 600 11.5px/1 var(--sp-f); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
  & body.is-hq .hx-big { display: flex; align-items: flex-end; gap: 12px; margin: 0; }
  & body.is-hq .hx-big b { font: 800 76px/.8 var(--sp-f); letter-spacing: -.05em; }
  & body.is-hq .hx-big span { font: 600 15px/1.15 var(--sp-f); color: rgba(255, 255, 255, .78); }
  & body.is-hq .hx-year { display: grid; justify-items: end; gap: 6px; text-align: right; min-width: 260px; }
  & body.is-hq .hx-year b { font: 800 34px/1 var(--sp-f); letter-spacing: -.04em; }
  & body.is-hq .hx-year span { font: 500 13px/1.3 var(--sp-f); color: rgba(255, 255, 255, .72); }
  & body.is-hq .hx-bar { display: block; width: 260px; height: 6px; margin-top: 6px; border-radius: 99px; background: rgba(255, 255, 255, .18); overflow: hidden; }
  & body.is-hq .hx-bar i { display: block; height: 100%; border-radius: 99px; background: #fff; box-shadow: inset -4px 0 0 var(--sp-red); }
  & body.is-hq .hx-line { position: relative; height: 150px; margin: 6px 4% 0; }
  & body.is-hq .hx-rope { position: absolute; left: 0; right: 0; top: 4px; width: 100%; height: 36px; overflow: visible; }
  & body.is-hq .hx-rope path { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.5px; }
  & body.is-hq .hx-pen { position: absolute; display: grid; justify-items: center; gap: 7px; width: 90px; margin-left: -45px; padding: 16px 0 32px; color: var(--cob); text-decoration: none;
    background: linear-gradient(180deg, var(--sp-red) 0 6px, #fff 0); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); transform-origin: 50% 0; transition: transform .45s var(--sp-spring); border: 0; cursor: pointer; }
  & body.is-hq .hx-pen b { font: 800 30px/1 var(--sp-f); letter-spacing: -.03em; }
  & body.is-hq .hx-pen .cv { gap: 2px; }
  & body.is-hq .hx-pen .cv i { width: 8px; height: 4px; }
  & body.is-hq .hx-pen:hover { transform: translateY(4px); animation: hxWave 1.4s ease-in-out; }
  & body.is-hq .hx-pen.ghost { background: rgba(255, 255, 255, .2); color: #fff; }
  & body.is-hq .hx-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .14); }
  & body.is-hq .hx-st { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--sp-f); color: rgba(255, 255, 255, .85); }
  & body.is-hq .hx-st i { width: 8px; height: 8px; border-radius: 50%; background: #7ee0b5; }
  & body.is-hq .hx-st[data-t="bad"] i { background: #ff8d80; }
  & body.is-hq .hx-copy { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font: 500 13px/1 var(--sp-f); cursor: pointer; transition: background .2s; }
  & body.is-hq .hx-copy:hover { background: rgba(255, 255, 255, .22); }
  & body.is-hq .hx-mt { display: flex; align-items: center; gap: 16px; margin: -28px -34px 18px calc(-1 * (var(--hw) + 34px) + var(--hw)); padding: 14px 34px; background: rgba(0, 0, 0, .18); position: relative; overflow: hidden; }
  & body.is-hq .hx-tape { position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: repeating-linear-gradient(-45deg, #fff 0 6px, var(--sp-red) 0 12px); }
  & body.is-hq .hx-mt > div { display: grid; gap: 4px; flex: 1; padding-left: 6px; }
  & body.is-hq .hx-mt b { font: 700 16px/1.2 var(--sp-f); }
  & body.is-hq .hx-mt span { font: 500 13px/1 var(--sp-f); color: rgba(255, 255, 255, .7); }
  & body.is-hq .hx-open { height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; color: var(--cob); font: 600 13.5px/1 var(--sp-f); cursor: pointer; }
  & body.is-hq .hx-hero.mt { background: linear-gradient(90deg, var(--sp-red) 0 var(--hw), #2b3550 0); }

/* ---------- сигналы на входе: редактор и предпросмотр ---------- */
  & body.is-hq .hx-sig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; align-items: start; }
  & body.is-hq .hx-sig-f { display: grid; gap: 14px; min-width: 0; }
  & body.is-hq .hx-fl { display: grid; gap: 7px; }
  & body.is-hq .hx-fl > span { font: 600 12.5px/1 var(--sp-f); color: var(--ink2); }
  & body.is-hq .hx-fl :is(input, textarea) { width: 100%; }
  & body.is-hq .hx-pick { display: flex; flex-wrap: wrap; gap: 6px; }
  & body.is-hq .hx-pick button { display: inline-grid; place-items: center; min-width: 50px; height: 42px; padding: 0 8px; border: 0; border-radius: 14px; background: var(--sp-c1); cursor: pointer; transition: background .2s, box-shadow .2s, border-radius .35s var(--sp-spring); }
  & body.is-hq .hx-pick button:hover { background: var(--sp-c2); }
  & body.is-hq .hx-pick button.on { background: var(--panel); box-shadow: inset 0 0 0 2px var(--cob); border-radius: 10px; }
  & body.is-hq .hx-pick .sg-flag { width: 34px; height: 24px; padding-right: 5px; animation: none; }
  & body.is-hq .hx-tone { display: block; width: 24px; height: 24px; border-radius: 50%; }
  & body.is-hq .hx-tone[data-tone="blue"] { background: #2f4fa8; } body.is-hq .hx-tone[data-tone="red"] { background: #c63a2f; } body.is-hq .hx-tone[data-tone="yellow"] { background: #b97c0e; }
  & body.is-hq .hx-tone[data-tone="green"] { background: #138276; } body.is-hq .hx-tone[data-tone="ink"] { background: #15273f; }
  & body.is-hq .hx-kind { display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1 var(--sp-f); color: var(--ink2); }
  & body.is-hq .hx-until { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  & body.is-hq .hx-dt { width: auto; min-width: 210px; }
  & body.is-hq .hx-quick { display: flex; flex-wrap: wrap; gap: 4px; }
  & body.is-hq .hx-quick button { height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--sp-c1); color: var(--ink2); font: 500 12.5px/1 var(--sp-f); cursor: pointer; }
  & body.is-hq .hx-quick button:hover { background: var(--sp-c2); color: var(--ink); }
  & body.is-hq .hx-pv { position: sticky; top: 100px; margin: 0; }
  & body.is-hq .hx-pv figcaption { margin-bottom: 10px; font: 600 11.5px/1 var(--sp-f); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
  & body.is-hq .hx-pv-in { height: 300px; overflow: hidden; border-radius: 22px; background: var(--bg); box-shadow: 0 0 0 1px var(--line), var(--sh-2); }
  & body.is-hq .hx-frame { display: grid; grid-template-columns: 1fr 1.15fr; height: 100%; }
  & body.is-hq .hx-frame-cloth { margin: 16px 0 16px 18px; background: linear-gradient(90deg, #d9473b 0 7px, #15273f 0); clip-path: polygon(0 0, 100% 0, 84% 50%, 100% 100%, 0 100%); }
  & body.is-hq .hx-frame-side { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px; min-width: 0; }
  & body.is-hq .hx-frame-links { display: flex; justify-content: flex-end; gap: 6px; }
  & body.is-hq .hx-frame-links i { width: 46px; height: 8px; border-radius: 4px; background: var(--sp-c2); }
  & body.is-hq .hx-frame-links i + i { width: 14px; }
  & body.is-hq .hx-frame-form { display: grid; gap: 8px; margin-top: auto; }
  & body.is-hq .hx-frame-form b { font: 700 18px/1 var(--sp-f); color: var(--ink); }
  & body.is-hq .hx-frame-form i { height: 22px; border-radius: 8px; background: var(--sp-c2); }
  & body.is-hq .hx-frame-form i.btn { height: 24px; width: 70%; border-radius: 8px 0 0 8px; background: linear-gradient(90deg, #d9473b 0 4px, #15273f 0); clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%); }
  & body.is-hq .hx-frame-none { margin: 0; padding: 12px; border-radius: 12px; border: 1.5px dashed var(--line); font: 500 11.5px/1.35 var(--sp-f); color: var(--faint); text-align: center; }
  & body.is-hq .hx-frame .sg-note { padding: 9px 10px 9px 0; gap: 9px; border-radius: 0 14px 14px 0; animation: none; }
  & body.is-hq .hx-frame .sg-note .sg-flag { width: 32px; height: 23px; padding-right: 5px; animation: none; }
  & body.is-hq .hx-frame .sg-note .sg-flag .ico { width: 12px; height: 12px; }
  & body.is-hq .hx-frame .sg-note-t b { font-size: 11.5px; }
  & body.is-hq .hx-frame .sg-note-t p { font-size: 10.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  & body.is-hq .hx-frame .sg-note-t small { font-size: 9px; }
  & body.is-hq .hx-pv-in.mt .sg-m { font-size: 12px; }

/* ---------- мастер «Поднять роту» ---------- */
  & body.is-hq .nu { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-rows: auto 1fr; background: var(--bg); opacity: 0; transition: opacity .25s; }
  & body.is-hq .nu.open { opacity: 1; }
  & body.is-hq .nu-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 72px; padding: 0 24px; border-bottom: 1px solid var(--line2); }
  & body.is-hq .nu-brand { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--sp-f); color: var(--ink2); }
  & body.is-hq .nu-brand .ico { color: var(--sp-red); }
  & body.is-hq .nu-x { justify-self: end; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--sp-c2); color: var(--ink2); cursor: pointer; }
  & body.is-hq .nu-x:hover { background: var(--sp-c3); color: var(--ink); }
  & body.is-hq .nu-rail { display: flex; gap: 6px; margin: 0; padding: 4px; list-style: none; border-radius: 999px; background: var(--sp-c2); }
  & body.is-hq .nu-rail button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 6px; border: 0; border-radius: 999px; background: none; color: var(--mute); font: 500 13.5px/1 var(--sp-f); cursor: pointer; transition: background .3s, color .3s; }
  & body.is-hq .nu-rail button:disabled { cursor: default; }
  & body.is-hq .nu-rail b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--panel); font: 700 12px/1 var(--sp-f); }
  & body.is-hq .nu-rail li.on button { background: var(--panel); color: var(--ink); box-shadow: var(--sh-1); }
  & body.is-hq .nu-rail li.on b { background: var(--cob); color: #fff; }
  & body.is-hq .nu-rail li.done b { background: var(--sp-green); color: #fff; }
  & body.is-hq .nu-main { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 440px); justify-content: center; gap: clamp(32px, 6vw, 96px); overflow: auto; padding: 48px 24px 40px; }
  & body.is-hq .nu-form { display: flex; flex-direction: column; min-width: 0; }
  & body.is-hq .nu-k { margin: 0 0 10px; font: 600 11.5px/1 var(--sp-f); letter-spacing: .08em; text-transform: uppercase; color: var(--sp-red); }
  & body.is-hq .nu-head h1 { margin: 0; font: 800 44px/1 var(--sp-f); letter-spacing: -.04em; color: var(--ink); }
  & body.is-hq .nu-sub { margin: 10px 0 28px; font: 500 15px/1.4 var(--sp-f); color: var(--mute); }
  & body.is-hq .nu-body { display: grid; gap: 18px; }
  & body.is-hq .nu-body.in > * { animation: nuIn .35s var(--sp-emph) backwards; }
  & body.is-hq .nu-body.in > :nth-child(2) { animation-delay: .04s; } body.is-hq .nu-body.in > :nth-child(3) { animation-delay: .08s; } body.is-hq .nu-body.in > :nth-child(n + 4) { animation-delay: .12s; }
  & body.is-hq .nu-f { display: grid; gap: 8px; min-width: 0; }
  & body.is-hq .nu-f > span { font: 600 13px/1 var(--sp-f); color: var(--ink2); }
  & body.is-hq .nu-f > small { font: 500 12.5px/1.35 var(--sp-f); color: var(--mute); }
  & body.is-hq .nu-f input { width: 100%; height: 52px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--sp-c2); font: 500 16px/1 var(--sp-f); color: var(--ink); box-shadow: inset 0 0 0 2px transparent; transition: background .2s, box-shadow .2s; }
  & body.is-hq .nu-f input:hover { background: var(--sp-c3); }
  & body.is-hq .nu-f input:focus { outline: 0; background: var(--panel); box-shadow: inset 0 0 0 2px var(--cob), 0 0 0 5px color-mix(in srgb, var(--cob) 14%, transparent); }
  & body.is-hq .nu-f input.nu-num-in { width: 220px; height: 84px; padding: 0 22px; font: 800 52px/1 var(--sp-f); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
  & body.is-hq .nu-f input.nu-short { width: 140px; }
  & body.is-hq .nu-f input.nu-mono { font-family: var(--sp-code); font-size: 15px; }
  & body.is-hq .nu-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: end; }
  & body.is-hq .nu-note { margin: 0; padding: 14px 18px; border-radius: 0 18px 18px 0; background: var(--sp-c1); box-shadow: inset 4px 0 0 var(--cob); font: 500 14px/1.5 var(--sp-f); color: var(--ink2); }
  & body.is-hq .nu-note.sm { box-shadow: none; border-radius: 14px; font-size: 13px; color: var(--mute); }
  & body.is-hq .nu-gl { display: grid; gap: 8px; }
  & body.is-hq .nu-g { display: grid; grid-template-columns: 30px minmax(0, 1fr) 40px; align-items: center; gap: 10px; }
  & body.is-hq .nu-g > span { font: 700 13px/1 var(--sp-f); color: var(--faint); text-align: right; }
  & body.is-hq .nu-g input { height: 46px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--sp-c2); font: 500 15px/1 var(--sp-f); width: 100%; }
  & body.is-hq .nu-g input:focus { outline: 0; background: var(--panel); box-shadow: inset 0 0 0 2px var(--cob); }
  & body.is-hq .nu-g button { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--mute); cursor: pointer; }
  & body.is-hq .nu-g button:hover { background: var(--sp-red-c); color: var(--sp-red); }
  & body.is-hq .nu-add { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 40px; margin-left: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--sp-blue-c); color: var(--sp-blue-on); font: 600 13.5px/1 var(--sp-f); cursor: pointer; }
  & body.is-hq .nu-err { min-height: 20px; margin: 14px 0 0; font: 600 13.5px/1.3 var(--sp-f); color: var(--sp-red); }
  & body.is-hq .nu-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--line2); }
  & body.is-hq .nu-foot .nu-go { margin-left: auto; height: 50px; padding: 0 26px; font-size: 15px; }
/* вымпел роты справа */
  & body.is-hq .nu-pv { position: sticky; top: 0; align-self: start; display: grid; gap: 22px; }
  & body.is-hq .nu-mast { position: relative; height: 300px; overflow: hidden; border-radius: 36px; background: #0f1d36; }
  & body.is-hq .nu-pole { position: absolute; left: 44px; top: 26px; bottom: 0; width: 6px; border-radius: 3px; background: #c9cfdb; }
  & body.is-hq .nu-pole::before { content: ""; position: absolute; left: 50%; top: -8px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #d8dde6; }
  & body.is-hq .nu-pen { --hw: 12px; position: absolute; left: 50px; top: 40px; width: calc(100% - 90px); height: 168px; display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 12px 12px;
    padding: 22px 30% 18px calc(var(--hw) + 22px); background: linear-gradient(90deg, #d9473b 0 var(--hw), #f3efe6 0); color: #15273f;
    clip-path: polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%); transform-origin: left center; animation: hxWave 7s ease-in-out infinite; transition: transform .9s var(--sp-emph); }
  & body.is-hq .nu.raised .nu-pen { animation: nuRaise .9s var(--sp-emph) forwards; }
  & body.is-hq .nu-pn { grid-column: 1 / -1; font: 800 76px/.85 var(--sp-f); letter-spacing: -.05em; color: var(--cob); font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 100%; }
  & body.is-hq .nu-pn.empty { color: rgba(21, 39, 63, .22); }
  & body.is-hq .nu-pr { align-self: center; font: 700 15px/1 var(--sp-f); color: #15273f; }
  & body.is-hq .nu-pcv { align-self: center; }
  & body.is-hq .nu-pcv .cv i { width: 14px; height: 5px; }
  & body.is-hq .nu-pd { display: grid; margin: 0; padding: 4px 22px; border-radius: 28px; background: var(--panel); box-shadow: var(--sh-1); }
  & body.is-hq .nu-pd div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line2); }
  & body.is-hq .nu-pd div:last-child { border-bottom: 0; }
  & body.is-hq .nu-pd dt { font: 500 13px/1.3 var(--sp-f); color: var(--mute); }
  & body.is-hq .nu-pd dd { margin: 0; min-width: 0; font: 600 14px/1.35 var(--sp-f); color: var(--ink); overflow-wrap: anywhere; }
  & body.is-hq .nu-pd dd code { display: block; margin-top: 3px; font: 500 12.5px/1 var(--sp-code); color: var(--mute); }
  & body.is-hq .nu-pgs { display: flex; flex-wrap: wrap; gap: 4px; }
  & body.is-hq .nu-pgs span { padding: 4px 9px; border-radius: 999px; background: var(--sp-c1); font: 500 12px/1.2 var(--sp-f); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  @media (max-width: 1100px) { body.is-hq .hx-sig { grid-template-columns: 1fr; } body.is-hq .hx-pv { position: static; } }
  @media (max-width: 920px) {
    & body.is-hq .nu-main { grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
    & body.is-hq .nu-pv { position: static; order: -1; }
    & body.is-hq .nu-mast { height: 210px; }
    & body.is-hq .nu-pen { height: 130px; top: 34px; }
    & body.is-hq .nu-pn { font-size: 56px; }
    & body.is-hq .nu-pd { display: none; }
  }
  @media (max-width: 760px) {
    & body.is-hq .hx-hero { padding: 22px 20px 18px calc(var(--hw) + 20px); border-radius: 0 28px 28px 0; }
    & body.is-hq .hx-top { flex-direction: column; gap: 16px; }
    & body.is-hq .hx-year { justify-items: start; text-align: left; min-width: 0; }
    & body.is-hq .hx-bar { width: 200px; }
    & body.is-hq .hx-big b { font-size: 60px; }
    & body.is-hq .hx-line { height: 120px; margin: 0; }
    & body.is-hq .hx-pen { width: 58px; margin-left: -29px; padding: 12px 0 24px; gap: 5px; }
    & body.is-hq .hx-pen b { font-size: 19px; }
    & body.is-hq .hx-pen .cv i { width: 5px; height: 3px; }
    & body.is-hq :is(.hx-st, .hx-copy) { white-space: nowrap; font-size: 12px; }
    & body.is-hq .hx-mt { margin: -22px -20px 14px calc(-1 * (var(--hw) + 20px) + var(--hw)); padding: 12px 20px; flex-wrap: wrap; }
    & body.is-hq .nu-top { grid-template-columns: 1fr auto; height: auto; padding: 12px 16px; }
    & body.is-hq .nu-rail { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
    & body.is-hq .nu-rail span { display: none; }
    & body.is-hq .nu-rail li.on span { display: inline; }
    & body.is-hq .nu-main { padding: 20px 16px 32px; }
    & body.is-hq .nu-head h1 { font-size: 34px; }
    & body.is-hq .nu-row { grid-template-columns: 1fr; }
    & body.is-hq .nu-mast { height: 150px; }
    & body.is-hq .nu-pen { height: 88px; top: 26px; }
    & body.is-hq .nu-pn { font-size: 42px; }
  }
}

/* ================= Телефон (22.10, ночь) — каркас, вход, повестка, экраны =================
   Правила на телефоне — в этом блоке, в конце файла: побеждают порядком прежние мобильные правила выше. */

/* «Ещё» на телефоне: лист снизу с плитками разделов */
:root[data-design="sphere"] {
  & .sp-more { display: grid; gap: 14px; }
  & .sp-more .sp-apps-g { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px; background: var(--sp-c1); }
  & .sp-more .sp-app-i { padding: 14px 2px 12px; }
  & .sp-more .sp-app-i > span { background: var(--panel); }
  & .sp-more-list { display: grid; padding: 6px; border-radius: 24px; background: var(--sp-c1); }
  & .sp-more-list .sp-acc-r { min-height: 52px; }
  & .sp-more-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 6px 0; font: 500 12.5px/1 var(--sp-f); color: var(--faint); }
  & .sp-more-f a { color: var(--mute); text-decoration: none; }
}

@media (max-width: 760px) {
  :root[data-design="sphere"] {
    /* панель сверху: знак и рота слева, поиск значком и пропуск справа */
    & .sp-top { grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px; height: 60px; padding: 0 8px 0 14px; }
    & .sp-brand { grid-column: 1; grid-row: 1; gap: 10px; }
    & .sp-brand .logo { width: 36px; height: 36px; border-radius: 11px; }
    & .sp-bt { display: flex; gap: 2px; }
    & .sp-bt b { font-size: 18px; font-weight: 600; }
    & .sp-bt small { font-size: 11.5px; }
    & .sp-search { grid-column: 2; grid-row: 1; width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; background: none; animation: none; }
    & .sp-search span, & .sp-search kbd { display: none; }
    & .sp-search:hover { background: var(--hover); box-shadow: none; }
    & .sp-search .ico { width: 22px; height: 22px; }
    & .sp-acts { grid-column: 3; grid-row: 1; }
    & .sp-apps { display: none; }
    & .sp-me { margin-left: 0; }
    & .sp-head { background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }

    /* вкладки снизу: пять, подпись в одну строку, подложка-капсула у значка */
    & .tabbar { display: flex; padding: 8px 4px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--sp-c1) 92%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 -1px 0 var(--line); }
    & .tabbar a, & .tabbar button { gap: 4px; padding: 0; font-size: 11.5px; letter-spacing: -.01em; }
    & .tabbar span { font-size: 11.5px; letter-spacing: -.015em; }
    & .tabbar .ico { width: 58px; height: 32px; padding: 6px 18px; }
    & .tabbar .nav-n { top: -2px; left: calc(50% + 8px); }
    & .app.sp-app { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

    /* плавающая кнопка на телефоне — всегда круглая, над вкладками; тень — box-shadow (drop-shadow с clip-path давал квадрат) */
    & .sp-fab, & .sp-fab.mini, & body[data-sec="month"] .sp-fab:not(.mini), & body[data-sec="month"] .sp-fab:hover {
      right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); width: 56px; height: 56px; padding: 0; gap: 0; justify-content: center;
      border-radius: 18px; background-image: none; clip-path: none; filter: none; box-shadow: 0 6px 16px rgba(21, 39, 63, .2), 0 1px 3px rgba(21, 39, 63, .12); }
    & .sp-fab span, & body[data-sec="month"] .sp-fab:hover span { max-width: 0; opacity: 0; }
    & .sp-fab:hover .ico { transform: none; }
    & .sp-fab:active { border-radius: 28px; transform: scale(.92); }

    & .toasts { bottom: calc(150px + env(safe-area-inset-bottom)); }
    & .page { padding: 12px 16px 104px; }
    & .pg-head { gap: 14px; margin-bottom: 18px; }
    & .pg-head h1 { font-size: 30px; letter-spacing: -.03em; }
    & .pg-sub { font-size: 14.5px; line-height: 1.45; }
  }
}

/* ---------- вход: форма и подвал по одной оси; объявление штаба — тональная карточка ---------- */
:root[data-design="sphere"] {
  & .en-side { justify-content: flex-start; padding: 40px clamp(24px, 4vw, 64px) 40px; }
  & .en-note { max-width: 380px; margin: auto 0 0; }
  & .en .login-form { margin: 0 0 auto; }
  & .en .login-err:empty { display: none; }
  & .en-end { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 380px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); }
  & .en-end .en-links { justify-content: flex-start; gap: 2px; margin-left: -12px; }
  & .en-end .lf-sign { position: static; margin: 0; opacity: .55; }
  & .en-end .lf-sign:hover { opacity: 1; }

  /* объявление на входе: карточка со скруглением, флажок со значком — внутри, у первой строки */
  & .sg-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 18px 16px 16px; border-radius: 24px;
    background: color-mix(in srgb, var(--c) 9%, var(--panel)); box-shadow: none; }
  & .sg-note .sg-flag { width: 40px; height: 30px; padding-right: 7px; margin-top: 0; }
  & .sg-note-t { gap: 4px; padding-top: 4px; }
  & .sg-note-t b { font: 700 15.5px/1.3 var(--sp-f); }
  & .sg-note-t b + p { margin-top: 1px; }
  & .sg-note-t p { font: 500 14px/1.5 var(--sp-f); }
  & .sg-note-t small { margin-top: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, transparent); justify-self: start; }
  & .sg-note-t:not(:has(b)) p { padding-top: 1px; }
}

@media (max-width: 860px) {
  :root[data-design="sphere"] {
    & .en { grid-template-rows: auto 1fr; min-height: 100dvh; }
    /* полотнище — шапка: невысокое, сетка нарядов точками (подписи на телефоне не читаются) */
    & .en-flag { padding: 18px 16px 0 26px; }
    & .en-pole { left: 20px; top: 10px; bottom: -14px; height: auto; width: 5px; }
    & .en-pole::before { width: 13px; height: 13px; margin-left: -6.5px; top: -6px; }
    & .en-cloth { --hw: 10px; gap: 14px; max-height: none; padding: 18px 22% 16px calc(var(--hw) + 18px); clip-path: polygon(0 0, 100% 0, 84% 50%, 100% 100%, 0 100%); }
    & .en-brand .logo { width: 28px; height: 28px; }
    & .en-brand b { font-size: 19px; }
    & .en-grid .la-grid { gap: 3px; }
    & .en-grid .la-cell { border-radius: 3px; aspect-ratio: 1.5; }
    & .en-grid .la-cell i { width: 70%; height: 64%; border-radius: 2px; font-size: 0; color: transparent; }
    & .en-foot { display: none; }
    & .en-side { position: relative; z-index: 1; gap: 0; padding: 30px 20px calc(18px + env(safe-area-inset-bottom)); }
    & .en-note { max-width: none; margin: 0; }
    & .en-note.on { margin-bottom: 24px; }
    & .en-note.on + .login-form { margin-top: 0; }
    & .en .login-form { max-width: none; gap: 14px; }
    & .en .lf-head { margin-bottom: 4px; }
    & .en .lf-head h1 { font-size: 34px; }
    & .en .lf-head p { margin-top: 8px; font-size: 14.5px; }
    & .en .login-form input { height: 52px; border-radius: 16px; }
    & .en .pw .eye { top: 7px; }
    & .en .login-form .btn.primary { height: 56px; margin-top: 6px; }
    & .en .lf-note { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--mute); }
    & .en-end { max-width: none; margin-top: 28px; padding-top: 12px; }
    & .en-links { order: 0; flex-wrap: nowrap; }
    & .en .lf-sign { order: 0; }
    & .sg-note { padding: 14px 16px 14px 14px; border-radius: 22px; gap: 12px; }
    & .sg-note .sg-flag { width: 36px; height: 28px; }
    & .sg-note-t p { font-size: 13.5px; }
  }
}

/* свёрнутая плавающая кнопка: drop-shadow поверх clip-path рисовал квадрат — у круга обычная тень */
:root[data-design="sphere"] .sp-fab.mini, :root[data-design="sphere"] body[data-sec="month"] .sp-fab:not(.mini):not(:hover) {
  clip-path: none; filter: none; box-shadow: 0 6px 16px rgba(21, 39, 63, .18), 0 1px 3px rgba(21, 39, 63, .1); }

/* ---------- «Повестка»: объявления — карточки с шапкой, «На заметку» — один список ---------- */
:root[data-design="sphere"] {
  & .ag-todo { gap: 0; padding: 6px; border-radius: 28px; background: var(--panel); box-shadow: var(--sh-1); }
  & .ag-t { position: relative; gap: 14px; padding: 12px 12px 12px 14px; border-radius: 22px; background: none; }
  & .ag-t + .ag-t::before { content: ""; position: absolute; top: 0; left: 68px; right: 16px; height: 1px; background: var(--line); }
  & .ag-t:hover { transform: none; background: color-mix(in srgb, var(--c) 8%, var(--panel)); }
  & .ag-t:hover::before, & .ag-t:hover + .ag-t::before { opacity: 0; }
  & .ag-t .ag-flag { width: 40px; height: 30px; padding-right: 7px; }
  & .ag-t-t b { font: 600 15px/1.3 var(--sp-f); }
  & .ag-t-go { gap: 2px; padding: 8px 10px 8px 14px; background: color-mix(in srgb, var(--c) 10%, var(--panel)); }

  & .ag-posts { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
  & .ag-post { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 18px 20px; border-radius: 28px; background: color-mix(in srgb, var(--c) 8%, var(--panel)); box-shadow: none; }
  & .ag-post.pin { padding: 18px 22px 24px; background: color-mix(in srgb, var(--c) 13%, var(--panel)); }
  & .ag-p-h { display: flex; align-items: center; gap: 12px; min-height: 36px; margin-bottom: 2px; }
  & .ag-post .ag-flag { width: 40px; height: 30px; padding-right: 7px; margin: 0; }
  & .ag-p-by { display: grid; gap: 2px; flex: 1; min-width: 0; }
  & .ag-p-by b { font: 600 13.5px/1.2 var(--sp-f); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  & .ag-p-by small { font: 500 12px/1.2 var(--sp-f); color: var(--mute); }
  & .ag-p-x { position: static; flex: none; margin: -4px -8px -4px auto; }
  & .ag-post h3 { margin: 0; font: 700 19px/1.2 var(--sp-f); letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; text-wrap: pretty; }
  & .ag-post.pin h3 { font-size: 25px; letter-spacing: -.03em; }
  & .ag-post > p { margin: 0; font: 500 15px/1.5 var(--sp-f); color: var(--ink2); white-space: pre-line; overflow-wrap: anywhere; }
  & .ag-p-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  & .ag-p-tag { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px 0 9px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, transparent); font: 600 12px/1 var(--sp-f); color: color-mix(in srgb, var(--c) 75%, var(--ink)); }
  & .ag-p-tag.pin { background: var(--c); color: #fff; }
  &[data-theme="dark"] .ag-p-tag:not(.pin) { color: color-mix(in srgb, var(--c) 35%, #fff); }
  & .ag-c-pv .ag-post { box-shadow: var(--sh-1); }

  /* «На телефоне»: заголовок не серый */
  & .ag-phone h3 { color: inherit; }
}

@media (max-width: 760px) {
  :root[data-design="sphere"] {
    & .ag .pg-head { flex-direction: row; align-items: flex-start; justify-content: space-between; }
    & .ag .pg-head .btn.primary { flex: none; height: 44px; padding: 0 16px 0 12px; }
    & .ag-body { gap: 28px; }
    & .ag-h { font-size: 20px; margin-bottom: 12px; }
    & .ag-watch { --hw: 8px; gap: 16px; padding: 20px 40px 22px calc(var(--hw) + 16px); border-radius: 0 0 0 0; clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 50%, 100% 100%, 0 100%); }
    & .ag-w-head h2 { font-size: 28px; }
    & .ag-w-when { margin-top: 6px; font-size: 13.5px; }
    & .ag-w-tabs button { height: 32px; padding: 0 14px; }
    & .ag-w-list { gap: 2px; }
    & .ag-w-row { grid-template-columns: 44px minmax(0, 1fr) auto; min-height: 38px; padding: 0 6px 0 0; }
    & .ag-form { padding: 22px 20px; border-radius: 28px; gap: 12px; }
    & .ag-f-n b { font-size: 56px; }
    & .ag-f-g { grid-template-columns: 22px minmax(0, 1fr) 24px; gap: 8px; }
    & .ag-t { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 12px 8px 12px 10px; }
    & .ag-t + .ag-t::before { left: 62px; }
    & .ag-t-t small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    & .ag-t-go { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; background: none; color: var(--faint); }
    & .ag-t-go > span { display: none; }
    &[data-theme="dark"] .ag-t-go { background: none; color: var(--faint); }
    & .ag-post { padding: 14px 16px 18px; border-radius: 24px; }
    & .ag-post.pin { padding: 16px 18px 20px; }
    & .ag-post.pin h3 { font-size: 22px; }
    & .ag-post h3 { font-size: 18px; }
    & .ag-post > p { font-size: 14.5px; }
    & .ag-ev, & .ag-phone { border-radius: 28px; padding: 22px; }
    & .ag-rel { border-radius: 28px; grid-template-rows: 150px auto; }
    & .ag-rel-t h3 { font-size: 21px; }
    & .ag-quiet, & .ag-quiet-box { border-radius: 22px; padding: 16px 18px; }
    & .ag-quiet-box { flex-direction: column; align-items: flex-start; gap: 10px; }
  }
}

/* ---------- график на телефоне: панель в две строки, столбцы дней ровно по 38px ---------- */
@media (max-width: 760px) {
  :root[data-design="sphere"] {
    & .mo { height: calc(100dvh - 60px - 76px - env(safe-area-inset-bottom)); }
    & .mo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin: 2px 10px 8px; padding: 8px; border-radius: 26px; }
    & .mo-bar .mb-where { display: contents; }
    & .mo-bar .mo-title { order: 1; flex: 1 1 auto; width: auto; justify-content: flex-start; gap: 2px; min-width: 0; }
    & .mo-bar .mo-title h1 { flex: 1; justify-content: center; font-size: 21px; gap: 7px; min-width: 0; }
    & .mo-bar .mo-title .yr { font-size: 15px; }
    & .mo-bar .mo-title .ibtn { width: 34px; height: 34px; }
    & .mo-bar .mo-title h1 { font-size: 20px; }
    & .mo-bar .mb-today { display: none; }
    & .mo-bar .stage { order: 2; height: 34px; padding: 0 12px 0 11px; gap: 7px; }
    & .mo-bar .stage b { font-size: 13px; }
    & .mo-bar .stage .ico { display: none; }
    & .mo-bar .pilot-tag { order: 3; }
    & .mo-bar .mb-view { order: 4; flex: 1 1 auto; gap: 4px; padding: 0; min-width: 0; }
    & .mo-bar .mo-acts { order: 5; display: flex; gap: 4px; margin-left: auto; }
    & .mo-bar .view-seg { height: 38px; }
    & .mo-bar .view-seg button { width: 38px; }
    & .mo-bar .mb-grp { height: 38px; padding: 0 8px 0 10px; gap: 3px; }
    & .mo-bar .mb-grp > span:not(.gn) { display: none; }
    & .mo-bar .mb-search { flex: none; }
    & .mo-bar .mb-search.open { position: absolute; z-index: 5; left: 8px; right: 8px; top: 8px; }
    & .mo-bar { position: relative; }
    & .mo-bar .tg { height: 38px; }
    & .mo-bar .tg-b { width: 38px; }
    & .mo-bar .mb-dem { display: none; }
    & .mo-bar .mb-more, & .mo-bar .mb-sb { width: 38px; height: 38px; }
    & .mo-bar .mo-acts .btn.primary, & .mo-bar .mo-acts > .btn:not(.ghost):not(.issues) { order: 9; flex: 1 0 100%; height: 44px; justify-content: center; }
    & .mo-bar .mo-acts:has(.btn.primary, .btn:not(.ghost):not(.issues)) { flex-wrap: wrap; flex-basis: 100%; justify-content: flex-end; }
    & .mo-bar .btn.issues { height: 38px; padding: 0 10px; }

    & .mo-work { margin: 0 10px 8px; border-radius: 26px; }
    & table.mx { width: 0; }
    & .mx col.c-nm { width: 114px; }
    & .mx col { width: 38px; }
    & .mx col.c-sum { width: 34px; }
    & .mx th.nm button { padding: 0 6px 0 12px; font-size: 13px; }
    & .mx th.nm .nm-r { display: none; }
    & .mx th.corner span { padding: 0 10px 10px 12px; font-size: 11.5px; }
    & .mx th.dh .dw { font-size: 10px; }
    & .mx th.dh .dn { font-size: 14px; }
    & .mx tbody td > .mk, & .mx tfoot td > .mk { inset: 4px 2px; font-size: 10.5px; letter-spacing: -.01em; }
    & .mx tbody td:hover > .mk { transform: none; box-shadow: none; }
    & .mx .gsec-in { padding-left: 12px; }
  }
}

/* ---------- «Люди» на телефоне: таблица превращается в список — ФИО в строку, группа, наряды месяца, «сейчас» ---------- */
@media (max-width: 760px) {
  :root[data-design="sphere"] {
    & .ppl .pg-head { flex-direction: column; align-items: stretch; }
    & .ppl .pg-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    & .ppl .pg-acts .btn { height: 44px; justify-content: center; padding: 0 12px; }
    & .ppl .tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-bottom: 14px; }
    & .ppl .tools .grp-seg { flex-wrap: nowrap; grid-column: 1 / -1; overflow-x: auto; scrollbar-width: none; justify-self: start; max-width: 100%; }
    & .ppl .tools .sp { display: none; }
    & .ppl .pp-sum { grid-template-columns: 1fr 1fr; gap: 0; padding: 4px; border-radius: 24px; }
    & .ppl .pp-sum > div { flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; background: none; }
    & .ppl .pp-sum b { font-size: 26px; }
    & .ppl .pp-sum span { font-size: 12.5px; line-height: 1.3; }
    & .ppl .tbl-wrap { overflow: visible; border-radius: 24px; padding: 4px 0; }
    & .ppl .tbl, & .ppl .tbl tbody { display: block; width: 100%; }
    & .ppl .tbl thead { display: none; }
    & .ppl .tbl tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "g who m" "g now m"; align-items: center; gap: 1px 12px; padding: 9px 16px; border-top: 1px solid var(--line2); }
    & .ppl .tbl tbody tr:first-child { border-top: 0; }
    & .ppl .tbl tbody td { display: block; padding: 0; border: 0; min-width: 0; }
    & .ppl .tbl tbody td:not(.pp-who, .pp-g, .pp-m, .pp-now) { display: none; }
    & .ppl td.pp-who { grid-area: who; }
    & .ppl td.pp-who .who { display: flex; align-items: center; gap: 8px; min-width: 0; }
    & .ppl td.pp-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; }
    & .ppl td.pp-who .tag { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 10px; line-height: 1; }
    & .ppl td.pp-g { grid-area: g; }
    & .ppl td.pp-g .hide-sm { display: none; }
    & .ppl td.pp-g .gn { width: 30px; height: 30px; font-size: 13px; }
    & .ppl td.pp-now { grid-area: now; }
    & .ppl td.pp-now .state { font-size: 12.5px; color: var(--mute); }
    & .ppl td.pp-m { grid-area: m; justify-self: end; text-align: right; }
    & .ppl td.pp-m .month-n { justify-content: flex-end; gap: 6px; margin: 0; }
    & .ppl td.pp-m .month-n b { font-size: 17px; }
    & .ppl td.pp-m .nb { width: 34px; }
    & .ppl td.pp-m .pp-strip { display: none; }
    & .ppl .tbl tfoot { display: block; padding: 10px 16px 6px; font-size: 13px; color: var(--mute); }
    & .ppl .tbl tfoot tr, & .ppl .tbl tfoot td { display: block; padding: 0; border: 0; }
  }
}

/* ---------- «Отсутствия» на телефоне ---------- */
@media (max-width: 760px) {
  :root[data-design="sphere"] {
    & .ab-head { flex-direction: column; gap: 16px; margin-bottom: 16px; }
    & .ab-title .pg-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    & .ab-ctl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; width: 100%; }
    & .ab-nav { grid-column: 1 / -1; display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px auto; gap: 6px; }
    & .ab-nav .ibtn { width: 40px; height: 52px; border-radius: 16px; background: var(--sp-c2); }
    & .ab-date { min-width: 0; height: 52px; justify-content: center; padding: 0 30px 0 16px; box-shadow: none; border: 0; background: var(--panel); box-shadow: var(--sh-1); }
    & .ab-nav .btn.ghost.sm { height: 52px; border-radius: 16px; }
    & .ab-ctl .seg.sm { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; justify-self: start; }
    & .ab-ctl .seg.sm button { min-width: 38px; }
    & .ab-add { height: 44px; padding: 0 16px 0 12px; }
    & :is(.ab-card, .ab-roll, .ab-needs, .ab-out, .ab-tl) { padding: 18px 16px; border-radius: 26px; }
    & .ab-main { gap: 14px; }
    & .ab-sh { flex-wrap: wrap; row-gap: 2px; }
    & .ab-roll > .ab-sh .btn { margin-left: auto; }
    & .ab-nums { gap: 6px; }
    & .ab-nums > div { padding: 10px 12px; border-radius: 18px; }
    & .ab-nums span { font-size: 11.5px; }
    & .ab-nums b { font-size: 26px; }
    & .ab-nums small { font-size: 11px; line-height: 1.3; }
    & .ab-gt { margin: 0 -16px; padding: 0 16px; width: calc(100% + 32px); max-width: none; }
    & .ab-row { flex-wrap: wrap; row-gap: 4px; padding: 8px 0; }
    & .ab-acts { width: 100%; justify-content: flex-start; gap: 6px; padding-left: 16px; }
    & .ab-acts .btn.sm { height: 34px; padding: 0 12px; border-radius: 999px; background: var(--sp-c1); }
    & .ab-acts .btn.sm.ab-x { min-width: 44px; justify-content: center; }
    & .ab-acts > .ibtn:last-child { margin-left: auto; }
    & .ab-sl li { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 8px; padding: 9px 2px; }
    & .ab-sd b { font-size: 13.5px; }
    & .ab-sd span { font-size: 11px; white-space: nowrap; }
    & .ab-sn { gap: 6px; }
    & .ab-sn > :not(.gn) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    & .ab-sn { white-space: nowrap; overflow: hidden; }
    & .ab-sr { font-size: 11px; padding: 4px 9px; }
    & .ab-tlg { --nm: 104px; }
    & .ab-tlw { margin: 0; padding: 0; }
  }
}

/* календарь отсутствий: столбец имён закреплён, даты листаются под ним */
:root[data-design="sphere"] {
  & .ab-tln { position: sticky; left: 0; z-index: 3; background: var(--panel); }
  & .ab-tlh > span:nth-child(odd) { position: sticky; left: 0; z-index: 3; background: var(--panel); }
}

/* ---------- «Руководство» и «Обновления» на телефоне ---------- */
@media (max-width: 760px) {
  :root[data-design="sphere"] {
    & .gx-cover { min-height: 0; border-radius: 28px; }
    & .gx-cover-in { padding: 30px 22px 26px calc(var(--hw) + 18px); gap: 14px; }
    & .gx-cover h1 { font-size: 46px; }
    & .gx-cover p { font-size: 16px; }
    & .gx-ch { padding: 22px 18px 24px; border-radius: 28px; }
    & .gx-ch-h { flex-direction: column; align-items: flex-start; gap: 14px; }
    & .gx-num { width: 58px; height: 42px; padding: 0 12px 0 8px; font-size: 18px; }
    & .gx-num::before { box-shadow: inset 6px 0 0 var(--sp-red); }
    & .gx-ch-h h2 { font-size: 28px; }
    & .gx-ch-h p { font-size: 15px; line-height: 1.5; }
    & .ab-feats { grid-template-columns: 1fr; gap: 8px; }
    & .ab-f { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; padding: 16px; }
    & .ab-f .ab-f-i { grid-row: span 2; margin: 0; }
    & .ab-f b { margin: 0; }
    & .ab-f p { margin: 4px 0 0; }
  }
}
@media (max-width: 760px) {
  :root[data-design="sphere"] {
    & .nx-cov { height: 480px; }
    & .nx-cov-t { left: calc(8% + 26px); right: 7%; bottom: 7%; gap: 12px; }
    & .nx-cov-t h1 { font-size: 46px; }
    & .nx-cov-t p { font-size: 15px; line-height: 1.45; }
    & .nx-open { width: 46px; height: 46px; padding: 0; justify-content: center; gap: 0; font-size: 0; }
    & .nx-open .ico { margin: 0; }
  }
}

/* ---------- штаб на телефоне: строки реестра — номер флажком слева, сведения справа ---------- */
@media (max-width: 760px) {
  :root[data-design="sphere"] {
    & body.is-hq .hq-row { grid-template-columns: 58px minmax(0, 1fr) 18px; gap: 6px 14px; padding: 12px 8px 14px 4px; border-radius: 24px; }
    & body.is-hq .hq-row-n { width: 58px; height: 44px; padding: 0 10px 0 6px; font-size: 19px; }
    & body.is-hq .hq-row.add .hq-row-n { grid-row: span 2; }
    & body.is-hq .hq-row-t b { font-size: 16px; }
    & body.is-hq .hq-row-t small { display: block; margin-top: 3px; line-height: 1.35; }
    & body.is-hq .hq-row-c small { white-space: nowrap; }
    & body.is-hq .hq-row .hq-pay { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
    & body.is-hq .hq-more { white-space: nowrap; flex: none; }
    & body.is-hq .hq-part-h, & body.is-hq .hq-part > header { gap: 12px; }
  }
}
@media (max-width: 760px) {
  :root[data-design="sphere"] {
    & body.is-hq .hq-unit { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 18px; margin: 14px 0 20px; }
    & body.is-hq .hq-unit-n b { font-size: 72px; }
    & body.is-hq .hq-unit-n { gap: 10px; grid-row: span 2; }
    & body.is-hq .hq-page { padding: 18px 16px 80px; }
    & body.is-hq .hq-unit-t h1 { margin-top: 4px; font-size: 26px; }
    & body.is-hq .hq-dl { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin: 6px 0 0; padding: 14px 16px; border-radius: 22px; background: var(--panel); box-shadow: var(--sh-1); }
    & body.is-hq .hq-unit-t { display: contents; }
    & body.is-hq .hq-unit-t > :not(.hq-dl) { grid-column: 2; }
    & body.is-hq .hq-dl div { padding: 0; margin: 0; border: 0; min-width: 0; }
    & body.is-hq .hq-dl dd { margin-top: 5px; overflow-wrap: anywhere; }
    & body.is-hq .hq-unit-a { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 0; }
    & body.is-hq .hq-utabs { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
    & body.is-hq .hq-utabs::-webkit-scrollbar { display: none; }
  }
}