/* ============================================================
   SmartGen Docs — Original Theme (v2)
   Hand-built design system. No third-party CSS frameworks,
   icon libraries, or visual themes. Every rule below is
   authored for this project specifically.
   ============================================================ */

/* ========== DESIGN TOKENS ========== */
:root {
    --color-primary: #4A3AE3;
    --color-primary-light: #EBE9FD;
    --color-primary-hover: #3A2BC7;
    --color-accent: #A8540B;
    --color-accent-light: #FCEEDD;
    --color-mint: #087A5C;
    --color-success: #087A5C;
    --color-warning: #A8540B;
    --color-danger: #D6304A;
    --color-info: #4A3AE3;

    --bg-primary: #ffffff;
    --bg-secondary: #F7F8FB;
    --bg-tertiary: #EEF0F5;
    --bg-hover: #F1F0FE;
    --bg-active: #EBE9FD;
    --bg-code: #F6F7FA;

    --text-primary: #12172B;
    --text-secondary: #565F76;
    --text-tertiary: #6B7488;
    --text-active: #4A3AE3;

    --border-color: #E7E9F1;
    --border-light: #F1F2F7;
    --border-active: #4A3AE3;

    --shadow-sm: 0 1px 2px rgba(18, 23, 43, 0.05);
    --shadow-md: 0 6px 16px rgba(18, 23, 43, 0.08);
    --shadow-lg: 0 18px 46px rgba(18, 23, 43, 0.14);

    --sidebar-width: 280px;
    --header-height: 64px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --ease: cubic-bezier(.16,1,.3,1);
    --transition-fast: 150ms var(--ease);
    --transition-normal: 250ms var(--ease);
}

/* Dark mode — toggled via body.dark-mode (existing JS untouched) */
body.dark-mode {
    --color-primary: #8C9EFF;
    --color-primary-light: #202659;
    --color-primary-hover: #A9B6FF;
    --color-accent: #FFB25E;
    --color-accent-light: #3A2A12;
    --color-mint: #4ED9AE;
    --color-success: #4ED9AE;
    --color-warning: #FFB25E;

    --bg-primary: #0B0E16;
    --bg-secondary: #121826;
    --bg-tertiary: #1A2233;
    --bg-hover: #1B2040;
    --bg-active: #202659;
    --bg-code: #0F1420;

    --text-primary: #F2F4F9;
    --text-secondary: #9AA5BD;
    --text-tertiary: #7C87A3;
    --text-active: #B7C0FF;

    --border-color: #232B3D;
    --border-light: #1A2233;
    --border-active: #8C9EFF;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 18px 46px rgba(0, 0, 0, 0.5);
}

/* ========== RESET & BASE ========== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
html, body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary-hover); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon.filled { fill: currentColor; stroke: none; }

/* ========== HEADER ========== */
.header {
    position: sticky; top: 0; z-index: 100;
    height: var(--header-height);
    background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid var(--border-color);
}
.header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 1440px; margin: 0 auto; padding: 0 1.5rem; }
.header-left { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.menu-toggle {
    display: none; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--radius-sm);
    background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary);
    cursor: pointer; flex-shrink: 0;
}
.menu-toggle:hover { background: var(--bg-hover); border-color: var(--border-active); color: var(--color-primary); }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.05rem; color: var(--text-primary); min-width: 0; position: relative; }
.brand img, .brand svg { height: 26px; width: 26px; flex-shrink: 0; }
.brand a { display: flex; align-items: center; gap: .6rem; color: inherit; position: relative; }
.brand .icon { animation: logo-breathe 3.2s ease-in-out infinite; transform-origin: 50% 90%; color: var(--color-primary); }
@keyframes logo-breathe {
    0%, 100% { transform: translateY(0) scale(1) rotate(0deg); }
    30% { transform: translateY(-3px) scale(1.06) rotate(-4deg); }
    55% { transform: translateY(0) scale(1) rotate(3deg); }
    75% { transform: translateY(-1px) scale(1.03) rotate(0deg); }
}
.brand a::before {
    content: ''; position: absolute; left: -2px; top: -2px; width: 30px; height: 30px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 35%, transparent), transparent 70%);
    animation: logo-glow 3.2s ease-in-out infinite; pointer-events: none;
}
@keyframes logo-glow { 0%, 100% { opacity: .35; transform: scale(.9); } 50% { opacity: .8; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .brand .icon, .brand a::before { animation: none; } }
.brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand .badge {
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--color-mint); background: color-mix(in srgb, var(--color-mint) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-mint) 35%, transparent);
    padding: 2px 7px; border-radius: var(--radius-pill); margin-left: .35rem;
}
.header-github svg { width: 18px; height: 18px; }
.sponsor-btn {
    display: flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
    color: var(--color-accent); font-size: .84rem; font-weight: 600;
}
.sponsor-btn:hover { background: color-mix(in srgb, var(--color-accent) 20%, transparent); color: var(--color-accent); }
.sponsor-btn svg { width: 15px; height: 15px; }
.header-nav { display: none; align-items: center; gap: 1.5rem; }
.header-nav a { font-size: .88rem; font-weight: 500; color: var(--text-secondary); }
.header-nav a:hover { color: var(--color-primary); }
.header-right { display: flex; align-items: center; gap: .6rem; }

