:root {
  --p-ink: #20223a;
  --p-muted: #73758a;
  --p-line: rgba(130, 116, 190, 0.18);
  --p-card: rgba(255, 255, 255, 0.86);
  --p-purple: #815ff2;
  --p-purple-dark: #6544d4;
  --p-blue: #6eb7e8;
  --p-green: #7ed6bc;
  --p-yellow: #f2c84b;
  --p-red: #f26d74;
  --p-shadow: 0 22px 70px rgba(113, 91, 170, 0.16);
  --p-radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--p-ink);
  background:
    radial-gradient(circle at 18% 18%, rgba(181, 142, 255, 0.24), transparent 34%),
    radial-gradient(circle at 78% 12%, rgba(131, 223, 207, 0.24), transparent 34%),
    linear-gradient(135deg, #fbf7ff 0%, #f6fbff 100%);
}

button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled {
  cursor: not-allowed;
  opacity: .48;
  box-shadow: none;
}

.participant-app {
  min-height: 100vh;
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 24px 18px 46px;
}

.top-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 42px;
}

.mini-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--p-muted);
  font-size: 12px;
}

.mini-brand strong {
  color: var(--p-purple);
  font-size: 19px;
  letter-spacing: 0;
}

.mini-actions { display: flex; gap: 8px; }

.dev-tools {
  display: none;
}

.tiny-link {
  min-height: 38px;
  border: 1px solid var(--p-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--p-muted);
  padding: 8px 13px;
  box-shadow: 0 12px 32px rgba(140, 118, 194, .12);
  white-space: nowrap;
}

.back-link[hidden] { display: none; }

.screen {
  display: none;
  min-height: calc(100vh - 86px);
  align-items: center;
  justify-content: center;
  padding: 18px 0;
}

.screen.active { display: flex; }

.simple-card, .record-shell {
  width: min(560px, 100%);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  background: var(--p-card);
  box-shadow: var(--p-shadow);
  padding: 38px 36px;
  backdrop-filter: blur(16px);
}

.welcome-card {
  text-align: center;
  padding-top: 58px;
  padding-bottom: 54px;
  position: relative;
  overflow: hidden;
}

.welcome-card::after {
  content: "";
  position: absolute;
  inset: auto -8% -18% -8%;
  height: 110px;
  background: linear-gradient(105deg, rgba(165, 140, 255, .25), rgba(125, 220, 205, .28));
  border-radius: 50% 50% 0 0;
  pointer-events: none;
}

.step-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--p-purple);
  background: rgba(129, 95, 242, .10);
  font-weight: 800;
  font-size: 12px;
}

h1, h2 {
  margin: 20px 0 12px;
  line-height: 1.18;
  letter-spacing: 0;
}

h1 { font-size: 34px; }
h2 { font-size: 26px; text-align: center; }
p { color: var(--p-muted); line-height: 1.65; }
small, .subcopy { color: var(--p-muted); line-height: 1.65; }

.emotion-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 24px 0;
}

.emotion-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.emotion-dot.happy { background: var(--p-yellow); }
.emotion-dot.neutral { background: var(--p-green); }
.emotion-dot.sad { background: var(--p-blue); }
.emotion-dot.angry { background: var(--p-red); }

.welcome-actions, .two-actions, .admin-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}

.main-cta, .ghost-cta, .about-inline-btn {
  min-height: 48px;
  border-radius: 10px;
  border: 0;
  padding: 12px 22px;
  font-weight: 800;
}

.main-cta {
  background: linear-gradient(135deg, var(--p-purple), var(--p-purple-dark));
  color: white;
  box-shadow: 0 16px 28px rgba(113, 84, 219, .22);
}

.ghost-cta, .about-inline-btn {
  color: var(--p-purple-dark);
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--p-line);
}

.about-inline-btn { min-width: 170px; }
.wide { width: 100%; margin-top: 8px; }

.compact-form {
  display: grid;
  gap: 12px;
  margin: 18px 0;
}

.compact-form label {
  display: grid;
  gap: 6px;
  color: var(--p-muted);
  font-size: 13px;
}

select, input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--p-line);
  border-radius: 10px;
  background: #fff;
  color: var(--p-ink);
  padding: 0 12px;
}

