/* ===== Public site final design pass ===== */
:root {
  --public-bg: #070b18;
  --public-surface: rgba(13, 22, 42, .82);
  --public-surface-strong: #0d162a;
  --public-line: rgba(164, 192, 240, .14);
  --public-muted: #9eacc3;
  --public-accent: #7edfff;
}

body {
  background:
    radial-gradient(circle at 85% 0%, rgba(126, 223, 255, .07), transparent 28rem),
    radial-gradient(circle at 10% 0%, rgba(164, 92, 255, .07), transparent 30rem),
    var(--public-bg);
}

.site-header {
  min-height: 76px;
  background: rgba(7, 11, 24, .88);
  border-bottom-color: rgba(255,255,255,.08);
}

.site-header .brand {
  min-width: 0;
}

.site-header .brand > span:last-child {
  white-space: nowrap;
}

.site-header .language-switcher {
  margin-left: 5px;
  padding-left: 9px;
  border-left: 1px solid var(--public-line);
}

.site-main {
  width: 100%;
  max-width: none;
  margin: 0;
}

.site-main > .shell,
.site-main > .page-section,
.site-main > .contact-page,
.site-main > .profile-shell,
.site-main > .directory-main,
.site-main > .quiz-page-grid {
  width: min(1180px, calc(100% - 36px));
  margin-inline: auto;
}

.page-section {
  width: min(900px, calc(100% - 36px));
  padding: 72px 0 86px;
}

.page-section > h1 {
  margin: 0;
  max-width: 850px;
  color: #f8fbff;
  font-size: clamp(44px, 6vw, 72px);
  line-height: .96;
  letter-spacing: -.055em;
}

.page-section > .hero-text {
  max-width: 700px;
  margin-top: 20px;
  color: var(--public-muted);
  font-size: 17px;
  line-height: 1.7;
}

.eyebrow {
  color: var(--public-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
}

.button {
  min-height: 46px;
  padding: 11px 17px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 850;
}

.button-primary {
  color: #06101e;
  background: var(--public-accent);
  box-shadow: 0 12px 30px rgba(53,199,255,.12);
}

.button-secondary {
  color: #e8eef8;
  border-color: var(--public-line);
  background: rgba(255,255,255,.045);
}

.button-secondary:hover {
  border-color: rgba(126,223,255,.30);
  background: rgba(126,223,255,.07);
}

.quiz-grid {
  gap: 14px;
}

.quiz-card,
.quiz-feature,
.quiz-stage,
.results-card,
.empty-state {
  border-color: var(--public-line);
  background: linear-gradient(145deg, rgba(15,27,52,.92), rgba(9,16,31,.94));
  box-shadow: 0 18px 50px rgba(0,0,0,.16);
}

.quiz-card {
  min-height: 205px;
  padding: 21px;
  border-radius: 14px;
}

.quiz-card:hover {
  transform: translateY(-2px);
  border-color: rgba(126,223,255,.34);
  box-shadow: 0 22px 52px rgba(0,0,0,.22);
}

.quiz-card h3 {
  color: #f5f8ff;
  font-size: 19px;
}

.quiz-card p {
  color: #9eacc3;
  font-size: 13px;
  line-height: 1.6;
}

.quiz-card .quiz-card-footer {
  color: #8493aa;
  font-size: 12px;
}

.category-pill {
  padding: 5px 9px;
  border-color: rgba(126,223,255,.24);
  color: var(--public-accent);
  background: rgba(126,223,255,.06);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.quiz-feature {
  min-height: 190px;
  border-radius: 16px;
}

.library-controls {
  display: flex;
  align-items: end;
  gap: 10px;
}

.filter-label {
  display: grid;
  gap: 6px;
  color: #8392aa;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.library-controls select,
.library-controls input {
  min-height: 44px;
  padding: 9px 12px;
  color: #edf3ff;
  border: 1px solid var(--public-line);
  border-radius: 9px;
  outline: 0;
  background: rgba(5,10,20,.72);
}

.library-controls input {
  width: 230px;
}

.library-controls select:focus,
.library-controls input:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.form-card input:focus {
  border-color: rgba(126,223,255,.65);
  box-shadow: 0 0 0 3px rgba(126,223,255,.08);
}

.library-count-row {
  min-height: 26px;
  margin: 14px 0 10px;
  color: #71819a;
  font-size: 12px;
  font-weight: 750;
}

.quiz-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}

.quiz-pagination #quiz-page-label {
  min-width: 92px;
  text-align: center;
  color: #8998ae;
  font-size: 12px;
  font-weight: 800;
}

.page-section .quiz-feature + .quiz-feature {
  margin-top: 14px;
}

.page-section .quiz-feature h2 {
  margin: 0 0 9px;
  color: #f4f8ff;
  font-size: clamp(23px, 3vw, 31px);
  letter-spacing: -.035em;
}

.page-section .quiz-feature p {
  color: var(--public-muted);
  line-height: 1.7;
}

/* Login, registration and simple account forms */
.form-card {
  max-width: 560px;
  margin-top: 30px;
  padding: 26px;
  border-color: var(--public-line);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(15,27,52,.94), rgba(9,16,31,.96));
  box-shadow: 0 20px 55px rgba(0,0,0,.18);
}