.search-container { position: relative; width: 100%; max-width: 280px; }
.search-input {
    width: 100%; padding: .55rem .8rem .55rem 2.2rem; font-size: .85rem; font-family: var(--font-sans);
    background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md);
    color: var(--text-primary); transition: border-color var(--transition-fast), background var(--transition-fast);
}
.search-input:focus { outline: none; border-color: var(--border-active); background: var(--bg-primary); box-shadow: 0 0 0 3px var(--bg-active); }
.search-icon { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); width: 16px; height: 16px; pointer-events: none; }
.search-shortcut {
    position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
    font-family: var(--font-mono); font-size: .68rem; color: var(--text-tertiary);
    background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 4px; padding: 1px 5px;
}
.search-results {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: 360px; overflow-y: auto;
    background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); z-index: 110; display: none;
}
.search-results.visible { display: block; }
.search-result-item { display: block; padding: .65rem .9rem; border-bottom: 1px solid var(--border-light); }
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover, .search-result-item.highlighted { background: var(--bg-hover); }
.search-result-title { font-weight: 600; font-size: .88rem; color: var(--text-primary); }
.search-result-path { font-size: .74rem; color: var(--text-tertiary); font-family: var(--font-mono); margin-top: 2px; }

.icon-btn {
    display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: var(--radius-sm); background: transparent; border: 1px solid transparent;
    color: var(--text-secondary); cursor: pointer;
}
.icon-btn:hover { background: var(--bg-secondary); border-color: var(--border-color); color: var(--color-primary); }
#theme-toggle .icon-moon { display: block; }
#theme-toggle .icon-sun { display: none; }
body.dark-mode #theme-toggle .icon-moon { display: none; }
body.dark-mode #theme-toggle .icon-sun { display: block; }

@media (min-width: 769px) {
    .menu-toggle { display: none !important; }
    .header-nav { display: flex; }
}
@media (max-width: 768px) {
    .menu-toggle { display: flex; }
    .search-container { max-width: 160px; }
    .brand .badge { display: none; }
    .sponsor-btn span { display: none; }
    .sponsor-btn { padding: .5rem; }
}

/* ========== LAYOUT ========== */
.container { max-width: 1440px; margin: 0 auto; padding: 0 1.5rem; }
.main-content { display: grid; grid-template-columns: var(--sidebar-width) 1fr; gap: 0; max-width: 1440px; margin: 0 auto; min-height: calc(100vh - var(--header-height) - 120px); }

/* ========== SIDEBAR ========== */
.sidebar-overlay {
    position: fixed; inset: 0; background: rgba(10,12,20,.5); backdrop-filter: blur(2px);
    z-index: 94; opacity: 0; pointer-events: none; transition: opacity var(--transition-normal);
}
.sidebar-overlay.visible { opacity: 1; pointer-events: auto; }

