/* ===========================
   THEME-ALIGNED (Scoped)
=========================== */
.ssc {
  --af-red: #b30000;
  --af-border: #e9ecef;
  --af-shadow: 0 10px 24px rgba(0,0,0,.06);
  --af-radius: 16px;
}

/* HERO: theme like site cards (no heavy gradient) */
.ssc .af-tool-hero{
  background: #ffffff !important;
  border: 1px solid var(--af-border) !important;
  border-radius: var(--af-radius) !important;
  box-shadow: var(--af-shadow);
  padding: 22px 22px;
  position: relative;
  overflow: hidden;
}

/* red accent bar (matches theme) */
.ssc .af-tool-hero::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: var(--af-red);
}

.ssc .af-tool-hero h1{
  color: #111827 !important;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.ssc .af-tool-hero p{
  color: #6b7280 !important;
  max-width: 70ch;
}

/* right-side data text */
.ssc .af-tool-hero .text-white-50{
  color: #6b7280 !important;
}

/* badge: theme badge */
.ssc .af-tool-hero .af-badge{
  background: rgba(179,0,0,.08) !important;
  color: var(--af-red) !important;
  border: 1px solid rgba(179,0,0,.22) !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-weight: 700;
  font-size: 12px;
}

/* Cards: align with site look */
.ssc .card{
  border: 1px solid var(--af-border) !important;
  border-radius: var(--af-radius) !important;
  box-shadow: var(--af-shadow);
}

/* Controls card slightly stronger */
.ssc .ssc-controls.card{
  box-shadow: 0 14px 30px rgba(0,0,0,.07);
}

.ssc .form-label{
  font-weight: 700;
  color: #111827;
}

.ssc .form-control,
.ssc .form-select{
  border-radius: 12px;
  border-color: #dee2e6;
  padding: 10px 12px;
}

.ssc .form-control:focus,
.ssc .form-select:focus{
  border-color: rgba(179,0,0,.45);
  box-shadow: 0 0 0 .25rem rgba(179,0,0,.10);
}

/* Compare layout */
.ssc .ssc-compare{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

/* Diff badge: theme badge */
.ssc .ssc-badge,
.ssc #diffBadge{
  border: 1px solid rgba(179,0,0,.22);
  background: rgba(179,0,0,.06);
  color: var(--af-red);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* KPI blocks (if using ssc-kpis render) */
.ssc .ssc-kpis{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}

.ssc .ssc-kpi .k{
  font-size: 12px;
  color: #6b7280;
}
.ssc .ssc-kpi .v{
  font-weight: 800;
  color: #111827;
  margin-top: 2px;
}
.ssc .ssc-subline{
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
}

/* Mobile */
@media (max-width: 991px){
  .ssc .ssc-compare{ flex-direction: column; }
  .ssc .ssc-kpis{ grid-template-columns: 1fr; }
}

.ssc .ssc-guide h2, .ssc .ssc-guide h3 { color:#111827; }
.ssc .ssc-guide ul { padding-left: 1.1rem; }
.ssc .ssc-guide li { margin-bottom: .35rem; }