.vsf-app {
  --vsf-white:#ffffff;
  --vsf-navy:#202a54;
  --vsf-orange:#d37129;
  --vsf-overlay:rgba(255,255,255,.1);
  max-width:1000px;
  margin:0 auto;
  padding:clamp(18px,2.5vw,32px);
  background:linear-gradient(180deg,#ffffff 0%,#f7f8fc 100%);
  border:1px solid rgba(32,42,84,.12);
  border-radius:24px;
  box-shadow:0 18px 40px rgba(32,42,84,.08);
  font-family:Lato,Roboto,"Open Sans",Arial,sans-serif;
  color:var(--vsf-navy);
  overflow:hidden;
}

.vsf-app * {
  box-sizing:border-box;
}

/* =========================
   HEADER
========================= */

.vsf-header {
  display:grid;
  gap:1rem;
  margin-bottom:1rem;
  padding:clamp(1.4rem,3vw,2.25rem);
  background:linear-gradient(135deg,var(--vsf-navy) 0%,#2b376d 100%);
  border-radius:20px;
  position:relative;
  overflow:hidden;
}

.vsf-header:before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,transparent 0%,var(--vsf-overlay) 100%);
  pointer-events:none;
}

.vsf-title,
.vsf-header h2 {
  margin:0;
  text-align:center;
  color:var(--vsf-white);
  font:700 clamp(1.8rem,3vw,2.5rem)/1.15
       Poppins,Montserrat,"Open Sans",Arial,sans-serif;
  position:relative;
  z-index:1;
}

/* =========================
   CONTENT
========================= */

.vsf-content {
  margin:0;
  padding:clamp(1.25rem,3vw,2.25rem) 0;
}

/* ✅ FIXED selector */
.vsf-content > * + * {
  margin-top:1.25rem;
}

/* =========================
   CARDS
========================= */

.vsf-card-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
}

.vsf-card,
.vsf-panel,
.vsf-callout {
  position:relative;
  border-radius:18px;
  box-shadow:0 12px 28px rgba(32,42,84,.08);
  transition:transform .24s ease,
             box-shadow .24s ease,
             border-color .24s ease;
}

.vsf-card {
  padding:1.1rem 1.15rem;
  background:#fff;
  border:1px solid rgba(32,42,84,.12);
}

.vsf-card:hover {
  transform:translateY(-4px);
  border-color:var(--vsf-orange);
  box-shadow:0 16px 32px rgba(32,42,84,.14);
}

.vsf-card h3 {
  margin:0 0 .6rem;
  font:700 1.1rem/1.25
       Poppins,Montserrat,"Open Sans",Arial,sans-serif;
  color:var(--vsf-navy);
}

.vsf-card p {
  margin:.35rem 0;
  line-height:1.5;
}

/* =========================
   BUTTONS & LINKS
========================= */

.vsf-card a,
.vsf-panel a,
.vsf-callout a {
  color:var(--vsf-orange);
  font-weight:700;
  text-decoration:none;
}

.vsf-card a:hover,
.vsf-panel a:hover,
.vsf-callout a:hover {
  text-decoration:underline;
}

.vsf-btn,
.vsf-nav .button,
.vsf-option {
  appearance:none;
  border-radius:14px;
  padding:14px 20px;
  border:2px solid var(--vsf-orange);
  background:#fff;
  color:var(--vsf-navy);
  font:700 .98rem/1.2
       Lato,Roboto,"Open Sans",Arial,sans-serif;
  cursor:pointer;
  transition:
    transform .2s ease,
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
  text-decoration:none;
}

.vsf-btn--primary,
.vsf-nav .button,
.vsf-option {
  background:var(--vsf-navy);
  color:#fff;
}

.vsf-btn--primary:hover,
.vsf-nav .button:hover,
.vsf-option:hover {
  background:#2b376d;
  color:#fff;
}

/* =========================
   QUIZ OPTIONS (GRID)
========================= */

.vsf-options {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.vsf-option {
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:16px;
  border:2px solid rgba(32,42,84,.12);
  box-shadow:0 8px 18px rgba(32,42,84,.06);
}

/* =========================
   RESULTS FIXES ✅
   (critical for All Schools)
========================= */

.vsf-results-section {
  margin-top:1.75rem;
}

/* Force lists to behave like lists, not quiz grids */
.vsf-results-section .vsf-options {
  display:block;
}

.vsf-results-section .vsf-option {
  display:block;
  min-height:unset;
  margin-bottom:10px;
  text-align:left;
}

/* Section heading */
.vsf-section-title {
  margin:0 0 1rem;
  color:var(--vsf-navy);
  font:700 1.35rem/1.2
       Poppins,Montserrat,"Open Sans",Arial,sans-serif;
}

/* =========================
   PANEL
========================= */

.vsf-panel {
  padding:1.25rem 1.35rem;
  background:linear-gradient(135deg,var(--vsf-navy) 0%,#2a3569 100%);
  border:1px solid rgba(211,113,41,.65);
}

.vsf-panel,
.vsf-panel p,
.vsf-panel span,
.vsf-panel li,
.vsf-panel h3 {
  color:#ffffff !important;
}

.vsf-panel a {
  color:#ffb173 !important;
}

.vsf-panel a:hover {
  color:#ffffff !important;
}

/* =========================
   CALLOUT
========================= */

.vsf-callout {
  padding:1.15rem 1.25rem;
  background:#fff7f0;
  border:1px solid rgba(211,113,41,.55);
}

.vsf-callout strong {
  display:block;
  margin-bottom:.45rem;
  color:var(--vsf-navy);
  font:700 1.15rem/1.25
       Poppins,Montserrat,"Open Sans",Arial,sans-serif;
}

.vsf-callout p {
  margin:.4rem 0;
  line-height:1.6;
  color:var(--vsf-navy);
}

/* =========================
   LOADER
========================= */

.vsf-loader {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(2px);
  z-index:20;
  border-radius:24px;
}

.vsf-loader[hidden] {
  display:none !important;
}

.vsf-loader__spinner {
  width:54px;
  height:54px;
  border-radius:999px;
  border:4px solid rgba(32,42,84,.18);
  border-top-color:var(--vsf-orange);
  animation:vsf-spin .9s linear infinite;
}

@keyframes vsf-spin {
  to { transform:rotate(360deg); }
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:768px) {
  .vsf-options {
    grid-template-columns:1fr;
  }

  .vsf-btn,
  .vsf-option {
    width:100%;
  }

  .vsf-results-section {
    margin-top:1.4rem;
  }
}