/* ═══════════════════════════════════════════════════
   PakCrypt26 — Main Stylesheet
   Design: Deep midnight navy × electric teal × gold
   Font: Space Grotesk (UI) + JetBrains Mono (code/labels)
        + Libre Baskerville (editorial headings)
   ═══════════════════════════════════════════════════ */

:root {
  /* Color Palette */
  --pk-navy:       #0a0f1e;
  --pk-navy-2:     #0d1529;
  --pk-navy-3:     #111d38;
  --pk-navy-4:     #162040;
  --pk-teal:       #00c9b1;
  --pk-teal-dim:   #009f8c;
  --pk-teal-glow:  rgba(0,201,177,0.15);
  --pk-gold:       #f0b429;
  --pk-gold-dim:   #c8941a;
  --pk-white:      #f0f4ff;
  --pk-muted:      #8899bb;
  --pk-border:     rgba(255,255,255,0.08);
  --pk-card-bg:    rgba(13,21,41,0.85);
  --pk-card-bdr:   rgba(0,201,177,0.15);

  /* Typography scale */
  --font-ui:       'Space Grotesk', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;
  --font-display:  'Libre Baskerville', serif;

  /* Motion */
  --ease-smooth:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast:      150ms;
  --dur-med:       300ms;
}

/* ── RESET / BASE ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-ui);
  background-color: var(--pk-navy);
  color: var(--pk-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.mono-tag { font-family: var(--font-mono); letter-spacing: 0.05em; }

/* ── NAVBAR ─────────────────────────────────── */
.pk-navbar {
  background: rgba(10, 15, 30, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--pk-border);
  padding: 0.9rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background var(--dur-med) var(--ease-smooth);
}

.pk-brand {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brand-cipher {
  font-size: 1.5rem;
  color: var(--pk-teal);
  filter: drop-shadow(0 0 8px var(--pk-teal));
  animation: cipher-pulse 3s ease-in-out infinite;
}

.brand-name {
  font-size: 1.25rem;
  color: var(--pk-white);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.brand-accent { color: var(--pk-teal); }

.brand-year {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--pk-gold);
  background: rgba(240,180,41,0.15);
  border: 1px solid rgba(240,180,41,0.3);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  align-self: flex-start;
  margin-top: 0.1rem;
}

.pk-navbar .nav-link {
  color: rgba(240,244,255,0.75) !important;
  font-weight: 500;
  padding: 0.5rem 0.75rem !important;
  border-radius: 6px;
  transition: color var(--dur-fast), background var(--dur-fast);
  font-size: 0.9rem;
}

.pk-navbar .nav-link:hover {
  color: var(--pk-teal) !important;
  background: var(--pk-teal-glow);
}

.pk-dropdown {
  background: var(--pk-navy-3);
  border: 1px solid var(--pk-card-bdr);
  border-radius: 10px;
  padding: 0.5rem;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}

.pk-dropdown .dropdown-item {
  color: rgba(240,244,255,0.8);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.pk-dropdown .dropdown-item:hover {
  background: var(--pk-teal-glow);
  color: var(--pk-teal);
}

/* ── BUTTONS ────────────────────────────────── */
.pk-btn-primary {
  background: linear-gradient(135deg, var(--pk-teal), var(--pk-teal-dim));
  color: var(--pk-navy) !important;
  font-weight: 700;
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  border: none;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  transition: all var(--dur-med) var(--ease-smooth);
  box-shadow: 0 4px 14px rgba(0,201,177,0.3);
  text-decoration: none;
  display: inline-block;
}

.pk-btn-primary:hover {
  background: linear-gradient(135deg, #00e5cc, var(--pk-teal));
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,201,177,0.45);
  color: var(--pk-navy) !important;
}

.pk-btn-outline {
  color: var(--pk-teal) !important;
  border: 1px solid var(--pk-teal);
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--dur-med) var(--ease-smooth);
  display: inline-block;
}

.pk-btn-outline:hover {
  background: var(--pk-teal-glow);
  transform: translateY(-1px);
  color: var(--pk-teal) !important;
}

.pk-btn-gold {
  background: linear-gradient(135deg, var(--pk-gold), var(--pk-gold-dim));
  color: var(--pk-navy) !important;
  font-weight: 700;
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  border: none;
  transition: all var(--dur-med);
}

/* ── FLASH / ALERTS ─────────────────────────── */
.pk-flash-container {
  position: fixed;
  top: 80px;
  right: 1.5rem;
  z-index: 2000;
  width: min(420px, calc(100vw - 3rem));
}

.pk-alert {
  border: none;
  border-radius: 10px;
  backdrop-filter: blur(10px);
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  border-left: 3px solid currentColor;
}

/* ── CARDS ──────────────────────────────────── */
.pk-card {
  background: var(--pk-card-bg);
  border: 1px solid var(--pk-card-bdr);
  border-radius: 14px;
  padding: 1.75rem;
  backdrop-filter: blur(10px);
  transition: border-color var(--dur-med), transform var(--dur-med);
}

.pk-card:hover {
  border-color: rgba(0,201,177,0.3);
  transform: translateY(-2px);
}

.pk-card-header {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pk-teal);
  margin-bottom: 0.5rem;
}

