:root{
      --bc-primary: #cc5200;     /* your brand orange */
      --bc-primary-dark:#a34403; /* darker shade */
      --bc-bg: #fff9f2;          /* soft background */
      --bc-card: #ffffff;
      --bc-text: #2c2c2c;
      --bc-muted:#6b6b6b;
      --bc-accent:#ffcc80;      /* accent underlines */
    }
    html,body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--bc-text); background:var(--bc-bg);} 

    /* Topbar */
    .bc-navbar{ background: linear-gradient(135deg, var(--bc-primary), var(--bc-primary-dark)); }
    .bc-brand{ color:#fff; font-weight:700; letter-spacing:.3px; }
    .bc-brand img{ width:30px; height:30px; margin-right:.5rem; }

    /* Hero */
    .bc-hero{ background: radial-gradient(1200px 500px at 20% -50%, rgba(255,255,255,.25), transparent), linear-gradient(135deg, var(--bc-primary), var(--bc-primary-dark)); color:#fff; }
    .bc-hero .lead{ opacity:.95; }

    /* Cards */
    .bc-card{ background:var(--bc-card); border:1px solid #f0e6dd; box-shadow: 0 6px 24px rgba(0,0,0,.06); border-radius:18px; }
    .bc-card-header{ border-bottom: 1px dashed #f1e4d8; background:#fff; border-top-left-radius:18px; border-top-right-radius:18px; }

    /* Section titles */
    .bc-section-title{ font-weight:700; font-size:1.1rem; position:relative; display:inline-block; }
    .bc-section-title::after{ content:""; position:absolute; left:0; bottom:-6px; width:42px; height:3px; background:var(--bc-accent); border-radius:2px; }

    /* Zodiac grid */
    .zodiac-btn{ border:1px solid #f0e6dd; background:#fff; border-radius:16px; padding:14px; width:100%; text-align:left; transition: all .2s ease; }
    .zodiac-btn .emoji{ font-size:22px; width:38px; height:38px; display:inline-grid; place-items:center; background:#fff7ee; border-radius:10px; margin-right:10px; }
    .zodiac-btn small{ color:var(--bc-muted); }
    .zodiac-btn:hover{ transform: translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.07); border-color:#ffe0bf; }
    .zodiac-btn.active{ border-color: var(--bc-primary); box-shadow: 0 0 0 3px rgba(204,82,0,.12); }

    /* Tabs */
    .nav-pills .nav-link{ border-radius:30px; border:1px solid #f2e3d7; color:#7a5a43; }
    .nav-pills .nav-link.active{ background: var(--bc-primary); border-color:var(--bc-primary); }

    /* Meters */
    .meter{ height:10px; background:#f2e3d7; border-radius:999px; overflow:hidden; }
    .meter > span{ display:block; height:100%; background: linear-gradient(90deg, #ffb85c, var(--bc-primary)); }

    /* Lucky pills */
    .pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid #f2e3d7; border-radius:999px; background:#fff; font-weight:600; }
    .swatch{ width:16px; height:16px; border-radius:50%; border:1px solid rgba(0,0,0,.08); }

    /* Compat */
    .compat-score{ font-size:2rem; font-weight:800; color: var(--bc-primary-dark); }

    /* Skeleton while loading */
    .skeleton{ position:relative; overflow:hidden; background: #ececec; border-radius:10px; }
    .skeleton::after{ content:""; position:absolute; inset:0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: shimmer 1.25s infinite; }
    @keyframes shimmer{ 100% { transform: translateX(100%); } }

    /* Footer mini */
    .mini-note{ color:#8a715c; font-size:.9rem; }

    /* Small helpers */
    .cursor-pointer{ cursor:pointer; }

    /* Zodiac icons small (in grid buttons) */
.zodiac-icon {
  width: 42px;
  height: 42px;
  object-fit: contain;
  transition: transform 0.25s ease, filter 0.25s ease;
}

/* Hover effect for grid icons */
.zodiac-btn:hover .zodiac-icon {
  transform: scale(1.15);
  filter: drop-shadow(0 2px 6px rgba(204,82,0,.35));
}

/* Large zodiac icon (in details header) */
.zodiac-icon-lg {
  width: 100px;
  height: 100px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* Subtle hover bounce for large icon */
.zodiac-icon-lg:hover {
  transform: scale(1.05);
}
.mb-0{
    color: #2c2c2c;
}
.scope-para{
    color: #fff;
}

.modal-backdrop.show {
  opacity: 0 !important;
  pointer-events: none !important;
}