/* Тема «Заветы»: монохром как zavety.studio (#000/#fff, серый #858585, линии #c4c4c4), акцент #eb5757.
   Подключается после colors_and_type.css Slipstream и перекрывает его токены. */
html[data-theme="zavety"] {
  --canvas: #000; --surface-1: #0a0a0a; --surface-2: #141414; --surface-3: #1f1f1f;
  --hairline: rgba(255,255,255,.16); --hairline-soft: rgba(255,255,255,.09);
  --card-glass: #0a0a0a; --nav-glass: rgba(0,0,0,.86); --pop-bg: #141414; --overlay: rgba(0,0,0,.72);
  --fg-1: #fff; --fg-2: #c4c4c4; --fg-3: #858585;
  --ga: #ffffff; --gm: #ffffff; --gc: #ffffff; --acc: #eb5757; --on-grad: #000;
  --ga-rgb: 255,255,255; --gm-rgb: 255,255,255; --gc-rgb: 255,255,255; --acc-rgb: 235,87,87;
  --brand-grad: linear-gradient(#fff, #fff); --brand-grad-soft: rgba(255,255,255,.07);
  --font-body: "CoFo Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-head: var(--font-body); --font-display: var(--font-body); --font-mono: var(--font-body);
  --t-h1: 500 34px/1.05 var(--font-body); --t-h2: 500 22px/1.2 var(--font-body);
  --shadow-card: none; --z-lime: #DFFF4F;
}
html[data-theme="zavety"][data-mode="light"] {
  --canvas: #fff; --surface-1: #fff; --surface-2: #f4f4f4; --surface-3: #e9e9e9;
  --hairline: rgba(0,0,0,.18); --hairline-soft: rgba(0,0,0,.09);
  --card-glass: #fff; --nav-glass: rgba(255,255,255,.88); --pop-bg: #fff; --overlay: rgba(0,0,0,.5);
  --fg-1: #000; --fg-2: #3a3a3a; --fg-3: #858585;
  --ga: #000; --gm: #000; --gc: #000; --acc: #d94545; --on-grad: #fff;
  --ga-rgb: 0,0,0; --gm-rgb: 0,0,0; --gc-rgb: 0,0,0; --acc-rgb: 217,69,69;
  --brand-grad: linear-gradient(#000, #000); --brand-grad-soft: rgba(0,0,0,.05);
}
html[data-theme="zavety"] body { letter-spacing: -0.005em; }
html[data-theme="zavety"] h1 { letter-spacing: -0.025em; }
.z-eyebrow { font: 500 11.5px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-1); }
.z-muted { color: var(--fg-3); }
.z-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.z-row-hit { outline: 2px solid var(--accent); outline-offset: -2px; }
.z-table td, .z-table th { border-right: 1px solid var(--hairline-soft); }
.z-table td:last-child, .z-table th:last-child { border-right: none; }
.z-thumb { transition: transform .15s ease; }
.z-thumb:hover { transform: scale(1.04); }
@keyframes z-flash { 0% { background: rgba(var(--acc-rgb), .35); } 100% { background: transparent; } }
.z-flash { animation: z-flash 1.6s ease; }
@keyframes z-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── темы оформления (palettes.js): html[data-palette] поверх темы «Заветы»; у каждой — тёмная и светлая ── */
html[data-palette="silver"][data-mode="dark"] {
  --canvas: #0e1013; --surface-1: #15181c; --surface-2: #1c2026; --surface-3: #252a31;
  --hairline: rgba(220,228,238,0.16); --hairline-soft: rgba(220,228,238,0.09);
  --card-glass: #15181c; --nav-glass: #15181c; --pop-bg: #1c2026; --overlay: rgba(0,0,0,0.7);
  --fg-1: #eef1f5; --fg-2: #b9c0c9; --fg-3: #7f8893;
  --ga: #f4f6f9; --gm: #aeb6c1; --gc: #e3e8ee; --acc: #9fc0de; --on-grad: #0e1013;
  --ga-rgb: 244,246,249; --gm-rgb: 174,182,193; --gc-rgb: 227,232,238; --acc-rgb: 159,192,222;
  --brand-grad: linear-gradient(115deg, #f4f6f9 0%, #aeb6c1 48%, #e3e8ee 100%); --brand-grad-soft: rgba(174,182,193,0.12);
  --z-sheen: radial-gradient(120% 70% at 0% 0%, rgba(244,246,249,0.1) 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(227,232,238,0.08) 0%, transparent 65%);
}
html[data-palette="silver"][data-mode="light"] {
  --canvas: #eef0f3; --surface-1: #f8f9fb; --surface-2: #e6e9ee; --surface-3: #d9dde3;
  --hairline: rgba(40,50,62,0.17); --hairline-soft: rgba(40,50,62,0.085);
  --card-glass: #f8f9fb; --nav-glass: #f8f9fb; --pop-bg: #e6e9ee; --overlay: rgba(0,0,0,0.45);
  --fg-1: #14171b; --fg-2: #3e454e; --fg-3: #78818c;
  --ga: #3d4652; --gm: #8d97a3; --gc: #2b323b; --acc: #4f7aa3; --on-grad: #ffffff;
  --ga-rgb: 61,70,82; --gm-rgb: 141,151,163; --gc-rgb: 43,50,59; --acc-rgb: 79,122,163;
  --brand-grad: linear-gradient(115deg, #3d4652 0%, #8d97a3 48%, #2b323b 100%); --brand-grad-soft: rgba(141,151,163,0.1);
  --z-sheen: radial-gradient(120% 70% at 0% 0%, rgba(61,70,82,0.14) 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(43,50,59,0.1) 0%, transparent 65%);
}
html[data-palette="gold"][data-mode="dark"] {
  --canvas: #0c0a07; --surface-1: #14110b; --surface-2: #1c1810; --surface-3: #272116;
  --hairline: rgba(232,196,120,0.16); --hairline-soft: rgba(232,196,120,0.09);
  --card-glass: #14110b; --nav-glass: #14110b; --pop-bg: #1c1810; --overlay: rgba(0,0,0,0.7);
  --fg-1: #f6ecd6; --fg-2: #cdbb93; --fg-3: #8f7f5e;
  --ga: #f7e2a4; --gm: #d4a44a; --gc: #a8772a; --acc: #e2b65a; --on-grad: #0c0a07;
  --ga-rgb: 247,226,164; --gm-rgb: 212,164,74; --gc-rgb: 168,119,42; --acc-rgb: 226,182,90;
  --brand-grad: linear-gradient(115deg, #f7e2a4 0%, #d4a44a 48%, #a8772a 100%); --brand-grad-soft: rgba(212,164,74,0.12);
  --z-sheen: radial-gradient(120% 70% at 0% 0%, rgba(247,226,164,0.1) 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(168,119,42,0.08) 0%, transparent 65%);
}
html[data-palette="gold"][data-mode="light"] {
  --canvas: #f6f0e2; --surface-1: #fffaf0; --surface-2: #efe5cf; --surface-3: #e5d7b8;
  --hairline: rgba(90,66,20,0.17); --hairline-soft: rgba(90,66,20,0.085);
  --card-glass: #fffaf0; --nav-glass: #fffaf0; --pop-bg: #efe5cf; --overlay: rgba(0,0,0,0.45);
  --fg-1: #1e1709; --fg-2: #4b3d22; --fg-3: #8c7a55;
  --ga: #c79a3a; --gm: #8a6420; --gc: #d9b25c; --acc: #a87622; --on-grad: #ffffff;
  --ga-rgb: 199,154,58; --gm-rgb: 138,100,32; --gc-rgb: 217,178,92; --acc-rgb: 168,118,34;
  --brand-grad: linear-gradient(115deg, #c79a3a 0%, #8a6420 48%, #d9b25c 100%); --brand-grad-soft: rgba(138,100,32,0.1);
  --z-sheen: radial-gradient(120% 70% at 0% 0%, rgba(199,154,58,0.14) 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(217,178,92,0.1) 0%, transparent 65%);
}
html[data-palette="graphite"][data-mode="dark"] {
  --canvas: #151719; --surface-1: #1b1e21; --surface-2: #222529; --surface-3: #2b2f34;
  --hairline: rgba(233,235,238,0.16); --hairline-soft: rgba(233,235,238,0.09);
  --card-glass: #1b1e21; --nav-glass: #1b1e21; --pop-bg: #222529; --overlay: rgba(0,0,0,0.7);
  --fg-1: #e9ebee; --fg-2: #b3b8bf; --fg-3: #7e848c;
  --ga: #e9ebee; --gm: #e9ebee; --gc: #e9ebee; --acc: #ff8a3d; --on-grad: #151719;
  --ga-rgb: 233,235,238; --gm-rgb: 233,235,238; --gc-rgb: 233,235,238; --acc-rgb: 255,138,61;
  --brand-grad: linear-gradient(#e9ebee, #e9ebee); --brand-grad-soft: rgba(233,235,238,0.12);
  --z-sheen: radial-gradient(120% 70% at 0% 0%, rgba(233,235,238,0.1) 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(233,235,238,0.08) 0%, transparent 65%);
}
html[data-palette="graphite"][data-mode="light"] {
  --canvas: #e7e8ea; --surface-1: #f1f2f3; --surface-2: #dcdee1; --surface-3: #cfd2d6;
  --hairline: rgba(26,28,31,0.17); --hairline-soft: rgba(26,28,31,0.085);
  --card-glass: #f1f2f3; --nav-glass: #f1f2f3; --pop-bg: #dcdee1; --overlay: rgba(0,0,0,0.45);
  --fg-1: #1a1c1f; --fg-2: #3f444a; --fg-3: #757b83;
  --ga: #1a1c1f; --gm: #1a1c1f; --gc: #1a1c1f; --acc: #e8692a; --on-grad: #ffffff;
  --ga-rgb: 26,28,31; --gm-rgb: 26,28,31; --gc-rgb: 26,28,31; --acc-rgb: 232,105,42;
  --brand-grad: linear-gradient(#1a1c1f, #1a1c1f); --brand-grad-soft: rgba(26,28,31,0.1);
  --z-sheen: radial-gradient(120% 70% at 0% 0%, rgba(26,28,31,0.14) 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(26,28,31,0.1) 0%, transparent 65%);
}
html[data-palette="stone"][data-mode="dark"] {
  --canvas: #17130f; --surface-1: #1e1914; --surface-2: #26201a; --surface-3: #312921;
  --hairline: rgba(230,214,190,0.16); --hairline-soft: rgba(230,214,190,0.09);
  --card-glass: #1e1914; --nav-glass: #1e1914; --pop-bg: #26201a; --overlay: rgba(0,0,0,0.7);
  --fg-1: #f1e9dc; --fg-2: #c9bba5; --fg-3: #8d7f6c;
  --ga: #e8dccb; --gm: #c4ab8a; --gc: #a98a66; --acc: #d08a5f; --on-grad: #17130f;
  --ga-rgb: 232,220,203; --gm-rgb: 196,171,138; --gc-rgb: 169,138,102; --acc-rgb: 208,138,95;
  --brand-grad: linear-gradient(115deg, #e8dccb 0%, #c4ab8a 48%, #a98a66 100%); --brand-grad-soft: rgba(196,171,138,0.12);
  --z-sheen: radial-gradient(120% 70% at 0% 0%, rgba(232,220,203,0.1) 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(169,138,102,0.08) 0%, transparent 65%);
}
html[data-palette="stone"][data-mode="light"] {
  --canvas: #ece4d6; --surface-1: #f6f0e6; --surface-2: #e3d8c6; --surface-3: #d6c8b2;
  --hairline: rgba(60,46,30,0.17); --hairline-soft: rgba(60,46,30,0.085);
  --card-glass: #f6f0e6; --nav-glass: #f6f0e6; --pop-bg: #e3d8c6; --overlay: rgba(0,0,0,0.45);
  --fg-1: #2a2219; --fg-2: #56483a; --fg-3: #8a7b68;
  --ga: #5c4a37; --gm: #8a7258; --gc: #3c3026; --acc: #b4623a; --on-grad: #ffffff;
  --ga-rgb: 92,74,55; --gm-rgb: 138,114,88; --gc-rgb: 60,48,38; --acc-rgb: 180,98,58;
  --brand-grad: linear-gradient(115deg, #5c4a37 0%, #8a7258 48%, #3c3026 100%); --brand-grad-soft: rgba(138,114,88,0.1);
  --z-sheen: radial-gradient(120% 70% at 0% 0%, rgba(92,74,55,0.14) 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(60,48,38,0.1) 0%, transparent 65%);
}
html[data-palette="malachite"][data-mode="dark"] {
  --canvas: #06110c; --surface-1: #0a1912; --surface-2: #0f2219; --surface-3: #152d22;
  --hairline: rgba(160,220,190,0.16); --hairline-soft: rgba(160,220,190,0.09);
  --card-glass: #0a1912; --nav-glass: #0a1912; --pop-bg: #0f2219; --overlay: rgba(0,0,0,0.7);
  --fg-1: #e6f3ec; --fg-2: #a9c7b7; --fg-3: #6f9282;
  --ga: #3fbf8a; --gm: #1f8f63; --gc: #d6b46c; --acc: #d6b46c; --on-grad: #06110c;
  --ga-rgb: 63,191,138; --gm-rgb: 31,143,99; --gc-rgb: 214,180,108; --acc-rgb: 214,180,108;
  --brand-grad: linear-gradient(115deg, #3fbf8a 0%, #1f8f63 48%, #d6b46c 100%); --brand-grad-soft: rgba(31,143,99,0.12);
  --z-sheen: radial-gradient(120% 70% at 0% 0%, rgba(63,191,138,0.1) 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(214,180,108,0.08) 0%, transparent 65%);
}
html[data-palette="malachite"][data-mode="light"] {
  --canvas: #e7f0eb; --surface-1: #f3f8f5; --surface-2: #d9e8df; --surface-3: #c9ddd1;
  --hairline: rgba(12,60,40,0.17); --hairline-soft: rgba(12,60,40,0.085);
  --card-glass: #f3f8f5; --nav-glass: #f3f8f5; --pop-bg: #d9e8df; --overlay: rgba(0,0,0,0.45);
  --fg-1: #0b2218; --fg-2: #2e4e3f; --fg-3: #678a79;
  --ga: #13704d; --gm: #1f8f63; --gc: #9a7a2c; --acc: #9a7a2c; --on-grad: #ffffff;
  --ga-rgb: 19,112,77; --gm-rgb: 31,143,99; --gc-rgb: 154,122,44; --acc-rgb: 154,122,44;
  --brand-grad: linear-gradient(115deg, #13704d 0%, #1f8f63 48%, #9a7a2c 100%); --brand-grad-soft: rgba(31,143,99,0.1);
  --z-sheen: radial-gradient(120% 70% at 0% 0%, rgba(19,112,77,0.14) 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(154,122,44,0.1) 0%, transparent 65%);
}
html[data-palette="obsidian"][data-mode="dark"] {
  --canvas: #09080d; --surface-1: #0f0e15; --surface-2: #16141e; --surface-3: #1f1c29;
  --hairline: rgba(200,190,255,0.16); --hairline-soft: rgba(200,190,255,0.09);
  --card-glass: #0f0e15; --nav-glass: #0f0e15; --pop-bg: #16141e; --overlay: rgba(0,0,0,0.7);
  --fg-1: #efecf8; --fg-2: #bdb6d4; --fg-3: #857d9e;
  --ga: #c6b4ff; --gm: #8a6cf0; --gc: #5ad1e6; --acc: #a385ff; --on-grad: #09080d;
  --ga-rgb: 198,180,255; --gm-rgb: 138,108,240; --gc-rgb: 90,209,230; --acc-rgb: 163,133,255;
  --brand-grad: linear-gradient(115deg, #c6b4ff 0%, #8a6cf0 48%, #5ad1e6 100%); --brand-grad-soft: rgba(138,108,240,0.12);
  --z-sheen: radial-gradient(120% 70% at 0% 0%, rgba(198,180,255,0.1) 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(90,209,230,0.08) 0%, transparent 65%);
}
html[data-palette="obsidian"][data-mode="light"] {
  --canvas: #efedf5; --surface-1: #f8f7fc; --surface-2: #e5e1f0; --surface-3: #d8d2e8;
  --hairline: rgba(40,30,80,0.17); --hairline-soft: rgba(40,30,80,0.085);
  --card-glass: #f8f7fc; --nav-glass: #f8f7fc; --pop-bg: #e5e1f0; --overlay: rgba(0,0,0,0.45);
  --fg-1: #15121f; --fg-2: #3d3754; --fg-3: #7a7393;
  --ga: #6a4bd8; --gm: #3f2c9c; --gc: #2a9bb0; --acc: #6a4bd8; --on-grad: #ffffff;
  --ga-rgb: 106,75,216; --gm-rgb: 63,44,156; --gc-rgb: 42,155,176; --acc-rgb: 106,75,216;
  --brand-grad: linear-gradient(115deg, #6a4bd8 0%, #3f2c9c 48%, #2a9bb0 100%); --brand-grad-soft: rgba(63,44,156,0.1);
  --z-sheen: radial-gradient(120% 70% at 0% 0%, rgba(106,75,216,0.14) 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(42,155,176,0.1) 0%, transparent 65%);
}
html[data-palette="bronze"][data-mode="dark"] {
  --canvas: #110d0a; --surface-1: #18130f; --surface-2: #201914; --surface-3: #2a211a;
  --hairline: rgba(230,195,150,0.16); --hairline-soft: rgba(230,195,150,0.09);
  --card-glass: #18130f; --nav-glass: #18130f; --pop-bg: #201914; --overlay: rgba(0,0,0,0.7);
  --fg-1: #f3e6d6; --fg-2: #cdb497; --fg-3: #907860;
  --ga: #e9c39a; --gm: #b9824e; --gc: #7a4f2c; --acc: #62b9a4; --on-grad: #110d0a;
  --ga-rgb: 233,195,154; --gm-rgb: 185,130,78; --gc-rgb: 122,79,44; --acc-rgb: 98,185,164;
  --brand-grad: linear-gradient(115deg, #e9c39a 0%, #b9824e 48%, #7a4f2c 100%); --brand-grad-soft: rgba(185,130,78,0.12);
  --z-sheen: radial-gradient(120% 70% at 0% 0%, rgba(233,195,154,0.1) 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(122,79,44,0.08) 0%, transparent 65%);
}
html[data-palette="bronze"][data-mode="light"] {
  --canvas: #f1e8de; --surface-1: #faf4ee; --surface-2: #e9dccd; --surface-3: #ddcbb6;
  --hairline: rgba(70,45,20,0.17); --hairline-soft: rgba(70,45,20,0.085);
  --card-glass: #faf4ee; --nav-glass: #faf4ee; --pop-bg: #e9dccd; --overlay: rgba(0,0,0,0.45);
  --fg-1: #26190f; --fg-2: #553e2a; --fg-3: #8c735a;
  --ga: #9a6534; --gm: #c08a52; --gc: #6e4524; --acc: #2f8a76; --on-grad: #ffffff;
  --ga-rgb: 154,101,52; --gm-rgb: 192,138,82; --gc-rgb: 110,69,36; --acc-rgb: 47,138,118;
  --brand-grad: linear-gradient(115deg, #9a6534 0%, #c08a52 48%, #6e4524 100%); --brand-grad-soft: rgba(192,138,82,0.1);
  --z-sheen: radial-gradient(120% 70% at 0% 0%, rgba(154,101,52,0.14) 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(110,69,36,0.1) 0%, transparent 65%);
}
html[data-palette]:not([data-palette="zavety"]) body { background: var(--z-sheen), var(--canvas); background-attachment: fixed; }
html[data-palette]:not([data-palette="zavety"]) .z-side { background: linear-gradient(180deg, color-mix(in oklab, var(--ga) 7%, var(--surface-1)) 0%, var(--surface-1) 40%, color-mix(in oklab, var(--gc) 6%, var(--surface-1)) 100%); }
/* металлы: заголовки и логотип — полированным градиентом */
html[data-palette="silver"] main h1, html[data-palette="gold"] main h1, html[data-palette="bronze"] main h1, html[data-palette="malachite"] main h1, html[data-palette="obsidian"] main h1 {
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html[data-palette="silver"] .z-logo, html[data-palette="gold"] .z-logo, html[data-palette="bronze"] .z-logo { color: var(--gm) !important; filter: drop-shadow(0 0 10px rgba(var(--ga-rgb), .25)); }

/* ── телефон и планшет в портрете (≤ 900px, как MOBILE_Q в mobile.jsx): боковое меню — в шторке, вкладки внизу (mobile.jsx); здесь — подстройка экранов ── */
@media (max-width: 900px) {
  html[data-theme] { --t-h1: 500 26px/1.12 var(--font-body); --t-h2: 500 19px/1.2 var(--font-body); }
  html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
  /* сетки на несколько колонок складываем в одну (кроме помеченных data-grid) */
  main [style*="grid-template-columns"]:not([data-grid]) { grid-template-columns: minmax(0, 1fr) !important; }
  /* широкие таблицы листаются внутри себя, страница не уезжает вбок */
  main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  main table > thead, main table > tbody { min-width: 640px; }
  /* iOS увеличивает страницу при фокусе на поле со шрифтом меньше 16px */
  input, select, textarea { font-size: 16px !important; }
  /* поля с фиксированной шириной не шире экрана */
  main input, main select, main textarea { max-width: 100%; }
  main img { max-width: 100%; height: auto; }
  .z-hide-m { display: none !important; }
}

/* ── «кто что правит»: строка, которую сейчас редактирует другой человек (presence.js) ── */
[data-busy] { outline: 2px solid #F2C94C !important; outline-offset: -2px; }
tr[data-busy] > td { background-color: rgba(242, 201, 76, .10); }
[data-busy-cell] { background-color: rgba(242, 201, 76, .32) !important; }
[data-busy-label] { position: relative; }
[data-busy-label]::before { content: "✎ " attr(data-busy-label) " правит"; position: absolute; top: -9px; left: 6px; z-index: 6; padding: 1px 7px; border-radius: 7px; background: #F2C94C; color: #111; font: 600 10.5px/15px var(--font-body); white-space: nowrap; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,.18); }

/* захват поля: поле, которое сейчас правит другой, — только чтение */
[data-locked] { cursor: not-allowed !important; opacity: .55; }