/* ===== Cosmic Theme - Shared Dark Space Theme ===== */
/* Loaded after page-specific styles; uses !important to override light theme */

/* === CSS Variable Overrides === */
:root{
  --slate-900:rgba(255,255,255,.95)!important;
  --slate-800:rgba(255,255,255,.85)!important;
  --slate-700:rgba(255,255,255,.75)!important;
  --slate-600:rgba(255,255,255,.6)!important;
  --slate-500:rgba(255,255,255,.5)!important;
  --slate-400:rgba(255,255,255,.4)!important;
  --slate-300:rgba(255,255,255,.3)!important;
  --slate-200:rgba(255,255,255,.12)!important;
  --slate-100:rgba(255,255,255,.04)!important;
  --slate-50:rgba(255,255,255,.02)!important;
  --space-bg:#050507;
  --space-card:rgba(255,255,255,.03);
  --space-border:rgba(255,255,255,.08);
  --text-primary:rgba(255,255,255,.95);
  --text-secondary:rgba(255,255,255,.6);
  --text-tertiary:rgba(255,255,255,.35);
}

/* === Body === */
body{
  background:var(--space-bg)!important;
  color:var(--text-primary)!important;
}

/* === Cosmic Background Layers === */
#cosmicCanvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
.nebula-layer{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;pointer-events:none;overflow:hidden}
.nebula{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5}
.nebula-1{width:600px;height:600px;background:radial-gradient(circle,rgba(37,99,235,.12),transparent 70%);top:-10%;left:-5%;animation:nebulaDrift1 30s ease-in-out infinite}
.nebula-2{width:500px;height:500px;background:radial-gradient(circle,rgba(139,92,246,.1),transparent 70%);top:20%;right:-5%;animation:nebulaDrift2 35s ease-in-out infinite}
.nebula-3{width:450px;height:450px;background:radial-gradient(circle,rgba(16,185,129,.08),transparent 70%);bottom:10%;left:30%;animation:nebulaDrift3 40s ease-in-out infinite}
.nebula-4{width:400px;height:400px;background:radial-gradient(circle,rgba(245,158,11,.06),transparent 70%);top:50%;left:10%;animation:nebulaDrift1 45s ease-in-out infinite reverse}
@keyframes nebulaDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.1)}}
@keyframes nebulaDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-50px,20px) scale(.95)}}
@keyframes nebulaDrift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,40px) scale(1.05)}}

