/*
 * Translation KO-VN — restyled to the Saemi design system
 * (docs/design/saemi-design-system.md, docs/design/ui-principles.md).
 *
 * Values are the literal tokens from that doc rather than var(--...) refs
 * to the shell's foundation.css, since this stylesheet also has to work
 * standalone on the [translation_dashboard] page, which doesn't load the
 * shell's CSS. Class names are kept as-is wherever possible to minimize
 * changes to dashboard.js/renderTranslationUI.js/translationFlow.js.
 */

.dashboard-wrapper {
  padding: 0.5rem;
}

/* ---------- Lesson list (dashboard view) ---------- */

.lesson-row {
  margin-bottom: 24px;
}

.lesson-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px !important;
  color: #33431e;
}

/* Inline SVG icons dropped into text/headings/buttons throughout this
   module (see modules/icons.js) — align them with surrounding text. */
.icon-inline {
  vertical-align: -3px;
  margin-right: 4px;
  flex-shrink: 0;
}

.lesson-scroll-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}

.lesson-list {
  display: flex;
  overflow-x: auto;
  gap: 18px;
  scroll-snap-type: x mandatory;
  padding: 6px 4px 12px;
  scrollbar-width: none;
}

.lesson-list::-webkit-scrollbar {
  display: none;
}

.lesson-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 16px 30px rgba(138, 90, 38, 0.08);
  border: 1px solid rgba(69, 90, 52, 0.1);
  scroll-snap-align: start;
  min-width: 260px;
  width: 260px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lesson-card h5::before {
  content: none !important;
}

.lesson-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 34px rgba(138, 90, 38, 0.14);
}

.lesson-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: #2f2f2f;
  margin-bottom: 4px;
}

.lesson-title-vi {
  margin-bottom: 10px !important;
  font-style: italic;
  font-size: 15px;
  color: #312f2c;
  margin: 0 0 10px;
}

.lesson-level {
  color: #6c665d;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.lesson-preview {
  font-size: 0.88rem;
  color: #6c665d;
  margin: 0 0 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lesson-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}

.lesson-progress {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #6c665d;
}

.lesson-progress .icon-inline {
  width: 14px;
  height: 14px;
}

.lesson-progress--complete {
  color: #3d6b1d;
}

.lesson-position-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.84rem;
  color: #6c665d;
}

.lesson-position-hint .icon-inline {
  margin-right: 0;
}

.scroll-hint {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  font-size: 1.4rem;
  color: #6c665d;
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

/* ---------- Buttons ----------
   Selectors below double the class (e.g. ".btn.btn") to bump specificity to
   (0,2,0). The shell's foundation.css ships a ".saemi-embed :where(button)"
   reset (border/radius/background) whose specificity is also (0,1,0) — the
   :where() only zeroes out "button", not ".saemi-embed" — so a plain ".btn"
   rule ties with it and loses depending on stylesheet load order. Confirmed
   via a CDP matched-styles trace: the tie was silently going to the shell's
   reset, leaving these buttons with no visible background/border/radius at
   all once this panel is embedded (invisible standalone too, by luck of
   load order there, but not guaranteed). */

.btn.btn {
  height: 44px;
  padding: 0 20px;
  border-radius: 25px;
  border: none;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

/* Primary action: submit an answer in the practice view — the one true
   "primary action per moment" there (design doc: "One Primary Action Per
   Moment" / "Orange is for the main action, not for everything clickable").
   Matches the shell's .cta (orange gradient) button spec. */
.btn-submit.btn-submit {
  background: linear-gradient(180deg, #ff901d, #f17108);
  color: #ffffff;
  box-shadow: 0 14px 24px rgba(240, 113, 8, 0.2);
}

.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(240, 113, 8, 0.26);
  color: #ffffff;
}

/* Secondary actions: hint, prev/next — white surface, olive border/text.
   The lesson list has ~15 equal cards per level; giving every one of them
   the orange primary treatment made the whole screen shout at once with no
   actual primary action, so "start this lesson" (below) gets its own quiet
   icon-button treatment instead. */
.btn-hint.btn-hint,
.btn-nav.btn-nav {
  background: #ffffff;
  color: #148a12;
  border: 1px solid rgba(69, 90, 52, 0.18);
}

.btn-hint:hover,
.btn-nav:hover {
  background: #edf7e8;
  border-color: rgba(20, 138, 18, 0.32);
  color: #148a12;
}

/* Compact circular icon buttons — the lesson card's "enter" arrow
   (bottom-right, in .lesson-card-footer) and the practice view's "back to
   dashboard" (top-right of .translation-left-header, replacing what used to
   be a text button sitting oddly among the submit/hint actions). */
.btn-start.btn-start,
.btn-circle.btn-circle {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: #edf7e8;
  color: #148a12;
  flex-shrink: 0;
}

.btn-start .icon-inline,
.btn-circle .icon-inline {
  margin-right: 0;
  vertical-align: middle;
  display: block;
}

.btn-start:hover,
.btn-circle:hover {
  background: #148a12;
  color: #ffffff;
}

/* Smaller circular icon buttons — mic/speaker in the input area, where a
   full 40px .btn-circle would crowd the label row. */
.btn-circle-sm.btn-circle-sm {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  background: #edf7e8;
  color: #148a12;
  flex-shrink: 0;
}

.btn-circle-sm .icon-inline {
  margin-right: 0;
  vertical-align: middle;
  display: block;
}

.btn-circle-sm:hover {
  background: #148a12;
  color: #ffffff;
}

/* Recording state (mic-btn while listening) — pulses orange like the
   submit button's accent color so it reads as "active/attention". */
.btn-circle-sm.is-recording {
  background: #ff901d;
  color: #ffffff;
  animation: saemi-mic-pulse 1.2s ease-in-out infinite;
}

@keyframes saemi-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 144, 29, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(255, 144, 29, 0); }
}

