/* ═══════════════════════════════════════════════════════════════════════════
   Developer Docs — flat design: solid colours, 1px borders. No shadows, no gradients.
   Everything is scoped under .docs-app so the same file can style the admin
   editor preview without touching the admin theme.
   ═══════════════════════════════════════════════════════════════════════════ */

.docs-app {
    --dx-bg: #ffffff;
    --dx-bg-alt: #f4f5f7;
    --dx-surface: #ffffff;
    --dx-text: #12161c;
    --dx-text-2: #3a4350;
    --dx-muted: #657083;
    --dx-line: #e1e5ea;
    --dx-line-strong: #c6ced8;
    --dx-accent: #2563eb;
    --dx-accent-ink: #ffffff;
    --dx-code-bg: #10151c;
    --dx-code-head: #171e27;
    --dx-code-text: #d7dde6;
    --dx-code-line: #29323e;
    --dx-code-muted: #8e9aab;
    --dx-note: #2563eb;
    --dx-tip: #15803d;
    --dx-important: #7c3aed;
    --dx-warning: #b45309;
    --dx-danger: #dc2626;
    --dx-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --dx-head: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --dx-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    --dx-radius: 6px;
    --dx-header-h: 56px;

    color: var(--dx-text);
    font-family: var(--dx-font);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html[data-theme="dark"] .docs-app {
    --dx-bg: #0d1117;
    --dx-bg-alt: #151b23;
    --dx-surface: #11161d;
    --dx-text: #e7eaee;
    --dx-text-2: #c3cad4;
    --dx-muted: #8f9aaa;
    --dx-line: #232b36;
    --dx-line-strong: #364050;
    --dx-code-bg: #0a0e13;
    --dx-code-head: #121820;
    --dx-code-line: #232b36;
    --dx-note: #60a5fa;
    --dx-tip: #4ade80;
    --dx-important: #a78bfa;
    --dx-warning: #fbbf24;
    --dx-danger: #f87171;
}

body.docs-body { margin: 0; background: var(--dx-bg, #fff); }
html[data-theme="dark"] body.docs-body { background: #0d1117; }

.docs-app *, .docs-app *::before, .docs-app *::after { box-sizing: border-box; }
.docs-app a { color: var(--dx-accent); text-decoration: none; }
.docs-app a:hover { text-decoration: underline; text-underline-offset: 3px; }
.docs-app :focus-visible { outline: 2px solid var(--dx-accent); outline-offset: 2px; }
.docs-app button { font-family: inherit; }
.docs-app [hidden] { display: none !important; }

.dx-page { background: var(--dx-bg); min-height: 100vh; display: flex; flex-direction: column; }
.dx-page > main { flex: 1 0 auto; }

.dx-skip { position: absolute; left: -9999px; top: 8px; background: var(--dx-accent); color: var(--dx-accent-ink) !important; padding: 8px 14px; border-radius: var(--dx-radius); z-index: 100; }
.dx-skip:focus { left: 8px; }

/* ── header ─────────────────────────────────────────────────────────────── */
.dx-header {
    position: sticky; top: 0; z-index: 40; height: var(--dx-header-h);
    display: flex; align-items: center; gap: 14px; padding: 0 20px;
    background: var(--dx-bg); border-bottom: 1px solid var(--dx-line);
}
.dx-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--dx-text) !important; font-family: var(--dx-head); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; text-decoration: none !important; white-space: nowrap; }
.dx-brand img { height: 28px; width: auto; max-width: 160px; object-fit: contain; display: block; }
.dx-header-gap { flex: 1; }
.dx-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; min-width: 36px; padding: 0 10px;
    background: transparent; color: var(--dx-text-2); border: 1px solid var(--dx-line); border-radius: var(--dx-radius); cursor: pointer; font-size: .85rem;
}
.dx-icon-btn:hover { border-color: var(--dx-line-strong); color: var(--dx-text); }
.dx-icon-btn svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dx-search-btn { min-width: 240px; justify-content: flex-start; color: var(--dx-muted); background: var(--dx-bg-alt); }
.dx-search-btn kbd { margin-left: auto; font-family: var(--dx-mono); font-size: .72rem; border: 1px solid var(--dx-line-strong); border-radius: 4px; padding: 1px 6px; color: var(--dx-muted); background: var(--dx-bg); }
.dx-menu-btn { display: none; }
.dx-theme-btn .i-moon { display: none; }
html[data-theme="dark"] .dx-theme-btn .i-sun { display: none; }
html[data-theme="dark"] .dx-theme-btn .i-moon { display: block; }
.dx-header-link { color: var(--dx-text-2) !important; font-size: .88rem; font-weight: 500; }

.dx-switch { position: relative; }
.dx-switch > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--dx-line); border-radius: var(--dx-radius); font-size: .86rem; font-weight: 600; color: var(--dx-text); }
.dx-switch > summary::-webkit-details-marker { display: none; }
.dx-switch > summary::after { content: ''; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.dx-switch[open] > summary { border-color: var(--dx-line-strong); }
.dx-switch-list { position: absolute; top: 42px; left: 0; min-width: 240px; max-height: 70vh; overflow: auto; background: var(--dx-bg); border: 1px solid var(--dx-line-strong); border-radius: 8px; padding: 6px; z-index: 60; }
.dx-switch-list a { display: block; padding: 8px 10px; border-radius: 4px; color: var(--dx-text) !important; font-size: .9rem; text-decoration: none !important; }
.dx-switch-list a:hover, .dx-switch-list a.is-active { background: var(--dx-bg-alt); }
.dx-switch-list a small { display: block; color: var(--dx-muted); font-size: .76rem; }

/* ── three-column shell ─────────────────────────────────────────────────── */
.dx-shell { display: grid; grid-template-columns: 276px minmax(0, 1fr) 236px; max-width: 1480px; margin: 0 auto; width: 100%; }
.dx-shell.no-toc { grid-template-columns: 276px minmax(0, 1fr); }
.dx-side { position: sticky; top: var(--dx-header-h); height: calc(100vh - var(--dx-header-h)); overflow-y: auto; padding: 24px 14px 48px 20px; border-right: 1px solid var(--dx-line); }
.dx-main { padding: 40px 56px 96px; min-width: 0; }
.dx-article { max-width: 780px; margin: 0 auto; }
.dx-toc { position: sticky; top: var(--dx-header-h); height: calc(100vh - var(--dx-header-h)); overflow-y: auto; padding: 40px 20px 48px 8px; }

.dx-side-product { padding: 0 8px 16px; border-bottom: 1px solid var(--dx-line); margin-bottom: 14px; }
.dx-side-product a { color: var(--dx-text) !important; font-family: var(--dx-head); font-weight: 700; font-size: 1.05rem; text-decoration: none !important; display: block; line-height: 1.3; }
.dx-badge { display: inline-block; margin-top: 6px; font-size: .72rem; font-weight: 600; padding: 2px 8px; border: 1px solid var(--dx-line-strong); border-radius: 999px; color: var(--dx-muted); }

.dx-nav-home, .dx-nav li a { display: block; padding: 6px 10px; margin: 1px 0; border-radius: 4px; color: var(--dx-text-2) !important; font-size: .9rem; line-height: 1.45; text-decoration: none !important; border-left: 2px solid transparent; }
.dx-nav-home:hover, .dx-nav li a:hover { background: var(--dx-bg-alt); color: var(--dx-text) !important; }
.dx-nav-home.is-active, .dx-nav li a.is-active { background: color-mix(in srgb, var(--dx-accent) 10%, var(--dx-bg)); color: var(--dx-accent) !important; border-left-color: var(--dx-accent); font-weight: 600; border-radius: 0 4px 4px 0; }
.dx-nav-label { margin: 22px 10px 6px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dx-muted); }
.dx-nav ul { list-style: none; margin: 0; padding: 0; }