/* ── HERO ───────────────────────────────────── */
.pk-hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.pk-hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('/static/images/islamabad_hero.jpg');
  background-size: cover;
  background-position: center;
  filter: brightness(0.25) saturate(0.8);
  z-index: 0;
}

.pk-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(0,201,177,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 80% 30%, rgba(240,180,41,0.05) 0%, transparent 70%),
    linear-gradient(180deg, rgba(10,15,30,0.3) 0%, rgba(10,15,30,0.9) 100%);
  z-index: 1;
}

/* ── CRYPTO CANVAS ART ──────────────────────── */
#cryptoCanvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.35;
}

.pk-hero-content {
  position: relative;
  z-index: 3;
}

/* ── SECTION STYLES ─────────────────────────── */
.pk-section {
  padding: 6rem 0;
}

.pk-section-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pk-teal);
  margin-bottom: 0.75rem;
}

.pk-section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--pk-white);
}

.pk-section-title em { color: var(--pk-teal); font-style: normal; }

/* ── STATS BAR ──────────────────────────────── */
.pk-stat {
  text-align: center;
  padding: 1.5rem;
}

.pk-stat-number {
  font-family: var(--font-mono);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--pk-teal);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.pk-stat-label {
  font-size: 0.8rem;
  color: var(--pk-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── FORMS ──────────────────────────────────── */
.pk-form-wrap {
  background: var(--pk-navy-2);
  border: 1px solid var(--pk-card-bdr);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}

.pk-form-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--pk-white);
  margin-bottom: 0.25rem;
}

.pk-form-subtitle {
  color: var(--pk-muted);
  font-size: 0.875rem;
  margin-bottom: 2rem;
}

.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(240,244,255,0.7);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

.form-control, .form-select {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--pk-white) !important;
  border-radius: 8px;
  padding: 0.625rem 0.875rem;
  font-size: 0.9rem;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.form-control:focus, .form-select:focus {
  background: rgba(255,255,255,0.06);
  border-color: var(--pk-teal);
  box-shadow: 0 0 0 3px rgba(0,201,177,0.15);
  color: var(--pk-white) !important;
  outline: none;
}

.form-control::placeholder { color: rgba(240,244,255,0.3); }

.form-select option {
  background: var(--pk-navy-3);
  color: var(--pk-white);
}

.form-check-input:checked {
  background-color: var(--pk-teal);
  border-color: var(--pk-teal);
}

.invalid-feedback { font-size: 0.8rem; }

/* ── TABLES ─────────────────────────────────── */
.pk-table {
  color: var(--pk-white);
  border-collapse: separate;
  border-spacing: 0;
}

.pk-table thead th {
  background: rgba(0,201,177,0.08);
  color: var(--pk-teal);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--pk-card-bdr);
  padding: 0.875rem 1rem;
  white-space: nowrap;
}

.pk-table tbody td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
  font-size: 0.875rem;
}

