:root{
  --bg-a:#fff4e6;
  --bg-b:#fce7f3;
  --bg-c:#ecfccb;
  --surface:rgba(255,255,255,.92);
  --surface-strong:#ffffff;
  --text:#1f2937;
  --muted:#556273;
  --line:#d9e2ec;
  --primary:#2563eb;
  --primary-2:#7c3aed;
  --accent:#0f9f7f;
  --soft-blue:#edf6ff;
  --soft-purple:#f4efff;
  --soft-green:#ecfbf4;
  --lesson-scale:1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.68;
  color:var(--text);
  background:
    radial-gradient(circle at 8% 8%,rgba(37,99,235,.12),transparent 28rem),
    radial-gradient(circle at 92% 18%,rgba(124,58,237,.10),transparent 30rem),
    linear-gradient(135deg,var(--bg-a) 0%,var(--bg-b) 48%,var(--bg-c) 100%);
  background-attachment:fixed;
}
body,button,input{font:inherit}
img,svg,video,canvas{max-width:100%;height:auto}
a{color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:9999;background:#fff;padding:10px 14px;border-radius:8px}
.skip-link:focus{left:8px}
#readingProgress{
  position:fixed;top:0;left:0;height:4px;width:0;
  background:linear-gradient(90deg,var(--primary),var(--primary-2),var(--accent));
  z-index:10000;box-shadow:0 1px 8px rgba(37,99,235,.25)
}
.wrap{width:min(1480px,96%);margin:0 auto;padding:12px 0 42px}
.top-badge-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 13px;margin-bottom:9px;
  background:linear-gradient(110deg,rgba(255,255,255,.96),rgba(238,247,255,.96),rgba(242,255,249,.96));
  border:1px solid rgba(203,213,225,.85);border-radius:14px;
  box-shadow:0 10px 30px rgba(67,88,120,.07);font-size:.88rem
}
.top-badge-bar p{margin:0;text-align:center;color:var(--muted)}
.top-pill{font-weight:800;white-space:nowrap}
.fa-graduation-cap:before{content:"🎓"}.fa-star:before{content:"★"}
.site-header{
  position:relative;display:flex;align-items:center;gap:18px;justify-content:space-between;
  padding:10px 14px;margin-bottom:13px;background:var(--surface);
  border:1px solid rgba(203,213,225,.85);border-radius:16px;
  box-shadow:0 12px 34px rgba(56,78,112,.08);backdrop-filter:blur(10px)
}
.header-logo-row{flex:0 0 auto}.site-logo-link{display:flex;align-items:center;gap:8px;text-decoration:none}
.site-logo-image img{display:block;width:150px;height:75px;object-fit:contain}
.logo-tagline{font-weight:750;color:var(--muted)}
.main-nav{min-width:0}.nav-links{display:flex;flex-wrap:wrap;gap:3px 8px;list-style:none;margin:0;padding:0;justify-content:flex-end}
.nav-links a{display:block;padding:7px 6px;text-decoration:none;border-radius:9px;font-size:.9rem;transition:.15s ease}
.nav-links a:hover,.nav-links a.active{background:linear-gradient(100deg,var(--soft-blue),var(--soft-purple));color:#153e75}
.menu-toggle{display:none;border:1px solid #cbd5e1;background:linear-gradient(135deg,#fff,#eef7ff);border-radius:10px;padding:8px 11px;font-size:1.25rem;cursor:pointer}
.sidebar-overlay,.sidebar{display:none}
.t,.m{position:absolute;opacity:0;pointer-events:none}
.t-btn{
  position:fixed;left:10px;bottom:10px;z-index:9000;padding:8px 11px;
  background:linear-gradient(135deg,#fff,#eef7ff,#f5efff);border:1px solid #cbd5e1;
  border-radius:999px;font-size:.82rem;cursor:pointer;box-shadow:0 5px 18px rgba(40,55,90,.13)
}
.m-btn,.ov{display:none}
.lay{display:grid;grid-template-columns:minmax(240px,310px) minmax(0,1fr);gap:18px;align-items:start}
.card{
  background:var(--surface);border:1px solid rgba(203,213,225,.86);border-radius:16px;
  overflow:hidden;box-shadow:0 12px 35px rgba(64,82,112,.07);backdrop-filter:blur(9px)
}
.card>.hd{padding:13px 15px;border-bottom:1px solid var(--line);background:linear-gradient(110deg,#f8fbff,#f5f1ff,#f2fbf6)}
.card>.bd{padding:15px}
.side{
  position:sticky;top:10px;max-height:calc(100vh - 20px);overflow:auto;
  overscroll-behavior:contain;overflow-anchor:none;scrollbar-gutter:stable
}
.side .hd{display:flex;justify-content:space-between;align-items:center}.side .hd h2{margin:0;font-size:1rem}
.course-sidebar-close{display:none}
.course-sidebar-tools{display:grid;grid-template-columns:1fr auto;gap:7px;margin-bottom:10px}
.course-sidebar-tools label{grid-column:1/-1;font-size:.82rem;font-weight:700}
.course-sidebar-tools input{
  min-width:0;width:100%;padding:9px 10px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#1f2937
}
.course-sidebar-tools button{padding:8px 10px;border:1px solid #cbd5e1;border-radius:9px;background:linear-gradient(135deg,#fff,#eef7ff);cursor:pointer}
.search-empty{font-size:.85rem;color:var(--muted)}
.course-list{list-style:none;margin:0;padding:0}.chapter-group{margin:0 0 4px}.chapter-group[hidden]{display:none}
.chapter-group .link{display:flex;align-items:flex-start;gap:9px;padding:9px;text-decoration:none;border-radius:9px;transition:.15s ease}
.chapter-group .link:hover{background:linear-gradient(100deg,var(--soft-blue),var(--soft-green))}
.chapter-group.active-chapter .link{background:linear-gradient(105deg,#dceeff,#e8e1ff,#ddf7eb);font-weight:750;color:#173a67}
.num{flex:0 0 auto;min-width:46px;font-weight:800;font-size:.82rem}.txt{display:flex;min-width:0;flex-direction:column}
.txt b{font-size:.9rem}.txt em{margin-top:1px;color:var(--muted);font-size:.78rem;font-style:normal;overflow-wrap:anywhere}
.course-content{min-width:0}
.course-content .bd{
  font-size:calc(1rem * var(--lesson-scale));
  transition:font-size .15s ease
}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px;font-size:.9rem;color:var(--muted)}
.breadcrumbs a{text-decoration:none}.breadcrumbs a:hover{text-decoration:underline}
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(125deg,#e8f5ff 0%,#eee8ff 52%,#e7f9ef 100%);
  border:1px solid #cdddeb;border-radius:16px;padding:23px;margin-bottom:14px
}
.hero:after{
  content:"";position:absolute;width:180px;height:180px;border-radius:50%;
  right:-70px;top:-90px;background:rgba(255,255,255,.48);pointer-events:none
}
.engc-title{position:relative;z-index:1;margin:0 0 8px;font-size:clamp(1.75rem,3vw,2.65rem);line-height:1.18}
.sub{position:relative;z-index:1;margin:0 0 14px;color:#43546a}.meta{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-block;padding:7px 11px;border:1px solid #cbd5e1;border-radius:999px;background:rgba(255,255,255,.72);font-size:.88rem}
.course-tools{
  display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;
  padding:10px 12px;margin-bottom:14px;border:1px solid #d3deea;border-radius:12px;
  background:linear-gradient(105deg,#f8fbff,#f7f2ff,#f3fcf7)
}
.reading-meta,.tool-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tool-btn{
  border:1px solid #c8d5e3;background:linear-gradient(135deg,#fff,#edf6ff,#f5f0ff);
  border-radius:9px;padding:8px 11px;cursor:pointer;font-weight:650;transition:transform .12s ease,box-shadow .12s ease
}
.tool-btn:hover{transform:translateY(-1px);box-shadow:0 6px 15px rgba(55,75,110,.1)}
.tool-btn:focus-visible,.menu-toggle:focus-visible,.t-btn:focus-visible,.chapter-nav a:focus-visible{outline:3px solid rgba(37,99,235,.28);outline-offset:2px}
.chapter-nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.chapter-nav a{
  text-decoration:none;font-weight:750;padding:10px 13px;border:1px solid #cbd5e1;border-radius:10px;
  background:linear-gradient(115deg,#fff,#edf6ff,#f2edff)
}
.course-sidebar-toggle{display:none}
.ml-footer{
  margin-top:24px;padding:23px 16px;text-align:center;border:1px solid #cfdae6;border-radius:16px;
  background:linear-gradient(120deg,#f5fbff,#f6f1ff,#f1fbf5);box-shadow:0 10px 28px rgba(62,83,116,.06)
}
.ml-footer-social{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:12px}
.ml-footer-social a{
  display:inline-flex;align-items:center;justify-content:center;width:41px;height:41px;border:1px solid #cbd5e1;
  border-radius:50%;background:linear-gradient(135deg,#fff,#edf6ff,#f4efff);text-decoration:none;transition:transform .15s ease
}
.ml-footer-social a:hover{transform:translateY(-2px)}.ml-footer-social svg{width:20px;height:20px}
.ml-copy{margin:0;color:var(--muted);font-size:.9rem}
#goTopBtn{
  position:fixed;right:18px;bottom:18px;width:44px;height:44px;border:1px solid #cbd5e1;border-radius:50%;
  background:linear-gradient(135deg,#fff,#eaf5ff,#efeaff);font-size:1.2rem;cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.12);opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease;z-index:8500
}
#goTopBtn.is-visible{opacity:1;pointer-events:auto;transform:none}
body.chapter-loading .course-content{opacity:.58;pointer-events:none}

/* Night View */
body.dark-view{
  --surface:rgba(19,29,46,.95);--surface-strong:#172235;--text:#e8eef7;--muted:#b8c5d6;--line:#34445c;
  background:radial-gradient(circle at 10% 10%,rgba(40,101,174,.2),transparent 28rem),
             radial-gradient(circle at 90% 15%,rgba(107,67,164,.18),transparent 30rem),
             linear-gradient(135deg,#0c1421,#151426 48%,#0d201b);
  color:var(--text)
}
body.dark-view .card,body.dark-view .site-header{background:var(--surface);border-color:#34445c;color:var(--text)}
body.dark-view .top-badge-bar,body.dark-view .hero,body.dark-view .course-tools,body.dark-view .ml-footer,body.dark-view .card>.hd{
  background:linear-gradient(120deg,#172638,#201b35,#162b25);border-color:#34445c;color:var(--text)
}
body.dark-view .sub,body.dark-view .txt em,body.dark-view .top-badge-bar p,body.dark-view .breadcrumbs,body.dark-view .ml-copy{color:#b8c5d6}
body.dark-view .chapter-group .link:hover{background:linear-gradient(100deg,#21344b,#25382f)}
body.dark-view .chapter-group.active-chapter .link{background:linear-gradient(105deg,#243b59,#382d55,#214238);color:#f5f8ff}
body.dark-view .tool-btn,body.dark-view .course-sidebar-tools button,body.dark-view .course-sidebar-tools input,
body.dark-view .t-btn,body.dark-view #goTopBtn,body.dark-view .ml-footer-social a,body.dark-view .chapter-nav a{
  background:linear-gradient(135deg,#172235,#1c2d43,#261f3d);color:#e8eef7;border-color:#455a75
}
body.dark-view .pill{background:rgba(20,31,49,.72);border-color:#455a75}
body.dark-view .sidebar{background:#172235;color:#e8eef7}

@media(max-width:1020px){
  .main-nav{display:none}.menu-toggle{display:block}
  .sidebar-overlay{display:block;position:fixed;inset:0;background:rgba(15,23,42,.54);z-index:9700;opacity:0;pointer-events:none;transition:opacity .2s ease}
  .sidebar{display:block;position:fixed;top:0;right:0;width:min(330px,88vw);height:100dvh;background:#fff;z-index:9800;transform:translateX(100%);transition:transform .22s ease;padding:18px;overflow:auto}
  .sidebar ul{list-style:none;padding:0;margin:40px 0 0}.sidebar a{display:block;padding:12px 8px;text-decoration:none;border-bottom:1px solid #e5e7eb}
  .close-btn{position:absolute;right:14px;top:12px;border:1px solid #d1d5db;background:#fff;border-radius:8px;padding:7px 10px;cursor:pointer}
  body.menu-open .sidebar{transform:none}body.menu-open .sidebar-overlay{opacity:1;pointer-events:auto}
  .top-badge-bar p{display:none}
}
@media(max-width:900px){
  .lay{grid-template-columns:1fr}
  .course-sidebar{position:fixed;top:0;left:0;width:min(360px,90vw);height:100dvh;max-height:none;z-index:9600;transform:translateX(-105%);transition:transform .22s ease;border-radius:0}
  .course-sidebar.is-open{transform:none}
  .course-sidebar-close{display:block;border:1px solid #d1d5db;background:#fff;border-radius:8px;padding:5px 8px;cursor:pointer}
  .course-sidebar-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:0 0 12px;padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px;background:linear-gradient(135deg,#fff,#edf6ff);font:inherit;font-weight:750;cursor:pointer}
  .course-content{width:100%}.site-logo-image img{width:130px;height:65px}.logo-tagline{display:none}
}
@media(max-width:560px){
  .wrap{width:94%;padding-top:8px}.top-badge-bar{padding:7px 9px}.site-header{padding:8px 10px}.card>.bd{padding:11px}
  .hero{padding:17px}.chapter-nav{flex-wrap:wrap}.chapter-nav a{flex:1 1 145px;text-align:center}.engc-title{font-size:1.72rem}
  .course-tools{align-items:flex-start}.t-btn{font-size:.74rem}.ml-footer{padding:18px 10px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media print{
  body{background:#fff!important;color:#000!important}
  #readingProgress,.top-badge-bar,.site-header,.sidebar,.sidebar-overlay,.course-sidebar,.course-sidebar-toggle,.t-btn,
  .course-tools,.chapter-nav,.ml-footer,#goTopBtn,.skip-link{display:none!important}
  .wrap{width:100%;margin:0;padding:0}.lay{display:block}.course-content{border:0!important;box-shadow:none!important;background:#fff!important}
  .course-content,.course-content *{color:#000!important}
  .engc-card,.engc-panel,.hero{break-inside:avoid;background:#fff!important;box-shadow:none!important}
}
/* =========================================================
   COLOR-ONLY FIX
   Uses only the existing colors already defined in :root:
   --bg-a:#fff4e6;
   --bg-b:#fce7f3;
   --bg-c:#ecfccb;
   ========================================================= */

/* TOP BADGE BAR */
.top-badge-bar{
  background:linear-gradient(110deg,var(--bg-a) 0%,var(--bg-b) 50%,var(--bg-c) 100%) !important;
}

/* TOP HEADER / MENU */
.site-header{
  background:linear-gradient(115deg,var(--bg-a) 0%,var(--bg-b) 50%,var(--bg-c) 100%) !important;
}

.main-nav{
  background:linear-gradient(100deg,var(--bg-a) 0%,var(--bg-b) 50%,var(--bg-c) 100%) !important;
}

.nav-links a{
  background:linear-gradient(135deg,var(--bg-a) 0%,var(--bg-b) 50%,var(--bg-c) 100%) !important;
}

.nav-links a:hover,
.nav-links a.active{
  background:linear-gradient(100deg,var(--bg-b) 0%,var(--bg-c) 50%,var(--bg-a) 100%) !important;
}

/* LEFT COURSE SIDEBAR */
.course-sidebar,
.side,
.card.side{
  background:linear-gradient(160deg,var(--bg-a) 0%,var(--bg-b) 50%,var(--bg-c) 100%) !important;
}

.course-sidebar > .hd,
.side > .hd,
.card.side > .hd{
  background:linear-gradient(110deg,var(--bg-b) 0%,var(--bg-a) 50%,var(--bg-c) 100%) !important;
}

.course-sidebar > .bd,
.side > .bd,
.card.side > .bd{
  background:linear-gradient(180deg,var(--bg-a) 0%,var(--bg-b) 52%,var(--bg-c) 100%) !important;
}

.chapter-group .link{
  background:linear-gradient(100deg,var(--bg-a) 0%,var(--bg-b) 50%,var(--bg-c) 100%) !important;
}

.chapter-group .link:hover,
.chapter-group.active-chapter .link{
  background:linear-gradient(105deg,var(--bg-b) 0%,var(--bg-c) 50%,var(--bg-a) 100%) !important;
}

/* ALL EXAMPLE BOXES */
.engc-panel.example-panel,
.example-panel{
  background:linear-gradient(115deg,var(--bg-a) 0%,var(--bg-b) 50%,var(--bg-c) 100%) !important;
}

/* FOOTER */
.ml-footer{
  background:linear-gradient(120deg,var(--bg-a) 0%,var(--bg-b) 50%,var(--bg-c) 100%) !important;
}

.ml-footer-social a{
  background:linear-gradient(135deg,var(--bg-a) 0%,var(--bg-b) 50%,var(--bg-c) 100%) !important;
}

/* MOBILE MENU COLOR ONLY */
@media(max-width:1020px){
  .sidebar{
    background:linear-gradient(160deg,var(--bg-a) 0%,var(--bg-b) 50%,var(--bg-c) 100%) !important;
  }

  .sidebar a{
    background:linear-gradient(100deg,var(--bg-a) 0%,var(--bg-b) 50%,var(--bg-c) 100%) !important;
  }
}

/* =========================================================
   LIVE BLUE + LIGHT PURPLE COLOR UPDATE
   Color-only override: layout and behavior unchanged.
   ========================================================= */
:root{
  --live-blue:#1E90FF;
  --live-blue-light:#BFE3FF;
  --live-purple:#7C3AED;
  --live-purple-light:#F3E8FF;
  --live-ink:#10213A;
}

/* Top badge */
.top-badge-bar{
  background:linear-gradient(110deg,var(--live-blue) 0%,#6AAEFF 34%,#B79CFF 68%,var(--live-purple-light) 100%) !important;
  color:#ffffff !important;
  border-color:#78B8FF !important;
}
.top-badge-bar p,
.top-badge-bar .top-pill{color:#ffffff !important;}

/* Top header and menu */
.site-header{
  background:linear-gradient(115deg,var(--live-blue) 0%,#5DA8FF 35%,#A786F8 70%,var(--live-purple-light) 100%) !important;
  border-color:#7EBBFF !important;
}
.main-nav{
  background:linear-gradient(100deg,#0F7FE8 0%,var(--live-blue) 48%,#8A63E8 100%) !important;
}
.nav-links a{
  background:linear-gradient(135deg,#ffffff 0%,var(--live-blue-light) 58%,var(--live-purple-light) 100%) !important;
  color:var(--live-ink) !important;
}
.nav-links a:hover,
.nav-links a.active{
  background:linear-gradient(105deg,var(--live-blue) 0%,#6F8DFF 48%,var(--live-purple) 100%) !important;
  color:#ffffff !important;
}

/* Left course sidebar */
.course-sidebar,
.side,
.card.side{
  background:linear-gradient(160deg,var(--live-blue) 0%,#6BAEFF 34%,#B89AF7 70%,var(--live-purple-light) 100%) !important;
  border-color:#71B7FF !important;
}
.course-sidebar > .hd,
.side > .hd,
.card.side > .hd{
  background:linear-gradient(110deg,#0F7FE8 0%,var(--live-blue) 45%,var(--live-purple) 100%) !important;
  color:#ffffff !important;
}
.course-sidebar > .bd,
.side > .bd,
.card.side > .bd{
  background:linear-gradient(180deg,#DFF2FF 0%,#CFDFFF 48%,var(--live-purple-light) 100%) !important;
}
.chapter-group .link{
  background:linear-gradient(100deg,#E9F6FF 0%,#CAE7FF 52%,#EEE1FF 100%) !important;
  color:var(--live-ink) !important;
}
.chapter-group .link:hover,
.chapter-group.active-chapter .link{
  background:linear-gradient(105deg,var(--live-blue) 0%,#6F91FF 48%,var(--live-purple) 100%) !important;
  color:#ffffff !important;
}
.chapter-group.active-chapter .txt em,
.chapter-group .link:hover .txt em{color:#F4F8FF !important;}

/* Example boxes */
.engc-panel.example-panel,
.example-panel{
  background:linear-gradient(115deg,#DDF1FF 0%,#BEDDFF 46%,#EAD8FF 100%) !important;
  border-left-color:var(--live-blue) !important;
  color:var(--live-ink) !important;
}
.engc-panel.example-panel h3,
.example-panel h3{color:#124A86 !important;}

/* Footer */
.ml-footer{
  background:linear-gradient(120deg,var(--live-blue) 0%,#6AAEFF 38%,#9E7BEF 70%,var(--live-purple-light) 100%) !important;
  border-color:#7EBBFF !important;
}
.ml-footer,
.ml-footer .ml-copy{color:#ffffff !important;}
.ml-footer-social a{
  background:linear-gradient(135deg,#ffffff 0%,#CFE8FF 50%,var(--live-purple-light) 100%) !important;
  color:#174A7A !important;
  border-color:#8BC1FF !important;
}

/* Mobile menu */
@media(max-width:1020px){
  .sidebar{
    background:linear-gradient(160deg,var(--live-blue) 0%,#6BAEFF 36%,#A987F4 72%,var(--live-purple-light) 100%) !important;
    color:var(--live-ink) !important;
  }
  .sidebar a{
    background:linear-gradient(100deg,#EAF7FF 0%,#CEE7FF 52%,#EEE2FF 100%) !important;
    color:var(--live-ink) !important;
  }
}

/* =========================================================
   FINAL COLOR FIX
   - No background on whole top header/menu
   - Dark menu text on light background
   - DodgerBlue + very light purple only on hover/active
   - Vivid gradient kept on examples, left sidebar, footer
   ========================================================= */

:root{
  --live-blue:#1E90FF;
  --live-purple:#7C3AED;
  --live-purple-light:#F3E8FF;
  --live-blue-light:#D9F0FF;
  --live-ink:#111827;
}

/* ---------- TOP HEADER / MENU: NO BACKGROUND ---------- */
.site-header{
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  border-color:transparent !important;
  color:var(--live-ink) !important;
}

.main-nav{
  background:transparent !important;
}

.nav-links a{
  background:transparent !important;
  color:var(--live-ink) !important;
  border-color:transparent !important;
}

.nav-links a:hover,
.nav-links a.active{
  background:linear-gradient(100deg,#1E90FF 0%,#8F7CFF 55%,#F3E8FF 100%) !important;
  color:#111827 !important;
}

.logo-tagline,
.site-header a{
  color:var(--live-ink) !important;
}

/* ---------- LEFT COURSE SIDEBAR ---------- */
.course-sidebar,
.side,
.card.side{
  background:linear-gradient(160deg,#1E90FF 0%,#76B9FF 38%,#B69CFF 72%,#F3E8FF 100%) !important;
  border-color:#73B8FF !important;
}

.course-sidebar > .hd,
.side > .hd,
.card.side > .hd{
  background:linear-gradient(110deg,#147FE0 0%,#1E90FF 48%,#7C3AED 100%) !important;
  color:#ffffff !important;
}

.course-sidebar > .bd,
.side > .bd,
.card.side > .bd{
  background:linear-gradient(180deg,#DDF2FF 0%,#E7E7FF 52%,#F3E8FF 100%) !important;
}

.chapter-group .link{
  background:linear-gradient(100deg,#EAF7FF 0%,#D9F0FF 52%,#F3E8FF 100%) !important;
  color:#111827 !important;
}

.chapter-group .link:hover,
.chapter-group.active-chapter .link{
  background:linear-gradient(105deg,#1E90FF 0%,#7D91FF 48%,#F3E8FF 100%) !important;
  color:#111827 !important;
}

.chapter-group .txt em,
.chapter-group.active-chapter .txt em,
.chapter-group .link:hover .txt em{
  color:#374151 !important;
}

/* ---------- ALL EXAMPLE BOXES ---------- */
.engc-panel.example-panel,
.example-panel{
  background:linear-gradient(115deg,#DDF2FF 0%,#C8E4FF 48%,#F3E8FF 100%) !important;
  border-left-color:#1E90FF !important;
  color:#111827 !important;
}

.engc-panel.example-panel h3,
.example-panel h3{
  color:#123A67 !important;
}

/* ---------- FOOTER ---------- */
.ml-footer{
  background:linear-gradient(120deg,#1E90FF 0%,#6FB5FF 40%,#A995FF 72%,#F3E8FF 100%) !important;
  border-color:#78BCFF !important;
  color:#111827 !important;
}

.ml-footer .ml-copy{
  color:#111827 !important;
}

.ml-footer-social a{
  background:linear-gradient(135deg,#FFFFFF 0%,#D9F0FF 52%,#F3E8FF 100%) !important;
  color:#123A67 !important;
  border-color:#8BC5FF !important;
}

/* ---------- MOBILE TOP MENU ---------- */
@media(max-width:1020px){
  .sidebar{
    background:#ffffff !important;
    color:#111827 !important;
  }

  .sidebar a{
    background:transparent !important;
    color:#111827 !important;
  }

  .sidebar a:hover,
  .sidebar a.active{
    background:linear-gradient(100deg,#1E90FF 0%,#8F7CFF 55%,#F3E8FF 100%) !important;
    color:#111827 !important;
  }

  .close-btn,
  .menu-toggle{
    color:#111827 !important;
  }
}

/* ---------- DARK MODE ---------- */
body.dark-view .site-header,
body.dark-view .main-nav{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

body.dark-view .nav-links a,
body.dark-view .site-header,
body.dark-view .site-header a,
body.dark-view .logo-tagline{
  color:#e8eef7 !important;
}

body.dark-view .nav-links a:hover,
body.dark-view .nav-links a.active{
  background:linear-gradient(100deg,#1E90FF 0%,#7C3AED 58%,#C4B5FD 100%) !important;
  color:#ffffff !important;
}
.ml-legal-note{margin:10px auto 0;max-width:920px;font-size:.78rem;line-height:1.5;color:var(--muted)}
body.dark-view .ml-legal-note{color:#b8c5d6}

/* FINAL TOP BADGE TEXT COLOR FIX */
.top-badge-bar,
.top-badge-bar p,
.top-badge-bar .top-pill{
  color:#0B2E59 !important;
}

/* FINAL CONTROL BUTTON FONT COLOR FIX */
#goTopBtn,
#clearChapterSearch,
#shareChapter,
#printChapter,
#fontIncrease,
#fontDecrease,
.tool-btn,
.course-sidebar-tools button{
  color:#0B2E59 !important;
}

/* =========================================================
   FINAL NIGHT VIEW FIX
   - Slightly lighter dark background
   - Light text everywhere in Night View
   - Keeps normal/light mode unchanged
   ========================================================= */

body.dark-view{
  --surface:rgba(34,47,67,.97) !important;
  --surface-strong:#26364d !important;
  --text:#f3f7ff !important;
  --muted:#d4def0 !important;
  --line:#526781 !important;

  background:
    radial-gradient(circle at 10% 10%,rgba(56,125,205,.24),transparent 28rem),
    radial-gradient(circle at 90% 15%,rgba(130,92,190,.22),transparent 30rem),
    linear-gradient(135deg,#17263a 0%,#24253f 48%,#18342d 100%) !important;
  color:#f3f7ff !important;
}

/* Main cards and content surfaces */
body.dark-view .card,
body.dark-view .course-content{
  background:linear-gradient(145deg,#26384f 0%,#2d304f 55%,#263f39 100%) !important;
  border-color:#526781 !important;
  color:#f3f7ff !important;
}

/* Top badge, hero, tools, footer and card headers */
body.dark-view .top-badge-bar,
body.dark-view .hero,
body.dark-view .course-tools,
body.dark-view .ml-footer,
body.dark-view .card>.hd{
  background:linear-gradient(120deg,#29425d 0%,#383250 52%,#29483f 100%) !important;
  border-color:#5a6f89 !important;
  color:#f7f9ff !important;
}

/* Force normal text to light colors */
body.dark-view p,
body.dark-view li,
body.dark-view span,
body.dark-view strong,
body.dark-view h1,
body.dark-view h2,
body.dark-view h3,
body.dark-view h4,
body.dark-view h5,
body.dark-view h6,
body.dark-view .sub,
body.dark-view .breadcrumbs,
body.dark-view .breadcrumbs a,
body.dark-view .reading-meta,
body.dark-view .ml-copy,
body.dark-view .ml-legal-note,
body.dark-view .top-badge-bar,
body.dark-view .top-badge-bar p,
body.dark-view .top-badge-bar .top-pill{
  color:#f3f7ff !important;
}

/* Top navigation remains transparent but text is light */
body.dark-view .site-header,
body.dark-view .main-nav{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

body.dark-view .nav-links a,
body.dark-view .site-header,
body.dark-view .site-header a,
body.dark-view .logo-tagline{
  color:#eef5ff !important;
}

body.dark-view .nav-links a:hover,
body.dark-view .nav-links a.active{
  background:linear-gradient(100deg,#248fff 0%,#8162e8 58%,#b6a4e9 100%) !important;
  color:#ffffff !important;
}

/* Left course sidebar */
body.dark-view .course-sidebar,
body.dark-view .side,
body.dark-view .card.side{
  background:linear-gradient(160deg,#294b70 0%,#35486b 42%,#4a3f68 72%,#3b455d 100%) !important;
  border-color:#627b99 !important;
  color:#f3f7ff !important;
}

body.dark-view .course-sidebar > .hd,
body.dark-view .side > .hd,
body.dark-view .card.side > .hd{
  background:linear-gradient(110deg,#2564a0 0%,#3e63a7 48%,#684c9e 100%) !important;
  color:#ffffff !important;
}

body.dark-view .course-sidebar > .bd,
body.dark-view .side > .bd,
body.dark-view .card.side > .bd{
  background:linear-gradient(180deg,#2b4058 0%,#343952 52%,#40384f 100%) !important;
}

body.dark-view .chapter-group .link{
  background:linear-gradient(100deg,#304962 0%,#373f5d 52%,#463a59 100%) !important;
  color:#f4f8ff !important;
}

body.dark-view .chapter-group .link:hover,
body.dark-view .chapter-group.active-chapter .link{
  background:linear-gradient(105deg,#2f78bd 0%,#5369b9 48%,#74569f 100%) !important;
  color:#ffffff !important;
}

body.dark-view .chapter-group .txt em,
body.dark-view .chapter-group.active-chapter .txt em,
body.dark-view .chapter-group .link:hover .txt em{
  color:#dce7f7 !important;
}

/* Search input */
body.dark-view .course-sidebar-tools input{
  background:#2b3b50 !important;
  color:#f3f7ff !important;
  border-color:#61738a !important;
}

body.dark-view .course-sidebar-tools input::placeholder{
  color:#c9d5e7 !important;
}

/* Buttons, including A-, A+, Print, Share, Clear, Go Top */
body.dark-view .tool-btn,
body.dark-view .course-sidebar-tools button,
body.dark-view .t-btn,
body.dark-view #goTopBtn,
body.dark-view .chapter-nav a,
body.dark-view .course-sidebar-toggle,
body.dark-view .course-sidebar-close,
body.dark-view .menu-toggle,
body.dark-view .close-btn{
  background:linear-gradient(135deg,#31455f 0%,#3b4566 52%,#514166 100%) !important;
  color:#f7f9ff !important;
  border-color:#667b98 !important;
}

/* Example and information boxes */
body.dark-view .engc-panel,
body.dark-view .engc-panel.example-panel,
body.dark-view .example-panel{
  background:linear-gradient(115deg,#2d4963 0%,#38465f 48%,#4c3f5d 100%) !important;
  color:#f3f7ff !important;
  border-color:#607894 !important;
}

body.dark-view .engc-panel h3,
body.dark-view .example-panel h3,
body.dark-view .engc-sec-title{
  color:#ffffff !important;
}

/* Pills */
body.dark-view .pill{
  background:rgba(49,66,89,.88) !important;
  border-color:#637996 !important;
  color:#f3f7ff !important;
}

/* Footer social buttons */
body.dark-view .ml-footer-social a{
  background:linear-gradient(135deg,#344b65 0%,#424766 52%,#554368 100%) !important;
  color:#ffffff !important;
  border-color:#6b7f99 !important;
}

/* Mobile slide-out menu in Night View */
@media(max-width:1020px){
  body.dark-view .sidebar{
    background:linear-gradient(160deg,#263b53 0%,#333c58 55%,#433951 100%) !important;
    color:#f3f7ff !important;
  }

  body.dark-view .sidebar a{
    background:transparent !important;
    color:#eef5ff !important;
    border-bottom-color:#53677f !important;
  }

  body.dark-view .sidebar a:hover,
  body.dark-view .sidebar a.active{
    background:linear-gradient(100deg,#2f7fc8 0%,#655dbc 58%,#8d75b6 100%) !important;
    color:#ffffff !important;
  }
}


/* =========================================================
   GOOGLE TRANSLATE CONTROL — SHARED ACROSS ALL CHAPTERS
   ========================================================= */
.etg-google-translate{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin:0 0 12px;padding:9px 12px;border:1px solid #b9d6ef;border-radius:12px;
  background:linear-gradient(105deg,#edf8ff 0%,#eef1ff 52%,#f5edff 100%);
  color:#0B2E59;font-size:.9rem
}
.etg-google-translate label{font-weight:750;color:#0B2E59}
.etg-translate-select,.etg-translate-btn{
  min-height:38px;border:1px solid #9fc8e9;border-radius:9px;padding:7px 10px;
  background:#fff;color:#0B2E59;font:inherit
}
.etg-translate-select{min-width:190px}
.etg-translate-btn{
  cursor:pointer;font-weight:750;
  background:linear-gradient(100deg,#1E90FF 0%,#8F7CFF 58%,#F3E8FF 100%);
  color:#0B2E59
}
.etg-translate-btn:hover{filter:brightness(.98);box-shadow:0 5px 14px rgba(30,144,255,.18)}
.etg-translate-note{margin:0;color:#40546d;font-size:.78rem}
body.dark-view .etg-google-translate{
  background:linear-gradient(105deg,#263b55 0%,#343555 52%,#473862 100%);
  border-color:#617794;color:#eef6ff
}
body.dark-view .etg-google-translate label,
body.dark-view .etg-translate-note{color:#eef6ff}
body.dark-view .etg-translate-select{background:#24354b;color:#f4f8ff;border-color:#617794}
body.dark-view .etg-translate-btn{color:#f7fbff;border-color:#7ea8d2}
@media(max-width:560px){
  .etg-google-translate{align-items:stretch}
  .etg-google-translate label,.etg-translate-note{flex:1 1 100%}
  .etg-translate-select{flex:1 1 170px;min-width:0}
  .etg-translate-btn{flex:0 0 auto}
}
@media print{.etg-google-translate{display:none!important}}