/* Original retro UI by Christos Markos, cmarkos/graphql.
 * Source: 0895e0727458f7722a7c0b8e886497014c718340
 * External font import removed; local monospace fallbacks are used.
 * Integration overrides follow the original stylesheet.
 * See THIRD_PARTY_NOTICES.md.
 */
/* Zone01 student dashboard */

:root {
  --retro-bg: #080510;
  --retro-bg-2: #0f0820;
  --retro-panel: #1a0f2e;
  --retro-panel-2: #15082a;
  --retro-cyan: #00fff7;
  --retro-cyan-dim: rgba(0, 255, 247, 0.35);
  --retro-magenta: #ff2eea;
  --retro-lime: #b4ff39;
  --retro-yellow: #ffee00;
  --retro-warn: #ffaa00;
  --retro-bad: #ff3355;
  --retro-text: #d4e8e0;
  --retro-mute: #6a8a7c;
  --retro-border: #3d2a5c;
  --glow-cyan: 0 0 8px rgba(0, 255, 247, 0.45);
  --glow-mag: 0 0 10px rgba(255, 46, 234, 0.4);
  font-size: 18px;
}

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

html {
  min-height: 100%;
  background: var(--retro-bg);
  color: var(--retro-text);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "VT323", monospace;
  line-height: 1.4;
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(90, 30, 120, 0.25), transparent 55%),
    var(--retro-bg);
}

body.crt {
  position: relative;
}

/* Subtle scanlines + vignette (CRT) */
body.crt::after {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.11) 0px,
    rgba(0, 0, 0, 0.11) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.35;
  mix-blend-mode: multiply;
}

/* Starfield specks */
.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(0, 255, 247, 0.35), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(255, 46, 234, 0.3), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255, 255, 255, 0.25), transparent);
  background-size: 100% 100%;
  opacity: 0.5;
}

