:root {
  /* ── v1.1.6.251 (REV45 CANON-000): АЛІАСИ КАНОНУ — ГЛОБАЛЬНО ──────────────────────────────
     Токени --kp-* із kolo_plus_new_theme_preview_CANON_REV6.html були оголошені ЛИШЕ у
     widgets/main/header/header.css. Тобто будь-який стиль, що на них спирався, працював
     тільки там, де завантажено хедер — а на сторінці без нього мовчки брав порожнє значення.

     Це не теорія: саме так я й наступив на схожу міну у власному коді (див. нижче про
     --n-bg-elev). Тому канонні імена живуть тут, поруч із рештою токенів, і є аліасами на
     чинні --n-*: жодне значення не змінюється, змінюється лише ДОСЯЖНІСТЬ. */
  --kp-color-surface:        var(--n-bg-2);
  --kp-color-surface-raised: var(--n-bg-3);
  --kp-color-surface-muted:  var(--n-bg-soft);
  --kp-color-border:         var(--n-line);
  --kp-color-text:           var(--n-text);
  --kp-color-text-muted:     var(--n-text-mute);
  --kp-shadow-sm:            var(--n-sh-sm);

--n-font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--n-font-display: 'Chakra Petch', 'Inter', system-ui, sans-serif;
--n-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
--n-fs:        15px;
--n-lh:        1.55;
--n-lh-tight:  1.4;
--n-lh-snug:   1.45;
--n-w-reg:     400;
--n-w-med:     500;
--n-w-sem:     600;
--n-w-bold:    700;
--n-w-black:   800;
--n-fs-xs:  var(--n-fs);
--n-fs-sm:  var(--n-fs);
--n-fs-md:  var(--n-fs);
--n-fs-lg:  var(--n-fs);
--n-fs-xl:  var(--n-fs);
--n-fs-2xl: var(--n-fs);
--n-fs-3xl: var(--n-fs);
--n-fs-4xl: var(--n-fs);
--n-s-1: 4px;
--n-s-2: 8px;
--n-s-3: 12px;
--n-s-4: 16px;
--n-s-5: 24px;
--n-s-6: 32px;
--n-s-7: 48px;
--n-s-8: 64px;
--n-s-9: 96px;
--n-r-xs:   8px;
--n-r-sm:   10px;
--n-r-md:   14px;
--n-r-lg:   20px;
--n-r-xl:   26px;
--n-r-pill: 999px;
--n-r:      20px;
--kp-header-h:   68px;
--n-header-h:    60px;
--n-content-w:   720px;
--n-wide-w:     1080px;
--n-container-xl: 1200px;
--n-dur-fast:    120ms;
--n-dur-base:    180ms;
--n-dur-slow:    280ms;
--n-ease:        cubic-bezier(0.16, 1, 0.3, 1);
--n-ease-default: var(--n-ease);
--n-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--n-z-base:     1;
--n-z-sticky:   100;
--n-z-header:   500;
--n-z-modal:   1000;
--n-z-popover: 1500;
--n-z-toast:   2000;
/* v1.1.5.163 (звіт audit_css_unification_plan_1_1_5_157, Етап 1): відсутні
   semantic tokens, потрібні для завершення CSS-токенізації. Theme-invariant
   (медальні/маскові/брендові кольори не мають залежати від теми). */
--n-rank-silver: #c0c0c0;
/* v1.1.5.178 (FULL_CSS_ANALYSIS_v178, HB-192): --n-bg-3 використовувався
   у 12 місцях (profile.css ×5, arena/inspect, security.php ×3 БЕЗ fallback —
   2FA recovery-коди без фону!, onboarding.php, friends_suggested ×2), але
   ніколи не існував. Семантика всіх uses = "м'яка втоплена поверхня" =
   --n-bg-soft. Alias theme-invariant — авто-адаптується через underlying токен. */
--n-bg-3: var(--n-bg-soft);
--n-rank-bronze: #cd7f32;
--n-mask-solid:  #000;
--n-text-on-warn:   #ffffff;   /* v1.1.6.295: warn тепер темний (#8a5a06) — білий дає 6.51:1 */
--n-text-on-danger: var(--kp-color-on-danger);
--n-text-on-ok:     var(--kp-color-on-success);
--n-brand-facebook: #4267b2;
--n-brand-twitter:  #1da1f2;
--n-brand-telegram: #2ea6da;
/* v1.1.5.180 (HB-192-lite): compatibility aliases for historical token names
   that were only used through var(--x, fallback). Defining them removes
   fallback-degraded declarations while preserving current visual semantics. */
--kp-footer-h: 80px;
--kp-bottom-nav-h: 64px;
--kp-mobile-footer-height: var(--kp-bottom-nav-h);
--n-surface-2: var(--n-bg-2);
--n-rose: var(--n-danger);
--n-emerald: var(--n-ok);
--n-red: var(--n-danger);
--n-on-accent: var(--n-text-on-accent);
--text-on-accent: var(--n-text-on-accent);
--n-border: var(--n-line);
--n-bg-1: var(--n-bg-2);
--n-legend: var(--n-rarity-legendary);
--n-bg-active: var(--n-bg-hover);
--n-fg-2: var(--n-text-soft);
--n-soft: var(--n-bg-soft);
--n-card: var(--n-bg-2);
--n-surface-soft: var(--n-bg-soft);
--n-warning: var(--n-warn);
--r-sm: var(--n-r-sm);
--kp-surface: var(--n-bg-2);
--kp-text: var(--n-text);
--kp-border: var(--n-line);
--kp-text-mute: var(--n-text-mute);
--kp-bg: var(--n-bg);
--kp-accent: var(--n-accent);
--n-font-sans: var(--n-font);
--n-header-height: var(--kp-header-h);
--n-err: var(--n-danger);
--accent-border: var(--n-accent-border);
--n-accent-emerald-glow: color-mix(in oklab, var(--n-accent-emerald) 50%, transparent);
  /* v1.1.5.182: 23 SOFT-UI токени для порту auth/account дизайну */
  --n-accent-deep: color-mix(in srgb,var(--n-accent) 58%,#000);
  --n-camo-1: #0e0f16;
  --n-camo-2: #12131c;
  --n-camo-3: #16171f;
  --n-camo-4: #0c0d14;
  --n-danger-deep: #8f1715;
  --n-danger-hover: #f04a41;
  --n-danger-ring: rgba(225,58,50,.28);
  --n-font-body: 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --n-gold-deep: #7c5820;
  --n-grid-line: rgba(163,153,116,.055);
  --n-grid-rgb: 255,255,255;
  --n-hi: 255,255,255;
  --n-info-deep: #2a5a67;
  --n-ink: 0,0,0;
  --n-ink-deep: 5,7,6;
  --n-ink-panel: 12,14,12;
  --n-line-rgb: 255,255,255;
  --n-metal: #0e0f16;
  --n-metal-2: #14151d;
  --n-text-strong: #ffffff;   /* канонна гама, світліше за color-text */
  --n-violet: #a78bfa;
  --n-violet-soft: rgba(128,91,168,.13);
}
:root,
:root[data-theme="light"] {
  /* v1.1.6.226 — канон REV6, акаунт. Точних --n--відповідників немає:
     --n-line це межа поверхні, а control-border у каноні помітно контрастніший.
     Живуть тут, а не в shell CSS: account_zone_contract_check (A-017) і
     account_redesign_v584_contract_check забороняють сирі hex поза токенами. */
  --kp-space-1: var(--n-s-1);
  --kp-space-2: var(--n-s-2);
  --kp-space-3: var(--n-s-3);
  --kp-space-4: 16px;
  --kp-space-5: 24px;
  --kp-space-6: 32px;

  --kp-border-width: 1px;
  --kp-radius-sm: 4px;   /* --n-r-sm = 10px — це РІЗНІ величини */
  --kp-radius-lg: 12px;  /* --n-r-md = 14px — теж не те саме */
  --kp-text-lg: 1.125rem;

  --kp-toggle-knob: #ffffff;   /* кулька перемикача біла в ОБОХ темах */
  --kp-radius-pill: 999px;
  --kp-weight-bold: 700;
  --kp-text-xs: 0.75rem;
  --kp-color-warning:    #8a5a06;
  --kp-color-warning-bg: #fdf3e0;
  --kp-color-danger:     #b3261e;
  --kp-color-control-border: #7d8b9f;
  --kp-color-surface-muted:  #eaeff7;

--n-bg:        #f3f6fb;   /* канон: color-page */
--n-bg-2:      #ffffff;   /* канон: color-surface (збіг) */
--n-bg-soft:   #eaeff7;   /* канон: color-surface-muted */
--n-bg-sunk:   #e6ecf6;   /* v1.1.6.295: було #e2e9f4 — на 0.07 не дотягувало до
                             AA з text-muted (4.43). Тепер 4.56. */
--n-bg-hover:  rgba(0, 0, 0, 0.05);
--n-text:      #11213a;   /* канон: color-text */
--n-text-soft: #5b6b84;   /* канон: color-text-muted */
/* v1.1.6.295 (REV46, CANON-STEP-12): приглушені рівні тексту переведено на
   канонну гаму — у .293 я про них забув, і вони лишились теплими сірими на
   холодних канонних поверхнях. Порахував: --n-text-mute #6b6660 на темній
   поверхні #121b2b давав 3.03:1 при порозі WCAG AA 4.5:1.
   Значення підібрані так, щоб найгірша пара з БУДЬ-ЯКОЮ канонною поверхнею
   лишалась ≥4.5 — перевіряється bin/rev46_contrast_check.mjs. */
--n-text-mute: #5b6b84;   /* канон text-muted; найгірша пара 4.56:1 */
--n-text-dim:  #5b6b84;   /* окремого тьмянішого рівня канон не має, а будь-який
                             світліший не дотягує до AA на світлих поверхнях */
--n-text-on-accent: #11213a;
--n-line:        #dfe6f0;  /* канон: color-border */
--n-line-strong: color-mix(in srgb, #dfe6f0 55%, #11213a);  /* виведено з канонного border */
--n-line-soft:   color-mix(in srgb, #dfe6f0 55%, #ffffff);  /* виведено з канонного border */
--n-accent:        #e45f3a;   /* v1.1.6.293: канон accent (clay), світла */
--n-accent-hover:  #ad5a3e;
/* v1.1.6.294 (REV46, CANON-STEP-11): похідні акценту тепер виводяться з
   var(--n-accent), а не з зашитого кольору.
   Це виправляє ДВІ речі. По-перше, мою власну незавершеність із .293: там
   --n-accent став канонним (#e45f3a / #ff7a55), а його відтінки лишились
   рахуватись від старого #c4694a / #ef6443 — тобто кнопка була одного
   помаранчевого, а її світіння й фокусне кільце іншого.
   По-друге, давнішу ваду: з десяти акцентів перемикався ЛИШЕ --n-accent, а
   м'яке тло, кільце й світіння лишались глиняними. Вибираєш синій акцент —
   кнопка синя, а підсвітка навколо неї помаранчева. Тепер усі 270 вживань
   похідних ідуть за активним акцентом, хай яким він буде. */
--n-accent-light:  color-mix(in oklab, var(--n-accent) 40%, white);
--n-accent-soft:   color-mix(in oklab, var(--n-accent) 14%, transparent);
--n-accent-ring:   color-mix(in oklab, var(--n-accent) 28%, transparent);
--n-accent-glow:   color-mix(in oklab, var(--n-accent) 22%, transparent);
--n-accent-border: color-mix(in oklab, var(--n-accent) 35%, transparent);
/* v1.1.6.295 (REV46, CANON-STEP-12): семантичні кольори вирівняно на канон і
   на поріг читабельності. Порахував білий текст на кожному:
     --n-ok #16a34a → 3.30:1 (канон success #187a4b → 5.35:1)
     --n-warn #c9881e → 2.99:1 (канон warning #8a5a06 → 6.51:1)
     --n-danger #dc2626 → 4.83:1 (проходить, лишаю)
   Тобто зелена кнопка «успіх» і бурштинова «увага» з білим написом були
   нижче WCAG AA — і не через канон, а віддавна. Канон дає темніші відтінки
   саме для цього. */
--n-ok:        #187a4b;   /* канон color-success */
--n-ok-soft:   color-mix(in oklab, #16a34a 12%, transparent);
--n-ok-light:  color-mix(in oklab, #16a34a 30%, white);
--n-warn:      #8a5a06;   /* канон color-warning */
--n-warn-soft: color-mix(in oklab, #c9881e 12%, transparent);
--n-danger:    #dc2626;
--n-danger-soft: color-mix(in oklab, #dc2626 12%, transparent);
--n-info:      #0e9ec2;
--n-info-soft: color-mix(in oklab, #0e9ec2 12%, transparent);
--n-hp:        #16a34a;
--n-hp-dim:    color-mix(in oklab, #16a34a 12%, transparent);
--n-gold:      #c9881e;
--n-gold-dim:  color-mix(in oklab, #c9881e 12%, transparent);
--n-lav:       #7c5cff;
--n-lav-dim:   color-mix(in oklab, #7c5cff 12%, transparent);
--n-cyan:      #0e9ec2;
--n-cyan-dim:  color-mix(in oklab, #0e9ec2 12%, transparent);
--n-pink:      #d6488f;
--n-pink-dim:  color-mix(in oklab, #d6488f 12%, transparent);
--n-xp:        #2563eb;
--n-cur-gold:    #c9881e;
--n-cur-crystal: #0e9ec2;
--n-cur-ducat:   #c4694a;
--n-cur-pos:     #16a34a;
--n-cur-neg:     #dc2626;
--n-sh-sm:   0 1px 3px rgba(42, 34, 28, 0.06);
--n-sh-md:   0 4px 12px rgba(42, 34, 28, 0.08);
--n-sh-lg:   0 12px 32px rgba(42, 34, 28, 0.10);
/* v1.1.6.292: четвертий щабель. Канон має overlay (0 24px 64px), а в --n- драбині
   його не було — через це --kp-shadow-overlay був єдиним, хто не вмів темну тему.
   Прозорість продовжує наявний ряд .06 → .08 → .10 → .14. */
--n-sh-overlay: 0 24px 64px rgba(42, 34, 28, 0.14);
--n-sh-glow: 0 0 0 1px var(--n-accent-soft), 0 8px 24px -8px var(--n-accent-glow);
/* v1.1.5.163: scrim/overlay tokens (modal backdrop, dimming layer) — світла
   тема темнішими, бо затемнює вже світлий фон. */
--n-scrim-soft:   rgba(0, 0, 0, 0.35);
--n-scrim:        rgb(9 14 26 / 0.55);   /* v1.1.6.293: канон color-scrim */
--n-scrim-strong: rgba(0, 0, 0, 0.72);
--n-shadow-soft:     var(--n-sh-md);
--n-shadow-elevated: var(--n-sh-lg);
--n-focus-ring: 0 0 0 3px var(--n-accent-ring);
--n-bg-glow-top:    color-mix(in oklab, var(--n-accent) 8%, transparent);
--n-bg-glow-bottom: color-mix(in oklab, var(--n-accent) 5%, transparent);
--n-gradient-accent: linear-gradient(135deg, var(--n-accent), var(--n-gold));
--n-accent-clay:    #e45f3a;   /* канон */
--n-accent-sage:    #64926d;   /* канон */
--n-accent-amber:   #d99614;   /* канон */
--n-accent-plum:    #9a4d8c;   /* канон */
--n-accent-blue:    #2369ff;   /* канон */
--n-accent-emerald: #18a66d;   /* канон */
--n-accent-violet:  #7653f6;   /* канон */
--n-accent-rose:    #e0568c;   /* канон */
--n-accent-cyan:    #149cb8;   /* канон */
--n-accent-coral:   #ef6d58;   /* канон */
--n-rarity-common:    #8a8378;
--n-rarity-uncommon:  #16a34a;
--n-rarity-rare:      #2563eb;
--n-rarity-epic:      #7c5cff;
--n-rarity-legendary: #c9881e;
--n-rarity-mythic:    #dc2626;
  /* v1.1.5.182: SOFT-UI токени (light-варіанти) */
  --n-danger-deep: #8c130e;
  --n-gold-deep: #6b4c0e;
  --n-grid-rgb: 0,0,0;
  --n-hi: 26,23,20;
  --n-info-deep: #1f4c59;
  --n-ink: 255,255,255;
  --n-ink-deep: 246,243,238;
  --n-ink-panel: 255,255,255;
  --n-line-rgb: 0,0,0;
  --n-metal: #ffffff;
  --n-text-strong: #0a1526;   /* канонна гама, темніше за color-text */
  --n-violet: #7c5cff;
}
[data-theme="dark"] {
  --kp-toggle-knob: #ffffff;
  --kp-color-control-border: #5a739c;
  --kp-color-warning:    #f0b95c;
  --kp-color-warning-bg: #3a2c10;
  --kp-color-danger:     #f2857e;
  --kp-color-surface-muted:  #0f1726;

--n-bg:        #0c1220;   /* канон: color-page, темна */
--n-bg-2:      #121b2b;   /* канон: color-surface, темна */
--n-bg-soft:   #0f1726;   /* канон: color-surface-muted, темна */
--n-bg-sunk:   #0a1120;   /* глибше за surface-muted, у канонній гамі */
--n-bg-hover:  rgba(255, 255, 255, 0.07);
--n-text:      #f3f7ff;   /* канон: color-text, темна */
--n-text-soft: #9aa9c2;   /* канон: color-text-muted, темна */
/* v1.1.6.295: те саме для темної схеми — див. коментар у світлій. */
--n-text-mute: #9aa9c2;   /* канон text-muted, темна; найгірша пара 7.25:1 */
--n-text-dim:  #7d8ba3;   /* тьмяніший рівень, але ще ≥5:1 на всіх поверхнях */
--n-text-on-accent: #11213a;   /* v1.1.6.300, див. світлу схему */
--n-line:        #273650;  /* канон: color-border, темна */
--n-line-strong: color-mix(in srgb, #273650 60%, #f3f7ff);  /* виведено з канонного border, темна */
--n-line-soft:   color-mix(in srgb, #273650 60%, #0c1220);  /* виведено з канонного border, темна */
--n-accent:        #ff7a55;   /* канон accent, темна */
--n-accent-hover:  #ff7a5c;
/* v1.1.6.294: те саме для темної схеми — див. коментар у світлій. */
--n-accent-light:  color-mix(in oklab, var(--n-accent) 70%, white);
--n-accent-soft:   color-mix(in oklab, var(--n-accent) 14%, transparent);
--n-accent-ring:   color-mix(in oklab, var(--n-accent) 30%, transparent);
--n-accent-glow:   color-mix(in oklab, var(--n-accent) 38%, transparent);
--n-accent-border: color-mix(in oklab, var(--n-accent) 35%, transparent);
/* v1.1.6.295: темна схема — канонні success/warning. На темному тлі вони
   світліші, і текст на них має бути ТЕМНИЙ (--kp-color-on-success/-warning),
   що вже оголошено нижче. */
--n-ok:        #4ec38a;   /* канон color-success, темна */
--n-ok-soft:   color-mix(in oklab, #22c55e 12%, transparent);
--n-ok-light:  color-mix(in oklab, #22c55e 80%, white);
--n-warn:      #f0b95c;   /* канон color-warning, темна */
--n-warn-soft: color-mix(in oklab, #f5c366 12%, transparent);
--n-danger:    #ef4444;
--n-danger-soft: color-mix(in oklab, #ef4444 12%, transparent);
--n-info:      #22d3ee;
--n-info-soft: color-mix(in oklab, #22d3ee 12%, transparent);
--n-hp:        #22c55e;
--n-hp-dim:    color-mix(in oklab, #22c55e 12%, transparent);
--n-gold:      #f5c366;
--n-gold-dim:  color-mix(in oklab, #f5c366 12%, transparent);
--n-lav:       #a78bfa;
--n-lav-dim:   color-mix(in oklab, #a78bfa 12%, transparent);
--n-cyan:      #22d3ee;
--n-cyan-dim:  color-mix(in oklab, #22d3ee 12%, transparent);
--n-pink:      #f472b6;
--n-pink-dim:  color-mix(in oklab, #f472b6 12%, transparent);
--n-xp:        #3b82f6;
--n-cur-gold:    #f5c366;
--n-cur-crystal: #22d3ee;
--n-cur-ducat:   #ef6443;
--n-cur-pos:     #22c55e;
--n-cur-neg:     #ef4444;
--n-sh-sm:   0 1px 3px rgba(0, 0, 0, 0.40);
--n-sh-md:   0 4px 16px rgba(0, 0, 0, 0.50);
--n-sh-lg:   0 16px 48px rgba(0, 0, 0, 0.65);
--n-sh-overlay: 0 24px 64px rgba(0, 0, 0, 0.75);   /* v1.1.6.292, див. світлу схему */
--n-sh-glow: 0 0 0 1px var(--n-accent-soft), 0 12px 32px -8px var(--n-accent-glow);
/* v1.1.5.163: scrim/overlay — темна тема трохи менш непрозора, бо фон уже темний. */
--n-scrim-soft:   rgba(0, 0, 0, 0.45);
--n-scrim:        rgb(3 6 12 / 0.62);   /* канон color-scrim, темна */
--n-scrim-strong: rgba(0, 0, 0, 0.82);
--n-shadow-soft:     var(--n-sh-md);
--n-shadow-elevated: var(--n-sh-lg);
--n-bg-glow-top:    color-mix(in oklab, var(--n-accent) 6%, transparent);
--n-bg-glow-bottom: color-mix(in oklab, var(--n-accent) 4%, transparent);
--n-gradient-accent: linear-gradient(135deg, var(--n-accent), var(--n-gold));
--n-accent-clay:    #e45f3a;   /* канон */
--n-accent-sage:    #64926d;   /* канон */
--n-accent-amber:   #d99614;   /* канон */
--n-accent-plum:    #9a4d8c;   /* канон */
--n-accent-blue:    #2369ff;   /* канон */
--n-accent-emerald: #18a66d;   /* канон */
--n-accent-violet:  #7653f6;   /* канон */
--n-accent-rose:    #e0568c;   /* канон */
--n-accent-cyan:    #149cb8;   /* канон */
--n-accent-coral:   #ef6d58;   /* канон */
--n-rarity-common:    #a89a8a;
--n-rarity-uncommon:  #84b074;
--n-rarity-rare:      #7a9cc0;
--n-rarity-epic:      #c990b6;
--n-rarity-legendary: #f5c366;
--n-rarity-mythic:    #ef4444;
}
/* v1.1.6.293 (REV46, CANON-STEP-10): десять акцентів — канонні значення з
   прев'ю, окремо для світлої й темної схеми, і власний on-accent під кожен.
   Канон не має одного «тексту на акценті»: на глибоких (plum/blue/violet) він
   білий, на теплих — темний #11213a. Раніше в пакеті було глобальне #ffffff,
   тобто білий текст на світло-бурштиновій кнопці — контраст ~1.8:1. */
:root[data-kp-accent="clay"] { --n-accent: #e45f3a; --n-text-on-accent: #11213a; --n-accent-hover: color-mix(in oklab, var(--n-accent) 88%, #fff 12%); }
:root[data-kp-accent="coral"] { --n-accent: #ef6d58; --n-text-on-accent: #11213a; --n-accent-hover: color-mix(in oklab, var(--n-accent) 88%, #fff 12%); }
:root[data-kp-accent="sage"] { --n-accent: #64926d; --n-text-on-accent: #11213a; --n-accent-hover: color-mix(in oklab, var(--n-accent) 88%, #fff 12%); }
:root[data-kp-accent="amber"] { --n-accent: #d99614; --n-text-on-accent: #11213a; --n-accent-hover: color-mix(in oklab, var(--n-accent) 88%, #fff 12%); }
:root[data-kp-accent="plum"] { --n-accent: #9a4d8c; --n-text-on-accent: #ffffff; --n-accent-hover: color-mix(in oklab, var(--n-accent) 85%, #000 15%); }
:root[data-kp-accent="blue"] { --n-accent: #2369ff; --n-text-on-accent: #ffffff; --n-accent-hover: color-mix(in oklab, var(--n-accent) 85%, #000 15%); }
:root[data-kp-accent="emerald"] { --n-accent: #18a66d; --n-text-on-accent: #11213a; --n-accent-hover: color-mix(in oklab, var(--n-accent) 88%, #fff 12%); }
:root[data-kp-accent="violet"] { --n-accent: #7653f6; --n-text-on-accent: #ffffff; --n-accent-hover: color-mix(in oklab, var(--n-accent) 85%, #000 15%); }
:root[data-kp-accent="rose"] { --n-accent: #e0568c; --n-text-on-accent: #11213a; --n-accent-hover: color-mix(in oklab, var(--n-accent) 88%, #fff 12%); }
:root[data-kp-accent="cyan"] { --n-accent: #149cb8; --n-text-on-accent: #11213a; --n-accent-hover: color-mix(in oklab, var(--n-accent) 88%, #fff 12%); }
[data-theme="dark"][data-kp-accent="clay"] { --n-accent: #ff7a55; --n-text-on-accent: #11213a; }
[data-theme="dark"][data-kp-accent="coral"] { --n-accent: #ff8b78; --n-text-on-accent: #11213a; }
[data-theme="dark"][data-kp-accent="sage"] { --n-accent: #86b88e; --n-text-on-accent: #11213a; }
[data-theme="dark"][data-kp-accent="amber"] { --n-accent: #f6bf4a; --n-text-on-accent: #11213a; }
[data-theme="dark"][data-kp-accent="plum"] { --n-accent: #c47ab5; --n-text-on-accent: #ffffff; }
[data-theme="dark"][data-kp-accent="blue"] { --n-accent: #6ea0ff; --n-text-on-accent: #ffffff; }
[data-theme="dark"][data-kp-accent="emerald"] { --n-accent: #45c98b; --n-text-on-accent: #11213a; }
[data-theme="dark"][data-kp-accent="violet"] { --n-accent: #a68af8; --n-text-on-accent: #ffffff; }
[data-theme="dark"][data-kp-accent="rose"] { --n-accent: #f279a8; --n-text-on-accent: #11213a; }
[data-theme="dark"][data-kp-accent="cyan"] { --n-accent: #38c8e4; --n-text-on-accent: #11213a; }
:root[data-kp-accent] {
/* v1.1.6.300 (REV46): ховер акценту тепер рухається ВІД кольору тексту, а не
   завжди в чорний.
   Було `color-mix(… var(--n-accent) 85%, #000 15%)` — тобто затемнення. Це
   правильно, доки напис на кнопці білий: темніше тло → більший контраст. Але
   канон дає на теплих акцентах ТЕМНИЙ напис (#11213a), і для нього затемнення
   працює навпаки: наведення робило кнопку менш читабельною (3.0-3.3:1 при
   порозі 4.5). Проба спіймала рівно дев'ять таких місць.
   Тепер напрямок задається разом із самим акцентом, у його блоці нижче: там,
   де напис темний, ховер СВІТЛІШАЄ; там, де білий (plum/blue/violet) —
   темнішає, як і було. Тут лишається безпечне типове значення. */
--n-accent-hover:  color-mix(in oklab, var(--n-accent) 88%, #fff 12%);
--n-accent-light:  color-mix(in oklab, var(--n-accent) 40%, white);
--n-accent-soft:   color-mix(in oklab, var(--n-accent) 14%, transparent);
--n-accent-ring:   color-mix(in oklab, var(--n-accent) 28%, transparent);
--n-accent-glow:   color-mix(in oklab, var(--n-accent) 22%, transparent);
--n-accent-border: color-mix(in oklab, var(--n-accent) 35%, transparent);
}
[data-theme="dark"]:root[data-kp-accent] {
--n-accent-hover: color-mix(in oklab, var(--n-accent) 78%, #000 22%);
--n-accent-soft:  color-mix(in oklab, var(--n-accent) 18%, transparent);
--n-accent-ring:  color-mix(in oklab, var(--n-accent) 32%, transparent);
--n-accent-glow:  color-mix(in oklab, var(--n-accent) 28%, transparent);
}
:root {
--bg:        var(--n-bg);
--panel:     var(--n-bg-2);
--panel-b:   var(--n-bg-sunk);
--cell:      var(--n-bg-soft);
--cell-h:    var(--n-bg-hover);
--border:    var(--n-line);
--border-h:  var(--n-line-strong);
--text:      var(--n-text);
--text-2:    var(--n-text-soft);
--text-3:    var(--n-text-dim);
--accent:     var(--n-accent);
--accent-g:   var(--n-accent-glow);
--accent-dim: var(--n-accent-soft);
--hp:        var(--n-hp);
--hp-dim:    var(--n-hp-dim);
--gold:      var(--n-gold);
--gold-dim:  var(--n-gold-dim);
--lav:       var(--n-lav);
--lav-dim:   var(--n-lav-dim);
--cyan:      var(--n-cyan);
--cyan-dim:  var(--n-cyan-dim);
--pink:      var(--n-pink);
--pink-dim:  var(--n-pink-dim);
--red:       var(--n-danger);
--red-dim:   var(--n-danger-soft);
--ok:        var(--n-ok);
--warn:      var(--n-warn);
--err:       var(--n-danger);
--blue:      var(--n-xp);
--blue-dim:  color-mix(in oklab, var(--n-xp) 12%, transparent);
--font:      var(--n-font);
--mono:      var(--n-font-mono);
--ease:      var(--n-ease);
--r:         var(--n-r);
--r-md:      var(--n-r-md);
}
@media (prefers-reduced-motion: reduce) {
:root {
--n-dur-fast: 0ms;
--n-dur-base: 0ms;
--n-dur-slow: 0ms;
}
}
@media (max-width: 900px) {
:root { --kp-header-h: 62px; }
}
@media (max-width: 640px) {
:root { --kp-header-h: 58px; }
}
/* v1.1.5.184: dark-перекриття токенів, що «протікали» з ':root, :root[data-theme=light]'
   блоків через :root-частину (рівна специфічність, але dark-блок їх не перевизначав).
   Симптом: невидимі заголовки на темній темі (--n-text-strong=#0e0c0a на чорному).
   Значення = dark-палітра з чистого :root вище. */
[data-theme="dark"] {
  --n-danger-deep: #8f1715;
  --n-gold-deep: #7c5820;
  --n-grid-rgb: 255,255,255;
  --n-hi: 255,255,255;
  --n-info-deep: #2a5a67;
  --n-ink: 0,0,0;
  --n-ink-deep: 5,7,6;
  --n-ink-panel: 12,14,12;
  --n-line-rgb: 255,255,255;
  --n-metal: #0e0f16;
  --n-text-strong: #ffffff;   /* канонна гама, темна схема */
  --n-violet: #a78bfa;
}

/* ============================================================================
   v1.1.5.880 (UI-runway крок 1) — АЛІАСИ ВЖИВАНИХ, АЛЕ НЕ ОГОЛОШЕНИХ ТОКЕНІВ.

   Вимірювання перед правкою: у темі вживалось 146 токенів `--n-*`, з них 14 НЕ
   були оголошені ніде. Це не косметика: 16 вживань стояли БЕЗ фолбеку
   (`var(--n-surface)`), тобто у браузері давали порожнє значення — властивість
   просто ігнорувалась. Решта мали фолбек виду `var(--n-surface-2, #1a1f29)`, і
   це гірше за поламану верстку: зашитий колір проходив повз усі перевірки
   токен-політики, бо синтаксично це `var()`.

   Тут НЕ вигадано жодного нового кольору — кожен аліас указує на канонічний
   токен, що вже існує. Тому вони автоматично слухаються теми (light/dark) і
   акцентів: аліас успадковує те, на що показує.

   Канонічними лишаються праві частини; ці імена — сумісність із наявною
   розміткою, а не другий набір.
   ============================================================================ */
:root {
  --n-surface:      var(--n-surface-2);
  --n-surface-3:    var(--n-bg-3);
  --n-bg-elevated:  var(--n-bg-2);
  --n-panel:        rgb(var(--n-ink-panel));
  --n-cell:         var(--n-surface-2);
  --n-muted:        var(--n-text-mute);
  --n-text-muted:   var(--n-text-mute);
  --n-text-2:       var(--n-text-soft);
  --n-text-3:       var(--n-text-dim);
  --n-good:         var(--n-ok);
  --n-good-soft:    var(--n-ok-soft);
  --n-shadow:       var(--n-shadow-soft);
  --n-radius:       var(--n-r-md);
  --n-lh-normal:    var(--n-lh);

  /* Layout-сітка канонічного макета (KPLUS_CANONICAL_UI_TEMPLATE_v1). Значення взято
     з макета БЕЗ змін — щоб перший екран редизайну не починався з розбіжності. У темі
     вони ще не вживаються: це підготовка, а не мертвий код. */
  --n-container:    1320px;
  --n-content:      880px;
  --n-rail:         320px;
}

/* ============================================================================
   v1.1.6.284 (REV46, CANON-STEP-1) — ПОВНИЙ КОНТРАКТ ТОКЕНІВ КАНОНУ.

   Вимірювання ПЕРЕД правкою (css_canon_probe.mjs проти 1.1.6.283):
     • канон (kolo_plus_new_theme_preview_CANON_REV6.html) оголошує 81 токен
       `--kp-*` (плюс 3 `--kp-preview-*` — це риштування самого прев'ю, у
       продукті їм місця немає, тому сюди НЕ переносяться);
     • пакет оголошував 55, з них збігалися з каноном 16;
     • 44 канонні імені не існували в пакеті ВЗАГАЛІ;
     • 16 імен `--kp-*` вживались, не будучи оголошеними ніде.

   Блок 1 нижче — беззмінні (theme-invariant) величини канону. Споживачів у
   них поки НЕМАЄ, тож додавання не змінює жодного пікселя: змінюється лише
   те, що на них ВЖЕ МОЖНА спиратися, коли модуль переходить на канон.

   Про rem: `html` у base.css не перевизначає font-size, отже 1rem = 16px, і
   пари 16px↔1rem / 24px↔1.5rem — та сама обчислена величина, а не «схожа».
   ============================================================================ */
:root {
  /* — розкладка ————————————————————————————————————————————————— */
  --kp-layout-content-max: 760px;
  --kp-layout-wide-max:    1080px;
  --kp-layout-xl-max:      1200px;
  --kp-layout-full-max:    100%;
  --kp-layout-rail-min:    300px;

  /* — крок відступів (канон: 0…8 + жолоб) ——————————————————————— */
  --kp-space-0: 0;
  --kp-space-7: 3rem;
  --kp-space-8: 4rem;
  --kp-space-gutter: 1.5rem;

  /* — шрифти ————————————————————————————————————————————————————
     Канон називає ці три сімʼї, але пакет уже вантажить Inter / Chakra Petch /
     JetBrains Mono у head.php. Підставляти сюди `system-ui` означало б тихо
     розшрифтувати сайт, тому канонні ІМЕНА показують на чинні `--n-*`: контракт
     зʼявляється, гарнітура лишається тією, яку реально завантажено. */
  --kp-font-body:    var(--n-font);
  --kp-font-display: var(--n-font-display);
  --kp-font-mono:    var(--n-font-mono);

  /* — типографічна шкала —————————————————————————————————————— */
  --kp-text-sm:  0.875rem;
  --kp-text-md:  1rem;
  --kp-text-xl:  1.5rem;
  --kp-text-2xl: 2rem;
  --kp-leading-tight:  1.2;
  --kp-leading-normal: 1.5;
  --kp-leading-loose:  1.75;
  --kp-weight-normal: 400;
  --kp-weight-medium: 500;

  /* — контроли —————————————————————————————————————————————————— */
  --kp-control-height-sm: 32px;
  --kp-control-height-lg: 48px;
  --kp-target-min: 44px;

  /* — радіуси ———————————————————————————————————————————————————— */
  --kp-radius-xs: 2px;
  --kp-radius-xl: 20px;

  /* — тіні (канон дає рівно чотири) ————————————————————————————— */
  /* v1.1.6.292 (REV46, CANON-STEP-9): ОДНА МОВА ТІНЕЙ.
     Було так: --kp-shadow-sm показував на --n-sh-sm (а отже знав про темну тему),
     а md/lg/overlay стояли канонними літералами й лишались однаковими на обох
     темах. Тобто одна шкала поводилась двома різними способами — я сам це заніс
     у .284 і не помітив, доки не звів тіні докупи.
     Геометрія збігається сама собою: --n-sh-md це 0 4px 12px, канонний md — теж
     0 4px 12px; lg в обох 0 12px 32px. Різниця лише в прозорості й у тому, що
     --n- має окремі значення для темної теми (там тінь мусить бути важчою, інакше
     її не видно на темній поверхні).
     Тому типово всі чотири йдуть через --n- драбину, а канонні літерали живуть
     під перемикачем нижче — як палітра. */
  --kp-shadow-md:      var(--n-sh-md);
  --kp-shadow-lg:      var(--n-sh-lg);
  --kp-shadow-overlay: var(--n-sh-overlay);

  /* — рух ———————————————————————————————————————————————————————— */
  --kp-motion-fast:   120ms;
  --kp-motion-normal: 200ms;
  --kp-motion-slow:   320ms;
  --kp-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --kp-ease-emphasis: cubic-bezier(0.3, 0, 0, 1);

  /* — z-шари ————————————————————————————————————————————————————
     Канон: base 0 → dropdown 1000 → sticky 1100 → modal 1300 → toast 1400.
     У пакеті modal=1400 і toast=1300 стоять НАВПАКИ (тост під модалкою), але
     споживачів у обох нуль, тому переставляю одразу — до появи першого. */
  /* v1.1.6.286: --kp-z-content жив у app-layout.css разом із п'ятьма мертвими
     --kp-z-*. П'ять видалено (нуль споживачів), цей має два — тож оголошений тут,
     де його бачать усі layout-и. Канонного відповідника не має: канон дає
     --kp-z-base:0, а тут потрібна саме 1 (над декоративними body::before/::after,
     які base.css кладе позаду). */
  --kp-z-content:  1;
  --kp-z-base:     0;
  --kp-z-dropdown: 1000;
  --kp-z-sticky:   1100;
  --kp-z-modal:    1300;
  --kp-z-toast:    1400;
}

/* ── Кольори канону, яких у пакеті не було ────────────────────────────────
   Канон розрізняє схеми через [data-kp-scheme]; жива тема — через
   [data-theme] на <html> (head.php). Переносяться ЗНАЧЕННЯ канону, а скоуп —
   той, який справді існує в рантаймі. Інакше блок був би мертвим. */
:root,
:root[data-theme="light"] {
  --kp-color-page:  #f3f6fb;
  --kp-color-scrim: rgb(9 14 26 / 0.55);
  --kp-color-info:       #1f5f8b;
  --kp-color-on-info:    #ffffff;
  --kp-color-on-success: #ffffff;
  --kp-color-on-warning: #ffffff;
  --kp-color-on-danger:  #ffffff;

  /* 🔴 ДЕФЕКТ, знайдений вимірюванням (не косметика).
     Було: `--kp-color-focus-ring: var(--n-focus-ring)`, а --n-focus-ring це
     `0 0 0 3px …` — рядок ТІНІ. Усі 5 споживачів пишуть
     `outline: var(--kp-focus-ring-width) solid var(--kp-color-focus-ring)`,
     тобто `outline: 2px solid 0 0 0 3px …` — невалідна декларація, яку браузер
     викидає цілком. Фокусної обводки немає в хедері (3 місця) і в
     account_shell (2 місця) — саме там, де вона потрібна для клавіатури.
     Токен з іменем `--kp-color-*` мусить тримати КОЛІР. */
  --kp-color-focus-ring: #1f5f8b;
}
[data-theme="dark"] {
  --kp-color-page:  #0c1220;
  --kp-color-scrim: rgb(3 6 12 / 0.62);
  --kp-color-info:       #6fb2e0;
  --kp-color-on-info:    #08202f;
  --kp-color-on-success: #08251a;
  --kp-color-on-warning: #2a1c05;
  --kp-color-on-danger:  #2b0b09;
  --kp-color-focus-ring: #9ccbf2;
}

/* ============================================================================
   v1.1.6.293 (REV46, CANON-STEP-10): ПЕРЕМИКАЧА БІЛЬШЕ НЕМАЄ — КАНОН ТИПОВИЙ.

   У .284 канонні кольори лежали під [data-kp-canon="1"], бо тоді їх мали лише
   ~180 вживань `--kp-*`, а решта 16 тисяч `var(--n-*)` лишалась теплою: увімкнути
   означало отримати сторінку з двома палітрами. Тепер ядро `--n-*` саме несе
   канонні значення, тож палітра одна — і прапорець став зайвим.

   Зворотний хід лишився: `KP_LEGACY_PALETTE=1` друкує <html data-kp-legacy="1">
   і повертає теплу палітру блоком нижче. Специфічність [data-kp-legacy="1"] вища
   за :root, тож він виграє незалежно від порядку.
   ============================================================================ */


/* ============================================================================
   v1.1.6.300 (REV46): --n-accent-ink — АКЦЕНТ, ЯКИМ МОЖНА ПИСАТИ.

   «М'який чип» — акцентний текст на власному 14-відсотковому тлі — це патерн
   самого канону: `.kp-badge--accent { background: var(--kp-accent-soft);
   color: var(--kp-accent) }`. Я його перевірив на всіх десяти акцентах:

     акцент   світла   темна        акцент   світла   темна
     clay      2.97     5.47        emerald   2.69     6.32
     coral     2.60     6.00        violet    4.01     5.02
     sage      3.08     5.91        rose      3.03     5.37
     amber     2.24     7.64        cyan      2.78     6.59
     blue      3.83     5.29        plum      4.54     4.59

   У СВІТЛІЙ схемі не проходить 9 акцентів із 10 (поріг WCAG AA 4.5:1). Це не
   наша похибка: прев'ю показує чипи лише на глиняному акценті, і саме він там
   на світлій картці — 2.97. У темній схемі патерн проходить скрізь.

   Тому тут ВІДХИЛЕННЯ ВІД ПРЕВ'Ю, і я його називаю прямо: для тексту на м'якому
   тлі береться темніший відтінок того самого акценту — рівно настільки, щоб
   дотягнути до 4.5:1, і ні на крок далі, щоб колір лишався впізнаваним.

   Частка підібрана окремо під кожен акцент, бо єдиної не існує: теплим досить
   ~65-75%, глибоким (plum/violet/blue) треба 87-100%, а бурштиновому — 61%, бо
   він найсвітліший. Домішок — колір тексту, тож відтінок темнішає в бік тексту
   сторінки, а не в сірий.

   У ТЕМНІЙ схемі чорнило дорівнює самому акценту: там патерн і так проходить,
   і затемнювати означало б псувати те, що працює.
   ============================================================================ */
:root {
  /* Типове значення — вже затемнене (74%, як для глиняного акценту, що є типовим).
     Спокуса поставити тут `var(--n-accent)` була, але це значення-пастка: якби
     атрибут акценту колись не надрукувався, сторінка тихо повернулась би до
     нечитабельного варіанту. Фолбек має бути безпечним, а не «як було». */
  --n-accent-ink: color-mix(in srgb, var(--n-accent) 74%, var(--n-text));
}
:root[data-kp-accent="clay"] { --n-accent-ink: color-mix(in srgb, var(--n-accent) 74%, var(--n-text)); }
:root[data-kp-accent="coral"] { --n-accent-ink: color-mix(in srgb, var(--n-accent) 67%, var(--n-text)); }
:root[data-kp-accent="sage"] { --n-accent-ink: color-mix(in srgb, var(--n-accent) 74%, var(--n-text)); }
:root[data-kp-accent="amber"] { --n-accent-ink: color-mix(in srgb, var(--n-accent) 61%, var(--n-text)); }
:root[data-kp-accent="plum"] { --n-accent-ink: color-mix(in srgb, var(--n-accent) 100%, var(--n-text)); }
:root[data-kp-accent="blue"] { --n-accent-ink: color-mix(in srgb, var(--n-accent) 87%, var(--n-text)); }
:root[data-kp-accent="emerald"] { --n-accent-ink: color-mix(in srgb, var(--n-accent) 67%, var(--n-text)); }
:root[data-kp-accent="violet"] { --n-accent-ink: color-mix(in srgb, var(--n-accent) 90%, var(--n-text)); }
:root[data-kp-accent="rose"] { --n-accent-ink: color-mix(in srgb, var(--n-accent) 74%, var(--n-text)); }
:root[data-kp-accent="cyan"] { --n-accent-ink: color-mix(in srgb, var(--n-accent) 68%, var(--n-text)); }
[data-theme="dark"] { --n-accent-ink: var(--n-accent); }   /* див. коментар вище */

/* ── Стара тепла палітра (до .293). Вмикається KP_LEGACY_PALETTE=1 ─────────── */
:root[data-kp-legacy="1"],
[data-kp-legacy="1"][data-theme="light"] {
  --n-bg: #f6f3ee; --n-bg-2: #ffffff; --n-bg-soft: rgba(0,0,0,.025);
  --n-bg-sunk: rgba(0,0,0,.04); --n-text: #1a1714; --n-text-soft: #4a4540;
  --n-text-strong: #0e0c0a; --n-line: rgba(0,0,0,.07);
  --n-line-strong: rgba(0,0,0,.13); --n-line-soft: rgba(0,0,0,.04);
  --n-accent: #c4694a; --n-text-on-accent: #ffffff; --n-scrim: rgba(0,0,0,.55);
}
[data-kp-legacy="1"][data-theme="dark"] {
  --n-bg: #0a0b10; --n-bg-2: rgba(14,15,22,.95); --n-bg-soft: rgba(255,255,255,.04);
  --n-bg-sunk: rgba(8,9,14,.98); --n-text: #ddd8d0; --n-text-soft: #908a82;
  --n-text-strong: #f4f1ea; --n-line: rgba(255,255,255,.06);
  --n-line-strong: rgba(255,255,255,.13); --n-line-soft: rgba(255,255,255,.04);
  --n-accent: #ef6443; --n-text-on-accent: #ffffff; --n-scrim: rgba(0,0,0,.65);
}