{
 "id": "it-tools",
 "version": "0.1.0",
 "shared": [],
 "palettes": [
  {
   "id": "carbon",
   "label": "Carbon",
   "files": [
    {
     "name": "digitable-focus-carbon.css",
     "path": "digitable-focus-carbon.css",
     "lang": "css",
     "bytes": 33018,
     "lines": 895,
     "text": "/* Digitable Focus Carbon for IT Tools — Digitable Workbench 0.1.0 */\n/*\n  A colour layer for an unmodified it-tools instance (GPL-3.0). This file adds\n  no behaviour and patches no application code; it only re-declares colours.\n  Paints the dark mode of the app (html.dark).\n*/\n/*\n  Distribution terms of THIS file: Digitable Workbench Personal License, the\n  terms of the archive this file ships in — see LICENSE-PERSONAL.md. Copyright\n  in the palette belongs to Digitable.\n\n  This is a theme, not a fork. No it-tools code is copied, linked or bundled\n  here: the application is not shipped in the archive at all, so nothing in\n  this folder is a derivative work of it and GPL-3.0 does not reach it.\n\n  Inside the fork digitable-lol/it-tools the very same palette travels under\n  GPL-3.0-only, because there it is bundled with the application. Two grants by\n  one copyright holder; neither relicenses any part of it-tools. The copy for\n  the fork is generated next to this one, in fork/it-tools/, and it is not the\n  same bytes on purpose.\n*/\n\nhtml.dark {\n  color-scheme: dark;\n\n  --dtf-page: #05080D;\n  --dtf-panel: #071018;\n  --dtf-field: #0B111A;\n  --dtf-fill: #07141E;\n  --dtf-hover: #071F26;\n  --dtf-active: #062E35;\n  --dtf-active-ink: #00E5E5;\n\n  --dtf-text: #F5F7FA;\n  --dtf-muted: #9BAAB8;\n  --dtf-subtle: #718695;\n\n  --dtf-line: #15566A;\n  --dtf-line-soft: #0F3745;\n\n  --dtf-accent: #00E5E5;\n  --dtf-accent-soft: #00D8FF;\n  --dtf-on-accent: #05080D;\n  --dtf-link: #3CA9FF;\n\n  --dtf-green: #7CFF6B;\n  --dtf-yellow: #FFC247;\n  --dtf-orange: #FF8A2A;\n  --dtf-purple: #B65CFF;\n  --dtf-red: #FF5B5B;\n\n  --dtf-selection: #15566A;\n  --dtf-on-selection: #F5F7FA;\n  --dtf-focus-ring: rgba(0, 229, 229, 0.35);\n  --dtf-scrim: rgba(5, 8, 13, 0.72);\n  --dtf-shadow: 0 8px 24px rgba(5, 8, 13, 0.55);\n}\n\n/* ---------------------------------------------------------------- shell -- */\n\nhtml.dark,\nhtml.dark body {\n  background-color: var(--dtf-page) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark ::selection {\n  background-color: var(--dtf-selection);\n  color: var(--dtf-on-selection);\n}\n\nhtml.dark * {\n  scrollbar-color: var(--dtf-line) transparent;\n}\n\n/*\n  Видимая рамка фокуса. naive-ui и c-button рисуют собственный тонкий контур\n  цветом бренда, поэтому здесь ставится свой — и ни одно правило темы outline\n  не снимает.\n*/\nhtml.dark :focus-visible {\n  outline: 2px solid var(--dtf-accent) !important;\n  outline-offset: 2px !important;\n}\n\nhtml.dark .c-button:focus,\nhtml.dark .c-link:focus,\nhtml.dark .c-select-input:focus {\n  outline-color: var(--dtf-accent) !important;\n}\n\n/* --------------------------------------------------------------- layout -- */\n\nhtml.dark .n-layout {\n  --n-color: var(--dtf-page) !important;\n  --n-color-embedded: var(--dtf-panel) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-header-color: var(--dtf-panel) !important;\n  --n-header-border-color: var(--dtf-line) !important;\n  --n-footer-color: var(--dtf-panel) !important;\n  --n-footer-border-color: var(--dtf-line) !important;\n}\n\nhtml.dark .n-layout-sider {\n  --n-color: var(--dtf-panel) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-border-color: var(--dtf-line) !important;\n  --n-toggle-button-color: var(--dtf-fill) !important;\n  --n-toggle-button-border: 1px solid var(--dtf-line) !important;\n  --n-toggle-button-icon-color: var(--dtf-text) !important;\n  --n-toggle-bar-color: var(--dtf-line) !important;\n  --n-toggle-bar-color-hover: var(--dtf-accent) !important;\n}\n\nhtml.dark .n-layout-sider__border {\n  background-color: var(--dtf-line) !important;\n}\n\nhtml.dark .n-scrollbar,\nhtml.dark .n-scrollbar-rail {\n  --n-scrollbar-color: var(--dtf-line) !important;\n  --n-scrollbar-color-hover: var(--dtf-accent) !important;\n}\n\n/* Полупрозрачная подложка мобильного меню (MenuLayout.vue). */\nhtml.dark .menu-layout .overlay {\n  background-color: var(--dtf-scrim) !important;\n}\n\n/*\n  Шапка боковой панели. Штатный герой — растровый SVG-градиент в цветах\n  it-tools; подменить его цвета из CSS нельзя, поэтому он скрывается через\n  visibility (высота блока сохраняется) и заменяется градиентом палитры.\n*/\nhtml.dark .hero-wrapper {\n  background: linear-gradient(140deg, var(--dtf-panel) 0%, var(--dtf-fill) 100%) !important;\n  border-bottom: 1px solid var(--dtf-line) !important;\n}\n\nhtml.dark .hero-wrapper .gradient {\n  visibility: hidden;\n}\n\nhtml.dark .hero-wrapper .text-wrapper,\nhtml.dark .hero-wrapper .title {\n  color: var(--dtf-accent) !important;\n}\n\nhtml.dark .hero-wrapper .subtitle {\n  color: var(--dtf-muted) !important;\n}\n\nhtml.dark .hero-wrapper .divider {\n  background-color: var(--dtf-accent) !important;\n}\n\nhtml.dark .sider-content .footer {\n  color: var(--dtf-muted) !important;\n}\n\n/* ----------------------------------------------------------- tool menu -- */\n\nhtml.dark .n-menu {\n  --n-color: transparent !important;\n  --n-group-text-color: var(--dtf-subtle) !important;\n  --n-divider-color: var(--dtf-line) !important;\n  --n-border-color-horizontal: var(--dtf-line) !important;\n\n  --n-item-color-hover: var(--dtf-hover) !important;\n  --n-item-color-active: var(--dtf-active) !important;\n  --n-item-color-active-hover: var(--dtf-active) !important;\n  --n-item-color-active-collapsed: var(--dtf-active) !important;\n\n  --n-item-text-color: var(--dtf-muted) !important;\n  --n-item-text-color-hover: var(--dtf-text) !important;\n  --n-item-text-color-active: var(--dtf-active-ink) !important;\n  --n-item-text-color-active-hover: var(--dtf-active-ink) !important;\n  --n-item-text-color-child-active: var(--dtf-active-ink) !important;\n  --n-item-text-color-child-active-hover: var(--dtf-active-ink) !important;\n  --n-item-text-color-horizontal: var(--dtf-muted) !important;\n  --n-item-text-color-hover-horizontal: var(--dtf-text) !important;\n  --n-item-text-color-active-horizontal: var(--dtf-active-ink) !important;\n  --n-item-text-color-active-hover-horizontal: var(--dtf-active-ink) !important;\n  --n-item-text-color-child-active-horizontal: var(--dtf-active-ink) !important;\n  --n-item-text-color-child-active-hover-horizontal: var(--dtf-active-ink) !important;\n\n  --n-item-icon-color: var(--dtf-subtle) !important;\n  --n-item-icon-color-hover: var(--dtf-text) !important;\n  --n-item-icon-color-active: var(--dtf-active-ink) !important;\n  --n-item-icon-color-active-hover: var(--dtf-active-ink) !important;\n  --n-item-icon-color-child-active: var(--dtf-active-ink) !important;\n  --n-item-icon-color-child-active-hover: var(--dtf-active-ink) !important;\n  --n-item-icon-color-collapsed: var(--dtf-subtle) !important;\n  --n-item-icon-color-horizontal: var(--dtf-subtle) !important;\n  --n-item-icon-color-hover-horizontal: var(--dtf-text) !important;\n  --n-item-icon-color-active-horizontal: var(--dtf-active-ink) !important;\n  --n-item-icon-color-active-hover-horizontal: var(--dtf-active-ink) !important;\n  --n-item-icon-color-child-active-horizontal: var(--dtf-active-ink) !important;\n  --n-item-icon-color-child-active-hover-horizontal: var(--dtf-active-ink) !important;\n\n  --n-arrow-color: var(--dtf-subtle) !important;\n  --n-arrow-color-hover: var(--dtf-text) !important;\n  --n-arrow-color-active: var(--dtf-active-ink) !important;\n  --n-arrow-color-active-hover: var(--dtf-active-ink) !important;\n  --n-arrow-color-child-active: var(--dtf-active-ink) !important;\n  --n-arrow-color-child-active-hover: var(--dtf-active-ink) !important;\n}\n\n/* Подпись пункта — это RouterLink, цвет должен наследоваться от пункта. */\nhtml.dark .n-menu .n-menu-item-content-header a {\n  color: inherit !important;\n}\n\n/* Полоса сворачивания категории (CollapsibleToolMenu.vue). */\nhtml.dark .menu-wrapper .toggle-bar::before {\n  background-color: var(--dtf-line) !important;\n}\n\n/* Точка «новый инструмент» рядом с иконкой (MenuIconItem.vue). */\nhtml.dark .menu-icon-item .badge {\n  background-color: var(--dtf-accent) !important;\n}\n\n/* ----------------------------------------------------------- typography -- */\n\nhtml.dark .n-h,\nhtml.dark .n-h1,\nhtml.dark .n-h2,\nhtml.dark .n-h3,\nhtml.dark .n-h4,\nhtml.dark .n-h5,\nhtml.dark .n-h6 {\n  --n-text-color: var(--dtf-text) !important;\n  --n-bar-color: var(--dtf-accent) !important;\n}\n\nhtml.dark .n-p,\nhtml.dark .n-text,\nhtml.dark .n-li,\nhtml.dark .n-ul,\nhtml.dark .n-ol {\n  --n-text-color: var(--dtf-text) !important;\n  --n-p-text-color: var(--dtf-text) !important;\n  --n-li-text-color: var(--dtf-text) !important;\n}\n\nhtml.dark .n-a,\nhtml.dark .n-a a {\n  --n-text-color: var(--dtf-link) !important;\n  --n-a-text-color: var(--dtf-link) !important;\n}\n\nhtml.dark .n-blockquote {\n  --n-text-color: var(--dtf-muted) !important;\n  --n-prefix-color: var(--dtf-accent) !important;\n}\n\nhtml.dark .n-divider {\n  --n-color: var(--dtf-line) !important;\n  --n-text-color: var(--dtf-text) !important;\n}\n\n/* Заголовок инструмента: штатно приглушён opacity, палитра даёт свой контраст. */\nhtml.dark .tool-layout .tool-header .n-h1 {\n  color: var(--dtf-text) !important;\n  opacity: 1 !important;\n}\n\nhtml.dark .tool-layout .tool-header .separator {\n  background: var(--dtf-line) !important;\n  opacity: 1 !important;\n}\n\nhtml.dark .tool-layout .tool-header .description {\n  color: var(--dtf-muted) !important;\n  opacity: 1 !important;\n}\n\n/* ---------------------------------------------------------------- cards -- */\n\nhtml.dark .c-card {\n  background-color: var(--dtf-panel) !important;\n  border-color: var(--dtf-line-soft) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark .c-card .c-card-title {\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark .c-card[class~=\"!hover:border-primary\"]:hover,\nhtml.dark a[class~=\"decoration-none\"]:hover .c-card,\nhtml.dark a[class~=\"decoration-none\"]:focus-visible .c-card {\n  border-color: var(--dtf-accent) !important;\n}\n\nhtml.dark .n-card {\n  --n-color: var(--dtf-panel) !important;\n  --n-color-modal: var(--dtf-panel) !important;\n  --n-color-popover: var(--dtf-panel) !important;\n  --n-color-embedded: var(--dtf-fill) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-title-text-color: var(--dtf-text) !important;\n  --n-border-color: var(--dtf-line-soft) !important;\n  --n-action-color: var(--dtf-fill) !important;\n  --n-close-icon-color: var(--dtf-muted) !important;\n}\n\n/* Промо-карточка на главной: штатно фиксированный зелёный градиент. */\nhtml.dark .colored-card {\n  background: linear-gradient(48deg, var(--dtf-accent-soft) 0%, var(--dtf-accent) 100%) !important;\n  border: none !important;\n  color: var(--dtf-on-accent) !important;\n}\n\nhtml.dark .colored-card .title,\nhtml.dark .colored-card .description,\nhtml.dark .colored-card a {\n  color: var(--dtf-on-accent) !important;\n}\n\n/* ----------------------------------------------------- utility classes -- */\n/*\n  UnoCSS-утилиты с зашитыми цветами. Селекторы по атрибуту, чтобы не\n  экранировать \":\", \"!\" и \"#\" в именах классов.\n*/\n\nhtml.dark [class~=\"text-black\"],\nhtml.dark [class~=\"text-white\"],\nhtml.dark [class~=\"dark:text-white\"],\nhtml.dark [class~=\"dark:text-neutral-800\"] {\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark [class~=\"text-neutral-400\"],\nhtml.dark [class~=\"text-neutral-500\"],\nhtml.dark [class~=\"text-gray-400\"],\nhtml.dark [class~=\"text-gray-500\"],\nhtml.dark [class~=\"dark:text-neutral-400\"],\nhtml.dark [class~=\"dark:text-gray-400\"] {\n  color: var(--dtf-muted) !important;\n}\n\nhtml.dark [class~=\"text-neutral-600\"],\nhtml.dark [class~=\"dark:text-neutral-600\"] {\n  color: var(--dtf-subtle) !important;\n}\n\nhtml.dark [class~=\"text-primary\"] {\n  color: var(--dtf-accent) !important;\n}\n\nhtml.dark [class~=\"border-primary\"],\nhtml.dark [class~=\"important:border-primary\"],\nhtml.dark [class~=\"!hover:border-primary\"]:hover,\nhtml.dark [class~=\"hover:important:border-primary\"]:hover,\nhtml.dark [class~=\"border-gray-300\"],\nhtml.dark [class~=\"border-dashed\"] {\n  border-color: var(--dtf-accent) !important;\n}\n\nhtml.dark [class~=\"border-dashed\"]:not(:hover) {\n  border-color: var(--dtf-line) !important;\n}\n\nhtml.dark [class~=\"bg-surface\"],\nhtml.dark [class~=\"bg-white\"],\nhtml.dark [class~=\"bg-#ffffff\"],\nhtml.dark [class~=\"dark:bg-#232323\"],\nhtml.dark [class~=\"dark:bg-#333333\"] {\n  background-color: var(--dtf-panel) !important;\n}\n\nhtml.dark [class~=\"bg-background\"] {\n  background-color: var(--dtf-page) !important;\n}\n\n/* Значок «new» на карточке инструмента: фон приходит инлайном из темы naive. */\nhtml.dark [class~=\"rounded-full\"][class~=\"text-xs\"] {\n  background-color: var(--dtf-accent) !important;\n  color: var(--dtf-on-accent) !important;\n}\n\n/* Подсказка c-tooltip: штатно чёрный блок с белым текстом. */\nhtml.dark [class~=\"bg-black\"] {\n  background-color: var(--dtf-fill) !important;\n  border: 1px solid var(--dtf-line-soft) !important;\n  color: var(--dtf-text) !important;\n  box-shadow: var(--dtf-shadow) !important;\n}\n\n/* -------------------------------------------------------------- buttons -- */\n/*\n  Вариант c-button (default/primary/warning/error) виден только в\n  хеш-переменной сборки, поэтому заливка у всех одна нейтральная; акцент\n  остаётся за состояниями и за отдельно опознаваемыми кнопками.\n*/\n\nhtml.dark .c-button {\n  background-color: var(--dtf-fill) !important;\n  border: 1px solid var(--dtf-line-soft) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark .c-button:not(.disabled):hover {\n  background-color: var(--dtf-hover) !important;\n  border-color: var(--dtf-accent) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark .c-button:not(.disabled):active {\n  background-color: var(--dtf-active) !important;\n  color: var(--dtf-active-ink) !important;\n}\n\n/* Круглые кнопки — иконки в шапке и «копировать»: остаются без заливки. */\nhtml.dark .c-button.circle {\n  background-color: transparent !important;\n  border-color: transparent !important;\n  color: var(--dtf-muted) !important;\n}\n\nhtml.dark .c-button.circle:not(.disabled):hover {\n  background-color: var(--dtf-hover) !important;\n  border-color: transparent !important;\n  color: var(--dtf-active-ink) !important;\n}\n\nhtml.dark .support-button,\nhtml.dark .support-button:hover {\n  background: var(--dtf-accent) !important;\n  border-color: var(--dtf-accent) !important;\n  color: var(--dtf-on-accent) !important;\n}\n\nhtml.dark .c-link {\n  color: var(--dtf-link) !important;\n}\n\nhtml.dark .c-link:hover,\nhtml.dark .c-link:focus {\n  color: var(--dtf-accent) !important;\n}\n\nhtml.dark .n-button {\n  --n-text-color: var(--dtf-text) !important;\n  --n-text-color-hover: var(--dtf-active-ink) !important;\n  --n-text-color-pressed: var(--dtf-active-ink) !important;\n  --n-text-color-focus: var(--dtf-active-ink) !important;\n  --n-text-color-disabled: var(--dtf-subtle) !important;\n  --n-text-color-text: var(--dtf-text) !important;\n  --n-text-color-text-hover: var(--dtf-accent) !important;\n  --n-text-color-text-pressed: var(--dtf-accent-soft) !important;\n  --n-text-color-text-focus: var(--dtf-accent) !important;\n  --n-text-color-ghost: var(--dtf-text) !important;\n  --n-border-hover: 1px solid var(--dtf-accent) !important;\n  --n-border-pressed: 1px solid var(--dtf-accent) !important;\n  --n-border-focus: 1px solid var(--dtf-accent) !important;\n  --n-ripple-color: var(--dtf-accent) !important;\n}\n\nhtml.dark .n-button--primary-type,\nhtml.dark .n-button--info-type,\nhtml.dark .n-button--success-type {\n  --n-color: var(--dtf-accent) !important;\n  --n-color-hover: var(--dtf-accent-soft) !important;\n  --n-color-pressed: var(--dtf-accent-soft) !important;\n  --n-color-focus: var(--dtf-accent-soft) !important;\n  --n-text-color: var(--dtf-on-accent) !important;\n  --n-text-color-hover: var(--dtf-on-accent) !important;\n  --n-text-color-pressed: var(--dtf-on-accent) !important;\n  --n-text-color-focus: var(--dtf-on-accent) !important;\n  --n-border: 1px solid var(--dtf-accent) !important;\n  --n-border-hover: 1px solid var(--dtf-accent-soft) !important;\n  --n-border-focus: 1px solid var(--dtf-accent-soft) !important;\n  --n-border-pressed: 1px solid var(--dtf-accent-soft) !important;\n}\n\n/* --------------------------------------------------------------- inputs -- */\n\nhtml.dark .n-input,\nhtml.dark .n-input-number,\nhtml.dark .n-input-group-label {\n  --n-color: var(--dtf-field) !important;\n  --n-color-focus: var(--dtf-field) !important;\n  --n-color-disabled: var(--dtf-fill) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-text-color-disabled: var(--dtf-subtle) !important;\n  --n-text-decoration-color: var(--dtf-text) !important;\n  --n-placeholder-color: var(--dtf-subtle) !important;\n  --n-placeholder-color-disabled: var(--dtf-subtle) !important;\n  --n-caret-color: var(--dtf-accent) !important;\n  --n-border: 1px solid var(--dtf-line-soft) !important;\n  --n-border-hover: 1px solid var(--dtf-accent) !important;\n  --n-border-focus: 1px solid var(--dtf-accent) !important;\n  --n-border-disabled: 1px solid var(--dtf-line-soft) !important;\n  --n-box-shadow-focus: 0 0 0 2px var(--dtf-focus-ring) !important;\n  --n-loading-color: var(--dtf-accent) !important;\n  --n-icon-color: var(--dtf-muted) !important;\n  --n-icon-color-hover: var(--dtf-text) !important;\n  --n-icon-color-pressed: var(--dtf-accent) !important;\n  --n-icon-color-disabled: var(--dtf-subtle) !important;\n  --n-clear-color: var(--dtf-muted) !important;\n  --n-clear-color-hover: var(--dtf-text) !important;\n  --n-clear-color-pressed: var(--dtf-accent) !important;\n  --n-suffix-text-color: var(--dtf-text) !important;\n  --n-count-text-color: var(--dtf-muted) !important;\n  --n-count-text-color-disabled: var(--dtf-subtle) !important;\n  --n-group-label-color: var(--dtf-fill) !important;\n  --n-group-label-text-color: var(--dtf-text) !important;\n  --n-group-label-border: 1px solid var(--dtf-line-soft) !important;\n  --n-caret-color-warning: var(--dtf-yellow) !important;\n  --n-border-warning: 1px solid var(--dtf-yellow) !important;\n  --n-border-hover-warning: 1px solid var(--dtf-yellow) !important;\n  --n-border-focus-warning: 1px solid var(--dtf-yellow) !important;\n  --n-color-focus-warning: var(--dtf-field) !important;\n  --n-loading-color-warning: var(--dtf-yellow) !important;\n  --n-caret-color-error: var(--dtf-red) !important;\n  --n-border-error: 1px solid var(--dtf-red) !important;\n  --n-border-hover-error: 1px solid var(--dtf-red) !important;\n  --n-border-focus-error: 1px solid var(--dtf-red) !important;\n  --n-color-focus-error: var(--dtf-field) !important;\n  --n-loading-color-error: var(--dtf-red) !important;\n}\n\nhtml.dark .n-form-item {\n  --n-label-text-color: var(--dtf-text) !important;\n  --n-feedback-text-color: var(--dtf-muted) !important;\n  --n-feedback-text-color-warning: var(--dtf-yellow) !important;\n  --n-feedback-text-color-error: var(--dtf-red) !important;\n  --n-asterisk-color: var(--dtf-red) !important;\n}\n\nhtml.dark .c-input-text .input-wrapper {\n  background-color: var(--dtf-field) !important;\n  border-color: var(--dtf-line-soft) !important;\n}\n\nhtml.dark .c-input-text .input-wrapper:hover,\nhtml.dark .c-input-text .input-wrapper:focus-within {\n  border-color: var(--dtf-accent) !important;\n}\n\nhtml.dark .c-input-text .input-wrapper:focus-within {\n  background-color: var(--dtf-field) !important;\n  box-shadow: 0 0 0 2px var(--dtf-focus-ring) !important;\n}\n\nhtml.dark .c-input-text .input,\nhtml.dark .c-input-text textarea,\nhtml.dark .c-input-text input {\n  color: var(--dtf-text) !important;\n  caret-color: var(--dtf-accent) !important;\n}\n\nhtml.dark .c-input-text .input::placeholder,\nhtml.dark .c-input-text textarea::placeholder,\nhtml.dark .c-input-text input::placeholder {\n  color: var(--dtf-subtle) !important;\n  opacity: 1 !important;\n}\n\nhtml.dark .c-input-text > .label,\nhtml.dark .c-label > label {\n  color: var(--dtf-muted) !important;\n}\n\nhtml.dark .c-input-text .feedback {\n  color: var(--dtf-red) !important;\n}\n\nhtml.dark .c-input-text.error .input-wrapper,\nhtml.dark .c-input-text.error .input-wrapper:hover,\nhtml.dark .c-input-text.error .input-wrapper:focus-within {\n  border-color: var(--dtf-red) !important;\n}\n\n/* -------------------------------------------------------------- selects -- */\n\nhtml.dark .c-select .c-select-input {\n  background-color: var(--dtf-field) !important;\n  border-color: var(--dtf-line-soft) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark .c-select .c-select-input:hover,\nhtml.dark .c-select .c-select-input.is-open,\nhtml.dark .c-select .c-select-input:focus {\n  border-color: var(--dtf-accent) !important;\n}\n\nhtml.dark .c-select .c-select-input .placeholder,\nhtml.dark .c-select .c-select-input .chevron {\n  color: var(--dtf-subtle) !important;\n}\n\nhtml.dark .c-select .search-input {\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark .c-select .search-input::placeholder {\n  color: var(--dtf-subtle) !important;\n  opacity: 1 !important;\n}\n\nhtml.dark .c-select .c-select-dropdown {\n  background-color: var(--dtf-panel) !important;\n  border: 1px solid var(--dtf-line-soft) !important;\n  box-shadow: var(--dtf-shadow) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark .c-select .c-select-dropdown-option {\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark .c-select .c-select-dropdown-option:hover,\nhtml.dark .c-select .c-select-dropdown-option.hover {\n  background-color: var(--dtf-hover) !important;\n}\n\nhtml.dark .c-select .c-select-dropdown-option.active {\n  background-color: var(--dtf-active) !important;\n  color: var(--dtf-active-ink) !important;\n}\n\nhtml.dark .n-base-selection {\n  --n-color: var(--dtf-field) !important;\n  --n-color-active: var(--dtf-field) !important;\n  --n-color-disabled: var(--dtf-fill) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-placeholder-color: var(--dtf-subtle) !important;\n  --n-arrow-color: var(--dtf-muted) !important;\n  --n-caret-color: var(--dtf-accent) !important;\n  --n-border: 1px solid var(--dtf-line-soft) !important;\n  --n-border-hover: 1px solid var(--dtf-accent) !important;\n  --n-border-active: 1px solid var(--dtf-accent) !important;\n  --n-border-focus: 1px solid var(--dtf-accent) !important;\n  --n-box-shadow-hover: none !important;\n  --n-box-shadow-active: 0 0 0 2px var(--dtf-focus-ring) !important;\n  --n-box-shadow-focus: 0 0 0 2px var(--dtf-focus-ring) !important;\n}\n\nhtml.dark .n-base-select-menu {\n  --n-color: var(--dtf-panel) !important;\n  --n-option-text-color: var(--dtf-text) !important;\n  --n-option-text-color-active: var(--dtf-active-ink) !important;\n  --n-option-text-color-pressed: var(--dtf-active-ink) !important;\n  --n-option-text-color-disabled: var(--dtf-subtle) !important;\n  --n-option-color-pending: var(--dtf-hover) !important;\n  --n-option-color-active: var(--dtf-active) !important;\n  --n-option-color-active-pending: var(--dtf-active) !important;\n  --n-option-check-color: var(--dtf-accent) !important;\n  --n-group-header-text-color: var(--dtf-subtle) !important;\n  --n-action-text-color: var(--dtf-muted) !important;\n  --n-action-divider-color: var(--dtf-line) !important;\n  --n-loading-color: var(--dtf-accent) !important;\n}\n\n/* -------------------------------------------------------------- toggles -- */\n\nhtml.dark .n-switch {\n  --n-rail-color: var(--dtf-fill) !important;\n  --n-rail-color-active: var(--dtf-accent) !important;\n  --n-button-color: var(--dtf-panel) !important;\n  --n-text-color: var(--dtf-on-accent) !important;\n  --n-icon-color: var(--dtf-muted) !important;\n  --n-loading-color: var(--dtf-accent) !important;\n  --n-box-shadow-focus: 0 0 0 2px var(--dtf-focus-ring) !important;\n}\n\nhtml.dark .n-slider {\n  --n-rail-color: var(--dtf-fill) !important;\n  --n-rail-color-hover: var(--dtf-fill) !important;\n  --n-fill-color: var(--dtf-accent) !important;\n  --n-fill-color-hover: var(--dtf-accent-soft) !important;\n  --n-handle-color: var(--dtf-panel) !important;\n  --n-dot-color: var(--dtf-panel) !important;\n  --n-dot-border: 2px solid var(--dtf-line) !important;\n  --n-dot-border-active: 2px solid var(--dtf-accent) !important;\n  --n-indicator-color: var(--dtf-fill) !important;\n  --n-indicator-text-color: var(--dtf-text) !important;\n}\n\nhtml.dark .n-checkbox {\n  --n-color: var(--dtf-field) !important;\n  --n-color-checked: var(--dtf-accent) !important;\n  --n-color-disabled: var(--dtf-fill) !important;\n  --n-check-mark-color: var(--dtf-on-accent) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-border: 1px solid var(--dtf-line-soft) !important;\n  --n-border-checked: 1px solid var(--dtf-accent) !important;\n  --n-border-focus: 1px solid var(--dtf-accent) !important;\n  --n-box-shadow-focus: 0 0 0 2px var(--dtf-focus-ring) !important;\n}\n\nhtml.dark .n-radio {\n  --n-color: var(--dtf-field) !important;\n  --n-color-active: var(--dtf-field) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-dot-color-active: var(--dtf-accent) !important;\n  --n-button-color: var(--dtf-field) !important;\n  --n-button-color-active: var(--dtf-accent) !important;\n  --n-button-text-color: var(--dtf-text) !important;\n  --n-button-text-color-active: var(--dtf-on-accent) !important;\n  --n-button-text-color-hover: var(--dtf-accent) !important;\n  --n-button-border-color: var(--dtf-line-soft) !important;\n  --n-button-border-color-active: var(--dtf-accent) !important;\n  --n-button-border-color-hover: var(--dtf-accent) !important;\n  --n-box-shadow-focus: 0 0 0 2px var(--dtf-focus-ring) !important;\n}\n\nhtml.dark .n-progress {\n  --n-rail-color: var(--dtf-fill) !important;\n  --n-fill-color: var(--dtf-accent) !important;\n  --n-text-color-circle: var(--dtf-text) !important;\n  --n-text-color-line-outer: var(--dtf-text) !important;\n  --n-text-color-line-inner: var(--dtf-on-accent) !important;\n  --n-icon-color: var(--dtf-accent) !important;\n}\n\nhtml.dark .n-spin {\n  --n-color: var(--dtf-accent) !important;\n  --n-text-color: var(--dtf-muted) !important;\n}\n\n/* -------------------------------------------------- code and result areas -- */\n\n/*\n  Блоки результата (TextareaCopyable.vue) — это naive \"n-code\" с highlight.js.\n  Цвета токенов приходят из общих переменных темы: \"--n-mono-3\" — комментарии,\n  \"--n-hue-1..6-2\" — остальные группы (одна шкала на все языки).\n*/\nhtml.dark .n-code {\n  --n-text-color: var(--dtf-text) !important;\n  --n-line-number-text-color: var(--dtf-subtle) !important;\n  --n-mono-3: var(--dtf-subtle) !important;\n  --n-hue-1: var(--dtf-accent) !important;\n  --n-hue-2: var(--dtf-link) !important;\n  --n-hue-3: var(--dtf-purple) !important;\n  --n-hue-4: var(--dtf-green) !important;\n  --n-hue-5: var(--dtf-red) !important;\n  --n-hue-5-2: var(--dtf-orange) !important;\n  --n-hue-6: var(--dtf-yellow) !important;\n  --n-hue-6-2: var(--dtf-yellow) !important;\n}\n\nhtml.dark .n-code,\nhtml.dark .n-code code,\nhtml.dark .n-code pre {\n  background-color: transparent !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark pre:not(.n-code) {\n  background-color: var(--dtf-field) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark :not(pre) > code:not(.n-code) {\n  background-color: var(--dtf-field) !important;\n  color: var(--dtf-green) !important;\n  border-radius: 3px;\n}\n\n/* --------------------------------------------------- overlays and tables -- */\n\nhtml.dark .n-popover,\nhtml.dark .n-tooltip {\n  --n-color: var(--dtf-fill) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-box-shadow: var(--dtf-shadow) !important;\n}\n\nhtml.dark .n-modal,\nhtml.dark .n-drawer,\nhtml.dark .n-dialog {\n  --n-color: var(--dtf-panel) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-title-text-color: var(--dtf-text) !important;\n  --n-border: 1px solid var(--dtf-line-soft) !important;\n  --n-icon-color: var(--dtf-accent) !important;\n  --n-icon-color-info: var(--dtf-link) !important;\n  --n-icon-color-success: var(--dtf-green) !important;\n  --n-icon-color-warning: var(--dtf-yellow) !important;\n  --n-icon-color-error: var(--dtf-red) !important;\n}\n\nhtml.dark .c-modal--overlay {\n  background-color: var(--dtf-scrim) !important;\n}\n\nhtml.dark .c-modal--container {\n  background-color: var(--dtf-panel) !important;\n  border: 1px solid var(--dtf-line-soft) !important;\n  box-shadow: var(--dtf-shadow) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark .n-message,\nhtml.dark .n-notification {\n  --n-color: var(--dtf-panel) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-header-text-color: var(--dtf-text) !important;\n  --n-description-text-color: var(--dtf-muted) !important;\n  --n-action-text-color: var(--dtf-accent) !important;\n  --n-icon-color: var(--dtf-accent) !important;\n  --n-icon-color-info: var(--dtf-link) !important;\n  --n-icon-color-success: var(--dtf-green) !important;\n  --n-icon-color-warning: var(--dtf-yellow) !important;\n  --n-icon-color-error: var(--dtf-red) !important;\n  --n-box-shadow: var(--dtf-shadow) !important;\n  --n-border: 1px solid var(--dtf-line-soft) !important;\n}\n\nhtml.dark .n-alert {\n  --n-color: var(--dtf-fill) !important;\n  --n-border: 1px solid var(--dtf-line-soft) !important;\n  --n-title-text-color: var(--dtf-text) !important;\n  --n-content-text-color: var(--dtf-text) !important;\n  --n-icon-color: var(--dtf-accent) !important;\n  --n-color-info: var(--dtf-fill) !important;\n  --n-color-success: var(--dtf-fill) !important;\n  --n-color-warning: var(--dtf-fill) !important;\n  --n-color-error: var(--dtf-fill) !important;\n  --n-border-info: 1px solid var(--dtf-link) !important;\n  --n-border-success: 1px solid var(--dtf-green) !important;\n  --n-border-warning: 1px solid var(--dtf-yellow) !important;\n  --n-border-error: 1px solid var(--dtf-red) !important;\n  --n-title-text-color-info: var(--dtf-text) !important;\n  --n-title-text-color-success: var(--dtf-text) !important;\n  --n-title-text-color-warning: var(--dtf-text) !important;\n  --n-title-text-color-error: var(--dtf-text) !important;\n  --n-content-text-color-info: var(--dtf-text) !important;\n  --n-content-text-color-success: var(--dtf-text) !important;\n  --n-content-text-color-warning: var(--dtf-text) !important;\n  --n-content-text-color-error: var(--dtf-text) !important;\n  --n-icon-color-info: var(--dtf-link) !important;\n  --n-icon-color-success: var(--dtf-green) !important;\n  --n-icon-color-warning: var(--dtf-yellow) !important;\n  --n-icon-color-error: var(--dtf-red) !important;\n}\n\n/*\n  c-alert: вариант (warning/error) живёт в хеш-переменной, поэтому меняется\n  только подложка, а цвет текста и рамки остаётся собственным — так предупреждение\n  и ошибка не сливаются в один вид.\n*/\nhtml.dark .c-alert {\n  background-color: var(--dtf-fill) !important;\n  border-left: 3px solid currentColor !important;\n}\n\nhtml.dark .n-tag {\n  --n-color: var(--dtf-fill) !important;\n  --n-color-checkable: var(--dtf-fill) !important;\n  --n-color-checked: var(--dtf-accent) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-text-color-checkable: var(--dtf-muted) !important;\n  --n-text-color-checked: var(--dtf-on-accent) !important;\n  --n-border: 1px solid var(--dtf-line-soft) !important;\n  --n-close-icon-color: var(--dtf-muted) !important;\n}\n\nhtml.dark .n-table,\nhtml.dark .n-data-table {\n  --n-td-color: var(--dtf-panel) !important;\n  --n-td-color-hover: var(--dtf-hover) !important;\n  --n-td-color-striped: var(--dtf-fill) !important;\n  --n-td-text-color: var(--dtf-text) !important;\n  --n-th-color: var(--dtf-fill) !important;\n  --n-th-color-hover: var(--dtf-hover) !important;\n  --n-th-text-color: var(--dtf-muted) !important;\n  --n-th-icon-color: var(--dtf-muted) !important;\n  --n-th-icon-color-active: var(--dtf-accent) !important;\n  --n-border-color: var(--dtf-line-soft) !important;\n  --n-action-divider-color: var(--dtf-line) !important;\n  --n-loading-color: var(--dtf-accent) !important;\n}\n\nhtml.dark .n-collapse {\n  --n-title-text-color: var(--dtf-text) !important;\n  --n-title-text-color-disabled: var(--dtf-subtle) !important;\n  --n-text-color: var(--dtf-muted) !important;\n  --n-arrow-color: var(--dtf-muted) !important;\n  --n-arrow-color-disabled: var(--dtf-subtle) !important;\n  --n-divider-color: var(--dtf-line) !important;\n}\n\nhtml.dark .n-empty {\n  --n-text-color: var(--dtf-muted) !important;\n  --n-icon-color: var(--dtf-subtle) !important;\n  --n-extra-text-color: var(--dtf-subtle) !important;\n}\n"
    }
   ]
  },
  {
   "id": "paper",
   "label": "Paper",
   "files": [
    {
     "name": "digitable-focus-paper.css",
     "path": "digitable-focus-paper.css",
     "lang": "css",
     "bytes": 33989,
     "lines": 895,
     "text": "/* Digitable Focus Paper for IT Tools — Digitable Workbench 0.1.0 */\n/*\n  A colour layer for an unmodified it-tools instance (GPL-3.0). This file adds\n  no behaviour and patches no application code; it only re-declares colours.\n  Paints the light mode of the app (html:not(.dark)).\n*/\n/*\n  Distribution terms of THIS file: Digitable Workbench Personal License, the\n  terms of the archive this file ships in — see LICENSE-PERSONAL.md. Copyright\n  in the palette belongs to Digitable.\n\n  This is a theme, not a fork. No it-tools code is copied, linked or bundled\n  here: the application is not shipped in the archive at all, so nothing in\n  this folder is a derivative work of it and GPL-3.0 does not reach it.\n\n  Inside the fork digitable-lol/it-tools the very same palette travels under\n  GPL-3.0-only, because there it is bundled with the application. Two grants by\n  one copyright holder; neither relicenses any part of it-tools. The copy for\n  the fork is generated next to this one, in fork/it-tools/, and it is not the\n  same bytes on purpose.\n*/\n\nhtml:not(.dark) {\n  color-scheme: light;\n\n  --dtf-page: #F4F7F8;\n  --dtf-panel: #FFFFFF;\n  --dtf-field: #F4F7F8;\n  --dtf-fill: #E9F0F2;\n  --dtf-hover: #EDF6F6;\n  --dtf-active: #DBEDEE;\n  --dtf-active-ink: #006E78;\n\n  --dtf-text: #10202A;\n  --dtf-muted: #526A78;\n  --dtf-subtle: #5F7480;\n\n  --dtf-line: #A9C2C9;\n  --dtf-line-soft: #D0DDE1;\n\n  --dtf-accent: #007C83;\n  --dtf-accent-soft: #006E78;\n  --dtf-on-accent: #F4F7F8;\n  --dtf-link: #0067A8;\n\n  --dtf-green: #287A36;\n  --dtf-yellow: #8A5B00;\n  --dtf-orange: #A54A00;\n  --dtf-purple: #7139A3;\n  --dtf-red: #B4232E;\n\n  --dtf-selection: #70CED4;\n  --dtf-on-selection: #10202A;\n  --dtf-focus-ring: rgba(0, 124, 131, 0.35);\n  --dtf-scrim: rgba(16, 32, 42, 0.45);\n  --dtf-shadow: 0 8px 24px rgba(16, 32, 42, 0.18);\n}\n\n/* ---------------------------------------------------------------- shell -- */\n\nhtml:not(.dark),\nhtml:not(.dark) body {\n  background-color: var(--dtf-page) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml:not(.dark) ::selection {\n  background-color: var(--dtf-selection);\n  color: var(--dtf-on-selection);\n}\n\nhtml:not(.dark) * {\n  scrollbar-color: var(--dtf-line) transparent;\n}\n\n/*\n  Видимая рамка фокуса. naive-ui и c-button рисуют собственный тонкий контур\n  цветом бренда, поэтому здесь ставится свой — и ни одно правило темы outline\n  не снимает.\n*/\nhtml:not(.dark) :focus-visible {\n  outline: 2px solid var(--dtf-accent) !important;\n  outline-offset: 2px !important;\n}\n\nhtml:not(.dark) .c-button:focus,\nhtml:not(.dark) .c-link:focus,\nhtml:not(.dark) .c-select-input:focus {\n  outline-color: var(--dtf-accent) !important;\n}\n\n/* --------------------------------------------------------------- layout -- */\n\nhtml:not(.dark) .n-layout {\n  --n-color: var(--dtf-page) !important;\n  --n-color-embedded: var(--dtf-panel) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-header-color: var(--dtf-panel) !important;\n  --n-header-border-color: var(--dtf-line) !important;\n  --n-footer-color: var(--dtf-panel) !important;\n  --n-footer-border-color: var(--dtf-line) !important;\n}\n\nhtml:not(.dark) .n-layout-sider {\n  --n-color: var(--dtf-panel) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-border-color: var(--dtf-line) !important;\n  --n-toggle-button-color: var(--dtf-fill) !important;\n  --n-toggle-button-border: 1px solid var(--dtf-line) !important;\n  --n-toggle-button-icon-color: var(--dtf-text) !important;\n  --n-toggle-bar-color: var(--dtf-line) !important;\n  --n-toggle-bar-color-hover: var(--dtf-accent) !important;\n}\n\nhtml:not(.dark) .n-layout-sider__border {\n  background-color: var(--dtf-line) !important;\n}\n\nhtml:not(.dark) .n-scrollbar,\nhtml:not(.dark) .n-scrollbar-rail {\n  --n-scrollbar-color: var(--dtf-line) !important;\n  --n-scrollbar-color-hover: var(--dtf-accent) !important;\n}\n\n/* Полупрозрачная подложка мобильного меню (MenuLayout.vue). */\nhtml:not(.dark) .menu-layout .overlay {\n  background-color: var(--dtf-scrim) !important;\n}\n\n/*\n  Шапка боковой панели. Штатный герой — растровый SVG-градиент в цветах\n  it-tools; подменить его цвета из CSS нельзя, поэтому он скрывается через\n  visibility (высота блока сохраняется) и заменяется градиентом палитры.\n*/\nhtml:not(.dark) .hero-wrapper {\n  background: linear-gradient(140deg, var(--dtf-panel) 0%, var(--dtf-fill) 100%) !important;\n  border-bottom: 1px solid var(--dtf-line) !important;\n}\n\nhtml:not(.dark) .hero-wrapper .gradient {\n  visibility: hidden;\n}\n\nhtml:not(.dark) .hero-wrapper .text-wrapper,\nhtml:not(.dark) .hero-wrapper .title {\n  color: var(--dtf-accent) !important;\n}\n\nhtml:not(.dark) .hero-wrapper .subtitle {\n  color: var(--dtf-muted) !important;\n}\n\nhtml:not(.dark) .hero-wrapper .divider {\n  background-color: var(--dtf-accent) !important;\n}\n\nhtml:not(.dark) .sider-content .footer {\n  color: var(--dtf-muted) !important;\n}\n\n/* ----------------------------------------------------------- tool menu -- */\n\nhtml:not(.dark) .n-menu {\n  --n-color: transparent !important;\n  --n-group-text-color: var(--dtf-subtle) !important;\n  --n-divider-color: var(--dtf-line) !important;\n  --n-border-color-horizontal: var(--dtf-line) !important;\n\n  --n-item-color-hover: var(--dtf-hover) !important;\n  --n-item-color-active: var(--dtf-active) !important;\n  --n-item-color-active-hover: var(--dtf-active) !important;\n  --n-item-color-active-collapsed: var(--dtf-active) !important;\n\n  --n-item-text-color: var(--dtf-muted) !important;\n  --n-item-text-color-hover: var(--dtf-text) !important;\n  --n-item-text-color-active: var(--dtf-active-ink) !important;\n  --n-item-text-color-active-hover: var(--dtf-active-ink) !important;\n  --n-item-text-color-child-active: var(--dtf-active-ink) !important;\n  --n-item-text-color-child-active-hover: var(--dtf-active-ink) !important;\n  --n-item-text-color-horizontal: var(--dtf-muted) !important;\n  --n-item-text-color-hover-horizontal: var(--dtf-text) !important;\n  --n-item-text-color-active-horizontal: var(--dtf-active-ink) !important;\n  --n-item-text-color-active-hover-horizontal: var(--dtf-active-ink) !important;\n  --n-item-text-color-child-active-horizontal: var(--dtf-active-ink) !important;\n  --n-item-text-color-child-active-hover-horizontal: var(--dtf-active-ink) !important;\n\n  --n-item-icon-color: var(--dtf-subtle) !important;\n  --n-item-icon-color-hover: var(--dtf-text) !important;\n  --n-item-icon-color-active: var(--dtf-active-ink) !important;\n  --n-item-icon-color-active-hover: var(--dtf-active-ink) !important;\n  --n-item-icon-color-child-active: var(--dtf-active-ink) !important;\n  --n-item-icon-color-child-active-hover: var(--dtf-active-ink) !important;\n  --n-item-icon-color-collapsed: var(--dtf-subtle) !important;\n  --n-item-icon-color-horizontal: var(--dtf-subtle) !important;\n  --n-item-icon-color-hover-horizontal: var(--dtf-text) !important;\n  --n-item-icon-color-active-horizontal: var(--dtf-active-ink) !important;\n  --n-item-icon-color-active-hover-horizontal: var(--dtf-active-ink) !important;\n  --n-item-icon-color-child-active-horizontal: var(--dtf-active-ink) !important;\n  --n-item-icon-color-child-active-hover-horizontal: var(--dtf-active-ink) !important;\n\n  --n-arrow-color: var(--dtf-subtle) !important;\n  --n-arrow-color-hover: var(--dtf-text) !important;\n  --n-arrow-color-active: var(--dtf-active-ink) !important;\n  --n-arrow-color-active-hover: var(--dtf-active-ink) !important;\n  --n-arrow-color-child-active: var(--dtf-active-ink) !important;\n  --n-arrow-color-child-active-hover: var(--dtf-active-ink) !important;\n}\n\n/* Подпись пункта — это RouterLink, цвет должен наследоваться от пункта. */\nhtml:not(.dark) .n-menu .n-menu-item-content-header a {\n  color: inherit !important;\n}\n\n/* Полоса сворачивания категории (CollapsibleToolMenu.vue). */\nhtml:not(.dark) .menu-wrapper .toggle-bar::before {\n  background-color: var(--dtf-line) !important;\n}\n\n/* Точка «новый инструмент» рядом с иконкой (MenuIconItem.vue). */\nhtml:not(.dark) .menu-icon-item .badge {\n  background-color: var(--dtf-accent) !important;\n}\n\n/* ----------------------------------------------------------- typography -- */\n\nhtml:not(.dark) .n-h,\nhtml:not(.dark) .n-h1,\nhtml:not(.dark) .n-h2,\nhtml:not(.dark) .n-h3,\nhtml:not(.dark) .n-h4,\nhtml:not(.dark) .n-h5,\nhtml:not(.dark) .n-h6 {\n  --n-text-color: var(--dtf-text) !important;\n  --n-bar-color: var(--dtf-accent) !important;\n}\n\nhtml:not(.dark) .n-p,\nhtml:not(.dark) .n-text,\nhtml:not(.dark) .n-li,\nhtml:not(.dark) .n-ul,\nhtml:not(.dark) .n-ol {\n  --n-text-color: var(--dtf-text) !important;\n  --n-p-text-color: var(--dtf-text) !important;\n  --n-li-text-color: var(--dtf-text) !important;\n}\n\nhtml:not(.dark) .n-a,\nhtml:not(.dark) .n-a a {\n  --n-text-color: var(--dtf-link) !important;\n  --n-a-text-color: var(--dtf-link) !important;\n}\n\nhtml:not(.dark) .n-blockquote {\n  --n-text-color: var(--dtf-muted) !important;\n  --n-prefix-color: var(--dtf-accent) !important;\n}\n\nhtml:not(.dark) .n-divider {\n  --n-color: var(--dtf-line) !important;\n  --n-text-color: var(--dtf-text) !important;\n}\n\n/* Заголовок инструмента: штатно приглушён opacity, палитра даёт свой контраст. */\nhtml:not(.dark) .tool-layout .tool-header .n-h1 {\n  color: var(--dtf-text) !important;\n  opacity: 1 !important;\n}\n\nhtml:not(.dark) .tool-layout .tool-header .separator {\n  background: var(--dtf-line) !important;\n  opacity: 1 !important;\n}\n\nhtml:not(.dark) .tool-layout .tool-header .description {\n  color: var(--dtf-muted) !important;\n  opacity: 1 !important;\n}\n\n/* ---------------------------------------------------------------- cards -- */\n\nhtml:not(.dark) .c-card {\n  background-color: var(--dtf-panel) !important;\n  border-color: var(--dtf-line-soft) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml:not(.dark) .c-card .c-card-title {\n  color: var(--dtf-text) !important;\n}\n\nhtml:not(.dark) .c-card[class~=\"!hover:border-primary\"]:hover,\nhtml:not(.dark) a[class~=\"decoration-none\"]:hover .c-card,\nhtml:not(.dark) a[class~=\"decoration-none\"]:focus-visible .c-card {\n  border-color: var(--dtf-accent) !important;\n}\n\nhtml:not(.dark) .n-card {\n  --n-color: var(--dtf-panel) !important;\n  --n-color-modal: var(--dtf-panel) !important;\n  --n-color-popover: var(--dtf-panel) !important;\n  --n-color-embedded: var(--dtf-fill) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-title-text-color: var(--dtf-text) !important;\n  --n-border-color: var(--dtf-line-soft) !important;\n  --n-action-color: var(--dtf-fill) !important;\n  --n-close-icon-color: var(--dtf-muted) !important;\n}\n\n/* Промо-карточка на главной: штатно фиксированный зелёный градиент. */\nhtml:not(.dark) .colored-card {\n  background: linear-gradient(48deg, var(--dtf-accent-soft) 0%, var(--dtf-accent) 100%) !important;\n  border: none !important;\n  color: var(--dtf-on-accent) !important;\n}\n\nhtml:not(.dark) .colored-card .title,\nhtml:not(.dark) .colored-card .description,\nhtml:not(.dark) .colored-card a {\n  color: var(--dtf-on-accent) !important;\n}\n\n/* ----------------------------------------------------- utility classes -- */\n/*\n  UnoCSS-утилиты с зашитыми цветами. Селекторы по атрибуту, чтобы не\n  экранировать \":\", \"!\" и \"#\" в именах классов.\n*/\n\nhtml:not(.dark) [class~=\"text-black\"],\nhtml:not(.dark) [class~=\"text-white\"],\nhtml:not(.dark) [class~=\"dark:text-white\"],\nhtml:not(.dark) [class~=\"dark:text-neutral-800\"] {\n  color: var(--dtf-text) !important;\n}\n\nhtml:not(.dark) [class~=\"text-neutral-400\"],\nhtml:not(.dark) [class~=\"text-neutral-500\"],\nhtml:not(.dark) [class~=\"text-gray-400\"],\nhtml:not(.dark) [class~=\"text-gray-500\"],\nhtml:not(.dark) [class~=\"dark:text-neutral-400\"],\nhtml:not(.dark) [class~=\"dark:text-gray-400\"] {\n  color: var(--dtf-muted) !important;\n}\n\nhtml:not(.dark) [class~=\"text-neutral-600\"],\nhtml:not(.dark) [class~=\"dark:text-neutral-600\"] {\n  color: var(--dtf-subtle) !important;\n}\n\nhtml:not(.dark) [class~=\"text-primary\"] {\n  color: var(--dtf-accent) !important;\n}\n\nhtml:not(.dark) [class~=\"border-primary\"],\nhtml:not(.dark) [class~=\"important:border-primary\"],\nhtml:not(.dark) [class~=\"!hover:border-primary\"]:hover,\nhtml:not(.dark) [class~=\"hover:important:border-primary\"]:hover,\nhtml:not(.dark) [class~=\"border-gray-300\"],\nhtml:not(.dark) [class~=\"border-dashed\"] {\n  border-color: var(--dtf-accent) !important;\n}\n\nhtml:not(.dark) [class~=\"border-dashed\"]:not(:hover) {\n  border-color: var(--dtf-line) !important;\n}\n\nhtml:not(.dark) [class~=\"bg-surface\"],\nhtml:not(.dark) [class~=\"bg-white\"],\nhtml:not(.dark) [class~=\"bg-#ffffff\"],\nhtml:not(.dark) [class~=\"dark:bg-#232323\"],\nhtml:not(.dark) [class~=\"dark:bg-#333333\"] {\n  background-color: var(--dtf-panel) !important;\n}\n\nhtml:not(.dark) [class~=\"bg-background\"] {\n  background-color: var(--dtf-page) !important;\n}\n\n/* Значок «new» на карточке инструмента: фон приходит инлайном из темы naive. */\nhtml:not(.dark) [class~=\"rounded-full\"][class~=\"text-xs\"] {\n  background-color: var(--dtf-accent) !important;\n  color: var(--dtf-on-accent) !important;\n}\n\n/* Подсказка c-tooltip: штатно чёрный блок с белым текстом. */\nhtml:not(.dark) [class~=\"bg-black\"] {\n  background-color: var(--dtf-fill) !important;\n  border: 1px solid var(--dtf-line-soft) !important;\n  color: var(--dtf-text) !important;\n  box-shadow: var(--dtf-shadow) !important;\n}\n\n/* -------------------------------------------------------------- buttons -- */\n/*\n  Вариант c-button (default/primary/warning/error) виден только в\n  хеш-переменной сборки, поэтому заливка у всех одна нейтральная; акцент\n  остаётся за состояниями и за отдельно опознаваемыми кнопками.\n*/\n\nhtml:not(.dark) .c-button {\n  background-color: var(--dtf-fill) !important;\n  border: 1px solid var(--dtf-line-soft) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml:not(.dark) .c-button:not(.disabled):hover {\n  background-color: var(--dtf-hover) !important;\n  border-color: var(--dtf-accent) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml:not(.dark) .c-button:not(.disabled):active {\n  background-color: var(--dtf-active) !important;\n  color: var(--dtf-active-ink) !important;\n}\n\n/* Круглые кнопки — иконки в шапке и «копировать»: остаются без заливки. */\nhtml:not(.dark) .c-button.circle {\n  background-color: transparent !important;\n  border-color: transparent !important;\n  color: var(--dtf-muted) !important;\n}\n\nhtml:not(.dark) .c-button.circle:not(.disabled):hover {\n  background-color: var(--dtf-hover) !important;\n  border-color: transparent !important;\n  color: var(--dtf-active-ink) !important;\n}\n\nhtml:not(.dark) .support-button,\nhtml:not(.dark) .support-button:hover {\n  background: var(--dtf-accent) !important;\n  border-color: var(--dtf-accent) !important;\n  color: var(--dtf-on-accent) !important;\n}\n\nhtml:not(.dark) .c-link {\n  color: var(--dtf-link) !important;\n}\n\nhtml:not(.dark) .c-link:hover,\nhtml:not(.dark) .c-link:focus {\n  color: var(--dtf-accent) !important;\n}\n\nhtml:not(.dark) .n-button {\n  --n-text-color: var(--dtf-text) !important;\n  --n-text-color-hover: var(--dtf-active-ink) !important;\n  --n-text-color-pressed: var(--dtf-active-ink) !important;\n  --n-text-color-focus: var(--dtf-active-ink) !important;\n  --n-text-color-disabled: var(--dtf-subtle) !important;\n  --n-text-color-text: var(--dtf-text) !important;\n  --n-text-color-text-hover: var(--dtf-accent) !important;\n  --n-text-color-text-pressed: var(--dtf-accent-soft) !important;\n  --n-text-color-text-focus: var(--dtf-accent) !important;\n  --n-text-color-ghost: var(--dtf-text) !important;\n  --n-border-hover: 1px solid var(--dtf-accent) !important;\n  --n-border-pressed: 1px solid var(--dtf-accent) !important;\n  --n-border-focus: 1px solid var(--dtf-accent) !important;\n  --n-ripple-color: var(--dtf-accent) !important;\n}\n\nhtml:not(.dark) .n-button--primary-type,\nhtml:not(.dark) .n-button--info-type,\nhtml:not(.dark) .n-button--success-type {\n  --n-color: var(--dtf-accent) !important;\n  --n-color-hover: var(--dtf-accent-soft) !important;\n  --n-color-pressed: var(--dtf-accent-soft) !important;\n  --n-color-focus: var(--dtf-accent-soft) !important;\n  --n-text-color: var(--dtf-on-accent) !important;\n  --n-text-color-hover: var(--dtf-on-accent) !important;\n  --n-text-color-pressed: var(--dtf-on-accent) !important;\n  --n-text-color-focus: var(--dtf-on-accent) !important;\n  --n-border: 1px solid var(--dtf-accent) !important;\n  --n-border-hover: 1px solid var(--dtf-accent-soft) !important;\n  --n-border-focus: 1px solid var(--dtf-accent-soft) !important;\n  --n-border-pressed: 1px solid var(--dtf-accent-soft) !important;\n}\n\n/* --------------------------------------------------------------- inputs -- */\n\nhtml:not(.dark) .n-input,\nhtml:not(.dark) .n-input-number,\nhtml:not(.dark) .n-input-group-label {\n  --n-color: var(--dtf-field) !important;\n  --n-color-focus: var(--dtf-field) !important;\n  --n-color-disabled: var(--dtf-fill) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-text-color-disabled: var(--dtf-subtle) !important;\n  --n-text-decoration-color: var(--dtf-text) !important;\n  --n-placeholder-color: var(--dtf-subtle) !important;\n  --n-placeholder-color-disabled: var(--dtf-subtle) !important;\n  --n-caret-color: var(--dtf-accent) !important;\n  --n-border: 1px solid var(--dtf-line-soft) !important;\n  --n-border-hover: 1px solid var(--dtf-accent) !important;\n  --n-border-focus: 1px solid var(--dtf-accent) !important;\n  --n-border-disabled: 1px solid var(--dtf-line-soft) !important;\n  --n-box-shadow-focus: 0 0 0 2px var(--dtf-focus-ring) !important;\n  --n-loading-color: var(--dtf-accent) !important;\n  --n-icon-color: var(--dtf-muted) !important;\n  --n-icon-color-hover: var(--dtf-text) !important;\n  --n-icon-color-pressed: var(--dtf-accent) !important;\n  --n-icon-color-disabled: var(--dtf-subtle) !important;\n  --n-clear-color: var(--dtf-muted) !important;\n  --n-clear-color-hover: var(--dtf-text) !important;\n  --n-clear-color-pressed: var(--dtf-accent) !important;\n  --n-suffix-text-color: var(--dtf-text) !important;\n  --n-count-text-color: var(--dtf-muted) !important;\n  --n-count-text-color-disabled: var(--dtf-subtle) !important;\n  --n-group-label-color: var(--dtf-fill) !important;\n  --n-group-label-text-color: var(--dtf-text) !important;\n  --n-group-label-border: 1px solid var(--dtf-line-soft) !important;\n  --n-caret-color-warning: var(--dtf-yellow) !important;\n  --n-border-warning: 1px solid var(--dtf-yellow) !important;\n  --n-border-hover-warning: 1px solid var(--dtf-yellow) !important;\n  --n-border-focus-warning: 1px solid var(--dtf-yellow) !important;\n  --n-color-focus-warning: var(--dtf-field) !important;\n  --n-loading-color-warning: var(--dtf-yellow) !important;\n  --n-caret-color-error: var(--dtf-red) !important;\n  --n-border-error: 1px solid var(--dtf-red) !important;\n  --n-border-hover-error: 1px solid var(--dtf-red) !important;\n  --n-border-focus-error: 1px solid var(--dtf-red) !important;\n  --n-color-focus-error: var(--dtf-field) !important;\n  --n-loading-color-error: var(--dtf-red) !important;\n}\n\nhtml:not(.dark) .n-form-item {\n  --n-label-text-color: var(--dtf-text) !important;\n  --n-feedback-text-color: var(--dtf-muted) !important;\n  --n-feedback-text-color-warning: var(--dtf-yellow) !important;\n  --n-feedback-text-color-error: var(--dtf-red) !important;\n  --n-asterisk-color: var(--dtf-red) !important;\n}\n\nhtml:not(.dark) .c-input-text .input-wrapper {\n  background-color: var(--dtf-field) !important;\n  border-color: var(--dtf-line-soft) !important;\n}\n\nhtml:not(.dark) .c-input-text .input-wrapper:hover,\nhtml:not(.dark) .c-input-text .input-wrapper:focus-within {\n  border-color: var(--dtf-accent) !important;\n}\n\nhtml:not(.dark) .c-input-text .input-wrapper:focus-within {\n  background-color: var(--dtf-field) !important;\n  box-shadow: 0 0 0 2px var(--dtf-focus-ring) !important;\n}\n\nhtml:not(.dark) .c-input-text .input,\nhtml:not(.dark) .c-input-text textarea,\nhtml:not(.dark) .c-input-text input {\n  color: var(--dtf-text) !important;\n  caret-color: var(--dtf-accent) !important;\n}\n\nhtml:not(.dark) .c-input-text .input::placeholder,\nhtml:not(.dark) .c-input-text textarea::placeholder,\nhtml:not(.dark) .c-input-text input::placeholder {\n  color: var(--dtf-subtle) !important;\n  opacity: 1 !important;\n}\n\nhtml:not(.dark) .c-input-text > .label,\nhtml:not(.dark) .c-label > label {\n  color: var(--dtf-muted) !important;\n}\n\nhtml:not(.dark) .c-input-text .feedback {\n  color: var(--dtf-red) !important;\n}\n\nhtml:not(.dark) .c-input-text.error .input-wrapper,\nhtml:not(.dark) .c-input-text.error .input-wrapper:hover,\nhtml:not(.dark) .c-input-text.error .input-wrapper:focus-within {\n  border-color: var(--dtf-red) !important;\n}\n\n/* -------------------------------------------------------------- selects -- */\n\nhtml:not(.dark) .c-select .c-select-input {\n  background-color: var(--dtf-field) !important;\n  border-color: var(--dtf-line-soft) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml:not(.dark) .c-select .c-select-input:hover,\nhtml:not(.dark) .c-select .c-select-input.is-open,\nhtml:not(.dark) .c-select .c-select-input:focus {\n  border-color: var(--dtf-accent) !important;\n}\n\nhtml:not(.dark) .c-select .c-select-input .placeholder,\nhtml:not(.dark) .c-select .c-select-input .chevron {\n  color: var(--dtf-subtle) !important;\n}\n\nhtml:not(.dark) .c-select .search-input {\n  color: var(--dtf-text) !important;\n}\n\nhtml:not(.dark) .c-select .search-input::placeholder {\n  color: var(--dtf-subtle) !important;\n  opacity: 1 !important;\n}\n\nhtml:not(.dark) .c-select .c-select-dropdown {\n  background-color: var(--dtf-panel) !important;\n  border: 1px solid var(--dtf-line-soft) !important;\n  box-shadow: var(--dtf-shadow) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml:not(.dark) .c-select .c-select-dropdown-option {\n  color: var(--dtf-text) !important;\n}\n\nhtml:not(.dark) .c-select .c-select-dropdown-option:hover,\nhtml:not(.dark) .c-select .c-select-dropdown-option.hover {\n  background-color: var(--dtf-hover) !important;\n}\n\nhtml:not(.dark) .c-select .c-select-dropdown-option.active {\n  background-color: var(--dtf-active) !important;\n  color: var(--dtf-active-ink) !important;\n}\n\nhtml:not(.dark) .n-base-selection {\n  --n-color: var(--dtf-field) !important;\n  --n-color-active: var(--dtf-field) !important;\n  --n-color-disabled: var(--dtf-fill) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-placeholder-color: var(--dtf-subtle) !important;\n  --n-arrow-color: var(--dtf-muted) !important;\n  --n-caret-color: var(--dtf-accent) !important;\n  --n-border: 1px solid var(--dtf-line-soft) !important;\n  --n-border-hover: 1px solid var(--dtf-accent) !important;\n  --n-border-active: 1px solid var(--dtf-accent) !important;\n  --n-border-focus: 1px solid var(--dtf-accent) !important;\n  --n-box-shadow-hover: none !important;\n  --n-box-shadow-active: 0 0 0 2px var(--dtf-focus-ring) !important;\n  --n-box-shadow-focus: 0 0 0 2px var(--dtf-focus-ring) !important;\n}\n\nhtml:not(.dark) .n-base-select-menu {\n  --n-color: var(--dtf-panel) !important;\n  --n-option-text-color: var(--dtf-text) !important;\n  --n-option-text-color-active: var(--dtf-active-ink) !important;\n  --n-option-text-color-pressed: var(--dtf-active-ink) !important;\n  --n-option-text-color-disabled: var(--dtf-subtle) !important;\n  --n-option-color-pending: var(--dtf-hover) !important;\n  --n-option-color-active: var(--dtf-active) !important;\n  --n-option-color-active-pending: var(--dtf-active) !important;\n  --n-option-check-color: var(--dtf-accent) !important;\n  --n-group-header-text-color: var(--dtf-subtle) !important;\n  --n-action-text-color: var(--dtf-muted) !important;\n  --n-action-divider-color: var(--dtf-line) !important;\n  --n-loading-color: var(--dtf-accent) !important;\n}\n\n/* -------------------------------------------------------------- toggles -- */\n\nhtml:not(.dark) .n-switch {\n  --n-rail-color: var(--dtf-fill) !important;\n  --n-rail-color-active: var(--dtf-accent) !important;\n  --n-button-color: var(--dtf-panel) !important;\n  --n-text-color: var(--dtf-on-accent) !important;\n  --n-icon-color: var(--dtf-muted) !important;\n  --n-loading-color: var(--dtf-accent) !important;\n  --n-box-shadow-focus: 0 0 0 2px var(--dtf-focus-ring) !important;\n}\n\nhtml:not(.dark) .n-slider {\n  --n-rail-color: var(--dtf-fill) !important;\n  --n-rail-color-hover: var(--dtf-fill) !important;\n  --n-fill-color: var(--dtf-accent) !important;\n  --n-fill-color-hover: var(--dtf-accent-soft) !important;\n  --n-handle-color: var(--dtf-panel) !important;\n  --n-dot-color: var(--dtf-panel) !important;\n  --n-dot-border: 2px solid var(--dtf-line) !important;\n  --n-dot-border-active: 2px solid var(--dtf-accent) !important;\n  --n-indicator-color: var(--dtf-fill) !important;\n  --n-indicator-text-color: var(--dtf-text) !important;\n}\n\nhtml:not(.dark) .n-checkbox {\n  --n-color: var(--dtf-field) !important;\n  --n-color-checked: var(--dtf-accent) !important;\n  --n-color-disabled: var(--dtf-fill) !important;\n  --n-check-mark-color: var(--dtf-on-accent) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-border: 1px solid var(--dtf-line-soft) !important;\n  --n-border-checked: 1px solid var(--dtf-accent) !important;\n  --n-border-focus: 1px solid var(--dtf-accent) !important;\n  --n-box-shadow-focus: 0 0 0 2px var(--dtf-focus-ring) !important;\n}\n\nhtml:not(.dark) .n-radio {\n  --n-color: var(--dtf-field) !important;\n  --n-color-active: var(--dtf-field) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-dot-color-active: var(--dtf-accent) !important;\n  --n-button-color: var(--dtf-field) !important;\n  --n-button-color-active: var(--dtf-accent) !important;\n  --n-button-text-color: var(--dtf-text) !important;\n  --n-button-text-color-active: var(--dtf-on-accent) !important;\n  --n-button-text-color-hover: var(--dtf-accent) !important;\n  --n-button-border-color: var(--dtf-line-soft) !important;\n  --n-button-border-color-active: var(--dtf-accent) !important;\n  --n-button-border-color-hover: var(--dtf-accent) !important;\n  --n-box-shadow-focus: 0 0 0 2px var(--dtf-focus-ring) !important;\n}\n\nhtml:not(.dark) .n-progress {\n  --n-rail-color: var(--dtf-fill) !important;\n  --n-fill-color: var(--dtf-accent) !important;\n  --n-text-color-circle: var(--dtf-text) !important;\n  --n-text-color-line-outer: var(--dtf-text) !important;\n  --n-text-color-line-inner: var(--dtf-on-accent) !important;\n  --n-icon-color: var(--dtf-accent) !important;\n}\n\nhtml:not(.dark) .n-spin {\n  --n-color: var(--dtf-accent) !important;\n  --n-text-color: var(--dtf-muted) !important;\n}\n\n/* -------------------------------------------------- code and result areas -- */\n\n/*\n  Блоки результата (TextareaCopyable.vue) — это naive \"n-code\" с highlight.js.\n  Цвета токенов приходят из общих переменных темы: \"--n-mono-3\" — комментарии,\n  \"--n-hue-1..6-2\" — остальные группы (одна шкала на все языки).\n*/\nhtml:not(.dark) .n-code {\n  --n-text-color: var(--dtf-text) !important;\n  --n-line-number-text-color: var(--dtf-subtle) !important;\n  --n-mono-3: var(--dtf-subtle) !important;\n  --n-hue-1: var(--dtf-accent) !important;\n  --n-hue-2: var(--dtf-link) !important;\n  --n-hue-3: var(--dtf-purple) !important;\n  --n-hue-4: var(--dtf-green) !important;\n  --n-hue-5: var(--dtf-red) !important;\n  --n-hue-5-2: var(--dtf-orange) !important;\n  --n-hue-6: var(--dtf-yellow) !important;\n  --n-hue-6-2: var(--dtf-yellow) !important;\n}\n\nhtml:not(.dark) .n-code,\nhtml:not(.dark) .n-code code,\nhtml:not(.dark) .n-code pre {\n  background-color: transparent !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml:not(.dark) pre:not(.n-code) {\n  background-color: var(--dtf-field) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml:not(.dark) :not(pre) > code:not(.n-code) {\n  background-color: var(--dtf-field) !important;\n  color: var(--dtf-green) !important;\n  border-radius: 3px;\n}\n\n/* --------------------------------------------------- overlays and tables -- */\n\nhtml:not(.dark) .n-popover,\nhtml:not(.dark) .n-tooltip {\n  --n-color: var(--dtf-fill) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-box-shadow: var(--dtf-shadow) !important;\n}\n\nhtml:not(.dark) .n-modal,\nhtml:not(.dark) .n-drawer,\nhtml:not(.dark) .n-dialog {\n  --n-color: var(--dtf-panel) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-title-text-color: var(--dtf-text) !important;\n  --n-border: 1px solid var(--dtf-line-soft) !important;\n  --n-icon-color: var(--dtf-accent) !important;\n  --n-icon-color-info: var(--dtf-link) !important;\n  --n-icon-color-success: var(--dtf-green) !important;\n  --n-icon-color-warning: var(--dtf-yellow) !important;\n  --n-icon-color-error: var(--dtf-red) !important;\n}\n\nhtml:not(.dark) .c-modal--overlay {\n  background-color: var(--dtf-scrim) !important;\n}\n\nhtml:not(.dark) .c-modal--container {\n  background-color: var(--dtf-panel) !important;\n  border: 1px solid var(--dtf-line-soft) !important;\n  box-shadow: var(--dtf-shadow) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml:not(.dark) .n-message,\nhtml:not(.dark) .n-notification {\n  --n-color: var(--dtf-panel) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-header-text-color: var(--dtf-text) !important;\n  --n-description-text-color: var(--dtf-muted) !important;\n  --n-action-text-color: var(--dtf-accent) !important;\n  --n-icon-color: var(--dtf-accent) !important;\n  --n-icon-color-info: var(--dtf-link) !important;\n  --n-icon-color-success: var(--dtf-green) !important;\n  --n-icon-color-warning: var(--dtf-yellow) !important;\n  --n-icon-color-error: var(--dtf-red) !important;\n  --n-box-shadow: var(--dtf-shadow) !important;\n  --n-border: 1px solid var(--dtf-line-soft) !important;\n}\n\nhtml:not(.dark) .n-alert {\n  --n-color: var(--dtf-fill) !important;\n  --n-border: 1px solid var(--dtf-line-soft) !important;\n  --n-title-text-color: var(--dtf-text) !important;\n  --n-content-text-color: var(--dtf-text) !important;\n  --n-icon-color: var(--dtf-accent) !important;\n  --n-color-info: var(--dtf-fill) !important;\n  --n-color-success: var(--dtf-fill) !important;\n  --n-color-warning: var(--dtf-fill) !important;\n  --n-color-error: var(--dtf-fill) !important;\n  --n-border-info: 1px solid var(--dtf-link) !important;\n  --n-border-success: 1px solid var(--dtf-green) !important;\n  --n-border-warning: 1px solid var(--dtf-yellow) !important;\n  --n-border-error: 1px solid var(--dtf-red) !important;\n  --n-title-text-color-info: var(--dtf-text) !important;\n  --n-title-text-color-success: var(--dtf-text) !important;\n  --n-title-text-color-warning: var(--dtf-text) !important;\n  --n-title-text-color-error: var(--dtf-text) !important;\n  --n-content-text-color-info: var(--dtf-text) !important;\n  --n-content-text-color-success: var(--dtf-text) !important;\n  --n-content-text-color-warning: var(--dtf-text) !important;\n  --n-content-text-color-error: var(--dtf-text) !important;\n  --n-icon-color-info: var(--dtf-link) !important;\n  --n-icon-color-success: var(--dtf-green) !important;\n  --n-icon-color-warning: var(--dtf-yellow) !important;\n  --n-icon-color-error: var(--dtf-red) !important;\n}\n\n/*\n  c-alert: вариант (warning/error) живёт в хеш-переменной, поэтому меняется\n  только подложка, а цвет текста и рамки остаётся собственным — так предупреждение\n  и ошибка не сливаются в один вид.\n*/\nhtml:not(.dark) .c-alert {\n  background-color: var(--dtf-fill) !important;\n  border-left: 3px solid currentColor !important;\n}\n\nhtml:not(.dark) .n-tag {\n  --n-color: var(--dtf-fill) !important;\n  --n-color-checkable: var(--dtf-fill) !important;\n  --n-color-checked: var(--dtf-accent) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-text-color-checkable: var(--dtf-muted) !important;\n  --n-text-color-checked: var(--dtf-on-accent) !important;\n  --n-border: 1px solid var(--dtf-line-soft) !important;\n  --n-close-icon-color: var(--dtf-muted) !important;\n}\n\nhtml:not(.dark) .n-table,\nhtml:not(.dark) .n-data-table {\n  --n-td-color: var(--dtf-panel) !important;\n  --n-td-color-hover: var(--dtf-hover) !important;\n  --n-td-color-striped: var(--dtf-fill) !important;\n  --n-td-text-color: var(--dtf-text) !important;\n  --n-th-color: var(--dtf-fill) !important;\n  --n-th-color-hover: var(--dtf-hover) !important;\n  --n-th-text-color: var(--dtf-muted) !important;\n  --n-th-icon-color: var(--dtf-muted) !important;\n  --n-th-icon-color-active: var(--dtf-accent) !important;\n  --n-border-color: var(--dtf-line-soft) !important;\n  --n-action-divider-color: var(--dtf-line) !important;\n  --n-loading-color: var(--dtf-accent) !important;\n}\n\nhtml:not(.dark) .n-collapse {\n  --n-title-text-color: var(--dtf-text) !important;\n  --n-title-text-color-disabled: var(--dtf-subtle) !important;\n  --n-text-color: var(--dtf-muted) !important;\n  --n-arrow-color: var(--dtf-muted) !important;\n  --n-arrow-color-disabled: var(--dtf-subtle) !important;\n  --n-divider-color: var(--dtf-line) !important;\n}\n\nhtml:not(.dark) .n-empty {\n  --n-text-color: var(--dtf-muted) !important;\n  --n-icon-color: var(--dtf-subtle) !important;\n  --n-extra-text-color: var(--dtf-subtle) !important;\n}\n"
    }
   ]
  },
  {
   "id": "signal",
   "label": "Signal",
   "files": [
    {
     "name": "digitable-focus-signal.css",
     "path": "digitable-focus-signal.css",
     "lang": "css",
     "bytes": 33016,
     "lines": 895,
     "text": "/* Digitable Focus Signal for IT Tools — Digitable Workbench 0.1.0 */\n/*\n  A colour layer for an unmodified it-tools instance (GPL-3.0). This file adds\n  no behaviour and patches no application code; it only re-declares colours.\n  Paints the dark mode of the app (html.dark).\n*/\n/*\n  Distribution terms of THIS file: Digitable Workbench Personal License, the\n  terms of the archive this file ships in — see LICENSE-PERSONAL.md. Copyright\n  in the palette belongs to Digitable.\n\n  This is a theme, not a fork. No it-tools code is copied, linked or bundled\n  here: the application is not shipped in the archive at all, so nothing in\n  this folder is a derivative work of it and GPL-3.0 does not reach it.\n\n  Inside the fork digitable-lol/it-tools the very same palette travels under\n  GPL-3.0-only, because there it is bundled with the application. Two grants by\n  one copyright holder; neither relicenses any part of it-tools. The copy for\n  the fork is generated next to this one, in fork/it-tools/, and it is not the\n  same bytes on purpose.\n*/\n\nhtml.dark {\n  color-scheme: dark;\n\n  --dtf-page: #000000;\n  --dtf-panel: #090D10;\n  --dtf-field: #101820;\n  --dtf-fill: #0B171A;\n  --dtf-hover: #081E21;\n  --dtf-active: #082F31;\n  --dtf-active-ink: #00FFFF;\n\n  --dtf-text: #FFFFFF;\n  --dtf-muted: #D0D9DE;\n  --dtf-subtle: #A8B6BF;\n\n  --dtf-line: #66FFFF;\n  --dtf-line-soft: #3C9293;\n\n  --dtf-accent: #00FFFF;\n  --dtf-accent-soft: #66FFFF;\n  --dtf-on-accent: #000000;\n  --dtf-link: #55AAFF;\n\n  --dtf-green: #7CFF00;\n  --dtf-yellow: #FFD800;\n  --dtf-orange: #FF9D3D;\n  --dtf-purple: #E47AFF;\n  --dtf-red: #FF4D5A;\n\n  --dtf-selection: #00FFFF;\n  --dtf-on-selection: #000000;\n  --dtf-focus-ring: rgba(0, 255, 255, 0.35);\n  --dtf-scrim: rgba(0, 0, 0, 0.72);\n  --dtf-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);\n}\n\n/* ---------------------------------------------------------------- shell -- */\n\nhtml.dark,\nhtml.dark body {\n  background-color: var(--dtf-page) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark ::selection {\n  background-color: var(--dtf-selection);\n  color: var(--dtf-on-selection);\n}\n\nhtml.dark * {\n  scrollbar-color: var(--dtf-line) transparent;\n}\n\n/*\n  Видимая рамка фокуса. naive-ui и c-button рисуют собственный тонкий контур\n  цветом бренда, поэтому здесь ставится свой — и ни одно правило темы outline\n  не снимает.\n*/\nhtml.dark :focus-visible {\n  outline: 2px solid var(--dtf-accent) !important;\n  outline-offset: 2px !important;\n}\n\nhtml.dark .c-button:focus,\nhtml.dark .c-link:focus,\nhtml.dark .c-select-input:focus {\n  outline-color: var(--dtf-accent) !important;\n}\n\n/* --------------------------------------------------------------- layout -- */\n\nhtml.dark .n-layout {\n  --n-color: var(--dtf-page) !important;\n  --n-color-embedded: var(--dtf-panel) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-header-color: var(--dtf-panel) !important;\n  --n-header-border-color: var(--dtf-line) !important;\n  --n-footer-color: var(--dtf-panel) !important;\n  --n-footer-border-color: var(--dtf-line) !important;\n}\n\nhtml.dark .n-layout-sider {\n  --n-color: var(--dtf-panel) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-border-color: var(--dtf-line) !important;\n  --n-toggle-button-color: var(--dtf-fill) !important;\n  --n-toggle-button-border: 1px solid var(--dtf-line) !important;\n  --n-toggle-button-icon-color: var(--dtf-text) !important;\n  --n-toggle-bar-color: var(--dtf-line) !important;\n  --n-toggle-bar-color-hover: var(--dtf-accent) !important;\n}\n\nhtml.dark .n-layout-sider__border {\n  background-color: var(--dtf-line) !important;\n}\n\nhtml.dark .n-scrollbar,\nhtml.dark .n-scrollbar-rail {\n  --n-scrollbar-color: var(--dtf-line) !important;\n  --n-scrollbar-color-hover: var(--dtf-accent) !important;\n}\n\n/* Полупрозрачная подложка мобильного меню (MenuLayout.vue). */\nhtml.dark .menu-layout .overlay {\n  background-color: var(--dtf-scrim) !important;\n}\n\n/*\n  Шапка боковой панели. Штатный герой — растровый SVG-градиент в цветах\n  it-tools; подменить его цвета из CSS нельзя, поэтому он скрывается через\n  visibility (высота блока сохраняется) и заменяется градиентом палитры.\n*/\nhtml.dark .hero-wrapper {\n  background: linear-gradient(140deg, var(--dtf-panel) 0%, var(--dtf-fill) 100%) !important;\n  border-bottom: 1px solid var(--dtf-line) !important;\n}\n\nhtml.dark .hero-wrapper .gradient {\n  visibility: hidden;\n}\n\nhtml.dark .hero-wrapper .text-wrapper,\nhtml.dark .hero-wrapper .title {\n  color: var(--dtf-accent) !important;\n}\n\nhtml.dark .hero-wrapper .subtitle {\n  color: var(--dtf-muted) !important;\n}\n\nhtml.dark .hero-wrapper .divider {\n  background-color: var(--dtf-accent) !important;\n}\n\nhtml.dark .sider-content .footer {\n  color: var(--dtf-muted) !important;\n}\n\n/* ----------------------------------------------------------- tool menu -- */\n\nhtml.dark .n-menu {\n  --n-color: transparent !important;\n  --n-group-text-color: var(--dtf-subtle) !important;\n  --n-divider-color: var(--dtf-line) !important;\n  --n-border-color-horizontal: var(--dtf-line) !important;\n\n  --n-item-color-hover: var(--dtf-hover) !important;\n  --n-item-color-active: var(--dtf-active) !important;\n  --n-item-color-active-hover: var(--dtf-active) !important;\n  --n-item-color-active-collapsed: var(--dtf-active) !important;\n\n  --n-item-text-color: var(--dtf-muted) !important;\n  --n-item-text-color-hover: var(--dtf-text) !important;\n  --n-item-text-color-active: var(--dtf-active-ink) !important;\n  --n-item-text-color-active-hover: var(--dtf-active-ink) !important;\n  --n-item-text-color-child-active: var(--dtf-active-ink) !important;\n  --n-item-text-color-child-active-hover: var(--dtf-active-ink) !important;\n  --n-item-text-color-horizontal: var(--dtf-muted) !important;\n  --n-item-text-color-hover-horizontal: var(--dtf-text) !important;\n  --n-item-text-color-active-horizontal: var(--dtf-active-ink) !important;\n  --n-item-text-color-active-hover-horizontal: var(--dtf-active-ink) !important;\n  --n-item-text-color-child-active-horizontal: var(--dtf-active-ink) !important;\n  --n-item-text-color-child-active-hover-horizontal: var(--dtf-active-ink) !important;\n\n  --n-item-icon-color: var(--dtf-subtle) !important;\n  --n-item-icon-color-hover: var(--dtf-text) !important;\n  --n-item-icon-color-active: var(--dtf-active-ink) !important;\n  --n-item-icon-color-active-hover: var(--dtf-active-ink) !important;\n  --n-item-icon-color-child-active: var(--dtf-active-ink) !important;\n  --n-item-icon-color-child-active-hover: var(--dtf-active-ink) !important;\n  --n-item-icon-color-collapsed: var(--dtf-subtle) !important;\n  --n-item-icon-color-horizontal: var(--dtf-subtle) !important;\n  --n-item-icon-color-hover-horizontal: var(--dtf-text) !important;\n  --n-item-icon-color-active-horizontal: var(--dtf-active-ink) !important;\n  --n-item-icon-color-active-hover-horizontal: var(--dtf-active-ink) !important;\n  --n-item-icon-color-child-active-horizontal: var(--dtf-active-ink) !important;\n  --n-item-icon-color-child-active-hover-horizontal: var(--dtf-active-ink) !important;\n\n  --n-arrow-color: var(--dtf-subtle) !important;\n  --n-arrow-color-hover: var(--dtf-text) !important;\n  --n-arrow-color-active: var(--dtf-active-ink) !important;\n  --n-arrow-color-active-hover: var(--dtf-active-ink) !important;\n  --n-arrow-color-child-active: var(--dtf-active-ink) !important;\n  --n-arrow-color-child-active-hover: var(--dtf-active-ink) !important;\n}\n\n/* Подпись пункта — это RouterLink, цвет должен наследоваться от пункта. */\nhtml.dark .n-menu .n-menu-item-content-header a {\n  color: inherit !important;\n}\n\n/* Полоса сворачивания категории (CollapsibleToolMenu.vue). */\nhtml.dark .menu-wrapper .toggle-bar::before {\n  background-color: var(--dtf-line) !important;\n}\n\n/* Точка «новый инструмент» рядом с иконкой (MenuIconItem.vue). */\nhtml.dark .menu-icon-item .badge {\n  background-color: var(--dtf-accent) !important;\n}\n\n/* ----------------------------------------------------------- typography -- */\n\nhtml.dark .n-h,\nhtml.dark .n-h1,\nhtml.dark .n-h2,\nhtml.dark .n-h3,\nhtml.dark .n-h4,\nhtml.dark .n-h5,\nhtml.dark .n-h6 {\n  --n-text-color: var(--dtf-text) !important;\n  --n-bar-color: var(--dtf-accent) !important;\n}\n\nhtml.dark .n-p,\nhtml.dark .n-text,\nhtml.dark .n-li,\nhtml.dark .n-ul,\nhtml.dark .n-ol {\n  --n-text-color: var(--dtf-text) !important;\n  --n-p-text-color: var(--dtf-text) !important;\n  --n-li-text-color: var(--dtf-text) !important;\n}\n\nhtml.dark .n-a,\nhtml.dark .n-a a {\n  --n-text-color: var(--dtf-link) !important;\n  --n-a-text-color: var(--dtf-link) !important;\n}\n\nhtml.dark .n-blockquote {\n  --n-text-color: var(--dtf-muted) !important;\n  --n-prefix-color: var(--dtf-accent) !important;\n}\n\nhtml.dark .n-divider {\n  --n-color: var(--dtf-line) !important;\n  --n-text-color: var(--dtf-text) !important;\n}\n\n/* Заголовок инструмента: штатно приглушён opacity, палитра даёт свой контраст. */\nhtml.dark .tool-layout .tool-header .n-h1 {\n  color: var(--dtf-text) !important;\n  opacity: 1 !important;\n}\n\nhtml.dark .tool-layout .tool-header .separator {\n  background: var(--dtf-line) !important;\n  opacity: 1 !important;\n}\n\nhtml.dark .tool-layout .tool-header .description {\n  color: var(--dtf-muted) !important;\n  opacity: 1 !important;\n}\n\n/* ---------------------------------------------------------------- cards -- */\n\nhtml.dark .c-card {\n  background-color: var(--dtf-panel) !important;\n  border-color: var(--dtf-line-soft) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark .c-card .c-card-title {\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark .c-card[class~=\"!hover:border-primary\"]:hover,\nhtml.dark a[class~=\"decoration-none\"]:hover .c-card,\nhtml.dark a[class~=\"decoration-none\"]:focus-visible .c-card {\n  border-color: var(--dtf-accent) !important;\n}\n\nhtml.dark .n-card {\n  --n-color: var(--dtf-panel) !important;\n  --n-color-modal: var(--dtf-panel) !important;\n  --n-color-popover: var(--dtf-panel) !important;\n  --n-color-embedded: var(--dtf-fill) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-title-text-color: var(--dtf-text) !important;\n  --n-border-color: var(--dtf-line-soft) !important;\n  --n-action-color: var(--dtf-fill) !important;\n  --n-close-icon-color: var(--dtf-muted) !important;\n}\n\n/* Промо-карточка на главной: штатно фиксированный зелёный градиент. */\nhtml.dark .colored-card {\n  background: linear-gradient(48deg, var(--dtf-accent-soft) 0%, var(--dtf-accent) 100%) !important;\n  border: none !important;\n  color: var(--dtf-on-accent) !important;\n}\n\nhtml.dark .colored-card .title,\nhtml.dark .colored-card .description,\nhtml.dark .colored-card a {\n  color: var(--dtf-on-accent) !important;\n}\n\n/* ----------------------------------------------------- utility classes -- */\n/*\n  UnoCSS-утилиты с зашитыми цветами. Селекторы по атрибуту, чтобы не\n  экранировать \":\", \"!\" и \"#\" в именах классов.\n*/\n\nhtml.dark [class~=\"text-black\"],\nhtml.dark [class~=\"text-white\"],\nhtml.dark [class~=\"dark:text-white\"],\nhtml.dark [class~=\"dark:text-neutral-800\"] {\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark [class~=\"text-neutral-400\"],\nhtml.dark [class~=\"text-neutral-500\"],\nhtml.dark [class~=\"text-gray-400\"],\nhtml.dark [class~=\"text-gray-500\"],\nhtml.dark [class~=\"dark:text-neutral-400\"],\nhtml.dark [class~=\"dark:text-gray-400\"] {\n  color: var(--dtf-muted) !important;\n}\n\nhtml.dark [class~=\"text-neutral-600\"],\nhtml.dark [class~=\"dark:text-neutral-600\"] {\n  color: var(--dtf-subtle) !important;\n}\n\nhtml.dark [class~=\"text-primary\"] {\n  color: var(--dtf-accent) !important;\n}\n\nhtml.dark [class~=\"border-primary\"],\nhtml.dark [class~=\"important:border-primary\"],\nhtml.dark [class~=\"!hover:border-primary\"]:hover,\nhtml.dark [class~=\"hover:important:border-primary\"]:hover,\nhtml.dark [class~=\"border-gray-300\"],\nhtml.dark [class~=\"border-dashed\"] {\n  border-color: var(--dtf-accent) !important;\n}\n\nhtml.dark [class~=\"border-dashed\"]:not(:hover) {\n  border-color: var(--dtf-line) !important;\n}\n\nhtml.dark [class~=\"bg-surface\"],\nhtml.dark [class~=\"bg-white\"],\nhtml.dark [class~=\"bg-#ffffff\"],\nhtml.dark [class~=\"dark:bg-#232323\"],\nhtml.dark [class~=\"dark:bg-#333333\"] {\n  background-color: var(--dtf-panel) !important;\n}\n\nhtml.dark [class~=\"bg-background\"] {\n  background-color: var(--dtf-page) !important;\n}\n\n/* Значок «new» на карточке инструмента: фон приходит инлайном из темы naive. */\nhtml.dark [class~=\"rounded-full\"][class~=\"text-xs\"] {\n  background-color: var(--dtf-accent) !important;\n  color: var(--dtf-on-accent) !important;\n}\n\n/* Подсказка c-tooltip: штатно чёрный блок с белым текстом. */\nhtml.dark [class~=\"bg-black\"] {\n  background-color: var(--dtf-fill) !important;\n  border: 1px solid var(--dtf-line-soft) !important;\n  color: var(--dtf-text) !important;\n  box-shadow: var(--dtf-shadow) !important;\n}\n\n/* -------------------------------------------------------------- buttons -- */\n/*\n  Вариант c-button (default/primary/warning/error) виден только в\n  хеш-переменной сборки, поэтому заливка у всех одна нейтральная; акцент\n  остаётся за состояниями и за отдельно опознаваемыми кнопками.\n*/\n\nhtml.dark .c-button {\n  background-color: var(--dtf-fill) !important;\n  border: 1px solid var(--dtf-line-soft) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark .c-button:not(.disabled):hover {\n  background-color: var(--dtf-hover) !important;\n  border-color: var(--dtf-accent) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark .c-button:not(.disabled):active {\n  background-color: var(--dtf-active) !important;\n  color: var(--dtf-active-ink) !important;\n}\n\n/* Круглые кнопки — иконки в шапке и «копировать»: остаются без заливки. */\nhtml.dark .c-button.circle {\n  background-color: transparent !important;\n  border-color: transparent !important;\n  color: var(--dtf-muted) !important;\n}\n\nhtml.dark .c-button.circle:not(.disabled):hover {\n  background-color: var(--dtf-hover) !important;\n  border-color: transparent !important;\n  color: var(--dtf-active-ink) !important;\n}\n\nhtml.dark .support-button,\nhtml.dark .support-button:hover {\n  background: var(--dtf-accent) !important;\n  border-color: var(--dtf-accent) !important;\n  color: var(--dtf-on-accent) !important;\n}\n\nhtml.dark .c-link {\n  color: var(--dtf-link) !important;\n}\n\nhtml.dark .c-link:hover,\nhtml.dark .c-link:focus {\n  color: var(--dtf-accent) !important;\n}\n\nhtml.dark .n-button {\n  --n-text-color: var(--dtf-text) !important;\n  --n-text-color-hover: var(--dtf-active-ink) !important;\n  --n-text-color-pressed: var(--dtf-active-ink) !important;\n  --n-text-color-focus: var(--dtf-active-ink) !important;\n  --n-text-color-disabled: var(--dtf-subtle) !important;\n  --n-text-color-text: var(--dtf-text) !important;\n  --n-text-color-text-hover: var(--dtf-accent) !important;\n  --n-text-color-text-pressed: var(--dtf-accent-soft) !important;\n  --n-text-color-text-focus: var(--dtf-accent) !important;\n  --n-text-color-ghost: var(--dtf-text) !important;\n  --n-border-hover: 1px solid var(--dtf-accent) !important;\n  --n-border-pressed: 1px solid var(--dtf-accent) !important;\n  --n-border-focus: 1px solid var(--dtf-accent) !important;\n  --n-ripple-color: var(--dtf-accent) !important;\n}\n\nhtml.dark .n-button--primary-type,\nhtml.dark .n-button--info-type,\nhtml.dark .n-button--success-type {\n  --n-color: var(--dtf-accent) !important;\n  --n-color-hover: var(--dtf-accent-soft) !important;\n  --n-color-pressed: var(--dtf-accent-soft) !important;\n  --n-color-focus: var(--dtf-accent-soft) !important;\n  --n-text-color: var(--dtf-on-accent) !important;\n  --n-text-color-hover: var(--dtf-on-accent) !important;\n  --n-text-color-pressed: var(--dtf-on-accent) !important;\n  --n-text-color-focus: var(--dtf-on-accent) !important;\n  --n-border: 1px solid var(--dtf-accent) !important;\n  --n-border-hover: 1px solid var(--dtf-accent-soft) !important;\n  --n-border-focus: 1px solid var(--dtf-accent-soft) !important;\n  --n-border-pressed: 1px solid var(--dtf-accent-soft) !important;\n}\n\n/* --------------------------------------------------------------- inputs -- */\n\nhtml.dark .n-input,\nhtml.dark .n-input-number,\nhtml.dark .n-input-group-label {\n  --n-color: var(--dtf-field) !important;\n  --n-color-focus: var(--dtf-field) !important;\n  --n-color-disabled: var(--dtf-fill) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-text-color-disabled: var(--dtf-subtle) !important;\n  --n-text-decoration-color: var(--dtf-text) !important;\n  --n-placeholder-color: var(--dtf-subtle) !important;\n  --n-placeholder-color-disabled: var(--dtf-subtle) !important;\n  --n-caret-color: var(--dtf-accent) !important;\n  --n-border: 1px solid var(--dtf-line-soft) !important;\n  --n-border-hover: 1px solid var(--dtf-accent) !important;\n  --n-border-focus: 1px solid var(--dtf-accent) !important;\n  --n-border-disabled: 1px solid var(--dtf-line-soft) !important;\n  --n-box-shadow-focus: 0 0 0 2px var(--dtf-focus-ring) !important;\n  --n-loading-color: var(--dtf-accent) !important;\n  --n-icon-color: var(--dtf-muted) !important;\n  --n-icon-color-hover: var(--dtf-text) !important;\n  --n-icon-color-pressed: var(--dtf-accent) !important;\n  --n-icon-color-disabled: var(--dtf-subtle) !important;\n  --n-clear-color: var(--dtf-muted) !important;\n  --n-clear-color-hover: var(--dtf-text) !important;\n  --n-clear-color-pressed: var(--dtf-accent) !important;\n  --n-suffix-text-color: var(--dtf-text) !important;\n  --n-count-text-color: var(--dtf-muted) !important;\n  --n-count-text-color-disabled: var(--dtf-subtle) !important;\n  --n-group-label-color: var(--dtf-fill) !important;\n  --n-group-label-text-color: var(--dtf-text) !important;\n  --n-group-label-border: 1px solid var(--dtf-line-soft) !important;\n  --n-caret-color-warning: var(--dtf-yellow) !important;\n  --n-border-warning: 1px solid var(--dtf-yellow) !important;\n  --n-border-hover-warning: 1px solid var(--dtf-yellow) !important;\n  --n-border-focus-warning: 1px solid var(--dtf-yellow) !important;\n  --n-color-focus-warning: var(--dtf-field) !important;\n  --n-loading-color-warning: var(--dtf-yellow) !important;\n  --n-caret-color-error: var(--dtf-red) !important;\n  --n-border-error: 1px solid var(--dtf-red) !important;\n  --n-border-hover-error: 1px solid var(--dtf-red) !important;\n  --n-border-focus-error: 1px solid var(--dtf-red) !important;\n  --n-color-focus-error: var(--dtf-field) !important;\n  --n-loading-color-error: var(--dtf-red) !important;\n}\n\nhtml.dark .n-form-item {\n  --n-label-text-color: var(--dtf-text) !important;\n  --n-feedback-text-color: var(--dtf-muted) !important;\n  --n-feedback-text-color-warning: var(--dtf-yellow) !important;\n  --n-feedback-text-color-error: var(--dtf-red) !important;\n  --n-asterisk-color: var(--dtf-red) !important;\n}\n\nhtml.dark .c-input-text .input-wrapper {\n  background-color: var(--dtf-field) !important;\n  border-color: var(--dtf-line-soft) !important;\n}\n\nhtml.dark .c-input-text .input-wrapper:hover,\nhtml.dark .c-input-text .input-wrapper:focus-within {\n  border-color: var(--dtf-accent) !important;\n}\n\nhtml.dark .c-input-text .input-wrapper:focus-within {\n  background-color: var(--dtf-field) !important;\n  box-shadow: 0 0 0 2px var(--dtf-focus-ring) !important;\n}\n\nhtml.dark .c-input-text .input,\nhtml.dark .c-input-text textarea,\nhtml.dark .c-input-text input {\n  color: var(--dtf-text) !important;\n  caret-color: var(--dtf-accent) !important;\n}\n\nhtml.dark .c-input-text .input::placeholder,\nhtml.dark .c-input-text textarea::placeholder,\nhtml.dark .c-input-text input::placeholder {\n  color: var(--dtf-subtle) !important;\n  opacity: 1 !important;\n}\n\nhtml.dark .c-input-text > .label,\nhtml.dark .c-label > label {\n  color: var(--dtf-muted) !important;\n}\n\nhtml.dark .c-input-text .feedback {\n  color: var(--dtf-red) !important;\n}\n\nhtml.dark .c-input-text.error .input-wrapper,\nhtml.dark .c-input-text.error .input-wrapper:hover,\nhtml.dark .c-input-text.error .input-wrapper:focus-within {\n  border-color: var(--dtf-red) !important;\n}\n\n/* -------------------------------------------------------------- selects -- */\n\nhtml.dark .c-select .c-select-input {\n  background-color: var(--dtf-field) !important;\n  border-color: var(--dtf-line-soft) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark .c-select .c-select-input:hover,\nhtml.dark .c-select .c-select-input.is-open,\nhtml.dark .c-select .c-select-input:focus {\n  border-color: var(--dtf-accent) !important;\n}\n\nhtml.dark .c-select .c-select-input .placeholder,\nhtml.dark .c-select .c-select-input .chevron {\n  color: var(--dtf-subtle) !important;\n}\n\nhtml.dark .c-select .search-input {\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark .c-select .search-input::placeholder {\n  color: var(--dtf-subtle) !important;\n  opacity: 1 !important;\n}\n\nhtml.dark .c-select .c-select-dropdown {\n  background-color: var(--dtf-panel) !important;\n  border: 1px solid var(--dtf-line-soft) !important;\n  box-shadow: var(--dtf-shadow) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark .c-select .c-select-dropdown-option {\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark .c-select .c-select-dropdown-option:hover,\nhtml.dark .c-select .c-select-dropdown-option.hover {\n  background-color: var(--dtf-hover) !important;\n}\n\nhtml.dark .c-select .c-select-dropdown-option.active {\n  background-color: var(--dtf-active) !important;\n  color: var(--dtf-active-ink) !important;\n}\n\nhtml.dark .n-base-selection {\n  --n-color: var(--dtf-field) !important;\n  --n-color-active: var(--dtf-field) !important;\n  --n-color-disabled: var(--dtf-fill) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-placeholder-color: var(--dtf-subtle) !important;\n  --n-arrow-color: var(--dtf-muted) !important;\n  --n-caret-color: var(--dtf-accent) !important;\n  --n-border: 1px solid var(--dtf-line-soft) !important;\n  --n-border-hover: 1px solid var(--dtf-accent) !important;\n  --n-border-active: 1px solid var(--dtf-accent) !important;\n  --n-border-focus: 1px solid var(--dtf-accent) !important;\n  --n-box-shadow-hover: none !important;\n  --n-box-shadow-active: 0 0 0 2px var(--dtf-focus-ring) !important;\n  --n-box-shadow-focus: 0 0 0 2px var(--dtf-focus-ring) !important;\n}\n\nhtml.dark .n-base-select-menu {\n  --n-color: var(--dtf-panel) !important;\n  --n-option-text-color: var(--dtf-text) !important;\n  --n-option-text-color-active: var(--dtf-active-ink) !important;\n  --n-option-text-color-pressed: var(--dtf-active-ink) !important;\n  --n-option-text-color-disabled: var(--dtf-subtle) !important;\n  --n-option-color-pending: var(--dtf-hover) !important;\n  --n-option-color-active: var(--dtf-active) !important;\n  --n-option-color-active-pending: var(--dtf-active) !important;\n  --n-option-check-color: var(--dtf-accent) !important;\n  --n-group-header-text-color: var(--dtf-subtle) !important;\n  --n-action-text-color: var(--dtf-muted) !important;\n  --n-action-divider-color: var(--dtf-line) !important;\n  --n-loading-color: var(--dtf-accent) !important;\n}\n\n/* -------------------------------------------------------------- toggles -- */\n\nhtml.dark .n-switch {\n  --n-rail-color: var(--dtf-fill) !important;\n  --n-rail-color-active: var(--dtf-accent) !important;\n  --n-button-color: var(--dtf-panel) !important;\n  --n-text-color: var(--dtf-on-accent) !important;\n  --n-icon-color: var(--dtf-muted) !important;\n  --n-loading-color: var(--dtf-accent) !important;\n  --n-box-shadow-focus: 0 0 0 2px var(--dtf-focus-ring) !important;\n}\n\nhtml.dark .n-slider {\n  --n-rail-color: var(--dtf-fill) !important;\n  --n-rail-color-hover: var(--dtf-fill) !important;\n  --n-fill-color: var(--dtf-accent) !important;\n  --n-fill-color-hover: var(--dtf-accent-soft) !important;\n  --n-handle-color: var(--dtf-panel) !important;\n  --n-dot-color: var(--dtf-panel) !important;\n  --n-dot-border: 2px solid var(--dtf-line) !important;\n  --n-dot-border-active: 2px solid var(--dtf-accent) !important;\n  --n-indicator-color: var(--dtf-fill) !important;\n  --n-indicator-text-color: var(--dtf-text) !important;\n}\n\nhtml.dark .n-checkbox {\n  --n-color: var(--dtf-field) !important;\n  --n-color-checked: var(--dtf-accent) !important;\n  --n-color-disabled: var(--dtf-fill) !important;\n  --n-check-mark-color: var(--dtf-on-accent) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-border: 1px solid var(--dtf-line-soft) !important;\n  --n-border-checked: 1px solid var(--dtf-accent) !important;\n  --n-border-focus: 1px solid var(--dtf-accent) !important;\n  --n-box-shadow-focus: 0 0 0 2px var(--dtf-focus-ring) !important;\n}\n\nhtml.dark .n-radio {\n  --n-color: var(--dtf-field) !important;\n  --n-color-active: var(--dtf-field) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-dot-color-active: var(--dtf-accent) !important;\n  --n-button-color: var(--dtf-field) !important;\n  --n-button-color-active: var(--dtf-accent) !important;\n  --n-button-text-color: var(--dtf-text) !important;\n  --n-button-text-color-active: var(--dtf-on-accent) !important;\n  --n-button-text-color-hover: var(--dtf-accent) !important;\n  --n-button-border-color: var(--dtf-line-soft) !important;\n  --n-button-border-color-active: var(--dtf-accent) !important;\n  --n-button-border-color-hover: var(--dtf-accent) !important;\n  --n-box-shadow-focus: 0 0 0 2px var(--dtf-focus-ring) !important;\n}\n\nhtml.dark .n-progress {\n  --n-rail-color: var(--dtf-fill) !important;\n  --n-fill-color: var(--dtf-accent) !important;\n  --n-text-color-circle: var(--dtf-text) !important;\n  --n-text-color-line-outer: var(--dtf-text) !important;\n  --n-text-color-line-inner: var(--dtf-on-accent) !important;\n  --n-icon-color: var(--dtf-accent) !important;\n}\n\nhtml.dark .n-spin {\n  --n-color: var(--dtf-accent) !important;\n  --n-text-color: var(--dtf-muted) !important;\n}\n\n/* -------------------------------------------------- code and result areas -- */\n\n/*\n  Блоки результата (TextareaCopyable.vue) — это naive \"n-code\" с highlight.js.\n  Цвета токенов приходят из общих переменных темы: \"--n-mono-3\" — комментарии,\n  \"--n-hue-1..6-2\" — остальные группы (одна шкала на все языки).\n*/\nhtml.dark .n-code {\n  --n-text-color: var(--dtf-text) !important;\n  --n-line-number-text-color: var(--dtf-subtle) !important;\n  --n-mono-3: var(--dtf-subtle) !important;\n  --n-hue-1: var(--dtf-accent) !important;\n  --n-hue-2: var(--dtf-link) !important;\n  --n-hue-3: var(--dtf-purple) !important;\n  --n-hue-4: var(--dtf-green) !important;\n  --n-hue-5: var(--dtf-red) !important;\n  --n-hue-5-2: var(--dtf-orange) !important;\n  --n-hue-6: var(--dtf-yellow) !important;\n  --n-hue-6-2: var(--dtf-yellow) !important;\n}\n\nhtml.dark .n-code,\nhtml.dark .n-code code,\nhtml.dark .n-code pre {\n  background-color: transparent !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark pre:not(.n-code) {\n  background-color: var(--dtf-field) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark :not(pre) > code:not(.n-code) {\n  background-color: var(--dtf-field) !important;\n  color: var(--dtf-green) !important;\n  border-radius: 3px;\n}\n\n/* --------------------------------------------------- overlays and tables -- */\n\nhtml.dark .n-popover,\nhtml.dark .n-tooltip {\n  --n-color: var(--dtf-fill) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-box-shadow: var(--dtf-shadow) !important;\n}\n\nhtml.dark .n-modal,\nhtml.dark .n-drawer,\nhtml.dark .n-dialog {\n  --n-color: var(--dtf-panel) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-title-text-color: var(--dtf-text) !important;\n  --n-border: 1px solid var(--dtf-line-soft) !important;\n  --n-icon-color: var(--dtf-accent) !important;\n  --n-icon-color-info: var(--dtf-link) !important;\n  --n-icon-color-success: var(--dtf-green) !important;\n  --n-icon-color-warning: var(--dtf-yellow) !important;\n  --n-icon-color-error: var(--dtf-red) !important;\n}\n\nhtml.dark .c-modal--overlay {\n  background-color: var(--dtf-scrim) !important;\n}\n\nhtml.dark .c-modal--container {\n  background-color: var(--dtf-panel) !important;\n  border: 1px solid var(--dtf-line-soft) !important;\n  box-shadow: var(--dtf-shadow) !important;\n  color: var(--dtf-text) !important;\n}\n\nhtml.dark .n-message,\nhtml.dark .n-notification {\n  --n-color: var(--dtf-panel) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-header-text-color: var(--dtf-text) !important;\n  --n-description-text-color: var(--dtf-muted) !important;\n  --n-action-text-color: var(--dtf-accent) !important;\n  --n-icon-color: var(--dtf-accent) !important;\n  --n-icon-color-info: var(--dtf-link) !important;\n  --n-icon-color-success: var(--dtf-green) !important;\n  --n-icon-color-warning: var(--dtf-yellow) !important;\n  --n-icon-color-error: var(--dtf-red) !important;\n  --n-box-shadow: var(--dtf-shadow) !important;\n  --n-border: 1px solid var(--dtf-line-soft) !important;\n}\n\nhtml.dark .n-alert {\n  --n-color: var(--dtf-fill) !important;\n  --n-border: 1px solid var(--dtf-line-soft) !important;\n  --n-title-text-color: var(--dtf-text) !important;\n  --n-content-text-color: var(--dtf-text) !important;\n  --n-icon-color: var(--dtf-accent) !important;\n  --n-color-info: var(--dtf-fill) !important;\n  --n-color-success: var(--dtf-fill) !important;\n  --n-color-warning: var(--dtf-fill) !important;\n  --n-color-error: var(--dtf-fill) !important;\n  --n-border-info: 1px solid var(--dtf-link) !important;\n  --n-border-success: 1px solid var(--dtf-green) !important;\n  --n-border-warning: 1px solid var(--dtf-yellow) !important;\n  --n-border-error: 1px solid var(--dtf-red) !important;\n  --n-title-text-color-info: var(--dtf-text) !important;\n  --n-title-text-color-success: var(--dtf-text) !important;\n  --n-title-text-color-warning: var(--dtf-text) !important;\n  --n-title-text-color-error: var(--dtf-text) !important;\n  --n-content-text-color-info: var(--dtf-text) !important;\n  --n-content-text-color-success: var(--dtf-text) !important;\n  --n-content-text-color-warning: var(--dtf-text) !important;\n  --n-content-text-color-error: var(--dtf-text) !important;\n  --n-icon-color-info: var(--dtf-link) !important;\n  --n-icon-color-success: var(--dtf-green) !important;\n  --n-icon-color-warning: var(--dtf-yellow) !important;\n  --n-icon-color-error: var(--dtf-red) !important;\n}\n\n/*\n  c-alert: вариант (warning/error) живёт в хеш-переменной, поэтому меняется\n  только подложка, а цвет текста и рамки остаётся собственным — так предупреждение\n  и ошибка не сливаются в один вид.\n*/\nhtml.dark .c-alert {\n  background-color: var(--dtf-fill) !important;\n  border-left: 3px solid currentColor !important;\n}\n\nhtml.dark .n-tag {\n  --n-color: var(--dtf-fill) !important;\n  --n-color-checkable: var(--dtf-fill) !important;\n  --n-color-checked: var(--dtf-accent) !important;\n  --n-text-color: var(--dtf-text) !important;\n  --n-text-color-checkable: var(--dtf-muted) !important;\n  --n-text-color-checked: var(--dtf-on-accent) !important;\n  --n-border: 1px solid var(--dtf-line-soft) !important;\n  --n-close-icon-color: var(--dtf-muted) !important;\n}\n\nhtml.dark .n-table,\nhtml.dark .n-data-table {\n  --n-td-color: var(--dtf-panel) !important;\n  --n-td-color-hover: var(--dtf-hover) !important;\n  --n-td-color-striped: var(--dtf-fill) !important;\n  --n-td-text-color: var(--dtf-text) !important;\n  --n-th-color: var(--dtf-fill) !important;\n  --n-th-color-hover: var(--dtf-hover) !important;\n  --n-th-text-color: var(--dtf-muted) !important;\n  --n-th-icon-color: var(--dtf-muted) !important;\n  --n-th-icon-color-active: var(--dtf-accent) !important;\n  --n-border-color: var(--dtf-line-soft) !important;\n  --n-action-divider-color: var(--dtf-line) !important;\n  --n-loading-color: var(--dtf-accent) !important;\n}\n\nhtml.dark .n-collapse {\n  --n-title-text-color: var(--dtf-text) !important;\n  --n-title-text-color-disabled: var(--dtf-subtle) !important;\n  --n-text-color: var(--dtf-muted) !important;\n  --n-arrow-color: var(--dtf-muted) !important;\n  --n-arrow-color-disabled: var(--dtf-subtle) !important;\n  --n-divider-color: var(--dtf-line) !important;\n}\n\nhtml.dark .n-empty {\n  --n-text-color: var(--dtf-muted) !important;\n  --n-icon-color: var(--dtf-subtle) !important;\n  --n-extra-text-color: var(--dtf-subtle) !important;\n}\n"
    }
   ]
  }
 ]
}