/* ==========================================================================
   IKA MASTER CSS — CLEANED & ORGANIZED
   - Removes exact duplicate blocks (keeps “last-wins” duplicates intact)
   - Normalizes whitespace / trims redundant blank lines
   ========================================================================== */


/* --- Table of Contents (auto-generated from file headers) --- */
/* 01. SECTION 0 — COLOR TOKENS & HELPERS (GLOBAL DESIGN SYSTEM) */
/* 02. LAYOUT UTILITIES — apply these as CSS classes on Elementor top containers */
/* 03. GLOBAL / SHARED BASICS */
/* 04. ELEMENTOR – GLOBAL BUTTON STYLING */
/* 05. HERO LAYOUT HELPERS (GENERAL) */
/* 06. CARD COMPONENT (SHARED ACROSS SITE) */
/* 07. DARK SECTION COLORS (SAFE TWEAK ZONE) */
/* 08. FORM STYLING – GENERIC (.ika-form) */
/* 09. FOOTER SOCIAL ICONS (GLOBAL) */
/* 10. IKA – XP LEADERBOARD */
/* 11. IKA – XP PROGRESS BAR */
/* 12. IKA – ACHIEVEMENT / BADGE / RANK-UP MODALS */
/* 13. DAILY MISSIONS – iKnowAviation */
/* 14. AVATAR LEVEL RING + LEVEL BADGE */
/* 15. IKA – GLOBAL TYPOGRAPHY BASELINE (fixes line-height issues) */
/* 16. IKA – QUIZ HUB SECTION BACKGROUND */
/* 17. QUIZ HUB — SEARCH TEXT SIZE ALIGNMENT */
/* 18. QUIZ HUB — BROWSE SECTION SPACING (scoped + reusable) */
/* 19. QUIZ HUB — BROWSE SECTION SPACING TUNING */
/* 20. QUIZ HUB — SEARCH INPUT HEIGHT REFINEMENT */
/* 21. QUIZ HUB — VERTICAL SPACING COMPRESSION (FINAL) */
/* 22. QUIZ CARDS — difficulty pill (clean + readable) */
/* 23. QUIZ HUB — align toolbar + cards to same width */
/* 24. QUIZ CARDS — remove button tray/well */
/* 25. QUIZ CARDS — FORCE BADGES LEFT (override Elementor) */
/* 26. QUIZ CARDS — REMOVE BUTTON WELL / TRAY COMPLETELY */
/* 27. QUIZ CARDS — Difficulty pill (brighter gold) */
/* 28. TAXONOMY PILLS */
/* 29. SEARCH INPUT */
/* 30. SEARCH BUTTON */

/* =========================================================
   iKnowAviation – MASTER (Global / Shared Styles)
   Used site-wide: Elementor, UI components, missions, modals
   ========================================================= */

/* ==========================================================================
   SECTION 0 — COLOR TOKENS & HELPERS (GLOBAL DESIGN SYSTEM)
   ========================================================================== */

:root {
  --ika-navy-900: #0D131F;
  --ika-navy-800: #1A2740;
  --ika-blue-600: #006699;
  --ika-blue-400: #62A9F2;
  --ika-amber-300: #FFD373;
  --ika-surface-100: #F5F7FA;
  --ika-surface-50: #F9FAFB;
  --ika-border-soft: #E5EDF5;
  --ika-border-subtle: #CBD5E1;
  --ika-text-main: #111827;
  --ika-text-muted: #6B7280;
  --ika-white: #ffffff;

  /* =========================================================
     STATUS CHIP TOKENS (platform-wide)
     Standard: solid-fill chips (muted) across Quiz Hub,
     Recommendations, Missions, and Flight Deck variants.
     ========================================================= */
  --ika-chip-new-bg: #E6C15A;
  --ika-chip-new-border: #F2D37A;
  --ika-chip-new-text: #0B1220;

  --ika-chip-progress-bg: rgba(98,169,242,0.85);
  --ika-chip-progress-border: rgba(98,169,242,0.45);
  --ika-chip-progress-text: rgba(255,255,255,0.95);

  --ika-chip-complete-bg: rgba(106,196,150,0.85);
  --ika-chip-complete-border: rgba(106,196,150,0.45);
  --ika-chip-complete-text: rgba(255,255,255,0.95);

  /* =========================================================
     PRODUCT / APP SEMANTIC TOKENS (Pass 5 enabling seam)
     These alias the current locked IKA palette into a smaller,
     future-safe semantic layer that QuizOps core can standardize
     on before any later brand/theme controls are introduced.
     ========================================================= */
  --qo-color-bg-page-app: var(--ika-navy-900);
  --qo-color-bg-surface-app: rgba(13,19,31,0.88);
  --qo-color-bg-surface-app-elevated: linear-gradient(180deg, rgba(13,19,31,0.90), rgba(9,14,25,0.94));
  --qo-color-border-app: rgba(148,163,184,0.18);
  --qo-color-border-app-strong: rgba(98,169,242,0.38);
  --qo-color-text-app: rgba(255,255,255,0.96);
  --qo-color-text-app-muted: rgba(214,226,247,0.78);
  --qo-color-text-app-soft: rgba(184,201,229,0.72);
  --qo-color-accent-brand: var(--ika-blue-400);
  --qo-color-accent-brand-strong: var(--ika-blue-600);
  --qo-shadow-app-card: 0 16px 40px rgba(0,0,0,0.32);
  --qo-shadow-app-card-hover: 0 22px 54px rgba(0,0,0,0.42);
  --qo-shadow-app-shell: 0 18px 42px rgba(0,0,0,0.45);
  --qo-shadow-app-shell-strong: 0 28px 90px rgba(0,0,0,0.55);
  --qo-focus-ring-app: 0 0 0 2px rgba(8,12,22,0.92), 0 0 0 4px rgba(98,169,242,0.52);
  --qo-radius-card-app: 18px;
  --qo-radius-shell-app: 26px;
  --qo-color-text-app-strong: rgba(255,255,255,0.95);
  --qo-color-text-app-subtle: rgba(214,226,247,0.76);
  --qo-color-text-app-kicker: #9db0d6;
  --qo-color-text-app-muted-bright: #c1d4ff;
  --qo-color-text-app-high: rgba(234,242,255,0.95);
  --qo-color-text-app-high-muted: rgba(234,242,255,0.82);
  --qo-color-text-app-high-subtle: rgba(234,242,255,0.72);
  --qo-color-link-app: var(--qo-color-accent-brand);
  --qo-color-surface-glass-app: rgba(255,255,255,0.04);
  --qo-color-surface-glass-app-subtle: rgba(255,255,255,0.03);
  --qo-color-surface-glass-app-strong: rgba(255,255,255,0.08);
  --qo-color-border-app-soft: rgba(255,255,255,0.08);
  --qo-color-border-app-subtle: rgba(255,255,255,0.06);
  --qo-color-border-app-faint: rgba(255,255,255,0.10);
  --qo-color-border-app-muted: rgba(255,255,255,0.12);
  --qo-color-border-app-emphasis: rgba(255,255,255,0.16);
  --qo-color-interactive-accent-hover-bg: rgba(98,169,242,0.14);
  --qo-color-interactive-accent-hover-border: rgba(98,169,242,0.35);
  --qo-color-interactive-accent-active-bg: rgba(98,169,242,0.22);
  --qo-color-interactive-accent-active-border: rgba(98,169,242,0.55);
  --qo-color-button-primary-ui-bg: #007bff;
  --qo-color-button-primary-ui-bg-hover: #005fcc;
  --qo-shadow-button-primary-ui: 0 8px 22px rgba(0,123,255,0.45);
  --qo-color-button-primary-app-bg: #1E5BBF;
  --qo-color-button-primary-app-bg-hover: #174A99;
  --qo-color-button-outline-bg: #111827;
  --qo-color-button-outline-bg-hover: #020617;
  --qo-color-button-outline-border: rgba(148,163,184,0.5);
  --qo-color-button-outline-text: #E5E7EB;
  --qo-color-state-warm-bg: rgba(255,211,115,0.14);
  --qo-color-state-warm-border: rgba(255,211,115,0.32);
  --qo-color-state-warm-text: #FFD373;

  --qo-color-state-new-bg: var(--ika-chip-new-bg);
  --qo-color-state-new-border: var(--ika-chip-new-border);
  --qo-color-state-new-text: var(--ika-chip-new-text);
  --qo-color-state-progress-bg: var(--ika-chip-progress-bg);
  --qo-color-state-progress-border: var(--ika-chip-progress-border);
  --qo-color-state-progress-text: var(--ika-chip-progress-text);
  --qo-color-state-complete-bg: var(--ika-chip-complete-bg);
  --qo-color-state-complete-border: var(--ika-chip-complete-border);
  --qo-color-state-complete-text: var(--ika-chip-complete-text);

/* --- APP / UI TOKENS (canonical) --- */
--ika-body-size: 1rem;
--ika-h1-size: 2.25rem;
--ika-h2-size: 1.75rem;

--ika-space-xs: 6px;
--ika-space-sm: 10px;
--ika-space-md: 16px;
--ika-space-lg: 24px;

/* Page/panel backgrounds (used by helper classes like .ika-bg--dark) */
--ika-page-bg-light: var(--ika-surface-100);
--ika-page-bg-dark: var(--qo-color-bg-page-app);
--ika-panel-bg-dark: var(--qo-color-bg-surface-app);
--ika-panel-border: var(--qo-color-border-app);
}


/* ==========================================================================
   LAYOUT UTILITIES — apply these as CSS classes on Elementor top containers
   ========================================================================== */

/* Page background modes */

/* Centered shell that locks width */

/* Consistent section padding */

/* Dark “app panel” container */

/* ==========================================================================
   LAYOUT UTILITIES — apply these as CSS classes on Elementor top containers
   ========================================================================== */

.ika-bg--light{ background: var(--ika-page-bg-light); }
.ika-bg--dark{  background: var(--ika-page-bg-dark);  }

.ika-shell{
  max-width: var(--ika-w-default);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ika-pad-x);
  padding-right: var(--ika-pad-x);
  width: 100%;
}
.ika-shell--wide{ max-width: var(--ika-w-wide); }
.ika-shell--narrow{ max-width: var(--ika-w-narrow); }

/* Consistent section padding */
.ika-section{
  padding-top: var(--ika-section-y);
  padding-bottom: var(--ika-section-y);
}
.ika-section--tight{
  padding-top: var(--ika-section-y-tight);
  padding-bottom: var(--ika-section-y-tight);
}

.ika-panel{
  background: var(--ika-panel-bg-dark);
  border: 1px solid var(--ika-panel-border);
  border-radius: 22px;
}

/* Utility helpers */
.ika-hero-surface  { background-color: var(--ika-surface-100); }
.ika-hero-accent   { color: var(--ika-amber-300); }
.ika-hero-border   { border-color: var(--ika-border-soft); }
.ika-text-main     { color: var(--ika-text-main); }
.ika-text-muted    { color: var(--ika-text-muted); }
.ika-tab-active-bg { background-color: rgba(0, 102, 153, 0.12); }
.ika-tab-hover-bg  { background-color: rgba(0, 102, 153, 0.06); }

/* NOTE: The original .ika-hero-bg line in the provided file was truncated/invalid CSS.
   Keep this as a placeholder and define your final gradient later if needed. */
/*
.ika-hero-bg {
  background: radial-gradient(circle at 0 0, var(--ika-blue-400) 0, var(--ika-navy-800) 45%, var(--ika-navy-900) 100%);
}
*/

/* =========================================================
   GLOBAL / SHARED BASICS
   ========================================================= */

/* SAFE TWEAK ZONE:
   - You can adjust the placeholder color here if you ever want a different gray.
*/
::placeholder {
  color: #9CA3AF; /* soft gray */
  opacity: 1;
}

img {
  height: auto;
  max-width: 100%;
  display: block;
}

/* Global section spacing for Elementor sections */
.elementor-section {
  scroll-margin-top: 80px;
}

/* Typography helpers */
.ika-heading-eyebrow {
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: #6B7280;
}

/* =========================================================
   ELEMENTOR – GLOBAL BUTTON STYLING
   ========================================================= */