.consent-info, .consent-box, .sentence-preview {
  display: grid;
  gap: 7px;
  border: 1px solid var(--p-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .7);
  padding: 14px;
  margin: 12px 0;
}

.consent-box {
  grid-template-columns: auto 1fr;
  text-align: left;
  font-size: 13px;
  color: var(--p-muted);
}

.secondary-consent { opacity: .9; }

.soft-meter {
  height: 9px;
  border-radius: 99px;
  background: rgba(129, 95, 242, .12);
  overflow: hidden;
  margin: 18px 0;
}

.soft-meter > div {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--p-green), var(--p-purple));
}

.status-line { color: var(--p-muted); }

#screen-mic .simple-card {
  width: min(620px, 100%);
}

#screen-mic h2,
#screen-mic .subcopy {
  text-align: left;
}

#screen-mic .sentence-preview {
  margin-top: 22px;
}

#screen-mic .soft-meter {
  margin: 22px 0 24px;
}

#screen-mic .status-line {
  margin: 4px 0 18px;
  color: var(--p-ink);
  font-weight: 700;
}

#screen-mic #micTestBtn {
  color: white;
  background: linear-gradient(135deg, var(--p-purple), var(--p-purple-dark));
  box-shadow: 0 14px 26px rgba(113, 84, 219, .20);
}

#screen-mic #micNextBtn:disabled {
  background: rgba(129, 95, 242, .18);
  color: rgba(32, 34, 58, .58);
}

.guide-list-v2 {
  display: grid;
  gap: 12px;
  margin: 22px 0;
}

.guide-list-v2 div {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: center;
  color: var(--p-muted);
}

.guide-list-v2 span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--p-purple);
  font-weight: 800;
}

.part-intro-card {
  text-align: center;
}

.part-intro-card .subcopy {
  margin: 18px auto 0;
  max-width: 500px;
  text-align: left;
}

.part-intro-note {
  margin: 18px auto 22px;
  max-width: 500px;
  border: 1px solid rgba(129, 95, 242, .14);
  border-radius: 14px;
  background: rgba(250, 247, 255, .72);
  padding: 14px 16px;
  color: var(--p-muted);
  text-align: center;
}

.record-shell {
  width: min(620px, 100%);
  text-align: center;
  padding: 34px 36px 32px;
}

.record-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  text-align: left;
}

.record-top span, .count-soft {
  color: var(--p-muted);
  font-size: 13px;
}

.progress-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(129, 95, 242, .12);
  margin: 18px 0;
  overflow: hidden;
}

#progressFill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--p-purple), var(--p-green));
}

.emotion-badge-v2 {
  display: inline-flex;
  justify-content: center;
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 800;
  background: rgba(129, 95, 242, .1);
  color: var(--p-purple-dark);
}

.emotion-run-text {
  margin-top: 8px;
  color: var(--p-muted);
  font-size: 13px;
  text-align: center;
}

.sentence-card-v2 {
  display: grid;
  gap: 12px;
  margin: 20px auto 12px;
  border: 1px solid var(--p-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
  padding: 24px 22px;
  text-align: center;
}

.scenario-title {
  color: var(--p-purple-dark);
  font-style: normal;
  font-weight: 800;
}

#sentenceEn {
  font-size: 24px;
  line-height: 1.38;
}

#sentenceTh, .hint-v2 {
  color: var(--p-muted);
  line-height: 1.55;
}

.hint-v2 {
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(129, 95, 242, .14);
  border-radius: 999px;
  background: rgba(250, 247, 255, .74);
  padding: 8px 14px;
  margin: 0 auto 18px;
  text-align: center;
}

.recorder-v2 {
  display: grid;
  justify-items: center;
  gap: 10px;
  border-radius: 14px;
  background: rgba(250, 247, 255, .72);
  padding: 20px 14px 18px;
}

.record-btn-v2 {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 10px solid rgba(255, 255, 255, .94);
  background: var(--p-red);
  box-shadow: 0 18px 34px rgba(242, 109, 116, .24);
}

.record-btn-v2.recording {
  animation: pulse 1s ease infinite;
}