.sidebar {
    position: sticky; top: var(--header-height); height: calc(100vh - var(--header-height));
    overflow-y: auto; padding: 1.25rem 0 2rem; background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    scrollbar-width: thin; scrollbar-color: var(--border-color) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

.sidebar-header { display: none; align-items: center; justify-content: space-between; padding: 0 1.25rem 1rem; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; }
.sidebar-title { font-weight: 700; font-size: .95rem; }
.sidebar-close { display: none; background: none; border: none; color: var(--text-secondary); cursor: pointer; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.sidebar-close:hover { background: var(--bg-secondary); color: var(--color-primary); }

.side-nav { padding: 0 .6rem; }
.side-nav > ul { list-style: none; padding: 0; margin: 0; }
.side-nav > ul > li { margin-bottom: 2px; }

.nav-item { list-style: none; }
.nav-section { margin-bottom: .2rem; }
.nav-section-toggle {
    display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .65rem;
    background: none; border: none; text-align: left; cursor: pointer;
    font-family: var(--font-sans); font-size: .85rem; font-weight: 600; color: var(--text-primary);
    border-radius: var(--radius-sm); transition: background var(--transition-fast);
}
.nav-section-toggle:hover { background: var(--bg-secondary); }
.section-arrow { width: 14px; height: 14px; color: var(--text-tertiary); margin-left: auto; flex-shrink: 0; transition: transform var(--transition-normal); }
.nav-section.expanded > .nav-section-toggle .section-arrow { transform: rotate(90deg); }
.nav-section-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-tertiary); }

.nav-submenu {
    list-style: none; overflow: hidden; max-height: 0; transition: max-height var(--transition-normal);
    padding-left: .5rem; border-left: 1px solid var(--border-light); margin-left: 1.05rem;
}
.nav-submenu.expanded { max-height: 1200px; }

.nav-link {
    display: flex; align-items: center; gap: .55rem; padding: .5rem .65rem .5rem 1.1rem;
    font-size: .85rem; color: var(--text-secondary); border-left: 2px solid transparent;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0; transition: all var(--transition-fast);
}
.nav-item-single .nav-link { padding-left: .65rem; font-weight: 500; }
.nav-link:hover { background: var(--bg-hover); color: var(--color-primary); border-left-color: var(--color-primary-light); }
.nav-link.active { background: var(--bg-active); color: var(--text-active); border-left-color: var(--border-active); font-weight: 600; }
.active-indicator { width: 5px; height: 5px; border-radius: 50%; background: var(--border-active); flex-shrink: 0; }
.nav-link-external { color: var(--text-tertiary); }
.nav-link-external-icon { width: 11px; height: 11px; opacity: .7; }
.nav-link-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }

@media (max-width: 768px) {
    .main-content { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed; top: 0; left: -100%; width: min(var(--sidebar-width), 82vw);
        height: 100vh; z-index: 95; padding-top: 0;
        transition: left var(--transition-normal); box-shadow: var(--shadow-lg);
        border-right: 1px solid var(--border-color);
    }
    .sidebar.open { left: 0; }
    .sidebar-header { display: flex; }
    .sidebar-close { display: flex; }
}
@media (min-width: 1025px) { .main-content { grid-template-columns: var(--sidebar-width) 1fr; } }
@media (max-width: 1024px) and (min-width: 769px) { .main-content { grid-template-columns: 240px 1fr; } .sidebar { width: 240px; } }

/* ========== CONTENT ========== */
.content { background: var(--bg-primary); padding: 2.25rem 3rem 4rem; max-width: 900px; }
@media (max-width: 1024px) { .content { padding: 2rem; } }
@media (max-width: 768px) { .content { padding: 1.5rem 1.25rem 3rem; } }