.dx-toc-title { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dx-muted); margin: 0 0 10px 12px; }
.dx-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--dx-line); }
.dx-toc a { display: block; padding: 4px 12px; margin-left: -1px; border-left: 2px solid transparent; color: var(--dx-muted) !important; font-size: .83rem; line-height: 1.45; text-decoration: none !important; }
.dx-toc a:hover { color: var(--dx-text) !important; }
.dx-toc a.is-active { color: var(--dx-accent) !important; border-left-color: var(--dx-accent); font-weight: 600; }
.dx-toc .lvl-3 a { padding-left: 24px; }
.dx-toc .lvl-4 a { padding-left: 36px; }

.dx-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .84rem; color: var(--dx-muted); margin: 0 0 18px; }
.dx-crumbs a { color: var(--dx-muted) !important; }
.dx-crumbs a:hover { color: var(--dx-text) !important; }
.dx-crumbs span.sep { opacity: .5; }

.dx-title { font-family: var(--dx-head); font-size: 2.3rem; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; margin: 0 0 12px; color: var(--dx-text); }
.dx-lede { font-size: 1.12rem; color: var(--dx-text-2); margin: 0 0 12px; line-height: 1.6; }
.dx-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; color: var(--dx-muted); padding-bottom: 22px; margin-bottom: 8px; border-bottom: 1px solid var(--dx-line); }
.dx-meta .dx-copy-md { margin-left: auto; background: none; border: 0; padding: 0; color: var(--dx-accent); cursor: pointer; font-size: .82rem; }
.dx-meta .dx-copy-md:hover { text-decoration: underline; }

