/* docX 3.2 — Fecomas Tech Solutions */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');

:root {
    --docx-accent:   #2563eb;
    --docx-accent-dim: rgba(37,99,235,.1);
    --docx-bg:       #f3f6fb;
    --docx-sidebar:  #ffffff;
    --docx-surface:  #ffffff;
    --docx-border:   rgba(0,0,0,.09);
    --docx-text:     #0f172a;
    --docx-text2:    #475569;
    --docx-text3:    #94a3b8;
    --docx-font:     'DM Sans', system-ui, sans-serif;
    --docx-head:     'Poppins', system-ui, sans-serif;
    --docx-mono:     'SF Mono', Menlo, monospace;
    --docx-sb-w:     272px;
    --docx-r:        10px;
    --docx-t:        .16s ease;
}

/* Dark mode */
#docx-wrap[data-dark="1"] {
    --docx-bg:      #0b0f1c;
    --docx-sidebar: #0d1120;
    --docx-surface: #141929;
    --docx-border:  rgba(255,255,255,.1);
    --docx-text:    #f0f4ff;
    --docx-text2:   #94a3b8;
    --docx-text3:   #475569;
    --docx-accent-dim: rgba(37,99,235,.18);
}

/* ── Reset (scoped) ──────────────────────────── */
#docx-wrap *, #docx-wrap *::before, #docx-wrap *::after,
#docx-archive-page *, #docx-archive-page *::before, #docx-archive-page *::after {
    box-sizing: border-box !important;
}

/* ── Floating UI ─────────────────────────────── */
#docx-progress {
    position: fixed !important; top: 0 !important; left: 0 !important;
    width: 0 !important; height: 3px !important;
    background: linear-gradient(90deg, var(--docx-accent), #06b6d4) !important;
    z-index: 9999 !important; transition: width .1s linear !important;
}

#docx-dark-toggle {
    position: fixed !important; bottom: 20px !important; right: 20px !important;
    width: 42px !important; height: 42px !important; border-radius: 50% !important;
    background: var(--docx-surface) !important;
    border: 1px solid var(--docx-border) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important; color: var(--docx-text2) !important;
    font-size: 16px !important; z-index: 8000 !important;
    transition: all var(--docx-t) !important; outline: none !important;
    font-family: inherit !important;
}
#docx-dark-toggle:hover { color: var(--docx-accent) !important; transform: scale(1.1) !important; }

/* Mobile top bar */
#docx-top-bar {
    position: sticky !important; top: 0 !important; left: 0 !important; right: 0 !important;
    height: 52px !important; background: var(--docx-sidebar) !important;
    border-bottom: 1px solid var(--docx-border) !important;
    padding: 0 16px !important; align-items: center !important;
    justify-content: space-between !important; z-index: 500 !important;
}
.docx-topbar-logo {
    font-family: var(--docx-head) !important; font-size: 15px !important;
    font-weight: 700 !important; color: var(--docx-text) !important;
    text-decoration: none !important; display: flex !important;
    align-items: center !important; gap: 7px !important;
}
.docx-topbar-logo i { color: var(--docx-accent) !important; }
#docx-menu-open {
    width: 36px !important; height: 36px !important; border-radius: 7px !important;
    background: none !important; border: 1px solid var(--docx-border) !important;
    cursor: pointer !important; color: var(--docx-text2) !important;
    font-size: 16px !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
    outline: none !important;
}

#docx-overlay {
    display: none !important; position: fixed !important; inset: 0 !important;
    background: rgba(0,0,0,.5) !important; z-index: 499 !important;
}
#docx-overlay.open { display: block !important; }

/* ── Layout (W3Schools style) ────────────────── */
#docx-wrap {
    display: flex !important;
    min-height: 100vh !important;
    background: var(--docx-bg) !important;
    font-family: var(--docx-font) !important;
    color: var(--docx-text) !important;
}

