*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'IBM Plex Sans',system-ui,sans-serif;background:#0F172A;color:#C8C8D4;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:'IBM Plex Mono','IBM Plex Sans',monospace}
a{color:#0EA5E9;text-decoration:none;transition:color 0.15s}a:hover{color:#38BDF8}
img{max-width:100%;height:auto;display:block}
.bf-topbar{background:#0F172A;padding:0.5rem 0;font-size:0.75rem;color:#6B6B80;text-align:center;letter-spacing:0.02em}
.bf-topbar strong{color:#0EA5E9;font-weight:600}
.bf-nav{background:#0C4A6E;position:sticky;top:0;z-index:100}
.bf-nav-inner{max-width:1140px;margin:0 auto;padding:0 clamp(1rem,3vw,1.5rem);display:grid;grid-template-columns:auto 1fr auto;align-items:center;min-height:3.25rem;gap:1rem}
.bf-logo{font-weight:700;font-size:1.25rem;color:#FAFAFA;letter-spacing:-0.02em;white-space:nowrap}
.bf-logo span{color:#0EA5E9}
.bf-nav-center{display:flex;justify-content:center;gap:clamp(0.75rem,2.5vw,2rem);flex-wrap:wrap}
.bf-nav-center a{color:#A8A8BE;font-size:0.8125rem;font-weight:500;text-transform:uppercase;letter-spacing:0.04em;transition:color 0.15s}
.bf-nav-center a:hover,.bf-nav-center a.bf-active{color:#FAFAFA}
.bf-nav-search{color:#A8A8BE;cursor:pointer;display:flex;align-items:center}
.bf-nav-search svg{width:1.125rem;height:1.125rem}
.bf-nav-accent{height:2px;background:linear-gradient(90deg,#0EA5E9,#0C4A6E,#0EA5E9);border:none}
/* ── Hamburger button (hidden on desktop) ──────────────────────────────── */
.bf-hamburger{display:none;background:none;border:none;color:#FAFAFA;font-size:1.375rem;cursor:pointer;padding:0;line-height:1;min-height:44px;min-width:44px;align-items:center;justify-content:center}
@media(max-width:768px){
.bf-hamburger{display:inline-flex}
.bf-nav-inner{grid-template-columns:1fr auto;gap:0.5rem}
.bf-nav-center{display:none;grid-column:1/-1;order:3;flex-direction:column;gap:0;padding:0.25rem 0 0.5rem}
.bf-nav-center a{display:block;min-height:44px;line-height:44px;font-size:0.8125rem;padding:0 0.25rem}
.bf-nav.nav-open .bf-nav-center{display:flex}
}
@media(max-width:640px){
.bf-topbar{font-size:0.75rem}
.bf-nav-center a{font-size:0.8125rem}
}
/* ── Print-friendly CSS ────────────────────────────────────────────────── */
@media print {
    /* Reset layout for A4 */
    html, body {
        background: #fff !important;
        color: #000 !important;
        font-family: Georgia, 'Times New Roman', serif !important;
        font-size: 11pt !important;
        line-height: 1.5 !important;
    }
    /* Hide UI chrome */
    header, nav, footer, aside,
    .gx-hdr, .gx-ftr, .gx-hamburger, .gx-cta, .gx-nav, .gx-mobile-menu,
    .site-header, .site-footer, .main-nav, .mobile-menu,
    .social-share, .share-buttons, .share-section,
    .comments-section, .leave-comment, .cm_form, #cm_form,
    .related-articles, .cross-category, .newsletter, .cookie-banner,
    .ad, .ads, .advertisement, [class*="ad-"], [class*="banner"],
    .breadcrumb, .sn-breadcrumb,
    .search, .search-form,
    button, input[type=button], input[type=submit] {
        display: none !important;
    }
    /* Article body — full width, no max constraints */
    main, article, .article, .article-content, .wp-article, .wp-article-main,
    .post, .entry-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        border: 0 !important;
        float: none !important;
    }
    /* Headings */
    h1 { font-size: 20pt !important; margin: 0 0 8pt 0 !important; }
    h2 { font-size: 14pt !important; margin: 12pt 0 6pt 0 !important; page-break-after: avoid; }
    h3 { font-size: 12pt !important; margin: 10pt 0 4pt 0 !important; page-break-after: avoid; }
    p, li { orphans: 3; widows: 3; }
    p { margin: 0 0 6pt 0 !important; }
    blockquote { border-left: 3pt solid #666 !important; margin: 6pt 12pt !important; padding-left: 6pt !important; }
    img { max-width: 100% !important; height: auto !important; page-break-inside: avoid; }
    pre, code { font-size: 9pt !important; background: #f4f4f4 !important; border: 1px solid #ccc !important; page-break-inside: avoid; }
    table { page-break-inside: avoid; border-collapse: collapse !important; }
    th, td { border: 1px solid #666 !important; padding: 4pt !important; }
    /* Show URLs inline after links */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }
    /* Don't expand relative/anchor links */
    a[href^="/"]::after, a[href^="#"]::after { content: ""; }
    /* Page setup */
    @page { margin: 1.5cm 1.8cm; }
}

/* ── Dark Mode (localStorage-driven) ────────────────────────────────────── */
html[data-theme="dark"] {
    --bg: #0d1117;
    --bg-card: #161b22;
    --bg-nav: #010409;
    --text: #e6edf3;
    --text-dim: #8b949e;
    --border: #30363d;
    --link: #58a6ff;
    color-scheme: dark;
}
html[data-theme="dark"] body {
    background: var(--bg) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] header,
html[data-theme="dark"] nav,
html[data-theme="dark"] footer,
html[data-theme="dark"] .gx-hdr,
html[data-theme="dark"] .gx-ftr,
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .site-footer {
    background: var(--bg-nav) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] a {
    color: var(--link) !important;
}
html[data-theme="dark"] .gx-nav-link,
html[data-theme="dark"] .nav-link {
    color: var(--text) !important;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .related-card,
html[data-theme="dark"] .gx-card,
html[data-theme="dark"] main > *,
html[data-theme="dark"] article,
html[data-theme="dark"] .article-content {
    background: var(--bg-card) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4 {
    color: var(--text) !important;
}
html[data-theme="dark"] .meta,
html[data-theme="dark"] .date,
html[data-theme="dark"] .author,
html[data-theme="dark"] .byline,
html[data-theme="dark"] .excerpt {
    color: var(--text-dim) !important;
}
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: var(--bg-card) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
html[data-theme="dark"] code,
html[data-theme="dark"] pre {
    background: var(--bg-nav) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] blockquote {
    border-left-color: var(--border) !important;
    color: var(--text-dim) !important;
}
html[data-theme="dark"] img {
    opacity: 0.92;
}
html[data-theme="dark"] img:hover {
    opacity: 1;
}

/* Toggle button — always positioned in header, cycles 3 states */
.ph-theme-toggle {
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 0.5rem;
    transition: background 0.15s, transform 0.15s;
    flex-shrink: 0;
}
.ph-theme-toggle:hover {
    background: rgba(128,128,128,0.15);
    transform: scale(1.08);
}
.ph-theme-toggle svg {
    width: 18px;
    height: 18px;
}
.ph-theme-toggle .ph-icon-dark { display: none; }
html[data-theme="dark"] .ph-theme-toggle .ph-icon-light { display: none; }
html[data-theme="dark"] .ph-theme-toggle .ph-icon-dark  { display: block; }

/* ── Light mode override for dark-default sites ─────────────────────────
   When user explicitly sets data-theme="light", force light palette even
   on sites whose native CSS hardcodes dark backgrounds. This makes the
   toggle work bidirectionally on all site themes. */
html[data-theme="light"] {
    --bg: #ffffff;
    --bg-card: #f8f9fa;
    --bg-nav: #ffffff;
    --text: #1a1a1a;
    --text-dim: #6a737d;
    --border: #e1e4e8;
    --link: #0366d6;
    color-scheme: light;
}
html[data-theme="light"] body,
html[data-theme="light"] main {
    background: #ffffff !important;
    color: #1a1a1a !important;
}
html[data-theme="light"] header,
html[data-theme="light"] nav,
html[data-theme="light"] footer,
html[data-theme="light"] .gx-topbar,
html[data-theme="light"] .gx-hdr,
html[data-theme="light"] .gx-ftr,
html[data-theme="light"] .site-header,
html[data-theme="light"] .site-footer,
html[data-theme="light"] .gx-mobile-menu,
html[data-theme="light"] .df-header,
html[data-theme="light"] .df-footer {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-color: #e1e4e8 !important;
}
html[data-theme="light"] .gx-nav-link,
html[data-theme="light"] .nav-link,
html[data-theme="light"] .gx-brand,
html[data-theme="light"] a {
    color: #1a1a1a !important;
}
html[data-theme="light"] a[href]:not(.gx-cta):not(.gx-brand):not(.nav-link):not(.gx-nav-link) {
    color: #0366d6 !important;
}
html[data-theme="light"] .card,
html[data-theme="light"] .article-card,
html[data-theme="light"] .related-card,
html[data-theme="light"] .gx-card,
html[data-theme="light"] article,
html[data-theme="light"] .article-content,
html[data-theme="light"] .wp-article,
html[data-theme="light"] .wp-article-main {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-color: #e1e4e8 !important;
}
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4 {
    color: #1a1a1a !important;
}
html[data-theme="light"] .meta,
html[data-theme="light"] .date,
html[data-theme="light"] .author,
html[data-theme="light"] .byline,
html[data-theme="light"] .excerpt,
html[data-theme="light"] .gx-meta {
    color: #6a737d !important;
}
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #e1e4e8 !important;
}
html[data-theme="light"] code,
html[data-theme="light"] pre {
    background: #f6f8fa !important;
    color: #24292e !important;
    border-color: #e1e4e8 !important;
}
html[data-theme="light"] blockquote {
    border-left-color: #d1d5da !important;
    color: #586069 !important;
}
html[data-theme="light"] .gx-topbar-inner,
html[data-theme="light"] .gx-hero,
html[data-theme="light"] .gx-section {
    background: #ffffff !important;
}