body.project-update-standard .recorded-script details,
body.project-update-standard .content-block[open] {
  overflow: visible;
}

body.project-update-standard #script .line {
  position: relative;
  margin: 10px 0;
  padding: 14px 46px 14px 14px;
  border: 1px solid #cbded9;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.project-update-standard #script .line::after {
  content: "🔊";
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 18px;
}

body.project-update-standard #script .line:hover,
body.project-update-standard #script .line:focus-visible,
body.project-update-standard #script .line.is-playing {
  border-color: #176c6b;
  box-shadow: 0 6px 16px rgba(23,108,107,.14);
  outline: none;
  transform: translateY(-1px);
}

body.project-update-standard #script .line .en,
body.project-update-standard #script .line .ja {
  margin: 0;
}

body.project-update-standard #script .line .ja { margin-top: 5px; }

.recorded-script-guide,
.standard-reverse-guide,
.roleplay-guide {
  margin: 10px 0 14px;
  color: #53696e;
  font-size: 14px;
}

.standard-reverse-tabs,
.roleplay-tabs,
.roleplay-actions,
.reverse-progress-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.standard-reverse-tabs button.is-active,
.roleplay-tabs button.is-active {
  color: #fff;
  background: #176c6b;
  border-color: #176c6b;
}

.standard-reverse-list { display: grid; gap: 12px; }

.standard-reverse-task {
  padding: 12px;
  border: 1px solid #cbded9;
  border-radius: 10px;
  background: #fbfefd;
}

.standard-reverse-card {
  width: 100%;
  min-height: 104px;
  padding: 14px;
  text-align: left;
  border: 0;
  background: transparent;
}

.standard-reverse-card .reverse-label {
  display: block;
  margin-bottom: 6px;
  color: #98631b;
  font-size: 12px;
  font-weight: 700;
}

.standard-reverse-card .reverse-prompt {
  display: block;
  font-size: 17px;
  font-weight: 700;
}

.standard-reverse-card .reverse-answer-text {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #d7e5e1;
  color: #174f68;
  font-size: 17px;
}

.standard-reverse-card .reverse-answer-text[hidden] { display: none; }
.practice-rating { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.practice-rating button.is-selected { color: #fff; }
.practice-rating .mark-mastered.is-selected { background: #28734f; border-color: #28734f; }
.practice-rating .mark-review.is-selected { background: #a96316; border-color: #a96316; }
.reverse-progress-summary { flex: 1 1 260px; align-self: center; font-weight: 700; color: #31525c; }

.roleplay-prompt-panel {
  margin-top: 22px;
  padding: 20px;
  border: 1px solid #b9d7cf;
  border-radius: 12px;
  background: linear-gradient(145deg,#f4fbf8,#fffaf1);
}

.roleplay-prompt-panel h3 { margin-top: 0; }
.roleplay-mode-note { min-height: 1.5em; color: #31525c; font-weight: 700; }
.roleplay-prompt-text {
  width: 100%;
  min-height: 330px;
  padding: 14px;
  border: 1px solid #bfd3ce;
  border-radius: 8px;
  background: #fff;
  color: #25383c;
  font: inherit;
  line-height: 1.6;
  resize: vertical;
}

.roleplay-actions .primary { text-decoration: none; }
.roleplay-copy-status { color: #28734f; font-weight: 700; }

@media (max-width: 560px) {
  .standard-reverse-tabs button,
  .roleplay-tabs button,
  .roleplay-actions button,
  .roleplay-actions a { flex: 1 1 100%; }
  .roleplay-prompt-panel { padding: 15px 12px; }
  .practice-rating { grid-template-columns: 1fr; }
}