:root{
  --stage-bg:#f6ead8;
  --stage-text:#1f2937;
  --stage-muted:#6b7280;

  --stage-primary:#8b2f2f;
  --stage-primary-2:#a33a43;
  --stage-primary-3:#c44d57;

  --stage-blue:#3994c9;
  --stage-blue-2:#54afe3;

  --stage-gold:#f3c96a;
  --stage-gold-2:#efbc42;

  --stage-card:rgba(255,255,255,.92);
  --stage-card-strong:rgba(255,255,255,.97);
  --stage-line:rgba(139,47,47,.10);
  --stage-shadow:0 18px 40px rgba(0,0,0,.16);
  --stage-radius:24px;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  min-height:100%;
}

body.stageApp{
  font-family:'Alexandria',sans-serif;
  background:var(--stage-bg);
  color:var(--stage-text);
}

/* ========= Stage Shell ========= */
.stageShell{
  position:relative;
  min-height:100vh;
  overflow-x:hidden;
  isolation:isolate;
}

.stageBackdrop{
  position:fixed;
  inset:0;
  background:url('/assets/img/arabimasra7.webp') center/cover no-repeat;
  z-index:0;
}

.stageGlow{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,245,200,.20), transparent 28%),
    linear-gradient(to bottom, rgba(0,0,0,.05), rgba(0,0,0,.18));
}

.stageDust{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.55;
}

.stageDust::before,
.stageDust::after{
  content:"";
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(4px 4px at 15% 20%, rgba(255,255,255,.35) 0 60%, transparent 61%),
    radial-gradient(5px 5px at 75% 25%, rgba(255,244,190,.28) 0 60%, transparent 61%),
    radial-gradient(4px 4px at 60% 70%, rgba(255,255,255,.22) 0 60%, transparent 61%),
    radial-gradient(5px 5px at 35% 55%, rgba(255,226,160,.18) 0 60%, transparent 61%);
  animation:stageDustMove 14s linear infinite;
}

.stageDust::after{
  opacity:.45;
  animation-duration:20s;
}

@keyframes stageDustMove{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-12px); }
  100%{ transform:translateY(0); }
}

/* ========= Shared Topbar ========= */
.stageTopBar{
  position:relative;
  z-index:20;
  width:min(1180px, calc(100vw - 20px));
  margin:0 auto;
  padding:14px 0 0;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}

.stageBrand{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  color:#7b2626;
  font-size:15px;
  font-weight:800;
}

.stageTopBar__actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.topChip{
  border:1px solid rgba(255,255,255,.55);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,245,245,.92));
  color:#2a2018;
  padding:10px 15px;
  min-height:44px;
  border-radius:16px;
  box-shadow:0 10px 20px rgba(0,0,0,.10);
  cursor:pointer;
  transition:.2s ease;
  position:relative;
  overflow:hidden;
  font-size:14px;
  text-decoration:none;
  font-family:'Alexandria',sans-serif;
  font-weight:800;
}

.topChip:hover{
  transform:translateY(-2px);
}

/* ========= Layout ========= */
.stagePage{
  position:relative;
  z-index:5;
  width:min(1180px, calc(100vw - 20px));
  margin:0 auto;
  padding:22px 0 30px;
}

.stagePanel{
  background:var(--stage-card);
  border:1px solid var(--stage-line);
  border-radius:var(--stage-radius);
  box-shadow:var(--stage-shadow);
  backdrop-filter:blur(10px);
}

.stagePanel--soft{
  background:rgba(255,255,255,.88);
}

/* ========= Section Head ========= */
.stageSectionHead{
  text-align:center;
  color:#fff;
  margin:12px auto 16px;
  text-shadow:0 6px 18px rgba(0,0,0,.26);
}

.stageSectionHead__title{
  margin:0;
  font-family:'Baloo Bhaijaan 2',cursive;
  font-size:clamp(34px, 4.2vw, 58px);
  line-height:1.2;
}

.stageSectionHead__sub{
  margin:10px auto 0;
  max-width:760px;
  font-size:17px;
  line-height:1.9;
  font-weight:700;
}

/* ========= Shared Buttons ========= */
.stageBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:54px;
  padding:14px 18px;
  border-radius:18px;
  font-size:16px;
  cursor:pointer;
  box-shadow:0 14px 28px rgba(0,0,0,.16);
  transition:.2s ease;
  text-decoration:none;
  border:none;
  font-family:'Alexandria',sans-serif;
  font-weight:800;
}

