/* ═════════ «Лаборатория дизайна» — пробный вид, только html[data-lab] (js/85_dz4-lab.js) ═════════
   Вайб kokonutui (~/work/kokonutui): спокойная серая база, один акцент, текст 14px, линейные значки
   16–18px без подложек, воздух вместо линий, мягкие тени, радиусы 10–12px, переходы 150–200 мс.
   Цвета — только токены кабинета. Всё, что здесь, — проба: в рабочий вид переносится после «ок» владельца. */

/* ── блок в «Оформлении» ── */
.dz4-labbox{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding:14px 16px;
  border:1px dashed var(--line);border-radius:12px;background:var(--sunken)}
.dz4-labbox-t{display:flex;flex-direction:column;gap:3px}
.dz4-labbox-t b{font-size:14px;color:var(--ink)}
.dz4-labbox-t small{font-size:12.5px;color:var(--muted)}
.dz4-labsw{display:inline-flex;align-items:center;gap:10px;padding:4px 12px 4px 4px;border:1px solid var(--line);border-radius:999px;
  background:var(--panel);color:var(--muted);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.dz4-labsw-k{width:34px;height:20px;border-radius:999px;background:var(--hover-2);position:relative;transition:background .18s ease}
.dz4-labsw-k::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--panel);
  box-shadow:var(--sh-1);transition:transform .18s ease}
.dz4-labsw.on{color:var(--ink)}
.dz4-labsw.on .dz4-labsw-k{background:var(--gold-fill)}
.dz4-labsw.on .dz4-labsw-k::after{transform:translateX(14px)}

/* метка «проба» у логотипа — чтобы владелец всегда видел, в каком он режиме.
   С 20.10.2026 версия 2 у всех, поэтому метка только у владельца (data-lab-own ставит dzApply, js/70) */
html[data-lab]:not([data-dz-off]) .logo{position:relative}
html[data-lab][data-lab-own]:not([data-dz-off]) body:not(.nav-collapsed) .logo::after{content:"проба";position:absolute;top:10px;right:14px;padding:1px 7px;
  border-radius:999px;background:var(--soft-gold);color:var(--ink-gold);font:600 10px/16px Inter,sans-serif;letter-spacing:.04em}

/* ═════════ Левое меню в пропорциях kokonut ═════════ */
html[data-lab]:not([data-dz-off]) body:not(.nav-collapsed) .side{width:240px}
html[data-lab]:not([data-dz-off]) body:not(.nav-collapsed) .main{margin-left:240px}
html[data-lab]:not([data-dz-off]) body:not(.nav-collapsed) .logo{padding:14px 16px 12px;border-bottom:1px solid var(--line)}
html[data-lab]:not([data-dz-off]) body:not(.nav-collapsed) .logo-img{height:34px}
html[data-lab]:not([data-dz-off]) body:not(.nav-collapsed) .logo .brand.rd-brand{font-size:14.5px;line-height:1.1;letter-spacing:.04em}
html[data-lab]:not([data-dz-off]) body:not(.nav-collapsed) .nav{padding:6px 10px 10px}

html[data-lab]:not([data-dz-off]) body:not(.nav-collapsed) .nav-group{display:block;margin:16px 0 4px;padding:0 10px;border-top:0;
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);opacity:.85}
html[data-lab]:not([data-dz-off]) body:not(.nav-collapsed) .nav > .nav-group:first-child{margin-top:6px;padding-top:0}

html[data-lab]:not([data-dz-off]) body:not(.nav-collapsed) .nav > button{gap:10px;height:34px;padding:0 10px;margin:1px 0;border:0;border-radius:8px;
  background:transparent;box-shadow:none;font-size:14px;font-weight:500;line-height:1;color:var(--muted);
  transition:background .15s ease,color .15s ease}
html[data-lab]:not([data-dz-off]) body:not(.nav-collapsed) .nav > button .ico{flex:0 0 18px;width:18px;height:18px;border-radius:0;background:transparent;
  box-shadow:none;color:inherit;opacity:.9}
