:root{
  --bn-deep:#0D5D4B;
  --bn-emerald:#159B72;
  --bn-teal:#25A77A;
  --bn-mint:#41C79B;
  --bn-gold:#F3A31A;
  --bn-amber:#F7BC49;
  --bn-blue:#2585D8;
  --bn-paper:#FFFFFF;
  --bn-soft:#F5FBF8;
  --bn-soft-2:#EEF8F4;
  --bn-line:#DCE9E3;
  --bn-text:#1E2925;
  --bn-muted:#61716A;
}

/* ===== GLOBAL LOGO / HEADER REFRESH ===== */
.topbar{
  background:linear-gradient(90deg,var(--bn-deep),var(--bn-emerald),var(--bn-teal))!important;
}
.brand{
  display:inline-flex!important;
  align-items:center!important;
  gap:.85rem!important;
  padding:.45rem .55rem!important;
  color:#fff!important;
}
.brand-logo-new{
  width:60px!important;
  height:60px!important;
  object-fit:contain!important;
  display:block!important;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.14)) drop-shadow(0 0 10px rgba(248,210,108,.18));
  flex:0 0 60px!important;
}
.brand-text-stack{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  line-height:1.04!important;
}
.brand-title-text{
  font-weight:900!important;
  letter-spacing:.02em!important;
  font-size:1.05rem!important;
  color:#fff!important;
}
.brand-subtitle-text{
  font-size:.77rem!important;
  font-weight:700!important;
  color:#DDF7EE!important;
}
@media(max-width:680px){
  .brand-logo-new{width:50px!important;height:50px!important;flex-basis:50px!important}
  .brand-title-text{font-size:.96rem!important}
  .brand-subtitle-text{font-size:.72rem!important}
}