.pk-table tbody tr:hover td {
  background: rgba(0,201,177,0.04);
}

/* ── BADGE ──────────────────────────────────── */
.pk-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pk-badge-teal  { background: rgba(0,201,177,0.15); color: var(--pk-teal); border: 1px solid rgba(0,201,177,0.3); }
.pk-badge-gold  { background: rgba(240,180,41,0.15); color: var(--pk-gold); border: 1px solid rgba(240,180,41,0.3); }
.pk-badge-red   { background: rgba(239,68,68,0.15);  color: #f87171;        border: 1px solid rgba(239,68,68,0.3); }
.pk-badge-gray  { background: rgba(255,255,255,0.08); color: var(--pk-muted); border: 1px solid rgba(255,255,255,0.1); }

/* ── DASHBOARD PANELS ───────────────────────── */
.pk-sidebar {
  background: var(--pk-navy-2);
  border-right: 1px solid var(--pk-border);
  min-height: calc(100vh - 64px);
  padding: 2rem 0;
}

.pk-sidebar .nav-link {
  color: rgba(240,244,255,0.65);
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0;
  transition: all var(--dur-fast);
  border-left: 3px solid transparent;
}

.pk-sidebar .nav-link:hover,
.pk-sidebar .nav-link.active {
  color: var(--pk-teal);
  background: var(--pk-teal-glow);
  border-left-color: var(--pk-teal);
}

.pk-sidebar-section {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pk-muted);
  padding: 0.5rem 1.5rem;
  margin-top: 1rem;
}

/* ── TIMER WIDGET ───────────────────────────── */
.pk-timer {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  background: rgba(0,201,177,0.08);
  border: 1px solid var(--pk-card-bdr);
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.pk-timer.warning { color: var(--pk-gold); border-color: rgba(240,180,41,0.3); }
.pk-timer.danger  { color: #f87171; border-color: rgba(239,68,68,0.3); animation: blink 1s step-end infinite; }

/* ── PROGRESS BAR ───────────────────────────── */
.pk-progress {
  background: rgba(255,255,255,0.06);
  border-radius: 100px;
  height: 6px;
  overflow: hidden;
}

.pk-progress-fill {
  background: linear-gradient(90deg, var(--pk-teal), var(--pk-gold));
  height: 100%;
  border-radius: 100px;
  transition: width 0.5s var(--ease-smooth);
}

/* ── QUESTION CARD ──────────────────────────── */
.pk-question-wrap {
  max-width: 780px;
  margin: 0 auto;
}

.pk-question-content {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--pk-white);
}

.pk-question-content img {
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid var(--pk-card-bdr);
}

.pk-choice-btn {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--pk-white);
  padding: 0.875rem 1.25rem;
  border-radius: 10px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: all var(--dur-fast);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.pk-choice-btn:hover { border-color: var(--pk-teal); background: var(--pk-teal-glow); }
.pk-choice-btn.selected { border-color: var(--pk-teal); background: rgba(0,201,177,0.12); color: var(--pk-teal); }

/* ── FOOTER ─────────────────────────────────── */
.pk-footer {
  background: var(--pk-navy-2);
  border-top: 1px solid var(--pk-border);
  padding: 4rem 0 2rem;
  margin-top: 6rem;
}

.footer-heading {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pk-teal);
  margin-bottom: 1rem;
}

.footer-links li + li { margin-top: 0.4rem; }
.footer-links a {
  color: rgba(240,244,255,0.55);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color var(--dur-fast);
}
.footer-links a:hover { color: var(--pk-teal); }

.footer-divider {
  border-color: var(--pk-border);
  margin: 2rem 0 1.5rem;
}

/* Bootstrap's .text-muted resolves to a dark grey intended for light
   backgrounds, which is all but unreadable on this navy footer. Override it
   here rather than in the markup, so any text added to the footer later
   inherits a legible colour. !important is required because Bootstrap's own
   rule carries it. */
.pk-footer .text-muted {
  color: rgba(240, 244, 255, 0.72) !important;
}
.pk-footer .mono-tag.text-muted {
  color: var(--pk-teal) !important;
  opacity: 0.9;
}