/* Discoverability nudge for the full-text panel toggle, shown every time a
   learner finishes a lesson — orange pulse (same accent as
   .btn-submit/.is-recording, chosen specifically because it stands out more
   than the button's own green) until they open the panel. See
   celebrateLessonComplete() / openPanel() in translationFlow.js. */
.btn-circle.is-hinting {
  animation: saemi-full-text-hint-pulse 1.8s ease-in-out infinite;
}

@keyframes saemi-full-text-hint-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 144, 29, 0.45); }
  50% { box-shadow: 0 0 0 8px rgba(255, 144, 29, 0); }
}

/* .btn-start only: nudge the arrow right on hover (not the back button). */
.btn-start:hover {
  transform: translateX(2px);
}

/* margin-left: auto keeps .btn-start pinned right even when the lesson
   card has no progress badge — a lone flex child under
   justify-content:space-between would otherwise sit at flex-start. */
.btn-start.btn-start {
  margin-left: auto;
}

.btn-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.btn-next.hidden {
  display: none;
}

/* ---------- Practice view ---------- */

.translation-wrapper {
  background: transparent;
  color: #2f2f2f;
  padding: 0;
}

.translation-container {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .translation-container {
    flex-direction: row;
    align-items: flex-start;
  }

  .translation-left {
    flex: 1 1 60%;
  }

  .translation-right {
    flex: 1 1 30%;
  }
}

@media (max-width: 767px) {
  .translation-container {
    flex-direction: column;
  }

  .translation-left,
  .translation-right {
    width: 100%;
  }
}

.translation-left-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.translation-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.tooltip-trigger {
  position: relative;
}

.tooltip-trigger::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(47, 47, 47, 0.94);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease;
  z-index: 30;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.tooltip-trigger:hover::after,
.tooltip-trigger:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

.translation-left .lesson-title {
  font-size: 1.3rem;
  color: #33431e;
  margin-bottom: 4px;
}

.translation-left .lesson-title-vi {
  margin-bottom: 16px;
}

.paragraph-box {
  background: #ffffff;
  padding: 20px;
  color: #2f2f2f;
  border-radius: 20px;
  border: 1px solid rgba(69, 90, 52, 0.1);
  box-shadow: 0 16px 30px rgba(138, 90, 38, 0.06);
  line-height: 1.6;
  font-size: 1rem;
  margin-bottom: 20px;
  max-height: 55vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #b7c39f transparent;
}

.paragraph-box::-webkit-scrollbar {
  width: 6px;
}

.paragraph-box::-webkit-scrollbar-track {
  background: transparent;
}

