/* ============================================================ */
/* Combined from original V4.8 inline style blocks, in order. */
/* ============================================================ */

/* --- Original style block 1 --- */


/* V1.3 CLEAN — retained V1.2 visual essentials */
#authScreen{
  position:relative !important;
  isolation:isolate !important;
  display:block !important;
  width:min(100% - 32px, 620px) !important;
  max-width:620px !important;
  min-height:0 !important;
  margin:42px auto 28px !important;
  padding:28px !important;
  background:#fff !important;
  border:1px solid #dfe7f1 !important;
  border-radius:18px !important;
  box-shadow:0 14px 40px rgba(18,52,91,.10) !important;
}
#authScreen > div:first-child{width:100% !important;display:block !important;text-align:center !important;margin-bottom:20px !important;}
#authScreen > div:first-child .mission-logo{display:block !important;width:88px !important;height:88px !important;margin:0 auto 12px !important;}
#authScreen > .dashPanel{width:100% !important;margin:0 !important;padding:22px !important;border:1px solid #dbe4ef !important;border-radius:14px !important;background:#fff !important;box-shadow:none !important;}
#authScreen > .dashPanel + div[style*="height:20px"],#authScreen > div[style*="height:20px"]{display:none !important}
#authScreen > div:last-child{width:100% !important;margin:14px 0 0 !important;text-align:center !important;}
#authScreen .authTabs{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:8px !important;margin-bottom:18px !important;}
#authScreen .authTab{min-width:0 !important;min-height:46px !important;padding:10px 8px !important;white-space:normal !important;}
body:not(.admin-ui) .adminReferenceSidebar,body:not(.admin-ui) .adminReferenceMain{display:none !important;}
body.admin-ui > .header{position:fixed !important;top:12px !important;right:18px !important;left:auto !important;width:auto !important;height:auto !important;min-height:0 !important;padding:0 !important;margin:0 !important;background:transparent !important;z-index:11000 !important;pointer-events:none !important;}
body.admin-ui > .header .headerRight{display:flex !important;align-items:center !important;justify-content:flex-end !important;gap:8px !important;width:auto !important;pointer-events:auto !important;}
body.admin-ui > .header #adminHeaderLogout{position:relative !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;width:auto !important;min-width:142px !important;min-height:40px !important;margin:0 !important;padding:0 14px !important;border-radius:10px !important;box-shadow:0 5px 16px rgba(3,27,56,.16) !important;line-height:1 !important;}
body.admin-ui #home{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important;}
body.admin-ui #home > .studentWelcome,body.admin-ui #home > .hero,body.admin-ui #home > .info,body.admin-ui #home > .dashNav,body.admin-ui #home > .candidateSectionNav{display:none !important;}
body.admin-ui #adminOnlyDashboard{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important;}
body.admin-ui .adminReferenceMain{background:#f5f8fc !important;}
@media(max-width:768px){#authScreen{width:calc(100% - 16px) !important;margin:18px auto 22px !important;padding:16px !important;}#authScreen > .dashPanel{padding:17px !important}#authScreen .authTabs{grid-template-columns:1fr !important;}body.admin-ui > .header{top:8px !important;right:8px !important;}body.admin-ui > .header #adminHeaderLogout{min-width:0 !important;min-height:38px !important;padding:0 11px !important;font-size:11px !important;}}

/* HUB OF ASPIRANTS branding */
.mission-logo {
  display:block;
  width:86px;
  height:86px;
  object-fit:contain;
  border-radius:50%;
  margin:0 auto 10px;
  box-shadow:0 4px 16px rgba(0,0,0,.16);
}
.brand-logo {
  display:block;
  width:58px;
  height:58px;
  object-fit:contain;
  border-radius:50%;
  flex:0 0 auto;
}
.footer-logo {
  display:block;
  width:64px;
  height:64px;
  object-fit:contain;
  border-radius:50%;
  margin:0 auto 8px;
}

.reviewLayout{display:grid;grid-template-columns:170px 1fr;gap:16px;text-align:left;margin-top:15px}
.reviewNavCard{background:#f8fafc;border:1px solid #dbe3ec;border-radius:10px;padding:12px}
.reviewNavCard h4{margin:0 0 10px;color:#12345b}
.reviewPalette{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.reviewPbtn{border:1px solid #cbd5e1;background:#fff;border-radius:7px;padding:8px 5px;font-weight:800;cursor:pointer}
.reviewPbtn.current{outline:2px solid #12345b;outline-offset:1px}
.reviewPbtn.correctQ{background:#dff4e6;border-color:#75c98d;color:#087443}
.reviewPbtn.wrongQ{background:#fde3e3;border-color:#ef9a9a;color:#b42318}
.reviewPbtn.skippedQ{background:#f1f5f9;color:#64748b}
.reviewLegend{font-size:11px;color:#64748b;line-height:1.7;margin-top:12px}
.reviewQuestionCard{border:1px solid #dbe3ec;border-radius:10px;padding:16px;background:#fff}
.reviewQuestionNo{font-size:12px;color:#64748b;font-weight:700;margin-bottom:7px}
.reviewQuestionText{font-size:18px;font-weight:800;color:#12345b;margin-bottom:14px}
.reviewOption{display:block;width:100%;text-align:left;border:1px solid #cbd5e1;background:#fff;border-radius:8px;padding:11px 12px;margin:8px 0;font-size:13px}
.reviewOption.reviewCorrect{background:#dff4e6;border:2px solid #2e9d59;color:#087443;font-weight:800}
.reviewOption.reviewWrong{background:#fde3e3;border:2px solid #d9534f;color:#b42318;font-weight:800}
.reviewOption.reviewYourCorrect{background:#dff4e6;border:2px solid #2e9d59;color:#087443;font-weight:800}
.reviewTag{float:right;font-size:10px;padding:3px 6px;border-radius:12px;background:#fff}
.reviewStatus{margin:12px 0 0;padding:9px 11px;border-radius:7px;background:#f6f8fb;font-size:12px;font-weight:700}
.reviewExplanation{margin-top:12px;padding:12px;background:#f6f8fb;border-left:4px solid #12345b;border-radius:6px;font-size:13px;line-height:1.5}
.reviewBottomNav{display:flex;justify-content:space-between;gap:8px;margin-top:14px}
.reviewBottomNav button{padding:8px 14px;border-radius:7px;border:1px solid #cbd5e1;background:#fff;font-weight:700;cursor:pointer}
.reviewBottomNav button:last-child{background:#12345b;color:#fff;border-color:#12345b}
.resultBackBtn{margin-right:8px}
@media(max-width:650px){
 .reviewLayout{grid-template-columns:1fr}
 .reviewNavCard{order:2}
 .reviewPalette{grid-template-columns:repeat(6,1fr)}
 .reviewQuestionCard{order:1}
}

/* Test countdown overlay */
.countdownOverlay{position:fixed;inset:0;background:rgba(8,24,45,.94);z-index:99999;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;padding:20px}
.countdownOverlay.hidden{display:none}
.countdownCard{width:min(520px,92vw);padding:42px 28px;border-radius:22px;background:linear-gradient(145deg,#12345b,#0b2340);box-shadow:0 25px 70px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.15)}
.countdownTitle{font-size:18px;font-weight:700;opacity:.9;margin-bottom:10px}
.countdownTestTitle{font-size:27px;font-weight:800;margin-bottom:25px}
.countdownNumber{font-size:110px;line-height:1;font-weight:900;margin:10px 0 18px;letter-spacing:2px}
.countdownMessage{font-size:20px;font-weight:700;min-height:30px}
.countdownHint{font-size:13px;opacity:.72;margin-top:16px}
@media(max-width:600px){.countdownNumber{font-size:88px}.countdownTestTitle{font-size:22px}}

/* ===== ADMIN DASHBOARD FOUR-SECTION NAVIGATION ===== */
.adminSectionNav{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:0 0 18px;
  padding:8px;
  background:#fff;
  border:1px solid #dbe4ef;
  border-radius:14px;
  box-shadow:0 4px 16px rgba(15,23,42,.06);
}
.adminSectionNav button{
  border:1px solid #cbd5e1;
  background:#f8fafc;
  color:#173f6b;
  border-radius:10px;
  padding:13px 10px;
  font-weight:800;
  cursor:pointer;
}
.adminSectionNav button.active{
  background:#173f6b;
  color:#fff;
  border-color:#173f6b;
}
.adminSectionPanel{display:none}
.adminSectionPanel.active{display:block}
.adminResultCards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:14px;
}
.adminResultCard{
  border:1px solid #dbe4ef;
  border-radius:12px;
  padding:16px;
  background:#fff;
}
.adminResultCard b{display:block;font-size:24px;color:#173f6b}
.adminResultCard span{font-size:12px;color:#64748b}
@media(max-width:700px){
  .adminSectionNav{grid-template-columns:repeat(2,1fr)}
  .adminResultCards{grid-template-columns:1fr}
}


/* ===== RESULT MANAGEMENT ===== */
.resultToolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin:14px 0;
}
.resultToolbar input,.resultToolbar select{
  min-width:170px;
}
.resultTableWrap{
  overflow:auto;
  border:1px solid #dbe4ef;
  border-radius:12px;
  background:#fff;
}
.resultTable{
  width:100%;
  border-collapse:collapse;
  min-width:900px;
}
.resultTable th,.resultTable td{
  padding:11px 12px;
  border-bottom:1px solid #e5e7eb;
  text-align:left;
  vertical-align:middle;
}
.resultTable th{
  background:#f8fafc;
  color:#334155;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.resultTable tr:hover td{background:#f8fbff}
.resultBadge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:4px 9px;
  font-size:11px;
  font-weight:800;
}
.resultBadge.free{background:#ecfdf5;color:#047857}
.resultBadge.paid{background:#fff7ed;color:#c2410c}
.resultBadge.published{background:#eff6ff;color:#1d4ed8}
.resultBadge.hidden{background:#f1f5f9;color:#64748b}
.resultActions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.resultActions button{
  padding:7px 9px;
  border-radius:8px;
  border:1px solid #cbd5e1;
  background:#fff;
  cursor:pointer;
  font-weight:700;
}
.resultActions button:hover{background:#f8fafc}
.resultEmpty{
  padding:30px;
  text-align:center;
  color:#64748b;
}
.resultDetail{
  margin-top:14px;
  padding:16px;
  border:1px solid #dbe4ef;
  border-radius:12px;
  background:#f8fafc;
}
.resultDetailGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.resultDetailItem{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:12px;
}
.resultDetailItem small{display:block;color:#64748b;font-size:11px}
.resultDetailItem b{display:block;margin-top:4px;color:#173f6b;font-size:18px}
.resultPublishNotice{
  margin-top:12px;
  padding:11px 13px;
  border-radius:9px;
  background:#eff6ff;
  color:#1e40af;
  font-size:13px;
}
@media(max-width:800px){
  .resultDetailGrid{grid-template-columns:repeat(2,1fr)}
}


/* ===== TEST-WISE RESULT MANAGEMENT ===== */
.testWisePanel{
  margin-top:16px;
  padding:16px;
  border:1px solid #dbe4ef;
  border-radius:12px;
  background:#fff;
}
.testWiseToolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin:12px 0;
}
.testWiseToolbar select,.testWiseToolbar input{
  min-width:190px;
}
.testWiseTableWrap{
  overflow:auto;
  border:1px solid #dbe4ef;
  border-radius:10px;
}
.testWiseTable{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
}
.testWiseTable th,.testWiseTable td{
  padding:10px 12px;
  border-bottom:1px solid #e5e7eb;
  text-align:left;
}
.testWiseTable th{
  background:#f8fafc;
  font-size:12px;
  text-transform:uppercase;
}
.testWiseTemplatePreview{
  margin-top:16px;
  padding:20px;
  border:1px solid #cbd5e1;
  background:#fff;
  border-radius:10px;
}
.testWiseTemplateHeader{
  text-align:center;
  margin-bottom:16px;
}
.testWiseTemplateHeader h2{margin:0 0 6px}
.testWiseTemplateHeader p{margin:3px 0;color:#475569}
.testWiseTemplateTable{
  width:100%;
  border-collapse:collapse;
}
.testWiseTemplateTable th,.testWiseTemplateTable td{
  border:1px solid #64748b;
  padding:9px;
}
.testWiseTemplateTable th{
  background:#f1f5f9;
}
@media print{
  body *{visibility:hidden !important}
  #testWisePrintArea,#testWisePrintArea *{visibility:visible !important}
  #testWisePrintArea{
    position:absolute;
    left:0;top:0;width:100%;
  }
}


/* ===== CANDIDATE DASHBOARD PANELS ===== */
.candidateSectionNav{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:0 0 18px;
  padding:8px;
  background:#fff;
  border:1px solid #dbe4ef;
  border-radius:14px;
  box-shadow:0 4px 16px rgba(15,23,42,.06);
}
.candidateSectionNav button{
  border:1px solid #cbd5e1;
  background:#f8fafc;
  color:#173f6b;
  border-radius:10px;
  padding:13px 10px;
  font-weight:800;
  cursor:pointer;
}
.candidateSectionNav button.active{
  background:#173f6b;
  color:#fff;
  border-color:#173f6b;
}
.candidateSectionPanel{display:none}
.candidateSectionPanel.active{display:block}


/* =========================================================
   HUB OF ASPIRANTS — UI/UX CLEANUP PASS
   Visual-only layer. Existing functionality is preserved.
   ========================================================= */
:root{
  --mt-primary:#173f6b;
  --mt-primary-dark:#0f2f52;
  --mt-accent:#2563eb;
  --mt-bg:#f5f7fb;
  --mt-surface:#ffffff;
  --mt-border:#dbe4ef;
  --mt-text:#172033;
  --mt-muted:#64748b;
  --mt-radius:12px;
  --mt-shadow:0 4px 18px rgba(15,23,42,.07);
  --mt-shadow-hover:0 8px 24px rgba(15,23,42,.11);
}

/* Page foundation */
body{
  background:var(--mt-bg);
  color:var(--mt-text);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{
  font:inherit;
}
button{
  transition:background .16s ease,border-color .16s ease,color .16s ease,
             box-shadow .16s ease,transform .16s ease;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(37,99,235,.20);
  outline-offset:2px;
}

/* Common cards/panels */
.dashPanel,
.adminSectionPanel > .dashPanel,
.testWisePanel,
.resultDetail,
.testWiseTemplatePreview{
  border-radius:var(--mt-radius);
}
.dashPanel{
  background:var(--mt-surface);
  border:1px solid var(--mt-border);
  box-shadow:var(--mt-shadow);
}
.dashPanel h3{
  color:var(--mt-primary);
  letter-spacing:-.01em;
}
.testItem,
.adminResultCard,
.resultDetailItem{
  border-radius:10px;
}

/* Inputs */
input,select,textarea{
  border:1px solid #cbd5e1;
  border-radius:9px;
  background:#fff;
  color:var(--mt-text);
  min-height:40px;
}
input::placeholder,textarea::placeholder{
  color:#94a3b8;
}
input:focus,select:focus,textarea:focus{
  border-color:#93c5fd;
  box-shadow:0 0 0 3px rgba(37,99,235,.10);
}

/* Buttons — unify visual language */
.btn{
  border:1px solid var(--mt-primary);
  border-radius:9px;
  min-height:40px;
  padding:9px 14px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(15,23,42,.05);
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 12px rgba(15,23,42,.10);
}
.btn:active{
  transform:translateY(0);
}
.btn.secondary{
  background:#fff;
  color:var(--mt-primary);
  border-color:#cbd5e1;
}
.btn.secondary:hover{
  background:#f8fafc;
  border-color:#94a3b8;
}

/* Admin section navigation */
.adminSectionNav,
.adminPanelNav{
  gap:10px !important;
}
.adminSectionNav button,
.adminPanelNav button{
  border-radius:10px !important;
  min-height:44px;
  font-weight:800;
}
.adminSectionNav button.active,
.adminPanelNav button.active{
  box-shadow:0 4px 12px rgba(23,63,107,.18);
}

/* Candidate navigation */
.candidateSectionNav{
  gap:10px !important;
  padding:8px !important;
  margin-bottom:18px !important;
  background:#fff !important;
  border:1px solid var(--mt-border) !important;
  border-radius:14px !important;
  box-shadow:var(--mt-shadow) !important;
}
.candidateSectionNav button{
  min-height:46px;
  border-radius:10px !important;
}
.candidateSectionNav button:hover{
  background:#eef4fb;
}
.candidateSectionNav button.active{
  background:var(--mt-primary) !important;
  box-shadow:0 4px 12px rgba(23,63,107,.18);
}

/* Tables */
.resultTableWrap,
.testWiseTableWrap{
  border-radius:10px !important;
  border-color:var(--mt-border) !important;
}
.resultTable th,
.testWiseTable th,
.testWiseTemplateTable th{
  color:#334155;
  font-weight:800;
}
.resultTable tbody tr:hover td,
.testWiseTable tbody tr:hover td{
  background:#f8fbff;
}

/* Status badges */
.resultBadge{
  line-height:1.2;
  white-space:nowrap;
}

/* Toolbars */
.resultToolbar,
.testWiseToolbar{
  align-items:center;
}
.resultToolbar input,
.resultToolbar select,
.testWiseToolbar input,
.testWiseToolbar select{
  min-height:40px;
}

/* Empty states */
.resultEmpty,
.emptyState{
  border-radius:10px;
  padding:28px 18px;
  color:var(--mt-muted);
  text-align:center;
}

/* Reduce visual noise from inline muted text */
.testMeta{
  color:var(--mt-muted);
}

/* Consistent desktop content width without changing layout containers */
@media(min-width:1100px){
  .dashPanel{
    box-shadow:var(--mt-shadow);
  }
}

/* Tablet */
@media(max-width:900px){
  .resultToolbar,
  .testWiseToolbar{
    align-items:stretch;
  }
  .resultToolbar input,
  .resultToolbar select,
  .testWiseToolbar input,
  .testWiseToolbar select,
  .resultToolbar .btn,
  .testWiseToolbar .btn{
    flex:1 1 180px;
  }
}

/* Mobile */
@media(max-width:640px){
  .candidateSectionNav{
    grid-template-columns:1fr !important;
  }
  .candidateSectionNav button{
    width:100%;
  }
  .resultToolbar,
  .testWiseToolbar{
    flex-direction:column;
    align-items:stretch;
  }
  .resultToolbar > *,
  .testWiseToolbar > *{
    width:100%;
    min-width:0 !important;
    box-sizing:border-box;
  }
  .resultActions{
    flex-direction:column;
  }
  .resultActions button{
    width:100%;
  }
  .resultDetailGrid{
    grid-template-columns:1fr !important;
  }
  .testWiseTemplatePreview{
    padding:12px;
  }
}

/* Accessibility: don't animate for users who request reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    transition:none !important;
  }
}


/* Small visual hierarchy cues */
.resultTable th:first-child,
.testWiseTable th:first-child{
  border-top-left-radius:8px;
}
.resultTable th:last-child,
.testWiseTable th:last-child{
  border-top-right-radius:8px;
}


/* ===== PANEL ISOLATION FIX ===== */
#studentOnlyDashboard .candidateSectionPanel{
  display:none !important;
}
#studentOnlyDashboard .candidateSectionPanel.active{
  display:block !important;
}
#adminOnlyDashboard .adminSectionPanel{
  display:none !important;
}
#adminOnlyDashboard .adminSectionPanel.active{
  display:block !important;
}
#adminOnlyDashboard .adminSectionNav{
  display:grid !important;
}


/* ============================================================
   HUB OF ASPIRANTS — MODERN CANDIDATE PORTAL UI
   Reference: uploaded candidate dashboard screenshot.
   UI-only: existing business logic is preserved.
   ============================================================ */

:root{
  --cand-blue:#123f73;
  --cand-blue-2:#0e3561;
  --cand-bright:#1769e8;
  --cand-bg:#f4f7fb;
  --cand-card:#ffffff;
  --cand-border:#d9e3ef;
  --cand-text:#12233b;
  --cand-muted:#64748b;
  --cand-green:#16a34a;
  --cand-yellow:#f59e0b;
  --cand-purple:#7c3aed;
  --cand-shadow:0 8px 26px rgba(15,35,60,.07);
  --cand-radius:16px;
}

/* Candidate dashboard shell */
#studentDashboard,
#candidateDashboard,
.studentDashboard,
.candidateDashboard{
  background:linear-gradient(180deg,#f7faff 0%,#f3f6fb 100%);
}

/* Two large section tabs */
.candidateSectionNav{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:16px !important;
  padding:0 !important;
  margin:0 0 18px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.candidateSectionNav button{
  min-height:88px !important;
  padding:15px 22px !important;
  border:1px solid #d5e0ec !important;
  border-radius:14px !important;
  background:#fff !important;
  color:var(--cand-blue) !important;
  text-align:left !important;
  font-size:20px !important;
  font-weight:800 !important;
  box-shadow:0 5px 15px rgba(15,35,60,.05) !important;
  position:relative;
}

.candidateSectionNav button::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-12px;
  height:3px;
  border-radius:3px;
  background:transparent;
}

.candidateSectionNav button.active{
  background:linear-gradient(135deg,var(--cand-blue),#1a4f87) !important;
  color:#fff !important;
  border-color:var(--cand-blue) !important;
  box-shadow:0 8px 20px rgba(18,63,115,.20) !important;
}

.candidateSectionNav button.active::after{
  background:#2563eb;
}

/* Main candidate content cards */
#candidateSectionTestPanel,
#candidateSectionResultPanel{
  width:100%;
}

#candidateSectionTestPanel > .dashPanel,
#candidateSectionResultPanel > .dashPanel{
  background:var(--cand-card);
  border:1px solid var(--cand-border);
  border-radius:var(--cand-radius);
  box-shadow:var(--cand-shadow);
  padding:26px;
}

/* Candidate profile card */
.candidateProfileCard,
.studentProfileCard{
  border:1px solid var(--cand-border);
  background:#fff;
  border-radius:var(--cand-radius);
  box-shadow:var(--cand-shadow);
}

/* Candidate overview/stat cards */
.candidateStats,
.studentStats{
  gap:14px;
}

.candidateStats > *,
.studentStats > *{
  background:#fff;
  border:1px solid var(--cand-border);
  border-radius:14px;
  box-shadow:0 4px 15px rgba(15,35,60,.05);
}

/* Test list */
#candidateSectionTestPanel .testItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:22px;
  background:#fff;
  border:1px solid var(--cand-border);
  border-radius:14px;
  box-shadow:0 4px 14px rgba(15,35,60,.04);
}

#candidateSectionTestPanel .testItem:hover{
  border-color:#b9d0ee;
  box-shadow:0 8px 20px rgba(15,35,60,.08);
}

#candidateSectionTestPanel .testItem button{
  min-width:150px;
  min-height:48px;
  border-radius:9px;
}

/* Test badges */
#candidateSectionTestPanel .free,
#candidateSectionTestPanel .paid,
#candidateSectionTestPanel .badge{
  border-radius:999px;
  font-weight:800;
  padding:4px 10px;
}

/* Information / guideline cards */
.candidateInfoCard,
.testGuidelines,
.testGuidelineCard,
.howItWorks{
  border:1px solid #bcd7ff;
  border-radius:14px;
  background:linear-gradient(180deg,#f5f9ff,#fff);
}

/* Result section should look fundamentally different from Test section */
#candidateSectionResultPanel{
  min-height:420px;
}

#candidateSectionResultPanel > .dashPanel{
  min-height:380px;
}

#candidateSectionResultPanel .resultHero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px;
  padding:22px;
  border-radius:14px;
  background:linear-gradient(135deg,#eff6ff,#f8fbff);
  border:1px solid #c9ddfa;
}

#candidateSectionResultPanel .resultHero h2,
#candidateSectionResultPanel .resultHero h3{
  margin:0 0 5px;
  color:var(--cand-blue);
}

#candidateSectionResultPanel .resultHero p{
  margin:0;
  color:var(--cand-muted);
}

#candidateSectionResultPanel .candidateResultSummary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:22px;
}

#candidateSectionResultPanel .candidateResultSummary > div{
  padding:18px;
  border:1px solid var(--cand-border);
  border-radius:12px;
  background:#fff;
}

#candidateSectionResultPanel .candidateResultSummary strong{
  display:block;
  font-size:24px;
  color:var(--cand-blue);
  margin-bottom:4px;
}

#candidateSectionResultPanel .candidateResultTableWrap{
  overflow:auto;
  border:1px solid var(--cand-border);
  border-radius:12px;
}

#candidateSectionResultPanel table{
  width:100%;
  border-collapse:collapse;
}

#candidateSectionResultPanel th{
  background:#f1f5f9;
  color:#334155;
  font-weight:800;
  text-align:left;
}

/* Combined student result table */
#candidateSectionResultPanel .candidateAllResultsTable th,
#candidateSectionResultPanel .candidateAllResultsTable td{
  padding:14px 16px;
  border-bottom:1px solid #e2e8f0;
  vertical-align:middle;
}
#candidateSectionResultPanel .candidateAllResultsTable tbody tr:last-child td{
  border-bottom:0;
}
#candidateSectionResultPanel .candidateAllResultsTable tbody tr:hover{
  background:#f8fbff;
}
#candidateSectionResultPanel .candidateAllResultsTable th{
  white-space:nowrap;
}
#candidateSectionResultPanel .resultSerial{
  width:48px;
  color:#64748b;
  font-weight:700;
}
#candidateSectionResultPanel .resultDateTime{
  white-space:nowrap;
  color:#475569;
}
#candidateSectionResultPanel .resultPercentage{
  display:inline-block;
  min-width:64px;
  text-align:center;
  padding:5px 9px;
  border-radius:999px;
  background:#eff6ff;
  color:var(--cand-blue);
  font-weight:800;
}
@media (max-width:700px){
  #candidateSectionResultPanel .candidateAllResultsTable th,
  #candidateSectionResultPanel .candidateAllResultsTable td{
    padding:11px 10px;
    font-size:12px;
  }
  #candidateSectionResultPanel .candidateAllResultsTable th:nth-child(1),
  #candidateSectionResultPanel .candidateAllResultsTable td:nth-child(1){
    display:none;
  }
  #candidateSectionResultPanel .resultDateTime{
    white-space:normal;
    min-width:130px;
  }
}

#candidateSectionResultPanel th,
#candidateSectionResultPanel td{
  padding:13px 14px;
  border-bottom:1px solid #e8eef5;
}

#candidateSectionResultPanel tbody tr:hover{
  background:#f8fbff;
}

/* Empty result state */
#candidateSectionResultPanel .emptyState{
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px dashed #cbd5e1;
  background:#fafcff;
  color:var(--cand-muted);
}

#candidateSectionResultPanel .emptyState::before{
  content:"📊";
  font-size:42px;
  margin-bottom:12px;
}

/* Mobile */
@media(max-width:760px){
  .candidateSectionNav{
    grid-template-columns:1fr !important;
  }
  .candidateSectionNav button{
    min-height:70px !important;
    font-size:18px !important;
  }
  #candidateSectionTestPanel > .dashPanel,
  #candidateSectionResultPanel > .dashPanel{
    padding:18px;
  }
  #candidateSectionTestPanel .testItem{
    flex-direction:column;
    align-items:stretch;
  }
  #candidateSectionTestPanel .testItem button{
    width:100%;
  }
  #candidateSectionResultPanel .candidateResultSummary{
    grid-template-columns:1fr;
  }
}

/* Never show both candidate panels simultaneously */
#candidateSectionTestPanel:not(.active),
#candidateSectionResultPanel:not(.active){
  display:none !important;
}
#candidateSectionTestPanel.active,
#candidateSectionResultPanel.active{
  display:block !important;
}


/* ============================================================
   HUB OF ASPIRANTS — FINAL UI POLISH
   UI/UX ONLY — no application/business logic changes.
   ============================================================ */

:root{
  --ui-navy:#123f73;
  --ui-navy-2:#0d3159;
  --ui-blue:#1769e8;
  --ui-bg:#f4f7fb;
  --ui-card:#fff;
  --ui-line:#dce5ef;
  --ui-text:#10233d;
  --ui-muted:#64748b;
  --ui-shadow:0 10px 30px rgba(15,35,60,.07);
  --ui-shadow-sm:0 4px 16px rgba(15,35,60,.05);
}

html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ui-bg);
  color:var(--ui-text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  line-height:1.45;
}
*{box-sizing:border-box}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.58}

.dashPanel,.card,.panel,.testItem,.resultCard{
  border-color:var(--ui-line);
}
.dashPanel{box-shadow:var(--ui-shadow)}

h1,h2,h3,h4{
  color:var(--ui-text);
  letter-spacing:-.025em;
}
h2,h3{font-weight:800}

input,select,textarea{
  min-height:42px;
  border:1px solid #cbd8e6;
  border-radius:9px;
  background:#fff;
  color:var(--ui-text);
  padding:9px 12px;
  transition:border-color .16s,box-shadow .16s,background .16s;
}
input:hover,select:hover,textarea:hover{border-color:#aebfd2}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:#60a5fa;
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

button{
  border-radius:9px;
  transition:transform .15s ease,box-shadow .15s ease,
             background .15s ease,border-color .15s ease;
}
button:hover:not(:disabled){transform:translateY(-1px)}
button:active:not(:disabled){transform:translateY(0)}

.candidateSectionNav{
  grid-template-columns:1fr 1fr !important;
  gap:14px !important;
  padding:4px !important;
  margin-bottom:24px !important;
}
.candidateSectionNav button{
  position:relative;
  min-height:82px !important;
  padding:14px 22px !important;
  border-radius:14px !important;
  text-align:left !important;
  font-size:19px !important;
  font-weight:800 !important;
  letter-spacing:-.01em;
}
.candidateSectionNav button:not(.active):hover{
  border-color:#b7cbe2 !important;
  background:#f8fbff !important;
}
.candidateSectionNav button.active{
  box-shadow:0 9px 20px rgba(18,63,115,.20) !important;
}
.candidateSectionNav button.active::after{
  height:3px;
  bottom:-7px;
}

#candidateSectionTestPanel > .dashPanel,
#candidateSectionResultPanel > .dashPanel{
  padding:28px !important;
}
#candidateSectionTestPanel .testItem{
  min-height:130px;
  padding:22px 24px;
  border-radius:15px;
  background:linear-gradient(180deg,#fff,#fbfdff);
}
#candidateSectionTestPanel .testItem b{font-size:18px}
#candidateSectionTestPanel .testMeta{
  margin-top:5px;
  font-size:13px;
}
#candidateSectionTestPanel .testItem button{
  min-height:48px;
  padding:10px 20px;
  font-weight:800;
  border-radius:9px;
}

#candidateSectionResultPanel .resultHero{
  border-radius:15px;
  padding:22px 24px;
}
#candidateSectionResultPanel .candidateResultSummary{gap:14px}
#candidateSectionResultPanel .candidateResultSummary > div{
  border-radius:13px;
  box-shadow:var(--ui-shadow-sm);
}
#candidateSectionResultPanel .candidateResultTableWrap{
  box-shadow:0 2px 10px rgba(15,35,60,.03);
}
#candidateSectionResultPanel th{
  font-size:13px;
  letter-spacing:.02em;
  text-transform:uppercase;
}
#candidateSectionResultPanel td{font-size:14px}

.resultBadge,.free,.paid,.badge,.statusBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:25px;
  padding:4px 10px;
  border-radius:999px !important;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.adminSectionNav,.adminPanelNav{margin-bottom:20px}
.adminSectionNav button,.adminPanelNav button{
  min-height:52px;
  border-radius:11px !important;
  font-weight:800;
}
.adminSectionNav button:hover:not(.active),
.adminPanelNav button:hover:not(.active){
  background:#f7faff !important;
}

#adminOnlyDashboard .dashPanel{box-shadow:var(--ui-shadow)}
#adminOnlyDashboard .testItem,
#adminOnlyDashboard .studentItem,
#adminOnlyDashboard .candidateItem{
  border-radius:12px;
}

table{border-collapse:separate;border-spacing:0}
th{background:#f5f8fc}
tbody tr:last-child td{border-bottom:0}

.alert,.notice,.infoBox,.warningBox{border-radius:12px !important}

input[type=file]{
  min-height:44px;
  padding:7px;
  background:#f8fafc;
}
input[type=file]::file-selector-button{
  margin-right:10px;
  border:1px solid #cbd8e6;
  border-radius:8px;
  background:#fff;
  color:var(--ui-navy);
  padding:8px 12px;
  font-weight:700;
  cursor:pointer;
}

*{scrollbar-width:thin;scrollbar-color:#b8c6d6 transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:#b8c6d6;
  border-radius:99px;
}

#candidateSectionResultPanel .emptyState{
  margin-top:10px;
  min-height:300px;
  border-radius:14px;
}

@media(max-width:900px){
  .candidateSectionNav button{min-height:70px !important}
}
@media(max-width:640px){
  body{font-size:14px}
  .candidateSectionNav{grid-template-columns:1fr !important}
  .candidateSectionNav button{
    min-height:66px !important;
    font-size:17px !important;
    padding:12px 16px !important;
  }
  #candidateSectionTestPanel > .dashPanel,
  #candidateSectionResultPanel > .dashPanel{
    padding:18px !important;
  }
  #candidateSectionTestPanel .testItem{padding:18px}
  #candidateSectionResultPanel .resultHero{padding:18px}
  #candidateSectionResultPanel .candidateResultSummary{
    grid-template-columns:1fr !important;
  }
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition:none !important;
    animation:none !important;
  }
}


/* ============================================================
   RESULT MANAGEMENT — REFERENCE UI
   Matches the user's supplied dashboard reference.
   CSS/UI ONLY — existing functionality remains untouched.
   ============================================================ */

.resultManagement,
#resultManagement,
.result-section,
#resultSection{
  --rm-navy:#123f73;
  --rm-navy-dark:#0d3159;
  --rm-blue:#1769e8;
  --rm-border:#d7e1ec;
  --rm-bg:#f4f7fb;
  --rm-muted:#64748b;
  --rm-text:#10233d;
  --rm-green:#16a34a;
  --rm-red:#dc2626;
  --rm-shadow:0 8px 24px rgba(15,35,60,.06);
}

/* Make the result workspace spacious and card based */
.resultManagement .dashPanel,
#resultManagement .dashPanel,
.result-section .dashPanel,
#resultSection .dashPanel{
  border:1px solid var(--rm-border) !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:var(--rm-shadow) !important;
}

/* Result management heading */
.resultManagement h2,
#resultManagement h2,
.result-section h2,
#resultSection h2{
  color:var(--rm-text) !important;
  font-weight:800 !important;
  letter-spacing:-.025em !important;
}

/* Summary metric cards */
.resultManagement .stat-card,
#resultManagement .stat-card,
.result-section .stat-card,
#resultSection .stat-card{
  border:1px solid var(--rm-border) !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:none !important;
  min-height:82px;
}

/* Search / filter toolbar */
.resultManagement input[type="text"],
.resultManagement select,
#resultManagement input[type="text"],
#resultManagement select,
.result-section input[type="text"],
.result-section select,
#resultSection input[type="text"],
#resultSection select{
  min-height:40px !important;
  border:1px solid #cbd8e6 !important;
  border-radius:8px !important;
  background:#fff !important;
}

/* Result table */
.resultManagement table,
#resultManagement table,
.result-section table,
#resultSection table{
  width:100%;
  border:1px solid var(--rm-border);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}

.resultManagement thead th,
#resultManagement thead th,
.result-section thead th,
#resultSection thead th{
  background:#f5f8fc !important;
  color:#10233d !important;
  font-size:11px !important;
  font-weight:800 !important;
  text-transform:uppercase;
  letter-spacing:.025em;
  border-bottom:1px solid var(--rm-border);
}

.resultManagement tbody td,
#resultManagement tbody td,
.result-section tbody td,
#resultSection tbody td{
  padding:12px 10px !important;
  border-bottom:1px solid #e7edf4;
  vertical-align:middle;
}

.resultManagement tbody tr:hover,
#resultManagement tbody tr:hover,
.result-section tbody tr:hover,
#resultSection tbody tr:hover{
  background:#f9fbfe !important;
}

/* Test-wise result block */
.resultManagement .test-wise-result,
#resultManagement .test-wise-result,
.result-section .test-wise-result,
#resultSection .test-wise-result{
  margin-top:16px;
  border:1px solid var(--rm-border);
  border-radius:12px;
  background:#fff;
}

/* Primary action */
.resultManagement .primary,
#resultManagement .primary,
.result-section .primary,
#resultSection .primary{
  box-shadow:0 5px 12px rgba(23,105,232,.15);
}

/* Candidate/result badges */
.resultManagement .badge,
#resultManagement .badge,
.result-section .badge,
#resultSection .badge{
  border-radius:999px !important;
  font-size:11px !important;
  font-weight:800 !important;
  padding:4px 9px !important;
}

/* Responsive */
@media(max-width:900px){
  .resultManagement table,
  #resultManagement table,
  .result-section table,
  #resultSection table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
  }
}


/* Reference visual treatment for result controls */
#resultSection button,
#resultManagement button,
.result-section button,
.resultManagement button{
  min-height:38px;
  border-radius:8px;
  font-weight:700;
}
#resultSection .export-btn,
#resultManagement .export-btn{
  background:#1769e8 !important;
  color:#fff !important;
  border-color:#1769e8 !important;
}
#resultSection .danger,
#resultManagement .danger{
  color:#dc2626 !important;
}


/* ============================================================
   HUB OF ASPIRANTS — POLISHED PRODUCTION UI
   FINAL VISUAL PASS — UI/UX ONLY
   ============================================================ */

:root{
  --mt-navy:#123f73;
  --mt-navy-dark:#0d3159;
  --mt-blue:#1769e8;
  --mt-blue-soft:#eef5ff;
  --mt-bg:#f4f7fb;
  --mt-card:#ffffff;
  --mt-border:#d9e3ee;
  --mt-border-strong:#c5d3e2;
  --mt-text:#10233d;
  --mt-muted:#64748b;
  --mt-success:#15803d;
  --mt-success-bg:#ecfdf3;
  --mt-warning:#b45309;
  --mt-warning-bg:#fff7ed;
  --mt-danger:#b91c1c;
  --mt-danger-bg:#fef2f2;
  --mt-shadow:0 8px 26px rgba(15,35,60,.065);
  --mt-shadow-hover:0 12px 32px rgba(15,35,60,.10);
  --mt-radius:14px;
}

/* ---------- Foundation ---------- */
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--mt-bg);
  color:var(--mt-text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.58}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5{
  color:var(--mt-text);
  letter-spacing:-.025em;
}
h1,h2{font-weight:850}
h3,h4{font-weight:800}
small,.muted,.testMeta{color:var(--mt-muted)}

/* ---------- Global panels/cards ---------- */
.dashPanel,
.card,
.panel,
.testItem,
.resultCard,
.studentItem,
.candidateItem{
  border:1px solid var(--mt-border);
  border-radius:var(--mt-radius);
  background:var(--mt-card);
}
.dashPanel{
  box-shadow:var(--mt-shadow);
}
.dashPanel:hover{
  box-shadow:var(--mt-shadow-hover);
}

/* ---------- Forms ---------- */
input,select,textarea{
  min-height:42px;
  border:1px solid var(--mt-border-strong);
  border-radius:9px;
  background:#fff;
  color:var(--mt-text);
  padding:9px 12px;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
input::placeholder,textarea::placeholder{color:#94a3b8}
input:hover,select:hover,textarea:hover{border-color:#aebfd0}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:#60a5fa;
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

/* ---------- Buttons ---------- */
button{
  border-radius:9px;
  transition:transform .15s ease,box-shadow .15s ease,
             background .15s ease,border-color .15s ease,color .15s ease;
}
button:hover:not(:disabled){
  transform:translateY(-1px);
}
button:active:not(:disabled){
  transform:translateY(0);
}
.btn,.primary,.btn-primary{
  font-weight:800;
}
.btn:hover,.primary:hover,.btn-primary:hover{
  box-shadow:0 6px 15px rgba(18,63,115,.14);
}

/* ---------- Navigation ---------- */
.adminSectionNav,
.adminPanelNav,
.candidateSectionNav{
  gap:12px !important;
}
.adminSectionNav button,
.adminPanelNav button{
  min-height:48px;
  border-radius:10px !important;
  font-weight:800;
}
.adminSectionNav button.active,
.adminPanelNav button.active{
  box-shadow:0 6px 15px rgba(18,63,115,.16);
}

/* ---------- Candidate Test / Result switcher ---------- */
.candidateSectionNav{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  padding:4px !important;
  margin-bottom:22px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.candidateSectionNav button{
  min-height:78px !important;
  padding:14px 20px !important;
  border:1px solid var(--mt-border) !important;
  border-radius:13px !important;
  background:#fff !important;
  color:var(--mt-navy) !important;
  text-align:left !important;
  font-size:18px !important;
  font-weight:850 !important;
  box-shadow:var(--mt-shadow) !important;
}
.candidateSectionNav button:hover:not(.active){
  background:#f8fbff !important;
  border-color:#b9cbe0 !important;
}
.candidateSectionNav button.active{
  color:#fff !important;
  background:linear-gradient(135deg,var(--mt-navy),#1a528d) !important;
  border-color:var(--mt-navy) !important;
  box-shadow:0 9px 22px rgba(18,63,115,.20) !important;
}

/* ---------- Candidate Test panel ---------- */
#candidateSectionTestPanel > .dashPanel{
  padding:28px !important;
}
#candidateSectionTestPanel .testItem{
  min-height:126px;
  padding:21px 23px;
  border-radius:14px;
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:0 4px 14px rgba(15,35,60,.04);
}
#candidateSectionTestPanel .testItem:hover{
  border-color:#b8cce2;
  box-shadow:var(--mt-shadow-hover);
}
#candidateSectionTestPanel .testItem b{
  font-size:18px;
}
#candidateSectionTestPanel .testItem button{
  min-height:46px;
  padding:9px 18px;
  font-weight:850;
}

/* ---------- Candidate Result panel ---------- */
#candidateSectionResultPanel > .dashPanel{
  padding:28px !important;
}
#candidateSectionResultPanel .resultHero{
  padding:22px 24px;
  border:1px solid #c9ddfa;
  border-radius:14px;
  background:linear-gradient(135deg,#eff6ff,#fbfdff);
}
#candidateSectionResultPanel .candidateResultSummary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:18px 0 22px;
}
#candidateSectionResultPanel .candidateResultSummary > div{
  min-height:88px;
  padding:17px;
  border:1px solid var(--mt-border);
  border-radius:12px;
  background:#fff;
  box-shadow:0 4px 14px rgba(15,35,60,.045);
}
#candidateSectionResultPanel .candidateResultSummary strong{
  display:block;
  color:var(--mt-navy);
  font-size:25px;
  font-weight:850;
}
#candidateSectionResultPanel .candidateResultTableWrap{
  overflow:auto;
  border:1px solid var(--mt-border);
  border-radius:11px;
  background:#fff;
}
#candidateSectionResultPanel table{
  width:100%;
  min-width:620px;
}
#candidateSectionResultPanel th{
  padding:12px 14px;
  background:#f5f8fc;
  color:#334155;
  font-size:11px;
  font-weight:850;
  letter-spacing:.035em;
  text-transform:uppercase;
}
#candidateSectionResultPanel td{
  padding:13px 14px;
  border-bottom:1px solid #e8eef5;
  font-size:14px;
}
#candidateSectionResultPanel tbody tr:hover{
  background:#f8fbff;
}
#candidateSectionResultPanel .emptyState{
  min-height:280px;
  margin-top:10px;
  border:1px dashed #cbd5e1;
  border-radius:13px;
  background:#fafcff;
}

/* ---------- Result Management / Admin ---------- */
#resultManagement,
.resultManagement,
#resultSection,
.result-section{
  color:var(--mt-text);
}
#resultManagement .dashPanel,
.resultManagement .dashPanel,
#resultSection .dashPanel,
.result-section .dashPanel{
  border-radius:14px !important;
  box-shadow:var(--mt-shadow) !important;
}
#resultManagement table,
.resultManagement table,
#resultSection table,
.result-section table{
  width:100%;
  border:1px solid var(--mt-border);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
#resultManagement th,
.resultManagement th,
#resultSection th,
.result-section th{
  background:#f5f8fc !important;
  color:#334155 !important;
  font-size:11px !important;
  font-weight:850 !important;
  letter-spacing:.03em;
  text-transform:uppercase;
}
#resultManagement td,
.resultManagement td,
#resultSection td,
.result-section td{
  border-bottom:1px solid #e7edf4;
  padding:12px 10px !important;
}
#resultManagement tbody tr:hover,
.resultManagement tbody tr:hover,
#resultSection tbody tr:hover,
.result-section tbody tr:hover{
  background:#f9fbfe !important;
}

/* ---------- Badges ---------- */
.resultBadge,.free,.paid,.badge,.statusBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 10px;
  border-radius:999px !important;
  font-size:11px;
  font-weight:850;
  white-space:nowrap;
}

/* ---------- Admin content cards ---------- */
#adminOnlyDashboard .dashPanel{
  box-shadow:var(--mt-shadow);
}
#adminOnlyDashboard .testItem,
#adminOnlyDashboard .studentItem,
#adminOnlyDashboard .candidateItem{
  border-radius:12px;
}
#adminOnlyDashboard .testItem:hover,
#adminOnlyDashboard .studentItem:hover,
#adminOnlyDashboard .candidateItem:hover{
  box-shadow:var(--mt-shadow-hover);
}

/* ---------- Tables globally ---------- */
table{
  border-collapse:separate;
  border-spacing:0;
}
tbody tr:last-child td{border-bottom:0}

/* ---------- File inputs ---------- */
input[type=file]{
  min-height:44px;
  padding:7px;
  background:#f8fafc;
}
input[type=file]::file-selector-button{
  margin-right:10px;
  padding:8px 12px;
  border:1px solid var(--mt-border-strong);
  border-radius:8px;
  background:#fff;
  color:var(--mt-navy);
  font-weight:750;
}

/* ---------- Alerts ---------- */
.alert,.notice,.infoBox,.warningBox{
  border-radius:11px !important;
}

/* ---------- Scrollbars ---------- */
*{
  scrollbar-width:thin;
  scrollbar-color:#b8c6d6 transparent;
}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:#b8c6d6;
  border-radius:99px;
}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  #candidateSectionResultPanel .candidateResultSummary{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:640px){
  body{font-size:14px}
  .candidateSectionNav{
    grid-template-columns:1fr !important;
  }
  .candidateSectionNav button{
    min-height:65px !important;
    font-size:17px !important;
    padding:12px 16px !important;
  }
  #candidateSectionTestPanel > .dashPanel,
  #candidateSectionResultPanel > .dashPanel{
    padding:18px !important;
  }
  #candidateSectionTestPanel .testItem{
    padding:18px;
  }
  #candidateSectionResultPanel .resultHero{
    padding:18px;
  }
  #candidateSectionResultPanel .candidateResultSummary{
    grid-template-columns:1fr !important;
  }
}

/* ---------- Accessibility ---------- */
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(37,99,235,.20);
  outline-offset:2px;
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition:none !important;
    animation:none !important;
  }
}


/* ============================================================
   HUB OF ASPIRANTS — RESULT SECTION POLISHED WORKSPACE
   Dedicated result-management visual system.
   UI ONLY — existing result logic and handlers preserved.
   ============================================================ */

/* Result workspace */
#resultManagement,
.resultManagement,
#resultSection,
.result-section{
  background:#f4f7fb !important;
  color:#10233d;
}

/* Main result cards */
#resultManagement .dashPanel,
.resultManagement .dashPanel,
#resultSection .dashPanel,
.result-section .dashPanel{
  background:#fff !important;
  border:1px solid #d9e3ee !important;
  border-radius:16px !important;
  box-shadow:0 8px 26px rgba(15,35,60,.065) !important;
}

/* Result section heading area */
#resultManagement h2,
#resultManagement h3,
.resultManagement h2,
.resultManagement h3,
#resultSection h2,
#resultSection h3,
.result-section h2,
.result-section h3{
  color:#10233d !important;
  font-weight:850 !important;
  letter-spacing:-.025em;
}

/* Toolbar / filters */
#resultManagement input,
#resultManagement select,
.resultManagement input,
.resultManagement select,
#resultSection input,
#resultSection select,
.result-section input,
.result-section select{
  min-height:42px !important;
  border:1px solid #cbd8e6 !important;
  border-radius:9px !important;
  background:#fff !important;
  color:#10233d !important;
}

#resultManagement input:focus,
#resultManagement select:focus,
.resultManagement input:focus,
.resultManagement select:focus{
  outline:none;
  border-color:#60a5fa !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.10) !important;
}

/* Summary metric cards */
#resultManagement .stat-card,
.resultManagement .stat-card,
#resultSection .stat-card,
.result-section .stat-card{
  background:#fff !important;
  border:1px solid #d9e3ee !important;
  border-radius:13px !important;
  box-shadow:none !important;
}

/* Give common metric blocks a polished treatment */
#resultManagement .stat-card strong,
.resultManagement .stat-card strong,
#resultSection .stat-card strong,
.result-section .stat-card strong{
  color:#123f73;
  font-size:24px;
  font-weight:850;
}

/* Result table container */
#resultManagement table,
.resultManagement table,
#resultSection table,
.result-section table{
  width:100%;
  border:1px solid #d9e3ee !important;
  border-radius:12px !important;
  overflow:hidden;
  background:#fff !important;
}

/* Table header */
#resultManagement thead th,
.resultManagement thead th,
#resultSection thead th,
.result-section thead th{
  padding:13px 12px !important;
  background:#f3f6fa !important;
  color:#334155 !important;
  border-bottom:1px solid #d9e3ee !important;
  font-size:11px !important;
  font-weight:850 !important;
  letter-spacing:.035em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* Table body */
#resultManagement tbody td,
.resultManagement tbody td,
#resultSection tbody td,
.result-section tbody td{
  padding:13px 12px !important;
  border-bottom:1px solid #e8eef5 !important;
  color:#334155;
  vertical-align:middle;
}

#resultManagement tbody tr:hover,
.resultManagement tbody tr:hover,
#resultSection tbody tr:hover,
.result-section tbody tr:hover{
  background:#f8fbff !important;
}

/* Candidate name */
#resultManagement tbody td:first-child,
.resultManagement tbody td:first-child,
#resultSection tbody td:first-child,
.result-section tbody td:first-child{
  color:#10233d;
  font-weight:750;
}

/* Result/status pills */
#resultManagement .badge,
#resultManagement .resultBadge,
.resultManagement .badge,
.resultManagement .resultBadge,
#resultSection .badge,
#resultSection .resultBadge,
.result-section .badge,
.result-section .resultBadge{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-height:25px;
  padding:4px 10px !important;
  border-radius:999px !important;
  font-size:11px !important;
  font-weight:850 !important;
  white-space:nowrap;
}

/* Action buttons */
#resultManagement button,
.resultManagement button,
#resultSection button,
.result-section button{
  min-height:38px;
  border-radius:8px !important;
  font-weight:750;
}

#resultManagement button:hover,
.resultManagement button:hover,
#resultSection button:hover,
.result-section button:hover{
  transform:translateY(-1px);
}

/* Export / primary actions */
#resultManagement .primary,
.resultManagement .primary,
#resultSection .primary,
.result-section .primary{
  box-shadow:0 5px 14px rgba(23,105,232,.15);
}

/* Test-wise result area */
#resultManagement .test-wise-result,
.resultManagement .test-wise-result,
#resultSection .test-wise-result,
.result-section .test-wise-result{
  margin-top:18px;
  border:1px solid #d9e3ee;
  border-radius:13px;
  background:#fff;
}

/* Empty result state */
#resultManagement .emptyState,
.resultManagement .emptyState,
#resultSection .emptyState,
.result-section .emptyState{
  min-height:280px;
  padding:40px 20px;
  border:1px dashed #c7d3e0;
  border-radius:13px;
  background:#fafcff;
  text-align:center;
  color:#64748b;
}

/* Result workspace sections */
#resultManagement hr,
.resultManagement hr,
#resultSection hr,
.result-section hr{
  border:0;
  border-top:1px solid #e6edf4;
  margin:22px 0;
}

/* Responsive table */
@media(max-width:850px){
  #resultManagement table,
  .resultManagement table,
  #resultSection table,
  .result-section table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
  }
}

@media(max-width:640px){
  #resultManagement .dashPanel,
  .resultManagement .dashPanel,
  #resultSection .dashPanel,
  .result-section .dashPanel{
    border-radius:12px !important;
  }
}


*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f3f6fa;color:#172033}
button{font:inherit;cursor:pointer}
.hidden{display:none!important}
.header{background:#12345b;color:#fff;padding:16px 22px;display:flex;justify-content:space-between;align-items:center;gap:15px}.headerRight{display:flex;align-items:center;gap:10px}.headerLogoutBtn{border:1px solid rgba(255,255,255,.45);background:#fff;color:#12345b;padding:9px 14px;border-radius:8px;font-weight:800;box-shadow:0 1px 2px #0002}.headerLogoutBtn:hover{background:#f1f5f9}
.brand{font-weight:800;font-size:20px}.sub{font-size:12px;opacity:.8;margin-top:3px}
.container{max-width:1100px;margin:28px auto;padding:0 16px}
.card{background:#fff;border-radius:14px;box-shadow:0 5px 20px #00000012;padding:24px}
.hero{text-align:center;padding:38px 20px}.hero h1{margin:0 0 8px;font-size:32px}.hero p{color:#64748b}
.info{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:25px 0}
.info div{background:#f6f8fb;border-radius:10px;padding:15px;text-align:center}.info b{display:block;font-size:22px}.info span{font-size:12px;color:#64748b}
.primary{border:0;background:#12345b;color:#fff;padding:13px 24px;border-radius:9px;font-weight:700}
.secondary{border:1px solid #cbd5e1;background:#fff;padding:11px 20px;border-radius:9px}
.examTop{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:16px}
.timer{font-size:22px;font-weight:800;color:#b42318;background:#fff1f0;padding:9px 15px;border-radius:9px}
.progress{height:8px;background:#e2e8f0;border-radius:20px;overflow:hidden;margin:12px 0 20px}.bar{height:100%;background:#12345b;width:0}
.examGrid{display:grid;grid-template-columns:1fr 250px;gap:18px}
.questionNo{color:#64748b;font-size:14px;font-weight:700;margin-bottom:12px}
.question{font-size:21px;font-weight:700;line-height:1.45;margin-bottom:22px}
.option{display:block;width:100%;text-align:left;background:#fff;border:1px solid #d7dee8;border-radius:10px;padding:14px;margin:10px 0;transition:.15s}
.option:hover{background:#f7f9fc}.option.selected{border-color:#12345b;background:#eaf1f9;font-weight:700}
.nav{display:flex;justify-content:space-between;margin-top:22px;gap:10px}
.palette{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.pbtn{border:1px solid #cbd5e1;background:#fff;border-radius:7px;padding:9px 0;font-size:13px}
.pbtn.current{outline:2px solid #12345b}.pbtn.answered{background:#dff4e6;border-color:#75c98d}.pbtn.review{background:#fff0c2;border-color:#e2b93b}
.side h3{margin-top:0}.legend{font-size:12px;color:#64748b;line-height:1.8;margin-top:15px}
.result{text-align:center}.score{font-size:48px;font-weight:900;color:#12345b;margin:10px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:25px 0}.stat{background:#f6f8fb;padding:15px;border-radius:10px}.stat b{display:block;font-size:22px}
.reviewRow{padding:13px;border-bottom:1px solid #e5e7eb;text-align:left}.correct{color:#087443}.wrong{color:#b42318}
body{background:#eef2f7}#authScreen{max-width:520px;margin:45px auto}.authTabs{display:flex;gap:8px;margin-bottom:18px}.authTab{flex:1;padding:11px;border:1px solid #cbd5e1;background:#fff;border-radius:8px;font-weight:700}.authTab.active{background:#12345b;color:#fff}.deleteStudentBtn{border-color:#efb0aa;color:#b42318}.studentAdminRow{display:grid;grid-template-columns:1.4fr 1.2fr 1fr auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid #e5e7eb;font-size:13px}.studentAdminRow input{padding:8px;border:1px solid #cbd5e1;border-radius:7px}.adminAction{border:1px solid #cbd5e1;background:#fff;padding:7px 10px;border-radius:7px;font-weight:700}.adminAction.primarySmall{background:#12345b;color:#fff;border-color:#12345b}.accountGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.accountGrid label{font-weight:700;font-size:13px;color:#334155}.accountGrid input{width:100%;box-sizing:border-box;margin-top:6px;padding:10px;border:1px solid #cbd5e1;border-radius:8px}@media(max-width:800px){.accountGrid{grid-template-columns:1fr}}@media(max-width:800px){.studentAdminRow{grid-template-columns:1fr}.studentAdminRow input{width:100%}}
.profileCard{display:flex;align-items:center;gap:15px;background:#f8fafc;border-radius:12px;padding:16px;margin-bottom:18px}.avatar{width:52px;height:52px;border-radius:50%;background:#12345b;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800}.formGroup{margin-bottom:12px;text-align:left}.formGroup label{display:block;font-weight:700;font-size:13px;margin-bottom:5px}.formGroup input{width:100%;padding:11px;border:1px solid #cbd5e1;border-radius:8px}.logoutBtn{border:1px solid #efb0aa;background:#fff7f6;color:#b42318;padding:8px 12px;border-radius:7px}@media(max-width:600px){#authScreen{margin:25px auto}}
.dashNav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.tabBtn{border:1px solid #cbd5e1;background:#fff;padding:10px 16px;border-radius:8px;font-weight:700}.tabBtn.active{background:#12345b;color:#fff;border-color:#12345b}.dashGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.dashStat{background:#fff;border-radius:12px;padding:18px;box-shadow:0 4px 16px #0000000d}.dashStat b{display:block;font-size:25px;color:#12345b;margin-bottom:5px}.dashStat span{font-size:12px;color:#64748b}.dashPanel{background:#fff;border-radius:14px;padding:20px;box-shadow:0 5px 20px #0000000d;margin-bottom:18px}.studentWelcome{display:flex;justify-content:space-between;align-items:center;gap:12px}.studentName{font-size:24px;font-weight:800}.smallBtn{border:1px solid #cbd5e1;background:#fff;padding:8px 12px;border-radius:7px}.resultBadge{font-size:12px;padding:4px 7px;border-radius:20px;background:#eaf1f9}.adminGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.emptyState{text-align:center;color:#64748b;padding:30px 10px}@media(max-width:800px){.dashGrid{grid-template-columns:1fr 1fr}.adminGrid{grid-template-columns:1fr}.studentWelcome{align-items:flex-start;flex-direction:column}}
.testItem{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid #dbe3ec;border-radius:9px;padding:11px 12px}.testItem b{font-size:14px}.testMeta{font-size:11px;color:#64748b;margin-top:3px}.danger{border:1px solid #efb0aa;background:#fff7f6;color:#b42318;padding:7px 10px;border-radius:7px} .statusBadge{display:inline-block;padding:3px 7px;border-radius:999px;font-size:10px;font-weight:800;margin-left:6px}.publishedBadge{background:#dcfce7;color:#166534}.draftBadge{background:#f1f5f9;color:#475569}.freeBadge{background:#fef3c7;color:#92400e}.paidBadge{background:#e0e7ff;color:#3730a3}.startSmall{border:0;background:#12345b;color:#fff;padding:8px 12px;border-radius:7px;font-weight:700}@media(max-width:600px){.testItem{align-items:flex-start;flex-direction:column}.testItem .actions{width:100%}.testItem .actions button{width:100%}}.filebox{margin-top:20px;text-align:left;background:#f8fafc;border:1px dashed #94a3b8;padding:15px;border-radius:10px}
@media(max-width:750px){.info,.stats{grid-template-columns:1fr 1fr}.examGrid{grid-template-columns:1fr}.side{order:2}.hero h1{font-size:26px}.question{font-size:18px}.header{padding:13px 15px}.brand{font-size:17px}.headerLogoutBtn{padding:8px 10px;font-size:12px}}


:root{
  --ui-primary:#2563eb;
  --ui-primary-dark:#1d4ed8;
  --ui-bg:#f4f7fb;
  --ui-card:#ffffff;
  --ui-text:#0f172a;
  --ui-muted:#64748b;
  --ui-border:#e2e8f0;
  --ui-radius:16px;
  --ui-shadow:0 8px 30px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:linear-gradient(180deg,#f8fafc 0%,var(--ui-bg) 100%);
  color:var(--ui-text);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit}
button{
  min-height:42px;
  border-radius:10px;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
button:hover{transform:translateY(-1px)}
button:active{transform:translateY(0)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(37,99,235,.20);
  outline-offset:2px;
}
.card,.profileCard,.testCard,.statCard,.panel,.adminCard{
  border-radius:var(--ui-radius)!important;
  box-shadow:var(--ui-shadow);
}
#home{padding-bottom:30px}
#studentOnlyDashboard,#adminOnlyDashboard{animation:uiFade .25s ease}
@keyframes uiFade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.profileCard{
  padding:18px!important;
  background:linear-gradient(135deg,#fff 0%,#f8fbff 100%);
}
.avatar{
  width:52px!important;height:52px!important;
  border-radius:14px!important;
  display:grid!important;place-items:center;
  font-weight:800;
}
#studentOnlyDashboard .testCard,
#adminOnlyDashboard .testCard{
  transition:transform .18s ease,box-shadow .18s ease;
}
#studentOnlyDashboard .testCard:hover,
#adminOnlyDashboard .testCard:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 35px rgba(15,23,42,.11);
}
#exam{
  max-width:1200px;
  margin:0 auto;
}
#exam .questionCard,#exam .question-card{
  border-radius:18px!important;
  box-shadow:var(--ui-shadow);
}
#exam button{touch-action:manipulation}
#result{
  max-width:1000px;
  margin:0 auto;
}
.hidden{display:none!important}

/* Compact mobile-friendly header/navigation */
header,.topbar,.navBar,.navbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(12px);
}

/* Tables remain usable on phones */
.tableWrap,.table-responsive,.table-container{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Forms */
input,select,textarea{
  max-width:100%;
}
input,select{
  min-height:44px;
  border-radius:10px;
}

/* Exam question options */
.option,.option-btn,.answer-option,.mcq-option{
  min-height:48px;
  border-radius:12px!important;
  touch-action:manipulation;
}

/* Question palette */
.questionPalette,.palette,.question-palette{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(42px,1fr));
  gap:7px;
}

/* Login screen */
#authScreen{
  min-height:calc(100vh - 20px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 14px;
}
#authScreen>div{
  width:min(100%,480px);
}

/* Avoid tiny text and cramped controls */
@media (max-width: 768px){
  body{font-size:15px}
  .container,.wrap,.main,.content{width:100%!important;max-width:none!important;padding-left:12px!important;padding-right:12px!important}
  #authScreen{padding:18px 10px}
  #authScreen>div{border-radius:18px!important}
  .profileCard{display:flex!important;gap:12px!important;align-items:center!important}
  .profileCard .avatar{flex:0 0 48px}
  .profileCard button{width:auto}
  .grid,.cards,.stats-grid,.test-grid,.admin-grid{
    grid-template-columns:1fr!important;
  }
  .row,.actions,.button-row,.toolbar{
    flex-wrap:wrap!important;
    gap:8px!important;
  }
  .row>*{max-width:100%}
  .actions button,.button-row button{flex:1 1 140px}
  .questionPalette,.palette,.question-palette{
    grid-template-columns:repeat(6,minmax(40px,1fr));
  }
  #exam .header,.examHeader,.exam-header{
    position:sticky;
    top:0;
    z-index:40;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(10px);
  }
  #exam .questionCard,#exam .question-card{padding:16px!important}
  .option,.option-btn,.answer-option,.mcq-option{
    text-align:left!important;
    padding:12px!important;
    line-height:1.4;
  }
  table{min-width:650px}
}
@media (max-width: 480px){
  h1{font-size:1.55rem}
  h2{font-size:1.25rem}
  h3{font-size:1.05rem}
  button{min-height:44px}
  .questionPalette,.palette,.question-palette{
    grid-template-columns:repeat(5,minmax(40px,1fr));
  }
  #exam .questionCard,#exam .question-card{padding:13px!important}
  #result{padding-left:10px!important;padding-right:10px!important}
}

/* Desktop: give dashboards breathing room */
@media (min-width: 769px){
  #studentOnlyDashboard,#adminOnlyDashboard{max-width:1200px;margin-left:auto;margin-right:auto}
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}


/* Alignment pass: preserve the existing layout instead of overriding its grid/flex rules */
*,*::before,*::after{box-sizing:border-box}

body{
  overflow-x:hidden;
}

img,svg,video,canvas{
  max-width:100%;
  height:auto;
}

button,input,select,textarea{
  max-width:100%;
}

/* Keep the application's original container widths and center them */
#home,#exam,#result{
  width:100%;
  margin-left:auto;
  margin-right:auto;
}

/* Dashboard cards should never stretch awkwardly */
#studentOnlyDashboard,
#adminOnlyDashboard{
  width:100%;
}

/* Prevent profile/action rows from becoming misaligned */
#studentOnlyDashboard .profileCard{
  display:flex;
  align-items:center;
  gap:14px;
}
#studentOnlyDashboard .profileCard > div:nth-child(2){
  min-width:0;
}
#studentOnlyDashboard .profileCard button{
  flex:0 0 auto;
}

/* Cards and panels: consistent internal spacing */
#studentOnlyDashboard .testCard,
#adminOnlyDashboard .testCard,
#studentOnlyDashboard .card,
#adminOnlyDashboard .card{
  width:100%;
  min-width:0;
}

/* Do not force unknown grids into one column on mobile.
   Let the original application define its card layout. */
@media (max-width:768px){
  .container,.wrap,.main,.content{
    width:100%;
    max-width:100%;
  }

  #home,#exam,#result{
    padding-left:12px;
    padding-right:12px;
  }

  #studentOnlyDashboard .profileCard{
    flex-wrap:wrap;
  }

  #studentOnlyDashboard .profileCard button{
    margin-left:auto;
  }

  /* Generic rows can wrap naturally, but their children retain usable widths */
  .row,.actions,.button-row,.toolbar{
    max-width:100%;
  }

  /* Avoid forcing every button to equal width */
  .actions button,
  .button-row button{
    flex:0 1 auto;
    min-width:120px;
  }

  /* Exam content should use the full available width */
  #exam .questionCard,
  #exam .question-card{
    width:100%;
    max-width:100%;
  }

  /* Long questions/options should wrap rather than overflow */
  #exam *{
    overflow-wrap:anywhere;
  }

  table{
    max-width:none;
  }
}

@media (max-width:480px){
  #home,#exam,#result{
    padding-left:8px;
    padding-right:8px;
  }

  #studentOnlyDashboard .profileCard{
    align-items:flex-start;
  }

  #studentOnlyDashboard .profileCard button{
    width:100%;
    margin-left:0;
  }

  .actions button,
  .button-row button{
    width:100%;
    min-width:0;
  }
}


/* CRITICAL: the layout rule above uses !important, so .hidden alone
   cannot hide the auth screen. This rule must win whenever the screen
   is hidden after Admin/Student login. */
#authScreen.hidden{display:none !important;}

/* FINAL AUTH UI FIX
   The previous responsive layer accidentally made #authScreen a flex
   container, which placed the logo, student panel and admin panel beside
   each other. This section deliberately controls only the login layout. */

#authScreen{
  display:grid !important;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.85fr);
  gap:20px;
  width:min(100%,900px) !important;
  max-width:900px !important;
  margin:35px auto !important;
  padding:28px !important;
  align-items:start;
}

/* Branding/header of the login screen */
#authScreen > div:first-child{
  grid-column:1 / -1;
  width:100%;
  text-align:center;
  margin-bottom:0 !important;
}

#authScreen > div:first-child .mission-logo{
  width:92px;
  height:92px;
  margin:0 auto 12px;
}

/* Student and admin panels */
#authScreen > .dashPanel{
  width:100%;
  min-width:0;
  margin:0 !important;
  padding:22px !important;
}

#authScreen > .dashPanel:first-of-type{
  border:1px solid #dbe3ec !important;
}

#authScreen > .dashPanel:nth-of-type(2){
  border:1px solid #cbd5e1 !important;
}

/* Hide the spacer div in the grid */
#authScreen > div[style*="height:20px"]{
  display:none !important;
}

/* Bottom prototype note */
#authScreen > div:last-child{
  grid-column:1 / -1;
  width:100%;
  margin-top:0 !important;
}

/* Make the two login tabs balanced */
#authScreen .authTabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
#authScreen .authTab{
  width:100%;
  min-height:46px;
}

/* Inputs must stay inside their cards */
#authScreen input,
#authScreen select{
  width:100% !important;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

/* Better desktop hierarchy */
#authScreen .dashPanel h2{
  font-size:24px;
  margin-bottom:8px;
}
#authScreen .dashPanel p{
  line-height:1.5;
}
#authScreen .primary{
  min-height:48px;
}

/* Tablet/mobile: stack everything cleanly */
@media (max-width:768px){
  #authScreen{
    display:block !important;
    width:calc(100% - 20px) !important;
    max-width:560px !important;
    margin:18px auto !important;
    padding:18px !important;
  }

  #authScreen > div:first-child{
    margin-bottom:18px !important;
  }

  #authScreen > .dashPanel{
    margin-bottom:16px !important;
  }

  #authScreen > div:last-child{
    margin-top:4px !important;
  }
}

@media (max-width:480px){
  #authScreen{
    width:calc(100% - 12px) !important;
    padding:14px !important;
    border-radius:14px !important;
  }

  #authScreen > div:first-child .mission-logo{
    width:78px;
    height:78px;
  }

  #authScreen > .dashPanel{
    padding:16px !important;
  }

  #authScreen .authTab{
    font-size:13px;
    padding:10px 6px;
  }
}


/* Candidate Portal: controlled responsive layer.
   Does not alter application logic or existing desktop components. */

:root{
  --cp-primary:#163f6b;
  --cp-primary-dark:#0f3155;
  --cp-bg:#f5f8fc;
  --cp-card:#ffffff;
  --cp-border:#d9e2ec;
  --cp-text:#10233d;
  --cp-muted:#66758a;
  --cp-radius:18px;
}

body{
  background:var(--cp-bg);
  color:var(--cp-text);
  overflow-x:hidden;
}

/* Candidate header */
#studentOnlyDashboard > *{
  min-width:0;
}

#studentOnlyDashboard .profileCard{
  width:100%;
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 22px !important;
  border:1px solid var(--cp-border);
  background:#fff;
  border-radius:var(--cp-radius) !important;
}

#studentOnlyDashboard .profileCard .avatar{
  flex:0 0 56px;
}

#studentOnlyDashboard .profileCard button{
  margin-left:auto;
  flex:0 0 auto;
}

/* Candidate content */
#studentOnlyDashboard{
  width:100%;
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
  padding-left:16px;
  padding-right:16px;
}

#studentOnlyDashboard .testCard,
#studentOnlyDashboard .card{
  min-width:0;
  border-radius:16px !important;
  border:1px solid var(--cp-border);
  background:var(--cp-card);
}

/* Exam controls */
#exam{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding-left:16px;
  padding-right:16px;
}

#exam .questionCard,
#exam .question-card{
  width:100%;
  max-width:100%;
  border-radius:18px !important;
  overflow-wrap:anywhere;
}

#exam .option,
#exam .option-btn,
#exam .answer-option,
#exam .mcq-option{
  width:100%;
  min-height:50px;
  text-align:left;
  touch-action:manipulation;
  overflow-wrap:anywhere;
}

#exam .questionPalette,
#exam .palette,
#exam .question-palette{
  max-width:100%;
  overflow-x:auto;
  padding-bottom:4px;
  -webkit-overflow-scrolling:touch;
}

/* Results */
#result{
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding-left:16px;
  padding-right:16px;
}

#result table{
  max-width:100%;
}

/* Mobile */
@media (max-width:768px){
  body{
    font-size:15px;
  }

  #studentOnlyDashboard{
    padding-left:10px;
    padding-right:10px;
  }

  #studentOnlyDashboard .profileCard{
    padding:14px !important;
    gap:12px;
    border-radius:15px !important;
  }

  #studentOnlyDashboard .profileCard .avatar{
    flex-basis:46px;
    width:46px !important;
    height:46px !important;
  }

  #studentOnlyDashboard .profileCard button{
    min-height:42px;
    padding:9px 14px;
  }

  #exam{
    padding-left:10px;
    padding-right:10px;
  }

  #exam .questionCard,
  #exam .question-card{
    padding:15px !important;
    border-radius:15px !important;
  }

  #exam .option,
  #exam .option-btn,
  #exam .answer-option,
  #exam .mcq-option{
    min-height:52px;
    padding:12px 13px !important;
    border-radius:12px !important;
  }

  #exam .questionPalette,
  #exam .palette,
  #exam .question-palette{
    grid-template-columns:repeat(6,minmax(40px,1fr));
    gap:6px;
  }

  #result{
    padding-left:10px;
    padding-right:10px;
  }

  #result .card,
  #result .panel{
    border-radius:15px !important;
  }

  /* Tables remain readable rather than squeezing columns */
  #studentOnlyDashboard .tableWrap,
  #studentOnlyDashboard .table-responsive,
  #studentOnlyDashboard .table-container,
  #result .tableWrap,
  #result .table-responsive,
  #result .table-container{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* Small phones */
@media (max-width:480px){
  #studentOnlyDashboard{
    padding-left:7px;
    padding-right:7px;
  }

  #studentOnlyDashboard .profileCard{
    display:grid !important;
    grid-template-columns:46px minmax(0,1fr);
    align-items:center;
  }

  #studentOnlyDashboard .profileCard button{
    grid-column:1 / -1;
    width:100%;
    margin-left:0;
  }

  #exam{
    padding-left:7px;
    padding-right:7px;
  }

  #exam .questionCard,
  #exam .question-card{
    padding:12px !important;
  }

  #exam .questionPalette,
  #exam .palette,
  #exam .question-palette{
    grid-template-columns:repeat(5,minmax(40px,1fr));
  }

  #exam .option,
  #exam .option-btn,
  #exam .answer-option,
  #exam .mcq-option{
    min-height:50px;
    padding:11px !important;
  }

  #result{
    padding-left:7px;
    padding-right:7px;
  }
}


/* =========================================================
   HUB OF ASPIRANTS — ADMIN REFERENCE UI
   UI ONLY. No quiz/database/auth logic is changed.
   ========================================================= */
:root{
  --ref-navy:#062b57;
  --ref-navy-2:#041f43;
  --ref-blue:#1268d8;
  --ref-blue-2:#0d5fc7;
  --ref-bg:#f5f8fc;
  --ref-card:#ffffff;
  --ref-border:#dce5ef;
  --ref-text:#0f1f35;
  --ref-muted:#66758a;
  --ref-shadow:0 8px 24px rgba(20,54,91,.07);
  --ref-radius:12px;
}

body.admin-ui{
  background:var(--ref-bg) !important;
}
body.admin-ui > .header{
  display:none !important;
}
body.admin-ui > .container{
  width:100% !important;
  max-width:none !important;
  padding:0 !important;
  margin:0 !important;
}
body.admin-ui #home{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
body.admin-ui #studentOnlyDashboard{
  display:none !important;
}

/* Sidebar */
.adminReferenceSidebar{
  position:fixed;
  z-index:9000;
  left:0;
  top:0;
  bottom:0;
  width:250px;
  padding:24px 12px 14px;
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,var(--ref-navy),var(--ref-navy-2));
  color:#fff;
  box-shadow:8px 0 28px rgba(3,27,56,.13);
}
.adminReferenceBrand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:4px 10px 24px;
}
.adminReferenceBrand img{
  width:52px;
  height:52px;
  border-radius:50%;
  object-fit:contain;
  flex:0 0 auto;
  background:#fff;
}
.adminReferenceBrandTitle{font-size:20px;font-weight:900;line-height:1.25;letter-spacing:.1px}
.adminReferenceBrandSub{font-size:12px;color:rgba(255,255,255,.78);margin-top:4px}
.adminReferenceNav{
  display:flex !important;
  flex-direction:column;
  gap:6px !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.adminReferenceNav button{
  width:100% !important;
  min-height:48px !important;
  display:flex !important;
  align-items:center;
  gap:12px;
  padding:0 14px !important;
  border:1px solid transparent !important;
  border-radius:9px !important;
  background:transparent !important;
  color:#fff !important;
  text-align:left !important;
  font-size:14px !important;
  font-weight:750 !important;
  box-shadow:none !important;
  transform:none !important;
}
.adminReferenceNav button:hover:not(.active){
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.08) !important;
}
.adminReferenceNav button.active{
  background:linear-gradient(90deg,#1474e7,#237fe9) !important;
  border-color:rgba(255,255,255,.08) !important;
  box-shadow:0 7px 18px rgba(4,22,49,.28) !important;
}
.adminReferenceNav button::first-letter{font-size:17px}
.adminReferenceBottom{
  margin-top:auto;
  padding:14px 8px 2px;
  border-top:1px solid rgba(255,255,255,.12);
}
.adminReferenceAdminCard{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 10px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:10px;
  background:rgba(255,255,255,.04);
}
.adminReferenceAdminCard img{width:42px;height:42px;border-radius:50%;object-fit:contain;background:#fff}
.adminReferenceAdminTitle{font-size:13px;font-weight:850}
.adminReferenceAdminSub{font-size:11px;color:rgba(255,255,255,.72);margin-top:3px}
.adminReferenceFooter{
  text-align:center;
  color:rgba(255,255,255,.78);
  font-size:10px;
  line-height:1.55;
  padding-top:14px;
}

/* Main workspace */
.adminReferenceMain{
  min-height:100vh;
  margin-left:250px;
  padding:18px 18px 26px;
}
.adminReferenceMain > #adminOnlyDashboard{
  width:100% !important;
  max-width:1250px !important;
  margin:0 auto !important;
  padding:0 !important;
}
.adminReferenceMain #adminOnlyDashboard > .dashPanel:first-of-type{
  position:relative;
  min-height:88px;
  margin:0 0 14px !important;
  padding:18px 20px !important;
  border:1px solid var(--ref-border) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:var(--ref-shadow) !important;
}
.adminReferenceTopbarTitle{
  font-size:22px;
  font-weight:900;
  color:var(--ref-text);
  line-height:1.2;
}
.adminReferenceTopbarSub{
  margin-top:5px;
  color:var(--ref-muted);
  font-size:12px;
}
.adminReferenceTopbarActions{display:flex;align-items:center;gap:8px}
.adminReferenceRefreshBtn{
  border:1px solid #d5dfeb !important;
  background:#fff !important;
  color:#10243c !important;
  min-height:40px !important;
  padding:0 14px !important;
  border-radius:9px !important;
  font-weight:800 !important;
}
.adminReferenceRefreshBtn:hover{background:#f8fbff !important}

/* Hide original navigation location; it is relocated into the sidebar. */
.adminReferenceMain #adminOnlyDashboard > .adminSectionNav{display:none !important}

/* Section panels */
.adminReferenceMain .adminSectionPanel.active{display:block !important}
.adminReferenceMain .dashPanel,
.adminReferenceMain .testWisePanel{
  background:var(--ref-card) !important;
  border:1px solid var(--ref-border) !important;
  border-radius:var(--ref-radius) !important;
  box-shadow:var(--ref-shadow) !important;
}
.adminReferenceMain .dashPanel{padding:18px !important}
.adminReferenceMain h3{
  color:var(--ref-text);
}
.adminReferenceMain .dashPanel > h3:first-child{
  font-size:18px;
}

/* Result statistics — reference screenshot style */
.adminReferenceMain .adminResultCards{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:14px !important;
  margin:14px 0 18px !important;
}
.adminReferenceMain .adminResultCard{
  min-height:105px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  overflow:hidden;
  padding:18px 18px 18px 78px !important;
  border:1px solid var(--ref-border) !important;
  border-radius:11px !important;
  background:#fff !important;
  box-shadow:0 4px 16px rgba(24,54,88,.045) !important;
}
.adminReferenceMain .adminResultCard::before{
  content:'◉';
  position:absolute;
  left:18px;
  top:20px;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#eaf3ff;
  color:#1166d6;
  font-size:20px;
  font-weight:900;
}
.adminReferenceMain .adminResultCard:nth-child(2)::before{content:'✓';background:#e9faed;color:#0a9a4a}
.adminReferenceMain .adminResultCard:nth-child(3)::before{content:'♙';background:#fff6df;color:#e99b00}
.adminReferenceMain .adminResultCard:nth-child(4)::before{content:'↗';background:#f3eaff;color:#7a3fd1}
.adminReferenceMain .adminResultCard b{
  font-size:24px !important;
  line-height:1.1;
  color:#0b1d34 !important;
}
.adminReferenceMain .adminResultCard span{
  margin-top:5px;
  font-size:12px !important;
  color:#66758a !important;
}

/* Result management controls */
.adminReferenceMain .resultToolbar,
.adminReferenceMain .testWiseToolbar{
  display:flex !important;
  flex-wrap:wrap;
  gap:10px !important;
  align-items:center;
  padding:0 !important;
  margin:0 0 14px !important;
}
.adminReferenceMain .resultToolbar input,
.adminReferenceMain .resultToolbar select,
.adminReferenceMain .testWiseToolbar input,
.adminReferenceMain .testWiseToolbar select{
  min-height:40px !important;
  border:1px solid #cfdbe8 !important;
  border-radius:8px !important;
  background:#fff !important;
}
.adminReferenceMain .resultToolbar input{flex:1 1 280px}
.adminReferenceMain .resultToolbar select{flex:0 1 210px}
.adminReferenceMain .resultToolbar .btn,
.adminReferenceMain .testWiseToolbar .btn{
  min-height:40px !important;
  padding:0 14px !important;
  border-radius:8px !important;
  border:1px solid #cfdbe8 !important;
  background:#fff !important;
  color:#10243c !important;
  font-weight:800 !important;
}
.adminReferenceMain .resultToolbar .btn:hover,
.adminReferenceMain .testWiseToolbar .btn:hover{background:#f8fbff !important}

/* Tables */
.adminReferenceMain .resultTableWrap,
.adminReferenceMain .testWiseTableWrap{
  border:1px solid #d7e1ec !important;
  border-radius:9px !important;
  overflow:auto;
  box-shadow:none !important;
}
.adminReferenceMain .resultTable,
.adminReferenceMain .testWiseTable{
  background:#fff;
}
.adminReferenceMain .resultTable th,
.adminReferenceMain .testWiseTable th{
  background:#062d5d !important;
  color:#fff !important;
  border:0 !important;
  padding:13px 12px !important;
  font-size:11px !important;
  letter-spacing:.01em !important;
  white-space:nowrap;
}
.adminReferenceMain .resultTable td,
.adminReferenceMain .testWiseTable td{
  padding:13px 12px !important;
  color:#1d2d43;
  border-bottom:1px solid #edf1f5 !important;
  font-size:12px;
}
.adminReferenceMain .resultTable tbody tr:hover td,
.adminReferenceMain .testWiseTable tbody tr:hover td{background:#f8fbff !important}

/* Candidate / test / admin cards */
.adminReferenceMain .candidateAdminSection,
.adminReferenceMain .testWisePanel{box-shadow:none !important}
.adminReferenceMain .studentItem,
.adminReferenceMain .candidateItem,
.adminReferenceMain .testItem{
  border:1px solid var(--ref-border) !important;
  border-radius:10px !important;
  background:#fff !important;
  box-shadow:0 3px 12px rgba(24,54,88,.035) !important;
}
.adminReferenceMain .studentItem:hover,
.adminReferenceMain .candidateItem:hover,
.adminReferenceMain .testItem:hover{
  border-color:#bdd2ea !important;
  box-shadow:0 7px 18px rgba(24,54,88,.07) !important;
}

/* Test creation form */
.adminReferenceMain #creatorPanel{background:#fff !important}
.adminReferenceMain #creatorPanel input,
.adminReferenceMain #creatorPanel select,
.adminReferenceMain #creatorPanel textarea{
  border:1px solid #cfdbe8 !important;
  border-radius:8px !important;
}

/* Buttons in admin area */
.adminReferenceMain button.primary,
.adminReferenceMain button.btn-primary{
  background:var(--ref-blue) !important;
  border-color:var(--ref-blue) !important;
  color:#fff !important;
  border-radius:8px !important;
  font-weight:800 !important;
}
.adminReferenceMain button.secondary,
.adminReferenceMain button.btn.secondary{
  background:#fff !important;
  border:1px solid #cfdbe8 !important;
  color:#124b8b !important;
  border-radius:8px !important;
  font-weight:800 !important;
}

/* Result detail */
.adminReferenceMain .resultDetail{background:#f8fafc !important;border-radius:10px !important}
.adminReferenceMain .resultDetailItem{border:1px solid #e0e7ef !important;border-radius:9px !important}

/* Mobile / tablet */
@media(max-width:900px){
  .adminReferenceSidebar{width:82px;padding:18px 8px 10px}
  .adminReferenceBrand{justify-content:center;padding:4px 0 20px}
  .adminReferenceBrand img{width:48px;height:48px}
  .adminReferenceBrandTitle,.adminReferenceBrandSub,
  .adminReferenceAdminTitle,.adminReferenceAdminSub,
  .adminReferenceFooter{display:none}
  .adminReferenceNav button{justify-content:center;padding:0 !important;font-size:0 !important}
  .adminReferenceNav button::first-letter{font-size:20px}
  .adminReferenceAdminCard{justify-content:center;padding:9px 4px}
  .adminReferenceAdminCard img{width:42px;height:42px}
  .adminReferenceMain{margin-left:82px;padding:12px}
  .adminReferenceMain .adminResultCards{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:600px){
  .adminReferenceMain{margin-left:0;padding:8px;padding-top:74px}
  .adminReferenceSidebar{
    right:0;bottom:auto;width:100%;height:62px;
    padding:6px 8px;flex-direction:row;align-items:center;
  }
  .adminReferenceBrand{display:none}
  .adminReferenceNav{flex:1;display:grid !important;grid-template-columns:repeat(4,1fr);gap:4px !important}
  .adminReferenceNav button{min-height:50px !important}
  .adminReferenceBottom{display:none}
  .adminReferenceMain #adminOnlyDashboard > .dashPanel:first-of-type{min-height:76px;padding:14px !important}
  .adminReferenceMain .adminResultCards{grid-template-columns:1fr !important}
  .adminReferenceMain .resultToolbar>*{flex:1 1 100% !important;width:100%}
}


/* Responsive UI fix: CSS only. Existing JS/Supabase logic is untouched. */
@media (min-width:769px){
 body.admin-ui>.header{display:block!important;position:fixed!important;top:14px!important;right:18px!important;width:auto!important;height:auto!important;padding:0!important;margin:0!important;background:transparent!important;z-index:10001!important;pointer-events:none}
 body.admin-ui>.header>.brand{display:none!important}
 body.admin-ui>.header>.headerRight{display:flex!important;align-items:center!important;gap:8px!important;pointer-events:auto}
 body.admin-ui>.header #adminHeaderLogout{display:inline-flex!important;align-items:center;justify-content:center;min-height:40px!important;white-space:nowrap;font-size:13px!important;padding:0 13px!important}
 body.admin-ui>.header #studentHeaderLogout,body.admin-ui>.header #headerTimer{display:none!important}
 .adminReferenceMain{margin-left:250px!important;width:calc(100vw - 250px)!important;max-width:none!important;padding:18px 18px 26px!important;overflow-x:hidden!important;font-size:14px!important}
 .adminReferenceMain>#adminOnlyDashboard{width:100%!important;max-width:1250px!important;margin-left:auto!important;margin-right:auto!important}
 .adminReferenceMain h3{font-size:18px!important}
 .adminReferenceMain .adminReferenceTopbarTitle{font-size:22px!important}
 .adminReferenceMain .adminReferenceTopbarSub{font-size:13px!important}
 .adminReferenceMain .adminReferenceNav button{font-size:14px!important}
 .adminReferenceMain table{font-size:13px!important}
}
@media (min-width:769px) and (max-width:1500px){
 .adminReferenceMain>#adminOnlyDashboard{max-width:calc(100vw - 286px)!important}
 .adminReferenceMain .resultTableWrap,.adminReferenceMain .testWiseTableWrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
}
@media (min-width:769px) and (max-width:1100px){
 .adminReferenceSidebar{width:220px!important;padding-left:9px!important;padding-right:9px!important}
 .adminReferenceMain{margin-left:220px!important;width:calc(100vw - 220px)!important;padding:14px!important}
 .adminReferenceMain>#adminOnlyDashboard{max-width:calc(100vw - 248px)!important}
 .adminReferenceBrandTitle{font-size:18px!important}
 .adminReferenceNav button{padding-left:10px!important;padding-right:10px!important}
 .adminReferenceMain .adminResultCards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:768px){
 body.admin-ui>.header{display:block!important;position:fixed!important;top:8px!important;right:8px!important;width:auto!important;height:auto!important;padding:0!important;margin:0!important;background:transparent!important;z-index:10002!important;pointer-events:none}
 body.admin-ui>.header>.brand{display:none!important}
 body.admin-ui>.header>.headerRight{display:flex!important;pointer-events:auto}
 body.admin-ui>.header #adminHeaderLogout{display:inline-flex!important;align-items:center;justify-content:center;min-height:38px!important;padding:0 10px!important;font-size:11px!important;white-space:nowrap}
 body.admin-ui>.header #studentHeaderLogout,body.admin-ui>.header #headerTimer{display:none!important}
 .adminReferenceSidebar{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%!important;height:calc(64px + env(safe-area-inset-bottom))!important;min-height:64px!important;padding:4px 7px env(safe-area-inset-bottom)!important;display:flex!important;flex-direction:row!important;align-items:center!important;z-index:10000!important}
 .adminReferenceBrand,.adminReferenceBottom{display:none!important}
 .adminReferenceNav{width:100%!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important}
 .adminReferenceNav button{width:100%!important;min-width:0!important;min-height:54px!important;height:54px!important;padding:3px 2px!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:2px!important;font-size:10px!important;line-height:1.1!important;text-align:center!important}
 .adminReferenceNav button::first-letter{font-size:19px!important}
 .adminReferenceMain{margin-left:0!important;width:100%!important;max-width:100%!important;padding:70px 10px calc(76px + env(safe-area-inset-bottom))!important;overflow-x:hidden!important}
 .adminReferenceMain>#adminOnlyDashboard{width:100%!important;max-width:100%!important}
 .adminReferenceMain #adminOnlyDashboard>.dashPanel:first-of-type{padding:14px!important;min-height:72px!important}
 .adminReferenceMain .adminResultCards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
 .adminReferenceMain .resultToolbar,.adminReferenceMain .testWiseToolbar{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
 .adminReferenceMain .resultToolbar>*,.adminReferenceMain .testWiseToolbar>*{min-width:0!important;width:100%!important}
 .adminReferenceMain .resultToolbar input{grid-column:1/-1}
 .adminReferenceMain .resultTableWrap,.adminReferenceMain .testWiseTableWrap{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
 .adminReferenceMain table{min-width:760px;font-size:12px!important}
}
@media (max-width:520px){
 body.admin-ui>.header #adminHeaderLogout{min-height:36px!important;padding:0 8px!important;font-size:10px!important;border-radius:8px!important}
 .adminReferenceMain{padding:62px 7px calc(76px + env(safe-area-inset-bottom))!important}
 .adminReferenceMain #adminOnlyDashboard>.dashPanel:first-of-type{padding:12px!important}
 .adminReferenceMain .adminReferenceTopbarTitle{font-size:18px!important}
 .adminReferenceMain .adminReferenceTopbarSub{font-size:11px!important}
 .adminReferenceMain .adminResultCards{grid-template-columns:1fr 1fr!important;gap:7px!important}
 .adminReferenceMain .adminResultCard{min-height:84px!important;padding:11px 8px 11px 50px!important}
 .adminReferenceMain .resultToolbar,.adminReferenceMain .testWiseToolbar{grid-template-columns:1fr!important}
 .adminReferenceMain .resultToolbar input{grid-column:auto!important}
 .adminReferenceNav button{font-size:9px!important}
 .adminReferenceNav button::first-letter{font-size:18px!important}
}
@media (max-width:768px){
 body:not(.admin-ui) .header{width:100%;max-width:100%}
 body:not(.admin-ui) .headerRight{min-width:0}
 body:not(.admin-ui) .headerLogoutBtn{white-space:nowrap}
 body:not(.admin-ui) .container{width:100%;max-width:1100px;padding-left:12px;padding-right:12px}
}


/* ============================================================
   HUB OF ASPIRANTS — POLISHED LAPTOP + MOBILE UI
   VISUAL LAYER ONLY
   ============================================================ */

:root{
  --mt-navy:#061a36;
  --mt-navy-2:#0a2850;
  --mt-blue:#1769e0;
  --mt-blue-2:#0b5ed7;
  --mt-bg:#f5f7fb;
  --mt-card:#ffffff;
  --mt-border:#e4e9f2;
  --mt-text:#152238;
  --mt-muted:#68758a;
  --mt-green:#159447;
  --mt-red:#d9363e;
  --mt-shadow:0 8px 28px rgba(18,42,76,.08);
  --mt-radius:14px;
}

/* ---------- Global anti-overflow / readable typography ---------- */
html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  font-size:16px;
}

body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  background:var(--mt-bg);
  color:var(--mt-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

*,*::before,*::after{
  box-sizing:border-box;
}

img,svg,canvas,video{
  max-width:100%;
}

button,input,select,textarea{
  font:inherit;
  max-width:100%;
}

button{
  -webkit-tap-highlight-color:transparent;
}

/* ============================================================
   ADMIN — LAPTOP
   ============================================================ */

@media (min-width:769px){

  .adminReferenceSidebar{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:252px !important;
    min-width:252px !important;
    z-index:10000 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    background:linear-gradient(180deg,var(--mt-navy) 0%,#08234a 100%) !important;
    box-shadow:8px 0 30px rgba(4,20,42,.12);
  }

  .adminReferenceMain{
    position:relative !important;
    margin-left:252px !important;
    width:calc(100vw - 252px) !important;
    max-width:none !important;
    min-width:0 !important;
    padding:24px 28px 34px !important;
    overflow-x:hidden !important;
  }

  .adminReferenceMain > #adminOnlyDashboard{
    width:100% !important;
    max-width:1380px !important;
    margin:0 auto !important;
  }

  .adminReferenceBrand{
    padding:18px 16px 16px !important;
  }

  .adminReferenceNav{
    padding:8px 10px !important;
  }

  .adminReferenceNav button{
    min-height:46px !important;
    margin:3px 0 !important;
    padding:0 13px !important;
    border-radius:10px !important;
    font-size:14px !important;
    font-weight:600 !important;
    transition:background .18s ease,transform .18s ease;
  }

  .adminReferenceNav button:hover{
    transform:translateX(2px);
  }

  .adminReferenceMain .dashPanel,
  .adminReferenceMain .testWisePanel{
    background:#fff !important;
    border:1px solid var(--mt-border) !important;
    border-radius:var(--mt-radius) !important;
    box-shadow:var(--mt-shadow) !important;
  }

  .adminReferenceMain .adminResultCards{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:16px !important;
    margin-bottom:18px !important;
  }

  .adminReferenceMain .adminResultCard{
    min-width:0 !important;
    min-height:112px !important;
    border:1px solid var(--mt-border) !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:0 5px 18px rgba(18,42,76,.06) !important;
  }

  .adminReferenceMain .resultToolbar,
  .adminReferenceMain .testWiseToolbar{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:10px !important;
  }

  .adminReferenceMain .resultToolbar input,
  .adminReferenceMain .resultToolbar select,
  .adminReferenceMain .testWiseToolbar input,
  .adminReferenceMain .testWiseToolbar select{
    min-height:42px !important;
    border:1px solid #d9e0eb !important;
    border-radius:9px !important;
    background:#fff !important;
  }

  .adminReferenceMain .resultTableWrap,
  .adminReferenceMain .testWiseTableWrap{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
    border:1px solid var(--mt-border);
    border-radius:11px;
  }

  .adminReferenceMain table{
    width:100% !important;
    min-width:760px;
    border-collapse:separate !important;
    border-spacing:0 !important;
    font-size:13px !important;
  }

  .adminReferenceMain th{
    white-space:nowrap;
    font-weight:700 !important;
  }

  /* Smaller laptop: use space intelligently without shrinking text. */
  @media (max-width:1250px){
    .adminReferenceSidebar{
      width:226px !important;
      min-width:226px !important;
    }

    .adminReferenceMain{
      margin-left:226px !important;
      width:calc(100vw - 226px) !important;
      padding:18px 18px 28px !important;
    }

    .adminReferenceMain > #adminOnlyDashboard{
      max-width:100% !important;
    }

    .adminReferenceMain .adminResultCards{
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
  }
}

/* ============================================================
   ADMIN — MOBILE
   ============================================================ */

@media (max-width:768px){

  body.admin-ui{
    padding-bottom:0 !important;
  }

  /* Keep the logout action visible and floating above content. */
  body.admin-ui > .header{
    display:block !important;
    position:fixed !important;
    top:8px !important;
    right:9px !important;
    width:auto !important;
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    z-index:10020 !important;
    pointer-events:none !important;
  }

  body.admin-ui > .header > .brand{
    display:none !important;
  }

  body.admin-ui > .header > .headerRight{
    display:flex !important;
    align-items:center !important;
    pointer-events:auto !important;
  }

  body.admin-ui > .header #adminHeaderLogout{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:38px !important;
    padding:0 11px !important;
    border-radius:9px !important;
    font-size:11px !important;
    font-weight:700 !important;
    white-space:nowrap !important;
    box-shadow:0 5px 15px rgba(4,20,42,.18);
  }

  body.admin-ui > .header #studentHeaderLogout,
  body.admin-ui > .header #headerTimer{
    display:none !important;
  }

  .adminReferenceSidebar{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:0 !important;
    width:100% !important;
    height:68px !important;
    min-height:68px !important;
    padding:4px 7px env(safe-area-inset-bottom) !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    background:linear-gradient(180deg,#071d3c 0%,#04172f 100%) !important;
    border-top:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 -10px 30px rgba(4,20,42,.16) !important;
    z-index:10010 !important;
  }

  .adminReferenceBrand,
  .adminReferenceBottom{
    display:none !important;
  }

  .adminReferenceNav{
    width:100% !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:4px !important;
  }

  .adminReferenceNav button{
    min-width:0 !important;
    width:100% !important;
    height:58px !important;
    min-height:58px !important;
    margin:0 !important;
    padding:4px 2px !important;
    border-radius:9px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    gap:2px !important;
    font-size:10px !important;
    line-height:1.05 !important;
    text-align:center !important;
    white-space:normal !important;
  }

  .adminReferenceNav button:hover{
    transform:none !important;
  }

  .adminReferenceMain{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    padding:64px 10px calc(78px + env(safe-area-inset-bottom)) !important;
    overflow-x:hidden !important;
  }

  .adminReferenceMain > #adminOnlyDashboard{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }

  .adminReferenceMain .dashPanel,
  .adminReferenceMain .testWisePanel{
    border-radius:13px !important;
    box-shadow:0 5px 18px rgba(18,42,76,.06) !important;
  }

  .adminReferenceMain .adminResultCards{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
  }

  .adminReferenceMain .adminResultCard{
    min-width:0 !important;
    min-height:92px !important;
    padding:12px !important;
    border-radius:12px !important;
  }

  .adminReferenceMain .resultToolbar,
  .adminReferenceMain .testWiseToolbar{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  .adminReferenceMain .resultToolbar > *,
  .adminReferenceMain .testWiseToolbar > *{
    min-width:0 !important;
    width:100% !important;
  }

  .adminReferenceMain .resultToolbar input{
    grid-column:1 / -1 !important;
  }

  .adminReferenceMain .resultTableWrap,
  .adminReferenceMain .testWiseTableWrap{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .adminReferenceMain table{
    min-width:780px !important;
    font-size:12px !important;
  }

  .adminReferenceMain h2{
    font-size:20px !important;
  }

  .adminReferenceMain h3{
    font-size:17px !important;
  }
}

/* ---------- Very small phones ---------- */
@media (max-width:420px){

  body.admin-ui > .header #adminHeaderLogout{
    min-height:36px !important;
    padding:0 9px !important;
    font-size:10px !important;
  }

  .adminReferenceMain{
    padding-left:7px !important;
    padding-right:7px !important;
  }

  .adminReferenceMain .adminResultCards{
    gap:7px !important;
  }

  .adminReferenceMain .adminResultCard{
    min-height:84px !important;
    padding:10px !important;
  }

  .adminReferenceMain .resultToolbar,
  .adminReferenceMain .testWiseToolbar{
    grid-template-columns:1fr !important;
  }

  .adminReferenceMain .resultToolbar input{
    grid-column:auto !important;
  }

  .adminReferenceNav button{
    font-size:9px !important;
  }
}

/* ============================================================
   STUDENT UI — POLISHED RESPONSIVENESS
   ============================================================ */

@media (max-width:768px){

  body:not(.admin-ui) .header{
    width:100% !important;
    min-height:58px !important;
    padding:8px 10px !important;
    gap:7px !important;
  }

  body:not(.admin-ui) .headerRight{
    min-width:0 !important;
    gap:6px !important;
  }

  body:not(.admin-ui) .headerLogoutBtn{
    max-width:130px !important;
    min-height:38px !important;
    padding:0 9px !important;
    font-size:11px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body:not(.admin-ui) .container{
    width:100% !important;
    max-width:1100px !important;
    padding:12px !important;
    margin:0 auto !important;
  }

  body:not(.admin-ui) .card{
    border-radius:14px !important;
    padding:16px !important;
  }

  body:not(.admin-ui) .info,
  body:not(.admin-ui) .stats{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
  }

  body:not(.admin-ui) .dashGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  body:not(.admin-ui) .examGrid{
    grid-template-columns:1fr !important;
  }

  body:not(.admin-ui) .question{
    font-size:18px !important;
    line-height:1.5 !important;
  }

  body:not(.admin-ui) .option{
    min-height:52px !important;
    padding:13px !important;
    border-radius:11px !important;
  }

  body:not(.admin-ui) .palette{
    grid-template-columns:repeat(6,minmax(40px,1fr)) !important;
    overflow-x:auto !important;
    padding-bottom:4px !important;
  }

  body:not(.admin-ui) .nav{
    gap:8px !important;
    flex-wrap:wrap !important;
  }

  body:not(.admin-ui) .nav button{
    min-height:46px !important;
  }
}

@media (max-width:480px){

  body:not(.admin-ui) .container{
    padding:8px !important;
  }

  body:not(.admin-ui) .info,
  body:not(.admin-ui) .stats,
  body:not(.admin-ui) .dashGrid{
    grid-template-columns:1fr !important;
  }

  body:not(.admin-ui) .question{
    font-size:17px !important;
  }

  body:not(.admin-ui) .option{
    font-size:14px !important;
  }

  body:not(.admin-ui) .palette{
    grid-template-columns:repeat(5,minmax(40px,1fr)) !important;
  }

  body:not(.admin-ui) .nav button{
    width:100% !important;
    flex-basis:100% !important;
  }
}

/* ---------- Touch quality ---------- */
@media (hover:none) and (pointer:coarse){

  button,
  select,
  input,
  .option,
  .pbtn{
    touch-action:manipulation;
  }

  .adminReferenceNav button,
  body:not(.admin-ui) button{
    -webkit-tap-highlight-color:transparent;
  }
}

/* ---------- Accessibility / polish ---------- */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}


/*
  HUB OF ASPIRANTS — 1080P LAPTOP DEFAULT
  Target desktop canvas: 1920 x 1080.
  The layout remains fluid below/above this size.
*/

@media (min-width:769px){

  html, body{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  /* Fixed 1080p-friendly navigation rail */
  .adminReferenceSidebar{
    width:250px !important;
    min-width:250px !important;
  }

  /* 1920px screen:
     250px sidebar + 28px gutters + max 1440px content.
     This keeps the dashboard comfortably centered rather than stretched. */
  .adminReferenceMain{
    margin-left:250px !important;
    width:calc(100vw - 250px) !important;
    max-width:none !important;
    padding:22px 28px 30px !important;
  }

  .adminReferenceMain > #adminOnlyDashboard{
    width:100% !important;
    max-width:1440px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* Comfortable 1080p typography */
  .adminReferenceMain,
  .adminReferenceMain button,
  .adminReferenceMain input,
  .adminReferenceMain select{
    font-size:14px !important;
  }

  .adminReferenceMain h1{
    font-size:25px !important;
  }

  .adminReferenceMain h2{
    font-size:22px !important;
  }

  .adminReferenceMain h3{
    font-size:18px !important;
  }

  .adminReferenceMain table{
    font-size:13px !important;
  }

  .adminReferenceMain .adminResultCards{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:16px !important;
  }

  .adminReferenceMain .adminResultCard{
    min-height:108px !important;
  }

  /* Keep every panel inside the viewport */
  .adminReferenceMain .dashPanel,
  .adminReferenceMain .testWisePanel,
  .adminReferenceMain .resultTableWrap,
  .adminReferenceMain .testWiseTableWrap{
    max-width:100% !important;
  }

  /* 1366x768 and similar laptops */
  @media (min-width:769px) and (max-width:1500px){
    .adminReferenceMain{
      padding:18px 20px 26px !important;
    }

    .adminReferenceMain > #adminOnlyDashboard{
      max-width:100% !important;
    }

    .adminReferenceMain .adminResultCards{
      grid-template-columns:repeat(4,minmax(0,1fr)) !important;
      gap:12px !important;
    }

    .adminReferenceMain .adminResultCard{
      min-height:98px !important;
    }
  }

  /* 1024–1199px desktop/tablet landscape */
  @media (min-width:769px) and (max-width:1199px){
    .adminReferenceSidebar{
      width:220px !important;
      min-width:220px !important;
    }

    .adminReferenceMain{
      margin-left:220px !important;
      width:calc(100vw - 220px) !important;
      padding:15px !important;
    }

    .adminReferenceMain .adminResultCards{
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
  }
}

/* 1080p exam canvas: use the available screen without making text tiny */
@media (min-width:769px){
  body.mission-exam-active #exam{
    width:calc(100vw - 48px) !important;
    max-width:1400px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    font-size:15px !important;
  }

  body.mission-exam-active .question{
    font-size:19px !important;
    line-height:1.55 !important;
  }

  body.mission-exam-active .option{
    min-height:52px !important;
    padding:13px 15px !important;
  }
}


/*
  IMPORTANT:
  Windows display scaling can make a 1920x1080 laptop report a CSS viewport
  below 900px. The previous max-width:900px rule therefore treated the
  laptop as a tablet and shrank the UI.

  This layer uses a fine mouse/trackpad pointer to identify a laptop/desktop,
  while touch phones continue to use the mobile layout.
*/

/* ================= LAPTOP / DESKTOP ================= */
@media (hover:hover) and (pointer:fine) and (min-width:700px){

  html{
    font-size:16px !important;
  }

  body{
    font-size:16px !important;
    min-width:0 !important;
    overflow-x:hidden !important;
  }

  /* Restore full desktop sidebar even when CSS viewport is < 900px */
  .adminReferenceSidebar{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    right:auto !important;
    width:250px !important;
    min-width:250px !important;
    height:100vh !important;
    padding:24px 12px 14px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    background:linear-gradient(180deg,#061a36 0%,#082b58 100%) !important;
    z-index:10000 !important;
  }

  .adminReferenceBrand{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    padding:4px 10px 24px !important;
  }

  .adminReferenceBrandTitle,
  .adminReferenceBrandSub,
  .adminReferenceAdminTitle,
  .adminReferenceAdminSub,
  .adminReferenceFooter{
    display:block !important;
  }

  .adminReferenceNav{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:5px !important;
  }

  .adminReferenceNav button{
    width:100% !important;
    min-height:46px !important;
    height:46px !important;
    display:flex !important;
    flex-direction:row !important;
    justify-content:flex-start !important;
    align-items:center !important;
    padding:0 13px !important;
    font-size:14px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }

  /* Student main workspace */
  body:not(.admin-ui) .header{
    width:calc(100% - 250px) !important;
    margin-left:250px !important;
    min-height:58px !important;
    padding:10px 20px !important;
    display:flex !important;
  }

  body:not(.admin-ui) .headerRight{
    gap:10px !important;
  }

  body:not(.admin-ui) .headerLogoutBtn{
    min-height:40px !important;
    padding:0 14px !important;
    font-size:13px !important;
    font-weight:700 !important;
  }

  body:not(.admin-ui) main.container{
    width:calc(100% - 250px) !important;
    max-width:none !important;
    margin-left:250px !important;
    margin-right:0 !important;
    padding:24px 34px 40px !important;
  }

  body:not(.admin-ui) #home{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  body:not(.admin-ui) #studentOnlyDashboard{
    width:100% !important;
    max-width:1440px !important;
    margin:20px auto 0 !important;
    padding:0 !important;
  }

  /* Candidate dashboard tabs */
  body:not(.admin-ui) .candidateSectionNav{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  body:not(.admin-ui) .candidateSectionNav button{
    min-height:50px !important;
    font-size:15px !important;
    font-weight:700 !important;
  }

  /* Candidate profile */
  body:not(.admin-ui) .profileCard{
    width:100% !important;
    min-height:72px !important;
    padding:16px 18px !important;
  }

  body:not(.admin-ui) #profileName{
    font-size:18px !important;
  }

  body:not(.admin-ui) #profileEmail,
  body:not(.admin-ui) #profileAcademic{
    font-size:13px !important;
  }

  /* Statistics */
  body:not(.admin-ui) .dashGrid{
    width:100% !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:14px !important;
  }

  body:not(.admin-ui) .dashStat{
    min-height:92px !important;
    padding:16px !important;
  }

  body:not(.admin-ui) .dashStat b{
    font-size:22px !important;
  }

  body:not(.admin-ui) .dashStat span{
    font-size:13px !important;
  }

  /* Available test cards */
  body:not(.admin-ui) .testItem,
  body:not(.admin-ui) .testCard{
    width:100% !important;
    min-height:74px !important;
    padding:16px 18px !important;
  }

  body:not(.admin-ui) .testItem b,
  body:not(.admin-ui) .testCard b{
    font-size:15px !important;
  }

  body:not(.admin-ui) .testMeta{
    font-size:12px !important;
  }

  body:not(.admin-ui) .testItem button,
  body:not(.admin-ui) .testCard button{
    min-height:42px !important;
    padding:0 16px !important;
    font-size:13px !important;
  }

  /* Generic candidate panels */
  body:not(.admin-ui) .card,
  body:not(.admin-ui) .dashPanel,
  body:not(.admin-ui) .panel{
    font-size:15px !important;
  }

  body:not(.admin-ui) .card h2,
  body:not(.admin-ui) .card h3,
  body:not(.admin-ui) .dashPanel h2,
  body:not(.admin-ui) .dashPanel h3{
    font-size:19px !important;
  }

  /* Exam screen — broad 1080p desktop canvas */
  body.mission-exam-active .header{
    width:100% !important;
    margin-left:0 !important;
  }

  body.mission-exam-active #exam{
    width:calc(100% - 68px) !important;
    max-width:1440px !important;
    margin:0 auto !important;
    padding:18px 0 40px !important;
    font-size:16px !important;
  }

  body.mission-exam-active .question{
    font-size:20px !important;
    line-height:1.55 !important;
  }

  body.mission-exam-active .option{
    min-height:56px !important;
    padding:14px 17px !important;
    font-size:15px !important;
  }
}

/* ================= TRUE TOUCH DEVICES ================= */
@media (hover:none) and (pointer:coarse){
  /* Keep the existing mobile/bottom-navigation design. */
  .adminReferenceSidebar{
    width:100% !important;
  }
}


/*
  STUDENT PORTAL UI CLEANUP
  UI ONLY — no JavaScript, Supabase, authentication, or quiz logic changed.
*/

/* Student portal: hide admin-only navigation items. */
body:not(.admin-ui) .adminReferenceNav button[data-section="test-making"],
body:not(.admin-ui) .adminReferenceNav button[data-section="admin-section"],
body:not(.admin-ui) .adminReferenceNav button[data-section="admin"],
body:not(.admin-ui) .adminReferenceNav .test-making-nav,
body:not(.admin-ui) .adminReferenceNav .admin-section-nav,
body:not(.admin-ui) .adminReferenceNav .admin-only{
  display:none !important;
}

/* Also hide common text-based admin navigation wrappers if present. */
body:not(.admin-ui) .adminReferenceNav a[href*="test-making"],
body:not(.admin-ui) .adminReferenceNav a[href*="admin"]{
  display:none !important;
}

/* Keep the student sidebar compact and clean. */
@media (hover:hover) and (pointer:fine) and (min-width:700px){
  body:not(.admin-ui) .adminReferenceNav{
    gap:7px !important;
  }

  body:not(.admin-ui) .adminReferenceNav button{
    min-height:44px !important;
  }
}

/* Touch/mobile student navigation remains responsive. */
@media (hover:none) and (pointer:coarse){
  body:not(.admin-ui) .adminReferenceNav button{
    min-height:46px !important;
  }
}


/*
  STUDENT SIDEBAR — FINAL UI FIX
  The sidebar is built from the existing adminSectionNav and therefore
  the buttons keep their original IDs. Hide those exact admin buttons
  whenever the admin dashboard is not active.
  UI ONLY — no JS/Supabase/quiz logic changed.
*/

/* Student mode: only Student Section remains in the sidebar. */
body:not(.admin-ui) #adminReferenceSidebar #adminNavTest,
body:not(.admin-ui) #adminReferenceSidebar #adminNavResult,
body:not(.admin-ui) #adminReferenceSidebar #adminNavAdmin{
  display:none !important;
}

/* If the navigation is temporarily outside the sidebar during setup,
   still hide the three admin-only buttons in student mode. */
body:not(.admin-ui) #adminNavTest,
body:not(.admin-ui) #adminNavResult,
body:not(.admin-ui) #adminNavAdmin{
  display:none !important;
}

/* Keep the actual candidate dashboard's 📊 Result Section untouched.
   This rule affects only the sidebar/admin navigation buttons above. */
body:not(.admin-ui) #studentOnlyDashboard #candidateNavResult{
  display:block !important;
}




/* Common content-branding wrappers */
.mainContentBranding,
.contentBranding,
.workspaceBranding,
.portalBranding,
.dashboardBranding,
.homeBranding,
.heroBranding,
.welcomeBranding,
.brandingHero{
  display:none !important;
}

/* Hide the specific large branding block when it is identifiable by
   the platform subtitle. */
*:has(> *:is(.brandSubtitle,.platformSubtitle,.tagline)){
  /* no-op: kept for compatibility; specific selectors below handle it */
}

/* Student/Admin white-workspace logo/brand area */
#home .logo-section,
#home .home-logo,
#home .welcome-logo,
#home .brand-block,
#home .hero-logo,
#home .portal-branding,
#home .platform-branding,
#home .mission-branding{
  display:none !important;
}

/* Do not remove sidebar/header logos. */
.adminReferenceSidebar img,
.header img,
.headerLogo,
.adminReferenceBrand img{
  display:initial;
}

/* If the white branding is a direct image/text block, remove only the
   branding element carrying the platform subtitle. */
[id*="branding" i][id*="home" i],
[class*="branding" i][class*="home" i]{
  display:none !important;
}

/* Prevent an empty reserved branding area from consuming space. */
#home .branding-space,
#home .hero-space,
#home .welcome-space{
  display:none !important;
}


/*
  HUB OF ASPIRANTS — CONTENT BRANDING REMOVAL
  UI ONLY. Removes the large Mission TES logo/title/platform text from
  the white workspace in both Student and Admin areas.
  Sidebar/header branding remains untouched.
*/

/* Student white workspace branding
   Keep the student dashboard/content visible; hide only the branding block. */
main #home .studentWelcome .brand-logo,
main #home .studentWelcome .studentWelcomeBrand,
main #home .studentWelcome .welcomeBrand,
main #home .studentWelcome .platformBranding{
  display:none !important;
}

/* Admin white workspace branding header.
   This specific panel contains the second .brand-logo in the document. */
main .dashPanel:has(> div > img.brand-logo){
  display:none !important;
}

/* Safety: never hide the sidebar/header branding. */
.adminReferenceSidebar .brand-logo,
header .brand-logo,
.header .brand-logo{
  display:block !important;
}


/*
  FINAL STUDENT UI FIX
  The previous version hid the entire .studentWelcome container, which also
  contained the student's dashboard content. Only its branding/logo area
  should be hidden.
*/
main #home .studentWelcome{
  display:block !important;
}

/* Hide only branding images inside the student welcome area. */
main #home .studentWelcome img.brand-logo{
  display:none !important;
}

/* Hide common branding text elements inside the welcome area only. */
main #home .studentWelcome .brand-title,
main #home .studentWelcome .brand-subtitle,
main #home .studentWelcome .platform-title,
main #home .studentWelcome .platform-subtitle{
  display:none !important;
}


/* =========================================================
   HUB OF ASPIRANTS — FINAL RESPONSIVE UI
   Desktop + Mobile
   UI ONLY: no application/Supabase/quiz/result JS is changed.
   ========================================================= */

* { box-sizing:border-box; }

/* ---------- DESKTOP / LAPTOP ---------- */
@media (min-width:700px){
  html, body{
    width:100%;
    min-width:0;
    overflow-x:hidden !important;
  }

  body.admin-ui .adminReferenceSidebar{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:250px !important;
    height:100vh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    z-index:10000 !important;
  }

  body.admin-ui .adminReferenceMain{
    margin-left:250px !important;
    width:calc(100vw - 250px) !important;
    max-width:none !important;
    min-width:0 !important;
    padding:76px 24px 32px !important;
    overflow-x:hidden !important;
  }

  body.admin-ui .adminReferenceMain > #adminOnlyDashboard{
    width:100% !important;
    max-width:1440px !important;
    margin:0 auto !important;
  }

  /* Existing application header becomes the desktop header. */
  body.admin-ui > .header{
    position:fixed !important;
    left:250px !important;
    right:0 !important;
    top:0 !important;
    width:calc(100vw - 250px) !important;
    height:58px !important;
    min-height:58px !important;
    z-index:10001 !important;
    margin:0 !important;
  }

  /* Never allow the old student/home branding layer behind admin. */
  body.admin-ui #home > .studentWelcome{
    display:none !important;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width:699px){
  html, body{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body{
    padding:0 !important;
    margin:0 !important;
  }

  /*
    IMPORTANT:
    The old global .header is the ghost header seen in the mobile
    screenshot ("Candidate Portal" + duplicate HUB OF ASPIRANTS).
    The admin mobile shell already has its own content structure,
    so remove the old header completely on mobile.
  */
  body.admin-ui > .header{
    display:none !important;
  }

  body.admin-ui #home > .studentWelcome{
    display:none !important;
  }

  /* Do not show the desktop sidebar on phones. */
  body.admin-ui .adminReferenceSidebar{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    height:calc(68px + env(safe-area-inset-bottom)) !important;
    min-height:68px !important;
    padding:4px 6px env(safe-area-inset-bottom) !important;
    display:block !important;
    overflow:hidden !important;
    background:linear-gradient(180deg,#071f40,#04172f) !important;
    border-top:1px solid rgba(255,255,255,.12) !important;
    box-shadow:0 -8px 26px rgba(4,20,42,.18) !important;
    z-index:10050 !important;
  }

  /* Hide desktop-only sidebar branding/footer. */
  body.admin-ui .adminReferenceBrand,
  body.admin-ui .adminReferenceBottom{
    display:none !important;
  }

  /* Existing admin navigation becomes the mobile bottom navigation. */
  body.admin-ui .adminReferenceNav{
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:4px !important;
    align-items:center !important;
  }

  body.admin-ui .adminReferenceNav button{
    width:100% !important;
    min-width:0 !important;
    height:58px !important;
    min-height:58px !important;
    margin:0 !important;
    padding:4px 2px !important;
    border-radius:10px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    font-size:11px !important;
    line-height:1.05 !important;
    white-space:normal !important;
    overflow:hidden !important;
  }

  body.admin-ui .adminReferenceNav button.active{
    background:#2585ed !important;
    color:#fff !important;
  }

  /* Main workspace: no desktop left margin and no hidden header gap. */
  body.admin-ui .adminReferenceMain{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:12px 10px calc(82px + env(safe-area-inset-bottom)) !important;
    overflow-x:hidden !important;
  }

  body.admin-ui .adminReferenceMain > #adminOnlyDashboard{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* Dashboard/Result/Test/Admin content must remain visible. */
  body.admin-ui #adminOnlyDashboard{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  body.admin-ui #adminOnlyDashboard .adminSectionPanel.active{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
  }

  body.admin-ui #adminOnlyDashboard .adminSectionPanel:not(.active){
    display:none !important;
  }

  /* Current dashboard/result cards use the full phone width. */
  body.admin-ui .adminReferenceMain .dashPanel,
  body.admin-ui .adminReferenceMain .testWisePanel{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    border-radius:14px !important;
  }

  /* Result statistics: two columns on phones. */
  body.admin-ui .adminReferenceMain .adminResultCards{
    width:100% !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
  }

  body.admin-ui .adminReferenceMain .adminResultCard{
    min-width:0 !important;
    min-height:92px !important;
    padding:12px !important;
  }

  /* Result filters stack cleanly instead of being squeezed. */
  body.admin-ui .adminReferenceMain .resultToolbar,
  body.admin-ui .adminReferenceMain .testWiseToolbar{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  body.admin-ui .adminReferenceMain .resultToolbar > *,
  body.admin-ui .adminReferenceMain .testWiseToolbar > *{
    width:100% !important;
    min-width:0 !important;
  }

  body.admin-ui .adminReferenceMain .resultToolbar input{
    grid-column:1 / -1 !important;
  }

  /* Wide result tables scroll horizontally inside their own card. */
  body.admin-ui .adminReferenceMain .resultTableWrap,
  body.admin-ui .adminReferenceMain .testWiseTableWrap{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  body.admin-ui .adminReferenceMain table{
    min-width:760px !important;
    font-size:12px !important;
  }

  /* Prevent the fixed bottom nav from covering the last card. */
  body.admin-ui .adminReferenceMain{
    padding-bottom:calc(92px + env(safe-area-inset-bottom)) !important;
  }

  /* Mobile logout, wherever the existing admin logout is rendered. */
  body.admin-ui #adminHeaderLogout{
    min-height:40px !important;
    min-width:0 !important;
    padding:0 14px !important;
    border-radius:10px !important;
    font-size:12px !important;
  }
}

/* ---------- SMALL PHONES ---------- */
@media (max-width:390px){
  body.admin-ui .adminReferenceMain{
    padding-left:7px !important;
    padding-right:7px !important;
  }

  body.admin-ui .adminReferenceNav button{
    height:56px !important;
    min-height:56px !important;
    font-size:10px !important;
  }

  body.admin-ui .adminResultCards{
    gap:7px !important;
  }

  body.admin-ui .adminResultCard{
    padding:10px !important;
  }
}


/* V1.3: one explicit Admin workspace, one explicit exam state. */
body.admin-ui #adminSectionResultPanel.v13-active{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
}
body.admin-ui #adminSectionResultPanel.v13-active > .dashPanel{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
body.admin-ui #adminSectionResultPanel.v13-active .adminResultCards{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:14px !important;
}
body.admin-ui #adminSectionResultPanel.v13-active .resultToolbar,
body.admin-ui #adminSectionResultPanel.v13-active .testWiseToolbar{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:10px !important;
}
body.admin-ui #adminSectionResultPanel.v13-active #adminResultList,
body.admin-ui #adminSectionResultPanel.v13-active #adminResultDetail,
body.admin-ui #adminSectionResultPanel.v13-active #testWiseResultPanel{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
}
body.v13-exam-active #authScreen,
body.v13-exam-active #home,
body.v13-exam-active #adminOnlyDashboard,
body.v13-exam-active #studentOnlyDashboard{
  display:none !important;
}
body.v13-exam-active #exam{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
body.v13-exam-active #testCountdownOverlay.hidden{display:none !important;}
body.admin-ui #adminPreviewExit.v13-visible{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
}
@media(max-width:900px){
  body.admin-ui #adminSectionResultPanel.v13-active .adminResultCards{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:600px){
  body.admin-ui #adminSectionResultPanel.v13-active .adminResultCards{grid-template-columns:1fr !important;}
  body.admin-ui #adminSectionResultPanel.v13-active .resultToolbar,
  body.admin-ui #adminSectionResultPanel.v13-active .testWiseToolbar{display:grid !important;grid-template-columns:1fr !important;}
}



/* --- Original style block 2 --- */

/* HUB OF ASPIRANTS V1.4 — UI STRUCTURE NORMALIZATION ONLY
   Functional logic, Supabase, authentication, test engine and results logic untouched. */
:root{
  --v14-admin-sidebar:250px;
  --v14-admin-header:58px;
  --v14-admin-mobile-nav:68px;
}

/* ===== ADMIN DESKTOP: one geometry system ===== */
@media (min-width:769px){
  body.admin-ui > .header{
    position:fixed !important;
    left:var(--v14-admin-sidebar) !important;
    right:0 !important;
    top:0 !important;
    width:auto !important;
    height:var(--v14-admin-header) !important;
    min-height:var(--v14-admin-header) !important;
    margin:0 !important;
    padding:0 18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    z-index:10050 !important;
    pointer-events:none !important;
    background:#12345b !important;
    box-shadow:0 2px 12px rgba(15,35,60,.16) !important;
  }
  body.admin-ui > .header .headerRight{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:10px !important;
    pointer-events:auto !important;
  }
  body.admin-ui > .header #adminHeaderLogout{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 15px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
  .adminReferenceSidebar{
    width:var(--v14-admin-sidebar) !important;
    min-width:var(--v14-admin-sidebar) !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    position:fixed !important;
    z-index:10000 !important;
  }
  .adminReferenceMain{
    margin-left:var(--v14-admin-sidebar) !important;
    width:calc(100vw - var(--v14-admin-sidebar)) !important;
    max-width:none !important;
    min-width:0 !important;
    padding:calc(var(--v14-admin-header) + 20px) 24px 32px !important;
    overflow-x:hidden !important;
  }
  .adminReferenceMain > #adminOnlyDashboard{
    width:100% !important;
    max-width:1380px !important;
    margin:0 auto !important;
  }
  .adminReferenceMain .adminSectionPanel.active{display:block !important;}
  .adminReferenceMain .adminResultCards{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:14px !important;
  }
  .adminReferenceMain .resultToolbar,
  .adminReferenceMain .testWiseToolbar{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:10px !important;
  }
}

/* ===== ADMIN NARROW LAPTOP: one breakpoint ===== */
@media (min-width:769px) and (max-width:1100px){
  :root{--v14-admin-sidebar:220px;}
  .adminReferenceMain{padding-left:16px !important;padding-right:16px !important;}
  .adminReferenceMain .adminResultCards{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}

/* ===== ADMIN MOBILE: one fixed bottom navigation system ===== */
@media (max-width:768px){
  :root{--v14-admin-mobile-nav:68px;}
  body.admin-ui > .header{
    position:fixed !important;
    top:8px !important;
    right:8px !important;
    left:auto !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    z-index:10050 !important;
  }
  body.admin-ui > .header > .brand{display:none !important;}
  body.admin-ui > .header .headerRight{display:flex !important;pointer-events:auto !important;}
  body.admin-ui > .header #adminHeaderLogout{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:38px !important;
    height:38px !important;
    padding:0 10px !important;
  }
  .adminReferenceSidebar{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    height:var(--v14-admin-mobile-nav) !important;
    min-height:var(--v14-admin-mobile-nav) !important;
    padding:4px 7px env(safe-area-inset-bottom) !important;
    z-index:10040 !important;
    overflow:hidden !important;
  }
  .adminReferenceNav{
    width:100% !important;
    height:100% !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:4px !important;
  }
  .adminReferenceNav button{
    width:100% !important;
    min-width:0 !important;
    height:56px !important;
    min-height:56px !important;
    margin:0 !important;
  }
  .adminReferenceMain{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:66px 10px calc(var(--v14-admin-mobile-nav) + 12px + env(safe-area-inset-bottom)) !important;
    overflow-x:hidden !important;
  }
  .adminReferenceMain > #adminOnlyDashboard{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
  }
  .adminReferenceMain .adminResultCards{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:9px !important;}
  .adminReferenceMain .resultToolbar,
  .adminReferenceMain .testWiseToolbar{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .adminReferenceMain .resultToolbar input{grid-column:1 / -1 !important;}
  .adminReferenceMain .resultTableWrap,
  .adminReferenceMain .testWiseTableWrap{
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .adminReferenceMain table{min-width:760px !important;}
}

@media (max-width:520px){
  .adminReferenceMain .adminResultCards{grid-template-columns:1fr 1fr !important;gap:7px !important;}
  .adminReferenceMain .resultToolbar,
  .adminReferenceMain .testWiseToolbar{grid-template-columns:1fr !important;}
  .adminReferenceMain .resultToolbar input{grid-column:auto !important;}
  .adminReferenceMain{padding-left:7px !important;padding-right:7px !important;}
}

/* ===== CANDIDATE NAV: one responsive system ===== */
.candidateSectionNav{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
  margin-bottom:18px !important;
}
@media (max-width:640px){
  .candidateSectionNav{grid-template-columns:1fr !important;gap:9px !important;}
}

/* ===== Shared safety: prevent accidental horizontal overflow ===== */
html,body{max-width:100%;overflow-x:hidden;}
.adminReferenceMain,.adminReferenceMain *{min-width:0;}


/* --- Original style block 3 --- */

/* ============================================================
   HUB OF ASPIRANTS — V1.7 HOME / LOGIN UI CLEANUP
   Visual-only layer. Does not alter test, result, auth or DB logic.
   ============================================================ */
body:not(.admin-ui) > .header{
  position:relative !important;
  top:auto !important; left:auto !important; right:auto !important;
  width:100% !important; max-width:none !important;
  min-height:58px !important; height:auto !important;
  margin:0 !important; padding:12px clamp(18px,3vw,42px) !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  background:#12345b !important; color:#fff !important;
  box-shadow:0 2px 12px rgba(15,35,60,.14) !important;
  z-index:100 !important;
}
body:not(.admin-ui) > .header .brand{font-size:18px !important; line-height:1.15 !important; font-weight:800 !important;}
body:not(.admin-ui) > .header .sub{font-size:11px !important; line-height:1.25 !important; margin-top:3px !important; opacity:.88 !important;}
body:not(.admin-ui) > .header .headerRight{display:flex !important; align-items:center !important; gap:10px !important;}
body:not(.admin-ui) > .header #studentHeaderLogout{display:inline-flex !important;}
body:not(.admin-ui) > .header #adminHeaderLogout,
body:not(.admin-ui) > .header #headerTimer{display:none !important;}

body:not(.admin-ui) > main.container{
  width:100% !important; max-width:1200px !important;
  margin:0 auto !important; padding:0 24px 36px !important;
}
#authScreen{
  width:min(100%,920px) !important; max-width:920px !important;
  margin:34px auto 24px !important; padding:34px 34px 28px !important;
  border-radius:20px !important;
  box-shadow:0 14px 40px rgba(18,52,91,.10) !important;
}
#authScreen > div:first-child{margin-bottom:28px !important;}
#authScreen > div:first-child .mission-logo{
  width:96px !important; height:96px !important; margin-bottom:12px !important;
}
#authScreen > div:first-child h1{font-size:30px !important; line-height:1.15 !important; margin-bottom:8px !important;}
#authScreen > div:first-child p{font-size:15px !important;}

/* Student stays open and gets the main visual priority. */
#authScreen > .dashPanel:first-of-type{
  width:100% !important; padding:26px !important;
  border:1px solid #dbe4ef !important; border-radius:16px !important;
}
#authScreen > .dashPanel:first-of-type h2{font-size:22px !important;}
#authScreen .authTabs{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important; margin:16px 0 20px !important;
}
#authScreen .authTab{min-height:48px !important; padding:11px 12px !important; font-size:14px !important;}
#authScreen .formGroup{margin-bottom:14px !important;}
#authScreen .formGroup label{font-size:13px !important; margin-bottom:6px !important; display:block !important;}
#authScreen input,#authScreen select{min-height:46px !important; padding:11px 13px !important; font-size:14px !important;}
#authScreen .primary{min-height:46px !important; font-size:14px !important;}

/* Admin is a compact collapsed panel by default. */
#authScreen .homeAdminPanel{
  width:100% !important; margin:18px 0 0 !important; padding:18px 20px !important;
  border:1px solid #dbe4ef !important; border-radius:14px !important;
  box-shadow:none !important; background:#fbfdff !important;
}
.homeAdminHeader{
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:18px !important;
}
.homeAdminHeader h2{font-size:20px !important;}
.homeAdminToggle{
  flex:0 0 auto !important; min-height:44px !important; padding:10px 18px !important;
  border:1px solid #12345b !important; border-radius:9px !important;
  background:#fff !important; color:#12345b !important; font-weight:800 !important;
  cursor:pointer !important;
}
.homeAdminToggle:hover{background:#eef5ff !important;}
.homeAdminToggle[aria-expanded="true"]{background:#12345b !important;color:#fff !important;}
.homeAdminBody{padding-top:18px !important;}
.homeAdminBody[hidden]{display:none !important;}

/* Footer should stay close to the login card rather than floating far below. */
body:not(.admin-ui) .footer,
body:not(.admin-ui) #footer{margin-top:8px !important;}
body:not(.admin-ui) .footer-logo{width:58px !important;height:58px !important;}

@media (min-width:1100px){
  #authScreen{display:grid !important;grid-template-columns:minmax(0,1.65fr) minmax(300px,.85fr) !important;column-gap:22px !important;align-items:start !important;}
  #authScreen > div:first-child{grid-column:1/-1 !important;}
  #authScreen > .dashPanel:first-of-type{grid-column:1 !important;}
  #authScreen .homeAdminPanel{grid-column:2 !important;align-self:start !important;margin-top:0 !important;}
  #authScreen > div[style*="height:18px"]{display:none !important;}
  #authScreen > div:last-child{grid-column:1/-1 !important;}
}

@media (max-width:1099px){
  body:not(.admin-ui) > main.container{padding-left:16px !important;padding-right:16px !important;}
  #authScreen{width:min(100%,760px) !important;}
}

@media (max-width:768px){
  body:not(.admin-ui) > .header{min-height:52px !important;padding:9px 12px !important;}
  body:not(.admin-ui) > .header .brand{font-size:15px !important;}
  body:not(.admin-ui) > .header .sub{font-size:9px !important;}
  body:not(.admin-ui) > main.container{padding:0 10px 24px !important;}
  #authScreen{display:block !important;width:calc(100% - 4px) !important;max-width:560px !important;margin:14px auto 18px !important;padding:18px !important;}
  #authScreen > div:first-child{margin-bottom:18px !important;}
  #authScreen > div:first-child .mission-logo{width:78px !important;height:78px !important;}
  #authScreen > div:first-child h1{font-size:23px !important;}
  #authScreen > .dashPanel:first-of-type{padding:16px !important;}
  #authScreen .authTabs{gap:6px !important;}
  #authScreen .authTab{min-height:44px !important;font-size:12px !important;padding:9px 5px !important;}
  #authScreen .homeAdminPanel{padding:14px !important;}
  .homeAdminHeader{align-items:center !important;gap:10px !important;}
  .homeAdminHeader h2{font-size:18px !important;}
  .homeAdminHeader p{font-size:11px !important;}
  .homeAdminToggle{min-height:42px !important;padding:9px 11px !important;font-size:11px !important;}
}

@media (max-width:480px){
  #authScreen{padding:14px !important;}
  #authScreen .authTabs{grid-template-columns:1fr 1fr 1fr !important;}
  #authScreen .authTab{font-size:10px !important;}
  .homeAdminHeader{flex-direction:column !important;align-items:stretch !important;}
  .homeAdminToggle{width:100% !important;}
}
/* V1.9.1 — PROFESSIONAL HOME LOGIN REFINEMENT
   Student login remains open. Administrator login is compact and collapsed by default.
   No application logic is changed. */
#authScreen .homeAdminPanel{
  box-sizing:border-box !important;
  align-self:start !important;
  padding:20px !important;
  background:#ffffff !important;
  border:1px solid #d7e1ec !important;
  border-radius:14px !important;
  box-shadow:0 4px 14px rgba(18,52,91,.045) !important;
}
#authScreen .homeAdminHeader{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
}
#authScreen .homeAdminHeader > div:first-child{
  min-width:0 !important;
}
#authScreen .homeAdminHeader h2{
  margin:0 !important;
  font-size:20px !important;
  line-height:1.2 !important;
  color:#173f6b !important;
  white-space:nowrap !important;
}
#authScreen .homeAdminToggle{
  flex:0 0 auto !important;
  min-width:128px !important;
  min-height:42px !important;
  padding:9px 15px !important;
  border:1px solid #173f6b !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#173f6b !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.2px !important;
  cursor:pointer !important;
  transition:background .15s ease,color .15s ease,border-color .15s ease !important;
}
#authScreen .homeAdminToggle:hover{
  background:#f3f7fb !important;
}
#authScreen .homeAdminToggle[aria-expanded="true"]{
  background:#173f6b !important;
  color:#fff !important;
}
#authScreen .homeAdminBody{
  margin-top:18px !important;
  padding-top:18px !important;
  border-top:1px solid #e5ebf2 !important;
}
#authScreen .homeAdminBody .formGroup{
  margin-bottom:13px !important;
}
#authScreen .homeAdminBody .primary{
  min-height:44px !important;
  border-radius:8px !important;
}
@media (max-width:1099px){
  #authScreen .homeAdminHeader{
    display:flex !important;
  }
}
@media (max-width:768px){
  #authScreen .homeAdminPanel{
    margin-top:14px !important;
    padding:16px !important;
  }
  #authScreen .homeAdminHeader{
    flex-direction:row !important;
    align-items:center !important;
  }
  #authScreen .homeAdminHeader h2{font-size:18px !important;}
  #authScreen .homeAdminToggle{
    min-width:112px !important;
    min-height:40px !important;
    padding:8px 11px !important;
    font-size:11px !important;
  }
}
@media (max-width:430px){
  #authScreen .homeAdminHeader{
    gap:9px !important;
  }
  #authScreen .homeAdminToggle{
    min-width:104px !important;
    padding-left:9px !important;
    padding-right:9px !important;
  }
}


/* --- Original style block 4 --- */

/* V1.9 FINAL HOME LOGIN UI — clean administrator access */
#authScreen .homeAdminPanel{
  width:100% !important;
  margin:0 !important;
  padding:18px 20px !important;
  background:#fff !important;
  border:1px solid #d7e1ec !important;
  border-radius:14px !important;
  box-shadow:0 4px 14px rgba(18,52,91,.045) !important;
  box-sizing:border-box !important;
}
#authScreen .homeAdminHeader{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
}
#authScreen .homeAdminHeader > div:first-child{min-width:0 !important;}
#authScreen .homeAdminHeader h2{
  margin:0 !important;
  font-size:20px !important;
  line-height:1.2 !important;
  color:#173f6b !important;
  white-space:nowrap !important;
}
#authScreen .homeAdminToggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:128px !important;
  min-height:42px !important;
  margin:0 !important;
  padding:9px 15px !important;
  box-sizing:border-box !important;
  white-space:nowrap !important;
  border:1px solid #173f6b !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#173f6b !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.2px !important;
}
#authScreen .homeAdminToggle:hover{background:#f3f7fb !important;color:#173f6b !important;}
#authScreen .homeAdminToggle[aria-expanded="true"]{
  background:#173f6b !important;
  color:#fff !important;
}
#authScreen .homeAdminBody{
  margin-top:17px !important;
  padding-top:17px !important;
  border-top:1px solid #e5ebf2 !important;
}
#authScreen .homeAdminBody[hidden]{display:none !important;}
@media (min-width:900px){
  #authScreen{
    display:grid !important;
    grid-template-columns:minmax(0,1.65fr) minmax(300px,.8fr) !important;
    column-gap:20px !important;
    align-items:start !important;
  }
  #authScreen > .dashPanel:first-of-type{grid-column:1 !important;}
  #authScreen > .homeAdminPanel{grid-column:2 !important;}
}
@media (max-width:899px){
  #authScreen .homeAdminHeader{display:flex !important;align-items:center !important;}
}
@media (max-width:600px){
  #authScreen .homeAdminPanel{padding:16px !important;}
  #authScreen .homeAdminHeader{gap:9px !important;}
  #authScreen .homeAdminHeader h2{font-size:18px !important;}
  #authScreen .homeAdminToggle{min-width:110px !important;min-height:40px !important;padding:8px 10px !important;font-size:11px !important;}
}
@media (max-width:390px){
  #authScreen .homeAdminHeader{flex-direction:column !important;align-items:stretch !important;}
  #authScreen .homeAdminToggle{width:100% !important;}
}
body:not(.admin-ui) #studentOnlyDashboard{
  max-width:1280px !important;
}
body:not(.admin-ui) .candidateSectionNav{
  margin-bottom:14px !important;
  padding:5px !important;
  gap:6px !important;
  border-radius:12px !important;
  background:#f8fafc !important;
  box-shadow:none !important;
}
body:not(.admin-ui) .candidateSectionNav button{
  min-height:46px !important;
  border-color:transparent !important;
  background:transparent !important;
  color:#52657d !important;
  font-size:14px !important;
  border-radius:9px !important;
}
body:not(.admin-ui) .candidateSectionNav button.active{
  background:#173f6b !important;
  color:#fff !important;
  box-shadow:0 4px 10px rgba(23,63,107,.16) !important;
}
body:not(.admin-ui) .profileCard{
  min-height:76px !important;
  padding:13px 16px !important;
  border-radius:14px !important;
  box-shadow:0 3px 14px rgba(15,23,42,.045) !important;
  border-color:#dce5ef !important;
}
body:not(.admin-ui) .profileLabel{
  padding:6px 10px !important;
  border:1px solid #d8e5f4 !important;
  background:#f2f7fd !important;
  color:#24527e !important;
  border-radius:999px !important;
  font-size:10px !important;
  letter-spacing:.08em !important;
}
body:not(.admin-ui) .dashGrid{
  gap:12px !important;
  margin:12px 0 16px !important;
}
body:not(.admin-ui) .dashStat{
  position:relative !important;
  min-height:94px !important;
  padding:17px 16px 15px !important;
  border:1px solid #e0e7ef !important;
  border-radius:13px !important;
  box-shadow:0 3px 12px rgba(15,23,42,.035) !important;
  background:#fff !important;
  overflow:hidden !important;
}
body:not(.admin-ui) .dashStatIcon{
  position:absolute !important;
  top:13px !important; right:14px !important;
  width:28px !important; height:28px !important;
  display:grid !important; place-items:center !important;
  border-radius:8px !important;
  background:#eef5ff !important;
  color:#2563a8 !important;
  font-size:13px !important;
  font-weight:900 !important;
}
body:not(.admin-ui) .dashStat b{
  display:block !important;
  color:#123b67 !important;
  font-size:23px !important;
  line-height:1 !important;
  margin:2px 0 8px !important;
  padding-right:34px !important;
}
body:not(.admin-ui) .dashStat > span:last-child{
  color:#64748b !important;
  font-size:12px !important;
  font-weight:600 !important;
}
body:not(.admin-ui) .candidateSectionPanel .dashPanel{
  border-radius:15px !important;
  box-shadow:0 4px 16px rgba(15,23,42,.045) !important;
}
body:not(.admin-ui) .studentPanelHeading{
  align-items:center !important;
  margin-bottom:12px !important;
}
body:not(.admin-ui) .studentPanelHeading h3{
  font-size:19px !important;
  margin-bottom:4px !important;
}
body:not(.admin-ui) .studentPanelHeading p{
  font-size:12px !important;
  margin:0 !important;
  color:#718096 !important;
}
body:not(.admin-ui) .testCountBadge{
  background:#f2f7fd !important;
  color:#24527e !important;
  border:1px solid #d8e5f4 !important;
  border-radius:999px !important;
  padding:6px 10px !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:.05em !important;
}
body:not(.admin-ui) .testItem{
  padding:13px 14px !important;
  margin-bottom:8px !important;
  border:1px solid #dfe7f0 !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:none !important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease !important;
}
body:not(.admin-ui) .testItem:hover{
  transform:translateY(-1px) !important;
  border-color:#cbd9e8 !important;
  box-shadow:0 6px 16px rgba(15,23,42,.06) !important;
}
body:not(.admin-ui) .testTitleRow{
  gap:8px !important;
  margin-bottom:5px !important;
}
body:not(.admin-ui) .testTitleRow b{
  color:#173f6b !important;
  font-size:14px !important;
}
body:not(.admin-ui) .testMeta{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:0 !important;
  color:#64748b !important;
  font-size:11px !important;
}
body:not(.admin-ui) .testMeta > span:not(:last-child)::after{
  content:"•" !important;
  margin:0 7px !important;
  color:#a0aec0 !important;
}
body:not(.admin-ui) .startSmall{
  min-width:132px !important;
  min-height:42px !important;
  padding:0 16px !important;
  border-radius:9px !important;
  background:#173f6b !important;
  box-shadow:0 3px 9px rgba(23,63,107,.15) !important;
}
body:not(.admin-ui) .startSmall:hover{
  background:#0f3155 !important;
  transform:translateY(-1px) !important;
}
body:not(.admin-ui) .missionBrandFooter{
  max-width:1280px !important;
  margin:12px auto 0 !important;
  padding:16px 16px 22px !important;
  border-top:1px solid #e1e8f0 !important;
}
body:not(.admin-ui) .missionBrandFooter .footer-logo{
  width:46px !important; height:46px !important;
  margin-bottom:5px !important;
}
body:not(.admin-ui) .missionBrandFooter div{
  font-size:11px !important;
}
@media (max-width:700px){
  body:not(.admin-ui) .dashGrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:9px !important;}
  body:not(.admin-ui) .dashStat{min-height:82px !important;padding:14px 12px !important;}
  body:not(.admin-ui) .dashStat b{font-size:20px !important;}
  body:not(.admin-ui) .dashStatIcon{width:25px !important;height:25px !important;top:10px !important;right:10px !important;}
  body:not(.admin-ui) .profileCard{padding:12px !important;}
  body:not(.admin-ui) .profileLabel{display:none !important;}
  body:not(.admin-ui) .testItem{padding:12px !important;}
  body:not(.admin-ui) .testItem .actions{width:100% !important;margin-top:10px !important;}
  body:not(.admin-ui) .startSmall{width:100% !important;}
}
@media (max-width:420px){
  body:not(.admin-ui) .candidateSectionNav button{font-size:12px !important;min-height:44px !important;}
  body:not(.admin-ui) .dashStat > span:last-child{font-size:11px !important;}
}


/* --- Original style block 6 --- */

/* Boot failsafe: the authentication screen is the default visible state. */
#authScreen:not(.hidden){display:grid !important;}
#authScreen.hidden{display:none !important;}


/* --- Original style block 7 --- */

/* =========================================================
   HUB OF ASPIRANTS — STUDENT DASHBOARD FINAL UI POLISH
   UI ONLY. No quiz/auth/result/Supabase logic is changed.
   ========================================================= */

/* 1. Remove the duplicate legacy top header while the candidate
      dashboard is visible. It will automatically return on the
      actual test screen where the timer/header is useful. */
body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header{
  display:flex !important;
  position:absolute !important;
  top:10px !important;
  right:12px !important;
  left:auto !important;
  width:auto !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  z-index:10000 !important;
  pointer-events:none !important;
}
body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header > .brand{
  display:none !important;
}
body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header > .headerRight{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  pointer-events:auto !important;
}
body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header #studentHeaderLogout{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:40px !important;
  padding:9px 13px !important;
  border:1px solid #cbd5e1 !important;
  border-radius:10px !important;
  background:#fff !important;
  color:#12345b !important;
  font-weight:800 !important;
  white-space:nowrap !important;
  box-shadow:0 4px 14px rgba(18,52,91,.14) !important;
}
body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header #adminHeaderLogout,
body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header #headerTimer{
  display:none !important;
}

/* 2. The dashboard should start cleanly at the top instead of leaving
      the old header's vertical space. */
body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > main.container{
  padding-top:18px !important;
}

body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) #home{
  margin-top:0 !important;
}

/* 3. Keep one clear, centered brand block. */
body:not(.admin-ui) #studentOnlyDashboard{
  margin-top:0 !important;
}

/* 4. Navigation: equal height, clean alignment, no oversized empty area. */
body:not(.admin-ui) #studentOnlyDashboard .candidateSectionNav{
  margin:0 0 16px !important;
  padding:4px !important;
  gap:8px !important;
}

body:not(.admin-ui) #studentOnlyDashboard .candidateSectionNav button{
  min-height:54px !important;
  padding:0 18px !important;
  font-size:15px !important;
  border-radius:12px !important;
}

/* 5. Profile card: slightly tighter and more balanced. */
body:not(.admin-ui) #studentOnlyDashboard .profileCard{
  min-height:82px !important;
  margin-bottom:14px !important;
  padding:14px 16px !important;
}

body:not(.admin-ui) #studentOnlyDashboard .profileNameText{
  font-size:19px !important;
}

/* 6. Statistics: consistent height and spacing. */
body:not(.admin-ui) #studentOnlyDashboard .dashGrid{
  gap:10px !important;
  margin-bottom:16px !important;
}

body:not(.admin-ui) #studentOnlyDashboard .dashStat{
  min-height:88px !important;
  padding:14px 16px !important;
}

/* 7. Available tests panel: make the first viewport more useful. */
body:not(.admin-ui) #studentOnlyDashboard .dashPanel{
  padding:20px !important;
}

body:not(.admin-ui) #studentOnlyDashboard .studentPanelHeading{
  margin-bottom:12px !important;
}

body:not(.admin-ui) #studentOnlyDashboard .studentPanelHeading h3{
  font-size:19px !important;
}

/* 8. Test rows: cleaner desktop proportions. */
body:not(.admin-ui) #studentOnlyDashboard .testItem{
  min-height:76px !important;
  padding:13px 15px !important;
}

body:not(.admin-ui) #studentOnlyDashboard .startSmall{
  min-width:128px !important;
  min-height:42px !important;
}

/* 9. Prevent horizontal overflow at every desktop width. */
body:not(.admin-ui),
body:not(.admin-ui) > main.container,
body:not(.admin-ui) #home,
body:not(.admin-ui) #studentOnlyDashboard{
  min-width:0 !important;
  overflow-x:hidden !important;
}

/* 10. Tablet/mobile refinement. */
@media (max-width:800px){
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > main.container{
    padding:12px 12px 28px !important;
  }

  body:not(.admin-ui) #studentOnlyDashboard .candidateSectionNav button{
    min-height:48px !important;
    font-size:14px !important;
  }
}

@media (max-width:600px){
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > main.container{
    padding:8px 8px 22px !important;
  }

  body:not(.admin-ui) #studentOnlyDashboard .dashGrid{
    gap:8px !important;
  }
}


/* --- Original style block 9 --- */

/* ============================================================
   HUB OF ASPIRANTS — STUDENT SECTION PROFESSIONAL UI
   UI ONLY — no HTML structure, data, login, test or result logic changed.
   ============================================================ */

#studentOnlyDashboard{
  --sp-navy:#123f73;
  --sp-navy-dark:#0d3159;
  --sp-blue:#1769e8;
  --sp-bg:#f5f8fc;
  --sp-card:#ffffff;
  --sp-line:#dce5ef;
  --sp-line-strong:#c9d6e4;
  --sp-text:#10233d;
  --sp-muted:#66788d;
  --sp-soft:#f4f8fd;
  --sp-shadow:0 6px 22px rgba(16,35,61,.055);
  --sp-shadow-hover:0 10px 28px rgba(16,35,61,.09);
}

/* Dashboard workspace */
#studentOnlyDashboard{
  background:linear-gradient(180deg,#f8fbff 0%,#f4f7fb 100%);
  color:var(--sp-text);
}

/* Test / Result navigation */
#studentOnlyDashboard .candidateSectionNav{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:12px !important;
  padding:0 !important;
  margin:0 0 20px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

#studentOnlyDashboard .candidateSectionNav button{
  min-height:66px !important;
  padding:13px 20px !important;
  border:1px solid var(--sp-line) !important;
  border-radius:12px !important;
  background:#fff !important;
  color:var(--sp-navy) !important;
  font-size:16px !important;
  font-weight:800 !important;
  text-align:left !important;
  box-shadow:0 3px 12px rgba(16,35,61,.045) !important;
}

#studentOnlyDashboard .candidateSectionNav button:hover:not(.active){
  background:#f8fbff !important;
  border-color:#b9cbe0 !important;
  box-shadow:0 5px 16px rgba(16,35,61,.07) !important;
}

#studentOnlyDashboard .candidateSectionNav button.active{
  background:linear-gradient(135deg,var(--sp-navy),#1a528d) !important;
  color:#fff !important;
  border-color:var(--sp-navy) !important;
  box-shadow:0 7px 18px rgba(18,63,115,.18) !important;
}

/* Candidate profile */
#studentOnlyDashboard .profileCard{
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  min-height:88px;
  margin:0 0 18px !important;
  padding:18px 20px !important;
  border:1px solid var(--sp-line) !important;
  border-radius:15px !important;
  background:linear-gradient(135deg,#fff 0%,#f8fbff 100%) !important;
  box-shadow:var(--sp-shadow) !important;
}

#studentOnlyDashboard .profileCard:hover{
  box-shadow:var(--sp-shadow-hover) !important;
}

#studentOnlyDashboard .avatar{
  width:54px !important;
  height:54px !important;
  flex:0 0 54px !important;
  border-radius:14px !important;
  background:linear-gradient(145deg,var(--sp-navy),#1a528d) !important;
  color:#fff !important;
  font-size:20px !important;
  font-weight:850 !important;
  box-shadow:0 5px 12px rgba(18,63,115,.18) !important;
}

#studentOnlyDashboard .profileInfo{
  min-width:0 !important;
}

#studentOnlyDashboard .profileNameText{
  color:var(--sp-text) !important;
  font-size:19px !important;
  font-weight:850 !important;
  letter-spacing:-.015em;
  line-height:1.25 !important;
}

#studentOnlyDashboard .profileContact,
#studentOnlyDashboard .profileAcademic{
  color:var(--sp-muted) !important;
  font-size:12px !important;
  line-height:1.55 !important;
}

#studentOnlyDashboard .profileLabel{
  margin-left:auto !important;
  padding:7px 12px !important;
  border:1px solid #cfe0f2 !important;
  border-radius:999px !important;
  background:#f5f9fe !important;
  color:#24527e !important;
  font-size:10px !important;
  font-weight:850 !important;
  letter-spacing:.08em !important;
}

/* Statistics */
#studentOnlyDashboard .dashGrid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:13px !important;
  margin:0 0 20px !important;
}

#studentOnlyDashboard .dashStat{
  position:relative;
  min-height:104px !important;
  padding:18px 18px 16px !important;
  border:1px solid var(--sp-line) !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:0 4px 15px rgba(16,35,61,.045) !important;
  overflow:hidden;
}

#studentOnlyDashboard .dashStat::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:#d9e8f8;
}

#studentOnlyDashboard .dashStat:hover{
  transform:translateY(-2px);
  border-color:#c8d7e7 !important;
  box-shadow:var(--sp-shadow-hover) !important;
}

#studentOnlyDashboard .dashStatIcon{
  float:right;
  width:31px !important;
  height:31px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:9px !important;
  background:#f1f6fc !important;
  color:#51708f !important;
  font-size:13px !important;
  font-weight:800 !important;
}

#studentOnlyDashboard .dashStat b{
  display:block !important;
  margin:2px 0 4px !important;
  color:var(--sp-navy) !important;
  font-size:25px !important;
  line-height:1.15 !important;
  font-weight:850 !important;
}

#studentOnlyDashboard .dashStat > span:last-child{
  display:block !important;
  color:var(--sp-muted) !important;
  font-size:11px !important;
  font-weight:650 !important;
}

/* Test / Result content panels */
#studentOnlyDashboard .candidateSectionPanel > .dashPanel{
  margin:0 !important;
  padding:24px !important;
  border:1px solid var(--sp-line) !important;
  border-radius:15px !important;
  background:#fff !important;
  box-shadow:var(--sp-shadow) !important;
}

#studentOnlyDashboard .studentPanelHeading{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  margin:0 0 17px !important;
  padding-bottom:15px !important;
  border-bottom:1px solid #edf2f7 !important;
}

#studentOnlyDashboard .studentPanelHeading h3{
  margin:0 0 4px !important;
  color:var(--sp-text) !important;
  font-size:19px !important;
  line-height:1.25 !important;
  font-weight:850 !important;
}

#studentOnlyDashboard .studentPanelHeading p{
  margin:0 !important;
  color:var(--sp-muted) !important;
  font-size:12px !important;
  line-height:1.45 !important;
}

#studentOnlyDashboard .testCountBadge{
  flex:0 0 auto;
  padding:6px 10px !important;
  border:1px solid #d5e3f1 !important;
  border-radius:999px !important;
  background:#f4f8fd !important;
  color:#24527e !important;
  font-size:10px !important;
  font-weight:850 !important;
  letter-spacing:.06em !important;
}

/* Available test cards */
#studentOnlyDashboard #studentTests{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#studentOnlyDashboard .testItem{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:92px !important;
  margin:0 !important;
  padding:17px 18px !important;
  border:1px solid var(--sp-line) !important;
  border-radius:12px !important;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%) !important;
  box-shadow:none !important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease !important;
}

#studentOnlyDashboard .testItem:hover{
  transform:translateY(-2px);
  border-color:#bfd2e6 !important;
  box-shadow:0 8px 20px rgba(16,35,61,.075) !important;
}

#studentOnlyDashboard .testItemInfo{
  min-width:0 !important;
  flex:1 1 auto;
}

#studentOnlyDashboard .testTitleRow{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin:0 0 6px !important;
}

#studentOnlyDashboard .testTitleRow b{
  color:var(--sp-text) !important;
  font-size:15px !important;
  font-weight:800 !important;
}

#studentOnlyDashboard .testMeta{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:0 !important;
  margin:0 !important;
  color:var(--sp-muted) !important;
  font-size:11px !important;
}

#studentOnlyDashboard .testMeta > span{
  white-space:nowrap;
}

#studentOnlyDashboard .testMeta > span:not(:last-child)::after{
  content:"•";
  margin:0 8px;
  color:#a1afbf;
}

#studentOnlyDashboard .freeBadge,
#studentOnlyDashboard .paidBadge{
  display:inline-flex !important;
  align-items:center !important;
  min-height:22px !important;
  padding:3px 9px !important;
  border-radius:999px !important;
  font-size:10px !important;
  font-weight:850 !important;
  letter-spacing:.03em;
}

#studentOnlyDashboard .freeBadge{
  background:#ecfdf3 !important;
  color:#15803d !important;
  border:1px solid #bbf0cf !important;
}

#studentOnlyDashboard .paidBadge{
  background:#eef2ff !important;
  color:#4338ca !important;
  border:1px solid #d9ddff !important;
}

#studentOnlyDashboard .testItem .actions{
  flex:0 0 auto;
}

#studentOnlyDashboard .startSmall{
  min-width:132px !important;
  min-height:42px !important;
  padding:9px 16px !important;
  border:1px solid var(--sp-navy) !important;
  border-radius:9px !important;
  background:linear-gradient(135deg,var(--sp-navy),#1a528d) !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:850 !important;
  letter-spacing:.02em;
  box-shadow:0 4px 10px rgba(18,63,115,.15) !important;
}

#studentOnlyDashboard .startSmall:hover{
  box-shadow:0 7px 15px rgba(18,63,115,.22) !important;
}

/* Result table — clean professional finish */
#studentOnlyDashboard #candidateSectionResultPanel .candidateResultTableWrap{
  border:1px solid var(--sp-line) !important;
  border-radius:11px !important;
  box-shadow:none !important;
}

#studentOnlyDashboard #candidateSectionResultPanel table{
  background:#fff !important;
}

#studentOnlyDashboard #candidateSectionResultPanel th{
  padding:12px 14px !important;
  background:#f5f8fc !important;
  color:#42566d !important;
  border-bottom:1px solid var(--sp-line) !important;
  font-size:10px !important;
  font-weight:850 !important;
  letter-spacing:.055em !important;
  text-transform:uppercase;
}

#studentOnlyDashboard #candidateSectionResultPanel td{
  padding:13px 14px !important;
  color:#33485f !important;
  border-bottom:1px solid #edf2f6 !important;
  font-size:13px !important;
}

#studentOnlyDashboard #candidateSectionResultPanel tbody tr:hover{
  background:#f8fbff !important;
}

#studentOnlyDashboard #candidateSectionResultPanel .resultPercentage{
  background:#eef5ff !important;
  color:var(--sp-navy) !important;
  border:1px solid #d5e4f5 !important;
}

/* Empty states */
#studentOnlyDashboard .emptyState{
  border-radius:12px !important;
  border:1px dashed #cbd8e6 !important;
  background:#fafcff !important;
  color:var(--sp-muted) !important;
}

/* Responsive */
@media(max-width:900px){
  #studentOnlyDashboard .dashGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:640px){
  #studentOnlyDashboard .candidateSectionNav{
    grid-template-columns:1fr !important;
  }

  #studentOnlyDashboard .candidateSectionNav button{
    min-height:58px !important;
    font-size:15px !important;
  }

  #studentOnlyDashboard .profileCard{
    align-items:flex-start !important;
    flex-wrap:wrap !important;
    padding:15px !important;
  }

  #studentOnlyDashboard .profileLabel{
    margin-left:70px !important;
  }

  #studentOnlyDashboard .dashGrid{
    grid-template-columns:1fr 1fr !important;
    gap:9px !important;
  }

  #studentOnlyDashboard .dashStat{
    min-height:92px !important;
    padding:14px !important;
  }

  #studentOnlyDashboard .dashStat b{
    font-size:21px !important;
  }

  #studentOnlyDashboard .candidateSectionPanel > .dashPanel{
    padding:17px !important;
  }

  #studentOnlyDashboard .studentPanelHeading{
    align-items:flex-start !important;
  }

  #studentOnlyDashboard .testItem{
    align-items:flex-start !important;
    flex-direction:column !important;
    padding:15px !important;
  }

  #studentOnlyDashboard .testItem .actions,
  #studentOnlyDashboard .startSmall{
    width:100% !important;
  }

  #studentOnlyDashboard #candidateSectionResultPanel .candidateResultTableWrap{
    overflow-x:auto !important;
  }
}

@media(prefers-reduced-motion:reduce){
  #studentOnlyDashboard *,
  #studentOnlyDashboard *::before,
  #studentOnlyDashboard *::after{
    transition:none !important;
    animation:none !important;
  }
}


/* --- Original style block 10 --- */

/* Single post-submit result window — UI/navigation only. */
#result{
  width:100% !important;
  max-width:1080px !important;
  margin:28px auto !important;
  padding:0 14px !important;
  box-sizing:border-box !important;
}

#result .resultSingleWindow{
  background:#fff !important;
  border:1px solid #dce5ef !important;
  border-radius:16px !important;
  box-shadow:0 10px 30px rgba(16,35,61,.07) !important;
  overflow:hidden !important;
}

#result .resultHeader{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:20px !important;
  padding:25px 26px 21px !important;
  border-bottom:1px solid #edf2f7 !important;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%) !important;
}

#result .resultEyebrow{
  margin-bottom:5px !important;
  color:#58718c !important;
  font-size:10px !important;
  font-weight:850 !important;
  letter-spacing:.12em !important;
}

#result #resultTitle{
  margin:0 !important;
  color:#10233d !important;
  font-size:23px !important;
  line-height:1.25 !important;
  font-weight:850 !important;
}

#result .resultScoreLine{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  margin-top:8px !important;
  color:#1769e8 !important;
  font-size:14px !important;
  font-weight:800 !important;
}

#result .resultDivider{
  color:#a8b6c5 !important;
}

#result .resultBackBtn{
  flex:0 0 auto !important;
  min-height:42px !important;
  padding:9px 15px !important;
  border:1px solid #cbd8e6 !important;
  border-radius:9px !important;
  background:#fff !important;
  color:#234b72 !important;
  font-size:12px !important;
  font-weight:800 !important;
}

#result .resultBackBtn:hover{
  background:#f5f9fd !important;
  border-color:#aebfd2 !important;
}

#result .resultStats{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
  margin:0 !important;
  padding:17px 26px !important;
  background:#f8fafc !important;
  border-bottom:1px solid #edf2f7 !important;
}

#result .resultStats .stat{
  min-height:72px !important;
  padding:12px 14px !important;
  border:1px solid #dfe7ef !important;
  border-radius:10px !important;
  background:#fff !important;
  box-shadow:none !important;
  text-align:left !important;
}

#result .resultStats .stat b{
  display:block !important;
  margin-bottom:4px !important;
  color:#123f73 !important;
  font-size:20px !important;
  font-weight:850 !important;
}

#result .resultStats .stat span{
  color:#66788d !important;
  font-size:10px !important;
  font-weight:750 !important;
  text-transform:uppercase !important;
  letter-spacing:.05em !important;
}

#result .reviewHeading{
  padding:21px 26px 15px !important;
}

#result .reviewHeading h3{
  margin:0 0 4px !important;
  color:#10233d !important;
  font-size:17px !important;
  font-weight:850 !important;
}

#result .reviewHeading p{
  margin:0 !important;
  color:#66788d !important;
  font-size:12px !important;
}

#result .reviewLayout{
  display:grid !important;
  grid-template-columns:190px minmax(0,1fr) !important;
  gap:16px !important;
  padding:0 26px 26px !important;
}

#result .reviewNavCard,
#result .reviewQuestionCard{
  border:1px solid #dce5ef !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:none !important;
}

#result .reviewNavCard{
  padding:15px !important;
}

#result .reviewNavCard h4{
  margin:0 0 12px !important;
  color:#334b63 !important;
  font-size:12px !important;
  font-weight:850 !important;
  text-transform:uppercase !important;
  letter-spacing:.06em !important;
}

#result .reviewQuestionCard{
  padding:21px !important;
}

#result .reviewQuestionNo{
  color:#58718c !important;
  font-size:11px !important;
  font-weight:850 !important;
  text-transform:uppercase !important;
  letter-spacing:.07em !important;
}

#result .reviewQuestionText{
  margin:8px 0 16px !important;
  color:#10233d !important;
  font-size:16px !important;
  line-height:1.55 !important;
  font-weight:750 !important;
}

#result .reviewStatus{
  margin-top:14px !important;
  padding:11px 13px !important;
  border:1px solid #e0e8f0 !important;
  border-radius:9px !important;
  background:#f8fafc !important;
  font-size:12px !important;
  font-weight:750 !important;
}

#result .reviewExplanation{
  margin-top:12px !important;
  padding:13px !important;
  border-left:3px solid #b9cbe0 !important;
  background:#f7fafe !important;
  color:#53677b !important;
  font-size:12px !important;
  line-height:1.55 !important;
}

#result .reviewBottomNav{
  display:flex !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-top:18px !important;
  padding-top:15px !important;
  border-top:1px solid #edf2f7 !important;
}

#result .reviewBottomNav button{
  min-height:38px !important;
  padding:8px 13px !important;
  border:1px solid #cbd8e6 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#294d70 !important;
  font-size:11px !important;
  font-weight:800 !important;
}

@media(max-width:700px){
  #result{
    margin:16px auto !important;
    padding:0 8px !important;
  }
  #result .resultHeader{
    align-items:flex-start !important;
    flex-direction:column !important;
    padding:19px !important;
  }
  #result .resultBackBtn{
    width:100% !important;
  }
  #result .resultStats{
    grid-template-columns:1fr 1fr !important;
    padding:13px !important;
  }
  #result .reviewHeading{
    padding:18px 19px 13px !important;
  }
  #result .reviewLayout{
    grid-template-columns:1fr !important;
    padding:0 13px 19px !important;
  }
}


/* --- Original style block 11 --- */

/* Post-submit: the exam window must never remain visible behind the result. */
body:has(#result:not(.hidden)) #exam{
  display:none !important;
}


/* --- Original style block 12 --- */

#result .resultInfoGrid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;margin-top:17px!important}
#result .resultInfoItem{min-height:68px!important;padding:11px 13px!important;border:1px solid #dce5ef!important;border-radius:10px!important;background:#f8fbff!important}
#result .resultInfoItem span{display:block!important;margin-bottom:5px!important;color:#66788d!important;font-size:9px!important;font-weight:850!important;letter-spacing:.07em!important}
#result .resultInfoItem b{display:block!important;color:#123f73!important;font-size:16px!important;font-weight:850!important}
@media(max-width:700px){#result .resultInfoGrid{grid-template-columns:1fr 1fr!important}}


/* --- Original style block 13 --- */

/* Final result summary */
#result .resultInfoGrid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
  margin:18px 0 0 !important;
}
#result .resultInfoItem{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  min-height:76px !important;
  padding:13px 15px !important;
  box-sizing:border-box !important;
  border:1px solid #d8e3ee !important;
  border-radius:11px !important;
  background:#f7faff !important;
}
#result .resultInfoItem span{
  display:block !important;
  margin:0 0 6px !important;
  color:#64788e !important;
  font-size:9px !important;
  line-height:1.2 !important;
  font-weight:850 !important;
  letter-spacing:.08em !important;
}
#result .resultInfoItem b{
  display:block !important;
  color:#123f73 !important;
  font-size:18px !important;
  line-height:1.2 !important;
  font-weight:850 !important;
}
@media(max-width:700px){
  #result .resultInfoGrid{grid-template-columns:1fr 1fr !important;}
}


/* --- Original style block 14 --- */

#studentOnlyDashboard #candidateSectionResultPanel .studentPanelHeading h3{
  letter-spacing:-.01em !important;
}
#studentOnlyDashboard #candidateSectionResultPanel .studentPanelHeading p{
  margin-top:4px !important;
}


/* --- Original style block 15 --- */

#studentOnlyDashboard .candidateDetailedResultsTable{
  min-width:1080px !important;
}
#studentOnlyDashboard .candidateDetailedResultsTable th{
  white-space:nowrap !important;
}
#studentOnlyDashboard .candidateDetailedResultsTable td{
  white-space:nowrap !important;
}
#studentOnlyDashboard .candidateDetailedResultsTable .resultCorrectValue{
  color:#15803d !important;
}
#studentOnlyDashboard .candidateDetailedResultsTable .resultWrongValue{
  color:#b42318 !important;
}
#studentOnlyDashboard .candidateDetailedResultsTable .resultPercentage{
  display:inline-block !important;
  min-width:52px !important;
  text-align:center !important;
}
#studentOnlyDashboard #candidateSectionResultPanel .candidateResultTableWrap{
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch !important;
}



/* --- Original style block 16 --- */

#testInstructionsModal.hidden{display:none !important}
#testInstructionsModal{position:fixed;inset:0;z-index:99999}
.testInstructionsOverlay{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:30px 18px;background:rgba(8,28,52,.68);backdrop-filter:blur(5px);box-sizing:border-box}
.testInstructionsCard{width:min(900px,100%);max-height:calc(100vh - 60px);overflow:auto;background:#fff;border-radius:20px;box-shadow:0 28px 80px rgba(0,0,0,.28);border:1px solid #dbe5ef}
.testInstructionsHeader{padding:25px 30px 21px;background:linear-gradient(135deg,#f7fbff,#fff);border-bottom:1px solid #e4ebf3}
.testInstructionsEyebrow{font-size:11px;font-weight:900;letter-spacing:.14em;color:#1766a5;margin-bottom:6px}
.testInstructionsHeader h2{margin:0;color:#123b66;font-size:25px;line-height:1.2;font-weight:850}
.testInstructionsHeader p{margin:8px 0 0;color:#66798d;font-size:13px;line-height:1.5}
.testInstructionsBody{padding:24px 30px}
.testInfoGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:20px}
.testInfoItem{padding:13px 12px;border:1px solid #dce6ef;border-radius:11px;background:#f8fbfe;min-width:0}
.testInfoItem span{display:block;font-size:9px;letter-spacing:.08em;font-weight:900;color:#74869a;margin-bottom:5px}
.testInfoItem b{display:block;color:#163f68;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.testInstructionSection{border:1px solid #dce6ef;border-radius:13px;padding:18px 20px;background:#fbfdff}
.testInstructionSection h3{margin:0 0 11px;color:#173d64;font-size:16px;font-weight:850}
.testInstructionSection ol{margin:0;padding-left:21px;color:#435d75;font-size:12.8px;line-height:1.72}
.testInstructionSection li{padding-left:2px}
.testLanguageRow{display:flex;align-items:center;gap:12px;margin-top:17px;padding:15px 16px;border:1px solid #d7e3ee;border-radius:12px;background:#f7faff}
.testLanguageRow label{font-size:12.5px;font-weight:850;color:#294762}
.testLanguageRow select{height:38px;min-width:145px;padding:0 36px 0 12px;border:1px solid #c7d6e5;border-radius:9px;background:#fff;color:#173d60;font-weight:750;outline:none}
.testLanguageRow select:focus{border-color:#2c78bd;box-shadow:0 0 0 3px rgba(44,120,189,.1)}
.testLanguageRow span{font-size:11px;color:#718397}
.testReadyCheck{display:flex;align-items:flex-start;gap:11px;margin-top:16px;padding:14px 15px;border:1px solid #cfe0ee;border-radius:12px;background:#f1f7fc;color:#29455f;font-size:12.7px;line-height:1.5;font-weight:750;cursor:pointer}
.testReadyCheck input{width:18px;height:18px;margin:1px 0 0;accent-color:#1767a7;flex:0 0 auto}
.testInstructionsFooter{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 30px 21px;border-top:1px solid #e4ebf3;background:#fff}
.testCancelButton,.testBeginButton{min-height:42px;padding:0 19px;border-radius:10px;font-weight:850;font-size:12px;cursor:pointer}
.testCancelButton{border:1px solid #ccd9e5;background:#fff;color:#52687d}
.testBeginButton{border:0;background:linear-gradient(135deg,#1768aa,#0f4b82);color:#fff;box-shadow:0 6px 15px rgba(23,103,167,.2)}
.testBeginButton:disabled{background:#b8c4ce;box-shadow:none;cursor:not-allowed}
@media(max-width:800px){.testInfoGrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.testInstructionsOverlay{padding:10px}.testInstructionsCard{max-height:calc(100vh - 20px);border-radius:15px}.testInstructionsHeader,.testInstructionsBody{padding-left:17px;padding-right:17px}.testInstructionsFooter{padding-left:17px;padding-right:17px}.testInfoGrid{grid-template-columns:1fr 1fr}.testLanguageRow{align-items:flex-start;flex-direction:column}.testLanguageRow select{width:100%}.testInstructionsHeader h2{font-size:21px}.testInstructionsFooter{flex-direction:column-reverse;align-items:stretch}.testCancelButton,.testBeginButton{width:100%}}


/* --- Original style block 17 --- */

/* One result summary only: score/percentage + four detail cards. */
#result .resultStats{display:none !important;}
#result .resultScoreLine{margin-bottom:16px;}
#result .resultInfoGrid{margin-top:0;}


/* --- Original style block 18 --- */

#examIntegrityWarning{
  position:fixed;inset:0;z-index:99999;display:none;
  align-items:center;justify-content:center;
  background:rgba(8,24,45,.72);backdrop-filter:blur(4px);
  padding:20px;
}
#examIntegrityWarning .ei-card{
  width:min(520px,100%);background:#fff;border-radius:18px;
  padding:28px;box-shadow:0 20px 60px rgba(0,0,0,.25);
  text-align:center;border:1px solid #dbe5f0;
}
#examIntegrityWarning .ei-icon{font-size:38px;margin-bottom:8px}
#examIntegrityWarning h2{margin:0 0 10px;color:#123f70;font-size:23px}
#examIntegrityWarning p{margin:8px 0;color:#5e7188;line-height:1.55}
#examIntegrityWarning .ei-count{font-weight:800;color:#c0392b}
#examIntegrityWarning button{
  margin-top:16px;border:0;border-radius:10px;padding:12px 22px;
  background:#123f70;color:#fff;font-weight:800;cursor:pointer;
}
#examIntegrityBadge{
  position:fixed;left:18px;bottom:18px;z-index:9990;display:none;
  padding:7px 11px;border-radius:999px;background:#fff;
  border:1px solid #dbe5f0;box-shadow:0 4px 14px rgba(18,52,88,.10);
  font-size:12px;font-weight:800;color:#7b4b00;
  pointer-events:none;
}


/* --- Original style block 19 --- */

/* ===== V1.9 UI05 — Professional Submitted Result ===== */
#result{
  background:linear-gradient(180deg,#f7faff 0%,#eef4fb 100%);
  min-height:calc(100vh - 80px);
  padding:26px 22px 42px;
}
#result .resultSingleWindow{
  width:min(1180px,100%);
  margin:0 auto;
  background:#fff;
  border:1px solid #d9e5f3;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 55px rgba(20,55,95,.10);
}
#result .resultHeader{
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:28px;
  padding:30px 34px 26px;
  background:linear-gradient(135deg,#f8fbff 0%,#edf5ff 100%);
  border-bottom:1px solid #dfe9f5;
}
#result .resultEyebrow{
  display:inline-flex;
  align-items:center;
  padding:6px 11px;
  border-radius:999px;
  background:#e6f0ff;
  color:#1459a6;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.2px;
}
#result #resultTitle{
  margin:10px 0 7px;
  color:#102f55;
  font-size:29px;
  line-height:1.2;
  font-weight:800;
}
#result .resultScoreLine{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}
#result #score{
  color:#123f70;
  font-size:31px;
  font-weight:900;
}
#result #percentage{
  color:#087443;
  font-size:16px;
  font-weight:800;
}
#result .resultDivider{color:#a7b7ca;font-weight:700}
#result .resultStatusRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
  flex-wrap:wrap;
}
#result .resultStatusPill{
  padding:7px 12px;
  border-radius:999px;
  background:#e8f8f0;
  color:#087443;
  font-size:11px;
  font-weight:900;
  letter-spacing:.5px;
}
#result .resultStatusText{
  color:#64748b;
  font-size:13px;
}
#result .resultInfoGridFive{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin:24px 34px 28px;
}
#result .resultInfoItem{
  min-height:92px;
  padding:17px 16px;
  border:1px solid #dce7f3;
  border-radius:15px;
  background:#fff;
  box-shadow:0 6px 18px rgba(27,63,100,.05);
}
#result .resultInfoItem span{
  display:block;
  margin-bottom:9px;
  color:#718198;
  font-size:10px;
  font-weight:800;
  letter-spacing:.75px;
}
#result .resultInfoItem b{
  display:block;
  color:#123f70;
  font-size:21px;
  font-weight:900;
}
#result .resultMetricCorrect{border-top:3px solid #16a36a}
#result .resultMetricCorrect b{color:#087443}
#result .resultMetricWrong{border-top:3px solid #d9534f}
#result .resultMetricWrong b{color:#b42318}
#result .resultMetricSkipped{border-top:3px solid #94a3b8}
#result .resultMetricSkipped b{color:#475569}
#result .resultMetricTime{border-top:3px solid #f0a11a}
#result .resultMetricTime b{color:#8a5700}
#result .resultMetricMarks{border-top:3px solid #1769c2}
#result .resultBackBtn{
  align-self:flex-start;
  border:1px solid #cbdced !important;
  border-radius:12px !important;
  padding:11px 16px !important;
  background:#fff !important;
  color:#123f70 !important;
  font-weight:800 !important;
  white-space:nowrap;
}
#result .resultBackBtn:hover{
  background:#edf5ff !important;
}
#result .reviewHeading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin:0 34px;
  padding:22px 0 16px;
  border-top:1px solid #e5edf6;
}
#result .reviewEyebrow{
  color:#1769c2;
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
  margin-bottom:4px;
}
#result .reviewHeading h3{
  margin:0;
  color:#102f55;
  font-size:21px;
}
#result .reviewHeading p{
  margin:5px 0 0;
  color:#718198;
  font-size:13px;
}
#result .reviewSummary{
  padding:9px 13px;
  border-radius:10px;
  background:#f3f7fc;
  border:1px solid #dce7f3;
  color:#536b86;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
#result .reviewLayout{
  margin:0 34px 34px;
}
#result .reviewNavCard,
#result .reviewQuestionCard{
  border:1px solid #dce7f3;
  border-radius:16px;
  background:#fff;
  box-shadow:0 6px 18px rgba(27,63,100,.04);
}
@media(max-width:900px){
  #result .resultInfoGridFive{grid-template-columns:repeat(3,minmax(0,1fr))}
  #result .resultHeader{padding:24px}
  #result .resultInfoGridFive,
  #result .reviewHeading,
  #result .reviewLayout{margin-left:24px;margin-right:24px}
}
@media(max-width:620px){
  #result{padding:12px 8px 28px}
  #result .resultHeader{display:block;padding:22px 18px}
  #result #resultTitle{font-size:23px}
  #result #score{font-size:27px}
  #result .resultBackBtn{margin-top:18px;width:100%}
  #result .resultInfoGridFive{grid-template-columns:repeat(2,minmax(0,1fr));margin:18px}
  #result .reviewHeading{margin:0 18px;display:block}
  #result .reviewSummary{display:inline-block;margin-top:12px}
  #result .reviewLayout{margin:0 18px 24px}
}


/* --- Original style block 20 --- */

/* ===== V1.9 UI06 — Submission Confirmation ===== */
.mission-submit-overlay{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(10,25,43,.72);
  backdrop-filter:blur(3px);
}
.mission-submit-overlay.show{display:flex}
.mission-submit-modal{
  width:min(1000px,96vw);
  background:#fff;
  border:1px solid #d8e3ef;
  border-radius:10px;
  box-shadow:0 24px 70px rgba(0,0,0,.30);
  overflow:hidden;
  color:#17365d;
}
.mission-submit-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 26px 16px;
  border-bottom:1px solid #e2e9f1;
}
.mission-submit-kicker{
  font-size:10px;
  font-weight:900;
  letter-spacing:1.1px;
  color:#1769c2;
  margin-bottom:5px;
}
.mission-submit-modal-head h2{
  margin:0;
  font-size:21px;
  font-weight:700;
  color:#333;
}
.mission-submit-x{
  width:34px;
  height:34px;
  border:0;
  background:transparent;
  color:#738397;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  border-radius:8px;
}
.mission-submit-x:hover{background:#f1f5f9}
.mission-submit-table-wrap{
  padding:0 14px 18px;
  overflow-x:auto;
}
.mission-submit-table{
  width:100%;
  border-collapse:collapse;
  min-width:720px;
  font-size:13px;
}
.mission-submit-table th{
  background:#0eb3c4;
  color:#fff;
  padding:11px 9px;
  text-align:center;
  font-weight:800;
  border-right:1px solid rgba(255,255,255,.55);
}
.mission-submit-table td{
  padding:11px 9px;
  text-align:center;
  color:#4b5563;
  border:1px solid #d9e2ec;
  background:#fff;
}
.mission-submit-table th:first-child,
.mission-submit-table td:first-child{width:110px}
.mission-submit-note{
  margin:0 26px;
  padding:13px 15px;
  border-radius:9px;
  background:#f6f9fc;
  border:1px solid #e2eaf3;
  color:#66778c;
  font-size:12px;
  line-height:1.55;
}
.mission-submit-actions{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  padding:18px 14px 16px;
  margin-top:18px;
  border-top:1px solid #e5eaf0;
}
.mission-submit-btn{
  min-width:86px;
  border:0;
  border-radius:4px;
  padding:10px 16px;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.mission-submit-btn.secondary{
  background:#eef2f6;
  color:#526274;
}
.mission-submit-btn.primary{
  background:#12afc1;
  color:#fff;
}
.mission-submit-btn.primary:hover{background:#0c9eae}
@media(max-width:700px){
  .mission-submit-overlay{padding:10px}
  .mission-submit-modal-head{padding:18px}
  .mission-submit-note{margin:0 18px}
}


/* --- Original style block 21 --- */

body.exam-active .exam-screen,
body.exam-active #examScreen,
body.exam-active .exam-container {
  font-family: Arial, Helvetica, sans-serif !important;
}
body.exam-active .exam-screen,
body.exam-active #examScreen {
  background:#fff !important;
  color:#111 !important;
}
body.exam-active .exam-topbar,
body.exam-active .exam-header {
  min-height:50px !important;
  border-bottom:1px solid #d7d7d7 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.08) !important;
}
body.exam-active .exam-title {
  font-size:14px !important;
  font-weight:400 !important;
}
body.exam-active .timer,
body.exam-active #timer,
body.exam-active .countdown {
  font-weight:700 !important;
  background:#f6f6f6 !important;
  border-radius:2px !important;
}
body.exam-active .section-bar {
  height:34px !important;
  border-bottom:1px solid #ddd !important;
  background:#fff !important;
}
body.exam-active .section-tab,
body.exam-active .active-section {
  background:#14738a !important;
  color:#fff !important;
  border-radius:2px !important;
}
body.exam-active .exam-main {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 270px !important;
  min-height:calc(100vh - 84px) !important;
}
body.exam-active .question-area {
  background:#fff !important;
  padding:0 14px 70px !important;
}
body.exam-active .question-header {
  min-height:48px !important;
  border-bottom:1px solid #ddd !important;
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
}
body.exam-active .question-text {
  font-size:15px !important;
  line-height:1.55 !important;
  margin:14px 0 18px !important;
}
body.exam-active .option,
body.exam-active .option-row {
  font-size:14px !important;
  padding:8px 0 !important;
  border:0 !important;
  background:#fff !important;
}
body.exam-active .exam-sidebar {
  background:#dff1f8 !important;
  border-left:1px solid #c7dbe2 !important;
  min-width:0 !important;
}
body.exam-active .student-mini,
body.exam-active .palette-header {
  background:#dff1f8 !important;
}
body.exam-active .question-palette {
  padding:12px !important;
}
body.exam-active .question-palette button {
  width:35px !important;
  height:26px !important;
  border-radius:0 !important;
  border:1px solid #777 !important;
  background:#f7f7f7 !important;
  color:#111 !important;
  margin:5px !important;
  font-size:13px !important;
}
body.exam-active .exam-footer {
  position:fixed !important;
  left:0 !important;
  right:270px !important;
  bottom:0 !important;
  min-height:52px !important;
  background:#f4f4f4 !important;
  border-top:1px solid #ccc !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:8px 14px !important;
  z-index:1000 !important;
}
body.exam-active .exam-footer button {
  border-radius:2px !important;
  font-size:13px !important;
}
body.exam-active .submit-test {
  background:#16b6cf !important;
  color:#fff !important;
}
@media (max-width:900px){
  body.exam-active .exam-main{grid-template-columns:minmax(0,1fr) 220px !important;}
  body.exam-active .exam-footer{right:220px !important;}
}


/* --- Original style block 22 --- */

/* ==========================================================
   V1.9 UI16 — reference examination interface
   Only active exam screen is styled. Dashboard/result untouched.
   ========================================================== */
body.v13-exam-active #exam{
  background:#fff !important;
  color:#111 !important;
  font-family:Arial,Helvetica,sans-serif !important;
  min-height:100vh !important;
}
body.v13-exam-active #exam .examTop{
  height:50px !important;
  min-height:50px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:0 14px !important;
  background:#fff !important;
  border-bottom:1px solid #d6d6d6 !important;
  box-shadow:0 1px 3px rgba(0,0,0,.10) !important;
}
body.v13-exam-active #exam .examGrid{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 270px !important;
  gap:0 !important;
  min-height:calc(100vh - 53px) !important;
  margin:0 !important;
}
body.v13-exam-active #exam .examGrid>.card:first-child{
  min-width:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 14px 70px !important;
  background:#fff !important;
}
body.v13-exam-active #questionNo{
  min-height:48px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  border-bottom:1px solid #ddd !important;
  font-size:13px !important;
  font-weight:700 !important;
  color:#222 !important;
}
body.v13-exam-active #questionText{
  margin:14px 0 18px !important;
  font-size:15px !important;
  line-height:1.55 !important;
  color:#222 !important;
}
body.v13-exam-active #options{
  margin:0 !important;
}
body.v13-exam-active #options label{
  display:block !important;
  padding:8px 0 !important;
  font-size:14px !important;
  line-height:1.45 !important;
  border:0 !important;
  background:#fff !important;
  box-shadow:none !important;
}
body.v13-exam-active #exam .side{
  min-width:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  border:0 !important;
  border-left:1px solid #c8dbe2 !important;
  box-shadow:none !important;
  background:#dff1f8 !important;
  padding:0 !important;
}
body.v13-exam-active #exam .side h3{
  margin:0 !important;
  padding:12px !important;
  background:#b9dfec !important;
  border-bottom:1px solid #a7ccd8 !important;
  font-size:14px !important;
  text-transform:uppercase !important;
}
body.v13-exam-active #palette{
  padding:10px !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-content:flex-start !important;
  gap:6px !important;
}
body.v13-exam-active #palette button{
  width:35px !important;
  height:26px !important;
  min-width:35px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  border:1px solid #777 !important;
  background:#f7f7f7 !important;
  color:#111 !important;
  font-size:13px !important;
}
body.v13-exam-active #exam .nav{
  position:fixed !important;
  left:0 !important;
  right:270px !important;
  bottom:0 !important;
  height:52px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:8px 14px !important;
  margin:0 !important;
  background:#f4f4f4 !important;
  border-top:1px solid #ccc !important;
  z-index:900 !important;
}
body.v13-exam-active #exam .nav button{
  border-radius:2px !important;
  font-size:13px !important;
}
body.v13-exam-active #exam .nav button:last-child{
  background:#16b6cf !important;
  color:#fff !important;
}
@media(max-width:900px){
  body.v13-exam-active #exam .examGrid{grid-template-columns:minmax(0,1fr) 220px !important;}
  body.v13-exam-active #exam .nav{right:220px !important;}
}


/* --- Original style block 23 --- */

body.v13-exam-active #exam{background:#fff!important;color:#111!important;font-family:Arial,Helvetica,sans-serif!important}
body.v13-exam-active #exam .examTop{height:54px!important;margin:0!important;padding:0 14px!important;border-bottom:1px solid #d5d5d5!important;background:#fff!important;box-shadow:0 1px 3px rgba(0,0,0,.10)!important}
body.v13-exam-active #exam .examTop>div:first-child{min-width:0!important}
body.v13-exam-active #exam .examTop b{font-size:14px!important;font-weight:700!important}
body.v13-exam-active #exam .examTop .sub{font-size:11px!important;color:#666!important}
body.v13-exam-active #exam .timer{min-width:145px!important;text-align:center!important;font-size:16px!important;padding:8px 12px!important;border-radius:2px!important}
body.v13-exam-active #exam .ui17-fullscreen{height:34px!important;padding:0 11px!important;border:1px solid #999!important;border-radius:2px!important;background:#fff!important;color:#222!important;font-size:12px!important}
body.v13-exam-active #exam .ui17-sectionbar{height:35px!important;display:flex!important;align-items:center!important;border-bottom:1px solid #ccc!important;background:#fff!important}
body.v13-exam-active #exam .ui17-section-label{padding:0 14px!important;font-size:12px!important;font-weight:700!important;color:#555!important}
body.v13-exam-active #exam .ui17-section-tab{height:35px!important;display:flex!important;align-items:center!important;padding:0 20px!important;background:#14738a!important;color:#fff!important;font-size:12px!important;font-weight:700!important}
body.v13-exam-active #exam .examGrid{grid-template-columns:minmax(0,1fr) 270px!important;gap:0!important;margin:0!important}
body.v13-exam-active #exam .examGrid>.card:first-child{margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0 15px 70px!important}
body.v13-exam-active #exam .ui17-qmeta{height:48px!important;display:flex!important;align-items:center!important;gap:15px!important;border-bottom:1px solid #ddd!important;font-size:12px!important}
body.v13-exam-active #exam .ui17-qmeta .qstrong{font-weight:700!important;color:#222!important}
body.v13-exam-active #exam .ui17-positive{font-weight:700!important;color:#087443!important}
body.v13-exam-active #exam .ui17-negative{font-weight:700!important;color:#b42318!important}
body.v13-exam-active #exam .ui17-time{color:#555!important}
body.v13-exam-active #exam .ui17-meta-right{margin-left:auto!important;display:flex!important;align-items:center!important;gap:8px!important}
body.v13-exam-active #exam .ui17-lang{height:30px!important;border:1px solid #999!important;border-radius:2px!important;background:#fff!important;padding:0 8px!important}
body.v13-exam-active #exam .ui17-report{border:0!important;background:transparent!important;color:#555!important;font-size:12px!important}
body.v13-exam-active #exam .question{font-size:18px!important;line-height:1.55!important;font-weight:600!important;margin:17px 0 20px!important}
body.v13-exam-active #exam .option{border:0!important;border-radius:0!important;padding:9px 5px!important;margin:7px 0!important;background:#fff!important;font-size:14px!important}
body.v13-exam-active #exam .option.selected{background:#eef5fa!important;border-left:3px solid #14738a!important}
body.v13-exam-active #exam .side{margin:0!important;border:0!important;border-left:1px solid #c5dbe2!important;border-radius:0!important;box-shadow:none!important;background:#dff1f8!important;padding:0!important}
body.v13-exam-active #exam .ui17-profile{padding:11px 12px!important;background:#dff1f8!important;border-bottom:1px solid #bfd6de!important}
body.v13-exam-active #exam .ui17-profile strong{font-size:13px!important}
body.v13-exam-active #exam .ui17-stats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:5px!important;padding:9px 10px!important;background:#dff1f8!important}
body.v13-exam-active #exam .ui17-stat{display:flex!important;justify-content:space-between!important;padding:5px 6px!important;background:#fff!important;border:1px solid #c8dbe2!important;font-size:10px!important}
body.v13-exam-active #exam .ui17-stat b{font-size:11px!important}
body.v13-exam-active #exam .side h3{margin:0!important;padding:10px 12px!important;border-top:1px solid #bfd6de!important;border-bottom:1px solid #bfd6de!important;background:#b9dfec!important;font-size:13px!important}
body.v13-exam-active #exam .palette{padding:10px!important;grid-template-columns:repeat(5,1fr)!important;gap:6px!important}
body.v13-exam-active #exam .pbtn{border-radius:0!important;height:27px!important;padding:0!important}
body.v13-exam-active #exam .ui17-bottom{position:fixed!important;left:0!important;right:270px!important;bottom:0!important;height:54px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:8px 14px!important;box-sizing:border-box!important;background:#f4f4f4!important;border-top:1px solid #ccc!important;z-index:1200!important}
body.v13-exam-active #exam .ui17-bottom .group{display:flex!important;gap:8px!important}
body.v13-exam-active #exam .ui17-bottom button{height:36px!important;min-height:36px!important;padding:0 12px!important;border-radius:2px!important;font-size:12px!important}
body.v13-exam-active #exam .ui17-bottom .outline{background:#fff!important;color:#333!important;border:1px solid #999!important}
body.v13-exam-active #exam .ui17-bottom .primary{background:#16b6cf!important;color:#fff!important;border:1px solid #16b6cf!important}
body.v13-exam-active #exam .ui17-bottom .review{background:#fff!important;color:#333!important;border:1px solid #777!important}
@media(max-width:850px){
 body.v13-exam-active #exam .examGrid{grid-template-columns:minmax(0,1fr) 220px!important}
 body.v13-exam-active #exam .ui17-bottom{right:220px!important}
}


/* --- Original style block 24 --- */

body.v13-exam-active #exam #options .option{
  display:flex!important;align-items:center!important;box-sizing:border-box!important;
  width:100%!important;min-height:48px!important;margin:10px 0!important;
  padding:11px 14px!important;border:1px solid #b9c0c8!important;
  border-radius:3px!important;background:#fff!important;color:#222!important;
  cursor:pointer!important;text-align:left!important;
}
body.v13-exam-active #exam #options .option:hover{border-color:#14738a!important;background:#f7fbfd!important}
body.v13-exam-active #exam #options .option.selected{
  border:2px solid #14738a!important;background:#eef7fa!important;font-weight:600!important;
}
body.v13-exam-active #exam .ui21-palette-btn{
  width:100%!important;height:30px!important;padding:0!important;margin:0!important;
  border:1px solid #999!important;border-radius:3px!important;font-weight:700!important;
}
body.v13-exam-active #exam .ui21-palette-btn.current{outline:2px solid #14738a!important;outline-offset:1px!important}
body.v13-exam-active #exam .ui21-palette-btn.answered{background:#1f9d55!important;color:#fff!important;border-color:#187a42!important}
body.v13-exam-active #exam .ui21-palette-btn.marked{background:#f2b01e!important;color:#111!important;border-color:#c48700!important}
body.v13-exam-active #exam .ui21-palette-btn.marked-answered{background:#7b61b8!important;color:#fff!important;border-color:#604596!important}
body.v13-exam-active #exam .ui21-palette-btn.not-answered{background:#e9e9e9!important;color:#333!important}
body.v13-exam-active #exam .ui21-palette-btn.not-visited{background:#fff!important;color:#777!important}
body.v13-exam-active #exam #examSubmitTestButton{display:none!important}
body.v13-exam-active #exam .ui21-bottom{
  position:fixed!important;left:0!important;right:270px!important;bottom:0!important;
  height:56px!important;z-index:1200!important;display:flex!important;
  align-items:center!important;justify-content:space-between!important;
  box-sizing:border-box!important;padding:8px 14px!important;
  background:#f4f4f4!important;border-top:1px solid #ccc!important;
}
body.v13-exam-active #exam .ui21-bottom .grp{display:flex!important;gap:8px!important}
body.v13-exam-active #exam .ui21-bottom button{
  height:38px!important;padding:0 13px!important;border-radius:3px!important;
  font-size:12px!important;cursor:pointer!important;
}
body.v13-exam-active #exam .ui21-bottom .outline{
  background:#fff!important;color:#333!important;border:1px solid #999!important;
}
body.v13-exam-active #exam .ui21-bottom .primary{
  background:#16b6cf!important;color:#fff!important;border:1px solid #16b6cf!important;
}
body.v13-exam-active #exam .ui21-bottom .review.active{
  background:#fff4d6!important;border-color:#d99a00!important;color:#7a4b00!important;
}
/* The violation badge must never cover the bottom exam controls. */
#examIntegrityBadge{bottom:70px!important;left:18px!important}
@media(max-width:900px){
 body.v13-exam-active #exam .ui21-bottom{right:220px!important}
}


/* --- Original style block 25 --- */

/* ============================================================
   HUB OF ASPIRANTS — FINAL CBT QUESTION PALETTE
   Status is driven by the classes added by render():
   not-visited | not-answered | answered | marked | marked-answered
   These rules intentionally do NOT depend on body mode classes.
   ============================================================ */
#exam #palette,
#exam .palette{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  grid-auto-rows:42px !important;
  gap:7px !important;
  width:100% !important;
  max-width:100% !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:10px !important;
  box-sizing:border-box !important;
}
#exam .ui21-palette-btn{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:100% !important;
  min-width:0 !important;
  height:42px !important;
  margin:0 !important;
  padding:0 2px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  border:1px solid #9aa3ad !important;
  border-radius:4px !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:800 !important;
  cursor:pointer !important;
  opacity:1 !important;
  box-shadow:none !important;
  transition:none !important;
}
/* 1 — Not Visited: grey */
#exam .ui21-palette-btn.not-visited{
  background:#d9dde2 !important;
  color:#30363d !important;
  border-color:#aeb5bd !important;
}
/* 2 — Not Answered: red/orange */
#exam .ui21-palette-btn.not-answered{
  background:#e5533d !important;
  color:#ffffff !important;
  border-color:#c93d2c !important;
}
/* 3 — Answered: green */
#exam .ui21-palette-btn.answered{
  background:#20a447 !important;
  color:#ffffff !important;
  border-color:#168238 !important;
}
/* 4 — Marked for Review: purple */
#exam .ui21-palette-btn.marked{
  background:#7b4ab5 !important;
  color:#ffffff !important;
  border-color:#60348e !important;
}
/* 5 — Answered + Marked for Review: purple + white tick */
#exam .ui21-palette-btn.marked-answered{
  background:#7b4ab5 !important;
  color:#ffffff !important;
  border-color:#60348e !important;
  position:relative !important;
}
/* Current question is indicated by an outline only; it must never
   replace the underlying status colour. */
#exam .ui21-palette-btn.current{
  outline:3px solid #111827 !important;
  outline-offset:1px !important;
  z-index:2 !important;
}
#exam .ui21-palette-btn:focus-visible{
  outline:3px solid #14738a !important;
  outline-offset:2px !important;
}
#exam .legend{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:6px !important;
  margin:4px 10px 12px !important;
  padding:0 !important;
  font-size:12px !important;
  line-height:1.3 !important;
  color:#374151 !important;
}
/* Do not let the legacy Next button bypass the CBT controls. */
#exam .nav button.primary{display:none !important;}
@media(max-width:768px){
  #exam #palette,
  #exam .palette{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    grid-auto-rows:40px !important;
    gap:6px !important;
    padding:8px !important;
  }
  #exam .ui21-palette-btn{
    height:40px !important;
    font-size:13px !important;
  }
}


/* --- Original style block 26 --- */

#exam .ui21-palette-btn.not-visited{background:#e5e7eb !important;color:#374151 !important;border:1px solid #9ca3af !important;}
#exam .ui21-palette-btn.not-answered{background:#ef4444 !important;color:#ffffff !important;border:1px solid #b91c1c !important;}
#exam .ui21-palette-btn.answered{background:#22c55e !important;color:#ffffff !important;border:1px solid #15803d !important;}
#exam .ui21-palette-btn.marked{background:#8b5cf6 !important;color:#ffffff !important;border:1px solid #6d28d9 !important;}
#exam .ui21-palette-btn.marked-answered{background:#8b5cf6 !important;color:#ffffff !important;border:1px solid #6d28d9 !important;}
#exam .ui21-palette-btn.marked-answered::after{content:"✓" !important;margin-left:3px !important;font-weight:900 !important;}
#exam .ui21-palette-btn.current{outline:3px solid #111827 !important;outline-offset:1px !important;}


/* --- Original style block 27 --- */

/* ============================================================
   MOBILE LOGIN ONLY
   Desktop login layout above remains unchanged.
   This block deliberately controls ONLY #authScreen.
   ============================================================ */
@media (max-width: 767px){
  html, body{width:100%;max-width:100%;overflow-x:hidden;}

  body:not(.admin-ui) > main.container{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 10px 28px !important;
    box-sizing:border-box !important;
  }

  #authScreen,
  #authScreen.card{
    display:block !important;
    position:relative !important;
    width:100% !important;
    max-width:560px !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:14px auto 22px !important;
    padding:16px !important;
    box-sizing:border-box !important;
    border-radius:18px !important;
    overflow:visible !important;
  }

  /* Branding */
  #authScreen > div:first-child{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 0 18px !important;
    padding:0 !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }

  #authScreen > div:first-child .mission-logo{
    display:block !important;
    width:76px !important;
    height:76px !important;
    max-width:76px !important;
    margin:0 auto 10px !important;
  }

  #authScreen > div:first-child h1{
    font-size:25px !important;
    line-height:1.15 !important;
    margin:0 0 6px !important;
    white-space:normal !important;
  }

  #authScreen > div:first-child p{
    font-size:14px !important;
    line-height:1.35 !important;
  }

  /* Student card */
  #authScreen > .dashPanel,
  #authScreen > .dashPanel:first-of-type,
  #authScreen > .dashPanel:nth-of-type(2),
  #authScreen .homeAdminPanel{
    display:block !important;
    float:none !important;
    position:relative !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
  }

  #authScreen > .dashPanel:first-of-type{
    padding:18px !important;
    margin:0 !important;
    border-radius:15px !important;
  }

  #authScreen > .dashPanel:first-of-type h2{
    font-size:22px !important;
    line-height:1.2 !important;
    margin:0 0 14px !important;
  }

  /* Three login modes: compact, equal-width, wrapping labels. */
  #authScreen .authTabs{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    width:100% !important;
    min-width:0 !important;
    gap:6px !important;
    margin:0 0 18px !important;
  }

  #authScreen .authTab{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-width:0 !important;
    min-height:50px !important;
    height:auto !important;
    padding:8px 4px !important;
    box-sizing:border-box !important;
    font-size:10.5px !important;
    line-height:1.15 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    text-align:center !important;
  }

  /* Every login/register control must fill the card, never shrink. */
  #authScreen .formGroup{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    margin-bottom:13px !important;
  }

  #authScreen .formGroup label{
    width:100% !important;
    font-size:13px !important;
    line-height:1.25 !important;
    margin-bottom:6px !important;
  }

  #authScreen input,
  #authScreen select,
  #authScreen textarea{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:46px !important;
    height:auto !important;
    padding:11px 12px !important;
    box-sizing:border-box !important;
    font-size:15px !important;
    border-radius:9px !important;
  }

  #authScreen .primary,
  #authScreen button.primary{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    min-height:48px !important;
    box-sizing:border-box !important;
    margin:4px 0 0 !important;
    font-size:14px !important;
  }

  /* Free-test information boxes must wrap instead of overflowing. */
  #authScreen #freeGateBox > div,
  #authScreen #freeRegisterBox > div,
  #authScreen #registrationTypeNote{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }

  /* Admin panel stays below Student, compact and full width. */
  #authScreen > div[style*="height:18px"],
  #authScreen > div[style*="height:20px"]{
    display:none !important;
  }

  #authScreen .homeAdminPanel{
    margin:14px 0 0 !important;
    padding:14px !important;
    border-radius:14px !important;
  }

  #authScreen .homeAdminHeader{
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
  }

  #authScreen .homeAdminHeader h2{
    font-size:18px !important;
    line-height:1.2 !important;
  }

  #authScreen .homeAdminToggle{
    flex:0 0 auto !important;
    min-width:0 !important;
    min-height:42px !important;
    padding:9px 12px !important;
    font-size:11px !important;
    white-space:nowrap !important;
  }

  #authScreen .homeAdminBody{
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  /* Prototype note */
  #authScreen > div:last-child{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:12px 0 0 !important;
    box-sizing:border-box !important;
    font-size:10px !important;
    line-height:1.35 !important;
  }
}

/* Extra-small phones */
@media (max-width:380px){
  #authScreen{padding:12px !important;margin-top:10px !important;}
  #authScreen > .dashPanel:first-of-type{padding:15px !important;}
  #authScreen > div:first-child .mission-logo{width:68px !important;height:68px !important;}
  #authScreen > div:first-child h1{font-size:23px !important;}
  #authScreen .authTabs{gap:4px !important;}
  #authScreen .authTab{font-size:9.5px !important;min-height:48px !important;padding:7px 2px !important;}
}


/* --- Original style block 28 --- */

/* ============================================================
   HUB OF ASPIRANTS — FINAL RESPONSIVE LAYOUT
   Desktop and mobile presentation only.
   Existing exam/status/database/auth logic is intentionally untouched.
   ============================================================ */
html,body{width:100%;max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas{max-width:100%;height:auto}
button,input,select,textarea{max-width:100%}

/* ---------- Desktop: stable working canvas ---------- */
@media (min-width:1200px){
  main.container{width:100%;max-width:1280px;margin:0 auto;padding-left:24px;padding-right:24px}
  #authScreen{max-width:900px}
  #home{width:100%;max-width:1280px;margin:0 auto}
  #exam{width:100%;max-width:1200px;margin:0 auto}
  #result{width:100%;max-width:1080px;margin:28px auto}
  #exam .examGrid,.examGrid{min-width:0}
  #exam .questionCard,#exam .question-card{min-width:0}
  #studentOnlyDashboard,#adminOnlyDashboard{min-width:0}
  #studentOnlyDashboard .testItem,#adminOnlyDashboard .testItem{min-width:0}
}

/* ---------- Laptop / tablet ---------- */
@media (min-width:768px) and (max-width:1199px){
  main.container{width:100%;padding-left:16px;padding-right:16px}
  #authScreen{max-width:860px}
  #home,#exam,#result{width:100%;max-width:100%}
  #exam .examGrid,.examGrid{grid-template-columns:minmax(0,1fr) 220px;gap:14px}
  .adminReferenceMain{min-width:0}
  .adminReferenceMain .adminResultCards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .adminReferenceMain .resultTableWrap,.adminReferenceMain .testWiseTableWrap{overflow-x:auto}
}

/* ============================================================
   PHONE — 767px and below
   ============================================================ */
@media (max-width:767px){
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header{
    top:8px !important;
    right:8px !important;
  }
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header #studentHeaderLogout{
    min-height:38px !important;
    padding:8px 10px !important;
    font-size:11px !important;
  }
  html{font-size:16px;overflow-x:hidden}
  body{width:100%;min-width:0;overflow-x:hidden;padding-bottom:env(safe-area-inset-bottom)}
  main.container{width:100%!important;max-width:none!important;margin:0!important;padding:0 10px 24px!important}

  /* Header */
  body:not(.admin-ui)>header.header{
    position:sticky!important;top:0!important;width:100%!important;min-width:0!important;
    padding:10px 12px!important;z-index:9000!important;
  }
  body:not(.admin-ui)>header.header .headerRight{
    min-width:0!important;gap:6px!important;flex-wrap:nowrap!important;
  }
  body:not(.admin-ui)>header.header .brand{min-width:0!important;overflow:hidden!important}
  body:not(.admin-ui)>header.header .brand *{max-width:100%!important}
  body:not(.admin-ui)>header.header .headerLogoutBtn{font-size:11px!important;padding:8px 9px!important;white-space:nowrap!important}

  /* ---------- Login ---------- */
  #authScreen,#authScreen.card{
    display:block!important;width:100%!important;max-width:560px!important;min-width:0!important;
    min-height:0!important;margin:12px auto 20px!important;padding:14px!important;
    border-radius:16px!important;overflow:visible!important;
  }
  #authScreen>div:first-child{
    display:block!important;width:100%!important;min-width:0!important;margin:0 0 16px!important;
    padding:0!important;text-align:center!important;
  }
  #authScreen>div:first-child .mission-logo{
    display:block!important;width:72px!important;height:72px!important;max-width:72px!important;
    margin:0 auto 9px!important;
  }
  #authScreen>div:first-child h1{
    font-size:clamp(22px,6vw,27px)!important;line-height:1.15!important;
    white-space:normal!important;margin:0 0 5px!important;
  }
  #authScreen>div:first-child p{font-size:14px!important;line-height:1.35!important}
  #authScreen>.dashPanel,#authScreen>.homeAdminPanel{
    display:block!important;position:relative!important;float:none!important;width:100%!important;
    max-width:none!important;min-width:0!important;margin:0 0 14px!important;padding:16px!important;
    border-radius:14px!important;
  }
  #authScreen .authTabs{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;width:100%!important;margin:0 0 16px!important;
  }
  #authScreen .authTab{
    width:100%!important;min-width:0!important;min-height:48px!important;height:auto!important;
    padding:7px 3px!important;font-size:10px!important;line-height:1.15!important;
    white-space:normal!important;overflow-wrap:anywhere!important;text-align:center!important;
  }
  #authScreen .formGroup{width:100%!important;min-width:0!important;margin-bottom:12px!important}
  #authScreen .formGroup label{font-size:13px!important;line-height:1.25!important;margin-bottom:5px!important}
  #authScreen input,#authScreen select,#authScreen textarea{
    display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;
    min-height:46px!important;padding:10px 11px!important;font-size:15px!important;
  }
  #authScreen .primary,#authScreen button.primary{
    width:100%!important;min-width:0!important;min-height:48px!important;font-size:14px!important;
  }
  #authScreen .homeAdminHeader{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important}
  #authScreen .homeAdminHeader>div{min-width:0!important;flex:1 1 auto!important}
  #authScreen .homeAdminToggle{flex:0 0 auto!important;min-height:42px!important;font-size:10.5px!important;padding:8px 10px!important}
  #authScreen .homeAdminBody{width:100%!important;min-width:0!important}
  #authScreen>div[style*="height:18px"],#authScreen>div[style*="height:20px"]{display:none!important}
  #authScreen>div:last-child{width:100%!important;margin:8px 0 0!important;font-size:10px!important;line-height:1.35!important}

  /* ---------- Student dashboard ---------- */
  #home{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;background:transparent!important}
  #studentOnlyDashboard{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;min-width:0!important}
  #studentOnlyDashboard .candidateSectionNav{
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;width:100%!important;
  }
  #studentOnlyDashboard .candidateSectionNav button{
    width:100%!important;min-width:0!important;min-height:50px!important;padding:9px 7px!important;
    font-size:12px!important;line-height:1.2!important;white-space:normal!important;
  }
  #studentOnlyDashboard .profileCard{
    width:100%!important;display:grid!important;grid-template-columns:46px minmax(0,1fr)!important;
    gap:9px!important;align-items:center!important;padding:13px!important;margin:10px 0!important;
  }
  #studentOnlyDashboard .profileCard .avatar{grid-column:1;width:46px!important;height:46px!important}
  #studentOnlyDashboard .profileInfo{grid-column:2;min-width:0!important}
  #studentOnlyDashboard .profileLabel{grid-column:1/-1;margin:0!important}
  #studentOnlyDashboard .profileCard button{grid-column:1/-1;width:100%!important;margin:0!important}
  #studentOnlyDashboard .dashGrid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  #studentOnlyDashboard .dashStat{min-width:0!important;min-height:88px!important;padding:11px!important}
  #studentOnlyDashboard .dashStat b{font-size:20px!important}
  #studentOnlyDashboard .candidateSectionPanel>.dashPanel{width:100%!important;min-width:0!important;padding:14px!important}
  #studentOnlyDashboard .studentPanelHeading{display:flex!important;align-items:flex-start!important;gap:8px!important;flex-wrap:wrap!important}
  #studentOnlyDashboard .studentPanelHeading>div{min-width:0!important;flex:1 1 180px!important}
  #studentOnlyDashboard .testCountBadge{flex:0 0 auto!important}
  #studentOnlyDashboard .testItem{width:100%!important;min-width:0!important;display:flex!important;flex-direction:column!important;gap:10px!important;padding:13px!important}
  #studentOnlyDashboard .testItem>*{max-width:100%!important;min-width:0!important}
  #studentOnlyDashboard .testItem .actions,#studentOnlyDashboard .startSmall{width:100%!important}
  #studentOnlyDashboard .testItem .actions button,#studentOnlyDashboard .startSmall{width:100%!important}

  /* ---------- Exam ---------- */
  #exam{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;min-width:0!important}
  #exam .examTop,.examTop{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:7px!important;flex-wrap:wrap!important}
  #exam .examGrid,.examGrid{display:flex!important;flex-direction:column!important;width:100%!important;min-width:0!important;gap:10px!important}
  #exam .questionCard,#exam .question-card{order:1!important;width:100%!important;min-width:0!important;padding:13px!important;border-radius:14px!important}
  #exam .side{order:2!important;width:100%!important;min-width:0!important}
  #exam .question{font-size:17px!important;line-height:1.5!important;overflow-wrap:anywhere!important}
  #exam .option,#exam .option-btn,#exam .answer-option,#exam .mcq-option{
    width:100%!important;min-height:52px!important;padding:12px!important;font-size:15px!important;
    line-height:1.4!important;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere!important;
  }
  #exam .palette,#exam .questionPalette,#exam .question-palette{
    width:100%!important;max-width:100%!important;display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px!important;overflow:visible!important;
  }
  #exam .ui21-palette-btn{min-width:0!important;min-height:42px!important;padding:0!important;font-size:13px!important}
  #exam .ui21-bottom,.ui21-bottom,.ui17-bottom{
    position:sticky!important;bottom:0!important;z-index:8000!important;width:100%!important;
    display:flex!important;flex-wrap:wrap!important;gap:6px!important;padding:8px!important;
    margin:8px -1px calc(-1 * env(safe-area-inset-bottom))!important;
    background:rgba(255,255,255,.97)!important;backdrop-filter:blur(10px)!important;
    border-top:1px solid #dbe3ec!important;
  }
  #exam .ui21-bottom .grp,.ui21-bottom .grp,.ui17-bottom .group{display:flex!important;gap:6px!important;flex:1 1 100%!important;min-width:0!important}
  #exam .ui21-bottom button,.ui21-bottom button,.ui17-bottom button{
    flex:1 1 0!important;min-width:0!important;min-height:46px!important;padding:8px 6px!important;
    font-size:11px!important;line-height:1.15!important;white-space:normal!important;
  }
  #exam .side .legend,.legend{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important}

  /* ---------- Result review ---------- */
  #result{width:100%!important;max-width:none!important;margin:12px auto!important;padding:0 2px!important}
  #result .resultSingleWindow{width:100%!important;min-width:0!important;border-radius:14px!important}
  #result .resultHeader{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important;padding:17px!important}
  #result .resultHeader>div{min-width:0!important}
  #result #resultTitle{font-size:20px!important}
  #result .resultBackBtn{width:100%!important;margin:0!important}
  .reviewLayout{display:flex!important;flex-direction:column!important;gap:10px!important}
  .reviewNavCard,.reviewQuestionCard{width:100%!important;min-width:0!important}
  .reviewPalette{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px!important}
  .reviewPalette button{min-width:0!important;min-height:40px!important}
  .reviewQuestionText{font-size:16px!important;overflow-wrap:anywhere!important}
  .reviewOptions>*{min-width:0!important;overflow-wrap:anywhere!important}
  .reviewBottomNav{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
  .reviewBottomNav button{width:100%!important;min-width:0!important}

  /* ---------- Admin mobile ---------- */
  body.admin-ui main.container{width:100%!important;max-width:none!important;padding:0!important}
  body.admin-ui>.header{max-width:calc(100% - 16px)!important}
  .adminReferenceMain{width:100%!important;max-width:none!important;margin-left:0!important;padding:62px 8px calc(78px + env(safe-area-inset-bottom))!important;overflow-x:hidden!important}
  .adminReferenceMain>#adminOnlyDashboard{width:100%!important;max-width:none!important;min-width:0!important}
  .adminReferenceMain .adminReferenceTopbar{min-width:0!important}
  .adminReferenceMain .adminReferenceTopbarTitle{font-size:18px!important;line-height:1.2!important}
  .adminReferenceMain .adminReferenceTopbarSub{font-size:11px!important}
  .adminReferenceMain .adminResultCards{grid-template-columns:1fr 1fr!important;gap:7px!important}
  .adminReferenceMain .adminResultCard{min-width:0!important;min-height:82px!important;padding:10px!important}
  .adminReferenceMain .resultToolbar,.adminReferenceMain .testWiseToolbar{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  .adminReferenceMain .resultToolbar>*,.adminReferenceMain .testWiseToolbar>*{width:100%!important;min-width:0!important}
  .adminReferenceMain .resultTableWrap,.adminReferenceMain .testWiseTableWrap{width:100%!important;max-width:100%!important;overflow-x:auto!important}
  .adminReferenceMain table{min-width:720px!important}
  .adminReferenceMain .studentItem,.adminReferenceMain .candidateItem,.adminReferenceMain .testItem{min-width:0!important;overflow-wrap:anywhere!important}

  /* ---------- Generic safety rules ---------- */
  .row,.actions,.button-row,.toolbar,.studentPanelHeading{max-width:100%!important;min-width:0!important}
  .row>* ,.actions>* ,.button-row>* ,.toolbar>*{min-width:0!important;max-width:100%!important}
  pre,code{max-width:100%!important;overflow-x:auto!important}
  table{max-width:none!important}
}

/* Extra-small phones */
@media (max-width:380px){
  main.container{padding-left:7px!important;padding-right:7px!important}
  #authScreen,#authScreen.card{padding:12px!important}
  #authScreen>.dashPanel{padding:13px!important}
  #authScreen .authTabs{gap:4px!important}
  #authScreen .authTab{font-size:9px!important;min-height:46px!important}
  #studentOnlyDashboard .candidateSectionNav button{font-size:11px!important}
  #studentOnlyDashboard .dashStat{min-height:82px!important;padding:9px!important}
  #exam .palette,#exam .questionPalette,#exam .question-palette{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:5px!important}
  #exam .ui21-palette-btn{min-height:39px!important;font-size:12px!important}
  #exam .ui21-bottom button,.ui21-bottom button,.ui17-bottom button{font-size:10px!important}
}


/* --- Original style block 29 --- */

/* FINAL MOBILE / DESKTOP VISIBILITY + EXAM LAYOUT FIX
   Scope: presentation only. Does not change CBT answer/status logic. */

/* Authentication must never remain visible behind a logged-in dashboard. */
body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) #authScreen,
body:not(.admin-ui):has(#adminOnlyDashboard:not(.hidden)) #authScreen,
body.v13-exam-active #authScreen{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Student dashboard itself must occupy the available viewport cleanly. */
body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) #home{
  width:100% !important;
  max-width:1280px !important;
  margin:0 auto !important;
}

/* ---------- Examination: desktop ---------- */
@media (min-width:768px){
  body.v13-exam-active #exam{
    width:100% !important;
    max-width:1200px !important;
    margin:0 auto !important;
  }
  body.v13-exam-active #exam .examGrid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 270px !important;
    width:100% !important;
    min-width:0 !important;
  }
  body.v13-exam-active #exam .examGrid > .card:first-child{
    min-width:0 !important;
    width:auto !important;
  }
  body.v13-exam-active #exam .side{
    width:auto !important;
    min-width:0 !important;
  }
  body.v13-exam-active #exam .ui17-bottom{
    left:0 !important;
    right:270px !important;
    width:auto !important;
  }
}

/* ---------- Examination: phone ---------- */
@media (max-width:767px){
  body.v13-exam-active #exam{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow-x:hidden !important;
  }
  body.v13-exam-active #exam .examTop{
    width:100% !important;
    min-height:58px !important;
    height:auto !important;
    padding:8px 10px !important;
    gap:7px !important;
  }
  body.v13-exam-active #exam .examTop > div:first-child{
    flex:1 1 150px !important;
    min-width:0 !important;
  }
  body.v13-exam-active #exam .examTop > div:last-child{
    flex:0 1 auto !important;
    min-width:0 !important;
  }
  body.v13-exam-active #exam .timer{
    min-width:88px !important;
    width:auto !important;
    font-size:13px !important;
    padding:7px 8px !important;
  }
  body.v13-exam-active #exam .ui17-fullscreen{
    display:none !important;
  }
  body.v13-exam-active #exam .ui17-sectionbar{
    width:100% !important;
    height:36px !important;
  }
  body.v13-exam-active #exam .ui17-section-label,
  body.v13-exam-active #exam .ui17-section-tab{
    font-size:11px !important;
  }
  body.v13-exam-active #exam .examGrid{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    gap:0 !important;
    margin:0 !important;
  }
  body.v13-exam-active #exam .examGrid > .card:first-child,
  body.v13-exam-active #exam .examGrid > .side{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  body.v13-exam-active #exam .examGrid > .card:first-child{
    order:1 !important;
    padding:0 12px 125px !important;
  }
  body.v13-exam-active #exam .examGrid > .side{
    order:2 !important;
    border-left:0 !important;
    border-top:1px solid #bfd6de !important;
    margin:0 !important;
  }
  body.v13-exam-active #exam .ui17-qmeta{
    min-height:46px !important;
    height:auto !important;
    flex-wrap:wrap !important;
    gap:7px 10px !important;
    padding:7px 0 !important;
  }
  body.v13-exam-active #exam .ui17-meta-right{
    width:100% !important;
    margin-left:0 !important;
    justify-content:space-between !important;
  }
  body.v13-exam-active #exam .ui17-lang{flex:1 1 auto !important;min-width:0 !important;}
  body.v13-exam-active #exam .ui17-report{flex:0 0 auto !important;}
  body.v13-exam-active #exam .question{
    font-size:18px !important;
    line-height:1.48 !important;
    margin:16px 0 16px !important;
    overflow-wrap:anywhere !important;
  }
  body.v13-exam-active #exam #options .option{
    width:100% !important;
    min-height:54px !important;
    margin:9px 0 !important;
    padding:12px 13px !important;
    font-size:15px !important;
    line-height:1.4 !important;
  }
  body.v13-exam-active #exam .side .ui17-profile{padding:12px !important;}
  body.v13-exam-active #exam .side .ui17-stats{
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
    padding:9px !important;
  }
  body.v13-exam-active #exam .side h3{padding:11px 12px !important;}
  body.v13-exam-active #exam .side .palette{
    width:100% !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:6px !important;
    padding:10px !important;
  }
  body.v13-exam-active #exam .side .pbtn,
  body.v13-exam-active #exam .ui21-palette-btn{
    width:100% !important;
    min-width:0 !important;
    min-height:42px !important;
    height:42px !important;
    font-size:13px !important;
  }
  body.v13-exam-active #exam .side .legend{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:5px !important;
    padding:0 10px 12px !important;
    line-height:1.35 !important;
  }
  body.v13-exam-active #exam .ui17-bottom{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
    margin:0 !important;
    background:rgba(255,255,255,.98) !important;
    z-index:12000 !important;
  }
  body.v13-exam-active #exam .ui17-bottom .group{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
    width:100% !important;
    min-width:0 !important;
  }
  body.v13-exam-active #exam .ui17-bottom button{
    width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
    height:auto !important;
    padding:7px 4px !important;
    font-size:10px !important;
    line-height:1.15 !important;
    white-space:normal !important;
  }
}

@media (max-width:430px){
  body.v13-exam-active #exam .examTop b{font-size:13px !important;}
  body.v13-exam-active #exam .examTop .sub{font-size:10px !important;}
  body.v13-exam-active #exam .question{font-size:17px !important;}
  body.v13-exam-active #exam .ui17-bottom{
    grid-template-columns:1fr !important;
  }
  body.v13-exam-active #exam .ui17-bottom .group{
    grid-template-columns:1fr 1fr !important;
  }
}

/* Dashboard: keep mobile cards from inheriting desktop widths. */
@media (max-width:767px){
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > main.container{
    width:100% !important;
    max-width:none !important;
    padding:8px !important;
  }
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) #studentOnlyDashboard{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) #studentOnlyDashboard .candidateSectionPanel,
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) #studentOnlyDashboard .dashPanel,
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) #studentOnlyDashboard .testItem{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
}


/* --- Original style block 30 --- */

/* =========================================================
   FINAL MOBILE V2 — LOGIN/DASHBOARD + EXAM
   Presentation only. CBT answer/status logic is untouched.
   ========================================================= */

/* Never let the authentication card remain over a logged-in UI. */
#authScreen.hidden,
body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) #authScreen,
body:not(.admin-ui):has(#home:not(.hidden)) #authScreen,
body.v13-exam-active #authScreen,
body:has(#exam:not(.hidden)) #authScreen{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* If a dashboard is visible, its own content must be above nothing else. */
@media (max-width:767px){
  html,body{max-width:100%;overflow-x:hidden !important;}
  body:not(.admin-ui) > main.container{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    padding:8px !important;
  }

  /* ---------- Student dashboard ---------- */
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) #home{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) #studentOnlyDashboard{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }

  /* ---------- Exam: phone is one vertical column ---------- */
  body:has(#exam:not(.hidden)) #exam,
  body.v13-exam-active #exam{
    display:block !important;
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
  }

  body:has(#exam:not(.hidden)) #exam .examTop,
  body.v13-exam-active #exam .examTop{
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:54px !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    padding:7px 10px !important;
  }
  body:has(#exam:not(.hidden)) #exam .examTop > div:first-child,
  body.v13-exam-active #exam .examTop > div:first-child{
    flex:1 1 auto !important;
    min-width:0 !important;
  }
  body:has(#exam:not(.hidden)) #exam .examTop > div:last-child,
  body.v13-exam-active #exam .examTop > div:last-child{
    flex:0 0 auto !important;
    min-width:0 !important;
  }
  body:has(#exam:not(.hidden)) #exam .examTop b,
  body.v13-exam-active #exam .examTop b{
    display:block !important;
    font-size:15px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  body:has(#exam:not(.hidden)) #exam .examTop .sub,
  body.v13-exam-active #exam .examTop .sub{
    font-size:10px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  body:has(#exam:not(.hidden)) #exam .timer,
  body.v13-exam-active #exam .timer{
    min-width:78px !important;
    width:auto !important;
    padding:6px 7px !important;
    font-size:12px !important;
    box-sizing:border-box !important;
  }
  body:has(#exam:not(.hidden)) #exam .ui17-fullscreen,
  body.v13-exam-active #exam .ui17-fullscreen{
    display:none !important;
  }

  body:has(#exam:not(.hidden)) #exam .ui17-sectionbar,
  body.v13-exam-active #exam .ui17-sectionbar{
    width:100% !important;
    height:36px !important;
    min-height:36px !important;
    display:flex !important;
    align-items:center !important;
    box-sizing:border-box !important;
  }
  body:has(#exam:not(.hidden)) #exam .ui17-section-label,
  body:has(#exam:not(.hidden)) #exam .ui17-section-tab,
  body.v13-exam-active #exam .ui17-section-label,
  body.v13-exam-active #exam .ui17-section-tab{
    height:36px !important;
    font-size:11px !important;
    line-height:1 !important;
    box-sizing:border-box !important;
  }

  /* Keep the progress bar below the section bar, not beside content. */
  body:has(#exam:not(.hidden)) #exam > .progress,
  body.v13-exam-active #exam > .progress{
    width:100% !important;
    height:7px !important;
    margin:0 !important;
    box-sizing:border-box !important;
  }

  /* Critical fix: override every desktop grid rule on phones. */
  body:has(#exam:not(.hidden)) #exam .examGrid,
  body.v13-exam-active #exam .examGrid{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    gap:0 !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }
  body:has(#exam:not(.hidden)) #exam .examGrid > .card:first-child,
  body:has(#exam:not(.hidden)) #exam .examGrid > .side,
  body.v13-exam-active #exam .examGrid > .card:first-child,
  body.v13-exam-active #exam .examGrid > .side{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    flex:0 0 auto !important;
    box-sizing:border-box !important;
  }
  body:has(#exam:not(.hidden)) #exam .examGrid > .card:first-child,
  body.v13-exam-active #exam .examGrid > .card:first-child{
    order:1 !important;
    padding:0 12px 125px !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
  }
  body:has(#exam:not(.hidden)) #exam .examGrid > .side,
  body.v13-exam-active #exam .examGrid > .side{
    order:2 !important;
    margin:0 !important;
    padding:0 !important;
    border-left:0 !important;
    border-top:1px solid #bfd6de !important;
    border-radius:0 !important;
    box-sizing:border-box !important;
  }

  /* Question metadata must not become a narrow multi-column strip. */
  body:has(#exam:not(.hidden)) #exam .ui17-qmeta,
  body.v13-exam-active #exam .ui17-qmeta{
    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:44px !important;
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:6px 9px !important;
    padding:7px 0 !important;
    box-sizing:border-box !important;
  }
  body:has(#exam:not(.hidden)) #exam .ui17-meta-right,
  body.v13-exam-active #exam .ui17-meta-right{
    width:100% !important;
    margin-left:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:7px !important;
  }
  body:has(#exam:not(.hidden)) #exam .ui17-lang,
  body.v13-exam-active #exam .ui17-lang{
    flex:1 1 auto !important;
    min-width:0 !important;
  }

  body:has(#exam:not(.hidden)) #exam #questionNo,
  body.v13-exam-active #exam #questionNo{
    font-size:13px !important;
    line-height:1.3 !important;
    margin:10px 0 6px !important;
  }
  body:has(#exam:not(.hidden)) #exam .question,
  body.v13-exam-active #exam .question{
    width:100% !important;
    max-width:100% !important;
    font-size:18px !important;
    line-height:1.48 !important;
    margin:12px 0 16px !important;
    overflow-wrap:anywhere !important;
    box-sizing:border-box !important;
  }
  body:has(#exam:not(.hidden)) #exam #options,
  body.v13-exam-active #exam #options{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  body:has(#exam:not(.hidden)) #exam #options .option,
  body.v13-exam-active #exam #options .option{
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    min-height:54px !important;
    margin:8px 0 !important;
    padding:12px 13px !important;
    box-sizing:border-box !important;
    font-size:15px !important;
    line-height:1.4 !important;
    overflow-wrap:anywhere !important;
  }

  /* Palette is a full-width mobile block below the question. */
  body:has(#exam:not(.hidden)) #exam .side .ui17-profile,
  body.v13-exam-active #exam .side .ui17-profile{padding:12px !important;}
  body:has(#exam:not(.hidden)) #exam .side .ui17-stats,
  body.v13-exam-active #exam .side .ui17-stats{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
    padding:9px !important;
    box-sizing:border-box !important;
  }
  body:has(#exam:not(.hidden)) #exam .side h3,
  body.v13-exam-active #exam .side h3{
    padding:11px 12px !important;
    margin:0 !important;
  }
  body:has(#exam:not(.hidden)) #exam .side .palette,
  body:has(#exam:not(.hidden)) #exam #palette,
  body.v13-exam-active #exam .side .palette,
  body.v13-exam-active #exam #palette{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    gap:6px !important;
    padding:10px !important;
    box-sizing:border-box !important;
  }
  body:has(#exam:not(.hidden)) #exam .side .pbtn,
  body:has(#exam:not(.hidden)) #exam .ui21-palette-btn,
  body.v13-exam-active #exam .side .pbtn,
  body.v13-exam-active #exam .ui21-palette-btn{
    width:100% !important;
    min-width:0 !important;
    height:42px !important;
    min-height:42px !important;
    box-sizing:border-box !important;
  }
  body:has(#exam:not(.hidden)) #exam .side .legend,
  body.v13-exam-active #exam .side .legend{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:5px 9px !important;
    padding:0 10px 14px !important;
    line-height:1.35 !important;
    box-sizing:border-box !important;
  }

  /* Bottom CBT controls: four controls remain reachable without overlap. */
  body:has(#exam:not(.hidden)) #exam .ui17-bottom,
  body.v13-exam-active #exam .ui17-bottom,
  body:has(#exam:not(.hidden)) #exam .ui21-bottom,
  body.v13-exam-active #exam .ui21-bottom{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
    margin:0 !important;
    box-sizing:border-box !important;
    background:rgba(255,255,255,.98) !important;
    z-index:12000 !important;
  }
  body:has(#exam:not(.hidden)) #exam .ui17-bottom .group,
  body.v13-exam-active #exam .ui17-bottom .group,
  body:has(#exam:not(.hidden)) #exam .ui21-bottom .grp,
  body.v13-exam-active #exam .ui21-bottom .grp{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
    width:100% !important;
    min-width:0 !important;
  }
  body:has(#exam:not(.hidden)) #exam .ui17-bottom button,
  body.v13-exam-active #exam .ui17-bottom button,
  body:has(#exam:not(.hidden)) #exam .ui21-bottom button,
  body.v13-exam-active #exam .ui21-bottom button{
    width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
    height:auto !important;
    padding:7px 4px !important;
    font-size:10px !important;
    line-height:1.15 !important;
    white-space:normal !important;
    box-sizing:border-box !important;
  }
}

@media (max-width:430px){
  body:has(#exam:not(.hidden)) #exam .question,
  body.v13-exam-active #exam .question{font-size:17px !important;}
  body:has(#exam:not(.hidden)) #exam .ui17-bottom,
  body.v13-exam-active #exam .ui17-bottom,
  body:has(#exam:not(.hidden)) #exam .ui21-bottom,
  body.v13-exam-active #exam .ui21-bottom{grid-template-columns:1fr !important;}
  body:has(#exam:not(.hidden)) #exam .ui17-bottom .group,
  body.v13-exam-active #exam .ui17-bottom .group,
  body:has(#exam:not(.hidden)) #exam .ui21-bottom .grp,
  body.v13-exam-active #exam .ui21-bottom .grp{grid-template-columns:1fr 1fr !important;}
}

@media (max-width:380px){
  body:has(#exam:not(.hidden)) #exam .side .palette,
  body:has(#exam:not(.hidden)) #exam #palette,
  body.v13-exam-active #exam .side .palette,
  body.v13-exam-active #exam #palette{gap:5px !important;padding:8px !important;}
  body:has(#exam:not(.hidden)) #exam .side .pbtn,
  body:has(#exam:not(.hidden)) #exam .ui21-palette-btn,
  body.v13-exam-active #exam .side .pbtn,
  body.v13-exam-active #exam .ui21-palette-btn{height:39px !important;min-height:39px !important;font-size:12px !important;}
}


/* --- Original style block 31 --- */

/* FINAL LOGOUT RECTIFICATION — desktop/laptop only.
   Keep the existing mobile dashboard untouched. */
@media (min-width:768px){
  /* STUDENT DASHBOARD: reserve a clean top-right logout area without
     covering the dashboard's centered MISSION TES branding. */
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header{
    position:absolute !important;
    top:14px !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:46px !important;
    min-height:46px !important;
    margin:0 !important;
    padding:0 28px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    background:transparent !important;
    box-shadow:none !important;
    z-index:10000 !important;
    pointer-events:none !important;
  }
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header > .brand{
    display:none !important;
  }
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header > .headerRight{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:0 !important;
    pointer-events:auto !important;
  }
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header #studentHeaderLogout{
    display:inline-flex !important;
    position:static !important;
    width:auto !important;
    min-width:150px !important;
    min-height:40px !important;
    height:40px !important;
    margin:0 !important;
    padding:0 16px !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
    font-size:13px !important;
    line-height:1 !important;
    border-radius:10px !important;
    box-sizing:border-box !important;
  }
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header #adminHeaderLogout,
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header #headerTimer{
    display:none !important;
  }

  /* ADMIN: use exactly one logout control. Do not allow the old global
     header to create a second/overlapping visual layer. The existing JS
     may move #adminHeaderLogout to <!--
V6.0.123 DOM safety:
Legacy V5.7/V5.8 management controls that previously reused identical IDs
are now uniquely identified in the DOM. Existing JavaScript selectors remain
untouched for the first/active controls; secondary legacy copies are isolated.
-->
<body class="hoa-admin-page">; this rule handles that node. */
  body.admin-ui > .header{
    position:fixed !important;
    top:14px !important;
    right:22px !important;
    left:auto !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    background:transparent !important;
    box-shadow:none !important;
    z-index:20000 !important;
    pointer-events:none !important;
  }
  body.admin-ui > .header > .brand{display:none !important;}
  body.admin-ui > .header > .headerRight{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:0 !important;
    pointer-events:auto !important;
  }
  body.admin-ui > .header #adminHeaderLogout{
    display:inline-flex !important;
    position:static !important;
    width:auto !important;
    min-width:150px !important;
    min-height:40px !important;
    height:40px !important;
    margin:0 !important;
    padding:0 16px !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
    font-size:13px !important;
    line-height:1 !important;
    border-radius:10px !important;
    box-sizing:border-box !important;
  }

}

/* Medium laptop: slightly tighter but still readable. */
@media (min-width:768px) and (max-width:1100px){
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header{padding-right:18px !important;}
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header #studentHeaderLogout,
  body.admin-ui > #adminHeaderLogout{min-width:140px !important;min-height:38px !important;height:38px !important;font-size:12px !important;padding:0 13px !important;}

}


/* --- Original style block 32 --- */

/* V2.1 — persistent student attempt history and answer review */
.studentAttemptHistory{display:grid;gap:14px;margin-top:4px}
.studentAttemptCard{border:1px solid #dce5ef;border-radius:14px;background:#fff;padding:16px;box-shadow:0 5px 18px rgba(16,35,61,.05)}
.studentAttemptCardTop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.attemptEyebrow{font-size:9px;font-weight:900;letter-spacing:.12em;color:#71839a;margin-bottom:4px}
.studentAttemptCard h4{margin:0;color:#123f73;font-size:16px;font-weight:850}
.attemptDate{margin-top:5px;color:#74869a;font-size:11px}
.attemptScore{text-align:right;min-width:80px}.attemptScore b{display:block;font-size:19px;font-weight:900}.attemptScore span{display:block;margin-top:2px;color:#64748b;font-size:10px;font-weight:700}
.attemptScore.good b{color:#15803d}.attemptScore.mid b{color:#b45309}.attemptScore.low b{color:#b42318}
.attemptMetrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.attemptMetrics span{padding:9px 8px;border:1px solid #e2e8f0;border-radius:9px;background:#f8fafc;color:#64748b;font-size:10px;text-align:center}
.attemptMetrics b{display:block;color:#173f6b;font-size:14px;margin-bottom:2px}
.attemptActionRow{display:flex;justify-content:flex-end;margin-top:13px;padding-top:12px;border-top:1px solid #edf2f7}
.viewAttemptBtn{min-height:38px;padding:8px 15px;border:1px solid #0b4f7d;border-radius:8px;background:#0b4f7d;color:#fff;font-size:11px;font-weight:850;cursor:pointer;box-shadow:0 4px 10px rgba(11,79,125,.16)}
.viewAttemptBtn:hover{background:#083f64}
#result .reviewOption{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;min-height:46px!important;box-sizing:border-box!important;background:#fff!important;color:#253b52!important;border:1px solid #cbd5e1!important;font-weight:600!important}
#result .reviewOption.reviewCorrect{background:#e7f7ed!important;border:2px solid #2e9d59!important;color:#087443!important}
#result .reviewOption.reviewWrong{background:#fff0f0!important;border:2px solid #d9534f!important;color:#b42318!important}
#result .reviewOption.reviewYourCorrect{background:#e7f7ed!important;border:2px solid #2e9d59!important;color:#087443!important}
#result .reviewTag{float:none!important;flex:0 0 auto!important;color:inherit!important;font-size:10px!important;font-weight:900!important;background:transparent!important;padding:0!important;white-space:nowrap!important}
#result .reviewStatus{font-weight:850!important}
@media(max-width:700px){
 .studentAttemptCard{padding:14px}.studentAttemptCardTop{gap:10px}.studentAttemptCard h4{font-size:14px}.attemptMetrics{grid-template-columns:repeat(2,1fr)}
 .attemptActionRow{justify-content:stretch}.viewAttemptBtn{width:100%;min-height:42px}
 #result .reviewOption{font-size:13px!important;min-height:50px!important;padding:11px 12px!important}
}


/* --- Original style block 33 --- */

/*
  HUB OF ASPIRANTS V2.6
  Clean examination mode:
  While a student is actually attempting a test, hide the global
  dashboard header (HUB OF ASPIRANTS branding + Student Logout).
  The exam has its own test title, timer and controls, so the
  dashboard header is unnecessary and can make the student feel
  like they are still on the dashboard.
*/
@media (min-width: 0px){
  body:not(.admin-ui):has(#exam:not(.hidden)) > .header{
    display:none !important;
  }

  body:not(.admin-ui):has(#exam:not(.hidden)) > main.container{
    padding-top:0 !important;
    margin-top:0 !important;
  }

  body:not(.admin-ui):has(#exam:not(.hidden)) #exam{
    margin-top:0 !important;
  }
}


/* --- Original style block 34 --- */

/* HUB OF ASPIRANTS V2.6 — Focused examination screen
   Hide dashboard-only information while a student is actively taking a test.
   The actual examination controls, timer, question palette and CBT buttons remain visible. */
@media (min-width: 0px){
  body:not(.admin-ui):has(#exam:not(.hidden)) .ui17-profile,
  body:not(.admin-ui):has(#exam:not(.hidden)) .ui17-stats{
    display:none !important;
  }

  body:not(.admin-ui):has(#exam:not(.hidden)) .missionBrandFooter,
  body:not(.admin-ui):has(#exam:not(.hidden)) #footer,
  body:not(.admin-ui):has(#exam:not(.hidden)) .footer{
    display:none !important;
  }
}


/* --- Original style block 35 --- */

/* V2.6 — Remove the unnecessary Student/Candidate + status-stat block
   from the active examination screen. Keep the question palette,
   legend, timer and all examination controls unchanged. */
#exam .ui17-profile,
#exam .ui17-stats{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  min-height:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
}


/* --- Original style block 36 --- */

/* V2.6 — Keep the question-status colour key visible during the exam.
   It is deliberately placed ABOVE the palette so the fixed bottom controls
   cannot cover it on smaller screens. */
#exam .mission-palette-legend{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:6px 8px !important;
  margin:0 !important;
  padding:9px 10px 5px !important;
  box-sizing:border-box !important;
  font-size:11px !important;
  line-height:1.2 !important;
  color:#374151 !important;
}
#exam .mission-palette-legend .legend-item{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  min-width:0 !important;
  white-space:nowrap !important;
}
#exam .mission-palette-legend .legend-dot{
  display:inline-block !important;
  width:13px !important;
  height:13px !important;
  min-width:13px !important;
  border-radius:50% !important;
  border:1px solid rgba(0,0,0,.22) !important;
  box-sizing:border-box !important;
}
#exam .mission-palette-legend .legend-dot.not-visited{
  background:#e5e7eb !important;
}
#exam .mission-palette-legend .legend-dot.not-answered{
  background:#ef4444 !important;
}
#exam .mission-palette-legend .legend-dot.answered{
  background:#22c55e !important;
}
#exam .mission-palette-legend .legend-dot.marked,
#exam .mission-palette-legend .legend-dot.marked-answered{
  background:#8b5cf6 !important;
}
@media(max-width:768px){
  #exam .mission-palette-legend{
    grid-template-columns:1fr 1fr !important;
    gap:5px 7px !important;
    padding:8px 8px 4px !important;
    font-size:10px !important;
  }
  #exam .mission-palette-legend .legend-dot{
    width:12px !important;
    height:12px !important;
    min-width:12px !important;
  }
}


/* --- Original style block 37 --- */

/* V2.6 — Question numbers first, colour details below them.
   Extra bottom space keeps the legend visible while scrolling. */
#exam .palette{
  margin-bottom:8px !important;
}
#exam .mission-palette-legend{
  order:initial !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:6px 8px !important;
  margin:8px 0 78px !important;
  padding:9px 10px 12px !important;
  box-sizing:border-box !important;
  font-size:11px !important;
  line-height:1.2 !important;
  color:#374151 !important;
}
#exam .mission-palette-legend .legend-item{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  min-width:0 !important;
  white-space:nowrap !important;
}
#exam .mission-palette-legend .legend-dot{
  display:inline-block !important;
  width:13px !important;
  height:13px !important;
  min-width:13px !important;
  border-radius:50% !important;
  border:1px solid rgba(0,0,0,.22) !important;
  box-sizing:border-box !important;
}
#exam .mission-palette-legend .legend-dot.not-visited{background:#e5e7eb !important;}
#exam .mission-palette-legend .legend-dot.not-answered{background:#ef4444 !important;}
#exam .mission-palette-legend .legend-dot.answered{background:#22c55e !important;}
#exam .mission-palette-legend .legend-dot.marked,
#exam .mission-palette-legend .legend-dot.marked-answered{background:#8b5cf6 !important;}

@media(max-width:768px){
  #exam .mission-palette-legend{
    grid-template-columns:1fr 1fr !important;
    gap:5px 7px !important;
    margin:7px 0 105px !important;
    padding:8px 8px 12px !important;
    font-size:10px !important;
  }
  #exam .mission-palette-legend .legend-dot{
    width:12px !important;
    height:12px !important;
    min-width:12px !important;
  }
}


/* --- Original style block 38 --- */

/* V2.7 — Separate question-number palette from the colour legend
   and increase the safe space below the legend. */
#exam .mission-palette-legend{
  border-top:1px solid #cbd5e1 !important;
  margin-top:14px !important;
  margin-bottom:120px !important;
  padding-top:14px !important;
  padding-bottom:14px !important;
}
#exam .palette{
  margin-bottom:0 !important;
}

@media(max-width:768px){
  #exam .mission-palette-legend{
    border-top:1px solid #cbd5e1 !important;
    margin-top:14px !important;
    margin-bottom:125px !important;
    padding-top:14px !important;
    padding-bottom:14px !important;
  }
}


/* --- Original style block 39 --- */

/* V2.8 — Increase clearance below the colour legend so fixed action buttons
   never cover the legend while scrolling. */
#exam .mission-palette-legend{
  margin-bottom:220px !important;
  padding-bottom:24px !important;
}

@media(max-width:768px){
  #exam .mission-palette-legend{
    margin-bottom:240px !important;
    padding-bottom:24px !important;
  }
}


/* --- Original style block 40 --- */

/* V3.2 — Student dashboard logout/background separation.
   Desktop/laptop only. Prevent dashboard branding from appearing
   through/behind the logout header area. Mobile layout remains unchanged. */
@media (min-width:768px){
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    height:62px !important;
    min-height:62px !important;
    margin:0 !important;
    padding:0 28px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    background:#f4f7fb !important;
    background-image:none !important;
    box-shadow:none !important;
    border:0 !important;
    z-index:1000 !important;
    pointer-events:none !important;
    overflow:hidden !important;
  }
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header > .brand{
    display:none !important;
  }
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header > .headerRight{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    width:auto !important;
    min-width:0 !important;
    margin-left:auto !important;
    pointer-events:auto !important;
    position:relative !important;
    z-index:2 !important;
  }
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header #studentHeaderLogout{
    position:relative !important;
    z-index:3 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:156px !important;
    width:auto !important;
    height:42px !important;
    min-height:42px !important;
    margin:0 !important;
    padding:0 17px !important;
    background:#ffffff !important;
    background-image:none !important;
    color:#12345b !important;
    border:1px solid #cbd5e1 !important;
    border-radius:10px !important;
    box-shadow:0 4px 14px rgba(18,52,91,.14) !important;
    opacity:1 !important;
    white-space:nowrap !important;
    font-size:13px !important;
    line-height:1 !important;
    box-sizing:border-box !important;
  }
  /* Keep the dashboard brand below the clean logout/header row. */
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > main.container{
    padding-top:12px !important;
  }
}


/* --- Original style block 41 --- */

/* V4.2 — Admin workspace isolation.
   Only the selected Admin workspace may be visible.  Result Management
   is especially protected because older result scripts use !important. */

/* Test Making: hide Result Management and other sibling admin workspaces. */
body.admin-ui.admin-test-making-active #resultManagement,
body.admin-ui.admin-test-making-active #resultSection,
body.admin-ui.admin-test-making-active .resultManagement,
body.admin-ui.admin-test-making-active .result-section{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Admin Section: hide Result Management. */
body.admin-ui.admin-main-active #resultManagement,
body.admin-ui.admin-main-active #resultSection,
body.admin-ui.admin-main-active .resultManagement,
body.admin-ui.admin-main-active .result-section{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Student Admin workspace: hide Result Management. */
body.admin-ui.admin-student-active #resultManagement,
body.admin-ui.admin-student-active #resultSection,
body.admin-ui.admin-student-active .resultManagement,
body.admin-ui.admin-student-active .result-section{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}


/* --- Original style block 42 --- */

/* V1.6: Result navigation/visibility repair. Owns only Result workspace UI. */
body.admin-ui #adminSectionResultPanel.v16-result-open{
  display:block !important; visibility:visible !important; opacity:1 !important;
  width:100% !important; height:auto !important; min-height:0 !important;
}
body.admin-ui #adminSectionResultPanel.v16-result-open > .dashPanel{
  display:block !important; visibility:visible !important; opacity:1 !important;
  width:100% !important; height:auto !important; min-height:0 !important;
}
body.admin-ui #adminSectionResultPanel.v16-result-open .adminResultCards{
  display:grid !important; visibility:visible !important; opacity:1 !important;
}
body.admin-ui #adminSectionResultPanel.v16-result-open .resultToolbar,
body.admin-ui #adminSectionResultPanel.v16-result-open .testWisePanel,
body.admin-ui #adminSectionResultPanel.v16-result-open .testWiseToolbar,
body.admin-ui #adminSectionResultPanel.v16-result-open #adminResultList,
body.admin-ui #adminSectionResultPanel.v16-result-open #adminResultDetail,
body.admin-ui #adminSectionResultPanel.v16-result-open #testWisePrintArea,
body.admin-ui #adminSectionResultPanel.v16-result-open #testWiseTable{
  visibility:visible !important; opacity:1 !important; width:100% !important;
  height:auto !important; min-height:0 !important;
}
body.admin-ui #adminSectionResultPanel.v16-result-open .resultToolbar,
body.admin-ui #adminSectionResultPanel.v16-result-open .testWiseToolbar{
  display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:10px !important;
}
@media(max-width:768px){
 body.admin-ui #adminSectionResultPanel.v16-result-open .adminResultCards{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:9px !important;}
 body.admin-ui #adminSectionResultPanel.v16-result-open .resultToolbar,
 body.admin-ui #adminSectionResultPanel.v16-result-open .testWiseToolbar{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important;}
 body.admin-ui #adminSectionResultPanel.v16-result-open .resultToolbar input{grid-column:1/-1 !important;}
}
@media(max-width:390px){
 body.admin-ui #adminSectionResultPanel.v16-result-open .resultToolbar,
 body.admin-ui #adminSectionResultPanel.v16-result-open .testWiseToolbar{grid-template-columns:1fr !important;}
 body.admin-ui #adminSectionResultPanel.v16-result-open .resultToolbar input{grid-column:auto !important;}
}


/* --- Original style block 43 --- */

/* V1.6 Result Root Fix: only controls Result workspace placement/visibility. */
body.admin-ui .adminReferenceMain > #adminOnlyDashboard{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
body.admin-ui .adminReferenceMain > #adminOnlyDashboard > #adminSectionResultPanel.v16-root-result-active{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
}
body.admin-ui .adminReferenceMain > #adminOnlyDashboard > #adminSectionResultPanel.v16-root-result-active > .dashPanel{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  min-width:0 !important;
}

/* V1.8 HOME LOGIN UI REFINEMENT
   Fix: Admin toggle/close button must never overlap the Admin description.
   No application logic is changed. */
.homeAdminPanel{
  box-sizing:border-box !important;
}
.homeAdminHeader{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:14px !important;
}
.homeAdminHeader > div:first-child{
  min-width:0 !important;
}
.homeAdminHeader h2{
  white-space:nowrap !important;
}
.homeAdminHeader p{
  max-width:190px !important;
  line-height:1.35 !important;
}
.homeAdminToggle{
  min-width:150px !important;
  max-width:100% !important;
  white-space:nowrap !important;
}
@media (min-width:1100px){
  #authScreen{
    grid-template-columns:minmax(0,1fr) minmax(360px,.58fr) !important;
    column-gap:24px !important;
  }
  #authScreen .homeAdminPanel{
    width:100% !important;
  }
  #authScreen .homeAdminHeader p{
    max-width:155px !important;
  }
}
@media (min-width:769px) and (max-width:1099px){
  .homeAdminHeader{
    grid-template-columns:1fr !important;
    align-items:stretch !important;
  }
  .homeAdminHeader p{max-width:none !important;}
  .homeAdminToggle{width:100% !important;}
}
@media (max-width:768px){
  .homeAdminHeader{
    grid-template-columns:1fr !important;
    align-items:stretch !important;
    gap:12px !important;
  }
  .homeAdminHeader p{
    max-width:none !important;
    line-height:1.4 !important;
  }
  .homeAdminToggle{
    width:100% !important;
    min-height:44px !important;
    font-size:12px !important;
  }
}

/* ==========================================================
   V1.9 HOME / LOGIN UI CLEANUP
   UI-only: preserves existing auth, test, result and Supabase JS.
   ========================================================== */
body:not(.admin-ui){
  background:#f4f7fb !important;
}
body:not(.admin-ui) > .header{
  display:none !important;
}
body:not(.admin-ui) > main.container{
  width:100% !important;
  max-width:1180px !important;
  margin:0 auto !important;
  padding:24px 24px 42px !important;
  box-sizing:border-box !important;
}
#authScreen{
  width:min(100%,980px) !important;
  max-width:980px !important;
  margin:18px auto 24px !important;
  padding:28px 30px 22px !important;
  box-sizing:border-box !important;
  border-radius:20px !important;
  background:#fff !important;
  border:1px solid #dbe4ee !important;
  box-shadow:0 12px 34px rgba(18,52,91,.08) !important;
}
#authScreen > div:first-child{
  margin-bottom:22px !important;
}
#authScreen > div:first-child .mission-logo{
  width:82px !important;
  height:82px !important;
  object-fit:contain !important;
  margin:0 auto 9px !important;
}
#authScreen > div:first-child h1{
  font-size:29px !important;
  line-height:1.12 !important;
  margin:0 0 6px !important;
  color:#102f52 !important;
  letter-spacing:.2px !important;
}
#authScreen > div:first-child p{
  font-size:14px !important;
  margin:0 !important;
  color:#64748b !important;
}
#authScreen > .dashPanel:first-of-type{
  padding:22px !important;
  margin:0 !important;
  min-width:0 !important;
  border:1px solid #d8e2ed !important;
  border-radius:16px !important;
  background:#fff !important;
  box-shadow:none !important;
}
#authScreen > .dashPanel:first-of-type h2{
  font-size:21px !important;
  margin:0 0 14px !important;
  color:#142f4c !important;
}
#authScreen .authTabs{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
  margin:0 0 17px !important;
}
#authScreen .authTab{
  min-width:0 !important;
  min-height:46px !important;
  padding:9px 8px !important;
  font-size:13px !important;
  white-space:nowrap !important;
}
#authScreen .formGroup{margin-bottom:12px !important;}
#authScreen .formGroup label{
  display:block !important;
  margin:0 0 5px !important;
  font-size:12px !important;
  color:#172b43 !important;
}
#authScreen input,#authScreen select{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:44px !important;
  box-sizing:border-box !important;
  padding:10px 12px !important;
  font-size:13px !important;
}
#authScreen .primary{
  min-height:45px !important;
  font-size:13px !important;
  border-radius:8px !important;
}
/* Admin panel: never place the toggle beside a narrow description. */
#authScreen .homeAdminPanel{
  width:100% !important;
  margin:0 !important;
  padding:20px !important;
  min-width:0 !important;
  border:1px solid #d8e2ed !important;
  border-radius:16px !important;
  background:#fafdff !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
}
.homeAdminHeader{
  display:block !important;
  min-width:0 !important;
}
.homeAdminHeader > div{
  min-width:0 !important;
}
.homeAdminHeader h2{
  margin:0 !important;
  font-size:20px !important;
  line-height:1.25 !important;
  color:#142f4c !important;
}
.homeAdminHeader p{
  margin:6px 0 0 !important;
  font-size:12px !important;
  line-height:1.45 !important;
  color:#64748b !important;
}
.homeAdminToggle{
  display:flex !important;
  width:100% !important;
  min-height:44px !important;
  margin:14px 0 0 !important;
  padding:9px 12px !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  white-space:nowrap !important;
  font-size:13px !important;
  border:1px solid #12345b !important;
  border-radius:8px !important;
  background:#12345b !important;
  color:#fff !important;
  font-weight:800 !important;
}
.homeAdminToggle:hover{background:#0e2c4d !important;}
.homeAdminToggle[aria-expanded="true"]{background:#fff !important;color:#12345b !important;}
.homeAdminBody{
  padding-top:17px !important;
  border-top:1px solid #e4ebf2 !important;
  margin-top:16px !important;
}
.homeAdminBody[hidden]{display:none !important;}
#authScreen > div:last-child{
  margin-top:14px !important;
  font-size:10px !important;
  line-height:1.4 !important;
}
@media (min-width:900px){
  #authScreen{
    display:grid !important;
    grid-template-columns:minmax(0,1.65fr) minmax(320px,.8fr) !important;
    column-gap:20px !important;
    align-items:start !important;
  }
  #authScreen > div:first-child{grid-column:1/-1 !important;}
  #authScreen > .dashPanel:first-of-type{grid-column:1 !important;}
  #authScreen > .homeAdminPanel{grid-column:2 !important;}
  #authScreen > div[style*="height:18px"]{display:none !important;}
  #authScreen > div:last-child{grid-column:1/-1 !important;}
}
@media (max-width:899px){
  body:not(.admin-ui) > main.container{padding:14px 14px 30px !important;}
  #authScreen{width:min(100%,700px) !important;margin:10px auto 18px !important;}
  #authScreen > .homeAdminPanel{margin-top:16px !important;}
}
@media (max-width:600px){
  body:not(.admin-ui) > main.container{padding:8px 8px 24px !important;}
  #authScreen{
    width:100% !important;
    margin:6px auto 14px !important;
    padding:18px 14px 16px !important;
    border-radius:16px !important;
  }
  #authScreen > div:first-child{margin-bottom:17px !important;}
  #authScreen > div:first-child .mission-logo{width:70px !important;height:70px !important;}
  #authScreen > div:first-child h1{font-size:23px !important;}
  #authScreen > .dashPanel:first-of-type{padding:16px !important;}
  #authScreen > .dashPanel:first-of-type h2{font-size:19px !important;}
  #authScreen .authTab{font-size:11px !important;padding:8px 4px !important;}
  #authScreen .homeAdminPanel{padding:16px !important;}
  .homeAdminToggle{font-size:12px !important;}
}
@media (max-width:390px){
  #authScreen .authTabs{gap:5px !important;}
  #authScreen .authTab{font-size:10px !important;min-height:43px !important;}
  #authScreen > d
#studentOnlyDashboard{position:relative}
.studentDashboardHeader{padding:2px 2px 2px 0!important;margin-bottom:0!important}
.studentDashboardHeader .brand-logo{width:52px!important;height:52px!important}
.studentDashboardHeader .studentName{font-size:23px!important;color:#102f50!important;letter-spacing:-.02em}
.studentDashboardHeader .sub{font-size:12px!important}
@media(max-width:600px){.studentDashboardHeader .brand-logo{width:46px!important;height:46px!important}.studentDashboardHeader .studentName{font-size:20px!important}}
iv:first-child h1{font-size:21px !important;}
}

/* Student dashboard UI refinement - v1.9 student section only */
#studentOnlyDashboard{margin-top:22px!important}
#studentOnlyDashboard + #adminOnlyDashboard{}
#studentOnlyDashboard .candidateSectionNav{
  display:grid!important;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 18px;
}
#studentOnlyDashboard .candidateSectionNav button{
  min-height:48px;border:1px solid #d7e0eb;background:#fff;color:#163b63;border-radius:12px;
  font-weight:800;text-align:left;padding:0 18px;box-shadow:0 3px 12px rgba(15,23,42,.04);
}
#studentOnlyDashboard .candidateSectionNav button.active{
  background:#123f70;color:#fff;border-color:#123f70;box-shadow:0 8px 20px rgba(18,63,112,.18);
}
#studentOnlyDashboard .profileCard{
  position:relative;display:flex!important;align-items:center!important;gap:14px!important;
  min-height:86px;padding:16px 18px!important;margin-bottom:14px!important;
  border:1px solid #dce5ef!important;border-radius:16px!important;
  background:linear-gradient(135deg,#ffffff 0%,#f7faff 100%)!important;
  box-shadow:0 5px 18px rgba(15,23,42,.05)!important;
}
#studentOnlyDashboard .profileCard .avatar{
  width:50px!important;height:50px!important;flex:0 0 50px;border-radius:14px!important;
  background:#123f70!important;color:#fff!important;font-size:19px!important;
  box-shadow:0 5px 12px rgba(18,63,112,.16);
}
#studentOnlyDashboard .profileInfo{min-width:0;flex:1}
#studentOnlyDashboard .profileNameText{font-size:20px!important;font-weight:800!important;color:#102f50;line-height:1.2}
#studentOnlyDashboard .profileContact{font-size:12px!important;color:#64748b;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#studentOnlyDashboard .profileAcademic{font-size:12px!important;color:#64748b;margin-top:3px}
#studentOnlyDashboard .profileLabel{font-size:10px;font-weight:800;letter-spacing:.08em;color:#35618b;background:#eaf2fb;border:1px solid #d8e6f4;padding:6px 9px;border-radius:999px;align-self:flex-start}
#studentOnlyDashboard .dashGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
#studentOnlyDashboard .dashStat{
  min-height:92px;padding:16px 17px!important;border:1px solid #e2e8f0;
  border-radius:14px!important;box-shadow:0 5px 18px rgba(15,23,42,.045)!important;
  display:flex;flex-direction:column;justify-content:center;
}
#studentOnlyDashboard .dashStat b{font-size:24px!important;line-height:1.1;margin-bottom:7px!important;color:#123f70!important}
#studentOnlyDashboard .dashStat span{font-size:12px!important;font-weight:600;color:#64748b!important}
#studentOnlyDashboard .dashPanel{
  padding:20px!important;border:1px solid #dce5ef!important;border-radius:16px!important;
  box-shadow:0 6px 22px rgba(15,23,42,.055)!important;
}
#studentOnlyDashboard .studentPanelHeading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 15px}
#studentOnlyDashboard .studentPanelHeading h3{margin:0!important;font-size:20px;color:#123f70}
#studentOnlyDashboard .studentPanelHeading p{margin:4px 0 0;font-size:12px;color:#64748b}
#studentOnlyDashboard .testCountBadge{flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.04em;color:#24547e;background:#edf5fc;border:1px solid #d8e8f6;border-radius:999px;padding:7px 10px}
#studentOnlyDashboard #studentTests{display:grid;gap:10px}
#studentOnlyDashboard .testItem{
  min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 15px!important;border:1px solid #dce5ef!important;border-radius:13px!important;
  background:#fff!important;box-shadow:none!important;
}
#studentOnlyDashboard .testItem:hover{border-color:#bfd2e5!important;background:#fbfdff!important;transform:translateY(-1px)}
#studentOnlyDashboard .testItemInfo{min-width:0;flex:1}
#studentOnlyDashboard .testTitleRow{display:flex;align-items:center;gap:8px;min-width:0}
#studentOnlyDashboard .testTitleRow b{font-size:15px!important;color:#102f50!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#studentOnlyDashboard .testTitleRow .statusBadge{margin-left:0!important}
#studentOnlyDashboard .testMeta{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:7px!important;font-size:11px!important;color:#64748b!important}
#studentOnlyDashboard .testMeta span{white-space:nowrap}
#studentOnlyDashboard .startSmall{min-width:130px;min-height:42px;padding:9px 16px!important;border-radius:10px!important;background:#123f70!important;font-size:12px;font-weight:800;box-shadow:0 4px 10px rgba(18,63,112,.12)}
#studentOnlyDashboard .startSmall:hover{background:#0e345d!important;box-shadow:0 7px 16px rgba(18,63,112,.18)}
@media(max-width:800px){
  #studentOnlyDashboard .dashGrid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  #studentOnlyDashboard .candidateSectionNav button{text-align:center;padding:0 10px;font-size:12px}
  #studentOnlyDashboard .profileCard{padding:14px!important}
  #studentOnlyDashboard .profileLabel{display:none}
  #studentOnlyDashboard .profileNameText{font-size:18px!important}
  #studentOnlyDashboard .studentPanelHeading h3{font-size:18px}
  #studentOnlyDashboard .studentPanelHeading p{font-size:11px}
  #studentOnlyDashboard .testItem{align-items:stretch!important;flex-direction:column!important;gap:12px!important}
  #studentOnlyDashboard .testTitleRow b{white-space:normal}
  #studentOnlyDashboard .testMeta{gap:5px 10px}
  #studentOnlyDashboard .testItem .actions,#studentOnlyDashboard .testItem .actions button{width:100%!important}
  #studentOnlyDashboard .startSmall{min-width:0}
}


/* --- Original style block 44 --- */

/* Final mobile dashboard header fix: keep Student Logout in its own row
   so it never overlaps the dashboard branding/title. */
@media (max-width: 767px){
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    width:100% !important;
    max-width:none !important;
    min-height:48px !important;
    height:48px !important;
    margin:0 !important;
    padding:6px 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    background:transparent !important;
    box-shadow:none !important;
    z-index:20 !important;
    pointer-events:none !important;
  }
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header > .brand{
    display:none !important;
  }
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header > .headerRight{
    display:flex !important;
    width:auto !important;
    min-width:0 !important;
    margin-left:auto !important;
    align-items:center !important;
    justify-content:flex-end !important;
    pointer-events:auto !important;
  }
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header #studentHeaderLogout{
    display:inline-flex !important;
    position:static !important;
    width:auto !important;
    max-width:100% !important;
    min-height:38px !important;
    height:38px !important;
    margin:0 !important;
    padding:7px 12px !important;
    font-size:12px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > main.container{
    padding-top:0 !important;
  }
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) #studentOnlyDashboard{
    margin-top:0 !important;
  }
}


/* --- Original style block 45 --- */

/* Desktop/laptop only: reserve a real header row for logout so it can
   never overlap the centered HUB OF ASPIRANTS dashboard branding. */
@media (min-width:768px){
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header{
    position:relative !important;
    top:auto !important; left:auto !important; right:auto !important;
    width:100% !important;
    height:62px !important;
    min-height:62px !important;
    margin:0 !important;
    padding:0 28px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    background:transparent !important;
    box-shadow:none !important;
    z-index:20 !important;
    pointer-events:none !important;
    box-sizing:border-box !important;
  }
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header > .brand{
    display:none !important;
  }
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header > .headerRight{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    width:auto !important;
    min-width:0 !important;
    pointer-events:auto !important;
  }
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header #studentHeaderLogout{
    display:inline-flex !important;
    position:static !important;
    width:auto !important;
    min-width:156px !important;
    height:42px !important;
    min-height:42px !important;
    margin:0 !important;
    padding:0 17px !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
    font-size:13px !important;
    line-height:1 !important;
    border-radius:10px !important;
    box-sizing:border-box !important;
  }
  /* Give the dashboard brand a clean, unobstructed presentation area. */
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > main.container{
    padding-top:12px !important;
  }
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) #studentOnlyDashboard{
    margin-top:0 !important;
  }
}


/* --- Original style block 46 --- */

/* Final CBT status colours. This block is intentionally LAST so legacy v13 rules cannot override the five CBT states. */
body.v13-exam-active #exam .ui21-palette-btn.not-visited{background:#e5e7eb !important;color:#374151 !important;border:1px solid #9ca3af !important;}
body.v13-exam-active #exam .ui21-palette-btn.not-answered{background:#ef4444 !important;color:#ffffff !important;border:1px solid #b91c1c !important;}
body.v13-exam-active #exam .ui21-palette-btn.answered{background:#22c55e !important;color:#ffffff !important;border:1px solid #15803d !important;}
body.v13-exam-active #exam .ui21-palette-btn.marked{background:#8b5cf6 !important;color:#ffffff !important;border:1px solid #6d28d9 !important;}
body.v13-exam-active #exam .ui21-palette-btn.marked-answered{background:#8b5cf6 !important;color:#ffffff !important;border:1px solid #6d28d9 !important;}
body.v13-exam-active #exam .ui21-palette-btn.marked-answered::after{content:"✓" !important;margin-left:3px !important;font-weight:900 !important;}
body.v13-exam-active #exam .ui21-palette-btn.current{outline:3px solid #111827 !important;outline-offset:1px !important;}


/* --- Original style block 47 --- */

/* Final status colours independent of dashboard/body mode. */
#exam #palette .ui21-palette-btn.not-visited{background:#e5e7eb !important;color:#374151 !important;border:1px solid #9ca3af !important;}
#exam #palette .ui21-palette-btn.not-answered{background:#ef4444 !important;color:#fff !important;border:1px solid #b91c1c !important;}
#exam #palette .ui21-palette-btn.answered{background:#22c55e !important;color:#fff !important;border:1px solid #15803d !important;}
#exam #palette .ui21-palette-btn.marked{background:#8b5cf6 !important;color:#fff !important;border:1px solid #6d28d9 !important;}
#exam #palette .ui21-palette-btn.marked-answered{background:#8b5cf6 !important;color:#fff !important;border:1px solid #6d28d9 !important;}
#exam #palette .ui21-palette-btn.marked-answered::after{content:none !important;}
#exam #palette .ui21-palette-btn.current{outline:3px solid #111827 !important;outline-offset:1px !important;}


/* --- Original style block 48 --- */

/* V2.6 correction: keep the question-number palette visible FIRST, then the colour legend. */
#exam .side .palette,
#exam .side #palette{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  z-index:1 !important;
  margin-bottom:18px !important;
}
#exam .side .mission-palette-legend{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  z-index:1 !important;
  margin-top:10px !important;
  margin-bottom:70px !important;
  padding-bottom:18px !important;
}
@media (max-width:768px){
  #exam .side .palette,
  #exam .side #palette{
    margin-bottom:16px !important;
  }
  #exam .side .mission-palette-legend{
    margin-top:8px !important;
    margin-bottom:78px !important;
    padding-bottom:20px !important;
  }
}


/* --- Original style block 49 --- */

/* V2.9 — Large clear space AFTER the complete colour legend.
   This is intentionally applied at the end so older palette rules cannot
   override it. */
#exam .side .mission-palette-legend{
  margin-bottom:360px !important;
  padding-bottom:20px !important;
}

@media (max-width:768px){
  #exam .side .mission-palette-legend{
    margin-bottom:380px !important;
    padding-bottom:20px !important;
  }
}


/* --- Original style block 50 --- */

/* ===== V3.0 — Mobile-optimized submission confirmation =====
   Desktop layout remains unchanged. On small screens the wide table becomes
   compact summary cards, eliminating horizontal scrolling/clipping. */

@media (max-width:700px){
  .mission-submit-overlay{
    padding:12px !important;
    align-items:center !important;
    overflow-y:auto !important;
  }

  .mission-submit-modal{
    width:100% !important;
    max-width:100% !important;
    max-height:calc(100dvh - 24px) !important;
    overflow-y:auto !important;
    border-radius:18px !important;
  }

  .mission-submit-modal-head{
    padding:18px 18px 14px !important;
  }

  .mission-submit-kicker{
    font-size:10px !important;
    letter-spacing:1px !important;
  }

  .mission-submit-modal-head h2{
    font-size:24px !important;
    line-height:1.15 !important;
  }

  .mission-submit-x{
    flex:0 0 36px !important;
    width:36px !important;
    height:36px !important;
    font-size:28px !important;
  }

  .mission-submit-table-wrap{
    padding:14px 18px 4px !important;
    overflow:visible !important;
  }

  .mission-submit-table{
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed !important;
    display:block !important;
    font-size:13px !important;
  }

  .mission-submit-table thead{
    display:none !important;
  }

  .mission-submit-table tbody{
    display:block !important;
  }

  .mission-submit-table tr{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  .mission-submit-table td{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    min-height:62px !important;
    width:auto !important;
    padding:10px 12px !important;
    text-align:left !important;
    border:1px solid #d9e2ec !important;
    border-radius:10px !important;
    background:#f8fbfd !important;
    box-sizing:border-box !important;
  }

  .mission-submit-table td::before{
    display:block !important;
    margin-bottom:4px !important;
    color:#718196 !important;
    font-size:10px !important;
    font-weight:800 !important;
    letter-spacing:.55px !important;
    text-transform:uppercase !important;
  }

  .mission-submit-table td:nth-child(1)::before{content:"Section";}
  .mission-submit-table td:nth-child(2)::before{content:"No. of questions";}
  .mission-submit-table td:nth-child(3)::before{content:"Answered";}
  .mission-submit-table td:nth-child(4)::before{content:"Not answered";}
  .mission-submit-table td:nth-child(5)::before{content:"Marked for review";}
  .mission-submit-table td:nth-child(6)::before{content:"Not visited";}

  .mission-submit-table td:nth-child(1),
  .mission-submit-table td:nth-child(2){
    background:#f3f8fb !important;
  }

  .mission-submit-note{
    margin:12px 18px 0 !important;
    padding:13px 14px !important;
    font-size:12px !important;
    line-height:1.5 !important;
  }

  .mission-submit-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    padding:14px 18px 18px !important;
    margin-top:14px !important;
  }

  .mission-submit-btn{
    width:100% !important;
    min-width:0 !important;
    min-height:48px !important;
    padding:11px 10px !important;
    font-size:14px !important;
    border-radius:8px !important;
  }
}

@media (max-width:390px){
  .mission-submit-modal-head h2{font-size:22px !important}
  .mission-submit-table tr{grid-template-columns:1fr 1fr !important}
  .mission-submit-table td{min-height:58px !important;padding:9px 10px !important}
  .mission-submit-note{font-size:11.5px !important}
  .mission-submit-actions{grid-template-columns:1fr 1fr !important}
}


/* --- Original style block 51 --- */

/* V3.1 final hardening: safe mobile exam scrolling and modal sizing. */
#exam .mission-palette-legend{box-sizing:border-box !important;}
@media(max-width:768px){
  body:has(#exam:not(.hidden)){padding-bottom:0 !important;}
  body:has(#exam:not(.hidden)) #exam{padding-bottom:260px !important;}
  body:has(#exam:not(.hidden)) #exam .side{padding-bottom:0 !important;}
  .mission-submit-overlay{overscroll-behavior:contain !important;-webkit-overflow-scrolling:touch !important;}
  .mission-submit-modal{overscroll-behavior:contain !important;}
}


/* ==========================================================
   V3.3 — ADMIN HEADER / CORNER REFINEMENT
   Clean professional admin utility header.
   Desktop only: mobile admin header remains unchanged.
   ========================================================== */
@media (min-width:769px){
  body.admin-ui > .header{
    display:flex !important;
    position:fixed !important;
    left:250px !important;
    right:0 !important;
    top:0 !important;
    width:auto !important;
    height:64px !important;
    min-height:64px !important;
    box-sizing:border-box !important;
    padding:0 22px !important;
    margin:0 !important;
    align-items:center !important;
    justify-content:flex-end !important;
    background:#ffffff !important;
    border-bottom:1px solid #e2e8f0 !important;
    box-shadow:0 3px 14px rgba(15,35,60,.08) !important;
    z-index:10060 !important;
    pointer-events:none !important;
  }

  /* Remove the old brand completely from the admin header.
     This is the source of the faint/ghost MISSION TES text. */
  body.admin-ui > .header > .brand{
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
    height:0 !important;
    overflow:hidden !important;
  }

  /* Professional right-side admin identity area. */
  body.admin-ui > .header::before{
    content:"ADMIN PORTAL  •  CONTROL PANEL";
    position:absolute !important;
    left:22px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    color:#64748b !important;
    font-size:11px !important;
    font-weight:800 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
    pointer-events:none !important;
  }

  body.admin-ui > .header .headerRight{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:12px !important;
    min-width:0 !important;
    pointer-events:auto !important;
  }

  body.admin-ui > .header #adminHeaderLogout{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:40px !important;
    min-height:40px !important;
    min-width:152px !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:0 17px !important;
    border:1px solid #d7e0ea !important;
    border-radius:10px !important;
    background:#ffffff !important;
    color:#12345b !important;
    font-size:13px !important;
    font-weight:800 !important;
    letter-spacing:.01em !important;
    line-height:1 !important;
    white-space:nowrap !important;
    box-shadow:0 4px 12px rgba(15,35,60,.10) !important;
    transition:all .18s ease !important;
  }

  body.admin-ui > .header #adminHeaderLogout:hover{
    background:#f8fafc !important;
    border-color:#b9c8d8 !important;
    box-shadow:0 6px 16px rgba(15,35,60,.14) !important;
    transform:translateY(-1px) !important;
  }

  body.admin-ui > .header #adminHeaderLogout:active{
    transform:translateY(0) !important;
  }

  /* Keep student logout/timer from occupying the admin corner. */
  body.admin-ui > .header #studentHeaderLogout,
  body.admin-ui > .header #headerTimer{
    display:none !important;
  }

  /* Match the admin workspace to the new 64px header. */
  body.admin-ui .adminReferenceMain{
    padding-top:84px !important;
  }
}


/* --- Original style block 52 --- */

/* V4.2 — Result Management belongs ONLY to Admin > Result Section. */
/* V6.0.3: the authoritative Admin controller uses .active.
   Retire the historical v37-selected-admin-panel dependency. */
body.admin-ui #adminOnlyDashboard > .adminSectionPanel:not(.active){
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
body.admin-ui #adminOnlyDashboard > .adminSectionPanel.active{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}



/* HOA V6.0.4 — Admin video preview */
#hoaAdminVideoPreviewModal{
  position:fixed;inset:0;z-index:100000;display:none;
  align-items:center;justify-content:center;
  padding:20px;background:rgba(15,23,42,.78);
  backdrop-filter:blur(5px);
}
#hoaAdminVideoPreviewModal.is-open{display:flex}
.hoa-video-preview-dialog{
  width:min(980px,100%);max-height:calc(100vh - 40px);
  overflow:auto;background:#fff;border-radius:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.35);
}
.hoa-video-preview-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:16px 18px;border-bottom:1px solid #e5e7eb;
}
.hoa-video-preview-title{font-size:16px;font-weight:800;color:#0f172a}
.hoa-video-preview-close{
  border:0!important;background:#f1f5f9!important;color:#334155!important;
  width:38px;height:38px;padding:0!important;border-radius:10px;
  font-size:22px;line-height:1;cursor:pointer;
}
.hoa-video-preview-frame{
  position:relative;width:100%;aspect-ratio:16/9;background:#020617;
}
.hoa-video-preview-frame iframe{
  width:100%;height:100%;border:0;display:block;
}
.hoa-video-preview-meta{
  padding:14px 18px 18px;color:#64748b;font-size:13px;
}
.hoa-video-preview-meta b{color:#334155}
.hoa-video-preview-btn{
  display:inline-flex!important;align-items:center;gap:6px;
}
@media(max-width:640px){
  #hoaAdminVideoPreviewModal{padding:10px}
  .hoa-video-preview-dialog{border-radius:14px}
  .hoa-video-preview-head{padding:13px 14px}
  .hoa-video-preview-title{font-size:14px}
  .hoa-video-preview-meta{padding:11px 14px 14px}
}


/* HOA V6.0.4 — Custom HOA video player */
.hoa-custom-player{position:relative;width:100%;background:#000;border-radius:14px;overflow:hidden;aspect-ratio:16/9;touch-action:manipulation;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.hoa-custom-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hoa-player-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:flex-start;justify-content:center;padding:16px;opacity:0;transition:opacity .28s ease;background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,0) 42%)}
.hoa-custom-player.hoa-ui-visible .hoa-player-overlay{opacity:1}
.hoa-player-brand{display:flex;align-items:center;gap:10px;max-width:90%;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.hoa-player-brand img{width:42px;height:42px;object-fit:contain;border-radius:10px;background:rgba(255,255,255,.94);padding:4px}
.hoa-player-title{font-weight:800;font-size:15px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hoa-player-subtitle{font-size:11px;opacity:.86;margin-top:2px}
.hoa-player-controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:7px;padding:10px 11px;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,0));opacity:0;transform:translateY(4px);transition:opacity .22s,transform .22s;pointer-events:none}
.hoa-custom-player.hoa-ui-visible .hoa-player-controls{opacity:1;transform:none;pointer-events:auto}
.hoa-player-btn{border:0;background:rgba(255,255,255,.12);color:#fff;width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px}
.hoa-player-btn:hover{background:rgba(255,255,255,.22)}
.hoa-player-time{font-size:11px;white-space:nowrap;min-width:76px;text-align:center}
.hoa-player-progress{flex:1;min-width:70px;accent-color:#fff;cursor:pointer}
.hoa-player-speed{height:34px;min-width:58px;border:0;border-radius:9px;background:rgba(255,255,255,.12);color:#fff;padding:0 7px;font-size:11px;font-weight:700;text-align:center;cursor:pointer;outline:none}
.hoa-player-speed option{color:#111;background:#fff;font-weight:600}
.hoa-player-center-play{position:absolute;inset:0;margin:auto;width:62px;height:62px;border:0;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:25px;display:none;align-items:center;justify-content:center;cursor:pointer}
.hoa-custom-player.hoa-show-center-play .hoa-player-center-play{display:flex}
.hoa-player-note{position:absolute;right:10px;top:10px;padding:5px 8px;border-radius:7px;background:rgba(0,0,0,.55);color:#fff;font-size:10px;opacity:0;transition:opacity .2s}
.hoa-custom-player.hoa-ui-visible .hoa-player-note{opacity:.85}
@media(max-width:600px){
 .hoa-player-overlay{padding:10px}
 .hoa-player-brand img{width:34px;height:34px}
 .hoa-player-title{font-size:13px}
 .hoa-player-subtitle{font-size:10px}
 .hoa-player-btn{width:31px;height:31px}
 .hoa-player-time{min-width:62px;font-size:10px}
 .hoa-player-speed{display:none}
}


/* HOA V6.0.4 — final custom player controls
   YouTube controls/keyboard/fullscreen are disabled; HOA owns the interaction layer. */
.hoa-custom-player{
  position:relative!important;width:100%!important;aspect-ratio:16/9!important;
  background:#050505!important;border-radius:14px!important;overflow:hidden!important;
  box-shadow:0 12px 34px rgba(0,0,0,.20)!important;isolation:isolate!important;
}
.hoa-custom-player .hoa-youtube-host,
.hoa-custom-player .hoa-youtube-host iframe{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  border:0!important;
}
.hoa-custom-player .hoa-youtube-host iframe{pointer-events:none!important}
.hoa-player-shield{
  position:absolute;inset:0;z-index:3;background:transparent;cursor:pointer;
}
.hoa-player-overlay{
  z-index:4!important;pointer-events:none!important;
  opacity:0!important;padding:15px 16px!important;
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0) 46%)!important;
}
.hoa-custom-player.hoa-ui-visible .hoa-player-overlay{opacity:1!important}
.hoa-player-brand{max-width:82%!important}
.hoa-player-brand img{width:40px!important;height:40px!important}
.hoa-player-title{font-size:15px!important}
.hoa-player-controls{
  z-index:6!important;bottom:0!important;padding:10px 12px 11px!important;
  gap:7px!important;background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,0))!important;
  pointer-events:none!important;
}
.hoa-custom-player.hoa-ui-visible .hoa-player-controls{pointer-events:auto!important}
.hoa-player-btn{
  flex:0 0 auto!important;width:34px!important;height:34px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  background:rgba(15,23,42,.78)!important;color:#fff!important;
  border-radius:9px!important;font-weight:700!important;
}
.hoa-player-btn:hover,.hoa-player-btn:focus-visible{background:rgba(37,99,235,.82)!important}
.hoa-player-time{min-width:82px!important;font-variant-numeric:tabular-nums}
.hoa-player-progress{
  min-width:70px!important;height:4px!important;accent-color:#fff!important;
}
.hoa-player-volume{
  width:76px!important;height:4px!important;accent-color:#fff!important;
  cursor:pointer;flex:0 1 76px;
}
.hoa-player-speed-wrap{position:relative;z-index:8;flex:0 0 auto}
.hoa-player-speed-button{
  min-width:52px!important;height:34px!important;padding:0 9px!important;
  border:1px solid rgba(255,255,255,.13)!important;border-radius:9px!important;
  background:rgba(15,23,42,.78)!important;color:#fff!important;
  font-size:11px!important;font-weight:800!important;cursor:pointer!important;
}
.hoa-player-speed-menu{
  position:absolute;right:0;bottom:42px;display:none;min-width:92px;
  padding:5px;background:rgba(15,23,42,.98);border:1px solid rgba(255,255,255,.15);
  border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.hoa-player-speed-menu.open{display:block}
.hoa-player-speed-option{
  display:block;width:100%;border:0;background:transparent;color:#fff;
  padding:8px 10px;border-radius:7px;text-align:left;font-size:12px;font-weight:700;cursor:pointer;
}
.hoa-player-speed-option:hover,.hoa-player-speed-option.active{background:#2563eb}
.hoa-player-center-play{
  z-index:7!important;pointer-events:auto!important;width:64px!important;height:64px!important;
  background:rgba(15,23,42,.82)!important;border:1px solid rgba(255,255,255,.25)!important;
  box-shadow:0 8px 30px rgba(0,0,0,.32)!important;
}
.hoa-player-center-play:hover{background:#2563eb!important}
.hoa-player-note{z-index:4!important;pointer-events:none!important}
.hoa-player-fullscreen{display:inline-flex!important}
@media(max-width:700px){
  .hoa-player-controls{padding:8px!important;gap:5px!important}
  .hoa-player-btn{width:32px!important;height:32px!important}
  .hoa-player-time{min-width:65px!important;font-size:10px!important}
  .hoa-player-volume{width:55px!important;flex-basis:55px}
  .hoa-player-speed-button{min-width:47px!important}
}
@media(max-width:480px){
  .hoa-player-volume{display:none!important}
  .hoa-player-time{min-width:58px!important}
  .hoa-player-btn[data-act="back"],.hoa-player-btn[data-act="forward"]{display:inline-flex!important}
}


/* V5.3 Results & Performance */
.hoa-performance-panel{
  margin:16px 0;
  padding:18px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  background:rgba(255,255,255,.96);
}
.hoa-performance-title{
  font-size:18px;
  font-weight:700;
  margin-bottom:14px;
}
.hoa-performance-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.hoa-performance-grid>div{
  padding:12px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  text-align:center;
}
.hoa-performance-grid strong{
  display:block;
  font-size:20px;
}
.hoa-performance-grid span{
  display:block;
  margin-top:4px;
  font-size:12px;
  opacity:.72;
}
@media (max-width:600px){
  .hoa-performance-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}


.hoa-v54-management{margin:18px 0;padding:18px}
.hoa-v54-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hoa-v54-head h2{margin:0 0 4px}
.hoa-v54-head p{margin:0;opacity:.72}
.hoa-v54-head button,.hoa-v54-tabs button{
  border:1px solid rgba(0,0,0,.12);background:#fff;border-radius:9px;
  padding:9px 13px;cursor:pointer
}
.hoa-v54-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.hoa-v54-tabs button.active{font-weight:700}
.hoa-v54-empty{padding:18px;border:1px solid rgba(0,0,0,.10);border-radius:12px}
.hoa-v54-empty p{margin-bottom:0;opacity:.76}
@media(max-width:600px){
 .hoa-v54-head{align-items:flex-start;flex-direction:column}
 .hoa-v54-head button{width:100%}
}


.hoa-v57-crud{margin-top:14px;padding:16px;border:1px solid rgba(0,0,0,.10);border-radius:14px;background:#fff}
.hoa-v57-crud h3{margin:0 0 10px}
.hoa-v57-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.hoa-v57-toolbar input,.hoa-v57-toolbar select{padding:9px;border:1px solid rgba(0,0,0,.15);border-radius:8px;min-width:180px}
.hoa-v57-table{width:100%;border-collapse:collapse;margin-top:10px}
.hoa-v57-table th,.hoa-v57-table td{padding:9px;border-bottom:1px solid rgba(0,0,0,.08);text-align:left;vertical-align:top}
.hoa-v57-actions{display:flex;flex-wrap:wrap;gap:6px}
.hoa-v57-actions button,.hoa-v57-primary{padding:8px 11px;border:1px solid rgba(0,0,0,.13);border-radius:8px;background:#fff;cursor:pointer}
.hoa-v57-empty{padding:14px;border:1px dashed rgba(0,0,0,.18);border-radius:10px;opacity:.8}
.hoa-v57-note{font-size:12px;opacity:.68;margin-top:8px}
@media(max-width:700px){.hoa-v57-table{display:block;overflow:auto}.hoa-v57-toolbar input,.hoa-v57-toolbar select{width:100%;min-width:0}}


.resultActions{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.resultActions .hoa-v58-main-delete{border:1px solid #c53b3b;background:#fff5f5;color:#b42318;font-weight:800}
.resultActions .hoa-v58-main-delete:hover{background:#fee2e2}


.hoa-v58-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.48);display:flex;align-items:center;justify-content:center;padding:18px;z-index:99999}
.hoa-v58-modal{width:min(680px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:16px;padding:20px;box-shadow:0 18px 60px rgba(0,0,0,.25)}
.hoa-v58-modal h3{margin:0 0 14px}
.hoa-v58-form{display:grid;gap:11px}
.hoa-v58-form label{font-size:13px;font-weight:650}
.hoa-v58-form input,.hoa-v58-form textarea,.hoa-v58-form select{width:100%;box-sizing:border-box;padding:10px;border:1px solid rgba(0,0,0,.16);border-radius:8px;font:inherit}
.hoa-v58-form textarea{min-height:90px;resize:vertical}
.hoa-v58-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.hoa-v58-actions button{padding:9px 13px;border:1px solid rgba(0,0,0,.14);border-radius:8px;background:#fff;cursor:pointer}
.hoa-v58-actions .save{font-weight:700}
.hoa-v58-danger{border-color:#c33!important}
.hoa-v58-msg{padding:9px;border-radius:8px;background:rgba(0,0,0,.05);font-size:13px}
.hoa-v58-row-actions{display:flex;flex-wrap:wrap;gap:5px}
.hoa-v58-row-actions button{padding:6px 9px;font-size:12px;border:1px solid rgba(0,0,0,.13);border-radius:7px;background:#fff;cursor:pointer}
.hoa-v58-row-actions .delete{border-color:#c33}


.hoa-v59-showcase{position:relative;width:100%;border-radius:18px;overflow:hidden;background:#eef1f5;min-height:360px}
.hoa-v59-slide{display:none;width:100%;height:100%;min-height:360px}
.hoa-v59-slide.active{display:block}
.hoa-v59-slide img{display:block;width:100%;height:100%;min-height:360px;object-fit:cover}
.hoa-v59-empty{min-height:360px;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;opacity:.7}
.hoa-v59-arrow{position:absolute;top:50%;transform:translateY(-50%);border:0;border-radius:50%;width:40px;height:40px;background:rgba(0,0,0,.45);color:#fff;font-size:22px;cursor:pointer;z-index:2}
.hoa-v59-prev{left:12px}.hoa-v59-next{right:12px}
.hoa-v59-dots{position:absolute;bottom:12px;left:0;right:0;text-align:center;z-index:2}
.hoa-v59-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin:0 4px;background:rgba(255,255,255,.65);cursor:pointer}
.hoa-v59-dot.active{background:#fff}
.hoa-v59-admin{margin-top:14px;padding:16px;border:1px solid rgba(0,0,0,.1);border-radius:14px;background:#fff}
.hoa-v59-admin input{padding:9px;border:1px solid rgba(0,0,0,.15);border-radius:8px}
.hoa-v59-admin button{padding:8px 11px;border:1px solid rgba(0,0,0,.13);border-radius:8px;background:#fff;cursor:pointer}
.hoa-v59-list{width:100%;border-collapse:collapse;margin-top:12px}
.hoa-v59-list th,.hoa-v59-list td{padding:8px;border-bottom:1px solid rgba(0,0,0,.08);text-align:left}
.hoa-v59-mini{font-size:12px;opacity:.7}


.hoa-admin-console-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:36px;
  padding:7px 12px;
  border:1px solid #d7e2ee;
  border-radius:9px;
  background:#fff;
  color:#173f6b;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  line-height:1;
  box-shadow:0 2px 8px rgba(15,35,60,.06);
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.hoa-admin-console-link:hover{
  background:#f5f9ff;
  border-color:#a9c3df;
  transform:translateY(-1px);
}
.hoa-admin-console-link:focus-visible{
  outline:3px solid rgba(37,99,235,.2);
  outline-offset:2px;
}
.hoa-admin-console-link .hoa-admin-icon{font-size:14px}
@media(max-width:640px){
  .hoa-admin-console-link{
    min-height:34px;
    padding:7px 9px;
    font-size:11px;
  }
}


.hoa-dev-console-modal{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  display:none!important;
  background:rgba(3,8,18,.80)!important;
  backdrop-filter:blur(3px)!important;
  padding:14px!important;
  box-sizing:border-box!important;
}
.hoa-dev-console-modal.open{display:block!important}
.hoa-dev-console-window{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  background:#08111f!important;
  border:1px solid #29415f!important;
  border-radius:14px!important;
  overflow:hidden!important;
  box-shadow:0 25px 90px rgba(0,0,0,.55)!important;
}
.hoa-dev-console-topbar{
  position:relative!important;
  z-index:10!important;
  height:52px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding:0 10px 0 16px!important;
  box-sizing:border-box!important;
  background:#0c1728!important;
  border-bottom:1px solid #263b55!important;
  color:#e7eef9!important;
  font:700 13px/1 Arial,sans-serif!important;
}
.hoa-dev-console-close{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:92px!important;
  height:36px!important;
  padding:0 12px!important;
  border:1px solid #6b7890!important;
  border-radius:8px!important;
  background:#17243a!important;
  color:#fff!important;
  font:800 12px/1 Arial,sans-serif!important;
  cursor:pointer!important;
}
.hoa-dev-console-close:hover{
  background:#273954!important;
  border-color:#9aabc2!important;
}
#hoaDevConsoleFrame{
  display:block!important;
  width:100%!important;
  height:calc(100% - 52px)!important;
  border:0!important;
  background:#08111f!important;
}
@media(max-width:700px){
  .hoa-dev-console-modal{padding:0!important}
  .hoa-dev-console-window{border-radius:0!important}
  .hoa-dev-console-topbar{height:50px!important}
  #hoaDevConsoleFrame{height:calc(100% - 50px)!important}
}


/* =========================================================
   HOA V5.9.7
   Surgical upgrade from confirmed V5.9.6 MASTER.
   Existing application logic is intentionally untouched.
   ========================================================= */

/* Student mock-test screen */
#exam{
  max-width:1440px!important;
  margin:0 auto!important;
  padding-bottom:18px!important;
}
#exam .examTop{
  position:sticky!important;
  top:0!important;
  z-index:100!important;
  min-height:62px!important;
  padding:10px 16px!important;
  border:1px solid #d7e2ee!important;
  border-radius:0 0 14px 14px!important;
  background:rgba(255,255,255,.97)!important;
  backdrop-filter:blur(14px)!important;
  box-shadow:0 6px 22px rgba(18,52,91,.10)!important;
}
#exam .timer{
  min-width:112px!important;
  padding:9px 14px!important;
  border-radius:10px!important;
  font-weight:900!important;
  font-variant-numeric:tabular-nums!important;
}
#exam .examGrid{
  align-items:start!important;
  gap:16px!important;
}
#exam .examGrid>.card:first-child{
  min-height:500px!important;
  padding:24px!important;
  border:1px solid #d9e4ef!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 8px 28px rgba(18,52,91,.065)!important;
}
#exam #options>*{
  min-height:52px!important;
  margin:10px 0!important;
  padding:14px 16px!important;
  border:1px solid #d6e0eb!important;
  border-radius:11px!important;
  background:#fff!important;
  transition:border-color .14s ease,background .14s ease,box-shadow .14s ease!important;
}
#exam #options>*:hover{
  border-color:#9bb8d5!important;
  background:#f8fbff!important;
  box-shadow:0 5px 15px rgba(18,52,91,.06)!important;
}
#exam .examGrid>.side{
  position:sticky!important;
  top:78px!important;
  max-height:calc(100vh - 94px)!important;
  overflow:auto!important;
  border:1px solid #d9e4ef!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 8px 28px rgba(18,52,91,.065)!important;
}
#exam .palette{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(40px,1fr))!important;
  gap:7px!important;
}
#exam .palette button{
  min-height:40px!important;
  border-radius:9px!important;
  font-weight:800!important;
}
#exam .ui21-bottom{
  position:sticky!important;
  bottom:0!important;
  z-index:90!important;
  margin-top:16px!important;
  padding:11px!important;
  border:1px solid #d7e2ee!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.97)!important;
  backdrop-filter:blur(12px)!important;
  box-shadow:0 -7px 24px rgba(18,52,91,.09)!important;
}

/* Result/review */
#result .resultSingleWindow{
  max-width:1280px!important;
  margin:0 auto!important;
}
#result .resultHeader,
#result .reviewNavCard,
#result .reviewQuestionCard{
  border-radius:15px!important;
  box-shadow:0 8px 26px rgba(18,52,91,.065)!important;
}

/* Admin console remains an in-page console, but is not exposed to students. */
#openHoaDevConsole.hoa-admin-console-hidden{
  display:none!important;
}

@media(max-width:850px){
  #exam{padding:0 6px 14px!important}
  #exam .examGrid{grid-template-columns:1fr!important}
  #exam .examGrid>.side{
    position:static!important;
    max-height:none!important;
    order:2!important;
  }
  #exam .examGrid>.card:first-child{
    min-height:0!important;
    padding:18px!important;
  }
}
@media(max-width:520px){
  #exam .palette{
    grid-template-columns:repeat(6,minmax(34px,1fr))!important;
  }
  #exam .ui21-bottom{
    flex-wrap:wrap!important;
  }
}


/* V5.9.8 — Session protection only.
   Does not change answer, scoring, submission, authentication or admin workflows. */
.hoa-v598-exam-status{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  min-height:30px!important;
  padding:5px 9px!important;
  border:1px solid #d7e2ee!important;
  border-radius:8px!important;
  background:#f8fbff!important;
  color:#45627e!important;
  font:700 11px/1 Arial,sans-serif!important;
  white-space:nowrap!important;
}
.hoa-v598-exam-status .dot{
  width:7px!important;height:7px!important;border-radius:50%!important;
  background:#2d8a58!important;display:inline-block!important;
}
.hoa-v598-exam-status.offline{
  color:#8a5b12!important;
  border-color:#ead6a6!important;
  background:#fff9eb!important;
}
.hoa-v598-exam-status.offline .dot{background:#d28a16!important}
.hoa-v598-exam-status.saving{
  color:#315f91!important;
}
.hoa-v598-session-note{
  position:fixed!important;
  left:50%!important;
  top:12px!important;
  transform:translate(-50%,-140%)!important;
  z-index:2147482000!important;
  padding:9px 14px!important;
  border:1px solid #ead6a6!important;
  border-radius:9px!important;
  background:#fff9eb!important;
  color:#704d0b!important;
  box-shadow:0 8px 26px rgba(18,52,91,.14)!important;
  font:800 12px/1.3 Arial,sans-serif!important;
  transition:transform .18s ease!important;
}
.hoa-v598-session-note.show{transform:translate(-50%,0)!important}
@media(max-width:650px){
  .hoa-v598-exam-status{font-size:10px!important;padding:5px 7px!important}
  .hoa-v598-exam-status .label{display:none!important}
}


/* HOA V6.0.123 — production UX/accessibility/performance layer. Existing layouts and workflows are preserved. */
:root{--hoa-focus:#2563eb;--hoa-danger:#b42318;--hoa-success:#087443;--hoa-panel:#ffffff;--hoa-border:#dbe4ef}
*:focus-visible{outline:3px solid color-mix(in srgb,var(--hoa-focus) 72%,transparent);outline-offset:2px}
button,[role="button"],a,input,select,textarea{touch-action:manipulation}
button{min-height:38px}
img{content-visibility:auto}
img[width][height]{height:auto}
.hoa-v600-status{position:fixed;left:50%;bottom:16px;transform:translate(-50%,120px);z-index:2147483000;display:flex;align-items:center;gap:9px;max-width:min(92vw,560px);padding:10px 14px;border:1px solid var(--hoa-border);border-radius:11px;background:rgba(255,255,255,.98);color:#17324d;box-shadow:0 12px 35px rgba(3,27,56,.18);font:700 12px/1.35 Arial,sans-serif;transition:transform .18s ease,opacity .18s ease;opacity:0;pointer-events:none}
.hoa-v600-status.show{transform:translate(-50%,0);opacity:1}
.hoa-v600-status.error{border-color:#efb1ad;background:#fff7f6;color:#8e2018}
.hoa-v600-status.success{border-color:#a8d9bd;background:#f4fbf7;color:#087443}
.hoa-v600-status.offline{border-color:#ead6a6;background:#fff9eb;color:#704d0b}
.hoa-v600-status .dot{width:8px;height:8px;border-radius:50%;background:#2e9d59;flex:0 0 auto}
.hoa-v600-status.error .dot{background:#d64545}.hoa-v600-status.offline .dot{background:#d28a16}
.hoa-v600-loading{position:fixed;inset:0;z-index:2147482990;display:none;place-items:center;background:rgba(246,249,253,.62);backdrop-filter:blur(2px)}
.hoa-v600-loading.show{display:grid}.hoa-v600-spinner{width:34px;height:34px;border:4px solid #dbe4ef;border-top-color:#2563eb;border-radius:50%;animation:hoaV600Spin .75s linear infinite}
@keyframes hoaV600Spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
@media(max-width:650px){.hoa-v600-status{bottom:10px;font-size:11px}.hoa-v600-loading .hoa-v600-spinner{width:30px;height:30px}}


/* HOA V6.0.123 — final UI/UX polish layer. Existing workflows/styles remain untouched. */
html{box-sizing:border-box;scroll-behavior:smooth;overflow-x:clip}
*,*::before,*::after{box-sizing:inherit}
body{max-width:100%;overflow-x:clip;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
img,svg,video,canvas{max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
button{touch-action:manipulation}
button:disabled,[aria-disabled="true"]{cursor:not-allowed!important;opacity:.62}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid rgba(37,99,235,.55)!important;outline-offset:2px!important}
[hidden]{display:none!important}

/* Prevent accidental horizontal expansion from long content. */
:where(.card,.panel,.modal,.modal-content,.tableWrap,.resultTableWrap,.testWiseTableWrap,
.question-card,.questionCard,.question-text,.questionText,.explanation,.adminReferenceMain,
#exam,#results,#review,.dashboard-card){min-width:0;overflow-wrap:anywhere}

/* Tables stay usable on narrow screens without changing their content. */
:where(.tableWrap,.resultTableWrap,.testWiseTableWrap,.adminTableWrap){
  width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}
:where(.tableWrap table,.resultTableWrap table,.testWiseTableWrap table,.adminTableWrap table){
  min-width:max-content;border-collapse:collapse;
}
:where(th,td){overflow-wrap:anywhere}

/* Forms: consistent sizing and comfortable touch targets. */
:where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  max-width:100%;min-height:42px;
}
:where(button,.btn,.button,.action-btn,.nav-btn){min-height:40px}
:where(input[type="checkbox"],input[type="radio"]){accent-color:#2563eb}

/* Overlays: never exceed the usable viewport. */
:where(.modal,.modal-overlay,[role="dialog"]){
  max-width:100vw;
}
:where(.modal-content,[role="dialog"]){
  max-height:calc(100dvh - 24px);
  overflow:auto;
  overscroll-behavior:contain;
}
#hoaDevConsoleModal iframe{max-width:100%;max-height:100%;min-height:0}

/* Fixed/floating UI must respect modern phone safe areas. */
:where(.toast,.notification,.hoa-v598-session-note,#hoaV598ExamStatus){
  max-width:calc(100vw - 24px);
}
@supports(padding:max(0px)){
  :where(.fixed-bottom,.bottom-nav,.mobile-bottom-nav,.toast-container){
    padding-bottom:max(8px,env(safe-area-inset-bottom));
  }
}

/* Images and brand marks should not distort their intrinsic ratio. */
:where(.logo,.brand-logo,.header-logo,img[alt*="logo" i]){
  object-fit:contain;
  object-position:center;
}

/* Better empty/loading states without affecting existing markup. */
[aria-busy="true"]{cursor:progress}
.loading,.is-loading{user-select:none}
:where(.skeleton,.loading-placeholder){max-width:100%;overflow:hidden}

/* Keyboard users should see the active exam control clearly. */
body.mission-exam-active :where(button,[role="button"],input,select,textarea):focus-visible{
  outline-color:rgba(37,99,235,.8)!important;
}

/* Avoid sticky/fixed layouts creating a second horizontal scrollbar. */
body.admin-ui,body.mission-exam-active{max-width:100%;overflow-x:clip}

/* Mobile polish */
@media (max-width:768px){
  html{scroll-padding-top:12px}
  body{font-size:16px}
  :where(.modal,.modal-content,[role="dialog"]){border-radius:12px}
  :where(.modal-content,[role="dialog"]){max-height:calc(100dvh - 16px)}
  :where(.tableWrap,.resultTableWrap,.testWiseTableWrap,.adminTableWrap){
    margin-inline:0;
    width:100%;
  }
  :where(.tableWrap table,.resultTableWrap table,.testWiseTableWrap table,.adminTableWrap table){
    font-size:13px;
  }
  :where(.adminReferenceMain,#exam){max-width:100%!important;min-width:0!important}
}

/* Small phones */
@media (max-width:420px){
  :where(button,.btn,.button,.action-btn,.nav-btn){min-height:42px}
  :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){min-height:44px}
  :where(.modal-content,[role="dialog"]){padding-inline:12px}
}

/* Do not force animation on users who have requested less motion. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}
@media (forced-colors:active){
  :where(button,input,select,textarea,[role="button"]){forced-color-adjust:auto}
  :where(a,button,[role="button"]):focus-visible{outline:2px solid CanvasText!important}
}


/* V6.0.123 — authoritative Admin Logout visibility.
   Reuses the existing #adminHeaderLogout; no duplicate control is created. */
body.admin-ui > .header {
  display:flex !important;
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  left:250px !important;
  width:auto !important;
  height:64px !important;
  min-height:64px !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:0 22px !important;
  align-items:center !important;
  justify-content:flex-end !important;
  background:#ffffff !important;
  border-bottom:1px solid #e2e8f0 !important;
  box-shadow:0 3px 14px rgba(15,35,60,.08) !important;
  z-index:10060 !important;
  pointer-events:none !important;
}
body.admin-ui > .header > .headerRight {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  width:auto !important;
  pointer-events:auto !important;
}
body.admin-ui > .header > div:first-child { display:none !important; }
body.admin-ui > .header #adminHeaderLogout {
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  position:static !important;
  z-index:10061 !important;
  min-width:150px !important;
  min-height:40px !important;
  height:40px !important;
  padding:0 14px !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}
@media (max-width:700px){
  body.admin-ui > .header { left:0 !important; height:58px !important; min-height:58px !important; padding:0 10px !important; }
  body.admin-ui > .header #adminHeaderLogout { min-width:132px !important; min-height:38px !important; height:38px !important; padding:0 10px !important; font-size:12px !important; }
}


/* HOA V6.0.123 — Front Page Social Footer */
.hoa-front-social-footer{
  width:100%;
  margin:42px 0 0;
  padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(135deg,#0b1220 0%,#111827 55%,#172554 100%);
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -8px 30px rgba(2,6,23,.14);
  position:relative;
  z-index:5;
}
.hoa-front-social-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.hoa-front-social-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.hoa-front-social-brand img{
  width:46px;
  height:46px;
  object-fit:contain;
  border-radius:12px;
  background:#fff;
  padding:4px;
  flex:0 0 auto;
}
.hoa-front-social-brand-text{
  min-width:0;
}
.hoa-front-social-brand-title{
  margin:0;
  color:#fff;
  font-weight:800;
  font-size:15px;
  letter-spacing:.02em;
}
.hoa-front-social-brand-subtitle{
  margin:3px 0 0;
  color:rgba(255,255,255,.66);
  font-size:12px;
}
.hoa-front-social-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.hoa-front-social-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  color:#fff !important;
  text-decoration:none !important;
  font-weight:750;
  font-size:13px;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
  white-space:nowrap;
}
.hoa-front-social-btn:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.30);
}
.hoa-front-social-btn:focus-visible{
  outline:3px solid rgba(96,165,250,.75);
  outline-offset:2px;
}
.hoa-front-social-icon{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  font-weight:900;
}
@media(max-width:760px){
  .hoa-front-social-inner{
    flex-direction:column;
    align-items:stretch;
    text-align:center;
  }
  .hoa-front-social-brand{
    justify-content:center;
  }
  .hoa-front-social-links{
    justify-content:center;
  }
  .hoa-front-social-btn{
    flex:1 1 calc(50% - 10px);
    min-width:132px;
  }
}


/* ============================================================
   HOA V6.0.123 — REAL PUBLIC FRONT PAGE
   This is a presentation layer only. Existing auth/CBT/admin
   workflows remain intact and are shown after their CTA actions.
   ============================================================ */
body.hoa-front-page{
  background:
    radial-gradient(circle at 10% 10%,rgba(37,99,235,.14),transparent 30%),
    radial-gradient(circle at 90% 15%,rgba(14,165,233,.12),transparent 28%),
    linear-gradient(180deg,#f8fbff 0%,#eef4fb 52%,#ffffff 100%) !important;
}
body.hoa-front-page > .header,
body.hoa-front-page > #authScreen,
body.hoa-front-page > #home,
body.hoa-front-page > #exam,
body.hoa-front-page > #result{
  display:none !important;
}
#hoaFrontPage{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  color:#0f2744;
}
.hoa-front-nav{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px clamp(16px,4vw,54px);
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(148,163,184,.22);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.hoa-front-brand{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
.hoa-front-brand img{
  width:46px;height:46px;object-fit:contain;border-radius:12px;background:#fff;padding:3px;
}
.hoa-front-brand-name{
  font-weight:900;letter-spacing:.03em;font-size:15px;line-height:1.1;
}
.hoa-front-brand-tag{
  margin-top:3px;color:#64748b;font-size:11px;font-weight:650;
}
.hoa-front-navlinks{
  display:flex;align-items:center;gap:6px;
}
.hoa-front-navlinks button{
  min-height:40px;padding:0 13px;border:0;border-radius:10px;background:transparent;
  color:#334155;font-weight:750;cursor:pointer;
}
.hoa-front-navlinks button:hover{background:#eef4ff;color:#174ea6}
.hoa-front-login{
  background:#173f6b !important;color:#fff !important;
  box-shadow:0 7px 18px rgba(23,63,107,.18);
}
.hoa-front-hero{
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
  padding:clamp(55px,8vw,92px) 0 54px;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  align-items:center;
  gap:52px;
}
.hoa-front-eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;
  background:#e7f0ff;color:#174ea6;font-size:12px;font-weight:850;letter-spacing:.06em;
}
.hoa-front-title{
  margin:18px 0 12px;
  font-size:clamp(38px,6vw,72px);
  line-height:.98;
  letter-spacing:-.045em;
  color:#0b2442;
}
.hoa-front-title span{color:#2563eb}
.hoa-front-copy{
  max-width:690px;margin:0;color:#53657b;font-size:clamp(16px,2vw,19px);line-height:1.65;
}
.hoa-front-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hoa-front-cta{
  min-height:50px;padding:0 20px;border-radius:12px;border:1px solid #cbd8e8;
  font-weight:850;cursor:pointer;transition:.18s ease;
}
.hoa-front-cta:hover{transform:translateY(-2px)}
.hoa-front-cta.primary{background:#173f6b;color:#fff;border-color:#173f6b;box-shadow:0 10px 24px rgba(23,63,107,.2)}
.hoa-front-cta.secondary{background:#fff;color:#173f6b}
.hoa-front-visual{
  position:relative;min-height:360px;display:grid;place-items:center;
}
.hoa-front-orb{
  position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0%,#dcecff 42%,#b9d3f5 100%);
  box-shadow:inset 0 0 50px rgba(37,99,235,.12),0 28px 70px rgba(30,64,175,.15);
}
.hoa-front-card-stack{position:relative;width:min(390px,100%);display:grid;gap:12px}
.hoa-front-feature{
  display:flex;align-items:center;gap:14px;padding:18px;border:1px solid rgba(148,163,184,.28);
  border-radius:17px;background:rgba(255,255,255,.9);box-shadow:0 14px 34px rgba(15,39,68,.08);
}
.hoa-front-feature:nth-child(2){margin-left:28px}
.hoa-front-feature:nth-child(3){margin-left:56px}
.hoa-front-feature-icon{
  width:46px;height:46px;display:grid;place-items:center;border-radius:13px;
  background:#e9f2ff;color:#1d4ed8;font-size:21px;flex:0 0 auto;
}
.hoa-front-feature b{display:block;color:#173f6b;font-size:15px}
.hoa-front-feature span{display:block;margin-top:3px;color:#64748b;font-size:12px;line-height:1.4}
.hoa-front-section{
  width:min(1180px,calc(100% - 32px));margin:0 auto;padding:22px 0 60px;
}
.hoa-front-section-title{text-align:center;margin:0;color:#173f6b;font-size:30px}
.hoa-front-section-sub{text-align:center;margin:8px auto 26px;color:#64748b;max-width:650px}
.hoa-front-features{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
}
.hoa-front-feature-box{
  padding:22px;border:1px solid #dbe5f0;border-radius:17px;background:#fff;
  box-shadow:0 10px 28px rgba(15,39,68,.05);
}
.hoa-front-feature-box .icon{font-size:25px}
.hoa-front-feature-box h3{margin:12px 0 6px;color:#173f6b;font-size:17px}
.hoa-front-feature-box p{margin:0;color:#64748b;font-size:13px;line-height:1.55}
.hoa-front-social-footer{
  margin-top:auto;width:100%;padding:23px 20px calc(23px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(135deg,#081a31,#102b4e 55%,#173f6b);
  border-top:1px solid rgba(255,255,255,.12);
}
.hoa-front-social-inner{
  width:min(1180px,100%);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.hoa-front-social-brand{display:flex;align-items:center;gap:11px}
.hoa-front-social-brand img{width:44px;height:44px;object-fit:contain;border-radius:11px;background:#fff;padding:3px}
.hoa-front-social-brand-title{margin:0;color:#fff;font-weight:850}
.hoa-front-social-brand-subtitle{margin:3px 0 0;color:rgba(255,255,255,.65);font-size:11px}
.hoa-front-social-links{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.hoa-front-social-btn{
  display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 13px;border-radius:11px;
  color:#fff !important;text-decoration:none !important;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);font-weight:800;font-size:12px;
}
.hoa-front-social-btn:hover{background:rgba(255,255,255,.16)}
.hoa-front-social-icon{font-weight:900;font-size:16px}
.hoa-front-social-btn.pending{opacity:.72}
.hoa-front-back{
  display:inline-flex;align-items:center;gap:7px;margin:0 0 14px;padding:0;border:0;background:none;
  color:#174ea6;font-weight:800;cursor:pointer;
}
@media(max-width:850px){
  .hoa-front-navlinks button:not(.hoa-front-login){display:none}
  .hoa-front-hero{grid-template-columns:1fr;gap:25px;padding-top:48px}
  .hoa-front-visual{min-height:300px}
  .hoa-front-features{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .hoa-front-nav{padding:10px 13px}
  .hoa-front-brand img{width:40px;height:40px}
  .hoa-front-brand-name{font-size:13px}
  .hoa-front-hero,.hoa-front-section{width:min(100% - 22px,1180px)}
  .hoa-front-title{font-size:42px}
  .hoa-front-orb{width:280px;height:280px}
  .hoa-front-feature:nth-child(2),.hoa-front-feature:nth-child(3){margin-left:0}
  .hoa-front-features{grid-template-columns:1fr}
  .hoa-front-social-inner{flex-direction:column;text-align:center}
  .hoa-front-social-brand{justify-content:center}
  .hoa-front-social-links{justify-content:center;width:100%}
  .hoa-front-social-btn{flex:1 1 calc(50% - 8px);justify-content:center}
}


body.hoa-front-page .missionBrandFooter{
  display:none !important;
}


/* V6.0.123 — Dedicated Page 2 login experience */
body.hoa-login-page{
  background:linear-gradient(135deg,#eef5fc 0%,#f8fbff 48%,#e8f1fb 100%) !important;
}
body.hoa-login-page #hoaFrontPage{display:none !important}
body.hoa-login-page #authScreen{
  display:block !important;
  position:fixed !important;
  inset:0 !important;
  width:100% !important;
  max-width:none !important;
  height:100vh !important;
  min-height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  overflow:auto !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  z-index:1000 !important;
}
body.hoa-login-page #authScreen > div:first-child,
body.hoa-login-page #authScreen > .dashPanel:nth-of-type(2),
body.hoa-login-page #authScreen > div[style*="height:18px"]{
  display:none !important;
}
body.hoa-login-page #authScreen > .dashPanel:first-of-type{
  display:block !important;
  width:min(560px,calc(100% - 28px)) !important;
  margin:96px auto 40px !important;
  padding:30px !important;
  border:1px solid #dbe5f0 !important;
  border-radius:22px !important;
  background:#fff !important;
  box-shadow:0 24px 70px rgba(15,39,68,.12) !important;
}
.hoa-login-page-shell{
  min-height:100vh;display:flex;flex-direction:column;
}
.hoa-login-page-top{
  height:72px;display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,5vw,60px);background:#fff;border-bottom:1px solid #dbe5f0;
}
.hoa-login-page-brand{display:flex;align-items:center;gap:10px}
.hoa-login-page-brand img{width:43px;height:43px;object-fit:contain;border-radius:10px}
.hoa-login-page-brand strong{color:#12395f;font-size:14px}
.hoa-login-page-back{
  border:1px solid #d3dfeb;background:#fff;color:#174ea6;border-radius:10px;
  min-height:40px;padding:0 14px;font-weight:800;cursor:pointer;
}
.hoa-login-page-content{
  width:min(1050px,calc(100% - 28px));margin:0 auto;padding:44px 0 55px;
}
.hoa-login-page-title{text-align:center;color:#102f50;font-size:clamp(28px,4vw,40px);margin:0}
.hoa-login-page-sub{text-align:center;color:#64748b;margin:9px auto 30px}
.hoa-login-choices{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
}
.hoa-login-choice{
  min-height:240px;border:1px solid #d6e2ee;border-radius:20px;background:#fff;padding:30px;
  text-align:left;cursor:pointer;box-shadow:0 12px 35px rgba(15,39,68,.07);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.hoa-login-choice:hover{transform:translateY(-4px);box-shadow:0 20px 45px rgba(15,39,68,.12);border-color:#9fc0e5}
.hoa-login-choice-icon{
  width:58px;height:58px;border-radius:16px;display:grid;place-items:center;
  background:#eaf3ff;color:#1761ae;font-size:27px;margin-bottom:20px;
}
.hoa-login-choice.admin .hoa-login-choice-icon{background:#fff3df;color:#b56a00}
.hoa-login-choice h2{margin:0 0 8px;color:#173f6b;font-size:22px}
.hoa-login-choice p{margin:0;color:#64748b;line-height:1.55;font-size:14px}
.hoa-login-choice .enter{
  display:inline-flex;margin-top:22px;padding:10px 14px;border-radius:10px;background:#173f6b;color:#fff;
  font-weight:800;font-size:13px;
}
.hoa-login-panel{
  display:none;width:min(560px,100%);margin:0 auto;padding:30px;border:1px solid #dbe5f0;
  border-radius:22px;background:#fff;box-shadow:0 20px 55px rgba(15,39,68,.10);
}
.hoa-login-panel.active{display:block}
.hoa-login-panel-head{display:flex;align-items:center;gap:13px;margin-bottom:24px}
.hoa-login-panel-head .icon{
  width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:#eaf3ff;font-size:23px;
}
.hoa-login-panel-head h2{margin:0;color:#173f6b}
.hoa-login-panel-head p{margin:3px 0 0;color:#64748b;font-size:12px}
.hoa-login-back{
  border:0;background:none;color:#1761ae;font-weight:800;padding:0;cursor:pointer;margin-bottom:18px;
}
.hoa-login-page .authTabs{margin-bottom:20px}
@media(max-width:700px){
  .hoa-login-choices{grid-template-columns:1fr}
  .hoa-login-page-content{padding-top:30px}
  .hoa-login-choice{min-height:auto}
}


/* V6.0.123 — Student Login is intentionally not shown in the public header bar. */
.hoa-front-header a[aria-label="Student Login"],
.hoa-front-header button[aria-label="Student Login"],
.hoa-front-header a[title="Student Login"],
.hoa-front-header button[title="Student Login"],
.publicHeader a[aria-label="Student Login"],
.publicHeader button[aria-label="Student Login"]{
  display:none !important;
}


/* V6.0.123 — Public header must not expose Student Login. */
body:not(.hoa-login-page) header a[href*="student" i],
body:not(.hoa-login-page) header button[onclick*="student" i],
body:not(.hoa-login-page) nav a[href*="student" i],
body:not(.hoa-login-page) nav button[onclick*="student" i]{
  display:none !important;
}
/* Text-label guard for common header containers. */
body:not(.hoa-login-page) header a,
body:not(.hoa-login-page) header button,
body:not(.hoa-login-page) nav a,
body:not(.hoa-login-page) nav button{
  --hoa-student-login-label-check: initial;
}


/* V6.0.123 — Student Login is accessed from the dedicated Page-2 portal only.
   It is intentionally absent from the public front-page navigation/hero. */
#hoaFrontPage .hoa-front-cta[onclick*="hoaOpenLogin('login')"],
#hoaFrontPage .hoa-front-cta[onclick*="hoaOpenLogin(&quot;login&quot;)"]{
  display:none !important;
}


/* V6.0.123 — Student Login belongs with the student Register / Free Test actions. */
.hoa-student-login-cta{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:48px !important;
  padding:0 22px !important;
  border-radius:10px !important;
  font-weight:800 !important;
  cursor:pointer !important;
}


/* V6.0.123: Student Login is intentionally visible in the public front-page
   student action group. The dedicated Student Login workflow is unchanged. */
#hoaFrontPage #hoaFrontStudentLogin {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  align-items: center;
  justify-content: center;
}


/* V6.0.123 — single authoritative public-page navigation layer */
body.hoa-public-front #hoaFrontPage{display:flex !important}
body.hoa-public-front #hoaLoginPage{display:none !important}
body.hoa-public-front #authScreen{display:none !important}

body.hoa-public-portal #hoaFrontPage{display:none !important}
body.hoa-public-portal #hoaLoginPage{display:block !important}
body.hoa-public-portal #authScreen{display:none !important}

body.hoa-public-auth #hoaFrontPage{display:none !important}
body.hoa-public-auth #hoaLoginPage{display:block !important}
body.hoa-public-auth #authScreen{display:none !important}

body.hoa-public-portal #hoaLoginChoiceView{display:block !important}
body.hoa-public-portal #hoaStudentPortalPanel,
body.hoa-public-portal #hoaAdminPortalPanel{display:none !important}

body.hoa-public-auth #hoaLoginChoiceView{display:none !important}

body.hoa-public-auth.hoa-student-auth #hoaStudentPortalPanel{display:block !important}
body.hoa-public-auth.hoa-student-auth #hoaAdminPortalPanel{display:none !important}

body.hoa-public-auth.hoa-admin-auth #hoaStudentPortalPanel{display:none !important}
body.hoa-public-auth.hoa-admin-auth #hoaAdminPortalPanel{display:block !important}

#hoaFrontStudentLogin{display:inline-flex !important}


/* The public navigation classes above are the final authority. */
body.hoa-public-front #hoaLoginPage,
body.hoa-public-front #authScreen{display:none !important}

body.hoa-public-portal #hoaFrontPage,
body.hoa-public-auth #hoaFrontPage{display:none !important}

body.hoa-public-portal #hoaLoginPage,
body.hoa-public-auth #hoaLoginPage{display:block !important}

body.hoa-public-auth #hoaLoginChoiceView{display:none !important}
body.hoa-public-portal #hoaLoginChoiceView{display:block !important}

body.hoa-public-auth.hoa-student-auth #hoaStudentPortalPanel{display:block !important}
body.hoa-public-auth.hoa-student-auth #hoaAdminPortalPanel{display:none !important}
body.hoa-public-auth.hoa-admin-auth #hoaStudentPortalPanel{display:none !important}
body.hoa-public-auth.hoa-admin-auth #hoaAdminPortalPanel{display:block !important}


/* V6.0.123 — the real existing admin credentials form is #homeAdminPanel. */
body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #homeAdminPanel{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost .dashPanel{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}


/* V6.0.123 — Admin Login page visual treatment, based on the approved reference. */
body.hoa-public-auth.hoa-admin-auth{
  background:#eef5fc !important;
  min-height:100vh !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaLoginPage{
  min-height:100vh !important;
  background:linear-gradient(180deg,#eef5fc 0%,#f8fbff 52%,#eef5fc 100%) !important;
}

body.hoa-public-auth.hoa-admin-auth .hoa-login-page-top{
  height:68px !important;
  min-height:68px !important;
  box-sizing:border-box !important;
  padding:0 26px !important;
  background:#fff !important;
  border-bottom:1px solid #dbe5f0 !important;
  box-shadow:0 1px 4px rgba(15,39,68,.04) !important;
  justify-content:flex-start !important;
  gap:22px !important;
}

body.hoa-public-auth.hoa-admin-auth .hoa-login-page-brand{
  gap:10px !important;
}
body.hoa-public-auth.hoa-admin-auth .hoa-login-page-brand img{
  width:43px !important;
  height:43px !important;
  border-radius:50% !important;
}
body.hoa-public-auth.hoa-admin-auth .hoa-login-page-brand strong{
  font-size:14px !important;
  color:#12395f !important;
  white-space:nowrap !important;
}
body.hoa-public-auth.hoa-admin-auth .hoa-login-page-back{
  display:none !important;
}

body.hoa-public-auth.hoa-admin-auth .hoa-login-page-top::after{
  content:"ADMIN PORTAL  •  CONTROL PANEL";
  color:#64748b;
  font-size:13px;
  font-weight:800;
  letter-spacing:.7px;
  line-height:1;
}

body.hoa-public-auth.hoa-admin-auth .hoa-login-page-content{
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:45px 16px 55px !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminPortalPanel{
  display:block !important;
  width:min(560px,calc(100% - 20px)) !important;
  max-width:560px !important;
  margin:0 auto !important;
  padding:36px 30px 38px !important;
  box-sizing:border-box !important;
  border:1px solid #dbe5f0 !important;
  border-radius:20px !important;
  background:#fff !important;
  box-shadow:0 16px 42px rgba(15,39,68,.10) !important;
}

body.hoa-public-auth.hoa-admin-auth .hoa-login-back{
  display:block !important;
  margin:0 0 20px !important;
  padding:0 !important;
  color:#1761ae !important;
  font-size:16px !important;
  font-weight:800 !important;
}

body.hoa-public-auth.hoa-admin-auth .hoa-login-panel-head{
  margin:0 0 24px !important;
  gap:13px !important;
}
body.hoa-public-auth.hoa-admin-auth .hoa-login-panel-head .icon{
  width:48px !important;
  height:48px !important;
  border-radius:13px !important;
  background:#eaf3ff !important;
  font-size:23px !important;
}
body.hoa-public-auth.hoa-admin-auth .hoa-login-panel-head h2{
  margin:0 !important;
  color:#173f6b !important;
  font-size:25px !important;
  line-height:1.15 !important;
}
body.hoa-public-auth.hoa-admin-auth .hoa-login-panel-head p{
  margin:4px 0 0 !important;
  color:#64748b !important;
  font-size:12px !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost{
  width:100% !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #homeAdminPanel{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:22px 20px 24px !important;
  box-sizing:border-box !important;
  border:1px solid #dbe5f0 !important;
  border-radius:15px !important;
  background:#fff !important;
  box-shadow:0 7px 22px rgba(15,39,68,.06) !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost .homeAdminHeader{
  display:block !important;
  margin:0 !important;
}
body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost .homeAdminHeader > div{
  margin:0 !important;
}
body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost .homeAdminHeader h2{
  margin:0 !important;
  color:#173f6b !important;
  font-size:21px !important;
  line-height:1.2 !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost .homeAdminToggle{
  display:block !important;
  width:100% !important;
  min-height:44px !important;
  margin:14px 0 16px !important;
  padding:10px 14px !important;
  box-sizing:border-box !important;
  border:1px solid #173f6b !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#173f6b !important;
  font-size:12px !important;
  font-weight:800 !important;
}
body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost .homeAdminToggle[aria-expanded="true"]{
  background:#173f6b !important;
  color:#fff !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #homeAdminBody{
  display:block !important;
  padding-top:18px !important;
  border-top:1px solid #e4ebf2 !important;
}
body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #homeAdminBody[hidden]{
  display:none !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost .formGroup{
  margin:0 0 14px !important;
}
body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost .formGroup label{
  display:block !important;
  margin:0 0 7px !important;
  color:#1e293b !important;
  font-size:13px !important;
  font-weight:700 !important;
}
body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #adminUsername,
body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #adminPassword{
  width:100% !important;
  min-height:46px !important;
  box-sizing:border-box !important;
  padding:11px 13px !important;
  border:1px solid #cbd8e6 !important;
  border-radius:9px !important;
  background:#fff !important;
  color:#172033 !important;
  font-size:14px !important;
}
body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #adminUsername:focus,
body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #adminPassword:focus{
  outline:none !important;
  border-color:#3d78b8 !important;
  box-shadow:0 0 0 3px rgba(61,120,184,.12) !important;
}
body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #adminUsername{
  background:#eef4ff !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #homeAdminBody .primary{
  width:100% !important;
  min-height:49px !important;
  margin-top:1px !important;
  border-radius:8px !important;
  background:#173f6b !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:800 !important;
}

@media(max-width:600px){
  body.hoa-public-auth.hoa-admin-auth .hoa-login-page-top{
    padding:0 14px !important;
    gap:12px !important;
  }
  body.hoa-public-auth.hoa-admin-auth .hoa-login-page-top::after{
    font-size:10px !important;
    letter-spacing:.45px !important;
  }
  body.hoa-public-auth.hoa-admin-auth .hoa-login-page-content{
    padding:24px 10px 35px !important;
  }
  body.hoa-public-auth.hoa-admin-auth #hoaAdminPortalPanel{
    width:100% !important;
    padding:28px 16px 30px !important;
  }
}


/* V6.0.123: V6.0.123 remains the sole public navigation controller.
   Legacy authScreen remains only as an implementation container for the
   established authentication functions. */
body.hoa-public-front #hoaFrontPage{display:flex !important;}
body.hoa-public-front #hoaLoginPage,
body.hoa-public-front #authScreen{display:none !important;}

body.hoa-public-portal #hoaFrontPage,
body.hoa-public-auth #hoaFrontPage{display:none !important;}
body.hoa-public-portal #hoaLoginPage,
body.hoa-public-auth #hoaLoginPage{display:block !important;}
body.hoa-public-portal #authScreen,
body.hoa-public-auth #authScreen{display:none !important;}

body.hoa-public-portal #hoaLoginChoiceView{display:block !important;}
body.hoa-public-portal #hoaStudentPortalPanel,
body.hoa-public-portal #hoaAdminPortalPanel{display:none !important;}

body.hoa-public-auth #hoaLoginChoiceView{display:none !important;}
body.hoa-public-auth.hoa-student-auth #hoaStudentPortalPanel{display:block !important;}
body.hoa-public-auth.hoa-student-auth #hoaAdminPortalPanel{display:none !important;}
body.hoa-public-auth.hoa-admin-auth #hoaStudentPortalPanel{display:none !important;}
body.hoa-public-auth.hoa-admin-auth #hoaAdminPortalPanel{display:block !important;}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #homeAdminPanel{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #homeAdminBody{
  display:block !important;
}


/* V6.0.123 — one public/authenticated navigation lifecycle.
   The V6.0.123 router owns browser history. */
body.hoa-public-front > .header,
body.hoa-public-portal > .header,
body.hoa-public-auth > .header { display:none !important; }

body.hoa-app-authenticated #hoaFrontPage,
body.hoa-app-authenticated #hoaLoginPage { display:none !important; }

body.hoa-app-authenticated #authScreen { display:none !important; }

body.hoa-app-authenticated #home {
  display:block !important;
}

body.hoa-app-authenticated #studentOnlyDashboard,
body.hoa-app-authenticated #adminOnlyDashboard {
  visibility:visible;
}

body.hoa-app-student #adminOnlyDashboard { display:none !important; }
body.hoa-app-admin #studentOnlyDashboard { display:none !important; }

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost {
  display:block !important;
}
body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost {
  display:block !important;
}

body.hoa-public-auth.hoa-student-auth #hoaAdminLoginHost,
body.hoa-public-auth.hoa-admin-auth #hoaStudentLoginHost {
  display:none !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #homeAdminBody[hidden] {
  display:none !important;
}
body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #homeAdminBody:not([hidden]) {
  display:block !important;
}


/* V6.0.123 — UI hardening. No application workflow is replaced. */

/* ---------- Global rendering / overflow ---------- */
html {
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  max-width: 100%;
  overflow-x: hidden !important;
}
img, svg, video, canvas {
  max-width: 100%;
}
button, input, select, textarea {
  font: inherit;
  box-sizing: border-box;
}
button {
  -webkit-tap-highlight-color: transparent;
}
table {
  max-width: 100%;
}
pre, code {
  max-width: 100%;
  overflow-x: auto;
}

/* ---------- Public front page ---------- */
body.hoa-public-front #hoaFrontPage,
body.hoa-public-portal #hoaLoginPage,
body.hoa-public-auth #hoaLoginPage {
  min-height: 100svh;
  min-height: 100dvh;
  box-sizing: border-box;
}
body.hoa-public-front #hoaFrontPage {
  width: 100%;
  overflow: hidden;
}
body.hoa-public-front #hoaFrontPage * {
  box-sizing: border-box;
}
body.hoa-public-front #hoaFrontPage img {
  object-fit: contain;
}
body.hoa-public-front #hoaFrontPage button,
body.hoa-public-portal #hoaLoginPage button,
body.hoa-public-auth #hoaLoginPage button {
  min-height: 42px;
}

/* ---------- Portal/auth layout ---------- */
body.hoa-public-portal #hoaLoginPage,
body.hoa-public-auth #hoaLoginPage {
  width: 100%;
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}
#hoaLoginChoiceView,
#hoaStudentPortalPanel,
#hoaAdminPortalPanel {
  width: min(100%, 1100px);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
#hoaStudentLoginHost,
#hoaAdminLoginHost {
  width: min(100%, 720px);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
#hoaStudentLoginHost *,
#hoaAdminLoginHost * {
  max-width: 100%;
  box-sizing: border-box;
}

/* ---------- Login cards / forms ---------- */
#hoaStudentLoginHost input,
#hoaStudentLoginHost select,
#hoaStudentLoginHost textarea,
#hoaAdminLoginHost input,
#hoaAdminLoginHost select,
#hoaAdminLoginHost textarea {
  width: 100%;
  min-width: 0;
}
#hoaStudentLoginHost .card,
#hoaAdminLoginHost .card {
  max-width: 100%;
  overflow: hidden;
}
#hoaAdminLoginHost #homeAdminBody,
#hoaAdminLoginHost #homeAdminPanel {
  max-width: 100%;
  box-sizing: border-box;
}
#hoaAdminLoginHost #adminUsername,
#hoaAdminLoginHost #adminPassword {
  min-height: 44px;
}

/* ---------- Authenticated application shell ---------- */
body.hoa-app-authenticated #home {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
body.hoa-app-authenticated .container,
body.hoa-app-authenticated .main-container,
body.hoa-app-authenticated .content,
body.hoa-app-authenticated .dashboard {
  max-width: 100%;
}
body.hoa-app-authenticated .card,
body.hoa-app-authenticated .panel,
body.hoa-app-authenticated .modal-content {
  box-sizing: border-box;
  max-width: 100%;
}

/* ---------- Tables ---------- */
body.hoa-app-authenticated table {
  width: 100%;
  border-collapse: collapse;
}
body.hoa-app-authenticated .table-responsive,
body.hoa-app-authenticated [style*="overflow-x"],
body.hoa-app-authenticated .table-wrap {
  max-width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
body.hoa-app-authenticated th,
body.hoa-app-authenticated td {
  max-width: 420px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------- Long questions / answer options ---------- */
body.hoa-app-authenticated .question,
body.hoa-app-authenticated .question-text,
body.hoa-app-authenticated .option,
body.hoa-app-authenticated .answer-option,
body.hoa-app-authenticated label {
  overflow-wrap: anywhere;
  word-break: break-word;
}
body.hoa-app-authenticated .question img,
body.hoa-app-authenticated .option img {
  height: auto;
  max-width: 100%;
}

/* ---------- Modals / overlays ---------- */
.modal,
[role="dialog"],
.dialog,
.overlay {
  box-sizing: border-box;
}
.modal-content,
[role="dialog"] > *,
.dialog > * {
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-height: 700px) {
  .modal,
  [role="dialog"],
  .dialog {
    align-items: flex-start !important;
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }
}

/* ---------- Toasts / alerts ---------- */
.toast-container,
#toastContainer,
.toasts,
.toast-stack {
  z-index: 2147483000 !important;
  max-width: min(420px, calc(100vw - 24px)) !important;
}
.toast,
.alert,
[role="alert"] {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------- Focus / accessibility ---------- */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid currentColor !important;
  outline-offset: 2px !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  body.hoa-public-front #hoaFrontPage,
  body.hoa-public-portal #hoaLoginPage,
  body.hoa-public-auth #hoaLoginPage {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  #hoaLoginChoiceView,
  #hoaStudentLoginHost,
  #hoaAdminLoginHost {
    width: 100%;
  }
  body.hoa-app-authenticated .header {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  body.hoa-app-authenticated button,
  body.hoa-app-authenticated a[role="button"] {
    min-height: 42px;
  }
}

/* ---------- Very small screens ---------- */
@media (max-width: 420px) {
  body {
    font-size: 15px;
  }
  #hoaLoginChoiceView,
  #hoaStudentLoginHost,
  #hoaAdminLoginHost {
    padding-left: 8px;
    padding-right: 8px;
  }
}

/* ---------- Forced colors ---------- */
@media (forced-colors: active) {
  button, a, input, select, textarea {
    forced-color-adjust: auto;
  }
}


/* V6.0.123
   The intermediate "Access Your Portal" page has been removed.
   Login is opened directly from the public front page. */
#hoaLoginChoiceView {
  display: none !important;
}
body.hoa-public-portal #hoaLoginPage {
  display: none !important;
}
body.hoa-public-portal #hoaFrontPage {
  display: block !important;
}


/* V6.0.123 — definitive removal of the intermediate portal-selection UI. */
#hoaLoginChoiceView { display:none !important; }
body.hoa-public-portal #hoaLoginPage { display:none !important; }
body.hoa-public-portal #hoaFrontPage { display:block !important; }
body.hoa-public-portal #hoaStudentPortalPanel,
body.hoa-public-portal #hoaAdminPortalPanel { display:none !important; }
/* No portal-selection copy should be visible anywhere in the login shell. */
.hoa-login-back { display:none !important; }


/* V6.0.123 — Student Login UI correction.
   Existing authentication IDs/functions are preserved. */

body.hoa-public-auth.hoa-student-auth {
  background: linear-gradient(180deg,#eef5fc 0%,#f8fbff 54%,#eef5fc 100%) !important;
  min-height: 100vh !important;
}

body.hoa-public-auth.hoa-student-auth #hoaLoginPage {
  min-height: 100vh !important;
  background: transparent !important;
}

body.hoa-public-auth.hoa-student-auth .hoa-login-page-top {
  min-height: 68px !important;
  height: 68px !important;
  padding: 0 26px !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border-bottom: 1px solid #dbe5f0 !important;
  box-shadow: 0 1px 4px rgba(15,39,68,.04) !important;
}

body.hoa-public-auth.hoa-student-auth .hoa-login-page-brand {
  gap: 10px !important;
}

body.hoa-public-auth.hoa-student-auth .hoa-login-page-brand img {
  width: 43px !important;
  height: 43px !important;
  border-radius: 50% !important;
  object-fit: contain !important;
}

body.hoa-public-auth.hoa-student-auth .hoa-login-page-brand strong {
  color: #12395f !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}

body.hoa-public-auth.hoa-student-auth .hoa-login-page-content {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 42px 16px 55px !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentPortalPanel {
  display: block !important;
  width: min(560px, calc(100% - 20px)) !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  padding: 34px 30px 38px !important;
  box-sizing: border-box !important;
  border: 1px solid #dbe5f0 !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 16px 42px rgba(15,39,68,.10) !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentPortalPanel .hoa-login-panel-head {
  margin: 0 0 24px !important;
  gap: 13px !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentPortalPanel .hoa-login-panel-head .icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 13px !important;
  background: #eaf3ff !important;
  font-size: 23px !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentPortalPanel .hoa-login-panel-head h2 {
  margin: 0 !important;
  color: #173f6b !important;
  font-size: 25px !important;
  line-height: 1.15 !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentPortalPanel .hoa-login-panel-head p {
  margin: 4px 0 0 !important;
  color: #64748b !important;
  font-size: 12px !important;
}

/* The legacy authentication panel is the functional form host.
   Make it visually transparent so students see one coherent card. */
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost .dashPanel {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost .dashPanel > h2 {
  display: none !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost .authTabs {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 8px !important;
  margin: 0 0 20px !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost .authTab {
  min-width: 0 !important;
  min-height: 45px !important;
  padding: 9px 8px !important;
  border: 1px solid #cbd8e6 !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #173f6b !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost .authTab.active {
  border-color: #173f6b !important;
  background: #173f6b !important;
  color: #fff !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #loginBox,
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #registerBox,
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #freeGateBox,
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #freeRegisterBox {
  width: 100% !important;
  box-sizing: border-box !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost .formGroup {
  margin: 0 0 15px !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost .formGroup label {
  display: block !important;
  margin: 0 0 7px !important;
  color: #1e293b !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost input:not([type="checkbox"]):not([type="radio"]),
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost select {
  width: 100% !important;
  min-height: 46px !important;
  box-sizing: border-box !important;
  padding: 11px 13px !important;
  border: 1px solid #cbd8e6 !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #172033 !important;
  font-size: 14px !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost input:focus,
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost select:focus {
  outline: none !important;
  border-color: #3d78b8 !important;
  box-shadow: 0 0 0 3px rgba(61,120,184,.12) !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost .hoa-student-login-submit {
  display: block !important;
  width: 100% !important;
  min-height: 49px !important;
  margin: 4px 0 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #173f6b !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost .hoa-student-login-submit:hover {
  filter: brightness(1.06);
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #studentAuthMessage {
  min-height: 20px !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 600px) {
  body.hoa-public-auth.hoa-student-auth .hoa-login-page-top {
    padding: 0 14px !important;
  }

  body.hoa-public-auth.hoa-student-auth .hoa-login-page-content {
    padding: 24px 10px 35px !important;
  }

  body.hoa-public-auth.hoa-student-auth #hoaStudentPortalPanel {
    width: 100% !important;
    padding: 28px 16px 30px !important;
    border-radius: 16px !important;
  }

  body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost .authTabs {
    grid-template-columns: 1fr !important;
  }

  body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost .authTab {
    min-height: 44px !important;
  }
}


/* V6.0.123 — Student Login visual correction.
   The existing #authScreen/.dashPanel is still the functional source for
   Student authentication. It is hosted inside #hoaStudentLoginHost.
   This layer removes the redundant nested card without changing workflows. */

body.hoa-public-auth.hoa-student-auth .hoa-login-page-content{
  width:100% !important;
  max-width:100% !important;
  padding:34px 16px 54px !important;
  box-sizing:border-box !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentPortalPanel{
  display:block !important;
  width:min(720px,100%) !important;
  max-width:720px !important;
  margin:0 auto !important;
  padding:30px 32px 34px !important;
  box-sizing:border-box !important;
  border:1px solid #dbe5f0 !important;
  border-radius:20px !important;
  background:#fff !important;
  box-shadow:0 16px 42px rgba(15,39,68,.09) !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentPortalPanel .hoa-login-panel-head{
  margin:0 0 24px !important;
  align-items:center !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentPortalPanel .hoa-login-panel-head h2{
  font-size:25px !important;
  line-height:1.2 !important;
  margin:0 !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost > .dashPanel{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost > .dashPanel > h2{
  display:none !important;
}

/* Three functional student actions, including the actual Login tab. */
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost .authTabs{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  width:100% !important;
  margin:0 0 22px !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost .authTab{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
  min-height:46px !important;
  padding:9px 10px !important;
  border:1px solid #cbd8e6 !important;
  border-radius:9px !important;
  background:#fff !important;
  color:#173f6b !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1.15 !important;
  cursor:pointer !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost .authTab.active{
  background:#173f6b !important;
  border-color:#173f6b !important;
  color:#fff !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #loginBox{
  display:block;
  width:100% !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost .formGroup{
  width:100% !important;
  margin:0 0 16px !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost .formGroup label{
  display:block !important;
  margin:0 0 7px !important;
  color:#1e293b !important;
  font-size:13px !important;
  font-weight:700 !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost input:not([type="checkbox"]):not([type="radio"]),
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost select{
  width:100% !important;
  min-height:46px !important;
  box-sizing:border-box !important;
  padding:11px 13px !important;
  border:1px solid #cbd8e6 !important;
  border-radius:9px !important;
  background:#fff !important;
  color:#172033 !important;
  font-size:14px !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost .hoa-student-login-submit{
  width:100% !important;
  min-height:48px !important;
  margin:2px 0 0 !important;
  border:0 !important;
  border-radius:9px !important;
  background:#173f6b !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:800 !important;
}

@media(max-width:600px){
  body.hoa-public-auth.hoa-student-auth .hoa-login-page-content{
    padding:22px 10px 36px !important;
  }
  body.hoa-public-auth.hoa-student-auth #hoaStudentPortalPanel{
    width:100% !important;
    padding:24px 16px 28px !important;
    border-radius:16px !important;
  }
  body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost .authTabs{
    grid-template-columns:1fr !important;
  }
}


/*
  HOA V6.0.123 — Student Dashboard Background/UI correction.
  Visual-only correction. Existing authentication, test, result, logout,
  navigation and Supabase logic are intentionally untouched.
*/

/* Page foundation */
html:has(body.hoa-app-student),
body.hoa-app-student{
  background:#eef3f8 !important;
  color:#10233d !important;
}

body.hoa-app-student{
  min-height:100vh !important;
  overflow-x:hidden !important;
}

/* Remove the legacy/faint global brand from the student dashboard header.
   The dashboard has its own centered HOA branding. */
body.hoa-app-student > .header{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:60px !important;
  min-height:60px !important;
  margin:0 !important;
  padding:0 22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  background:#ffffff !important;
  background-image:none !important;
  border:0 !important;
  border-bottom:1px solid #dce5ef !important;
  box-shadow:0 2px 12px rgba(15,35,60,.06) !important;
  z-index:1000 !important;
  pointer-events:none !important;
  box-sizing:border-box !important;
}

body.hoa-app-student > .header > .brand{
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  overflow:hidden !important;
}

body.hoa-app-student > .header > .headerRight{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
  pointer-events:auto !important;
}

body.hoa-app-student > .header #studentHeaderLogout{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:156px !important;
  height:40px !important;
  min-height:40px !important;
  margin:0 !important;
  padding:0 16px !important;
  background:#ffffff !important;
  color:#123f73 !important;
  border:1px solid #d2deea !important;
  border-radius:10px !important;
  box-shadow:0 4px 14px rgba(18,63,115,.10) !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  opacity:1 !important;
  box-sizing:border-box !important;
}

body.hoa-app-student > .header #studentHeaderLogout:hover{
  background:#f8fbff !important;
  border-color:#b9cce0 !important;
}

/* Main page area */
body.hoa-app-student > main.container{
  width:100% !important;
  max-width:1180px !important;
  margin:0 auto !important;
  padding:18px 20px 42px !important;
  box-sizing:border-box !important;
  background:transparent !important;
}

body.hoa-app-student #home{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Dashboard itself is transparent; individual sections provide the cards. */
body.hoa-app-student #studentOnlyDashboard{
  width:100% !important;
  max-width:1180px !important;
  margin:0 auto !important;
  padding:0 !important;
  background:transparent !important;
}

/* Section navigation should sit on the same clean surface. */
body.hoa-app-student #studentOnlyDashboard .candidateSectionNav{
  width:100% !important;
  margin:0 0 14px !important;
  padding:4px !important;
  border-radius:12px !important;
  background:#ffffff !important;
  border:1px solid #dce5ef !important;
  box-shadow:0 4px 14px rgba(15,35,60,.04) !important;
}

/* Avoid accidental translucent/grey inheritance on dashboard cards. */
body.hoa-app-student #studentOnlyDashboard .profileCard,
body.hoa-app-student #studentOnlyDashboard .dashStat,
body.hoa-app-student #studentOnlyDashboard .dashPanel{
  background:#ffffff !important;
}

/* Keep dashboard content visually separated from the page background. */
body.hoa-app-student #studentOnlyDashboard .profileCard{
  border-color:#dce5ef !important;
}

@media (max-width:767px){
  body.hoa-app-student > .header{
    height:56px !important;
    min-height:56px !important;
    padding:0 10px !important;
  }

  body.hoa-app-student > .header #studentHeaderLogout{
    min-width:0 !important;
    width:auto !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 11px !important;
    font-size:11px !important;
  }

  body.hoa-app-student > main.container{
    padding:12px 10px 30px !important;
  }
}

@media (max-width:420px){
  body.hoa-app-student > main.container{
    padding-left:7px !important;
    padding-right:7px !important;
  }
}


/*
  HOA V6.0.123 — authoritative Student Dashboard background/header fix.
  This block intentionally targets the ACTUAL dashboard state selector used
  by the application. No authentication, test, result, or database logic
  is modified.
*/

/* ---------- Page foundation ---------- */
body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)){
  background:#eef3f8 !important;
  color:#10233f !important;
  min-height:100vh !important;
  overflow-x:hidden !important;
}

/* ---------- Remove the ghost legacy header branding ----------
   The screenshot showed the old white-on-light brand text at the
   upper-left. Keep only the existing Student Logout control. */
body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:58px !important;
  min-height:58px !important;
  margin:0 !important;
  padding:0 28px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  z-index:10000 !important;
  pointer-events:none !important;
  box-sizing:border-box !important;
}

body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header > div:first-child,
body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header > .brand{
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  overflow:hidden !important;
}

body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header > .headerRight{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
  pointer-events:auto !important;
}

body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header #studentHeaderLogout{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  position:static !important;
  width:auto !important;
  min-width:156px !important;
  height:40px !important;
  min-height:40px !important;
  margin:0 !important;
  padding:0 16px !important;
  align-items:center !important;
  justify-content:center !important;
  background:#ffffff !important;
  color:#123f73 !important;
  border:1px solid #d2deea !important;
  border-radius:10px !important;
  box-shadow:0 4px 14px rgba(18,63,115,.10) !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
  cursor:pointer !important;
}

body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header #studentHeaderLogout:hover{
  background:#f8fbff !important;
  border-color:#b8cbe0 !important;
}

/* ---------- Main/dashboard shell ----------
   No second giant white background behind the dashboard. */
body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > main.container{
  width:100% !important;
  max-width:1180px !important;
  margin:0 auto !important;
  padding:72px 20px 42px !important;
  background:transparent !important;
  box-sizing:border-box !important;
}

body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) #home{
  width:100% !important;
  max-width:1180px !important;
  margin:0 auto !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
}

body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) #studentOnlyDashboard{
  width:100% !important;
  max-width:1180px !important;
  margin:0 auto !important;
  padding:0 !important;
  background:transparent !important;
  box-sizing:border-box !important;
}

/* ---------- Navigation/profile/stat/panel cards ----------
   Keep the content white while the page remains light grey. */
body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) #studentOnlyDashboard .candidateSectionNav,
body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) #studentOnlyDashboard .profileCard,
body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) #studentOnlyDashboard .dashStat,
body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) #studentOnlyDashboard .dashPanel{
  background:#ffffff !important;
}

body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) #studentOnlyDashboard .candidateSectionNav{
  border:1px solid #dce5ef !important;
  box-shadow:0 4px 14px rgba(15,35,60,.04) !important;
}

/* ---------- Mobile ---------- */
@media (max-width:767px){
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header{
    height:52px !important;
    min-height:52px !important;
    padding:0 10px !important;
  }

  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header #studentHeaderLogout{
    min-width:0 !important;
    width:auto !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 11px !important;
    font-size:11px !important;
  }

  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > main.container{
    max-width:none !important;
    padding:62px 10px 30px !important;
  }

  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) #home,
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) #studentOnlyDashboard{
    max-width:none !important;
  }
}

@media (max-width:420px){
  body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > main.container{
    padding-left:7px !important;
    padding-right:7px !important;
  }
}


/*
  HOA V6.0.123 — definitive fix for the ghost top-left header branding
  visible on the Student Dashboard.
  The screenshot identifies the elements as .header > div > .brand and .sub.
  This is a presentation-only change.
*/

/* When the Student Dashboard is active, the legacy global header brand must
   not render. The dashboard's own centered HOA branding remains visible. */
body:has(#studentOnlyDashboard:not(.hidden)) > header.header > div:first-child,
body:has(#studentOnlyDashboard:not(.hidden)) > .header > div:first-child,
body:has(#studentOnlyDashboard:not(.hidden)) .header .brand,
body:has(#studentOnlyDashboard:not(.hidden)) .header .sub{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  height:0 !important;
  max-width:0 !important;
  max-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

/* Explicitly neutralize text painting in case an inherited pseudo-element
   or transition attempts to retain the old header text. */
body:has(#studentOnlyDashboard:not(.hidden)) .header .brand::before,
body:has(#studentOnlyDashboard:not(.hidden)) .header .brand::after,
body:has(#studentOnlyDashboard:not(.hidden)) .header .sub::before,
body:has(#studentOnlyDashboard:not(.hidden)) .header .sub::after{
  content:none !important;
  display:none !important;
}

/* Keep the utility header itself transparent and reserve only the logout /
   action area. */
body:has(#studentOnlyDashboard:not(.hidden)) > header.header,
body:has(#studentOnlyDashboard:not(.hidden)) > .header{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  border:0 !important;
}

body:has(#studentOnlyDashboard:not(.hidden)) > header.header .headerRight,
body:has(#studentOnlyDashboard:not(.hidden)) > .header .headerRight{
  margin-left:auto !important;
}

/* Safety fallback for browsers/contexts where :has() state evaluation is
   delayed during the dashboard transition: hide the legacy brand whenever
   the body is in the authenticated student state as well. */
body.hoa-student-auth .header .brand,
body.hoa-student-auth .header .sub,
body.hoa-student-auth .header > div:first-child{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
}


/* HOA V6.0.123 — final Student Dashboard top-right logout positioning fix.
   Prevent the utility header from becoming wider than the viewport. */
body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:100% !important;
  left:0 !important;
  right:auto !important;
  padding-left:12px !important;
  padding-right:12px !important;
  margin-left:0 !important;
  margin-right:0 !important;
  overflow:visible !important;
}

body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header > .headerRight{
  box-sizing:border-box !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:0 !important;
  flex:0 0 auto !important;
}

body:not(.admin-ui):has(#studentOnlyDashboard:not(.hidden)) > .header #studentHeaderLogout{
  box-sizing:border-box !important;
  max-width:calc(100vw - 24px) !important;
  margin-right:0 !important;
  flex-shrink:1 !important;
}

/* Never allow horizontal overflow from the legacy utility header. */
body:has(#studentOnlyDashboard:not(.hidden)){
  overflow-x:hidden !important;
}


/* HOA V6.0.123 — content/access foundation UI */
#hoaV643PosterSection,#hoaV643NotesPanel,#hoaV643BatchesPanel,#hoaV643AdminNotes,#hoaV643AdminBatches,#hoaV643AdminAccess{margin-top:18px}
.hoa643-panel{background:#fff;border:1px solid #dbe5f0;border-radius:16px;box-shadow:0 10px 30px rgba(15,39,68,.06);padding:18px}
.hoa643-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.hoa643-section-head h3{margin:0;color:#0f2744;font-size:20px}
.hoa643-section-head p{margin:5px 0 0;color:#64748b;font-size:13px}
.hoa643-poster-wrap{position:relative;overflow:hidden;border-radius:14px;background:#eef4fb;min-height:240px;display:grid;place-items:center}
.hoa643-poster-slide{display:none;width:100%;height:100%;min-height:240px}
.hoa643-poster-slide.active{display:block}
.hoa643-poster-slide img{display:block;width:100%;height:100%;min-height:240px;max-height:430px;object-fit:cover}
.hoa643-poster-empty{padding:48px 20px;text-align:center;color:#64748b}
.hoa643-poster-nav{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px}
.hoa643-poster-nav button{width:34px;height:34px;border:1px solid #cbd9e8;border-radius:50%;background:#fff;color:#173f6b;cursor:pointer;font-weight:900}
.hoa643-dot{width:8px;height:8px;border-radius:50%;background:#cbd5e1;cursor:pointer}.hoa643-dot.active{background:#1769d3}
.hoa643-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hoa643-card{border:1px solid #dbe5f0;border-radius:14px;padding:15px;background:#fff}
.hoa643-card h4{margin:0 0 6px;color:#123d69}.hoa643-meta{font-size:12px;color:#64748b;margin-bottom:9px}.hoa643-card p{font-size:13px;color:#64748b;margin:0 0 12px;line-height:1.5}
.hoa643-actions{display:flex;gap:8px;flex-wrap:wrap}.hoa643-actions button{min-height:38px}
.hoa643-empty{padding:28px 10px;text-align:center;color:#64748b;border:1px dashed #cbd8e6;border-radius:12px;background:#f8fbff}
.hoa643-admin-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.hoa643-admin-form label{display:grid;gap:5px;font-size:12px;font-weight:800;color:#173f6b}.hoa643-admin-form .full{grid-column:1/-1}.hoa643-admin-form input,.hoa643-admin-form textarea,.hoa643-admin-form select{width:100%;padding:10px 12px;border:1px solid #cbd8e6;border-radius:9px;background:#fff;box-sizing:border-box}.hoa643-admin-form textarea{min-height:80px;resize:vertical}
.hoa643-admin-list{display:grid;gap:9px;margin-top:14px}.hoa643-admin-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px;border:1px solid #dbe5f0;border-radius:11px;background:#fbfdff}.hoa643-admin-row-main{min-width:0}.hoa643-admin-row-main b{color:#123d69}.hoa643-admin-row-main small{display:block;color:#64748b;margin-top:3px}

.hoa644-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.hoa644-toolbar .secondary{min-height:36px}
.hoa644-status{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:900;text-transform:uppercase;background:#eef4fb;color:#315a82}.hoa644-status.live{background:#eaf8ef;color:#16804b}.hoa644-status.draft{background:#fff5df;color:#9a6500}
.hoa644-lecture-admin{border:1px solid #e1e9f2;border-radius:10px;background:#fff;padding:10px;margin-top:8px}.hoa644-lecture-admin-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}.hoa644-lecture-admin small{display:block;color:#64748b;margin-top:3px}.hoa644-access-dates{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px}.hoa644-access-dates label{display:grid;gap:5px;font-size:12px;font-weight:800;color:#173f6b}.hoa644-access-dates input{width:100%;padding:10px 12px;border:1px solid #cbd8e6;border-radius:9px;box-sizing:border-box;background:#fff}.hoa644-player-note{font-size:11px;color:#64748b;margin-top:7px}@media(max-width:800px){.hoa644-access-dates{grid-template-columns:1fr}}
.hoa643-role{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:#eaf2ff;color:#1658a6;font-size:11px;font-weight:900;text-transform:uppercase}
.hoa643-lecture{border-top:1px solid #e5edf5;padding:11px 0}.hoa643-lecture:first-child{border-top:0}.hoa643-player{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#08182d;margin-top:12px}.hoa643-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:800px){.hoa643-grid,.hoa643-admin-form{grid-template-columns:1fr}.hoa643-admin-form .full{grid-column:auto}}

#hoaV643AdminManager{margin-top:16px;padding-top:16px;border-top:1px solid #e2e8f0}#hoaV643AdminManager h4{margin:0 0 6px;color:#173f6b}.hoa643-admin-manager-grid{display:grid;grid-template-columns:1fr 1fr 180px auto;gap:9px;align-items:end}.hoa643-admin-manager-grid label{display:grid;gap:5px;font-size:12px;font-weight:800;color:#173f6b}.hoa643-admin-manager-grid input,.hoa643-admin-manager-grid select{padding:10px;border:1px solid #cbd8e6;border-radius:9px}.hoa643-admin-manager-list{display:grid;gap:8px;margin-top:12px}@media(max-width:850px){.hoa643-admin-manager-grid{grid-template-columns:1fr 1fr}.hoa643-admin-manager-grid button{grid-column:1/-1}}


/* V6.0.123 — admin feature navigation visibility. */
#adminOnlyDashboard .adminSectionNav{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
@media(max-width:1000px){#adminOnlyDashboard .adminSectionNav{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
@media(max-width:700px){#adminOnlyDashboard .adminSectionNav{grid-template-columns:1fr !important;}}
#adminOnlyDashboard .hoaV643AdminNavExtra{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;margin:10px 0 16px;}
#adminOnlyDashboard .hoaV643AdminNavExtra button{display:flex !important;visibility:visible !important;align-items:center;justify-content:center;min-height:44px;padding:10px 12px;border:1px solid #cbd8e6;border-radius:10px;background:#fff;color:#173f6b;font-weight:800;cursor:pointer;box-sizing:border-box;}
#adminOnlyDashboard .hoaV643AdminNavExtra button.active{background:#173f6b;color:#fff;border-color:#173f6b;}
#adminOnlyDashboard #hoaV643AdminModules{display:block !important;width:100%;margin-top:2px;}
#adminOnlyDashboard #hoaV643AdminModules > .adminSectionPanel{display:none !important;width:100%;}
#adminOnlyDashboard #hoaV643AdminModules > .adminSectionPanel.active{display:block !important;visibility:visible !important;opacity:1 !important;pointer-events:auto !important;}
@media(max-width:700px){#adminOnlyDashboard .hoaV643AdminNavExtra{grid-template-columns:1fr;}}


#adminOnlyDashboard .hoaV643AdminNavExtra{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;margin:8px 0 14px}
#adminOnlyDashboard .hoaV643AdminNavExtra button{display:inline-flex!important;visibility:visible!important;align-items:center;justify-content:center;min-height:44px;padding:10px 12px;border:1px solid #cbd8e6;border-radius:10px;background:#fff;color:#173f6b;font-weight:800;cursor:pointer}
#adminOnlyDashboard .hoaV643AdminNavExtra button.active{background:#173f6b;color:#fff}
#adminOnlyDashboard #hoaV643AdminModules{display:block!important;width:100%}
#adminOnlyDashboard #hoaV643AdminModules>.adminSectionPanel{display:none!important}
#adminOnlyDashboard #hoaV643AdminModules>.adminSectionPanel.active{display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
@media(max-width:700px){#adminOnlyDashboard .hoaV643AdminNavExtra{grid-template-columns:1fr}}


/* V6.0.123 — Front page visual polish: redesigned top/bottom bars + subtle motion */
#hoaFrontPage{overflow:hidden;background:linear-gradient(180deg,#f8fbff 0%,#f1f6fc 48%,#fff 100%)}
#hoaFrontPage .hoa-front-nav{
  position:sticky!important;top:10px!important;width:min(1180px,calc(100% - 24px))!important;margin:10px auto 0!important;
  min-height:64px!important;padding:9px 14px!important;border:1px solid rgba(148,163,184,.24)!important;
  border-radius:18px!important;background:rgba(255,255,255,.84)!important;box-shadow:0 10px 30px rgba(15,39,68,.08)!important;
  backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;transition:box-shadow .25s ease,transform .25s ease!important;
}
#hoaFrontPage .hoa-front-nav:hover{box-shadow:0 14px 38px rgba(15,39,68,.12)!important}
#hoaFrontPage .hoa-front-brand{gap:12px!important}
#hoaFrontPage .hoa-front-brand img{width:48px!important;height:48px!important;border-radius:14px!important;padding:4px!important;box-shadow:0 5px 14px rgba(23,63,107,.12)!important}
#hoaFrontPage .hoa-front-brand-name{font-size:15px!important;letter-spacing:.045em!important}
#hoaFrontPage .hoa-front-brand-tag{font-size:10px!important;letter-spacing:.02em!important}
#hoaFrontPage .hoa-front-navlinks{gap:4px!important}
#hoaFrontPage .hoa-front-navlinks button{min-height:38px!important;padding:0 13px!important;border-radius:10px!important;transition:background .2s ease,color .2s ease,transform .2s ease!important}
#hoaFrontPage .hoa-front-navlinks button:hover{transform:translateY(-1px)!important}

/* entrance and hover motion */
#hoaFrontPage .hoa-front-hero{animation:hoaHeroIn .7s cubic-bezier(.2,.75,.25,1) both}
#hoaFrontPage .hoa-front-eyebrow{animation:hoaFadeUp .55s .08s both}
#hoaFrontPage .hoa-front-title{animation:hoaFadeUp .65s .14s both}
#hoaFrontPage .hoa-front-copy{animation:hoaFadeUp .65s .22s both}
#hoaFrontPage .hoa-front-card-stack .hoa-front-feature{animation:hoaFadeUp .6s both;transition:transform .22s ease,box-shadow .22s ease}
#hoaFrontPage .hoa-front-card-stack .hoa-front-feature:nth-child(1){animation-delay:.16s}
#hoaFrontPage .hoa-front-card-stack .hoa-front-feature:nth-child(2){animation-delay:.25s}
#hoaFrontPage .hoa-front-card-stack .hoa-front-feature:nth-child(3){animation-delay:.34s}
#hoaFrontPage .hoa-front-card-stack .hoa-front-feature:hover{transform:translateY(-5px)!important;box-shadow:0 18px 38px rgba(15,39,68,.12)!important}
#hoaFrontPage .hoa-front-orb{animation:hoaOrbFloat 7s ease-in-out infinite}

/* Poster block */
#hoaFrontPage .hoa-v648-poster-section{animation:hoaFadeUp .7s .18s both;box-shadow:0 16px 42px rgba(15,39,68,.07)!important}
#hoaFrontPage .hoa-v648-option-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease!important}
#hoaFrontPage .hoa-v648-option-card:hover{transform:translateY(-6px)!important;box-shadow:0 18px 38px rgba(15,39,68,.12)!important;border-color:#b9cde4!important}
#hoaFrontPage .hoa-v648-free-card{transition:transform .2s ease,box-shadow .2s ease!important}
#hoaFrontPage .hoa-v648-free-card:hover{transform:translateY(-3px)!important;box-shadow:0 12px 26px rgba(15,39,68,.1)!important}

/* Compact modern bottom bar: branding is secondary to social actions */
#hoaFrontSocialFooter.hoa-front-social-footer{
  margin-top:48px!important;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px))!important;
  background:linear-gradient(135deg,#07182c,#102b4e 58%,#173f6b)!important;border-top:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 -10px 28px rgba(8,26,49,.14)!important;
}
#hoaFrontSocialFooter .hoa-v619-social-bar{min-height:58px!important;gap:14px!important}
#hoaFrontSocialFooter .hoa-v619-brand{min-width:190px!important;gap:9px!important;opacity:.92!important}
#hoaFrontSocialFooter .hoa-v619-brand img{width:34px!important;height:34px!important;border-radius:8px!important;padding:2px!important}
#hoaFrontSocialFooter .hoa-v619-brand-name{font-size:12px!important;letter-spacing:.025em!important}
#hoaFrontSocialFooter .hoa-v619-brand-tag{font-size:9px!important;margin-top:2px!important;opacity:.72!important}
#hoaFrontSocialFooter .hoa-v619-actions{gap:6px!important}
#hoaFrontSocialFooter .hoa-v619-social,#hoaFrontSocialFooter .hoa-v619-admin{
  height:36px!important;min-height:36px!important;padding:0 10px!important;border-radius:10px!important;
  font-size:10px!important;transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease!important;
}
#hoaFrontSocialFooter .hoa-v619-social:hover,#hoaFrontSocialFooter .hoa-v619-admin:hover{transform:translateY(-2px)!important;box-shadow:0 7px 18px rgba(0,0,0,.18)!important}
#hoaFrontSocialFooter .hoa-v619-admin{margin-left:3px!important;background:rgba(37,99,235,.38)!important}
#hoaFrontSocialFooter .hoa-v619-social svg,#hoaFrontSocialFooter .hoa-v619-admin svg{width:17px!important;height:17px!important}

@keyframes hoaFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes hoaHeroIn{from{opacity:0;transform:translateY(18px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes hoaOrbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:800px){
  #hoaFrontPage .hoa-front-nav{top:6px!important;margin-top:6px!important;width:calc(100% - 14px)!important}
  #hoaFrontPage .hoa-front-navlinks button{padding:0 9px!important;font-size:11px!important}
  #hoaFrontSocialFooter .hoa-v619-social-bar{min-height:0!important}
}
@media(max-width:500px){
  #hoaFrontPage .hoa-front-nav{padding:8px 10px!important;border-radius:15px!important}
  #hoaFrontPage .hoa-front-brand img{width:40px!important;height:40px!important}
  #hoaFrontPage .hoa-front-brand-name{font-size:12px!important}
  #hoaFrontPage .hoa-front-brand-tag{font-size:9px!important}
  #hoaFrontPage .hoa-front-navlinks{display:none!important}
  #hoaFrontSocialFooter .hoa-v619-brand{min-width:0!important}
  #hoaFrontSocialFooter .hoa-v619-social,#hoaFrontSocialFooter .hoa-v619-admin{font-size:9px!important}
}
@media(prefers-reduced-motion:reduce){
  #hoaFrontPage *,#hoaFrontSocialFooter *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* =========================================================
   HOA CONNECT US — single authoritative style
   Fixed to the viewport; independent of page containers/footers.
   ========================================================= */
.hoa-v653-connect-wrap{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:10050;
  max-width:calc(100vw - 20px);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
.hoa-v653-connect-toggle{
  min-height:48px;
  max-width:calc(100vw - 20px);
  padding:6px 17px 6px 7px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;
  background:linear-gradient(135deg,#123f78 0%,#1763b5 100%);
  color:#fff;
  box-shadow:0 10px 26px rgba(8,38,83,.24);
  cursor:pointer;
  font-size:13px;
  font-weight:800;
  letter-spacing:.01em;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.hoa-v653-connect-toggle:hover{
  background:linear-gradient(135deg,#174c8d 0%,#2173ca 100%);
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(8,38,83,.30);
}
.hoa-v653-connect-toggle:active{transform:translateY(0)}
.hoa-v653-connect-toggle:focus-visible{outline:3px solid rgba(37,99,235,.32);outline-offset:3px}
.hoa-v653-connect-toggle .hoa-v653-connect-icon{
  width:35px;height:35px;min-width:35px;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:#1763b5;
  box-shadow:0 2px 8px rgba(0,0,0,.13);
}
.hoa-v653-connect-toggle .hoa-v653-connect-icon svg{
  width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
.hoa-v653-connect-panel{
  position:absolute;right:0;bottom:56px;width:230px;padding:10px;
  border:1px solid rgba(16,62,113,.12);border-radius:18px;
  background:rgba(255,255,255,.97);box-shadow:0 16px 38px rgba(8,38,83,.18);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;visibility:hidden;transform:translateY(8px) scale(.97);
  transform-origin:bottom right;
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}
.hoa-v653-connect-wrap.is-open .hoa-v653-connect-panel{
  opacity:1;visibility:visible;transform:translateY(0) scale(1);
}
.hoa-v653-connect-panel-title{font-size:12px;font-weight:850;color:#102f50;padding:4px 7px 9px}
.hoa-v653-connect-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.hoa-v653-connect-link{
  min-height:44px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;
  text-decoration:none;display:flex;align-items:center;gap:8px;padding:7px 9px;
  color:#102f50;font-size:11px;font-weight:800;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.hoa-v653-connect-link:hover{transform:translateY(-2px);box-shadow:0 7px 16px rgba(15,23,42,.10);border-color:#cbd5e1}
.hoa-v653-connect-link svg{width:21px;height:21px;flex:0 0 21px}
.hoa-v653-placeholder-icon{display:grid;place-items:center;flex:0 0 21px;width:21px;height:21px;color:#173f6b}
.hoa-v653-placeholder-icon svg{width:21px;height:21px;fill:currentColor}
.hoa-v653-placeholder-icon.hoa-icon-telegram{color:#229ED9}
.hoa-v653-placeholder-icon.hoa-icon-whatsapp{color:#25D366}
.hoa-v653-placeholder-icon.hoa-icon-email{color:#EA4335}
.hoa-v653-placeholder-icon.hoa-icon-call{color:#16A34A}
.hoa-v653-connect-link.email{grid-column:1 / -1}
@media(max-width:760px){
  .hoa-v653-connect-wrap{right:12px;bottom:12px}
  .hoa-v653-connect-toggle{min-height:44px;padding-right:14px}
  .hoa-v653-connect-toggle .hoa-v653-connect-icon{width:32px;height:32px;min-width:32px}
  .hoa-v653-connect-panel{bottom:52px;width:218px}
  .hoa-v653-connect-grid{gap:6px}
}
@media(prefers-reduced-motion:reduce){
  .hoa-v653-connect-toggle,.hoa-v653-connect-panel,.hoa-v653-connect-link{transition:none}
}


/* V6.0.123 — subtle social-follow label */
#hoaFrontSocialFooter .hoa-v619-actions{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
#hoaFrontSocialFooter .hoa-v619-follow-label{
  margin-right:3px !important;
  padding-right:7px !important;
  color:rgba(255,255,255,.62) !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.35px !important;
  white-space:nowrap !important;
  line-height:1 !important;
  position:relative !important;
}
#hoaFrontSocialFooter .hoa-v619-follow-label::after{
  content:"" !important;
  position:absolute !important;
  right:0 !important;
  top:50% !important;
  width:1px !important;
  height:18px !important;
  background:rgba(255,255,255,.18) !important;
  transform:translateY(-50%) !important;
}
@media(max-width:760px){
  #hoaFrontSocialFooter .hoa-v619-follow-label{
    display:none !important;
  }
}


/* V6.0.123 — final home-page and mobile release polish */
html, body{
  max-width:100%;
  overflow-x:hidden !important;
}
body{min-width:0 !important;}
body *{box-sizing:border-box;}

.hoa-career-soon{
  display:inline-block;
  margin-left:6px;
  padding:2px 6px;
  border-radius:999px;
  font-size:8px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.2px;
  color:#245da8;
  background:#edf4ff;
  vertical-align:middle;
}
.hoa-career-footer-note{
  display:block;
  margin-bottom:7px;
  color:rgba(255,255,255,.58);
  font-size:10px;
  font-weight:700;
}

#hoaV643PosterSection,
#hoaV643PosterWrap,
#hoaV643PosterNav{
  max-width:100% !important;
}
#hoaV643PosterSection{overflow:hidden !important;}
#hoaV643PosterWrap{overflow:hidden !important;}
#hoaV643PosterWrap img{
  max-width:100% !important;
  height:auto !important;
}

#hoaFrontSocialFooter{
  max-width:1120px !important;
  width:calc(100% - 32px) !important;
}

@media (max-width:760px){
  header, nav{max-width:100% !important;}

  .hoa-front-hero,
  .hoa-front-hero *{
    max-width:100% !important;
  }

  #hoaV643PosterSection{
    padding-left:8px !important;
    padding-right:8px !important;
    min-height:0 !important;
  }
  #hoaV643PosterWrap{
    padding:7px !important;
    min-height:0 !important;
    border-radius:18px !important;
  }
  #hoaV643PosterWrap img{
    width:100% !important;
    max-height:70vh !important;
    object-fit:contain !important;
  }
  #hoaV643PosterNav button,
  #hoaV643PosterNav [role="button"]{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    padding:0 !important;
  }

  #hoaV648StudentOptions{
    width:100% !important;
    max-width:100% !important;
  }
  #hoaV648StudentOptions .hoa-v648-option-grid{
    grid-template-columns:1fr !important;
  }
  #hoaV648StudentOptions .hoa-v648-option-card{
    width:100% !important;
    min-width:0 !important;
  }

  .hoa-front-feature-grid{
    grid-template-columns:1fr !important;
  }

  #hoaFrontSocialFooter{
    width:calc(100% - 20px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  #hoaFrontSocialFooter .hoa-v619-social-bar{
    min-height:58px !important;
    padding:8px 10px !important;
    border-radius:16px !important;
    justify-content:center !important;
    gap:6px !important;
  }
  #hoaFrontSocialFooter .hoa-v619-follow-label{display:none !important;}
  #hoaFrontSocialFooter .hoa-v619-social{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    padding:0 !important;
    justify-content:center !important;
  }
  #hoaFrontSocialFooter .hoa-v619-admin{
    width:40px !important;
    min-width:40px !important;
    padding:0 !important;
  }

  .hoa-career-soon{
    display:block;
    width:max-content;
    margin:4px auto 0;
  }

}

@media (max-width:390px){
  #hoaFrontSocialFooter .hoa-v619-social{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
  }
  #hoaFrontSocialFooter .hoa-v619-admin{
    width:36px !important;
    min-width:36px !important;
  }
  #hoaV643PosterWrap{padding:5px !important;}
  #hoaV643PosterNav button,
  #hoaV643PosterNav [role="button"]{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }
}


/* V6.0.123 — stronger Follow us on label */
#hoaFrontSocialFooter .hoa-v619-follow-label{
  display:inline-flex !important;
  align-items:center;
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:.15px !important;
  color:inherit !important;
  white-space:nowrap !important;
  opacity:1 !important;
}
@media (max-width:760px){
  #hoaFrontSocialFooter .hoa-v619-follow-label{
    display:inline-flex !important;
    font-size:12px !important;
  }
}


/* V6.0.123 — make Follow us on unmistakably visible */
#hoaFrontSocialFooter .hoa-v619-actions{
  align-items:center !important;
}
#hoaFrontSocialFooter .hoa-v619-follow-label{
  display:inline-flex !important;
  flex:0 0 auto !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:max-content !important;
  height:auto !important;
  margin:0 4px 0 0 !important;
  padding:0 10px 0 0 !important;
  color:#ffffff !important;
  opacity:1 !important;
  font-size:14px !important;
  font-weight:800 !important;
  letter-spacing:.2px !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  visibility:visible !important;
  position:relative !important;
  z-index:5 !important;
}
#hoaFrontSocialFooter .hoa-v619-follow-label::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  right:0 !important;
  top:50% !important;
  width:1px !important;
  height:22px !important;
  background:rgba(255,255,255,.35) !important;
  transform:translateY(-50%) !important;
}
@media(max-width:600px){
  #hoaFrontSocialFooter .hoa-v619-follow-label{
    font-size:13px !important;
    padding-right:0 !important;
    margin:0 0 4px !important;
  }
  #hoaFrontSocialFooter .hoa-v619-follow-label::after{
    display:none !important;
  }
}
@media(max-width:500px){
  #hoaFrontSocialFooter .hoa-v619-actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    align-items:center !important;
  }
  #hoaFrontSocialFooter .hoa-v619-follow-label{
    grid-column:1 / -1 !important;
    justify-self:center !important;
    width:max-content !important;
    display:inline-flex !important;
  }
}


#hoaV643PosterWrap .hoa643-poster-slide img{
  display:block !important;
  max-width:100% !important;
  max-height:100% !important;
}


/* V6.0.123 — Admin Login polish + responsive/mobile layout.
   Existing authentication IDs, handlers and workflow are intentionally preserved. */

body.hoa-public-auth.hoa-admin-auth{
  overflow-x:hidden !important;
  background:#f3f7fc !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaLoginPage{
  min-height:100svh !important;
  display:flex !important;
  flex-direction:column !important;
  background:
    radial-gradient(circle at 50% 22%,rgba(43,105,180,.08),transparent 34%),
    linear-gradient(180deg,#f3f7fc 0%,#f8fbff 55%,#eef4fa 100%) !important;
}

body.hoa-public-auth.hoa-admin-auth .hoa-login-page-top{
  width:calc(100% - 32px) !important;
  max-width:1180px !important;
  height:68px !important;
  min-height:68px !important;
  margin:10px auto 0 !important;
  padding:0 22px !important;
  border:1px solid #dce6f1 !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 7px 24px rgba(15,39,68,.07) !important;
  gap:18px !important;
}

body.hoa-public-auth.hoa-admin-auth .hoa-login-page-brand{
  min-width:0 !important;
  gap:11px !important;
}

body.hoa-public-auth.hoa-admin-auth .hoa-login-page-brand img{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  object-fit:contain !important;
  border-radius:50% !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

body.hoa-public-auth.hoa-admin-auth .hoa-login-page-brand strong{
  color:#102f52 !important;
  font-size:14px !important;
  font-weight:850 !important;
  letter-spacing:.15px !important;
}

body.hoa-public-auth.hoa-admin-auth .hoa-login-page-top::after{
  content:"ADMIN PORTAL  •  CONTROL PANEL" !important;
  color:#64748b !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.75px !important;
  white-space:nowrap !important;
}

body.hoa-public-auth.hoa-admin-auth .hoa-login-page-content{
  flex:1 0 auto !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:58px 16px 70px !important;
  box-sizing:border-box !important;
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaStudentPortalPanel{
  display:none !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminPortalPanel{
  display:block !important;
  width:min(520px,100%) !important;
  max-width:520px !important;
  margin:0 !important;
  padding:30px !important;
  box-sizing:border-box !important;
  border:1px solid #dbe5f0 !important;
  border-radius:22px !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:
    0 24px 60px rgba(15,39,68,.10),
    0 3px 10px rgba(15,39,68,.04) !important;
}

body.hoa-public-auth.hoa-admin-auth .hoa-login-panel-head{
  margin:0 0 24px !important;
  display:flex !important;
  align-items:center !important;
  gap:13px !important;
}

body.hoa-public-auth.hoa-admin-auth .hoa-login-panel-head .icon{
  flex:0 0 48px !important;
  width:48px !important;
  height:48px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:14px !important;
  background:#eaf3ff !important;
  font-size:22px !important;
}

body.hoa-public-auth.hoa-admin-auth .hoa-login-panel-head h2{
  margin:0 !important;
  color:#102f52 !important;
  font-size:27px !important;
  font-weight:850 !important;
  line-height:1.1 !important;
  letter-spacing:-.35px !important;
}

body.hoa-public-auth.hoa-admin-auth .hoa-login-panel-head p{
  margin:5px 0 0 !important;
  color:#718096 !important;
  font-size:12px !important;
  line-height:1.4 !important;
}

/* Use the real existing authentication form; remove the redundant nested
   "Admin / Close" presentation used by the legacy home panel. */
body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost{
  width:100% !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #homeAdminPanel{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost .homeAdminHeader{
  display:none !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #homeAdminBody{
  display:block !important;
  padding:0 !important;
  border:0 !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #homeAdminBody[hidden]{
  display:block !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost .formGroup{
  margin:0 0 18px !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost .formGroup label{
  display:block !important;
  margin:0 0 8px !important;
  color:#1e293b !important;
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1.3 !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #adminUsername,
body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #adminPassword{
  width:100% !important;
  min-height:50px !important;
  box-sizing:border-box !important;
  padding:13px 14px !important;
  border:1px solid #cbd8e6 !important;
  border-radius:11px !important;
  background:#fff !important;
  color:#172033 !important;
  font-size:14px !important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #adminUsername::placeholder,
body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #adminPassword::placeholder{
  color:#94a3b8 !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #adminUsername:focus,
body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #adminPassword:focus{
  outline:none !important;
  border-color:#2d6dcc !important;
  background:#fff !important;
  box-shadow:0 0 0 4px rgba(45,109,204,.11) !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #adminUsername{
  background:#f8fbff !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #homeAdminBody .primary{
  width:100% !important;
  min-height:50px !important;
  margin-top:2px !important;
  padding:12px 16px !important;
  border:1px solid #194a7c !important;
  border-radius:11px !important;
  background:linear-gradient(180deg,#205687 0%,#173f6b 100%) !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:850 !important;
  letter-spacing:.15px !important;
  box-shadow:0 7px 16px rgba(23,63,107,.18) !important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #homeAdminBody .primary:hover{
  filter:brightness(1.04) !important;
  box-shadow:0 9px 20px rgba(23,63,107,.23) !important;
  transform:translateY(-1px) !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #homeAdminBody .primary:active{
  transform:translateY(0) !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #adminAuthMessage{
  min-height:18px !important;
  margin-top:12px !important;
  line-height:1.4 !important;
}

body.hoa-public-auth.hoa-admin-auth #hoaAdminPortalPanel::after{
  content:"Authorized HUB OF ASPIRANTS administrators only" !important;
  display:block !important;
  margin-top:20px !important;
  padding-top:15px !important;
  border-top:1px solid #edf2f7 !important;
  color:#94a3b8 !important;
  text-align:center !important;
  font-size:11px !important;
  line-height:1.4 !important;
}

/* Tablet */
@media(max-width:760px){
  body.hoa-public-auth.hoa-admin-auth .hoa-login-page-top{
    width:calc(100% - 24px) !important;
    margin-top:8px !important;
    padding:0 16px !important;
  }

  body.hoa-public-auth.hoa-admin-auth .hoa-login-page-top::after{
    font-size:10px !important;
    letter-spacing:.45px !important;
  }

  body.hoa-public-auth.hoa-admin-auth .hoa-login-page-content{
    padding:36px 12px 46px !important;
  }

  body.hoa-public-auth.hoa-admin-auth #hoaAdminPortalPanel{
    padding:26px 20px !important;
    border-radius:18px !important;
  }
}

/* Phone */
@media(max-width:520px){
  body.hoa-public-auth.hoa-admin-auth .hoa-login-page-top{
    height:auto !important;
    min-height:62px !important;
    padding:10px 13px !important;
    border-radius:12px !important;
    gap:10px !important;
  }

  body.hoa-public-auth.hoa-admin-auth .hoa-login-page-brand img{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
  }

  body.hoa-public-auth.hoa-admin-auth .hoa-login-page-brand strong{
    font-size:13px !important;
  }

  body.hoa-public-auth.hoa-admin-auth .hoa-login-page-top::after{
    content:"ADMIN PORTAL" !important;
    margin-left:auto !important;
    font-size:9px !important;
    letter-spacing:.55px !important;
  }

  body.hoa-public-auth.hoa-admin-auth .hoa-login-page-content{
    padding:26px 10px 36px !important;
  }

  body.hoa-public-auth.hoa-admin-auth #hoaAdminPortalPanel{
    padding:23px 16px 22px !important;
    border-radius:17px !important;
  }

  body.hoa-public-auth.hoa-admin-auth .hoa-login-panel-head{
    margin-bottom:22px !important;
    gap:11px !important;
  }

  body.hoa-public-auth.hoa-admin-auth .hoa-login-panel-head .icon{
    flex-basis:44px !important;
    width:44px !important;
    height:44px !important;
    border-radius:12px !important;
    font-size:20px !important;
  }

  body.hoa-public-auth.hoa-admin-auth .hoa-login-panel-head h2{
    font-size:23px !important;
  }

  body.hoa.public-auth.hoa-admin-auth .hoa-login-panel-head p,
  body.hoa-public-auth.hoa-admin-auth .hoa-login-panel-head p{
    font-size:11px !important;
  }

  body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #adminUsername,
  body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #adminPassword{
    min-height:49px !important;
    font-size:16px !important; /* avoids iOS zoom */
  }

  body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost .formGroup{
    margin-bottom:16px !important;
  }

  body.hoa-public-auth.hoa-admin-auth #hoaAdminLoginHost #homeAdminBody .primary{
    min-height:50px !important;
  }
}

/* Very small phones */
@media(max-width:360px){
  body.hoa-public-auth.hoa-admin-auth .hoa-login-page-top::after{
    display:none !important;
  }

  body.hoa-public-auth.hoa-admin-auth .hoa-login-page-brand strong{
    font-size:12px !important;
  }

  body.hoa-public-auth.hoa-admin-auth #hoaAdminPortalPanel{
    padding:20px 13px !important;
  }
}


/* =========================================================
   HOA V6.0.123 — Admin Dashboard Professional Polish
   UI/performance layer only. Existing data, Supabase calls,
   authentication and admin workflows remain unchanged.
   ========================================================= */

body.admin-ui{
  --admin-navy:#082544;
  --admin-navy-2:#0d3158;
  --admin-blue:#1674e8;
  --admin-blue-2:#2b82ed;
  --admin-bg:#f4f7fb;
  --admin-card:#ffffff;
  --admin-border:#dce5ef;
  --admin-text:#102a49;
  --admin-muted:#6b7c91;
  background:var(--admin-bg)!important;
  color:var(--admin-text)!important;
}

/* Keep the admin shell visually stable and lightweight. */
body.admin-ui .adminReferenceSidebar{
  background:linear-gradient(180deg,#082544 0%,#06203d 100%)!important;
  border-right:1px solid rgba(255,255,255,.08)!important;
  box-shadow:4px 0 22px rgba(7,31,57,.10)!important;
  contain:layout paint style;
}

body.admin-ui .adminReferenceBrand{
  min-height:108px!important;
  padding:20px 14px 18px!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
}

body.admin-ui .adminReferenceBrand img{
  width:48px!important;
  height:48px!important;
  background:#fff!important;
  border:0!important;
  box-shadow:0 3px 12px rgba(0,0,0,.18)!important;
}

body.admin-ui .adminReferenceBrandTitle{
  font-size:18px!important;
  line-height:1.08!important;
  letter-spacing:.2px!important;
}

body.admin-ui .adminReferenceBrandSub{
  font-size:11px!important;
  margin-top:6px!important;
  color:rgba(255,255,255,.68)!important;
}

body.admin-ui .adminReferenceNav{
  padding:18px 10px!important;
  gap:7px!important;
}

body.admin-ui .adminReferenceNav button{
  min-height:47px!important;
  border-radius:10px!important;
  color:#eaf2fc!important;
  transition:background .14s ease,transform .14s ease!important;
}

body.admin-ui .adminReferenceNav button:hover:not(.active){
  background:rgba(255,255,255,.075)!important;
  transform:translateX(1px)!important;
}

body.admin-ui .adminReferenceNav button.active{
  background:linear-gradient(90deg,#1674e8,#2a83ed)!important;
  box-shadow:0 6px 14px rgba(0,91,190,.20)!important;
}

body.admin-ui .adminReferenceBottom{
  padding:12px 10px 14px!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
}

body.admin-ui .adminReferenceAdminCard{
  padding:10px!important;
  border-color:rgba(255,255,255,.25)!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.045)!important;
}

/* Top header */
body.admin-ui > .header{
  background:rgba(255,255,255,.97)!important;
  border-bottom:1px solid #dce5ef!important;
  box-shadow:0 5px 18px rgba(15,39,68,.07)!important;
  backdrop-filter:none!important;
}

body.admin-ui > .header #adminHeaderLogout,
body.admin-ui > .header #openHoaDevConsole{
  min-height:38px!important;
  border-radius:9px!important;
  font-weight:850!important;
  box-shadow:none!important;
}

body.admin-ui > .header #openHoaDevConsole{
  border:1px solid #d8e2ed!important;
  background:#fff!important;
  color:#173f6b!important;
}

body.admin-ui > .header #adminHeaderLogout{
  border:1px solid #d8e2ed!important;
  background:#fff!important;
  color:#173f6b!important;
}

/* Main workspace */
body.admin-ui .adminReferenceMain{
  background:
    radial-gradient(circle at 88% 8%,rgba(41,124,230,.045),transparent 28%),
    var(--admin-bg)!important;
  padding-bottom:40px!important;
}

body.admin-ui .adminReferenceMain > #adminOnlyDashboard{
  max-width:1380px!important;
}

/* Dashboard title/refresh strip */
body.admin-ui .adminReferenceMain #adminOnlyDashboard > .dashPanel:first-of-type{
  min-height:86px!important;
  padding:17px 20px!important;
  border-radius:14px!important;
  border:1px solid var(--admin-border)!important;
  box-shadow:0 5px 18px rgba(15,39,68,.055)!important;
}

/* Navigation is already relocated to sidebar; keep the original hidden. */
body.admin-ui .adminReferenceMain #adminOnlyDashboard > .adminSectionNav{
  display:none!important;
}

/* Content cards */
body.admin-ui .adminReferenceMain .dashPanel,
body.admin-ui .adminReferenceMain .testWisePanel{
  border:1px solid var(--admin-border)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 5px 18px rgba(15,39,68,.052)!important;
  contain:layout paint style;
}

body.admin-ui .adminReferenceMain .dashPanel{
  padding:18px!important;
}

body.admin-ui .adminReferenceMain .dashPanel > h3:first-child{
  font-size:19px!important;
  line-height:1.25!important;
  margin-bottom:7px!important;
}

body.admin-ui .adminReferenceMain .dashPanel > p{
  color:var(--admin-muted)!important;
  line-height:1.5!important;
}

/* Candidate sections */
body.admin-ui .adminReferenceMain .candidateAdminSection{
  margin-top:15px!important;
  padding-top:2px!important;
}

body.admin-ui .adminReferenceMain .candidateAdminSection + .candidateAdminSection{
  margin-top:18px!important;
  border-top:1px solid #e5ebf2!important;
  padding-top:18px!important;
}

body.admin-ui .adminReferenceMain .candidateAdminSection h4{
  font-size:16px!important;
  letter-spacing:.05px!important;
}

/* Candidate rows generated dynamically */
body.admin-ui .adminReferenceMain .studentItem,
body.admin-ui .adminReferenceMain .candidateItem,
body.admin-ui .adminReferenceMain .testItem{
  border:1px solid #dce5ef!important;
  border-radius:11px!important;
  background:#fff!important;
  box-shadow:none!important;
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease!important;
}

body.admin-ui .adminReferenceMain .studentItem:hover,
body.admin-ui .adminReferenceMain .candidateItem:hover,
body.admin-ui .adminReferenceMain .testItem:hover{
  border-color:#bfd2e6!important;
  box-shadow:0 5px 14px rgba(15,39,68,.055)!important;
  transform:translateY(-1px)!important;
}

/* Inputs and action buttons */
body.admin-ui .adminReferenceMain input,
body.admin-ui .adminReferenceMain select,
body.admin-ui .adminReferenceMain textarea{
  border-color:#cfdbe8!important;
  border-radius:9px!important;
  background:#fff!important;
}

body.admin-ui .adminReferenceMain input:focus,
body.admin-ui .adminReferenceMain select:focus,
body.admin-ui .adminReferenceMain textarea:focus{
  outline:none!important;
  border-color:#3d82d3!important;
  box-shadow:0 0 0 3px rgba(61,130,211,.10)!important;
}

body.admin-ui .adminReferenceMain button{
  touch-action:manipulation;
}

body.admin-ui .adminReferenceMain button.primary,
body.admin-ui .adminReferenceMain button.btn-primary{
  border-radius:9px!important;
  background:linear-gradient(180deg,#1b5b93,#123f6b)!important;
  border-color:#123f6b!important;
  box-shadow:0 4px 10px rgba(18,63,107,.13)!important;
}

body.admin-ui .adminReferenceMain button.secondary,
body.admin-ui .adminReferenceMain button.btn.secondary{
  border-radius:9px!important;
  background:#fff!important;
}

/* Poster Management */
body.admin-ui .adminReferenceMain .hoa-v59-admin{
  margin-top:16px!important;
  padding:18px!important;
  border:1px solid var(--admin-border)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 5px 18px rgba(15,39,68,.052)!important;
}

body.admin-ui .adminReferenceMain .hoa-v59-admin input{
  min-height:43px!important;
}

body.admin-ui .adminReferenceMain .hoa-v59-admin button{
  min-height:43px!important;
  padding:0 13px!important;
  border-radius:9px!important;
  font-weight:800!important;
}

body.admin-ui .adminReferenceMain .hoa-v59-list{
  border:1px solid #e1e8f0!important;
  border-radius:10px!important;
  overflow:hidden!important;
}

body.admin-ui .adminReferenceMain .hoa-v59-list th{
  background:#f7f9fc!important;
  color:#52657b!important;
  font-size:11px!important;
  text-transform:uppercase!important;
  letter-spacing:.04em!important;
}

body.admin-ui .adminReferenceMain .hoa-v59-list th,
body.admin-ui .adminReferenceMain .hoa-v59-list td{
  padding:10px 11px!important;
  border-bottom:1px solid #e8edf3!important;
}

/* Results cards */
body.admin-ui .adminReferenceMain .adminResultCards{
  gap:12px!important;
}

body.admin-ui .adminReferenceMain .adminResultCard{
  min-height:96px!important;
  padding:14px!important;
  border-radius:12px!important;
  box-shadow:none!important;
}

/* Performance: avoid expensive visual effects inside the admin workspace. */
body.admin-ui .adminReferenceMain,
body.admin-ui .adminReferenceMain *{
  -webkit-tap-highlight-color:transparent;
}

body.admin-ui .adminReferenceMain *{
  backdrop-filter:none!important;
}

body.admin-ui .adminReferenceMain .dashPanel,
body.admin-ui .adminReferenceMain .candidateItem,
body.admin-ui .adminReferenceMain .studentItem,
body.admin-ui .adminReferenceMain .testItem{
  will-change:auto!important;
}

/* Mobile admin workspace */
@media(max-width:768px){
  body.admin-ui .adminReferenceMain{
    padding:74px 10px calc(80px + env(safe-area-inset-bottom))!important;
  }

  body.admin-ui .adminReferenceMain #adminOnlyDashboard > .dashPanel:first-of-type{
    min-height:74px!important;
    padding:14px!important;
  }

  body.admin-ui .adminReferenceMain .dashPanel{
    padding:14px!important;
  }

  body.admin-ui .adminReferenceMain .hoa-v59-admin{
    padding:14px!important;
  }

  body.admin-ui .adminReferenceMain .hoa-v59-admin > div:first-of-type{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  body.admin-ui .adminReferenceMain .hoa-v59-admin input,
  body.admin-ui .adminReferenceMain .hoa-v59-admin button{
    width:100%!important;
  }

  body.admin-ui .adminReferenceMain .hoa-v59-list{
    display:block!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }

  body.admin-ui .adminReferenceMain .hoa-v59-list table{
    min-width:620px!important;
  }
}

@media(max-width:600px){
  body.admin-ui .adminReferenceMain{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  body.admin-ui .adminReferenceMain .adminSectionPanel.active{
    width:100%!important;
  }

  body.admin-ui .adminReferenceMain .candidateAdminSection{
    overflow:hidden!important;
  }

  body.admin-ui .adminReferenceMain .studentItem,
  body.admin-ui .adminReferenceMain .candidateItem{
    width:100%!important;
    overflow:hidden!important;
  }

  body.admin-ui .adminReferenceMain .adminResultCards{
    grid-template-columns:1fr!important;
  }
}

/* Respect accessibility without sacrificing the normal fast UI. */
@media(prefers-reduced-motion:reduce){
  body.admin-ui .adminReferenceMain *,
  body.admin-ui .adminReferenceSidebar *{
    transition:none!important;
    animation:none!important;
  }
}


/* V6.0.123 — Admin content-management workspace */
body.admin-ui .hoa-admin-content-panel{padding:20px!important}
body.admin-ui .hoa-admin-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
body.admin-ui .hoa-admin-section-head h3{margin:0 0 5px!important;color:#123b67!important;font-size:19px!important}
body.admin-ui .hoa-admin-section-head p{margin:0!important;color:#718096!important;font-size:12.5px!important;line-height:1.5!important}
body.admin-ui .hoa-admin-count{min-width:34px;height:28px;padding:0 9px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#edf4ff;color:#175aa3;font-size:12px;font-weight:850}
body.admin-ui .hoa-admin-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body.admin-ui .hoa-admin-form-grid label{display:flex;flex-direction:column;gap:6px;color:#334155;font-size:12px;font-weight:800}
body.admin-ui .hoa-admin-form-grid .hoa-admin-wide{grid-column:1/-1}
body.admin-ui .hoa-admin-form-grid input,
body.admin-ui .hoa-admin-form-grid select,
body.admin-ui .hoa-admin-form-grid textarea{width:100%;min-height:42px;padding:10px 11px;border:1px solid #cfdbe8;border-radius:9px;background:#fff;color:#172033;box-sizing:border-box}
body.admin-ui .hoa-admin-form-grid textarea{resize:vertical;min-height:78px}
body.admin-ui .hoa-admin-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:14px}
body.admin-ui .hoa-admin-actions button{min-height:42px;padding:0 13px}
body.admin-ui .hoa-admin-actions span{font-size:12px;color:#64748b}
body.admin-ui .hoa-admin-list{margin-top:18px;border:1px solid #e0e7ef;border-radius:11px;overflow:auto;background:#fff}
body.admin-ui .hoa-admin-list table{width:100%;border-collapse:collapse;min-width:720px}
body.admin-ui .hoa-admin-list th{padding:10px 11px;text-align:left;background:#f7f9fc;color:#607287;font-size:10px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
body.admin-ui .hoa-admin-list td{padding:11px;border-top:1px solid #e8edf3;color:#263c56;font-size:12px;vertical-align:middle}
body.admin-ui .hoa-admin-list tr:hover td{background:#fbfdff}
body.admin-ui .hoa-admin-row-actions{display:flex;gap:6px;flex-wrap:wrap}
body.admin-ui .hoa-admin-row-actions button{min-height:32px;padding:0 9px;border-radius:7px;border:1px solid #d6e0ea;background:#fff;color:#173f6b;font-weight:800;font-size:11px}
body.admin-ui .hoa-admin-row-actions button.danger{color:#b42318;border-color:#f1c5c0}
body.admin-ui .hoa-admin-empty{padding:28px 16px;text-align:center;color:#8a99aa;font-size:12px}
body.admin-ui #adminReferenceSidebar .adminReferenceNav{overflow-y:auto;scrollbar-width:thin}
body.admin-ui #adminReferenceSidebar .adminReferenceNav button{font-size:12px!important}
body:not(.admin-ui) #adminReferenceSidebar #adminNavCourse,
body:not(.admin-ui) #adminReferenceSidebar #adminNavVideo,
body:not(.admin-ui) #adminReferenceSidebar #adminNavNotes,
body:not(.admin-ui) #adminReferenceSidebar #adminNavAccess{display:none!important}
body:not(.admin-ui) #adminNavCourse,
body:not(.admin-ui) #adminNavVideo,
body:not(.admin-ui) #adminNavNotes,
body:not(.admin-ui) #adminNavAccess{display:none!important}
@media(max-width:760px){
  body.admin-ui .hoa-admin-form-grid{grid-template-columns:1fr}
  body.admin-ui .hoa-admin-form-grid .hoa-admin-wide{grid-column:auto}
  body.admin-ui .hoa-admin-section-head{align-items:flex-start}
  body.admin-ui .hoa-admin-content-panel{padding:14px!important}
}


/* HOA public chrome: the Global Footer and Connect Us are shown everywhere except the Admin Dashboard. */
body.admin-ui #hoaGlobalPublicFooter,
body:has(#adminOnlyDashboard:not(.hidden)) #hoaGlobalPublicFooter,
body.admin-ui #hoaFrontSocialFooter,
body:has(#adminOnlyDashboard:not(.hidden)) #hoaFrontSocialFooter,
body.admin-ui #hoaProfessionalFooter,
body:has(#adminOnlyDashboard:not(.hidden)) #hoaProfessionalFooter,
body.admin-ui #hoaV653ConnectWrap,
body:has(#adminOnlyDashboard:not(.hidden)) .hoa-v653-connect-wrap{display:none !important;}


#hoaV645AccessManager{margin-top:18px;padding-top:18px;border-top:1px solid #e2e8f0}
.hoa645-access-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px}
.hoa645-access-head h4{margin:0;color:#173f6b;font-size:18px}
.hoa645-access-head p{margin:5px 0 0;color:#64748b;font-size:12px;line-height:1.5}
.hoa645-role-pill{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:11px;font-weight:800;white-space:nowrap}
.hoa645-admin-list{display:grid;gap:10px}
.hoa645-admin-card{border:1px solid #dbe5ef;border-radius:14px;background:#fff;padding:13px 14px}
.hoa645-admin-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.hoa645-admin-card-main{min-width:0}
.hoa645-admin-card-main strong{display:block;color:#173f6b;font-size:14px}
.hoa645-admin-card-main small{display:block;color:#64748b;margin-top:3px;overflow:hidden;text-overflow:ellipsis}
.hoa645-access-actions{display:flex;gap:7px;flex-wrap:wrap}
.hoa645-access-editor{display:none;margin-top:13px;padding-top:13px;border-top:1px solid #e2e8f0}
.hoa645-access-editor.open{display:block}
.hoa645-role-row{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:14px}
.hoa645-role-row label{display:grid;gap:5px;font-size:11px;font-weight:800;color:#173f6b}
.hoa645-role-row select{min-width:220px;padding:9px 10px;border:1px solid #cbd8e6;border-radius:9px;background:#fff}
.hoa645-perm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.hoa645-perm-group{border:1px solid #e2e8f0;border-radius:12px;padding:11px;background:#f8fafc}
.hoa645-perm-group h5{margin:0 0 8px;color:#173f6b;font-size:12px}
.hoa645-perm-check{display:flex;align-items:center;gap:7px;margin:6px 0;font-size:12px;color:#334155}
.hoa645-perm-check input{accent-color:#1d4ed8}
.hoa645-locked{opacity:.65}
.hoa645-msg{margin-top:8px;font-size:12px;color:#64748b}
@media(max-width:700px){
  .hoa645-access-head{display:block}
  .hoa645-role-pill{margin-top:8px}
  .hoa645-perm-grid{grid-template-columns:1fr}
  .hoa645-admin-card-head{align-items:flex-start;flex-direction:column}
}

#hoaV643AdminManager{display:none!important}


.hoa645-two-tier-note{
  margin:10px 0 14px;padding:10px 12px;border-radius:10px;
  background:#f7fbff;border:1px solid #d9e8f7;color:#38526b;
  font-size:12px;line-height:1.5;
}


#hoaV646OwnerAccessBanner{
  display:block;margin:0 0 16px;padding:16px 18px;border-radius:14px;
  border:1px solid #bfdbfe;background:linear-gradient(135deg,#eff6ff,#f8fbff);
  box-shadow:0 5px 18px rgba(30,64,175,.08);
}
#hoaV646OwnerAccessBanner strong{display:block;color:#123f73;font-size:14px;letter-spacing:.4px}
#hoaV646OwnerAccessBanner span{display:block;margin:5px 0 12px;color:#52677c;font-size:12px;line-height:1.5}
#hoaV646OwnerAccessBanner button{
  border:0;border-radius:9px;padding:9px 13px;background:#1d4ed8;color:#fff;
  font-weight:800;font-size:11px;cursor:pointer;
}
body:not(.hoa-owner-mode) #hoaV646OwnerAccessBanner{display:none!important}


/* Runtime guard: the existing poster carousel remains the sole renderer.
   This only prevents an accidental ancestor visibility rule from blanking
   the public poster section. */
body.hoa-public-front #hoaFrontPage #hoaV643PosterSection{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
body.hoa-public-front #hoaFrontPage #hoaV643PosterWrap{
  visibility:visible !important;
  opacity:1 !important;
}


.hoa-admin-password-rule-note{margin:0 0 14px;padding:12px 14px;border-radius:10px;background:#f8fafc;border:1px solid #dbe4ee;color:#536579;font-size:12px;line-height:1.5}
.hoa-admin-password-rule-note strong{color:#173b63}
.hoa-admin-password-rule-note span{display:block;margin-top:3px;color:#6b7d90}


#hoaV645AccessManager{
 display:block!important;visibility:visible!important;
 margin:18px 0!important;padding:20px!important;
 border:1px solid #d8e3ef!important;border-radius:14px!important;
 background:#fff!important;box-shadow:0 6px 22px rgba(15,23,42,.06)!important;
}
#hoaV645AccessManager .hoa645-admin-manager-grid{
 display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important;
}
#hoaV645AccessManager .hoa645-admin-manager-grid .primary{grid-column:1/-1;min-height:42px}
@media(max-width:700px){
 #hoaV645AccessManager .hoa645-admin-manager-grid{grid-template-columns:1fr!important}
}


/* V6.0.123 — final home-page and mobile release polish */
html, body{
  max-width:100%;
  overflow-x:hidden !important;
}
body{min-width:0 !important;}
body *{box-sizing:border-box;}

.hoa-career-soon{
  display:inline-block;
  margin-left:6px;
  padding:2px 6px;
  border-radius:999px;
  font-size:8px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.2px;
  color:#245da8;
  background:#edf4ff;
  vertical-align:middle;
}
.hoa-career-footer-note{
  display:block;
  margin-bottom:7px;
  color:rgba(255,255,255,.58);
  font-size:10px;
  font-weight:700;
}

#hoaV643PosterSection,
#hoaV643PosterWrap,
#hoaV643PosterNav{
  max-width:100% !important;
}
#hoaV643PosterSection{overflow:hidden !important;}
#hoaV643PosterWrap{overflow:hidden !important;}
#hoaV643PosterWrap img{
  max-width:100% !important;
  height:auto !important;
}

#hoaFrontSocialFooter{
  max-width:1120px !important;
  width:calc(100% - 32px) !important;
}

@media (max-width:760px){
  header, nav{max-width:100% !important;}

  .hoa-front-hero,
  .hoa-front-hero *{
    max-width:100% !important;
  }

  #hoaV643PosterSection{
    padding-left:8px !important;
    padding-right:8px !important;
    min-height:0 !important;
  }
  #hoaV643PosterWrap{
    padding:7px !important;
    min-height:0 !important;
    border-radius:18px !important;
  }
  #hoaV643PosterWrap img{
    width:100% !important;
    max-height:70vh !important;
    object-fit:contain !important;
  }
  #hoaV643PosterNav button,
  #hoaV643PosterNav [role="button"]{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    padding:0 !important;
  }

  #hoaV648StudentOptions{
    width:100% !important;
    max-width:100% !important;
  }
  #hoaV648StudentOptions .hoa-v648-option-grid{
    grid-template-columns:1fr !important;
  }
  #hoaV648StudentOptions .hoa-v648-option-card{
    width:100% !important;
    min-width:0 !important;
  }

  .hoa-front-feature-grid{
    grid-template-columns:1fr !important;
  }

  #hoaFrontSocialFooter{
    width:calc(100% - 20px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  #hoaFrontSocialFooter .hoa-v619-social-bar{
    min-height:58px !important;
    padding:8px 10px !important;
    border-radius:16px !important;
    justify-content:center !important;
    gap:6px !important;
  }
  #hoaFrontSocialFooter .hoa-v619-follow-label{display:none !important;}
  #hoaFrontSocialFooter .hoa-v619-social{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    padding:0 !important;
    justify-content:center !important;
  }
  #hoaFrontSocialFooter .hoa-v619-admin{
    width:40px !important;
    min-width:40px !important;
    padding:0 !important;
  }

  .hoa-career-soon{
    display:block;
    width:max-content;
    margin:4px auto 0;
  }

}

@media (max-width:390px){
  #hoaFrontSocialFooter .hoa-v619-social{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
  }
  #hoaFrontSocialFooter .hoa-v619-admin{
    width:36px !important;
    min-width:36px !important;
  }
  #hoaV643PosterWrap{padding:5px !important;}
  #hoaV643PosterNav button,
  #hoaV643PosterNav [role="button"]{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }
}


#adminSectionPosterPanel .hoa-v59-admin-shell{margin-top:0;padding:0;border:0;box-shadow:none;background:transparent}
#adminSectionPosterPanel .hoa-v59-admin-shell h3{display:none}
#adminSectionPosterPanel .hoa-v59-admin-shell > .hoa-v59-mini{margin-top:0}
#adminSectionPosterPanel #hoaV59File,#adminSectionPosterPanel #hoaV59Title,#adminSectionPosterPanel #hoaV59Order{min-height:40px;box-sizing:border-box}
#adminSectionPosterPanel #hoaV59AdminList{margin-top:14px;overflow:auto}
#adminSectionPosterPanel .hoa-v59-list{width:100%;border-collapse:collapse;background:#fff;border:1px solid #dbe6f2;border-radius:12px;overflow:hidden}
#adminSectionPosterPanel .hoa-v59-list th{background:#f4f8fc;color:#173f6b;font-weight:800;text-align:left}
#adminSectionPosterPanel .hoa-v59-list th,#adminSectionPosterPanel .hoa-v59-list td{padding:11px 12px;border-bottom:1px solid #e7eef6;white-space:nowrap}
#adminSectionPosterPanel .hoa-v59-list tr:last-child td{border-bottom:0}
#adminSectionPosterPanel #hoaV59AdminMsg{margin-top:10px;color:#173f6b;font-weight:700}


body.admin-ui .hoa-v70-content-editor{border:1px solid #dbe5ef;border-radius:14px;background:#f8fbff;padding:16px;margin-top:14px}
body.admin-ui .hoa-v70-editor-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
body.admin-ui .hoa-v70-editor-head strong{display:block;color:#123b67;font-size:16px}
body.admin-ui .hoa-v70-editor-head span{display:block;color:#64748b;font-size:11px;margin-top:3px}
body.admin-ui .hoa-v70-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body.admin-ui .hoa-v70-form label{display:flex;flex-direction:column;gap:6px;color:#334155;font-size:12px;font-weight:800}
body.admin-ui .hoa-v70-form label small{font-size:10px;color:#7b8ba0;font-weight:500;line-height:1.35}
body.admin-ui .hoa-v70-form input,body.admin-ui .hoa-v70-form select,body.admin-ui .hoa-v70-form textarea{width:100%;min-height:42px;padding:10px 11px;border:1px solid #cfdbe8;border-radius:9px;background:#fff;color:#172033;box-sizing:border-box}
body.admin-ui .hoa-v70-form textarea{resize:vertical;min-height:92px}
body.admin-ui .hoa-v70-wide{grid-column:1/-1}
body.admin-ui .hoa-v70-publish span{display:flex;align-items:center;gap:7px;min-height:42px}
body.admin-ui .hoa-v70-publish input{width:auto;min-height:auto}
body.admin-ui .hoa-v70-subhead{display:flex;justify-content:space-between;align-items:center;margin:20px 0 10px}
body.admin-ui .hoa-v70-subhead h3{margin:0;color:#123b67;font-size:16px}
body.admin-ui .hoa-v70-subhead p{margin:3px 0 0;color:#718096;font-size:11px}
body.admin-ui .hoa-v70-row-actions{display:flex;gap:6px;flex-wrap:wrap}
body.admin-ui .hoa-v70-danger{border-color:#f0b9b9!important;color:#b42318!important}
body.admin-ui .hoa-v70-preview-modal{position:fixed;inset:0;background:rgba(15,31,50,.58);z-index:100000;display:none;align-items:center;justify-content:center;padding:20px}
body.admin-ui .hoa-v70-preview-modal.show{display:flex}
body.admin-ui .hoa-v70-preview-dialog{width:min(900px,96vw);max-height:92vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 25px 70px rgba(0,0,0,.25)}
body.admin-ui .hoa-v70-preview-head{display:flex;justify-content:space-between;align-items:flex-start;padding:16px 18px;border-bottom:1px solid #e5ebf2}
body.admin-ui .hoa-v70-preview-head span{font-size:10px;font-weight:900;color:#b07b00;letter-spacing:.08em}
body.admin-ui .hoa-v70-preview-head h2{margin:4px 0 0;color:#123b67;font-size:19px}
body.admin-ui .hoa-v70-preview-head button{border:0;background:#f1f5f9;border-radius:9px;width:34px;height:34px;font-size:22px;cursor:pointer}
body.admin-ui .hoa-v70-preview-body{padding:18px}
body.admin-ui .hoa-v70-preview-card{border:1px solid #dbe5ef;border-radius:14px;overflow:hidden;background:#fff}
body.admin-ui .hoa-v70-preview-card h3{margin:14px 16px 7px;color:#123b67;font-size:20px}
body.admin-ui .hoa-v70-preview-card>p{margin:0 16px 18px;color:#52657b;line-height:1.6;white-space:pre-wrap}
body.admin-ui .hoa-v70-preview-meta{display:flex;gap:7px;flex-wrap:wrap;padding:12px 16px 0}
body.admin-ui .hoa-v70-preview-meta span{background:#eef5ff;color:#175aa3;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:800}
body.admin-ui .hoa-v70-preview-video{aspect-ratio:16/9;background:#0f172a}
body.admin-ui .hoa-v70-preview-video iframe{width:100%;height:100%;border:0}
body.admin-ui .hoa-v70-preview-video-file{display:block;width:100%;max-height:520px;background:#0f172a}
body.admin-ui .hoa-v70-preview-document{display:block;width:100%;height:560px;border:0;background:#f8fafc}
body.admin-ui .hoa-v70-preview-image{display:block;width:100%;max-height:420px;object-fit:contain;background:#f8fafc}
body.admin-ui .hoa-v70-preview-test{padding:40px 20px;text-align:center;background:#f5f9ff;display:flex;flex-direction:column;gap:8px;color:#52657b}
body.admin-ui .hoa-v70-preview-test strong{font-size:18px;color:#123b67}
body.admin-ui .hoa-v70-preview-icon{font-size:40px}
body.admin-ui .hoa-v70-preview-link,body.admin-ui .hoa-v70-preview-empty{padding:30px 20px;text-align:center;background:#f8fafc;color:#52657b}
@media(max-width:700px){body.admin-ui .hoa-v70-form{grid-template-columns:1fr}body.admin-ui .hoa-v70-wide{grid-column:auto}body.admin-ui .hoa-v70-editor-head{align-items:flex-start;flex-direction:column}.hoa-v70-preview-modal{padding:8px}.hoa-v70-preview-document{height:420px}}


body.hoa-v615-free-portal{margin:0!important;background:#f4f7fb!important;color:#172033!important;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important}
#hoaV615Portal{min-height:100vh;background:linear-gradient(180deg,#f7fbff 0%,#eef4fa 100%)}
#hoaV615Portal *{box-sizing:border-box}
.hoa615-top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid #dbe5ef;box-shadow:0 3px 18px rgba(15,39,68,.06)}
.hoa615-top-inner{width:min(1180px,calc(100% - 28px));margin:auto;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.hoa615-brand{display:flex;align-items:center;gap:11px;min-width:0}
.hoa615-brand img{width:42px;height:42px;object-fit:contain;border-radius:10px}
.hoa615-brand strong{display:block;color:#123f70;font-size:16px;line-height:1.1}
.hoa615-brand span{display:block;color:#64748b;font-size:11px;margin-top:3px}
.hoa615-top-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hoa615-btn{border:1px solid #cbd9e8;background:#fff;color:#173f6b;border-radius:9px;padding:9px 13px;font-weight:800;font-size:12px;cursor:pointer}
.hoa615-btn.primary{background:#123f70;color:#fff;border-color:#123f70}
.hoa615-btn.gold{background:#f2b705;color:#172033;border-color:#d9a500}
.hoa615-btn.danger{color:#b42318}
.hoa615-main{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:28px 0 50px}
.hoa615-hero{background:linear-gradient(135deg,#123f70,#0b3768);color:#fff;border-radius:22px;padding:28px;box-shadow:0 18px 45px rgba(15,39,68,.16);display:flex;justify-content:space-between;gap:20px;align-items:flex-end}
.hoa615-kicker{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#f8d76d}
.hoa615-hero h1{margin:7px 0 7px;font-size:30px;line-height:1.12;color:#ffffff !important;text-shadow:0 1px 1px rgba(0,0,0,.12)}
.hoa615-hero p{margin:0;color:#dbeafe;max-width:720px;line-height:1.55}
.hoa615-stat{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:12px 16px;min-width:115px;text-align:center}
.hoa615-stat b{display:block;font-size:22px}
.hoa615-stat span{font-size:10px;color:#dbeafe;text-transform:uppercase;letter-spacing:.08em}
.hoa615-tabs{display:flex;gap:8px;overflow:auto;padding:18px 0 14px;scrollbar-width:none}
.hoa615-tabs::-webkit-scrollbar{display:none}
.hoa615-tab{white-space:nowrap;border:1px solid #d4dfeb;background:#fff;color:#475569;border-radius:999px;padding:9px 14px;font-weight:800;font-size:12px;cursor:pointer}
.hoa615-tab.active{background:#123f70;color:#fff;border-color:#123f70}
.hoa615-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin:8px 0 14px}
.hoa615-section-head h2{margin:0;color:#123f70;font-size:21px}
.hoa615-section-head p{margin:4px 0 0;color:#64748b;font-size:12px}
.hoa615-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.hoa615-card{background:#fff;border:1px solid #dbe5ef;border-radius:17px;overflow:hidden;box-shadow:0 7px 24px rgba(15,39,68,.06);display:flex;flex-direction:column;min-width:0}
.hoa615-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#dcecff,#f8fbff);display:grid;place-items:center;color:#123f70;font-size:38px;position:relative;overflow:hidden}
.hoa615-thumb img{width:100%;height:100%;object-fit:cover}
.hoa615-type{position:absolute;left:10px;top:10px;background:#123f70;color:#fff;border-radius:7px;padding:5px 7px;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.hoa615-card-body{padding:15px;display:flex;flex-direction:column;flex:1}
.hoa615-card h3{margin:7px 0 7px;color:#173f6b;font-size:16px;line-height:1.3}
.hoa615-card p{margin:0;color:#64748b;font-size:12px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hoa615-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.hoa615-chip{font-size:9px;font-weight:800;color:#2563eb;background:#eff6ff;border-radius:999px;padding:5px 7px}
.hoa615-card-actions{display:flex;gap:7px;margin-top:auto;padding-top:14px}
.hoa615-empty{background:#fff;border:1px dashed #cbd9e8;border-radius:17px;padding:45px 20px;text-align:center;color:#64748b}
.hoa615-empty b{display:block;color:#173f6b;font-size:16px;margin-bottom:6px}
.hoa615-detail{background:#fff;border:1px solid #dbe5ef;border-radius:20px;box-shadow:0 10px 30px rgba(15,39,68,.07);overflow:hidden}
.hoa615-detail-head{padding:20px 22px;border-bottom:1px solid #e5edf5}
.hoa615-detail-head h2{margin:7px 0;color:#123f70;font-size:25px}
.hoa615-detail-head p{margin:0;color:#64748b;line-height:1.65}
.hoa615-detail-media{padding:18px 22px 0}
.hoa615-detail-desc{padding:20px 22px;color:#334155;line-height:1.7;white-space:pre-wrap}
.hoa615-resource-frame{width:100%;height:min(72vh,760px);border:1px solid #dbe5ef;border-radius:13px;background:#fff}
.hoa615-player-wrap{width:100%;background:#06111e;border-radius:15px;overflow:hidden}
.hoa615-note-box{padding:22px;background:#fbfdff;border:1px solid #e2eaf3;border-radius:14px;color:#334155;line-height:1.75}
.hoa615-login{width:min(560px,100%);margin:50px auto;background:#fff;border:1px solid #dbe5ef;border-radius:20px;padding:26px;box-shadow:0 18px 50px rgba(15,39,68,.1)}
.hoa615-login h1{margin:0;color:#123f70;font-size:24px}
.hoa615-login p{color:#64748b;line-height:1.55;font-size:13px}
.hoa615-form{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.hoa615-form label{font-size:12px;font-weight:800;color:#334155}
.hoa615-form .wide{grid-column:1/-1}
.hoa615-form input,.hoa615-form select,.hoa615-form textarea{display:block;width:100%;margin-top:5px;border:1px solid #cbd5e1;border-radius:9px;padding:10px;background:#fff;font:inherit}
.hoa615-error{color:#b42318;background:#fff3f2;border:1px solid #fecaca;padding:9px 11px;border-radius:9px;font-size:12px;margin:10px 0}
.hoa615-test-shell{width:min(1000px,calc(100% - 28px));margin:0 auto;padding:24px 0 45px}
.hoa615-test-top{background:#123f70;color:#fff;border-radius:18px;padding:20px;display:flex;justify-content:space-between;gap:15px;align-items:center}
.hoa615-test-top h1{margin:4px 0;font-size:24px;color:#ffffff !important}
.hoa615-test-top p{margin:0;color:#dbeafe;font-size:12px}
.hoa615-timer{font-size:24px;font-weight:900;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:10px 15px;border-radius:12px;min-width:92px;text-align:center}
.hoa615-question{margin-top:14px;background:#fff;border:1px solid #dbe5ef;border-radius:17px;padding:20px;box-shadow:0 7px 22px rgba(15,39,68,.05)}
.hoa615-qno{font-size:10px;font-weight:900;color:#2563eb;letter-spacing:.1em;text-transform:uppercase}
.hoa615-question h2{font-size:19px;line-height:1.55;color:#172033;margin:8px 0 18px}
.hoa615-options{display:grid;gap:9px}
.hoa615-option{border:1px solid #cbd5e1;background:#fff;border-radius:11px;padding:12px;text-align:left;cursor:pointer;font-size:13px;color:#334155}
.hoa615-option:hover{border-color:#2563eb}
.hoa615-option.selected{border-color:#2563eb;background:#eff6ff;box-shadow:0 0 0 2px rgba(37,99,235,.08)}
.hoa615-test-actions{display:flex;justify-content:space-between;gap:8px;margin-top:14px}
.hoa615-result{background:#fff;border:1px solid #dbe5ef;border-radius:20px;padding:28px;text-align:center;box-shadow:0 15px 45px rgba(15,39,68,.09)}
.hoa615-result h1{color:#123f70}
.hoa615-result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}
.hoa615-result-stat{border:1px solid #dbe5ef;border-radius:12px;padding:13px;background:#fbfdff}
.hoa615-result-stat b{display:block;font-size:21px;color:#123f70}
.hoa615-result-stat span{font-size:10px;color:#64748b;text-transform:uppercase}
.hoa615-logo-fallback{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#123f70,#0b3768);color:#f8d76d;font-weight:900;font-size:13px;box-shadow:0 5px 14px rgba(15,39,68,.16)}
.hoa615-hero{position:relative;overflow:hidden}
.hoa615-hero:after{content:"";position:absolute;right:-55px;bottom:-85px;width:240px;height:240px;border-radius:50%;background:rgba(242,183,5,.10);pointer-events:none}
.hoa615-hero>div{position:relative;z-index:1}
.hoa615-tabs{border-bottom:1px solid #dbe5ef;margin-bottom:2px}
.hoa615-tab{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.hoa615-tab:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(15,39,68,.08);border-color:#b8cbe0}
.hoa615-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.hoa615-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(15,39,68,.10);border-color:#c8d9ea}
.hoa615-detail-head{background:linear-gradient(180deg,#fff,#f8fbff)}
@media(max-width:850px){.hoa615-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hoa615-hero{align-items:flex-start}.hoa615-stat{display:none}}
@media(max-width:600px){.hoa615-main,.hoa615-test-shell{width:min(100% - 20px,1180px)}.hoa615-top-inner{width:calc(100% - 20px)}.hoa615-top-inner{min-height:64px}.hoa615-brand span{display:none}.hoa615-grid{grid-template-columns:1fr}.hoa615-hero{padding:22px;border-radius:17px}.hoa615-hero h1{font-size:24px}.hoa615-section-head{display:block}.hoa615-form{grid-template-columns:1fr}.hoa615-form .wide{grid-column:auto}.hoa615-test-top{align-items:flex-start}.hoa615-test-top h1{font-size:19px}.hoa615-timer{font-size:19px;min-width:78px}.hoa615-result-grid{grid-template-columns:1fr 1fr}}


/* V6.0.30 — Free Content native Home social bar placement */
body.hoa-v615-free-portal #hoaV628FreshNativeBottom{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  margin:0 !important;
  padding:0 0 28px !important;
  box-sizing:border-box !important;
}
body.hoa-v615-free-portal #hoaV628FreshNativeBottom > #hoaFrontSocialFooter{
  width:calc(100% - 48px) !important;
  max-width:1180px !important;
  margin:42px auto 0 !important;
  border-radius:18px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
@media(max-width:700px){
  body.hoa-v615-free-portal #hoaV628FreshNativeBottom{padding-bottom:18px !important;}
  body.hoa-v615-free-portal #hoaV628FreshNativeBottom > #hoaFrontSocialFooter{
    width:calc(100% - 24px) !important;
    margin-top:28px !important;
    border-radius:16px !important;
  }
}


/* V6.0.32 — Free Content native Follow Us bar: centered + rounded */
body.hoa-v615-free-portal #hoaFrontSocialFooter{
  width:min(1120px,calc(100% - 32px)) !important;
  max-width:1120px !important;
  margin:28px auto 0 !important;
  padding:0 !important;
  background:transparent !important;
  border-radius:20px !important;
  overflow:visible !important;
  box-sizing:border-box !important;
  float:none !important;
  position:relative !important;
  left:auto !important;
  right:auto !important;
}
body.hoa-v615-free-portal #hoaFrontSocialFooter .hoa-v619-social-bar{
  width:100% !important;
  min-height:68px !important;
  margin:0 auto !important;
  padding:10px 14px !important;
  box-sizing:border-box !important;
  border-radius:20px !important;
  overflow:hidden !important;
}
@media(max-width:760px){
  body.hoa-v615-free-portal #hoaFrontSocialFooter{
    width:calc(100% - 24px) !important;
    margin:22px auto 0 !important;
    border-radius:16px !important;
  }
  body.hoa-v615-free-portal #hoaFrontSocialFooter .hoa-v619-social-bar{
    min-height:60px !important;
    border-radius:16px !important;
  }
}


/* V6.0.34 — Restore the native HOA blue Follow Us bar in Free Content portal. */
body.hoa-v615-free-portal #hoaFrontSocialFooter .hoa-v619-social-bar{
  background:#0b2341 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:20px !important;
  box-shadow:0 12px 30px rgba(10,35,70,.16) !important;
  opacity:1 !important;
  filter:none !important;
}
body.hoa-v615-free-portal #hoaFrontSocialFooter .hoa-v619-brand-name,
body.hoa-v615-free-portal #hoaFrontSocialFooter .hoa-v619-follow-label{color:#fff !important;}
body.hoa-v615-free-portal #hoaFrontSocialFooter .hoa-v619-brand-tag{color:rgba(255,255,255,.68) !important;}
body.hoa-v615-free-portal #hoaFrontSocialFooter .hoa-v619-social,
body.hoa-v615-free-portal #hoaFrontSocialFooter .hoa-v619-admin{
  color:#fff !important;
  background:rgba(255,255,255,.075) !important;
  border-color:rgba(255,255,255,.16) !important;
}
body.hoa-v615-free-portal #hoaFrontSocialFooter .hoa-v619-admin{background:#173f6b !important;border-color:rgba(255,255,255,.30) !important;}


/* V6.0.37 — Student Login fields must remain visible in the hosted login panel.
   The legacy .hidden rule uses !important, so the hosted login state also
   needs an equally authoritative display rule. Authentication logic is untouched. */
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #loginBox{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #loginBox .formGroup{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #loginBox .formGroup label{
  display:block !important;
  visibility:visible !important;
}
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #loginBox input#loginId,
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #loginBox input#loginPassword{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}


/* V6.0.40 — Paid Registration must be a complete, independent tab state.
   The legacy Student panel is hosted inside the new Student Login page.
   Keep the existing registration/authentication logic, but make the hosted
   visibility state authoritative so older CSS cannot hide the form groups. */
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #registerBox{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #registerBox .formGroup{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #registerBox .formGroup label{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #registerBox input,
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #registerBox select,
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #registerBox button{
  visibility:visible !important;
  opacity:1 !important;
}


/* V6.0.42 — Student Login tabs are mutually exclusive.
   V6.0.37/V6.0.40 made both legacy boxes unconditionally visible with
   !important. The final state rules below make the existing .hidden state
   authoritative without changing authentication or registration logic. */
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #loginBox.hidden,
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #registerBox.hidden,
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #freeGateBox.hidden,
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #freeRegisterBox.hidden{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
}

body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #loginBox:not(.hidden),
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #registerBox:not(.hidden),
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #freeGateBox:not(.hidden),
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #freeRegisterBox:not(.hidden){
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* Registration controls must follow the active registration state only. */
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #registerBox.hidden .formGroup,
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #registerBox.hidden input,
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #registerBox.hidden select,
body.hoa-public-auth.hoa-student-auth #hoaStudentLoginHost #registerBox.hidden button{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
}


/* V6.0.44 — JavaScript source must never be rendered as page content. */
html script { display:none !important; visibility:hidden !important; }


/* HOA PUBLIC SOCIAL FOOTER — single authoritative base styles. */
/* V6.0.123 — Refined public bottom bar; social logos use their actual brand colours. */
#hoaFrontSocialFooter.hoa-front-social-footer{
  display:block !important;
  width:100% !important;
  margin:38px 0 0 !important;
  padding:14px 18px !important;
  background:#0b2341 !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 -6px 22px rgba(8,26,49,.14) !important;
  position:relative !important;
  z-index:20 !important;
}
#hoaFrontSocialFooter .hoa-v619-social-bar{
  width:min(1180px,100%) !important;
  min-height:66px !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
}
#hoaFrontSocialFooter .hoa-v619-brand{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:220px !important;
}
#hoaFrontSocialFooter .hoa-v619-brand img{
  width:42px !important;height:42px !important;object-fit:contain !important;
  border-radius:10px !important;background:#fff !important;padding:3px !important;
}
#hoaFrontSocialFooter .hoa-v619-brand-name{
  color:#fff !important;font-size:15px !important;font-weight:900 !important;line-height:1.1 !important;
}
#hoaFrontSocialFooter .hoa-v619-brand-tag{
  color:rgba(255,255,255,.68) !important;font-size:10px !important;margin-top:3px !important;
}
#hoaFrontSocialFooter .hoa-v619-actions{
  display:flex !important;align-items:center !important;justify-content:flex-end !important;
  gap:7px !important;flex-wrap:wrap !important;
}
#hoaFrontSocialFooter .hoa-v619-social,
#hoaFrontSocialFooter .hoa-v619-admin{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  gap:7px !important;height:38px !important;min-height:38px !important;
  padding:0 12px !important;border-radius:10px !important;
  color:#fff !important;text-decoration:none !important;
  background:rgba(255,255,255,.075) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  font:800 11px/1 Arial,sans-serif !important;
  cursor:pointer !important;white-space:nowrap !important;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease !important;
}
#hoaFrontSocialFooter .hoa-v619-social:hover,
#hoaFrontSocialFooter .hoa-v619-admin:hover{
  transform:translateY(-2px) !important;
  background:rgba(255,255,255,.13) !important;
  border-color:rgba(255,255,255,.28) !important;
  box-shadow:0 7px 18px rgba(0,0,0,.18) !important;
}
#hoaFrontSocialFooter .hoa-v619-social svg,
#hoaFrontSocialFooter .hoa-v619-admin svg{
  width:19px !important;height:19px !important;display:block !important;
  fill:currentColor !important;
}
/* Actual platform brand colours for the logos. */
#hoaFrontSocialFooter .hoa-v619-social:nth-child(1) svg{color:#FF0000 !important}
#hoaFrontSocialFooter .hoa-v619-social:nth-child(2) svg{color:#229ED9 !important}
#hoaFrontSocialFooter .hoa-v619-social:nth-child(3) svg{color:#1877F2 !important}
#hoaFrontSocialFooter .hoa-v619-social:nth-child(4) svg{color:#25D366 !important}
#hoaFrontSocialFooter .hoa-v619-admin{
  background:#173f6b !important;
  border-color:rgba(255,255,255,.30) !important;
  margin-left:4px !important;
}
#hoaFrontSocialFooter .hoa-v619-admin svg{color:#fff !important}
@media(max-width:800px){
  #hoaFrontSocialFooter .hoa-v619-social-bar{flex-direction:column !important;padding:5px 0 !important}
  #hoaFrontSocialFooter .hoa-v619-brand{justify-content:center !important}
  #hoaFrontSocialFooter .hoa-v619-actions{justify-content:center !important}
}
@media(max-width:500px){
  #hoaFrontSocialFooter .hoa-v619-actions{width:100% !important;display:grid !important;grid-template-columns:repeat(2,1fr) !important}
  #hoaFrontSocialFooter .hoa-v619-social,#hoaFrontSocialFooter .hoa-v619-admin{width:100% !important}
  #hoaFrontSocialFooter .hoa-v619-admin{margin-left:0 !important}
}

/* Native platform colours for the social icons. */
/* V6.0.123 — original brand colours for social icons */
#hoaFrontSocialFooter .hoa-v619-social[data-platform="youtube"] svg,
#hoaFrontSocialFooter .hoa-v619-social[aria-label="YouTube"] svg{
  color:#FF0000 !important;
  fill:currentColor !important;
}
#hoaFrontSocialFooter .hoa-v619-social[data-platform="telegram"] svg,
#hoaFrontSocialFooter .hoa-v619-social[aria-label="Telegram"] svg{
  color:#229ED9 !important;
  fill:currentColor !important;
}
#hoaFrontSocialFooter .hoa-v619-social[data-platform="facebook"] svg,
#hoaFrontSocialFooter .hoa-v619-social[aria-label="Facebook"] svg{
  color:#1877F2 !important;
  fill:currentColor !important;
}
#hoaFrontSocialFooter .hoa-v619-social[data-platform="whatsapp"] svg,
#hoaFrontSocialFooter .hoa-v619-social[aria-label="WhatsApp"] svg{
  color:#25D366 !important;
  fill:currentColor !important;
}


/* =========================================================
   HOA GLOBAL FOOTER — single authoritative style
   The footer stays in normal document flow and is never moved
   into a constrained student/login container.
   ========================================================= */
#hoaProfessionalFooter{
  width:100vw;
  max-width:none;
  margin:22px 0 0 calc(50% - 50vw);
  padding:24px 24px 12px;
  box-sizing:border-box;
  background:linear-gradient(180deg,#0b2f6b 0%,#082653 100%);
  color:#fff;
  border-top:2px solid #f2b705;
  border-radius:18px 18px 0 0;
  box-shadow:0 -6px 24px rgba(10,35,70,.07);
}
#hoaProfessionalFooter .hoa-footer-inner{
  width:min(1120px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.45fr 1.15fr 1.25fr 1.15fr;
  gap:24px;
  align-items:start;
}
#hoaProfessionalFooter .hoa-footer-about p{
  margin:6px 0 0;
  max-width:270px;
  color:rgba(255,255,255,.76);
  font-size:11px;
  line-height:1.55;
}
#hoaProfessionalFooter .hoa-footer-brand-name{
  color:#fff;
  font-size:18px;
  font-weight:800;
  letter-spacing:.45px;
}
#hoaProfessionalFooter .hoa-footer-tagline{
  margin-top:4px;
  color:rgba(255,255,255,.76);
  font-size:11px;
  font-weight:700;
}
#hoaProfessionalFooter .hoa-footer-heading{
  margin:0 0 6px;
  color:#f2b705;
  font-size:10px;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;
}
#hoaProfessionalFooter .hoa-footer-links{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
}
#hoaProfessionalFooter .hoa-footer-links a,
#hoaProfessionalFooter .hoa-footer-contact a{
  color:rgba(255,255,255,.94);
  text-decoration:none;
  font-size:11px;
  font-weight:700;
}
#hoaProfessionalFooter .hoa-footer-links a:hover,
#hoaProfessionalFooter .hoa-footer-links a:focus-visible,
#hoaProfessionalFooter .hoa-footer-contact a:hover,
#hoaProfessionalFooter .hoa-footer-contact a:focus-visible{
  color:#f2b705;
}
#hoaProfessionalFooter .hoa-career-soon{
  display:inline-flex;
  align-items:center;
  margin-left:5px;
  padding:2px 6px;
  border-radius:999px;
  background:#fff;
  color:#0b3b73;
  font-size:8px;
  font-weight:900;
  line-height:1.2;
  white-space:nowrap;
}
#hoaProfessionalFooter .hoa-footer-divider{
  width:min(1120px,100%);
  height:1px;
  margin:18px auto 9px;
  background:rgba(255,255,255,.14);
}
#hoaProfessionalFooter .hoa-footer-bottom{
  width:min(1120px,100%);
  margin:0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  text-align:center;
  color:rgba(255,255,255,.66);
  font-size:10px;
  line-height:1.45;
}
#hoaProfessionalFooter .hoa-footer-developer{color:rgba(255,255,255,.78);}
@media(max-width:760px){
  #hoaProfessionalFooter{
    margin-top:16px;
    padding:22px 16px 12px;
    border-radius:16px 16px 0 0;
  }
  #hoaProfessionalFooter .hoa-footer-inner{
    grid-template-columns:1fr 1fr;
    gap:18px 16px;
  }
  #hoaProfessionalFooter .hoa-footer-about p{max-width:none;}
  #hoaProfessionalFooter .hoa-footer-links{gap:6px;}
  #hoaProfessionalFooter .hoa-footer-bottom{gap:4px 8px;}
}
@media(max-width:480px){
  #hoaProfessionalFooter .hoa-footer-inner{grid-template-columns:1fr;}
  #hoaProfessionalFooter .hoa-footer-links{align-items:flex-start;}
  #hoaProfessionalFooter .hoa-footer-bottom{flex-direction:column;gap:2px;}
}



/* =========================================================
   HOA V6.2.0 — GLOBAL DESIGN SYSTEM
   Feature owner: CORE / UI SYSTEM
   Future module: css/style.css
   Non-destructive visual layer; functional styles remain intact.
   ========================================================= */
:root{
  --hoa-blue-950:#071a33;
  --hoa-blue-900:#0b2a52;
  --hoa-blue-800:#0f3b73;
  --hoa-blue-700:#1556a0;
  --hoa-blue-600:#1d6dcc;
  --hoa-blue-500:#2d83e6;
  --hoa-gold-700:#a87308;
  --hoa-gold-600:#c48a10;
  --hoa-gold-500:#e0a82e;
  --hoa-gold-400:#f0bf4c;
  --hoa-bg:#f4f7fb;
  --hoa-surface:#ffffff;
  --hoa-surface-2:#eef3f9;
  --hoa-text:#122033;
  --hoa-muted:#5d6b7d;
  --hoa-border:#d9e1ec;
  --hoa-shadow-sm:0 2px 8px rgba(7,26,51,.07);
  --hoa-shadow-md:0 10px 28px rgba(7,26,51,.11);
  --hoa-shadow-lg:0 18px 45px rgba(7,26,51,.15);
  --hoa-radius-sm:8px;
  --hoa-radius-md:12px;
  --hoa-radius-lg:18px;
  --hoa-radius-xl:24px;
  --hoa-ease:cubic-bezier(.2,.7,.2,1);
  --hoa-fast:160ms;
  --hoa-normal:240ms;
}
html[data-theme="dark"]{
  --hoa-bg:#08111f;
  --hoa-surface:#0e1b2d;
  --hoa-surface-2:#14243a;
  --hoa-text:#edf4ff;
  --hoa-muted:#a9b7c9;
  --hoa-border:#263a53;
  --hoa-shadow-sm:0 2px 8px rgba(0,0,0,.24);
  --hoa-shadow-md:0 10px 28px rgba(0,0,0,.30);
  --hoa-shadow-lg:0 18px 45px rgba(0,0,0,.38);
}
html,body{scroll-behavior:smooth}
body{
  background-color:var(--hoa-bg);
  color:var(--hoa-text);
  transition:background-color var(--hoa-normal) var(--hoa-ease),color var(--hoa-normal) var(--hoa-ease);
}
/* Theme-aware surfaces without overriding purpose-specific colors. */
.card,.panel,.modal-content,.modal-dialog,.dashboard-card,.stat-card,.content-card,.course-card,.test-card,.batch-card,.admin-card,.section-card,.table-card{
  transition:background-color var(--hoa-normal) var(--hoa-ease),border-color var(--hoa-normal) var(--hoa-ease),box-shadow var(--hoa-normal) var(--hoa-ease),transform var(--hoa-fast) var(--hoa-ease);
}
/* Common controls */
button,.btn,[role="button"]{transition:transform var(--hoa-fast) var(--hoa-ease),box-shadow var(--hoa-fast) var(--hoa-ease),background-color var(--hoa-fast) var(--hoa-ease),border-color var(--hoa-fast) var(--hoa-ease),color var(--hoa-fast) var(--hoa-ease)}
button:hover,.btn:hover,[role="button"]:hover{transform:translateY(-1px)}
button:active,.btn:active,[role="button"]:active{transform:translateY(0)}
input,select,textarea{transition:border-color var(--hoa-fast) var(--hoa-ease),box-shadow var(--hoa-fast) var(--hoa-ease),background-color var(--hoa-fast) var(--hoa-ease),color var(--hoa-fast) var(--hoa-ease)}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(29,109,204,.14)}
/* Blue/gold utility classes for future components. */
.hoa-blue{color:var(--hoa-blue-700)!important}.hoa-gold{color:var(--hoa-gold-600)!important}
.hoa-surface{background:var(--hoa-surface)!important;color:var(--hoa-text)!important;border-color:var(--hoa-border)!important}
.hoa-card-depth{box-shadow:var(--hoa-shadow-md);border:1px solid var(--hoa-border);border-radius:var(--hoa-radius-md)}
.hoa-card-depth:hover{box-shadow:var(--hoa-shadow-lg);transform:translateY(-2px)}
.hoa-gold-accent{border-top:3px solid var(--hoa-gold-500)!important}
.hoa-theme-transition,.hoa-theme-transition *{transition:background-color var(--hoa-normal) var(--hoa-ease),color var(--hoa-normal) var(--hoa-ease),border-color var(--hoa-normal) var(--hoa-ease)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media (max-width:768px){
  .hoa-card-depth:hover{transform:none}
  body{overflow-x:hidden}
}


/* =========================================================
   HOA V6.2.2 — STUDENT UI POLISH
   Future module: css/style.css / js/student-ui.js
   Visual-only layer; existing student functionality preserved.
   ========================================================= */
:root {
  --hoa-student-card-radius: 18px;
  --hoa-student-card-shadow: 0 10px 28px rgba(15, 45, 85, .10);
  --hoa-student-card-shadow-hover: 0 16px 36px rgba(15, 45, 85, .16);
}

/* Student-facing cards and content surfaces */
.student-dashboard .card, .student-dashboard .course-card, .student-dashboard .test-card,
.student-dashboard .content-card, .student-dashboard .result-card, .student-dashboard .note-card,
.student-dashboard .video-card, #studentDashboard .card, #studentDashboard .course-card,
#studentDashboard .test-card, #studentDashboard .content-card, #studentDashboard .result-card,
#studentDashboard .note-card, #studentDashboard .video-card {
  border-radius: var(--hoa-student-card-radius);
  box-shadow: var(--hoa-student-card-shadow);
  border: 1px solid var(--hoa-border, rgba(15, 45, 85, .10));
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.student-dashboard .card:hover, .student-dashboard .course-card:hover, .student-dashboard .test-card:hover,
.student-dashboard .content-card:hover, .student-dashboard .result-card:hover, .student-dashboard .note-card:hover,
.student-dashboard .video-card:hover, #studentDashboard .card:hover, #studentDashboard .course-card:hover,
#studentDashboard .test-card:hover, #studentDashboard .content-card:hover, #studentDashboard .result-card:hover,
#studentDashboard .note-card:hover, #studentDashboard .video-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--hoa-student-card-shadow-hover);
  border-color: var(--hoa-gold, #d4af37);
}

/* Common student action buttons */
.student-dashboard button, #studentDashboard button {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.student-dashboard button:hover, #studentDashboard button:hover { transform: translateY(-1px); }
.student-dashboard button:active, #studentDashboard button:active { transform: translateY(0); }

/* Student navigation / tabs */
.student-dashboard nav a, .student-dashboard nav button, #studentDashboard nav a, #studentDashboard nav button {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
}

/* Status badges */
.student-dashboard .badge, .student-dashboard .status-badge, #studentDashboard .badge, #studentDashboard .status-badge {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .01em;
}

/* Responsive student grids */
@media (max-width: 900px) {
  .student-dashboard .grid, #studentDashboard .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .student-dashboard .grid, #studentDashboard .grid { grid-template-columns: 1fr; }
  .student-dashboard .card, .student-dashboard .course-card, .student-dashboard .test-card,
  .student-dashboard .content-card, .student-dashboard .result-card, .student-dashboard .note-card,
  .student-dashboard .video-card, #studentDashboard .card, #studentDashboard .course-card,
  #studentDashboard .test-card, #studentDashboard .content-card, #studentDashboard .result-card,
  #studentDashboard .note-card, #studentDashboard .video-card { border-radius: 14px; }
}

/* Prevent decorative hover movement for touch/reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .student-dashboard .card, .student-dashboard .course-card, .student-dashboard .test-card,
  .student-dashboard .content-card, .student-dashboard .result-card, .student-dashboard .note-card,
  .student-dashboard .video-card, #studentDashboard .card, #studentDashboard .course-card,
  #studentDashboard .test-card, #studentDashboard .content-card, #studentDashboard .result-card,
  #studentDashboard .note-card, #studentDashboard .video-card, .student-dashboard button, #studentDashboard button {
    transition: none !important; transform: none !important;
  }
}


/* =========================================================
   HOA V6.2.3 — FINAL RESPONSIVE SYSTEM
   Owner: CORE / UI SYSTEM
   Future module: css/style.css
   No database/RPC dependencies.
   ========================================================= */
:root{--hoa-touch:44px;--hoa-mobile-gap:12px;--hoa-mobile-radius:14px;}
html{overflow-x:hidden;}
body{overflow-x:hidden;max-width:100vw;}
img,video,iframe,canvas,svg{max-width:100%;}
button,input,select,textarea{max-width:100%;}

/* Shared containers */
.adminReferenceMain,.adminOnlyDashboard,#home,.studentDashboard,.dashboard-content,.content-area,.main-content{max-width:100%;min-width:0;}
.adminReferenceMain *,.adminOnlyDashboard *,#home *{box-sizing:border-box;}

/* Prevent long labels/content from breaking layouts */
.adminReferenceMain h1,.adminReferenceMain h2,.adminReferenceMain h3,.adminReferenceMain h4,
.adminOnlyDashboard h1,.adminOnlyDashboard h2,.adminOnlyDashboard h3,.adminOnlyDashboard h4,
#home h1,#home h2,#home h3,#home h4,.card-title,.test-title{overflow-wrap:anywhere;}

/* Touch targets */
@media (max-width:1023px){
  button,.btn,.authTab,.adminSectionNav button,[role="button"]{min-height:var(--hoa-touch);}
  input,select,textarea{min-height:var(--hoa-touch);}
}

/* Desktop/tablet */
@media (min-width:768px) and (max-width:1199px){
  .adminReferenceSidebar{width:210px!important;}
  .adminReferenceMain{margin-left:210px!important;width:calc(100% - 210px)!important;}
  .adminReferenceMain .grid,.adminOnlyDashboard .grid,.adminReferenceMain [style*="grid-template-columns"],.adminOnlyDashboard [style*="grid-template-columns"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* Phones */
@media (max-width:767px){
  body{font-size:14px;}
  .adminReferenceSidebar{position:fixed!important;left:0!important;right:auto!important;top:0!important;bottom:0!important;width:min(84vw,320px)!important;height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;padding:12px!important;display:flex!important;flex-direction:column!important;overflow-y:auto!important;overflow-x:hidden!important;z-index:10000!important;}
  .adminReferenceMain{margin-left:0!important;width:100%!important;padding:12px!important;min-height:100dvh!important;}
  body.admin-ui .adminReferenceMain{margin-left:0!important;}
  body.admin-ui .adminReferenceSidebar{transform:translateX(-105%);transition:transform .24s ease;box-shadow:12px 0 36px rgba(3,27,56,.22);}
  body.admin-ui.hoa-sidebar-open .adminReferenceSidebar{transform:translateX(0);} 
  body.admin-ui.hoa-sidebar-open::after{content:"";position:fixed;inset:0;background:rgba(3,27,56,.42);z-index:9999;}
  body.admin-ui .adminReferenceSidebar .adminReferenceNav,body.admin-ui .adminReferenceSidebar .adminSectionNav{width:100%;overflow-y:auto;min-height:0;}
  body.admin-ui .adminReferenceSidebar button{width:100%!important;text-align:left!important;white-space:normal!important;min-height:46px!important;padding:10px 12px!important;}
  body.admin-ui .adminReferenceSidebar .brand-logo{max-width:54px!important;height:auto!important;}
  body.admin-ui .adminReferenceMain{padding-top:70px!important;}

  /* Generic responsive grids */
  .adminReferenceMain .grid,.adminOnlyDashboard .grid,.studentDashboard .grid,
  #home .grid,.content-grid,.course-grid,.test-grid,.notes-grid,.cards-grid,
  .adminReferenceMain [style*="grid-template-columns"],
  .adminOnlyDashboard [style*="grid-template-columns"],
  #home [style*="grid-template-columns"]{grid-template-columns:1fr!important;}

  /* Flexible rows become stacks */
  .adminReferenceMain .flex,.adminOnlyDashboard .flex,.studentDashboard .flex,
  .adminReferenceMain [style*="display:flex"],.adminOnlyDashboard [style*="display:flex"]{flex-wrap:wrap;}

  /* Tables remain usable without breaking page width */
  .adminReferenceMain table,.adminOnlyDashboard table,#home table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
  .adminReferenceMain table th,.adminReferenceMain table td,.adminOnlyDashboard table th,.adminOnlyDashboard table td{min-width:110px;}

  /* Forms */
  .adminReferenceMain form,.adminOnlyDashboard form{width:100%;max-width:100%;}
  .adminReferenceMain input,.adminReferenceMain select,.adminReferenceMain textarea,
  .adminOnlyDashboard input,.adminOnlyDashboard select,.adminOnlyDashboard textarea{width:100%!important;max-width:100%!important;}
  .adminReferenceMain .form-row,.adminOnlyDashboard .form-row{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}

  /* Modal safety */
  .modal,.modal-content,.dialog,.dialog-content,[role="dialog"]{max-width:calc(100vw - 24px)!important;}
  .modal-content,.dialog-content,[role="dialog"]{max-height:calc(100dvh - 24px)!important;overflow:auto!important;}

  /* Test/question experience */
  .question-card,.test-card,.option-card{width:100%!important;max-width:100%!important;}
  .question-card{padding:14px!important;}
  .option-card, .test-option{min-height:48px!important;padding:12px!important;}

  /* Hide decorative overflow */
  .hero,.banner,.poster-container{overflow:hidden;}
  .hero img,.banner img,.poster-container img{width:100%;height:auto;object-fit:contain;}
}

/* Small phones */
@media (max-width:479px){
  .adminReferenceMain,#home{padding-left:10px!important;padding-right:10px!important;}
  .adminReferenceMain h1,#home h1{font-size:clamp(20px,6vw,28px)!important;line-height:1.15!important;}
  .adminReferenceMain h2,#home h2{font-size:clamp(18px,5.2vw,24px)!important;}
  .adminReferenceMain h3,#home h3{font-size:clamp(16px,4.8vw,20px)!important;}
  .card,.dashboard-card,.course-card,.test-card,.content-card{border-radius:var(--hoa-mobile-radius)!important;}
  button,.btn{font-size:14px!important;}
}

@media (prefers-reduced-motion:reduce){
  body.admin-ui .adminReferenceSidebar{transition:none!important;}
}


/* HOA V6.2.5 — Typography, spacing & component consistency */
:root {
  --hoa-font-sans: Arial, Helvetica, sans-serif;
  --hoa-text-xs: .72rem; --hoa-text-sm: .82rem; --hoa-text-md: .94rem; --hoa-text-lg: 1.08rem;
  --hoa-space-1: 4px; --hoa-space-2: 8px; --hoa-space-3: 12px; --hoa-space-4: 16px; --hoa-space-5: 20px; --hoa-space-6: 24px; --hoa-space-8: 32px;
  --hoa-radius-sm: 8px; --hoa-radius-md: 12px; --hoa-radius-lg: 16px;
  --hoa-control-h: 42px;
}
html, body, button, input, select, textarea { font-family: var(--hoa-font-sans); }
body { font-size: var(--hoa-text-md); line-height: 1.5; }
h1,h2,h3,h4,h5,h6 { line-height: 1.2; letter-spacing: -.015em; }
button, input, select, textarea { font-size: .94rem; }
button { min-height: 40px; }
input, select, textarea { min-height: var(--hoa-control-h); border-radius: var(--hoa-radius-sm); }
textarea { min-height: 96px; }

/* Consistent component language */
.card, .panel, .dashboard-card, .stat-card, .admin-card, .content-card, .course-card, .test-card, .mock-card, .note-card, .video-card, .result-card {
  border-radius: var(--hoa-radius-md);
}
.btn, button, .button, .action-btn, .primary-btn, .secondary-btn {
  border-radius: var(--hoa-radius-sm);
  font-weight: 600;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.badge, .status-badge, .pill, .tag { border-radius: 999px; font-size: var(--hoa-text-xs); font-weight: 700; line-height: 1.2; }

/* Better hierarchy inside management screens */
.admin-section-title, .section-title, .panel-title { margin-bottom: var(--hoa-space-3); }
.admin-section-subtitle, .section-subtitle, .panel-subtitle { font-size: var(--hoa-text-sm); line-height: 1.55; }

/* Tables: readable density without oversized rows */
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th { font-size: var(--hoa-text-xs); font-weight: 700; letter-spacing: .025em; text-transform: uppercase; }
td { font-size: var(--hoa-text-sm); vertical-align: middle; }

/* Focus visibility */
:where(button,a,input,select,textarea):focus-visible { outline: 3px solid color-mix(in srgb, var(--hoa-gold, #d4af37) 48%, transparent); outline-offset: 2px; }

/* Reusable spacing helpers for future module extraction */
.hoa-stack { display:flex; flex-direction:column; gap:var(--hoa-space-4); }
.hoa-row { display:flex; align-items:center; gap:var(--hoa-space-3); flex-wrap:wrap; }
.hoa-grid { display:grid; gap:var(--hoa-space-4); }
.hoa-muted { opacity:.72; }
.hoa-truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width: 768px) {
  body { font-size: .91rem; }
  h1 { font-size: clamp(1.45rem, 5vw, 2rem); }
  h2 { font-size: clamp(1.2rem, 4.2vw, 1.55rem); }
  h3 { font-size: 1.08rem; }
  button, .btn, .button, .action-btn { min-height: 42px; }
  input, select { min-height: 44px; }
  .hoa-row { align-items: stretch; }
}

@media (max-width: 480px) {
  body { font-size: .89rem; }
  .hoa-stack { gap:var(--hoa-space-3); }
  .hoa-grid { gap:var(--hoa-space-3); }
  td, th { font-size: .76rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}


:root{--hoa-page-max:1480px;--hoa-section-gap:24px;--hoa-panel-pad:clamp(16px,2vw,28px);--hoa-heading:clamp(1.35rem,1.8vw,2rem);--hoa-subheading:clamp(1.02rem,1.25vw,1.3rem)}
#adminOnlyDashboard,#studentOnlyDashboard{position:relative}
#adminOnlyDashboard h1,#studentOnlyDashboard h1{font-size:clamp(1.55rem,2.5vw,2.35rem);letter-spacing:-.025em;line-height:1.12}
#adminOnlyDashboard h2,#studentOnlyDashboard h2{font-size:var(--hoa-heading);letter-spacing:-.018em;line-height:1.2}
#adminOnlyDashboard h3,#studentOnlyDashboard h3{font-size:var(--hoa-subheading);line-height:1.25}
#adminOnlyDashboard .card,#studentOnlyDashboard .card,#adminOnlyDashboard .stat-card,#studentOnlyDashboard .stat-card,#adminOnlyDashboard .panel,#studentOnlyDashboard .panel{border-radius:18px;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
#adminOnlyDashboard .card:hover,#studentOnlyDashboard .card:hover,#adminOnlyDashboard .stat-card:hover,#studentOnlyDashboard .stat-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(15,43,88,.12)}
#adminOnlyDashboard .dashboard-grid,#studentOnlyDashboard .dashboard-grid{gap:var(--hoa-section-gap)}
#adminOnlyDashboard .section-header,#studentOnlyDashboard .section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
#adminOnlyDashboard .section-header p,#studentOnlyDashboard .section-header p{margin:4px 0 0;opacity:.72}
#adminOnlyDashboard .stat-value,#studentOnlyDashboard .stat-value{font-variant-numeric:tabular-nums;letter-spacing:-.035em}
#adminOnlyDashboard button,#studentOnlyDashboard button{min-height:40px}
#adminOnlyDashboard input,#adminOnlyDashboard select,#adminOnlyDashboard textarea,#studentOnlyDashboard input,#studentOnlyDashboard select,#studentOnlyDashboard textarea{font-size:16px}
@media(max-width:767px){#adminOnlyDashboard .section-header,#studentOnlyDashboard .section-header{align-items:flex-start;flex-direction:column}#adminOnlyDashboard .dashboard-grid,#studentOnlyDashboard .dashboard-grid{grid-template-columns:1fr!important}#adminOnlyDashboard .card,#studentOnlyDashboard .card{border-radius:15px}}
@media(prefers-reduced-motion:reduce){#adminOnlyDashboard .card,#studentOnlyDashboard .card,#adminOnlyDashboard .stat-card,#studentOnlyDashboard .stat-card{transition:none!important}}


/* V6.0.53 — Fresh paid-student dashboard branding. Legacy branding patches removed. */
#studentOnlyDashboard .paidStudentDashboardBrand{
  width:100% !important;
  min-height:128px !important;
  margin:0 auto 18px !important;
  padding:18px 28px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
  background:#fff !important;
  border:1px solid #d8e3ef !important;
  border-radius:16px !important;
  box-shadow:0 5px 18px rgba(15,35,60,.06) !important;
  text-align:center !important;
}
#studentOnlyDashboard .paidStudentDashboardBrandMark{
  width:76px !important;
  height:76px !important;
  flex:0 0 76px !important;
  display:grid !important;
  place-items:center !important;
}
#studentOnlyDashboard .paidStudentDashboardBrandMark img{
  width:76px !important;
  height:76px !important;
  display:block !important;
  object-fit:contain !important;
}
#studentOnlyDashboard .paidStudentDashboardBrandText{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
  text-align:center !important;
}
#studentOnlyDashboard .paidStudentDashboardTitle{
  color:#123b67 !important;
  font-size:31px !important;
  line-height:1.08 !important;
  font-weight:850 !important;
  letter-spacing:-.025em !important;
  white-space:nowrap !important;
  text-align:center !important;
}
#studentOnlyDashboard .paidStudentDashboardSubtitle{
  margin-top:6px !important;
  color:#718096 !important;
  font-size:13px !important;
  line-height:1.25 !important;
  white-space:nowrap !important;
  text-align:center !important;
}
@media(max-width:760px){
  #studentOnlyDashboard .paidStudentDashboardBrand{
    min-height:108px !important;
    padding:14px 18px !important;
    gap:12px !important;
  }
  #studentOnlyDashboard .paidStudentDashboardBrandMark,
  #studentOnlyDashboard .paidStudentDashboardBrandMark img{
    width:62px !important;
    height:62px !important;
    flex-basis:62px !important;
  }
  #studentOnlyDashboard .paidStudentDashboardTitle{font-size:24px !important;}
  #studentOnlyDashboard .paidStudentDashboardSubtitle{font-size:11px !important;}
}
@media(max-width:480px){
  #studentOnlyDashboard .paidStudentDashboardBrand{
    min-height:96px !important;
    padding:12px 10px !important;
    gap:9px !important;
  }
  #studentOnlyDashboard .paidStudentDashboardBrandMark,
  #studentOnlyDashboard .paidStudentDashboardBrandMark img{
    width:52px !important;
    height:52px !important;
    flex-basis:52px !important;
  }
  #studentOnlyDashboard .paidStudentDashboardTitle{font-size:20px !important;}
  #studentOnlyDashboard .paidStudentDashboardSubtitle{font-size:10px !important;}
}


/* HOA V6.0.123 — UI/UX production polish. Layout-only: no workflow changes. */
:root{
  --hoa-bg:#f5f8fc;--hoa-surface:#fff;--hoa-text:#172033;--hoa-muted:#66758a;
  --hoa-border:#dbe4ef;--hoa-primary:#155eef;--hoa-primary-dark:#0d47b8;
  --hoa-shadow:0 10px 30px rgba(21,46,82,.08);--hoa-radius:14px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{background:var(--hoa-bg);color:var(--hoa-text);overflow-x:hidden;line-height:1.45;text-rendering:optimizeLegibility;}
*,*::before,*::after{box-sizing:border-box;}
img{max-width:100%;height:auto;}
button,input,select,textarea{font:inherit;}
button{min-height:40px;touch-action:manipulation;}
button:disabled{cursor:not-allowed!important;opacity:.55;}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(21,94,239,.28)!important;outline-offset:2px!important;}
input,select,textarea{max-width:100%;}
textarea{resize:vertical;}
#authScreen,#home,#exam,#result{width:100%;max-width:100%;}
#authScreen .loginBox,#authScreen .freeGateBox,#authScreen .freeRegisterBox,#authScreen .registerBox{max-width:100%;}
#home .studentOnlyDashboard,#home .adminOnlyDashboard{width:100%;max-width:100%;}
#studentOnlyDashboard,#adminOnlyDashboard{min-width:0;}
#studentTests,#candidateResultsList,#studentAdminList,#paidStudentAdminList,#freeStudentAdminList,#testLibrary,#adminResultList{min-width:0;}
/* Prevent long dynamic content from creating horizontal scroll. */
.questionText,.reviewQuestionText,.card,.panel,.modal,.modal-content,.table-wrap,.table-responsive,.adminSection,.dashboard-card{overflow-wrap:anywhere;word-break:normal;}
/* Tables remain usable on small screens. */
#testWiseTable{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
#testWiseTable table{min-width:620px;width:100%;}
/* Consistent form controls without replacing existing theme. */
input:not([type="checkbox"]):not([type="radio"]),select,textarea{min-height:42px;border-radius:9px;}
textarea{min-height:100px;}
/* Modal layering and safe mobile sizing. */
#hoaDevConsoleModal,#missionSubmitConfirm,#testInstructionsModal{max-width:100vw;}
#hoaDevConsoleModal iframe{display:block;width:100%;height:100%;border:0;background:#fff;}
/* Exam controls: preserve existing actions while making touch targets reliable. */
#exam button{touch-action:manipulation;}
#exam .options button{min-height:48px;text-align:left;}
#exam .palette button{min-width:38px;min-height:38px;}
/* Fixed/floating elements should respect safe areas on modern phones. */
#examSubmitTestButton,#ui21Submit{padding-bottom:max(10px,env(safe-area-inset-bottom));}
@supports(padding:max(0px)){
  body{padding-bottom:max(0px,env(safe-area-inset-bottom));}
}
/* Avoid accidental text selection on controls, but preserve it for questions/results. */
button,.btn,.tab,[role="button"]{-webkit-user-select:none;user-select:none;}
/* Responsive desktop/tablet */
@media (max-width:1100px){
  .dashboard-grid,.admin-grid,.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .content-grid,.two-col,.form-grid{grid-template-columns:minmax(0,1fr)!important;}
  #home .adminOnlyDashboard .panel,#home .studentOnlyDashboard .panel{min-width:0;}
}
/* Mobile: stack instead of shrinking controls below usable touch size. */
@media (max-width:700px){
  body{font-size:14px;}
  .dashboard-grid,.admin-grid,.stats-grid,.cards,.grid,.row,.form-grid,.two-col,.content-grid{grid-template-columns:1fr!important;}
  .toolbar,.actions,.header-actions,.admin-actions{flex-wrap:wrap!important;gap:8px!important;}
  .toolbar>*,.actions>*,.header-actions>*{max-width:100%;}
  button,.btn{min-height:44px;}
  input:not([type="checkbox"]):not([type="radio"]),select{min-height:44px;}
  #home .panel,#home .card,#authScreen .loginBox,#authScreen .freeGateBox,#authScreen .freeRegisterBox,#authScreen .registerBox{border-radius:12px;}
  #testWiseTable{margin-inline:-2px;max-width:calc(100% + 4px);}
  #testWiseTable table{font-size:12px;}
  #hoaDevConsoleModal{padding:0!important;}
  #hoaDevConsoleModal iframe{min-height:70vh;}
  #exam .examMeta{gap:6px;flex-wrap:wrap;}
  #exam .questionText{font-size:clamp(18px,5vw,24px);line-height:1.45;}
  #exam .options{gap:9px;}
  #exam .palette{overflow-x:auto;display:flex;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:4px;}
  #exam .palette button{flex:0 0 auto;}
  #missionSubmitConfirm .modal-content,#testInstructionsModal .modal-content{width:min(94vw,560px)!important;max-height:90vh;overflow:auto;}
}
@media (max-width:420px){
  .hide-on-small{display:none!important;}
  #authScreen{padding-inline:10px;}
  #exam{padding-inline:8px;}
  #exam .questionText{font-size:18px;}
  #exam .options button{font-size:14px;padding:12px 10px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;}
}
@media (forced-colors:active){
  button,input,select,textarea{forced-color-adjust:auto;}
  button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid CanvasText!important;}
}
#hoa-v601-skip-link{position:fixed;left:10px;top:10px;z-index:2147483000;transform:translateY(-150%);padding:9px 12px;border-radius:8px;background:#172033;color:#fff;text-decoration:none;font-weight:800;box-shadow:var(--hoa-shadow)}#hoa-v601-skip-link:focus{transform:translateY(0);}


/* V6.0.123 — poster cards must never overlap the Featured Posters heading. */
#hoaV643PosterSection .hoa-v648-section-head{
  position:relative !important;
  z-index:50 !important;
}
#hoaV643PosterWrap{
  position:relative !important;
  z-index:2 !important;
  isolation:isolate !important;
}
#hoaV643PosterWrap .hoa643-poster-slide,
#hoaV643PosterWrap .hoa643-poster-slide[style]{
  top:50% !important;
  height:calc(100% - 36px) !important;
  max-height:calc(100% - 36px) !important;
  aspect-ratio:auto !important;
}
#hoaV643PosterWrap .hoa643-poster-slide img{
  object-fit:contain !important;
  object-position:center !important;
}


.hoa-v648-poster-section,.hoa-v648-student-options{margin:28px auto;max-width:1180px;padding:30px;border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(245,248,252,.98));border:1px solid rgba(15,23,42,.08);box-shadow:0 18px 50px rgba(15,23,42,.08)}
.hoa-v648-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}.hoa-v648-section-head.centered{display:block;text-align:center}.hoa-v648-kicker{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.68;margin-bottom:6px}.hoa-v648-section-head h2{margin:0;font-size:clamp(24px,3vw,34px);line-height:1.15}.hoa-v648-section-head p{margin:8px 0 0;color:#64748b}.hoa-v648-live-badge{white-space:nowrap;padding:8px 12px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:11px;font-weight:800}.hoa-v648-poster-wrap{min-height:280px;display:grid;place-items:center;border-radius:18px;overflow:hidden;background:#eef2f7}.hoa-v648-poster-wrap .hoa643-poster-slide{display:none;width:100%;height:100%}.hoa-v648-poster-wrap .hoa643-poster-slide.active{display:block}.hoa-v648-poster-wrap img{display:block;width:100%;max-height:520px;object-fit:contain;margin:auto}.hoa-v648-poster-nav{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px}.hoa-v648-poster-nav button{border:0;width:36px;height:36px;border-radius:50%;cursor:pointer;background:#0f172a;color:#fff;font-size:20px}.hoa-v648-poster-nav .hoa643-dot{width:8px;height:8px;border-radius:50%;background:#cbd5e1;cursor:pointer}.hoa-v648-poster-nav .hoa643-dot.active{background:#0f172a;transform:scale(1.25)}.hoa-v648-option-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.hoa-v648-option-card{appearance:none;text-align:left;border:1px solid rgba(15,23,42,.09);border-radius:20px;background:#fff;padding:24px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.hoa-v648-option-card:hover{transform:translateY(-3px);box-shadow:0 14px 35px rgba(15,23,42,.1);border-color:rgba(29,78,216,.25)}.hoa-v648-option-icon{font-size:30px;display:block;margin-bottom:14px}.hoa-v648-option-title{display:block;font-size:20px;font-weight:800;color:#0f172a}.hoa-v648-option-copy{display:block;margin-top:7px;color:#64748b;line-height:1.5;font-size:14px}.hoa-v648-option-link{display:block;margin-top:18px;font-size:12px;font-weight:800;letter-spacing:.08em;color:#1d4ed8}.hoa-v648-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px}.hoa-v648-modal.hidden{display:none}.hoa-v648-modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.62);backdrop-filter:blur(4px)}.hoa-v648-modal-card{position:relative;width:min(720px,100%);padding:30px;border-radius:24px;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.25)}.hoa-v648-modal-close{position:absolute;right:16px;top:12px;border:0;background:transparent;font-size:30px;cursor:pointer;color:#64748b}.hoa-v648-free-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}.hoa-v648-free-card{border:1px solid #e2e8f0;background:#f8fafc;border-radius:16px;padding:20px;text-align:left;cursor:pointer}.hoa-v648-free-card span{font-size:26px;display:block;margin-bottom:10px}.hoa-v648-free-card b,.hoa-v648-free-card small{display:block}.hoa-v648-free-card small{color:#64748b;margin-top:6px;line-height:1.4}@media(max-width:760px){.hoa-v648-poster-section,.hoa-v648-student-options{margin:18px 12px;padding:20px;border-radius:18px}.hoa-v648-section-head{display:block}.hoa-v648-live-badge{display:inline-block;margin-top:12px}.hoa-v648-option-grid,.hoa-v648-free-grid{grid-template-columns:1fr}.hoa-v648-poster-wrap{min-height:190px}.hoa-v648-modal-card{padding:24px 18px}}


/* HOA V6.0.4 — Student Dashboard authoritative information architecture. */
#studentOnlyDashboard .candidateSectionNav{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:5px!important;margin-bottom:14px!important;}
#studentOnlyDashboard .candidateSectionNav button{min-height:48px!important;border-radius:10px!important;background:#fff!important;color:#173f6b!important;border:1px solid #d7e1ec!important;font-weight:850!important;}
#studentOnlyDashboard .candidateSectionNav button.active{background:#173f6b!important;color:#fff!important;border-color:#173f6b!important;box-shadow:0 4px 12px rgba(23,63,107,.18)!important;}
#studentOnlyDashboard .hoa-student-main-panel{display:none;}
#studentOnlyDashboard .hoa-student-main-panel.active{display:block;}
#studentOnlyDashboard .hoa-student-subnav{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;margin-bottom:12px;background:#fff;border:1px solid #dbe4ef;border-radius:12px;box-shadow:0 4px 14px rgba(15,23,42,.05);}
#studentOnlyDashboard .hoa-student-subnav button{min-height:42px;border:1px solid transparent;border-radius:9px;background:#f7f9fc;color:#173f6b;font-weight:850;cursor:pointer;}
#studentOnlyDashboard .hoa-student-subnav button.active{background:#173f6b;color:#fff;}
#studentOnlyDashboard .hoa-student-panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 12px;padding:0 2px;}
#studentOnlyDashboard .hoa-student-panel-head h3{margin:0;color:#123f73;font-size:18px;}
#studentOnlyDashboard .hoa-student-panel-head p{margin:4px 0 0;color:#64748b;font-size:12px;}
#studentOnlyDashboard .hoa-student-count{padding:6px 10px;border-radius:999px;background:#fff7dc;color:#8a5a00;border:1px solid #f0d27a;font-size:10px;font-weight:900;white-space:nowrap;}
#studentOnlyDashboard .hoa-student-course-list{display:grid;gap:10px;}
#studentOnlyDashboard .hoa-student-course-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:16px;background:#fff;border:1px solid #dce5ef;border-radius:14px;box-shadow:0 5px 18px rgba(16,35,61,.05);}
#studentOnlyDashboard .hoa-student-course-icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:#eef4fb;font-size:22px;}
#studentOnlyDashboard .hoa-student-course-body{min-width:0;}
#studentOnlyDashboard .hoa-student-eyebrow{display:block;font-size:9px;letter-spacing:.1em;font-weight:900;color:#55718f;margin-bottom:3px;}
#studentOnlyDashboard .hoa-student-course-body h3{margin:0;color:#123f73;font-size:15px;}
#studentOnlyDashboard .hoa-student-code{font-size:10px;color:#64748b;margin-top:2px;}
#studentOnlyDashboard .hoa-student-course-body p{margin:7px 0 8px;color:#64748b;font-size:11px;line-height:1.45;}
#studentOnlyDashboard .hoa-student-course-meta{display:flex;gap:6px;flex-wrap:wrap;}
#studentOnlyDashboard .hoa-student-course-meta span{padding:4px 7px;border-radius:999px;background:#f5f8fc;color:#48637f;font-size:9px;font-weight:800;}
#studentOnlyDashboard .hoa-student-open-course{white-space:nowrap;}
#studentOnlyDashboard .hoa-student-empty{padding:42px 18px;text-align:center;background:#fff;border:1px dashed #cfdbe8;border-radius:14px;}
#studentOnlyDashboard .hoa-student-empty-icon{font-size:30px;margin-bottom:7px;}
#studentOnlyDashboard .hoa-student-empty h3{margin:0;color:#173f6b;font-size:16px;}
#studentOnlyDashboard .hoa-student-empty p{margin:6px 0 0;color:#64748b;font-size:12px;}
#studentOnlyDashboard .hoa-student-course-hero{padding:18px;border-radius:16px;background:linear-gradient(135deg,#173f6b,#0f3156);color:#fff;margin-bottom:10px;}
#studentOnlyDashboard .hoa-student-back{border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:8px;padding:7px 10px;font-weight:800;cursor:pointer;margin-bottom:14px;}
#studentOnlyDashboard .hoa-student-course-hero h2{margin:0;font-size:21px;}
#studentOnlyDashboard .hoa-student-course-hero small{opacity:.75;}
#studentOnlyDashboard .hoa-student-course-hero p{margin:7px 0 10px;font-size:11px;line-height:1.5;opacity:.92;}
#studentOnlyDashboard .hoa-student-course-pills{display:flex;gap:6px;flex-wrap:wrap;}
#studentOnlyDashboard .hoa-student-course-pills span{padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.12);font-size:9px;font-weight:800;}
#studentOnlyDashboard .hoa-student-course-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:5px;background:#fff;border:1px solid #dbe4ef;border-radius:12px;margin-bottom:12px;}
#studentOnlyDashboard .hoa-student-course-tabs button{min-height:42px;border:1px solid transparent;border-radius:9px;background:#fff;color:#173f6b;font-weight:850;font-size:11px;cursor:pointer;}
#studentOnlyDashboard .hoa-student-course-tabs button.active{background:#173f6b;color:#fff;}
#studentOnlyDashboard .hoa-student-overview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
#studentOnlyDashboard .hoa-student-info-card{padding:18px;background:#fff;border:1px solid #dce5ef;border-radius:13px;display:flex;flex-direction:column;gap:6px;}
#studentOnlyDashboard .hoa-student-info-card span{font-size:22px;}
#studentOnlyDashboard .hoa-student-info-card b{color:#173f6b;font-size:13px;}
#studentOnlyDashboard .hoa-student-info-card small{color:#64748b;line-height:1.45;}
#studentOnlyDashboard .hoa-student-video-list,#studentOnlyDashboard .hoa-student-material-list{display:grid;gap:9px;}
#studentOnlyDashboard .hoa-student-video-card,#studentOnlyDashboard .hoa-student-material-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:13px;background:#fff;border:1px solid #dce5ef;border-radius:12px;}
#studentOnlyDashboard .hoa-student-video-thumb{width:64px;height:42px;border-radius:8px;background:#102d50;color:#fff;display:grid;place-items:center;font-size:16px;}
#studentOnlyDashboard .hoa-student-video-main h3,#studentOnlyDashboard .hoa-student-material-card h3{margin:0;color:#173f6b;font-size:13px;}
#studentOnlyDashboard .hoa-student-video-main p,#studentOnlyDashboard .hoa-student-material-card p{margin:4px 0 0;color:#64748b;font-size:10px;}
#studentOnlyDashboard .hoa-student-player-slot{grid-column:1/-1;width:100%;}#studentOnlyDashboard .hoa-student-player-slot:empty{display:none;}
#studentOnlyDashboard .hoa-student-material-icon{width:42px;height:42px;border-radius:9px;background:#fff7dc;display:grid;place-items:center;font-size:20px;}
@media(max-width:700px){
 #studentOnlyDashboard .candidateSectionNav{grid-template-columns:1fr 1fr!important;}
 #studentOnlyDashboard .hoa-student-course-card{grid-template-columns:auto 1fr;}
 #studentOnlyDashboard .hoa-student-open-course{grid-column:1/-1;width:100%;}#studentOnlyDashboard .hoa-student-course-tabs{grid-template-columns:1fr 1fr;}#studentOnlyDashboard .hoa-student-overview-grid{grid-template-columns:1fr;}#studentOnlyDashboard .hoa-student-video-card,#studentOnlyDashboard .hoa-student-material-card{grid-template-columns:auto 1fr;}#studentOnlyDashboard .hoa-student-video-card>button,#studentOnlyDashboard .hoa-student-material-card>button{grid-column:1/-1;width:100%;}
}


/* The actual public bottom bar — override earlier legacy selectors. */
#hoaFrontSocialFooter.hoa-front-social-footer {
  width: min(1180px, calc(100% - 28px)) !important;
  margin: 38px auto 18px !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #0b2341 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 28px rgba(8,26,49,.16) !important;
}

/* Keep the brand logo itself untouched: no white box, no artificial padding,
   no forced rounded rectangle around the original logo. */
#hoaFrontSocialFooter .hoa-v619-brand img {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Prevent inherited/legacy rules from creating a white logo wrapper. */
#hoaFrontSocialFooter .hoa-v619-brand,
#hoaFrontSocialFooter .hoa-v619-brand > div {
  background: transparent !important;
  box-shadow: none !important;
}

/* Maintain the rounded bar on smaller screens. */
@media (max-width: 700px) {
  #hoaFrontSocialFooter.hoa-front-social-footer {
    width: calc(100% - 20px) !important;
    margin: 28px auto 12px !important;
    border-radius: 15px !important;
    padding: 11px 12px !important;
  }

  #hoaFrontSocialFooter .hoa-v619-brand img {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
  }
}


#hoaFrontPage .hoa-front-navlinks {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
}

#hoaFrontPage .hoa-front-navlinks > .hoa-v6060-login-card {
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  min-height:40px !important;
  padding:0 17px !important;
  border:1px solid #123f70 !important;
  border-radius:10px !important;
  background:#123f70 !important;
  color:#fff !important;
  font-weight:800 !important;
  box-shadow:0 6px 14px rgba(18,63,112,.16) !important;
  cursor:pointer !important;
  white-space:nowrap !important;
}

#hoaFrontPage .hoa-front-navlinks > .hoa-v6060-login-card:hover {
  background:#0d3159 !important;
  border-color:#0d3159 !important;
  color:#fff !important;
  transform:translateY(-1px) !important;
}

#hoaFrontPage .hoa-front-navlinks > .hoa-v6060-login-card:focus-visible {
  outline:3px solid rgba(37,99,235,.25) !important;
  outline-offset:2px !important;
}

@media (max-width:700px) {
  #hoaFrontPage .hoa-front-navlinks {
    gap:6px !important;
  }
  #hoaFrontPage .hoa-front-navlinks > .hoa-v6060-login-card {
    min-height:36px !important;
    padding:0 11px !important;
  }
  #hoaFrontPage .hoa-front-navlinks > .hoa-v6060-login-card .hoa-v6058-login-icon {
    display:none !important;
  }
}

/* Guard against any earlier legacy cleanup trying to remove the public LOGIN. */
#hoaFrontPage .hoa-front-navlinks > .hoa-v6060-login-card {
  display:inline-flex !important;
}


/* Keep the page/footer area neutral; the rounded blue element is the actual bar. */
#hoaFrontSocialFooter.hoa-front-social-footer{
  background:transparent !important;
  border-top:0 !important;
  box-shadow:none !important;
  padding:14px 18px !important;
}

/* One clean rounded blue bar — no square outer footer edge. */
#hoaFrontSocialFooter .hoa-v619-social-bar{
  width:min(1180px,100%) !important;
  min-height:66px !important;
  padding:10px 14px !important;
  box-sizing:border-box !important;
  background:#0b2341 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  box-shadow:0 8px 22px rgba(8,26,49,.16) !important;
}

/* Display the supplied HOA logo itself — no white tile, padding, or artificial
   rounded container is applied by the website. */
#hoaFrontSocialFooter .hoa-v619-brand img{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  display:block !important;
  object-fit:contain !important;
  object-position:center !important;
  background:transparent !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  box-shadow:none !important;
  overflow:hidden !important;
}

/* Keep the brand block vertically aligned with the social controls. */
#hoaFrontSocialFooter .hoa-v619-brand{
  min-width:220px !important;
  min-height:42px !important;
  align-items:center !important;
}

/* Prevent inherited global image rules from creating a visible tile. */
#hoaFrontSocialFooter img{
  background:transparent !important;
  box-shadow:none !important;
}

/* Mobile: keep the rounded bar intact and prevent the logo from being squeezed. */
@media (max-width:700px){
  #hoaFrontSocialFooter.hoa-front-social-footer{
    padding:10px !important;
  }
  #hoaFrontSocialFooter .hoa-v619-social-bar{
    border-radius:12px !important;
    padding:10px 12px !important;
  }
  #hoaFrontSocialFooter .hoa-v619-brand{
    min-width:auto !important;
  }
  #hoaFrontSocialFooter .hoa-v619-brand img{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }
}


  html { scroll-behavior:smooth; }
  #hoaV648StudentOptions {
    scroll-margin-top:92px !important;
  }


/* V6.0.123 — enlarge the existing poster stage.
   Existing poster records, URLs, images, upload workflow and carousel logic
   are intentionally untouched. No poster is recreated or regenerated. */

#hoaV643PosterSection.hoa-v648-poster-section{
  overflow:visible !important;
}

#hoaV643PosterSection .hoa-v648-section-head{
  position:relative !important;
  z-index:50 !important;
  margin-bottom:20px !important;
}

#hoaV643PosterWrap.hoa643-poster-wrap{
  position:relative !important;
  z-index:2 !important;
  isolation:isolate !important;
  height:clamp(560px,56vw,700px) !important;
  min-height:560px !important;
  padding:28px 100px !important;
  overflow:hidden !important;
  border-radius:26px !important;
}

/* Give the active poster a genuinely large presentation frame.
   object-fit:contain keeps the complete poster visible for portrait,
   landscape, square and other aspect ratios. */
#hoaV643PosterWrap .hoa643-poster-slide{
  width:min(54vw,680px) !important;
  height:calc(100% - 56px) !important;
  max-width:680px !important;
  max-height:none !important;
  border-radius:22px !important;
}

#hoaV643PosterWrap .hoa643-poster-slide img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  padding:10px !important;
  background:#fff !important;
}

/* Side posters remain visible, but never cover the heading. */
#hoaV643PosterWrap .hoa643-poster-left{
  transform:translate3d(-108%,-50%,0) scale(.76) !important;
  opacity:.28 !important;
  filter:blur(3px) saturate(.65) !important;
}
#hoaV643PosterWrap .hoa643-poster-center{
  transform:translate3d(-50%,-50%,0) scale(1) !important;
  opacity:1 !important;
  filter:none !important;
  z-index:4 !important;
}
#hoaV643PosterWrap .hoa643-poster-right{
  transform:translate3d(8%,-50%,0) scale(.76) !important;
  opacity:.28 !important;
  filter:blur(3px) saturate(.65) !important;
}

#hoaV643PosterNav{
  position:relative !important;
  z-index:20 !important;
  padding-top:14px !important;
  min-height:34px !important;
}

@media (max-width:900px){
  #hoaV643PosterWrap.hoa643-poster-wrap{
    height:clamp(500px,68vw,620px) !important;
    min-height:500px !important;
    padding:24px 78px !important;
  }
  #hoaV643PosterWrap .hoa643-poster-slide{
    width:min(62vw,560px) !important;
    height:calc(100% - 48px) !important;
    max-width:560px !important;
  }
  #hoaV643PosterWrap .hoa643-poster-left{
    transform:translate3d(-106%,-50%,0) scale(.72) !important;
  }
  #hoaV643PosterWrap .hoa643-poster-right{
    transform:translate3d(6%,-50%,0) scale(.72) !important;
  }
}

@media (max-width:600px){
  #hoaV643PosterWrap.hoa643-poster-wrap{
    height:clamp(430px,112vw,540px) !important;
    min-height:430px !important;
    padding:18px 52px !important;
    border-radius:20px !important;
  }
  #hoaV643PosterWrap .hoa643-poster-slide{
    width:min(78vw,420px) !important;
    height:calc(100% - 36px) !important;
    max-width:420px !important;
    border-radius:17px !important;
  }
  #hoaV643PosterWrap .hoa643-poster-slide img{
    padding:6px !important;
  }
  #hoaV643PosterWrap .hoa643-poster-left{
    transform:translate3d(-86%,-50%,0) scale(.64) !important;
    opacity:.20 !important;
    filter:blur(2.2px) saturate(.60) !important;
  }
  #hoaV643PosterWrap .hoa643-poster-right{
    transform:translate3d(-14%,-50%,0) scale(.64) !important;
    opacity:.20 !important;
    filter:blur(2.2px) saturate(.60) !important;
  }
}

/* V6.0.123 — larger poster presentation stage. Existing poster assets/data are untouched. */#hoaV643PosterWrap.hoa643-poster-wrap{  height:clamp(680px,68vw,820px) !important;  min-height:680px !important;  padding:30px 118px !important;  overflow:hidden !important;  border-radius:28px !important;}#hoaV643PosterWrap .hoa643-poster-slide{  width:min(72vw,860px) !important;  height:calc(100% - 60px) !important;  max-width:860px !important;  max-height:none !important;  border-radius:24px !important;}#hoaV643PosterWrap .hoa643-poster-slide img{  display:block !important;  width:100% !important;  height:100% !important;  max-width:100% !important;  max-height:100% !important;  object-fit:contain !important;  object-position:center center !important;  padding:12px !important;  background:#fff !important;}#hoaV643PosterWrap .hoa643-poster-center{  transform:translate3d(-50%,-50%,0) scale(1) !important;  z-index:10 !important;}#hoaV643PosterWrap .hoa643-poster-left{  transform:translate3d(-110%,-50%,0) scale(.72) !important;  opacity:.25 !important;  filter:blur(3px) saturate(.65) !important;}#hoaV643PosterWrap .hoa643-poster-right{  transform:translate3d(10%,-50%,0) scale(.72) !important;  opacity:.25 !important;  filter:blur(3px) saturate(.65) !important;}@media (max-width:1100px){  #hoaV643PosterWrap.hoa643-poster-wrap{    height:clamp(620px,76vw,740px) !important;    min-height:620px !important;    padding:28px 92px !important;  }  #hoaV643PosterWrap .hoa643-poster-slide{    width:min(72vw,740px) !important;    height:calc(100% - 56px) !important;    max-width:740px !important;  }}@media (max-width:700px){  #hoaV643PosterWrap.hoa643-poster-wrap{    height:clamp(520px,125vw,650px) !important;    min-height:520px !important;    padding:22px 60px !important;    border-radius:22px !important;  }  #hoaV643PosterWrap .hoa643-poster-slide{    width:min(82vw,540px) !important;    height:calc(100% - 44px) !important;    max-width:540px !important;    border-radius:20px !important;  }  #hoaV643PosterWrap .hoa643-poster-slide img{padding:8px !important;}  #hoaV643PosterWrap .hoa643-poster-left{    transform:translate3d(-88%,-50%,0) scale(.62) !important;    opacity:.18 !important;  }  #hoaV643PosterWrap .hoa643-poster-right{    transform:translate3d(-12%,-50%,0) scale(.62) !important;    opacity:.18 !important;  }}


/* V6.0.123 — extra-large existing poster presentation.
   No poster asset, URL, database record, upload workflow or poster content
   is created/replaced/modified by these rules. */

#hoaV643PosterSection.hoa-v648-poster-section{
  max-width:1240px !important;
  padding:34px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  overflow:visible !important;
}

#hoaV643PosterSection .hoa-v648-section-head{
  margin-bottom:24px !important;
  position:relative !important;
  z-index:100 !important;
}

#hoaV643PosterWrap.hoa-v648-poster-wrap{
  height:clamp(760px,70vw,920px) !important;
  min-height:760px !important;
  padding:34px 132px !important;
  border-radius:30px !important;
  overflow:hidden !important;
  position:relative !important;
  isolation:isolate !important;
  display:block !important;
}

/* The active frame is deliberately large. The image itself remains
   contain-fitted, so portrait/landscape/square posters are never cropped. */
#hoaV643PosterWrap .hoa643-poster-slide{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:min(76vw,980px) !important;
  height:calc(100% - 68px) !important;
  max-width:980px !important;
  max-height:none !important;
  min-height:0 !important;
  border-radius:28px !important;
  overflow:hidden !important;
  background:#fff !important;
}

#hoaV643PosterWrap .hoa643-poster-slide img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  min-height:0 !important;
  object-fit:contain !important;
  object-position:center center !important;
  padding:12px !important;
  background:#fff !important;
}

/* Keep side posters inside the enlarged stage. */
#hoaV643PosterWrap .hoa643-poster-center{
  transform:translate3d(-50%,-50%,0) scale(1) !important;
  z-index:10 !important;
  opacity:1 !important;
  filter:none !important;
}

#hoaV643PosterWrap .hoa643-poster-left{
  transform:translate3d(-111%,-50%,0) scale(.74) !important;
  z-index:3 !important;
  opacity:.24 !important;
  filter:blur(3px) saturate(.65) !important;
}

#hoaV643PosterWrap .hoa643-poster-right{
  transform:translate3d(11%,-50%,0) scale(.74) !important;
  z-index:3 !important;
  opacity:.24 !important;
  filter:blur(3px) saturate(.65) !important;
}

#hoaV643PosterNav{
  position:relative !important;
  z-index:30 !important;
  margin-top:16px !important;
  min-height:36px !important;
}

/* Large tablets */
@media (max-width:1100px){
  #hoaV643PosterSection.hoa-v648-poster-section{
    padding:28px !important;
  }

  #hoaV643PosterWrap.hoa-v648-poster-wrap{
    height:clamp(680px,78vw,820px) !important;
    min-height:680px !important;
    padding:30px 108px !important;
  }

  #hoaV643PosterWrap .hoa643-poster-slide{
    width:min(76vw,820px) !important;
    height:calc(100% - 60px) !important;
    max-width:820px !important;
  }
}

/* Phones: still large enough for genuine poster viewing, while retaining
   enough horizontal room for the carousel controls. */
@media (max-width:700px){
  #hoaV643PosterSection.hoa-v648-poster-section{
    padding:20px !important;
    border-radius:22px !important;
  }

  #hoaV643PosterWrap.hoa-v648-poster-wrap{
    height:clamp(560px,135vw,700px) !important;
    min-height:560px !important;
    padding:24px 58px !important;
    border-radius:22px !important;
  }

  #hoaV643PosterWrap .hoa643-poster-slide{
    width:min(82vw,560px) !important;
    height:calc(100% - 48px) !important;
    max-width:560px !important;
    border-radius:20px !important;
  }

  #hoaV643PosterWrap .hoa643-poster-slide img{
    padding:8px !important;
  }

  #hoaV643PosterWrap .hoa643-poster-left{
    transform:translate3d(-88%,-50%,0) scale(.60) !important;
    opacity:.16 !important;
    filter:blur(2.5px) saturate(.60) !important;
  }

  #hoaV643PosterWrap .hoa643-poster-right{
    transform:translate3d(-12%,-50%,0) scale(.60) !important;
    opacity:.16 !important;
    filter:blur(2.5px) saturate(.60) !important;
  }
}


/* V6.0.123 — balanced poster sizing.
   Keeps the existing posters and carousel intact; presentation only. */

#hoaV643PosterSection.hoa-v648-poster-section{
  max-width:1180px !important;
  padding:28px !important;
}

#hoaV643PosterSection .hoa-v648-section-head{
  margin-bottom:20px !important;
}

#hoaV643PosterWrap.hoa-v648-poster-wrap{
  height:clamp(600px,58vw,700px) !important;
  min-height:600px !important;
  padding:28px 105px !important;
  border-radius:28px !important;
  overflow:hidden !important;
}

#hoaV643PosterWrap .hoa643-poster-slide{
  width:min(62vw,760px) !important;
  height:calc(100% - 56px) !important;
  max-width:760px !important;
  border-radius:24px !important;
  overflow:hidden !important;
  background:#fff !important;
}

#hoaV643PosterWrap .hoa643-poster-slide img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  padding:10px !important;
  background:#fff !important;
}

#hoaV643PosterWrap .hoa643-poster-center{
  transform:translate3d(-50%,-50%,0) scale(1) !important;
  z-index:10 !important;
  opacity:1 !important;
  filter:none !important;
}

#hoaV643PosterWrap .hoa643-poster-left{
  transform:translate3d(-108%,-50%,0) scale(.70) !important;
  opacity:.24 !important;
  filter:blur(3px) saturate(.65) !important;
}

#hoaV643PosterWrap .hoa643-poster-right{
  transform:translate3d(8%,-50%,0) scale(.70) !important;
  opacity:.24 !important;
  filter:blur(3px) saturate(.65) !important;
}

#hoaV643PosterNav{
  margin-top:12px !important;
  min-height:32px !important;
}

@media (max-width:900px){
  #hoaV643PosterWrap.hoa-v648-poster-wrap{
    height:clamp(520px,66vw,620px) !important;
    min-height:520px !important;
    padding:24px 82px !important;
  }

  #hoaV643PosterWrap .hoa643-poster-slide{
    width:min(68vw,620px) !important;
    height:calc(100% - 48px) !important;
    max-width:620px !important;
  }
}

@media (max-width:600px){
  #hoaV643PosterSection.hoa-v648-poster-section{
    padding:18px !important;
  }

  #hoaV643PosterWrap.hoa-v648-poster-wrap{
    height:clamp(440px,105vw,540px) !important;
    min-height:440px !important;
    padding:20px 52px !important;
    border-radius:20px !important;
  }

  #hoaV643PosterWrap .hoa643-poster-slide{
    width:min(78vw,430px) !important;
    height:calc(100% - 40px) !important;
    max-width:430px !important;
    border-radius:18px !important;
  }

  #hoaV643PosterWrap .hoa643-poster-slide img{
    padding:7px !important;
  }

  #hoaV643PosterWrap .hoa643-poster-left{
    transform:translate3d(-88%,-50%,0) scale(.60) !important;
    opacity:.16 !important;
  }

  #hoaV643PosterWrap .hoa643-poster-right{
    transform:translate3d(-12%,-50%,0) scale(.60) !important;
    opacity:.16 !important;
  }
}


/* =========================================================
   HOA V6.0.4 — ADMIN DASHBOARD BLUE + GOLD POLISH
   Visual-only layer. No data, authentication, permissions,
   Supabase, video-player or existing workflow logic changed.
   HOA brand colours:
     Primary Blue  : #0B3B73 / #145A9C
     Accent Gold   : #F2B705
   ========================================================= */

body.admin-ui{
  --hoa-blue:#0B3B73;
  --hoa-blue-2:#145A9C;
  --hoa-blue-3:#1D6FB8;
  --hoa-gold:#F2B705;
  --hoa-gold-soft:#FFF6D8;
  --hoa-bg:#F4F7FB;
  --hoa-card:#FFFFFF;
  --hoa-border:#D8E3EF;
  --hoa-text:#102A49;
  --hoa-muted:#64748B;
  background:
    radial-gradient(circle at 85% 0%,rgba(242,183,5,.055),transparent 27%),
    var(--hoa-bg)!important;
}

/* Admin brand/header */
body.admin-ui .adminReferenceBrand{
  background:linear-gradient(180deg,#082F5F 0%,#0B3B73 100%)!important;
  border-bottom:2px solid rgba(242,183,5,.42)!important;
}
body.admin-ui .adminReferenceBrandTitle{
  color:#fff!important;
  font-weight:900!important;
}
body.admin-ui .adminReferenceBrandSub{
  color:rgba(255,255,255,.78)!important;
}

/* Sidebar navigation: blue base + gold active marker */
body.admin-ui .adminReferenceNav button{
  position:relative!important;
  background:transparent!important;
  border:1px solid transparent!important;
  color:#EAF3FF!important;
  font-weight:800!important;
}
body.admin-ui .adminReferenceNav button:hover:not(.active){
  background:rgba(242,183,5,.10)!important;
  border-color:rgba(242,183,5,.18)!important;
}
body.admin-ui .adminReferenceNav button.active{
  background:linear-gradient(90deg,#145A9C 0%,#0B3B73 100%)!important;
  border-color:rgba(242,183,5,.55)!important;
  color:#fff!important;
  box-shadow:0 7px 18px rgba(3,31,65,.28)!important;
}
body.admin-ui .adminReferenceNav button.active::before{
  content:""!important;
  position:absolute!important;
  left:-10px!important;
  top:8px!important;
  bottom:8px!important;
  width:4px!important;
  border-radius:0 4px 4px 0!important;
  background:var(--hoa-gold)!important;
}

/* Admin workspace */
body.admin-ui #adminOnlyDashboard{
  color:var(--hoa-text)!important;
}
body.admin-ui #adminOnlyDashboard > .dashPanel:first-of-type{
  border-top:3px solid var(--hoa-gold)!important;
}

/* Main dashboard section navigation */
body.admin-ui #adminOnlyDashboard .adminSectionNav{
  background:#fff!important;
  border:1px solid var(--hoa-border)!important;
  border-top:3px solid var(--hoa-blue)!important;
  box-shadow:0 8px 24px rgba(11,59,115,.08)!important;
  padding:9px!important;
}
body.admin-ui #adminOnlyDashboard .adminSectionNav button{
  min-height:48px!important;
  background:#F8FAFD!important;
  color:var(--hoa-blue)!important;
  border:1px solid #D7E1EC!important;
  border-radius:10px!important;
  font-weight:900!important;
  transition:all .16s ease!important;
}
body.admin-ui #adminOnlyDashboard .adminSectionNav button:hover:not(.active){
  background:var(--hoa-gold-soft)!important;
  border-color:rgba(242,183,5,.58)!important;
  color:var(--hoa-blue)!important;
  transform:translateY(-1px)!important;
}
body.admin-ui #adminOnlyDashboard .adminSectionNav button.active{
  background:linear-gradient(135deg,#0B3B73 0%,#145A9C 100%)!important;
  border-color:var(--hoa-blue)!important;
  color:#fff!important;
  box-shadow:0 6px 15px rgba(11,59,115,.22)!important;
  position:relative!important;
}
body.admin-ui #adminOnlyDashboard .adminSectionNav button.active::after{
  content:""!important;
  position:absolute!important;
  left:12%!important;
  right:12%!important;
  bottom:-9px!important;
  height:3px!important;
  border-radius:3px!important;
  background:var(--hoa-gold)!important;
}

/* Dashboard title panel */
body.admin-ui #adminOnlyDashboard > .dashPanel{
  border:1px solid var(--hoa-border)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 7px 22px rgba(11,59,115,.07)!important;
}
body.admin-ui #adminOnlyDashboard .brand-logo{
  border:2px solid var(--hoa-gold)!important;
  border-radius:10px!important;
  padding:2px!important;
  background:#fff!important;
}

/* Content panels */
body.admin-ui #adminOnlyDashboard .hoa-admin-content-panel,
body.admin-ui #adminOnlyDashboard .adminSectionPanel > .dashPanel{
  border:1px solid var(--hoa-border)!important;
  border-top:3px solid var(--hoa-blue)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 7px 22px rgba(11,59,115,.065)!important;
}
body.admin-ui #adminOnlyDashboard .hoa-admin-section-head{
  border-bottom:1px solid #E7EDF4!important;
  padding-bottom:14px!important;
  margin-bottom:16px!important;
}
body.admin-ui #adminOnlyDashboard .hoa-admin-section-head h3{
  color:var(--hoa-blue)!important;
  font-weight:900!important;
}
body.admin-ui #adminOnlyDashboard .hoa-admin-section-head p{
  color:var(--hoa-muted)!important;
}

/* Section counters / badges */
body.admin-ui #adminOnlyDashboard .hoa-admin-count,
body.admin-ui #adminOnlyDashboard .testCountBadge{
  background:var(--hoa-gold-soft)!important;
  color:#765600!important;
  border:1px solid rgba(242,183,5,.58)!important;
  font-weight:900!important;
}

/* Form fields */
body.admin-ui #adminOnlyDashboard .hoa-admin-form-grid label{
  color:var(--hoa-blue)!important;
  font-weight:850!important;
}
body.admin-ui #adminOnlyDashboard input,
body.admin-ui #adminOnlyDashboard select,
body.admin-ui #adminOnlyDashboard textarea{
  border-color:#CFDBE8!important;
  border-radius:9px!important;
  background:#fff!important;
}
body.admin-ui #adminOnlyDashboard input:focus,
body.admin-ui #adminOnlyDashboard select:focus,
body.admin-ui #adminOnlyDashboard textarea:focus{
  border-color:var(--hoa-blue-3)!important;
  box-shadow:0 0 0 3px rgba(20,90,156,.11),0 0 0 1px rgba(242,183,5,.28)!important;
}

/* Buttons — blue primary, gold as restrained accent */
body.admin-ui #adminOnlyDashboard button.primary,
body.admin-ui #adminOnlyDashboard .primary{
  background:linear-gradient(135deg,#0B3B73,#145A9C)!important;
  border:1px solid #0B3B73!important;
  color:#fff!important;
  font-weight:900!important;
  box-shadow:0 5px 13px rgba(11,59,115,.18)!important;
}
body.admin-ui #adminOnlyDashboard button.primary:hover,
body.admin-ui #adminOnlyDashboard .primary:hover{
  background:linear-gradient(135deg,#145A9C,#0B3B73)!important;
  box-shadow:0 7px 17px rgba(11,59,115,.24)!important;
}
body.admin-ui #adminOnlyDashboard button.secondary,
body.admin-ui #adminOnlyDashboard .secondary{
  background:#fff!important;
  color:var(--hoa-blue)!important;
  border:1px solid #C8D6E5!important;
  font-weight:850!important;
}
body.admin-ui #adminOnlyDashboard button.secondary:hover,
body.admin-ui #adminOnlyDashboard .secondary:hover{
  background:var(--hoa-gold-soft)!important;
  border-color:rgba(242,183,5,.65)!important;
}

/* Lists / tables */
body.admin-ui #adminOnlyDashboard .hoa-admin-list,
body.admin-ui #adminOnlyDashboard .resultTableWrap,
body.admin-ui #adminOnlyDashboard .testWiseTableWrap{
  border-color:var(--hoa-border)!important;
  border-radius:11px!important;
}
body.admin-ui #adminOnlyDashboard table th{
  background:#F4F8FC!important;
  color:var(--hoa-blue)!important;
  border-bottom:2px solid rgba(242,183,5,.42)!important;
}
body.admin-ui #adminOnlyDashboard table tbody tr:hover td{
  background:#FFFBEE!important;
}

/* Gold treatment for important status/selection indicators */
body.admin-ui #adminOnlyDashboard .hoa-admin-list .active,
body.admin-ui #adminOnlyDashboard .status-active{
  border-color:rgba(242,183,5,.45)!important;
}
body.admin-ui #adminOnlyDashboard .hoa-admin-actions{
  border-top:1px solid #E8EEF5!important;
  padding-top:14px!important;
}

/* Admin Access: keep it visually distinct without changing permissions */
body.admin-ui #adminSectionAdminPanel .dashPanel{
  border-top-color:var(--hoa-gold)!important;
}
body.admin-ui #adminSectionAdminPanel h3{
  color:var(--hoa-blue)!important;
}

/* Poster section */
body.admin-ui #adminSectionPosterPanel .hoa-admin-content-panel{
  border-top-color:var(--hoa-gold)!important;
}
body.admin-ui #adminSectionPosterPanel h3{
  color:var(--hoa-blue)!important;
}

/* Bottom/sidebar utility area */
body.admin-ui .adminReferenceBottom{
  border-top:1px solid rgba(242,183,5,.28)!important;
}
body.admin-ui .adminReferenceBottom button:hover{
  background:rgba(242,183,5,.10)!important;
}

/* Gold focus/selection without changing layout */
body.admin-ui button:focus-visible,
body.admin-ui a:focus-visible,
body.admin-ui input:focus-visible,
body.admin-ui select:focus-visible,
body.admin-ui textarea:focus-visible{
  outline:2px solid var(--hoa-gold)!important;
  outline-offset:2px!important;
}

/* Responsive: keep the brand hierarchy clean */
@media(max-width:700px){
  body.admin-ui #adminOnlyDashboard .adminSectionNav{
    border-top-width:3px!important;
  }
  body.admin-ui #adminOnlyDashboard .adminSectionNav button.active::after{
    left:25%!important;
    right:25%!important;
  }
}


/* =========================================================
   HOA V6.0.4 — ADMIN DASHBOARD SMOOTH TRANSITION POLISH
   Visual/interaction layer only. Existing functionality,
   permissions, data and routes remain unchanged.
   ========================================================= */

/* Global admin motion */
body.admin-ui #adminOnlyDashboard,
body.admin-ui #adminOnlyDashboard *{
  -webkit-tap-highlight-color:transparent;
}

body.admin-ui #adminOnlyDashboard button,
body.admin-ui #adminOnlyDashboard a,
body.admin-ui #adminOnlyDashboard input,
body.admin-ui #adminOnlyDashboard select,
body.admin-ui #adminOnlyDashboard textarea{
  transition:
    background-color .20s ease,
    border-color .20s ease,
    color .20s ease,
    box-shadow .20s ease,
    transform .20s ease,
    opacity .20s ease;
}

/* Navigation feels like a single polished control */
body.admin-ui #adminOnlyDashboard .adminSectionNav{
  transition:box-shadow .25s ease, transform .25s ease!important;
}

body.admin-ui #adminOnlyDashboard .adminSectionNav button{
  transform:translateZ(0);
  will-change:background-color,box-shadow,transform;
}

body.admin-ui #adminOnlyDashboard .adminSectionNav button:not(.active):hover{
  transform:translateY(-1px);
}

body.admin-ui #adminOnlyDashboard .adminSectionNav button.active{
  transform:translateY(0) scale(1.005);
}

/* Section panels: prevent harsh appearance/disappearance */
body.admin-ui #adminOnlyDashboard .adminSectionPanel{
  opacity:1;
  transform:translateY(0);
  will-change:opacity,transform;
}

/* Elements that are toggled through display:none are given a
   short entry animation when they become visible. */
@keyframes hoaAdminSectionEnter{
  from{
    opacity:0;
    transform:translateY(7px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes hoaAdminCardEnter{
  from{
    opacity:0;
    transform:translateY(5px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

body.admin-ui #adminOnlyDashboard .adminSectionPanel[style*="display: block"],
body.admin-ui #adminOnlyDashboard .adminSectionPanel[style*="display:block"]{
  animation:hoaAdminSectionEnter .26s cubic-bezier(.22,.61,.36,1) both;
}

body.admin-ui #adminOnlyDashboard .hoa-admin-content-panel,
body.admin-ui #adminOnlyDashboard .dashPanel{
  transition:
    box-shadow .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

body.admin-ui #adminOnlyDashboard .hoa-admin-content-panel:hover{
  box-shadow:0 10px 28px rgba(11,59,115,.09)!important;
}

/* Cards/lists settle in softly without excessive movement */
body.admin-ui #adminOnlyDashboard .hoa-admin-list > *,
body.admin-ui #adminOnlyDashboard table tbody tr{
  transition:
    background-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

body.admin-ui #adminOnlyDashboard .hoa-admin-list > *:hover{
  transform:translateY(-1px);
}

/* Modal/overlay polish where existing modal classes are used */
body.admin-ui .modal,
body.admin-ui .modal-overlay,
body.admin-ui .hoa-modal,
body.admin-ui .admin-modal,
body.admin-ui .overlay{
  transition:opacity .22s ease, visibility .22s ease, background-color .22s ease!important;
}

body.admin-ui .modal > *,
body.admin-ui .hoa-modal > *,
body.admin-ui .admin-modal > *{
  transition:transform .24s cubic-bezier(.22,.61,.36,1), opacity .22s ease!important;
}

/* Buttons get a subtle press response */
body.admin-ui #adminOnlyDashboard button:active{
  transform:scale(.985);
}

/* Gold focus transition */
body.admin-ui #adminOnlyDashboard input:focus,
body.admin-ui #adminOnlyDashboard select:focus,
body.admin-ui #adminOnlyDashboard textarea:focus{
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease!important;
}

/* Toasts/alerts, if present */
body.admin-ui .toast,
body.admin-ui .notice,
body.admin-ui .alert,
body.admin-ui .snackbar{
  animation:hoaAdminCardEnter .22s ease both;
}

/* Respect accessibility preference */
@media (prefers-reduced-motion:reduce){
  body.admin-ui #adminOnlyDashboard *,
  body.admin-ui #adminOnlyDashboard *::before,
  body.admin-ui #adminOnlyDashboard *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}


/* =========================================================
   HOA V6.0.4 — HOME PAGE BLUE + GOLD POLISH
   Visual layer only. Existing home-page content, links,
   authentication, Supabase logic and workflows are preserved.
   ========================================================= */

:root{
  --hoa-home-blue:#0B3B73;
  --hoa-home-blue-2:#145A9C;
  --hoa-home-blue-3:#1D6FB8;
  --hoa-home-gold:#F2B705;
  --hoa-home-gold-soft:#FFF7D9;
  --hoa-home-ink:#102A49;
  --hoa-home-muted:#64748B;
  --hoa-home-bg:#F5F8FC;
}

/* Page background */
body{
  background:
    radial-gradient(circle at 12% 0%,rgba(20,90,156,.07),transparent 28%),
    radial-gradient(circle at 88% 6%,rgba(242,183,5,.08),transparent 24%),
    var(--hoa-home-bg);
}

/* Main home/header area */
body:not(.admin-ui) header,
body:not(.admin-ui) .site-header,
body:not(.admin-ui) .home-header{
  border-bottom:2px solid rgba(242,183,5,.52)!important;
}

/* HOA branding */
body:not(.admin-ui) .brand,
body:not(.admin-ui) .logo-wrap,
body:not(.admin-ui) .brand-wrap{
  color:var(--hoa-home-blue)!important;
}

body:not(.admin-ui) .brand img,
body:not(.admin-ui) .logo-wrap img,
body:not(.admin-ui) .brand-wrap img{
  filter:drop-shadow(0 3px 8px rgba(11,59,115,.12));
}

/* Primary navigation */
body:not(.admin-ui) nav a,
body:not(.admin-ui) nav button{
  color:var(--hoa-home-blue)!important;
  font-weight:800!important;
  transition:color .2s ease,background-color .2s ease,
             border-color .2s ease,transform .2s ease!important;
}

body:not(.admin-ui) nav a:hover,
body:not(.admin-ui) nav button:hover{
  color:var(--hoa-home-blue-2)!important;
  background:var(--hoa-home-gold-soft)!important;
}

/* Hero / welcome area */
body:not(.admin-ui) .hero,
body:not(.admin-ui) .home-hero,
body:not(.admin-ui) .hero-section{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(135deg,#082F5F 0%,#0B3B73 56%,#145A9C 100%)!important;
  color:#fff!important;
  border-bottom:3px solid var(--hoa-home-gold)!important;
  box-shadow:0 12px 34px rgba(11,59,115,.18)!important;
}

body:not(.admin-ui) .hero::after,
body:not(.admin-ui) .home-hero::after,
body:not(.admin-ui) .hero-section::after{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  right:-130px;
  top:-190px;
  border-radius:50%;
  border:2px solid rgba(242,183,5,.18);
  box-shadow:0 0 0 26px rgba(242,183,5,.035),
             0 0 0 52px rgba(242,183,5,.025);
  pointer-events:none;
}

body:not(.admin-ui) .hero h1,
body:not(.admin-ui) .home-hero h1,
body:not(.admin-ui) .hero-section h1{
  color:#fff!important;
  font-weight:950!important;
  letter-spacing:-.02em;
}

body:not(.admin-ui) .hero h1 span,
body:not(.admin-ui) .home-hero h1 span,
body:not(.admin-ui) .hero-section h1 span{
  color:var(--hoa-home-gold)!important;
}

body:not(.admin-ui) .hero p,
body:not(.admin-ui) .home-hero p,
body:not(.admin-ui) .hero-section p{
  color:rgba(255,255,255,.86)!important;
}

/* Gold accent rule */
body:not(.admin-ui) .section-title::after,
body:not(.admin-ui) .home-section-title::after{
  content:"";
  display:block;
  width:58px;
  height:4px;
  margin-top:9px;
  border-radius:4px;
  background:var(--hoa-home-gold);
}

/* Course / content cards */
body:not(.admin-ui) .course-card,
body:not(.admin-ui) .courseCard,
body:not(.admin-ui) .content-card,
body:not(.admin-ui) .home-card,
body:not(.admin-ui) .material-card{
  background:#fff!important;
  border:1px solid #D9E4EF!important;
  border-top:3px solid var(--hoa-home-blue)!important;
  border-radius:14px!important;
  box-shadow:0 7px 22px rgba(11,59,115,.07)!important;
  transition:transform .22s ease,box-shadow .22s ease,
             border-color .22s ease!important;
}

body:not(.admin-ui) .course-card:hover,
body:not(.admin-ui) .courseCard:hover,
body:not(.admin-ui) .content-card:hover,
body:not(.admin-ui) .home-card:hover,
body:not(.admin-ui) .material-card:hover{
  transform:translateY(-4px);
  border-color:rgba(242,183,5,.62)!important;
  box-shadow:0 13px 30px rgba(11,59,115,.12)!important;
}

body:not(.admin-ui) .course-card h3,
body:not(.admin-ui) .courseCard h3,
body:not(.admin-ui) .content-card h3,
body:not(.admin-ui) .home-card h3,
body:not(.admin-ui) .material-card h3{
  color:var(--hoa-home-blue)!important;
}

/* Poster carousel */
body:not(.admin-ui) .poster-container,
body:not(.admin-ui) .poster-section,
body:not(.admin-ui) .poster-slider{
  border-color:#D8E3EF!important;
}

body:not(.admin-ui) .poster-container img,
body:not(.admin-ui) .poster-section img{
  border-radius:14px!important;
}

body:not(.admin-ui) .poster-prev,
body:not(.admin-ui) .poster-next,
body:not(.admin-ui) .poster-nav button{
  background:var(--hoa-home-blue)!important;
  color:#fff!important;
  border:2px solid var(--hoa-home-gold)!important;
  box-shadow:0 6px 15px rgba(11,59,115,.22)!important;
  transition:transform .2s ease,background-color .2s ease!important;
}

body:not(.admin-ui) .poster-prev:hover,
body:not(.admin-ui) .poster-next:hover,
body:not(.admin-ui) .poster-nav button:hover{
  background:var(--hoa-home-blue-2)!important;
  transform:scale(1.05);
}

/* Free content / featured sections */
body:not(.admin-ui) .free-content,
body:not(.admin-ui) .featured-section,
body:not(.admin-ui) .home-content-section{
  background:#fff!important;
  border-top:1px solid #E0E8F1!important;
}

/* CTA buttons */
body:not(.admin-ui) .btn-primary,
body:not(.admin-ui) .primary-btn,
body:not(.admin-ui) .cta-primary{
  background:linear-gradient(135deg,#0B3B73,#145A9C)!important;
  color:#fff!important;
  border:1px solid #0B3B73!important;
  font-weight:900!important;
  box-shadow:0 6px 16px rgba(11,59,115,.19)!important;
  transition:transform .2s ease,box-shadow .2s ease,
             background .2s ease!important;
}

body:not(.admin-ui) .btn-primary:hover,
body:not(.admin-ui) .primary-btn:hover,
body:not(.admin-ui) .cta-primary:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg,#145A9C,#0B3B73)!important;
  box-shadow:0 10px 23px rgba(11,59,115,.25)!important;
}

body:not(.admin-ui) .btn-secondary,
body:not(.admin-ui) .secondary-btn{
  background:#fff!important;
  color:var(--hoa-home-blue)!important;
  border:1px solid rgba(242,183,5,.7)!important;
  font-weight:850!important;
}

body:not(.admin-ui) .btn-secondary:hover,
body:not(.admin-ui) .secondary-btn:hover{
  background:var(--hoa-home-gold-soft)!important;
}

/* Contact / social section */
body:not(.admin-ui) .contact-section,
body:not(.admin-ui) .social-section{
  background:linear-gradient(135deg,#082F5F,#0B3B73)!important;
  color:#fff!important;
  border-top:3px solid var(--hoa-home-gold)!important;
}

body:not(.admin-ui) .contact-section h2,
body:not(.admin-ui) .social-section h2{
  color:#fff!important;
}

body:not(.admin-ui) .contact-section a,
body:not(.admin-ui) .social-section a{
  color:#fff!important;
  border-color:rgba(242,183,5,.45)!important;
}

body:not(.admin-ui) .contact-section a:hover,
body:not(.admin-ui) .social-section a:hover{
  background:rgba(242,183,5,.12)!important;
  border-color:var(--hoa-home-gold)!important;
}

/* Footer */
body:not(.admin-ui) footer,
body:not(.admin-ui) .site-footer,
body:not(.admin-ui) .home-footer{
  background:#082F5F!important;
  color:rgba(255,255,255,.78)!important;
  border-top:2px solid var(--hoa-home-gold)!important;
}

body:not(.admin-ui) footer a,
body:not(.admin-ui) .site-footer a,
body:not(.admin-ui) .home-footer a{
  color:#fff!important;
}

body:not(.admin-ui) footer a:hover,
body:not(.admin-ui) .site-footer a:hover,
body:not(.admin-ui) .home-footer a:hover{
  color:var(--hoa-home-gold)!important;
}

/* Smooth home interactions */
body:not(.admin-ui) a,
body:not(.admin-ui) button{
  transition:background-color .2s ease,color .2s ease,
             border-color .2s ease,box-shadow .2s ease,
             transform .2s ease!important;
}

body:not(.admin-ui) button:active,
body:not(.admin-ui) .btn-primary:active,
body:not(.admin-ui) .primary-btn:active{
  transform:scale(.985);
}

/* Mobile */
@media(max-width:700px){
  body:not(.admin-ui) .hero h1,
  body:not(.admin-ui) .home-hero h1,
  body:not(.admin-ui) .hero-section h1{
    letter-spacing:-.01em;
  }

  body:not(.admin-ui) .course-card,
  body:not(.admin-ui) .courseCard,
  body:not(.admin-ui) .content-card,
  body:not(.admin-ui) .home-card{
    border-radius:12px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body:not(.admin-ui) *,
  body:not(.admin-ui) *::before,
  body:not(.admin-ui) *::after{
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
  }
}


/* =========================================================
   HOA V6.0.4 — PREMIUM BLUE + GOLDEN YELLOW THEME
   Refined brand system:
   Blue = structure / trust / navigation
   Golden Yellow = highlights / action / achievement
   ========================================================= */

:root{
  --hoa-blue-950:#061F40;
  --hoa-blue-900:#082F5F;
  --hoa-blue-800:#0B3B73;
  --hoa-blue-700:#145A9C;
  --hoa-blue-600:#1D6FB8;

  --hoa-gold-500:#F2B705;
  --hoa-gold-400:#FFC62A;
  --hoa-gold-300:#FFD966;
  --hoa-gold-100:#FFF7D9;

  --hoa-white:#FFFFFF;
  --hoa-surface:#F7F9FC;
  --hoa-border:#DCE5EF;
  --hoa-text:#102A49;
  --hoa-muted:#64748B;

  --hoa-gold-shadow:rgba(242,183,5,.24);
  --hoa-blue-shadow:rgba(8,47,95,.15);
}

/* Keep gold intentional rather than flooding the page. */
body:not(.admin-ui){
  background:
    radial-gradient(circle at 8% -5%,rgba(20,90,156,.065),transparent 27%),
    radial-gradient(circle at 94% 2%,rgba(242,183,5,.055),transparent 24%),
    var(--hoa-surface)!important;
}

/* Brand gold line */
body:not(.admin-ui) header,
body:not(.admin-ui) .site-header,
body:not(.admin-ui) .home-header{
  position:relative!important;
  border-bottom:1px solid rgba(242,183,5,.30)!important;
}
body:not(.admin-ui) header::after,
body:not(.admin-ui) .site-header::after,
body:not(.admin-ui) .home-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:2px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(242,183,5,.35) 18%,
    var(--hoa-gold-500) 50%,
    rgba(242,183,5,.35) 82%,
    transparent 100%
  );
  pointer-events:none;
}

/* Navigation — gold only on active/hover state */
body:not(.admin-ui) nav a,
body:not(.admin-ui) nav button{
  position:relative!important;
  color:var(--hoa-blue-800)!important;
  font-weight:850!important;
}
body:not(.admin-ui) nav a::after,
body:not(.admin-ui) nav button::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-5px;
  width:0;
  height:2px;
  border-radius:2px;
  background:var(--hoa-gold-500);
  transform:translateX(-50%);
  transition:width .22s ease;
}
body:not(.admin-ui) nav a:hover::after,
body:not(.admin-ui) nav button:hover::after,
body:not(.admin-ui) nav a.active::after,
body:not(.admin-ui) nav button.active::after{
  width:65%;
}

/* Hero: deep blue with a controlled gold glow */
body:not(.admin-ui) .hero,
body:not(.admin-ui) .home-hero,
body:not(.admin-ui) .hero-section{
  background:
    radial-gradient(circle at 82% 20%,rgba(242,183,5,.13),transparent 20%),
    linear-gradient(120deg,var(--hoa-blue-950) 0%,var(--hoa-blue-900) 48%,var(--hoa-blue-800) 100%)!important;
  border-bottom:0!important;
  box-shadow:0 16px 38px var(--hoa-blue-shadow)!important;
}
body:not(.admin-ui) .hero::before,
body:not(.admin-ui) .home-hero::before,
body:not(.admin-ui) .hero-section::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:115px;
  height:4px;
  background:linear-gradient(90deg,var(--hoa-gold-500),var(--hoa-gold-300));
  border-radius:0 4px 4px 0;
}
body:not(.admin-ui) .hero h1,
body:not(.admin-ui) .home-hero h1,
body:not(.admin-ui) .hero-section h1{
  text-shadow:0 2px 18px rgba(0,0,0,.16)!important;
}
body:not(.admin-ui) .hero h1 span,
body:not(.admin-ui) .home-hero h1 span,
body:not(.admin-ui) .hero-section h1 span{
  color:var(--hoa-gold-400)!important;
}

/* Reusable section heading */
body:not(.admin-ui) .section-title,
body:not(.admin-ui) .home-section-title{
  color:var(--hoa-blue-900)!important;
  font-weight:950!important;
  position:relative!important;
}
body:not(.admin-ui) .section-title::after,
body:not(.admin-ui) .home-section-title::after{
  width:46px!important;
  height:3px!important;
  margin-top:8px!important;
  background:linear-gradient(90deg,var(--hoa-gold-500),var(--hoa-gold-300))!important;
}

/* Cards — blue structure, gold micro-accent */
body:not(.admin-ui) .course-card,
body:not(.admin-ui) .courseCard,
body:not(.admin-ui) .content-card,
body:not(.admin-ui) .home-card,
body:not(.admin-ui) .material-card{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid var(--hoa-border)!important;
  border-top:1px solid var(--hoa-border)!important;
  border-radius:15px!important;
  box-shadow:0 7px 24px rgba(8,47,95,.065)!important;
}
body:not(.admin-ui) .course-card::before,
body:not(.admin-ui) .courseCard::before,
body:not(.admin-ui) .content-card::before,
body:not(.admin-ui) .home-card::before,
body:not(.admin-ui) .material-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:42px;
  height:3px;
  background:linear-gradient(90deg,var(--hoa-gold-500),var(--hoa-gold-300));
  border-radius:0 0 4px 0;
}
body:not(.admin-ui) .course-card:hover,
body:not(.admin-ui) .courseCard:hover,
body:not(.admin-ui) .content-card:hover,
body:not(.admin-ui) .home-card:hover,
body:not(.admin-ui) .material-card:hover{
  transform:translateY(-3px)!important;
  border-color:#C8D8E8!important;
  box-shadow:
    0 14px 32px rgba(8,47,95,.11),
    0 2px 0 var(--hoa-gold-shadow)!important;
}

/* Card icons / badges: restrained gold */
body:not(.admin-ui) .course-card .icon,
body:not(.admin-ui) .courseCard .icon,
body:not(.admin-ui) .content-card .icon,
body:not(.admin-ui) .home-card .icon{
  background:var(--hoa-gold-100)!important;
  color:var(--hoa-blue-800)!important;
  border:1px solid rgba(242,183,5,.38)!important;
}

/* Buttons — blue primary, gold highlight */
body:not(.admin-ui) .btn-primary,
body:not(.admin-ui) .primary-btn,
body:not(.admin-ui) .cta-primary{
  background:linear-gradient(135deg,var(--hoa-blue-800),var(--hoa-blue-700))!important;
  border:1px solid var(--hoa-blue-800)!important;
  box-shadow:0 7px 17px rgba(8,47,95,.18)!important;
}
body:not(.admin-ui) .btn-primary:hover,
body:not(.admin-ui) .primary-btn:hover,
body:not(.admin-ui) .cta-primary:hover{
  box-shadow:
    0 10px 22px rgba(8,47,95,.22),
    0 0 0 2px rgba(242,183,5,.18)!important;
}

/* Gold action buttons: use only for important CTA */
body:not(.admin-ui) .btn-gold,
body:not(.admin-ui) .gold-btn,
body:not(.admin-ui) .cta-gold{
  background:linear-gradient(135deg,var(--hoa-gold-500),var(--hoa-gold-400))!important;
  color:var(--hoa-blue-950)!important;
  border:1px solid #DCA600!important;
  font-weight:950!important;
  box-shadow:0 7px 16px var(--hoa-gold-shadow)!important;
}
body:not(.admin-ui) .btn-gold:hover,
body:not(.admin-ui) .gold-btn:hover,
body:not(.admin-ui) .cta-gold:hover{
  background:linear-gradient(135deg,var(--hoa-gold-400),var(--hoa-gold-500))!important;
  box-shadow:0 10px 22px rgba(242,183,5,.30)!important;
}

/* Poster section — blue frame + thin gold edge */
body:not(.admin-ui) .poster-container,
body:not(.admin-ui) .poster-section,
body:not(.admin-ui) .poster-slider{
  border:1px solid #C9D8E7!important;
  box-shadow:0 10px 28px rgba(8,47,95,.08)!important;
}
body:not(.admin-ui) .poster-container::before,
body:not(.admin-ui) .poster-section::before,
body:not(.admin-ui) .poster-slider::before{
  content:"";
  display:block;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--hoa-gold-500),transparent);
}

/* Poster controls — gold outline, blue body */
body:not(.admin-ui) .poster-prev,
body:not(.admin-ui) .poster-next,
body:not(.admin-ui) .poster-nav button{
  background:var(--hoa-blue-800)!important;
  border:2px solid var(--hoa-gold-500)!important;
  color:#fff!important;
  box-shadow:0 6px 16px rgba(8,47,95,.22)!important;
}
body:not(.admin-ui) .poster-prev:hover,
body:not(.admin-ui) .poster-next:hover,
body:not(.admin-ui) .poster-nav button:hover{
  background:var(--hoa-blue-700)!important;
  box-shadow:0 8px 20px rgba(8,47,95,.26),0 0 0 3px rgba(242,183,5,.12)!important;
}

/* Contact/social — premium blue, gold separators */
body:not(.admin-ui) .contact-section,
body:not(.admin-ui) .social-section{
  background:
    radial-gradient(circle at 90% 0%,rgba(242,183,5,.11),transparent 24%),
    linear-gradient(135deg,var(--hoa-blue-950),var(--hoa-blue-800))!important;
  border-top:2px solid var(--hoa-gold-500)!important;
}
body:not(.admin-ui) .contact-section a,
body:not(.admin-ui) .social-section a{
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(242,183,5,.30)!important;
}
body:not(.admin-ui) .contact-section a:hover,
body:not(.admin-ui) .social-section a:hover{
  background:rgba(242,183,5,.10)!important;
  border-color:rgba(242,183,5,.75)!important;
  transform:translateY(-2px)!important;
}

/* Footer: blue first, gold only as a fine divider */
body:not(.admin-ui) footer,
body:not(.admin-ui) .site-footer,
body:not(.admin-ui) .home-footer{
  background:var(--hoa-blue-950)!important;
  border-top:2px solid var(--hoa-gold-500)!important;
}
body:not(.admin-ui) footer .copyright,
body:not(.admin-ui) .site-footer .copyright,
body:not(.admin-ui) .home-footer .copyright{
  color:rgba(255,255,255,.72)!important;
}
body:not(.admin-ui) footer a:hover,
body:not(.admin-ui) .site-footer a:hover,
body:not(.admin-ui) .home-footer a:hover{
  color:var(--hoa-gold-400)!important;
}

/* Selection/focus */
body:not(.admin-ui) a:focus-visible,
body:not(.admin-ui) button:focus-visible,
body:not(.admin-ui) input:focus-visible,
body:not(.admin-ui) select:focus-visible,
body:not(.admin-ui) textarea:focus-visible{
  outline:2px solid var(--hoa-gold-500)!important;
  outline-offset:3px!important;
}

/* Small gold status pills */
body:not(.admin-ui) .badge,
body:not(.admin-ui) .tag,
body:not(.admin-ui) .status-badge{
  background:var(--hoa-gold-100)!important;
  color:#765600!important;
  border:1px solid rgba(242,183,5,.40)!important;
  font-weight:850!important;
}


/* =========================================================
   HOA V6.0.4 — FRONT PAGE MICRO-POLISH
   Fine visual pass only. Existing structure/function preserved.
   ========================================================= */

:root{
  --hoa-fp-blue:#0B3B73;
  --hoa-fp-blue-deep:#061F40;
  --hoa-fp-blue-soft:#145A9C;
  --hoa-fp-gold:#F2B705;
  --hoa-fp-gold-light:#FFD45A;
  --hoa-fp-cream:#FFF9E6;
  --hoa-fp-line:#E1E8F0;
  --hoa-fp-text:#102A49;
}

/* ---------- GLOBAL FRONT-PAGE RHYTHM ---------- */
body:not(.admin-ui){
  color:var(--hoa-fp-text);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body:not(.admin-ui) main,
body:not(.admin-ui) .main-content,
body:not(.admin-ui) .home-content{
  scroll-behavior:smooth;
}

body:not(.admin-ui) section{
  position:relative;
}

/* ---------- HEADER MICRO POLISH ---------- */
body:not(.admin-ui) header,
body:not(.admin-ui) .site-header,
body:not(.admin-ui) .home-header{
  box-shadow:0 2px 14px rgba(6,31,64,.045)!important;
  backdrop-filter:saturate(125%) blur(7px);
  -webkit-backdrop-filter:saturate(125%) blur(7px);
}

body:not(.admin-ui) .brand img,
body:not(.admin-ui) .logo-wrap img,
body:not(.admin-ui) .brand-wrap img{
  transition:transform .24s ease,filter .24s ease;
}

body:not(.admin-ui) .brand:hover img,
body:not(.admin-ui) .logo-wrap:hover img,
body:not(.admin-ui) .brand-wrap:hover img{
  transform:scale(1.025);
  filter:drop-shadow(0 4px 10px rgba(11,59,115,.16));
}

/* ---------- NAV TEXT + ACTIVE STATE ---------- */
body:not(.admin-ui) nav a,
body:not(.admin-ui) nav button{
  border-radius:8px!important;
  padding-left:10px!important;
  padding-right:10px!important;
}

body:not(.admin-ui) nav a:hover,
body:not(.admin-ui) nav button:hover{
  background:rgba(242,183,5,.065)!important;
}

/* ---------- HERO MICRO DETAILS ---------- */
body:not(.admin-ui) .hero,
body:not(.admin-ui) .home-hero,
body:not(.admin-ui) .hero-section{
  isolation:isolate;
}

body:not(.admin-ui) .hero::after,
body:not(.admin-ui) .home-hero::after,
body:not(.admin-ui) .hero-section::after{
  opacity:.75;
}

body:not(.admin-ui) .hero h1,
body:not(.admin-ui) .home-hero h1,
body:not(.admin-ui) .hero-section h1{
  line-height:1.08!important;
}

body:not(.admin-ui) .hero p,
body:not(.admin-ui) .home-hero p,
body:not(.admin-ui) .hero-section p{
  max-width:720px;
  line-height:1.65!important;
}

/* ---------- SECTION SPACING / DIVIDERS ---------- */
body:not(.admin-ui) .section-title,
body:not(.admin-ui) .home-section-title{
  letter-spacing:-.015em;
}

body:not(.admin-ui) .section-title::before,
body:not(.admin-ui) .home-section-title::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin:0 9px 2px 0;
  border-radius:50%;
  background:var(--hoa-fp-gold);
  box-shadow:0 0 0 4px rgba(242,183,5,.10);
}

/* ---------- COURSE CARDS: INTERNAL HIERARCHY ---------- */
body:not(.admin-ui) .course-card,
body:not(.admin-ui) .courseCard,
body:not(.admin-ui) .content-card,
body:not(.admin-ui) .home-card,
body:not(.admin-ui) .material-card{
  isolation:isolate;
}

body:not(.admin-ui) .course-card h3,
body:not(.admin-ui) .courseCard h3,
body:not(.admin-ui) .content-card h3,
body:not(.admin-ui) .home-card h3,
body:not(.admin-ui) .material-card h3{
  line-height:1.25!important;
}

body:not(.admin-ui) .course-card p,
body:not(.admin-ui) .courseCard p,
body:not(.admin-ui) .content-card p,
body:not(.admin-ui) .home-card p,
body:not(.admin-ui) .material-card p{
  color:#60738A!important;
  line-height:1.55!important;
}

/* Keep gold as an accent, not a full-card background */
body:not(.admin-ui) .course-card .badge,
body:not(.admin-ui) .courseCard .badge,
body:not(.admin-ui) .content-card .badge{
  box-shadow:inset 0 0 0 1px rgba(242,183,5,.08);
}

/* ---------- POSTER AREA ---------- */
body:not(.admin-ui) .poster-container,
body:not(.admin-ui) .poster-section,
body:not(.admin-ui) .poster-slider{
  position:relative;
  background:#fff!important;
  border-radius:16px!important;
  overflow:hidden;
}

body:not(.admin-ui) .poster-container img,
body:not(.admin-ui) .poster-section img,
body:not(.admin-ui) .poster-slider img{
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             filter .35s ease;
}

body:not(.admin-ui) .poster-container:hover img,
body:not(.admin-ui) .poster-section:hover img,
body:not(.admin-ui) .poster-slider:hover img{
  filter:saturate(1.025) contrast(1.01);
}

/* ---------- POSTER DOTS / INDICATORS ---------- */
body:not(.admin-ui) .poster-dots button,
body:not(.admin-ui) .poster-indicators button,
body:not(.admin-ui) .carousel-indicators button{
  transition:width .22s ease,background-color .22s ease,
             opacity .22s ease,transform .22s ease;
}

body:not(.admin-ui) .poster-dots button.active,
body:not(.admin-ui) .poster-indicators button.active,
body:not(.admin-ui) .carousel-indicators button.active{
  background:var(--hoa-fp-gold)!important;
  transform:scale(1.05);
}

/* ---------- CTA MICRO-POLISH ---------- */
body:not(.admin-ui) .btn-primary,
body:not(.admin-ui) .primary-btn,
body:not(.admin-ui) .cta-primary,
body:not(.admin-ui) .btn-gold,
body:not(.admin-ui) .gold-btn,
body:not(.admin-ui) .cta-gold{
  min-height:42px;
  border-radius:9px!important;
  letter-spacing:.005em;
}

body:not(.admin-ui) .btn-primary:focus-visible,
body:not(.admin-ui) .primary-btn:focus-visible,
body:not(.admin-ui) .cta-primary:focus-visible,
body:not(.admin-ui) .btn-gold:focus-visible,
body:not(.admin-ui) .gold-btn:focus-visible,
body:not(.admin-ui) .cta-gold:focus-visible{
  box-shadow:0 0 0 3px rgba(242,183,5,.20)!important;
}

/* ---------- FREE CONTENT / FEATURED AREA ---------- */
body:not(.admin-ui) .free-content,
body:not(.admin-ui) .featured-section,
body:not(.admin-ui) .home-content-section{
  position:relative;
}

body:not(.admin-ui) .free-content::before,
body:not(.admin-ui) .featured-section::before,
body:not(.admin-ui) .home-content-section::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:56px;
  height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--hoa-fp-gold),transparent);
}

/* ---------- CONTACT / SOCIAL ICON MICRO-POLISH ---------- */
body:not(.admin-ui) .contact-section a,
body:not(.admin-ui) .social-section a{
  border-radius:10px!important;
  transition:transform .2s ease,background-color .2s ease,
             border-color .2s ease,box-shadow .2s ease!important;
}

body:not(.admin-ui) .contact-section a:hover,
body:not(.admin-ui) .social-section a:hover{
  box-shadow:0 7px 18px rgba(6,31,64,.13);
}

body:not(.admin-ui) .contact-section svg,
body:not(.admin-ui) .social-section svg,
body:not(.admin-ui) .contact-section i,
body:not(.admin-ui) .social-section i{
  transition:transform .2s ease,color .2s ease;
}

body:not(.admin-ui) .contact-section a:hover svg,
body:not(.admin-ui) .social-section a:hover svg,
body:not(.admin-ui) .contact-section a:hover i,
body:not(.admin-ui) .social-section a:hover i{
  transform:translateY(-1px);
  color:var(--hoa-fp-gold-light)!important;
}

/* ---------- FOOTER ---------- */
body:not(.admin-ui) footer,
body:not(.admin-ui) .site-footer,
body:not(.admin-ui) .home-footer{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

body:not(.admin-ui) footer small,
body:not(.admin-ui) .site-footer small,
body:not(.admin-ui) .home-footer small{
  line-height:1.55;
}

/* ---------- FORM / LOGIN SURFACES ON FRONT PAGE ---------- */
body:not(.admin-ui) input,
body:not(.admin-ui) select,
body:not(.admin-ui) textarea{
  border-color:#D7E1EC;
  transition:border-color .2s ease,box-shadow .2s ease,
             background-color .2s ease;
}

body:not(.admin-ui) input:focus,
body:not(.admin-ui) select:focus,
body:not(.admin-ui) textarea:focus{
  border-color:rgba(20,90,156,.60)!important;
  box-shadow:0 0 0 3px rgba(242,183,5,.13)!important;
  outline:none!important;
}

/* ---------- RESPONSIVE MICRO-POLISH ---------- */
@media(max-width:700px){
  body:not(.admin-ui) nav a,
  body:not(.admin-ui) nav button{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  body:not(.admin-ui) .hero h1,
  body:not(.admin-ui) .home-hero h1,
  body:not(.admin-ui) .hero-section h1{
    line-height:1.12!important;
  }

  body:not(.admin-ui) .section-title::before,
  body:not(.admin-ui) .home-section-title::before{
    width:6px;
    height:6px;
    margin-right:7px;
  }
}

@media(prefers-reduced-motion:reduce){
  body:not(.admin-ui) *,
  body:not(.admin-ui) *::before,
  body:not(.admin-ui) *::after{
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}


/* =========================================================
   HOA V6.0.4 — MODERN FRONT PAGE + MOTION SYSTEM
   Visual enhancement layer only.
   Existing application logic and sections are preserved.
   ========================================================= */

:root{
  --hoa-modern-blue:#0B3B73;
  --hoa-modern-deep:#061F40;
  --hoa-modern-blue2:#145A9C;
  --hoa-modern-gold:#F2B705;
  --hoa-modern-gold2:#FFD45A;
  --hoa-modern-white:#FFFFFF;
  --hoa-modern-bg:#F6F9FD;
  --hoa-modern-line:#DCE6F0;
}

/* ---------- GLOBAL ---------- */
body:not(.admin-ui){
  background:
    radial-gradient(circle at 7% 4%,rgba(20,90,156,.075),transparent 25%),
    radial-gradient(circle at 94% 10%,rgba(242,183,5,.075),transparent 21%),
    var(--hoa-modern-bg)!important;
  overflow-x:hidden;
}

body:not(.admin-ui)::selection{
  background:rgba(242,183,5,.30);
  color:var(--hoa-modern-deep);
}

/* ---------- HEADER GLASS EFFECT ---------- */
body:not(.admin-ui) header,
body:not(.admin-ui) .site-header,
body:not(.admin-ui) .home-header{
  background:rgba(255,255,255,.90)!important;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 4px 24px rgba(6,31,64,.055)!important;
  z-index:100;
}

/* ---------- HERO MODERNIZATION ---------- */
body:not(.admin-ui) .hero,
body:not(.admin-ui) .home-hero,
body:not(.admin-ui) .hero-section{
  isolation:isolate;
  background:
    radial-gradient(circle at 78% 18%,rgba(242,183,5,.16),transparent 18%),
    radial-gradient(circle at 18% 90%,rgba(29,111,184,.22),transparent 28%),
    linear-gradient(125deg,#061F40 0%,#0B3B73 55%,#145A9C 100%)!important;
  box-shadow:0 18px 50px rgba(6,31,64,.20)!important;
}

/* Decorative moving light */
body:not(.admin-ui) .hero::after,
body:not(.admin-ui) .home-hero::after,
body:not(.admin-ui) .hero-section::after{
  content:"";
  position:absolute;
  width:430px;
  height:430px;
  right:-170px;
  top:-230px;
  border-radius:50%;
  border:1px solid rgba(242,183,5,.22);
  box-shadow:
    0 0 0 28px rgba(242,183,5,.035),
    0 0 0 58px rgba(242,183,5,.025);
  animation:hoaHeroOrbit 12s ease-in-out infinite alternate;
  pointer-events:none;
}

@keyframes hoaHeroOrbit{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  100%{transform:translate3d(-28px,18px,0) rotate(7deg)}
}

/* ---------- HERO CONTENT ---------- */
body:not(.admin-ui) .hero h1,
body:not(.admin-ui) .home-hero h1,
body:not(.admin-ui) .hero-section h1{
  animation:hoaHeroTextIn .65s cubic-bezier(.22,.61,.36,1) both;
}

body:not(.admin-ui) .hero p,
body:not(.admin-ui) .home-hero p,
body:not(.admin-ui) .hero-section p{
  animation:hoaHeroTextIn .65s .10s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes hoaHeroTextIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---------- MODERN SECTION REVEAL ---------- */
@keyframes hoaSectionReveal{
  from{
    opacity:0;
    transform:translateY(18px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

body:not(.admin-ui) section{
  animation:hoaSectionReveal .55s cubic-bezier(.22,.61,.36,1) both;
}

/* ---------- MODERN CARDS ---------- */
body:not(.admin-ui) .course-card,
body:not(.admin-ui) .courseCard,
body:not(.admin-ui) .content-card,
body:not(.admin-ui) .home-card,
body:not(.admin-ui) .material-card{
  transform:translateZ(0);
  will-change:transform,box-shadow;
  transition:
    transform .28s cubic-bezier(.22,.61,.36,1),
    box-shadow .28s ease,
    border-color .22s ease!important;
}

body:not(.admin-ui) .course-card:hover,
body:not(.admin-ui) .courseCard:hover,
body:not(.admin-ui) .content-card:hover,
body:not(.admin-ui) .home-card:hover,
body:not(.admin-ui) .material-card:hover{
  transform:translateY(-6px)!important;
  box-shadow:
    0 18px 38px rgba(6,31,64,.12),
    0 2px 0 rgba(242,183,5,.35)!important;
}

body:not(.admin-ui) .course-card::after,
body:not(.admin-ui) .courseCard::after,
body:not(.admin-ui) .content-card::after,
body:not(.admin-ui) .home-card::after,
body:not(.admin-ui) .material-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,.35) 48%,
    transparent 65%
  );
  transform:translateX(-120%);
  transition:transform .65s ease;
  pointer-events:none;
}

body:not(.admin-ui) .course-card:hover::after,
body:not(.admin-ui) .courseCard:hover::after,
body:not(.admin-ui) .content-card:hover::after,
body:not(.admin-ui) .home-card:hover::after,
body:not(.admin-ui) .material-card:hover::after{
  transform:translateX(120%);
}

/* ---------- MODERN POSTER STAGE ---------- */
body:not(.admin-ui) .poster-container,
body:not(.admin-ui) .poster-section,
body:not(.admin-ui) .poster-slider{
  box-shadow:
    0 14px 38px rgba(6,31,64,.10),
    0 0 0 1px rgba(255,255,255,.70) inset!important;
}

body:not(.admin-ui) .poster-prev,
body:not(.admin-ui) .poster-next,
body:not(.admin-ui) .poster-nav button{
  transform:translateZ(0);
  transition:
    transform .22s cubic-bezier(.22,.61,.36,1),
    box-shadow .22s ease,
    background-color .22s ease!important;
}

body:not(.admin-ui) .poster-prev:hover,
body:not(.admin-ui) .poster-next:hover,
body:not(.admin-ui) .poster-nav button:hover{
  transform:scale(1.08)!important;
}

/* ---------- MODERN CTA ---------- */
body:not(.admin-ui) .btn-primary,
body:not(.admin-ui) .primary-btn,
body:not(.admin-ui) .cta-primary,
body:not(.admin-ui) .btn-gold,
body:not(.admin-ui) .gold-btn,
body:not(.admin-ui) .cta-gold{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

body:not(.admin-ui) .btn-primary::after,
body:not(.admin-ui) .primary-btn::after,
body:not(.admin-ui) .cta-primary::after,
body:not(.admin-ui) .btn-gold::after,
body:not(.admin-ui) .gold-btn::after,
body:not(.admin-ui) .cta-gold::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:45%;
  left:-60%;
  background:linear-gradient(
    100deg,
    transparent,
    rgba(255,255,255,.24),
    transparent
  );
  transform:skewX(-18deg);
  transition:left .55s ease;
  pointer-events:none;
}

body:not(.admin-ui) .btn-primary:hover::after,
body:not(.admin-ui) .primary-btn:hover::after,
body:not(.admin-ui) .cta-primary:hover::after,
body:not(.admin-ui) .btn-gold:hover::after,
body:not(.admin-ui) .gold-btn:hover::after,
body:not(.admin-ui) .cta-gold:hover::after{
  left:120%;
}

/* ---------- MODERN CONTACT / SOCIAL ---------- */
body:not(.admin-ui) .contact-section a,
body:not(.admin-ui) .social-section a{
  transform:translateZ(0);
  will-change:transform;
}

body:not(.admin-ui) .contact-section a:hover,
body:not(.admin-ui) .social-section a:hover{
  transform:translateY(-4px)!important;
  box-shadow:0 12px 25px rgba(0,0,0,.15)!important;
}

/* ---------- SCROLLBAR ---------- */
body:not(.admin-ui)::-webkit-scrollbar{
  width:9px;
}
body:not(.admin-ui)::-webkit-scrollbar-track{
  background:#EDF2F7;
}
body:not(.admin-ui)::-webkit-scrollbar-thumb{
  background:linear-gradient(
    180deg,
    var(--hoa-modern-blue),
    var(--hoa-modern-blue2)
  );
  border-radius:10px;
  border:2px solid #EDF2F7;
}
body:not(.admin-ui)::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(
    180deg,
    var(--hoa-modern-blue2),
    var(--hoa-modern-gold)
  );
}

/* ---------- MOBILE ---------- */
@media(max-width:700px){
  body:not(.admin-ui) .hero::after,
  body:not(.admin-ui) .home-hero::after,
  body:not(.admin-ui) .hero-section::after{
    width:300px;
    height:300px;
    right:-145px;
    top:-160px;
  }

  body:not(.admin-ui) .course-card:hover,
  body:not(.admin-ui) .courseCard:hover,
  body:not(.admin-ui) .content-card:hover,
  body:not(.admin-ui) .home-card:hover,
  body:not(.admin-ui) .material-card:hover{
    transform:translateY(-3px)!important;
  }
}

/* ---------- ACCESSIBILITY ---------- */
@media(prefers-reduced-motion:reduce){
  body:not(.admin-ui) *,
  body:not(.admin-ui) *::before,
  body:not(.admin-ui) *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}


/* =========================================================
   HOA V6.0.4 — FREE CONTENT MODAL POSITION FIX
   Always opens as a true viewport overlay, centered on the
   current screen instead of appearing at the document top.
   ========================================================= */

#hoaV648FreeContentModal{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  height:100dvh !important;
  margin:0 !important;
  padding:
    max(20px,env(safe-area-inset-top))
    max(20px,env(safe-area-inset-right))
    max(20px,env(safe-area-inset-bottom))
    max(20px,env(safe-area-inset-left)) !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  z-index:2147483000 !important;
}

#hoaV648FreeContentModal.hidden{
  display:none !important;
}

#hoaV648FreeContentModal .hoa-v648-modal-backdrop{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  background:rgba(4,20,40,.68) !important;
  backdrop-filter:blur(7px) !important;
  -webkit-backdrop-filter:blur(7px) !important;
}

#hoaV648FreeContentModal .hoa-v648-modal-card{
  position:relative !important;
  z-index:1 !important;
  width:min(720px,calc(100vw - 40px)) !important;
  max-width:720px !important;
  max-height:min(760px,calc(100dvh - 40px)) !important;
  margin:0 !important;
  overflow:auto !important;
  transform:none !important;
  opacity:1 !important;
  background:#fff !important;
  border:1px solid rgba(242,183,5,.35) !important;
  box-shadow:
    0 30px 90px rgba(2,20,45,.32),
    0 0 0 1px rgba(255,255,255,.55) inset !important;
  animation:hoaFreeModalIn .25s cubic-bezier(.22,.61,.36,1) both !important;
}

@keyframes hoaFreeModalIn{
  from{
    opacity:0;
    transform:translateY(10px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* Keep the modal above any sticky navigation or floating controls. */
#hoaV648FreeContentModal .hoa-v648-modal-close{
  z-index:2 !important;
}

html.hoa-free-modal-open,
body.hoa-free-modal-open{
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

@media(max-width:760px){
  #hoaV648FreeContentModal{
    padding:
      max(12px,env(safe-area-inset-top))
      max(12px,env(safe-area-inset-right))
      max(12px,env(safe-area-inset-bottom))
      max(12px,env(safe-area-inset-left)) !important;
  }

  #hoaV648FreeContentModal .hoa-v648-modal-card{
    width:100% !important;
    max-width:none !important;
    max-height:calc(100dvh - 24px) !important;
    border-radius:18px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  #hoaV648FreeContentModal .hoa-v648-modal-card{
    animation:none !important;
  }
}


/* =========================================================
   HOA V6.0.4 — HERO FEATURE CARDS
   Cursor-reactive motion + refined HOA golden-yellow glow.
   Existing scroll/parallax motion remains intact.
   ========================================================= */

@media (pointer:fine){
  #hoaFrontPage .hoa-front-visual{
    position:relative !important;
    isolation:isolate !important;
    perspective:900px !important;
  }

  /* A soft golden spotlight follows the cursor behind the cards. */
  #hoaFrontPage .hoa-front-visual::before{
    content:"" !important;
    position:absolute !important;
    width:280px !important;
    height:280px !important;
    left:calc(50% + var(--hoa-cursor-x, 0px)) !important;
    top:calc(50% + var(--hoa-cursor-y, 0px)) !important;
    transform:translate(-50%,-50%) !important;
    border-radius:50% !important;
    pointer-events:none !important;
    z-index:-1 !important;
    background:radial-gradient(
      circle,
      rgb(242 183 5 / var(--hoa-cursor-glow, 0)) 0%,
      rgb(242 183 5 / calc(var(--hoa-cursor-glow, 0) * .42)) 27%,
      transparent 70%
    ) !important;
    filter:blur(12px) !important;
    transition:
      left .12s ease-out,
      top .12s ease-out,
      opacity .25s ease !important;
  }

  #hoaFrontPage .hoa-front-hero .hoa-front-feature{
    position:relative !important;
    overflow:visible !important;
    will-change:translate,box-shadow,filter !important;
    transition:
      translate .16s cubic-bezier(.22,.61,.36,1),
      box-shadow .18s ease,
      border-color .18s ease,
      filter .18s ease !important;

    border-color:rgb(148 163 184 / calc(.28 - var(--hoa-card-gold,0) * .08)) !important;

    box-shadow:
      0 14px 34px rgb(15 39 68 / .08),
      0 0 0 1px rgb(242 183 5 / calc(var(--hoa-card-gold,0) * .30)),
      0 0 34px rgb(242 183 5 / calc(var(--hoa-card-gold,0) * .30)),
      0 0 70px rgb(242 183 5 / calc(var(--hoa-card-gold,0) * .10)) !important;
  }

  /* Golden light spills outside the card rather than colouring the card itself. */
  #hoaFrontPage .hoa-front-hero .hoa-front-feature::after{
    content:"" !important;
    position:absolute !important;
    inset:-9px !important;
    border-radius:23px !important;
    pointer-events:none !important;
    z-index:-1 !important;
    background:radial-gradient(
      circle at var(--hoa-light-x,50%) var(--hoa-light-y,50%),
      rgb(242 183 5 / calc(var(--hoa-card-gold,0) * .25)) 0%,
      rgb(242 183 5 / calc(var(--hoa-card-gold,0) * .10)) 25%,
      transparent 68%
    ) !important;
    filter:blur(8px) !important;
    opacity:var(--hoa-card-gold,0) !important;
    transition:opacity .16s ease !important;
  }

  #hoaFrontPage .hoa-front-hero .hoa-front-feature-icon{
    transition:
      transform .18s cubic-bezier(.22,.61,.36,1),
      box-shadow .18s ease,
      background .18s ease !important;
    box-shadow:
      0 0 0 1px rgb(242 183 5 / calc(var(--hoa-card-gold,0) * .20)),
      0 0 20px rgb(242 183 5 / calc(var(--hoa-card-gold,0) * .20)) !important;
  }

  #hoaFrontPage .hoa-front-hero .hoa-front-feature b{
    transition:color .18s ease !important;
  }

  #hoaFrontPage .hoa-front-hero .hoa-front-feature:hover{
    filter:saturate(1.03) !important;
    border-color:rgb(242 183 5 / .52) !important;
  }

  #hoaFrontPage .hoa-front-hero .hoa-front-feature:hover b{
    color:#9a7100 !important;
  }

  #hoaFrontPage .hoa-front-hero .hoa-front-feature:hover .hoa-front-feature-icon{
    background:#fff8d9 !important;
  }

  #hoaFrontPage .hoa-front-hero .hoa-front-feature:nth-child(1){
    --hoa-depth:1;
  }
  #hoaFrontPage .hoa-front-hero .hoa-front-feature:nth-child(2){
    --hoa-depth:1.15;
  }
  #hoaFrontPage .hoa-front-hero .hoa-front-feature:nth-child(3){
    --hoa-depth:1.3;
  }
}

@media (prefers-reduced-motion:reduce){
  #hoaFrontPage .hoa-front-visual::before{
    transition:none !important;
  }
  #hoaFrontPage .hoa-front-hero .hoa-front-feature,
  #hoaFrontPage .hoa-front-hero .hoa-front-feature-icon{
    transition:none !important;
  }
}


/* =========================================================
   HOA V6.0.4 — POSTER EDGE FIT
   The poster frame follows the actual poster aspect ratio.
   No large artificial white bars around the uploaded poster.
   Maximum visual frame gap: ~3mm on a standard desktop scale.
   ========================================================= */

#hoaV643PosterWrap.hoa643-poster-wrap{
  --hoa-poster-gap:11px;
}

/* The uploaded image is the poster. Let its own artwork define
   the visible white area instead of padding it with another white box. */
#hoaV643PosterWrap .hoa643-poster-slide{
  padding:0 !important;
  box-sizing:border-box !important;
  background:transparent !important;
  overflow:hidden !important;
  border-radius:18px !important;
}

#hoaV643PosterWrap .hoa643-poster-slide img{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  margin:0 !important;
  object-fit:fill !important;
  object-position:center !important;
  background:transparent !important;
  border-radius:inherit !important;
}

/* Keep the poster itself crisp; do not add a second white surface. */
#hoaV643PosterWrap .hoa643-poster-shade{
  display:none !important;
}

/* A very small frame line is allowed, but no oversized white border. */
#hoaV643PosterWrap .hoa643-poster-center{
  box-shadow:
    0 20px 48px rgba(15,39,68,.20),
    0 0 0 1px rgba(203,213,225,.60) !important;
}

/* Mobile: maintain the same edge-fit rule. */
@media(max-width:700px){
  #hoaV643PosterWrap .hoa643-poster-slide{
    border-radius:14px !important;
  }
}


/* HOA V6.0.4 — preserve uploaded poster proportions.
   The poster is never stretched or squeezed. The small surrounding
   frame gap is retained, while the image keeps its natural ratio. */
#hoaFrontPage .hoa-front-poster,
#hoaFrontPage .hoa-poster-card,
#hoaFrontPage .poster-card{
  overflow:hidden !important;
}

#hoaFrontPage .hoa-front-poster img,
#hoaFrontPage .hoa-poster-card img,
#hoaFrontPage .poster-card img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  aspect-ratio:auto !important;
}

/* If the poster is wrapped by a media frame, let the frame follow
   the image instead of forcing a fixed-height crop. */
#hoaFrontPage .hoa-front-poster-media,
#hoaFrontPage .hoa-poster-media,
#hoaFrontPage .poster-media{
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
}

/* Keep the requested very small edge gap without altering the artwork. */
#hoaFrontPage .hoa-front-poster{
  padding:3px !important;
  box-sizing:border-box !important;
}


/* =========================================================
   HOA V6.0.4 — POSTER NATURAL SIZE + 3mm WHITE SURROUND
   Critical fix:
   - NEVER stretch/squeeze the uploaded poster.
   - Preserve its exact natural aspect ratio.
   - Add only a small ~3mm white surround around it.
   ========================================================= */

#hoaV643PosterWrap .hoa643-poster-slide{
  box-sizing:border-box !important;
  padding:11px !important; /* ≈3mm at 96dpi */
  background:#fff !important;
  overflow:hidden !important;
  border-radius:18px !important;
  display:block !important;
}

#hoaV643PosterWrap .hoa643-poster-slide img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#fff !important;
  border-radius:0 !important;
}

#hoaV643PosterWrap .hoa643-poster-center{
  box-shadow:
    0 20px 48px rgba(15,39,68,.20),
    0 0 0 1px rgba(203,213,225,.60) !important;
}

@media(max-width:700px){
  #hoaV643PosterWrap .hoa643-poster-slide{
    padding:8px !important;
    border-radius:14px !important;
  }
}


/* HOA V6.0.4 V9 — authoritative poster presentation.
   The uploaded artwork keeps its exact aspect ratio.
   The white frame is approximately 3mm (11px desktop / 8px mobile).
   No fixed poster width/height and no object-fit:cover are used. */
#hoaV643PosterWrap.hoa643-poster-wrap{
  --hoa-v9-stage-h:420px;
  position:relative !important;
  width:100% !important;
  height:var(--hoa-v9-stage-h) !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
  display:block !important;
  overflow:hidden !important;
  border-radius:22px !important;
}

#hoaV643PosterWrap .hoa643-poster-slide{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  width:var(--hoa-v9-slide-w,320px) !important;
  height:var(--hoa-v9-slide-h,240px) !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:var(--hoa-v9-gap,11px) !important;
  box-sizing:border-box !important;
  aspect-ratio:auto !important;
  background:#fff !important;
  border:1px solid rgba(203,213,225,.78) !important;
  border-radius:18px !important;
  overflow:hidden !important;
  transition:transform .55s cubic-bezier(.22,.8,.24,1),opacity .45s ease,filter .45s ease,box-shadow .45s ease !important;
  cursor:pointer !important;
  will-change:transform,opacity,filter !important;
}

#hoaV643PosterWrap .hoa643-poster-slide img{
  position:static !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#fff !important;
  border-radius:0 !important;
}

#hoaV643PosterWrap .hoa643-poster-shade{
  position:absolute !important;
  inset:var(--hoa-v9-gap,11px) !important;
  pointer-events:none !important;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(10,31,55,.035)) !important;
  z-index:2 !important;
}

#hoaV643PosterWrap .hoa643-poster-left{
  transform:translate3d(calc(-50% - var(--hoa-v9-side-offset,270px)),-50%,0) scale(.78) !important;
  opacity:.30 !important;
  filter:blur(2.8px) saturate(.68) !important;
  z-index:1 !important;
  box-shadow:0 10px 26px rgba(15,39,68,.08) !important;
}
#hoaV643PosterWrap .hoa643-poster-center{
  transform:translate3d(-50%,-50%,0) !important;
  opacity:1 !important;
  filter:none !important;
  z-index:4 !important;
  box-shadow:0 20px 48px rgba(15,39,68,.20),0 0 0 1px rgba(203,213,225,.65) !important;
}
#hoaV643PosterWrap .hoa643-poster-right{
  transform:translate3d(calc(-50% + var(--hoa-v9-side-offset,270px)),-50%,0) scale(.78) !important;
  opacity:.30 !important;
  filter:blur(2.8px) saturate(.68) !important;
  z-index:1 !important;
  box-shadow:0 10px 26px rgba(15,39,68,.08) !important;
}

/* Keep carousel controls, but never place them inside the poster artwork. */
#hoaV643PosterWrap .hoa643-carousel-arrow{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:12 !important;
  width:44px !important;height:44px !important;
  min-width:44px !important;min-height:44px !important;
  padding:0 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  border:1px solid rgba(18,63,112,.16) !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.96) !important;
  color:#123f70 !important;
  font-size:0 !important;
  box-shadow:0 8px 22px rgba(15,39,68,.15) !important;
  cursor:pointer !important;
  backdrop-filter:blur(8px) !important;
}
#hoaV643PosterWrap .hoa643-carousel-arrow::before{display:block !important;font-family:Arial,sans-serif !important;font-size:29px !important;line-height:1 !important}
#hoaV643PosterWrap .hoa643-carousel-prev{left:14px !important}
#hoaV643PosterWrap .hoa643-carousel-prev::before{content:"‹" !important}
#hoaV643PosterWrap .hoa643-carousel-next{right:14px !important}
#hoaV643PosterWrap .hoa643-carousel-next::before{content:"›" !important}

@media(max-width:700px){
  #hoaV643PosterWrap.hoa643-poster-wrap{--hoa-v9-gap:8px;border-radius:18px !important}
  #hoaV643PosterWrap .hoa643-poster-slide{border-radius:14px !important}
  #hoaV643PosterWrap .hoa643-poster-left{transform:translate3d(calc(-50% - var(--hoa-v9-side-offset,150px)),-50%,0) scale(.68) !important;opacity:.24 !important;filter:blur(2px) saturate(.65) !important}
  #hoaV643PosterWrap .hoa643-poster-right{transform:translate3d(calc(-50% + var(--hoa-v9-side-offset,150px)),-50%,0) scale(.68) !important;opacity:.24 !important;filter:blur(2px) saturate(.65) !important}
  #hoaV643PosterWrap .hoa643-carousel-arrow{width:38px !important;height:38px !important;min-width:38px !important;min-height:38px !important}
  #hoaV643PosterWrap .hoa643-carousel-arrow::before{font-size:25px !important}
  #hoaV643PosterWrap .hoa643-carousel-prev{left:7px !important}
  #hoaV643PosterWrap .hoa643-carousel-next{right:7px !important}
}


#hoaV643PosterWrap.hoa643-poster-wrap{
  /* premium studio surface: white + HOA gold ambient light */
  background:
    radial-gradient(ellipse 46% 72% at 50% 47%, rgba(255,255,255,.99) 0%, rgba(255,255,255,.97) 44%, rgba(247,249,252,.96) 72%, rgba(234,240,248,.98) 100%) !important;
  border:1px solid rgba(18,63,112,.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -22px 45px rgba(18,63,112,.035),
    0 18px 42px rgba(15,39,68,.08) !important;
  perspective:1500px !important;
  perspective-origin:50% 50% !important;
  isolation:isolate !important;
}

/* Very subtle HOA-gold ambient halo behind the hero poster. */
#hoaV643PosterWrap.hoa643-poster-wrap::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:min(58%,760px) !important;
  height:min(88%,560px) !important;
  transform:translate(-50%,-50%) !important;
  border-radius:34px !important;
  background:radial-gradient(ellipse,rgba(231,173,36,.12) 0%,rgba(231,173,36,.055) 38%,rgba(231,173,36,0) 72%) !important;
  filter:blur(18px) !important;
  pointer-events:none !important;
  z-index:0 !important;
}

#hoaV643PosterWrap .hoa643-poster-slide{
  transform-style:preserve-3d !important;
  backface-visibility:hidden !important;
  border:1px solid rgba(255,255,255,.96) !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.995),rgba(250,251,253,.985)) !important;
  box-shadow:
    0 2px 3px rgba(15,39,68,.07),
    0 12px 24px rgba(15,39,68,.12),
    0 28px 58px rgba(15,39,68,.10),
    0 0 0 1px rgba(18,63,112,.045) !important;
  transition:
    transform .68s cubic-bezier(.18,.82,.2,1),
    opacity .48s ease,
    filter .48s ease,
    box-shadow .48s ease !important;
}

/* Crisp inner edge: the white surround remains the agreed ~3mm. */
#hoaV643PosterWrap .hoa643-poster-slide::before{
  content:"" !important;
  position:absolute !important;
  inset:var(--hoa-v9-gap,11px) !important;
  border:1px solid rgba(18,63,112,.045) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92) !important;
  pointer-events:none !important;
  z-index:5 !important;
}

/* A controlled glass highlight gives the card physical depth without washing out artwork. */
#hoaV643PosterWrap .hoa643-poster-slide::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  background:linear-gradient(120deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 24%,rgba(255,255,255,0) 78%,rgba(231,173,36,.045) 100%) !important;
  pointer-events:none !important;
  z-index:6 !important;
}

#hoaV643PosterWrap .hoa643-poster-center{
  transform:translate3d(-50%,-50%,0) rotateX(.35deg) rotateY(0deg) !important;
  box-shadow:
    0 3px 5px rgba(15,39,68,.08),
    0 16px 30px rgba(15,39,68,.16),
    0 34px 70px rgba(15,39,68,.14),
    0 0 0 1px rgba(231,173,36,.18) !important;
}

#hoaV643PosterWrap .hoa643-poster-center:hover{
  transform:translate3d(-50%,-52%,0) rotateX(.15deg) rotateY(0deg) scale(1.012) !important;
  box-shadow:
    0 4px 7px rgba(15,39,68,.08),
    0 20px 38px rgba(15,39,68,.18),
    0 42px 82px rgba(15,39,68,.15),
    0 0 0 1px rgba(231,173,36,.30),
    0 0 34px rgba(231,173,36,.10) !important;
}

#hoaV643PosterWrap .hoa643-poster-left{
  transform:translate3d(calc(-50% - var(--hoa-v9-side-offset,270px)),-50%,0) rotateY(11deg) rotateX(.4deg) scale(.78) !important;
  transform-origin:100% 50% !important;
  box-shadow:8px 12px 28px rgba(15,39,68,.13),-1px 0 0 rgba(231,173,36,.08) !important;
}
#hoaV643PosterWrap .hoa643-poster-right{
  transform:translate3d(calc(-50% + var(--hoa-v9-side-offset,270px)),-50%,0) rotateY(-11deg) rotateX(.4deg) scale(.78) !important;
  transform-origin:0 50% !important;
  box-shadow:-8px 12px 28px rgba(15,39,68,.13),1px 0 0 rgba(231,173,36,.08) !important;
}

/* Gold-accent navigation buttons. */
#hoaV643PosterWrap .hoa643-carousel-arrow{
  border-color:rgba(231,173,36,.30) !important;
  background:linear-gradient(145deg,#fff,#f8fafc) !important;
  box-shadow:0 7px 18px rgba(15,39,68,.13),0 0 0 1px rgba(231,173,36,.07) !important;
}
#hoaV643PosterWrap .hoa643-carousel-arrow:hover{
  color:#0b3768 !important;
  border-color:rgba(231,173,36,.58) !important;
  box-shadow:0 10px 24px rgba(15,39,68,.17),0 0 20px rgba(231,173,36,.12) !important;
}

#hoaV643PosterNav .hoa643-dot.active{
  background:linear-gradient(90deg,#123f70,#e7ad24) !important;
  box-shadow:0 2px 8px rgba(231,173,36,.20) !important;
}

@media(max-width:700px){
  #hoaV643PosterWrap.hoa643-poster-wrap{perspective:1100px !important}
  #hoaV643PosterWrap .hoa643-poster-left{
    transform:translate3d(calc(-50% - var(--hoa-v9-side-offset,150px)),-50%,0) rotateY(9deg) scale(.68) !important;
  }
  #hoaV643PosterWrap .hoa643-poster-right{
    transform:translate3d(calc(-50% + var(--hoa-v9-side-offset,150px)),-50%,0) rotateY(-9deg) scale(.68) !important;
  }
  #hoaV643PosterWrap .hoa643-poster-center:hover{
    transform:translate3d(-50%,-51%,0) scale(1.008) !important;
  }
}

@media(prefers-reduced-motion:reduce){
  #hoaV643PosterWrap .hoa643-poster-slide,
  #hoaV643PosterWrap .hoa643-carousel-arrow{transition:none !important}
}

body{font-family:Arial;padding:28px;color:#172033}h1{color:#173f6b}table{width:100%;border-collapse:collapse}th,td{border:1px solid #cbd5e1;padding:7px;font-size:12px}th{background:#eef4fb}


/* HOA V6.2.11 — Restore previous typography feel. */
:root { --hoa-font-sans: Arial, Helvetica, sans-serif; }


/* HOA V6.2.12 — Restore the exact V6.2.10 typography used before the V6.2.11 rollback. */
:root {
  --hoa-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}
html, body, button, input, select, textarea {
  font-family: var(--hoa-font-sans) !important;
}


/* =========================================================
   HOA V6.1.1 — FREE CONTENT ADMIN WORKSPACE
   UI/navigation layer only. Existing DB/RPC/Auth workflows
   remain unchanged.
   ========================================================= */
body.admin-ui #adminNavFreeContent{
  position:relative!important;
  border-left:3px solid #f2b705!important;
}
body.admin-ui #adminNavFreeContent .adminRefIcon{color:#f2b705!important}
body.admin-ui #adminNavFreeContent.active{
  background:linear-gradient(90deg,#1674e8,#2a83ed)!important;
  border-left-color:#f2b705!important;
}
#adminSectionFreeContentPanel .hoa-v611-free-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:0 0 18px;padding:10px;
  border:1px solid #dce5ef;border-radius:12px;background:#f7faff;
}
#adminSectionFreeContentPanel .hoa-v611-free-tabs{display:flex;gap:7px;flex-wrap:wrap}
#adminSectionFreeContentPanel .hoa-v611-free-tab{
  border:1px solid #d6e1ec;background:#fff;color:#173f6b;border-radius:9px;
  padding:9px 12px;font:800 12px/1 Arial,sans-serif;cursor:pointer;
}
#adminSectionFreeContentPanel .hoa-v611-free-tab.active{
  background:#0b3b73;color:#fff;border-color:#0b3b73;
  box-shadow:0 4px 12px rgba(11,59,115,.16);
}
#adminSectionFreeContentPanel .hoa-v611-free-toolbar-note{font-size:11px;color:#64748b}
#adminSectionFreeContentPanel .hoa-v611-free-area{display:none}
#adminSectionFreeContentPanel .hoa-v611-free-area.active{display:block}
#adminSectionFreeContentPanel .hoa-v611-free-stat-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 16px;
}
#adminSectionFreeContentPanel .hoa-v611-free-stat{
  padding:12px 14px;border:1px solid #dce5ef;border-radius:11px;background:#fff;
}
#adminSectionFreeContentPanel .hoa-v611-free-stat b{display:block;font-size:21px;color:#0b3b73}
#adminSectionFreeContentPanel .hoa-v611-free-stat span{font-size:11px;color:#64748b}
@media(max-width:700px){
  #adminSectionFreeContentPanel .hoa-v611-free-stat-grid{grid-template-columns:1fr}
  #adminSectionFreeContentPanel .hoa-v611-free-toolbar{align-items:stretch}
  #adminSectionFreeContentPanel .hoa-v611-free-tabs{width:100%}
  #adminSectionFreeContentPanel .hoa-v611-free-tab{flex:1;min-width:0}
}


:root{--hoa606-blue:#173f6b;--hoa606-gold:#d9a441;--hoa606-bg:#f7faff;--hoa606-border:#d8e3ef;--hoa606-muted:#64748b}
#hoaV57Crud,#hoaV58Crud{display:none!important}.hoa606-shell{margin-top:18px;border:1px solid var(--hoa606-border);border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(23,63,107,.07);overflow:hidden}
.hoa606-head{padding:16px 18px;background:linear-gradient(135deg,#f7fbff,#fffaf0);border-bottom:1px solid var(--hoa606-border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hoa606-head h3{margin:0;color:var(--hoa606-blue);font-size:18px}.hoa606-head p{margin:4px 0 0;color:var(--hoa606-muted);font-size:12px}
.hoa606-body{padding:16px}.hoa606-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.hoa606-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.hoa606-field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:#29496b}.hoa606-field input,.hoa606-field select,.hoa606-field textarea{width:100%;box-sizing:border-box;padding:10px 11px;border:1px solid #cbd8e6;border-radius:9px;background:#fff;color:#172033;font:inherit;font-weight:500}
.hoa606-field.wide{grid-column:1/-1}.hoa606-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.hoa606-btn{border:1px solid #c7d6e5;border-radius:9px;padding:9px 12px;background:#fff;color:var(--hoa606-blue);font-weight:800;cursor:pointer}.hoa606-btn.primary{background:var(--hoa606-blue);color:#fff;border-color:var(--hoa606-blue)}.hoa606-btn.gold{background:#fff7df;border-color:#e8c76d;color:#795a00}.hoa606-btn.danger{color:#a61b1b;border-color:#efb5b5}.hoa606-btn.small{padding:6px 9px;font-size:11px}
.hoa606-status{font-size:12px;color:var(--hoa606-muted);align-self:center}.hoa606-status.error{color:#b42318}.hoa606-list{display:grid;gap:8px;margin-top:12px}.hoa606-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border:1px solid #e0e8f0;border-radius:10px;background:#fff}.hoa606-row-main{min-width:0}.hoa606-row-main b{display:block;color:#183e66}.hoa606-row-main small{display:block;color:#718096;margin-top:3px}.hoa606-chip{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;background:#eef5fc;color:#315a82;font-size:10px;font-weight:800;margin-left:5px}.hoa606-empty{padding:18px;text-align:center;color:#718096;border:1px dashed #cbd8e6;border-radius:10px;background:#fbfdff}
.hoa606-table{width:100%;border-collapse:collapse;font-size:12px}.hoa606-table th,.hoa606-table td{border-bottom:1px solid #e6edf4;padding:9px;text-align:left;vertical-align:middle}.hoa606-table th{color:#315a82;background:#f7faff}.hoa606-table td.actions{text-align:right}.hoa606-folder-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.hoa606-folder-tab{border:1px solid #cbd8e6;background:#fff;border-radius:999px;padding:7px 11px;color:#315a82;font-weight:800;font-size:11px;cursor:pointer}.hoa606-folder-tab.active{background:#173f6b;color:#fff;border-color:#173f6b}.hoa606-divider{height:1px;background:#e7edf4;margin:18px 0}.hoa606-modal{position:fixed;inset:0;background:rgba(10,28,49,.48);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100000}.hoa606-modal-card{width:min(680px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 24px 80px rgba(0,0,0,.25);padding:20px}.hoa606-modal-card h3{margin:0 0 14px;color:#173f6b}.hoa606-student-batch{border:1px solid #dbe5ef;border-radius:14px;padding:13px;background:#fff;margin-bottom:12px}.hoa606-student-batch h4{margin:0;color:#173f6b}.hoa606-student-section{margin-top:10px}.hoa606-student-section-title{font-size:12px;font-weight:900;color:#315a82;margin-bottom:7px}.hoa606-student-folder{border:1px solid #e2e8f0;border-radius:10px;padding:9px;margin:7px 0;background:#fbfdff}.hoa606-student-item{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:8px 0;border-top:1px solid #edf1f5}.hoa606-student-item:first-child{border-top:0}.hoa606-mock-batch{border:1px solid #dbe5ef;border-radius:14px;margin:10px 0;overflow:hidden;background:#fff}.hoa606-mock-batch>summary{cursor:pointer;padding:13px 14px;font-weight:900;color:#173f6b;background:#f8fbff}.hoa606-mock-body{padding:12px}.hoa606-mock-folder{margin:9px 0;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden}.hoa606-mock-folder h5{margin:0;padding:9px 11px;background:#f7faff;color:#315a82}.hoa606-test-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 11px;border-top:1px solid #edf1f5}.hoa606-test-row:first-of-type{border-top:0}.hoa606-test-meta{font-size:11px;color:#718096;margin-top:2px}
@media(max-width:800px){.hoa606-grid,.hoa606-grid.three{grid-template-columns:1fr}.hoa606-row,.hoa606-test-row{align-items:flex-start;flex-direction:column}.hoa606-table{display:block;overflow:auto;white-space:nowrap}.hoa606-table td.actions{text-align:left}.hoa606-body{padding:12px}}

.hoa615-btn.home{background:#fff!important;color:#123f70!important;border:1px solid rgba(255,255,255,.55)!important;font-weight:800}.hoa615-btn.home:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(10,50,90,.14)}


.hoa-v616-intro{margin:0 0 18px;color:#475569;line-height:1.6}
.hoa-v616-field label{display:block;font-size:13px;font-weight:800;color:#173f6b;margin-bottom:6px}
.hoa-v616-field label span{color:#c98a00}
.hoa-v616-field input,.hoa-v616-field textarea{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#172033;outline:none}
.hoa-v616-field input:focus,.hoa-v616-field textarea:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.10)}
.hoa-v616-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hoa-v616-wide{grid-column:1/-1}
.hoa-v616-divider{height:1px;background:#e2e8f0;margin:18px 0}
.hoa-v616-note{font-size:13px;color:#64748b;margin:0 0 14px}
.hoa-v616-msg{min-height:20px;margin-top:10px;color:#b42318;font-size:13px;font-weight:700}
.hoa-v616-actions{display:flex;justify-content:flex-end;margin-top:12px}
.hoa-v616-primary{border:0;border-radius:10px;padding:11px 18px;background:#173f6b;color:#fff;font-weight:800;cursor:pointer}
.hoa-v616-primary:disabled{opacity:.6;cursor:wait}
@media(max-width:650px){.hoa-v616-grid{grid-template-columns:1fr}.hoa-v616-wide{grid-column:auto}}


#hoaV648FreeContentModal.hoa-v619-visible{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:100vh!important;
  padding:20px!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:auto!important;
}
#hoaV648FreeContentModal.hoa-v619-visible .hoa-v648-modal-card{
  position:relative!important;
  margin:0 auto!important;
  transform:none!important;
  max-height:calc(100dvh - 40px)!important;
  overflow:auto!important;
}
@media(max-width:760px){
  #hoaV648FreeContentModal.hoa-v619-visible{
    padding:12px!important;
  }
  #hoaV648FreeContentModal.hoa-v619-visible .hoa-v648-modal-card{
    width:100%!important;
    max-width:520px!important;
    max-height:calc(100dvh - 24px)!important;
  }
}


#hoaV648FreeContentModal.hoa-v619-visible{display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;z-index:2147483000!important;}
#hoaV648FreeContentModal.hoa-v619-visible .hoa-v648-modal-card{display:block!important;visibility:visible!important;opacity:1!important;transform:none!important;}


/* V6.0.39 — Free Content popup close authority.
   Later legacy V7/V70 code was overwriting window.hoaCloseFreeContent with a
   different modal closer. The visible Free Content gate is V648, so its X
   must always close V648 and restore the page state. */
#hoaV648FreeContentModal.hoa-v619-visible.hoa-v639-closing{
  display:none !important;
}


/* V6.0.50 — Paid learning portals.
   The database/schema already used by Admin remains authoritative. */

.hoa-v650-portal{
  position:fixed;
  inset:0;
  z-index:10020;
  overflow:auto;
  background:#f4f8fc;
  color:#172033;
  font-family:inherit;
}
.hoa-v650-portal[hidden]{display:none!important}
.hoa-v650-top{
  position:sticky;
  top:0;
  z-index:5;
  background:#fff;
  border-bottom:1px solid #dce6f0;
  box-shadow:0 4px 18px rgba(23,63,107,.08);
}
.hoa-v650-top-inner{
  width:min(1180px,calc(100% - 28px));
  min-height:72px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.hoa-v650-brand{display:flex;align-items:center;gap:11px;min-width:0}
.hoa-v650-brand img{
  width:42px;height:42px;object-fit:contain;border-radius:10px;background:#fff;
}
.hoa-v650-brand b{display:block;color:#173f6b;font-size:16px;line-height:1.1}
.hoa-v650-brand span{display:block;color:#64748b;font-size:11px;margin-top:3px}
.hoa-v650-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.hoa-v650-btn{
  border:1px solid #cad8e7;
  background:#fff;
  color:#173f6b;
  border-radius:9px;
  min-height:38px;
  padding:0 13px;
  font-weight:800;
  cursor:pointer;
}
.hoa-v650-btn.primary{background:#173f6b;color:#fff;border-color:#173f6b}
.hoa-v650-main{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:24px 0 50px}
.hoa-v650-hero{
  background:linear-gradient(135deg,#123c6c,#1c4e82);
  color:#fff;
  border-radius:20px;
  padding:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  box-shadow:0 16px 40px rgba(23,63,107,.16);
}
.hoa-v650-kicker{font-size:11px;font-weight:900;letter-spacing:.12em;color:#f5bd3d}
.hoa-v650-hero h1{margin:7px 0 5px;font-size:29px;color:#fff!important}
.hoa-v650-hero p{margin:0;color:#dbeafe;max-width:720px;line-height:1.55}
.hoa-v650-stat{
  min-width:112px;padding:14px 18px;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);border-radius:15px;text-align:center
}
.hoa-v650-stat b{display:block;font-size:25px}.hoa-v650-stat span{font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.hoa-v650-tabs{
  display:flex;gap:8px;flex-wrap:wrap;margin:18px 0;
}
.hoa-v650-tab{
  border:1px solid #cad8e7;background:#fff;color:#315a82;border-radius:999px;
  padding:9px 15px;font-weight:900;cursor:pointer
}
.hoa-v650-tab.active{background:#173f6b;color:#fff;border-color:#173f6b}
.hoa-v650-section{
  background:#fff;border:1px solid #dce6f0;border-radius:16px;padding:18px;margin-top:14px;
  box-shadow:0 8px 24px rgba(23,63,107,.06)
}
.hoa-v650-section-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}
.hoa-v650-section-head h2{margin:0;color:#173f6b;font-size:19px}
.hoa-v650-section-head p{margin:4px 0 0;color:#64748b;font-size:12px}
.hoa-v650-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hoa-v650-card{
  border:1px solid #dce6f0;border-radius:14px;background:#fff;padding:15px;
  display:flex;gap:12px;align-items:flex-start;box-shadow:0 5px 16px rgba(23,63,107,.05)
}
.hoa-v650-card-icon{
  width:46px;height:46px;flex:0 0 46px;border-radius:12px;background:#eef5fc;
  display:grid;place-items:center;font-size:22px
}
.hoa-v650-card-body{min-width:0;flex:1}
.hoa-v650-card-body h3{margin:2px 0 5px;color:#173f6b;font-size:16px}
.hoa-v650-card-body p{margin:0;color:#64748b;font-size:12px;line-height:1.5}
.hoa-v650-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.hoa-v650-chip{
  display:inline-flex;align-items:center;padding:4px 7px;border-radius:999px;
  background:#f1f6fb;color:#315a82;font-size:10px;font-weight:900
}
.hoa-v650-card-action{align-self:center}
.hoa-v650-empty{
  border:1px dashed #cbd8e6;border-radius:13px;padding:28px;text-align:center;color:#718096;
  background:#fbfdff
}
.hoa-v650-folder{
  border:1px solid #dce6f0;border-radius:14px;background:#fff;margin:12px 0;overflow:hidden
}
.hoa-v650-folder-head{
  padding:13px 15px;background:#f7faff;border-bottom:1px solid #e6edf4;
  display:flex;justify-content:space-between;align-items:center;gap:10px
}
.hoa-v650-folder-head b{color:#173f6b}
.hoa-v650-folder-body{padding:7px 14px}
.hoa-v650-item{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 2px;border-top:1px solid #edf2f7
}
.hoa-v650-item:first-child{border-top:0}
.hoa-v650-item-main{min-width:0;flex:1}
.hoa-v650-item-main b{display:block;color:#173f6b;font-size:13px}
.hoa-v650-item-main small{display:block;color:#718096;font-size:11px;margin-top:3px;line-height:1.45}
.hoa-v650-player{margin:10px 0 4px}
.hoa-v650-live{
  border-left:4px solid #d69b16;
  background:#fffaf0
}
.hoa-v650-test-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #edf2f7}
.hoa-v650-test-row:first-child{border-top:0}
.hoa-v650-test-row b{color:#173f6b;font-size:13px}
.hoa-v650-test-row small{display:block;color:#718096;margin-top:3px;font-size:11px}
.hoa-v650-result-host .studentAttemptHistory{display:grid;gap:12px}
.hoa-v650-result-host .studentAttemptCard{
  border:1px solid #dce6f0;border-radius:14px;background:#fff;padding:15px
}
.hoa-v650-result-host .studentAttemptCardTop{display:flex;justify-content:space-between;gap:12px}
.hoa-v650-result-host .attemptMetrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.hoa-v650-result-host .attemptMetrics span{
  border:1px solid #e2e8f0;border-radius:9px;background:#f8fafc;padding:8px;text-align:center;font-size:10px;color:#64748b
}
.hoa-v650-result-host .attemptMetrics b{display:block;color:#173f6b;font-size:14px;margin-bottom:2px}
.hoa-v650-result-host .attemptActionRow{display:flex;justify-content:flex-end;margin-top:12px;padding-top:10px;border-top:1px solid #edf2f7}
.hoa-v650-result-host .viewAttemptBtn{
  border:1px solid #cad8e7;background:#fff;color:#173f6b;border-radius:9px;padding:9px 12px;font-weight:900;cursor:pointer
}
@media(max-width:760px){
  .hoa-v650-top-inner{min-height:64px;width:calc(100% - 20px)}
  .hoa-v650-brand span{display:none}
  .hoa-v650-actions{gap:5px}
  .hoa-v650-btn{min-height:34px;padding:0 9px;font-size:11px}
  .hoa-v650-main{width:calc(100% - 20px);padding-top:14px}
  .hoa-v650-hero{padding:18px;border-radius:16px;align-items:flex-start}
  .hoa-v650-hero h1{font-size:23px}
  .hoa-v650-stat{min-width:82px;padding:10px}
  .hoa-v650-grid{grid-template-columns:1fr}
  .hoa-v650-item{align-items:flex-start;flex-direction:column}
  .hoa-v650-item button{width:100%}
  .hoa-v650-result-host .attemptMetrics{grid-template-columns:repeat(2,1fr)}
}


.hoa614-shell{margin:16px 0;border:1px solid #d8e3ef;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(23,63,107,.06);overflow:hidden}
.hoa614-head{padding:18px 20px;background:linear-gradient(135deg,#f7fbff,#fffaf0);border-bottom:1px solid #dfe8f2;display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap}.hoa614-head h3{margin:0;color:#173f6b}.hoa614-head p{margin:5px 0 0;color:#64748b;font-size:12px}.hoa614-badge{padding:5px 9px;border-radius:999px;background:#eef5fc;color:#315a82;font-size:11px;font-weight:800}
.hoa614-body{padding:18px}.hoa614-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.hoa614-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.hoa614-wide{grid-column:1/-1}.hoa614-field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:#29496b}.hoa614-field input,.hoa614-field select,.hoa614-field textarea{width:100%;box-sizing:border-box;padding:10px 11px;border:1px solid #cbd8e6;border-radius:9px;background:#fff;color:#172033;font:inherit;font-weight:500}.hoa614-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}.hoa614-btn{border:1px solid #c7d6e5;border-radius:9px;padding:9px 12px;background:#fff;color:#173f6b;font-weight:800;cursor:pointer}.hoa614-btn.primary{background:#173f6b;color:#fff;border-color:#173f6b}.hoa614-btn.gold{background:#fff7df;border-color:#e8c76d;color:#795a00}.hoa614-btn.danger{color:#a61b1b;border-color:#efb5b5}.hoa614-btn.small{padding:6px 9px;font-size:11px}.hoa614-status{font-size:12px;color:#64748b}.hoa614-status.error{color:#b42318}.hoa614-divider{height:1px;background:#e8eef5;margin:18px 0}.hoa614-section-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.hoa614-section-title h4{margin:0;color:#173f6b}.hoa614-count{font-size:11px;color:#64748b}.hoa614-table{width:100%;border-collapse:collapse;font-size:12px}.hoa614-table th,.hoa614-table td{padding:10px;border-bottom:1px solid #e7edf4;text-align:left;vertical-align:middle}.hoa614-table th{background:#f7faff;color:#315a82}.hoa614-table td:last-child{text-align:right}.hoa614-chip{display:inline-flex;padding:3px 7px;border-radius:999px;background:#eef5fc;color:#315a82;font-size:10px;font-weight:800}.hoa614-chip.published{background:#e9f8ef;color:#18733d}.hoa614-chip.archived{background:#f1f1f1;color:#666}.hoa614-chip.draft{background:#fff7df;color:#795a00}.hoa614-empty{padding:22px;text-align:center;color:#718096;border:1px dashed #cbd8e6;border-radius:10px;background:#fbfdff}.hoa614-folder-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:14px}.hoa614-list{display:grid;gap:8px}.hoa614-row{border:1px solid #e0e8f0;border-radius:10px;padding:11px 12px;display:flex;justify-content:space-between;gap:10px;align-items:center}.hoa614-row.active{border-color:#8fb2d5;background:#f7fbff}.hoa614-row-main{min-width:0}.hoa614-row-main b{display:block;color:#183e66}.hoa614-row-main small{display:block;color:#718096;margin-top:3px}.hoa614-row-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.hoa614-search{max-width:320px}.hoa614-preview{margin-top:12px;border:1px solid #dfe8f2;border-radius:12px;overflow:hidden;background:#0b1220}.hoa614-preview iframe{display:block;width:100%;height:380px;border:0}.hoa614-help{font-size:11px;color:#718096;margin-top:5px}
@media(max-width:800px){.hoa614-grid,.hoa614-grid.three,.hoa614-folder-grid{grid-template-columns:1fr}.hoa614-wide{grid-column:auto}.hoa614-table{display:block;overflow-x:auto;white-space:nowrap}.hoa614-preview iframe{height:240px}}


#hoaBatch360Overlay{position:fixed;inset:0;background:rgba(15,32,51,.58);z-index:120000;display:none;padding:22px;overflow:auto}
#hoaBatch360Overlay.open{display:block}
.hoa360-shell{max-width:1450px;margin:0 auto;background:#f7fafd;border:1px solid #d8e3ef;border-radius:20px;box-shadow:0 24px 80px rgba(15,32,51,.24);overflow:hidden}
.hoa360-head{background:#fff;border-bottom:1px solid #d8e3ef;padding:18px 22px;display:flex;justify-content:space-between;gap:16px;align-items:flex-start;position:sticky;top:0;z-index:2}
.hoa360-head h2{margin:0;color:#173f6b;font-size:22px}.hoa360-head p{margin:5px 0 0;color:#64748b;font-size:13px}.hoa360-close{border:0;background:#eef4fa;color:#173f6b;border-radius:10px;padding:9px 13px;font-weight:800;cursor:pointer}
.hoa360-body{padding:18px}.hoa360-summary{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px}.hoa360-stat{background:#fff;border:1px solid #dbe5ef;border-radius:14px;padding:13px}.hoa360-stat b{display:block;font-size:22px;color:#173f6b}.hoa360-stat span{font-size:11px;color:#64748b;text-transform:uppercase;font-weight:800;letter-spacing:.04em}
.hoa360-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.hoa360-tab{border:1px solid #d5e0eb;background:#fff;color:#36526f;border-radius:10px;padding:9px 13px;font-weight:800;cursor:pointer}.hoa360-tab.active{background:#173f6b;color:#fff;border-color:#173f6b}
.hoa360-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.hoa360-card{background:#fff;border:1px solid #dbe5ef;border-radius:15px;padding:15px}.hoa360-card h3{margin:0 0 10px;color:#173f6b;font-size:16px}.hoa360-card h4{margin:12px 0 7px;color:#294c6e;font-size:14px}.hoa360-muted{color:#718096;font-size:12px}.hoa360-list{display:flex;flex-direction:column;gap:7px}.hoa360-row{border:1px solid #e4ebf2;border-radius:10px;padding:10px;background:#fbfdff}.hoa360-row-main{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.hoa360-row b{color:#234a6e;font-size:13px}.hoa360-row small{display:block;color:#718096;font-size:11px;margin-top:3px}.hoa360-badge{display:inline-flex;align-items:center;border-radius:999px;padding:3px 7px;background:#edf4fa;color:#315779;font-size:10px;font-weight:800}.hoa360-badge.warn{background:#fff5df;color:#8a5a00}.hoa360-badge.ok{background:#eaf7ef;color:#17633a}.hoa360-badge.arch{background:#f1f1f1;color:#666}.hoa360-empty{padding:15px;border:1px dashed #ccd9e6;border-radius:10px;color:#718096;font-size:12px;text-align:center;background:#fafcff}.hoa360-tree{margin-top:8px}.hoa360-tree details{border:1px solid #e1e9f1;border-radius:11px;margin-bottom:8px;background:#fff}.hoa360-tree summary{cursor:pointer;padding:11px 12px;font-weight:800;color:#294c6e}.hoa360-tree .inside{padding:0 12px 12px}.hoa360-actions{display:flex;gap:8px;flex-wrap:wrap}.hoa360-view-btn{margin-left:6px!important}
@media(max-width:900px){.hoa360-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.hoa360-grid{grid-template-columns:1fr}.hoa360-head{position:static}}
@media(max-width:600px){#hoaBatch360Overlay{padding:8px}.hoa360-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.hoa360-body{padding:10px}.hoa360-head{padding:14px}.hoa360-head h2{font-size:18px}}


/* =========================================================
   HOA V6.2.1 — ADMIN UI POLISH
   Feature owner: CORE / ADMIN UI
   Database/RPC: none
   Future module: css/style.css + optional js/ui.js
   ========================================================= */
:root{
  --hoa-blue:#0b4f9c;
  --hoa-blue-2:#146dcc;
  --hoa-gold:#d9a441;
  --hoa-gold-2:#f0c766;
  --hoa-surface:#ffffff;
  --hoa-surface-2:#f7f9fc;
  --hoa-line:#dce5ef;
  --hoa-text:#10243d;
  --hoa-muted:#66758a;
  --hoa-shadow:0 10px 30px rgba(7,40,78,.08);
}
html[data-theme="dark"]{
  --hoa-surface:#101a29;
  --hoa-surface-2:#0b1320;
  --hoa-line:#26364b;
  --hoa-text:#edf4ff;
  --hoa-muted:#9cafc5;
  --hoa-shadow:0 12px 32px rgba(0,0,0,.28);
}
body.admin-ui{background:var(--hoa-surface-2)!important;color:var(--hoa-text)!important;}
body.admin-ui .adminReferenceSidebar{
  background:linear-gradient(180deg,#082f63 0%,#061f43 100%)!important;
  border-right:1px solid rgba(240,199,102,.14);
}
body.admin-ui .adminReferenceBrand{padding-bottom:20px!important;}
body.admin-ui .adminReferenceBrand img{box-shadow:0 6px 20px rgba(0,0,0,.2);border:2px solid rgba(240,199,102,.35);}
body.admin-ui .adminReferenceNav button{transition:transform .18s ease,background .18s ease,box-shadow .18s ease,border-color .18s ease!important;}
body.admin-ui .adminReferenceNav button:hover:not(.active){transform:translateX(3px)!important;background:rgba(255,255,255,.095)!important;}
body.admin-ui .adminReferenceNav button.active{
  background:linear-gradient(100deg,var(--hoa-blue-2),#0f82df)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.22),inset 3px 0 0 var(--hoa-gold-2)!important;
}
body.admin-ui .adminReferenceMain{background:var(--hoa-surface-2)!important;}
body.admin-ui .adminReferenceMain #adminOnlyDashboard > .dashPanel:first-of-type,
body.admin-ui .adminReferenceMain .dashPanel,
body.admin-ui .adminReferenceMain .testWisePanel{
  background:var(--hoa-surface)!important;
  border-color:var(--hoa-line)!important;
  color:var(--hoa-text)!important;
  box-shadow:var(--hoa-shadow)!important;
}
body.admin-ui .adminReferenceMain h1,
body.admin-ui .adminReferenceMain h2,
body.admin-ui .adminReferenceMain h3,
body.admin-ui .adminReferenceMain h4,
body.admin-ui .adminReferenceMain label{color:var(--hoa-text)!important;}
body.admin-ui .adminReferenceMain p,
body.admin-ui .adminReferenceMain small,
body.admin-ui .adminReferenceMain .muted{color:var(--hoa-muted)!important;}
body.admin-ui .adminReferenceMain input,
body.admin-ui .adminReferenceMain select,
body.admin-ui .adminReferenceMain textarea{
  background:var(--hoa-surface)!important;color:var(--hoa-text)!important;border-color:var(--hoa-line)!important;
  border-radius:10px!important;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease!important;
}
body.admin-ui .adminReferenceMain input:focus,
body.admin-ui .adminReferenceMain select:focus,
body.admin-ui .adminReferenceMain textarea:focus{
  border-color:var(--hoa-blue-2)!important;box-shadow:0 0 0 3px rgba(20,109,204,.14)!important;outline:none!important;
}
body.admin-ui .adminReferenceMain button{
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease!important;
}
body.admin-ui .adminReferenceMain button:hover{transform:translateY(-1px);}
body.admin-ui .adminReferenceMain button:active{transform:translateY(0);}
body.admin-ui .adminReferenceMain .adminResultCard{
  background:var(--hoa-surface)!important;border-color:var(--hoa-line)!important;border-top:3px solid var(--hoa-blue-2)!important;
  box-shadow:var(--hoa-shadow)!important;transition:transform .2s ease,box-shadow .2s ease!important;
}
body.admin-ui .adminReferenceMain .adminResultCard:hover{transform:translateY(-3px);box-shadow:0 15px 34px rgba(7,40,78,.13)!important;}
body.admin-ui .adminReferenceMain table{border-color:var(--hoa-line)!important;}
body.admin-ui .adminReferenceMain th{background:linear-gradient(180deg,rgba(20,109,204,.08),rgba(20,109,204,.03))!important;color:var(--hoa-text)!important;}
body.admin-ui .adminReferenceMain td{border-color:var(--hoa-line)!important;color:var(--hoa-text)!important;}
body.admin-ui .adminReferenceMain tr:hover td{background:rgba(20,109,204,.045)!important;}
.hoa-v621-theme-btn{
  display:inline-flex!important;align-items:center;justify-content:center;gap:7px;min-height:40px!important;padding:0 12px!important;
  border:1px solid var(--hoa-line)!important;border-radius:10px!important;background:var(--hoa-surface)!important;color:var(--hoa-text)!important;
  font-weight:800!important;cursor:pointer;box-shadow:0 5px 14px rgba(7,40,78,.06)!important;
}
.hoa-v621-theme-btn:hover{border-color:var(--hoa-gold)!important;box-shadow:0 8px 18px rgba(217,164,65,.14)!important;}
.hoa-v621-gold-accent{color:var(--hoa-gold)!important;}
@media(max-width:900px){
  body.admin-ui .adminReferenceSidebar{width:218px!important;}
  body.admin-ui .adminReferenceMain{margin-left:218px!important;padding:14px!important;}
  body.admin-ui .adminReferenceMain .adminResultCards{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:700px){
  body.admin-ui .adminReferenceSidebar{position:relative!important;width:100%!important;height:auto!important;min-height:0!important;padding:10px!important;}
  body.admin-ui .adminReferenceBrand{padding:4px 8px 12px!important;}
  body.admin-ui .adminReferenceNav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px!important;}
  body.admin-ui .adminReferenceNav button{min-height:44px!important;font-size:12px!important;padding:0 10px!important;}
  body.admin-ui .adminReferenceMain{margin-left:0!important;padding:10px!important;}
  body.admin-ui .adminReferenceMain .adminResultCards{grid-template-columns:1fr!important;}
  body.admin-ui .adminReferenceTopbarTitle{font-size:19px!important;}
  body.admin-ui .adminReferenceMain .dashPanel{padding:14px!important;border-radius:14px!important;}
}
@media(max-width:430px){
  body.admin-ui .adminReferenceNav{grid-template-columns:1fr!important;}
  body.admin-ui .adminReferenceBrandTitle{font-size:17px!important;}
  body.admin-ui .adminReferenceMain #adminOnlyDashboard > .dashPanel:first-of-type{padding:14px!important;}
}
@media(prefers-reduced-motion:reduce){body.admin-ui .adminReferenceMain button,body.admin-ui .adminReferenceNav button,body.admin-ui .adminResultCard{transition:none!important;}}


:root{--hoa-control-h:42px;--hoa-table-head-bg:color-mix(in srgb,var(--hoa-blue,#0b3d91) 8%,transparent);--hoa-row-hover:color-mix(in srgb,var(--hoa-gold,#d4af37) 7%,transparent);--hoa-danger:#b42318;--hoa-success:#18794e}
.hoa-v627-form-group{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}.hoa-v627-form-group>label{font-weight:650;font-size:.9rem}.hoa-v627-form-group input,.hoa-v627-form-group select,.hoa-v627-form-group textarea{min-height:var(--hoa-control-h);border-radius:10px;border:1px solid color-mix(in srgb,currentColor 16%,transparent);padding:9px 12px;background:var(--hoa-surface,#fff);color:inherit;transition:border-color .18s,box-shadow .18s,background .18s}.hoa-v627-form-group textarea{min-height:96px;resize:vertical}.hoa-v627-form-group input:focus,.hoa-v627-form-group select:focus,.hoa-v627-form-group textarea:focus{outline:0;border-color:var(--hoa-blue,#0b3d91);box-shadow:0 0 0 3px color-mix(in srgb,var(--hoa-blue,#0b3d91) 16%,transparent)}.hoa-v627-required::after{content:' *';color:var(--hoa-danger)}.hoa-v627-form-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:14px}.hoa-v627-table-wrap{width:100%;overflow-x:auto;border:1px solid color-mix(in srgb,currentColor 10%,transparent);border-radius:14px}.hoa-v627-table-wrap table{width:100%;border-collapse:separate;border-spacing:0;min-width:620px}.hoa-v627-table-wrap th{background:var(--hoa-table-head-bg);font-size:.82rem;font-weight:750;text-align:left;white-space:nowrap;padding:12px}.hoa-v627-table-wrap td{padding:11px 12px;border-top:1px solid color-mix(in srgb,currentColor 8%,transparent);vertical-align:middle}.hoa-v627-table-wrap tbody tr{transition:background .16s,transform .16s}.hoa-v627-table-wrap tbody tr:hover{background:var(--hoa-row-hover)}.hoa-v627-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.hoa-v627-btn-danger{color:#fff!important;background:var(--hoa-danger)!important;border-color:var(--hoa-danger)!important}.hoa-v627-btn-success{color:#fff!important;background:var(--hoa-success)!important;border-color:var(--hoa-success)!important}.hoa-v627-empty{padding:28px 18px;text-align:center;border:1px dashed color-mix(in srgb,currentColor 18%,transparent);border-radius:14px;opacity:.82}.hoa-v627-loading{position:relative;overflow:hidden}.hoa-v627-loading::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,currentColor 8%,transparent),transparent);animation:hoaV627Shimmer 1.35s infinite}@keyframes hoaV627Shimmer{100%{transform:translateX(100%)}}@media(max-width:640px){.hoa-v627-form-actions{align-items:stretch}.hoa-v627-form-actions>*{flex:1 1 100%}.hoa-v627-table-wrap{border-radius:10px}.hoa-v627-table-wrap th,.hoa-v627-table-wrap td{padding:9px 10px}.hoa-v627-actions{gap:5px}}@media(prefers-reduced-motion:reduce){.hoa-v627-form-group input,.hoa-v627-form-group select,.hoa-v627-form-group textarea,.hoa-v627-table-wrap tbody tr{transition:none}.hoa-v627-loading::after{animation:none}}


:root{--hoa-mock-blue:#123b6d;--hoa-mock-blue-2:#1d5a9d;--hoa-mock-gold:#d6a93a;--hoa-mock-soft:#eef5fb;--hoa-mock-border:rgba(18,59,109,.14)}
.hoa-v610-mock-card{border:1px solid var(--hoa-mock-border)!important;border-radius:18px!important;box-shadow:0 8px 24px rgba(15,42,72,.08)!important;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important;overflow:hidden}
.hoa-v610-mock-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(15,42,72,.14)!important;border-color:rgba(214,169,58,.5)!important}
.hoa-v610-mock-card .hoa-v610-mock-accent{height:4px;background:linear-gradient(90deg,var(--hoa-mock-blue),var(--hoa-mock-gold))}
.hoa-v610-mock-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.02em;background:var(--hoa-mock-soft);color:var(--hoa-mock-blue);border:1px solid var(--hoa-mock-border)}
.hoa-v610-mock-badge.gold{background:rgba(214,169,58,.13);color:#8a6410;border-color:rgba(214,169,58,.28)}
.hoa-v610-mock-progress{height:7px;border-radius:99px;background:rgba(18,59,109,.10);overflow:hidden}.hoa-v610-mock-progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--hoa-mock-blue-2),var(--hoa-mock-gold));transition:width .35s ease}
.hoa-v610-question{border:1px solid var(--hoa-mock-border);border-radius:16px;padding:18px;background:var(--hoa-surface,#fff);box-shadow:0 5px 18px rgba(15,42,72,.06)}
.hoa-v610-option{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;margin:9px 0;border:1px solid var(--hoa-mock-border);border-radius:13px;cursor:pointer;transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease}
.hoa-v610-option:hover{transform:translateX(2px);border-color:rgba(214,169,58,.55);box-shadow:0 5px 15px rgba(15,42,72,.07)}
.hoa-v610-option.is-selected{background:rgba(18,59,109,.07);border-color:var(--hoa-mock-blue-2);box-shadow:inset 3px 0 0 var(--hoa-mock-gold)}
.hoa-v610-nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.hoa-v610-nav button{min-width:38px;min-height:38px;border-radius:10px;border:1px solid var(--hoa-mock-border);background:var(--hoa-surface,#fff);transition:.18s ease}.hoa-v610-nav button:hover{transform:translateY(-1px);border-color:var(--hoa-mock-gold)}
.hoa-v610-timer{font-variant-numeric:tabular-nums;font-weight:800;color:var(--hoa-mock-blue);background:rgba(18,59,109,.07);border:1px solid var(--hoa-mock-border);padding:8px 12px;border-radius:12px}.hoa-v610-timer.warning{color:#9b2c2c;background:rgba(155,44,44,.08);border-color:rgba(155,44,44,.2)}
.hoa-v610-result-score{font-size:clamp(2.2rem,6vw,4.5rem);font-weight:900;line-height:1;color:var(--hoa-mock-blue);text-align:center}.hoa-v610-result-gold{color:#9a7214}
@media (max-width:767px){.hoa-v610-mock-card{border-radius:15px!important}.hoa-v610-question{padding:14px}.hoa-v610-option{padding:12px}.hoa-v610-nav{gap:6px}.hoa-v610-nav button{min-width:36px;min-height:36px}.hoa-v610-timer{padding:7px 10px;font-size:.9rem}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hoa-mock-soft:rgba(80,140,210,.12);--hoa-mock-border:rgba(255,255,255,.12)}}
@media (prefers-reduced-motion:reduce){.hoa-v610-mock-card,.hoa-v610-option,.hoa-v610-nav button,.hoa-v610-mock-progress>span{transition:none!important}.hoa-v610-mock-card:hover,.hoa-v610-option:hover,.hoa-v610-nav button:hover{transform:none}}


/* HOA V6.2.12 — Restore the exact V6.2.10 typography used before the V6.2.11 rollback. */
:root {
  --hoa-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}
html, body, button, input, select, textarea {
  font-family: var(--hoa-font-sans) !important;
}


  #hoaV610MockWorkspace{margin-top:16px}
  .hoa610-shell{border:1px solid #d8e3ef;border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 8px 26px rgba(23,63,107,.07)}
  .hoa610-head{padding:18px 20px;background:linear-gradient(135deg,#f7fbff,#fffaf0);border-bottom:1px solid #d8e3ef;display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
  .hoa610-head h2{margin:0;color:#173f6b;font-size:21px}.hoa610-head p{margin:5px 0 0;color:#64748b;font-size:12px;line-height:1.55}
  .hoa610-chip{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:#eef5fc;color:#315a82;font-size:10px;font-weight:900;letter-spacing:.04em}
  .hoa610-tabs{display:flex;gap:0;border-bottom:1px solid #d8e3ef;background:#fbfdff;overflow:auto}
  .hoa610-tab{border:0;border-right:1px solid #e5edf5;background:transparent;color:#49627b;padding:13px 18px;font-weight:900;font-size:12px;cursor:pointer;white-space:nowrap}
  .hoa610-tab.active{background:#173f6b;color:#fff}
  .hoa610-page{display:none;padding:18px}.hoa610-page.active{display:block}
  .hoa610-section{border:1px solid #e1e9f1;border-radius:13px;background:#fff;padding:15px;margin-bottom:14px}
  .hoa610-section:last-child{margin-bottom:0}.hoa610-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:13px}
  .hoa610-section-head h3{margin:0;color:#173f6b;font-size:16px}.hoa610-section-head p{margin:4px 0 0;color:#718096;font-size:12px;line-height:1.5}
  .hoa610-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.hoa610-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.hoa610-wide{grid-column:1/-1}
  .hoa610-field{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:800;color:#29496b}.hoa610-field input,.hoa610-field select,.hoa610-field textarea{width:100%;box-sizing:border-box;padding:10px 11px;border:1px solid #cbd8e6;border-radius:9px;background:#fff;color:#172033;font:inherit;font-weight:500;outline:none}.hoa610-field input:focus,.hoa610-field select:focus,.hoa610-field textarea:focus{border-color:#5b8fc4;box-shadow:0 0 0 3px rgba(37,99,235,.08)}
  .hoa610-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}.hoa610-btn{border:1px solid #c7d6e5;border-radius:9px;padding:9px 12px;background:#fff;color:#173f6b;font-weight:900;font-size:11px;cursor:pointer}.hoa610-btn.primary{background:#173f6b;color:#fff;border-color:#173f6b}.hoa610-btn.gold{background:#fff8e5;border-color:#e5c66b;color:#795a00}.hoa610-btn.danger{color:#a61b1b;border-color:#efb5b5;background:#fff}.hoa610-btn.small{padding:6px 9px;font-size:10px}
  .hoa610-status{font-size:12px;color:#64748b}.hoa610-status.ok{color:#087443}.hoa610-status.error{color:#b42318}
  .hoa610-statbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:13px}.hoa610-stat{padding:11px 12px;border:1px solid #e1e9f1;border-radius:10px;background:#f8fbff}.hoa610-stat b{display:block;color:#173f6b;font-size:18px}.hoa610-stat span{font-size:10px;color:#718096;font-weight:800;text-transform:uppercase}
  .hoa610-list{display:grid;gap:8px}.hoa610-card{border:1px solid #e1e9f1;border-radius:11px;padding:12px;background:#fff}.hoa610-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.hoa610-card-title{font-weight:900;color:#173f6b}.hoa610-card-meta{font-size:11px;color:#718096;margin-top:4px;line-height:1.5}.hoa610-card-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .hoa610-badge{display:inline-flex;padding:3px 7px;border-radius:999px;font-size:9px;font-weight:900;margin-left:5px}.hoa610-badge.draft{background:#f1f5f9;color:#64748b}.hoa610-badge.published{background:#e9f8ef;color:#087443}.hoa610-badge.archived{background:#fff0f0;color:#a61b1b}.hoa610-badge.subject{background:#eef5fc;color:#315a82}.hoa610-badge.full{background:#fff7df;color:#795a00}
  .hoa610-empty{padding:18px;text-align:center;color:#718096;border:1px dashed #cbd8e6;border-radius:10px;background:#fbfdff;font-size:12px}.hoa610-divider{height:1px;background:#e7edf4;margin:15px 0}
  .hoa610-searchbar{display:grid;grid-template-columns:1fr 190px auto auto;gap:8px;margin-bottom:11px}.hoa610-searchbar input,.hoa610-searchbar select{padding:9px 10px;border:1px solid #cbd8e6;border-radius:9px;font:inherit;font-size:12px}
  .hoa610-qcard{border:1px solid #e1e9f1;border-radius:11px;padding:12px;background:#fff}.hoa610-qtop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.hoa610-qtext{font-weight:850;color:#172033;line-height:1.5}.hoa610-qopts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}.hoa610-qopt{padding:7px 8px;border-radius:7px;background:#f8fafc;color:#475569;font-size:11px}.hoa610-qopt.correct{background:#e9f8ef;color:#087443;border:1px solid #b6dfc4;font-weight:800}.hoa610-qexp{margin-top:8px;padding:8px 9px;border-left:3px solid #173f6b;background:#f7faff;color:#64748b;font-size:11px;line-height:1.5}
  .hoa610-builder-summary{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 12px;border:1px solid #dce7f1;border-radius:10px;background:#f8fbff;margin-bottom:11px}.hoa610-builder-summary b{color:#173f6b}.hoa610-builder-list{display:grid;gap:8px}.hoa610-builder-row{display:grid;grid-template-columns:36px 1fr auto;gap:9px;align-items:start;border:1px solid #e1e9f1;border-radius:10px;padding:10px;background:#fff}.hoa610-builder-no{width:28px;height:28px;border-radius:8px;background:#eef5fc;color:#173f6b;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:11px}.hoa610-builder-q{font-size:12px;color:#172033;line-height:1.5}.hoa610-builder-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
  .hoa610-edit{margin-top:9px;padding:11px;border:1px solid #d8e3ef;border-radius:10px;background:#f8fbff}.hoa610-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hoa610-edit-grid textarea,.hoa610-edit-grid input{width:100%;box-sizing:border-box;padding:8px;border:1px solid #cbd8e6;border-radius:8px;font:inherit;font-size:11px}.hoa610-edit-grid .wide{grid-column:1/-1}
  .hoa610-note{font-size:11px;color:#718096;line-height:1.5}
  @media(max-width:800px){.hoa610-grid,.hoa610-grid.three,.hoa610-qopts,.hoa610-edit-grid{grid-template-columns:1fr}.hoa610-wide{grid-column:auto}.hoa610-statbar{grid-template-columns:1fr 1fr}.hoa610-searchbar{grid-template-columns:1fr 1fr}.hoa610-builder-row{grid-template-columns:30px 1fr}.hoa610-builder-actions{grid-column:2;justify-content:flex-start}.hoa610-page{padding:12px}}
  @media(max-width:520px){.hoa610-searchbar{grid-template-columns:1fr}.hoa610-card-head{flex-direction:column}.hoa610-card-actions{justify-content:flex-start}}


/* Free Content belongs exclusively to the Admin navigation/workspace. */
body.admin-ui #adminReferenceSidebar #adminNavFreeContent,
body.admin-ui #adminOnlyDashboard .adminSectionNav #adminNavFreeContent{
  display:flex !important;
}


/* HOA V6.2.4 — restrained motion and interaction layer */
:root{--hoa-motion-fast:140ms;--hoa-motion:220ms;--hoa-motion-slow:320ms;--hoa-ease:cubic-bezier(.2,.7,.2,1);}
@keyframes hoaFadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes hoaFadeIn{from{opacity:0}to{opacity:1}}
@keyframes hoaScaleIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}
.hoa-motion-card,.admin-card,.dashboard-card,.stat-card,.course-card,.test-card,.content-card,.result-card{transition:transform var(--hoa-motion) var(--hoa-ease),box-shadow var(--hoa-motion) var(--hoa-ease),border-color var(--hoa-motion) var(--hoa-ease);}
.hoa-motion-card:hover,.admin-card:hover,.dashboard-card:hover,.stat-card:hover,.course-card:hover,.test-card:hover,.content-card:hover,.result-card:hover{transform:translateY(-3px);}
button,.btn,a[role="button"],input,select,textarea{transition:background-color var(--hoa-motion-fast) ease,color var(--hoa-motion-fast) ease,border-color var(--hoa-motion-fast) ease,box-shadow var(--hoa-motion-fast) ease,transform var(--hoa-motion-fast) var(--hoa-ease);}
button:active,.btn:active,a[role="button"]:active{transform:translateY(1px) scale(.99);}
button:focus-visible,.btn:focus-visible,a[role="button"]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--hoa-gold,#d4a72c);outline-offset:2px;}
.modal,.modal-content,.dialog,.drawer,.panel-modal,[role="dialog"]{animation:hoaScaleIn var(--hoa-motion-slow) var(--hoa-ease);}
.admin-panel,.student-panel,.dashboard-section,.tab-panel{animation:hoaFadeUp var(--hoa-motion-slow) var(--hoa-ease);}
.hoa-loading{position:relative;overflow:hidden;}
.hoa-loading::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);animation:hoaShimmer 1.2s infinite;}
@keyframes hoaShimmer{to{transform:translateX(100%)}}
@media (hover:hover){.hoa-lift:hover{transform:translateY(-4px) rotateX(.4deg);box-shadow:0 12px 28px rgba(15,45,90,.14),0 2px 7px rgba(15,45,90,.08);}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}.hoa-motion-card:hover,.admin-card:hover,.dashboard-card:hover,.stat-card:hover,.course-card:hover,.test-card:hover,.content-card:hover,.result-card:hover{transform:none}}


:root{--hoa-nav-active:linear-gradient(135deg,#0b4ea2,#1769c2);--hoa-nav-hover:rgba(11,78,162,.08);--hoa-gold-soft:rgba(212,167,44,.14);--hoa-ui-border:rgba(15,45,90,.12)}
.hoa-v626-nav-active{background:var(--hoa-nav-active)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 6px 16px rgba(11,78,162,.18)}
.hoa-v626-nav-active::before{content:"";display:inline-block;width:3px;height:20px;background:#d4a72c;border-radius:999px;margin-right:8px;vertical-align:middle}
.hoa-v626-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hoa-v626-toolbar .hoa-v626-search{flex:1 1 220px;min-width:180px}
.hoa-v626-search{border:1px solid var(--hoa-ui-border);border-radius:12px;padding:10px 12px;background:var(--hoa-surface,#fff);color:var(--hoa-text,#172033);}
.hoa-v626-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hoa-ui-border);border-radius:999px;padding:5px 10px;font-size:.82rem;font-weight:600;background:var(--hoa-surface,#fff);white-space:nowrap}
.hoa-v626-chip.gold{background:var(--hoa-gold-soft);border-color:rgba(212,167,44,.35)}
.hoa-v626-status{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;border-radius:999px;padding:4px 9px;background:rgba(11,78,162,.09);color:#0b4ea2}
.hoa-v626-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.hoa-v626-empty{padding:32px 18px;text-align:center;border:1px dashed var(--hoa-ui-border);border-radius:16px;background:linear-gradient(180deg,rgba(11,78,162,.025),transparent)}
.hoa-v626-empty .hoa-v626-empty-icon{font-size:2rem;display:block;margin-bottom:8px;opacity:.72}
.hoa-v626-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.hoa-v626-section-head h2,.hoa-v626-section-head h3{margin:0}
.hoa-v626-tab{position:relative;border:0;background:transparent;padding:10px 13px;font-weight:700;color:inherit;cursor:pointer}
.hoa-v626-tab::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:999px;background:#d4a72c;transform:scaleX(0);transition:transform 180ms ease}
.hoa-v626-tab[aria-selected="true"],.hoa-v626-tab.active{color:#0b4ea2}
.hoa-v626-tab[aria-selected="true"]::after,.hoa-v626-tab.active::after{transform:scaleX(1)}
.hoa-v626-icon-btn{width:38px;height:38px;display:inline-grid;place-items:center;padding:0;border-radius:11px;border:1px solid var(--hoa-ui-border);background:var(--hoa-surface,#fff);cursor:pointer}
.hoa-v626-icon-btn:hover{border-color:rgba(212,167,44,.55);background:var(--hoa-gold-soft)}
@media(max-width:600px){.hoa-v626-toolbar{align-items:stretch}.hoa-v626-toolbar>*{width:100%}.hoa-v626-icon-btn{width:42px;height:42px}.hoa-v626-tab{padding:9px 10px;font-size:.9rem}.hoa-v626-section-head{align-items:flex-start}}
@media(prefers-color-scheme:dark){.hoa-v626-search,.hoa-v626-chip,.hoa-v626-icon-btn{background:var(--hoa-surface,#111827);color:var(--hoa-text,#eef2f7)}}
@media(prefers-reduced-motion:reduce){.hoa-v626-tab::after{transition:none}}


:root{
  --hoa-v628-overlay:rgba(2,12,28,.58);
  --hoa-v628-modal-bg:var(--hoa-surface,#fff);
  --hoa-v628-modal-border:var(--hoa-border,#d9e2ef);
  --hoa-v628-shadow:0 24px 70px rgba(3,18,42,.22);
  --hoa-v628-success:#168a57;
  --hoa-v628-danger:#c83b45;
  --hoa-v628-warning:#b77700;
}
[data-theme="dark"]{
  --hoa-v628-overlay:rgba(0,0,0,.68);
  --hoa-v628-shadow:0 28px 80px rgba(0,0,0,.48);
}
.hoa-v628-overlay{position:fixed;inset:0;z-index:99990;display:grid;place-items:center;padding:18px;background:var(--hoa-v628-overlay);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
.hoa-v628-overlay.is-open{opacity:1;visibility:visible}
.hoa-v628-dialog{width:min(560px,100%);max-height:min(88vh,760px);overflow:auto;background:var(--hoa-v628-modal-bg);border:1px solid var(--hoa-v628-modal-border);border-radius:20px;box-shadow:var(--hoa-v628-shadow);transform:translateY(12px) scale(.985);transition:transform .22s ease}
.hoa-v628-overlay.is-open .hoa-v628-dialog{transform:translateY(0) scale(1)}
.hoa-v628-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px 22px 12px}
.hoa-v628-dialog-title{margin:0;font-size:1.08rem;font-weight:800;color:var(--hoa-text,#132238)}
.hoa-v628-dialog-body{padding:0 22px 20px;color:var(--hoa-muted,#617086);line-height:1.55}
.hoa-v628-dialog-actions{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px 20px;border-top:1px solid var(--hoa-v628-modal-border)}
.hoa-v628-close{border:0;background:transparent;width:36px;height:36px;border-radius:10px;cursor:pointer;font-size:20px;color:inherit}
.hoa-v628-close:hover{background:rgba(20,90,170,.08)}
.hoa-v628-toast-stack{position:fixed;right:18px;bottom:18px;z-index:100000;display:flex;flex-direction:column;gap:10px;width:min(390px,calc(100vw - 36px));pointer-events:none}
.hoa-v628-toast{pointer-events:auto;display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:start;padding:13px 14px;border:1px solid var(--hoa-v628-modal-border);border-left:4px solid var(--hoa-primary,#1557a6);border-radius:14px;background:var(--hoa-v628-modal-bg);box-shadow:0 14px 34px rgba(3,18,42,.16);animation:hoaV628ToastIn .22s ease both}
.hoa-v628-toast.success{border-left-color:var(--hoa-v628-success)}.hoa-v628-toast.error{border-left-color:var(--hoa-v628-danger)}.hoa-v628-toast.warning{border-left-color:var(--hoa-v628-warning)}
.hoa-v628-toast-title{font-weight:800;color:var(--hoa-text,#132238);font-size:.93rem}.hoa-v628-toast-message{font-size:.86rem;color:var(--hoa-muted,#617086);margin-top:2px}
.hoa-v628-toast-close{border:0;background:transparent;cursor:pointer;color:inherit;font-size:18px;line-height:1}
.hoa-v628-loading{position:fixed;inset:0;z-index:99980;display:grid;place-items:center;background:var(--hoa-v628-overlay);opacity:0;visibility:hidden;transition:.18s ease}
.hoa-v628-loading.is-open{opacity:1;visibility:visible}
.hoa-v628-spinner{width:42px;height:42px;border:4px solid rgba(255,255,255,.35);border-top-color:var(--hoa-gold,#d6a72b);border-radius:50%;animation:hoaV628Spin .75s linear infinite}
@keyframes hoaV628Spin{to{transform:rotate(360deg)}}
@keyframes hoaV628ToastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:600px){.hoa-v628-overlay{padding:10px;align-items:end}.hoa-v628-dialog{width:100%;max-height:90vh;border-radius:18px}.hoa-v628-dialog-head{padding:17px 17px 10px}.hoa-v628-dialog-body{padding:0 17px 17px}.hoa-v628-dialog-actions{padding:12px 17px 17px;flex-wrap:wrap}.hoa-v628-dialog-actions>*{flex:1 1 140px}.hoa-v628-toast-stack{right:12px;bottom:12px;width:calc(100vw - 24px)}}
@media(prefers-reduced-motion:reduce){.hoa-v628-overlay,.hoa-v628-dialog,.hoa-v628-toast,.hoa-v628-loading{transition:none!important}.hoa-v628-toast,.hoa-v628-spinner{animation:none!important}}