.page-wrap {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

/* --- Typography --- */
h1,
h2,
h3,
.arcade-title {
  font-family: "Press Start 2P", monospace;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-shadow: 0 0 12px var(--retro-cyan-dim);
}

h1 {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  color: var(--retro-cyan);
  margin: 0 0 0.5rem;
}

h2 {
  font-size: 0.7rem;
  color: var(--retro-lime);
  margin: 0 0 0.75rem;
}

h3 {
  font-size: 0.6rem;
  color: var(--retro-magenta);
  margin: 0 0 0.5rem;
}

.tagline,
.subtag {
  font-size: 1.25rem;
  color: var(--retro-mute);
  margin: 0.25rem 0 0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.subtag {
  font-size: 1.1rem;
  margin-top: 0.5rem;
}

/* --- Arcade frame / panel --- */
.arcade-cabinet {
  position: relative;
  margin-top: 1.5rem;
  padding: 1.5rem 1.25rem 1.75rem;
  background: linear-gradient(165deg, var(--retro-panel) 0%, var(--retro-panel-2) 100%);
  border: 3px solid var(--retro-magenta);
  box-shadow:
    0 0 0 2px var(--retro-cyan),
    inset 0 0 40px rgba(0, 0, 0, 0.5),
    var(--glow-mag);
  clip-path: polygon(
    0 8px,
    8px 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    8px 100%,
    0 calc(100% - 8px)
  );
}

.retro-header {
  text-align: center;
  margin-bottom: 0.5rem;
}

.panel {
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid var(--retro-border);
  margin-bottom: 1.25rem;
  padding: 1rem 1.1rem;
  box-shadow: inset 0 0 20px rgba(0, 255, 247, 0.06);
}

.panel-legend {
  display: block;
  font-size: 0.65rem;
  color: var(--retro-yellow);
  font-family: "Press Start 2P", monospace;
  margin-bottom: 0.75rem;
  letter-spacing: 0.08em;
}

/* --- Forms --- */
.arcade-form {
  max-width: 22rem;
  margin: 0.5rem auto 0;
}

.arcade-form label {
  display: block;
  font-size: 1.15rem;
  color: var(--retro-cyan);
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.arcade-form input {
  width: 100%;
  font-family: "VT323", monospace;
  font-size: 1.3rem;
  padding: 0.55rem 0.7rem;
  background: #05020a;
  color: var(--retro-lime);
  border: 2px solid var(--retro-cyan);
  box-shadow: inset 0 0 12px rgba(0, 255, 247, 0.12);
  margin-bottom: 1rem;
  outline: none;
}

.arcade-form input:focus {
  border-color: var(--retro-magenta);
  box-shadow:
    0 0 0 1px var(--retro-magenta),
    var(--glow-cyan);
}

/* --- Buttons --- */
.btn-coin,
.btn-logout {
  font-family: "Press Start 2P", monospace;
  font-size: 0.6rem;
  text-transform: uppercase;
  padding: 0.85rem 1.2rem;
  border: none;
  cursor: pointer;
  color: #0a0a0f;
  background: linear-gradient(180deg, var(--retro-lime) 0%, #7a9a20 100%);
  box-shadow:
    0 3px 0 #3d5010,
    0 0 16px rgba(180, 255, 57, 0.35);
  position: relative;
  top: 0;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.btn-coin:hover,
.btn-logout:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.btn-coin:active,
.btn-logout:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #3d5010;
}

.btn-coin {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
}

.btn-logout {
  background: linear-gradient(180deg, #ff6b8a 0%, #a03045 100%);
  box-shadow:
    0 3px 0 #502030,
    0 0 12px rgba(255, 80, 100, 0.35);
  color: #1a080c;
  padding: 0.6rem 0.9rem;
  font-size: 0.55rem;
}

.btn-logout:hover {
  filter: brightness(1.1);
}

/* --- Errors / status --- */
.error-arcade {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(60, 10, 20, 0.7);
  border: 2px solid var(--retro-bad);
  color: #ffb8c0;
  font-size: 1.15rem;
  text-align: center;
  animation: blink-soft 0.4s ease 2;
}

.error-global {
  margin: 1rem 0;
  text-align: center;
}

.hidden {
  display: none !important;
}

/* --- Profile layout --- */
.profile-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding: 0.5rem 0 1rem;
  border-bottom: 2px dashed var(--retro-border);
}

.player-identity {
  display: flex;
  align-items: center;
  gap: 1rem;
}

#userAvatar {
  width: 4.5rem;
  height: 4.5rem;
  min-width: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Press Start 2P", monospace;
  font-size: 1.1rem;
  color: var(--retro-bg);
  background: linear-gradient(135deg, var(--retro-magenta) 0%, #8020a0 100%);
  border: 3px solid var(--retro-cyan);
  box-shadow: var(--glow-cyan);
  text-shadow: none;
}

#userName {
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--retro-lime);
  text-shadow: 0 0 8px rgba(180, 255, 57, 0.35);
}

#userName .user-login,
.user-login {
  color: var(--retro-cyan);
  font-size: 1.1rem;
  text-shadow: var(--glow-cyan);
}

#userEmail {
  font-size: 1.15rem;
  color: var(--retro-mute);
  margin-top: 0.2rem;
}

/* Stats = high score rows */
.stats-arcade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.stat-brick {
  background: linear-gradient(180deg, #0f0a1a 0%, #0a060f 100%);
  border: 2px solid var(--retro-cyan);
  padding: 0.75rem 0.9rem 0.6rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.stat-brick::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--retro-cyan), transparent);
  opacity: 0.6;
}

.stat-label {
  display: block;
  font-size: 0.55rem;
  font-family: "Press Start 2P", monospace;
  color: var(--retro-magenta);
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}

.stat-brick b {
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--retro-yellow);
  text-shadow: 0 0 8px rgba(255, 238, 0, 0.35);
  font-family: "VT323", monospace;
  letter-spacing: 0.05em;
}

.audit-ratio-good {
  color: var(--retro-lime) !important;
  text-shadow: 0 0 10px rgba(180, 255, 57, 0.4);
}

.audit-ratio-warning {
  color: var(--retro-warn) !important;
}

.audit-ratio-bad {
  color: var(--retro-bad) !important;
}

/* Projects */
.projects-scroll {
  max-height: 22rem;
  overflow-y: auto;
  padding-right: 0.35rem;
}

.project-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--retro-border);
  font-size: 1.1rem;
}

.project-item:last-child {
  border-bottom: none;
}

.project-name {
  color: var(--retro-cyan);
  font-size: 1.2rem;
}

