.chapters .btn {
    border-radius: 20px;
    max-width: fit-content;
}

.banner {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin: 20px 0;
}

.banner-content {
    position: relative;
    width: 100%;
    height: 100%; /* Ensure it matches the banner height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
    text-align: center;
    padding: 20px;
    color: #fff;
}

.banner-content img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Occupy full width */
    height: 100%; /* Occupy full height */
    object-fit: cover; /* Ensure the image covers the container without distortion */
    z-index: -1; /* Place behind the text */
}

.banner h1 {
    z-index: 2; /* Ensure the text is on top */
    color: white;
    font-size: 2.5rem; /* Adjust as needed */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Add contrast for text visibility */
}

/* Moving Gradient Background (Only applies if there's no image) */
.gradient-bg {
    background: linear-gradient(-45deg, #1e3c72, #2a5298, #304f9e, #007bff);
    background-size: 400% 400%;
    animation: gradientAnimation 6s infinite alternate ease-in-out;
}

/* Keyframes for the moving gradient */
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

/* Hero Section */
.hero-section {
    background: var(--ppl-deep-sea-green);
    color: white;
}

/* =========================
   Unit Page Title Header
   ========================= */

.unit-page-header{
  margin-bottom: 32px;
  text-align: center;
}

.unit-page-title{
  margin: 0;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 1000;
  letter-spacing: -0.03em;

  color: var(--ppl-mirage);

  position: relative;
  display: inline-block;
}

.unit-page-divider{
  margin: 14px auto 0;
  width: 120px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
      to right,
      var(--ppl-deep-sea-green),
      var(--ppl-blaze-orange)
  );
}

/* Image on the Left of the Card */
.card-img-left {
    width: 150px; /* Fixed width for images */
    height: auto;
    object-fit: cover; /* Crop images nicely */
}

/* Sidebar */
.sidebar {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    padding: 1rem;
    background-color: #fff;
    border-right: 1px solid var(--ppl-mirage);
}

/* =========================
   Chapters
   ========================= */

/* Remove card styling completely */
.chapter-card{
  background-color: var(--ppl-wild-sand);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 20px;
  position: relative;
}

/* Elegant divider between chapters */
.chapter-card:not(:last-child){
  border-bottom: 1px solid var(--ppl-deep-sea-green);
}

/* Clean body spacing */
.chapter-card .card-body{
  padding: 0;
}

/* Chapter title */
.chapter-card .card-title{
  margin: 0 0 16px;
  font-weight: 900;
  letter-spacing: -0.4px;
  color: #0F172A;
  font-size: clamp(1.1rem, 1.3vw, 1.3rem);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Soften emoji slightly */
.chapter-card .card-title{
  filter: saturate(1.05);
}

/* Premium badge */
.open-for-all{
  background: var(--ppl-blaze-orange);
  color: var(--ppl-wild-sand);
  border: 1px solid var(--ppl-blaze-orange);
  font-size: 15px;
  border-radius: 50px;
  padding: 6px 10px;
}

.open-for-all-nav{
  color: var(--ppl-blaze-orange);
  font-size: 15px;
  border-radius: 50px;
  padding: 6px 10px;
}

/* Back to units link */
.back-link{
  font-weight: 900;
  color: var(--ppl-deep-sea-green);
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, opacity .15s ease;
}

.back-link:hover{
  transform: translateX(-3px);
  opacity: 0.85;
}

/* =========================
   Chapter Actions (Flat)
   ========================= */

.chapter-card .d-flex.justify-content-start{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* =========================
   Subchapter "No Buttons" Cards
   ========================= */

/* --- Collapsible subchapters container (smooth expand) --- */
.dropdown-content{
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition: max-height .55s ease, opacity .35s ease, transform .35s ease;
  will-change: max-height, opacity, transform;
}

.dropdown-content.show{
  max-height: 2000px; /* big enough for your biggest chapter */
  opacity: 1;
  transform: translateY(0);
}

/* --- Equal heights across the grid --- */
.dropdown-content .row > div{
  display: flex;           /* make each bootstrap column a flex wrapper */
}

.ppl-subcard{
  position: relative;
  width: 100%;             /* equal widths within each column */
  display: flex;           /* enables pushing actions to bottom */
  flex-direction: column;
  border-radius: 18px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(15,23,42,0.08);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease;
}

.ppl-subcard:hover{
  transform: translateY(-3px);
  border-color: rgba(46,204,113,0.35);
}

/* --- Main clickable header area --- */
.ppl-subcard__main{
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 14px 14px 10px;
  flex: 1;                 /* fills space so actions sit at bottom */
}

.ppl-subcard__top{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.ppl-subcard__icon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--ppl-blaze-orange);
  flex: 0 0 auto;
}

.ppl-subcard__title{
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: #0F172A;
  line-height: 1.2;
  font-size: 0.98rem;
}

.ppl-subcard__hint{
  margin-top: 6px;
  font-size: 0.78rem;
  color: #64748B;
}

/* --- Bottom action strip (centered) --- */
.ppl-subcard__actions{
  display: flex;
  justify-content: center; /* centers chips */
  align-items: center;
  gap: 12px;
  padding: 12px 12px 14px;
  border-top: 1px solid rgba(15,23,42,0.06);
  background: linear-gradient(180deg, rgba(244,246,250,0.2), rgba(244,246,250,0.65));
}

/* --- Compact chips (not "buttons") --- */
.ppl-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;  /* keeps icon+text centered */
  gap: 8px;
  padding: 8px 12px;
  min-width: 92px;          /* makes chips feel balanced */
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ppl-mirage);
  border: 1px solid var(--ppl-deep-sea-green);
  background: #fff;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}

.ppl-chip i{
  font-size: 0.9rem;
}

.ppl-chip:hover{
  transform: translateY(-1px);
  border-color: var(--ppl-deep-sea-green);
  background: var(--ppl-deep-sea-green);
  color: var(--ppl-wild-sand);
}

/* --- Make chips icon-only on tiny screens --- */
@media (max-width: 420px){
  .ppl-chip{
    min-width: auto;
    padding: 8px 10px;
  }
}

/* --- Keyboard focus --- */
.ppl-subcard__main:focus-visible,
.ppl-chip:focus-visible{
  outline: 3px solid rgba(59,130,246,0.35);
  outline-offset: 2px;
}

/* =========================
   Unit Page Dark Mode
   ========================= */
html[data-theme="dark"] .sidebar{
  background-color: #1a2a33;
  border-right-color: rgba(232,241,245,0.2);
}

html[data-theme="dark"] .unit-page-title,
html[data-theme="dark"] .sidebar-title,
html[data-theme="dark"] .chapter-card .card-title,
html[data-theme="dark"] .ppl-subcard__title,
html[data-theme="dark"] .ppl-subcard__hint,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .text-center{
  color: rgba(232,241,245,0.9);
}

html[data-theme="dark"] .list-group-item{
  background: #15242c;
  border-color: rgba(232,241,245,0.16);
}

