/*! progressive 0.4.0 - дизайн-система Tabium. сгенерировано `progressive build` - руками не править.
    Порядок: гаммы, затем core/css/*.css по номеру файла. */

/* ==================================================================
   Гаммы: 7 x 2 темы из core/tokens.json (сгенерировано `progressive build` - руками не править).
   <html data-palette="код" data-theme="dark">; без атрибутов - suppper, светлая.
   ================================================================== */
/* Suppper: шалфей / терракота / золото; базовая */
:root, [data-palette="suppper"] {
  --bg:#f5f7f9; --surface:#ffffff; --surface-2:#fafbfc; --hairline:#eceef2; --hairline-soft:#f2f4f7; --ink:#0c121f; --ink-2:#121824; --on-ink:#ffffff;
  --text-1:#212936; --text-2:#4d5562; --text-3:#666f7f;
  --green:#5c876b; --green-strong:#466b54; --green-text:#466b54; --green-fill:#466b54; --green-tint:#e3efe6; --green-wash:#edf5ef; --green-on:#ffffff;
  --red:#ce4a3a; --red-strong:#b23c2d; --red-text:#b23c2d; --red-fill:#ca4838; --red-tint:#f8e4e1; --red-wash:#fdf0ee; --red-on:#ffffff;
  --gold:#d9a866; --gold-strong:#85673a; --gold-tint:#faf2da; --gold-line:#c3b971;
  --spark-pos:#5c876b; --spark-neg:#ce4a3a;
  --series-1:#3370ac; --series-2:#9f9508; --series-3:#8573d2; --series-4:#933822; --series-5:#2f9bc6; --series-6:#946304; --series-7:#644098; --series-8:#3a7107;
}
[data-theme="dark"]:not([data-palette]), [data-palette="suppper"][data-theme="dark"] {
  --bg:#0e1116; --surface:#161a21; --surface-2:#1b2029; --hairline:#262c36; --hairline-soft:#1f242d; --ink:#2a323f; --ink-2:#232a35; --on-ink:#ffffff;
  --text-1:#e6eaf0; --text-2:#a7b0bf; --text-3:#7e8998;
  --green:#7fae8d; --green-strong:#9cc7a8; --green-text:#7fae8d; --green-fill:#7fae8d; --green-tint:#1b2a21; --green-wash:#16241c; --green-on:#0e1116;
  --red:#e0705f; --red-strong:#ee8878; --red-text:#e0705f; --red-fill:#8e3a2d; --red-tint:#2e1c19; --red-wash:#271715; --red-on:#0e1116;
  --gold:#e0b87e; --gold-strong:#edcb97; --gold-tint:#2b2317; --gold-line:#7a6438;
  --spark-pos:#7fae8d; --spark-neg:#e0705f;
  --series-1:#2472b8; --series-2:#726c0f; --series-3:#9082d9; --series-4:#ae472e; --series-5:#06a0d2; --series-6:#aa7826; --series-7:#7a56b1; --series-8:#5e913e;
}
/* Графит: почти монохром: сталь и охра */
[data-palette="graphite"] {
  --bg:#f3f4f6; --surface:#ffffff; --surface-2:#f9fafb; --hairline:#e5e7eb; --hairline-soft:#f0f1f3; --ink:#14181d; --ink-2:#1a1f26; --on-ink:#ffffff;
  --text-1:#1c2127; --text-2:#4b5563; --text-3:#656e7b;
  --green:#4a7c6b; --green-strong:#35604f; --green-text:#35604f; --green-fill:#35604f; --green-tint:#e2edea; --green-wash:#eef4f2; --green-on:#ffffff;
  --red:#b04a3e; --red-strong:#8f3a30; --red-text:#8f3a30; --red-fill:#b04a3e; --red-tint:#f2e4e1; --red-wash:#f9efed; --red-on:#ffffff;
  --gold:#a98a53; --gold-strong:#7c6536; --gold-tint:#f1ebdd; --gold-line:#b9a57a;
  --spark-pos:#4a7c6b; --spark-neg:#b04a3e;
  --series-1:#1aa0ba; --series-2:#928101; --series-3:#86509d; --series-4:#c88141; --series-5:#29649d; --series-6:#4e5d05; --series-7:#7275ca; --series-8:#4ba563;
}
[data-palette="graphite"][data-theme="dark"] {
  --bg:#0d0f12; --surface:#15181c; --surface-2:#191d22; --hairline:#242930; --hairline-soft:#1d2128; --ink:#2b3139; --ink-2:#242a31; --on-ink:#ffffff;
  --text-1:#e7e9ec; --text-2:#a3aab4; --text-3:#7f8693;
  --green:#6fa593; --green-strong:#8dc0ae; --green-text:#6fa593; --green-fill:#6fa593; --green-tint:#18251f; --green-wash:#14201b; --green-on:#0d0f12;
  --red:#cd6d5f; --red-strong:#dd877a; --red-text:#cd6d5f; --red-fill:#7d342b; --red-tint:#281a17; --red-wash:#221614; --red-on:#0d0f12;
  --gold:#c4a771; --gold-strong:#d8bf8f; --gold-tint:#24201a; --gold-line:#6b5c3c;
  --spark-pos:#6fa593; --spark-neg:#cd6d5f;
  --series-1:#008aa2; --series-2:#a5931e; --series-3:#854f9c; --series-4:#99560d; --series-5:#1f6cb0; --series-6:#718516; --series-7:#858ad5; --series-8:#217c3f;
}
/* Бумага: тёплый архив: оливка, кирпич, охра */
[data-palette="paper"] {
  --bg:#f6f3ee; --surface:#fffdfa; --surface-2:#faf7f2; --hairline:#e8e2d8; --hairline-soft:#f0ebe3; --ink:#1f1b16; --ink-2:#272119; --on-ink:#fdfbf7;
  --text-1:#2a241d; --text-2:#5a5045; --text-3:#766c61;
  --green:#5f7a52; --green-strong:#47603c; --green-text:#47603c; --green-fill:#47603c; --green-tint:#e6eddf; --green-wash:#eef3e9; --green-on:#fffdfa;
  --red:#b5533f; --red-strong:#93402f; --red-text:#93402f; --red-fill:#b5533f; --red-tint:#f6e3dc; --red-wash:#faeee9; --red-on:#fffdfa;
  --gold:#b08843; --gold-strong:#82642e; --gold-tint:#f5ebd5; --gold-line:#c9ae77;
  --spark-pos:#5f7a52; --spark-neg:#b5533f;
  --series-1:#81420b; --series-2:#2a9eb6; --series-3:#90365f; --series-4:#7289d4; --series-5:#62a354; --series-6:#7d55a6; --series-7:#a68934; --series-8:#386aa9;
}
[data-palette="paper"][data-theme="dark"] {
  --bg:#12100d; --surface:#1a1713; --surface-2:#1f1b16; --hairline:#2c261e; --hairline-soft:#231f19; --ink:#332c22; --ink-2:#2b251d; --on-ink:#fdfbf7;
  --text-1:#ece5da; --text-2:#b0a596; --text-3:#8e8477;
  --green:#8aa67a; --green-strong:#a5bd96; --green-text:#8aa67a; --green-fill:#8aa67a; --green-tint:#1d2418; --green-wash:#191f15; --green-on:#12100d;
  --red:#d07d67; --red-strong:#e09580; --red-text:#d07d67; --red-fill:#82392a; --red-tint:#2a1c16; --red-wash:#231713; --red-on:#12100d;
  --gold:#d0a862; --gold-strong:#e2c085; --gold-tint:#272016; --gold-line:#6e5b34;
  --spark-pos:#8aa67a; --spark-neg:#d07d67;
  --series-1:#9b5316; --series-2:#0ea3be; --series-3:#9b496c; --series-4:#758dde; --series-5:#407933; --series-6:#7f57a9; --series-7:#9c7d17; --series-8:#4077bc;
}
/* Лагуна: тил / коралл / янтарь; лучше всех держит графики */
[data-palette="teal"] {
  --bg:#f2f5f8; --surface:#ffffff; --surface-2:#f8fafc; --hairline:#e2e8f0; --hairline-soft:#eef2f7; --ink:#0f1b2a; --ink-2:#142235; --on-ink:#ffffff;
  --text-1:#172231; --text-2:#465468; --text-3:#627084;
  --green:#2f7d72; --green-strong:#1f5d55; --green-text:#1f5d55; --green-fill:#1f5d55; --green-tint:#dcecea; --green-wash:#e8f3f1; --green-on:#ffffff;
  --red:#c1554e; --red-strong:#9f3f38; --red-text:#9f3f38; --red-fill:#bd534c; --red-tint:#f6e2e0; --red-wash:#fbeeec; --red-on:#ffffff;
  --gold:#c99a4e; --gold-strong:#86652e; --gold-tint:#f7edd9; --gold-line:#d4b577;
  --spark-pos:#2f7d72; --spark-neg:#c1554e;
  --series-1:#329ed3; --series-2:#8f9a2d; --series-3:#9084d4; --series-4:#c17e1a; --series-5:#6c3b8c; --series-6:#787904; --series-7:#4c73d0; --series-8:#942442;
}
[data-palette="teal"][data-theme="dark"] {
  --bg:#0a1119; --surface:#111a25; --surface-2:#16202c; --hairline:#1f2b3a; --hairline-soft:#192433; --ink:#233346; --ink-2:#1c2a3a; --on-ink:#ffffff;
  --text-1:#e3ebf4; --text-2:#9fb0c4; --text-3:#788aa0;
  --green:#5fa79c; --green-strong:#83c3b8; --green-text:#5fa79c; --green-fill:#5fa79c; --green-tint:#122622; --green-wash:#0f201d; --green-on:#0a1119;
  --red:#d9776e; --red-strong:#e89287; --red-text:#d9776e; --red-fill:#8a3a34; --red-tint:#2a1a19; --red-wash:#231514; --red-on:#0a1119;
  --gold:#dcae6b; --gold-strong:#ebc68e; --gold-tint:#272016; --gold-line:#77603a;
  --spark-pos:#5fa79c; --spark-neg:#d9776e;
  --series-1:#1379a6; --series-2:#909b27; --series-3:#6958b1; --series-4:#af700e; --series-5:#a36cc9; --series-6:#6d6e0a; --series-7:#658eed; --series-8:#9f4a5a;
}
/* Сапфир: синий только в роли ink; представительская */
[data-palette="sapphire"] {
  --bg:#f4f6fb; --surface:#ffffff; --surface-2:#f9fafd; --hairline:#e3e8f2; --hairline-soft:#eff2f8; --ink:#1a3a6e; --ink-2:#16325e; --on-ink:#ffffff;
  --text-1:#1a2540; --text-2:#47536f; --text-3:#626e8b;
  --green:#4e8071; --green-strong:#37604f; --green-text:#37604f; --green-fill:#37604f; --green-tint:#e0ede8; --green-wash:#ecf4f1; --green-on:#ffffff;
  --red:#c24d46; --red-strong:#9e3a34; --red-text:#9e3a34; --red-fill:#c24d46; --red-tint:#f7e3e1; --red-wash:#fcefed; --red-on:#ffffff;
  --gold:#c79a55; --gold-strong:#85672e; --gold-tint:#f8efdb; --gold-line:#d1b57e;
  --spark-pos:#4e8071; --spark-neg:#c24d46;
  --series-1:#3962b0; --series-2:#1e6706; --series-3:#d672b7; --series-4:#893a0e; --series-5:#7d6bcb; --series-6:#9a8918; --series-7:#5596e9; --series-8:#8d1e72;
}
[data-palette="sapphire"][data-theme="dark"] {
  --bg:#080d18; --surface:#101728; --surface-2:#151d32; --hairline:#202a42; --hairline-soft:#1a2236; --ink:#2f5290; --ink-2:#28477d; --on-ink:#ffffff;
  --text-1:#e4eaf6; --text-2:#9fadcc; --text-3:#7887a4;
  --green:#6fa894; --green-strong:#8fc4b0; --green-text:#6fa894; --green-fill:#6fa894; --green-tint:#14241f; --green-wash:#10201b; --green-on:#080d18;
  --red:#d9756c; --red-strong:#e88f85; --red-text:#d9756c; --red-fill:#8a3830; --red-tint:#2a1918; --red-wash:#231413; --red-on:#080d18;
  --gold:#d9ae70; --gold-strong:#e9c694; --gold-tint:#26201a; --gold-line:#74603a;
  --spark-pos:#6fa894; --spark-neg:#d9756c;
  --series-1:#5077bf; --series-2:#2a810f; --series-3:#d264b2; --series-4:#a74914; --series-5:#8b74e9; --series-6:#958519; --series-7:#3f93f7; --series-8:#954a7f;
}
/* Ультрамарин: монохром: цвет кодирует вес, не вердикт */
[data-palette="ultramarine"] {
  --bg:#f2f5fa; --surface:#ffffff; --surface-2:#f7f9fd; --hairline:#e1e8f3; --hairline-soft:#edf1f8; --ink:#14284f; --ink-2:#101f3f; --on-ink:#ffffff;
  --text-1:#16233d; --text-2:#445274; --text-3:#606e8f;
  --green:#2e7fa6; --green-strong:#1f6288; --green-text:#1f6288; --green-fill:#1f6288; --green-tint:#e6f2f8; --green-wash:#eff7fa; --green-on:#ffffff;
  --red:#3b4e9c; --red-strong:#2c3c80; --red-text:#2c3c80; --red-fill:#3b4e9c; --red-tint:#d8dcef; --red-wash:#e7eaf7; --red-on:#ffffff;
  --gold:#6e86b8; --gold-strong:#48598a; --gold-tint:#eaedf7; --gold-line:#98a9cf;
  --spark-pos:#2e7fa6; --spark-neg:#3b4e9c;
  --series-1:#6a8df3; --series-2:#b96597; --series-3:#3347b2; --series-4:#04a0b4; --series-5:#7940ad; --series-6:#88383b; --series-7:#147abe; --series-8:#b4305c;
}
[data-palette="ultramarine"][data-theme="dark"] {
  --bg:#070c16; --surface:#0f1626; --surface-2:#141d31; --hairline:#1e293f; --hairline-soft:#182133; --ink:#22375f; --ink-2:#1c2e52; --on-ink:#ffffff;
  --text-1:#e2e9f6; --text-2:#9cacc9; --text-3:#7687a4;
  --green:#5fa8c8; --green-strong:#85c3dc; --green-text:#5fa8c8; --green-fill:#5fa8c8; --green-tint:#0f2430; --green-wash:#0c1d27; --green-on:#070c16;
  --red:#7186d0; --red-strong:#93a4e0; --red-text:#7186d0; --red-fill:#3b46a3; --red-tint:#1a1f3c; --red-wash:#14182f; --red-on:#070c16;
  --gold:#8296c4; --gold-strong:#a2b2d8; --gold-tint:#171c2b; --gold-line:#43527d;
  --spark-pos:#5fa8c8; --spark-neg:#7186d0;
  --series-1:#668af9; --series-2:#bc719c; --series-3:#455dca; --series-4:#19a4b7; --series-5:#8048b6; --series-6:#e55c63; --series-7:#2883c5; --series-8:#b14665;
}
/* Малахит: монохром: цвет кодирует вес, не вердикт */
[data-palette="malachite"] {
  --bg:#f1f6f2; --surface:#ffffff; --surface-2:#f6fbf7; --hairline:#dfeae2; --hairline-soft:#ecf3ee; --ink:#12301f; --ink-2:#0e2819; --on-ink:#ffffff;
  --text-1:#17281d; --text-2:#46584c; --text-3:#617367;
  --green:#3f8f64; --green-strong:#2b7050; --green-text:#2b7050; --green-fill:#2b7050; --green-tint:#e3f2e9; --green-wash:#eef7f1; --green-on:#ffffff;
  --red:#17614f; --red-strong:#0f4a3c; --red-text:#0f4a3c; --red-fill:#17614f; --red-tint:#d2e4dc; --red-wash:#e3efe9; --red-on:#ffffff;
  --gold:#8a9a4e; --gold-strong:#63712f; --gold-tint:#eef2dc; --gold-line:#a9b573;
  --spark-pos:#3f8f64; --spark-neg:#17614f;
  --series-1:#0b814a; --series-2:#3078cd; --series-3:#849839; --series-4:#2e99bd; --series-5:#ca8335; --series-6:#325693; --series-7:#1ea885; --series-8:#845802;
}
[data-palette="malachite"][data-theme="dark"] {
  --bg:#060d09; --surface:#0e1712; --surface-2:#131f18; --hairline:#1d2a22; --hairline-soft:#17211b; --ink:#1e3b2b; --ink-2:#193224; --on-ink:#ffffff;
  --text-1:#e2ede6; --text-2:#9bb2a3; --text-3:#778a7c;
  --green:#6fbe8e; --green-strong:#93d4ac; --green-text:#6fbe8e; --green-fill:#6fbe8e; --green-tint:#0f241a; --green-wash:#0c1d15; --green-on:#060d09;
  --red:#3fa98c; --red-strong:#62c2a6; --red-text:#3fa98c; --red-fill:#0d6350; --red-tint:#0c2620; --red-wash:#0a1f1a; --red-on:#060d09;
  --gold:#aebe72; --gold-strong:#c6d491; --gold-tint:#1c2116; --gold-line:#5c6a38;
  --spark-pos:#6fbe8e; --spark-neg:#3fa98c;
  --series-1:#2b7a4d; --series-2:#4c93eb; --series-3:#7b910b; --series-4:#0288ac; --series-5:#bf7516; --series-6:#3466ba; --series-7:#3ba888; --series-8:#8d5e00;
}
/* Кружки выбора гаммы */
.sw-suppper { background: linear-gradient(135deg, #5c876b 0 50%, #ce4a3a 50% 100%); }
.sw-graphite { background: linear-gradient(135deg, #4a7c6b 0 50%, #14181d 50% 100%); }
.sw-paper { background: linear-gradient(135deg, #5f7a52 0 50%, #b5533f 50% 100%); }
.sw-teal { background: linear-gradient(135deg, #2f7d72 0 50%, #0f1b2a 50% 100%); }
.sw-sapphire { background: linear-gradient(135deg, #4e8071 0 50%, #1a3a6e 50% 100%); }
.sw-ultramarine { background: linear-gradient(135deg, #2e7fa6 0 50%, #3b4e9c 50% 100%); }
.sw-malachite { background: linear-gradient(135deg, #8a9a4e 0 50%, #17614f 50% 100%); }

/* ==================================================================
   00 · База: шрифты, геометрия, тени, корень .progressive.
   Цвета гамм сюда не входят - их генерирует build из tokens.json.
   ================================================================== */

/* Семейства "... Variable", а не "Inter": одноимённый @font-face подменил бы
   шрифт у старых страниц проекта, где Inter стоит в системном стеке. */
@font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("fonts/inter-latin-wght-normal.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; }
@font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter Variable"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("fonts/inter-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "JetBrains Mono Variable"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("fonts/jetbrains-mono-latin-wght-normal.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; }
@font-face { font-family: "JetBrains Mono Variable"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono Variable"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url("fonts/jetbrains-mono-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

:root {
  --r-card: 14px;
  --r-ctl: 10px;
  --r-panel: 20px;
  --pad-card: 18px;
  --gap: 16px;

  --sh-card:  0 1px 2px rgb(16 24 40 / .04);
  --sh-raise: 0 4px 12px -2px rgb(16 24 40 / .08);
  --sh-panel: 0 16px 40px -12px rgb(16 24 40 / .18);
  --scrim: rgb(12 18 31 / .36);

  --font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(.32, .72, 0, 1);

  /* Контуры продукта красят панель и бейдж режима, а не контент */
  --contour-accent: var(--ink);
  --contour-on: var(--on-ink);
}
[data-theme="dark"] {
  --sh-card:  0 1px 2px rgb(0 0 0 / .4);
  --sh-raise: 0 4px 12px -2px rgb(0 0 0 / .5);
  --sh-panel: 0 16px 40px -12px rgb(0 0 0 / .6);
  --scrim: rgb(0 0 0 / .55);
}
[data-contour="studio"]  { --contour-accent: var(--gold); --contour-on: #111827; }
[data-contour="console"] { --contour-accent: var(--red-fill); --contour-on: #fff; }

/* Корень нового UI. Ставится на <body> (или контейнер переведённого экрана):
   глобальные body/a/* старые страницы проекта не задевают. */
.progressive {
  background: var(--bg); color: var(--text-1);
  font-family: var(--font-sans); font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.progressive, .progressive *, .progressive *::before, .progressive *::after { box-sizing: border-box; }
/* :where - нулевой вес: компоненты-ссылки (.chip, .pill, .btn) задают цвет сами */
:where(.progressive) a { color: inherit; }
:where(.progressive) :focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; }
body.progressive { margin: 0; }

/* hidden сильнее любого display у компонента */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .progressive *, .progressive *::before, .progressive *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Видимость по устройству. Точка перелома одна - 900px (планшет в портрете
   идёт по раскладке телефона). */
.only-mobile { display: none; }
@media (max-width: 900px) {
  .only-mobile { display: block; }
  .no-mobile { display: none !important; }
}

/* Иконки: Lucide (<i data-lucide>) или инлайн-SVG */
.ico   { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.75;
         stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico-l { width: 20px; height: 20px; }
.ico-s { width: 13px; height: 13px; }

/* ==================================================================
   10 · Типографика. Закон 1: цифры - моно, слова - пропорциональные.
   ================================================================== */
.mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.m-meta  { font: 500 11px/1.4 var(--font-mono); text-transform: uppercase;
           letter-spacing: .14em; color: var(--text-3); }
.m-label { font: 600 11px/1.4 var(--font-mono); text-transform: uppercase;
           letter-spacing: .12em; color: var(--text-2); }
.m-col   { font: 500 11px/1.4 var(--font-mono); text-transform: uppercase;
           letter-spacing: .1em; color: var(--text-3); }
.m-delta { font: 500 12px/1.4 var(--font-mono); color: var(--text-3);
           font-variant-numeric: tabular-nums; }
.m-num   { font: 500 13px/1.4 var(--font-mono); font-variant-numeric: tabular-nums;
           color: var(--text-1); }
.m-num-lg{ font: 500 15px/1.4 var(--font-mono); font-variant-numeric: tabular-nums;
           color: var(--text-1); }
.cap     { font: 600 12px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
kbd, .kbd { display: inline-block; min-width: 20px; padding: 2px 6px; border-radius: 6px;
           border: 1px solid var(--hairline); border-bottom-width: 2px; background: var(--surface);
           font: 500 11px/1.3 var(--font-mono); color: var(--text-2); text-align: center; }

/* Цвет числа - только этими классами: хардкод переживёт смену гаммы */
.is-green { color: var(--green-text); }
.is-red   { color: var(--red-text); }
.is-gold  { color: var(--gold-strong); }
.is-mut   { color: var(--text-3); }
.is-sec   { color: var(--text-2); }

.kpi-value { font: 700 32px/1.1 var(--font-sans); letter-spacing: -.02em; white-space: nowrap;
             font-variant-numeric: tabular-nums; color: var(--text-1); }
.kpi-unit  { font: 500 18px/1 var(--font-sans); color: var(--text-2); margin-left: 6px; }
.kpi-cur   { font: 500 12px/1 var(--font-sans); color: var(--text-2); margin-left: 2px; }

.h1 { font: 600 28px/1.15 var(--font-sans); letter-spacing: -.02em; margin: 0; overflow-wrap: anywhere; }
.h2 { font: 600 20px/1.2 var(--font-sans);  letter-spacing: -.01em; margin: 0; }
.h3 { font: 600 16px/1.3 var(--font-sans);  margin: 0; }
.muted { color: var(--text-3); }
.small { font-size: 13px; }

@media (max-width: 900px) {
  .kpi-value { font-size: 28px; }
  .h1 { font-size: 24px; }
}

/* ==================================================================
   20 · Раскладка: сетки, стопки, шапка страницы, мета-строка, линейка.
   ================================================================== */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.grid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.grid-auto { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
/* minmax(0, 1fr): колонка не растёт по min-content ряда контролов */
.stack    { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.stack-sm { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.ctl-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
           justify-content: space-between; margin-bottom: 14px; }
.nav-sep { height: 1px; background: var(--hairline); margin: 10px 4px; }

/* Шапка страницы: путь · заголовок · подпись · мета · действия справа */
.page-header { margin-bottom: 18px; }
.page-header .row { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }
.page-title { min-width: 0; }
.page-sub { margin-top: 5px; font-size: 14px; color: var(--text-2); }
.page-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.crumbs { margin-bottom: 6px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--text-1); }

/* Мета-строка: «· ОБЗОР · 12 ИЮЛ 2026 · МСК ●» и линейка под ней */
.meta-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.meta-dot  { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }
.meta-dot.ok  { background: var(--green); }
.meta-dot.bad { background: var(--red); }
.ruler { height: 6px; margin: 10px 0 18px; opacity: .5;
  background-image: repeating-linear-gradient(to right, var(--text-3) 0 1px, transparent 1px 84px);
  background-size: 84px 6px; background-repeat: repeat-x; }
.ruler--dense { background-image: repeating-linear-gradient(to right, var(--text-3) 0 1px, transparent 1px 12px);
  background-size: 12px 6px; }

.sec-head { display: flex; align-items: center; gap: 10px; margin: 28px 0 14px; flex-wrap: wrap; }
.sec-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }

/* Горизонтальная лента контролов (телефон): край в край, без полосы прокрутки */
.scroll-x { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x > * { flex: none; }

/* Средняя ширина (901-1200px): KPI-ряды в две колонки */
@media (min-width: 901px) and (max-width: 1200px) {
  .grid4, .grid5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
@media (max-width: 900px) {
  .grid5, .grid4, .grid3, .grid2, .split { grid-template-columns: minmax(0, 1fr); }
  /* .pair оставляет две колонки мелким парным карточкам */
  .grid5.pair, .grid4.pair, .grid2.pair, .grid-auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-header { margin-bottom: 12px; }
  .page-header .row { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-header .ctl-row { gap: 8px; }
  .page-header .ctl-row .btn { flex: 1 1 auto; justify-content: center; }
  .page-header .ctl-row .icon-only { flex: none; }
  .scroll-x { margin: 0 -16px; padding: 0 16px; }
  .sticky-ctl { position: sticky; top: 58px; z-index: 40; background: var(--bg); padding: 10px 0; margin: 0 0 4px; }
}
.sec-dot--green { background: var(--green); }
.sec-dot--red   { background: var(--red); }
.sec-acts { margin-left: auto; }

/* ==================================================================
   30 · Карточка, KPI, спарклайн, сводная полоса.
   Закон 3: акцент - заливкой, а не рамкой. Белая -> белая с полосой 2px
   -> залитая целиком. Утолщать границы нельзя.
   ================================================================== */
.card { background: var(--surface); border: 1px solid var(--hairline);
        border-radius: var(--r-card); box-shadow: var(--sh-card); padding: var(--pad-card); }
.card--flush { padding: 0; overflow: hidden; }
.card--green { border-top: 2px solid var(--green); }
.card--red   { border-top: 2px solid var(--red); }
.card--gold  { border-top: 2px solid var(--gold-line); }
.card--ink   { border-top: 2px solid var(--ink); }
a.card { display: block; text-decoration: none; transition: box-shadow .15s var(--ease); }
a.card:hover { box-shadow: var(--sh-raise); }

/* Заливка красным - только «действие сегодня»; на ней белый текст без
   полупрозрачности: 55-74% белого на красном не проходят AA. */
.card--filled-red { background: var(--red-fill); border-color: var(--red-fill); color: #fff; }
.card--filled-red :is(.m-label, .m-delta, .m-meta, .muted, .kpi-cur, .kpi-sub, .kpi-title, .card-sub,
  .kpi-value, .kpi-unit, .cap, .m-num, .h3, .is-sec) { color: #fff; }
.card--filled-red .is-green { color: #dff0e4; }
.card--filled-ink { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.card--filled-ink :is(.m-label, .m-meta, .m-delta, .kpi-cur, .kpi-sub, .kpi-title, .card-sub, .is-sec) { color: rgb(255 255 255 / .78); }
.card--filled-ink :is(.kpi-value, .kpi-unit, .cap, .m-num, .h3) { color: #fff; }
.card--filled-ink .is-green { color: color-mix(in srgb, var(--green) 55%, #fff); }
.card--filled-ink .is-red   { color: color-mix(in srgb, var(--red) 55%, #fff); }

.card-head { display: flex; align-items: center; justify-content: space-between;
             gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--hairline); }
.card-title { display: flex; align-items: flex-end; justify-content: space-between;
              gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.card-sub { margin: 3px 0 0; font-size: 13px; color: var(--text-2); }

/* KPI: подпись -> число -> пояснение -> дельта -> цель -> прогресс -> pill */
.kpi-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.kpi-ico { width: 22px; height: 22px; border-radius: 7px; background: var(--hairline);
           display: grid; place-items: center; color: var(--text-2); flex: none; }
:is(.card--filled-red, .card--filled-ink) .kpi-ico { background: rgb(255 255 255 / .16); color: #fff; }
.kpi-sub  { margin-top: 4px; font-size: 12px; color: var(--text-2); }
.kpi-rows { margin-top: 18px; display: grid; gap: 8px; }
.kpi-row  { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kpi-slot { margin-top: 10px; }
.kpi-foot { margin-top: 14px; }
/* Компактная KPI (своды): подпись обычным шрифтом, число в строку с единицей */
.kpi-slim .kpi-title { font-size: 14px; color: var(--text-2); display: block; }
.kpi-slim .kpi-value { font-size: 26px; }
.kpi-slim .kpi-title + div { margin-top: 6px; }

/* Мини-бар KPI: 3px, трек hairline */
.bar { height: 3px; border-radius: 2px; background: var(--hairline); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 2px; background: var(--text-3); }
.bar--green > i { background: var(--green); }
.bar--red   > i { background: var(--red); }
.bar--gold  > i { background: var(--gold); }
.card--filled-red .bar { background: rgb(255 255 255 / .25); }
.card--filled-red .bar > i { background: #fff; }
.card--filled-ink .bar { background: rgb(255 255 255 / .18); }
/* Штриховка - различима без цвета (монохромные гаммы) */
.bar-hatch { background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .45) 0 2px, transparent 2px 5px); }

.spark { display: block; width: 100%; height: 34px; overflow: visible; }
.spark path { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.spark .pos { stroke: var(--spark-pos); }
.spark .neg { stroke: var(--spark-neg); }
.spark circle { fill: currentColor; }

/* Сводная полоса: вердикт над реестром (иконка · вывод · цифры · действие) */
.verdict { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.verdict-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--hairline); color: var(--text-2); }
.verdict-t { font: 600 17px/1.3 var(--font-sans); }
.verdict-s { font-size: 13.5px; color: var(--text-2); margin-top: 3px; }
.verdict-stats { display: flex; gap: 22px; }
.verdict-stats .m-label { display: block; margin-bottom: 2px; }
.card--filled-red :is(.verdict-t, .verdict-s) { color: #fff; }
.card--filled-red .verdict-ico { background: rgb(255 255 255 / .16); color: #fff; }
.card--filled-red .btn { background: #fff; color: #1a1a1a; border-color: #fff; }

@media (max-width: 900px) {
  .verdict { grid-template-columns: auto minmax(0, 1fr); }
  .verdict > :last-child { grid-column: 1 / -1; }
  .verdict-stats { gap: 16px; flex-wrap: wrap; }
  .verdict-t { font-size: 16px; }
}

/* ==================================================================
   31 · Статусы: pill (вердикт), st (состояние объекта), свежесть, точки.
   pill - «что это значит» (↗ Цель, ↘ Действие); st - «в каком он
   состоянии» (Готово, Идёт, Ошибка). Слово обязательно: цвет только
   повторяет его - в монохромных гаммах вердикт цветом не несётся.
   ================================================================== */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
        border-radius: 999px; font: 600 11px/1.35 var(--font-sans); white-space: nowrap; }
/* Зелёный - сплошной (факт подтверждён), красный и золото - тонировка */
.pill--green { background: var(--green-fill); color: var(--green-on); }
.pill--red   { background: var(--red-tint);  color: var(--red-strong); }
.pill--gold  { background: var(--gold-tint); color: var(--gold-strong); }
.pill--gray  { background: var(--hairline);  color: var(--text-2); }
.pill--ghost { background: transparent; border: 1px solid var(--hairline); color: var(--text-2); }
.pill--ink-on { background: var(--ink); color: var(--on-ink); }
.card--filled-red .pill--red { background: #fff; color: var(--red-fill); }
a.pill { text-decoration: none; }
.pill-mono { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }

.st { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1.35 var(--font-sans);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.st--ok      { background: var(--green-fill); color: var(--green-on); }
.st--wait    { background: var(--gold-tint); color: var(--gold-strong); }
.st--wait::before { animation: ui-pulse 1.2s infinite; }
.st--warn    { background: var(--gold-tint); color: var(--gold-strong); }
.st--danger  { background: var(--red-tint); color: var(--red-strong); }
.st--neutral { background: var(--hairline); color: var(--text-2); }
.st--ghost   { background: transparent; border: 1px solid var(--hairline); color: var(--text-2); }

/* Свежесть данных: одно место на всех экранах с цифрами - шапка страницы */
.fresh { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
  border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface);
  font: 500 11px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-2); white-space: nowrap; }
.fresh .dot { width: 6px; height: 6px; background: var(--text-3); }
.fresh--ok .dot { background: var(--green); }
.fresh--run { background: var(--gold-tint); border-color: transparent; color: var(--gold-strong); }
.fresh--run .dot { background: var(--gold); animation: ui-pulse 1.2s infinite; }
.fresh--late { background: var(--red-tint); border-color: transparent; color: var(--red-strong); }
.fresh--late .dot { background: var(--red); }

.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; background: var(--text-3); }
.dot--green { background: var(--green); }
.dot--red   { background: var(--red); }
.dot--gold  { background: var(--gold); }
.dot--ink   { background: var(--ink); }
.dot--mut   { background: var(--text-3); }

/* Счётчик непрочитанного */
.dot-badge { display: inline-block; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
  background: var(--red-fill); color: #fff; flex: none;
  font: 600 11px/17px var(--font-mono); text-align: center; }

.badge-mode { display: inline-block; padding: 2px 7px; border-radius: 999px;
  font: 600 11px/1.3 var(--font-mono); text-transform: uppercase;
  letter-spacing: .1em; background: var(--contour-accent); color: var(--contour-on); }

.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--hairline);
  display: inline-grid; place-items: center; font: 600 11px/1 var(--font-sans); color: var(--text-2);
  flex: none; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.avatar--lg { width: 40px; height: 40px; font-size: 14px; }
.avatars { display: inline-flex; }
.avatars > .avatar { border: 2px solid var(--surface); }
.avatars > .avatar + .avatar { margin-left: -8px; }

@keyframes ui-pulse { 50% { opacity: .3; } }

/* ==================================================================
   40 · Контролы: кнопки, сегменты, табы, чипы-фильтры, поиск.
   Три механизма выбора - три вида: segmented (взаимоисключающий режим),
   chips (фильтры выборки), tabs (разделы страницы).
   ================================================================== */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; min-height: 38px;
       border-radius: var(--r-ctl); border: 1px solid var(--hairline); background: var(--surface);
       color: var(--text-1); font: 500 14px/1 var(--font-sans); cursor: pointer; text-decoration: none;
       box-shadow: var(--sh-card); transition: background .15s var(--ease); white-space: nowrap; }
.btn:hover { background: var(--hairline-soft); }
.btn--ink { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn--ink:hover { background: var(--ink-2); }
.btn--green { background: var(--green-fill); border-color: var(--green-fill); color: var(--green-on); }
.btn--green:hover { background: var(--green-strong); }
.btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
.btn--ghost:hover { color: var(--text-1); }
/* Разрушающее: слово красное; заливка - только в окне подтверждения */
.btn--danger { color: var(--red-text); }
.btn--danger-fill { background: var(--red-fill); border-color: var(--red-fill); color: #fff; }
.btn--danger-fill:hover { background: var(--red-strong); }
.btn--sm { padding: 7px 11px; font-size: 13px; min-height: 32px; }
.btn--lg { padding: 12px 18px; font-size: 15px; min-height: 46px; }
.btn--block { width: 100%; justify-content: center; }
.icon-only { width: 38px; padding: 0; justify-content: center; }
.btn[disabled], .btn.is-off, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
/* Кнопка в работе: подпись остаётся, спиннер слева (htmx ставит .htmx-request) */
.btn.is-busy, .btn.htmx-request { pointer-events: none; }
.btn.is-busy::before, .btn.htmx-request::before { content: ""; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: ui-spin .7s linear infinite; }

.close { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--hairline);
  color: var(--text-1); display: grid; place-items: center; cursor: pointer; flex: none; }
.close:hover { background: var(--hairline-soft); }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; flex: none; background: var(--hairline);
  color: var(--text-1); border: 0; display: grid; place-items: center; position: relative; cursor: pointer; }

/* segmented: белый контейнер-pill, активный - заливка ink. Кнопками или ссылками. */
.seg { display: inline-flex; align-items: center; gap: 2px; padding: 4px; max-width: 100%;
       background: var(--surface); border: 1px solid var(--hairline);
       border-radius: 999px; box-shadow: var(--sh-card); }
.seg > button, .seg > a { appearance: none; border: 0; background: none; cursor: pointer;
       font: 500 14px/1 var(--font-sans); color: var(--text-2); padding: 8px 14px; text-decoration: none;
       border-radius: var(--r-ctl); white-space: nowrap;
       transition: background .15s var(--ease), color .15s var(--ease); }
.seg > button:hover, .seg > a:hover { background: var(--hairline-soft); color: var(--text-1); }
.seg > [aria-selected="true"], .seg > [aria-current] { background: var(--ink); color: var(--on-ink); }
.seg > [aria-selected="true"]:hover, .seg > [aria-current]:hover { background: var(--ink); color: var(--on-ink); }
.seg--sm > button, .seg--sm > a { font-size: 13px; padding: 6px 11px; }
.seg-label { padding: 0 6px 0 8px; }

.select-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
       background: var(--surface); border: 1px solid var(--hairline); border-radius: 999px;
       box-shadow: var(--sh-card); font: 400 14px/1.2 var(--font-sans); color: var(--text-1); cursor: pointer; }
.select-pill .mut { color: var(--text-3); }

/* tabs: подчёркивание ink у активного. Табы, повторяющие L2 панели, запрещены. */
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--hairline); overflow-x: auto; scrollbar-width: none; }
.tabs > a, .tabs > button { padding: 12px 0; text-decoration: none; color: var(--text-2); font: 400 14px/1.2 var(--font-sans);
       border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; background: none;
       display: flex; align-items: center; gap: 8px; cursor: pointer; }
.tabs > [aria-current="page"], .tabs > [aria-selected="true"] { color: var(--text-1); border-bottom-color: var(--ink); font-weight: 500; }

/* Фильтры: поиск + чипы; применённые - заливкой ink */
.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.search { position: relative; flex: 1 1 260px; max-width: 420px; }
.search input { width: 100%; padding: 10px 14px 10px 38px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--surface); color: var(--text-1);
  font: 400 14px/1.3 var(--font-sans); box-shadow: var(--sh-card); min-height: 40px; }
.search input::placeholder { color: var(--text-3); }
.search > .ico, .search > svg, .search > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.chips { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 36px;
  border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface); text-decoration: none;
  font: 500 13px/1 var(--font-sans); color: var(--text-2); cursor: pointer; white-space: nowrap; }
.chip b { font-weight: 500; color: var(--text-1); }
.chip:hover { background: var(--hairline-soft); }
.chip.on, .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.chip.on b, .chip[aria-pressed="true"] b { color: var(--on-ink); }
.chip .x { opacity: .7; margin-left: 2px; }
.chip-reset { font: 400 13px/1.2 var(--font-sans); color: var(--text-2); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: 8px 4px; }

/* Ссылка-цифра: любое число, которое открывает расшифровку */
.num-link { cursor: pointer; text-decoration: underline dotted var(--text-3);
  text-underline-offset: 5px; text-decoration-thickness: 1px; }
.num-link:hover { text-decoration-color: var(--text-1); }

/* Главное действие экрана: одно, в фиксированном месте */
.main-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.main-act .why { font-size: 13px; color: var(--text-2); }

/* Пагинация */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pager-pages { display: flex; align-items: center; gap: 6px; }

@media (max-width: 900px) {
  /* Поиск - строкой во всю ширину, чипы - лентой */
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 12px;
    padding: 0 16px 2px; gap: 8px; }
  .filters::-webkit-scrollbar { display: none; }
  .filters > * { flex: none; }
  .filters:has(.search) { flex-wrap: wrap; overflow: visible; margin: 0 0 12px; padding: 0; }
  .search { flex: 1 0 100%; max-width: none; }
  .main-act.stick { position: sticky; bottom: 78px; z-index: 20; margin: 0 -16px; padding: 12px 16px;
    background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px);
    border-top: 1px solid var(--hairline); }
  .main-act.stick .btn { flex: 1 1 auto; justify-content: center; min-height: 48px; }
  .main-act .why { flex-basis: 100%; text-align: center; order: 2; }
  .seg { overflow-x: auto; scrollbar-width: none; }
}

/* ==================================================================
   41 · Формы: поле, подсказка, ошибка, выбор, переключатель, загрузка.
   Ошибка - словами под полем и красной рамкой; цвет не единственный носитель.
   ================================================================== */
.form { display: grid; gap: 16px; max-width: 620px; }
.form--wide { max-width: none; }
.form-row { display: grid; gap: 6px; }
.form-row > label, .form-label { font: 500 13px/1.3 var(--font-sans); color: var(--text-2); }
.form-row .req { color: var(--red-text); margin-left: 2px; }
.hint { font-size: 12px; color: var(--text-2); }
.field-error { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: var(--red-text); }
.form-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-top: 4px; }
.form-errors { margin-bottom: 4px; }

.inp { width: 100%; min-height: 42px; padding: 10px 13px; border-radius: var(--r-ctl);
  border: 1px solid var(--hairline); background: var(--surface); color: var(--text-1);
  font: 400 14px/1.4 var(--font-sans); }
.inp::placeholder { color: var(--text-3); }
.inp--mono { font-family: var(--font-mono); }
.inp--sm { min-height: 34px; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.inp:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
[data-theme="dark"] .inp:focus-visible { outline-color: var(--text-1); }
.inp[aria-invalid="true"], .inp.is-invalid { border-color: var(--red); background: var(--red-wash); }
.inp[disabled], .inp[readonly] { background: var(--surface-2); color: var(--text-2); }
textarea.inp { resize: vertical; min-height: 92px; }
select.inp { appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat; }
select.inp[multiple] { background-image: none; padding-right: 13px; }
.inp-group { display: flex; align-items: stretch; }
.inp-group > .inp { border-radius: var(--r-ctl) 0 0 var(--r-ctl); }
.inp-group > .btn { border-radius: 0 var(--r-ctl) var(--r-ctl) 0; margin-left: -1px; box-shadow: none; }

/* Флажок и переключатель - нативный input, вид - здесь */
.cb, .rb { appearance: none; margin: 0; width: 20px; height: 20px; flex: none; cursor: pointer;
  border: 1.5px solid var(--text-3); background: var(--surface); display: inline-grid; place-items: center; }
.cb { border-radius: 6px; }
.rb { border-radius: 50%; }
.cb:checked, .cb:indeterminate, .rb:checked { background: var(--ink); border-color: var(--ink); }
[data-theme="dark"] :is(.cb:checked, .cb:indeterminate, .rb:checked) { background: var(--text-1); border-color: var(--text-1); }
.cb:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--on-ink);
  border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.cb:indeterminate::after { content: ""; width: 9px; height: 2px; background: var(--on-ink); }
.rb:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-ink); }
[data-theme="dark"] :is(.cb:checked::after, .cb:indeterminate::after, .rb:checked::after) { border-color: var(--bg); background: var(--bg); }
[data-theme="dark"] .cb:checked::after { background: none; }
.check-line { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; min-height: 24px; }
.check-line > .cb, .check-line > .rb { margin-top: 1px; }
.choices { display: grid; gap: 10px; }
.choice-hint { display: block; }
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset > legend { padding: 0; margin-bottom: 6px; }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch i { width: 38px; height: 22px; border-radius: 999px; background: var(--hairline);
  position: relative; transition: background .15s var(--ease); flex: none; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--surface); box-shadow: var(--sh-card);
  transition: transform .15s var(--ease); }
.switch input:checked + i { background: var(--green-fill); }
.switch input:checked + i::after { transform: translateX(16px); }
.switch input:focus-visible + i { outline: 2px solid var(--text-1); outline-offset: 2px; }
.switch input:disabled + i { opacity: .45; }

/* Пара «ключ - значение» */
.kv { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 9px 20px; margin: 0; }
.kv dt { font: 500 11px/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.kv dd { margin: 0; font-size: 14px; }

/* Код из нескольких ячеек (вход по коду) */
.code-boxes { display: flex; gap: 9px; justify-content: center; }
.code-boxes input, .code-boxes span { width: 46px; height: 56px; border-radius: var(--r-ctl);
  border: 1px solid var(--hairline); background: var(--surface); text-align: center;
  display: grid; place-items: center; font: 600 24px/1 var(--font-mono); color: var(--text-1); }
.code-boxes .filled, .code-boxes input:focus { border-color: var(--ink); outline: 0; }

/* Загрузка файла: зона + список выбранного */
.dropzone { position: relative; display: grid; place-items: center; gap: 8px; text-align: center;
  padding: 28px 18px; border: 1.5px dashed var(--hairline); border-radius: var(--r-card);
  background: var(--surface); color: var(--text-2); cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease); }
.dropzone:hover, .dropzone.is-over { background: var(--hairline-soft); border-color: var(--text-3); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone .ico-l { color: var(--text-3); }
.dropzone-t { font-weight: 500; color: var(--text-1); }
.files { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.files li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: var(--r-ctl);
  background: var(--surface-2); border: 1px solid var(--hairline); font-size: 13.5px; }
.files li .m-delta { white-space: nowrap; }

/* Свёрнутое «Ещё параметры» */
.more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 0; color: var(--text-2); font-size: 14px; min-height: 44px; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary .ico { transition: transform .2s var(--ease); }
.more[open] > summary .ico { transform: rotate(90deg); }

/* Опасное действие - отдельно от сохранения и за чертой */
.danger-zone { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--hairline); }

@media (max-width: 900px) {
  .form-grid2 { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: 1fr; gap: 3px 0; }
  .kv dd { margin-bottom: 9px; }
  .form-actions .btn { flex: 1 1 auto; justify-content: center; min-height: 46px; }
}

/* ==================================================================
   50 · Таблица данных и реестр, выделение строк, групповые действия.
   Свод (.tbl): первая колонка - подпись, остальные - числа вправо.
   Реестр (.tbl--reg): всё влево, числа - классом .n, действие - .act.
   Телефон: .tbl-wrap.as-cards превращает строки в карточки; подпись
   ячейки берётся из data-th - у каждой числовой ячейки он обязателен.
   ================================================================== */
/* Не влезла - прокрутка внутри рамки, а не срез: overflow: hidden молча прятал колонки
   справа, и данные пропадали без следа. Страница вбок не едет в обоих случаях. */
.tbl-wrap { background: var(--surface); border: 1px solid var(--hairline);
       border-radius: var(--r-card); overflow-x: auto; overflow-y: hidden; box-shadow: var(--sh-card);
       position: relative; /* скрытые поля флажков и переключателей - внутри прокрутки, а не за краем страницы */ }
.tbl-wrap--scroll { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl thead th { padding: 12px 16px; text-align: right; background: var(--surface-2);
       border-bottom: 1px solid var(--hairline); white-space: nowrap; font-weight: inherit; }
.tbl thead th:first-child { text-align: left; }
.tbl td { padding: 13px 16px; border-bottom: 1px solid var(--hairline-soft); vertical-align: middle; }
.tbl td:not(:first-child) { text-align: right; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td .m-num { white-space: nowrap; }
.tbl--tight td { padding: 9px 16px; }
.tbl--sticky thead th { position: sticky; top: 0; z-index: 1; }
.tbl--hover tbody tr:hover td { background: var(--hairline-soft); }

.tbl--reg thead th, .tbl--reg td, .tbl--reg td:not(:first-child) { text-align: left; }
/* Заголовок реестра переносится по словам: моно-капс «последнее обращение» в одну строку
   держал колонку шире ее данных, и восемь колонок не влезали в рабочую зону. */
.tbl--reg thead th { white-space: normal; vertical-align: bottom; overflow-wrap: normal; }
.tbl--reg :is(th, td).n, .tbl--reg td.n:not(:first-child) { text-align: right; }
.tbl--reg :is(th, td).act, .tbl--reg td.act:not(:first-child) { text-align: right; width: 1%; white-space: nowrap; }
.tbl--reg :is(th, td).sel-col { width: 1%; padding-right: 0; }
.tbl--reg td.p { font-weight: 500; }
.sel-hit { display: inline-grid; place-items: center; cursor: pointer; }
.row-link { text-decoration: none; }
.row-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Сортировка: ссылка в шапке, направление - aria-sort на th */
.tbl th .sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.tbl th .sort::after { content: "↕"; opacity: .4; }
.tbl th[aria-sort="ascending"] .sort::after { content: "↑"; opacity: 1; }
.tbl th[aria-sort="descending"] .sort::after { content: "↓"; opacity: 1; }

/* Строки-разделы и итог */
.row--green td { background: var(--green-tint); }
.row--red   td { background: var(--red-tint); }
.row--gold  td { background: var(--gold-tint); }
.row--green .cap { color: var(--green-strong); }
.row--red   .cap { color: var(--red-strong); }
.row--gold  .cap { color: var(--gold-strong); }
.row--ink   td { background: var(--ink-2); color: #fff; }
.row--ink   td :is(.m-num, .cap) { color: #fff; }
.row--ink   td .is-green { color: color-mix(in srgb, var(--green) 55%, #fff); }
.row--ink   td .is-red   { color: color-mix(in srgb, var(--red) 55%, #fff); }
.row--sub   td:first-child { padding-left: 34px; }
.tbl tr.sel td { background: var(--green-wash); }

.twisty { display: inline-flex; width: 14px; color: var(--text-3); transition: transform .15s var(--ease); }
[aria-expanded="true"] > .twisty { transform: rotate(90deg); }
.sub { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; font-family: var(--font-mono); }
.tbl-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 16px; border-top: 1px solid var(--hairline); background: var(--surface-2); }

/* Групповые действия: липкая полоса, появляется при выделении */
.bulk { position: sticky; bottom: 16px; z-index: 30; margin-top: 12px; display: flex;
  align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px;
  background: var(--ink-2); color: #fff; border-radius: var(--r-card); box-shadow: var(--sh-panel); }
.bulk .m-label { color: rgb(255 255 255 / .78); }
.bulk .btn { background: rgb(255 255 255 / .12); border-color: transparent; color: #fff; box-shadow: none; }
.bulk .btn:hover { background: rgb(255 255 255 / .2); }

@media (max-width: 900px) {
  .tbl-wrap.as-cards { background: none; border: 0; box-shadow: none; overflow: visible; }
  /* :where - нулевой вес: иначе .tbl внутри :is перебивает «thead: none» ниже */
  .tbl-wrap.as-cards :where(.tbl, thead, tbody, tr, td) { display: block; width: 100%; }
  .tbl-wrap.as-cards thead { display: none; }
  .tbl-wrap.as-cards tr { background: var(--surface); border: 1px solid var(--hairline);
       border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 14px 16px; margin-bottom: 10px; }
  .tbl-wrap.as-cards td { padding: 0; border: 0 !important; background: none !important;
       display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .tbl-wrap.as-cards td + td { margin-top: 7px; }
  /* Ячейка-строка - flex: без min-width: 0 длинный адрес или путь не дает ей сжаться,
     и карточка уводит страницу вбок. */
  .tbl-wrap.as-cards td { overflow-wrap: anywhere; min-width: 0; }
  .tbl-wrap.as-cards td > * { min-width: 0; }
  .tbl-wrap.as-cards td:not(:first-child)::before { content: attr(data-th); flex: none;
       font: 500 11px/1.4 var(--font-mono); text-transform: uppercase;
       letter-spacing: .1em; color: var(--text-3); }
  .tbl-wrap.as-cards td:not(:first-child) { text-align: right; }
  .tbl-wrap.as-cards tr.row--green { background: var(--green-tint); border-color: var(--green); }
  .tbl-wrap.as-cards tr.row--red   { background: var(--red-tint);   border-color: var(--red); }
  .tbl-wrap.as-cards tr.row--gold  { background: var(--gold-tint);  border-color: var(--gold-line); }
  .tbl-wrap.as-cards tr.row--ink   { background: var(--ink-2); border-color: var(--ink-2); }
  .tbl-wrap.as-cards tr.row--ink td { color: #fff; }
  .tbl-wrap.as-cards tr.sel { background: var(--green-wash); }
  .tbl-wrap.as-cards tr.row--sub td:first-child { padding-left: 0; }
  /* Реестр: заголовок строки (.p) первым, без подписи; действие - вправо */
  .tbl-wrap.as-cards .tbl--reg tr { display: flex; flex-direction: column; }
  .tbl-wrap.as-cards .tbl--reg td.p { order: -1; font-size: 15px; }
  .tbl-wrap.as-cards .tbl--reg td.p::before, .tbl-wrap.as-cards .tbl--reg td.act::before,
  .tbl-wrap.as-cards .tbl--reg td.sel-col::before { content: none; }
  .tbl-wrap.as-cards .tbl--reg td.act { justify-content: flex-end; }
  /* Старые таблицы: стек строк без подписей */
  .tbl-stack thead { display: none; }
  .tbl-stack, .tbl-stack tbody, .tbl-stack tr, .tbl-stack td { display: block; width: 100%; }
  .tbl-stack tr { padding: 10px 14px; border-bottom: 1px solid var(--hairline-soft); }
  .tbl-stack td { padding: 2px 0 !important; text-align: left !important; overflow-wrap: anywhere; }
  .tbl-foot { background: none; border: 0; padding: 4px 2px; }
  .bulk { bottom: 86px; }
}

/* ==================================================================
   51 · Списки-записи: лента, рабочий список, сверка, очередь, лог, факты.
   Сумма - первой: экран открывают ради неё.
   ================================================================== */
.feed { background: var(--surface); border: 1px solid var(--hairline);
        border-radius: var(--r-card); box-shadow: var(--sh-card); overflow: hidden; }
.feed-day { padding: 12px 18px; background: var(--surface-2); border-bottom: 1px solid var(--hairline); }
.feed-row { display: grid; grid-template-columns: 3px minmax(0, 1fr) auto; gap: 14px; color: inherit;
        padding: 14px 18px; border-bottom: 1px solid var(--hairline-soft); align-items: center; text-decoration: none; }
.feed-row:last-child { border-bottom: 0; }
.feed-row:hover { background: var(--hairline-soft); }
.feed-flag { width: 3px; height: 30px; border-radius: 2px; background: var(--text-3); }
.feed-flag--in   { background: var(--green); }
.feed-flag--out  { background: var(--red); }
.feed-flag--gold { background: var(--gold); }
.feed-title { font-size: 14.5px; }
.feed-note  { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.feed-meta  { margin-top: 4px; }
.feed-sum   { text-align: right; }

.item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; padding: 12px 0;
        border-bottom: 1px solid var(--hairline-soft); }
.item:last-child { border-bottom: 0; }
.item-sum { font: 500 14px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* Сверка: заголовок + статус, формула словами, моно-колонки, ссылка */
.check { padding: 18px; border-bottom: 1px solid var(--hairline); }
.check:last-child { border-bottom: 0; }
.check-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.check-formula { font-size: 14px; color: var(--text-2); margin-top: 4px; }
.check-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.check-cell .m-label { display: block; margin-bottom: 4px; }
.check-hint { margin: 12px 0 0; }
.check-foot { display: flex; align-items: center; justify-content: flex-end;
        gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline-soft); }
.check-foot a { text-decoration: none; }

/* Очередь задач: точка состояния · имя · справа статус */
.queue { display: grid; gap: 1px; background: var(--hairline-soft); }
.q-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 11px; align-items: center;
  padding: 10px 14px; background: var(--surface); }
.q-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.q-row.run  .q-dot { background: var(--gold); animation: ui-pulse 1.2s infinite; }
.q-row.ok   .q-dot { background: var(--green); }
.q-row.fail .q-dot { background: var(--red); }
.q-row.wait .q-dot { background: var(--hairline); border: 1px solid var(--text-3); }
.q-row .nm { font-size: 13.5px; min-width: 0; }

/* Шаги долгой операции: иконка · что делается · справа время */
.steps { display: grid; list-style: none; margin: 0; padding: 0; }
.step { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; padding: 12px 18px;
  border-bottom: 1px solid var(--hairline-soft); align-items: start; }
.step:last-child { border-bottom: 0; }
.step-ico { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hairline); color: var(--text-2); font: 600 11px/1 var(--font-mono); }
.step.run .step-ico::before { content: ""; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--gold-strong); border-right-color: transparent; animation: ui-spin .8s linear infinite; }
.step.ok .step-ico { background: var(--green-fill); color: var(--green-on); }
.step.err .step-ico { background: var(--red-fill); color: #fff; }
.step.err { background: var(--red-wash); }
.step.skip { color: var(--text-3); }
.step.wait { color: var(--text-2); }
.step-t { font-size: 14.5px; }
.step-bar { height: 3px; margin-top: 8px; border-radius: 2px; background: var(--hairline); position: relative; overflow: hidden; }
.step-bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 2px; background: var(--text-3); }
.step.ok .step-bar i { background: var(--green); }
.step.err .step-bar i { background: var(--red); }

.log { font: 400 12px/1.7 var(--font-mono); background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: var(--r-ctl); padding: 12px 14px; max-height: 260px; overflow: auto;
  white-space: pre-wrap; word-break: break-word; margin: 0; }
.log .t { color: var(--text-3); }
.log .e { color: var(--red-text); }
.code { font: 400 12.5px/1.65 var(--font-mono); background: var(--surface-2);
  border: 1px solid var(--hairline); border-radius: var(--r-ctl); padding: 13px 15px;
  overflow-x: auto; white-space: pre; color: var(--text-1); margin: 0; }
.copy-row { display: flex; align-items: stretch; gap: 8px; }
.copy-row .code { flex: 1; min-width: 0; white-space: nowrap; }

/* «Что произойдёт»: пары подпись - значение в окне проверки */
.facts { display: grid; gap: 1px; background: var(--hairline); border-radius: 12px; overflow: hidden;
  border: 1px solid var(--hairline); }
.facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 11px 14px; background: var(--surface); font-size: 14px; }
.facts .m-num-lg { text-align: right; }

@media (max-width: 900px) {
  .feed-row { grid-template-columns: 3px minmax(0, 1fr); }
  .feed-row .feed-sum { grid-column: 2; text-align: left; }
  .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .check-head { flex-wrap: wrap; }
  .step { padding: 12px 14px; }
}

/* ==================================================================
   60 · Обратная связь: полосы, плашки, инсайт, пустое состояние, ошибка,
   раскрытие «почему».
   ================================================================== */
/* Полоса на всю ширину: один тон - один смысл */
.strip { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
       border-radius: var(--r-card); font-size: 14px; border: 1px solid transparent; }
.strip-t { flex: 1; min-width: 0; }
.strip a { color: inherit; }
.strip--red   { background: var(--red-wash);  color: var(--red-strong);  border-color: var(--red-tint); }
.strip--gold  { background: var(--gold-tint); color: var(--gold-strong); }
.strip--green { background: var(--green-wash); color: var(--green-strong); }
.strip--info  { background: var(--surface); color: var(--text-2); border-color: var(--hairline); }
.strip--top-red { border-top: 2px solid var(--red); background: var(--surface); color: var(--text-1); }

/* Плашка контекста: info - справка, warn - посмотрите, danger - меняет то, что видно */
.plaque { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px;
  border-radius: var(--r-card); font-size: 14px; }
.plaque > .ico, .plaque > svg { margin-top: 2px; flex: none; }
.plaque .body { flex: 1; min-width: 0; }
.plaque .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.plaque .btn { font-size: 13px; padding: 7px 12px; min-height: 34px; }
.plaque--info   { background: var(--surface); border: 1px solid var(--hairline); color: var(--text-2); }
.plaque--warn   { background: var(--gold-tint); color: var(--gold-strong); }
.plaque--danger { background: var(--red-wash); border: 1px solid var(--red-tint); color: var(--red-strong); }
.plaque b { color: inherit; }

/* Свёрнутая полоса AI-инсайта */
.insight { display: flex; align-items: center; justify-content: space-between; gap: 12px;
       padding: 13px 16px; background: var(--surface); border: 1px solid var(--hairline); text-decoration: none;
       border-radius: var(--r-card); box-shadow: var(--sh-card); cursor: pointer; }
.insight-t { flex: 1; min-width: 0; font-size: 13px; color: var(--text-2); }

/* Пустое состояние: три случая, у каждого свой текст и действие */
.empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 42px 20px; color: var(--text-2); }
.empty > .ico { width: 22px; height: 22px; color: var(--text-3); }
.empty-t { margin-top: 6px; color: var(--text-1); }
.empty-s { margin: 0 0 10px; max-width: 460px; font-size: 13.5px; }

/* Ошибка: что случилось · почему · что делать; детали - раскрытием */
.error-block { display: flex; align-items: flex-start; gap: 14px; }
.error-block > .ico, .error-block > svg { margin-top: 2px; flex: none; color: var(--red-text); }
.error-s { margin: 6px 0 12px; font-size: 13.5px; color: var(--text-2); }
.error-block .explain { margin-top: 12px; }

/* Раскрытие «почему» и аккордеон - нативный <details> */
.explain { border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--surface); }
.explain > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; font-size: 14px; color: var(--text-2); min-height: 44px; }
.explain > summary::-webkit-details-marker { display: none; }
/* Текст вопроса - отдельным элементом: в узкой ячейке он переносится, а не выталкивает
   стрелку за край (анонимный текст флекса сжиматься не умеет). */
.explain > summary > .explain-t { min-width: 0; overflow-wrap: anywhere; }
.explain > summary > .ico { flex: none; }
.explain > summary .chev { margin-left: auto; display: inline-flex; transition: transform .2s var(--ease); }
.explain[open] > summary .chev { transform: rotate(90deg); }
.explain > .in { padding: 0 16px 16px; font-size: 14px; color: var(--text-1); }
.explain > .in p { margin: 0 0 10px; }
.accordion { display: grid; gap: 0; border: 1px solid var(--hairline); border-radius: var(--r-card);
  background: var(--surface); overflow: hidden; }
.accordion > .explain { border: 0; border-radius: 0; border-bottom: 1px solid var(--hairline-soft); }
.accordion > .explain:last-child { border-bottom: 0; }
.accordion > .explain > summary { color: var(--text-1); font-weight: 500; }

/* Полоса стенда - предупреждение, а не навигация */
.banner-stage { padding: 5px 16px; background: var(--gold); color: #1a1a1a; text-align: center;
  font: 600 11px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; }

@media (max-width: 900px) {
  .plaque { padding: 12px 14px; }
  .plaque .acts .btn { flex: 1 1 auto; justify-content: center; }
}

/* ==================================================================
   61 · Ожидание и прогресс: прогресс-бар, кольцо, спиннер, скелет, шаги
   мастера. Пороги ожидания - docs/patterns.md, «Ожидание загрузки».
   ================================================================== */
.progress { display: grid; gap: 7px; }
.progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.progress-t { font-size: 14px; min-width: 0; }
.progress-track { height: 6px; border-radius: 3px; background: var(--hairline); overflow: hidden; position: relative; }
.progress-track > i { display: block; height: 100%; border-radius: 3px; background: var(--ink);
  transition: width .4s var(--ease); }
[data-theme="dark"] .progress-track > i { background: var(--text-2); }
.progress--green .progress-track > i { background: var(--green); }
.progress--red   .progress-track > i { background: var(--red); }
.progress--gold  .progress-track > i { background: var(--gold); }
.progress--sm .progress-track { height: 3px; }
/* Неизвестная длительность: бегущий отрезок вместо процента */
.progress--indeterminate .progress-track > i { width: 35% !important; position: absolute; left: 0;
  animation: ui-indeterminate 1.3s var(--ease) infinite; }
.progress-foot { display: flex; justify-content: space-between; gap: 12px; }
@keyframes ui-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(290%); } }

/* Кольцо: процент в центре; --p - доля 0..100 */
.ring { --p: 0; --size: 44px; width: var(--size); height: var(--size); border-radius: 50%; flex: none;
  display: inline-grid; place-items: center; position: relative;
  background: conic-gradient(var(--ring-c, var(--ink)) calc(var(--p) * 1%), var(--hairline) 0); }
[data-theme="dark"] .ring { --ring-c: var(--text-2); }
.ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface); }
.ring > span { position: relative; font: 600 11px/1 var(--font-mono); }
.ring--green { --ring-c: var(--green); }
.ring--red   { --ring-c: var(--red); }
.ring--lg { --size: 64px; }
.ring--lg > span { font-size: 13px; }

.spinner { width: 18px; height: 18px; border-radius: 50%; flex: none; display: inline-block;
  border: 2px solid var(--hairline); border-top-color: var(--text-2); animation: ui-spin .7s linear infinite; }
.spinner--sm { width: 13px; height: 13px; }
.spinner--lg { width: 28px; height: 28px; border-width: 3px; }
.spinner-line { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 14px; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* Скелет: форма будущего содержимого, пока оно грузится дольше 1 с */
.skeleton { display: block; height: 14px; border-radius: 7px; background: var(--hairline-soft);
  animation: ui-pulse 1.2s infinite; }
.skeleton--title { height: 22px; width: 45%; }
.skeleton--num { height: 32px; width: 60%; }
.skeleton--block { height: 120px; border-radius: var(--r-card); }
.skeleton-card { display: grid; gap: 10px; }
.skeleton--w40 { width: 40%; }
.skeleton--w60 { width: 60%; }
.skeleton--w70 { width: 70%; }

/* Показ с задержкой: быстрый ответ не мигает индикатором (порог 300 мс) */
.ui-delay { animation: ui-appear 0s .3s both; }
@keyframes ui-appear { from { visibility: hidden; } to { visibility: visible; } }

/* htmx: индикатор виден только во время запроса */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-flex; animation: ui-appear 0s .3s both; }
.htmx-request.ui-dim, .htmx-request .ui-dim { opacity: .55; transition: opacity .2s var(--ease) .3s; }

/* Шаги мастера: номер · подпись; пройденные - галочкой */
.stepper { display: flex; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; counter-reset: ui-step; }
.stepper > li { flex: 1 1 0; min-width: 0; display: grid; gap: 8px; counter-increment: ui-step; }
.stepper > li::before { content: ""; height: 3px; border-radius: 2px; background: var(--hairline); }
.stepper > li > span { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }
.stepper > li > span::before { content: counter(ui-step); width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; border: 1.5px solid var(--hairline); font: 600 11px/1 var(--font-mono); }
.stepper > li.done::before, .stepper > li[aria-current="step"]::before { background: var(--ink); }
[data-theme="dark"] :is(.stepper > li.done, .stepper > li[aria-current="step"])::before { background: var(--text-2); }
.stepper > li.done > span, .stepper > li[aria-current="step"] > span { color: var(--text-1); }
.stepper > li.done > span::before { content: "✓"; background: var(--green-fill); border-color: var(--green-fill); color: var(--green-on); }
.stepper > li[aria-current="step"] > span { font-weight: 500; }
.stepper > li[aria-current="step"] > span::before { border-color: var(--text-1); }
.stepper > li.err::before { background: var(--red); }
.stepper > li.err > span::before { content: "!"; background: var(--red-fill); border-color: var(--red-fill); color: #fff; }
.stepper > li > span > a { color: inherit; }

@media (max-width: 900px) {
  /* Телефон: подписи только у текущего шага */
  .stepper > li:not([aria-current="step"]) > span > .stepper-t { display: none; }
}

/* Линейка пути: число шага и строка под ним (stepper с value/note) */
.stepper-v { margin-left: auto; font: 500 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-1); }
.stepper > li:not(.done):not([aria-current="step"]) .stepper-v { color: var(--text-3); }
.stepper-n { font: 500 11px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
@media (max-width: 900px) {
  .stepper > li:not([aria-current="step"]) .stepper-n { display: none; }
}

/* ==================================================================
   70 · Наложения: окно (dialog.modal), панель справа (dialog.sheet),
   меню (popover), подсказка, уведомления (toast).
   Окна - нативный <dialog>: фокус, Esc и верхний слой даёт браузер.
   На телефоне окно и панель становятся шторкой снизу.
   ================================================================== */
dialog.modal, dialog.sheet { padding: 0; border: 0; color: var(--text-1); background: var(--surface);
  box-shadow: var(--sh-panel); max-height: none; max-width: none; overflow: visible; }
dialog.modal::backdrop, dialog.sheet::backdrop { background: var(--scrim); }
dialog.modal[open], dialog.sheet[open] { display: flex; flex-direction: column; }

dialog.modal { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); margin: auto;
  border-radius: var(--r-panel); transition: opacity .2s var(--ease), transform .2s var(--ease); }
dialog.modal--wide { width: min(760px, calc(100vw - 32px)); }
dialog.sheet { position: fixed; inset: 12px 12px 12px auto; margin: 0; height: auto;
  width: min(560px, calc(100vw - 24px)); border-radius: var(--r-panel);
  transition: transform .28s var(--ease); }
dialog.sheet--wide { width: min(760px, calc(100vw - 24px)); }
@starting-style {
  dialog.modal[open] { opacity: 0; transform: translateY(12px); }
  dialog.sheet[open] { transform: translateX(calc(100% + 24px)); }
}

.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--hairline); }
.sheet-head .h2 { overflow-wrap: anywhere; }
.sheet-body { flex: 1; overflow-y: auto; padding: 16px 20px; display: grid; gap: 10px; align-content: start; }
.sheet-foot { padding: 14px 20px; border-top: 1px solid var(--hairline); display: flex;
  gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.sheet-foot form { margin: 0; display: contents; }
.grab { display: none; }

/* Меню: <div popover class="menu">, открывается popovertarget или data-ui-menu */
.menu { margin: 0; inset: auto; padding: 6px; min-width: 200px; max-width: min(320px, calc(100vw - 24px));
  border: 1px solid var(--hairline); border-radius: 14px; background: var(--surface); color: var(--text-1);
  box-shadow: var(--sh-panel); }
.menu:popover-open { display: grid; gap: 1px; }
.menu > a, .menu > button, .menu > form > button { display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 9px; border: 0; background: none; color: inherit; cursor: pointer;
  text-decoration: none; font: 400 14px/1.3 var(--font-sans); text-align: left; }
.menu > a:hover, .menu > button:hover, .menu > form > button:hover { background: var(--hairline-soft); }
.menu > form { margin: 0; }
.menu > [aria-checked="true"]::after { content: "✓"; margin-left: auto; }
.menu .danger { color: var(--red-text); }
.menu-sep { height: 1px; background: var(--hairline); margin: 4px 2px; }
.menu-h { padding: 8px 10px 4px; }

/* Подсказка: data-ui-tip="текст" на любом элементе; только для уточнений -
   смысл, без которого нельзя, в подсказку не прячут. */
[data-ui-tip] { position: relative; }
[data-ui-tip]::after { content: attr(data-ui-tip); position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%); z-index: 70; width: max-content; max-width: 260px; padding: 7px 10px;
  border-radius: 9px; background: var(--ink-2); color: #fff; font: 500 12px/1.35 var(--font-sans);
  text-transform: none; letter-spacing: 0; white-space: normal; text-align: left;
  box-shadow: var(--sh-raise); opacity: 0; pointer-events: none; transition: opacity .12s var(--ease); }
[data-ui-tip]:hover::after, [data-ui-tip]:focus-visible::after { opacity: 1; transition-delay: .25s; }
.tip { position: absolute; pointer-events: none; z-index: 5; padding: 7px 10px; border-radius: 9px;
  background: var(--ink-2); color: #fff; font: 500 12px/1.35 var(--font-mono); white-space: nowrap;
  transform: translate(-50%, calc(-100% - 8px)); box-shadow: var(--sh-raise); }

/* Уведомления: стопка внизу справа, на телефоне - над нижней навигацией */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: grid; gap: 8px;
  width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { position: relative; pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 14px;
  border-radius: 14px; background: var(--ink-2); color: #fff; box-shadow: var(--sh-panel);
  font: 400 14px/1.4 var(--font-sans); transition: opacity .2s var(--ease), transform .2s var(--ease); }
@starting-style { .toast { opacity: 0; transform: translateY(8px); } }
.toast.is-out { opacity: 0; transform: translateY(8px); }
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: rgb(255 255 255 / .6); }
.toast--ok::before     { background: color-mix(in srgb, var(--green) 60%, #fff); }
.toast--warn::before   { background: var(--gold); }
.toast--danger::before { background: color-mix(in srgb, var(--red) 70%, #fff); }
.toast-t { flex: 1; min-width: 0; padding-top: 1px; }
.toast-act { border: 0; background: rgb(255 255 255 / .14); color: #fff; border-radius: 8px; padding: 6px 10px;
  font: 600 12.5px/1.2 var(--font-sans); cursor: pointer; text-decoration: none; white-space: nowrap; }
.toast-act:hover { background: rgb(255 255 255 / .24); }
.toast-x { border: 0; background: none; color: rgb(255 255 255 / .7); cursor: pointer; padding: 4px; font-size: 16px; line-height: 1; }
.toast-bar { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 1px;
  background: rgb(255 255 255 / .15); overflow: hidden; }
.toast-bar > i { display: block; height: 100%; background: rgb(255 255 255 / .6); transition: width .3s var(--ease); }

@media (max-width: 900px) {
  dialog.modal, dialog.sheet, dialog.sheet--wide, dialog.modal--wide {
    inset: auto 0 0 0; margin: 0; width: 100%; max-height: 92vh; max-height: 92dvh;
    border-radius: 20px 20px 0 0; }
  @starting-style {
    dialog.modal[open], dialog.sheet[open] { opacity: 1; transform: translateY(100%); }
  }
  .grab { display: block; width: 38px; height: 4px; border-radius: 2px; background: var(--hairline);
    margin: 8px auto 0; flex: none; }
  .sheet-head { padding: 10px 16px 12px; }
  .sheet-body { padding: 14px 16px; }
  .sheet-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .sheet-foot .btn { flex: 1 1 0; justify-content: center; min-height: 46px; }
  .toasts { left: 16px; right: 16px; bottom: 88px; width: auto; }
}

/* ==================================================================
   72 · Приложение (PWA): нет связи, установка, окно без адресной строки.
   ================================================================== */
.offline-strip { position: sticky; top: 0; z-index: 70; border-radius: 0; justify-content: center; }
.is-offline .htmx-indicator { display: none !important; }
.install-card .ctl-row { margin-top: 12px; }
.install-ios { font-size: 13.5px; color: var(--text-2); }
.install-ios b { color: var(--text-1); font-weight: 500; }
.offline-page { min-height: 70vh; display: grid; place-items: center; }

/* Запущено как приложение: под системной строкой - безопасная зона */
@media (display-mode: standalone) {
  .mtop { padding-top: max(9px, env(safe-area-inset-top)); }
  .app:not(:has(> .nav2)) > .content { padding-top: max(18px, env(safe-area-inset-top)); }
}

/* ==================================================================
   80 · Ассистент: заставка, шаблоны запросов, сообщения, композер.
   ================================================================== */
.chat-hero { text-align: center; padding: 36px 16px 28px; }
.chat-hero .h1 { font-size: 40px; line-height: 1.12; }
.chat-hero .h1 .dim { color: var(--text-2); }
.chat-hero p { max-width: 520px; margin: 14px auto 0; color: var(--text-2); font-size: 14.5px; }
.chat-mark { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; }
.chat-mark i { display: block; width: 56px; height: 1px; background: var(--hairline); }
.chat-mark b { display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); }

.tpl { display: grid; grid-template-columns: 34px 92px minmax(0, 1fr) auto; gap: 14px; align-items: center;
       padding: 14px 18px; border-bottom: 1px solid var(--hairline-soft); cursor: pointer;
       text-decoration: none; color: inherit; }
.tpl:last-child { border-bottom: 0; }
.tpl:hover { background: var(--hairline-soft); }
.tpl-tag { justify-self: start; }
.tpl-body { min-width: 0; }
.tpl-hint { display: block; font: 500 12px/1.4 var(--font-mono); color: var(--text-3); margin-top: 3px; }

.msg { max-width: 720px; font-size: 14.5px; }
.msg--me { margin-left: auto; background: var(--ink); color: var(--on-ink); padding: 12px 16px;
  border-radius: 16px 16px 4px 16px; width: fit-content; }
.msg--bot p { margin: 0 0 10px; }
.msg-src { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.msg-acts { display: flex; gap: 4px; margin-top: 6px; }
/* Идёт ответ: три точки, пока не пришёл первый фрагмент */
.typing { display: inline-flex; gap: 4px; padding: 6px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: ui-pulse 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }

.composer { display: flex; align-items: center; gap: 12px; padding: 14px 18px;
       background: var(--surface); border: 1px solid var(--hairline);
       border-radius: var(--r-card); box-shadow: var(--sh-raise); }
.composer textarea { flex: 1; border: 0; outline: 0; resize: none; background: none;
  font: 400 15px/1.4 var(--font-sans); color: var(--text-1); min-height: 24px; }
.chat-foot { position: sticky; bottom: 0; margin-top: 18px; padding: 18px 0 16px;
  background: linear-gradient(to bottom, transparent, var(--bg) 22px); }

@media (max-width: 900px) {
  .chat-hero { padding: 24px 4px 20px; }
  .chat-hero .h1 { font-size: 26px; }
  .tpl { grid-template-columns: 28px minmax(0, 1fr); row-gap: 6px; }
  .tpl-tag, .tpl-body { grid-column: 2; }
  .tpl-arrow { display: none; }
  .chat-foot { bottom: 78px; padding-bottom: 10px; }
}

/* ==================================================================
   90 · Каркас: два поля (панель nav2 + рабочая зона), телефон, вход.
   Панель: L1 (разделы) -> L2 (экраны раздела, замещает L1) -> rail (56px).
   Уровень - data-state на .nav2; рельса - <html data-nav="rail">.
   ================================================================== */
.app { display: grid; grid-template-columns: 264px minmax(0, 1fr);
  gap: 22px; padding: 18px; max-width: 1760px; margin: 0 auto; align-items: start; }
[data-nav="rail"] .app { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; }
.app > .content { min-width: 0; padding: 4px 2px 40px; min-height: calc(100vh - 36px); }
/* Экран без панели (вход, служебные страницы): одна колонка по центру */
.app:not(:has(> .nav2)) { display: block; max-width: 1320px; padding: 0; }
.app:not(:has(> .nav2)) > .content { padding: 18px 24px 48px; }

.nav2 { position: sticky; top: 18px; display: flex; flex-direction: column;
  max-height: calc(100vh - 36px); background: var(--surface);
  border-radius: var(--r-panel); box-shadow: var(--sh-panel); padding: 12px; overflow: hidden; }
.nav2 [data-level] { display: none; }
.nav2[data-state="l1"] [data-level="l1"] { display: block; }
.nav2[data-state="l2"] [data-level="l2"][data-active] { display: flex; }
.nav2-level { flex-direction: column; flex: 1; min-height: 0; }
.nav2-level .nav2-list { flex: 1; }

.nav2-logo { display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 6px 8px 10px; background: none; border: 0; cursor: pointer; color: var(--text-1); text-align: left; }
.nav2-logo .mark { width: 28px; height: 28px; border-radius: 9px; flex: none;
  background: var(--contour-accent); color: var(--contour-on);
  display: grid; place-items: center; font: 700 13px/1 var(--font-sans); }
.nav2-logo .t { font: 600 15px/1.2 var(--font-sans); display: block; }
.nav2-logo .h { font: 400 11.5px/1.3 var(--font-sans); color: var(--text-3); display: block; }

.nav2-org { display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; margin-bottom: 8px; border-radius: 11px;
  border: 1px solid var(--hairline); background: var(--surface-2);
  cursor: pointer; color: var(--text-1); text-align: left; font: inherit; }
.nav2-org:hover { background: var(--hairline-soft); }
.nav2-org--static { cursor: default; }
.nav2-org--static:hover { background: var(--surface-2); }
.nav2-org .ava { width: 22px; height: 22px; border-radius: 7px; flex: none;
  background: var(--hairline); color: var(--text-2);
  display: grid; place-items: center; font: 600 11px/1 var(--font-sans); }
.nav2-org .nm { min-width: 0; flex: 1; }
.nav2-org .t { font: 500 13px/1.25 var(--font-sans); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav2-org .h { font: 400 11px/1.3 var(--font-mono); color: var(--text-3); display: block; }
.nav2-orgmenu { margin: -2px 0 10px; padding: 4px; border: 1px solid var(--hairline);
  border-radius: 11px; background: var(--surface); max-height: 260px; overflow-y: auto; }
.nav2-orgmenu > a { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px;
  text-decoration: none; font-size: 13px; }
.nav2-orgmenu > a:hover { background: var(--hairline-soft); }
.nav2-orgmenu > a[aria-current] { background: var(--hairline); }

.nav2-list { flex: 1; overflow-y: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px; }
.nav2-list::-webkit-scrollbar { display: none; }
.nav2-list > a { display: flex; align-items: flex-start; gap: 11px;
  padding: 9px 11px; border-radius: 11px; text-decoration: none;
  color: var(--text-1); transition: background .15s var(--ease); }
.nav2-list > a:hover { background: var(--hairline-soft); }
.nav2-list > a[aria-current="page"] { background: var(--hairline); }
.nav2-list .t { font: 500 14.5px/1.3 var(--font-sans); display: block; }
.nav2-list .h { font: 400 11.5px/1.3 var(--font-sans); color: var(--text-3); display: block; margin-top: 1px; }
.nav2-list > a > .ico { color: var(--text-2); margin-top: 2px; }
.nav2-list .nm { min-width: 0; flex: 1; }
.nav2-list .chev { color: var(--text-3); margin-top: 3px; }
.nav2-list .dot-badge { margin-top: 2px; }
.nav2-list--l2 > a { padding-left: 14px; border-left: 2px solid transparent; border-radius: 0 11px 11px 0; }
.nav2-list--l2 > a[aria-current="page"] { border-left-color: var(--contour-accent); }

.nav2-back { display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 10px; margin-bottom: 8px; border-radius: 10px;
  border: 1px solid var(--hairline); background: var(--surface); cursor: pointer; color: var(--text-2);
  font: 600 11px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; }
.nav2-back:hover { background: var(--hairline-soft); color: var(--text-1); }
.nav2-sec { display: flex; align-items: flex-start; gap: 11px; padding: 4px 11px 12px;
  margin-bottom: 4px; border-bottom: 1px solid var(--hairline); }
.nav2-sec .ico { color: var(--text-2); margin-top: 2px; }
.nav2-sec .t { font: 600 16px/1.25 var(--font-sans); display: block; }
.nav2-sec .h { font: 400 11.5px/1.3 var(--font-sans); color: var(--text-3); display: block; }

.nav2-list--rail { flex-direction: column; align-items: center; gap: 4px; }
.nav2-list--rail > a { padding: 9px; justify-content: center; }
.nav2-list--rail .nav-sep { width: 24px; }

.nav2-foot { padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--hairline); }
.nav2-profile { display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 9px; border-radius: 11px; border: 0; background: none;
  cursor: pointer; color: var(--text-1); text-align: left; position: relative; font: inherit; }
.nav2-profile:hover { background: var(--hairline-soft); }
.nav2-profile .ava, .profile-pop .ava { width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--ink); color: var(--on-ink);
  display: grid; place-items: center; font: 600 11px/1 var(--font-sans); }
.nav2-profile .nm { min-width: 0; flex: 1; }
.nav2-profile .t { font: 500 13.5px/1.25 var(--font-sans); display: block; }
.nav2-profile .h { font: 400 11px/1.3 var(--font-mono); color: var(--text-3);
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 901px) {
  [data-nav="rail"] .nav2 [data-level] { display: none !important; }
  [data-nav="rail"] .nav2 [data-level="rail"] { display: flex !important; flex: 1; }
  [data-nav="rail"] :is(.nav2-org, .nav2-orgmenu, .nav2-logo .nm, .nav2-profile .nm) { display: none; }
  [data-nav="rail"] .nav2-logo { padding: 6px 0 10px; justify-content: center; }
  [data-nav="rail"] .nav2-profile { justify-content: center; padding: 7px 0; }
  [data-nav="rail"] .nav2-profile .dot-badge { position: absolute; top: 2px; right: 4px; }
}

/* Всплывающий L2 в рельсе и поповер профиля */
.nav2-fly { position: fixed; left: 78px; z-index: 80; width: 236px; max-height: 70vh; overflow-y: auto;
  padding: 12px; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-panel); box-shadow: var(--sh-panel); }
.profile-pop { position: fixed; left: 18px; bottom: 74px; z-index: 85; width: 252px;
  padding: 8px; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 16px; box-shadow: var(--sh-panel); }
.profile-pop .pp-head { display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 12px; border-bottom: 1px solid var(--hairline); margin-bottom: 6px; }
.profile-pop .t { font: 500 14px/1.25 var(--font-sans); display: block; }
.profile-pop .h { font: 400 11px/1.3 var(--font-mono); color: var(--text-3); display: block; }
.profile-pop > a, .profile-pop > button, .profile-pop form > button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 10px; border: 0; background: none;
  text-decoration: none; color: var(--text-1); cursor: pointer;
  font: 400 14px/1.3 var(--font-sans); text-align: left; }
.profile-pop > a:hover, .profile-pop > button:hover, .profile-pop form > button:hover { background: var(--hairline-soft); }
.profile-pop > a > .ico, .profile-pop > button > .ico { color: var(--text-2); }
.profile-pop :is(.pill, .m-meta, .dot-badge) { margin-left: auto; }
.profile-pop form { margin: 0; }
.profile-pop > button.pp-sub { padding-top: 2px; font-size: 12.5px; color: var(--text-3); }
.pp-palettes { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; }
.pp-palettes .m-meta { margin-left: 0; }
.pp-dots { display: flex; gap: 4px; }
.pal-dot { width: 18px; height: 18px; border-radius: 50%; padding: 0; cursor: pointer; border: 2px solid transparent; }
.pal-dot[aria-pressed="true"] { border-color: var(--text-1); }

/* Телефон: слим-бар сверху, L2 лентой, нижняя навигация, меню - шторкой */
.mtop, .tabbar, .mob-l2, .nav-scrim { display: none; }
@media (max-width: 900px) {
  .app, [data-nav="rail"] .app { display: block; padding: 0 0 78px; }
  .app:not(:has(> .nav2)) > .content { padding: 14px 16px 24px; }
  .app > .content { padding: 14px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); min-height: 0; }
  .nav2, .nav2-fly { display: none; }

  .mtop { display: flex; align-items: center; gap: 11px; padding: 9px 14px;
    position: sticky; top: 0; z-index: 55; background: var(--surface); border-bottom: 1px solid var(--hairline); }
  .mtop .ava-btn { margin-left: auto; background: var(--ink); color: var(--on-ink); font: 600 11px/1 var(--font-sans); }
  .mtop .ava-btn .dot-badge { position: absolute; top: -2px; right: -2px; }
  .mtop-title { min-width: 0; font: 600 15px/1.2 var(--font-sans);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .mob-l2 { display: block; margin: 0 0 14px; }
  .mob-l2 a { text-decoration: none; padding: 7px 13px; font-size: 13px; }

  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed;
    left: 0; right: 0; bottom: 0; z-index: 60; background: var(--surface); border-top: 1px solid var(--hairline);
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom)); }
  .tabbar a { display: grid; justify-items: center; gap: 3px; text-decoration: none; min-height: 44px;
    color: var(--text-2); font: 500 11px/1 var(--font-sans); padding: 3px 0; }
  .tabbar a[aria-current="page"] { color: var(--text-1); }

  /* Полное меню - та же панель в шторке слева */
  .nav-drawer .nav2 { display: flex; position: fixed; top: 0; bottom: 0; left: 0; z-index: 91;
    width: 292px; max-width: 86vw; max-height: none; border-radius: 0; overflow-y: auto; }
  .nav-drawer .nav-scrim { display: block; position: fixed; inset: 0; z-index: 90; background: var(--scrim); }
  .nav-drawer body { overflow: hidden; }
  .profile-pop { left: auto; right: 12px; top: 60px; bottom: auto; }
}

/* Вход и онбординг: узкая колонка по центру */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-box { width: 100%; max-width: 400px; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 26px; }
.auth-brand .mark { width: 34px; height: 34px; border-radius: 10px; background: var(--contour-accent);
  color: var(--contour-on); display: grid; place-items: center; font: 700 15px/1 var(--font-sans); }
.auth .banner-stage { position: fixed; top: 0; left: 0; right: 0; }

@media print {
  .progressive { background: #fff !important; transition: none !important; }
  .nav2, .mtop, .tabbar, .mob-l2, .nav2-fly, .nav-scrim, .profile-pop, .toasts, .bulk,
  dialog, .no-print { display: none !important; }
  .app { display: block; padding: 0; max-width: none; }
  .app > .content { padding: 0; min-height: 0; }
  .card, .tbl-wrap, .feed { box-shadow: none; }
}

/* Меню организаций: счетчик справа, поиск при длинном списке (Org.searchable) */
.nav2-org .dot-badge { margin-left: auto; }
.nav2-orgmenu > a .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav2-orgmenu > a .nm .h { display: block; font: 400 11px/1.3 var(--font-mono); color: var(--text-3); }
.nav2-orgmenu > a .m-meta { margin-left: auto; flex: none; }
.nav2-orgsearch { width: 100%; box-sizing: border-box; margin: 0 0 4px; padding: 7px 9px;
  border: 1px solid var(--hairline); border-radius: 8px; background: var(--bg); color: var(--text-1);
  font: 400 13px/1.3 var(--font-sans); position: sticky; top: 0; }
.nav2-orgnone { margin: 6px 9px; }

/* ==================================================================
   95 · Каталог /_styleguide/ (служебная страница библиотеки).
   ================================================================== */
.sg-bar { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  justify-content: space-between; padding: 12px 0; margin-bottom: 8px; background: var(--bg); border-bottom: 1px solid var(--hairline); }
.sg-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }
.sg-comp { display: grid; gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--hairline); }
.sg-comp:last-child { border-bottom: 0; }
.sg-comp > header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sg-examples { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; }
.sg-examples--wide { grid-template-columns: minmax(0, 1fr); }
.sg-rule { margin: 0; font-size: 13.5px; color: var(--text-2); }
.sg-matrix { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); }
.sg-cell { padding: 16px; border-radius: var(--r-panel); border: 1px solid var(--hairline); min-width: 0; }

/* Индекс: строка списка = живая миниатюра + имя и назначение */
.sg-filter { position: sticky; top: 61px; z-index: 40; background: var(--bg); padding: 8px 0; }
.sg-group { margin-bottom: 8px; }
.sg-item { min-width: 0; }
.sg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.sg-row { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: var(--sh-card);
  text-decoration: none; transition: box-shadow .15s var(--ease), border-color .15s var(--ease); }
.sg-row:hover { box-shadow: var(--sh-raise); border-color: var(--text-3); }
.sg-row-t { display: grid; gap: 4px; min-width: 0; }
.sg-name { font: 600 14px/1.3 var(--font-mono); text-decoration: none; }
/* Вся строка кликабельна: ссылка имени растянута на неё (вложенных <a> нет) */
.sg-name::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.sg-name:focus-visible { outline: 0; }
.sg-name:focus-visible::after { outline: 2px solid var(--text-1); outline-offset: 2px; }
.sg-sum { font-size: 13.5px; color: var(--text-2); }
.sg-thumb { position: relative; display: block; width: 200px; height: 120px; overflow: hidden;
  border-radius: 10px; background: var(--bg); border: 1px solid var(--hairline-soft); }
.sg-thumb-in { position: absolute; top: 10px; left: 10px; width: 450px; transform: scale(.4);
  transform-origin: 0 0; pointer-events: none; }
/* В миниатюре окна, панели и меню показаны на месте, а не поверх страницы */
.sg-thumb--zoom .sg-thumb-in { width: 300px; transform: scale(.6); }
.sg-thumb-parts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sg-thumb-part { min-width: 0; max-width: 100%; }
.sg-thumb dialog { display: flex; flex-direction: column; position: static; inset: auto; margin: 0;
  width: 100%; max-height: none; transform: none; }
.sg-thumb [popover] { display: grid; position: static; inset: auto; margin: 6px 0 0; }
.sg-thumb .grab { display: none; }
.sg-example { min-width: 0; }
@media (max-width: 900px) {
  .sg-filter { position: static; }
  .sg-row { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
  .sg-thumb { width: 120px; height: 84px; }
  .sg-thumb-in { top: 6px; left: 6px; transform: scale(.24); }
  .sg-thumb--zoom .sg-thumb-in { transform: scale(.36); }
}
@media (max-height: 500px) { .sg-bar, .sg-filter { position: static; } }

/* ==================================================================
   97 · Устройства ввода и размеры экрана.
   Раскладка решается шириной (одна точка перелома - 900px), а размер
   целей - типом ввода: планшет в альбоме получает раскладку компьютера,
   но палец остаётся пальцем. Поэтому зона нажатия 44×44 - по
   (pointer: coarse), а не по ширине.
   ================================================================== */
@media (pointer: coarse) {
  .btn, .btn--sm, .icon-only, .icon-btn, .close, .chip, .select-pill { min-height: 44px; }
  .icon-only, .icon-btn, .close { min-width: 44px; width: 44px; }
  .btn--sm { padding-left: 14px; padding-right: 14px; }
  .pager .btn { min-width: 44px; justify-content: center; }
  .seg > button, .seg > a { min-height: 40px; display: inline-flex; align-items: center; }
  .tabs > a, .tabs > button { min-height: 44px; }
  .check-line, .switch { min-height: 44px; align-items: center; }
  .check-line > .cb, .check-line > .rb { margin-top: 0; }
  .cb, .rb { width: 24px; height: 24px; }
  /* Флажок строки таблицы: зона нажатия - обёртка-подпись вокруг флажка */
  .sel-hit { min-width: 44px; min-height: 44px; margin: -10px; }
  /* Ссылки-действия текстом: высота строки до 44 */
  .check-foot a, .strip > a, .crumbs a, .stepper-t, .insight, .chip-reset, .toast-act, .toast-x,
  .nav2-back, .profile-pop > a, .profile-pop > button, .profile-pop form > button, .menu > a, .menu > button {
    min-height: 44px; display: inline-flex; align-items: center; }
  .crumbs a { padding: 0 6px; margin: 0 -6px; }
  /* Кружок гаммы: видно 32px, нажимается 44px */
  .pal-dot { width: 44px; height: 44px; padding: 4px; background-clip: content-box; }
  .pp-dots { flex-wrap: wrap; gap: 2px; }
  .pp-palettes { flex-wrap: wrap; }
  .profile-pop { width: min(300px, calc(100vw - 24px)); }
  .nav2-list > a, .nav2-list--l2 > a { min-height: 44px; }
  .tabbar a { min-height: 48px; }
}

/* Телефон в альбоме: высоты мало - шапка не липнет, нижняя навигация в строку */
@media (max-width: 900px) and (max-height: 500px) {
  .mtop { position: static; }
  .tabbar { padding-top: 2px; padding-bottom: calc(2px + env(safe-area-inset-bottom)); }
  .tabbar a { grid-auto-flow: column; align-items: center; justify-content: center; gap: 6px; min-height: 44px; }
  .app, [data-nav="rail"] .app { padding-bottom: 56px; }
  .sticky-ctl, .main-act.stick { position: static; }
  dialog.modal, dialog.sheet { max-height: 100dvh; border-radius: 0; }
}

/* Без мыши нет наведения: подсказка - по фокусу (тап), а не по hover */
@media (hover: none) {
  [data-ui-tip]:hover::after { opacity: 0; }
  [data-ui-tip]:focus-visible::after, [data-ui-tip]:focus::after { opacity: 1; }
}

/* Телефон: поле мельче 16px iOS увеличивает при фокусе - страница «прыгает» */
@media (max-width: 900px) {
  .inp, .search input, .composer textarea, select.inp { font-size: 16px; }
}

/* Большие мониторы: строка текста не шире читаемой, сетки не растягиваются бесконечно */
@media (min-width: 1900px) {
  .page-sub, .card-sub, .sg-rule { max-width: 90ch; }
}