*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #1E293B;
    line-height: 1.6;
    background: #F8FAFC;
}
.df-header {
    background: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
    position: sticky;
    top: 0;
    z-index: 900;
}
.df-header-top {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem clamp(1rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.df-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.df-brand-mark {
    width: 2.25rem;
    height: 2.25rem;
    background: linear-gradient(135deg, #0D9488, #14B8A6);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.875rem;
    color: #fff;
    letter-spacing: -0.04em;
}
.df-brand-text {
    font-weight: 700;
    font-size: 1.375rem;
    color: #0F172A;
    letter-spacing: -0.03em;
}
.df-brand-text span { color: #0D9488; }
.df-tagline {
    font-size: 0.75rem;
    color: #4B5563;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 500;
}
.df-nav-bar {
    background: #F1F5F9;
    border-bottom: 1px solid #E2E8F0;
}
.df-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    overflow-x: auto;
}
.df-nav-link {
    color: #475569;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.75rem 1rem;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.df-nav-link:hover { color: #0D9488; }
.df-nav-active { color: #0D9488; border-bottom-color: #0D9488; }
.df-hamburger {
    display: none;
    background: none;
    border: 1px solid #CBD5E1;
    border-radius: 0.375rem;
    color: #475569;
    padding: 0.5rem;
    cursor: pointer;
    min-width: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
}
.df-hamburger svg { width: 1.25rem; height: 1.25rem; }
.df-mobile-nav { display: none; background: #fff; border-bottom: 1px solid #E2E8F0; }
.df-mobile-nav.df-open { display: block; }
.df-mobile-nav a {
    display: block;
    padding: 0.75rem clamp(1rem, 3vw, 2rem);
    color: #475569;
    font-size: 0.875rem;
    border-left: 3px solid transparent;
}
.df-mobile-nav a:hover, .df-mobile-nav a.df-nav-active {
    color: #0D9488;
    border-left-color: #0D9488;
    background: #F0FDFA;
}
@media (max-width: 768px) {
    .df-nav-bar { display: none; }
    .df-hamburger { display: flex; }
    .df-header-top { flex-direction: row; justify-content: space-between; }
    .df-tagline { display: none; }
}
/* ── 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;
}