.stageBtn:hover{
  transform:translateY(-2px);
}

.stageBtn--primary{
  background:linear-gradient(135deg,#a33a43,#c44d57);
  color:#fff;
}

.stageBtn--blue{
  background:linear-gradient(135deg,#3994c9,#54afe3);
  color:#fff;
}

.stageBtn--gold{
  background:linear-gradient(135deg,#f4cd69,#efbc42);
  color:#3a2d14;
}

.stageBtn--ghost{
  background:rgba(255,255,255,.95);
  color:#5b3220;
  border:1px solid rgba(139,47,47,.10);
}

/* ========= Bubble ========= */
.stageBubbleCard{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,248,248,.95));
  border-radius:24px;
  padding:16px 18px;
  box-shadow:0 16px 36px rgba(0,0,0,.12);
  border:1px solid rgba(139,47,47,.08);
}

.stageBubbleCard::after{
  content:"";
  position:absolute;
  bottom:-14px;
  right:52px;
  border-width:14px 12px 0 12px;
  border-style:solid;
  border-color:rgba(255,255,255,.96) transparent transparent transparent;
}

.stageBubbleCard__title{
  font-weight:900;
  color:#7b2626;
  margin:0 0 6px;
  font-size:15px;
}

.stageBubbleCard__text{
  margin:0;
  color:#3b2f28;
  font-weight:700;
  line-height:1.9;
}

.stageBubbleCard__hint{
  margin-top:10px;
  color:#7a5a39;
  font-size:13px;
  font-weight:700;
}

/* ========= Stage Form ========= */
.stageFormGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:16px;
}

.stageField{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(139,47,47,.10);
  border-radius:18px;
  padding:12px;
}

.stageField label{
  display:block;
  font-weight:800;
  margin-bottom:8px;
  color:#5b3220;
}

.stageField input,
.stageField select{
  width:100%;
  border:1px solid rgba(139,47,47,.14);
  border-radius:14px;
  padding:12px;
  outline:none;
  font-family:inherit;
  font-size:1rem;
  background:#fffdf9;
  color:#2d2d2d;
}

.stageField input:focus,
.stageField select:focus{
  border-color:#c44d57;
  box-shadow:0 0 0 4px rgba(196,77,87,.12);
}

.stageInlineNote{
  margin-top:14px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(245,158,11,.28);
  background:rgba(245,158,11,.10);
  color:#7c2d12;
  font-weight:700;
  line-height:1.85;
}

.stageHelp{
  margin-top:14px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.92);
  border:1px dashed rgba(139,47,47,.18);
  color:#5b3220;
  line-height:1.85;
  font-weight:700;
}

.stageCtaRow{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

/* ========= Footer ========= */
.stageMiniFooter{
  position:relative;
  z-index:5;
  width:min(1180px, calc(100vw - 20px));
  margin:10px auto 16px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}

.stageMiniFooter a{
  background:rgba(255,255,255,.92);
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  color:#5b3220;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  font-weight:800;
}

/* ========= Start Page ========= */
.startStagePanel{
  padding:20px 18px 18px;
}

.startStageScene{
  position:relative;
  min-height:540px;
  border-radius:30px;
  overflow:hidden;
  background:
    linear-gradient(to top, rgba(90,40,22,.12), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  padding:18px;
}

.startStageScene::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:95px;
  background:linear-gradient(to top, rgba(109,54,29,.24), rgba(109,54,29,0));
  pointer-events:none;
  z-index:0;
}

.startIntroBubble{
  position:relative;
  z-index:3;
  width:min(560px, 100%);
  margin:0 auto 8px;
}

.startCharacters{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:end;
  margin-top:18px;
}

.stageCharacterCard{
  position:relative;
  min-height:390px;
  border-radius:26px;
  padding:18px 16px 20px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 16px 34px rgba(0,0,0,.14);
  transition:.22s ease;
  cursor:pointer;
  overflow:hidden;
}

.stageCharacterCard:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 40px rgba(0,0,0,.18);
}

.stageCharacterCard.isActive{
  border-color:rgba(243,201,106,.55);
  box-shadow:
    0 0 0 2px rgba(243,201,106,.18),
    0 22px 42px rgba(0,0,0,.22);
  background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,248,232,.14));
}

