:root { --night:#10244b; --ink:#17233d; --gold:#f4c766; --mist:#7867b8; --paper:#fffaf0; --line:#ded5c3; --green:#167047; --red:#a33a3a; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; color:var(--ink); font:16px/1.5 Montserrat,Arial,sans-serif; background:linear-gradient(135deg,#eaf0fb,#f7f1ff); }.header,main { width:min(1120px,calc(100% - 2rem)); margin:auto; }.header { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:136px; color:#fff; }.header::before { content:""; position:absolute; inset:0 0 auto; z-index:-1; height:190px; background:linear-gradient(130deg,#10244b,#443568); }.header h1 { margin:0; font:clamp(2rem,5vw,3.4rem)/1.05 Georgia,serif; }.eyebrow { margin:0 0 .4rem; color:#c98b26; font-size:.78rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }.header .eyebrow { color:#f4c766; }.mode { padding:.45rem .75rem; border:1px solid #ffffff66; border-radius:999px; background:#ffffff16; font-size:.85rem; }.intro,.workspace,.summary article { border:1px solid #ffffffa3; border-radius:18px; box-shadow:0 13px 36px #27385b18; }.intro { margin-top:1rem; padding:1.2rem 1.4rem; background:#fffaf0e8; }.intro p { margin:.2rem 0; }.demo-notice { color:#5e4a82; font-size:.9rem; }.summary { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1rem 0; }.summary article { padding:1rem 1.2rem; background:#fff; }.summary span { display:block; color:#58617a; font-size:.87rem; }.summary strong { font-size:2rem; }.workspace { padding:1.2rem; background:#fffaf0e8; }.toolbar { display:flex; flex-wrap:wrap; gap:1rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }.toolbar label { display:grid; gap:.3rem; color:#4e5872; font-size:.85rem; font-weight:800; }.toolbar select,textarea { border:1px solid #bbc4d4; border-radius:.55rem; background:#fff; font:inherit; }.toolbar select { min-width:170px; min-height:40px; padding:.45rem .6rem; }.submission-list { display:grid; gap:.8rem; margin-top:1rem; }.submission { display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center; padding:1rem; border:1px solid var(--line); border-radius:14px; background:#fff; }.submission__number { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; color:#fff; background:var(--night); font-weight:900; }.submission h2,.submission p { margin:0; }.submission h2 { font:1.1rem Georgia,serif; }.submission p { color:#626b7f; font-size:.9rem; }.status { padding:.35rem .55rem; border-radius:999px; font-size:.8rem; font-weight:900; }.status--pending { color:#5a3d06; background:#fff0bf; }.status--revision { color:#7a2525; background:#ffe1e1; }.status--approved { color:#105935; background:#dff5e7; }.open-button,.approve,.revision { min-height:42px; padding:.55rem .8rem; border:0; border-radius:.55rem; font:inherit; font-weight:900; cursor:pointer; }.open-button { color:#fff; background:var(--night); }.approve { color:#08241a; background:linear-gradient(135deg,#bdebcf,#62c98c); }.revision { color:#5f1e1e; background:#ffd7d7; }.empty { padding:2rem; color:#68728a; text-align:center; } dialog { width:min(760px,calc(100% - 2rem)); max-height:90vh; border:0; border-radius:18px; box-shadow:0 28px 75px #0008; } dialog::backdrop { background:#08162fb8; } dialog form { position:relative; }.close { position:absolute; top:0; right:0; width:36px; height:36px; border:0; border-radius:50%; background:#edf0f6; font-size:1.4rem; cursor:pointer; } dialog h2 { margin:.1rem 2.5rem 1rem 0; font:1.7rem Georgia,serif; }.response-list { display:grid; gap:.8rem; }.response { padding:1rem; border-left:4px solid var(--mist); border-radius:0 .6rem .6rem 0; background:#f4f1fb; }.response h3,.response p { margin:.1rem 0; }.response h3 { font-size:1rem; }.note-label { display:grid; gap:.3rem; margin:1rem 0 .4rem; font-weight:800; }.note-label span { color:#67718a; font-size:.8rem; font-weight:400; } textarea { width:100%; min-height:96px; padding:.65rem; resize:vertical; }.actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem; }.feedback { min-height:1.5rem; color:var(--green); font-weight:800; } @media (max-width:650px) { .header { align-items:flex-start; flex-direction:column; padding-top:1.5rem; }.summary { grid-template-columns:1fr; }.submission { grid-template-columns:auto 1fr; }.submission button { grid-column:1/-1; }.header,main { width:min(100% - 1rem,1120px); } }
.teacher-login { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:1rem; background:linear-gradient(135deg,#10244bf2,#443568f2); }.teacher-login__card { width:min(460px,100%); padding:clamp(1.5rem,5vw,2.5rem); border:1px solid #ffffff66; border-radius:22px; color:#17243d; background:#fffaf0; box-shadow:0 28px 75px #0008; }.teacher-login__card h1 { margin:.15rem 0 .8rem; font:clamp(1.8rem,6vw,2.8rem)/1.05 Georgia,serif; }.teacher-login__card label { display:block; margin:1.2rem 0 .35rem; font-weight:800; }.teacher-login__card input { width:100%; min-height:46px; padding:.65rem .75rem; border:1px solid #aab5ca; border-radius:.55rem; font:inherit; }.teacher-login__card button { width:100%; min-height:46px; margin-top:1rem; border:0; border-radius:.55rem; color:#fff; background:#19375f; font:inherit; font-weight:900; cursor:pointer; }.teacher-login__feedback { min-height:1.5rem; margin:.75rem 0 0; color:#9b2638; font-weight:700; }
input[type="number"] { width:7rem; min-height:42px; padding:.45rem .6rem; border:1px solid #bbc4d4; border-radius:.55rem; background:#fff; font:inherit; }

#teacher-login[hidden] {
  display: none !important;
}
.mission-access-panel {
  margin: 1.5rem auto;
  max-width: 1100px;
  padding: 1.25rem;
  border: 1px solid #d5ad56;
  border-radius: 1rem;
  background: #fffaf0;
  color: #1c3154;
}

.mission-access-panel h2 {
  margin: 0 0 .5rem;
}

.mission-access-panel p {
  margin: .5rem 0 1rem;
}

.mission-access-panel__controls {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: end;
}

.mission-access-panel label {
  display: grid;
  gap: .35rem;
  font-weight: 700;
}

.mission-access-panel select,
.mission-access-panel button {
  min-height: 2.75rem;
  padding: .55rem .8rem;
  border-radius: .6rem;
  font: inherit;
}

.mission-access-panel select {
  border: 1px solid #9bb0cf;
  background: #fff;
}

.mission-access-panel button {
  border: 0;
  background: #1f4676;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.mission-access-panel button:disabled {
  opacity: .6;
  cursor: wait;
}

#mission-access-feedback {
  min-height: 1.4rem;
  font-weight: 700;
}