.elementor-button {
  border-radius: 999px;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
  padding: 10px 22px;
  border-width: 0;
  transition: all 0.18s ease-out;
}

.elementor-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.22);
}

/* Primary button wrapper */
.ika-btn-primary .elementor-button {
  background-color: var(--qo-color-button-primary-app-bg, #1E5BBF);
  color: #FFFFFF;
}
.ika-btn-primary .elementor-button:hover {
  background-color: var(--qo-color-button-primary-app-bg-hover, #174A99);
}

/* Secondary button wrapper */
.ika-btn-secondary .elementor-button {
  background-color: var(--qo-color-button-outline-bg, #111827);
  color: var(--qo-color-button-outline-text, #E5E7EB);
  border: 1px solid var(--qo-color-button-outline-border, rgba(148, 163, 184, 0.5));
}
.ika-btn-secondary .elementor-button:hover {
  background-color: var(--qo-color-button-outline-bg-hover, #020617);
}

/* Ghost / outline button wrapper */
.ika-btn-ghost .elementor-button {
  background-color: transparent;
  color: #1E40AF;
  border: 1px solid rgba(148, 163, 184, 0.7);
}
.ika-btn-ghost .elementor-button:hover {
  background-color: rgba(37, 99, 235, 0.06);
}

/* Link-style button wrapper */
.ika-btn-link .elementor-button {
  background: transparent;
  color: #1E40AF;
  padding-left: 0;
  padding-right: 0;
  box-shadow: none;
}

.ika-btn-link .elementor-button .elementor-button-icon {
  margin-left: 6px;
}

/* =========================================================
   HERO LAYOUT HELPERS (GENERAL)
   ========================================================= */

.hero-large {
  padding: 80px 0 72px;
}

.hero-large .elementor-container {
  align-items: center;
}

/* =========================================================
   CARD COMPONENT (SHARED ACROSS SITE)
   ========================================================= */

.ika-card {
  background-color: #FFFFFF;
  border-radius: 16px;
  padding: 24px 24px 22px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s ease-out;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ika-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
  border-color: #1E5BBF;
}

/* Icon styling for cards */
.ika-card .elementor-widget-icon .elementor-icon {
  margin-bottom: 16px;
}

/* =========================================================
   DARK SECTION COLORS (SAFE TWEAK ZONE)
   ========================================================= */

.ika-dark {
  background-color: #0D1B2A;
}

.ika-dark h1,
.ika-dark h2,
.ika-dark h3,
.ika-dark h4,
.ika-dark h5,
.ika-dark h6 {
  color: #FFFFFF;
}

.ika-dark p,
.ika-dark li {
  color: #E5EDF5;
}

.ika-dark .muted {
  color: #A9B7C6;
}

/* Link colors in dark sections */
.ika-dark a {
  color: #62A9F2;
}

.ika-dark a:hover {
  color: #93C5FD;
}

/* =========================================================
   FORM STYLING – GENERIC (.ika-form)
   ========================================================= */

.ika-form .form-row,
.ika-form .form-group {
  margin-bottom: 14px;
}

.ika-form label {
  display: block;
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 6px;
}

.ika-form input[type="text"],
.ika-form input[type="email"],
.ika-form input[type="password"],
.ika-form input[type="number"],
.ika-form input[type="url"],
.ika-form input[type="tel"],
.ika-form input[type="search"],
.ika-form select,
.ika-form textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #D1D9E6;
  padding: 10px 12px;
  font-size: 14px;
  font-family: "Open Sans", system-ui, sans-serif;
  color: #111827;
  background-color: #FFFFFF;
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out, background-color 0.15s ease-out;
}

/* Focus */
.ika-form input:focus,
.ika-form select:focus,
.ika-form textarea:focus {
  outline: none;
  border-color: #2563EB;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.08);
}

/* Error state */
.ika-form .has-error input,
.ika-form .has-error select,
.ika-form .has-error textarea {
  border-color: #DC2626;
}

.ika-form .error-message {
  margin-top: 4px;
  font-size: 12px;
  color: #DC2626;
}

/* =========================================================
   FOOTER SOCIAL ICONS (GLOBAL)
   ========================================================= */

.footer-social-icons {
  display: flex;
  gap: 10px;
}

.footer-social-icons a {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6B7280;
  transition: all 0.15s ease-out;
}

.footer-social-icons a:hover {
  color: #111827;
  border-color: #111827;
  transform: translateY(-1px);
}

/* NOTE: Flight Deck styles moved to quizops_flightdeck.css */

   QUIZ HUB (Quizzes Page) — SCOPED
   Apply styles to pages/sections that include:
   .ika-quiz-hub
   ========================================================= */

.ika-quiz-hub {
  position: relative;
}

/* Track filter pills (Elementor Taxonomy Filter) */
.ika-quiz-hub .ika-quiz-hub__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.ika-quiz-hub .ika-quiz-hub__filter button,
.ika-quiz-hub .ika-quiz-hub__filter a,
.ika-quiz-hub .ika-quiz-hub__filter .e-filter {
  border-radius: 999px !important;
  padding: 9px 12px !important;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(2, 8, 24, 0.45);
  color: rgba(255,255,255,0.92);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.ika-quiz-hub .ika-quiz-hub__filter button:hover,
.ika-quiz-hub .ika-quiz-hub__filter a:hover,
.ika-quiz-hub .ika-quiz-hub__filter .e-filter:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 211, 115, 0.55);
  background: rgba(26, 39, 64, 0.60);
}

/* Active pill */
.ika-quiz-hub .ika-quiz-hub__filter .active,
.ika-quiz-hub .ika-quiz-hub__filter .e-filter--active,
.ika-quiz-hub .ika-quiz-hub__filter button[aria-pressed="true"] {
  border-color: rgba(255, 211, 115, 0.85) !important;
  background: rgba(255, 211, 115, 0.14) !important;
}

/* Optional: Search form inside hero */
.ika-quiz-hub .ika-quiz-hub__search input[type="search"] {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  padding: 10px 12px;
  background: rgba(2, 8, 24, 0.55);
  color: rgba(255,255,255,0.92);
}

.ika-quiz-hub .ika-quiz-hub__search input[type="search"]:focus {
  outline: none;
  border-color: rgba(98, 169, 242, 0.75);
  box-shadow: 0 0 0 1px rgba(98, 169, 242, 0.12);
}

/* Grid wrapper spacing */
.ika-quiz-hub__gridwrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 0px 20px;
  /* padding: 42px 20px 70px; */
}

/* =========================================================
   QUIZ CARD (Loop Item) — SCOPED
   Class on Loop Item outer container: .ika-quiz-card
   ========================================================= */

.ika-quiz-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(26,39,64,0.10), rgba(13,19,31,0.04));
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s ease-out;
}

.ika-quiz-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
  border-color: rgba(98, 169, 242, 0.65);
}

.ika-quiz-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ika-quiz-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  font-family: "Montserrat", system-ui, sans-serif;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(245, 247, 250, 0.65);
  color: #111827;
}

.ika-quiz-pill--diff {
  border-color: rgba(255, 211, 115, 0.65);
  background: rgba(255, 211, 115, 0.18);
}

.ika-quiz-card__title {
  margin: 2px 0 0;
  font-size: 20px;
  line-height: 1.2;
}

.ika-quiz-card__desc {
  margin: 0;
  color: #6B7280;
  font-size: 14px;
  line-height: 1.45;
  min-height: 42px; /* keeps card heights aligned if some excerpts are empty */
}

.ika-quiz-card__meta {
  margin-top: auto;
  font-size: 12px;
  color: #6B7280;
  opacity: 0.95;
}

.ika-quiz-card__cta {
  margin-top: 10px;
}

/* Responsive hero stacking */
@media (max-width: 980px) {
  .ika-quiz-hub .ika-quiz-hub__inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding: 56px 18px 52px;
  }
}

/* =========================================================
   QUIZ HUB — DARK VARIANT (Browse section + cards)
   Add class: .ika-quiz-hub--dark on the Browse/grid section
   ========================================================= */

.ika-quiz-hub--dark {
  background:
    radial-gradient(1200px 500px at 25% 0%,
      rgba(98,169,242,0.18),
      rgba(13,19,31,0.96) 55%),
    linear-gradient(180deg, rgba(2,8,24,0.98), rgba(13,19,31,0.98));
  padding-top: 36px;
  padding-bottom: 70px;
}

.ika-quiz-hub--dark h1,
.ika-quiz-hub--dark h2,
.ika-quiz-hub--dark h3,
.ika-quiz-hub--dark p {
  color: rgba(255,255,255,0.92);
}

/* Toolbar (filter pills + search) */
.ika-quiz-toolbar {
  margin-top: 16px;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(2, 8, 24, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.28);
  backdrop-filter: blur(8px);
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.ika-quiz-toolbar__left {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.ika-quiz-toolbar__right {
  min-width: 260px;
}

/* Make the search look like the mock */
.ika-quiz-hub--dark .ika-quiz-hub__search input[type="search"] {
  background: rgba(2,8,24,0.75);
  border-color: rgba(148,163,184,0.28);
}

/* Cards become dark/premium inside the dark section */
.ika-quiz-hub--dark .ika-quiz-card {
  background: rgba(2, 8, 24, 0.58);
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow: 0 18px 44px rgba(0,0,0,0.28);
}

.ika-quiz-hub--dark .ika-quiz-card:hover {
  border-color: rgba(98,169,242,0.55);
  box-shadow: 0 22px 55px rgba(0,0,0,0.38);
}

.ika-quiz-hub--dark .ika-quiz-card__title {
  color: rgba(255,255,255,0.96);
}

.ika-quiz-hub--dark .ika-quiz-card__desc,
.ika-quiz-hub--dark .ika-quiz-card__meta {
  color: rgba(226,232,240,0.78);
}

/* Pills in dark mode */
.ika-quiz-hub--dark .ika-quiz-pill {
  background: rgba(13,19,31,0.72);
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.16);
}

.ika-quiz-hub--dark .ika-quiz-pill--diff {
  border-color: rgba(255, 211, 115, 0.55);
  background: rgba(255, 211, 115, 0.16);
}

/* Optional: hide the hero right panel if you kept it */
.ika-quiz-hub .ika-quiz-hub__right.is-hidden {
  display: none !important;
}

/* Responsive toolbar stacking */
@media (max-width: 820px) {
  .ika-quiz-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .ika-quiz-toolbar__right {
    min-width: 0;
  }
}

/* ============================================================
   IKA – GLOBAL TYPOGRAPHY BASELINE (fixes line-height issues)
   ============================================================ */
body {
  line-height: 1.55;
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  line-height: 1.55;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  line-height: 1.12;
}

/* Prevent odd overlaps inside icon-list text */
.elementor-icon-list-text {
  line-height: 1.35;
}

/* ============================================================
   IKA – QUIZ HUB HERO (full-bleed + centered)
   Classes from your HTML:
   .ika-quiz-hub, .ika-quiz-hub__inner, .ika-quiz-hub__left
   ============================================================ */

/* Full-bleed trick: make the hero background span the viewport
   even if the page/container is boxed by theme defaults */
.ika-quiz-hub__inner {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  position: relative;
  overflow: hidden;

  /* If Elementor background is set, this just improves it */
  background-size: cover;
  background-position: center;
}

/* Dark overlay for readability */
.ika-quiz-hub__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(4, 9, 22, 0.70) 0%,
    rgba(4, 9, 22, 0.55) 45%,
    rgba(4, 9, 22, 0.25) 100%
  );
  pointer-events: none;
}

/* Ensure hero content sits above overlay */
.ika-quiz-hub__left,
.ika-quiz-hub__inner > * {
  position: relative;
  z-index: 2;
}

/* Center the hero content stack */
.ika-quiz-hub__left {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  align-items: center;
  padding: 84px 20px;
}

/* Eyebrow */
.ika-heading-eyebrow .elementor-heading-title {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 211, 115, 0.9);
  margin-bottom: 10px;
}

/* Hero title */
.ika-quiz-hub__left h1.elementor-heading-title {
  font-size: clamp(34px, 4vw, 54px);
  font-weight: 800;
  color: #EAF2FF;
  margin: 0 0 10px 0;
  text-shadow: 0 10px 35px rgba(0,0,0,0.45);
}