.stageCharacterCard__spot{
  position:absolute;
  top:-10%;
  left:50%;
  transform:translateX(-50%);
  width:72%;
  height:70%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,245,200,.28), rgba(255,245,200,0) 68%);
  pointer-events:none;
  z-index:0;
}

.stageCharacterBubble{
  position:relative;
  z-index:3;
  width:min(320px, 100%);
  margin-bottom:14px;
}

.stageCharacterBubble .stageBubbleCard{
  text-align:right;
  padding:14px 15px;
}

.stageCharacterBubble .stageBubbleCard::after{
  right:50%;
  transform:translateX(50%);
}

.stageCharacterStand{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.stageCharacterImgWrap{
  position:relative;
  width:200px;
  max-width:100%;
}

.stageCharacterImg{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.24));
  animation:characterFloat 3s ease-in-out infinite;
}

@keyframes characterFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

.stagePedestal{
  width:150px;
  height:18px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(243,201,106,.72), rgba(139,47,47,.16) 70%, transparent 100%);
  filter:blur(.2px);
}

.stageCharacterMeta{
  text-align:center;
  margin-top:4px;
}

.stageCharacterName{
  margin:0;
  color:#fff8dd;
  font-family:'Baloo Bhaijaan 2',cursive;
  font-size:32px;
  line-height:1.1;
  text-shadow:0 6px 18px rgba(0,0,0,.28);
}

.stageCharacterDesc{
  margin:6px 0 0;
  color:#fff;
  font-weight:700;
  text-shadow:0 4px 14px rgba(0,0,0,.24);
  line-height:1.7;
}

.stageCharacterActions{
  position:relative;
  z-index:3;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:12px;
}

.stageListenBtn{
  min-height:44px;
  padding:10px 14px;
  border-radius:16px;
  border:none;
  cursor:pointer;
  font-family:'Alexandria',sans-serif;
  font-weight:800;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,246,246,.92));
  color:#3d2b22;
  box-shadow:0 10px 20px rgba(0,0,0,.12);
  transition:.2s ease;
}

.stageListenBtn:hover{
  transform:translateY(-2px);
}

.stageListenBtn.isPlaying{
  background:linear-gradient(135deg,#3994c9,#54afe3);
  color:#fff;
}

.startFormWrap{
  margin-top:18px;
}

.startFormHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.startFormHeader__title{
  margin:0;
  color:#5b3220;
  font-size:21px;
  font-weight:900;
}

.startSelectedBadge{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(139,47,47,.10);
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  color:#7b2626;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
}

.startChoiceHint{
  margin-top:10px;
  text-align:center;
  color:#fff7e7;
  font-weight:800;
  text-shadow:0 4px 14px rgba(0,0,0,.24);
  line-height:1.8;
}

/* ========= Responsive ========= */
@media (max-width: 980px){
  .startCharacters{
    grid-template-columns:1fr;
    gap:16px;
  }

  .stageCharacterCard{
    min-height:350px;
  }

  .stageCharacterBubble{
    width:min(420px, 100%);
  }
}

@media (max-width: 768px){
  .stageTopBar{
    padding-top:10px;
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .stageBrand{
    justify-self:start;
    font-size:13px;
    padding:8px 12px;
  }

  .stageTopBar__actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    width:100%;
  }

  .topChip{
    width:100%;
    justify-content:center;
    text-align:center;
    min-height:44px;
    padding:10px 8px;
    font-size:13px;
  }

  .stagePage{
    padding-top:16px;
  }

  .stageSectionHead__sub{
    font-size:15px;
    line-height:1.8;
  }

  .startStageScene{
    min-height:auto;
    padding:14px;
  }

  .stageCharacterImgWrap{
    width:160px;
  }

  .stageCharacterName{
    font-size:28px;
  }

  .stageFormGrid{
    grid-template-columns:1fr;
  }

  .stageCtaRow{
    flex-direction:column;
  }

  .stageBtn{
    width:100%;
  }
}

@media (max-width: 420px){
  .stageCharacterCard{
    padding:14px 12px 16px;
  }

  .stageCharacterImgWrap{
    width:132px;
  }

  .stageCharacterBubble .stageBubbleCard{
    padding:12px;
    border-radius:20px;
  }

  .stageCharacterName{
    font-size:24px;
  }

  .stageCharacterDesc{
    font-size:14px;
  }

  .stageMiniFooter a{
    font-size:11px;
    padding:7px 9px;
  }
}

/* =========================================
   Placement Test - Stage Wizard
========================================= */

.placementShell{
  position:relative;
  z-index:5;
}

.placementPanel{
  padding:20px 18px 18px;
}

.placementHead{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.placementHead__left{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

.placementAvatar{
  width:64px;
  height:64px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 22px rgba(0,0,0,.12);
}

.placementAvatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.placementHead__title{
  margin:0;
  color:#4b2c2c;
  font-size:24px;
  font-weight:900;
}

.placementHead__sub{
  margin:6px 0 0;
  color:#5b3220;
  line-height:1.9;
  font-weight:700;
}

.placementCounter{
  background:rgba(255,255,255,.95);
  border:1px solid rgba(139,47,47,.10);
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  color:#7b2626;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
  white-space:nowrap;
}

.placementGuide{
  margin-bottom:14px;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.18);
  color:#1f2937;
  line-height:1.9;
  font-weight:700;
}

.placementProgress{
  margin-bottom:18px;
}

.placementProgress__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  flex-wrap:wrap;
}

.placementProgress__label{
  color:#5b3220;
  font-weight:800;
}

.placementProgress__value{
  color:#7b2626;
  font-weight:900;
}

.placementProgress__track{
  height:12px;
  background:rgba(255,255,255,.82);
  border-radius:999px;
  overflow:hidden;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.08);
}

