:root {
  --sidebar-width: 320px;
}
body {
  background: #fbfdff;
  font-family: "roboto", sans-serif;
}
.offcanvas-start {
  width: var(--sidebar-width);
}
.section-card {
  border-radius: 1rem;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.06);
}
.rule {
  background: #fff;
  border-left: 4px solid #0d6efd;
}
.code {
  font-size: 0.95rem;
}
.mini {
  font-size: 0.95rem;
}
.badge-use {
  font-weight: 600;
}
.sticky-cta {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1050;
}
.btn-ghost {
  background: #fff;
  border: 1px solid rgba(16, 24, 40, 0.08);
}
.icon {
  width: 1.1rem;
  height: 1.1rem;
}
.list-clean li {
  margin-bottom: 0.25rem;
}
.note {
  background: #f8f9fa;
  border: 1px dashed rgba(0, 0, 0, 0.1);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}
.stack-gap > * + * {
  margin-top: 1.25rem;
}
li {
  color: brown;
}
strong {
  font-style: italic;
  font-weight: 600;
}

/* Soft Pastels */
.bg-lavender {
  background-color: #f1f1fc;
}
.bg-peach {
  background-color: #fcf6ec;
}
.bg-mint {
  background-color: #f0fef6;
}
.bg-blush {
  background-color: #fdf7f6;
}
.bg-sky {
  background-color: #e0f4ff;
}
.bg-cream {
  background-color: #fffdd0;
}
.bg-ivory {
  background-color: #fff3cd;
}
.bg-lpink {
  background-color: #f8d7da;
}

/* Vibrant Colors */
.bg-coral {
  background-color: #ff6b6b;
}
.bg-teal {
  background-color: #20c997;
}
.bg-purple {
  background-color: #6f42c1;
}
.bg-orange {
  background-color: #fd7e14;
}
.bg-pink {
  background-color: #e83e8c;
}
.bg-cyan {
  background-color: #17a2b8;
}

/* Muted/Professional */
.bg-slate {
  background-color: #708090;
}
.bg-charcoal {
  background-color: #36454f;
}
.bg-sage {
  background-color: #9dc183;
}
.bg-mauve {
  background-color: #b784a7;
}
.bg-dusty-blue {
  background-color: #6b9ac4;
}
.bg-terracotta {
  background-color: #c77b58;
}

/* Earthy Tones */
.bg-sand {
  background-color: #f4e7d7;
}
.bg-olive {
  background-color: #808000;
}
.bg-rust {
  background-color: #b7410e;
}
.bg-moss {
  background-color: #8a9a5b;
}
.bg-clay {
  background-color: #c5967a;
}

/* Modern/Tech */
.bg-navy {
  background-color: #001f3f;
}
.bg-indigo {
  background-color: #4b0082;
}
.bg-emerald {
  background-color: #d5f9e1;
}
.bg-amber {
  background-color: #ffbf00;
}
.bg-rose {
  background-color: #ff007f;
}

/* Light Variations */
.bg-light-gray {
  background-color: #f8f9fa;
}
.bg-off-white {
  background-color: #faf9f6;
}
.bg-pearl {
  background-color: #eae0c8;
}
.bg-blue {
  background-color: #d1ecf1;
}

/* Dark Variations */
.bg-midnight {
  background-color: #191970;
}
.bg-onyx {
  background-color: #353839;
}
.bg-graphite {
  background-color: #383428;
}

/* Define your custom label classes */
.text-bg-ivory {
  color: #fff;
  background-color: #9a7704;
}

.text-bg-cream {
  color: #fff;
  background-color: #7d7b4b;
}

.text-bg-blue {
  color: #fff;
  background-color: #4884b7;
}

.text-bg-lpink {
  color: #fff;
  background-color: #fe3d4d;
}
.text-bg-lavender {
  color: #fff;
  background-color: #5d5dda;
}
.text-bg-emerald {
  color: #fff;
  background-color: #026122;
}
.text-bg-sand {
  color: #fff;
  background-color: #a05901;
}
.text-bg-mauve {
  color: #fff;
  background-color: #6f2558;
}
.table-lavender {
  --bs-table-bg: #d5f9e1;
}

.table-lavender > :not(caption) > * > * {
  background-color: #d5f9e1;
}
.overview-section {
  background-color: #f8d7da;
  padding: 25px;
  border-radius: 10px;
  border-left: 4px solid #dc3545;
  font-size: 1.2rem;
}

.overview-item {
  margin-bottom: 10px;
}
/* overview Table */
.overview-table {
  width: 100%;
}

.overview-table td {
  padding: 12px 8px;
  border-bottom: 1px solid #e9ecef;
}

.overview-title {
  font-size: 20px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 3px solid #3498db;
}
em {
  font-size: 1em;
  color: brown;
}
.trans {
  font-size: 1em;
  font-style: italic;
}
.pho {
  color: black;
  font-weight: 400;
}
.scroll-top-btn {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  display: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  z-index: 1060;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.18);
}

.scroll-top-btn.show {
  display: inline-flex;
}
.mb-0 {
  font-size: 1.1em;
}
.eng {
  color: black;
  font-size: 0.95em;
}
.supplemental-section {
  background-color: #95feca;
  padding: 25px;
  border-radius: 10px;
  border-left: 4px solid #17a2b8;
  font-size: 1.2rem;
  line-height: 1.8;
}