/* Sidebar */
#docx-sidebar {
    width: var(--docx-sb-w) !important;
    min-width: var(--docx-sb-w) !important;
    flex-shrink: 0 !important;
    position: sticky !important; top: 0 !important;
    height: 100vh !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    background: var(--docx-sidebar) !important;
    border-right: 1px solid var(--docx-border) !important;
    display: flex !important; flex-direction: column !important;
    isolation: isolate !important; z-index: 100 !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--docx-border) transparent !important;
}
#docx-sidebar::-webkit-scrollbar { width: 4px !important; }
#docx-sidebar::-webkit-scrollbar-thumb { background: var(--docx-border) !important; border-radius: 4px !important; }

.docx-sb-inner { display: flex !important; flex-direction: column !important; min-height: 100% !important; }

.docx-sb-logo-wrap {
    padding: 18px 16px 12px !important;
    border-bottom: 1px solid var(--docx-border) !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
}
.docx-sb-logo {
    display: flex !important; align-items: center !important; gap: 8px !important;
    font-family: var(--docx-head) !important; font-size: 15px !important; font-weight: 700 !important;
    color: var(--docx-text) !important; text-decoration: none !important;
}
.docx-sb-logo i { color: var(--docx-accent) !important; }
.docx-sb-close {
    background: none !important; border: none !important; cursor: pointer !important;
    color: var(--docx-text3) !important; font-size: 16px !important; display: none !important;
    padding: 4px !important; outline: none !important;
}

.docx-sb-filter-wrap {
    padding: 10px 12px !important; border-bottom: 1px solid var(--docx-border) !important;
    position: relative !important;
}
.docx-sb-filter-wrap i {
    position: absolute !important; left: 22px !important; top: 50% !important;
    transform: translateY(-50%) !important; color: var(--docx-text3) !important;
    font-size: 11px !important; pointer-events: none !important;
}
.docx-sb-filter {
    width: 100% !important; padding: 7px 10px 7px 28px !important;
    background: var(--docx-bg) !important;
    border: 1px solid var(--docx-border) !important; border-radius: 7px !important;
    font-family: var(--docx-font) !important; font-size: 13px !important;
    color: var(--docx-text) !important; outline: none !important;
    transition: border-color var(--docx-t) !important;
}
.docx-sb-filter:focus { border-color: var(--docx-accent) !important; }
.docx-sb-filter::placeholder { color: var(--docx-text3) !important; }

.docx-sb-nav { flex: 1 !important; padding: 8px 8px 0 !important; }
.docx-nav-group { margin-bottom: 14px !important; }
.docx-nav-group-label {
    font-family: var(--docx-head) !important; font-size: 10px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: .08em !important;
    color: var(--docx-text3) !important; padding: 0 8px 4px !important; margin: 0 !important;
}
.docx-sb-nav ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.docx-sb-nav li { margin: 1px 0 !important; }
.docx-sb-nav a {
    display: flex !important; align-items: center !important; gap: 8px !important;
    padding: 7px 10px !important; border-radius: 7px !important;
    font-size: 13.5px !important; color: var(--docx-text2) !important;
    text-decoration: none !important; transition: all var(--docx-t) !important;
}
.docx-sb-nav a i { font-size: 11.5px !important; width: 15px !important; text-align: center !important; color: var(--docx-text3) !important; flex-shrink: 0 !important; }
.docx-sb-nav a span { flex: 1 !important; }
.docx-sb-nav a:hover { background: var(--docx-accent-dim) !important; color: var(--docx-text) !important; }
.docx-sb-nav a.docx-nav-active {
    background: var(--docx-accent-dim) !important;
    color: var(--docx-accent) !important; font-weight: 600 !important;
    border-left: 3px solid var(--docx-accent) !important;
}
.docx-sb-nav a.docx-nav-active i { color: var(--docx-accent) !important; }

.docx-sb-foot {
    margin-top: auto !important; padding: 12px 16px !important;
    border-top: 1px solid var(--docx-border) !important;
    font-size: 11.5px !important; color: var(--docx-text3) !important; text-align: center !important;
}
.docx-sb-foot a { color: var(--docx-accent) !important; text-decoration: none !important; }

/* Main content */
#docx-content {
    flex: 1 !important; min-width: 0 !important; background: var(--docx-bg) !important;
}
#docx-content > * { max-width: 900px !important; width: 100% !important; padding: 36px 44px 80px !important; }

