/* Локальні копії шрифтів (Inter, Onest — OFL; Roboto Mono — Apache-2.0).
       Свої файли замість fonts.googleapis.com: без зайвих round-trip-ів і без FOUT. */
    /* Inter · cyrillic-ext */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400 800;
      font-display: swap;
      src: url('/hack-fonts/inter-400_800-cyrillic-ext.woff2') format('woff2');
      unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    /* Inter · cyrillic */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400 800;
      font-display: swap;
      src: url('/hack-fonts/inter-400_800-cyrillic.woff2') format('woff2');
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* Inter · latin-ext */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400 800;
      font-display: swap;
      src: url('/hack-fonts/inter-400_800-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* Inter · latin */
    @font-face {
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400 800;
      font-display: swap;
      src: url('/hack-fonts/inter-400_800-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* Onest · cyrillic-ext */
    @font-face {
      font-family: 'Onest';
      font-style: normal;
      font-weight: 400 800;
      font-display: swap;
      src: url('/hack-fonts/onest-400_800-cyrillic-ext.woff2') format('woff2');
      unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    /* Onest · cyrillic */
    @font-face {
      font-family: 'Onest';
      font-style: normal;
      font-weight: 400 800;
      font-display: swap;
      src: url('/hack-fonts/onest-400_800-cyrillic.woff2') format('woff2');
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* Onest · latin-ext */
    @font-face {
      font-family: 'Onest';
      font-style: normal;
      font-weight: 400 800;
      font-display: swap;
      src: url('/hack-fonts/onest-400_800-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* Onest · latin */
    @font-face {
      font-family: 'Onest';
      font-style: normal;
      font-weight: 400 800;
      font-display: swap;
      src: url('/hack-fonts/onest-400_800-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    /* Roboto Mono · cyrillic-ext */
    @font-face {
      font-family: 'Roboto Mono';
      font-style: normal;
      font-weight: 400 500;
      font-display: swap;
      src: url('/hack-fonts/roboto-mono-400_500-cyrillic-ext.woff2') format('woff2');
      unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
    }
    /* Roboto Mono · cyrillic */
    @font-face {
      font-family: 'Roboto Mono';
      font-style: normal;
      font-weight: 400 500;
      font-display: swap;
      src: url('/hack-fonts/roboto-mono-400_500-cyrillic.woff2') format('woff2');
      unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
    }
    /* Roboto Mono · latin-ext */
    @font-face {
      font-family: 'Roboto Mono';
      font-style: normal;
      font-weight: 400 500;
      font-display: swap;
      src: url('/hack-fonts/roboto-mono-400_500-latin-ext.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* Roboto Mono · latin */
    @font-face {
      font-family: 'Roboto Mono';
      font-style: normal;
      font-weight: 400 500;
      font-display: swap;
      src: url('/hack-fonts/roboto-mono-400_500-latin.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    /* Поки шрифти не готові — не показуємо кадр із fallback-шрифтом.
       Клас bt-booting ставить інлайн-скрипт у <head>, знімає після load (шрифти вантажаться до нього) */
    html.bt-booting {
      background-color: var(--base-bg, #ffffff);
    }
    html.bt-booting body {
      visibility: hidden;
    }

    /* Кастомний тонкий скролбар фіксованої ширини (без стрибків ширини сторінки чи при ховері) */
    html {
      scrollbar-gutter: stable;
    }
    *, *::before, *::after {
      scrollbar-width: thin;
      scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
    }
    .dark *, .dark *::before, .dark *::after {
      scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
    }
    ::-webkit-scrollbar {
      width: 6px !important;
      height: 6px !important;
    }
    ::-webkit-scrollbar-track {
      background: transparent !important;
    }
    ::-webkit-scrollbar-thumb {
      background-color: rgba(148, 163, 184, 0.35) !important;
      border-radius: 9999px !important;
      border: none !important;
    }
    ::-webkit-scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:active {
      background-color: rgba(100, 116, 139, 0.65) !important;
      width: 6px !important;
      height: 6px !important;
    }
    ::-webkit-scrollbar-corner {
      background: transparent !important;
    }

    #retype-branding-logo {
      display: inline-flex !important;
      align-items: center !important;
      gap: 10px !important;
      text-decoration: none !important;
      white-space: nowrap !important;
    }
    #retype-branding-logo > span:first-child {
      width: auto !important;
      overflow: visible !important;
      margin-right: 0 !important;
      display: inline-flex !important;
      align-items: center !important;
    }
    #retype-branding-logo img.retype-custom-logo,
    #retype-branding-logo img {
      height: 30px !important;
      width: auto !important;
      max-width: 140px !important;
      object-fit: contain !important;
      flex-shrink: 0;
    }
    /* Прибираємо LIVE-бейдж у хедері, кнопку Copy (doc-page-actions) та "Powered by Retype" у сайдбарі */
    #retype-branding-label,
    doc-page-actions,
    #retype-page-actions,
    .retype-page-actions,
    a.docs-powered-by,
    .docs-powered-by {
      display: none !important;
    }
    .retype-lang-active {
      font-weight: 700 !important;
      color: #0284c7 !important;
      border-bottom: 2px solid #0284c7;
    }
    .dark .retype-lang-active {
      color: #38bdf8 !important;
      border-bottom-color: #38bdf8;
    }
    /* Повне приховування live-кнопки Edit у Retype */
    #retype-editor-panel,
      #retype-edit-button,
    .retype-edit-button,
    [data-retype-editor] {
      display: none !important;
    }

    /* ========================================================
       Палітра та типографіка bitrek.video для Retype.
       Перевизначаємо ЛИШЕ змінні теми Retype + кілька хардкоджених
       кольорів (th/pre), геометрію залишаємо дефолтною.
       ======================================================== */

    /* --- Токени bitrek.video --- */
    :root {
      --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      --font-heading: "Onest", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      --font-mono: "Roboto Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
    }

    /* --- СВІТЛА ТЕМА --- */
    html:not(.dark) {
      --base-bg: #ffffff;
      --base-text: #26303f;
      --base-text-strong: #0f172a;
      --base-text-muted: #64748b;
      --base-border: #e2e8f0;
      --base-border-hover: #cbd5e1;
      --base-border-strong: #94a3b8;
      --base-link: #2563eb;
      --base-link-hover: #1d4ed8;
      --base-item-bg-hover: #eff6ff;
      --base-item-bg-active: #dbeafe;

      --header-bg: rgba(255, 255, 255, 0.92);
      --header-border: #e2e8f0;
      --header-text: #334155;
      --header-text-hover: #2563eb;

      --sidebar-left-bg: #ffffff;
      --sidebar-left-border: #e2e8f0;
      --sidebar-right-bg: #ffffff;
      --sidebar-right-border: #e2e8f0;

      --nav-item-text: #334155;
      --nav-item-text-hover: #1d4ed8;
      --nav-item-text-active: #1d4ed8;
      --nav-item-bg-active: #dbeafe;
      --nav-item-bg-hover: #eef4ff;
      --nav-item-button: #94a3b8;
      --nav-item-border-active: #2563eb;
      --nav-item-text-stack: #64748b;

      --filter-placeholder: #94a3b8;
      --footer-text: #64748b;

      --body-link-decoration-color: #bfdbfe;
      --body-link-decoration-color-hover: #2563eb;

      --skeleton-bg: #eef2f7;
      --search-modal-bg: #ffffff;
      --search-results-bg: #ffffff;
      --search-result-border: #eef2f7;
      --search-result-hover: #eff6ff;
      --search-highlight-bg: #dbeafe;

      --callout-base-bg: #ffffff;
      --callout-base: #2563eb;
      --callout-primary: #2563eb;
      --callout-secondary: #475569;
      --callout-success: #16a34a;
      --callout-tip: #0d9488;
      --callout-danger: #dc2626;
      --callout-warning: #d97706;
      --callout-info: #3b82f6;
      --callout-question: #7c3aed;
      --callout-light: #e2e8f0;
      --callout-dark: #0f172a;
    }

    /* --- ТЕМНА ТЕМА (палітра bitrek.video: Anthracite / Carbon) --- */
    html.dark {
      --base-bg: #1c1e26;
      --base-text: #cbd5e1;
      --base-text-strong: #f1f5f9;
      --base-text-muted: #94a3b8;
      --base-border: #373a48;
      --base-border-hover: #4a4f61;
      --base-border-strong: #5a6076;
      --base-link: #60a5fa;
      --base-link-hover: #93c5fd;
      --base-item-bg-hover: #2d303b;
      --base-item-bg-active: rgba(59, 130, 246, 0.18);

      --header-bg: rgba(28, 30, 38, 0.9);
      --header-border: #373a48;
      --header-text: #94a3b8;
      --header-text-hover: #f1f5f9;

      --sidebar-left-bg: #1c1e26;
      --sidebar-left-border: #373a48;
      --sidebar-right-bg: #1c1e26;
      --sidebar-right-border: #373a48;

      --nav-item-text: #94a3b8;
      --nav-item-text-hover: #f1f5f9;
      --nav-item-text-active: #93c5fd;
      --nav-item-bg-active: rgba(59, 130, 246, 0.18);
      --nav-item-bg-hover: #2d303b;
      --nav-item-button: #64748b;
      --nav-item-border-active: #3b82f6;
      --nav-item-text-stack: #f1f5f9;

      --filter-placeholder: #64748b;
      --footer-text: #64748b;

      --body-link-decoration-color: #1e40af;
      --body-link-decoration-color-hover: #60a5fa;

      --skeleton-bg: #2d303b;
      --search-modal-bg: #21232c;
      --search-results-bg: #21232c;
      --search-result-border: #373a48;
      --search-result-hover: #2d303b;
      --search-highlight-bg: #1e40af;

      --callout-base-bg: #21232c;
      --callout-base: #3b82f6;
      --callout-primary: #3b82f6;
      --callout-secondary: #64748b;
      --callout-success: #22c55e;
      --callout-tip: #06b6d4;
      --callout-danger: #ef4444;
      --callout-warning: #f59e0b;
      --callout-info: #60a5fa;
      --callout-question: #a855f7;
      --callout-light: #94a3b8;
      --callout-dark: #0f172a;
    }

    /* --- Шрифти (обидві теми) --- */
    html,
    body,
    button,
    input,
    select,
    textarea,
    #retype-app {
      font-family: var(--font-sans);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    pre,
    code,
    kbd,
    samp,
    .retype-markdown pre,
    .retype-markdown code {
      font-family: var(--font-mono);
    }
    body {
      letter-spacing: -0.011em;
    }

    /* --- Бейджі, вкладки, кроки, пагінація: світла тема --- */
    html:not(.dark) {
      --badge-primary: #dbeafe; --badge-primary-border: #bfdbfe; --badge-primary-text: #1d4ed8;
      --badge-primary-hover: #dbeafe; --badge-primary-border-hover: #93c5fd;
      --badge-primary-text-hover: #1d4ed8;
      --badge-info: #dbeafe; --badge-info-border: #bfdbfe; --badge-info-text: #1d4ed8;
      --badge-info-hover: #dbeafe; --badge-info-border-hover: #93c5fd;
      --badge-info-text-hover: #1d4ed8;
      --badge-success: #dcfce7; --badge-success-border: #bbf7d0; --badge-success-text: #15803d;
      --badge-success-hover: #dcfce7; --badge-success-border-hover: #86efac;
      --badge-success-text-hover: #15803d;
      --badge-warning: #fef3c7; --badge-warning-border: #fde68a; --badge-warning-text: #b45309;
      --badge-warning-hover: #fef3c7; --badge-warning-border-hover: #fcd34d;
      --badge-warning-text-hover: #b45309;
      --badge-danger: #fee2e2; --badge-danger-border: #fecaca; --badge-danger-text: #b91c1c;
      --badge-danger-hover: #fee2e2; --badge-danger-border-hover: #fca5a5;
      --badge-danger-text-hover: #b91c1c;
      --badge-question: #ede9fe; --badge-question-border: #ddd6fe; --badge-question-text: #6d28d9;
      --badge-secondary: #f1f5f9; --badge-secondary-border: #e2e8f0; --badge-secondary-text: #334155;
      --badge-light: #ffffff; --badge-light-border: #e2e8f0; --badge-light-text: #334155;
      --badge-ghost: transparent; --badge-ghost-border: #e2e8f0; --badge-ghost-text: #64748b;
      --badge-dark: #0f172a; --badge-dark-border: #0f172a; --badge-dark-text: #ffffff;

      --tab-text: #475569;
      --tab-text-hover: #2563eb;
      --tab-text-active: #2563eb;
      --tab-border-hover: #cbd5e1;
      --tab-border-active: #2563eb;

      --steps-step-line: #cbd5e1;
      --steps-step-number-bg: #2563eb;
      --steps-step-number-border: #2563eb;
      --steps-step-number-text: #ffffff;

      --pager-text: #2563eb;
      --pager-text-hover: #1d4ed8;
      --pager-border: #e2e8f0;
      --pager-border-hover: #cbd5e1;
      --pager-bg-hover: #eff6ff;
      --pager-bg-active: #2563eb;
      --pager-bg-active-hover: #1d4ed8;
      --pager-border-active: #2563eb;
      --pager-text-active: #ffffff;

      --list-unchecked: #94a3b8;
    }

    /* --- Бейджі, вкладки, кроки, пагінація: темна тема --- */
    html.dark {
      --badge-primary: rgba(59, 130, 246, 0.18); --badge-primary-border: rgba(59, 130, 246, 0.4);
      --badge-primary-text: #93c5fd; --badge-primary-hover: rgba(59, 130, 246, 0.26);
      --badge-primary-border-hover: rgba(59, 130, 246, 0.6); --badge-primary-text-hover: #bfdbfe;
      --badge-info: rgba(59, 130, 246, 0.18); --badge-info-border: rgba(59, 130, 246, 0.4);
      --badge-info-text: #93c5fd; --badge-info-hover: rgba(59, 130, 246, 0.26);
      --badge-info-border-hover: rgba(59, 130, 246, 0.6); --badge-info-text-hover: #bfdbfe;
      --badge-success: rgba(34, 197, 94, 0.16); --badge-success-border: rgba(34, 197, 94, 0.38);
      --badge-success-text: #86efac; --badge-success-hover: rgba(34, 197, 94, 0.24);
      --badge-success-border-hover: rgba(34, 197, 94, 0.55); --badge-success-text-hover: #bbf7d0;
      --badge-warning: rgba(245, 158, 11, 0.16); --badge-warning-border: rgba(245, 158, 11, 0.38);
      --badge-warning-text: #fcd34d; --badge-warning-hover: rgba(245, 158, 11, 0.24);
      --badge-warning-border-hover: rgba(245, 158, 11, 0.55); --badge-warning-text-hover: #fde68a;
      --badge-danger: rgba(239, 68, 68, 0.16); --badge-danger-border: rgba(239, 68, 68, 0.38);
      --badge-danger-text: #fca5a5; --badge-danger-hover: rgba(239, 68, 68, 0.24);
      --badge-danger-border-hover: rgba(239, 68, 68, 0.55); --badge-danger-text-hover: #fecaca;
      --badge-question: rgba(168, 85, 247, 0.16); --badge-question-border: rgba(168, 85, 247, 0.38);
      --badge-question-text: #d8b4fe;
      --badge-secondary: #2d303b; --badge-secondary-border: #373a48; --badge-secondary-text: #cbd5e1;
      --badge-light: #e2e8f0; --badge-light-border: #e2e8f0; --badge-light-text: #1c1e26;
      --badge-ghost: transparent; --badge-ghost-border: #373a48; --badge-ghost-text: #94a3b8;
      --badge-dark: #0f172a; --badge-dark-border: #0f172a; --badge-dark-text: #e2e8f0;

      --tab-text: #94a3b8;
      --tab-text-hover: #f1f5f9;
      --tab-text-active: #60a5fa;
      --tab-border-hover: #4a4f61;
      --tab-border-active: #3b82f6;

      --steps-step-line: #373a48;
      --steps-step-number-bg: #3b82f6;
      --steps-step-number-border: #3b82f6;
      --steps-step-number-text: #ffffff;

      --pager-text: #93c5fd;
      --pager-text-hover: #bfdbfe;
      --pager-border: #373a48;
      --pager-border-hover: #4a4f61;
      --pager-bg-hover: #2d303b;
      --pager-bg-active: #3b82f6;
      --pager-bg-active-hover: #2563eb;
      --pager-border-active: #3b82f6;
      --pager-text-active: #ffffff;

      --list-unchecked: #64748b;
    }

    /* --- Фон сторінки (Retype хардкодить #1D1F1E у .dark) --- */
    html.dark,
    html:not(.dark) {
      background-color: var(--base-bg);
    }
    body {
      background-color: var(--base-bg);
    }
    /* Retype ставить #retype-container.bg-white — під блюром хедера це дає
       світлу пляму, тому контейнер має колір сторінки */
    #retype-container,
    #retype-main,
    #retype-app {
      background-color: var(--base-bg);
    }

    /* --- Заголовки: Onest (текст статей лишається на Inter) --- */
    .retype-markdown h1,
    .retype-markdown h2,
    .retype-markdown h3,
    .retype-markdown h4,
    .retype-markdown h5,
    .retype-markdown h6,
    h1.retype-primary-heading {
      font-family: var(--font-heading);
      letter-spacing: -0.02em;
    }
    .retype-markdown h1,
    h1.retype-primary-heading {
      letter-spacing: -0.03em;
      font-weight: 800;
    }
    .retype-markdown h2,
    .retype-markdown h3 {
      font-weight: 700;
    }

    /* --- Хардкоджені кольори Retype, які не читаються зі змінних --- */
    .retype-markdown table th {
      background-color: #f1f5f9;
      color: #0f172a;
    }
    html.dark .retype-markdown table th {
      background-color: #272a34;
      color: #f1f5f9;
    }
    .retype-markdown pre[class*="language-"] {
      background-color: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
    }
    html.dark .retype-markdown pre[class*="language-"] {
      background-color: #15171d;
      border: 1px solid #373a48;
      border-radius: 10px;
    }
    /* Інлайн-код (Retype хардкодить кольори) */
    .retype-markdown code:not([class*="language-"]):not(.member-signature) {
      background-color: #f1f5f9;
      border-color: #e2e8f0;
      color: #1e3a8a;
    }
    html.dark .retype-markdown code:not([class*="language-"]):not(.member-signature) {
      background-color: #272a34;
      border-color: #373a48;
      color: #93c5fd;
    }

    /* Заголовок/фон хедера з блюром як на bitrek.video */
    #retype-header {
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    /* ========================================================
       Радіуси: squircle (де підтримується) + трохи більші значення
       ======================================================== */
    *,
    *::before,
    *::after {
      corner-shape: squircle;
    }
    html:not(.dark),
    html.dark {
      /* Retype малює картинки статей через ці змінні */
      --image-rounded: 24px;
      --image-border-width: 1px;
      --radius-sm: 0.75rem;
      --radius-md: 0.875rem;
    }
    /* Картинки статей: рамка + скруглення + курсор-лупа */
    .retype-markdown img {
      border-radius: 24px;
      border-width: 1px;
      border-style: solid;
      border-color: var(--base-border);
      background-color: var(--base-bg);
      cursor: zoom-in;
    }
    figure.content-center img {
      border-radius: 24px;
    }
    /* Блоки коду, таблиці, вкладки та кнопки — той самий радіус */
    .retype-markdown pre,
    .retype-markdown pre[class*="language-"] {
      border-radius: 24px !important;
    }
    .retype-markdown .table-wrapper,
    .retype-markdown table {
      border-radius: 24px;
    }
    /* Callout-и лишаємо в оригінальному вигляді Retype (rounded-lg + смужка) */
    .retype-markdown div.flex:has(> .doc-callout),
    .retype-markdown div.flex:has(> .doc-callout) *,
    .doc-callout,
    .doc-callout * {
      corner-shape: round;
    }
    #retype-header input,
    #retype-sidebar-left input {
      border-radius: 12px;
    }
    /* Рядки навігації в сайдбарі — скруглені лише зліва, щоб підкладка
       при ховері/активності доходила до правого краю панелі */
    #retype-sidebar-left .simplebar-content li > div {
      border-radius: 14px 0 0 14px;
    }
    /* Кнопка-шеврон розгортання підменю — власний ховер у кольорах теми,
       замість дефолтних gray-200 / dark-500 */
    #retype-sidebar-left .simplebar-content li > div > div.w-7 {
      color: var(--nav-item-button);
      border-radius: 9999px;
      transition: background-color 150ms ease, color 150ms ease;
    }
    #retype-sidebar-left .simplebar-content li > div > div.w-7:hover {
      background-color: var(--base-item-bg-active);
      color: var(--nav-item-text-hover);
    }
    /* Кнопка "вгору" — не коло, а squircle з невеликим радіусом */
    #retype-back-to-top {
      border-radius: 18px;
    }

    /* --- Перегляд картинок статті на весь екран --- */
    .bt-lightbox {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 24px;
      background-color: rgba(9, 11, 16, 0.82);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      cursor: zoom-out;
    }
    .bt-lightbox-img {
      max-width: min(96vw, 1600px);
      max-height: 86vh;
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: 24px;
      border: 1px solid rgba(148, 163, 184, 0.35);
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
      background-color: #ffffff;
      cursor: zoom-out;
    }
    .bt-lightbox-caption {
      max-width: 900px;
      text-align: center;
      font-size: 0.85rem;
      color: #cbd5e1;
    }
    .bt-lightbox-caption:empty {
      display: none;
    }
    /* Клік по картинці — режим 1:1 зі скролом */
    .bt-lightbox.zoomed {
      align-items: flex-start;
      justify-content: flex-start;
      overflow: auto;
    }
    .bt-lightbox.zoomed .bt-lightbox-img {
      max-width: none;
      max-height: none;
      margin: auto;
    }

    /* Кнопка пошуку в хедері: така сама іконка, як на мобільних.
       Селектор спирається на клас із серверної розмітки (bg-search-bg),
       тому стилі діють ще до виконання hack_retype.js — без «стрибка» верстки. */
    #retype-header button.bg-search-bg,
    #retype-header button[data-bt-search] {
      width: 2.5rem;
      min-width: 2.5rem;
      max-width: 2.5rem;
      height: 2.5rem;
      padding: 0;
      margin: 0;
      gap: 0;
      justify-content: center;
      overflow: visible;
      border: 0;
      border-radius: 9999px;
      background-color: var(--base-item-bg);
      color: var(--base-item-text);
      box-shadow: none;
      position: relative;
      transition: background-color 200ms ease-in, color 200ms ease-in;
    }
    #retype-header button.bg-search-bg:hover,
    #retype-header button[data-bt-search]:hover {
      border: 0;
      background-color: var(--base-item-bg-active);
      color: var(--base-item-text);
    }
    #retype-header button.bg-search-bg span,
    #retype-header button[data-bt-search] span {
      display: none;
    }
    #retype-header button.bg-search-bg svg,
    #retype-header button[data-bt-search] svg {
      width: 20px;
      height: 20px;
      margin: 0;
    }
    /* Підказка про гарячу клавішу — виїжджає зліва при наведенні/фокусі,
       щоб кнопка лишалась компактною, як сусідні іконки */
    #retype-header button.bg-search-bg::after,
    #retype-header button[data-bt-search]::after {
      content: "Ctrl K";
      position: absolute;
      top: 50%;
      right: calc(100% + 8px);
      padding: 3px 7px;
      font-size: 11px;
      font-weight: 500;
      line-height: 1.2;
      letter-spacing: 0.02em;
      white-space: nowrap;
      color: var(--base-text-muted);
      background-color: var(--base-bg);
      border: 1px solid var(--base-border);
      border-radius: 6px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
      opacity: 0;
      pointer-events: none;
      transform: translate(4px, -50%);
      transition: opacity 120ms ease, transform 120ms ease;
    }
    #retype-header button.bg-search-bg:hover::after,
    #retype-header button.bg-search-bg:focus-visible::after,
    #retype-header button[data-bt-search]:hover::after,
    #retype-header button[data-bt-search]:focus-visible::after {
      opacity: 1;
      transform: translate(0, -50%);
    }

    /* Вертикальний роздільник у хедері — на всю висоту панелі (замість h-8) */
    #retype-header span.h-8.border-r {
      align-self: stretch;
      height: auto;
      margin-block: -0.5rem;
    }

    /* Retype-кнопки «Edit this page» та подібні панелі — ховаємо відразу в CSS,
       щоб не блимали до виконання hack_retype.js */
    doc-page-actions,
    #retype-page-actions,
    .retype-page-actions {
      display: none !important;
    }