/* Тема «Заветы»: монохром как 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="wood"][data-mode="dark"] {
  --canvas: #140d07; --surface-1: #1d140c; --surface-2: #271b10; --surface-3: #332417;
  --hairline: rgba(230,195,154,0.16); --hairline-soft: rgba(230,195,154,0.09);
  --card-glass: #1d140c; --nav-glass: #1d140c; --pop-bg: #271b10; --overlay: rgba(0,0,0,0.7);
  --fg-1: #f5e8d6; --fg-2: #d2b896; --fg-3: #977c5f;
  --ga: #f0c894; --gm: #c98a4e; --gc: #8a5a32; --acc: #e9a058; --on-grad: #140d07;
  --ga-rgb: 240,200,148; --gm-rgb: 201,138,78; --gc-rgb: 138,90,50; --acc-rgb: 233,160,88;
  --brand-grad: linear-gradient(115deg, #f0c894 0%, #c98a4e 48%, #8a5a32 100%); --brand-grad-soft: rgba(201,138,78,0.12);
  --z-sheen: radial-gradient(120% 70% at 0% 0%, rgba(240,200,148,0.1) 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(138,90,50,0.08) 0%, transparent 65%);
}
html[data-palette="wood"][data-mode="light"] {
  --canvas: #efe2cd; --surface-1: #faf3e8; --surface-2: #eadbc3; --surface-3: #dfcbad;
  --hairline: rgba(60,40,20,0.17); --hairline-soft: rgba(60,40,20,0.085);
  --card-glass: #faf3e8; --nav-glass: #faf3e8; --pop-bg: #eadbc3; --overlay: rgba(0,0,0,0.45);
  --fg-1: #2b1b0e; --fg-2: #5b4129; --fg-3: #8c6f52;
  --ga: #8a5a32; --gm: #b47a44; --gc: #5f3b1c; --acc: #a85a20; --on-grad: #ffffff;
  --ga-rgb: 138,90,50; --gm-rgb: 180,122,68; --gc-rgb: 95,59,28; --acc-rgb: 168,90,32;
  --brand-grad: linear-gradient(115deg, #8a5a32 0%, #b47a44 48%, #5f3b1c 100%); --brand-grad-soft: rgba(180,122,68,0.1);
  --z-sheen: radial-gradient(120% 70% at 0% 0%, rgba(138,90,50,0.14) 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(95,59,28,0.1) 0%, transparent 65%);
}
html[data-palette="marble"][data-mode="dark"] {
  --canvas: #0b0b0d; --surface-1: #121215; --surface-2: #1a1a1e; --surface-3: #24242a;
  --hairline: rgba(232,227,218,0.16); --hairline-soft: rgba(232,227,218,0.09);
  --card-glass: #121215; --nav-glass: #121215; --pop-bg: #1a1a1e; --overlay: rgba(0,0,0,0.7);
  --fg-1: #f4f1ec; --fg-2: #c6c1b8; --fg-3: #8a857d;
  --ga: #f6f2ea; --gm: #cfc6b6; --gc: #cfae6e; --acc: #d4b16f; --on-grad: #0b0b0d;
  --ga-rgb: 246,242,234; --gm-rgb: 207,198,182; --gc-rgb: 207,174,110; --acc-rgb: 212,177,111;
  --brand-grad: linear-gradient(115deg, #f6f2ea 0%, #cfc6b6 48%, #cfae6e 100%); --brand-grad-soft: rgba(207,198,182,0.12);
  --z-sheen: radial-gradient(120% 70% at 0% 0%, rgba(246,242,234,0.1) 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(207,174,110,0.08) 0%, transparent 65%);
}
html[data-palette="marble"][data-mode="light"] {
  --canvas: #f3f1ed; --surface-1: #ffffff; --surface-2: #efece7; --surface-3: #e4e0d9;
  --hairline: rgba(42,38,34,0.17); --hairline-soft: rgba(42,38,34,0.085);
  --card-glass: #ffffff; --nav-glass: #ffffff; --pop-bg: #efece7; --overlay: rgba(0,0,0,0.45);
  --fg-1: #1b1a18; --fg-2: #47433e; --fg-3: #86817a;
  --ga: #3a3631; --gm: #7d766c; --gc: #a8864a; --acc: #9c7a3e; --on-grad: #ffffff;
  --ga-rgb: 58,54,49; --gm-rgb: 125,118,108; --gc-rgb: 168,134,74; --acc-rgb: 156,122,62;
  --brand-grad: linear-gradient(115deg, #3a3631 0%, #7d766c 48%, #a8864a 100%); --brand-grad-soft: rgba(125,118,108,0.1);
  --z-sheen: radial-gradient(120% 70% at 0% 0%, rgba(58,54,49,0.14) 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, rgba(168,134,74,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-theme="zavety"] { --link: var(--acc);
  --d-art: #B98CFF; --d-props: #F5B84B; --d-costume: #FF8FB1; --d-makeup: #FFB070; --d-camera: #38BDF8; --d-light: #FFE066; --d-sound: #3DD68C;
  --logo-a: var(--fg-1); --logo-b: var(--fg-1); --logo-c: var(--fg-1); }
html[data-palette]:not([data-palette="zavety"]) {
  --link: color-mix(in oklab, var(--acc) 85%, var(--fg-1));
  --positive: color-mix(in oklab, #3DD68C 55%, var(--ga)); --negative: color-mix(in oklab, #FF6B7A 62%, var(--acc));
  --warning: color-mix(in oklab, #F5B84B 58%, var(--gc)); --info: color-mix(in oklab, #38BDF8 38%, var(--ga));
  --d-art: color-mix(in oklab, #B98CFF 45%, var(--gm)); --d-props: color-mix(in oklab, #F5B84B 45%, var(--gm)); --d-costume: color-mix(in oklab, #FF8FB1 45%, var(--gm));
  --d-makeup: color-mix(in oklab, #FFB070 45%, var(--gm)); --d-camera: color-mix(in oklab, #38BDF8 45%, var(--gm)); --d-light: color-mix(in oklab, #FFE066 45%, var(--gm));
  --d-sound: color-mix(in oklab, #3DD68C 45%, var(--gm));
  --status-true-bg: color-mix(in oklab, var(--positive) 13%, transparent); --status-pending-bg: color-mix(in oklab, var(--warning) 14%, transparent); --status-cancel-bg: color-mix(in oklab, var(--negative) 13%, transparent);
  --logo-a: var(--fg-1); --logo-b: var(--acc); --logo-c: var(--fg-1); }
html[data-palette]:not([data-palette="zavety"])[data-mode="light"] {
  --positive: color-mix(in oklab, #15803D 60%, var(--ga)); --negative: color-mix(in oklab, #C2283A 65%, var(--acc));
  --warning: color-mix(in oklab, #B7791F 60%, var(--gc)); --info: color-mix(in oklab, #0369A1 45%, var(--ga));
  --d-art: color-mix(in oklab, #7C4DD6 50%, var(--gm)); --d-props: color-mix(in oklab, #B7791F 50%, var(--gm)); --d-costume: color-mix(in oklab, #C2407A 50%, var(--gm));
  --d-makeup: color-mix(in oklab, #C2671F 50%, var(--gm)); --d-camera: color-mix(in oklab, #0369A1 50%, var(--gm)); --d-light: color-mix(in oklab, #A8860A 50%, var(--gm));
  --d-sound: color-mix(in oklab, #15803D 50%, var(--gm)); }
/* металлы: знак — полированный градиент металла */
html[data-palette="silver"], html[data-palette="gold"], html[data-palette="bronze"] { --logo-a: var(--ga); --logo-b: var(--gm); --logo-c: var(--gc); }
html[data-palette="wood"], html[data-palette="marble"] { --logo-a: var(--ga); --logo-b: var(--acc); --logo-c: var(--gm); }
html[data-palette="wood"] main h1, html[data-palette="marble"] main h1, html[data-palette="stone"] main h1, html[data-palette="graphite"] main h1 {
  background: linear-gradient(115deg, var(--fg-1) 0%, var(--acc) 70%, var(--fg-1) 130%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.z-logo { filter: drop-shadow(0 0 10px rgba(var(--acc-rgb), .18)); }
html[data-palette="zavety"] .z-logo { filter: none; }

/* ── акцент: меню, подписи, ссылки, фокус ── */
.z-nav { background: transparent; color: var(--fg-2); transition: background .12s, color .12s; }
.z-nav svg { color: color-mix(in oklab, var(--acc) 35%, var(--fg-3)); transition: color .12s; }
.z-nav:hover { background: color-mix(in oklab, var(--acc) 8%, transparent); color: var(--fg-1); }
.z-nav[data-on] { background: color-mix(in oklab, var(--acc) 17%, transparent); color: var(--fg-1); box-shadow: inset 3px 0 0 var(--acc); }
.z-nav[data-on] svg { color: var(--acc); }
.z-side[data-slim] .z-nav[data-on] { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--acc) 55%, transparent); }
html[data-palette]:not([data-palette="zavety"]) .z-eyebrow:not(.z-muted) { color: color-mix(in oklab, var(--acc) 75%, var(--fg-1)); }
main a[href^="https://t.me"] { color: var(--link) !important; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
::selection { background: color-mix(in oklab, var(--acc) 40%, transparent); }

/* ── фактура (дерево, камень): html[data-tex="1"] + --z-tex (textures.js). Слой фиксирован — при прокрутке не перерисовывается ── */
html[data-tex="1"][data-palette] body { background: var(--canvas); }
html[data-tex="1"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(color-mix(in srgb, var(--canvas) 38%, transparent), color-mix(in srgb, var(--canvas) 38%, transparent)), var(--z-sheen, none), var(--z-tex); background-size: auto, auto, 520px 520px; }
html[data-tex="1"][data-mode="light"] body::before { background: linear-gradient(color-mix(in srgb, var(--canvas) 30%, transparent), color-mix(in srgb, var(--canvas) 30%, transparent)), var(--z-tex); background-size: auto, 520px 520px; }
html[data-tex="1"] #root, html[data-tex="1"] body > div { background: transparent; }
html[data-tex="1"] .z-side { background: linear-gradient(color-mix(in srgb, var(--surface-1) 72%, transparent), color-mix(in srgb, var(--surface-1) 72%, transparent)), var(--z-tex) !important; background-size: auto, 520px 520px !important; backdrop-filter: none !important; }
html[data-tex="1"] [data-testid="side-head"] { background: transparent !important; }
html[data-tex="1"] [data-testid="topbar"] { background: color-mix(in srgb, var(--canvas) 82%, transparent) !important; backdrop-filter: blur(10px); }
html[data-tex="1"] .ss-card { background-image: linear-gradient(color-mix(in srgb, var(--surface-1) 86%, transparent), color-mix(in srgb, var(--surface-1) 86%, transparent)), var(--z-tex) !important; background-size: auto, 520px 520px !important; }
html[data-tex="1"][data-mode="light"] .ss-card { background-image: linear-gradient(color-mix(in srgb, var(--surface-1) 80%, transparent), color-mix(in srgb, var(--surface-1) 80%, transparent)), var(--z-tex) !important; }


/* ── телефон и планшет в портрете (≤ 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; }

/* барабан узкой панели — без полосы прокрутки */
[data-testid="side-drum"]::-webkit-scrollbar { display: none; }

/* счётчик в переключателях (Segmented из Slipstream): там его стиль живёт в CSS сайдбара Slipstream, который «Смена» не подключает —
   без этого «1» висела голой цифрой сверху. Делаем как бейдж в меню: красная пилюля по центру строки. */
.ss-count { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 9px;
  background: var(--accent); color: var(--on-acc, #fff); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; vertical-align: middle; }


/* Шапки таблиц едут с прокруткой — везде (просьба пользователя 13.10). Только компьютер: на телефоне таблицы — карточки/прокрутка вбок.
   1) карточка: overflow clip вместо hidden — углы режутся так же, но clip НЕ создаёт контейнер прокрутки, и sticky внутри работает от окна;
   2) th прилипает под шапку с «Режимом правки» (--topbar-h), фон сплошной (карточка поверх холста), чтобы строки не просвечивали;
   3) обёртки .z-hs (прокрутка вбок) на компьютере не режут — иначе sticky прилипает к ним, а не к окну.
   Свои sticky в inline-стилях (шутинг, окно со сценами) важнее этого правила. Таблица, которой не надо, — data-nosticky. */
@media (min-width: 901px) {
  main .ss-card { overflow: clip !important; }
  main .z-hs { overflow: visible !important; }
  main table:not([data-nosticky]) > thead > tr > th {
    position: sticky; top: var(--topbar-h, 0px); z-index: 4;
    background: linear-gradient(var(--surface-1), var(--surface-1)), var(--canvas);
    box-shadow: inset 0 -1px 0 var(--hairline);
  }
}