:root {
  --apply-bg: #020617;
  --apply-surface: rgba(15, 23, 42, 0.88);
  --apply-border: rgba(99, 102, 241, 0.28);
  --apply-accent: #818cf8;
  --apply-emerald: #34d399;
}

body {
  font-family: Outfit, system-ui, sans-serif;
  background: var(--apply-bg);
  color: #e2e8f0;
  min-height: 100vh;
}

.apply-mesh {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.apply-mesh::before,
.apply-mesh::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
}
.apply-mesh::before {
  width: 55%;
  height: 45%;
  top: -12%;
  right: -8%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.55), transparent 70%);
}
.apply-mesh::after {
  width: 45%;
  height: 40%;
  bottom: -10%;
  left: -10%;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.35), transparent 70%);
}
html.perf-high .apply-mesh::before {
  animation: applyMeshDrift 14s ease-in-out infinite alternate;
}
html.perf-high .apply-mesh::after {
  animation: applyMeshDrift 18s ease-in-out infinite alternate-reverse;
}
@keyframes applyMeshDrift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(4%, -3%) scale(1.08); }
}
html.perf-low .apply-mesh { display: none; }
html.perf-low body {
  background-image:
    radial-gradient(ellipse 100% 70% at 50% -20%, rgba(99, 102, 241, 0.2), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 60%, rgba(52, 211, 153, 0.1), transparent 50%);
}

.apply-shell { position: relative; z-index: 1; }

.glass {
  background: var(--apply-surface);
  border: 1px solid var(--apply-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html.perf-low .glass {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(15, 23, 42, 0.96);
}

.apply-hero {
  border-radius: 1.5rem;
  border: 1px solid rgba(129, 140, 248, 0.35);
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.75), rgba(15, 23, 42, 0.92));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.apply-card {
  border-radius: 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.15);
  background: rgba(15, 23, 42, 0.65);
  transition: border-color 0.2s ease, transform 0.15s ease, background 0.2s ease;
}
html.perf-high .apply-card:hover {
  transform: translateY(-2px);
  border-color: rgba(129, 140, 248, 0.45);
}
.apply-card-emerald { border-color: rgba(52, 211, 153, 0.35); }
.apply-card-emerald:hover { border-color: rgba(52, 211, 153, 0.55); background: rgba(6, 78, 59, 0.15); }
.apply-card-indigo:hover { background: rgba(79, 70, 229, 0.12); }

.apply-btn-primary {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35);
}
.apply-btn-discord { background: #5865f2; }
.apply-btn-discord:hover { background: #4752c4; }

.apply-stat-pill {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.65rem;
  border-radius: 9999px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.6);
  color: #94a3b8;
}
.apply-stat-pill strong { color: #e2e8f0; }

#apply-settings-fab {
  position: fixed;
  right: 1rem;
  bottom: 1.25rem;
  z-index: 45;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  border: 1px solid rgba(129, 140, 248, 0.45);
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  color: #c7d2fe;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
html.perf-high #apply-settings-fab:hover {
  transform: scale(1.06);
  box-shadow: 0 12px 32px rgba(79, 70, 229, 0.35);
}

#apply-settings-panel {
  position: fixed;
  right: 1rem;
  bottom: 5rem;
  z-index: 46;
  width: min(18rem, calc(100vw - 2rem));
  border-radius: 1rem;
  border: 1px solid var(--apply-border);
  background: rgba(15, 23, 42, 0.97);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  padding: 1rem;
}
#apply-settings-panel.hidden { display: none !important; }

.perf-picker-card {
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.98));
  border: 1px solid var(--apply-border);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}
.perf-option {
  text-align: left;
  width: 100%;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.65);
  padding: 1rem 1.1rem;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.perf-option:hover {
  border-color: rgba(129, 140, 248, 0.45);
  transform: translateY(-1px);
}
.perf-option-recommended {
  border-color: rgba(129, 140, 248, 0.5);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2);
}
.perf-option-badge {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  background: rgba(99, 102, 241, 0.2);
  color: #c7d2fe;
  border: 1px solid rgba(129, 140, 248, 0.35);
}

#auth-modal .auth-backdrop {
  background: rgba(3, 7, 18, 0.88);
}
html.perf-medium #auth-modal .auth-backdrop,
html.perf-high #auth-modal .auth-backdrop {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.auth-panel-card {
  background: linear-gradient(165deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  border: 1px solid var(--apply-border);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
}
.auth-tab.active {
  background: #4f46e5;
  color: #fff;
}
.auth-tab:not(.active) {
  color: #94a3b8;
}

@keyframes wait-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.92); } }
@keyframes wait-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes wait-fade { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.wait-pulse { animation: wait-pulse 2s ease-in-out infinite; }
.wait-ring { animation: wait-ring 1.4s linear infinite; }
.wait-fade { animation: wait-fade 1.8s ease-in-out infinite; }

html.staff-apply-dyslexia body { font-family: 'Comic Sans MS', 'OpenDyslexic', Outfit, system-ui, sans-serif; letter-spacing: 0.02em; }
html.staff-apply-text-large body { font-size: 1.08rem; }
html.staff-apply-bg-cream body { background: #f5f0e6; color: #1e293b; }
html.staff-apply-bg-cream .glass { background: rgba(255, 255, 255, 0.92); color: #1e293b; }
html.staff-apply-cursor-large, html.staff-apply-cursor-large * { cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><circle cx="16" cy="16" r="10" fill="%2322c55e"/></svg>') 16 16, auto !important; }
html.staff-apply-cursor-contrast, html.staff-apply-cursor-contrast * { cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"><circle cx="14" cy="14" r="9" fill="%23facc15" stroke="%23000" stroke-width="2"/></svg>') 14 14, auto !important; }

html.perf-pick-pending .apply-shell { visibility: hidden; }

/* Maintenance gate — brief hide until status is known */
body.apply-gate-pending #apply-app-root {
  visibility: hidden;
  pointer-events: none;
}
body.apply-gate-pending {
  background: #030712;
}

.apply-maintenance-banner {
  position: sticky;
  top: 0;
  z-index: 45;
  border-bottom: 1px solid rgba(255, 191, 36, 0.35);
  background: linear-gradient(90deg, rgba(120, 53, 15, 0.95), rgba(69, 26, 3, 0.92));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.apply-maintenance-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fde68a;
  border: 1px solid rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.12);
}
#proctored-test-card.apply-proctored-paused {
  opacity: 0.72;
  border-color: rgba(251, 191, 36, 0.35);
}
#proctored-test-card.apply-proctored-paused input,
#proctored-test-card.apply-proctored-paused button {
  pointer-events: none;
  cursor: not-allowed;
}

.apply-perf-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem;
  overflow-y: auto;
  background: #030712;
}
.apply-perf-picker-overlay.hidden {
  display: none !important;
}

#apply-settings-fab {
  z-index: 1310;
}
#apply-settings-panel {
  z-index: 1311;
}

html.pref-reduce-motion .wait-pulse,
html.pref-reduce-motion .wait-ring,
html.pref-reduce-motion .wait-fade,
html.pref-reduce-motion .apply-mesh::before,
html.pref-reduce-motion .apply-mesh::after { animation: none !important; }