/* OtoPrep Quiz Builder UI – v1.4.5-inspired, hardened for AYS start screen + theme overrides
   ---------------------------------------------------------------- */

/* Variables */
:root{
  --op-blue:#1075BC;
  --op-orange:#E7694B;
  --op-bg:#f7f9fc;
  --op-light:#e9ecef;
  --op-text:#111827;

  --op-space-xs:0.5rem;
  --op-space-sm:1rem;
  --op-space-md:1.5rem;
  --op-space-lg:2rem;

  --op-radius-sm:12px;
  --op-radius-md:16px;
  --op-radius-lg:20px;
}

/* ------------------------------------------------------------------
   AYS START PAGE NEUTRALISER
   When our builder is active:
   - remove AYS "center everything" behaviour
   - hide native AYS start screen bits (image, prompt, etc)
   ------------------------------------------------------------------ */
div.ays-quiz-container .ays-start-page.op-qb-clean{
  text-align: initial !important;
  background: var(--op-bg) !important;
  padding: var(--op-space-lg) var(--op-space-sm) calc(var(--op-space-lg) + 1rem) !important;
}

/* Hide everything in start page EXCEPT our card */
div.ays-quiz-container .ays-start-page.op-qb-clean > :not(.op-qb-card){
  display:none !important;
}

/* ------------------------------------------------------------------
   HARD RESET INSIDE OUR CARD
   (fixes theme button styles + AYS typography inheritance)
   ------------------------------------------------------------------ */