.paragraph-box::-webkit-scrollbar-thumb {
  background: #b7c39f;
  border-radius: 10px;
}

/* Full-text reference modal — review/memorization material, a popup
   overlay separate from the per-sentence practice flow underneath. */
.full-text-modal-backdrop {
  border-radius: 5px;
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(47, 47, 47, 0.5);
}

.full-text-modal-backdrop[hidden] {
  display: none !important;
}

.full-text-modal-card {
  width: min(640px, 100%);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  padding: 18px 20px 20px;
  border-radius: 20px;
  border: 1px solid rgba(69, 90, 52, 0.1);
  box-shadow: 0 24px 48px rgba(47, 47, 47, 0.24);
}

.full-text-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  margin-bottom: 16px;
}

.full-text-modal-close {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: #f7fbf3;
  color: #6c665d;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.full-text-modal-close:hover {
  background: #edf7e8;
  color: #33431e;
}

.full-text-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Next-step suggestion cards, below the reference text. */
.full-text-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(69, 90, 52, 0.1);
  flex-shrink: 0;
}

@media (max-width: 520px) {
  .full-text-actions {
    grid-template-columns: 1fr;
  }
}

.full-text-action-card {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 12px 14px;
  border: 0px solid rgba(69, 90, 52, 0.14);
  border-radius: 16px;
  color: #2f2f2f;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.full-text-action-card:hover {
  background: #edf7e8;
  border-color: rgba(20, 138, 18, 0.32);
  transform: translateY(-1px);
}

.full-text-rate-btn {
  flex-shrink: 0;
  border: 1px solid rgba(69, 90, 52, 0.18);
  background: #ffffff;
  color: #148a12;
  font-size: 0.8rem !important;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}

.full-text-rate-btn:hover {
  background: #edf7e8;
  border-color: rgba(20, 138, 18, 0.32);
}

/* Real <audio>-backed player for "Đọc to toàn bài" (see lessonAudio.js +
   setupFullTextPanel() in translationFlow.js) — spans both grid columns so
   the seek bar has room, with the "Luyện nghe chép" card below/beside it. */
.full-text-audio-player {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 16px;
  background: #f7faf3;
  border: 1px solid rgba(69, 90, 52, 0.14);
  flex-wrap: wrap;
}

.full-text-audio-time {
  font-size: 0.78rem;
  font-weight: 600;
  color: #6c665d;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.full-text-audio-seek {
  flex: 1;
  min-width: 80px;
  accent-color: #148a12;
  cursor: pointer;
}

.full-text-audio-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.full-text-audio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 0;
  background: #edf7e8;
  color: #148a12;
  cursor: pointer;
}

.full-text-audio-btn:hover {
  background: #cef7cd;
}

.full-text-audio-btn--play {
 
  background: #cef7cd;
  color: #100f0f;
}

.full-text-audio-btn--play:hover {
  background: #e3f9e2;
}

#full-text-audio-fwd {
  color: #1c1a1a;
}

#full-text-audio-fwd:hover {
  background: #cef7cd;
}

/* Fallback mode (browser voice, no seek support) — hide the controls that
   only make sense with a real seekable audio file. */
.full-text-audio-player.is-fallback .full-text-audio-time,
.full-text-audio-player.is-fallback .full-text-audio-seek,
.full-text-audio-player.is-fallback #full-text-audio-back,
.full-text-audio-player.is-fallback #full-text-audio-fwd {
  display: none;
}

.full-text-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #edf7e8;
  color: #148a12;
  font-size: 1.05rem;
}

.full-text-action-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.full-text-action-copy strong {
  font-size: 0.88rem;
  color: #33431e;
}

.full-text-action-copy span {
  font-size: 0.78rem;
  color: #6c665d;
  line-height: 1.3;
}

/* Segmented toggle — a single sliding "thumb" glides between the two
   buttons (sized/positioned to match each label exactly, computed in JS —
   see moveModeThumb() in translationFlow.js) rather than each button
   independently flipping its own background, which reads more like a
   native iOS/macOS segmented control than two separately-colored buttons. */
.full-text-mode-toggle {
  position: relative;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: #f7fbf3;
}

