/*
 * Senticor Core Design System
 * Single consolidated CSS — glass design for light + dark modes
 */

/* ═══════ 1. THEME VARIABLES ═══════ */
:root {
  --layout-max-width: 1100px;
  --sidebar-width: 200px;
  --sidebar-gap: 0.25rem;
  --content-padding: 2rem;
  --glass-bg: rgba(255,255,255,0.55);
  --glass-bg-heavy: rgba(255,255,255,0.85);
  --glass-border: rgba(124,58,237,0.22);
  --glass-blur: 16px;
  --glass-shadow: 0 4px 20px rgba(124,58,237,0.1);
  --header-bg: rgba(248,245,255,0.95);
  --header-border: rgba(124,58,237,0.3);
  --header-shadow: 0 2px 12px rgba(124,58,237,0.12);
  --surface-page: #FFFFFF;
  --surface-card: rgba(255,255,255,0.45);
  --surface-elevated: rgba(255,255,255,0.7);
  --text-heading: #1E293B;
  --text-body: #334155;
  --text-secondary: #374151;
  --text-muted: #4B5563;
  --brand: #7C3AED;
  --brand-dark: #6D28D9;
  --brand-light: #A78BFA;
  --brand-bg: rgba(124,58,237,0.1);
  --border: rgba(124,58,237,0.18);
  --border-medium: rgba(124,58,237,0.3);
  --radius-card: 1rem;
  --radius-pill: 2rem;
  --transition: 200ms ease;
}
[data-theme="dark"] {
  --glass-bg: rgba(27,21,58,0.65);
  --glass-bg-heavy: rgba(27,21,58,0.85);
  --glass-border: rgba(167,139,250,0.2);
  --glass-blur: 12px;
  --glass-shadow: 0 4px 20px rgba(0,0,0,0.3);
  --header-bg: rgba(15,12,36,0.92);
  --header-border: rgba(167,139,250,0.2);
  --header-shadow: 0 2px 12px rgba(0,0,0,0.3);
  --surface-page: #0F0C24;
  --surface-card: rgba(27,21,58,0.6);
  --surface-elevated: rgba(27,21,58,0.85);
  --text-heading: #F5F7FF;
  --text-body: #E7E9F5;
  --text-secondary: rgba(255,255,255,0.7);
  --text-muted: rgba(255,255,255,0.5);
  --brand: #A78BFA;
  --brand-dark: #7C3AED;
  --brand-light: #C4B5FD;
  --brand-bg: rgba(167,139,250,0.12);
  --border: rgba(167,139,250,0.15);
  --border-medium: rgba(167,139,250,0.3);
}

