/* -------------------- Base -------------------- */
:root{
  --primary:#3a57e8; --primary-2:#2c4ac9;
  --ok:#16a34a; --bad:#dc2626;
  --ink:#111827; --muted:#6b7280; --line:#e5e7eb;
  --card:#ffffff; --bg:#f5f7fb;
  --r-lg:16px;
}
#vidyom-exam-root{
  font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;
  color:var(--ink); line-height:1.6;
  margin:0 auto; padding:14px; max-width:1100px;
  background:var(--bg);
}

/* Utility */
.ve-hidden{ display:none !important; }

/* -------------------- Cards -------------------- */
.ve-card{ background:var(--card); border-radius:var(--r-lg);
  box-shadow:0 10px 30px rgba(2,12,27,.08); margin:14px 0; overflow:hidden }
.ve-head{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff; padding:.8rem 1rem; font-weight:700;
}
.ve-body{ padding:1rem }

/* -------------------- Steps + Progress -------------------- */
.ve-steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:10px; }
.ve-step{
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:10px; text-align:left; font-weight:600; color:#444;
}
.ve-step .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:999px; margin-right:2px;
  background:var(--primary); color:#fff; font-size:.8rem; flex:0 0 auto;
}
.ve-step.is-active{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(58,87,232,.12); color:#111; }
.ve-step.is-done{ background:#eef3ff; border-color:#dbe3ff }

.ve-bar{ background:#eef1ff; height:10px; border-radius:999px; overflow:hidden; }
.ve-prog{ background:linear-gradient(90deg,var(--primary),var(--primary-2));
  height:10px; color:#fff; font-size:.75rem; text-align:center; line-height:10px; }

/* -------------------- Grid Layout -------------------- */
.ve-row{ display:flex; gap:16px; flex-wrap:wrap; }
.ve-col-main{ flex:1 1 680px; min-width:300px; }
.ve-col-side{ flex:1 1 280px; min-width:240px; }

/* -------------------- Buttons -------------------- */
.ve-btn{ border:none; cursor:pointer; border-radius:12px; padding:.7rem 1.1rem;
  background:linear-gradient(135deg,var(--primary),var(--primary-2)); color:#fff; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:8px }
.ve-btn:hover{ filter:brightness(1.03) }
.ve-btn.ghost{ background:#f2f3f7; color:#222; border:1px solid #e3e6ef }
.ve-btn[disabled]{ opacity:.75; cursor:not-allowed }

/* Spinner */
.ve-btn .ve-spin{
  display:none; width:16px; height:16px; border:2px solid rgba(255,255,255,.8);
  border-right-color:transparent; border-radius:50%; animation:ve-rot .7s linear infinite;
}
.ve-btn.is-loading .ve-btn-label{ visibility:hidden }
.ve-btn.is-loading .ve-spin{ display:inline-block }

@keyframes ve-rot{ to{ transform:rotate(360deg) } }

/* -------------------- Registration form -------------------- */
#ve-reg.ve-form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#ve-reg.ve-form .ve-field{ display:flex; flex-direction:column; gap:6px; }
#ve-reg.ve-form label{ font-size:.9rem; font-weight:600; color:#444; }
#vidyom-exam-root input[type="text"],
#vidyom-exam-root input[type="date"],
#vidyom-exam-root select{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:.7rem .9rem;
  font-size:.95rem; background:#fff; outline:none; transition:border-color .2s, box-shadow .2s;
}
#vidyom-exam-root input:focus, #vidyom-exam-root select:focus{
  border-color:var(--primary); box-shadow:0 0 0 4px rgba(58,87,232,.12);
}

/* Consent beside the button */
.ve-consent{
  display:flex; gap:10px; align-items:flex-start;
  background:#f9fafc; border:1px solid #e4e7ef; border-radius:8px;
  padding:.8rem; font-size:.85rem; margin-top:10px;
}
.ve-consent input{ margin-top:.25rem }

/* -------------------- Questions -------------------- */
.ve-q{ border:1px solid #e8ebff; border-radius:12px; padding:14px; margin:10px 0; background:#fff }
.ve-q p{ margin:.2rem 0 8px; font-weight:700; color:#222 }
.ve-opt{ display:block; border:1px solid var(--line); border-radius:10px; padding:.6rem .7rem; margin:.5rem 0; cursor:pointer }
.ve-opt:hover{ background:#f7f8ff; border-color:#c9d4ff }
.ve-mark{ margin-left:8px; font-weight:800 }
.ve-mark.ve-ok{ color:var(--ok) } .ve-mark.ve-bad{ color:var(--bad) }
.ve-ok{ background:#eaf9ee !important; border-color:#bfe7cb !important }
.ve-bad{ background:#fde8ea !important; border-color:#f6bcc2 !important }

/* -------------------- Info callouts -------------------- */
.ve-foot-info{ padding:0 1rem 1rem 1rem }
.ve-callout{
  background:#eef6ff; border:1px solid #cfe3ff; color:#0f3b73;
  border-radius:12px; padding:.75rem .9rem; font-size:.92rem;
}
.ve-callout.legal{ background:#fff8e6; border-color:#ffe1a6; color:#6a4b00 }
.ve-callout.good{ background:#e8f6ee; border-color:#cdebd7; color:#0f5132 }
.ve-callout.warn{ background:#fde7ea; border-color:#f8c8cf; color:#842029 }

/* -------------------- Stage visibility -------------------- */
#ve-card-reg, #ve-card-exam, #ve-card-lookup, #ve-card-result, #ve-card-cert { display: none; }

#vidyom-exam-root[data-stage="reg"]    #ve-card-reg    { display: block; }
#vidyom-exam-root[data-stage="reg"]    #ve-card-lookup { display: block; } /* re-download visible ONLY on Registration */

#vidyom-exam-root[data-stage="exam"]   #ve-card-exam   { display: block; }

#vidyom-exam-root[data-stage="result"] #ve-card-result { display: block; }
#vidyom-exam-root[data-stage="cert"]   #ve-card-cert   { display: block; }

/* Sidebar hidden until registered */
#vidyom-exam-root:not(.is-registered) #ve-card-info { display: none !important; }

/* -------------------- Re-download form -------------------- */
#ve-lookup-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
#ve-lookup-form .ve-field{ display:flex; flex-direction:column; gap:6px }
#ve-lookup-form input{
  border:1px solid var(--line); border-radius:8px; padding:.6rem .75rem; font-size:.9rem;
}
#ve-lookup-form input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(58,87,232,.12) }

/* -------------------- Certificate (on-page) -------------------- */
.ve-cert h2{ color:#8b6b1d; margin:.2rem 0 1rem; font-weight:900; }
.ve-cert .ve-cert-info{
  position:relative; border-radius:14px; padding:16px; max-width:680px; margin:10px auto;
  background:#fff7e6; border:3px double #d4af37; box-shadow:inset 0 0 0 6px rgba(212,175,55,.15);
}
#ve-c-logo{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  width:110px; height:auto; object-fit:contain;
}
.ve-cert p{ margin:.3rem 0; }

/* -------------------- Responsive -------------------- */
@media(max-width:820px){
  .ve-col-main,.ve-col-side{ flex:1 1 100% }
}
@media(max-width:640px){
  #ve-reg.ve-form{ grid-template-columns:1fr }
  .ve-steps-grid{ grid-template-columns:1fr }
  .ve-btn{ width:100% }
  .ve-consent{ flex-direction:column }
  #ve-lookup-form{ grid-template-columns:1fr }

  /* Certificate mobile stacking */
  #ve-c-logo{ position:static; transform:none; display:block; margin:10px auto 0; width:90px }
  .ve-cert .ve-cert-info{ padding:12px }
  .ve-cert h2{ font-size:1.2rem }
}