html[data-theme="dark"] .chapter-card{
  background-color: #13212a;
}

html[data-theme="dark"] .chapter-card:not(:last-child){
  border-bottom-color: rgba(232,241,245,0.22);
}

html[data-theme="dark"] .ppl-subcard{
  background: #1a2a33;
  border-color: rgba(232,241,245,0.18);
}

html[data-theme="dark"] .ppl-subcard__actions{
  border-top-color: rgba(232,241,245,0.14);
  background: linear-gradient(180deg, rgba(19,33,42,0.65), rgba(19,33,42,0.92));
}

html[data-theme="dark"] .ppl-chip{
  background: #15242c;
  color: rgba(232,241,245,0.92);
  border-color: rgba(232,241,245,0.24);
}

html[data-theme="dark"] .ppl-chip:hover{
  background: var(--ppl-deep-sea-green);
  color: var(--ppl-wild-sand);
  border-color: var(--ppl-deep-sea-green);
}

html[data-theme="dark"] .back-link{
  color: rgba(232,241,245,0.9);
}

/* Container for unit chapter browser polish */
/* =========================
   Mockup Unit Chapter Browser
   ========================= */
body:has(.chapters.row){
  background:#fffbf6;
}

.chapters.row{
  margin:0 auto;
  max-width:1120px;
}

.unit-page-header{
  background:#102d6c;
  border-radius:18px;
  margin-bottom:16px;
  padding:28px;
}

.unit-page-title{
  color:#ffffff;
  font-size:clamp(30px, 4vw, 48px);
  font-weight:950;
  letter-spacing:0;
  line-height:1;
}

.unit-page-divider{
  background:#dcf465;
  border-radius:999px;
  height:4px;
  margin-top:14px;
  width:74px;
}

.sidebar,
.content-area,
.chapter-card{
  border-color:#ece7de;
  box-shadow:none;
}

.sidebar{
  background:#ffffff;
  border-radius:16px;
  padding:18px;
}

.chapter-card{
  background:#ffffff;
  border-radius:16px;
  overflow:hidden;
}

.ppl-subcard{
  border-color:#ece7de;
  border-radius:14px;
}

html[data-theme="dark"] body:has(.chapters.row){
  background:#0f1e3d;
}

html[data-theme="dark"] .unit-page-header{
  background:#08152f;
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .chapter-card,
html[data-theme="dark"] .ppl-subcard{
  background:#132244;
  border-color:rgba(219,230,251,.16);
}

@media (max-width: 760px){
  .chapters.row{
    gap:16px;
  }

  .unit-page-header{
    padding:24px 20px;
  }
}

/* Container for revised unit chapter browser */
/* =========================
   Study Unit Mockup Layout
   ========================= */
.ppl-unitPage{
  margin:0 auto;
  max-width:1200px;
}

.ppl-unitHero{
  background:#102d6c;
  border-radius:18px;
  color:#ffffff;
  display:grid;
  gap:18px;
  grid-template-columns:minmax(0,1fr) minmax(260px,320px);
  margin:0 0 18px;
  padding:28px;
}

.ppl-unitHero__eyebrow{
  align-items:center;
  background:rgba(255,255,255,.12);
  border-radius:999px;
  color:#dbe6fb;
  display:inline-flex;
  font-size:.74rem;
  font-weight:1000;
  gap:8px;
  margin-bottom:12px;
  min-height:30px;
  padding:0 12px;
  text-transform:uppercase;
}

.ppl-unitHero h1{
  color:#ffffff;
  font-size:clamp(2rem, 4vw, 3.4rem);
  font-weight:1000;
  letter-spacing:0;
  line-height:1.04;
  margin:0 0 10px;
}

.ppl-unitHero p{
  color:#dbe6fb;
  font-size:.95rem;
  font-weight:700;
  line-height:1.7;
  margin:0;
  max-width:60ch;
}

.ppl-unitHero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.ppl-unitHero__side{
  display:grid;
  gap:12px;
}

.ppl-unitHero__tile{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:16px;
}

.ppl-unitHero__tile strong{
  color:#dcf465;
  display:block;
  font-size:1rem;
  font-weight:1000;
  margin-bottom:6px;
}

.ppl-unitHero__tile span{
  color:#dbe6fb;
  display:block;
  font-size:.82rem;
  font-weight:750;
  line-height:1.55;
}

.ppl-unitLayout{
  display:grid;
  gap:18px;
  grid-template-columns:280px minmax(0,1fr);
}

.ppl-unitRail__head{
  align-items:center;
  display:flex;
  gap:10px;
  justify-content:space-between;
}

.ppl-unitRail__head h5{
  color:#16232a;
  font-size:1.2rem;
  font-weight:1000;
  letter-spacing:0;
  margin:0;
}

.ppl-unitRail__list .list-group-item{
  align-items:center;
  border:0;
  border-left:3px solid transparent;
  border-radius:10px !important;
  color:#334155;
  display:flex;
  font-size:.96rem;
  font-weight:850;
  gap:8px;
  justify-content:space-between;
  margin-bottom:8px;
  padding:14px 14px;
}

.ppl-unitRail__list .list-group-item:hover,
.ppl-unitRail__list .list-group-item:focus{
  background:#eef3ff;
  border-left-color:#274e9d;
  color:#102d6c;
}

.ppl-unitRail__card{
  background:#ffffff;
  border:1px solid #ece7de;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(15,23,42,.05);
  padding:18px;
}

.ppl-unitRail__card h6{
  color:#102d6c;
  font-size:1.3rem;
  font-weight:1000;
  letter-spacing:0;
  margin:0 0 8px;
}

.ppl-unitRail__card p{
  color:#6b7280;
  font-size:.88rem;
  font-weight:700;
  line-height:1.65;
  margin:0 0 14px;
}

.ppl-unitMain{
  display:grid;
  gap:18px;
}

.ppl-unitFeature{
  display:grid;
  gap:18px;
}

.ppl-unitFeature__hero{
  background:#102d6c;
  border-radius:18px;
  color:#ffffff;
  padding:28px 26px;
}

.ppl-unitFeature__icon{
  align-items:center;
  color:#dbe6fb;
  display:inline-grid;
  font-size:1rem;
  height:34px;
  justify-items:center;
  width:34px;
}

.ppl-unitFeature__hero h2{
  color:#ffffff;
  font-size:clamp(1.8rem, 3vw, 2.6rem);
  font-weight:1000;
  letter-spacing:0;
  line-height:1.08;
  margin:6px 0 10px;
}

.ppl-unitFeature__hero p{
  color:#dbe6fb;
  font-size:.92rem;
  font-weight:700;
  line-height:1.7;
  margin:0 0 16px;
  max-width:58ch;
}

.ppl-unitFeature__stats{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-bottom:18px;
}

.ppl-unitFeature__stats div{
  min-width:84px;
}

.ppl-unitFeature__stats strong{
  color:#ffffff;
  display:block;
  font-size:1.55rem;
  font-weight:1000;
  line-height:1;
}

.ppl-unitFeature__stats span{
  color:#dbe6fb;
  display:block;
  font-size:.78rem;
  font-weight:850;
  margin-top:4px;
}

.ppl-topicCard{
  background:#ffffff;
  border:1px solid #ece7de;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(15,23,42,.05);
  display:flex;
  flex-direction:column;
  gap:12px;
  height:100%;
  padding:18px;
}

.ppl-topicCard__icon{
  align-items:center;
  background:#aecbff;
  border-radius:12px;
  color:#1c46a5;
  display:grid;
  height:40px;
  justify-items:center;
  width:40px;
}

.ppl-topicCard h3{
  color:#16232a;
  font-size:1.15rem;
  font-weight:1000;
  letter-spacing:0;
  line-height:1.2;
  margin:0;
}

.ppl-topicCard p{
  color:#6b7280;
  font-size:.88rem;
  font-weight:700;
  line-height:1.65;
  margin:0;
}

.ppl-topicCard__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:auto;
}