/* Hero subtext */
.ika-quiz-hub__left .elementor-widget-text-editor p {
  font-size: 16px;
  color: rgba(229, 236, 245, 0.86);
  margin: 0 0 18px 0;
}

/* Hero icon list */
.ika-quiz-hub__left .elementor-icon-list-items {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 18px 0;
  padding: 0;
}
.ika-quiz-hub__left .elementor-icon-list-icon svg {
  width: 16px;
  height: 16px;
}
.ika-quiz-hub__left .elementor-icon-list-text {
  color: rgba(229, 236, 245, 0.92);
  font-size: 14px;
}

/* Hero CTA button */
.ika-quiz-hub__left .elementor-button {
  background: #1D5CCB;
  border-radius: 999px;
  padding: 14px 22px;
  font-weight: 700;
  box-shadow: 0 14px 40px rgba(29, 92, 203, 0.35);
}
.ika-quiz-hub__left .elementor-button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* ============================================================
   IKA – QUIZ HUB SECTION BACKGROUND
   ============================================================ */
.ika-quiz-hub--dark {
  background: radial-gradient(1200px 600px at 50% 0%, rgba(98,169,242,0.18) 0%, rgba(4,9,22,0) 65%),
              linear-gradient(180deg, #071022 0%, #040916 100%);
  padding-top: 40px;
  padding-bottom: 60px;
}

/* ============================================================
   IKA – TOOLBAR (taxonomy filter + search)
   Classes from your HTML:
   .ika-quiz-toolbar, .ika-quiz-hub__filter .e-filter-item, .ika-quiz-hub__search .e-search
   ============================================================ */
.ika-quiz-toolbar {
  margin-top: 18px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(229,236,245,0.12);
  background: rgba(6, 12, 28, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Filter row */
.ika-quiz-hub__filter .e-filter {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Filter pills */
.ika-quiz-hub__filter .e-filter-item {
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid rgba(229,236,245,0.14);
  background: rgba(255,255,255,0.04);
  color: rgba(229,236,245,0.78);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.ika-quiz-hub__filter .e-filter-item:hover {
  transform: translateY(-1px);
  border-color: rgba(98,169,242,0.35);
  background: rgba(98,169,242,0.10);
}

/* Active filter */
.ika-quiz-hub__filter .e-filter-item[aria-pressed="true"] {
  border-color: rgba(255,211,115,0.35);
  background: rgba(255,211,115,0.14);
  color: #FFD373;
}

/* Search */
.ika-quiz-hub__search .e-search-form {
  display: flex;
  gap: 10px;
  align-items: center;
}

.ika-quiz-hub__search .e-search-input-wrapper {
  border-radius: 12px;
  border: 1px solid rgba(229,236,245,0.14);
  background: rgba(4,9,22,0.55);
  overflow: hidden;
}

.ika-quiz-hub__search input.e-search-input {
  min-width: 280px;
  padding: 12px 14px;
  color: rgba(234,242,255,0.92);
}

.ika-quiz-hub__search input.e-search-input::placeholder {
  color: rgba(229,236,245,0.55);
}

.ika-quiz-hub__search button.e-search-submit {
  border-radius: 12px;
  padding: 12px 16px;
  background: rgba(229,236,245,0.10);
  border: 1px solid rgba(229,236,245,0.14);
  color: rgba(229,236,245,0.90);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ika-quiz-hub__search button.e-search-submit:hover {
  background: rgba(98,169,242,0.16);
  border-color: rgba(98,169,242,0.35);
}

/* Mobile toolbar stacking */
@media (max-width: 767px) {
  .ika-quiz-hub__search input.e-search-input { min-width: 180px; }
  .ika-quiz-toolbar { padding: 12px; }
}

/* ============================================================
   IKA – QUIZ CARDS + PILLS
   Classes from your HTML:
   .ika-quiz-card, .ika-quiz-pill--track, .ika-quiz-pill--diff, .ika-btn-primary__cta
   ============================================================ */

.ika-quiz-card {
  border-radius: 18px;
  border: 1px solid rgba(229,236,245,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  overflow: hidden;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.ika-quiz-card:hover {
  transform: translateY(-4px);
  border-color: rgba(98,169,242,0.30);
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
}

/* Make the boxed inner padding consistent */
.ika-quiz-card .e-con-inner {
  padding: 18px 18px 16px 18px;
}

/* Title */
.ika-quiz-card__title .elementor-heading-title {
  color: #EAF2FF;
  font-weight: 800;
  font-size: 22px;
  margin: 8px 0 8px 0;
}

/* Meta line */
.ika-quiz-card__meta {
  color: rgba(229,236,245,0.65);
  font-size: 13px;
}

/* Pills container */
.ika-quiz-card__badges {
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Pills (track/difficulty) */
.ika-quiz-pill .elementor-widget-container,
.ika-quiz-pill p {
  margin: 0 !important;
}

.ika-quiz-pill {
  display: inline-flex;
}

.ika-quiz-pill .elementor-widget-container {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(229,236,245,0.14);
  background: rgba(255,255,255,0.04);
  color: rgba(229,236,245,0.78);
}

/* Track pill */
.ika-quiz-pill--track .elementor-widget-container {
  border-color: rgba(98,169,242,0.30);
  background: rgba(98,169,242,0.10);
  color: rgba(179, 213, 255, 0.95);
}

/* Difficulty pill */
.ika-quiz-pill--diff .elementor-widget-container {
  border-color: rgba(255,211,115,0.30);
  background: rgba(255,211,115,0.12);
  color: #FFD373;
}

/* Card button */
.ika-btn-primary__cta .elementor-button {
  width: 100%;
  border-radius: 999px;
  padding: 12px 16px;
  background: var(--qo-color-button-primary-app-bg, rgba(29, 92, 203, 0.95));
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 14px 40px rgba(29, 92, 203, 0.22);
}

.ika-btn-primary__cta .elementor-button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* =========================================================
   IKA – QUIZ HUB PATCH (Full-bleed hero + toolbar row + cards)
   Paste at END of ika_master.css
   ========================================================= */

/* --- Global typography safety (fixes odd overlaps & over-bold headings) --- */
body{
  line-height: 1.55;
}
p, li{
  line-height: 1.55;
}

/* HERO full-bleed: page section with ika-quiz-archive OR ika-quiz-hub */
.ika-quiz-archive,
.ika-quiz-hub{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0 !important;
  overflow: hidden;
  background-color: #0D131F;
}
.ika-quiz-archive .e-con-inner,
.ika-quiz-archive .ika-quiz-hub__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* If Elementor adds a background overlay, keep it subtle */
.ika-quiz-archive .elementor-background-overlay{
  opacity: 0.22 !important;
}

/* Hero text styling (scoped so it won’t wreck other pages) */
.ika-quiz-archive .ika-quiz-hero__title .elementor-heading-title{
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 700 !important;          /* fixes “too bold” */
  letter-spacing: -0.02em;
  line-height: 1.06 !important;
  text-shadow: 0 10px 35px rgba(0,0,0,0.35);
}
.ika-quiz-archive .ika-quiz-hero__sub{
  max-width: 720px;
}
.ika-quiz-archive .ika-quiz-hub__left{
  text-align: center;
}
.ika-quiz-archive .ika-quiz-hub__left .elementor-widget-container{
  justify-content: center;
}

/* --- TOOLBAR: pills + search on ONE line (desktop) --- */
@media (min-width: 981px){
  .ika-quiz-toolbar{
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .ika-quiz-hub__filter{
    flex: 1 1 auto;
    min-width: 0;
  }
  .ika-quiz-hub__filter .e-filter{
    flex-wrap: nowrap !important;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ika-quiz-hub__filter .e-filter::-webkit-scrollbar{ display:none; }

  .ika-quiz-hub__search{
    flex: 0 0 360px;
  }
  .ika-quiz-hub__search input.e-search-input{
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* --- PILLS: more color + “premium” feel --- */
.ika-quiz-pill .elementor-widget-container{
  background: rgba(255,255,255,0.06);
  border-color: rgba(229,236,245,0.16);
  color: rgba(234,242,255,0.88);
}

.ika-quiz-pill--track .elementor-widget-container{
  background: rgba(98,169,242,0.18);
  border-color: rgba(98,169,242,0.45);
  color: rgba(210,232,255,0.96);
}
.ika-quiz-pill--diff .elementor-widget-container{
  background: rgba(255,211,115,0.20);
  border-color: rgba(255,211,115,0.55);
  color: #FFD373;
}

/* --- CARDS: stronger glass + better spacing --- */
.ika-quiz-card{
  border-radius: 22px;
  border-color: rgba(148,163,184,0.22);
  background:
    radial-gradient(900px 420px at 20% 0%,
      rgba(98,169,242,0.14),
      transparent 55%),
    linear-gradient(180deg,
      rgba(26,39,64,0.26),
      rgba(2,8,24,0.74));
  box-shadow: 0 18px 60px rgba(0,0,0,0.30);
}
.ika-quiz-card:hover{
  border-color: rgba(98,169,242,0.40);
  box-shadow: 0 28px 90px rgba(0,0,0,0.40);
}

/* Card CTA alignment like the mock */
.ika-quiz-card__cta{
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}
.ika-btn-primary__cta .elementor-button{
  width: auto !important;
  padding: 12px 18px;
}

.ika-quiz-archive .elementor-background-overlay,
.ika-quiz-hub .elementor-background-overlay{
  opacity: 0.18 !important;
}

.ika-quiz-archive .ika-quiz-hero__title .elementor-heading-title,
.ika-quiz-hub .ika-quiz-hero__title .elementor-heading-title{
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.06 !important;
}

@media (min-width: 981px){
  .ika-quiz-toolbar{ flex-wrap: nowrap !important; }
  .ika-quiz-hub__filter{ flex: 1 1 auto; min-width: 0; }
  .ika-quiz-hub__filter .e-filter{
    flex-wrap: nowrap !important;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .ika-quiz-hub__filter .e-filter::-webkit-scrollbar{ display:none; }
  .ika-quiz-hub__search{ flex: 0 0 360px; }
}

/* =========================================================
   IKA – QUIZ HUB HERO (NO left/right columns)
   Requires:
   .ika-quiz-hub (outer hero container)
   .ika-quiz-hub__inner (inner container holding all text/widgets)
   ========================================================= */

/* Keep the hero full-bleed (you already have this pattern in the file) */
.ika-quiz-hub .ika-quiz-hub__inner{
  /* override the old grid layout */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  /* sizing */
  max-width: 1200px;
  margin: 0 auto;
  padding: 84px 20px 74px;

  position: relative;
  z-index: 2; /* above overlay */
}

/* Overlay: keep subtle so image doesn't get crushed */
.ika-quiz-hub::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(4, 9, 22, 0.18) 0%,
    rgba(4, 9, 22, 0.30) 55%,
    rgba(4, 9, 22, 0.40) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Make sure the outer hero container can host the overlay */

/* Apply the old “left container” text styling to the INNER container instead */
.ika-quiz-hub .ika-quiz-hub__inner .elementor-heading-title{
  color: #ffffff;
  text-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* Description text */
.ika-quiz-hub .ika-quiz-hub__inner .elementor-widget-text-editor{
  color: rgba(255,255,255,0.88);
}

/* Keep hero paragraph widths nice while centered */
.ika-quiz-hub .ika-quiz-hub__inner .elementor-widget-text-editor p{
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

/* Icon list readability */
.ika-quiz-hub .ika-quiz-hub__inner .elementor-icon-list-item,
.ika-quiz-hub .ika-quiz-hub__inner .elementor-icon-list-text{
  color: rgba(255,255,255,0.90);
}

/* CTA spacing */
.ika-quiz-hub .ika-quiz-hub__inner .elementor-widget-button{
  margin-top: 8px;
}

/* Responsive tightening */
@media (max-width: 768px){
  .ika-quiz-hub .ika-quiz-hub__inner{
    padding: 64px 16px 58px;
  }
}

/* =========================================================
   IKA – QUIZ HUB HERO FIX (remove overlay + restore typography)
   Scoped to Quizzes hero only
   Requires:
   - outer hero container: .ika-quiz-hub
   - inner hero container: .ika-quiz-hub__inner
   ========================================================= */

/* 1) Kill ALL overlays on the hero (CSS + Elementor overlay) */
.ika-quiz-hub::before,
.ika-quiz-hub__inner::before{
  content: none !important;
  display: none !important;
}

/* 2) Ensure hero is the positioning context */

/* 3) Center the inner stack and give it proper spacing */

/* 4) Eyebrow (QUIZ HUB) */
.ika-quiz-hub .ika-quiz-hero__eyebrow .elementor-heading-title,
.ika-quiz-hub .ika-heading-eyebrow .elementor-heading-title{
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 211, 115, 0.92);
  margin: 0 0 10px 0;
}

/* 5) Main title */
.ika-quiz-hub .ika-quiz-hero__title .elementor-heading-title{
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 700;                 /* not “extra bold” */
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: #FFFFFF;
  margin: 0 0 12px 0;
  text-shadow: 0 12px 34px rgba(0,0,0,0.35);
}

/* 6) Subtitle / description */
.ika-quiz-hub .ika-quiz-hero__sub .elementor-widget-text-editor,
.ika-quiz-hub .ika-quiz-hero__sub p,
.ika-quiz-hub .ika-quiz-hub__inner .elementor-widget-text-editor p{
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,0.86);
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
}

/* 7) Icon list row */

/* 8) CTA button sizing */

/* 9) Responsive spacing */

/* =========================================================
   IKA – HEADING RESET FIX (stop shrinking headings)
   This neutralizes the global "font-size: inherit !important" rule
   without breaking the rest of your site.
   ========================================================= */

/* Undo ONLY the font-size/font-weight inherit behavior */
.elementor-widget-heading .elementor-heading-title{
  font-size: unset !important;
  font-weight: unset !important;
  line-height: 1.12 !important; /* keep your tight heading rhythm */
}

/* If your theme forces tiny heading defaults, define sane site-wide heading sizes */
h1.elementor-heading-title{ font-size: clamp(32px, 3.4vw, 52px); }
h2.elementor-heading-title{ font-size: clamp(24px, 2.4vw, 36px); }
h3.elementor-heading-title{ font-size: clamp(18px, 1.8vw, 26px); }

/* =========================================================
   IKA – QUIZ HUB HERO (Final, clean, centered)
   Requires classes:
   .ika-quiz-hub, .ika-quiz-hub__inner
   and widget classes:
   .ika-quiz-hero__eyebrow, .ika-quiz-hero__title, .ika-quiz-hero__sub
   ========================================================= */

/* Kill overlays on this hero (Elementor overlay + prior CSS overlays) */
.ika-quiz-hub::before,
.ika-quiz-hub__inner::before{ content:none !important; display:none !important; }
.ika-quiz-hub .elementor-background-overlay{
  opacity: 0 !important;
  background: none !important;
}

/* Layout / centering */
.ika-quiz-hub{
  position: relative;
  overflow: hidden;
}
.ika-quiz-hub .ika-quiz-hub__inner{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  max-width: 1200px;
  margin: 0 auto;
  padding: 92px 20px 82px;

  position: relative;
  z-index: 2;
}

.ika-quiz-hub .ika-quiz-hero__eyebrow .elementor-heading-title{
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 211, 115, 0.92);
  margin: 0 0 10px 0;
}

/* Main title */
.ika-quiz-hub .ika-quiz-hero__title .elementor-heading-title{
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 700;               /* not overly bold */
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: #FFFFFF;
  margin: 0 0 12px 0;
  text-shadow: 0 12px 34px rgba(0,0,0,0.35);
}

/* Subtitle */
.ika-quiz-hub .ika-quiz-hero__sub .elementor-widget-text-editor,
.ika-quiz-hub .ika-quiz-hero__sub p{
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,0.86);
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
}

/* Icon list row polish */
.ika-quiz-hub .ika-quiz-hub__inner .elementor-icon-list-items{
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10px 0 18px 0;
  padding: 0;
}
.ika-quiz-hub .ika-quiz-hub__inner .elementor-icon-list-text{
  font-size: 14px;
  color: rgba(255,255,255,0.90);
}

/* CTA */
.ika-quiz-hub .ika-quiz-hub__inner .elementor-button{
  padding: 14px 22px;
}

/* Responsive */
@media (max-width: 768px){
  .ika-quiz-hub .ika-quiz-hub__inner{
    padding: 72px 16px 62px;
  }
}

/* =========================================================
   IKA – QUIZ HERO TITLE SIZE FIX (FINAL OVERRIDE)
   Paste at the VERY END of ika_master.css
   ========================================================= */

/* 1) Stop any remaining "inherit" heading shrink rules */
.elementor-widget-heading .elementor-heading-title{
  font-size: revert !important;
  font-weight: revert !important;
}

/* 2) Quiz Hub hero title: make it match the mock */
.ika-quiz-hub .ika-quiz-hero__title .elementor-heading-title{
  font-family: "Montserrat", system-ui, sans-serif;
  font-size: clamp(40px, 4.6vw, 64px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.05 !important;
  color: #FFFFFF;
  margin: 0 0 12px 0;
  text-shadow: 0 12px 34px rgba(0,0,0,0.32);
}

/* 3) Optional: keep eyebrow consistent even if class names vary */
.ika-quiz-hub .ika-quiz-hero__eyebrow .elementor-heading-title,
.ika-quiz-hub .ika-heading-eyebrow .elementor-heading-title{
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 211, 115, 0.92);
}

/* =========================================================
   QUIZ HUB — TOOLBAR ROW (one-line pills + search)
   Paste at END of ika_master.css
   ========================================================= */

/* Reduce the "gap" between hero and Browse section */
.ika-quiz-hub--dark{
  padding-top: 18px;   /* was 36px */
}

/* If your Browse heading container has extra top margin from Elementor,
   this helps tighten it without affecting other pages */
.ika-quiz-hub--dark .elementor-widget-heading{
  margin-top: 0 !important;
}

/* Toolbar = single row */
.ika-quiz-toolbar{
  margin-top: 12px;                 /* slightly tighter */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: nowrap;                /* key: keep one line */
}

/* Left side: allow growth + horizontal scroll for future taxonomies */
.ika-quiz-toolbar__left{
  flex: 1 1 auto;                   /* take remaining space */
  min-width: 0;                     /* allows overflow scroll */
  display: flex;
  flex-wrap: nowrap;                /* key: no wrapping */
  gap: 10px;
  overflow-x: auto;                 /* scroll if many pills */
  overflow-y: hidden;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

/* Optional: nicer slim scrollbar */

.ika-quiz-toolbar__left::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,0.25);
  border-radius: 999px;
}

/* Right side: fixed-ish search block */
.ika-quiz-toolbar__right{
  flex: 0 0 360px;                  /* stable width */
  max-width: 420px;
  min-width: 300px;
}

/* Search row: input + button styled like mock */
.ika-quiz-hub__search form{
  display: flex;
  gap: 10px;
  align-items: center;
}

.ika-quiz-hub__search input[type="search"],
.ika-quiz-hub__search input[type="text"]{
  height: 40px;
  width: 100%;
  border-radius: 999px;
  padding: 0 16px;
  background: rgba(2,8,24,0.70);
  border: 1px solid rgba(148,163,184,0.28);
  color: rgba(255,255,255,0.92);
  outline: none;
}

.ika-quiz-hub__search input::placeholder{
  color: rgba(203,213,225,0.65);
}

/* Search button matches your pill/button language */
.ika-quiz-hub__search button,
.ika-quiz-hub__search input[type="submit"]{
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.28);
  background: rgba(15,23,42,0.85);
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.ika-quiz-hub__search button:hover,
.ika-quiz-hub__search input[type="submit"]:hover{
  filter: brightness(1.08);
}

/* Mobile: allow wrapping so it doesn’t break layout */
@media (max-width: 820px){
  .ika-quiz-toolbar{
    flex-wrap: wrap;
  }
  .ika-quiz-toolbar__right{
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
  }
  .ika-quiz-toolbar__left{
    flex: 1 1 100%;
  }
}

/* =========================================================
   QUIZ HUB — BROWSE + TOOLBAR FIX (ONE LINE + MOCK SEARCH)
   Paste at VERY END of ika_master.css
   Targets your existing HTML/classes:
   .ika-quiz-hub--dark, .ika-quiz-toolbar, __left/__right,
   .ika-quiz-hub__filter (.e-filter), .ika-quiz-hub__search (.e-search)
   ========================================================= */

/* 1) Reduce the gap between HERO and the Browse section */
.ika-quiz-hub--dark{
  padding-top: 14px !important; /* tighten top */
}

/* If Elementor is adding extra top margin above Browse title */
.ika-quiz-hub--dark .elementor-element-c56018d{
  margin-top: 0 !important;
}
.ika-quiz-hub--dark .elementor-element-914b8e2{
  margin-top: 0 !important;
}

/* 2) TOOLBAR: keep everything on ONE row (desktop) */
.ika-quiz-toolbar{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  flex-wrap: nowrap !important; /* key */
}

/* Elementor containers sometimes default to column — force row */
.ika-quiz-toolbar__left,
.ika-quiz-toolbar__right{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* 3) LEFT: pills get room to grow (no wrapping; scroll if needed) */
.ika-quiz-toolbar__left{
  flex: 1 1 auto !important;
  min-width: 0 !important;            /* allows overflow scroll */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;                /* makes scrollbar not clip */
  gap: 10px !important;
  flex-wrap: nowrap !important;
}

/* Scrollbar styling (subtle) */
.ika-quiz-toolbar__left::-webkit-scrollbar{ height: 6px; }
.ika-quiz-toolbar__left::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,0.22);
  border-radius: 999px;
}

/* The actual filter <search class="e-filter"> */
.ika-quiz-hub__filter .e-filter{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;        /* key */
  white-space: nowrap !important;      /* key */
  margin: 0 !important;
}

/* Ensure pills don’t stretch full width */
.ika-quiz-hub__filter .e-filter-item{
  flex: 0 0 auto !important;
}

/* 4) RIGHT: search stays compact and aligned */
.ika-quiz-toolbar__right{
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
}

/* Control the search block width on desktop */
@media (min-width: 981px){
  .ika-quiz-toolbar__right{
    width: 380px;
    max-width: 420px;
  }
}

/* 5) Search styling to match your mock (smaller + rounded button) */
.ika-quiz-hub__search .e-search{
  width: 100%;
}
.ika-quiz-hub__search .e-search-form{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100%;
}

/* Input wrapper (Elementor adds this div) */
.ika-quiz-hub__search .e-search-input-wrapper{
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 999px !important;
  border: 1px solid rgba(148,163,184,0.28) !important;
  background: rgba(2,8,24,0.70) !important;
  overflow: hidden; /* keeps the input rounded */
}

/* Input itself */
.ika-quiz-hub__search input.e-search-input{
  width: 100% !important;
  height: 40px !important;            /* smaller */
  padding: 0 16px !important;
  border: none !important;            /* wrapper handles border */
  background: transparent !important;
  color: rgba(255,255,255,0.92) !important;
  outline: none !important;
}

.ika-quiz-hub__search input.e-search-input::placeholder{
  color: rgba(203,213,225,0.65) !important;
}

/* Button */
.ika-quiz-hub__search button.e-search-submit{
  height: 40px !important;            /* smaller */
  padding: 0 18px !important;
  border-radius: 999px !important;    /* match your other buttons */
  border: 1px solid rgba(148,163,184,0.28) !important;
  background: rgba(15,23,42,0.85) !important;
  color: rgba(255,255,255,0.92) !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer;
}

.ika-quiz-hub__search button.e-search-submit:hover{
  filter: brightness(1.08);
  border-color: rgba(98,169,242,0.35) !important;
  background: rgba(98,169,242,0.14) !important;
}

.ika-quiz-hub__search .e-search-input-wrapper:focus-within{
  border-color: rgba(98,169,242,0.55) !important;
  box-shadow: 0 0 0 1px rgba(98,169,242,0.14);
}

/* 6) Mobile: allow stacking (so it doesn’t overflow) */
@media (max-width: 820px){
  .ika-quiz-toolbar{
    flex-wrap: wrap !important;
  }
  .ika-quiz-toolbar__left{
    flex: 1 1 100% !important;
  }
  .ika-quiz-toolbar__right{
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .ika-quiz-hub__search button.e-search-submit{
    white-space: nowrap;
  }
}

/* =========================================================
   QUIZ HUB — SEARCH TEXT SIZE ALIGNMENT
   ========================================================= */

/* Match search text size to taxonomy pills */
.ika-quiz-hub__search input.e-search-input{
  font-size: 12px !important;
  letter-spacing: 0.04em;
  text-transform: none; /* keep normal case for usability */
}

/* Placeholder slightly lighter, same size */
.ika-quiz-hub__search input.e-search-input::placeholder{
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(203,213,225,0.60);
}

/* Search button text already matches pills, but ensure size parity */
.ika-quiz-hub__search button.e-search-submit{
  font-size: 12px !important;
  letter-spacing: 0.06em;
}

/* =========================================================
   QUIZ HUB — BROWSE SECTION SPACING (scoped + reusable)
   ========================================================= */

.ika-quiz-browse{
  padding-top: 16px;
}

.ika-quiz-browse .elementor-widget-text-editor{
  margin-bottom: 14px;
}

/* =========================================================
   QUIZ HUB — BROWSE SECTION SPACING TUNING
   ========================================================= */

/* Reduce gap between hero and Browse Quizzes */
.ika-quiz-browse{
  margin-top: -12px;   /* pulls section slightly upward */
  padding-top: 24px;  /* keeps internal breathing room */
  padding-bottom: 24px;
}

/* Tighten spacing under Browse Quizzes heading */
.ika-quiz-browse .elementor-widget-heading{
  margin-bottom: 6px;
}

/* Tighten spacing under subtitle */
.ika-quiz-browse .elementor-widget-text-editor{
  margin-bottom: 12px;
}

/* Reduce gap between toolbar and cards grid */
.ika-quiz-toolbar{
  margin-bottom: 20px;
}

/* =========================================================
   QUIZ HUB — SEARCH INPUT HEIGHT REFINEMENT
   ========================================================= */

.ika-quiz-hub__search input.e-search-input{
  height: 40px;
  padding: 0 14px;
  line-height: 40px;
}

/* Keep button slightly shorter for visual hierarchy */
.ika-quiz-hub__search button.e-search-submit{
  height: 36px;
  padding: 0 18px;
  line-height: 36px;
}

/* =========================================================
   QUIZ HUB — VERTICAL SPACING COMPRESSION (FINAL)
   ========================================================= */

/* Pull Browse section closer to hero */
.ika-quiz-browse {
  margin-top: -24px;        /* stronger pull-up */
  padding-top: 16px;       /* reduced internal padding */
  padding-bottom: 12px;
}

/* Tighten heading → toolbar relationship */
.ika-quiz-browse h2,
.ika-quiz-browse .elementor-heading-title {
  margin-bottom: 4px;
}

/* Tighten subtitle spacing */
.ika-quiz-browse .elementor-widget-text-editor {
  margin-bottom: 10px;
}

/* Toolbar should not push content down */
.ika-quiz-toolbar {
  margin-bottom: 12px;
}

/* Cards should start immediately after toolbar */
.ika-quiz-grid,
.ika-quiz-cards,
.elementor-loop-grid {
  margin-top: 8px !important;
}

/* =========================================================
   QUIZ CARDS — v2 polish (safe overrides)
   Paste at END of ika_master.css
   ========================================================= */

/* Card shell */
.ika-quiz-hub--dark .ika-quiz-card{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--qo-color-border-app-soft);
  background:
    radial-gradient(1200px 500px at 20% 0%, rgba(98,169,242,0.14), transparent 55%),
    radial-gradient(900px 420px at 90% 20%, rgba(255,211,115,0.10), transparent 55%),
    rgba(6,12,26,0.60);
  box-shadow:
    0 18px 44px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ika-quiz-hub--dark .ika-quiz-card:hover{
  transform: translateY(-4px);
  border-color: rgba(98,169,242,0.22);
  box-shadow:
    0 22px 58px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Subtle sheen overlay */
.ika-quiz-hub--dark .ika-quiz-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(98,169,242,0.14), rgba(255,211,115,0.10), transparent 60%);
  opacity: .9;
  pointer-events:none;
}

/* Inner spacing */
.ika-quiz-hub--dark .ika-quiz-card .e-con-inner{
  position: relative;
  padding: 22px;
  min-height: 190px;
}

/* Title + meta */
.ika-quiz-hub--dark .ika-quiz-card__title{
  margin: 10px 0 6px;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--qo-color-text-app-strong);
}

.ika-quiz-hub--dark .ika-quiz-card__meta{
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255,255,255,0.62);
}

/* Badge row */
.ika-quiz-hub--dark .ika-quiz-card__badges{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  min-height: 30px; /* ensures top area never looks “empty” */
  margin-bottom: 6px;
}

/* If there are NO pills, auto-add two default pills */
.ika-quiz-hub--dark .ika-quiz-card__badges:empty::before,
.ika-quiz-hub--dark .ika-quiz-card__badges:empty::after{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.80);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
  content:"Quick Quiz";
}

.ika-quiz-hub--dark .ika-quiz-card__badges:empty::after{
  content:"All Levels";
  border-color: rgba(255,211,115,0.35);
  background: rgba(255,211,115,0.14);
  color: rgba(255,244,214,0.95);
}

/* Pills — punchier color */

.ika-quiz-hub--dark .ika-quiz-pill--track{
  border-color: rgba(98,169,242,0.40);
  background: rgba(98,169,242,0.16);
  color: rgba(210,233,255,0.95);
}

.ika-quiz-hub--dark .ika-quiz-pill--diff{
  border-color: rgba(255,211,115,0.48);
  background: rgba(255,211,115,0.18);
  color: rgba(255,244,214,0.98);
}

/* Button — match mockup proportions and placement */
.ika-quiz-hub--dark .ika-btn-primary__cta{
  margin-top: 16px;
  text-align: left !important;
}

.ika-quiz-hub--dark .ika-btn-primary__cta .elementor-button{
  border-radius: 999px !important;
  padding: 12px 22px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

/* Optional: place button bottom-right like mockup (works if your inner column layout allows it) */
.ika-quiz-hub--dark .ika-btn-primary__cta{
  display:flex;
  justify-content:flex-end;
}

/* =========================================================
   FUTURE: Taken / In-Progress / New status (won’t show until you add these classes later)
   - Add class on loop item OR card wrapper later via backend:
     .ika-quiz-card.is-complete
     .ika-quiz-card.is-started
     .ika-quiz-card.is-new
   ========================================================= */

.ika-quiz-hub--dark .ika-quiz-card.is-complete{
  border-color: rgba(67, 250, 167, 0.22);
}
.ika-quiz-hub--dark .ika-quiz-card.is-complete::after{
  content:"COMPLETED";
  position:absolute;
  top: 14px;
  right: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  border: 1px solid rgba(67, 250, 167, 0.35);
  background: rgba(67, 250, 167, 0.14);
  color: rgba(216, 255, 238, 0.98);
}

.ika-quiz-hub--dark .ika-quiz-card.is-started::after{
  content:"IN PROGRESS";
  position:absolute;
  top: 14px;
  right: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  border: 1px solid rgba(98,169,242,0.35);
  background: rgba(98,169,242,0.14);
  color: rgba(210,233,255,0.98);
}

.ika-quiz-hub--dark .ika-quiz-card.is-new::after{
  content:"NEW";
  position:absolute;
  top: 14px;
  right: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  border: 1px solid rgba(255,211,115,0.42);
  background: rgba(255,211,115,0.18);
  color: rgba(255,244,214,0.98);
}

/* =========================================================
   QUIZ CARDS — difficulty pill (clean + readable)
   ========================================================= */

.ika-quiz-hub--dark .ika-quiz-pill--diff{
  border-color: rgba(255,211,115,0.35) !important;
  background: rgba(255,211,115,0.12) !important;
  color: rgba(255,244,214,0.95) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

/* If Elementor is making the text blue/purple, force it */
.ika-quiz-hub--dark .ika-quiz-pill--diff,
.ika-quiz-hub--dark .ika-quiz-pill--diff *{
  color: rgba(255,244,214,0.95) !important;
}

/* =========================================================
   QUIZ HUB — align toolbar + cards to same width
   ========================================================= */

.ika-quiz-browse,
.ika-quiz-toolbar,
.elementor-loop-grid{
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure the toolbar doesn't stretch wider */
.ika-quiz-toolbar{
  width: 100% !important;
}

/* =========================================================
   QUIZ CARDS — remove button tray/well
   ========================================================= */

.ika-quiz-hub--dark .ika-btn-primary__cta{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin-top: 16px;
}

/* Keep button centered if you want that look */
.ika-quiz-hub--dark .ika-btn-primary__cta{
  display: flex;
  justify-content: center;
}

/* =========================================================
   QUIZ CARDS — FORCE BADGES LEFT (override Elementor)
   ========================================================= */

/* Badge row: always left */
.ika-quiz-hub--dark .ika-quiz-card__badges{
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: left !important;
  width: 100% !important;
}

/* If Elementor put the badges inside a centered container, force that container left */
.ika-quiz-hub--dark .ika-quiz-card__badges.elementor-widget,
.ika-quiz-hub--dark .ika-quiz-card__badges .elementor-widget-container,
.ika-quiz-hub--dark .ika-quiz-card__badges .e-con,
.ika-quiz-hub--dark .ika-quiz-card__badges .e-con-inner{
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Kill any auto-centering margins on the pill widgets */
.ika-quiz-hub--dark .ika-quiz-card__badges .ika-quiz-pill{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================================
   QUIZ CARDS — REMOVE BUTTON WELL / TRAY COMPLETELY
   ========================================================= */

.ika-quiz-hub--dark .ika-btn-primary__cta,
.ika-quiz-hub--dark .ika-btn-primary__cta .elementor-widget-container{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

/* If there is an inner wrapper around the button */
.ika-quiz-hub--dark .ika-btn-primary__cta .elementor-button-wrapper{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Keep button clean (you can keep a subtle shadow on the button if you like) */
.ika-quiz-hub--dark .ika-btn-primary__cta .elementor-button{
  box-shadow: 0 12px 28px rgba(0,0,0,0.35) !important;
}

/* Center it (since you like that) */
.ika-quiz-hub--dark .ika-btn-primary__cta{
  display: flex !important;
  justify-content: center !important;
}

/* =========================================================
   QUIZ CARDS — Difficulty pill (brighter gold)
   ========================================================= */

.ika-quiz-hub--dark .ika-quiz-pill--diff{
  border-color: rgba(255, 215, 130, 0.55);
  background: rgba(255, 215, 130, 0.22);
  color: rgba(255, 248, 230, 0.98);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 4px 14px rgba(255, 215, 130, 0.15);
}

/* =========================================================
   QUIZ CARDS — v3 polish
   1) Subtle hover pop (sheen + lift)
   2) Difficulty pill system (low emphasis)
   3) Status states (NEW / IN PROGRESS / COMPLETED) — Option C
   Paste at END of ika_master.css
   ========================================================= */

/* ---------- Base card polish (subtle “pop”) ---------- */

.ika-quiz-hub--dark .ika-quiz-card{
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ika-quiz-hub--dark .ika-quiz-card:hover{
  transform: translateY(-3px);
  border-color: rgba(98,169,242,0.22);
  box-shadow:
    0 22px 58px rgba(0,0,0,0.52),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Soft diagonal sheen (only visible on hover) */
.ika-quiz-hub--dark .ika-quiz-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(98,169,242,0.00) 0%,
    rgba(98,169,242,0.10) 28%,
    rgba(255,211,115,0.08) 55%,
    rgba(255,211,115,0.00) 80%
  );
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events:none;
}

.ika-quiz-hub--dark .ika-quiz-card:hover::before{
  opacity: .95;
  transform: translateY(0);
}

/* ---------- Pills: shared baseline ---------- */

.ika-quiz-hub--dark .ika-quiz-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Track pill stays a bit stronger */
.ika-quiz-hub--dark .ika-quiz-pill--track{
  border-color: rgba(98,169,242,0.40);
  background: rgba(98,169,242,0.14);
  color: rgba(210,233,255,0.95);
}

/* ---------- Difficulty pill system (LOW emphasis) ---------- */
/* Default difficulty pill: lighter + less glow (your request) */
.ika-quiz-hub--dark .ika-quiz-pill--diff{
  border-color: rgba(255,211,115,0.32);
  background: rgba(255,211,115,0.10);
  color: rgba(255,244,214,0.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); /* no outer glow */
}

/* Optional: specific difficulty variants (use later if you want)
   Add one of these classes to the difficulty pill:
   ika-quiz-pill--beginner / --intermediate / --advanced / --expert
*/
.ika-quiz-hub--dark .ika-quiz-pill--diff.ika-quiz-pill--beginner{
  border-color: rgba(255,211,115,0.32);
  background: rgba(255,211,115,0.10);
  color: rgba(255,244,214,0.92);
}

.ika-quiz-hub--dark .ika-quiz-pill--diff.ika-quiz-pill--intermediate{
  border-color: rgba(98,169,242,0.26);
  background: rgba(98,169,242,0.08);
  color: rgba(210,233,255,0.88);
}

.ika-quiz-hub--dark .ika-quiz-pill--diff.ika-quiz-pill--advanced{
  border-color: rgba(255,165,90,0.26);
  background: rgba(255,165,90,0.08);
  color: rgba(255,236,222,0.88);
}

.ika-quiz-hub--dark .ika-quiz-pill--diff.ika-quiz-pill--expert{
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.88);
}

/* ---------- Status system (Option C) ---------- */
/* These do nothing until you add classes later:
   .is-new / .is-started / .is-complete  on .ika-quiz-card
*/
.ika-quiz-hub--dark .ika-quiz-card.is-new{
  border-color: rgba(255,211,115,0.22);
}

.ika-quiz-hub--dark .ika-quiz-card.is-started{
  border-color: rgba(98,169,242,0.22);
}

.ika-quiz-hub--dark .ika-quiz-card.is-complete{
  border-color: rgba(67,250,167,0.22);
}

/* Status chip (top-right) */
.ika-quiz-hub--dark .ika-quiz-card.is-new::after,
.ika-quiz-hub--dark .ika-quiz-card.is-started::after,
.ika-quiz-hub--dark .ika-quiz-card.is-complete::after{
  position:absolute;
  top: 14px;
  right: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  content: "";
}

.ika-quiz-hub--dark .ika-quiz-card.is-new::after{
  content:"NEW";
  border-color: rgba(255,211,115,0.34);
  background: rgba(255,211,115,0.12);
  color: rgba(255,244,214,0.95);
}

.ika-quiz-hub--dark .ika-quiz-card.is-started::after{
  content:"IN PROGRESS";
  border-color: rgba(98,169,242,0.34);
  background: rgba(98,169,242,0.12);
  color: rgba(210,233,255,0.95);
}

.ika-quiz-hub--dark .ika-quiz-card.is-complete::after{
  content:"COMPLETED";
  border-color: rgba(67,250,167,0.34);
  background: rgba(67,250,167,0.12);
  color: rgba(216,255,238,0.98);
}

/* ==========================================================================
   QUIZ HUB — TOOLBAR + GRID WRAPPER (final alignment + spacing)
   Targets:
   - Toolbar: .ika-quiz-toolbar
   - Grid wrap: .ika-quiz-hub__gridwrap
   ========================================================================== */

/* 1) Make toolbar + grid share the SAME width */
.ika-quiz-toolbar,
.ika-quiz-hub__gridwrap{
  max-width: var(--ika-w-wide);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ika-pad-x);
  padding-right: var(--ika-pad-x);
  width: 100%;
}

/* 2) Reduce vertical spacing between hero → browse → toolbar → cards */
.ika-quiz-toolbar{
  margin-top: 16px;   /* was too tall */
  margin-bottom: 18px;
}

/* If your Browse section wrapper exists, this helps tighten it.
   (Safe: only affects this page if it’s inside your quiz hub wrapper.) */
.ika-quiz-hub .ika-browse,
.ika-quiz-hub .ika-browse-wrap,
.ika-quiz-hub .ika-browse-quizzes{
  margin-top: 18px;
  margin-bottom: 14px;
}

/* 3) Grid spacing (less scroll, still breathable) */
.ika-quiz-hub__gridwrap{
  padding-top: 8px;
  padding-bottom: 36px;
}

/* 4) Search input height + font size to match pills */
.ika-quiz-toolbar input[type="search"],
.ika-quiz-toolbar input[type="text"]{
  font-size: 12px;          /* match pill text */
  line-height: 1;
  height: 40px;             /* slightly smaller than before */
  padding: 0 14px;
  border-radius: 999px;
}

/* Search button height + rounded corners to match */
.ika-quiz-toolbar button,
.ika-quiz-toolbar .ika-search-btn,
.ika-quiz-toolbar input[type="submit"]{
  height: 40px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.06em;
}

/* 5) Mobile: keep it one “system”, then stack gracefully */
@media (max-width: 768px){
  .ika-quiz-toolbar{
    margin-top: 12px;
    margin-bottom: 14px;
  }

  .ika-quiz-toolbar input[type="search"],
  .ika-quiz-toolbar input[type="text"],
  .ika-quiz-toolbar button,
  .ika-quiz-toolbar .ika-search-btn,
  .ika-quiz-toolbar input[type="submit"]{
    height: 38px;
  }
}

@media (max-width: 520px){
  /* If it must wrap, wrap cleanly: pills row first, search row second */
  .ika-quiz-toolbar{
    gap: 10px;
  }
}

/* =========================================================
   QUIZ HUB — TAXONOMY PILL HEIGHT FIX (FINAL OVERRIDE)
   Paste at VERY END of ika_master.css
   Targets: Elementor Taxonomy Filter items inside toolbar
   ========================================================= */

/* 1) Force the filter row to not stretch items */

/* 2) Make pills shorter + more “pill” than “oval” */
.ika-quiz-toolbar .ika-quiz-hub__filter .e-filter-item{
  /* lock pill shape */
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* reduce height */
  padding: 6px 12px !important;     /* was ~10px 14px */
  line-height: 1 !important;
  min-height: 32px !important;      /* keeps consistent pill height */
  height: 32px !important;          /* hard lock (remove if you prefer flexible) */

  /* keep your typography consistent */
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;

  /* prevent “fat” pills from wrapping text */
  white-space: nowrap !important;
}

/* 3) Slightly tighter on small screens */
@media (max-width: 520px){
  .ika-quiz-toolbar .ika-quiz-hub__filter .e-filter-item{
    min-height: 30px !important;
    height: 30px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
}

/* =========================================================
   QUIZ HUB — TOOLBAR HEIGHT SYNC (PILLS + SEARCH)
   Final, compact, aligned
   ========================================================= */

/* --- Shared height token (single source of truth) --- */
:root{
  --ika-toolbar-pill-height: 28px;
}

/* Ensure toolbar row doesn't stretch items */
.ika-quiz-toolbar .ika-quiz-hub__filter .e-filter{
  align-items: center !important;
}

/* =========================
   TAXONOMY PILLS
   ========================= */
.ika-quiz-toolbar .ika-quiz-hub__filter .e-filter-item{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: var(--ika-toolbar-pill-height) !important;
  min-height: var(--ika-toolbar-pill-height) !important;
  padding: 0 12px !important;

  border-radius: 999px !important;
  line-height: 1 !important;

  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;

  white-space: nowrap !important;
}

/* =========================
   SEARCH INPUT
   ========================= */
.ika-quiz-toolbar input[type="search"],
.ika-quiz-toolbar .ika-quiz-search-input{
  height: var(--ika-toolbar-pill-height) !important;
  min-height: var(--ika-toolbar-pill-height) !important;

  padding: 0 14px !important;
  line-height: 1 !important;

  font-size: 11px !important;
  border-radius: 999px !important;
}

/* =========================
   SEARCH BUTTON
   ========================= */
.ika-quiz-toolbar .ika-quiz-search-btn,
.ika-quiz-toolbar button[type="submit"]{
  height: var(--ika-toolbar-pill-height) !important;
  min-height: var(--ika-toolbar-pill-height) !important;

  padding: 0 16px !important;
  border-radius: 999px !important;

  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* =========================
   MOBILE TWEAK
   ========================= */
@media (max-width: 520px){
  :root{
    --ika-toolbar-pill-height: 26px;
  }
}

/* =========================================================
   QUIZ HUB — MOBILE STACKED TOOLBAR (FINAL)
   ========================================================= */

@media (max-width: 820px){

  /* Stack toolbar vertically */
  .ika-quiz-toolbar{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* --- SEARCH ROW (TOP) --- */
  .ika-quiz-toolbar__right{
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .ika-quiz-toolbar__right input[type="search"]{
    flex: 1 1 auto !important;
    width: 100% !important;
  }

  .ika-quiz-toolbar__right button{
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* --- PILLS ROW (BOTTOM) --- */
  .ika-quiz-toolbar__left{
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
}

/* Extra-small phones */
@media (max-width: 520px){
  .ika-quiz-toolbar{
    gap: 10px !important;
  }

  .ika-quiz-toolbar__left{
    gap: 7px !important;
  }
}

/* --------------------------------------------------------------------- */
/* Recommendations rail (base, site-wide)                                */
/* --------------------------------------------------------------------- */

.ika-rec-rail{
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--qo-color-border-app-soft);
  padding: var(--ika-space-md, 16px);
}

.ika-rec-rail__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: var(--ika-space-md, 16px);
  margin-bottom: var(--ika-space-md, 16px);
}

.ika-rec-rail__label{
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}

.ika-rec-rail__desc{
  margin: 6px 0 0 0;
  opacity: 0.78;
  line-height: 1.35;
}

.ika-rec-rail__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ika-space-md, 16px);
}

@media (max-width: 980px){
  .ika-rec-rail__grid{ grid-template-columns: 1fr; }
}

.ika-rec-card{
  position: relative;
  display:block;
  text-decoration:none;
  color: inherit;
  border-radius: 16px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--qo-color-border-app-soft);
  padding: var(--ika-space-md, 16px);
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.ika-rec-card:hover{
  transform: translateY(-1px);
  border-color: rgba(98,169,242,0.35);
  background: rgba(0,0,0,0.30);
}

.ika-rec-card__type{
  display:inline-flex;
  align-items:center;
  height: 20px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  opacity: 0.9;
  margin-bottom: 10px;
}

.ika-rec-card__title{
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
}

.ika-rec-card__meta{
  opacity: 0.78;
  line-height: 1.35;
  margin-bottom: 12px;
}

.ika-rec-card__cta{
  font-weight: 700;
  opacity: 0.92;
}

/* --------------------------------------------------------------------- */



/* Recommendation rail: empty state */
.ika-rec-empty{
  border: 1px dashed rgba(98,169,242,0.35);
  border-radius: 16px;
  padding: 18px 16px;
  background: rgba(13,19,31,0.35);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ika-rec-empty__title{
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.ika-rec-empty__desc{
  opacity: 0.85;
  font-size: 0.95em;
  line-height: 1.35;
}



/* -------------------------------------------------------------------------
   Recs v7 Card Polish (Option A1/A3 friendly)
   - Slightly richer cards with consistent chips and "why" line.
   - Also aligns Mission cards with chip styling.
   ------------------------------------------------------------------------- */

.ika-rec-rail__grid {
  gap: 18px;
}

.ika-rec-card {
  position: relative;
  display: block;
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid var(--qo-color-border-app-soft);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.015));
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  overflow: hidden;
}

.ika-rec-card:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  background: radial-gradient(1200px 220px at 20% 0%, rgba(98,169,242,0.22), transparent 55%);
  opacity: .55;
}

.ika-rec-card:hover {
  transform: translateY(-2px);
  border-color: rgba(98,169,242,0.22);
  box-shadow: 0 14px 40px rgba(0,0,0,0.42);
}

.ika-rec-card__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  letter-spacing: .08em;
  font-size: 12px;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(13,19,31,0.55);
  color: rgba(255,255,255,0.88);
  margin-bottom: 10px;
}

.ika-rec-card--briefing .ika-rec-card__type { border-color: rgba(255,211,115,0.22); }
.ika-rec-card--course   .ika-rec-card__type { border-color: rgba(98,169,242,0.22); }

.ika-rec-card__title {
  font-size: 22px;
  line-height: 1.15;
  margin: 0 0 8px;
}

.ika-rec-card__meta {
  font-size: 14px;
  opacity: .82;
  margin-bottom: 8px;
}

.ika-rec-card__why {
  font-size: 13px;
  opacity: .72;
  margin-bottom: 14px;
}

.ika-rec-card__cta {
  margin-top: auto;
  font-weight: 700;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ika-rec-card__cta:after{
  content: "→";
  opacity: .8;
  transform: translateY(-1px);
}


/* Recommendation card status chip (data-first, no behavior changes)
   Uses data-state and ika-rec-card--state-* class hooks.
   States: new | in_progress | completed | locked | unknown */
.ika-rec-card[data-state]::after,
.ika-rec-card[class*="ika-rec-card--state-"]::after{
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  background: rgba(13,19,31,0.72);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 18px rgba(0,0,0,0.30);
  pointer-events: none;
  z-index: 2;
}

/* QuizOps Track Card: avoid duplicate top-right status chip (keep left chip only) */
.quizops-track-card::after{ display:none !important; content:none !important; }

/* NEW */
.ika-rec-card[data-state="new"]::after,
.ika-rec-card--state-new::after{
  content: "NEW";
  background: var(--ika-chip-new-bg);
  border-color: var(--ika-chip-new-border);
  color: var(--ika-chip-new-text);
}

/* IN PROGRESS */
.ika-rec-card[data-state="in_progress"]::after,
.ika-rec-card--state-in_progress::after{
  content: "IN PROGRESS";
  background: var(--ika-chip-progress-bg);
  border-color: var(--ika-chip-progress-border);
  color: var(--ika-chip-progress-text);
}

/* COMPLETED */
.ika-rec-card[data-state="completed"]::after,
.ika-rec-card--state-completed::after{
  content: "COMPLETED";
  background: var(--ika-chip-complete-bg);
  border-color: var(--ika-chip-complete-border);
  color: var(--ika-chip-complete-text);
}

/* LOCKED */
.ika-rec-card[data-state="locked"]::after,
.ika-rec-card--state-locked::after{
  content: "LOCKED";
  border-color: rgba(255,255,255,0.12);
  opacity: .92;
}

/* UNKNOWN */
.ika-rec-card[data-state="unknown"]::after,
.ika-rec-card--state-unknown::after{
  content: "";
  display: none;
}

/* Mission chips: reuse the same pill feel */
.ika-mission-card__label,
.ika-mission-label,
.ika-mission-pill {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  letter-spacing: .08em;
  font-size: 11px;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(13,19,31,0.55);
  color: rgba(255,255,255,0.88);
}

/* Slightly richer mission card hover to match recs */
.ika-mission-card {
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ika-mission-card:hover{
  transform: translateY(-2px);
  border-color: rgba(98,169,242,0.18);
  box-shadow: 0 12px 34px rgba(0,0,0,0.40);
}

/* =========================================================
   STATUS CHIP BINDINGS — Missions (tokenized, EOF override)
   Purpose:
   - Replaces the temporary hard-coded RGBA “Mission Chip Force” patch.
   - Ensures Flight Deck mission state chips use the platform chip tokens.
   Notes:
   - Mission chips intentionally live in the footer (variant-specific).
   - EOF placement + !important ensures these win the cascade.
   ========================================================= */

.ika-fd-missions-preview .ika-dm-card[data-state="new"] .ika-dm-card-state,
.ika-dm-card[data-state="new"] .ika-dm-card-state{
  background: var(--ika-chip-new-bg) !important;
  border: 1px solid var(--ika-chip-new-border) !important;
  color: var(--ika-chip-new-text) !important;
}

.ika-fd-missions-preview .ika-dm-card[data-state="in_progress"] .ika-dm-card-state,
.ika-dm-card[data-state="in_progress"] .ika-dm-card-state{
  background: var(--ika-chip-progress-bg) !important;
  border: 1px solid var(--ika-chip-progress-border) !important;
  color: var(--ika-chip-progress-text) !important;
}

.ika-fd-missions-preview .ika-dm-card[data-state="completed"] .ika-dm-card-state,
.ika-dm-card[data-state="completed"] .ika-dm-card-state{
  background: var(--ika-chip-complete-bg) !important;
  border: 1px solid var(--ika-chip-complete-border) !important;
  color: var(--ika-chip-complete-text) !important;
}

/* =========================================================
   STATUS CHIP BINDINGS — Badges (Flight Deck preview)
   States:
   - earned      -> COMPLETE token (green)
   - locked      -> NEW token (amber)
   - in_progress -> PROGRESS token (blue) [future-ready]
   ========================================================= */

.ika-fd-badge-card[data-state="earned"] .ika-fd-badge-chip,
.ika-fd-badge-card--state-earned .ika-fd-badge-chip{
  background: var(--ika-chip-complete-bg) !important;
  border: 1px solid var(--ika-chip-complete-border) !important;
  color: var(--ika-chip-complete-text) !important;
}

.ika-fd-badge-card[data-state="locked"] .ika-fd-badge-chip,
.ika-fd-badge-card--state-locked .ika-fd-badge-chip{
  background: var(--ika-chip-new-bg) !important;
  border: 1px solid var(--ika-chip-new-border) !important;
  color: var(--ika-chip-new-text) !important;
}

.ika-fd-badge-card[data-state="in_progress"] .ika-fd-badge-chip,
.ika-fd-badge-card--state-in_progress .ika-fd-badge-chip{
  background: var(--ika-chip-progress-bg) !important;
  border: 1px solid var(--ika-chip-progress-border) !important;
  color: var(--ika-chip-progress-text) !important;
}



/* ==========================================================
   Flight Deck Workspace Layout Fix
   Scope dark background to content only (not header)
   ========================================================== */

/* Remove any body-level dark enforcement */
body.ika-fd-layout--workspace {
    background: unset !important;
}

/* Apply full-dark background ONLY to Flight Deck workspace content */
body.ika-fd-layout--workspace .ika-scope-flightdeck {
    background: var(--qo-color-bg-page-app);
    min-height: 100vh;
}

/* Explicitly protect global header / nav from dark background */
body.ika-fd-layout--workspace header,
body.ika-fd-layout--workspace .site-header,
body.ika-fd-layout--workspace .elementor-location-header,
body.ika-fd-layout--workspace .elementor-location-header * {
    background: transparent !important;
}


/* ==========================================================
   B5: Badges page back-link typography alignment
   Ensure matches Flight Deck hub section-link sizing
   (EOF override, high-specificity)
   ========================================================== */

.ika-scope-flightdeck.ika-fd--badges a.ika-fd-back-link,
.ika-scope-flightdeck.ika-fd--badges .ika-fd-back-link {
  font-size: var(--ika-section-link-size, 15px) !important;
  font-weight: var(--ika-section-link-weight, 600) !important;
  line-height: 1.2;
}


/* =========================================================
   QuizOps Track Card — Certificate Status Chip (Option B)
   - Adds a second chip under the main COMPLETED chip when data-cert is present.
   - data-cert="earned"    => certificate requirements met
   - data-cert="not_yet"   => track complete, certificate not yet earned
   ========================================================= */
.quizops-track-card[data-cert]::before{
  content: "";
  position: absolute;
  top: 44px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(13,19,31,0.72);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 18px rgba(0,0,0,0.30);
  pointer-events: none;
  z-index: 2;
}

/* ==========================================================================
   QuizOps Track Card — Certificate Chip (v2)
   - Uses real markup element (.quizops-cert-chip), no pseudo-element overlap
   - Option B: main state chip stays "COMPLETED" for both completed states
   ========================================================================== */
.quizops-track-card .quizops-track-card__chips{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.quizops-track-card .quizops-cert-chip{
  display:inline-flex;
  align-items:center;
  height:20px;
  padding:0 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  background: rgba(13,19,31,0.72);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 18px rgba(0,0,0,0.30);
}

.quizops-track-card .quizops-cert-chip--earned{
  color: rgba(255,233,182,0.95);
  border-color: rgba(255,211,115,0.48);
  background: rgba(24,33,50,0.78);
}

.quizops-track-card .quizops-cert-chip--not_yet{
  color: rgba(255,255,255,0.88);
  border-color: rgba(255,211,115,0.26);
  background: rgba(13,19,31,0.68);
}


/* ========================================================================== 
   Phase 11.5 – Track cert chip alignment (v5)
   Fix: normalize chip metrics AND preserve spacing so the divider/title area never overlaps.
   ========================================================================== */
.quizops-track-card .quizops-track-card__chips{
  /* keep existing flex settings from v2; just ensure there's breathing room */
  margin-bottom: 10px;
}

.quizops-track-card .quizops-track-card__chips .ika-rec-card__type,
.quizops-track-card .quizops-track-card__chips .quizops-cert-chip{
  margin: 0 !important;
  height: 20px;
  line-height: 20px;
  display: inline-flex;
  align-items: center;
}


/* =========================================================
   UX Alignment Pass 2.3 — Shared Card / Status Consolidation
   Scope:
   - Quiz Hub cards
   - Shared recommendation cards outside results-specific layout overrides
   - Shared hover/focus/card hierarchy tokens on the dark product shell
   Notes:
   - Additive EOF override only.
   - Results rail keeps its own layout spacing in quizops_results_ui.css.
   ========================================================= */
:root{
  --ika-card-dark-bg: var(--qo-color-bg-surface-app-elevated);
  --ika-card-dark-border: var(--qo-color-border-app);
  --ika-card-dark-border-strong: var(--qo-color-border-app-strong);
  --ika-card-dark-shadow: var(--qo-shadow-app-card);
  --ika-card-dark-shadow-hover: var(--qo-shadow-app-card-hover);
  --ika-card-dark-radius: var(--qo-radius-card-app);
  --ika-card-dark-meta: var(--qo-color-text-app-muted);
  --ika-card-dark-meta-soft: var(--qo-color-text-app-soft);
}

.ika-quiz-hub--dark .ika-quiz-card,
.ika-rec-card{
  border-radius: var(--ika-card-dark-radius);
  background: var(--ika-card-dark-bg);
  border-color: var(--ika-card-dark-border);
  box-shadow: var(--ika-card-dark-shadow);
}

.ika-quiz-hub--dark .ika-quiz-card:hover,
.ika-quiz-hub--dark .ika-quiz-card:focus-within,
.ika-rec-card:hover,
.ika-rec-card:focus-visible,
.ika-rec-card:focus-within{
  border-color: var(--ika-card-dark-border-strong);
  box-shadow: var(--ika-card-dark-shadow-hover);
  transform: translateY(-2px);
}

.ika-rec-card:focus-visible,
.ika-quiz-hub--dark .ika-quiz-card:focus-within{
  outline: none;
}

.ika-rec-card__type,
.quizops-track-card .quizops-cert-chip,
.ika-quiz-hub--dark .ika-quiz-pill{
  min-height: 22px;
  font-weight: 800;
  letter-spacing: .06em;
}

.ika-quiz-hub--dark .ika-quiz-card__title,
.ika-rec-card__title{
  color: rgba(255,255,255,0.96);
}

.ika-quiz-hub--dark .ika-quiz-card__meta,
.ika-quiz-hub--dark .ika-quiz-card__desc,
.ika-rec-card__meta{
  color: var(--ika-card-dark-meta);
}

.ika-rec-card__why{
  color: var(--ika-card-dark-meta-soft);
}

.ika-rec-card__cta,
.ika-quiz-hub--dark .ika-quiz-card__cta{
  color: rgba(255,255,255,0.92);
}

.ika-quiz-hub--dark .ika-quiz-card.is-new,
.ika-quiz-hub--dark .ika-quiz-card.is-started,
.ika-quiz-hub--dark .ika-quiz-card.is-complete{
  border-color: var(--ika-card-dark-border);
}

.ika-quiz-hub--dark .ika-quiz-card.is-new::after,
.ika-quiz-hub--dark .ika-quiz-card.is-started::after,
.ika-quiz-hub--dark .ika-quiz-card.is-complete::after{
  top: 14px;
  right: 14px;
  min-height: 22px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  box-shadow: 0 8px 18px rgba(0,0,0,0.30);
}

.ika-quiz-hub--dark .ika-quiz-card.is-new::after{
  background: var(--ika-chip-new-bg);
  border-color: var(--ika-chip-new-border);
  color: var(--ika-chip-new-text);
}

.ika-quiz-hub--dark .ika-quiz-card.is-started::after{
  background: var(--ika-chip-progress-bg);
  border-color: var(--ika-chip-progress-border);
  color: var(--ika-chip-progress-text);
}

.ika-quiz-hub--dark .ika-quiz-card.is-complete::after{
  background: var(--ika-chip-complete-bg);
  border-color: var(--ika-chip-complete-border);
  color: var(--ika-chip-complete-text);
}



/* =========================================================
   UX Alignment Pass 2.4 — Shared Interaction / Spacing Polish
   Scope:
   - Quiz hub cards
   - Shared recommendation cards / Flight Deck recommendation panels
   - Keyboard focus visibility + hover/active parity
   - Minor internal spacing/text rhythm cleanup on dark-shell cards
   Notes:
   - Additive EOF override only.
   ========================================================= */
:root{
  --ika-card-dark-focus-ring: var(--qo-focus-ring-app);
}

.ika-quiz-hub--dark .ika-quiz-card,
.ika-rec-card{
  transition:
    transform .14s ease,
    border-color .14s ease,
    box-shadow .14s ease,
    background .14s ease;
}

.ika-quiz-hub--dark .ika-quiz-card:hover,
.ika-quiz-hub--dark .ika-quiz-card:focus-within,
.ika-rec-card:hover,
.ika-rec-card:focus-visible,
.ika-rec-card:focus-within{
  transform: translateY(-2px);
}

.ika-quiz-hub--dark .ika-quiz-card:active,
.ika-rec-card:active{
  transform: translateY(-1px);
}

.ika-quiz-hub--dark .ika-quiz-card:focus-within,
.ika-rec-card:focus-visible,
.ika-rec-card:focus-within{
  outline: none;
  box-shadow: var(--ika-card-dark-shadow-hover), var(--ika-card-dark-focus-ring);
}

.ika-quiz-hub--dark .ika-quiz-card .e-con-inner{
  gap: 10px;
}

.ika-quiz-hub--dark .ika-quiz-card__badges,
.ika-rec-card__chips,
.quizops-track-card .quizops-track-card__chips{
  gap: 8px;
}

.ika-quiz-hub--dark .ika-quiz-card__badges{
  margin-bottom: 2px;
}

.ika-quiz-hub--dark .ika-quiz-card__title,
.ika-rec-card__title{
  margin: 0;
}

.ika-quiz-hub--dark .ika-quiz-card__desc{
  margin: -2px 0 0;
  line-height: 1.48;
}

.ika-quiz-hub--dark .ika-quiz-card__meta,
.ika-rec-card__meta{
  margin: 0;
  line-height: 1.42;
}

.ika-rec-card__why{
  margin: 0;
  line-height: 1.44;
}

.ika-rec-card__cta,
.ika-quiz-hub--dark .ika-quiz-card__cta{
  margin-top: auto;
  padding-top: 10px;
}

.ika-rec-card__type,
.quizops-track-card .quizops-cert-chip,
.ika-quiz-hub--dark .ika-quiz-pill,
.ika-quiz-hub--dark .ika-quiz-card.is-new::after,
.ika-quiz-hub--dark .ika-quiz-card.is-started::after,
.ika-quiz-hub--dark .ika-quiz-card.is-complete::after,
.ika-rec-card[data-state]::after,
.ika-rec-card[class*="ika-rec-card--state-"]::after{
  min-height: 22px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.quizops-track-card .quizops-track-card__chips .ika-rec-card__type,
.quizops-track-card .quizops-track-card__chips .quizops-cert-chip{
  min-height: 22px;
  height: auto;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce){
  .ika-quiz-hub--dark .ika-quiz-card,
  .ika-rec-card{
    transition: border-color .01s linear, box-shadow .01s linear, background .01s linear;
  }

  .ika-quiz-hub--dark .ika-quiz-card:hover,
  .ika-quiz-hub--dark .ika-quiz-card:focus-within,
  .ika-quiz-hub--dark .ika-quiz-card:active,
  .ika-rec-card:hover,
  .ika-rec-card:focus-visible,
  .ika-rec-card:focus-within,
  .ika-rec-card:active{
    transform: none;
  }
}


/* =========================================================
   UX Alignment Pass 2.5 — Product Shell / Section Rhythm Polish
   Scope:
   - Shared product-shell section heads / Flight Deck panels / rec rails
   - Outer spacing rhythm above the individual card layer
   Notes:
   - Additive EOF override only.
   ========================================================= */
:root{
  --ika-shell-section-gap: 24px;
  --ika-shell-section-gap-tight: 18px;
  --ika-shell-section-gap-loose: 32px;
  --ika-shell-head-title-size: 24px;
  --ika-shell-head-kicker-size: 14px;
}

.ika-hub-section-head,
.ika-rec-rail__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
}

.ika-hub-section-head{
  margin:0 0 var(--ika-shell-section-gap) 0;
}

.ika-hub-section-head__text,
.ika-rec-rail__head-left{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.ika-hub-section-title,
.ika-rec-rail__title{
  margin:0;
  font-size:var(--ika-shell-head-title-size);
  line-height:1.12;
  font-weight:800;
  color:var(--qo-color-text-app);
}

.ika-hub-section-kicker,
.ika-rec-rail__sub,
.ika-rec-rail__desc{
  margin:0;
  font-size:var(--ika-shell-head-kicker-size);
  line-height:1.5;
  color:var(--qo-color-text-app-muted);
}

.ika-hub-section-link,
.ika-recnext__cta{
  align-self:flex-start;
  line-height:1.2;
}

.ika-fd-flightlog-preview,
.ika-fd-missions-preview,
.ika-fd-levels-preview,
.ika-fd-badges-preview,
.ika-rec-rail,
.ika-recnext,
.quizops-track-card{
  margin:0;
}

.ika-rec-rail{
  padding:20px;
}

.ika-rec-rail__head{
  margin:0 0 var(--ika-shell-section-gap-tight) 0;
}

.ika-recnext{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ika-recnext__label,
.ika-rec-rail__label{
  margin:0;
}

.ika-recnext__title{
  margin:0;
  font-size:24px;
  line-height:1.14;
  font-weight:800;
  color:var(--qo-color-text-app);
}

.ika-recnext__reason{
  margin:0;
  line-height:1.5;
  color:var(--qo-color-text-app-subtle);
}

@media (max-width: 767px){
  :root{
    --ika-shell-section-gap: 20px;
    --ika-shell-section-gap-tight: 16px;
    --ika-shell-section-gap-loose: 26px;
    --ika-shell-head-title-size: 22px;
    --ika-shell-head-kicker-size: 13px;
  }

  .ika-hub-section-head,
  .ika-rec-rail__head{
    gap:12px;
  }

  .ika-hub-section-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .ika-rec-rail{
    padding:18px;
  }
}


/* =========================================================
   UX Alignment Pass 2.6 — Product Shell / Typography Finish
   Scope:
   - Shared section heads / recommendation rails / Flight Deck next
   - Typography-only hierarchy normalization above card level
   Notes:
   - Additive EOF override only.
   ========================================================= */
:root{
  --ika-shell-head-title-size: clamp(22px, 2.2vw, 26px);
  --ika-shell-head-kicker-size: 13px;
  --ika-shell-support-size: 15px;
  --ika-shell-support-line: 1.58;
}

.ika-hub-section-title,
.ika-rec-rail__title,
.ika-rec-rail__label{
  margin:0;
  font-size:var(--ika-shell-head-title-size);
  line-height:1.14;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--qo-color-text-app);
}

.ika-hub-section-kicker,
.ika-rec-rail__sub,
.ika-rec-rail__desc,
.ika-recnext__reason{
  margin:0;
  font-size:var(--ika-shell-support-size);
  line-height:var(--ika-shell-support-line);
  color:var(--qo-color-text-app-subtle);
}

.ika-recnext__label{
  margin:0;
  font-size:12px;
  line-height:1.25;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--qo-color-text-app-soft);
}

.ika-recnext__title{
  margin:0;
  font-size:clamp(24px, 2.4vw, 28px);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--qo-color-text-app);
}

@media (max-width: 767px){
  :root{
    --ika-shell-head-title-size: clamp(20px, 6vw, 23px);
    --ika-shell-head-kicker-size: 12px;
    --ika-shell-support-size: 14px;
  }

  .ika-recnext__label{
    font-size:11px;
    letter-spacing:0.11em;
  }
}

/* =========================================================
   UX Alignment Pass 2.7 — Product Surface QA / Edge-State Finish
   Scope:
   - Shared product-shell section heads / recommendation rails / sparse states
   - Long-copy wrapping, CTA row resilience, and small-screen edge cases
   Notes:
   - Additive EOF override only.
   ========================================================= */
.ika-hub-section-head__text,
.ika-rec-rail__head-left,
.ika-rec-empty,
.ika-rec-empty__title,
.ika-rec-empty__desc,
.ika-rec-card__title,
.ika-rec-card__meta,
.ika-rec-card__why,
.ika-recnext__title,
.ika-recnext__reason,
.ika-hub-section-title,
.ika-hub-section-kicker,
.ika-rec-rail__title,
.ika-rec-rail__desc,
.ika-rec-rail__label,
.ika-empty{
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

.ika-rec-rail__head,
.ika-hub-section-head{
  row-gap: 10px;
}

.ika-hub-section-link,
.ika-recnext__cta{
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

.ika-rec-card,
.quizops-track-card,
.ika-fd-flightlog-preview,
.ika-fd-missions-preview,
.ika-fd-levels-preview,
.ika-fd-badges-preview{
  min-width: 0;
}

.ika-rec-card__title{
  text-wrap: balance;
}

.ika-rec-card__meta,
.ika-rec-card__why,
.ika-rec-empty__desc,
.ika-recnext__reason,
.ika-hub-section-kicker,
.ika-rec-rail__desc,
.ika-empty{
  max-width: 72ch;
}

.ika-rec-empty,
.ika-empty{
  margin-top: 0;
}

@media (max-width: 900px){
  .ika-rec-rail__head{
    align-items: flex-start;
  }
}

@media (max-width: 767px){
  .ika-rec-card{
    padding: 16px 16px 15px;
  }

  .ika-rec-card[data-state]::after,
  .ika-rec-card[class*="ika-rec-card--state-"]::after{
    position: static;
    margin: 0 0 10px 0;
    width: fit-content;
    max-width: 100%;
  }

  .ika-rec-card__type{
    margin-bottom: 8px;
    max-width: 100%;
    white-space: normal;
  }

  .ika-rec-card__title{
    font-size: clamp(20px, 6vw, 23px);
    line-height: 1.16;
  }

  .ika-rec-card__cta,
  .ika-recnext__cta,
  .ika-hub-section-link{
    overflow-wrap: anywhere;
  }
}

/* =========================================================
   UX Alignment Pass 2.8 — Final Product Surface Closeout Audit
   Scope:
   - Final shared sparse-state seam cleanup on core product surfaces
   - Flight Deck preview empty-state alignment with shared shell language
   Notes:
   - Additive EOF override only.
   ========================================================= */
.ika-fd-flightlog-empty,
.ika-fd-flightlog-empty__title,
.ika-fd-flightlog-empty__meta{
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

.ika-fd-flightlog-empty{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--qo-color-border-app-soft);
  background: linear-gradient(180deg, var(--qo-color-surface-glass-app), rgba(255,255,255,0.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.ika-fd-flightlog-empty__title{
  margin: 0;
  font-size: 18px;
  line-height: 1.24;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--qo-color-text-app-strong);
  text-wrap: balance;
}

.ika-fd-flightlog-empty__meta{
  margin: 0;
  max-width: 64ch;
  font-size: 14px;
  line-height: 1.58;
  color: rgba(214,226,247,0.76);
}

.ika-fd-flightlog-empty .ika-hub-section-link{
  margin-top: 2px;
}

@media (max-width: 640px){
  .ika-fd-flightlog-empty{
    padding: 16px;
  }

  .ika-fd-flightlog-empty__title{
    font-size: clamp(18px, 5.8vw, 20px);
  }
}