.breadcrumb { display: flex; align-items: center; gap: .4rem; margin-bottom: 1.75rem; font-size: .84rem; color: var(--text-secondary); flex-wrap: wrap; }
.breadcrumb a { color: var(--color-primary); font-weight: 500; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .separator { color: var(--text-tertiary); width: 12px; height: 12px; }
.breadcrumb-current { color: var(--text-tertiary); font-weight: 500; }

/* ========== MARKDOWN CONTENT ========== */
.markdown-body { color: var(--text-primary); }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
    margin-top: 2rem; margin-bottom: 1rem; font-weight: 700; line-height: 1.3; color: var(--text-primary); scroll-margin-top: calc(var(--header-height) + 1rem);
}
.markdown-body h1 { font-size: 2.1rem; border-bottom: 1px solid var(--border-color); padding-bottom: .85rem; margin-top: 0; }
.markdown-body h2 { font-size: 1.5rem; border-bottom: 1px solid var(--border-light); padding-bottom: .5rem; }
.markdown-body h3 { font-size: 1.2rem; }
.markdown-body h4 { font-size: 1.02rem; }
.markdown-body p, .markdown-body ul, .markdown-body ol { margin-bottom: 1.1rem; color: var(--text-secondary); }
.markdown-body strong { color: var(--text-primary); }
.markdown-body ul, .markdown-body ol { padding-left: 1.4rem; }
.markdown-body li { margin-bottom: .4rem; }
.markdown-body blockquote { border-left: 3px solid var(--color-primary); background: var(--bg-secondary); padding: .8rem 1.1rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-secondary); margin-bottom: 1.1rem; }
.markdown-body img { max-width: 100%; border-radius: var(--radius-md); border: 1px solid var(--border-color); }
.markdown-body hr { border: none; border-top: 1px solid var(--border-color); margin: 2rem 0; }
.markdown-body table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: .9rem; display: block; overflow-x: auto; }
.markdown-body th, .markdown-body td { padding: .6rem .9rem; border: 1px solid var(--border-color); text-align: left; }
.markdown-body th { background: var(--bg-secondary); font-weight: 600; }
.markdown-body tr:nth-child(even) { background: color-mix(in srgb, var(--bg-secondary) 55%, transparent); }

/* inline code */
.markdown-body code { font-family: var(--font-mono); font-size: .86em; background: var(--bg-tertiary); color: var(--color-primary); padding: .15em .4em; border-radius: 4px; }
.markdown-body pre { position: relative; background: var(--bg-code); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.1rem 1.2rem; overflow-x: auto; margin-bottom: 1.4rem; }
.markdown-body pre code { background: none; color: inherit; padding: 0; font-size: .86rem; line-height: 1.6; }
.markdown-body .codehilite { position: relative; margin-bottom: 1.4rem; }
.markdown-body .codehilite pre { margin-bottom: 0; }
.copy-code-btn {
    position: absolute; top: .6rem; right: .6rem; display: inline-flex; align-items: center; gap: .3rem; z-index: 2;
    background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    color: var(--text-secondary); font-size: .72rem; padding: .3rem .55rem; cursor: pointer; opacity: 0;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}
.markdown-body pre:hover .copy-code-btn, .codehilite:hover .copy-code-btn { opacity: 1; }
.copy-code-btn:hover { color: var(--color-primary); border-color: var(--border-active); }
.copy-code-btn svg { width: 13px; height: 13px; }