.form-card input {
  min-height: 48px;
  border-color: var(--public-line);
  border-radius: 9px;
  background: rgba(4,9,18,.68);
}

.form-card button {
  min-height: 46px;
  border-radius: 9px;
  background: var(--public-accent);
}

.form-card p {
  color: #8796ad;
  line-height: 1.55;
}

.form-card + p {
  color: #8796ad;
}

.form-card + p a {
  color: var(--public-accent);
}

#login-message,
#register-message {
  color: #ffb9c9;
  white-space: pre-line;
}

.contact-form {
  max-width: 760px;
  padding: 26px;
  border: 1px solid var(--public-line);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(15,27,52,.94), rgba(9,16,31,.96));
  box-shadow: 0 20px 55px rgba(0,0,0,.18);
}

.contact-form label {
  color: #aebbd1;
}

.contact-form input,
.contact-form textarea {
  border-color: var(--public-line);
  border-radius: 9px;
  background: rgba(4,9,18,.68);
}

.notice {
  max-width: 760px;
  margin-bottom: 18px;
  padding: 13px 15px;
  border-radius: 10px;
  border: 1px solid var(--public-line);
  background: rgba(255,255,255,.035);
}

.notice.success {
  color: #a8edc0;
  border-color: rgba(69,212,131,.25);
  background: rgba(69,212,131,.06);
}

.notice.error {
  color: #ffc1cf;
  border-color: rgba(255,95,154,.25);
  background: rgba(255,95,154,.06);
}

/* Account */
.profile-shell {
  padding: 54px 0 76px;
}

.profile-hero {
  padding: 28px;
  border-color: var(--public-line);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(15,27,52,.94), rgba(9,16,31,.96));
  box-shadow: 0 20px 55px rgba(0,0,0,.16);
}

.profile-hero h1 {
  color: #f8fbff;
}

.profile-stat-grid {
  margin-top: 14px;
  border-color: var(--public-line);
  background: rgba(9,16,31,.72);
}

.profile-stat {
  background: transparent;
}

.profile-stat strong {
  color: #f6f9ff;
}

/* Quiz player */
.quiz-page-grid {
  width: min(900px, calc(100% - 36px));
}

.quiz-shell {
  padding: 48px 0 72px;
}

.quiz-stage,
.results-card {
  max-width: 900px;
  border-radius: 16px;
  padding: 24px;
}

.quiz-title {
  color: #f7faff;
}

.question-card {
  border-color: var(--public-line);
  border-radius: 13px;
  background: rgba(4,9,18,.42);
}

.answer-button {
  border-color: var(--public-line);
  background: rgba(255,255,255,.035);
}

.answer-button:hover:not(:disabled) {
  border-color: rgba(126,223,255,.42);
  background: rgba(126,223,255,.06);
}

.quiz-controls {
  gap: 9px;
}

/* Logo quiz presentation: centre the artwork, give it more room and remove
   the large blank canvas commonly included around downloaded logos. */
.logo-quiz .question-card {
  padding: clamp(18px, 3vw, 28px);
}
.logo-quiz .question-visual {
  min-height: 190px;
  margin: 0 0 18px;
  padding: 22px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(170,192,224,.18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 45%, rgba(53,199,255,.07), transparent 52%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(241,246,252,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 28px rgba(0,0,0,.12);
}
.logo-quiz .question-visual img {
  display: block;
  width: min(100%, 440px);
  height: 210px;
  object-fit: contain;
  transform: scale(1.12);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.14));
}

.results-card .result-score {
  color: #f7faff;
}