.text-muted {
  color: var(--retro-mute) !important;
  font-size: 1rem !important;
}

.project-captain {
  font-size: 0.95rem;
  color: var(--retro-mute);
}

.captain-self {
  color: var(--retro-lime);
}

.captain-other {
  color: var(--retro-magenta);
}

.project-status {
  font-family: "Press Start 2P", monospace;
  font-size: 0.45rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid;
}

.project-status.done {
  color: var(--retro-lime);
  border-color: var(--retro-lime);
  background: rgba(180, 255, 57, 0.08);
}

.project-status.in-progress {
  color: var(--retro-yellow);
  border-color: var(--retro-yellow);
  background: rgba(255, 238, 0, 0.08);
}

/* Graph containers */
.charts-section {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.chart-booth {
  padding: 1rem 0.75rem 1.25rem;
  background: #06030c;
  border: 2px solid var(--retro-border);
  overflow: auto;
  text-align: center;
}

.chart-booth h3 {
  margin: 0 0 0.75rem;
}

.chart-booth .xp-chart,
.chart-booth .project-chart,
.chart-booth .audit-chart {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.no-data {
  color: var(--retro-mute);
  font-size: 1.2rem;
}

#loadingState {
  text-align: center;
  padding: 3rem 1rem;
  font-size: 1.5rem;
  color: var(--retro-cyan);
  animation: blink-soft 1s step-end infinite;
}

@keyframes blink-soft {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

/* Shake (login) */
#loginForm.shake {
  animation: shake-arcade 0.45s ease;
}

@keyframes shake-arcade {
  0%,
  100% {
    transform: translateX(0);
  }
  20%,
  60% {
    transform: translateX(-6px);
  }
  40%,
  80% {
    transform: translateX(6px);
  }
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--retro-bg-2);
}
::-webkit-scrollbar-thumb {
  background: var(--retro-magenta);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--retro-cyan);
}

@media (max-width: 640px) {
  .project-item {
    grid-template-columns: 1fr;
    text-align: left;
  }
}