/* ═══════ 2. RESET & BASE ═══════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.6;color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
[data-theme="dark"] body{background:radial-gradient(1200px 1200px at 10% 5%,#0F0C24,#12102A)}
a{color:var(--brand);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--brand-light)}
h1,h2,h3,h4,h5,h6{color:var(--text-heading);line-height:1.3}
[data-theme="dark"] h2{color:var(--brand-light)}
p{color:var(--text-body);margin-bottom:1rem}
ul,ol{margin-left:1.5rem;margin-bottom:1.25rem;color:var(--text-secondary)}
ul li,ol li{margin-bottom:0.5rem}
img{max-width:100%;height:auto}
code{background:#F5F6F7;padding:0.2rem 0.4rem;border-radius:0.25rem;font-size:0.9em;font-family:Monaco,"Courier New",monospace;color:var(--text-heading)}
pre{background:#F5F6F7;padding:1rem;border-radius:0.5rem;overflow-x:auto;margin-bottom:1.5rem;border:1px solid var(--border)}
pre code{background:none;padding:0}
[data-theme="dark"] code{background:rgba(255,255,255,0.04);color:var(--text-body)}
[data-theme="dark"] pre{background:rgba(255,255,255,0.04);border-color:var(--border)}
blockquote{border-left:4px solid var(--brand);padding:1rem 1.5rem;margin:1.5rem 0;color:var(--text-secondary);font-style:italic}
hr{border:none;border-top:2px solid var(--border);margin:2rem 0}
[data-theme="light"] hr{border-top-color:rgba(124,58,237,0.2)}
::selection{background:rgba(124,58,237,0.2);color:var(--text-heading)}
[data-theme="dark"] ::selection{background:rgba(167,139,250,0.3)}

/* ═══════ 3. HEADER (Glass — identical both modes) ═══════ */
header{position:fixed;top:0;left:0;width:100%;z-index:1001;background:var(--header-bg, var(--glass-bg-heavy));backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-bottom:1px solid var(--header-border, var(--glass-border));box-shadow:var(--header-shadow, var(--glass-shadow))}
header .header-content{max-width:calc(var(--layout-max-width) + var(--sidebar-width) + var(--sidebar-gap));margin:0 auto;padding:0.75rem var(--content-padding);display:flex;justify-content:space-between;align-items:center;gap:1.5rem}
header .nav-container{flex:1;display:flex;justify-content:center;align-items:center;gap:1rem}
header .logo{display:flex !important;align-items:center;flex-shrink:0}
header .logo img,header .logo svg{height:40px;width:auto;display:block !important;visibility:visible !important;opacity:1 !important}
.logo .logo-dark{display:block !important}.logo .logo-light{display:none !important}
[data-theme="light"] .logo .logo-dark{display:none !important}
[data-theme="light"] .logo .logo-light{display:block !important}
header nav{display:flex;align-items:center;gap:0.25rem;flex-wrap:wrap}
header nav a{color:var(--text-secondary);padding:0.5rem 0.75rem;border-radius:var(--radius-pill);font-size:0.85rem;font-weight:500;transition:all var(--transition);white-space:nowrap;text-decoration:none}
header nav a:hover,header nav a.active{color:var(--brand);background:var(--brand-bg)}
header nav a.demo-btn{background:linear-gradient(135deg,#7C3AED,#A78BFA) !important;color:white !important;padding:0.5rem 1rem;border-radius:0.75rem;font-weight:600}
header nav a.demo-btn:hover{box-shadow:0 4px 16px rgba(124,58,237,0.35)}
/* Header action icons (GitHub, LinkedIn, Language, Theme) */
.header-actions{display:flex;gap:0.35rem;align-items:center;flex-shrink:0}
.header-icon-btn{color:var(--text-muted);padding:0.4rem;border-radius:0.5rem;transition:all var(--transition);display:flex;align-items:center;justify-content:center;text-decoration:none;background:none;border:none;cursor:pointer;width:34px;height:34px}
.header-icon-btn svg{width:18px;height:18px}
.header-icon-btn:hover{color:var(--brand);background:var(--brand-bg)}
.lang-switch .lang-label{font-size:0.75rem;font-weight:700;letter-spacing:0.5px;color:inherit}
.theme-switch .icon-sun{display:none}.theme-switch .icon-moon{display:block}
[data-theme="dark"] .theme-switch .icon-sun{display:block}
[data-theme="dark"] .theme-switch .icon-moon{display:none}

/* Mobile menu footer (language + theme inside mobile menu) */
.mobile-menu-footer{display:none}
.mobile-menu-controls{display:flex;flex-direction:column;gap:0.5rem;width:100%}
.mobile-ctrl-btn{display:flex;align-items:center;gap:0.75rem;padding:0.875rem 1.5rem;border-radius:0.5rem;font-size:1rem;color:var(--text-secondary);text-decoration:none;background:none;border:none;cursor:pointer;width:100%;text-align:left;transition:background var(--transition)}
.mobile-ctrl-btn:hover{background:var(--brand-bg);color:var(--brand)}
.mobile-ctrl-btn svg{width:20px;height:20px;flex-shrink:0}
.mobile-ctrl-btn .icon-sun{display:none}.mobile-ctrl-btn .icon-moon{display:block}
[data-theme="dark"] .mobile-ctrl-btn .icon-sun{display:block}
[data-theme="dark"] .mobile-ctrl-btn .icon-moon{display:none}

/* Mobile menu */
.mobile-menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:0.5rem;border-radius:0.5rem}
.hamburger-icon span{display:block;width:20px;height:2px;background:var(--text-heading);margin:4px 0;border-radius:1px;transition:all 0.3s;transform-origin:center}
.mobile-menu-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.mobile-menu-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(2){opacity:0;transform:scaleX(0)}
.mobile-menu-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

/* Mobile nav overlay (≤768px) */
@media(max-width:768px){
  .mobile-menu-toggle{display:flex;align-items:center;justify-content:center;position:relative;z-index:1002}
  header .logo{position:relative;z-index:1002}
  .nav-container{display:none !important;position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;background:#0F0F23;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);flex-direction:column;justify-content:flex-start;align-items:center;z-index:1001;padding:80px 2rem 2rem;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box}
  [data-theme="light"] .nav-container.active{background:#FFFFFF !important}
  .nav-container.active{display:flex !important}
  .nav-container nav{flex-direction:column;gap:0.5rem;text-align:center;width:100%}
  .nav-container nav a{font-size:1.125rem;padding:0.875rem 1.5rem;display:block;border-radius:0.5rem}
  .nav-container nav a:hover,.nav-container nav a.active{background:var(--brand-bg)}
  .nav-container nav .demo-btn{margin-top:0.5rem}
  .header-actions{display:none !important}
  .mobile-menu-footer{display:block;width:100%;margin-top:auto;padding-top:1.5rem;border-top:1px solid var(--glass-border)}
}

/* Active nav highlight — glowing pill */
header nav a.active,header nav a.active:link,header nav a.active:visited,
header nav a.active:hover,header nav a.active:focus{
  color:#FFFFFF !important;font-weight:700 !important;
  background:rgba(124,58,237,0.35) !important;
  padding:0.5rem 1rem !important;border-radius:0.5rem !important;
  border:1px solid rgba(167,139,250,0.6) !important;
  box-shadow:0 0 10px rgba(124,58,237,0.3) !important;
}
/* Nav link underline animation */
header nav a{position:relative}
header nav a::after{content:'';position:absolute;bottom:-2px;left:50%;width:0;height:2px;background:var(--brand);border-radius:1px;transform:translateX(-50%);transition:width 0.2s ease}
header nav a:hover::after{width:100%}
/* Light mode nav link colors */
[data-theme="light"] header nav a{color:#1E293B !important;font-weight:600}
[data-theme="light"] header nav a:hover{color:#7C3AED !important}
/* Light mode active nav — solid purple for contrast */
[data-theme="light"] header nav a.active,[data-theme="light"] header nav a.active:link,[data-theme="light"] header nav a.active:visited,[data-theme="light"] header nav a.active:hover,[data-theme="light"] header nav a.active:focus{color:#FFFFFF !important;background:#7C3AED !important;border:1px solid #6D28D9 !important;box-shadow:0 2px 8px rgba(124,58,237,0.3) !important}
/* Light mode dark-bg section overrides */
[data-theme="light"] div[style*="background: linear-gradient(180deg, rgba(15,15,35"]{background:transparent !important;border:1px solid #E2E8F0 !important}
[data-theme="light"] div[style*="background: linear-gradient(180deg, #0F0F23"]{background:transparent !important}
[data-theme="light"] div[style*="background: #0F0F23"],[style*="background:#0f0f23"]{background:transparent !important}

/* ═══════ 4. SIDEBAR (Glass — same design both modes) ═══════ */
.sidebar{position:fixed;left:calc(50% - (var(--layout-max-width) + var(--sidebar-width) + var(--sidebar-gap)) / 2);top:50%;transform:translateY(-50%);z-index:999;width:var(--sidebar-width);background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:0.6rem;padding:0.5rem 0.4rem;box-shadow:var(--glass-shadow);max-height:70vh;overflow-y:auto;scrollbar-width:none;transition:opacity 0.3s ease}
.sidebar::-webkit-scrollbar{display:none}
@media(max-width:1340px){.sidebar{display:none !important}}
.sidebar-content{display:flex;flex-direction:column;height:100%;padding:0}
.sidebar-nav{display:flex;flex-direction:column;justify-content:center;flex:1;padding:1rem 0}
.sidebar .nav-section{max-width:100%;overflow:hidden;padding:0}
.sidebar .nav-section-title{font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:0.8px;color:var(--brand);margin-bottom:0.35rem;padding:0.5rem 0.4rem 0.3rem;border-bottom:1px solid var(--border)}
.sidebar .nav-list{list-style:none;padding:0;margin:0}
.sidebar .nav-item{display:block;padding:0.3rem 0.5rem;font-size:0.8rem;color:var(--text-secondary);text-decoration:none;border-radius:0.35rem;transition:all 0.15s ease;margin:0 0 0.1rem;white-space:normal;overflow:visible;line-height:1.3}
.sidebar .nav-item:hover{background:var(--brand-bg);color:var(--brand)}
.sidebar .nav-item.active{background:rgba(124,58,237,0.12);color:var(--brand-dark);font-weight:600}
[data-theme="dark"] .sidebar .nav-item.active{background:rgba(167,139,250,0.2);color:var(--brand-light)}
.sidebar-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.5);z-index:999;opacity:0;visibility:hidden;transition:all 0.3s}
.sidebar-overlay.active{opacity:1;visibility:visible}

/* ═══════ 5. MAIN CONTENT ═══════ */
main{margin-top:60px;max-width:var(--layout-max-width);margin-left:auto;margin-right:auto;padding-left:var(--content-padding);padding-right:var(--content-padding);min-height:calc(100vh - 200px)}
@media(min-width:1341px){main{margin-left:calc(50% - var(--layout-max-width)/2 + (var(--sidebar-width) + var(--sidebar-gap))/2)}}
/* Content inline links */
article a,main p a,main li a{text-decoration:underline}
article a:hover,main p a:hover,main li a:hover{text-decoration:none}

/* ═══════ 6. FOOTER ═══════ */
footer{background:#F5F6F7;border-top:1px solid var(--border);padding:2rem;margin-top:4rem}
[data-theme="dark"] footer{background:rgba(27,21,58,0.6);border-top-color:var(--border)}
.footer-content{width:90%;max-width:1600px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:0.85rem;color:var(--text-muted)}
.footer-links{display:flex;gap:1.5rem}
.footer-links a{color:var(--text-muted);text-decoration:none;transition:color var(--transition)}
.footer-links a:hover{color:var(--brand)}
.social-links{display:flex;gap:0.75rem;align-items:center}
.social-links a{color:var(--text-muted);display:flex;align-items:center;text-decoration:none;transition:color var(--transition)}
.social-links a svg{width:18px;height:18px}
.social-links a:hover{color:var(--brand)}

/* Callout boxes */
.callout{border-left:4px solid #3F72AF;background:#F5F6F7;padding:1.5rem;border-radius:0.5rem;margin-bottom:2rem}
[data-theme="dark"] .callout{background:var(--surface-card);backdrop-filter:blur(var(--glass-blur));border-color:var(--border)}
.callout-title{margin-top:0;margin-bottom:1rem;color:#3F72AF;font-size:1.25rem}

/* ═══════ 7. GLASS CARDS & COMPONENTS ═══════ */

/* Universal glass card */
.glass-card,.illustration-card,.section-card,.team-card,.stat-card,.feature-item,
.section-person-card,.process-step,.card,.card-responsive,.feature-box,.stat-box{
  background:var(--surface-card);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-card);
  transition:all 0.3s ease;
}
.glass-card:hover,.illustration-card:hover,.section-card:hover,.team-card:hover,
.stat-card:hover,.feature-item:hover{
  background:var(--surface-elevated);
  border-color:var(--border-medium);
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(124,58,237,0.1);
}
[data-theme="dark"] .glass-card:hover,[data-theme="dark"] .illustration-card:hover,
[data-theme="dark"] .section-card:hover,[data-theme="dark"] .team-card:hover{
  box-shadow:0 12px 32px rgba(0,0,0,0.4);
}

/* Use-case cards */
.usecase-card{background:var(--surface-card) !important;backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:var(--radius-card);transition:all 0.3s ease}

/* Section page styles */
.section-page{color:var(--text-body)}
.section-page h1,.section-page h2,.section-page h3,.section-page h4{color:var(--text-heading)}
.section-sidebar{position:sticky;top:100px;background:var(--surface-card);border:1px solid var(--glass-border);border-radius:12px;padding:1.5rem}

/* Dark mode card overrides (class-based) */
[data-theme="dark"] .context-package-card,[data-theme="dark"] .journey-card,
[data-theme="dark"] .operations-card,[data-theme="dark"] .journey-step,
[data-theme="dark"] .evolution-card,[data-theme="dark"] .trust-card,
[data-theme="dark"] .timeline-card,[data-theme="dark"] .action-card,
[data-theme="dark"] .architecture-card,[data-theme="dark"] .compliance-badge{
  background:rgba(27,21,58,0.8) !important;
  backdrop-filter:blur(8px) !important;-webkit-backdrop-filter:blur(8px) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,0.05),0 4px 20px rgba(0,0,0,0.3) !important;
}
[data-theme="dark"] .featured-card{
  background:linear-gradient(135deg,rgba(156,107,255,0.15),rgba(61,112,93,0.15)) !important;
  border:2px solid rgba(156,107,255,0.3) !important;
  box-shadow:0 0 0 1px rgba(156,107,255,0.2),0 8px 32px rgba(156,107,255,0.2) !important;
}
[data-theme="dark"] .context-package-card strong,[data-theme="dark"] .journey-card h3,
[data-theme="dark"] .operations-card strong,[data-theme="dark"] .journey-step h3,
[data-theme="dark"] .evolution-card h4,[data-theme="dark"] .trust-card strong,
[data-theme="dark"] .timeline-card strong,[data-theme="dark"] .action-card strong,
[data-theme="dark"] .architecture-card h3,[data-theme="dark"] .featured-card h3,
[data-theme="dark"] .featured-card h4{color:var(--text-heading) !important}
[data-theme="dark"] .context-package-card p,[data-theme="dark"] .journey-card p,
[data-theme="dark"] .journey-step p,[data-theme="dark"] .evolution-card p,
[data-theme="dark"] .trust-card p,[data-theme="dark"] .timeline-card p,
[data-theme="dark"] .action-card p,[data-theme="dark"] .architecture-card ul,
[data-theme="dark"] .architecture-card li{color:var(--text-muted) !important}

/* ═══════ 8. BUTTONS ═══════ */
.cta-secondary,a.cta-secondary,a.secondary,button.secondary,.section-btn.secondary{
  background:#FFFFFF !important;color:#6D28D9 !important;border:2px solid #6D28D9 !important;
  backdrop-filter:none !important;border-radius:var(--radius-pill);padding:0.75rem 1.5rem;
  font-weight:600;cursor:pointer;transition:all var(--transition);text-decoration:none;display:inline-block
}
[data-theme="dark"] .cta-secondary,[data-theme="dark"] a.cta-secondary{
  background:transparent !important;color:#A78BFA !important;border-color:rgba(167,139,250,0.5) !important
}

/* ═══════ 9. FORMS & TABLES ═══════ */
input,textarea,select{background:#FFFFFF;border:1px solid var(--border-medium);color:var(--text-heading);border-radius:0.5rem;padding:0.75rem 1rem;font-size:0.9rem;transition:border-color var(--transition)}
input:focus,textarea:focus,select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg);outline:none}
[data-theme="dark"] input,[data-theme="dark"] textarea,[data-theme="dark"] select{background:rgba(27,21,58,0.6);border-color:var(--border-medium);color:var(--text-body)}
table{background:#FFFFFF;border:1px solid var(--border);border-collapse:collapse;width:100%;border-radius:0.5rem;overflow:hidden}
th{background:#F1F5F9;color:var(--text-heading);border-bottom:2px solid var(--border-medium);padding:0.75rem 1rem;text-align:left;font-weight:600;font-size:0.85rem}
td{border-bottom:1px solid var(--border);color:var(--text-secondary);padding:0.75rem 1rem;font-size:0.85rem}
[data-theme="dark"] table{background:var(--surface-card);border-color:var(--border)}
[data-theme="dark"] th{background:rgba(167,139,250,0.1);color:var(--text-heading);border-color:var(--border)}
[data-theme="dark"] td{border-color:var(--border);color:var(--text-body)}

/* ═══════ 10. DARK MODE — INLINE STYLE OVERRIDES ═══════ */
/* These override inline styles set in markdown content for dark mode */

/* White text overrides */
[data-theme="dark"] [style*="color: #1E293B"],[style*="color:#1e293b"],[data-theme="dark"] [style*="color: #334155"],[style*="color:#334155"],
[data-theme="dark"] [style*="color: #2E2E38"],[style*="color:#2e2e38"]{color:var(--text-heading) !important}
[data-theme="dark"] [style*="color: #475569"],[style*="color:#475569"],[data-theme="dark"] [style*="color: #64748B"],[style*="color:#64748b"],
[data-theme="dark"] [style*="color: #374151"],[style*="color:#374151"]{color:var(--text-secondary) !important}
[data-theme="dark"] [style*="color: #4B5563"],[style*="color:#4b5563"]{color:#9CA0B8 !important}
[data-theme="dark"] [style*="color: #6B7280"],[style*="color:#6b7280"]{color:#8B8FA8 !important}
[data-theme="dark"] [style*="color: #1D4ED8"],[style*="color:#1d4ed8"]{color:#A5B4FC !important}
[data-theme="dark"] h2[style*="color: white"],[style*="color:white"],[data-theme="dark"] h3[style*="color: white"],[style*="color:white"],
[data-theme="dark"] h4[style*="color: white"],[style*="color:white"]{color:var(--text-heading) !important}
[data-theme="dark"] p[style*="color: rgba(255,255,255"]{color:var(--text-body) !important}
[data-theme="dark"] span[style*="color: white"],[style*="color:white"]{color:var(--text-heading) !important}
[data-theme="dark"] strong[style*="color: white"],[style*="color:white"]{color:var(--text-heading) !important}

/* Solid light hex backgrounds → transparent/tinted */
[data-theme="dark"] [style*="#FAFAFA"],[style*="#fafafa"]{background:transparent !important}
[data-theme="dark"] [style*="#F8FAFC"],[style*="#f8fafc"]{background:transparent !important}
[data-theme="dark"] [style*="#F1F5F9"],[style*="#f1f5f9"]{background:transparent !important}
[data-theme="dark"] [style*="#F3F4F6"],[style*="#f3f4f6"]{background:rgba(167,139,250,0.12) !important;color:#C7CAE0 !important;border-color:rgba(167,139,250,0.25) !important}
[data-theme="dark"] [style*="#EDE9FE"],[style*="#ede9fe"]{background:rgba(124,58,237,0.12) !important}
[data-theme="dark"] [style*="#F5F3FF"],[style*="#f5f3ff"]{background:rgba(124,58,237,0.15) !important}
[data-theme="dark"] [style*="#FAF8FF"],[style*="#faf8ff"]{background:rgba(124,58,237,0.12) !important}
[data-theme="dark"] [style*="#F0FDF4"],[style*="#f0fdf4"]{background:rgba(5,150,105,0.15) !important}
[data-theme="dark"] [style*="#F0F9FF"],[style*="#f0f9ff"]{background:rgba(8,145,178,0.15) !important}
[data-theme="dark"] [style*="#FEF2F2"],[style*="#fef2f2"]{background:rgba(220,38,38,0.15) !important}
[data-theme="dark"] [style*="#FFF7ED"],[style*="#fff7ed"]{background:rgba(234,88,12,0.12) !important}
[data-theme="dark"] [style*="#FFFBEB"],[style*="#fffbeb"]{background:rgba(217,119,6,0.12) !important}
[data-theme="dark"] [style*="#DBEAFE"],[style*="#dbeafe"]{background:rgba(99,102,241,0.2) !important;color:#A5B4FC !important}
[data-theme="dark"] [style*="#FEE2E2"],[style*="#fee2e2"]{background:rgba(220,38,38,0.18) !important;border-color:rgba(220,38,38,0.3) !important}
[data-theme="dark"] [style*="#D1FAE5"],[style*="#d1fae5"]{background:rgba(5,150,105,0.18) !important;border-color:rgba(5,150,105,0.3) !important}
[data-theme="dark"] [style*="#FECACA"],[style*="#fecaca"]{border-color:rgba(220,38,38,0.35) !important}
[data-theme="dark"] [style*="#A7F3D0"],[style*="#a7f3d0"]{border-color:rgba(5,150,105,0.35) !important}
[data-theme="dark"] [style*="#D1D5DB"],[style*="#d1d5db"]{border-color:rgba(167,139,250,0.25) !important}

/* White/near-white backgrounds → dark glass */
[data-theme="dark"] [style*="background: white"]{background:transparent !important}
[data-theme="dark"] [style*="background: #fff"],[style*="background:#fff"]{background:transparent !important}
[data-theme="dark"] [style*="background: #FFFFFF"],[style*="background:#ffffff"]{background:transparent !important}
[data-theme="dark"] [style*="background: rgba(255,255,255,0.9"]{background:rgba(27,21,58,0.85) !important}
[data-theme="dark"] [style*="background: rgba(255,255,255,0.8"]{background:rgba(27,21,58,0.7) !important}
[data-theme="dark"] [style*="background: rgba(255,255,255,0.75"]{background:rgba(27,21,58,0.65) !important}
[data-theme="dark"] [style*="background: rgba(255,255,255,0.7"]{background:rgba(27,21,58,0.6) !important}
[data-theme="dark"] [style*="background: rgba(255,255,255,0.6"]{background:rgba(27,21,58,0.5) !important}
[data-theme="dark"] [style*="background: rgba(255,255,255,0.5"]{background:rgba(27,21,58,0.4) !important}

/* Dark section backgrounds — keep as-is in dark mode */
[data-theme="dark"] [style*="background: #0F0F23"],[style*="background:#0f0f23"]{background:#0F0F23 !important}
[data-theme="dark"] [style*="background: linear-gradient(180deg, #0F0F23"]{background:transparent !important}

/* Gradient badges/buttons — preserve white text */
[data-theme="dark"] [style*="background: linear-gradient"][style*="color: white"],[style*="color:white"]{color:#FFFFFF !important}
[data-theme="dark"] a[style*="background: linear-gradient"][style*="color: white"],[style*="color:white"]{color:#FFFFFF !important}

/* Semi-transparent colored backgrounds — slightly boost opacity for dark mode */
[data-theme="dark"] span[style*="background: rgba(124,58,237,0.1)"]{background:rgba(124,58,237,0.2) !important}
[data-theme="dark"] span[style*="background: rgba(8,145,178,0.1)"]{background:rgba(8,145,178,0.2) !important}
[data-theme="dark"] span[style*="background: rgba(180,83,9,0.1)"]{background:rgba(180,83,9,0.2) !important}
[data-theme="dark"] span[style*="background: rgba(5,150,105,0.1)"]{background:rgba(5,150,105,0.2) !important}
[data-theme="dark"] div[style*="border-left: 3px solid #10B981"]{background:rgba(5,150,105,0.12) !important;border-color:rgba(16,185,129,0.3) !important}
[data-theme="dark"] [style*="color: #00FF88"],[style*="color:#00ff88"]{color:#4ADE80 !important}
[data-theme="dark"] div[style*="background: rgba(220,38,38,0.1)"]{background:rgba(220,38,38,0.15) !important;border-color:rgba(220,38,38,0.35) !important}
[data-theme="dark"] div[style*="background: rgba(0,255,136,0.1)"]{background:rgba(0,255,136,0.12) !important;border-color:rgba(74,222,128,0.35) !important}

/* KPI gradient cards */
[data-theme="dark"] div[style*="background: linear-gradient(135deg, rgba(124,58,237,0.1)"]{background:linear-gradient(135deg,rgba(124,58,237,0.18),rgba(124,58,237,0.06)) !important}
[data-theme="dark"] div[style*="background: linear-gradient(135deg, rgba(0,212,255,0.1)"]{background:linear-gradient(135deg,rgba(0,212,255,0.18),rgba(0,212,255,0.06)) !important}
[data-theme="dark"] div[style*="background: linear-gradient(135deg, rgba(0,255,136,0.1)"]{background:linear-gradient(135deg,rgba(0,255,136,0.15),rgba(0,255,136,0.04)) !important}
[data-theme="dark"] div[style*="background: linear-gradient(135deg, rgba(217,119,6,0.1)"]{background:linear-gradient(135deg,rgba(217,119,6,0.18),rgba(217,119,6,0.06)) !important}
[data-theme="dark"] div[style*="background: linear-gradient(135deg, rgba(255,211,78,0.1)"]{background:linear-gradient(135deg,rgba(255,211,78,0.15),rgba(255,211,78,0.04)) !important}

/* Checkmark circle backgrounds */
[data-theme="dark"] div[style*="background: rgba(124,58,237,0.1); border-radius: 50%"]{background:rgba(124,58,237,0.2) !important}
[data-theme="dark"] div[style*="background: rgba(8,145,178,0.1); border-radius: 50%"]{background:rgba(8,145,178,0.2) !important}
[data-theme="dark"] div[style*="background: rgba(5,150,105,0.1); border-radius: 50%"]{background:rgba(5,150,105,0.2) !important}

/* CTA glass box override */
[data-theme="dark"] div[style*="rgba(255,255,255,0.7) 0%, rgba(245,243,255,0.55)"]{
  background:linear-gradient(90deg,#7C3AED,#A78BFA,#0891B2,#059669) top/100% 4px no-repeat,
  linear-gradient(180deg,rgba(27,21,58,0.85),rgba(15,12,36,0.9),rgba(27,21,58,0.85)) !important;
  backdrop-filter:blur(24px) saturate(1.3) !important;border-color:rgba(124,58,237,0.3) !important;
  box-shadow:0 20px 60px rgba(0,0,0,0.4),inset 0 1px 0 rgba(167,139,250,0.15) !important;
}

/* ═══════ 11. LIGHT MODE — SECTION OVERRIDES ═══════ */
/* Sections get transparent backgrounds — no dark boxes */
[data-theme="light"] section{background:transparent}
[data-theme="light"] section[style*="background: linear-gradient(180deg, #0F0F23"],
[data-theme="light"] section[style*="background: #0F0F23"],[style*="background:#0f0f23"],
[data-theme="light"] [style*="background: linear-gradient(180deg, #0F0F23"],
[data-theme="light"] [style*="background: rgba(15,15,35"]{background:transparent !important}

/* Force dark-bg text to dark colors in light mode — skip elements with their own dark background */
[data-theme="light"] [style*="color: white"],[style*="color:white"]:not([style*="background: linear-gradient"]):not([style*="background:linear-gradient"]):not([style*="background: #"]):not([style*="background:#"]):not([style*="background: rgba("]):not([style*="background:rgba("]){color:var(--text-heading) !important}
[data-theme="light"] [style*="color: rgba(255,255,255,0.9"],[style*="color:rgba(255,255,255,0.9"]:not([style*="background: linear-gradient"]):not([style*="background:linear-gradient"]):not([style*="background: #"]):not([style*="background:#"]):not([style*="background: rgba("]):not([style*="background:rgba("]){color:var(--text-body) !important}
[data-theme="light"] [style*="color: rgba(255,255,255,0.8"],[style*="color:rgba(255,255,255,0.8"]:not([style*="background: linear-gradient"]):not([style*="background:linear-gradient"]):not([style*="background: #"]):not([style*="background:#"]):not([style*="background: rgba("]):not([style*="background:rgba("]){color:var(--text-secondary) !important}
[data-theme="light"] [style*="color: rgba(255,255,255,0.7"],[style*="color:rgba(255,255,255,0.7"]:not([style*="background: linear-gradient"]):not([style*="background:linear-gradient"]):not([style*="background: #"]):not([style*="background:#"]):not([style*="background: rgba("]):not([style*="background:rgba("]){color:var(--text-secondary) !important}
[data-theme="light"] [style*="color: rgba(255,255,255,0.6"],[style*="color:rgba(255,255,255,0.6"]:not([style*="background: linear-gradient"]):not([style*="background:linear-gradient"]):not([style*="background: #"]):not([style*="background:#"]):not([style*="background: rgba("]):not([style*="background:rgba("]){color:var(--text-muted) !important}
[data-theme="light"] [style*="color: rgba(255,255,255,0.5"],[style*="color:rgba(255,255,255,0.5"]:not([style*="background: linear-gradient"]):not([style*="background:linear-gradient"]):not([style*="background: #"]):not([style*="background:#"]):not([style*="background: rgba("]):not([style*="background:rgba("]){color:var(--text-muted) !important}
[data-theme="light"] [style*="color: rgba(255,255,255,0.3"],[style*="color:rgba(255,255,255,0.3"]:not([style*="background: linear-gradient"]):not([style*="background:linear-gradient"]):not([style*="background: #"]):not([style*="background:#"]):not([style*="background: rgba("]):not([style*="background:rgba("]){color:var(--text-muted) !important}
[data-theme="light"] [style*="color: #A78BFA"],[style*="color:#a78bfa"]{color:#6D28D9 !important}
[data-theme="light"] [style*="color: #00D4FF"],[style*="color:#00d4ff"]{color:#0891B2 !important}
[data-theme="light"] [style*="color: #00FF88"],[style*="color:#00ff88"]{color:#059669 !important}
[data-theme="light"] [style*="color: #FFD34E"],[style*="color:#ffd34e"]{color:#CA8A04 !important}

/* Preserve white/light text inside ANY inline dark-background container in light mode */
/* Specificity bumped via :not(._a):not(._b) to beat the override rules above */
[data-theme="light"] [style*="background: linear-gradient"] [style*="color: white"],[style*="color:white"]:not(._a):not(._b){color:white !important}
[data-theme="light"] [style*="background: linear-gradient"] [style*="color: rgba(255,255,255"]:not(._a):not(._b){color:rgba(255,255,255,0.85) !important}
[data-theme="light"] [style*="background: #"] [style*="color: white"],[style*="color:white"]:not(._a):not(._b){color:white !important}
[data-theme="light"] [style*="background: rgba("] [style*="color: white"],[style*="color:white"]:not(._a):not(._b){color:white !important}
[data-theme="light"] [style*="background: rgba("] [style*="color: rgba(255,255,255"]:not(._a):not(._b){color:rgba(255,255,255,0.85) !important}

/* Inline white/semi-white backgrounds → transparent in light mode */
[data-theme="light"] [style*="background: rgba(255,255,255,0.8"],
[data-theme="light"] [style*="background: rgba(255,255,255,0.9"],
[data-theme="light"] [style*="background: rgba(255,255,255,0.95"],
[data-theme="light"] [style*="background: white"],
[data-theme="light"] [style*="background: #fff"],[style*="background:#fff"],
[data-theme="light"] [style*="background-color: white"]{background:transparent !important;box-shadow:none !important}

/* Light mode: SVG image switching via CSS content */
:root:not([data-theme="dark"]) img[src*="context-flow.svg"]:not([src*="-light"]){content:url("/images/context-flow-light.svg")}

/* Knowledge graph bg */
#knowledge-graph-bg{background:linear-gradient(180deg,#0F0F23,#1a1a3e,#0F0F23)}
[data-theme="light"] #knowledge-graph-bg{background:transparent !important}

/* ═══════ 12. RESPONSIVE ═══════ */
@media(max-width:1400px){
  main{padding-left:1.5rem;padding-right:1.5rem}
  header .header-content{padding-left:1.5rem;padding-right:1.5rem}
}
@media(max-width:1024px){
  main,.footer-content{width:95%}
  /* Tablet: 3- and 4-col grids → 2 columns */
  .grid-3,main [style*="repeat(3"]{grid-template-columns:repeat(2,1fr) !important}
  .grid-4,main [style*="repeat(4"]{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:768px){
  .sidebar-overlay{display:none !important}
  main{padding-left:1rem;padding-right:1rem;width:100%;overflow-x:hidden}
  header .header-content{padding-left:1rem;padding-right:1rem}
  /* Mobile grids → single column */
  .grid-4,main [style*="grid-template-columns"]{display:grid !important;grid-template-columns:1fr !important}
  main [style*="grid-template-columns"] > div{margin-bottom:1.5rem}
  main [style*="grid-template-columns"] > div:last-child{margin-bottom:0}
  main [style*="padding: 2rem"],main [style*="padding: 2.5rem"]{padding:1.25rem !important}
  main img{max-width:100%;height:auto}
  main table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:480px){
  main{padding:1rem 0.75rem}
}
/* Scroll hint for horizontally-scrollable sections (≤900px) */
@media(max-width:900px){
  .scroll-hint-mobile{display:block !important}
}
/* Override narrow max-width containers */
main [style*="max-width: 900px"],main [style*="max-width: 800px"]{max-width:100% !important}
main [style*="grid-template-columns"]{width:100%}

/* ═══════ 13. ACCESSIBILITY ═══════ */
.skip-to-content{position:absolute;top:-100%;left:50%;transform:translateX(-50%);z-index:10001;background:var(--brand);color:#fff;padding:0.75rem 1.5rem;border-radius:0 0 0.5rem 0.5rem;font-weight:700;text-decoration:none;font-size:1rem;transition:top 0.2s}
.skip-to-content:focus{top:0}
@media(prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}
.sidebar .nav-item:focus,header nav a:focus,.header-icon-btn:focus{outline:2px solid var(--brand);outline-offset:2px}
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(prefers-contrast:high){
  [data-theme="dark"]{--text-heading:#FFFFFF;--text-body:#FFFFFF;--border:rgba(255,255,255,0.3)}
}

/* ═══════ 14. ICONS (glass style) ═══════ */
/* Icons inherit parent color by default (currentColor in senticor-icons.css).
   Brand color only applies to standalone icons NOT inside colored containers. */
[data-theme="light"] main > section .senticor-icon{color:var(--brand)}
[data-theme="dark"] main > section .senticor-icon{color:var(--brand-light)}
[style*="color"] .senticor-icon,
[style*="color"] > .senticor-icon{color:inherit !important}

/* ═══════ 15. ADDITIONAL DARK MODE OVERRIDES ═══════ */

/* Feature boxes, demo boxes, process steps */
[data-theme="dark"] .feature-box,[data-theme="dark"] .chaos-demo,
[data-theme="dark"] .knowledge-demo,[data-theme="dark"] .process-step{
  background:rgba(27,21,58,0.8) !important;backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;border:1px solid rgba(255,255,255,0.1) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,0.05),0 4px 20px rgba(0,0,0,0.3) !important}
[data-theme="dark"] .feature-box h4,[data-theme="dark"] .process-step h4{color:var(--text-heading) !important}
[data-theme="dark"] .feature-box p,[data-theme="dark"] .process-step p{color:var(--text-muted) !important}

/* Problem/Solution cards */
[data-theme="dark"] div[style*="background: rgba(226, 114, 91, 0.08)"]{background:rgba(226,114,91,0.15) !important;border:1px solid rgba(226,114,91,0.3) !important}
[data-theme="dark"] div[style*="background: rgba(61, 112, 93, 0.08)"]{background:rgba(61,112,93,0.15) !important;border:1px solid rgba(61,112,93,0.3) !important}

/* Hero vision card */
[data-theme="dark"] .hero-section .animate-on-scroll[style*="#ffffff"]{
  background:linear-gradient(90deg,#7C3AED,#A78BFA,#0891B2,#10B981,#059669) top/100% 4px no-repeat,
  linear-gradient(180deg,rgba(27,21,58,0.92),rgba(15,15,35,0.96)) !important;
  border-color:rgba(124,58,237,0.3) !important;box-shadow:0 8px 32px rgba(124,58,237,0.18) !important}

/* KPI cards */
[data-theme="dark"] .hero-kpi[style*="background: #F0FDF4"],[style*="background:#f0fdf4"]{background:rgba(5,150,105,0.15) !important;border-color:rgba(5,150,105,0.35) !important}
[data-theme="dark"] .hero-kpi[style*="background: #F0F9FF"],[style*="background:#f0f9ff"]{background:rgba(8,145,178,0.15) !important;border-color:rgba(8,145,178,0.35) !important}
[data-theme="dark"] .hero-kpi[style*="background: #F5F3FF"],[style*="background:#f5f3ff"]{background:rgba(124,58,237,0.15) !important;border-color:rgba(124,58,237,0.35) !important}

/* Glass CTA boxes — dark mode override for light glass backgrounds */
[data-theme="dark"] [style*="rgba(255,255,255,0.7)"],
[data-theme="dark"] [style*="rgba(255,255,255,.7)"]{
  background:linear-gradient(90deg,#7C3AED,#A78BFA,#0891B2,#059669) top/100% 4px no-repeat,
  linear-gradient(180deg,rgba(27,21,58,0.92),rgba(15,15,35,0.96)) !important;
  border-color:rgba(124,58,237,0.3) !important;
  box-shadow:0 12px 40px rgba(124,58,237,0.18),inset 0 1px 0 rgba(255,255,255,0.06) !important}

/* CTA buttons in dark mode */
[data-theme="dark"] a[style*="background: white"]{background:transparent !important;color:#FFFFFF !important;border:2px solid rgba(167,139,250,0.5) !important}
[data-theme="dark"] a[style*="background: rgba(255,255,255,0.75)"],[data-theme="dark"] a[style*="background: rgba(255,255,255,0.15)"]{background:transparent !important;color:#FFFFFF !important;border-color:rgba(167,139,250,0.5) !important}
[data-theme="dark"] .platform-tab[style*="background: white"]{background:rgba(27,21,58,0.6) !important;border-color:rgba(124,58,237,0.3) !important}

/* Dark text colors → light in dark mode */
[data-theme="dark"] [style*="color: #333"],[style*="color:#333"]{color:#E7E9F5 !important}
[data-theme="dark"] [style*="color: #0F0F23"],[style*="color:#0f0f23"]{color:#F5F7FF !important}
[data-theme="dark"] [style*="color: #5B21B6"],[style*="color:#5b21b6"],[data-theme="dark"] [style*="color: #4c1d95"],[style*="color:#4c1d95"]{color:#C4B5FD !important}
[data-theme="dark"] [style*="color: black"]{color:#F5F7FF !important}

/* Dark accent colors → brighter */
[data-theme="dark"] [style*="color: #047857"],[style*="color:#047857"]{color:#34D399 !important}
[data-theme="dark"] [style*="color: #0E7490"],[style*="color:#0e7490"]{color:#22D3EE !important}
[data-theme="dark"] [style*="color: #B45309"],[style*="color:#b45309"]{color:#FBBF24 !important}
[data-theme="dark"] [style*="color: #059669"],[style*="color:#059669"]{color:#34D399 !important}
[data-theme="dark"] [style*="color: #0891B2"],[style*="color:#0891b2"]{color:#22D3EE !important}
[data-theme="dark"] [style*="color: #7C3AED"],[style*="color:#7c3aed"]{color:#A78BFA !important}
[data-theme="dark"] [style*="color: #D97706"],[style*="color:#d97706"]{color:#FBBF24 !important}
[data-theme="dark"] [style*="color: #10B981"],[style*="color:#10b981"]{color:#34D399 !important}
[data-theme="dark"] [style*="color: #DC2626"],[style*="color:#dc2626"]{color:#F87171 !important}
[data-theme="dark"] [style*="color: #EF4444"],[data-theme="dark"] [style*="color:#ef4444"]{color:#FCA5A5 !important}
[data-theme="dark"] [style*="color: #8B5CF6"],[data-theme="dark"] [style*="color:#8b5cf6"]{color:#C4B5FD !important}
[data-theme="dark"] [style*="color: #EA580C"],[data-theme="dark"] [style*="color:#ea580c"]{color:#FB923C !important}
[data-theme="dark"] [style*="color: #C2410C"],[data-theme="dark"] [style*="color:#c2410c"]{color:#FB923C !important}
[data-theme="dark"] [style*="color: #92400E"],[data-theme="dark"] [style*="color:#92400e"]{color:#FBBF24 !important}
[data-theme="dark"] [style*="color: #6366F1"],[data-theme="dark"] [style*="color:#6366f1"]{color:#A5B4FC !important}
[data-theme="dark"] [style*="color: #B8860B"],[data-theme="dark"] [style*="color:#b8860b"]{color:#FBBF24 !important}

/* Hover-lift cards */
[data-theme="dark"] .hover-lift{border-color:rgba(167,139,250,0.2) !important}
[data-theme="dark"] .hover-lift:hover{box-shadow:0 8px 25px rgba(167,139,250,0.2) !important}
[data-theme="dark"] .hover-glow:hover{box-shadow:0 0 30px rgba(167,139,250,0.35) !important}

/* Tinted hover-lift cards with gradient top stripe */
[data-theme="dark"] .hover-lift[style*="#FEF2F2"],[style*="#fef2f2"]{background:linear-gradient(90deg,#DC2626,#F87171) top/100% 4px no-repeat,rgba(220,38,38,0.12) !important}
[data-theme="dark"] .hover-lift[style*="#F0FDF4"],[style*="#f0fdf4"]{background:linear-gradient(90deg,#059669,#10B981) top/100% 4px no-repeat,rgba(5,150,105,0.15) !important}
[data-theme="dark"] .hover-lift[style*="#F0F9FF"],[style*="#f0f9ff"]{background:linear-gradient(90deg,#0891B2,#22D3EE) top/100% 4px no-repeat,rgba(8,145,178,0.15) !important}
[data-theme="dark"] .hover-lift[style*="#FAF8FF"],[style*="#faf8ff"],[data-theme="dark"] .hover-lift[style*="#faf8ff"]{background:linear-gradient(90deg,#7C3AED,#A78BFA) top/100% 4px no-repeat,rgba(124,58,237,0.12) !important}
[data-theme="dark"] .hover-lift[style*="#FFF7ED"],[style*="#fff7ed"]{background:linear-gradient(90deg,#EA580C,#FB923C) top/100% 4px no-repeat,rgba(234,88,12,0.12) !important}
[data-theme="dark"] .hover-lift[style*="#F5F3FF"],[style*="#f5f3ff"]{background:linear-gradient(90deg,#7C3AED,#A78BFA) top/100% 4px no-repeat,rgba(124,58,237,0.15) !important}
[data-theme="dark"] .hover-lift[style*="#FFFBEB"],[style*="#fffbeb"]{background:linear-gradient(90deg,#D97706,#FBBF24) top/100% 4px no-repeat,rgba(217,119,6,0.12) !important}

/* Governance intro card */
[data-theme="dark"] .gov-intro-card{background:linear-gradient(90deg,#7C3AED,#A78BFA,#0891B2,#059669) top/100% 4px no-repeat,rgba(15,10,35,0.85) !important;border-color:rgba(167,139,250,0.3) !important;box-shadow:0 12px 40px rgba(0,0,0,0.3),inset 0 1px 0 rgba(167,139,250,0.15) !important}

/* Hero KPI boxes (generic) */
[data-theme="dark"] .hero-kpi{background:rgba(30,20,60,0.6) !important;border-color:rgba(167,139,250,0.25) !important;box-shadow:none !important}
[data-theme="dark"] .hero-kpi div[style*="color: #4B5563"],[style*="color:#4b5563"]{color:#A0A3BD !important}

/* Context-flow dialog (how-it-works) */
[data-theme="dark"] .cf-dialog-inner-hiw{background:#1a1a2e}

/* Use-case card wrappers */
[data-theme="dark"] div[style*="border-top: 3px solid"][style*="border-radius: 1.25rem"][style*="padding: 2.5rem"]{background-color:rgba(27,21,58,0.4) !important;backdrop-filter:blur(4px)}
[data-theme="dark"] div[style*="border-top: 3px solid"][style*="border-radius: 1.25rem"][style*="padding: 2rem"]{background-color:rgba(27,21,58,0.35) !important;backdrop-filter:blur(4px)}

/* Tag pill backgrounds — boost opacity */
[data-theme="dark"] span[style*="border-radius: 2rem"][style*="font-weight: 600"]{border-color:rgba(255,255,255,0.15) !important}
[data-theme="dark"] span[style*="background: rgba(124,58,237,0.08)"]{background:rgba(124,58,237,0.18) !important}
[data-theme="dark"] span[style*="background: rgba(8,145,178,0.08)"]{background:rgba(8,145,178,0.18) !important}
[data-theme="dark"] span[style*="background: rgba(217,119,6,0.08)"]{background:rgba(217,119,6,0.18) !important}
[data-theme="dark"] span[style*="background: rgba(5,150,105,0.08)"]{background:rgba(5,150,105,0.18) !important}
[data-theme="dark"] span[style*="background: rgba(220,38,38,0.08)"]{background:rgba(220,38,38,0.18) !important}

/* Section-level white backgrounds */
[data-theme="dark"] section[style*="background: white"]{background:transparent !important}
[data-theme="dark"] section[style*="background: linear-gradient"][style*="white"]{background:transparent !important}
[data-theme="dark"] div[style*="no-repeat, white"]{background-color:rgba(25,20,55,0.6) !important}
[data-theme="dark"] div[style*="background: white"]:not([style*="linear-gradient"]){background:rgba(25,20,55,0.6) !important;border-color:rgba(167,139,250,0.25) !important}

/* Screenshots */
[data-theme="dark"] img[style*="border-radius"]{border-color:rgba(167,139,250,0.2) !important;box-shadow:0 4px 20px rgba(0,0,0,0.4) !important}

/* Callout variants */
[data-theme="dark"] .callout--warning{border-left-color:#F59E0B;background:rgba(245,158,11,0.1)}
[data-theme="dark"] .callout--warning .callout-title{color:#F59E0B}
[data-theme="dark"] .callout--success{border-left-color:#22C55E;background:rgba(34,197,94,0.1)}
[data-theme="dark"] .callout--success .callout-title{color:#22C55E}

/* Breadcrumb */
[data-theme="dark"] .breadcrumb,[data-theme="dark"] .breadcrumb a{color:var(--text-muted)}
[data-theme="dark"] .breadcrumb a:hover{color:var(--brand-light)}

/* Theme toggle */
.theme-toggle{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;border-radius:0.5rem;background:transparent;border:1px solid var(--border);color:var(--text-heading);cursor:pointer;font-size:0.9rem;transition:all 0.2s}
.theme-toggle:hover{background:var(--brand-bg);border-color:var(--brand)}
.theme-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.theme-icon{font-family:'Material Symbols Outlined';font-size:1.25rem;line-height:1;display:inline-block}

/* Sidebar nav links (handbook-style) */
[data-theme="dark"] .sidebar-nav-link{color:var(--text-secondary)}
[data-theme="dark"] .sidebar-nav-link:hover{background:rgba(255,255,255,0.05)}
[data-theme="dark"] .sidebar-nav-link--active{color:var(--brand-light);background:rgba(255,255,255,0.05)}
[data-theme="dark"] .sidebar-nav-sublink{color:var(--text-secondary)}
[data-theme="dark"] .sidebar-nav-sublink:hover,[data-theme="dark"] .sidebar-nav-sublink--active{color:var(--brand-light)}

/* SR-only utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
#theme-announcement{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ═══════ 16. THEME-SPECIFIC VISIBILITY ═══════ */
.dark-only { display: block !important; }
.light-only { display: none !important; }
[data-theme="light"] .dark-only { display: none !important; }
[data-theme="light"] .light-only { display: block !important; }

/* ═══════ 17. PROGRESSIVE DISCLOSURE ═══════ */
details.sc-collapse{margin:1.5rem 0;border-radius:1rem;overflow:visible}
details.sc-collapse summary{cursor:pointer;padding:1rem 1.5rem;font-weight:700;font-size:1rem;color:var(--text-heading);background:var(--glass-bg);border:1.5px solid var(--glass-border);border-radius:1rem;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:0.75rem;transition:border-radius 0.15s,background 0.2s}
details.sc-collapse summary::-webkit-details-marker{display:none}
details.sc-collapse summary::after{content:"▸";font-size:1.1rem;transition:transform 0.2s;flex-shrink:0;color:var(--text-muted)}
details.sc-collapse summary:hover{background:var(--glass-bg-heavy)}
details.sc-collapse[open] summary{border-radius:1rem 1rem 0 0;border-bottom-color:transparent}
details.sc-collapse[open] summary::after{transform:rotate(90deg)}
details.sc-collapse .sc-collapse-body{padding:1.5rem;border:1.5px solid var(--glass-border);border-top:none;border-radius:0 0 1rem 1rem;background:var(--glass-bg)}
[data-theme="dark"] details.sc-collapse summary{background:rgba(27,21,58,0.4);border-color:rgba(167,139,250,0.2)}
[data-theme="dark"] details.sc-collapse summary:hover{background:rgba(27,21,58,0.6)}
[data-theme="dark"] details.sc-collapse .sc-collapse-body{background:rgba(27,21,58,0.3);border-color:rgba(167,139,250,0.2)}

/* ═══════ CF-DIALOG & ENLARGE BTN (used on multiple pages) ═══════ */
.cf-enlarge-btn{display:inline-flex;align-items:center;gap:0.5rem;background:rgba(124,58,237,0.1);border:1.5px solid rgba(124,58,237,0.25);color:#A78BFA;padding:0.6rem 1.25rem;border-radius:0.75rem;font-size:0.85rem;font-weight:600;cursor:pointer;transition:all 0.2s;margin-top:0.5rem}
.cf-enlarge-btn:hover{background:rgba(124,58,237,0.2);border-color:rgba(124,58,237,0.4);transform:translateY(-1px);box-shadow:0 4px 12px rgba(124,58,237,0.15);color:#C4B5FD}
.cf-dialog{border:none!important;background:transparent!important;padding:0!important;max-width:100vw!important;max-height:100vh!important;width:100vw!important;height:100vh!important;margin:0!important;overflow:visible!important;box-sizing:border-box!important;position:fixed!important;inset:0!important;z-index:10000!important;display:none}
.cf-dialog[open]{display:flex!important;align-items:center!important;justify-content:center!important}
.cf-dialog::backdrop{background:rgba(0,0,0,0.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.cf-dialog-inner{background:linear-gradient(180deg,#1e1b4b 0%,#0f0f23 100%);border:2px solid rgba(124,58,237,0.2);border-radius:1rem;padding:1.5rem;box-shadow:0 25px 80px rgba(0,0,0,0.6),0 0 120px rgba(124,58,237,0.08);position:relative;max-height:96vh;overflow:auto;width:98vw;max-width:none;margin:auto}
[data-theme="light"] .cf-dialog-inner{background:linear-gradient(180deg,#f5f3ff 0%,#ede9fe 100%);border-color:rgba(124,58,237,0.15);box-shadow:0 25px 80px rgba(0,0,0,0.15),0 0 120px rgba(124,58,237,0.05)}
.cf-dialog-inner strong{color:#E8E8F0}
[data-theme="light"] .cf-dialog-inner strong{color:#1e1b4b}
.cf-dialog-close{position:absolute;top:1rem;right:1rem;background:rgba(124,58,237,0.15);border:1.5px solid rgba(124,58,237,0.3);width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#A78BFA;transition:all 0.2s;z-index:1}
.cf-dialog-close:hover{background:rgba(124,58,237,0.3);transform:scale(1.1)}
[data-theme="light"] .cf-dialog-close{background:rgba(124,58,237,0.08);border-color:rgba(124,58,237,0.2);color:#7C3AED}
[data-theme="light"] .cf-dialog-close:hover{background:rgba(124,58,237,0.15)}
.cf-dialog img{width:100%;height:auto;border-radius:1rem;border:1px solid rgba(124,58,237,0.15);box-shadow:0 8px 32px rgba(0,0,0,0.3)}
[data-theme="light"] .cf-dialog img{box-shadow:0 8px 32px rgba(124,58,237,0.1);border-color:rgba(124,58,237,0.1)}

/* ═══════ 18. PRINT ═══════ */
@media print{
  header,.sidebar,.sidebar-overlay{display:none !important}
  main{margin:0;padding:0;max-width:100%}
  body{background:#fff;color:#000}
  a{color:#000;text-decoration:underline}
}