/* Completed quiz layout */
.quiz-shell.quiz-complete {
  padding-top: 24px;
}
.quiz-shell.quiz-complete .quiz-context-card {
  min-height: 0;
  margin-bottom: 18px;
  padding: 24px 30px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 20%, rgba(53,199,255,.08), transparent 22rem),
    linear-gradient(145deg, rgba(13,25,48,.96), rgba(8,15,29,.98));
}
.quiz-shell.quiz-complete .quiz-context-card h1 {
  font-size: clamp(28px, 4vw, 42px);
}
.quiz-shell.quiz-complete .quiz-context-card p {
  margin-top: 6px;
}
.quiz-shell.quiz-complete .results-card {
  max-width: 900px;
  padding: 34px clamp(22px, 4vw, 48px) 40px;
  border-color: rgba(126,223,255,.14);
  background:
    radial-gradient(circle at 50% 0%, rgba(53,199,255,.075), transparent 24rem),
    linear-gradient(145deg, rgba(13,25,48,.98), rgba(8,15,29,.99));
  box-shadow: 0 24px 70px rgba(0,0,0,.24), 0 0 0 1px rgba(255,255,255,.015);
}
.quiz-shell.quiz-complete .results-card .eyebrow {
  margin-bottom: 2px;
}
.quiz-shell.quiz-complete .result-score {
  margin-top: 4px;
  font-size: clamp(76px, 11vw, 112px);
  line-height: .95;
  text-shadow: 0 12px 35px rgba(53,199,255,.12);
}
.quiz-shell.quiz-complete .results-card h1 {
  margin-top: 12px;
  font-size: clamp(30px, 4vw, 46px);
}
.quiz-shell.quiz-complete .result-copy {
  margin-top: 8px;
  font-size: 16px;
}
.quiz-shell.quiz-complete .result-actions {
  margin-top: 24px;
}
.quiz-shell.quiz-complete .result-breakdown {
  max-width: 760px;
  margin-inline: auto;
}

/* Completed quiz results: keep the content full-width so the score,
   message, challenge status and actions never compete for the same space. */
.quiz-shell.quiz-complete .results-card {
  display: block;
  text-align: center;
}
.quiz-shell.quiz-complete .results-card > .eyebrow,
.quiz-shell.quiz-complete .results-card > .result-score,
.quiz-shell.quiz-complete .results-card > #result-heading,
.quiz-shell.quiz-complete .results-card > #result-copy {
  text-align: center;
}
.quiz-shell.quiz-complete .results-card > #result-percentage,
.quiz-shell.quiz-complete .results-card > #result-xp {
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.quiz-shell.quiz-complete .results-card > .result-actions {
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  max-width: 900px;
}
.quiz-shell.quiz-complete .results-card > .result-actions .button {
  width: auto;
  min-width: 170px;
}
.quiz-shell.quiz-complete .results-card > #challenge-result {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 22px 0 0;
  text-align: left;
}
.quiz-shell.quiz-complete .results-card > #challenge-result.hidden {
  display: none;
}
.quiz-shell.quiz-complete .results-card > .result-breakdown {
  width: 100%;
  margin-top: 30px;
}
@media (max-width: 720px) {
  .quiz-shell.quiz-complete .results-card {
    text-align: center;
  }
  .quiz-shell.quiz-complete .results-card > .result-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .quiz-shell.quiz-complete .results-card > .result-actions .button {
    width: 100%;
  }
}

/* Footer */
.professional-footer {
  margin-top: 0;
  background: #060b16;
  border-top-color: rgba(255,255,255,.08);
}

.professional-footer-grid {
  padding-top: 42px;
  padding-bottom: 30px;
}

.professional-footer-bottom {
  border-top-color: rgba(255,255,255,.07);
}

/* Secondary public pages */
.contact-page {
  width: min(900px, calc(100% - 36px));
  margin-inline: auto;
  padding: 68px 0 80px;
}

.contact-card {
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--public-line);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(15,27,52,.94), rgba(9,16,31,.96));
  box-shadow: 0 20px 55px rgba(0,0,0,.18);
}

.contact-card > h1 {
  margin: 0 0 14px;
  color: #f8fbff;
  font-size: clamp(40px, 6vw, 64px);
  line-height: .98;
  letter-spacing: -.055em;
}

.contact-card > p:not(.eyebrow) {
  max-width: 700px;
  color: var(--public-muted);
  line-height: 1.7;
}

.contact-card .contact-form {
  margin-top: 20px;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.report-target {
  display: grid;
  gap: 6px;
  margin: 22px 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--public-line);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
}

.report-target strong {
  color: #f5f8ff;
}

.report-target span {
  color: #8f9db5;
  line-height: 1.55;
}

.report-reporter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.report-reporter > div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--public-line);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
}

.report-reporter span {
  color: #71819a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.report-reporter strong {
  color: #edf3ff;
  overflow-wrap: anywhere;
}