/* ── ERROR PAGE ─────────────────────────────── */
.pk-error-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pk-error-code {
  font-family: var(--font-mono);
  font-size: 6rem;
  font-weight: 700;
  color: var(--pk-teal);
  opacity: 0.3;
  line-height: 1;
}

/* ── ANIMATIONS ─────────────────────────────── */
@keyframes cipher-pulse {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 8px var(--pk-teal)); }
  50%       { opacity: 0.7; filter: drop-shadow(0 0 16px var(--pk-teal)); }
}

@keyframes blink {
  50% { opacity: 0; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up { animation: fade-in-up 0.6s var(--ease-smooth) both; }
.fade-in-up-1 { animation-delay: 0.1s; }
.fade-in-up-2 { animation-delay: 0.2s; }
.fade-in-up-3 { animation-delay: 0.3s; }
.fade-in-up-4 { animation-delay: 0.4s; }

/* ── SYMPOSIUM SPECIFIC ─────────────────────── */
.speaker-card {
  background: var(--pk-navy-3);
  border: 1px solid var(--pk-card-bdr);
  border-radius: 14px;
  overflow: hidden;
  transition: all var(--dur-med);
}

.speaker-card:hover {
  border-color: rgba(0,201,177,0.35);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,201,177,0.1);
}

.speaker-photo {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: top;
}

.speaker-photo-placeholder {
  width: 100%;
  height: 220px;
  background: linear-gradient(135deg, var(--pk-navy-4), var(--pk-navy-3));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: var(--pk-teal);
  opacity: 0.4;
}

.schedule-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  align-items: start;
}

.schedule-time {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--pk-gold);
  padding-top: 0.2rem;
}

.schedule-hall-tab {
  background: var(--pk-navy-3);
  border: 1px solid var(--pk-card-bdr);
  border-radius: 10px 10px 0 0;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all var(--dur-fast);
  color: var(--pk-muted);
}

.schedule-hall-tab.active {
  background: var(--pk-teal-glow);
  color: var(--pk-teal);
  border-color: rgba(0,201,177,0.3);
}

/* ── RESPONSIVE ─────────────────────────────── */
@media (max-width: 768px) {
  .pk-form-wrap { padding: 1.5rem; }
  .pk-hero { min-height: 85vh; }
  .pk-section { padding: 4rem 0; }
  .pk-sidebar { min-height: auto; border-right: none; border-bottom: 1px solid var(--pk-border); }
}

/* ── SCROLLBAR ──────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--pk-navy); }
::-webkit-scrollbar-thumb { background: rgba(0,201,177,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--pk-teal); }

/* ═══════════════════════════════════════════════
   EXAM GUARD — anti-cheat presentation layer
   ═══════════════════════════════════════════════ */

/* Question text is not selectable; the candidate's own answer fields are. */
.pk-question-content,
.pk-choice-btn {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.pk-question-content img { pointer-events: none; }

input, textarea, .exam-selectable {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* ── Identity watermark ──────────────────────── */
/* Tiled across the viewport so any screenshot or phone photo carries the
   candidate's name, CNIC and session id. Non-interactive by design. */
.exam-watermark {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 3.5rem 2.5rem;
  padding: 3rem 1rem;
  transform: rotate(-24deg) scale(1.5);
  transform-origin: center;
}
.exam-wm-cell {
  font-family: var(--font-mono, monospace);
  font-size: .72rem;
  white-space: nowrap;
  color: rgba(240, 244, 255, 0.055);
  letter-spacing: .04em;
  user-select: none;
}
.exam-wm-clock { margin-left: .4rem; }

/* ── Warning banner ──────────────────────────── */
/* ── Retired tab veil ──────────────────────────────
   Shown when the round has moved to a newer tab. Sits above the watermark
   and the warning banner so the retired tab cannot be worked in. */
.exam-tab-retired {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(4, 9, 24, 0.94);
  backdrop-filter: blur(6px);
}
.exam-tab-retired-card {
  max-width: 460px;
  text-align: center;
  padding: 2.25rem 2rem;
  border-radius: 14px;
  background: var(--pk-navy-2);
  border: 1px solid var(--pk-border);
}
.exam-tab-retired-icon {
  font-size: 2.25rem;
  color: var(--pk-teal);
  margin-bottom: .75rem;
}
.exam-tab-retired-card h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin-bottom: .75rem;
}
.exam-tab-retired-card p {
  font-size: .875rem;
  color: rgba(240, 244, 255, 0.7);
  line-height: 1.65;
  margin-bottom: 1.5rem;
}
.exam-tab-retired-card button {
  padding: .65rem 1.75rem;
  border-radius: 8px;
  border: none;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--pk-teal);
  color: var(--pk-navy);
}