html[data-lab]:not([data-dz-off]) body:not(.nav-collapsed) .nav > button .ico .dz-svg{width:17px;height:17px}
html[data-lab]:not([data-dz-off]) body:not(.nav-collapsed) .nav > button:hover{background:var(--hover);color:var(--ink)}
html[data-lab]:not([data-dz-off]) body:not(.nav-collapsed) .nav > button:hover .ico{background:transparent;box-shadow:none;color:inherit}
html[data-lab]:not([data-dz-off]) body:not(.nav-collapsed) .nav > button.active{background:var(--hover);color:var(--ink);font-weight:600}
html[data-lab]:not([data-dz-off]) body:not(.nav-collapsed) .nav > button.active .ico{background:transparent;box-shadow:none;color:var(--gold-fill);opacity:1}
html[data-lab]:not([data-dz-off]) body:not(.nav-collapsed) .nav > button.active::before{left:-10px;top:9px;bottom:9px;width:3px}
html[data-lab]:not([data-dz-off]) body:not(.nav-collapsed) .nav > button .dz-cnt{font-size:11.5px;font-weight:500;color:var(--muted);opacity:.8}

/* низ: поиск, профиль, «Тема / Свернуть» — тише */
html[data-lab]:not([data-dz-off]) body:not(.nav-collapsed) .dz-sidesearch{height:34px;font-size:13px;border-radius:8px}
html[data-lab]:not([data-dz-off]) body:not(.nav-collapsed) .side-foot{border-top:1px solid var(--line)}
html[data-lab]:not([data-dz-off]) .dz3n-bar .dz3n-btn{height:30px;font-size:12px;border-radius:8px;background:transparent}

/* свёрнутое: значки 24px на кнопке 44×40, без подложек; открытый — тихая подложка + цвет акцента */
html[data-lab]:not([data-dz-off]) body.nav-collapsed .side{width:72px}
html[data-lab]:not([data-dz-off]) body.nav-collapsed .main{margin-left:72px}
html[data-lab]:not([data-dz-off]) body.nav-collapsed .logo-img{height:34px}
html[data-lab]:not([data-dz-off]) body.nav-collapsed .nav > button{width:48px;height:42px;margin:2px auto;border-radius:10px}
html[data-lab]:not([data-dz-off]) body.nav-collapsed .nav > button .ico{width:48px;height:42px;border-radius:10px}
html[data-lab]:not([data-dz-off]) body.nav-collapsed .nav > button .ico .dz-svg{width:23px;height:23px;stroke-width:1.7}
html[data-lab]:not([data-dz-off]) body.nav-collapsed .nav > button.active .ico{background:var(--hover);color:var(--gold-fill);box-shadow:none}
html[data-lab]:not([data-dz-off]) body.nav-collapsed .nav-group[data-grp]{margin:6px 16px}

/* ═════════ Палитры пробы: «Изумруд» и «Аметист», каждая светлая и тёмная (владелец, 19.10.2026) ═════════
   «Синий не нравится, жёлтый/фирменный — отказываюсь; две темы с двумя разными цветами, у каждой светлая
   и тёмная». Основа — нейтральный цинк kokonutui (app/globals.css), акцент темы — на главных кнопках,
   открытом пункте, ссылках и фокусе. Смысловые цвета графиков/метрик — --lab-c1…c5 (без синего и жёлтого).
   :not(#lab) поднимает вес выше любых палитр dz-theme.css. */