.ppl-chip--active{
  background:#274e9d;
  border-color:#274e9d;
  color:#ffffff;
}

.ppl-chapterRow{
  border:1px solid #ece7de;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(15,23,42,.05);
  overflow:hidden;
  padding:22px;
}

.ppl-chapterRow__head{
  align-items:flex-start;
  display:flex;
  gap:16px;
  justify-content:space-between;
}

.ppl-chapterRow__titleWrap{
  min-width:0;
}

.ppl-chapterRow__titleWrap .card-title{
  margin:0 0 8px;
}

.ppl-chapterRow__titleWrap p{
  color:#6b7280;
  font-size:.88rem;
  font-weight:700;
  line-height:1.6;
  margin:0;
}

.ppl-chapterRow__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

.ppl-unitEmpty{
  background:#ffffff;
  border:1px dashed #cbd5e1;
  border-radius:16px;
  color:#64748b;
  font-size:.92rem;
  font-weight:850;
  padding:18px;
}

html[data-theme="dark"] .ppl-unitHero,
html[data-theme="dark"] .ppl-unitFeature__hero{
  background:#08152f;
}

html[data-theme="dark"] .ppl-unitRail__head h5,
html[data-theme="dark"] .ppl-topicCard h3,
html[data-theme="dark"] .ppl-unitRail__card h6,
html[data-theme="dark"] .ppl-chapterRow__titleWrap .card-title{
  color:#ffffff;
}

html[data-theme="dark"] .ppl-unitRail__card,
html[data-theme="dark"] .ppl-topicCard,
html[data-theme="dark"] .ppl-chapterRow,
html[data-theme="dark"] .ppl-unitEmpty{
  background:#132244;
  border-color:rgba(219,230,251,.16);
}

html[data-theme="dark"] .ppl-unitRail__card p,
html[data-theme="dark"] .ppl-topicCard p,
html[data-theme="dark"] .ppl-chapterRow__titleWrap p,
html[data-theme="dark"] .ppl-unitEmpty,
html[data-theme="dark"] .ppl-unitRail__list .list-group-item{
  color:#c6cfec;
}

html[data-theme="dark"] .ppl-unitRail__list .list-group-item{
  background:#132244;
}

html[data-theme="dark"] .ppl-unitRail__list .list-group-item:hover,
html[data-theme="dark"] .ppl-unitRail__list .list-group-item:focus{
  background:#1a2f5b;
  border-left-color:#d8f45f;
  color:#ffffff;
}

html[data-theme="dark"] .ppl-topicCard__icon{
  background:#1f3c77;
  color:#dbe6fb;
}

@media (max-width: 980px){
  .ppl-unitHero{
    grid-template-columns:1fr;
  }
}

@media (max-width: 760px){
  .ppl-unitHero,
  .ppl-unitFeature__hero,
  .ppl-chapterRow{
    padding:20px;
  }

  .ppl-chapterRow__head{
    flex-direction:column;
  }

  .ppl-chapterRow__actions{
    justify-content:flex-start;
  }

  .ppl-unitFeature__stats{
    gap:14px;
  }
}

/* Container for final unit page polish */
/* =========================
   Study Unit Current Design
   ========================= */
body:has(.ppl-unitPage) .main-area{
  background:#fffbf6;
  padding-top:0;
}

.ppl-unitShell{
  background:#fffbf6;
  margin-top:0;
  padding:28px 20px 42px;
}

.ppl-unitPage{
  margin:0 auto;
  max-width:1180px;
}

.ppl-unitHero{
  background:#102d6c;
  border-radius:18px;
  box-shadow:none;
  gap:22px;
  margin-bottom:20px;
  padding:30px;
}

.ppl-unitHero h1{
  color:#ffffff;
  font-size:clamp(32px, 4vw, 56px);
  letter-spacing:0;
}

.ppl-unitHero p{
  color:#dbe6fb;
}

.ppl-unitHero__eyebrow{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.22);
  color:#dcf465;
}

.ppl-unitHero__tile{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
}

.ppl-unitHero__tile strong{
  color:#dcf465;
}

.ppl-unitHero__tile span{
  color:#dbe6fb;
}

.ppl-unitLayout{
  align-items:start;
  gap:20px;
  grid-template-columns:280px minmax(0, 1fr);
}

.ppl-unitRail__head,
.ppl-unitRail__card{
  background:#ffffff;
  border:1px solid #ece7de;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(16,45,108,.06);
  padding:16px;
}

.ppl-unitRail__head{
  align-items:center;
}

.ppl-unitRail__head h5{
  font-size:1rem;
}

.ppl-unitRail__list{
  background:#ffffff;
  border:1px solid #ece7de;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(16,45,108,.06);
  padding:10px;
}

.ppl-unitRail__list .list-group-item{
  border-left-width:3px;
  border-radius:10px !important;
  font-size:.84rem;
  margin-bottom:2px;
  padding:11px 12px;
}

.ppl-unitRail__list .list-group-item.is-active,
.ppl-unitRail__list .list-group-item[aria-current="true"]{
  background:#eef3ff;
  border-left-color:#1c46a5;
  color:#1c46a5;
}

html[data-theme="dark"] .ppl-unitRail__list .list-group-item.is-active,
html[data-theme="dark"] .ppl-unitRail__list .list-group-item[aria-current="true"]{
  background:#1a2f5b;
  border-left-color:#d8f45f;
  color:#ffffff;
}

.ppl-unitRail__card{
  text-align:center;
}

.ppl-unitRail__card h6{
  font-size:1rem;
}

.ppl-unitRail__card .ppl-btn{
  justify-content:center;
  width:100%;
}

.ppl-unitFeature__hero{
  background:#102d6c;
  border-radius:16px;
  box-shadow:none;
  padding:28px;
}

.ppl-unitFeature__icon{
  background:rgba(255,255,255,.12);
  border-radius:10px;
  color:#dcf465;
}

