* { box-sizing: border-box; }

body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: #f3f5f9;
  color: #222;
  margin: 0;
}

header {
  background: #1f3a93;
  color: #fff;
  padding: 14px 24px;
}
header h2 { margin: 0; }

main {
  max-width: 1050px;
  margin: 24px auto;
  padding: 0 16px;
}

/* ---------- Common ---------- */
.card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

label { display: block; font-weight: 600; margin-bottom: 6px; }

input[type="text"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccd2dd;
  border-radius: 6px;
  font-size: 15px;
  margin-bottom: 14px;
  font-family: inherit;
}

.check { font-weight: normal; margin-bottom: 16px; }

.btn {
  background: #1f3a93;
  color: #fff;
  border: none;
  padding: 11px 22px;
  border-radius: 6px;
  font-size: 15px;
  cursor: pointer;
}
.btn:hover { background: #162b70; }
.btn:disabled { background: #9aa5c7; cursor: not-allowed; }

/* ---------- Room ---------- */
.room {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.room .left  { flex: 1; min-width: 300px; }
.room .right { flex: 1.3; min-width: 320px; }

#cam {
  width: 100%;
  border-radius: 8px;
  background: #000;
  transform: scaleX(-1);   /* mirror view */
}

.warn {
  display: none;
  background: #d62828;
  color: #fff;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  font-weight: 600;
}

.warn-count { margin: 10px 0 0; }

.question {
  font-size: 19px;
  line-height: 1.5;
  background: #eef2ff;
  padding: 14px;
  border-radius: 8px;
}

/* ---------- Report ---------- */
.report { white-space: pre-wrap; font-family: inherit; line-height: 1.5; }
.qa { border-bottom: 1px solid #e3e6ee; padding: 10px 0; }
.qa:last-child { border-bottom: none; }
.score { color: #1f3a93; font-style: italic; }