/* ---- Pygments token theme (server-side highlighting via markdown2 + Pygments; zero client JS/CSS dependency) ---- */
.codehilite .k, .codehilite .kn, .codehilite .kd, .codehilite .kc, .codehilite .kr { color: #B3399B; font-weight: 600; }
.codehilite .s, .codehilite .s1, .codehilite .s2, .codehilite .sb, .codehilite .sc, .codehilite .sd { color: #0B8F6B; }
.codehilite .c, .codehilite .c1, .codehilite .cm, .codehilite .cs { color: var(--text-tertiary); font-style: italic; }
.codehilite .nf, .codehilite .fm { color: #4A3AE3; }
.codehilite .nc { color: #C2660D; font-weight: 600; }
.codehilite .nb, .codehilite .bp { color: #1F7FBF; }
.codehilite .n { color: var(--text-primary); }
.codehilite .o, .codehilite .ow { color: #C2660D; }
.codehilite .p { color: var(--text-secondary); }
.codehilite .mi, .codehilite .mf, .codehilite .m { color: #B3399B; }
.codehilite .w { color: transparent; }
.codehilite .err { color: var(--color-danger); }
body.dark-mode .codehilite .k, body.dark-mode .codehilite .kn, body.dark-mode .codehilite .kd, body.dark-mode .codehilite .kc, body.dark-mode .codehilite .kr { color: #E28AD6; }
body.dark-mode .codehilite .s, body.dark-mode .codehilite .s1, body.dark-mode .codehilite .s2, body.dark-mode .codehilite .sb, body.dark-mode .codehilite .sc, body.dark-mode .codehilite .sd { color: #4ED9AE; }
body.dark-mode .codehilite .nf, body.dark-mode .codehilite .fm { color: #8C9EFF; }
body.dark-mode .codehilite .nc { color: #FFB25E; }
body.dark-mode .codehilite .nb, body.dark-mode .codehilite .bp { color: #5FB6F5; }
body.dark-mode .codehilite .o, body.dark-mode .codehilite .ow { color: #FFB25E; }
body.dark-mode .codehilite .mi, body.dark-mode .codehilite .mf, body.dark-mode .codehilite .m { color: #E28AD6; }

/* status badges (config: extra.status) */
.status-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: .15rem .55rem; border-radius: var(--radius-pill); }
.status-badge.new { background: var(--color-primary-light); color: var(--color-primary); }
.status-badge.deprecated { background: var(--color-accent-light); color: var(--color-accent); }

/* ========== PAGE NAV (prev/next) ========== */
.page-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); }
.page-nav-prev, .page-nav-next { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1.1rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); max-width: 48%; transition: all var(--transition-fast); }
.page-nav-prev:hover, .page-nav-next:hover { border-color: var(--border-active); background: var(--bg-hover); }
.page-nav-next { margin-left: auto; text-align: right; }
.page-nav-label { font-size: .72rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: .3rem; }
.page-nav-next .page-nav-label { justify-content: flex-end; }
.page-nav-title { font-weight: 600; color: var(--text-primary); font-size: .92rem; }
@media (max-width: 768px) { .page-nav { flex-direction: column; } .page-nav-prev, .page-nav-next { max-width: 100%; } }

/* ========== FOOTER ========== */
.site-footer { border-top: 1px solid var(--border-color); background: var(--bg-secondary); padding: 2.5rem 0 1.75rem; margin-top: 2rem; }
.footer-social { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 1.25rem; }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--bg-primary); border: 1px solid var(--border-color); color: var(--text-secondary); }
.footer-social a:hover { color: var(--color-primary); border-color: var(--border-active); transform: translateY(-2px); }
.footer-social svg { width: 16px; height: 16px; }
.footer-copy { text-align: center; font-size: .82rem; color: var(--text-tertiary); }
.footer-copy a { color: var(--text-secondary); font-weight: 500; }

/* ========== TOC (right rail, if present) ========== */
.toc { display: none; }
@media (min-width: 1280px) {
    .toc { display: block; position: sticky; top: calc(var(--header-height) + 2rem); width: 220px; align-self: start; padding-left: 1.5rem; border-left: 1px solid var(--border-color); }
    .toc-title { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); margin-bottom: .75rem; }
    .toc a { display: block; font-size: .82rem; color: var(--text-secondary); padding: .3rem 0; border-left: 2px solid transparent; padding-left: .7rem; margin-left: -1px; }
    .toc a:hover, .toc a.active { color: var(--color-primary); border-left-color: var(--color-primary); }
}

@media (max-width: 480px) {
    .header .container { padding: 0 1rem; }
    .search-container { max-width: 130px; }
    .brand span.brand-name { display: none; }
    .content { padding: 1.25rem 1rem 2.5rem; }
    .markdown-body pre { padding: .8rem; }
}