div.ays-quiz-container .op-qb-card,
div.ays-quiz-container .op-qb-card *{
  box-sizing:border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Keep native container comfortable (safe) */
div.ays-quiz-container .op-qb-card{
  max-width:980px !important;
  width:100% !important;
  margin:0 auto !important;
}

/* Main card */
div.ays-quiz-container .op-qb-card.op-qs-card{
  border-radius:var(--op-radius-lg) !important;
  padding:var(--op-space-sm) var(--op-space-md) var(--op-space-md) !important;
  background:#ffffff !important;
  color:var(--op-text) !important;
  box-shadow:0 18px 40px rgba(15,23,42,0.12) !important;
  border:1px solid #dbe2f0 !important;
  transition:box-shadow .2s ease, transform .15s ease !important;
}

div.ays-quiz-container .op-qb-card.op-qs-card:hover{
  box-shadow:0 20px 48px rgba(15,23,42,0.16) !important;
  transform:translateY(-2px) !important;
}

/* Header */
div.ays-quiz-container .op-qb-card .op-qs-card-header{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
  gap:var(--op-space-xs) !important;
  margin-bottom:var(--op-space-sm) !important;
  line-height:1.3 !important;
}

div.ays-quiz-container .op-qb-card .op-qs-card-title{
  margin:0 !important;
  font-size:2.1rem !important;
  font-weight:700 !important;
  color:var(--op-blue) !important;
}

div.ays-quiz-container .op-qb-card .op-qs-card-subtitle{
  margin:0 !important;
  font-size:1.2rem !important;
  color:#4b5563 !important;
}

div.ays-quiz-container .op-qb-card .op-qs-total{
  margin-top:0.75rem !important;
  font-size:1.05rem !important;
  font-weight:500 !important;
  color:var(--op-blue) !important;
}
div.ays-quiz-container .op-qb-card .op-qs-total-number{
  font-weight:700 !important;
  font-size:1.15rem !important;
}

/* Compact mode toggle */
div.ays-quiz-container .op-qb-card .op-qs-view-controls{
  display:flex !important;
  gap:0.5rem !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  margin-top:0.6rem !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-compact-toggle{
  -webkit-appearance:none !important;
  appearance:none !important;
  border-radius:9999px !important;
  border:1px solid #e5e7eb !important;
  background:#ffffff !important;
  color:#111827 !important;
  padding:0.4rem 1rem !important;
  min-height:40px !important;
  font-size:0.95rem !important;
  font-weight:700 !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition:background-color .15s ease, border-color .15s ease, transform .05s ease, box-shadow .15s ease, color .15s ease !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-compact-toggle:hover{
  background:#f3f4f6 !important;
  transform:translateY(-1px) !important;
  box-shadow:0 2px 6px rgba(15,23,42,.12) !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-compact-toggle.is-active{
  background:var(--op-blue) !important;
  border-color:var(--op-blue) !important;
  color:#ffffff !important;
  box-shadow:0 4px 12px rgba(16,117,188,.25) !important;
}

/* Font size controls */
div.ays-quiz-container .op-qb-card .op-qs-font-controls{
  display:flex !important;
  gap:0.4rem !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  margin-top:0.5rem !important;
}

div.ays-quiz-container .op-qb-card .op-qs-font-value{
  font-weight:700 !important;
  color:#111827 !important;
  min-width:3.5ch !important;
  text-align:center !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-font-btn{
  -webkit-appearance:none !important;
  appearance:none !important;
  border-radius:9999px !important;
  border:1px solid #e5e7eb !important;
  background:#ffffff !important;
  color:#111827 !important;
  padding:0.35rem 0.9rem !important;
  min-height:38px !important;
  font-size:0.95rem !important;
  font-weight:600 !important;
  cursor:pointer !important;
  box-shadow:none !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-font-btn:hover{
  background:#f3f4f6 !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-font-btn:disabled{
  opacity:.45 !important;
  cursor:not-allowed !important;
}


/* Instructions block */
div.ays-quiz-container .op-qb-card .op-qs-instructions{
  background:#f0f9ff !important;
  border-left:3px solid var(--op-blue) !important;
  padding:0.75rem 1rem !important;
  border-radius:var(--op-radius-sm) !important;
  margin-bottom:var(--op-space-sm) !important;
  text-align:left !important; /* defeats AYS start-page centering */
}
div.ays-quiz-container .op-qb-card .op-qs-instruction-step{
  margin:0.25rem 0 !important;
  font-size:1.05rem !important;
  line-height:1.5 !important;
  color:#334155 !important;
}
div.ays-quiz-container .op-qb-card .op-qs-instruction-step strong{
  color:var(--op-blue) !important;
  font-weight:600 !important;
}

/* Body layout */
div.ays-quiz-container .op-qb-card .op-qs-card-body{
  display:flex !important;
  flex-direction:column !important;
  gap:var(--op-space-sm) !important;
  margin-top:0.25rem !important;
  text-align:left !important;
}

/* Labels */
div.ays-quiz-container .op-qb-card label.op-qs-label,
div.ays-quiz-container .op-qb-card .op-qs-label{
  font-size:0.95rem !important;
  text-transform:uppercase !important;
  letter-spacing:0.09em !important;
  color:#6b7280 !important;
  font-weight:600 !important;
}

/* Category selection */
div.ays-quiz-container .op-qb-card .op-qs-selection-row{
  display:flex !important;
  flex-direction:column !important;
  gap:var(--op-space-xs) !important;
}

div.ays-quiz-container .op-qb-card select.op-qs-dropdown{
  width:100% !important;
  border-radius:var(--op-radius-sm) !important;
  border:1px solid #d1d5db !important;
  background:#f9fafb !important;
  color:#111827 !important;
  padding:0.7rem 1rem !important;
  min-height:44px !important;
  font-size:1.05rem !important;
  line-height:1.5 !important;
  outline:none !important;
  box-shadow:none !important;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}

div.ays-quiz-container .op-qb-card select.op-qs-dropdown:focus{
  border-color:var(--op-blue) !important;
  box-shadow:0 0 0 1px rgba(16,117,188,.4) !important;
  background:#ffffff !important;
}

/* Dynamic label above pills */
div.ays-quiz-container .op-qb-card .op-qs-pill-label{
  display:block !important;
  font-size:1.05rem !important;
  font-weight:600 !important;
  color:var(--op-blue) !important;
  margin-top:var(--op-space-xs) !important;
  margin-bottom:var(--op-space-xs) !important;
  text-align:left !important;
}

/* ------------------------------------------------------------------
   BUTTON HARDENING (fixes the “dark rectangular theme buttons” issue)
   We override background/borders/rounded corners with !important.
   ------------------------------------------------------------------ */

/* Fixed-option pills */
div.ays-quiz-container .op-qb-card .op-qs-pills{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:var(--op-space-xs) !important;
  margin-top:var(--op-space-xs) !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-pill{
  -webkit-appearance:none !important;
  appearance:none !important;
  border-radius:9999px !important;
  padding:0.6rem 1.4rem !important;
  min-height:44px !important;
  font-size:1.05rem !important;
  border:1px solid #dbe2f0 !important;
  background:#f3f4f6 !important;
  color:#111827 !important;
  cursor:pointer !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:none !important;
  text-decoration:none !important;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    transform .05s ease,
    box-shadow .15s ease,
    color .15s ease !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-pill:hover:not(.op-qs-pill-disabled){
  background:#e6f3fd !important;
  border-color:#b6d4f5 !important;
  box-shadow:0 2px 6px rgba(15,23,42,.18) !important;
  transform:translateY(-1px) !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-pill.op-qs-pill-active{
  background:linear-gradient(135deg,var(--op-blue),#0d5fa3) !important;
  border-color:transparent !important;
  color:#f9fafb !important;
  box-shadow:0 2px 8px rgba(16,117,188,.4) !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-pill.op-qs-pill-disabled{
  opacity:.4 !important;
  cursor:not-allowed !important;
}

/* Custom count row (manual entry) */
div.ays-quiz-container .op-qb-card .op-qs-custom-row{
  display:flex !important;
  gap:var(--op-space-xs) !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  margin-top:0.35rem !important;
}

div.ays-quiz-container .op-qb-card .op-qs-custom-label{
  font-size:0.95rem !important;
  color:#6b7280 !important;
  font-weight:600 !important;
}

div.ays-quiz-container .op-qb-card .op-qs-custom-input{
  width:140px !important;
  min-height:44px !important;
  border-radius:var(--op-radius-sm) !important;
  border:1px solid #d1d5db !important;
  background:#f9fafb !important;
  color:#111827 !important;
  padding:0.6rem 0.9rem !important;
  font-size:1.05rem !important;
  outline:none !important;
}

div.ays-quiz-container .op-qb-card .op-qs-custom-input:focus{
  border-color:var(--op-blue) !important;
  box-shadow:0 0 0 1px rgba(16,117,188,.4) !important;
  background:#ffffff !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-custom-set{
  -webkit-appearance:none !important;
  appearance:none !important;
  border-radius:9999px !important;
  min-height:44px !important;
  padding:0.6rem 1.2rem !important;
  font-size:1.05rem !important;
  border:1px solid #dbe2f0 !important;
  background:#f3f4f6 !important;
  color:#111827 !important;
  cursor:pointer !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-custom-set:hover{
  background:#e6f3fd !important;
  border-color:#b6d4f5 !important;
}

/* Custom count row */
div.ays-quiz-container .op-qb-card .op-qs-custom-row{
  display:flex !important;
  gap:var(--op-space-xs) !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  margin-top:0.25rem !important;
}

div.ays-quiz-container .op-qb-card .op-qs-custom-label{
  font-size:0.95rem !important;
  color:#6b7280 !important;
  font-weight:600 !important;
}

div.ays-quiz-container .op-qb-card .op-qs-custom-input{
  width:140px !important;
  min-height:44px !important;
  border-radius:var(--op-radius-sm) !important;
  border:1px solid #d1d5db !important;
  background:#f9fafb !important;
  color:#111827 !important;
  padding:0.6rem 0.9rem !important;
  font-size:1.05rem !important;
  outline:none !important;
  box-shadow:none !important;
}

div.ays-quiz-container .op-qb-card .op-qs-custom-input:focus{
  border-color:var(--op-blue) !important;
  box-shadow:0 0 0 1px rgba(16,117,188,.4) !important;
  background:#ffffff !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-custom-set{
  -webkit-appearance:none !important;
  appearance:none !important;
  border-radius:9999px !important;
  min-height:44px !important;
  padding:0.6rem 1.2rem !important;
  font-size:1.05rem !important;
  border:1px solid #dbe2f0 !important;
  background:#f3f4f6 !important;
  color:#111827 !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-custom-set:hover{
  background:#e6f3fd !important;
  border-color:#b6d4f5 !important;
  box-shadow:0 2px 6px rgba(15,23,42,.18) !important;
  transform:translateY(-1px) !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-custom-set:disabled,
div.ays-quiz-container .op-qb-card .op-qs-custom-input:disabled{
  opacity:.5 !important;
  cursor:not-allowed !important;
}


/* Smart Fill section */
div.ays-quiz-container .op-qb-card .op-qs-helper-row{
  margin-top:0.5rem !important;
}

div.ays-quiz-container .op-qb-card .op-qs-evenly{
  display:flex !important;
  flex-direction:column !important;
  gap:var(--op-space-xs) !important;
  padding:0.85rem 1rem !important;
  border-radius:var(--op-radius-md) !important;
  background:#f9fafb !important;
  border:1px solid #e5e7eb !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-smart-fill-btn{
  -webkit-appearance:none !important;
  appearance:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:9999px !important;
  border:0 !important;
  padding:0.6rem 1.6rem !important;
  min-height:44px !important;
  font-size:1.05rem !important;
  font-weight:600 !important;
  background:var(--op-blue) !important;
  color:#ffffff !important;
  cursor:pointer !important;
  box-shadow:0 3px 10px rgba(16,117,188,.35) !important;
  text-decoration:none !important;
  transition:background-color .15s ease, box-shadow .15s ease, transform .08s ease !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-smart-fill-btn:hover{
  background:#0d5fa3 !important;
  box-shadow:0 5px 16px rgba(16,117,188,.45) !important;
  transform:translateY(-1px) !important;
}

div.ays-quiz-container .op-qb-card .op-qs-even-note{
  margin:0 !important;
  font-size:0.95rem !important;
  line-height:1.5 !important;
  color:#6b7280 !important;
}

/* Quick presets */
div.ays-quiz-container .op-qb-card .op-qs-presets-row{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:var(--op-space-xs) !important;
  align-items:center !important;
  margin-top:0.75rem !important;
  font-size:0.95rem !important;
  color:#6b7280 !important;
}

div.ays-quiz-container .op-qb-card .op-qs-presets-label{
  margin-right:0.25rem !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-preset-btn{
  -webkit-appearance:none !important;
  appearance:none !important;
  border-radius:9999px !important;
  border:1px solid #e5e7eb !important;
  background:#ffffff !important;
  color:#111827 !important;
  padding:0.5rem 1.2rem !important;
  min-height:44px !important;
  font-size:1rem !important;
  cursor:pointer !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:none !important;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .05s ease !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-preset-btn:hover{
  background:#fff6f4 !important;
  border-color:var(--op-orange) !important;
  color:var(--op-orange) !important;
  box-shadow:0 2px 6px rgba(231,105,75,.3) !important;
  transform:translateY(-1px) !important;
}

/* Summary / selected categories */
div.ays-quiz-container .op-qb-card .op-qs-summary-title{
  font-size:0.95rem !important;
  text-transform:uppercase !important;
  letter-spacing:0.09em !important;
  color:#6b7280 !important;
  margin-top:0.75rem !important;
}

div.ays-quiz-container .op-qb-card .op-qs-selected-list{
  display:flex !important;
  flex-direction:column !important;
  gap:var(--op-space-xs) !important;
  margin-top:0.4rem !important;
}

div.ays-quiz-container .op-qb-card .op-qs-selected-item{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:0.75rem !important;
  padding:0.5rem 0.9rem !important;
  border-radius:var(--op-radius-md) !important;
  background:#f9fafb !important;
  border:1px solid #e5e7eb !important;
  font-size:1rem !important;
  line-height:1.5 !important;
  transition:background-color .1s ease !important;
}

div.ays-quiz-container .op-qb-card .op-qs-selected-item:hover{
  background:#f1f5f9 !important;
}

div.ays-quiz-container .op-qb-card .op-qs-selected-name{
  font-weight:500 !important;
  color:#111827 !important;
}

div.ays-quiz-container .op-qb-card .op-qs-selected-count{
  font-variant-numeric:tabular-nums !important;
  color:#4b5563 !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-selected-remove{
  -webkit-appearance:none !important;
  appearance:none !important;
  border:0 !important;
  background:transparent !important;
  color:#9ca3af !important;
  font-size:1.1rem !important;
  line-height:1 !important;
  cursor:pointer !important;
  padding:0 0.15rem !important;
  box-shadow:none !important;
  transition:color .15s ease, transform .05s ease !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-selected-remove:hover{
  color:#b91c1c !important;
  transform:translateY(-1px) !important;
}

div.ays-quiz-container .op-qb-card .op-qs-selected-empty{
  margin:0 !important;
  font-size:1rem !important;
  line-height:1.5 !important;
  color:#6b7280 !important;
}

/* Inline feedback toast */
div.ays-quiz-container .op-qb-card .op-qs-inline-feedback{
  display:inline-flex !important;
  align-items:center !important;
  gap:0.5rem !important;
  padding:0.5rem 1rem !important;
  margin-top:var(--op-space-xs) !important;
  border-radius:var(--op-radius-sm) !important;
  background:#d1fae5 !important;
  color:#065f46 !important;
  font-size:1rem !important;
  font-weight:500 !important;
  animation:op-slide-in 0.2s ease-out !important;
}

@keyframes op-slide-in{
  from { opacity:0; transform:translateY(-10px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Clear-all row */
div.ays-quiz-container .op-qb-card .op-qs-clear-row{
  margin-top:0.5rem !important;
  text-align:right !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-clear-all{
  -webkit-appearance:none !important;
  appearance:none !important;
  border:0 !important;
  background:transparent !important;
  color:#6b7280 !important;
  font-size:0.95rem !important;
  cursor:pointer !important;
  text-decoration:underline !important;
  text-underline-offset:2px !important;
  padding:0 !important;
  min-height:44px !important;
  display:inline-flex !important;
  align-items:center !important;
  box-shadow:none !important;
  transition:color .15s ease !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-clear-all:hover{
  color:#b91c1c !important;
}

/* Footer: style AYS Start button */
div.ays-quiz-container .op-qb-card .op-qs-card-footer{
  margin-top:var(--op-space-md) !important;
  text-align:center !important;
}

div.ays-quiz-container .op-qb-card .op-qs-card-footer .ays-quiz-selected-questions-count-start,
div.ays-quiz-container .op-qb-card .op-qs-card-footer input.ays-quiz-selected-questions-count-start{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:1.2rem !important;
  padding:0.9rem 2.4rem !important;
  border-radius:9999px !important;
  background:var(--op-blue) !important;
  border:1px solid var(--op-blue) !important;
  color:#ffffff !important;
  font-weight:600 !important;
  line-height:1.1 !important;
  text-align:center !important;
  vertical-align:middle !important;
  box-shadow:0 6px 16px rgba(16,117,188,.35) !important;
  min-height:44px !important;
  cursor:pointer !important;
  transition:background-color .2s ease, transform .1s ease, box-shadow .2s ease !important;
}

/* Standalone shortcode builder Start button (avoid theme styles)
   The JS adds .ays-quiz-selected-questions-count-start, but we also target our own
   class as a hard fallback in case AYS changes classnames. */
div.ays-quiz-container .op-qb-card .op-qs-card-footer input.op-qb-standalone-start,
div.ays-quiz-container .op-qb-card .op-qs-card-footer button.op-qb-standalone-start{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:1.2rem !important;
  padding:0.9rem 2.4rem !important;
  border-radius:9999px !important;
  background:var(--op-blue) !important;
  border:1px solid var(--op-blue) !important;
  color:#ffffff !important;
  font-weight:600 !important;
  line-height:1.1 !important;
  text-align:center !important;
  vertical-align:middle !important;
  box-shadow:0 6px 16px rgba(16,117,188,.35) !important;
  min-height:44px !important;
  cursor:pointer !important;
  transition:background-color .2s ease, transform .1s ease, box-shadow .2s ease !important;
}

div.ays-quiz-container .op-qb-card .op-qs-card-footer input.op-qb-standalone-start:hover,
div.ays-quiz-container .op-qb-card .op-qs-card-footer button.op-qb-standalone-start:hover{
  background:#0d5fa3 !important;
  border-color:#0d5fa3 !important;
  transform:translateY(-2px) !important;
  box-shadow:0 10px 24px rgba(16,117,188,.45) !important;
}

div.ays-quiz-container .op-qb-card .op-qs-card-footer .ays-quiz-selected-questions-count-start:hover{
  background:#0d5fa3 !important;
  border-color:#0d5fa3 !important;
  transform:translateY(-2px) !important;
  box-shadow:0 10px 24px rgba(16,117,188,.45) !important;
}

/* Responsive tweaks */
@media (max-width:640px){

  /* Reduce side padding on the AYS start page so the card can breathe */
  div.ays-quiz-container .ays-start-page.op-qb-clean{
    padding-left:0.6rem !important;
    padding-right:0.6rem !important;
  }

  /* Let the wrapper go full width */
  div.ays-quiz-container .op-qb-card{
    max-width:none !important;
    width:100% !important;
    margin:0 !important;
  }

  /* Card fills available space */
  div.ays-quiz-container .op-qb-card.op-qs-card{
    border-radius:var(--op-radius-md) !important;
    width:100% !important;
    padding:var(--op-space-sm) 1rem var(--op-space-md) !important;
  }
}

/* Desktop: 2-column layout */
@media (min-width:900px){
  div.ays-quiz-container .op-qb-card .op-qs-card-body{
    display:grid !important;
    grid-template-columns:minmax(0,3fr) minmax(0,2fr) !important;
    column-gap:var(--op-space-md) !important;
    row-gap:var(--op-space-sm) !important;
    align-items:flex-start !important;
  }

div.ays-quiz-container .op-qb-card .op-qs-selection-row,
div.ays-quiz-container .op-qb-card .op-qs-pill-label,
div.ays-quiz-container .op-qb-card .op-qs-pills,
div.ays-quiz-container .op-qb-card .op-qs-custom-row,
div.ays-quiz-container .op-qb-card .op-qs-helper-row,
div.ays-quiz-container .op-qb-card .op-qs-presets-row{
  grid-column:1 / 2 !important;
}


  div.ays-quiz-container .op-qb-card .op-qs-summary-title,
  div.ays-quiz-container .op-qb-card .op-qs-selected-list,
  div.ays-quiz-container .op-qb-card .op-qs-clear-row{
    grid-column:2 / 3 !important;
  }
}

/* User-adjustable font scaling (JS sets --op-font-scale on the card) */
div.ays-quiz-container .op-qb-card.op-qs-card{
  --op-font-scale: 1;
  font-size: calc(16px * var(--op-font-scale)) !important;
}

div.ays-quiz-container .op-qb-card .op-qs-card-title{
  font-size: calc(30px * var(--op-font-scale)) !important;
  line-height:1.2 !important;
}
div.ays-quiz-container .op-qb-card .op-qs-card-subtitle{
  font-size: calc(18px * var(--op-font-scale)) !important;
}
div.ays-quiz-container .op-qb-card .op-qs-total{
  font-size: calc(16px * var(--op-font-scale)) !important;
}
div.ays-quiz-container .op-qb-card .op-qs-total-number{
  font-size: calc(18px * var(--op-font-scale)) !important;
}

div.ays-quiz-container .op-qb-card .op-qs-instruction-step,
div.ays-quiz-container .op-qb-card .op-qs-selected-item,
div.ays-quiz-container .op-qb-card .op-qs-selected-empty,
div.ays-quiz-container .op-qb-card .op-qs-even-note,
div.ays-quiz-container .op-qb-card .op-qs-inline-feedback{
  font-size: calc(16px * var(--op-font-scale)) !important;
  line-height:1.5 !important;
}

div.ays-quiz-container .op-qb-card select.op-qs-dropdown,
div.ays-quiz-container .op-qb-card button.op-qs-pill,
div.ays-quiz-container .op-qb-card button.op-qs-preset-btn,
div.ays-quiz-container .op-qb-card button.op-qs-smart-fill-btn,
div.ays-quiz-container .op-qb-card button.op-qs-clear-all,
div.ays-quiz-container .op-qb-card .op-qs-custom-input,
div.ays-quiz-container .op-qb-card button.op-qs-custom-set{
  font-size: calc(16px * var(--op-font-scale)) !important;
}

div.ays-quiz-container .op-qb-card label.op-qs-label,
div.ays-quiz-container .op-qb-card .op-qs-summary-title,
div.ays-quiz-container .op-qb-card .op-qs-pill-label{
  font-size: calc(14px * var(--op-font-scale)) !important;
}

div.ays-quiz-container .op-qb-card .op-qs-card-footer .ays-quiz-selected-questions-count-start{
  font-size: calc(18px * var(--op-font-scale)) !important;
}
/* Compact mode: reduce whitespace + hide instructions to save height */
div.ays-quiz-container .op-qb-card.op-qs-compact.op-qs-card{
  padding:0.9rem 1rem 1rem !important;
}

div.ays-quiz-container .op-qb-card.op-qs-compact .op-qs-card-header{
  gap:0.35rem !important;
  margin-bottom:0.65rem !important;
}

div.ays-quiz-container .op-qb-card.op-qs-compact .op-qs-instructions{
  display:none !important;
}

div.ays-quiz-container .op-qb-card.op-qs-compact .op-qs-card-body{
  gap:0.75rem !important;
}

div.ays-quiz-container .op-qb-card.op-qs-compact .op-qs-pill-label{
  margin-top:0.1rem !important;
  margin-bottom:0.1rem !important;
}

div.ays-quiz-container .op-qb-card.op-qs-compact .op-qs-pills{
  gap:0.4rem !important;
  margin-top:0.15rem !important;
}

div.ays-quiz-container .op-qb-card.op-qs-compact button.op-qs-pill{
  padding:0.55rem 1.1rem !important;
}

div.ays-quiz-container .op-qb-card.op-qs-compact .op-qs-custom-row{
  margin-top:0 !important;
}

div.ays-quiz-container .op-qb-card.op-qs-compact .op-qs-evenly{
  padding:0.65rem 0.85rem !important;
}

div.ays-quiz-container .op-qb-card.op-qs-compact .op-qs-presets-row{
  margin-top:0.35rem !important;
}

div.ays-quiz-container .op-qb-card.op-qs-compact .op-qs-summary-title{
  margin-top:0.35rem !important;
}

div.ays-quiz-container .op-qb-card.op-qs-compact .op-qs-selected-item{
  padding:0.45rem 0.75rem !important;
}

div.ays-quiz-container .op-qb-card.op-qs-compact .op-qs-clear-row{
  margin-top:0.25rem !important;
}

div.ays-quiz-container .op-qb-card.op-qs-compact .op-qs-card-footer{
  margin-top:0.9rem !important;
}


/* ------------------------------------------------------------------
   Frontend Timer Toggle (untimed quizzes only)
   ------------------------------------------------------------------ */
div.ays-quiz-container .op-qb-card .op-qs-timer-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:0.75rem !important;
  flex-wrap:wrap !important;
  margin-top:0.25rem !important;
}

div.ays-quiz-container .op-qb-card .op-qs-timer-label{
  font-size:0.95rem !important;
  text-transform:uppercase !important;
  letter-spacing:0.09em !important;
  color:#6b7280 !important;
  font-weight:600 !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-timer-toggle{
  -webkit-appearance:none !important;
  appearance:none !important;
  border-radius:9999px !important;
  border:1px solid #e5e7eb !important;
  background:#ffffff !important;
  color:#111827 !important;
  padding:0.4rem 1rem !important;
  min-height:40px !important;
  font-size:0.95rem !important;
  font-weight:700 !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition:background-color .15s ease, border-color .15s ease, transform .05s ease, box-shadow .15s ease, color .15s ease !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-timer-toggle:hover{
  background:#f3f4f6 !important;
  transform:translateY(-1px) !important;
  box-shadow:0 2px 6px rgba(15,23,42,.12) !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-timer-toggle.is-active{
  background:var(--op-orange) !important;
  border-color:var(--op-orange) !important;
  color:#ffffff !important;
  box-shadow:0 4px 12px rgba(231,105,75,.25) !important;
}

div.ays-quiz-container .op-qb-card .op-qs-timer-note{
  margin:0.35rem 0 0 !important;
  color:#4b5563 !important;
  font-size:0.95rem !important;
  line-height:1.45 !important;
}

/* ------------------------------------------------------------------
   Explanations mode (frontend override)
   ------------------------------------------------------------------ */
div.ays-quiz-container .op-qb-card .op-qs-expl-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:0.75rem !important;
  flex-wrap:wrap !important;
  margin-top:0.7rem !important;
}

div.ays-quiz-container .op-qb-card .op-qs-expl-label{
  font-size:0.95rem !important;
  text-transform:uppercase !important;
  letter-spacing:0.09em !important;
  color:#6b7280 !important;
  font-weight:600 !important;
}

div.ays-quiz-container .op-qb-card .op-qs-expl-buttons{
  display:flex !important;
  gap:0.4rem !important;
  flex-wrap:wrap !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-expl-btn{
  -webkit-appearance:none !important;
  appearance:none !important;
  border-radius:9999px !important;
  border:1px solid #e5e7eb !important;
  background:#ffffff !important;
  color:#111827 !important;
  padding:0.4rem 0.9rem !important;
  min-height:40px !important;
  font-size:0.92rem !important;
  font-weight:700 !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition:background-color .15s ease, border-color .15s ease, transform .05s ease, box-shadow .15s ease, color .15s ease !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-expl-btn:hover{
  background:#f3f4f6 !important;
  transform:translateY(-1px) !important;
  box-shadow:0 2px 6px rgba(15,23,42,.12) !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-expl-btn.is-active{
  background:var(--op-blue) !important;
  border-color:var(--op-blue) !important;
  color:#ffffff !important;
  box-shadow:0 4px 12px rgba(16,117,188,.25) !important;
}

div.ays-quiz-container .op-qb-card .op-qs-expl-note{
  margin:0.35rem 0 0 !important;
  color:#4b5563 !important;
  font-size:0.95rem !important;
  line-height:1.45 !important;
}

/* Timer config (mode + custom minutes) */
div.ays-quiz-container .op-qb-card .op-qs-timer-config{
  margin-top:0.25rem !important;
  padding:0.85rem 1rem !important;
  border:1px solid #e5e7eb !important;
  border-radius:var(--op-radius-md) !important;
  background:#f9fafb !important;
}

div.ays-quiz-container .op-qb-card .op-qs-timer-mode-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:0.75rem !important;
  flex-wrap:wrap !important;
}

div.ays-quiz-container .op-qb-card .op-qs-timer-mode-label{
  font-size:0.95rem !important;
  text-transform:uppercase !important;
  letter-spacing:0.09em !important;
  color:#6b7280 !important;
  font-weight:600 !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-timer-mode-btn{
  -webkit-appearance:none !important;
  appearance:none !important;
  border-radius:9999px !important;
  border:1px solid #e5e7eb !important;
  background:#ffffff !important;
  color:#111827 !important;
  padding:0.4rem 0.9rem !important;
  min-height:40px !important;
  font-size:0.92rem !important;
  font-weight:700 !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition:background-color .15s ease, border-color .15s ease, transform .05s ease, box-shadow .15s ease, color .15s ease !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-timer-mode-btn:hover{
  background:#f3f4f6 !important;
  transform:translateY(-1px) !important;
  box-shadow:0 2px 6px rgba(15,23,42,.12) !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-timer-mode-btn.is-active{
  background:var(--op-blue) !important;
  border-color:var(--op-blue) !important;
  color:#ffffff !important;
  box-shadow:0 4px 12px rgba(16,117,188,.22) !important;
}

div.ays-quiz-container .op-qb-card .op-qs-timer-custom-row{
  display:flex !important;
  flex-direction:column !important;
  gap:0.5rem !important;
  margin-top:0.75rem !important;
}

div.ays-quiz-container .op-qb-card .op-qs-timer-custom-label{
  font-size:0.95rem !important;
  font-weight:700 !important;
  color:#111827 !important;
}

div.ays-quiz-container .op-qb-card input.op-qs-timer-minutes{
  width:100% !important;
  border-radius:var(--op-radius-sm) !important;
  border:1px solid #d1d5db !important;
  background:#ffffff !important;
  color:#111827 !important;
  padding:0.7rem 1rem !important;
  min-height:44px !important;
  font-size:1.05rem !important;
  line-height:1.5 !important;
  outline:none !important;
  box-shadow:none !important;
  transition:border-color .15s ease, box-shadow .15s ease !important;
}

div.ays-quiz-container .op-qb-card input.op-qs-timer-minutes:focus{
  border-color:var(--op-blue) !important;
  box-shadow:0 0 0 1px rgba(16,117,188,.4) !important;
}

div.ays-quiz-container .op-qb-card .op-qs-timer-presets{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:0.5rem !important;
  margin-top:0.75rem !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-timer-preset{
  -webkit-appearance:none !important;
  appearance:none !important;
  border-radius:9999px !important;
  border:1px solid #e5e7eb !important;
  background:#ffffff !important;
  color:#111827 !important;
  padding:0.35rem 0.85rem !important;
  min-height:38px !important;
  font-size:0.92rem !important;
  font-weight:700 !important;
  cursor:pointer !important;
  box-shadow:none !important;
  transition:background-color .15s ease, border-color .15s ease, transform .05s ease, box-shadow .15s ease, color .15s ease !important;
}

div.ays-quiz-container .op-qb-card button.op-qs-timer-preset:hover{
  background:#f3f4f6 !important;
  transform:translateY(-1px) !important;
  box-shadow:0 2px 6px rgba(15,23,42,.12) !important;
}

/* ------------------------------------------------------------------
   Quiz run styling (buttons + runtime timer)
   Only for builder-enabled quizzes (we add .op-qb-active in JS)
   ------------------------------------------------------------------ */
div.ays-quiz-container.op-qb-active input.action-button,
div.ays-quiz-container.op-qb-active button.action-button,
div.ays-quiz-container.op-qb-active a.action-button{
  -webkit-appearance:none !important;
  appearance:none !important;
  border-radius:9999px !important;
  border:1px solid var(--op-blue) !important;
  background:var(--op-blue) !important;
  color:#ffffff !important;
  padding:0.65rem 1.15rem !important;
  min-height:44px !important;
  font-size:1rem !important;
  font-weight:800 !important;
  cursor:pointer !important;
  box-shadow:0 10px 22px rgba(16,117,188,.18) !important;
  text-decoration:none !important;
  transition:transform .05s ease, box-shadow .15s ease, filter .15s ease !important;
}

div.ays-quiz-container.op-qb-active input.action-button:hover,
div.ays-quiz-container.op-qb-active button.action-button:hover,
div.ays-quiz-container.op-qb-active a.action-button:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 14px 28px rgba(16,117,188,.22) !important;
}

div.ays-quiz-container.op-qb-active input.action-button:disabled,
div.ays-quiz-container.op-qb-active button.action-button:disabled{
  opacity:.55 !important;
  cursor:not-allowed !important;
  box-shadow:none !important;
  transform:none !important;
}

/* Previous / Back buttons */
div.ays-quiz-container.op-qb-active input.ays_previous.action-button,
div.ays-quiz-container.op-qb-active button.ays_previous.action-button{
  background:#ffffff !important;
  color:var(--op-blue) !important;
  box-shadow:none !important;
}

div.ays-quiz-container.op-qb-active input.ays_previous.action-button:hover,
div.ays-quiz-container.op-qb-active button.ays_previous.action-button:hover{
  box-shadow:0 8px 18px rgba(15,23,42,.12) !important;
}

/* Finish / Submit buttons */
div.ays-quiz-container.op-qb-active input.ays_finish.action-button,
div.ays-quiz-container.op-qb-active button.ays_finish.action-button,
div.ays-quiz-container.op-qb-active input.ays-quiz-finish-button,
div.ays-quiz-container.op-qb-active button.ays-quiz-finish-button{
  background:var(--op-orange) !important;
  border-color:var(--op-orange) !important;
  color:#ffffff !important;
  box-shadow:0 10px 22px rgba(231,105,75,.18) !important;
}

div.ays-quiz-container.op-qb-active input.ays_finish.action-button:hover,
div.ays-quiz-container.op-qb-active button.ays_finish.action-button:hover,
div.ays-quiz-container.op-qb-active input.ays-quiz-finish-button:hover,
div.ays-quiz-container.op-qb-active button.ays-quiz-finish-button:hover{
  box-shadow:0 14px 28px rgba(231,105,75,.22) !important;
}

/* Runtime timer (only when injected by us) */
div.ays-quiz-container.op-qb-active section.op-qb-runtime-timer{
  position:sticky !important;
  top:0 !important;
  z-index:999 !important;
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  border-radius:var(--op-radius-md) !important;
  padding:0.6rem 0.9rem !important;
  margin:0 0 0.75rem 0 !important;
  box-shadow:0 10px 24px rgba(15,23,42,.10) !important;
}

div.ays-quiz-container.op-qb-active section.op-qb-runtime-timer .ays-quiz-timer{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:9999px !important;
  padding:0.35rem 0.85rem !important;
  background:var(--op-orange) !important;
  color:#ffffff !important;
  font-weight:900 !important;
  letter-spacing:0.02em !important;
  min-height:38px !important;
  min-width:92px !important;
}

div.ays-quiz-container.op-qb-active section.op-qb-runtime-timer .ays-quiz-after-timer{
  margin-top:0.45rem !important;
  color:#6b7280 !important;
  font-size:0.95rem !important;
  line-height:1.35 !important;
}

/* =========================================================
   Dedicated [otoprep_quiz_builder] shell + mini dashboard header
   ========================================================= */
.op-qb-shell{
  width:100%;
}

.op-qb-shell .op-qb-quiz-wrap{
  display:none; /* default: builder first */
}

/* Timed quizzes should render normally (no builder step) */
.op-qb-shell.op-qb-shell--timed .op-qb-quiz-wrap{
  display:block !important;
}

.op-qb-shell.op-qb-state-quiz .op-qb-quiz-wrap{
  display:block;
}

.op-qb-shell.op-qb-state-quiz .op-qb-standalone-container{
  display:none;
}

.op-qb-mini-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:12px 14px;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:14px;
  background:#ffffff;
  box-shadow:0 8px 18px rgba(0,0,0,0.06);
  margin:14px 0 14px 0;
}

.op-qb-mini-header .op-qb-mini-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:9999px;
  border:1px solid rgba(16,117,188,0.22);
  background:rgba(16,117,188,0.06);
  color:var(--op-blue);
  font-weight:800;
  padding:8px 12px;
  cursor:pointer;
}

.op-qb-mini-header .op-qb-mini-back:hover{
  background:rgba(16,117,188,0.12);
}

.op-qb-mini-titles{
  display:flex;
  flex-direction:column;
  line-height:1.15;
  min-width:0;
  flex:1 1 260px;
}

.op-qb-mini-brand{
  font-weight:900;
  letter-spacing:0.02em;
  color:var(--op-blue);
  font-size:0.95rem;
}

.op-qb-mini-title{
  font-weight:800;
  color:#111827;
  font-size:1.0rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:62vw;
}

.op-qb-mini-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

/* Live meta chips (selected total, timer, explanations) */
.op-qb-mini-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
  flex:0 1 420px;
}

.op-qb-mini-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:9999px;
  border:1px solid rgba(0,0,0,0.10);
  background:rgba(17,24,39,0.02);
  line-height:1;
}

.op-qb-mini-chip-label{
  font-size:0.75rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#6b7280;
}

.op-qb-mini-chip-value{
  font-size:0.92rem;
  font-weight:900;
  color:#111827;
}

.op-qb-mini-actions .op-qb-mini-edit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  border:1px solid rgba(0,0,0,0.14);
  background:#ffffff;
  color:#111827;
  font-weight:800;
  padding:8px 12px;
  cursor:pointer;
}

.op-qb-mini-actions .op-qb-mini-edit:hover{
  background:rgba(0,0,0,0.04);
}

/* Hide AYS export/print-ish controls inside quiz builder contexts (NOT timed quizzes) */
.op-qb-shell:not(.op-qb-shell--timed) .ays-export-quiz-button-container,
.op-qb-shell:not(.op-qb-shell--timed) .ays-export-quiz-button,
.op-qb-shell:not(.op-qb-shell--timed) .ays-quiz-export-pdf,
div.ays-quiz-container.op-qb-active .ays-export-quiz-button-container,
div.ays-quiz-container.op-qb-active .ays-export-quiz-button,
div.ays-quiz-container.op-qb-active .ays-quiz-export-pdf{
  display:none !important;
}

/* Toast notifications */
.op-qb-toast-wrap{
  position:fixed;
  z-index:2147483647;
  bottom:16px;
  left:16px;
  right:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}

.op-qb-toast{
  margin-left:auto;
  max-width:520px;
  width:fit-content;
  background:rgba(17,24,39,0.95);
  color:#ffffff;
  padding:10px 14px;
  border-radius:12px;
  font-weight:800;
  box-shadow:0 10px 20px rgba(0,0,0,0.25);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .18s ease, transform .18s ease;
}

.op-qb-toast.is-on{
  opacity:1;
  transform:translateY(0);
}

/* Print block message (print-only) */
.op-qb-print-block{
  display:none;
}

@media print{
  body.op-qb-print-blocking *{
    visibility:hidden !important;
  }
  body.op-qb-print-blocking #op-qb-print-block,
  body.op-qb-print-blocking #op-qb-print-block *{
    visibility:visible !important;
  }
  body.op-qb-print-blocking #op-qb-print-block{
    display:block !important;
    position:fixed;
    inset:0;
    padding:48px;
    font-family:Arial, sans-serif;
  }
  body.op-qb-print-blocking #op-qb-print-block h1{
    font-size:26pt;
    margin:0 0 10px 0;
  }
  body.op-qb-print-blocking #op-qb-print-block p{
    font-size:13pt;
    margin:0;
  }
}

/* ------------------------------------------------------------------
   WATERMARK OVERLAY (per-user)
   ------------------------------------------------------------------ */
.op-qb-quiz-wrap{
  position:relative !important;
}

.op-qb-watermark-layer{
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  pointer-events:none !important;
  user-select:none !important;
  background-repeat:repeat !important;
  background-position: 0 0 !important;
  /* Larger tile => less repetition => better readability */
  background-size: 620px 460px !important;
  opacity:1 !important;
}

@media (max-width: 520px){
  .op-qb-watermark-layer{
    background-size: 520px 400px !important;
  }
}

/* Keep important interactive UI above watermark */
.op-qb-mini-header,
.op-qb-nav-bar{
  position:relative;
  z-index:5;
}

/* ------------------------------------------------------------------
   STICKY NAV BAR (makes Next/Submit obvious even if AYS hides/disables)
   ------------------------------------------------------------------ */
.op-qb-nav-bar{
  position:sticky;
  bottom:10px;
  margin:14px auto 0;
  max-width:980px;
  width:100%;
  padding:10px 12px;
  border-radius:16px;
  background: rgba(255,255,255,0.95);
  border:1px solid #dbe2f0;
  box-shadow:0 14px 30px rgba(15,23,42,0.10);
  backdrop-filter: blur(6px);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.op-qb-nav-bar .op-qb-nav-btn{
  appearance:none;
  border:1px solid #dbe2f0;
  border-radius:14px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
  background:#ffffff;
  color: var(--op-text);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.op-qb-nav-bar .op-qb-nav-btn:hover{
  transform: translateY(-1px);
  box-shadow:0 10px 22px rgba(15,23,42,0.10);
  border-color:#c7d2e9;
}

.op-qb-nav-bar .op-qb-nav-btn:active{
  transform: translateY(0);
  box-shadow:none;
}

.op-qb-nav-bar .op-qb-nav-btn--primary{
  background: var(--op-blue);
  border-color: var(--op-blue);
  color:#fff;
}

.op-qb-nav-bar .op-qb-nav-btn--ghost{
  background:#fff;
}

/* Hide our nav bar when user is still on builder */
.op-qb-shell.op-qb-state-builder .op-qb-nav-bar{
  display:none !important;
}

/* Never show in native timed quizzes (mocks) */
.op-qb-shell--timed .op-qb-nav-bar{
  display:none !important;
}