.placementProgress__bar{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#3994c9,#54afe3,#f3c96a);
  transition:width .25s ease;
}

.questionWizard{
  position:relative;
}

.questionSlide{
  display:none;
  min-height:440px;
  border-radius:28px;
  padding:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,250,244,.92));
  border:1px solid rgba(139,47,47,.10);
  box-shadow:0 18px 36px rgba(0,0,0,.12);
}

.questionSlide.is-active{
  display:flex;
  flex-direction:column;
}

.questionSlide__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.questionSlide__num{
  background:rgba(139,47,47,.10);
  color:#7b2626;
  border-radius:999px;
  padding:8px 12px;
  font-weight:900;
}

.questionSlide__meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.questionMetaBadge{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(139,47,47,.10);
  color:#5b3220;
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
  font-size:14px;
}

.questionPassage{
  margin-top:8px;
  padding:14px 16px;
  border-radius:18px;
  background:rgba(0,0,0,.03);
  line-height:2;
  color:#2f2f2f;
  border:1px solid rgba(0,0,0,.06);
}

.questionText{
  margin-top:14px;
  line-height:2;
  font-weight:900;
  font-size:1.08rem;
  color:#2d241d;
}

.questionAnswers{
  margin-top:16px;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.answerGrid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

.mcqCard{
  display:flex;
  gap:10px;
  align-items:center;
  padding:12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  cursor:pointer;
  background:#fff;
  transition:.2s ease;
  position:relative;
  min-height:84px;
}

.mcqCard:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 24px rgba(0,0,0,.08);
}

.mcqCard.is-selected{
  border-color:#3994c9;
  background:linear-gradient(180deg,#eff8ff,#ffffff);
  box-shadow:0 18px 30px rgba(57,148,201,.18);
}

.mcqCard input[type="radio"]{
  accent-color:#2563eb;
  transform:scale(1.2);
  flex-shrink:0;
}

.mcqCard__key{
  min-width:40px;
  width:40px;
  height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(0,0,0,.03);
  color:#4b2c2c;
  flex-shrink:0;
}

.mcqCard__body{
  flex:1;
}

.mcqCard__body img{
  width:100%;
  height:150px;
  object-fit:cover;
  display:block;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  margin-bottom:8px;
  background:rgba(0,0,0,.02);
}

.mcqCard__text{
  color:#374151;
  line-height:1.9;
  font-weight:800;
}

.trueFalseGrid{
  display:grid;
  gap:10px;
}

.tfCard{
  display:flex;
  gap:10px;
  align-items:center;
  padding:14px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  cursor:pointer;
  background:#fff;
  transition:.2s ease;
}

.tfCard:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 24px rgba(0,0,0,.08);
}