.ppl-unitFeature__hero h2{
  font-size:clamp(24px, 3vw, 34px);
  letter-spacing:0;
}

.ppl-unitFeature__stats{
  margin:18px 0;
}

.ppl-unitFeature__stats strong{
  color:#dcf465;
  font-size:1.35rem;
}

.ppl-topicCard{
  border-color:#ece7de;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(16,45,108,.06);
  min-height:178px;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.ppl-topicCard:hover{
  border-color:#1c46a5;
  box-shadow:0 16px 34px rgba(16,45,108,.12);
  transform:translateY(-3px);
}

.ppl-topicCard:nth-child(3n + 1) .ppl-topicCard__icon,
.row > div:nth-child(3n + 1) .ppl-topicCard__icon{
  background:#aecbff;
  color:#1c46a5;
}

.ppl-topicCard:nth-child(3n + 2) .ppl-topicCard__icon,
.row > div:nth-child(3n + 2) .ppl-topicCard__icon{
  background:#dcf465;
  color:#102d6c;
}

.ppl-topicCard:nth-child(3n) .ppl-topicCard__icon,
.row > div:nth-child(3n) .ppl-topicCard__icon{
  background:#fdecdc;
  color:#c2691f;
}

.ppl-topicCard h3{
  font-size:1rem;
}

.ppl-topicCard p{
  font-size:.82rem;
}

.ppl-chip{
  border-radius:9px;
  font-weight:900;
}

.ppl-chip--active{
  background:#1c46a5;
  border-color:#1c46a5;
}

.ppl-chapterRow{
  background:#ffffff;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(16,45,108,.06);
  padding:0;
}

.ppl-chapterRow__head{
  align-items:center;
  padding:16px 18px;
}

.ppl-chapterRow__titleWrap .card-title{
  color:#102d6c;
  font-size:.95rem;
  letter-spacing:0;
  margin:0 0 4px;
}

.ppl-chapterRow__titleWrap p{
  font-size:.8rem;
}

.ppl-chapterRow__actions .ppl-chip{
  min-height:36px;
}

.dropdown-content{
  border-top:1px solid #ece7de;
  margin-top:0 !important;
  padding:18px;
}

.ppl-subcard{
  border:1px solid #e2e8f4;
  border-radius:14px;
  box-shadow:none;
}

.ppl-subcard__icon{
  background:#eef3ff;
  color:#1c46a5;
}

.ppl-subcard__actions{
  background:#fbfcff;
}

.open-for-all,
.open-for-all-nav{
  background:#dcf465;
  border-color:#dcf465;
  color:#102d6c;
}

html[data-theme="dark"] body:has(.ppl-unitPage) .main-area,
html[data-theme="dark"] .ppl-unitShell{
  background:#0b1428;
}

html[data-theme="dark"] .ppl-unitHero,
html[data-theme="dark"] .ppl-unitFeature__hero{
  background:#08152f;
}

html[data-theme="dark"] .ppl-unitRail__head,
html[data-theme="dark"] .ppl-unitRail__list,
html[data-theme="dark"] .ppl-unitRail__card,
html[data-theme="dark"] .ppl-topicCard,
html[data-theme="dark"] .ppl-chapterRow,
html[data-theme="dark"] .ppl-subcard{
  background:#132244;
  border-color:rgba(219,230,251,.15);
  box-shadow:none;
}

html[data-theme="dark"] .ppl-chapterRow__titleWrap .card-title,
html[data-theme="dark"] .ppl-topicCard h3,
html[data-theme="dark"] .ppl-subcard__title{
  color:#ffffff;
}

html[data-theme="dark"] .ppl-subcard__actions{
  background:#0f1e3d;
  border-color:rgba(219,230,251,.12);
}

html[data-theme="dark"] .dropdown-content{
  border-top-color:rgba(219,230,251,.12);
}

@media (max-width: 980px){
  .ppl-unitShell{
    padding:20px 14px 34px;
  }

  .ppl-unitHero{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .ppl-unitHero,
  .ppl-unitFeature__hero{
    border-radius:14px;
    padding:22px 18px;
  }

  .ppl-unitHero h1{
    font-size:34px;
  }

  .ppl-unitFeature__stats{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .ppl-chapterRow__head{
    align-items:flex-start;
    flex-direction:column;
  }

  .ppl-chapterRow__actions{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    width:100%;
  }

  .ppl-chapterRow__actions .ppl-chip{
    justify-content:center;
  }
}

/* Container for final unit browser polish */
/* =========================
   Study Unit Final Pass
   =========================
   This layer preserves chapter_dict and the existing Notes/MCQs/Cards URLs,
   while fixing the cramped width and long skinny cards shown in the current UI.
*/
body:has(.ppl-unitPage) .main-area{
  background:#fffbf6;
  padding-top:0;
}

.ppl-unitShell{
  background:#fffbf6;
  padding:22px max(16px, calc((100vw - 1220px) / 2)) 48px;
}

.console-box{
  background:#102d6c !important;
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  box-shadow:0 18px 44px rgba(16,45,108,.18);
  color:#ffffff;
  margin:0 auto 18px;
  max-width:1180px;
  padding:16px 18px !important;
}

.console-box h4{
  color:#ffffff;
  font-size:1rem;
  font-weight:1000;
  margin:0 0 10px;
}

.console-box h6{
  color:#dbe6fb;
  font-size:.8rem;
  font-weight:700;
}

.console-box .btn,
.console-box .ppl-btn{
  border-radius:999px;
  font-size:.8rem;
  font-weight:900;
  margin:4px !important;
  min-height:34px;
  padding:7px 12px;
}

.ppl-unitPage{
  max-width:1180px;
  width:100%;
}

.ppl-unitHero{
  align-items:center;
  border-radius:16px;
  grid-template-columns:minmax(0, 1.1fr) minmax(240px, .65fr);
  margin-bottom:18px;
  padding:30px;
}

.ppl-unitHero h1{
  font-size:clamp(36px, 4vw, 58px);
  line-height:.96;
  max-width:680px;
}

.ppl-unitHero p{
  max-width:720px;
}

.ppl-unitHero__side{
  align-self:stretch;
  align-content:center;
}

.ppl-unitHero__tile{
  min-height:96px;
}

.ppl-unitLayout{
  align-items:start;
  display:grid;
  gap:18px;
  grid-template-columns:300px minmax(0, 1fr);
}

.ppl-unitRail__head,
.ppl-unitRail__card{
  background:#ffffff;
  border:1px solid #ece7de;
  box-shadow:0 10px 24px rgba(16,45,108,.06);
}

.ppl-unitRail__head{
  border-radius:14px;
  padding:14px;
}

.ppl-unitRail__list{
  border-radius:14px;
  padding:8px;
}

.ppl-unitRail__list .list-group-item{
  font-size:.82rem;
  line-height:1.25;
  min-height:38px;
  padding:9px 10px;
}

.ppl-unitRail__card{
  border-radius:14px;
  padding:16px;
}

.ppl-unitFeature__hero{
  border-radius:16px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  padding:28px;
}

.ppl-unitFeature__hero .ppl-btn{
  align-self:end;
  justify-self:start;
}

.ppl-unitFeature__stats{
  grid-column:1 / -1;
  margin:14px 0 0;
}

.ppl-unitFeature > .row,
.dropdown-content .row{
  --bs-gutter-x:14px;
  --bs-gutter-y:14px;
}

.ppl-topicCard{
  border-radius:14px;
  gap:10px;
  min-height:0;
  padding:16px;
}

.ppl-topicCard h3{
  font-size:.98rem;
}

.ppl-topicCard p{
  display:-webkit-box;
  font-size:.8rem;
  line-height:1.5;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}

.ppl-topicCard__actions,
.ppl-chapterRow__actions,
.ppl-subcard__actions{
  gap:8px;
}

.ppl-chip{
  border-radius:9px;
  font-size:.78rem;
  min-height:34px;
  min-width:0;
  padding:7px 10px;
}

.ppl-chapterRow{
  background:#ffffff;
  border:1px solid #ece7de;
  border-radius:14px;
  box-shadow:0 10px 24px rgba(16,45,108,.06);
  padding:0;
}

.ppl-chapterRow__head{
  padding:14px 16px;
}

.ppl-chapterRow__titleWrap .card-title{
  align-items:center;
  color:#102d6c;
  display:flex;
  font-size:.92rem;
  gap:8px;
  margin:0 0 4px;
}

.ppl-chapterRow__titleWrap p{
  display:-webkit-box;
  font-size:.78rem;
  line-height:1.45;
  max-width:640px;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.dropdown-content{
  background:#fbfcff;
  border-top:1px solid #ece7de;
  margin-top:0 !important;
  padding:16px;
}

.ppl-subcard{
  background:#ffffff;
  border:1px solid #dbe6fb;
  border-radius:12px;
  min-height:128px;
}

.ppl-subcard__main{
  padding:12px;
}

.ppl-subcard__actions{
  justify-content:flex-start;
  padding:10px 12px 12px;
}

html[data-theme="dark"] body:has(.ppl-unitPage) .main-area,
html[data-theme="dark"] .ppl-unitShell{ background:#0b1428; }

html[data-theme="dark"] .console-box,
html[data-theme="dark"] .ppl-unitHero,
html[data-theme="dark"] .ppl-unitFeature__hero{ background:#08152f !important; }

html[data-theme="dark"] .ppl-unitRail__head,
html[data-theme="dark"] .ppl-unitRail__list,
html[data-theme="dark"] .ppl-unitRail__card,
html[data-theme="dark"] .ppl-topicCard,
html[data-theme="dark"] .ppl-chapterRow,
html[data-theme="dark"] .ppl-subcard,
html[data-theme="dark"] .dropdown-content{
  background:#132244;
  border-color:rgba(219,230,251,.16);
  box-shadow:none;
}

html[data-theme="dark"] .ppl-chapterRow__titleWrap .card-title{ color:#ffffff; }

@media (max-width:980px){
  .ppl-unitShell{ padding:18px 14px 38px; }

  .ppl-unitHero,
  .ppl-unitFeature__hero{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .console-box{ border-radius:12px; }

  .ppl-unitHero,
  .ppl-unitFeature__hero{ padding:20px; }

  .ppl-unitHero h1{ font-size:34px; }

  .ppl-unitFeature__stats{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .ppl-chapterRow__actions,
  .ppl-subcard__actions{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    width:100%;
  }

  .ppl-chip{ justify-content:center; }
}

/* Container for final study unit correction */
/* =========================
   Study Unit Workspace Correction
   ========================= */
body:has(.ppl-unitPage) .main-area,
body:has(.ppl-unitPage) main.content,
body:has(.ppl-unitPage) .content-wrapper{
  padding-top:0 !important;
  margin-top:0 !important;
}

.ppl-unitShell{
  padding:22px max(18px, calc((100vw - 1220px) / 2)) 52px !important;
}

.ppl-unitPage{
  margin:0 auto;
  max-width:1220px !important;
}

.ppl-unitHero{
  box-shadow:0 16px 36px rgba(16,45,108,.14);
  min-height:0;
}

.ppl-unitLayout{
  grid-template-columns:286px minmax(0,1fr) !important;
  gap:20px !important;
}

.ppl-unitRail{
  position: sticky;
  top: 86px;
}

.ppl-unitMain{
  display:grid;
  gap:14px;
  min-width:0;
}

.ppl-unitFeature{
  display:grid;
  gap:14px;
}

.ppl-unitFeature__hero{
  align-items:start;
  grid-template-columns:44px minmax(0,1fr) auto !important;
  gap:10px 14px;
  min-height:0;
  padding:24px !important;
}

.ppl-unitFeature__icon{
  grid-row:1 / span 2;
}

.ppl-unitFeature__hero h2,
.ppl-unitFeature__hero p{
  grid-column:2;
  margin-right:0;
}

.ppl-unitFeature__stats{
  grid-column:2 / -1 !important;
}

.ppl-unitFeature__hero .ppl-btn{
  grid-column:3;
  grid-row:1 / span 2;
  justify-self:end;
  white-space:nowrap;
}

.ppl-unitFeature > .row,
.dropdown-content .row{
  display:grid !important;
  gap:14px !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  margin:0 !important;
}

.ppl-unitFeature > .row > [class*="col-"],
.dropdown-content .row > [class*="col-"]{
  display:block !important;
  max-width:none !important;
  padding:0 !important;
  width:auto !important;
}

.ppl-topicCard{
  display:flex;
  flex-direction:column;
  height:auto !important;
  min-height:182px !important;
  position:relative;
}

.ppl-topicCard::before{
  background:#dcf465;
  border-radius:999px;
  content:"";
  height:4px;
  left:16px;
  position:absolute;
  right:16px;
  top:0;
}

.ppl-topicCard p{
  min-height:0 !important;
}

.ppl-topicCard__actions{
  margin-top:auto;
}

.ppl-chapterRow__head{
  display:grid !important;
  gap:12px;
  grid-template-columns:minmax(0,1fr) auto;
}

.ppl-chapterRow__actions{
  align-items:center;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.ppl-chapterRow .toggle-btn[aria-expanded="true"]{
  background:#dcf465 !important;
  border-color:#dcf465 !important;
  color:#102d6c !important;
}

.ppl-subcard{
  min-height:148px !important;
}

html[data-theme="dark"] .ppl-unitHero,
html[data-theme="dark"] .ppl-unitFeature__hero{
  box-shadow:none;
}

@media (max-width: 780px){
  .ppl-unitShell{
    padding:14px 12px 42px !important;
  }

  .ppl-unitHero,
  .ppl-unitFeature__hero{
    grid-template-columns:1fr !important;
  }

  .ppl-unitFeature__icon,
  .ppl-unitFeature__hero h2,
  .ppl-unitFeature__hero p,
  .ppl-unitFeature__stats,
  .ppl-unitFeature__hero .ppl-btn{
    grid-column:auto !important;
    grid-row:auto !important;
    justify-self:start;
  }

  .ppl-unitFeature > .row,
  .dropdown-content .row{
    grid-template-columns:1fr !important;
  }

  .ppl-chapterRow__head{
    grid-template-columns:1fr;
  }

  .ppl-chapterRow__actions{
    justify-content:flex-start;
  }
}

/* =========================================================
   FINAL CHAPTER WORKSPACE CARD UNIFICATION
   =========================================================
   Goal:
   - Chapter 1 stays open as the featured/default chapter.
   - Closed chapters stay compact.
   - When later chapters are opened, their subchapter cards visually match
     the Chapter 1 topic cards.
*/

/* Keep the workspace rhythm tight and predictable. */
.ppl-unitMain{
  gap: 14px !important;
}

/* Chapter 1 remains the always-open feature block. */
.ppl-unitFeature{
  display: grid !important;
  gap: 14px !important;
}

/* Closed chapter rows: compact, clean summary rows. */
.ppl-chapterRow{
  background: #ffffff !important;
  border: 1px solid #ece7de !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(16,45,108,.06) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.ppl-chapterRow__head{
  align-items: center !important;
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  padding: 14px 16px !important;
}

.ppl-chapterRow__titleWrap{
  min-width: 0 !important;
}

.ppl-chapterRow__titleWrap .card-title{
  align-items: center !important;
  color: #102d6c !important;
  display: flex !important;
  flex-wrap: wrap !important;
  font-size: .95rem !important;
  font-weight: 950 !important;
  gap: 8px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

.ppl-chapterRow__actions{
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}

.ppl-chapterRow__actions .ppl-chip{
  min-height: 34px !important;
}

/* The expanded area behaves like a card grid only when opened. */
.dropdown-content{
  background: #fbfcff !important;
  border-top: 1px solid #ece7de !important;
  margin-top: 0 !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 16px !important;
  transform: translateY(-4px);
  transition:
    max-height .45s ease,
    opacity .24s ease,
    padding .24s ease,
    transform .24s ease;
}

.dropdown-content.show{
  max-height: 2400px !important;
  opacity: 1 !important;
  padding: 16px !important;
  transform: translateY(0) !important;
}

.ppl-chapterRow.is-open{
  border-color: #dbe6fb !important;
  box-shadow: 0 14px 34px rgba(16,45,108,.10) !important;
}

.ppl-chapterRow.is-open .toggle-btn,
.ppl-chapterRow .toggle-btn[aria-expanded="true"]{
  background: #dcf465 !important;
  border-color: #dcf465 !important;
  color: #102d6c !important;
}

/* Make opened subchapter grids match Chapter 1's topic-card grid. */
.dropdown-content.show .row{
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin: 0 !important;
}

.dropdown-content.show .row > [class*="col-"]{
  display: block !important;
  max-width: none !important;
  padding: 0 !important;
  width: auto !important;
}

/* Expanded subchapter cards now visually match .ppl-topicCard. */
.dropdown-content.show .ppl-subcard{
  background: #ffffff !important;
  border: 1px solid #ece7de !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(16,45,108,.06) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  height: 100% !important;
  min-height: 178px !important;
  overflow: hidden !important;
  padding: 18px !important;
  position: relative !important;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease !important;
}

.dropdown-content.show .ppl-subcard::before{
  background: #dcf465;
  border-radius: 999px;
  content: "";
  height: 4px;
  left: 18px;
  position: absolute;
  right: 18px;
  top: 0;
}

.dropdown-content.show .ppl-subcard:hover,
.dropdown-content.show .ppl-subcard:focus-within{
  border-color: #1c46a5 !important;
  box-shadow: 0 16px 34px rgba(16,45,108,.12) !important;
  transform: translateY(-3px) !important;
}

.dropdown-content.show .ppl-subcard__main{
  color: inherit !important;
  display: block !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.dropdown-content.show .ppl-subcard__top{
  align-items: flex-start !important;
  display: grid !important;
  gap: 12px !important;
}

.dropdown-content.show .ppl-subcard__icon{
  align-items: center !important;
  background: #aecbff !important;
  border-radius: 12px !important;
  color: #1c46a5 !important;
  display: grid !important;
  height: 40px !important;
  justify-items: center !important;
  width: 40px !important;
}

.dropdown-content.show .row > div:nth-child(3n + 2) .ppl-subcard__icon{
  background: #dcf465 !important;
  color: #102d6c !important;
}

.dropdown-content.show .row > div:nth-child(3n) .ppl-subcard__icon{
  background: #fdecdc !important;
  color: #c2691f !important;
}

.dropdown-content.show .ppl-subcard__meta{
  min-width: 0 !important;
}

.dropdown-content.show .ppl-subcard__title{
  color: #16232a !important;
  font-size: 1rem !important;
  font-weight: 1000 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

/* Chapter 1 topic cards do not show this hint, so hide it in expanded cards. */
.dropdown-content.show .ppl-subcard__hint{
  display: none !important;
}

.dropdown-content.show .ppl-subcard__actions{
  background: transparent !important;
  border-top: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  margin-top: auto !important;
  padding: 0 !important;
}

/* Same chip feel for Chapter 1 and opened chapters. */
.ppl-topicCard__actions .ppl-chip,
.dropdown-content.show .ppl-subcard__actions .ppl-chip{
  border-radius: 9px !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  min-height: 34px !important;
  min-width: 0 !important;
  padding: 7px 10px !important;
}

.ppl-chip--active,
.dropdown-content.show .ppl-subcard__actions .ppl-chip--active{
  background: #1c46a5 !important;
  border-color: #1c46a5 !important;
  color: #ffffff !important;
}


/* FINAL TOPIC CHIP TIGHTENING */
@media (max-width:420px){
  .ppl-topicCard__actions{
    gap:5px !important;
  }

  .ppl-topicCard__actions .ppl-chip{
    font-size:.66rem !important;
    gap:4px !important;
    min-height:30px !important;
    padding:6px 4px !important;
  }

  .ppl-topicCard__actions .ppl-chip i{
    font-size:.72rem !important;
  }
}

/* Dark mode */
html[data-theme="dark"] .ppl-chapterRow,
html[data-theme="dark"] .dropdown-content.show .ppl-subcard{
  background: #132244 !important;
  border-color: rgba(219,230,251,.16) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .dropdown-content{
  background: #0f1e3d !important;
  border-top-color: rgba(219,230,251,.12) !important;
}

html[data-theme="dark"] .ppl-chapterRow__titleWrap .card-title,
html[data-theme="dark"] .dropdown-content.show .ppl-subcard__title{
  color: #ffffff !important;
}

html[data-theme="dark"] .dropdown-content.show .ppl-subcard:hover,
html[data-theme="dark"] .dropdown-content.show .ppl-subcard:focus-within{
  border-color: rgba(220,244,101,.50) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.20) !important;
}

/* Responsive */
@media (max-width: 1080px){
  .dropdown-content.show .row{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 780px){
  .ppl-chapterRow__head{
    align-items: flex-start !important;
    grid-template-columns: 1fr !important;
  }

  .ppl-chapterRow__actions{
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .dropdown-content.show .row{
    grid-template-columns: 1fr !important;
  }

  .dropdown-content.show .ppl-subcard{
    min-height: 156px !important;
    padding: 16px !important;
  }

  .dropdown-content.show .ppl-subcard__actions,
  .ppl-chapterRow__actions{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .dropdown-content.show .ppl-subcard__actions .ppl-chip,
  .ppl-chapterRow__actions .ppl-chip{
    justify-content: center !important;
  }
}

@media (max-width: 420px){
  .dropdown-content.show{
    padding: 12px !important;
  }

  .dropdown-content.show .ppl-subcard__actions,
  .ppl-chapterRow__actions{
    gap: 7px !important;
  }

  .ppl-chip span{
    font-size: .72rem !important;
  }
}


/* =========================================================
   FINAL ACCORDION CHAPTER WORKSPACE
   Use with the unified chapter HTML below.
   - Every chapter uses the same markup.
   - Closed chapters stay compact.
   - Open chapter becomes the large feature card.
   - Chapter 1 is open by default through HTML classes.
   ========================================================= */

/* Remove MCQ pressed/special effect in this workspace. */
.ppl-unitMain .ppl-chip--active{
  background:#ffffff !important;
  border-color:var(--ppl-deep-sea-green, #1c46a5) !important;
  color:var(--ppl-mirage, #14213d) !important;
}

.ppl-unitMain{
  display:grid !important;
  gap:14px !important;
  min-width:0 !important;
}

/* One component for all chapters */
.ppl-chapterRow{
  background:#ffffff !important;
  border:1px solid #ece7de !important;
  border-radius:16px !important;
  box-shadow:0 10px 24px rgba(16,45,108,.06) !important;
  overflow:hidden !important;
  padding:0 !important;
}

/* Closed compact chapter header */
.ppl-chapterRow__head{
  align-items:center !important;
  background:#ffffff !important;
  color:#102d6c !important;
  display:grid !important;
  gap:12px !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  min-height:66px !important;
  padding:14px 16px !important;
}

.ppl-chapterRow__titleWrap{
  min-width:0 !important;
}

.ppl-chapterRow__titleWrap .card-title{
  align-items:center !important;
  color:#102d6c !important;
  display:flex !important;
  flex-wrap:wrap !important;
  font-size:.96rem !important;
  font-weight:950 !important;
  gap:8px !important;
  letter-spacing:0 !important;
  line-height:1.25 !important;
  margin:0 !important;
}

.ppl-unitFeature__icon{
  align-items:center !important;
  background:transparent !important;
  border-radius:0 !important;
  color:#1c46a5 !important;
  display:inline-grid !important;
  font-size:.9rem !important;
  height:auto !important;
  justify-items:center !important;
  width:auto !important;
}

.ppl-chapterRow__actions{
  align-items:center !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  justify-content:flex-end !important;
}

.ppl-chapterRow__actions .ppl-chip{
  min-height:34px !important;
}

/* Hidden while compact; shown when chapter is open */
.ppl-unitFeature__stats,
.ppl-chapterStart{
  display:none !important;
}

/* Open chapter becomes the former Chapter 1 feature block */
.ppl-chapterRow.is-open{
  border-color:#dbe6fb !important;
  box-shadow:0 16px 38px rgba(16,45,108,.12) !important;
}

.ppl-chapterRow.is-open .ppl-chapterRow__head{
  align-items:start !important;
  background:#102d6c !important;
  color:#ffffff !important;
  display:grid !important;
  gap:10px 14px !important;
  grid-template-columns:44px minmax(0,1fr) auto !important;
  padding:24px !important;
}

.ppl-chapterRow.is-open .ppl-unitFeature__icon{
  align-items:center !important;
  background:rgba(255,255,255,.12) !important;
  border-radius:10px !important;
  color:#dcf465 !important;
  display:grid !important;
  font-size:1rem !important;
  grid-row:1 / span 2 !important;
  height:34px !important;
  justify-items:center !important;
  width:34px !important;
}

.ppl-chapterRow.is-open .ppl-chapterRow__titleWrap{
  grid-column:2 !important;
}

.ppl-chapterRow.is-open .ppl-chapterRow__titleWrap .card-title{
  color:#ffffff !important;
  display:block !important;
  font-size:clamp(24px, 3vw, 34px) !important;
  font-weight:1000 !important;
  letter-spacing:0 !important;
  line-height:1.08 !important;
}

.ppl-chapterRow.is-open .open-for-all{
  display:inline-flex !important;
  margin-left:8px !important;
  vertical-align:middle;
}

.ppl-chapterRow.is-open .ppl-unitFeature__stats{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:18px !important;
  grid-column:2 / -1 !important;
  margin:14px 0 0 !important;
}

.ppl-chapterRow.is-open .ppl-unitFeature__stats div{
  min-width:84px !important;
}

.ppl-chapterRow.is-open .ppl-unitFeature__stats strong{
  color:#dcf465 !important;
  display:block !important;
  font-size:1.35rem !important;
  font-weight:1000 !important;
  line-height:1 !important;
}

.ppl-chapterRow.is-open .ppl-unitFeature__stats span{
  color:#dbe6fb !important;
  display:block !important;
  font-size:.78rem !important;
  font-weight:850 !important;
  margin-top:4px !important;
}

.ppl-chapterRow.is-open .ppl-chapterRow__actions{
  align-self:start !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  grid-column:3 !important;
  grid-row:1 / span 2 !important;
  justify-content:flex-end !important;
}

.ppl-chapterRow.is-open .ppl-chapterRow__actions .ppl-chip{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.28) !important;
  color:#ffffff !important;
}

.ppl-chapterRow.is-open .ppl-chapterRow__actions .ppl-chip:hover,
.ppl-chapterRow.is-open .ppl-chapterRow__actions .ppl-chip:focus-visible{
  background:#dcf465 !important;
  border-color:#dcf465 !important;
  color:#102d6c !important;
}

.ppl-chapterRow.is-open .toggle-btn{
  background:#dcf465 !important;
  border-color:#dcf465 !important;
  color:#102d6c !important;
}

/* Collapsible panel */
.dropdown-content{
  background:#fbfcff !important;
  border-top:0 !important;
  margin-top:0 !important;
  max-height:0;
  opacity:0;
  overflow:hidden;
  padding:0 16px !important;
  transform:translateY(-4px);
  transition:max-height .45s ease, opacity .24s ease, padding .24s ease, transform .24s ease;
}

.dropdown-content.show{
  border-top:1px solid #ece7de !important;
  max-height:2600px !important;
  opacity:1 !important;
  padding:16px !important;
  transform:translateY(0) !important;
}

/* Opened subchapter grid: same as Chapter 1 topic-card grid */
.dropdown-content.show .row{
  display:grid !important;
  gap:14px !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  margin:0 !important;
}

.dropdown-content.show .row > [class*="col-"]{
  display:block !important;
  max-width:none !important;
  padding:0 !important;
  width:auto !important;
}

/* Unified cards: all subchapters are .ppl-topicCard */
.ppl-topicCard{
  background:#ffffff !important;
  border:1px solid #ece7de !important;
  border-radius:16px !important;
  box-shadow:0 10px 28px rgba(16,45,108,.06) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  height:100% !important;
  min-height:178px !important;
  overflow:hidden !important;
  padding:18px !important;
  position:relative !important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

.ppl-topicCard::before{
  background:#dcf465;
  border-radius:999px;
  content:"";
  height:4px;
  left:18px;
  position:absolute;
  right:18px;
  top:0;
}

.ppl-topicCard:hover,
.ppl-topicCard:focus-within{
  border-color:#1c46a5 !important;
  box-shadow:0 16px 34px rgba(16,45,108,.12) !important;
  transform:translateY(-3px) !important;
}

.ppl-topicCard__icon{
  align-items:center !important;
  background:#aecbff !important;
  border-radius:12px !important;
  color:#1c46a5 !important;
  display:grid !important;
  height:40px !important;
  justify-items:center !important;
  width:40px !important;
}

.row > div:nth-child(3n + 2) .ppl-topicCard__icon{
  background:#dcf465 !important;
  color:#102d6c !important;
}

.row > div:nth-child(3n) .ppl-topicCard__icon{
  background:#fdecdc !important;
  color:#c2691f !important;
}

.ppl-topicCard h3{
  color:#16232a !important;
  font-size:1rem !important;
  font-weight:1000 !important;
  letter-spacing:0 !important;
  line-height:1.2 !important;
  margin:0 !important;
}

.ppl-topicCard__actions{
  background:transparent !important;
  border-top:0 !important;
  display:grid !important;
  gap:6px !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  justify-content:stretch !important;
  margin-top:auto !important;
  padding:0 !important;
  width:100% !important;
}

.ppl-topicCard__actions .ppl-chip{
  align-items:center !important;
  border-radius:9px !important;
  display:inline-flex !important;
  font-size:clamp(.68rem, .72vw, .78rem) !important;
  font-weight:900 !important;
  gap:5px !important;
  justify-content:center !important;
  line-height:1 !important;
  min-height:32px !important;
  min-width:0 !important;
  overflow:hidden !important;
  padding:7px 5px !important;
  white-space:nowrap !important;
  width:100% !important;
}

.ppl-topicCard__actions .ppl-chip i{
  flex:0 0 auto !important;
  font-size:.78rem !important;
}

.ppl-topicCard__actions .ppl-chip span{
  display:inline-block !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}


/* No special pressed MCQ effect */
.ppl-topicCard__actions .ppl-chip,
.ppl-topicCard__actions .ppl-chip.ppl-chip--active{
  background:#ffffff !important;
  border-color:var(--ppl-deep-sea-green, #1c46a5) !important;
  color:var(--ppl-mirage, #14213d) !important;
}

.ppl-topicCard__actions .ppl-chip:hover,
.ppl-topicCard__actions .ppl-chip:focus-visible{
  background:var(--ppl-deep-sea-green, #1c46a5) !important;
  border-color:var(--ppl-deep-sea-green, #1c46a5) !important;
  color:var(--ppl-wild-sand, #ffffff) !important;
}

/* Dark mode */
html[data-theme="dark"] .ppl-chapterRow,
html[data-theme="dark"] .ppl-topicCard{
  background:#132244 !important;
  border-color:rgba(219,230,251,.16) !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .dropdown-content{
  background:#0f1e3d !important;
}

html[data-theme="dark"] .ppl-chapterRow__head{
  background:#132244 !important;
}

html[data-theme="dark"] .ppl-chapterRow.is-open .ppl-chapterRow__head{
  background:#08152f !important;
}

html[data-theme="dark"] .ppl-chapterRow__titleWrap .card-title,
html[data-theme="dark"] .ppl-topicCard h3{
  color:#ffffff !important;
}

html[data-theme="dark"] .ppl-topicCard__actions .ppl-chip,
html[data-theme="dark"] .ppl-topicCard__actions .ppl-chip.ppl-chip--active{
  background:#15242c !important;
  border-color:rgba(232,241,245,.24) !important;
  color:rgba(232,241,245,.92) !important;
}

html[data-theme="dark"] .ppl-topicCard__actions .ppl-chip:hover,
html[data-theme="dark"] .ppl-topicCard__actions .ppl-chip:focus-visible{
  background:var(--ppl-deep-sea-green, #1c46a5) !important;
  border-color:var(--ppl-deep-sea-green, #1c46a5) !important;
  color:var(--ppl-wild-sand, #ffffff) !important;
}

/* Responsive */
@media (max-width:1080px){
  .dropdown-content.show .row{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width:780px){
  /* MOBILE UNIT LAYOUT COLLAPSE */
  .ppl-unitLayout{
    grid-template-columns:1fr !important;
  }

  .ppl-chapterRow__head,
  .ppl-chapterRow.is-open .ppl-chapterRow__head{
    grid-template-columns:1fr !important;
    padding:18px !important;
  }

  .ppl-chapterRow.is-open .ppl-unitFeature__icon,
  .ppl-chapterRow.is-open .ppl-chapterRow__titleWrap,
  .ppl-chapterRow.is-open .ppl-unitFeature__stats,
  .ppl-chapterRow.is-open .ppl-chapterRow__actions{
    grid-column:auto !important;
    grid-row:auto !important;
    justify-self:start !important;
  }

  .ppl-chapterRow__actions{
    justify-content:flex-start !important;
    width:100% !important;
  }

  .dropdown-content.show .row{
    grid-template-columns:1fr !important;
  }

  .ppl-topicCard{
    min-height:156px !important;
    padding:16px !important;
  }

  .ppl-chapterRow__actions{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    width:100% !important;
  }

  .ppl-chapterRow__actions .ppl-chip{
    justify-content:center !important;
  }
}

@media (max-width:420px){
  .dropdown-content.show{
    padding:12px !important;
  }

  .ppl-chapterRow__actions{
    gap:7px !important;
  }

  .ppl-chip span{
    font-size:.72rem !important;
  }
}
.ppl-chapterRow__head[data-chapter-toggle] { cursor: pointer; }
.ppl-chapterRow__head[data-chapter-toggle]:focus-visible {
  outline: 3px solid rgba(7, 80, 86, .28);
  outline-offset: 4px;
  border-radius: 18px;
}