.exam-warning {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: .6rem;
  max-width: min(90vw, 560px);
  padding: .7rem 1.15rem;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  font-size: .85rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}

/* ── Print blocking ──────────────────────────── */
.exam-print-notice { display: none; }

@media print {
  /* Nothing from the exam page reaches the printer or a "print to PDF". */
  body > *:not(.exam-print-notice) { display: none !important; }
  .exam-print-notice {
    display: block !important;
    padding: 4rem 2rem;
    font-family: sans-serif;
    font-size: 1.1rem;
    color: #000;
    text-align: center;
  }
}

/* Belt-and-braces: beforeprint adds this class before the print dialog
   paints, in case a browser ignores the print media query. */
body.exam-printing .pk-question-content,
body.exam-printing .choice-group,
body.exam-printing .pk-card { visibility: hidden !important; }

/* ═══════════════════════════════════════════════
   WEBCAM PROCTORING
   ═══════════════════════════════════════════════ */

/* Self-view — always visible while recording, so the candidate can see
   exactly what is being captured. */
.proctor-selfview {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1050;
  width: 190px;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(0, 201, 177, 0.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.proctor-selfview video {
  display: block;
  width: 100%;
  height: auto;
  /* Mirrored: an unmirrored self-view reads as "wrong" to most people. */
  transform: scaleX(-1);
}
.proctor-selfview-bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .55rem;
  font-size: .68rem;
  font-family: var(--font-mono, monospace);
  color: var(--pk-muted);
  background: rgba(10, 15, 30, 0.95);
}
.proctor-rec-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f87171;
  flex: 0 0 auto;
  animation: proctor-pulse 2s ease-in-out infinite;
}
@keyframes proctor-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

/* Blocking gate — the paper stays unreadable until the camera is confirmed. */
.proctor-gate {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(6, 10, 22, 0.86);
  backdrop-filter: blur(4px);
}
.proctor-gate-card {
  max-width: 460px;
  width: 100%;
  text-align: center;
  padding: 2.25rem 2rem;
  border-radius: 14px;
  background: var(--pk-navy-2, #0e1730);
  border: 1px solid var(--pk-border, rgba(255,255,255,.1));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

/* ── Invigilator grid ────────────────────────── */
.proctor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}
.proctor-tile {
  border-radius: 10px;
  overflow: hidden;
  background: var(--pk-navy-2, #0e1730);
  border: 1px solid var(--pk-border, rgba(255,255,255,.1));
}
.proctor-tile.is-stale  { border-color: rgba(239, 68, 68, .55); }
.proctor-tile.is-flagged { border-color: rgba(240, 180, 41, .6); }
.proctor-tile-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
}
.proctor-tile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scaleX(-1);
}
.proctor-tile-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--pk-muted);
  font-size: .78rem;
  text-align: center;
  padding: 1rem;
}
.proctor-tile-meta { padding: .55rem .7rem; }
.proctor-tile-name {
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proctor-tile-sub {
  font-size: .7rem;
  color: var(--pk-muted);
  font-family: var(--font-mono, monospace);
}
.proctor-badge {
  position: absolute;
  top: .4rem;
  left: .4rem;
  font-size: .62rem;
  padding: .15rem .45rem;
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  background: rgba(239, 68, 68, .85);
  color: #fff;
}

@media (max-width: 576px) {
  .proctor-selfview { width: 128px; right: .5rem; bottom: .5rem; }
}