.full-text-mode-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  width: 0;
  border-radius: 999px;
  background: #148a12;
  box-shadow: 0 4px 10px rgba(20, 138, 18, 0.28);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.full-text-mode-btn {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  color: #6c665d;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s ease;
}

.full-text-mode-btn.is-active {
  color: #ffffff;
}

.full-text-pair {
  padding: 10px 0;
  border-bottom: 1px solid rgba(69, 90, 52, 0.1);
}

.full-text-pair:last-child {
  border-bottom: 0;
}

.full-text-vi {
  color: #2f2f2f;
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 4px;
}

.full-text-index {
  color: #6c665d;
  font-weight: 700;
}

.full-text-ko {
  color: #33431e;
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.5;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Hear just this one sentence — reuses .btn-circle-sm's sizing/hover, just
   shrunk slightly since it sits inline with the text instead of in its own
   toolbar row. */
.full-text-sentence-speak-btn.full-text-sentence-speak-btn {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.full-text-sentence-speak-btn .icon-inline {
  width: 13px;
  height: 13px;
}

.full-text-korean-flow {
  color: #2f2f2f;
  font-size: 1rem;
  line-height: 1.8;
  margin: 0;
}

.highlight {
  color: #8f5d25;
  background: none !important;
  font-weight: 700;
}

/* ---------- Input ---------- */

.input-label-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.input-tools {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  justify-content: flex-end;
}

.input-label {
  font-size: 0.9rem;
  color: #6c665d;
  display: block;
  font-weight: 500;
}

/* .input-area.input-area: same specificity-tie fix as the buttons above —
   foundation.css resets textareas the same way via :where(). */
.input-area.input-area {
  width: 100%;
  height: 60px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #ffffff;
  color: #2f2f2f;
  border: 1px solid rgba(69, 90, 52, 0.18);
  font-family: inherit;
  resize: none;
  font-size: 1rem;
  margin-bottom: 16px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-area:focus {
  outline: none;
  border-color: #f17108;
  box-shadow: 0 0 0 3px rgba(240, 113, 8, 0.16);
}

/* Recording state on the textarea itself -- mirrors mic-btn's pulse (same
   color/rhythm) so the "listening" signal is visible even when the
   learner's attention is on the text, not just the small mic button. */
.input-area.is-recording {
  border-color: #ff901d;
  animation: saemi-mic-pulse 1.2s ease-in-out infinite;
}

/* Recording indicator (pulsing dot + wave bars) shown inline in the input
   label while the mic is listening -- an actual recording cue instead of a
   static emoji. Orange to match .is-recording elsewhere, sized for sitting
   on the light label background rather than inside a solid button. */
.recording-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 6px;
  vertical-align: middle;
}

.recording-indicator-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #ff901d;
  box-shadow: 0 0 0 0 rgba(255, 144, 29, 0.5);
  animation: saemi-recording-dot-pulse 1.1s ease-out infinite;
}

.recording-indicator-wave {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.recording-indicator-wave span {
  width: 3px;
  height: 7px;
  border-radius: 999px;
  background: #ff901d;
  animation: saemi-recording-wave 0.9s ease-in-out infinite;
}

.recording-indicator-wave span:nth-child(2) {
  height: 11px;
  animation-delay: 0.08s;
}

.recording-indicator-wave span:nth-child(3) {
  height: 9px;
  animation-delay: 0.16s;
}

@keyframes saemi-recording-dot-pulse {
  0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255, 144, 29, 0.5); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(255, 144, 29, 0); }
  100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255, 144, 29, 0); }
}

@keyframes saemi-recording-wave {
  0%, 100% { transform: scaleY(0.6); opacity: 0.6; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ---------- Action row / progress ---------- */

.action-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 0;
}

.main-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.composer-mic-btn.composer-mic-btn {
  margin-left: 2px;
}

@media (min-width: 768px) {
  .composer-mic-btn.composer-mic-btn {
    width: auto;
    min-width: 80px;
    height: 44px;
    padding: 0 16px;
    border-radius: 25px;
    background: #ffffff;
    color: #148a12;
    border: 1px solid rgba(69, 90, 52, 0.18);
  }

  .composer-mic-btn.composer-mic-btn:hover {
    background: #edf7e8;
    border-color: rgba(20, 138, 18, 0.32);
    color: #148a12;
  }
}

.progress-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Composer bar — input + submit/hint + progress nav. Sticky to the bottom
   of .translation-left, so it docks once the column's content (paragraph +
   feedback flow) is taller than the viewport. With short lessons it just
   sits in normal flow below the paragraph — no forced min-height on the
   column to chase the screen's edge. */