.tfCard.is-selected{
  border-color:#3994c9;
  background:linear-gradient(180deg,#eff8ff,#ffffff);
  box-shadow:0 18px 30px rgba(57,148,201,.18);
}

.matchGrid{
  display:grid;
  gap:10px;
}

.matchRow{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  padding:12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  background:#fff;
}

.matchLeft{
  min-width:220px;
  font-weight:900;
  color:#2d241d;
}

.matchRow select,
.blankSelect,
.textAnswer{
  width:100%;
  border:1px solid rgba(139,47,47,.14);
  border-radius:14px;
  padding:12px;
  outline:none;
  font-family:inherit;
  font-size:1rem;
  background:#fffdf9;
  color:#2d2d2d;
}

.matchRow select{
  min-width:220px;
  max-width:320px;
}

.matchRow select:focus,
.blankSelect:focus,
.textAnswer:focus{
  border-color:#c44d57;
  box-shadow:0 0 0 4px rgba(196,77,87,.12);
}

.blankInlineWrap{
  display:inline-block;
  min-width:160px;
  vertical-align:middle;
  margin:0 6px;
}

.blankSelectWrap{
  display:inline-block;
  position:relative;
  min-width:160px;
  max-width:100%;
  vertical-align:middle;
  margin:0 6px;
}

.blankSelectWrap:after{
  content:"🎈";
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
  font-size:1rem;
}

.blankSelect.isFilled{
  border-color:#22c55e;
  background:linear-gradient(180deg,#ecfdf5,#ffffff);
}

.textAnswer{
  min-height:110px;
  resize:vertical;
  line-height:1.9;
}

.textNote{
  margin-top:8px;
  color:#6b7280;
  font-size:.95rem;
}

.wizardNav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

.wizardNav__left,
.wizardNav__right{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.wizardMiniNote{
  color:#5b3220;
  font-weight:700;
  line-height:1.8;
}

.questionRequiredHint{
  display:none;
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.18);
  color:#7f1d1d;
  font-weight:800;
}

.questionRequiredHint.is-show{
  display:block;
}

.errorStageBox{
  margin-top:14px;
  padding:12px;
  border-radius:14px;
  background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.18);
  color:#7f1d1d;
  line-height:1.8;
  font-weight:700;
}

@media (max-width: 768px){
  .placementHead{
    align-items:flex-start;
  }

  .placementHead__title{
    font-size:21px;
  }

  .questionSlide{
    min-height:420px;
    padding:14px;
  }

  .answerGrid{
    grid-template-columns:1fr;
  }

  .wizardNav{
    flex-direction:column;
    align-items:stretch;
  }

  .wizardNav__left,
  .wizardNav__right{
    width:100%;
  }

  .wizardNav .stageBtn{
    width:100%;
  }

  .matchRow{
    flex-direction:column;
    align-items:stretch;
  }

  .matchLeft{
    min-width:0;
  }

  .matchRow select{
    max-width:none;
    min-width:0;
  }

  .blankInlineWrap,
  .blankSelectWrap{
    display:block;
    width:100%;
    margin:10px 0;
  }
}

@media (max-width: 420px){
  .placementAvatar{
    width:54px;
    height:54px;
    border-radius:16px;
  }

  .placementHead__title{
    font-size:19px;
  }

  .placementCounter{
    font-size:13px;
    padding:8px 12px;
  }

  .questionSlide__top{
    align-items:flex-start;
  }

  .questionText{
    font-size:1rem;
  }
}


.stageMiniFooter--column{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

/* روابط */
.footerLinks{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}

/* السوشيال */
.footerSocial{
  display:flex;
  gap:12px;
  justify-content:center;
}

/* الأيقونات */
.footerIcon{
  width:36px;
  height:36px;
  background:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,.1);
  transition:.2s;
}

.footerIcon:hover{
  transform:translateY(-3px) scale(1.05);
}

.footerIcon svg{
  width:18px;
  height:18px;
}

.footerIcon--facebook svg{ fill:#1877f2; }
.footerIcon--youtube svg{ fill:#ff0000; }
.footerIcon--whatsapp svg{ fill:#25d366; }






















.footerIcon{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:50%;
  box-shadow:0 6px 16px rgba(0,0,0,.1);
  transition:.2s;
}

.footerIcon svg{
  width:18px;
  height:18px;
  fill:#555;
}

.footerIcon:hover{
  transform:translateY(-3px);
}

/* ألوان كل منصة */
.footerIcon[href*="facebook"] svg{
  fill:#1877f2;
}

.footerIcon[href*="youtube"] svg{
  fill:#ff0000;
}

.footerIcon[href*="wa.me"] svg{
  fill:#25d366;
}