/* Breadcrumbs */
.docx-breadcrumbs {
    display: flex !important; flex-wrap: wrap !important; align-items: center !important;
    gap: 4px !important; font-size: 12.5px !important; color: var(--docx-text3) !important;
    margin-bottom: 24px !important;
}
.docx-breadcrumbs a { color: var(--docx-text2) !important; text-decoration: none !important; padding: 2px 4px !important; border-radius: 4px !important; }
.docx-breadcrumbs a:hover { color: var(--docx-accent) !important; background: var(--docx-accent-dim) !important; }
.docx-bc-sep { font-size: 9px !important; color: var(--docx-text3) !important; }

/* Badges */
.docx-badges { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-bottom: 12px !important; }
.docx-badge {
    display: inline-flex !important; align-items: center !important; gap: 4px !important;
    padding: 3px 10px !important; border-radius: 100px !important;
    font-size: 11px !important; font-weight: 700 !important; font-family: var(--docx-head) !important;
}
.docx-b-feat { background: linear-gradient(135deg,#f97316,#fb923c) !important; color: #fff !important; }
.docx-b-ver { background: var(--docx-accent-dim) !important; color: var(--docx-accent) !important; }
.docx-b-beginner { background: rgba(22,163,74,.1) !important; color: #15803d !important; }
.docx-b-intermediate { background: rgba(217,119,6,.1) !important; color: #b45309 !important; }
.docx-b-advanced { background: rgba(220,38,38,.1) !important; color: #b91c1c !important; }

/* Article title */
.docx-article-title {
    font-family: var(--docx-head) !important;
    font-size: clamp(22px, 3.5vw, 30px) !important; font-weight: 700 !important;
    line-height: 1.2 !important; color: var(--docx-text) !important;
    margin: 0 0 16px !important; letter-spacing: -.02em !important;
}

/* Meta row */
.docx-meta {
    display: flex !important; flex-wrap: wrap !important; gap: 14px !important;
    align-items: center !important; font-size: 12.5px !important; color: var(--docx-text2) !important;
    padding-bottom: 20px !important; border-bottom: 1px solid var(--docx-border) !important;
    margin-bottom: 0 !important;
}
.docx-meta span { display: flex !important; align-items: center !important; gap: 5px !important; }
.docx-meta span i { color: var(--docx-text3) !important; font-size: 11px !important; }
.docx-meta-actions { display: flex !important; gap: 6px !important; margin-left: auto !important; }
.docx-btn-sm {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    padding: 5px 12px !important; border-radius: var(--docx-r) !important;
    background: var(--docx-surface) !important; border: 1px solid var(--docx-border) !important;
    color: var(--docx-text2) !important; font-size: 12px !important;
    font-family: var(--docx-font) !important; cursor: pointer !important;
    text-decoration: none !important; transition: all var(--docx-t) !important;
    white-space: nowrap !important; outline: none !important;
}
.docx-btn-sm:hover { border-color: var(--docx-accent) !important; color: var(--docx-accent) !important; }

/* TOC */
.docx-toc {
    background: var(--docx-surface) !important;
    border: 1px solid var(--docx-border) !important;
    border-left: 4px solid var(--docx-accent) !important;
    border-radius: 0 var(--docx-r) var(--docx-r) 0 !important;
    padding: 14px 18px !important; margin: 20px 0 !important;
}
.docx-toc-label {
    font-family: var(--docx-head) !important; font-size: 11px !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: .07em !important;
    color: var(--docx-text2) !important; margin: 0 0 10px !important;
    display: flex !important; align-items: center !important; gap: 6px !important;
}
.docx-toc-label i { color: var(--docx-accent) !important; }
.docx-toc ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.docx-toc li { margin: 2px 0 !important; }
.docx-toc li.sub { padding-left: 16px !important; }
.docx-toc a { font-size: 13.5px !important; color: var(--docx-text2) !important; text-decoration: none !important; display: block !important; padding: 3px 4px !important; border-radius: 4px !important; transition: all var(--docx-t) !important; }
.docx-toc a:hover, .docx-toc a.active { color: var(--docx-accent) !important; background: var(--docx-accent-dim) !important; }
.docx-toc a.active { font-weight: 600 !important; }

/* Article body */
.docx-article-body { font-size: 15px !important; line-height: 1.8 !important; color: var(--docx-text) !important; margin-top: 20px !important; }
.docx-article-body h2 { font-family: var(--docx-head) !important; font-size: 21px !important; font-weight: 700 !important; margin: 40px 0 14px !important; padding-bottom: 8px !important; border-bottom: 1px solid var(--docx-border) !important; }
.docx-article-body h3 { font-family: var(--docx-head) !important; font-size: 17px !important; font-weight: 600 !important; margin: 28px 0 10px !important; }
.docx-article-body h4 { font-family: var(--docx-head) !important; font-size: 15px !important; font-weight: 600 !important; margin: 22px 0 8px !important; }
.docx-article-body p { margin: 0 0 16px !important; }
.docx-article-body a { color: var(--docx-accent) !important; text-decoration: underline !important; text-underline-offset: 2px !important; }
.docx-article-body ul, .docx-article-body ol { margin: 0 0 16px !important; padding-left: 22px !important; }
.docx-article-body li { margin-bottom: 5px !important; }
.docx-article-body img { max-width: 100% !important; border-radius: var(--docx-r) !important; }
.docx-article-body blockquote { border-left: 4px solid var(--docx-accent) !important; margin: 20px 0 !important; padding: 12px 18px !important; background: var(--docx-accent-dim) !important; border-radius: 0 var(--docx-r) var(--docx-r) 0 !important; color: var(--docx-text2) !important; font-style: italic !important; }
.docx-article-body table { width: 100% !important; border-collapse: collapse !important; margin: 20px 0 !important; font-size: 14px !important; }
.docx-article-body th { background: var(--docx-bg) !important; font-family: var(--docx-head) !important; font-weight: 600 !important; font-size: 12px !important; text-align: left !important; padding: 10px 14px !important; border-bottom: 2px solid var(--docx-border) !important; }
.docx-article-body td { padding: 10px 14px !important; border-bottom: 1px solid var(--docx-border) !important; }
.docx-article-body code { font-family: var(--docx-mono) !important; font-size: .86em !important; background: var(--docx-bg) !important; border: 1px solid var(--docx-border) !important; padding: 2px 6px !important; border-radius: 5px !important; }
.docx-article-body pre { background: #0d1117 !important; border-radius: var(--docx-r) !important; padding: 20px !important; overflow-x: auto !important; margin: 20px 0 !important; position: relative !important; }
.docx-article-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; }

/* Copy button on pre blocks */
.docx-copy-pre {
    position: absolute !important; top: 10px !important; right: 10px !important;
    background: rgba(255,255,255,.1) !important; border: none !important;
    color: #8b949e !important; padding: 5px 9px !important; border-radius: 5px !important;
    font-size: 12px !important; cursor: pointer !important; transition: all var(--docx-t) !important;
    font-family: var(--docx-font) !important;
}
.docx-copy-pre:hover { color: #e6edf3 !important; background: rgba(255,255,255,.2) !important; }
.docx-copy-pre.done { color: #3fb950 !important; }

/* Callouts (shortcodes) */
.docx-callout { display: flex !important; gap: 12px !important; padding: 14px 16px !important; border-radius: var(--docx-r) !important; margin: 18px 0 !important; border: 1px solid !important; }
.docx-c-icon { font-size: 16px !important; flex-shrink: 0 !important; }
.docx-c-body strong { display: block !important; font-family: var(--docx-head) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .05em !important; margin-bottom: 4px !important; }
.docx-callout-note    { background: rgba(59,130,246,.07) !important; border-color: rgba(59,130,246,.2) !important; } .docx-callout-note .docx-c-icon { color: #3b82f6 !important; } .docx-callout-note .docx-c-body strong { color: #1e40af !important; }
.docx-callout-warning { background: rgba(217,119,6,.07) !important;  border-color: rgba(217,119,6,.2) !important;  } .docx-callout-warning .docx-c-icon { color: #d97706 !important; } .docx-callout-warning .docx-c-body strong { color: #92400e !important; }
.docx-callout-tip     { background: rgba(22,163,74,.07) !important;  border-color: rgba(22,163,74,.2) !important;  } .docx-callout-tip .docx-c-icon { color: #16a34a !important; } .docx-callout-tip .docx-c-body strong { color: #14532d !important; }
.docx-callout-danger  { background: rgba(220,38,38,.07) !important;  border-color: rgba(220,38,38,.2) !important;  } .docx-callout-danger .docx-c-icon { color: #dc2626 !important; } .docx-callout-danger .docx-c-body strong { color: #7f1d1d !important; }

/* FAQ shortcode */
.docx-faq { margin: 20px 0 !important; border: 1px solid var(--docx-border) !important; border-radius: var(--docx-r) !important; overflow: hidden !important; background: var(--docx-surface) !important; }
.docx-faq-item { border-bottom: 1px solid var(--docx-border) !important; }
.docx-faq-item:last-child { border-bottom: none !important; }
.docx-faq-q { width: 100% !important; display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 14px 18px !important; background: none !important; border: none !important; cursor: pointer !important; font-family: var(--docx-font) !important; font-size: 14.5px !important; font-weight: 500 !important; color: var(--docx-text) !important; text-align: left !important; gap: 10px !important; transition: background var(--docx-t) !important; }
.docx-faq-q:hover { background: var(--docx-accent-dim) !important; }
.docx-faq-q[aria-expanded="true"] { color: var(--docx-accent) !important; background: var(--docx-accent-dim) !important; }
.docx-faq-icon { font-size: 11px !important; flex-shrink: 0 !important; transition: transform .25s !important; }
.docx-faq-q[aria-expanded="true"] .docx-faq-icon { transform: rotate(180deg) !important; }
.docx-faq-answer { padding: 0 18px !important; max-height: 0 !important; overflow: hidden !important; transition: max-height .3s ease, padding .3s !important; font-size: 14px !important; line-height: 1.7 !important; color: var(--docx-text2) !important; }
.docx-faq-answer.open { padding: 14px 18px 16px !important; max-height: 2000px !important; }

/* Steps shortcode */
.docx-steps-list { list-style: none !important; padding: 0 !important; margin: 20px 0 !important; }
.docx-step { display: flex !important; gap: 14px !important; padding: 0 0 22px !important; position: relative !important; }
.docx-step::after { content: '' !important; position: absolute !important; left: 15px !important; top: 32px !important; bottom: 0 !important; width: 1px !important; background: var(--docx-border) !important; }
.docx-step:last-child::after { display: none !important; }
.docx-step:last-child { padding-bottom: 0 !important; }
.docx-step-n { width: 31px !important; height: 31px !important; border-radius: 50% !important; background: var(--docx-accent) !important; color: #fff !important; font-family: var(--docx-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; }
.docx-step-body { padding-top: 4px !important; font-size: 14.5px !important; line-height: 1.7 !important; flex: 1 !important; }

/* Tags */
.docx-tags { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; align-items: center !important; margin: 20px 0 !important; }
.docx-tags-label { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: var(--docx-text3) !important; font-family: var(--docx-head) !important; }
.docx-tag { padding: 3px 10px !important; border-radius: 100px !important; background: var(--docx-surface) !important; border: 1px solid var(--docx-border) !important; font-size: 12px !important; color: var(--docx-text2) !important; }

/* Feedback */
.docx-feedback { margin: 32px 0 0 !important; padding: 22px !important; border-radius: var(--docx-r) !important; background: var(--docx-surface) !important; border: 1px solid var(--docx-border) !important; }
.docx-feedback-q p { font-size: 14.5px !important; font-weight: 600 !important; margin: 0 0 14px !important; display: flex !important; align-items: center !important; gap: 7px !important; color: var(--docx-text) !important; }
.docx-feedback-q p i { color: var(--docx-accent) !important; }
.docx-feedback-btns { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; }
.docx-fb-yes, .docx-fb-no {
    display: flex !important; align-items: center !important; gap: 7px !important;
    padding: 9px 20px !important; border-radius: 100px !important;
    border: 1px solid var(--docx-border) !important; background: var(--docx-surface) !important;
    cursor: pointer !important; font-size: 14px !important; font-family: var(--docx-font) !important;
    font-weight: 500 !important; color: var(--docx-text2) !important; transition: all .2s !important;
    outline: none !important;
}
.docx-fb-yes:hover, .docx-fb-yes.sel { border-color: #16a34a !important; color: #15803d !important; background: rgba(22,163,74,.1) !important; }
.docx-fb-no:hover, .docx-fb-no.sel   { border-color: #dc2626 !important; color: #b91c1c !important; background: rgba(220,38,38,.1) !important; }
.docx-feedback-form { margin-top: 16px !important; }
.docx-feedback-form textarea { width: 100% !important; padding: 10px 12px !important; border: 1px solid var(--docx-border) !important; border-radius: var(--docx-r) !important; font-family: var(--docx-font) !important; font-size: 14px !important; color: var(--docx-text) !important; background: var(--docx-surface) !important; resize: vertical !important; outline: none !important; }
.docx-feedback-form textarea:focus { border-color: var(--docx-accent) !important; }
.docx-fb-send { padding: 9px 22px !important; border-radius: 100px !important; background: var(--docx-accent) !important; color: #fff !important; border: none !important; font-size: 14px !important; font-weight: 600 !important; font-family: var(--docx-font) !important; cursor: pointer !important; margin-top: 10px !important; outline: none !important; }
.docx-fb-skip { background: none !important; border: none !important; color: var(--docx-text3) !important; font-size: 13px !important; cursor: pointer !important; margin-top: 10px !important; margin-left: 8px !important; font-family: var(--docx-font) !important; outline: none !important; }
.docx-feedback-thanks { font-size: 14px !important; color: #16a34a !important; margin: 10px 0 0 !important; display: flex !important; align-items: center !important; gap: 7px !important; }

/* Post nav */
.docx-post-nav { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-top: 44px !important; padding-top: 28px !important; border-top: 1px solid var(--docx-border) !important; }
.docx-nav-prev, .docx-nav-next { display: flex !important; flex-direction: column !important; gap: 4px !important; padding: 14px 16px !important; border-radius: var(--docx-r) !important; border: 1px solid var(--docx-border) !important; background: var(--docx-surface) !important; text-decoration: none !important; transition: all var(--docx-t) !important; }
.docx-nav-prev { align-items: flex-start !important; }
.docx-nav-next { align-items: flex-end !important; text-align: right !important; }
.docx-nav-prev:hover, .docx-nav-next:hover { border-color: var(--docx-accent) !important; }
.docx-nav-dir { font-size: 11px !important; font-family: var(--docx-head) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: var(--docx-text3) !important; display: flex !important; align-items: center !important; gap: 4px !important; }
.docx-nav-title { font-size: 13.5px !important; font-weight: 500 !important; color: var(--docx-text) !important; }

/* Brand footer */
.docx-brand-foot { text-align: center !important; margin-top: 48px !important; padding-top: 20px !important; border-top: 1px solid var(--docx-border) !important; font-size: 12px !important; color: var(--docx-text3) !important; }
.docx-brand-foot a { color: var(--docx-accent) !important; text-decoration: none !important; }

/* Doc list shortcode */
.docx-doc-list { list-style: none !important; padding: 0 !important; margin: 14px 0 !important; }
.docx-doc-list li a { display: flex !important; align-items: center !important; gap: 9px !important; padding: 10px 13px !important; border-radius: var(--docx-r) !important; background: var(--docx-surface) !important; border: 1px solid var(--docx-border) !important; color: var(--docx-text) !important; text-decoration: none !important; transition: all var(--docx-t) !important; margin-bottom: 4px !important; }
.docx-doc-list li a:hover { border-color: var(--docx-accent) !important; background: var(--docx-accent-dim) !important; transform: translateX(3px) !important; }
.docx-doc-list li a i { color: var(--docx-text3) !important; font-size: 12px !important; flex-shrink: 0 !important; }
.docx-doc-list-rt { font-size: 11px !important; color: var(--docx-text3) !important; margin-left: auto !important; }

/* ── Archive page ──────────────────────────── */
#docx-archive-page {
    font-family: var(--docx-font) !important;
    color: var(--docx-text) !important;
    max-width: 1140px !important; margin: 0 auto !important;
    padding: 48px 24px 80px !important;
}
.docx-archive-hero { text-align: center !important; margin-bottom: 36px !important; }
.docx-archive-hero h1 { font-family: var(--docx-head) !important; font-size: clamp(26px,5vw,44px) !important; font-weight: 800 !important; color: var(--docx-text) !important; margin: 0 0 10px !important; letter-spacing: -.04em !important; }
.docx-archive-hero p { font-size: 16px !important; color: var(--docx-text2) !important; margin: 0 0 0 !important; }
.docx-back-link { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 13px !important; color: var(--docx-accent) !important; text-decoration: none !important; font-weight: 600 !important; margin-bottom: 16px !important; }

.docx-archive-search { max-width: 560px !important; margin: 0 auto 40px !important; position: relative !important; }
.docx-archive-search i { position: absolute !important; left: 18px !important; top: 50% !important; transform: translateY(-50%) !important; color: var(--docx-text3) !important; font-size: 16px !important; pointer-events: none !important; z-index: 1 !important; }
.docx-archive-search input { width: 100% !important; padding: 14px 18px 14px 48px !important; background: var(--docx-surface) !important; border: 1px solid var(--docx-border) !important; border-radius: 100px !important; font-family: var(--docx-font) !important; font-size: 15px !important; color: var(--docx-text) !important; box-shadow: 0 4px 16px rgba(0,0,0,.08) !important; outline: none !important; transition: all var(--docx-t) !important; }
.docx-archive-search input::placeholder { color: var(--docx-text3) !important; }
.docx-archive-search input:focus { border-color: var(--docx-accent) !important; box-shadow: 0 4px 16px rgba(0,0,0,.08), 0 0 0 3px var(--docx-accent-dim) !important; }
.docx-search-drop { position: absolute !important; top: calc(100% + 6px) !important; left: 0 !important; right: 0 !important; background: var(--docx-surface) !important; border: 1px solid var(--docx-border) !important; border-radius: var(--docx-r) !important; box-shadow: 0 12px 40px rgba(0,0,0,.12) !important; overflow: hidden !important; z-index: 200 !important; }

/* Search results */
.docx-sr { display: flex !important; align-items: flex-start !important; gap: 11px !important; padding: 12px 16px !important; border-bottom: 1px solid var(--docx-border) !important; text-decoration: none !important; color: var(--docx-text) !important; transition: background var(--docx-t) !important; }
.docx-sr:last-child { border-bottom: none !important; }
.docx-sr:hover { background: var(--docx-accent-dim) !important; }
.docx-sr-icon { width: 32px !important; height: 32px !important; border-radius: 8px !important; background: var(--docx-accent-dim) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--docx-accent) !important; font-size: 13px !important; flex-shrink: 0 !important; }
.docx-sr-cat { font-size: 10px !important; font-family: var(--docx-head) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .06em !important; color: var(--docx-accent) !important; }
.docx-sr-title { font-size: 13.5px !important; font-weight: 500 !important; margin: 2px 0 !important; }
.docx-sr-excerpt { font-size: 12px !important; color: var(--docx-text2) !important; }
.docx-sr-rt { font-size: 11px !important; color: var(--docx-text3) !important; white-space: nowrap !important; margin-left: auto !important; flex-shrink: 0 !important; }

.docx-featured-label { font-family: var(--docx-head) !important; font-size: 10.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .08em !important; color: var(--docx-text3) !important; display: flex !important; align-items: center !important; gap: 6px !important; margin-bottom: 10px !important; }
.docx-featured-grid { display: grid !important; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)) !important; gap: 12px !important; margin-bottom: 40px !important; }
.docx-feat-card { border-radius: var(--docx-r) !important; padding: 20px !important; text-decoration: none !important; display: flex !important; flex-direction: column !important; gap: 7px !important; background: linear-gradient(135deg,var(--docx-accent),#6366f1) !important; box-shadow: 0 4px 16px rgba(0,0,0,.1) !important; transition: transform .2s !important; }
.docx-feat-card:hover { transform: translateY(-2px) !important; }
.docx-feat-card i { font-size: 22px !important; color: rgba(255,255,255,.85) !important; }
.docx-feat-card strong { font-family: var(--docx-head) !important; font-size: 15px !important; font-weight: 700 !important; color: #fff !important; }
.docx-feat-card span { font-size: 12.5px !important; color: rgba(255,255,255,.75) !important; line-height: 1.5 !important; }
.docx-feat-card em { font-style: normal !important; font-size: 11px !important; color: rgba(255,255,255,.6) !important; }

.docx-cat-block { margin-bottom: 36px !important; }
.docx-cat-header { display: flex !important; align-items: center !important; gap: 9px !important; margin-bottom: 12px !important; padding-bottom: 10px !important; border-bottom: 1px solid var(--docx-border) !important; flex-wrap: wrap !important; }
.docx-cat-header i { color: var(--docx-accent) !important; font-size: 14px !important; }
.docx-cat-header h2 { font-family: var(--docx-head) !important; font-size: 17px !important; font-weight: 700 !important; color: var(--docx-text) !important; margin: 0 !important; flex: 1 !important; letter-spacing: -.02em !important; }
.docx-cat-header span { font-size: 12px !important; color: var(--docx-text3) !important; }
.docx-cat-header a { font-size: 12px !important; color: var(--docx-accent) !important; text-decoration: none !important; font-weight: 600 !important; margin-left: auto !important; }

.docx-articles-grid { display: grid !important; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)) !important; gap: 8px !important; }
.docx-article-card { display: flex !important; align-items: center !important; gap: 9px !important; padding: 11px 14px !important; border-radius: var(--docx-r) !important; background: var(--docx-surface) !important; border: 1px solid var(--docx-border) !important; text-decoration: none !important; color: var(--docx-text) !important; transition: all var(--docx-t) !important; }
.docx-article-card:hover { border-color: var(--docx-accent) !important; background: var(--docx-accent-dim) !important; transform: translateX(3px) !important; }
.docx-article-card i { color: var(--docx-text3) !important; font-size: 12px !important; flex-shrink: 0 !important; }
.docx-article-card span { font-size: 13px !important; font-weight: 500 !important; flex: 1 !important; line-height: 1.4 !important; color: var(--docx-text) !important; }
.docx-article-card em { font-style: normal !important; font-size: 11px !important; color: var(--docx-text3) !important; flex-shrink: 0 !important; }

.docx-empty { text-align: center !important; padding: 60px 20px !important; color: var(--docx-text2) !important; }
.docx-empty i { font-size: 40px !important; opacity: .3 !important; display: block !important; margin-bottom: 16px !important; }
.docx-arch-footer { text-align: center !important; margin-top: 48px !important; padding-top: 20px !important; border-top: 1px solid var(--docx-border) !important; font-size: 12px !important; color: var(--docx-text3) !important; }
.docx-arch-footer a { color: var(--docx-accent) !important; text-decoration: none !important; }

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width: 1024px) {
    :root { --docx-sb-w: 240px; }
    #docx-content > * { padding: 28px 28px 60px !important; }
}

@media (max-width: 768px) {
    #docx-wrap { display: block !important; }

    /* Sidebar: off-canvas drawer */
    #docx-sidebar {
        position: fixed !important;
        left: -100% !important; top: 0 !important; bottom: 0 !important;
        width: 290px !important; max-width: 88vw !important;
        height: 100dvh !important; height: 100vh !important;
        z-index: 600 !important;
        transition: left .26s cubic-bezier(.4,0,.2,1) !important;
        box-shadow: none !important;
    }
    #docx-sidebar.open {
        left: 0 !important;
        box-shadow: 0 12px 40px rgba(0,0,0,.2) !important;
    }
    #docx-overlay { z-index: 599 !important; }
    .docx-sb-close { display: flex !important; }
    #docx-top-bar { display: flex !important; }
    #docx-content > * { max-width: 100% !important; padding: 20px 16px 60px !important; }
    .docx-meta-actions { display: none !important; }
    .docx-post-nav { grid-template-columns: 1fr !important; }
    #docx-archive-page { padding: 28px 14px 60px !important; }
    .docx-articles-grid { grid-template-columns: 1fr !important; }
    .docx-featured-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 480px) {
    .docx-article-title { font-size: 21px !important; }
    .docx-archive-hero h1 { font-size: 25px !important; }
    .docx-featured-grid { grid-template-columns: 1fr !important; }
}