.dx-draft { border: 1px solid var(--dx-warning); border-left-width: 4px; background: color-mix(in srgb, var(--dx-warning) 8%, var(--dx-bg)); color: var(--dx-text); padding: 10px 14px; border-radius: var(--dx-radius); font-size: .9rem; margin: 0 0 22px; }
.dx-draft a { font-weight: 600; }

/* ── prose ──────────────────────────────────────────────────────────────── */
.docs-app .prose { color: var(--dx-text-2); font-size: 1rem; line-height: 1.78; overflow-wrap: break-word; }
.docs-app .prose > :first-child { margin-top: 0; }
.docs-app .prose h1, .docs-app .prose h2, .docs-app .prose h3, .docs-app .prose h4 { font-family: var(--dx-head); color: var(--dx-text); letter-spacing: -.015em; line-height: 1.25; position: relative; scroll-margin-top: calc(var(--dx-header-h) + 20px); }
.docs-app .prose h1 { font-size: 2rem; margin: 2em 0 .6em; }
.docs-app .prose h2 { font-size: 1.55rem; margin: 2.4em 0 .7em; padding-top: 1.1em; border-top: 1px solid var(--dx-line); }
.docs-app .prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.docs-app .prose h3 { font-size: 1.22rem; margin: 2em 0 .55em; }
.docs-app .prose h4 { font-size: 1.04rem; margin: 1.7em 0 .5em; }
.docs-app .prose .anchor { position: absolute; left: -1.05em; padding-right: .3em; color: var(--dx-muted) !important; font-weight: 400; opacity: 0; text-decoration: none !important; }
.docs-app .prose h2:hover .anchor, .docs-app .prose h3:hover .anchor, .docs-app .prose h4:hover .anchor, .docs-app .prose .anchor:focus { opacity: 1; }
.docs-app .prose p { margin: 1.05em 0; }
.docs-app .prose a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--dx-accent) 45%, transparent); text-underline-offset: 3px; }
.docs-app .prose a:hover { text-decoration-color: var(--dx-accent); }
.docs-app .prose a.anchor { text-decoration: none; }
.docs-app .prose strong { color: var(--dx-text); font-weight: 650; }
.docs-app .prose ul, .docs-app .prose ol { padding-left: 1.5em; margin: 1.05em 0; }
.docs-app .prose li { margin: .35em 0; }
.docs-app .prose li > p { margin: .5em 0; }
.docs-app .prose li > ul, .docs-app .prose li > ol { margin: .4em 0; }
.docs-app .prose li.task-item { list-style: none; margin-left: -1.3em; }
.docs-app .prose li.task-item input { margin-right: .5em; accent-color: var(--dx-accent); }
.docs-app .prose hr { border: 0; border-top: 1px solid var(--dx-line); margin: 2.4em 0; }
.docs-app .prose blockquote { margin: 1.4em 0; padding: .2em 1.1em; border-left: 3px solid var(--dx-line-strong); color: var(--dx-text-2); background: var(--dx-bg-alt); border-radius: 0 var(--dx-radius) var(--dx-radius) 0; }
.docs-app .prose blockquote > :first-child { margin-top: .6em; }
.docs-app .prose blockquote > :last-child { margin-bottom: .6em; }
.docs-app .prose p > img { display: inline-block; vertical-align: middle; margin: .4em 0; }
.docs-app .prose img { max-width: 100%; height: auto; border: 1px solid var(--dx-line); border-radius: var(--dx-radius); display: block; margin: 1.4em 0; }
.docs-app .prose del { opacity: .65; }
.docs-app .prose kbd { font-family: var(--dx-mono); font-size: .8em; padding: 1px 6px; border: 1px solid var(--dx-line-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--dx-bg-alt); color: var(--dx-text); }
.docs-app .prose mark { background: color-mix(in srgb, var(--dx-warning) 25%, var(--dx-bg)); color: inherit; padding: 0 3px; border-radius: 3px; }
.docs-app .prose :not(pre) > code { font-family: var(--dx-mono); font-size: .86em; padding: 2px 6px; background: var(--dx-bg-alt); border: 1px solid var(--dx-line); border-radius: 4px; color: var(--dx-text); word-break: break-word; }
.docs-app .prose a code { color: inherit; }

