/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #1e293b;
}
::-webkit-scrollbar-thumb {
    background: #38bdf8;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #0ea5e9;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .glass-panel {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.1);
}

html {
    scroll-behavior: smooth;
}

/* ===== SEO Article - Base & Dark Mode ===== */
.seo-article { font-family:inherit; line-height:1.75; color:#0f172a; max-width:980px; margin:0 auto; }
.dark .seo-article { color:#e2e8f0 !important; }
.seo-article h1 { font-size:clamp(24px,3.5vw,36px); font-weight:800; line-height:1.2; margin-bottom:8px; }
.dark .seo-article h1 { color:#f1f5f9 !important; }
.seo-article h2 { font-size:clamp(20px,2.5vw,28px); font-weight:700; margin:32px 0 12px; border-left:4px solid rgba(14,165,233,.5); padding-left:14px; scroll-margin-top:100px; }
.dark .seo-article h2 { color:#f1f5f9 !important; }
.seo-article h3 { font-size:clamp(17px,2vw,22px); font-weight:600; margin:24px 0 10px; scroll-margin-top:100px; }
.dark .seo-article h3 { color:#e2e8f0 !important; }
.seo-article p { margin:12px 0; }
.dark .seo-article p { color:#cbd5e1 !important; }
.seo-article ul,.seo-article ol { margin:12px 0 12px 24px; }
.seo-article li { margin:6px 0; }
.dark .seo-article li { color:#cbd5e1 !important; }
.seo-article a { color:#0ea5e9; text-decoration:underline; text-underline-offset:2px; }
.seo-article a:hover { color:#38bdf8; }
.dark .seo-article strong { color:#f1f5f9 !important; }
.seo-article .meta { color:#475569; font-size:14px; margin:6px 0 22px; }
.dark .seo-article .meta { color:#94a3b8 !important; }

/* Boxes */
.seo-article .box { background:#fff; border:1px solid rgba(15,23,42,.10); border-radius:16px; padding:18px 22px; margin:20px 0; box-shadow:0 10px 24px rgba(15,23,42,.06); }
.dark .seo-article .box { background:rgba(30,41,59,.6) !important; border-color:rgba(148,163,184,.15) !important; color:#e2e8f0 !important; }

/* Callouts */
.seo-article .callout { background:rgba(14,165,233,.07); border:1px solid rgba(14,165,233,.25); border-radius:16px; padding:16px 20px; margin:20px 0; }
.dark .seo-article .callout { background:rgba(14,165,233,.12) !important; border-color:rgba(14,165,233,.3) !important; color:#e2e8f0 !important; }

/* Warnings */
.seo-article .warn { background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.2); border-radius:16px; padding:16px 20px; margin:20px 0; }
.dark .seo-article .warn { background:rgba(239,68,68,.12) !important; border-color:rgba(239,68,68,.25) !important; color:#e2e8f0 !important; }

/* TOC */
.seo-article .toc { background:rgba(15,23,42,.03); border:1px solid rgba(15,23,42,.08); border-radius:16px; padding:18px 22px; margin:24px 0; }
.dark .seo-article .toc { background:rgba(30,41,59,.4) !important; border-color:rgba(148,163,184,.15) !important; color:#e2e8f0 !important; }
.seo-article .toc a { color:inherit; text-decoration:none; }
.seo-article .toc a:hover { text-decoration:underline; color:#0ea5e9; }
.seo-article .toc ul { list-style:none; margin:8px 0 0 0; padding:0; }
.seo-article .toc ul ul { margin-left:20px; }
.seo-article .toc li { padding:4px 0; }
.seo-article .toc li::before { content:'→ '; color:#0ea5e9; font-weight:600; }

/* FAQ */
.seo-article .faq details { border:1px solid rgba(15,23,42,.10); border-radius:14px; padding:14px 18px; margin:12px 0; background:#fff; transition:all .2s; }
.dark .seo-article .faq details { background:rgba(30,41,59,.5) !important; border-color:rgba(148,163,184,.15) !important; color:#e2e8f0 !important; }
.seo-article .faq summary { cursor:pointer; font-weight:700; font-size:16px; }
.dark .seo-article .faq summary { color:#f1f5f9 !important; }
.seo-article .faq details[open] { box-shadow:0 4px 12px rgba(15,23,42,.06); }

/* Tables */
.seo-article table { width:100%; border-collapse:collapse; margin:20px 0; font-size:14px; }
.seo-article th,.seo-article td { text-align:left; padding:10px 14px; border-bottom:1px solid rgba(15,23,42,.08); }
.dark .seo-article th,.dark .seo-article td { border-bottom-color:rgba(148,163,184,.15) !important; color:#e2e8f0 !important; }
.seo-article th { background:rgba(15,23,42,.03); font-weight:700; }
.dark .seo-article th { background:rgba(30,41,59,.5) !important; color:#f1f5f9 !important; }
.seo-article .small { font-size:13px; color:#64748b; }
.dark .seo-article .small { color:#94a3b8 !important; }

/* ===== SEO Pillar VC - Dark Mode (11/14 articles use this class) ===== */
.dark .seo-pillar-vc { color:#e2e8f0 !important; }
.dark .seo-pillar-vc h1 { color:#f1f5f9 !important; }
.dark .seo-pillar-vc h2 { color:#f1f5f9 !important; }
.dark .seo-pillar-vc h3 { color:#e2e8f0 !important; }
.dark .seo-pillar-vc p { color:#cbd5e1 !important; }
.dark .seo-pillar-vc li { color:#cbd5e1 !important; }
.dark .seo-pillar-vc strong { color:#f1f5f9 !important; }
.dark .seo-pillar-vc a { color:#38bdf8 !important; }
.dark .seo-pillar-vc .meta { color:#94a3b8 !important; }
.dark .seo-pillar-vc .box { background:rgba(30,41,59,.6) !important; border-color:rgba(148,163,184,.15) !important; color:#e2e8f0 !important; }
.dark .seo-pillar-vc .callout { background:rgba(14,165,233,.12) !important; border-color:rgba(14,165,233,.3) !important; color:#e2e8f0 !important; }
.dark .seo-pillar-vc .warn { background:rgba(239,68,68,.12) !important; border-color:rgba(239,68,68,.25) !important; color:#e2e8f0 !important; }
.dark .seo-pillar-vc .toc { background:rgba(30,41,59,.4) !important; border-color:rgba(148,163,184,.15) !important; color:#e2e8f0 !important; }
.dark .seo-pillar-vc .toc a { color:#94a3b8 !important; text-decoration:none; }
.dark .seo-pillar-vc .toc a:hover { color:#38bdf8 !important; text-decoration:underline; }
.dark .seo-pillar-vc .toc li { color:#94a3b8 !important; }
.dark .seo-article .toc a { color:#94a3b8 !important; text-decoration:none; }
.dark .seo-article .toc a:hover { color:#38bdf8 !important; text-decoration:underline; }
.dark .seo-article .toc li { color:#94a3b8 !important; }
.dark .seo-pillar-vc .faq details { background:rgba(30,41,59,.5) !important; border-color:rgba(148,163,184,.15) !important; color:#e2e8f0 !important; }
.dark .seo-pillar-vc .faq summary { color:#f1f5f9 !important; }
.dark .seo-pillar-vc th { background:rgba(30,41,59,.5) !important; color:#f1f5f9 !important; }
.dark .seo-pillar-vc td { color:#e2e8f0 !important; border-bottom-color:rgba(148,163,184,.15) !important; }
.dark .seo-pillar-vc code { background:rgba(148,163,184,.15) !important; color:#e2e8f0 !important; }
.dark .seo-pillar-vc .small { color:#94a3b8 !important; }