@keyframes pulse {
  50% { transform: scale(.94); box-shadow: 0 0 0 10px rgba(242, 109, 116, .14); }
}

.timer-v2 {
  font-size: 25px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

.playback-v2 {
  width: 100%;
  margin: 16px 0 12px;
}

.dev-mock-btn { display: none; }
.dev-mode .dev-mock-btn { display: inline-flex; }
.dev-mode .dev-tools {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 80;
  display: flex;
  gap: 8px;
  opacity: .76;
}
.dev-mode .dev-tools .tiny-link {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
  box-shadow: 0 10px 24px rgba(140, 118, 194, .12);
}
.two-actions .dev-mock-btn {
  min-height: 40px;
  padding: 9px 14px;
  font-size: 12px;
  opacity: .68;
  flex: 0 0 100%;
  width: fit-content;
  margin: 2px auto 0;
  background: rgba(255, 255, 255, .56);
}
.admin-only { display: none !important; }

.hidden-metadata {
  display: none;
  margin-top: 12px;
  max-height: 160px;
  overflow: auto;
  font-size: 11px;
}
.dev-mode .hidden-metadata { display: block; }

.success-bubble {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  border-radius: 50%;
  color: white;
  background: var(--p-green);
  font-weight: 900;
  font-size: 28px;
}

.completion-code {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 12px 0;
  font-size: 14px;
  font-weight: 900;
  color: rgba(101, 68, 212, .62);
  letter-spacing: 0;
}

.checkpoint-card, .complete-card {
  text-align: center;
}

.checkpoint-card .step-chip, .complete-card .step-chip {
  margin-top: 14px;
}

.checkpoint-card .subcopy, .complete-card .subcopy, .participant-note {
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

dialog {
  width: min(720px, calc(100% - 28px));
  border: 1px solid var(--p-line);
  border-radius: 16px;
  box-shadow: var(--p-shadow);
  padding: 0;
}

dialog::backdrop { background: rgba(41, 34, 70, .28); }

.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px;
  border-bottom: 1px solid var(--p-line);
}

.about-content, .assignment-preview {
  padding: 18px;
}

.about-grid, .assignment-preview {
  display: grid;
  gap: 12px;
}

.about-grid div, .assignment-item, .about-consent {
  border: 1px solid var(--p-line);
  border-radius: 12px;
  padding: 14px;
  background: rgba(250, 247, 255, .72);
}

.about-grid span, .assignment-item span, .assignment-item small {
  display: block;
  color: var(--p-muted);
  margin-top: 5px;
}

.about-note { margin-bottom: 0; }

.transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  place-items: center;
  text-align: center;
  padding: 20px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(18px);
}

.transition-overlay.on {
  display: grid;
  animation: overlayFade var(--transition-overlay-ms, 3000ms) ease both;
}

.transition-overlay strong {
  display: block;
  margin: 10px 0;
  font-size: 42px;
}

.transition-overlay span, .transition-overlay small, .transition-overlay p {
  color: var(--p-muted);
}

@keyframes overlayFade {
  0% { opacity: 0; transform: scale(.98); }
  15% { opacity: 1; transform: scale(1); }
  82% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.01); }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  pointer-events: none;
  border-radius: 999px;
  padding: 12px 18px;
  color: white;
  background: rgba(32, 34, 58, .9);
  transition: .2s ease;
  z-index: 60;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 720px) {
  .participant-app { padding: 18px 12px 36px; }
  .top-mini { align-items: flex-start; gap: 8px; }
  .mini-brand { flex-direction: column; align-items: flex-start; gap: 2px; }
  .mini-actions { justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
  .tiny-link { min-height: 34px; padding: 7px 10px; font-size: 12px; }
  .simple-card, .record-shell { padding: 28px 20px; border-radius: 16px; }
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  #sentenceEn { font-size: 20px; }
  .welcome-actions, .two-actions { flex-direction: column; }
  .main-cta, .ghost-cta, .about-inline-btn { width: 100%; }
  .two-actions .dev-mock-btn { width: 100%; }
  .record-top { align-items: flex-start; }
  .record-btn-v2 { width: 76px; height: 76px; }
  .dev-mode .dev-tools { right: 10px; bottom: 10px; }
}