.contact-card .admin-textarea {
  width: 100%;
  min-height: 140px;
  padding: 12px 14px;
  color: #fff;
  border: 1px solid var(--public-line);
  border-radius: 9px;
  outline: 0;
  background: rgba(4,9,18,.68);
  font: inherit;
  resize: vertical;
}

.page-section > p:not(.eyebrow) {
  line-height: 1.7;
}

.page-section > p:not(.eyebrow) a {
  color: var(--public-accent);
  font-weight: 800;
}

/* Shared visibility utility. */
.hidden {
  display: none !important;
}


/* ===== maintenance status banner ===== */
.maintenance-banner{width:100%;min-height:42px;display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 18px;color:#07132f;background:linear-gradient(90deg,#f5c84b,#ffd96f);border-bottom:1px solid rgba(0,0,0,.18);font-size:13px;line-height:1.35;text-align:center}
.maintenance-banner strong{font-weight:900}.maintenance-banner span{font-weight:650}
.site-logo{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:12px;overflow:hidden}
.site-logo img,.maintenance-mark img{width:100%;height:100%;object-fit:contain;display:block}

.site-confirm-overlay{position:fixed !important;inset:0 !important;z-index:2147483000 !important;width:100vw !important;height:100vh !important;display:grid !important;place-items:center !important;box-sizing:border-box;background:rgba(3,9,24,.72);backdrop-filter:blur(5px)}.site-confirm-overlay[hidden]{display:none !important}.site-confirm-dialog{width:min(460px,100%);padding:26px;border:1px solid rgba(142,223,255,.22);border-radius:18px;background:#101a35;box-shadow:0 24px 70px rgba(0,0,0,.45)}.site-confirm-dialog h2{margin:0 0 10px;color:#fff;font-size:24px}.site-confirm-dialog p{margin:0;color:#b9c6df;line-height:1.55;white-space:pre-line}.site-confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}




/* ===== Account modal and personal dashboard ===== */
/* Account modal */
.account-backdrop,
.challenge-picker-overlay {
  background: rgba(3, 6, 11, 0.78);
  backdrop-filter: blur(14px);
}

.account-dialog {
  width: min(500px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  padding: 28px;
  border-radius: var(--radius-xl);
}
.account-dialog h2 { font-size: clamp(28px, 5vw, 39px); }
.account-close,
.challenge-picker-close {
  border: 1px solid rgba(170,192,224,0.12);
  color: #fff;
  background: rgba(255,255,255,0.035);
}
.account-close:hover,
.challenge-picker-close:hover { background: rgba(255,255,255,0.07); }

.account-tabs { border-color: rgba(170,192,224,0.1); background: rgba(255,255,255,0.025); }
.account-tab { color: var(--muted); }
.account-tab.active { color: #04121c; background: #67d9ff; }
.account-form label { color: var(--muted-strong); }
.account-fine-print { color: #7f8fa5; }


/* Personal dashboard and engagement */
#personal-dashboard {
  width: min(1120px, calc(100% - 48px));
  max-width: 1120px;
  padding-block: 32px 22px;
}

#personal-dashboard > .engagement-grid,
.profile-stat-grid,
#profile-engagement .engagement-grid {
  border-color: var(--border);
  background: rgba(12,20,34,0.76);
}

.engagement-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(12,20,34,0.8);
  box-shadow: none;
}
.engagement-card h3 { color: #fff; }
.engagement-card p,
.engagement-row small { color: var(--muted); }
.engagement-card .big { color: #fff; letter-spacing: -0.04em; }
.achievement-card { border-color: rgba(170,192,224,0.1); background: rgba(255,255,255,0.025); }
.category-progress { background: rgba(255,255,255,0.06); }
.category-progress span { background: linear-gradient(90deg, var(--cyan), var(--purple)); }
.rank-table th { color: #8291a6; }
.rank-table td { color: #dce5f0; }

#personal-dashboard > .engagement-grid > .engagement-card,
#personal-dashboard > .engagement-mini-grid > .engagement-card,
#personal-dashboard > .engagement-card {
  background: transparent;
  box-shadow: none;
}

#personal-dashboard > .engagement-mini-grid > .engagement-card {
  border-color: var(--border);
  background: rgba(12,20,34,0.72);
}



/* Footer */
.site-footer {
  margin-top: 36px;
  border-top: 1px solid rgba(170,192,224,0.09);
  background: rgba(4,7,12,0.55);
}
.footer-inner {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #7f8da0;
  font-size: 12px;
}
.footer-inner span:first-child { color: #cdd7e4; font-weight: 750; }