/* Session integration, form accessibility and small-screen adjustments. */
[hidden] { display: none !important; }
.arcade-subtag { color: var(--retro-magenta); margin: 0; }
.login-arcade-title { text-align: center; margin: 0 0 .5rem; font-size: .65rem; }
.session-subtag { text-align: center; color: var(--retro-cyan); margin-bottom: 1.25rem; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 48px; }
.password-toggle { position: absolute; top: 4px; right: 4px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: transparent; color: var(--retro-cyan); cursor: pointer; }
.password-toggle svg { stroke: currentColor; stroke-width: 1.6; }
button:disabled { cursor: wait; opacity: .65; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--retro-cyan); outline-offset: 4px; }
#welcome-title:focus { outline: none; }
.player-identity, .player-identity > div { min-width: 0; }
#userName, #userEmail, .stat-brick b { overflow-wrap: anywhere; }
.stat-label { font-size: 12px; }
.platform-description { color: var(--retro-text); }
.platform-link { display: inline-block; width: auto; text-decoration: none; }
.source-credit { position: relative; z-index: 1; text-align: center; padding: 0 20px 24px; font-size: 12px; color: var(--retro-text); }
.source-credit a { color: var(--retro-cyan); }
@media (max-width: 640px) {
  .page-wrap { padding: 1.5rem 1rem 2rem; }
  .stats-arcade { grid-template-columns: minmax(0, 1fr); }
  .player-identity { width: 100%; gap: .75rem; }
  #userAvatar { width: 3.5rem; height: 3.5rem; min-width: 3.5rem; }
  .arcade-cabinet { padding: 1.5rem .75rem; }
  .arcade-form input { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Student projects, using the existing cmarkos palette. */
.projects-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.projects-heading h2 { margin:0; }
.projects-note, .project-meta { color:var(--retro-text); font-size:.85rem; line-height:1.6; }
.project-filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6rem; margin:1.5rem 0; }
.project-filters button { border:1px solid var(--retro-cyan); color:var(--retro-cyan); background:var(--retro-bg-2); padding:1rem .5rem; font:inherit; cursor:pointer; }
.project-filters button[aria-pressed="true"] { border-color:var(--retro-magenta); box-shadow:inset 0 -3px var(--retro-magenta); color:#fff; }
.project-filters b { display:block; font-size:1.5rem; margin-top:.7rem; }
.project-search-label { display:block; font-size:.8rem; margin-bottom:.5rem; }
#project-search { box-sizing:border-box; width:100%; padding:.85rem; border:1px solid var(--retro-cyan); background:var(--retro-bg-2); color:var(--retro-text); font:inherit; }
#project-search:focus-visible { outline:2px solid var(--retro-magenta); outline-offset:3px; }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1rem 0; }
.project-card { min-width:0; padding:1.25rem; border:1px solid #494268; background:var(--retro-bg-2); overflow-wrap:anywhere; }
.project-card h3 { font-size:1.15rem; color:var(--retro-cyan); margin:0 0 .75rem; }
.project-badge { display:inline-block; padding:.35rem .6rem; border:1px solid var(--retro-magenta); font-size:.8rem; }
.project-card[data-state="passed"] .project-badge { border-color:var(--retro-cyan); }
.project-card a, .platform-shortcut { color:var(--retro-cyan); font-size:.85rem; }
.project-meta { margin:.7rem 0; }
#project-status { line-height:1.6; }
@media(max-width:720px) { .project-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .project-grid { grid-template-columns:minmax(0,1fr); } .projects-panel { padding:1rem; } }

/* Navigation and student overview. */
.app-nav { display:flex; gap:.5rem; margin:1.5rem 0 2rem; flex-wrap:wrap; }
.app-nav a { padding:.8rem 1rem; border:1px solid #494268; text-decoration:none; color:var(--retro-cyan); }
.app-nav a[aria-current="page"] { border-color:var(--retro-magenta); box-shadow:inset 0 -3px var(--retro-magenta); color:#fff; }
.summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; margin:1.5rem 0; }
.summary-grid a { text-decoration:none; min-width:0; }
.summary-grid .stat-label { line-height:1.5; }
.summary-grid b { font-size:2rem; }
#dashboard-page .panel { margin:1.5rem 0; }
#dashboard-page h3 { line-height:1.6; font-size:1rem; color:var(--retro-cyan); }
#dashboard-page a { color:var(--retro-cyan); }
#dashboard-page h4 { font-size:.95rem; line-height:1.5; margin:1.5rem 0 .5rem; }
.projects-panel .project-filters { grid-template-columns:repeat(3,minmax(0,1fr)); }
.projects-panel .audit-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
.audit-tabs b { font-size:1.1rem; }
.audit-toolbar { display:grid; grid-template-columns:2fr 1fr 1fr; gap:.75rem; }
.audit-toolbar > div { min-width:0; }
.audit-toolbar label { display:block; font-size:.8rem; line-height:1.5; margin-bottom:.5rem; }
.audit-toolbar input, .audit-toolbar select { box-sizing:border-box; width:100%; min-height:46px; padding:.65rem; border:1px solid var(--retro-cyan); background:var(--retro-bg-2); color:var(--retro-text); font:inherit; font-size:.85rem; }
.audit-toolbar input:focus-visible, .audit-toolbar select:focus-visible { outline:2px solid var(--retro-magenta); outline-offset:3px; }
.incoming-assignment { border-top:1px dashed #494268; margin:.8rem 0; padding-top:.2rem; }
.deadline-overdue { color:#ff8da5; }
.deadline-soon { color:var(--retro-yellow,#ffff00); }
[data-page] h2:focus { outline:none; }
@media(max-width:720px) { .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .audit-toolbar { grid-template-columns:minmax(0,1fr); } .projects-panel .project-filters { grid-template-columns:minmax(0,1fr); } .projects-panel .audit-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Browser preferences and first-use guide. */
:root { color-scheme: dark; }
:root[data-theme="light"] {
  color-scheme: light;
  --retro-bg:#f5f6fa; --retro-bg-2:#fff; --retro-panel:#fff; --retro-panel-2:#eef1f8;
  --retro-cyan:#006b72; --retro-cyan-dim:transparent; --retro-magenta:#92238a;
  --retro-lime:#32630d; --retro-yellow:#765800; --retro-warn:#8d4a00; --retro-bad:#ad1938;
  --retro-text:#202d3d; --retro-mute:#516174; --retro-border:#c4ccda;
  --glow-cyan:none; --glow-mag:none;
}
[data-theme="light"] body { background:var(--retro-bg); }
[data-theme="light"] .panel, [data-theme="light"] .stat-brick { background:#fff; box-shadow:none; }
[data-theme="light"] .arcade-form input { background:#fff; }
[data-theme="light"] .arcade-cabinet { box-shadow:none; }
[data-theme="light"] .app-nav a[aria-current="page"], [data-theme="light"] .project-filters button[aria-pressed="true"] { color:var(--retro-text); }
[data-theme="light"] .project-card, [data-theme="light"] .app-nav a { border-color:var(--retro-border); }
[data-theme="light"] .error-arcade { color:#ad1938; background:#fff0f2; }
[data-theme="light"] .deadline-overdue { color:#ad1938; }
[data-theme="light"] .btn-logout, [data-theme="light"] .btn-coin { color:#fff; background:var(--retro-cyan); box-shadow:none; }
[data-theme="light"] #userAvatar { color:#fff; background:var(--retro-magenta); }
[data-theme="light"] #userName, [data-theme="light"] .stat-brick b { text-shadow:none; }
[data-theme="light"] .stars, [data-theme="light"] body.crt::after { display:none; }
[data-effects="off"] *, [data-effects="off"] *::before, [data-effects="off"] *::after { animation:none !important; transition:none !important; text-shadow:none !important; box-shadow:none !important; }
[data-effects="off"] .stars { display:none; }
[data-density="compact"] .project-card { padding:.75rem; }
[data-density="compact"] .project-meta { margin:.35rem 0; }
[data-density="compact"] .project-grid { gap:.6rem; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; margin:1.5rem 0; }
.setting-field { min-width:0; }
.setting-field label { display:block; margin-bottom:.5rem; }
.setting-field select { width:100%; min-height:46px; padding:.7rem; border:1px solid var(--retro-cyan); background:var(--retro-bg-2); color:var(--retro-text); font:inherit; font-size:.9rem; }
.setting-check { display:flex; gap:.75rem; align-items:center; line-height:1.6; cursor:pointer; }
.setting-check input { width:20px; height:20px; accent-color:var(--retro-cyan); flex-shrink:0; }
.guide-actions { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin:1rem 0; }
.secondary-button { display:inline-block; min-height:44px; padding:.65rem .9rem; font:inherit; font-size:.85rem; background:var(--retro-bg-2); border:1px solid var(--retro-cyan); color:var(--retro-cyan); cursor:pointer; }
.guide-page { line-height:1.75; }
.guide-page h3 { font-family:inherit; font-size:1rem; letter-spacing:0; color:var(--retro-cyan); }
.guide-page a, #settings-page a { color:var(--retro-cyan); }
.guide-steps { padding-left:1.5rem; }
.guide-steps > li { padding:.5rem 0 1rem .25rem; }
.guide-page details { border-top:1px solid var(--retro-border); padding:1rem 0; }
.guide-page summary { cursor:pointer; color:var(--retro-cyan); }
#guide-dialog { width:min(620px,calc(100% - 2rem)); max-height:calc(100dvh - 2rem); overflow:auto; padding:1.5rem; color:var(--retro-text); background:var(--retro-bg-2); border:2px solid var(--retro-cyan); font:inherit; line-height:1.7; }
#guide-dialog::backdrop { background:rgba(0,0,0,.75); }
#guide-dialog h2 { color:var(--retro-cyan); font:inherit; font-size:1.25rem; font-weight:bold; letter-spacing:0; }
#tour-title:focus { outline:none; }
.tour-header { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:1rem; }
#tour-points { padding-left:1.25rem; }
#tour-points li { padding:.3rem 0; }
.tour-primary { border-color:var(--retro-magenta); color:var(--retro-magenta); }
@media(max-width:640px) { .settings-grid { grid-template-columns:minmax(0,1fr); } #guide-dialog { padding:1rem; } .app-nav a { padding:.7rem .75rem; } }

/* Auditor change request form and persistent personal history. */
#requests-page a { color:var(--retro-cyan); }
.request-notes { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; }
.request-confirmation { border:1px solid var(--retro-cyan); padding:.9rem; line-height:1.6; }
.request-action { margin:.5rem 0; }
#change-request-dialog { width:min(620px,calc(100% - 2rem)); max-height:calc(100dvh - 2rem); overflow:auto; padding:1.5rem; background:var(--retro-bg-2); color:var(--retro-text); border:2px solid var(--retro-cyan); font:inherit; line-height:1.6; }
#change-request-dialog::backdrop { background:rgba(0,0,0,.75); }
#change-request-dialog h2 { font:inherit; font-size:1.2rem; color:var(--retro-cyan); }
#change-request-title:focus { outline:none; }
#change-request-form label { display:block; margin:.8rem 0 .4rem; }
#change-request-form select, #change-request-form textarea { box-sizing:border-box; width:100%; min-height:46px; padding:.7rem; font:inherit; background:var(--retro-bg); color:var(--retro-text); border:1px solid var(--retro-cyan); }
#change-request-form textarea { resize:vertical; }
#change-request-form :focus-visible { outline:2px solid var(--retro-magenta); outline-offset:3px; }
#change-request-form [aria-busy="true"] { cursor:wait; }
@media(max-width:640px) { #change-request-dialog { padding:1rem; } }

.environment-banner { position:relative; z-index:1; max-width:920px; margin:1rem auto; padding:1rem; border:2px solid var(--retro-warn); background:var(--retro-bg-2); color:var(--retro-text); line-height:1.6; }
.environment-banner p { margin:.5rem 0 0; }
.environment-banner a { color:var(--retro-cyan); }
#demo-login-panel { max-width:30rem; margin:0 auto; line-height:1.7; }
#demo-login { display:block; width:100%; }
@media(max-width:640px) { .environment-banner { margin:1rem; } }

/* Personal audit availability */
.availability-form { margin: 1.5rem 0; padding: 1rem; border: 1px solid var(--retro-cyan); border-radius: 8px; }
.availability-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin: 1rem 0; }
.availability-fields label { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.availability-fields input, .availability-fields select { width: 100%; min-width: 0; padding: .65rem; font: inherit; box-sizing: border-box; background: var(--retro-bg); color: var(--retro-text); border: 1px solid var(--retro-cyan); }
.availability-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1rem; }
@media (max-width: 1000px) { .availability-fields { grid-template-columns: minmax(0,1fr); } }

/* Request decisions and policy evidence */
.review-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
#review-note { width:100%; box-sizing:border-box; padding:.75rem; font:inherit; background:var(--retro-bg); color:var(--retro-text); border:1px solid var(--retro-cyan); }
.review-rules { width:100%; margin:1rem 0; border-collapse:collapse; table-layout:fixed; }
.review-rules th,.review-rules td { padding:.65rem; text-align:left; border-bottom:1px solid var(--retro-cyan); overflow-wrap:anywhere; font-weight:normal; }
.review-rules thead th { font-weight:bold; }
.decision-history { border-top:1px solid var(--retro-cyan); margin-top:1rem; padding-top:.5rem; }
#demo-admin-login { margin-top:.75rem; }
@media(max-width:720px) { .review-filters { grid-template-columns:minmax(0,1fr); } }


/* Make the verified account access visible on every page. */
.access-label { display:inline-block; margin:.65rem 0 0; padding:.35rem .6rem; color:var(--retro-text); border:1px solid var(--retro-cyan); font-size:.85rem; line-height:1.5; }
.access-label[data-access="admin"] { font-weight:bold; }
.admin-home { border-color:var(--retro-cyan); }
#admin-home-link { display:inline-block; text-decoration:none; line-height:1.6; max-width:100%; box-sizing:border-box; overflow-wrap:anywhere; }

#toggle-student-features { margin:.5rem .75rem .5rem 0; line-height:1.5; max-width:100%; white-space:normal; }

.review-candidates { margin:1.5rem 0; padding:1rem 0; border-block:1px solid var(--retro-cyan); }
#review-candidate { width:100%; box-sizing:border-box; margin-top:.5rem; padding:.65rem; font:inherit; color:var(--retro-text); background:var(--retro-bg); border:1px solid var(--retro-cyan); }

.candidate-suggestion { margin:1rem 0; padding:1rem; border:1px solid var(--retro-cyan); overflow-wrap:anywhere; }
.candidate-suggestion h5 { margin:0 0 .6rem; font:inherit; font-weight:bold; }
.candidate-suggestion details { margin-top:.75rem; }
.candidate-suggestion .review-rules { margin-bottom:0; }

.review-actions,.candidate-heading { display:flex;align-items:center;gap:.6rem;flex-wrap:wrap; }
.candidate-heading { justify-content:space-between; }
.candidate-heading h5 { margin:0; }
.candidate-assign { font-weight:bold; }
.review-secondary { margin:.8rem 0; }
.review-secondary summary { cursor:pointer; }
.candidate-suggestion { padding:.8rem; margin:.6rem 0; }
.candidate-suggestion .project-meta,.candidate-suggestion .projects-note { margin:.5rem 0; }

#review-candidate-options { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:.75rem; }
#review-candidate-options .candidate-suggestion { margin:0; }
.review-actions button { min-height:40px; }
#review-detail > .projects-heading { margin-bottom:.8rem; }

#review-title { font-family:inherit;font-size:1.1rem;letter-spacing:.03em; }
#review-detail-title,#review-detail-content > h3,#review-list h3 { font-family:inherit;font-size:1.05rem;letter-spacing:0;line-height:1.4; }

.review-preparation { font-weight: 700; overflow-wrap: anywhere; }

/* Auditor review notes stay inside narrow admin cards. */
#auditor-reviews-list label { display:flex; flex-direction:column; gap:.5rem; margin:.75rem 0; }
[data-auditor-note] { width:100%; max-width:100%; box-sizing:border-box; padding:.65rem; font:inherit; background:var(--retro-bg); color:var(--retro-text); border:1px solid var(--retro-cyan); }
#auditor-reviews-page .secondary-button { max-width:100%; white-space:normal; overflow-wrap:anywhere; }

.notification-toolbar { display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0; }
.notification-list { display:grid;gap:12px; }
.notification-card { min-width:0;overflow-wrap:anywhere; }
.notification-unread { border-inline-start:4px solid var(--accent, #49cde2); }
.notification-card button,.notification-toolbar button { max-width:100%;white-space:normal; }
#notification-badge { font-size:.8em;padding:2px 6px;border:1px solid currentColor;border-radius:12px; }

#pilot-metrics meter,.pilot-blocker meter { width:100%;max-width:100%; }
#pilot-preview { margin-block:20px;padding-block:12px;border-block:1px solid currentColor; }
#pilot-preview .project-card,#pilot-waiting .project-card { min-width:0;overflow-wrap:anywhere; }
#pilot-preview button,#pilot-waiting button { max-width:100%;white-space:normal; }

#campus-page button { max-width:100%;white-space:normal; }
#campus-page p,#campus-history { overflow-wrap:anywhere; }
#campus-history { padding-inline-start:20px; }

/* A softer finish within the existing visual language. */
:root { --surface-radius:16px; --control-radius:10px; }
.panel,.project-card,.stat-brick,.profile-hero,.arcade-cabinet,dialog { border-radius:var(--surface-radius); }
button,input,select,textarea,.secondary-button,.app-nav a,.project-filters button { border-radius:var(--control-radius); }
.project-badge,.access-label { border-radius:999px; }
button,.secondary-button,.app-nav a,input,select,textarea { transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease; }
.app-nav a[aria-current="page"] { box-shadow:inset 0 -2px var(--retro-magenta); }
dialog::backdrop { backdrop-filter:blur(3px); }
.interface-switch { display:inline-flex; align-items:center; gap:10px; }
.switch-track { display:inline-flex; align-items:center; width:38px; height:22px; padding:3px; box-sizing:border-box; border-radius:999px; background:var(--retro-mute); transition:background-color .18s ease; }
.switch-thumb { width:16px; height:16px; border-radius:50%; background:var(--retro-bg); box-shadow:0 1px 3px #0003; transition:transform .18s ease; }
.interface-switch[aria-checked="true"] .switch-track { background:var(--retro-cyan); }
.interface-switch[aria-checked="true"] .switch-thumb { transform:translateX(16px); }

/* Compact mobile navigation and progressively disclosed home sections. */
.mobile-menu-toggle,.nav-mobile { display:none; }
.overview-section > summary { cursor:pointer; font-size:1rem; line-height:1.6; color:var(--retro-cyan); padding:.4rem 0; }
.overview-section > summary:focus-visible { outline:2px solid var(--retro-cyan); outline-offset:4px; }
.overview-section[open] > summary { margin-bottom:1rem; }
@media (max-width:640px) {
  :root { font-size:16px; }
  .page-wrap { padding:1rem .85rem 1.5rem; }
  #welcome-title { margin:0 0 .65rem; font-size:.9rem; }
  .profile-hero { gap:.65rem; padding:0 0 .75rem; margin:0; border-bottom:1px solid var(--retro-border); border-radius:0; }
  .player-identity { width:auto; flex:1; gap:.5rem; }
  #userAvatar,#userEmail { display:none; }
  #userName { font-size:1.05rem; line-height:1.4; }
  .access-label { margin:.25rem 0 0; font-size:.72rem; padding:.3rem .5rem; }
  .profile-actions { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
  .profile-actions button { min-height:44px; padding:.5rem .6rem; font-size:.75rem; }
  #logout { font-family:inherit; letter-spacing:0; box-shadow:none; }
  .app-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.35rem; margin:.8rem 0 1.25rem; }
  .app-nav a,.mobile-menu-toggle { display:flex; align-items:center; justify-content:center; min-height:44px; box-sizing:border-box; padding:.5rem .2rem; font-size:.8rem; line-height:1.3; text-align:center; min-width:0; }
  .app-nav a[data-primary-nav] { order:0; }
  .mobile-menu-toggle { order:0; gap:.3rem; border-color:var(--retro-border); }
  .app-nav a:not([data-primary-nav]) { display:none; order:0; grid-column:span 2; padding:.65rem .4rem; }
  .app-nav.menu-expanded a:not([data-primary-nav]) { display:flex; }
  .mobile-menu-toggle[aria-expanded="true"],.mobile-menu-toggle.has-active-page { border-color:var(--retro-magenta); }
  #mobile-unread { font-size:.7rem; min-width:1.1rem; padding:.15rem; border-radius:999px; background:var(--retro-cyan); color:var(--retro-bg); }
  .nav-desktop { display:none; }
  .nav-mobile { display:inline; }
  .projects-heading { gap:.5rem; margin-bottom:.75rem; }
  .projects-heading h2,#campus-title { font-family:inherit; font-size:1.1rem; line-height:1.4; letter-spacing:0; }
  .projects-heading button { min-height:44px; font-family:inherit; font-size:.75rem; padding:.5rem .65rem; letter-spacing:0; }
  .panel { padding:1rem; }
  #dashboard-page .panel { margin:1rem 0; }
  #dashboard-page h3,.overview-section > summary { font-family:inherit; font-size:.9rem; letter-spacing:0; }
  .summary-grid { gap:.5rem; margin:1rem 0; }
  .summary-grid .stat-brick { padding:.75rem .6rem; }
  .summary-grid .stat-label { font-family:inherit; font-size:.7rem; letter-spacing:0; }
  .summary-grid b { font-size:1.5rem; }
  #home-project-state:not(.error-arcade),#home-audit-state:not(.error-arcade) { display:none; }
  #home-attention .project-grid > :nth-child(n+3),#home-waiting > :nth-child(n+3),#home-active > :nth-child(n+3) { display:none; }
  #student-home .project-card { padding:.75rem; }
  #student-home .project-card .project-meta:not(.deadline-overdue):not(.deadline-soon) { display:none; }
  #student-home .panel > p.projects-note { display:none; }
  #student-home h4 { margin:1rem 0 .5rem; }
  #student-home .project-card h3 { margin:.25rem 0 .6rem; }
  .project-card,.panel,.profile-actions { overflow-wrap:anywhere; min-width:0; }
  input,select,textarea,.audit-toolbar input,.audit-toolbar select,.setting-field select { font-size:16px; }
  #admin-home .secondary-button { display:flex; align-items:center; margin-top:.6rem; }
}
@media (max-width:640px) {
  .profile-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; }
  .player-identity { grid-column:1; grid-row:1; }
  .profile-actions { display:contents; }
  #logout { grid-column:2; grid-row:1; min-height:44px; }
  #toggle-student-features { grid-column:1 / -1; grid-row:2; justify-self:start; min-height:44px; }
}