.composer-bar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  padding: 14px 0 16px;
}

.progress-bar {
  background-color: rgba(69, 90, 52, 0.12);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
  width: 100%;
}

.progress-fill {
  height: 100%;
  background-color: #148a12;
  transition: width 0.3s ease;
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.progress-text {
  font-size: 0.9rem;
  color: #6c665d;
  font-weight: 600;
}

/* ---------- Daily-limit notice ---------- */

.limit-notice-box {
  color: #8f5d25;
  border-radius: 16px;
  font-size: 0.9rem;
  font-weight: 400;
  margin-bottom: 16px;
}

.btn-upgrade {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 16px;
  background: linear-gradient(180deg, #ff901d, #f17108);
  color: #ffffff !important;
  border-radius: 25px;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none !important;
}

/* ---------- Accuracy score ---------- */

.feedback-result-box {
  background: #edf7e8;
  padding: 12px 16px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #2f2f2f;
  margin-bottom: 16px;
  font-size: 0.94rem;
}

.result-icon {
  font-size: 1.1rem;
}

.result-text {
  font-size: 0.94rem;
}

.text-green-400 {
  color: #3d6b1d;
  font-weight: 800;
}

.text-yellow-400 {
  color: #8f5d25;
  font-weight: 800;
}

.text-red-400,
.text-red-500 {
  color: #a33c16;
  font-weight: 800;
}

/* ---------- AI feedback panel ---------- */

.feedback-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #33431e;
  margin: 16px 0 12px;
}

.feedback-box {
  font-size: 0.96rem;
  background: #ffffff;
  border: 1px solid rgba(69, 90, 52, 0.1);
  padding: 18px;
  line-height: 1.6;
  border-radius: 20px;
  margin-bottom: 20px;
  color: #2f2f2f;
  max-height: 65vh;
  overflow-y: auto;
}

.feedback-section {
  border-top: 1px solid rgba(69, 90, 52, 0.12);
  padding-top: 14px;
  margin-top: 16px;
}

.tips-label {
  font-weight: 700;
  font-size: 0.9rem;
  color: #33431e;
  margin-bottom: 10px;
}

.hint-box {
  font-size: 0.92rem;
  color: #2f2f2f;
  background: #edf7e8;
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 8px;
}

/* showCurrentSentence() (translationFlow.js) clears this to empty on every
   sentence change — collapse it instead of showing a blank tinted block. */
.hint-box:empty {
  display: none;
}

/* Feedback sub-panels rendered by gptCheck.js's formatGptJson() */

.translation-feedback-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.translation-feedback-block {
  border-radius: 16px;
  padding: 16px 18px;
  background: #f7fbf3;
  border-left: 4px solid rgba(69, 90, 52, 0.18);
}

.translation-feedback-block--suggestion {
  background: #edf7e8;
  border-left-color: #148a12;
}

.translation-feedback-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 800;
  color: #33431e;
  margin-bottom: 10px;
}

.translation-feedback-block--suggestion .translation-feedback-heading {
  color: #3d6b1d;
}

.translation-feedback-body {
  font-size: 0.92rem;
  line-height: 1.65;
  color: #2f2f2f;
}

.translation-feedback-body p {
  margin: 0;
}

.translation-feedback-body p + p {
  margin-top: 5px;
}

.translation-feedback-subhead {
  display: block;
  font-weight: 700;
  margin: 12px 0 6px;
}

.translation-feedback-subhead--correct {
  color: #3d6b1d;
}

.translation-feedback-subhead--incorrect {
  color: #a33c16;
}

.criteria {
  color: #148a12;
  font-weight: 700;
}

.translation-mark-error {
  background: rgba(163, 60, 22, 0.12);
  color: #a33c16;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 4px;
}

.translation-mark-minor {
  background: rgba(143, 93, 37, 0.14);
  color: #8f5d25;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 4px;
}