/* ===== READING PAGE / TOPIC CONTENT ===== */
.reading-shell,
.reading-shell .lesson-panel,
.reading-shell .infographic-notes,
.reading-shell .topic-copy{
  color:var(--bn-text)!important;
}
.reading-shell .shell,
.reading-shell.shell,
.reading-shell .lesson-panel{
  border-color:var(--bn-line)!important;
}
.reading-shell .reading-title h1,
.reading-shell .step-heading h2,
.reading-shell h3,
.reading-shell h4{
  color:var(--bn-deep)!important;
}
.reading-shell .eyebrow,
.reading-shell .step-count,
.reading-shell .room-description,
.reading-shell .lesson-reference,
.reading-shell .next-topic,
.reading-shell .back-link,
.reading-shell .house-note-link,
.reading-shell .house-note-link *{
  color:var(--bn-muted)!important;
}
.reading-shell .house-note-link{
  position:relative!important;
  display:block!important;
  margin:.9rem 0 1rem!important;
  padding:.82rem 1rem .82rem 2.8rem!important;
  background:linear-gradient(135deg,#FFF9EC,#FFF5DE)!important;
  border:1px solid #EFD8A0!important;
  border-left:6px solid var(--bn-gold)!important;
  border-radius:14px!important;
  box-shadow:0 6px 18px rgba(128,98,28,.06)!important;
}
.reading-shell .house-note-link::before{
  content:"✦"!important;
  position:absolute!important;
  left:1rem!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  color:#C58B17!important;
  font-size:1rem!important;
  font-weight:900!important;
}
.reading-shell .step-track{
  gap:.55rem!important;
}
.reading-shell .step-track button{
  background:#fff!important;
  border:1px solid var(--bn-line)!important;
  border-radius:14px!important;
  color:var(--bn-muted)!important;
  box-shadow:0 6px 16px rgba(13,93,75,.04)!important;
}
.reading-shell .step-track button.done:not(.current){
  background:#EFF9F5!important;
  color:var(--bn-deep)!important;
  border-color:#BFE1D4!important;
}
.reading-shell .step-track button.current,
.reading-shell .step-track button.done.current{
  background:linear-gradient(135deg,var(--bn-deep),var(--bn-emerald))!important;
  color:#fff!important;
  border-color:var(--bn-emerald)!important;
  box-shadow:0 10px 22px rgba(13,93,75,.16)!important;
}
.reading-shell .step-track button:nth-child(1){border-top:4px solid var(--bn-emerald)!important}
.reading-shell .step-track button:nth-child(2){border-top:4px solid var(--bn-gold)!important}
.reading-shell .step-track button:nth-child(3){border-top:4px solid var(--bn-blue)!important}
.reading-shell .step-track button:nth-child(4){border-top:4px solid var(--bn-teal)!important}
.reading-shell .step-track button:nth-child(5){border-top:4px solid #6CB9A1!important}
.reading-shell .step-track button:nth-child(6){border-top:4px solid #E08B2E!important}
.reading-shell .step-track button:nth-child(7){border-top:4px solid #0F6F59!important}

.reading-shell:has(.step-track button:nth-child(1).current){--lesson-accent:#159B72!important;--lesson-accent-soft:#EDF8F4!important;--lesson-note-bg:linear-gradient(135deg,#F6FDF9,#E6F6EF)!important;--lesson-note-border:#7BCFB2!important;--lesson-example-bg:linear-gradient(135deg,#EEF6FD,#DDECF8)!important;--lesson-flash-bg:linear-gradient(135deg,#F6FBF9,#ECF7F2)!important;--lesson-feedback-bg:#EEF8F4!important;--lesson-panel-edge:#D8E8E1!important}
.reading-shell:has(.step-track button:nth-child(2).current){--lesson-accent:#D8921B!important;--lesson-accent-soft:#FFF8EA!important;--lesson-note-bg:linear-gradient(135deg,#FFF9EC,#FFF0C7)!important;--lesson-note-border:#EDC565!important;--lesson-example-bg:linear-gradient(135deg,#FFFDF7,#FFF4DA)!important;--lesson-flash-bg:linear-gradient(135deg,#FFF9F0,#FFF3D5)!important;--lesson-feedback-bg:#FFF8EC!important;--lesson-panel-edge:#F1DFB4!important}
.reading-shell:has(.step-track button:nth-child(3).current){--lesson-accent:#2585D8!important;--lesson-accent-soft:#EEF6FD!important;--lesson-note-bg:linear-gradient(135deg,#EEF6FD,#DCECF9)!important;--lesson-note-border:#8FC0EB!important;--lesson-example-bg:linear-gradient(135deg,#F4F9FE,#E3F0FB)!important;--lesson-flash-bg:linear-gradient(135deg,#F1F8FE,#E4F0FB)!important;--lesson-feedback-bg:#EEF6FD!important;--lesson-panel-edge:#D2E4F5!important}
.reading-shell:has(.step-track button:nth-child(4).current){--lesson-accent:#25A77A!important;--lesson-accent-soft:#EDF9F4!important;--lesson-note-bg:linear-gradient(135deg,#F3FBF7,#DFF4EB)!important;--lesson-note-border:#8CD5B7!important;--lesson-example-bg:linear-gradient(135deg,#F5FCF8,#E6F6EF)!important;--lesson-flash-bg:linear-gradient(135deg,#F3FBF7,#E4F5EE)!important;--lesson-feedback-bg:#EEF8F4!important;--lesson-panel-edge:#D4E9DF!important}
.reading-shell:has(.step-track button:nth-child(5).current){--lesson-accent:#159B72!important;--lesson-accent-soft:#EEF8F4!important;--lesson-note-bg:linear-gradient(135deg,#F5FBF8,#E8F6F0)!important;--lesson-note-border:#8FD1BC!important;--lesson-example-bg:linear-gradient(135deg,#FAFDFB,#EEF8F4)!important;--lesson-flash-bg:linear-gradient(135deg,#F4FBF8,#E8F6F0)!important;--lesson-feedback-bg:#EEF8F4!important;--lesson-panel-edge:#D8E9E2!important}
.reading-shell:has(.step-track button:nth-child(6).current){--lesson-accent:#E08B2E!important;--lesson-accent-soft:#FFF6EC!important;--lesson-note-bg:linear-gradient(135deg,#FFF8F0,#FFE8CC)!important;--lesson-note-border:#F1BD7D!important;--lesson-example-bg:linear-gradient(135deg,#FFFDF8,#FFF0DD)!important;--lesson-flash-bg:linear-gradient(135deg,#FFF8F2,#FFEEDB)!important;--lesson-feedback-bg:#FFF8EE!important;--lesson-panel-edge:#F2DEC5!important}
.reading-shell:has(.step-track button:nth-child(7).current){--lesson-accent:#0D5D4B!important;--lesson-accent-soft:#EEF8F4!important;--lesson-note-bg:linear-gradient(135deg,#F5FBF8,#E2F4EC)!important;--lesson-note-border:#8ECFB6!important;--lesson-example-bg:linear-gradient(135deg,#F7FCFA,#E8F6F1)!important;--lesson-flash-bg:linear-gradient(135deg,#F4FBF8,#E4F5EE)!important;--lesson-feedback-bg:#EEF8F4!important;--lesson-panel-edge:#D6E8E1!important}

.reading-shell .lesson-panel{
  background:linear-gradient(180deg,#FFFFFF 0%,#FCFEFD 100%)!important;
  border:1px solid var(--bn-line)!important;
  border-radius:22px!important;
  box-shadow:0 16px 40px rgba(13,93,75,.08)!important;
}
.reading-shell .note{
  background:var(--lesson-note-bg)!important;
  border:1px solid var(--lesson-note-border)!important;
  border-left:8px solid var(--lesson-accent)!important;
  color:#5D4D28!important;
  border-radius:16px!important;
  box-shadow:0 10px 22px rgba(90,76,33,.06)!important;
}
.reading-shell .note strong{color:#895E0E!important}
.reading-shell .example,
.reading-shell .flash,
.reading-shell .feedback,
.reading-shell .option,
.reading-shell .vn-more,
.reading-shell .vn-tip,
.reading-shell .vn-node,
.reading-shell .colored-example,
.reading-shell .ig-example,
.reading-shell .ig-comparison,
.reading-shell .ig-chip{
  border-radius:16px!important;
}
.reading-shell .example{
  background:var(--lesson-example-bg)!important;
  border:1px solid var(--lesson-panel-edge)!important;
  color:#1D5D7D!important;
}
.reading-shell .flash{
  background:var(--lesson-flash-bg)!important;
  border:1px dashed var(--lesson-note-border)!important;
  color:#355D58!important;
}
.reading-shell .feedback{
  background:var(--lesson-feedback-bg)!important;
  border:1px solid #B7DFCF!important;
  border-left:8px solid var(--bn-emerald)!important;
  color:var(--bn-deep)!important;
}
.reading-shell .feedback.retry{
  background:linear-gradient(135deg,#FFF5E8,#FFE2BD)!important;
  border-color:#E8C18D!important;
  border-left-color:var(--bn-gold)!important;
  color:#714A09!important;
}

/* topic 1 comparison cards and similar boxed content */
.reading-shell .t1-comparisons,
.reading-shell .ig-comparison,
.reading-shell .vn-branches{
  gap:1rem!important;
}
.reading-shell .t1-compare,
.reading-shell .ig-comparison{
  background:#fff!important;
  border:1px solid #D8E7E1!important;
  border-radius:18px!important;
  box-shadow:0 10px 24px rgba(13,93,75,.05)!important;
  overflow:hidden!important;
}
.reading-shell .t1-compare summary,
.reading-shell .ig-comparison > :first-child{
  list-style:none!important;
  cursor:pointer!important;
  padding:1rem 1rem .9rem!important;
  background:linear-gradient(135deg,#F7FCFA,#EDF8F4)!important;
  border-bottom:1px solid #E0ECE7!important;
}
.reading-shell .t1-compare summary::-webkit-details-marker{display:none!important}
.reading-shell .t1-compare[open] summary{
  background:linear-gradient(135deg,#EEF8F4,#FFF8EC)!important;
}
.reading-shell .t1-compare.is-complete summary{
  background:linear-gradient(135deg,#F1FBF6,#E3F5EA)!important;
}
.reading-shell .t1-compare p{
  margin:0!important;
  padding:0 1rem 1rem!important;
  color:#4D5D58!important;
  line-height:1.7!important;
}
.reading-shell .t1-example,
.reading-shell .ig-example,
.reading-shell .vn-fresh-example,
.reading-shell .vn-rule-example,
.reading-shell .vn-example-line{
  background:#EEF6FD!important;
  border:1px solid #C5DBEE!important;
  border-radius:14px!important;
  color:#1E6092!important;
  padding:.72rem .95rem!important;
}
.reading-shell .t1-keypoint,
.reading-shell .ig-chip,
.reading-shell .vn-legend{
  background:linear-gradient(135deg,#FFF8E9,#FFF0C8)!important;
  color:#7A5111!important;
  border:1px solid #EFD59D!important;
  border-radius:16px!important;
  padding:.9rem 1rem!important;
}
.reading-shell details,
.reading-shell .option,
.reading-shell .activity-card,
.reading-shell .quiz-card,
.reading-shell .tool-card,
.reading-shell .topic-link,
.reading-shell .topic-card{
  border-color:#DCE8E2!important;
}
.reading-shell .option:hover,
.reading-shell .topic-link:hover,
.reading-shell .tool-card:hover{
  border-color:#8ECFB6!important;
  box-shadow:0 10px 22px rgba(13,93,75,.08)!important;
}

/* ===== MASTERY PAGE FULL THEME REFRESH ===== */
body:has(#bn-mastery-root){
  background:
    radial-gradient(circle at top right, rgba(243,163,26,.09), transparent 30%),
    radial-gradient(circle at left 18%, rgba(37,167,122,.08), transparent 26%),
    linear-gradient(180deg,#FFFFFF,#F6FBF8 42%,#EFF8F4 100%)!important;
  color:var(--bn-text)!important;
}
#bn-mastery-root .bn-head,
#bn-mastery-root .bn-tabs-wrap{background:transparent!important;border-color:#E3ECE7!important}
#bn-mastery-root .bn-topbar{align-items:flex-start!important}
#bn-mastery-root .bn-brand h1,
#bn-mastery-root .bn-title-main{color:var(--bn-deep)!important;text-shadow:none!important}
#bn-mastery-root .bn-title-sep{color:#C4922A!important}
#bn-mastery-root .bn-title-ar{color:var(--bn-emerald)!important}
#bn-mastery-root .bn-brand p,
#bn-mastery-root .bn-hero-desc,
#bn-mastery-root .bn-section-head p,
#bn-mastery-root .bn-card p,
#bn-mastery-root .bn-card li,
#bn-mastery-root .bn-stat span,
#bn-mastery-root .bn-explorer small{color:var(--bn-muted)!important}
#bn-mastery-root .bn-logo{
  width:76px!important;height:76px!important;border-radius:18px!important;
  background:#fff!important;border:1px solid #DCE8E2!important;
  box-shadow:0 14px 30px rgba(13,93,75,.09)!important;
  overflow:hidden!important;padding:8px!important;color:transparent!important;font-size:0!important;
}
#bn-mastery-root .bn-logo img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important}
#bn-mastery-root .bn-home{
  background:#fff!important;border:1px solid #DCE8E2!important;color:var(--bn-deep)!important;
  box-shadow:0 10px 22px rgba(13,93,75,.07)!important;
}
#bn-mastery-root .bn-hero-card,
#bn-mastery-root .bn-side-card,
#bn-mastery-root .bn-panel,
#bn-mastery-root .bn-card,
#bn-mastery-root .bn-stat,
#bn-mastery-root .bn-topic,
#bn-mastery-root .bn-explorer{
  border-color:#DCE8E2!important;
  box-shadow:0 14px 34px rgba(13,93,75,.07)!important;
}
#bn-mastery-root .bn-hero-card{
  background:linear-gradient(135deg,#FFFFFF 0%,#F0F9F4 52%,#FDF8EE 100%)!important;
}
#bn-mastery-root .bn-side-card{background:linear-gradient(180deg,#F8FCFA,#FFF8ED)!important}
#bn-mastery-root .bn-kicker,
#bn-mastery-root .bn-tab.on,
#bn-mastery-root .bn-pill-link.primary,
#bn-mastery-root .bn-color-chip.active{
  background:linear-gradient(135deg,var(--bn-deep),var(--bn-emerald))!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:0 10px 24px rgba(13,93,75,.18)!important;
}
#bn-mastery-root .bn-pill-link.ghost,
#bn-mastery-root .bn-tab,
#bn-mastery-root .bn-color-chip{
  background:#fff!important;
  color:var(--bn-deep)!important;
  border-color:#DCE8E2!important;
}
#bn-mastery-root .bn-tab:hover,
#bn-mastery-root .bn-color-chip:hover,
#bn-mastery-root .bn-home:hover{
  border-color:#A4D6C2!important;
}
#bn-mastery-root .bn-badge{
  background:linear-gradient(135deg,#FFF8EA,#FFF1CC)!important;
  color:#7A5111!important;
  border:1px solid #EFD7A2!important;
}
#bn-mastery-root .bn-progress-track{background:#E5F2EC!important}
#bn-mastery-root .bn-progress-bar{background:linear-gradient(90deg,var(--bn-gold),var(--bn-emerald),var(--bn-teal))!important}
#bn-mastery-root .bn-flow .bn-chip{
  background:linear-gradient(135deg,#EEF8F4,#FFF8EC)!important;
  color:var(--bn-deep)!important;
  border:1px solid #DCE8E2!important;
}
#bn-mastery-root .bn-card h3,
#bn-mastery-root .bn-section-head h2,
#bn-mastery-root .bn-explorer h3,
#bn-mastery-root .bn-topic b{color:var(--bn-deep)!important}
#bn-mastery-root .bn-card.theme1{background:linear-gradient(180deg,#F5FBF8,#E5F5EE)!important;border-color:#C9E5D9!important}
#bn-mastery-root .bn-card.theme2{background:linear-gradient(180deg,#F8FBFF,#E5EFFA)!important;border-color:#CADCF0!important}
#bn-mastery-root .bn-card.theme3{background:linear-gradient(180deg,#FCFDF8,#EEF8F1)!important;border-color:#CCE5D7!important}
#bn-mastery-root .bn-card.theme4{background:linear-gradient(180deg,#FFFCF3,#FFF1CB)!important;border-color:#EFD59D!important}
#bn-mastery-root .bn-card.theme5{background:linear-gradient(180deg,#F6FBF9,#EAF6F1)!important;border-color:#CDE3D8!important}
#bn-mastery-root .bn-note.purple,
#bn-mastery-root .bn-note.teal,
#bn-mastery-root .bn-note.success{
  background:linear-gradient(135deg,#EFF9F5,#DFF3EA)!important;
  border-color:#A8D8C4!important;
}
#bn-mastery-root .bn-note.warn{background:linear-gradient(135deg,#FFF9E8,#FFE7B1)!important;border-color:#EECF74!important}
#bn-mastery-root .bn-note.info,
#bn-mastery-root .bn-note.sky{background:linear-gradient(135deg,#EEF6FD,#DDEBF7)!important;border-color:#A8CBE7!important}
#bn-mastery-root .bn-note.rose{background:linear-gradient(135deg,#FFF4EB,#FFE0C7)!important;border-color:#EDC29A!important}
#bn-mastery-root .bn-level.teras{background:#EDF8F4!important;color:var(--bn-deep)!important}
#bn-mastery-root .bn-level.lanjutan{background:#FFF5DF!important;color:#9A6100!important}
#bn-mastery-root .bn-level.asas{background:#EAF8F1!important;color:#276F58!important}
#bn-mastery-root .bn-search{border-color:#DCE8E2!important;color:var(--bn-text)!important}
#bn-mastery-root .bn-search:focus{outline:3px solid rgba(65,199,155,.16)!important;border-color:#92CFB7!important}
#bn-mastery-root .bn-ar{color:#244C41!important}

@media(max-width:760px){
  .reading-shell .house-note-link{padding-left:2.55rem!important}
  #bn-mastery-root .bn-logo{width:68px!important;height:68px!important}
}