.docs-app .prose .table-wrap { overflow-x: auto; margin: 1.5em 0; border: 1px solid var(--dx-line); border-radius: var(--dx-radius); }
.docs-app .prose table { width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.55; }
.docs-app .prose th { background: var(--dx-bg-alt); color: var(--dx-text); text-align: left; font-weight: 650; white-space: nowrap; }
.docs-app .prose th, .docs-app .prose td { padding: 10px 14px; border-bottom: 1px solid var(--dx-line); vertical-align: top; }
.docs-app .prose tr:last-child td { border-bottom: 0; }
.docs-app .prose .al-center { text-align: center !important; }
.docs-app .prose .al-right { text-align: right !important; }

.docs-app .prose .md-details { margin: 1.3em 0; border: 1px solid var(--dx-line); border-radius: var(--dx-radius); padding: 0 16px; }
.docs-app .prose .md-details > summary, .docs-app .prose details > summary { cursor: pointer; font-weight: 600; color: var(--dx-text); padding: 12px 0; }
.docs-app .prose .md-details[open] > summary { border-bottom: 1px solid var(--dx-line); margin-bottom: 8px; }

/* ── callouts ───────────────────────────────────────────────────────────── */
.docs-app .callout { --c: var(--dx-note); margin: 1.5em 0; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--c) 30%, var(--dx-line)); border-left: 4px solid var(--c); border-radius: var(--dx-radius); background: color-mix(in srgb, var(--c) 7%, var(--dx-bg)); }
.docs-app .callout-tip { --c: var(--dx-tip); }
.docs-app .callout-important { --c: var(--dx-important); }
.docs-app .callout-warning { --c: var(--dx-warning); }
.docs-app .callout-danger { --c: var(--dx-danger); }
.docs-app .callout-title { font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c); margin-bottom: 4px; }
.docs-app .callout-body > :first-child { margin-top: .2em; }
.docs-app .callout-body > :last-child { margin-bottom: .1em; }