/* общая нейтральная основа */
html[data-lab]:not([data-dz-off])[data-theme="light"]:not(#lab){
  --bg:#fafafa; --bg-deep:#f4f4f5; --panel:#ffffff; --panel2:#f4f4f5; --panel3:#e4e4e7; --sunken:#f8f8f9;
  --ink:#09090b; --muted:#71717a; --gold-dim:#71717a;
  --grad-photo:linear-gradient(135deg,#f4f4f5,#e4e4e7);
  --line:#e4e4e7; --inset-line:rgba(9,9,11,.05);
  --hover:#f4f4f5; --hover-2:#fafafa;
  --sh-1:0 1px 2px rgba(0,0,0,.05); --sh-2:0 16px 40px rgba(0,0,0,.10); --sh-pop:0 8px 24px rgba(0,0,0,.08); --sh-menu:0 10px 28px rgba(0,0,0,.10);
  --scrim:rgba(9,9,11,.35);
  --r-sm:6px; --r-md:8px; --r-lg:12px; --radius:12px; --r-xl:16px;
}
html[data-lab]:not([data-dz-off]):not([data-theme="light"]):not(#lab){
  --bg:#09090b; --bg-deep:#050506; --panel:#111113; --panel2:#18181b; --panel3:#27272a; --sunken:#0c0c0e;
  --ink:#fafafa; --muted:#a1a1aa; --gold-dim:#a1a1aa;
  --grad-photo:linear-gradient(135deg,#18181b,#111113);
  --line:#27272a; --inset-line:rgba(250,250,250,.04);
  --hover:#18181b; --hover-2:#141416;
  --sh-1:0 1px 2px rgba(0,0,0,.45); --sh-2:0 16px 48px rgba(0,0,0,.6); --sh-pop:0 10px 30px rgba(0,0,0,.5); --sh-menu:0 10px 28px rgba(0,0,0,.55);
  --scrim:rgba(0,0,0,.62);
  --r-sm:6px; --r-md:8px; --r-lg:12px; --radius:12px; --r-xl:16px;
}

/* «Изумруд» */
html[data-lab][data-lab-pal="emerald"]:not([data-dz-off])[data-theme="light"]:not(#lab){
  --gold:#047857; --gold-fill:#059669; --gold-fill-h:#047857; --on-gold:#ffffff;
  --soft-gold:#ecfdf5; --soft-gold-2:#f3fbf7; --ink-gold:#065f46;
  --sel-bg:rgba(5,150,105,.18); --gold-fill-90:rgba(5,150,105,.92);
  --grad-gold:linear-gradient(135deg,#10b981,#047857);
  --lab-c1:#059669; --lab-c2:#8b5cf6; --lab-c3:#f43f5e; --lab-c4:#14b8a6; --lab-c5:#f97316;
}
html[data-lab][data-lab-pal="emerald"]:not([data-dz-off]):not([data-theme="light"]):not(#lab){
  --gold:#34d399; --gold-fill:#10b981; --gold-fill-h:#34d399; --on-gold:#04130d;
  --soft-gold:rgba(16,185,129,.14); --soft-gold-2:rgba(16,185,129,.07); --ink-gold:#6ee7b7;
  --sel-bg:rgba(16,185,129,.26); --gold-fill-90:rgba(16,185,129,.92);
  --grad-gold:linear-gradient(135deg,#34d399,#059669);
  --lab-c1:#10b981; --lab-c2:#a78bfa; --lab-c3:#fb7185; --lab-c4:#2dd4bf; --lab-c5:#fb923c;
}

/* «Аметист» */
html[data-lab][data-lab-pal="violet"]:not([data-dz-off])[data-theme="light"]:not(#lab){
  --gold:#6d28d9; --gold-fill:#7c3aed; --gold-fill-h:#6d28d9; --on-gold:#ffffff;
  --soft-gold:#f5f3ff; --soft-gold-2:#faf8ff; --ink-gold:#5b21b6;
  --sel-bg:rgba(124,58,237,.16); --gold-fill-90:rgba(124,58,237,.92);
  --grad-gold:linear-gradient(135deg,#8b5cf6,#6d28d9);
  --lab-c1:#7c3aed; --lab-c2:#10b981; --lab-c3:#f43f5e; --lab-c4:#06b6d4; --lab-c5:#f97316;
}
html[data-lab][data-lab-pal="violet"]:not([data-dz-off]):not([data-theme="light"]):not(#lab){
  --gold:#c4b5fd; --gold-fill:#8b5cf6; --gold-fill-h:#a78bfa; --on-gold:#ffffff;
  --soft-gold:rgba(139,92,246,.16); --soft-gold-2:rgba(139,92,246,.08); --ink-gold:#ddd6fe;
  --sel-bg:rgba(139,92,246,.28); --gold-fill-90:rgba(139,92,246,.92);
  --grad-gold:linear-gradient(135deg,#a78bfa,#7c3aed);
  --lab-c1:#8b5cf6; --lab-c2:#34d399; --lab-c3:#fb7185; --lab-c4:#22d3ee; --lab-c5:#fb923c;
}

html[data-lab]:not([data-dz-off]) :where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--gold-fill);outline-offset:2px}
/* ссылки — цветом темы */
html[data-lab]:not([data-dz-off]) .main a:not(.btn):not([class*="btn"]){color:var(--gold)}

/* выбор палитры в «Оформлении» */
.dz4-labpal{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex-basis:100%;margin-top:4px}
.dz4-labpal-h{flex-basis:100%;font-size:12px;color:var(--muted)}
.dz4-labpal-b{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);cursor:pointer;color:var(--ink)}
.dz4-labpal-b b{font-size:13px}
.dz4-labpal-b small{font-size:11.5px;color:var(--muted)}
.dz4-labpal-b.on{border-color:var(--gold-fill);box-shadow:0 0 0 3px var(--soft-gold)}
.dz4-labbox{flex-wrap:wrap}

/* ═════════ Классические палитры (владелец, 20.10.2026: «хочется более классическое») ═════════
   По подсказке ui-ux-pro-max (premium/luxury, industrial slate) + свои: Монохром, Сланец, Бордо, Мокко.
   Каждая — светлая и тёмная. Фон и карточки — тёплый камень (stone) или холодный сланец (slate). */
html[data-lab][data-lab-pal="mono"]:not([data-dz-off])[data-theme="light"]:not(#lab){--bg:#fafaf9; --bg-deep:#f5f5f4; --panel:#ffffff; --panel2:#f5f5f4; --panel3:#e7e5e4; --sunken:#f8f8f7; --ink:#1c1917; --muted:#78716c; --gold-dim:#78716c; --line:#e7e5e4; --hover:#f5f5f4; --hover-2:#fafaf9; --grad-photo:linear-gradient(135deg,#f5f5f4,#e7e5e4); --gold:#1c1917; --gold-fill:#1c1917; --gold-fill-h:#292524; --on-gold:#fafaf9; --soft-gold:#f0efee; --soft-gold-2:#f5f5f4; --ink-gold:#1c1917; --sel-bg:rgba(28,25,23,.12); --gold-fill-90:rgba(28,25,23,.92); --grad-gold:linear-gradient(135deg,#44403c,#0c0a09); --lab-c1:#1c1917; --lab-c2:#78716c; --lab-c3:#b91c1c; --lab-c4:#0f766e; --lab-c5:#c2410c;}
html[data-lab][data-lab-pal="mono"]:not([data-dz-off]):not([data-theme="light"]):not(#lab){--bg:#0c0a09; --bg-deep:#070605; --panel:#141210; --panel2:#1c1917; --panel3:#292524; --sunken:#100e0c; --ink:#fafaf9; --muted:#a8a29e; --gold-dim:#a8a29e; --line:#292524; --hover:#1c1917; --hover-2:#171412; --grad-photo:linear-gradient(135deg,#1c1917,#141210); --gold:#fafaf9; --gold-fill:#fafaf9; --gold-fill-h:#e7e5e4; --on-gold:#0c0a09; --soft-gold:#292524; --soft-gold-2:#1c1917; --ink-gold:#fafaf9; --sel-bg:rgba(250,250,249,.16); --gold-fill-90:rgba(250,250,249,.92); --grad-gold:linear-gradient(135deg,#fafaf9,#d6d3d1); --lab-c1:#e7e5e4; --lab-c2:#a8a29e; --lab-c3:#f87171; --lab-c4:#2dd4bf; --lab-c5:#fb923c;}
html[data-lab][data-lab-pal="slate"]:not([data-dz-off])[data-theme="light"]:not(#lab){--bg:#f8fafc; --bg-deep:#f1f5f9; --panel:#ffffff; --panel2:#f1f5f9; --panel3:#e2e8f0; --sunken:#f6f8fb; --ink:#0f172a; --muted:#64748b; --gold-dim:#64748b; --line:#e2e8f0; --hover:#f1f5f9; --hover-2:#f8fafc; --grad-photo:linear-gradient(135deg,#f1f5f9,#e2e8f0); --gold:#334155; --gold-fill:#334155; --gold-fill-h:#1e293b; --on-gold:#ffffff; --soft-gold:#eef2f6; --soft-gold-2:#f4f7fa; --ink-gold:#1e293b; --sel-bg:rgba(51,65,85,.14); --gold-fill-90:rgba(51,65,85,.92); --grad-gold:linear-gradient(135deg,#475569,#1e293b); --lab-c1:#334155; --lab-c2:#0f766e; --lab-c3:#be123c; --lab-c4:#64748b; --lab-c5:#c2410c;}
html[data-lab][data-lab-pal="slate"]:not([data-dz-off]):not([data-theme="light"]):not(#lab){--bg:#0b1120; --bg-deep:#070b16; --panel:#111827; --panel2:#172033; --panel3:#243044; --sunken:#0d1424; --ink:#f1f5f9; --muted:#94a3b8; --gold-dim:#94a3b8; --line:#243044; --hover:#172033; --hover-2:#131c2d; --grad-photo:linear-gradient(135deg,#172033,#111827); --gold:#cbd5e1; --gold-fill:#cbd5e1; --gold-fill-h:#e2e8f0; --on-gold:#0f172a; --soft-gold:#243044; --soft-gold-2:#172033; --ink-gold:#e2e8f0; --sel-bg:rgba(203,213,225,.18); --gold-fill-90:rgba(203,213,225,.92); --grad-gold:linear-gradient(135deg,#e2e8f0,#94a3b8); --lab-c1:#cbd5e1; --lab-c2:#2dd4bf; --lab-c3:#fb7185; --lab-c4:#94a3b8; --lab-c5:#fb923c;}
html[data-lab][data-lab-pal="wine"]:not([data-dz-off])[data-theme="light"]:not(#lab){--bg:#fafaf9; --bg-deep:#f5f5f4; --panel:#ffffff; --panel2:#f5f5f4; --panel3:#e7e5e4; --sunken:#f8f8f7; --ink:#1c1917; --muted:#78716c; --gold-dim:#78716c; --line:#e7e5e4; --hover:#f5f5f4; --hover-2:#fafaf9; --grad-photo:linear-gradient(135deg,#f5f5f4,#e7e5e4); --gold:#881337; --gold-fill:#881337; --gold-fill-h:#701a35; --on-gold:#ffffff; --soft-gold:#fbf1f3; --soft-gold-2:#fdf7f8; --ink-gold:#701a35; --sel-bg:rgba(136,19,55,.12); --gold-fill-90:rgba(136,19,55,.92); --grad-gold:linear-gradient(135deg,#9f1239,#4c0519); --lab-c1:#881337; --lab-c2:#44403c; --lab-c3:#c2410c; --lab-c4:#0f766e; --lab-c5:#78716c;}
html[data-lab][data-lab-pal="wine"]:not([data-dz-off]):not([data-theme="light"]):not(#lab){--bg:#0c0a09; --bg-deep:#070605; --panel:#141210; --panel2:#1c1917; --panel3:#292524; --sunken:#100e0c; --ink:#fafaf9; --muted:#a8a29e; --gold-dim:#a8a29e; --line:#292524; --hover:#1c1917; --hover-2:#171412; --grad-photo:linear-gradient(135deg,#1c1917,#141210); --gold:#fda4af; --gold-fill:#be123c; --gold-fill-h:#e11d48; --on-gold:#ffffff; --soft-gold:rgba(190,18,60,.18); --soft-gold-2:rgba(190,18,60,.09); --ink-gold:#fecdd3; --sel-bg:rgba(253,164,175,.22); --gold-fill-90:rgba(190,18,60,.92); --grad-gold:linear-gradient(135deg,#e11d48,#881337); --lab-c1:#fb7185; --lab-c2:#d6d3d1; --lab-c3:#fb923c; --lab-c4:#2dd4bf; --lab-c5:#a8a29e;}
html[data-lab][data-lab-pal="mocha"]:not([data-dz-off])[data-theme="light"]:not(#lab){--bg:#faf8f5; --bg-deep:#f4f0ea; --panel:#ffffff; --panel2:#f5f1eb; --panel3:#e9e2d8; --sunken:#f9f6f2; --ink:#2b2420; --muted:#7c6f64; --gold-dim:#7c6f64; --line:#e9e2d8; --hover:#f5f1eb; --hover-2:#faf8f5; --grad-photo:linear-gradient(135deg,#f5f1eb,#e9e2d8); --gold:#6b4f3a; --gold-fill:#6b4f3a; --gold-fill-h:#56402f; --on-gold:#ffffff; --soft-gold:#f4ede6; --soft-gold-2:#f8f4ef; --ink-gold:#56402f; --sel-bg:rgba(107,79,58,.14); --gold-fill-90:rgba(107,79,58,.92); --grad-gold:linear-gradient(135deg,#8b6b52,#4a3628); --lab-c1:#6b4f3a; --lab-c2:#0f766e; --lab-c3:#b91c1c; --lab-c4:#78716c; --lab-c5:#c2410c;}
html[data-lab][data-lab-pal="mocha"]:not([data-dz-off]):not([data-theme="light"]):not(#lab){--bg:#110d0b; --bg-deep:#0a0807; --panel:#191411; --panel2:#211a16; --panel3:#2f2620; --sunken:#140f0d; --ink:#f5efe8; --muted:#b3a698; --gold-dim:#b3a698; --line:#2f2620; --hover:#211a16; --hover-2:#1b1512; --grad-photo:linear-gradient(135deg,#211a16,#191411); --gold:#d6b99c; --gold-fill:#a07b5e; --gold-fill-h:#b58d6e; --on-gold:#ffffff; --soft-gold:rgba(160,123,94,.18); --soft-gold-2:rgba(160,123,94,.09); --ink-gold:#ead7c3; --sel-bg:rgba(214,185,156,.2); --gold-fill-90:rgba(160,123,94,.92); --grad-gold:linear-gradient(135deg,#b58d6e,#6b4f3a); --lab-c1:#d6b99c; --lab-c2:#2dd4bf; --lab-c3:#f87171; --lab-c4:#a8a29e; --lab-c5:#fb923c;}