:root {
  --student-green: #174c3e;
  --student-mint: #e9f4ed;
  --student-lime: #dfeaaf;
  --student-paper: #fbfcf8;
  --student-ink: #18312c;
  --student-muted: #62736d;
  --student-line: #dce6de;
}

.student-ui {
  background: var(--student-paper);
  color: var(--student-ink);
}

.student-ui .btn {
  border-color: #cfdbd2;
  border-radius: 14px;
}

.student-ui .btn-primary {
  border-color: var(--student-green);
  background: var(--student-green);
  box-shadow: 0 5px 14px rgb(23 76 62 / 16%);
}

.student-ui .btn-primary:hover { background: #236452; }
.student-ui .card { border-color: var(--student-line); box-shadow: 0 8px 30px rgb(28 55 45 / 6%); }

/* ฟอร์มก่อนเริ่มแบบวัด */
.landing-page .entry-code-label {
  display: block;
  margin-top: 20px;
  color: #526860;
  font-size: 13px;
}
.landing-page .entry-panel #code { margin-top: 6px; }
.landing-page .entry-required { margin: -6px 0 14px; color: #718077; font-size: 12px; }
.landing-page .entry-required span,
.landing-page .required-mark { color: #b14d3d; font-style: normal; }
.landing-page .pill { min-height: 50px; }
.landing-page .pill.on { border-color: var(--student-green); background: var(--student-green); }
.landing-page #step2 input { min-height: 49px; }
.landing-page #consent { margin-top: 3px; }

/* หน้าทำแบบวัด */
.assessment-page { min-height: 100dvh; background: #f3f7f2; }
.assessment-page > header { border-bottom: 1px solid var(--student-line); box-shadow: 0 3px 18px rgb(29 55 46 / 6%); }
.assessment-page .offline-banner {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 9px 16px;
  border-bottom: 1px solid #e7c980;
  background: #fff7dc;
  color: #795614;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}
.assessment-page .status-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 17px;
  color: var(--student-muted);
  font-size: 11px;
  white-space: nowrap;
}
.assessment-page .status-row .save { font-size: inherit; }
.assessment-page .overview-button {
  display: flex;
  height: 42px;
  min-width: 52px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #cad7cd;
  border-radius: 11px;
  background: #fff;
  color: var(--student-green);
  line-height: 1;
}
.assessment-page .overview-button span { margin-top: 2px; font-size: 9px; font-weight: 700; }
.assessment-page button[data-fs] { color: var(--student-green); }
.assessment-page button[data-fs]:disabled { cursor: not-allowed; background: #f2f5f1; color: #a1aea5; }
.assessment-page header > div:last-child { background: #e5ebe5; }
.assessment-page #bar { background: linear-gradient(90deg, #71a783, #aecb68); }
.assessment-page main { padding-top: 20px; }
.assessment-page #loading { padding: 34px 20px; }
.assessment-page .loading-mark {
  display: flex;
  width: 50px;
  height: 50px;
  margin: 0 auto 10px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--student-mint);
  color: var(--student-green);
  font-size: 25px;
}
.assessment-page .loading-card b { display: block; color: var(--student-ink); font-family: Prompt, Sarabun, sans-serif; }
.assessment-page .loading-card p { margin-top: 3px; color: var(--student-muted); font-size: 14px; }
.assessment-page .loading-home { display: block; margin-top: 12px; color: var(--student-muted); font-size: 13px; }
.assessment-page .loading-home[hidden] { display: none; }
.assessment-page #q { border: 1px solid var(--student-line); box-shadow: 0 10px 32px rgb(26 56 46 / 7%); }
.assessment-page .situation-box { border-left: 4px solid #94b66d; background: #f0f5eb; }
.assessment-page .situation-box > span { background: var(--student-green); letter-spacing: .03em; }
.assessment-page #sit { color: #28463e; }
.assessment-page #ques { margin-top: 18px; color: #142d27; }
.assessment-page .answer-hint {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f7f9f4;
  color: #51665e;
  font-size: .78em;
}
.assessment-page .answer-hint > span:first-child { font-weight: 600; }
.assessment-page .answer-hint b { margin-right: 4px; color: #5f8c60; }
.assessment-page .selcount.has { color: var(--student-green); }
.assessment-page .opt {
  min-height: 62px;
  border-color: #d7e1da;
  border-radius: 15px;
  padding: 14px 15px;
  background: #fff;
  box-shadow: 0 2px 0 rgb(24 49 44 / 2%);
}
.assessment-page .opt:hover { border-color: #91ad9c; background: #fcfdfb; }
.assessment-page .opt .box { border-color: #aebdb3; }
.assessment-page .opt.on { border-color: #347660; background: #edf6ef; box-shadow: inset 0 0 0 1px #347660; }
.assessment-page .opt.on .box { border-color: var(--student-green); background: var(--student-green); }
.assessment-page .opt .ot { color: #243d36; }
.assessment-page #bnav { border-top: 1px solid var(--student-line); box-shadow: 0 -7px 25px rgb(24 49 44 / 8%); }
.assessment-page #bnav .btn { font-size: 15px; }
.assessment-page .star-btn { border-color: #d5dfd7; border-radius: 14px; }
.assessment-page .star-btn.on { border-color: #e3c261; background: #fff8d9; color: #835d08; }
.assessment-page .toast { border-radius: 14px; background: #263f38; line-height: 1.55; }
.assessment-page .toast.good { background: #256b55; }
.assessment-page .toast.warn { background: #815d16; }

/* หน้าภาพรวมและตรวจทาน */
.assessment-page #review { background: #f3f7f2; }
.assessment-page .review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.assessment-page .review-kicker {
  display: block;
  margin-bottom: 3px;
  color: #61805e;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.assessment-page .review-head p { margin-top: 3px; color: var(--student-muted); font-size: 13px; }
.assessment-page #rvStats > div { border: 1px solid var(--student-line); box-shadow: none; }
.assessment-page .qgrid button { border-color: #cbd8ce; border-radius: 12px; }
.assessment-page .qgrid button.done { border-color: #387961; background: #387961; }
.assessment-page .qgrid button.cur { outline-color: #8da76a; }
.assessment-page #rvMiss > div { border: 1px solid var(--student-line); border-left-width: 4px; }
.assessment-page .submit-zone {
  position: sticky;
  bottom: 0;
  margin: 5px -16px -10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--student-line);
  background: rgb(243 247 242 / 94%);
  backdrop-filter: blur(10px);
}
.assessment-page .submit-zone p { margin-bottom: 8px; color: var(--student-muted); text-align: center; font-size: 12px; }
.assessment-page .submit-zone p.warn { color: #a44d16; font-weight: 700; }
.assessment-page #modal > .card { border: 0; padding: 26px 22px; }
.assessment-page .confirm-icon.warn { background: #fff0d5; color: #9b5b0d; }

/* หน้าผลลัพธ์ */
.result-page { min-height: 100dvh; background: linear-gradient(180deg, #edf4e9 0, #f8faf5 310px, #f8faf5 100%); }
.result-page .result-shell { max-width: 680px; padding-top: 42px; padding-bottom: 56px; }
.result-page .result-success { position: relative; overflow: hidden; padding: 30px 26px; }
.result-page .result-success::before {
  position: absolute;
  top: -75px;
  right: -65px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: #e4eeb9;
  content: "";
  opacity: .7;
}
.result-page .result-kicker {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #edf4e9;
  color: #557353;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}
.result-page .done-badge { position: relative; z-index: 1; }
.result-page .result-thanks { margin: 12px auto 0; max-width: 510px; color: #435a53; }
.result-page .result-report { padding: 25px; }
.result-page .result-context {
  margin-top: 7px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f4f7f2;
  color: var(--student-muted);
  font-size: 14px;
}
.result-page .ring-score { background-color: #f0f4ee; }
.result-page .result-report > div > div.rounded-xl { background: #f5f8f3; }
.result-page .result-home { margin-top: 18px; width: 100%; }

@media (max-width: 560px) {
  .assessment-page > header > div:first-child { padding-right: 10px; padding-left: 10px; }
  .assessment-page .overview-button { min-width: 46px; }
  .assessment-page main { padding-right: 10px; padding-left: 10px; }
  .assessment-page #q { padding: 13px 12px 17px; border-radius: 18px; }
  .assessment-page .situation-box { padding: 13px; }
  .assessment-page .answer-hint { align-items: flex-start; }
  .assessment-page .answer-hint > span:first-child { max-width: 65%; }
  .assessment-page .opt { gap: 11px; padding: 13px 12px; }
  .assessment-page #bnav > div { padding-right: 10px; padding-left: 10px; }
  .assessment-page .review-head { display: block; }
  .assessment-page .review-head .btn { margin-top: 12px; }
  .result-page .result-shell { padding-top: 20px; }
  .result-page .result-success, .result-page .result-report { padding: 22px 17px; }
  .result-page .result-report > div.my-3\.5 { align-items: flex-start; }
}

@media (max-width: 380px) {
  .assessment-page .question-status { max-width: 112px; }
  .assessment-page .status-row > span[aria-hidden] { display: none; }
  .assessment-page .status-row { display: block; }
  .assessment-page .overview-button span { display: none; }
  .assessment-page .overview-button { min-width: 38px; width: 38px; }
  .assessment-page #bnav .btn { padding-right: 10px; padding-left: 10px; font-size: 14px; }
  .assessment-page .star-btn { min-width: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .student-ui *, .student-ui *::before, .student-ui *::after { scroll-behavior: auto !important; }
}

/* Motion and tactile feedback */
.student-ui .btn,
.assessment-page .overview-button,
.assessment-page .star-btn {
  transition: transform .16s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.student-ui .btn:hover,
.assessment-page .overview-button:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgb(23 76 62 / 10%); }
.student-ui .btn:active,
.assessment-page .overview-button:active,
.assessment-page .star-btn:active { transform: scale(.96); }
.assessment-page #bar { transition: width .5s cubic-bezier(.2,.8,.25,1); }
.assessment-page #q.enter { animation: question-in .38s cubic-bezier(.2,.8,.25,1) both; }
.assessment-page .opt { transition: transform .16s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease; }
.assessment-page .opt:active { transform: scale(.985); }
.assessment-page .opt.on { animation: option-on .28s cubic-bezier(.2,.85,.3,1.25); }
.assessment-page .opt.on .box { animation: check-pop .3s cubic-bezier(.2,.85,.3,1.35); }
.assessment-page .star-btn.on .si { display: inline-block; animation: star-pop .38s cubic-bezier(.2,.85,.3,1.35); }
.assessment-page #review:not([hidden]) { animation: fade-in .25s ease both; }
.assessment-page #review:not([hidden]) > div { animation: review-up .38s cubic-bezier(.2,.8,.25,1) both; }
.assessment-page #modal:not([hidden]) { animation: fade-in .2s ease both; }
.assessment-page #modal:not([hidden]) > .card { animation: modal-pop .3s cubic-bezier(.2,.85,.3,1.08) both; }
.assessment-page .loading-mark { animation: loading-float 1.6s ease-in-out infinite; }
.assessment-page .qgrid button { transition: transform .15s ease, background-color .2s ease, border-color .2s ease; }
.assessment-page .qgrid button:hover { transform: translateY(-2px); }
.result-page .result-success { animation: result-up .6s cubic-bezier(.2,.8,.25,1) both; }
.result-page .done-badge { animation: badge-pop .65s .12s cubic-bezier(.2,.85,.3,1.2) both; }
.result-page .result-report { animation: result-up .65s .16s cubic-bezier(.2,.8,.25,1) both; }
.result-page .ring-score { animation: ring-in .7s .25s cubic-bezier(.2,.8,.25,1) both; }
@keyframes question-in { from { opacity:0; transform:translateX(18px) } to { opacity:1; transform:none } }
@keyframes option-on { 50% { transform:scale(1.012) } }
@keyframes check-pop { 0% { transform:scale(.65) rotate(-8deg) } 100% { transform:none } }
@keyframes star-pop { 50% { transform:scale(1.4) rotate(12deg) } }
@keyframes fade-in { from { opacity:0 } to { opacity:1 } }
@keyframes review-up { from { opacity:0; transform:translateY(20px) } to { opacity:1; transform:none } }
@keyframes modal-pop { from { opacity:0; transform:translateY(14px) scale(.94) } to { opacity:1; transform:none } }
@keyframes loading-float { 50% { transform:translateY(-6px) rotate(6deg) } }
@keyframes result-up { from { opacity:0; transform:translateY(22px) } to { opacity:1; transform:none } }
@keyframes badge-pop { from { opacity:0; transform:scale(.65) rotate(-8deg) } to { opacity:1; transform:none } }
@keyframes ring-in { from { opacity:0; transform:scale(.82) rotate(-18deg) } to { opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce) {
  .student-ui *, .student-ui *::before, .student-ui *::after { animation: none !important; transition: none !important; }
}