/* ── code ───────────────────────────────────────────────────────────────── */
.docs-app figure.code-block { margin: 1.5em 0; background: var(--dx-code-bg); border: 1px solid var(--dx-code-line); border-radius: var(--dx-radius); overflow: hidden; }
.docs-app .code-head { display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 0 8px 0 16px; background: var(--dx-code-head); border-bottom: 1px solid var(--dx-code-line); }
.docs-app .code-title { font-family: var(--dx-mono); font-size: .78rem; color: var(--dx-code-text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-app .code-lang { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dx-code-muted); }
.docs-app .code-copy { height: 26px; padding: 0 10px; background: transparent; color: var(--dx-code-muted); border: 1px solid var(--dx-code-line); border-radius: 4px; font-size: .74rem; font-weight: 600; cursor: pointer; }
.docs-app .code-copy:hover { color: #fff; border-color: var(--dx-code-muted); }
.docs-app .code-copy.is-done { color: #86efac; border-color: #86efac; }
.docs-app pre.code { margin: 0; padding: 16px; overflow-x: auto; background: transparent; color: var(--dx-code-text); font-family: var(--dx-mono); font-size: .85rem; line-height: 1.7; tab-size: 2; -moz-tab-size: 2; white-space: pre; }
.docs-app pre.code code { font-family: inherit; font-size: inherit; background: none; border: 0; padding: 0; color: inherit; }
.docs-app .hl-line { display: inline-block; min-width: calc(100% + 32px); margin: 0 -16px; padding: 0 16px 0 13px; border-left: 3px solid var(--dx-accent); background: rgba(255, 255, 255, .07); }

.docs-app .tk-c { color: #7d8a9b; font-style: italic; }
.docs-app .tk-s { color: #b5e08a; }
.docs-app .tk-n, .docs-app .tk-b { color: #f5a97f; }
.docs-app .tk-k { color: #c9a0ff; }
.docs-app .tk-f { color: #7fb4ff; }
.docs-app .tk-v { color: #ffd479; }
.docs-app .tk-p { color: #7fdcf5; }
.docs-app .tk-t { color: #ff8b94; }
.docs-app .tk-a { color: #ffd479; }
.docs-app .tk-m { color: #7fdcf5; }
.docs-app .tk-d { color: #b5e08a; background: rgba(134, 239, 172, .1); display: inline-block; min-width: 100%; }
.docs-app .tk-r { color: #ff8b94; background: rgba(248, 113, 113, .12); display: inline-block; min-width: 100%; }

.docs-app .code-tabs { margin: 1.5em 0; background: var(--dx-code-bg); border: 1px solid var(--dx-code-line); border-radius: var(--dx-radius); overflow: hidden; }
.docs-app .code-tabs .code-block { margin: 0; border: 0; border-radius: 0; }
.docs-app .code-tabs:not(.is-enhanced) .code-tabs-nav { display: none; }
.docs-app .code-tabs:not(.is-enhanced) .code-panel + .code-panel { border-top: 1px solid var(--dx-code-line); }
.docs-app .code-tabs.is-enhanced .code-panel { display: none; }
.docs-app .code-tabs.is-enhanced .code-panel.is-active { display: block; }
.docs-app .code-tabs-nav { display: flex; overflow-x: auto; background: var(--dx-code-head); border-bottom: 1px solid var(--dx-code-line); }
.docs-app .code-tab { flex: none; padding: 10px 16px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--dx-code-muted); font-size: .8rem; font-weight: 600; cursor: pointer; }
.docs-app .code-tab:hover { color: #fff; }
.docs-app .code-tab.is-active { color: #fff; border-bottom-color: var(--dx-accent); }
.docs-app .code-tabs.is-enhanced .code-head .code-lang { display: none; }

/* ── buttons, cards, hero ───────────────────────────────────────────────── */
.docs-app .dx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; background: var(--dx-accent); color: var(--dx-accent-ink) !important; border: 1px solid var(--dx-accent); border-radius: var(--dx-radius); font-weight: 600; font-size: .95rem; text-decoration: none !important; cursor: pointer; }
.docs-app .dx-btn:hover { background: color-mix(in srgb, var(--dx-accent) 88%, #000); }
.docs-app .dx-btn.is-ghost { background: transparent; color: var(--dx-text) !important; border-color: var(--dx-line-strong); }
.docs-app .dx-btn.is-ghost:hover { border-color: var(--dx-text); background: transparent; }

.dx-hero { padding: 8px 0 28px; border-bottom: 1px solid var(--dx-line); margin-bottom: 32px; }
.dx-hero .dx-title { font-size: 2.8rem; }
.dx-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.dx-hub { max-width: 1100px; margin: 0 auto; padding: 64px 24px 96px; }
.dx-hub .dx-title { font-size: 3rem; max-width: 760px; }
.dx-hub .dx-lede { max-width: 640px; font-size: 1.2rem; }
.dx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; margin-top: 36px; }
.dx-card { display: block; padding: 22px; background: var(--dx-surface); border: 1px solid var(--dx-line); border-radius: 8px; color: var(--dx-text) !important; text-decoration: none !important; }
.dx-card:hover { border-color: var(--dx-accent); }
.dx-card h3 { margin: 0 0 6px; font-family: var(--dx-head); font-size: 1.2rem; letter-spacing: -.01em; color: var(--dx-text); }
.dx-card p { margin: 0 0 12px; color: var(--dx-muted); font-size: .92rem; line-height: 1.55; }
.dx-card .dx-card-foot { font-size: .8rem; color: var(--dx-muted); display: flex; gap: 12px; flex-wrap: wrap; }
.dx-card-initial { width: 40px; height: 40px; border-radius: 8px; background: var(--dx-accent); color: var(--dx-accent-ink); display: inline-flex; align-items: center; justify-content: center; font-family: var(--dx-head); font-weight: 700; font-size: 1.1rem; margin-bottom: 14px; }

.dx-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 8px; }
.dx-section-card { border: 1px solid var(--dx-line); border-radius: 8px; padding: 20px 22px; background: var(--dx-surface); }
.dx-section-card h3 { margin: 0 0 10px; font-family: var(--dx-head); font-size: 1.05rem; color: var(--dx-text); }
.dx-section-card ul { list-style: none; margin: 0; padding: 0; }
.dx-section-card li a { display: block; padding: 7px 0; border-top: 1px solid var(--dx-line); color: var(--dx-text-2) !important; font-size: .93rem; text-decoration: none !important; }
.dx-section-card li:first-child a { border-top: 0; }
.dx-section-card li a:hover { color: var(--dx-accent) !important; }
.dx-section-card li a small { display: block; color: var(--dx-muted); font-size: .8rem; line-height: 1.45; }

.dx-empty { border: 1px dashed var(--dx-line-strong); border-radius: 8px; padding: 40px; text-align: center; color: var(--dx-muted); margin-top: 32px; }

.dx-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 56px; }
.dx-pn a { display: block; padding: 14px 18px; border: 1px solid var(--dx-line); border-radius: 8px; text-decoration: none !important; color: var(--dx-text) !important; }
.dx-pn a:hover { border-color: var(--dx-accent); }
.dx-pn .lbl { display: block; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dx-muted); margin-bottom: 2px; }
.dx-pn .ttl { font-weight: 650; font-family: var(--dx-head); }
.dx-pn .nx { text-align: right; grid-column: 2; }

.dx-footer { border-top: 1px solid var(--dx-line); padding: 26px 24px; font-size: .84rem; color: var(--dx-muted); }
.dx-footer-in { max-width: 1480px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.dx-footer a { color: var(--dx-muted) !important; }

/* ── search ─────────────────────────────────────────────────────────────── */
.dx-search { position: fixed; inset: 0; z-index: 90; background: rgba(8, 11, 16, .6); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 0; }
.dx-search-box { width: 100%; max-width: 660px; background: var(--dx-bg); border: 1px solid var(--dx-line-strong); border-radius: 10px; overflow: hidden; }
.dx-search-input { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--dx-line); }
.dx-search-input svg { width: 18px; height: 18px; flex: none; stroke: var(--dx-muted); fill: none; stroke-width: 1.8; stroke-linecap: round; }
.dx-search-input input { flex: 1; height: 54px; border: 0; background: transparent; color: var(--dx-text); font: inherit; font-size: 1.05rem; outline: none; min-width: 0; }
.dx-search-input kbd { font-family: var(--dx-mono); font-size: .7rem; border: 1px solid var(--dx-line-strong); border-radius: 4px; padding: 1px 6px; color: var(--dx-muted); }
.dx-search-list { list-style: none; margin: 0; padding: 8px; max-height: 56vh; overflow-y: auto; }
.dx-search-list a { display: block; padding: 10px 12px; border-radius: 6px; border-left: 3px solid transparent; color: var(--dx-text) !important; text-decoration: none !important; }
.dx-search-list a.is-sel, .dx-search-list a:hover { background: var(--dx-bg-alt); border-left-color: var(--dx-accent); }
.dx-search-list .r-title { font-weight: 650; font-size: .95rem; }
.dx-search-list .r-sec { font-size: .74rem; color: var(--dx-muted); margin-left: 8px; font-weight: 500; }
.dx-search-list .r-snip { display: block; font-size: .83rem; color: var(--dx-muted); margin-top: 2px; line-height: 1.45; }
.dx-search-list mark { background: color-mix(in srgb, var(--dx-accent) 22%, var(--dx-bg)); color: inherit; border-radius: 2px; }
.dx-search-empty { padding: 28px 16px; text-align: center; color: var(--dx-muted); font-size: .92rem; }

.dx-scrim { display: none; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1220px) {
    .dx-shell, .dx-shell.no-toc { grid-template-columns: 264px minmax(0, 1fr); }
    .dx-toc { display: none; }
    .dx-main { padding: 36px 40px 88px; }
}
@media (max-width: 900px) {
    .dx-shell, .dx-shell.no-toc { display: block; }
    .dx-menu-btn { display: inline-flex; }
    .dx-search-btn { min-width: 0; }
    .dx-search-btn .lbl, .dx-search-btn kbd { display: none; }
    .dx-side { position: fixed; z-index: 55; top: var(--dx-header-h); left: 0; bottom: 0; height: auto; width: min(86vw, 320px); background: var(--dx-bg); transform: translateX(-102%); transition: transform .18s ease; }
    .dx-side.is-open { transform: none; }
    .dx-scrim.is-open { display: block; position: fixed; inset: var(--dx-header-h) 0 0 0; background: rgba(8, 11, 16, .5); z-index: 54; }
    .dx-main { padding: 28px 20px 72px; }
    .dx-title { font-size: 1.85rem; }
    .dx-hero .dx-title, .dx-hub .dx-title { font-size: 2.1rem; }
    .dx-pn { grid-template-columns: 1fr; }
    .dx-pn .nx { grid-column: auto; }
    .docs-app .prose .anchor { display: none; }
    .dx-header { padding: 0 14px; gap: 10px; }
    .dx-header-link { display: none; }
    .dx-brand { max-width: 32vw; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; }
    .dx-switch > summary { max-width: 30vw; overflow: hidden; white-space: nowrap; padding: 0 8px; }
    .dx-switch-list { position: fixed; left: 12px; right: 12px; top: 60px; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .dx-side { transition: none; }
}
@media print {
    .dx-header, .dx-side, .dx-toc, .dx-pn, .dx-footer, .code-copy, .dx-search { display: none !important; }
    .dx-shell { display: block; }
    .dx-main { padding: 0; }
    .docs-app figure.code-block, .docs-app .code-tabs { background: #fff; border-color: #bbb; }
    .docs-app pre.code { color: #000; white-space: pre-wrap; }
}