/* Kaskad · серия go — токены дизайн-системы (панель и мастер «Быстрый старт»). Описание — docs/k3/DESIGN-SYSTEM.md.
   Источник — Claude Design, k3/design/quick-start-design-v2 (handoff/tokens.css: палитра, карточки в сетке §12, «Вид»
   §13); до 3.3.0 — v1. Основа палитры — HeroUI v3 default theme
   (github.com/heroui-inc/heroui · packages/styles/themes/default/variables.css · Apache-2.0), упорядочена дизайн-системой.

   Подключение: <html data-hero data-theme="dark|light" …> и этот файл первым, затем components.css. Шрифты — свои файлы
   рядом (fonts/*.woff2, OFL), без CDN: CSP панели — default-src 'self'; style-src 'self'.
   Акцент (--accent) ставит «Вид» (boot.js / app.js) или продукт мастера; --accent-foreground и --accent-text считает
   boot.js (KaskadLook.tones) по контрасту не ниже 4,5 : 1 — значения ниже лишь запасные на первый кадр. */

@font-face { font-family: "Onest"; src: url(fonts/onest.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Rubik"; src: url(fonts/rubik.woff2) format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jbmono.woff2) format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

/* ── 1. Основа ─────────────────────────────────────────────────────────────── */
html, body { height: 100%; margin: 0; }
*, *::before, *::after { box-sizing: border-box; }
[data-hero] {
  --font: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Rubik", var(--font);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* отступы, шаг 4 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* радиусы от --radius («Скругление» в «Виде», 8 px по умолчанию) */
  --radius: 8px;
  --r-tag: var(--radius);                         /* 8  метка, код */
  --r-field: calc(var(--radius) * 1.5);           /* 12 поле, пункт меню */
  --r-tile: calc(var(--radius) * 2);              /* 16 плитка, сообщение, выбор карточкой */
  --r-card: calc(var(--radius) * 2.5);            /* 20 карточка */
  --r-dialog: calc(var(--radius) * 3);            /* 24 окно, шторка, рамка контента */
  --r-btn: 999px;                                 /* «Кнопки: круглые»; data-btn="round" → var(--r-field) */
  --r-pill: 999px;

  /* текст: --fs — основной размер; весь текст панели — в rem, шаг «Размер текста» (data-fs) меняет html { font-size } */
  --fs: .875rem;
  --fs-xs: .78125rem; --fs-sm: .8125rem; --fs-md: var(--fs); --fs-lg: .9375rem; --fs-h3: 1.0625rem; --fs-h2: 1.375rem; --fs-h1: 1.625rem; --fs-hero: 2.125rem;

  /* высоты контролов */
  --h-chip: 24px; --h-sm: 32px; --h-md: 40px; --h-field: 44px; --h-lg: 48px;

  /* раскладка: --page-p, --gap, --card-p, --card-gap, --row задаёт «Подробность» (раздел 5) */
  --kv-label: 136px;
  --page-p: var(--sp-8);
  --head-h: 64px;          /* UI-3: полоса шапки — общая для бокового меню и содержимого, всё по одной оси */
  /* UI-5 T13 «Страница с подменю». Правило владельца 20.10: второй уровень меню заметно уже первого (детектор SUBNAV,
     ≤ 0,8 ширины бокового меню); длинные подписи — в две строки, а не шире колонку. Общий шаблон для всех разделов */
  --side-w: 248px;         /* боковое меню первого уровня (с подписями) */
  --subnav-w: 184px;       /* колонка подменю на ≥ 1440 (≥ 2000 — 200, styles.css) */
  --subnav-w-md: 164px;    /* ≤ 1439 (таблица ширин r4; Nav2 r1 — 164 только ≤ 1279) */
  --subnav-w-sm: 152px;    /* планшет (< 900, меню первого уровня значками; пункт 44). Nav2 — 188, владелец: уже */
  --subnav-row: 40px;      /* пункт подменю; на касании — 44 */
  --sub-gap: 24px;         /* между подменю и частью */
  --sub-edge: 24px;        /* поле слева у раздела с подменю: подменю прилегает к боковому меню (владелец 20.10: ≤ 24) */
  --part-max: none;        /* r2 §7: часть — на всю оставшуюся ширину */
  --form-max: 880px;       /* r4: одиночная карточка-форма части и строка пояснения — не шире, по левому краю */
  --gap: var(--sp-5);
  --card-p: var(--sp-6);
  --card-gap: var(--sp-5);
  --row: var(--sp-3);

  --dur: 160ms; --ease: cubic-bezier(.2, .7, .2, 1);
  --disabled-opacity: .4;
  --brand-grad: linear-gradient(135deg, #2dd4bf, #2563eb);
}

/* ── 2. Цвета. Тёмная — основная. Палитра дизайна v2 (k3/design/quick-start-design-v2/handoff/tokens.css): одна для
   панели и мастера — холодный тёмный фон оттенка 255, светлая — нейтрали оттенка акцента Kaskad (--neutral-hue 288). ── */
[data-hero][data-theme="dark"] {
  color-scheme: dark;
  --background: oklch(.15 .012 255);
  --surface: oklch(.205 .015 255);        --surface-2: oklch(.245 .015 255);       --surface-3: oklch(.29 .015 255);
  --field-background: oklch(.18 .013 255);
  --border: oklch(.31 .016 255);          --separator: oklch(.27 .015 255);
  --foreground: oklch(.97 .004 255);      --text-2: oklch(.77 .015 255);           --text-3: oklch(.64 .015 255);

  --success: oklch(.76 .16 150);  --success-soft: oklch(.76 .16 150 / .14);  --success-text: oklch(.8 .14 150);
  --warning: oklch(.83 .14 78);   --warning-soft: oklch(.83 .14 78 / .14);   --warning-text: oklch(.86 .11 80);
  --danger:  oklch(.72 .16 25);   --danger-soft:  oklch(.66 .2 25 / .16);    --danger-text:  oklch(.76 .13 25);
  --danger-strong: oklch(.55 .2 25);                                           /* заливка опасной кнопки, текст белый 5,4 : 1 (3.3.3; было .6 — 4,36) */
  --backdrop: rgba(0, 0, 0, .6);
  --surface-shadow: none;
  --overlay-shadow: 0 0 0 1px var(--border), 0 20px 50px rgba(0, 0, 0, .5);
  --field-shadow: inset 0 0 0 1px var(--border);
  --segment: var(--surface-3);  --segment-shadow: none;
  --accent-text: color-mix(in oklab, var(--accent) 70%, white);
  --accent-soft: color-mix(in oklab, var(--accent) 16%, transparent);
  /* 3.3.2, «Выдать настройки» (HANDOFF-give-settings §4): подсказки, карточка QR магазина, список «Роутер ▾» */
  --surface-raised: oklch(.265 .015 255);
  --popover-shadow: 0 14px 36px rgba(0, 0, 0, .5);
  --warning-icon: var(--warning);           /* заливка треугольника-пометки */
}
[data-hero][data-theme="light"] {
  color-scheme: light;
  --neutral-hue: 288;                     /* оттенок нейтралей под акцент продукта: Kaskad 288, goVLESS 255 */
  --background: oklch(.972 .004 var(--neutral-hue));
  --surface: #fff;                        --surface-2: oklch(.958 .005 var(--neutral-hue));   --surface-3: oklch(.928 .007 var(--neutral-hue));
  --field-background: #fff;
  --border: oklch(.9 .008 var(--neutral-hue));   --separator: oklch(.93 .006 var(--neutral-hue));
  --foreground: oklch(.22 .01 250);       --text-2: oklch(.45 .012 250);           --text-3: oklch(.52 .01 250);

  --success: oklch(.55 .15 150);  --success-soft: oklch(.7 .17 150 / .14);   --success-text: oklch(.45 .12 150);
  --warning: oklch(.58 .13 65);   --warning-soft: oklch(.82 .15 78 / .2);    --warning-text: oklch(.46 .11 60);
  --danger:  oklch(.55 .2 25);    --danger-soft:  oklch(.65 .22 25 / .12);   --danger-text:  oklch(.5 .19 26);
  --danger-strong: oklch(.55 .2 25);
  --backdrop: rgba(20, 24, 40, .45);
  --surface-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 0 1px rgba(0, 0, 0, .08);
  --overlay-shadow: 0 2px 8px rgba(0, 0, 0, .06), 0 -6px 12px rgba(0, 0, 0, .03), 0 14px 28px rgba(0, 0, 0, .1);
  --field-shadow: inset 0 0 0 1px var(--border);
  --segment: #fff;  --segment-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 1px rgba(0, 0, 0, .08);
  --accent-text: color-mix(in oklab, var(--accent) 80%, black);
  --accent-soft: color-mix(in oklab, var(--accent) 13%, transparent);
  --surface-raised: #fff;
  --popover-shadow: 0 12px 32px rgba(20, 30, 60, .16);
  --warning-icon: oklch(.78 .16 72);  --warning-icon-stroke: var(--warning-text);   /* светлая: заливка и обводка 1.4 */
}

/* Оттенок фона («Вид»): нейтральный — палитра выше (v2); тёплый и холодный меняют только нейтрали. Холодный светлый —
   оттенок 255 (как goVLESS), холодный тёмный — тот же 255, но насыщеннее. */
[data-hero][data-theme="light"][data-tint="warm"] { --background: oklch(.966 .008 80); --surface-2: oklch(.948 .009 80); --surface-3: oklch(.92 .011 80); --border: oklch(.9 .012 80); --separator: oklch(.93 .01 80); --text-2: oklch(.47 .02 70); --text-3: oklch(.52 .018 70); }
[data-hero][data-theme="light"][data-tint="cool"] { --background: oklch(.966 .007 255); --surface-2: oklch(.948 .008 255); --surface-3: oklch(.92 .01 255); --border: oklch(.9 .011 255); --separator: oklch(.93 .01 255); --text-2: oklch(.46 .02 255); --text-3: oklch(.52 .016 255); }
[data-hero][data-theme="dark"][data-tint="warm"] { --background: oklch(.135 .006 70); --surface: oklch(.212 .008 70); --surface-2: oklch(.255 .008 70); --surface-3: oklch(.3 .009 70); --field-background: oklch(.18 .006 70); --border: oklch(.29 .009 70); --separator: oklch(.255 .008 70); --text-2: oklch(.73 .016 70); --text-3: oklch(.63 .013 70); }
[data-hero][data-theme="dark"][data-tint="cool"] { --background: oklch(.15 .022 255); --surface: oklch(.205 .026 255); --surface-2: oklch(.245 .026 255); --surface-3: oklch(.29 .026 255); --field-background: oklch(.18 .022 255); --border: oklch(.32 .028 255); --separator: oklch(.27 .025 255); --text-2: oklch(.78 .02 255); --text-3: oklch(.65 .02 255); }

/* «Яркие статусы» — насыщеннее текст статусов и сообщений */
[data-hero][data-vibrant="true"][data-theme="dark"] { --success-text: oklch(.82 .19 150); --warning-text: oklch(.87 .15 80); --danger-text: oklch(.74 .18 25); }
[data-hero][data-vibrant="true"][data-theme="light"] { --success-text: oklch(.5 .16 150); --warning-text: oklch(.52 .14 62); --danger-text: oklch(.52 .22 26); }

/* ── 3. Акцент: только действия, выбор и прогресс. Статусы и сообщения его не используют ──────────── */
[data-hero] {
  --accent: #45D0C0;                       /* по умолчанию: мятный (тёмная), фиолетовый (светлая) — ставит boot.js */
  --accent-foreground: #fff;
  --accent-hover: color-mix(in oklab, var(--accent) 88%, white);
  --accent-press: color-mix(in oklab, var(--accent) 85%, black);
  --accent-soft-hover: color-mix(in oklab, var(--accent) 24%, transparent);
  --danger-hover: color-mix(in oklab, var(--danger) 88%, white);
  --danger-soft-hover: color-mix(in oklab, var(--danger) 26%, transparent);
  --surface-3-hover: color-mix(in oklab, var(--surface-3) 86%, var(--foreground));
  --surface-hover: color-mix(in oklab, var(--surface) 94%, var(--foreground));
  --field-hover: color-mix(in oklab, var(--field-background) 96%, var(--foreground));
  --frame-bg: color-mix(in oklab, var(--background) 70%, var(--surface));
  --info-soft: var(--surface-2);  --info-text: var(--text-2);          /* информация — нейтральная */
  --neutral-soft: color-mix(in oklab, var(--foreground) 8%, transparent);   /* подложка нейтрального статуса: видна и на карточке, и на плитке */
  --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-text);
}
/* QR в цветах темы: плашка с оттенком акцента, модули — тёмные; контраст не ниже 8,5 : 1 при любом акценте
   (светлая — не ниже 10,5 : 1). Код не инвертируется: светлые модули на тёмном читают не все камеры. */
[data-hero] { --qr-paper: #fff; --qr-ink: #18181b; }
@supports (color: color-mix(in oklab, #000 50%, #fff)) {
  [data-hero] { --qr-paper: color-mix(in oklab, var(--accent) 6%, #fff); --qr-ink: color-mix(in oklab, var(--accent) 22%, oklch(.18 .006 286)); }
  [data-hero][data-theme="dark"] { --qr-paper: color-mix(in oklab, var(--accent) 10%, oklch(.92 0 0)); }
}

/* ── 4. Вид: кнопки, карточки, размер текста ──────────────────────────────── */
[data-hero][data-btn="round"] { --r-btn: var(--r-field); }
/* Карточка дизайн-системы — поверхность и граница; «С тенью» добавляет тень светлой темы, «Плоские» — без границы */
[data-hero] { --card-bg: var(--surface); --card-bd: var(--border); --card-sh: var(--surface-shadow); --tile-bg: var(--surface-2); }
[data-hero][data-cards="border"] { --card-sh: none; }
[data-hero][data-cards="flat"] { --card-bg: var(--surface-2); --card-bd: transparent; --card-sh: none; --tile-bg: var(--surface); }
[data-hero] [role="dialog"], [data-hero] [role="alertdialog"] { --tile-bg: var(--surface-2); }
/* Т3 №17: «Размер текста» — шапка «A A A» и «Вид», в этом браузере (kaskad-font): 93,75 % · 100 % · 112,5 % */
html[data-hero][data-fs="s"] { font-size: 93.75%; }
html[data-hero][data-fs="l"] { font-size: 112.5%; }

/* ── 5. Подробность и устройство. «Детально» (по умолчанию) — значения дизайн-системы ───────── */
[data-hero][data-density="min"]      { --page-p: var(--sp-10); --gap: var(--sp-6); --card-p: 28px; --card-gap: var(--sp-6); --row: var(--sp-4); }
[data-hero][data-density="balanced"] { --page-p: 36px; --gap: 22px; --card-p: 26px; --card-gap: 22px; --row: 14px; }
[data-hero][data-device="phone"]     { --page-p: var(--sp-4); --gap: var(--sp-4); --card-p: var(--sp-5); --card-gap: var(--sp-5); --row: var(--sp-3); --h-md: 44px; --h-sm: 44px; }
[data-hero][data-device="phone"] { --fs: .9375rem; }

/* ── 6. Основа страницы и доступность ─────────────────────────────────────── */
[data-hero] body, body[data-hero] { background: var(--background); color: var(--foreground); font: 400 var(--fs)/1.5 var(--font); -webkit-font-smoothing: antialiased; }
[data-hero] :focus { outline: none; }
[data-hero] :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
[data-hero] * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
[data-hero] input::placeholder, [data-hero] textarea::placeholder { color: var(--text-3); }
[data-hero][data-motion="off"] *, [data-hero][data-motion="off"] *::before, [data-hero][data-motion="off"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  [data-hero] *, [data-hero] *::before, [data-hero] *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

@keyframes gx-spin { to { transform: rotate(360deg); } }
@keyframes hero-spin { to { transform: rotate(360deg); } }
@keyframes hero-in-right { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hero-in-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hero-pop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-caret { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes hero-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }