/* ═══════════════════════════════════════════════════════════════
   docX 3.0 — Fecomas Tech Solutions
   Developers: Chancy Rhee & Elot Kalenga
   Fonts: DM Sans (body) + Poppins (headings & UI)
   Style: Glassmorphism · Native-App · Scoped
═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts import (self-contained) ───────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Poppins:wght@500;600;700;800&display=swap');

/* ── CSS Reset scoped to #docx-root ────────────────────────── */
#docx-root, #docx-root *, #docx-root *::before, #docx-root *::after {
    box-sizing: border-box !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#docx-root { all: initial; display: block; }

/* ── Token System ───────────────────────────────────────────── */
#docx-root {
    /* Accent */
    --dx-accent:          #2563eb;
    --dx-accent-2:        #3b82f6;
    --dx-accent-glow:     rgba(37,99,235,.25);
    --dx-accent-subtle:   rgba(37,99,235,.08);
    --dx-success:         #10b981;
    --dx-warning:         #f59e0b;
    --dx-danger:          #ef4444;

    /* Glass surfaces */
    --dx-glass:           rgba(255,255,255,.72);
    --dx-glass-2:         rgba(255,255,255,.52);
    --dx-glass-dark:      rgba(15,15,20,.75);
    --dx-glass-border:    rgba(255,255,255,.55);
    --dx-glass-border-dk: rgba(255,255,255,.12);

    /* Background */
    --dx-bg:              #f0f2f8;
    --dx-bg-mesh:         radial-gradient(ellipse at 20% 10%, rgba(99,102,241,.12) 0%, transparent 50%),
                          radial-gradient(ellipse at 80% 80%, rgba(37,99,235,.10) 0%, transparent 50%),
                          radial-gradient(ellipse at 60% 30%, rgba(16,185,129,.06) 0%, transparent 50%),
                          #f0f2f8;
    --dx-sidebar-bg:      rgba(255,255,255,.78);
    --dx-surface:         rgba(255,255,255,.82);
    --dx-surface-2:       rgba(255,255,255,.6);
    --dx-border:          rgba(0,0,0,.08);
    --dx-border-strong:   rgba(0,0,0,.13);

    /* Text */
    --dx-text:            #0f172a;
    --dx-text-2:          #475569;
    --dx-text-3:          #94a3b8;

    /* Fonts */
    --dx-font:            'DM Sans', system-ui, sans-serif;
    --dx-font-head:       'Poppins', system-ui, sans-serif;
    --dx-font-mono:       'SF Mono', SFMono-Regular, Menlo, monospace;

    /* Radii */
    --dx-r-sm:   8px;
    --dx-r-md:   12px;
    --dx-r-lg:   16px;
    --dx-r-xl:   22px;
    --dx-r-pill: 100px;

    /* Shadows */
    --dx-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --dx-shadow:    0 4px 20px rgba(0,0,0,.07), 0 1px 6px rgba(0,0,0,.05);
    --dx-shadow-lg: 0 16px 48px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
    --dx-shadow-glow: 0 0 0 3px var(--dx-accent-glow);

    /* Backdrop */
    --dx-blur:    blur(20px) saturate(1.8);
    --dx-blur-sm: blur(12px) saturate(1.5);

    /* Transitions */
    --dx-t:   .18s cubic-bezier(.4,0,.2,1);
    --dx-t-spring: .3s cubic-bezier(.34,1.56,.64,1);

    /* Sidebar width */
    --dx-sb-w: 276px;

    font-family: var(--dx-font);
    color: var(--dx-text);
    line-height: 1.6;
}

/* ── Dark Mode ──────────────────────────────────────────────── */
#docx-root[data-dark="1"] {
    --dx-glass:           rgba(22,22,30,.80);
    --dx-glass-2:         rgba(22,22,30,.60);
    --dx-glass-border:    rgba(255,255,255,.10);
    --dx-glass-border-dk: rgba(255,255,255,.07);
    --dx-bg:              #090c14;
    --dx-bg-mesh:         radial-gradient(ellipse at 20% 10%, rgba(99,102,241,.18) 0%, transparent 50%),
                          radial-gradient(ellipse at 80% 80%, rgba(37,99,235,.14) 0%, transparent 50%),
                          #090c14;
    --dx-sidebar-bg:      rgba(12,14,22,.88);
    --dx-surface:         rgba(20,22,32,.82);
    --dx-surface-2:       rgba(20,22,32,.6);
    --dx-border:          rgba(255,255,255,.08);
    --dx-border-strong:   rgba(255,255,255,.14);
    --dx-text:            #f1f5f9;
    --dx-text-2:          #94a3b8;
    --dx-text-3:          #475569;
    --dx-accent-subtle:   rgba(59,130,246,.14);
}

/* ── Reading Progress ───────────────────────────────────────── */
#docx-progress {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    height: 3px !important; width: 0% !important;
    background: linear-gradient(90deg, var(--dx-accent), var(--dx-success)) !important;
    z-index: 99999 !important;
    transition: width .08s linear !important;
    border-radius: 0 2px 2px 0 !important;
}

/* ── Dark Mode Toggle (floating) ────────────────────────────── */
#docx-dark-btn {
    position: fixed !important;
    bottom: 24px !important; right: 24px !important;
    width: 46px !important; height: 46px !important;
    border-radius: 50% !important;
    background: var(--dx-glass) !important;
    backdrop-filter: var(--dx-blur-sm) !important;
    -webkit-backdrop-filter: var(--dx-blur-sm) !important;
    border: 1px solid var(--dx-glass-border) !important;
    box-shadow: var(--dx-shadow-lg) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important;
    color: var(--dx-text-2) !important;
    font-size: 17px !important;
    z-index: 9000 !important;
    transition: all var(--dx-t-spring) !important;
    outline: none !important;
}
#docx-dark-btn:hover { color: var(--dx-accent) !important; transform: scale(1.1) !important; }

/* ── Skip Link ──────────────────────────────────────────────── */
#docx-skip {
    position: fixed !important; top: -100% !important; left: 16px !important;
    background: var(--dx-accent) !important; color: #fff !important;
    padding: 8px 18px !important; border-radius: var(--dx-r-sm) !important;
    font-size: 14px !important; z-index: 99999 !important; text-decoration: none !important;
    font-family: var(--dx-font) !important;
}
#docx-skip:focus { top: 16px !important; }

/* ── Mobile Header ──────────────────────────────────────────── */
#docx-mobile-hdr {
    display: none;
    position: sticky !important;
    top: 0 !important;
    z-index: 500 !important;
    height: 56px;
    background: var(--dx-glass) !important;
    backdrop-filter: var(--dx-blur) !important;
    -webkit-backdrop-filter: var(--dx-blur) !important;
    border-bottom: 1px solid var(--dx-glass-border) !important;
    padding: 0 16px !important;
    align-items: center;
    justify-content: space-between;
}
.docx-mobile-logo {
    font-family: var(--dx-font-head) !important;
    font-size: 16px !important; font-weight: 700 !important;
    color: var(--dx-text) !important; display: flex !important; align-items: center !important; gap: 8px !important;
}
.docx-mobile-logo i { color: var(--dx-accent) !important; }
#docx-hamburger {
    background: var(--dx-surface) !important;
    border: 1px solid var(--dx-border) !important;
    border-radius: var(--dx-r-sm) !important;
    width: 38px !important; height: 38px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important; color: var(--dx-text-2) !important;
    font-size: 16px !important; transition: all var(--dx-t) !important;
}
#docx-hamburger:hover { background: var(--dx-accent-subtle) !important; color: var(--dx-accent) !important; }

/* ── Sidebar Overlay — FIXED, sits below sidebar ────────────── */
#docx-overlay {
    display: none;
    position: fixed !important;
    inset: 0 !important;
    /* NO backdrop-filter here — that causes the blur issue */
    background: rgba(0,0,0,.45) !important;
    z-index: 498 !important;
    /* Above content, below sidebar */
}
#docx-overlay.docx-vis { display: block !important; }

/* ── Layout ─────────────────────────────────────────────────── */
#docx-layout {
    display: grid !important;
    grid-template-columns: var(--dx-sb-w) 1fr !important;
    grid-template-areas: "sidebar content" !important;
    min-height: 100vh !important;
    background: var(--dx-bg-mesh) !important;
}

/* ── Sidebar ────────────────────────────────────────────────── */
#docx-sidebar {
    grid-area: sidebar !important;
    position: sticky !important; top: 0 !important;
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important; flex-direction: column !important;
    background: var(--dx-sidebar-bg) !important;
    backdrop-filter: var(--dx-blur) !important;
    -webkit-backdrop-filter: var(--dx-blur) !important;
    border-right: 1px solid var(--dx-glass-border) !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--dx-border-strong) transparent !important;
    /* IMPORTANT: isolation prevents blur from leaking to overlay */
    isolation: isolate !important;
    z-index: 499 !important;
}
#docx-sidebar::-webkit-scrollbar { width: 4px !important; }
#docx-sidebar::-webkit-scrollbar-thumb { background: var(--dx-border-strong) !important; border-radius: 4px !important; }

.docx-sb-header {
    padding: 20px 18px 14px !important;
    border-bottom: 1px solid var(--dx-border) !important;
    flex-shrink: 0 !important;
    position: sticky !important; top: 0 !important;
    background: var(--dx-sidebar-bg) !important;
    backdrop-filter: var(--dx-blur) !important;
    -webkit-backdrop-filter: var(--dx-blur) !important;
    z-index: 10 !important;
}
.docx-sb-logo {
    font-family: var(--dx-font-head) !important;
    font-size: 15px !important; font-weight: 700 !important;
    color: var(--dx-text) !important; text-decoration: none !important;
    display: flex !important; align-items: center !important; gap: 8px !important;
    margin-bottom: 14px !important;
    letter-spacing: -.02em !important;
}
.docx-sb-logo i { color: var(--dx-accent) !important; font-size: 16px !important; }

/* Sidebar search */
.docx-sb-search-wrap { position: relative !important; }
.docx-sb-search {
    width: 100% !important;
    padding: 9px 12px 9px 34px !important;
    background: var(--dx-surface-2) !important;
    backdrop-filter: var(--dx-blur-sm) !important;
    -webkit-backdrop-filter: var(--dx-blur-sm) !important;
    border: 1px solid var(--dx-glass-border) !important;
    border-radius: var(--dx-r-md) !important;
    font-family: var(--dx-font) !important;
    font-size: 13.5px !important; color: var(--dx-text) !important;
    transition: all var(--dx-t) !important;
    outline: none !important;
}
.docx-sb-search::placeholder { color: var(--dx-text-3) !important; }
.docx-sb-search:focus { border-color: var(--dx-accent) !important; background: var(--dx-glass) !important; box-shadow: var(--dx-shadow-glow) !important; }
.docx-sb-search-icon { position: absolute !important; left: 11px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--dx-text-3) !important; font-size: 12px !important; pointer-events: none !important; }

/* Nav */
.docx-sb-nav { padding: 10px 10px 24px !important; flex: 1 !important; }
.docx-nav-section { margin-bottom: 22px !important; }
.docx-nav-sec-title {
    font-family: var(--dx-font-head) !important;
    font-size: 10.5px !important; font-weight: 600 !important;
    text-transform: uppercase !important; letter-spacing: .08em !important;
    color: var(--dx-text-3) !important;
    padding: 0 8px 5px !important;
}
.docx-nav-links { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.docx-nav-links li { margin: 1px 0 !important; }
.docx-nav-links li a {
    display: flex !important; align-items: center !important; gap: 9px !important;
    padding: 8px 10px !important; border-radius: var(--dx-r-sm) !important;
    font-size: 13.5px !important; color: var(--dx-text-2) !important;
    text-decoration: none !important; transition: all var(--dx-t) !important;
    font-family: var(--dx-font) !important; font-weight: 400 !important;
    line-height: 1.4 !important;
}
.docx-nav-links li a i { font-size: 11.5px !important; width: 16px !important; text-align: center !important; color: var(--dx-text-3) !important; flex-shrink: 0 !important; }
.docx-nav-links li a:hover { background: var(--dx-accent-subtle) !important; color: var(--dx-text) !important; }
.docx-nav-links li a.docx-active {
    background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(59,130,246,.08)) !important;
    color: var(--dx-accent) !important; font-weight: 500 !important;
    border-left: 2.5px solid var(--dx-accent) !important;
}
.docx-nav-links li a.docx-active i { color: var(--dx-accent) !important; }

/* ── Content Wrap ───────────────────────────────────────────── */
#docx-content {
    grid-area: content !important;
    max-width: 880px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 40px 44px 100px !important;
}

/* ── Breadcrumbs ────────────────────────────────────────────── */
#docx-root .docx-breadcrumbs { margin-bottom: 28px !important; }
#docx-root .docx-breadcrumbs ol { list-style: none !important; display: flex !important; flex-wrap: wrap !important; gap: 0 !important; align-items: center !important; margin: 0 !important; padding: 0 !important; }
#docx-root .docx-breadcrumbs li { display: flex !important; align-items: center !important; font-size: 12.5px !important; color: var(--dx-text-3) !important; }
#docx-root .docx-breadcrumbs li a { color: var(--dx-text-2) !important; text-decoration: none !important; padding: 3px 6px !important; border-radius: 5px !important; transition: all var(--dx-t) !important; }
#docx-root .docx-breadcrumbs li a:hover { background: var(--dx-accent-subtle) !important; color: var(--dx-accent) !important; }
#docx-root .docx-breadcrumbs li + li::before { content: '/' !important; color: var(--dx-border-strong) !important; margin: 0 2px !important; }
#docx-root .docx-breadcrumbs li:last-child { color: var(--dx-text-2) !important; font-weight: 500 !important; }

/* ── Article Header ─────────────────────────────────────────── */
#docx-root .docx-art-header { margin-bottom: 36px !important; }
#docx-root .docx-badges { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; margin-bottom: 16px !important; }
#docx-root .docx-badge {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    padding: 4px 12px !important; border-radius: var(--dx-r-pill) !important;
    font-size: 11px !important; font-weight: 600 !important;
    font-family: var(--dx-font-head) !important; letter-spacing: .01em !important;
}
#docx-root .docx-badge-version { background: rgba(37,99,235,.12) !important; color: var(--dx-accent) !important; }
#docx-root .docx-badge-beginner { background: rgba(16,185,129,.12) !important; color: #059669 !important; }
#docx-root .docx-badge-intermediate { background: rgba(245,158,11,.12) !important; color: #d97706 !important; }
#docx-root .docx-badge-advanced { background: rgba(239,68,68,.12) !important; color: #dc2626 !important; }
#docx-root .docx-badge-featured { background: linear-gradient(135deg,#f97316,#fb923c) !important; color: #fff !important; }

#docx-root .docx-art-title {
    font-family: var(--dx-font-head) !important;
    font-size: clamp(24px, 4vw, 34px) !important;
    font-weight: 700 !important; line-height: 1.15 !important;
    color: var(--dx-text) !important; margin: 0 0 20px !important;
    letter-spacing: -.03em !important;
}

#docx-root .docx-art-meta {
    display: flex !important; flex-wrap: wrap !important; gap: 14px !important; align-items: center !important;
    font-size: 13px !important; color: var(--dx-text-2) !important;
    padding-bottom: 24px !important; border-bottom: 1px solid var(--dx-border) !important;
}
#docx-root .docx-meta-item { display: flex !important; align-items: center !important; gap: 5px !important; }
#docx-root .docx-meta-item i { color: var(--dx-text-3) !important; font-size: 11px !important; }

#docx-root .docx-art-actions { display: flex !important; gap: 8px !important; margin-left: auto !important; }
#docx-root .docx-act-btn {
    display: flex !important; align-items: center !important; gap: 5px !important;
    padding: 6px 14px !important; border-radius: var(--dx-r-md) !important;
    background: var(--dx-glass) !important;
    backdrop-filter: var(--dx-blur-sm) !important;
    -webkit-backdrop-filter: var(--dx-blur-sm) !important;
    border: 1px solid var(--dx-glass-border) !important;
    color: var(--dx-text-2) !important; font-size: 12.5px !important;
    cursor: pointer !important; text-decoration: none !important;
    transition: all var(--dx-t) !important;
    font-family: var(--dx-font) !important; white-space: nowrap !important;
    box-shadow: var(--dx-shadow-sm) !important;
}
#docx-root .docx-act-btn:hover { border-color: var(--dx-accent) !important; color: var(--dx-accent) !important; background: var(--dx-accent-subtle) !important; }

/* ── TOC ────────────────────────────────────────────────────── */
#docx-root .docx-toc-block {
    background: var(--dx-glass) !important;
    backdrop-filter: var(--dx-blur-sm) !important;
    -webkit-backdrop-filter: var(--dx-blur-sm) !important;
    border: 1px solid var(--dx-glass-border) !important;
    border-radius: var(--dx-r-lg) !important;
    padding: 18px 22px !important; margin: 0 0 32px !important;
    box-shadow: var(--dx-shadow-sm) !important;
}
#docx-root .docx-toc-hd { font-family: var(--dx-font-head) !important; font-size: 11.5px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .07em !important; color: var(--dx-text-2) !important; margin: 0 0 12px !important; display: flex !important; align-items: center !important; gap: 7px !important; }
#docx-root .docx-toc-hd i { color: var(--dx-accent) !important; }
#docx-root .docx-toc-block ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
#docx-root .docx-toc-block li { margin: 2px 0 !important; }
#docx-root .docx-toc-block a { font-size: 13.5px !important; color: var(--dx-text-2) !important; text-decoration: none !important; display: block !important; padding: 3px 4px !important; border-radius: 5px !important; transition: all var(--dx-t) !important; }
#docx-root .docx-toc-block a:hover { color: var(--dx-accent) !important; background: var(--dx-accent-subtle) !important; }
#docx-root .docx-toc-block a.docx-toc-active { color: var(--dx-accent) !important; font-weight: 600 !important; }
#docx-root .docx-ts { padding-left: 16px !important; }

/* ── Article Body ───────────────────────────────────────────── */
#docx-root .docx-art-body { font-size: 15.5px !important; line-height: 1.8 !important; color: var(--dx-text) !important; }
#docx-root .docx-art-body h2 { font-family: var(--dx-font-head) !important; font-size: 22px !important; font-weight: 700 !important; margin: 44px 0 16px !important; color: var(--dx-text) !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--dx-border) !important; letter-spacing: -.02em !important; }
#docx-root .docx-art-body h3 { font-family: var(--dx-font-head) !important; font-size: 17px !important; font-weight: 600 !important; margin: 32px 0 12px !important; color: var(--dx-text) !important; }
#docx-root .docx-art-body h4 { font-family: var(--dx-font-head) !important; font-size: 15px !important; font-weight: 600 !important; margin: 24px 0 8px !important; }
#docx-root .docx-art-body p { margin: 0 0 18px !important; }
#docx-root .docx-art-body a { color: var(--dx-accent) !important; text-decoration: underline !important; text-underline-offset: 2px !important; }
#docx-root .docx-art-body ul, #docx-root .docx-art-body ol { margin: 0 0 18px !important; padding-left: 22px !important; }
#docx-root .docx-art-body li { margin-bottom: 6px !important; }
#docx-root .docx-art-body img { max-width: 100% !important; border-radius: var(--dx-r-lg) !important; box-shadow: var(--dx-shadow) !important; }
#docx-root .docx-art-body blockquote { border-left: 3px solid var(--dx-accent) !important; margin: 24px 0 !important; padding: 14px 20px !important; background: var(--dx-accent-subtle) !important; border-radius: 0 var(--dx-r-md) var(--dx-r-md) 0 !important; font-style: italic !important; color: var(--dx-text-2) !important; }
#docx-root .docx-art-body table { width: 100% !important; border-collapse: collapse !important; margin: 24px 0 !important; font-size: 14px !important; }
#docx-root .docx-art-body th { background: var(--dx-surface) !important; font-family: var(--dx-font-head) !important; font-weight: 600 !important; text-align: left !important; padding: 11px 16px !important; border-bottom: 1px solid var(--dx-border-strong) !important; font-size: 13px !important; }
#docx-root .docx-art-body td { padding: 11px 16px !important; border-bottom: 1px solid var(--dx-border) !important; }
#docx-root .docx-art-body tr:last-child td { border-bottom: none !important; }
#docx-root .docx-art-body code { font-family: var(--dx-font-mono) !important; font-size: .86em !important; background: var(--dx-surface) !important; border: 1px solid var(--dx-border) !important; padding: 2px 7px !important; border-radius: 5px !important; }
#docx-root .docx-art-body pre { background: #0d1117 !important; border-radius: var(--dx-r-lg) !important; padding: 22px !important; overflow-x: auto !important; margin: 24px 0 !important; }
#docx-root .docx-art-body pre code { background: none !important; border: none !important; color: #e6edf3 !important; padding: 0 !important; font-size: 13.5px !important; line-height: 1.65 !important; }

/* ── Code Block Shortcode ───────────────────────────────────── */
#docx-root .docx-code-block { background: #0d1117 !important; border-radius: var(--dx-r-lg) !important; margin: 24px 0 !important; overflow: hidden !important; box-shadow: var(--dx-shadow) !important; }
#docx-root .docx-code-hdr { display: flex !important; align-items: center !important; padding: 10px 16px !important; background: rgba(255,255,255,.04) !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; }
#docx-root .docx-code-title { font-size: 12px !important; color: #8b949e !important; font-family: var(--dx-font-mono) !important; flex: 1 !important; }
#docx-root .docx-code-lang { font-size: 10.5px !important; color: var(--dx-accent-2) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .06em !important; }
#docx-root .docx-copy-btn { background: none !important; border: none !important; color: #8b949e !important; cursor: pointer !important; padding: 4px 8px !important; border-radius: 5px !important; font-size: 13px !important; transition: all var(--dx-t) !important; margin-left: 8px !important; }
#docx-root .docx-copy-btn:hover { color: #e6edf3 !important; background: rgba(255,255,255,.08) !important; }
#docx-root .docx-copy-btn.dx-copied { color: var(--dx-success) !important; }
#docx-root .docx-code-block pre { margin: 0 !important; padding: 20px 22px !important; background: none !important; }
#docx-root .docx-code-block code { color: #e6edf3 !important; font-family: var(--dx-font-mono) !important; font-size: 13.5px !important; line-height: 1.65 !important; background: none !important; border: none !important; }

/* ── Callouts ───────────────────────────────────────────────── */
#docx-root .docx-callout { display: flex !important; gap: 14px !important; padding: 16px 18px !important; border-radius: var(--dx-r-lg) !important; margin: 20px 0 !important; border: 1px solid !important; }
#docx-root .docx-c-icon { font-size: 17px !important; flex-shrink: 0 !important; margin-top: 1px !important; }
#docx-root .docx-c-body strong { display: block !important; font-family: var(--dx-font-head) !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .05em !important; margin-bottom: 5px !important; }
#docx-root .docx-c-body div { font-size: 14.5px !important; line-height: 1.65 !important; }
#docx-root .docx-c-note    { background: rgba(59,130,246,.08) !important; border-color: rgba(59,130,246,.2) !important; } #docx-root .docx-c-note .docx-c-icon { color: #3b82f6 !important; } #docx-root .docx-c-note .docx-c-body strong { color: #1d4ed8 !important; }
#docx-root .docx-c-warning { background: rgba(245,158,11,.08) !important; border-color: rgba(245,158,11,.2) !important; } #docx-root .docx-c-warning .docx-c-icon { color: var(--dx-warning) !important; } #docx-root .docx-c-warning .docx-c-body strong { color: #b45309 !important; }
#docx-root .docx-c-tip     { background: rgba(16,185,129,.08) !important; border-color: rgba(16,185,129,.2) !important; } #docx-root .docx-c-tip .docx-c-icon { color: var(--dx-success) !important; } #docx-root .docx-c-tip .docx-c-body strong { color: #047857 !important; }
#docx-root .docx-c-danger  { background: rgba(239,68,68,.08) !important; border-color: rgba(239,68,68,.2) !important; } #docx-root .docx-c-danger .docx-c-icon { color: var(--dx-danger) !important; } #docx-root .docx-c-danger .docx-c-body strong { color: #b91c1c !important; }

/* ── Steps ──────────────────────────────────────────────────── */
#docx-root .docx-steps { list-style: none !important; padding: 0 !important; margin: 24px 0 !important; }
#docx-root .docx-step { display: flex !important; gap: 16px !important; padding: 0 0 24px !important; position: relative !important; }
#docx-root .docx-step::after { content: '' !important; position: absolute !important; left: 16px !important; top: 34px !important; bottom: 0 !important; width: 1px !important; background: var(--dx-border-strong) !important; }
#docx-root .docx-step:last-child::after { display: none !important; }
#docx-root .docx-step:last-child { padding-bottom: 0 !important; }
#docx-root .docx-step-n { width: 33px !important; height: 33px !important; border-radius: 50% !important; background: var(--dx-accent) !important; color: #fff !important; font-family: var(--dx-font-head) !important; font-size: 13px !important; font-weight: 700 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; box-shadow: 0 0 0 4px var(--dx-accent-glow) !important; }
#docx-root .docx-step-b { padding-top: 5px !important; font-size: 15px !important; line-height: 1.7 !important; flex: 1 !important; }

/* ── FAQ ────────────────────────────────────────────────────── */
#docx-root .docx-faq { margin: 24px 0 !important; border-radius: var(--dx-r-xl) !important; overflow: hidden !important; border: 1px solid var(--dx-glass-border) !important; background: var(--dx-glass) !important; backdrop-filter: var(--dx-blur-sm) !important; -webkit-backdrop-filter: var(--dx-blur-sm) !important; }
#docx-root .docx-faq-item { border-bottom: 1px solid var(--dx-border) !important; }
#docx-root .docx-faq-item:last-child { border-bottom: none !important; }
#docx-root .docx-faq-q { width: 100% !important; display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 16px 20px !important; background: none !important; border: none !important; cursor: pointer !important; font-family: var(--dx-font) !important; font-size: 15px !important; font-weight: 500 !important; color: var(--dx-text) !important; text-align: left !important; gap: 12px !important; transition: all var(--dx-t) !important; }
#docx-root .docx-faq-q:hover { background: var(--dx-accent-subtle) !important; }
#docx-root .docx-faq-q[aria-expanded="true"] { color: var(--dx-accent) !important; background: var(--dx-accent-subtle) !important; }
#docx-root .docx-faq-icon { font-size: 12px !important; flex-shrink: 0 !important; transition: transform .25s ease !important; }
#docx-root .docx-faq-q[aria-expanded="true"] .docx-faq-icon { transform: rotate(180deg) !important; }
#docx-root .docx-faq-a { padding: 0 20px !important; max-height: 0 !important; overflow: hidden !important; transition: max-height .3s ease, padding .3s !important; font-size: 14.5px !important; line-height: 1.7 !important; color: var(--dx-text-2) !important; }
#docx-root .docx-faq-a.docx-open { padding: 14px 20px 18px !important; max-height: 2000px !important; }

/* ── Doc List Shortcode ─────────────────────────────────────── */
#docx-root .docx-doc-list { list-style: none !important; padding: 0 !important; margin: 16px 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
#docx-root .docx-doc-list li a { display: flex !important; align-items: center !important; gap: 10px !important; padding: 11px 14px !important; border-radius: var(--dx-r-md) !important; background: var(--dx-glass) !important; backdrop-filter: var(--dx-blur-sm) !important; -webkit-backdrop-filter: var(--dx-blur-sm) !important; border: 1px solid var(--dx-glass-border) !important; color: var(--dx-text) !important; text-decoration: none !important; transition: all var(--dx-t) !important; box-shadow: var(--dx-shadow-sm) !important; }
#docx-root .docx-doc-list li a:hover { border-color: var(--dx-accent) !important; transform: translateX(4px) !important; background: var(--dx-accent-subtle) !important; }
#docx-root .docx-doc-list li a i { color: var(--dx-text-3) !important; font-size: 13px !important; flex-shrink: 0 !important; }
#docx-root .docx-dl-title { flex: 1 !important; font-size: 14px !important; }
#docx-root .docx-dl-rt { font-size: 11px !important; color: var(--dx-text-3) !important; white-space: nowrap !important; }

/* ── Changelog ──────────────────────────────────────────────── */
#docx-root .docx-changelog { background: var(--dx-glass) !important; backdrop-filter: var(--dx-blur-sm) !important; -webkit-backdrop-filter: var(--dx-blur-sm) !important; border: 1px solid var(--dx-glass-border) !important; border-radius: var(--dx-r-lg) !important; padding: 20px 22px !important; margin: 32px 0 !important; box-shadow: var(--dx-shadow-sm) !important; }
#docx-root .docx-changelog-title { font-family: var(--dx-font-head) !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .07em !important; color: var(--dx-text-2) !important; margin: 0 0 14px !important; display: flex !important; align-items: center !important; gap: 7px !important; }
#docx-root .docx-changelog-title i { color: var(--dx-accent) !important; }
#docx-root .docx-cl-item { display: flex !important; gap: 10px !important; align-items: baseline !important; padding: 8px 0 !important; border-bottom: 1px solid var(--dx-border) !important; font-size: 13px !important; }
#docx-root .docx-cl-item:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
#docx-root .docx-cl-ver { background: var(--dx-accent) !important; color: #fff !important; font-size: 10px !important; font-weight: 700 !important; padding: 2px 8px !important; border-radius: 10px !important; white-space: nowrap !important; flex-shrink: 0 !important; font-family: var(--dx-font-head) !important; }
#docx-root .docx-cl-sum { flex: 1 !important; color: var(--dx-text-2) !important; }
#docx-root .docx-cl-date { font-size: 11px !important; color: var(--dx-text-3) !important; white-space: nowrap !important; }

/* ── Reactions ──────────────────────────────────────────────── */
#docx-root .docx-reactions { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; padding: 18px 0 !important; border-top: 1px solid var(--dx-border) !important; margin: 16px 0 !important; }
#docx-root .docx-reactions-label { font-size: 12px !important; color: var(--dx-text-3) !important; font-family: var(--dx-font-head) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .05em !important; }
#docx-root .docx-reaction-btns { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
#docx-root .docx-reaction-btn { display: flex !important; align-items: center !important; gap: 5px !important; padding: 6px 14px !important; border-radius: var(--dx-r-pill) !important; border: 1px solid var(--dx-glass-border) !important; background: var(--dx-glass) !important; backdrop-filter: var(--dx-blur-sm) !important; -webkit-backdrop-filter: var(--dx-blur-sm) !important; cursor: pointer !important; transition: all var(--dx-t-spring) !important; font-family: var(--dx-font) !important; }
#docx-root .docx-reaction-btn:hover { border-color: var(--dx-accent) !important; transform: scale(1.1) !important; background: var(--dx-accent-subtle) !important; }
#docx-root .docx-reaction-btn.dx-reacted { background: var(--dx-accent-subtle) !important; border-color: var(--dx-accent) !important; box-shadow: var(--dx-shadow-glow) !important; }
#docx-root .docx-r-emoji { font-size: 17px !important; }
#docx-root .docx-r-count { font-size: 12px !important; color: var(--dx-text-2) !important; }

/* ── Feedback ───────────────────────────────────────────────── */
#docx-root .docx-feedback { margin: 40px 0 0 !important; padding: 26px !important; border-radius: var(--dx-r-xl) !important; background: var(--dx-glass) !important; backdrop-filter: var(--dx-blur-sm) !important; -webkit-backdrop-filter: var(--dx-blur-sm) !important; border: 1px solid var(--dx-glass-border) !important; box-shadow: var(--dx-shadow) !important; }
#docx-root .docx-fb-heading { font-family: var(--dx-font-head) !important; font-size: 15px !important; font-weight: 600 !important; color: var(--dx-text) !important; margin: 0 0 16px !important; display: flex !important; align-items: center !important; gap: 8px !important; }
#docx-root .docx-fb-heading i { color: var(--dx-accent) !important; }
#docx-root .docx-fb-btns { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; }
#docx-root .docx-fb-btn { display: flex !important; align-items: center !important; gap: 8px !important; padding: 11px 22px !important; border-radius: var(--dx-r-pill) !important; border: 1px solid var(--dx-border-strong) !important; background: var(--dx-surface) !important; cursor: pointer !important; font-size: 14px !important; font-family: var(--dx-font) !important; font-weight: 500 !important; color: var(--dx-text-2) !important; transition: all var(--dx-t-spring) !important; }
#docx-root .docx-fb-btn:hover { transform: scale(1.03) !important; }
#docx-root .docx-fb-yes:hover, #docx-root .docx-fb-yes.dx-sel { border-color: var(--dx-success) !important; color: #059669 !important; background: rgba(16,185,129,.1) !important; }
#docx-root .docx-fb-no:hover, #docx-root .docx-fb-no.dx-sel  { border-color: var(--dx-danger) !important; color: #dc2626 !important; background: rgba(239,68,68,.1) !important; }
#docx-root .docx-fb-count { font-size: 11px !important; opacity: .7 !important; }
#docx-root .docx-feedback-comment-wrap { margin-top: 18px !important; }
#docx-root .docx-fb-comment-label { font-size: 13.5px !important; color: var(--dx-text-2) !important; margin: 0 0 8px !important; }
#docx-root .docx-fb-textarea { width: 100% !important; padding: 12px 14px !important; border: 1px solid var(--dx-border-strong) !important; border-radius: var(--dx-r-md) !important; font-size: 14px !important; font-family: var(--dx-font) !important; color: var(--dx-text) !important; background: var(--dx-surface) !important; resize: vertical !important; transition: border-color var(--dx-t) !important; outline: none !important; }
#docx-root .docx-fb-textarea:focus { border-color: var(--dx-accent) !important; box-shadow: var(--dx-shadow-glow) !important; }
#docx-root .docx-fb-actions { display: flex !important; gap: 10px !important; margin-top: 10px !important; }
#docx-root .docx-fb-submit { padding: 9px 22px !important; border-radius: var(--dx-r-pill) !important; background: var(--dx-accent) !important; color: #fff !important; border: none !important; font-size: 14px !important; font-weight: 600 !important; font-family: var(--dx-font-head) !important; cursor: pointer !important; transition: all var(--dx-t) !important; }
#docx-root .docx-fb-submit:hover { background: var(--dx-accent-2) !important; transform: scale(1.02) !important; }
#docx-root .docx-fb-skip { background: none !important; border: none !important; color: var(--dx-text-3) !important; font-size: 13px !important; cursor: pointer !important; padding: 9px 8px !important; font-family: var(--dx-font) !important; }
#docx-root .docx-feedback-thanks { text-align: center !important; padding: 8px 0 !important; }
#docx-root .docx-feedback-thanks i { font-size: 30px !important; color: var(--dx-success) !important; display: block !important; margin-bottom: 8px !important; }
#docx-root .docx-feedback-thanks p { color: var(--dx-text-2) !important; font-size: 14px !important; margin: 0 !important; }

/* ── Post Nav ───────────────────────────────────────────────── */
#docx-root .docx-post-nav { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; margin-top: 52px !important; padding-top: 32px !important; border-top: 1px solid var(--dx-border) !important; }
#docx-root .docx-nav-card { display: flex !important; flex-direction: column !important; gap: 5px !important; padding: 16px 18px !important; border-radius: var(--dx-r-lg) !important; border: 1px solid var(--dx-glass-border) !important; background: var(--dx-glass) !important; backdrop-filter: var(--dx-blur-sm) !important; -webkit-backdrop-filter: var(--dx-blur-sm) !important; text-decoration: none !important; transition: all var(--dx-t) !important; box-shadow: var(--dx-shadow-sm) !important; }
#docx-root .docx-nav-card:hover { border-color: var(--dx-accent) !important; box-shadow: var(--dx-shadow) !important; transform: translateY(-2px) !important; }
#docx-root .docx-nav-card.dx-prev { align-items: flex-start !important; }
#docx-root .docx-nav-card.dx-next { align-items: flex-end !important; text-align: right !important; }
#docx-root .docx-nav-dir { font-size: 11px !important; font-family: var(--dx-font-head) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: var(--dx-text-3) !important; display: flex !important; align-items: center !important; gap: 4px !important; }
#docx-root .docx-nav-ttl { font-size: 14px !important; font-weight: 500 !important; color: var(--dx-text) !important; }

/* ── Archive ────────────────────────────────────────────────── */
#docx-archive {
    max-width: 1160px !important; margin: 0 auto !important; padding: 56px 28px 100px !important;
    font-family: var(--dx-font) !important;
    color: var(--dx-text) !important;
    min-height: 100vh !important;
    background: var(--dx-bg-mesh) !important;
}
#docx-archive .docx-arch-hero { text-align: center !important; margin-bottom: 52px !important; }
#docx-archive .docx-arch-hero h1 { font-family: var(--dx-font-head) !important; font-size: clamp(30px,6vw,52px) !important; font-weight: 800 !important; color: var(--dx-text) !important; margin: 0 0 12px !important; letter-spacing: -.04em !important; }
#docx-archive .docx-arch-hero p { font-size: 17px !important; color: var(--dx-text-2) !important; margin: 0 auto 36px !important; max-width: 520px !important; }

/* Hero search */
#docx-archive .docx-hero-search { max-width: 600px !important; margin: 0 auto !important; position: relative !important; }
#docx-archive .docx-hero-search input { width: 100% !important; padding: 16px 20px 16px 52px !important; background: var(--dx-glass) !important; backdrop-filter: var(--dx-blur) !important; -webkit-backdrop-filter: var(--dx-blur) !important; border: 1px solid var(--dx-glass-border) !important; border-radius: var(--dx-r-pill) !important; font-family: var(--dx-font) !important; font-size: 15.5px !important; color: var(--dx-text) !important; box-shadow: var(--dx-shadow-lg) !important; outline: none !important; transition: all var(--dx-t) !important; }
#docx-archive .docx-hero-search input::placeholder { color: var(--dx-text-3) !important; }
#docx-archive .docx-hero-search input:focus { border-color: var(--dx-accent) !important; box-shadow: var(--dx-shadow-lg), var(--dx-shadow-glow) !important; }
#docx-archive .docx-hero-search i { position: absolute !important; left: 20px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--dx-text-3) !important; font-size: 16px !important; pointer-events: none !important; }
#docx-archive .docx-search-results-drop { margin-top: 10px !important; background: var(--dx-glass) !important; backdrop-filter: var(--dx-blur) !important; -webkit-backdrop-filter: var(--dx-blur) !important; border: 1px solid var(--dx-glass-border) !important; border-radius: var(--dx-r-xl) !important; box-shadow: var(--dx-shadow-lg) !important; overflow: hidden !important; }

/* Search result item */
.docx-sr-item { display: flex !important; align-items: flex-start !important; gap: 12px !important; padding: 14px 18px !important; border-bottom: 1px solid var(--dx-border) !important; text-decoration: none !important; color: var(--dx-text) !important; transition: background var(--dx-t) !important; }
.docx-sr-item:last-child { border-bottom: none !important; }
.docx-sr-item:hover { background: var(--dx-accent-subtle) !important; }
.docx-sr-icon { width: 36px !important; height: 36px !important; border-radius: 10px !important; background: var(--dx-accent-subtle) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--dx-accent) !important; font-size: 14px !important; flex-shrink: 0 !important; }
.docx-sr-cat { font-size: 10.5px !important; font-family: var(--dx-font-head) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: var(--dx-accent) !important; margin-bottom: 2px !important; }
.docx-sr-title { font-size: 14px !important; font-weight: 500 !important; margin-bottom: 3px !important; }
.docx-sr-excerpt { font-size: 12.5px !important; color: var(--dx-text-2) !important; }
.docx-sr-meta { font-size: 11px !important; color: var(--dx-text-3) !important; white-space: nowrap !important; flex-shrink: 0 !important; }

/* Featured cards */
#docx-archive .docx-featured-row { display: grid !important; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)) !important; gap: 16px !important; margin-bottom: 52px !important; }
#docx-archive .docx-feat-card { border-radius: var(--dx-r-xl) !important; padding: 26px !important; text-decoration: none !important; display: flex !important; flex-direction: column !important; gap: 10px !important; transition: all var(--dx-t-spring) !important; box-shadow: var(--dx-shadow) !important; background: linear-gradient(135deg, var(--dx-accent), #6366f1) !important; }
#docx-archive .docx-feat-card:hover { transform: translateY(-4px) scale(1.015) !important; box-shadow: var(--dx-shadow-lg) !important; }
#docx-archive .docx-feat-card i { font-size: 26px !important; color: rgba(255,255,255,.85) !important; }
#docx-archive .docx-feat-card h3 { font-family: var(--dx-font-head) !important; font-size: 17px !important; font-weight: 700 !important; color: #fff !important; margin: 0 !important; line-height: 1.25 !important; }
#docx-archive .docx-feat-card p { font-size: 13px !important; color: rgba(255,255,255,.78) !important; margin: 0 !important; line-height: 1.5 !important; }

/* Category sections */
#docx-archive .docx-cat-sec { margin-bottom: 44px !important; }
#docx-archive .docx-cat-hdr { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 14px !important; padding-bottom: 12px !important; border-bottom: 1px solid var(--dx-border) !important; }
#docx-archive .docx-cat-hdr h2 { font-family: var(--dx-font-head) !important; font-size: 18px !important; font-weight: 700 !important; color: var(--dx-text) !important; margin: 0 !important; flex: 1 !important; letter-spacing: -.02em !important; }
#docx-archive .docx-cat-hdr i { color: var(--dx-accent) !important; font-size: 16px !important; }
#docx-archive .docx-cat-count { font-size: 12px !important; color: var(--dx-text-3) !important; font-family: var(--dx-font-head) !important; font-weight: 500 !important; }
#docx-archive .docx-cat-grid { display: grid !important; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)) !important; gap: 9px !important; }
#docx-archive .docx-art-card { display: flex !important; align-items: center !important; gap: 10px !important; padding: 12px 16px !important; border-radius: var(--dx-r-lg) !important; background: var(--dx-glass) !important; backdrop-filter: var(--dx-blur-sm) !important; -webkit-backdrop-filter: var(--dx-blur-sm) !important; border: 1px solid var(--dx-glass-border) !important; text-decoration: none !important; color: var(--dx-text) !important; transition: all var(--dx-t) !important; box-shadow: var(--dx-shadow-sm) !important; }
#docx-archive .docx-art-card:hover { border-color: var(--dx-accent) !important; background: var(--dx-accent-subtle) !important; transform: translateX(4px) !important; box-shadow: var(--dx-shadow) !important; }
#docx-archive .docx-art-card i { color: var(--dx-text-3) !important; font-size: 13px !important; flex-shrink: 0 !important; }
#docx-archive .docx-art-card span { font-size: 13.5px !important; font-weight: 500 !important; flex: 1 !important; line-height: 1.4 !important; }
#docx-archive .docx-art-rt { font-size: 11px !important; color: var(--dx-text-3) !important; white-space: nowrap !important; flex-shrink: 0 !important; }

/* ── Stale warning ──────────────────────────────────────────── */
#docx-root .docx-stale { display: flex !important; gap: 12px !important; padding: 14px 16px !important; background: rgba(245,158,11,.09) !important; border: 1px solid rgba(245,158,11,.22) !important; border-radius: var(--dx-r-md) !important; margin-bottom: 24px !important; font-size: 13.5px !important; color: var(--dx-text-2) !important; }
#docx-root .docx-stale i { color: var(--dx-warning) !important; flex-shrink: 0 !important; margin-top: 2px !important; }

/* ── Attribution Footer ─────────────────────────────────────── */
#docx-root .docx-attribution, #docx-archive .docx-attribution { text-align: center !important; margin-top: 60px !important; padding-top: 24px !important; border-top: 1px solid var(--dx-border) !important; font-size: 12px !important; color: var(--dx-text-3) !important; font-family: var(--dx-font) !important; }
#docx-root .docx-attribution a, #docx-archive .docx-attribution a { color: var(--dx-accent) !important; text-decoration: none !important; }

/* ══════════════ RESPONSIVE ══════════════ */

/* Tablet */
@media (max-width: 1060px) {
    #docx-layout { grid-template-columns: 240px 1fr !important; }
    #docx-root { --dx-sb-w: 240px; }
    #docx-content { padding: 32px 28px 80px !important; }
}

/* Mobile — critical fixes */
@media (max-width: 768px) {
    /* Kill the grid, full width */
    #docx-layout { grid-template-columns: 1fr !important; grid-template-areas: "content" !important; }

    /* Sidebar: slide in from left, z-index ABOVE overlay */
    #docx-sidebar {
        position: fixed !important;
        left: -105% !important; top: 0 !important; bottom: 0 !important;
        width: 300px !important; max-width: 85vw !important;
        height: 100vh !important;
        z-index: 600 !important;  /* above overlay (498) and header (500) */
        transition: left .3s cubic-bezier(.4,0,.2,1) !important;
        box-shadow: none !important;
        /* isolation prevents backdrop-filter from creating stacking context
           that would make the overlay appear on top */
    }
    #docx-sidebar.docx-sb-open {
        left: 0 !important;
        box-shadow: var(--dx-shadow-lg) !important;
    }

    /* Overlay: fixed, below sidebar, above content */
    #docx-overlay {
        z-index: 599 !important;
    }

    /* Show mobile header */
    #docx-mobile-hdr { display: flex !important; }

    /* Ensure dark toggle doesn't overlap content */
    #docx-dark-btn { bottom: 16px !important; right: 16px !important; width: 42px !important; height: 42px !important; }

    #docx-content { padding: 20px 16px 60px !important; }
    #docx-root .docx-art-actions { display: none !important; }
    #docx-root .docx-post-nav { grid-template-columns: 1fr !important; }
    #docx-archive { padding: 32px 16px 60px !important; }
    #docx-archive .docx-featured-row { grid-template-columns: 1fr !important; }
    #docx-archive .docx-cat-grid { grid-template-columns: 1fr !important; }
    #docx-root .docx-fb-btns { flex-direction: column !important; }
}

/* Small phones */
@media (max-width: 420px) {
    #docx-root .docx-art-title { font-size: 22px !important; }
    #docx-archive .docx-arch-hero h1 { font-size: 28px !important; }
    #docx-root .docx-reactions { flex-direction: column !important; align-items: flex-start !important; }
}