.galaxy{position:fixed;top:30%;left:50%;transform:translate(-50%,-50%);width:800px;height:800px;z-index:0;pointer-events:none;opacity:.12;animation:galaxyRotate 120s linear infinite}
@keyframes galaxyRotate{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Ensure content sits above cosmic background.
   !! .subject-bar / .navbar / .sidebar must NOT be forced to position:relative !!
   They are fixed/sticky elements with their own z-index (100 / 1000 / 1001 / 200)
   defined in each page's CSS. Forcing relative here breaks:
   - the fixed subject bar (scrolls away, offsets overlap)
   - the sticky navbar
   - the mobile sidebar drawer (z-index drops below the 150 backdrop → links unclickable)
   Their original z-index values are already above the canvas (z-index:0). */
.main-content,.container,.hero,.body-container,
.section,.showcase-section,.stats-bar,.why-section,.quote-section,.cta-section,
.footer,.exam-grid,.filter-bar,.quiz-container,.app-grid,.law-grid,
.content-area,.page-content,.wrapper,main,footer{
  position:relative;z-index:1;
}

/* === Subject Bar === */
.subject-bar{
  background:rgba(5,5,7,.95)!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:0.5px solid rgba(255,255,255,.06)!important;
}

/* === Navbar (multiple variants) === */
.navbar{
  background:rgba(5,5,7,.7)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
  border-bottom:0.5px solid rgba(255,255,255,.06)!important;
  box-shadow:none!important;
}
.navbar.scrolled{
  background:rgba(5,5,7,.7)!important;
  box-shadow:none!important;
}
.nav-brand span,.logo-text{color:#fff!important}
.nav-links a{color:rgba(255,255,255,.5)!important}
.nav-links a:hover,.nav-links a.active{color:#60A5FA!important}
.nav-center a{color:rgba(255,255,255,.5)!important}
.nav-center a:hover{color:#fff!important}
.nav-cta{
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
  border:0.5px solid rgba(255,255,255,.15)!important;
}
.nav-cta:hover{background:rgba(255,255,255,.15)!important}
.grade-badge{
  background:rgba(96,165,250,.12)!important;
  color:#60A5FA!important;
}
.avatar{background:rgba(96,165,250,.2)!important;color:#60A5FA!important}

/* === Sidebar === */
.sidebar{
  background:rgba(10,10,14,.8)!important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-right:0.5px solid rgba(255,255,255,.06)!important;
}
.sidebar-header{color:rgba(255,255,255,.35)!important}
.cat-item{color:rgba(255,255,255,.6)!important}
.cat-item:hover{background:rgba(255,255,255,.04)!important}
.cat-item.active{background:rgba(96,165,250,.12)!important;color:#60A5FA!important}
.cat-count{color:rgba(255,255,255,.3)!important}
.law-subitem{color:rgba(255,255,255,.5)!important}
.law-subitem:hover{background:rgba(255,255,255,.04)!important;color:#60A5FA!important}
.law-subitem.active{background:rgba(96,165,250,.1)!important;color:#60A5FA!important}
.sidebar-nav a{color:rgba(255,255,255,.6)!important}
.sidebar-nav a:active{background:rgba(96,165,250,.1)!important;color:#60A5FA!important}
.sidebar-nav{border-bottom-color:rgba(255,255,255,.06)!important}

/* === Content Cards === */
.content-card,.app-card,.symbol-card,.formula-diagram,
.progress-section,.quiz-card,.question-card,.exam-card,
.result-card,.stat-card,.info-card,.detail-card,
.story-detail-modal,.law-detail-card,.filter-bar,
.cat-filter-wrap,.search-bar-wrap{
  background:rgba(255,255,255,.03)!important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-color:rgba(255,255,255,.08)!important;
  color:var(--text-primary)!important;
}
.content-card{background:rgba(255,255,255,.03)!important;border:0.5px solid rgba(255,255,255,.08)!important}

/* === Text Overrides === */
h1,h2,h3,h4,h5,h6{color:#fff!important}
.law-title,.card-title,.section-title{color:#fff!important}
.law-desc,.card-desc{color:rgba(255,255,255,.6)!important}
.breadcrumb{padding:4px 0 8px;margin-bottom:6px}
.breadcrumb .current{color:#fff!important}
.breadcrumb span{color:rgba(255,255,255,.7)!important}
.breadcrumb .sep{color:rgba(255,255,255,.45)!important}

/* === Symbol Cards === */
.symbol-card{background:rgba(255,255,255,.03)!important}
.symbol-card:hover{background:rgba(255,255,255,.05)!important;box-shadow:0 4px 12px rgba(0,0,0,.2)!important}
.symbol-char{color:inherit!important}
.symbol-name{color:rgba(255,255,255,.85)!important}
.symbol-desc{color:rgba(255,255,255,.5)!important}

/* === App Cards === */
.app-card{background:rgba(255,255,255,.03)!important;border:0.5px solid rgba(255,255,255,.08)!important;box-shadow:none!important}
.app-card:hover{border-color:rgba(255,255,255,.15)!important;box-shadow:0 8px 20px rgba(0,0,0,.3)!important}
.app-card-content{background:transparent!important}
.app-card-title{color:#fff!important}
.app-card-desc{color:rgba(255,255,255,.5)!important}

/* === Search Bar === */
.search-bar{
  background:rgba(255,255,255,.05)!important;
  color:rgba(255,255,255,.8)!important;
}
.search-bar:focus-within{
  background:rgba(255,255,255,.08)!important;
  box-shadow:0 0 0 2px rgba(96,165,250,.2)!important;
}
.search-bar input{color:rgba(255,255,255,.8)!important}
.search-bar input::placeholder{color:rgba(255,255,255,.3)!important}
.search-dropdown{
  background:rgba(10,10,14,.95)!important;
  backdrop-filter:blur(20px);
  border-color:rgba(255,255,255,.08)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.4)!important;
}
.suggest-item:hover,.suggest-item.kb-active{background:rgba(255,255,255,.05)!important}
.suggest-name{color:rgba(255,255,255,.85)!important}
.suggest-name mark{background:rgba(96,165,250,.2)!important;color:#60A5FA!important}
.suggest-cat{background:rgba(255,255,255,.06)!important;color:rgba(255,255,255,.4)!important}
.suggest-header{color:rgba(255,255,255,.3)!important}
.suggest-empty{color:rgba(255,255,255,.3)!important}

/* === Progress Section === */
.progress-section{background:rgba(255,255,255,.03)!important;border-color:rgba(255,255,255,.08)!important}
.progress-title{color:rgba(255,255,255,.35)!important}
.progress-label{color:#fff!important}
.progress-bar-bg{background:rgba(255,255,255,.08)!important}
.progress-stats{color:rgba(255,255,255,.4)!important}

/* === Category Filter === */
.cat-btn{
  background:rgba(255,255,255,.04)!important;
  border-color:rgba(255,255,255,.08)!important;
  color:rgba(255,255,255,.6)!important;
}
.cat-btn:hover{border-color:rgba(96,165,250,.3)!important;color:#60A5FA!important}

/* === Nav Buttons === */
.nav-btn{
  background:rgba(255,255,255,.03)!important;
  border-color:rgba(255,255,255,.08)!important;
  color:rgba(255,255,255,.6)!important;
}
.nav-btn:hover:not(:disabled){border-color:#60A5FA!important;color:#60A5FA!important}

/* === Difficulty Badges === */
.diff-badge.easy{background:rgba(52,211,153,.15)!important;color:#34D399!important}
.diff-badge.mid{background:rgba(251,191,36,.15)!important;color:#FBBF24!important}
.diff-badge.hard{background:rgba(239,68,68,.15)!important;color:#F87171!important}

/* === Inputs === */
input[type="text"],input[type="number"],input[type="email"],input[type="password"],
textarea,select{
  background:rgba(255,255,255,.05)!important;
  color:rgba(255,255,255,.9)!important;
  border-color:rgba(255,255,255,.1)!important;
}
input[type="text"]:focus,input[type="number"]:focus,input[type="email"]:focus,
input[type="password"]:focus,textarea:focus,select:focus{
  border-color:rgba(96,165,250,.4)!important;
  box-shadow:0 0 0 2px rgba(96,165,250,.15)!important;
}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.3)!important}

/* === Quiz/Exam Specific === */
.quiz-option,.option-card,.answer-option{
  background:rgba(255,255,255,.03)!important;
  border-color:rgba(255,255,255,.08)!important;
  color:rgba(255,255,255,.8)!important;
}
.quiz-option:hover,.option-card:hover{
  background:rgba(255,255,255,.05)!important;
  border-color:rgba(96,165,250,.2)!important;
}
.quiz-option.selected,.option-card.selected{
  background:rgba(96,165,250,.1)!important;
  border-color:rgba(96,165,250,.4)!important;
}
.quiz-option.correct{
  background:rgba(52,211,153,.1)!important;
  border-color:rgba(52,211,153,.4)!important;
}
.quiz-option.wrong{
  background:rgba(239,68,68,.1)!important;
  border-color:rgba(239,68,68,.4)!important;
}

/* === Answer Card / Result === */
.result-score,.score-display{color:#fff!important}
.result-feedback,.feedback-text{color:rgba(255,255,255,.6)!important}
.explanation-box,.solution-box{
  background:rgba(255,255,255,.03)!important;
  border-color:rgba(255,255,255,.08)!important;
  color:rgba(255,255,255,.7)!important;
}

/* === Story Detail Modal === */
.story-detail-overlay{background:rgba(0,0,0,.7)!important;backdrop-filter:blur(8px)}
.story-detail-modal{
  background:rgba(10,10,14,.95)!important;
  backdrop-filter:blur(30px);
  border-color:rgba(255,255,255,.1)!important;
  color:var(--text-primary)!important;
}
.story-detail-header{border-bottom-color:rgba(255,255,255,.06)!important}
.story-detail-section h4{color:#fff!important}
.story-detail-section p{color:rgba(255,255,255,.6)!important}
.story-detail-close{color:rgba(255,255,255,.4)!important}
.story-detail-close:hover{color:#fff!important}

/* === Footer === */
.footer{
  background:rgba(5,5,7,.95)!important;
  border-top:0.5px solid rgba(255,255,255,.06)!important;
  color:rgba(255,255,255,.35)!important;
}
.footer h4{color:#fff!important}
.footer a{color:rgba(255,255,255,.35)!important}
.footer a:hover{color:#60A5FA!important}
.footer-bottom{border-top-color:rgba(255,255,255,.06)!important}

/* === Misc Elements === */
hr{border-color:rgba(255,255,255,.06)!important}
blockquote{border-left-color:rgba(96,165,250,.3)!important;color:rgba(255,255,255,.7)!important}
code,pre{
  background:rgba(255,255,255,.05)!important;
  color:rgba(255,255,255,.8)!important;
  border-color:rgba(255,255,255,.08)!important;
}

/* === Scrollbar === */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.02)!important}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1)!important;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)!important}

/* === Mobile Nav === */
.mobile-nav-panel,.nav-menu-dropdown{
  background:rgba(5,5,7,.95)!important;
  backdrop-filter:blur(20px);
  border-bottom-color:rgba(255,255,255,.08)!important;
  box-shadow:0 16px 40px rgba(0,0,0,.3)!important;
}
.mobile-nav-panel a,.nav-menu-dropdown a{color:rgba(255,255,255,.7)!important}
.mobile-nav-panel a:active,.nav-menu-dropdown a:active{background:rgba(96,165,250,.08)!important;color:#60A5FA!important}

/* === Subject Filter (exam-bank) === */
.sf-tab{
  background:rgba(255,255,255,.03)!important;
  border-color:rgba(255,255,255,.08)!important;
  color:rgba(255,255,255,.5)!important;
}
.sf-tab.active{
  background:rgba(96,165,250,.12)!important;
  color:#60A5FA!important;
}

/* === Exam Cards === */
.exam-card-mini,.ecm-card{
  background:rgba(255,255,255,.03)!important;
  border-color:rgba(255,255,255,.08)!important;
}
.exam-card-mini:hover{border-color:rgba(255,255,255,.15)!important;box-shadow:0 8px 20px rgba(0,0,0,.3)!important}
.ecm-year,.ecm-province{color:#fff!important}
.ecm-meta{color:rgba(255,255,255,.4)!important}
.ecm-progress{color:rgba(255,255,255,.5)!important}
.ecm-empty{color:rgba(255,255,255,.25)!important}
.empty-tip{color:rgba(255,255,255,.3)!important}

/* === KaTeX / MathJax adjustments === */
.katex{color:rgba(255,255,255,.9)!important}
.formula-text{color:#fff!important}
.formula-caption{color:rgba(255,255,255,.5)!important}
.formula-display{background:rgba(255,255,255,.03)!important}

/* === Story Illustration === */
.story-illustration{box-shadow:0 4px 12px rgba(0,0,0,.3)!important}
.story-illustration.fallback{background:rgba(255,255,255,.05)!important}
.story-img-credit{color:rgba(255,255,255,.25)!important}
.story-text p{color:rgba(255,255,255,.6)!important}

/* === Key Points === */
.kp-text{color:rgba(255,255,255,.6)!important}
.kp-dot{opacity:.8}

/* === Hero (keep dark but ensure consistency) === */
.hero{background:transparent!important}
.hero-bg{background:transparent!important}
.hero-bg::after{display:none!important}

/* === Subject Intro Page Bento === */
.bento-grid,.bento-card,.category-card,.intro-card{
  background:rgba(255,255,255,.03)!important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-color:rgba(255,255,255,.08)!important;
}
.bento-card:hover,.category-card:hover,.intro-card:hover{
  border-color:rgba(255,255,255,.15)!important;
  background:rgba(255,255,255,.05)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.3)!important;
}

/* === Table === */
table{border-color:rgba(255,255,255,.08)!important}
th{background:rgba(255,255,255,.05)!important;color:#fff!important}
td{border-color:rgba(255,255,255,.06)!important;color:rgba(255,255,255,.7)!important}
tr:hover td{background:rgba(255,255,255,.02)!important}

/* === Sponsor / Donation Section === */
.sponsor-card,.donate-card,
.sponsor-section,.sponsor-message,.sponsor-qr,.sponsor-bottom{
  background:rgba(10,10,14,.6)!important;
  border-color:rgba(255,255,255,.08)!important;
  color:var(--text-primary)!important;
}
.sponsor-section{
  background:linear-gradient(180deg,rgba(5,5,7,0) 0%,rgba(16,185,129,.04) 100%)!important;
}
.sponsor-section::before,
.sponsor-section::after{display:none!important}
.sponsor-tag{background:rgba(244,114,182,.1)!important;color:#F472B6!important;border-color:rgba(244,114,182,.25)!important}
.sponsor-title{color:#fff!important}
.sponsor-title .heart{color:#F472B6!important}
.sponsor-subtitle{color:rgba(255,255,255,.6)!important}
.sponsor-subtitle strong{color:#fff!important}
.sponsor-message h3{color:#fff!important}
.sponsor-message p{color:rgba(255,255,255,.7)!important}
.sponsor-message .quote-mark{color:#F472B6!important}
.sponsor-message .signature{color:rgba(255,255,255,.4)!important;border-top-color:rgba(255,255,255,.08)!important}
.sponsor-points{border-top-color:rgba(255,255,255,.08)!important}
.sponsor-point{color:rgba(255,255,255,.7)!important}
.sponsor-qr-name{color:#fff!important}
.sponsor-qr-img-wrap{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.08)!important}
.sponsor-qr-tip{color:rgba(255,255,255,.5)!important}
.sponsor-qr-tip strong{color:#fff!important}
.sponsor-bottom{background:rgba(255,255,255,.03)!important}
.sponsor-bottom p{color:rgba(255,255,255,.7)!important}

/* === Intro page: Impact / Day-in-Life cards (white → glassmorphism) === */
.impact-card,.scenario-card,.day-card{
  background:rgba(255,255,255,.03)!important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-color:rgba(255,255,255,.08)!important;
  color:var(--text-primary)!important;
}
.impact-card:hover,.scenario-card:hover,.day-card:hover{
  border-color:rgba(255,255,255,.15)!important;
  background:rgba(255,255,255,.05)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.3)!important;
}
.impact-card h3,.scenario-card h3,.day-card h3{color:#fff!important}
.impact-card p,.scenario-card p,.day-card p{color:rgba(255,255,255,.6)!important}
.impact-card .ic,.scenario-card .ic,.day-card .ic{color:inherit!important}

/* === Why section (originally light slate-50 bg) === */
.why{
  background:linear-gradient(180deg,rgba(255,255,255,.02) 0%,rgba(255,255,255,.04) 100%)!important;
  border-top:0.5px solid rgba(255,255,255,.06)!important;
  border-bottom:0.5px solid rgba(255,255,255,.06)!important;
}
.why h2{color:#fff!important}
.why .quote{color:rgba(255,255,255,.8)!important}
.why .quote strong{color:#60A5FA!important}
.why .sub{color:rgba(255,255,255,.5)!important}

/* === Buttons (wbtn / btn / pill) === */
.wbtn,.btn-pill,.pill{
  background:rgba(255,255,255,.03)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  color:#fff!important;
  backdrop-filter:blur(10px);
}
.wbtn.ghost,.btn-pill.ghost,.pill.ghost{
  background:rgba(255,255,255,.03)!important;
  border-color:rgba(255,255,255,.12)!important;
  color:#fff!important;
}
.wbtn.ghost:hover,.btn-pill.ghost:hover,.pill.ghost:hover{
  border-color:rgba(96,165,250,.4)!important;
  color:#60A5FA!important;
  background:rgba(96,165,250,.06)!important;
}
.wbtn.primary{background:rgba(37,99,235,.15)!important;color:#fff!important;border-color:rgba(96,165,250,.3)!important}
.wbtn.primary:hover{background:rgba(37,99,235,.25)!important;transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,99,235,.3)!important}

/* === Field chips (category pills in fields section) === */
.chip{
  background:rgba(255,255,255,.03)!important;
  border-color:rgba(255,255,255,.08)!important;
  color:rgba(255,255,255,.7)!important;
  backdrop-filter:blur(10px);
}
.chip:hover{
  border-color:rgba(96,165,250,.4)!important;
  color:#60A5FA!important;
  background:rgba(96,165,250,.06)!important;
  box-shadow:0 6px 18px rgba(0,0,0,.3)!important;
}

/* === Timeline (tl-dot is white originally) === */
.timeline::before{
  background:linear-gradient(180deg,#60A5FA 0%,rgba(96,165,250,.5) 60%,rgba(255,255,255,.1) 100%)!important;
}
.tl-dot{
  background:rgba(5,5,7,.95)!important;
  border-color:#60A5FA!important;
}
.tl-year{background:rgba(96,165,250,.12)!important;color:#60A5FA!important}
.tl-title{color:#fff!important}
.tl-desc{color:rgba(255,255,255,.6)!important}

/* === Fields section title === */
.fields h2{color:#fff!important}
.fields .hint{color:rgba(255,255,255,.4)!important}

/* === Generic white-bg cleanup (covers remaining inline #fff patterns) === */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background-color:#fff"],
[style*="background-color: #fff"]{
  background:rgba(255,255,255,.03)!important;
}
/* Restore colored dots that were caught by broad selectors */
.sb-dot[style*="background:#F59E0B"]{background:#F59E0B!important}
[style*="color:#fff"]{color:#fff!important}
[style*="color:var(--slate-900)"]{color:#fff!important}
[style*="color:var(--slate-800)"]{color:rgba(255,255,255,.85)!important}
[style*="color:var(--slate-700)"]{color:rgba(255,255,255,.75)!important}
[style*="color:var(--slate-600)"]{color:rgba(255,255,255,.6)!important}
[style*="color:var(--slate-500)"]{color:rgba(255,255,255,.5)!important}
[style*="color:#047857"]{color:#34D399!important}
[style*="color:#6D28D9"]{color:#A78BFA!important}
[style*="color:#0F172A"]{color:#fff!important}
[style*="color:#1E293B"]{color:rgba(255,255,255,.9)!important}
[style*="color:#334155"]{color:rgba(255,255,255,.75)!important}
[style*="color:#475569"]{color:rgba(255,255,255,.6)!important}
[style*="color:#64748B"]{color:rgba(255,255,255,.5)!important}
[style*="color:#92400E"]{color:#FBBF24!important}
[style*="color:#166534"]{color:#34D399!important}
[style*="color:#991B1B"]{color:#F87171!important}
[style*="color:#1D4ED8"]{color:#60A5FA!important}

/* === Additional CSS Variable Overrides (non-slate) === */
:root{
  --gray-50:rgba(255,255,255,.02)!important;
  --gray-100:rgba(255,255,255,.04)!important;
  --gray-200:rgba(255,255,255,.08)!important;
  --gray-300:rgba(255,255,255,.12)!important;
  --gray-700:rgba(255,255,255,.7)!important;
  --gray-500:rgba(255,255,255,.55)!important;
  --gray-600:rgba(255,255,255,.5)!important;
  --bg-page:#050507!important;
  --blue-50:rgba(37,99,235,.08)!important;
  --green-50:rgba(16,185,129,.08)!important;
  --purple-50:rgba(139,92,246,.08)!important;
  --primary-light:rgba(96,165,250,.1)!important;
  --primary:#60A5FA!important;
  --blue:#60A5FA!important;
  --green-light:rgba(52,211,153,.1)!important;
  --red-light:rgba(239,68,68,.1)!important;
  --amber-light:rgba(251,191,36,.1)!important;
  --purple-light:rgba(167,139,250,.1)!important;
  --teal-light:rgba(20,184,166,.1)!important;
}

/* === .nav-bar (hyphenated variant, different from .navbar) === */
.nav-bar{
  background:rgba(5,5,7,.7)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
  border-bottom:0.5px solid rgba(255,255,255,.06)!important;
  border-radius:0 0 14px 14px!important;
}
.nav-bar a{color:rgba(255,255,255,.6)!important}
.nav-bar a:hover,.nav-bar a.active{color:#fff!important;background:rgba(255,255,255,.06)!important}

/* === Article pages: section/takeaways/related/callout/formula/diagram === */
.section{background:transparent!important}
.takeaways,.related-card,.formula-box,.diagram-box,
.back-btn,.law-tag,.hero-top,.related-card-img,
.callout-portrait-img-wrap{
  background:rgba(255,255,255,.03)!important;
  border-color:rgba(255,255,255,.08)!important;
}
.back-btn:hover{background:rgba(96,165,250,.08)!important}
.callout{
  background:rgba(251,191,36,.06)!important;
  border-color:rgba(251,191,36,.2)!important;
}
.callout-title{color:#FBBF24!important}
.callout-icon{background:rgba(251,191,36,.12)!important}
.science-callout{
  background:rgba(96,165,250,.05)!important;
  border-color:rgba(96,165,250,.15)!important;
}
.takeaways-title{color:#fff!important}
.section-body p{color:rgba(255,255,255,.7)!important}
.section-body strong{color:rgba(255,255,255,.95)!important;font-weight:600!important}
.section-body em{color:#FBBF24!important;font-style:normal!important}
.hero-title{color:#fff!important}

/* === Article: 正文里引用公式的高亮 chip ===
   物理/化学/数学 article-render.js 通过 inline style 注入 --fc（公式主色），
   这里利用 CSS 变量生成对应色阶的背景/边框/字色，让公式在段落里视觉跳出。
   fallback：未设置 --fc 时用统一琥珀色。 */
.formula-mention{
  display:inline-block;
  padding:2px 10px;
  margin:0 2px;
  border-radius:6px;
  font-family:'SF Mono','JetBrains Mono',Consolas,Monaco,monospace;
  font-weight:600;
  font-size:0.92em;
  letter-spacing:0.3px;
  vertical-align:baseline;
  background:rgba(245,158,11,.14);
  color:#FBBF24;
  border:1px solid rgba(245,158,11,.28);
}
.formula-mention[style*="--fc"]{
  background:rgba(245,158,11,.14);
  color:#FBBF24;
}
/* 使用 CSS 变量做动态色：浏览器原生支持 rgb() 配合 var() */
.formula-mention[style*="--fc:"]{
  background:color-mix(in srgb, var(--fc) 14%, transparent);
  color:var(--fc);
  border:1px solid color-mix(in srgb, var(--fc) 32%, transparent);
}
/* 旧浏览器降级：如果不支持 color-mix，直接用 rgba 回退颜色 */
@supports not (background: color-mix(in srgb, red, blue)){
  .formula-mention[style*="--fc:"]{
    background:var(--fc-bg-fallback, rgba(255,255,255,.06));
    color:var(--fc);
    border:1px solid var(--fc-bd-fallback, rgba(255,255,255,.12));
  }
}

/* === Article/Laws: story-detail-btn & close === */
.story-detail-btn{
  background:rgba(96,165,250,.12)!important;
  color:#60A5FA!important;
  border:0.5px solid rgba(96,165,250,.2)!important;
}
.story-detail-btn:hover{
  background:rgba(96,165,250,.2)!important;
}
.story-detail-close{
  background:rgba(255,255,255,.06)!important;
  color:rgba(255,255,255,.5)!important;
}
.story-detail-close:hover{
  background:rgba(239,68,68,.15)!important;
  color:#F87171!important;
}

/* === Laws pages: misc white-bg elements === */
.mobile-menu-btn{
  background:rgba(255,255,255,.05)!important;
  color:#fff!important;
}
.mobile-menu-btn:hover{background:rgba(96,165,250,.1)!important}
.story-illustration img{background:rgba(255,255,255,.03)!important}
.app-card-img.has-image{background:rgba(255,255,255,.03)!important}

/* === Quiz pages: law-card/quiz-box/ai-section etc === */
.law-card,.quiz-box,.quiz-header,.quiz-footer,
.ai-section,.ai-source,.ai-stat-box,.ai-evo-item{
  background:rgba(255,255,255,.03)!important;
  border-color:rgba(255,255,255,.08)!important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.law-card:hover{border-color:rgba(255,255,255,.15)!important;box-shadow:0 8px 20px rgba(0,0,0,.3)!important}

/* Quiz type tags (9 variants: macaron → semi-transparent) */
.quiz-q-type.SCENE{background:rgba(251,191,36,.12)!important;color:#FBBF24!important}
.quiz-q-type.SYMBOL{background:rgba(96,165,250,.12)!important;color:#60A5FA!important}
.quiz-q-type.FORMULA{background:rgba(167,139,250,.12)!important;color:#A78BFA!important}
.quiz-q-type.TRUE{background:rgba(52,211,153,.12)!important;color:#34D399!important}
.quiz-q-type.ANALYSIS{background:rgba(239,68,68,.12)!important;color:#F87171!important}
.quiz-q-type.CONDITION{background:rgba(20,184,166,.12)!important;color:#2DD4BF!important}
.quiz-q-type.ERROR_FIND{background:rgba(239,68,68,.12)!important;color:#F87171!important}
.quiz-q-type.CATEGORY{background:rgba(52,211,153,.12)!important;color:#34D399!important}
.quiz-q-type.CALC{background:rgba(251,191,36,.12)!important;color:#FBBF24!important}

/* AI source icons & evo tags */
.ai-source-icon{background:rgba(255,255,255,.06)!important}
.ai-source-icon.exam{background:rgba(96,165,250,.12)!important}
.ai-source-icon.trophy{background:rgba(251,191,36,.12)!important}
.ai-source-icon.book{background:rgba(52,211,153,.12)!important}
.ai-source-icon.globe{background:rgba(167,139,250,.12)!important}
.ai-source-status.active{background:rgba(52,211,153,.12)!important;color:#34D399!important}
.ai-source-status.crawling{background:rgba(251,191,36,.12)!important;color:#FBBF24!important}
.ai-evo-gen{background:rgba(96,165,250,.12)!important;color:#60A5FA!important}
.ai-evo-gen.latest{background:rgba(52,211,153,.12)!important;color:#34D399!important}
.ai-evo-quality.latest{color:#A78BFA!important}
.ai-gen-preview-box{background:rgba(52,211,153,.06)!important}

/* === Challenge pages: grade-selector/filter-block/ch-card/ch-box etc === */
.grade-selector,.grade-btn,.filter-block,.ch-chip,
.ch-card,.ch-box,.qa-header,.sym-btn{
  background:rgba(255,255,255,.03)!important;
  border-color:rgba(255,255,255,.08)!important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.grade-btn:hover,.ch-chip:hover{border-color:rgba(96,165,250,.3)!important}
.grade-btn.active{background:rgba(96,165,250,.12)!important;color:#60A5FA!important;border-color:rgba(96,165,250,.3)!important}
.ch-card:hover{border-color:rgba(255,255,255,.15)!important;box-shadow:0 8px 20px rgba(0,0,0,.3)!important}
.sym-btn:hover{background:rgba(96,165,250,.08)!important}

/* === Exam pages: exam-section, answer-card, result, q-option etc === */
.exam-section,.answer-card,.result-diff-stats,.result-kp-stats,
.result-history,.result-sections,.result-q,.rf-btn,
#symbol-panel,.start-hint-content{
  background:rgba(255,255,255,.03)!important;
  border-color:rgba(255,255,255,.08)!important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.progress-bar-track{background:rgba(255,255,255,.08)!important}
.q-label-tag{background:rgba(96,165,250,.1)!important;color:#60A5FA!important}
.rds-bar,.rs-bar{background:rgba(255,255,255,.06)!important}
.rq-partial{background:rgba(251,191,36,.1)!important;color:#FBBF24!important}
.rq-ans-line,.rq-process-text{background:rgba(255,255,255,.02)!important}
.rq-explanation{background:rgba(96,165,250,.06)!important}
.rq-feedback{background:rgba(96,165,250,.05)!important}
.rq-opt.correct-opt{background:rgba(52,211,153,.1)!important;color:#34D399!important}
.rq-opt.wrong-opt{background:rgba(239,68,68,.1)!important;color:#F87171!important}
.btn-back{background:rgba(255,255,255,.05)!important;color:#fff!important}
.btn-back:hover{background:rgba(255,255,255,.08)!important}
.start-hint-content{background:rgba(251,191,36,.08)!important;color:#FBBF24!important}
.sym-tab{background:rgba(255,255,255,.04)!important;color:rgba(255,255,255,.6)!important}
.sym-tab.active{background:rgba(96,165,250,.12)!important;color:#60A5FA!important}

/* Exam: q-option (different from quiz-option) */
.q-option{
  background:rgba(255,255,255,.03)!important;
  border-color:rgba(255,255,255,.08)!important;
  color:rgba(255,255,255,.8)!important;
}
.q-option:hover{background:rgba(255,255,255,.05)!important;border-color:rgba(96,165,250,.2)!important}
.q-option.selected{background:rgba(96,165,250,.1)!important;border-color:rgba(96,165,250,.4)!important}
.q-option .opt-letter{background:rgba(255,255,255,.06)!important;color:#fff!important}
.q-option .opt-text{color:rgba(255,255,255,.85)!important}
/* Exam question text uses light theme text (dark glass bg) */
.exam-question .q-mark-btn{color:#9CA3AF!important}

/* Exam: flash animation fix */
@keyframes flash{0%,100%{background:transparent}50%{background:rgba(251,191,36,.15)}}

/* === Exam home page: tabs/cards/rules/history === */
.exam-subject-tabs,.grade-card,.struct-item,.rules-box,
.history-tab,.history-item{
  background:rgba(255,255,255,.03)!important;
  border-color:rgba(255,255,255,.08)!important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.grade-card:hover{border-color:rgba(255,255,255,.15)!important;box-shadow:0 12px 32px rgba(0,0,0,.3)!important}
.history-item:hover{background:rgba(255,255,255,.05)!important}
.rules-box li::before{background:rgba(96,165,250,.12)!important;color:#60A5FA!important}
.back-link a{background:rgba(255,255,255,.05)!important;color:#fff!important}

/* === Real exam bank/paper pages === */
.paper-title-row,.paper-mode-tabs,.pm-toolbar,
.pm-section,.rm-section,.pm-details,
.om-page,.om-all-error,.empty-tip{
  background:rgba(255,255,255,.03)!important;
  border-color:rgba(255,255,255,.08)!important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.pm-result-card{
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(96,165,250,.04))!important;
  border-color:rgba(255,255,255,.08)!important;
}
/* keep original sticky positioning (top:100px desktop / 96px mobile set by page CSS) */
.paper-fav-btn{background:rgba(255,255,255,.04)!important;color:rgba(255,255,255,.5)!important}
.paper-fav-btn:hover{background:rgba(251,191,36,.1)!important;color:#FBBF24!important}
.paper-fav-btn.active{color:#FBBF24!important}
.mode-tab{background:rgba(255,255,255,.03)!important;color:rgba(255,255,255,.6)!important}
.mode-tab:hover{background:rgba(255,255,255,.05)!important}
.mode-tab.active{background:rgba(96,165,250,.12)!important;color:#60A5FA!important}
.q-type{background:rgba(255,255,255,.06)!important;color:rgba(255,255,255,.6)!important}
.q-opt:hover{background:rgba(255,255,255,.04)!important}
.pm-retry{background:rgba(255,255,255,.05)!important;color:#fff!important}
.om-page-num{background:rgba(255,255,255,.04)!important;color:rgba(255,255,255,.5)!important}
.om-img-error{background:rgba(255,255,255,.03)!important}
.ecm-fav{background:rgba(255,255,255,.04)!important}
.ecm-fav:hover{background:rgba(251,191,36,.1)!important}
.ecm-fav.active{color:#FBBF24!important}

/* === Misc utility === */
.section-subtitle,.hero p.sub,.hero p{color:rgba(255,255,255,.6)!important}
.container,.section,.wrapper,main{color:inherit}
.fade-in{animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* === SVG Diagram Dark Theme Adaptation === */
/* Target SVG elements inside .formula-diagram, .diagram-box, and .story-detail-modal */
/* Light background fills → semi-transparent dark-theme versions */
.formula-diagram svg [fill="#DBEAFE"],
.diagram-box svg [fill="#DBEAFE"],
.story-detail-modal svg [fill="#DBEAFE"],
.formula-diagram svg [fill="#BFDBFE"],
.diagram-box svg [fill="#BFDBFE"],
.story-detail-modal svg [fill="#BFDBFE"],
.formula-diagram svg [fill="#93C5FD"],
.diagram-box svg [fill="#93C5FD"],
.story-detail-modal svg [fill="#93C5FD"],
.formula-diagram svg [fill="#E0F2FE"],
.diagram-box svg [fill="#E0F2FE"],
.story-detail-modal svg [fill="#E0F2FE"],
.formula-diagram svg [fill="#C7D2FE"],
.diagram-box svg [fill="#C7D2FE"],
.story-detail-modal svg [fill="#C7D2FE"],
.formula-diagram svg [fill="#E0E7FF"],
.diagram-box svg [fill="#E0E7FF"],
.story-detail-modal svg [fill="#E0E7FF"]{fill:rgba(96,165,250,.12)!important}

.formula-diagram svg [fill="#D1FAE5"],
.diagram-box svg [fill="#D1FAE5"],
.story-detail-modal svg [fill="#D1FAE5"],
.formula-diagram svg [fill="#A7F3D0"],
.diagram-box svg [fill="#A7F3D0"],
.story-detail-modal svg [fill="#A7F3D0"],
.formula-diagram svg [fill="#ECFDF5"],
.diagram-box svg [fill="#ECFDF5"],
.story-detail-modal svg [fill="#ECFDF5"],
.formula-diagram svg [fill="#F0FDF4"],
.diagram-box svg [fill="#F0FDF4"],
.story-detail-modal svg [fill="#F0FDF4"],
.formula-diagram svg [fill="#6EE7B7"],
.diagram-box svg [fill="#6EE7B7"],
.story-detail-modal svg [fill="#6EE7B7"],
.formula-diagram svg [fill="#99F6E4"],
.diagram-box svg [fill="#99F6E4"],
.story-detail-modal svg [fill="#99F6E4"]{fill:rgba(52,211,153,.12)!important}

.formula-diagram svg [fill="#FEF3C7"],
.diagram-box svg [fill="#FEF3C7"],
.story-detail-modal svg [fill="#FEF3C7"],
.formula-diagram svg [fill="#FDE68A"],
.diagram-box svg [fill="#FDE68A"],
.story-detail-modal svg [fill="#FDE68A"],
.formula-diagram svg [fill="#FFFBEB"],
.diagram-box svg [fill="#FFFBEB"],
.story-detail-modal svg [fill="#FFFBEB"]{fill:rgba(251,191,36,.12)!important}

.formula-diagram svg [fill="#FEE2E2"],
.diagram-box svg [fill="#FEE2E2"],
.story-detail-modal svg [fill="#FEE2E2"],
.formula-diagram svg [fill="#FEF2F2"],
.diagram-box svg [fill="#FEF2F2"],
.story-detail-modal svg [fill="#FEF2F2"],
.formula-diagram svg [fill="#FCA5A5"],
.diagram-box svg [fill="#FCA5A5"],
.story-detail-modal svg [fill="#FCA5A5"]{fill:rgba(239,68,68,.12)!important}

.formula-diagram svg [fill="#EDE9FE"],
.diagram-box svg [fill="#EDE9FE"],
.story-detail-modal svg [fill="#EDE9FE"],
.formula-diagram svg [fill="#F5F3FF"],
.diagram-box svg [fill="#F5F3FF"],
.story-detail-modal svg [fill="#F5F3FF"],
.formula-diagram svg [fill="#FDF4FF"],
.diagram-box svg [fill="#FDF4FF"],
.story-detail-modal svg [fill="#FDF4FF"],
.formula-diagram svg [fill="#C4B5FD"],
.diagram-box svg [fill="#C4B5FD"],
.story-detail-modal svg [fill="#C4B5FD"]{fill:rgba(167,139,250,.12)!important}

.formula-diagram svg [fill="#CFFAFE"],
.diagram-box svg [fill="#CFFAFE"],
.story-detail-modal svg [fill="#CFFAFE"],
.formula-diagram svg [fill="#ECFEFF"],
.diagram-box svg [fill="#ECFEFF"],
.story-detail-modal svg [fill="#ECFEFF"],
.formula-diagram svg [fill="#F0FDFA"],
.diagram-box svg [fill="#F0FDFA"],
.story-detail-modal svg [fill="#F0FDFA"],
.formula-diagram svg [fill="#CCFBF1"],
.diagram-box svg [fill="#CCFBF1"],
.story-detail-modal svg [fill="#CCFBF1"],
.formula-diagram svg [fill="#5EEAD4"],
.diagram-box svg [fill="#5EEAD4"],
.story-detail-modal svg [fill="#5EEAD4"]{fill:rgba(34,211,238,.12)!important}

.formula-diagram svg [fill="#FCE7F3"],
.diagram-box svg [fill="#FCE7F3"],
.story-detail-modal svg [fill="#FCE7F3"],
.formula-diagram svg [fill="#FBCFE8"],
.diagram-box svg [fill="#FBCFE8"],
.story-detail-modal svg [fill="#FBCFE8"],
.formula-diagram svg [fill="#FDF2F8"],
.diagram-box svg [fill="#FDF2F8"],
.story-detail-modal svg [fill="#FDF2F8"]{fill:rgba(244,114,182,.12)!important}

.formula-diagram svg [fill="#F8FAFC"],
.diagram-box svg [fill="#F8FAFC"],
.story-detail-modal svg [fill="#F8FAFC"],
.formula-diagram svg [fill="#F5F5F4"],
.diagram-box svg [fill="#F5F5F4"],
.story-detail-modal svg [fill="#F5F5F4"],
.formula-diagram svg [fill="#CBD5E1"],
.diagram-box svg [fill="#CBD5E1"],
.story-detail-modal svg [fill="#CBD5E1"]{fill:rgba(255,255,255,.04)!important}

/* Dark text fills → lighter versions for dark theme readability */
.formula-diagram svg [fill="#475569"],
.diagram-box svg [fill="#475569"],
.story-detail-modal svg [fill="#475569"]{fill:rgba(255,255,255,.6)!important}

.formula-diagram svg [fill="#64748B"],
.diagram-box svg [fill="#64748B"],
.story-detail-modal svg [fill="#64748B"]{fill:rgba(255,255,255,.5)!important}

.formula-diagram svg [fill="#94A3B8"],
.diagram-box svg [fill="#94A3B8"],
.story-detail-modal svg [fill="#94A3B8"]{fill:rgba(255,255,255,.4)!important}

.formula-diagram svg [fill="#1E293B"],
.diagram-box svg [fill="#1E293B"],
.story-detail-modal svg [fill="#1E293B"]{fill:rgba(255,255,255,.8)!important}

.formula-diagram svg [fill="#0F172A"],
.diagram-box svg [fill="#0F172A"],
.story-detail-modal svg [fill="#0F172A"]{fill:#fff!important}

.formula-diagram svg [fill="#1E40AF"],
.diagram-box svg [fill="#1E40AF"],
.story-detail-modal svg [fill="#1E40AF"]{fill:#60A5FA!important}

.formula-diagram svg [fill="#D97706"],
.diagram-box svg [fill="#D97706"],
.story-detail-modal svg [fill="#D97706"]{fill:#FBBF24!important}

.formula-diagram svg [fill="#B45309"],
.diagram-box svg [fill="#B45309"],
.story-detail-modal svg [fill="#B45309"]{fill:#FBBF24!important}

.formula-diagram svg [fill="#92400E"],
.diagram-box svg [fill="#92400E"],
.story-detail-modal svg [fill="#92400E"]{fill:#FBBF24!important}

.formula-diagram svg [fill="#7C2D12"],
.diagram-box svg [fill="#7C2D12"],
.story-detail-modal svg [fill="#7C2D12"]{fill:#FB923C!important}

.formula-diagram svg [fill="#57534E"],
.diagram-box svg [fill="#57534E"],
.story-detail-modal svg [fill="#57534E"]{fill:rgba(255,255,255,.5)!important}

.formula-diagram svg [fill="#78716C"],
.diagram-box svg [fill="#78716C"],
.story-detail-modal svg [fill="#78716C"]{fill:rgba(255,255,255,.4)!important}

.formula-diagram svg [fill="#047857"],
.diagram-box svg [fill="#047857"],
.story-detail-modal svg [fill="#047857"],
.formula-diagram svg [fill="#065F46"],
.diagram-box svg [fill="#065F46"],
.story-detail-modal svg [fill="#065F46"],
.formula-diagram svg [fill="#064E3B"],
.diagram-box svg [fill="#064E3B"],
.story-detail-modal svg [fill="#064E3B"]{fill:#34D399!important}

.formula-diagram svg [fill="#991B1B"],
.diagram-box svg [fill="#991B1B"],
.story-detail-modal svg [fill="#991B1B"],
.formula-diagram svg [fill="#B91C1C"],
.diagram-box svg [fill="#B91C1C"],
.story-detail-modal svg [fill="#B91C1C"]{fill:#F87171!important}

.formula-diagram svg [fill="#5B21B6"],
.diagram-box svg [fill="#5B21B6"],
.story-detail-modal svg [fill="#5B21B6"],
.formula-diagram svg [fill="#6D28D9"],
.diagram-box svg [fill="#6D28D9"],
.story-detail-modal svg [fill="#6D28D9"]{fill:#A78BFA!important}

.formula-diagram svg [fill="#0D9488"],
.diagram-box svg [fill="#0D9488"],
.story-detail-modal svg [fill="#0D9488"],
.formula-diagram svg [fill="#0F766E"],
.diagram-box svg [fill="#0F766E"],
.story-detail-modal svg [fill="#0F766E"]{fill:#2DD4BF!important}

.formula-diagram svg [fill="#155E75"],
.diagram-box svg [fill="#155E75"],
.story-detail-modal svg [fill="#155E75"]{fill:#22D3EE!important}

.formula-diagram svg [fill="#7E3AF2"],
.diagram-box svg [fill="#7E3AF2"],
.story-detail-modal svg [fill="#7E3AF2"]{fill:#A78BFA!important}

.formula-diagram svg [fill="#A21CAF"],
.diagram-box svg [fill="#A21CAF"],
.story-detail-modal svg [fill="#A21CAF"]{fill:#E879F9!important}

/* Dark strokes → lighter versions */
.formula-diagram svg [stroke="#475569"],
.diagram-box svg [stroke="#475569"],
.story-detail-modal svg [stroke="#475569"]{stroke:rgba(255,255,255,.5)!important}

.formula-diagram svg [stroke="#64748B"],
.diagram-box svg [stroke="#64748B"],
.story-detail-modal svg [stroke="#64748B"]{stroke:rgba(255,255,255,.4)!important}

.formula-diagram svg [stroke="#94A3B8"],
.diagram-box svg [stroke="#94A3B8"],
.story-detail-modal svg [stroke="#94A3B8"]{stroke:rgba(255,255,255,.3)!important}

.formula-diagram svg [stroke="#CBD5E1"],
.diagram-box svg [stroke="#CBD5E1"],
.story-detail-modal svg [stroke="#CBD5E1"]{stroke:rgba(255,255,255,.2)!important}

.formula-diagram svg [stroke="#D97706"],
.diagram-box svg [stroke="#D97706"],
.story-detail-modal svg [stroke="#D97706"]{stroke:#FBBF24!important}

.formula-diagram svg [stroke="#93C5FD"],
.diagram-box svg [stroke="#93C5FD"],
.story-detail-modal svg [stroke="#93C5FD"]{stroke:#60A5FA!important}

/* === Reveal animation === */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ============================================================
   CONTRAST FIX BLOCK (2026-08-20)
   Fix WCAG violations found by _contrast-audit.html scan
   Root cause: CSS var overrides (--gray-700→white) + L325 .katex white
   ============================================================ */

/* 1. Challenge ch-type: light-on-light badge → dark glass + light text */
.ch-type{
  background:rgba(255,255,255,.1)!important;
  color:rgba(255,255,255,.88)!important;
  border:1px solid rgba(255,255,255,.15)!important;
}

/* 2. Article page: dark text on dark bg → lighten */
.takeaway-text,
.related-card-title,
.related-title,
.law-tag,
.back-btn{color:rgba(255,255,255,.78)!important}

.related-card-desc,
.caption,
.callout-portrait-info,
.physicist-years{color:rgba(255,255,255,.72)!important}

.callout-portrait-name{color:rgba(255,255,255,.92)!important}
.callout-text{color:rgba(251,191,36,.85)!important}

/* 3. takeaway-num: white on saturated color badge → dark bg for contrast */
.takeaway-num{
  background:rgba(0,0,0,.35)!important;
  color:#fff!important;
}

/* 4. Exam-home: dark elements on dark bg → lighten */
.exam-home li,
.history-tab,
.exam-subject-tab,
.grade-topics,
.struct-detail{color:rgba(255,255,255,.75)!important}

.exam-home b,
.struct-score{color:rgba(255,255,255,.9)!important}

.grade-btn{color:#60A5FA!important}
.grade-meta-item{color:rgba(255,255,255,.75)!important}

/* 5. Quiz / real-bank: dark labels on dark bg → lighten */
.ai-evo-quality{color:#A78BFA!important}
.law-card-cat{color:rgba(255,255,255,.75)!important}
.stat-lbl{color:rgba(255,255,255,.75)!important}

/* 6. Laws page: cat-tag light-on-light → dark glass */
.cat-tag{
  background:rgba(255,255,255,.1)!important;
  color:rgba(255,255,255,.85)!important;
  border:1px solid rgba(255,255,255,.12)!important;
}

/* app-card-link: dark subject colors on dark bg → lighten */
.app-card-link{color:rgba(255,255,255,.82)!important}

/* 7. Humanities-exam submit button: white on light green → darken green */
#btn-submit-exam,
#btn-submit-exam-2{
  background:#047857!important;
  color:#fff!important;
  font-weight:700!important;
}

/* 8. Bold text in dark theme → light (except inside exam question text) */
b{color:rgba(255,255,255,.9)!important}
.exam-question b,.q-text b,.opt-text b{color:inherit!important}

/* 9. exam-progress-text borderline → lighten */
#exam-progress-text{color:rgba(255,255,255,.75)!important}

/* 10. Challenge grade-tag: blue on dark blue → lighten */
.ch-grade-tag{color:#60A5FA!important}

/* 11. q-diff-badge: colored text on light bg → dark glass */
.q-diff-badge{
  background:rgba(0,0,0,.3)!important;
  color:rgba(255,255,255,.85)!important;
}

/* 12. Intro kicker: dark subject color on dark bg → lighten */
.kicker{color:rgba(255,255,255,.75)!important}

/* 13. Article science-title / formula-mention: dark colors on dark → lighten */
.science-title{color:rgba(255,255,255,.9)!important}
.formula-mention{color:#60A5FA!important}

/* 14. Article page: paragraph inside light callout box → force dark text */
.callout-box p,
.callout p,
.science-card p{color:#1F2937!important}

/* 15. Avatar: keep solid blue bg (don't let --primary override affect it) */
.avatar{background:#2563EB!important;color:#fff!important}

/* 16. Quiz qualityScore + real-bank sf-count: lighten */
#qualityScore{color:#A78BFA!important}
.sf-count{color:#93C5FD!important}

/* 17. related-card-img: it holds the category label text (inline light bg + saturated color)
   → dark glass + light text so the label stays visible */
.related-card-img{
  background:rgba(255,255,255,.08)!important;
  color:rgba(255,255,255,.85)!important;
  border:1px solid rgba(255,255,255,.1)!important;
}

/* 18. Round-4 fixes: --blue/--primary override side effects on solid buttons */
/* real-exam-bank "开始练习" button: var(--blue) now #60A5FA → restore deep blue bg */
.ecm-btn{background:#2563EB!important;color:#fff!important}
.ecm-btn:hover{background:#1D4ED8!important}

/* exam-home subject tabs: active tab uses var(--blue/green/...) which are now light
   → per-subject deep backgrounds (white text passes on all) */
.exam-subject-tab.active{color:#fff!important}
.exam-subject-tab.active[data-subject="physics"]{background:#2563EB!important}
.exam-subject-tab.active[data-subject="chemistry"]{background:#047857!important}
.exam-subject-tab.active[data-subject="math"]{background:#6D28D9!important}
.exam-subject-tab.active[data-subject="biology"]{background:#0F766E!important}
.exam-subject-tab.active[data-subject="geography"]{background:#B45309!important}
.exam-subject-tab.active[data-subject="history"]{background:#991B1B!important}
.exam-subject-tab.active[data-subject="politics"]{background:#78350F!important}
.exam-subject-tab.active[data-subject="chinese"]{background:#9D174D!important}

/* 19. chemistry-article science-text: dark green #047857 on dark bg → bright green */
.science-text{color:#34D399!important}

/* ===== 移动端性能模式：保留氛围，砍重特效防掉帧 ===== */
@media (max-width:768px){
  .nebula{animation:none!important;filter:blur(40px);opacity:.28}
  .galaxy{animation:none!important;opacity:.05}
}

/* === 主体内容跟随 header 伸缩平滑过渡 === */
.main-content,.main,article,main{
  transition:padding-top 280ms cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion:reduce){
  .nebula,.galaxy{animation:none!important}
}